From 3cc3559348155f7e05b6c1c0da934910072dcf77 Mon Sep 17 00:00:00 2001
From: Geert Selderslaghs <geert@codemindit.com>
Date: Sun, 15 Dec 2024 21:01:59 +0100
Subject: [PATCH 01/43] accessibility(Autocomplete) implemented tabindex and
 aria expanded #538

---
 src/autocomplete.ts | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/autocomplete.ts b/src/autocomplete.ts
index e07ee62335..944736b8b7 100644
--- a/src/autocomplete.ts
+++ b/src/autocomplete.ts
@@ -3,7 +3,7 @@ import { Dropdown, DropdownOptions } from "./dropdown";
 import { Component, BaseOptions, InitElements, MElement } from "./component";
 
 export 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
    */
@@ -82,7 +82,7 @@ let _defaults: AutocompleteOptions = {
   onSearch: (text: string, autocomplete: Autocomplete) => {
     const normSearch = text.toLocaleLowerCase();
     autocomplete.setMenuItems(
-      autocomplete.options.data.filter((option) => 
+      autocomplete.options.data.filter((option) =>
         option.id.toString().toLocaleLowerCase().includes(normSearch)
           || option.text?.toLocaleLowerCase().includes(normSearch)
       )
@@ -118,7 +118,7 @@ export class Autocomplete extends Component<AutocompleteOptions> {
       ...Autocomplete.defaults,
       ...options
     };
-    
+
     this.isOpen = false;
     this.count = 0;
     this.activeIndex = -1;
@@ -215,6 +215,7 @@ export class Autocomplete extends Component<AutocompleteOptions> {
     this.container.style.maxHeight = this.options.maxDropDownHeight;
     this.container.id = `autocomplete-options-${Utils.guid()}`;
     this.container.classList.add('autocomplete-content', 'dropdown-content');
+    this.container.ariaExpanded = 'true';
     this.el.setAttribute('data-target', this.container.id);
 
     this.menuItems.forEach(menuItem => {
@@ -260,6 +261,7 @@ export class Autocomplete extends Component<AutocompleteOptions> {
   }
 
   _removeDropdown() {
+    this.container.ariaExpanded = 'false';
     this.container.parentNode.removeChild(this.container);
   }
 
@@ -368,6 +370,7 @@ export class Autocomplete extends Component<AutocompleteOptions> {
       'style',
       'display:grid; grid-auto-flow: column; user-select: none; align-items: center;'
     );
+    item.tabIndex = 0;
     // Checkbox
     if (this.options.isMultiSelect) {
       item.innerHTML = `

From 535105125c56739bb8cdc2af88932c91a8b3682c Mon Sep 17 00:00:00 2001
From: Geert Selderslaghs <geert@codemindit.com>
Date: Sun, 15 Dec 2024 20:05:16 +0100
Subject: [PATCH 02/43] accessibility(FloatingActionButton) implemented
 tabindex and aria expanded #540

---
 src/buttons.ts | 31 ++++++++++++++++++++++++++++---
 1 file changed, 28 insertions(+), 3 deletions(-)

diff --git a/src/buttons.ts b/src/buttons.ts
index 3d4a6a5853..cd79262146 100644
--- a/src/buttons.ts
+++ b/src/buttons.ts
@@ -1,4 +1,5 @@
 import { Component, BaseOptions, InitElements, MElement, Openable } from "./component";
+import { Utils } from './utils';
 
 export interface FloatingActionButtonOptions extends BaseOptions {
   /**
@@ -59,6 +60,8 @@ export class FloatingActionButton extends Component<FloatingActionButtonOptions>
     this.offsetX = 0;
 
     this.el.classList.add(`direction-${this.options.direction}`);
+    this._anchor.tabIndex = 0;
+    this._menu.ariaExpanded = 'false';
     if (this.options.direction === 'top')
       this.offsetY = 40;
     else if (this.options.direction === 'right')
@@ -111,6 +114,7 @@ export class FloatingActionButton extends Component<FloatingActionButtonOptions>
     } else {
       this.el.addEventListener('click', this._handleFABClick);
     }
+    this.el.addEventListener('keypress', this._handleFABKeyPress);
   }
 
   _removeEventHandlers() {
@@ -120,9 +124,20 @@ export class FloatingActionButton extends Component<FloatingActionButtonOptions>
     } else {
       this.el.removeEventListener('click', this._handleFABClick);
     }
+    this.el.removeEventListener('keypress', this._handleFABKeyPress);
   }
 
   _handleFABClick = () => {
+    this._handleFABToggle()
+}
+
+  _handleFABKeyPress = (e) => {
+    if(Utils.keys.ENTER.includes(e.key)) {
+      this._handleFABToggle();
+    }
+  }
+
+  _handleFABToggle = () => {
     if (this.isOpen) {
       this.close();
     } else {
@@ -164,9 +179,10 @@ export class FloatingActionButton extends Component<FloatingActionButtonOptions>
 
   _animateInFAB() {
     this.el.classList.add('active');
+    this._menu.ariaExpanded = 'true';
     const delayIncrement = 40;
     const duration = 275;
-    
+
     this._floatingBtnsReverse.forEach((el, index) => {
       const delay = delayIncrement * index;
       el.style.transition = 'none';
@@ -181,6 +197,7 @@ export class FloatingActionButton extends Component<FloatingActionButtonOptions>
           el.style.transition = `opacity ${duration}ms ease, transform ${duration}ms ease`;
           el.style.opacity = '1';
           el.style.transform = 'translate(0, 0) scale(1)';
+          el.tabIndex = 0;
         }, 1);
       }, delay);
     });
@@ -188,12 +205,16 @@ export class FloatingActionButton extends Component<FloatingActionButtonOptions>
 
   _animateOutFAB() {
     const duration = 175;
-    setTimeout(() => this.el.classList.remove('active'), duration);
+    setTimeout(() => {
+      this.el.classList.remove('active'), duration;
+      this._menu.ariaExpanded = 'false';
+    });
     this._floatingBtnsReverse.forEach((el) => {
       el.style.transition = `opacity ${duration}ms ease, transform ${duration}ms ease`;
       // to
       el.style.opacity = '0';
       el.style.transform = `translate(${this.offsetX}px, ${this.offsetY}px) scale(0.4)`;
+      el.tabIndex = -1;
     });
   }
 
@@ -225,6 +246,7 @@ export class FloatingActionButton extends Component<FloatingActionButtonOptions>
     this.el.style.left = '0';
     this.el.style.transform = 'translateX(' + this.offsetX + 'px)';
     this.el.style.transition = 'none';
+    this._menu.ariaExpanded = 'true';
 
     this._anchor.style.transform = `translateY(${this.offsetY}px`;
     this._anchor.style.transition = 'none';
@@ -246,7 +268,10 @@ export class FloatingActionButton extends Component<FloatingActionButtonOptions>
         backdrop.style.transform = 'scale(' + scaleFactor + ')';
         backdrop.style.transition = 'transform .2s cubic-bezier(0.550, 0.055, 0.675, 0.190)';
 
-        this._menu.querySelectorAll('li > a').forEach((a: HTMLAnchorElement) => a.style.opacity = '1');
+        this._menu.querySelectorAll('li > a').forEach((a: HTMLAnchorElement) => {
+          a.style.opacity = '1';
+          a.tabIndex = 0;
+        });
 
         // Scroll to close.
         window.addEventListener('scroll', this.close, true);

From 7e1f83fa122d922c998402a1abb19b7f2be0db17 Mon Sep 17 00:00:00 2001
From: Geert Selderslaghs <geert@codemindit.com>
Date: Fri, 27 Dec 2024 15:58:18 +0100
Subject: [PATCH 03/43] enhancement(Datepicker) refactor styling to accomply
 with material m3 standards #558; implemented styling for in range (wip) #360

---
 sass/components/_datepicker.scss | 84 ++++++++++++++++++++++++--------
 src/datepicker.ts                | 13 +++--
 2 files changed, 74 insertions(+), 23 deletions(-)

diff --git a/sass/components/_datepicker.scss b/sass/components/_datepicker.scss
index be6491e9c3..f276473b58 100644
--- a/sass/components/_datepicker.scss
+++ b/sass/components/_datepicker.scss
@@ -1,8 +1,9 @@
 /* Modal */
 .datepicker-modal {
   max-width: 325px;
-  min-width: 300px;
-  max-height: none;
+  // @removed since v2.2.1-dev regarding Material M3 standards
+  /* min-width: 300px;
+  max-height: none; */
 }
 
 .datepicker-container.modal-content {
@@ -75,9 +76,11 @@
 /* Date Display */
 .datepicker-date-display {
   flex: 1 auto;
-  background-color: var(--md-sys-color-primary);
-  color:  var(--md-sys-color-on-primary);
+  // @removed since v2.2.1-dev regarding Material M3 standards
+  // background-color: var(--md-sys-color-primary);
+  // color:  var(--md-sys-color-on-primary);
   padding: 20px 22px;
+  border-bottom: 1px solid var(--md-sys-color-surface-variant-light);
   font-weight: 500;
 
   .year-text {
@@ -124,46 +127,88 @@
     color: var(--md-sys-color-on-surface-variant);
   }
 
-  td {
+  .datepicker-day {
     color: var(--md-sys-color-on-background);
 
     &.is-today {
       color: var(--md-sys-color-primary);
     }
 
-    &.is-selected {
+    /*&.is-selected button {
       background-color: var(--md-sys-color-primary);
       color:  var(--md-sys-color-on-primary);
-    }
-
-    &.is-outside-current-month,
-    &.is-disabled {
-      color: var(--md-sys-color-on-surface);
-      pointer-events: none;
-    }
+    }*/
 
-    border-radius: 50%;
+    // border-radius: 50%;
     padding: 0;
   }
 }
 
+.datepicker-day.is-inrange {
+  .datepicker-day-container {
+    position: relative;
+    background-color: var(--md-sys-color-primary-container);
+    z-index: 0;
+  }
+
+  // @todo find solution why pseudo selectors are not working or implement other method
+  &:first-child .datepicker-day-container:before,
+  &:last-child .datepicker-day-container:before {
+    position: absolute;
+    height: 100%;
+    width: 50%;
+    content: '';
+    background-color: var(--md-sys-color-primary-container);
+    z-index: 0;
+  }
+
+  &:first-child .datepicker-day-container:before {
+      left: -50%;
+  }
+
+  &:last-child .datepicker-day-container:before {
+    left: auto;
+    right: -50%;
+  }
+}
+
 .datepicker-day-button {
   background-color: transparent;
   border: none;
-  line-height: 38px;
+  line-height: 34px;
   display: block;
-  width: 100%;
+  width: 34px;
   border-radius: 50%;
+  margin: 5px;
   padding: 0 5px;
   cursor: pointer;
   color: inherit;
 
+  position: relative;
+  z-index: 1;
+
   &:hover {
     background-color: rgba(var(--md-sys-color-primary-numeric), 0.06);
   }
 
   &:focus {
-    background-color: rgba(var(--md-sys-color-primary-numeric), 0.18);
+    border-color: var(--md-sys-color-primary);
+  }
+
+  .is-selected & {
+    background-color: var(--md-sys-color-primary);
+    color: var(--md-sys-color-on-primary);
+
+    &:focus {
+      background-color: var(--md-sys-color-surface-variant);
+      color: var(--md-sys-color-primary);
+    }
+  }
+
+  &.is-outside-current-month button,
+  &.is-disabled button {
+    color: var(--md-sys-color-on-surface);
+    pointer-events: none;
   }
 }
 
@@ -192,7 +237,8 @@
 
 /* Media Queries */
 @media #{$medium-and-up} {
-  .datepicker-modal {
+  @removed since v2.2.1-dev regarding Material M3 standards
+  /*.datepicker-modal {
     max-width: 625px;
   }
 
@@ -208,7 +254,7 @@
   .datepicker-table,
   .datepicker-footer {
     width: 320px;
-  }
+  }*/
 
   .datepicker-day-button {
     line-height: 44px;
diff --git a/src/datepicker.ts b/src/datepicker.ts
index a29c29204d..10190df938 100644
--- a/src/datepicker.ts
+++ b/src/datepicker.ts
@@ -804,7 +804,7 @@ export class Datepicker extends Component<DatepickerOptions> {
   }
 
   renderDay(opts) {
-    const arr = [];
+    const arr = ['datepicker-day'];
     let ariaSelected = 'false';
     if (opts.isEmpty) {
       if (opts.showDaysInNextAndPreviousMonths) {
@@ -834,9 +834,9 @@ export class Datepicker extends Component<DatepickerOptions> {
       arr.push('has-event');
     }
 
-    // @todo should we create this additional css class?
     if (opts.isInRange) {
       arr.push('is-inrange');
+      ariaSelected = 'true';
     }
 
     // @todo should we create this additional css class?
@@ -855,7 +855,9 @@ export class Datepicker extends Component<DatepickerOptions> {
     }
     return (
       `<td data-day="${opts.day}" class="${arr.join(' ')}" aria-selected="${ariaSelected}">` +
+        '<div class="datepicker-day-container">' +
       `<button class="datepicker-day-button" type="button" data-year="${opts.year}" data-month="${opts.month}" data-day="${opts.day}">${opts.day}</button>` +
+        '</div>' +
       '</td>'
     );
   }
@@ -955,7 +957,8 @@ export class Datepicker extends Component<DatepickerOptions> {
       '<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"/><path d="M0-.5h24v24H0z" fill="none"/></svg>';
     html += `<button class="month-prev${
       prev ? '' : ' is-disabled'
-    } btn-flat" type="button">${leftArrow}</button>`;
+      // @todo remove button class and add scss mixin, current implementation temporary for focus states, @see https://github.com/materializecss/materialize/issues/566
+    } btn" type="button">${leftArrow}</button>`;
 
     html += '<div class="selects-container">';
     if (opts.showMonthAfterYear) {
@@ -977,7 +980,8 @@ export class Datepicker extends Component<DatepickerOptions> {
       '<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"/><path d="M0-.25h24v24H0z" fill="none"/></svg>';
     html += `<button class="month-next${
       next ? '' : ' is-disabled'
-    } btn-flat" type="button">${rightArrow}</button>`;
+      // @todo remove button class and add scss mixin, current implementation temporary for focus states, @see https://github.com/materializecss/materialize/issues/566
+    } btn" type="button">${rightArrow}</button>`;
 
     return (html += '</div>');
   }
@@ -1035,6 +1039,7 @@ export class Datepicker extends Component<DatepickerOptions> {
     // Init Materialize Select
     const yearSelect = this.calendarEl.querySelector('.orig-select-year') as HTMLSelectElement;
     const monthSelect = this.calendarEl.querySelector('.orig-select-month') as HTMLSelectElement;
+    // @todo fix accessibility @see https://github.com/materializecss/materialize/issues/522
     FormSelect.init(yearSelect, {
       classes: 'select-year',
       dropdownOptions: { container: document.body, constrainWidth: false }

From a12be6193e23b7bb598b9e3e917ee32db70886c0 Mon Sep 17 00:00:00 2001
From: Geert Selderslaghs <geert@codemindit.com>
Date: Fri, 27 Dec 2024 18:05:03 +0100
Subject: [PATCH 04/43] enhancement(Datepicker) refinement on daterange
 styling, revert day cell to initial, implemented additional
 is-daterange-start + is-daterange-end classes  and refactored styling to use
 pseudo selectors on newly created classes #360

---
 sass/components/_datepicker.scss | 37 ++++++++++++++++----------------
 src/datepicker.ts                | 16 +++++++++++---
 2 files changed, 32 insertions(+), 21 deletions(-)

diff --git a/sass/components/_datepicker.scss b/sass/components/_datepicker.scss
index f276473b58..16a99d45a9 100644
--- a/sass/components/_datepicker.scss
+++ b/sass/components/_datepicker.scss
@@ -144,32 +144,33 @@
   }
 }
 
-.datepicker-day.is-inrange {
-  .datepicker-day-container {
-    position: relative;
-    background-color: var(--md-sys-color-primary-container);
-    z-index: 0;
-  }
+.datepicker-day.is-daterange-start,
+.datepicker-day.is-daterange-end,
+.datepicker-day.is-daterange {
+  position: relative;
 
-  // @todo find solution why pseudo selectors are not working or implement other method
-  &:first-child .datepicker-day-container:before,
-  &:last-child .datepicker-day-container:before {
+  &:before {
     position: absolute;
-    height: 100%;
-    width: 50%;
+    top: 5px;
+    width: 100%;
+    height: 34px;
     content: '';
     background-color: var(--md-sys-color-primary-container);
     z-index: 0;
   }
+}
 
-  &:first-child .datepicker-day-container:before {
-      left: -50%;
-  }
+.datepicker-day.is-daterange-start:before,
+.datepicker-day.is-daterange-end:before {
+  width: 50%;
+}
 
-  &:last-child .datepicker-day-container:before {
-    left: auto;
-    right: -50%;
-  }
+.datepicker-day.is-daterange-start:before {
+  left: 50%;
+}
+
+.datepicker-day.is-daterange .datepicker-day-button:before {
+  background-color: var(--md-sys-color-primary-container);
 }
 
 .datepicker-day-button {
diff --git a/src/datepicker.ts b/src/datepicker.ts
index 10190df938..b8d4ca7bad 100644
--- a/src/datepicker.ts
+++ b/src/datepicker.ts
@@ -739,6 +739,8 @@ export class Datepicker extends Component<DatepickerOptions> {
           (this.options.maxDate && day > this.options.maxDate) ||
           (this.options.disableWeekends && Datepicker._isWeekend(day)) ||
           (this.options.disableDayFn && this.options.disableDayFn(day)),
+        isDateRangeStart = this.options.isDateRange && Datepicker._compareDates(this.date, day),
+        isDateRangeEnd = this.options.isDateRange && Datepicker._compareDates(this.endDate, day),
         isDateRange =
           this.options.isDateRange &&
           Datepicker._isDate(this.endDate) &&
@@ -788,6 +790,8 @@ export class Datepicker extends Component<DatepickerOptions> {
         isEndRange: isEndRange,
         isInRange: isInRange,
         showDaysInNextAndPreviousMonths: this.options.showDaysInNextAndPreviousMonths,
+        isDateRangeStart: isDateRangeStart,
+        isDateRangeEnd: isDateRangeEnd,
         isDateRange: isDateRange
       };
 
@@ -834,6 +838,7 @@ export class Datepicker extends Component<DatepickerOptions> {
       arr.push('has-event');
     }
 
+    // @todo create additional css class
     if (opts.isInRange) {
       arr.push('is-inrange');
       ariaSelected = 'true';
@@ -849,15 +854,20 @@ export class Datepicker extends Component<DatepickerOptions> {
       arr.push('is-endrange');
     }
 
-    // @todo create additional css class
+    if (opts.isDateRangeStart) {
+      arr.push('is-daterange-start');
+    }
+
+    if (opts.isDateRangeEnd) {
+      arr.push('is-daterang-eend');
+    }
+
     if (opts.isDateRange) {
       arr.push('is-daterange');
     }
     return (
       `<td data-day="${opts.day}" class="${arr.join(' ')}" aria-selected="${ariaSelected}">` +
-        '<div class="datepicker-day-container">' +
       `<button class="datepicker-day-button" type="button" data-year="${opts.year}" data-month="${opts.month}" data-day="${opts.day}">${opts.day}</button>` +
-        '</div>' +
       '</td>'
     );
   }

From b8c344b74c260209a1cf529a1de2fc3046276c4d Mon Sep 17 00:00:00 2001
From: Geert Selderslaghs <geert@codemindit.com>
Date: Fri, 27 Dec 2024 20:32:26 +0100
Subject: [PATCH 05/43] enhancement(Datepicker) refactor all modal related
 selectors #558

---
 src/datepicker.ts | 33 ++++++++++++++++-----------------
 1 file changed, 16 insertions(+), 17 deletions(-)

diff --git a/src/datepicker.ts b/src/datepicker.ts
index b8d4ca7bad..46c747801b 100644
--- a/src/datepicker.ts
+++ b/src/datepicker.ts
@@ -260,7 +260,7 @@ export class Datepicker extends Component<DatepickerOptions> {
   doneBtn: HTMLElement;
   cancelBtn: HTMLElement;
 
-  modalEl: HTMLElement;
+  containerEl: HTMLElement;
   yearTextEl: HTMLElement;
   dateTextEl: HTMLElement;
   endDateEl: HTMLInputElement;
@@ -409,7 +409,7 @@ export class Datepicker extends Component<DatepickerOptions> {
 
   destroy() {
     this._removeEventHandlers();
-    this.modalEl.remove();
+    this.containerEl.remove();
     this.destroySelects();
     this.el['M_Datepicker'] = undefined;
   }
@@ -447,10 +447,11 @@ export class Datepicker extends Component<DatepickerOptions> {
       const optEl = this.options.container;
       this.options.container =
         optEl instanceof HTMLElement ? optEl : (document.querySelector(optEl) as HTMLElement);
-      this.options.container.append(this.modalEl);
+      this.options.container.append(this.containerEl);
     } else {
-      //this.modalEl.before(this.el);
-      this.el.parentElement.appendChild(this.modalEl);
+      //this.containerEl.before(this.el);
+      const appendTo = !this.endDateEl ? this.el : this.endDateEl;
+      appendTo.parentElement.after(this.containerEl);
     }
   }
 
@@ -859,7 +860,7 @@ export class Datepicker extends Component<DatepickerOptions> {
     }
 
     if (opts.isDateRangeEnd) {
-      arr.push('is-daterang-eend');
+      arr.push('is-daterange-end');
     }
 
     if (opts.isDateRange) {
@@ -1085,17 +1086,17 @@ export class Datepicker extends Component<DatepickerOptions> {
     const template = document.createElement('template');
     template.innerHTML = Datepicker._template.trim();
 
-    this.modalEl = <HTMLElement>template.content.firstChild;
+    this.containerEl = <HTMLElement>template.content.firstChild;
 
-    this.calendarEl = this.modalEl.querySelector('.datepicker-calendar');
-    this.yearTextEl = this.modalEl.querySelector('.year-text');
-    this.dateTextEl = this.modalEl.querySelector('.date-text');
+    this.calendarEl = this.containerEl.querySelector('.datepicker-calendar');
+    this.yearTextEl = this.containerEl.querySelector('.year-text');
+    this.dateTextEl = this.containerEl.querySelector('.date-text');
     if (this.options.showClearBtn) {
-      this.clearBtn = this.modalEl.querySelector('.datepicker-clear');
+      this.clearBtn = this.containerEl.querySelector('.datepicker-clear');
     }
     // TODO: This should not be part of the datepicker
-    this.doneBtn = this.modalEl.querySelector('.datepicker-done');
-    this.cancelBtn = this.modalEl.querySelector('.datepicker-cancel');
+    this.doneBtn = this.containerEl.querySelector('.datepicker-done');
+    this.cancelBtn = this.containerEl.querySelector('.datepicker-cancel');
 
     this.formats = {
       d: (date: Date) => {
@@ -1305,8 +1306,7 @@ export class Datepicker extends Component<DatepickerOptions> {
 
   static {
     Datepicker._template = `
-      <div class="datepicker-modal">
-        <div class="modal-content datepicker-container">
+        <div class="datepicker-container">
           <div class="datepicker-date-display">
             <span class="year-text"></span>
             <span class="date-text"></span>
@@ -1321,7 +1321,6 @@ export class Datepicker extends Component<DatepickerOptions> {
               </div>
             </div>
           </div>
-        </div>
-      </div>`;
+        </div>`;
   }
 }

From 1e9c276f54b8e38a70f414b392d17b8df84f4316 Mon Sep 17 00:00:00 2001
From: Geert Selderslaghs <geert@codemindit.com>
Date: Fri, 27 Dec 2024 20:33:33 +0100
Subject: [PATCH 06/43] enhancement(Datepicker) refactor modal css selectors

---
 sass/components/_datepicker.scss | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/sass/components/_datepicker.scss b/sass/components/_datepicker.scss
index 16a99d45a9..caf2073eba 100644
--- a/sass/components/_datepicker.scss
+++ b/sass/components/_datepicker.scss
@@ -1,14 +1,16 @@
 /* Modal */
-.datepicker-modal {
+// @removed since v2.2.1
+/*.datepicker-modal {
   max-width: 325px;
   // @removed since v2.2.1-dev regarding Material M3 standards
-  /* min-width: 300px;
-  max-height: none; */
-}
+  min-width: 300px;
+  max-height: none;
+}*/
 
-.datepicker-container.modal-content {
+.datepicker-container {
   display: flex;
   flex-direction: column;
+  max-width: 325px;
   padding: 0;
   background-color: var(--md-sys-color-surface);
 }
@@ -238,7 +240,7 @@
 
 /* Media Queries */
 @media #{$medium-and-up} {
-  @removed since v2.2.1-dev regarding Material M3 standards
+  // @removed since v2.2.1-dev regarding Material M3 standards
   /*.datepicker-modal {
     max-width: 625px;
   }

From b599ff23a3e59dba57a21aac753a44c69784940a Mon Sep 17 00:00:00 2001
From: Geert Selderslaghs <geert@codemindit.com>
Date: Fri, 27 Dec 2024 20:35:44 +0100
Subject: [PATCH 07/43] enhancement(Datepicker) implemented input field
 callback functions #558

---
 src/datepicker.ts | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/datepicker.ts b/src/datepicker.ts
index 46c747801b..676bf9c71e 100644
--- a/src/datepicker.ts
+++ b/src/datepicker.ts
@@ -143,7 +143,11 @@ export interface DatepickerOptions extends BaseOptions {
    * @default null
    */
   onDraw: (() => void) | null;
-
+  /**
+   * Callback function for interaction with input field.
+   * @default null
+   */
+  onInputInteraction: (() => void) | null;
   /** Field used for internal calculations DO NOT CHANGE IT */
   minYear?: number;
   /** Field used for internal calculations DO NOT CHANGE IT */
@@ -245,7 +249,8 @@ const _defaults: DatepickerOptions = {
   events: [],
   // callback function
   onSelect: null,
-  onDraw: null
+  onDraw: null,
+  onInputInteraction: null,
 };
 
 export class Datepicker extends Component<DatepickerOptions> {
@@ -1154,6 +1159,7 @@ export class Datepicker extends Component<DatepickerOptions> {
     this.setDateFromInput(e.target as HTMLInputElement);
     this.draw();
     this.gotoDate(<HTMLElement>e.target === this.el ? this.date : this.endDate);
+    if (this.options.onInputInteraction) this.options.onInputInteraction.call(this);
   };
 
   _handleInputKeydown = (e: KeyboardEvent) => {
@@ -1161,6 +1167,7 @@ export class Datepicker extends Component<DatepickerOptions> {
       e.preventDefault();
       this.setDateFromInput(e.target as HTMLInputElement);
       this.draw();
+      if (this.options.onInputInteraction) this.options.onInputInteraction.call(this);
     }
   };
 

From 4f5c37a33d79657f92b69ef4c30db70292354657 Mon Sep 17 00:00:00 2001
From: Geert Selderslaghs <geert@codemindit.com>
Date: Fri, 27 Dec 2024 20:37:30 +0100
Subject: [PATCH 08/43] enhancement(Datepicker) allow user specified end date
 element #558

---
 src/datepicker.ts | 20 ++++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/datepicker.ts b/src/datepicker.ts
index 676bf9c71e..06b13b3282 100644
--- a/src/datepicker.ts
+++ b/src/datepicker.ts
@@ -30,6 +30,10 @@ export interface DatepickerOptions extends BaseOptions {
    * @default false
    */
   isDateRange: boolean;
+  /**
+   * The selector of the user specified date range end element
+   */
+  dateRangeEndEl: string | null;
   /**
    * The initial condition if the datepicker is based on multiple date selection.
    * @default false
@@ -169,6 +173,8 @@ const _defaults: DatepickerOptions = {
   parse: null,
   // The initial condition if the datepicker is based on date range
   isDateRange: false,
+  // The selector of the user specified date range end element
+  dateRangeEndEl: null,
   // The initial condition if the datepicker is based on multiple date selection
   isMultipleSelection: false,
   // The initial date to view when first opened
@@ -437,8 +443,14 @@ export class Datepicker extends Component<DatepickerOptions> {
     }
 
     if (this.options.isDateRange) {
-      this.endDateEl = this.createDateInput();
-      this.endDateEl.classList.add('datepicker-end-date');
+      if (!this.options.dateRangeEndEl) {
+        this.endDateEl = this.createDateInput();
+        this.endDateEl.classList.add('datepicker-end-date');
+      } else if(document.querySelector(this.options.dateRangeEndEl) as HTMLInputElement === undefined) {
+        console.warn('Specified date range end input element in dateRangeEndEl not found');
+      } else {
+        this.endDateEl = document.querySelector(this.options.dateRangeEndEl) as HTMLInputElement;
+      }
     }
 
     if (this.options.showClearBtn) {
@@ -745,8 +757,8 @@ export class Datepicker extends Component<DatepickerOptions> {
           (this.options.maxDate && day > this.options.maxDate) ||
           (this.options.disableWeekends && Datepicker._isWeekend(day)) ||
           (this.options.disableDayFn && this.options.disableDayFn(day)),
-        isDateRangeStart = this.options.isDateRange && Datepicker._compareDates(this.date, day),
-        isDateRangeEnd = this.options.isDateRange && Datepicker._compareDates(this.endDate, day),
+        isDateRangeStart = this.options.isDateRange && this.date && this.endDate && Datepicker._compareDates(this.date, day),
+        isDateRangeEnd = this.options.isDateRange && this.endDate && Datepicker._compareDates(this.endDate, day),
         isDateRange =
           this.options.isDateRange &&
           Datepicker._isDate(this.endDate) &&

From ae8a06a4be2c6d931af894343f914855b30eab80 Mon Sep 17 00:00:00 2001
From: Geert Selderslaghs <geert@codemindit.com>
Date: Fri, 27 Dec 2024 20:39:12 +0100
Subject: [PATCH 09/43] enhancement(Datepicker) implemented date format
 rendering in supporting text field if present #558

---
 src/datepicker.ts | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/src/datepicker.ts b/src/datepicker.ts
index 06b13b3282..1ebeb70e31 100644
--- a/src/datepicker.ts
+++ b/src/datepicker.ts
@@ -442,6 +442,10 @@ export class Datepicker extends Component<DatepickerOptions> {
       this.el.classList.add('datepicker-date-input');
     }
 
+    if (this.el.parentElement.querySelector('.datepicker-format') !== undefined) {
+      this._renderDateInputFormat(this.el);
+    }
+
     if (this.options.isDateRange) {
       if (!this.options.dateRangeEndEl) {
         this.endDateEl = this.createDateInput();
@@ -450,6 +454,9 @@ export class Datepicker extends Component<DatepickerOptions> {
         console.warn('Specified date range end input element in dateRangeEndEl not found');
       } else {
         this.endDateEl = document.querySelector(this.options.dateRangeEndEl) as HTMLInputElement;
+        if (this.endDateEl.parentElement.querySelector('.datepicker-format') !== undefined) {
+          this._renderDateInputFormat(this.endDateEl);
+        }
       }
     }
 
@@ -472,6 +479,13 @@ export class Datepicker extends Component<DatepickerOptions> {
     }
   }
 
+  /**
+   * Renders the date input format
+   */
+  _renderDateInputFormat(el: HTMLInputElement) {
+    el.parentElement.querySelector('.datepicker-format').innerHTML = this.options.format.toString();
+  }
+
   /**
    * Gets a string representation of the given date.
    */

From 9c455bb7d7c343553bd44573d33260149c45ca9c Mon Sep 17 00:00:00 2001
From: Geert Selderslaghs <geert@codemindit.com>
Date: Fri, 27 Dec 2024 21:10:05 +0100
Subject: [PATCH 10/43] enhancement(Datepicker) implemented open by default
 option #558

---
 src/datepicker.ts | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/datepicker.ts b/src/datepicker.ts
index 1ebeb70e31..ea1a4c8d00 100644
--- a/src/datepicker.ts
+++ b/src/datepicker.ts
@@ -110,6 +110,10 @@ export interface DatepickerOptions extends BaseOptions {
    * @default false
    */
   showDaysInNextAndPreviousMonths: boolean;
+  /**
+   * Specify if the docked datepicker is in open state by default
+   */
+  openByDefault: boolean;
   /**
    * Specify a DOM element OR selector for a DOM element to render
    * the calendar in, by default it will be placed before the input.
@@ -208,6 +212,8 @@ const _defaults: DatepickerOptions = {
   showMonthAfterYear: false,
   // Render days of the calendar grid that fall in the next or previous month
   showDaysInNextAndPreviousMonths: false,
+  // Specify if docked picker is in open state by default
+  openByDefault: false,
   // Specify a DOM element to render the calendar in
   container: null,
   // Show clear button
@@ -475,6 +481,7 @@ export class Datepicker extends Component<DatepickerOptions> {
     } else {
       //this.containerEl.before(this.el);
       const appendTo = !this.endDateEl ? this.el : this.endDateEl;
+      if (!this.options.openByDefault) (this.containerEl as HTMLElement).setAttribute('style', 'display: none; visibility: hidden;');
       appendTo.parentElement.after(this.containerEl);
     }
   }

From 3bcbccf9f2fe62c89aa303ece34d411fda70ddb3 Mon Sep 17 00:00:00 2001
From: Geert Selderslaghs <geert@codemindit.com>
Date: Fri, 27 Dec 2024 22:14:02 +0100
Subject: [PATCH 11/43] enhancement(Datepicker) fix inconsistency in datepicker
 days rendering

---
 sass/components/_datepicker.scss | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/sass/components/_datepicker.scss b/sass/components/_datepicker.scss
index caf2073eba..cb3eac879b 100644
--- a/sass/components/_datepicker.scss
+++ b/sass/components/_datepicker.scss
@@ -46,6 +46,11 @@
     vertical-align: middle;
   }
 
+  .select-year input,
+  .select-month input {
+    background-color: transparent;
+  }
+
   .select-year input {
     width: 50px;
   }
@@ -98,6 +103,12 @@
     line-height: 47px;
     font-weight: 500;
   }
+
+  .daterange & {
+    .date-text {
+      font-size: 1.8rem;
+    }
+  }
 }
 
 
@@ -257,9 +268,9 @@
   .datepicker-table,
   .datepicker-footer {
     width: 320px;
-  }*/
+  }
 
   .datepicker-day-button {
     line-height: 44px;
-  }
+  }*/
 }

From 695cbe92402332f13b0e641ccb9ce516f75241d1 Mon Sep 17 00:00:00 2001
From: Geert Selderslaghs <geert@codemindit.com>
Date: Fri, 27 Dec 2024 22:32:42 +0100
Subject: [PATCH 12/43] fix failing spec tests

---
 spec/tests/datepicker/datepickerSpec.js | 20 ++++++++++----------
 src/datepicker.ts                       |  4 ++--
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/spec/tests/datepicker/datepickerSpec.js b/spec/tests/datepicker/datepickerSpec.js
index 4f2491dbf6..21ca5459d4 100644
--- a/spec/tests/datepicker/datepickerSpec.js
+++ b/spec/tests/datepicker/datepickerSpec.js
@@ -16,11 +16,11 @@ describe('Datepicker Plugin', () => {
     it('can have a string format', (done) => {
       const input = document.querySelector('#datepickerInput');
       const today = new Date();
-      M.Datepicker.init(input, { format: 'mm/dd/yyyy' });
+      M.Datepicker.init(input, { format: 'mm/dd/yyyy', openByDefault: true });
       const datepicker = M.Datepicker.getInstance(input);
       //datepicker.open();
       setTimeout(() => {
-        const day1 = document.querySelector('.datepicker-modal button[data-day="1"]');
+        const day1 = document.querySelector('.datepicker-container button[data-day="1"]');
         day1.click();
         document.querySelector('.datepicker-done').click();
         setTimeout(() => {
@@ -37,11 +37,11 @@ describe('Datepicker Plugin', () => {
       const input = document.querySelector('#datepickerInput');
       const today = new Date();
       const formatFn = `${today.getFullYear() - 100}-${today.getMonth() + 1}-99`;
-      M.Datepicker.init(input, { format: formatFn });
+      M.Datepicker.init(input, { format: formatFn, openByDefault: true });
       const datepicker = M.Datepicker.getInstance(input);
       //datepicker.open();
       setTimeout(() => {
-        const day1 = document.querySelector('.datepicker-modal button[data-day="1"]');
+        const day1 = document.querySelector('.datepicker-container button[data-day="1"]');
         day1.click();
         document.querySelector('.datepicker-done').click();
         setTimeout(() => {
@@ -55,7 +55,7 @@ describe('Datepicker Plugin', () => {
 
     it('can change the calendar modal selected date by input', (done) => {
       const input = document.querySelector('#datepickerInput');
-      M.Datepicker.init(input, { format: 'mm/dd/yyyy' });
+      M.Datepicker.init(input, { format: 'mm/dd/yyyy', openByDefault: true });
       const today = new Date();
       const month = today.getMonth();
       const year = today.getFullYear() - 44;
@@ -73,7 +73,7 @@ describe('Datepicker Plugin', () => {
         const selectedDayElem = document.querySelector(`.datepicker-row td[data-day="${day}"]`);
         expect(
           selectMonthElem.querySelector('option[selected="selected"]').value ===
-            (month - 1).toString()
+          (month - 1).toString()
         ).toEqual(
           true,
           `selected month should be ${month}, given value ${selectMonthElem.querySelector('option[selected="selected"]').value}`
@@ -94,7 +94,7 @@ describe('Datepicker Plugin', () => {
 
     it('should have a date range input field if date range option is enabled', (done) => {
       const input = document.querySelector('#datepickerInput');
-      M.Datepicker.init(input, { isDateRange: true });
+      M.Datepicker.init(input, { isDateRange: true, openByDefault: true });
       setTimeout(() => {
         expect(document.querySelector('.datepicker-end-date')).toExist(
           'end date input should exist'
@@ -105,13 +105,13 @@ describe('Datepicker Plugin', () => {
 
     it('should have multiple input fields if multiple select option is enabled and multiple dates are selected', (done) => {
       const input = document.querySelector('#datepickerInput');
-      M.Datepicker.init(input, { isMultipleSelection: true });
+      M.Datepicker.init(input, { isMultipleSelection: true, openByDefault: true });
       const datepicker = M.Datepicker.getInstance(input);
       datepicker.open();
       setTimeout(() => {
-        for (let i = 1; i < 4; i++) {
+        for (let i = 1; i <= 3; i++) {
           setTimeout(() => {
-            document.querySelector(`.datepicker-modal button[data-day="${i}"]`).click();
+            document.querySelector(`.datepicker-container button[data-day="${i}"]`).click();
           }, i * 10);
         }
         setTimeout(() => {
diff --git a/src/datepicker.ts b/src/datepicker.ts
index ea1a4c8d00..bef32e92a3 100644
--- a/src/datepicker.ts
+++ b/src/datepicker.ts
@@ -448,7 +448,7 @@ export class Datepicker extends Component<DatepickerOptions> {
       this.el.classList.add('datepicker-date-input');
     }
 
-    if (this.el.parentElement.querySelector('.datepicker-format') !== undefined) {
+    if (!this.el.parentElement.querySelector('.datepicker-format') === null) {
       this._renderDateInputFormat(this.el);
     }
 
@@ -460,7 +460,7 @@ export class Datepicker extends Component<DatepickerOptions> {
         console.warn('Specified date range end input element in dateRangeEndEl not found');
       } else {
         this.endDateEl = document.querySelector(this.options.dateRangeEndEl) as HTMLInputElement;
-        if (this.endDateEl.parentElement.querySelector('.datepicker-format') !== undefined) {
+        if (!this.endDateEl.parentElement.querySelector('.datepicker-format') === null) {
           this._renderDateInputFormat(this.endDateEl);
         }
       }

From bd835535d03b316b33c6800152bf6dae9e07ed76 Mon Sep 17 00:00:00 2001
From: Geert Selderslaghs <geert@codemindit.com>
Date: Fri, 27 Dec 2024 22:35:34 +0100
Subject: [PATCH 13/43] enhancement(Datepicker) add daterange class
 programmatically for date display font size adjustment when rendering
 multiple dates

---
 src/datepicker.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/datepicker.ts b/src/datepicker.ts
index bef32e92a3..4f971f1f86 100644
--- a/src/datepicker.ts
+++ b/src/datepicker.ts
@@ -453,6 +453,7 @@ export class Datepicker extends Component<DatepickerOptions> {
     }
 
     if (this.options.isDateRange) {
+      this.containerEl.classList.add('daterange');
       if (!this.options.dateRangeEndEl) {
         this.endDateEl = this.createDateInput();
         this.endDateEl.classList.add('datepicker-end-date');

From 29ff96931ef668395dcd2cf007e72b43067fcc4f Mon Sep 17 00:00:00 2001
From: Geert Selderslaghs <geert@codemindit.com>
Date: Sat, 28 Dec 2024 13:26:23 +0100
Subject: [PATCH 14/43] enhancement(Datepicker) fixed classmapping calendar day
 element css selectors #558

---
 src/datepicker.ts | 66 ++++++++++++++---------------------------------
 1 file changed, 19 insertions(+), 47 deletions(-)

diff --git a/src/datepicker.ts b/src/datepicker.ts
index 4f971f1f86..a84e567f5e 100644
--- a/src/datepicker.ts
+++ b/src/datepicker.ts
@@ -643,7 +643,6 @@ export class Datepicker extends Component<DatepickerOptions> {
    * Sets given date as the input value on the given element.
    */
   setInputValue(el, date) {
-    console.log('setinputvalue');
     if (el.type == 'date') {
       this.setDataDate(el, date);
       el.value = this.formatDate(date, 'yyyy-mm-dd');
@@ -848,8 +847,21 @@ export class Datepicker extends Component<DatepickerOptions> {
   }
 
   renderDay(opts) {
-    const arr = ['datepicker-day'];
-    let ariaSelected = 'false';
+    const classMap = {
+        isDisabled: 'is-disabled',
+        isToday: 'is-today',
+        isSelected: 'is-selected',
+        hasEvent: 'has-event',
+        isInRange: 'is-inrange',
+        isStartRange: 'is-startrange',
+        isEndRange: 'is-endrange',
+        isDateRangeStart: 'is-daterange-start',
+        isDateRangeEnd: 'is-daterange-end',
+        isDateRange: 'is-daterange'
+      },
+      ariaSelected = !(['isSelected', 'isDateRange'].filter((prop) => !!(opts.hasOwnProperty(prop) && opts[prop] === true)).length === 0),
+      arr = ['datepicker-day'];
+
     if (opts.isEmpty) {
       if (opts.showDaysInNextAndPreviousMonths) {
         arr.push('is-outside-current-month');
@@ -859,52 +871,12 @@ export class Datepicker extends Component<DatepickerOptions> {
       }
     }
 
-    // @todo wouldn't it be better defining opts class mapping and looping trough opts?
-    if (opts.isDisabled) {
-      arr.push('is-disabled');
-    }
-
-    if (opts.isToday) {
-      arr.push('is-today');
-    }
-
-    if (opts.isSelected) {
-      arr.push('is-selected');
-      ariaSelected = 'true';
-    }
-
-    // @todo should we create this additional css class?
-    if (opts.hasEvent) {
-      arr.push('has-event');
-    }
-
-    // @todo create additional css class
-    if (opts.isInRange) {
-      arr.push('is-inrange');
-      ariaSelected = 'true';
-    }
-
-    // @todo should we create this additional css class?
-    if (opts.isStartRange) {
-      arr.push('is-startrange');
-    }
-
-    // @todo should we create this additional css class?
-    if (opts.isEndRange) {
-      arr.push('is-endrange');
-    }
-
-    if (opts.isDateRangeStart) {
-      arr.push('is-daterange-start');
-    }
-
-    if (opts.isDateRangeEnd) {
-      arr.push('is-daterange-end');
+    for (const [property, className] of Object.entries(classMap)) {
+      if (opts.hasOwnProperty(property) && opts[property]) {
+        arr.push(className);
+      }
     }
 
-    if (opts.isDateRange) {
-      arr.push('is-daterange');
-    }
     return (
       `<td data-day="${opts.day}" class="${arr.join(' ')}" aria-selected="${ariaSelected}">` +
       `<button class="datepicker-day-button" type="button" data-year="${opts.year}" data-month="${opts.month}" data-day="${opts.day}">${opts.day}</button>` +

From 2c4e2aece9b1490fd1761d1406a4003979859ed2 Mon Sep 17 00:00:00 2001
From: Geert Selderslaghs <geert@codemindit.com>
Date: Sat, 28 Dec 2024 13:27:55 +0100
Subject: [PATCH 15/43] enhancement(Datepicker) add implemented day selector
 classes without styling as todos in scss file

---
 sass/components/_datepicker.scss | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/sass/components/_datepicker.scss b/sass/components/_datepicker.scss
index cb3eac879b..c8cadfca8e 100644
--- a/sass/components/_datepicker.scss
+++ b/sass/components/_datepicker.scss
@@ -157,6 +157,15 @@
   }
 }
 
+// @todo
+.datepicker-day.has-event {}
+// @todo
+.datepicker-day.is-inrange {}
+// @todo
+.datepicker-day.is-startrange {}
+// @todo
+.datepicker-day.is-endrange {}
+
 .datepicker-day.is-daterange-start,
 .datepicker-day.is-daterange-end,
 .datepicker-day.is-daterange {

From 268ae1e540b4645bff4f29037c9353f597e9839c Mon Sep 17 00:00:00 2001
From: Geert Selderslaghs <geert@codemindit.com>
Date: Sun, 29 Dec 2024 22:54:32 +0100
Subject: [PATCH 16/43] fix(Timepicker) compatibility with no modal #525 #476

---
 src/timepicker.ts | 20 +++++++++-----------
 1 file changed, 9 insertions(+), 11 deletions(-)

diff --git a/src/timepicker.ts b/src/timepicker.ts
index c55d6066bd..e06a74321a 100644
--- a/src/timepicker.ts
+++ b/src/timepicker.ts
@@ -236,13 +236,13 @@ export class Timepicker extends Component<TimepickerOptions> {
   }
 
   _handleInputClick = () => {
-    this.open();
+    this.inputHours.focus();
   };
 
   _handleInputKeydown = (e: KeyboardEvent) => {
     if (Utils.keys.ENTER.includes(e.key)) {
       e.preventDefault();
-      this.open();
+      this.inputHours.focus();
     }
   };
 
@@ -296,9 +296,10 @@ export class Timepicker extends Component<TimepickerOptions> {
     }
 
     if (this.currentView === 'hours') {
+      this.inputMinutes.focus();
       this.showView('minutes', this.options.duration / 2);
     } else {
-      this.minutesView.classList.add('timepicker-dial-out');
+      // this.minutesView.classList.add('timepicker-dial-out');
       setTimeout(() => {
         this.done();
       }, this.options.duration / 2);
@@ -381,6 +382,8 @@ export class Timepicker extends Component<TimepickerOptions> {
     doneButton.classList.add('timepicker-close');
     //doneButton.addEventListener('click', this._finishSelection);
     confirmationBtnsContainer.appendChild(doneButton);
+    this._updateTimeFromInput();
+    this.showView('hours');
   }
 
   _clockSetup() {
@@ -726,8 +729,7 @@ export class Timepicker extends Component<TimepickerOptions> {
     this.inputHours.value = (this.hours % (this.options.twelveHour ? 12 : 24)).toString();
   }
 
-  // todo: remove e
-  done = (e = null, clearValue = null) => {
+  done = (clearValue = null) => {
     // Set input value
     const last = this.el.value;
     let value = clearValue
@@ -744,18 +746,14 @@ export class Timepicker extends Component<TimepickerOptions> {
         new Event('change', { bubbles: true, cancelable: true, composed: true })
       );
     }
-    //this.el.focus();
-    return e; // just for passing linter, can be removed
   };
 
   clear = () => {
-    this.done(null, true);
+    this.done(true);
   };
 
   // deprecated
   open() {
-    // this._updateTimeFromInput();
-    // this.showView('hours');
     console.warn(
       'Timepicker.close() is deprecated. Remove this method and wrap in modal yourself.'
     );
@@ -777,7 +775,7 @@ export class Timepicker extends Component<TimepickerOptions> {
             <div class="timepicker-text-container">
               <div class="timepicker-display-column">
                 <div class="timepicker-input-hours-wrapper">
-                  <input type="text" maxlength="2" autofocus class="timepicker-input-hours text-primary" />
+                  <input type="text" maxlength="2" class="timepicker-input-hours text-primary" />
                 </div>
                 <div class="timepicker-input-divider-wrapper">
                   <span class="timepicker-input-divider">:</span>

From 076c4dfb97f4e6303f7318361d8a458bab395b81 Mon Sep 17 00:00:00 2001
From: Geert Selderslaghs <geert@codemindit.com>
Date: Mon, 30 Dec 2024 00:30:43 +0100
Subject: [PATCH 17/43] refactor(Timepicker) remove modal related selectors
 #525

---
 sass/components/_timepicker.scss | 28 +++++++++++++++-------------
 src/timepicker.ts                |  7 ++-----
 2 files changed, 17 insertions(+), 18 deletions(-)

diff --git a/sass/components/_timepicker.scss b/sass/components/_timepicker.scss
index adb2b4cc0c..b12582694c 100644
--- a/sass/components/_timepicker.scss
+++ b/sass/components/_timepicker.scss
@@ -1,12 +1,14 @@
 /* Timepicker Containers */
-.timepicker-modal {
+/* container removed as of v2.2.1 */
+/* .timepicker-container {
   max-width: 325px;
   max-height: none;
-}
+}*/
 
-.timepicker-container.modal-content {
+.timepicker-container {
   display: flex;
   flex-direction: column;
+  max-width: 325px;
   padding: 0;
 }
 
@@ -88,8 +90,8 @@ input[type=text].text-primary {
   max-width: 3.5rem;
 }
 
-.timepicker-modal .am-btn,
-.timepicker-modal .pm-btn {
+.timepicker-container .am-btn,
+.timepicker-container .pm-btn {
   width: 3.6rem;
   height: 50%;
   padding-left: calc(var(--btn-padding) / 1.6);
@@ -101,12 +103,12 @@ input[type=text].text-primary {
   border: 1px solid var(--md-sys-color-outline);
 }
 
-.timepicker-modal .am-btn {
+.timepicker-container .am-btn {
   border-bottom-right-radius: 0;
   border-bottom-left-radius: 0;
 }
 
-.timepicker-modal .pm-btn {
+.timepicker-container .pm-btn {
   border-top: 0;
   border-top-left-radius: 0;
   border-top-right-radius: 0;
@@ -224,12 +226,12 @@ input[type=text].text-primary {
 
 /* Media Queries */
 @media #{$large-and-up} {
-  .timepicker-modal {
+  .timepicker-container {
     width: auto;
     max-width: 620px;
   }
 
-  .timepicker-container.modal-content {
+  .timepicker-container {
     flex-direction: row;
   }
 
@@ -254,8 +256,8 @@ input[type=text].text-primary {
     max-width: unset;
   }
 
-  .timepicker-modal .am-btn,
-  .timepicker-modal .pm-btn {
+  .timepicker-container .am-btn,
+  .timepicker-container .pm-btn {
     width: auto;
     padding-left: var(--btn-padding);
     padding-right: var(--btn-padding);
@@ -266,12 +268,12 @@ input[type=text].text-primary {
     text-align: inherit;
   }
 
-  .timepicker-modal .am-btn {
+  .timepicker-container .am-btn {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
   }
 
-  .timepicker-modal .pm-btn {
+  .timepicker-container .pm-btn {
     border-left: 0;
     border-bottom-left-radius: 0;
     border-top-left-radius: 0;
diff --git a/src/timepicker.ts b/src/timepicker.ts
index e06a74321a..2449a7eb17 100644
--- a/src/timepicker.ts
+++ b/src/timepicker.ts
@@ -768,9 +768,7 @@ export class Timepicker extends Component<TimepickerOptions> {
   }
 
   static {
-    Timepicker._template = `
-      <div class="modal timepicker-modal">
-        <div class="modal-content timepicker-container">
+    Timepicker._template = `<div class="timepicker-container">
           <div class="timepicker-digital-display">
             <div class="timepicker-text-container">
               <div class="timepicker-display-column">
@@ -797,7 +795,6 @@ export class Timepicker extends Component<TimepickerOptions> {
             </div>
             <div class="timepicker-footer"></div>
           </div>
-        </div>
-      </div>`;
+        </div>`;
   }
 }

From d77155f5c18181827be4bf651c295b97ef6b5683 Mon Sep 17 00:00:00 2001
From: Geert Selderslaghs <geert@codemindit.com>
Date: Mon, 30 Dec 2024 00:34:25 +0100
Subject: [PATCH 18/43] enhancement(Timepicker) refactor styling towards m3
 standards #558

---
 sass/components/_timepicker.scss | 53 ++++++++++++++++++++------------
 1 file changed, 34 insertions(+), 19 deletions(-)

diff --git a/sass/components/_timepicker.scss b/sass/components/_timepicker.scss
index b12582694c..7f5a0f2c11 100644
--- a/sass/components/_timepicker.scss
+++ b/sass/components/_timepicker.scss
@@ -16,7 +16,6 @@
   color:  var(--md-sys-color-on-primary);
 }
 
-
 /* Clock Digital Display */
 .timepicker-digital-display {
   width: auto;
@@ -27,13 +26,14 @@
 }
 
 .timepicker-text-container {
+  display: flex;
   font-size: 4rem;
   text-align: left;
   color: var(--font-on-primary-color-medium);
   font-weight: 400;
-  position: relative;
+  /*position: relative;*/
   user-select: none;
-  padding: 1rem 1rem 1.5rem 1rem;
+  padding: 1rem 1rem 1.3rem 1rem;
 
   input[type=text]{
     height: 4rem;
@@ -48,10 +48,15 @@
   display: inline-flex;
 }
 
+.timepicker-display-digital-clock {
+  flex-grow: 1;
+  display: inline-flex;
+}
+
 .timepicker-input-hours-wrapper,
 .timepicker-input-minutes-wrapper {
   width: 6.9rem;
-  height: 5.2rem;
+  height: 5.75rem;
 }
 
 .timepicker-input-hours,
@@ -79,14 +84,14 @@ input[type=text].text-primary {
 
 .timepicker-display-am-pm {
   font-size: 1.3rem;
-  position: absolute;
+  /*position: absolute;
   top: 1rem;
-  right: 1rem;
+  right: 1rem;*/
   font-weight: 400;
 }
 
 .timepicker-span-am-pm {
-  height: 5.2rem;
+  height: 5.75rem;
   max-width: 3.5rem;
 }
 
@@ -94,8 +99,8 @@ input[type=text].text-primary {
 .timepicker-container .pm-btn {
   width: 3.6rem;
   height: 50%;
-  padding-left: calc(var(--btn-padding) / 1.6);
-  padding-right: calc(var(--btn-padding) / 1.6);
+  padding-left: calc(var(--btn-padding) / 1.8);
+  padding-right: calc(var(--btn-padding) / 1.8);
   line-height: 2rem;
   vertical-align: middle;
   text-align: center;
@@ -128,7 +133,7 @@ input[type=text].text-primary {
   height: 260px;
   overflow: visible;
   position: relative;
-  margin: 2rem 1.6rem 1.6rem 1.6rem;
+  margin: 0 1.6rem 1.6rem 1.6rem;
   user-select: none;
 }
 
@@ -240,32 +245,38 @@ input[type=text].text-primary {
   }
 
   .timepicker-text-container {
-    top: 31%;
+    /*top: 31%;*/
+    flex-direction: column;
+    margin-top: 4.8rem;
     text-align: center;
   }
 
   .timepicker-display-am-pm {
-    position: relative;
+    /*position: relative;
     top: auto;
     right: auto;
-    text-align: center;
-    margin-top: 1.2rem;
+    text-align: center;*/
+    margin-top: 1.1rem;
+    padding: 0 3%;
   }
 
   .timepicker-span-am-pm {
+    display: flex;
+    flex-grow: 1;
     max-width: unset;
   }
 
   .timepicker-container .am-btn,
   .timepicker-container .pm-btn {
-    width: auto;
-    padding-left: var(--btn-padding);
-    padding-right: var(--btn-padding);
+    flex-grow: 1;
+    /*width: auto;*/
+    padding-left: calc(var(--btn-padding) / .565);
+    padding-right: calc(var(--btn-padding) / .565);
     border-radius: var(--btn-border-radius);
     border: 1px solid var(--md-sys-color-outline);
-    line-height: inherit;
+    /*line-height: inherit;
     vertical-align: top;
-    text-align: inherit;
+    text-align: inherit;*/
   }
 
   .timepicker-container .am-btn {
@@ -278,4 +289,8 @@ input[type=text].text-primary {
     border-bottom-left-radius: 0;
     border-top-left-radius: 0;
   }
+
+  .timepicker-plate {
+    margin-top: 1.6rem;
+  }
 }

From 0977c9e520f3007dc5a8711504596d0cdaa86479 Mon Sep 17 00:00:00 2001
From: Geert Selderslaghs <geert@codemindit.com>
Date: Mon, 30 Dec 2024 01:17:39 +0100
Subject: [PATCH 19/43] enhancement(Timepicker) refactored styling towards m3
 standards #558)

---
 sass/components/_timepicker.scss | 30 ++++++++++++++++++++----------
 src/timepicker.ts                | 27 ++++++++++++++++++++-------
 2 files changed, 40 insertions(+), 17 deletions(-)

diff --git a/sass/components/_timepicker.scss b/sass/components/_timepicker.scss
index 7f5a0f2c11..44516e409a 100644
--- a/sass/components/_timepicker.scss
+++ b/sass/components/_timepicker.scss
@@ -1,6 +1,6 @@
 /* Timepicker Containers */
-/* container removed as of v2.2.1 */
-/* .timepicker-container {
+/* modal removed as of v2.2.1 */
+/* .timepicker-modal {
   max-width: 325px;
   max-height: none;
 }*/
@@ -10,6 +10,7 @@
   flex-direction: column;
   max-width: 325px;
   padding: 0;
+  background-color: var(--md-sys-color-inverse-on-surface);
 }
 
 .text-primary {
@@ -20,7 +21,7 @@
 .timepicker-digital-display {
   width: auto;
   flex: 1 auto;
-  background-color: var(--md-sys-color-primary);;
+  // background-color: var(--md-sys-color-surface);
   padding: 2rem .67rem .67rem .67rem;
   font-weight: 300;
 }
@@ -68,9 +69,15 @@
 input[type=text].timepicker-input-hours,
 input[type=text].timepicker-input-minutes {
   height: 100%;
-  padding: .8rem;
+  padding: 1.33rem .8rem;
   border: 0;
   text-align: center;
+  color: var(--md-sys-color-on-background);
+  background-color: var(--md-sys-color-surface-variant);
+
+  &:focus {
+    background-color: var(--md-sys-color-primary-container);
+  }
 }
 
 .timepicker-input-divider-wrapper {
@@ -78,9 +85,9 @@ input[type=text].timepicker-input-minutes {
   text-align: center;
 }
 
-input[type=text].text-primary {
+/*input[type=text].text-primary {
   color: var(--md-sys-color-on-background);
-}
+}*/
 
 .timepicker-display-am-pm {
   font-size: 1.3rem;
@@ -104,7 +111,7 @@ input[type=text].text-primary {
   line-height: 2rem;
   vertical-align: middle;
   text-align: center;
-  background-color: transparent;
+  // background-color: transparent;
   border: 1px solid var(--md-sys-color-outline);
 }
 
@@ -123,11 +130,11 @@ input[type=text].text-primary {
 .timepicker-analog-display {
   flex: 2.5 auto;
   padding: .67rem;
-  background-color: var(--md-sys-color-surface);
+  // background-color: var(--md-sys-color-surface);
 }
 
 .timepicker-plate {
-  background-color: rgba(0, 0, 0, 0.09);
+  background-color: var(--md-sys-color-surface-variant);
   border-radius: 50%;
   width: 260px;
   height: 260px;
@@ -251,13 +258,16 @@ input[type=text].text-primary {
     text-align: center;
   }
 
+  .timepicker-display-column {
+    padding: 0 3%;
+  }
+
   .timepicker-display-am-pm {
     /*position: relative;
     top: auto;
     right: auto;
     text-align: center;*/
     margin-top: 1.1rem;
-    padding: 0 3%;
   }
 
   .timepicker-span-am-pm {
diff --git a/src/timepicker.ts b/src/timepicker.ts
index 2449a7eb17..a50a069b38 100644
--- a/src/timepicker.ts
+++ b/src/timepicker.ts
@@ -392,13 +392,17 @@ export class Timepicker extends Component<TimepickerOptions> {
       this._amBtn = document.createElement('div');
       this._amBtn.classList.add('am-btn', 'btn');
       this._amBtn.innerText = 'AM';
+      this._amBtn.tabIndex = 0;
       this._amBtn.addEventListener('click', this._handleAmPmClick);
+      this._amBtn.addEventListener('keypress', this._handleAmPmKeypress);
       this.spanAmPm.appendChild(this._amBtn);
       // PM Button
       this._pmBtn = document.createElement('div');
       this._pmBtn.classList.add('pm-btn', 'btn');
       this._pmBtn.innerText = 'PM';
+      this._pmBtn.tabIndex = 0;
       this._pmBtn.addEventListener('click', this._handleAmPmClick);
+      this._pmBtn.addEventListener('keypress', this._handleAmPmKeypress);
       this.spanAmPm.appendChild(this._pmBtn);
     }
     this._buildHoursView();
@@ -494,12 +498,21 @@ export class Timepicker extends Component<TimepickerOptions> {
     }
   }
 
-  _handleAmPmClick = (e) => {
-    const btnClicked = <HTMLElement>e.target;
-    this.amOrPm = btnClicked.classList.contains('am-btn') ? 'AM' : 'PM';
-    this._updateAmPmView();
+  _handleAmPmClick = (e: MouseEvent) => {
+    this._handleAmPmInteraction(<HTMLElement>e.target);
+  };
+
+  _handleAmPmKeypress = (e: KeyboardEvent) => {
+    if (Utils.keys.ENTER.includes(e.key)) {
+      this._handleAmPmInteraction(<HTMLElement>e.target);
+    }
   };
 
+  _handleAmPmInteraction = (e: HTMLElement) => {
+    this.amOrPm = e.classList.contains('am-btn') ? 'AM' : 'PM';
+    this._updateAmPmView();
+  }
+
   _updateAmPmView() {
     if (this.options.twelveHour) {
       if (this.amOrPm === 'PM') {
@@ -552,13 +565,13 @@ export class Timepicker extends Component<TimepickerOptions> {
       hideView = isHours ? this.minutesView : this.hoursView;
     this.currentView = view;
 
-    if (isHours) {
+    /*if (isHours) {
       this.inputHours.classList.add('text-primary');
       this.inputMinutes.classList.remove('text-primary');
     } else {
       this.inputHours.classList.remove('text-primary');
       this.inputMinutes.classList.add('text-primary');
-    }
+    }*/
 
     // Transition view
     hideView.classList.add('timepicker-dial-out');
@@ -771,7 +784,7 @@ export class Timepicker extends Component<TimepickerOptions> {
     Timepicker._template = `<div class="timepicker-container">
           <div class="timepicker-digital-display">
             <div class="timepicker-text-container">
-              <div class="timepicker-display-column">
+              <div class="timepicker-display-column timepicker-display-digital-clock">
                 <div class="timepicker-input-hours-wrapper">
                   <input type="text" maxlength="2" class="timepicker-input-hours text-primary" />
                 </div>

From 5864cfc102e1a141a2bb8019fcd2c4b0f97d9575 Mon Sep 17 00:00:00 2001
From: Geert Selderslaghs <geert@codemindit.com>
Date: Mon, 30 Dec 2024 19:48:49 +0100
Subject: [PATCH 20/43] enhancement(Timepicker) implemented options auto
 submit, user input callback #558

---
 src/timepicker.ts | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/timepicker.ts b/src/timepicker.ts
index a50a069b38..c5b913e40f 100644
--- a/src/timepicker.ts
+++ b/src/timepicker.ts
@@ -40,6 +40,11 @@ export interface TimepickerOptions extends BaseOptions {
    * @default false
    */
   showClearBtn: boolean;
+  /**
+   *  Autosubmit timepicker selection to input field
+   *  @default true
+   */
+  autoSubmit: true;
   /**
    * Default time to set on the timepicker 'now' or '13:14'.
    * @default 'now';
@@ -69,6 +74,11 @@ export interface TimepickerOptions extends BaseOptions {
    * @default null
    */
   onSelect: (hour: number, minute: number) => void;
+  /**
+   * Callback function for interaction with input field.
+   * @default null
+   */
+  onInputInteraction: (() => void) | null;
 }
 
 const _defaults: TimepickerOptions = {
@@ -81,6 +91,7 @@ const _defaults: TimepickerOptions = {
   defaultTime: 'now', // default time, 'now' or '13:14' e.g.
   fromNow: 0, // Millisecond offset from the defaultTime
   showClearBtn: false,
+  autoSubmit: true,
   // internationalization
   i18n: {
     cancel: 'Cancel',
@@ -90,7 +101,8 @@ const _defaults: TimepickerOptions = {
   twelveHour: true, // change to 12 hour AM/PM clock from 24 hour
   vibrate: true, // vibrate the device when dragging clock hand
   // Callbacks
-  onSelect: null
+  onSelect: null,
+  onInputInteraction: null
 };
 
 type Point = {
@@ -237,12 +249,14 @@ export class Timepicker extends Component<TimepickerOptions> {
 
   _handleInputClick = () => {
     this.inputHours.focus();
+    if (typeof this.options.onInputInteraction === 'function') this.options.onInputInteraction.call(this);
   };
 
   _handleInputKeydown = (e: KeyboardEvent) => {
     if (Utils.keys.ENTER.includes(e.key)) {
       e.preventDefault();
       this.inputHours.focus();
+      if (typeof this.options.onInputInteraction === 'function') this.options.onInputInteraction.call(this);
     }
   };
 
@@ -301,7 +315,7 @@ export class Timepicker extends Component<TimepickerOptions> {
     } else {
       // this.minutesView.classList.add('timepicker-dial-out');
       setTimeout(() => {
-        this.done();
+        if (this.options.autoSubmit) this.done();
       }, this.options.duration / 2);
     }
 

From 480e512b1e22e04acd66cc885fea15c61785ced3 Mon Sep 17 00:00:00 2001
From: Geert Selderslaghs <geert@codemindit.com>
Date: Mon, 30 Dec 2024 19:56:58 +0100
Subject: [PATCH 21/43] refactor(Timepicker) implemented callback methods for
 confirm, cancel; configured confirmation buttons to render when auto submit
 is false #558

---
 src/timepicker.ts | 52 ++++++++++++++++++++++++++++++++++++-----------
 1 file changed, 40 insertions(+), 12 deletions(-)

diff --git a/src/timepicker.ts b/src/timepicker.ts
index c5b913e40f..7a5914f84c 100644
--- a/src/timepicker.ts
+++ b/src/timepicker.ts
@@ -79,6 +79,16 @@ export interface TimepickerOptions extends BaseOptions {
    * @default null
    */
   onInputInteraction: (() => void) | null;
+  /**
+   * Callback function for done.
+   * @default null
+   */
+  onDone: (() => void) | null;
+  /**
+   * Callback function for cancel.
+   * @default null
+   */
+  onCancel: (() => void) | null;
 }
 
 const _defaults: TimepickerOptions = {
@@ -102,7 +112,9 @@ const _defaults: TimepickerOptions = {
   vibrate: true, // vibrate the device when dragging clock hand
   // Callbacks
   onSelect: null,
-  onInputInteraction: null
+  onInputInteraction: null,
+  onDone: null,
+  onCancel: null,
 };
 
 type Point = {
@@ -383,19 +395,21 @@ export class Timepicker extends Component<TimepickerOptions> {
     clearButton.addEventListener('click', this.clear);
     this.footer.appendChild(clearButton);
 
-    const confirmationBtnsContainer = document.createElement('div');
-    confirmationBtnsContainer.classList.add('confirmation-btns');
-    this.footer.append(confirmationBtnsContainer);
+    if (!this.options.autoSubmit) {
+      const confirmationBtnsContainer = document.createElement('div');
+      confirmationBtnsContainer.classList.add('confirmation-btns');
+      this.footer.append(confirmationBtnsContainer);
 
-    const cancelButton = this._createButton(this.options.i18n.cancel, '');
-    cancelButton.classList.add('timepicker-close');
-    cancelButton.addEventListener('click', this.close);
-    confirmationBtnsContainer.appendChild(cancelButton);
+      const 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._finishSelection);
-    confirmationBtnsContainer.appendChild(doneButton);
+      const doneButton = this._createButton(this.options.i18n.done, '');
+      doneButton.classList.add('timepicker-close');
+      doneButton.addEventListener('click', this.done);
+      confirmationBtnsContainer.appendChild(doneButton);
+    }
     this._updateTimeFromInput();
     this.showView('hours');
   }
@@ -775,6 +789,20 @@ export class Timepicker extends Component<TimepickerOptions> {
     }
   };
 
+  confirm = () => {
+    this.done();
+    if (typeof this.options.onDone === 'function') {
+      setTimeout(() => {
+        this.options.onDone.call(this);
+      }, this.options.duration / 2);
+    }
+  }
+
+  cancel = () => {
+    this.clear();
+    if (typeof this.options.onDone === 'function') this.options.onCancel.call(this);
+  }
+
   clear = () => {
     this.done(true);
   };

From 0f9f8bbc1f03df330d8f53633d69c975db839fd9 Mon Sep 17 00:00:00 2001
From: Geert Selderslaghs <geert@codemindit.com>
Date: Mon, 30 Dec 2024 20:01:48 +0100
Subject: [PATCH 22/43] enhancement(Timepicker) implement confirmation
 container util with callback function #558 #570

---
 src/timepicker.ts | 51 +++++++++++++++++++++++++----------------------
 1 file changed, 27 insertions(+), 24 deletions(-)

diff --git a/src/timepicker.ts b/src/timepicker.ts
index 7a5914f84c..195450325b 100644
--- a/src/timepicker.ts
+++ b/src/timepicker.ts
@@ -376,40 +376,43 @@ export class Timepicker extends Component<TimepickerOptions> {
     this.amOrPm = 'PM';
   }
 
-  private _createButton(text: string, visibility: string): HTMLButtonElement {
+  /*private _createButton(text: string, visibility: string): HTMLButtonElement {
     const button = document.createElement('button');
-    button.classList.add('btn', 'btn-flat', 'waves-effect', 'text');
+    button.classList.add('btn', 'waves-effect', 'text');
     button.style.visibility = visibility;
     button.type = 'button';
     button.tabIndex = -1;
     button.innerText = text;
     return button;
-  }
+  }*/
 
   _pickerSetup() {
-    const clearButton = this._createButton(
+    // clearButton.classList.add('timepicker-clear');
+    // clearButton.addEventListener('click', this.clear);
+    // this.footer.appendChild(clearButton);
+    Utils.createButton(
+      this.footer,
       this.options.i18n.clear,
-      this.options.showClearBtn ? '' : 'hidden'
+      ['timepicker-clear'],
+      this.options.showClearBtn,
+      this.clear
     );
-    clearButton.classList.add('timepicker-clear');
-    clearButton.addEventListener('click', this.clear);
-    this.footer.appendChild(clearButton);
-
-    if (!this.options.autoSubmit) {
-      const confirmationBtnsContainer = document.createElement('div');
-      confirmationBtnsContainer.classList.add('confirmation-btns');
-      this.footer.append(confirmationBtnsContainer);
-
-      const cancelButton = this._createButton(this.options.i18n.cancel, '');
-      cancelButton.classList.add('timepicker-close');
-      cancelButton.addEventListener('click', this.close);
-      confirmationBtnsContainer.appendChild(cancelButton);
-
-      const doneButton = this._createButton(this.options.i18n.done, '');
-      doneButton.classList.add('timepicker-close');
-      doneButton.addEventListener('click', this.done);
-      confirmationBtnsContainer.appendChild(doneButton);
-    }
+
+    /*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._finishSelection);
+    confirmationBtnsContainer.appendChild(doneButton);*/
+    Utils.createConfirmationContainer(this.footer, this.options.i18n.done, this.options.i18n.cancel, this.confirm, this.cancel);
+
     this._updateTimeFromInput();
     this.showView('hours');
   }

From b2866c4455cac9373420aa4d9fb972138896d019 Mon Sep 17 00:00:00 2001
From: Geert Selderslaghs <geert@codemindit.com>
Date: Tue, 31 Dec 2024 11:27:31 +0100
Subject: [PATCH 23/43] refactor(Timepicker) implemented additional condition
 to render confirmation container only if auto submit is false; removed
 timeout since its redundant; fixed incorrect callback option check in cancel
 callback #570

---
 src/timepicker.ts | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/timepicker.ts b/src/timepicker.ts
index 195450325b..e96dd2c7c8 100644
--- a/src/timepicker.ts
+++ b/src/timepicker.ts
@@ -398,6 +398,7 @@ export class Timepicker extends Component<TimepickerOptions> {
       this.clear
     );
 
+    if (!this.options.autoSubmit) {
     /*const confirmationBtnsContainer = document.createElement('div');
     confirmationBtnsContainer.classList.add('confirmation-btns');
     this.footer.append(confirmationBtnsContainer);
@@ -411,7 +412,14 @@ export class Timepicker extends Component<TimepickerOptions> {
     doneButton.classList.add('timepicker-close');
     //doneButton.addEventListener('click', this._finishSelection);
     confirmationBtnsContainer.appendChild(doneButton);*/
-    Utils.createConfirmationContainer(this.footer, this.options.i18n.done, this.options.i18n.cancel, this.confirm, this.cancel);
+      Utils.createConfirmationContainer(
+        this.footer,
+        this.options.i18n.done,
+        this.options.i18n.cancel,
+        this.confirm,
+        this.cancel
+      );
+    }
 
     this._updateTimeFromInput();
     this.showView('hours');
@@ -794,16 +802,12 @@ export class Timepicker extends Component<TimepickerOptions> {
 
   confirm = () => {
     this.done();
-    if (typeof this.options.onDone === 'function') {
-      setTimeout(() => {
-        this.options.onDone.call(this);
-      }, this.options.duration / 2);
-    }
+    if (typeof this.options.onDone === 'function') this.options.onDone.call(this);
   }
 
   cancel = () => {
     this.clear();
-    if (typeof this.options.onDone === 'function') this.options.onCancel.call(this);
+    if (typeof this.options.onCancel === 'function') this.options.onCancel.call(this);
   }
 
   clear = () => {

From 3e502391c5a6be845298712918aed3e0a1611a9b Mon Sep 17 00:00:00 2001
From: Geert Selderslaghs <geert@codemindit.com>
Date: Sat, 4 Jan 2025 12:19:31 +0100
Subject: [PATCH 24/43] refactor(Timepicker) update modal variables to
 container variables since modal usage in component is deprecated #558

---
 src/timepicker.ts | 30 +++++++++++++++---------------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/timepicker.ts b/src/timepicker.ts
index 7a5914f84c..cc516c7a03 100644
--- a/src/timepicker.ts
+++ b/src/timepicker.ts
@@ -125,7 +125,7 @@ type Point = {
 export class Timepicker extends Component<TimepickerOptions> {
   declare el: HTMLInputElement;
   id: string;
-  modalEl: HTMLElement;
+  containerEl: HTMLElement;
   plate: HTMLElement;
   digitalClock: HTMLElement;
   inputHours: HTMLInputElement;
@@ -238,7 +238,7 @@ export class Timepicker extends Component<TimepickerOptions> {
 
   destroy() {
     this._removeEventHandlers();
-    this.modalEl.remove();
+    this.containerEl.remove();
     this.el['M_Timepicker'] = undefined;
   }
 
@@ -343,17 +343,17 @@ export class Timepicker extends Component<TimepickerOptions> {
     const template = document.createElement('template');
     template.innerHTML = Timepicker._template.trim();
 
-    this.modalEl = <HTMLElement>template.content.firstChild;
-    this.modalEl.id = 'modal-' + this.id;
+    this.containerEl = <HTMLElement>template.content.firstChild;
+    this.containerEl.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);
+      containerEl.append(this.containerEl);
     } else {
-      this.el.parentElement.appendChild(this.modalEl);
+      this.el.parentElement.appendChild(this.containerEl);
     }
   }
 
@@ -364,15 +364,15 @@ export class Timepicker extends Component<TimepickerOptions> {
       : navigator['webkitVibrate']
         ? 'webkitVibrate'
         : null;
-    this._canvas = this.modalEl.querySelector('.timepicker-canvas');
-    this.plate = this.modalEl.querySelector('.timepicker-plate');
-    this.digitalClock = this.modalEl.querySelector('.timepicker-display-column');
-    this.hoursView = this.modalEl.querySelector('.timepicker-hours');
-    this.minutesView = this.modalEl.querySelector('.timepicker-minutes');
-    this.inputHours = this.modalEl.querySelector('.timepicker-input-hours');
-    this.inputMinutes = this.modalEl.querySelector('.timepicker-input-minutes');
-    this.spanAmPm = this.modalEl.querySelector('.timepicker-span-am-pm');
-    this.footer = this.modalEl.querySelector('.timepicker-footer');
+    this._canvas = this.containerEl.querySelector('.timepicker-canvas');
+    this.plate = this.containerEl.querySelector('.timepicker-plate');
+    this.digitalClock = this.containerEl.querySelector('.timepicker-display-column');
+    this.hoursView = this.containerEl.querySelector('.timepicker-hours');
+    this.minutesView = this.containerEl.querySelector('.timepicker-minutes');
+    this.inputHours = this.containerEl.querySelector('.timepicker-input-hours');
+    this.inputMinutes = this.containerEl.querySelector('.timepicker-input-minutes');
+    this.spanAmPm = this.containerEl.querySelector('.timepicker-span-am-pm');
+    this.footer = this.containerEl.querySelector('.timepicker-footer');
     this.amOrPm = 'PM';
   }
 

From ea0188df27fefecdab1c576043bbc7ffaf6d7e9c Mon Sep 17 00:00:00 2001
From: Geert Selderslaghs <geert@codemindit.com>
Date: Sun, 5 Jan 2025 16:12:53 +0100
Subject: [PATCH 25/43] refactor(Timepicker) modal-deprecation: replaced the
 modal-id with container-id #525 #558

---
 src/timepicker.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/timepicker.ts b/src/timepicker.ts
index cc516c7a03..3eb609a2c7 100644
--- a/src/timepicker.ts
+++ b/src/timepicker.ts
@@ -344,7 +344,7 @@ export class Timepicker extends Component<TimepickerOptions> {
     template.innerHTML = Timepicker._template.trim();
 
     this.containerEl = <HTMLElement>template.content.firstChild;
-    this.containerEl.id = 'modal-' + this.id;
+    this.containerEl.id = 'container-' + this.id;
 
     // Append popover to input by default
     const optEl = this.options.container;

From 3d799a3b91fffe1f8db50a7aef3d3a680c7ea002 Mon Sep 17 00:00:00 2001
From: Geert Selderslaghs <geert@codemindit.com>
Date: Thu, 9 Jan 2025 15:06:55 +0100
Subject: [PATCH 26/43] fix(Cards) remove redunant styling, fixes content
 whitespace

---
 sass/components/_cards.scss | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/sass/components/_cards.scss b/sass/components/_cards.scss
index ff01560383..e0b4e33518 100644
--- a/sass/components/_cards.scss
+++ b/sass/components/_cards.scss
@@ -134,11 +134,6 @@
     }
 
     .activator {
-      position: absolute;
-      left: 0;
-      right: 0;
-      top:0;
-      bottom: 0;
       cursor: pointer;
     }
   }

From 568fc19507ad2423e79295ab0956572161b5a2d2 Mon Sep 17 00:00:00 2001
From: Geert Selderslaghs <geert@codemindit.com>
Date: Thu, 9 Jan 2025 15:15:29 +0100
Subject: [PATCH 27/43] Revert "fix(Cards) remove redunant styling, fixes
 content whitespace"

This reverts commit 3d799a3b91fffe1f8db50a7aef3d3a680c7ea002.
---
 sass/components/_cards.scss | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/sass/components/_cards.scss b/sass/components/_cards.scss
index e0b4e33518..ff01560383 100644
--- a/sass/components/_cards.scss
+++ b/sass/components/_cards.scss
@@ -134,6 +134,11 @@
     }
 
     .activator {
+      position: absolute;
+      left: 0;
+      right: 0;
+      top:0;
+      bottom: 0;
       cursor: pointer;
     }
   }

From 0f1dccc771d1094b884f57db305e48d1b08329a8 Mon Sep 17 00:00:00 2001
From: Geert Selderslaghs <geert@codemindit.com>
Date: Thu, 9 Jan 2025 15:16:56 +0100
Subject: [PATCH 28/43] fix(Cards) set activator on image to relative position,
 fixes backwards compatibility break where activator is set directly on image

---
 sass/components/_cards.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/sass/components/_cards.scss b/sass/components/_cards.scss
index ff01560383..86ba3e2176 100644
--- a/sass/components/_cards.scss
+++ b/sass/components/_cards.scss
@@ -141,6 +141,10 @@
       bottom: 0;
       cursor: pointer;
     }
+
+    img.activator {
+      position: relative;
+    }
   }
 
   .card-content {

From 943431159aaf66a7e64ecf6b050be0663256ec66 Mon Sep 17 00:00:00 2001
From: Christopher Morgan <cmorgan@carrierlogistics.com>
Date: Fri, 10 Jan 2025 16:09:39 -0500
Subject: [PATCH 29/43] fix(Select) preserve native select tabIndex value and
 assign to input element materializecss#510

---
 src/select.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/select.ts b/src/select.ts
index 65b7e5f96f..2a681624ff 100644
--- a/src/select.ts
+++ b/src/select.ts
@@ -44,6 +44,7 @@ export class FormSelect extends Component<FormSelectOptions> {
   wrapper: HTMLDivElement;
   selectOptions: (HTMLOptionElement | HTMLOptGroupElement)[];
   private _values: ValueStruct[];
+  nativeTabIndex: number;
 
   constructor(el: HTMLSelectElement, options: FormSelectOptions) {
     super(el, options, FormSelect);
@@ -56,6 +57,7 @@ export class FormSelect extends Component<FormSelectOptions> {
     };
 
     this.isMultiple = this.el.multiple;
+    this.nativeTabIndex = (this.el.tabIndex ?? -1);
     this.el.tabIndex = -1;
     this._values = [];
     this._setupDropdown();
@@ -258,6 +260,7 @@ export class FormSelect extends Component<FormSelectOptions> {
     this.input.ariaReadOnly = 'true';
     this.input.ariaRequired = this.el.hasAttribute('required').toString(); //setAttribute("aria-required", this.el.hasAttribute("required"));
     if (this.el.disabled) this.input.disabled = true; // 'true');
+    this.input.setAttribute('tabindex', this.nativeTabIndex.toString());
 
     const attrs = this.el.attributes;
     for (let i = 0; i < attrs.length; ++i) {

From 58194b85f5d675105f8e64f0728a2ffb957f7c0b Mon Sep 17 00:00:00 2001
From: Geert Selderslaghs <geert@codemindit.com>
Date: Mon, 13 Jan 2025 20:42:39 +0100
Subject: [PATCH 30/43] fix(Breadcrumb) allow basic variant without background
 color #573

---
 sass/components/_breadcrumb.scss | 27 +++++++++++++++++++++++++++
 sass/components/_global.scss     | 19 ++++++++++---------
 sass/materialize.scss            |  1 +
 3 files changed, 38 insertions(+), 9 deletions(-)
 create mode 100644 sass/components/_breadcrumb.scss

diff --git a/sass/components/_breadcrumb.scss b/sass/components/_breadcrumb.scss
new file mode 100644
index 0000000000..7ef883c0a8
--- /dev/null
+++ b/sass/components/_breadcrumb.scss
@@ -0,0 +1,27 @@
+.breadcrumb-wrapper {
+  display: flex;
+  align-items: center;
+}
+
+.breadcrumb {
+  display: inline-flex;
+  align-items: center;
+
+  i,
+  i.material-icons, i.material-symbols-outlined,
+  i.material-symbols-rounded, i.material-symbols-sharp,
+  &:before {
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+  }
+
+  &:before {
+    content: '\E5CC';
+    font-family: 'Material Symbols Outlined', 'Material Symbols Rounded', 'Material Symbols Sharp', 'Material Icons';
+  }
+
+  &:first-child:before {
+    visibility: hidden;
+  }
+}
diff --git a/sass/components/_global.scss b/sass/components/_global.scss
index e37bbce2b2..cca67c6357 100644
--- a/sass/components/_global.scss
+++ b/sass/components/_global.scss
@@ -19,7 +19,7 @@ textarea {
   font-family: $font-stack;
 }
 
-a { color: $link-color; text-decoration: none; 
+a { color: $link-color; text-decoration: none;
    -webkit-tap-highlight-color: transparent; // Gets rid of tap active state
 }
 
@@ -117,7 +117,7 @@ i {
 
 // Modal
 html.noscroll {
-  position: fixed; 
+  position: fixed;
   overflow-y: scroll;
   width: 100%;
 }
@@ -194,8 +194,9 @@ video.responsive-video {
   }
 }
 
+// @todo remove this as component has moved to breadcrumb component scss file as of https://github.com/materializecss/materialize/issues/573
 // Breadcrumbs
-.breadcrumb {
+/*.breadcrumb {
   display: inline-block;
   font-size: 18px;
   color: var(--font-on-primary-color-medium);
@@ -230,7 +231,7 @@ video.responsive-video {
   &:last-child {
     color:  var(--md-sys-color-on-primary);
   }
-}
+}*/
 
 // Parallax
 .parallax-container {
@@ -526,7 +527,7 @@ $spacing-shortcuts: ("margin": "m", "padding": "p") !default;
 $spacing-directions: ("top": "t", "right": "r", "bottom": "b", "left": "l") !default;
 $spacing-horizontal: "x" !default;
 $spacing-vertical: "y" !default;
-$spacing-values: ("0": 0, "1": 0.25rem, "2": 0.5rem, "3": 0.75rem, "4": 1rem, "5": 1.5rem, "6": 3rem, "auto": auto) !default; 
+$spacing-values: ("0": 0, "1": 0.25rem, "2": 0.5rem, "3": 0.75rem, "4": 1rem, "5": 1.5rem, "6": 3rem, "auto": auto) !default;
 
 @each $property, $shortcut in $spacing-shortcuts{
   @each $name, $value in $spacing-values{
@@ -537,7 +538,7 @@ $spacing-values: ("0": 0, "1": 0.25rem, "2": 0.5rem, "3": 0.75rem, "4": 1rem, "5
     // (t, b, r, l) spacing
     @each $direction, $suffix in $spacing-directions{
       .#{$shortcut}#{$suffix}-#{$name}{
-        #{$property}-#{$direction}: $value !important 
+        #{$property}-#{$direction}: $value !important
       }
     }
     // x spacing
@@ -552,7 +553,7 @@ $spacing-values: ("0": 0, "1": 0.25rem, "2": 0.5rem, "3": 0.75rem, "4": 1rem, "5
       .#{$shortcut}#{$spacing-vertical}-#{$name}{
         #{$property}-top: $value !important;
         #{$property}-bottom: $value !important;
-      }        
-    }      
+      }
+    }
   }
-} 
\ No newline at end of file
+}
diff --git a/sass/materialize.scss b/sass/materialize.scss
index 523418335f..0c8fab4355 100644
--- a/sass/materialize.scss
+++ b/sass/materialize.scss
@@ -45,3 +45,4 @@
 @import "components/pulse";
 @import "components/datepicker";
 @import "components/timepicker";
+@import "components/breadcrumb";

From ba179b2cf2ccc6b2a34b1502688bfa43e261a93b Mon Sep 17 00:00:00 2001
From: Geert Selderslaghs <geert@codemindit.com>
Date: Thu, 2 Jan 2025 16:39:54 +0100
Subject: [PATCH 31/43] refactor(Buttons) implement buttons styling with mixin

---
 sass/components/_buttons.scss      |  60 ++++-------
 sass/components/mixins.module.scss | 155 +++++++++++++++++++++++++++++
 sass/materialize.scss              |   1 +
 3 files changed, 175 insertions(+), 41 deletions(-)
 create mode 100644 sass/components/mixins.module.scss

diff --git a/sass/components/_buttons.scss b/sass/components/_buttons.scss
index dbf1767a30..01f6e1dc7f 100644
--- a/sass/components/_buttons.scss
+++ b/sass/components/_buttons.scss
@@ -7,22 +7,13 @@
   --btn-border-radius: 4px;
   --btn-font-size: 14px;
 
-  height: var(--btn-height);
-  border: none;
-  border-radius: var(--btn-border-radius);
-  padding-left: var(--btn-padding);
-  padding-right: var(--btn-padding);
-  font-size: var(--btn-font-size);
-  font-weight: 500;
-  text-decoration: none;
-  display: inline-flex;
-  align-items: center;
-  cursor: pointer;
-  -webkit-tap-highlight-color: transparent; // Gets rid of tap active state
-  white-space: nowrap;
-  outline: 0;
-  user-select: none;
-  transition: background-color .2s ease-out;
+  @include btn(
+      var(--btn-height),
+      var(--btn-border-radius),
+      var(--btn-padding),
+      var(--btn-padding),
+      var(--btn-font-size)
+  );
 }
 
 // Icon
@@ -54,31 +45,23 @@
 //------------------ Enabled
 
 .btn.filled {
-  color: var(--md-sys-color-on-primary);
-  background-color: var(--md-sys-color-primary);
+  @include btn-filled;
 }
 
 .btn.tonal {
-  color: var(--md-sys-color-on-secondary-container);
-  background-color: var(--md-sys-color-secondary-container);
+  @include btn-tonal;
 }
 
 .btn.elevated {
-  color: var(--md-sys-color-on-secondary-container);
-  background-color: var(--md-sys-color-secondary-container);
-  @extend .z-depth-1;
+  @include btn-elevated;
 }
 
 .btn.outlined {
-  background-color: transparent;
-  color: var(--md-sys-color-primary);
-  border: 1px solid var(--md-sys-color-outline);
+  @include btn-outlined;
 }
 
 .btn.text, .btn-flat {
-  @extend .z-depth-0;
-  color: var(--md-sys-color-primary);
-  background-color: transparent;
+  @include btn-flat;
 }
 
 //------------------ Disabled
@@ -86,17 +69,12 @@
 .btn.disabled, .btn-floating.disabled, .btn-large.disabled, .btn-small.disabled, .btn-flat.disabled,
 .btn:disabled, .btn-floating:disabled, .btn-large:disabled, .btn-small:disabled, .btn-flat:disabled,
 .btn[disabled], .btn-floating[disabled], .btn-large[disabled], .btn-small[disabled], .btn-flat[disabled] {
-  @extend .z-depth-0;
-  color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 76%);
-  background-color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 24%);
-  pointer-events: none;
-  box-shadow: none;
-  cursor: default;
+  @include btn-disabled();
 }
 
 //------------------ Hover
 
-.btn.elevated:hover {
+/*.btn.elevated:hover {
   @extend .z-depth-2;
   color: var(--md-sys-color-primary);
   background-color: color-mix(in srgb, var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container) 16%);
@@ -122,11 +100,11 @@
 .btn.text:hover {
   color: var(--md-sys-color-primary);
   background-color: color-mix(in srgb, var(--md-sys-color-primary) 16%, transparent);
-}
+}*/
 
 //------------------ Focus
 
-.btn:focus {
+/*.btn:focus {
   background-color: var(--md-sys-color-primary-container);
 }
 
@@ -157,10 +135,10 @@
 .btn:focus.text {
   color: var(--md-sys-color-primary);
   background-color: color-mix(in srgb, transparent, var(--md-sys-color-primary) 20%);
-}
+}*/
 
 // Focus with Keyboard
-.btn:focus-visible {
+/*.btn:focus-visible {
   &.filled,
   &.elevated,
   &.tonal,
@@ -169,7 +147,7 @@
     outline: 3px solid var(--md-sys-color-secondary);
     outline-offset: 2px;
   }
-}
+}*/
 
 //----------
 
diff --git a/sass/components/mixins.module.scss b/sass/components/mixins.module.scss
new file mode 100644
index 0000000000..cdb9f469b6
--- /dev/null
+++ b/sass/components/mixins.module.scss
@@ -0,0 +1,155 @@
+@mixin btn(
+  $height: var(--btn-height),
+  $border-radius: var(--btn-border-radius),
+  $padding-left: var(--btn-padding),
+  $padding-right: var(--btn-padding),
+  $font-size: var(--btn-font-size),
+) {
+  height: $height;
+  border-radius: $border-radius;
+  padding-left: $padding-left;
+  padding-right: $padding-right;
+  font-size: $font-size;
+  font-weight: 500;
+  text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent; // Gets rid of tap active state
+  white-space: nowrap;
+  outline: 0;
+  user-select: none;
+  transition: background-color .2s ease-out;
+
+  &:focus {
+    background-color: var(--md-sys-color-primary-container);
+  }
+}
+
+@mixin btn-filled {
+  color: var(--md-sys-color-on-primary);
+  background-color: var(--md-sys-color-primary);
+
+  &:hover,
+  &:focus {
+    color: var(--md-sys-color-on-primary);
+  }
+
+  &:hover {
+    @extend .z-depth-1;
+    background-color: color-mix(in srgb, var(--md-sys-color-primary), var(--md-sys-color-on-primary) 16%);
+  }
+
+  &:focus {
+    @extend .z-depth-0;
+    background-color: color-mix(in srgb, var(--md-sys-color-primary), var(--md-sys-color-on-primary) 20%);
+  }
+
+  @include focus-visible();
+}
+
+@mixin btn-tonal {
+  color: var(--md-sys-color-on-secondary-container);
+  background-color: var(--md-sys-color-secondary-container);
+
+  &:hover,
+  &:focus {
+    color: var(--md-sys-color-on-secondary-container);
+  }
+
+  &:hover {
+    @extend .z-depth-1;
+    background-color: color-mix(in srgb, var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container) 16%);
+  }
+
+  &:focus {
+    @extend .z-depth-0;
+    background-color: color-mix(in srgb, var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container) 20%);
+  }
+
+  @include focus-visible();
+}
+
+@mixin btn-elevated {
+  color: var(--md-sys-color-on-secondary-container);
+  background-color: var(--md-sys-color-secondary-container);
+  @extend .z-depth-1;
+
+  &:hover,
+  &:focus {
+    color: var(--md-sys-color-primary);
+  }
+
+  &:hover {
+    @extend .z-depth-2;
+    background-color: color-mix(in srgb, var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container) 16%);
+  }
+
+  &:focus {
+    @extend .z-depth-1;
+    background-color: color-mix(in srgb, var(--md-sys-color-secondary-container), var(--md-sys-color-primary) 20%);
+  }
+
+  @include focus-visible();
+}
+
+@mixin btn-outlined {
+  background-color: transparent;
+  color: var(--md-sys-color-primary);
+  border: 1px solid var(--md-sys-color-outline);
+
+  &:hover,
+  &:focus {
+    color: var(--md-sys-color-primary);
+  }
+
+  &:hover {
+    background-color: color-mix(in srgb, transparent, var(--md-sys-color-primary) 16%);
+  }
+
+  &:focus {
+    background-color: color-mix(in srgb, transparent, var(--md-sys-color-primary) 20%);
+    border: 1px solid var(--md-sys-color-primary);
+  }
+
+  @include focus-visible();
+}
+
+@mixin btn-flat {
+  @extend .z-depth-0;
+  color: var(--md-sys-color-primary);
+  background-color: transparent;
+
+  &:hover,
+  &:focus {
+    color: var(--md-sys-color-primary);
+  }
+
+  &:hover {
+    background-color: color-mix(in srgb, var(--md-sys-color-primary) 16%, transparent);
+  }
+
+  &:focus {
+    background-color: color-mix(in srgb, transparent, var(--md-sys-color-primary) 20%);
+  }
+
+  @include focus-visible();
+}
+
+@mixin btn-disabled {
+  @extend .z-depth-0;
+  color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 76%);
+  background-color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 24%);
+  pointer-events: none;
+  box-shadow: none;
+  cursor: default;
+}
+
+// Focus with Keyboard
+@mixin focus-visible {
+  &:focus-visible {
+    outline: 3px solid var(--md-sys-color-secondary);
+    outline-offset: 2px;
+  }
+}
+
diff --git a/sass/materialize.scss b/sass/materialize.scss
index 523418335f..2134022682 100644
--- a/sass/materialize.scss
+++ b/sass/materialize.scss
@@ -5,6 +5,7 @@
 //@import "components/_theme_variables";
 @import "components/colors.module";
 @import "components/typography.module";
+@import "components/mixins.module";
 
 // Color
 @import "components/color-variables";

From 97e6837265cc150ee7bbef5bdba3a9b060f6afdc Mon Sep 17 00:00:00 2001
From: Geert Selderslaghs <geert@codemindit.com>
Date: Thu, 2 Jan 2025 17:00:11 +0100
Subject: [PATCH 32/43] refactor(Buttons) make sure theme vars are accessible
 for additional components

---
 sass/components/_buttons.scss | 4 +++-
 sass/materialize.scss         | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/sass/components/_buttons.scss b/sass/components/_buttons.scss
index 01f6e1dc7f..c3dad68e2f 100644
--- a/sass/components/_buttons.scss
+++ b/sass/components/_buttons.scss
@@ -1,4 +1,4 @@
-.btn, .btn-floating, .btn-large, .btn-small, .btn-flat {
+:root {
   --btn-height: 40px;
   --btn-font-size-icon: 16px;
   --btn-padding: 24px;
@@ -6,7 +6,9 @@
   --btn-gap-icon: 8px;
   --btn-border-radius: 4px;
   --btn-font-size: 14px;
+}
 
+.btn, .btn-floating, .btn-large, .btn-small, .btn-flat {
   @include btn(
       var(--btn-height),
       var(--btn-border-radius),
diff --git a/sass/materialize.scss b/sass/materialize.scss
index 2134022682..0afe47bff0 100644
--- a/sass/materialize.scss
+++ b/sass/materialize.scss
@@ -18,6 +18,7 @@
 
 // components
 @import "components/global";
+@import "components/buttons";
 @import "components/collection";
 @import "components/badges";
 @import "components/icons-material-design";
@@ -29,7 +30,6 @@
 @import "components/toast";
 @import "components/tabs";
 @import "components/tooltip";
-@import "components/buttons";
 @import "components/dropdown";
 
 @import "components/modal";

From 76d11e9e1a7f13ff397a8f8b9f3140cf57f70538 Mon Sep 17 00:00:00 2001
From: Geert Selderslaghs <geert@codemindit.com>
Date: Thu, 2 Jan 2025 16:39:54 +0100
Subject: [PATCH 33/43] refactor(Buttons) implement buttons styling with mixin

---
 sass/components/_buttons.scss      |  60 ++++-------
 sass/components/mixins.module.scss | 155 +++++++++++++++++++++++++++++
 sass/materialize.scss              |   1 +
 3 files changed, 175 insertions(+), 41 deletions(-)
 create mode 100644 sass/components/mixins.module.scss

diff --git a/sass/components/_buttons.scss b/sass/components/_buttons.scss
index dbf1767a30..01f6e1dc7f 100644
--- a/sass/components/_buttons.scss
+++ b/sass/components/_buttons.scss
@@ -7,22 +7,13 @@
   --btn-border-radius: 4px;
   --btn-font-size: 14px;
 
-  height: var(--btn-height);
-  border: none;
-  border-radius: var(--btn-border-radius);
-  padding-left: var(--btn-padding);
-  padding-right: var(--btn-padding);
-  font-size: var(--btn-font-size);
-  font-weight: 500;
-  text-decoration: none;
-  display: inline-flex;
-  align-items: center;
-  cursor: pointer;
-  -webkit-tap-highlight-color: transparent; // Gets rid of tap active state
-  white-space: nowrap;
-  outline: 0;
-  user-select: none;
-  transition: background-color .2s ease-out;
+  @include btn(
+      var(--btn-height),
+      var(--btn-border-radius),
+      var(--btn-padding),
+      var(--btn-padding),
+      var(--btn-font-size)
+  );
 }
 
 // Icon
@@ -54,31 +45,23 @@
 //------------------ Enabled
 
 .btn.filled {
-  color: var(--md-sys-color-on-primary);
-  background-color: var(--md-sys-color-primary);
+  @include btn-filled;
 }
 
 .btn.tonal {
-  color: var(--md-sys-color-on-secondary-container);
-  background-color: var(--md-sys-color-secondary-container);
+  @include btn-tonal;
 }
 
 .btn.elevated {
-  color: var(--md-sys-color-on-secondary-container);
-  background-color: var(--md-sys-color-secondary-container);
-  @extend .z-depth-1;
+  @include btn-elevated;
 }
 
 .btn.outlined {
-  background-color: transparent;
-  color: var(--md-sys-color-primary);
-  border: 1px solid var(--md-sys-color-outline);
+  @include btn-outlined;
 }
 
 .btn.text, .btn-flat {
-  @extend .z-depth-0;
-  color: var(--md-sys-color-primary);
-  background-color: transparent;
+  @include btn-flat;
 }
 
 //------------------ Disabled
@@ -86,17 +69,12 @@
 .btn.disabled, .btn-floating.disabled, .btn-large.disabled, .btn-small.disabled, .btn-flat.disabled,
 .btn:disabled, .btn-floating:disabled, .btn-large:disabled, .btn-small:disabled, .btn-flat:disabled,
 .btn[disabled], .btn-floating[disabled], .btn-large[disabled], .btn-small[disabled], .btn-flat[disabled] {
-  @extend .z-depth-0;
-  color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 76%);
-  background-color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 24%);
-  pointer-events: none;
-  box-shadow: none;
-  cursor: default;
+  @include btn-disabled();
 }
 
 //------------------ Hover
 
-.btn.elevated:hover {
+/*.btn.elevated:hover {
   @extend .z-depth-2;
   color: var(--md-sys-color-primary);
   background-color: color-mix(in srgb, var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container) 16%);
@@ -122,11 +100,11 @@
 .btn.text:hover {
   color: var(--md-sys-color-primary);
   background-color: color-mix(in srgb, var(--md-sys-color-primary) 16%, transparent);
-}
+}*/
 
 //------------------ Focus
 
-.btn:focus {
+/*.btn:focus {
   background-color: var(--md-sys-color-primary-container);
 }
 
@@ -157,10 +135,10 @@
 .btn:focus.text {
   color: var(--md-sys-color-primary);
   background-color: color-mix(in srgb, transparent, var(--md-sys-color-primary) 20%);
-}
+}*/
 
 // Focus with Keyboard
-.btn:focus-visible {
+/*.btn:focus-visible {
   &.filled,
   &.elevated,
   &.tonal,
@@ -169,7 +147,7 @@
     outline: 3px solid var(--md-sys-color-secondary);
     outline-offset: 2px;
   }
-}
+}*/
 
 //----------
 
diff --git a/sass/components/mixins.module.scss b/sass/components/mixins.module.scss
new file mode 100644
index 0000000000..cdb9f469b6
--- /dev/null
+++ b/sass/components/mixins.module.scss
@@ -0,0 +1,155 @@
+@mixin btn(
+  $height: var(--btn-height),
+  $border-radius: var(--btn-border-radius),
+  $padding-left: var(--btn-padding),
+  $padding-right: var(--btn-padding),
+  $font-size: var(--btn-font-size),
+) {
+  height: $height;
+  border-radius: $border-radius;
+  padding-left: $padding-left;
+  padding-right: $padding-right;
+  font-size: $font-size;
+  font-weight: 500;
+  text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent; // Gets rid of tap active state
+  white-space: nowrap;
+  outline: 0;
+  user-select: none;
+  transition: background-color .2s ease-out;
+
+  &:focus {
+    background-color: var(--md-sys-color-primary-container);
+  }
+}
+
+@mixin btn-filled {
+  color: var(--md-sys-color-on-primary);
+  background-color: var(--md-sys-color-primary);
+
+  &:hover,
+  &:focus {
+    color: var(--md-sys-color-on-primary);
+  }
+
+  &:hover {
+    @extend .z-depth-1;
+    background-color: color-mix(in srgb, var(--md-sys-color-primary), var(--md-sys-color-on-primary) 16%);
+  }
+
+  &:focus {
+    @extend .z-depth-0;
+    background-color: color-mix(in srgb, var(--md-sys-color-primary), var(--md-sys-color-on-primary) 20%);
+  }
+
+  @include focus-visible();
+}
+
+@mixin btn-tonal {
+  color: var(--md-sys-color-on-secondary-container);
+  background-color: var(--md-sys-color-secondary-container);
+
+  &:hover,
+  &:focus {
+    color: var(--md-sys-color-on-secondary-container);
+  }
+
+  &:hover {
+    @extend .z-depth-1;
+    background-color: color-mix(in srgb, var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container) 16%);
+  }
+
+  &:focus {
+    @extend .z-depth-0;
+    background-color: color-mix(in srgb, var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container) 20%);
+  }
+
+  @include focus-visible();
+}
+
+@mixin btn-elevated {
+  color: var(--md-sys-color-on-secondary-container);
+  background-color: var(--md-sys-color-secondary-container);
+  @extend .z-depth-1;
+
+  &:hover,
+  &:focus {
+    color: var(--md-sys-color-primary);
+  }
+
+  &:hover {
+    @extend .z-depth-2;
+    background-color: color-mix(in srgb, var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container) 16%);
+  }
+
+  &:focus {
+    @extend .z-depth-1;
+    background-color: color-mix(in srgb, var(--md-sys-color-secondary-container), var(--md-sys-color-primary) 20%);
+  }
+
+  @include focus-visible();
+}
+
+@mixin btn-outlined {
+  background-color: transparent;
+  color: var(--md-sys-color-primary);
+  border: 1px solid var(--md-sys-color-outline);
+
+  &:hover,
+  &:focus {
+    color: var(--md-sys-color-primary);
+  }
+
+  &:hover {
+    background-color: color-mix(in srgb, transparent, var(--md-sys-color-primary) 16%);
+  }
+
+  &:focus {
+    background-color: color-mix(in srgb, transparent, var(--md-sys-color-primary) 20%);
+    border: 1px solid var(--md-sys-color-primary);
+  }
+
+  @include focus-visible();
+}
+
+@mixin btn-flat {
+  @extend .z-depth-0;
+  color: var(--md-sys-color-primary);
+  background-color: transparent;
+
+  &:hover,
+  &:focus {
+    color: var(--md-sys-color-primary);
+  }
+
+  &:hover {
+    background-color: color-mix(in srgb, var(--md-sys-color-primary) 16%, transparent);
+  }
+
+  &:focus {
+    background-color: color-mix(in srgb, transparent, var(--md-sys-color-primary) 20%);
+  }
+
+  @include focus-visible();
+}
+
+@mixin btn-disabled {
+  @extend .z-depth-0;
+  color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 76%);
+  background-color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 24%);
+  pointer-events: none;
+  box-shadow: none;
+  cursor: default;
+}
+
+// Focus with Keyboard
+@mixin focus-visible {
+  &:focus-visible {
+    outline: 3px solid var(--md-sys-color-secondary);
+    outline-offset: 2px;
+  }
+}
+
diff --git a/sass/materialize.scss b/sass/materialize.scss
index 523418335f..2134022682 100644
--- a/sass/materialize.scss
+++ b/sass/materialize.scss
@@ -5,6 +5,7 @@
 //@import "components/_theme_variables";
 @import "components/colors.module";
 @import "components/typography.module";
+@import "components/mixins.module";
 
 // Color
 @import "components/color-variables";

From ce367b2417f9a2caabd6e73f4e6f34bb43694e1b Mon Sep 17 00:00:00 2001
From: Geert Selderslaghs <geert@codemindit.com>
Date: Thu, 2 Jan 2025 16:45:07 +0100
Subject: [PATCH 34/43] refactor(Cards) implemented buttons scss styling mixin
 #565

---
 sass/components/_cards.scss | 37 +++++++++++++++++++++++++++++++++----
 1 file changed, 33 insertions(+), 4 deletions(-)

diff --git a/sass/components/_cards.scss b/sass/components/_cards.scss
index ff01560383..5bab92fe8b 100644
--- a/sass/components/_cards.scss
+++ b/sass/components/_cards.scss
@@ -171,11 +171,13 @@
       border-radius: 0 0 2px 2px;
     }
 
-    border-top: 1px solid var(--md-sys-color-outline-variant);
-    position: relative;
-    background-color: inherit;
+    // position: relative;
+    padding: 0 1.6rem;
+    // border-top: 1px solid var(--md-sys-color-outline-variant);
+    // background-color: inherit;
 
-    a {
+    // Replaced card links with buttons (Accessibility, @see https://github.com/materializecss/materialize/issues/565)
+    /*a {
       padding: 16px 24px;
       display: inline-block;
     }
@@ -187,6 +189,33 @@
       &:hover {
         background-color: rgba(var(--md-sys-color-primary-numeric), 0.06);
       }
+    }*/
+
+    a {
+      @include btn(
+          var(--btn-height),
+          var(--btn-border-radius),
+          var(--btn-padding),
+          var(--btn-padding),
+          var(--btn-font-size)
+      );
+
+      &:first-child {
+        margin-left: -1.6rem;
+      }
+
+      &:last-child {
+        margin-right: -1.6rem;
+      }
+    }
+
+    .btn {
+      &.filled,
+      &.tonal,
+      &.elevated,
+      &.outlined {
+        margin: 0 .26rem 1.6rem 0;
+      }
     }
   }
 

From 6da7599db484499cbc3f377c1d4d292d3de3a80d Mon Sep 17 00:00:00 2001
From: Geert Selderslaghs <geert@codemindit.com>
Date: Thu, 2 Jan 2025 17:00:11 +0100
Subject: [PATCH 35/43] refactor(Buttons) make sure theme vars are accessible
 for additional components

---
 sass/components/_buttons.scss | 4 +++-
 sass/materialize.scss         | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/sass/components/_buttons.scss b/sass/components/_buttons.scss
index 01f6e1dc7f..c3dad68e2f 100644
--- a/sass/components/_buttons.scss
+++ b/sass/components/_buttons.scss
@@ -1,4 +1,4 @@
-.btn, .btn-floating, .btn-large, .btn-small, .btn-flat {
+:root {
   --btn-height: 40px;
   --btn-font-size-icon: 16px;
   --btn-padding: 24px;
@@ -6,7 +6,9 @@
   --btn-gap-icon: 8px;
   --btn-border-radius: 4px;
   --btn-font-size: 14px;
+}
 
+.btn, .btn-floating, .btn-large, .btn-small, .btn-flat {
   @include btn(
       var(--btn-height),
       var(--btn-border-radius),
diff --git a/sass/materialize.scss b/sass/materialize.scss
index 2134022682..0afe47bff0 100644
--- a/sass/materialize.scss
+++ b/sass/materialize.scss
@@ -18,6 +18,7 @@
 
 // components
 @import "components/global";
+@import "components/buttons";
 @import "components/collection";
 @import "components/badges";
 @import "components/icons-material-design";
@@ -29,7 +30,6 @@
 @import "components/toast";
 @import "components/tabs";
 @import "components/tooltip";
-@import "components/buttons";
 @import "components/dropdown";
 
 @import "components/modal";

From 3c930db76e10ec6bf9b47d9ebc7768a20b43134f Mon Sep 17 00:00:00 2001
From: Geert Selderslaghs <geert@codemindit.com>
Date: Thu, 2 Jan 2025 17:01:13 +0100
Subject: [PATCH 36/43] refactor(Cards) auto init unitialized cards #565

---
 src/cards.ts | 11 +++++++++++
 src/index.ts |  1 +
 2 files changed, 12 insertions(+)

diff --git a/src/cards.ts b/src/cards.ts
index 110c80ede5..ebe714ee90 100644
--- a/src/cards.ts
+++ b/src/cards.ts
@@ -173,4 +173,15 @@ export class Cards extends Component<CardsOptions> implements Openable {
     }
     this._removeRevealCloseEventHandlers();
   };
+
+  static Init() {
+    if (typeof document !== 'undefined')
+      // Handle initialization of static cards.
+      document.addEventListener('DOMContentLoaded', () => {
+        const cards = document.querySelectorAll('.card');
+        cards.forEach((el) => {
+          if (el && (el['M_Card'] == undefined)) this.init((el as HTMLElement));
+        });
+      });
+  }
 }
diff --git a/src/index.ts b/src/index.ts
index e8b227939a..4842b11aa8 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -138,3 +138,4 @@ Forms.Init();
 Chips.Init();
 Waves.Init();
 Range.Init();
+Cards.Init();

From bc23971cc46bd66aa91160eb5ef5e1450a04dbde Mon Sep 17 00:00:00 2001
From: Geert Selderslaghs <geert@codemindit.com>
Date: Thu, 2 Jan 2025 16:39:54 +0100
Subject: [PATCH 37/43] refactor(Buttons) implement buttons styling with mixin

---
 sass/components/_buttons.scss      |  60 ++++-------
 sass/components/mixins.module.scss | 155 +++++++++++++++++++++++++++++
 sass/materialize.scss              |   1 +
 3 files changed, 175 insertions(+), 41 deletions(-)
 create mode 100644 sass/components/mixins.module.scss

diff --git a/sass/components/_buttons.scss b/sass/components/_buttons.scss
index dbf1767a30..01f6e1dc7f 100644
--- a/sass/components/_buttons.scss
+++ b/sass/components/_buttons.scss
@@ -7,22 +7,13 @@
   --btn-border-radius: 4px;
   --btn-font-size: 14px;
 
-  height: var(--btn-height);
-  border: none;
-  border-radius: var(--btn-border-radius);
-  padding-left: var(--btn-padding);
-  padding-right: var(--btn-padding);
-  font-size: var(--btn-font-size);
-  font-weight: 500;
-  text-decoration: none;
-  display: inline-flex;
-  align-items: center;
-  cursor: pointer;
-  -webkit-tap-highlight-color: transparent; // Gets rid of tap active state
-  white-space: nowrap;
-  outline: 0;
-  user-select: none;
-  transition: background-color .2s ease-out;
+  @include btn(
+      var(--btn-height),
+      var(--btn-border-radius),
+      var(--btn-padding),
+      var(--btn-padding),
+      var(--btn-font-size)
+  );
 }
 
 // Icon
@@ -54,31 +45,23 @@
 //------------------ Enabled
 
 .btn.filled {
-  color: var(--md-sys-color-on-primary);
-  background-color: var(--md-sys-color-primary);
+  @include btn-filled;
 }
 
 .btn.tonal {
-  color: var(--md-sys-color-on-secondary-container);
-  background-color: var(--md-sys-color-secondary-container);
+  @include btn-tonal;
 }
 
 .btn.elevated {
-  color: var(--md-sys-color-on-secondary-container);
-  background-color: var(--md-sys-color-secondary-container);
-  @extend .z-depth-1;
+  @include btn-elevated;
 }
 
 .btn.outlined {
-  background-color: transparent;
-  color: var(--md-sys-color-primary);
-  border: 1px solid var(--md-sys-color-outline);
+  @include btn-outlined;
 }
 
 .btn.text, .btn-flat {
-  @extend .z-depth-0;
-  color: var(--md-sys-color-primary);
-  background-color: transparent;
+  @include btn-flat;
 }
 
 //------------------ Disabled
@@ -86,17 +69,12 @@
 .btn.disabled, .btn-floating.disabled, .btn-large.disabled, .btn-small.disabled, .btn-flat.disabled,
 .btn:disabled, .btn-floating:disabled, .btn-large:disabled, .btn-small:disabled, .btn-flat:disabled,
 .btn[disabled], .btn-floating[disabled], .btn-large[disabled], .btn-small[disabled], .btn-flat[disabled] {
-  @extend .z-depth-0;
-  color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 76%);
-  background-color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 24%);
-  pointer-events: none;
-  box-shadow: none;
-  cursor: default;
+  @include btn-disabled();
 }
 
 //------------------ Hover
 
-.btn.elevated:hover {
+/*.btn.elevated:hover {
   @extend .z-depth-2;
   color: var(--md-sys-color-primary);
   background-color: color-mix(in srgb, var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container) 16%);
@@ -122,11 +100,11 @@
 .btn.text:hover {
   color: var(--md-sys-color-primary);
   background-color: color-mix(in srgb, var(--md-sys-color-primary) 16%, transparent);
-}
+}*/
 
 //------------------ Focus
 
-.btn:focus {
+/*.btn:focus {
   background-color: var(--md-sys-color-primary-container);
 }
 
@@ -157,10 +135,10 @@
 .btn:focus.text {
   color: var(--md-sys-color-primary);
   background-color: color-mix(in srgb, transparent, var(--md-sys-color-primary) 20%);
-}
+}*/
 
 // Focus with Keyboard
-.btn:focus-visible {
+/*.btn:focus-visible {
   &.filled,
   &.elevated,
   &.tonal,
@@ -169,7 +147,7 @@
     outline: 3px solid var(--md-sys-color-secondary);
     outline-offset: 2px;
   }
-}
+}*/
 
 //----------
 
diff --git a/sass/components/mixins.module.scss b/sass/components/mixins.module.scss
new file mode 100644
index 0000000000..cdb9f469b6
--- /dev/null
+++ b/sass/components/mixins.module.scss
@@ -0,0 +1,155 @@
+@mixin btn(
+  $height: var(--btn-height),
+  $border-radius: var(--btn-border-radius),
+  $padding-left: var(--btn-padding),
+  $padding-right: var(--btn-padding),
+  $font-size: var(--btn-font-size),
+) {
+  height: $height;
+  border-radius: $border-radius;
+  padding-left: $padding-left;
+  padding-right: $padding-right;
+  font-size: $font-size;
+  font-weight: 500;
+  text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent; // Gets rid of tap active state
+  white-space: nowrap;
+  outline: 0;
+  user-select: none;
+  transition: background-color .2s ease-out;
+
+  &:focus {
+    background-color: var(--md-sys-color-primary-container);
+  }
+}
+
+@mixin btn-filled {
+  color: var(--md-sys-color-on-primary);
+  background-color: var(--md-sys-color-primary);
+
+  &:hover,
+  &:focus {
+    color: var(--md-sys-color-on-primary);
+  }
+
+  &:hover {
+    @extend .z-depth-1;
+    background-color: color-mix(in srgb, var(--md-sys-color-primary), var(--md-sys-color-on-primary) 16%);
+  }
+
+  &:focus {
+    @extend .z-depth-0;
+    background-color: color-mix(in srgb, var(--md-sys-color-primary), var(--md-sys-color-on-primary) 20%);
+  }
+
+  @include focus-visible();
+}
+
+@mixin btn-tonal {
+  color: var(--md-sys-color-on-secondary-container);
+  background-color: var(--md-sys-color-secondary-container);
+
+  &:hover,
+  &:focus {
+    color: var(--md-sys-color-on-secondary-container);
+  }
+
+  &:hover {
+    @extend .z-depth-1;
+    background-color: color-mix(in srgb, var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container) 16%);
+  }
+
+  &:focus {
+    @extend .z-depth-0;
+    background-color: color-mix(in srgb, var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container) 20%);
+  }
+
+  @include focus-visible();
+}
+
+@mixin btn-elevated {
+  color: var(--md-sys-color-on-secondary-container);
+  background-color: var(--md-sys-color-secondary-container);
+  @extend .z-depth-1;
+
+  &:hover,
+  &:focus {
+    color: var(--md-sys-color-primary);
+  }
+
+  &:hover {
+    @extend .z-depth-2;
+    background-color: color-mix(in srgb, var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container) 16%);
+  }
+
+  &:focus {
+    @extend .z-depth-1;
+    background-color: color-mix(in srgb, var(--md-sys-color-secondary-container), var(--md-sys-color-primary) 20%);
+  }
+
+  @include focus-visible();
+}
+
+@mixin btn-outlined {
+  background-color: transparent;
+  color: var(--md-sys-color-primary);
+  border: 1px solid var(--md-sys-color-outline);
+
+  &:hover,
+  &:focus {
+    color: var(--md-sys-color-primary);
+  }
+
+  &:hover {
+    background-color: color-mix(in srgb, transparent, var(--md-sys-color-primary) 16%);
+  }
+
+  &:focus {
+    background-color: color-mix(in srgb, transparent, var(--md-sys-color-primary) 20%);
+    border: 1px solid var(--md-sys-color-primary);
+  }
+
+  @include focus-visible();
+}
+
+@mixin btn-flat {
+  @extend .z-depth-0;
+  color: var(--md-sys-color-primary);
+  background-color: transparent;
+
+  &:hover,
+  &:focus {
+    color: var(--md-sys-color-primary);
+  }
+
+  &:hover {
+    background-color: color-mix(in srgb, var(--md-sys-color-primary) 16%, transparent);
+  }
+
+  &:focus {
+    background-color: color-mix(in srgb, transparent, var(--md-sys-color-primary) 20%);
+  }
+
+  @include focus-visible();
+}
+
+@mixin btn-disabled {
+  @extend .z-depth-0;
+  color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 76%);
+  background-color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 24%);
+  pointer-events: none;
+  box-shadow: none;
+  cursor: default;
+}
+
+// Focus with Keyboard
+@mixin focus-visible {
+  &:focus-visible {
+    outline: 3px solid var(--md-sys-color-secondary);
+    outline-offset: 2px;
+  }
+}
+
diff --git a/sass/materialize.scss b/sass/materialize.scss
index 523418335f..2134022682 100644
--- a/sass/materialize.scss
+++ b/sass/materialize.scss
@@ -5,6 +5,7 @@
 //@import "components/_theme_variables";
 @import "components/colors.module";
 @import "components/typography.module";
+@import "components/mixins.module";
 
 // Color
 @import "components/color-variables";

From 0154d6cc3aa5c663d2f45a3c78a8e064fd823b83 Mon Sep 17 00:00:00 2001
From: Geert Selderslaghs <geert@codemindit.com>
Date: Thu, 2 Jan 2025 17:00:11 +0100
Subject: [PATCH 38/43] refactor(Buttons) make sure theme vars are accessible
 for additional components

---
 sass/components/_buttons.scss | 4 +++-
 sass/materialize.scss         | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/sass/components/_buttons.scss b/sass/components/_buttons.scss
index 01f6e1dc7f..c3dad68e2f 100644
--- a/sass/components/_buttons.scss
+++ b/sass/components/_buttons.scss
@@ -1,4 +1,4 @@
-.btn, .btn-floating, .btn-large, .btn-small, .btn-flat {
+:root {
   --btn-height: 40px;
   --btn-font-size-icon: 16px;
   --btn-padding: 24px;
@@ -6,7 +6,9 @@
   --btn-gap-icon: 8px;
   --btn-border-radius: 4px;
   --btn-font-size: 14px;
+}
 
+.btn, .btn-floating, .btn-large, .btn-small, .btn-flat {
   @include btn(
       var(--btn-height),
       var(--btn-border-radius),
diff --git a/sass/materialize.scss b/sass/materialize.scss
index 2134022682..0afe47bff0 100644
--- a/sass/materialize.scss
+++ b/sass/materialize.scss
@@ -18,6 +18,7 @@
 
 // components
 @import "components/global";
+@import "components/buttons";
 @import "components/collection";
 @import "components/badges";
 @import "components/icons-material-design";
@@ -29,7 +30,6 @@
 @import "components/toast";
 @import "components/tabs";
 @import "components/tooltip";
-@import "components/buttons";
 @import "components/dropdown";
 
 @import "components/modal";

From b9ddf10024654314bf0372c8876fe40414357202 Mon Sep 17 00:00:00 2001
From: Geert Selderslaghs <geert@codemindit.com>
Date: Thu, 2 Jan 2025 17:08:12 +0100
Subject: [PATCH 39/43] refactor(Pagination) implemented button scss styling
 mixin #566

---
 sass/components/_global.scss     | 19 +++++++-------
 sass/components/_pagination.scss | 45 ++++++++++++++++++++++++++++++++
 sass/materialize.scss            |  1 +
 3 files changed, 56 insertions(+), 9 deletions(-)
 create mode 100644 sass/components/_pagination.scss

diff --git a/sass/components/_global.scss b/sass/components/_global.scss
index e37bbce2b2..61f82a94b5 100644
--- a/sass/components/_global.scss
+++ b/sass/components/_global.scss
@@ -19,7 +19,7 @@ textarea {
   font-family: $font-stack;
 }
 
-a { color: $link-color; text-decoration: none; 
+a { color: $link-color; text-decoration: none;
    -webkit-tap-highlight-color: transparent; // Gets rid of tap active state
 }
 
@@ -117,7 +117,7 @@ i {
 
 // Modal
 html.noscroll {
-  position: fixed; 
+  position: fixed;
   overflow-y: scroll;
   width: 100%;
 }
@@ -129,8 +129,9 @@ video.responsive-video {
   height: auto;
 }
 
+// moved to own component styling file @see https://github.com/materializecss/materialize/issues/566
 // Pagination
-.pagination {
+/*.pagination {
 
   li {
     display: inline-block;
@@ -192,7 +193,7 @@ video.responsive-video {
       white-space: nowrap;
     }
   }
-}
+}*/
 
 // Breadcrumbs
 .breadcrumb {
@@ -526,7 +527,7 @@ $spacing-shortcuts: ("margin": "m", "padding": "p") !default;
 $spacing-directions: ("top": "t", "right": "r", "bottom": "b", "left": "l") !default;
 $spacing-horizontal: "x" !default;
 $spacing-vertical: "y" !default;
-$spacing-values: ("0": 0, "1": 0.25rem, "2": 0.5rem, "3": 0.75rem, "4": 1rem, "5": 1.5rem, "6": 3rem, "auto": auto) !default; 
+$spacing-values: ("0": 0, "1": 0.25rem, "2": 0.5rem, "3": 0.75rem, "4": 1rem, "5": 1.5rem, "6": 3rem, "auto": auto) !default;
 
 @each $property, $shortcut in $spacing-shortcuts{
   @each $name, $value in $spacing-values{
@@ -537,7 +538,7 @@ $spacing-values: ("0": 0, "1": 0.25rem, "2": 0.5rem, "3": 0.75rem, "4": 1rem, "5
     // (t, b, r, l) spacing
     @each $direction, $suffix in $spacing-directions{
       .#{$shortcut}#{$suffix}-#{$name}{
-        #{$property}-#{$direction}: $value !important 
+        #{$property}-#{$direction}: $value !important
       }
     }
     // x spacing
@@ -552,7 +553,7 @@ $spacing-values: ("0": 0, "1": 0.25rem, "2": 0.5rem, "3": 0.75rem, "4": 1rem, "5
       .#{$shortcut}#{$spacing-vertical}-#{$name}{
         #{$property}-top: $value !important;
         #{$property}-bottom: $value !important;
-      }        
-    }      
+      }
+    }
   }
-} 
\ No newline at end of file
+}
diff --git a/sass/components/_pagination.scss b/sass/components/_pagination.scss
new file mode 100644
index 0000000000..1b74216609
--- /dev/null
+++ b/sass/components/_pagination.scss
@@ -0,0 +1,45 @@
+// Pagination
+.pagination {
+  li {
+    display: inline-block;
+    vertical-align: top;
+
+    a {
+      @include btn($height: 2rem, $padding-left: .66rem, $padding-right: .66rem, $font-size: 1.2rem);
+    }
+
+    &.active a {
+      @include btn-filled;
+    }
+
+    &.disabled a {
+      @include btn-disabled;
+    }
+
+    i {
+      font-size: 2rem;
+    }
+  }
+
+  li.pages ul li {
+    display: inline-block;
+    float: none;
+  }
+}
+
+@media #{$medium-and-down} {
+  .pagination {
+    width: 100%;
+
+    li.prev,
+    li.next {
+      width: 10%;
+    }
+
+    li.pages {
+      width: 80%;
+      overflow: hidden;
+      white-space: nowrap;
+    }
+  }
+}
diff --git a/sass/materialize.scss b/sass/materialize.scss
index 0afe47bff0..d8719d7c91 100644
--- a/sass/materialize.scss
+++ b/sass/materialize.scss
@@ -46,3 +46,4 @@
 @import "components/pulse";
 @import "components/datepicker";
 @import "components/timepicker";
+@import "components/pagination";

From 8c5438826da7aab867f4e95b7acfa2ac67205264 Mon Sep 17 00:00:00 2001
From: Daniel Wurzer <info@wuda.io>
Date: Thu, 30 Jan 2025 21:41:36 +0100
Subject: [PATCH 40/43] chore: include dist folder again because of import

---
 .gitignore                       |    8 -
 dist/css/materialize.css         | 9498 ++++++++++++++++++++++++++++++
 dist/css/materialize.min.css     |    6 +
 dist/css/materialize.min.css.map |    1 +
 dist/js/materialize.cjs.js       | 8004 +++++++++++++++++++++++++
 dist/js/materialize.d.ts         | 2540 ++++++++
 dist/js/materialize.js           | 8009 +++++++++++++++++++++++++
 dist/js/materialize.min.js       |    6 +
 dist/js/materialize.mjs          | 7976 +++++++++++++++++++++++++
 9 files changed, 36040 insertions(+), 8 deletions(-)
 create mode 100644 dist/css/materialize.css
 create mode 100644 dist/css/materialize.min.css
 create mode 100644 dist/css/materialize.min.css.map
 create mode 100644 dist/js/materialize.cjs.js
 create mode 100644 dist/js/materialize.d.ts
 create mode 100644 dist/js/materialize.js
 create mode 100644 dist/js/materialize.min.js
 create mode 100644 dist/js/materialize.mjs

diff --git a/.gitignore b/.gitignore
index 4fbac5ff73..a88e34deb8 100644
--- a/.gitignore
+++ b/.gitignore
@@ -25,13 +25,5 @@ yarn-error.log*
 # Dependency directories
 node_modules/
 
-dist
-dist/**/*.*
-!dist/css/*.css
-!dist/css/*.css.map
-!dist/js/*.js
-!dist/js/*.mjs
-!dist/js/*.ts
-
 # Ignore lock
 yarn.lock
diff --git a/dist/css/materialize.css b/dist/css/materialize.css
new file mode 100644
index 0000000000..677f602ac5
--- /dev/null
+++ b/dist/css/materialize.css
@@ -0,0 +1,9498 @@
+/*!
+* Materialize v2.2.1 (https://materializeweb.com)
+* Copyright 2014-2025 Materialize
+* MIT License (https://raw.githubusercontent.com/materializecss/materialize/master/LICENSE)
+*/
+@charset "UTF-8";
+:root {
+  --md-source: #006495;
+  /* primary */
+  --md-ref-palette-primary0: #000000;
+  --md-ref-palette-primary10: #001e30;
+  --md-ref-palette-primary20: #003450;
+  --md-ref-palette-primary25: #003f60;
+  --md-ref-palette-primary30: #004b71;
+  --md-ref-palette-primary35: #005783;
+  --md-ref-palette-primary40: #006495;
+  --md-ref-palette-primary50: #0f7eb8;
+  --md-ref-palette-primary60: #3d98d4;
+  --md-ref-palette-primary70: #5db3f0;
+  --md-ref-palette-primary80: #8fcdff;
+  --md-ref-palette-primary90: #cbe6ff;
+  --md-ref-palette-primary95: #e6f2ff;
+  --md-ref-palette-primary98: #f7f9ff;
+  --md-ref-palette-primary99: #fcfcff;
+  --md-ref-palette-primary100: #ffffff;
+  /* secondary */
+  --md-ref-palette-secondary0: #000000;
+  --md-ref-palette-secondary10: #0d1d29;
+  --md-ref-palette-secondary20: #22323f;
+  --md-ref-palette-secondary25: #2d3d4b;
+  --md-ref-palette-secondary30: #394856;
+  --md-ref-palette-secondary35: #445462;
+  --md-ref-palette-secondary40: #50606f;
+  --md-ref-palette-secondary50: #697988;
+  --md-ref-palette-secondary60: #8293a2;
+  --md-ref-palette-secondary70: #9dadbd;
+  --md-ref-palette-secondary80: #b8c8d9;
+  --md-ref-palette-secondary90: #d4e4f6;
+  --md-ref-palette-secondary95: #e6f2ff;
+  --md-ref-palette-secondary98: #f7f9ff;
+  --md-ref-palette-secondary99: #fcfcff;
+  --md-ref-palette-secondary100: #ffffff;
+  /* tertiary */
+  --md-ref-palette-tertiary0: #000000;
+  --md-ref-palette-tertiary10: #211634;
+  --md-ref-palette-tertiary20: #362b4a;
+  --md-ref-palette-tertiary25: #423656;
+  --md-ref-palette-tertiary30: #4d4162;
+  --md-ref-palette-tertiary35: #594c6e;
+  --md-ref-palette-tertiary40: #66587b;
+  --md-ref-palette-tertiary50: #7f7195;
+  --md-ref-palette-tertiary60: #998ab0;
+  --md-ref-palette-tertiary70: #b4a4cb;
+  --md-ref-palette-tertiary80: #d0bfe7;
+  --md-ref-palette-tertiary90: #ecdcff;
+  --md-ref-palette-tertiary95: #f7edff;
+  --md-ref-palette-tertiary98: #fef7ff;
+  --md-ref-palette-tertiary99: #fffbff;
+  --md-ref-palette-tertiary100: #ffffff;
+  /* neutral */
+  --md-ref-palette-neutral0: #000000;
+  --md-ref-palette-neutral10: #1a1c1e;
+  --md-ref-palette-neutral20: #2e3133;
+  --md-ref-palette-neutral25: #3a3c3e;
+  --md-ref-palette-neutral30: #454749;
+  --md-ref-palette-neutral35: #515255;
+  --md-ref-palette-neutral40: #5d5e61;
+  --md-ref-palette-neutral50: #76777a;
+  --md-ref-palette-neutral60: #8f9194;
+  --md-ref-palette-neutral70: #aaabae;
+  --md-ref-palette-neutral80: #c6c6c9;
+  --md-ref-palette-neutral90: #e2e2e5;
+  --md-ref-palette-neutral95: #f0f0f3;
+  --md-ref-palette-neutral98: #f9f9fc;
+  --md-ref-palette-neutral99: #fcfcff;
+  --md-ref-palette-neutral100: #ffffff;
+  /* neutral-variant */
+  --md-ref-palette-neutral-variant0: #000000;
+  --md-ref-palette-neutral-variant10: #161c22;
+  --md-ref-palette-neutral-variant20: #2b3137;
+  --md-ref-palette-neutral-variant25: #363c42;
+  --md-ref-palette-neutral-variant30: #41474d;
+  --md-ref-palette-neutral-variant35: #4d5359;
+  --md-ref-palette-neutral-variant40: #595f65;
+  --md-ref-palette-neutral-variant50: #72787e;
+  --md-ref-palette-neutral-variant60: #8b9198;
+  --md-ref-palette-neutral-variant70: #a6acb3;
+  --md-ref-palette-neutral-variant80: #c1c7ce;
+  --md-ref-palette-neutral-variant90: #dee3ea;
+  --md-ref-palette-neutral-variant95: #ecf1f9;
+  --md-ref-palette-neutral-variant98: #f7f9ff;
+  --md-ref-palette-neutral-variant99: #fcfcff;
+  --md-ref-palette-neutral-variant100: #ffffff;
+  /* error */
+  --md-ref-palette-error0: #000000;
+  --md-ref-palette-error10: #410002;
+  --md-ref-palette-error20: #690005;
+  --md-ref-palette-error25: #7e0007;
+  --md-ref-palette-error30: #93000a;
+  --md-ref-palette-error35: #a80710;
+  --md-ref-palette-error40: #ba1a1a;
+  --md-ref-palette-error50: #de3730;
+  --md-ref-palette-error60: #ff5449;
+  --md-ref-palette-error70: #ff897d;
+  --md-ref-palette-error80: #ffb4ab;
+  --md-ref-palette-error90: #ffdad6;
+  --md-ref-palette-error95: #ffedea;
+  --md-ref-palette-error98: #fff8f7;
+  --md-ref-palette-error99: #fffbff;
+  --md-ref-palette-error100: #ffffff;
+  /* light */
+  --md-sys-color-primary-light: #006495;
+  --md-sys-color-on-primary-light: #ffffff;
+  --md-sys-color-primary-container-light: #cbe6ff;
+  --md-sys-color-on-primary-container-light: #001e30;
+  --md-sys-color-secondary-light: #50606f;
+  --md-sys-color-on-secondary-light: #ffffff;
+  --md-sys-color-secondary-container-light: #d4e4f6;
+  --md-sys-color-on-secondary-container-light: #0d1d29;
+  --md-sys-color-tertiary-light: #66587b;
+  --md-sys-color-on-tertiary-light: #ffffff;
+  --md-sys-color-tertiary-container-light: #ecdcff;
+  --md-sys-color-on-tertiary-container-light: #211634;
+  --md-sys-color-error-light: #ba1a1a;
+  --md-sys-color-error-container-light: #ffdad6;
+  --md-sys-color-on-error-light: #ffffff;
+  --md-sys-color-on-error-container-light: #410002;
+  --md-sys-color-background-light: #fcfcff;
+  --md-sys-color-on-background-light: #1a1c1e;
+  --md-sys-color-surface-light: #fcfcff;
+  --md-sys-color-on-surface-light: #1a1c1e;
+  --md-sys-color-surface-variant-light: #dee3ea;
+  --md-sys-color-on-surface-variant-light: #41474d;
+  --md-sys-color-outline-light: #72787e;
+  --md-sys-color-inverse-on-surface-light: #f0f0f3;
+  --md-sys-color-inverse-surface-light: #2e3133;
+  --md-sys-color-inverse-primary-light: #8fcdff;
+  --md-sys-color-shadow-light: #000000;
+  --md-sys-color-surface-tint-light: #006495;
+  --md-sys-color-outline-variant-light: #c1c7ce;
+  --md-sys-color-scrim-light: #000000;
+  /* dark */
+  --md-sys-color-primary-dark: #8fcdff;
+  --md-sys-color-on-primary-dark: #003450;
+  --md-sys-color-primary-container-dark: #004b71;
+  --md-sys-color-on-primary-container-dark: #cbe6ff;
+  --md-sys-color-secondary-dark: #b8c8d9;
+  --md-sys-color-on-secondary-dark: #22323f;
+  --md-sys-color-secondary-container-dark: #394856;
+  --md-sys-color-on-secondary-container-dark: #d4e4f6;
+  --md-sys-color-tertiary-dark: #d0bfe7;
+  --md-sys-color-on-tertiary-dark: #362b4a;
+  --md-sys-color-tertiary-container-dark: #4d4162;
+  --md-sys-color-on-tertiary-container-dark: #ecdcff;
+  --md-sys-color-error-dark: #ffb4ab;
+  --md-sys-color-error-container-dark: #93000a;
+  --md-sys-color-on-error-dark: #690005;
+  --md-sys-color-on-error-container-dark: #ffdad6;
+  --md-sys-color-background-dark: #1a1c1e;
+  --md-sys-color-on-background-dark: #e2e2e5;
+  --md-sys-color-surface-dark: #1a1c1e;
+  --md-sys-color-on-surface-dark: #e2e2e5;
+  --md-sys-color-surface-variant-dark: #41474d;
+  --md-sys-color-on-surface-variant-dark: #c1c7ce;
+  --md-sys-color-outline-dark: #8b9198;
+  --md-sys-color-inverse-on-surface-dark: #1a1c1e;
+  --md-sys-color-inverse-surface-dark: #e2e2e5;
+  --md-sys-color-inverse-primary-dark: #006495;
+  --md-sys-color-shadow-dark: #000000;
+  --md-sys-color-surface-tint-dark: #8fcdff;
+  --md-sys-color-outline-variant-dark: #41474d;
+  --md-sys-color-scrim-dark: #000000;
+  /* display - large */
+  --md-sys-typescale-display-large-font-family-name: Roboto;
+  --md-sys-typescale-display-large-font-family-style: Regular;
+  --md-sys-typescale-display-large-font-weight: 400px;
+  --md-sys-typescale-display-large-font-size: 57px;
+  --md-sys-typescale-display-large-line-height: 64px;
+  --md-sys-typescale-display-large-letter-spacing: -0.25px;
+  /* display - medium */
+  --md-sys-typescale-display-medium-font-family-name: Roboto;
+  --md-sys-typescale-display-medium-font-family-style: Regular;
+  --md-sys-typescale-display-medium-font-weight: 400px;
+  --md-sys-typescale-display-medium-font-size: 45px;
+  --md-sys-typescale-display-medium-line-height: 52px;
+  --md-sys-typescale-display-medium-letter-spacing: 0px;
+  /* display - small */
+  --md-sys-typescale-display-small-font-family-name: Roboto;
+  --md-sys-typescale-display-small-font-family-style: Regular;
+  --md-sys-typescale-display-small-font-weight: 400px;
+  --md-sys-typescale-display-small-font-size: 36px;
+  --md-sys-typescale-display-small-line-height: 44px;
+  --md-sys-typescale-display-small-letter-spacing: 0px;
+  /* headline - large */
+  --md-sys-typescale-headline-large-font-family-name: Roboto;
+  --md-sys-typescale-headline-large-font-family-style: Regular;
+  --md-sys-typescale-headline-large-font-weight: 400px;
+  --md-sys-typescale-headline-large-font-size: 32px;
+  --md-sys-typescale-headline-large-line-height: 40px;
+  --md-sys-typescale-headline-large-letter-spacing: 0px;
+  /* headline - medium */
+  --md-sys-typescale-headline-medium-font-family-name: Roboto;
+  --md-sys-typescale-headline-medium-font-family-style: Regular;
+  --md-sys-typescale-headline-medium-font-weight: 400px;
+  --md-sys-typescale-headline-medium-font-size: 28px;
+  --md-sys-typescale-headline-medium-line-height: 36px;
+  --md-sys-typescale-headline-medium-letter-spacing: 0px;
+  /* headline - small */
+  --md-sys-typescale-headline-small-font-family-name: Roboto;
+  --md-sys-typescale-headline-small-font-family-style: Regular;
+  --md-sys-typescale-headline-small-font-weight: 400px;
+  --md-sys-typescale-headline-small-font-size: 24px;
+  --md-sys-typescale-headline-small-line-height: 32px;
+  --md-sys-typescale-headline-small-letter-spacing: 0px;
+  /* body - large */
+  --md-sys-typescale-body-large-font-family-name: Roboto;
+  --md-sys-typescale-body-large-font-family-style: Regular;
+  --md-sys-typescale-body-large-font-weight: 400px;
+  --md-sys-typescale-body-large-font-size: 16px;
+  --md-sys-typescale-body-large-line-height: 24px;
+  --md-sys-typescale-body-large-letter-spacing: 0.50px;
+  /* body - medium */
+  --md-sys-typescale-body-medium-font-family-name: Roboto;
+  --md-sys-typescale-body-medium-font-family-style: Regular;
+  --md-sys-typescale-body-medium-font-weight: 400px;
+  --md-sys-typescale-body-medium-font-size: 14px;
+  --md-sys-typescale-body-medium-line-height: 20px;
+  --md-sys-typescale-body-medium-letter-spacing: 0.25px;
+  /* body - small */
+  --md-sys-typescale-body-small-font-family-name: Roboto;
+  --md-sys-typescale-body-small-font-family-style: Regular;
+  --md-sys-typescale-body-small-font-weight: 400px;
+  --md-sys-typescale-body-small-font-size: 12px;
+  --md-sys-typescale-body-small-line-height: 16px;
+  --md-sys-typescale-body-small-letter-spacing: 0.40px;
+  /* label - large */
+  --md-sys-typescale-label-large-font-family-name: Roboto;
+  --md-sys-typescale-label-large-font-family-style: Medium;
+  --md-sys-typescale-label-large-font-weight: 500px;
+  --md-sys-typescale-label-large-font-size: 14px;
+  --md-sys-typescale-label-large-line-height: 20px;
+  --md-sys-typescale-label-large-letter-spacing: 0.10px;
+  /* label - medium */
+  --md-sys-typescale-label-medium-font-family-name: Roboto;
+  --md-sys-typescale-label-medium-font-family-style: Medium;
+  --md-sys-typescale-label-medium-font-weight: 500px;
+  --md-sys-typescale-label-medium-font-size: 12px;
+  --md-sys-typescale-label-medium-line-height: 16px;
+  --md-sys-typescale-label-medium-letter-spacing: 0.50px;
+  /* label - small */
+  --md-sys-typescale-label-small-font-family-name: Roboto;
+  --md-sys-typescale-label-small-font-family-style: Medium;
+  --md-sys-typescale-label-small-font-weight: 500px;
+  --md-sys-typescale-label-small-font-size: 11px;
+  --md-sys-typescale-label-small-line-height: 16px;
+  --md-sys-typescale-label-small-letter-spacing: 0.50px;
+  /* title - large */
+  --md-sys-typescale-title-large-font-family-name: Roboto;
+  --md-sys-typescale-title-large-font-family-style: Regular;
+  --md-sys-typescale-title-large-font-weight: 400px;
+  --md-sys-typescale-title-large-font-size: 22px;
+  --md-sys-typescale-title-large-line-height: 28px;
+  --md-sys-typescale-title-large-letter-spacing: 0px;
+  /* title - medium */
+  --md-sys-typescale-title-medium-font-family-name: Roboto;
+  --md-sys-typescale-title-medium-font-family-style: Medium;
+  --md-sys-typescale-title-medium-font-weight: 500px;
+  --md-sys-typescale-title-medium-font-size: 16px;
+  --md-sys-typescale-title-medium-line-height: 24px;
+  --md-sys-typescale-title-medium-letter-spacing: 0.15px;
+  /* title - small */
+  --md-sys-typescale-title-small-font-family-name: Roboto;
+  --md-sys-typescale-title-small-font-family-style: Medium;
+  --md-sys-typescale-title-small-font-weight: 500px;
+  --md-sys-typescale-title-small-font-size: 14px;
+  --md-sys-typescale-title-small-line-height: 20px;
+  --md-sys-typescale-title-small-letter-spacing: 0.10px;
+}
+
+/* System Defaults */
+:root, :host {
+  color-scheme: light;
+  --md-sys-color-primary: var(--md-sys-color-primary-light);
+  --md-sys-color-on-primary: var(--md-sys-color-on-primary-light);
+  --md-sys-color-primary-container: var(--md-sys-color-primary-container-light);
+  --md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-light);
+  --md-sys-color-secondary: var(--md-sys-color-secondary-light);
+  --md-sys-color-on-secondary: var(--md-sys-color-on-secondary-light);
+  --md-sys-color-secondary-container: var(--md-sys-color-secondary-container-light);
+  --md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-light);
+  --md-sys-color-tertiary: var(--md-sys-color-tertiary-light);
+  --md-sys-color-on-tertiary: var(--md-sys-color-on-tertiary-light);
+  --md-sys-color-tertiary-container: var(--md-sys-color-tertiary-container-light);
+  --md-sys-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container-light);
+  --md-sys-color-error: var(--md-sys-color-error-light);
+  --md-sys-color-on-error: var(--md-sys-color-on-error-light);
+  --md-sys-color-error-container: var(--md-sys-color-error-container-light);
+  --md-sys-color-on-error-container: var(--md-sys-color-on-error-container-light);
+  --md-sys-color-outline: var(--md-sys-color-outline-light);
+  --md-sys-color-background: var(--md-sys-color-background-light);
+  --md-sys-color-on-background: var(--md-sys-color-on-background-light);
+  --md-sys-color-surface: var(--md-sys-color-surface-light);
+  --md-sys-color-on-surface: var(--md-sys-color-on-surface-light);
+  --md-sys-color-surface-variant: var(--md-sys-color-surface-variant-light);
+  --md-sys-color-on-surface-variant: var(--md-sys-color-on-surface-variant-light);
+  --md-sys-color-inverse-surface: var(--md-sys-color-inverse-surface-light);
+  --md-sys-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface-light);
+  --md-sys-color-inverse-primary: var(--md-sys-color-inverse-primary-light);
+  --md-sys-color-shadow: var(--md-sys-color-shadow-light);
+  --md-sys-color-surface-tint: var(--md-sys-color-surface-tint-light);
+  --md-sys-color-outline-variant: var(--md-sys-color-outline-variant-light);
+  --md-sys-color-scrim: var(--md-sys-color-scrim-light);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root, :host {
+    color-scheme: dark;
+    --md-sys-color-primary: var(--md-sys-color-primary-dark);
+    --md-sys-color-on-primary: var(--md-sys-color-on-primary-dark);
+    --md-sys-color-primary-container: var(--md-sys-color-primary-container-dark);
+    --md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-dark);
+    --md-sys-color-secondary: var(--md-sys-color-secondary-dark);
+    --md-sys-color-on-secondary: var(--md-sys-color-on-secondary-dark);
+    --md-sys-color-secondary-container: var(--md-sys-color-secondary-container-dark);
+    --md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-dark);
+    --md-sys-color-tertiary: var(--md-sys-color-tertiary-dark);
+    --md-sys-color-on-tertiary: var(--md-sys-color-on-tertiary-dark);
+    --md-sys-color-tertiary-container: var(--md-sys-color-tertiary-container-dark);
+    --md-sys-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container-dark);
+    --md-sys-color-error: var(--md-sys-color-error-dark);
+    --md-sys-color-on-error: var(--md-sys-color-on-error-dark);
+    --md-sys-color-error-container: var(--md-sys-color-error-container-dark);
+    --md-sys-color-on-error-container: var(--md-sys-color-on-error-container-dark);
+    --md-sys-color-outline: var(--md-sys-color-outline-dark);
+    --md-sys-color-background: var(--md-sys-color-background-dark);
+    --md-sys-color-on-background: var(--md-sys-color-on-background-dark);
+    --md-sys-color-surface: var(--md-sys-color-surface-dark);
+    --md-sys-color-on-surface: var(--md-sys-color-on-surface-dark);
+    --md-sys-color-surface-variant: var(--md-sys-color-surface-variant-dark);
+    --md-sys-color-on-surface-variant: var(--md-sys-color-on-surface-variant-dark);
+    --md-sys-color-inverse-surface: var(--md-sys-color-inverse-surface-dark);
+    --md-sys-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface-dark);
+    --md-sys-color-inverse-primary: var(--md-sys-color-inverse-primary-dark);
+    --md-sys-color-shadow: var(--md-sys-color-shadow-dark);
+    --md-sys-color-surface-tint: var(--md-sys-color-surface-tint-dark);
+    --md-sys-color-outline-variant: var(--md-sys-color-outline-variant-dark);
+    --md-sys-color-scrim: var(--md-sys-color-scrim-dark);
+  }
+}
+/* ===================================================================== Themes */
+:root[theme=light] {
+  color-scheme: light;
+  --md-sys-color-primary: var(--md-sys-color-primary-light);
+  --md-sys-color-on-primary: var(--md-sys-color-on-primary-light);
+  --md-sys-color-primary-container: var(--md-sys-color-primary-container-light);
+  --md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-light);
+  --md-sys-color-secondary: var(--md-sys-color-secondary-light);
+  --md-sys-color-on-secondary: var(--md-sys-color-on-secondary-light);
+  --md-sys-color-secondary-container: var(--md-sys-color-secondary-container-light);
+  --md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-light);
+  --md-sys-color-tertiary: var(--md-sys-color-tertiary-light);
+  --md-sys-color-on-tertiary: var(--md-sys-color-on-tertiary-light);
+  --md-sys-color-tertiary-container: var(--md-sys-color-tertiary-container-light);
+  --md-sys-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container-light);
+  --md-sys-color-error: var(--md-sys-color-error-light);
+  --md-sys-color-on-error: var(--md-sys-color-on-error-light);
+  --md-sys-color-error-container: var(--md-sys-color-error-container-light);
+  --md-sys-color-on-error-container: var(--md-sys-color-on-error-container-light);
+  --md-sys-color-outline: var(--md-sys-color-outline-light);
+  --md-sys-color-background: var(--md-sys-color-background-light);
+  --md-sys-color-on-background: var(--md-sys-color-on-background-light);
+  --md-sys-color-surface: var(--md-sys-color-surface-light);
+  --md-sys-color-on-surface: var(--md-sys-color-on-surface-light);
+  --md-sys-color-surface-variant: var(--md-sys-color-surface-variant-light);
+  --md-sys-color-on-surface-variant: var(--md-sys-color-on-surface-variant-light);
+  --md-sys-color-inverse-surface: var(--md-sys-color-inverse-surface-light);
+  --md-sys-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface-light);
+  --md-sys-color-inverse-primary: var(--md-sys-color-inverse-primary-light);
+  --md-sys-color-shadow: var(--md-sys-color-shadow-light);
+  --md-sys-color-surface-tint: var(--md-sys-color-surface-tint-light);
+  --md-sys-color-outline-variant: var(--md-sys-color-outline-variant-light);
+  --md-sys-color-scrim: var(--md-sys-color-scrim-light);
+}
+
+:root[theme=dark] {
+  color-scheme: dark;
+  --md-sys-color-primary: var(--md-sys-color-primary-dark);
+  --md-sys-color-on-primary: var(--md-sys-color-on-primary-dark);
+  --md-sys-color-primary-container: var(--md-sys-color-primary-container-dark);
+  --md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-dark);
+  --md-sys-color-secondary: var(--md-sys-color-secondary-dark);
+  --md-sys-color-on-secondary: var(--md-sys-color-on-secondary-dark);
+  --md-sys-color-secondary-container: var(--md-sys-color-secondary-container-dark);
+  --md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-dark);
+  --md-sys-color-tertiary: var(--md-sys-color-tertiary-dark);
+  --md-sys-color-on-tertiary: var(--md-sys-color-on-tertiary-dark);
+  --md-sys-color-tertiary-container: var(--md-sys-color-tertiary-container-dark);
+  --md-sys-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container-dark);
+  --md-sys-color-error: var(--md-sys-color-error-dark);
+  --md-sys-color-on-error: var(--md-sys-color-on-error-dark);
+  --md-sys-color-error-container: var(--md-sys-color-error-container-dark);
+  --md-sys-color-on-error-container: var(--md-sys-color-on-error-container-dark);
+  --md-sys-color-outline: var(--md-sys-color-outline-dark);
+  --md-sys-color-background: var(--md-sys-color-background-dark);
+  --md-sys-color-on-background: var(--md-sys-color-on-background-dark);
+  --md-sys-color-surface: var(--md-sys-color-surface-dark);
+  --md-sys-color-on-surface: var(--md-sys-color-on-surface-dark);
+  --md-sys-color-surface-variant: var(--md-sys-color-surface-variant-dark);
+  --md-sys-color-on-surface-variant: var(--md-sys-color-on-surface-variant-dark);
+  --md-sys-color-inverse-surface: var(--md-sys-color-inverse-surface-dark);
+  --md-sys-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface-dark);
+  --md-sys-color-inverse-primary: var(--md-sys-color-inverse-primary-dark);
+  --md-sys-color-shadow: var(--md-sys-color-shadow-dark);
+  --md-sys-color-surface-tint: var(--md-sys-color-surface-tint-dark);
+  --md-sys-color-outline-variant: var(--md-sys-color-outline-variant-dark);
+  --md-sys-color-scrim: var(--md-sys-color-scrim-dark);
+}
+
+.primary {
+  background-color: var(--md-sys-color-primary);
+}
+
+.primary-text {
+  color: var(--md-sys-color-primary);
+}
+
+.on-primary {
+  background-color: var(--md-sys-color-on-primary);
+}
+
+.on-primary-text {
+  color: var(--md-sys-color-on-primary);
+}
+
+.primary-container {
+  background-color: var(--md-sys-color-primary-container);
+}
+
+.primary-container-text {
+  color: var(--md-sys-color-primary-container);
+}
+
+.on-primary-container {
+  background-color: var(--md-sys-color-on-primary-container);
+}
+
+.on-primary-container-text {
+  color: var(--md-sys-color-on-primary-container);
+}
+
+.secondary {
+  background-color: var(--md-sys-color-secondary);
+}
+
+.secondary-text {
+  color: var(--md-sys-color-secondary);
+}
+
+.on-secondary {
+  background-color: var(--md-sys-color-on-secondary);
+}
+
+.on-secondary-text {
+  color: var(--md-sys-color-on-secondary);
+}
+
+.secondary-container {
+  background-color: var(--md-sys-color-secondary-container);
+}
+
+.secondary-container-text {
+  color: var(--md-sys-color-secondary-container);
+}
+
+.on-secondary-container {
+  background-color: var(--md-sys-color-on-secondary-container);
+}
+
+.on-secondary-container-text {
+  color: var(--md-sys-color-on-secondary-container);
+}
+
+.tertiary {
+  background-color: var(--md-sys-color-tertiary);
+}
+
+.tertiary-text {
+  color: var(--md-sys-color-tertiary);
+}
+
+.on-tertiary {
+  background-color: var(--md-sys-color-on-tertiary);
+}
+
+.on-tertiary-text {
+  color: var(--md-sys-color-on-tertiary);
+}
+
+.tertiary-container {
+  background-color: var(--md-sys-color-tertiary-container);
+}
+
+.tertiary-container-text {
+  color: var(--md-sys-color-tertiary-container);
+}
+
+.on-tertiary-container {
+  background-color: var(--md-sys-color-on-tertiary-container);
+}
+
+.on-tertiary-container-text {
+  color: var(--md-sys-color-on-tertiary-container);
+}
+
+.error {
+  background-color: var(--md-sys-color-error);
+}
+
+.error-text {
+  color: var(--md-sys-color-error);
+}
+
+.on-error {
+  background-color: var(--md-sys-color-on-error);
+}
+
+.on-error-text {
+  color: var(--md-sys-color-on-error);
+}
+
+.error-container {
+  background-color: var(--md-sys-color-error-container);
+}
+
+.error-container-text {
+  color: var(--md-sys-color-error-container);
+}
+
+.on-error-container {
+  background-color: var(--md-sys-color-on-error-container);
+}
+
+.on-error-container-text {
+  color: var(--md-sys-color-on-error-container);
+}
+
+.background {
+  background-color: var(--md-sys-color-background);
+}
+
+.background-text {
+  color: var(--md-sys-color-background);
+}
+
+.on-background {
+  background-color: var(--md-sys-color-on-background);
+}
+
+.on-background-text {
+  color: var(--md-sys-color-on-background);
+}
+
+.surface, .switch label input[type=checkbox]:checked + .lever:after {
+  background-color: var(--md-sys-color-surface);
+}
+
+.surface-text {
+  color: var(--md-sys-color-surface);
+}
+
+.on-surface {
+  background-color: var(--md-sys-color-on-surface);
+}
+
+.on-surface-text {
+  color: var(--md-sys-color-on-surface);
+}
+
+.surface-variant, .progress, input[type=range]::-moz-range-track, input[type=range]::-webkit-slider-runnable-track {
+  background-color: var(--md-sys-color-surface-variant);
+}
+
+.surface-variant-text {
+  color: var(--md-sys-color-surface-variant);
+}
+
+.on-surface-variant {
+  background-color: var(--md-sys-color-on-surface-variant);
+}
+
+.on-surface-variant-text, .chip > .material-icons {
+  color: var(--md-sys-color-on-surface-variant);
+}
+
+.outline, .switch label .lever:after {
+  background-color: var(--md-sys-color-outline);
+}
+
+.outline-text {
+  color: var(--md-sys-color-outline);
+}
+
+.inverse-on-surface {
+  background-color: var(--md-sys-color-inverse-on-surface);
+}
+
+.inverse-on-surface-text {
+  color: var(--md-sys-color-inverse-on-surface);
+}
+
+.inverse-surface {
+  background-color: var(--md-sys-color-inverse-surface);
+}
+
+.inverse-surface-text {
+  color: var(--md-sys-color-inverse-surface);
+}
+
+.inverse-primary {
+  background-color: var(--md-sys-color-inverse-primary);
+}
+
+.inverse-primary-text {
+  color: var(--md-sys-color-inverse-primary);
+}
+
+.shadow {
+  background-color: var(--md-sys-color-shadow);
+}
+
+.shadow-text {
+  color: var(--md-sys-color-shadow);
+}
+
+.surface-tint {
+  background-color: var(--md-sys-color-surface-tint);
+}
+
+.surface-tint-text {
+  color: var(--md-sys-color-surface-tint);
+}
+
+.outline-variant {
+  background-color: var(--md-sys-color-outline-variant);
+}
+
+.outline-variant-text {
+  color: var(--md-sys-color-outline-variant);
+}
+
+.scrim {
+  background-color: var(--md-sys-color-scrim);
+}
+
+.scrim-text {
+  color: var(--md-sys-color-scrim);
+}
+
+.display-large {
+  font-family: var(--md-sys-typescale-display-large-font-family-name);
+  font-style: var(--md-sys-typescale-display-large-font-family-style);
+  font-weight: var(--md-sys-typescale-display-large-font-weight);
+  font-size: var(--md-sys-typescale-display-large-font-size);
+  letter-spacing: var(--md-sys-typescale-display-large-tracking);
+  line-height: var(--md-sys-typescale-display-large-height);
+  text-transform: var(--md-sys-typescale-display-large-text-transform);
+  -webkit-text-decoration: var(--md-sys-typescale-display-large-text-decoration);
+     -moz-text-decoration: var(--md-sys-typescale-display-large-text-decoration);
+          text-decoration: var(--md-sys-typescale-display-large-text-decoration);
+}
+
+.display-medium {
+  font-family: var(--md-sys-typescale-display-medium-font-family-name);
+  font-style: var(--md-sys-typescale-display-medium-font-family-style);
+  font-weight: var(--md-sys-typescale-display-medium-font-weight);
+  font-size: var(--md-sys-typescale-display-medium-font-size);
+  letter-spacing: var(--md-sys-typescale-display-medium-tracking);
+  line-height: var(--md-sys-typescale-display-medium-height);
+  text-transform: var(--md-sys-typescale-display-medium-text-transform);
+  -webkit-text-decoration: var(--md-sys-typescale-display-medium-text-decoration);
+     -moz-text-decoration: var(--md-sys-typescale-display-medium-text-decoration);
+          text-decoration: var(--md-sys-typescale-display-medium-text-decoration);
+}
+
+.display-small {
+  font-family: var(--md-sys-typescale-display-small-font-family-name);
+  font-style: var(--md-sys-typescale-display-small-font-family-style);
+  font-weight: var(--md-sys-typescale-display-small-font-weight);
+  font-size: var(--md-sys-typescale-display-small-font-size);
+  letter-spacing: var(--md-sys-typescale-display-small-tracking);
+  line-height: var(--md-sys-typescale-display-small-height);
+  text-transform: var(--md-sys-typescale-display-small-text-transform);
+  -webkit-text-decoration: var(--md-sys-typescale-display-small-text-decoration);
+     -moz-text-decoration: var(--md-sys-typescale-display-small-text-decoration);
+          text-decoration: var(--md-sys-typescale-display-small-text-decoration);
+}
+
+.headline-large {
+  font-family: var(--md-sys-typescale-headline-large-font-family-name);
+  font-style: var(--md-sys-typescale-headline-large-font-family-style);
+  font-weight: var(--md-sys-typescale-headline-large-font-weight);
+  font-size: var(--md-sys-typescale-headline-large-font-size);
+  letter-spacing: var(--md-sys-typescale-headline-large-tracking);
+  line-height: var(--md-sys-typescale-headline-large-height);
+  text-transform: var(--md-sys-typescale-headline-large-text-transform);
+  -webkit-text-decoration: var(--md-sys-typescale-headline-large-text-decoration);
+     -moz-text-decoration: var(--md-sys-typescale-headline-large-text-decoration);
+          text-decoration: var(--md-sys-typescale-headline-large-text-decoration);
+}
+
+.headline-medium {
+  font-family: var(--md-sys-typescale-headline-medium-font-family-name);
+  font-style: var(--md-sys-typescale-headline-medium-font-family-style);
+  font-weight: var(--md-sys-typescale-headline-medium-font-weight);
+  font-size: var(--md-sys-typescale-headline-medium-font-size);
+  letter-spacing: var(--md-sys-typescale-headline-medium-tracking);
+  line-height: var(--md-sys-typescale-headline-medium-height);
+  text-transform: var(--md-sys-typescale-headline-medium-text-transform);
+  -webkit-text-decoration: var(--md-sys-typescale-headline-medium-text-decoration);
+     -moz-text-decoration: var(--md-sys-typescale-headline-medium-text-decoration);
+          text-decoration: var(--md-sys-typescale-headline-medium-text-decoration);
+}
+
+.headline-small {
+  font-family: var(--md-sys-typescale-headline-small-font-family-name);
+  font-style: var(--md-sys-typescale-headline-small-font-family-style);
+  font-weight: var(--md-sys-typescale-headline-small-font-weight);
+  font-size: var(--md-sys-typescale-headline-small-font-size);
+  letter-spacing: var(--md-sys-typescale-headline-small-tracking);
+  line-height: var(--md-sys-typescale-headline-small-height);
+  text-transform: var(--md-sys-typescale-headline-small-text-transform);
+  -webkit-text-decoration: var(--md-sys-typescale-headline-small-text-decoration);
+     -moz-text-decoration: var(--md-sys-typescale-headline-small-text-decoration);
+          text-decoration: var(--md-sys-typescale-headline-small-text-decoration);
+}
+
+.body-large {
+  font-family: var(--md-sys-typescale-body-large-font-family-name);
+  font-style: var(--md-sys-typescale-body-large-font-family-style);
+  font-weight: var(--md-sys-typescale-body-large-font-weight);
+  font-size: var(--md-sys-typescale-body-large-font-size);
+  letter-spacing: var(--md-sys-typescale-body-large-tracking);
+  line-height: var(--md-sys-typescale-body-large-height);
+  text-transform: var(--md-sys-typescale-body-large-text-transform);
+  -webkit-text-decoration: var(--md-sys-typescale-body-large-text-decoration);
+     -moz-text-decoration: var(--md-sys-typescale-body-large-text-decoration);
+          text-decoration: var(--md-sys-typescale-body-large-text-decoration);
+}
+
+.body-medium {
+  font-family: var(--md-sys-typescale-body-medium-font-family-name);
+  font-style: var(--md-sys-typescale-body-medium-font-family-style);
+  font-weight: var(--md-sys-typescale-body-medium-font-weight);
+  font-size: var(--md-sys-typescale-body-medium-font-size);
+  letter-spacing: var(--md-sys-typescale-body-medium-tracking);
+  line-height: var(--md-sys-typescale-body-medium-height);
+  text-transform: var(--md-sys-typescale-body-medium-text-transform);
+  -webkit-text-decoration: var(--md-sys-typescale-body-medium-text-decoration);
+     -moz-text-decoration: var(--md-sys-typescale-body-medium-text-decoration);
+          text-decoration: var(--md-sys-typescale-body-medium-text-decoration);
+}
+
+.body-small {
+  font-family: var(--md-sys-typescale-body-small-font-family-name);
+  font-style: var(--md-sys-typescale-body-small-font-family-style);
+  font-weight: var(--md-sys-typescale-body-small-font-weight);
+  font-size: var(--md-sys-typescale-body-small-font-size);
+  letter-spacing: var(--md-sys-typescale-body-small-tracking);
+  line-height: var(--md-sys-typescale-body-small-height);
+  text-transform: var(--md-sys-typescale-body-small-text-transform);
+  -webkit-text-decoration: var(--md-sys-typescale-body-small-text-decoration);
+     -moz-text-decoration: var(--md-sys-typescale-body-small-text-decoration);
+          text-decoration: var(--md-sys-typescale-body-small-text-decoration);
+}
+
+.label-large {
+  font-family: var(--md-sys-typescale-label-large-font-family-name);
+  font-style: var(--md-sys-typescale-label-large-font-family-style);
+  font-weight: var(--md-sys-typescale-label-large-font-weight);
+  font-size: var(--md-sys-typescale-label-large-font-size);
+  letter-spacing: var(--md-sys-typescale-label-large-tracking);
+  line-height: var(--md-sys-typescale-label-large-height);
+  text-transform: var(--md-sys-typescale-label-large-text-transform);
+  -webkit-text-decoration: var(--md-sys-typescale-label-large-text-decoration);
+     -moz-text-decoration: var(--md-sys-typescale-label-large-text-decoration);
+          text-decoration: var(--md-sys-typescale-label-large-text-decoration);
+}
+
+.label-medium {
+  font-family: var(--md-sys-typescale-label-medium-font-family-name);
+  font-style: var(--md-sys-typescale-label-medium-font-family-style);
+  font-weight: var(--md-sys-typescale-label-medium-font-weight);
+  font-size: var(--md-sys-typescale-label-medium-font-size);
+  letter-spacing: var(--md-sys-typescale-label-medium-tracking);
+  line-height: var(--md-sys-typescale-label-medium-height);
+  text-transform: var(--md-sys-typescale-label-medium-text-transform);
+  -webkit-text-decoration: var(--md-sys-typescale-label-medium-text-decoration);
+     -moz-text-decoration: var(--md-sys-typescale-label-medium-text-decoration);
+          text-decoration: var(--md-sys-typescale-label-medium-text-decoration);
+}
+
+.label-small {
+  font-family: var(--md-sys-typescale-label-small-font-family-name);
+  font-style: var(--md-sys-typescale-label-small-font-family-style);
+  font-weight: var(--md-sys-typescale-label-small-font-weight);
+  font-size: var(--md-sys-typescale-label-small-font-size);
+  letter-spacing: var(--md-sys-typescale-label-small-tracking);
+  line-height: var(--md-sys-typescale-label-small-height);
+  text-transform: var(--md-sys-typescale-label-small-text-transform);
+  -webkit-text-decoration: var(--md-sys-typescale-label-small-text-decoration);
+     -moz-text-decoration: var(--md-sys-typescale-label-small-text-decoration);
+          text-decoration: var(--md-sys-typescale-label-small-text-decoration);
+}
+
+.title-large {
+  font-family: var(--md-sys-typescale-title-large-font-family-name);
+  font-style: var(--md-sys-typescale-title-large-font-family-style);
+  font-weight: var(--md-sys-typescale-title-large-font-weight);
+  font-size: var(--md-sys-typescale-title-large-font-size);
+  letter-spacing: var(--md-sys-typescale-title-large-tracking);
+  line-height: var(--md-sys-typescale-title-large-height);
+  text-transform: var(--md-sys-typescale-title-large-text-transform);
+  -webkit-text-decoration: var(--md-sys-typescale-title-large-text-decoration);
+     -moz-text-decoration: var(--md-sys-typescale-title-large-text-decoration);
+          text-decoration: var(--md-sys-typescale-title-large-text-decoration);
+}
+
+.title-medium {
+  font-family: var(--md-sys-typescale-title-medium-font-family-name);
+  font-style: var(--md-sys-typescale-title-medium-font-family-style);
+  font-weight: var(--md-sys-typescale-title-medium-font-weight);
+  font-size: var(--md-sys-typescale-title-medium-font-size);
+  letter-spacing: var(--md-sys-typescale-title-medium-tracking);
+  line-height: var(--md-sys-typescale-title-medium-height);
+  text-transform: var(--md-sys-typescale-title-medium-text-transform);
+  -webkit-text-decoration: var(--md-sys-typescale-title-medium-text-decoration);
+     -moz-text-decoration: var(--md-sys-typescale-title-medium-text-decoration);
+          text-decoration: var(--md-sys-typescale-title-medium-text-decoration);
+}
+
+.title-small {
+  font-family: var(--md-sys-typescale-title-small-font-family-name);
+  font-style: var(--md-sys-typescale-title-small-font-family-style);
+  font-weight: var(--md-sys-typescale-title-small-font-weight);
+  font-size: var(--md-sys-typescale-title-small-font-size);
+  letter-spacing: var(--md-sys-typescale-title-small-tracking);
+  line-height: var(--md-sys-typescale-title-small-height);
+  text-transform: var(--md-sys-typescale-title-small-text-transform);
+  -webkit-text-decoration: var(--md-sys-typescale-title-small-text-decoration);
+     -moz-text-decoration: var(--md-sys-typescale-title-small-text-decoration);
+          text-decoration: var(--md-sys-typescale-title-small-text-decoration);
+}
+
+.materialize-red {
+  background-color: #e51c23 !important;
+}
+
+.materialize-red-text {
+  color: #e51c23 !important;
+}
+
+.materialize-red.lighten-5 {
+  background-color: #fdeaeb !important;
+}
+
+.materialize-red-text.text-lighten-5 {
+  color: #fdeaeb !important;
+}
+
+.materialize-red.lighten-4 {
+  background-color: #f8c1c3 !important;
+}
+
+.materialize-red-text.text-lighten-4 {
+  color: #f8c1c3 !important;
+}
+
+.materialize-red.lighten-3 {
+  background-color: #f3989b !important;
+}
+
+.materialize-red-text.text-lighten-3 {
+  color: #f3989b !important;
+}
+
+.materialize-red.lighten-2 {
+  background-color: #ee6e73 !important;
+}
+
+.materialize-red-text.text-lighten-2 {
+  color: #ee6e73 !important;
+}
+
+.materialize-red.lighten-1 {
+  background-color: #ea454b !important;
+}
+
+.materialize-red-text.text-lighten-1 {
+  color: #ea454b !important;
+}
+
+.materialize-red.darken-1 {
+  background-color: #d0181e !important;
+}
+
+.materialize-red-text.text-darken-1 {
+  color: #d0181e !important;
+}
+
+.materialize-red.darken-2 {
+  background-color: #b9151b !important;
+}
+
+.materialize-red-text.text-darken-2 {
+  color: #b9151b !important;
+}
+
+.materialize-red.darken-3 {
+  background-color: #a21318 !important;
+}
+
+.materialize-red-text.text-darken-3 {
+  color: #a21318 !important;
+}
+
+.materialize-red.darken-4 {
+  background-color: #8b1014 !important;
+}
+
+.materialize-red-text.text-darken-4 {
+  color: #8b1014 !important;
+}
+
+.red {
+  background-color: #F44336 !important;
+}
+
+.red-text {
+  color: #F44336 !important;
+}
+
+.red.lighten-5 {
+  background-color: #FFEBEE !important;
+}
+
+.red-text.text-lighten-5 {
+  color: #FFEBEE !important;
+}
+
+.red.lighten-4 {
+  background-color: #FFCDD2 !important;
+}
+
+.red-text.text-lighten-4 {
+  color: #FFCDD2 !important;
+}
+
+.red.lighten-3 {
+  background-color: #EF9A9A !important;
+}
+
+.red-text.text-lighten-3 {
+  color: #EF9A9A !important;
+}
+
+.red.lighten-2 {
+  background-color: #E57373 !important;
+}
+
+.red-text.text-lighten-2 {
+  color: #E57373 !important;
+}
+
+.red.lighten-1 {
+  background-color: #EF5350 !important;
+}
+
+.red-text.text-lighten-1 {
+  color: #EF5350 !important;
+}
+
+.red.darken-1 {
+  background-color: #E53935 !important;
+}
+
+.red-text.text-darken-1 {
+  color: #E53935 !important;
+}
+
+.red.darken-2 {
+  background-color: #D32F2F !important;
+}
+
+.red-text.text-darken-2 {
+  color: #D32F2F !important;
+}
+
+.red.darken-3 {
+  background-color: #C62828 !important;
+}
+
+.red-text.text-darken-3 {
+  color: #C62828 !important;
+}
+
+.red.darken-4 {
+  background-color: #B71C1C !important;
+}
+
+.red-text.text-darken-4 {
+  color: #B71C1C !important;
+}
+
+.red.accent-1 {
+  background-color: #FF8A80 !important;
+}
+
+.red-text.text-accent-1 {
+  color: #FF8A80 !important;
+}
+
+.red.accent-2 {
+  background-color: #FF5252 !important;
+}
+
+.red-text.text-accent-2 {
+  color: #FF5252 !important;
+}
+
+.red.accent-3 {
+  background-color: #FF1744 !important;
+}
+
+.red-text.text-accent-3 {
+  color: #FF1744 !important;
+}
+
+.red.accent-4 {
+  background-color: #D50000 !important;
+}
+
+.red-text.text-accent-4 {
+  color: #D50000 !important;
+}
+
+.pink {
+  background-color: #e91e63 !important;
+}
+
+.pink-text {
+  color: #e91e63 !important;
+}
+
+.pink.lighten-5 {
+  background-color: #fce4ec !important;
+}
+
+.pink-text.text-lighten-5 {
+  color: #fce4ec !important;
+}
+
+.pink.lighten-4 {
+  background-color: #f8bbd0 !important;
+}
+
+.pink-text.text-lighten-4 {
+  color: #f8bbd0 !important;
+}
+
+.pink.lighten-3 {
+  background-color: #f48fb1 !important;
+}
+
+.pink-text.text-lighten-3 {
+  color: #f48fb1 !important;
+}
+
+.pink.lighten-2 {
+  background-color: #f06292 !important;
+}
+
+.pink-text.text-lighten-2 {
+  color: #f06292 !important;
+}
+
+.pink.lighten-1 {
+  background-color: #ec407a !important;
+}
+
+.pink-text.text-lighten-1 {
+  color: #ec407a !important;
+}
+
+.pink.darken-1 {
+  background-color: #d81b60 !important;
+}
+
+.pink-text.text-darken-1 {
+  color: #d81b60 !important;
+}
+
+.pink.darken-2 {
+  background-color: #c2185b !important;
+}
+
+.pink-text.text-darken-2 {
+  color: #c2185b !important;
+}
+
+.pink.darken-3 {
+  background-color: #ad1457 !important;
+}
+
+.pink-text.text-darken-3 {
+  color: #ad1457 !important;
+}
+
+.pink.darken-4 {
+  background-color: #880e4f !important;
+}
+
+.pink-text.text-darken-4 {
+  color: #880e4f !important;
+}
+
+.pink.accent-1 {
+  background-color: #ff80ab !important;
+}
+
+.pink-text.text-accent-1 {
+  color: #ff80ab !important;
+}
+
+.pink.accent-2 {
+  background-color: #ff4081 !important;
+}
+
+.pink-text.text-accent-2 {
+  color: #ff4081 !important;
+}
+
+.pink.accent-3 {
+  background-color: #f50057 !important;
+}
+
+.pink-text.text-accent-3 {
+  color: #f50057 !important;
+}
+
+.pink.accent-4 {
+  background-color: #c51162 !important;
+}
+
+.pink-text.text-accent-4 {
+  color: #c51162 !important;
+}
+
+.purple {
+  background-color: #9c27b0 !important;
+}
+
+.purple-text {
+  color: #9c27b0 !important;
+}
+
+.purple.lighten-5 {
+  background-color: #f3e5f5 !important;
+}
+
+.purple-text.text-lighten-5 {
+  color: #f3e5f5 !important;
+}
+
+.purple.lighten-4 {
+  background-color: #e1bee7 !important;
+}
+
+.purple-text.text-lighten-4 {
+  color: #e1bee7 !important;
+}
+
+.purple.lighten-3 {
+  background-color: #ce93d8 !important;
+}
+
+.purple-text.text-lighten-3 {
+  color: #ce93d8 !important;
+}
+
+.purple.lighten-2 {
+  background-color: #ba68c8 !important;
+}
+
+.purple-text.text-lighten-2 {
+  color: #ba68c8 !important;
+}
+
+.purple.lighten-1 {
+  background-color: #ab47bc !important;
+}
+
+.purple-text.text-lighten-1 {
+  color: #ab47bc !important;
+}
+
+.purple.darken-1 {
+  background-color: #8e24aa !important;
+}
+
+.purple-text.text-darken-1 {
+  color: #8e24aa !important;
+}
+
+.purple.darken-2 {
+  background-color: #7b1fa2 !important;
+}
+
+.purple-text.text-darken-2 {
+  color: #7b1fa2 !important;
+}
+
+.purple.darken-3 {
+  background-color: #6a1b9a !important;
+}
+
+.purple-text.text-darken-3 {
+  color: #6a1b9a !important;
+}
+
+.purple.darken-4 {
+  background-color: #4a148c !important;
+}
+
+.purple-text.text-darken-4 {
+  color: #4a148c !important;
+}
+
+.purple.accent-1 {
+  background-color: #ea80fc !important;
+}
+
+.purple-text.text-accent-1 {
+  color: #ea80fc !important;
+}
+
+.purple.accent-2 {
+  background-color: #e040fb !important;
+}
+
+.purple-text.text-accent-2 {
+  color: #e040fb !important;
+}
+
+.purple.accent-3 {
+  background-color: #d500f9 !important;
+}
+
+.purple-text.text-accent-3 {
+  color: #d500f9 !important;
+}
+
+.purple.accent-4 {
+  background-color: #aa00ff !important;
+}
+
+.purple-text.text-accent-4 {
+  color: #aa00ff !important;
+}
+
+.deep-purple {
+  background-color: #673ab7 !important;
+}
+
+.deep-purple-text {
+  color: #673ab7 !important;
+}
+
+.deep-purple.lighten-5 {
+  background-color: #ede7f6 !important;
+}
+
+.deep-purple-text.text-lighten-5 {
+  color: #ede7f6 !important;
+}
+
+.deep-purple.lighten-4 {
+  background-color: #d1c4e9 !important;
+}
+
+.deep-purple-text.text-lighten-4 {
+  color: #d1c4e9 !important;
+}
+
+.deep-purple.lighten-3 {
+  background-color: #b39ddb !important;
+}
+
+.deep-purple-text.text-lighten-3 {
+  color: #b39ddb !important;
+}
+
+.deep-purple.lighten-2 {
+  background-color: #9575cd !important;
+}
+
+.deep-purple-text.text-lighten-2 {
+  color: #9575cd !important;
+}
+
+.deep-purple.lighten-1 {
+  background-color: #7e57c2 !important;
+}
+
+.deep-purple-text.text-lighten-1 {
+  color: #7e57c2 !important;
+}
+
+.deep-purple.darken-1 {
+  background-color: #5e35b1 !important;
+}
+
+.deep-purple-text.text-darken-1 {
+  color: #5e35b1 !important;
+}
+
+.deep-purple.darken-2 {
+  background-color: #512da8 !important;
+}
+
+.deep-purple-text.text-darken-2 {
+  color: #512da8 !important;
+}
+
+.deep-purple.darken-3 {
+  background-color: #4527a0 !important;
+}
+
+.deep-purple-text.text-darken-3 {
+  color: #4527a0 !important;
+}
+
+.deep-purple.darken-4 {
+  background-color: #311b92 !important;
+}
+
+.deep-purple-text.text-darken-4 {
+  color: #311b92 !important;
+}
+
+.deep-purple.accent-1 {
+  background-color: #b388ff !important;
+}
+
+.deep-purple-text.text-accent-1 {
+  color: #b388ff !important;
+}
+
+.deep-purple.accent-2 {
+  background-color: #7c4dff !important;
+}
+
+.deep-purple-text.text-accent-2 {
+  color: #7c4dff !important;
+}
+
+.deep-purple.accent-3 {
+  background-color: #651fff !important;
+}
+
+.deep-purple-text.text-accent-3 {
+  color: #651fff !important;
+}
+
+.deep-purple.accent-4 {
+  background-color: #6200ea !important;
+}
+
+.deep-purple-text.text-accent-4 {
+  color: #6200ea !important;
+}
+
+.indigo {
+  background-color: #3f51b5 !important;
+}
+
+.indigo-text {
+  color: #3f51b5 !important;
+}
+
+.indigo.lighten-5 {
+  background-color: #e8eaf6 !important;
+}
+
+.indigo-text.text-lighten-5 {
+  color: #e8eaf6 !important;
+}
+
+.indigo.lighten-4 {
+  background-color: #c5cae9 !important;
+}
+
+.indigo-text.text-lighten-4 {
+  color: #c5cae9 !important;
+}
+
+.indigo.lighten-3 {
+  background-color: #9fa8da !important;
+}
+
+.indigo-text.text-lighten-3 {
+  color: #9fa8da !important;
+}
+
+.indigo.lighten-2 {
+  background-color: #7986cb !important;
+}
+
+.indigo-text.text-lighten-2 {
+  color: #7986cb !important;
+}
+
+.indigo.lighten-1 {
+  background-color: #5c6bc0 !important;
+}
+
+.indigo-text.text-lighten-1 {
+  color: #5c6bc0 !important;
+}
+
+.indigo.darken-1 {
+  background-color: #3949ab !important;
+}
+
+.indigo-text.text-darken-1 {
+  color: #3949ab !important;
+}
+
+.indigo.darken-2 {
+  background-color: #303f9f !important;
+}
+
+.indigo-text.text-darken-2 {
+  color: #303f9f !important;
+}
+
+.indigo.darken-3 {
+  background-color: #283593 !important;
+}
+
+.indigo-text.text-darken-3 {
+  color: #283593 !important;
+}
+
+.indigo.darken-4 {
+  background-color: #1a237e !important;
+}
+
+.indigo-text.text-darken-4 {
+  color: #1a237e !important;
+}
+
+.indigo.accent-1 {
+  background-color: #8c9eff !important;
+}
+
+.indigo-text.text-accent-1 {
+  color: #8c9eff !important;
+}
+
+.indigo.accent-2 {
+  background-color: #536dfe !important;
+}
+
+.indigo-text.text-accent-2 {
+  color: #536dfe !important;
+}
+
+.indigo.accent-3 {
+  background-color: #3d5afe !important;
+}
+
+.indigo-text.text-accent-3 {
+  color: #3d5afe !important;
+}
+
+.indigo.accent-4 {
+  background-color: #304ffe !important;
+}
+
+.indigo-text.text-accent-4 {
+  color: #304ffe !important;
+}
+
+.blue {
+  background-color: #2196F3 !important;
+}
+
+.blue-text {
+  color: #2196F3 !important;
+}
+
+.blue.lighten-5 {
+  background-color: #E3F2FD !important;
+}
+
+.blue-text.text-lighten-5 {
+  color: #E3F2FD !important;
+}
+
+.blue.lighten-4 {
+  background-color: #BBDEFB !important;
+}
+
+.blue-text.text-lighten-4 {
+  color: #BBDEFB !important;
+}
+
+.blue.lighten-3 {
+  background-color: #90CAF9 !important;
+}
+
+.blue-text.text-lighten-3 {
+  color: #90CAF9 !important;
+}
+
+.blue.lighten-2 {
+  background-color: #64B5F6 !important;
+}
+
+.blue-text.text-lighten-2 {
+  color: #64B5F6 !important;
+}
+
+.blue.lighten-1 {
+  background-color: #42A5F5 !important;
+}
+
+.blue-text.text-lighten-1 {
+  color: #42A5F5 !important;
+}
+
+.blue.darken-1 {
+  background-color: #1E88E5 !important;
+}
+
+.blue-text.text-darken-1 {
+  color: #1E88E5 !important;
+}
+
+.blue.darken-2 {
+  background-color: #1976D2 !important;
+}
+
+.blue-text.text-darken-2 {
+  color: #1976D2 !important;
+}
+
+.blue.darken-3 {
+  background-color: #1565C0 !important;
+}
+
+.blue-text.text-darken-3 {
+  color: #1565C0 !important;
+}
+
+.blue.darken-4 {
+  background-color: #0D47A1 !important;
+}
+
+.blue-text.text-darken-4 {
+  color: #0D47A1 !important;
+}
+
+.blue.accent-1 {
+  background-color: #82B1FF !important;
+}
+
+.blue-text.text-accent-1 {
+  color: #82B1FF !important;
+}
+
+.blue.accent-2 {
+  background-color: #448AFF !important;
+}
+
+.blue-text.text-accent-2 {
+  color: #448AFF !important;
+}
+
+.blue.accent-3 {
+  background-color: #2979FF !important;
+}
+
+.blue-text.text-accent-3 {
+  color: #2979FF !important;
+}
+
+.blue.accent-4 {
+  background-color: #2962FF !important;
+}
+
+.blue-text.text-accent-4 {
+  color: #2962FF !important;
+}
+
+.light-blue {
+  background-color: #03a9f4 !important;
+}
+
+.light-blue-text {
+  color: #03a9f4 !important;
+}
+
+.light-blue.lighten-5 {
+  background-color: #e1f5fe !important;
+}
+
+.light-blue-text.text-lighten-5 {
+  color: #e1f5fe !important;
+}
+
+.light-blue.lighten-4 {
+  background-color: #b3e5fc !important;
+}
+
+.light-blue-text.text-lighten-4 {
+  color: #b3e5fc !important;
+}
+
+.light-blue.lighten-3 {
+  background-color: #81d4fa !important;
+}
+
+.light-blue-text.text-lighten-3 {
+  color: #81d4fa !important;
+}
+
+.light-blue.lighten-2 {
+  background-color: #4fc3f7 !important;
+}
+
+.light-blue-text.text-lighten-2 {
+  color: #4fc3f7 !important;
+}
+
+.light-blue.lighten-1 {
+  background-color: #29b6f6 !important;
+}
+
+.light-blue-text.text-lighten-1 {
+  color: #29b6f6 !important;
+}
+
+.light-blue.darken-1 {
+  background-color: #039be5 !important;
+}
+
+.light-blue-text.text-darken-1 {
+  color: #039be5 !important;
+}
+
+.light-blue.darken-2 {
+  background-color: #0288d1 !important;
+}
+
+.light-blue-text.text-darken-2 {
+  color: #0288d1 !important;
+}
+
+.light-blue.darken-3 {
+  background-color: #0277bd !important;
+}
+
+.light-blue-text.text-darken-3 {
+  color: #0277bd !important;
+}
+
+.light-blue.darken-4 {
+  background-color: #01579b !important;
+}
+
+.light-blue-text.text-darken-4 {
+  color: #01579b !important;
+}
+
+.light-blue.accent-1 {
+  background-color: #80d8ff !important;
+}
+
+.light-blue-text.text-accent-1 {
+  color: #80d8ff !important;
+}
+
+.light-blue.accent-2 {
+  background-color: #40c4ff !important;
+}
+
+.light-blue-text.text-accent-2 {
+  color: #40c4ff !important;
+}
+
+.light-blue.accent-3 {
+  background-color: #00b0ff !important;
+}
+
+.light-blue-text.text-accent-3 {
+  color: #00b0ff !important;
+}
+
+.light-blue.accent-4 {
+  background-color: #0091ea !important;
+}
+
+.light-blue-text.text-accent-4 {
+  color: #0091ea !important;
+}
+
+.cyan {
+  background-color: #00bcd4 !important;
+}
+
+.cyan-text {
+  color: #00bcd4 !important;
+}
+
+.cyan.lighten-5 {
+  background-color: #e0f7fa !important;
+}
+
+.cyan-text.text-lighten-5 {
+  color: #e0f7fa !important;
+}
+
+.cyan.lighten-4 {
+  background-color: #b2ebf2 !important;
+}
+
+.cyan-text.text-lighten-4 {
+  color: #b2ebf2 !important;
+}
+
+.cyan.lighten-3 {
+  background-color: #80deea !important;
+}
+
+.cyan-text.text-lighten-3 {
+  color: #80deea !important;
+}
+
+.cyan.lighten-2 {
+  background-color: #4dd0e1 !important;
+}
+
+.cyan-text.text-lighten-2 {
+  color: #4dd0e1 !important;
+}
+
+.cyan.lighten-1 {
+  background-color: #26c6da !important;
+}
+
+.cyan-text.text-lighten-1 {
+  color: #26c6da !important;
+}
+
+.cyan.darken-1 {
+  background-color: #00acc1 !important;
+}
+
+.cyan-text.text-darken-1 {
+  color: #00acc1 !important;
+}
+
+.cyan.darken-2 {
+  background-color: #0097a7 !important;
+}
+
+.cyan-text.text-darken-2 {
+  color: #0097a7 !important;
+}
+
+.cyan.darken-3 {
+  background-color: #00838f !important;
+}
+
+.cyan-text.text-darken-3 {
+  color: #00838f !important;
+}
+
+.cyan.darken-4 {
+  background-color: #006064 !important;
+}
+
+.cyan-text.text-darken-4 {
+  color: #006064 !important;
+}
+
+.cyan.accent-1 {
+  background-color: #84ffff !important;
+}
+
+.cyan-text.text-accent-1 {
+  color: #84ffff !important;
+}
+
+.cyan.accent-2 {
+  background-color: #18ffff !important;
+}
+
+.cyan-text.text-accent-2 {
+  color: #18ffff !important;
+}
+
+.cyan.accent-3 {
+  background-color: #00e5ff !important;
+}
+
+.cyan-text.text-accent-3 {
+  color: #00e5ff !important;
+}
+
+.cyan.accent-4 {
+  background-color: #00b8d4 !important;
+}
+
+.cyan-text.text-accent-4 {
+  color: #00b8d4 !important;
+}
+
+.teal {
+  background-color: #009688 !important;
+}
+
+.teal-text {
+  color: #009688 !important;
+}
+
+.teal.lighten-5 {
+  background-color: #e0f2f1 !important;
+}
+
+.teal-text.text-lighten-5 {
+  color: #e0f2f1 !important;
+}
+
+.teal.lighten-4 {
+  background-color: #b2dfdb !important;
+}
+
+.teal-text.text-lighten-4 {
+  color: #b2dfdb !important;
+}
+
+.teal.lighten-3 {
+  background-color: #80cbc4 !important;
+}
+
+.teal-text.text-lighten-3 {
+  color: #80cbc4 !important;
+}
+
+.teal.lighten-2 {
+  background-color: #4db6ac !important;
+}
+
+.teal-text.text-lighten-2 {
+  color: #4db6ac !important;
+}
+
+.teal.lighten-1 {
+  background-color: #26a69a !important;
+}
+
+.teal-text.text-lighten-1 {
+  color: #26a69a !important;
+}
+
+.teal.darken-1 {
+  background-color: #00897b !important;
+}
+
+.teal-text.text-darken-1 {
+  color: #00897b !important;
+}
+
+.teal.darken-2 {
+  background-color: #00796b !important;
+}
+
+.teal-text.text-darken-2 {
+  color: #00796b !important;
+}
+
+.teal.darken-3 {
+  background-color: #00695c !important;
+}
+
+.teal-text.text-darken-3 {
+  color: #00695c !important;
+}
+
+.teal.darken-4 {
+  background-color: #004d40 !important;
+}
+
+.teal-text.text-darken-4 {
+  color: #004d40 !important;
+}
+
+.teal.accent-1 {
+  background-color: #a7ffeb !important;
+}
+
+.teal-text.text-accent-1 {
+  color: #a7ffeb !important;
+}
+
+.teal.accent-2 {
+  background-color: #64ffda !important;
+}
+
+.teal-text.text-accent-2 {
+  color: #64ffda !important;
+}
+
+.teal.accent-3 {
+  background-color: #1de9b6 !important;
+}
+
+.teal-text.text-accent-3 {
+  color: #1de9b6 !important;
+}
+
+.teal.accent-4 {
+  background-color: #00bfa5 !important;
+}
+
+.teal-text.text-accent-4 {
+  color: #00bfa5 !important;
+}
+
+.green {
+  background-color: #4CAF50 !important;
+}
+
+.green-text {
+  color: #4CAF50 !important;
+}
+
+.green.lighten-5 {
+  background-color: #E8F5E9 !important;
+}
+
+.green-text.text-lighten-5 {
+  color: #E8F5E9 !important;
+}
+
+.green.lighten-4 {
+  background-color: #C8E6C9 !important;
+}
+
+.green-text.text-lighten-4 {
+  color: #C8E6C9 !important;
+}
+
+.green.lighten-3 {
+  background-color: #A5D6A7 !important;
+}
+
+.green-text.text-lighten-3 {
+  color: #A5D6A7 !important;
+}
+
+.green.lighten-2 {
+  background-color: #81C784 !important;
+}
+
+.green-text.text-lighten-2 {
+  color: #81C784 !important;
+}
+
+.green.lighten-1 {
+  background-color: #66BB6A !important;
+}
+
+.green-text.text-lighten-1 {
+  color: #66BB6A !important;
+}
+
+.green.darken-1 {
+  background-color: #43A047 !important;
+}
+
+.green-text.text-darken-1 {
+  color: #43A047 !important;
+}
+
+.green.darken-2 {
+  background-color: #388E3C !important;
+}
+
+.green-text.text-darken-2 {
+  color: #388E3C !important;
+}
+
+.green.darken-3 {
+  background-color: #2E7D32 !important;
+}
+
+.green-text.text-darken-3 {
+  color: #2E7D32 !important;
+}
+
+.green.darken-4 {
+  background-color: #1B5E20 !important;
+}
+
+.green-text.text-darken-4 {
+  color: #1B5E20 !important;
+}
+
+.green.accent-1 {
+  background-color: #B9F6CA !important;
+}
+
+.green-text.text-accent-1 {
+  color: #B9F6CA !important;
+}
+
+.green.accent-2 {
+  background-color: #69F0AE !important;
+}
+
+.green-text.text-accent-2 {
+  color: #69F0AE !important;
+}
+
+.green.accent-3 {
+  background-color: #00E676 !important;
+}
+
+.green-text.text-accent-3 {
+  color: #00E676 !important;
+}
+
+.green.accent-4 {
+  background-color: #00C853 !important;
+}
+
+.green-text.text-accent-4 {
+  color: #00C853 !important;
+}
+
+.light-green {
+  background-color: #8bc34a !important;
+}
+
+.light-green-text {
+  color: #8bc34a !important;
+}
+
+.light-green.lighten-5 {
+  background-color: #f1f8e9 !important;
+}
+
+.light-green-text.text-lighten-5 {
+  color: #f1f8e9 !important;
+}
+
+.light-green.lighten-4 {
+  background-color: #dcedc8 !important;
+}
+
+.light-green-text.text-lighten-4 {
+  color: #dcedc8 !important;
+}
+
+.light-green.lighten-3 {
+  background-color: #c5e1a5 !important;
+}
+
+.light-green-text.text-lighten-3 {
+  color: #c5e1a5 !important;
+}
+
+.light-green.lighten-2 {
+  background-color: #aed581 !important;
+}
+
+.light-green-text.text-lighten-2 {
+  color: #aed581 !important;
+}
+
+.light-green.lighten-1 {
+  background-color: #9ccc65 !important;
+}
+
+.light-green-text.text-lighten-1 {
+  color: #9ccc65 !important;
+}
+
+.light-green.darken-1 {
+  background-color: #7cb342 !important;
+}
+
+.light-green-text.text-darken-1 {
+  color: #7cb342 !important;
+}
+
+.light-green.darken-2 {
+  background-color: #689f38 !important;
+}
+
+.light-green-text.text-darken-2 {
+  color: #689f38 !important;
+}
+
+.light-green.darken-3 {
+  background-color: #558b2f !important;
+}
+
+.light-green-text.text-darken-3 {
+  color: #558b2f !important;
+}
+
+.light-green.darken-4 {
+  background-color: #33691e !important;
+}
+
+.light-green-text.text-darken-4 {
+  color: #33691e !important;
+}
+
+.light-green.accent-1 {
+  background-color: #ccff90 !important;
+}
+
+.light-green-text.text-accent-1 {
+  color: #ccff90 !important;
+}
+
+.light-green.accent-2 {
+  background-color: #b2ff59 !important;
+}
+
+.light-green-text.text-accent-2 {
+  color: #b2ff59 !important;
+}
+
+.light-green.accent-3 {
+  background-color: #76ff03 !important;
+}
+
+.light-green-text.text-accent-3 {
+  color: #76ff03 !important;
+}
+
+.light-green.accent-4 {
+  background-color: #64dd17 !important;
+}
+
+.light-green-text.text-accent-4 {
+  color: #64dd17 !important;
+}
+
+.lime {
+  background-color: #cddc39 !important;
+}
+
+.lime-text {
+  color: #cddc39 !important;
+}
+
+.lime.lighten-5 {
+  background-color: #f9fbe7 !important;
+}
+
+.lime-text.text-lighten-5 {
+  color: #f9fbe7 !important;
+}
+
+.lime.lighten-4 {
+  background-color: #f0f4c3 !important;
+}
+
+.lime-text.text-lighten-4 {
+  color: #f0f4c3 !important;
+}
+
+.lime.lighten-3 {
+  background-color: #e6ee9c !important;
+}
+
+.lime-text.text-lighten-3 {
+  color: #e6ee9c !important;
+}
+
+.lime.lighten-2 {
+  background-color: #dce775 !important;
+}
+
+.lime-text.text-lighten-2 {
+  color: #dce775 !important;
+}
+
+.lime.lighten-1 {
+  background-color: #d4e157 !important;
+}
+
+.lime-text.text-lighten-1 {
+  color: #d4e157 !important;
+}
+
+.lime.darken-1 {
+  background-color: #c0ca33 !important;
+}
+
+.lime-text.text-darken-1 {
+  color: #c0ca33 !important;
+}
+
+.lime.darken-2 {
+  background-color: #afb42b !important;
+}
+
+.lime-text.text-darken-2 {
+  color: #afb42b !important;
+}
+
+.lime.darken-3 {
+  background-color: #9e9d24 !important;
+}
+
+.lime-text.text-darken-3 {
+  color: #9e9d24 !important;
+}
+
+.lime.darken-4 {
+  background-color: #827717 !important;
+}
+
+.lime-text.text-darken-4 {
+  color: #827717 !important;
+}
+
+.lime.accent-1 {
+  background-color: #f4ff81 !important;
+}
+
+.lime-text.text-accent-1 {
+  color: #f4ff81 !important;
+}
+
+.lime.accent-2 {
+  background-color: #eeff41 !important;
+}
+
+.lime-text.text-accent-2 {
+  color: #eeff41 !important;
+}
+
+.lime.accent-3 {
+  background-color: #c6ff00 !important;
+}
+
+.lime-text.text-accent-3 {
+  color: #c6ff00 !important;
+}
+
+.lime.accent-4 {
+  background-color: #aeea00 !important;
+}
+
+.lime-text.text-accent-4 {
+  color: #aeea00 !important;
+}
+
+.yellow {
+  background-color: #ffeb3b !important;
+}
+
+.yellow-text {
+  color: #ffeb3b !important;
+}
+
+.yellow.lighten-5 {
+  background-color: #fffde7 !important;
+}
+
+.yellow-text.text-lighten-5 {
+  color: #fffde7 !important;
+}
+
+.yellow.lighten-4 {
+  background-color: #fff9c4 !important;
+}
+
+.yellow-text.text-lighten-4 {
+  color: #fff9c4 !important;
+}
+
+.yellow.lighten-3 {
+  background-color: #fff59d !important;
+}
+
+.yellow-text.text-lighten-3 {
+  color: #fff59d !important;
+}
+
+.yellow.lighten-2 {
+  background-color: #fff176 !important;
+}
+
+.yellow-text.text-lighten-2 {
+  color: #fff176 !important;
+}
+
+.yellow.lighten-1 {
+  background-color: #ffee58 !important;
+}
+
+.yellow-text.text-lighten-1 {
+  color: #ffee58 !important;
+}
+
+.yellow.darken-1 {
+  background-color: #fdd835 !important;
+}
+
+.yellow-text.text-darken-1 {
+  color: #fdd835 !important;
+}
+
+.yellow.darken-2 {
+  background-color: #fbc02d !important;
+}
+
+.yellow-text.text-darken-2 {
+  color: #fbc02d !important;
+}
+
+.yellow.darken-3 {
+  background-color: #f9a825 !important;
+}
+
+.yellow-text.text-darken-3 {
+  color: #f9a825 !important;
+}
+
+.yellow.darken-4 {
+  background-color: #f57f17 !important;
+}
+
+.yellow-text.text-darken-4 {
+  color: #f57f17 !important;
+}
+
+.yellow.accent-1 {
+  background-color: #ffff8d !important;
+}
+
+.yellow-text.text-accent-1 {
+  color: #ffff8d !important;
+}
+
+.yellow.accent-2 {
+  background-color: #ffff00 !important;
+}
+
+.yellow-text.text-accent-2 {
+  color: #ffff00 !important;
+}
+
+.yellow.accent-3 {
+  background-color: #ffea00 !important;
+}
+
+.yellow-text.text-accent-3 {
+  color: #ffea00 !important;
+}
+
+.yellow.accent-4 {
+  background-color: #ffd600 !important;
+}
+
+.yellow-text.text-accent-4 {
+  color: #ffd600 !important;
+}
+
+.amber {
+  background-color: #ffc107 !important;
+}
+
+.amber-text {
+  color: #ffc107 !important;
+}
+
+.amber.lighten-5 {
+  background-color: #fff8e1 !important;
+}
+
+.amber-text.text-lighten-5 {
+  color: #fff8e1 !important;
+}
+
+.amber.lighten-4 {
+  background-color: #ffecb3 !important;
+}
+
+.amber-text.text-lighten-4 {
+  color: #ffecb3 !important;
+}
+
+.amber.lighten-3 {
+  background-color: #ffe082 !important;
+}
+
+.amber-text.text-lighten-3 {
+  color: #ffe082 !important;
+}
+
+.amber.lighten-2 {
+  background-color: #ffd54f !important;
+}
+
+.amber-text.text-lighten-2 {
+  color: #ffd54f !important;
+}
+
+.amber.lighten-1 {
+  background-color: #ffca28 !important;
+}
+
+.amber-text.text-lighten-1 {
+  color: #ffca28 !important;
+}
+
+.amber.darken-1 {
+  background-color: #ffb300 !important;
+}
+
+.amber-text.text-darken-1 {
+  color: #ffb300 !important;
+}
+
+.amber.darken-2 {
+  background-color: #ffa000 !important;
+}
+
+.amber-text.text-darken-2 {
+  color: #ffa000 !important;
+}
+
+.amber.darken-3 {
+  background-color: #ff8f00 !important;
+}
+
+.amber-text.text-darken-3 {
+  color: #ff8f00 !important;
+}
+
+.amber.darken-4 {
+  background-color: #ff6f00 !important;
+}
+
+.amber-text.text-darken-4 {
+  color: #ff6f00 !important;
+}
+
+.amber.accent-1 {
+  background-color: #ffe57f !important;
+}
+
+.amber-text.text-accent-1 {
+  color: #ffe57f !important;
+}
+
+.amber.accent-2 {
+  background-color: #ffd740 !important;
+}
+
+.amber-text.text-accent-2 {
+  color: #ffd740 !important;
+}
+
+.amber.accent-3 {
+  background-color: #ffc400 !important;
+}
+
+.amber-text.text-accent-3 {
+  color: #ffc400 !important;
+}
+
+.amber.accent-4 {
+  background-color: #ffab00 !important;
+}
+
+.amber-text.text-accent-4 {
+  color: #ffab00 !important;
+}
+
+.orange {
+  background-color: #ff9800 !important;
+}
+
+.orange-text {
+  color: #ff9800 !important;
+}
+
+.orange.lighten-5 {
+  background-color: #fff3e0 !important;
+}
+
+.orange-text.text-lighten-5 {
+  color: #fff3e0 !important;
+}
+
+.orange.lighten-4 {
+  background-color: #ffe0b2 !important;
+}
+
+.orange-text.text-lighten-4 {
+  color: #ffe0b2 !important;
+}
+
+.orange.lighten-3 {
+  background-color: #ffcc80 !important;
+}
+
+.orange-text.text-lighten-3 {
+  color: #ffcc80 !important;
+}
+
+.orange.lighten-2 {
+  background-color: #ffb74d !important;
+}
+
+.orange-text.text-lighten-2 {
+  color: #ffb74d !important;
+}
+
+.orange.lighten-1 {
+  background-color: #ffa726 !important;
+}
+
+.orange-text.text-lighten-1 {
+  color: #ffa726 !important;
+}
+
+.orange.darken-1 {
+  background-color: #fb8c00 !important;
+}
+
+.orange-text.text-darken-1 {
+  color: #fb8c00 !important;
+}
+
+.orange.darken-2 {
+  background-color: #f57c00 !important;
+}
+
+.orange-text.text-darken-2 {
+  color: #f57c00 !important;
+}
+
+.orange.darken-3 {
+  background-color: #ef6c00 !important;
+}
+
+.orange-text.text-darken-3 {
+  color: #ef6c00 !important;
+}
+
+.orange.darken-4 {
+  background-color: #e65100 !important;
+}
+
+.orange-text.text-darken-4 {
+  color: #e65100 !important;
+}
+
+.orange.accent-1 {
+  background-color: #ffd180 !important;
+}
+
+.orange-text.text-accent-1 {
+  color: #ffd180 !important;
+}
+
+.orange.accent-2 {
+  background-color: #ffab40 !important;
+}
+
+.orange-text.text-accent-2 {
+  color: #ffab40 !important;
+}
+
+.orange.accent-3 {
+  background-color: #ff9100 !important;
+}
+
+.orange-text.text-accent-3 {
+  color: #ff9100 !important;
+}
+
+.orange.accent-4 {
+  background-color: #ff6d00 !important;
+}
+
+.orange-text.text-accent-4 {
+  color: #ff6d00 !important;
+}
+
+.deep-orange {
+  background-color: #ff5722 !important;
+}
+
+.deep-orange-text {
+  color: #ff5722 !important;
+}
+
+.deep-orange.lighten-5 {
+  background-color: #fbe9e7 !important;
+}
+
+.deep-orange-text.text-lighten-5 {
+  color: #fbe9e7 !important;
+}
+
+.deep-orange.lighten-4 {
+  background-color: #ffccbc !important;
+}
+
+.deep-orange-text.text-lighten-4 {
+  color: #ffccbc !important;
+}
+
+.deep-orange.lighten-3 {
+  background-color: #ffab91 !important;
+}
+
+.deep-orange-text.text-lighten-3 {
+  color: #ffab91 !important;
+}
+
+.deep-orange.lighten-2 {
+  background-color: #ff8a65 !important;
+}
+
+.deep-orange-text.text-lighten-2 {
+  color: #ff8a65 !important;
+}
+
+.deep-orange.lighten-1 {
+  background-color: #ff7043 !important;
+}
+
+.deep-orange-text.text-lighten-1 {
+  color: #ff7043 !important;
+}
+
+.deep-orange.darken-1 {
+  background-color: #f4511e !important;
+}
+
+.deep-orange-text.text-darken-1 {
+  color: #f4511e !important;
+}
+
+.deep-orange.darken-2 {
+  background-color: #e64a19 !important;
+}
+
+.deep-orange-text.text-darken-2 {
+  color: #e64a19 !important;
+}
+
+.deep-orange.darken-3 {
+  background-color: #d84315 !important;
+}
+
+.deep-orange-text.text-darken-3 {
+  color: #d84315 !important;
+}
+
+.deep-orange.darken-4 {
+  background-color: #bf360c !important;
+}
+
+.deep-orange-text.text-darken-4 {
+  color: #bf360c !important;
+}
+
+.deep-orange.accent-1 {
+  background-color: #ff9e80 !important;
+}
+
+.deep-orange-text.text-accent-1 {
+  color: #ff9e80 !important;
+}
+
+.deep-orange.accent-2 {
+  background-color: #ff6e40 !important;
+}
+
+.deep-orange-text.text-accent-2 {
+  color: #ff6e40 !important;
+}
+
+.deep-orange.accent-3 {
+  background-color: #ff3d00 !important;
+}
+
+.deep-orange-text.text-accent-3 {
+  color: #ff3d00 !important;
+}
+
+.deep-orange.accent-4 {
+  background-color: #dd2c00 !important;
+}
+
+.deep-orange-text.text-accent-4 {
+  color: #dd2c00 !important;
+}
+
+.brown {
+  background-color: #795548 !important;
+}
+
+.brown-text {
+  color: #795548 !important;
+}
+
+.brown.lighten-5 {
+  background-color: #efebe9 !important;
+}
+
+.brown-text.text-lighten-5 {
+  color: #efebe9 !important;
+}
+
+.brown.lighten-4 {
+  background-color: #d7ccc8 !important;
+}
+
+.brown-text.text-lighten-4 {
+  color: #d7ccc8 !important;
+}
+
+.brown.lighten-3 {
+  background-color: #bcaaa4 !important;
+}
+
+.brown-text.text-lighten-3 {
+  color: #bcaaa4 !important;
+}
+
+.brown.lighten-2 {
+  background-color: #a1887f !important;
+}
+
+.brown-text.text-lighten-2 {
+  color: #a1887f !important;
+}
+
+.brown.lighten-1 {
+  background-color: #8d6e63 !important;
+}
+
+.brown-text.text-lighten-1 {
+  color: #8d6e63 !important;
+}
+
+.brown.darken-1 {
+  background-color: #6d4c41 !important;
+}
+
+.brown-text.text-darken-1 {
+  color: #6d4c41 !important;
+}
+
+.brown.darken-2 {
+  background-color: #5d4037 !important;
+}
+
+.brown-text.text-darken-2 {
+  color: #5d4037 !important;
+}
+
+.brown.darken-3 {
+  background-color: #4e342e !important;
+}
+
+.brown-text.text-darken-3 {
+  color: #4e342e !important;
+}
+
+.brown.darken-4 {
+  background-color: #3e2723 !important;
+}
+
+.brown-text.text-darken-4 {
+  color: #3e2723 !important;
+}
+
+.blue-grey {
+  background-color: #607d8b !important;
+}
+
+.blue-grey-text {
+  color: #607d8b !important;
+}
+
+.blue-grey.lighten-5 {
+  background-color: #eceff1 !important;
+}
+
+.blue-grey-text.text-lighten-5 {
+  color: #eceff1 !important;
+}
+
+.blue-grey.lighten-4 {
+  background-color: #cfd8dc !important;
+}
+
+.blue-grey-text.text-lighten-4 {
+  color: #cfd8dc !important;
+}
+
+.blue-grey.lighten-3 {
+  background-color: #b0bec5 !important;
+}
+
+.blue-grey-text.text-lighten-3 {
+  color: #b0bec5 !important;
+}
+
+.blue-grey.lighten-2 {
+  background-color: #90a4ae !important;
+}
+
+.blue-grey-text.text-lighten-2 {
+  color: #90a4ae !important;
+}
+
+.blue-grey.lighten-1 {
+  background-color: #78909c !important;
+}
+
+.blue-grey-text.text-lighten-1 {
+  color: #78909c !important;
+}
+
+.blue-grey.darken-1 {
+  background-color: #546e7a !important;
+}
+
+.blue-grey-text.text-darken-1 {
+  color: #546e7a !important;
+}
+
+.blue-grey.darken-2 {
+  background-color: #455a64 !important;
+}
+
+.blue-grey-text.text-darken-2 {
+  color: #455a64 !important;
+}
+
+.blue-grey.darken-3 {
+  background-color: #37474f !important;
+}
+
+.blue-grey-text.text-darken-3 {
+  color: #37474f !important;
+}
+
+.blue-grey.darken-4 {
+  background-color: #263238 !important;
+}
+
+.blue-grey-text.text-darken-4 {
+  color: #263238 !important;
+}
+
+.grey {
+  background-color: #9e9e9e !important;
+}
+
+.grey-text {
+  color: #9e9e9e !important;
+}
+
+.grey.lighten-5 {
+  background-color: #fafafa !important;
+}
+
+.grey-text.text-lighten-5 {
+  color: #fafafa !important;
+}
+
+.grey.lighten-4 {
+  background-color: #f5f5f5 !important;
+}
+
+.grey-text.text-lighten-4 {
+  color: #f5f5f5 !important;
+}
+
+.grey.lighten-3 {
+  background-color: #eeeeee !important;
+}
+
+.grey-text.text-lighten-3 {
+  color: #eeeeee !important;
+}
+
+.grey.lighten-2 {
+  background-color: #e0e0e0 !important;
+}
+
+.grey-text.text-lighten-2 {
+  color: #e0e0e0 !important;
+}
+
+.grey.lighten-1 {
+  background-color: #bdbdbd !important;
+}
+
+.grey-text.text-lighten-1 {
+  color: #bdbdbd !important;
+}
+
+.grey.darken-1 {
+  background-color: #757575 !important;
+}
+
+.grey-text.text-darken-1 {
+  color: #757575 !important;
+}
+
+.grey.darken-2 {
+  background-color: #616161 !important;
+}
+
+.grey-text.text-darken-2 {
+  color: #616161 !important;
+}
+
+.grey.darken-3 {
+  background-color: #424242 !important;
+}
+
+.grey-text.text-darken-3 {
+  color: #424242 !important;
+}
+
+.grey.darken-4 {
+  background-color: #212121 !important;
+}
+
+.grey-text.text-darken-4 {
+  color: #212121 !important;
+}
+
+.black {
+  background-color: #000000 !important;
+}
+
+.black-text {
+  color: #000000 !important;
+}
+
+.white {
+  background-color: #FFFFFF !important;
+}
+
+.white-text {
+  color: #FFFFFF !important;
+}
+
+.transparent {
+  background-color: transparent !important;
+}
+
+.transparent-text {
+  color: transparent !important;
+}
+
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+/* Document
+   ========================================================================== */
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+html {
+  line-height: 1.15; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+   ========================================================================== */
+/**
+ * Remove the margin in all browsers.
+ */
+body {
+  margin: 0;
+}
+
+/**
+ * Render the `main` element consistently in IE.
+ */
+main {
+  display: block;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/* Grouping content
+   ========================================================================== */
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+hr {
+  -webkit-box-sizing: content-box;
+          box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+pre {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+   ========================================================================== */
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+a {
+  background-color: transparent;
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+abbr[title] {
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  -webkit-text-decoration: underline dotted;
+     -moz-text-decoration: underline dotted;
+          text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+code,
+kbd,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Embedded content
+   ========================================================================== */
+/**
+ * Remove the border on images inside links in IE 10.
+ */
+img {
+  border-style: none;
+}
+
+/* Forms
+   ========================================================================== */
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+button,
+input { /* 1 */
+  overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+button,
+select { /* 1 */
+  text-transform: none;
+}
+
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+button,
+[type=button],
+[type=reset],
+[type=submit] {
+  -webkit-appearance: button;
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+button::-moz-focus-inner,
+[type=button]::-moz-focus-inner,
+[type=reset]::-moz-focus-inner,
+[type=submit]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+button:-moz-focusring,
+[type=button]:-moz-focusring,
+[type=reset]:-moz-focusring,
+[type=submit]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+legend {
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+progress {
+  vertical-align: baseline;
+}
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+textarea {
+  overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+[type=checkbox],
+[type=radio] {
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+[type=number]::-webkit-inner-spin-button,
+[type=number]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+[type=search] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+[type=search]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/* Interactive
+   ========================================================================== */
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+details {
+  display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+summary {
+  display: list-item;
+}
+
+/* Misc
+   ========================================================================== */
+/**
+ * Add the correct display in IE 10+.
+ */
+template {
+  display: none;
+}
+
+/**
+ * Add the correct display in IE 10.
+ */
+[hidden] {
+  display: none;
+}
+
+html {
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+}
+
+*, *:before, *:after {
+  -webkit-box-sizing: inherit;
+          box-sizing: inherit;
+}
+
+body {
+  background-color: var(--md-sys-color-background);
+  color: var(--md-sys-color-on-background);
+}
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+}
+
+a {
+  color: #039be5;
+  text-decoration: none;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.valign-wrapper {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+
+.clearfix {
+  clear: both;
+}
+
+.z-depth-0, .btn:focus.tonal, .btn-small:focus.tonal, .btn-large:focus.tonal, .btn:focus.filled, .btn-small:focus.filled, .btn-large:focus.filled, .btn.disabled, .btn-floating.disabled, .btn-large.disabled, .btn-small.disabled, .btn-flat.disabled,
+.btn:disabled, .btn-floating:disabled, .btn-large:disabled, .btn-small:disabled, .btn-flat:disabled,
+.btn[disabled], .btn-floating[disabled], .btn-large[disabled], .btn-small[disabled], .btn-flat[disabled], .btn.text, .text.btn-small, .text.btn-large, .btn-flat {
+  -webkit-box-shadow: none !important;
+          box-shadow: none !important;
+}
+
+/* 2dp elevation modified*/
+.z-depth-1, .sidenav, .collapsible, .dropdown-content, .btn-floating, .btn:focus.elevated, .btn-small:focus.elevated, .btn-large:focus.elevated, .btn.tonal:hover, .tonal.btn-small:hover, .tonal.btn-large:hover, .btn.filled:hover, .filled.btn-small:hover, .filled.btn-large:hover, .btn.elevated, .elevated.btn-small, .elevated.btn-large, .card, .card-panel, nav {
+  -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
+          box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
+}
+
+.z-depth-1-half, .btn-floating:focus, .btn-floating:hover {
+  -webkit-box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2);
+          box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2);
+}
+
+/* 6dp elevation modified*/
+.z-depth-2, .btn.elevated:hover, .elevated.btn-small:hover, .elevated.btn-large:hover {
+  -webkit-box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
+          box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
+}
+
+/* 12dp elevation modified*/
+.z-depth-3, .toast {
+  -webkit-box-shadow: 0 8px 17px 2px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
+          box-shadow: 0 8px 17px 2px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
+}
+
+/* 16dp elevation */
+.z-depth-4 {
+  -webkit-box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -7px rgba(0, 0, 0, 0.2);
+          box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -7px rgba(0, 0, 0, 0.2);
+}
+
+/* 24dp elevation */
+.z-depth-5, .modal {
+  -webkit-box-shadow: 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.2);
+          box-shadow: 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.2);
+}
+
+.hoverable {
+  -webkit-transition: -webkit-box-shadow 0.25s;
+  transition: -webkit-box-shadow 0.25s;
+  transition: box-shadow 0.25s;
+  transition: box-shadow 0.25s, -webkit-box-shadow 0.25s;
+}
+.hoverable:hover {
+  -webkit-box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+          box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+}
+
+.divider {
+  height: 1px;
+  overflow: hidden;
+  background-color: var(--md-sys-color-outline-variant);
+}
+
+blockquote {
+  margin: 20px 0;
+  padding-left: 1.5rem;
+  border-left: 5px solid var(--md-sys-color-primary);
+}
+
+i {
+  line-height: inherit;
+}
+i.left {
+  float: left;
+  margin-left: -8px;
+}
+i.right {
+  float: right;
+}
+i.tiny {
+  font-size: 1rem;
+}
+i.small {
+  font-size: 2rem;
+}
+i.medium {
+  font-size: 4rem;
+}
+i.large {
+  font-size: 6rem;
+}
+
+html.noscroll {
+  position: fixed;
+  overflow-y: scroll;
+  width: 100%;
+}
+
+img.responsive-img,
+video.responsive-video {
+  max-width: 100%;
+  height: auto;
+}
+
+.pagination li {
+  display: inline-block;
+  border-radius: 2px;
+  text-align: center;
+  vertical-align: top;
+  height: 30px;
+}
+.pagination li a {
+  color: var(--md-sys-color-on-surface-variant);
+  display: inline-block;
+  font-size: 1.2rem;
+  padding: 0 10px;
+  line-height: 30px;
+}
+.pagination li:hover:not(.disabled) {
+  background-color: rgba(var(--md-sys-color-primary-numeric), 0.06);
+}
+.pagination li.active a {
+  color: var(--md-sys-color-on-primary);
+}
+.pagination li.active, .pagination li.active:hover {
+  background-color: var(--md-sys-color-primary);
+}
+.pagination li.disabled a {
+  cursor: default;
+  color: var(--md-sys-color-on-surface);
+}
+.pagination li i {
+  font-size: 2rem;
+}
+.pagination li.pages ul li {
+  display: inline-block;
+  float: none;
+}
+
+@media only screen and (max-width : 992.99px) {
+  .pagination {
+    width: 100%;
+  }
+  .pagination li.prev,
+  .pagination li.next {
+    width: 10%;
+  }
+  .pagination li.pages {
+    width: 80%;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+}
+.breadcrumb {
+  display: inline-block;
+  font-size: 18px;
+  color: var(--font-on-primary-color-medium);
+}
+.breadcrumb i,
+.breadcrumb [class^=mdi-], .breadcrumb [class*=mdi-],
+.breadcrumb i.material-icons, .breadcrumb i.material-symbols-outlined,
+.breadcrumb i.material-symbols-rounded, .breadcrumb i.material-symbols-sharp {
+  display: block;
+  float: left;
+  font-size: 24px;
+}
+.breadcrumb:before {
+  content: "\e5cc";
+  color: var(--font-on-primary-color-medium);
+  vertical-align: top;
+  display: inline-block;
+  font-family: "Material Symbols Outlined", "Material Symbols Rounded", "Material Symbols Sharp", "Material Icons";
+  font-weight: normal;
+  font-style: normal;
+  font-size: 25px;
+  margin: 0 10px 0 8px;
+  -webkit-font-smoothing: antialiased;
+  float: left;
+}
+.breadcrumb:first-child:before {
+  display: none;
+}
+.breadcrumb:last-child {
+  color: var(--md-sys-color-on-primary);
+}
+
+.parallax-container {
+  position: relative;
+  overflow: hidden;
+  height: 500px;
+}
+.parallax-container .parallax {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: -1;
+}
+.parallax-container .parallax img {
+  opacity: 0;
+  position: absolute;
+  left: 50%;
+  bottom: 0;
+  min-width: 100%;
+  min-height: 100%;
+  -webkit-transform: translate3d(0, 0, 0);
+          transform: translate3d(0, 0, 0);
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+}
+
+.pin-top, .pin-bottom {
+  position: relative;
+}
+
+.pinned {
+  position: fixed !important;
+}
+
+/*********************
+  Transition Classes
+**********************/
+ul.staggered-list li {
+  opacity: 0;
+}
+
+.fade-in {
+  opacity: 0;
+  -webkit-transform-origin: 0 50%;
+          transform-origin: 0 50%;
+}
+
+/*********************
+  Media Query Classes
+**********************/
+@media only screen and (max-width : 600.99px) {
+  .hide-on-small-only, .hide-on-small-and-down {
+    display: none !important;
+  }
+}
+
+@media only screen and (max-width : 992.99px) {
+  .hide-on-med-and-down {
+    display: none !important;
+  }
+}
+
+@media only screen and (min-width : 601px) {
+  .hide-on-med-and-up {
+    display: none !important;
+  }
+}
+
+@media only screen and (min-width: 601px) and (max-width: 992.99px) {
+  .hide-on-med-only {
+    display: none !important;
+  }
+}
+
+@media only screen and (min-width : 993px) {
+  .hide-on-large-only {
+    display: none !important;
+  }
+}
+
+@media only screen and (min-width : 1201px) {
+  .hide-on-extra-large-only {
+    display: none !important;
+  }
+}
+
+@media only screen and (min-width : 1201px) {
+  .show-on-extra-large {
+    display: block !important;
+  }
+}
+
+@media only screen and (min-width : 993px) {
+  .show-on-large {
+    display: block !important;
+  }
+}
+
+@media only screen and (min-width: 601px) and (max-width: 992.99px) {
+  .show-on-medium {
+    display: block !important;
+  }
+}
+
+@media only screen and (max-width : 600.99px) {
+  .show-on-small {
+    display: block !important;
+  }
+}
+
+@media only screen and (min-width : 601px) {
+  .show-on-medium-and-up {
+    display: block !important;
+  }
+}
+
+@media only screen and (max-width : 992.99px) {
+  .show-on-medium-and-down {
+    display: block !important;
+  }
+}
+
+@media only screen and (max-width : 600.99px) {
+  .center-on-small-only {
+    text-align: center;
+  }
+}
+
+.page-footer {
+  margin-top: 5rem;
+  padding-top: 3rem;
+  border-top: 1px dashed var(--md-sys-color-outline-variant);
+}
+.page-footer p {
+  color: var(--md-sys-color-outline-light);
+}
+.page-footer a {
+  color: var(--md-sys-color-primary);
+}
+.page-footer .footer-copyright,
+.page-footer .footer-copyright a {
+  overflow: hidden;
+  min-height: 50px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+  padding: 10px 0px;
+}
+
+.page-footer ul {
+  padding-left: 0;
+  list-style-type: none;
+}
+
+table, th, td {
+  border: none;
+}
+
+table {
+  width: 100%;
+  display: table;
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+table.striped tr {
+  border-bottom: none;
+}
+table.striped tbody > tr:nth-child(odd) {
+  background-color: rgba(0, 0, 0, 0.08);
+}
+table.highlight > tbody > tr {
+  -webkit-transition: background-color 0.25s ease;
+  transition: background-color 0.25s ease;
+}
+table.highlight > tbody > tr:hover {
+  background-color: rgba(0, 0, 0, 0.04);
+}
+table thead {
+  color: var(--md-sys-color-on-surface-variant);
+}
+table.centered thead tr th, table.centered tbody tr td {
+  text-align: center;
+}
+
+tr {
+  border-bottom: 1px solid var(--md-sys-color-outline-variant);
+}
+
+td, th {
+  padding: 15px 5px;
+  display: table-cell;
+  text-align: left;
+  vertical-align: middle;
+  border-radius: 0;
+}
+
+@media only screen and (max-width : 992.99px) {
+  table.responsive-table {
+    width: 100%;
+    border-collapse: collapse;
+    border-spacing: 0;
+    display: block;
+    position: relative;
+    /* sort out borders */
+  }
+  table.responsive-table td:empty:before {
+    content: " ";
+  }
+  table.responsive-table th,
+  table.responsive-table td {
+    margin: 0;
+    vertical-align: top;
+  }
+  table.responsive-table th {
+    text-align: left;
+  }
+  table.responsive-table thead {
+    display: block;
+    float: left;
+  }
+  table.responsive-table thead tr {
+    display: block;
+    padding: 0 10px 0 0;
+  }
+  table.responsive-table thead tr th::before {
+    content: " ";
+  }
+  table.responsive-table tbody {
+    display: block;
+    width: auto;
+    position: relative;
+    overflow-x: auto;
+    white-space: nowrap;
+  }
+  table.responsive-table tbody tr {
+    display: inline-block;
+    vertical-align: top;
+  }
+  table.responsive-table th {
+    display: block;
+    text-align: right;
+  }
+  table.responsive-table td {
+    display: block;
+    min-height: 1.25em;
+    text-align: left;
+  }
+  table.responsive-table tr {
+    border-bottom: none;
+    padding: 0 10px;
+  }
+  table.responsive-table thead {
+    border: 0;
+    border-right: 1px solid var(--md-sys-color-outline-variant);
+  }
+}
+.video-container {
+  position: relative;
+  padding-bottom: 56.25%;
+  height: 0;
+  overflow: hidden;
+}
+.video-container iframe, .video-container object, .video-container embed {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+/*******************
+  Utility Classes
+*******************/
+.hide {
+  display: none !important;
+}
+
+.left-align {
+  text-align: left;
+}
+
+.right-align {
+  text-align: right;
+}
+
+.center, .center-align {
+  text-align: center;
+}
+
+.left {
+  float: left !important;
+}
+
+.right {
+  float: right !important;
+}
+
+.no-select, input[type=range],
+input[type=range] + .thumb {
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+
+.circle {
+  border-radius: 50%;
+}
+
+.center-block {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.truncate {
+  display: block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.no-padding {
+  padding: 0 !important;
+}
+
+/**************************
+  Utility Spacing Classes
+**************************/
+.m-0 {
+  margin: 0 !important;
+}
+
+.mt-0 {
+  margin-top: 0 !important;
+}
+
+.mr-0 {
+  margin-right: 0 !important;
+}
+
+.mb-0 {
+  margin-bottom: 0 !important;
+}
+
+.ml-0 {
+  margin-left: 0 !important;
+}
+
+.mx-0 {
+  margin-left: 0 !important;
+  margin-right: 0 !important;
+}
+
+.my-0 {
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+}
+
+.m-1 {
+  margin: 0.25rem !important;
+}
+
+.mt-1 {
+  margin-top: 0.25rem !important;
+}
+
+.mr-1 {
+  margin-right: 0.25rem !important;
+}
+
+.mb-1 {
+  margin-bottom: 0.25rem !important;
+}
+
+.ml-1 {
+  margin-left: 0.25rem !important;
+}
+
+.mx-1 {
+  margin-left: 0.25rem !important;
+  margin-right: 0.25rem !important;
+}
+
+.my-1 {
+  margin-top: 0.25rem !important;
+  margin-bottom: 0.25rem !important;
+}
+
+.m-2 {
+  margin: 0.5rem !important;
+}
+
+.mt-2 {
+  margin-top: 0.5rem !important;
+}
+
+.mr-2 {
+  margin-right: 0.5rem !important;
+}
+
+.mb-2 {
+  margin-bottom: 0.5rem !important;
+}
+
+.ml-2 {
+  margin-left: 0.5rem !important;
+}
+
+.mx-2 {
+  margin-left: 0.5rem !important;
+  margin-right: 0.5rem !important;
+}
+
+.my-2 {
+  margin-top: 0.5rem !important;
+  margin-bottom: 0.5rem !important;
+}
+
+.m-3 {
+  margin: 0.75rem !important;
+}
+
+.mt-3 {
+  margin-top: 0.75rem !important;
+}
+
+.mr-3 {
+  margin-right: 0.75rem !important;
+}
+
+.mb-3 {
+  margin-bottom: 0.75rem !important;
+}
+
+.ml-3 {
+  margin-left: 0.75rem !important;
+}
+
+.mx-3 {
+  margin-left: 0.75rem !important;
+  margin-right: 0.75rem !important;
+}
+
+.my-3 {
+  margin-top: 0.75rem !important;
+  margin-bottom: 0.75rem !important;
+}
+
+.m-4 {
+  margin: 1rem !important;
+}
+
+.mt-4 {
+  margin-top: 1rem !important;
+}
+
+.mr-4 {
+  margin-right: 1rem !important;
+}
+
+.mb-4 {
+  margin-bottom: 1rem !important;
+}
+
+.ml-4 {
+  margin-left: 1rem !important;
+}
+
+.mx-4 {
+  margin-left: 1rem !important;
+  margin-right: 1rem !important;
+}
+
+.my-4 {
+  margin-top: 1rem !important;
+  margin-bottom: 1rem !important;
+}
+
+.m-5 {
+  margin: 1.5rem !important;
+}
+
+.mt-5 {
+  margin-top: 1.5rem !important;
+}
+
+.mr-5 {
+  margin-right: 1.5rem !important;
+}
+
+.mb-5 {
+  margin-bottom: 1.5rem !important;
+}
+
+.ml-5 {
+  margin-left: 1.5rem !important;
+}
+
+.mx-5 {
+  margin-left: 1.5rem !important;
+  margin-right: 1.5rem !important;
+}
+
+.my-5 {
+  margin-top: 1.5rem !important;
+  margin-bottom: 1.5rem !important;
+}
+
+.m-6 {
+  margin: 3rem !important;
+}
+
+.mt-6 {
+  margin-top: 3rem !important;
+}
+
+.mr-6 {
+  margin-right: 3rem !important;
+}
+
+.mb-6 {
+  margin-bottom: 3rem !important;
+}
+
+.ml-6 {
+  margin-left: 3rem !important;
+}
+
+.mx-6 {
+  margin-left: 3rem !important;
+  margin-right: 3rem !important;
+}
+
+.my-6 {
+  margin-top: 3rem !important;
+  margin-bottom: 3rem !important;
+}
+
+.m-auto {
+  margin: auto !important;
+}
+
+.mt-auto {
+  margin-top: auto !important;
+}
+
+.mr-auto {
+  margin-right: auto !important;
+}
+
+.mb-auto {
+  margin-bottom: auto !important;
+}
+
+.ml-auto {
+  margin-left: auto !important;
+}
+
+.mx-auto {
+  margin-left: auto !important;
+  margin-right: auto !important;
+}
+
+.my-auto {
+  margin-top: auto !important;
+  margin-bottom: auto !important;
+}
+
+.p-0 {
+  padding: 0 !important;
+}
+
+.pt-0 {
+  padding-top: 0 !important;
+}
+
+.pr-0 {
+  padding-right: 0 !important;
+}
+
+.pb-0 {
+  padding-bottom: 0 !important;
+}
+
+.pl-0 {
+  padding-left: 0 !important;
+}
+
+.px-0 {
+  padding-left: 0 !important;
+  padding-right: 0 !important;
+}
+
+.py-0 {
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+}
+
+.p-1 {
+  padding: 0.25rem !important;
+}
+
+.pt-1 {
+  padding-top: 0.25rem !important;
+}
+
+.pr-1 {
+  padding-right: 0.25rem !important;
+}
+
+.pb-1 {
+  padding-bottom: 0.25rem !important;
+}
+
+.pl-1 {
+  padding-left: 0.25rem !important;
+}
+
+.px-1 {
+  padding-left: 0.25rem !important;
+  padding-right: 0.25rem !important;
+}
+
+.py-1 {
+  padding-top: 0.25rem !important;
+  padding-bottom: 0.25rem !important;
+}
+
+.p-2 {
+  padding: 0.5rem !important;
+}
+
+.pt-2 {
+  padding-top: 0.5rem !important;
+}
+
+.pr-2 {
+  padding-right: 0.5rem !important;
+}
+
+.pb-2 {
+  padding-bottom: 0.5rem !important;
+}
+
+.pl-2 {
+  padding-left: 0.5rem !important;
+}
+
+.px-2 {
+  padding-left: 0.5rem !important;
+  padding-right: 0.5rem !important;
+}
+
+.py-2 {
+  padding-top: 0.5rem !important;
+  padding-bottom: 0.5rem !important;
+}
+
+.p-3 {
+  padding: 0.75rem !important;
+}
+
+.pt-3 {
+  padding-top: 0.75rem !important;
+}
+
+.pr-3 {
+  padding-right: 0.75rem !important;
+}
+
+.pb-3 {
+  padding-bottom: 0.75rem !important;
+}
+
+.pl-3 {
+  padding-left: 0.75rem !important;
+}
+
+.px-3 {
+  padding-left: 0.75rem !important;
+  padding-right: 0.75rem !important;
+}
+
+.py-3 {
+  padding-top: 0.75rem !important;
+  padding-bottom: 0.75rem !important;
+}
+
+.p-4 {
+  padding: 1rem !important;
+}
+
+.pt-4 {
+  padding-top: 1rem !important;
+}
+
+.pr-4 {
+  padding-right: 1rem !important;
+}
+
+.pb-4 {
+  padding-bottom: 1rem !important;
+}
+
+.pl-4 {
+  padding-left: 1rem !important;
+}
+
+.px-4 {
+  padding-left: 1rem !important;
+  padding-right: 1rem !important;
+}
+
+.py-4 {
+  padding-top: 1rem !important;
+  padding-bottom: 1rem !important;
+}
+
+.p-5 {
+  padding: 1.5rem !important;
+}
+
+.pt-5 {
+  padding-top: 1.5rem !important;
+}
+
+.pr-5 {
+  padding-right: 1.5rem !important;
+}
+
+.pb-5 {
+  padding-bottom: 1.5rem !important;
+}
+
+.pl-5 {
+  padding-left: 1.5rem !important;
+}
+
+.px-5 {
+  padding-left: 1.5rem !important;
+  padding-right: 1.5rem !important;
+}
+
+.py-5 {
+  padding-top: 1.5rem !important;
+  padding-bottom: 1.5rem !important;
+}
+
+.p-6 {
+  padding: 3rem !important;
+}
+
+.pt-6 {
+  padding-top: 3rem !important;
+}
+
+.pr-6 {
+  padding-right: 3rem !important;
+}
+
+.pb-6 {
+  padding-bottom: 3rem !important;
+}
+
+.pl-6 {
+  padding-left: 3rem !important;
+}
+
+.px-6 {
+  padding-left: 3rem !important;
+  padding-right: 3rem !important;
+}
+
+.py-6 {
+  padding-top: 3rem !important;
+  padding-bottom: 3rem !important;
+}
+
+.p-auto {
+  padding: auto !important;
+}
+
+.pt-auto {
+  padding-top: auto !important;
+}
+
+.pr-auto {
+  padding-right: auto !important;
+}
+
+.pb-auto {
+  padding-bottom: auto !important;
+}
+
+.pl-auto {
+  padding-left: auto !important;
+}
+
+.px-auto {
+  padding-left: auto !important;
+  padding-right: auto !important;
+}
+
+.py-auto {
+  padding-top: auto !important;
+  padding-bottom: auto !important;
+}
+
+.collection {
+  padding-left: 0;
+  list-style-type: none;
+  margin: 0.5rem 0 1rem 0;
+  border: 1px solid var(--md-sys-color-outline-variant);
+  border-radius: 2px;
+  overflow: hidden;
+  position: relative;
+}
+.collection .collection-item {
+  background-color: transparent;
+  line-height: 1.5rem;
+  padding: 10px 20px;
+  margin: 0;
+  border-bottom: 1px solid var(--md-sys-color-outline-variant);
+}
+.collection .collection-item.avatar {
+  min-height: 84px;
+  padding-left: 72px;
+  position: relative;
+}
+.collection .collection-item.avatar:not(.circle-clipper) > .circle,
+.collection .collection-item.avatar :not(.circle-clipper) > .circle {
+  position: absolute;
+  width: 42px;
+  height: 42px;
+  overflow: hidden;
+  left: 15px;
+  display: inline-block;
+  vertical-align: middle;
+}
+.collection .collection-item.avatar i.circle {
+  font-size: 18px;
+  line-height: 42px;
+  color: #fff;
+  background-color: var(--md-sys-color-shadow-light);
+  text-align: center;
+}
+.collection .collection-item.avatar .title {
+  font-size: 16px;
+}
+.collection .collection-item.avatar p {
+  margin: 0;
+}
+.collection .collection-item.avatar .secondary-content {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+}
+.collection .collection-item:last-child {
+  border-bottom: none;
+}
+.collection .collection-item.active {
+  background-color: var(--md-sys-color-primary);
+  color: var(--md-sys-color-on-primary);
+}
+.collection .collection-item.active .secondary-content {
+  color: var(--md-sys-color-on-primary);
+}
+.collection a.collection-item {
+  display: block;
+  -webkit-transition: 0.25s;
+  transition: 0.25s;
+  color: var(--md-sys-color-primary);
+}
+.collection a.collection-item:not(.active):hover {
+  background-color: rgba(0, 0, 0, 0.04);
+}
+.collection.with-header .collection-header {
+  background-color: transparent;
+  border-bottom: 1px solid var(--md-sys-color-outline-variant);
+  padding: 10px 20px;
+}
+.collection.with-header .collection-item {
+  padding-left: 30px;
+}
+.collection.with-header .collection-item.avatar {
+  padding-left: 72px;
+}
+
+.secondary-content {
+  float: right;
+  color: var(--md-sys-color-primary);
+}
+
+.collapsible .collection {
+  margin: 0;
+  border: none;
+}
+
+:root {
+  --bagde-height: 22px;
+}
+
+span.badge {
+  min-width: 3rem;
+  padding: 0 6px;
+  margin-left: 14px;
+  text-align: center;
+  font-size: 1rem;
+  line-height: var(--bagde-height);
+  height: var(--bagde-height);
+  color: var(--md-sys-color-on-surface-variant);
+  float: right;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+}
+span.badge.new {
+  font-weight: 300;
+  font-size: 0.8rem;
+  color: var(--md-sys-color-on-primary);
+  background-color: var(--md-sys-color-primary);
+  border-radius: 2px;
+}
+span.badge.new:after {
+  content: " new";
+}
+span.badge[data-badge-caption]::after {
+  content: " " attr(data-badge-caption);
+}
+
+.active span.badge {
+  color: var(--md-sys-color-on-primary);
+}
+
+nav ul a span.badge {
+  display: inline-block;
+  float: none;
+  margin-left: 4px;
+  line-height: var(--bagde-height);
+  height: var(--bagde-height);
+  -webkit-font-smoothing: auto;
+}
+
+.collection-item span.badge {
+  margin-top: calc(0.75rem - var(--bagde-height) * 0.5);
+}
+
+.collapsible span.badge {
+  margin-left: auto;
+}
+.collapsible span.badge.leading {
+  margin-right: 7px;
+  -webkit-box-ordinal-group: 0;
+  -webkit-order: -1;
+      -ms-flex-order: -1;
+          order: -1;
+}
+
+.collapsible .active span.badge:not(.new) {
+  color: var(--md-sys-color-on-surface-variant);
+}
+
+.sidenav span.badge {
+  margin-top: calc(var(--sidenav-line-height) * 0.5 - 11px);
+}
+
+table span.badge {
+  display: inline-block;
+  float: none;
+  margin-left: auto;
+}
+
+/* This is needed for some mobile phones to display the Google Icon font properly */
+.material-icons, .material-symbols-outlined,
+.material-symbols-rounded, .material-symbols-sharp {
+  text-rendering: optimizeLegibility;
+  -webkit-font-feature-settings: "liga";
+     -moz-font-feature-settings: "liga";
+          font-feature-settings: "liga";
+}
+
+.container {
+  margin: 0 auto;
+  max-width: 1280px;
+  width: 90%;
+}
+
+@media only screen and (min-width : 601px) {
+  .container {
+    width: 85%;
+  }
+}
+@media only screen and (min-width : 993px) {
+  .container {
+    width: 70%;
+  }
+}
+.section {
+  padding: 1rem 0;
+}
+
+body {
+  --gap-size: 1.5rem;
+}
+
+.row {
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  gap: var(--gap-size);
+}
+.row .s1 {
+  grid-column: auto/span 1;
+}
+.row .s2 {
+  grid-column: auto/span 2;
+}
+.row .s3 {
+  grid-column: auto/span 3;
+}
+.row .s4 {
+  grid-column: auto/span 4;
+}
+.row .s5 {
+  grid-column: auto/span 5;
+}
+.row .s6 {
+  grid-column: auto/span 6;
+}
+.row .s7 {
+  grid-column: auto/span 7;
+}
+.row .s8 {
+  grid-column: auto/span 8;
+}
+.row .s9 {
+  grid-column: auto/span 9;
+}
+.row .s10 {
+  grid-column: auto/span 10;
+}
+.row .s11 {
+  grid-column: auto/span 11;
+}
+.row .s12 {
+  grid-column: auto/span 12;
+}
+.row .offset-s1 {
+  grid-column-start: 3;
+}
+.row .offset-s2 {
+  grid-column-start: 2;
+}
+.row .offset-s3 {
+  grid-column-start: 4;
+}
+.row .offset-s4 {
+  grid-column-start: 5;
+}
+.row .offset-s5 {
+  grid-column-start: 6;
+}
+.row .offset-s6 {
+  grid-column-start: 7;
+}
+.row .offset-s7 {
+  grid-column-start: 8;
+}
+.row .offset-s8 {
+  grid-column-start: 9;
+}
+.row .offset-s9 {
+  grid-column-start: 10;
+}
+.row .offset-s10 {
+  grid-column-start: 11;
+}
+.row .offset-s11 {
+  grid-column-start: 12;
+}
+@media only screen and (min-width : 601px) {
+  .row .m1 {
+    grid-column: auto/span 1;
+  }
+  .row .m2 {
+    grid-column: auto/span 2;
+  }
+  .row .m3 {
+    grid-column: auto/span 3;
+  }
+  .row .m4 {
+    grid-column: auto/span 4;
+  }
+  .row .m5 {
+    grid-column: auto/span 5;
+  }
+  .row .m6 {
+    grid-column: auto/span 6;
+  }
+  .row .m7 {
+    grid-column: auto/span 7;
+  }
+  .row .m8 {
+    grid-column: auto/span 8;
+  }
+  .row .m9 {
+    grid-column: auto/span 9;
+  }
+  .row .m10 {
+    grid-column: auto/span 10;
+  }
+  .row .m11 {
+    grid-column: auto/span 11;
+  }
+  .row .m12 {
+    grid-column: auto/span 12;
+  }
+  .row .offset-m1 {
+    grid-column-start: 2;
+  }
+  .row .offset-m2 {
+    grid-column-start: 3;
+  }
+  .row .offset-m3 {
+    grid-column-start: 4;
+  }
+  .row .offset-m4 {
+    grid-column-start: 5;
+  }
+  .row .offset-m5 {
+    grid-column-start: 6;
+  }
+  .row .offset-m6 {
+    grid-column-start: 7;
+  }
+  .row .offset-m7 {
+    grid-column-start: 8;
+  }
+  .row .offset-m8 {
+    grid-column-start: 9;
+  }
+  .row .offset-m9 {
+    grid-column-start: 10;
+  }
+  .row .offset-m10 {
+    grid-column-start: 11;
+  }
+  .row .offset-m11 {
+    grid-column-start: 12;
+  }
+}
+@media only screen and (min-width : 993px) {
+  .row .l1 {
+    grid-column: auto/span 1;
+  }
+  .row .l2 {
+    grid-column: auto/span 2;
+  }
+  .row .l3 {
+    grid-column: auto/span 3;
+  }
+  .row .l4 {
+    grid-column: auto/span 4;
+  }
+  .row .l5 {
+    grid-column: auto/span 5;
+  }
+  .row .l6 {
+    grid-column: auto/span 6;
+  }
+  .row .l7 {
+    grid-column: auto/span 7;
+  }
+  .row .l8 {
+    grid-column: auto/span 8;
+  }
+  .row .l9 {
+    grid-column: auto/span 9;
+  }
+  .row .l10 {
+    grid-column: auto/span 10;
+  }
+  .row .l11 {
+    grid-column: auto/span 11;
+  }
+  .row .l12 {
+    grid-column: auto/span 12;
+  }
+  .row .offset-l1 {
+    grid-column-start: 2;
+  }
+  .row .offset-l2 {
+    grid-column-start: 3;
+  }
+  .row .offset-l3 {
+    grid-column-start: 4;
+  }
+  .row .offset-l4 {
+    grid-column-start: 5;
+  }
+  .row .offset-l5 {
+    grid-column-start: 6;
+  }
+  .row .offset-l6 {
+    grid-column-start: 7;
+  }
+  .row .offset-l7 {
+    grid-column-start: 8;
+  }
+  .row .offset-l8 {
+    grid-column-start: 9;
+  }
+  .row .offset-l9 {
+    grid-column-start: 10;
+  }
+  .row .offset-l10 {
+    grid-column-start: 11;
+  }
+  .row .offset-l11 {
+    grid-column-start: 12;
+  }
+}
+@media only screen and (min-width : 1201px) {
+  .row .xl1 {
+    grid-column: auto/span 1;
+  }
+  .row .xl2 {
+    grid-column: auto/span 2;
+  }
+  .row .xl3 {
+    grid-column: auto/span 3;
+  }
+  .row .xl4 {
+    grid-column: auto/span 4;
+  }
+  .row .xl5 {
+    grid-column: auto/span 5;
+  }
+  .row .xl6 {
+    grid-column: auto/span 6;
+  }
+  .row .xl7 {
+    grid-column: auto/span 7;
+  }
+  .row .xl8 {
+    grid-column: auto/span 8;
+  }
+  .row .xl9 {
+    grid-column: auto/span 9;
+  }
+  .row .xl10 {
+    grid-column: auto/span 10;
+  }
+  .row .xl11 {
+    grid-column: auto/span 11;
+  }
+  .row .xl12 {
+    grid-column: auto/span 12;
+  }
+  .row .offset-xl1 {
+    grid-column-start: 2;
+  }
+  .row .offset-xl2 {
+    grid-column-start: 3;
+  }
+  .row .offset-xl3 {
+    grid-column-start: 4;
+  }
+  .row .offset-xl4 {
+    grid-column-start: 5;
+  }
+  .row .offset-xl5 {
+    grid-column-start: 6;
+  }
+  .row .offset-xl6 {
+    grid-column-start: 7;
+  }
+  .row .offset-xl7 {
+    grid-column-start: 8;
+  }
+  .row .offset-xl8 {
+    grid-column-start: 9;
+  }
+  .row .offset-xl9 {
+    grid-column-start: 10;
+  }
+  .row .offset-xl10 {
+    grid-column-start: 11;
+  }
+  .row .offset-xl11 {
+    grid-column-start: 12;
+  }
+}
+
+.g-0 {
+  gap: 0;
+}
+
+.g-1 {
+  gap: calc(0.25 * var(--gap-size));
+}
+
+.g-2 {
+  gap: calc(0.5 * var(--gap-size));
+}
+
+.g-3 {
+  gap: calc(1 * var(--gap-size));
+}
+
+.g-4 {
+  gap: calc(1.5 * var(--gap-size));
+}
+
+.g-5 {
+  gap: calc(3 * var(--gap-size));
+}
+
+:root {
+  --navbar-height: 64px;
+  --navbar-height-mobile: 56px;
+}
+
+nav {
+  color: var(--md-sys-color-on-primary);
+  background-color: var(--md-sys-color-secondary-container);
+  width: 100%;
+  height: var(--navbar-height-mobile);
+  line-height: var(--navbar-height-mobile);
+}
+nav.nav-extended {
+  height: auto;
+}
+nav.nav-extended .nav-wrapper {
+  min-height: var(--navbar-height-mobile);
+  height: auto;
+}
+nav.nav-extended .nav-content {
+  position: relative;
+  line-height: normal;
+}
+nav a {
+  color: var(--md-sys-color-on-primary);
+}
+nav i,
+nav [class^=mdi-], nav [class*=mdi-],
+nav i.material-icons, nav i.material-symbols-outlined,
+nav i.material-symbols-rounded, nav i.material-symbols-sharp {
+  display: block;
+  font-size: 24px;
+  height: var(--navbar-height-mobile);
+  line-height: var(--navbar-height-mobile);
+}
+nav .nav-wrapper {
+  position: relative;
+  height: 100%;
+}
+@media only screen and (min-width : 993px) {
+  nav a.sidenav-trigger {
+    display: none;
+  }
+}
+nav .sidenav-trigger {
+  float: left;
+  position: relative;
+  z-index: 1;
+  height: var(--navbar-height-mobile);
+  margin: 0 18px;
+}
+nav .sidenav-trigger i {
+  height: var(--navbar-height-mobile);
+  line-height: var(--navbar-height-mobile);
+}
+nav .brand-logo {
+  position: absolute;
+  color: var(--md-sys-color-on-primary);
+  display: inline-block;
+  font-size: 2.1rem;
+  padding: 0;
+}
+nav .brand-logo.center {
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+}
+@media only screen and (max-width : 992.99px) {
+  nav .brand-logo {
+    left: 50%;
+    -webkit-transform: translateX(-50%);
+            transform: translateX(-50%);
+  }
+  nav .brand-logo.left, nav .brand-logo.right {
+    padding: 0;
+    -webkit-transform: none;
+            transform: none;
+  }
+  nav .brand-logo.left {
+    left: 0.5rem;
+  }
+  nav .brand-logo.right {
+    right: 0.5rem;
+    left: auto;
+  }
+}
+nav .brand-logo.right {
+  right: 0.5rem;
+  padding: 0;
+}
+nav .brand-logo i,
+nav .brand-logo [class^=mdi-], nav .brand-logo [class*=mdi-],
+nav .brand-logo i.material-icons, nav .brand-logo i.material-symbols-outlined,
+nav .brand-logo i.material-symbols-rounded, nav .brand-logo i.material-symbols-sharp {
+  float: left;
+  margin-right: 15px;
+}
+nav .nav-title {
+  display: inline-block;
+  font-size: 32px;
+  padding: 28px 0;
+}
+nav ul:not(.dropdown-content) {
+  list-style-type: none;
+  margin: 0;
+}
+nav ul:not(.dropdown-content) > li {
+  -webkit-transition: background-color 0.3s;
+  transition: background-color 0.3s;
+  float: left;
+  padding: 0;
+}
+nav ul:not(.dropdown-content) > li > a {
+  -webkit-transition: background-color 0.3s;
+  transition: background-color 0.3s;
+  font-size: 1rem;
+  color: var(--md-sys-color-on-primary);
+  display: block;
+  padding: 0 15px;
+  cursor: pointer;
+}
+nav ul:not(.dropdown-content) > li > a.active {
+  background-color: var(--md-ref-palette-primary80);
+}
+nav ul:not(.dropdown-content) > li > a:hover:not(.active) {
+  background-color: var(--md-ref-palette-primary70);
+}
+nav ul:not(.dropdown-content) > li > a.btn, nav ul:not(.dropdown-content) > li > a.btn-small, nav ul:not(.dropdown-content) > li > a.btn-large, nav ul:not(.dropdown-content) > li > a.btn-flat, nav ul:not(.dropdown-content) > li > a.btn-floating {
+  margin-top: -2px;
+  margin-left: 15px;
+  margin-right: 15px;
+  display: inline-block;
+}
+nav ul:not(.dropdown-content) > li > a.btn > .material-icons, nav ul:not(.dropdown-content) > li > a.btn-small > .material-icons, nav ul:not(.dropdown-content) > li > a.btn > .material-symbols-outlined, nav ul:not(.dropdown-content) > li > a.btn-small > .material-symbols-outlined, nav ul:not(.dropdown-content) > li > a.btn > .material-symbols-rounded, nav ul:not(.dropdown-content) > li > a.btn-small > .material-symbols-rounded, nav ul:not(.dropdown-content) > li > a.btn > .material-symbols-sharp, nav ul:not(.dropdown-content) > li > a.btn-small > .material-symbols-sharp, nav ul:not(.dropdown-content) > li > a.btn-large > .material-icons, nav ul:not(.dropdown-content) > li > a.btn-large > .material-symbols-outlined, nav ul:not(.dropdown-content) > li > a.btn-large > .material-symbols-rounded, nav ul:not(.dropdown-content) > li > a.btn-large > .material-symbols-sharp, nav ul:not(.dropdown-content) > li > a.btn-flat > .material-icons, nav ul:not(.dropdown-content) > li > a.btn-flat > .material-symbols-outlined, nav ul:not(.dropdown-content) > li > a.btn-flat > .material-symbols-rounded, nav ul:not(.dropdown-content) > li > a.btn-flat > .material-symbols-sharp, nav ul:not(.dropdown-content) > li > a.btn-floating > .material-icons, nav ul:not(.dropdown-content) > li > a.btn-floating > .material-symbols-outlined, nav ul:not(.dropdown-content) > li > a.btn-floating > .material-symbols-rounded, nav ul:not(.dropdown-content) > li > a.btn-floating > .material-symbols-sharp {
+  height: inherit;
+  line-height: inherit;
+}
+nav ul:not(.dropdown-content).left {
+  float: left;
+}
+nav form {
+  height: 100%;
+}
+nav .input-field {
+  margin: 0;
+  height: 100%;
+}
+nav .input-field input[type=search] {
+  height: 100%;
+  font-size: 1.2rem;
+  border: none;
+  padding-left: 2rem;
+  color: var(--md-sys-color-on-primary);
+}
+nav .input-field input[type=search]:focus, nav .input-field input[type=search][type=text]:valid, nav .input-field input[type=search][type=password]:valid, nav .input-field input[type=search][type=email]:valid, nav .input-field input[type=search][type=url]:valid, nav .input-field input[type=search][type=date]:valid {
+  border: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
+nav .input-field label {
+  top: 0;
+  left: 0;
+}
+nav .input-field label i {
+  color: var(--font-on-primary-color-medium);
+  -webkit-transition: color 0.3s;
+  transition: color 0.3s;
+}
+nav .input-field label.active i {
+  color: var(--md-sys-color-on-primary);
+}
+
+.navbar-fixed {
+  position: relative;
+  height: var(--navbar-height-mobile);
+  z-index: 997;
+}
+.navbar-fixed nav {
+  position: fixed;
+  right: 0;
+}
+
+@media only screen and (min-width : 601px) {
+  nav.nav-extended .nav-wrapper {
+    min-height: var(--navbar-height-mobile);
+  }
+  nav, nav .nav-wrapper i, nav a.sidenav-trigger, nav a.sidenav-trigger i {
+    height: var(--navbar-height);
+    line-height: var(--navbar-height);
+  }
+  .navbar-fixed {
+    height: var(--navbar-height);
+  }
+}
+a {
+  text-decoration: none;
+}
+
+html {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  font-weight: normal;
+  color: var(--md-sys-color-on-background);
+}
+@media only screen and (min-width: 0) {
+  html {
+    font-size: 14px;
+  }
+}
+@media only screen and (min-width: 993px) {
+  html {
+    font-size: 14.5px;
+  }
+}
+@media only screen and (min-width: 1201px) {
+  html {
+    font-size: 15px;
+  }
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-weight: 400;
+  line-height: 1.3;
+}
+
+h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
+  font-weight: inherit;
+}
+
+h1 {
+  font-size: 4.2rem;
+  line-height: 110%;
+  margin: 2.8rem 0 1.68rem 0;
+}
+
+h2 {
+  font-size: 3.56rem;
+  line-height: 110%;
+  margin: 2.3733333333rem 0 1.424rem 0;
+}
+
+h3 {
+  font-size: 2.92rem;
+  line-height: 110%;
+  margin: 1.9466666667rem 0 1.168rem 0;
+}
+
+h4 {
+  font-size: 2.28rem;
+  line-height: 110%;
+  margin: 1.52rem 0 0.912rem 0;
+}
+
+h5 {
+  font-size: 1.64rem;
+  line-height: 110%;
+  margin: 1.0933333333rem 0 0.656rem 0;
+}
+
+h6 {
+  font-size: 1.15rem;
+  line-height: 110%;
+  margin: 0.7666666667rem 0 0.46rem 0;
+}
+
+em {
+  font-style: italic;
+}
+
+strong {
+  font-weight: 500;
+}
+
+small {
+  font-size: 75%;
+}
+
+.light {
+  font-weight: 300;
+}
+
+.thin {
+  font-weight: 200;
+}
+
+@media only screen and (min-width: 360px) {
+  .flow-text {
+    font-size: 1.2rem;
+  }
+}
+@media only screen and (min-width: 390px) {
+  .flow-text {
+    font-size: 1.224rem;
+  }
+}
+@media only screen and (min-width: 420px) {
+  .flow-text {
+    font-size: 1.248rem;
+  }
+}
+@media only screen and (min-width: 450px) {
+  .flow-text {
+    font-size: 1.272rem;
+  }
+}
+@media only screen and (min-width: 480px) {
+  .flow-text {
+    font-size: 1.296rem;
+  }
+}
+@media only screen and (min-width: 510px) {
+  .flow-text {
+    font-size: 1.32rem;
+  }
+}
+@media only screen and (min-width: 540px) {
+  .flow-text {
+    font-size: 1.344rem;
+  }
+}
+@media only screen and (min-width: 570px) {
+  .flow-text {
+    font-size: 1.368rem;
+  }
+}
+@media only screen and (min-width: 600px) {
+  .flow-text {
+    font-size: 1.392rem;
+  }
+}
+@media only screen and (min-width: 630px) {
+  .flow-text {
+    font-size: 1.416rem;
+  }
+}
+@media only screen and (min-width: 660px) {
+  .flow-text {
+    font-size: 1.44rem;
+  }
+}
+@media only screen and (min-width: 690px) {
+  .flow-text {
+    font-size: 1.464rem;
+  }
+}
+@media only screen and (min-width: 720px) {
+  .flow-text {
+    font-size: 1.488rem;
+  }
+}
+@media only screen and (min-width: 750px) {
+  .flow-text {
+    font-size: 1.512rem;
+  }
+}
+@media only screen and (min-width: 780px) {
+  .flow-text {
+    font-size: 1.536rem;
+  }
+}
+@media only screen and (min-width: 810px) {
+  .flow-text {
+    font-size: 1.56rem;
+  }
+}
+@media only screen and (min-width: 840px) {
+  .flow-text {
+    font-size: 1.584rem;
+  }
+}
+@media only screen and (min-width: 870px) {
+  .flow-text {
+    font-size: 1.608rem;
+  }
+}
+@media only screen and (min-width: 900px) {
+  .flow-text {
+    font-size: 1.632rem;
+  }
+}
+@media only screen and (min-width: 930px) {
+  .flow-text {
+    font-size: 1.656rem;
+  }
+}
+@media only screen and (min-width: 960px) {
+  .flow-text {
+    font-size: 1.68rem;
+  }
+}
+@media only screen and (max-width: 360px) {
+  .flow-text {
+    font-size: 1.2rem;
+  }
+}
+
+.scale-transition {
+  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.53, 0.01, 0.36, 1.63) !important;
+  transition: -webkit-transform 0.3s cubic-bezier(0.53, 0.01, 0.36, 1.63) !important;
+  transition: transform 0.3s cubic-bezier(0.53, 0.01, 0.36, 1.63) !important;
+  transition: transform 0.3s cubic-bezier(0.53, 0.01, 0.36, 1.63), -webkit-transform 0.3s cubic-bezier(0.53, 0.01, 0.36, 1.63) !important;
+}
+.scale-transition.scale-out {
+  -webkit-transform: scale(0);
+          transform: scale(0);
+  -webkit-transition: -webkit-transform 0.2s !important;
+  transition: -webkit-transform 0.2s !important;
+  transition: transform 0.2s !important;
+  transition: transform 0.2s, -webkit-transform 0.2s !important;
+}
+.scale-transition.scale-in {
+  -webkit-transform: scale(1);
+          transform: scale(1);
+}
+
+.card-panel {
+  -webkit-transition: -webkit-box-shadow 0.25s;
+  transition: -webkit-box-shadow 0.25s;
+  transition: box-shadow 0.25s;
+  transition: box-shadow 0.25s, -webkit-box-shadow 0.25s;
+  padding: 24px;
+  margin: 0.5rem 0 1rem 0;
+  border-radius: 12px;
+  background-color: var(--md-sys-color-surface);
+}
+
+.card {
+  overflow: hidden;
+  position: relative;
+  background-color: var(--md-sys-color-surface);
+  -webkit-transition: -webkit-box-shadow 0.25s;
+  transition: -webkit-box-shadow 0.25s;
+  transition: box-shadow 0.25s;
+  transition: box-shadow 0.25s, -webkit-box-shadow 0.25s;
+  border-radius: 12px;
+}
+.card .card-title {
+  font-size: 24px;
+  font-weight: 300;
+}
+.card.small, .card.medium, .card.large {
+  position: relative;
+}
+.card.small .card-image, .card.medium .card-image, .card.large .card-image {
+  max-height: 60%;
+  overflow: hidden;
+}
+.card.small .card-image + .card-content, .card.medium .card-image + .card-content, .card.large .card-image + .card-content {
+  max-height: 40%;
+}
+.card.small .card-content, .card.medium .card-content, .card.large .card-content {
+  max-height: 100%;
+  overflow: hidden;
+}
+.card.small .card-action, .card.medium .card-action, .card.large .card-action {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+.card.small {
+  height: 300px;
+}
+.card.medium {
+  height: 400px;
+}
+.card.large {
+  height: 500px;
+}
+.card.horizontal {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+.card.horizontal.small .card-image, .card.horizontal.medium .card-image, .card.horizontal.large .card-image {
+  height: 100%;
+  max-height: none;
+  overflow: visible;
+}
+.card.horizontal.small .card-image img, .card.horizontal.medium .card-image img, .card.horizontal.large .card-image img {
+  height: 100%;
+}
+.card.horizontal .card-image {
+  max-width: 50%;
+}
+.card.horizontal .card-image img {
+  border-radius: 2px 0 0 2px;
+  max-width: 100%;
+  width: auto;
+}
+.card.horizontal .card-stacked {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: column;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+  position: relative;
+}
+.card.horizontal .card-stacked .card-content {
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+      -ms-flex-positive: 1;
+          flex-grow: 1;
+}
+.card.sticky-action .card-action {
+  z-index: 2;
+}
+.card.sticky-action .card-reveal {
+  z-index: 1;
+  padding-bottom: 64px;
+}
+.card .card-image {
+  position: relative;
+}
+.card .card-image img {
+  display: block;
+  border-radius: 2px 2px 0 0;
+  position: relative;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+}
+.card .card-image .card-title {
+  color: var(--md-sys-color-surface);
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  max-width: 100%;
+  padding: 24px;
+}
+.card .card-image .activator {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  cursor: pointer;
+}
+.card .card-content {
+  padding: 24px;
+  border-radius: 0 0 2px 2px;
+}
+.card .card-content p {
+  margin: 0;
+}
+.card .card-content .card-title {
+  display: block;
+  line-height: 32px;
+  margin-bottom: 8px;
+}
+.card .card-content .card-title i {
+  line-height: 32px;
+}
+.card .card-content .card-title.activator {
+  cursor: pointer;
+}
+.card .card-action {
+  border-top: 1px solid var(--md-sys-color-outline-variant);
+  position: relative;
+  background-color: inherit;
+}
+.card .card-action:last-child {
+  border-radius: 0 0 2px 2px;
+}
+.card .card-action a {
+  padding: 16px 24px;
+  display: inline-block;
+}
+.card .card-action a:not(.btn):not(.btn-small):not(.btn-large):not(.btn-large):not(.btn-floating) {
+  color: var(--md-sys-color-primary);
+  -webkit-transition: color 0.3s ease;
+  transition: color 0.3s ease;
+}
+.card .card-action a:not(.btn):not(.btn-small):not(.btn-large):not(.btn-large):not(.btn-floating):hover {
+  background-color: rgba(var(--md-sys-color-primary-numeric), 0.06);
+}
+.card .card-reveal {
+  padding: 24px;
+  position: absolute;
+  background-color: var(--md-sys-color-surface);
+  width: 100%;
+  overflow-y: auto;
+  left: 0;
+  top: 100%;
+  height: 100%;
+  z-index: 3;
+  display: none;
+}
+.card .card-reveal .card-title {
+  cursor: pointer;
+  display: block;
+}
+
+#toast-container {
+  display: block;
+  position: fixed;
+  z-index: 10000;
+}
+@media only screen and (max-width : 600.99px) {
+  #toast-container {
+    min-width: 100%;
+    bottom: 0%;
+  }
+}
+@media only screen and (min-width : 601px) and (max-width : 992.99px) {
+  #toast-container {
+    left: 5%;
+    bottom: 7%;
+    max-width: 90%;
+  }
+}
+@media only screen and (min-width : 993px) {
+  #toast-container {
+    top: 10%;
+    right: 7%;
+    max-width: 86%;
+  }
+}
+
+.toast {
+  border-radius: 4px;
+  top: 35px;
+  width: auto;
+  margin-top: 10px;
+  position: relative;
+  max-width: 100%;
+  height: auto;
+  min-height: 48px;
+  padding-left: 16px;
+  padding-right: 12px;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 20px;
+  color: var(--md-sys-color-inverse-on-surface);
+  background-color: var(--md-sys-color-inverse-surface);
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+  cursor: default;
+}
+.toast .toast-action {
+  color: var(--md-sys-color-inverse-primary);
+  font-weight: 500;
+  margin-right: -25px;
+  margin-left: 3rem;
+}
+.toast.rounded {
+  border-radius: 24px;
+}
+@media only screen and (max-width : 600.99px) {
+  .toast {
+    width: 100%;
+    border-radius: 0;
+  }
+}
+
+.tabs {
+  padding-left: 0;
+  list-style-type: none;
+  position: relative;
+  overflow-x: auto;
+  overflow-y: hidden;
+  width: 100%;
+  background-color: var(--md-sys-color-surface);
+  margin: 0 auto;
+  white-space: nowrap;
+}
+.tabs.tabs-transparent {
+  background-color: transparent;
+}
+.tabs.tabs-transparent .tab a {
+  color: var(--font-on-primary-color-medium);
+}
+.tabs.tabs-transparent .tab.disabled a,
+.tabs.tabs-transparent .tab.disabled a:hover,
+.tabs.tabs-transparent .tab.disabled a:focus {
+  color: rgba(255, 255, 255, 0.38);
+}
+.tabs.tabs-transparent .tab a:hover {
+  background-color: rgba(0, 0, 0, 0.04);
+}
+.tabs.tabs-transparent .tab a.active,
+.tabs.tabs-transparent .tab a:focus {
+  background-color: transparent;
+}
+.tabs.tabs-transparent .tab a:hover,
+.tabs.tabs-transparent .tab a.active,
+.tabs.tabs-transparent .tab a:focus {
+  color: var(--md-sys-color-on-primary);
+}
+.tabs.tabs-transparent .indicator {
+  background-color: var(--md-sys-color-on-primary);
+}
+.tabs.tabs-fixed-width {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+.tabs.tabs-fixed-width .tab {
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+      -ms-flex-positive: 1;
+          flex-grow: 1;
+}
+.tabs .tab {
+  padding-left: 0;
+  list-style-type: none;
+  display: inline-block;
+  text-align: center;
+  line-height: 48px;
+  padding: 0;
+  margin: 0;
+}
+.tabs .tab i.material-icons {
+  position: relative;
+  top: 8px;
+  vertical-align: middle;
+}
+.tabs .tab span {
+  height: 24px;
+  line-height: 20px;
+}
+.tabs .tab a {
+  color: var(--md-sys-color-on-surface-variant);
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: column;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  width: 100%;
+  height: 100%;
+  min-height: 48px;
+  padding: 0 24px;
+  font-size: 14px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  -webkit-transition: color 0.28s ease, background-color 0.28s ease;
+  transition: color 0.28s ease, background-color 0.28s ease;
+}
+.tabs .tab a.active {
+  background-color: transparent;
+}
+.tabs .tab a.active, .tabs .tab a:focus, .tabs .tab a:hover {
+  color: var(--md-sys-color-primary);
+}
+.tabs .tab a:hover {
+  background-color: rgba(var(--md-sys-color-primary-numeric), 0.06);
+}
+.tabs .tab a:focus {
+  background-color: var(--md-sys-color-primary-container);
+}
+.tabs .tab a.active {
+  background-color: rgba(var(--md-sys-color-primary-numeric), 0.18);
+}
+.tabs .tab a:focus, .tabs .tab a.active {
+  outline: none;
+}
+.tabs .tab.disabled a, .tabs .tab.disabled a:hover {
+  color: var(--md-sys-color-on-surface);
+  cursor: default;
+  background-color: transparent;
+}
+.tabs .tab.disabled a:not(:focus), .tabs .tab.disabled a:hover:not(:focus) {
+  background-color: transparent;
+}
+.tabs .indicator {
+  position: absolute;
+  bottom: 0;
+  height: 3px;
+  background-color: var(--md-sys-color-primary);
+  will-change: left, right;
+  border-radius: 3px 3px 0 0;
+}
+.tabs.tabs-horizontal .tab {
+  height: 48px;
+}
+.tabs.tabs-horizontal .tab a {
+  display: block;
+}
+.tabs.tabs-horizontal .tab i.material-icons {
+  padding: 0 4px;
+  position: relative;
+  top: -2px;
+  vertical-align: middle;
+}
+
+/* Fixed Sidenav hide on smaller */
+@media only screen and (max-width : 992.99px) {
+  .tabs {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+  }
+  .tabs .tab {
+    -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
+        -ms-flex-positive: 1;
+            flex-grow: 1;
+  }
+  .tabs .tab a {
+    padding: 0 12px;
+  }
+}
+.material-tooltip {
+  padding: 0 8px;
+  border-radius: 4px;
+  color: var(--md-sys-color-inverse-on-surface);
+  background-color: var(--md-sys-color-inverse-surface);
+  font-family: var(--md-sys-typescale-body-small-font-family-name);
+  font-size: var(--md-sys-typescale-body-small-font-size);
+  line-height: var(--md-sys-typescale-body-small-line-height);
+  font-weight: var(--md-sys-typescale-body-small-font-weight);
+  min-height: 24px;
+  opacity: 0;
+  padding-top: 6px;
+  padding-bottom: 6px;
+  font-size: 12px;
+  line-height: 16px;
+  font-weight: 400;
+  letter-spacing: 0.4px;
+  position: absolute;
+  max-width: 300px;
+  overflow: hidden;
+  left: 0;
+  top: 0;
+  pointer-events: none;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+      -ms-flex-align: center;
+          align-items: center;
+  visibility: hidden;
+  z-index: 2000;
+}
+
+.backdrop {
+  position: absolute;
+  opacity: 0;
+  height: 7px;
+  width: 14px;
+  border-radius: 0 0 50% 50%;
+  background-color: var(--md-sys-color-inverse-surface);
+  z-index: -1;
+  -webkit-transform-origin: 50% 0;
+          transform-origin: 50% 0;
+  visibility: hidden;
+}
+
+.btn, .btn-small, .btn-large, .btn-floating, .btn-flat {
+  --btn-height: 40px;
+  --btn-font-size-icon: 16px;
+  --btn-padding: 24px;
+  --btn-padding-icon: 16px;
+  --btn-gap-icon: 8px;
+  --btn-border-radius: 4px;
+  --btn-font-size: 14px;
+  height: var(--btn-height);
+  border: none;
+  border-radius: var(--btn-border-radius);
+  padding-left: var(--btn-padding);
+  padding-right: var(--btn-padding);
+  font-size: var(--btn-font-size);
+  font-weight: 500;
+  text-decoration: none;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+      -ms-flex-align: center;
+          align-items: center;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  white-space: nowrap;
+  outline: 0;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  -webkit-transition: background-color 0.2s ease-out;
+  transition: background-color 0.2s ease-out;
+}
+
+.btn.icon-left, .icon-left.btn-small, .icon-left.btn-large, .btn.icon-right, .icon-right.btn-small, .icon-right.btn-large {
+  position: relative;
+}
+
+.btn.icon-left, .icon-left.btn-small, .icon-left.btn-large {
+  padding-left: calc(var(--btn-padding-icon) + var(--btn-font-size-icon) + var(--btn-gap-icon));
+}
+
+.btn.icon-right, .icon-right.btn-small, .icon-right.btn-large {
+  padding-right: calc(var(--btn-padding-icon) + var(--btn-font-size-icon) + var(--btn-gap-icon));
+}
+
+.btn.icon-left i, .icon-left.btn-small i, .icon-left.btn-large i, .btn.icon-right i, .icon-right.btn-small i, .icon-right.btn-large i {
+  position: absolute;
+  font-size: var(--btn-font-size-icon);
+}
+
+.btn.icon-left i, .icon-left.btn-small i, .icon-left.btn-large i {
+  left: var(--btn-padding-icon);
+}
+
+.btn.icon-right i, .icon-right.btn-small i, .icon-right.btn-large i {
+  right: var(--btn-padding-icon);
+}
+
+.btn.filled, .filled.btn-small, .filled.btn-large {
+  color: var(--md-sys-color-on-primary);
+  background-color: var(--md-sys-color-primary);
+}
+
+.btn.tonal, .tonal.btn-small, .tonal.btn-large {
+  color: var(--md-sys-color-on-secondary-container);
+  background-color: var(--md-sys-color-secondary-container);
+}
+
+.btn.elevated, .elevated.btn-small, .elevated.btn-large {
+  color: var(--md-sys-color-on-secondary-container);
+  background-color: var(--md-sys-color-secondary-container);
+}
+
+.btn.outlined, .outlined.btn-small, .outlined.btn-large {
+  background-color: transparent;
+  color: var(--md-sys-color-primary);
+  border: 1px solid var(--md-sys-color-outline);
+}
+
+.btn.text, .text.btn-small, .text.btn-large, .btn-flat {
+  color: var(--md-sys-color-primary);
+  background-color: transparent;
+}
+
+.btn.disabled, .btn-floating.disabled, .btn-large.disabled, .btn-small.disabled, .btn-flat.disabled,
+.btn:disabled, .btn-floating:disabled, .btn-large:disabled, .btn-small:disabled, .btn-flat:disabled,
+.btn[disabled], .btn-floating[disabled], .btn-large[disabled], .btn-small[disabled], .btn-flat[disabled] {
+  color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 76%);
+  background-color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 24%);
+  pointer-events: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+  cursor: default;
+}
+
+.btn.elevated:hover, .elevated.btn-small:hover, .elevated.btn-large:hover {
+  color: var(--md-sys-color-primary);
+  background-color: color-mix(in srgb, var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container) 16%);
+}
+
+.btn.filled:hover, .filled.btn-small:hover, .filled.btn-large:hover {
+  color: var(--md-sys-color-on-primary);
+  background-color: color-mix(in srgb, var(--md-sys-color-primary), var(--md-sys-color-on-primary) 16%);
+}
+
+.btn.tonal:hover, .tonal.btn-small:hover, .tonal.btn-large:hover {
+  color: var(--md-sys-color-on-secondary-container);
+  background-color: color-mix(in srgb, var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container) 16%);
+}
+
+.btn.outlined:hover, .outlined.btn-small:hover, .outlined.btn-large:hover {
+  color: var(--md-sys-color-primary);
+  background-color: color-mix(in srgb, transparent, var(--md-sys-color-primary) 16%);
+}
+
+.btn.text:hover, .text.btn-small:hover, .text.btn-large:hover {
+  color: var(--md-sys-color-primary);
+  background-color: color-mix(in srgb, var(--md-sys-color-primary) 16%, transparent);
+}
+
+.btn:focus, .btn-small:focus, .btn-large:focus {
+  background-color: var(--md-sys-color-primary-container);
+}
+
+.btn:focus.elevated, .btn-small:focus.elevated, .btn-large:focus.elevated {
+  color: var(--md-sys-color-primary);
+  background-color: color-mix(in srgb, var(--md-sys-color-secondary-container), var(--md-sys-color-primary) 20%);
+}
+
+.btn:focus.filled, .btn-small:focus.filled, .btn-large:focus.filled {
+  color: var(--md-sys-color-on-primary);
+  background-color: color-mix(in srgb, var(--md-sys-color-primary), var(--md-sys-color-on-primary) 20%);
+}
+
+.btn:focus.tonal, .btn-small:focus.tonal, .btn-large:focus.tonal {
+  color: var(--md-sys-color-on-secondary-container);
+  background-color: color-mix(in srgb, var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container) 20%);
+}
+
+.btn:focus.outlined, .btn-small:focus.outlined, .btn-large:focus.outlined {
+  color: var(--md-sys-color-primary);
+  background-color: color-mix(in srgb, transparent, var(--md-sys-color-primary) 20%);
+  border: 1px solid var(--md-sys-color-primary);
+}
+
+.btn:focus.text, .btn-small:focus.text, .btn-large:focus.text {
+  color: var(--md-sys-color-primary);
+  background-color: color-mix(in srgb, transparent, var(--md-sys-color-primary) 20%);
+}
+
+.btn:focus-visible.filled, .btn-small:focus-visible.filled, .btn-large:focus-visible.filled, .btn:focus-visible.elevated, .btn-small:focus-visible.elevated, .btn-large:focus-visible.elevated, .btn:focus-visible.tonal, .btn-small:focus-visible.tonal, .btn-large:focus-visible.tonal, .btn:focus-visible.outlined, .btn-small:focus-visible.outlined, .btn-large:focus-visible.outlined, .btn:focus-visible.text, .btn-small:focus-visible.text, .btn-large:focus-visible.text {
+  outline: 3px solid var(--md-sys-color-secondary);
+  outline-offset: 2px;
+}
+
+.btn-floating {
+  width: 40px;
+  height: 40px;
+  color: var(--md-sys-color-on-primary-container);
+  background-color: var(--md-sys-color-primary-container);
+  border-radius: 16px;
+  padding: 0;
+  display: grid;
+  grid-auto-flow: column;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+      -ms-flex-align: center;
+          align-items: center;
+  position: relative;
+  overflow: hidden;
+  z-index: 1;
+  -webkit-transition: background-color 0.3s;
+  transition: background-color 0.3s;
+  cursor: pointer;
+  vertical-align: middle;
+}
+.btn-floating:hover {
+  background-color: color-mix(in srgb, var(--md-sys-color-primary-container), var(--md-sys-color-on-primary-container) 16%);
+}
+.btn-floating:focus {
+  background-color: var(--md-ref-palette-secondary80);
+}
+.btn-floating:before {
+  border-radius: 0;
+}
+.btn-floating.btn-large {
+  width: 56px;
+  height: 56px;
+  padding: 0;
+}
+.btn-floating.btn-large.halfway-fab {
+  bottom: -28px;
+}
+.btn-floating.btn-small {
+  --btn-small-height: calc(0.75 * var(--btn-height));
+  width: var(--btn-small-height);
+  height: var(--btn-small-height);
+}
+.btn-floating.btn-small.halfway-fab {
+  bottom: calc(var(--btn-small-height) * -0.5);
+}
+.btn-floating.halfway-fab {
+  position: absolute;
+  right: 24px;
+  bottom: -20px;
+}
+.btn-floating.halfway-fab.left {
+  right: auto;
+  left: 24px;
+}
+.btn-floating i {
+  color: var(--md-sys-color-on-secondary);
+  font-size: 1.6rem;
+  width: inherit;
+  display: inline-block;
+  text-align: center;
+}
+
+button.btn-floating {
+  border: none;
+}
+
+.fixed-action-btn {
+  position: fixed;
+  right: 23px;
+  bottom: 23px;
+  padding-top: 15px;
+  margin-bottom: 0;
+  z-index: 997;
+}
+.fixed-action-btn.active ul {
+  visibility: visible;
+  padding-left: 0;
+  list-style-type: none;
+}
+.fixed-action-btn.direction-left, .fixed-action-btn.direction-right {
+  padding: 0 0 0 15px;
+}
+.fixed-action-btn.direction-left ul, .fixed-action-btn.direction-right ul {
+  text-align: right;
+  right: 64px;
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+          transform: translateY(-50%);
+  height: 100%;
+  left: auto;
+  /*width 100% only goes to width of button container */
+  width: 500px;
+}
+.fixed-action-btn.direction-left ul li, .fixed-action-btn.direction-right ul li {
+  display: inline-block;
+  margin: 7.5px 15px 0 0;
+}
+.fixed-action-btn.direction-right {
+  padding: 0 15px 0 0;
+}
+.fixed-action-btn.direction-right ul {
+  text-align: left;
+  direction: rtl;
+  left: 64px;
+  right: auto;
+}
+.fixed-action-btn.direction-right ul li {
+  margin: 7.5px 0 0 15px;
+}
+.fixed-action-btn.direction-bottom {
+  padding: 0 0 15px 0;
+}
+.fixed-action-btn.direction-bottom ul {
+  top: 64px;
+  bottom: auto;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: reverse;
+  -webkit-flex-direction: column-reverse;
+      -ms-flex-direction: column-reverse;
+          flex-direction: column-reverse;
+}
+.fixed-action-btn.direction-bottom ul li {
+  margin: 15px 0 0 0;
+}
+.fixed-action-btn.toolbar {
+  padding: 0;
+  height: 56px;
+}
+.fixed-action-btn.toolbar.active > a i {
+  opacity: 0;
+}
+.fixed-action-btn.toolbar ul {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  top: 0;
+  bottom: 0;
+  z-index: 1;
+}
+.fixed-action-btn.toolbar ul li {
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+  display: inline-block;
+  margin: 0;
+  height: 100%;
+  -webkit-transition: none;
+  transition: none;
+}
+.fixed-action-btn.toolbar ul li a {
+  display: block;
+  overflow: hidden;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background-color: transparent;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+  color: var(--md-sys-color-on-secondary);
+  line-height: 56px;
+  z-index: 1;
+}
+.fixed-action-btn.toolbar ul li a i {
+  line-height: inherit;
+}
+.fixed-action-btn ul {
+  left: 0;
+  right: 0;
+  text-align: center;
+  position: absolute;
+  bottom: 64px;
+  margin: 0;
+  visibility: hidden;
+}
+.fixed-action-btn ul li {
+  margin-bottom: 15px;
+}
+.fixed-action-btn ul a.btn-floating {
+  opacity: 0;
+}
+.fixed-action-btn .fab-backdrop {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+  width: 40px;
+  height: 40px;
+  background-color: var(--md-sys-color-secondary);
+  border-radius: 16px;
+  -webkit-transform: scale(0);
+          transform: scale(0);
+}
+
+.btn-large {
+  height: calc(1.5 * var(--btn-height));
+  font-size: 18px;
+  padding: 0 28px;
+}
+.btn-large i {
+  font-size: 1.6rem;
+}
+
+.btn-small {
+  height: calc(0.75 * var(--btn-height));
+  font-size: 13px;
+}
+.btn-small i {
+  font-size: 1.2rem;
+}
+
+.btn-block {
+  display: block;
+}
+
+.btn.rounded, .rounded.btn-large, .rounded.btn-small {
+  border-radius: 99999px;
+}
+
+[popover] {
+  outline: none;
+  padding: 0;
+  border: none;
+}
+
+.dropdown-content {
+  padding-left: 0;
+  list-style-type: none;
+  background-color: var(--md-sys-color-surface);
+  margin: 0;
+  display: none;
+  min-width: 100px;
+  overflow-y: auto;
+  opacity: 0;
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 9999;
+  -webkit-transform-origin: 0 0;
+          transform-origin: 0 0;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+.dropdown-content li {
+  clear: both;
+  color: var(--md-sys-color-on-background);
+  cursor: pointer;
+  min-height: 50px;
+  line-height: 1.5rem;
+  width: 100%;
+  text-align: left;
+}
+.dropdown-content li.divider {
+  min-height: 0;
+  height: 1px;
+}
+.dropdown-content li > a, .dropdown-content li > span {
+  font-size: 16px;
+  color: var(--md-sys-color-primary);
+  display: block;
+  line-height: 22px;
+  padding: 14px 16px;
+}
+.dropdown-content li > span > label {
+  top: 1px;
+  left: 0;
+  height: 18px;
+}
+.dropdown-content li > a > i {
+  height: inherit;
+  line-height: inherit;
+  float: left;
+  margin: 0 24px 0 0;
+  width: 24px;
+}
+.dropdown-content li:not(.disabled):hover, .dropdown-content li.active {
+  background-color: color-mix(in srgb, var(--md-sys-color-surface), var(--md-sys-color-on-surface) 8%);
+}
+
+body.keyboard-focused .dropdown-content li:focus {
+  background-color: rgba(0, 0, 0, 0.12);
+}
+
+.input-field.col .dropdown-content [type=checkbox] + label {
+  top: 1px;
+  left: 0;
+  height: 18px;
+  -webkit-transform: none;
+          transform: none;
+}
+
+.dropdown-trigger {
+  cursor: pointer;
+}
+
+.modal {
+  --modal-footer-divider-height: 1px;
+  --modal-border-radius: 28px;
+  --modal-padding: 24px;
+  --modal-padding-bottom: 16px;
+  border: none;
+  outline: none;
+  padding: 0;
+  max-height: 70%;
+  width: 55%;
+  border-radius: var(--modal-border-radius);
+  will-change: top, opacity;
+  background-color: color-mix(in srgb, var(--md-sys-color-surface), var(--md-sys-color-surface-tint) 17%);
+}
+.modal[open] {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: column;
+      -ms-flex-direction: column;
+          flex-direction: column;
+}
+@media only screen and (max-width : 992.99px) {
+  .modal {
+    width: 80%;
+  }
+}
+.modal::-webkit-backdrop {
+  -webkit-backdrop-filter: blur(1px);
+          backdrop-filter: blur(1px);
+}
+.modal::backdrop {
+  -webkit-backdrop-filter: blur(1px);
+          backdrop-filter: blur(1px);
+}
+.modal .modal-header {
+  padding: var(--modal-padding);
+  padding-bottom: var(--modal-padding-bottom);
+  -webkit-flex-shrink: 0;
+      -ms-flex-negative: 0;
+          flex-shrink: 0;
+}
+.modal .modal-content {
+  padding: 0 var(--modal-padding);
+  overflow-y: auto;
+}
+.modal .modal-footer {
+  border-radius: 0 0 var(--modal-border-radius) var(--modal-border-radius);
+  padding: var(--modal-padding);
+  text-align: right;
+  -webkit-flex-shrink: 0;
+      -ms-flex-negative: 0;
+          flex-shrink: 0;
+}
+.modal .modal-close {
+  cursor: pointer;
+}
+.modal h1, .modal h2, .modal h3, .modal h4, .modal h5, .modal h6 {
+  margin: 0;
+}
+
+.modal.bottom-sheet {
+  margin-bottom: 0;
+  max-height: 45%;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  will-change: bottom, opacity;
+}
+
+.collapsible {
+  padding-left: 0;
+  list-style-type: none;
+  border-top: 1px solid var(--md-sys-color-outline-variant);
+  border-right: 1px solid var(--md-sys-color-outline-variant);
+  border-left: 1px solid var(--md-sys-color-outline-variant);
+  margin: 0.5rem 0 1rem 0;
+}
+
+.collapsible-header {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  line-height: 1.5;
+  padding: 1rem;
+  border-bottom: 1px solid var(--md-sys-color-outline-variant);
+}
+.collapsible-header:focus {
+  outline: 0;
+}
+.collapsible-header i {
+  width: 2rem;
+  font-size: 1.6rem;
+  display: inline-block;
+  text-align: center;
+  margin-right: 1rem;
+}
+
+.collapsible-header::after {
+  content: "\e5cf";
+  margin-left: 0.5rem;
+  font-family: "Material Symbols Outlined", "Material Symbols Rounded", "Material Symbols Sharp", "Material Icons";
+  font-size: 25px;
+  line-height: 0.9;
+  -webkit-font-smoothing: antialiased;
+}
+
+.active .collapsible-header::after {
+  content: "\e5ce";
+}
+
+.keyboard-focused .collapsible-header:focus {
+  background-color: rgba(0, 0, 0, 0.12);
+}
+
+.collapsible-header-content {
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+      -ms-flex-positive: 1;
+          flex-grow: 1;
+}
+
+.collapsible-body {
+  max-height: 0;
+  border-bottom: 1px solid var(--md-sys-color-outline-variant);
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  padding: 0 2rem;
+  overflow: hidden;
+}
+
+.collapsible.popout {
+  border: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
+.collapsible.popout > li {
+  -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
+          box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
+  margin: 0 24px;
+  -webkit-transition: margin 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  transition: margin 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+.collapsible.popout > li.active {
+  -webkit-box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
+          box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
+  margin: 16px 0;
+}
+
+.chip {
+  --font-size: 14px;
+  --font-size-icon: 18px;
+  --padding: 8px;
+  color: var(--md-sys-color-on-surface-variant);
+  background-color: rgba(0, 0, 0, 0.09);
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  white-space: nowrap;
+  gap: 8px;
+  margin: 0;
+  height: 32px;
+  padding-left: var(--padding);
+  padding-right: var(--padding);
+  font-size: var(--font-size);
+  font-weight: 500;
+  border-radius: 8px;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  vertical-align: top;
+}
+.chip:focus {
+  outline: none;
+  background-color: var(--md-sys-color-primary);
+  color: var(--md-sys-color-on-primary);
+}
+
+.chip.outlined {
+  background-color: transparent;
+  border-color: var(--md-sys-color-outline);
+  border-width: 1px;
+  border-style: solid;
+}
+
+.chip > img {
+  margin: 0;
+  width: 24px;
+  height: 24px;
+  -o-object-fit: cover;
+     object-fit: cover;
+  border-radius: 12px;
+}
+
+.chip > .material-icons {
+  font-size: var(--font-size-icon);
+}
+
+.chip .close {
+  border-radius: 50%;
+  height: 24px;
+  width: 24px;
+  padding: 0;
+  display: grid;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-align-content: center;
+      -ms-flex-line-pack: center;
+          align-content: center;
+  cursor: pointer;
+}
+
+.chip .close:hover {
+  background-color: rgba(136, 136, 136, 0.5333333333);
+}
+
+.chips {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 4px;
+  -webkit-flex-wrap: wrap;
+      -ms-flex-wrap: wrap;
+          flex-wrap: wrap;
+  border: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+  margin: 0 0 8px 0;
+  padding: 4px;
+  outline: none;
+  -webkit-transition: all 0.3s;
+  transition: all 0.3s;
+}
+.chips.focus {
+  border-bottom: 1px solid var(--md-sys-color-primary);
+  -webkit-box-shadow: 0 1px 0 0 var(--md-sys-color-primary);
+          box-shadow: 0 1px 0 0 var(--md-sys-color-primary);
+}
+.chips.input-field {
+  border-bottom: 1px solid var(--md-sys-color-on-surface-variant);
+}
+.chips.input-field:hover {
+  cursor: text;
+}
+.chips input:not([type]):not(.browser-default).input {
+  background: none;
+  border: 0;
+  color: var(--md-sys-color-on-background);
+  display: inline-block;
+  font-size: 16px;
+  height: 32px;
+  outline: 0;
+  margin: 0;
+  padding: 0;
+  width: 120px;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+  min-width: 100px;
+  max-width: 200px;
+}
+.chips input:not([type]):not(.browser-default).input:focus {
+  border: 0;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
+.chips .autocomplete-content {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.prefix ~ .chips {
+  margin-left: 3rem;
+  width: 92%;
+  width: calc(100% - 3rem);
+}
+
+.suffix ~ .chips {
+  margin-right: 3rem;
+  width: 92%;
+  width: calc(100% - 3rem);
+}
+
+.chips:empty ~ label {
+  font-size: 0.8rem;
+  -webkit-transform: translateY(-140%);
+          transform: translateY(-140%);
+}
+
+.materialboxed {
+  display: block;
+  cursor: -webkit-zoom-in;
+  cursor: zoom-in;
+  position: relative;
+  -webkit-transition: opacity 0.4s;
+  transition: opacity 0.4s;
+  -webkit-backface-visibility: hidden;
+}
+.materialboxed:hover:not(.active) {
+  opacity: 0.8;
+}
+.materialboxed.active {
+  cursor: -webkit-zoom-out;
+  cursor: zoom-out;
+}
+
+#materialbox-overlay {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-color: var(--md-sys-color-background);
+  z-index: 1000;
+  will-change: opacity;
+}
+
+.materialbox-caption {
+  position: fixed;
+  display: none;
+  color: var(--md-sys-color-on-background);
+  line-height: 50px;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  text-align: center;
+  padding: 0% 15%;
+  height: 50px;
+  z-index: 1000;
+  -webkit-font-smoothing: antialiased;
+}
+
+select:focus {
+  outline: 1px solid var(--md-ref-palette-primary80);
+}
+
+/*
+button:focus {
+  outline: none;
+  background-color: $button-background-focus;
+}
+*/
+label {
+  font-size: 0.8rem;
+  color: var(--md-sys-color-on-surface-variant);
+}
+
+/* Style Placeholders */
+::-webkit-input-placeholder {
+  color: var(--md-sys-color-on-surface-variant);
+}
+::-moz-placeholder {
+  color: var(--md-sys-color-on-surface-variant);
+}
+:-ms-input-placeholder {
+  color: var(--md-sys-color-on-surface-variant);
+}
+::-ms-input-placeholder {
+  color: var(--md-sys-color-on-surface-variant);
+}
+::placeholder {
+  color: var(--md-sys-color-on-surface-variant);
+}
+
+/* Text inputs */
+input:not([type]):not(.browser-default),
+input[type=text]:not(.browser-default),
+input[type=password]:not(.browser-default),
+input[type=email]:not(.browser-default),
+input[type=url]:not(.browser-default),
+input[type=time]:not(.browser-default),
+input[type=date]:not(.browser-default),
+input[type=datetime]:not(.browser-default),
+input[type=datetime-local]:not(.browser-default),
+input[type=month]:not(.browser-default),
+input[type=tel]:not(.browser-default),
+input[type=number]:not(.browser-default),
+input[type=search]:not(.browser-default),
+textarea.materialize-textarea {
+  outline: none;
+  color: var(--md-sys-color-on-background);
+  width: 100%;
+  font-size: 16px;
+  height: 56px;
+}
+
+.input-field input.invalid, .input-field textarea.invalid {
+  border-bottom: 2px solid var(--md-sys-color-error);
+  -webkit-box-shadow: 0 1px 0 0 var(--md-sys-color-error);
+          box-shadow: 0 1px 0 0 var(--md-sys-color-error);
+}
+
+.input-field input.invalid ~ .supporting-text[data-error] > span, .input-field textarea.invalid ~ .supporting-text[data-error] > span {
+  display: none;
+}
+
+.input-field input.invalid ~ .supporting-text:after, .input-field textarea.invalid ~ .supporting-text:after {
+  content: attr(data-error);
+  color: var(--md-sys-color-error);
+}
+
+.input-field {
+  --input-color: var(--md-sys-color-primary);
+  position: relative;
+  clear: both;
+}
+.input-field input, .input-field textarea {
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box; /* https://stackoverflow.com/questions/1377719/padding-within-inputs-breaks-width-100*/
+  padding: 0 16px;
+  padding-top: 20px;
+  background-color: var(--md-sys-color-surface);
+  border: none;
+  border-radius: 4px;
+  border-bottom: 1px solid var(--md-sys-color-on-surface-variant);
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.input-field input:focus:not([readonly]), .input-field textarea:focus:not([readonly]) {
+  border-bottom: 2px solid var(--input-color);
+  padding-top: 21px;
+}
+.input-field input:disabled, .input-field input[readonly=readonly], .input-field textarea:disabled, .input-field textarea[readonly=readonly] {
+  color: rgba(var(--md_sys_color_on-surface), 0.38);
+  border-color: rgba(var(--md_sys_color_on-surface), 0.12);
+  background-color: rgba(var(--md_sys_color_on-surface), 0.04);
+}
+.input-field input:focus:not([readonly]) + label, .input-field textarea:focus:not([readonly]) + label {
+  color: var(--input-color);
+}
+.input-field input:not(:-moz-placeholder-shown) + label, .input-field textarea:not(:-moz-placeholder-shown) + label {
+  transform: scale(0.75);
+  top: 8px;
+}
+.input-field input:not(:-ms-input-placeholder) + label, .input-field textarea:not(:-ms-input-placeholder) + label {
+  transform: scale(0.75);
+  top: 8px;
+}
+.input-field input:focus:not([readonly]) + label, .input-field input:not([placeholder=" "]) + label, .input-field input:not(:placeholder-shown) + label, .input-field textarea:focus:not([readonly]) + label, .input-field textarea:not([placeholder=" "]) + label, .input-field textarea:not(:placeholder-shown) + label {
+  -webkit-transform: scale(0.75);
+          transform: scale(0.75);
+  top: 8px;
+}
+.input-field input:disabled + label, .input-field input[readonly=readonly] + label, .input-field textarea:disabled + label, .input-field textarea[readonly=readonly] + label {
+  color: rgba(var(--md_sys_color_on-surface), 0.38);
+}
+.input-field input.invalid ~ label, .input-field input:focus.invalid ~ label, .input-field textarea.invalid ~ label, .input-field textarea:focus.invalid ~ label {
+  color: var(--md-sys-color-error);
+}
+.input-field input::-webkit-input-placeholder {
+  -webkit-user-select: none;
+          user-select: none;
+}
+.input-field input::-moz-placeholder {
+  -moz-user-select: none;
+       user-select: none;
+}
+.input-field input:-ms-input-placeholder {
+  -ms-user-select: none;
+      user-select: none;
+}
+.input-field input::-ms-input-placeholder {
+  -ms-user-select: none;
+      user-select: none;
+}
+.input-field input::placeholder {
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+.input-field > label {
+  color: var(--md-sys-color-on-surface-variant);
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  font-size: 16px;
+  position: absolute;
+  left: 16px;
+  top: 16px;
+  cursor: text;
+  -webkit-transform-origin: top left;
+          transform-origin: top left;
+  -webkit-transition: left 0.2s ease-out, top 0.2s ease-out, -webkit-transform 0.2s ease-out;
+  transition: left 0.2s ease-out, top 0.2s ease-out, -webkit-transform 0.2s ease-out;
+  transition: left 0.2s ease-out, top 0.2s ease-out, transform 0.2s ease-out;
+  transition: left 0.2s ease-out, top 0.2s ease-out, transform 0.2s ease-out, -webkit-transform 0.2s ease-out;
+}
+.input-field .supporting-text {
+  color: var(--md-sys-color-on-surface-variant);
+  font-size: 12px;
+  padding: 0 16px;
+  margin-top: 4px;
+}
+.input-field .character-counter {
+  color: var(--md-sys-color-on-surface-variant);
+  font-size: 12px;
+  float: right;
+  padding: 0 16px;
+  margin-top: 4px;
+}
+.input-field .prefix {
+  position: absolute;
+  left: 12px;
+  top: 16px;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-self: center;
+      -ms-flex-item-align: center;
+          align-self: center;
+}
+.input-field .suffix {
+  position: absolute;
+  right: 12px;
+  top: 16px;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+.input-field .prefix ~ input, .input-field .prefix ~ textarea {
+  padding-left: 52px;
+}
+.input-field .suffix ~ input, .input-field .suffix ~ textarea {
+  padding-right: 52px;
+}
+.input-field .prefix ~ label {
+  left: 52px;
+}
+.input-field.outlined input, .input-field.outlined textarea {
+  padding-top: 0;
+  background-color: var(--md-sys-color-background);
+  border: 1px solid var(--md-sys-color-on-surface-variant);
+  border-radius: 4px;
+}
+.input-field.outlined input:focus:not([readonly]), .input-field.outlined textarea:focus:not([readonly]) {
+  border: 2px solid var(--input-color);
+  padding-top: 0;
+  margin-left: -1px;
+}
+.input-field.outlined input:focus:not([readonly]) + label, .input-field.outlined textarea:focus:not([readonly]) + label {
+  color: var(--input-color);
+}
+.input-field.outlined input:not(:-moz-placeholder-shown) + label, .input-field.outlined textarea:not(:-moz-placeholder-shown) + label {
+  top: -8px;
+  left: 16px;
+  margin-left: -4px;
+  padding: 0 4px;
+  background-color: var(--md-sys-color-background);
+}
+.input-field.outlined input:not(:-ms-input-placeholder) + label, .input-field.outlined textarea:not(:-ms-input-placeholder) + label {
+  top: -8px;
+  left: 16px;
+  margin-left: -4px;
+  padding: 0 4px;
+  background-color: var(--md-sys-color-background);
+}
+.input-field.outlined input:focus:not([readonly]) + label, .input-field.outlined input:not([placeholder=" "]) + label, .input-field.outlined input:not(:placeholder-shown) + label, .input-field.outlined textarea:focus:not([readonly]) + label, .input-field.outlined textarea:not([placeholder=" "]) + label, .input-field.outlined textarea:not(:placeholder-shown) + label {
+  top: -8px;
+  left: 16px;
+  margin-left: -4px;
+  padding: 0 4px;
+  background-color: var(--md-sys-color-background);
+}
+.input-field.outlined input:disabled, .input-field.outlined input[readonly=readonly], .input-field.outlined textarea:disabled, .input-field.outlined textarea[readonly=readonly] {
+  color: rgba(var(--md_sys_color_on-surface), 0.38);
+  border-color: rgba(var(--md_sys_color_on-surface), 0.12);
+}
+.input-field.error input, .input-field.error textarea {
+  border-color: var(--md-sys-color-error);
+}
+.input-field.error input:focus:not([readonly]), .input-field.error textarea:focus:not([readonly]) {
+  border-color: var(--md-sys-color-error);
+}
+.input-field.error input:focus:not([readonly]) + label, .input-field.error textarea:focus:not([readonly]) + label {
+  color: var(--md-sys-color-error);
+}
+.input-field.error label {
+  color: var(--md-sys-color-error);
+}
+.input-field.error .supporting-text {
+  color: var(--md-sys-color-error);
+}
+.input-field.error .suffix {
+  color: var(--md-sys-color-error);
+}
+
+/* Search Field */
+.searchbar .prefix {
+  position: absolute;
+  padding-left: 1rem;
+  top: 0;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-self: center;
+      -ms-flex-item-align: center;
+          align-self: center;
+}
+.searchbar > input {
+  border-width: 0;
+  background-color: transparent;
+  padding-left: 3rem;
+}
+
+.searchbar.has-sidebar {
+  margin-left: 0;
+}
+@media only screen and (min-width : 993px) {
+  .searchbar.has-sidebar {
+    margin-left: 300px;
+  }
+}
+
+/*
+.input-field input[type=search] {
+  display: block;
+  line-height: inherit;
+
+  .nav-wrapper & {
+    height: inherit;
+    padding-left: 4rem;
+    width: calc(100% - 4rem);
+    border: 0;
+    box-shadow: none;
+  }
+  &:focus:not(.browser-default) {
+    border: 0;
+    box-shadow: none;
+  }
+  & + .label-icon {
+    transform: none;
+    left: 1rem;
+  }
+}
+*/
+/* Textarea */
+textarea {
+  width: 100%;
+  height: 3rem;
+  background-color: transparent;
+}
+textarea.materialize-textarea {
+  padding-top: 26px !important;
+  padding-bottom: 4px !important;
+  line-height: normal;
+  overflow-y: hidden; /* prevents scroll bar flash */
+  resize: none;
+  min-height: 3rem;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+}
+
+.hiddendiv {
+  visibility: hidden;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  overflow-wrap: break-word; /* future version of deprecated 'word-wrap' */
+  padding-top: 1.2rem; /* prevents text jump on Enter keypress */
+  position: absolute;
+  top: 0;
+  z-index: -1;
+}
+
+/* Autocomplete Items */
+.autocomplete-content li .highlight {
+  color: var(--md-sys-color-on-background);
+}
+.autocomplete-content li img {
+  height: 40px;
+  width: 40px;
+  margin: 5px 15px;
+}
+
+/* Datepicker date input fields */
+.datepicker-date-input {
+  position: relative;
+  text-indent: -9999px;
+}
+.datepicker-date-input::after {
+  display: block;
+  position: absolute;
+  top: 1.1rem;
+  content: attr(data-date);
+  color: var(--input-color);
+  text-indent: 0;
+}
+.datepicker-date-input:focus-visible {
+  text-indent: 0;
+}
+.datepicker-date-input:focus-visible:after {
+  text-indent: -9999px;
+}
+
+[type=radio]:not(:checked),
+[type=radio]:checked {
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+}
+
+[type=radio]:not(:checked) + span,
+[type=radio]:checked + span {
+  position: relative;
+  padding-left: 35px;
+  cursor: pointer;
+  display: inline-block;
+  height: 25px;
+  line-height: 25px;
+  font-size: 1rem;
+  -webkit-transition: 0.28s ease;
+  transition: 0.28s ease;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+
+[type=radio] + span:before,
+[type=radio] + span:after {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  margin: 4px;
+  width: 16px;
+  height: 16px;
+  z-index: 0;
+  -webkit-transition: 0.28s ease;
+  transition: 0.28s ease;
+}
+
+/* Unchecked styles */
+[type=radio]:not(:checked) + span:before,
+[type=radio]:not(:checked) + span:after,
+[type=radio]:checked + span:before,
+[type=radio]:checked + span:after,
+[type=radio].with-gap:checked + span:before,
+[type=radio].with-gap:checked + span:after {
+  border-radius: 50%;
+}
+
+[type=radio]:not(:checked) + span:before,
+[type=radio]:not(:checked) + span:after {
+  border: 2px solid var(--md-sys-color-on-surface-variant);
+}
+
+[type=radio]:not(:checked) + span:after {
+  -webkit-transform: scale(0);
+          transform: scale(0);
+}
+
+/* Checked styles */
+[type=radio]:checked + span:before {
+  border: 2px solid transparent;
+}
+
+[type=radio]:checked + span:after,
+[type=radio].with-gap:checked + span:before,
+[type=radio].with-gap:checked + span:after {
+  border: 2px solid var(--md-sys-color-primary);
+}
+
+[type=radio]:checked + span:after,
+[type=radio].with-gap:checked + span:after {
+  background-color: var(--md-sys-color-primary);
+}
+
+[type=radio]:checked + span:after {
+  -webkit-transform: scale(1.02);
+          transform: scale(1.02);
+}
+
+/* Radio With gap */
+[type=radio].with-gap:checked + span:after {
+  -webkit-transform: scale(0.5);
+          transform: scale(0.5);
+}
+
+/* Focused styles */
+[type=radio].tabbed:focus + span:before {
+  -webkit-box-shadow: 0 0 0 10px rgba(var(--md-sys-color-primary-numeric), 0.18);
+          box-shadow: 0 0 0 10px rgba(var(--md-sys-color-primary-numeric), 0.18);
+}
+
+/* Disabled Radio With gap */
+[type=radio].with-gap:disabled:checked + span:before {
+  border: 2px solid var(--md-sys-color-on-surface);
+}
+
+[type=radio].with-gap:disabled:checked + span:after {
+  border: none;
+  background-color: var(--md-sys-color-on-surface);
+}
+
+/* Disabled style */
+[type=radio]:disabled:not(:checked) + span:before,
+[type=radio]:disabled:checked + span:before {
+  background-color: transparent;
+  border-color: var(--md-sys-color-on-surface);
+}
+
+[type=radio]:disabled + span {
+  color: var(--md-sys-color-on-surface);
+}
+
+[type=radio]:disabled:not(:checked) + span:before {
+  border-color: var(--md-sys-color-on-surface);
+}
+
+[type=radio]:disabled:checked + span:after {
+  background-color: var(--md-sys-color-on-surface);
+  border-color: var(--md-sys-color-on-surface);
+}
+
+/* Checkboxes
+   ========================================================================== */
+/* Remove default checkbox */
+[type=checkbox]:not(:checked),
+[type=checkbox]:checked {
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+}
+
+[type=checkbox] {
+  /* checkbox aspect */
+}
+[type=checkbox] + span:not(.lever) {
+  position: relative;
+  padding-left: 35px;
+  cursor: pointer;
+  display: inline-block;
+  height: 25px;
+  line-height: 25px;
+  font-size: 1rem;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+[type=checkbox] + span:not(.lever):before, [type=checkbox]:not(.filled-in) + span:not(.lever):after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 18px;
+  height: 18px;
+  z-index: 0;
+  border: 2px solid var(--md-sys-color-on-surface-variant);
+  border-radius: 1px;
+  margin-top: 3px;
+  -webkit-transition: 0.2s;
+  transition: 0.2s;
+}
+[type=checkbox]:not(.filled-in) + span:not(.lever):after {
+  border: 0;
+  -webkit-transform: scale(0);
+          transform: scale(0);
+}
+[type=checkbox]:not(:checked):disabled + span:not(.lever):before {
+  border: none;
+  background-color: var(--md-sys-color-on-surface);
+}
+[type=checkbox].tabbed:focus + span:not(.lever):after {
+  -webkit-transform: scale(1);
+          transform: scale(1);
+  border: 0;
+  border-radius: 50%;
+  -webkit-box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.12);
+          box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.12);
+  background-color: rgba(0, 0, 0, 0.12);
+}
+
+[type=checkbox]:checked + span:not(.lever):before {
+  top: -4px;
+  left: -5px;
+  width: 12px;
+  height: 22px;
+  border-top: 2px solid transparent;
+  border-left: 2px solid transparent;
+  border-right: 2px solid var(--md-sys-color-primary);
+  border-bottom: 2px solid var(--md-sys-color-primary);
+  -webkit-transform: rotate(40deg);
+          transform: rotate(40deg);
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
+  -webkit-transform-origin: 100% 100%;
+          transform-origin: 100% 100%;
+}
+[type=checkbox]:checked:disabled + span:before {
+  border-right: 2px solid var(--md-sys-color-on-surface);
+  border-bottom: 2px solid var(--md-sys-color-on-surface);
+}
+
+/* Indeterminate checkbox */
+[type=checkbox]:indeterminate + span:not(.lever):before {
+  top: -11px;
+  left: -12px;
+  width: 10px;
+  height: 22px;
+  border-top: none;
+  border-left: none;
+  border-right: 2px solid var(--md-sys-color-primary);
+  border-bottom: none;
+  -webkit-transform: rotate(90deg);
+          transform: rotate(90deg);
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
+  -webkit-transform-origin: 100% 100%;
+          transform-origin: 100% 100%;
+}
+[type=checkbox]:indeterminate:disabled + span:not(.lever):before {
+  border-right: 2px solid var(--md-sys-color-on-surface);
+  background-color: transparent;
+}
+
+[type=checkbox].filled-in + span:not(.lever):after {
+  border-radius: 2px;
+}
+[type=checkbox].filled-in + span:not(.lever):before,
+[type=checkbox].filled-in + span:not(.lever):after {
+  content: "";
+  left: 0;
+  position: absolute;
+  /* .1s delay is for check animation */
+  -webkit-transition: border 0.25s, background-color 0.25s, width 0.2s 0.1s, height 0.2s 0.1s, top 0.2s 0.1s, left 0.2s 0.1s;
+  transition: border 0.25s, background-color 0.25s, width 0.2s 0.1s, height 0.2s 0.1s, top 0.2s 0.1s, left 0.2s 0.1s;
+  z-index: 1;
+}
+[type=checkbox].filled-in:not(:checked) + span:not(.lever):before {
+  width: 0;
+  height: 0;
+  border: 3px solid transparent;
+  left: 6px;
+  top: 10px;
+  -webkit-transform: rotateZ(37deg);
+          transform: rotateZ(37deg);
+  -webkit-transform-origin: 100% 100%;
+          transform-origin: 100% 100%;
+}
+[type=checkbox].filled-in:not(:checked) + span:not(.lever):after {
+  height: 20px;
+  width: 20px;
+  background-color: transparent;
+  border: 2px solid var(--md-sys-color-on-surface-variant);
+  top: 0px;
+  z-index: 0;
+}
+[type=checkbox].filled-in:checked + span:not(.lever):before {
+  top: 0;
+  left: 1px;
+  width: 8px;
+  height: 13px;
+  border-top: 2px solid transparent;
+  border-left: 2px solid transparent;
+  border-right: 2px solid var(--md-sys-color-on-primary);
+  border-bottom: 2px solid var(--md-sys-color-on-primary);
+  -webkit-transform: rotateZ(37deg);
+          transform: rotateZ(37deg);
+  -webkit-transform-origin: 100% 100%;
+          transform-origin: 100% 100%;
+}
+[type=checkbox].filled-in:checked + span:not(.lever):after {
+  top: 0;
+  width: 20px;
+  height: 20px;
+  border: 2px solid var(--md-sys-color-primary);
+  background-color: var(--md-sys-color-primary);
+  z-index: 0;
+}
+[type=checkbox].filled-in.tabbed:focus + span:not(.lever):after {
+  border-radius: 2px;
+  border-color: var(--md-sys-color-on-surface-variant) r;
+  background-color: rgba(0, 0, 0, 0.12);
+}
+[type=checkbox].filled-in.tabbed:checked:focus + span:not(.lever):after {
+  border-radius: 2px;
+  background-color: var(--md-sys-color-primary);
+  border-color: var(--md-sys-color-primary);
+}
+[type=checkbox].filled-in:disabled:not(:checked) + span:not(.lever):before {
+  background-color: transparent;
+  border: 2px solid transparent;
+}
+[type=checkbox].filled-in:disabled:not(:checked) + span:not(.lever):after {
+  border-color: transparent;
+  background-color: var(--md-sys-color-on-surface);
+}
+[type=checkbox].filled-in:disabled:checked + span:not(.lever):before {
+  background-color: transparent;
+}
+[type=checkbox].filled-in:disabled:checked + span:not(.lever):after {
+  background-color: var(--md-sys-color-on-surface);
+  border-color: var(--md-sys-color-on-surface);
+}
+
+.switch {
+  --track-height: 32px;
+  --track-width: 52px;
+  --border-width: 2px;
+  --size-off: 16px;
+  --size-on: 24px;
+  --icon-size: 16px;
+  --gap-on: calc(((var(--track-height) - var(--size-on)) / 2) - var(--border-width));
+  --gap-off: calc(((var(--track-height) - var(--size-off)) / 2) - var(--border-width));
+}
+
+.switch,
+.switch * {
+  -webkit-tap-highlight-color: transparent;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+
+.switch label {
+  cursor: pointer;
+}
+
+.switch label input[type=checkbox] {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+.switch label input[type=checkbox]:checked + .lever {
+  background-color: var(--md-sys-color-primary);
+  border-color: var(--md-sys-color-primary);
+}
+.switch label input[type=checkbox]:checked + .lever:before, .switch label input[type=checkbox]:checked + .lever:after {
+  top: var(--gap-on);
+  left: calc(var(--track-width) - var(--size-on) - var(--gap-on) - 2 * var(--border-width));
+  width: var(--size-on);
+  height: var(--size-on);
+}
+.switch label .lever {
+  content: "";
+  display: inline-block;
+  position: relative;
+  width: var(--track-width);
+  height: var(--track-height);
+  border-style: solid;
+  border-width: 2px;
+  border-color: var(--md-sys-color-outline);
+  background-color: var(--md-sys-color-surface-variant);
+  border-radius: 15px;
+  margin-right: 10px;
+  -webkit-transition: background 0.3s ease;
+  transition: background 0.3s ease;
+  vertical-align: middle;
+  margin: 0 16px;
+}
+.switch label .lever:before, .switch label .lever:after {
+  content: "";
+  position: absolute;
+  display: inline-block;
+  width: var(--size-off);
+  height: var(--size-off);
+  border-radius: 50%;
+  left: var(--gap-off);
+  top: var(--gap-off);
+  -webkit-transition: left 0.3s ease, background 0.3s ease, -webkit-box-shadow 0.1s ease, -webkit-transform 0.1s ease;
+  transition: left 0.3s ease, background 0.3s ease, -webkit-box-shadow 0.1s ease, -webkit-transform 0.1s ease;
+  transition: left 0.3s ease, background 0.3s ease, box-shadow 0.1s ease, transform 0.1s ease;
+  transition: left 0.3s ease, background 0.3s ease, box-shadow 0.1s ease, transform 0.1s ease, -webkit-box-shadow 0.1s ease, -webkit-transform 0.1s ease;
+}
+.switch label .lever:after {
+  height: var(--size-off);
+  width: var(--size-off);
+}
+
+input[type=checkbox]:not(:disabled) ~ .lever:active:before,
+input[type=checkbox]:not(:disabled).tabbed:focus ~ .lever::before,
+input[type=checkbox]:not(:disabled) ~ .lever:hover::before {
+  -webkit-transform: scale(2.4);
+          transform: scale(2.4);
+}
+
+input[type=checkbox]:checked:not(:disabled) ~ .lever:hover::before {
+  background-color: rgba(var(--md-sys-color-primary-numeric), 0.06);
+}
+
+input[type=checkbox]:checked:not(:disabled) ~ .lever:active::before,
+input[type=checkbox]:checked:not(:disabled).tabbed:focus ~ .lever::before {
+  background-color: rgba(var(--md-sys-color-primary-numeric), 0.18);
+}
+
+input[type=checkbox]:not(:disabled) ~ .lever:hover::before {
+  background-color: rgba(0, 0, 0, 0.04);
+}
+
+input[type=checkbox]:not(:disabled) ~ .lever:active:before,
+input[type=checkbox]:not(:disabled).tabbed:focus ~ .lever::before {
+  background-color: rgba(0, 0, 0, 0.12);
+}
+
+.switch input[type=checkbox][disabled] + .lever {
+  cursor: default;
+  opacity: 0.5;
+}
+
+select.browser-default {
+  opacity: 1;
+  color: var(--md-sys-color-on-background);
+}
+
+select {
+  opacity: 0;
+  background-color: var(--md-sys-color-surface);
+  width: 100%;
+  padding: 5px;
+  border: 1px solid var(--md-sys-color-outline-variant);
+  border-radius: 2px;
+  height: 3rem;
+}
+
+.select-wrapper {
+  /*
+  &.valid .helper-text[data-success],
+  &.invalid ~ .helper-text[data-error] {
+    @extend %hidden-text;
+  }
+
+  &.valid {
+    & > input.select-dropdown {
+      @extend %valid-input-style;
+    }
+    & ~ .helper-text:after {
+      //@extend %custom-success-message;
+    }
+  }
+
+  &.invalid {
+    & > input.select-dropdown,
+    & > input.select-dropdown:focus {
+      @extend %invalid-input-style;
+    }
+    & ~ .helper-text:after {
+      //@extend %custom-error-message;
+    }
+  }
+
+  &.valid + label,
+  &.invalid + label {
+    width: 100%;
+    pointer-events: none;
+  }
+  & + label:after {
+    //@extend %input-after-style;
+  }
+  */
+  position: relative;
+  /*
+  input.select-dropdown {    
+    &:focus {
+      border-bottom: 1px solid var(--md-sys-color-primary);
+    }
+    position: relative;
+    cursor: pointer;
+    background-color: transparent;
+    border: none;
+    border-bottom: 2px solid var(--md-sys-color-on-surface-variant);
+    outline: none;
+    height: 3rem;
+    line-height: 3rem;
+    width: 100%;
+    font-size: 16px;
+    margin: 0 0 8px 0;
+    padding: 0;
+    display: block;
+    user-select:none;
+    z-index: 1;
+    color: var(--md-sys-color-on-background);
+  }
+  */
+}
+.select-wrapper .caret {
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  margin: auto 0;
+  z-index: 0;
+  fill: var(--md-sys-color-on-background);
+}
+.select-wrapper .hide-select {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  top: 0;
+  z-index: -1;
+}
+
+select:disabled {
+  color: var(--md-sys-color-on-surface);
+}
+
+.select-wrapper.disabled + label {
+  color: var(--md-sys-color-on-surface);
+}
+.select-wrapper.disabled .caret {
+  fill: var(--md-sys-color-on-surface);
+}
+
+.select-wrapper input.select-dropdown:disabled {
+  color: var(--md-sys-color-on-surface);
+  cursor: default;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+
+.select-wrapper i {
+  color: var(--md-sys-color-on-surface);
+}
+
+.select-dropdown li.disabled,
+.select-dropdown li.disabled > span,
+.select-dropdown li.optgroup {
+  color: var(--md-sys-color-on-surface);
+}
+
+/*
+body.keyboard-focused {
+  .select-dropdown.dropdown-content li:focus {
+    //background-color: $select-option-focus;
+  }
+}
+
+.select-dropdown.dropdown-content {
+  li {
+    &:hover:not(.disabled) {
+      //background-color: $select-option-hover;
+    }
+
+    &.selected:not(.disabled) {
+      //background-color: $select-option-selected;
+    }
+  }
+}
+*/
+/*
+// Prefix Icons
+.prefix ~ .select-wrapper {
+  margin-left: 3rem;
+  width: 92%;
+  width: calc(100% - 3rem);
+}
+.prefix ~ label { margin-left: 3rem; }
+// Suffix Icons
+.suffix ~ .select-wrapper {
+  margin-right: 3rem;
+  width: 92%;
+  width: calc(100% - 3rem);
+}
+.suffix ~ label { margin-right: 3rem; }
+*/
+.select-dropdown li img {
+  height: 40px;
+  width: 40px;
+  margin: 5px 15px;
+  float: right;
+}
+
+.select-dropdown li.optgroup {
+  border-top: 1px solid rgba(0, 0, 0, 0.04);
+}
+.select-dropdown li.optgroup.selected > span {
+  color: var(--md-sys-color-on-background);
+}
+.select-dropdown li.optgroup > span {
+  color: var(--md-sys-color-on-surface-variant);
+}
+.select-dropdown li.optgroup ~ li.optgroup-option {
+  padding-left: 1rem;
+}
+
+/*
+.select-dropdown .selected {
+  color: red;
+}
+*/
+.file-field {
+  display: grid;
+  grid-template-columns: -webkit-min-content auto;
+  grid-template-columns: min-content auto;
+  gap: 10px;
+}
+.file-field .file-path-wrapper {
+  overflow: hidden;
+}
+.file-field input.file-path {
+  width: 100%;
+}
+.file-field .btn, .file-field .btn-large, .file-field .btn-small {
+  height: 3rem;
+  line-height: 3rem;
+}
+.file-field span {
+  cursor: pointer;
+}
+.file-field input[type=file] {
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  cursor: pointer;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  opacity: 0;
+  font-size: 20px;
+  filter: alpha(opacity=0);
+}
+.file-field input[type=file]::-webkit-file-upload-button {
+  display: none;
+}
+
+.range-field {
+  position: relative;
+}
+
+input[type=range],
+input[type=range] + .thumb {
+  cursor: pointer;
+}
+
+input[type=range] {
+  position: relative;
+  background-color: transparent;
+  border: none;
+  outline: none;
+  width: 100%;
+  margin: 15px 0;
+  padding: 0;
+}
+input[type=range]:focus {
+  outline: none;
+}
+
+input[type=range] + .thumb {
+  position: absolute;
+  top: 10px;
+  left: 0;
+  border: none;
+  height: 0;
+  width: 0;
+  border-radius: 50%;
+  background-color: var(--md-sys-color-primary);
+  margin-left: 7px;
+  -webkit-transform-origin: 50% 50%;
+          transform-origin: 50% 50%;
+  -webkit-transform: rotate(-45deg);
+          transform: rotate(-45deg);
+}
+input[type=range] + .thumb .value {
+  display: block;
+  width: 30px;
+  text-align: center;
+  color: var(--md-sys-color-primary);
+  font-size: 0;
+  -webkit-transform: rotate(45deg);
+          transform: rotate(45deg);
+}
+input[type=range] + .thumb.active {
+  border-radius: 50% 50% 50% 0;
+}
+input[type=range] + .thumb.active .value {
+  color: var(--md-sys-color-on-primary);
+  margin-left: -1px;
+  margin-top: 8px;
+  font-size: 10px;
+}
+
+input[type=range] {
+  -webkit-appearance: none;
+}
+
+input[type=range]::-webkit-slider-runnable-track {
+  height: 3px;
+  border: none;
+}
+
+input[type=range]::-webkit-slider-thumb {
+  border: none;
+  height: 14px;
+  width: 14px;
+  border-radius: 50%;
+  background: var(--md-sys-color-primary);
+  -webkit-transition: -webkit-box-shadow 0.3s;
+  transition: -webkit-box-shadow 0.3s;
+  transition: box-shadow 0.3s;
+  transition: box-shadow 0.3s, -webkit-box-shadow 0.3s;
+  -webkit-appearance: none;
+  background-color: var(--md-sys-color-primary);
+  -webkit-transform-origin: 50% 50%;
+          transform-origin: 50% 50%;
+  margin: -5px 0 0 0;
+}
+
+.keyboard-focused input[type=range]:focus:not(.active)::-webkit-slider-thumb {
+  -webkit-box-shadow: 0 0 0 10px rgba(var(--md-sys-color-primary-numeric), 0.18);
+          box-shadow: 0 0 0 10px rgba(var(--md-sys-color-primary-numeric), 0.18);
+}
+
+input[type=range] {
+  /*required for proper track sizing in FF*/
+}
+
+input[type=range]::-moz-range-track {
+  height: 3px;
+  border: none;
+}
+
+input[type=range]::-moz-focus-inner {
+  border: 0;
+}
+
+input[type=range]::-moz-range-thumb {
+  border: none;
+  height: 14px;
+  width: 14px;
+  border-radius: 50%;
+  background: var(--md-sys-color-primary);
+  -moz-transition: box-shadow 0.3s;
+  transition: box-shadow 0.3s;
+  margin-top: -5px;
+}
+
+input[type=range]:-moz-focusring {
+  outline: 1px solid #fff;
+  outline-offset: -1px;
+}
+
+.keyboard-focused input[type=range]:focus:not(.active)::-moz-range-thumb {
+  box-shadow: 0 0 0 10px rgba(var(--md-sys-color-primary-numeric), 0.18);
+}
+
+input[type=range]::-ms-track {
+  height: 3px;
+  background: transparent;
+  border-color: transparent;
+  border-width: 6px 0;
+  /*remove default tick marks*/
+  color: transparent;
+}
+
+input[type=range]::-ms-fill-lower,
+input[type=range]::-moz-range-progress {
+  background: var(--md-sys-color-primary);
+}
+
+input[type=range]::-ms-fill-upper,
+input[type=range]::-moz-range-track {
+  background: var(--md-sys-color-shadow-light);
+}
+
+input[type=range]::-ms-thumb {
+  border: none;
+  height: 14px;
+  width: 14px;
+  border-radius: 50%;
+  background: var(--md-sys-color-primary);
+  -ms-transition: box-shadow 0.3s;
+  transition: box-shadow 0.3s;
+}
+
+.keyboard-focused input[type=range]:focus:not(.active)::-ms-thumb {
+  box-shadow: 0 0 0 10px rgba(var(--md-sys-color-primary-numeric), 0.18);
+}
+
+.table-of-contents {
+  list-style: none;
+}
+.table-of-contents.fixed {
+  position: fixed;
+}
+.table-of-contents li {
+  padding: 0;
+}
+.table-of-contents a {
+  display: inline-block;
+  font-weight: 400;
+  color: var(--md-sys-color-secondary);
+  padding-left: 16px;
+  height: 2rem;
+  line-height: 2rem;
+  border-left: 1px solid var(--md-sys-color-outline-variant);
+}
+.table-of-contents a:hover {
+  color: var(--md-sys-color-on-background);
+  padding-left: 15px;
+}
+.table-of-contents a.active {
+  color: var(--md-sys-color-primary);
+  font-weight: 500;
+  padding-left: 14px;
+  border-left: 2px solid var(--md-sys-color-primary);
+}
+
+/* This should be an UL-Element*/
+.sidenav {
+  --sidenav-width: 300px;
+  --sidenav-font-size: 14px;
+  --sidenav-padding: 16px;
+  --sidenav-item-height: 48px;
+  --sidenav-line-height: var(--sidenav-item-height);
+  position: fixed;
+  width: var(--sidenav-width);
+  left: 0;
+  top: 0;
+  margin: 0;
+  -webkit-transform: translateX(-100%);
+          transform: translateX(-100%);
+  height: 100vh;
+  padding: 0;
+  z-index: 999;
+  overflow-y: auto;
+  will-change: transform;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
+  -webkit-transform: translateX(-105%);
+          transform: translateX(-105%);
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  color: var(--md-sys-color-on-secondary-container);
+  background-color: var(--md-sys-color-surface);
+  /* Hover only on top row */
+  /*a:hover {
+    //color: red;
+    //background-color: var(--md-sys-color-on-secondary-container);
+    //md.sys.color.on-secondary-container
+  }*/
+}
+.sidenav.right-aligned {
+  right: 0;
+  -webkit-transform: translateX(105%);
+          transform: translateX(105%);
+  left: auto;
+  -webkit-transform: translateX(100%);
+          transform: translateX(100%);
+}
+.sidenav .collapsible {
+  margin: 0;
+}
+.sidenav a:focus {
+  background-color: rgba(0, 0, 0, 0.12);
+}
+.sidenav li.active > a:not(.collapsible-header):not(.btn):not(.btn-large):not(.btn-small):not(.btn-large):not(.btn-small):not(.btn-flat):not(.btn-large):not(.btn-floating) {
+  background-color: color-mix(in srgb, var(--md-sys-color-secondary) 10%, transparent);
+}
+.sidenav .collapsible-body > ul {
+  padding-left: 10px;
+}
+.sidenav li {
+  list-style: none;
+  display: grid;
+  -webkit-align-content: center;
+      -ms-flex-line-pack: center;
+          align-content: center;
+}
+.sidenav li > a {
+  /* https://stackoverflow.com/questions/5848090/full-width-hover-background-for-nested-lists */
+  margin: 0 12px;
+  padding: 0 var(--sidenav-padding);
+  /*
+  min-width: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  */
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  height: var(--sidenav-item-height);
+  font-size: var(--sidenav-font-size);
+  font-weight: 500;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+      -ms-flex-align: center;
+          align-items: center;
+  overflow: hidden;
+  border-radius: 100px;
+  /* TODO: Use special class in future like "mw-icon" */
+}
+.sidenav li > a:not(.btn):not(.btn-large):not(.btn-small):not(.btn-flat):not(.btn-large):not(.btn-floating) {
+  color: var(--md-sys-color-on-secondary-container);
+}
+.sidenav li > a:not(.btn):not(.btn-large):not(.btn-small):not(.btn-flat):not(.btn-large):not(.btn-floating):hover {
+  background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
+}
+.sidenav li > a.btn, .sidenav li > a.btn-small, .sidenav li > a.btn-large, .sidenav li > a.btn-flat, .sidenav li > a.btn-floating {
+  margin: 10px 15px;
+}
+.sidenav li > a > .material-icons, .sidenav li > a > .material-symbols-outlined, .sidenav li > a > .material-symbols-rounded, .sidenav li > a > .material-symbols-sharp {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  vertical-align: middle;
+  margin-right: 12px;
+}
+.sidenav .divider {
+  margin: calc(var(--sidenav-padding) * 0.5) 0 0 0;
+}
+.sidenav .subheader {
+  cursor: initial;
+  pointer-events: none;
+  color: red;
+  font-size: var(--sidenav-font-size);
+  font-weight: 500;
+  line-height: var(--sidenav-line-height);
+}
+.sidenav .user-view {
+  position: relative;
+  padding: calc(var(--sidenav-padding) * 2) calc(var(--sidenav-padding) * 2) 0;
+  margin-bottom: calc(var(--sidenav-padding) * 0.5);
+}
+.sidenav .user-view > a {
+  height: auto;
+  padding: 0;
+}
+.sidenav .user-view > a:hover {
+  background-color: transparent;
+}
+.sidenav .user-view .background {
+  overflow: hidden;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: -1;
+}
+.sidenav .user-view .circle, .sidenav .user-view .name, .sidenav .user-view .email {
+  display: block;
+}
+.sidenav .user-view .circle {
+  height: 64px;
+  width: 64px;
+}
+.sidenav .user-view .name,
+.sidenav .user-view .email {
+  font-size: var(--sidenav-font-size);
+  line-height: calc(var(--sidenav-line-height) * 0.5);
+}
+.sidenav .user-view .name {
+  margin-top: 16px;
+  font-weight: 500;
+}
+.sidenav .user-view .email {
+  padding-bottom: 16px;
+  font-weight: 400;
+}
+
+.drag-target {
+  height: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 998;
+}
+.drag-target.right-aligned {
+  right: 0;
+}
+
+.sidenav.sidenav-fixed {
+  left: 0;
+  -webkit-transform: translateX(0);
+          transform: translateX(0);
+  position: fixed;
+}
+.sidenav.sidenav-fixed.right-aligned {
+  right: 0;
+  left: auto;
+}
+
+@media only screen and (max-width : 992.99px) {
+  .sidenav.sidenav-fixed {
+    -webkit-transform: translateX(-105%);
+            transform: translateX(-105%);
+  }
+  .sidenav.sidenav-fixed.right-aligned {
+    -webkit-transform: translateX(105%);
+            transform: translateX(105%);
+  }
+  .sidenav > a {
+    padding: 0 var(--sidenav-padding);
+  }
+  .sidenav .user-view {
+    padding: var(--sidenav-padding) var(--sidenav-padding) 0;
+  }
+}
+.sidenav .collapsible-body {
+  padding: 0;
+}
+
+.sidenav-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  opacity: 0;
+  height: 120vh;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 997;
+  display: none;
+}
+
+.sidenav .collapsible,
+.sidenav.sidenav-fixed .collapsible {
+  border: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
+.sidenav .collapsible-header,
+.sidenav.sidenav-fixed .collapsible-header {
+  border: none;
+}
+.sidenav .collapsible-body,
+.sidenav.sidenav-fixed .collapsible-body {
+  border: none;
+}
+
+.progress {
+  position: relative;
+  height: 4px;
+  display: block;
+  width: 100%;
+  border-radius: 4px;
+  margin: 0.5rem 0 1rem 0;
+  overflow: hidden;
+  background-color: var(--md-sys-color-secondary-container);
+}
+.progress .determinate {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  background-color: var(--md-sys-color-primary);
+  -webkit-transition: width 0.3s linear;
+  transition: width 0.3s linear;
+}
+.progress .indeterminate {
+  background-color: var(--md-sys-color-primary);
+}
+.progress .indeterminate:before {
+  content: "";
+  position: absolute;
+  background-color: inherit;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  will-change: left, right;
+  -webkit-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+          animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+}
+.progress .indeterminate:after {
+  content: "";
+  position: absolute;
+  background-color: inherit;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  will-change: left, right;
+  -webkit-animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
+          animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
+  -webkit-animation-delay: 1.15s;
+          animation-delay: 1.15s;
+}
+
+@-webkit-keyframes indeterminate {
+  0% {
+    left: -35%;
+    right: 100%;
+  }
+  60% {
+    left: 100%;
+    right: -90%;
+  }
+  100% {
+    left: 100%;
+    right: -90%;
+  }
+}
+
+@keyframes indeterminate {
+  0% {
+    left: -35%;
+    right: 100%;
+  }
+  60% {
+    left: 100%;
+    right: -90%;
+  }
+  100% {
+    left: 100%;
+    right: -90%;
+  }
+}
+@-webkit-keyframes indeterminate-short {
+  0% {
+    left: -200%;
+    right: 100%;
+  }
+  60% {
+    left: 107%;
+    right: -8%;
+  }
+  100% {
+    left: 107%;
+    right: -8%;
+  }
+}
+@keyframes indeterminate-short {
+  0% {
+    left: -200%;
+    right: 100%;
+  }
+  60% {
+    left: 107%;
+    right: -8%;
+  }
+  100% {
+    left: 107%;
+    right: -8%;
+  }
+}
+/*
+    @license
+    Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
+    This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+    The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+    The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+    Code distributed by Google as part of the polymer project is also
+    subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+ */
+/**************************/
+/* STYLES FOR THE SPINNER */
+/**************************/
+/*
+ * Constants:
+ *      STROKEWIDTH = 3px
+ *      ARCSIZE     = 270 degrees (amount of circle the arc takes up)
+ *      ARCTIME     = 1333ms (time it takes to expand and contract arc)
+ *      ARCSTARTROT = 216 degrees (how much the start location of the arc
+ *                                should rotate each time, 216 gives us a
+ *                                5 pointed star shape (it's 360/5 * 3).
+ *                                For a 7 pointed star, we might do
+ *                                360/7 * 3 = 154.286)
+ *      CONTAINERWIDTH = 28px
+ *      SHRINK_TIME = 400ms
+ */
+.preloader-wrapper {
+  display: inline-block;
+  position: relative;
+  width: 50px;
+  height: 50px;
+}
+.preloader-wrapper.small {
+  width: 36px;
+  height: 36px;
+}
+.preloader-wrapper.big {
+  width: 64px;
+  height: 64px;
+}
+.preloader-wrapper.active {
+  /* duration: 360 * ARCTIME / (ARCSTARTROT + (360-ARCSIZE)) */
+  -webkit-animation: container-rotate 1568ms linear infinite;
+  animation: container-rotate 1568ms linear infinite;
+}
+
+@-webkit-keyframes container-rotate {
+  to {
+    -webkit-transform: rotate(360deg);
+  }
+}
+@keyframes container-rotate {
+  to {
+    -webkit-transform: rotate(360deg);
+            transform: rotate(360deg);
+  }
+}
+.spinner-layer {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  border-color: var(--md-sys-color-primary);
+}
+
+.spinner-blue,
+.spinner-blue-only {
+  border-color: #4285f4;
+}
+
+.spinner-red,
+.spinner-red-only {
+  border-color: #db4437;
+}
+
+.spinner-yellow,
+.spinner-yellow-only {
+  border-color: #f4b400;
+}
+
+.spinner-green,
+.spinner-green-only {
+  border-color: #0f9d58;
+}
+
+/**
+ * IMPORTANT NOTE ABOUT CSS ANIMATION PROPERTIES (keanulee):
+ *
+ * iOS Safari (tested on iOS 8.1) does not handle animation-delay very well - it doesn't
+ * guarantee that the animation will start _exactly_ after that value. So we avoid using
+ * animation-delay and instead set custom keyframes for each color (as redundant as it
+ * seems).
+ *
+ * We write out each animation in full (instead of separating animation-name,
+ * animation-duration, etc.) because under the polyfill, Safari does not recognize those
+ * specific properties properly, treats them as -webkit-animation, and overrides the
+ * other animation rules. See https://github.com/Polymer/platform/issues/53.
+ */
+.active .spinner-layer.spinner-blue {
+  /* durations: 4 * ARCTIME */
+  -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, blue-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
+  animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, blue-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
+}
+
+.active .spinner-layer.spinner-red {
+  /* durations: 4 * ARCTIME */
+  -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, red-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
+  animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, red-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
+}
+
+.active .spinner-layer.spinner-yellow {
+  /* durations: 4 * ARCTIME */
+  -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, yellow-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
+  animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, yellow-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
+}
+
+.active .spinner-layer.spinner-green {
+  /* durations: 4 * ARCTIME */
+  -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, green-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
+  animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, green-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
+}
+
+.active .spinner-layer,
+.active .spinner-layer.spinner-blue-only,
+.active .spinner-layer.spinner-red-only,
+.active .spinner-layer.spinner-yellow-only,
+.active .spinner-layer.spinner-green-only {
+  /* durations: 4 * ARCTIME */
+  opacity: 1;
+  -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
+  animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
+}
+
+@-webkit-keyframes fill-unfill-rotate {
+  12.5% {
+    -webkit-transform: rotate(135deg);
+  } /* 0.5 * ARCSIZE */
+  25% {
+    -webkit-transform: rotate(270deg);
+  } /* 1   * ARCSIZE */
+  37.5% {
+    -webkit-transform: rotate(405deg);
+  } /* 1.5 * ARCSIZE */
+  50% {
+    -webkit-transform: rotate(540deg);
+  } /* 2   * ARCSIZE */
+  62.5% {
+    -webkit-transform: rotate(675deg);
+  } /* 2.5 * ARCSIZE */
+  75% {
+    -webkit-transform: rotate(810deg);
+  } /* 3   * ARCSIZE */
+  87.5% {
+    -webkit-transform: rotate(945deg);
+  } /* 3.5 * ARCSIZE */
+  to {
+    -webkit-transform: rotate(1080deg);
+  } /* 4   * ARCSIZE */
+}
+@keyframes fill-unfill-rotate {
+  12.5% {
+    -webkit-transform: rotate(135deg);
+            transform: rotate(135deg);
+  } /* 0.5 * ARCSIZE */
+  25% {
+    -webkit-transform: rotate(270deg);
+            transform: rotate(270deg);
+  } /* 1   * ARCSIZE */
+  37.5% {
+    -webkit-transform: rotate(405deg);
+            transform: rotate(405deg);
+  } /* 1.5 * ARCSIZE */
+  50% {
+    -webkit-transform: rotate(540deg);
+            transform: rotate(540deg);
+  } /* 2   * ARCSIZE */
+  62.5% {
+    -webkit-transform: rotate(675deg);
+            transform: rotate(675deg);
+  } /* 2.5 * ARCSIZE */
+  75% {
+    -webkit-transform: rotate(810deg);
+            transform: rotate(810deg);
+  } /* 3   * ARCSIZE */
+  87.5% {
+    -webkit-transform: rotate(945deg);
+            transform: rotate(945deg);
+  } /* 3.5 * ARCSIZE */
+  to {
+    -webkit-transform: rotate(1080deg);
+            transform: rotate(1080deg);
+  } /* 4   * ARCSIZE */
+}
+@-webkit-keyframes blue-fade-in-out {
+  from {
+    opacity: 1;
+  }
+  25% {
+    opacity: 1;
+  }
+  26% {
+    opacity: 0;
+  }
+  89% {
+    opacity: 0;
+  }
+  90% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@keyframes blue-fade-in-out {
+  from {
+    opacity: 1;
+  }
+  25% {
+    opacity: 1;
+  }
+  26% {
+    opacity: 0;
+  }
+  89% {
+    opacity: 0;
+  }
+  90% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@-webkit-keyframes red-fade-in-out {
+  from {
+    opacity: 0;
+  }
+  15% {
+    opacity: 0;
+  }
+  25% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 1;
+  }
+  51% {
+    opacity: 0;
+  }
+}
+@keyframes red-fade-in-out {
+  from {
+    opacity: 0;
+  }
+  15% {
+    opacity: 0;
+  }
+  25% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 1;
+  }
+  51% {
+    opacity: 0;
+  }
+}
+@-webkit-keyframes yellow-fade-in-out {
+  from {
+    opacity: 0;
+  }
+  40% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 1;
+  }
+  75% {
+    opacity: 1;
+  }
+  76% {
+    opacity: 0;
+  }
+}
+@keyframes yellow-fade-in-out {
+  from {
+    opacity: 0;
+  }
+  40% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 1;
+  }
+  75% {
+    opacity: 1;
+  }
+  76% {
+    opacity: 0;
+  }
+}
+@-webkit-keyframes green-fade-in-out {
+  from {
+    opacity: 0;
+  }
+  65% {
+    opacity: 0;
+  }
+  75% {
+    opacity: 1;
+  }
+  90% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+@keyframes green-fade-in-out {
+  from {
+    opacity: 0;
+  }
+  65% {
+    opacity: 0;
+  }
+  75% {
+    opacity: 1;
+  }
+  90% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+/**
+ * Patch the gap that appear between the two adjacent div.circle-clipper while the
+ * spinner is rotating (appears on Chrome 38, Safari 7.1, and IE 11).
+ */
+.gap-patch {
+  position: absolute;
+  top: 0;
+  left: 45%;
+  width: 10%;
+  height: 100%;
+  overflow: hidden;
+  border-color: inherit;
+}
+
+.gap-patch .circle {
+  width: 1000%;
+  left: -450%;
+}
+
+.circle-clipper {
+  display: inline-block;
+  position: relative;
+  width: 50%;
+  height: 100%;
+  overflow: hidden;
+  border-color: inherit;
+}
+.circle-clipper .circle {
+  width: 200%;
+  height: 100%;
+  border-width: 3px; /* STROKEWIDTH */
+  border-style: solid;
+  border-color: inherit;
+  border-bottom-color: transparent !important;
+  border-radius: 50%;
+  -webkit-animation: none;
+  animation: none;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+}
+.circle-clipper.left .circle {
+  left: 0;
+  border-right-color: transparent !important;
+  -webkit-transform: rotate(129deg);
+  transform: rotate(129deg);
+}
+.circle-clipper.right .circle {
+  left: -100%;
+  border-left-color: transparent !important;
+  -webkit-transform: rotate(-129deg);
+  transform: rotate(-129deg);
+}
+
+.active .circle-clipper.left .circle {
+  /* duration: ARCTIME */
+  -webkit-animation: left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
+  animation: left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
+}
+
+.active .circle-clipper.right .circle {
+  /* duration: ARCTIME */
+  -webkit-animation: right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
+  animation: right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
+}
+
+@-webkit-keyframes left-spin {
+  from {
+    -webkit-transform: rotate(130deg);
+  }
+  50% {
+    -webkit-transform: rotate(-5deg);
+  }
+  to {
+    -webkit-transform: rotate(130deg);
+  }
+}
+@keyframes left-spin {
+  from {
+    -webkit-transform: rotate(130deg);
+            transform: rotate(130deg);
+  }
+  50% {
+    -webkit-transform: rotate(-5deg);
+            transform: rotate(-5deg);
+  }
+  to {
+    -webkit-transform: rotate(130deg);
+            transform: rotate(130deg);
+  }
+}
+@-webkit-keyframes right-spin {
+  from {
+    -webkit-transform: rotate(-130deg);
+  }
+  50% {
+    -webkit-transform: rotate(5deg);
+  }
+  to {
+    -webkit-transform: rotate(-130deg);
+  }
+}
+@keyframes right-spin {
+  from {
+    -webkit-transform: rotate(-130deg);
+            transform: rotate(-130deg);
+  }
+  50% {
+    -webkit-transform: rotate(5deg);
+            transform: rotate(5deg);
+  }
+  to {
+    -webkit-transform: rotate(-130deg);
+            transform: rotate(-130deg);
+  }
+}
+#spinnerContainer.cooldown {
+  /* duration: SHRINK_TIME */
+  -webkit-animation: container-rotate 1568ms linear infinite, fade-out 400ms cubic-bezier(0.4, 0, 0.2, 1);
+  animation: container-rotate 1568ms linear infinite, fade-out 400ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+@-webkit-keyframes fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+@keyframes fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+.slider {
+  position: relative;
+  height: 400px;
+  width: 100%;
+}
+.slider.fullscreen {
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+.slider.fullscreen ul.slides {
+  padding-left: 0;
+  list-style-type: none;
+  height: 100%;
+}
+.slider.fullscreen ul.indicators {
+  padding-left: 0;
+  list-style-type: none;
+  z-index: 2;
+  bottom: 30px;
+}
+.slider.fullscreen ul.indicators .indicator-item {
+  background-color: rgba(255, 255, 255, 0.45);
+}
+.slider.fullscreen ul.indicators .indicator-item.active {
+  background-color: var(--md-ref-palette-primary100);
+}
+.slider .slides {
+  background-color: var(--md-sys-color-surface);
+  margin: 0;
+  height: 400px;
+  padding-left: 0;
+  list-style-type: none;
+}
+.slider .slides li {
+  padding-left: 0;
+  list-style-type: none;
+  opacity: 0;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+  width: 100%;
+  height: inherit;
+  overflow: hidden;
+}
+.slider .slides li img {
+  height: 100%;
+  width: 100%;
+  background-size: cover;
+  background-position: center;
+}
+.slider .slides li .caption {
+  color: #fff;
+  position: absolute;
+  top: 15%;
+  left: 15%;
+  width: 70%;
+  opacity: 0;
+}
+.slider .slides li .caption p {
+  color: rgba(255, 255, 255, 0.75);
+}
+.slider .slides li.active {
+  z-index: 2;
+}
+.slider .indicators {
+  padding-left: 0;
+  list-style-type: none;
+  position: absolute;
+  text-align: center;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: 0;
+}
+.slider .indicators .indicator-item {
+  display: inline-block;
+  position: relative;
+  height: 16px;
+  width: 16px;
+  margin: 0 12px;
+}
+.slider .indicators .indicator-item-btn {
+  position: absolute;
+  top: 0;
+  left: 0;
+  cursor: pointer;
+  background-color: var(--md-sys-color-shadow-light);
+  -webkit-transition: background-color 0.3s;
+  transition: background-color 0.3s;
+  border-radius: 50%;
+  border-width: 0;
+  width: 100%;
+  height: 100%;
+}
+.slider .indicators .indicator-item-btn.active {
+  background-color: var(--md-sys-color-primary);
+}
+
+.carousel {
+  --carousel-height: 400px;
+  overflow: hidden;
+  position: relative;
+  width: 100%;
+  height: var(--carousel-height);
+  -webkit-perspective: 500px;
+          perspective: 500px;
+  -webkit-transform-style: preserve-3d;
+          transform-style: preserve-3d;
+  -webkit-transform-origin: 0% 50%;
+          transform-origin: 0% 50%;
+}
+.carousel.carousel-slider {
+  top: 0;
+  left: 0;
+}
+.carousel.carousel-slider .carousel-fixed-item {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 20px;
+  z-index: 1;
+}
+.carousel.carousel-slider .carousel-fixed-item.with-indicators {
+  bottom: 68px;
+}
+.carousel.carousel-slider .carousel-item {
+  width: 100%;
+  height: 100%;
+  min-height: var(--carousel-height);
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+.carousel.carousel-slider .carousel-item h2 {
+  font-size: 24px;
+  font-weight: 500;
+  line-height: 32px;
+}
+.carousel.carousel-slider .carousel-item p {
+  font-size: 15px;
+}
+.carousel .carousel-item {
+  visibility: hidden;
+  width: calc(var(--carousel-height) * 0.5);
+  height: calc(var(--carousel-height) * 0.5);
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+.carousel .carousel-item > img {
+  width: 100%;
+}
+.carousel .indicators {
+  padding-left: 0;
+  list-style-type: none;
+  position: absolute;
+  text-align: center;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: 0;
+}
+.carousel .indicators .indicator-item {
+  display: inline-block;
+  position: relative;
+  cursor: pointer;
+  height: 8px;
+  width: 8px;
+  margin: 24px 4px;
+  background-color: rgba(255, 255, 255, 0.45);
+  -webkit-transition: background-color 0.3s;
+  transition: background-color 0.3s;
+  border-radius: 50%;
+}
+.carousel .indicators .indicator-item.active {
+  background-color: var(--md-ref-palette-primary100);
+}
+.carousel.scrolling .carousel-item .materialboxed,
+.carousel .carousel-item:not(.active) .materialboxed {
+  pointer-events: none;
+}
+
+.tap-target-wrapper {
+  width: 800px;
+  height: 800px;
+  position: fixed;
+  z-index: 1000;
+  visibility: hidden;
+  -webkit-transition: visibility 0s 0.3s;
+  transition: visibility 0s 0.3s;
+}
+
+.tap-target-wrapper.open {
+  visibility: visible;
+  -webkit-transition: visibility 0s;
+  transition: visibility 0s;
+}
+.tap-target-wrapper.open .tap-target {
+  -webkit-transform: scale(1);
+          transform: scale(1);
+  opacity: 0.95;
+  -webkit-transition: opacity 0.3s cubic-bezier(0.42, 0, 0.58, 1), -webkit-transform 0.3s cubic-bezier(0.42, 0, 0.58, 1);
+  transition: opacity 0.3s cubic-bezier(0.42, 0, 0.58, 1), -webkit-transform 0.3s cubic-bezier(0.42, 0, 0.58, 1);
+  transition: transform 0.3s cubic-bezier(0.42, 0, 0.58, 1), opacity 0.3s cubic-bezier(0.42, 0, 0.58, 1);
+  transition: transform 0.3s cubic-bezier(0.42, 0, 0.58, 1), opacity 0.3s cubic-bezier(0.42, 0, 0.58, 1), -webkit-transform 0.3s cubic-bezier(0.42, 0, 0.58, 1);
+}
+.tap-target-wrapper.open .tap-target-wave::before {
+  -webkit-transform: scale(1);
+          transform: scale(1);
+}
+.tap-target-wrapper.open .tap-target-wave::after {
+  visibility: visible;
+  -webkit-animation: pulse-animation 1s cubic-bezier(0.24, 0, 0.38, 1) infinite;
+          animation: pulse-animation 1s cubic-bezier(0.24, 0, 0.38, 1) infinite;
+  -webkit-transition: opacity 0.3s, visibility 0s 1s, -webkit-transform 0.3s;
+  transition: opacity 0.3s, visibility 0s 1s, -webkit-transform 0.3s;
+  transition: opacity 0.3s, transform 0.3s, visibility 0s 1s;
+  transition: opacity 0.3s, transform 0.3s, visibility 0s 1s, -webkit-transform 0.3s;
+}
+
+.tap-target {
+  position: absolute;
+  font-size: 1rem;
+  border-radius: 50%;
+  background-color: var(--md-sys-color-primary-container);
+  color: var(--md-sys-color-primary);
+  -webkit-box-shadow: 0 20px 20px 0 rgba(0, 0, 0, 0.14), 0 10px 50px 0 rgba(0, 0, 0, 0.12), 0 30px 10px -20px rgba(0, 0, 0, 0.2);
+          box-shadow: 0 20px 20px 0 rgba(0, 0, 0, 0.14), 0 10px 50px 0 rgba(0, 0, 0, 0.12), 0 30px 10px -20px rgba(0, 0, 0, 0.2);
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  -webkit-transform: scale(0);
+          transform: scale(0);
+  -webkit-transition: opacity 0.3s cubic-bezier(0.42, 0, 0.58, 1), -webkit-transform 0.3s cubic-bezier(0.42, 0, 0.58, 1);
+  transition: opacity 0.3s cubic-bezier(0.42, 0, 0.58, 1), -webkit-transform 0.3s cubic-bezier(0.42, 0, 0.58, 1);
+  transition: transform 0.3s cubic-bezier(0.42, 0, 0.58, 1), opacity 0.3s cubic-bezier(0.42, 0, 0.58, 1);
+  transition: transform 0.3s cubic-bezier(0.42, 0, 0.58, 1), opacity 0.3s cubic-bezier(0.42, 0, 0.58, 1), -webkit-transform 0.3s cubic-bezier(0.42, 0, 0.58, 1);
+}
+
+.tap-target-content {
+  position: relative;
+  display: table-cell;
+}
+
+.tap-target-wave {
+  position: absolute;
+  border-radius: 50%;
+  z-index: 10001;
+}
+.tap-target-wave::before, .tap-target-wave::after {
+  content: "";
+  display: block;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  background-color: var(--md-sys-color-surface);
+}
+.tap-target-wave::before {
+  -webkit-transform: scale(0);
+          transform: scale(0);
+  -webkit-transition: -webkit-transform 0.3s;
+  transition: -webkit-transform 0.3s;
+  transition: transform 0.3s;
+  transition: transform 0.3s, -webkit-transform 0.3s;
+}
+.tap-target-wave::after {
+  visibility: hidden;
+  -webkit-transition: opacity 0.3s, visibility 0s, -webkit-transform 0.3s;
+  transition: opacity 0.3s, visibility 0s, -webkit-transform 0.3s;
+  transition: opacity 0.3s, transform 0.3s, visibility 0s;
+  transition: opacity 0.3s, transform 0.3s, visibility 0s, -webkit-transform 0.3s;
+  z-index: -1;
+}
+
+.tap-target-origin {
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%, -50%);
+          transform: translate(-50%, -50%);
+  z-index: 10002;
+  position: absolute !important;
+}
+.tap-target-origin:not(.btn):not(.btn-large):not(.btn-small), .tap-target-origin:not(.btn):not(.btn-large):not(.btn-small):hover {
+  background: none;
+}
+
+@media only screen and (max-width: 600px) {
+  .tap-target, .tap-target-wrapper {
+    width: 600px;
+    height: 600px;
+  }
+}
+.pulse {
+  overflow: visible;
+  position: relative;
+}
+.pulse::before {
+  content: "";
+  display: block;
+  position: absolute;
+  pointer-events: none;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  background-color: inherit;
+  border-radius: inherit;
+  -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
+  transition: opacity 0.3s, -webkit-transform 0.3s;
+  transition: opacity 0.3s, transform 0.3s;
+  transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s;
+  -webkit-animation: pulse-animation 1s cubic-bezier(0.24, 0, 0.38, 1) infinite;
+          animation: pulse-animation 1s cubic-bezier(0.24, 0, 0.38, 1) infinite;
+  z-index: -1;
+}
+
+@-webkit-keyframes pulse-animation {
+  0% {
+    opacity: 1;
+    -webkit-transform: scale(1);
+            transform: scale(1);
+  }
+  50% {
+    opacity: 0;
+    -webkit-transform: scale(1.5);
+            transform: scale(1.5);
+  }
+  100% {
+    opacity: 0;
+    -webkit-transform: scale(1.5);
+            transform: scale(1.5);
+  }
+}
+
+@keyframes pulse-animation {
+  0% {
+    opacity: 1;
+    -webkit-transform: scale(1);
+            transform: scale(1);
+  }
+  50% {
+    opacity: 0;
+    -webkit-transform: scale(1.5);
+            transform: scale(1.5);
+  }
+  100% {
+    opacity: 0;
+    -webkit-transform: scale(1.5);
+            transform: scale(1.5);
+  }
+}
+/* Modal */
+/*.datepicker-modal {
+  max-width: 325px;
+  // @removed since v2.2.1-dev regarding Material M3 standards
+  min-width: 300px;
+  max-height: none;
+}*/
+.datepicker-container {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: column;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  max-width: 325px;
+  padding: 0;
+  background-color: var(--md-sys-color-surface);
+}
+
+.datepicker-controls {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+  width: 280px;
+  margin: 0 auto;
+}
+.datepicker-controls .selects-container {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+.datepicker-controls .select-wrapper input {
+  border-bottom: none;
+  text-align: center;
+  margin: 0;
+}
+.datepicker-controls .select-wrapper input:focus {
+  border-bottom: none;
+}
+.datepicker-controls .select-wrapper .caret {
+  display: none;
+}
+.datepicker-controls .select-dropdown {
+  padding: 0;
+  vertical-align: middle;
+}
+.datepicker-controls .select-year input,
+.datepicker-controls .select-month input {
+  background-color: transparent;
+}
+.datepicker-controls .select-year input {
+  width: 50px;
+}
+.datepicker-controls .select-month input {
+  width: 80px;
+}
+.datepicker-controls .month-prev,
+.datepicker-controls .month-next {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+.datepicker-controls .month-prev > svg,
+.datepicker-controls .month-next > svg {
+  fill: var(--md-sys-color-on-surface-variant);
+}
+
+.month-prev, .month-next {
+  height: 49px;
+  margin-top: 4px;
+  cursor: pointer;
+  background-color: transparent;
+  border: none;
+}
+
+/* Date Display */
+.datepicker-date-display {
+  -webkit-box-flex: 1;
+  -webkit-flex: 1 auto;
+      -ms-flex: 1 auto;
+          flex: 1 auto;
+  padding: 20px 22px;
+  border-bottom: 1px solid var(--md-sys-color-surface-variant-light);
+  font-weight: 500;
+}
+.datepicker-date-display .year-text {
+  display: block;
+  font-size: 1.5rem;
+  line-height: 25px;
+  color: var(--md-sys-color-on-primary);
+}
+.datepicker-date-display .date-text {
+  display: block;
+  font-size: 2.8rem;
+  line-height: 47px;
+  font-weight: 500;
+}
+.daterange .datepicker-date-display .date-text {
+  font-size: 1.8rem;
+}
+
+/* Calendar */
+.datepicker-calendar-container {
+  -webkit-box-flex: 2.5;
+  -webkit-flex: 2.5 auto;
+      -ms-flex: 2.5 auto;
+          flex: 2.5 auto;
+}
+
+.datepicker-table {
+  width: 280px;
+  font-size: 1rem;
+  margin: 0 auto;
+}
+.datepicker-table thead {
+  border-bottom: none;
+}
+.datepicker-table th {
+  padding: 10px 5px;
+  text-align: center;
+}
+.datepicker-table tr {
+  border: none;
+}
+.datepicker-table abbr {
+  text-decoration: none;
+  color: var(--md-sys-color-on-surface-variant);
+}
+.datepicker-table .datepicker-day {
+  color: var(--md-sys-color-on-background);
+  /*&.is-selected button {
+    background-color: var(--md-sys-color-primary);
+    color:  var(--md-sys-color-on-primary);
+  }*/
+  padding: 0;
+}
+.datepicker-table .datepicker-day.is-today {
+  color: var(--md-sys-color-primary);
+}
+
+.datepicker-day.is-daterange-start,
+.datepicker-day.is-daterange-end,
+.datepicker-day.is-daterange {
+  position: relative;
+}
+.datepicker-day.is-daterange-start:before,
+.datepicker-day.is-daterange-end:before,
+.datepicker-day.is-daterange:before {
+  position: absolute;
+  top: 5px;
+  width: 100%;
+  height: 34px;
+  content: "";
+  background-color: var(--md-sys-color-primary-container);
+  z-index: 0;
+}
+
+.datepicker-day.is-daterange-start:before,
+.datepicker-day.is-daterange-end:before {
+  width: 50%;
+}
+
+.datepicker-day.is-daterange-start:before {
+  left: 50%;
+}
+
+.datepicker-day.is-daterange .datepicker-day-button:before {
+  background-color: var(--md-sys-color-primary-container);
+}
+
+.datepicker-day-button {
+  background-color: transparent;
+  border: none;
+  line-height: 34px;
+  display: block;
+  width: 34px;
+  border-radius: 50%;
+  margin: 5px;
+  padding: 0 5px;
+  cursor: pointer;
+  color: inherit;
+  position: relative;
+  z-index: 1;
+}
+.datepicker-day-button:hover {
+  background-color: rgba(var(--md-sys-color-primary-numeric), 0.06);
+}
+.datepicker-day-button:focus {
+  border-color: var(--md-sys-color-primary);
+}
+.is-selected .datepicker-day-button {
+  background-color: var(--md-sys-color-primary);
+  color: var(--md-sys-color-on-primary);
+}
+.is-selected .datepicker-day-button:focus {
+  background-color: var(--md-sys-color-surface-variant);
+  color: var(--md-sys-color-primary);
+}
+.datepicker-day-button.is-outside-current-month button, .datepicker-day-button.is-disabled button {
+  color: var(--md-sys-color-on-surface);
+  pointer-events: none;
+}
+
+/* Footer */
+.datepicker-footer {
+  width: 280px;
+  margin: 0 auto;
+  padding-bottom: 5px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+}
+
+.datepicker-cancel,
+.datepicker-clear,
+.datepicker-today,
+.datepicker-done {
+  color: var(--md-sys-color-primary);
+  padding: 0 1rem;
+}
+
+.datepicker-clear {
+  color: var(--md-sys-color-error);
+}
+
+/* Media Queries */
+@media only screen and (min-width : 601px) {
+  /*.datepicker-modal {
+    max-width: 625px;
+  }
+
+  .datepicker-container.modal-content {
+    flex-direction: row;
+  }
+
+  .datepicker-date-display {
+    flex: 0 1 270px;
+  }
+
+  .datepicker-controls,
+  .datepicker-table,
+  .datepicker-footer {
+    width: 320px;
+  }
+
+  .datepicker-day-button {
+    line-height: 44px;
+  }*/
+}
+/* Timepicker Containers */
+/* modal removed as of v2.2.1 */
+/* .timepicker-modal {
+  max-width: 325px;
+  max-height: none;
+}*/
+.timepicker-container {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: column;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  max-width: 325px;
+  padding: 0;
+  background-color: var(--md-sys-color-inverse-on-surface);
+}
+
+.text-primary {
+  color: var(--md-sys-color-on-primary);
+}
+
+/* Clock Digital Display */
+.timepicker-digital-display {
+  width: auto;
+  -webkit-box-flex: 1;
+  -webkit-flex: 1 auto;
+      -ms-flex: 1 auto;
+          flex: 1 auto;
+  padding: 2rem 0.67rem 0.67rem 0.67rem;
+  font-weight: 300;
+}
+
+.timepicker-text-container {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-size: 4rem;
+  text-align: left;
+  color: var(--font-on-primary-color-medium);
+  font-weight: 400;
+  /*position: relative;*/
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  padding: 1rem 1rem 1.3rem 1rem;
+}
+.timepicker-text-container input[type=text] {
+  height: 4rem;
+  color: var(--md-sys-color-secondary);
+  border-bottom: 0px;
+  font-size: 4rem;
+  direction: ltr;
+}
+
+.timepicker-display-column {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.timepicker-display-digital-clock {
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+      -ms-flex-positive: 1;
+          flex-grow: 1;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.timepicker-input-hours-wrapper,
+.timepicker-input-minutes-wrapper {
+  width: 6.9rem;
+  height: 5.75rem;
+}
+
+.timepicker-input-hours,
+.timepicker-input-minutes,
+.timepicker-span-am-pm div {
+  cursor: pointer;
+}
+
+input[type=text].timepicker-input-hours,
+input[type=text].timepicker-input-minutes {
+  height: 100%;
+  padding: 1.33rem 0.8rem;
+  border: 0;
+  text-align: center;
+  color: var(--md-sys-color-on-background);
+  background-color: var(--md-sys-color-surface-variant);
+}
+input[type=text].timepicker-input-hours:focus,
+input[type=text].timepicker-input-minutes:focus {
+  background-color: var(--md-sys-color-primary-container);
+}
+
+.timepicker-input-divider-wrapper {
+  width: 1.6rem;
+  text-align: center;
+}
+
+/*input[type=text].text-primary {
+  color: var(--md-sys-color-on-background);
+}*/
+.timepicker-display-am-pm {
+  font-size: 1.3rem;
+  /*position: absolute;
+  top: 1rem;
+  right: 1rem;*/
+  font-weight: 400;
+}
+
+.timepicker-span-am-pm {
+  height: 5.75rem;
+  max-width: 3.5rem;
+}
+
+.timepicker-container .am-btn,
+.timepicker-container .pm-btn {
+  width: 3.6rem;
+  height: 50%;
+  padding-left: calc(var(--btn-padding) / 1.8);
+  padding-right: calc(var(--btn-padding) / 1.8);
+  line-height: 2rem;
+  vertical-align: middle;
+  text-align: center;
+  border: 1px solid var(--md-sys-color-outline);
+}
+
+.timepicker-container .am-btn {
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.timepicker-container .pm-btn {
+  border-top: 0;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
+/* Analog Clock Display */
+.timepicker-analog-display {
+  -webkit-box-flex: 2.5;
+  -webkit-flex: 2.5 auto;
+      -ms-flex: 2.5 auto;
+          flex: 2.5 auto;
+  padding: 0.67rem;
+}
+
+.timepicker-plate {
+  background-color: var(--md-sys-color-surface-variant);
+  border-radius: 50%;
+  width: 260px;
+  height: 260px;
+  overflow: visible;
+  position: relative;
+  margin: 0 1.6rem 1.6rem 1.6rem;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+
+.timepicker-canvas,
+.timepicker-dial {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+}
+
+.timepicker-minutes {
+  visibility: hidden;
+}
+
+.timepicker-tick {
+  border-radius: 50%;
+  color: var(--md-sys-color-on-background);
+  line-height: 40px;
+  text-align: center;
+  width: 40px;
+  height: 40px;
+  position: absolute;
+  cursor: pointer;
+  font-size: 15px;
+}
+
+.timepicker-tick.active,
+.timepicker-tick:hover {
+  background-color: rgba(var(--md-sys-color-primary-numeric), 0.06);
+}
+
+.timepicker-dial {
+  -webkit-transition: opacity 350ms, -webkit-transform 350ms;
+  transition: opacity 350ms, -webkit-transform 350ms;
+  transition: transform 350ms, opacity 350ms;
+  transition: transform 350ms, opacity 350ms, -webkit-transform 350ms;
+}
+
+.timepicker-dial-out {
+  opacity: 0;
+}
+.timepicker-dial-out.timepicker-hours {
+  -webkit-transform: scale(1.1, 1.1);
+          transform: scale(1.1, 1.1);
+}
+.timepicker-dial-out.timepicker-minutes {
+  -webkit-transform: scale(0.8, 0.8);
+          transform: scale(0.8, 0.8);
+}
+
+.timepicker-canvas {
+  -webkit-transition: opacity 175ms;
+  transition: opacity 175ms;
+}
+.timepicker-canvas line {
+  stroke: var(--md-sys-color-primary);
+  stroke-width: 4;
+  stroke-linecap: round;
+}
+
+.timepicker-canvas-out {
+  opacity: 0.25;
+}
+
+.timepicker-canvas-bearing {
+  stroke: none;
+  fill: var(--md-sys-color-primary);
+}
+
+.timepicker-canvas-bg {
+  stroke: none;
+  fill: var(--md-sys-color-primary);
+}
+
+/* Footer */
+.timepicker-footer {
+  margin: 0 auto;
+  padding: 5px 1rem;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+}
+
+.timepicker-clear {
+  color: var(--md-sys-color-error);
+}
+
+.timepicker-close {
+  color: var(--md-sys-color-primary);
+}
+
+.timepicker-clear,
+.timepicker-close {
+  padding: 0 20px;
+}
+
+/* Media Queries */
+@media only screen and (min-width : 993px) {
+  .timepicker-container {
+    width: auto;
+    max-width: 620px;
+  }
+  .timepicker-container {
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+    -webkit-flex-direction: row;
+        -ms-flex-direction: row;
+            flex-direction: row;
+  }
+  .timepicker-digital-display {
+    padding: 0.67rem;
+  }
+  .timepicker-text-container {
+    /*top: 31%;*/
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    -webkit-flex-direction: column;
+        -ms-flex-direction: column;
+            flex-direction: column;
+    margin-top: 4.8rem;
+    text-align: center;
+  }
+  .timepicker-display-column {
+    padding: 0 3%;
+  }
+  .timepicker-display-am-pm {
+    /*position: relative;
+    top: auto;
+    right: auto;
+    text-align: center;*/
+    margin-top: 1.1rem;
+  }
+  .timepicker-span-am-pm {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
+        -ms-flex-positive: 1;
+            flex-grow: 1;
+    max-width: unset;
+  }
+  .timepicker-container .am-btn,
+  .timepicker-container .pm-btn {
+    -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
+        -ms-flex-positive: 1;
+            flex-grow: 1;
+    /*width: auto;*/
+    padding-left: calc(var(--btn-padding) / 0.565);
+    padding-right: calc(var(--btn-padding) / 0.565);
+    border-radius: var(--btn-border-radius);
+    border: 1px solid var(--md-sys-color-outline);
+    /*line-height: inherit;
+    vertical-align: top;
+    text-align: inherit;*/
+  }
+  .timepicker-container .am-btn {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  .timepicker-container .pm-btn {
+    border-left: 0;
+    border-bottom-left-radius: 0;
+    border-top-left-radius: 0;
+  }
+  .timepicker-plate {
+    margin-top: 1.6rem;
+  }
+}
\ No newline at end of file
diff --git a/dist/css/materialize.min.css b/dist/css/materialize.min.css
new file mode 100644
index 0000000000..820c272698
--- /dev/null
+++ b/dist/css/materialize.min.css
@@ -0,0 +1,6 @@
+/*!
+* Materialize v2.2.1 (https://materializeweb.com)
+* Copyright 2014-2025 Materialize
+* MIT License (https://raw.githubusercontent.com/materializecss/materialize/master/LICENSE)
+*/
+root{--md-source: #006495;--md-ref-palette-primary0: #000000;--md-ref-palette-primary10: #001e30;--md-ref-palette-primary20: #003450;--md-ref-palette-primary25: #003f60;--md-ref-palette-primary30: #004b71;--md-ref-palette-primary35: #005783;--md-ref-palette-primary40: #006495;--md-ref-palette-primary50: #0f7eb8;--md-ref-palette-primary60: #3d98d4;--md-ref-palette-primary70: #5db3f0;--md-ref-palette-primary80: #8fcdff;--md-ref-palette-primary90: #cbe6ff;--md-ref-palette-primary95: #e6f2ff;--md-ref-palette-primary98: #f7f9ff;--md-ref-palette-primary99: #fcfcff;--md-ref-palette-primary100: #ffffff;--md-ref-palette-secondary0: #000000;--md-ref-palette-secondary10: #0d1d29;--md-ref-palette-secondary20: #22323f;--md-ref-palette-secondary25: #2d3d4b;--md-ref-palette-secondary30: #394856;--md-ref-palette-secondary35: #445462;--md-ref-palette-secondary40: #50606f;--md-ref-palette-secondary50: #697988;--md-ref-palette-secondary60: #8293a2;--md-ref-palette-secondary70: #9dadbd;--md-ref-palette-secondary80: #b8c8d9;--md-ref-palette-secondary90: #d4e4f6;--md-ref-palette-secondary95: #e6f2ff;--md-ref-palette-secondary98: #f7f9ff;--md-ref-palette-secondary99: #fcfcff;--md-ref-palette-secondary100: #ffffff;--md-ref-palette-tertiary0: #000000;--md-ref-palette-tertiary10: #211634;--md-ref-palette-tertiary20: #362b4a;--md-ref-palette-tertiary25: #423656;--md-ref-palette-tertiary30: #4d4162;--md-ref-palette-tertiary35: #594c6e;--md-ref-palette-tertiary40: #66587b;--md-ref-palette-tertiary50: #7f7195;--md-ref-palette-tertiary60: #998ab0;--md-ref-palette-tertiary70: #b4a4cb;--md-ref-palette-tertiary80: #d0bfe7;--md-ref-palette-tertiary90: #ecdcff;--md-ref-palette-tertiary95: #f7edff;--md-ref-palette-tertiary98: #fef7ff;--md-ref-palette-tertiary99: #fffbff;--md-ref-palette-tertiary100: #ffffff;--md-ref-palette-neutral0: #000000;--md-ref-palette-neutral10: #1a1c1e;--md-ref-palette-neutral20: #2e3133;--md-ref-palette-neutral25: #3a3c3e;--md-ref-palette-neutral30: #454749;--md-ref-palette-neutral35: #515255;--md-ref-palette-neutral40: #5d5e61;--md-ref-palette-neutral50: #76777a;--md-ref-palette-neutral60: #8f9194;--md-ref-palette-neutral70: #aaabae;--md-ref-palette-neutral80: #c6c6c9;--md-ref-palette-neutral90: #e2e2e5;--md-ref-palette-neutral95: #f0f0f3;--md-ref-palette-neutral98: #f9f9fc;--md-ref-palette-neutral99: #fcfcff;--md-ref-palette-neutral100: #ffffff;--md-ref-palette-neutral-variant0: #000000;--md-ref-palette-neutral-variant10: #161c22;--md-ref-palette-neutral-variant20: #2b3137;--md-ref-palette-neutral-variant25: #363c42;--md-ref-palette-neutral-variant30: #41474d;--md-ref-palette-neutral-variant35: #4d5359;--md-ref-palette-neutral-variant40: #595f65;--md-ref-palette-neutral-variant50: #72787e;--md-ref-palette-neutral-variant60: #8b9198;--md-ref-palette-neutral-variant70: #a6acb3;--md-ref-palette-neutral-variant80: #c1c7ce;--md-ref-palette-neutral-variant90: #dee3ea;--md-ref-palette-neutral-variant95: #ecf1f9;--md-ref-palette-neutral-variant98: #f7f9ff;--md-ref-palette-neutral-variant99: #fcfcff;--md-ref-palette-neutral-variant100: #ffffff;--md-ref-palette-error0: #000000;--md-ref-palette-error10: #410002;--md-ref-palette-error20: #690005;--md-ref-palette-error25: #7e0007;--md-ref-palette-error30: #93000a;--md-ref-palette-error35: #a80710;--md-ref-palette-error40: #ba1a1a;--md-ref-palette-error50: #de3730;--md-ref-palette-error60: #ff5449;--md-ref-palette-error70: #ff897d;--md-ref-palette-error80: #ffb4ab;--md-ref-palette-error90: #ffdad6;--md-ref-palette-error95: #ffedea;--md-ref-palette-error98: #fff8f7;--md-ref-palette-error99: #fffbff;--md-ref-palette-error100: #ffffff;--md-sys-color-primary-light: #006495;--md-sys-color-on-primary-light: #ffffff;--md-sys-color-primary-container-light: #cbe6ff;--md-sys-color-on-primary-container-light: #001e30;--md-sys-color-secondary-light: #50606f;--md-sys-color-on-secondary-light: #ffffff;--md-sys-color-secondary-container-light: #d4e4f6;--md-sys-color-on-secondary-container-light: #0d1d29;--md-sys-color-tertiary-light: #66587b;--md-sys-color-on-tertiary-light: #ffffff;--md-sys-color-tertiary-container-light: #ecdcff;--md-sys-color-on-tertiary-container-light: #211634;--md-sys-color-error-light: #ba1a1a;--md-sys-color-error-container-light: #ffdad6;--md-sys-color-on-error-light: #ffffff;--md-sys-color-on-error-container-light: #410002;--md-sys-color-background-light: #fcfcff;--md-sys-color-on-background-light: #1a1c1e;--md-sys-color-surface-light: #fcfcff;--md-sys-color-on-surface-light: #1a1c1e;--md-sys-color-surface-variant-light: #dee3ea;--md-sys-color-on-surface-variant-light: #41474d;--md-sys-color-outline-light: #72787e;--md-sys-color-inverse-on-surface-light: #f0f0f3;--md-sys-color-inverse-surface-light: #2e3133;--md-sys-color-inverse-primary-light: #8fcdff;--md-sys-color-shadow-light: #000000;--md-sys-color-surface-tint-light: #006495;--md-sys-color-outline-variant-light: #c1c7ce;--md-sys-color-scrim-light: #000000;--md-sys-color-primary-dark: #8fcdff;--md-sys-color-on-primary-dark: #003450;--md-sys-color-primary-container-dark: #004b71;--md-sys-color-on-primary-container-dark: #cbe6ff;--md-sys-color-secondary-dark: #b8c8d9;--md-sys-color-on-secondary-dark: #22323f;--md-sys-color-secondary-container-dark: #394856;--md-sys-color-on-secondary-container-dark: #d4e4f6;--md-sys-color-tertiary-dark: #d0bfe7;--md-sys-color-on-tertiary-dark: #362b4a;--md-sys-color-tertiary-container-dark: #4d4162;--md-sys-color-on-tertiary-container-dark: #ecdcff;--md-sys-color-error-dark: #ffb4ab;--md-sys-color-error-container-dark: #93000a;--md-sys-color-on-error-dark: #690005;--md-sys-color-on-error-container-dark: #ffdad6;--md-sys-color-background-dark: #1a1c1e;--md-sys-color-on-background-dark: #e2e2e5;--md-sys-color-surface-dark: #1a1c1e;--md-sys-color-on-surface-dark: #e2e2e5;--md-sys-color-surface-variant-dark: #41474d;--md-sys-color-on-surface-variant-dark: #c1c7ce;--md-sys-color-outline-dark: #8b9198;--md-sys-color-inverse-on-surface-dark: #1a1c1e;--md-sys-color-inverse-surface-dark: #e2e2e5;--md-sys-color-inverse-primary-dark: #006495;--md-sys-color-shadow-dark: #000000;--md-sys-color-surface-tint-dark: #8fcdff;--md-sys-color-outline-variant-dark: #41474d;--md-sys-color-scrim-dark: #000000;--md-sys-typescale-display-large-font-family-name: Roboto;--md-sys-typescale-display-large-font-family-style: Regular;--md-sys-typescale-display-large-font-weight: 400px;--md-sys-typescale-display-large-font-size: 57px;--md-sys-typescale-display-large-line-height: 64px;--md-sys-typescale-display-large-letter-spacing: -0.25px;--md-sys-typescale-display-medium-font-family-name: Roboto;--md-sys-typescale-display-medium-font-family-style: Regular;--md-sys-typescale-display-medium-font-weight: 400px;--md-sys-typescale-display-medium-font-size: 45px;--md-sys-typescale-display-medium-line-height: 52px;--md-sys-typescale-display-medium-letter-spacing: 0px;--md-sys-typescale-display-small-font-family-name: Roboto;--md-sys-typescale-display-small-font-family-style: Regular;--md-sys-typescale-display-small-font-weight: 400px;--md-sys-typescale-display-small-font-size: 36px;--md-sys-typescale-display-small-line-height: 44px;--md-sys-typescale-display-small-letter-spacing: 0px;--md-sys-typescale-headline-large-font-family-name: Roboto;--md-sys-typescale-headline-large-font-family-style: Regular;--md-sys-typescale-headline-large-font-weight: 400px;--md-sys-typescale-headline-large-font-size: 32px;--md-sys-typescale-headline-large-line-height: 40px;--md-sys-typescale-headline-large-letter-spacing: 0px;--md-sys-typescale-headline-medium-font-family-name: Roboto;--md-sys-typescale-headline-medium-font-family-style: Regular;--md-sys-typescale-headline-medium-font-weight: 400px;--md-sys-typescale-headline-medium-font-size: 28px;--md-sys-typescale-headline-medium-line-height: 36px;--md-sys-typescale-headline-medium-letter-spacing: 0px;--md-sys-typescale-headline-small-font-family-name: Roboto;--md-sys-typescale-headline-small-font-family-style: Regular;--md-sys-typescale-headline-small-font-weight: 400px;--md-sys-typescale-headline-small-font-size: 24px;--md-sys-typescale-headline-small-line-height: 32px;--md-sys-typescale-headline-small-letter-spacing: 0px;--md-sys-typescale-body-large-font-family-name: Roboto;--md-sys-typescale-body-large-font-family-style: Regular;--md-sys-typescale-body-large-font-weight: 400px;--md-sys-typescale-body-large-font-size: 16px;--md-sys-typescale-body-large-line-height: 24px;--md-sys-typescale-body-large-letter-spacing: 0.50px;--md-sys-typescale-body-medium-font-family-name: Roboto;--md-sys-typescale-body-medium-font-family-style: Regular;--md-sys-typescale-body-medium-font-weight: 400px;--md-sys-typescale-body-medium-font-size: 14px;--md-sys-typescale-body-medium-line-height: 20px;--md-sys-typescale-body-medium-letter-spacing: 0.25px;--md-sys-typescale-body-small-font-family-name: Roboto;--md-sys-typescale-body-small-font-family-style: Regular;--md-sys-typescale-body-small-font-weight: 400px;--md-sys-typescale-body-small-font-size: 12px;--md-sys-typescale-body-small-line-height: 16px;--md-sys-typescale-body-small-letter-spacing: 0.40px;--md-sys-typescale-label-large-font-family-name: Roboto;--md-sys-typescale-label-large-font-family-style: Medium;--md-sys-typescale-label-large-font-weight: 500px;--md-sys-typescale-label-large-font-size: 14px;--md-sys-typescale-label-large-line-height: 20px;--md-sys-typescale-label-large-letter-spacing: 0.10px;--md-sys-typescale-label-medium-font-family-name: Roboto;--md-sys-typescale-label-medium-font-family-style: Medium;--md-sys-typescale-label-medium-font-weight: 500px;--md-sys-typescale-label-medium-font-size: 12px;--md-sys-typescale-label-medium-line-height: 16px;--md-sys-typescale-label-medium-letter-spacing: 0.50px;--md-sys-typescale-label-small-font-family-name: Roboto;--md-sys-typescale-label-small-font-family-style: Medium;--md-sys-typescale-label-small-font-weight: 500px;--md-sys-typescale-label-small-font-size: 11px;--md-sys-typescale-label-small-line-height: 16px;--md-sys-typescale-label-small-letter-spacing: 0.50px;--md-sys-typescale-title-large-font-family-name: Roboto;--md-sys-typescale-title-large-font-family-style: Regular;--md-sys-typescale-title-large-font-weight: 400px;--md-sys-typescale-title-large-font-size: 22px;--md-sys-typescale-title-large-line-height: 28px;--md-sys-typescale-title-large-letter-spacing: 0px;--md-sys-typescale-title-medium-font-family-name: Roboto;--md-sys-typescale-title-medium-font-family-style: Medium;--md-sys-typescale-title-medium-font-weight: 500px;--md-sys-typescale-title-medium-font-size: 16px;--md-sys-typescale-title-medium-line-height: 24px;--md-sys-typescale-title-medium-letter-spacing: 0.15px;--md-sys-typescale-title-small-font-family-name: Roboto;--md-sys-typescale-title-small-font-family-style: Medium;--md-sys-typescale-title-small-font-weight: 500px;--md-sys-typescale-title-small-font-size: 14px;--md-sys-typescale-title-small-line-height: 20px;--md-sys-typescale-title-small-letter-spacing: 0.10px}:root,:host{color-scheme:light;--md-sys-color-primary: var(--md-sys-color-primary-light);--md-sys-color-on-primary: var(--md-sys-color-on-primary-light);--md-sys-color-primary-container: var(--md-sys-color-primary-container-light);--md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-light);--md-sys-color-secondary: var(--md-sys-color-secondary-light);--md-sys-color-on-secondary: var(--md-sys-color-on-secondary-light);--md-sys-color-secondary-container: var(--md-sys-color-secondary-container-light);--md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-light);--md-sys-color-tertiary: var(--md-sys-color-tertiary-light);--md-sys-color-on-tertiary: var(--md-sys-color-on-tertiary-light);--md-sys-color-tertiary-container: var(--md-sys-color-tertiary-container-light);--md-sys-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container-light);--md-sys-color-error: var(--md-sys-color-error-light);--md-sys-color-on-error: var(--md-sys-color-on-error-light);--md-sys-color-error-container: var(--md-sys-color-error-container-light);--md-sys-color-on-error-container: var(--md-sys-color-on-error-container-light);--md-sys-color-outline: var(--md-sys-color-outline-light);--md-sys-color-background: var(--md-sys-color-background-light);--md-sys-color-on-background: var(--md-sys-color-on-background-light);--md-sys-color-surface: var(--md-sys-color-surface-light);--md-sys-color-on-surface: var(--md-sys-color-on-surface-light);--md-sys-color-surface-variant: var(--md-sys-color-surface-variant-light);--md-sys-color-on-surface-variant: var(--md-sys-color-on-surface-variant-light);--md-sys-color-inverse-surface: var(--md-sys-color-inverse-surface-light);--md-sys-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface-light);--md-sys-color-inverse-primary: var(--md-sys-color-inverse-primary-light);--md-sys-color-shadow: var(--md-sys-color-shadow-light);--md-sys-color-surface-tint: var(--md-sys-color-surface-tint-light);--md-sys-color-outline-variant: var(--md-sys-color-outline-variant-light);--md-sys-color-scrim: var(--md-sys-color-scrim-light)}@media(prefers-color-scheme: dark){:root,:host{color-scheme:dark;--md-sys-color-primary: var(--md-sys-color-primary-dark);--md-sys-color-on-primary: var(--md-sys-color-on-primary-dark);--md-sys-color-primary-container: var(--md-sys-color-primary-container-dark);--md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-dark);--md-sys-color-secondary: var(--md-sys-color-secondary-dark);--md-sys-color-on-secondary: var(--md-sys-color-on-secondary-dark);--md-sys-color-secondary-container: var(--md-sys-color-secondary-container-dark);--md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-dark);--md-sys-color-tertiary: var(--md-sys-color-tertiary-dark);--md-sys-color-on-tertiary: var(--md-sys-color-on-tertiary-dark);--md-sys-color-tertiary-container: var(--md-sys-color-tertiary-container-dark);--md-sys-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container-dark);--md-sys-color-error: var(--md-sys-color-error-dark);--md-sys-color-on-error: var(--md-sys-color-on-error-dark);--md-sys-color-error-container: var(--md-sys-color-error-container-dark);--md-sys-color-on-error-container: var(--md-sys-color-on-error-container-dark);--md-sys-color-outline: var(--md-sys-color-outline-dark);--md-sys-color-background: var(--md-sys-color-background-dark);--md-sys-color-on-background: var(--md-sys-color-on-background-dark);--md-sys-color-surface: var(--md-sys-color-surface-dark);--md-sys-color-on-surface: var(--md-sys-color-on-surface-dark);--md-sys-color-surface-variant: var(--md-sys-color-surface-variant-dark);--md-sys-color-on-surface-variant: var(--md-sys-color-on-surface-variant-dark);--md-sys-color-inverse-surface: var(--md-sys-color-inverse-surface-dark);--md-sys-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface-dark);--md-sys-color-inverse-primary: var(--md-sys-color-inverse-primary-dark);--md-sys-color-shadow: var(--md-sys-color-shadow-dark);--md-sys-color-surface-tint: var(--md-sys-color-surface-tint-dark);--md-sys-color-outline-variant: var(--md-sys-color-outline-variant-dark);--md-sys-color-scrim: var(--md-sys-color-scrim-dark)}}:root[theme=light]{color-scheme:light;--md-sys-color-primary: var(--md-sys-color-primary-light);--md-sys-color-on-primary: var(--md-sys-color-on-primary-light);--md-sys-color-primary-container: var(--md-sys-color-primary-container-light);--md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-light);--md-sys-color-secondary: var(--md-sys-color-secondary-light);--md-sys-color-on-secondary: var(--md-sys-color-on-secondary-light);--md-sys-color-secondary-container: var(--md-sys-color-secondary-container-light);--md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-light);--md-sys-color-tertiary: var(--md-sys-color-tertiary-light);--md-sys-color-on-tertiary: var(--md-sys-color-on-tertiary-light);--md-sys-color-tertiary-container: var(--md-sys-color-tertiary-container-light);--md-sys-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container-light);--md-sys-color-error: var(--md-sys-color-error-light);--md-sys-color-on-error: var(--md-sys-color-on-error-light);--md-sys-color-error-container: var(--md-sys-color-error-container-light);--md-sys-color-on-error-container: var(--md-sys-color-on-error-container-light);--md-sys-color-outline: var(--md-sys-color-outline-light);--md-sys-color-background: var(--md-sys-color-background-light);--md-sys-color-on-background: var(--md-sys-color-on-background-light);--md-sys-color-surface: var(--md-sys-color-surface-light);--md-sys-color-on-surface: var(--md-sys-color-on-surface-light);--md-sys-color-surface-variant: var(--md-sys-color-surface-variant-light);--md-sys-color-on-surface-variant: var(--md-sys-color-on-surface-variant-light);--md-sys-color-inverse-surface: var(--md-sys-color-inverse-surface-light);--md-sys-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface-light);--md-sys-color-inverse-primary: var(--md-sys-color-inverse-primary-light);--md-sys-color-shadow: var(--md-sys-color-shadow-light);--md-sys-color-surface-tint: var(--md-sys-color-surface-tint-light);--md-sys-color-outline-variant: var(--md-sys-color-outline-variant-light);--md-sys-color-scrim: var(--md-sys-color-scrim-light)}:root[theme=dark]{color-scheme:dark;--md-sys-color-primary: var(--md-sys-color-primary-dark);--md-sys-color-on-primary: var(--md-sys-color-on-primary-dark);--md-sys-color-primary-container: var(--md-sys-color-primary-container-dark);--md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-dark);--md-sys-color-secondary: var(--md-sys-color-secondary-dark);--md-sys-color-on-secondary: var(--md-sys-color-on-secondary-dark);--md-sys-color-secondary-container: var(--md-sys-color-secondary-container-dark);--md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-dark);--md-sys-color-tertiary: var(--md-sys-color-tertiary-dark);--md-sys-color-on-tertiary: var(--md-sys-color-on-tertiary-dark);--md-sys-color-tertiary-container: var(--md-sys-color-tertiary-container-dark);--md-sys-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container-dark);--md-sys-color-error: var(--md-sys-color-error-dark);--md-sys-color-on-error: var(--md-sys-color-on-error-dark);--md-sys-color-error-container: var(--md-sys-color-error-container-dark);--md-sys-color-on-error-container: var(--md-sys-color-on-error-container-dark);--md-sys-color-outline: var(--md-sys-color-outline-dark);--md-sys-color-background: var(--md-sys-color-background-dark);--md-sys-color-on-background: var(--md-sys-color-on-background-dark);--md-sys-color-surface: var(--md-sys-color-surface-dark);--md-sys-color-on-surface: var(--md-sys-color-on-surface-dark);--md-sys-color-surface-variant: var(--md-sys-color-surface-variant-dark);--md-sys-color-on-surface-variant: var(--md-sys-color-on-surface-variant-dark);--md-sys-color-inverse-surface: var(--md-sys-color-inverse-surface-dark);--md-sys-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface-dark);--md-sys-color-inverse-primary: var(--md-sys-color-inverse-primary-dark);--md-sys-color-shadow: var(--md-sys-color-shadow-dark);--md-sys-color-surface-tint: var(--md-sys-color-surface-tint-dark);--md-sys-color-outline-variant: var(--md-sys-color-outline-variant-dark);--md-sys-color-scrim: var(--md-sys-color-scrim-dark)}.primary{background-color:var(--md-sys-color-primary)}.primary-text{color:var(--md-sys-color-primary)}.on-primary{background-color:var(--md-sys-color-on-primary)}.on-primary-text{color:var(--md-sys-color-on-primary)}.primary-container{background-color:var(--md-sys-color-primary-container)}.primary-container-text{color:var(--md-sys-color-primary-container)}.on-primary-container{background-color:var(--md-sys-color-on-primary-container)}.on-primary-container-text{color:var(--md-sys-color-on-primary-container)}.secondary{background-color:var(--md-sys-color-secondary)}.secondary-text{color:var(--md-sys-color-secondary)}.on-secondary{background-color:var(--md-sys-color-on-secondary)}.on-secondary-text{color:var(--md-sys-color-on-secondary)}.secondary-container{background-color:var(--md-sys-color-secondary-container)}.secondary-container-text{color:var(--md-sys-color-secondary-container)}.on-secondary-container{background-color:var(--md-sys-color-on-secondary-container)}.on-secondary-container-text{color:var(--md-sys-color-on-secondary-container)}.tertiary{background-color:var(--md-sys-color-tertiary)}.tertiary-text{color:var(--md-sys-color-tertiary)}.on-tertiary{background-color:var(--md-sys-color-on-tertiary)}.on-tertiary-text{color:var(--md-sys-color-on-tertiary)}.tertiary-container{background-color:var(--md-sys-color-tertiary-container)}.tertiary-container-text{color:var(--md-sys-color-tertiary-container)}.on-tertiary-container{background-color:var(--md-sys-color-on-tertiary-container)}.on-tertiary-container-text{color:var(--md-sys-color-on-tertiary-container)}.error{background-color:var(--md-sys-color-error)}.error-text{color:var(--md-sys-color-error)}.on-error{background-color:var(--md-sys-color-on-error)}.on-error-text{color:var(--md-sys-color-on-error)}.error-container{background-color:var(--md-sys-color-error-container)}.error-container-text{color:var(--md-sys-color-error-container)}.on-error-container{background-color:var(--md-sys-color-on-error-container)}.on-error-container-text{color:var(--md-sys-color-on-error-container)}.background{background-color:var(--md-sys-color-background)}.background-text{color:var(--md-sys-color-background)}.on-background{background-color:var(--md-sys-color-on-background)}.on-background-text{color:var(--md-sys-color-on-background)}.surface,.switch label input[type=checkbox]:checked+.lever:after{background-color:var(--md-sys-color-surface)}.surface-text{color:var(--md-sys-color-surface)}.on-surface{background-color:var(--md-sys-color-on-surface)}.on-surface-text{color:var(--md-sys-color-on-surface)}.surface-variant,.progress,input[type=range]::-moz-range-track,input[type=range]::-webkit-slider-runnable-track{background-color:var(--md-sys-color-surface-variant)}.surface-variant-text{color:var(--md-sys-color-surface-variant)}.on-surface-variant{background-color:var(--md-sys-color-on-surface-variant)}.on-surface-variant-text,.chip>.material-icons{color:var(--md-sys-color-on-surface-variant)}.outline,.switch label .lever:after{background-color:var(--md-sys-color-outline)}.outline-text{color:var(--md-sys-color-outline)}.inverse-on-surface{background-color:var(--md-sys-color-inverse-on-surface)}.inverse-on-surface-text{color:var(--md-sys-color-inverse-on-surface)}.inverse-surface{background-color:var(--md-sys-color-inverse-surface)}.inverse-surface-text{color:var(--md-sys-color-inverse-surface)}.inverse-primary{background-color:var(--md-sys-color-inverse-primary)}.inverse-primary-text{color:var(--md-sys-color-inverse-primary)}.shadow{background-color:var(--md-sys-color-shadow)}.shadow-text{color:var(--md-sys-color-shadow)}.surface-tint{background-color:var(--md-sys-color-surface-tint)}.surface-tint-text{color:var(--md-sys-color-surface-tint)}.outline-variant{background-color:var(--md-sys-color-outline-variant)}.outline-variant-text{color:var(--md-sys-color-outline-variant)}.scrim{background-color:var(--md-sys-color-scrim)}.scrim-text{color:var(--md-sys-color-scrim)}.display-large{font-family:var(--md-sys-typescale-display-large-font-family-name);font-style:var(--md-sys-typescale-display-large-font-family-style);font-weight:var(--md-sys-typescale-display-large-font-weight);font-size:var(--md-sys-typescale-display-large-font-size);letter-spacing:var(--md-sys-typescale-display-large-tracking);line-height:var(--md-sys-typescale-display-large-height);text-transform:var(--md-sys-typescale-display-large-text-transform);-webkit-text-decoration:var(--md-sys-typescale-display-large-text-decoration);-moz-text-decoration:var(--md-sys-typescale-display-large-text-decoration);text-decoration:var(--md-sys-typescale-display-large-text-decoration)}.display-medium{font-family:var(--md-sys-typescale-display-medium-font-family-name);font-style:var(--md-sys-typescale-display-medium-font-family-style);font-weight:var(--md-sys-typescale-display-medium-font-weight);font-size:var(--md-sys-typescale-display-medium-font-size);letter-spacing:var(--md-sys-typescale-display-medium-tracking);line-height:var(--md-sys-typescale-display-medium-height);text-transform:var(--md-sys-typescale-display-medium-text-transform);-webkit-text-decoration:var(--md-sys-typescale-display-medium-text-decoration);-moz-text-decoration:var(--md-sys-typescale-display-medium-text-decoration);text-decoration:var(--md-sys-typescale-display-medium-text-decoration)}.display-small{font-family:var(--md-sys-typescale-display-small-font-family-name);font-style:var(--md-sys-typescale-display-small-font-family-style);font-weight:var(--md-sys-typescale-display-small-font-weight);font-size:var(--md-sys-typescale-display-small-font-size);letter-spacing:var(--md-sys-typescale-display-small-tracking);line-height:var(--md-sys-typescale-display-small-height);text-transform:var(--md-sys-typescale-display-small-text-transform);-webkit-text-decoration:var(--md-sys-typescale-display-small-text-decoration);-moz-text-decoration:var(--md-sys-typescale-display-small-text-decoration);text-decoration:var(--md-sys-typescale-display-small-text-decoration)}.headline-large{font-family:var(--md-sys-typescale-headline-large-font-family-name);font-style:var(--md-sys-typescale-headline-large-font-family-style);font-weight:var(--md-sys-typescale-headline-large-font-weight);font-size:var(--md-sys-typescale-headline-large-font-size);letter-spacing:var(--md-sys-typescale-headline-large-tracking);line-height:var(--md-sys-typescale-headline-large-height);text-transform:var(--md-sys-typescale-headline-large-text-transform);-webkit-text-decoration:var(--md-sys-typescale-headline-large-text-decoration);-moz-text-decoration:var(--md-sys-typescale-headline-large-text-decoration);text-decoration:var(--md-sys-typescale-headline-large-text-decoration)}.headline-medium{font-family:var(--md-sys-typescale-headline-medium-font-family-name);font-style:var(--md-sys-typescale-headline-medium-font-family-style);font-weight:var(--md-sys-typescale-headline-medium-font-weight);font-size:var(--md-sys-typescale-headline-medium-font-size);letter-spacing:var(--md-sys-typescale-headline-medium-tracking);line-height:var(--md-sys-typescale-headline-medium-height);text-transform:var(--md-sys-typescale-headline-medium-text-transform);-webkit-text-decoration:var(--md-sys-typescale-headline-medium-text-decoration);-moz-text-decoration:var(--md-sys-typescale-headline-medium-text-decoration);text-decoration:var(--md-sys-typescale-headline-medium-text-decoration)}.headline-small{font-family:var(--md-sys-typescale-headline-small-font-family-name);font-style:var(--md-sys-typescale-headline-small-font-family-style);font-weight:var(--md-sys-typescale-headline-small-font-weight);font-size:var(--md-sys-typescale-headline-small-font-size);letter-spacing:var(--md-sys-typescale-headline-small-tracking);line-height:var(--md-sys-typescale-headline-small-height);text-transform:var(--md-sys-typescale-headline-small-text-transform);-webkit-text-decoration:var(--md-sys-typescale-headline-small-text-decoration);-moz-text-decoration:var(--md-sys-typescale-headline-small-text-decoration);text-decoration:var(--md-sys-typescale-headline-small-text-decoration)}.body-large{font-family:var(--md-sys-typescale-body-large-font-family-name);font-style:var(--md-sys-typescale-body-large-font-family-style);font-weight:var(--md-sys-typescale-body-large-font-weight);font-size:var(--md-sys-typescale-body-large-font-size);letter-spacing:var(--md-sys-typescale-body-large-tracking);line-height:var(--md-sys-typescale-body-large-height);text-transform:var(--md-sys-typescale-body-large-text-transform);-webkit-text-decoration:var(--md-sys-typescale-body-large-text-decoration);-moz-text-decoration:var(--md-sys-typescale-body-large-text-decoration);text-decoration:var(--md-sys-typescale-body-large-text-decoration)}.body-medium{font-family:var(--md-sys-typescale-body-medium-font-family-name);font-style:var(--md-sys-typescale-body-medium-font-family-style);font-weight:var(--md-sys-typescale-body-medium-font-weight);font-size:var(--md-sys-typescale-body-medium-font-size);letter-spacing:var(--md-sys-typescale-body-medium-tracking);line-height:var(--md-sys-typescale-body-medium-height);text-transform:var(--md-sys-typescale-body-medium-text-transform);-webkit-text-decoration:var(--md-sys-typescale-body-medium-text-decoration);-moz-text-decoration:var(--md-sys-typescale-body-medium-text-decoration);text-decoration:var(--md-sys-typescale-body-medium-text-decoration)}.body-small{font-family:var(--md-sys-typescale-body-small-font-family-name);font-style:var(--md-sys-typescale-body-small-font-family-style);font-weight:var(--md-sys-typescale-body-small-font-weight);font-size:var(--md-sys-typescale-body-small-font-size);letter-spacing:var(--md-sys-typescale-body-small-tracking);line-height:var(--md-sys-typescale-body-small-height);text-transform:var(--md-sys-typescale-body-small-text-transform);-webkit-text-decoration:var(--md-sys-typescale-body-small-text-decoration);-moz-text-decoration:var(--md-sys-typescale-body-small-text-decoration);text-decoration:var(--md-sys-typescale-body-small-text-decoration)}.label-large{font-family:var(--md-sys-typescale-label-large-font-family-name);font-style:var(--md-sys-typescale-label-large-font-family-style);font-weight:var(--md-sys-typescale-label-large-font-weight);font-size:var(--md-sys-typescale-label-large-font-size);letter-spacing:var(--md-sys-typescale-label-large-tracking);line-height:var(--md-sys-typescale-label-large-height);text-transform:var(--md-sys-typescale-label-large-text-transform);-webkit-text-decoration:var(--md-sys-typescale-label-large-text-decoration);-moz-text-decoration:var(--md-sys-typescale-label-large-text-decoration);text-decoration:var(--md-sys-typescale-label-large-text-decoration)}.label-medium{font-family:var(--md-sys-typescale-label-medium-font-family-name);font-style:var(--md-sys-typescale-label-medium-font-family-style);font-weight:var(--md-sys-typescale-label-medium-font-weight);font-size:var(--md-sys-typescale-label-medium-font-size);letter-spacing:var(--md-sys-typescale-label-medium-tracking);line-height:var(--md-sys-typescale-label-medium-height);text-transform:var(--md-sys-typescale-label-medium-text-transform);-webkit-text-decoration:var(--md-sys-typescale-label-medium-text-decoration);-moz-text-decoration:var(--md-sys-typescale-label-medium-text-decoration);text-decoration:var(--md-sys-typescale-label-medium-text-decoration)}.label-small{font-family:var(--md-sys-typescale-label-small-font-family-name);font-style:var(--md-sys-typescale-label-small-font-family-style);font-weight:var(--md-sys-typescale-label-small-font-weight);font-size:var(--md-sys-typescale-label-small-font-size);letter-spacing:var(--md-sys-typescale-label-small-tracking);line-height:var(--md-sys-typescale-label-small-height);text-transform:var(--md-sys-typescale-label-small-text-transform);-webkit-text-decoration:var(--md-sys-typescale-label-small-text-decoration);-moz-text-decoration:var(--md-sys-typescale-label-small-text-decoration);text-decoration:var(--md-sys-typescale-label-small-text-decoration)}.title-large{font-family:var(--md-sys-typescale-title-large-font-family-name);font-style:var(--md-sys-typescale-title-large-font-family-style);font-weight:var(--md-sys-typescale-title-large-font-weight);font-size:var(--md-sys-typescale-title-large-font-size);letter-spacing:var(--md-sys-typescale-title-large-tracking);line-height:var(--md-sys-typescale-title-large-height);text-transform:var(--md-sys-typescale-title-large-text-transform);-webkit-text-decoration:var(--md-sys-typescale-title-large-text-decoration);-moz-text-decoration:var(--md-sys-typescale-title-large-text-decoration);text-decoration:var(--md-sys-typescale-title-large-text-decoration)}.title-medium{font-family:var(--md-sys-typescale-title-medium-font-family-name);font-style:var(--md-sys-typescale-title-medium-font-family-style);font-weight:var(--md-sys-typescale-title-medium-font-weight);font-size:var(--md-sys-typescale-title-medium-font-size);letter-spacing:var(--md-sys-typescale-title-medium-tracking);line-height:var(--md-sys-typescale-title-medium-height);text-transform:var(--md-sys-typescale-title-medium-text-transform);-webkit-text-decoration:var(--md-sys-typescale-title-medium-text-decoration);-moz-text-decoration:var(--md-sys-typescale-title-medium-text-decoration);text-decoration:var(--md-sys-typescale-title-medium-text-decoration)}.title-small{font-family:var(--md-sys-typescale-title-small-font-family-name);font-style:var(--md-sys-typescale-title-small-font-family-style);font-weight:var(--md-sys-typescale-title-small-font-weight);font-size:var(--md-sys-typescale-title-small-font-size);letter-spacing:var(--md-sys-typescale-title-small-tracking);line-height:var(--md-sys-typescale-title-small-height);text-transform:var(--md-sys-typescale-title-small-text-transform);-webkit-text-decoration:var(--md-sys-typescale-title-small-text-decoration);-moz-text-decoration:var(--md-sys-typescale-title-small-text-decoration);text-decoration:var(--md-sys-typescale-title-small-text-decoration)}.materialize-red{background-color:#e51c23 !important}.materialize-red-text{color:#e51c23 !important}.materialize-red.lighten-5{background-color:#fdeaeb !important}.materialize-red-text.text-lighten-5{color:#fdeaeb !important}.materialize-red.lighten-4{background-color:#f8c1c3 !important}.materialize-red-text.text-lighten-4{color:#f8c1c3 !important}.materialize-red.lighten-3{background-color:#f3989b !important}.materialize-red-text.text-lighten-3{color:#f3989b !important}.materialize-red.lighten-2{background-color:#ee6e73 !important}.materialize-red-text.text-lighten-2{color:#ee6e73 !important}.materialize-red.lighten-1{background-color:#ea454b !important}.materialize-red-text.text-lighten-1{color:#ea454b !important}.materialize-red.darken-1{background-color:#d0181e !important}.materialize-red-text.text-darken-1{color:#d0181e !important}.materialize-red.darken-2{background-color:#b9151b !important}.materialize-red-text.text-darken-2{color:#b9151b !important}.materialize-red.darken-3{background-color:#a21318 !important}.materialize-red-text.text-darken-3{color:#a21318 !important}.materialize-red.darken-4{background-color:#8b1014 !important}.materialize-red-text.text-darken-4{color:#8b1014 !important}.red{background-color:#f44336 !important}.red-text{color:#f44336 !important}.red.lighten-5{background-color:#ffebee !important}.red-text.text-lighten-5{color:#ffebee !important}.red.lighten-4{background-color:#ffcdd2 !important}.red-text.text-lighten-4{color:#ffcdd2 !important}.red.lighten-3{background-color:#ef9a9a !important}.red-text.text-lighten-3{color:#ef9a9a !important}.red.lighten-2{background-color:#e57373 !important}.red-text.text-lighten-2{color:#e57373 !important}.red.lighten-1{background-color:#ef5350 !important}.red-text.text-lighten-1{color:#ef5350 !important}.red.darken-1{background-color:#e53935 !important}.red-text.text-darken-1{color:#e53935 !important}.red.darken-2{background-color:#d32f2f !important}.red-text.text-darken-2{color:#d32f2f !important}.red.darken-3{background-color:#c62828 !important}.red-text.text-darken-3{color:#c62828 !important}.red.darken-4{background-color:#b71c1c !important}.red-text.text-darken-4{color:#b71c1c !important}.red.accent-1{background-color:#ff8a80 !important}.red-text.text-accent-1{color:#ff8a80 !important}.red.accent-2{background-color:#ff5252 !important}.red-text.text-accent-2{color:#ff5252 !important}.red.accent-3{background-color:#ff1744 !important}.red-text.text-accent-3{color:#ff1744 !important}.red.accent-4{background-color:#d50000 !important}.red-text.text-accent-4{color:#d50000 !important}.pink{background-color:#e91e63 !important}.pink-text{color:#e91e63 !important}.pink.lighten-5{background-color:#fce4ec !important}.pink-text.text-lighten-5{color:#fce4ec !important}.pink.lighten-4{background-color:#f8bbd0 !important}.pink-text.text-lighten-4{color:#f8bbd0 !important}.pink.lighten-3{background-color:#f48fb1 !important}.pink-text.text-lighten-3{color:#f48fb1 !important}.pink.lighten-2{background-color:#f06292 !important}.pink-text.text-lighten-2{color:#f06292 !important}.pink.lighten-1{background-color:#ec407a !important}.pink-text.text-lighten-1{color:#ec407a !important}.pink.darken-1{background-color:#d81b60 !important}.pink-text.text-darken-1{color:#d81b60 !important}.pink.darken-2{background-color:#c2185b !important}.pink-text.text-darken-2{color:#c2185b !important}.pink.darken-3{background-color:#ad1457 !important}.pink-text.text-darken-3{color:#ad1457 !important}.pink.darken-4{background-color:#880e4f !important}.pink-text.text-darken-4{color:#880e4f !important}.pink.accent-1{background-color:#ff80ab !important}.pink-text.text-accent-1{color:#ff80ab !important}.pink.accent-2{background-color:#ff4081 !important}.pink-text.text-accent-2{color:#ff4081 !important}.pink.accent-3{background-color:#f50057 !important}.pink-text.text-accent-3{color:#f50057 !important}.pink.accent-4{background-color:#c51162 !important}.pink-text.text-accent-4{color:#c51162 !important}.purple{background-color:#9c27b0 !important}.purple-text{color:#9c27b0 !important}.purple.lighten-5{background-color:#f3e5f5 !important}.purple-text.text-lighten-5{color:#f3e5f5 !important}.purple.lighten-4{background-color:#e1bee7 !important}.purple-text.text-lighten-4{color:#e1bee7 !important}.purple.lighten-3{background-color:#ce93d8 !important}.purple-text.text-lighten-3{color:#ce93d8 !important}.purple.lighten-2{background-color:#ba68c8 !important}.purple-text.text-lighten-2{color:#ba68c8 !important}.purple.lighten-1{background-color:#ab47bc !important}.purple-text.text-lighten-1{color:#ab47bc !important}.purple.darken-1{background-color:#8e24aa !important}.purple-text.text-darken-1{color:#8e24aa !important}.purple.darken-2{background-color:#7b1fa2 !important}.purple-text.text-darken-2{color:#7b1fa2 !important}.purple.darken-3{background-color:#6a1b9a !important}.purple-text.text-darken-3{color:#6a1b9a !important}.purple.darken-4{background-color:#4a148c !important}.purple-text.text-darken-4{color:#4a148c !important}.purple.accent-1{background-color:#ea80fc !important}.purple-text.text-accent-1{color:#ea80fc !important}.purple.accent-2{background-color:#e040fb !important}.purple-text.text-accent-2{color:#e040fb !important}.purple.accent-3{background-color:#d500f9 !important}.purple-text.text-accent-3{color:#d500f9 !important}.purple.accent-4{background-color:#a0f !important}.purple-text.text-accent-4{color:#a0f !important}.deep-purple{background-color:#673ab7 !important}.deep-purple-text{color:#673ab7 !important}.deep-purple.lighten-5{background-color:#ede7f6 !important}.deep-purple-text.text-lighten-5{color:#ede7f6 !important}.deep-purple.lighten-4{background-color:#d1c4e9 !important}.deep-purple-text.text-lighten-4{color:#d1c4e9 !important}.deep-purple.lighten-3{background-color:#b39ddb !important}.deep-purple-text.text-lighten-3{color:#b39ddb !important}.deep-purple.lighten-2{background-color:#9575cd !important}.deep-purple-text.text-lighten-2{color:#9575cd !important}.deep-purple.lighten-1{background-color:#7e57c2 !important}.deep-purple-text.text-lighten-1{color:#7e57c2 !important}.deep-purple.darken-1{background-color:#5e35b1 !important}.deep-purple-text.text-darken-1{color:#5e35b1 !important}.deep-purple.darken-2{background-color:#512da8 !important}.deep-purple-text.text-darken-2{color:#512da8 !important}.deep-purple.darken-3{background-color:#4527a0 !important}.deep-purple-text.text-darken-3{color:#4527a0 !important}.deep-purple.darken-4{background-color:#311b92 !important}.deep-purple-text.text-darken-4{color:#311b92 !important}.deep-purple.accent-1{background-color:#b388ff !important}.deep-purple-text.text-accent-1{color:#b388ff !important}.deep-purple.accent-2{background-color:#7c4dff !important}.deep-purple-text.text-accent-2{color:#7c4dff !important}.deep-purple.accent-3{background-color:#651fff !important}.deep-purple-text.text-accent-3{color:#651fff !important}.deep-purple.accent-4{background-color:#6200ea !important}.deep-purple-text.text-accent-4{color:#6200ea !important}.indigo{background-color:#3f51b5 !important}.indigo-text{color:#3f51b5 !important}.indigo.lighten-5{background-color:#e8eaf6 !important}.indigo-text.text-lighten-5{color:#e8eaf6 !important}.indigo.lighten-4{background-color:#c5cae9 !important}.indigo-text.text-lighten-4{color:#c5cae9 !important}.indigo.lighten-3{background-color:#9fa8da !important}.indigo-text.text-lighten-3{color:#9fa8da !important}.indigo.lighten-2{background-color:#7986cb !important}.indigo-text.text-lighten-2{color:#7986cb !important}.indigo.lighten-1{background-color:#5c6bc0 !important}.indigo-text.text-lighten-1{color:#5c6bc0 !important}.indigo.darken-1{background-color:#3949ab !important}.indigo-text.text-darken-1{color:#3949ab !important}.indigo.darken-2{background-color:#303f9f !important}.indigo-text.text-darken-2{color:#303f9f !important}.indigo.darken-3{background-color:#283593 !important}.indigo-text.text-darken-3{color:#283593 !important}.indigo.darken-4{background-color:#1a237e !important}.indigo-text.text-darken-4{color:#1a237e !important}.indigo.accent-1{background-color:#8c9eff !important}.indigo-text.text-accent-1{color:#8c9eff !important}.indigo.accent-2{background-color:#536dfe !important}.indigo-text.text-accent-2{color:#536dfe !important}.indigo.accent-3{background-color:#3d5afe !important}.indigo-text.text-accent-3{color:#3d5afe !important}.indigo.accent-4{background-color:#304ffe !important}.indigo-text.text-accent-4{color:#304ffe !important}.blue{background-color:#2196f3 !important}.blue-text{color:#2196f3 !important}.blue.lighten-5{background-color:#e3f2fd !important}.blue-text.text-lighten-5{color:#e3f2fd !important}.blue.lighten-4{background-color:#bbdefb !important}.blue-text.text-lighten-4{color:#bbdefb !important}.blue.lighten-3{background-color:#90caf9 !important}.blue-text.text-lighten-3{color:#90caf9 !important}.blue.lighten-2{background-color:#64b5f6 !important}.blue-text.text-lighten-2{color:#64b5f6 !important}.blue.lighten-1{background-color:#42a5f5 !important}.blue-text.text-lighten-1{color:#42a5f5 !important}.blue.darken-1{background-color:#1e88e5 !important}.blue-text.text-darken-1{color:#1e88e5 !important}.blue.darken-2{background-color:#1976d2 !important}.blue-text.text-darken-2{color:#1976d2 !important}.blue.darken-3{background-color:#1565c0 !important}.blue-text.text-darken-3{color:#1565c0 !important}.blue.darken-4{background-color:#0d47a1 !important}.blue-text.text-darken-4{color:#0d47a1 !important}.blue.accent-1{background-color:#82b1ff !important}.blue-text.text-accent-1{color:#82b1ff !important}.blue.accent-2{background-color:#448aff !important}.blue-text.text-accent-2{color:#448aff !important}.blue.accent-3{background-color:#2979ff !important}.blue-text.text-accent-3{color:#2979ff !important}.blue.accent-4{background-color:#2962ff !important}.blue-text.text-accent-4{color:#2962ff !important}.light-blue{background-color:#03a9f4 !important}.light-blue-text{color:#03a9f4 !important}.light-blue.lighten-5{background-color:#e1f5fe !important}.light-blue-text.text-lighten-5{color:#e1f5fe !important}.light-blue.lighten-4{background-color:#b3e5fc !important}.light-blue-text.text-lighten-4{color:#b3e5fc !important}.light-blue.lighten-3{background-color:#81d4fa !important}.light-blue-text.text-lighten-3{color:#81d4fa !important}.light-blue.lighten-2{background-color:#4fc3f7 !important}.light-blue-text.text-lighten-2{color:#4fc3f7 !important}.light-blue.lighten-1{background-color:#29b6f6 !important}.light-blue-text.text-lighten-1{color:#29b6f6 !important}.light-blue.darken-1{background-color:#039be5 !important}.light-blue-text.text-darken-1{color:#039be5 !important}.light-blue.darken-2{background-color:#0288d1 !important}.light-blue-text.text-darken-2{color:#0288d1 !important}.light-blue.darken-3{background-color:#0277bd !important}.light-blue-text.text-darken-3{color:#0277bd !important}.light-blue.darken-4{background-color:#01579b !important}.light-blue-text.text-darken-4{color:#01579b !important}.light-blue.accent-1{background-color:#80d8ff !important}.light-blue-text.text-accent-1{color:#80d8ff !important}.light-blue.accent-2{background-color:#40c4ff !important}.light-blue-text.text-accent-2{color:#40c4ff !important}.light-blue.accent-3{background-color:#00b0ff !important}.light-blue-text.text-accent-3{color:#00b0ff !important}.light-blue.accent-4{background-color:#0091ea !important}.light-blue-text.text-accent-4{color:#0091ea !important}.cyan{background-color:#00bcd4 !important}.cyan-text{color:#00bcd4 !important}.cyan.lighten-5{background-color:#e0f7fa !important}.cyan-text.text-lighten-5{color:#e0f7fa !important}.cyan.lighten-4{background-color:#b2ebf2 !important}.cyan-text.text-lighten-4{color:#b2ebf2 !important}.cyan.lighten-3{background-color:#80deea !important}.cyan-text.text-lighten-3{color:#80deea !important}.cyan.lighten-2{background-color:#4dd0e1 !important}.cyan-text.text-lighten-2{color:#4dd0e1 !important}.cyan.lighten-1{background-color:#26c6da !important}.cyan-text.text-lighten-1{color:#26c6da !important}.cyan.darken-1{background-color:#00acc1 !important}.cyan-text.text-darken-1{color:#00acc1 !important}.cyan.darken-2{background-color:#0097a7 !important}.cyan-text.text-darken-2{color:#0097a7 !important}.cyan.darken-3{background-color:#00838f !important}.cyan-text.text-darken-3{color:#00838f !important}.cyan.darken-4{background-color:#006064 !important}.cyan-text.text-darken-4{color:#006064 !important}.cyan.accent-1{background-color:#84ffff !important}.cyan-text.text-accent-1{color:#84ffff !important}.cyan.accent-2{background-color:#18ffff !important}.cyan-text.text-accent-2{color:#18ffff !important}.cyan.accent-3{background-color:#00e5ff !important}.cyan-text.text-accent-3{color:#00e5ff !important}.cyan.accent-4{background-color:#00b8d4 !important}.cyan-text.text-accent-4{color:#00b8d4 !important}.teal{background-color:#009688 !important}.teal-text{color:#009688 !important}.teal.lighten-5{background-color:#e0f2f1 !important}.teal-text.text-lighten-5{color:#e0f2f1 !important}.teal.lighten-4{background-color:#b2dfdb !important}.teal-text.text-lighten-4{color:#b2dfdb !important}.teal.lighten-3{background-color:#80cbc4 !important}.teal-text.text-lighten-3{color:#80cbc4 !important}.teal.lighten-2{background-color:#4db6ac !important}.teal-text.text-lighten-2{color:#4db6ac !important}.teal.lighten-1{background-color:#26a69a !important}.teal-text.text-lighten-1{color:#26a69a !important}.teal.darken-1{background-color:#00897b !important}.teal-text.text-darken-1{color:#00897b !important}.teal.darken-2{background-color:#00796b !important}.teal-text.text-darken-2{color:#00796b !important}.teal.darken-3{background-color:#00695c !important}.teal-text.text-darken-3{color:#00695c !important}.teal.darken-4{background-color:#004d40 !important}.teal-text.text-darken-4{color:#004d40 !important}.teal.accent-1{background-color:#a7ffeb !important}.teal-text.text-accent-1{color:#a7ffeb !important}.teal.accent-2{background-color:#64ffda !important}.teal-text.text-accent-2{color:#64ffda !important}.teal.accent-3{background-color:#1de9b6 !important}.teal-text.text-accent-3{color:#1de9b6 !important}.teal.accent-4{background-color:#00bfa5 !important}.teal-text.text-accent-4{color:#00bfa5 !important}.green{background-color:#4caf50 !important}.green-text{color:#4caf50 !important}.green.lighten-5{background-color:#e8f5e9 !important}.green-text.text-lighten-5{color:#e8f5e9 !important}.green.lighten-4{background-color:#c8e6c9 !important}.green-text.text-lighten-4{color:#c8e6c9 !important}.green.lighten-3{background-color:#a5d6a7 !important}.green-text.text-lighten-3{color:#a5d6a7 !important}.green.lighten-2{background-color:#81c784 !important}.green-text.text-lighten-2{color:#81c784 !important}.green.lighten-1{background-color:#66bb6a !important}.green-text.text-lighten-1{color:#66bb6a !important}.green.darken-1{background-color:#43a047 !important}.green-text.text-darken-1{color:#43a047 !important}.green.darken-2{background-color:#388e3c !important}.green-text.text-darken-2{color:#388e3c !important}.green.darken-3{background-color:#2e7d32 !important}.green-text.text-darken-3{color:#2e7d32 !important}.green.darken-4{background-color:#1b5e20 !important}.green-text.text-darken-4{color:#1b5e20 !important}.green.accent-1{background-color:#b9f6ca !important}.green-text.text-accent-1{color:#b9f6ca !important}.green.accent-2{background-color:#69f0ae !important}.green-text.text-accent-2{color:#69f0ae !important}.green.accent-3{background-color:#00e676 !important}.green-text.text-accent-3{color:#00e676 !important}.green.accent-4{background-color:#00c853 !important}.green-text.text-accent-4{color:#00c853 !important}.light-green{background-color:#8bc34a !important}.light-green-text{color:#8bc34a !important}.light-green.lighten-5{background-color:#f1f8e9 !important}.light-green-text.text-lighten-5{color:#f1f8e9 !important}.light-green.lighten-4{background-color:#dcedc8 !important}.light-green-text.text-lighten-4{color:#dcedc8 !important}.light-green.lighten-3{background-color:#c5e1a5 !important}.light-green-text.text-lighten-3{color:#c5e1a5 !important}.light-green.lighten-2{background-color:#aed581 !important}.light-green-text.text-lighten-2{color:#aed581 !important}.light-green.lighten-1{background-color:#9ccc65 !important}.light-green-text.text-lighten-1{color:#9ccc65 !important}.light-green.darken-1{background-color:#7cb342 !important}.light-green-text.text-darken-1{color:#7cb342 !important}.light-green.darken-2{background-color:#689f38 !important}.light-green-text.text-darken-2{color:#689f38 !important}.light-green.darken-3{background-color:#558b2f !important}.light-green-text.text-darken-3{color:#558b2f !important}.light-green.darken-4{background-color:#33691e !important}.light-green-text.text-darken-4{color:#33691e !important}.light-green.accent-1{background-color:#ccff90 !important}.light-green-text.text-accent-1{color:#ccff90 !important}.light-green.accent-2{background-color:#b2ff59 !important}.light-green-text.text-accent-2{color:#b2ff59 !important}.light-green.accent-3{background-color:#76ff03 !important}.light-green-text.text-accent-3{color:#76ff03 !important}.light-green.accent-4{background-color:#64dd17 !important}.light-green-text.text-accent-4{color:#64dd17 !important}.lime{background-color:#cddc39 !important}.lime-text{color:#cddc39 !important}.lime.lighten-5{background-color:#f9fbe7 !important}.lime-text.text-lighten-5{color:#f9fbe7 !important}.lime.lighten-4{background-color:#f0f4c3 !important}.lime-text.text-lighten-4{color:#f0f4c3 !important}.lime.lighten-3{background-color:#e6ee9c !important}.lime-text.text-lighten-3{color:#e6ee9c !important}.lime.lighten-2{background-color:#dce775 !important}.lime-text.text-lighten-2{color:#dce775 !important}.lime.lighten-1{background-color:#d4e157 !important}.lime-text.text-lighten-1{color:#d4e157 !important}.lime.darken-1{background-color:#c0ca33 !important}.lime-text.text-darken-1{color:#c0ca33 !important}.lime.darken-2{background-color:#afb42b !important}.lime-text.text-darken-2{color:#afb42b !important}.lime.darken-3{background-color:#9e9d24 !important}.lime-text.text-darken-3{color:#9e9d24 !important}.lime.darken-4{background-color:#827717 !important}.lime-text.text-darken-4{color:#827717 !important}.lime.accent-1{background-color:#f4ff81 !important}.lime-text.text-accent-1{color:#f4ff81 !important}.lime.accent-2{background-color:#eeff41 !important}.lime-text.text-accent-2{color:#eeff41 !important}.lime.accent-3{background-color:#c6ff00 !important}.lime-text.text-accent-3{color:#c6ff00 !important}.lime.accent-4{background-color:#aeea00 !important}.lime-text.text-accent-4{color:#aeea00 !important}.yellow{background-color:#ffeb3b !important}.yellow-text{color:#ffeb3b !important}.yellow.lighten-5{background-color:#fffde7 !important}.yellow-text.text-lighten-5{color:#fffde7 !important}.yellow.lighten-4{background-color:#fff9c4 !important}.yellow-text.text-lighten-4{color:#fff9c4 !important}.yellow.lighten-3{background-color:#fff59d !important}.yellow-text.text-lighten-3{color:#fff59d !important}.yellow.lighten-2{background-color:#fff176 !important}.yellow-text.text-lighten-2{color:#fff176 !important}.yellow.lighten-1{background-color:#ffee58 !important}.yellow-text.text-lighten-1{color:#ffee58 !important}.yellow.darken-1{background-color:#fdd835 !important}.yellow-text.text-darken-1{color:#fdd835 !important}.yellow.darken-2{background-color:#fbc02d !important}.yellow-text.text-darken-2{color:#fbc02d !important}.yellow.darken-3{background-color:#f9a825 !important}.yellow-text.text-darken-3{color:#f9a825 !important}.yellow.darken-4{background-color:#f57f17 !important}.yellow-text.text-darken-4{color:#f57f17 !important}.yellow.accent-1{background-color:#ffff8d !important}.yellow-text.text-accent-1{color:#ffff8d !important}.yellow.accent-2{background-color:#ff0 !important}.yellow-text.text-accent-2{color:#ff0 !important}.yellow.accent-3{background-color:#ffea00 !important}.yellow-text.text-accent-3{color:#ffea00 !important}.yellow.accent-4{background-color:#ffd600 !important}.yellow-text.text-accent-4{color:#ffd600 !important}.amber{background-color:#ffc107 !important}.amber-text{color:#ffc107 !important}.amber.lighten-5{background-color:#fff8e1 !important}.amber-text.text-lighten-5{color:#fff8e1 !important}.amber.lighten-4{background-color:#ffecb3 !important}.amber-text.text-lighten-4{color:#ffecb3 !important}.amber.lighten-3{background-color:#ffe082 !important}.amber-text.text-lighten-3{color:#ffe082 !important}.amber.lighten-2{background-color:#ffd54f !important}.amber-text.text-lighten-2{color:#ffd54f !important}.amber.lighten-1{background-color:#ffca28 !important}.amber-text.text-lighten-1{color:#ffca28 !important}.amber.darken-1{background-color:#ffb300 !important}.amber-text.text-darken-1{color:#ffb300 !important}.amber.darken-2{background-color:#ffa000 !important}.amber-text.text-darken-2{color:#ffa000 !important}.amber.darken-3{background-color:#ff8f00 !important}.amber-text.text-darken-3{color:#ff8f00 !important}.amber.darken-4{background-color:#ff6f00 !important}.amber-text.text-darken-4{color:#ff6f00 !important}.amber.accent-1{background-color:#ffe57f !important}.amber-text.text-accent-1{color:#ffe57f !important}.amber.accent-2{background-color:#ffd740 !important}.amber-text.text-accent-2{color:#ffd740 !important}.amber.accent-3{background-color:#ffc400 !important}.amber-text.text-accent-3{color:#ffc400 !important}.amber.accent-4{background-color:#ffab00 !important}.amber-text.text-accent-4{color:#ffab00 !important}.orange{background-color:#ff9800 !important}.orange-text{color:#ff9800 !important}.orange.lighten-5{background-color:#fff3e0 !important}.orange-text.text-lighten-5{color:#fff3e0 !important}.orange.lighten-4{background-color:#ffe0b2 !important}.orange-text.text-lighten-4{color:#ffe0b2 !important}.orange.lighten-3{background-color:#ffcc80 !important}.orange-text.text-lighten-3{color:#ffcc80 !important}.orange.lighten-2{background-color:#ffb74d !important}.orange-text.text-lighten-2{color:#ffb74d !important}.orange.lighten-1{background-color:#ffa726 !important}.orange-text.text-lighten-1{color:#ffa726 !important}.orange.darken-1{background-color:#fb8c00 !important}.orange-text.text-darken-1{color:#fb8c00 !important}.orange.darken-2{background-color:#f57c00 !important}.orange-text.text-darken-2{color:#f57c00 !important}.orange.darken-3{background-color:#ef6c00 !important}.orange-text.text-darken-3{color:#ef6c00 !important}.orange.darken-4{background-color:#e65100 !important}.orange-text.text-darken-4{color:#e65100 !important}.orange.accent-1{background-color:#ffd180 !important}.orange-text.text-accent-1{color:#ffd180 !important}.orange.accent-2{background-color:#ffab40 !important}.orange-text.text-accent-2{color:#ffab40 !important}.orange.accent-3{background-color:#ff9100 !important}.orange-text.text-accent-3{color:#ff9100 !important}.orange.accent-4{background-color:#ff6d00 !important}.orange-text.text-accent-4{color:#ff6d00 !important}.deep-orange{background-color:#ff5722 !important}.deep-orange-text{color:#ff5722 !important}.deep-orange.lighten-5{background-color:#fbe9e7 !important}.deep-orange-text.text-lighten-5{color:#fbe9e7 !important}.deep-orange.lighten-4{background-color:#ffccbc !important}.deep-orange-text.text-lighten-4{color:#ffccbc !important}.deep-orange.lighten-3{background-color:#ffab91 !important}.deep-orange-text.text-lighten-3{color:#ffab91 !important}.deep-orange.lighten-2{background-color:#ff8a65 !important}.deep-orange-text.text-lighten-2{color:#ff8a65 !important}.deep-orange.lighten-1{background-color:#ff7043 !important}.deep-orange-text.text-lighten-1{color:#ff7043 !important}.deep-orange.darken-1{background-color:#f4511e !important}.deep-orange-text.text-darken-1{color:#f4511e !important}.deep-orange.darken-2{background-color:#e64a19 !important}.deep-orange-text.text-darken-2{color:#e64a19 !important}.deep-orange.darken-3{background-color:#d84315 !important}.deep-orange-text.text-darken-3{color:#d84315 !important}.deep-orange.darken-4{background-color:#bf360c !important}.deep-orange-text.text-darken-4{color:#bf360c !important}.deep-orange.accent-1{background-color:#ff9e80 !important}.deep-orange-text.text-accent-1{color:#ff9e80 !important}.deep-orange.accent-2{background-color:#ff6e40 !important}.deep-orange-text.text-accent-2{color:#ff6e40 !important}.deep-orange.accent-3{background-color:#ff3d00 !important}.deep-orange-text.text-accent-3{color:#ff3d00 !important}.deep-orange.accent-4{background-color:#dd2c00 !important}.deep-orange-text.text-accent-4{color:#dd2c00 !important}.brown{background-color:#795548 !important}.brown-text{color:#795548 !important}.brown.lighten-5{background-color:#efebe9 !important}.brown-text.text-lighten-5{color:#efebe9 !important}.brown.lighten-4{background-color:#d7ccc8 !important}.brown-text.text-lighten-4{color:#d7ccc8 !important}.brown.lighten-3{background-color:#bcaaa4 !important}.brown-text.text-lighten-3{color:#bcaaa4 !important}.brown.lighten-2{background-color:#a1887f !important}.brown-text.text-lighten-2{color:#a1887f !important}.brown.lighten-1{background-color:#8d6e63 !important}.brown-text.text-lighten-1{color:#8d6e63 !important}.brown.darken-1{background-color:#6d4c41 !important}.brown-text.text-darken-1{color:#6d4c41 !important}.brown.darken-2{background-color:#5d4037 !important}.brown-text.text-darken-2{color:#5d4037 !important}.brown.darken-3{background-color:#4e342e !important}.brown-text.text-darken-3{color:#4e342e !important}.brown.darken-4{background-color:#3e2723 !important}.brown-text.text-darken-4{color:#3e2723 !important}.blue-grey{background-color:#607d8b !important}.blue-grey-text{color:#607d8b !important}.blue-grey.lighten-5{background-color:#eceff1 !important}.blue-grey-text.text-lighten-5{color:#eceff1 !important}.blue-grey.lighten-4{background-color:#cfd8dc !important}.blue-grey-text.text-lighten-4{color:#cfd8dc !important}.blue-grey.lighten-3{background-color:#b0bec5 !important}.blue-grey-text.text-lighten-3{color:#b0bec5 !important}.blue-grey.lighten-2{background-color:#90a4ae !important}.blue-grey-text.text-lighten-2{color:#90a4ae !important}.blue-grey.lighten-1{background-color:#78909c !important}.blue-grey-text.text-lighten-1{color:#78909c !important}.blue-grey.darken-1{background-color:#546e7a !important}.blue-grey-text.text-darken-1{color:#546e7a !important}.blue-grey.darken-2{background-color:#455a64 !important}.blue-grey-text.text-darken-2{color:#455a64 !important}.blue-grey.darken-3{background-color:#37474f !important}.blue-grey-text.text-darken-3{color:#37474f !important}.blue-grey.darken-4{background-color:#263238 !important}.blue-grey-text.text-darken-4{color:#263238 !important}.grey{background-color:#9e9e9e !important}.grey-text{color:#9e9e9e !important}.grey.lighten-5{background-color:#fafafa !important}.grey-text.text-lighten-5{color:#fafafa !important}.grey.lighten-4{background-color:#f5f5f5 !important}.grey-text.text-lighten-4{color:#f5f5f5 !important}.grey.lighten-3{background-color:#eee !important}.grey-text.text-lighten-3{color:#eee !important}.grey.lighten-2{background-color:#e0e0e0 !important}.grey-text.text-lighten-2{color:#e0e0e0 !important}.grey.lighten-1{background-color:#bdbdbd !important}.grey-text.text-lighten-1{color:#bdbdbd !important}.grey.darken-1{background-color:#757575 !important}.grey-text.text-darken-1{color:#757575 !important}.grey.darken-2{background-color:#616161 !important}.grey-text.text-darken-2{color:#616161 !important}.grey.darken-3{background-color:#424242 !important}.grey-text.text-darken-3{color:#424242 !important}.grey.darken-4{background-color:#212121 !important}.grey-text.text-darken-4{color:#212121 !important}.black{background-color:#000 !important}.black-text{color:#000 !important}.white{background-color:#fff !important}.white-text{color:#fff !important}.transparent{background-color:rgba(0,0,0,0) !important}.transparent-text{color:rgba(0,0,0,0) !important}/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{-webkit-box-sizing:content-box;box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:rgba(0,0,0,0)}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;-moz-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{-webkit-box-sizing:border-box;box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{-webkit-box-sizing:border-box;box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html{-webkit-box-sizing:border-box;box-sizing:border-box}*,*:before,*:after{-webkit-box-sizing:inherit;box-sizing:inherit}body{background-color:var(--md-sys-color-background);color:var(--md-sys-color-on-background)}button,input,optgroup,select,textarea{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif}a{color:#039be5;text-decoration:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}.valign-wrapper{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.clearfix{clear:both}.z-depth-0,.btn:focus.tonal,.btn-small:focus.tonal,.btn-large:focus.tonal,.btn:focus.filled,.btn-small:focus.filled,.btn-large:focus.filled,.btn.disabled,.btn-floating.disabled,.btn-large.disabled,.btn-small.disabled,.btn-flat.disabled,.btn:disabled,.btn-floating:disabled,.btn-large:disabled,.btn-small:disabled,.btn-flat:disabled,.btn[disabled],.btn-floating[disabled],.btn-large[disabled],.btn-small[disabled],.btn-flat[disabled],.btn.text,.text.btn-small,.text.btn-large,.btn-flat{-webkit-box-shadow:none !important;box-shadow:none !important}.z-depth-1,.sidenav,.collapsible,.dropdown-content,.btn-floating,.btn:focus.elevated,.btn-small:focus.elevated,.btn-large:focus.elevated,.btn.tonal:hover,.tonal.btn-small:hover,.tonal.btn-large:hover,.btn.filled:hover,.filled.btn-small:hover,.filled.btn-large:hover,.btn.elevated,.elevated.btn-small,.elevated.btn-large,.card,.card-panel,nav{-webkit-box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.12),0 1px 5px 0 rgba(0,0,0,.2);box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.12),0 1px 5px 0 rgba(0,0,0,.2)}.z-depth-1-half,.btn-floating:focus,.btn-floating:hover{-webkit-box-shadow:0 3px 3px 0 rgba(0,0,0,.14),0 1px 7px 0 rgba(0,0,0,.12),0 3px 1px -1px rgba(0,0,0,.2);box-shadow:0 3px 3px 0 rgba(0,0,0,.14),0 1px 7px 0 rgba(0,0,0,.12),0 3px 1px -1px rgba(0,0,0,.2)}.z-depth-2,.btn.elevated:hover,.elevated.btn-small:hover,.elevated.btn-large:hover{-webkit-box-shadow:0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12),0 2px 4px -1px rgba(0,0,0,.3);box-shadow:0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12),0 2px 4px -1px rgba(0,0,0,.3)}.z-depth-3,.toast{-webkit-box-shadow:0 8px 17px 2px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12),0 5px 5px -3px rgba(0,0,0,.2);box-shadow:0 8px 17px 2px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12),0 5px 5px -3px rgba(0,0,0,.2)}.z-depth-4{-webkit-box-shadow:0 16px 24px 2px rgba(0,0,0,.14),0 6px 30px 5px rgba(0,0,0,.12),0 8px 10px -7px rgba(0,0,0,.2);box-shadow:0 16px 24px 2px rgba(0,0,0,.14),0 6px 30px 5px rgba(0,0,0,.12),0 8px 10px -7px rgba(0,0,0,.2)}.z-depth-5,.modal{-webkit-box-shadow:0 24px 38px 3px rgba(0,0,0,.14),0 9px 46px 8px rgba(0,0,0,.12),0 11px 15px -7px rgba(0,0,0,.2);box-shadow:0 24px 38px 3px rgba(0,0,0,.14),0 9px 46px 8px rgba(0,0,0,.12),0 11px 15px -7px rgba(0,0,0,.2)}.hoverable{-webkit-transition:-webkit-box-shadow .25s;transition:-webkit-box-shadow .25s;transition:box-shadow .25s;transition:box-shadow .25s, -webkit-box-shadow .25s}.hoverable:hover{-webkit-box-shadow:0 8px 17px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19);box-shadow:0 8px 17px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19)}.divider{height:1px;overflow:hidden;background-color:var(--md-sys-color-outline-variant)}blockquote{margin:20px 0;padding-left:1.5rem;border-left:5px solid var(--md-sys-color-primary)}i{line-height:inherit}i.left{float:left;margin-left:-8px}i.right{float:right}i.tiny{font-size:1rem}i.small{font-size:2rem}i.medium{font-size:4rem}i.large{font-size:6rem}html.noscroll{position:fixed;overflow-y:scroll;width:100%}img.responsive-img,video.responsive-video{max-width:100%;height:auto}.pagination li{display:inline-block;border-radius:2px;text-align:center;vertical-align:top;height:30px}.pagination li a{color:var(--md-sys-color-on-surface-variant);display:inline-block;font-size:1.2rem;padding:0 10px;line-height:30px}.pagination li:hover:not(.disabled){background-color:rgba(var(--md-sys-color-primary-numeric), 0.06)}.pagination li.active a{color:var(--md-sys-color-on-primary)}.pagination li.active,.pagination li.active:hover{background-color:var(--md-sys-color-primary)}.pagination li.disabled a{cursor:default;color:var(--md-sys-color-on-surface)}.pagination li i{font-size:2rem}.pagination li.pages ul li{display:inline-block;float:none}@media only screen and (max-width : 992.99px){.pagination{width:100%}.pagination li.prev,.pagination li.next{width:10%}.pagination li.pages{width:80%;overflow:hidden;white-space:nowrap}}.breadcrumb{display:inline-block;font-size:18px;color:var(--font-on-primary-color-medium)}.breadcrumb i,.breadcrumb [class^=mdi-],.breadcrumb [class*=mdi-],.breadcrumb i.material-icons,.breadcrumb i.material-symbols-outlined,.breadcrumb i.material-symbols-rounded,.breadcrumb i.material-symbols-sharp{display:block;float:left;font-size:24px}.breadcrumb:before{content:"";color:var(--font-on-primary-color-medium);vertical-align:top;display:inline-block;font-family:"Material Symbols Outlined","Material Symbols Rounded","Material Symbols Sharp","Material Icons";font-weight:normal;font-style:normal;font-size:25px;margin:0 10px 0 8px;-webkit-font-smoothing:antialiased;float:left}.breadcrumb:first-child:before{display:none}.breadcrumb:last-child{color:var(--md-sys-color-on-primary)}.parallax-container{position:relative;overflow:hidden;height:500px}.parallax-container .parallax{position:absolute;top:0;left:0;right:0;bottom:0;z-index:-1}.parallax-container .parallax img{opacity:0;position:absolute;left:50%;bottom:0;min-width:100%;min-height:100%;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);-webkit-transform:translateX(-50%);transform:translateX(-50%)}.pin-top,.pin-bottom{position:relative}.pinned{position:fixed !important}ul.staggered-list li{opacity:0}.fade-in{opacity:0;-webkit-transform-origin:0 50%;transform-origin:0 50%}@media only screen and (max-width : 600.99px){.hide-on-small-only,.hide-on-small-and-down{display:none !important}}@media only screen and (max-width : 992.99px){.hide-on-med-and-down{display:none !important}}@media only screen and (min-width : 601px){.hide-on-med-and-up{display:none !important}}@media only screen and (min-width: 601px)and (max-width: 992.99px){.hide-on-med-only{display:none !important}}@media only screen and (min-width : 993px){.hide-on-large-only{display:none !important}}@media only screen and (min-width : 1201px){.hide-on-extra-large-only{display:none !important}}@media only screen and (min-width : 1201px){.show-on-extra-large{display:block !important}}@media only screen and (min-width : 993px){.show-on-large{display:block !important}}@media only screen and (min-width: 601px)and (max-width: 992.99px){.show-on-medium{display:block !important}}@media only screen and (max-width : 600.99px){.show-on-small{display:block !important}}@media only screen and (min-width : 601px){.show-on-medium-and-up{display:block !important}}@media only screen and (max-width : 992.99px){.show-on-medium-and-down{display:block !important}}@media only screen and (max-width : 600.99px){.center-on-small-only{text-align:center}}.page-footer{margin-top:5rem;padding-top:3rem;border-top:1px dashed var(--md-sys-color-outline-variant)}.page-footer p{color:var(--md-sys-color-outline-light)}.page-footer a{color:var(--md-sys-color-primary)}.page-footer .footer-copyright,.page-footer .footer-copyright a{overflow:hidden;min-height:50px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;padding:10px 0px}.page-footer ul{padding-left:0;list-style-type:none}table,th,td{border:none}table{width:100%;display:table;border-collapse:collapse;border-spacing:0}table.striped tr{border-bottom:none}table.striped tbody>tr:nth-child(odd){background-color:rgba(0,0,0,.08)}table.highlight>tbody>tr{-webkit-transition:background-color .25s ease;transition:background-color .25s ease}table.highlight>tbody>tr:hover{background-color:rgba(0,0,0,.04)}table thead{color:var(--md-sys-color-on-surface-variant)}table.centered thead tr th,table.centered tbody tr td{text-align:center}tr{border-bottom:1px solid var(--md-sys-color-outline-variant)}td,th{padding:15px 5px;display:table-cell;text-align:left;vertical-align:middle;border-radius:0}@media only screen and (max-width : 992.99px){table.responsive-table{width:100%;border-collapse:collapse;border-spacing:0;display:block;position:relative}table.responsive-table td:empty:before{content:" "}table.responsive-table th,table.responsive-table td{margin:0;vertical-align:top}table.responsive-table th{text-align:left}table.responsive-table thead{display:block;float:left}table.responsive-table thead tr{display:block;padding:0 10px 0 0}table.responsive-table thead tr th::before{content:" "}table.responsive-table tbody{display:block;width:auto;position:relative;overflow-x:auto;white-space:nowrap}table.responsive-table tbody tr{display:inline-block;vertical-align:top}table.responsive-table th{display:block;text-align:right}table.responsive-table td{display:block;min-height:1.25em;text-align:left}table.responsive-table tr{border-bottom:none;padding:0 10px}table.responsive-table thead{border:0;border-right:1px solid var(--md-sys-color-outline-variant)}}.video-container{position:relative;padding-bottom:56.25%;height:0;overflow:hidden}.video-container iframe,.video-container object,.video-container embed{position:absolute;top:0;left:0;width:100%;height:100%}.hide{display:none !important}.left-align{text-align:left}.right-align{text-align:right}.center,.center-align{text-align:center}.left{float:left !important}.right{float:right !important}.no-select,input[type=range],input[type=range]+.thumb{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.circle{border-radius:50%}.center-block{display:block;margin-left:auto;margin-right:auto}.truncate{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.no-padding{padding:0 !important}.m-0{margin:0 !important}.mt-0{margin-top:0 !important}.mr-0{margin-right:0 !important}.mb-0{margin-bottom:0 !important}.ml-0{margin-left:0 !important}.mx-0{margin-left:0 !important;margin-right:0 !important}.my-0{margin-top:0 !important;margin-bottom:0 !important}.m-1{margin:.25rem !important}.mt-1{margin-top:.25rem !important}.mr-1{margin-right:.25rem !important}.mb-1{margin-bottom:.25rem !important}.ml-1{margin-left:.25rem !important}.mx-1{margin-left:.25rem !important;margin-right:.25rem !important}.my-1{margin-top:.25rem !important;margin-bottom:.25rem !important}.m-2{margin:.5rem !important}.mt-2{margin-top:.5rem !important}.mr-2{margin-right:.5rem !important}.mb-2{margin-bottom:.5rem !important}.ml-2{margin-left:.5rem !important}.mx-2{margin-left:.5rem !important;margin-right:.5rem !important}.my-2{margin-top:.5rem !important;margin-bottom:.5rem !important}.m-3{margin:.75rem !important}.mt-3{margin-top:.75rem !important}.mr-3{margin-right:.75rem !important}.mb-3{margin-bottom:.75rem !important}.ml-3{margin-left:.75rem !important}.mx-3{margin-left:.75rem !important;margin-right:.75rem !important}.my-3{margin-top:.75rem !important;margin-bottom:.75rem !important}.m-4{margin:1rem !important}.mt-4{margin-top:1rem !important}.mr-4{margin-right:1rem !important}.mb-4{margin-bottom:1rem !important}.ml-4{margin-left:1rem !important}.mx-4{margin-left:1rem !important;margin-right:1rem !important}.my-4{margin-top:1rem !important;margin-bottom:1rem !important}.m-5{margin:1.5rem !important}.mt-5{margin-top:1.5rem !important}.mr-5{margin-right:1.5rem !important}.mb-5{margin-bottom:1.5rem !important}.ml-5{margin-left:1.5rem !important}.mx-5{margin-left:1.5rem !important;margin-right:1.5rem !important}.my-5{margin-top:1.5rem !important;margin-bottom:1.5rem !important}.m-6{margin:3rem !important}.mt-6{margin-top:3rem !important}.mr-6{margin-right:3rem !important}.mb-6{margin-bottom:3rem !important}.ml-6{margin-left:3rem !important}.mx-6{margin-left:3rem !important;margin-right:3rem !important}.my-6{margin-top:3rem !important;margin-bottom:3rem !important}.m-auto{margin:auto !important}.mt-auto{margin-top:auto !important}.mr-auto{margin-right:auto !important}.mb-auto{margin-bottom:auto !important}.ml-auto{margin-left:auto !important}.mx-auto{margin-left:auto !important;margin-right:auto !important}.my-auto{margin-top:auto !important;margin-bottom:auto !important}.p-0{padding:0 !important}.pt-0{padding-top:0 !important}.pr-0{padding-right:0 !important}.pb-0{padding-bottom:0 !important}.pl-0{padding-left:0 !important}.px-0{padding-left:0 !important;padding-right:0 !important}.py-0{padding-top:0 !important;padding-bottom:0 !important}.p-1{padding:.25rem !important}.pt-1{padding-top:.25rem !important}.pr-1{padding-right:.25rem !important}.pb-1{padding-bottom:.25rem !important}.pl-1{padding-left:.25rem !important}.px-1{padding-left:.25rem !important;padding-right:.25rem !important}.py-1{padding-top:.25rem !important;padding-bottom:.25rem !important}.p-2{padding:.5rem !important}.pt-2{padding-top:.5rem !important}.pr-2{padding-right:.5rem !important}.pb-2{padding-bottom:.5rem !important}.pl-2{padding-left:.5rem !important}.px-2{padding-left:.5rem !important;padding-right:.5rem !important}.py-2{padding-top:.5rem !important;padding-bottom:.5rem !important}.p-3{padding:.75rem !important}.pt-3{padding-top:.75rem !important}.pr-3{padding-right:.75rem !important}.pb-3{padding-bottom:.75rem !important}.pl-3{padding-left:.75rem !important}.px-3{padding-left:.75rem !important;padding-right:.75rem !important}.py-3{padding-top:.75rem !important;padding-bottom:.75rem !important}.p-4{padding:1rem !important}.pt-4{padding-top:1rem !important}.pr-4{padding-right:1rem !important}.pb-4{padding-bottom:1rem !important}.pl-4{padding-left:1rem !important}.px-4{padding-left:1rem !important;padding-right:1rem !important}.py-4{padding-top:1rem !important;padding-bottom:1rem !important}.p-5{padding:1.5rem !important}.pt-5{padding-top:1.5rem !important}.pr-5{padding-right:1.5rem !important}.pb-5{padding-bottom:1.5rem !important}.pl-5{padding-left:1.5rem !important}.px-5{padding-left:1.5rem !important;padding-right:1.5rem !important}.py-5{padding-top:1.5rem !important;padding-bottom:1.5rem !important}.p-6{padding:3rem !important}.pt-6{padding-top:3rem !important}.pr-6{padding-right:3rem !important}.pb-6{padding-bottom:3rem !important}.pl-6{padding-left:3rem !important}.px-6{padding-left:3rem !important;padding-right:3rem !important}.py-6{padding-top:3rem !important;padding-bottom:3rem !important}.p-auto{padding:auto !important}.pt-auto{padding-top:auto !important}.pr-auto{padding-right:auto !important}.pb-auto{padding-bottom:auto !important}.pl-auto{padding-left:auto !important}.px-auto{padding-left:auto !important;padding-right:auto !important}.py-auto{padding-top:auto !important;padding-bottom:auto !important}.collection{padding-left:0;list-style-type:none;margin:.5rem 0 1rem 0;border:1px solid var(--md-sys-color-outline-variant);border-radius:2px;overflow:hidden;position:relative}.collection .collection-item{background-color:rgba(0,0,0,0);line-height:1.5rem;padding:10px 20px;margin:0;border-bottom:1px solid var(--md-sys-color-outline-variant)}.collection .collection-item.avatar{min-height:84px;padding-left:72px;position:relative}.collection .collection-item.avatar:not(.circle-clipper)>.circle,.collection .collection-item.avatar :not(.circle-clipper)>.circle{position:absolute;width:42px;height:42px;overflow:hidden;left:15px;display:inline-block;vertical-align:middle}.collection .collection-item.avatar i.circle{font-size:18px;line-height:42px;color:#fff;background-color:var(--md-sys-color-shadow-light);text-align:center}.collection .collection-item.avatar .title{font-size:16px}.collection .collection-item.avatar p{margin:0}.collection .collection-item.avatar .secondary-content{position:absolute;top:16px;right:16px}.collection .collection-item:last-child{border-bottom:none}.collection .collection-item.active{background-color:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary)}.collection .collection-item.active .secondary-content{color:var(--md-sys-color-on-primary)}.collection a.collection-item{display:block;-webkit-transition:.25s;transition:.25s;color:var(--md-sys-color-primary)}.collection a.collection-item:not(.active):hover{background-color:rgba(0,0,0,.04)}.collection.with-header .collection-header{background-color:rgba(0,0,0,0);border-bottom:1px solid var(--md-sys-color-outline-variant);padding:10px 20px}.collection.with-header .collection-item{padding-left:30px}.collection.with-header .collection-item.avatar{padding-left:72px}.secondary-content{float:right;color:var(--md-sys-color-primary)}.collapsible .collection{margin:0;border:none}:root{--bagde-height: 22px}span.badge{min-width:3rem;padding:0 6px;margin-left:14px;text-align:center;font-size:1rem;line-height:var(--bagde-height);height:var(--bagde-height);color:var(--md-sys-color-on-surface-variant);float:right;-webkit-box-sizing:border-box;box-sizing:border-box}span.badge.new{font-weight:300;font-size:.8rem;color:var(--md-sys-color-on-primary);background-color:var(--md-sys-color-primary);border-radius:2px}span.badge.new:after{content:" new"}span.badge[data-badge-caption]::after{content:" " attr(data-badge-caption)}.active span.badge{color:var(--md-sys-color-on-primary)}nav ul a span.badge{display:inline-block;float:none;margin-left:4px;line-height:var(--bagde-height);height:var(--bagde-height);-webkit-font-smoothing:auto}.collection-item span.badge{margin-top:calc(.75rem - var(--bagde-height)*.5)}.collapsible span.badge{margin-left:auto}.collapsible span.badge.leading{margin-right:7px;-webkit-box-ordinal-group:0;-webkit-order:-1;-ms-flex-order:-1;order:-1}.collapsible .active span.badge:not(.new){color:var(--md-sys-color-on-surface-variant)}.sidenav span.badge{margin-top:calc(var(--sidenav-line-height)*.5 - 11px)}table span.badge{display:inline-block;float:none;margin-left:auto}.material-icons,.material-symbols-outlined,.material-symbols-rounded,.material-symbols-sharp{text-rendering:optimizeLegibility;-webkit-font-feature-settings:"liga";-moz-font-feature-settings:"liga";font-feature-settings:"liga"}.container{margin:0 auto;max-width:1280px;width:90%}@media only screen and (min-width : 601px){.container{width:85%}}@media only screen and (min-width : 993px){.container{width:70%}}.section{padding:1rem 0}body{--gap-size: 1.5rem}.row{display:grid;grid-template-columns:repeat(12, 1fr);gap:var(--gap-size)}.row .s1{grid-column:auto/span 1}.row .s2{grid-column:auto/span 2}.row .s3{grid-column:auto/span 3}.row .s4{grid-column:auto/span 4}.row .s5{grid-column:auto/span 5}.row .s6{grid-column:auto/span 6}.row .s7{grid-column:auto/span 7}.row .s8{grid-column:auto/span 8}.row .s9{grid-column:auto/span 9}.row .s10{grid-column:auto/span 10}.row .s11{grid-column:auto/span 11}.row .s12{grid-column:auto/span 12}.row .offset-s1{grid-column-start:3}.row .offset-s2{grid-column-start:2}.row .offset-s3{grid-column-start:4}.row .offset-s4{grid-column-start:5}.row .offset-s5{grid-column-start:6}.row .offset-s6{grid-column-start:7}.row .offset-s7{grid-column-start:8}.row .offset-s8{grid-column-start:9}.row .offset-s9{grid-column-start:10}.row .offset-s10{grid-column-start:11}.row .offset-s11{grid-column-start:12}@media only screen and (min-width : 601px){.row .m1{grid-column:auto/span 1}.row .m2{grid-column:auto/span 2}.row .m3{grid-column:auto/span 3}.row .m4{grid-column:auto/span 4}.row .m5{grid-column:auto/span 5}.row .m6{grid-column:auto/span 6}.row .m7{grid-column:auto/span 7}.row .m8{grid-column:auto/span 8}.row .m9{grid-column:auto/span 9}.row .m10{grid-column:auto/span 10}.row .m11{grid-column:auto/span 11}.row .m12{grid-column:auto/span 12}.row .offset-m1{grid-column-start:2}.row .offset-m2{grid-column-start:3}.row .offset-m3{grid-column-start:4}.row .offset-m4{grid-column-start:5}.row .offset-m5{grid-column-start:6}.row .offset-m6{grid-column-start:7}.row .offset-m7{grid-column-start:8}.row .offset-m8{grid-column-start:9}.row .offset-m9{grid-column-start:10}.row .offset-m10{grid-column-start:11}.row .offset-m11{grid-column-start:12}}@media only screen and (min-width : 993px){.row .l1{grid-column:auto/span 1}.row .l2{grid-column:auto/span 2}.row .l3{grid-column:auto/span 3}.row .l4{grid-column:auto/span 4}.row .l5{grid-column:auto/span 5}.row .l6{grid-column:auto/span 6}.row .l7{grid-column:auto/span 7}.row .l8{grid-column:auto/span 8}.row .l9{grid-column:auto/span 9}.row .l10{grid-column:auto/span 10}.row .l11{grid-column:auto/span 11}.row .l12{grid-column:auto/span 12}.row .offset-l1{grid-column-start:2}.row .offset-l2{grid-column-start:3}.row .offset-l3{grid-column-start:4}.row .offset-l4{grid-column-start:5}.row .offset-l5{grid-column-start:6}.row .offset-l6{grid-column-start:7}.row .offset-l7{grid-column-start:8}.row .offset-l8{grid-column-start:9}.row .offset-l9{grid-column-start:10}.row .offset-l10{grid-column-start:11}.row .offset-l11{grid-column-start:12}}@media only screen and (min-width : 1201px){.row .xl1{grid-column:auto/span 1}.row .xl2{grid-column:auto/span 2}.row .xl3{grid-column:auto/span 3}.row .xl4{grid-column:auto/span 4}.row .xl5{grid-column:auto/span 5}.row .xl6{grid-column:auto/span 6}.row .xl7{grid-column:auto/span 7}.row .xl8{grid-column:auto/span 8}.row .xl9{grid-column:auto/span 9}.row .xl10{grid-column:auto/span 10}.row .xl11{grid-column:auto/span 11}.row .xl12{grid-column:auto/span 12}.row .offset-xl1{grid-column-start:2}.row .offset-xl2{grid-column-start:3}.row .offset-xl3{grid-column-start:4}.row .offset-xl4{grid-column-start:5}.row .offset-xl5{grid-column-start:6}.row .offset-xl6{grid-column-start:7}.row .offset-xl7{grid-column-start:8}.row .offset-xl8{grid-column-start:9}.row .offset-xl9{grid-column-start:10}.row .offset-xl10{grid-column-start:11}.row .offset-xl11{grid-column-start:12}}.g-0{gap:0}.g-1{gap:calc(.25*var(--gap-size))}.g-2{gap:calc(.5*var(--gap-size))}.g-3{gap:calc(1*var(--gap-size))}.g-4{gap:calc(1.5*var(--gap-size))}.g-5{gap:calc(3*var(--gap-size))}:root{--navbar-height: 64px;--navbar-height-mobile: 56px}nav{color:var(--md-sys-color-on-primary);background-color:var(--md-sys-color-secondary-container);width:100%;height:var(--navbar-height-mobile);line-height:var(--navbar-height-mobile)}nav.nav-extended{height:auto}nav.nav-extended .nav-wrapper{min-height:var(--navbar-height-mobile);height:auto}nav.nav-extended .nav-content{position:relative;line-height:normal}nav a{color:var(--md-sys-color-on-primary)}nav i,nav [class^=mdi-],nav [class*=mdi-],nav i.material-icons,nav i.material-symbols-outlined,nav i.material-symbols-rounded,nav i.material-symbols-sharp{display:block;font-size:24px;height:var(--navbar-height-mobile);line-height:var(--navbar-height-mobile)}nav .nav-wrapper{position:relative;height:100%}@media only screen and (min-width : 993px){nav a.sidenav-trigger{display:none}}nav .sidenav-trigger{float:left;position:relative;z-index:1;height:var(--navbar-height-mobile);margin:0 18px}nav .sidenav-trigger i{height:var(--navbar-height-mobile);line-height:var(--navbar-height-mobile)}nav .brand-logo{position:absolute;color:var(--md-sys-color-on-primary);display:inline-block;font-size:2.1rem;padding:0}nav .brand-logo.center{left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}@media only screen and (max-width : 992.99px){nav .brand-logo{left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}nav .brand-logo.left,nav .brand-logo.right{padding:0;-webkit-transform:none;transform:none}nav .brand-logo.left{left:.5rem}nav .brand-logo.right{right:.5rem;left:auto}}nav .brand-logo.right{right:.5rem;padding:0}nav .brand-logo i,nav .brand-logo [class^=mdi-],nav .brand-logo [class*=mdi-],nav .brand-logo i.material-icons,nav .brand-logo i.material-symbols-outlined,nav .brand-logo i.material-symbols-rounded,nav .brand-logo i.material-symbols-sharp{float:left;margin-right:15px}nav .nav-title{display:inline-block;font-size:32px;padding:28px 0}nav ul:not(.dropdown-content){list-style-type:none;margin:0}nav ul:not(.dropdown-content)>li{-webkit-transition:background-color .3s;transition:background-color .3s;float:left;padding:0}nav ul:not(.dropdown-content)>li>a{-webkit-transition:background-color .3s;transition:background-color .3s;font-size:1rem;color:var(--md-sys-color-on-primary);display:block;padding:0 15px;cursor:pointer}nav ul:not(.dropdown-content)>li>a.active{background-color:var(--md-ref-palette-primary80)}nav ul:not(.dropdown-content)>li>a:hover:not(.active){background-color:var(--md-ref-palette-primary70)}nav ul:not(.dropdown-content)>li>a.btn,nav ul:not(.dropdown-content)>li>a.btn-small,nav ul:not(.dropdown-content)>li>a.btn-large,nav ul:not(.dropdown-content)>li>a.btn-flat,nav ul:not(.dropdown-content)>li>a.btn-floating{margin-top:-2px;margin-left:15px;margin-right:15px;display:inline-block}nav ul:not(.dropdown-content)>li>a.btn>.material-icons,nav ul:not(.dropdown-content)>li>a.btn-small>.material-icons,nav ul:not(.dropdown-content)>li>a.btn>.material-symbols-outlined,nav ul:not(.dropdown-content)>li>a.btn-small>.material-symbols-outlined,nav ul:not(.dropdown-content)>li>a.btn>.material-symbols-rounded,nav ul:not(.dropdown-content)>li>a.btn-small>.material-symbols-rounded,nav ul:not(.dropdown-content)>li>a.btn>.material-symbols-sharp,nav ul:not(.dropdown-content)>li>a.btn-small>.material-symbols-sharp,nav ul:not(.dropdown-content)>li>a.btn-large>.material-icons,nav ul:not(.dropdown-content)>li>a.btn-large>.material-symbols-outlined,nav ul:not(.dropdown-content)>li>a.btn-large>.material-symbols-rounded,nav ul:not(.dropdown-content)>li>a.btn-large>.material-symbols-sharp,nav ul:not(.dropdown-content)>li>a.btn-flat>.material-icons,nav ul:not(.dropdown-content)>li>a.btn-flat>.material-symbols-outlined,nav ul:not(.dropdown-content)>li>a.btn-flat>.material-symbols-rounded,nav ul:not(.dropdown-content)>li>a.btn-flat>.material-symbols-sharp,nav ul:not(.dropdown-content)>li>a.btn-floating>.material-icons,nav ul:not(.dropdown-content)>li>a.btn-floating>.material-symbols-outlined,nav ul:not(.dropdown-content)>li>a.btn-floating>.material-symbols-rounded,nav ul:not(.dropdown-content)>li>a.btn-floating>.material-symbols-sharp{height:inherit;line-height:inherit}nav ul:not(.dropdown-content).left{float:left}nav form{height:100%}nav .input-field{margin:0;height:100%}nav .input-field input[type=search]{height:100%;font-size:1.2rem;border:none;padding-left:2rem;color:var(--md-sys-color-on-primary)}nav .input-field input[type=search]:focus,nav .input-field input[type=search][type=text]:valid,nav .input-field input[type=search][type=password]:valid,nav .input-field input[type=search][type=email]:valid,nav .input-field input[type=search][type=url]:valid,nav .input-field input[type=search][type=date]:valid{border:none;-webkit-box-shadow:none;box-shadow:none}nav .input-field label{top:0;left:0}nav .input-field label i{color:var(--font-on-primary-color-medium);-webkit-transition:color .3s;transition:color .3s}nav .input-field label.active i{color:var(--md-sys-color-on-primary)}.navbar-fixed{position:relative;height:var(--navbar-height-mobile);z-index:997}.navbar-fixed nav{position:fixed;right:0}@media only screen and (min-width : 601px){nav.nav-extended .nav-wrapper{min-height:var(--navbar-height-mobile)}nav,nav .nav-wrapper i,nav a.sidenav-trigger,nav a.sidenav-trigger i{height:var(--navbar-height);line-height:var(--navbar-height)}.navbar-fixed{height:var(--navbar-height)}}a{text-decoration:none}html{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;font-weight:normal;color:var(--md-sys-color-on-background)}@media only screen and (min-width: 0){html{font-size:14px}}@media only screen and (min-width: 993px){html{font-size:14.5px}}@media only screen and (min-width: 1201px){html{font-size:15px}}h1,h2,h3,h4,h5,h6{font-weight:400;line-height:1.3}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{font-weight:inherit}h1{font-size:4.2rem;line-height:110%;margin:2.8rem 0 1.68rem 0}h2{font-size:3.56rem;line-height:110%;margin:2.3733333333rem 0 1.424rem 0}h3{font-size:2.92rem;line-height:110%;margin:1.9466666667rem 0 1.168rem 0}h4{font-size:2.28rem;line-height:110%;margin:1.52rem 0 .912rem 0}h5{font-size:1.64rem;line-height:110%;margin:1.0933333333rem 0 .656rem 0}h6{font-size:1.15rem;line-height:110%;margin:.7666666667rem 0 .46rem 0}em{font-style:italic}strong{font-weight:500}small{font-size:75%}.light{font-weight:300}.thin{font-weight:200}@media only screen and (min-width: 360px){.flow-text{font-size:1.2rem}}@media only screen and (min-width: 390px){.flow-text{font-size:1.224rem}}@media only screen and (min-width: 420px){.flow-text{font-size:1.248rem}}@media only screen and (min-width: 450px){.flow-text{font-size:1.272rem}}@media only screen and (min-width: 480px){.flow-text{font-size:1.296rem}}@media only screen and (min-width: 510px){.flow-text{font-size:1.32rem}}@media only screen and (min-width: 540px){.flow-text{font-size:1.344rem}}@media only screen and (min-width: 570px){.flow-text{font-size:1.368rem}}@media only screen and (min-width: 600px){.flow-text{font-size:1.392rem}}@media only screen and (min-width: 630px){.flow-text{font-size:1.416rem}}@media only screen and (min-width: 660px){.flow-text{font-size:1.44rem}}@media only screen and (min-width: 690px){.flow-text{font-size:1.464rem}}@media only screen and (min-width: 720px){.flow-text{font-size:1.488rem}}@media only screen and (min-width: 750px){.flow-text{font-size:1.512rem}}@media only screen and (min-width: 780px){.flow-text{font-size:1.536rem}}@media only screen and (min-width: 810px){.flow-text{font-size:1.56rem}}@media only screen and (min-width: 840px){.flow-text{font-size:1.584rem}}@media only screen and (min-width: 870px){.flow-text{font-size:1.608rem}}@media only screen and (min-width: 900px){.flow-text{font-size:1.632rem}}@media only screen and (min-width: 930px){.flow-text{font-size:1.656rem}}@media only screen and (min-width: 960px){.flow-text{font-size:1.68rem}}@media only screen and (max-width: 360px){.flow-text{font-size:1.2rem}}.scale-transition{-webkit-transition:-webkit-transform .3s cubic-bezier(0.53, 0.01, 0.36, 1.63) !important;transition:-webkit-transform .3s cubic-bezier(0.53, 0.01, 0.36, 1.63) !important;transition:transform .3s cubic-bezier(0.53, 0.01, 0.36, 1.63) !important;transition:transform .3s cubic-bezier(0.53, 0.01, 0.36, 1.63), -webkit-transform .3s cubic-bezier(0.53, 0.01, 0.36, 1.63) !important}.scale-transition.scale-out{-webkit-transform:scale(0);transform:scale(0);-webkit-transition:-webkit-transform .2s !important;transition:-webkit-transform .2s !important;transition:transform .2s !important;transition:transform .2s, -webkit-transform .2s !important}.scale-transition.scale-in{-webkit-transform:scale(1);transform:scale(1)}.card-panel{-webkit-transition:-webkit-box-shadow .25s;transition:-webkit-box-shadow .25s;transition:box-shadow .25s;transition:box-shadow .25s, -webkit-box-shadow .25s;padding:24px;margin:.5rem 0 1rem 0;border-radius:12px;background-color:var(--md-sys-color-surface)}.card{overflow:hidden;position:relative;background-color:var(--md-sys-color-surface);-webkit-transition:-webkit-box-shadow .25s;transition:-webkit-box-shadow .25s;transition:box-shadow .25s;transition:box-shadow .25s, -webkit-box-shadow .25s;border-radius:12px}.card .card-title{font-size:24px;font-weight:300}.card.small,.card.medium,.card.large{position:relative}.card.small .card-image,.card.medium .card-image,.card.large .card-image{max-height:60%;overflow:hidden}.card.small .card-image+.card-content,.card.medium .card-image+.card-content,.card.large .card-image+.card-content{max-height:40%}.card.small .card-content,.card.medium .card-content,.card.large .card-content{max-height:100%;overflow:hidden}.card.small .card-action,.card.medium .card-action,.card.large .card-action{position:absolute;bottom:0;left:0;right:0}.card.small{height:300px}.card.medium{height:400px}.card.large{height:500px}.card.horizontal{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.card.horizontal.small .card-image,.card.horizontal.medium .card-image,.card.horizontal.large .card-image{height:100%;max-height:none;overflow:visible}.card.horizontal.small .card-image img,.card.horizontal.medium .card-image img,.card.horizontal.large .card-image img{height:100%}.card.horizontal .card-image{max-width:50%}.card.horizontal .card-image img{border-radius:2px 0 0 2px;max-width:100%;width:auto}.card.horizontal .card-stacked{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;position:relative}.card.horizontal .card-stacked .card-content{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1}.card.sticky-action .card-action{z-index:2}.card.sticky-action .card-reveal{z-index:1;padding-bottom:64px}.card .card-image{position:relative}.card .card-image img{display:block;border-radius:2px 2px 0 0;position:relative;left:0;right:0;top:0;bottom:0;width:100%}.card .card-image .card-title{color:var(--md-sys-color-surface);position:absolute;bottom:0;left:0;max-width:100%;padding:24px}.card .card-image .activator{position:absolute;left:0;right:0;top:0;bottom:0;cursor:pointer}.card .card-content{padding:24px;border-radius:0 0 2px 2px}.card .card-content p{margin:0}.card .card-content .card-title{display:block;line-height:32px;margin-bottom:8px}.card .card-content .card-title i{line-height:32px}.card .card-content .card-title.activator{cursor:pointer}.card .card-action{border-top:1px solid var(--md-sys-color-outline-variant);position:relative;background-color:inherit}.card .card-action:last-child{border-radius:0 0 2px 2px}.card .card-action a{padding:16px 24px;display:inline-block}.card .card-action a:not(.btn):not(.btn-small):not(.btn-large):not(.btn-large):not(.btn-floating){color:var(--md-sys-color-primary);-webkit-transition:color .3s ease;transition:color .3s ease}.card .card-action a:not(.btn):not(.btn-small):not(.btn-large):not(.btn-large):not(.btn-floating):hover{background-color:rgba(var(--md-sys-color-primary-numeric), 0.06)}.card .card-reveal{padding:24px;position:absolute;background-color:var(--md-sys-color-surface);width:100%;overflow-y:auto;left:0;top:100%;height:100%;z-index:3;display:none}.card .card-reveal .card-title{cursor:pointer;display:block}#toast-container{display:block;position:fixed;z-index:10000}@media only screen and (max-width : 600.99px){#toast-container{min-width:100%;bottom:0%}}@media only screen and (min-width : 601px)and (max-width : 992.99px){#toast-container{left:5%;bottom:7%;max-width:90%}}@media only screen and (min-width : 993px){#toast-container{top:10%;right:7%;max-width:86%}}.toast{border-radius:4px;top:35px;width:auto;margin-top:10px;position:relative;max-width:100%;height:auto;min-height:48px;padding-left:16px;padding-right:12px;font-size:14px;font-weight:500;line-height:20px;color:var(--md-sys-color-inverse-on-surface);background-color:var(--md-sys-color-inverse-surface);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;cursor:default}.toast .toast-action{color:var(--md-sys-color-inverse-primary);font-weight:500;margin-right:-25px;margin-left:3rem}.toast.rounded{border-radius:24px}@media only screen and (max-width : 600.99px){.toast{width:100%;border-radius:0}}.tabs{padding-left:0;list-style-type:none;position:relative;overflow-x:auto;overflow-y:hidden;width:100%;background-color:var(--md-sys-color-surface);margin:0 auto;white-space:nowrap}.tabs.tabs-transparent{background-color:rgba(0,0,0,0)}.tabs.tabs-transparent .tab a{color:var(--font-on-primary-color-medium)}.tabs.tabs-transparent .tab.disabled a,.tabs.tabs-transparent .tab.disabled a:hover,.tabs.tabs-transparent .tab.disabled a:focus{color:hsla(0,0%,100%,.38)}.tabs.tabs-transparent .tab a:hover{background-color:rgba(0,0,0,.04)}.tabs.tabs-transparent .tab a.active,.tabs.tabs-transparent .tab a:focus{background-color:rgba(0,0,0,0)}.tabs.tabs-transparent .tab a:hover,.tabs.tabs-transparent .tab a.active,.tabs.tabs-transparent .tab a:focus{color:var(--md-sys-color-on-primary)}.tabs.tabs-transparent .indicator{background-color:var(--md-sys-color-on-primary)}.tabs.tabs-fixed-width{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.tabs.tabs-fixed-width .tab{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1}.tabs .tab{padding-left:0;list-style-type:none;display:inline-block;text-align:center;line-height:48px;padding:0;margin:0}.tabs .tab i.material-icons{position:relative;top:8px;vertical-align:middle}.tabs .tab span{height:24px;line-height:20px}.tabs .tab a{color:var(--md-sys-color-on-surface-variant);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;width:100%;height:100%;min-height:48px;padding:0 24px;font-size:14px;text-overflow:ellipsis;overflow:hidden;-webkit-transition:color .28s ease,background-color .28s ease;transition:color .28s ease,background-color .28s ease}.tabs .tab a.active{background-color:rgba(0,0,0,0)}.tabs .tab a.active,.tabs .tab a:focus,.tabs .tab a:hover{color:var(--md-sys-color-primary)}.tabs .tab a:hover{background-color:rgba(var(--md-sys-color-primary-numeric), 0.06)}.tabs .tab a:focus{background-color:var(--md-sys-color-primary-container)}.tabs .tab a.active{background-color:rgba(var(--md-sys-color-primary-numeric), 0.18)}.tabs .tab a:focus,.tabs .tab a.active{outline:none}.tabs .tab.disabled a,.tabs .tab.disabled a:hover{color:var(--md-sys-color-on-surface);cursor:default;background-color:rgba(0,0,0,0)}.tabs .tab.disabled a:not(:focus),.tabs .tab.disabled a:hover:not(:focus){background-color:rgba(0,0,0,0)}.tabs .indicator{position:absolute;bottom:0;height:3px;background-color:var(--md-sys-color-primary);will-change:left,right;border-radius:3px 3px 0 0}.tabs.tabs-horizontal .tab{height:48px}.tabs.tabs-horizontal .tab a{display:block}.tabs.tabs-horizontal .tab i.material-icons{padding:0 4px;position:relative;top:-2px;vertical-align:middle}@media only screen and (max-width : 992.99px){.tabs{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.tabs .tab{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1}.tabs .tab a{padding:0 12px}}.material-tooltip{padding:0 8px;border-radius:4px;color:var(--md-sys-color-inverse-on-surface);background-color:var(--md-sys-color-inverse-surface);font-family:var(--md-sys-typescale-body-small-font-family-name);font-size:var(--md-sys-typescale-body-small-font-size);line-height:var(--md-sys-typescale-body-small-line-height);font-weight:var(--md-sys-typescale-body-small-font-weight);min-height:24px;opacity:0;padding-top:6px;padding-bottom:6px;font-size:12px;line-height:16px;font-weight:400;letter-spacing:.4px;position:absolute;max-width:300px;overflow:hidden;left:0;top:0;pointer-events:none;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;visibility:hidden;z-index:2000}.backdrop{position:absolute;opacity:0;height:7px;width:14px;border-radius:0 0 50% 50%;background-color:var(--md-sys-color-inverse-surface);z-index:-1;-webkit-transform-origin:50% 0;transform-origin:50% 0;visibility:hidden}.btn,.btn-small,.btn-large,.btn-floating,.btn-flat{--btn-height: 40px;--btn-font-size-icon: 16px;--btn-padding: 24px;--btn-padding-icon: 16px;--btn-gap-icon: 8px;--btn-border-radius: 4px;--btn-font-size: 14px;height:var(--btn-height);border:none;border-radius:var(--btn-border-radius);padding-left:var(--btn-padding);padding-right:var(--btn-padding);font-size:var(--btn-font-size);font-weight:500;text-decoration:none;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);white-space:nowrap;outline:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-transition:background-color .2s ease-out;transition:background-color .2s ease-out}.btn.icon-left,.icon-left.btn-small,.icon-left.btn-large,.btn.icon-right,.icon-right.btn-small,.icon-right.btn-large{position:relative}.btn.icon-left,.icon-left.btn-small,.icon-left.btn-large{padding-left:calc(var(--btn-padding-icon) + var(--btn-font-size-icon) + var(--btn-gap-icon))}.btn.icon-right,.icon-right.btn-small,.icon-right.btn-large{padding-right:calc(var(--btn-padding-icon) + var(--btn-font-size-icon) + var(--btn-gap-icon))}.btn.icon-left i,.icon-left.btn-small i,.icon-left.btn-large i,.btn.icon-right i,.icon-right.btn-small i,.icon-right.btn-large i{position:absolute;font-size:var(--btn-font-size-icon)}.btn.icon-left i,.icon-left.btn-small i,.icon-left.btn-large i{left:var(--btn-padding-icon)}.btn.icon-right i,.icon-right.btn-small i,.icon-right.btn-large i{right:var(--btn-padding-icon)}.btn.filled,.filled.btn-small,.filled.btn-large{color:var(--md-sys-color-on-primary);background-color:var(--md-sys-color-primary)}.btn.tonal,.tonal.btn-small,.tonal.btn-large{color:var(--md-sys-color-on-secondary-container);background-color:var(--md-sys-color-secondary-container)}.btn.elevated,.elevated.btn-small,.elevated.btn-large{color:var(--md-sys-color-on-secondary-container);background-color:var(--md-sys-color-secondary-container)}.btn.outlined,.outlined.btn-small,.outlined.btn-large{background-color:rgba(0,0,0,0);color:var(--md-sys-color-primary);border:1px solid var(--md-sys-color-outline)}.btn.text,.text.btn-small,.text.btn-large,.btn-flat{color:var(--md-sys-color-primary);background-color:rgba(0,0,0,0)}.btn.disabled,.btn-floating.disabled,.btn-large.disabled,.btn-small.disabled,.btn-flat.disabled,.btn:disabled,.btn-floating:disabled,.btn-large:disabled,.btn-small:disabled,.btn-flat:disabled,.btn[disabled],.btn-floating[disabled],.btn-large[disabled],.btn-small[disabled],.btn-flat[disabled]{color:color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 76%);background-color:color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 24%);pointer-events:none;-webkit-box-shadow:none;box-shadow:none;cursor:default}.btn.elevated:hover,.elevated.btn-small:hover,.elevated.btn-large:hover{color:var(--md-sys-color-primary);background-color:color-mix(in srgb, var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container) 16%)}.btn.filled:hover,.filled.btn-small:hover,.filled.btn-large:hover{color:var(--md-sys-color-on-primary);background-color:color-mix(in srgb, var(--md-sys-color-primary), var(--md-sys-color-on-primary) 16%)}.btn.tonal:hover,.tonal.btn-small:hover,.tonal.btn-large:hover{color:var(--md-sys-color-on-secondary-container);background-color:color-mix(in srgb, var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container) 16%)}.btn.outlined:hover,.outlined.btn-small:hover,.outlined.btn-large:hover{color:var(--md-sys-color-primary);background-color:color-mix(in srgb, transparent, var(--md-sys-color-primary) 16%)}.btn.text:hover,.text.btn-small:hover,.text.btn-large:hover{color:var(--md-sys-color-primary);background-color:color-mix(in srgb, var(--md-sys-color-primary) 16%, transparent)}.btn:focus,.btn-small:focus,.btn-large:focus{background-color:var(--md-sys-color-primary-container)}.btn:focus.elevated,.btn-small:focus.elevated,.btn-large:focus.elevated{color:var(--md-sys-color-primary);background-color:color-mix(in srgb, var(--md-sys-color-secondary-container), var(--md-sys-color-primary) 20%)}.btn:focus.filled,.btn-small:focus.filled,.btn-large:focus.filled{color:var(--md-sys-color-on-primary);background-color:color-mix(in srgb, var(--md-sys-color-primary), var(--md-sys-color-on-primary) 20%)}.btn:focus.tonal,.btn-small:focus.tonal,.btn-large:focus.tonal{color:var(--md-sys-color-on-secondary-container);background-color:color-mix(in srgb, var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container) 20%)}.btn:focus.outlined,.btn-small:focus.outlined,.btn-large:focus.outlined{color:var(--md-sys-color-primary);background-color:color-mix(in srgb, transparent, var(--md-sys-color-primary) 20%);border:1px solid var(--md-sys-color-primary)}.btn:focus.text,.btn-small:focus.text,.btn-large:focus.text{color:var(--md-sys-color-primary);background-color:color-mix(in srgb, transparent, var(--md-sys-color-primary) 20%)}.btn:focus-visible.filled,.btn-small:focus-visible.filled,.btn-large:focus-visible.filled,.btn:focus-visible.elevated,.btn-small:focus-visible.elevated,.btn-large:focus-visible.elevated,.btn:focus-visible.tonal,.btn-small:focus-visible.tonal,.btn-large:focus-visible.tonal,.btn:focus-visible.outlined,.btn-small:focus-visible.outlined,.btn-large:focus-visible.outlined,.btn:focus-visible.text,.btn-small:focus-visible.text,.btn-large:focus-visible.text{outline:3px solid var(--md-sys-color-secondary);outline-offset:2px}.btn-floating{width:40px;height:40px;color:var(--md-sys-color-on-primary-container);background-color:var(--md-sys-color-primary-container);border-radius:16px;padding:0;display:grid;grid-auto-flow:column;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;position:relative;overflow:hidden;z-index:1;-webkit-transition:background-color .3s;transition:background-color .3s;cursor:pointer;vertical-align:middle}.btn-floating:hover{background-color:color-mix(in srgb, var(--md-sys-color-primary-container), var(--md-sys-color-on-primary-container) 16%)}.btn-floating:focus{background-color:var(--md-ref-palette-secondary80)}.btn-floating:before{border-radius:0}.btn-floating.btn-large{width:56px;height:56px;padding:0}.btn-floating.btn-large.halfway-fab{bottom:-28px}.btn-floating.btn-small{--btn-small-height: calc(0.75 * var(--btn-height));width:var(--btn-small-height);height:var(--btn-small-height)}.btn-floating.btn-small.halfway-fab{bottom:calc(var(--btn-small-height)*-0.5)}.btn-floating.halfway-fab{position:absolute;right:24px;bottom:-20px}.btn-floating.halfway-fab.left{right:auto;left:24px}.btn-floating i{color:var(--md-sys-color-on-secondary);font-size:1.6rem;width:inherit;display:inline-block;text-align:center}button.btn-floating{border:none}.fixed-action-btn{position:fixed;right:23px;bottom:23px;padding-top:15px;margin-bottom:0;z-index:997}.fixed-action-btn.active ul{visibility:visible;padding-left:0;list-style-type:none}.fixed-action-btn.direction-left,.fixed-action-btn.direction-right{padding:0 0 0 15px}.fixed-action-btn.direction-left ul,.fixed-action-btn.direction-right ul{text-align:right;right:64px;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);height:100%;left:auto;width:500px}.fixed-action-btn.direction-left ul li,.fixed-action-btn.direction-right ul li{display:inline-block;margin:7.5px 15px 0 0}.fixed-action-btn.direction-right{padding:0 15px 0 0}.fixed-action-btn.direction-right ul{text-align:left;direction:rtl;left:64px;right:auto}.fixed-action-btn.direction-right ul li{margin:7.5px 0 0 15px}.fixed-action-btn.direction-bottom{padding:0 0 15px 0}.fixed-action-btn.direction-bottom ul{top:64px;bottom:auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:reverse;-webkit-flex-direction:column-reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.fixed-action-btn.direction-bottom ul li{margin:15px 0 0 0}.fixed-action-btn.toolbar{padding:0;height:56px}.fixed-action-btn.toolbar.active>a i{opacity:0}.fixed-action-btn.toolbar ul{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;top:0;bottom:0;z-index:1}.fixed-action-btn.toolbar ul li{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;display:inline-block;margin:0;height:100%;-webkit-transition:none;transition:none}.fixed-action-btn.toolbar ul li a{display:block;overflow:hidden;position:relative;width:100%;height:100%;background-color:rgba(0,0,0,0);-webkit-box-shadow:none;box-shadow:none;color:var(--md-sys-color-on-secondary);line-height:56px;z-index:1}.fixed-action-btn.toolbar ul li a i{line-height:inherit}.fixed-action-btn ul{left:0;right:0;text-align:center;position:absolute;bottom:64px;margin:0;visibility:hidden}.fixed-action-btn ul li{margin-bottom:15px}.fixed-action-btn ul a.btn-floating{opacity:0}.fixed-action-btn .fab-backdrop{position:absolute;top:0;left:0;z-index:-1;width:40px;height:40px;background-color:var(--md-sys-color-secondary);border-radius:16px;-webkit-transform:scale(0);transform:scale(0)}.btn-large{height:calc(1.5*var(--btn-height));font-size:18px;padding:0 28px}.btn-large i{font-size:1.6rem}.btn-small{height:calc(.75*var(--btn-height));font-size:13px}.btn-small i{font-size:1.2rem}.btn-block{display:block}.btn.rounded,.rounded.btn-large,.rounded.btn-small{border-radius:99999px}[popover]{outline:none;padding:0;border:none}.dropdown-content{padding-left:0;list-style-type:none;background-color:var(--md-sys-color-surface);margin:0;display:none;min-width:100px;overflow-y:auto;opacity:0;position:absolute;left:0;top:0;z-index:9999;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.dropdown-content li{clear:both;color:var(--md-sys-color-on-background);cursor:pointer;min-height:50px;line-height:1.5rem;width:100%;text-align:left}.dropdown-content li.divider{min-height:0;height:1px}.dropdown-content li>a,.dropdown-content li>span{font-size:16px;color:var(--md-sys-color-primary);display:block;line-height:22px;padding:14px 16px}.dropdown-content li>span>label{top:1px;left:0;height:18px}.dropdown-content li>a>i{height:inherit;line-height:inherit;float:left;margin:0 24px 0 0;width:24px}.dropdown-content li:not(.disabled):hover,.dropdown-content li.active{background-color:color-mix(in srgb, var(--md-sys-color-surface), var(--md-sys-color-on-surface) 8%)}body.keyboard-focused .dropdown-content li:focus{background-color:rgba(0,0,0,.12)}.input-field.col .dropdown-content [type=checkbox]+label{top:1px;left:0;height:18px;-webkit-transform:none;transform:none}.dropdown-trigger{cursor:pointer}.modal{--modal-footer-divider-height: 1px;--modal-border-radius: 28px;--modal-padding: 24px;--modal-padding-bottom: 16px;border:none;outline:none;padding:0;max-height:70%;width:55%;border-radius:var(--modal-border-radius);will-change:top,opacity;background-color:color-mix(in srgb, var(--md-sys-color-surface), var(--md-sys-color-surface-tint) 17%)}.modal[open]{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}@media only screen and (max-width : 992.99px){.modal{width:80%}}.modal::-webkit-backdrop{-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px)}.modal::backdrop{-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px)}.modal .modal-header{padding:var(--modal-padding);padding-bottom:var(--modal-padding-bottom);-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0}.modal .modal-content{padding:0 var(--modal-padding);overflow-y:auto}.modal .modal-footer{border-radius:0 0 var(--modal-border-radius) var(--modal-border-radius);padding:var(--modal-padding);text-align:right;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0}.modal .modal-close{cursor:pointer}.modal h1,.modal h2,.modal h3,.modal h4,.modal h5,.modal h6{margin:0}.modal.bottom-sheet{margin-bottom:0;max-height:45%;border-bottom-left-radius:0;border-bottom-right-radius:0;will-change:bottom,opacity}.collapsible{padding-left:0;list-style-type:none;border-top:1px solid var(--md-sys-color-outline-variant);border-right:1px solid var(--md-sys-color-outline-variant);border-left:1px solid var(--md-sys-color-outline-variant);margin:.5rem 0 1rem 0}.collapsible-header{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);line-height:1.5;padding:1rem;border-bottom:1px solid var(--md-sys-color-outline-variant)}.collapsible-header:focus{outline:0}.collapsible-header i{width:2rem;font-size:1.6rem;display:inline-block;text-align:center;margin-right:1rem}.collapsible-header::after{content:"";margin-left:.5rem;font-family:"Material Symbols Outlined","Material Symbols Rounded","Material Symbols Sharp","Material Icons";font-size:25px;line-height:.9;-webkit-font-smoothing:antialiased}.active .collapsible-header::after{content:""}.keyboard-focused .collapsible-header:focus{background-color:rgba(0,0,0,.12)}.collapsible-header-content{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1}.collapsible-body{max-height:0;border-bottom:1px solid var(--md-sys-color-outline-variant);-webkit-box-sizing:border-box;box-sizing:border-box;padding:0 2rem;overflow:hidden}.collapsible.popout{border:none;-webkit-box-shadow:none;box-shadow:none}.collapsible.popout>li{-webkit-box-shadow:0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);box-shadow:0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);margin:0 24px;-webkit-transition:margin .35s cubic-bezier(0.25, 0.46, 0.45, 0.94);transition:margin .35s cubic-bezier(0.25, 0.46, 0.45, 0.94)}.collapsible.popout>li.active{-webkit-box-shadow:0 5px 11px 0 rgba(0,0,0,.18),0 4px 15px 0 rgba(0,0,0,.15);box-shadow:0 5px 11px 0 rgba(0,0,0,.18),0 4px 15px 0 rgba(0,0,0,.15);margin:16px 0}.chip{--font-size: 14px;--font-size-icon: 18px;--padding: 8px;color:var(--md-sys-color-on-surface-variant);background-color:rgba(0,0,0,.09);display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;white-space:nowrap;gap:8px;margin:0;height:32px;padding-left:var(--padding);padding-right:var(--padding);font-size:var(--font-size);font-weight:500;border-radius:8px;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:top}.chip:focus{outline:none;background-color:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary)}.chip.outlined{background-color:rgba(0,0,0,0);border-color:var(--md-sys-color-outline);border-width:1px;border-style:solid}.chip>img{margin:0;width:24px;height:24px;-o-object-fit:cover;object-fit:cover;border-radius:12px}.chip>.material-icons{font-size:var(--font-size-icon)}.chip .close{border-radius:50%;height:24px;width:24px;padding:0;display:grid;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-content:center;-ms-flex-line-pack:center;align-content:center;cursor:pointer}.chip .close:hover{background-color:rgba(136,136,136,.5333333333)}.chips{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:4px;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;border:none;-webkit-box-shadow:none;box-shadow:none;margin:0 0 8px 0;padding:4px;outline:none;-webkit-transition:all .3s;transition:all .3s}.chips.focus{border-bottom:1px solid var(--md-sys-color-primary);-webkit-box-shadow:0 1px 0 0 var(--md-sys-color-primary);box-shadow:0 1px 0 0 var(--md-sys-color-primary)}.chips.input-field{border-bottom:1px solid var(--md-sys-color-on-surface-variant)}.chips.input-field:hover{cursor:text}.chips input:not([type]):not(.browser-default).input{background:none;border:0;color:var(--md-sys-color-on-background);display:inline-block;font-size:16px;height:32px;outline:0;margin:0;padding:0;width:120px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;min-width:100px;max-width:200px}.chips input:not([type]):not(.browser-default).input:focus{border:0;-webkit-box-shadow:none;box-shadow:none}.chips .autocomplete-content{margin-top:0;margin-bottom:0}.prefix~.chips{margin-left:3rem;width:92%;width:calc(100% - 3rem)}.suffix~.chips{margin-right:3rem;width:92%;width:calc(100% - 3rem)}.chips:empty~label{font-size:.8rem;-webkit-transform:translateY(-140%);transform:translateY(-140%)}.materialboxed{display:block;cursor:-webkit-zoom-in;cursor:zoom-in;position:relative;-webkit-transition:opacity .4s;transition:opacity .4s;-webkit-backface-visibility:hidden}.materialboxed:hover:not(.active){opacity:.8}.materialboxed.active{cursor:-webkit-zoom-out;cursor:zoom-out}#materialbox-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background-color:var(--md-sys-color-background);z-index:1000;will-change:opacity}.materialbox-caption{position:fixed;display:none;color:var(--md-sys-color-on-background);line-height:50px;bottom:0;left:0;width:100%;text-align:center;padding:0% 15%;height:50px;z-index:1000;-webkit-font-smoothing:antialiased}select:focus{outline:1px solid var(--md-ref-palette-primary80)}label{font-size:.8rem;color:var(--md-sys-color-on-surface-variant)}::-webkit-input-placeholder{color:var(--md-sys-color-on-surface-variant)}::-moz-placeholder{color:var(--md-sys-color-on-surface-variant)}:-ms-input-placeholder{color:var(--md-sys-color-on-surface-variant)}::-ms-input-placeholder{color:var(--md-sys-color-on-surface-variant)}::placeholder{color:var(--md-sys-color-on-surface-variant)}input:not([type]):not(.browser-default),input[type=text]:not(.browser-default),input[type=password]:not(.browser-default),input[type=email]:not(.browser-default),input[type=url]:not(.browser-default),input[type=time]:not(.browser-default),input[type=date]:not(.browser-default),input[type=datetime]:not(.browser-default),input[type=datetime-local]:not(.browser-default),input[type=month]:not(.browser-default),input[type=tel]:not(.browser-default),input[type=number]:not(.browser-default),input[type=search]:not(.browser-default),textarea.materialize-textarea{outline:none;color:var(--md-sys-color-on-background);width:100%;font-size:16px;height:56px}.input-field input.invalid,.input-field textarea.invalid{border-bottom:2px solid var(--md-sys-color-error);-webkit-box-shadow:0 1px 0 0 var(--md-sys-color-error);box-shadow:0 1px 0 0 var(--md-sys-color-error)}.input-field input.invalid~.supporting-text[data-error]>span,.input-field textarea.invalid~.supporting-text[data-error]>span{display:none}.input-field input.invalid~.supporting-text:after,.input-field textarea.invalid~.supporting-text:after{content:attr(data-error);color:var(--md-sys-color-error)}.input-field{--input-color: var(--md-sys-color-primary);position:relative;clear:both}.input-field input,.input-field textarea{-webkit-box-sizing:border-box;box-sizing:border-box;padding:0 16px;padding-top:20px;background-color:var(--md-sys-color-surface);border:none;border-radius:4px;border-bottom:1px solid var(--md-sys-color-on-surface-variant);border-bottom-left-radius:0;border-bottom-right-radius:0}.input-field input:focus:not([readonly]),.input-field textarea:focus:not([readonly]){border-bottom:2px solid var(--input-color);padding-top:21px}.input-field input:disabled,.input-field input[readonly=readonly],.input-field textarea:disabled,.input-field textarea[readonly=readonly]{color:rgba(var(--md_sys_color_on-surface), 0.38);border-color:rgba(var(--md_sys_color_on-surface), 0.12);background-color:rgba(var(--md_sys_color_on-surface), 0.04)}.input-field input:focus:not([readonly])+label,.input-field textarea:focus:not([readonly])+label{color:var(--input-color)}.input-field input:not(:-moz-placeholder-shown)+label, .input-field textarea:not(:-moz-placeholder-shown)+label{transform:scale(0.75);top:8px}.input-field input:not(:-ms-input-placeholder)+label, .input-field textarea:not(:-ms-input-placeholder)+label{transform:scale(0.75);top:8px}.input-field input:focus:not([readonly])+label,.input-field input:not([placeholder=" "])+label,.input-field input:not(:placeholder-shown)+label,.input-field textarea:focus:not([readonly])+label,.input-field textarea:not([placeholder=" "])+label,.input-field textarea:not(:placeholder-shown)+label{-webkit-transform:scale(0.75);transform:scale(0.75);top:8px}.input-field input:disabled+label,.input-field input[readonly=readonly]+label,.input-field textarea:disabled+label,.input-field textarea[readonly=readonly]+label{color:rgba(var(--md_sys_color_on-surface), 0.38)}.input-field input.invalid~label,.input-field input:focus.invalid~label,.input-field textarea.invalid~label,.input-field textarea:focus.invalid~label{color:var(--md-sys-color-error)}.input-field input::-webkit-input-placeholder{-webkit-user-select:none;user-select:none}.input-field input::-moz-placeholder{-moz-user-select:none;user-select:none}.input-field input:-ms-input-placeholder{-ms-user-select:none;user-select:none}.input-field input::-ms-input-placeholder{-ms-user-select:none;user-select:none}.input-field input::placeholder{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.input-field>label{color:var(--md-sys-color-on-surface-variant);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-size:16px;position:absolute;left:16px;top:16px;cursor:text;-webkit-transform-origin:top left;transform-origin:top left;-webkit-transition:left .2s ease-out,top .2s ease-out,-webkit-transform .2s ease-out;transition:left .2s ease-out,top .2s ease-out,-webkit-transform .2s ease-out;transition:left .2s ease-out,top .2s ease-out,transform .2s ease-out;transition:left .2s ease-out,top .2s ease-out,transform .2s ease-out,-webkit-transform .2s ease-out}.input-field .supporting-text{color:var(--md-sys-color-on-surface-variant);font-size:12px;padding:0 16px;margin-top:4px}.input-field .character-counter{color:var(--md-sys-color-on-surface-variant);font-size:12px;float:right;padding:0 16px;margin-top:4px}.input-field .prefix{position:absolute;left:12px;top:16px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-self:center;-ms-flex-item-align:center;align-self:center}.input-field .suffix{position:absolute;right:12px;top:16px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.input-field .prefix~input,.input-field .prefix~textarea{padding-left:52px}.input-field .suffix~input,.input-field .suffix~textarea{padding-right:52px}.input-field .prefix~label{left:52px}.input-field.outlined input,.input-field.outlined textarea{padding-top:0;background-color:var(--md-sys-color-background);border:1px solid var(--md-sys-color-on-surface-variant);border-radius:4px}.input-field.outlined input:focus:not([readonly]),.input-field.outlined textarea:focus:not([readonly]){border:2px solid var(--input-color);padding-top:0;margin-left:-1px}.input-field.outlined input:focus:not([readonly])+label,.input-field.outlined textarea:focus:not([readonly])+label{color:var(--input-color)}.input-field.outlined input:not(:-moz-placeholder-shown)+label, .input-field.outlined textarea:not(:-moz-placeholder-shown)+label{top:-8px;left:16px;margin-left:-4px;padding:0 4px;background-color:var(--md-sys-color-background)}.input-field.outlined input:not(:-ms-input-placeholder)+label, .input-field.outlined textarea:not(:-ms-input-placeholder)+label{top:-8px;left:16px;margin-left:-4px;padding:0 4px;background-color:var(--md-sys-color-background)}.input-field.outlined input:focus:not([readonly])+label,.input-field.outlined input:not([placeholder=" "])+label,.input-field.outlined input:not(:placeholder-shown)+label,.input-field.outlined textarea:focus:not([readonly])+label,.input-field.outlined textarea:not([placeholder=" "])+label,.input-field.outlined textarea:not(:placeholder-shown)+label{top:-8px;left:16px;margin-left:-4px;padding:0 4px;background-color:var(--md-sys-color-background)}.input-field.outlined input:disabled,.input-field.outlined input[readonly=readonly],.input-field.outlined textarea:disabled,.input-field.outlined textarea[readonly=readonly]{color:rgba(var(--md_sys_color_on-surface), 0.38);border-color:rgba(var(--md_sys_color_on-surface), 0.12)}.input-field.error input,.input-field.error textarea{border-color:var(--md-sys-color-error)}.input-field.error input:focus:not([readonly]),.input-field.error textarea:focus:not([readonly]){border-color:var(--md-sys-color-error)}.input-field.error input:focus:not([readonly])+label,.input-field.error textarea:focus:not([readonly])+label{color:var(--md-sys-color-error)}.input-field.error label{color:var(--md-sys-color-error)}.input-field.error .supporting-text{color:var(--md-sys-color-error)}.input-field.error .suffix{color:var(--md-sys-color-error)}.searchbar .prefix{position:absolute;padding-left:1rem;top:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-self:center;-ms-flex-item-align:center;align-self:center}.searchbar>input{border-width:0;background-color:rgba(0,0,0,0);padding-left:3rem}.searchbar.has-sidebar{margin-left:0}@media only screen and (min-width : 993px){.searchbar.has-sidebar{margin-left:300px}}textarea{width:100%;height:3rem;background-color:rgba(0,0,0,0)}textarea.materialize-textarea{padding-top:26px !important;padding-bottom:4px !important;line-height:normal;overflow-y:hidden;resize:none;min-height:3rem;-webkit-box-sizing:border-box;box-sizing:border-box}.hiddendiv{visibility:hidden;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:break-word;padding-top:1.2rem;position:absolute;top:0;z-index:-1}.autocomplete-content li .highlight{color:var(--md-sys-color-on-background)}.autocomplete-content li img{height:40px;width:40px;margin:5px 15px}.datepicker-date-input{position:relative;text-indent:-9999px}.datepicker-date-input::after{display:block;position:absolute;top:1.1rem;content:attr(data-date);color:var(--input-color);text-indent:0}.datepicker-date-input:focus-visible{text-indent:0}.datepicker-date-input:focus-visible:after{text-indent:-9999px}[type=radio]:not(:checked),[type=radio]:checked{position:absolute;opacity:0;pointer-events:none}[type=radio]:not(:checked)+span,[type=radio]:checked+span{position:relative;padding-left:35px;cursor:pointer;display:inline-block;height:25px;line-height:25px;font-size:1rem;-webkit-transition:.28s ease;transition:.28s ease;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}[type=radio]+span:before,[type=radio]+span:after{content:"";position:absolute;left:0;top:0;margin:4px;width:16px;height:16px;z-index:0;-webkit-transition:.28s ease;transition:.28s ease}[type=radio]:not(:checked)+span:before,[type=radio]:not(:checked)+span:after,[type=radio]:checked+span:before,[type=radio]:checked+span:after,[type=radio].with-gap:checked+span:before,[type=radio].with-gap:checked+span:after{border-radius:50%}[type=radio]:not(:checked)+span:before,[type=radio]:not(:checked)+span:after{border:2px solid var(--md-sys-color-on-surface-variant)}[type=radio]:not(:checked)+span:after{-webkit-transform:scale(0);transform:scale(0)}[type=radio]:checked+span:before{border:2px solid rgba(0,0,0,0)}[type=radio]:checked+span:after,[type=radio].with-gap:checked+span:before,[type=radio].with-gap:checked+span:after{border:2px solid var(--md-sys-color-primary)}[type=radio]:checked+span:after,[type=radio].with-gap:checked+span:after{background-color:var(--md-sys-color-primary)}[type=radio]:checked+span:after{-webkit-transform:scale(1.02);transform:scale(1.02)}[type=radio].with-gap:checked+span:after{-webkit-transform:scale(0.5);transform:scale(0.5)}[type=radio].tabbed:focus+span:before{-webkit-box-shadow:0 0 0 10px rgba(var(--md-sys-color-primary-numeric), 0.18);box-shadow:0 0 0 10px rgba(var(--md-sys-color-primary-numeric), 0.18)}[type=radio].with-gap:disabled:checked+span:before{border:2px solid var(--md-sys-color-on-surface)}[type=radio].with-gap:disabled:checked+span:after{border:none;background-color:var(--md-sys-color-on-surface)}[type=radio]:disabled:not(:checked)+span:before,[type=radio]:disabled:checked+span:before{background-color:rgba(0,0,0,0);border-color:var(--md-sys-color-on-surface)}[type=radio]:disabled+span{color:var(--md-sys-color-on-surface)}[type=radio]:disabled:not(:checked)+span:before{border-color:var(--md-sys-color-on-surface)}[type=radio]:disabled:checked+span:after{background-color:var(--md-sys-color-on-surface);border-color:var(--md-sys-color-on-surface)}[type=checkbox]:not(:checked),[type=checkbox]:checked{position:absolute;opacity:0;pointer-events:none}[type=checkbox]+span:not(.lever){position:relative;padding-left:35px;cursor:pointer;display:inline-block;height:25px;line-height:25px;font-size:1rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}[type=checkbox]+span:not(.lever):before,[type=checkbox]:not(.filled-in)+span:not(.lever):after{content:"";position:absolute;top:0;left:0;width:18px;height:18px;z-index:0;border:2px solid var(--md-sys-color-on-surface-variant);border-radius:1px;margin-top:3px;-webkit-transition:.2s;transition:.2s}[type=checkbox]:not(.filled-in)+span:not(.lever):after{border:0;-webkit-transform:scale(0);transform:scale(0)}[type=checkbox]:not(:checked):disabled+span:not(.lever):before{border:none;background-color:var(--md-sys-color-on-surface)}[type=checkbox].tabbed:focus+span:not(.lever):after{-webkit-transform:scale(1);transform:scale(1);border:0;border-radius:50%;-webkit-box-shadow:0 0 0 10px rgba(0,0,0,.12);box-shadow:0 0 0 10px rgba(0,0,0,.12);background-color:rgba(0,0,0,.12)}[type=checkbox]:checked+span:not(.lever):before{top:-4px;left:-5px;width:12px;height:22px;border-top:2px solid rgba(0,0,0,0);border-left:2px solid rgba(0,0,0,0);border-right:2px solid var(--md-sys-color-primary);border-bottom:2px solid var(--md-sys-color-primary);-webkit-transform:rotate(40deg);transform:rotate(40deg);-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transform-origin:100% 100%;transform-origin:100% 100%}[type=checkbox]:checked:disabled+span:before{border-right:2px solid var(--md-sys-color-on-surface);border-bottom:2px solid var(--md-sys-color-on-surface)}[type=checkbox]:indeterminate+span:not(.lever):before{top:-11px;left:-12px;width:10px;height:22px;border-top:none;border-left:none;border-right:2px solid var(--md-sys-color-primary);border-bottom:none;-webkit-transform:rotate(90deg);transform:rotate(90deg);-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transform-origin:100% 100%;transform-origin:100% 100%}[type=checkbox]:indeterminate:disabled+span:not(.lever):before{border-right:2px solid var(--md-sys-color-on-surface);background-color:rgba(0,0,0,0)}[type=checkbox].filled-in+span:not(.lever):after{border-radius:2px}[type=checkbox].filled-in+span:not(.lever):before,[type=checkbox].filled-in+span:not(.lever):after{content:"";left:0;position:absolute;-webkit-transition:border .25s,background-color .25s,width .2s .1s,height .2s .1s,top .2s .1s,left .2s .1s;transition:border .25s,background-color .25s,width .2s .1s,height .2s .1s,top .2s .1s,left .2s .1s;z-index:1}[type=checkbox].filled-in:not(:checked)+span:not(.lever):before{width:0;height:0;border:3px solid rgba(0,0,0,0);left:6px;top:10px;-webkit-transform:rotateZ(37deg);transform:rotateZ(37deg);-webkit-transform-origin:100% 100%;transform-origin:100% 100%}[type=checkbox].filled-in:not(:checked)+span:not(.lever):after{height:20px;width:20px;background-color:rgba(0,0,0,0);border:2px solid var(--md-sys-color-on-surface-variant);top:0px;z-index:0}[type=checkbox].filled-in:checked+span:not(.lever):before{top:0;left:1px;width:8px;height:13px;border-top:2px solid rgba(0,0,0,0);border-left:2px solid rgba(0,0,0,0);border-right:2px solid var(--md-sys-color-on-primary);border-bottom:2px solid var(--md-sys-color-on-primary);-webkit-transform:rotateZ(37deg);transform:rotateZ(37deg);-webkit-transform-origin:100% 100%;transform-origin:100% 100%}[type=checkbox].filled-in:checked+span:not(.lever):after{top:0;width:20px;height:20px;border:2px solid var(--md-sys-color-primary);background-color:var(--md-sys-color-primary);z-index:0}[type=checkbox].filled-in.tabbed:focus+span:not(.lever):after{border-radius:2px;border-color:var(--md-sys-color-on-surface-variant) r;background-color:rgba(0,0,0,.12)}[type=checkbox].filled-in.tabbed:checked:focus+span:not(.lever):after{border-radius:2px;background-color:var(--md-sys-color-primary);border-color:var(--md-sys-color-primary)}[type=checkbox].filled-in:disabled:not(:checked)+span:not(.lever):before{background-color:rgba(0,0,0,0);border:2px solid rgba(0,0,0,0)}[type=checkbox].filled-in:disabled:not(:checked)+span:not(.lever):after{border-color:rgba(0,0,0,0);background-color:var(--md-sys-color-on-surface)}[type=checkbox].filled-in:disabled:checked+span:not(.lever):before{background-color:rgba(0,0,0,0)}[type=checkbox].filled-in:disabled:checked+span:not(.lever):after{background-color:var(--md-sys-color-on-surface);border-color:var(--md-sys-color-on-surface)}.switch{--track-height: 32px;--track-width: 52px;--border-width: 2px;--size-off: 16px;--size-on: 24px;--icon-size: 16px;--gap-on: calc(((var(--track-height) - var(--size-on)) / 2) - var(--border-width));--gap-off: calc(((var(--track-height) - var(--size-off)) / 2) - var(--border-width))}.switch,.switch *{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.switch label{cursor:pointer}.switch label input[type=checkbox]{opacity:0;width:0;height:0}.switch label input[type=checkbox]:checked+.lever{background-color:var(--md-sys-color-primary);border-color:var(--md-sys-color-primary)}.switch label input[type=checkbox]:checked+.lever:before,.switch label input[type=checkbox]:checked+.lever:after{top:var(--gap-on);left:calc(var(--track-width) - var(--size-on) - var(--gap-on) - 2*var(--border-width));width:var(--size-on);height:var(--size-on)}.switch label .lever{content:"";display:inline-block;position:relative;width:var(--track-width);height:var(--track-height);border-style:solid;border-width:2px;border-color:var(--md-sys-color-outline);background-color:var(--md-sys-color-surface-variant);border-radius:15px;margin-right:10px;-webkit-transition:background .3s ease;transition:background .3s ease;vertical-align:middle;margin:0 16px}.switch label .lever:before,.switch label .lever:after{content:"";position:absolute;display:inline-block;width:var(--size-off);height:var(--size-off);border-radius:50%;left:var(--gap-off);top:var(--gap-off);-webkit-transition:left .3s ease,background .3s ease,-webkit-box-shadow .1s ease,-webkit-transform .1s ease;transition:left .3s ease,background .3s ease,-webkit-box-shadow .1s ease,-webkit-transform .1s ease;transition:left .3s ease,background .3s ease,box-shadow .1s ease,transform .1s ease;transition:left .3s ease,background .3s ease,box-shadow .1s ease,transform .1s ease,-webkit-box-shadow .1s ease,-webkit-transform .1s ease}.switch label .lever:after{height:var(--size-off);width:var(--size-off)}input[type=checkbox]:not(:disabled)~.lever:active:before,input[type=checkbox]:not(:disabled).tabbed:focus~.lever::before,input[type=checkbox]:not(:disabled)~.lever:hover::before{-webkit-transform:scale(2.4);transform:scale(2.4)}input[type=checkbox]:checked:not(:disabled)~.lever:hover::before{background-color:rgba(var(--md-sys-color-primary-numeric), 0.06)}input[type=checkbox]:checked:not(:disabled)~.lever:active::before,input[type=checkbox]:checked:not(:disabled).tabbed:focus~.lever::before{background-color:rgba(var(--md-sys-color-primary-numeric), 0.18)}input[type=checkbox]:not(:disabled)~.lever:hover::before{background-color:rgba(0,0,0,.04)}input[type=checkbox]:not(:disabled)~.lever:active:before,input[type=checkbox]:not(:disabled).tabbed:focus~.lever::before{background-color:rgba(0,0,0,.12)}.switch input[type=checkbox][disabled]+.lever{cursor:default;opacity:.5}select.browser-default{opacity:1;color:var(--md-sys-color-on-background)}select{opacity:0;background-color:var(--md-sys-color-surface);width:100%;padding:5px;border:1px solid var(--md-sys-color-outline-variant);border-radius:2px;height:3rem}.select-wrapper{position:relative}.select-wrapper .caret{position:absolute;right:0;top:0;bottom:0;margin:auto 0;z-index:0;fill:var(--md-sys-color-on-background)}.select-wrapper .hide-select{width:0;height:0;overflow:hidden;position:absolute;top:0;z-index:-1}select:disabled{color:var(--md-sys-color-on-surface)}.select-wrapper.disabled+label{color:var(--md-sys-color-on-surface)}.select-wrapper.disabled .caret{fill:var(--md-sys-color-on-surface)}.select-wrapper input.select-dropdown:disabled{color:var(--md-sys-color-on-surface);cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.select-wrapper i{color:var(--md-sys-color-on-surface)}.select-dropdown li.disabled,.select-dropdown li.disabled>span,.select-dropdown li.optgroup{color:var(--md-sys-color-on-surface)}.select-dropdown li img{height:40px;width:40px;margin:5px 15px;float:right}.select-dropdown li.optgroup{border-top:1px solid rgba(0,0,0,.04)}.select-dropdown li.optgroup.selected>span{color:var(--md-sys-color-on-background)}.select-dropdown li.optgroup>span{color:var(--md-sys-color-on-surface-variant)}.select-dropdown li.optgroup~li.optgroup-option{padding-left:1rem}.file-field{display:grid;grid-template-columns:-webkit-min-content auto;grid-template-columns:min-content auto;gap:10px}.file-field .file-path-wrapper{overflow:hidden}.file-field input.file-path{width:100%}.file-field .btn,.file-field .btn-large,.file-field .btn-small{height:3rem;line-height:3rem}.file-field span{cursor:pointer}.file-field input[type=file]{position:absolute;top:0;right:0;left:0;bottom:0;cursor:pointer;width:100%;margin:0;padding:0;opacity:0;font-size:20px;filter:alpha(opacity=0)}.file-field input[type=file]::-webkit-file-upload-button{display:none}.range-field{position:relative}input[type=range],input[type=range]+.thumb{cursor:pointer}input[type=range]{position:relative;background-color:rgba(0,0,0,0);border:none;outline:none;width:100%;margin:15px 0;padding:0}input[type=range]:focus{outline:none}input[type=range]+.thumb{position:absolute;top:10px;left:0;border:none;height:0;width:0;border-radius:50%;background-color:var(--md-sys-color-primary);margin-left:7px;-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}input[type=range]+.thumb .value{display:block;width:30px;text-align:center;color:var(--md-sys-color-primary);font-size:0;-webkit-transform:rotate(45deg);transform:rotate(45deg)}input[type=range]+.thumb.active{border-radius:50% 50% 50% 0}input[type=range]+.thumb.active .value{color:var(--md-sys-color-on-primary);margin-left:-1px;margin-top:8px;font-size:10px}input[type=range]{-webkit-appearance:none}input[type=range]::-webkit-slider-runnable-track{height:3px;border:none}input[type=range]::-webkit-slider-thumb{border:none;height:14px;width:14px;border-radius:50%;background:var(--md-sys-color-primary);-webkit-transition:-webkit-box-shadow .3s;transition:-webkit-box-shadow .3s;transition:box-shadow .3s;transition:box-shadow .3s, -webkit-box-shadow .3s;-webkit-appearance:none;background-color:var(--md-sys-color-primary);-webkit-transform-origin:50% 50%;transform-origin:50% 50%;margin:-5px 0 0 0}.keyboard-focused input[type=range]:focus:not(.active)::-webkit-slider-thumb{-webkit-box-shadow:0 0 0 10px rgba(var(--md-sys-color-primary-numeric), 0.18);box-shadow:0 0 0 10px rgba(var(--md-sys-color-primary-numeric), 0.18)}input[type=range]::-moz-range-track{height:3px;border:none}input[type=range]::-moz-focus-inner{border:0}input[type=range]::-moz-range-thumb{border:none;height:14px;width:14px;border-radius:50%;background:var(--md-sys-color-primary);-moz-transition:box-shadow .3s;transition:box-shadow .3s;margin-top:-5px}input[type=range]:-moz-focusring{outline:1px solid #fff;outline-offset:-1px}.keyboard-focused input[type=range]:focus:not(.active)::-moz-range-thumb{box-shadow:0 0 0 10px rgba(var(--md-sys-color-primary-numeric), 0.18)}input[type=range]::-ms-track{height:3px;background:rgba(0,0,0,0);border-color:rgba(0,0,0,0);border-width:6px 0;color:rgba(0,0,0,0)}input[type=range]::-ms-fill-lower,input[type=range]::-moz-range-progress{background:var(--md-sys-color-primary)}input[type=range]::-ms-fill-upper,input[type=range]::-moz-range-track{background:var(--md-sys-color-shadow-light)}input[type=range]::-ms-thumb{border:none;height:14px;width:14px;border-radius:50%;background:var(--md-sys-color-primary);-ms-transition:box-shadow .3s;transition:box-shadow .3s}.keyboard-focused input[type=range]:focus:not(.active)::-ms-thumb{box-shadow:0 0 0 10px rgba(var(--md-sys-color-primary-numeric), 0.18)}.table-of-contents{list-style:none}.table-of-contents.fixed{position:fixed}.table-of-contents li{padding:0}.table-of-contents a{display:inline-block;font-weight:400;color:var(--md-sys-color-secondary);padding-left:16px;height:2rem;line-height:2rem;border-left:1px solid var(--md-sys-color-outline-variant)}.table-of-contents a:hover{color:var(--md-sys-color-on-background);padding-left:15px}.table-of-contents a.active{color:var(--md-sys-color-primary);font-weight:500;padding-left:14px;border-left:2px solid var(--md-sys-color-primary)}.sidenav{--sidenav-width: 300px;--sidenav-font-size: 14px;--sidenav-padding: 16px;--sidenav-item-height: 48px;--sidenav-line-height: var(--sidenav-item-height);position:fixed;width:var(--sidenav-width);left:0;top:0;margin:0;-webkit-transform:translateX(-100%);transform:translateX(-100%);height:100vh;padding:0;z-index:999;overflow-y:auto;will-change:transform;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transform:translateX(-105%);transform:translateX(-105%);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:var(--md-sys-color-on-secondary-container);background-color:var(--md-sys-color-surface)}.sidenav.right-aligned{right:0;-webkit-transform:translateX(105%);transform:translateX(105%);left:auto;-webkit-transform:translateX(100%);transform:translateX(100%)}.sidenav .collapsible{margin:0}.sidenav a:focus{background-color:rgba(0,0,0,.12)}.sidenav li.active>a:not(.collapsible-header):not(.btn):not(.btn-large):not(.btn-small):not(.btn-large):not(.btn-small):not(.btn-flat):not(.btn-large):not(.btn-floating){background-color:color-mix(in srgb, var(--md-sys-color-secondary) 10%, transparent)}.sidenav .collapsible-body>ul{padding-left:10px}.sidenav li{list-style:none;display:grid;-webkit-align-content:center;-ms-flex-line-pack:center;align-content:center}.sidenav li>a{margin:0 12px;padding:0 var(--sidenav-padding);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:var(--sidenav-item-height);font-size:var(--sidenav-font-size);font-weight:500;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;overflow:hidden;border-radius:100px}.sidenav li>a:not(.btn):not(.btn-large):not(.btn-small):not(.btn-flat):not(.btn-large):not(.btn-floating){color:var(--md-sys-color-on-secondary-container)}.sidenav li>a:not(.btn):not(.btn-large):not(.btn-small):not(.btn-flat):not(.btn-large):not(.btn-floating):hover{background-color:color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent)}.sidenav li>a.btn,.sidenav li>a.btn-small,.sidenav li>a.btn-large,.sidenav li>a.btn-flat,.sidenav li>a.btn-floating{margin:10px 15px}.sidenav li>a>.material-icons,.sidenav li>a>.material-symbols-outlined,.sidenav li>a>.material-symbols-rounded,.sidenav li>a>.material-symbols-sharp{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle;margin-right:12px}.sidenav .divider{margin:calc(var(--sidenav-padding)*.5) 0 0 0}.sidenav .subheader{cursor:initial;pointer-events:none;color:red;font-size:var(--sidenav-font-size);font-weight:500;line-height:var(--sidenav-line-height)}.sidenav .user-view{position:relative;padding:calc(var(--sidenav-padding)*2) calc(var(--sidenav-padding)*2) 0;margin-bottom:calc(var(--sidenav-padding)*.5)}.sidenav .user-view>a{height:auto;padding:0}.sidenav .user-view>a:hover{background-color:rgba(0,0,0,0)}.sidenav .user-view .background{overflow:hidden;position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1}.sidenav .user-view .circle,.sidenav .user-view .name,.sidenav .user-view .email{display:block}.sidenav .user-view .circle{height:64px;width:64px}.sidenav .user-view .name,.sidenav .user-view .email{font-size:var(--sidenav-font-size);line-height:calc(var(--sidenav-line-height)*.5)}.sidenav .user-view .name{margin-top:16px;font-weight:500}.sidenav .user-view .email{padding-bottom:16px;font-weight:400}.drag-target{height:100%;position:fixed;top:0;left:0;z-index:998}.drag-target.right-aligned{right:0}.sidenav.sidenav-fixed{left:0;-webkit-transform:translateX(0);transform:translateX(0);position:fixed}.sidenav.sidenav-fixed.right-aligned{right:0;left:auto}@media only screen and (max-width : 992.99px){.sidenav.sidenav-fixed{-webkit-transform:translateX(-105%);transform:translateX(-105%)}.sidenav.sidenav-fixed.right-aligned{-webkit-transform:translateX(105%);transform:translateX(105%)}.sidenav>a{padding:0 var(--sidenav-padding)}.sidenav .user-view{padding:var(--sidenav-padding) var(--sidenav-padding) 0}}.sidenav .collapsible-body{padding:0}.sidenav-overlay{position:fixed;top:0;left:0;right:0;opacity:0;height:120vh;background-color:rgba(0,0,0,.5);z-index:997;display:none}.sidenav .collapsible,.sidenav.sidenav-fixed .collapsible{border:none;-webkit-box-shadow:none;box-shadow:none}.sidenav .collapsible-header,.sidenav.sidenav-fixed .collapsible-header{border:none}.sidenav .collapsible-body,.sidenav.sidenav-fixed .collapsible-body{border:none}.progress{position:relative;height:4px;display:block;width:100%;border-radius:4px;margin:.5rem 0 1rem 0;overflow:hidden;background-color:var(--md-sys-color-secondary-container)}.progress .determinate{position:absolute;top:0;left:0;bottom:0;background-color:var(--md-sys-color-primary);-webkit-transition:width .3s linear;transition:width .3s linear}.progress .indeterminate{background-color:var(--md-sys-color-primary)}.progress .indeterminate:before{content:"";position:absolute;background-color:inherit;top:0;left:0;bottom:0;will-change:left,right;-webkit-animation:indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;animation:indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite}.progress .indeterminate:after{content:"";position:absolute;background-color:inherit;top:0;left:0;bottom:0;will-change:left,right;-webkit-animation:indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;animation:indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;-webkit-animation-delay:1.15s;animation-delay:1.15s}@-webkit-keyframes indeterminate{0%{left:-35%;right:100%}60%{left:100%;right:-90%}100%{left:100%;right:-90%}}@keyframes indeterminate{0%{left:-35%;right:100%}60%{left:100%;right:-90%}100%{left:100%;right:-90%}}@-webkit-keyframes indeterminate-short{0%{left:-200%;right:100%}60%{left:107%;right:-8%}100%{left:107%;right:-8%}}@keyframes indeterminate-short{0%{left:-200%;right:100%}60%{left:107%;right:-8%}100%{left:107%;right:-8%}}.preloader-wrapper{display:inline-block;position:relative;width:50px;height:50px}.preloader-wrapper.small{width:36px;height:36px}.preloader-wrapper.big{width:64px;height:64px}.preloader-wrapper.active{-webkit-animation:container-rotate 1568ms linear infinite;animation:container-rotate 1568ms linear infinite}@-webkit-keyframes container-rotate{to{-webkit-transform:rotate(360deg)}}@keyframes container-rotate{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.spinner-layer{position:absolute;width:100%;height:100%;opacity:0;border-color:var(--md-sys-color-primary)}.spinner-blue,.spinner-blue-only{border-color:#4285f4}.spinner-red,.spinner-red-only{border-color:#db4437}.spinner-yellow,.spinner-yellow-only{border-color:#f4b400}.spinner-green,.spinner-green-only{border-color:#0f9d58}.active .spinner-layer.spinner-blue{-webkit-animation:fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both,blue-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;animation:fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both,blue-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both}.active .spinner-layer.spinner-red{-webkit-animation:fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both,red-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;animation:fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both,red-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both}.active .spinner-layer.spinner-yellow{-webkit-animation:fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both,yellow-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;animation:fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both,yellow-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both}.active .spinner-layer.spinner-green{-webkit-animation:fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both,green-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;animation:fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both,green-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both}.active .spinner-layer,.active .spinner-layer.spinner-blue-only,.active .spinner-layer.spinner-red-only,.active .spinner-layer.spinner-yellow-only,.active .spinner-layer.spinner-green-only{opacity:1;-webkit-animation:fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;animation:fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both}@-webkit-keyframes fill-unfill-rotate{12.5%{-webkit-transform:rotate(135deg)}25%{-webkit-transform:rotate(270deg)}37.5%{-webkit-transform:rotate(405deg)}50%{-webkit-transform:rotate(540deg)}62.5%{-webkit-transform:rotate(675deg)}75%{-webkit-transform:rotate(810deg)}87.5%{-webkit-transform:rotate(945deg)}to{-webkit-transform:rotate(1080deg)}}@keyframes fill-unfill-rotate{12.5%{-webkit-transform:rotate(135deg);transform:rotate(135deg)}25%{-webkit-transform:rotate(270deg);transform:rotate(270deg)}37.5%{-webkit-transform:rotate(405deg);transform:rotate(405deg)}50%{-webkit-transform:rotate(540deg);transform:rotate(540deg)}62.5%{-webkit-transform:rotate(675deg);transform:rotate(675deg)}75%{-webkit-transform:rotate(810deg);transform:rotate(810deg)}87.5%{-webkit-transform:rotate(945deg);transform:rotate(945deg)}to{-webkit-transform:rotate(1080deg);transform:rotate(1080deg)}}@-webkit-keyframes blue-fade-in-out{from{opacity:1}25%{opacity:1}26%{opacity:0}89%{opacity:0}90%{opacity:1}100%{opacity:1}}@keyframes blue-fade-in-out{from{opacity:1}25%{opacity:1}26%{opacity:0}89%{opacity:0}90%{opacity:1}100%{opacity:1}}@-webkit-keyframes red-fade-in-out{from{opacity:0}15%{opacity:0}25%{opacity:1}50%{opacity:1}51%{opacity:0}}@keyframes red-fade-in-out{from{opacity:0}15%{opacity:0}25%{opacity:1}50%{opacity:1}51%{opacity:0}}@-webkit-keyframes yellow-fade-in-out{from{opacity:0}40%{opacity:0}50%{opacity:1}75%{opacity:1}76%{opacity:0}}@keyframes yellow-fade-in-out{from{opacity:0}40%{opacity:0}50%{opacity:1}75%{opacity:1}76%{opacity:0}}@-webkit-keyframes green-fade-in-out{from{opacity:0}65%{opacity:0}75%{opacity:1}90%{opacity:1}100%{opacity:0}}@keyframes green-fade-in-out{from{opacity:0}65%{opacity:0}75%{opacity:1}90%{opacity:1}100%{opacity:0}}.gap-patch{position:absolute;top:0;left:45%;width:10%;height:100%;overflow:hidden;border-color:inherit}.gap-patch .circle{width:1000%;left:-450%}.circle-clipper{display:inline-block;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit}.circle-clipper .circle{width:200%;height:100%;border-width:3px;border-style:solid;border-color:inherit;border-bottom-color:rgba(0,0,0,0) !important;border-radius:50%;-webkit-animation:none;animation:none;position:absolute;top:0;right:0;bottom:0}.circle-clipper.left .circle{left:0;border-right-color:rgba(0,0,0,0) !important;-webkit-transform:rotate(129deg);transform:rotate(129deg)}.circle-clipper.right .circle{left:-100%;border-left-color:rgba(0,0,0,0) !important;-webkit-transform:rotate(-129deg);transform:rotate(-129deg)}.active .circle-clipper.left .circle{-webkit-animation:left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;animation:left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both}.active .circle-clipper.right .circle{-webkit-animation:right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;animation:right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both}@-webkit-keyframes left-spin{from{-webkit-transform:rotate(130deg)}50%{-webkit-transform:rotate(-5deg)}to{-webkit-transform:rotate(130deg)}}@keyframes left-spin{from{-webkit-transform:rotate(130deg);transform:rotate(130deg)}50%{-webkit-transform:rotate(-5deg);transform:rotate(-5deg)}to{-webkit-transform:rotate(130deg);transform:rotate(130deg)}}@-webkit-keyframes right-spin{from{-webkit-transform:rotate(-130deg)}50%{-webkit-transform:rotate(5deg)}to{-webkit-transform:rotate(-130deg)}}@keyframes right-spin{from{-webkit-transform:rotate(-130deg);transform:rotate(-130deg)}50%{-webkit-transform:rotate(5deg);transform:rotate(5deg)}to{-webkit-transform:rotate(-130deg);transform:rotate(-130deg)}}#spinnerContainer.cooldown{-webkit-animation:container-rotate 1568ms linear infinite,fade-out 400ms cubic-bezier(0.4, 0, 0.2, 1);animation:container-rotate 1568ms linear infinite,fade-out 400ms cubic-bezier(0.4, 0, 0.2, 1)}@-webkit-keyframes fade-out{from{opacity:1}to{opacity:0}}@keyframes fade-out{from{opacity:1}to{opacity:0}}.slider{position:relative;height:400px;width:100%}.slider.fullscreen{height:100%;width:100%;position:absolute;top:0;left:0;right:0;bottom:0}.slider.fullscreen ul.slides{padding-left:0;list-style-type:none;height:100%}.slider.fullscreen ul.indicators{padding-left:0;list-style-type:none;z-index:2;bottom:30px}.slider.fullscreen ul.indicators .indicator-item{background-color:hsla(0,0%,100%,.45)}.slider.fullscreen ul.indicators .indicator-item.active{background-color:var(--md-ref-palette-primary100)}.slider .slides{background-color:var(--md-sys-color-surface);margin:0;height:400px;padding-left:0;list-style-type:none}.slider .slides li{padding-left:0;list-style-type:none;opacity:0;position:absolute;top:0;left:0;z-index:1;width:100%;height:inherit;overflow:hidden}.slider .slides li img{height:100%;width:100%;background-size:cover;background-position:center}.slider .slides li .caption{color:#fff;position:absolute;top:15%;left:15%;width:70%;opacity:0}.slider .slides li .caption p{color:hsla(0,0%,100%,.75)}.slider .slides li.active{z-index:2}.slider .indicators{padding-left:0;list-style-type:none;position:absolute;text-align:center;left:0;right:0;bottom:0;margin:0}.slider .indicators .indicator-item{display:inline-block;position:relative;height:16px;width:16px;margin:0 12px}.slider .indicators .indicator-item-btn{position:absolute;top:0;left:0;cursor:pointer;background-color:var(--md-sys-color-shadow-light);-webkit-transition:background-color .3s;transition:background-color .3s;border-radius:50%;border-width:0;width:100%;height:100%}.slider .indicators .indicator-item-btn.active{background-color:var(--md-sys-color-primary)}.carousel{--carousel-height: 400px;overflow:hidden;position:relative;width:100%;height:var(--carousel-height);-webkit-perspective:500px;perspective:500px;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transform-origin:0% 50%;transform-origin:0% 50%}.carousel.carousel-slider{top:0;left:0}.carousel.carousel-slider .carousel-fixed-item{position:absolute;left:0;right:0;bottom:20px;z-index:1}.carousel.carousel-slider .carousel-fixed-item.with-indicators{bottom:68px}.carousel.carousel-slider .carousel-item{width:100%;height:100%;min-height:var(--carousel-height);position:absolute;top:0;left:0}.carousel.carousel-slider .carousel-item h2{font-size:24px;font-weight:500;line-height:32px}.carousel.carousel-slider .carousel-item p{font-size:15px}.carousel .carousel-item{visibility:hidden;width:calc(var(--carousel-height)*.5);height:calc(var(--carousel-height)*.5);position:absolute;top:0;left:0}.carousel .carousel-item>img{width:100%}.carousel .indicators{padding-left:0;list-style-type:none;position:absolute;text-align:center;left:0;right:0;bottom:0;margin:0}.carousel .indicators .indicator-item{display:inline-block;position:relative;cursor:pointer;height:8px;width:8px;margin:24px 4px;background-color:hsla(0,0%,100%,.45);-webkit-transition:background-color .3s;transition:background-color .3s;border-radius:50%}.carousel .indicators .indicator-item.active{background-color:var(--md-ref-palette-primary100)}.carousel.scrolling .carousel-item .materialboxed,.carousel .carousel-item:not(.active) .materialboxed{pointer-events:none}.tap-target-wrapper{width:800px;height:800px;position:fixed;z-index:1000;visibility:hidden;-webkit-transition:visibility 0s .3s;transition:visibility 0s .3s}.tap-target-wrapper.open{visibility:visible;-webkit-transition:visibility 0s;transition:visibility 0s}.tap-target-wrapper.open .tap-target{-webkit-transform:scale(1);transform:scale(1);opacity:.95;-webkit-transition:opacity .3s cubic-bezier(0.42, 0, 0.58, 1),-webkit-transform .3s cubic-bezier(0.42, 0, 0.58, 1);transition:opacity .3s cubic-bezier(0.42, 0, 0.58, 1),-webkit-transform .3s cubic-bezier(0.42, 0, 0.58, 1);transition:transform .3s cubic-bezier(0.42, 0, 0.58, 1),opacity .3s cubic-bezier(0.42, 0, 0.58, 1);transition:transform .3s cubic-bezier(0.42, 0, 0.58, 1),opacity .3s cubic-bezier(0.42, 0, 0.58, 1),-webkit-transform .3s cubic-bezier(0.42, 0, 0.58, 1)}.tap-target-wrapper.open .tap-target-wave::before{-webkit-transform:scale(1);transform:scale(1)}.tap-target-wrapper.open .tap-target-wave::after{visibility:visible;-webkit-animation:pulse-animation 1s cubic-bezier(0.24, 0, 0.38, 1) infinite;animation:pulse-animation 1s cubic-bezier(0.24, 0, 0.38, 1) infinite;-webkit-transition:opacity .3s,visibility 0s 1s,-webkit-transform .3s;transition:opacity .3s,visibility 0s 1s,-webkit-transform .3s;transition:opacity .3s,transform .3s,visibility 0s 1s;transition:opacity .3s,transform .3s,visibility 0s 1s,-webkit-transform .3s}.tap-target{position:absolute;font-size:1rem;border-radius:50%;background-color:var(--md-sys-color-primary-container);color:var(--md-sys-color-primary);-webkit-box-shadow:0 20px 20px 0 rgba(0,0,0,.14),0 10px 50px 0 rgba(0,0,0,.12),0 30px 10px -20px rgba(0,0,0,.2);box-shadow:0 20px 20px 0 rgba(0,0,0,.14),0 10px 50px 0 rgba(0,0,0,.12),0 30px 10px -20px rgba(0,0,0,.2);width:100%;height:100%;opacity:0;-webkit-transform:scale(0);transform:scale(0);-webkit-transition:opacity .3s cubic-bezier(0.42, 0, 0.58, 1),-webkit-transform .3s cubic-bezier(0.42, 0, 0.58, 1);transition:opacity .3s cubic-bezier(0.42, 0, 0.58, 1),-webkit-transform .3s cubic-bezier(0.42, 0, 0.58, 1);transition:transform .3s cubic-bezier(0.42, 0, 0.58, 1),opacity .3s cubic-bezier(0.42, 0, 0.58, 1);transition:transform .3s cubic-bezier(0.42, 0, 0.58, 1),opacity .3s cubic-bezier(0.42, 0, 0.58, 1),-webkit-transform .3s cubic-bezier(0.42, 0, 0.58, 1)}.tap-target-content{position:relative;display:table-cell}.tap-target-wave{position:absolute;border-radius:50%;z-index:10001}.tap-target-wave::before,.tap-target-wave::after{content:"";display:block;position:absolute;width:100%;height:100%;border-radius:50%;background-color:var(--md-sys-color-surface)}.tap-target-wave::before{-webkit-transform:scale(0);transform:scale(0);-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s, -webkit-transform .3s}.tap-target-wave::after{visibility:hidden;-webkit-transition:opacity .3s,visibility 0s,-webkit-transform .3s;transition:opacity .3s,visibility 0s,-webkit-transform .3s;transition:opacity .3s,transform .3s,visibility 0s;transition:opacity .3s,transform .3s,visibility 0s,-webkit-transform .3s;z-index:-1}.tap-target-origin{top:50%;left:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);z-index:10002;position:absolute !important}.tap-target-origin:not(.btn):not(.btn-large):not(.btn-small),.tap-target-origin:not(.btn):not(.btn-large):not(.btn-small):hover{background:none}@media only screen and (max-width: 600px){.tap-target,.tap-target-wrapper{width:600px;height:600px}}.pulse{overflow:visible;position:relative}.pulse::before{content:"";display:block;position:absolute;pointer-events:none;width:100%;height:100%;top:0;left:0;background-color:inherit;border-radius:inherit;-webkit-transition:opacity .3s,-webkit-transform .3s;transition:opacity .3s,-webkit-transform .3s;transition:opacity .3s,transform .3s;transition:opacity .3s,transform .3s,-webkit-transform .3s;-webkit-animation:pulse-animation 1s cubic-bezier(0.24, 0, 0.38, 1) infinite;animation:pulse-animation 1s cubic-bezier(0.24, 0, 0.38, 1) infinite;z-index:-1}@-webkit-keyframes pulse-animation{0%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}50%{opacity:0;-webkit-transform:scale(1.5);transform:scale(1.5)}100%{opacity:0;-webkit-transform:scale(1.5);transform:scale(1.5)}}@keyframes pulse-animation{0%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}50%{opacity:0;-webkit-transform:scale(1.5);transform:scale(1.5)}100%{opacity:0;-webkit-transform:scale(1.5);transform:scale(1.5)}}.datepicker-container{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;max-width:325px;padding:0;background-color:var(--md-sys-color-surface)}.datepicker-controls{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;width:280px;margin:0 auto}.datepicker-controls .selects-container{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.datepicker-controls .select-wrapper input{border-bottom:none;text-align:center;margin:0}.datepicker-controls .select-wrapper input:focus{border-bottom:none}.datepicker-controls .select-wrapper .caret{display:none}.datepicker-controls .select-dropdown{padding:0;vertical-align:middle}.datepicker-controls .select-year input,.datepicker-controls .select-month input{background-color:rgba(0,0,0,0)}.datepicker-controls .select-year input{width:50px}.datepicker-controls .select-month input{width:80px}.datepicker-controls .month-prev,.datepicker-controls .month-next{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.datepicker-controls .month-prev>svg,.datepicker-controls .month-next>svg{fill:var(--md-sys-color-on-surface-variant)}.month-prev,.month-next{height:49px;margin-top:4px;cursor:pointer;background-color:rgba(0,0,0,0);border:none}.datepicker-date-display{-webkit-box-flex:1;-webkit-flex:1 auto;-ms-flex:1 auto;flex:1 auto;padding:20px 22px;border-bottom:1px solid var(--md-sys-color-surface-variant-light);font-weight:500}.datepicker-date-display .year-text{display:block;font-size:1.5rem;line-height:25px;color:var(--md-sys-color-on-primary)}.datepicker-date-display .date-text{display:block;font-size:2.8rem;line-height:47px;font-weight:500}.daterange .datepicker-date-display .date-text{font-size:1.8rem}.datepicker-calendar-container{-webkit-box-flex:2.5;-webkit-flex:2.5 auto;-ms-flex:2.5 auto;flex:2.5 auto}.datepicker-table{width:280px;font-size:1rem;margin:0 auto}.datepicker-table thead{border-bottom:none}.datepicker-table th{padding:10px 5px;text-align:center}.datepicker-table tr{border:none}.datepicker-table abbr{text-decoration:none;color:var(--md-sys-color-on-surface-variant)}.datepicker-table .datepicker-day{color:var(--md-sys-color-on-background);padding:0}.datepicker-table .datepicker-day.is-today{color:var(--md-sys-color-primary)}.datepicker-day.is-daterange-start,.datepicker-day.is-daterange-end,.datepicker-day.is-daterange{position:relative}.datepicker-day.is-daterange-start:before,.datepicker-day.is-daterange-end:before,.datepicker-day.is-daterange:before{position:absolute;top:5px;width:100%;height:34px;content:"";background-color:var(--md-sys-color-primary-container);z-index:0}.datepicker-day.is-daterange-start:before,.datepicker-day.is-daterange-end:before{width:50%}.datepicker-day.is-daterange-start:before{left:50%}.datepicker-day.is-daterange .datepicker-day-button:before{background-color:var(--md-sys-color-primary-container)}.datepicker-day-button{background-color:rgba(0,0,0,0);border:none;line-height:34px;display:block;width:34px;border-radius:50%;margin:5px;padding:0 5px;cursor:pointer;color:inherit;position:relative;z-index:1}.datepicker-day-button:hover{background-color:rgba(var(--md-sys-color-primary-numeric), 0.06)}.datepicker-day-button:focus{border-color:var(--md-sys-color-primary)}.is-selected .datepicker-day-button{background-color:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary)}.is-selected .datepicker-day-button:focus{background-color:var(--md-sys-color-surface-variant);color:var(--md-sys-color-primary)}.datepicker-day-button.is-outside-current-month button,.datepicker-day-button.is-disabled button{color:var(--md-sys-color-on-surface);pointer-events:none}.datepicker-footer{width:280px;margin:0 auto;padding-bottom:5px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between}.datepicker-cancel,.datepicker-clear,.datepicker-today,.datepicker-done{color:var(--md-sys-color-primary);padding:0 1rem}.datepicker-clear{color:var(--md-sys-color-error)}.timepicker-container{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;max-width:325px;padding:0;background-color:var(--md-sys-color-inverse-on-surface)}.text-primary{color:var(--md-sys-color-on-primary)}.timepicker-digital-display{width:auto;-webkit-box-flex:1;-webkit-flex:1 auto;-ms-flex:1 auto;flex:1 auto;padding:2rem .67rem .67rem .67rem;font-weight:300}.timepicker-text-container{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;font-size:4rem;text-align:left;color:var(--font-on-primary-color-medium);font-weight:400;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;padding:1rem 1rem 1.3rem 1rem}.timepicker-text-container input[type=text]{height:4rem;color:var(--md-sys-color-secondary);border-bottom:0px;font-size:4rem;direction:ltr}.timepicker-display-column{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex}.timepicker-display-digital-clock{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex}.timepicker-input-hours-wrapper,.timepicker-input-minutes-wrapper{width:6.9rem;height:5.75rem}.timepicker-input-hours,.timepicker-input-minutes,.timepicker-span-am-pm div{cursor:pointer}input[type=text].timepicker-input-hours,input[type=text].timepicker-input-minutes{height:100%;padding:1.33rem .8rem;border:0;text-align:center;color:var(--md-sys-color-on-background);background-color:var(--md-sys-color-surface-variant)}input[type=text].timepicker-input-hours:focus,input[type=text].timepicker-input-minutes:focus{background-color:var(--md-sys-color-primary-container)}.timepicker-input-divider-wrapper{width:1.6rem;text-align:center}.timepicker-display-am-pm{font-size:1.3rem;font-weight:400}.timepicker-span-am-pm{height:5.75rem;max-width:3.5rem}.timepicker-container .am-btn,.timepicker-container .pm-btn{width:3.6rem;height:50%;padding-left:calc(var(--btn-padding)/1.8);padding-right:calc(var(--btn-padding)/1.8);line-height:2rem;vertical-align:middle;text-align:center;border:1px solid var(--md-sys-color-outline)}.timepicker-container .am-btn{border-bottom-right-radius:0;border-bottom-left-radius:0}.timepicker-container .pm-btn{border-top:0;border-top-left-radius:0;border-top-right-radius:0}.timepicker-analog-display{-webkit-box-flex:2.5;-webkit-flex:2.5 auto;-ms-flex:2.5 auto;flex:2.5 auto;padding:.67rem}.timepicker-plate{background-color:var(--md-sys-color-surface-variant);border-radius:50%;width:260px;height:260px;overflow:visible;position:relative;margin:0 1.6rem 1.6rem 1.6rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.timepicker-canvas,.timepicker-dial{position:absolute;left:0;right:0;top:0;bottom:0}.timepicker-minutes{visibility:hidden}.timepicker-tick{border-radius:50%;color:var(--md-sys-color-on-background);line-height:40px;text-align:center;width:40px;height:40px;position:absolute;cursor:pointer;font-size:15px}.timepicker-tick.active,.timepicker-tick:hover{background-color:rgba(var(--md-sys-color-primary-numeric), 0.06)}.timepicker-dial{-webkit-transition:opacity 350ms,-webkit-transform 350ms;transition:opacity 350ms,-webkit-transform 350ms;transition:transform 350ms,opacity 350ms;transition:transform 350ms,opacity 350ms,-webkit-transform 350ms}.timepicker-dial-out{opacity:0}.timepicker-dial-out.timepicker-hours{-webkit-transform:scale(1.1, 1.1);transform:scale(1.1, 1.1)}.timepicker-dial-out.timepicker-minutes{-webkit-transform:scale(0.8, 0.8);transform:scale(0.8, 0.8)}.timepicker-canvas{-webkit-transition:opacity 175ms;transition:opacity 175ms}.timepicker-canvas line{stroke:var(--md-sys-color-primary);stroke-width:4;stroke-linecap:round}.timepicker-canvas-out{opacity:.25}.timepicker-canvas-bearing{stroke:none;fill:var(--md-sys-color-primary)}.timepicker-canvas-bg{stroke:none;fill:var(--md-sys-color-primary)}.timepicker-footer{margin:0 auto;padding:5px 1rem;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between}.timepicker-clear{color:var(--md-sys-color-error)}.timepicker-close{color:var(--md-sys-color-primary)}.timepicker-clear,.timepicker-close{padding:0 20px}@media only screen and (min-width : 993px){.timepicker-container{width:auto;max-width:620px}.timepicker-container{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row}.timepicker-digital-display{padding:.67rem}.timepicker-text-container{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;margin-top:4.8rem;text-align:center}.timepicker-display-column{padding:0 3%}.timepicker-display-am-pm{margin-top:1.1rem}.timepicker-span-am-pm{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;max-width:unset}.timepicker-container .am-btn,.timepicker-container .pm-btn{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;padding-left:calc(var(--btn-padding)/.565);padding-right:calc(var(--btn-padding)/.565);border-radius:var(--btn-border-radius);border:1px solid var(--md-sys-color-outline)}.timepicker-container .am-btn{border-top-right-radius:0;border-bottom-right-radius:0}.timepicker-container .pm-btn{border-left:0;border-bottom-left-radius:0;border-top-left-radius:0}.timepicker-plate{margin-top:1.6rem}}
\ No newline at end of file
diff --git a/dist/css/materialize.min.css.map b/dist/css/materialize.min.css.map
new file mode 100644
index 0000000000..7763d65286
--- /dev/null
+++ b/dist/css/materialize.min.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["file:///C:/Users/Daniel/Projects/materialize-docs/packages/materialize/sass/components/tokens.module.scss","file:///C:/Users/Daniel/Projects/materialize-docs/packages/materialize/sass/components/theme.module.scss","file:///C:/Users/Daniel/Projects/materialize-docs/packages/materialize/sass/components/colors.module.scss","file:///C:/Users/Daniel/Projects/materialize-docs/packages/materialize/sass/components/typography.module.scss","file:///C:/Users/Daniel/Projects/materialize-docs/packages/materialize/sass/components/_color-classes.scss","file:///C:/Users/Daniel/Projects/materialize-docs/packages/materialize/sass/components/_normalize.scss","file:///C:/Users/Daniel/Projects/materialize-docs/packages/materialize/sass/components/_global.scss","file:///C:/Users/Daniel/Projects/materialize-docs/packages/materialize/sass/components/_variables.scss","file:///C:/Users/Daniel/Projects/materialize-docs/packages/materialize/sass/components/_collection.scss","file:///C:/Users/Daniel/Projects/materialize-docs/packages/materialize/sass/components/_badges.scss","file:///C:/Users/Daniel/Projects/materialize-docs/packages/materialize/sass/components/_icons-material-design.scss","file:///C:/Users/Daniel/Projects/materialize-docs/packages/materialize/sass/components/_grid.scss","file:///C:/Users/Daniel/Projects/materialize-docs/packages/materialize/sass/components/_navbar.scss","file:///C:/Users/Daniel/Projects/materialize-docs/packages/materialize/sass/components/_typography.scss","file:///C:/Users/Daniel/Projects/materialize-docs/packages/materialize/sass/components/_transitions.scss","file:///C:/Users/Daniel/Projects/materialize-docs/packages/materialize/sass/components/_cards.scss","file:///C:/Users/Daniel/Projects/materialize-docs/packages/materialize/sass/components/_toast.scss","file:///C:/Users/Daniel/Projects/materialize-docs/packages/materialize/sass/components/_tabs.scss","file:///C:/Users/Daniel/Projects/materialize-docs/packages/materialize/sass/components/_tooltip.scss","file:///C:/Users/Daniel/Projects/materialize-docs/packages/materialize/sass/components/_buttons.scss","file:///C:/Users/Daniel/Projects/materialize-docs/packages/materialize/sass/components/_dropdown.scss","file:///C:/Users/Daniel/Projects/materialize-docs/packages/materialize/sass/components/_modal.scss","file:///C:/Users/Daniel/Projects/materialize-docs/packages/materialize/sass/components/_collapsible.scss","file:///C:/Users/Daniel/Projects/materialize-docs/packages/materialize/sass/components/_chips.scss","file:///C:/Users/Daniel/Projects/materialize-docs/packages/materialize/sass/components/_materialbox.scss","file:///C:/Users/Daniel/Projects/materialize-docs/packages/materialize/sass/components/forms/_forms.scss","file:///C:/Users/Daniel/Projects/materialize-docs/packages/materialize/sass/components/forms/_input-fields.scss","file:///C:/Users/Daniel/Projects/materialize-docs/packages/materialize/sass/components/forms/_radio-buttons.scss","file:///C:/Users/Daniel/Projects/materialize-docs/packages/materialize/sass/components/forms/_checkboxes.scss","file:///C:/Users/Daniel/Projects/materialize-docs/packages/materialize/sass/components/forms/_switches.scss","file:///C:/Users/Daniel/Projects/materialize-docs/packages/materialize/sass/components/forms/_select.scss","file:///C:/Users/Daniel/Projects/materialize-docs/packages/materialize/sass/components/forms/_file-input.scss","file:///C:/Users/Daniel/Projects/materialize-docs/packages/materialize/sass/components/forms/_range.scss","file:///C:/Users/Daniel/Projects/materialize-docs/packages/materialize/sass/components/_table_of_contents.scss","file:///C:/Users/Daniel/Projects/materialize-docs/packages/materialize/sass/components/_sidenav.scss","file:///C:/Users/Daniel/Projects/materialize-docs/packages/materialize/sass/components/_preloader.scss","file:///C:/Users/Daniel/Projects/materialize-docs/packages/materialize/sass/components/_slider.scss","file:///C:/Users/Daniel/Projects/materialize-docs/packages/materialize/sass/components/_carousel.scss","file:///C:/Users/Daniel/Projects/materialize-docs/packages/materialize/sass/components/_tapTarget.scss","file:///C:/Users/Daniel/Projects/materialize-docs/packages/materialize/sass/components/_pulse.scss","file:///C:/Users/Daniel/Projects/materialize-docs/packages/materialize/sass/components/_datepicker.scss","file:///C:/Users/Daniel/Projects/materialize-docs/packages/materialize/sass/components/_timepicker.scss"],"names":[],"mappings":"CAAA,MACE,qBAEA,mCACA,oCACA,oCACA,oCACA,oCACA,oCACA,oCACA,oCACA,oCACA,oCACA,oCACA,oCACA,oCACA,oCACA,oCACA,qCAEA,qCACA,sCACA,sCACA,sCACA,sCACA,sCACA,sCACA,sCACA,sCACA,sCACA,sCACA,sCACA,sCACA,sCACA,sCACA,uCAEA,oCACA,qCACA,qCACA,qCACA,qCACA,qCACA,qCACA,qCACA,qCACA,qCACA,qCACA,qCACA,qCACA,qCACA,qCACA,sCAEA,mCACA,oCACA,oCACA,oCACA,oCACA,oCACA,oCACA,oCACA,oCACA,oCACA,oCACA,oCACA,oCACA,oCACA,oCACA,qCAEA,2CACA,4CACA,4CACA,4CACA,4CACA,4CACA,4CACA,4CACA,4CACA,4CACA,4CACA,4CACA,4CACA,4CACA,4CACA,6CAEA,iCACA,kCACA,kCACA,kCACA,kCACA,kCACA,kCACA,kCACA,kCACA,kCACA,kCACA,kCACA,kCACA,kCACA,kCACA,mCAEA,sCACA,yCACA,gDACA,mDACA,wCACA,2CACA,kDACA,qDACA,uCACA,0CACA,iDACA,oDACA,oCACA,8CACA,uCACA,iDACA,yCACA,4CACA,sCACA,yCACA,8CACA,iDACA,sCACA,iDACA,8CACA,8CACA,qCACA,2CACA,8CACA,oCAEA,qCACA,wCACA,+CACA,kDACA,uCACA,0CACA,iDACA,oDACA,sCACA,yCACA,gDACA,mDACA,mCACA,6CACA,sCACA,gDACA,wCACA,2CACA,qCACA,wCACA,6CACA,gDACA,qCACA,gDACA,6CACA,6CACA,oCACA,0CACA,6CACA,mCAEA,0DACA,4DACA,oDACA,iDACA,mDACA,yDAEA,2DACA,6DACA,qDACA,kDACA,oDACA,sDAEA,0DACA,4DACA,oDACA,iDACA,mDACA,qDAEA,2DACA,6DACA,qDACA,kDACA,oDACA,sDAEA,4DACA,8DACA,sDACA,mDACA,qDACA,uDAEA,2DACA,6DACA,qDACA,kDACA,oDACA,sDAEA,uDACA,yDACA,iDACA,8CACA,gDACA,qDAEA,wDACA,0DACA,kDACA,+CACA,iDACA,sDAEA,uDACA,yDACA,iDACA,8CACA,gDACA,qDAEA,wDACA,yDACA,kDACA,+CACA,iDACA,sDAEA,yDACA,0DACA,mDACA,gDACA,kDACA,uDAEA,wDACA,yDACA,kDACA,+CACA,iDACA,sDAEA,wDACA,0DACA,kDACA,+CACA,iDACA,mDAEA,yDACA,0DACA,mDACA,gDACA,kDACA,uDAEA,wDACA,yDACA,kDACA,+CACA,iDACA,sDC7QF,YACE,mBACA,0DACA,gEACA,8EACA,oFACA,8DACA,oEACA,kFACA,wFACA,4DACA,kEACA,gFACA,sFACA,sDACA,4DACA,0EACA,gFACA,0DACA,gEACA,sEACA,0DACA,gEACA,0EACA,gFACA,0EACA,gFACA,0EACA,wDACA,oEACA,0EACA,sDAGF,mCACE,YACE,kBACA,yDACA,+DACA,6EACA,mFACA,6DACA,mEACA,iFACA,uFACA,2DACA,iEACA,+EACA,qFACA,qDACA,2DACA,yEACA,+EACA,yDACA,+DACA,qEACA,yDACA,+DACA,yEACA,+EACA,yEACA,+EACA,yEACA,uDACA,mEACA,yEACA,sDAMJ,mBACE,mBACA,0DACA,gEACA,8EACA,oFACA,8DACA,oEACA,kFACA,wFACA,4DACA,kEACA,gFACA,sFACA,sDACA,4DACA,0EACA,gFACA,0DACA,gEACA,sEACA,0DACA,gEACA,0EACA,gFACA,0EACA,gFACA,0EACA,wDACA,oEACA,0EACA,sDAGF,kBACE,kBACA,yDACA,+DACA,6EACA,mFACA,6DACA,mEACA,iFACA,uFACA,2DACA,iEACA,+EACA,qFACA,qDACA,2DACA,yEACA,+EACA,yDACA,+DACA,qEACA,yDACA,+DACA,yEACA,+EACA,yEACA,+EACA,yEACA,uDACA,mEACA,yEACA,qDC1IF,sDACA,gDACA,4DACA,sDACA,0EACA,oEACA,gFACA,0EAEA,0DACA,oDACA,gEACA,0DACA,8EACA,wEACA,oFACA,8EAEA,wDACA,kDACA,8DACA,wDACA,4EACA,sEACA,kFACA,4EAEA,kDACA,4CACA,wDACA,kDACA,sEACA,gEACA,4EACA,sEAEA,4DACA,sDACA,kEACA,4DAEA,8GACA,gDACA,4DACA,sDAEA,qKACA,gEACA,4EACA,4FAEA,iFACA,gDAEA,4EACA,sEAEA,sEACA,gEAEA,sEACA,gEAEA,oDACA,8CAEA,gEACA,0DAEA,sEACA,gEAEA,kDACA,4CCzEA,eACE,mEACA,mEACA,8DACA,0DACA,8DACA,yDACA,oEACA,sEAEF,gBACE,oEACA,oEACA,+DACA,2DACA,+DACA,0DACA,qEACA,uEAEF,eACE,mEACA,mEACA,8DACA,0DACA,8DACA,yDACA,oEACA,sEAEF,gBACE,oEACA,oEACA,+DACA,2DACA,+DACA,0DACA,qEACA,uEAEF,iBACE,qEACA,qEACA,gEACA,4DACA,gEACA,2DACA,sEACA,wEAEF,gBACE,oEACA,oEACA,+DACA,2DACA,+DACA,0DACA,qEACA,uEAEF,YACE,gEACA,gEACA,2DACA,uDACA,2DACA,sDACA,iEACA,mEAEF,aACE,iEACA,iEACA,4DACA,wDACA,4DACA,uDACA,kEACA,oEAEF,YACE,gEACA,gEACA,2DACA,uDACA,2DACA,sDACA,iEACA,mEAEF,aACE,iEACA,iEACA,4DACA,wDACA,4DACA,uDACA,kEACA,oEAEF,cACE,kEACA,kEACA,6DACA,yDACA,6DACA,wDACA,mEACA,qEAEF,aACE,iEACA,iEACA,4DACA,wDACA,4DACA,uDACA,kEACA,oEAEF,aACE,iEACA,iEACA,4DACA,wDACA,4DACA,uDACA,kEACA,oEAEF,cACE,kEACA,kEACA,6DACA,yDACA,6DACA,wDACA,mEACA,qEAEF,aACE,iEACA,iEACA,4DACA,wDACA,4DACA,uDACA,kEACA,oEC/II,iBACE,oCAEF,sBACE,yBAIF,2BACE,oCAEF,qCACE,yBAJF,2BACE,oCAEF,qCACE,yBAJF,2BACE,oCAEF,qCACE,yBAJF,2BACE,oCAEF,qCACE,yBAJF,2BACE,oCAEF,qCACE,yBAJF,0BACE,oCAEF,oCACE,yBAJF,0BACE,oCAEF,oCACE,yBAJF,0BACE,oCAEF,oCACE,yBAJF,0BACE,oCAEF,oCACE,yBAZF,KACE,oCAEF,UACE,yBAIF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,cACE,oCAEF,wBACE,yBAJF,cACE,oCAEF,wBACE,yBAJF,cACE,oCAEF,wBACE,yBAJF,cACE,oCAEF,wBACE,yBAJF,cACE,oCAEF,wBACE,yBAJF,cACE,oCAEF,wBACE,yBAJF,cACE,oCAEF,wBACE,yBAJF,cACE,oCAEF,wBACE,yBAZF,MACE,oCAEF,WACE,yBAIF,gBACE,oCAEF,0BACE,yBAJF,gBACE,oCAEF,0BACE,yBAJF,gBACE,oCAEF,0BACE,yBAJF,gBACE,oCAEF,0BACE,yBAJF,gBACE,oCAEF,0BACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAZF,QACE,oCAEF,aACE,yBAIF,kBACE,oCAEF,4BACE,yBAJF,kBACE,oCAEF,4BACE,yBAJF,kBACE,oCAEF,4BACE,yBAJF,kBACE,oCAEF,4BACE,yBAJF,kBACE,oCAEF,4BACE,yBAJF,iBACE,oCAEF,2BACE,yBAJF,iBACE,oCAEF,2BACE,yBAJF,iBACE,oCAEF,2BACE,yBAJF,iBACE,oCAEF,2BACE,yBAJF,iBACE,oCAEF,2BACE,yBAJF,iBACE,oCAEF,2BACE,yBAJF,iBACE,oCAEF,2BACE,yBAJF,iBACE,iCAEF,2BACE,sBAZF,aACE,oCAEF,kBACE,yBAIF,uBACE,oCAEF,iCACE,yBAJF,uBACE,oCAEF,iCACE,yBAJF,uBACE,oCAEF,iCACE,yBAJF,uBACE,oCAEF,iCACE,yBAJF,uBACE,oCAEF,iCACE,yBAJF,sBACE,oCAEF,gCACE,yBAJF,sBACE,oCAEF,gCACE,yBAJF,sBACE,oCAEF,gCACE,yBAJF,sBACE,oCAEF,gCACE,yBAJF,sBACE,oCAEF,gCACE,yBAJF,sBACE,oCAEF,gCACE,yBAJF,sBACE,oCAEF,gCACE,yBAJF,sBACE,oCAEF,gCACE,yBAZF,QACE,oCAEF,aACE,yBAIF,kBACE,oCAEF,4BACE,yBAJF,kBACE,oCAEF,4BACE,yBAJF,kBACE,oCAEF,4BACE,yBAJF,kBACE,oCAEF,4BACE,yBAJF,kBACE,oCAEF,4BACE,yBAJF,iBACE,oCAEF,2BACE,yBAJF,iBACE,oCAEF,2BACE,yBAJF,iBACE,oCAEF,2BACE,yBAJF,iBACE,oCAEF,2BACE,yBAJF,iBACE,oCAEF,2BACE,yBAJF,iBACE,oCAEF,2BACE,yBAJF,iBACE,oCAEF,2BACE,yBAJF,iBACE,oCAEF,2BACE,yBAZF,MACE,oCAEF,WACE,yBAIF,gBACE,oCAEF,0BACE,yBAJF,gBACE,oCAEF,0BACE,yBAJF,gBACE,oCAEF,0BACE,yBAJF,gBACE,oCAEF,0BACE,yBAJF,gBACE,oCAEF,0BACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAZF,YACE,oCAEF,iBACE,yBAIF,sBACE,oCAEF,gCACE,yBAJF,sBACE,oCAEF,gCACE,yBAJF,sBACE,oCAEF,gCACE,yBAJF,sBACE,oCAEF,gCACE,yBAJF,sBACE,oCAEF,gCACE,yBAJF,qBACE,oCAEF,+BACE,yBAJF,qBACE,oCAEF,+BACE,yBAJF,qBACE,oCAEF,+BACE,yBAJF,qBACE,oCAEF,+BACE,yBAJF,qBACE,oCAEF,+BACE,yBAJF,qBACE,oCAEF,+BACE,yBAJF,qBACE,oCAEF,+BACE,yBAJF,qBACE,oCAEF,+BACE,yBAZF,MACE,oCAEF,WACE,yBAIF,gBACE,oCAEF,0BACE,yBAJF,gBACE,oCAEF,0BACE,yBAJF,gBACE,oCAEF,0BACE,yBAJF,gBACE,oCAEF,0BACE,yBAJF,gBACE,oCAEF,0BACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAZF,MACE,oCAEF,WACE,yBAIF,gBACE,oCAEF,0BACE,yBAJF,gBACE,oCAEF,0BACE,yBAJF,gBACE,oCAEF,0BACE,yBAJF,gBACE,oCAEF,0BACE,yBAJF,gBACE,oCAEF,0BACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAZF,OACE,oCAEF,YACE,yBAIF,iBACE,oCAEF,2BACE,yBAJF,iBACE,oCAEF,2BACE,yBAJF,iBACE,oCAEF,2BACE,yBAJF,iBACE,oCAEF,2BACE,yBAJF,iBACE,oCAEF,2BACE,yBAJF,gBACE,oCAEF,0BACE,yBAJF,gBACE,oCAEF,0BACE,yBAJF,gBACE,oCAEF,0BACE,yBAJF,gBACE,oCAEF,0BACE,yBAJF,gBACE,oCAEF,0BACE,yBAJF,gBACE,oCAEF,0BACE,yBAJF,gBACE,oCAEF,0BACE,yBAJF,gBACE,oCAEF,0BACE,yBAZF,aACE,oCAEF,kBACE,yBAIF,uBACE,oCAEF,iCACE,yBAJF,uBACE,oCAEF,iCACE,yBAJF,uBACE,oCAEF,iCACE,yBAJF,uBACE,oCAEF,iCACE,yBAJF,uBACE,oCAEF,iCACE,yBAJF,sBACE,oCAEF,gCACE,yBAJF,sBACE,oCAEF,gCACE,yBAJF,sBACE,oCAEF,gCACE,yBAJF,sBACE,oCAEF,gCACE,yBAJF,sBACE,oCAEF,gCACE,yBAJF,sBACE,oCAEF,gCACE,yBAJF,sBACE,oCAEF,gCACE,yBAJF,sBACE,oCAEF,gCACE,yBAZF,MACE,oCAEF,WACE,yBAIF,gBACE,oCAEF,0BACE,yBAJF,gBACE,oCAEF,0BACE,yBAJF,gBACE,oCAEF,0BACE,yBAJF,gBACE,oCAEF,0BACE,yBAJF,gBACE,oCAEF,0BACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAZF,QACE,oCAEF,aACE,yBAIF,kBACE,oCAEF,4BACE,yBAJF,kBACE,oCAEF,4BACE,yBAJF,kBACE,oCAEF,4BACE,yBAJF,kBACE,oCAEF,4BACE,yBAJF,kBACE,oCAEF,4BACE,yBAJF,iBACE,oCAEF,2BACE,yBAJF,iBACE,oCAEF,2BACE,yBAJF,iBACE,oCAEF,2BACE,yBAJF,iBACE,oCAEF,2BACE,yBAJF,iBACE,oCAEF,2BACE,yBAJF,iBACE,iCAEF,2BACE,sBAJF,iBACE,oCAEF,2BACE,yBAJF,iBACE,oCAEF,2BACE,yBAZF,OACE,oCAEF,YACE,yBAIF,iBACE,oCAEF,2BACE,yBAJF,iBACE,oCAEF,2BACE,yBAJF,iBACE,oCAEF,2BACE,yBAJF,iBACE,oCAEF,2BACE,yBAJF,iBACE,oCAEF,2BACE,yBAJF,gBACE,oCAEF,0BACE,yBAJF,gBACE,oCAEF,0BACE,yBAJF,gBACE,oCAEF,0BACE,yBAJF,gBACE,oCAEF,0BACE,yBAJF,gBACE,oCAEF,0BACE,yBAJF,gBACE,oCAEF,0BACE,yBAJF,gBACE,oCAEF,0BACE,yBAJF,gBACE,oCAEF,0BACE,yBAZF,QACE,oCAEF,aACE,yBAIF,kBACE,oCAEF,4BACE,yBAJF,kBACE,oCAEF,4BACE,yBAJF,kBACE,oCAEF,4BACE,yBAJF,kBACE,oCAEF,4BACE,yBAJF,kBACE,oCAEF,4BACE,yBAJF,iBACE,oCAEF,2BACE,yBAJF,iBACE,oCAEF,2BACE,yBAJF,iBACE,oCAEF,2BACE,yBAJF,iBACE,oCAEF,2BACE,yBAJF,iBACE,oCAEF,2BACE,yBAJF,iBACE,oCAEF,2BACE,yBAJF,iBACE,oCAEF,2BACE,yBAJF,iBACE,oCAEF,2BACE,yBAZF,aACE,oCAEF,kBACE,yBAIF,uBACE,oCAEF,iCACE,yBAJF,uBACE,oCAEF,iCACE,yBAJF,uBACE,oCAEF,iCACE,yBAJF,uBACE,oCAEF,iCACE,yBAJF,uBACE,oCAEF,iCACE,yBAJF,sBACE,oCAEF,gCACE,yBAJF,sBACE,oCAEF,gCACE,yBAJF,sBACE,oCAEF,gCACE,yBAJF,sBACE,oCAEF,gCACE,yBAJF,sBACE,oCAEF,gCACE,yBAJF,sBACE,oCAEF,gCACE,yBAJF,sBACE,oCAEF,gCACE,yBAJF,sBACE,oCAEF,gCACE,yBAZF,OACE,oCAEF,YACE,yBAIF,iBACE,oCAEF,2BACE,yBAJF,iBACE,oCAEF,2BACE,yBAJF,iBACE,oCAEF,2BACE,yBAJF,iBACE,oCAEF,2BACE,yBAJF,iBACE,oCAEF,2BACE,yBAJF,gBACE,oCAEF,0BACE,yBAJF,gBACE,oCAEF,0BACE,yBAJF,gBACE,oCAEF,0BACE,yBAJF,gBACE,oCAEF,0BACE,yBAZF,WACE,oCAEF,gBACE,yBAIF,qBACE,oCAEF,+BACE,yBAJF,qBACE,oCAEF,+BACE,yBAJF,qBACE,oCAEF,+BACE,yBAJF,qBACE,oCAEF,+BACE,yBAJF,qBACE,oCAEF,+BACE,yBAJF,oBACE,oCAEF,8BACE,yBAJF,oBACE,oCAEF,8BACE,yBAJF,oBACE,oCAEF,8BACE,yBAJF,oBACE,oCAEF,8BACE,yBAZF,MACE,oCAEF,WACE,yBAIF,gBACE,oCAEF,0BACE,yBAJF,gBACE,oCAEF,0BACE,yBAJF,gBACE,iCAEF,0BACE,sBAJF,gBACE,oCAEF,0BACE,yBAJF,gBACE,oCAEF,0BACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAJF,eACE,oCAEF,yBACE,yBAQN,OACE,iCAEF,YACE,sBAJF,OACE,iCAEF,YACE,sBAJF,aACE,0CAEF,kBACE,+BC7BJ,4EAUA,KACE,iBACA,8BAUF,KACE,SAOF,KACE,cAQF,GACE,cACA,eAWF,GACE,uBACA,SACA,iBAQF,IACE,gCACA,cAUF,EACE,+BAQF,YACE,mBACA,0BACA,iCAOF,SAEE,mBAQF,cAGE,gCACA,cAOF,MACE,cAQF,QAEE,cACA,cACA,kBACA,wBAGF,IACE,eAGF,IACE,WAUF,IACE,kBAWF,sCAKE,oBACA,eACA,iBACA,SAQF,aAEE,iBAQF,cAEE,oBAOF,gDAIE,0BAOF,wHAIE,kBACA,UAOF,4GAIE,8BAOF,SACE,2BAUF,OACE,sBACA,cACA,cACA,eACA,UACA,mBAOF,SACE,wBAOF,SACE,cAQF,6BAEE,sBACA,UAOF,kFAEE,YAQF,cACE,6BACA,oBAOF,yCACE,wBAQF,6BACE,0BACA,aAUF,QACE,cAOF,QACE,kBAUF,SACE,aAOF,SACE,aC3VF,KACE,sBAGF,mBACE,mBAGF,KACE,gDACA,wCAGF,sCAKE,YCwBW,4GDrBb,QCda,QDcW,qBACrB,0CAIH,gDAEA,qBAGA,qeACE,2BAIF,sVACE,iGAKF,wDACE,iGAIF,mFACE,kGAMF,kBACE,uGAMF,WACE,yGAMF,kBACE,0GAKF,WACE,2BACA,iBACE,oEAKJ,SACE,WACA,gBACA,qDAIF,+FAGA,EACE,oBACA,OACE,WACA,iBAGF,QACE,YAGF,OACE,eAEF,QACE,eAEF,SACE,eAEF,QACE,eAKJ,cACE,eACA,kBACA,WAIF,0CAEE,eACA,YAMA,eACE,qBACA,kBACA,kBACA,mBACA,YAEA,iBACE,6CACA,qBACA,iBACA,eACA,iBAGF,oCACE,iEAGF,wBACE,qCAGF,kDAEE,6CAGF,0BACE,eACA,qCAGF,iBACE,eAKJ,2BACE,qBACA,WAIJ,8CACE,YACE,WAEA,wCAEE,UAGF,qBACE,UACA,gBACA,oBAMN,YACE,qBACA,eACA,0CAEA,mNAIE,cACA,WACA,eAGF,mBACE,YACA,0CACA,mBACA,qBACA,6GACA,mBACA,kBACA,eACA,oBACA,mCACA,WAGF,+BACE,aAGF,uBACE,qCAKJ,oBACE,kBACA,gBACA,aAEA,8BACE,kBACA,MACA,OACA,QACA,SACA,WAEA,kCACE,UACA,kBACA,SACA,SACA,eACA,gBACA,+BACA,2BAMN,qBACE,kBAGF,QACE,0BAOF,+BACA,0CAME,8CADF,4CAC8B,yBAI5B,8CADF,sBAC+B,yBAI7B,2CADF,oBAC6B,yBAI3B,mEADF,kBAEI,yBAKF,2CADF,oBAC4B,yBAI1B,4CADF,0BACkC,yBAIhC,4CADF,qBACkC,0BAIhC,2CADF,eAC4B,0BAI1B,mEADF,gBAEI,0BAKF,8CADF,eAC8B,0BAI5B,2CADF,uBAC6B,0BAI3B,8CADF,yBAC+B,0BAM7B,8CADF,sBAC8B,mBAI9B,aACE,gBACA,iBACA,0DACA,eACE,wCAEF,eACE,kCAEF,gEAEE,gBACA,gBACA,aACA,mBACA,8BACA,iBAGJ,gBACE,eACA,qBAIF,YACE,YAGF,MACE,WACA,cACA,yBACA,iBAGE,iBACE,mBAEF,sCACE,iCAIJ,yBACE,sCAEA,+BACE,iCAIJ,YACE,6CAIA,sDACE,kBAKN,GACE,4DAGF,MACE,iBACA,mBACA,gBACA,sBACA,gBAIF,8CAEE,uBACE,WACA,yBACA,iBACA,cACA,kBAEA,uCACE,YAEF,oDAEE,SACA,mBAEF,0BACE,gBAEF,6BACE,cACA,WAEA,gCACE,cACA,mBAEA,2CACE,YAIN,6BACE,cACA,WACA,kBACA,gBACA,mBAEA,gCACE,qBACA,mBAGJ,0BACE,cACA,iBAEF,0BACE,cACA,kBACA,gBAEF,0BACE,mBACA,eAGF,6BACE,SACA,4DAMN,iBACE,kBACA,sBACA,SACA,gBAEA,uEACE,kBACA,MACA,OACA,WACA,YAQJ,8BAGA,4BACA,8BACA,wCAGA,4BACA,8BAGA,uEACA,0BACA,+DACA,kFACA,iCAeI,KACE,oBAIA,MACE,wBADF,MACE,0BADF,MACE,2BADF,MACE,yBAKD,MACE,yBACA,0BAKH,MACE,wBACA,2BApBJ,KACE,yBAIA,MACE,6BADF,MACE,+BADF,MACE,gCADF,MACE,8BAKD,MACE,8BACA,+BAKH,MACE,6BACA,gCApBJ,KACE,wBAIA,MACE,4BADF,MACE,8BADF,MACE,+BADF,MACE,6BAKD,MACE,6BACA,8BAKH,MACE,4BACA,+BApBJ,KACE,yBAIA,MACE,6BADF,MACE,+BADF,MACE,gCADF,MACE,8BAKD,MACE,8BACA,+BAKH,MACE,6BACA,gCApBJ,KACE,uBAIA,MACE,2BADF,MACE,6BADF,MACE,8BADF,MACE,4BAKD,MACE,4BACA,6BAKH,MACE,2BACA,8BApBJ,KACE,yBAIA,MACE,6BADF,MACE,+BADF,MACE,gCADF,MACE,8BAKD,MACE,8BACA,+BAKH,MACE,6BACA,gCApBJ,KACE,uBAIA,MACE,2BADF,MACE,6BADF,MACE,8BADF,MACE,4BAKD,MACE,4BACA,6BAKH,MACE,2BACA,8BApBJ,QACE,uBAIA,SACE,2BADF,SACE,6BADF,SACE,8BADF,SACE,4BAKD,SACE,4BACA,6BAKH,SACE,2BACA,8BApBJ,KACE,qBAIA,MACE,yBADF,MACE,2BADF,MACE,4BADF,MACE,0BAKD,MACE,0BACA,2BAKH,MACE,yBACA,4BApBJ,KACE,0BAIA,MACE,8BADF,MACE,gCADF,MACE,iCADF,MACE,+BAKD,MACE,+BACA,gCAKH,MACE,8BACA,iCApBJ,KACE,yBAIA,MACE,6BADF,MACE,+BADF,MACE,gCADF,MACE,8BAKD,MACE,8BACA,+BAKH,MACE,6BACA,gCApBJ,KACE,0BAIA,MACE,8BADF,MACE,gCADF,MACE,iCADF,MACE,+BAKD,MACE,+BACA,gCAKH,MACE,8BACA,iCApBJ,KACE,wBAIA,MACE,4BADF,MACE,8BADF,MACE,+BADF,MACE,6BAKD,MACE,6BACA,8BAKH,MACE,4BACA,+BApBJ,KACE,0BAIA,MACE,8BADF,MACE,gCADF,MACE,iCADF,MACE,+BAKD,MACE,+BACA,gCAKH,MACE,8BACA,iCApBJ,KACE,wBAIA,MACE,4BADF,MACE,8BADF,MACE,+BADF,MACE,6BAKD,MACE,6BACA,8BAKH,MACE,4BACA,+BApBJ,QACE,wBAIA,SACE,4BADF,SACE,8BADF,SACE,+BADF,SACE,6BAKD,SACE,6BACA,8BAKH,SACE,4BACA,+BExiBR,YACE,eACA,qBACA,sBACA,qDACA,kBACA,gBACA,kBAEA,6BACE,+BACA,mBACA,kBACA,SACA,4DAGA,oCACE,gBACA,kBACA,kBAGA,mIAEE,kBACA,WACA,YACA,gBACA,UACA,qBACA,sBAGF,6CACE,eACA,iBACA,WACA,kDACA,kBAIF,2CACE,eAGF,sCACE,SAGF,uDACE,kBACA,SACA,WAMJ,wCACE,mBAGF,oCACE,6CACA,qCAEA,uDACE,qCAKN,8BACE,cACA,gBACA,kCAGE,iDACE,iCAMJ,2CACE,+BACA,4DACA,kBAGF,yCACE,kBAGF,gDACE,kBAON,mBACE,YACA,kCAGF,yBACE,SACA,YChHF,MACE,qBAGF,WACE,eACA,cACA,iBACA,kBACA,eACA,gCACA,2BACA,6CACA,YACA,sBAEA,eACE,gBACA,gBACA,qCACA,6CACA,kBAEF,qBACE,eAGF,sCACE,qCAIJ,mBACE,qCAKF,oBACE,qBACA,WACA,gBACA,gCACA,2BACA,4BAIF,4BACE,iDAGF,wBACE,iBAEA,gCACE,iBACA,SAIJ,0CACE,6CAGF,oBACE,sDAGF,iBACE,qBACA,WACA,iBCxEF,6FAEE,kCACA,6BCDF,WACE,cACA,iBACA,UAEF,2CACE,WACE,WAGJ,2CACE,WACE,WAIJ,SACE,eAsBF,KACE,mBAGF,KACE,aACA,sCACA,oBAGA,iCACA,iCACA,iCACA,iCACA,iCACA,iCACA,iCACA,iCACA,iCACA,mCACA,mCACA,mCAEA,oCACA,oCACA,oCACA,oCACA,oCACA,oCACA,oCACA,oCACA,qCACA,sCACA,sCAGA,2CACE,iCACA,iCACA,iCACA,iCACA,iCACA,iCACA,iCACA,iCACA,iCACA,mCACA,mCACA,mCAEA,oCACA,oCACA,oCACA,oCACA,oCACA,oCACA,oCACA,oCACA,qCACA,sCACA,uCAIF,2CACE,iCACA,iCACA,iCACA,iCACA,iCACA,iCACA,iCACA,iCACA,iCACA,mCACA,mCACA,mCAEA,oCACA,oCACA,oCACA,oCACA,oCACA,oCACA,oCACA,oCACA,qCACA,sCACA,uCAIF,4CACE,kCACA,kCACA,kCACA,kCACA,kCACA,kCACA,kCACA,kCACA,kCACA,oCACA,oCACA,oCAEA,qCACA,qCACA,qCACA,qCACA,qCACA,qCACA,qCACA,qCACA,sCACA,uCACA,wCAMJ,WACA,mCACA,kCACA,iCACA,mCACA,iCCxKA,MACE,sBACA,6BAGF,IAeE,qCAEA,yDAEA,WACA,mCACA,wCApBA,iBACE,YAEA,8BACE,uCACA,YAGF,8BACE,kBACA,mBAYJ,MACE,qCAGF,2JAIE,cACA,eACA,mCACA,wCAGF,iBACE,kBACA,YAGF,2CACE,sBACE,cAKJ,qBACE,WACA,kBACA,UACA,mCACA,cAEA,uBACE,mCACA,wCAKJ,gBACE,kBACA,qCACA,qBACA,iBACA,UAEA,uBACE,SACA,2BAGF,8CAZF,gBAaI,SACA,2BAEA,2CACE,UACA,eAGF,qBACE,WAEF,sBACE,YACA,WAIJ,sBACE,YACA,UAGF,+OAIE,WACA,kBAMJ,eACE,qBACA,eACA,eAKF,8BACE,qBACA,SAEA,iCACE,gCACA,WACA,UAEA,mCACE,gCACA,eACA,qCACA,cACA,eACA,eAEA,0CACE,iDAGF,sDACE,iDAGF,6NACE,gBACA,iBACA,kBACA,qBAEA,q0CAEE,eACA,oBAMR,mCACE,WAKJ,SACE,YAGF,iBACE,SACA,YAEA,oCACE,YACA,iBACA,YACA,kBACA,qCAEA,uTAEE,YACA,gBAIJ,uBACE,MACA,OAEA,yBACE,0CACA,qBAGF,gCACE,qCAOR,cACE,kBACA,mCACA,YAEA,kBACE,eACA,QAIJ,2CACE,8BACE,uCAEF,qEACE,4BACA,iCAEF,cACE,6BCjOJ,EACE,qBAGF,KAeE,YNoBW,4GMnBX,mBACA,MNmBW,kCMjCX,sCAHF,KAII,gBAGF,0CAPF,KAQI,kBAGF,2CAXF,KAYI,gBAQJ,kBACC,gBACA,gBAID,kDACA,aNYc,OMZgB,2CAC9B,aNYc,QMZgB,qDAC9B,aNYc,QMZgB,qDAC9B,aNYc,QMZgB,4CAC9B,aNYc,QMZgB,oDAC9B,aNYc,QMZgB,kDAG9B,qBACA,uBACA,oBACA,uBACA,sBAKI,0CAHJ,WAIM,kBADF,0CAHJ,WAIM,oBADF,0CAHJ,WAIM,oBADF,0CAHJ,WAIM,oBADF,0CAHJ,WAIM,oBADF,0CAHJ,WAIM,mBADF,0CAHJ,WAIM,oBADF,0CAHJ,WAIM,oBADF,0CAHJ,WAIM,oBADF,0CAHJ,WAIM,oBADF,0CAHJ,WAIM,mBADF,0CAHJ,WAIM,oBADF,0CAHJ,WAIM,oBADF,0CAHJ,WAIM,oBADF,0CAHJ,WAIM,oBADF,0CAHJ,WAIM,mBADF,0CAHJ,WAIM,oBADF,0CAHJ,WAIM,oBADF,0CAHJ,WAIM,oBADF,0CAHJ,WAIM,oBADF,0CAHJ,WAIM,mBAMJ,0CAVF,WAWI,kBC1DJ,kBAUE,yEATA,4BACE,mBACA,oCAGF,2BACE,mBCRJ,YACE,2BACA,aACA,sBACA,mBAEA,6CAGF,MACE,gBACA,kBAEA,6CACA,2BACA,mBAGA,kBACE,eACA,gBAIF,qCACE,kBAEA,yEACE,eACA,gBAGF,mHACE,eAGF,+EACE,gBACA,gBAGF,4EACE,kBACA,SACA,OACA,QAIJ,YACE,aAGF,aACE,aAGF,YACE,aAIF,iBAaE,aAXE,0GACE,YACA,gBACA,iBAEA,sHACE,YAON,6BACE,cAEA,iCACE,0BACA,eACA,WAIJ,+BACE,aACA,sBACA,OACA,kBAEA,6CACE,YAOJ,iCACE,UAGF,iCACE,UACA,oBAIJ,kBACE,kBAGA,sBACE,cACA,0BACA,kBACA,OACA,QACA,MACA,SACA,WAGF,8BACE,kCACA,kBACA,SACA,OACA,eACA,aAGF,6BACE,kBACA,OACA,QACA,MACA,SACA,eAIJ,oBACE,aACA,0BAEA,sBACE,SAGF,gCACE,cACA,iBACA,kBAEA,kCACE,iBAGF,0CACE,eAKN,mBAKE,yDACA,kBACA,yBANA,8BACE,0BAOF,qBACE,kBACA,qBAGF,kGACE,kCACA,0BAEA,wGACE,iEAKN,mBACE,aACA,kBACA,6CACA,WACA,gBACA,OACA,SACA,YACA,UACA,aAEA,+BACE,eACA,cC9MN,iBACE,cACA,eACA,cAEA,8CALF,iBAMI,eACA,WAEF,qEATF,iBAUI,QACA,UACA,eAEF,2CAdF,iBAeI,QACA,SACA,eAIJ,OAEE,kBACA,SACA,WACA,gBACA,kBACA,eACA,YACA,gBAIA,kBACA,mBAEA,eACA,gBACA,iBAEA,6CACA,qDAEA,aACA,mBACA,8BACA,eAEA,qBACE,0CACA,gBACA,mBACA,iBAGF,eACE,mBAGF,8CAvCF,OAwCI,WACA,iBC9DJ,MACE,eACA,qBA2CA,kBACA,gBACA,kBACA,WACA,6CACA,cACA,mBA/CA,uBACE,+BAEA,8BACE,0CAGF,iIAGE,0BAGF,oCACE,iCAGF,yEAEE,+BAGF,6GAGE,qCAGF,kCACE,gDAIJ,uBACE,aAEA,4BACE,YAYJ,WACE,eACA,qBACA,qBACA,kBACA,iBACA,UACA,SAEA,4BACE,kBACA,QACA,sBAGF,gBACE,YACA,iBAGF,aA4BE,6CACA,aACA,sBACA,WACA,YACA,gBACA,eACA,eACA,uBACA,gBACA,sDArCA,oBACE,+BAGF,0DAGE,kCAGF,mBACE,iEAGF,mBACE,uDAGF,oBACE,iEAGF,uCAEE,aAgBJ,kDAME,qCACA,eACA,+BANA,0EACE,+BASN,iBACE,kBACA,SACA,WACA,6CACA,uBACA,0BAGF,2BACE,YAEA,6BACE,cAGF,4CACE,cACA,kBACA,SACA,sBAON,8CACE,MACE,aAEA,WACE,YAEA,aACE,gBCjKR,kBACE,cACA,kBAEA,6CACA,qDAEA,gEACA,uDACA,2DACA,2DAEA,gBACA,UAEA,gBACA,mBAEA,eACA,iBACA,gBACA,oBAEA,kBACA,gBACA,gBACA,OACA,MACA,oBAEA,aACA,mBAEA,kBACA,aAGF,UACE,kBACA,UACA,WACA,WACA,0BACA,qDACA,WACA,uBACA,kBC9CF,mDACE,mBACA,2BACA,oBACA,yBACA,oBACA,yBACA,sBAEA,yBACA,YACA,uCACA,gCACA,iCACA,+BACA,gBACA,qBACA,oBACA,mBACA,eACA,0CACA,mBACA,UACA,iBACA,yCAIF,qHACE,kBAGF,yDACE,6FAGF,4DACE,8FAGF,iIACE,kBACA,oCAGF,+DACE,6BAGF,kEACE,8BAKF,gDACE,qCACA,6CAGF,6CACE,iDACA,yDAGF,sDACE,iDACA,yDAIF,sDACE,+BACA,kCACA,6CAGF,oDAEE,kCACA,+BAKF,qSAIE,0EACA,qFACA,oBACA,gBACA,eAKF,wEAEE,kCACA,6HAGF,kEAEE,qCACA,qGAGF,+DAEE,iDACA,6HAGF,wEACE,kCACA,kFAGF,4DACE,kCACA,kFAKF,6CACE,uDAGF,wEAEE,kCACA,8GAGF,kEAEE,qCACA,qGAGF,+DAEE,iDACA,6HAGF,wEACE,kCACA,kFACA,6CAGF,4DACE,kCACA,kFAKA,qcAKE,gDACA,mBAwBJ,cA2DE,MZ9OqB,KY+OrB,OZ/OqB,KYgPrB,+CACA,uDACA,cZjPuB,KYkPvB,UACA,aACA,sBACA,mBACA,kBACA,gBACA,UAEA,gCACA,eACA,sBAzEA,oBAEE,yHAGF,oBACE,iBZ5L+B,kCYgMjC,qBACE,gBAGF,wBAKE,WACA,YACA,UANA,oCACE,aAYJ,wBACE,mDAMA,8BACA,+BALA,oCACE,0CAUJ,0BAME,kBACA,WACA,aAPA,+BACE,WACA,UA8BJ,gBACE,MZjQoB,iCYkQpB,iBACA,cACA,qBACA,kBAKJ,oBACE,YAIF,kBAwGE,eACA,WACA,YACA,iBACA,gBACA,YA3GE,4BACE,mBACA,eACA,qBAKJ,mEAEE,mBAEA,yEACE,iBACA,WACA,QACA,2BACA,YACA,UAEA,YAEA,+EACE,qBACA,sBAKN,kCACE,mBAEA,qCACE,gBACA,cACA,UACA,WAEA,wCACE,sBAKN,mCACE,mBAEA,sCACE,SACA,YACA,aACA,8BAEA,yCACE,kBAKN,0BAOE,UACA,YANE,qCACE,UAOJ,6BACE,aACA,MACA,SACA,UAEA,gCACE,OACA,qBACA,SACA,YACA,gBAEA,kCACE,cACA,gBACA,kBACA,WACA,YACA,+BACA,gBACA,MZ3Wc,iCY4Wd,iBACA,UAEA,oCACE,oBAcV,qBACE,OACA,QACA,kBACA,kBACA,YACA,SACA,kBAEA,wBACE,mBAGF,oCACE,UAIJ,gCACE,kBACA,MACA,OACA,WACA,MZpZmB,KYqZnB,OZrZmB,KYsZnB,iBZ1ZyB,8BY2ZzB,cZtZqB,KYuZrB,mBAOJ,WAEE,mCACA,eACA,eAEA,aACE,iBAKJ,WAEE,mCACA,eAEA,aACE,iBAKJ,WACE,cAGF,mDACE,sBCzcF,UACE,aACA,UACA,YAGF,kBACE,eACA,qBAEA,6CACA,SACA,aACA,gBACA,gBACA,UACA,kBACA,OACA,MACA,aACA,qBACA,iBAEA,qBAyBE,WACA,wCACA,eACA,WbjCmB,KakCnB,mBACA,WACA,gBA9BA,6BACE,aACA,WAEF,iDACE,eACA,kCACA,cACA,iBACA,kBAEF,gCACE,QACA,OACA,YAGF,yBACE,eACA,oBACA,WACA,kBACA,WAUJ,sEACE,oGAKF,iDACE,iCAKJ,yDACE,QACA,OACA,YACA,eAGF,kBACE,eC3EF,OACE,mCACA,4BACA,sBACA,6BAGA,YACA,aACA,UACA,eACA,UACA,yCACA,wBASA,uGANA,aACE,aACA,sBAMF,8CAxBF,OAyBI,WAIF,iBACE,0BAGF,qBACE,6BACA,2CACA,cAEF,sBACE,+BACA,gBAEF,qBACE,wEACA,6BACA,iBACA,cAGF,oBACE,eAIF,4DACE,SAKJ,oBACE,gBACA,eACA,4BACA,6BACA,2BClEF,aACE,eACA,qBAEA,yDACA,2DACA,0DACA,sBAIF,oBAKE,aACA,eACA,0CACA,gBACA,aACA,4DATA,0BACE,UAUF,sBACE,WACA,iBACA,qBACA,kBACA,kBAIJ,2BACE,YACA,kBACA,6GACA,eACA,eACA,mCAGF,mCACE,YAGF,4CACE,iCAGF,4BACE,YAGF,kBACE,aACA,4DACA,sBACA,eACA,gBAKF,oBACE,YACA,gBAEA,uBACE,oEAEA,cACA,4DAGF,8BACE,qEACA,cC5EJ,MACE,kBACA,uBACA,eAEA,6CACA,iCAEA,oBACA,mBACA,QAEA,SACA,YAEA,4BACA,6BAEA,2BACA,gBAEA,kBAEA,mBACA,iBACA,mBAEA,YACE,aACA,6CACA,qCAIJ,eACE,+BACA,yCACA,iBACA,mBAGF,UACE,SACA,WACA,YACA,iBACA,mBAGF,sBACE,gCAIF,aACE,kBACA,YACA,WACA,UACA,aACA,uBACA,qBACA,eAGF,mBACE,+CAKF,OACE,aACA,QACA,eAEA,YACA,gBACA,iBAEA,YAGA,aACA,mBAEA,aACE,oDACA,iDAGF,mBACE,+DAEA,yBACE,YAIJ,qDACE,gBACA,SACA,wCACA,qBACA,eAIA,YAEA,UACA,SACA,UACA,YACA,kBACA,gBACA,gBAGA,2DACE,SACA,gBAKJ,6BACE,aACA,gBAKJ,eACE,iBACA,UACA,wBAGF,eACE,kBACA,UACA,wBAEF,mBACE,gBACA,4BClJF,eAOE,cACA,eACA,kBACA,uBACA,mCATE,kCACE,WAUJ,sBACE,gBAIJ,qBACE,eACA,MACA,QACA,SACA,OACA,gDACA,aACA,oBAGF,qBACE,eACA,aACA,wCACA,iBACA,SACA,OACA,WACA,kBACA,eACA,YACA,aACA,mCCxCF,aACE,kDAUF,MACE,gBACA,6CCbF,cACE,6CAIF,gjBAcE,aACA,wCACA,WACA,UnBtBiC,KmBuBjC,YAGF,yDACE,kDACA,+CAEF,6HACE,aAEF,uGACE,yBACA,gCAGF,aACE,2CAEA,kBACA,WAIA,yCACE,sBAEA,eACA,iBAEA,6CAEA,YACA,kBACA,+DACA,4BACA,6BAEA,qFACE,2CACA,iBAGF,0IACE,iDACA,wDACA,4DAIF,iGACE,yBAEF,ySAKE,sBACA,QAGF,kKACE,iDAkBF,sJAEE,gCAIJ,gCACE,iBAGF,mBACE,6CACA,iBACA,eACA,kBACA,UACA,SACA,YACA,0BACA,WACE,0DAQJ,8BACE,6CACA,eACA,eACA,eAGF,gCACE,6CACA,eACA,YACA,eACA,eAGF,qBACE,kBACA,UACA,SACA,iBACA,aACA,kBAGF,qBACE,kBACA,WACA,SACA,iBAGF,yDACE,kBAEF,yDACE,mBAEF,2BACE,UAOA,2DACE,cAEA,gDAEA,wDACA,kBAEA,uGACE,oCACA,cACA,iBAIF,mHACE,yBAEF,+VAGE,SACA,UACA,iBACA,cACA,gDAGF,8KACE,iDACA,wDAQJ,qDACE,uCAEF,iGACE,uCAEF,6GACE,gCAEF,yBACE,gCAEF,oCACE,gCAEF,2BACE,gCAOJ,mBACE,kBAEA,kBACA,MACA,iBACA,aACA,kBAGF,iBACE,eACA,+BACA,kBAGJ,uBACE,cACA,2CAFF,uBAGI,mBA6BJ,SACE,WACA,YACA,+BAEA,8BACE,4BACA,8BACA,mBACA,kBACA,YACA,gBACA,sBAKJ,WACE,kBACA,qBACA,qBACA,yBACA,mBAGA,kBACA,MACA,WAME,4EACA,6BACE,YACA,WACA,gBAMN,uBACE,kBACA,oBAEA,8BACE,cACA,kBACA,WACA,wBACA,yBACA,cAGF,qCACE,cAGF,2CACE,oBC1VJ,gDAEE,kBACA,UACA,oBAGF,0DAEE,kBACA,kBACA,eACA,qBACA,YACA,iBACA,eACA,qBACA,iBAGF,iDAEE,WACA,kBACA,OACA,MACA,WACA,WACA,YACA,UACA,qBAIF,iOAME,kBAGF,6EAEE,wDAGF,sCACE,mBAIF,iCACE,+BAGF,mHAGE,6CAGF,yEAEE,6CAGF,gCACE,sBAIF,yCACE,qBAIF,sCACE,sEAIF,mDACE,gDAGF,kDACE,YACA,gDAIF,0FAEE,+BACA,4CAGF,2BACE,qCAGF,gDACE,4CAGF,yCACE,gDACA,4CC1GF,sDAEE,kBACA,UACA,oBAMA,iCACE,kBACA,kBACA,eACA,qBACA,YACA,iBACA,eACA,iBAIF,+FAEE,WACA,kBACA,MACA,OACA,WACA,YACA,UACA,wDACA,kBACA,eACA,eAGF,uDACE,SACA,mBAGF,+DACE,YACA,gDAIF,oDACE,mBACA,SACA,kBACA,sCACA,iCAKF,gDACE,SACA,UACA,WACA,YACA,mCACA,oCACA,mDACA,oDACA,wBACA,2BACA,2BAGF,6CACE,sDACA,uDAMF,sDACE,UACA,WACA,WACA,YACA,gBACA,iBACA,mDACA,mBACA,wBACA,2BACA,2BAIF,+DACE,sDACA,+BAOF,iDACE,kBAGF,mGAEE,WACA,OACA,kBAEA,mGACA,UAIF,gEACE,QACA,SACA,+BACA,SACA,SACA,yBACA,2BAGF,+DACE,YACA,WACA,+BACA,wDACA,QACA,UAKA,0DACE,MACA,SACA,UACA,YACA,mCACA,oCACA,sDACA,uDACA,yBACA,2BAGF,yDACE,MACA,WACA,YACA,6CACA,6CACA,UAKJ,8DACE,kBACA,sDACA,iCAGF,sEACE,kBACA,6CACA,yCAIF,yEACE,+BACA,+BAGF,wEACE,2BACA,gDAGF,mEACE,+BAGF,kEACE,gDACA,4CCrMJ,QACE,qBACA,oBACA,oBACA,iBACA,gBACA,kBACA,mFACA,qFAGF,kBAEE,0CACA,iBAGF,cACE,eAGF,mCACE,UACA,QACA,SAIA,kDACE,6CACA,yCAIA,iHACE,kBACA,uFACA,qBACA,sBAQN,qBACE,WACA,qBACA,kBACA,yBACA,2BACA,mBACA,iBACA,yCAGA,qDAEA,mBACA,kBACA,+BACA,sBACA,cAGA,uDACE,WACA,kBACA,qBACA,sBACA,uBACA,kBAEA,oBACA,mBAEA,oFAIF,2BAEE,uBACA,sBAOJ,kLAGI,qBAGJ,iEACE,iEAIF,0IAEE,iEAGF,yDACE,iCAGF,yHAEE,iCAIF,8CACE,eACA,WCvHF,uBACE,UACA,wCAGF,OACE,UACA,6CACA,WACA,YACA,qDACA,kBACA,YAGF,gBAoCE,kBA0BA,uBACE,kBACA,QACA,MACA,SACA,cACA,UACA,uCAKF,6BACE,QACA,SACA,gBACA,kBACA,MACA,WAIJ,gBACE,qCAIA,+BACE,qCAEF,gCACE,oCAIJ,+CACE,qCACA,eACA,iBAGF,kBACE,qCAGF,4FAGE,qCA2CA,wBACE,YACA,WACA,gBACA,YAKJ,6BACE,qCACA,2CACE,wCAEF,kCACE,6CAEF,gDACE,kBC1LJ,YAEE,aACA,uCACA,SAGA,+BACE,gBAGF,uCAEA,+DACE,YACA,iBAGF,iBACE,eAGF,6BAME,kBACA,MACA,QACA,OACA,SAEA,eACA,WACA,SACA,UACA,UACA,eACA,wBAhBA,yDACE,aCzBN,aACE,kBAGF,2CAGE,eAGF,kBACE,kBACA,+BACA,YACA,aACA,WACA,cACA,UAEA,wBACE,aAIJ,yBACE,kBACA,SACA,OACA,YACA,SACA,QACA,kBACA,6CACA,gBAEA,yBACA,yBAEA,gCACE,cACA,WACA,kBACA,kCACA,YACA,wBAGF,gCACE,4BAEA,uCACE,qCACA,iBACA,eACA,eAsBN,kBACE,wBAGF,iDAnBE,WAEA,YAqBF,wCAjBE,YACA,YACA,WACA,kBACA,uCACA,0BAcA,wBACA,6CACA,yBACA,kBAIF,6EACE,sEAQF,oCAzCE,WAEA,YA2CF,oCACE,SAGF,oCA3CE,YACA,YACA,WACA,kBACA,uCACA,0BAwCA,gBAIF,iCACE,uBACA,oBAGF,yEACE,sEAKF,6BACE,WAEA,yBAEA,2BACA,mBAEA,oBAEF,yEAEE,uCAEF,sEAEE,4CAEF,6BA9EE,YACA,YACA,WACA,kBACA,uCACA,0BA8EF,kEACE,sECvJF,mBACE,gBAEA,yBACE,eAGF,sBACE,UAGF,qBACE,qBACA,gBACA,oCACA,kBACA,YACA,iBACA,0DAEA,2BACE,wCACA,kBAEF,4BACE,kCACA,gBACA,kBACA,kDC3BN,SACE,uBACA,0BACA,wBACA,4BACA,kDAEA,eACA,2BACA,OACA,MACA,SACA,4BACA,aACA,UACA,YACA,gBACA,sBACA,2BACA,4BACA,iBAEA,iDACA,6CAIA,uBACE,QACA,2BACA,UACA,2BAGF,sBACE,SASF,iBACE,iCAGF,0KAGE,oFAGF,gDAEA,YACE,gBACA,aACA,qBAEF,cAIE,cACA,iCAWA,aACA,kCACA,mCACA,gBACA,mBACA,gBACA,oBAEA,0GACE,iDAEA,gHAGE,oFAIJ,oHACE,iBAIF,qJAEE,oBACA,sBAEA,kBAIJ,kBACE,6CAGF,oBACE,eACA,oBACA,UACA,mCACA,gBACA,uCAIF,oBACE,kBACA,wEACA,8CAEA,sBAKE,YACA,UALA,4BACE,+BAOJ,gCACE,gBACA,kBACA,MACA,QACA,SACA,OACA,WAGF,iFACE,cAGF,4BACE,YACA,WAGF,qDAEE,mCACA,gDAGF,0BACE,gBACA,gBAGF,2BACE,oBACA,gBAMN,aAKE,YACA,eACA,MACA,OACA,YAPA,2BACE,QAUJ,uBAME,OACA,wBACA,eANA,qCACE,QACA,UAQJ,8CAEI,uBACE,4BAEA,qCACE,2BAGJ,WACE,iCAEF,oBACE,yDAKN,2BACE,UAGF,iBACE,eACA,MACA,OACA,QACA,UACA,aACA,gCACA,YACA,aAMA,0DACE,YACA,gBAEF,wEACE,YAEF,oEACE,YCrPJ,UACE,kBACA,WACA,cACA,WAEA,kBACA,sBACA,gBACA,yDAEA,uBACE,kBACA,MACA,OACA,SACA,6CACA,4BAGF,yBACE,6CAEA,gCACE,WACA,kBACA,yBACA,MACA,OACA,SACA,uBAEA,8EAIF,+BACE,WACA,kBACA,yBACA,MACA,OACA,SACA,uBAEA,+EACA,sBAKN,yBACE,GACE,UACA,WAEF,IACE,UACA,WAEF,KACE,UACA,YAIJ,+BACE,GACE,WACA,WAEF,IACE,UACA,UAEF,KACE,UACA,WAmCJ,mBACE,qBACA,kBACA,WACA,YAEA,yBACE,WACA,YAGF,uBACE,WACA,YAGF,0BAEE,0DACA,kDAIJ,oCACE,qCAGF,4BACE,6BAGF,eACE,kBACA,WACA,YACA,UACA,yCAGF,iCAEE,qBAGF,+BAEE,qBAGF,qCAEE,qBAGF,mCAEE,qBAgBF,oCAEE,0JACA,kJAGF,mCAEE,yJACA,iJAGF,sCAEE,4JACA,oJAGF,qCAEE,2JACA,mJAGF,6LAME,UACA,uFACA,+EAGF,sCACE,uCACA,qCACA,uCACA,qCACA,uCACA,qCACA,uCACA,sCAGF,8BACE,+BACA,6BACA,+BACA,6BACA,+BACA,6BACA,+BACA,8BAGF,oCACE,eACA,cACA,cACA,cACA,cACA,gBAGF,4BACE,eACA,cACA,cACA,cACA,cACA,gBAGF,mCACE,eACA,cACA,cACA,cACA,eAGF,2BACE,eACA,cACA,cACA,cACA,eAGF,sCACE,eACA,cACA,cACA,cACA,eAGF,8BACE,eACA,cACA,cACA,cACA,eAGF,qCACE,eACA,cACA,cACA,cACA,gBAGF,6BACE,eACA,cACA,cACA,cACA,gBAOF,WACE,kBACA,MACA,SACA,UACA,YACA,gBACA,qBAGF,mBACE,YACA,WAGF,gBACE,qBACA,kBACA,UACA,YACA,gBACA,qBAEA,wBACE,WACA,YACA,iBACA,mBACA,qBACA,6CACA,kBACA,uBACA,eACA,kBACA,MACA,QACA,SAGF,6BACE,OACA,4CACA,iCACA,yBAEF,8BACE,WACA,2CACA,kCACA,0BAMJ,qCAEE,8EACA,sEAGF,sCAEE,+EACA,uEAGF,6BACE,sCACA,oCACA,qCAGF,qBACE,8BACA,4BACA,6BAGF,8BACE,uCACA,mCACA,sCAGF,sBACE,+BACA,2BACA,8BAGF,2BAEE,sGACA,8FAGF,4BACE,eACA,cAGF,oBACE,eACA,cChaF,QACE,kBACA,aACA,WAGA,mBACE,YACA,WACA,kBACA,MACA,OACA,QACA,SAEA,6BACE,eACA,qBACA,YAGF,iCACE,eACA,qBACA,UACA,YAEA,iDACE,qCAEA,wDACE,kDAOR,gBACE,6CACA,SACA,aACA,eACA,qBAEA,mBACE,eACA,qBACA,UACA,kBACA,MACA,OACA,UACA,WACA,eACA,gBAEA,uBACE,YACA,WACA,sBACA,2BAGF,4BACE,WACA,kBACA,QACA,SACA,UACA,UAEA,8BACE,0BAIJ,0BACE,UAKN,oBACE,eACA,qBACA,kBACA,kBACA,OACA,QACA,SACA,SAEA,oCACE,qBACA,kBACA,YACA,WACA,cAGF,wCACE,kBACA,MACA,OACA,eACA,kDAEA,gCACA,kBACA,eAMA,WACA,YALA,+CACE,6CCjHR,UACE,yBAsCA,gBACA,kBACA,WACA,8BACA,kBACA,4BACA,wBA1CA,0BACE,MACA,OAEA,+CAKE,kBACA,OACA,QACA,YACA,UARA,+DACE,YAUJ,yCACE,WACA,YACA,kCACA,kBACA,MACA,OAEA,4CACE,eACA,gBACA,iBAGF,2CACE,eAaN,yBACE,kBACA,sCACA,uCACA,kBACA,MACA,OAEA,6BACE,WAIJ,sBACE,eACA,qBAEA,kBACA,kBACA,OACA,QACA,SACA,SAEA,sCAKE,qBACA,kBACA,eACA,WACA,UACA,gBACA,qCAEA,gCACA,kBAbA,6CACE,kDAiBN,uGAEE,oBC5FJ,oBACE,YACA,aACA,eACA,aACA,kBACA,6BAGF,yBACE,mBACA,yBAEA,qCACE,mBACA,YACA,WACE,wFAIJ,kDACE,mBAEF,iDACE,mBACA,qEACA,WACE,2CAMN,YACE,kBACA,eACA,kBACA,uDACA,kCACA,wGACA,WACA,YACA,UACA,mBACA,mGAIF,oBACE,kBACA,mBAGF,iBAwBE,kBACA,kBACA,cAzBA,iDAEE,WACA,cACA,kBACA,WACA,YACA,kBACA,6CAEF,yBACE,mBACA,yBAEF,wBACE,kBACA,WACE,wCAGF,WAQJ,mBAME,QACA,SACA,gCAEA,cACA,6BAVA,gIAEE,gBAWJ,0CACE,gCACE,YACA,cCpGJ,OAiBE,iBACA,kBAjBA,eACE,WACA,cACA,kBACA,oBACA,WACA,YACA,MACA,OACA,yBACA,sBACA,qCACA,qEACA,WAOJ,2BACE,GACE,UACA,mBAEF,IACE,UACA,qBAEF,KACE,UACA,sBCvBJ,sBACE,aACA,sBACA,gBACA,UACA,6CAGF,qBACE,aACA,8BACA,YACA,cAEA,wCACE,aAIA,2CAKE,mBACA,kBACA,SANA,iDACE,mBAQJ,4CACE,aAIJ,sCACE,UACA,sBAGF,iFAEE,+BAGF,wCACE,WAGF,yCACE,WAGF,kEAEE,oBACA,mBAGF,0EAEE,4CAIJ,wBACE,YACA,eACA,eACA,+BACA,YAKF,yBACE,YAIA,kBACA,kEACA,gBAEA,oCACE,cACA,iBACA,iBACA,qCAGF,oCACE,cACA,iBACA,iBACA,gBAIA,+CACE,iBAON,+BACE,cAGF,kBACE,YACA,eACA,cAEA,wBACE,mBAGF,qBACE,iBACA,kBAGF,qBACE,YAGF,uBACE,qBACA,6CAGF,kCACE,wCAYA,UAVA,2CACE,kCAsBN,iGAGE,kBAEA,sHACE,kBACA,QACA,WACA,YACA,WACA,uDACA,UAIJ,kFAEE,UAGF,0CACE,SAGF,2DACE,uDAGF,uBACE,+BACA,YACA,iBACA,cACA,WACA,kBACA,WACA,cACA,eACA,cAEA,kBACA,UAEA,6BACE,iEAGF,6BACE,yCAGF,oCACE,6CACA,qCAEA,0CACE,qDACA,kCAIJ,iGAEE,qCACA,oBAMJ,mBACE,YACA,cACA,mBACA,aACA,8BAGF,wEAIE,kCACA,eAGF,kBACE,gCCzPF,sBACE,aACA,sBACA,gBACA,UACA,wDAGF,cACE,qCAIF,4BACE,WACA,YAEA,kCACA,gBAGF,2BACE,aACA,eACA,gBACA,0CACA,gBAEA,iBACA,8BAEA,4CACE,YACA,oCACA,kBACA,eACA,cAIJ,2BACE,oBAGF,kCACE,YACA,oBAGF,kEAEE,aACA,eAGF,6EAGE,eAGF,kFAEE,YACA,sBACA,SACA,kBACA,wCACA,qDAEA,8FACE,uDAIJ,kCACE,aACA,kBAOF,0BACE,iBAIA,gBAGF,uBACE,eACA,iBAGF,4DAEE,aACA,WACA,0CACA,2CACA,iBACA,sBACA,kBAEA,6CAGF,8BACE,6BACA,4BAGF,8BACE,aACA,yBACA,0BAIF,2BACE,cACA,eAIF,kBACE,qDACA,kBACA,YACA,aACA,iBACA,kBACA,8BACA,iBAGF,oCAEE,kBACA,OACA,QACA,MACA,SAGF,oBACE,kBAGF,iBACE,kBACA,wCACA,iBACA,kBACA,WACA,YACA,kBACA,eACA,eAGF,+CAEE,iEAGF,iBACE,yCAGF,qBASE,UARA,sCACE,0BAGF,wCACE,0BAMJ,mBACE,yBAEA,wBACE,mCACA,eACA,qBAIJ,uBACE,YAGF,2BACE,YACA,iCAGF,sBACE,YACA,iCAKF,mBACE,cACA,iBACA,aACA,8BAGF,kBACE,gCAGF,kBACE,kCAGF,oCAEE,eAIF,2CACE,sBACE,WACA,gBAGF,sBACE,mBAGF,4BACE,eAGF,2BAEE,sBACA,kBACA,kBAGF,2BACE,aAGF,0BAKE,kBAGF,uBACE,aACA,YACA,gBAGF,4DAEE,YAEA,2CACA,4CACA,uCACA,6CAMF,8BACE,0BACA,6BAGF,8BACE,cACA,4BACA,yBAGF,kBACE","file":"materialize.min.css"}
\ No newline at end of file
diff --git a/dist/js/materialize.cjs.js b/dist/js/materialize.cjs.js
new file mode 100644
index 0000000000..23afafd5f8
--- /dev/null
+++ b/dist/js/materialize.cjs.js
@@ -0,0 +1,8004 @@
+/*!
+* Materialize v2.2.1 (https://materializeweb.com)
+* Copyright 2014-2025 Materialize
+* MIT License (https://raw.githubusercontent.com/materializecss/materialize/master/LICENSE)
+*/
+'use strict';
+
+/**
+ * Class with utilitary functions for global usage.
+ */
+class Utils {
+    /** Specifies wether tab is pressed or not. */
+    static tabPressed = false;
+    /** Specifies wether there is a key pressed. */
+    static keyDown = false;
+    /**
+     * Key maps.
+     */
+    static keys = {
+        TAB: ['Tab'],
+        ENTER: ['Enter'],
+        ESC: ['Escape', 'Esc'],
+        BACKSPACE: ['Backspace'],
+        ARROW_UP: ['ArrowUp', 'Up'],
+        ARROW_DOWN: ['ArrowDown', 'Down'],
+        ARROW_LEFT: ['ArrowLeft', 'Left'],
+        ARROW_RIGHT: ['ArrowRight', 'Right'],
+        DELETE: ['Delete', 'Del']
+    };
+    /**
+     * Detects when a key is pressed.
+     * @param e Event instance.
+     */
+    static docHandleKeydown(e) {
+        Utils.keyDown = true;
+        if ([...Utils.keys.TAB, ...Utils.keys.ARROW_DOWN, ...Utils.keys.ARROW_UP].includes(e.key)) {
+            Utils.tabPressed = true;
+        }
+    }
+    /**
+     * Detects when a key is released.
+     * @param e Event instance.
+     */
+    static docHandleKeyup(e) {
+        Utils.keyDown = false;
+        if ([...Utils.keys.TAB, ...Utils.keys.ARROW_DOWN, ...Utils.keys.ARROW_UP].includes(e.key)) {
+            Utils.tabPressed = false;
+        }
+    }
+    /**
+     * Detects when document is focused.
+     * @param e Event instance.
+     */
+    /* eslint-disabled as of required event type condition check */
+    /* eslint-disable-next-line */
+    static docHandleFocus(e) {
+        if (Utils.keyDown) {
+            document.body.classList.add('keyboard-focused');
+        }
+    }
+    /**
+     * Detects when document is not focused.
+     * @param e Event instance.
+     */
+    /* eslint-disabled as of required event type condition check */
+    /* eslint-disable-next-line */
+    static docHandleBlur(e) {
+        document.body.classList.remove('keyboard-focused');
+    }
+    /**
+     * Generates a unique string identifier.
+     */
+    static guid() {
+        const s4 = () => {
+            return Math.floor((1 + Math.random()) * 0x10000)
+                .toString(16)
+                .substring(1);
+        };
+        return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
+    }
+    /**
+     * Checks for exceeded edges
+     * @param container Container element.
+     * @param bounding Bounding rect.
+     * @param offset Element offset.
+     */
+    static checkWithinContainer(container, bounding, offset) {
+        const edges = {
+            top: false,
+            right: false,
+            bottom: false,
+            left: false
+        };
+        const containerRect = container.getBoundingClientRect();
+        // If body element is smaller than viewport, use viewport height instead.
+        const containerBottom = container === document.body
+            ? Math.max(containerRect.bottom, window.innerHeight)
+            : containerRect.bottom;
+        const scrollLeft = container.scrollLeft;
+        const scrollTop = container.scrollTop;
+        const scrolledX = bounding.left - scrollLeft;
+        const scrolledY = bounding.top - scrollTop;
+        // Check for container and viewport for each edge
+        if (scrolledX < containerRect.left + offset || scrolledX < offset) {
+            edges.left = true;
+        }
+        if (scrolledX + bounding.width > containerRect.right - offset ||
+            scrolledX + bounding.width > window.innerWidth - offset) {
+            edges.right = true;
+        }
+        if (scrolledY < containerRect.top + offset || scrolledY < offset) {
+            edges.top = true;
+        }
+        if (scrolledY + bounding.height > containerBottom - offset ||
+            scrolledY + bounding.height > window.innerHeight - offset) {
+            edges.bottom = true;
+        }
+        return edges;
+    }
+    /**
+     * Checks if element can be aligned in multiple directions.
+     * @param el Element to be inspected.
+     * @param container Container element.
+     * @param bounding Bounding rect.
+     * @param offset Element offset.
+     */
+    static checkPossibleAlignments(el, container, bounding, offset) {
+        const canAlign = {
+            top: true,
+            right: true,
+            bottom: true,
+            left: true,
+            spaceOnTop: null,
+            spaceOnRight: null,
+            spaceOnBottom: null,
+            spaceOnLeft: null
+        };
+        const containerAllowsOverflow = getComputedStyle(container).overflow === 'visible';
+        const containerRect = container.getBoundingClientRect();
+        const containerHeight = Math.min(containerRect.height, window.innerHeight);
+        const containerWidth = Math.min(containerRect.width, window.innerWidth);
+        const elOffsetRect = el.getBoundingClientRect();
+        const scrollLeft = container.scrollLeft;
+        const scrollTop = container.scrollTop;
+        const scrolledX = bounding.left - scrollLeft;
+        const scrolledYTopEdge = bounding.top - scrollTop;
+        const scrolledYBottomEdge = bounding.top + elOffsetRect.height - scrollTop;
+        // Check for container and viewport for left
+        canAlign.spaceOnRight = !containerAllowsOverflow
+            ? containerWidth - (scrolledX + bounding.width)
+            : window.innerWidth - (elOffsetRect.left + bounding.width);
+        if (canAlign.spaceOnRight < 0) {
+            canAlign.left = false;
+        }
+        // Check for container and viewport for Right
+        canAlign.spaceOnLeft = !containerAllowsOverflow
+            ? scrolledX - bounding.width + elOffsetRect.width
+            : elOffsetRect.right - bounding.width;
+        if (canAlign.spaceOnLeft < 0) {
+            canAlign.right = false;
+        }
+        // Check for container and viewport for Top
+        canAlign.spaceOnBottom = !containerAllowsOverflow
+            ? containerHeight - (scrolledYTopEdge + bounding.height + offset)
+            : window.innerHeight - (elOffsetRect.top + bounding.height + offset);
+        if (canAlign.spaceOnBottom < 0) {
+            canAlign.top = false;
+        }
+        // Check for container and viewport for Bottom
+        canAlign.spaceOnTop = !containerAllowsOverflow
+            ? scrolledYBottomEdge - (bounding.height - offset)
+            : elOffsetRect.bottom - (bounding.height + offset);
+        if (canAlign.spaceOnTop < 0) {
+            canAlign.bottom = false;
+        }
+        return canAlign;
+    }
+    /**
+     * Retrieves target element id from trigger.
+     * @param trigger Trigger element.
+     */
+    static getIdFromTrigger(trigger) {
+        let id = trigger.dataset.target;
+        if (!id) {
+            id = trigger.getAttribute('href');
+            return id ? id.slice(1) : '';
+        }
+        return id;
+    }
+    /**
+     * Retrieves document scroll postion from top.
+     */
+    static getDocumentScrollTop() {
+        return window.scrollY || document.documentElement.scrollTop || document.body.scrollTop || 0;
+    }
+    /**
+     * Retrieves document scroll postion from left.
+     */
+    static getDocumentScrollLeft() {
+        return window.scrollX || document.documentElement.scrollLeft || document.body.scrollLeft || 0;
+    }
+    /**
+     * Fires the given function after a certain ammount of time.
+     * @param func Function to be fired.
+     * @param wait Wait time.
+     * @param options Additional options.
+     */
+    static throttle(func, wait, options = {}) {
+        let context, args, result, timeout = null, previous = 0;
+        const later = () => {
+            previous = options.leading === false ? 0 : new Date().getTime();
+            timeout = null;
+            result = func.apply(context, args);
+            context = args = null;
+        };
+        return (...args) => {
+            const now = new Date().getTime();
+            if (!previous && options.leading === false)
+                previous = now;
+            const remaining = wait - (now - previous);
+            context = this;
+            if (remaining <= 0) {
+                clearTimeout(timeout);
+                timeout = null;
+                previous = now;
+                result = func.apply(context, args);
+                context = args = null;
+            }
+            else if (!timeout && options.trailing !== false) {
+                timeout = setTimeout(later, remaining);
+            }
+            return result;
+        };
+    }
+    /**
+     * Renders confirm/close buttons with callback function
+     */
+    static createConfirmationContainer(container, confirmText, cancelText, onConfirm, onCancel) {
+        const confirmationButtonsContainer = document.createElement('div');
+        confirmationButtonsContainer.classList.add('confirmation-btns');
+        container.append(confirmationButtonsContainer);
+        this.createButton(confirmationButtonsContainer, cancelText, ['btn-cancel'], true, onCancel);
+        this.createButton(confirmationButtonsContainer, confirmText, ['btn-confirm'], true, onConfirm);
+    }
+    /**
+     * Renders a button with optional callback function
+     */
+    static createButton(container, text, className = [], visibility = true, callback = null) {
+        className = className.concat(['btn', 'waves-effect', 'text']);
+        const button = document.createElement('button');
+        button.className = className.join(' ');
+        button.style.visibility = visibility ? 'visible' : 'hidden';
+        button.type = 'button';
+        button.tabIndex = !!visibility ? 0 : -1;
+        button.innerText = text;
+        button.addEventListener('click', callback);
+        button.addEventListener('keypress', (e) => {
+            if (Utils.keys.ENTER.includes(e.key))
+                callback(e);
+        });
+        container.append(button);
+    }
+}
+
+/**
+ * Base class implementation for Materialize components.
+ */
+class Component {
+    /**
+     * The DOM element the plugin was initialized with.
+     */
+    el;
+    /**
+     * The options the instance was initialized with.
+     */
+    options;
+    /**
+     * Constructs component instance and set everything up.
+     */
+    constructor(el, options, classDef) {
+        // Display error if el is not a valid HTML Element
+        if (!(el instanceof HTMLElement)) {
+            console.error(Error(el + ' is not an HTML Element'));
+        }
+        // If exists, destroy and reinitialize in child
+        const ins = classDef.getInstance(el);
+        if (!!ins) {
+            ins.destroy();
+        }
+        this.el = el;
+    }
+    /**
+     * Initializes component instances.
+     * @param els HTML elements.
+     * @param options Component options.
+     * @param classDef Class definition.
+     */
+    static init(els, options, classDef) {
+        let instances = null;
+        if (els instanceof Element) {
+            instances = new classDef(els, options);
+        }
+        else if (!!els && els.length) {
+            instances = [];
+            for (let i = 0; i < els.length; i++) {
+                instances.push(new classDef(els[i], options));
+            }
+        }
+        return instances;
+    }
+    /**
+     * @returns default options for component instance.
+     */
+    static get defaults() {
+        return {};
+    }
+    /**
+     * Retrieves component instance for the given element.
+     * @param el Associated HTML Element.
+     */
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    static getInstance(el) {
+        throw new Error('This method must be implemented.');
+    }
+    /**
+     * Destroy plugin instance and teardown.
+     */
+    destroy() {
+        throw new Error('This method must be implemented.');
+    }
+}
+
+const _defaults$m = {
+    alignment: 'left',
+    autoFocus: true,
+    constrainWidth: true,
+    container: null,
+    coverTrigger: true,
+    closeOnClick: true,
+    hover: false,
+    inDuration: 150,
+    outDuration: 250,
+    onOpenStart: null,
+    onOpenEnd: null,
+    onCloseStart: null,
+    onCloseEnd: null,
+    onItemClick: null
+};
+class Dropdown extends Component {
+    static _dropdowns = [];
+    /** ID of the dropdown element. */
+    id;
+    /** The DOM element of the dropdown. */
+    dropdownEl;
+    /** If the dropdown is open. */
+    isOpen;
+    /** If the dropdown content is scrollable. */
+    isScrollable;
+    isTouchMoving;
+    /** The index of the item focused. */
+    focusedIndex;
+    filterQuery;
+    filterTimeout;
+    constructor(el, options) {
+        super(el, options, Dropdown);
+        this.el['M_Dropdown'] = this;
+        Dropdown._dropdowns.push(this);
+        this.id = Utils.getIdFromTrigger(el);
+        this.dropdownEl = document.getElementById(this.id);
+        this.options = {
+            ...Dropdown.defaults,
+            ...options
+        };
+        this.isOpen = false;
+        this.isScrollable = false;
+        this.isTouchMoving = false;
+        this.focusedIndex = -1;
+        this.filterQuery = [];
+        this.el.ariaExpanded = 'false';
+        // Move dropdown-content after dropdown-trigger
+        this._moveDropdown();
+        this._makeDropdownFocusable();
+        this._setupEventHandlers();
+    }
+    static get defaults() {
+        return _defaults$m;
+    }
+    /**
+     * Initializes instances of Dropdown.
+     * @param els HTML elements.
+     * @param options Component options.
+     */
+    static init(els, options = {}) {
+        return super.init(els, options, Dropdown);
+    }
+    static getInstance(el) {
+        return el['M_Dropdown'];
+    }
+    destroy() {
+        this._resetDropdownStyles();
+        this._removeEventHandlers();
+        Dropdown._dropdowns.splice(Dropdown._dropdowns.indexOf(this), 1);
+        this.el['M_Dropdown'] = undefined;
+    }
+    _setupEventHandlers() {
+        // Trigger keydown handler
+        this.el.addEventListener('keydown', this._handleTriggerKeydown);
+        // Item click handler
+        this.dropdownEl?.addEventListener('click', this._handleDropdownClick);
+        // Hover event handlers
+        if (this.options.hover) {
+            this.el.addEventListener('mouseenter', this._handleMouseEnter);
+            this.el.addEventListener('mouseleave', this._handleMouseLeave);
+            this.dropdownEl.addEventListener('mouseleave', this._handleMouseLeave);
+            // Click event handlers
+        }
+        else {
+            this.el.addEventListener('click', this._handleClick);
+        }
+    }
+    _removeEventHandlers() {
+        this.el.removeEventListener('keydown', this._handleTriggerKeydown);
+        this.dropdownEl.removeEventListener('click', this._handleDropdownClick);
+        if (this.options.hover) {
+            this.el.removeEventListener('mouseenter', this._handleMouseEnter);
+            this.el.removeEventListener('mouseleave', this._handleMouseLeave);
+            this.dropdownEl.removeEventListener('mouseleave', this._handleMouseLeave);
+        }
+        else {
+            this.el.removeEventListener('click', this._handleClick);
+        }
+    }
+    _setupTemporaryEventHandlers() {
+        document.body.addEventListener('click', this._handleDocumentClick);
+        document.body.addEventListener('touchmove', this._handleDocumentTouchmove);
+        this.dropdownEl.addEventListener('keydown', this._handleDropdownKeydown);
+        window.addEventListener('resize', this._handleWindowResize);
+    }
+    _removeTemporaryEventHandlers() {
+        document.body.removeEventListener('click', this._handleDocumentClick);
+        document.body.removeEventListener('touchmove', this._handleDocumentTouchmove);
+        this.dropdownEl.removeEventListener('keydown', this._handleDropdownKeydown);
+        window.removeEventListener('resize', this._handleWindowResize);
+    }
+    _handleClick = (e) => {
+        e.preventDefault();
+        this._moveDropdown(e.target.closest('li'));
+        if (this.isOpen) {
+            this.close();
+        }
+        else {
+            this.open();
+        }
+    };
+    _handleMouseEnter = (e) => {
+        this._moveDropdown(e.target.closest('li'));
+        this.open();
+    };
+    _handleMouseLeave = (e) => {
+        const toEl = e.relatedTarget;
+        const leaveToDropdownContent = !!toEl.closest('.dropdown-content');
+        let leaveToActiveDropdownTrigger = false;
+        const closestTrigger = toEl.closest('.dropdown-trigger');
+        if (closestTrigger && !!closestTrigger['M_Dropdown'] && closestTrigger['M_Dropdown'].isOpen) {
+            leaveToActiveDropdownTrigger = true;
+        }
+        // Close hover dropdown if mouse did not leave to either active dropdown-trigger or dropdown-content
+        if (!leaveToActiveDropdownTrigger && !leaveToDropdownContent) {
+            this.close();
+        }
+    };
+    _handleDocumentClick = (e) => {
+        const target = e.target;
+        if (this.options.closeOnClick && target.closest('.dropdown-content') && !this.isTouchMoving) {
+            // isTouchMoving to check if scrolling on mobile.
+            this.close();
+        }
+        else if (!target.closest('.dropdown-content')) {
+            // Do this one frame later so that if the element clicked also triggers _handleClick
+            // For example, if a label for a select was clicked, that we don't close/open the dropdown
+            setTimeout(() => {
+                if (this.isOpen) {
+                    this.close();
+                }
+            }, 0);
+        }
+        this.isTouchMoving = false;
+    };
+    _handleTriggerKeydown = (e) => {
+        // ARROW DOWN OR ENTER WHEN SELECT IS CLOSED - open Dropdown
+        const arrowDownOrEnter = Utils.keys.ARROW_DOWN.includes(e.key) || Utils.keys.ENTER.includes(e.key);
+        if (arrowDownOrEnter && !this.isOpen) {
+            e.preventDefault();
+            this.open();
+        }
+    };
+    _handleDocumentTouchmove = (e) => {
+        const target = e.target;
+        if (target.closest('.dropdown-content')) {
+            this.isTouchMoving = true;
+        }
+    };
+    _handleDropdownClick = (e) => {
+        // onItemClick callback
+        if (typeof this.options.onItemClick === 'function') {
+            const itemEl = e.target.closest('li');
+            this.options.onItemClick.call(this, itemEl);
+        }
+    };
+    _handleDropdownKeydown = (e) => {
+        const arrowUpOrDown = Utils.keys.ARROW_DOWN.includes(e.key) || Utils.keys.ARROW_UP.includes(e.key);
+        if (Utils.keys.TAB.includes(e.key)) {
+            e.preventDefault();
+            this.close();
+        }
+        // Navigate down dropdown list
+        else if (arrowUpOrDown && this.isOpen) {
+            e.preventDefault();
+            const direction = Utils.keys.ARROW_DOWN.includes(e.key) ? 1 : -1;
+            let newFocusedIndex = this.focusedIndex;
+            let hasFoundNewIndex = false;
+            do {
+                newFocusedIndex = newFocusedIndex + direction;
+                if (!!this.dropdownEl.children[newFocusedIndex] &&
+                    this.dropdownEl.children[newFocusedIndex].tabIndex !== -1) {
+                    hasFoundNewIndex = true;
+                    break;
+                }
+            } while (newFocusedIndex < this.dropdownEl.children.length && newFocusedIndex >= 0);
+            if (hasFoundNewIndex) {
+                // Remove active class from old element
+                if (this.focusedIndex >= 0)
+                    this.dropdownEl.children[this.focusedIndex].classList.remove('active');
+                this.focusedIndex = newFocusedIndex;
+                this._focusFocusedItem();
+            }
+        }
+        // ENTER selects choice on focused item
+        else if (Utils.keys.ENTER.includes(e.key) && this.isOpen) {
+            // Search for <a> and <button>
+            const focusedElement = this.dropdownEl.children[this.focusedIndex];
+            const activatableElement = focusedElement.querySelector('a, button');
+            // Click a or button tag if exists, otherwise click li tag
+            if (!!activatableElement) {
+                activatableElement.click();
+            }
+            else if (!!focusedElement) {
+                if (focusedElement instanceof HTMLElement) {
+                    focusedElement.click();
+                }
+            }
+        }
+        // Close dropdown on ESC
+        else if (Utils.keys.ESC.includes(e.key) && this.isOpen) {
+            e.preventDefault();
+            this.close();
+        }
+        // CASE WHEN USER TYPE LTTERS
+        const keyText = e.key.toLowerCase();
+        const isLetter = /[a-zA-Z0-9-_]/.test(keyText);
+        const specialKeys = [
+            ...Utils.keys.ARROW_DOWN,
+            ...Utils.keys.ARROW_UP,
+            ...Utils.keys.ENTER,
+            ...Utils.keys.ESC,
+            ...Utils.keys.TAB
+        ];
+        if (isLetter && !specialKeys.includes(e.key)) {
+            this.filterQuery.push(keyText);
+            const string = this.filterQuery.join('');
+            const newOptionEl = Array.from(this.dropdownEl.querySelectorAll('li')).find((el) => el.innerText.toLowerCase().indexOf(string) === 0);
+            if (newOptionEl) {
+                this.focusedIndex = [...newOptionEl.parentNode.children].indexOf(newOptionEl);
+                this._focusFocusedItem();
+            }
+        }
+        this.filterTimeout = setTimeout(this._resetFilterQuery, 1000);
+    };
+    _handleWindowResize = () => {
+        // Only re-place the dropdown if it's still visible
+        // Accounts for elements hiding via media queries
+        if (this.el.offsetParent) {
+            this.recalculateDimensions();
+        }
+    };
+    _resetFilterQuery = () => {
+        this.filterQuery = [];
+    };
+    _resetDropdownStyles() {
+        this.dropdownEl.style.display = '';
+        this._resetDropdownPositioningStyles();
+        this.dropdownEl.style.transform = '';
+        this.dropdownEl.style.opacity = '';
+    }
+    _resetDropdownPositioningStyles() {
+        this.dropdownEl.style.width = '';
+        this.dropdownEl.style.height = '';
+        this.dropdownEl.style.left = '';
+        this.dropdownEl.style.top = '';
+        this.dropdownEl.style.transformOrigin = '';
+    }
+    // Move dropdown after container or trigger
+    _moveDropdown(containerEl = null) {
+        if (!!this.options.container) {
+            this.options.container.append(this.dropdownEl);
+        }
+        else if (containerEl) {
+            if (!containerEl.contains(this.dropdownEl)) {
+                containerEl.append(this.dropdownEl);
+            }
+        }
+        else {
+            this.el.after(this.dropdownEl);
+        }
+    }
+    _makeDropdownFocusable() {
+        if (!this.dropdownEl)
+            return;
+        this.dropdownEl.popover = '';
+        // Needed for arrow key navigation
+        this.dropdownEl.tabIndex = 0;
+        // Only set tabindex if it hasn't been set by user
+        Array.from(this.dropdownEl.children).forEach((el) => {
+            if (!el.getAttribute('tabindex'))
+                el.setAttribute('tabindex', '0');
+        });
+    }
+    _focusFocusedItem() {
+        if (this.focusedIndex >= 0 &&
+            this.focusedIndex < this.dropdownEl.children.length &&
+            this.options.autoFocus) {
+            this.dropdownEl.children[this.focusedIndex].focus({
+                preventScroll: true
+            });
+            this.dropdownEl.children[this.focusedIndex].scrollIntoView({
+                behavior: 'smooth',
+                block: 'nearest',
+                inline: 'nearest'
+            });
+        }
+    }
+    _getDropdownPosition(closestOverflowParent) {
+        // const offsetParentBRect = this.el.offsetParent.getBoundingClientRect();
+        const triggerBRect = this.el.getBoundingClientRect();
+        const dropdownBRect = this.dropdownEl.getBoundingClientRect();
+        let idealHeight = dropdownBRect.height;
+        let idealWidth = dropdownBRect.width;
+        let idealXPos = triggerBRect.left - dropdownBRect.left;
+        let idealYPos = triggerBRect.top - dropdownBRect.top;
+        const dropdownBounds = {
+            left: idealXPos,
+            top: idealYPos,
+            height: idealHeight,
+            width: idealWidth
+        };
+        const alignments = Utils.checkPossibleAlignments(this.el, closestOverflowParent, dropdownBounds, this.options.coverTrigger ? 0 : triggerBRect.height);
+        let verticalAlignment = 'top';
+        let horizontalAlignment = this.options.alignment;
+        idealYPos += this.options.coverTrigger ? 0 : triggerBRect.height;
+        // Reset isScrollable
+        this.isScrollable = false;
+        if (!alignments.top) {
+            if (alignments.bottom) {
+                verticalAlignment = 'bottom';
+                if (!this.options.coverTrigger) {
+                    idealYPos -= triggerBRect.height;
+                }
+            }
+            else {
+                this.isScrollable = true;
+                // Determine which side has most space and cutoff at correct height
+                idealHeight -= 20; // Add padding when cutoff
+                if (alignments.spaceOnTop > alignments.spaceOnBottom) {
+                    verticalAlignment = 'bottom';
+                    idealHeight += alignments.spaceOnTop;
+                    idealYPos -= this.options.coverTrigger
+                        ? alignments.spaceOnTop - 20
+                        : alignments.spaceOnTop - 20 + triggerBRect.height;
+                }
+                else {
+                    idealHeight += alignments.spaceOnBottom;
+                }
+            }
+        }
+        // If preferred horizontal alignment is possible
+        if (!alignments[horizontalAlignment]) {
+            const oppositeAlignment = horizontalAlignment === 'left' ? 'right' : 'left';
+            if (alignments[oppositeAlignment]) {
+                horizontalAlignment = oppositeAlignment;
+            }
+            else {
+                // Determine which side has most space and cutoff at correct height
+                if (alignments.spaceOnLeft > alignments.spaceOnRight) {
+                    horizontalAlignment = 'right';
+                    idealWidth += alignments.spaceOnLeft;
+                    idealXPos -= alignments.spaceOnLeft;
+                }
+                else {
+                    horizontalAlignment = 'left';
+                    idealWidth += alignments.spaceOnRight;
+                }
+            }
+        }
+        if (verticalAlignment === 'bottom') {
+            idealYPos =
+                idealYPos - dropdownBRect.height + (this.options.coverTrigger ? triggerBRect.height : 0);
+        }
+        if (horizontalAlignment === 'right') {
+            idealXPos = idealXPos - dropdownBRect.width + triggerBRect.width;
+        }
+        return {
+            x: idealXPos,
+            y: idealYPos,
+            verticalAlignment: verticalAlignment,
+            horizontalAlignment: horizontalAlignment,
+            height: idealHeight,
+            width: idealWidth
+        };
+    }
+    _animateIn() {
+        const duration = this.options.inDuration;
+        this.dropdownEl.style.transition = 'none';
+        // from
+        this.dropdownEl.style.opacity = '0';
+        this.dropdownEl.style.transform = 'scale(0.3, 0.3)';
+        setTimeout(() => {
+            // easeOutQuad (opacity) & easeOutQuint
+            this.dropdownEl.style.transition = `opacity ${duration}ms ease, transform ${duration}ms ease`;
+            // to
+            this.dropdownEl.style.opacity = '1';
+            this.dropdownEl.style.transform = 'scale(1, 1)';
+        }, 1);
+        setTimeout(() => {
+            if (this.options.autoFocus)
+                this.dropdownEl.focus();
+            if (typeof this.options.onOpenEnd === 'function')
+                this.options.onOpenEnd.call(this, this.el);
+        }, duration);
+    }
+    _animateOut() {
+        const duration = this.options.outDuration;
+        // easeOutQuad (opacity) & easeOutQuint
+        this.dropdownEl.style.transition = `opacity ${duration}ms ease, transform ${duration}ms ease`;
+        // to
+        this.dropdownEl.style.opacity = '0';
+        this.dropdownEl.style.transform = 'scale(0.3, 0.3)';
+        setTimeout(() => {
+            this._resetDropdownStyles();
+            if (typeof this.options.onCloseEnd === 'function')
+                this.options.onCloseEnd.call(this, this.el);
+        }, duration);
+    }
+    _getClosestAncestor(el, condition) {
+        let ancestor = el.parentNode;
+        while (ancestor !== null && ancestor !== document) {
+            if (condition(ancestor)) {
+                return ancestor;
+            }
+            ancestor = ancestor.parentElement;
+        }
+        return null;
+    }
+    _placeDropdown() {
+        // Container here will be closest ancestor with overflow: hidden
+        let closestOverflowParent = this._getClosestAncestor(this.dropdownEl, (ancestor) => {
+            return (!['HTML', 'BODY'].includes(ancestor.tagName) &&
+                getComputedStyle(ancestor).overflow !== 'visible');
+        });
+        // Fallback
+        if (!closestOverflowParent) {
+            closestOverflowParent = ((!!this.dropdownEl.offsetParent ? this.dropdownEl.offsetParent : this.dropdownEl.parentNode));
+        }
+        if (getComputedStyle(closestOverflowParent).position === 'static')
+            closestOverflowParent.style.position = 'relative';
+        this._moveDropdown(closestOverflowParent);
+        // Set width before calculating positionInfo
+        const idealWidth = this.options.constrainWidth
+            ? this.el.getBoundingClientRect().width
+            : this.dropdownEl.getBoundingClientRect().width;
+        this.dropdownEl.style.width = idealWidth + 'px';
+        const positionInfo = this._getDropdownPosition(closestOverflowParent);
+        this.dropdownEl.style.left = positionInfo.x + 'px';
+        this.dropdownEl.style.top = positionInfo.y + 'px';
+        this.dropdownEl.style.height = positionInfo.height + 'px';
+        this.dropdownEl.style.width = positionInfo.width + 'px';
+        this.dropdownEl.style.transformOrigin = `${positionInfo.horizontalAlignment === 'left' ? '0' : '100%'} ${positionInfo.verticalAlignment === 'top' ? '0' : '100%'}`;
+    }
+    /**
+     * Open dropdown.
+     */
+    open = () => {
+        if (this.isOpen)
+            return;
+        this.isOpen = true;
+        // onOpenStart callback
+        if (typeof this.options.onOpenStart === 'function') {
+            this.options.onOpenStart.call(this, this.el);
+        }
+        // Reset styles
+        this._resetDropdownStyles();
+        this.dropdownEl.style.display = 'block';
+        this._placeDropdown();
+        this._animateIn();
+        // Do this one frame later so that we don't bind an event handler that's immediately
+        // called when the event bubbles up to the document and closes the dropdown
+        setTimeout(() => this._setupTemporaryEventHandlers(), 0);
+        this.el.ariaExpanded = 'true';
+    };
+    /**
+     * Close dropdown.
+     */
+    close = () => {
+        if (!this.isOpen)
+            return;
+        this.isOpen = false;
+        this.focusedIndex = -1;
+        // onCloseStart callback
+        if (typeof this.options.onCloseStart === 'function') {
+            this.options.onCloseStart.call(this, this.el);
+        }
+        this._animateOut();
+        this._removeTemporaryEventHandlers();
+        if (this.options.autoFocus) {
+            this.el.focus();
+        }
+        this.el.ariaExpanded = 'false';
+    };
+    /**
+     * While dropdown is open, you can recalculate its dimensions if its contents have changed.
+     */
+    recalculateDimensions = () => {
+        if (this.isOpen) {
+            this._resetDropdownPositioningStyles();
+            this._placeDropdown();
+        }
+    };
+}
+
+const _defaults$l = {
+    data: [], // Autocomplete data set
+    onAutocomplete: null, // Callback for when autocompleted
+    dropdownOptions: {
+        // Default dropdown options
+        autoFocus: false,
+        closeOnClick: false,
+        coverTrigger: false
+    },
+    minLength: 1, // Min characters before autocomplete starts
+    isMultiSelect: false,
+    onSearch: (text, autocomplete) => {
+        const normSearch = text.toLocaleLowerCase();
+        autocomplete.setMenuItems(autocomplete.options.data.filter((option) => option.id.toString().toLocaleLowerCase().includes(normSearch) ||
+            option.text?.toLocaleLowerCase().includes(normSearch)));
+    },
+    maxDropDownHeight: '300px',
+    allowUnsafeHTML: false
+};
+class Autocomplete extends Component {
+    /** If the autocomplete is open. */
+    isOpen;
+    /** Number of matching autocomplete options. */
+    count;
+    /** Index of the current selected option. */
+    activeIndex;
+    oldVal;
+    $active;
+    _mousedown;
+    container;
+    /** Instance of the dropdown plugin for this autocomplete. */
+    dropdown;
+    static _keydown;
+    selectedValues;
+    menuItems;
+    constructor(el, options) {
+        super(el, options, Autocomplete);
+        this.el['M_Autocomplete'] = this;
+        this.options = {
+            ...Autocomplete.defaults,
+            ...options
+        };
+        this.isOpen = false;
+        this.count = 0;
+        this.activeIndex = -1;
+        this.oldVal = '';
+        this.selectedValues = [];
+        this.menuItems = this.options.data || [];
+        this.$active = null;
+        this._mousedown = false;
+        this._setupDropdown();
+        this._setupEventHandlers();
+    }
+    static get defaults() {
+        return _defaults$l;
+    }
+    /**
+     * Initializes instances of Autocomplete.
+     * @param els HTML elements.
+     * @param options Component options.
+     */
+    static init(els, options = {}) {
+        return super.init(els, options, Autocomplete);
+    }
+    static getInstance(el) {
+        return el['M_Autocomplete'];
+    }
+    destroy() {
+        this._removeEventHandlers();
+        this._removeDropdown();
+        this.el['M_Autocomplete'] = undefined;
+    }
+    _setupEventHandlers() {
+        this.el.addEventListener('blur', this._handleInputBlur);
+        this.el.addEventListener('keyup', this._handleInputKeyup);
+        this.el.addEventListener('focus', this._handleInputFocus);
+        this.el.addEventListener('keydown', this._handleInputKeydown);
+        this.el.addEventListener('click', this._handleInputClick);
+        this.container.addEventListener('mousedown', this._handleContainerMousedownAndTouchstart);
+        this.container.addEventListener('mouseup', this._handleContainerMouseupAndTouchend);
+        if (typeof window.ontouchstart !== 'undefined') {
+            this.container.addEventListener('touchstart', this._handleContainerMousedownAndTouchstart);
+            this.container.addEventListener('touchend', this._handleContainerMouseupAndTouchend);
+        }
+    }
+    _removeEventHandlers() {
+        this.el.removeEventListener('blur', this._handleInputBlur);
+        this.el.removeEventListener('keyup', this._handleInputKeyup);
+        this.el.removeEventListener('focus', this._handleInputFocus);
+        this.el.removeEventListener('keydown', this._handleInputKeydown);
+        this.el.removeEventListener('click', this._handleInputClick);
+        this.container.removeEventListener('mousedown', this._handleContainerMousedownAndTouchstart);
+        this.container.removeEventListener('mouseup', this._handleContainerMouseupAndTouchend);
+        if (typeof window.ontouchstart !== 'undefined') {
+            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-${Utils.guid()}`;
+        this.container.classList.add('autocomplete-content', 'dropdown-content');
+        this.el.setAttribute('data-target', this.container.id);
+        this.menuItems.forEach((menuItem) => {
+            const itemElement = this._createDropdownItem(menuItem);
+            this.container.append(itemElement);
+        });
+        // ! Issue in Component Dropdown: _placeDropdown moves dom-position
+        this.el.parentElement.appendChild(this.container);
+        // Initialize dropdown
+        const dropdownOptions = {
+            ...Autocomplete.defaults.dropdownOptions,
+            ...this.options.dropdownOptions
+        };
+        // @todo shouldn't we conditionally check if dropdownOptions.onItemClick is set in first place?
+        const userOnItemClick = dropdownOptions.onItemClick;
+        // Ensuring the select Option call when user passes custom onItemClick function to dropdown
+        dropdownOptions.onItemClick = (li) => {
+            if (!li)
+                return;
+            const entryID = li.getAttribute('data-id');
+            this.selectOption(entryID);
+            // Handle user declared onItemClick if needed
+            if (userOnItemClick && typeof userOnItemClick === 'function')
+                userOnItemClick.call(this.dropdown, this.el);
+        };
+        this.dropdown = Dropdown.init(this.el, dropdownOptions);
+        // ! Workaround for Label: move label up again
+        // TODO: Just use PopperJS in future!
+        const label = this.el.parentElement.querySelector('label');
+        if (label)
+            this.el.after(label);
+        // Sketchy removal of dropdown click handler
+        this.el.removeEventListener('click', this.dropdown._handleClick);
+        // Set Value if already set in HTML
+        if (this.el.value)
+            this.selectOption(this.el.value);
+        // Add StatusInfo
+        const div = document.createElement('div');
+        div.classList.add('status-info');
+        div.setAttribute('style', 'position: absolute;right:0;top:0;');
+        this.el.parentElement.appendChild(div);
+        this._updateSelectedInfo();
+    }
+    _removeDropdown() {
+        this.container.parentNode.removeChild(this.container);
+    }
+    _handleInputBlur = () => {
+        if (!this._mousedown) {
+            this.close();
+            this._resetAutocomplete();
+        }
+    };
+    _handleInputKeyup = (e) => {
+        if (e.type === 'keyup')
+            Autocomplete._keydown = false;
+        this.count = 0;
+        const actualValue = this.el.value.toLocaleLowerCase();
+        // Don't capture enter or arrow key usage.
+        if (Utils.keys.ENTER.includes(e.key) ||
+            Utils.keys.ARROW_UP.includes(e.key) ||
+            Utils.keys.ARROW_DOWN.includes(e.key))
+            return;
+        // Check if the input isn't empty
+        // Check if focus triggered by tab
+        if (this.oldVal !== actualValue && Utils.tabPressed) {
+            this.open();
+        }
+        this._inputChangeDetection(actualValue);
+    };
+    _handleInputFocus = () => {
+        this.count = 0;
+        const actualValue = this.el.value.toLocaleLowerCase();
+        this._inputChangeDetection(actualValue);
+    };
+    _inputChangeDetection = (value) => {
+        // Value has changed!
+        if (this.oldVal !== value) {
+            this._setStatusLoading();
+            this.options.onSearch(this.el.value, this);
+        }
+        // Reset Single-Select when Input cleared
+        if (!this.options.isMultiSelect && this.el.value.length === 0) {
+            this.selectedValues = [];
+            this._triggerChanged();
+        }
+        this.oldVal = value;
+    };
+    _handleInputKeydown = (e) => {
+        Autocomplete._keydown = true;
+        // Arrow keys and enter key usage
+        const numItems = this.container.querySelectorAll('li').length;
+        // select element on Enter
+        if (Utils.keys.ENTER.includes(e.key) && this.activeIndex >= 0) {
+            const liElement = this.container.querySelectorAll('li')[this.activeIndex];
+            if (liElement) {
+                this.selectOption(liElement.getAttribute('data-id'));
+                e.preventDefault();
+            }
+            return;
+        }
+        // Capture up and down key
+        if (Utils.keys.ARROW_UP.includes(e.key) || Utils.keys.ARROW_DOWN.includes(e.key)) {
+            e.preventDefault();
+            if (Utils.keys.ARROW_UP.includes(e.key) && this.activeIndex > 0)
+                this.activeIndex--;
+            if (Utils.keys.ARROW_DOWN.includes(e.key) && this.activeIndex < numItems - 1)
+                this.activeIndex++;
+            this.$active?.classList.remove('active');
+            if (this.activeIndex >= 0) {
+                this.$active = this.container.querySelectorAll('li')[this.activeIndex];
+                this.$active?.classList.add('active');
+                // Focus selected
+                this.container.children[this.activeIndex].scrollIntoView({
+                    behavior: 'smooth',
+                    block: 'nearest',
+                    inline: 'nearest'
+                });
+            }
+        }
+    };
+    _handleInputClick = () => {
+        this.open();
+    };
+    _handleContainerMousedownAndTouchstart = () => {
+        this._mousedown = true;
+    };
+    _handleContainerMouseupAndTouchend = () => {
+        this._mousedown = false;
+    };
+    _resetCurrentElementPosition() {
+        this.activeIndex = -1;
+        this.$active?.classList.remove('active');
+    }
+    _resetAutocomplete() {
+        this.container.replaceChildren();
+        this._resetCurrentElementPosition();
+        this.oldVal = null;
+        this.isOpen = false;
+        this._mousedown = false;
+    }
+    _highlightPartialText(input, label) {
+        const start = label.toLocaleLowerCase().indexOf('' + input.toLocaleLowerCase() + '');
+        const end = start + input.length - 1;
+        //custom filters may return results where the string does not match any part
+        if (start == -1 || end == -1) {
+            return [label, '', ''];
+        }
+        return [label.slice(0, start), label.slice(start, end + 1), label.slice(end + 1)];
+    }
+    _createDropdownItem(entry) {
+        const item = document.createElement('li');
+        item.setAttribute('data-id', entry.id);
+        item.setAttribute('style', 'display:grid; grid-auto-flow: column; user-select: none; align-items: center;');
+        // Checkbox
+        if (this.options.isMultiSelect) {
+            item.innerHTML = `
+        <div class="item-selection" style="text-align:center;">
+        <input type="checkbox"${this.selectedValues.some((sel) => sel.id === entry.id) ? ' checked="checked"' : ''}><span style="padding-left:21px;"></span>
+      </div>`;
+        }
+        // Image
+        if (entry.image) {
+            const img = document.createElement('img');
+            img.classList.add('circle');
+            img.src = entry.image;
+            item.appendChild(img);
+        }
+        // Text
+        const inputText = this.el.value.toLocaleLowerCase();
+        const parts = this._highlightPartialText(inputText, (entry.text || entry.id).toString());
+        const div = document.createElement('div');
+        div.setAttribute('style', 'line-height:1.2;font-weight:500;');
+        if (this.options.allowUnsafeHTML) {
+            div.innerHTML = parts[0] + '<span class="highlight">' + parts[1] + '</span>' + parts[2];
+        }
+        else {
+            div.appendChild(document.createTextNode(parts[0]));
+            if (parts[1]) {
+                const highlight = document.createElement('span');
+                highlight.textContent = parts[1];
+                highlight.classList.add('highlight');
+                div.appendChild(highlight);
+                div.appendChild(document.createTextNode(parts[2]));
+            }
+        }
+        const itemText = document.createElement('div');
+        itemText.classList.add('item-text');
+        itemText.setAttribute('style', 'padding:5px;overflow:hidden;');
+        item.appendChild(itemText);
+        item.querySelector('.item-text').appendChild(div);
+        // Description
+        if (typeof entry.description === 'string' ||
+            (typeof entry.description === 'number' && !isNaN(entry.description))) {
+            const description = document.createElement('small');
+            description.setAttribute('style', 'line-height:1.3;color:grey;white-space:nowrap;text-overflow:ellipsis;display:block;width:90%;overflow:hidden;');
+            description.innerText = entry.description;
+            item.querySelector('.item-text').appendChild(description);
+        }
+        // Set Grid
+        const getGridConfig = () => {
+            if (this.options.isMultiSelect) {
+                if (entry.image)
+                    return '40px min-content auto'; // cb-img-txt
+                return '40px auto'; // cb-txt
+            }
+            if (entry.image)
+                return 'min-content auto'; // img-txt
+            return 'auto'; // txt
+        };
+        item.style.gridTemplateColumns = getGridConfig();
+        return item;
+    }
+    _renderDropdown() {
+        this._resetAutocomplete();
+        // Check if Data is empty
+        if (this.menuItems.length === 0) {
+            this.menuItems = this.selectedValues; // Show selected Items
+        }
+        for (let i = 0; i < this.menuItems.length; i++) {
+            const item = this._createDropdownItem(this.menuItems[i]);
+            this.container.append(item);
+        }
+    }
+    _setStatusLoading() {
+        this.el.parentElement.querySelector('.status-info').innerHTML =
+            `<div style="height:100%;width:50px;"><svg version="1.1" id="L4" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 0 0" xml:space="preserve">
+    <circle fill="#888c" stroke="none" cx="6" cy="50" r="6"><animate attributeName="opacity" dur="1s" values="0;1;0" repeatCount="indefinite" begin="0.1"/></circle>
+    <circle fill="#888c" stroke="none" cx="26" cy="50" r="6"><animate attributeName="opacity" dur="1s" values="0;1;0" repeatCount="indefinite" begin="0.2"/></circle>
+    <circle fill="#888c" stroke="none" cx="46" cy="50" r="6"><animate attributeName="opacity" dur="1s" values="0;1;0" repeatCount="indefinite"  begin="0.3"/></circle>
+  </svg></div>`;
+    }
+    _updateSelectedInfo() {
+        const statusElement = this.el.parentElement.querySelector('.status-info');
+        if (statusElement) {
+            if (this.options.isMultiSelect)
+                statusElement.innerHTML = this.selectedValues.length.toString();
+            else
+                statusElement.innerHTML = '';
+        }
+    }
+    _refreshInputText() {
+        if (this.selectedValues.length === 1) {
+            const entry = this.selectedValues[0];
+            this.el.value = entry.text || entry.id; // Write Text to Input
+        }
+    }
+    _triggerChanged() {
+        this.el.dispatchEvent(new Event('change'));
+        // Trigger Autocomplete Event
+        if (typeof this.options.onAutocomplete === 'function')
+            this.options.onAutocomplete.call(this, this.selectedValues);
+    }
+    /**
+     * Show autocomplete.
+     */
+    open = () => {
+        const inputText = this.el.value.toLocaleLowerCase();
+        this._resetAutocomplete();
+        if (inputText.length >= this.options.minLength) {
+            this.isOpen = true;
+            this._renderDropdown();
+        }
+        // Open dropdown
+        if (!this.dropdown.isOpen) {
+            setTimeout(() => {
+                this.dropdown.open();
+            }, 0); // TODO: why?
+        }
+        else
+            this.dropdown.recalculateDimensions(); // Recalculate dropdown when its already open
+    };
+    /**
+     * Hide autocomplete.
+     */
+    close = () => {
+        this.dropdown.close();
+    };
+    /**
+     * Updates the visible or selectable items shown in the menu.
+     * @param menuItems Items to be available.
+     */
+    setMenuItems(menuItems) {
+        this.menuItems = menuItems;
+        this.open();
+        this._updateSelectedInfo();
+    }
+    /**
+     * Sets selected values.
+     * @param entries
+     */
+    setValues(entries) {
+        this.selectedValues = entries;
+        this._updateSelectedInfo();
+        if (!this.options.isMultiSelect) {
+            this._refreshInputText();
+        }
+        this._triggerChanged();
+    }
+    /**
+     * Select a specific autocomplete option via id-property.
+     * @param id The id of a data-entry.
+     */
+    selectOption(id) {
+        const entry = this.menuItems.find((item) => item.id == id);
+        if (!entry)
+            return;
+        // Toggle Checkbox
+        const li = this.container.querySelector('li[data-id="' + id + '"]');
+        if (!li)
+            return;
+        if (this.options.isMultiSelect) {
+            const checkbox = li.querySelector('input[type="checkbox"]');
+            checkbox.checked = !checkbox.checked;
+            if (checkbox.checked)
+                this.selectedValues.push(entry);
+            else
+                this.selectedValues = this.selectedValues.filter((selectedEntry) => selectedEntry.id !== entry.id);
+            this.el.focus();
+        }
+        else {
+            // Single-Select
+            this.selectedValues = [entry];
+            this._refreshInputText();
+            this._resetAutocomplete();
+            this.close();
+        }
+        this._updateSelectedInfo();
+        this._triggerChanged();
+    }
+}
+
+const _defaults$k = {
+    direction: 'top',
+    hoverEnabled: true,
+    toolbarEnabled: false
+};
+class FloatingActionButton extends Component {
+    /**
+     * Describes open/close state of FAB.
+     */
+    isOpen;
+    _anchor;
+    _menu;
+    _floatingBtns;
+    _floatingBtnsReverse;
+    offsetY;
+    offsetX;
+    btnBottom;
+    btnLeft;
+    btnWidth;
+    constructor(el, options) {
+        super(el, options, FloatingActionButton);
+        this.el['M_FloatingActionButton'] = this;
+        this.options = {
+            ...FloatingActionButton.defaults,
+            ...options
+        };
+        this.isOpen = false;
+        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}`);
+        if (this.options.direction === 'top')
+            this.offsetY = 40;
+        else if (this.options.direction === 'right')
+            this.offsetX = -40;
+        else if (this.options.direction === 'bottom')
+            this.offsetY = -40;
+        else
+            this.offsetX = 40;
+        this._setupEventHandlers();
+    }
+    static get defaults() {
+        return _defaults$k;
+    }
+    /**
+     * Initializes instances of FloatingActionButton.
+     * @param els HTML elements.
+     * @param options Component options.
+     */
+    static init(els, options = {}) {
+        return super.init(els, options, FloatingActionButton);
+    }
+    static getInstance(el) {
+        return el['M_FloatingActionButton'];
+    }
+    destroy() {
+        this._removeEventHandlers();
+        this.el['M_FloatingActionButton'] = undefined;
+    }
+    _setupEventHandlers() {
+        if (this.options.hoverEnabled && !this.options.toolbarEnabled) {
+            this.el.addEventListener('mouseenter', this.open);
+            this.el.addEventListener('mouseleave', this.close);
+        }
+        else {
+            this.el.addEventListener('click', this._handleFABClick);
+        }
+    }
+    _removeEventHandlers() {
+        if (this.options.hoverEnabled && !this.options.toolbarEnabled) {
+            this.el.removeEventListener('mouseenter', this.open);
+            this.el.removeEventListener('mouseleave', this.close);
+        }
+        else {
+            this.el.removeEventListener('click', this._handleFABClick);
+        }
+    }
+    _handleFABClick = () => {
+        if (this.isOpen) {
+            this.close();
+        }
+        else {
+            this.open();
+        }
+    };
+    _handleDocumentClick = (e) => {
+        const elem = e.target;
+        if (elem !== this._menu)
+            this.close();
+    };
+    /**
+     * Open FAB.
+     */
+    open = () => {
+        if (this.isOpen)
+            return;
+        if (this.options.toolbarEnabled)
+            this._animateInToolbar();
+        else
+            this._animateInFAB();
+        this.isOpen = true;
+    };
+    /**
+     * Close FAB.
+     */
+    close = () => {
+        if (!this.isOpen)
+            return;
+        if (this.options.toolbarEnabled) {
+            window.removeEventListener('scroll', this.close, true);
+            document.body.removeEventListener('click', this._handleDocumentClick, true);
+        }
+        else {
+            this._animateOutFAB();
+        }
+        this.isOpen = false;
+    };
+    _animateInFAB() {
+        this.el.classList.add('active');
+        const delayIncrement = 40;
+        const duration = 275;
+        this._floatingBtnsReverse.forEach((el, index) => {
+            const delay = delayIncrement * index;
+            el.style.transition = 'none';
+            el.style.opacity = '0';
+            el.style.transform = `translate(${this.offsetX}px, ${this.offsetY}px) scale(0.4)`;
+            setTimeout(() => {
+                // from:
+                el.style.opacity = '0.4';
+                // easeInOutQuad
+                setTimeout(() => {
+                    // to:
+                    el.style.transition = `opacity ${duration}ms ease, transform ${duration}ms ease`;
+                    el.style.opacity = '1';
+                    el.style.transform = 'translate(0, 0) scale(1)';
+                }, 1);
+            }, delay);
+        });
+    }
+    _animateOutFAB() {
+        const duration = 175;
+        setTimeout(() => this.el.classList.remove('active'), duration);
+        this._floatingBtnsReverse.forEach((el) => {
+            el.style.transition = `opacity ${duration}ms ease, transform ${duration}ms ease`;
+            // to
+            el.style.opacity = '0';
+            el.style.transform = `translate(${this.offsetX}px, ${this.offsetY}px) scale(0.4)`;
+        });
+    }
+    _animateInToolbar() {
+        const windowWidth = window.innerWidth;
+        const windowHeight = window.innerHeight;
+        const btnRect = this.el.getBoundingClientRect();
+        const backdrop = document.createElement('div'), scaleFactor = windowWidth / backdrop[0].clientWidth, fabColor = getComputedStyle(this._anchor).backgroundColor; // css('background-color');
+        backdrop.classList.add('fab-backdrop'); //  $('<div class="fab-backdrop"></div>');
+        backdrop.style.backgroundColor = fabColor;
+        this._anchor.append(backdrop);
+        this.offsetX = btnRect.left - windowWidth / 2 + btnRect.width / 2;
+        this.offsetY = windowHeight - btnRect.bottom;
+        this.btnBottom = btnRect.bottom;
+        this.btnLeft = btnRect.left;
+        this.btnWidth = btnRect.width;
+        // Set initial state
+        this.el.classList.add('active');
+        this.el.style.textAlign = 'center';
+        this.el.style.width = '100%';
+        this.el.style.bottom = '0';
+        this.el.style.left = '0';
+        this.el.style.transform = 'translateX(' + this.offsetX + 'px)';
+        this.el.style.transition = 'none';
+        this._anchor.style.transform = `translateY(${this.offsetY}px`;
+        this._anchor.style.transition = 'none';
+        setTimeout(() => {
+            this.el.style.transform = '';
+            this.el.style.transition =
+                'transform .2s cubic-bezier(0.550, 0.085, 0.680, 0.530), background-color 0s linear .2s';
+            this._anchor.style.overflow = 'visible';
+            this._anchor.style.transform = '';
+            this._anchor.style.transition = 'transform .2s';
+            setTimeout(() => {
+                this.el.style.overflow = 'hidden';
+                this.el.style.backgroundColor = fabColor;
+                backdrop.style.transform = 'scale(' + scaleFactor + ')';
+                backdrop.style.transition = 'transform .2s cubic-bezier(0.550, 0.055, 0.675, 0.190)';
+                this._menu
+                    .querySelectorAll('li > a')
+                    .forEach((a) => (a.style.opacity = '1'));
+                // Scroll to close.
+                window.addEventListener('scroll', this.close, true);
+                document.body.addEventListener('click', this._handleDocumentClick, true);
+            }, 100);
+        }, 0);
+    }
+}
+
+const _defaults$j = {
+    onOpen: null,
+    onClose: null,
+    inDuration: 225,
+    outDuration: 300
+};
+class Cards extends Component {
+    isOpen = false;
+    cardReveal;
+    initialOverflow;
+    _activators;
+    cardRevealClose;
+    constructor(el, options) {
+        super(el, options, Cards);
+        this.el['M_Cards'] = this;
+        this.options = {
+            ...Cards.defaults,
+            ...options
+        };
+        this.cardReveal = this.el.querySelector('.card-reveal');
+        if (this.cardReveal) {
+            this.initialOverflow = getComputedStyle(this.el).overflow;
+            this._activators = Array.from(this.el.querySelectorAll('.activator'));
+            this._activators.forEach((el) => {
+                if (el)
+                    el.tabIndex = 0;
+            });
+            this.cardRevealClose = this.cardReveal?.querySelector('.card-title');
+            if (this.cardRevealClose)
+                this.cardRevealClose.tabIndex = -1;
+            this.cardReveal.ariaExpanded = 'false';
+            this._setupEventHandlers();
+        }
+    }
+    static get defaults() {
+        return _defaults$j;
+    }
+    /**
+     * Initializes instances of Cards.
+     * @param els HTML elements.
+     * @param options Component options.
+     */
+    static init(els, options) {
+        return super.init(els, options, Cards);
+    }
+    static getInstance(el) {
+        return el['M_Cards'];
+    }
+    /**
+     * {@inheritDoc}
+     */
+    destroy() {
+        this._removeEventHandlers();
+        this._activators = [];
+    }
+    _setupEventHandlers = () => {
+        this._activators.forEach((el) => {
+            el.addEventListener('click', this._handleClickInteraction);
+            el.addEventListener('keypress', this._handleKeypressEvent);
+        });
+    };
+    _removeEventHandlers = () => {
+        this._activators.forEach((el) => {
+            el.removeEventListener('click', this._handleClickInteraction);
+            el.removeEventListener('keypress', this._handleKeypressEvent);
+        });
+    };
+    _handleClickInteraction = () => {
+        this._handleRevealEvent();
+    };
+    _handleKeypressEvent = (e) => {
+        if (Utils.keys.ENTER.includes(e.key)) {
+            this._handleRevealEvent();
+        }
+    };
+    _handleRevealEvent = () => {
+        // Reveal Card
+        this._activators.forEach((el) => (el.tabIndex = -1));
+        this.open();
+    };
+    _setupRevealCloseEventHandlers = () => {
+        this.cardRevealClose.addEventListener('click', this.close);
+        this.cardRevealClose.addEventListener('keypress', this._handleKeypressCloseEvent);
+    };
+    _removeRevealCloseEventHandlers = () => {
+        this.cardRevealClose.addEventListener('click', this.close);
+        this.cardRevealClose.addEventListener('keypress', this._handleKeypressCloseEvent);
+    };
+    _handleKeypressCloseEvent = (e) => {
+        if (Utils.keys.ENTER.includes(e.key)) {
+            this.close();
+        }
+    };
+    /**
+     * Show card reveal.
+     */
+    open = () => {
+        if (this.isOpen)
+            return;
+        this.isOpen = true;
+        this.el.style.overflow = 'hidden';
+        this.cardReveal.style.display = 'block';
+        this.cardReveal.ariaExpanded = 'true';
+        this.cardRevealClose.tabIndex = 0;
+        setTimeout(() => {
+            this.cardReveal.style.transition = `transform ${this.options.outDuration}ms ease`; //easeInOutQuad
+            this.cardReveal.style.transform = 'translateY(-100%)';
+        }, 1);
+        if (typeof this.options.onOpen === 'function') {
+            this.options.onOpen.call(this);
+        }
+        this._setupRevealCloseEventHandlers();
+    };
+    /**
+     * Hide card reveal.
+     */
+    close = () => {
+        if (!this.isOpen)
+            return;
+        this.isOpen = false;
+        this.cardReveal.style.transition = `transform ${this.options.inDuration}ms ease`; //easeInOutQuad
+        this.cardReveal.style.transform = 'translateY(0)';
+        setTimeout(() => {
+            this.cardReveal.style.display = 'none';
+            this.cardReveal.ariaExpanded = 'false';
+            this._activators.forEach((el) => (el.tabIndex = 0));
+            this.cardRevealClose.tabIndex = -1;
+            this.el.style.overflow = this.initialOverflow;
+        }, this.options.inDuration);
+        if (typeof this.options.onClose === 'function') {
+            this.options.onClose.call(this);
+        }
+        this._removeRevealCloseEventHandlers();
+    };
+}
+
+const _defaults$i = {
+    duration: 200, // ms
+    dist: -100, // zoom scale TODO: make this more intuitive as an option
+    shift: 0, // spacing for center image
+    padding: 0, // Padding between non center items
+    numVisible: 5, // Number of visible items in carousel
+    fullWidth: false, // Change to full width styles
+    indicators: false, // Toggle indicators
+    noWrap: false, // Don't wrap around and cycle through items.
+    onCycleTo: null // Callback for when a new slide is cycled to.
+};
+class Carousel extends Component {
+    hasMultipleSlides;
+    showIndicators;
+    noWrap;
+    /** If the carousel is being clicked or tapped. */
+    pressed;
+    /** If the carousel is currently being dragged. */
+    dragged;
+    offset;
+    target;
+    images;
+    itemWidth;
+    itemHeight;
+    dim;
+    _indicators;
+    count;
+    xform;
+    verticalDragged;
+    reference;
+    referenceY;
+    velocity;
+    frame;
+    timestamp;
+    ticker;
+    amplitude;
+    /** The index of the center carousel item. */
+    center = 0;
+    imageHeight;
+    scrollingTimeout;
+    oneTimeCallback;
+    constructor(el, options) {
+        super(el, options, Carousel);
+        this.el['M_Carousel'] = this;
+        this.options = {
+            ...Carousel.defaults,
+            ...options
+        };
+        // Setup
+        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 = false;
+        this.dragged = false;
+        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 = this.itemWidth * 2 + this.options.padding || 1; // Make sure dim is non zero for divisions.
+        // Full Width carousel setup
+        if (this.options.fullWidth) {
+            this.options.dist = 0;
+            this._setCarouselHeight();
+            // Offset fixed items when indicators.
+            if (this.showIndicators) {
+                this.el.querySelector('.carousel-fixed-item')?.classList.add('with-indicators');
+            }
+        }
+        // Iterate through slides
+        this._indicators = document.createElement('ul');
+        this._indicators.classList.add('indicators');
+        this.el.querySelectorAll('.carousel-item').forEach((item, i) => {
+            this.images.push(item);
+            if (this.showIndicators) {
+                const indicator = document.createElement('li');
+                indicator.classList.add('indicator-item');
+                indicator.tabIndex = 0;
+                if (i === 0) {
+                    indicator.classList.add('active');
+                }
+                this._indicators.appendChild(indicator);
+            }
+        });
+        if (this.showIndicators)
+            this.el.appendChild(this._indicators);
+        this.count = this.images.length;
+        // Cap numVisible at count
+        this.options.numVisible = Math.min(this.count, this.options.numVisible);
+        // Setup cross browser string
+        this.xform = 'transform';
+        ['webkit', 'Moz', 'O', 'ms'].every((prefix) => {
+            const e = prefix + 'Transform';
+            if (typeof document.body.style[e] !== 'undefined') {
+                this.xform = e;
+                return false;
+            }
+            return true;
+        });
+        this._setupEventHandlers();
+        this._scroll(this.offset);
+    }
+    static get defaults() {
+        return _defaults$i;
+    }
+    /**
+     * Initializes instances of Carousel.
+     * @param els HTML elements.
+     * @param options Component options.
+     */
+    static init(els, options = {}) {
+        return super.init(els, options, Carousel);
+    }
+    static getInstance(el) {
+        return el['M_Carousel'];
+    }
+    destroy() {
+        this._removeEventHandlers();
+        this.el['M_Carousel'] = undefined;
+    }
+    _setupEventHandlers() {
+        if (typeof window.ontouchstart !== 'undefined') {
+            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);
+        if (this.showIndicators && this._indicators) {
+            this._indicators.querySelectorAll('.indicator-item').forEach((el) => {
+                el.addEventListener('click', this._handleIndicatorClick);
+                el.addEventListener('keypress', this._handleIndicatorKeyPress);
+            });
+        }
+        // Resize
+        window.addEventListener('resize', this._handleThrottledResize);
+    }
+    _removeEventHandlers() {
+        if (typeof window.ontouchstart !== 'undefined') {
+            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);
+        if (this.showIndicators && this._indicators) {
+            this._indicators.querySelectorAll('.indicator-item').forEach((el) => {
+                el.removeEventListener('click', this._handleIndicatorClick);
+            });
+        }
+        window.removeEventListener('resize', this._handleThrottledResize);
+    }
+    _handleThrottledResize = Utils.throttle(function () {
+        this._handleResize();
+    }, 200, null).bind(this);
+    _handleCarouselTap = (e) => {
+        // Fixes firefox draggable image bug
+        if (e.type === 'mousedown' && e.target.tagName === 'IMG') {
+            e.preventDefault();
+        }
+        this.pressed = true;
+        this.dragged = false;
+        this.verticalDragged = false;
+        this.reference = this._xpos(e);
+        this.referenceY = this._ypos(e);
+        this.velocity = this.amplitude = 0;
+        this.frame = this.offset;
+        this.timestamp = Date.now();
+        clearInterval(this.ticker);
+        this.ticker = setInterval(this._track, 100);
+    };
+    _handleCarouselDrag = (e) => {
+        let x, y, delta, deltaY;
+        if (this.pressed) {
+            x = this._xpos(e);
+            y = this._ypos(e);
+            delta = this.reference - x;
+            deltaY = Math.abs(this.referenceY - y);
+            if (deltaY < 30 && !this.verticalDragged) {
+                // If vertical scrolling don't allow dragging.
+                if (delta > 2 || delta < -2) {
+                    this.dragged = true;
+                    this.reference = x;
+                    this._scroll(this.offset + delta);
+                }
+            }
+            else if (this.dragged) {
+                // If dragging don't allow vertical scroll.
+                e.preventDefault();
+                e.stopPropagation();
+                return false;
+            }
+            else {
+                // Vertical scrolling.
+                this.verticalDragged = true;
+            }
+        }
+        if (this.dragged) {
+            // If dragging don't allow vertical scroll.
+            e.preventDefault();
+            e.stopPropagation();
+            return false;
+        }
+    };
+    _handleCarouselRelease = (e) => {
+        if (this.pressed) {
+            this.pressed = false;
+        }
+        else {
+            return;
+        }
+        clearInterval(this.ticker);
+        this.target = this.offset;
+        if (this.velocity > 10 || this.velocity < -10) {
+            this.amplitude = 0.9 * this.velocity;
+            this.target = this.offset + this.amplitude;
+        }
+        this.target = Math.round(this.target / this.dim) * this.dim;
+        // No wrap of items.
+        if (this.noWrap) {
+            if (this.target >= this.dim * (this.count - 1)) {
+                this.target = this.dim * (this.count - 1);
+            }
+            else if (this.target < 0) {
+                this.target = 0;
+            }
+        }
+        this.amplitude = this.target - this.offset;
+        this.timestamp = Date.now();
+        requestAnimationFrame(this._autoScroll);
+        if (this.dragged) {
+            e.preventDefault();
+            e.stopPropagation();
+        }
+        return false;
+    };
+    _handleCarouselClick = (e) => {
+        // Disable clicks if carousel was dragged.
+        if (this.dragged) {
+            e.preventDefault();
+            e.stopPropagation();
+            return false;
+        }
+        else if (!this.options.fullWidth) {
+            const clickedElem = e.target.closest('.carousel-item');
+            if (!clickedElem)
+                return;
+            const clickedIndex = [...clickedElem.parentNode.children].indexOf(clickedElem);
+            const diff = this._wrap(this.center) - clickedIndex;
+            // Disable clicks if carousel was shifted by click
+            if (diff !== 0) {
+                e.preventDefault();
+                e.stopPropagation();
+            }
+            // fixes https://github.com/materializecss/materialize/issues/180
+            if (clickedIndex < 0) {
+                // relative X position > center of carousel = clicked at the right part of the carousel
+                if (e.clientX - e.target.getBoundingClientRect().left >
+                    this.el.clientWidth / 2) {
+                    this.next();
+                }
+                else {
+                    this.prev();
+                }
+            }
+            else {
+                this._cycleTo(clickedIndex);
+            }
+        }
+    };
+    _handleIndicatorClick = (e) => {
+        e.stopPropagation();
+        this._handleIndicatorInteraction(e);
+    };
+    _handleIndicatorKeyPress = (e) => {
+        e.stopPropagation();
+        if (Utils.keys.ENTER.includes(e.key)) {
+            this._handleIndicatorInteraction(e);
+        }
+    };
+    _handleIndicatorInteraction = (e) => {
+        const indicator = e.target.closest('.indicator-item');
+        if (indicator) {
+            const index = [...indicator.parentNode.children].indexOf(indicator);
+            this._cycleTo(index);
+        }
+    };
+    _handleResize = () => {
+        if (this.options.fullWidth) {
+            this.itemWidth = this.el.querySelector('.carousel-item').clientWidth;
+            this.imageHeight = this.el.querySelector('.carousel-item.active').clientHeight;
+            this.dim = this.itemWidth * 2 + this.options.padding;
+            this.offset = this.center * 2 * this.itemWidth;
+            this.target = this.offset;
+            this._setCarouselHeight(true);
+        }
+        else {
+            this._scroll();
+        }
+    };
+    _setCarouselHeight(imageOnly = false) {
+        const firstSlide = this.el.querySelector('.carousel-item.active')
+            ? this.el.querySelector('.carousel-item.active')
+            : this.el.querySelector('.carousel-item');
+        const firstImage = firstSlide.querySelector('img');
+        if (firstImage) {
+            if (firstImage.complete) {
+                // If image won't trigger the load event
+                const imageHeight = firstImage.clientHeight;
+                if (imageHeight > 0) {
+                    this.el.style.height = imageHeight + 'px';
+                }
+                else {
+                    // If image still has no height, use the natural dimensions to calculate
+                    const naturalWidth = firstImage.naturalWidth;
+                    const naturalHeight = firstImage.naturalHeight;
+                    const adjustedHeight = (this.el.clientWidth / naturalWidth) * naturalHeight;
+                    this.el.style.height = adjustedHeight + 'px';
+                }
+            }
+            else {
+                // Get height when image is loaded normally
+                firstImage.addEventListener('load', () => {
+                    this.el.style.height = firstImage.offsetHeight + 'px';
+                });
+            }
+        }
+        else if (!imageOnly) {
+            const slideHeight = firstSlide.clientHeight;
+            this.el.style.height = slideHeight + 'px';
+        }
+    }
+    _xpos(e) {
+        // touch event
+        if (e.type.startsWith('touch') && e.targetTouches.length >= 1) {
+            return e.targetTouches[0].clientX;
+        }
+        // mouse event
+        return e.clientX;
+    }
+    _ypos(e) {
+        // touch event
+        if (e.type.startsWith('touch') && e.targetTouches.length >= 1) {
+            return e.targetTouches[0].clientY;
+        }
+        // mouse event
+        return e.clientY;
+    }
+    _wrap(x) {
+        return x >= this.count ? x % this.count : x < 0 ? this._wrap(this.count + (x % this.count)) : x;
+    }
+    _track = () => {
+        const now = Date.now(), elapsed = now - this.timestamp, delta = this.offset - this.frame, v = (1000 * delta) / (1 + elapsed);
+        // now = Date.now();
+        // elapsed = now - this.timestamp;
+        this.timestamp = now;
+        // delta = this.offset - this.frame;
+        this.frame = this.offset;
+        // v = (1000 * delta) / (1 + elapsed);
+        this.velocity = 0.8 * v + 0.2 * this.velocity;
+    };
+    _autoScroll = () => {
+        let elapsed, delta;
+        if (this.amplitude) {
+            elapsed = Date.now() - this.timestamp;
+            delta = this.amplitude * Math.exp(-elapsed / this.options.duration);
+            if (delta > 2 || delta < -2) {
+                this._scroll(this.target - delta);
+                requestAnimationFrame(this._autoScroll);
+            }
+            else {
+                this._scroll(this.target);
+            }
+        }
+    };
+    _scroll(x = 0) {
+        // Track scrolling state
+        if (!this.el.classList.contains('scrolling')) {
+            this.el.classList.add('scrolling');
+        }
+        if (this.scrollingTimeout != null) {
+            clearTimeout(this.scrollingTimeout);
+        }
+        this.scrollingTimeout = setTimeout(() => {
+            this.el.classList.remove('scrolling');
+        }, this.options.duration);
+        // Start actual scroll
+        this.offset = typeof x === 'number' ? x : this.offset;
+        this.center = Math.floor((this.offset + this.dim / 2) / this.dim);
+        const half = this.count >> 1, delta = this.offset - this.center * this.dim, dir = delta < 0 ? 1 : -1, tween = (-dir * delta * 2) / this.dim;
+        let i, el, alignment, zTranslation, tweenedOpacity, centerTweenedOpacity;
+        const lastCenter = this.center;
+        const numVisibleOffset = 1 / this.options.numVisible;
+        // delta = this.offset - this.center * this.dim;
+        // dir = delta < 0 ? 1 : -1;
+        // tween = (-dir * delta * 2) / this.dim;
+        // half = this.count >> 1;
+        if (this.options.fullWidth) {
+            alignment = 'translateX(0)';
+            centerTweenedOpacity = 1;
+        }
+        else {
+            alignment = 'translateX(' + (this.el.clientWidth - this.itemWidth) / 2 + 'px) ';
+            alignment += 'translateY(' + (this.el.clientHeight - this.itemHeight) / 2 + 'px)';
+            centerTweenedOpacity = 1 - numVisibleOffset * tween;
+        }
+        // Set indicator active
+        if (this.showIndicators) {
+            const diff = this.center % this.count;
+            const activeIndicator = this._indicators.querySelector('.indicator-item.active');
+            const activeIndicatorIndex = [...activeIndicator.parentNode.children].indexOf(activeIndicator);
+            if (activeIndicatorIndex !== diff) {
+                activeIndicator.classList.remove('active');
+                const pos = diff < 0 ? this.count + diff : diff;
+                this._indicators.querySelectorAll('.indicator-item')[pos].classList.add('active');
+            }
+        }
+        // center
+        // Don't show wrapped items.
+        if (!this.noWrap || (this.center >= 0 && this.center < this.count)) {
+            el = this.images[this._wrap(this.center)];
+            // Add active class to center item.
+            if (!el.classList.contains('active')) {
+                this.el.querySelector('.carousel-item').classList.remove('active');
+                el.classList.add('active');
+            }
+            const transformString = `${alignment} translateX(${-delta / 2}px) translateX(${dir * this.options.shift * tween * i}px) translateZ(${this.options.dist * tween}px)`;
+            this._updateItemStyle(el, centerTweenedOpacity, 0, transformString);
+        }
+        for (i = 1; i <= half; ++i) {
+            // right side
+            if (this.options.fullWidth) {
+                zTranslation = this.options.dist;
+                tweenedOpacity = i === half && delta < 0 ? 1 - tween : 1;
+            }
+            else {
+                zTranslation = this.options.dist * (i * 2 + tween * dir);
+                tweenedOpacity = 1 - numVisibleOffset * (i * 2 + tween * dir);
+            }
+            // Don't show wrapped items.
+            if (!this.noWrap || this.center + i < this.count) {
+                el = this.images[this._wrap(this.center + i)];
+                const transformString = `${alignment} translateX(${this.options.shift + (this.dim * i - delta) / 2}px) translateZ(${zTranslation}px)`;
+                this._updateItemStyle(el, tweenedOpacity, -i, transformString);
+            }
+            // left side
+            if (this.options.fullWidth) {
+                zTranslation = this.options.dist;
+                tweenedOpacity = i === half && delta > 0 ? 1 - tween : 1;
+            }
+            else {
+                zTranslation = this.options.dist * (i * 2 - tween * dir);
+                tweenedOpacity = 1 - numVisibleOffset * (i * 2 - tween * dir);
+            }
+            // Don't show wrapped items.
+            if (!this.noWrap || this.center - i >= 0) {
+                el = this.images[this._wrap(this.center - i)];
+                const transformString = `${alignment} translateX(${-this.options.shift + (-this.dim * i - delta) / 2}px) translateZ(${zTranslation}px)`;
+                this._updateItemStyle(el, tweenedOpacity, -i, transformString);
+            }
+        }
+        // center
+        // Don't show wrapped items.
+        if (!this.noWrap || (this.center >= 0 && this.center < this.count)) {
+            el = this.images[this._wrap(this.center)];
+            const transformString = `${alignment} translateX(${-delta / 2}px) translateX(${dir * this.options.shift * tween}px) translateZ(${this.options.dist * tween}px)`;
+            this._updateItemStyle(el, centerTweenedOpacity, 0, transformString);
+        }
+        // onCycleTo callback
+        const _currItem = this.el.querySelectorAll('.carousel-item')[this._wrap(this.center)];
+        if (lastCenter !== this.center && typeof this.options.onCycleTo === 'function') {
+            this.options.onCycleTo.call(this, _currItem, this.dragged);
+        }
+        // One time callback
+        if (typeof this.oneTimeCallback === 'function') {
+            this.oneTimeCallback.call(this, _currItem, this.dragged);
+            this.oneTimeCallback = null;
+        }
+    }
+    _updateItemStyle(el, opacity, zIndex, transform) {
+        el.style[this.xform] = transform;
+        el.style.zIndex = zIndex.toString();
+        el.style.opacity = opacity.toString();
+        el.style.visibility = 'visible';
+    }
+    _cycleTo(n, callback = null) {
+        let diff = (this.center % this.count) - n;
+        // Account for wraparound.
+        if (!this.noWrap) {
+            if (diff < 0) {
+                if (Math.abs(diff + this.count) < Math.abs(diff)) {
+                    diff += this.count;
+                }
+            }
+            else if (diff > 0) {
+                if (Math.abs(diff - this.count) < diff) {
+                    diff -= this.count;
+                }
+            }
+        }
+        this.target = this.dim * Math.round(this.offset / this.dim);
+        // Next
+        if (diff < 0) {
+            this.target += this.dim * Math.abs(diff);
+        } // Prev
+        else if (diff > 0) {
+            this.target -= this.dim * diff;
+        }
+        // Set one time callback
+        if (typeof callback === 'function') {
+            this.oneTimeCallback = callback;
+        }
+        // Scroll
+        if (this.offset !== this.target) {
+            this.amplitude = this.target - this.offset;
+            this.timestamp = Date.now();
+            requestAnimationFrame(this._autoScroll);
+        }
+    }
+    /**
+     * Move carousel to next slide or go forward a given amount of slides.
+     * @param n How many times the carousel slides.
+     */
+    next(n = 1) {
+        if (n === undefined || isNaN(n)) {
+            n = 1;
+        }
+        let index = this.center + n;
+        if (index >= this.count || index < 0) {
+            if (this.noWrap)
+                return;
+            index = this._wrap(index);
+        }
+        this._cycleTo(index);
+    }
+    /**
+     * Move carousel to previous slide or go back a given amount of slides.
+     * @param n How many times the carousel slides.
+     */
+    prev(n = 1) {
+        if (n === undefined || isNaN(n)) {
+            n = 1;
+        }
+        let index = this.center - n;
+        if (index >= this.count || index < 0) {
+            if (this.noWrap)
+                return;
+            index = this._wrap(index);
+        }
+        this._cycleTo(index);
+    }
+    /**
+     * Move carousel to nth slide.
+     * @param n Index of slide.
+     * @param callback "onCycleTo" optional callback.
+     */
+    set(n, callback) {
+        if (n === undefined || isNaN(n)) {
+            n = 0;
+        }
+        if (n > this.count || n < 0) {
+            if (this.noWrap)
+                return;
+            n = this._wrap(n);
+        }
+        this._cycleTo(n, callback);
+    }
+}
+
+const _defaults$h = {
+    data: [],
+    placeholder: '',
+    secondaryPlaceholder: '',
+    closeIconClass: 'material-icons',
+    autocompleteOptions: {},
+    autocompleteOnly: false,
+    limit: Infinity,
+    allowUserInput: false,
+    onChipAdd: null,
+    onChipSelect: null,
+    onChipDelete: null
+};
+function gGetIndex(el) {
+    return [...el.parentNode.children].indexOf(el);
+}
+class Chips extends Component {
+    /** Array of the current chips data. */
+    chipsData;
+    /** If the chips has autocomplete enabled. */
+    hasAutocomplete;
+    /** Autocomplete instance, if any. */
+    autocomplete;
+    _input;
+    _label;
+    _chips;
+    static _keydown;
+    _selectedChip;
+    constructor(el, options) {
+        super(el, options, Chips);
+        this.el['M_Chips'] = this;
+        this.options = {
+            ...Chips.defaults,
+            ...options
+        };
+        this.el.classList.add('chips');
+        this.chipsData = [];
+        this._chips = [];
+        // Render initial chips
+        if (this.options.data.length) {
+            this.chipsData = this.options.data;
+            this._renderChips();
+        }
+        this._setupLabel();
+        // Render input element, setup event handlers
+        if (this.options.allowUserInput) {
+            this.el.classList.add('input-field');
+            this._setupInput();
+            this._setupEventHandlers();
+            // move input to end
+            this.el.append(this._input);
+        }
+    }
+    static get defaults() {
+        return _defaults$h;
+    }
+    /**
+     * Initializes instances of Chips.
+     * @param els HTML elements.
+     * @param options Component options.
+     */
+    static init(els, options = {}) {
+        return super.init(els, options, Chips);
+    }
+    static getInstance(el) {
+        return el['M_Chips'];
+    }
+    getData() {
+        return this.chipsData;
+    }
+    destroy() {
+        if (this.options.allowUserInput) {
+            this._removeEventHandlers();
+        }
+        this._chips.forEach((c) => c.remove());
+        this._chips = [];
+        this.el['M_Chips'] = undefined;
+    }
+    _setupEventHandlers() {
+        this.el.addEventListener('click', this._handleChipClick);
+        // @todo why do we need this as document event listener, shouldn't we apply it to the element wrapper itself?
+        document.addEventListener('keydown', Chips._handleChipsKeydown);
+        document.addEventListener('keyup', Chips._handleChipsKeyup);
+        this.el.addEventListener('blur', Chips._handleChipsBlur, true);
+        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', Chips._handleChipsKeydown);
+        document.removeEventListener('keyup', Chips._handleChipsKeyup);
+        this.el.removeEventListener('blur', Chips._handleChipsBlur, true);
+        this._input.removeEventListener('focus', this._handleInputFocus);
+        this._input.removeEventListener('blur', this._handleInputBlur);
+        this._input.removeEventListener('keydown', this._handleInputKeydown);
+    }
+    _handleChipClick = (e) => {
+        const _chip = e.target.closest('.chip');
+        const clickedClose = e.target.classList.contains('close');
+        if (_chip) {
+            const index = [..._chip.parentNode.children].indexOf(_chip);
+            if (clickedClose) {
+                this.deleteChip(index);
+                this._input.focus();
+            }
+            else {
+                this.selectChip(index);
+            }
+            // Default handle click to focus on input
+        }
+        else {
+            this._input.focus();
+        }
+    };
+    static _handleChipsKeydown(e) {
+        Chips._keydown = true;
+        const chips = e.target.closest('.chips');
+        const chipsKeydown = e.target && chips;
+        // Don't handle keydown inputs on input and textarea
+        const tag = e.target.tagName;
+        if (tag === 'INPUT' || tag === 'TEXTAREA' || !chipsKeydown)
+            return;
+        const currChips = chips['M_Chips'];
+        if (Utils.keys.BACKSPACE.includes(e.key) || Utils.keys.DELETE.includes(e.key)) {
+            e.preventDefault();
+            let selectIndex = currChips.chipsData.length;
+            if (currChips._selectedChip) {
+                const index = gGetIndex(currChips._selectedChip);
+                currChips.deleteChip(index);
+                currChips._selectedChip = null;
+                // Make sure selectIndex doesn't go negative
+                selectIndex = Math.max(index - 1, 0);
+            }
+            if (currChips.chipsData.length)
+                currChips.selectChip(selectIndex);
+            else
+                currChips._input.focus();
+        }
+        else if (Utils.keys.ARROW_LEFT.includes(e.key)) {
+            if (currChips._selectedChip) {
+                const selectIndex = gGetIndex(currChips._selectedChip) - 1;
+                if (selectIndex < 0)
+                    return;
+                currChips.selectChip(selectIndex);
+            }
+        }
+        else if (Utils.keys.ARROW_RIGHT.includes(e.key)) {
+            if (currChips._selectedChip) {
+                const selectIndex = gGetIndex(currChips._selectedChip) + 1;
+                if (selectIndex >= currChips.chipsData.length)
+                    currChips._input.focus();
+                else
+                    currChips.selectChip(selectIndex);
+            }
+        }
+    }
+    static _handleChipsKeyup() {
+        Chips._keydown = false;
+    }
+    static _handleChipsBlur(e) {
+        if (!Chips._keydown && document.hidden) {
+            const chips = e.target.closest('.chips');
+            const currChips = chips['M_Chips'];
+            currChips._selectedChip = null;
+        }
+    }
+    _handleInputFocus = () => {
+        this.el.classList.add('focus');
+    };
+    _handleInputBlur = () => {
+        this.el.classList.remove('focus');
+    };
+    _handleInputKeydown = (e) => {
+        Chips._keydown = true;
+        if (Utils.keys.ENTER.includes(e.key)) {
+            // Override enter if autocompleting.
+            if (this.hasAutocomplete && this.autocomplete && this.autocomplete.isOpen) {
+                return;
+            }
+            e.preventDefault();
+            if (!this.hasAutocomplete || (this.hasAutocomplete && !this.options.autocompleteOnly)) {
+                this.addChip({ id: this._input.value });
+            }
+            this._input.value = '';
+        }
+        else if ((Utils.keys.BACKSPACE.includes(e.key) || Utils.keys.ARROW_LEFT.includes(e.key)) &&
+            this._input.value === '' &&
+            this.chipsData.length) {
+            e.preventDefault();
+            this.selectChip(this.chipsData.length - 1);
+        }
+    };
+    _renderChip(chip) {
+        if (!chip.id)
+            return;
+        const renderedChip = document.createElement('div');
+        renderedChip.classList.add('chip');
+        renderedChip.innerText = chip.text || chip.id;
+        // attach image if needed
+        if (chip.image) {
+            const img = document.createElement('img');
+            img.setAttribute('src', chip.image);
+            renderedChip.insertBefore(img, renderedChip.firstChild);
+        }
+        if (this.options.allowUserInput) {
+            renderedChip.setAttribute('tabindex', '0');
+            const closeIcon = document.createElement('i');
+            closeIcon.classList.add(this.options.closeIconClass, 'close');
+            closeIcon.innerText = 'close';
+            renderedChip.appendChild(closeIcon);
+        }
+        return renderedChip;
+    }
+    _renderChips() {
+        this._chips = []; //.remove();
+        for (let i = 0; i < this.chipsData.length; i++) {
+            const chipElem = this._renderChip(this.chipsData[i]);
+            this.el.appendChild(chipElem);
+            this._chips.push(chipElem);
+        }
+    }
+    _setupAutocomplete() {
+        this.options.autocompleteOptions.onAutocomplete = (items) => {
+            if (items.length > 0)
+                this.addChip({
+                    id: items[0].id,
+                    text: items[0].text,
+                    image: items[0].image
+                });
+            this._input.value = '';
+            this._input.focus();
+        };
+        this.autocomplete = Autocomplete.init(this._input, this.options.autocompleteOptions);
+    }
+    _setupInput() {
+        this._input = this.el.querySelector('input');
+        if (!this._input) {
+            this._input = document.createElement('input');
+            this.el.append(this._input);
+        }
+        this._input.classList.add('input');
+        this.hasAutocomplete = Object.keys(this.options.autocompleteOptions).length > 0;
+        // Setup autocomplete if needed
+        if (this.hasAutocomplete)
+            this._setupAutocomplete();
+        this._setPlaceholder();
+        // Set input id
+        if (!this._input.getAttribute('id'))
+            this._input.setAttribute('id', Utils.guid());
+    }
+    _setupLabel() {
+        this._label = this.el.querySelector('label');
+        if (this._label)
+            this._label.setAttribute('for', this._input.getAttribute('id'));
+    }
+    _setPlaceholder() {
+        if (this.chipsData !== undefined && !this.chipsData.length && this.options.placeholder) {
+            this._input.placeholder = this.options.placeholder;
+        }
+        else if ((this.chipsData === undefined || !!this.chipsData.length) &&
+            this.options.secondaryPlaceholder) {
+            this._input.placeholder = this.options.secondaryPlaceholder;
+        }
+    }
+    _isValidAndNotExist(chip) {
+        const isValid = !!chip.id;
+        const doesNotExist = !this.chipsData.some((item) => item.id == chip.id);
+        return isValid && doesNotExist;
+    }
+    /**
+     * Add chip to input.
+     * @param chip Chip data object
+     */
+    addChip(chip) {
+        if (!this._isValidAndNotExist(chip) || this.chipsData.length >= this.options.limit)
+            return;
+        const renderedChip = this._renderChip(chip);
+        this._chips.push(renderedChip);
+        this.chipsData.push(chip);
+        //$(this._input).before(renderedChip);
+        this._input.before(renderedChip);
+        this._setPlaceholder();
+        // fire chipAdd callback
+        if (typeof this.options.onChipAdd === 'function') {
+            this.options.onChipAdd(this.el, renderedChip);
+        }
+    }
+    /**
+     * Delete nth chip.
+     * @param chipIndex  Index of chip
+     */
+    deleteChip(chipIndex) {
+        const chip = this._chips[chipIndex];
+        this._chips[chipIndex].remove();
+        this._chips.splice(chipIndex, 1);
+        this.chipsData.splice(chipIndex, 1);
+        this._setPlaceholder();
+        // fire chipDelete callback
+        if (typeof this.options.onChipDelete === 'function') {
+            this.options.onChipDelete(this.el, chip);
+        }
+    }
+    /**
+     * Select nth chip.
+     * @param chipIndex Index of chip
+     */
+    selectChip(chipIndex) {
+        const chip = this._chips[chipIndex];
+        this._selectedChip = chip;
+        chip.focus();
+        // fire chipSelect callback
+        if (typeof this.options.onChipSelect === 'function') {
+            this.options.onChipSelect(this.el, chip);
+        }
+    }
+    static Init() {
+        if (typeof document !== 'undefined')
+            // Handle removal of static chips.
+            document.addEventListener('DOMContentLoaded', () => {
+                const chips = document.querySelectorAll('.chips');
+                chips.forEach((el) => {
+                    // if (el && (el['M_Chips == undefined) return;
+                    el.addEventListener('click', (e) => {
+                        if (e.target.classList.contains('close')) {
+                            const chip = e.target.closest('.chip');
+                            if (chip)
+                                chip.remove();
+                        }
+                    });
+                });
+            });
+    }
+    static {
+        Chips._keydown = false;
+    }
+}
+
+const _defaults$g = {
+    accordion: true,
+    onOpenStart: null,
+    onOpenEnd: null,
+    onCloseStart: null,
+    onCloseEnd: null,
+    inDuration: 300,
+    outDuration: 300
+};
+class Collapsible extends Component {
+    _headers;
+    constructor(el, options) {
+        super(el, options, Collapsible);
+        this.el['M_Collapsible'] = this;
+        this.options = {
+            ...Collapsible.defaults,
+            ...options
+        };
+        // Setup tab indices
+        this._headers = Array.from(this.el.querySelectorAll('li > .collapsible-header'));
+        this._headers.forEach((el) => (el.tabIndex = 0));
+        this._setupEventHandlers();
+        // Open active
+        const activeBodies = Array.from(this.el.querySelectorAll('li.active > .collapsible-body'));
+        if (this.options.accordion) {
+            if (activeBodies.length > 0) {
+                // Accordion => open first active only
+                this._setExpanded(activeBodies[0]);
+            }
+        }
+        else {
+            // Expandables => all active
+            activeBodies.forEach((el) => this._setExpanded(el));
+        }
+    }
+    static get defaults() {
+        return _defaults$g;
+    }
+    /**
+     * Initializes instances of Collapsible.
+     * @param els HTML elements.
+     * @param options Component options.
+     */
+    static init(els, options = {}) {
+        return super.init(els, options, Collapsible);
+    }
+    static getInstance(el) {
+        return el['M_Collapsible'];
+    }
+    destroy() {
+        this._removeEventHandlers();
+        this.el['M_Collapsible'] = undefined;
+    }
+    _setupEventHandlers() {
+        this.el.addEventListener('click', this._handleCollapsibleClick);
+        this._headers.forEach((header) => header.addEventListener('keydown', this._handleCollapsibleKeydown));
+    }
+    _removeEventHandlers() {
+        this.el.removeEventListener('click', this._handleCollapsibleClick);
+        this._headers.forEach((header) => header.removeEventListener('keydown', this._handleCollapsibleKeydown));
+    }
+    _handleCollapsibleClick = (e) => {
+        const header = e.target.closest('.collapsible-header');
+        if (e.target && header) {
+            const collapsible = header.closest('.collapsible');
+            if (collapsible !== this.el)
+                return;
+            const li = header.closest('li');
+            const isActive = li.classList.contains('active');
+            const index = [...li.parentNode.children].indexOf(li);
+            if (isActive)
+                this.close(index);
+            else
+                this.open(index);
+        }
+    };
+    _handleCollapsibleKeydown = (e) => {
+        if (Utils.keys.ENTER.includes(e.key)) {
+            this._handleCollapsibleClick(e);
+        }
+    };
+    _setExpanded(li) {
+        li.style.maxHeight = li.scrollHeight + 'px';
+    }
+    _animateIn(index) {
+        const li = this.el.children[index];
+        if (!li)
+            return;
+        const body = li.querySelector('.collapsible-body');
+        const duration = this.options.inDuration; // easeInOutCubic
+        body.style.transition = `max-height ${duration}ms ease-out`;
+        this._setExpanded(body);
+        setTimeout(() => {
+            if (typeof this.options.onOpenEnd === 'function') {
+                this.options.onOpenEnd.call(this, li);
+            }
+        }, duration);
+    }
+    _animateOut(index) {
+        const li = this.el.children[index];
+        if (!li)
+            return;
+        const body = li.querySelector('.collapsible-body');
+        const duration = this.options.outDuration; // easeInOutCubic
+        body.style.transition = `max-height ${duration}ms ease-out`;
+        body.style.maxHeight = '0';
+        setTimeout(() => {
+            if (typeof this.options.onCloseEnd === 'function') {
+                this.options.onCloseEnd.call(this, li);
+            }
+        }, duration);
+    }
+    /**
+     * Open collapsible section.
+     * @param n Nth section to open.
+     */
+    open = (index) => {
+        const listItems = Array.from(this.el.children).filter((c) => c.tagName === 'LI');
+        const li = listItems[index];
+        if (li && !li.classList.contains('active')) {
+            // onOpenStart callback
+            if (typeof this.options.onOpenStart === 'function') {
+                this.options.onOpenStart.call(this, li);
+            }
+            // Handle accordion behavior
+            if (this.options.accordion) {
+                const activeLis = listItems.filter((li) => li.classList.contains('active'));
+                activeLis.forEach((activeLi) => {
+                    const index = listItems.indexOf(activeLi);
+                    this.close(index);
+                });
+            }
+            // Animate in
+            li.classList.add('active');
+            this._animateIn(index);
+        }
+    };
+    /**
+     * Close collapsible section.
+     * @param n Nth section to close.
+     */
+    close = (index) => {
+        const li = Array.from(this.el.children).filter((c) => c.tagName === 'LI')[index];
+        if (li && li.classList.contains('active')) {
+            // onCloseStart callback
+            if (typeof this.options.onCloseStart === 'function') {
+                this.options.onCloseStart.call(this, li);
+            }
+            // Animate out
+            li.classList.remove('active');
+            this._animateOut(index);
+        }
+    };
+}
+
+const _defaults$f = {
+    classes: '',
+    dropdownOptions: {}
+};
+class FormSelect extends Component {
+    /** If this is a multiple select. */
+    isMultiple;
+    /**
+     * Label associated with the current select element.
+     * Is "null", if not detected.
+     */
+    labelEl;
+    /** Dropdown UL element. */
+    dropdownOptions;
+    /** Text input that shows current selected option. */
+    input;
+    /** Instance of the dropdown plugin for this select. */
+    dropdown;
+    /** The select wrapper element. */
+    wrapper;
+    selectOptions;
+    _values;
+    constructor(el, options) {
+        super(el, options, FormSelect);
+        if (this.el.classList.contains('browser-default'))
+            return;
+        this.el['M_FormSelect'] = this;
+        this.options = {
+            ...FormSelect.defaults,
+            ...options
+        };
+        this.isMultiple = this.el.multiple;
+        this.el.tabIndex = -1;
+        this._values = [];
+        this._setupDropdown();
+        this._setupEventHandlers();
+    }
+    static get defaults() {
+        return _defaults$f;
+    }
+    /**
+     * Initializes instances of FormSelect.
+     * @param els HTML elements.
+     * @param options Component options.
+     */
+    static init(els, options = {}) {
+        return super.init(els, options, FormSelect);
+    }
+    static getInstance(el) {
+        return el['M_FormSelect'];
+    }
+    destroy() {
+        this._removeEventHandlers();
+        this._removeDropdown();
+        this.el['M_FormSelect'] = undefined;
+    }
+    _setupEventHandlers() {
+        this.dropdownOptions.querySelectorAll('li:not(.optgroup)').forEach((el) => {
+            el.addEventListener('click', this._handleOptionClick);
+            el.addEventListener('keydown', (e) => {
+                if (e.key === ' ' || e.key === 'Enter')
+                    this._handleOptionClick(e);
+            });
+        });
+        this.el.addEventListener('change', this._handleSelectChange);
+        this.input.addEventListener('click', this._handleInputClick);
+    }
+    _removeEventHandlers() {
+        this.dropdownOptions.querySelectorAll('li:not(.optgroup)').forEach((el) => {
+            el.removeEventListener('click', this._handleOptionClick);
+        });
+        this.el.removeEventListener('change', this._handleSelectChange);
+        this.input.removeEventListener('click', this._handleInputClick);
+    }
+    _handleSelectChange = () => {
+        this._setValueToInput();
+    };
+    _handleOptionClick = (e) => {
+        e.preventDefault();
+        const virtualOption = e.target.closest('li');
+        this._selectOptionElement(virtualOption);
+        e.stopPropagation();
+    };
+    _arraysEqual(a, b) {
+        if (a === b)
+            return true;
+        if (a == null || b == null)
+            return false;
+        if (a.length !== b.length)
+            return false;
+        for (let i = 0; i < a.length; ++i)
+            if (a[i] !== b[i])
+                return false;
+        return true;
+    }
+    _selectOptionElement(virtualOption) {
+        if (!virtualOption.classList.contains('disabled') &&
+            !virtualOption.classList.contains('optgroup')) {
+            const value = this._values.find((value) => value.optionEl === virtualOption);
+            const previousSelectedValues = this.getSelectedValues();
+            if (this.isMultiple) {
+                // Multi-Select
+                this._toggleEntryFromArray(value);
+            }
+            else {
+                // Single-Select
+                this._deselectAll();
+                this._selectValue(value);
+            }
+            // Refresh Input-Text
+            this._setValueToInput();
+            // Trigger Change-Event only when data is different
+            const actualSelectedValues = this.getSelectedValues();
+            const selectionHasChanged = !this._arraysEqual(previousSelectedValues, actualSelectedValues);
+            if (selectionHasChanged)
+                this.el.dispatchEvent(new Event('change', { bubbles: true, cancelable: true, composed: true })); // trigger('change');
+        }
+        if (!this.isMultiple)
+            this.dropdown.close();
+    }
+    _handleInputClick = () => {
+        if (this.dropdown && this.dropdown.isOpen) {
+            this._setValueToInput();
+            this._setSelectedStates();
+        }
+    };
+    _setupDropdown() {
+        this.labelEl = document.querySelector('[for="' + this.el.id + '"]');
+        if (this.labelEl)
+            this.labelEl.style.display = 'none';
+        this.wrapper = document.createElement('div');
+        this.wrapper.classList.add('select-wrapper', 'input-field');
+        if (this.options.classes.length > 0) {
+            this.wrapper.classList.add(...this.options.classes.split(' '));
+        }
+        this.el.before(this.wrapper);
+        // Move actual select element into overflow hidden wrapper
+        const hiddenDiv = document.createElement('div');
+        hiddenDiv.classList.add('hide-select');
+        this.wrapper.append(hiddenDiv);
+        hiddenDiv.appendChild(this.el);
+        if (this.el.disabled)
+            this.wrapper.classList.add('disabled');
+        this.selectOptions = (Array.from(this.el.children).filter((el) => ['OPTION', 'OPTGROUP'].includes(el.tagName)));
+        // Create dropdown
+        this.dropdownOptions = document.createElement('ul');
+        this.dropdownOptions.id = `select-options-${Utils.guid()}`;
+        this.dropdownOptions.classList.add('dropdown-content', 'select-dropdown');
+        this.dropdownOptions.setAttribute('role', 'listbox');
+        this.dropdownOptions.ariaMultiSelectable = this.isMultiple.toString();
+        if (this.isMultiple)
+            this.dropdownOptions.classList.add('multiple-select-dropdown');
+        // Create dropdown structure
+        if (this.selectOptions.length > 0) {
+            this.selectOptions.forEach((realOption) => {
+                if (realOption.tagName === 'OPTION') {
+                    // Option
+                    const virtualOption = this._createAndAppendOptionWithIcon(realOption, this.isMultiple ? 'multiple' : undefined);
+                    this._addOptionToValues(realOption, virtualOption);
+                }
+                else if (realOption.tagName === 'OPTGROUP') {
+                    // Optgroup
+                    const groupId = 'opt-group-' + Utils.guid();
+                    const groupParent = document.createElement('li');
+                    groupParent.classList.add('optgroup');
+                    groupParent.tabIndex = -1;
+                    groupParent.setAttribute('role', 'group');
+                    groupParent.setAttribute('aria-labelledby', groupId);
+                    groupParent.innerHTML = `<span id="${groupId}" role="presentation">${realOption.getAttribute('label')}</span>`;
+                    this.dropdownOptions.append(groupParent);
+                    const groupChildren = [];
+                    const selectOptions = (Array.from(realOption.children).filter((el) => el.tagName === 'OPTION'));
+                    selectOptions.forEach((realOption) => {
+                        const virtualOption = this._createAndAppendOptionWithIcon(realOption, 'optgroup-option');
+                        const childId = 'opt-child-' + Utils.guid();
+                        virtualOption.id = childId;
+                        groupChildren.push(childId);
+                        this._addOptionToValues(realOption, virtualOption);
+                    });
+                    groupParent.setAttribute('aria-owns', groupChildren.join(' '));
+                }
+            });
+        }
+        this.wrapper.append(this.dropdownOptions);
+        // Add input dropdown
+        this.input = document.createElement('input');
+        this.input.id = 'm_select-input-' + Utils.guid();
+        this.input.classList.add('select-dropdown', 'dropdown-trigger');
+        this.input.type = 'text';
+        this.input.readOnly = true;
+        this.input.setAttribute('data-target', this.dropdownOptions.id);
+        this.input.ariaReadOnly = 'true';
+        this.input.ariaRequired = this.el.hasAttribute('required').toString(); //setAttribute("aria-required", this.el.hasAttribute("required"));
+        if (this.el.disabled)
+            this.input.disabled = true; // 'true');
+        const attrs = this.el.attributes;
+        for (let i = 0; i < attrs.length; ++i) {
+            const attr = attrs[i];
+            if (attr.name.startsWith('aria-'))
+                this.input.setAttribute(attr.name, attr.value);
+        }
+        // Adds aria-attributes to input element
+        this.input.setAttribute('role', 'combobox');
+        this.input.ariaExpanded = 'false';
+        this.input.setAttribute('aria-owns', this.dropdownOptions.id);
+        this.input.setAttribute('aria-controls', this.dropdownOptions.id);
+        this.input.placeholder = ' ';
+        this.wrapper.prepend(this.input);
+        this._setValueToInput();
+        // Add caret
+        const dropdownIcon = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); //document.createElement('svg')
+        dropdownIcon.classList.add('caret');
+        dropdownIcon.setAttribute('height', '24');
+        dropdownIcon.setAttribute('width', '24');
+        dropdownIcon.setAttribute('viewBox', '0 0 24 24');
+        dropdownIcon.ariaHidden = 'true';
+        dropdownIcon.innerHTML = `<path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/>`;
+        this.wrapper.prepend(dropdownIcon);
+        // Initialize dropdown
+        if (!this.el.disabled) {
+            const dropdownOptions = { ...this.options.dropdownOptions }; // TODO:
+            dropdownOptions.coverTrigger = false;
+            const userOnOpenEnd = dropdownOptions.onOpenEnd;
+            const userOnCloseEnd = dropdownOptions.onCloseEnd;
+            // Add callback for centering selected option when dropdown content is scrollable
+            dropdownOptions.onOpenEnd = () => {
+                const selectedOption = this.dropdownOptions.querySelector('.selected');
+                if (selectedOption) {
+                    // Focus selected option in dropdown
+                    Utils.keyDown = true;
+                    this.dropdown.focusedIndex = [...selectedOption.parentNode.children].indexOf(selectedOption);
+                    this.dropdown._focusFocusedItem();
+                    Utils.keyDown = false;
+                    // Handle scrolling to selected option
+                    if (this.dropdown.isScrollable) {
+                        let scrollOffset = selectedOption.getBoundingClientRect().top -
+                            this.dropdownOptions.getBoundingClientRect().top; // scroll to selected option
+                        scrollOffset -= this.dropdownOptions.clientHeight / 2; // center in dropdown
+                        this.dropdownOptions.scrollTop = scrollOffset;
+                    }
+                }
+                this.input.ariaExpanded = 'true';
+                // Handle user declared onOpenEnd if needed
+                if (userOnOpenEnd && typeof userOnOpenEnd === 'function')
+                    userOnOpenEnd.call(this.dropdown, this.el);
+            };
+            // Add callback for reseting "expanded" state
+            dropdownOptions.onCloseEnd = () => {
+                this.input.ariaExpanded = 'false';
+                // Handle user declared onOpenEnd if needed
+                if (userOnCloseEnd && typeof userOnCloseEnd === 'function')
+                    userOnCloseEnd.call(this.dropdown, this.el);
+            };
+            // Prevent dropdown from closing too early
+            dropdownOptions.closeOnClick = false;
+            this.dropdown = Dropdown.init(this.input, dropdownOptions);
+        }
+        // Add initial selections
+        this._setSelectedStates();
+        // Add Label
+        if (this.labelEl) {
+            const label = document.createElement('label');
+            label.htmlFor = this.input.id;
+            label.innerText = this.labelEl.innerText;
+            this.input.after(label);
+        }
+    }
+    _addOptionToValues(realOption, virtualOption) {
+        this._values.push({ el: realOption, optionEl: virtualOption });
+    }
+    _removeDropdown() {
+        this.wrapper.querySelector('.caret').remove();
+        this.input.remove();
+        this.dropdownOptions.remove();
+        this.wrapper.before(this.el);
+        this.wrapper.remove();
+    }
+    _createAndAppendOptionWithIcon(realOption, type) {
+        const li = document.createElement('li');
+        li.setAttribute('role', 'option');
+        if (realOption.disabled) {
+            li.classList.add('disabled');
+            li.ariaDisabled = 'true';
+        }
+        if (type === 'optgroup-option')
+            li.classList.add(type);
+        // Text / Checkbox
+        const span = document.createElement('span');
+        span.innerHTML = realOption.innerHTML;
+        if (this.isMultiple && !realOption.disabled) {
+            span.innerHTML = `<label><input type="checkbox"><span>${realOption.innerHTML}</span></label>`;
+        }
+        li.appendChild(span);
+        // add Icon
+        const iconUrl = realOption.getAttribute('data-icon');
+        const classes = realOption.getAttribute('class')?.split(' ');
+        if (iconUrl) {
+            const img = document.createElement('img');
+            if (classes)
+                img.classList.add(...classes);
+            img.src = iconUrl;
+            img.ariaHidden = 'true';
+            li.prepend(img);
+        }
+        // Check for multiple type
+        this.dropdownOptions.append(li);
+        return li;
+    }
+    _selectValue(value) {
+        value.el.selected = true;
+        value.optionEl.classList.add('selected');
+        value.optionEl.ariaSelected = 'true'; // setAttribute("aria-selected", true);
+        const checkbox = value.optionEl.querySelector('input[type="checkbox"]');
+        if (checkbox)
+            checkbox.checked = true;
+    }
+    _deselectValue(value) {
+        value.el.selected = false;
+        value.optionEl.classList.remove('selected');
+        value.optionEl.ariaSelected = 'false'; //setAttribute("aria-selected", false);
+        const checkbox = value.optionEl.querySelector('input[type="checkbox"]');
+        if (checkbox)
+            checkbox.checked = false;
+    }
+    _deselectAll() {
+        this._values.forEach((value) => this._deselectValue(value));
+    }
+    _isValueSelected(value) {
+        const realValues = this.getSelectedValues();
+        return realValues.some((realValue) => realValue === value.el.value);
+    }
+    _toggleEntryFromArray(value) {
+        if (this._isValueSelected(value))
+            this._deselectValue(value);
+        else
+            this._selectValue(value);
+    }
+    _getSelectedOptions() {
+        // remove null, false, ... values
+        return Array.prototype.filter.call(this.el.selectedOptions, (realOption) => realOption);
+    }
+    _setValueToInput() {
+        const selectedRealOptions = this._getSelectedOptions();
+        const selectedOptionPairs = this._values.filter((value) => selectedRealOptions.indexOf(value.el) >= 0);
+        // Filter not disabled
+        const notDisabledOptionPairs = selectedOptionPairs.filter((op) => !op.el.disabled);
+        const texts = notDisabledOptionPairs.map((value) => value.optionEl.querySelector('span').innerText.trim());
+        // Set input-text to first Option with empty value which indicates a description like "choose your option"
+        if (texts.length === 0) {
+            const firstDisabledOption = this.el.querySelector('option:disabled');
+            if (firstDisabledOption && firstDisabledOption.value === '') {
+                this.input.value = firstDisabledOption.innerText;
+                return;
+            }
+        }
+        this.input.value = texts.join(', ');
+    }
+    _setSelectedStates() {
+        this._values.forEach((value) => {
+            const optionIsSelected = value.el.selected;
+            const cb = value.optionEl.querySelector('input[type="checkbox"]');
+            if (cb)
+                cb.checked = optionIsSelected;
+            if (optionIsSelected) {
+                this._activateOption(this.dropdownOptions, value.optionEl);
+            }
+            else {
+                value.optionEl.classList.remove('selected');
+                value.optionEl.ariaSelected = 'false'; // attr("aria-selected", 'false');
+            }
+        });
+    }
+    _activateOption(ul, li) {
+        if (!li)
+            return;
+        if (!this.isMultiple)
+            ul.querySelectorAll('li.selected').forEach((li) => li.classList.remove('selected'));
+        li.classList.add('selected');
+        li.ariaSelected = 'true';
+    }
+    getSelectedValues() {
+        return this._getSelectedOptions().map((realOption) => realOption.value);
+    }
+}
+
+const _defaults$e = {
+    // the default output format for the input field value
+    format: 'mmm dd, yyyy',
+    // Used to create date object from current input string
+    parse: null,
+    // The initial condition if the datepicker is based on date range
+    isDateRange: false,
+    // The selector of the user specified date range end element
+    dateRangeEndEl: null,
+    // The initial condition if the datepicker is based on multiple date selection
+    isMultipleSelection: false,
+    // The initial date to view when first opened
+    defaultDate: null,
+    // The initial end date to view when first opened
+    defaultEndDate: null,
+    // Make the `defaultDate` the initial selected value
+    setDefaultDate: false,
+    // Make the `defaultEndDate` the initial selected value
+    setDefaultEndDate: false,
+    disableWeekends: false,
+    disableDayFn: null,
+    // First day of week (0: Sunday, 1: Monday etc)
+    firstDay: 0,
+    // The earliest date that can be selected
+    minDate: null,
+    // Thelatest date that can be selected
+    maxDate: null,
+    // Number of years either side, or array of upper/lower range
+    yearRange: 10,
+    // used internally (don't config outside)
+    minYear: 0,
+    maxYear: 9999,
+    minMonth: undefined,
+    maxMonth: undefined,
+    startRange: null,
+    endRange: null,
+    isRTL: false,
+    yearRangeReverse: false,
+    // Render the month after year in the calendar title
+    showMonthAfterYear: false,
+    // Render days of the calendar grid that fall in the next or previous month
+    showDaysInNextAndPreviousMonths: false,
+    // Specify if docked picker is in open state by default
+    openByDefault: false,
+    // Specify a DOM element to render the calendar in
+    container: null,
+    // Show clear button
+    showClearBtn: false,
+    // internationalization
+    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 array
+    events: [],
+    // callback function
+    onSelect: null,
+    onDraw: null,
+    onInputInteraction: null,
+};
+class Datepicker extends Component {
+    id;
+    multiple = false;
+    calendarEl;
+    /** CLEAR button instance. */
+    clearBtn;
+    /** DONE button instance */
+    doneBtn;
+    cancelBtn;
+    containerEl;
+    yearTextEl;
+    dateTextEl;
+    endDateEl;
+    dateEls;
+    /** The selected Date. */
+    date;
+    endDate;
+    dates;
+    formats;
+    calendars;
+    _y;
+    _m;
+    static _template;
+    constructor(el, options) {
+        super(el, options, Datepicker);
+        this.el['M_Datepicker'] = this;
+        this.options = {
+            ...Datepicker.defaults,
+            ...options
+        };
+        // make sure i18n defaults are not lost when only few i18n option properties are passed
+        if (!!options && options.hasOwnProperty('i18n') && typeof options.i18n === 'object') {
+            this.options.i18n = { ...Datepicker.defaults.i18n, ...options.i18n };
+        }
+        // Remove time component from minDate and maxDate options
+        if (this.options.minDate)
+            this.options.minDate.setHours(0, 0, 0, 0);
+        if (this.options.maxDate)
+            this.options.maxDate.setHours(0, 0, 0, 0);
+        this.id = Utils.guid();
+        this._setupVariables();
+        this._insertHTMLIntoDOM();
+        this._setupEventHandlers();
+        if (!this.options.defaultDate) {
+            this.options.defaultDate = new Date(Date.parse(this.el.value));
+        }
+        const defDate = this.options.defaultDate;
+        if (Datepicker._isDate(defDate)) {
+            if (this.options.setDefaultDate) {
+                this.setDate(defDate, true);
+                this.setInputValue(this.el, defDate);
+            }
+            else {
+                this.gotoDate(defDate);
+            }
+        }
+        else {
+            this.gotoDate(new Date());
+        }
+        if (this.options.isDateRange) {
+            this.multiple = true;
+            const defEndDate = this.options.defaultEndDate;
+            if (Datepicker._isDate(defEndDate)) {
+                if (this.options.setDefaultEndDate) {
+                    this.setDate(defEndDate, true, true);
+                    this.setInputValue(this.endDateEl, defEndDate);
+                }
+            }
+        }
+        if (this.options.isMultipleSelection) {
+            this.multiple = true;
+            this.dates = [];
+            this.dateEls = [];
+            this.dateEls.push(el);
+        }
+    }
+    static get defaults() {
+        return _defaults$e;
+    }
+    /**
+     * Initializes instances of Datepicker.
+     * @param els HTML elements.
+     * @param options Component options.
+     */
+    static init(els, options = {}) {
+        return super.init(els, options, Datepicker);
+    }
+    static _isDate(obj) {
+        return /Date/.test(Object.prototype.toString.call(obj)) && !isNaN(obj.getTime());
+    }
+    static _isWeekend(date) {
+        const day = date.getDay();
+        return day === 0 || day === 6;
+    }
+    /**
+     * @deprecated as this function has no effect without any return statement or global parameter setter.
+     */
+    static _setToStartOfDay(date) {
+        if (Datepicker._isDate(date))
+            date.setHours(0, 0, 0, 0);
+    }
+    static _getDaysInMonth(year, month) {
+        return [31, Datepicker._isLeapYear(year) ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][month];
+    }
+    static _isLeapYear(year) {
+        // solution by Matti Virkkunen: http://stackoverflow.com/a/4881951
+        return (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;
+    }
+    static _compareDates(a, b) {
+        // weak date comparison (use setToStartOfDay(date) to ensure correct result)
+        return a.getTime() === b.getTime();
+    }
+    static _compareWithinRange(day, date, dateEnd) {
+        return day.getTime() > date.getTime() && day.getTime() < dateEnd.getTime();
+    }
+    static _comparePastDate(a, b) {
+        return a.getTime() < b.getTime();
+    }
+    static getInstance(el) {
+        return el['M_Datepicker'];
+    }
+    destroy() {
+        this._removeEventHandlers();
+        this.containerEl.remove();
+        this.destroySelects();
+        this.el['M_Datepicker'] = undefined;
+    }
+    destroySelects() {
+        const oldYearSelect = this.calendarEl.querySelector('.orig-select-year');
+        if (oldYearSelect) {
+            FormSelect.getInstance(oldYearSelect).destroy();
+        }
+        const oldMonthSelect = this.calendarEl.querySelector('.orig-select-month');
+        if (oldMonthSelect) {
+            FormSelect.getInstance(oldMonthSelect).destroy();
+        }
+    }
+    _insertHTMLIntoDOM() {
+        // HTML5 input date field support
+        if (this.el.type == 'date') {
+            this.el.classList.add('datepicker-date-input');
+        }
+        if (!this.el.parentElement.querySelector('.datepicker-format') === null) {
+            this._renderDateInputFormat(this.el);
+        }
+        if (this.options.isDateRange) {
+            this.containerEl.classList.add('daterange');
+            if (!this.options.dateRangeEndEl) {
+                this.endDateEl = this.createDateInput();
+                this.endDateEl.classList.add('datepicker-end-date');
+            }
+            else if (document.querySelector(this.options.dateRangeEndEl) === undefined) {
+                console.warn('Specified date range end input element in dateRangeEndEl not found');
+            }
+            else {
+                this.endDateEl = document.querySelector(this.options.dateRangeEndEl);
+                if (!this.endDateEl.parentElement.querySelector('.datepicker-format') === null) {
+                    this._renderDateInputFormat(this.endDateEl);
+                }
+            }
+        }
+        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;
+        if (this.options.container) {
+            const optEl = this.options.container;
+            this.options.container =
+                optEl instanceof HTMLElement ? optEl : document.querySelector(optEl);
+            this.options.container.append(this.containerEl);
+        }
+        else {
+            //this.containerEl.before(this.el);
+            const appendTo = !this.endDateEl ? this.el : this.endDateEl;
+            if (!this.options.openByDefault)
+                this.containerEl.setAttribute('style', 'display: none; visibility: hidden;');
+            appendTo.parentElement.after(this.containerEl);
+        }
+    }
+    /**
+     * Renders the date input format
+     */
+    _renderDateInputFormat(el) {
+        el.parentElement.querySelector('.datepicker-format').innerHTML = this.options.format.toString();
+    }
+    /**
+     * Gets a string representation of the given date.
+     */
+    toString(date = this.date, format = null) {
+        format = format || this.options.format;
+        if (typeof format === 'function')
+            return format(date);
+        if (!Datepicker._isDate(date))
+            return '';
+        // String Format
+        return this.formatDate(date, format);
+    }
+    /**
+     * Returns the formatted date.
+     */
+    formatDate(date, format) {
+        const formatArray = format.split(/(d{1,4}|m{1,4}|y{4}|yy|!.)/g);
+        return formatArray
+            .map((label) => (this.formats[label] ? this.formats[label](date) : label))
+            .join('');
+    }
+    /**
+     * Sets date from input field.
+     */
+    setDateFromInput(el) {
+        const date = new Date(Date.parse(el.value));
+        this.setDate(date, false, el == this.endDateEl, true);
+    }
+    /**
+     * Set a date on the datepicker.
+     * @param date Date to set on the datepicker.
+     * @param preventOnSelect Undocumented as of 5 March 2018.
+     * @param isEndDate
+     * @param fromUserInput
+     */
+    setDate(date = null, preventOnSelect = false, isEndDate = false, fromUserInput = false) {
+        const selectedDate = this.validateDate(date);
+        if (!selectedDate) {
+            return;
+        }
+        if (!this.options.isMultipleSelection)
+            this.setSingleDate(selectedDate, isEndDate);
+        else if (!fromUserInput)
+            this.setMultiDate(selectedDate);
+        Datepicker._setToStartOfDay(selectedDate);
+        this.gotoDate(selectedDate);
+        if (!preventOnSelect && typeof this.options.onSelect === 'function') {
+            this.options.onSelect.call(this, selectedDate);
+        }
+    }
+    validateDate(date) {
+        if (!date) {
+            this._renderDateDisplay(date);
+            return this.draw();
+        }
+        if (typeof date === 'string') {
+            date = new Date(Date.parse(date));
+        }
+        if (!Datepicker._isDate(date)) {
+            return;
+        }
+        const min = this.options.minDate, max = this.options.maxDate;
+        if (Datepicker._isDate(min) && date < min) {
+            date = min;
+        }
+        else if (Datepicker._isDate(max) && date > max) {
+            date = max;
+        }
+        return new Date(date.getTime());
+    }
+    /**
+     * Set a single date on the datepicker.
+     * @param date Date to set on the datepicker.
+     * @param isEndDate
+     */
+    setSingleDate(date, isEndDate) {
+        if (!isEndDate) {
+            this.date = date;
+        }
+        else if (isEndDate) {
+            this.endDate = date;
+        }
+    }
+    /**
+     * Set a multi date on the datepicker.
+     * @param date Date to set on the datepicker.
+     */
+    setMultiDate(date) {
+        const selectedDate = this.dates?.find((item) => {
+            return item.getTime() === date.getTime() ? item : false;
+        });
+        if (!selectedDate) {
+            this.dates.push(date);
+        }
+        else {
+            this.dates.splice(this.dates.indexOf(selectedDate), 1);
+        }
+        this.dates.sort((a, b) => (a.getTime() < b.getTime() ? -1 : 0));
+    }
+    /**
+     * Sets the data-date attribute on the date input field
+     */
+    setDataDate(el, date) {
+        el.setAttribute('data-date', this.toString(date));
+    }
+    /**
+     * Sets dates on the input values.
+     */
+    setInputValues() {
+        if (!this.options?.isMultipleSelection) {
+            this.setInputValue(this.el, this.date);
+            if (this.options?.isDateRange) {
+                this.setInputValue(this.endDateEl, this.endDate);
+            }
+            return;
+        }
+        this.setMultipleSelectionInputValues();
+    }
+    setMultipleSelectionInputValues() {
+        const dateElsArr = Array.from(this.dateEls).filter((el, index) => {
+            if (index > this.dates.length - 1)
+                return el;
+        });
+        dateElsArr.forEach((el) => {
+            el.remove();
+        });
+        this.dates.forEach((date, index) => {
+            if (Array.from(this.dateEls)[index]) {
+                this.setInputValue(this.dateEls[index], date);
+                return;
+            }
+            const dateEl = this.createDateInput();
+            this.setInputValue(dateEl, date);
+            this.dateEls.push(dateEl);
+        });
+    }
+    /**
+     * Sets given date as the input value on the given element.
+     */
+    setInputValue(el, date) {
+        if (el.type == 'date') {
+            this.setDataDate(el, date);
+            el.value = this.formatDate(date, 'yyyy-mm-dd');
+        }
+        else {
+            el.value = this.toString(date);
+        }
+        this.el.dispatchEvent(new CustomEvent('change', {
+            bubbles: true,
+            cancelable: true,
+            composed: true,
+            detail: { firedBy: this }
+        }));
+    }
+    /**
+     * Renders the date in the modal head section.
+     */
+    _renderDateDisplay(date, endDate = null) {
+        const displayDate = Datepicker._isDate(date) ? date : new Date();
+        // this.yearTextEl.innerHTML = displayDate.getFullYear().toString();
+        // @todo should we include an option for date formatting by component options?
+        if (!this.options.isDateRange) {
+            this.dateTextEl.innerHTML = this.formatDate(displayDate, 'ddd, mmm d');
+        }
+        else {
+            const displayEndDate = Datepicker._isDate(endDate) ? endDate : new Date();
+            this.dateTextEl.innerHTML = `${this.formatDate(displayDate, 'mmm d')} - ${this.formatDate(displayEndDate, 'mmm d')}`;
+        }
+    }
+    /**
+     * Change date view to a specific date on the datepicker.
+     * @param date Date to show on the datepicker.
+     */
+    gotoDate(date) {
+        let newCalendar = true;
+        if (!Datepicker._isDate(date)) {
+            return;
+        }
+        if (this.calendars) {
+            const firstVisibleDate = new Date(this.calendars[0].year, this.calendars[0].month, 1), lastVisibleDate = new Date(this.calendars[this.calendars.length - 1].year, this.calendars[this.calendars.length - 1].month, 1), visibleDate = date.getTime();
+            // get the end of the month
+            lastVisibleDate.setMonth(lastVisibleDate.getMonth() + 1);
+            lastVisibleDate.setDate(lastVisibleDate.getDate() - 1);
+            newCalendar =
+                visibleDate < firstVisibleDate.getTime() || lastVisibleDate.getTime() < visibleDate;
+        }
+        if (newCalendar) {
+            this.calendars = [
+                {
+                    month: date.getMonth(),
+                    year: date.getFullYear()
+                }
+            ];
+        }
+        this.adjustCalendars();
+    }
+    adjustCalendars() {
+        this.calendars[0] = this.adjustCalendar(this.calendars[0]);
+        this.draw();
+    }
+    adjustCalendar(calendar) {
+        if (calendar.month < 0) {
+            calendar.year -= Math.ceil(Math.abs(calendar.month) / 12);
+            calendar.month += 12;
+        }
+        if (calendar.month > 11) {
+            calendar.year += Math.floor(Math.abs(calendar.month) / 12);
+            calendar.month -= 12;
+        }
+        return calendar;
+    }
+    nextMonth() {
+        this.calendars[0].month++;
+        this.adjustCalendars();
+    }
+    prevMonth() {
+        this.calendars[0].month--;
+        this.adjustCalendars();
+    }
+    render(year, month, randId) {
+        const now = new Date(), days = Datepicker._getDaysInMonth(year, month), data = [];
+        let before = new Date(year, month, 1).getDay(), row = [];
+        Datepicker._setToStartOfDay(now);
+        if (this.options.firstDay > 0) {
+            before -= this.options.firstDay;
+            if (before < 0) {
+                before += 7;
+            }
+        }
+        const previousMonth = month === 0 ? 11 : month - 1, nextMonth = month === 11 ? 0 : month + 1, yearOfPreviousMonth = month === 0 ? year - 1 : year, yearOfNextMonth = month === 11 ? year + 1 : year, daysInPreviousMonth = Datepicker._getDaysInMonth(yearOfPreviousMonth, previousMonth);
+        let cells = days + before, after = cells;
+        while (after > 7) {
+            after -= 7;
+        }
+        cells += 7 - after;
+        let isWeekSelected = false;
+        for (let i = 0, r = 0; i < cells; i++) {
+            const day = new Date(year, month, 1 + (i - before)), isToday = Datepicker._compareDates(day, now), hasEvent = this.options.events.indexOf(day.toDateString()) !== -1, isEmpty = i < before || i >= days + before, isStartRange = this.options.startRange && Datepicker._compareDates(this.options.startRange, day), isEndRange = this.options.endRange && Datepicker._compareDates(this.options.endRange, day), isInRange = this.options.startRange &&
+                this.options.endRange &&
+                this.options.startRange < day &&
+                day < this.options.endRange, isDisabled = (this.options.minDate && day < this.options.minDate) ||
+                (this.options.maxDate && day > this.options.maxDate) ||
+                (this.options.disableWeekends && Datepicker._isWeekend(day)) ||
+                (this.options.disableDayFn && this.options.disableDayFn(day)), isDateRangeStart = this.options.isDateRange && this.date && this.endDate && Datepicker._compareDates(this.date, day), isDateRangeEnd = this.options.isDateRange && this.endDate && Datepicker._compareDates(this.endDate, day), isDateRange = this.options.isDateRange &&
+                Datepicker._isDate(this.endDate) &&
+                Datepicker._compareWithinRange(day, this.date, this.endDate);
+            let dayNumber = 1 + (i - before), monthNumber = month, yearNumber = year;
+            let isSelected = false;
+            if (Datepicker._isDate(this.date)) {
+                isSelected = Datepicker._compareDates(day, this.date);
+            }
+            if (!isSelected && Datepicker._isDate(this.endDate)) {
+                isSelected = Datepicker._compareDates(day, this.endDate);
+            }
+            if (this.options.isMultipleSelection &&
+                this.dates?.some((item) => item.getTime() === day.getTime())) {
+                isSelected = true;
+            }
+            if (isEmpty) {
+                if (i < before) {
+                    dayNumber = daysInPreviousMonth + dayNumber;
+                    monthNumber = previousMonth;
+                    yearNumber = yearOfPreviousMonth;
+                }
+                else {
+                    dayNumber = dayNumber - days;
+                    monthNumber = nextMonth;
+                    yearNumber = yearOfNextMonth;
+                }
+            }
+            const dayConfig = {
+                day: dayNumber,
+                month: monthNumber,
+                year: yearNumber,
+                hasEvent: hasEvent,
+                isSelected: isSelected,
+                isToday: isToday,
+                isDisabled: isDisabled,
+                isEmpty: isEmpty,
+                isStartRange: isStartRange,
+                isEndRange: isEndRange,
+                isInRange: isInRange,
+                showDaysInNextAndPreviousMonths: this.options.showDaysInNextAndPreviousMonths,
+                isDateRangeStart: isDateRangeStart,
+                isDateRangeEnd: isDateRangeEnd,
+                isDateRange: isDateRange
+            };
+            row.push(this.renderDay(dayConfig));
+            if (++r === 7) {
+                data.push(this.renderRow(row, this.options.isRTL, isWeekSelected));
+                row = [];
+                r = 0;
+                isWeekSelected = false;
+            }
+        }
+        return this.renderTable(this.options, data, randId);
+    }
+    renderDay(opts) {
+        const classMap = {
+            isDisabled: 'is-disabled',
+            isToday: 'is-today',
+            isSelected: 'is-selected',
+            hasEvent: 'has-event',
+            isInRange: 'is-inrange',
+            isStartRange: 'is-startrange',
+            isEndRange: 'is-endrange',
+            isDateRangeStart: 'is-daterange-start',
+            isDateRangeEnd: 'is-daterange-end',
+            isDateRange: 'is-daterange'
+        }, ariaSelected = !(['isSelected', 'isDateRange'].filter((prop) => !!(opts.hasOwnProperty(prop) && opts[prop] === true)).length === 0), arr = ['datepicker-day'];
+        if (opts.isEmpty) {
+            if (opts.showDaysInNextAndPreviousMonths) {
+                arr.push('is-outside-current-month');
+                arr.push('is-selection-disabled');
+            }
+            else {
+                return '<td class="is-empty"></td>';
+            }
+        }
+        for (const [property, className] of Object.entries(classMap)) {
+            if (opts.hasOwnProperty(property) && opts[property]) {
+                arr.push(className);
+            }
+        }
+        return (`<td data-day="${opts.day}" class="${arr.join(' ')}" aria-selected="${ariaSelected}">` +
+            `<button class="datepicker-day-button" type="button" data-year="${opts.year}" data-month="${opts.month}" data-day="${opts.day}">${opts.day}</button>` +
+            '</td>');
+    }
+    renderRow(days, isRTL, isRowSelected) {
+        return ('<tr class="datepicker-row' +
+            (isRowSelected ? ' is-selected' : '') +
+            '">' +
+            (isRTL ? days.reverse() : days).join('') +
+            '</tr>');
+    }
+    renderTable(opts, data, randId) {
+        return ('<div class="datepicker-table-wrapper"><table cellpadding="0" cellspacing="0" class="datepicker-table" role="grid" aria-labelledby="' +
+            randId +
+            '">' +
+            this.renderHead(opts) +
+            this.renderBody(data) +
+            '</table></div>');
+    }
+    renderHead(opts) {
+        const arr = [];
+        let i;
+        for (i = 0; i < 7; i++) {
+            arr.push(`<th scope="col"><abbr title="${this.renderDayName(opts, i)}">${this.renderDayName(opts, i, true)}</abbr></th>`);
+        }
+        return '<thead><tr>' + (opts.isRTL ? arr.reverse() : arr).join('') + '</tr></thead>';
+    }
+    renderBody(rows) {
+        return '<tbody>' + rows.join('') + '</tbody>';
+    }
+    renderTitle(instance, c, year, month, refYear, randId) {
+        const opts = this.options, isMinYear = year === opts.minYear, isMaxYear = year === opts.maxYear;
+        let i, j, arr = [], html = '<div id="' +
+            randId +
+            '" class="datepicker-controls" role="heading" aria-live="assertive">', prev = true, next = true;
+        for (i = 0; i < 12; i++) {
+            arr.push('<option value="' +
+                (year === refYear ? i - c : 12 + i - c) +
+                '"' +
+                (i === month ? ' selected="selected"' : '') +
+                ((isMinYear && i < opts.minMonth) || (isMaxYear && i > opts.maxMonth)
+                    ? 'disabled="disabled"'
+                    : '') +
+                '>' +
+                opts.i18n.months[i] +
+                '</option>');
+        }
+        const monthHtml = '<select class="datepicker-select orig-select-month" tabindex="-1">' +
+            arr.join('') +
+            '</select>';
+        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(`<option value="${i}" ${i === year ? 'selected="selected"' : ''}>${i}</option>`);
+            }
+        }
+        if (opts.yearRangeReverse)
+            arr.reverse();
+        const yearHtml = `<select class="datepicker-select orig-select-year" tabindex="-1">${arr.join('')}</select>`;
+        const leftArrow = '<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"/><path d="M0-.5h24v24H0z" fill="none"/></svg>';
+        html += `<button class="month-prev${prev ? '' : ' is-disabled'
+        // @todo remove button class and add scss mixin, current implementation temporary for focus states, @see https://github.com/materializecss/materialize/issues/566
+        } btn" type="button">${leftArrow}</button>`;
+        html += '<div class="selects-container">';
+        if (opts.showMonthAfterYear) {
+            html += yearHtml + monthHtml;
+        }
+        else {
+            html += monthHtml + yearHtml;
+        }
+        html += '</div>';
+        if (isMinYear && (month === 0 || opts.minMonth >= month)) {
+            prev = false;
+        }
+        if (isMaxYear && (month === 11 || opts.maxMonth <= month)) {
+            next = false;
+        }
+        const rightArrow = '<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"/><path d="M0-.25h24v24H0z" fill="none"/></svg>';
+        html += `<button class="month-next${next ? '' : ' is-disabled'
+        // @todo remove button class and add scss mixin, current implementation temporary for focus states, @see https://github.com/materializecss/materialize/issues/566
+        } btn" type="button">${rightArrow}</button>`;
+        return (html += '</div>');
+    }
+    // refresh HTML
+    draw() {
+        const opts = this.options, minYear = opts.minYear, maxYear = opts.maxYear, minMonth = opts.minMonth, maxMonth = opts.maxMonth;
+        let html = '';
+        if (this._y <= minYear) {
+            this._y = minYear;
+            if (!isNaN(minMonth) && this._m < minMonth) {
+                this._m = minMonth;
+            }
+        }
+        if (this._y >= maxYear) {
+            this._y = maxYear;
+            if (!isNaN(maxMonth) && this._m > maxMonth) {
+                this._m = maxMonth;
+            }
+        }
+        const randId = 'datepicker-title-' +
+            Math.random()
+                .toString(36)
+                .replace(/[^a-z]+/g, '')
+                .substr(0, 2);
+        for (let c = 0; c < 1; c++) {
+            if (!this.options.isDateRange) {
+                this._renderDateDisplay(this.date);
+            }
+            else {
+                this._renderDateDisplay(this.date, this.endDate);
+            }
+            html +=
+                this.renderTitle(this, c, this.calendars[c].year, this.calendars[c].month, this.calendars[0].year, randId) + this.render(this.calendars[c].year, this.calendars[c].month, randId);
+        }
+        this.destroySelects();
+        this.calendarEl.innerHTML = html;
+        // Init Materialize Select
+        const yearSelect = this.calendarEl.querySelector('.orig-select-year');
+        const monthSelect = this.calendarEl.querySelector('.orig-select-month');
+        // @todo fix accessibility @see https://github.com/materializecss/materialize/issues/522
+        FormSelect.init(yearSelect, {
+            classes: 'select-year',
+            dropdownOptions: { container: document.body, constrainWidth: false }
+        });
+        FormSelect.init(monthSelect, {
+            classes: 'select-month',
+            dropdownOptions: { container: document.body, constrainWidth: false }
+        });
+        // Add change handlers for select
+        yearSelect.addEventListener('change', this._handleYearChange);
+        monthSelect.addEventListener('change', this._handleMonthChange);
+        if (typeof this.options.onDraw === 'function') {
+            this.options.onDraw.call(this);
+        }
+    }
+    _setupEventHandlers() {
+        this.el.addEventListener('click', this._handleInputClick);
+        this.el.addEventListener('keydown', this._handleInputKeydown);
+        this.el.addEventListener('change', this._handleInputChange);
+        this.calendarEl.addEventListener('click', this._handleCalendarClick);
+        this.doneBtn.addEventListener('click', () => this.setInputValues());
+        this.cancelBtn.addEventListener('click', this.close);
+        if (this.options.showClearBtn) {
+            this.clearBtn.addEventListener('click', this._handleClearClick);
+        }
+    }
+    _setupVariables() {
+        const template = document.createElement('template');
+        template.innerHTML = Datepicker._template.trim();
+        this.containerEl = template.content.firstChild;
+        this.calendarEl = this.containerEl.querySelector('.datepicker-calendar');
+        this.yearTextEl = this.containerEl.querySelector('.year-text');
+        this.dateTextEl = this.containerEl.querySelector('.date-text');
+        if (this.options.showClearBtn) {
+            this.clearBtn = this.containerEl.querySelector('.datepicker-clear');
+        }
+        // TODO: This should not be part of the datepicker
+        this.doneBtn = this.containerEl.querySelector('.datepicker-done');
+        this.cancelBtn = this.containerEl.querySelector('.datepicker-cancel');
+        this.formats = {
+            d: (date) => {
+                return date.getDate();
+            },
+            dd: (date) => {
+                const d = date.getDate();
+                return (d < 10 ? '0' : '') + d;
+            },
+            ddd: (date) => {
+                return this.options.i18n.weekdaysShort[date.getDay()];
+            },
+            dddd: (date) => {
+                return this.options.i18n.weekdays[date.getDay()];
+            },
+            m: (date) => {
+                return date.getMonth() + 1;
+            },
+            mm: (date) => {
+                const m = date.getMonth() + 1;
+                return (m < 10 ? '0' : '') + m;
+            },
+            mmm: (date) => {
+                return this.options.i18n.monthsShort[date.getMonth()];
+            },
+            mmmm: (date) => {
+                return this.options.i18n.months[date.getMonth()];
+            },
+            yy: (date) => {
+                return ('' + date.getFullYear()).slice(2);
+            },
+            yyyy: (date) => {
+                return date.getFullYear();
+            }
+        };
+    }
+    _removeEventHandlers() {
+        this.el.removeEventListener('click', this._handleInputClick);
+        this.el.removeEventListener('keydown', this._handleInputKeydown);
+        this.el.removeEventListener('change', this._handleInputChange);
+        this.calendarEl.removeEventListener('click', this._handleCalendarClick);
+        if (this.options.isDateRange) {
+            this.endDateEl.removeEventListener('click', this._handleInputClick);
+            this.endDateEl.removeEventListener('keypress', this._handleInputKeydown);
+            this.endDateEl.removeEventListener('change', this._handleInputChange);
+        }
+    }
+    _handleInputClick = (e) => {
+        // Prevents default browser datepicker modal rendering
+        if (e.type == 'date') {
+            e.preventDefault();
+        }
+        this.setDateFromInput(e.target);
+        this.draw();
+        this.gotoDate(e.target === this.el ? this.date : this.endDate);
+        if (this.options.onInputInteraction)
+            this.options.onInputInteraction.call(this);
+    };
+    _handleInputKeydown = (e) => {
+        if (Utils.keys.ENTER.includes(e.key)) {
+            e.preventDefault();
+            this.setDateFromInput(e.target);
+            this.draw();
+            if (this.options.onInputInteraction)
+                this.options.onInputInteraction.call(this);
+        }
+    };
+    _handleCalendarClick = (e) => {
+        const target = e.target;
+        if (!target.classList.contains('is-disabled')) {
+            if (target.classList.contains('datepicker-day-button') &&
+                !target.classList.contains('is-empty') &&
+                !target.parentElement.classList.contains('is-disabled')) {
+                const selectedDate = new Date(e.target.getAttribute('data-year'), e.target.getAttribute('data-month'), e.target.getAttribute('data-day'));
+                if (!this.multiple || (this.multiple && this.options.isMultipleSelection)) {
+                    this.setDate(selectedDate);
+                }
+                if (this.options.isDateRange) {
+                    this._handleDateRangeCalendarClick(selectedDate);
+                }
+                this._finishSelection();
+            }
+            else if (target.closest('.month-prev')) {
+                this.prevMonth();
+            }
+            else if (target.closest('.month-next')) {
+                this.nextMonth();
+            }
+        }
+    };
+    _handleDateRangeCalendarClick = (date) => {
+        if (this.endDate == null || !Datepicker._compareDates(date, this.endDate)) {
+            if (Datepicker._isDate(this.date) && Datepicker._comparePastDate(date, this.date)) {
+                return;
+            }
+            this.setDate(date, false, Datepicker._isDate(this.date));
+            return;
+        }
+        this._clearDates();
+        this.draw();
+    };
+    _handleClearClick = () => {
+        this._clearDates();
+        this.setInputValues();
+    };
+    _clearDates = () => {
+        this.date = null;
+        this.endDate = null;
+    };
+    _handleMonthChange = (e) => {
+        this.gotoMonth(e.target.value);
+    };
+    _handleYearChange = (e) => {
+        this.gotoYear(e.target.value);
+    };
+    // change view to a specific month (zero-index, e.g. 0: January)
+    gotoMonth(month) {
+        if (!isNaN(month)) {
+            this.calendars[0].month = parseInt(month, 10);
+            this.adjustCalendars();
+        }
+    }
+    // change view to a specific full year (e.g. "2012")
+    gotoYear(year) {
+        if (!isNaN(year)) {
+            this.calendars[0].year = parseInt(year, 10);
+            this.adjustCalendars();
+        }
+    }
+    _handleInputChange = (e) => {
+        let date;
+        const el = e.target;
+        // Prevent change event from being fired when triggered by the plugin
+        if (e['detail']?.firedBy === this)
+            return;
+        // Prevent change event from being fired if an end date is set without a start date
+        if (el == this.endDateEl && !this.date)
+            return;
+        if (this.options.parse) {
+            date = this.options.parse(e.target.value, typeof this.options.format === 'function'
+                ? this.options.format(new Date(this.el.value))
+                : this.options.format);
+        }
+        else {
+            date = new Date(Date.parse(e.target.value));
+        }
+        if (Datepicker._isDate(date)) {
+            this.setDate(date, false, el == this.endDateEl, true);
+            if (e.type == 'date') {
+                this.setDataDate(e, date);
+                this.setInputValues();
+            }
+        }
+    };
+    renderDayName(opts, day, abbr = false) {
+        day += opts.firstDay;
+        while (day >= 7) {
+            day -= 7;
+        }
+        return abbr ? opts.i18n.weekdaysAbbrev[day] : opts.i18n.weekdays[day];
+    }
+    createDateInput() {
+        const dateInput = this.el.cloneNode(true);
+        dateInput.addEventListener('click', this._handleInputClick);
+        dateInput.addEventListener('keypress', this._handleInputKeydown);
+        dateInput.addEventListener('change', this._handleInputChange);
+        this.el.parentElement.appendChild(dateInput);
+        return dateInput;
+    }
+    // Set input value to the selected date and close Datepicker
+    _finishSelection = () => {
+        this.setInputValues();
+        this.close();
+    };
+    // deprecated
+    open() {
+        console.warn('Datepicker.open() is deprecated. Remove this method and wrap in modal yourself.');
+        return this;
+    }
+    close() {
+        console.warn('Datepicker.close() is deprecated. Remove this method and wrap in modal yourself.');
+        return this;
+    }
+    static {
+        Datepicker._template = `
+        <div class="datepicker-container">
+          <div class="datepicker-date-display">
+            <span class="year-text"></span>
+            <span class="date-text"></span>
+          </div>
+          <div class="datepicker-calendar-container">
+            <div class="datepicker-calendar"></div>
+            <div class="datepicker-footer">
+              <button class="btn-flat datepicker-clear waves-effect" style="visibility: hidden;" type="button"></button>
+              <div class="confirmation-btns">
+                <button class="btn-flat datepicker-cancel waves-effect" type="button"></button>
+                <button class="btn-flat datepicker-done waves-effect" type="button"></button>
+              </div>
+            </div>
+          </div>
+        </div>`;
+    }
+}
+
+class Forms {
+    /**
+     * Checks if the label has validation and apply
+     * the correct class and styles
+     * @param textfield
+     */
+    static validateField(textfield) {
+        if (!textfield) {
+            console.error('No text field element found');
+            return;
+        }
+        const hasLength = textfield.getAttribute('data-length') !== null;
+        const lenAttr = parseInt(textfield.getAttribute('data-length'));
+        const len = textfield.value.length;
+        if (len === 0 &&
+            textfield.validity.badInput === false &&
+            !textfield.required &&
+            textfield.classList.contains('validate')) {
+            textfield.classList.remove('invalid');
+        }
+        else if (textfield.classList.contains('validate')) {
+            // Check for character counter attributes
+            if ((textfield.validity.valid && hasLength && len <= lenAttr) ||
+                (textfield.validity.valid && !hasLength)) {
+                textfield.classList.remove('invalid');
+            }
+            else {
+                textfield.classList.add('invalid');
+            }
+        }
+    }
+    /**
+     * Resizes the given TextArea after updating the
+     *  value content dynamically.
+     * @param e EventTarget
+     */
+    static textareaAutoResize(e) {
+        const textarea = e;
+        // if (!textarea) {
+        //   console.error('No textarea element found');
+        //   return;
+        // }
+        // Textarea Auto Resize
+        let hiddenDiv = document.querySelector('.hiddendiv');
+        if (!hiddenDiv) {
+            hiddenDiv = document.createElement('div');
+            hiddenDiv.classList.add('hiddendiv', 'common');
+            document.body.append(hiddenDiv);
+        }
+        const style = getComputedStyle(textarea);
+        // Set font properties of hiddenDiv
+        const fontFamily = style.fontFamily; //textarea.css('font-family');
+        const fontSize = style.fontSize; //textarea.css('font-size');
+        const lineHeight = style.lineHeight; //textarea.css('line-height');
+        // Firefox can't handle padding shorthand.
+        const paddingTop = style.paddingTop; //getComputedStyle(textarea).css('padding-top');
+        const paddingRight = style.paddingRight; //textarea.css('padding-right');
+        const paddingBottom = style.paddingBottom; //textarea.css('padding-bottom');
+        const paddingLeft = style.paddingLeft; //textarea.css('padding-left');
+        if (fontSize)
+            hiddenDiv.style.fontSize = fontSize; //('font-size', fontSize);
+        if (fontFamily)
+            hiddenDiv.style.fontFamily = fontFamily; //css('font-family', fontFamily);
+        if (lineHeight)
+            hiddenDiv.style.lineHeight = lineHeight; //css('line-height', lineHeight);
+        if (paddingTop)
+            hiddenDiv.style.paddingTop = paddingTop; //ss('padding-top', paddingTop);
+        if (paddingRight)
+            hiddenDiv.style.paddingRight = paddingRight; //css('padding-right', paddingRight);
+        if (paddingBottom)
+            hiddenDiv.style.paddingBottom = paddingBottom; //css('padding-bottom', paddingBottom);
+        if (paddingLeft)
+            hiddenDiv.style.paddingLeft = paddingLeft; //css('padding-left', paddingLeft);
+        // Set original-height, if none
+        if (!textarea.hasAttribute('original-height'))
+            textarea.setAttribute('original-height', textarea.getBoundingClientRect().height.toString());
+        if (textarea.getAttribute('wrap') === 'off') {
+            hiddenDiv.style.overflowWrap = 'normal'; // ('overflow-wrap', 'normal')
+            hiddenDiv.style.whiteSpace = 'pre'; //.css('white-space', 'pre');
+        }
+        hiddenDiv.innerText = textarea.value + '\n';
+        hiddenDiv.innerHTML = hiddenDiv.innerHTML.replace(/\n/g, '<br>');
+        // When textarea is hidden, width goes crazy.
+        // Approximate with half of window size
+        if (textarea.offsetWidth > 0 && textarea.offsetHeight > 0) {
+            hiddenDiv.style.width = textarea.getBoundingClientRect().width + 'px'; // ('width', textarea.width() + 'px');
+        }
+        else {
+            hiddenDiv.style.width = window.innerWidth / 2 + 'px'; //css('width', window.innerWidth / 2 + 'px');
+        }
+        // Resize if the new height is greater than the
+        // original height of the textarea
+        const originalHeight = parseInt(textarea.getAttribute('original-height'));
+        const prevLength = parseInt(textarea.getAttribute('previous-length'));
+        if (isNaN(originalHeight))
+            return;
+        if (originalHeight <= hiddenDiv.clientHeight) {
+            textarea.style.height = hiddenDiv.clientHeight + 'px'; //css('height', hiddenDiv.innerHeight() + 'px');
+        }
+        else if (textarea.value.length < prevLength) {
+            // In case the new height is less than original height, it
+            // means the textarea has less text than before
+            // So we set the height to the original one
+            textarea.style.height = originalHeight + 'px';
+        }
+        textarea.setAttribute('previous-length', textarea.value.length.toString());
+    }
+    static Init() {
+        if (typeof document !== 'undefined')
+            document?.addEventListener('DOMContentLoaded', () => {
+                document.addEventListener('change', (e) => {
+                    const target = e.target;
+                    if (target instanceof HTMLInputElement) {
+                        if (target.value.length !== 0 || target.getAttribute('placeholder') !== null) {
+                            for (const child of target.parentNode.children) {
+                                if (child.tagName == 'label') {
+                                    child.classList.add('active');
+                                }
+                            }
+                        }
+                        Forms.validateField(target);
+                    }
+                });
+                document.addEventListener('keyup', (e) => {
+                    const target = e.target;
+                    // Radio and Checkbox focus class
+                    if (target instanceof HTMLInputElement && ['radio', 'checkbox'].includes(target.type)) {
+                        // TAB, check if tabbing to radio or checkbox.
+                        if (Utils.keys.TAB.includes(e.key)) {
+                            target.classList.add('tabbed');
+                            target.addEventListener('blur', () => target.classList.remove('tabbed'), {
+                                once: true
+                            });
+                        }
+                    }
+                });
+                document
+                    .querySelectorAll('.materialize-textarea')
+                    .forEach((textArea) => {
+                    Forms.InitTextarea(textArea);
+                });
+                // File Input Path
+                document
+                    .querySelectorAll('.file-field input[type="file"]')
+                    .forEach((fileInput) => {
+                    Forms.InitFileInputPath(fileInput);
+                });
+            });
+    }
+    static InitTextarea(textarea) {
+        // Save Data in Element
+        textarea.setAttribute('original-height', textarea.getBoundingClientRect().height.toString());
+        textarea.setAttribute('previous-length', textarea.value.length.toString());
+        Forms.textareaAutoResize(textarea);
+        textarea.addEventListener('keyup', (e) => Forms.textareaAutoResize(e.target));
+        textarea.addEventListener('keydown', (e) => Forms.textareaAutoResize(e.target));
+    }
+    static InitFileInputPath(fileInput) {
+        fileInput.addEventListener('change', () => {
+            const fileField = fileInput.closest('.file-field');
+            const pathInput = fileField.querySelector('input.file-path');
+            const files = fileInput.files;
+            const filenames = [];
+            for (let i = 0; i < files.length; i++) {
+                filenames.push(files[i].name);
+            }
+            pathInput.value = filenames.join(', ');
+            pathInput.dispatchEvent(new Event('change', { bubbles: true, cancelable: true, composed: true }));
+        });
+    }
+}
+
+const _defaults$d = {
+    inDuration: 275,
+    outDuration: 200,
+    onOpenStart: null,
+    onOpenEnd: null,
+    onCloseStart: null,
+    onCloseEnd: null
+};
+class Materialbox extends Component {
+    /** If the materialbox overlay is showing. */
+    overlayActive;
+    /** If the materialbox is no longer being animated. */
+    doneAnimating;
+    /** Caption, if specified. */
+    caption;
+    /** Original width of image. */
+    originalWidth;
+    /** Original height of image. */
+    originalHeight;
+    originInlineStyles;
+    placeholder;
+    _changedAncestorList;
+    newHeight;
+    newWidth;
+    windowWidth;
+    windowHeight;
+    attrWidth;
+    attrHeight;
+    _overlay;
+    _photoCaption;
+    constructor(el, options) {
+        super(el, options, Materialbox);
+        this.el['M_Materialbox'] = this;
+        this.options = {
+            ...Materialbox.defaults,
+            ...options
+        };
+        this.overlayActive = false;
+        this.doneAnimating = true;
+        this.placeholder = document.createElement('div');
+        this.placeholder.classList.add('material-placeholder');
+        this.originalWidth = 0;
+        this.originalHeight = 0;
+        this.originInlineStyles = this.el.getAttribute('style');
+        this.caption = this.el.getAttribute('data-caption') || '';
+        this.el.tabIndex = 0;
+        // Wrap
+        this.el.before(this.placeholder);
+        this.placeholder.append(this.el);
+        this._setupEventHandlers();
+    }
+    static get defaults() {
+        return _defaults$d;
+    }
+    /**
+     * Initializes instances of MaterialBox.
+     * @param els HTML elements.
+     * @param options Component options.
+     */
+    static init(els, options = {}) {
+        return super.init(els, options, Materialbox);
+    }
+    static getInstance(el) {
+        return el['M_Materialbox'];
+    }
+    destroy() {
+        this._removeEventHandlers();
+        this.el['M_Materialbox'] = undefined;
+        // Unwrap image
+        //this.placeholder.after(this.el).remove();
+        this.placeholder.remove();
+        this.el.removeAttribute('style');
+    }
+    _setupEventHandlers() {
+        this.el.addEventListener('click', this._handleMaterialboxClick);
+        this.el.addEventListener('keypress', this._handleMaterialboxKeypress);
+    }
+    _removeEventHandlers() {
+        this.el.removeEventListener('click', this._handleMaterialboxClick);
+        this.el.removeEventListener('keypress', this._handleMaterialboxKeypress);
+    }
+    _handleMaterialboxClick = () => {
+        this._handleMaterialboxToggle();
+    };
+    _handleMaterialboxKeypress = (e) => {
+        if (Utils.keys.ENTER.includes(e.key)) {
+            this._handleMaterialboxToggle();
+        }
+    };
+    _handleMaterialboxToggle = () => {
+        // If already modal, return to original
+        if (this.doneAnimating === false || (this.overlayActive && this.doneAnimating))
+            this.close();
+        else
+            this.open();
+    };
+    _handleWindowScroll = () => {
+        if (this.overlayActive)
+            this.close();
+    };
+    _handleWindowResize = () => {
+        if (this.overlayActive)
+            this.close();
+    };
+    _handleWindowEscape = (e) => {
+        if (Utils.keys.ESC.includes(e.key) && this.doneAnimating && this.overlayActive)
+            this.close();
+    };
+    _makeAncestorsOverflowVisible() {
+        this._changedAncestorList = [];
+        let ancestor = this.placeholder.parentNode;
+        while (ancestor !== null && ancestor !== document) {
+            const curr = ancestor;
+            if (curr.style.overflow !== 'visible') {
+                curr.style.overflow = 'visible';
+                this._changedAncestorList.push(curr);
+            }
+            ancestor = ancestor.parentNode;
+        }
+    }
+    _offset(el) {
+        const box = el.getBoundingClientRect();
+        const docElem = document.documentElement;
+        return {
+            top: box.top + window.scrollY - docElem.clientTop,
+            left: box.left + window.scrollX - docElem.clientLeft
+        };
+    }
+    _updateVars() {
+        this.windowWidth = window.innerWidth;
+        this.windowHeight = window.innerHeight;
+        this.caption = this.el.getAttribute('data-caption') || '';
+    }
+    // Image
+    _animateImageIn() {
+        this.el.style.maxHeight = this.newHeight.toString() + 'px';
+        this.el.style.maxWidth = this.newWidth.toString() + 'px';
+        const duration = this.options.inDuration;
+        // from
+        this.el.style.transition = 'none';
+        this.el.style.height = this.originalHeight + 'px';
+        this.el.style.width = this.originalWidth + 'px';
+        setTimeout(() => {
+            // easeOutQuad
+            this.el.style.transition = `height ${duration}ms ease,
+        width ${duration}ms ease,
+        left ${duration}ms ease,
+        top ${duration}ms ease
+      `;
+            // to
+            this.el.style.height = this.newHeight + 'px';
+            this.el.style.width = this.newWidth + 'px';
+            this.el.style.left =
+                Utils.getDocumentScrollLeft() +
+                    this.windowWidth / 2 -
+                    this._offset(this.placeholder).left -
+                    this.newWidth / 2 +
+                    'px';
+            this.el.style.top =
+                Utils.getDocumentScrollTop() +
+                    this.windowHeight / 2 -
+                    this._offset(this.placeholder).top -
+                    this.newHeight / 2 +
+                    'px';
+        }, 1);
+        setTimeout(() => {
+            this.doneAnimating = true;
+            if (typeof this.options.onOpenEnd === 'function')
+                this.options.onOpenEnd.call(this, this.el);
+        }, duration);
+        /*
+        anim({
+          targets: this.el, // image
+          height: [this.originalHeight, this.newHeight],
+          width: [this.originalWidth, this.newWidth],
+          left:
+            Utils.getDocumentScrollLeft() +
+            this.windowWidth / 2 -
+            this._offset(this.placeholder).left -
+            this.newWidth / 2,
+          top:
+            Utils.getDocumentScrollTop() +
+            this.windowHeight / 2 -
+            this._offset(this.placeholder).top -
+            this.newHeight / 2,
+    
+          duration: this.options.inDuration,
+          easing: 'easeOutQuad',
+          complete: () => {
+            this.doneAnimating = true;
+            if (typeof this.options.onOpenEnd === 'function') this.options.onOpenEnd.call(this, this.el);
+          }
+        });
+        */
+    }
+    _animateImageOut() {
+        const duration = this.options.outDuration;
+        // easeOutQuad
+        this.el.style.transition = `height ${duration}ms ease,
+      width ${duration}ms ease,
+      left ${duration}ms ease,
+      top ${duration}ms ease
+    `;
+        // to
+        this.el.style.height = this.originalWidth + 'px';
+        this.el.style.width = this.originalWidth + 'px';
+        this.el.style.left = '0';
+        this.el.style.top = '0';
+        setTimeout(() => {
+            this.placeholder.style.height = '';
+            this.placeholder.style.width = '';
+            this.placeholder.style.position = '';
+            this.placeholder.style.top = '';
+            this.placeholder.style.left = '';
+            // Revert to width or height attribute
+            if (this.attrWidth)
+                this.el.setAttribute('width', this.attrWidth.toString());
+            if (this.attrHeight)
+                this.el.setAttribute('height', this.attrHeight.toString());
+            this.el.removeAttribute('style');
+            if (this.originInlineStyles)
+                this.el.setAttribute('style', this.originInlineStyles);
+            // Remove class
+            this.el.classList.remove('active');
+            this.doneAnimating = true;
+            // Remove overflow overrides on ancestors
+            this._changedAncestorList.forEach((anchestor) => (anchestor.style.overflow = ''));
+            // onCloseEnd callback
+            if (typeof this.options.onCloseEnd === 'function')
+                this.options.onCloseEnd.call(this, this.el);
+        }, duration);
+    }
+    // Caption
+    _addCaption() {
+        this._photoCaption = document.createElement('div');
+        this._photoCaption.classList.add('materialbox-caption');
+        this._photoCaption.innerText = this.caption;
+        document.body.append(this._photoCaption);
+        this._photoCaption.style.display = 'inline';
+        // Animate
+        this._photoCaption.style.transition = 'none';
+        this._photoCaption.style.opacity = '0';
+        const duration = this.options.inDuration;
+        setTimeout(() => {
+            this._photoCaption.style.transition = `opacity ${duration}ms ease`;
+            this._photoCaption.style.opacity = '1';
+        }, 1);
+    }
+    _removeCaption() {
+        const duration = this.options.outDuration;
+        this._photoCaption.style.transition = `opacity ${duration}ms ease`;
+        this._photoCaption.style.opacity = '0';
+        setTimeout(() => {
+            this._photoCaption.remove();
+        }, duration);
+    }
+    // Overlay
+    _addOverlay() {
+        this._overlay = document.createElement('div');
+        this._overlay.id = 'materialbox-overlay';
+        this._overlay.addEventListener('click', () => {
+            if (this.doneAnimating)
+                this.close();
+        }, { once: true });
+        // Put before in origin image to preserve z-index layering.
+        this.el.before(this._overlay);
+        // Set dimensions if needed
+        const overlayOffset = this._overlay.getBoundingClientRect();
+        this._overlay.style.width = this.windowWidth + 'px';
+        this._overlay.style.height = this.windowHeight + 'px';
+        this._overlay.style.left = -1 * overlayOffset.left + 'px';
+        this._overlay.style.top = -1 * overlayOffset.top + 'px';
+        // Animate
+        this._overlay.style.transition = 'none';
+        this._overlay.style.opacity = '0';
+        const duration = this.options.inDuration;
+        setTimeout(() => {
+            this._overlay.style.transition = `opacity ${duration}ms ease`;
+            this._overlay.style.opacity = '1';
+        }, 1);
+    }
+    _removeOverlay() {
+        const duration = this.options.outDuration;
+        this._overlay.style.transition = `opacity ${duration}ms ease`;
+        this._overlay.style.opacity = '0';
+        setTimeout(() => {
+            this.overlayActive = false;
+            this._overlay.remove();
+        }, duration);
+    }
+    /**
+     * Open materialbox.
+     */
+    open = () => {
+        this._updateVars();
+        this.originalWidth = this.el.getBoundingClientRect().width;
+        this.originalHeight = this.el.getBoundingClientRect().height;
+        // Set states
+        this.doneAnimating = false;
+        this.el.classList.add('active');
+        this.overlayActive = true;
+        // onOpenStart callback
+        if (typeof this.options.onOpenStart === 'function')
+            this.options.onOpenStart.call(this, this.el);
+        // Set positioning for placeholder
+        this.placeholder.style.width = this.placeholder.getBoundingClientRect().width + 'px';
+        this.placeholder.style.height = this.placeholder.getBoundingClientRect().height + 'px';
+        this.placeholder.style.position = 'relative';
+        this.placeholder.style.top = '0';
+        this.placeholder.style.left = '0';
+        this._makeAncestorsOverflowVisible();
+        // Set css on origin
+        this.el.style.position = 'absolute';
+        this.el.style.zIndex = '1000';
+        this.el.style.willChange = 'left, top, width, height';
+        // Change from width or height attribute to css
+        this.attrWidth = this.el.getAttribute('width');
+        this.attrHeight = this.el.getAttribute('height');
+        if (this.attrWidth) {
+            this.el.style.width = this.attrWidth + 'px';
+            this.el.removeAttribute('width');
+        }
+        if (this.attrHeight) {
+            this.el.style.width = this.attrHeight + 'px';
+            this.el.removeAttribute('height');
+        }
+        this._addOverlay();
+        // Add and animate caption if it exists
+        if (this.caption !== '')
+            this._addCaption();
+        // Resize Image
+        const widthPercent = this.originalWidth / this.windowWidth;
+        const heightPercent = this.originalHeight / this.windowHeight;
+        this.newWidth = 0;
+        this.newHeight = 0;
+        if (widthPercent > heightPercent) {
+            // Width first
+            const ratio = this.originalHeight / this.originalWidth;
+            this.newWidth = this.windowWidth * 0.9;
+            this.newHeight = this.windowWidth * 0.9 * ratio;
+        }
+        else {
+            // Height first
+            const ratio = this.originalWidth / this.originalHeight;
+            this.newWidth = this.windowHeight * 0.9 * ratio;
+            this.newHeight = this.windowHeight * 0.9;
+        }
+        this._animateImageIn();
+        // Handle Exit triggers
+        window.addEventListener('scroll', this._handleWindowScroll);
+        window.addEventListener('resize', this._handleWindowResize);
+        window.addEventListener('keyup', this._handleWindowEscape);
+    };
+    /**
+     * Close materialbox.
+     */
+    close = () => {
+        this._updateVars();
+        this.doneAnimating = false;
+        // onCloseStart callback
+        if (typeof this.options.onCloseStart === 'function')
+            this.options.onCloseStart.call(this, this.el);
+        //anim.remove(this.el);
+        //anim.remove(this._overlay);
+        //if (this.caption !== '') anim.remove(this._photoCaption);
+        // disable exit handlers
+        window.removeEventListener('scroll', this._handleWindowScroll);
+        window.removeEventListener('resize', this._handleWindowResize);
+        window.removeEventListener('keyup', this._handleWindowEscape);
+        this._removeOverlay();
+        this._animateImageOut();
+        if (this.caption !== '')
+            this._removeCaption();
+    };
+}
+
+const _defaults$c = {
+    opacity: 0.5,
+    inDuration: 250,
+    outDuration: 250,
+    onOpenStart: null,
+    onOpenEnd: null,
+    onCloseStart: null,
+    onCloseEnd: null,
+    preventScrolling: true,
+    dismissible: true,
+    startingTop: '4%',
+    endingTop: '10%'
+};
+class Modal extends Component {
+    constructor(el, options) {
+        super(el, options, Modal);
+        this.el['M_Modal'] = this;
+        this.options = {
+            ...Modal.defaults,
+            ...options
+        };
+        this.el.tabIndex = 0;
+        this._setupEventHandlers();
+    }
+    static get defaults() {
+        return _defaults$c;
+    }
+    static init(els, options = {}) {
+        return super.init(els, options, Modal);
+    }
+    static getInstance(el) {
+        return el['M_Modal'];
+    }
+    destroy() { }
+    _setupEventHandlers() { }
+    _removeEventHandlers() { }
+    _handleTriggerClick() { }
+    _handleOverlayClick() { }
+    _handleModalCloseClick() { }
+    _handleKeydown() { }
+    _handleFocus() { }
+    open() {
+        return this;
+    }
+    close() {
+        return this;
+    }
+    // Experimental!
+    static #createHtml(config) {
+        return `<dialog id="modal1" class="modal">
+      ${config.header ? '<div class="modal-header">' + config.header + '</div>' : ''}
+      <div class="modal-content">
+        ${config.content}
+      </div>
+      ${config.header ? '<div class="modal-footer">' + config.footer + '</div>' : ''}
+    </dialog>`;
+    }
+    static #createHtmlElement(config) {
+        const dialog = document.createElement('dialog');
+        dialog.id = config.id;
+        return dialog;
+    }
+    static create(config) {
+        return this.#createHtmlElement(config);
+    }
+    static { }
+}
+
+const _defaults$b = {
+    responsiveThreshold: 0 // breakpoint for swipeable
+};
+class Parallax extends Component {
+    _enabled;
+    _img;
+    static _parallaxes = [];
+    static _handleScrollThrottled;
+    static _handleWindowResizeThrottled;
+    constructor(el, options) {
+        super(el, options, Parallax);
+        this.el['M_Parallax'] = this;
+        this.options = {
+            ...Parallax.defaults,
+            ...options
+        };
+        this._enabled = window.innerWidth > this.options.responsiveThreshold;
+        this._img = this.el.querySelector('img');
+        this._updateParallax();
+        this._setupEventHandlers();
+        this._setupStyles();
+        Parallax._parallaxes.push(this);
+    }
+    static get defaults() {
+        return _defaults$b;
+    }
+    /**
+     * Initializes instances of Parallax.
+     * @param els HTML elements.
+     * @param options Component options.
+     */
+    static init(els, options = {}) {
+        return super.init(els, options, Parallax);
+    }
+    static getInstance(el) {
+        return el['M_Parallax'];
+    }
+    destroy() {
+        Parallax._parallaxes.splice(Parallax._parallaxes.indexOf(this), 1);
+        this._img.style.transform = '';
+        this._removeEventHandlers();
+        this.el['M_Parallax'] = undefined;
+    }
+    static _handleScroll() {
+        for (let i = 0; i < Parallax._parallaxes.length; i++) {
+            const parallaxInstance = Parallax._parallaxes[i];
+            parallaxInstance._updateParallax.call(parallaxInstance);
+        }
+    }
+    static _handleWindowResize() {
+        for (let i = 0; i < Parallax._parallaxes.length; i++) {
+            const parallaxInstance = Parallax._parallaxes[i];
+            parallaxInstance._enabled = window.innerWidth > parallaxInstance.options.responsiveThreshold;
+        }
+    }
+    _setupEventHandlers() {
+        this._img.addEventListener('load', this._handleImageLoad);
+        if (Parallax._parallaxes.length === 0) {
+            if (!Parallax._handleScrollThrottled) {
+                Parallax._handleScrollThrottled = Utils.throttle(Parallax._handleScroll, 5);
+            }
+            if (!Parallax._handleWindowResizeThrottled) {
+                Parallax._handleWindowResizeThrottled = Utils.throttle(Parallax._handleWindowResize, 5);
+            }
+            window.addEventListener('scroll', Parallax._handleScrollThrottled);
+            window.addEventListener('resize', Parallax._handleWindowResizeThrottled);
+        }
+    }
+    _removeEventHandlers() {
+        this._img.removeEventListener('load', this._handleImageLoad);
+        if (Parallax._parallaxes.length === 0) {
+            window.removeEventListener('scroll', Parallax._handleScrollThrottled);
+            window.removeEventListener('resize', Parallax._handleWindowResizeThrottled);
+        }
+    }
+    _setupStyles() {
+        this._img.style.opacity = '1';
+    }
+    _handleImageLoad = () => {
+        this._updateParallax();
+    };
+    _offset(el) {
+        const box = el.getBoundingClientRect();
+        const docElem = document.documentElement;
+        return {
+            top: box.top + window.scrollY - docElem.clientTop,
+            left: box.left + window.scrollX - docElem.clientLeft
+        };
+    }
+    _updateParallax() {
+        const containerHeight = this.el.getBoundingClientRect().height > 0 ? this.el.parentElement.offsetHeight : 500;
+        const imgHeight = this._img.offsetHeight;
+        const parallaxDist = imgHeight - containerHeight;
+        const bottom = this._offset(this.el).top + containerHeight;
+        const top = this._offset(this.el).top;
+        const scrollTop = Utils.getDocumentScrollTop();
+        const windowHeight = window.innerHeight;
+        const windowBottom = scrollTop + windowHeight;
+        const percentScrolled = (windowBottom - top) / (containerHeight + windowHeight);
+        const parallax = parallaxDist * percentScrolled;
+        if (!this._enabled) {
+            this._img.style.transform = '';
+        }
+        else if (bottom > scrollTop && top < scrollTop + windowHeight) {
+            this._img.style.transform = `translate3D(-50%, ${parallax}px, 0)`;
+        }
+    }
+}
+
+const _defaults$a = {
+    top: 0,
+    bottom: Infinity,
+    offset: 0,
+    onPositionChange: null
+};
+class Pushpin extends Component {
+    static _pushpins;
+    originalOffset;
+    constructor(el, options) {
+        super(el, options, Pushpin);
+        this.el['M_Pushpin'] = this;
+        this.options = {
+            ...Pushpin.defaults,
+            ...options
+        };
+        this.originalOffset = this.el.offsetTop;
+        Pushpin._pushpins.push(this);
+        this._setupEventHandlers();
+        this._updatePosition();
+    }
+    static get defaults() {
+        return _defaults$a;
+    }
+    /**
+     * Initializes instances of Pushpin.
+     * @param els HTML elements.
+     * @param options Component options.
+     */
+    static init(els, options = {}) {
+        return super.init(els, options, Pushpin);
+    }
+    static getInstance(el) {
+        return el['M_Pushpin'];
+    }
+    destroy() {
+        this.el.style.top = null;
+        this._removePinClasses();
+        // Remove pushpin Inst
+        const index = Pushpin._pushpins.indexOf(this);
+        Pushpin._pushpins.splice(index, 1);
+        if (Pushpin._pushpins.length === 0) {
+            this._removeEventHandlers();
+        }
+        this.el['M_Pushpin'] = undefined;
+    }
+    static _updateElements() {
+        for (const elIndex in Pushpin._pushpins) {
+            const pInstance = Pushpin._pushpins[elIndex];
+            pInstance._updatePosition();
+        }
+    }
+    _setupEventHandlers() {
+        document.addEventListener('scroll', Pushpin._updateElements);
+    }
+    _removeEventHandlers() {
+        document.removeEventListener('scroll', Pushpin._updateElements);
+    }
+    _updatePosition() {
+        const scrolled = Utils.getDocumentScrollTop() + this.options.offset;
+        if (this.options.top <= scrolled &&
+            this.options.bottom >= scrolled &&
+            !this.el.classList.contains('pinned')) {
+            this._removePinClasses();
+            this.el.style.top = `${this.options.offset}px`;
+            this.el.classList.add('pinned');
+            // onPositionChange callback
+            if (typeof this.options.onPositionChange === 'function') {
+                this.options.onPositionChange.call(this, 'pinned');
+            }
+        }
+        // Add pin-top (when scrolled position is above top)
+        if (scrolled < this.options.top && !this.el.classList.contains('pin-top')) {
+            this._removePinClasses();
+            this.el.style.top = '0';
+            this.el.classList.add('pin-top');
+            // onPositionChange callback
+            if (typeof this.options.onPositionChange === 'function') {
+                this.options.onPositionChange.call(this, 'pin-top');
+            }
+        }
+        // Add pin-bottom (when scrolled position is below bottom)
+        if (scrolled > this.options.bottom && !this.el.classList.contains('pin-bottom')) {
+            this._removePinClasses();
+            this.el.classList.add('pin-bottom');
+            this.el.style.top = `${this.options.bottom - this.originalOffset}px`;
+            // onPositionChange callback
+            if (typeof this.options.onPositionChange === 'function') {
+                this.options.onPositionChange.call(this, 'pin-bottom');
+            }
+        }
+    }
+    _removePinClasses() {
+        // IE 11 bug (can't remove multiple classes in one line)
+        this.el.classList.remove('pin-top');
+        this.el.classList.remove('pinned');
+        this.el.classList.remove('pin-bottom');
+    }
+    static {
+        Pushpin._pushpins = [];
+    }
+}
+
+const _defaults$9 = {
+    throttle: 100,
+    scrollOffset: 200, // offset - 200 allows elements near bottom of page to scroll
+    activeClass: 'active',
+    getActiveElement: (id) => {
+        return 'a[href="#' + id + '"]';
+    },
+    keepTopElementActive: false,
+    animationDuration: null
+};
+class ScrollSpy extends Component {
+    static _elements;
+    static _count;
+    static _increment;
+    static _elementsInView;
+    static _visibleElements;
+    static _ticks;
+    static _keptTopActiveElement = null;
+    tickId;
+    id;
+    constructor(el, options) {
+        super(el, options, ScrollSpy);
+        this.el['M_ScrollSpy'] = this;
+        this.options = {
+            ...ScrollSpy.defaults,
+            ...options
+        };
+        ScrollSpy._elements.push(this);
+        ScrollSpy._count++;
+        ScrollSpy._increment++;
+        this.tickId = -1;
+        this.id = ScrollSpy._increment.toString();
+        this._setupEventHandlers();
+        this._handleWindowScroll();
+    }
+    static get defaults() {
+        return _defaults$9;
+    }
+    /**
+     * Initializes instances of ScrollSpy.
+     * @param els HTML elements.
+     * @param options Component options.
+     */
+    static init(els, options = {}) {
+        return super.init(els, options, ScrollSpy);
+    }
+    static getInstance(el) {
+        return el['M_ScrollSpy'];
+    }
+    destroy() {
+        ScrollSpy._elements.splice(ScrollSpy._elements.indexOf(this), 1);
+        ScrollSpy._elementsInView.splice(ScrollSpy._elementsInView.indexOf(this), 1);
+        ScrollSpy._visibleElements.splice(ScrollSpy._visibleElements.indexOf(this.el), 1);
+        ScrollSpy._count--;
+        this._removeEventHandlers();
+        const actElem = document.querySelector(this.options.getActiveElement(this.el.id));
+        actElem.classList.remove(this.options.activeClass);
+        this.el['M_ScrollSpy'] = undefined;
+    }
+    _setupEventHandlers() {
+        if (ScrollSpy._count === 1) {
+            window.addEventListener('scroll', this._handleWindowScroll);
+            window.addEventListener('resize', this._handleThrottledResize);
+            document.body.addEventListener('click', this._handleTriggerClick);
+        }
+    }
+    _removeEventHandlers() {
+        if (ScrollSpy._count === 0) {
+            window.removeEventListener('scroll', this._handleWindowScroll);
+            window.removeEventListener('resize', this._handleThrottledResize);
+            document.body.removeEventListener('click', this._handleTriggerClick);
+        }
+    }
+    _handleThrottledResize = Utils.throttle(function () {
+        this._handleWindowScroll();
+    }, 200).bind(this);
+    _handleTriggerClick = (e) => {
+        const trigger = e.target;
+        for (let i = ScrollSpy._elements.length - 1; i >= 0; i--) {
+            const scrollspy = ScrollSpy._elements[i];
+            const x = document.querySelector('a[href="#' + scrollspy.el.id + '"]');
+            if (trigger === x) {
+                e.preventDefault();
+                if (scrollspy.el['M_ScrollSpy'].options.animationDuration) {
+                    ScrollSpy._smoothScrollIntoView(scrollspy.el, scrollspy.el['M_ScrollSpy'].options.animationDuration);
+                }
+                else {
+                    scrollspy.el.scrollIntoView({ behavior: 'smooth' });
+                }
+                break;
+            }
+        }
+    };
+    _handleWindowScroll = () => {
+        // unique tick id
+        ScrollSpy._ticks++;
+        // viewport rectangle
+        const top = Utils.getDocumentScrollTop(), left = Utils.getDocumentScrollLeft(), right = left + window.innerWidth, bottom = top + window.innerHeight;
+        // determine which elements are in view
+        const intersections = ScrollSpy._findElements(top, right, bottom, left);
+        for (let i = 0; i < intersections.length; i++) {
+            const scrollspy = intersections[i];
+            const lastTick = scrollspy.tickId;
+            if (lastTick < 0) {
+                // entered into view
+                scrollspy._enter();
+            }
+            // update tick id
+            scrollspy.tickId = ScrollSpy._ticks;
+        }
+        for (let i = 0; i < ScrollSpy._elementsInView.length; i++) {
+            const scrollspy = ScrollSpy._elementsInView[i];
+            const lastTick = scrollspy.tickId;
+            if (lastTick >= 0 && lastTick !== ScrollSpy._ticks) {
+                // exited from view
+                scrollspy._exit();
+                scrollspy.tickId = -1;
+            }
+        }
+        // remember elements in view for next tick
+        ScrollSpy._elementsInView = intersections;
+        if (ScrollSpy._elements.length) {
+            const options = ScrollSpy._elements[0].el['M_ScrollSpy'].options;
+            if (options.keepTopElementActive && ScrollSpy._visibleElements.length === 0) {
+                this._resetKeptTopActiveElementIfNeeded();
+                const topElements = ScrollSpy._elements
+                    .filter((value) => ScrollSpy._getDistanceToViewport(value.el) <= 0)
+                    .sort((a, b) => {
+                    const distanceA = ScrollSpy._getDistanceToViewport(a.el);
+                    const distanceB = ScrollSpy._getDistanceToViewport(b.el);
+                    if (distanceA < distanceB)
+                        return -1;
+                    if (distanceA > distanceB)
+                        return 1;
+                    return 0;
+                });
+                const nearestTopElement = topElements.length
+                    ? topElements[topElements.length - 1]
+                    : ScrollSpy._elements[0];
+                const actElem = document.querySelector(options.getActiveElement(nearestTopElement.el.id));
+                actElem?.classList.add(options.activeClass);
+                ScrollSpy._keptTopActiveElement = actElem;
+            }
+        }
+    };
+    static _offset(el) {
+        const box = el.getBoundingClientRect();
+        const docElem = document.documentElement;
+        return {
+            top: box.top + window.pageYOffset - docElem.clientTop,
+            left: box.left + window.pageXOffset - docElem.clientLeft
+        };
+    }
+    static _findElements(top, right, bottom, left) {
+        const hits = [];
+        for (let i = 0; i < ScrollSpy._elements.length; i++) {
+            const scrollspy = ScrollSpy._elements[i];
+            const currTop = top + scrollspy.options.scrollOffset || 200;
+            if (scrollspy.el.getBoundingClientRect().height > 0) {
+                const elTop = ScrollSpy._offset(scrollspy.el).top, elLeft = ScrollSpy._offset(scrollspy.el).left, elRight = elLeft + scrollspy.el.getBoundingClientRect().width, elBottom = elTop + scrollspy.el.getBoundingClientRect().height;
+                const isIntersect = !(elLeft > right ||
+                    elRight < left ||
+                    elTop > bottom ||
+                    elBottom < currTop);
+                if (isIntersect) {
+                    hits.push(scrollspy);
+                }
+            }
+        }
+        return hits;
+    }
+    _enter() {
+        ScrollSpy._visibleElements = ScrollSpy._visibleElements.filter((value) => value.getBoundingClientRect().height !== 0);
+        if (ScrollSpy._visibleElements[0]) {
+            const actElem = document.querySelector(this.options.getActiveElement(ScrollSpy._visibleElements[0].id));
+            actElem?.classList.remove(this.options.activeClass);
+            if (ScrollSpy._visibleElements[0]['M_ScrollSpy'] &&
+                this.id < ScrollSpy._visibleElements[0]['M_ScrollSpy'].id) {
+                ScrollSpy._visibleElements.unshift(this.el);
+            }
+            else {
+                ScrollSpy._visibleElements.push(this.el);
+            }
+        }
+        else {
+            ScrollSpy._visibleElements.push(this.el);
+        }
+        this._resetKeptTopActiveElementIfNeeded();
+        const selector = this.options.getActiveElement(ScrollSpy._visibleElements[0].id);
+        document.querySelector(selector)?.classList.add(this.options.activeClass);
+    }
+    _exit() {
+        ScrollSpy._visibleElements = ScrollSpy._visibleElements.filter((value) => value.getBoundingClientRect().height !== 0);
+        if (ScrollSpy._visibleElements[0]) {
+            const actElem = document.querySelector(this.options.getActiveElement(ScrollSpy._visibleElements[0].id));
+            actElem?.classList.remove(this.options.activeClass);
+            ScrollSpy._visibleElements = ScrollSpy._visibleElements.filter((x) => x.id != this.el.id);
+            if (ScrollSpy._visibleElements[0]) {
+                // Check if empty
+                const selector = this.options.getActiveElement(ScrollSpy._visibleElements[0].id);
+                document.querySelector(selector)?.classList.add(this.options.activeClass);
+                this._resetKeptTopActiveElementIfNeeded();
+            }
+        }
+    }
+    _resetKeptTopActiveElementIfNeeded() {
+        if (ScrollSpy._keptTopActiveElement) {
+            ScrollSpy._keptTopActiveElement.classList.remove(this.options.activeClass);
+            ScrollSpy._keptTopActiveElement = null;
+        }
+    }
+    static _getDistanceToViewport(element) {
+        const rect = element.getBoundingClientRect();
+        const distance = rect.top;
+        return distance;
+    }
+    static _smoothScrollIntoView(element, duration = 300) {
+        const targetPosition = element.getBoundingClientRect().top + (window.scrollY || window.pageYOffset);
+        const startPosition = window.scrollY || window.pageYOffset;
+        const distance = targetPosition - startPosition;
+        const startTime = performance.now();
+        function scrollStep(currentTime) {
+            const elapsed = currentTime - startTime;
+            const progress = Math.min(elapsed / duration, 1);
+            const scrollY = startPosition + distance * progress;
+            if (progress < 1) {
+                window.scrollTo(0, scrollY);
+                requestAnimationFrame(scrollStep);
+            }
+            else {
+                window.scrollTo(0, targetPosition);
+            }
+        }
+        requestAnimationFrame(scrollStep);
+    }
+    static {
+        ScrollSpy._elements = [];
+        ScrollSpy._elementsInView = [];
+        ScrollSpy._visibleElements = []; // Array.<cash>
+        ScrollSpy._count = 0;
+        ScrollSpy._increment = 0;
+        ScrollSpy._ticks = 0;
+    }
+}
+
+const _defaults$8 = {
+    edge: 'left',
+    draggable: true,
+    dragTargetWidth: '10px',
+    inDuration: 250,
+    outDuration: 200,
+    onOpenStart: null,
+    onOpenEnd: null,
+    onCloseStart: null,
+    onCloseEnd: null,
+    preventScrolling: true
+};
+class Sidenav extends Component {
+    id;
+    /** Describes open/close state of Sidenav. */
+    isOpen;
+    /** Describes if sidenav is fixed. */
+    isFixed;
+    /** Describes if Sidenav is being dragged. */
+    isDragged;
+    lastWindowWidth;
+    lastWindowHeight;
+    static _sidenavs;
+    _overlay;
+    dragTarget;
+    _startingXpos;
+    _xPos;
+    _time;
+    _width;
+    _initialScrollTop;
+    _verticallyScrolling;
+    deltaX;
+    velocityX;
+    percentOpen;
+    constructor(el, options) {
+        super(el, options, Sidenav);
+        this.el['M_Sidenav'] = this;
+        this.options = {
+            ...Sidenav.defaults,
+            ...options
+        };
+        this.id = this.el.id;
+        this.isOpen = false;
+        this.isFixed = this.el.classList.contains('sidenav-fixed');
+        this.isDragged = false;
+        // Window size variables for window resize checks
+        this.lastWindowWidth = window.innerWidth;
+        this.lastWindowHeight = window.innerHeight;
+        this._createOverlay();
+        this._createDragTarget();
+        this._setupEventHandlers();
+        this._setupClasses();
+        this._setupFixed();
+        Sidenav._sidenavs.push(this);
+    }
+    static get defaults() {
+        return _defaults$8;
+    }
+    /**
+     * Initializes instances of Sidenav.
+     * @param els HTML elements.
+     * @param options Component options.
+     */
+    static init(els, options = {}) {
+        return super.init(els, options, Sidenav);
+    }
+    static getInstance(el) {
+        return el['M_Sidenav'];
+    }
+    destroy() {
+        this._removeEventHandlers();
+        this._enableBodyScrolling();
+        this._overlay.parentNode.removeChild(this._overlay);
+        this.dragTarget.parentNode.removeChild(this.dragTarget);
+        this.el['M_Sidenav'] = undefined;
+        this.el.style.transform = '';
+        const index = Sidenav._sidenavs.indexOf(this);
+        if (index >= 0) {
+            Sidenav._sidenavs.splice(index, 1);
+        }
+    }
+    _createOverlay() {
+        this._overlay = document.createElement('div');
+        this._overlay.classList.add('sidenav-overlay');
+        this._overlay.addEventListener('click', this.close);
+        document.body.appendChild(this._overlay);
+    }
+    _setupEventHandlers() {
+        if (Sidenav._sidenavs.length === 0) {
+            document.body.addEventListener('click', this._handleTriggerClick);
+        }
+        const passiveIfSupported = null;
+        this.dragTarget.addEventListener('touchmove', this._handleDragTargetDrag, passiveIfSupported);
+        this.dragTarget.addEventListener('touchend', this._handleDragTargetRelease);
+        this._overlay.addEventListener('touchmove', this._handleCloseDrag, passiveIfSupported);
+        this._overlay.addEventListener('touchend', this._handleCloseRelease);
+        this.el.addEventListener('touchmove', this._handleCloseDrag); // , passiveIfSupported);
+        this.el.addEventListener('touchend', this._handleCloseRelease);
+        this.el.addEventListener('click', this._handleCloseTriggerClick);
+        // Add resize for side nav fixed
+        if (this.isFixed) {
+            window.addEventListener('resize', this._handleWindowResize);
+        }
+        /* Set aria-hidden state */
+        this._setAriaHidden();
+        this._setTabIndex();
+    }
+    _removeEventHandlers() {
+        if (Sidenav._sidenavs.length === 1) {
+            document.body.removeEventListener('click', this._handleTriggerClick);
+        }
+        this.dragTarget.removeEventListener('touchmove', this._handleDragTargetDrag);
+        this.dragTarget.removeEventListener('touchend', this._handleDragTargetRelease);
+        this._overlay.removeEventListener('touchmove', this._handleCloseDrag);
+        this._overlay.removeEventListener('touchend', this._handleCloseRelease);
+        this.el.removeEventListener('touchmove', this._handleCloseDrag);
+        this.el.removeEventListener('touchend', this._handleCloseRelease);
+        this.el.removeEventListener('click', this._handleCloseTriggerClick);
+        // Remove resize for side nav fixed
+        if (this.isFixed) {
+            window.removeEventListener('resize', this._handleWindowResize);
+        }
+    }
+    _handleTriggerClick(e) {
+        const trigger = e.target.closest('.sidenav-trigger');
+        if (e.target && trigger) {
+            const sidenavId = Utils.getIdFromTrigger(trigger);
+            const sidenavInstance = document.getElementById(sidenavId)['M_Sidenav'];
+            if (sidenavInstance) {
+                sidenavInstance.open();
+            }
+            e.preventDefault();
+        }
+    }
+    // Set variables needed at the beginning of drag and stop any current transition.
+    _startDrag(e) {
+        const clientX = e.targetTouches[0].clientX;
+        this.isDragged = true;
+        this._startingXpos = clientX;
+        this._xPos = this._startingXpos;
+        this._time = Date.now();
+        this._width = this.el.getBoundingClientRect().width;
+        this._overlay.style.display = 'block';
+        this._initialScrollTop = this.isOpen ? this.el.scrollTop : Utils.getDocumentScrollTop();
+        this._verticallyScrolling = false;
+    }
+    //Set variables needed at each drag move update tick
+    _dragMoveUpdate(e) {
+        const clientX = e.targetTouches[0].clientX;
+        const currentScrollTop = this.isOpen ? this.el.scrollTop : Utils.getDocumentScrollTop();
+        this.deltaX = Math.abs(this._xPos - clientX);
+        this._xPos = clientX;
+        this.velocityX = this.deltaX / (Date.now() - this._time);
+        this._time = Date.now();
+        if (this._initialScrollTop !== currentScrollTop) {
+            this._verticallyScrolling = true;
+        }
+    }
+    _handleDragTargetDrag = (e) => {
+        // Check if draggable
+        if (!this._isDraggable())
+            return;
+        let totalDeltaX = this._calculateDelta(e);
+        const dragDirection = totalDeltaX > 0 ? 'right' : 'left';
+        // Don't allow totalDeltaX to exceed Sidenav width or be dragged in the opposite direction
+        totalDeltaX = Math.min(this._width, Math.abs(totalDeltaX));
+        if (this.options.edge === dragDirection) {
+            totalDeltaX = 0;
+        }
+        /**
+         * transformX is the drag displacement
+         * transformPrefix is the initial transform placement
+         * Invert values if Sidenav is right edge
+         */
+        let transformX = totalDeltaX;
+        let transformPrefix = 'translateX(-100%)';
+        if (this.options.edge === 'right') {
+            transformPrefix = 'translateX(100%)';
+            transformX = -transformX;
+        }
+        // Calculate open/close percentage of sidenav, with open = 1 and close = 0
+        this.percentOpen = Math.min(1, totalDeltaX / this._width);
+        // Set transform and opacity styles
+        this.el.style.transform = `${transformPrefix} translateX(${transformX}px)`;
+        this._overlay.style.opacity = this.percentOpen.toString();
+    };
+    _handleDragTargetRelease = () => {
+        if (this.isDragged) {
+            if (this.percentOpen > 0.2) {
+                this.open();
+            }
+            else {
+                this._animateOut();
+            }
+            this.isDragged = false;
+            this._verticallyScrolling = false;
+        }
+    };
+    _handleCloseDrag = (e) => {
+        // Check if open and draggable
+        if (!this.isOpen || !this._isDraggable())
+            return;
+        let totalDeltaX = this._calculateDelta(e);
+        // dragDirection is the attempted user drag direction
+        const dragDirection = totalDeltaX > 0 ? 'right' : 'left';
+        totalDeltaX = Math.min(this._width, Math.abs(totalDeltaX));
+        if (this.options.edge !== dragDirection) {
+            totalDeltaX = 0;
+        }
+        let transformX = -totalDeltaX;
+        if (this.options.edge === 'right') {
+            transformX = -transformX;
+        }
+        // Calculate open/close percentage of sidenav, with open = 1 and close = 0
+        this.percentOpen = Math.min(1, 1 - totalDeltaX / this._width);
+        // Set transform and opacity styles
+        this.el.style.transform = `translateX(${transformX}px)`;
+        this._overlay.style.opacity = this.percentOpen.toString();
+    };
+    _calculateDelta = (e) => {
+        // If not being dragged, set initial drag start variables
+        if (!this.isDragged) {
+            this._startDrag(e);
+        }
+        // Run touchmove updates
+        this._dragMoveUpdate(e);
+        // Calculate raw deltaX
+        return this._xPos - this._startingXpos;
+    };
+    _handleCloseRelease = () => {
+        if (this.isOpen && this.isDragged) {
+            if (this.percentOpen > 0.8) {
+                this._animateIn();
+            }
+            else {
+                this.close();
+            }
+            this.isDragged = false;
+            this._verticallyScrolling = false;
+        }
+    };
+    // Handles closing of Sidenav when element with class .sidenav-close
+    _handleCloseTriggerClick = (e) => {
+        const closeTrigger = e.target.closest('.sidenav-close');
+        if (closeTrigger && !this._isCurrentlyFixed()) {
+            this.close();
+        }
+    };
+    _handleWindowResize = () => {
+        // Only handle horizontal resizes
+        if (this.lastWindowWidth !== window.innerWidth) {
+            if (window.innerWidth > 992) {
+                this.open();
+            }
+            else {
+                this.close();
+            }
+        }
+        this.lastWindowWidth = window.innerWidth;
+        this.lastWindowHeight = window.innerHeight;
+    };
+    _setupClasses() {
+        if (this.options.edge === 'right') {
+            this.el.classList.add('right-aligned');
+            this.dragTarget.classList.add('right-aligned');
+        }
+    }
+    _removeClasses() {
+        this.el.classList.remove('right-aligned');
+        this.dragTarget.classList.remove('right-aligned');
+    }
+    _setupFixed() {
+        if (this._isCurrentlyFixed())
+            this.open();
+    }
+    _isDraggable() {
+        return this.options.draggable && !this._isCurrentlyFixed() && !this._verticallyScrolling;
+    }
+    _isCurrentlyFixed() {
+        return this.isFixed && window.innerWidth > 992;
+    }
+    _createDragTarget() {
+        const dragTarget = document.createElement('div');
+        dragTarget.classList.add('drag-target');
+        dragTarget.style.width = this.options.dragTargetWidth;
+        document.body.appendChild(dragTarget);
+        this.dragTarget = dragTarget;
+    }
+    _preventBodyScrolling() {
+        document.body.style.overflow = 'hidden';
+    }
+    _enableBodyScrolling() {
+        document.body.style.overflow = '';
+    }
+    /**
+     * Opens Sidenav.
+     */
+    open = () => {
+        if (this.isOpen === true)
+            return;
+        this.isOpen = true;
+        // Run onOpenStart callback
+        if (typeof this.options.onOpenStart === 'function') {
+            this.options.onOpenStart.call(this, this.el);
+        }
+        // Handle fixed Sidenav
+        if (this._isCurrentlyFixed()) {
+            // Show if fixed
+            this.el.style.transform = 'translateX(0)';
+            this._enableBodyScrolling();
+            this._overlay.style.display = 'none';
+        }
+        // Handle non-fixed Sidenav
+        else {
+            if (this.options.preventScrolling)
+                this._preventBodyScrolling();
+            if (!this.isDragged || this.percentOpen != 1)
+                this._animateIn();
+            /* Set aria-hidden state */
+            this._setAriaHidden();
+            this._setTabIndex();
+        }
+    };
+    /**
+     * Closes Sidenav.
+     */
+    close = () => {
+        if (this.isOpen === false)
+            return;
+        this.isOpen = false;
+        // Run onCloseStart callback
+        if (typeof this.options.onCloseStart === 'function') {
+            this.options.onCloseStart.call(this, this.el);
+        }
+        // Handle fixed Sidenav
+        if (this._isCurrentlyFixed()) {
+            const transformX = this.options.edge === 'left' ? '-105%' : '105%';
+            this.el.style.transform = `translateX(${transformX})`;
+        }
+        // Handle non-fixed Sidenav
+        else {
+            this._enableBodyScrolling();
+            if (!this.isDragged || this.percentOpen != 0) {
+                this._animateOut();
+            }
+            else {
+                this._overlay.style.display = 'none';
+            }
+            /* Set aria-hidden state */
+            this._setAriaHidden();
+            this._setTabIndex();
+        }
+    };
+    _animateIn() {
+        this._animateSidenavIn();
+        this._animateOverlayIn();
+    }
+    _animateOut() {
+        this._animateSidenavOut();
+        this._animateOverlayOut();
+    }
+    _animateSidenavIn() {
+        let slideOutPercent = this.options.edge === 'left' ? -1 : 1;
+        if (this.isDragged) {
+            slideOutPercent =
+                this.options.edge === 'left'
+                    ? slideOutPercent + this.percentOpen
+                    : slideOutPercent - this.percentOpen;
+        }
+        const duration = this.options.inDuration;
+        // from
+        this.el.style.transition = 'none';
+        this.el.style.transform = 'translateX(' + slideOutPercent * 100 + '%)';
+        setTimeout(() => {
+            this.el.style.transition = `transform ${duration}ms ease`; // easeOutQuad
+            // to
+            this.el.style.transform = 'translateX(0)';
+        }, 1);
+        setTimeout(() => {
+            if (typeof this.options.onOpenEnd === 'function')
+                this.options.onOpenEnd.call(this, this.el);
+        }, duration);
+    }
+    _animateSidenavOut() {
+        const endPercent = this.options.edge === 'left' ? -1 : 1;
+        // let slideOutPercent = 0;
+        // if (this.isDragged) {
+        //   // @todo unused variable
+        //   slideOutPercent =
+        //     this.options.edge === 'left'
+        //       ? endPercent + this.percentOpen
+        //       : endPercent - this.percentOpen;
+        // }
+        const duration = this.options.outDuration;
+        this.el.style.transition = `transform ${duration}ms ease`; // easeOutQuad
+        // to
+        this.el.style.transform = 'translateX(' + endPercent * 100 + '%)';
+        setTimeout(() => {
+            if (typeof this.options.onCloseEnd === 'function')
+                this.options.onCloseEnd.call(this, this.el);
+        }, duration);
+    }
+    _animateOverlayIn() {
+        let start = 0;
+        if (this.isDragged)
+            start = this.percentOpen;
+        else
+            this._overlay.style.display = 'block';
+        // Animation
+        const duration = this.options.inDuration;
+        // from
+        this._overlay.style.transition = 'none';
+        this._overlay.style.opacity = start.toString();
+        // easeOutQuad
+        setTimeout(() => {
+            this._overlay.style.transition = `opacity ${duration}ms ease`;
+            // to
+            this._overlay.style.opacity = '1';
+        }, 1);
+    }
+    _animateOverlayOut() {
+        const duration = this.options.outDuration;
+        // easeOutQuad
+        this._overlay.style.transition = `opacity ${duration}ms ease`;
+        // to
+        this._overlay.style.opacity = '0';
+        setTimeout(() => {
+            this._overlay.style.display = 'none';
+        }, duration);
+    }
+    _setAriaHidden = () => {
+        this.el.ariaHidden = this.isOpen ? 'false' : 'true';
+        const navWrapper = document.querySelector('.nav-wrapper ul');
+        if (navWrapper)
+            navWrapper.ariaHidden = this.isOpen.toString();
+    };
+    _setTabIndex = () => {
+        const navLinks = document.querySelectorAll('.nav-wrapper ul li a');
+        const sideNavLinks = document.querySelectorAll('.sidenav li a');
+        if (navLinks)
+            navLinks.forEach((navLink) => {
+                navLink.tabIndex = this.isOpen ? -1 : 0;
+            });
+        if (sideNavLinks)
+            sideNavLinks.forEach((sideNavLink) => {
+                sideNavLink.tabIndex = this.isOpen ? 0 : -1;
+            });
+    };
+    static {
+        Sidenav._sidenavs = [];
+    }
+}
+
+const _defaults$7 = {
+    duration: 300,
+    onShow: null,
+    swipeable: false,
+    responsiveThreshold: Infinity // breakpoint for swipeable
+};
+class Tabs extends Component {
+    _tabLinks;
+    _index;
+    _indicator;
+    _tabWidth;
+    _tabsWidth;
+    _tabsCarousel;
+    _activeTabLink;
+    _content;
+    constructor(el, options) {
+        super(el, options, Tabs);
+        this.el['M_Tabs'] = this;
+        this.options = {
+            ...Tabs.defaults,
+            ...options
+        };
+        this._tabLinks = this.el.querySelectorAll('li.tab > a');
+        this._index = 0;
+        this._setupActiveTabLink();
+        if (this.options.swipeable) {
+            this._setupSwipeableTabs();
+        }
+        else {
+            this._setupNormalTabs();
+        }
+        // Setup tabs indicator after content to ensure accurate widths
+        this._setTabsAndTabWidth();
+        this._createIndicator();
+        this._setupEventHandlers();
+    }
+    static get defaults() {
+        return _defaults$7;
+    }
+    /**
+     * Initializes instances of Tabs.
+     * @param els HTML elements.
+     * @param options Component options.
+     */
+    static init(els, options = {}) {
+        return super.init(els, options, Tabs);
+    }
+    static getInstance(el) {
+        return el['M_Tabs'];
+    }
+    destroy() {
+        this._removeEventHandlers();
+        this._indicator.parentNode.removeChild(this._indicator);
+        if (this.options.swipeable) {
+            this._teardownSwipeableTabs();
+        }
+        else {
+            this._teardownNormalTabs();
+        }
+        this.el['M_Tabs'] = undefined;
+    }
+    /**
+     * The index of tab that is currently shown.
+     */
+    get index() {
+        return this._index;
+    }
+    _setupEventHandlers() {
+        window.addEventListener('resize', this._handleWindowResize);
+        this.el.addEventListener('click', this._handleTabClick);
+    }
+    _removeEventHandlers() {
+        window.removeEventListener('resize', this._handleWindowResize);
+        this.el.removeEventListener('click', this._handleTabClick);
+    }
+    _handleWindowResize = () => {
+        this._setTabsAndTabWidth();
+        if (this._tabWidth !== 0 && this._tabsWidth !== 0) {
+            this._indicator.style.left = this._calcLeftPos(this._activeTabLink) + 'px';
+            this._indicator.style.right = this._calcRightPos(this._activeTabLink) + 'px';
+        }
+    };
+    _handleTabClick = (e) => {
+        let tabLink = e.target;
+        if (!tabLink)
+            return;
+        let tab = tabLink.parentElement;
+        while (tab && !tab.classList.contains('tab')) {
+            tabLink = tabLink.parentElement;
+            tab = tab.parentElement;
+        }
+        // Handle click on tab link only
+        if (!tabLink || !tab.classList.contains('tab'))
+            return;
+        // is disabled?
+        if (tab.classList.contains('disabled')) {
+            e.preventDefault();
+            return;
+        }
+        // Act as regular link if target attribute is specified.
+        if (tabLink.hasAttribute('target'))
+            return;
+        // Make the old tab inactive.
+        this._activeTabLink.classList.remove('active');
+        const _oldContent = this._content;
+        // Update the variables with the new link and content
+        this._activeTabLink = tabLink;
+        if (tabLink.hash)
+            this._content = document.querySelector(tabLink.hash);
+        this._tabLinks = this.el.querySelectorAll('li.tab > a');
+        // Make the tab active
+        this._activeTabLink.classList.add('active');
+        const prevIndex = this._index;
+        this._index = Math.max(Array.from(this._tabLinks).indexOf(tabLink), 0);
+        // Swap content
+        if (this.options.swipeable) {
+            if (this._tabsCarousel) {
+                this._tabsCarousel.set(this._index, () => {
+                    if (typeof this.options.onShow === 'function')
+                        this.options.onShow.call(this, this._content);
+                });
+            }
+        }
+        else {
+            if (this._content) {
+                this._content.style.display = 'block';
+                this._content.classList.add('active');
+                if (typeof this.options.onShow === 'function')
+                    this.options.onShow.call(this, this._content);
+                if (_oldContent && _oldContent !== this._content) {
+                    _oldContent.style.display = 'none';
+                    _oldContent.classList.remove('active');
+                }
+            }
+        }
+        // Update widths after content is swapped (scrollbar bugfix)
+        this._setTabsAndTabWidth();
+        this._animateIndicator(prevIndex);
+        e.preventDefault();
+    };
+    _createIndicator() {
+        const indicator = document.createElement('li');
+        indicator.classList.add('indicator');
+        this.el.appendChild(indicator);
+        this._indicator = indicator;
+        this._indicator.style.left = this._calcLeftPos(this._activeTabLink) + 'px';
+        this._indicator.style.right = this._calcRightPos(this._activeTabLink) + 'px';
+    }
+    _setupActiveTabLink() {
+        // If the location.hash matches one of the links, use that as the active tab.
+        this._activeTabLink = Array.from(this._tabLinks).find((a) => a.getAttribute('href') === location.hash);
+        // If no match is found, use the first link or any with class 'active' as the initial active tab.
+        if (!this._activeTabLink) {
+            let activeTabLink = this.el.querySelector('li.tab a.active');
+            if (!activeTabLink) {
+                activeTabLink = this.el.querySelector('li.tab a');
+            }
+            this._activeTabLink = activeTabLink;
+        }
+        Array.from(this._tabLinks).forEach((a) => a.classList.remove('active'));
+        this._activeTabLink.classList.add('active');
+        this._index = Math.max(Array.from(this._tabLinks).indexOf(this._activeTabLink), 0);
+        if (this._activeTabLink && this._activeTabLink.hash) {
+            this._content = document.querySelector(this._activeTabLink.hash);
+            if (this._content)
+                this._content.classList.add('active');
+        }
+    }
+    _setupSwipeableTabs() {
+        // Change swipeable according to responsive threshold
+        if (window.innerWidth > this.options.responsiveThreshold)
+            this.options.swipeable = false;
+        const tabsContent = [];
+        this._tabLinks.forEach((a) => {
+            if (a.hash) {
+                const currContent = document.querySelector(a.hash);
+                currContent.classList.add('carousel-item');
+                tabsContent.push(currContent);
+            }
+        });
+        // Create Carousel-Wrapper around Tab-Contents
+        const tabsWrapper = document.createElement('div');
+        tabsWrapper.classList.add('tabs-content', 'carousel', 'carousel-slider');
+        // Wrap around
+        tabsContent[0].parentElement.insertBefore(tabsWrapper, tabsContent[0]);
+        tabsContent.forEach((tabContent) => {
+            tabsWrapper.appendChild(tabContent);
+            tabContent.style.display = '';
+        });
+        // Keep active tab index to set initial carousel slide
+        const tab = this._activeTabLink.parentElement;
+        const activeTabIndex = Array.from(tab.parentNode.children).indexOf(tab);
+        this._tabsCarousel = Carousel.init(tabsWrapper, {
+            fullWidth: true,
+            noWrap: true,
+            onCycleTo: (item) => {
+                const prevIndex = this._index;
+                this._index = Array.from(item.parentNode.children).indexOf(item);
+                this._activeTabLink.classList.remove('active');
+                this._activeTabLink = Array.from(this._tabLinks)[this._index];
+                this._activeTabLink.classList.add('active');
+                this._animateIndicator(prevIndex);
+                if (typeof this.options.onShow === 'function')
+                    this.options.onShow.call(this, this._content);
+            }
+        });
+        // Set initial carousel slide to active tab
+        this._tabsCarousel.set(activeTabIndex);
+    }
+    _teardownSwipeableTabs() {
+        const tabsWrapper = this._tabsCarousel.el;
+        this._tabsCarousel.destroy();
+        // Unwrap
+        tabsWrapper.append(tabsWrapper.parentElement);
+        tabsWrapper.remove();
+    }
+    _setupNormalTabs() {
+        // Hide Tabs Content
+        Array.from(this._tabLinks).forEach((a) => {
+            if (a === this._activeTabLink)
+                return;
+            if (a.hash) {
+                const currContent = document.querySelector(a.hash);
+                if (currContent)
+                    currContent.style.display = 'none';
+            }
+        });
+    }
+    _teardownNormalTabs() {
+        // show Tabs Content
+        this._tabLinks.forEach((a) => {
+            if (a.hash) {
+                const currContent = document.querySelector(a.hash);
+                if (currContent)
+                    currContent.style.display = '';
+            }
+        });
+    }
+    _setTabsAndTabWidth() {
+        this._tabsWidth = this.el.getBoundingClientRect().width;
+        this._tabWidth = Math.max(this._tabsWidth, this.el.scrollWidth) / this._tabLinks.length;
+    }
+    _calcRightPos(el) {
+        return Math.ceil(this._tabsWidth - el.offsetLeft - el.getBoundingClientRect().width);
+    }
+    _calcLeftPos(el) {
+        return Math.floor(el.offsetLeft);
+    }
+    /**
+     * Recalculate tab indicator position. This is useful when
+     * the indicator position is not correct.
+     */
+    updateTabIndicator() {
+        this._setTabsAndTabWidth();
+        this._animateIndicator(this._index);
+    }
+    _animateIndicator(prevIndex) {
+        let leftDelay = 0, rightDelay = 0;
+        const isMovingLeftOrStaying = this._index - prevIndex >= 0;
+        if (isMovingLeftOrStaying)
+            leftDelay = 90;
+        else
+            rightDelay = 90;
+        // in v1: easeOutQuad
+        this._indicator.style.transition = `
+      left ${this.options.duration}ms ease-out ${leftDelay}ms,
+      right ${this.options.duration}ms ease-out ${rightDelay}ms`;
+        this._indicator.style.left = this._calcLeftPos(this._activeTabLink) + 'px';
+        this._indicator.style.right = this._calcRightPos(this._activeTabLink) + 'px';
+    }
+    /**
+     * Show tab content that corresponds to the tab with the id.
+     * @param tabId The id of the tab that you want to switch to.
+     */
+    select(tabId) {
+        const tab = Array.from(this._tabLinks).find((a) => a.getAttribute('href') === '#' + tabId);
+        if (tab)
+            tab.click();
+    }
+}
+
+const _defaults$6 = {
+    onOpen: null,
+    onClose: null
+};
+class TapTarget extends Component {
+    /**
+     * If the tap target is open.
+     */
+    isOpen;
+    static _taptargets;
+    wrapper;
+    // private _origin: HTMLElement;
+    originEl;
+    waveEl;
+    contentEl;
+    constructor(el, options) {
+        super(el, options, TapTarget);
+        this.el['M_TapTarget'] = this;
+        this.options = {
+            ...TapTarget.defaults,
+            ...options
+        };
+        this.isOpen = false;
+        // setup
+        this.originEl = document.querySelector(`#${el.dataset.target}`);
+        this.originEl.tabIndex = 0;
+        this._setup();
+        this._calculatePositioning();
+        this._setupEventHandlers();
+        TapTarget._taptargets.push(this);
+    }
+    static get defaults() {
+        return _defaults$6;
+    }
+    /**
+     * Initializes instances of TapTarget.
+     * @param els HTML elements.
+     * @param options Component options.
+     */
+    static init(els, options = {}) {
+        return super.init(els, options, TapTarget);
+    }
+    static getInstance(el) {
+        return el['M_TapTarget'];
+    }
+    destroy() {
+        this._removeEventHandlers();
+        this.el['M_TapTarget'] = undefined;
+        const index = TapTarget._taptargets.indexOf(this);
+        if (index >= 0) {
+            TapTarget._taptargets.splice(index, 1);
+        }
+    }
+    _setupEventHandlers() {
+        this.originEl.addEventListener('click', this._handleTargetToggle);
+        this.originEl.addEventListener('keypress', this._handleKeyboardInteraction, true);
+        // this.originEl.addEventListener('click', this._handleOriginClick);
+        // Resize
+        window.addEventListener('resize', this._handleThrottledResize);
+    }
+    _removeEventHandlers() {
+        this.originEl.removeEventListener('click', this._handleTargetToggle);
+        this.originEl.removeEventListener('keypress', this._handleKeyboardInteraction, true);
+        // this.originEl.removeEventListener('click', this._handleOriginClick);
+        window.removeEventListener('resize', this._handleThrottledResize);
+    }
+    _handleThrottledResize = Utils.throttle(function () {
+        this._handleResize();
+    }, 200).bind(this);
+    _handleKeyboardInteraction = (e) => {
+        if (Utils.keys.ENTER.includes(e.key)) {
+            this._handleTargetToggle();
+        }
+    };
+    _handleTargetToggle = () => {
+        if (!this.isOpen)
+            this.open();
+        else
+            this.close();
+    };
+    /*_handleOriginClick = () => {
+      this.close();
+    }*/
+    _handleResize = () => {
+        this._calculatePositioning();
+    };
+    _handleDocumentClick = (e) => {
+        if (e.target.closest(`#${this.el.dataset.target}`) !== this.originEl &&
+            !e.target.closest('.tap-target-wrapper')) {
+            this.close();
+            // e.preventDefault();
+            // e.stopPropagation();
+        }
+    };
+    _setup() {
+        // Creating tap target
+        this.wrapper = this.el.parentElement;
+        this.waveEl = this.wrapper.querySelector('.tap-target-wave');
+        this.el.parentElement.ariaExpanded = 'false';
+        this.originEl.style.zIndex = '1002';
+        // this.originEl = this.wrapper.querySelector('.tap-target-origin');
+        this.contentEl = this.el.querySelector('.tap-target-content');
+        // Creating wrapper
+        if (!this.wrapper.classList.contains('.tap-target-wrapper')) {
+            this.wrapper = document.createElement('div');
+            this.wrapper.classList.add('tap-target-wrapper');
+            this.el.before(this.wrapper);
+            this.wrapper.append(this.el);
+        }
+        // Creating content
+        if (!this.contentEl) {
+            this.contentEl = document.createElement('div');
+            this.contentEl.classList.add('tap-target-content');
+            this.el.append(this.contentEl);
+        }
+        // Creating foreground wave
+        if (!this.waveEl) {
+            this.waveEl = document.createElement('div');
+            this.waveEl.classList.add('tap-target-wave');
+            // Creating origin
+            /*if (!this.originEl) {
+              this.originEl = <HTMLElement>this._origin.cloneNode(true); // .clone(true, true);
+              this.originEl.classList.add('tap-target-origin');
+              this.originEl.removeAttribute('id');
+              this.originEl.removeAttribute('style');
+              this.waveEl.append(this.originEl);
+            }*/
+            this.wrapper.append(this.waveEl);
+        }
+    }
+    _offset(el) {
+        const box = el.getBoundingClientRect();
+        const docElem = document.documentElement;
+        return {
+            top: box.top + window.pageYOffset - docElem.clientTop,
+            left: box.left + window.pageXOffset - docElem.clientLeft
+        };
+    }
+    _calculatePositioning() {
+        // Element or parent is fixed position?
+        let isFixed = getComputedStyle(this.originEl).position === 'fixed';
+        if (!isFixed) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            let currentElem = this.originEl;
+            const parents = [];
+            while ((currentElem = currentElem.parentNode) && currentElem !== document)
+                parents.push(currentElem);
+            for (let i = 0; i < parents.length; i++) {
+                isFixed = getComputedStyle(parents[i]).position === 'fixed';
+                if (isFixed)
+                    break;
+            }
+        }
+        // Calculating origin
+        const originWidth = this.originEl.offsetWidth;
+        const originHeight = this.originEl.offsetHeight;
+        const originTop = isFixed
+            ? this._offset(this.originEl).top - Utils.getDocumentScrollTop()
+            : this._offset(this.originEl).top;
+        const originLeft = isFixed
+            ? this._offset(this.originEl).left - Utils.getDocumentScrollLeft()
+            : this._offset(this.originEl).left;
+        // Calculating screen
+        const windowWidth = window.innerWidth;
+        const windowHeight = window.innerHeight;
+        const scrollBarWidth = windowWidth - document.documentElement.clientWidth;
+        const centerX = windowWidth / 2;
+        const centerY = windowHeight / 2;
+        const isLeft = originLeft <= centerX;
+        const isRight = originLeft > centerX;
+        const isTop = originTop <= centerY;
+        const isBottom = originTop > centerY;
+        const isCenterX = originLeft >= windowWidth * 0.25 && originLeft <= windowWidth * 0.75;
+        // Calculating tap target
+        const tapTargetWidth = this.el.offsetWidth;
+        const tapTargetHeight = this.el.offsetHeight;
+        const tapTargetTop = originTop + originHeight / 2 - tapTargetHeight / 2;
+        const tapTargetLeft = originLeft + originWidth / 2 - tapTargetWidth / 2;
+        const tapTargetPosition = isFixed ? 'fixed' : 'absolute';
+        // Calculating content
+        const tapTargetTextWidth = isCenterX ? tapTargetWidth : tapTargetWidth / 2 + originWidth;
+        const tapTargetTextHeight = tapTargetHeight / 2;
+        const tapTargetTextTop = isTop ? tapTargetHeight / 2 : 0;
+        const tapTargetTextBottom = 0;
+        const tapTargetTextLeft = isLeft && !isCenterX ? tapTargetWidth / 2 - originWidth : 0;
+        const tapTargetTextRight = 0;
+        const tapTargetTextPadding = originWidth;
+        const tapTargetTextAlign = isBottom ? 'bottom' : 'top';
+        // Calculating wave
+        const tapTargetWaveWidth = originWidth > originHeight ? originWidth * 2 : originWidth * 2;
+        const tapTargetWaveHeight = tapTargetWaveWidth;
+        const tapTargetWaveTop = tapTargetHeight / 2 - tapTargetWaveHeight / 2;
+        const tapTargetWaveLeft = tapTargetWidth / 2 - tapTargetWaveWidth / 2;
+        // Setting tap target
+        this.wrapper.style.top = isTop ? tapTargetTop + 'px' : '';
+        this.wrapper.style.right = isRight
+            ? windowWidth - tapTargetLeft - tapTargetWidth - scrollBarWidth + 'px'
+            : '';
+        this.wrapper.style.bottom = isBottom
+            ? windowHeight - tapTargetTop - tapTargetHeight + 'px'
+            : '';
+        this.wrapper.style.left = isLeft ? tapTargetLeft + 'px' : '';
+        this.wrapper.style.position = tapTargetPosition;
+        // Setting content
+        this.contentEl.style.width = tapTargetTextWidth + 'px';
+        this.contentEl.style.height = tapTargetTextHeight + 'px';
+        this.contentEl.style.top = tapTargetTextTop + 'px';
+        this.contentEl.style.right = tapTargetTextRight + 'px';
+        this.contentEl.style.bottom = tapTargetTextBottom + 'px';
+        this.contentEl.style.left = tapTargetTextLeft + 'px';
+        this.contentEl.style.padding = tapTargetTextPadding + 'px';
+        this.contentEl.style.verticalAlign = tapTargetTextAlign;
+        // Setting wave
+        this.waveEl.style.top = tapTargetWaveTop + 'px';
+        this.waveEl.style.left = tapTargetWaveLeft + 'px';
+        this.waveEl.style.width = tapTargetWaveWidth + 'px';
+        this.waveEl.style.height = tapTargetWaveHeight + 'px';
+    }
+    /**
+     * Open Tap Target.
+     */
+    open = () => {
+        if (this.isOpen)
+            return;
+        // onOpen callback
+        if (typeof this.options.onOpen === 'function') {
+            this.options.onOpen.call(this, this.originEl);
+        }
+        this.isOpen = true;
+        this.wrapper.classList.add('open');
+        this.wrapper.ariaExpanded = 'true';
+        document.body.addEventListener('click', this._handleDocumentClick, true);
+        document.body.addEventListener('keypress', this._handleDocumentClick, true);
+        document.body.addEventListener('touchend', this._handleDocumentClick);
+    };
+    /**
+     * Close Tap Target.
+     */
+    close = () => {
+        if (!this.isOpen)
+            return;
+        // onClose callback
+        if (typeof this.options.onClose === 'function') {
+            this.options.onClose.call(this, this.originEl);
+        }
+        this.isOpen = false;
+        this.wrapper.classList.remove('open');
+        this.wrapper.ariaExpanded = 'false';
+        document.body.removeEventListener('click', this._handleDocumentClick, true);
+        document.body.removeEventListener('keypress', this._handleDocumentClick, true);
+        document.body.removeEventListener('touchend', this._handleDocumentClick);
+    };
+    static {
+        TapTarget._taptargets = [];
+    }
+}
+
+const _defaults$5 = {
+    dialRadius: 135,
+    outerRadius: 105,
+    innerRadius: 70,
+    tickRadius: 20,
+    duration: 350,
+    container: null,
+    defaultTime: 'now', // default time, 'now' or '13:14' e.g.
+    fromNow: 0, // Millisecond offset from the defaultTime
+    showClearBtn: false,
+    autoSubmit: true,
+    // internationalization
+    i18n: {
+        cancel: 'Cancel',
+        clear: 'Clear',
+        done: 'Ok'
+    },
+    twelveHour: true, // change to 12 hour AM/PM clock from 24 hour
+    vibrate: true, // vibrate the device when dragging clock hand
+    // Callbacks
+    onSelect: null,
+    onInputInteraction: null,
+    onDone: null,
+    onCancel: null,
+};
+class Timepicker extends Component {
+    id;
+    containerEl;
+    plate;
+    digitalClock;
+    inputHours;
+    inputMinutes;
+    x0;
+    y0;
+    moved;
+    dx;
+    dy;
+    /**
+     * Current view on the timepicker.
+     * @default 'hours'
+     */
+    currentView;
+    hand;
+    minutesView;
+    hours;
+    minutes;
+    /** The selected time. */
+    time;
+    /**
+     * If the time is AM or PM on twelve-hour clock.
+     * @default 'PM'
+     */
+    amOrPm;
+    static _template;
+    /** Vibrate device when dragging clock hand. */
+    vibrate;
+    _canvas;
+    hoursView;
+    spanAmPm;
+    footer;
+    _amBtn;
+    _pmBtn;
+    bg;
+    bearing;
+    g;
+    toggleViewTimer;
+    vibrateTimer;
+    constructor(el, options) {
+        super(el, options, Timepicker);
+        this.el['M_Timepicker'] = this;
+        this.options = {
+            ...Timepicker.defaults,
+            ...options
+        };
+        this.id = Utils.guid();
+        this._insertHTMLIntoDOM();
+        this._setupVariables();
+        this._setupEventHandlers();
+        this._clockSetup();
+        this._pickerSetup();
+    }
+    static get defaults() {
+        return _defaults$5;
+    }
+    /**
+     * Initializes instances of Timepicker.
+     * @param els HTML elements.
+     * @param options Component options.
+     */
+    static init(els, options = {}) {
+        return super.init(els, options, Timepicker);
+    }
+    static _addLeadingZero(num) {
+        return (num < 10 ? '0' : '') + num;
+    }
+    static _createSVGEl(name) {
+        const svgNS = 'http://www.w3.org/2000/svg';
+        return document.createElementNS(svgNS, name);
+    }
+    static _Pos(e) {
+        if (e.type.startsWith('touch') && e.targetTouches.length >= 1) {
+            return {
+                x: e.targetTouches[0].clientX,
+                y: e.targetTouches[0].clientY
+            };
+        }
+        // mouse event
+        return { x: e.clientX, y: e.clientY };
+    }
+    static getInstance(el) {
+        return el['M_Timepicker'];
+    }
+    destroy() {
+        this._removeEventHandlers();
+        this.containerEl.remove();
+        this.el['M_Timepicker'] = undefined;
+    }
+    _setupEventHandlers() {
+        this.el.addEventListener('click', this._handleInputClick);
+        this.el.addEventListener('keydown', this._handleInputKeydown);
+        this.plate.addEventListener('mousedown', this._handleClockClickStart);
+        this.plate.addEventListener('touchstart', this._handleClockClickStart);
+        this.digitalClock.addEventListener('keyup', this._inputFromTextField);
+        this.inputHours.addEventListener('focus', () => this.showView('hours'));
+        this.inputHours.addEventListener('focusout', () => this.formatHours());
+        this.inputMinutes.addEventListener('focus', () => this.showView('minutes'));
+        this.inputMinutes.addEventListener('focusout', () => this.formatMinutes());
+    }
+    _removeEventHandlers() {
+        this.el.removeEventListener('click', this._handleInputClick);
+        this.el.removeEventListener('keydown', this._handleInputKeydown);
+    }
+    _handleInputClick = () => {
+        this.inputHours.focus();
+        if (typeof this.options.onInputInteraction === 'function')
+            this.options.onInputInteraction.call(this);
+    };
+    _handleInputKeydown = (e) => {
+        if (Utils.keys.ENTER.includes(e.key)) {
+            e.preventDefault();
+            this.inputHours.focus();
+            if (typeof this.options.onInputInteraction === 'function')
+                this.options.onInputInteraction.call(this);
+        }
+    };
+    _handleTimeInputEnterKey = (e) => {
+        if (Utils.keys.ENTER.includes(e.key)) {
+            e.preventDefault();
+            this._inputFromTextField();
+        }
+    };
+    _handleClockClickStart = (e) => {
+        e.preventDefault();
+        const clockPlateBR = this.plate.getBoundingClientRect();
+        const offset = { x: clockPlateBR.left, y: clockPlateBR.top };
+        this.x0 = offset.x + this.options.dialRadius;
+        this.y0 = offset.y + this.options.dialRadius;
+        this.moved = false;
+        const clickPos = Timepicker._Pos(e);
+        this.dx = clickPos.x - this.x0;
+        this.dy = clickPos.y - this.y0;
+        // Set clock hands
+        this.setHand(this.dx, this.dy, false);
+        // Mousemove on document
+        document.addEventListener('mousemove', this._handleDocumentClickMove);
+        document.addEventListener('touchmove', this._handleDocumentClickMove);
+        // Mouseup on document
+        document.addEventListener('mouseup', this._handleDocumentClickEnd);
+        document.addEventListener('touchend', this._handleDocumentClickEnd);
+    };
+    _handleDocumentClickMove = (e) => {
+        e.preventDefault();
+        const clickPos = Timepicker._Pos(e);
+        const x = clickPos.x - this.x0;
+        const y = clickPos.y - this.y0;
+        this.moved = true;
+        this.setHand(x, y, false);
+    };
+    _handleDocumentClickEnd = (e) => {
+        e.preventDefault();
+        document.removeEventListener('mouseup', this._handleDocumentClickEnd);
+        document.removeEventListener('touchend', this._handleDocumentClickEnd);
+        const clickPos = Timepicker._Pos(e);
+        const x = clickPos.x - this.x0;
+        const y = clickPos.y - this.y0;
+        if (this.moved && x === this.dx && y === this.dy) {
+            this.setHand(x, y);
+        }
+        if (this.currentView === 'hours') {
+            this.inputMinutes.focus();
+            this.showView('minutes', this.options.duration / 2);
+        }
+        else {
+            // this.minutesView.classList.add('timepicker-dial-out');
+            setTimeout(() => {
+                if (this.options.autoSubmit)
+                    this.done();
+            }, this.options.duration / 2);
+        }
+        if (typeof this.options.onSelect === 'function') {
+            this.options.onSelect.call(this, this.hours, this.minutes);
+        }
+        // Unbind mousemove event
+        document.removeEventListener('mousemove', this._handleDocumentClickMove);
+        document.removeEventListener('touchmove', this._handleDocumentClickMove);
+    };
+    _insertHTMLIntoDOM() {
+        const template = document.createElement('template');
+        template.innerHTML = Timepicker._template.trim();
+        this.containerEl = template.content.firstChild;
+        this.containerEl.id = 'container-' + this.id;
+        // Append popover to input by default
+        const optEl = this.options.container;
+        const containerEl = optEl instanceof HTMLElement ? optEl : document.querySelector(optEl);
+        if (this.options.container && !!containerEl) {
+            containerEl.append(this.containerEl);
+        }
+        else {
+            this.el.parentElement.appendChild(this.containerEl);
+        }
+    }
+    _setupVariables() {
+        this.currentView = 'hours';
+        this.vibrate = navigator.vibrate
+            ? 'vibrate'
+            : navigator['webkitVibrate']
+                ? 'webkitVibrate'
+                : null;
+        this._canvas = this.containerEl.querySelector('.timepicker-canvas');
+        this.plate = this.containerEl.querySelector('.timepicker-plate');
+        this.digitalClock = this.containerEl.querySelector('.timepicker-display-column');
+        this.hoursView = this.containerEl.querySelector('.timepicker-hours');
+        this.minutesView = this.containerEl.querySelector('.timepicker-minutes');
+        this.inputHours = this.containerEl.querySelector('.timepicker-input-hours');
+        this.inputMinutes = this.containerEl.querySelector('.timepicker-input-minutes');
+        this.spanAmPm = this.containerEl.querySelector('.timepicker-span-am-pm');
+        this.footer = this.containerEl.querySelector('.timepicker-footer');
+        this.amOrPm = 'PM';
+    }
+    _createButton(text, visibility) {
+        const button = document.createElement('button');
+        button.classList.add('btn', 'btn-flat', 'waves-effect', 'text');
+        button.style.visibility = visibility;
+        button.type = 'button';
+        button.tabIndex = -1;
+        button.innerText = text;
+        return button;
+    }
+    _pickerSetup() {
+        const clearButton = this._createButton(this.options.i18n.clear, this.options.showClearBtn ? '' : 'hidden');
+        clearButton.classList.add('timepicker-clear');
+        clearButton.addEventListener('click', this.clear);
+        this.footer.appendChild(clearButton);
+        if (!this.options.autoSubmit) {
+            const confirmationBtnsContainer = document.createElement('div');
+            confirmationBtnsContainer.classList.add('confirmation-btns');
+            this.footer.append(confirmationBtnsContainer);
+            const cancelButton = this._createButton(this.options.i18n.cancel, '');
+            cancelButton.classList.add('timepicker-close');
+            cancelButton.addEventListener('click', this.close);
+            confirmationBtnsContainer.appendChild(cancelButton);
+            const doneButton = this._createButton(this.options.i18n.done, '');
+            doneButton.classList.add('timepicker-close');
+            doneButton.addEventListener('click', this.done);
+            confirmationBtnsContainer.appendChild(doneButton);
+        }
+        this._updateTimeFromInput();
+        this.showView('hours');
+    }
+    _clockSetup() {
+        if (this.options.twelveHour) {
+            // AM Button
+            this._amBtn = document.createElement('div');
+            this._amBtn.classList.add('am-btn', 'btn');
+            this._amBtn.innerText = 'AM';
+            this._amBtn.tabIndex = 0;
+            this._amBtn.addEventListener('click', this._handleAmPmClick);
+            this._amBtn.addEventListener('keypress', this._handleAmPmKeypress);
+            this.spanAmPm.appendChild(this._amBtn);
+            // PM Button
+            this._pmBtn = document.createElement('div');
+            this._pmBtn.classList.add('pm-btn', 'btn');
+            this._pmBtn.innerText = 'PM';
+            this._pmBtn.tabIndex = 0;
+            this._pmBtn.addEventListener('click', this._handleAmPmClick);
+            this._pmBtn.addEventListener('keypress', this._handleAmPmKeypress);
+            this.spanAmPm.appendChild(this._pmBtn);
+        }
+        this._buildHoursView();
+        this._buildMinutesView();
+        this._buildSVGClock();
+    }
+    _buildSVGClock() {
+        // Draw clock hands and others
+        const dialRadius = this.options.dialRadius;
+        const tickRadius = this.options.tickRadius;
+        const diameter = dialRadius * 2;
+        const svg = Timepicker._createSVGEl('svg');
+        svg.setAttribute('class', 'timepicker-svg');
+        svg.setAttribute('width', diameter.toString());
+        svg.setAttribute('height', diameter.toString());
+        const g = Timepicker._createSVGEl('g');
+        g.setAttribute('transform', 'translate(' + dialRadius + ',' + dialRadius + ')');
+        const bearing = Timepicker._createSVGEl('circle');
+        bearing.setAttribute('class', 'timepicker-canvas-bearing');
+        bearing.setAttribute('cx', '0');
+        bearing.setAttribute('cy', '0');
+        bearing.setAttribute('r', '4');
+        const hand = Timepicker._createSVGEl('line');
+        hand.setAttribute('x1', '0');
+        hand.setAttribute('y1', '0');
+        const bg = Timepicker._createSVGEl('circle');
+        bg.setAttribute('class', 'timepicker-canvas-bg');
+        bg.setAttribute('r', tickRadius.toString());
+        g.appendChild(hand);
+        g.appendChild(bg);
+        g.appendChild(bearing);
+        svg.appendChild(g);
+        this._canvas.appendChild(svg);
+        this.hand = hand;
+        this.bg = bg;
+        this.bearing = bearing;
+        this.g = g;
+    }
+    _buildHoursView() {
+        // const $tick = document.createElement('div');
+        // $tick.classList.add('timepicker-tick');
+        // Hours view
+        if (this.options.twelveHour) {
+            for (let i = 1; i < 13; i += 1) {
+                // const tick = <HTMLElement>$tick.cloneNode(true);
+                const radian = (i / 6) * Math.PI;
+                const radius = this.options.outerRadius;
+                this._buildHoursTick(i, radian, radius);
+            }
+        }
+        else {
+            for (let i = 0; i < 24; i += 1) {
+                // const tick = <HTMLElement>$tick.cloneNode(true);
+                const radian = (i / 6) * Math.PI;
+                const inner = i > 0 && i < 13;
+                const radius = inner ? this.options.innerRadius : this.options.outerRadius;
+                this._buildHoursTick(i, radian, radius);
+            }
+        }
+    }
+    _buildHoursTick(i, radian, radius) {
+        const tick = document.createElement('div');
+        tick.classList.add('timepicker-tick');
+        tick.style.left =
+            this.options.dialRadius + Math.sin(radian) * radius - this.options.tickRadius + 'px';
+        tick.style.top =
+            this.options.dialRadius - Math.cos(radian) * radius - this.options.tickRadius + 'px';
+        tick.innerHTML = i === 0 ? '00' : i.toString();
+        this.hoursView.appendChild(tick);
+    }
+    _buildMinutesView() {
+        const _tick = document.createElement('div');
+        _tick.classList.add('timepicker-tick');
+        // Minutes view
+        for (let i = 0; i < 60; i += 5) {
+            const tick = _tick.cloneNode(true);
+            const radian = (i / 30) * Math.PI;
+            tick.style.left =
+                this.options.dialRadius +
+                    Math.sin(radian) * this.options.outerRadius -
+                    this.options.tickRadius +
+                    'px';
+            tick.style.top =
+                this.options.dialRadius -
+                    Math.cos(radian) * this.options.outerRadius -
+                    this.options.tickRadius +
+                    'px';
+            tick.innerHTML = Timepicker._addLeadingZero(i);
+            this.minutesView.appendChild(tick);
+        }
+    }
+    _handleAmPmClick = (e) => {
+        this._handleAmPmInteraction(e.target);
+    };
+    _handleAmPmKeypress = (e) => {
+        if (Utils.keys.ENTER.includes(e.key)) {
+            this._handleAmPmInteraction(e.target);
+        }
+    };
+    _handleAmPmInteraction = (e) => {
+        this.amOrPm = e.classList.contains('am-btn') ? 'AM' : 'PM';
+        this._updateAmPmView();
+    };
+    _updateAmPmView() {
+        if (this.options.twelveHour) {
+            if (this.amOrPm === 'PM') {
+                this._amBtn.classList.remove('filled');
+                this._pmBtn.classList.add('filled');
+            }
+            else if (this.amOrPm === 'AM') {
+                this._amBtn.classList.add('filled');
+                this._pmBtn.classList.remove('filled');
+            }
+        }
+    }
+    _updateTimeFromInput() {
+        // Get the time
+        let value = ((this.el.value || this.options.defaultTime || '') + '').split(':');
+        if (this.options.twelveHour && !(typeof value[1] === 'undefined')) {
+            if (value[1].toUpperCase().indexOf('AM') > 0) {
+                this.amOrPm = 'AM';
+            }
+            else {
+                this.amOrPm = 'PM';
+            }
+            value[1] = value[1].replace('AM', '').replace('PM', '');
+        }
+        if (value[0] === 'now') {
+            const now = new Date(+new Date() + this.options.fromNow);
+            value = [now.getHours().toString(), now.getMinutes().toString()];
+            if (this.options.twelveHour) {
+                this.amOrPm = parseInt(value[0]) >= 12 && parseInt(value[0]) < 24 ? 'PM' : 'AM';
+            }
+        }
+        this.hours = +value[0] || 0;
+        this.minutes = +value[1] || 0;
+        this.inputHours.value = Timepicker._addLeadingZero(this.hours);
+        this.inputMinutes.value = Timepicker._addLeadingZero(this.minutes);
+        this._updateAmPmView();
+    }
+    /**
+     * Show hours or minutes view on timepicker.
+     * @param view The name of the view you want to switch to, 'hours' or 'minutes'.
+     * @param delay
+     */
+    showView = (view, delay = null) => {
+        if (view === 'minutes' && getComputedStyle(this.hoursView).visibility === 'visible') ;
+        const isHours = view === 'hours', nextView = isHours ? this.hoursView : this.minutesView, hideView = isHours ? this.minutesView : this.hoursView;
+        this.currentView = view;
+        /*if (isHours) {
+          this.inputHours.classList.add('text-primary');
+          this.inputMinutes.classList.remove('text-primary');
+        } else {
+          this.inputHours.classList.remove('text-primary');
+          this.inputMinutes.classList.add('text-primary');
+        }*/
+        // Transition view
+        hideView.classList.add('timepicker-dial-out');
+        nextView.style.visibility = 'visible';
+        nextView.classList.remove('timepicker-dial-out');
+        // Reset clock hand
+        this.resetClock(delay);
+        // After transitions ended
+        clearTimeout(this.toggleViewTimer);
+        this.toggleViewTimer = setTimeout(() => {
+            hideView.style.visibility = 'hidden';
+        }, this.options.duration);
+    };
+    resetClock(delay) {
+        const view = this.currentView, value = this[view], isHours = view === 'hours', unit = Math.PI / (isHours ? 6 : 30), radian = value * unit, radius = isHours && value > 0 && value < 13 ? this.options.innerRadius : this.options.outerRadius, x = Math.sin(radian) * radius, y = -Math.cos(radian) * radius;
+        if (delay) {
+            this._canvas?.classList.add('timepicker-canvas-out');
+            setTimeout(() => {
+                this._canvas?.classList.remove('timepicker-canvas-out');
+                this.setHand(x, y);
+            }, delay);
+        }
+        else {
+            this.setHand(x, y);
+        }
+    }
+    _inputFromTextField = () => {
+        const isHours = this.currentView === 'hours';
+        if (isHours && this.inputHours.value !== '') {
+            const value = parseInt(this.inputHours.value);
+            if (value > 0 && value < (this.options.twelveHour ? 13 : 24)) {
+                this.hours = value;
+            }
+            else {
+                this.setHoursDefault();
+            }
+            this.drawClockFromTimeInput(this.hours, isHours);
+        }
+        else if (!isHours && this.inputMinutes.value !== '') {
+            const value = parseInt(this.inputMinutes.value);
+            if (value >= 0 && value < 60) {
+                this.minutes = value;
+            }
+            else {
+                this.minutes = new Date().getMinutes();
+                this.inputMinutes.value = this.minutes.toString();
+            }
+            this.drawClockFromTimeInput(this.minutes, isHours);
+        }
+    };
+    drawClockFromTimeInput(value, isHours) {
+        const unit = Math.PI / (isHours ? 6 : 30);
+        const radian = value * unit;
+        let radius;
+        if (this.options.twelveHour) {
+            radius = this.options.outerRadius;
+        }
+        else {
+            radius =
+                isHours && value > 0 && value < 13 ? this.options.innerRadius : this.options.outerRadius;
+        }
+        this.setClockAttributes(radian, radius);
+    }
+    setHand(x, y, roundBy5 = false) {
+        const isHours = this.currentView === 'hours', unit = Math.PI / (isHours || roundBy5 ? 6 : 30), z = Math.sqrt(x * x + y * y), inner = isHours && z < (this.options.outerRadius + this.options.innerRadius) / 2;
+        let radian = Math.atan2(x, -y), radius = inner ? this.options.innerRadius : this.options.outerRadius;
+        if (this.options.twelveHour) {
+            radius = this.options.outerRadius;
+        }
+        // Radian should in range [0, 2PI]
+        if (radian < 0) {
+            radian = Math.PI * 2 + radian;
+        }
+        // Get the round value
+        let value = Math.round(radian / unit);
+        // Get the round radian
+        radian = value * unit;
+        // Correct the hours or minutes
+        if (this.options.twelveHour) {
+            if (isHours) {
+                if (value === 0)
+                    value = 12;
+            }
+            else {
+                if (roundBy5)
+                    value *= 5;
+                if (value === 60)
+                    value = 0;
+            }
+        }
+        else {
+            if (isHours) {
+                if (value === 12) {
+                    value = 0;
+                }
+                value = inner ? (value === 0 ? 12 : value) : value === 0 ? 0 : value + 12;
+            }
+            else {
+                if (roundBy5) {
+                    value *= 5;
+                }
+                if (value === 60) {
+                    value = 0;
+                }
+            }
+        }
+        // Once hours or minutes changed, vibrate the device
+        if (this[this.currentView] !== value) {
+            if (this.vibrate && this.options.vibrate) {
+                // Do not vibrate too frequently
+                if (!this.vibrateTimer) {
+                    navigator[this.vibrate](10);
+                    this.vibrateTimer = setTimeout(() => {
+                        this.vibrateTimer = null;
+                    }, 100);
+                }
+            }
+        }
+        this[this.currentView] = value;
+        if (isHours) {
+            this.inputHours.value = Timepicker._addLeadingZero(value);
+        }
+        else {
+            this.inputMinutes.value = Timepicker._addLeadingZero(value);
+        }
+        // Set clock hand and others' position
+        this.setClockAttributes(radian, radius);
+    }
+    setClockAttributes(radian, radius) {
+        const cx1 = Math.sin(radian) * (radius - this.options.tickRadius), cy1 = -Math.cos(radian) * (radius - this.options.tickRadius), cx2 = Math.sin(radian) * radius, cy2 = -Math.cos(radian) * radius;
+        this.hand.setAttribute('x2', cx1.toString());
+        this.hand.setAttribute('y2', cy1.toString());
+        this.bg.setAttribute('cx', cx2.toString());
+        this.bg.setAttribute('cy', cy2.toString());
+    }
+    formatHours() {
+        if (this.inputHours.value == '')
+            this.setHoursDefault();
+        this.inputHours.value = Timepicker._addLeadingZero(Number(this.inputHours.value));
+    }
+    formatMinutes() {
+        if (this.inputMinutes.value == '')
+            this.minutes = new Date().getMinutes();
+        this.inputMinutes.value = Timepicker._addLeadingZero(Number(this.inputMinutes.value));
+    }
+    setHoursDefault() {
+        this.hours = new Date().getHours();
+        this.inputHours.value = (this.hours % (this.options.twelveHour ? 12 : 24)).toString();
+    }
+    done = (clearValue = null) => {
+        // Set input value
+        const last = this.el.value;
+        let value = clearValue
+            ? ''
+            : Timepicker._addLeadingZero(this.hours) + ':' + Timepicker._addLeadingZero(this.minutes);
+        this.time = value;
+        if (!clearValue && this.options.twelveHour) {
+            value = `${value} ${this.amOrPm}`;
+        }
+        this.el.value = value;
+        // Trigger change event
+        if (value !== last) {
+            this.el.dispatchEvent(new Event('change', { bubbles: true, cancelable: true, composed: true }));
+        }
+    };
+    confirm = () => {
+        this.done();
+        if (typeof this.options.onDone === 'function') {
+            setTimeout(() => {
+                this.options.onDone.call(this);
+            }, this.options.duration / 2);
+        }
+    };
+    cancel = () => {
+        this.clear();
+        if (typeof this.options.onDone === 'function')
+            this.options.onCancel.call(this);
+    };
+    clear = () => {
+        this.done(true);
+    };
+    // deprecated
+    open() {
+        console.warn('Timepicker.close() is deprecated. Remove this method and wrap in modal yourself.');
+        return this;
+    }
+    close() {
+        console.warn('Timepicker.close() is deprecated. Remove this method and wrap in modal yourself.');
+        return this;
+    }
+    static {
+        Timepicker._template = `<div class="timepicker-container">
+          <div class="timepicker-digital-display">
+            <div class="timepicker-text-container">
+              <div class="timepicker-display-column timepicker-display-digital-clock">
+                <div class="timepicker-input-hours-wrapper">
+                  <input type="text" maxlength="2" class="timepicker-input-hours text-primary" />
+                </div>
+                <div class="timepicker-input-divider-wrapper">
+                  <span class="timepicker-input-divider">:</span>
+                </div>
+                <div class="timepicker-input-minutes-wrapper">
+                  <input type="text" maxlength="2" class="timepicker-input-minutes" />
+                </div>
+              </div>
+              <div class="timepicker-display-column timepicker-display-am-pm">
+                <div class="timepicker-span-am-pm"></div>
+              </div>
+            </div>
+          </div>
+          <div class="timepicker-analog-display">
+            <div class="timepicker-plate">
+              <div class="timepicker-canvas"></div>
+              <div class="timepicker-dial timepicker-hours"></div>
+              <div class="timepicker-dial timepicker-minutes timepicker-dial-out"></div>
+            </div>
+            <div class="timepicker-footer"></div>
+          </div>
+        </div>`;
+    }
+}
+
+const _defaults$4 = {
+    exitDelay: 200,
+    enterDelay: 0,
+    text: '',
+    margin: 5,
+    inDuration: 250,
+    outDuration: 200,
+    position: 'bottom',
+    transitionMovement: 10,
+    opacity: 1
+};
+class Tooltip extends Component {
+    /**
+     * If tooltip is open.
+     */
+    isOpen;
+    /**
+     * If tooltip is hovered.
+     */
+    isHovered;
+    /**
+     * If tooltip is focused.
+     */
+    isFocused;
+    tooltipEl;
+    _exitDelayTimeout;
+    _enterDelayTimeout;
+    xMovement;
+    yMovement;
+    constructor(el, options) {
+        super(el, options, Tooltip);
+        this.el['M_Tooltip'] = this;
+        this.options = {
+            ...Tooltip.defaults,
+            ...this._getAttributeOptions(),
+            ...options
+        };
+        this.isOpen = false;
+        this.isHovered = false;
+        this.isFocused = false;
+        this._appendTooltipEl();
+        this._setupEventHandlers();
+    }
+    static get defaults() {
+        return _defaults$4;
+    }
+    /**
+     * Initializes instances of Tooltip.
+     * @param els HTML elements.
+     * @param options Component options.
+     */
+    static init(els, options = {}) {
+        return super.init(els, options, Tooltip);
+    }
+    static getInstance(el) {
+        return el['M_Tooltip'];
+    }
+    destroy() {
+        this.tooltipEl.remove();
+        this._removeEventHandlers();
+        this.el['M_Tooltip'] = undefined;
+    }
+    _appendTooltipEl() {
+        this.tooltipEl = document.createElement('div');
+        this.tooltipEl.classList.add('material-tooltip');
+        const tooltipContentEl = this.options.tooltipId
+            ? document.getElementById(this.options.tooltipId)
+            : document.createElement('div');
+        this.tooltipEl.append(tooltipContentEl);
+        tooltipContentEl.style.display = '';
+        tooltipContentEl.classList.add('tooltip-content');
+        this._setTooltipContent(tooltipContentEl);
+        this.tooltipEl.appendChild(tooltipContentEl);
+        document.body.appendChild(this.tooltipEl);
+    }
+    _setTooltipContent(tooltipContentEl) {
+        if (this.options.tooltipId)
+            return;
+        tooltipContentEl.innerText = this.options.text;
+    }
+    _updateTooltipContent() {
+        this._setTooltipContent(this.tooltipEl.querySelector('.tooltip-content'));
+    }
+    _setupEventHandlers() {
+        this.el.addEventListener('mouseenter', this._handleMouseEnter);
+        this.el.addEventListener('mouseleave', this._handleMouseLeave);
+        this.el.addEventListener('focus', this._handleFocus, true);
+        this.el.addEventListener('blur', this._handleBlur, true);
+    }
+    _removeEventHandlers() {
+        this.el.removeEventListener('mouseenter', this._handleMouseEnter);
+        this.el.removeEventListener('mouseleave', this._handleMouseLeave);
+        this.el.removeEventListener('focus', this._handleFocus, true);
+        this.el.removeEventListener('blur', this._handleBlur, true);
+    }
+    /**
+     * Show tooltip.
+     */
+    open = (isManual) => {
+        if (this.isOpen)
+            return;
+        isManual = isManual === undefined ? true : undefined; // Default value true
+        this.isOpen = true;
+        // Update tooltip content with HTML attribute options
+        this.options = { ...this.options, ...this._getAttributeOptions() };
+        this._updateTooltipContent();
+        this._setEnterDelayTimeout(isManual);
+    };
+    /**
+     * Hide tooltip.
+     */
+    close = () => {
+        if (!this.isOpen)
+            return;
+        this.isHovered = false;
+        this.isFocused = false;
+        this.isOpen = false;
+        this._setExitDelayTimeout();
+    };
+    _setExitDelayTimeout() {
+        clearTimeout(this._exitDelayTimeout);
+        this._exitDelayTimeout = setTimeout(() => {
+            if (this.isHovered || this.isFocused)
+                return;
+            this._animateOut();
+        }, this.options.exitDelay);
+    }
+    _setEnterDelayTimeout(isManual) {
+        clearTimeout(this._enterDelayTimeout);
+        this._enterDelayTimeout = setTimeout(() => {
+            if (!this.isHovered && !this.isFocused && !isManual)
+                return;
+            this._animateIn();
+        }, this.options.enterDelay);
+    }
+    _positionTooltip() {
+        const tooltip = this.tooltipEl;
+        const origin = this.el, originHeight = origin.offsetHeight, originWidth = origin.offsetWidth, tooltipHeight = tooltip.offsetHeight, tooltipWidth = tooltip.offsetWidth, margin = this.options.margin;
+        this.xMovement = 0;
+        this.yMovement = 0;
+        let targetTop = origin.getBoundingClientRect().top + Utils.getDocumentScrollTop();
+        let targetLeft = origin.getBoundingClientRect().left + Utils.getDocumentScrollLeft();
+        if (this.options.position === 'top') {
+            targetTop += -tooltipHeight - margin;
+            targetLeft += originWidth / 2 - tooltipWidth / 2;
+            this.yMovement = -this.options.transitionMovement;
+        }
+        else if (this.options.position === 'right') {
+            targetTop += originHeight / 2 - tooltipHeight / 2;
+            targetLeft += originWidth + margin;
+            this.xMovement = this.options.transitionMovement;
+        }
+        else if (this.options.position === 'left') {
+            targetTop += originHeight / 2 - tooltipHeight / 2;
+            targetLeft += -tooltipWidth - margin;
+            this.xMovement = -this.options.transitionMovement;
+        }
+        else {
+            targetTop += originHeight + margin;
+            targetLeft += originWidth / 2 - tooltipWidth / 2;
+            this.yMovement = this.options.transitionMovement;
+        }
+        const newCoordinates = this._repositionWithinScreen(targetLeft, targetTop, tooltipWidth, tooltipHeight);
+        tooltip.style.top = newCoordinates.y + 'px';
+        tooltip.style.left = newCoordinates.x + 'px';
+    }
+    _repositionWithinScreen(x, y, width, height) {
+        const scrollLeft = Utils.getDocumentScrollLeft();
+        const scrollTop = Utils.getDocumentScrollTop();
+        let newX = x - scrollLeft;
+        let newY = y - scrollTop;
+        const bounding = {
+            left: newX,
+            top: newY,
+            width: width,
+            height: height
+        };
+        const offset = this.options.margin + this.options.transitionMovement;
+        const edges = Utils.checkWithinContainer(document.body, bounding, offset);
+        if (edges.left) {
+            newX = offset;
+        }
+        else if (edges.right) {
+            newX -= newX + width - window.innerWidth;
+        }
+        if (edges.top) {
+            newY = offset;
+        }
+        else if (edges.bottom) {
+            newY -= newY + height - window.innerHeight;
+        }
+        return {
+            x: newX + scrollLeft,
+            y: newY + scrollTop
+        };
+    }
+    _animateIn() {
+        this._positionTooltip();
+        this.tooltipEl.style.visibility = 'visible';
+        const duration = this.options.inDuration;
+        // easeOutCubic
+        this.tooltipEl.style.transition = `
+      transform ${duration}ms ease-out,
+      opacity ${duration}ms ease-out`;
+        setTimeout(() => {
+            this.tooltipEl.style.transform = `translateX(${this.xMovement}px) translateY(${this.yMovement}px)`;
+            this.tooltipEl.style.opacity = (this.options.opacity || 1).toString();
+        }, 1);
+    }
+    _animateOut() {
+        const duration = this.options.outDuration;
+        // easeOutCubic
+        this.tooltipEl.style.transition = `
+      transform ${duration}ms ease-out,
+      opacity ${duration}ms ease-out`;
+        setTimeout(() => {
+            this.tooltipEl.style.transform = `translateX(0px) translateY(0px)`;
+            this.tooltipEl.style.opacity = '0';
+        }, 1);
+        /*
+        anim.remove(this.tooltipEl);
+        anim({
+          targets: this.tooltipEl,
+          opacity: 0,
+          translateX: 0,
+          translateY: 0,
+          duration: this.options.outDuration,
+          easing: 'easeOutCubic'
+        });
+        */
+    }
+    _handleMouseEnter = () => {
+        this.isHovered = true;
+        this.isFocused = false; // Allows close of tooltip when opened by focus.
+        this.open(false);
+    };
+    _handleMouseLeave = () => {
+        this.isHovered = false;
+        this.isFocused = false; // Allows close of tooltip when opened by focus.
+        this.close();
+    };
+    _handleFocus = () => {
+        if (Utils.tabPressed) {
+            this.isFocused = true;
+            this.open(false);
+        }
+    };
+    _handleBlur = () => {
+        this.isFocused = false;
+        this.close();
+    };
+    _getAttributeOptions() {
+        const attributeOptions = {};
+        const tooltipTextOption = this.el.getAttribute('data-tooltip');
+        const tooltipId = this.el.getAttribute('data-tooltip-id');
+        const positionOption = this.el.getAttribute('data-position');
+        if (tooltipTextOption) {
+            attributeOptions.text = tooltipTextOption;
+        }
+        if (positionOption) {
+            attributeOptions.position = positionOption;
+        }
+        if (tooltipId) {
+            attributeOptions.tooltipId = tooltipId;
+        }
+        return attributeOptions;
+    }
+}
+
+class Waves {
+    static _offset(el) {
+        const box = el.getBoundingClientRect();
+        const docElem = document.documentElement;
+        return {
+            top: box.top + window.pageYOffset - docElem.clientTop,
+            left: box.left + window.pageXOffset - docElem.clientLeft
+        };
+    }
+    // https://phoenix-dx.com/css-techniques-for-material-ripple-effect/
+    static renderWaveEffect(targetElement, position = null, color = null) {
+        const isCentered = position === null;
+        const duration = 500;
+        let animationFrame, animationStart;
+        const animationStep = function (timestamp) {
+            if (!animationStart) {
+                animationStart = timestamp;
+            }
+            const frame = timestamp - animationStart;
+            if (frame < duration) {
+                const easing = (frame / duration) * (2 - frame / duration);
+                const circle = isCentered
+                    ? 'circle at 50% 50%'
+                    : `circle at ${position.x}px ${position.y}px`;
+                const waveColor = `rgba(${color?.r || 0}, ${color?.g || 0}, ${color?.b || 0}, ${0.3 * (1 - easing)})`;
+                const stop = 90 * easing + '%';
+                targetElement.style.backgroundImage =
+                    'radial-gradient(' +
+                        circle +
+                        ', ' +
+                        waveColor +
+                        ' ' +
+                        stop +
+                        ', transparent ' +
+                        stop +
+                        ')';
+                animationFrame = window.requestAnimationFrame(animationStep);
+            }
+            else {
+                targetElement.style.backgroundImage = 'none';
+                window.cancelAnimationFrame(animationFrame);
+            }
+        };
+        animationFrame = window.requestAnimationFrame(animationStep);
+    }
+    static Init() {
+        if (typeof document !== 'undefined')
+            document?.addEventListener('DOMContentLoaded', () => {
+                document.body.addEventListener('click', (e) => {
+                    const trigger = e.target;
+                    const el = trigger.closest('.waves-effect');
+                    if (el && el.contains(trigger)) {
+                        const isCircular = el.classList.contains('waves-circle');
+                        const x = e.pageX - Waves._offset(el).left;
+                        const y = e.pageY - Waves._offset(el).top;
+                        let color = null;
+                        if (el.classList.contains('waves-light'))
+                            color = { r: 255, g: 255, b: 255 };
+                        Waves.renderWaveEffect(el, isCircular ? null : { x, y }, color);
+                    }
+                });
+            });
+    }
+}
+
+const _defaults$3 = {};
+// TODO: !!!!!
+class Range extends Component {
+    _mousedown;
+    value;
+    thumb;
+    constructor(el, options) {
+        super(el, options, Range);
+        this.el['M_Range'] = this;
+        this.options = {
+            ...Range.defaults,
+            ...options
+        };
+        this._mousedown = false;
+        this._setupThumb();
+        this._setupEventHandlers();
+    }
+    static get defaults() {
+        return _defaults$3;
+    }
+    /**
+     * Initializes instances of Range.
+     * @param els HTML elements.
+     * @param options Component options.
+     */
+    static init(els, options = {}) {
+        return super.init(els, options, Range);
+    }
+    static getInstance(el) {
+        return el['M_Range'];
+    }
+    destroy() {
+        this._removeEventHandlers();
+        this._removeThumb();
+        this.el['M_Range'] = undefined;
+    }
+    _setupEventHandlers() {
+        this.el.addEventListener('change', this._handleRangeChange);
+        this.el.addEventListener('mousedown', this._handleRangeMousedownTouchstart);
+        this.el.addEventListener('touchstart', this._handleRangeMousedownTouchstart);
+        this.el.addEventListener('input', this._handleRangeInputMousemoveTouchmove);
+        this.el.addEventListener('mousemove', this._handleRangeInputMousemoveTouchmove);
+        this.el.addEventListener('touchmove', this._handleRangeInputMousemoveTouchmove);
+        this.el.addEventListener('mouseup', this._handleRangeMouseupTouchend);
+        this.el.addEventListener('touchend', this._handleRangeMouseupTouchend);
+        this.el.addEventListener('blur', this._handleRangeBlurMouseoutTouchleave);
+        this.el.addEventListener('mouseout', this._handleRangeBlurMouseoutTouchleave);
+        this.el.addEventListener('touchleave', this._handleRangeBlurMouseoutTouchleave);
+    }
+    _removeEventHandlers() {
+        this.el.removeEventListener('change', this._handleRangeChange);
+        this.el.removeEventListener('mousedown', this._handleRangeMousedownTouchstart);
+        this.el.removeEventListener('touchstart', this._handleRangeMousedownTouchstart);
+        this.el.removeEventListener('input', this._handleRangeInputMousemoveTouchmove);
+        this.el.removeEventListener('mousemove', this._handleRangeInputMousemoveTouchmove);
+        this.el.removeEventListener('touchmove', this._handleRangeInputMousemoveTouchmove);
+        this.el.removeEventListener('mouseup', this._handleRangeMouseupTouchend);
+        this.el.removeEventListener('touchend', this._handleRangeMouseupTouchend);
+        this.el.removeEventListener('blur', this._handleRangeBlurMouseoutTouchleave);
+        this.el.removeEventListener('mouseout', this._handleRangeBlurMouseoutTouchleave);
+        this.el.removeEventListener('touchleave', this._handleRangeBlurMouseoutTouchleave);
+    }
+    _handleRangeChange = () => {
+        this.value.innerHTML = this.el.value;
+        if (!this.thumb.classList.contains('active')) {
+            this._showRangeBubble();
+        }
+        const offsetLeft = this._calcRangeOffset();
+        this.thumb.classList.add('active');
+        this.thumb.style.left = offsetLeft + 'px';
+    };
+    _handleRangeMousedownTouchstart = (e) => {
+        // Set indicator value
+        this.value.innerHTML = this.el.value;
+        this._mousedown = true;
+        this.el.classList.add('active');
+        if (!this.thumb.classList.contains('active')) {
+            this._showRangeBubble();
+        }
+        if (e.type !== 'input') {
+            const offsetLeft = this._calcRangeOffset();
+            this.thumb.classList.add('active');
+            this.thumb.style.left = offsetLeft + 'px';
+        }
+    };
+    _handleRangeInputMousemoveTouchmove = () => {
+        if (this._mousedown) {
+            if (!this.thumb.classList.contains('active')) {
+                this._showRangeBubble();
+            }
+            const offsetLeft = this._calcRangeOffset();
+            this.thumb.classList.add('active');
+            this.thumb.style.left = offsetLeft + 'px';
+            this.value.innerHTML = this.el.value;
+        }
+    };
+    _handleRangeMouseupTouchend = () => {
+        this._mousedown = false;
+        this.el.classList.remove('active');
+    };
+    _handleRangeBlurMouseoutTouchleave = () => {
+        if (!this._mousedown) {
+            const paddingLeft = parseInt(getComputedStyle(this.el).paddingLeft);
+            const marginLeftText = 7 + paddingLeft + 'px';
+            if (this.thumb.classList.contains('active')) {
+                const duration = 100;
+                // from
+                this.thumb.style.transition = 'none';
+                setTimeout(() => {
+                    this.thumb.style.transition = `
+            height ${duration}ms ease,
+            width ${duration}ms ease,
+            top ${duration}ms ease,
+            margin ${duration}ms ease
+          `;
+                    // to
+                    this.thumb.style.height = '0';
+                    this.thumb.style.width = '0';
+                    this.thumb.style.top = '0';
+                    this.thumb.style.marginLeft = marginLeftText;
+                }, 1);
+            }
+            this.thumb.classList.remove('active');
+        }
+    };
+    _setupThumb() {
+        this.thumb = document.createElement('span');
+        this.value = document.createElement('span');
+        this.thumb.classList.add('thumb');
+        this.value.classList.add('value');
+        this.thumb.append(this.value);
+        this.el.after(this.thumb);
+    }
+    _removeThumb() {
+        this.thumb.remove();
+    }
+    _showRangeBubble() {
+        const paddingLeft = parseInt(getComputedStyle(this.thumb.parentElement).paddingLeft);
+        const marginLeftText = -7 + paddingLeft + 'px'; // TODO: fix magic number?
+        const duration = 300;
+        // easeOutQuint
+        this.thumb.style.transition = `
+      height ${duration}ms ease,
+      width ${duration}ms ease,
+      top ${duration}ms ease,
+      margin ${duration}ms ease
+    `;
+        // to
+        this.thumb.style.height = '30px';
+        this.thumb.style.width = '30px';
+        this.thumb.style.top = '-30px';
+        this.thumb.style.marginLeft = marginLeftText;
+    }
+    _calcRangeOffset() {
+        const width = this.el.getBoundingClientRect().width - 15;
+        const max = parseFloat(this.el.getAttribute('max')) || 100; // Range default max
+        const min = parseFloat(this.el.getAttribute('min')) || 0; // Range default min
+        const percent = (parseFloat(this.el.value) - min) / (max - min);
+        return percent * width;
+    }
+    /**
+     * Initializes every range input in the current document.
+     */
+    static Init() {
+        if (typeof document !== 'undefined')
+            Range.init(document?.querySelectorAll('input[type=range]'), {});
+    }
+}
+
+const _defaults$2 = Object.freeze({});
+class CharacterCounter extends Component {
+    /** Stores the reference to the counter HTML element. */
+    counterEl;
+    /** Specifies whether the input is valid or not. */
+    isInvalid;
+    /** Specifies whether the input text has valid length or not. */
+    isValidLength;
+    constructor(el, options) {
+        super(el, {}, CharacterCounter);
+        this.el['M_CharacterCounter'] = this;
+        this.options = {
+            ...CharacterCounter.defaults,
+            ...options
+        };
+        this.isInvalid = false;
+        this.isValidLength = false;
+        this._setupCounter();
+        this._setupEventHandlers();
+    }
+    static get defaults() {
+        return _defaults$2;
+    }
+    /**
+     * Initializes instances of CharacterCounter.
+     * @param els HTML elements.
+     * @param options Component options.
+     */
+    static init(els, options = {}) {
+        return super.init(els, options, CharacterCounter);
+    }
+    static getInstance(el) {
+        return el['M_CharacterCounter'];
+    }
+    destroy() {
+        this._removeEventHandlers();
+        this.el['CharacterCounter'] = undefined;
+        this._removeCounter();
+    }
+    _setupEventHandlers() {
+        this.el.addEventListener('focus', this.updateCounter, true);
+        this.el.addEventListener('input', this.updateCounter, true);
+    }
+    _removeEventHandlers() {
+        this.el.removeEventListener('focus', this.updateCounter, true);
+        this.el.removeEventListener('input', this.updateCounter, true);
+    }
+    _setupCounter() {
+        this.counterEl = document.createElement('span');
+        this.counterEl.classList.add('character-counter');
+        this.counterEl.style.float = 'right';
+        this.counterEl.style.fontSize = '12px';
+        this.counterEl.style.height = '1';
+        this.el.parentElement.appendChild(this.counterEl);
+    }
+    _removeCounter() {
+        this.counterEl.remove();
+    }
+    updateCounter = () => {
+        const maxLength = parseInt(this.el.getAttribute('maxlength')), actualLength = this.el.value.length;
+        this.isValidLength = actualLength <= maxLength;
+        let counterString = actualLength.toString();
+        if (maxLength) {
+            counterString += '/' + maxLength;
+            this._validateInput();
+        }
+        this.counterEl.innerHTML = counterString;
+    };
+    _validateInput() {
+        if (this.isValidLength && this.isInvalid) {
+            this.isInvalid = false;
+            this.el.classList.remove('invalid');
+        }
+        else if (!this.isValidLength && !this.isInvalid) {
+            this.isInvalid = true;
+            this.el.classList.remove('valid');
+            this.el.classList.add('invalid');
+        }
+    }
+}
+
+const _defaults$1 = {
+    indicators: true,
+    height: 400,
+    duration: 500,
+    interval: 6000,
+    pauseOnFocus: true,
+    pauseOnHover: true,
+    indicatorLabelFunc: null // Function which will generate a label for the indicators (ARIA)
+};
+class Slider extends Component {
+    /** Index of current slide. */
+    activeIndex;
+    interval;
+    eventPause;
+    _slider;
+    _slides;
+    _activeSlide;
+    _indicators;
+    _hovered;
+    _focused;
+    _focusCurrent;
+    _sliderId;
+    constructor(el, options) {
+        super(el, options, Slider);
+        this.el['M_Slider'] = this;
+        this.options = {
+            ...Slider.defaults,
+            ...options
+        };
+        // init props
+        this.interval = null;
+        this.eventPause = false;
+        this._hovered = false;
+        this._focused = false;
+        this._focusCurrent = false;
+        // setup
+        this._slider = this.el.querySelector('.slides');
+        this._slides = Array.from(this._slider.querySelectorAll('li'));
+        this.activeIndex = this._slides.findIndex((li) => li.classList.contains('active'));
+        if (this.activeIndex !== -1) {
+            this._activeSlide = this._slides[this.activeIndex];
+        }
+        this._setSliderHeight();
+        // Sets element id if it does not have one
+        if (this._slider.hasAttribute('id'))
+            this._sliderId = this._slider.getAttribute('id');
+        else {
+            this._sliderId = 'slider-' + Utils.guid();
+            this._slider.setAttribute('id', this._sliderId);
+        }
+        const placeholderBase64 = 'data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
+        // Set initial positions of captions
+        this._slides.forEach((slide) => {
+            // Caption
+            //const caption = <HTMLElement|null>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 = `<button type="button" class="indicator-item-btn" aria-label="${label}" aria-controls="${this._sliderId}"></button>`;
+                arrLi.push(li);
+                ul.append(li);
+            });
+            this.el.append(ul);
+            this._indicators = arrLi;
+        }
+    }
+    _removeIndicators() {
+        this.el.querySelector('ul.indicators').remove(); //find('ul.indicators').remove();
+    }
+    set(index) {
+        // Wrap around indices.
+        if (index >= this._slides.length)
+            index = 0;
+        else if (index < 0)
+            index = this._slides.length - 1;
+        // Only do if index changes
+        if (this.activeIndex === index)
+            return;
+        this._activeSlide = this._slides[this.activeIndex];
+        const _caption = this._activeSlide.querySelector('.caption');
+        this._activeSlide.classList.remove('active');
+        // Enables every slide
+        this._slides.forEach((slide) => (slide.style.visibility = 'visible'));
+        //--- Hide active Slide + Caption
+        this._activeSlide.style.opacity = '0';
+        setTimeout(() => {
+            this._slides.forEach((slide) => {
+                if (slide.classList.contains('active'))
+                    return;
+                slide.style.opacity = '0';
+                slide.style.transform = 'translate(0, 0)';
+                // Disables invisible slides (for assistive technologies)
+                slide.style.visibility = 'hidden';
+            });
+        }, this.options.duration);
+        // Hide active Caption
+        //this._animateCaptionIn(_caption, this.options.duration);
+        _caption.style.opacity = '0';
+        // Update indicators
+        if (this.options.indicators) {
+            const activeIndicator = this._indicators[this.activeIndex].children[0];
+            const nextIndicator = this._indicators[index].children[0];
+            activeIndicator.classList.remove('active');
+            nextIndicator.classList.add('active');
+            if (typeof this.options.indicatorLabelFunc === 'function') {
+                activeIndicator.ariaLabel = this.options.indicatorLabelFunc.call(this, this.activeIndex, false);
+                nextIndicator.ariaLabel = this.options.indicatorLabelFunc.call(this, index, true);
+            }
+        }
+        //--- Show new Slide + Caption
+        this._animateSlide(this._slides[index], true);
+        this._slides[index].classList.add('active');
+        this.activeIndex = index;
+        // Reset interval, if allowed. This check prevents autostart
+        // when slider is paused, since it can be changed though indicators.
+        if (this.interval != null) {
+            this.start();
+        }
+    }
+    _pause(fromEvent) {
+        clearInterval(this.interval);
+        this.eventPause = fromEvent;
+        this.interval = null;
+    }
+    /**
+     * Pause slider autoslide.
+     */
+    pause = () => {
+        this._pause(false);
+    };
+    /**
+     * Start slider autoslide.
+     */
+    start = () => {
+        clearInterval(this.interval);
+        this.interval = setInterval(this._handleInterval, this.options.duration + this.options.interval);
+        this.eventPause = false;
+    };
+    /**
+     * Move to next slider.
+     */
+    next = () => {
+        let newIndex = this.activeIndex + 1;
+        // Wrap around indices.
+        if (newIndex >= this._slides.length)
+            newIndex = 0;
+        else if (newIndex < 0)
+            newIndex = this._slides.length - 1;
+        this.set(newIndex);
+    };
+    /**
+     * Move to prev slider.
+     */
+    prev = () => {
+        let newIndex = this.activeIndex - 1;
+        // Wrap around indices.
+        if (newIndex >= this._slides.length)
+            newIndex = 0;
+        else if (newIndex < 0)
+            newIndex = this._slides.length - 1;
+        this.set(newIndex);
+    };
+}
+
+const _defaults = {
+    text: '',
+    displayLength: 4000,
+    inDuration: 300,
+    outDuration: 375,
+    classes: '',
+    completeCallback: null,
+    activationPercent: 0.8
+};
+class Toast {
+    /** The toast element. */
+    el;
+    /**
+     * The remaining amount of time in ms that the toast
+     * will stay before dismissal.
+     */
+    timeRemaining;
+    /**
+     * Describes the current pan state of the Toast.
+     */
+    panning;
+    options;
+    message;
+    counterInterval;
+    wasSwiped;
+    startingXPos;
+    xPos;
+    time;
+    deltaX;
+    velocityX;
+    static _toasts;
+    static _container;
+    static _draggedToast;
+    constructor(options) {
+        this.options = {
+            ...Toast.defaults,
+            ...options
+        };
+        this.message = this.options.text;
+        this.panning = false;
+        this.timeRemaining = this.options.displayLength;
+        if (Toast._toasts.length === 0) {
+            Toast._createContainer();
+        }
+        // Create new toast
+        Toast._toasts.push(this);
+        const toastElement = this._createToast();
+        toastElement['M_Toast'] = this;
+        this.el = toastElement;
+        this._animateIn();
+        this._setTimer();
+    }
+    static get defaults() {
+        return _defaults;
+    }
+    static getInstance(el) {
+        return el['M_Toast'];
+    }
+    static _createContainer() {
+        const container = document.createElement('div');
+        container.setAttribute('id', 'toast-container');
+        // Add event handler
+        container.addEventListener('touchstart', Toast._onDragStart);
+        container.addEventListener('touchmove', Toast._onDragMove);
+        container.addEventListener('touchend', Toast._onDragEnd);
+        container.addEventListener('mousedown', Toast._onDragStart);
+        document.addEventListener('mousemove', Toast._onDragMove);
+        document.addEventListener('mouseup', Toast._onDragEnd);
+        document.body.appendChild(container);
+        Toast._container = container;
+    }
+    static _removeContainer() {
+        document.removeEventListener('mousemove', Toast._onDragMove);
+        document.removeEventListener('mouseup', Toast._onDragEnd);
+        Toast._container.remove();
+        Toast._container = null;
+    }
+    static _onDragStart(e) {
+        if (e.target && e.target.closest('.toast')) {
+            const toastElem = e.target.closest('.toast');
+            const toast = toastElem['M_Toast'];
+            toast.panning = true;
+            Toast._draggedToast = toast;
+            toast.el.classList.add('panning');
+            toast.el.style.transition = '';
+            toast.startingXPos = Toast._xPos(e);
+            toast.time = Date.now();
+            toast.xPos = Toast._xPos(e);
+        }
+    }
+    static _onDragMove(e) {
+        if (!!Toast._draggedToast) {
+            e.preventDefault();
+            const toast = Toast._draggedToast;
+            toast.deltaX = Math.abs(toast.xPos - Toast._xPos(e));
+            toast.xPos = Toast._xPos(e);
+            toast.velocityX = toast.deltaX / (Date.now() - toast.time);
+            toast.time = Date.now();
+            const totalDeltaX = toast.xPos - toast.startingXPos;
+            const activationDistance = toast.el.offsetWidth * toast.options.activationPercent;
+            toast.el.style.transform = `translateX(${totalDeltaX}px)`;
+            toast.el.style.opacity = (1 - Math.abs(totalDeltaX / activationDistance)).toString();
+        }
+    }
+    static _onDragEnd() {
+        if (!!Toast._draggedToast) {
+            const toast = Toast._draggedToast;
+            toast.panning = false;
+            toast.el.classList.remove('panning');
+            const totalDeltaX = toast.xPos - toast.startingXPos;
+            const activationDistance = toast.el.offsetWidth * toast.options.activationPercent;
+            const shouldBeDismissed = Math.abs(totalDeltaX) > activationDistance || toast.velocityX > 1;
+            // Remove toast
+            if (shouldBeDismissed) {
+                toast.wasSwiped = true;
+                toast.dismiss();
+                // Animate toast back to original position
+            }
+            else {
+                toast.el.style.transition = 'transform .2s, opacity .2s';
+                toast.el.style.transform = '';
+                toast.el.style.opacity = '';
+            }
+            Toast._draggedToast = null;
+        }
+    }
+    static _xPos(e) {
+        if (e.type.startsWith('touch') && e.targetTouches.length >= 1) {
+            return e.targetTouches[0].clientX;
+        }
+        // mouse event
+        return e.clientX;
+    }
+    /**
+     * dismiss all toasts.
+     */
+    static dismissAll() {
+        for (const toastIndex in Toast._toasts) {
+            Toast._toasts[toastIndex].dismiss();
+        }
+    }
+    _createToast() {
+        let toast = this.options.toastId
+            ? document.getElementById(this.options.toastId)
+            : document.createElement('div');
+        if (toast instanceof HTMLTemplateElement) {
+            const node = toast.content.cloneNode(true);
+            toast = node.firstElementChild;
+        }
+        toast.classList.add('toast');
+        toast.setAttribute('role', 'alert');
+        toast.setAttribute('aria-live', 'assertive');
+        toast.setAttribute('aria-atomic', 'true');
+        // Add custom classes onto toast
+        if (this.options.classes.length > 0) {
+            toast.classList.add(...this.options.classes.split(' '));
+        }
+        if (this.message)
+            toast.innerText = this.message;
+        Toast._container.appendChild(toast);
+        return toast;
+    }
+    _animateIn() {
+        // Animate toast in
+        this.el.style.display = '';
+        this.el.style.opacity = '0';
+        // easeOutCubic
+        this.el.style.transition = `
+      top ${this.options.inDuration}ms ease,
+      opacity ${this.options.inDuration}ms ease
+    `;
+        setTimeout(() => {
+            this.el.style.top = '0';
+            this.el.style.opacity = '1';
+        }, 1);
+    }
+    /**
+     * Create setInterval which automatically removes toast when timeRemaining >= 0
+     * has been reached.
+     */
+    _setTimer() {
+        if (this.timeRemaining !== Infinity) {
+            this.counterInterval = setInterval(() => {
+                // If toast is not being dragged, decrease its time remaining
+                if (!this.panning) {
+                    this.timeRemaining -= 20;
+                }
+                // Animate toast out
+                if (this.timeRemaining <= 0) {
+                    this.dismiss();
+                }
+            }, 20);
+        }
+    }
+    /**
+     * Dismiss toast with animation.
+     */
+    dismiss() {
+        clearInterval(this.counterInterval);
+        const activationDistance = this.el.offsetWidth * this.options.activationPercent;
+        if (this.wasSwiped) {
+            this.el.style.transition = 'transform .05s, opacity .05s';
+            this.el.style.transform = `translateX(${activationDistance}px)`;
+            this.el.style.opacity = '0';
+        }
+        // easeOutExpo
+        this.el.style.transition = `
+      margin ${this.options.outDuration}ms ease,
+      opacity ${this.options.outDuration}ms ease`;
+        setTimeout(() => {
+            this.el.style.opacity = '0';
+            this.el.style.marginTop = '-40px';
+        }, 1);
+        setTimeout(() => {
+            // Call the optional callback
+            if (typeof this.options.completeCallback === 'function') {
+                this.options.completeCallback();
+            }
+            // Remove toast from DOM
+            if (this.el.id != this.options.toastId) {
+                this.el.remove();
+                Toast._toasts.splice(Toast._toasts.indexOf(this), 1);
+                if (Toast._toasts.length === 0) {
+                    Toast._removeContainer();
+                }
+            }
+        }, this.options.outDuration);
+    }
+    static {
+        Toast._toasts = [];
+        Toast._container = null;
+        Toast._draggedToast = null;
+    }
+}
+
+/* eslint-disable @typescript-eslint/no-unused-vars */
+const version = '2.2.1';
+/**
+ * Automatically initialize components.
+ * @param context Root element to initialize. Defaults to `document.body`.
+ * @param options Options for each component.
+ */
+function AutoInit(context = document.body, options) {
+    const registry = {
+        Autocomplete: context.querySelectorAll('.autocomplete:not(.no-autoinit)'),
+        Cards: context.querySelectorAll('.cards:not(.no-autoinit)'),
+        Carousel: context.querySelectorAll('.carousel:not(.no-autoinit)'),
+        Chips: context.querySelectorAll('.chips:not(.no-autoinit)'),
+        Collapsible: context.querySelectorAll('.collapsible:not(.no-autoinit)'),
+        Datepicker: context.querySelectorAll('.datepicker:not(.no-autoinit)'),
+        Dropdown: context.querySelectorAll('.dropdown-trigger:not(.no-autoinit)'),
+        Materialbox: context.querySelectorAll('.materialboxed:not(.no-autoinit)'),
+        Modal: context.querySelectorAll('.modal:not(.no-autoinit)'),
+        Parallax: context.querySelectorAll('.parallax:not(.no-autoinit)'),
+        Pushpin: context.querySelectorAll('.pushpin:not(.no-autoinit)'),
+        ScrollSpy: context.querySelectorAll('.scrollspy:not(.no-autoinit)'),
+        FormSelect: context.querySelectorAll('select:not(.no-autoinit)'),
+        Sidenav: context.querySelectorAll('.sidenav:not(.no-autoinit)'),
+        Tabs: context.querySelectorAll('.tabs:not(.no-autoinit)'),
+        TapTarget: context.querySelectorAll('.tap-target:not(.no-autoinit)'),
+        Timepicker: context.querySelectorAll('.timepicker:not(.no-autoinit)'),
+        Tooltip: context.querySelectorAll('.tooltipped:not(.no-autoinit)'),
+        FloatingActionButton: context.querySelectorAll('.fixed-action-btn:not(.no-autoinit)')
+    };
+    Autocomplete.init(registry.Autocomplete, options?.Autocomplete ?? {});
+    Cards.init(registry.Cards, options?.Cards ?? {});
+    Carousel.init(registry.Carousel, options?.Carousel ?? {});
+    Chips.init(registry.Chips, options?.Chips ?? {});
+    Collapsible.init(registry.Collapsible, options?.Collapsible ?? {});
+    Datepicker.init(registry.Datepicker, options?.Datepicker ?? {});
+    Dropdown.init(registry.Dropdown, options?.Dropdown ?? {});
+    Materialbox.init(registry.Materialbox, options?.Materialbox ?? {});
+    Modal.init(registry.Modal, options?.Modal ?? {});
+    Parallax.init(registry.Parallax, options?.Parallax ?? {});
+    Pushpin.init(registry.Pushpin, options?.Pushpin ?? {});
+    ScrollSpy.init(registry.ScrollSpy, options?.ScrollSpy ?? {});
+    FormSelect.init(registry.FormSelect, options?.FormSelect ?? {});
+    Sidenav.init(registry.Sidenav, options?.Sidenav ?? {});
+    Tabs.init(registry.Tabs, options?.Tabs ?? {});
+    TapTarget.init(registry.TapTarget, options?.TapTarget ?? {});
+    Timepicker.init(registry.Timepicker, options?.Timepicker ?? {});
+    Tooltip.init(registry.Tooltip, options?.Tooltip ?? {});
+    FloatingActionButton.init(registry.FloatingActionButton, options?.FloatingActionButton ?? {});
+}
+// Init
+if (typeof document !== 'undefined') {
+    document.addEventListener('keydown', Utils.docHandleKeydown, true);
+    document.addEventListener('keyup', Utils.docHandleKeyup, true);
+    document.addEventListener('focus', Utils.docHandleFocus, true);
+    document.addEventListener('blur', Utils.docHandleBlur, true);
+}
+Forms.Init();
+Chips.Init();
+Waves.Init();
+Range.Init();
+
+exports.AutoInit = AutoInit;
+exports.Autocomplete = Autocomplete;
+exports.Cards = Cards;
+exports.Carousel = Carousel;
+exports.CharacterCounter = CharacterCounter;
+exports.Chips = Chips;
+exports.Collapsible = Collapsible;
+exports.Datepicker = Datepicker;
+exports.Dropdown = Dropdown;
+exports.FloatingActionButton = FloatingActionButton;
+exports.FormSelect = FormSelect;
+exports.Forms = Forms;
+exports.Materialbox = Materialbox;
+exports.Modal = Modal;
+exports.Parallax = Parallax;
+exports.Pushpin = Pushpin;
+exports.Range = Range;
+exports.ScrollSpy = ScrollSpy;
+exports.Sidenav = Sidenav;
+exports.Slider = Slider;
+exports.Tabs = Tabs;
+exports.TapTarget = TapTarget;
+exports.Timepicker = Timepicker;
+exports.Toast = Toast;
+exports.Tooltip = Tooltip;
+exports.Waves = Waves;
+exports.version = version;
diff --git a/dist/js/materialize.d.ts b/dist/js/materialize.d.ts
new file mode 100644
index 0000000000..36f1d9778b
--- /dev/null
+++ b/dist/js/materialize.d.ts
@@ -0,0 +1,2540 @@
+/**
+ * Base options for component initialization.
+ */
+interface BaseOptions$1 {
+}
+type MElement = HTMLElement | Element;
+type InitElements<T extends MElement> = NodeListOf<T> | HTMLCollectionOf<T>;
+type ComponentConstructor<T extends Component<O>, O extends BaseOptions$1> = {
+    new (el: HTMLElement, options: Partial<O>): T;
+};
+type ComponentType<C extends Component<O>, O extends BaseOptions$1> = ComponentConstructor<C, O> & typeof Component<O>;
+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<O extends BaseOptions$1> {
+    /**
+     * 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<O>, classDef: ComponentType<Component<O>, O>);
+    /**
+     * Initializes component instance.
+     * @param el HTML element.
+     * @param options Component options.
+     * @param classDef Class definition.
+     */
+    protected static init<I extends HTMLElement, O extends BaseOptions$1, C extends Component<O>>(el: I, options: O, classDef: ComponentType<C, O>): C;
+    /**
+     * Initializes component instances.
+     * @param els HTML elements.
+     * @param options Component options.
+     * @param classDef Class definition.
+     */
+    protected static init<I extends MElement, O extends BaseOptions$1, C extends Component<O>>(els: InitElements<I>, options: Partial<O>, classDef: ComponentType<C, O>): C[];
+    /**
+     * Initializes component instances.
+     * @param els HTML elements.
+     * @param options Component options.
+     * @param classDef Class definition.
+     */
+    protected static init<I extends MElement, O extends BaseOptions$1, C extends Component<O>>(els: I | InitElements<I>, options: Partial<O>, classDef: ComponentType<C, O>): C | C[];
+    /**
+     * @returns default options for component instance.
+     */
+    static get defaults(): BaseOptions$1;
+    /**
+     * Retrieves component instance for the given element.
+     * @param el Associated HTML Element.
+     */
+    static getInstance(el: HTMLElement): Component<BaseOptions$1>;
+    /**
+     * Destroy plugin instance and teardown.
+     */
+    destroy(): void;
+}
+
+interface DropdownOptions extends BaseOptions$1 {
+    /**
+     * Defines the edge the menu is aligned to.
+     * @default 'left'
+     */
+    alignment: 'left' | 'right';
+    /**
+     * If true, automatically focus dropdown el for keyboard.
+     * @default true
+     */
+    autoFocus: boolean;
+    /**
+     * If true, constrainWidth to the size of the dropdown activator.
+     * @default true
+     */
+    constrainWidth: boolean;
+    /**
+     * Provide an element that will be the bounding container of the dropdown.
+     * @default null
+     */
+    container: Element;
+    /**
+     * If false, the dropdown will show below the trigger.
+     * @default true
+     */
+    coverTrigger: boolean;
+    /**
+     * If true, close dropdown on item click.
+     * @default true
+     */
+    closeOnClick: boolean;
+    /**
+     * If true, the dropdown will open on hover.
+     * @default false
+     */
+    hover: boolean;
+    /**
+     * The duration of the transition enter in milliseconds.
+     * @default 150
+     */
+    inDuration: number;
+    /**
+     * The duration of the transition out in milliseconds.
+     * @default 250
+     */
+    outDuration: number;
+    /**
+     * Function called when dropdown starts entering.
+     * @default null
+     */
+    onOpenStart: (el: HTMLElement) => void;
+    /**
+     * Function called when dropdown finishes entering.
+     * @default null
+     */
+    onOpenEnd: (el: HTMLElement) => void;
+    /**
+     * Function called when dropdown starts exiting.
+     * @default null
+     */
+    onCloseStart: (el: HTMLElement) => void;
+    /**
+     * Function called when dropdown finishes exiting.
+     * @default null
+     */
+    onCloseEnd: (el: HTMLElement) => void;
+    /**
+     * Function called when item is clicked.
+     * @default null
+     */
+    onItemClick: (el: HTMLLIElement) => void;
+}
+declare class Dropdown extends Component<DropdownOptions> implements Openable {
+    static _dropdowns: Dropdown[];
+    /** ID of the dropdown element. */
+    id: string;
+    /** The DOM element of the dropdown. */
+    dropdownEl: HTMLElement;
+    /** If the dropdown is open. */
+    isOpen: boolean;
+    /** If the dropdown content is scrollable. */
+    isScrollable: boolean;
+    isTouchMoving: boolean;
+    /** The index of the item focused. */
+    focusedIndex: number;
+    filterQuery: string[];
+    filterTimeout: NodeJS.Timeout | number;
+    constructor(el: HTMLElement, options: Partial<DropdownOptions>);
+    static get defaults(): DropdownOptions;
+    /**
+     * Initializes instance of Dropdown.
+     * @param el HTML element.
+     * @param options Component options.
+     */
+    static init(el: HTMLElement, options?: Partial<DropdownOptions>): Dropdown;
+    /**
+     * Initializes instances of Dropdown.
+     * @param els HTML elements.
+     * @param options Component options.
+     */
+    static init(els: InitElements<MElement>, options?: Partial<DropdownOptions>): Dropdown[];
+    static getInstance(el: HTMLElement): Dropdown;
+    destroy(): void;
+    _setupEventHandlers(): void;
+    _removeEventHandlers(): void;
+    _setupTemporaryEventHandlers(): void;
+    _removeTemporaryEventHandlers(): void;
+    _handleClick: (e: MouseEvent) => void;
+    _handleMouseEnter: (e: any) => void;
+    _handleMouseLeave: (e: MouseEvent) => void;
+    _handleDocumentClick: (e: MouseEvent) => void;
+    _handleTriggerKeydown: (e: KeyboardEvent) => void;
+    _handleDocumentTouchmove: (e: TouchEvent) => void;
+    _handleDropdownClick: (e: MouseEvent) => void;
+    _handleDropdownKeydown: (e: KeyboardEvent) => void;
+    _handleWindowResize: () => void;
+    _resetFilterQuery: () => void;
+    _resetDropdownStyles(): void;
+    _resetDropdownPositioningStyles(): void;
+    _moveDropdown(containerEl?: HTMLElement): void;
+    _makeDropdownFocusable(): void;
+    _focusFocusedItem(): void;
+    _getDropdownPosition(closestOverflowParent: HTMLElement): {
+        x: number;
+        y: number;
+        verticalAlignment: string;
+        horizontalAlignment: "left" | "right";
+        height: number;
+        width: number;
+    };
+    _animateIn(): void;
+    _animateOut(): void;
+    private _getClosestAncestor;
+    _placeDropdown(): void;
+    /**
+     * Open dropdown.
+     */
+    open: () => void;
+    /**
+     * Close dropdown.
+     */
+    close: () => void;
+    /**
+     * While dropdown is open, you can recalculate its dimensions if its contents have changed.
+     */
+    recalculateDimensions: () => void;
+}
+
+interface AutocompleteData {
+    /**
+     * A primitive value that can be converted to string.
+     * If "text" is not provided, it will also be used as "option text" as well
+     */
+    id: string | number;
+    /**
+     * This optional attribute is used as "display value" for the current entry.
+     * When provided, it will also be taken into consideration by the standard search function.
+     */
+    text?: string;
+    /**
+     * This optional attribute is used to provide a valid image URL to the current option.
+     */
+    image?: string;
+    /**
+     * Optional attributes which describes the option.
+     */
+    description?: string;
+}
+interface AutocompleteOptions extends BaseOptions$1 {
+    /**
+     * Data object defining autocomplete options with
+     * optional icon strings.
+     */
+    data: AutocompleteData[];
+    /**
+     * Flag which can be set if multiple values can be selected. The Result will be an Array.
+     * @default false
+     */
+    isMultiSelect: boolean;
+    /**
+     * Callback for when autocompleted.
+     */
+    onAutocomplete: (entries: AutocompleteData[]) => void;
+    /**
+     * Minimum number of characters before autocomplete starts.
+     * @default 1
+     */
+    minLength: number;
+    /**
+     * The height of the Menu which can be set via css-property.
+     * @default '300px'
+     */
+    maxDropDownHeight: string;
+    /**
+     * Function is called when the input text is altered and data can also be loaded asynchronously.
+     * If the results are collected the items in the list can be updated via the function setMenuItems(collectedItems).
+     * @param text Searched text.
+     * @param autocomplete Current autocomplete instance.
+     */
+    onSearch: (text: string, autocomplete: Autocomplete) => void;
+    /**
+     * If true will render the key from each item directly as HTML.
+     * User input MUST be properly sanitized first.
+     * @default false
+     */
+    allowUnsafeHTML: boolean;
+    /**
+     * Pass options object to select dropdown initialization.
+     * @default {}
+     */
+    dropdownOptions: Partial<DropdownOptions>;
+}
+declare class Autocomplete extends Component<AutocompleteOptions> {
+    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<AutocompleteOptions>);
+    static get defaults(): AutocompleteOptions;
+    /**
+     * Initializes instance of Autocomplete.
+     * @param el HTML element.
+     * @param options Component options.
+     */
+    static init(el: HTMLInputElement, options?: Partial<AutocompleteOptions>): Autocomplete;
+    /**
+     * Initializes instances of Autocomplete.
+     * @param els HTML elements.
+     * @param options Component options.
+     */
+    static init(els: InitElements<HTMLInputElement | MElement>, options?: Partial<AutocompleteOptions>): Autocomplete[];
+    static getInstance(el: HTMLElement): Autocomplete;
+    destroy(): void;
+    _setupEventHandlers(): void;
+    _removeEventHandlers(): void;
+    _setupDropdown(): void;
+    _removeDropdown(): void;
+    _handleInputBlur: () => void;
+    _handleInputKeyup: (e: KeyboardEvent) => void;
+    _handleInputFocus: () => void;
+    _inputChangeDetection: (value: string) => void;
+    _handleInputKeydown: (e: KeyboardEvent) => void;
+    _handleInputClick: () => void;
+    _handleContainerMousedownAndTouchstart: () => void;
+    _handleContainerMouseupAndTouchend: () => void;
+    _resetCurrentElementPosition(): void;
+    _resetAutocomplete(): void;
+    _highlightPartialText(input: string, label: string): string[];
+    _createDropdownItem(entry: AutocompleteData): HTMLLIElement;
+    _renderDropdown(): void;
+    _setStatusLoading(): void;
+    _updateSelectedInfo(): void;
+    _refreshInputText(): void;
+    _triggerChanged(): void;
+    /**
+     * Show autocomplete.
+     */
+    open: () => void;
+    /**
+     * Hide autocomplete.
+     */
+    close: () => void;
+    /**
+     * Updates the visible or selectable items shown in the menu.
+     * @param menuItems Items to be available.
+     */
+    setMenuItems(menuItems: AutocompleteData[]): void;
+    /**
+     * Sets selected values.
+     * @param entries
+     */
+    setValues(entries: AutocompleteData[]): void;
+    /**
+     * Select a specific autocomplete option via id-property.
+     * @param id The id of a data-entry.
+     */
+    selectOption(id: number | string): void;
+}
+
+interface FloatingActionButtonOptions extends BaseOptions$1 {
+    /**
+     * Direction FAB menu opens.
+     * @default "top"
+     */
+    direction: 'top' | 'right' | 'bottom' | 'left';
+    /**
+     * true: FAB menu appears on hover, false: FAB menu appears on click.
+     * @default true
+     */
+    hoverEnabled: boolean;
+    /**
+     * Enable transit the FAB into a toolbar on click.
+     * @default false
+     */
+    toolbarEnabled: boolean;
+}
+declare class FloatingActionButton extends Component<FloatingActionButtonOptions> 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<FloatingActionButtonOptions>);
+    static get defaults(): FloatingActionButtonOptions;
+    /**
+     * Initializes instance of FloatingActionButton.
+     * @param el HTML element.
+     * @param options Component options.
+     */
+    static init(el: HTMLElement, options?: Partial<FloatingActionButtonOptions>): FloatingActionButton;
+    /**
+     * Initializes instances of FloatingActionButton.
+     * @param els HTML elements.
+     * @param options Component options.
+     */
+    static init(els: InitElements<MElement>, options?: Partial<FloatingActionButtonOptions>): FloatingActionButton[];
+    static getInstance(el: HTMLElement): FloatingActionButton;
+    destroy(): void;
+    _setupEventHandlers(): void;
+    _removeEventHandlers(): void;
+    _handleFABClick: () => void;
+    _handleDocumentClick: (e: MouseEvent) => void;
+    /**
+     * Open FAB.
+     */
+    open: () => void;
+    /**
+     * Close FAB.
+     */
+    close: () => void;
+    _animateInFAB(): void;
+    _animateOutFAB(): void;
+    _animateInToolbar(): void;
+}
+
+interface CardsOptions extends BaseOptions$1 {
+    onOpen: (el: Element) => void;
+    onClose: (el: Element) => void;
+    inDuration: number;
+    outDuration: number;
+}
+declare class Cards extends Component<CardsOptions> implements Openable {
+    isOpen: boolean;
+    private readonly cardReveal;
+    private readonly initialOverflow;
+    private _activators;
+    private cardRevealClose;
+    constructor(el: HTMLElement, options: Partial<CardsOptions>);
+    static get defaults(): CardsOptions;
+    /**
+     * Initializes instance of Cards.
+     * @param el HTML element.
+     * @param options Component options.
+     */
+    static init(el: HTMLElement, options?: Partial<CardsOptions>): Cards;
+    /**
+     * Initializes instances of Cards.
+     * @param els HTML elements.
+     * @param options Component options.
+     */
+    static init(els: InitElements<MElement>, options?: Partial<CardsOptions>): Cards[];
+    static getInstance(el: HTMLElement): Cards;
+    /**
+     * {@inheritDoc}
+     */
+    destroy(): void;
+    _setupEventHandlers: () => void;
+    _removeEventHandlers: () => void;
+    _handleClickInteraction: () => void;
+    _handleKeypressEvent: (e: KeyboardEvent) => void;
+    _handleRevealEvent: () => void;
+    _setupRevealCloseEventHandlers: () => void;
+    _removeRevealCloseEventHandlers: () => void;
+    _handleKeypressCloseEvent: (e: KeyboardEvent) => void;
+    /**
+     * Show card reveal.
+     */
+    open: () => void;
+    /**
+     * Hide card reveal.
+     */
+    close: () => void;
+}
+
+interface CarouselOptions extends BaseOptions$1 {
+    /**
+     * Transition duration in milliseconds.
+     * @default 200
+     */
+    duration: number;
+    /**
+     * Perspective zoom. If 0, all items are the same size.
+     * @default -100
+     */
+    dist: number;
+    /**
+     * Set the spacing of the center item.
+     * @default 0
+     */
+    shift: number;
+    /**
+     * Set the padding between non center items.
+     * @default 0
+     */
+    padding: number;
+    /**
+     * Set the number of visible items.
+     * @default 5
+     */
+    numVisible: number;
+    /**
+     * Make the carousel a full width slider like the second example.
+     * @default false
+     */
+    fullWidth: boolean;
+    /**
+     * Set to true to show indicators.
+     * @default false
+     */
+    indicators: boolean;
+    /**
+     * Don't wrap around and cycle through items.
+     * @default false
+     */
+    noWrap: boolean;
+    /**
+     * Callback for when a new slide is cycled to.
+     * @default null
+     */
+    onCycleTo: (current: Element, dragged: boolean) => void;
+}
+declare class Carousel extends Component<CarouselOptions> {
+    hasMultipleSlides: boolean;
+    showIndicators: boolean;
+    noWrap: boolean;
+    /** If the carousel is being clicked or tapped. */
+    pressed: boolean;
+    /** If the carousel is currently being dragged. */
+    dragged: boolean;
+    offset: number;
+    target: number;
+    images: HTMLElement[];
+    itemWidth: number;
+    itemHeight: number;
+    dim: number;
+    _indicators: HTMLUListElement;
+    count: number;
+    xform: string;
+    verticalDragged: boolean;
+    reference: number;
+    referenceY: number;
+    velocity: number;
+    frame: number;
+    timestamp: number;
+    ticker: string | number | NodeJS.Timeout;
+    amplitude: number;
+    /** The index of the center carousel item. */
+    center: number;
+    imageHeight: number;
+    scrollingTimeout: number | NodeJS.Timeout;
+    oneTimeCallback: (current: Element, dragged: boolean) => void | null;
+    constructor(el: HTMLElement, options: Partial<CarouselOptions>);
+    static get defaults(): CarouselOptions;
+    /**
+     * Initializes instance of Carousel.
+     * @param el HTML element.
+     * @param options Component options.
+     */
+    static init(el: HTMLElement, options?: Partial<CarouselOptions>): Carousel;
+    /**
+     * Initializes instances of Carousel.
+     * @param els HTML elements.
+     * @param options Component options.
+     */
+    static init(els: InitElements<MElement>, options?: Partial<CarouselOptions>): Carousel[];
+    static getInstance(el: HTMLElement): Carousel;
+    destroy(): void;
+    _setupEventHandlers(): void;
+    _removeEventHandlers(): void;
+    _handleThrottledResize: () => void;
+    _handleCarouselTap: (e: MouseEvent | TouchEvent) => void;
+    _handleCarouselDrag: (e: MouseEvent | TouchEvent) => boolean;
+    _handleCarouselRelease: (e: MouseEvent | TouchEvent) => boolean;
+    _handleCarouselClick: (e: MouseEvent | TouchEvent) => boolean;
+    _handleIndicatorClick: (e: Event) => void;
+    _handleIndicatorKeyPress: (e: KeyboardEvent) => void;
+    _handleIndicatorInteraction: (e: Event) => void;
+    _handleResize: () => void;
+    _setCarouselHeight(imageOnly?: boolean): void;
+    _xpos(e: MouseEvent | TouchEvent): number;
+    _ypos(e: MouseEvent | TouchEvent): number;
+    _wrap(x: number): any;
+    _track: () => void;
+    _autoScroll: () => void;
+    _scroll(x?: number): void;
+    _updateItemStyle(el: HTMLElement, opacity: number, zIndex: number, transform: string): void;
+    _cycleTo(n: number, callback?: CarouselOptions['onCycleTo']): void;
+    /**
+     * Move carousel to next slide or go forward a given amount of slides.
+     * @param n How many times the carousel slides.
+     */
+    next(n?: number): void;
+    /**
+     * Move carousel to previous slide or go back a given amount of slides.
+     * @param n How many times the carousel slides.
+     */
+    prev(n?: number): void;
+    /**
+     * Move carousel to nth slide.
+     * @param n Index of slide.
+     * @param callback "onCycleTo" optional callback.
+     */
+    set(n: number, callback?: CarouselOptions['onCycleTo']): void;
+}
+
+interface ChipData {
+    /**
+     * Unique identifier.
+     */
+    id: number | string;
+    /**
+     * Chip text. If not specified, "id" will be used.
+     */
+    text?: string;
+    /**
+     * Chip image (URL).
+     */
+    image?: string;
+}
+interface ChipsOptions extends BaseOptions$1 {
+    /**
+     * Set the chip data.
+     * @default []
+     */
+    data: ChipData[];
+    /**
+     * Set first placeholder when there are no tags.
+     * @default ""
+     */
+    placeholder: string;
+    /**
+     * Set second placeholder when adding additional tags.
+     * @default ""
+     */
+    secondaryPlaceholder: string;
+    /**
+     * Set autocomplete options.
+     * @default {}
+     */
+    autocompleteOptions: Partial<AutocompleteOptions>;
+    /**
+     * Toggles abililty to add custom value not in autocomplete list.
+     * @default false
+     */
+    autocompleteOnly: boolean;
+    /**
+     * Set chips limit.
+     * @default Infinity
+     */
+    limit: number;
+    /**
+     * Specifies class to be used in "close" button (useful when working with Material Symbols icon set).
+     * @default 'material-icons'
+     */
+    closeIconClass: string;
+    /**
+     *  Specifies option to render user input field
+     *  @default false;
+     */
+    allowUserInput: boolean;
+    /**
+     * Callback for chip add.
+     * @default null
+     */
+    onChipAdd: (element: HTMLElement, chip: HTMLElement) => void;
+    /**
+     * Callback for chip select.
+     * @default null
+     */
+    onChipSelect: (element: HTMLElement, chip: HTMLElement) => void;
+    /**
+     * Callback for chip delete.
+     * @default null
+     */
+    onChipDelete: (element: HTMLElement, chip: HTMLElement) => void;
+}
+declare class Chips extends Component<ChipsOptions> {
+    /** Array of the current chips data. */
+    chipsData: ChipData[];
+    /** If the chips has autocomplete enabled. */
+    hasAutocomplete: boolean;
+    /** Autocomplete instance, if any. */
+    autocomplete: Autocomplete;
+    _input: HTMLInputElement;
+    _label: HTMLLabelElement;
+    _chips: HTMLElement[];
+    static _keydown: boolean;
+    private _selectedChip;
+    constructor(el: HTMLElement, options: Partial<ChipsOptions>);
+    static get defaults(): ChipsOptions;
+    /**
+     * Initializes instance of Chips.
+     * @param el HTML element.
+     * @param options Component options.
+     */
+    static init(el: HTMLElement, options?: Partial<ChipsOptions>): Chips;
+    /**
+     * Initializes instances of Chips.
+     * @param els HTML elements.
+     * @param options Component options.
+     */
+    static init(els: InitElements<MElement>, options?: Partial<ChipsOptions>): Chips[];
+    static getInstance(el: HTMLElement): Chips;
+    getData(): ChipData[];
+    destroy(): void;
+    _setupEventHandlers(): void;
+    _removeEventHandlers(): void;
+    _handleChipClick: (e: MouseEvent) => void;
+    static _handleChipsKeydown(e: KeyboardEvent): void;
+    static _handleChipsKeyup(): void;
+    static _handleChipsBlur(e: Event): void;
+    _handleInputFocus: () => void;
+    _handleInputBlur: () => void;
+    _handleInputKeydown: (e: KeyboardEvent) => void;
+    _renderChip(chip: ChipData): HTMLDivElement;
+    _renderChips(): void;
+    _setupAutocomplete(): void;
+    _setupInput(): void;
+    _setupLabel(): void;
+    _setPlaceholder(): void;
+    _isValidAndNotExist(chip: ChipData): boolean;
+    /**
+     * Add chip to input.
+     * @param chip Chip data object
+     */
+    addChip(chip: ChipData): void;
+    /**
+     * Delete nth chip.
+     * @param chipIndex  Index of chip
+     */
+    deleteChip(chipIndex: number): void;
+    /**
+     * Select nth chip.
+     * @param chipIndex Index of chip
+     */
+    selectChip(chipIndex: number): void;
+    static Init(): void;
+}
+
+interface CollapsibleOptions extends BaseOptions$1 {
+    /**
+     * If accordion versus collapsible.
+     * @default true
+     */
+    accordion: boolean;
+    /**
+     * Transition in duration in milliseconds.
+     * @default 300
+     */
+    inDuration: number;
+    /**
+     * Transition out duration in milliseconds.
+     * @default 300
+     */
+    outDuration: number;
+    /**
+     * Callback function called before collapsible is opened.
+     * @default null
+     */
+    onOpenStart: (el: Element) => void;
+    /**
+     * Callback function called after collapsible is opened.
+     * @default null
+     */
+    onOpenEnd: (el: Element) => void;
+    /**
+     * Callback function called before collapsible is closed.
+     * @default null
+     */
+    onCloseStart: (el: Element) => void;
+    /**
+     * Callback function called after collapsible is closed.
+     * @default null
+     */
+    onCloseEnd: (el: Element) => void;
+}
+declare class Collapsible extends Component<CollapsibleOptions> {
+    private _headers;
+    constructor(el: HTMLElement, options: Partial<CollapsibleOptions>);
+    static get defaults(): CollapsibleOptions;
+    /**
+     * Initializes instance of Collapsible.
+     * @param el HTML element.
+     * @param options Component options.
+     */
+    static init(el: HTMLElement, options?: Partial<CollapsibleOptions>): Collapsible;
+    /**
+     * Initializes instances of Collapsible.
+     * @param els HTML elements.
+     * @param options Component options.
+     */
+    static init(els: InitElements<MElement>, options?: Partial<CollapsibleOptions>): Collapsible[];
+    static getInstance(el: HTMLElement): Collapsible;
+    destroy(): void;
+    _setupEventHandlers(): void;
+    _removeEventHandlers(): void;
+    _handleCollapsibleClick: (e: MouseEvent | KeyboardEvent) => void;
+    _handleCollapsibleKeydown: (e: KeyboardEvent) => void;
+    private _setExpanded;
+    _animateIn(index: number): void;
+    _animateOut(index: number): void;
+    /**
+     * Open collapsible section.
+     * @param n Nth section to open.
+     */
+    open: (index: number) => void;
+    /**
+     * Close collapsible section.
+     * @param n Nth section to close.
+     */
+    close: (index: number) => void;
+}
+
+interface DateI18nOptions extends I18nOptions {
+    previousMonth: string;
+    nextMonth: string;
+    months: string[];
+    monthsShort: string[];
+    weekdays: string[];
+    weekdaysShort: string[];
+    weekdaysAbbrev: string[];
+}
+interface DatepickerOptions extends BaseOptions$1 {
+    /**
+     * The date output format for the input field value
+     * or a function taking the date and outputting the
+     * formatted date string.
+     * @default 'mmm dd, yyyy'
+     */
+    format: string | ((d: Date) => string);
+    /**
+     * Used to create date object from current input string.
+     * @default null
+     */
+    parse: ((value: string, format: string) => Date) | null;
+    /**
+     * The initial condition if the datepicker is based on date range.
+     * @default false
+     */
+    isDateRange: boolean;
+    /**
+     * The selector of the user specified date range end element
+     */
+    dateRangeEndEl: string | null;
+    /**
+     * The initial condition if the datepicker is based on multiple date selection.
+     * @default false
+     */
+    isMultipleSelection: boolean;
+    /**
+     * The initial date to view when first opened.
+     * @default null
+     */
+    defaultDate: Date | null;
+    /**
+     * The initial end date to view when first opened.
+     * @default null
+     */
+    defaultEndDate: Date | null;
+    /**
+     * Make the `defaultDate` the initial selected value.
+     * @default false
+     */
+    setDefaultDate: boolean;
+    /**
+     * Make the `defaultEndDate` the initial selected value.
+     * @default false
+     */
+    setDefaultEndDate: boolean;
+    /**
+     * Prevent selection of any date on the weekend.
+     * @default false
+     */
+    disableWeekends: boolean;
+    /**
+     * Custom function to disable certain days.
+     * @default null
+     */
+    disableDayFn: ((day: Date) => boolean) | null;
+    /**
+     * First day of week (0: Sunday, 1: Monday etc).
+     * @default 0
+     */
+    firstDay: number;
+    /**
+     * The earliest date that can be selected.
+     * @default null
+     */
+    minDate: Date | null;
+    /**
+     * The latest date that can be selected.
+     * @default null
+     */
+    maxDate: Date | null;
+    /**
+     * Number of years either side, or array of upper/lower range.
+     * @default 10
+     */
+    yearRange: number | number[];
+    /**
+     * Sort year range in reverse order.
+     * @default false
+     */
+    yearRangeReverse: boolean;
+    /**
+     * Changes Datepicker to RTL.
+     * @default false
+     */
+    isRTL: boolean;
+    /**
+     * Show month after year in Datepicker title.
+     * @default false
+     */
+    showMonthAfterYear: boolean;
+    /**
+     * Render days of the calendar grid that fall in the next
+     * or previous month.
+     * @default false
+     */
+    showDaysInNextAndPreviousMonths: boolean;
+    /**
+     * Specify if the docked datepicker is in open state by default
+     */
+    openByDefault: boolean;
+    /**
+     * Specify a DOM element OR selector for a DOM element to render
+     * the calendar in, by default it will be placed before the input.
+     * @default null
+     */
+    container: HTMLElement | string | null;
+    /**
+     * Show the clear button in the datepicker.
+     * @default false
+     */
+    showClearBtn: boolean;
+    /**
+     * Internationalization options.
+     */
+    i18n: Partial<DateI18nOptions>;
+    /**
+     * An array of string returned by `Date.toDateString()`,
+     * indicating there are events in the specified days.
+     * @default []
+     */
+    events: string[];
+    /**
+     * Callback function when date is selected,
+     * first parameter is the newly selected date.
+     * @default null
+     */
+    onSelect: ((selectedDate: Date) => void) | null;
+    /**
+     * Callback function when Datepicker is closed.
+     * @default null
+     */
+    /**
+     * Callback function when Datepicker HTML is refreshed.
+     * @default null
+     */
+    onDraw: (() => void) | null;
+    /**
+     * Callback function for interaction with input field.
+     * @default null
+     */
+    onInputInteraction: (() => void) | null;
+    /** Field used for internal calculations DO NOT CHANGE IT */
+    minYear?: number;
+    /** Field used for internal calculations DO NOT CHANGE IT */
+    maxYear?: number;
+    /** Field used for internal calculations DO NOT CHANGE IT */
+    minMonth?: number;
+    /** Field used for internal calculations DO NOT CHANGE IT */
+    maxMonth?: number;
+    /** Field used for internal calculations DO NOT CHANGE IT */
+    startRange?: Date;
+    /** Field used for internal calculations DO NOT CHANGE IT */
+    endRange?: Date;
+}
+declare class Datepicker extends Component<DatepickerOptions> {
+    el: HTMLInputElement;
+    id: string;
+    multiple: boolean;
+    calendarEl: HTMLElement;
+    /** CLEAR button instance. */
+    clearBtn: HTMLElement;
+    /** DONE button instance */
+    doneBtn: HTMLElement;
+    cancelBtn: HTMLElement;
+    containerEl: HTMLElement;
+    yearTextEl: HTMLElement;
+    dateTextEl: HTMLElement;
+    endDateEl: HTMLInputElement;
+    dateEls: HTMLInputElement[];
+    /** The selected Date. */
+    date: Date;
+    endDate: null | Date;
+    dates: Date[];
+    formats: object;
+    calendars: [{
+        month: number;
+        year: number;
+    }];
+    private _y;
+    private _m;
+    static _template: string;
+    constructor(el: HTMLInputElement, options: Partial<DatepickerOptions>);
+    static get defaults(): DatepickerOptions;
+    /**
+     * Initializes instance of Datepicker.
+     * @param el HTML element.
+     * @param options Component options.
+     */
+    static init(el: HTMLInputElement, options?: Partial<DatepickerOptions>): Datepicker;
+    /**
+     * Initializes instances of Datepicker.
+     * @param els HTML elements.
+     * @param options Component options.
+     */
+    static init(els: InitElements<HTMLInputElement | MElement>, options?: Partial<DatepickerOptions>): Datepicker[];
+    static _isDate(obj: any): boolean;
+    static _isWeekend(date: any): boolean;
+    /**
+     * @deprecated as this function has no effect without any return statement or global parameter setter.
+     */
+    static _setToStartOfDay(date: any): void;
+    static _getDaysInMonth(year: any, month: any): number;
+    static _isLeapYear(year: any): boolean;
+    static _compareDates(a: any, b: any): boolean;
+    static _compareWithinRange(day: Date, date: Date, dateEnd: Date): boolean;
+    static _comparePastDate(a: Date, b: Date): boolean;
+    static getInstance(el: HTMLElement): Datepicker;
+    destroy(): void;
+    destroySelects(): void;
+    _insertHTMLIntoDOM(): void;
+    /**
+     * Renders the date input format
+     */
+    _renderDateInputFormat(el: HTMLInputElement): void;
+    /**
+     * Gets a string representation of the given date.
+     */
+    toString(date?: Date, format?: string | ((d: Date) => string)): string;
+    /**
+     * Returns the formatted date.
+     */
+    formatDate(date: Date, format: string): string;
+    /**
+     * Sets date from input field.
+     */
+    setDateFromInput(el: HTMLInputElement): void;
+    /**
+     * Set a date on the datepicker.
+     * @param date Date to set on the datepicker.
+     * @param preventOnSelect Undocumented as of 5 March 2018.
+     * @param isEndDate
+     * @param fromUserInput
+     */
+    setDate(date?: Date, preventOnSelect?: boolean, isEndDate?: boolean, fromUserInput?: boolean): void;
+    validateDate(date: Date): void | Date;
+    /**
+     * Set a single date on the datepicker.
+     * @param date Date to set on the datepicker.
+     * @param isEndDate
+     */
+    setSingleDate(date: Date, isEndDate: boolean): void;
+    /**
+     * Set a multi date on the datepicker.
+     * @param date Date to set on the datepicker.
+     */
+    setMultiDate(date: Date): void;
+    /**
+     * Sets the data-date attribute on the date input field
+     */
+    setDataDate(el: any, date: any): void;
+    /**
+     * Sets dates on the input values.
+     */
+    setInputValues(): void;
+    setMultipleSelectionInputValues(): void;
+    /**
+     * Sets given date as the input value on the given element.
+     */
+    setInputValue(el: any, date: any): void;
+    /**
+     * Renders the date in the modal head section.
+     */
+    _renderDateDisplay(date: Date, endDate?: Date): void;
+    /**
+     * Change date view to a specific date on the datepicker.
+     * @param date Date to show on the datepicker.
+     */
+    gotoDate(date: Date): void;
+    adjustCalendars(): void;
+    adjustCalendar(calendar: any): any;
+    nextMonth(): void;
+    prevMonth(): void;
+    render(year: any, month: any, randId: any): string;
+    renderDay(opts: any): string;
+    renderRow(days: any, isRTL: any, isRowSelected: any): string;
+    renderTable(opts: any, data: any, randId: any): string;
+    renderHead(opts: any): string;
+    renderBody(rows: any): string;
+    renderTitle(instance: any, c: any, year: any, month: any, refYear: any, randId: any): string;
+    draw(): void;
+    _setupEventHandlers(): void;
+    _setupVariables(): void;
+    _removeEventHandlers(): void;
+    _handleInputClick: (e: any) => void;
+    _handleInputKeydown: (e: KeyboardEvent) => void;
+    _handleCalendarClick: (e: any) => void;
+    _handleDateRangeCalendarClick: (date: Date) => void;
+    _handleClearClick: () => void;
+    _clearDates: () => void;
+    _handleMonthChange: (e: any) => void;
+    _handleYearChange: (e: any) => void;
+    gotoMonth(month: any): void;
+    gotoYear(year: any): void;
+    _handleInputChange: (e: Event) => void;
+    renderDayName(opts: any, day: any, abbr?: boolean): any;
+    createDateInput(): HTMLInputElement;
+    _finishSelection: () => void;
+    open(): this;
+    close(): this;
+}
+
+interface MaterialboxOptions extends BaseOptions$1 {
+    /**
+     * Transition in duration in milliseconds.
+     * @default 275
+     */
+    inDuration: number;
+    /**
+     * Transition out duration in milliseconds.
+     * @default 200
+     */
+    outDuration: number;
+    /**
+     * Callback function called before materialbox is opened.
+     * @default null
+     */
+    onOpenStart: (el: Element) => void;
+    /**
+     * Callback function called after materialbox is opened.
+     * @default null
+     */
+    onOpenEnd: (el: Element) => void;
+    /**
+     * Callback function called before materialbox is closed.
+     * @default null
+     */
+    onCloseStart: (el: Element) => void;
+    /**
+     * Callback function called after materialbox is closed.
+     * @default null
+     */
+    onCloseEnd: (el: Element) => void;
+}
+declare class Materialbox extends Component<MaterialboxOptions> {
+    /** 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<MaterialboxOptions>);
+    static get defaults(): MaterialboxOptions;
+    /**
+     * Initializes instance of MaterialBox.
+     * @param el HTML element.
+     * @param options Component options.
+     */
+    static init(el: HTMLElement, options?: Partial<MaterialboxOptions>): Materialbox;
+    /**
+     * Initializes instances of MaterialBox.
+     * @param els HTML elements.
+     * @param options Component options.
+     */
+    static init(els: InitElements<MElement>, options?: Partial<MaterialboxOptions>): Materialbox[];
+    static getInstance(el: HTMLElement): Materialbox;
+    destroy(): void;
+    private _setupEventHandlers;
+    private _removeEventHandlers;
+    private _handleMaterialboxClick;
+    private _handleMaterialboxKeypress;
+    private _handleMaterialboxToggle;
+    private _handleWindowScroll;
+    private _handleWindowResize;
+    private _handleWindowEscape;
+    private _makeAncestorsOverflowVisible;
+    private _offset;
+    private _updateVars;
+    private _animateImageIn;
+    private _animateImageOut;
+    private _addCaption;
+    private _removeCaption;
+    private _addOverlay;
+    private _removeOverlay;
+    /**
+     * Open materialbox.
+     */
+    open: () => void;
+    /**
+     * Close materialbox.
+     */
+    close: () => void;
+}
+
+interface ModalOptions extends BaseOptions$1 {
+    opacity: number;
+    inDuration: number;
+    outDuration: number;
+    preventScrolling: boolean;
+    onOpenStart: (this: Modal, el: HTMLElement) => void;
+    onOpenEnd: (this: Modal, el: HTMLElement) => void;
+    onCloseStart: (el: HTMLElement) => void;
+    onCloseEnd: (el: HTMLElement) => void;
+    dismissible: boolean;
+    startingTop: string;
+    endingTop: string;
+}
+declare class Modal extends Component<ModalOptions> {
+    #private;
+    constructor(el: HTMLElement, options: Partial<ModalOptions>);
+    static get defaults(): {
+        opacity: number;
+        inDuration: number;
+        outDuration: number;
+        onOpenStart: any;
+        onOpenEnd: any;
+        onCloseStart: any;
+        onCloseEnd: any;
+        preventScrolling: boolean;
+        dismissible: boolean;
+        startingTop: string;
+        endingTop: string;
+    };
+    static init(el: HTMLElement, options?: Partial<ModalOptions>): Modal;
+    static init(els: InitElements<MElement>, options?: Partial<ModalOptions>): Modal[];
+    static getInstance(el: HTMLElement): Modal;
+    destroy(): void;
+    _setupEventHandlers(): void;
+    _removeEventHandlers(): void;
+    _handleTriggerClick(): void;
+    _handleOverlayClick(): void;
+    _handleModalCloseClick(): void;
+    _handleKeydown(): void;
+    _handleFocus(): void;
+    open(): this;
+    close(): this;
+    static create(config: any): string | HTMLDialogElement;
+}
+
+declare class Edges {
+    top: boolean;
+    right: boolean;
+    bottom: boolean;
+    left: boolean;
+}
+
+declare class Bounding {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+}
+
+/**
+ * Class with utilitary functions for global usage.
+ */
+declare class Utils {
+    /** Specifies wether tab is pressed or not. */
+    static tabPressed: boolean;
+    /** Specifies wether there is a key pressed. */
+    static keyDown: boolean;
+    /**
+     * Key maps.
+     */
+    static keys: {
+        TAB: string[];
+        ENTER: string[];
+        ESC: string[];
+        BACKSPACE: string[];
+        ARROW_UP: string[];
+        ARROW_DOWN: string[];
+        ARROW_LEFT: string[];
+        ARROW_RIGHT: string[];
+        DELETE: string[];
+    };
+    /**
+     * Detects when a key is pressed.
+     * @param e Event instance.
+     */
+    static docHandleKeydown(e: KeyboardEvent): void;
+    /**
+     * Detects when a key is released.
+     * @param e Event instance.
+     */
+    static docHandleKeyup(e: KeyboardEvent): void;
+    /**
+     * Detects when document is focused.
+     * @param e Event instance.
+     */
+    static docHandleFocus(e: FocusEvent): void;
+    /**
+     * Detects when document is not focused.
+     * @param e Event instance.
+     */
+    static docHandleBlur(e: FocusEvent): void;
+    /**
+     * Generates a unique string identifier.
+     */
+    static guid(): string;
+    /**
+     * Checks for exceeded edges
+     * @param container Container element.
+     * @param bounding Bounding rect.
+     * @param offset Element offset.
+     */
+    static checkWithinContainer(container: HTMLElement, bounding: Bounding, offset: number): Edges;
+    /**
+     * Checks if element can be aligned in multiple directions.
+     * @param el Element to be inspected.
+     * @param container Container element.
+     * @param bounding Bounding rect.
+     * @param offset Element offset.
+     */
+    static checkPossibleAlignments(el: HTMLElement, container: HTMLElement, bounding: Bounding, offset: number): {
+        top: boolean;
+        right: boolean;
+        bottom: boolean;
+        left: boolean;
+        spaceOnTop: number;
+        spaceOnRight: number;
+        spaceOnBottom: number;
+        spaceOnLeft: number;
+    };
+    /**
+     * Retrieves target element id from trigger.
+     * @param trigger Trigger element.
+     */
+    static getIdFromTrigger(trigger: HTMLElement): string;
+    /**
+     * Retrieves document scroll postion from top.
+     */
+    static getDocumentScrollTop(): number;
+    /**
+     * Retrieves document scroll postion from left.
+     */
+    static getDocumentScrollLeft(): number;
+    /**
+     * Fires the given function after a certain ammount of time.
+     * @param func Function to be fired.
+     * @param wait Wait time.
+     * @param options Additional options.
+     */
+    static throttle(func: (Function: object) => void, wait: number, options?: Partial<{
+        leading: boolean;
+        trailing: boolean;
+    }>): (...args: any[]) => any;
+    /**
+     * Renders confirm/close buttons with callback function
+     */
+    static createConfirmationContainer(container: HTMLElement, confirmText: string, cancelText: string, onConfirm: (Function: object) => void, onCancel: (Function: object) => void): void;
+    /**
+     * Renders a button with optional callback function
+     */
+    static createButton(container: HTMLElement, text: string, className?: string[], visibility?: boolean, callback?: (Function: object) => void): void;
+}
+
+interface ParallaxOptions extends BaseOptions$1 {
+    /**
+     * The minimum width of the screen, in pixels, where the parallax functionality starts working.
+     * @default 0
+     */
+    responsiveThreshold: number;
+}
+declare class Parallax extends Component<ParallaxOptions> {
+    private _enabled;
+    private _img;
+    static _parallaxes: Parallax[];
+    static _handleScrollThrottled: () => Utils;
+    static _handleWindowResizeThrottled: () => Utils;
+    constructor(el: HTMLElement, options: Partial<ParallaxOptions>);
+    static get defaults(): ParallaxOptions;
+    /**
+     * Initializes instance of Parallax.
+     * @param el HTML element.
+     * @param options Component options.
+     */
+    static init(el: HTMLElement, options?: Partial<ParallaxOptions>): Parallax;
+    /**
+     * Initializes instances of Parallax.
+     * @param els HTML elements.
+     * @param options Component options.
+     */
+    static init(els: InitElements<MElement>, options?: Partial<ParallaxOptions>): Parallax[];
+    static getInstance(el: HTMLElement): Parallax;
+    destroy(): void;
+    static _handleScroll(): void;
+    static _handleWindowResize(): void;
+    _setupEventHandlers(): void;
+    _removeEventHandlers(): void;
+    _setupStyles(): void;
+    _handleImageLoad: () => void;
+    private _offset;
+    _updateParallax(): void;
+}
+
+interface PushpinOptions extends BaseOptions$1 {
+    /**
+     * The distance in pixels from the top of the page where
+     * the element becomes fixed.
+     * @default 0
+     */
+    top: number;
+    /**
+     * The distance in pixels from the top of the page where
+     * the elements stops being fixed.
+     * @default Infinity
+     */
+    bottom: number;
+    /**
+     * The offset from the top the element will be fixed at.
+     * @default 0
+     */
+    offset: number;
+    /**
+     * Callback function called when pushpin position changes.
+     * You are provided with a position string.
+     * @default null
+     */
+    onPositionChange: (position: 'pinned' | 'pin-top' | 'pin-bottom') => void;
+}
+declare class Pushpin extends Component<PushpinOptions> {
+    static _pushpins: Pushpin[];
+    originalOffset: number;
+    constructor(el: HTMLElement, options: Partial<PushpinOptions>);
+    static get defaults(): PushpinOptions;
+    /**
+     * Initializes instance of Pushpin.
+     * @param el HTML element.
+     * @param options Component options.
+     */
+    static init(el: HTMLElement, options?: Partial<PushpinOptions>): Pushpin;
+    /**
+     * Initializes instances of Pushpin.
+     * @param els HTML elements.
+     * @param options Component options.
+     */
+    static init(els: InitElements<MElement>, options?: Partial<PushpinOptions>): Pushpin[];
+    static getInstance(el: HTMLElement): Pushpin;
+    destroy(): void;
+    static _updateElements(): void;
+    _setupEventHandlers(): void;
+    _removeEventHandlers(): void;
+    _updatePosition(): void;
+    _removePinClasses(): void;
+}
+
+interface ScrollSpyOptions extends BaseOptions$1 {
+    /**
+     * Throttle of scroll handler.
+     * @default 100
+     */
+    throttle: number;
+    /**
+     * Offset for centering element when scrolled to.
+     * @default 200
+     */
+    scrollOffset: number;
+    /**
+     * Class applied to active elements.
+     * @default 'active'
+     */
+    activeClass: string;
+    /**
+     * Used to find active element.
+     * @default id => 'a[href="#' + id + '"]'
+     */
+    getActiveElement: (id: string) => string;
+    /**
+     * Used to keep last top element active even if
+     * scrollbar goes outside of scrollspy elements.
+     *
+     * If there is no last top element,
+     * then the active one will be the first element.
+     *
+     * @default false
+     */
+    keepTopElementActive: boolean;
+    /**
+     * Used to set scroll animation duration in milliseconds.
+     * @default null (browser's native animation implementation/duration)
+     */
+    animationDuration: number | null;
+}
+declare class ScrollSpy extends Component<ScrollSpyOptions> {
+    static _elements: ScrollSpy[];
+    static _count: number;
+    static _increment: number;
+    static _elementsInView: ScrollSpy[];
+    static _visibleElements: HTMLElement[];
+    static _ticks: number;
+    static _keptTopActiveElement: HTMLElement | null;
+    private tickId;
+    private id;
+    constructor(el: HTMLElement, options: Partial<ScrollSpyOptions>);
+    static get defaults(): ScrollSpyOptions;
+    /**
+     * Initializes instance of ScrollSpy.
+     * @param el HTML element.
+     * @param options Component options.
+     */
+    static init(el: HTMLElement, options?: Partial<ScrollSpyOptions>): ScrollSpy;
+    /**
+     * Initializes instances of ScrollSpy.
+     * @param els HTML elements.
+     * @param options Component options.
+     */
+    static init(els: InitElements<MElement>, options?: Partial<ScrollSpyOptions>): ScrollSpy[];
+    static getInstance(el: HTMLElement): ScrollSpy;
+    destroy(): void;
+    _setupEventHandlers(): void;
+    _removeEventHandlers(): void;
+    _handleThrottledResize: () => void;
+    _handleTriggerClick: (e: MouseEvent) => void;
+    _handleWindowScroll: () => void;
+    static _offset(el: any): {
+        top: number;
+        left: number;
+    };
+    static _findElements(top: number, right: number, bottom: number, left: number): ScrollSpy[];
+    _enter(): void;
+    _exit(): void;
+    private _resetKeptTopActiveElementIfNeeded;
+    private static _getDistanceToViewport;
+    private static _smoothScrollIntoView;
+}
+
+interface FormSelectOptions extends BaseOptions$1 {
+    /**
+     * Classes to be added to the select wrapper element.
+     * @default ""
+     */
+    classes: string;
+    /**
+     * Pass options object to select dropdown initialization.
+     * @default {}
+     */
+    dropdownOptions: Partial<DropdownOptions>;
+}
+type ValueStruct = {
+    el: HTMLOptionElement;
+    optionEl: HTMLElement;
+};
+declare class FormSelect extends Component<FormSelectOptions> {
+    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<FormSelectOptions>): FormSelect;
+    /**
+     * Initializes instances of FormSelect.
+     * @param els HTML elements.
+     * @param options Component options.
+     */
+    static init(els: InitElements<HTMLSelectElement | MElement>, options?: Partial<FormSelectOptions>): FormSelect[];
+    static getInstance(el: HTMLElement): FormSelect;
+    destroy(): void;
+    _setupEventHandlers(): void;
+    _removeEventHandlers(): void;
+    _handleSelectChange: () => void;
+    _handleOptionClick: (e: MouseEvent | KeyboardEvent) => void;
+    _arraysEqual<T, E>(a: T[], b: (E | T)[]): boolean;
+    _selectOptionElement(virtualOption: HTMLElement): void;
+    _handleInputClick: () => void;
+    _setupDropdown(): void;
+    _addOptionToValues(realOption: HTMLOptionElement, virtualOption: HTMLElement): void;
+    _removeDropdown(): void;
+    _createAndAppendOptionWithIcon(realOption: HTMLOptionElement | HTMLOptGroupElement, type: string): HTMLLIElement;
+    _selectValue(value: ValueStruct): void;
+    _deselectValue(value: ValueStruct): void;
+    _deselectAll(): void;
+    _isValueSelected(value: ValueStruct): boolean;
+    _toggleEntryFromArray(value: ValueStruct): void;
+    _getSelectedOptions(): HTMLOptionElement[];
+    _setValueToInput(): void;
+    _setSelectedStates(): void;
+    _activateOption(ul: HTMLElement, li: HTMLElement): void;
+    getSelectedValues(): string[];
+}
+
+interface SidenavOptions extends BaseOptions$1 {
+    /**
+     * Side of screen on which Sidenav appears.
+     * @default 'left'
+     */
+    edge: 'left' | 'right';
+    /**
+     * Allow swipe gestures to open/close Sidenav.
+     * @default true
+     */
+    draggable: boolean;
+    /**
+     * Width of the area where you can start dragging.
+     * @default '10px'
+     */
+    dragTargetWidth: string;
+    /**
+     * Length in ms of enter transition.
+     * @default 250
+     */
+    inDuration: number;
+    /**
+     * Length in ms of exit transition.
+     * @default 200
+     */
+    outDuration: number;
+    /**
+     * Prevent page from scrolling while sidenav is open.
+     * @default true
+     */
+    preventScrolling: boolean;
+    /**
+     * Function called when sidenav starts entering.
+     */
+    onOpenStart: (elem: HTMLElement) => void;
+    /**
+     * Function called when sidenav finishes entering.
+     */
+    onOpenEnd: (elem: HTMLElement) => void;
+    /**
+     * Function called when sidenav starts exiting.
+     */
+    onCloseStart: (elem: HTMLElement) => void;
+    /**
+     * Function called when sidenav finishes exiting.
+     */
+    onCloseEnd: (elem: HTMLElement) => void;
+}
+declare class Sidenav extends Component<SidenavOptions> 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<SidenavOptions>);
+    static get defaults(): SidenavOptions;
+    /**
+     * Initializes instance of Sidenav.
+     * @param el HTML element.
+     * @param options Component options.
+     */
+    static init(el: HTMLElement, options?: Partial<SidenavOptions>): Sidenav;
+    /**
+     * Initializes instances of Sidenav.
+     * @param els HTML elements.
+     * @param options Component options.
+     */
+    static init(els: InitElements<MElement>, options?: Partial<SidenavOptions>): Sidenav[];
+    static getInstance(el: HTMLElement): Sidenav;
+    destroy(): void;
+    private _createOverlay;
+    private _setupEventHandlers;
+    private _removeEventHandlers;
+    private _handleTriggerClick;
+    private _startDrag;
+    private _dragMoveUpdate;
+    private _handleDragTargetDrag;
+    private _handleDragTargetRelease;
+    private _handleCloseDrag;
+    private _calculateDelta;
+    private _handleCloseRelease;
+    private _handleCloseTriggerClick;
+    private _handleWindowResize;
+    private _setupClasses;
+    private _removeClasses;
+    private _setupFixed;
+    private _isDraggable;
+    private _isCurrentlyFixed;
+    private _createDragTarget;
+    private _preventBodyScrolling;
+    private _enableBodyScrolling;
+    /**
+     * Opens Sidenav.
+     */
+    open: () => void;
+    /**
+     * Closes Sidenav.
+     */
+    close: () => void;
+    private _animateIn;
+    private _animateOut;
+    private _animateSidenavIn;
+    private _animateSidenavOut;
+    private _animateOverlayIn;
+    private _animateOverlayOut;
+    private _setAriaHidden;
+    private _setTabIndex;
+}
+
+interface TabsOptions extends BaseOptions$1 {
+    /**
+     * Transition duration in milliseconds.
+     * @default 300
+     */
+    duration: number;
+    /**
+     * Callback for when a new tab content is shown.
+     * @default null
+     */
+    onShow: (newContent: Element) => void;
+    /**
+     * Set to true to enable swipeable tabs.
+     * This also uses the responsiveThreshold option.
+     * @default false
+     */
+    swipeable: boolean;
+    /**
+     * The maximum width of the screen, in pixels,
+     * where the swipeable functionality initializes.
+     * @default infinity
+     */
+    responsiveThreshold: number;
+}
+declare class Tabs extends Component<TabsOptions> {
+    _tabLinks: NodeListOf<HTMLAnchorElement>;
+    _index: number;
+    _indicator: HTMLLIElement;
+    _tabWidth: number;
+    _tabsWidth: number;
+    _tabsCarousel: Carousel;
+    _activeTabLink: HTMLAnchorElement;
+    _content: HTMLElement;
+    constructor(el: HTMLElement, options: Partial<TabsOptions>);
+    static get defaults(): TabsOptions;
+    /**
+     * Initializes instance of Tabs.
+     * @param el HTML element.
+     * @param options Component options.
+     */
+    static init(el: HTMLElement, options?: Partial<TabsOptions>): Tabs;
+    /**
+     * Initializes instances of Tabs.
+     * @param els HTML elements.
+     * @param options Component options.
+     */
+    static init(els: InitElements<MElement>, options?: Partial<TabsOptions>): Tabs[];
+    static getInstance(el: HTMLElement): Tabs;
+    destroy(): void;
+    /**
+     * The index of tab that is currently shown.
+     */
+    get index(): number;
+    _setupEventHandlers(): void;
+    _removeEventHandlers(): void;
+    _handleWindowResize: () => void;
+    _handleTabClick: (e: MouseEvent) => void;
+    _createIndicator(): void;
+    _setupActiveTabLink(): void;
+    _setupSwipeableTabs(): void;
+    _teardownSwipeableTabs(): void;
+    _setupNormalTabs(): void;
+    _teardownNormalTabs(): void;
+    _setTabsAndTabWidth(): void;
+    _calcRightPos(el: any): number;
+    _calcLeftPos(el: any): number;
+    /**
+     * Recalculate tab indicator position. This is useful when
+     * the indicator position is not correct.
+     */
+    updateTabIndicator(): void;
+    _animateIndicator(prevIndex: any): void;
+    /**
+     * Show tab content that corresponds to the tab with the id.
+     * @param tabId The id of the tab that you want to switch to.
+     */
+    select(tabId: string): void;
+}
+
+interface TapTargetOptions extends BaseOptions$1 {
+    /**
+     * Callback function called when Tap Target is opened.
+     * @default null
+     */
+    onOpen: (origin: HTMLElement) => void;
+    /**
+     * Callback function called when Tap Target is closed.
+     * @default null
+     */
+    onClose: (origin: HTMLElement) => void;
+}
+declare class TapTarget extends Component<TapTargetOptions> implements Openable {
+    /**
+     * If the tap target is open.
+     */
+    isOpen: boolean;
+    static _taptargets: TapTarget[];
+    private wrapper;
+    private originEl;
+    private waveEl;
+    private contentEl;
+    constructor(el: HTMLElement, options: Partial<TapTargetOptions>);
+    static get defaults(): TapTargetOptions;
+    /**
+     * Initializes instance of TapTarget.
+     * @param el HTML element.
+     * @param options Component options.
+     */
+    static init(el: HTMLElement, options?: Partial<TapTargetOptions>): TapTarget;
+    /**
+     * Initializes instances of TapTarget.
+     * @param els HTML elements.
+     * @param options Component options.
+     */
+    static init(els: InitElements<MElement>, options?: Partial<TapTargetOptions>): TapTarget[];
+    static getInstance(el: HTMLElement): TapTarget;
+    destroy(): void;
+    _setupEventHandlers(): void;
+    _removeEventHandlers(): void;
+    _handleThrottledResize: () => void;
+    _handleKeyboardInteraction: (e: KeyboardEvent) => void;
+    _handleTargetToggle: () => void;
+    _handleResize: () => void;
+    _handleDocumentClick: (e: MouseEvent | TouchEvent | KeyboardEvent) => void;
+    _setup(): void;
+    private _offset;
+    _calculatePositioning(): void;
+    /**
+     * Open Tap Target.
+     */
+    open: () => void;
+    /**
+     * Close Tap Target.
+     */
+    close: () => void;
+}
+
+type Views = 'hours' | 'minutes';
+interface TimepickerOptions extends BaseOptions$1 {
+    /**
+     * Dial radius.
+     * @default 135
+     */
+    dialRadius: number;
+    /**
+     * Outer radius.
+     * @default 105
+     */
+    outerRadius: number;
+    /**
+     * Inner radius.
+     * @default 70
+     */
+    innerRadius: number;
+    /**
+     * Tick radius.
+     * @default 20
+     */
+    tickRadius: number;
+    /**
+     * Duration of the transition from/to the hours/minutes view.
+     * @default 350
+     */
+    duration: number;
+    /**
+     * Specify a DOM element OR selector for a DOM element to render
+     * the time picker in, by default it will be placed before the input.
+     * @default null
+     */
+    container: HTMLElement | string | null;
+    /**
+     * Show the clear button in the Timepicker.
+     * @default false
+     */
+    showClearBtn: boolean;
+    /**
+     *  Autosubmit timepicker selection to input field
+     *  @default true
+     */
+    autoSubmit: true;
+    /**
+     * Default time to set on the timepicker 'now' or '13:14'.
+     * @default 'now';
+     */
+    defaultTime: string;
+    /**
+     * Millisecond offset from the defaultTime.
+     * @default 0
+     */
+    fromNow: number;
+    /**
+     * Internationalization options.
+     */
+    i18n: Partial<I18nOptions>;
+    /**
+     * Use 12 hour AM/PM clock instead of 24 hour clock.
+     * @default true
+     */
+    twelveHour: boolean;
+    /**
+     * Vibrate device when dragging clock hand.
+     * @default true
+     */
+    vibrate: boolean;
+    /**
+     * Callback function when a time is selected.
+     * @default null
+     */
+    onSelect: (hour: number, minute: number) => void;
+    /**
+     * Callback function for interaction with input field.
+     * @default null
+     */
+    onInputInteraction: (() => void) | null;
+    /**
+     * Callback function for done.
+     * @default null
+     */
+    onDone: (() => void) | null;
+    /**
+     * Callback function for cancel.
+     * @default null
+     */
+    onCancel: (() => void) | null;
+}
+type Point = {
+    x: number;
+    y: number;
+};
+declare class Timepicker extends Component<TimepickerOptions> {
+    el: HTMLInputElement;
+    id: string;
+    containerEl: HTMLElement;
+    plate: HTMLElement;
+    digitalClock: HTMLElement;
+    inputHours: HTMLInputElement;
+    inputMinutes: HTMLInputElement;
+    x0: number;
+    y0: number;
+    moved: boolean;
+    dx: number;
+    dy: number;
+    /**
+     * Current view on the timepicker.
+     * @default 'hours'
+     */
+    currentView: Views;
+    hand: SVGElement;
+    minutesView: HTMLElement;
+    hours: number;
+    minutes: number;
+    /** The selected time. */
+    time: string;
+    /**
+     * If the time is AM or PM on twelve-hour clock.
+     * @default 'PM'
+     */
+    amOrPm: 'AM' | 'PM';
+    static _template: any;
+    /** Vibrate device when dragging clock hand. */
+    vibrate: 'vibrate' | 'webkitVibrate' | null;
+    _canvas: HTMLElement;
+    hoursView: HTMLElement;
+    spanAmPm: HTMLSpanElement;
+    footer: HTMLElement;
+    private _amBtn;
+    private _pmBtn;
+    bg: Element;
+    bearing: Element;
+    g: Element;
+    toggleViewTimer: string | number | NodeJS.Timeout;
+    vibrateTimer: NodeJS.Timeout | number;
+    constructor(el: HTMLInputElement, options: Partial<TimepickerOptions>);
+    static get defaults(): TimepickerOptions;
+    /**
+     * Initializes instance of Timepicker.
+     * @param el HTML element.
+     * @param options Component options.
+     */
+    static init(el: HTMLInputElement, options?: Partial<TimepickerOptions>): Timepicker;
+    /**
+     * Initializes instances of Timepicker.
+     * @param els HTML elements.
+     * @param options Component options.
+     */
+    static init(els: InitElements<HTMLInputElement | MElement>, options?: Partial<TimepickerOptions>): Timepicker[];
+    static _addLeadingZero(num: number): string;
+    static _createSVGEl(name: string): SVGElement;
+    static _Pos(e: TouchEvent | MouseEvent): Point;
+    static getInstance(el: HTMLElement): Timepicker;
+    destroy(): void;
+    _setupEventHandlers(): void;
+    _removeEventHandlers(): void;
+    _handleInputClick: () => void;
+    _handleInputKeydown: (e: KeyboardEvent) => void;
+    _handleTimeInputEnterKey: (e: KeyboardEvent) => void;
+    _handleClockClickStart: (e: any) => void;
+    _handleDocumentClickMove: (e: any) => void;
+    _handleDocumentClickEnd: (e: any) => void;
+    _insertHTMLIntoDOM(): void;
+    _setupVariables(): void;
+    private _createButton;
+    _pickerSetup(): void;
+    _clockSetup(): void;
+    _buildSVGClock(): void;
+    _buildHoursView(): void;
+    _buildHoursTick(i: number, radian: number, radius: number): void;
+    _buildMinutesView(): void;
+    _handleAmPmClick: (e: MouseEvent) => void;
+    _handleAmPmKeypress: (e: KeyboardEvent) => void;
+    _handleAmPmInteraction: (e: HTMLElement) => void;
+    _updateAmPmView(): void;
+    _updateTimeFromInput(): void;
+    /**
+     * Show hours or minutes view on timepicker.
+     * @param view The name of the view you want to switch to, 'hours' or 'minutes'.
+     * @param delay
+     */
+    showView: (view: Views, delay?: number) => void;
+    resetClock(delay: any): void;
+    _inputFromTextField: () => void;
+    drawClockFromTimeInput(value: any, isHours: any): void;
+    setHand(x: any, y: any, roundBy5?: boolean): void;
+    setClockAttributes(radian: number, radius: number): void;
+    formatHours(): void;
+    formatMinutes(): void;
+    setHoursDefault(): void;
+    done: (clearValue?: any) => void;
+    confirm: () => void;
+    cancel: () => void;
+    clear: () => void;
+    open(): this;
+    close(): this;
+}
+
+type TooltipPosition = 'top' | 'right' | 'bottom' | 'left';
+interface TooltipOptions extends BaseOptions$1 {
+    /**
+     * Delay time before tooltip disappears.
+     * @default 200
+     */
+    exitDelay: number;
+    /**
+     * Delay time before tooltip appears.
+     * @default 0
+     */
+    enterDelay: number;
+    /**
+     * Element Id for the tooltip.
+     * @default ""
+     */
+    tooltipId?: string;
+    /**
+     * Text string for the tooltip.
+     * @default ""
+     */
+    text: string;
+    /**
+     * Set distance tooltip appears away from its activator
+     * excluding transitionMovement.
+     * @default 5
+     */
+    margin: number;
+    /**
+     * Enter transition duration.
+     * @default 300
+     */
+    inDuration: number;
+    /**
+     * Opacity of the tooltip.
+     * @default 1
+     */
+    opacity: number;
+    /**
+     * Exit transition duration.
+     * @default 250
+     */
+    outDuration: number;
+    /**
+     * Set the direction of the tooltip.
+     * @default 'bottom'
+     */
+    position: TooltipPosition;
+    /**
+     * Amount in px that the tooltip moves during its transition.
+     * @default 10
+     */
+    transitionMovement: number;
+}
+declare class Tooltip extends Component<TooltipOptions> {
+    /**
+     * 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<TooltipOptions>);
+    static get defaults(): TooltipOptions;
+    /**
+     * Initializes instance of Tooltip.
+     * @param el HTML element.
+     * @param options Component options.
+     */
+    static init(el: HTMLElement, options?: Partial<TooltipOptions>): Tooltip;
+    /**
+     * Initializes instances of Tooltip.
+     * @param els HTML elements.
+     * @param options Component options.
+     */
+    static init(els: InitElements<MElement>, options?: Partial<TooltipOptions>): 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<TooltipOptions>;
+}
+
+interface BaseOptions {
+}
+type InputElement = HTMLInputElement | HTMLTextAreaElement;
+declare class CharacterCounter extends Component<object> {
+    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<BaseOptions>);
+    static get defaults(): BaseOptions;
+    /**
+     * Initializes instance of CharacterCounter.
+     * @param el HTML element.
+     * @param options Component options.
+     */
+    static init(el: InputElement, options?: Partial<BaseOptions>): CharacterCounter;
+    /**
+     * Initializes instances of CharacterCounter.
+     * @param els HTML elements.
+     * @param options Component options.
+     */
+    static init(els: InitElements<InputElement | MElement>, options?: Partial<BaseOptions>): CharacterCounter[];
+    static getInstance(el: InputElement): CharacterCounter;
+    destroy(): void;
+    _setupEventHandlers(): void;
+    _removeEventHandlers(): void;
+    _setupCounter(): void;
+    _removeCounter(): void;
+    updateCounter: () => void;
+    _validateInput(): void;
+}
+
+declare class Forms {
+    /**
+     * Checks if the label has validation and apply
+     * the correct class and styles
+     * @param textfield
+     */
+    static validateField(textfield: HTMLInputElement): void;
+    /**
+     * Resizes the given TextArea after updating the
+     *  value content dynamically.
+     * @param e EventTarget
+     */
+    static textareaAutoResize(e: EventTarget): void;
+    static Init(): void;
+    static InitTextarea(textarea: HTMLTextAreaElement): void;
+    static InitFileInputPath(fileInput: HTMLInputElement): void;
+}
+
+interface SliderOptions extends BaseOptions$1 {
+    /**
+     * Set to false to hide slide indicators.
+     * @default true
+     */
+    indicators: boolean;
+    /**
+     * Set height of slider.
+     * @default 400
+     */
+    height: number;
+    /**
+     * Set the duration of the transition animation in ms.
+     * @default 500
+     */
+    duration: number;
+    /**
+     * Set the duration between transitions in ms.
+     * @default 6000
+     */
+    interval: number;
+    /**
+     * If slider should pause when keyboard focus is received.
+     * @default true
+     */
+    pauseOnFocus: boolean;
+    /**
+     * If slider should pause when is hovered by a pointer.
+     * @default true
+     */
+    pauseOnHover: boolean;
+    /**
+     * Optional function used to generate ARIA label to indicators (for accessibility purposes).
+     * @param index Current index, starting from "1".
+     * @param current A which indicates whether it is the current element or not
+     * @returns a string to be used as label indicator.
+     * @default null
+     */
+    indicatorLabelFunc: (index: number, current: boolean) => string;
+}
+declare class Slider extends Component<SliderOptions> {
+    /** 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<SliderOptions>);
+    static get defaults(): SliderOptions;
+    /**
+     * Initializes instance of Slider.
+     * @param el HTML element.
+     * @param options Component options.
+     */
+    static init(el: HTMLElement, options?: Partial<SliderOptions>): Slider;
+    /**
+     * Initializes instances of Slider.
+     * @param els HTML elements.
+     * @param options Component options.
+     */
+    static init(els: InitElements<MElement>, options?: Partial<SliderOptions>): Slider[];
+    static getInstance(el: HTMLElement): Slider;
+    destroy(): void;
+    private _setupEventHandlers;
+    private _removeEventHandlers;
+    private _handleIndicatorClick;
+    private _handleAutoPauseHover;
+    private _handleAutoPauseFocus;
+    private _handleAutoStartHover;
+    private _handleAutoStartFocus;
+    private _handleInterval;
+    private _animateSlide;
+    private _setSliderHeight;
+    private _setupIndicators;
+    private _removeIndicators;
+    set(index: number): void;
+    _pause(fromEvent: boolean): void;
+    /**
+     * Pause slider autoslide.
+     */
+    pause: () => void;
+    /**
+     * Start slider autoslide.
+     */
+    start: () => void;
+    /**
+     * Move to next slider.
+     */
+    next: () => void;
+    /**
+     * Move to prev slider.
+     */
+    prev: () => void;
+}
+
+interface ToastOptions extends BaseOptions$1 {
+    /**
+     * The content of the Toast.
+     * @default ""
+     */
+    text: string;
+    /**
+     * Element Id for the tooltip.
+     * @default ""
+     */
+    toastId?: string;
+    /**
+     * Length in ms the Toast stays before dismissal.
+     * @default 4000
+     */
+    displayLength: number;
+    /**
+     * Transition in duration in milliseconds.
+     * @default 300
+     */
+    inDuration: number;
+    /**
+     * Transition out duration in milliseconds.
+     * @default 375
+     */
+    outDuration: number;
+    /**
+     * Classes to be added to the toast element.
+     * @default ""
+     */
+    classes: string;
+    /**
+     * Callback function called when toast is dismissed.
+     * @default null
+     */
+    completeCallback: () => void;
+    /**
+     * The percentage of the toast's width it takes fora drag
+     * to dismiss a Toast.
+     * @default 0.8
+     */
+    activationPercent: number;
+}
+declare class Toast {
+    /** The toast element. */
+    el: HTMLElement;
+    /**
+     * The remaining amount of time in ms that the toast
+     * will stay before dismissal.
+     */
+    timeRemaining: number;
+    /**
+     * Describes the current pan state of the Toast.
+     */
+    panning: boolean;
+    options: ToastOptions;
+    message: string;
+    counterInterval: NodeJS.Timeout | number;
+    wasSwiped: boolean;
+    startingXPos: number;
+    xPos: number;
+    time: number;
+    deltaX: number;
+    velocityX: number;
+    static _toasts: Toast[];
+    static _container: HTMLElement;
+    static _draggedToast: Toast;
+    constructor(options: Partial<ToastOptions>);
+    static get defaults(): ToastOptions;
+    static getInstance(el: HTMLElement): Toast;
+    static _createContainer(): void;
+    static _removeContainer(): void;
+    static _onDragStart(e: TouchEvent | MouseEvent): void;
+    static _onDragMove(e: TouchEvent | MouseEvent): void;
+    static _onDragEnd(): void;
+    static _xPos(e: TouchEvent | MouseEvent): number;
+    /**
+     * dismiss all toasts.
+     */
+    static dismissAll(): void;
+    _createToast(): HTMLElement;
+    _animateIn(): void;
+    /**
+     * Create setInterval which automatically removes toast when timeRemaining >= 0
+     * has been reached.
+     */
+    _setTimer(): void;
+    /**
+     * Dismiss toast with animation.
+     */
+    dismiss(): void;
+}
+
+type RGBColor = {
+    r: number;
+    g: number;
+    b: number;
+};
+type Position = {
+    x: number;
+    y: number;
+};
+declare class Waves {
+    private static _offset;
+    static renderWaveEffect(targetElement: HTMLElement, position?: Position | null, color?: RGBColor | null): void;
+    static Init(): void;
+}
+
+interface RangeOptions extends BaseOptions$1 {
+}
+declare class Range extends Component<RangeOptions> {
+    el: HTMLInputElement;
+    private _mousedown;
+    value: HTMLElement;
+    thumb: HTMLElement;
+    constructor(el: HTMLInputElement, options: Partial<RangeOptions>);
+    static get defaults(): RangeOptions;
+    /**
+     * Initializes instance of Range.
+     * @param el HTML element.
+     * @param options Component options.
+     */
+    static init(el: HTMLInputElement, options?: Partial<RangeOptions>): Range;
+    /**
+     * Initializes instances of Range.
+     * @param els HTML elements.
+     * @param options Component options.
+     */
+    static init(els: InitElements<HTMLInputElement | MElement>, options?: Partial<RangeOptions>): Range[];
+    static getInstance(el: HTMLInputElement): Range;
+    destroy(): void;
+    _setupEventHandlers(): void;
+    _removeEventHandlers(): void;
+    _handleRangeChange: () => void;
+    _handleRangeMousedownTouchstart: (e: MouseEvent | TouchEvent) => void;
+    _handleRangeInputMousemoveTouchmove: () => void;
+    _handleRangeMouseupTouchend: () => void;
+    _handleRangeBlurMouseoutTouchleave: () => void;
+    _setupThumb(): void;
+    _removeThumb(): void;
+    _showRangeBubble(): void;
+    _calcRangeOffset(): number;
+    /**
+     * Initializes every range input in the current document.
+     */
+    static Init(): void;
+}
+
+declare const version = "2.2.1";
+interface AutoInitOptions {
+    Autocomplete?: Partial<AutocompleteOptions>;
+    Cards?: Partial<CardsOptions>;
+    Carousel?: Partial<CarouselOptions>;
+    Chips?: Partial<ChipsOptions>;
+    Collapsible?: Partial<CollapsibleOptions>;
+    Datepicker?: Partial<DatepickerOptions>;
+    Dropdown?: Partial<DropdownOptions>;
+    Materialbox?: Partial<MaterialboxOptions>;
+    Modal?: Partial<ModalOptions>;
+    Parallax?: Partial<ParallaxOptions>;
+    Pushpin?: Partial<PushpinOptions>;
+    ScrollSpy?: Partial<ScrollSpyOptions>;
+    FormSelect?: Partial<FormSelectOptions>;
+    Sidenav?: Partial<SidenavOptions>;
+    Tabs?: Partial<TabsOptions>;
+    TapTarget?: Partial<TapTargetOptions>;
+    Timepicker?: Partial<TimepickerOptions>;
+    Tooltip?: Partial<TooltipOptions>;
+    FloatingActionButton?: Partial<FloatingActionButtonOptions>;
+}
+/**
+ * Automatically initialize components.
+ * @param context Root element to initialize. Defaults to `document.body`.
+ * @param options Options for each component.
+ */
+declare function AutoInit(context?: HTMLElement, options?: Partial<AutoInitOptions>): void;
+
+export { AutoInit, type AutoInitOptions, Autocomplete, Cards, Carousel, CharacterCounter, Chips, Collapsible, Datepicker, Dropdown, FloatingActionButton, FormSelect, Forms, Materialbox, Modal, Parallax, Pushpin, Range, ScrollSpy, Sidenav, Slider, Tabs, TapTarget, Timepicker, Toast, Tooltip, Waves, version };
diff --git a/dist/js/materialize.js b/dist/js/materialize.js
new file mode 100644
index 0000000000..9ce7a51c63
--- /dev/null
+++ b/dist/js/materialize.js
@@ -0,0 +1,8009 @@
+/*!
+* Materialize v2.2.1 (https://materializeweb.com)
+* Copyright 2014-2025 Materialize
+* MIT License (https://raw.githubusercontent.com/materializecss/materialize/master/LICENSE)
+*/
+var M = (function (exports) {
+    'use strict';
+
+    /**
+     * Class with utilitary functions for global usage.
+     */
+    class Utils {
+        /** Specifies wether tab is pressed or not. */
+        static tabPressed = false;
+        /** Specifies wether there is a key pressed. */
+        static keyDown = false;
+        /**
+         * Key maps.
+         */
+        static keys = {
+            TAB: ['Tab'],
+            ENTER: ['Enter'],
+            ESC: ['Escape', 'Esc'],
+            BACKSPACE: ['Backspace'],
+            ARROW_UP: ['ArrowUp', 'Up'],
+            ARROW_DOWN: ['ArrowDown', 'Down'],
+            ARROW_LEFT: ['ArrowLeft', 'Left'],
+            ARROW_RIGHT: ['ArrowRight', 'Right'],
+            DELETE: ['Delete', 'Del']
+        };
+        /**
+         * Detects when a key is pressed.
+         * @param e Event instance.
+         */
+        static docHandleKeydown(e) {
+            Utils.keyDown = true;
+            if ([...Utils.keys.TAB, ...Utils.keys.ARROW_DOWN, ...Utils.keys.ARROW_UP].includes(e.key)) {
+                Utils.tabPressed = true;
+            }
+        }
+        /**
+         * Detects when a key is released.
+         * @param e Event instance.
+         */
+        static docHandleKeyup(e) {
+            Utils.keyDown = false;
+            if ([...Utils.keys.TAB, ...Utils.keys.ARROW_DOWN, ...Utils.keys.ARROW_UP].includes(e.key)) {
+                Utils.tabPressed = false;
+            }
+        }
+        /**
+         * Detects when document is focused.
+         * @param e Event instance.
+         */
+        /* eslint-disabled as of required event type condition check */
+        /* eslint-disable-next-line */
+        static docHandleFocus(e) {
+            if (Utils.keyDown) {
+                document.body.classList.add('keyboard-focused');
+            }
+        }
+        /**
+         * Detects when document is not focused.
+         * @param e Event instance.
+         */
+        /* eslint-disabled as of required event type condition check */
+        /* eslint-disable-next-line */
+        static docHandleBlur(e) {
+            document.body.classList.remove('keyboard-focused');
+        }
+        /**
+         * Generates a unique string identifier.
+         */
+        static guid() {
+            const s4 = () => {
+                return Math.floor((1 + Math.random()) * 0x10000)
+                    .toString(16)
+                    .substring(1);
+            };
+            return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
+        }
+        /**
+         * Checks for exceeded edges
+         * @param container Container element.
+         * @param bounding Bounding rect.
+         * @param offset Element offset.
+         */
+        static checkWithinContainer(container, bounding, offset) {
+            const edges = {
+                top: false,
+                right: false,
+                bottom: false,
+                left: false
+            };
+            const containerRect = container.getBoundingClientRect();
+            // If body element is smaller than viewport, use viewport height instead.
+            const containerBottom = container === document.body
+                ? Math.max(containerRect.bottom, window.innerHeight)
+                : containerRect.bottom;
+            const scrollLeft = container.scrollLeft;
+            const scrollTop = container.scrollTop;
+            const scrolledX = bounding.left - scrollLeft;
+            const scrolledY = bounding.top - scrollTop;
+            // Check for container and viewport for each edge
+            if (scrolledX < containerRect.left + offset || scrolledX < offset) {
+                edges.left = true;
+            }
+            if (scrolledX + bounding.width > containerRect.right - offset ||
+                scrolledX + bounding.width > window.innerWidth - offset) {
+                edges.right = true;
+            }
+            if (scrolledY < containerRect.top + offset || scrolledY < offset) {
+                edges.top = true;
+            }
+            if (scrolledY + bounding.height > containerBottom - offset ||
+                scrolledY + bounding.height > window.innerHeight - offset) {
+                edges.bottom = true;
+            }
+            return edges;
+        }
+        /**
+         * Checks if element can be aligned in multiple directions.
+         * @param el Element to be inspected.
+         * @param container Container element.
+         * @param bounding Bounding rect.
+         * @param offset Element offset.
+         */
+        static checkPossibleAlignments(el, container, bounding, offset) {
+            const canAlign = {
+                top: true,
+                right: true,
+                bottom: true,
+                left: true,
+                spaceOnTop: null,
+                spaceOnRight: null,
+                spaceOnBottom: null,
+                spaceOnLeft: null
+            };
+            const containerAllowsOverflow = getComputedStyle(container).overflow === 'visible';
+            const containerRect = container.getBoundingClientRect();
+            const containerHeight = Math.min(containerRect.height, window.innerHeight);
+            const containerWidth = Math.min(containerRect.width, window.innerWidth);
+            const elOffsetRect = el.getBoundingClientRect();
+            const scrollLeft = container.scrollLeft;
+            const scrollTop = container.scrollTop;
+            const scrolledX = bounding.left - scrollLeft;
+            const scrolledYTopEdge = bounding.top - scrollTop;
+            const scrolledYBottomEdge = bounding.top + elOffsetRect.height - scrollTop;
+            // Check for container and viewport for left
+            canAlign.spaceOnRight = !containerAllowsOverflow
+                ? containerWidth - (scrolledX + bounding.width)
+                : window.innerWidth - (elOffsetRect.left + bounding.width);
+            if (canAlign.spaceOnRight < 0) {
+                canAlign.left = false;
+            }
+            // Check for container and viewport for Right
+            canAlign.spaceOnLeft = !containerAllowsOverflow
+                ? scrolledX - bounding.width + elOffsetRect.width
+                : elOffsetRect.right - bounding.width;
+            if (canAlign.spaceOnLeft < 0) {
+                canAlign.right = false;
+            }
+            // Check for container and viewport for Top
+            canAlign.spaceOnBottom = !containerAllowsOverflow
+                ? containerHeight - (scrolledYTopEdge + bounding.height + offset)
+                : window.innerHeight - (elOffsetRect.top + bounding.height + offset);
+            if (canAlign.spaceOnBottom < 0) {
+                canAlign.top = false;
+            }
+            // Check for container and viewport for Bottom
+            canAlign.spaceOnTop = !containerAllowsOverflow
+                ? scrolledYBottomEdge - (bounding.height - offset)
+                : elOffsetRect.bottom - (bounding.height + offset);
+            if (canAlign.spaceOnTop < 0) {
+                canAlign.bottom = false;
+            }
+            return canAlign;
+        }
+        /**
+         * Retrieves target element id from trigger.
+         * @param trigger Trigger element.
+         */
+        static getIdFromTrigger(trigger) {
+            let id = trigger.dataset.target;
+            if (!id) {
+                id = trigger.getAttribute('href');
+                return id ? id.slice(1) : '';
+            }
+            return id;
+        }
+        /**
+         * Retrieves document scroll postion from top.
+         */
+        static getDocumentScrollTop() {
+            return window.scrollY || document.documentElement.scrollTop || document.body.scrollTop || 0;
+        }
+        /**
+         * Retrieves document scroll postion from left.
+         */
+        static getDocumentScrollLeft() {
+            return window.scrollX || document.documentElement.scrollLeft || document.body.scrollLeft || 0;
+        }
+        /**
+         * Fires the given function after a certain ammount of time.
+         * @param func Function to be fired.
+         * @param wait Wait time.
+         * @param options Additional options.
+         */
+        static throttle(func, wait, options = {}) {
+            let context, args, result, timeout = null, previous = 0;
+            const later = () => {
+                previous = options.leading === false ? 0 : new Date().getTime();
+                timeout = null;
+                result = func.apply(context, args);
+                context = args = null;
+            };
+            return (...args) => {
+                const now = new Date().getTime();
+                if (!previous && options.leading === false)
+                    previous = now;
+                const remaining = wait - (now - previous);
+                context = this;
+                if (remaining <= 0) {
+                    clearTimeout(timeout);
+                    timeout = null;
+                    previous = now;
+                    result = func.apply(context, args);
+                    context = args = null;
+                }
+                else if (!timeout && options.trailing !== false) {
+                    timeout = setTimeout(later, remaining);
+                }
+                return result;
+            };
+        }
+        /**
+         * Renders confirm/close buttons with callback function
+         */
+        static createConfirmationContainer(container, confirmText, cancelText, onConfirm, onCancel) {
+            const confirmationButtonsContainer = document.createElement('div');
+            confirmationButtonsContainer.classList.add('confirmation-btns');
+            container.append(confirmationButtonsContainer);
+            this.createButton(confirmationButtonsContainer, cancelText, ['btn-cancel'], true, onCancel);
+            this.createButton(confirmationButtonsContainer, confirmText, ['btn-confirm'], true, onConfirm);
+        }
+        /**
+         * Renders a button with optional callback function
+         */
+        static createButton(container, text, className = [], visibility = true, callback = null) {
+            className = className.concat(['btn', 'waves-effect', 'text']);
+            const button = document.createElement('button');
+            button.className = className.join(' ');
+            button.style.visibility = visibility ? 'visible' : 'hidden';
+            button.type = 'button';
+            button.tabIndex = !!visibility ? 0 : -1;
+            button.innerText = text;
+            button.addEventListener('click', callback);
+            button.addEventListener('keypress', (e) => {
+                if (Utils.keys.ENTER.includes(e.key))
+                    callback(e);
+            });
+            container.append(button);
+        }
+    }
+
+    /**
+     * Base class implementation for Materialize components.
+     */
+    class Component {
+        /**
+         * The DOM element the plugin was initialized with.
+         */
+        el;
+        /**
+         * The options the instance was initialized with.
+         */
+        options;
+        /**
+         * Constructs component instance and set everything up.
+         */
+        constructor(el, options, classDef) {
+            // Display error if el is not a valid HTML Element
+            if (!(el instanceof HTMLElement)) {
+                console.error(Error(el + ' is not an HTML Element'));
+            }
+            // If exists, destroy and reinitialize in child
+            const ins = classDef.getInstance(el);
+            if (!!ins) {
+                ins.destroy();
+            }
+            this.el = el;
+        }
+        /**
+         * Initializes component instances.
+         * @param els HTML elements.
+         * @param options Component options.
+         * @param classDef Class definition.
+         */
+        static init(els, options, classDef) {
+            let instances = null;
+            if (els instanceof Element) {
+                instances = new classDef(els, options);
+            }
+            else if (!!els && els.length) {
+                instances = [];
+                for (let i = 0; i < els.length; i++) {
+                    instances.push(new classDef(els[i], options));
+                }
+            }
+            return instances;
+        }
+        /**
+         * @returns default options for component instance.
+         */
+        static get defaults() {
+            return {};
+        }
+        /**
+         * Retrieves component instance for the given element.
+         * @param el Associated HTML Element.
+         */
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        static getInstance(el) {
+            throw new Error('This method must be implemented.');
+        }
+        /**
+         * Destroy plugin instance and teardown.
+         */
+        destroy() {
+            throw new Error('This method must be implemented.');
+        }
+    }
+
+    const _defaults$m = {
+        alignment: 'left',
+        autoFocus: true,
+        constrainWidth: true,
+        container: null,
+        coverTrigger: true,
+        closeOnClick: true,
+        hover: false,
+        inDuration: 150,
+        outDuration: 250,
+        onOpenStart: null,
+        onOpenEnd: null,
+        onCloseStart: null,
+        onCloseEnd: null,
+        onItemClick: null
+    };
+    class Dropdown extends Component {
+        static _dropdowns = [];
+        /** ID of the dropdown element. */
+        id;
+        /** The DOM element of the dropdown. */
+        dropdownEl;
+        /** If the dropdown is open. */
+        isOpen;
+        /** If the dropdown content is scrollable. */
+        isScrollable;
+        isTouchMoving;
+        /** The index of the item focused. */
+        focusedIndex;
+        filterQuery;
+        filterTimeout;
+        constructor(el, options) {
+            super(el, options, Dropdown);
+            this.el['M_Dropdown'] = this;
+            Dropdown._dropdowns.push(this);
+            this.id = Utils.getIdFromTrigger(el);
+            this.dropdownEl = document.getElementById(this.id);
+            this.options = {
+                ...Dropdown.defaults,
+                ...options
+            };
+            this.isOpen = false;
+            this.isScrollable = false;
+            this.isTouchMoving = false;
+            this.focusedIndex = -1;
+            this.filterQuery = [];
+            this.el.ariaExpanded = 'false';
+            // Move dropdown-content after dropdown-trigger
+            this._moveDropdown();
+            this._makeDropdownFocusable();
+            this._setupEventHandlers();
+        }
+        static get defaults() {
+            return _defaults$m;
+        }
+        /**
+         * Initializes instances of Dropdown.
+         * @param els HTML elements.
+         * @param options Component options.
+         */
+        static init(els, options = {}) {
+            return super.init(els, options, Dropdown);
+        }
+        static getInstance(el) {
+            return el['M_Dropdown'];
+        }
+        destroy() {
+            this._resetDropdownStyles();
+            this._removeEventHandlers();
+            Dropdown._dropdowns.splice(Dropdown._dropdowns.indexOf(this), 1);
+            this.el['M_Dropdown'] = undefined;
+        }
+        _setupEventHandlers() {
+            // Trigger keydown handler
+            this.el.addEventListener('keydown', this._handleTriggerKeydown);
+            // Item click handler
+            this.dropdownEl?.addEventListener('click', this._handleDropdownClick);
+            // Hover event handlers
+            if (this.options.hover) {
+                this.el.addEventListener('mouseenter', this._handleMouseEnter);
+                this.el.addEventListener('mouseleave', this._handleMouseLeave);
+                this.dropdownEl.addEventListener('mouseleave', this._handleMouseLeave);
+                // Click event handlers
+            }
+            else {
+                this.el.addEventListener('click', this._handleClick);
+            }
+        }
+        _removeEventHandlers() {
+            this.el.removeEventListener('keydown', this._handleTriggerKeydown);
+            this.dropdownEl.removeEventListener('click', this._handleDropdownClick);
+            if (this.options.hover) {
+                this.el.removeEventListener('mouseenter', this._handleMouseEnter);
+                this.el.removeEventListener('mouseleave', this._handleMouseLeave);
+                this.dropdownEl.removeEventListener('mouseleave', this._handleMouseLeave);
+            }
+            else {
+                this.el.removeEventListener('click', this._handleClick);
+            }
+        }
+        _setupTemporaryEventHandlers() {
+            document.body.addEventListener('click', this._handleDocumentClick);
+            document.body.addEventListener('touchmove', this._handleDocumentTouchmove);
+            this.dropdownEl.addEventListener('keydown', this._handleDropdownKeydown);
+            window.addEventListener('resize', this._handleWindowResize);
+        }
+        _removeTemporaryEventHandlers() {
+            document.body.removeEventListener('click', this._handleDocumentClick);
+            document.body.removeEventListener('touchmove', this._handleDocumentTouchmove);
+            this.dropdownEl.removeEventListener('keydown', this._handleDropdownKeydown);
+            window.removeEventListener('resize', this._handleWindowResize);
+        }
+        _handleClick = (e) => {
+            e.preventDefault();
+            this._moveDropdown(e.target.closest('li'));
+            if (this.isOpen) {
+                this.close();
+            }
+            else {
+                this.open();
+            }
+        };
+        _handleMouseEnter = (e) => {
+            this._moveDropdown(e.target.closest('li'));
+            this.open();
+        };
+        _handleMouseLeave = (e) => {
+            const toEl = e.relatedTarget;
+            const leaveToDropdownContent = !!toEl.closest('.dropdown-content');
+            let leaveToActiveDropdownTrigger = false;
+            const closestTrigger = toEl.closest('.dropdown-trigger');
+            if (closestTrigger && !!closestTrigger['M_Dropdown'] && closestTrigger['M_Dropdown'].isOpen) {
+                leaveToActiveDropdownTrigger = true;
+            }
+            // Close hover dropdown if mouse did not leave to either active dropdown-trigger or dropdown-content
+            if (!leaveToActiveDropdownTrigger && !leaveToDropdownContent) {
+                this.close();
+            }
+        };
+        _handleDocumentClick = (e) => {
+            const target = e.target;
+            if (this.options.closeOnClick && target.closest('.dropdown-content') && !this.isTouchMoving) {
+                // isTouchMoving to check if scrolling on mobile.
+                this.close();
+            }
+            else if (!target.closest('.dropdown-content')) {
+                // Do this one frame later so that if the element clicked also triggers _handleClick
+                // For example, if a label for a select was clicked, that we don't close/open the dropdown
+                setTimeout(() => {
+                    if (this.isOpen) {
+                        this.close();
+                    }
+                }, 0);
+            }
+            this.isTouchMoving = false;
+        };
+        _handleTriggerKeydown = (e) => {
+            // ARROW DOWN OR ENTER WHEN SELECT IS CLOSED - open Dropdown
+            const arrowDownOrEnter = Utils.keys.ARROW_DOWN.includes(e.key) || Utils.keys.ENTER.includes(e.key);
+            if (arrowDownOrEnter && !this.isOpen) {
+                e.preventDefault();
+                this.open();
+            }
+        };
+        _handleDocumentTouchmove = (e) => {
+            const target = e.target;
+            if (target.closest('.dropdown-content')) {
+                this.isTouchMoving = true;
+            }
+        };
+        _handleDropdownClick = (e) => {
+            // onItemClick callback
+            if (typeof this.options.onItemClick === 'function') {
+                const itemEl = e.target.closest('li');
+                this.options.onItemClick.call(this, itemEl);
+            }
+        };
+        _handleDropdownKeydown = (e) => {
+            const arrowUpOrDown = Utils.keys.ARROW_DOWN.includes(e.key) || Utils.keys.ARROW_UP.includes(e.key);
+            if (Utils.keys.TAB.includes(e.key)) {
+                e.preventDefault();
+                this.close();
+            }
+            // Navigate down dropdown list
+            else if (arrowUpOrDown && this.isOpen) {
+                e.preventDefault();
+                const direction = Utils.keys.ARROW_DOWN.includes(e.key) ? 1 : -1;
+                let newFocusedIndex = this.focusedIndex;
+                let hasFoundNewIndex = false;
+                do {
+                    newFocusedIndex = newFocusedIndex + direction;
+                    if (!!this.dropdownEl.children[newFocusedIndex] &&
+                        this.dropdownEl.children[newFocusedIndex].tabIndex !== -1) {
+                        hasFoundNewIndex = true;
+                        break;
+                    }
+                } while (newFocusedIndex < this.dropdownEl.children.length && newFocusedIndex >= 0);
+                if (hasFoundNewIndex) {
+                    // Remove active class from old element
+                    if (this.focusedIndex >= 0)
+                        this.dropdownEl.children[this.focusedIndex].classList.remove('active');
+                    this.focusedIndex = newFocusedIndex;
+                    this._focusFocusedItem();
+                }
+            }
+            // ENTER selects choice on focused item
+            else if (Utils.keys.ENTER.includes(e.key) && this.isOpen) {
+                // Search for <a> and <button>
+                const focusedElement = this.dropdownEl.children[this.focusedIndex];
+                const activatableElement = focusedElement.querySelector('a, button');
+                // Click a or button tag if exists, otherwise click li tag
+                if (!!activatableElement) {
+                    activatableElement.click();
+                }
+                else if (!!focusedElement) {
+                    if (focusedElement instanceof HTMLElement) {
+                        focusedElement.click();
+                    }
+                }
+            }
+            // Close dropdown on ESC
+            else if (Utils.keys.ESC.includes(e.key) && this.isOpen) {
+                e.preventDefault();
+                this.close();
+            }
+            // CASE WHEN USER TYPE LTTERS
+            const keyText = e.key.toLowerCase();
+            const isLetter = /[a-zA-Z0-9-_]/.test(keyText);
+            const specialKeys = [
+                ...Utils.keys.ARROW_DOWN,
+                ...Utils.keys.ARROW_UP,
+                ...Utils.keys.ENTER,
+                ...Utils.keys.ESC,
+                ...Utils.keys.TAB
+            ];
+            if (isLetter && !specialKeys.includes(e.key)) {
+                this.filterQuery.push(keyText);
+                const string = this.filterQuery.join('');
+                const newOptionEl = Array.from(this.dropdownEl.querySelectorAll('li')).find((el) => el.innerText.toLowerCase().indexOf(string) === 0);
+                if (newOptionEl) {
+                    this.focusedIndex = [...newOptionEl.parentNode.children].indexOf(newOptionEl);
+                    this._focusFocusedItem();
+                }
+            }
+            this.filterTimeout = setTimeout(this._resetFilterQuery, 1000);
+        };
+        _handleWindowResize = () => {
+            // Only re-place the dropdown if it's still visible
+            // Accounts for elements hiding via media queries
+            if (this.el.offsetParent) {
+                this.recalculateDimensions();
+            }
+        };
+        _resetFilterQuery = () => {
+            this.filterQuery = [];
+        };
+        _resetDropdownStyles() {
+            this.dropdownEl.style.display = '';
+            this._resetDropdownPositioningStyles();
+            this.dropdownEl.style.transform = '';
+            this.dropdownEl.style.opacity = '';
+        }
+        _resetDropdownPositioningStyles() {
+            this.dropdownEl.style.width = '';
+            this.dropdownEl.style.height = '';
+            this.dropdownEl.style.left = '';
+            this.dropdownEl.style.top = '';
+            this.dropdownEl.style.transformOrigin = '';
+        }
+        // Move dropdown after container or trigger
+        _moveDropdown(containerEl = null) {
+            if (!!this.options.container) {
+                this.options.container.append(this.dropdownEl);
+            }
+            else if (containerEl) {
+                if (!containerEl.contains(this.dropdownEl)) {
+                    containerEl.append(this.dropdownEl);
+                }
+            }
+            else {
+                this.el.after(this.dropdownEl);
+            }
+        }
+        _makeDropdownFocusable() {
+            if (!this.dropdownEl)
+                return;
+            this.dropdownEl.popover = '';
+            // Needed for arrow key navigation
+            this.dropdownEl.tabIndex = 0;
+            // Only set tabindex if it hasn't been set by user
+            Array.from(this.dropdownEl.children).forEach((el) => {
+                if (!el.getAttribute('tabindex'))
+                    el.setAttribute('tabindex', '0');
+            });
+        }
+        _focusFocusedItem() {
+            if (this.focusedIndex >= 0 &&
+                this.focusedIndex < this.dropdownEl.children.length &&
+                this.options.autoFocus) {
+                this.dropdownEl.children[this.focusedIndex].focus({
+                    preventScroll: true
+                });
+                this.dropdownEl.children[this.focusedIndex].scrollIntoView({
+                    behavior: 'smooth',
+                    block: 'nearest',
+                    inline: 'nearest'
+                });
+            }
+        }
+        _getDropdownPosition(closestOverflowParent) {
+            // const offsetParentBRect = this.el.offsetParent.getBoundingClientRect();
+            const triggerBRect = this.el.getBoundingClientRect();
+            const dropdownBRect = this.dropdownEl.getBoundingClientRect();
+            let idealHeight = dropdownBRect.height;
+            let idealWidth = dropdownBRect.width;
+            let idealXPos = triggerBRect.left - dropdownBRect.left;
+            let idealYPos = triggerBRect.top - dropdownBRect.top;
+            const dropdownBounds = {
+                left: idealXPos,
+                top: idealYPos,
+                height: idealHeight,
+                width: idealWidth
+            };
+            const alignments = Utils.checkPossibleAlignments(this.el, closestOverflowParent, dropdownBounds, this.options.coverTrigger ? 0 : triggerBRect.height);
+            let verticalAlignment = 'top';
+            let horizontalAlignment = this.options.alignment;
+            idealYPos += this.options.coverTrigger ? 0 : triggerBRect.height;
+            // Reset isScrollable
+            this.isScrollable = false;
+            if (!alignments.top) {
+                if (alignments.bottom) {
+                    verticalAlignment = 'bottom';
+                    if (!this.options.coverTrigger) {
+                        idealYPos -= triggerBRect.height;
+                    }
+                }
+                else {
+                    this.isScrollable = true;
+                    // Determine which side has most space and cutoff at correct height
+                    idealHeight -= 20; // Add padding when cutoff
+                    if (alignments.spaceOnTop > alignments.spaceOnBottom) {
+                        verticalAlignment = 'bottom';
+                        idealHeight += alignments.spaceOnTop;
+                        idealYPos -= this.options.coverTrigger
+                            ? alignments.spaceOnTop - 20
+                            : alignments.spaceOnTop - 20 + triggerBRect.height;
+                    }
+                    else {
+                        idealHeight += alignments.spaceOnBottom;
+                    }
+                }
+            }
+            // If preferred horizontal alignment is possible
+            if (!alignments[horizontalAlignment]) {
+                const oppositeAlignment = horizontalAlignment === 'left' ? 'right' : 'left';
+                if (alignments[oppositeAlignment]) {
+                    horizontalAlignment = oppositeAlignment;
+                }
+                else {
+                    // Determine which side has most space and cutoff at correct height
+                    if (alignments.spaceOnLeft > alignments.spaceOnRight) {
+                        horizontalAlignment = 'right';
+                        idealWidth += alignments.spaceOnLeft;
+                        idealXPos -= alignments.spaceOnLeft;
+                    }
+                    else {
+                        horizontalAlignment = 'left';
+                        idealWidth += alignments.spaceOnRight;
+                    }
+                }
+            }
+            if (verticalAlignment === 'bottom') {
+                idealYPos =
+                    idealYPos - dropdownBRect.height + (this.options.coverTrigger ? triggerBRect.height : 0);
+            }
+            if (horizontalAlignment === 'right') {
+                idealXPos = idealXPos - dropdownBRect.width + triggerBRect.width;
+            }
+            return {
+                x: idealXPos,
+                y: idealYPos,
+                verticalAlignment: verticalAlignment,
+                horizontalAlignment: horizontalAlignment,
+                height: idealHeight,
+                width: idealWidth
+            };
+        }
+        _animateIn() {
+            const duration = this.options.inDuration;
+            this.dropdownEl.style.transition = 'none';
+            // from
+            this.dropdownEl.style.opacity = '0';
+            this.dropdownEl.style.transform = 'scale(0.3, 0.3)';
+            setTimeout(() => {
+                // easeOutQuad (opacity) & easeOutQuint
+                this.dropdownEl.style.transition = `opacity ${duration}ms ease, transform ${duration}ms ease`;
+                // to
+                this.dropdownEl.style.opacity = '1';
+                this.dropdownEl.style.transform = 'scale(1, 1)';
+            }, 1);
+            setTimeout(() => {
+                if (this.options.autoFocus)
+                    this.dropdownEl.focus();
+                if (typeof this.options.onOpenEnd === 'function')
+                    this.options.onOpenEnd.call(this, this.el);
+            }, duration);
+        }
+        _animateOut() {
+            const duration = this.options.outDuration;
+            // easeOutQuad (opacity) & easeOutQuint
+            this.dropdownEl.style.transition = `opacity ${duration}ms ease, transform ${duration}ms ease`;
+            // to
+            this.dropdownEl.style.opacity = '0';
+            this.dropdownEl.style.transform = 'scale(0.3, 0.3)';
+            setTimeout(() => {
+                this._resetDropdownStyles();
+                if (typeof this.options.onCloseEnd === 'function')
+                    this.options.onCloseEnd.call(this, this.el);
+            }, duration);
+        }
+        _getClosestAncestor(el, condition) {
+            let ancestor = el.parentNode;
+            while (ancestor !== null && ancestor !== document) {
+                if (condition(ancestor)) {
+                    return ancestor;
+                }
+                ancestor = ancestor.parentElement;
+            }
+            return null;
+        }
+        _placeDropdown() {
+            // Container here will be closest ancestor with overflow: hidden
+            let closestOverflowParent = this._getClosestAncestor(this.dropdownEl, (ancestor) => {
+                return (!['HTML', 'BODY'].includes(ancestor.tagName) &&
+                    getComputedStyle(ancestor).overflow !== 'visible');
+            });
+            // Fallback
+            if (!closestOverflowParent) {
+                closestOverflowParent = ((!!this.dropdownEl.offsetParent ? this.dropdownEl.offsetParent : this.dropdownEl.parentNode));
+            }
+            if (getComputedStyle(closestOverflowParent).position === 'static')
+                closestOverflowParent.style.position = 'relative';
+            this._moveDropdown(closestOverflowParent);
+            // Set width before calculating positionInfo
+            const idealWidth = this.options.constrainWidth
+                ? this.el.getBoundingClientRect().width
+                : this.dropdownEl.getBoundingClientRect().width;
+            this.dropdownEl.style.width = idealWidth + 'px';
+            const positionInfo = this._getDropdownPosition(closestOverflowParent);
+            this.dropdownEl.style.left = positionInfo.x + 'px';
+            this.dropdownEl.style.top = positionInfo.y + 'px';
+            this.dropdownEl.style.height = positionInfo.height + 'px';
+            this.dropdownEl.style.width = positionInfo.width + 'px';
+            this.dropdownEl.style.transformOrigin = `${positionInfo.horizontalAlignment === 'left' ? '0' : '100%'} ${positionInfo.verticalAlignment === 'top' ? '0' : '100%'}`;
+        }
+        /**
+         * Open dropdown.
+         */
+        open = () => {
+            if (this.isOpen)
+                return;
+            this.isOpen = true;
+            // onOpenStart callback
+            if (typeof this.options.onOpenStart === 'function') {
+                this.options.onOpenStart.call(this, this.el);
+            }
+            // Reset styles
+            this._resetDropdownStyles();
+            this.dropdownEl.style.display = 'block';
+            this._placeDropdown();
+            this._animateIn();
+            // Do this one frame later so that we don't bind an event handler that's immediately
+            // called when the event bubbles up to the document and closes the dropdown
+            setTimeout(() => this._setupTemporaryEventHandlers(), 0);
+            this.el.ariaExpanded = 'true';
+        };
+        /**
+         * Close dropdown.
+         */
+        close = () => {
+            if (!this.isOpen)
+                return;
+            this.isOpen = false;
+            this.focusedIndex = -1;
+            // onCloseStart callback
+            if (typeof this.options.onCloseStart === 'function') {
+                this.options.onCloseStart.call(this, this.el);
+            }
+            this._animateOut();
+            this._removeTemporaryEventHandlers();
+            if (this.options.autoFocus) {
+                this.el.focus();
+            }
+            this.el.ariaExpanded = 'false';
+        };
+        /**
+         * While dropdown is open, you can recalculate its dimensions if its contents have changed.
+         */
+        recalculateDimensions = () => {
+            if (this.isOpen) {
+                this._resetDropdownPositioningStyles();
+                this._placeDropdown();
+            }
+        };
+    }
+
+    const _defaults$l = {
+        data: [], // Autocomplete data set
+        onAutocomplete: null, // Callback for when autocompleted
+        dropdownOptions: {
+            // Default dropdown options
+            autoFocus: false,
+            closeOnClick: false,
+            coverTrigger: false
+        },
+        minLength: 1, // Min characters before autocomplete starts
+        isMultiSelect: false,
+        onSearch: (text, autocomplete) => {
+            const normSearch = text.toLocaleLowerCase();
+            autocomplete.setMenuItems(autocomplete.options.data.filter((option) => option.id.toString().toLocaleLowerCase().includes(normSearch) ||
+                option.text?.toLocaleLowerCase().includes(normSearch)));
+        },
+        maxDropDownHeight: '300px',
+        allowUnsafeHTML: false
+    };
+    class Autocomplete extends Component {
+        /** If the autocomplete is open. */
+        isOpen;
+        /** Number of matching autocomplete options. */
+        count;
+        /** Index of the current selected option. */
+        activeIndex;
+        oldVal;
+        $active;
+        _mousedown;
+        container;
+        /** Instance of the dropdown plugin for this autocomplete. */
+        dropdown;
+        static _keydown;
+        selectedValues;
+        menuItems;
+        constructor(el, options) {
+            super(el, options, Autocomplete);
+            this.el['M_Autocomplete'] = this;
+            this.options = {
+                ...Autocomplete.defaults,
+                ...options
+            };
+            this.isOpen = false;
+            this.count = 0;
+            this.activeIndex = -1;
+            this.oldVal = '';
+            this.selectedValues = [];
+            this.menuItems = this.options.data || [];
+            this.$active = null;
+            this._mousedown = false;
+            this._setupDropdown();
+            this._setupEventHandlers();
+        }
+        static get defaults() {
+            return _defaults$l;
+        }
+        /**
+         * Initializes instances of Autocomplete.
+         * @param els HTML elements.
+         * @param options Component options.
+         */
+        static init(els, options = {}) {
+            return super.init(els, options, Autocomplete);
+        }
+        static getInstance(el) {
+            return el['M_Autocomplete'];
+        }
+        destroy() {
+            this._removeEventHandlers();
+            this._removeDropdown();
+            this.el['M_Autocomplete'] = undefined;
+        }
+        _setupEventHandlers() {
+            this.el.addEventListener('blur', this._handleInputBlur);
+            this.el.addEventListener('keyup', this._handleInputKeyup);
+            this.el.addEventListener('focus', this._handleInputFocus);
+            this.el.addEventListener('keydown', this._handleInputKeydown);
+            this.el.addEventListener('click', this._handleInputClick);
+            this.container.addEventListener('mousedown', this._handleContainerMousedownAndTouchstart);
+            this.container.addEventListener('mouseup', this._handleContainerMouseupAndTouchend);
+            if (typeof window.ontouchstart !== 'undefined') {
+                this.container.addEventListener('touchstart', this._handleContainerMousedownAndTouchstart);
+                this.container.addEventListener('touchend', this._handleContainerMouseupAndTouchend);
+            }
+        }
+        _removeEventHandlers() {
+            this.el.removeEventListener('blur', this._handleInputBlur);
+            this.el.removeEventListener('keyup', this._handleInputKeyup);
+            this.el.removeEventListener('focus', this._handleInputFocus);
+            this.el.removeEventListener('keydown', this._handleInputKeydown);
+            this.el.removeEventListener('click', this._handleInputClick);
+            this.container.removeEventListener('mousedown', this._handleContainerMousedownAndTouchstart);
+            this.container.removeEventListener('mouseup', this._handleContainerMouseupAndTouchend);
+            if (typeof window.ontouchstart !== 'undefined') {
+                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-${Utils.guid()}`;
+            this.container.classList.add('autocomplete-content', 'dropdown-content');
+            this.el.setAttribute('data-target', this.container.id);
+            this.menuItems.forEach((menuItem) => {
+                const itemElement = this._createDropdownItem(menuItem);
+                this.container.append(itemElement);
+            });
+            // ! Issue in Component Dropdown: _placeDropdown moves dom-position
+            this.el.parentElement.appendChild(this.container);
+            // Initialize dropdown
+            const dropdownOptions = {
+                ...Autocomplete.defaults.dropdownOptions,
+                ...this.options.dropdownOptions
+            };
+            // @todo shouldn't we conditionally check if dropdownOptions.onItemClick is set in first place?
+            const userOnItemClick = dropdownOptions.onItemClick;
+            // Ensuring the select Option call when user passes custom onItemClick function to dropdown
+            dropdownOptions.onItemClick = (li) => {
+                if (!li)
+                    return;
+                const entryID = li.getAttribute('data-id');
+                this.selectOption(entryID);
+                // Handle user declared onItemClick if needed
+                if (userOnItemClick && typeof userOnItemClick === 'function')
+                    userOnItemClick.call(this.dropdown, this.el);
+            };
+            this.dropdown = Dropdown.init(this.el, dropdownOptions);
+            // ! Workaround for Label: move label up again
+            // TODO: Just use PopperJS in future!
+            const label = this.el.parentElement.querySelector('label');
+            if (label)
+                this.el.after(label);
+            // Sketchy removal of dropdown click handler
+            this.el.removeEventListener('click', this.dropdown._handleClick);
+            // Set Value if already set in HTML
+            if (this.el.value)
+                this.selectOption(this.el.value);
+            // Add StatusInfo
+            const div = document.createElement('div');
+            div.classList.add('status-info');
+            div.setAttribute('style', 'position: absolute;right:0;top:0;');
+            this.el.parentElement.appendChild(div);
+            this._updateSelectedInfo();
+        }
+        _removeDropdown() {
+            this.container.parentNode.removeChild(this.container);
+        }
+        _handleInputBlur = () => {
+            if (!this._mousedown) {
+                this.close();
+                this._resetAutocomplete();
+            }
+        };
+        _handleInputKeyup = (e) => {
+            if (e.type === 'keyup')
+                Autocomplete._keydown = false;
+            this.count = 0;
+            const actualValue = this.el.value.toLocaleLowerCase();
+            // Don't capture enter or arrow key usage.
+            if (Utils.keys.ENTER.includes(e.key) ||
+                Utils.keys.ARROW_UP.includes(e.key) ||
+                Utils.keys.ARROW_DOWN.includes(e.key))
+                return;
+            // Check if the input isn't empty
+            // Check if focus triggered by tab
+            if (this.oldVal !== actualValue && Utils.tabPressed) {
+                this.open();
+            }
+            this._inputChangeDetection(actualValue);
+        };
+        _handleInputFocus = () => {
+            this.count = 0;
+            const actualValue = this.el.value.toLocaleLowerCase();
+            this._inputChangeDetection(actualValue);
+        };
+        _inputChangeDetection = (value) => {
+            // Value has changed!
+            if (this.oldVal !== value) {
+                this._setStatusLoading();
+                this.options.onSearch(this.el.value, this);
+            }
+            // Reset Single-Select when Input cleared
+            if (!this.options.isMultiSelect && this.el.value.length === 0) {
+                this.selectedValues = [];
+                this._triggerChanged();
+            }
+            this.oldVal = value;
+        };
+        _handleInputKeydown = (e) => {
+            Autocomplete._keydown = true;
+            // Arrow keys and enter key usage
+            const numItems = this.container.querySelectorAll('li').length;
+            // select element on Enter
+            if (Utils.keys.ENTER.includes(e.key) && this.activeIndex >= 0) {
+                const liElement = this.container.querySelectorAll('li')[this.activeIndex];
+                if (liElement) {
+                    this.selectOption(liElement.getAttribute('data-id'));
+                    e.preventDefault();
+                }
+                return;
+            }
+            // Capture up and down key
+            if (Utils.keys.ARROW_UP.includes(e.key) || Utils.keys.ARROW_DOWN.includes(e.key)) {
+                e.preventDefault();
+                if (Utils.keys.ARROW_UP.includes(e.key) && this.activeIndex > 0)
+                    this.activeIndex--;
+                if (Utils.keys.ARROW_DOWN.includes(e.key) && this.activeIndex < numItems - 1)
+                    this.activeIndex++;
+                this.$active?.classList.remove('active');
+                if (this.activeIndex >= 0) {
+                    this.$active = this.container.querySelectorAll('li')[this.activeIndex];
+                    this.$active?.classList.add('active');
+                    // Focus selected
+                    this.container.children[this.activeIndex].scrollIntoView({
+                        behavior: 'smooth',
+                        block: 'nearest',
+                        inline: 'nearest'
+                    });
+                }
+            }
+        };
+        _handleInputClick = () => {
+            this.open();
+        };
+        _handleContainerMousedownAndTouchstart = () => {
+            this._mousedown = true;
+        };
+        _handleContainerMouseupAndTouchend = () => {
+            this._mousedown = false;
+        };
+        _resetCurrentElementPosition() {
+            this.activeIndex = -1;
+            this.$active?.classList.remove('active');
+        }
+        _resetAutocomplete() {
+            this.container.replaceChildren();
+            this._resetCurrentElementPosition();
+            this.oldVal = null;
+            this.isOpen = false;
+            this._mousedown = false;
+        }
+        _highlightPartialText(input, label) {
+            const start = label.toLocaleLowerCase().indexOf('' + input.toLocaleLowerCase() + '');
+            const end = start + input.length - 1;
+            //custom filters may return results where the string does not match any part
+            if (start == -1 || end == -1) {
+                return [label, '', ''];
+            }
+            return [label.slice(0, start), label.slice(start, end + 1), label.slice(end + 1)];
+        }
+        _createDropdownItem(entry) {
+            const item = document.createElement('li');
+            item.setAttribute('data-id', entry.id);
+            item.setAttribute('style', 'display:grid; grid-auto-flow: column; user-select: none; align-items: center;');
+            // Checkbox
+            if (this.options.isMultiSelect) {
+                item.innerHTML = `
+        <div class="item-selection" style="text-align:center;">
+        <input type="checkbox"${this.selectedValues.some((sel) => sel.id === entry.id) ? ' checked="checked"' : ''}><span style="padding-left:21px;"></span>
+      </div>`;
+            }
+            // Image
+            if (entry.image) {
+                const img = document.createElement('img');
+                img.classList.add('circle');
+                img.src = entry.image;
+                item.appendChild(img);
+            }
+            // Text
+            const inputText = this.el.value.toLocaleLowerCase();
+            const parts = this._highlightPartialText(inputText, (entry.text || entry.id).toString());
+            const div = document.createElement('div');
+            div.setAttribute('style', 'line-height:1.2;font-weight:500;');
+            if (this.options.allowUnsafeHTML) {
+                div.innerHTML = parts[0] + '<span class="highlight">' + parts[1] + '</span>' + parts[2];
+            }
+            else {
+                div.appendChild(document.createTextNode(parts[0]));
+                if (parts[1]) {
+                    const highlight = document.createElement('span');
+                    highlight.textContent = parts[1];
+                    highlight.classList.add('highlight');
+                    div.appendChild(highlight);
+                    div.appendChild(document.createTextNode(parts[2]));
+                }
+            }
+            const itemText = document.createElement('div');
+            itemText.classList.add('item-text');
+            itemText.setAttribute('style', 'padding:5px;overflow:hidden;');
+            item.appendChild(itemText);
+            item.querySelector('.item-text').appendChild(div);
+            // Description
+            if (typeof entry.description === 'string' ||
+                (typeof entry.description === 'number' && !isNaN(entry.description))) {
+                const description = document.createElement('small');
+                description.setAttribute('style', 'line-height:1.3;color:grey;white-space:nowrap;text-overflow:ellipsis;display:block;width:90%;overflow:hidden;');
+                description.innerText = entry.description;
+                item.querySelector('.item-text').appendChild(description);
+            }
+            // Set Grid
+            const getGridConfig = () => {
+                if (this.options.isMultiSelect) {
+                    if (entry.image)
+                        return '40px min-content auto'; // cb-img-txt
+                    return '40px auto'; // cb-txt
+                }
+                if (entry.image)
+                    return 'min-content auto'; // img-txt
+                return 'auto'; // txt
+            };
+            item.style.gridTemplateColumns = getGridConfig();
+            return item;
+        }
+        _renderDropdown() {
+            this._resetAutocomplete();
+            // Check if Data is empty
+            if (this.menuItems.length === 0) {
+                this.menuItems = this.selectedValues; // Show selected Items
+            }
+            for (let i = 0; i < this.menuItems.length; i++) {
+                const item = this._createDropdownItem(this.menuItems[i]);
+                this.container.append(item);
+            }
+        }
+        _setStatusLoading() {
+            this.el.parentElement.querySelector('.status-info').innerHTML =
+                `<div style="height:100%;width:50px;"><svg version="1.1" id="L4" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 0 0" xml:space="preserve">
+    <circle fill="#888c" stroke="none" cx="6" cy="50" r="6"><animate attributeName="opacity" dur="1s" values="0;1;0" repeatCount="indefinite" begin="0.1"/></circle>
+    <circle fill="#888c" stroke="none" cx="26" cy="50" r="6"><animate attributeName="opacity" dur="1s" values="0;1;0" repeatCount="indefinite" begin="0.2"/></circle>
+    <circle fill="#888c" stroke="none" cx="46" cy="50" r="6"><animate attributeName="opacity" dur="1s" values="0;1;0" repeatCount="indefinite"  begin="0.3"/></circle>
+  </svg></div>`;
+        }
+        _updateSelectedInfo() {
+            const statusElement = this.el.parentElement.querySelector('.status-info');
+            if (statusElement) {
+                if (this.options.isMultiSelect)
+                    statusElement.innerHTML = this.selectedValues.length.toString();
+                else
+                    statusElement.innerHTML = '';
+            }
+        }
+        _refreshInputText() {
+            if (this.selectedValues.length === 1) {
+                const entry = this.selectedValues[0];
+                this.el.value = entry.text || entry.id; // Write Text to Input
+            }
+        }
+        _triggerChanged() {
+            this.el.dispatchEvent(new Event('change'));
+            // Trigger Autocomplete Event
+            if (typeof this.options.onAutocomplete === 'function')
+                this.options.onAutocomplete.call(this, this.selectedValues);
+        }
+        /**
+         * Show autocomplete.
+         */
+        open = () => {
+            const inputText = this.el.value.toLocaleLowerCase();
+            this._resetAutocomplete();
+            if (inputText.length >= this.options.minLength) {
+                this.isOpen = true;
+                this._renderDropdown();
+            }
+            // Open dropdown
+            if (!this.dropdown.isOpen) {
+                setTimeout(() => {
+                    this.dropdown.open();
+                }, 0); // TODO: why?
+            }
+            else
+                this.dropdown.recalculateDimensions(); // Recalculate dropdown when its already open
+        };
+        /**
+         * Hide autocomplete.
+         */
+        close = () => {
+            this.dropdown.close();
+        };
+        /**
+         * Updates the visible or selectable items shown in the menu.
+         * @param menuItems Items to be available.
+         */
+        setMenuItems(menuItems) {
+            this.menuItems = menuItems;
+            this.open();
+            this._updateSelectedInfo();
+        }
+        /**
+         * Sets selected values.
+         * @param entries
+         */
+        setValues(entries) {
+            this.selectedValues = entries;
+            this._updateSelectedInfo();
+            if (!this.options.isMultiSelect) {
+                this._refreshInputText();
+            }
+            this._triggerChanged();
+        }
+        /**
+         * Select a specific autocomplete option via id-property.
+         * @param id The id of a data-entry.
+         */
+        selectOption(id) {
+            const entry = this.menuItems.find((item) => item.id == id);
+            if (!entry)
+                return;
+            // Toggle Checkbox
+            const li = this.container.querySelector('li[data-id="' + id + '"]');
+            if (!li)
+                return;
+            if (this.options.isMultiSelect) {
+                const checkbox = li.querySelector('input[type="checkbox"]');
+                checkbox.checked = !checkbox.checked;
+                if (checkbox.checked)
+                    this.selectedValues.push(entry);
+                else
+                    this.selectedValues = this.selectedValues.filter((selectedEntry) => selectedEntry.id !== entry.id);
+                this.el.focus();
+            }
+            else {
+                // Single-Select
+                this.selectedValues = [entry];
+                this._refreshInputText();
+                this._resetAutocomplete();
+                this.close();
+            }
+            this._updateSelectedInfo();
+            this._triggerChanged();
+        }
+    }
+
+    const _defaults$k = {
+        direction: 'top',
+        hoverEnabled: true,
+        toolbarEnabled: false
+    };
+    class FloatingActionButton extends Component {
+        /**
+         * Describes open/close state of FAB.
+         */
+        isOpen;
+        _anchor;
+        _menu;
+        _floatingBtns;
+        _floatingBtnsReverse;
+        offsetY;
+        offsetX;
+        btnBottom;
+        btnLeft;
+        btnWidth;
+        constructor(el, options) {
+            super(el, options, FloatingActionButton);
+            this.el['M_FloatingActionButton'] = this;
+            this.options = {
+                ...FloatingActionButton.defaults,
+                ...options
+            };
+            this.isOpen = false;
+            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}`);
+            if (this.options.direction === 'top')
+                this.offsetY = 40;
+            else if (this.options.direction === 'right')
+                this.offsetX = -40;
+            else if (this.options.direction === 'bottom')
+                this.offsetY = -40;
+            else
+                this.offsetX = 40;
+            this._setupEventHandlers();
+        }
+        static get defaults() {
+            return _defaults$k;
+        }
+        /**
+         * Initializes instances of FloatingActionButton.
+         * @param els HTML elements.
+         * @param options Component options.
+         */
+        static init(els, options = {}) {
+            return super.init(els, options, FloatingActionButton);
+        }
+        static getInstance(el) {
+            return el['M_FloatingActionButton'];
+        }
+        destroy() {
+            this._removeEventHandlers();
+            this.el['M_FloatingActionButton'] = undefined;
+        }
+        _setupEventHandlers() {
+            if (this.options.hoverEnabled && !this.options.toolbarEnabled) {
+                this.el.addEventListener('mouseenter', this.open);
+                this.el.addEventListener('mouseleave', this.close);
+            }
+            else {
+                this.el.addEventListener('click', this._handleFABClick);
+            }
+        }
+        _removeEventHandlers() {
+            if (this.options.hoverEnabled && !this.options.toolbarEnabled) {
+                this.el.removeEventListener('mouseenter', this.open);
+                this.el.removeEventListener('mouseleave', this.close);
+            }
+            else {
+                this.el.removeEventListener('click', this._handleFABClick);
+            }
+        }
+        _handleFABClick = () => {
+            if (this.isOpen) {
+                this.close();
+            }
+            else {
+                this.open();
+            }
+        };
+        _handleDocumentClick = (e) => {
+            const elem = e.target;
+            if (elem !== this._menu)
+                this.close();
+        };
+        /**
+         * Open FAB.
+         */
+        open = () => {
+            if (this.isOpen)
+                return;
+            if (this.options.toolbarEnabled)
+                this._animateInToolbar();
+            else
+                this._animateInFAB();
+            this.isOpen = true;
+        };
+        /**
+         * Close FAB.
+         */
+        close = () => {
+            if (!this.isOpen)
+                return;
+            if (this.options.toolbarEnabled) {
+                window.removeEventListener('scroll', this.close, true);
+                document.body.removeEventListener('click', this._handleDocumentClick, true);
+            }
+            else {
+                this._animateOutFAB();
+            }
+            this.isOpen = false;
+        };
+        _animateInFAB() {
+            this.el.classList.add('active');
+            const delayIncrement = 40;
+            const duration = 275;
+            this._floatingBtnsReverse.forEach((el, index) => {
+                const delay = delayIncrement * index;
+                el.style.transition = 'none';
+                el.style.opacity = '0';
+                el.style.transform = `translate(${this.offsetX}px, ${this.offsetY}px) scale(0.4)`;
+                setTimeout(() => {
+                    // from:
+                    el.style.opacity = '0.4';
+                    // easeInOutQuad
+                    setTimeout(() => {
+                        // to:
+                        el.style.transition = `opacity ${duration}ms ease, transform ${duration}ms ease`;
+                        el.style.opacity = '1';
+                        el.style.transform = 'translate(0, 0) scale(1)';
+                    }, 1);
+                }, delay);
+            });
+        }
+        _animateOutFAB() {
+            const duration = 175;
+            setTimeout(() => this.el.classList.remove('active'), duration);
+            this._floatingBtnsReverse.forEach((el) => {
+                el.style.transition = `opacity ${duration}ms ease, transform ${duration}ms ease`;
+                // to
+                el.style.opacity = '0';
+                el.style.transform = `translate(${this.offsetX}px, ${this.offsetY}px) scale(0.4)`;
+            });
+        }
+        _animateInToolbar() {
+            const windowWidth = window.innerWidth;
+            const windowHeight = window.innerHeight;
+            const btnRect = this.el.getBoundingClientRect();
+            const backdrop = document.createElement('div'), scaleFactor = windowWidth / backdrop[0].clientWidth, fabColor = getComputedStyle(this._anchor).backgroundColor; // css('background-color');
+            backdrop.classList.add('fab-backdrop'); //  $('<div class="fab-backdrop"></div>');
+            backdrop.style.backgroundColor = fabColor;
+            this._anchor.append(backdrop);
+            this.offsetX = btnRect.left - windowWidth / 2 + btnRect.width / 2;
+            this.offsetY = windowHeight - btnRect.bottom;
+            this.btnBottom = btnRect.bottom;
+            this.btnLeft = btnRect.left;
+            this.btnWidth = btnRect.width;
+            // Set initial state
+            this.el.classList.add('active');
+            this.el.style.textAlign = 'center';
+            this.el.style.width = '100%';
+            this.el.style.bottom = '0';
+            this.el.style.left = '0';
+            this.el.style.transform = 'translateX(' + this.offsetX + 'px)';
+            this.el.style.transition = 'none';
+            this._anchor.style.transform = `translateY(${this.offsetY}px`;
+            this._anchor.style.transition = 'none';
+            setTimeout(() => {
+                this.el.style.transform = '';
+                this.el.style.transition =
+                    'transform .2s cubic-bezier(0.550, 0.085, 0.680, 0.530), background-color 0s linear .2s';
+                this._anchor.style.overflow = 'visible';
+                this._anchor.style.transform = '';
+                this._anchor.style.transition = 'transform .2s';
+                setTimeout(() => {
+                    this.el.style.overflow = 'hidden';
+                    this.el.style.backgroundColor = fabColor;
+                    backdrop.style.transform = 'scale(' + scaleFactor + ')';
+                    backdrop.style.transition = 'transform .2s cubic-bezier(0.550, 0.055, 0.675, 0.190)';
+                    this._menu
+                        .querySelectorAll('li > a')
+                        .forEach((a) => (a.style.opacity = '1'));
+                    // Scroll to close.
+                    window.addEventListener('scroll', this.close, true);
+                    document.body.addEventListener('click', this._handleDocumentClick, true);
+                }, 100);
+            }, 0);
+        }
+    }
+
+    const _defaults$j = {
+        onOpen: null,
+        onClose: null,
+        inDuration: 225,
+        outDuration: 300
+    };
+    class Cards extends Component {
+        isOpen = false;
+        cardReveal;
+        initialOverflow;
+        _activators;
+        cardRevealClose;
+        constructor(el, options) {
+            super(el, options, Cards);
+            this.el['M_Cards'] = this;
+            this.options = {
+                ...Cards.defaults,
+                ...options
+            };
+            this.cardReveal = this.el.querySelector('.card-reveal');
+            if (this.cardReveal) {
+                this.initialOverflow = getComputedStyle(this.el).overflow;
+                this._activators = Array.from(this.el.querySelectorAll('.activator'));
+                this._activators.forEach((el) => {
+                    if (el)
+                        el.tabIndex = 0;
+                });
+                this.cardRevealClose = this.cardReveal?.querySelector('.card-title');
+                if (this.cardRevealClose)
+                    this.cardRevealClose.tabIndex = -1;
+                this.cardReveal.ariaExpanded = 'false';
+                this._setupEventHandlers();
+            }
+        }
+        static get defaults() {
+            return _defaults$j;
+        }
+        /**
+         * Initializes instances of Cards.
+         * @param els HTML elements.
+         * @param options Component options.
+         */
+        static init(els, options) {
+            return super.init(els, options, Cards);
+        }
+        static getInstance(el) {
+            return el['M_Cards'];
+        }
+        /**
+         * {@inheritDoc}
+         */
+        destroy() {
+            this._removeEventHandlers();
+            this._activators = [];
+        }
+        _setupEventHandlers = () => {
+            this._activators.forEach((el) => {
+                el.addEventListener('click', this._handleClickInteraction);
+                el.addEventListener('keypress', this._handleKeypressEvent);
+            });
+        };
+        _removeEventHandlers = () => {
+            this._activators.forEach((el) => {
+                el.removeEventListener('click', this._handleClickInteraction);
+                el.removeEventListener('keypress', this._handleKeypressEvent);
+            });
+        };
+        _handleClickInteraction = () => {
+            this._handleRevealEvent();
+        };
+        _handleKeypressEvent = (e) => {
+            if (Utils.keys.ENTER.includes(e.key)) {
+                this._handleRevealEvent();
+            }
+        };
+        _handleRevealEvent = () => {
+            // Reveal Card
+            this._activators.forEach((el) => (el.tabIndex = -1));
+            this.open();
+        };
+        _setupRevealCloseEventHandlers = () => {
+            this.cardRevealClose.addEventListener('click', this.close);
+            this.cardRevealClose.addEventListener('keypress', this._handleKeypressCloseEvent);
+        };
+        _removeRevealCloseEventHandlers = () => {
+            this.cardRevealClose.addEventListener('click', this.close);
+            this.cardRevealClose.addEventListener('keypress', this._handleKeypressCloseEvent);
+        };
+        _handleKeypressCloseEvent = (e) => {
+            if (Utils.keys.ENTER.includes(e.key)) {
+                this.close();
+            }
+        };
+        /**
+         * Show card reveal.
+         */
+        open = () => {
+            if (this.isOpen)
+                return;
+            this.isOpen = true;
+            this.el.style.overflow = 'hidden';
+            this.cardReveal.style.display = 'block';
+            this.cardReveal.ariaExpanded = 'true';
+            this.cardRevealClose.tabIndex = 0;
+            setTimeout(() => {
+                this.cardReveal.style.transition = `transform ${this.options.outDuration}ms ease`; //easeInOutQuad
+                this.cardReveal.style.transform = 'translateY(-100%)';
+            }, 1);
+            if (typeof this.options.onOpen === 'function') {
+                this.options.onOpen.call(this);
+            }
+            this._setupRevealCloseEventHandlers();
+        };
+        /**
+         * Hide card reveal.
+         */
+        close = () => {
+            if (!this.isOpen)
+                return;
+            this.isOpen = false;
+            this.cardReveal.style.transition = `transform ${this.options.inDuration}ms ease`; //easeInOutQuad
+            this.cardReveal.style.transform = 'translateY(0)';
+            setTimeout(() => {
+                this.cardReveal.style.display = 'none';
+                this.cardReveal.ariaExpanded = 'false';
+                this._activators.forEach((el) => (el.tabIndex = 0));
+                this.cardRevealClose.tabIndex = -1;
+                this.el.style.overflow = this.initialOverflow;
+            }, this.options.inDuration);
+            if (typeof this.options.onClose === 'function') {
+                this.options.onClose.call(this);
+            }
+            this._removeRevealCloseEventHandlers();
+        };
+    }
+
+    const _defaults$i = {
+        duration: 200, // ms
+        dist: -100, // zoom scale TODO: make this more intuitive as an option
+        shift: 0, // spacing for center image
+        padding: 0, // Padding between non center items
+        numVisible: 5, // Number of visible items in carousel
+        fullWidth: false, // Change to full width styles
+        indicators: false, // Toggle indicators
+        noWrap: false, // Don't wrap around and cycle through items.
+        onCycleTo: null // Callback for when a new slide is cycled to.
+    };
+    class Carousel extends Component {
+        hasMultipleSlides;
+        showIndicators;
+        noWrap;
+        /** If the carousel is being clicked or tapped. */
+        pressed;
+        /** If the carousel is currently being dragged. */
+        dragged;
+        offset;
+        target;
+        images;
+        itemWidth;
+        itemHeight;
+        dim;
+        _indicators;
+        count;
+        xform;
+        verticalDragged;
+        reference;
+        referenceY;
+        velocity;
+        frame;
+        timestamp;
+        ticker;
+        amplitude;
+        /** The index of the center carousel item. */
+        center = 0;
+        imageHeight;
+        scrollingTimeout;
+        oneTimeCallback;
+        constructor(el, options) {
+            super(el, options, Carousel);
+            this.el['M_Carousel'] = this;
+            this.options = {
+                ...Carousel.defaults,
+                ...options
+            };
+            // Setup
+            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 = false;
+            this.dragged = false;
+            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 = this.itemWidth * 2 + this.options.padding || 1; // Make sure dim is non zero for divisions.
+            // Full Width carousel setup
+            if (this.options.fullWidth) {
+                this.options.dist = 0;
+                this._setCarouselHeight();
+                // Offset fixed items when indicators.
+                if (this.showIndicators) {
+                    this.el.querySelector('.carousel-fixed-item')?.classList.add('with-indicators');
+                }
+            }
+            // Iterate through slides
+            this._indicators = document.createElement('ul');
+            this._indicators.classList.add('indicators');
+            this.el.querySelectorAll('.carousel-item').forEach((item, i) => {
+                this.images.push(item);
+                if (this.showIndicators) {
+                    const indicator = document.createElement('li');
+                    indicator.classList.add('indicator-item');
+                    indicator.tabIndex = 0;
+                    if (i === 0) {
+                        indicator.classList.add('active');
+                    }
+                    this._indicators.appendChild(indicator);
+                }
+            });
+            if (this.showIndicators)
+                this.el.appendChild(this._indicators);
+            this.count = this.images.length;
+            // Cap numVisible at count
+            this.options.numVisible = Math.min(this.count, this.options.numVisible);
+            // Setup cross browser string
+            this.xform = 'transform';
+            ['webkit', 'Moz', 'O', 'ms'].every((prefix) => {
+                const e = prefix + 'Transform';
+                if (typeof document.body.style[e] !== 'undefined') {
+                    this.xform = e;
+                    return false;
+                }
+                return true;
+            });
+            this._setupEventHandlers();
+            this._scroll(this.offset);
+        }
+        static get defaults() {
+            return _defaults$i;
+        }
+        /**
+         * Initializes instances of Carousel.
+         * @param els HTML elements.
+         * @param options Component options.
+         */
+        static init(els, options = {}) {
+            return super.init(els, options, Carousel);
+        }
+        static getInstance(el) {
+            return el['M_Carousel'];
+        }
+        destroy() {
+            this._removeEventHandlers();
+            this.el['M_Carousel'] = undefined;
+        }
+        _setupEventHandlers() {
+            if (typeof window.ontouchstart !== 'undefined') {
+                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);
+            if (this.showIndicators && this._indicators) {
+                this._indicators.querySelectorAll('.indicator-item').forEach((el) => {
+                    el.addEventListener('click', this._handleIndicatorClick);
+                    el.addEventListener('keypress', this._handleIndicatorKeyPress);
+                });
+            }
+            // Resize
+            window.addEventListener('resize', this._handleThrottledResize);
+        }
+        _removeEventHandlers() {
+            if (typeof window.ontouchstart !== 'undefined') {
+                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);
+            if (this.showIndicators && this._indicators) {
+                this._indicators.querySelectorAll('.indicator-item').forEach((el) => {
+                    el.removeEventListener('click', this._handleIndicatorClick);
+                });
+            }
+            window.removeEventListener('resize', this._handleThrottledResize);
+        }
+        _handleThrottledResize = Utils.throttle(function () {
+            this._handleResize();
+        }, 200, null).bind(this);
+        _handleCarouselTap = (e) => {
+            // Fixes firefox draggable image bug
+            if (e.type === 'mousedown' && e.target.tagName === 'IMG') {
+                e.preventDefault();
+            }
+            this.pressed = true;
+            this.dragged = false;
+            this.verticalDragged = false;
+            this.reference = this._xpos(e);
+            this.referenceY = this._ypos(e);
+            this.velocity = this.amplitude = 0;
+            this.frame = this.offset;
+            this.timestamp = Date.now();
+            clearInterval(this.ticker);
+            this.ticker = setInterval(this._track, 100);
+        };
+        _handleCarouselDrag = (e) => {
+            let x, y, delta, deltaY;
+            if (this.pressed) {
+                x = this._xpos(e);
+                y = this._ypos(e);
+                delta = this.reference - x;
+                deltaY = Math.abs(this.referenceY - y);
+                if (deltaY < 30 && !this.verticalDragged) {
+                    // If vertical scrolling don't allow dragging.
+                    if (delta > 2 || delta < -2) {
+                        this.dragged = true;
+                        this.reference = x;
+                        this._scroll(this.offset + delta);
+                    }
+                }
+                else if (this.dragged) {
+                    // If dragging don't allow vertical scroll.
+                    e.preventDefault();
+                    e.stopPropagation();
+                    return false;
+                }
+                else {
+                    // Vertical scrolling.
+                    this.verticalDragged = true;
+                }
+            }
+            if (this.dragged) {
+                // If dragging don't allow vertical scroll.
+                e.preventDefault();
+                e.stopPropagation();
+                return false;
+            }
+        };
+        _handleCarouselRelease = (e) => {
+            if (this.pressed) {
+                this.pressed = false;
+            }
+            else {
+                return;
+            }
+            clearInterval(this.ticker);
+            this.target = this.offset;
+            if (this.velocity > 10 || this.velocity < -10) {
+                this.amplitude = 0.9 * this.velocity;
+                this.target = this.offset + this.amplitude;
+            }
+            this.target = Math.round(this.target / this.dim) * this.dim;
+            // No wrap of items.
+            if (this.noWrap) {
+                if (this.target >= this.dim * (this.count - 1)) {
+                    this.target = this.dim * (this.count - 1);
+                }
+                else if (this.target < 0) {
+                    this.target = 0;
+                }
+            }
+            this.amplitude = this.target - this.offset;
+            this.timestamp = Date.now();
+            requestAnimationFrame(this._autoScroll);
+            if (this.dragged) {
+                e.preventDefault();
+                e.stopPropagation();
+            }
+            return false;
+        };
+        _handleCarouselClick = (e) => {
+            // Disable clicks if carousel was dragged.
+            if (this.dragged) {
+                e.preventDefault();
+                e.stopPropagation();
+                return false;
+            }
+            else if (!this.options.fullWidth) {
+                const clickedElem = e.target.closest('.carousel-item');
+                if (!clickedElem)
+                    return;
+                const clickedIndex = [...clickedElem.parentNode.children].indexOf(clickedElem);
+                const diff = this._wrap(this.center) - clickedIndex;
+                // Disable clicks if carousel was shifted by click
+                if (diff !== 0) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                }
+                // fixes https://github.com/materializecss/materialize/issues/180
+                if (clickedIndex < 0) {
+                    // relative X position > center of carousel = clicked at the right part of the carousel
+                    if (e.clientX - e.target.getBoundingClientRect().left >
+                        this.el.clientWidth / 2) {
+                        this.next();
+                    }
+                    else {
+                        this.prev();
+                    }
+                }
+                else {
+                    this._cycleTo(clickedIndex);
+                }
+            }
+        };
+        _handleIndicatorClick = (e) => {
+            e.stopPropagation();
+            this._handleIndicatorInteraction(e);
+        };
+        _handleIndicatorKeyPress = (e) => {
+            e.stopPropagation();
+            if (Utils.keys.ENTER.includes(e.key)) {
+                this._handleIndicatorInteraction(e);
+            }
+        };
+        _handleIndicatorInteraction = (e) => {
+            const indicator = e.target.closest('.indicator-item');
+            if (indicator) {
+                const index = [...indicator.parentNode.children].indexOf(indicator);
+                this._cycleTo(index);
+            }
+        };
+        _handleResize = () => {
+            if (this.options.fullWidth) {
+                this.itemWidth = this.el.querySelector('.carousel-item').clientWidth;
+                this.imageHeight = this.el.querySelector('.carousel-item.active').clientHeight;
+                this.dim = this.itemWidth * 2 + this.options.padding;
+                this.offset = this.center * 2 * this.itemWidth;
+                this.target = this.offset;
+                this._setCarouselHeight(true);
+            }
+            else {
+                this._scroll();
+            }
+        };
+        _setCarouselHeight(imageOnly = false) {
+            const firstSlide = this.el.querySelector('.carousel-item.active')
+                ? this.el.querySelector('.carousel-item.active')
+                : this.el.querySelector('.carousel-item');
+            const firstImage = firstSlide.querySelector('img');
+            if (firstImage) {
+                if (firstImage.complete) {
+                    // If image won't trigger the load event
+                    const imageHeight = firstImage.clientHeight;
+                    if (imageHeight > 0) {
+                        this.el.style.height = imageHeight + 'px';
+                    }
+                    else {
+                        // If image still has no height, use the natural dimensions to calculate
+                        const naturalWidth = firstImage.naturalWidth;
+                        const naturalHeight = firstImage.naturalHeight;
+                        const adjustedHeight = (this.el.clientWidth / naturalWidth) * naturalHeight;
+                        this.el.style.height = adjustedHeight + 'px';
+                    }
+                }
+                else {
+                    // Get height when image is loaded normally
+                    firstImage.addEventListener('load', () => {
+                        this.el.style.height = firstImage.offsetHeight + 'px';
+                    });
+                }
+            }
+            else if (!imageOnly) {
+                const slideHeight = firstSlide.clientHeight;
+                this.el.style.height = slideHeight + 'px';
+            }
+        }
+        _xpos(e) {
+            // touch event
+            if (e.type.startsWith('touch') && e.targetTouches.length >= 1) {
+                return e.targetTouches[0].clientX;
+            }
+            // mouse event
+            return e.clientX;
+        }
+        _ypos(e) {
+            // touch event
+            if (e.type.startsWith('touch') && e.targetTouches.length >= 1) {
+                return e.targetTouches[0].clientY;
+            }
+            // mouse event
+            return e.clientY;
+        }
+        _wrap(x) {
+            return x >= this.count ? x % this.count : x < 0 ? this._wrap(this.count + (x % this.count)) : x;
+        }
+        _track = () => {
+            const now = Date.now(), elapsed = now - this.timestamp, delta = this.offset - this.frame, v = (1000 * delta) / (1 + elapsed);
+            // now = Date.now();
+            // elapsed = now - this.timestamp;
+            this.timestamp = now;
+            // delta = this.offset - this.frame;
+            this.frame = this.offset;
+            // v = (1000 * delta) / (1 + elapsed);
+            this.velocity = 0.8 * v + 0.2 * this.velocity;
+        };
+        _autoScroll = () => {
+            let elapsed, delta;
+            if (this.amplitude) {
+                elapsed = Date.now() - this.timestamp;
+                delta = this.amplitude * Math.exp(-elapsed / this.options.duration);
+                if (delta > 2 || delta < -2) {
+                    this._scroll(this.target - delta);
+                    requestAnimationFrame(this._autoScroll);
+                }
+                else {
+                    this._scroll(this.target);
+                }
+            }
+        };
+        _scroll(x = 0) {
+            // Track scrolling state
+            if (!this.el.classList.contains('scrolling')) {
+                this.el.classList.add('scrolling');
+            }
+            if (this.scrollingTimeout != null) {
+                clearTimeout(this.scrollingTimeout);
+            }
+            this.scrollingTimeout = setTimeout(() => {
+                this.el.classList.remove('scrolling');
+            }, this.options.duration);
+            // Start actual scroll
+            this.offset = typeof x === 'number' ? x : this.offset;
+            this.center = Math.floor((this.offset + this.dim / 2) / this.dim);
+            const half = this.count >> 1, delta = this.offset - this.center * this.dim, dir = delta < 0 ? 1 : -1, tween = (-dir * delta * 2) / this.dim;
+            let i, el, alignment, zTranslation, tweenedOpacity, centerTweenedOpacity;
+            const lastCenter = this.center;
+            const numVisibleOffset = 1 / this.options.numVisible;
+            // delta = this.offset - this.center * this.dim;
+            // dir = delta < 0 ? 1 : -1;
+            // tween = (-dir * delta * 2) / this.dim;
+            // half = this.count >> 1;
+            if (this.options.fullWidth) {
+                alignment = 'translateX(0)';
+                centerTweenedOpacity = 1;
+            }
+            else {
+                alignment = 'translateX(' + (this.el.clientWidth - this.itemWidth) / 2 + 'px) ';
+                alignment += 'translateY(' + (this.el.clientHeight - this.itemHeight) / 2 + 'px)';
+                centerTweenedOpacity = 1 - numVisibleOffset * tween;
+            }
+            // Set indicator active
+            if (this.showIndicators) {
+                const diff = this.center % this.count;
+                const activeIndicator = this._indicators.querySelector('.indicator-item.active');
+                const activeIndicatorIndex = [...activeIndicator.parentNode.children].indexOf(activeIndicator);
+                if (activeIndicatorIndex !== diff) {
+                    activeIndicator.classList.remove('active');
+                    const pos = diff < 0 ? this.count + diff : diff;
+                    this._indicators.querySelectorAll('.indicator-item')[pos].classList.add('active');
+                }
+            }
+            // center
+            // Don't show wrapped items.
+            if (!this.noWrap || (this.center >= 0 && this.center < this.count)) {
+                el = this.images[this._wrap(this.center)];
+                // Add active class to center item.
+                if (!el.classList.contains('active')) {
+                    this.el.querySelector('.carousel-item').classList.remove('active');
+                    el.classList.add('active');
+                }
+                const transformString = `${alignment} translateX(${-delta / 2}px) translateX(${dir * this.options.shift * tween * i}px) translateZ(${this.options.dist * tween}px)`;
+                this._updateItemStyle(el, centerTweenedOpacity, 0, transformString);
+            }
+            for (i = 1; i <= half; ++i) {
+                // right side
+                if (this.options.fullWidth) {
+                    zTranslation = this.options.dist;
+                    tweenedOpacity = i === half && delta < 0 ? 1 - tween : 1;
+                }
+                else {
+                    zTranslation = this.options.dist * (i * 2 + tween * dir);
+                    tweenedOpacity = 1 - numVisibleOffset * (i * 2 + tween * dir);
+                }
+                // Don't show wrapped items.
+                if (!this.noWrap || this.center + i < this.count) {
+                    el = this.images[this._wrap(this.center + i)];
+                    const transformString = `${alignment} translateX(${this.options.shift + (this.dim * i - delta) / 2}px) translateZ(${zTranslation}px)`;
+                    this._updateItemStyle(el, tweenedOpacity, -i, transformString);
+                }
+                // left side
+                if (this.options.fullWidth) {
+                    zTranslation = this.options.dist;
+                    tweenedOpacity = i === half && delta > 0 ? 1 - tween : 1;
+                }
+                else {
+                    zTranslation = this.options.dist * (i * 2 - tween * dir);
+                    tweenedOpacity = 1 - numVisibleOffset * (i * 2 - tween * dir);
+                }
+                // Don't show wrapped items.
+                if (!this.noWrap || this.center - i >= 0) {
+                    el = this.images[this._wrap(this.center - i)];
+                    const transformString = `${alignment} translateX(${-this.options.shift + (-this.dim * i - delta) / 2}px) translateZ(${zTranslation}px)`;
+                    this._updateItemStyle(el, tweenedOpacity, -i, transformString);
+                }
+            }
+            // center
+            // Don't show wrapped items.
+            if (!this.noWrap || (this.center >= 0 && this.center < this.count)) {
+                el = this.images[this._wrap(this.center)];
+                const transformString = `${alignment} translateX(${-delta / 2}px) translateX(${dir * this.options.shift * tween}px) translateZ(${this.options.dist * tween}px)`;
+                this._updateItemStyle(el, centerTweenedOpacity, 0, transformString);
+            }
+            // onCycleTo callback
+            const _currItem = this.el.querySelectorAll('.carousel-item')[this._wrap(this.center)];
+            if (lastCenter !== this.center && typeof this.options.onCycleTo === 'function') {
+                this.options.onCycleTo.call(this, _currItem, this.dragged);
+            }
+            // One time callback
+            if (typeof this.oneTimeCallback === 'function') {
+                this.oneTimeCallback.call(this, _currItem, this.dragged);
+                this.oneTimeCallback = null;
+            }
+        }
+        _updateItemStyle(el, opacity, zIndex, transform) {
+            el.style[this.xform] = transform;
+            el.style.zIndex = zIndex.toString();
+            el.style.opacity = opacity.toString();
+            el.style.visibility = 'visible';
+        }
+        _cycleTo(n, callback = null) {
+            let diff = (this.center % this.count) - n;
+            // Account for wraparound.
+            if (!this.noWrap) {
+                if (diff < 0) {
+                    if (Math.abs(diff + this.count) < Math.abs(diff)) {
+                        diff += this.count;
+                    }
+                }
+                else if (diff > 0) {
+                    if (Math.abs(diff - this.count) < diff) {
+                        diff -= this.count;
+                    }
+                }
+            }
+            this.target = this.dim * Math.round(this.offset / this.dim);
+            // Next
+            if (diff < 0) {
+                this.target += this.dim * Math.abs(diff);
+            } // Prev
+            else if (diff > 0) {
+                this.target -= this.dim * diff;
+            }
+            // Set one time callback
+            if (typeof callback === 'function') {
+                this.oneTimeCallback = callback;
+            }
+            // Scroll
+            if (this.offset !== this.target) {
+                this.amplitude = this.target - this.offset;
+                this.timestamp = Date.now();
+                requestAnimationFrame(this._autoScroll);
+            }
+        }
+        /**
+         * Move carousel to next slide or go forward a given amount of slides.
+         * @param n How many times the carousel slides.
+         */
+        next(n = 1) {
+            if (n === undefined || isNaN(n)) {
+                n = 1;
+            }
+            let index = this.center + n;
+            if (index >= this.count || index < 0) {
+                if (this.noWrap)
+                    return;
+                index = this._wrap(index);
+            }
+            this._cycleTo(index);
+        }
+        /**
+         * Move carousel to previous slide or go back a given amount of slides.
+         * @param n How many times the carousel slides.
+         */
+        prev(n = 1) {
+            if (n === undefined || isNaN(n)) {
+                n = 1;
+            }
+            let index = this.center - n;
+            if (index >= this.count || index < 0) {
+                if (this.noWrap)
+                    return;
+                index = this._wrap(index);
+            }
+            this._cycleTo(index);
+        }
+        /**
+         * Move carousel to nth slide.
+         * @param n Index of slide.
+         * @param callback "onCycleTo" optional callback.
+         */
+        set(n, callback) {
+            if (n === undefined || isNaN(n)) {
+                n = 0;
+            }
+            if (n > this.count || n < 0) {
+                if (this.noWrap)
+                    return;
+                n = this._wrap(n);
+            }
+            this._cycleTo(n, callback);
+        }
+    }
+
+    const _defaults$h = {
+        data: [],
+        placeholder: '',
+        secondaryPlaceholder: '',
+        closeIconClass: 'material-icons',
+        autocompleteOptions: {},
+        autocompleteOnly: false,
+        limit: Infinity,
+        allowUserInput: false,
+        onChipAdd: null,
+        onChipSelect: null,
+        onChipDelete: null
+    };
+    function gGetIndex(el) {
+        return [...el.parentNode.children].indexOf(el);
+    }
+    class Chips extends Component {
+        /** Array of the current chips data. */
+        chipsData;
+        /** If the chips has autocomplete enabled. */
+        hasAutocomplete;
+        /** Autocomplete instance, if any. */
+        autocomplete;
+        _input;
+        _label;
+        _chips;
+        static _keydown;
+        _selectedChip;
+        constructor(el, options) {
+            super(el, options, Chips);
+            this.el['M_Chips'] = this;
+            this.options = {
+                ...Chips.defaults,
+                ...options
+            };
+            this.el.classList.add('chips');
+            this.chipsData = [];
+            this._chips = [];
+            // Render initial chips
+            if (this.options.data.length) {
+                this.chipsData = this.options.data;
+                this._renderChips();
+            }
+            this._setupLabel();
+            // Render input element, setup event handlers
+            if (this.options.allowUserInput) {
+                this.el.classList.add('input-field');
+                this._setupInput();
+                this._setupEventHandlers();
+                // move input to end
+                this.el.append(this._input);
+            }
+        }
+        static get defaults() {
+            return _defaults$h;
+        }
+        /**
+         * Initializes instances of Chips.
+         * @param els HTML elements.
+         * @param options Component options.
+         */
+        static init(els, options = {}) {
+            return super.init(els, options, Chips);
+        }
+        static getInstance(el) {
+            return el['M_Chips'];
+        }
+        getData() {
+            return this.chipsData;
+        }
+        destroy() {
+            if (this.options.allowUserInput) {
+                this._removeEventHandlers();
+            }
+            this._chips.forEach((c) => c.remove());
+            this._chips = [];
+            this.el['M_Chips'] = undefined;
+        }
+        _setupEventHandlers() {
+            this.el.addEventListener('click', this._handleChipClick);
+            // @todo why do we need this as document event listener, shouldn't we apply it to the element wrapper itself?
+            document.addEventListener('keydown', Chips._handleChipsKeydown);
+            document.addEventListener('keyup', Chips._handleChipsKeyup);
+            this.el.addEventListener('blur', Chips._handleChipsBlur, true);
+            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', Chips._handleChipsKeydown);
+            document.removeEventListener('keyup', Chips._handleChipsKeyup);
+            this.el.removeEventListener('blur', Chips._handleChipsBlur, true);
+            this._input.removeEventListener('focus', this._handleInputFocus);
+            this._input.removeEventListener('blur', this._handleInputBlur);
+            this._input.removeEventListener('keydown', this._handleInputKeydown);
+        }
+        _handleChipClick = (e) => {
+            const _chip = e.target.closest('.chip');
+            const clickedClose = e.target.classList.contains('close');
+            if (_chip) {
+                const index = [..._chip.parentNode.children].indexOf(_chip);
+                if (clickedClose) {
+                    this.deleteChip(index);
+                    this._input.focus();
+                }
+                else {
+                    this.selectChip(index);
+                }
+                // Default handle click to focus on input
+            }
+            else {
+                this._input.focus();
+            }
+        };
+        static _handleChipsKeydown(e) {
+            Chips._keydown = true;
+            const chips = e.target.closest('.chips');
+            const chipsKeydown = e.target && chips;
+            // Don't handle keydown inputs on input and textarea
+            const tag = e.target.tagName;
+            if (tag === 'INPUT' || tag === 'TEXTAREA' || !chipsKeydown)
+                return;
+            const currChips = chips['M_Chips'];
+            if (Utils.keys.BACKSPACE.includes(e.key) || Utils.keys.DELETE.includes(e.key)) {
+                e.preventDefault();
+                let selectIndex = currChips.chipsData.length;
+                if (currChips._selectedChip) {
+                    const index = gGetIndex(currChips._selectedChip);
+                    currChips.deleteChip(index);
+                    currChips._selectedChip = null;
+                    // Make sure selectIndex doesn't go negative
+                    selectIndex = Math.max(index - 1, 0);
+                }
+                if (currChips.chipsData.length)
+                    currChips.selectChip(selectIndex);
+                else
+                    currChips._input.focus();
+            }
+            else if (Utils.keys.ARROW_LEFT.includes(e.key)) {
+                if (currChips._selectedChip) {
+                    const selectIndex = gGetIndex(currChips._selectedChip) - 1;
+                    if (selectIndex < 0)
+                        return;
+                    currChips.selectChip(selectIndex);
+                }
+            }
+            else if (Utils.keys.ARROW_RIGHT.includes(e.key)) {
+                if (currChips._selectedChip) {
+                    const selectIndex = gGetIndex(currChips._selectedChip) + 1;
+                    if (selectIndex >= currChips.chipsData.length)
+                        currChips._input.focus();
+                    else
+                        currChips.selectChip(selectIndex);
+                }
+            }
+        }
+        static _handleChipsKeyup() {
+            Chips._keydown = false;
+        }
+        static _handleChipsBlur(e) {
+            if (!Chips._keydown && document.hidden) {
+                const chips = e.target.closest('.chips');
+                const currChips = chips['M_Chips'];
+                currChips._selectedChip = null;
+            }
+        }
+        _handleInputFocus = () => {
+            this.el.classList.add('focus');
+        };
+        _handleInputBlur = () => {
+            this.el.classList.remove('focus');
+        };
+        _handleInputKeydown = (e) => {
+            Chips._keydown = true;
+            if (Utils.keys.ENTER.includes(e.key)) {
+                // Override enter if autocompleting.
+                if (this.hasAutocomplete && this.autocomplete && this.autocomplete.isOpen) {
+                    return;
+                }
+                e.preventDefault();
+                if (!this.hasAutocomplete || (this.hasAutocomplete && !this.options.autocompleteOnly)) {
+                    this.addChip({ id: this._input.value });
+                }
+                this._input.value = '';
+            }
+            else if ((Utils.keys.BACKSPACE.includes(e.key) || Utils.keys.ARROW_LEFT.includes(e.key)) &&
+                this._input.value === '' &&
+                this.chipsData.length) {
+                e.preventDefault();
+                this.selectChip(this.chipsData.length - 1);
+            }
+        };
+        _renderChip(chip) {
+            if (!chip.id)
+                return;
+            const renderedChip = document.createElement('div');
+            renderedChip.classList.add('chip');
+            renderedChip.innerText = chip.text || chip.id;
+            // attach image if needed
+            if (chip.image) {
+                const img = document.createElement('img');
+                img.setAttribute('src', chip.image);
+                renderedChip.insertBefore(img, renderedChip.firstChild);
+            }
+            if (this.options.allowUserInput) {
+                renderedChip.setAttribute('tabindex', '0');
+                const closeIcon = document.createElement('i');
+                closeIcon.classList.add(this.options.closeIconClass, 'close');
+                closeIcon.innerText = 'close';
+                renderedChip.appendChild(closeIcon);
+            }
+            return renderedChip;
+        }
+        _renderChips() {
+            this._chips = []; //.remove();
+            for (let i = 0; i < this.chipsData.length; i++) {
+                const chipElem = this._renderChip(this.chipsData[i]);
+                this.el.appendChild(chipElem);
+                this._chips.push(chipElem);
+            }
+        }
+        _setupAutocomplete() {
+            this.options.autocompleteOptions.onAutocomplete = (items) => {
+                if (items.length > 0)
+                    this.addChip({
+                        id: items[0].id,
+                        text: items[0].text,
+                        image: items[0].image
+                    });
+                this._input.value = '';
+                this._input.focus();
+            };
+            this.autocomplete = Autocomplete.init(this._input, this.options.autocompleteOptions);
+        }
+        _setupInput() {
+            this._input = this.el.querySelector('input');
+            if (!this._input) {
+                this._input = document.createElement('input');
+                this.el.append(this._input);
+            }
+            this._input.classList.add('input');
+            this.hasAutocomplete = Object.keys(this.options.autocompleteOptions).length > 0;
+            // Setup autocomplete if needed
+            if (this.hasAutocomplete)
+                this._setupAutocomplete();
+            this._setPlaceholder();
+            // Set input id
+            if (!this._input.getAttribute('id'))
+                this._input.setAttribute('id', Utils.guid());
+        }
+        _setupLabel() {
+            this._label = this.el.querySelector('label');
+            if (this._label)
+                this._label.setAttribute('for', this._input.getAttribute('id'));
+        }
+        _setPlaceholder() {
+            if (this.chipsData !== undefined && !this.chipsData.length && this.options.placeholder) {
+                this._input.placeholder = this.options.placeholder;
+            }
+            else if ((this.chipsData === undefined || !!this.chipsData.length) &&
+                this.options.secondaryPlaceholder) {
+                this._input.placeholder = this.options.secondaryPlaceholder;
+            }
+        }
+        _isValidAndNotExist(chip) {
+            const isValid = !!chip.id;
+            const doesNotExist = !this.chipsData.some((item) => item.id == chip.id);
+            return isValid && doesNotExist;
+        }
+        /**
+         * Add chip to input.
+         * @param chip Chip data object
+         */
+        addChip(chip) {
+            if (!this._isValidAndNotExist(chip) || this.chipsData.length >= this.options.limit)
+                return;
+            const renderedChip = this._renderChip(chip);
+            this._chips.push(renderedChip);
+            this.chipsData.push(chip);
+            //$(this._input).before(renderedChip);
+            this._input.before(renderedChip);
+            this._setPlaceholder();
+            // fire chipAdd callback
+            if (typeof this.options.onChipAdd === 'function') {
+                this.options.onChipAdd(this.el, renderedChip);
+            }
+        }
+        /**
+         * Delete nth chip.
+         * @param chipIndex  Index of chip
+         */
+        deleteChip(chipIndex) {
+            const chip = this._chips[chipIndex];
+            this._chips[chipIndex].remove();
+            this._chips.splice(chipIndex, 1);
+            this.chipsData.splice(chipIndex, 1);
+            this._setPlaceholder();
+            // fire chipDelete callback
+            if (typeof this.options.onChipDelete === 'function') {
+                this.options.onChipDelete(this.el, chip);
+            }
+        }
+        /**
+         * Select nth chip.
+         * @param chipIndex Index of chip
+         */
+        selectChip(chipIndex) {
+            const chip = this._chips[chipIndex];
+            this._selectedChip = chip;
+            chip.focus();
+            // fire chipSelect callback
+            if (typeof this.options.onChipSelect === 'function') {
+                this.options.onChipSelect(this.el, chip);
+            }
+        }
+        static Init() {
+            if (typeof document !== 'undefined')
+                // Handle removal of static chips.
+                document.addEventListener('DOMContentLoaded', () => {
+                    const chips = document.querySelectorAll('.chips');
+                    chips.forEach((el) => {
+                        // if (el && (el['M_Chips == undefined) return;
+                        el.addEventListener('click', (e) => {
+                            if (e.target.classList.contains('close')) {
+                                const chip = e.target.closest('.chip');
+                                if (chip)
+                                    chip.remove();
+                            }
+                        });
+                    });
+                });
+        }
+        static {
+            Chips._keydown = false;
+        }
+    }
+
+    const _defaults$g = {
+        accordion: true,
+        onOpenStart: null,
+        onOpenEnd: null,
+        onCloseStart: null,
+        onCloseEnd: null,
+        inDuration: 300,
+        outDuration: 300
+    };
+    class Collapsible extends Component {
+        _headers;
+        constructor(el, options) {
+            super(el, options, Collapsible);
+            this.el['M_Collapsible'] = this;
+            this.options = {
+                ...Collapsible.defaults,
+                ...options
+            };
+            // Setup tab indices
+            this._headers = Array.from(this.el.querySelectorAll('li > .collapsible-header'));
+            this._headers.forEach((el) => (el.tabIndex = 0));
+            this._setupEventHandlers();
+            // Open active
+            const activeBodies = Array.from(this.el.querySelectorAll('li.active > .collapsible-body'));
+            if (this.options.accordion) {
+                if (activeBodies.length > 0) {
+                    // Accordion => open first active only
+                    this._setExpanded(activeBodies[0]);
+                }
+            }
+            else {
+                // Expandables => all active
+                activeBodies.forEach((el) => this._setExpanded(el));
+            }
+        }
+        static get defaults() {
+            return _defaults$g;
+        }
+        /**
+         * Initializes instances of Collapsible.
+         * @param els HTML elements.
+         * @param options Component options.
+         */
+        static init(els, options = {}) {
+            return super.init(els, options, Collapsible);
+        }
+        static getInstance(el) {
+            return el['M_Collapsible'];
+        }
+        destroy() {
+            this._removeEventHandlers();
+            this.el['M_Collapsible'] = undefined;
+        }
+        _setupEventHandlers() {
+            this.el.addEventListener('click', this._handleCollapsibleClick);
+            this._headers.forEach((header) => header.addEventListener('keydown', this._handleCollapsibleKeydown));
+        }
+        _removeEventHandlers() {
+            this.el.removeEventListener('click', this._handleCollapsibleClick);
+            this._headers.forEach((header) => header.removeEventListener('keydown', this._handleCollapsibleKeydown));
+        }
+        _handleCollapsibleClick = (e) => {
+            const header = e.target.closest('.collapsible-header');
+            if (e.target && header) {
+                const collapsible = header.closest('.collapsible');
+                if (collapsible !== this.el)
+                    return;
+                const li = header.closest('li');
+                const isActive = li.classList.contains('active');
+                const index = [...li.parentNode.children].indexOf(li);
+                if (isActive)
+                    this.close(index);
+                else
+                    this.open(index);
+            }
+        };
+        _handleCollapsibleKeydown = (e) => {
+            if (Utils.keys.ENTER.includes(e.key)) {
+                this._handleCollapsibleClick(e);
+            }
+        };
+        _setExpanded(li) {
+            li.style.maxHeight = li.scrollHeight + 'px';
+        }
+        _animateIn(index) {
+            const li = this.el.children[index];
+            if (!li)
+                return;
+            const body = li.querySelector('.collapsible-body');
+            const duration = this.options.inDuration; // easeInOutCubic
+            body.style.transition = `max-height ${duration}ms ease-out`;
+            this._setExpanded(body);
+            setTimeout(() => {
+                if (typeof this.options.onOpenEnd === 'function') {
+                    this.options.onOpenEnd.call(this, li);
+                }
+            }, duration);
+        }
+        _animateOut(index) {
+            const li = this.el.children[index];
+            if (!li)
+                return;
+            const body = li.querySelector('.collapsible-body');
+            const duration = this.options.outDuration; // easeInOutCubic
+            body.style.transition = `max-height ${duration}ms ease-out`;
+            body.style.maxHeight = '0';
+            setTimeout(() => {
+                if (typeof this.options.onCloseEnd === 'function') {
+                    this.options.onCloseEnd.call(this, li);
+                }
+            }, duration);
+        }
+        /**
+         * Open collapsible section.
+         * @param n Nth section to open.
+         */
+        open = (index) => {
+            const listItems = Array.from(this.el.children).filter((c) => c.tagName === 'LI');
+            const li = listItems[index];
+            if (li && !li.classList.contains('active')) {
+                // onOpenStart callback
+                if (typeof this.options.onOpenStart === 'function') {
+                    this.options.onOpenStart.call(this, li);
+                }
+                // Handle accordion behavior
+                if (this.options.accordion) {
+                    const activeLis = listItems.filter((li) => li.classList.contains('active'));
+                    activeLis.forEach((activeLi) => {
+                        const index = listItems.indexOf(activeLi);
+                        this.close(index);
+                    });
+                }
+                // Animate in
+                li.classList.add('active');
+                this._animateIn(index);
+            }
+        };
+        /**
+         * Close collapsible section.
+         * @param n Nth section to close.
+         */
+        close = (index) => {
+            const li = Array.from(this.el.children).filter((c) => c.tagName === 'LI')[index];
+            if (li && li.classList.contains('active')) {
+                // onCloseStart callback
+                if (typeof this.options.onCloseStart === 'function') {
+                    this.options.onCloseStart.call(this, li);
+                }
+                // Animate out
+                li.classList.remove('active');
+                this._animateOut(index);
+            }
+        };
+    }
+
+    const _defaults$f = {
+        classes: '',
+        dropdownOptions: {}
+    };
+    class FormSelect extends Component {
+        /** If this is a multiple select. */
+        isMultiple;
+        /**
+         * Label associated with the current select element.
+         * Is "null", if not detected.
+         */
+        labelEl;
+        /** Dropdown UL element. */
+        dropdownOptions;
+        /** Text input that shows current selected option. */
+        input;
+        /** Instance of the dropdown plugin for this select. */
+        dropdown;
+        /** The select wrapper element. */
+        wrapper;
+        selectOptions;
+        _values;
+        constructor(el, options) {
+            super(el, options, FormSelect);
+            if (this.el.classList.contains('browser-default'))
+                return;
+            this.el['M_FormSelect'] = this;
+            this.options = {
+                ...FormSelect.defaults,
+                ...options
+            };
+            this.isMultiple = this.el.multiple;
+            this.el.tabIndex = -1;
+            this._values = [];
+            this._setupDropdown();
+            this._setupEventHandlers();
+        }
+        static get defaults() {
+            return _defaults$f;
+        }
+        /**
+         * Initializes instances of FormSelect.
+         * @param els HTML elements.
+         * @param options Component options.
+         */
+        static init(els, options = {}) {
+            return super.init(els, options, FormSelect);
+        }
+        static getInstance(el) {
+            return el['M_FormSelect'];
+        }
+        destroy() {
+            this._removeEventHandlers();
+            this._removeDropdown();
+            this.el['M_FormSelect'] = undefined;
+        }
+        _setupEventHandlers() {
+            this.dropdownOptions.querySelectorAll('li:not(.optgroup)').forEach((el) => {
+                el.addEventListener('click', this._handleOptionClick);
+                el.addEventListener('keydown', (e) => {
+                    if (e.key === ' ' || e.key === 'Enter')
+                        this._handleOptionClick(e);
+                });
+            });
+            this.el.addEventListener('change', this._handleSelectChange);
+            this.input.addEventListener('click', this._handleInputClick);
+        }
+        _removeEventHandlers() {
+            this.dropdownOptions.querySelectorAll('li:not(.optgroup)').forEach((el) => {
+                el.removeEventListener('click', this._handleOptionClick);
+            });
+            this.el.removeEventListener('change', this._handleSelectChange);
+            this.input.removeEventListener('click', this._handleInputClick);
+        }
+        _handleSelectChange = () => {
+            this._setValueToInput();
+        };
+        _handleOptionClick = (e) => {
+            e.preventDefault();
+            const virtualOption = e.target.closest('li');
+            this._selectOptionElement(virtualOption);
+            e.stopPropagation();
+        };
+        _arraysEqual(a, b) {
+            if (a === b)
+                return true;
+            if (a == null || b == null)
+                return false;
+            if (a.length !== b.length)
+                return false;
+            for (let i = 0; i < a.length; ++i)
+                if (a[i] !== b[i])
+                    return false;
+            return true;
+        }
+        _selectOptionElement(virtualOption) {
+            if (!virtualOption.classList.contains('disabled') &&
+                !virtualOption.classList.contains('optgroup')) {
+                const value = this._values.find((value) => value.optionEl === virtualOption);
+                const previousSelectedValues = this.getSelectedValues();
+                if (this.isMultiple) {
+                    // Multi-Select
+                    this._toggleEntryFromArray(value);
+                }
+                else {
+                    // Single-Select
+                    this._deselectAll();
+                    this._selectValue(value);
+                }
+                // Refresh Input-Text
+                this._setValueToInput();
+                // Trigger Change-Event only when data is different
+                const actualSelectedValues = this.getSelectedValues();
+                const selectionHasChanged = !this._arraysEqual(previousSelectedValues, actualSelectedValues);
+                if (selectionHasChanged)
+                    this.el.dispatchEvent(new Event('change', { bubbles: true, cancelable: true, composed: true })); // trigger('change');
+            }
+            if (!this.isMultiple)
+                this.dropdown.close();
+        }
+        _handleInputClick = () => {
+            if (this.dropdown && this.dropdown.isOpen) {
+                this._setValueToInput();
+                this._setSelectedStates();
+            }
+        };
+        _setupDropdown() {
+            this.labelEl = document.querySelector('[for="' + this.el.id + '"]');
+            if (this.labelEl)
+                this.labelEl.style.display = 'none';
+            this.wrapper = document.createElement('div');
+            this.wrapper.classList.add('select-wrapper', 'input-field');
+            if (this.options.classes.length > 0) {
+                this.wrapper.classList.add(...this.options.classes.split(' '));
+            }
+            this.el.before(this.wrapper);
+            // Move actual select element into overflow hidden wrapper
+            const hiddenDiv = document.createElement('div');
+            hiddenDiv.classList.add('hide-select');
+            this.wrapper.append(hiddenDiv);
+            hiddenDiv.appendChild(this.el);
+            if (this.el.disabled)
+                this.wrapper.classList.add('disabled');
+            this.selectOptions = (Array.from(this.el.children).filter((el) => ['OPTION', 'OPTGROUP'].includes(el.tagName)));
+            // Create dropdown
+            this.dropdownOptions = document.createElement('ul');
+            this.dropdownOptions.id = `select-options-${Utils.guid()}`;
+            this.dropdownOptions.classList.add('dropdown-content', 'select-dropdown');
+            this.dropdownOptions.setAttribute('role', 'listbox');
+            this.dropdownOptions.ariaMultiSelectable = this.isMultiple.toString();
+            if (this.isMultiple)
+                this.dropdownOptions.classList.add('multiple-select-dropdown');
+            // Create dropdown structure
+            if (this.selectOptions.length > 0) {
+                this.selectOptions.forEach((realOption) => {
+                    if (realOption.tagName === 'OPTION') {
+                        // Option
+                        const virtualOption = this._createAndAppendOptionWithIcon(realOption, this.isMultiple ? 'multiple' : undefined);
+                        this._addOptionToValues(realOption, virtualOption);
+                    }
+                    else if (realOption.tagName === 'OPTGROUP') {
+                        // Optgroup
+                        const groupId = 'opt-group-' + Utils.guid();
+                        const groupParent = document.createElement('li');
+                        groupParent.classList.add('optgroup');
+                        groupParent.tabIndex = -1;
+                        groupParent.setAttribute('role', 'group');
+                        groupParent.setAttribute('aria-labelledby', groupId);
+                        groupParent.innerHTML = `<span id="${groupId}" role="presentation">${realOption.getAttribute('label')}</span>`;
+                        this.dropdownOptions.append(groupParent);
+                        const groupChildren = [];
+                        const selectOptions = (Array.from(realOption.children).filter((el) => el.tagName === 'OPTION'));
+                        selectOptions.forEach((realOption) => {
+                            const virtualOption = this._createAndAppendOptionWithIcon(realOption, 'optgroup-option');
+                            const childId = 'opt-child-' + Utils.guid();
+                            virtualOption.id = childId;
+                            groupChildren.push(childId);
+                            this._addOptionToValues(realOption, virtualOption);
+                        });
+                        groupParent.setAttribute('aria-owns', groupChildren.join(' '));
+                    }
+                });
+            }
+            this.wrapper.append(this.dropdownOptions);
+            // Add input dropdown
+            this.input = document.createElement('input');
+            this.input.id = 'm_select-input-' + Utils.guid();
+            this.input.classList.add('select-dropdown', 'dropdown-trigger');
+            this.input.type = 'text';
+            this.input.readOnly = true;
+            this.input.setAttribute('data-target', this.dropdownOptions.id);
+            this.input.ariaReadOnly = 'true';
+            this.input.ariaRequired = this.el.hasAttribute('required').toString(); //setAttribute("aria-required", this.el.hasAttribute("required"));
+            if (this.el.disabled)
+                this.input.disabled = true; // 'true');
+            const attrs = this.el.attributes;
+            for (let i = 0; i < attrs.length; ++i) {
+                const attr = attrs[i];
+                if (attr.name.startsWith('aria-'))
+                    this.input.setAttribute(attr.name, attr.value);
+            }
+            // Adds aria-attributes to input element
+            this.input.setAttribute('role', 'combobox');
+            this.input.ariaExpanded = 'false';
+            this.input.setAttribute('aria-owns', this.dropdownOptions.id);
+            this.input.setAttribute('aria-controls', this.dropdownOptions.id);
+            this.input.placeholder = ' ';
+            this.wrapper.prepend(this.input);
+            this._setValueToInput();
+            // Add caret
+            const dropdownIcon = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); //document.createElement('svg')
+            dropdownIcon.classList.add('caret');
+            dropdownIcon.setAttribute('height', '24');
+            dropdownIcon.setAttribute('width', '24');
+            dropdownIcon.setAttribute('viewBox', '0 0 24 24');
+            dropdownIcon.ariaHidden = 'true';
+            dropdownIcon.innerHTML = `<path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/>`;
+            this.wrapper.prepend(dropdownIcon);
+            // Initialize dropdown
+            if (!this.el.disabled) {
+                const dropdownOptions = { ...this.options.dropdownOptions }; // TODO:
+                dropdownOptions.coverTrigger = false;
+                const userOnOpenEnd = dropdownOptions.onOpenEnd;
+                const userOnCloseEnd = dropdownOptions.onCloseEnd;
+                // Add callback for centering selected option when dropdown content is scrollable
+                dropdownOptions.onOpenEnd = () => {
+                    const selectedOption = this.dropdownOptions.querySelector('.selected');
+                    if (selectedOption) {
+                        // Focus selected option in dropdown
+                        Utils.keyDown = true;
+                        this.dropdown.focusedIndex = [...selectedOption.parentNode.children].indexOf(selectedOption);
+                        this.dropdown._focusFocusedItem();
+                        Utils.keyDown = false;
+                        // Handle scrolling to selected option
+                        if (this.dropdown.isScrollable) {
+                            let scrollOffset = selectedOption.getBoundingClientRect().top -
+                                this.dropdownOptions.getBoundingClientRect().top; // scroll to selected option
+                            scrollOffset -= this.dropdownOptions.clientHeight / 2; // center in dropdown
+                            this.dropdownOptions.scrollTop = scrollOffset;
+                        }
+                    }
+                    this.input.ariaExpanded = 'true';
+                    // Handle user declared onOpenEnd if needed
+                    if (userOnOpenEnd && typeof userOnOpenEnd === 'function')
+                        userOnOpenEnd.call(this.dropdown, this.el);
+                };
+                // Add callback for reseting "expanded" state
+                dropdownOptions.onCloseEnd = () => {
+                    this.input.ariaExpanded = 'false';
+                    // Handle user declared onOpenEnd if needed
+                    if (userOnCloseEnd && typeof userOnCloseEnd === 'function')
+                        userOnCloseEnd.call(this.dropdown, this.el);
+                };
+                // Prevent dropdown from closing too early
+                dropdownOptions.closeOnClick = false;
+                this.dropdown = Dropdown.init(this.input, dropdownOptions);
+            }
+            // Add initial selections
+            this._setSelectedStates();
+            // Add Label
+            if (this.labelEl) {
+                const label = document.createElement('label');
+                label.htmlFor = this.input.id;
+                label.innerText = this.labelEl.innerText;
+                this.input.after(label);
+            }
+        }
+        _addOptionToValues(realOption, virtualOption) {
+            this._values.push({ el: realOption, optionEl: virtualOption });
+        }
+        _removeDropdown() {
+            this.wrapper.querySelector('.caret').remove();
+            this.input.remove();
+            this.dropdownOptions.remove();
+            this.wrapper.before(this.el);
+            this.wrapper.remove();
+        }
+        _createAndAppendOptionWithIcon(realOption, type) {
+            const li = document.createElement('li');
+            li.setAttribute('role', 'option');
+            if (realOption.disabled) {
+                li.classList.add('disabled');
+                li.ariaDisabled = 'true';
+            }
+            if (type === 'optgroup-option')
+                li.classList.add(type);
+            // Text / Checkbox
+            const span = document.createElement('span');
+            span.innerHTML = realOption.innerHTML;
+            if (this.isMultiple && !realOption.disabled) {
+                span.innerHTML = `<label><input type="checkbox"><span>${realOption.innerHTML}</span></label>`;
+            }
+            li.appendChild(span);
+            // add Icon
+            const iconUrl = realOption.getAttribute('data-icon');
+            const classes = realOption.getAttribute('class')?.split(' ');
+            if (iconUrl) {
+                const img = document.createElement('img');
+                if (classes)
+                    img.classList.add(...classes);
+                img.src = iconUrl;
+                img.ariaHidden = 'true';
+                li.prepend(img);
+            }
+            // Check for multiple type
+            this.dropdownOptions.append(li);
+            return li;
+        }
+        _selectValue(value) {
+            value.el.selected = true;
+            value.optionEl.classList.add('selected');
+            value.optionEl.ariaSelected = 'true'; // setAttribute("aria-selected", true);
+            const checkbox = value.optionEl.querySelector('input[type="checkbox"]');
+            if (checkbox)
+                checkbox.checked = true;
+        }
+        _deselectValue(value) {
+            value.el.selected = false;
+            value.optionEl.classList.remove('selected');
+            value.optionEl.ariaSelected = 'false'; //setAttribute("aria-selected", false);
+            const checkbox = value.optionEl.querySelector('input[type="checkbox"]');
+            if (checkbox)
+                checkbox.checked = false;
+        }
+        _deselectAll() {
+            this._values.forEach((value) => this._deselectValue(value));
+        }
+        _isValueSelected(value) {
+            const realValues = this.getSelectedValues();
+            return realValues.some((realValue) => realValue === value.el.value);
+        }
+        _toggleEntryFromArray(value) {
+            if (this._isValueSelected(value))
+                this._deselectValue(value);
+            else
+                this._selectValue(value);
+        }
+        _getSelectedOptions() {
+            // remove null, false, ... values
+            return Array.prototype.filter.call(this.el.selectedOptions, (realOption) => realOption);
+        }
+        _setValueToInput() {
+            const selectedRealOptions = this._getSelectedOptions();
+            const selectedOptionPairs = this._values.filter((value) => selectedRealOptions.indexOf(value.el) >= 0);
+            // Filter not disabled
+            const notDisabledOptionPairs = selectedOptionPairs.filter((op) => !op.el.disabled);
+            const texts = notDisabledOptionPairs.map((value) => value.optionEl.querySelector('span').innerText.trim());
+            // Set input-text to first Option with empty value which indicates a description like "choose your option"
+            if (texts.length === 0) {
+                const firstDisabledOption = this.el.querySelector('option:disabled');
+                if (firstDisabledOption && firstDisabledOption.value === '') {
+                    this.input.value = firstDisabledOption.innerText;
+                    return;
+                }
+            }
+            this.input.value = texts.join(', ');
+        }
+        _setSelectedStates() {
+            this._values.forEach((value) => {
+                const optionIsSelected = value.el.selected;
+                const cb = value.optionEl.querySelector('input[type="checkbox"]');
+                if (cb)
+                    cb.checked = optionIsSelected;
+                if (optionIsSelected) {
+                    this._activateOption(this.dropdownOptions, value.optionEl);
+                }
+                else {
+                    value.optionEl.classList.remove('selected');
+                    value.optionEl.ariaSelected = 'false'; // attr("aria-selected", 'false');
+                }
+            });
+        }
+        _activateOption(ul, li) {
+            if (!li)
+                return;
+            if (!this.isMultiple)
+                ul.querySelectorAll('li.selected').forEach((li) => li.classList.remove('selected'));
+            li.classList.add('selected');
+            li.ariaSelected = 'true';
+        }
+        getSelectedValues() {
+            return this._getSelectedOptions().map((realOption) => realOption.value);
+        }
+    }
+
+    const _defaults$e = {
+        // the default output format for the input field value
+        format: 'mmm dd, yyyy',
+        // Used to create date object from current input string
+        parse: null,
+        // The initial condition if the datepicker is based on date range
+        isDateRange: false,
+        // The selector of the user specified date range end element
+        dateRangeEndEl: null,
+        // The initial condition if the datepicker is based on multiple date selection
+        isMultipleSelection: false,
+        // The initial date to view when first opened
+        defaultDate: null,
+        // The initial end date to view when first opened
+        defaultEndDate: null,
+        // Make the `defaultDate` the initial selected value
+        setDefaultDate: false,
+        // Make the `defaultEndDate` the initial selected value
+        setDefaultEndDate: false,
+        disableWeekends: false,
+        disableDayFn: null,
+        // First day of week (0: Sunday, 1: Monday etc)
+        firstDay: 0,
+        // The earliest date that can be selected
+        minDate: null,
+        // Thelatest date that can be selected
+        maxDate: null,
+        // Number of years either side, or array of upper/lower range
+        yearRange: 10,
+        // used internally (don't config outside)
+        minYear: 0,
+        maxYear: 9999,
+        minMonth: undefined,
+        maxMonth: undefined,
+        startRange: null,
+        endRange: null,
+        isRTL: false,
+        yearRangeReverse: false,
+        // Render the month after year in the calendar title
+        showMonthAfterYear: false,
+        // Render days of the calendar grid that fall in the next or previous month
+        showDaysInNextAndPreviousMonths: false,
+        // Specify if docked picker is in open state by default
+        openByDefault: false,
+        // Specify a DOM element to render the calendar in
+        container: null,
+        // Show clear button
+        showClearBtn: false,
+        // internationalization
+        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 array
+        events: [],
+        // callback function
+        onSelect: null,
+        onDraw: null,
+        onInputInteraction: null,
+    };
+    class Datepicker extends Component {
+        id;
+        multiple = false;
+        calendarEl;
+        /** CLEAR button instance. */
+        clearBtn;
+        /** DONE button instance */
+        doneBtn;
+        cancelBtn;
+        containerEl;
+        yearTextEl;
+        dateTextEl;
+        endDateEl;
+        dateEls;
+        /** The selected Date. */
+        date;
+        endDate;
+        dates;
+        formats;
+        calendars;
+        _y;
+        _m;
+        static _template;
+        constructor(el, options) {
+            super(el, options, Datepicker);
+            this.el['M_Datepicker'] = this;
+            this.options = {
+                ...Datepicker.defaults,
+                ...options
+            };
+            // make sure i18n defaults are not lost when only few i18n option properties are passed
+            if (!!options && options.hasOwnProperty('i18n') && typeof options.i18n === 'object') {
+                this.options.i18n = { ...Datepicker.defaults.i18n, ...options.i18n };
+            }
+            // Remove time component from minDate and maxDate options
+            if (this.options.minDate)
+                this.options.minDate.setHours(0, 0, 0, 0);
+            if (this.options.maxDate)
+                this.options.maxDate.setHours(0, 0, 0, 0);
+            this.id = Utils.guid();
+            this._setupVariables();
+            this._insertHTMLIntoDOM();
+            this._setupEventHandlers();
+            if (!this.options.defaultDate) {
+                this.options.defaultDate = new Date(Date.parse(this.el.value));
+            }
+            const defDate = this.options.defaultDate;
+            if (Datepicker._isDate(defDate)) {
+                if (this.options.setDefaultDate) {
+                    this.setDate(defDate, true);
+                    this.setInputValue(this.el, defDate);
+                }
+                else {
+                    this.gotoDate(defDate);
+                }
+            }
+            else {
+                this.gotoDate(new Date());
+            }
+            if (this.options.isDateRange) {
+                this.multiple = true;
+                const defEndDate = this.options.defaultEndDate;
+                if (Datepicker._isDate(defEndDate)) {
+                    if (this.options.setDefaultEndDate) {
+                        this.setDate(defEndDate, true, true);
+                        this.setInputValue(this.endDateEl, defEndDate);
+                    }
+                }
+            }
+            if (this.options.isMultipleSelection) {
+                this.multiple = true;
+                this.dates = [];
+                this.dateEls = [];
+                this.dateEls.push(el);
+            }
+        }
+        static get defaults() {
+            return _defaults$e;
+        }
+        /**
+         * Initializes instances of Datepicker.
+         * @param els HTML elements.
+         * @param options Component options.
+         */
+        static init(els, options = {}) {
+            return super.init(els, options, Datepicker);
+        }
+        static _isDate(obj) {
+            return /Date/.test(Object.prototype.toString.call(obj)) && !isNaN(obj.getTime());
+        }
+        static _isWeekend(date) {
+            const day = date.getDay();
+            return day === 0 || day === 6;
+        }
+        /**
+         * @deprecated as this function has no effect without any return statement or global parameter setter.
+         */
+        static _setToStartOfDay(date) {
+            if (Datepicker._isDate(date))
+                date.setHours(0, 0, 0, 0);
+        }
+        static _getDaysInMonth(year, month) {
+            return [31, Datepicker._isLeapYear(year) ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][month];
+        }
+        static _isLeapYear(year) {
+            // solution by Matti Virkkunen: http://stackoverflow.com/a/4881951
+            return (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;
+        }
+        static _compareDates(a, b) {
+            // weak date comparison (use setToStartOfDay(date) to ensure correct result)
+            return a.getTime() === b.getTime();
+        }
+        static _compareWithinRange(day, date, dateEnd) {
+            return day.getTime() > date.getTime() && day.getTime() < dateEnd.getTime();
+        }
+        static _comparePastDate(a, b) {
+            return a.getTime() < b.getTime();
+        }
+        static getInstance(el) {
+            return el['M_Datepicker'];
+        }
+        destroy() {
+            this._removeEventHandlers();
+            this.containerEl.remove();
+            this.destroySelects();
+            this.el['M_Datepicker'] = undefined;
+        }
+        destroySelects() {
+            const oldYearSelect = this.calendarEl.querySelector('.orig-select-year');
+            if (oldYearSelect) {
+                FormSelect.getInstance(oldYearSelect).destroy();
+            }
+            const oldMonthSelect = this.calendarEl.querySelector('.orig-select-month');
+            if (oldMonthSelect) {
+                FormSelect.getInstance(oldMonthSelect).destroy();
+            }
+        }
+        _insertHTMLIntoDOM() {
+            // HTML5 input date field support
+            if (this.el.type == 'date') {
+                this.el.classList.add('datepicker-date-input');
+            }
+            if (!this.el.parentElement.querySelector('.datepicker-format') === null) {
+                this._renderDateInputFormat(this.el);
+            }
+            if (this.options.isDateRange) {
+                this.containerEl.classList.add('daterange');
+                if (!this.options.dateRangeEndEl) {
+                    this.endDateEl = this.createDateInput();
+                    this.endDateEl.classList.add('datepicker-end-date');
+                }
+                else if (document.querySelector(this.options.dateRangeEndEl) === undefined) {
+                    console.warn('Specified date range end input element in dateRangeEndEl not found');
+                }
+                else {
+                    this.endDateEl = document.querySelector(this.options.dateRangeEndEl);
+                    if (!this.endDateEl.parentElement.querySelector('.datepicker-format') === null) {
+                        this._renderDateInputFormat(this.endDateEl);
+                    }
+                }
+            }
+            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;
+            if (this.options.container) {
+                const optEl = this.options.container;
+                this.options.container =
+                    optEl instanceof HTMLElement ? optEl : document.querySelector(optEl);
+                this.options.container.append(this.containerEl);
+            }
+            else {
+                //this.containerEl.before(this.el);
+                const appendTo = !this.endDateEl ? this.el : this.endDateEl;
+                if (!this.options.openByDefault)
+                    this.containerEl.setAttribute('style', 'display: none; visibility: hidden;');
+                appendTo.parentElement.after(this.containerEl);
+            }
+        }
+        /**
+         * Renders the date input format
+         */
+        _renderDateInputFormat(el) {
+            el.parentElement.querySelector('.datepicker-format').innerHTML = this.options.format.toString();
+        }
+        /**
+         * Gets a string representation of the given date.
+         */
+        toString(date = this.date, format = null) {
+            format = format || this.options.format;
+            if (typeof format === 'function')
+                return format(date);
+            if (!Datepicker._isDate(date))
+                return '';
+            // String Format
+            return this.formatDate(date, format);
+        }
+        /**
+         * Returns the formatted date.
+         */
+        formatDate(date, format) {
+            const formatArray = format.split(/(d{1,4}|m{1,4}|y{4}|yy|!.)/g);
+            return formatArray
+                .map((label) => (this.formats[label] ? this.formats[label](date) : label))
+                .join('');
+        }
+        /**
+         * Sets date from input field.
+         */
+        setDateFromInput(el) {
+            const date = new Date(Date.parse(el.value));
+            this.setDate(date, false, el == this.endDateEl, true);
+        }
+        /**
+         * Set a date on the datepicker.
+         * @param date Date to set on the datepicker.
+         * @param preventOnSelect Undocumented as of 5 March 2018.
+         * @param isEndDate
+         * @param fromUserInput
+         */
+        setDate(date = null, preventOnSelect = false, isEndDate = false, fromUserInput = false) {
+            const selectedDate = this.validateDate(date);
+            if (!selectedDate) {
+                return;
+            }
+            if (!this.options.isMultipleSelection)
+                this.setSingleDate(selectedDate, isEndDate);
+            else if (!fromUserInput)
+                this.setMultiDate(selectedDate);
+            Datepicker._setToStartOfDay(selectedDate);
+            this.gotoDate(selectedDate);
+            if (!preventOnSelect && typeof this.options.onSelect === 'function') {
+                this.options.onSelect.call(this, selectedDate);
+            }
+        }
+        validateDate(date) {
+            if (!date) {
+                this._renderDateDisplay(date);
+                return this.draw();
+            }
+            if (typeof date === 'string') {
+                date = new Date(Date.parse(date));
+            }
+            if (!Datepicker._isDate(date)) {
+                return;
+            }
+            const min = this.options.minDate, max = this.options.maxDate;
+            if (Datepicker._isDate(min) && date < min) {
+                date = min;
+            }
+            else if (Datepicker._isDate(max) && date > max) {
+                date = max;
+            }
+            return new Date(date.getTime());
+        }
+        /**
+         * Set a single date on the datepicker.
+         * @param date Date to set on the datepicker.
+         * @param isEndDate
+         */
+        setSingleDate(date, isEndDate) {
+            if (!isEndDate) {
+                this.date = date;
+            }
+            else if (isEndDate) {
+                this.endDate = date;
+            }
+        }
+        /**
+         * Set a multi date on the datepicker.
+         * @param date Date to set on the datepicker.
+         */
+        setMultiDate(date) {
+            const selectedDate = this.dates?.find((item) => {
+                return item.getTime() === date.getTime() ? item : false;
+            });
+            if (!selectedDate) {
+                this.dates.push(date);
+            }
+            else {
+                this.dates.splice(this.dates.indexOf(selectedDate), 1);
+            }
+            this.dates.sort((a, b) => (a.getTime() < b.getTime() ? -1 : 0));
+        }
+        /**
+         * Sets the data-date attribute on the date input field
+         */
+        setDataDate(el, date) {
+            el.setAttribute('data-date', this.toString(date));
+        }
+        /**
+         * Sets dates on the input values.
+         */
+        setInputValues() {
+            if (!this.options?.isMultipleSelection) {
+                this.setInputValue(this.el, this.date);
+                if (this.options?.isDateRange) {
+                    this.setInputValue(this.endDateEl, this.endDate);
+                }
+                return;
+            }
+            this.setMultipleSelectionInputValues();
+        }
+        setMultipleSelectionInputValues() {
+            const dateElsArr = Array.from(this.dateEls).filter((el, index) => {
+                if (index > this.dates.length - 1)
+                    return el;
+            });
+            dateElsArr.forEach((el) => {
+                el.remove();
+            });
+            this.dates.forEach((date, index) => {
+                if (Array.from(this.dateEls)[index]) {
+                    this.setInputValue(this.dateEls[index], date);
+                    return;
+                }
+                const dateEl = this.createDateInput();
+                this.setInputValue(dateEl, date);
+                this.dateEls.push(dateEl);
+            });
+        }
+        /**
+         * Sets given date as the input value on the given element.
+         */
+        setInputValue(el, date) {
+            if (el.type == 'date') {
+                this.setDataDate(el, date);
+                el.value = this.formatDate(date, 'yyyy-mm-dd');
+            }
+            else {
+                el.value = this.toString(date);
+            }
+            this.el.dispatchEvent(new CustomEvent('change', {
+                bubbles: true,
+                cancelable: true,
+                composed: true,
+                detail: { firedBy: this }
+            }));
+        }
+        /**
+         * Renders the date in the modal head section.
+         */
+        _renderDateDisplay(date, endDate = null) {
+            const displayDate = Datepicker._isDate(date) ? date : new Date();
+            // this.yearTextEl.innerHTML = displayDate.getFullYear().toString();
+            // @todo should we include an option for date formatting by component options?
+            if (!this.options.isDateRange) {
+                this.dateTextEl.innerHTML = this.formatDate(displayDate, 'ddd, mmm d');
+            }
+            else {
+                const displayEndDate = Datepicker._isDate(endDate) ? endDate : new Date();
+                this.dateTextEl.innerHTML = `${this.formatDate(displayDate, 'mmm d')} - ${this.formatDate(displayEndDate, 'mmm d')}`;
+            }
+        }
+        /**
+         * Change date view to a specific date on the datepicker.
+         * @param date Date to show on the datepicker.
+         */
+        gotoDate(date) {
+            let newCalendar = true;
+            if (!Datepicker._isDate(date)) {
+                return;
+            }
+            if (this.calendars) {
+                const firstVisibleDate = new Date(this.calendars[0].year, this.calendars[0].month, 1), lastVisibleDate = new Date(this.calendars[this.calendars.length - 1].year, this.calendars[this.calendars.length - 1].month, 1), visibleDate = date.getTime();
+                // get the end of the month
+                lastVisibleDate.setMonth(lastVisibleDate.getMonth() + 1);
+                lastVisibleDate.setDate(lastVisibleDate.getDate() - 1);
+                newCalendar =
+                    visibleDate < firstVisibleDate.getTime() || lastVisibleDate.getTime() < visibleDate;
+            }
+            if (newCalendar) {
+                this.calendars = [
+                    {
+                        month: date.getMonth(),
+                        year: date.getFullYear()
+                    }
+                ];
+            }
+            this.adjustCalendars();
+        }
+        adjustCalendars() {
+            this.calendars[0] = this.adjustCalendar(this.calendars[0]);
+            this.draw();
+        }
+        adjustCalendar(calendar) {
+            if (calendar.month < 0) {
+                calendar.year -= Math.ceil(Math.abs(calendar.month) / 12);
+                calendar.month += 12;
+            }
+            if (calendar.month > 11) {
+                calendar.year += Math.floor(Math.abs(calendar.month) / 12);
+                calendar.month -= 12;
+            }
+            return calendar;
+        }
+        nextMonth() {
+            this.calendars[0].month++;
+            this.adjustCalendars();
+        }
+        prevMonth() {
+            this.calendars[0].month--;
+            this.adjustCalendars();
+        }
+        render(year, month, randId) {
+            const now = new Date(), days = Datepicker._getDaysInMonth(year, month), data = [];
+            let before = new Date(year, month, 1).getDay(), row = [];
+            Datepicker._setToStartOfDay(now);
+            if (this.options.firstDay > 0) {
+                before -= this.options.firstDay;
+                if (before < 0) {
+                    before += 7;
+                }
+            }
+            const previousMonth = month === 0 ? 11 : month - 1, nextMonth = month === 11 ? 0 : month + 1, yearOfPreviousMonth = month === 0 ? year - 1 : year, yearOfNextMonth = month === 11 ? year + 1 : year, daysInPreviousMonth = Datepicker._getDaysInMonth(yearOfPreviousMonth, previousMonth);
+            let cells = days + before, after = cells;
+            while (after > 7) {
+                after -= 7;
+            }
+            cells += 7 - after;
+            let isWeekSelected = false;
+            for (let i = 0, r = 0; i < cells; i++) {
+                const day = new Date(year, month, 1 + (i - before)), isToday = Datepicker._compareDates(day, now), hasEvent = this.options.events.indexOf(day.toDateString()) !== -1, isEmpty = i < before || i >= days + before, isStartRange = this.options.startRange && Datepicker._compareDates(this.options.startRange, day), isEndRange = this.options.endRange && Datepicker._compareDates(this.options.endRange, day), isInRange = this.options.startRange &&
+                    this.options.endRange &&
+                    this.options.startRange < day &&
+                    day < this.options.endRange, isDisabled = (this.options.minDate && day < this.options.minDate) ||
+                    (this.options.maxDate && day > this.options.maxDate) ||
+                    (this.options.disableWeekends && Datepicker._isWeekend(day)) ||
+                    (this.options.disableDayFn && this.options.disableDayFn(day)), isDateRangeStart = this.options.isDateRange && this.date && this.endDate && Datepicker._compareDates(this.date, day), isDateRangeEnd = this.options.isDateRange && this.endDate && Datepicker._compareDates(this.endDate, day), isDateRange = this.options.isDateRange &&
+                    Datepicker._isDate(this.endDate) &&
+                    Datepicker._compareWithinRange(day, this.date, this.endDate);
+                let dayNumber = 1 + (i - before), monthNumber = month, yearNumber = year;
+                let isSelected = false;
+                if (Datepicker._isDate(this.date)) {
+                    isSelected = Datepicker._compareDates(day, this.date);
+                }
+                if (!isSelected && Datepicker._isDate(this.endDate)) {
+                    isSelected = Datepicker._compareDates(day, this.endDate);
+                }
+                if (this.options.isMultipleSelection &&
+                    this.dates?.some((item) => item.getTime() === day.getTime())) {
+                    isSelected = true;
+                }
+                if (isEmpty) {
+                    if (i < before) {
+                        dayNumber = daysInPreviousMonth + dayNumber;
+                        monthNumber = previousMonth;
+                        yearNumber = yearOfPreviousMonth;
+                    }
+                    else {
+                        dayNumber = dayNumber - days;
+                        monthNumber = nextMonth;
+                        yearNumber = yearOfNextMonth;
+                    }
+                }
+                const dayConfig = {
+                    day: dayNumber,
+                    month: monthNumber,
+                    year: yearNumber,
+                    hasEvent: hasEvent,
+                    isSelected: isSelected,
+                    isToday: isToday,
+                    isDisabled: isDisabled,
+                    isEmpty: isEmpty,
+                    isStartRange: isStartRange,
+                    isEndRange: isEndRange,
+                    isInRange: isInRange,
+                    showDaysInNextAndPreviousMonths: this.options.showDaysInNextAndPreviousMonths,
+                    isDateRangeStart: isDateRangeStart,
+                    isDateRangeEnd: isDateRangeEnd,
+                    isDateRange: isDateRange
+                };
+                row.push(this.renderDay(dayConfig));
+                if (++r === 7) {
+                    data.push(this.renderRow(row, this.options.isRTL, isWeekSelected));
+                    row = [];
+                    r = 0;
+                    isWeekSelected = false;
+                }
+            }
+            return this.renderTable(this.options, data, randId);
+        }
+        renderDay(opts) {
+            const classMap = {
+                isDisabled: 'is-disabled',
+                isToday: 'is-today',
+                isSelected: 'is-selected',
+                hasEvent: 'has-event',
+                isInRange: 'is-inrange',
+                isStartRange: 'is-startrange',
+                isEndRange: 'is-endrange',
+                isDateRangeStart: 'is-daterange-start',
+                isDateRangeEnd: 'is-daterange-end',
+                isDateRange: 'is-daterange'
+            }, ariaSelected = !(['isSelected', 'isDateRange'].filter((prop) => !!(opts.hasOwnProperty(prop) && opts[prop] === true)).length === 0), arr = ['datepicker-day'];
+            if (opts.isEmpty) {
+                if (opts.showDaysInNextAndPreviousMonths) {
+                    arr.push('is-outside-current-month');
+                    arr.push('is-selection-disabled');
+                }
+                else {
+                    return '<td class="is-empty"></td>';
+                }
+            }
+            for (const [property, className] of Object.entries(classMap)) {
+                if (opts.hasOwnProperty(property) && opts[property]) {
+                    arr.push(className);
+                }
+            }
+            return (`<td data-day="${opts.day}" class="${arr.join(' ')}" aria-selected="${ariaSelected}">` +
+                `<button class="datepicker-day-button" type="button" data-year="${opts.year}" data-month="${opts.month}" data-day="${opts.day}">${opts.day}</button>` +
+                '</td>');
+        }
+        renderRow(days, isRTL, isRowSelected) {
+            return ('<tr class="datepicker-row' +
+                (isRowSelected ? ' is-selected' : '') +
+                '">' +
+                (isRTL ? days.reverse() : days).join('') +
+                '</tr>');
+        }
+        renderTable(opts, data, randId) {
+            return ('<div class="datepicker-table-wrapper"><table cellpadding="0" cellspacing="0" class="datepicker-table" role="grid" aria-labelledby="' +
+                randId +
+                '">' +
+                this.renderHead(opts) +
+                this.renderBody(data) +
+                '</table></div>');
+        }
+        renderHead(opts) {
+            const arr = [];
+            let i;
+            for (i = 0; i < 7; i++) {
+                arr.push(`<th scope="col"><abbr title="${this.renderDayName(opts, i)}">${this.renderDayName(opts, i, true)}</abbr></th>`);
+            }
+            return '<thead><tr>' + (opts.isRTL ? arr.reverse() : arr).join('') + '</tr></thead>';
+        }
+        renderBody(rows) {
+            return '<tbody>' + rows.join('') + '</tbody>';
+        }
+        renderTitle(instance, c, year, month, refYear, randId) {
+            const opts = this.options, isMinYear = year === opts.minYear, isMaxYear = year === opts.maxYear;
+            let i, j, arr = [], html = '<div id="' +
+                randId +
+                '" class="datepicker-controls" role="heading" aria-live="assertive">', prev = true, next = true;
+            for (i = 0; i < 12; i++) {
+                arr.push('<option value="' +
+                    (year === refYear ? i - c : 12 + i - c) +
+                    '"' +
+                    (i === month ? ' selected="selected"' : '') +
+                    ((isMinYear && i < opts.minMonth) || (isMaxYear && i > opts.maxMonth)
+                        ? 'disabled="disabled"'
+                        : '') +
+                    '>' +
+                    opts.i18n.months[i] +
+                    '</option>');
+            }
+            const monthHtml = '<select class="datepicker-select orig-select-month" tabindex="-1">' +
+                arr.join('') +
+                '</select>';
+            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(`<option value="${i}" ${i === year ? 'selected="selected"' : ''}>${i}</option>`);
+                }
+            }
+            if (opts.yearRangeReverse)
+                arr.reverse();
+            const yearHtml = `<select class="datepicker-select orig-select-year" tabindex="-1">${arr.join('')}</select>`;
+            const leftArrow = '<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"/><path d="M0-.5h24v24H0z" fill="none"/></svg>';
+            html += `<button class="month-prev${prev ? '' : ' is-disabled'
+        // @todo remove button class and add scss mixin, current implementation temporary for focus states, @see https://github.com/materializecss/materialize/issues/566
+        } btn" type="button">${leftArrow}</button>`;
+            html += '<div class="selects-container">';
+            if (opts.showMonthAfterYear) {
+                html += yearHtml + monthHtml;
+            }
+            else {
+                html += monthHtml + yearHtml;
+            }
+            html += '</div>';
+            if (isMinYear && (month === 0 || opts.minMonth >= month)) {
+                prev = false;
+            }
+            if (isMaxYear && (month === 11 || opts.maxMonth <= month)) {
+                next = false;
+            }
+            const rightArrow = '<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"/><path d="M0-.25h24v24H0z" fill="none"/></svg>';
+            html += `<button class="month-next${next ? '' : ' is-disabled'
+        // @todo remove button class and add scss mixin, current implementation temporary for focus states, @see https://github.com/materializecss/materialize/issues/566
+        } btn" type="button">${rightArrow}</button>`;
+            return (html += '</div>');
+        }
+        // refresh HTML
+        draw() {
+            const opts = this.options, minYear = opts.minYear, maxYear = opts.maxYear, minMonth = opts.minMonth, maxMonth = opts.maxMonth;
+            let html = '';
+            if (this._y <= minYear) {
+                this._y = minYear;
+                if (!isNaN(minMonth) && this._m < minMonth) {
+                    this._m = minMonth;
+                }
+            }
+            if (this._y >= maxYear) {
+                this._y = maxYear;
+                if (!isNaN(maxMonth) && this._m > maxMonth) {
+                    this._m = maxMonth;
+                }
+            }
+            const randId = 'datepicker-title-' +
+                Math.random()
+                    .toString(36)
+                    .replace(/[^a-z]+/g, '')
+                    .substr(0, 2);
+            for (let c = 0; c < 1; c++) {
+                if (!this.options.isDateRange) {
+                    this._renderDateDisplay(this.date);
+                }
+                else {
+                    this._renderDateDisplay(this.date, this.endDate);
+                }
+                html +=
+                    this.renderTitle(this, c, this.calendars[c].year, this.calendars[c].month, this.calendars[0].year, randId) + this.render(this.calendars[c].year, this.calendars[c].month, randId);
+            }
+            this.destroySelects();
+            this.calendarEl.innerHTML = html;
+            // Init Materialize Select
+            const yearSelect = this.calendarEl.querySelector('.orig-select-year');
+            const monthSelect = this.calendarEl.querySelector('.orig-select-month');
+            // @todo fix accessibility @see https://github.com/materializecss/materialize/issues/522
+            FormSelect.init(yearSelect, {
+                classes: 'select-year',
+                dropdownOptions: { container: document.body, constrainWidth: false }
+            });
+            FormSelect.init(monthSelect, {
+                classes: 'select-month',
+                dropdownOptions: { container: document.body, constrainWidth: false }
+            });
+            // Add change handlers for select
+            yearSelect.addEventListener('change', this._handleYearChange);
+            monthSelect.addEventListener('change', this._handleMonthChange);
+            if (typeof this.options.onDraw === 'function') {
+                this.options.onDraw.call(this);
+            }
+        }
+        _setupEventHandlers() {
+            this.el.addEventListener('click', this._handleInputClick);
+            this.el.addEventListener('keydown', this._handleInputKeydown);
+            this.el.addEventListener('change', this._handleInputChange);
+            this.calendarEl.addEventListener('click', this._handleCalendarClick);
+            this.doneBtn.addEventListener('click', () => this.setInputValues());
+            this.cancelBtn.addEventListener('click', this.close);
+            if (this.options.showClearBtn) {
+                this.clearBtn.addEventListener('click', this._handleClearClick);
+            }
+        }
+        _setupVariables() {
+            const template = document.createElement('template');
+            template.innerHTML = Datepicker._template.trim();
+            this.containerEl = template.content.firstChild;
+            this.calendarEl = this.containerEl.querySelector('.datepicker-calendar');
+            this.yearTextEl = this.containerEl.querySelector('.year-text');
+            this.dateTextEl = this.containerEl.querySelector('.date-text');
+            if (this.options.showClearBtn) {
+                this.clearBtn = this.containerEl.querySelector('.datepicker-clear');
+            }
+            // TODO: This should not be part of the datepicker
+            this.doneBtn = this.containerEl.querySelector('.datepicker-done');
+            this.cancelBtn = this.containerEl.querySelector('.datepicker-cancel');
+            this.formats = {
+                d: (date) => {
+                    return date.getDate();
+                },
+                dd: (date) => {
+                    const d = date.getDate();
+                    return (d < 10 ? '0' : '') + d;
+                },
+                ddd: (date) => {
+                    return this.options.i18n.weekdaysShort[date.getDay()];
+                },
+                dddd: (date) => {
+                    return this.options.i18n.weekdays[date.getDay()];
+                },
+                m: (date) => {
+                    return date.getMonth() + 1;
+                },
+                mm: (date) => {
+                    const m = date.getMonth() + 1;
+                    return (m < 10 ? '0' : '') + m;
+                },
+                mmm: (date) => {
+                    return this.options.i18n.monthsShort[date.getMonth()];
+                },
+                mmmm: (date) => {
+                    return this.options.i18n.months[date.getMonth()];
+                },
+                yy: (date) => {
+                    return ('' + date.getFullYear()).slice(2);
+                },
+                yyyy: (date) => {
+                    return date.getFullYear();
+                }
+            };
+        }
+        _removeEventHandlers() {
+            this.el.removeEventListener('click', this._handleInputClick);
+            this.el.removeEventListener('keydown', this._handleInputKeydown);
+            this.el.removeEventListener('change', this._handleInputChange);
+            this.calendarEl.removeEventListener('click', this._handleCalendarClick);
+            if (this.options.isDateRange) {
+                this.endDateEl.removeEventListener('click', this._handleInputClick);
+                this.endDateEl.removeEventListener('keypress', this._handleInputKeydown);
+                this.endDateEl.removeEventListener('change', this._handleInputChange);
+            }
+        }
+        _handleInputClick = (e) => {
+            // Prevents default browser datepicker modal rendering
+            if (e.type == 'date') {
+                e.preventDefault();
+            }
+            this.setDateFromInput(e.target);
+            this.draw();
+            this.gotoDate(e.target === this.el ? this.date : this.endDate);
+            if (this.options.onInputInteraction)
+                this.options.onInputInteraction.call(this);
+        };
+        _handleInputKeydown = (e) => {
+            if (Utils.keys.ENTER.includes(e.key)) {
+                e.preventDefault();
+                this.setDateFromInput(e.target);
+                this.draw();
+                if (this.options.onInputInteraction)
+                    this.options.onInputInteraction.call(this);
+            }
+        };
+        _handleCalendarClick = (e) => {
+            const target = e.target;
+            if (!target.classList.contains('is-disabled')) {
+                if (target.classList.contains('datepicker-day-button') &&
+                    !target.classList.contains('is-empty') &&
+                    !target.parentElement.classList.contains('is-disabled')) {
+                    const selectedDate = new Date(e.target.getAttribute('data-year'), e.target.getAttribute('data-month'), e.target.getAttribute('data-day'));
+                    if (!this.multiple || (this.multiple && this.options.isMultipleSelection)) {
+                        this.setDate(selectedDate);
+                    }
+                    if (this.options.isDateRange) {
+                        this._handleDateRangeCalendarClick(selectedDate);
+                    }
+                    this._finishSelection();
+                }
+                else if (target.closest('.month-prev')) {
+                    this.prevMonth();
+                }
+                else if (target.closest('.month-next')) {
+                    this.nextMonth();
+                }
+            }
+        };
+        _handleDateRangeCalendarClick = (date) => {
+            if (this.endDate == null || !Datepicker._compareDates(date, this.endDate)) {
+                if (Datepicker._isDate(this.date) && Datepicker._comparePastDate(date, this.date)) {
+                    return;
+                }
+                this.setDate(date, false, Datepicker._isDate(this.date));
+                return;
+            }
+            this._clearDates();
+            this.draw();
+        };
+        _handleClearClick = () => {
+            this._clearDates();
+            this.setInputValues();
+        };
+        _clearDates = () => {
+            this.date = null;
+            this.endDate = null;
+        };
+        _handleMonthChange = (e) => {
+            this.gotoMonth(e.target.value);
+        };
+        _handleYearChange = (e) => {
+            this.gotoYear(e.target.value);
+        };
+        // change view to a specific month (zero-index, e.g. 0: January)
+        gotoMonth(month) {
+            if (!isNaN(month)) {
+                this.calendars[0].month = parseInt(month, 10);
+                this.adjustCalendars();
+            }
+        }
+        // change view to a specific full year (e.g. "2012")
+        gotoYear(year) {
+            if (!isNaN(year)) {
+                this.calendars[0].year = parseInt(year, 10);
+                this.adjustCalendars();
+            }
+        }
+        _handleInputChange = (e) => {
+            let date;
+            const el = e.target;
+            // Prevent change event from being fired when triggered by the plugin
+            if (e['detail']?.firedBy === this)
+                return;
+            // Prevent change event from being fired if an end date is set without a start date
+            if (el == this.endDateEl && !this.date)
+                return;
+            if (this.options.parse) {
+                date = this.options.parse(e.target.value, typeof this.options.format === 'function'
+                    ? this.options.format(new Date(this.el.value))
+                    : this.options.format);
+            }
+            else {
+                date = new Date(Date.parse(e.target.value));
+            }
+            if (Datepicker._isDate(date)) {
+                this.setDate(date, false, el == this.endDateEl, true);
+                if (e.type == 'date') {
+                    this.setDataDate(e, date);
+                    this.setInputValues();
+                }
+            }
+        };
+        renderDayName(opts, day, abbr = false) {
+            day += opts.firstDay;
+            while (day >= 7) {
+                day -= 7;
+            }
+            return abbr ? opts.i18n.weekdaysAbbrev[day] : opts.i18n.weekdays[day];
+        }
+        createDateInput() {
+            const dateInput = this.el.cloneNode(true);
+            dateInput.addEventListener('click', this._handleInputClick);
+            dateInput.addEventListener('keypress', this._handleInputKeydown);
+            dateInput.addEventListener('change', this._handleInputChange);
+            this.el.parentElement.appendChild(dateInput);
+            return dateInput;
+        }
+        // Set input value to the selected date and close Datepicker
+        _finishSelection = () => {
+            this.setInputValues();
+            this.close();
+        };
+        // deprecated
+        open() {
+            console.warn('Datepicker.open() is deprecated. Remove this method and wrap in modal yourself.');
+            return this;
+        }
+        close() {
+            console.warn('Datepicker.close() is deprecated. Remove this method and wrap in modal yourself.');
+            return this;
+        }
+        static {
+            Datepicker._template = `
+        <div class="datepicker-container">
+          <div class="datepicker-date-display">
+            <span class="year-text"></span>
+            <span class="date-text"></span>
+          </div>
+          <div class="datepicker-calendar-container">
+            <div class="datepicker-calendar"></div>
+            <div class="datepicker-footer">
+              <button class="btn-flat datepicker-clear waves-effect" style="visibility: hidden;" type="button"></button>
+              <div class="confirmation-btns">
+                <button class="btn-flat datepicker-cancel waves-effect" type="button"></button>
+                <button class="btn-flat datepicker-done waves-effect" type="button"></button>
+              </div>
+            </div>
+          </div>
+        </div>`;
+        }
+    }
+
+    class Forms {
+        /**
+         * Checks if the label has validation and apply
+         * the correct class and styles
+         * @param textfield
+         */
+        static validateField(textfield) {
+            if (!textfield) {
+                console.error('No text field element found');
+                return;
+            }
+            const hasLength = textfield.getAttribute('data-length') !== null;
+            const lenAttr = parseInt(textfield.getAttribute('data-length'));
+            const len = textfield.value.length;
+            if (len === 0 &&
+                textfield.validity.badInput === false &&
+                !textfield.required &&
+                textfield.classList.contains('validate')) {
+                textfield.classList.remove('invalid');
+            }
+            else if (textfield.classList.contains('validate')) {
+                // Check for character counter attributes
+                if ((textfield.validity.valid && hasLength && len <= lenAttr) ||
+                    (textfield.validity.valid && !hasLength)) {
+                    textfield.classList.remove('invalid');
+                }
+                else {
+                    textfield.classList.add('invalid');
+                }
+            }
+        }
+        /**
+         * Resizes the given TextArea after updating the
+         *  value content dynamically.
+         * @param e EventTarget
+         */
+        static textareaAutoResize(e) {
+            const textarea = e;
+            // if (!textarea) {
+            //   console.error('No textarea element found');
+            //   return;
+            // }
+            // Textarea Auto Resize
+            let hiddenDiv = document.querySelector('.hiddendiv');
+            if (!hiddenDiv) {
+                hiddenDiv = document.createElement('div');
+                hiddenDiv.classList.add('hiddendiv', 'common');
+                document.body.append(hiddenDiv);
+            }
+            const style = getComputedStyle(textarea);
+            // Set font properties of hiddenDiv
+            const fontFamily = style.fontFamily; //textarea.css('font-family');
+            const fontSize = style.fontSize; //textarea.css('font-size');
+            const lineHeight = style.lineHeight; //textarea.css('line-height');
+            // Firefox can't handle padding shorthand.
+            const paddingTop = style.paddingTop; //getComputedStyle(textarea).css('padding-top');
+            const paddingRight = style.paddingRight; //textarea.css('padding-right');
+            const paddingBottom = style.paddingBottom; //textarea.css('padding-bottom');
+            const paddingLeft = style.paddingLeft; //textarea.css('padding-left');
+            if (fontSize)
+                hiddenDiv.style.fontSize = fontSize; //('font-size', fontSize);
+            if (fontFamily)
+                hiddenDiv.style.fontFamily = fontFamily; //css('font-family', fontFamily);
+            if (lineHeight)
+                hiddenDiv.style.lineHeight = lineHeight; //css('line-height', lineHeight);
+            if (paddingTop)
+                hiddenDiv.style.paddingTop = paddingTop; //ss('padding-top', paddingTop);
+            if (paddingRight)
+                hiddenDiv.style.paddingRight = paddingRight; //css('padding-right', paddingRight);
+            if (paddingBottom)
+                hiddenDiv.style.paddingBottom = paddingBottom; //css('padding-bottom', paddingBottom);
+            if (paddingLeft)
+                hiddenDiv.style.paddingLeft = paddingLeft; //css('padding-left', paddingLeft);
+            // Set original-height, if none
+            if (!textarea.hasAttribute('original-height'))
+                textarea.setAttribute('original-height', textarea.getBoundingClientRect().height.toString());
+            if (textarea.getAttribute('wrap') === 'off') {
+                hiddenDiv.style.overflowWrap = 'normal'; // ('overflow-wrap', 'normal')
+                hiddenDiv.style.whiteSpace = 'pre'; //.css('white-space', 'pre');
+            }
+            hiddenDiv.innerText = textarea.value + '\n';
+            hiddenDiv.innerHTML = hiddenDiv.innerHTML.replace(/\n/g, '<br>');
+            // When textarea is hidden, width goes crazy.
+            // Approximate with half of window size
+            if (textarea.offsetWidth > 0 && textarea.offsetHeight > 0) {
+                hiddenDiv.style.width = textarea.getBoundingClientRect().width + 'px'; // ('width', textarea.width() + 'px');
+            }
+            else {
+                hiddenDiv.style.width = window.innerWidth / 2 + 'px'; //css('width', window.innerWidth / 2 + 'px');
+            }
+            // Resize if the new height is greater than the
+            // original height of the textarea
+            const originalHeight = parseInt(textarea.getAttribute('original-height'));
+            const prevLength = parseInt(textarea.getAttribute('previous-length'));
+            if (isNaN(originalHeight))
+                return;
+            if (originalHeight <= hiddenDiv.clientHeight) {
+                textarea.style.height = hiddenDiv.clientHeight + 'px'; //css('height', hiddenDiv.innerHeight() + 'px');
+            }
+            else if (textarea.value.length < prevLength) {
+                // In case the new height is less than original height, it
+                // means the textarea has less text than before
+                // So we set the height to the original one
+                textarea.style.height = originalHeight + 'px';
+            }
+            textarea.setAttribute('previous-length', textarea.value.length.toString());
+        }
+        static Init() {
+            if (typeof document !== 'undefined')
+                document?.addEventListener('DOMContentLoaded', () => {
+                    document.addEventListener('change', (e) => {
+                        const target = e.target;
+                        if (target instanceof HTMLInputElement) {
+                            if (target.value.length !== 0 || target.getAttribute('placeholder') !== null) {
+                                for (const child of target.parentNode.children) {
+                                    if (child.tagName == 'label') {
+                                        child.classList.add('active');
+                                    }
+                                }
+                            }
+                            Forms.validateField(target);
+                        }
+                    });
+                    document.addEventListener('keyup', (e) => {
+                        const target = e.target;
+                        // Radio and Checkbox focus class
+                        if (target instanceof HTMLInputElement && ['radio', 'checkbox'].includes(target.type)) {
+                            // TAB, check if tabbing to radio or checkbox.
+                            if (Utils.keys.TAB.includes(e.key)) {
+                                target.classList.add('tabbed');
+                                target.addEventListener('blur', () => target.classList.remove('tabbed'), {
+                                    once: true
+                                });
+                            }
+                        }
+                    });
+                    document
+                        .querySelectorAll('.materialize-textarea')
+                        .forEach((textArea) => {
+                        Forms.InitTextarea(textArea);
+                    });
+                    // File Input Path
+                    document
+                        .querySelectorAll('.file-field input[type="file"]')
+                        .forEach((fileInput) => {
+                        Forms.InitFileInputPath(fileInput);
+                    });
+                });
+        }
+        static InitTextarea(textarea) {
+            // Save Data in Element
+            textarea.setAttribute('original-height', textarea.getBoundingClientRect().height.toString());
+            textarea.setAttribute('previous-length', textarea.value.length.toString());
+            Forms.textareaAutoResize(textarea);
+            textarea.addEventListener('keyup', (e) => Forms.textareaAutoResize(e.target));
+            textarea.addEventListener('keydown', (e) => Forms.textareaAutoResize(e.target));
+        }
+        static InitFileInputPath(fileInput) {
+            fileInput.addEventListener('change', () => {
+                const fileField = fileInput.closest('.file-field');
+                const pathInput = fileField.querySelector('input.file-path');
+                const files = fileInput.files;
+                const filenames = [];
+                for (let i = 0; i < files.length; i++) {
+                    filenames.push(files[i].name);
+                }
+                pathInput.value = filenames.join(', ');
+                pathInput.dispatchEvent(new Event('change', { bubbles: true, cancelable: true, composed: true }));
+            });
+        }
+    }
+
+    const _defaults$d = {
+        inDuration: 275,
+        outDuration: 200,
+        onOpenStart: null,
+        onOpenEnd: null,
+        onCloseStart: null,
+        onCloseEnd: null
+    };
+    class Materialbox extends Component {
+        /** If the materialbox overlay is showing. */
+        overlayActive;
+        /** If the materialbox is no longer being animated. */
+        doneAnimating;
+        /** Caption, if specified. */
+        caption;
+        /** Original width of image. */
+        originalWidth;
+        /** Original height of image. */
+        originalHeight;
+        originInlineStyles;
+        placeholder;
+        _changedAncestorList;
+        newHeight;
+        newWidth;
+        windowWidth;
+        windowHeight;
+        attrWidth;
+        attrHeight;
+        _overlay;
+        _photoCaption;
+        constructor(el, options) {
+            super(el, options, Materialbox);
+            this.el['M_Materialbox'] = this;
+            this.options = {
+                ...Materialbox.defaults,
+                ...options
+            };
+            this.overlayActive = false;
+            this.doneAnimating = true;
+            this.placeholder = document.createElement('div');
+            this.placeholder.classList.add('material-placeholder');
+            this.originalWidth = 0;
+            this.originalHeight = 0;
+            this.originInlineStyles = this.el.getAttribute('style');
+            this.caption = this.el.getAttribute('data-caption') || '';
+            this.el.tabIndex = 0;
+            // Wrap
+            this.el.before(this.placeholder);
+            this.placeholder.append(this.el);
+            this._setupEventHandlers();
+        }
+        static get defaults() {
+            return _defaults$d;
+        }
+        /**
+         * Initializes instances of MaterialBox.
+         * @param els HTML elements.
+         * @param options Component options.
+         */
+        static init(els, options = {}) {
+            return super.init(els, options, Materialbox);
+        }
+        static getInstance(el) {
+            return el['M_Materialbox'];
+        }
+        destroy() {
+            this._removeEventHandlers();
+            this.el['M_Materialbox'] = undefined;
+            // Unwrap image
+            //this.placeholder.after(this.el).remove();
+            this.placeholder.remove();
+            this.el.removeAttribute('style');
+        }
+        _setupEventHandlers() {
+            this.el.addEventListener('click', this._handleMaterialboxClick);
+            this.el.addEventListener('keypress', this._handleMaterialboxKeypress);
+        }
+        _removeEventHandlers() {
+            this.el.removeEventListener('click', this._handleMaterialboxClick);
+            this.el.removeEventListener('keypress', this._handleMaterialboxKeypress);
+        }
+        _handleMaterialboxClick = () => {
+            this._handleMaterialboxToggle();
+        };
+        _handleMaterialboxKeypress = (e) => {
+            if (Utils.keys.ENTER.includes(e.key)) {
+                this._handleMaterialboxToggle();
+            }
+        };
+        _handleMaterialboxToggle = () => {
+            // If already modal, return to original
+            if (this.doneAnimating === false || (this.overlayActive && this.doneAnimating))
+                this.close();
+            else
+                this.open();
+        };
+        _handleWindowScroll = () => {
+            if (this.overlayActive)
+                this.close();
+        };
+        _handleWindowResize = () => {
+            if (this.overlayActive)
+                this.close();
+        };
+        _handleWindowEscape = (e) => {
+            if (Utils.keys.ESC.includes(e.key) && this.doneAnimating && this.overlayActive)
+                this.close();
+        };
+        _makeAncestorsOverflowVisible() {
+            this._changedAncestorList = [];
+            let ancestor = this.placeholder.parentNode;
+            while (ancestor !== null && ancestor !== document) {
+                const curr = ancestor;
+                if (curr.style.overflow !== 'visible') {
+                    curr.style.overflow = 'visible';
+                    this._changedAncestorList.push(curr);
+                }
+                ancestor = ancestor.parentNode;
+            }
+        }
+        _offset(el) {
+            const box = el.getBoundingClientRect();
+            const docElem = document.documentElement;
+            return {
+                top: box.top + window.scrollY - docElem.clientTop,
+                left: box.left + window.scrollX - docElem.clientLeft
+            };
+        }
+        _updateVars() {
+            this.windowWidth = window.innerWidth;
+            this.windowHeight = window.innerHeight;
+            this.caption = this.el.getAttribute('data-caption') || '';
+        }
+        // Image
+        _animateImageIn() {
+            this.el.style.maxHeight = this.newHeight.toString() + 'px';
+            this.el.style.maxWidth = this.newWidth.toString() + 'px';
+            const duration = this.options.inDuration;
+            // from
+            this.el.style.transition = 'none';
+            this.el.style.height = this.originalHeight + 'px';
+            this.el.style.width = this.originalWidth + 'px';
+            setTimeout(() => {
+                // easeOutQuad
+                this.el.style.transition = `height ${duration}ms ease,
+        width ${duration}ms ease,
+        left ${duration}ms ease,
+        top ${duration}ms ease
+      `;
+                // to
+                this.el.style.height = this.newHeight + 'px';
+                this.el.style.width = this.newWidth + 'px';
+                this.el.style.left =
+                    Utils.getDocumentScrollLeft() +
+                        this.windowWidth / 2 -
+                        this._offset(this.placeholder).left -
+                        this.newWidth / 2 +
+                        'px';
+                this.el.style.top =
+                    Utils.getDocumentScrollTop() +
+                        this.windowHeight / 2 -
+                        this._offset(this.placeholder).top -
+                        this.newHeight / 2 +
+                        'px';
+            }, 1);
+            setTimeout(() => {
+                this.doneAnimating = true;
+                if (typeof this.options.onOpenEnd === 'function')
+                    this.options.onOpenEnd.call(this, this.el);
+            }, duration);
+            /*
+            anim({
+              targets: this.el, // image
+              height: [this.originalHeight, this.newHeight],
+              width: [this.originalWidth, this.newWidth],
+              left:
+                Utils.getDocumentScrollLeft() +
+                this.windowWidth / 2 -
+                this._offset(this.placeholder).left -
+                this.newWidth / 2,
+              top:
+                Utils.getDocumentScrollTop() +
+                this.windowHeight / 2 -
+                this._offset(this.placeholder).top -
+                this.newHeight / 2,
+        
+              duration: this.options.inDuration,
+              easing: 'easeOutQuad',
+              complete: () => {
+                this.doneAnimating = true;
+                if (typeof this.options.onOpenEnd === 'function') this.options.onOpenEnd.call(this, this.el);
+              }
+            });
+            */
+        }
+        _animateImageOut() {
+            const duration = this.options.outDuration;
+            // easeOutQuad
+            this.el.style.transition = `height ${duration}ms ease,
+      width ${duration}ms ease,
+      left ${duration}ms ease,
+      top ${duration}ms ease
+    `;
+            // to
+            this.el.style.height = this.originalWidth + 'px';
+            this.el.style.width = this.originalWidth + 'px';
+            this.el.style.left = '0';
+            this.el.style.top = '0';
+            setTimeout(() => {
+                this.placeholder.style.height = '';
+                this.placeholder.style.width = '';
+                this.placeholder.style.position = '';
+                this.placeholder.style.top = '';
+                this.placeholder.style.left = '';
+                // Revert to width or height attribute
+                if (this.attrWidth)
+                    this.el.setAttribute('width', this.attrWidth.toString());
+                if (this.attrHeight)
+                    this.el.setAttribute('height', this.attrHeight.toString());
+                this.el.removeAttribute('style');
+                if (this.originInlineStyles)
+                    this.el.setAttribute('style', this.originInlineStyles);
+                // Remove class
+                this.el.classList.remove('active');
+                this.doneAnimating = true;
+                // Remove overflow overrides on ancestors
+                this._changedAncestorList.forEach((anchestor) => (anchestor.style.overflow = ''));
+                // onCloseEnd callback
+                if (typeof this.options.onCloseEnd === 'function')
+                    this.options.onCloseEnd.call(this, this.el);
+            }, duration);
+        }
+        // Caption
+        _addCaption() {
+            this._photoCaption = document.createElement('div');
+            this._photoCaption.classList.add('materialbox-caption');
+            this._photoCaption.innerText = this.caption;
+            document.body.append(this._photoCaption);
+            this._photoCaption.style.display = 'inline';
+            // Animate
+            this._photoCaption.style.transition = 'none';
+            this._photoCaption.style.opacity = '0';
+            const duration = this.options.inDuration;
+            setTimeout(() => {
+                this._photoCaption.style.transition = `opacity ${duration}ms ease`;
+                this._photoCaption.style.opacity = '1';
+            }, 1);
+        }
+        _removeCaption() {
+            const duration = this.options.outDuration;
+            this._photoCaption.style.transition = `opacity ${duration}ms ease`;
+            this._photoCaption.style.opacity = '0';
+            setTimeout(() => {
+                this._photoCaption.remove();
+            }, duration);
+        }
+        // Overlay
+        _addOverlay() {
+            this._overlay = document.createElement('div');
+            this._overlay.id = 'materialbox-overlay';
+            this._overlay.addEventListener('click', () => {
+                if (this.doneAnimating)
+                    this.close();
+            }, { once: true });
+            // Put before in origin image to preserve z-index layering.
+            this.el.before(this._overlay);
+            // Set dimensions if needed
+            const overlayOffset = this._overlay.getBoundingClientRect();
+            this._overlay.style.width = this.windowWidth + 'px';
+            this._overlay.style.height = this.windowHeight + 'px';
+            this._overlay.style.left = -1 * overlayOffset.left + 'px';
+            this._overlay.style.top = -1 * overlayOffset.top + 'px';
+            // Animate
+            this._overlay.style.transition = 'none';
+            this._overlay.style.opacity = '0';
+            const duration = this.options.inDuration;
+            setTimeout(() => {
+                this._overlay.style.transition = `opacity ${duration}ms ease`;
+                this._overlay.style.opacity = '1';
+            }, 1);
+        }
+        _removeOverlay() {
+            const duration = this.options.outDuration;
+            this._overlay.style.transition = `opacity ${duration}ms ease`;
+            this._overlay.style.opacity = '0';
+            setTimeout(() => {
+                this.overlayActive = false;
+                this._overlay.remove();
+            }, duration);
+        }
+        /**
+         * Open materialbox.
+         */
+        open = () => {
+            this._updateVars();
+            this.originalWidth = this.el.getBoundingClientRect().width;
+            this.originalHeight = this.el.getBoundingClientRect().height;
+            // Set states
+            this.doneAnimating = false;
+            this.el.classList.add('active');
+            this.overlayActive = true;
+            // onOpenStart callback
+            if (typeof this.options.onOpenStart === 'function')
+                this.options.onOpenStart.call(this, this.el);
+            // Set positioning for placeholder
+            this.placeholder.style.width = this.placeholder.getBoundingClientRect().width + 'px';
+            this.placeholder.style.height = this.placeholder.getBoundingClientRect().height + 'px';
+            this.placeholder.style.position = 'relative';
+            this.placeholder.style.top = '0';
+            this.placeholder.style.left = '0';
+            this._makeAncestorsOverflowVisible();
+            // Set css on origin
+            this.el.style.position = 'absolute';
+            this.el.style.zIndex = '1000';
+            this.el.style.willChange = 'left, top, width, height';
+            // Change from width or height attribute to css
+            this.attrWidth = this.el.getAttribute('width');
+            this.attrHeight = this.el.getAttribute('height');
+            if (this.attrWidth) {
+                this.el.style.width = this.attrWidth + 'px';
+                this.el.removeAttribute('width');
+            }
+            if (this.attrHeight) {
+                this.el.style.width = this.attrHeight + 'px';
+                this.el.removeAttribute('height');
+            }
+            this._addOverlay();
+            // Add and animate caption if it exists
+            if (this.caption !== '')
+                this._addCaption();
+            // Resize Image
+            const widthPercent = this.originalWidth / this.windowWidth;
+            const heightPercent = this.originalHeight / this.windowHeight;
+            this.newWidth = 0;
+            this.newHeight = 0;
+            if (widthPercent > heightPercent) {
+                // Width first
+                const ratio = this.originalHeight / this.originalWidth;
+                this.newWidth = this.windowWidth * 0.9;
+                this.newHeight = this.windowWidth * 0.9 * ratio;
+            }
+            else {
+                // Height first
+                const ratio = this.originalWidth / this.originalHeight;
+                this.newWidth = this.windowHeight * 0.9 * ratio;
+                this.newHeight = this.windowHeight * 0.9;
+            }
+            this._animateImageIn();
+            // Handle Exit triggers
+            window.addEventListener('scroll', this._handleWindowScroll);
+            window.addEventListener('resize', this._handleWindowResize);
+            window.addEventListener('keyup', this._handleWindowEscape);
+        };
+        /**
+         * Close materialbox.
+         */
+        close = () => {
+            this._updateVars();
+            this.doneAnimating = false;
+            // onCloseStart callback
+            if (typeof this.options.onCloseStart === 'function')
+                this.options.onCloseStart.call(this, this.el);
+            //anim.remove(this.el);
+            //anim.remove(this._overlay);
+            //if (this.caption !== '') anim.remove(this._photoCaption);
+            // disable exit handlers
+            window.removeEventListener('scroll', this._handleWindowScroll);
+            window.removeEventListener('resize', this._handleWindowResize);
+            window.removeEventListener('keyup', this._handleWindowEscape);
+            this._removeOverlay();
+            this._animateImageOut();
+            if (this.caption !== '')
+                this._removeCaption();
+        };
+    }
+
+    const _defaults$c = {
+        opacity: 0.5,
+        inDuration: 250,
+        outDuration: 250,
+        onOpenStart: null,
+        onOpenEnd: null,
+        onCloseStart: null,
+        onCloseEnd: null,
+        preventScrolling: true,
+        dismissible: true,
+        startingTop: '4%',
+        endingTop: '10%'
+    };
+    class Modal extends Component {
+        constructor(el, options) {
+            super(el, options, Modal);
+            this.el['M_Modal'] = this;
+            this.options = {
+                ...Modal.defaults,
+                ...options
+            };
+            this.el.tabIndex = 0;
+            this._setupEventHandlers();
+        }
+        static get defaults() {
+            return _defaults$c;
+        }
+        static init(els, options = {}) {
+            return super.init(els, options, Modal);
+        }
+        static getInstance(el) {
+            return el['M_Modal'];
+        }
+        destroy() { }
+        _setupEventHandlers() { }
+        _removeEventHandlers() { }
+        _handleTriggerClick() { }
+        _handleOverlayClick() { }
+        _handleModalCloseClick() { }
+        _handleKeydown() { }
+        _handleFocus() { }
+        open() {
+            return this;
+        }
+        close() {
+            return this;
+        }
+        // Experimental!
+        static #createHtml(config) {
+            return `<dialog id="modal1" class="modal">
+      ${config.header ? '<div class="modal-header">' + config.header + '</div>' : ''}
+      <div class="modal-content">
+        ${config.content}
+      </div>
+      ${config.header ? '<div class="modal-footer">' + config.footer + '</div>' : ''}
+    </dialog>`;
+        }
+        static #createHtmlElement(config) {
+            const dialog = document.createElement('dialog');
+            dialog.id = config.id;
+            return dialog;
+        }
+        static create(config) {
+            return this.#createHtmlElement(config);
+        }
+        static { }
+    }
+
+    const _defaults$b = {
+        responsiveThreshold: 0 // breakpoint for swipeable
+    };
+    class Parallax extends Component {
+        _enabled;
+        _img;
+        static _parallaxes = [];
+        static _handleScrollThrottled;
+        static _handleWindowResizeThrottled;
+        constructor(el, options) {
+            super(el, options, Parallax);
+            this.el['M_Parallax'] = this;
+            this.options = {
+                ...Parallax.defaults,
+                ...options
+            };
+            this._enabled = window.innerWidth > this.options.responsiveThreshold;
+            this._img = this.el.querySelector('img');
+            this._updateParallax();
+            this._setupEventHandlers();
+            this._setupStyles();
+            Parallax._parallaxes.push(this);
+        }
+        static get defaults() {
+            return _defaults$b;
+        }
+        /**
+         * Initializes instances of Parallax.
+         * @param els HTML elements.
+         * @param options Component options.
+         */
+        static init(els, options = {}) {
+            return super.init(els, options, Parallax);
+        }
+        static getInstance(el) {
+            return el['M_Parallax'];
+        }
+        destroy() {
+            Parallax._parallaxes.splice(Parallax._parallaxes.indexOf(this), 1);
+            this._img.style.transform = '';
+            this._removeEventHandlers();
+            this.el['M_Parallax'] = undefined;
+        }
+        static _handleScroll() {
+            for (let i = 0; i < Parallax._parallaxes.length; i++) {
+                const parallaxInstance = Parallax._parallaxes[i];
+                parallaxInstance._updateParallax.call(parallaxInstance);
+            }
+        }
+        static _handleWindowResize() {
+            for (let i = 0; i < Parallax._parallaxes.length; i++) {
+                const parallaxInstance = Parallax._parallaxes[i];
+                parallaxInstance._enabled = window.innerWidth > parallaxInstance.options.responsiveThreshold;
+            }
+        }
+        _setupEventHandlers() {
+            this._img.addEventListener('load', this._handleImageLoad);
+            if (Parallax._parallaxes.length === 0) {
+                if (!Parallax._handleScrollThrottled) {
+                    Parallax._handleScrollThrottled = Utils.throttle(Parallax._handleScroll, 5);
+                }
+                if (!Parallax._handleWindowResizeThrottled) {
+                    Parallax._handleWindowResizeThrottled = Utils.throttle(Parallax._handleWindowResize, 5);
+                }
+                window.addEventListener('scroll', Parallax._handleScrollThrottled);
+                window.addEventListener('resize', Parallax._handleWindowResizeThrottled);
+            }
+        }
+        _removeEventHandlers() {
+            this._img.removeEventListener('load', this._handleImageLoad);
+            if (Parallax._parallaxes.length === 0) {
+                window.removeEventListener('scroll', Parallax._handleScrollThrottled);
+                window.removeEventListener('resize', Parallax._handleWindowResizeThrottled);
+            }
+        }
+        _setupStyles() {
+            this._img.style.opacity = '1';
+        }
+        _handleImageLoad = () => {
+            this._updateParallax();
+        };
+        _offset(el) {
+            const box = el.getBoundingClientRect();
+            const docElem = document.documentElement;
+            return {
+                top: box.top + window.scrollY - docElem.clientTop,
+                left: box.left + window.scrollX - docElem.clientLeft
+            };
+        }
+        _updateParallax() {
+            const containerHeight = this.el.getBoundingClientRect().height > 0 ? this.el.parentElement.offsetHeight : 500;
+            const imgHeight = this._img.offsetHeight;
+            const parallaxDist = imgHeight - containerHeight;
+            const bottom = this._offset(this.el).top + containerHeight;
+            const top = this._offset(this.el).top;
+            const scrollTop = Utils.getDocumentScrollTop();
+            const windowHeight = window.innerHeight;
+            const windowBottom = scrollTop + windowHeight;
+            const percentScrolled = (windowBottom - top) / (containerHeight + windowHeight);
+            const parallax = parallaxDist * percentScrolled;
+            if (!this._enabled) {
+                this._img.style.transform = '';
+            }
+            else if (bottom > scrollTop && top < scrollTop + windowHeight) {
+                this._img.style.transform = `translate3D(-50%, ${parallax}px, 0)`;
+            }
+        }
+    }
+
+    const _defaults$a = {
+        top: 0,
+        bottom: Infinity,
+        offset: 0,
+        onPositionChange: null
+    };
+    class Pushpin extends Component {
+        static _pushpins;
+        originalOffset;
+        constructor(el, options) {
+            super(el, options, Pushpin);
+            this.el['M_Pushpin'] = this;
+            this.options = {
+                ...Pushpin.defaults,
+                ...options
+            };
+            this.originalOffset = this.el.offsetTop;
+            Pushpin._pushpins.push(this);
+            this._setupEventHandlers();
+            this._updatePosition();
+        }
+        static get defaults() {
+            return _defaults$a;
+        }
+        /**
+         * Initializes instances of Pushpin.
+         * @param els HTML elements.
+         * @param options Component options.
+         */
+        static init(els, options = {}) {
+            return super.init(els, options, Pushpin);
+        }
+        static getInstance(el) {
+            return el['M_Pushpin'];
+        }
+        destroy() {
+            this.el.style.top = null;
+            this._removePinClasses();
+            // Remove pushpin Inst
+            const index = Pushpin._pushpins.indexOf(this);
+            Pushpin._pushpins.splice(index, 1);
+            if (Pushpin._pushpins.length === 0) {
+                this._removeEventHandlers();
+            }
+            this.el['M_Pushpin'] = undefined;
+        }
+        static _updateElements() {
+            for (const elIndex in Pushpin._pushpins) {
+                const pInstance = Pushpin._pushpins[elIndex];
+                pInstance._updatePosition();
+            }
+        }
+        _setupEventHandlers() {
+            document.addEventListener('scroll', Pushpin._updateElements);
+        }
+        _removeEventHandlers() {
+            document.removeEventListener('scroll', Pushpin._updateElements);
+        }
+        _updatePosition() {
+            const scrolled = Utils.getDocumentScrollTop() + this.options.offset;
+            if (this.options.top <= scrolled &&
+                this.options.bottom >= scrolled &&
+                !this.el.classList.contains('pinned')) {
+                this._removePinClasses();
+                this.el.style.top = `${this.options.offset}px`;
+                this.el.classList.add('pinned');
+                // onPositionChange callback
+                if (typeof this.options.onPositionChange === 'function') {
+                    this.options.onPositionChange.call(this, 'pinned');
+                }
+            }
+            // Add pin-top (when scrolled position is above top)
+            if (scrolled < this.options.top && !this.el.classList.contains('pin-top')) {
+                this._removePinClasses();
+                this.el.style.top = '0';
+                this.el.classList.add('pin-top');
+                // onPositionChange callback
+                if (typeof this.options.onPositionChange === 'function') {
+                    this.options.onPositionChange.call(this, 'pin-top');
+                }
+            }
+            // Add pin-bottom (when scrolled position is below bottom)
+            if (scrolled > this.options.bottom && !this.el.classList.contains('pin-bottom')) {
+                this._removePinClasses();
+                this.el.classList.add('pin-bottom');
+                this.el.style.top = `${this.options.bottom - this.originalOffset}px`;
+                // onPositionChange callback
+                if (typeof this.options.onPositionChange === 'function') {
+                    this.options.onPositionChange.call(this, 'pin-bottom');
+                }
+            }
+        }
+        _removePinClasses() {
+            // IE 11 bug (can't remove multiple classes in one line)
+            this.el.classList.remove('pin-top');
+            this.el.classList.remove('pinned');
+            this.el.classList.remove('pin-bottom');
+        }
+        static {
+            Pushpin._pushpins = [];
+        }
+    }
+
+    const _defaults$9 = {
+        throttle: 100,
+        scrollOffset: 200, // offset - 200 allows elements near bottom of page to scroll
+        activeClass: 'active',
+        getActiveElement: (id) => {
+            return 'a[href="#' + id + '"]';
+        },
+        keepTopElementActive: false,
+        animationDuration: null
+    };
+    class ScrollSpy extends Component {
+        static _elements;
+        static _count;
+        static _increment;
+        static _elementsInView;
+        static _visibleElements;
+        static _ticks;
+        static _keptTopActiveElement = null;
+        tickId;
+        id;
+        constructor(el, options) {
+            super(el, options, ScrollSpy);
+            this.el['M_ScrollSpy'] = this;
+            this.options = {
+                ...ScrollSpy.defaults,
+                ...options
+            };
+            ScrollSpy._elements.push(this);
+            ScrollSpy._count++;
+            ScrollSpy._increment++;
+            this.tickId = -1;
+            this.id = ScrollSpy._increment.toString();
+            this._setupEventHandlers();
+            this._handleWindowScroll();
+        }
+        static get defaults() {
+            return _defaults$9;
+        }
+        /**
+         * Initializes instances of ScrollSpy.
+         * @param els HTML elements.
+         * @param options Component options.
+         */
+        static init(els, options = {}) {
+            return super.init(els, options, ScrollSpy);
+        }
+        static getInstance(el) {
+            return el['M_ScrollSpy'];
+        }
+        destroy() {
+            ScrollSpy._elements.splice(ScrollSpy._elements.indexOf(this), 1);
+            ScrollSpy._elementsInView.splice(ScrollSpy._elementsInView.indexOf(this), 1);
+            ScrollSpy._visibleElements.splice(ScrollSpy._visibleElements.indexOf(this.el), 1);
+            ScrollSpy._count--;
+            this._removeEventHandlers();
+            const actElem = document.querySelector(this.options.getActiveElement(this.el.id));
+            actElem.classList.remove(this.options.activeClass);
+            this.el['M_ScrollSpy'] = undefined;
+        }
+        _setupEventHandlers() {
+            if (ScrollSpy._count === 1) {
+                window.addEventListener('scroll', this._handleWindowScroll);
+                window.addEventListener('resize', this._handleThrottledResize);
+                document.body.addEventListener('click', this._handleTriggerClick);
+            }
+        }
+        _removeEventHandlers() {
+            if (ScrollSpy._count === 0) {
+                window.removeEventListener('scroll', this._handleWindowScroll);
+                window.removeEventListener('resize', this._handleThrottledResize);
+                document.body.removeEventListener('click', this._handleTriggerClick);
+            }
+        }
+        _handleThrottledResize = Utils.throttle(function () {
+            this._handleWindowScroll();
+        }, 200).bind(this);
+        _handleTriggerClick = (e) => {
+            const trigger = e.target;
+            for (let i = ScrollSpy._elements.length - 1; i >= 0; i--) {
+                const scrollspy = ScrollSpy._elements[i];
+                const x = document.querySelector('a[href="#' + scrollspy.el.id + '"]');
+                if (trigger === x) {
+                    e.preventDefault();
+                    if (scrollspy.el['M_ScrollSpy'].options.animationDuration) {
+                        ScrollSpy._smoothScrollIntoView(scrollspy.el, scrollspy.el['M_ScrollSpy'].options.animationDuration);
+                    }
+                    else {
+                        scrollspy.el.scrollIntoView({ behavior: 'smooth' });
+                    }
+                    break;
+                }
+            }
+        };
+        _handleWindowScroll = () => {
+            // unique tick id
+            ScrollSpy._ticks++;
+            // viewport rectangle
+            const top = Utils.getDocumentScrollTop(), left = Utils.getDocumentScrollLeft(), right = left + window.innerWidth, bottom = top + window.innerHeight;
+            // determine which elements are in view
+            const intersections = ScrollSpy._findElements(top, right, bottom, left);
+            for (let i = 0; i < intersections.length; i++) {
+                const scrollspy = intersections[i];
+                const lastTick = scrollspy.tickId;
+                if (lastTick < 0) {
+                    // entered into view
+                    scrollspy._enter();
+                }
+                // update tick id
+                scrollspy.tickId = ScrollSpy._ticks;
+            }
+            for (let i = 0; i < ScrollSpy._elementsInView.length; i++) {
+                const scrollspy = ScrollSpy._elementsInView[i];
+                const lastTick = scrollspy.tickId;
+                if (lastTick >= 0 && lastTick !== ScrollSpy._ticks) {
+                    // exited from view
+                    scrollspy._exit();
+                    scrollspy.tickId = -1;
+                }
+            }
+            // remember elements in view for next tick
+            ScrollSpy._elementsInView = intersections;
+            if (ScrollSpy._elements.length) {
+                const options = ScrollSpy._elements[0].el['M_ScrollSpy'].options;
+                if (options.keepTopElementActive && ScrollSpy._visibleElements.length === 0) {
+                    this._resetKeptTopActiveElementIfNeeded();
+                    const topElements = ScrollSpy._elements
+                        .filter((value) => ScrollSpy._getDistanceToViewport(value.el) <= 0)
+                        .sort((a, b) => {
+                        const distanceA = ScrollSpy._getDistanceToViewport(a.el);
+                        const distanceB = ScrollSpy._getDistanceToViewport(b.el);
+                        if (distanceA < distanceB)
+                            return -1;
+                        if (distanceA > distanceB)
+                            return 1;
+                        return 0;
+                    });
+                    const nearestTopElement = topElements.length
+                        ? topElements[topElements.length - 1]
+                        : ScrollSpy._elements[0];
+                    const actElem = document.querySelector(options.getActiveElement(nearestTopElement.el.id));
+                    actElem?.classList.add(options.activeClass);
+                    ScrollSpy._keptTopActiveElement = actElem;
+                }
+            }
+        };
+        static _offset(el) {
+            const box = el.getBoundingClientRect();
+            const docElem = document.documentElement;
+            return {
+                top: box.top + window.pageYOffset - docElem.clientTop,
+                left: box.left + window.pageXOffset - docElem.clientLeft
+            };
+        }
+        static _findElements(top, right, bottom, left) {
+            const hits = [];
+            for (let i = 0; i < ScrollSpy._elements.length; i++) {
+                const scrollspy = ScrollSpy._elements[i];
+                const currTop = top + scrollspy.options.scrollOffset || 200;
+                if (scrollspy.el.getBoundingClientRect().height > 0) {
+                    const elTop = ScrollSpy._offset(scrollspy.el).top, elLeft = ScrollSpy._offset(scrollspy.el).left, elRight = elLeft + scrollspy.el.getBoundingClientRect().width, elBottom = elTop + scrollspy.el.getBoundingClientRect().height;
+                    const isIntersect = !(elLeft > right ||
+                        elRight < left ||
+                        elTop > bottom ||
+                        elBottom < currTop);
+                    if (isIntersect) {
+                        hits.push(scrollspy);
+                    }
+                }
+            }
+            return hits;
+        }
+        _enter() {
+            ScrollSpy._visibleElements = ScrollSpy._visibleElements.filter((value) => value.getBoundingClientRect().height !== 0);
+            if (ScrollSpy._visibleElements[0]) {
+                const actElem = document.querySelector(this.options.getActiveElement(ScrollSpy._visibleElements[0].id));
+                actElem?.classList.remove(this.options.activeClass);
+                if (ScrollSpy._visibleElements[0]['M_ScrollSpy'] &&
+                    this.id < ScrollSpy._visibleElements[0]['M_ScrollSpy'].id) {
+                    ScrollSpy._visibleElements.unshift(this.el);
+                }
+                else {
+                    ScrollSpy._visibleElements.push(this.el);
+                }
+            }
+            else {
+                ScrollSpy._visibleElements.push(this.el);
+            }
+            this._resetKeptTopActiveElementIfNeeded();
+            const selector = this.options.getActiveElement(ScrollSpy._visibleElements[0].id);
+            document.querySelector(selector)?.classList.add(this.options.activeClass);
+        }
+        _exit() {
+            ScrollSpy._visibleElements = ScrollSpy._visibleElements.filter((value) => value.getBoundingClientRect().height !== 0);
+            if (ScrollSpy._visibleElements[0]) {
+                const actElem = document.querySelector(this.options.getActiveElement(ScrollSpy._visibleElements[0].id));
+                actElem?.classList.remove(this.options.activeClass);
+                ScrollSpy._visibleElements = ScrollSpy._visibleElements.filter((x) => x.id != this.el.id);
+                if (ScrollSpy._visibleElements[0]) {
+                    // Check if empty
+                    const selector = this.options.getActiveElement(ScrollSpy._visibleElements[0].id);
+                    document.querySelector(selector)?.classList.add(this.options.activeClass);
+                    this._resetKeptTopActiveElementIfNeeded();
+                }
+            }
+        }
+        _resetKeptTopActiveElementIfNeeded() {
+            if (ScrollSpy._keptTopActiveElement) {
+                ScrollSpy._keptTopActiveElement.classList.remove(this.options.activeClass);
+                ScrollSpy._keptTopActiveElement = null;
+            }
+        }
+        static _getDistanceToViewport(element) {
+            const rect = element.getBoundingClientRect();
+            const distance = rect.top;
+            return distance;
+        }
+        static _smoothScrollIntoView(element, duration = 300) {
+            const targetPosition = element.getBoundingClientRect().top + (window.scrollY || window.pageYOffset);
+            const startPosition = window.scrollY || window.pageYOffset;
+            const distance = targetPosition - startPosition;
+            const startTime = performance.now();
+            function scrollStep(currentTime) {
+                const elapsed = currentTime - startTime;
+                const progress = Math.min(elapsed / duration, 1);
+                const scrollY = startPosition + distance * progress;
+                if (progress < 1) {
+                    window.scrollTo(0, scrollY);
+                    requestAnimationFrame(scrollStep);
+                }
+                else {
+                    window.scrollTo(0, targetPosition);
+                }
+            }
+            requestAnimationFrame(scrollStep);
+        }
+        static {
+            ScrollSpy._elements = [];
+            ScrollSpy._elementsInView = [];
+            ScrollSpy._visibleElements = []; // Array.<cash>
+            ScrollSpy._count = 0;
+            ScrollSpy._increment = 0;
+            ScrollSpy._ticks = 0;
+        }
+    }
+
+    const _defaults$8 = {
+        edge: 'left',
+        draggable: true,
+        dragTargetWidth: '10px',
+        inDuration: 250,
+        outDuration: 200,
+        onOpenStart: null,
+        onOpenEnd: null,
+        onCloseStart: null,
+        onCloseEnd: null,
+        preventScrolling: true
+    };
+    class Sidenav extends Component {
+        id;
+        /** Describes open/close state of Sidenav. */
+        isOpen;
+        /** Describes if sidenav is fixed. */
+        isFixed;
+        /** Describes if Sidenav is being dragged. */
+        isDragged;
+        lastWindowWidth;
+        lastWindowHeight;
+        static _sidenavs;
+        _overlay;
+        dragTarget;
+        _startingXpos;
+        _xPos;
+        _time;
+        _width;
+        _initialScrollTop;
+        _verticallyScrolling;
+        deltaX;
+        velocityX;
+        percentOpen;
+        constructor(el, options) {
+            super(el, options, Sidenav);
+            this.el['M_Sidenav'] = this;
+            this.options = {
+                ...Sidenav.defaults,
+                ...options
+            };
+            this.id = this.el.id;
+            this.isOpen = false;
+            this.isFixed = this.el.classList.contains('sidenav-fixed');
+            this.isDragged = false;
+            // Window size variables for window resize checks
+            this.lastWindowWidth = window.innerWidth;
+            this.lastWindowHeight = window.innerHeight;
+            this._createOverlay();
+            this._createDragTarget();
+            this._setupEventHandlers();
+            this._setupClasses();
+            this._setupFixed();
+            Sidenav._sidenavs.push(this);
+        }
+        static get defaults() {
+            return _defaults$8;
+        }
+        /**
+         * Initializes instances of Sidenav.
+         * @param els HTML elements.
+         * @param options Component options.
+         */
+        static init(els, options = {}) {
+            return super.init(els, options, Sidenav);
+        }
+        static getInstance(el) {
+            return el['M_Sidenav'];
+        }
+        destroy() {
+            this._removeEventHandlers();
+            this._enableBodyScrolling();
+            this._overlay.parentNode.removeChild(this._overlay);
+            this.dragTarget.parentNode.removeChild(this.dragTarget);
+            this.el['M_Sidenav'] = undefined;
+            this.el.style.transform = '';
+            const index = Sidenav._sidenavs.indexOf(this);
+            if (index >= 0) {
+                Sidenav._sidenavs.splice(index, 1);
+            }
+        }
+        _createOverlay() {
+            this._overlay = document.createElement('div');
+            this._overlay.classList.add('sidenav-overlay');
+            this._overlay.addEventListener('click', this.close);
+            document.body.appendChild(this._overlay);
+        }
+        _setupEventHandlers() {
+            if (Sidenav._sidenavs.length === 0) {
+                document.body.addEventListener('click', this._handleTriggerClick);
+            }
+            const passiveIfSupported = null;
+            this.dragTarget.addEventListener('touchmove', this._handleDragTargetDrag, passiveIfSupported);
+            this.dragTarget.addEventListener('touchend', this._handleDragTargetRelease);
+            this._overlay.addEventListener('touchmove', this._handleCloseDrag, passiveIfSupported);
+            this._overlay.addEventListener('touchend', this._handleCloseRelease);
+            this.el.addEventListener('touchmove', this._handleCloseDrag); // , passiveIfSupported);
+            this.el.addEventListener('touchend', this._handleCloseRelease);
+            this.el.addEventListener('click', this._handleCloseTriggerClick);
+            // Add resize for side nav fixed
+            if (this.isFixed) {
+                window.addEventListener('resize', this._handleWindowResize);
+            }
+            /* Set aria-hidden state */
+            this._setAriaHidden();
+            this._setTabIndex();
+        }
+        _removeEventHandlers() {
+            if (Sidenav._sidenavs.length === 1) {
+                document.body.removeEventListener('click', this._handleTriggerClick);
+            }
+            this.dragTarget.removeEventListener('touchmove', this._handleDragTargetDrag);
+            this.dragTarget.removeEventListener('touchend', this._handleDragTargetRelease);
+            this._overlay.removeEventListener('touchmove', this._handleCloseDrag);
+            this._overlay.removeEventListener('touchend', this._handleCloseRelease);
+            this.el.removeEventListener('touchmove', this._handleCloseDrag);
+            this.el.removeEventListener('touchend', this._handleCloseRelease);
+            this.el.removeEventListener('click', this._handleCloseTriggerClick);
+            // Remove resize for side nav fixed
+            if (this.isFixed) {
+                window.removeEventListener('resize', this._handleWindowResize);
+            }
+        }
+        _handleTriggerClick(e) {
+            const trigger = e.target.closest('.sidenav-trigger');
+            if (e.target && trigger) {
+                const sidenavId = Utils.getIdFromTrigger(trigger);
+                const sidenavInstance = document.getElementById(sidenavId)['M_Sidenav'];
+                if (sidenavInstance) {
+                    sidenavInstance.open();
+                }
+                e.preventDefault();
+            }
+        }
+        // Set variables needed at the beginning of drag and stop any current transition.
+        _startDrag(e) {
+            const clientX = e.targetTouches[0].clientX;
+            this.isDragged = true;
+            this._startingXpos = clientX;
+            this._xPos = this._startingXpos;
+            this._time = Date.now();
+            this._width = this.el.getBoundingClientRect().width;
+            this._overlay.style.display = 'block';
+            this._initialScrollTop = this.isOpen ? this.el.scrollTop : Utils.getDocumentScrollTop();
+            this._verticallyScrolling = false;
+        }
+        //Set variables needed at each drag move update tick
+        _dragMoveUpdate(e) {
+            const clientX = e.targetTouches[0].clientX;
+            const currentScrollTop = this.isOpen ? this.el.scrollTop : Utils.getDocumentScrollTop();
+            this.deltaX = Math.abs(this._xPos - clientX);
+            this._xPos = clientX;
+            this.velocityX = this.deltaX / (Date.now() - this._time);
+            this._time = Date.now();
+            if (this._initialScrollTop !== currentScrollTop) {
+                this._verticallyScrolling = true;
+            }
+        }
+        _handleDragTargetDrag = (e) => {
+            // Check if draggable
+            if (!this._isDraggable())
+                return;
+            let totalDeltaX = this._calculateDelta(e);
+            const dragDirection = totalDeltaX > 0 ? 'right' : 'left';
+            // Don't allow totalDeltaX to exceed Sidenav width or be dragged in the opposite direction
+            totalDeltaX = Math.min(this._width, Math.abs(totalDeltaX));
+            if (this.options.edge === dragDirection) {
+                totalDeltaX = 0;
+            }
+            /**
+             * transformX is the drag displacement
+             * transformPrefix is the initial transform placement
+             * Invert values if Sidenav is right edge
+             */
+            let transformX = totalDeltaX;
+            let transformPrefix = 'translateX(-100%)';
+            if (this.options.edge === 'right') {
+                transformPrefix = 'translateX(100%)';
+                transformX = -transformX;
+            }
+            // Calculate open/close percentage of sidenav, with open = 1 and close = 0
+            this.percentOpen = Math.min(1, totalDeltaX / this._width);
+            // Set transform and opacity styles
+            this.el.style.transform = `${transformPrefix} translateX(${transformX}px)`;
+            this._overlay.style.opacity = this.percentOpen.toString();
+        };
+        _handleDragTargetRelease = () => {
+            if (this.isDragged) {
+                if (this.percentOpen > 0.2) {
+                    this.open();
+                }
+                else {
+                    this._animateOut();
+                }
+                this.isDragged = false;
+                this._verticallyScrolling = false;
+            }
+        };
+        _handleCloseDrag = (e) => {
+            // Check if open and draggable
+            if (!this.isOpen || !this._isDraggable())
+                return;
+            let totalDeltaX = this._calculateDelta(e);
+            // dragDirection is the attempted user drag direction
+            const dragDirection = totalDeltaX > 0 ? 'right' : 'left';
+            totalDeltaX = Math.min(this._width, Math.abs(totalDeltaX));
+            if (this.options.edge !== dragDirection) {
+                totalDeltaX = 0;
+            }
+            let transformX = -totalDeltaX;
+            if (this.options.edge === 'right') {
+                transformX = -transformX;
+            }
+            // Calculate open/close percentage of sidenav, with open = 1 and close = 0
+            this.percentOpen = Math.min(1, 1 - totalDeltaX / this._width);
+            // Set transform and opacity styles
+            this.el.style.transform = `translateX(${transformX}px)`;
+            this._overlay.style.opacity = this.percentOpen.toString();
+        };
+        _calculateDelta = (e) => {
+            // If not being dragged, set initial drag start variables
+            if (!this.isDragged) {
+                this._startDrag(e);
+            }
+            // Run touchmove updates
+            this._dragMoveUpdate(e);
+            // Calculate raw deltaX
+            return this._xPos - this._startingXpos;
+        };
+        _handleCloseRelease = () => {
+            if (this.isOpen && this.isDragged) {
+                if (this.percentOpen > 0.8) {
+                    this._animateIn();
+                }
+                else {
+                    this.close();
+                }
+                this.isDragged = false;
+                this._verticallyScrolling = false;
+            }
+        };
+        // Handles closing of Sidenav when element with class .sidenav-close
+        _handleCloseTriggerClick = (e) => {
+            const closeTrigger = e.target.closest('.sidenav-close');
+            if (closeTrigger && !this._isCurrentlyFixed()) {
+                this.close();
+            }
+        };
+        _handleWindowResize = () => {
+            // Only handle horizontal resizes
+            if (this.lastWindowWidth !== window.innerWidth) {
+                if (window.innerWidth > 992) {
+                    this.open();
+                }
+                else {
+                    this.close();
+                }
+            }
+            this.lastWindowWidth = window.innerWidth;
+            this.lastWindowHeight = window.innerHeight;
+        };
+        _setupClasses() {
+            if (this.options.edge === 'right') {
+                this.el.classList.add('right-aligned');
+                this.dragTarget.classList.add('right-aligned');
+            }
+        }
+        _removeClasses() {
+            this.el.classList.remove('right-aligned');
+            this.dragTarget.classList.remove('right-aligned');
+        }
+        _setupFixed() {
+            if (this._isCurrentlyFixed())
+                this.open();
+        }
+        _isDraggable() {
+            return this.options.draggable && !this._isCurrentlyFixed() && !this._verticallyScrolling;
+        }
+        _isCurrentlyFixed() {
+            return this.isFixed && window.innerWidth > 992;
+        }
+        _createDragTarget() {
+            const dragTarget = document.createElement('div');
+            dragTarget.classList.add('drag-target');
+            dragTarget.style.width = this.options.dragTargetWidth;
+            document.body.appendChild(dragTarget);
+            this.dragTarget = dragTarget;
+        }
+        _preventBodyScrolling() {
+            document.body.style.overflow = 'hidden';
+        }
+        _enableBodyScrolling() {
+            document.body.style.overflow = '';
+        }
+        /**
+         * Opens Sidenav.
+         */
+        open = () => {
+            if (this.isOpen === true)
+                return;
+            this.isOpen = true;
+            // Run onOpenStart callback
+            if (typeof this.options.onOpenStart === 'function') {
+                this.options.onOpenStart.call(this, this.el);
+            }
+            // Handle fixed Sidenav
+            if (this._isCurrentlyFixed()) {
+                // Show if fixed
+                this.el.style.transform = 'translateX(0)';
+                this._enableBodyScrolling();
+                this._overlay.style.display = 'none';
+            }
+            // Handle non-fixed Sidenav
+            else {
+                if (this.options.preventScrolling)
+                    this._preventBodyScrolling();
+                if (!this.isDragged || this.percentOpen != 1)
+                    this._animateIn();
+                /* Set aria-hidden state */
+                this._setAriaHidden();
+                this._setTabIndex();
+            }
+        };
+        /**
+         * Closes Sidenav.
+         */
+        close = () => {
+            if (this.isOpen === false)
+                return;
+            this.isOpen = false;
+            // Run onCloseStart callback
+            if (typeof this.options.onCloseStart === 'function') {
+                this.options.onCloseStart.call(this, this.el);
+            }
+            // Handle fixed Sidenav
+            if (this._isCurrentlyFixed()) {
+                const transformX = this.options.edge === 'left' ? '-105%' : '105%';
+                this.el.style.transform = `translateX(${transformX})`;
+            }
+            // Handle non-fixed Sidenav
+            else {
+                this._enableBodyScrolling();
+                if (!this.isDragged || this.percentOpen != 0) {
+                    this._animateOut();
+                }
+                else {
+                    this._overlay.style.display = 'none';
+                }
+                /* Set aria-hidden state */
+                this._setAriaHidden();
+                this._setTabIndex();
+            }
+        };
+        _animateIn() {
+            this._animateSidenavIn();
+            this._animateOverlayIn();
+        }
+        _animateOut() {
+            this._animateSidenavOut();
+            this._animateOverlayOut();
+        }
+        _animateSidenavIn() {
+            let slideOutPercent = this.options.edge === 'left' ? -1 : 1;
+            if (this.isDragged) {
+                slideOutPercent =
+                    this.options.edge === 'left'
+                        ? slideOutPercent + this.percentOpen
+                        : slideOutPercent - this.percentOpen;
+            }
+            const duration = this.options.inDuration;
+            // from
+            this.el.style.transition = 'none';
+            this.el.style.transform = 'translateX(' + slideOutPercent * 100 + '%)';
+            setTimeout(() => {
+                this.el.style.transition = `transform ${duration}ms ease`; // easeOutQuad
+                // to
+                this.el.style.transform = 'translateX(0)';
+            }, 1);
+            setTimeout(() => {
+                if (typeof this.options.onOpenEnd === 'function')
+                    this.options.onOpenEnd.call(this, this.el);
+            }, duration);
+        }
+        _animateSidenavOut() {
+            const endPercent = this.options.edge === 'left' ? -1 : 1;
+            // let slideOutPercent = 0;
+            // if (this.isDragged) {
+            //   // @todo unused variable
+            //   slideOutPercent =
+            //     this.options.edge === 'left'
+            //       ? endPercent + this.percentOpen
+            //       : endPercent - this.percentOpen;
+            // }
+            const duration = this.options.outDuration;
+            this.el.style.transition = `transform ${duration}ms ease`; // easeOutQuad
+            // to
+            this.el.style.transform = 'translateX(' + endPercent * 100 + '%)';
+            setTimeout(() => {
+                if (typeof this.options.onCloseEnd === 'function')
+                    this.options.onCloseEnd.call(this, this.el);
+            }, duration);
+        }
+        _animateOverlayIn() {
+            let start = 0;
+            if (this.isDragged)
+                start = this.percentOpen;
+            else
+                this._overlay.style.display = 'block';
+            // Animation
+            const duration = this.options.inDuration;
+            // from
+            this._overlay.style.transition = 'none';
+            this._overlay.style.opacity = start.toString();
+            // easeOutQuad
+            setTimeout(() => {
+                this._overlay.style.transition = `opacity ${duration}ms ease`;
+                // to
+                this._overlay.style.opacity = '1';
+            }, 1);
+        }
+        _animateOverlayOut() {
+            const duration = this.options.outDuration;
+            // easeOutQuad
+            this._overlay.style.transition = `opacity ${duration}ms ease`;
+            // to
+            this._overlay.style.opacity = '0';
+            setTimeout(() => {
+                this._overlay.style.display = 'none';
+            }, duration);
+        }
+        _setAriaHidden = () => {
+            this.el.ariaHidden = this.isOpen ? 'false' : 'true';
+            const navWrapper = document.querySelector('.nav-wrapper ul');
+            if (navWrapper)
+                navWrapper.ariaHidden = this.isOpen.toString();
+        };
+        _setTabIndex = () => {
+            const navLinks = document.querySelectorAll('.nav-wrapper ul li a');
+            const sideNavLinks = document.querySelectorAll('.sidenav li a');
+            if (navLinks)
+                navLinks.forEach((navLink) => {
+                    navLink.tabIndex = this.isOpen ? -1 : 0;
+                });
+            if (sideNavLinks)
+                sideNavLinks.forEach((sideNavLink) => {
+                    sideNavLink.tabIndex = this.isOpen ? 0 : -1;
+                });
+        };
+        static {
+            Sidenav._sidenavs = [];
+        }
+    }
+
+    const _defaults$7 = {
+        duration: 300,
+        onShow: null,
+        swipeable: false,
+        responsiveThreshold: Infinity // breakpoint for swipeable
+    };
+    class Tabs extends Component {
+        _tabLinks;
+        _index;
+        _indicator;
+        _tabWidth;
+        _tabsWidth;
+        _tabsCarousel;
+        _activeTabLink;
+        _content;
+        constructor(el, options) {
+            super(el, options, Tabs);
+            this.el['M_Tabs'] = this;
+            this.options = {
+                ...Tabs.defaults,
+                ...options
+            };
+            this._tabLinks = this.el.querySelectorAll('li.tab > a');
+            this._index = 0;
+            this._setupActiveTabLink();
+            if (this.options.swipeable) {
+                this._setupSwipeableTabs();
+            }
+            else {
+                this._setupNormalTabs();
+            }
+            // Setup tabs indicator after content to ensure accurate widths
+            this._setTabsAndTabWidth();
+            this._createIndicator();
+            this._setupEventHandlers();
+        }
+        static get defaults() {
+            return _defaults$7;
+        }
+        /**
+         * Initializes instances of Tabs.
+         * @param els HTML elements.
+         * @param options Component options.
+         */
+        static init(els, options = {}) {
+            return super.init(els, options, Tabs);
+        }
+        static getInstance(el) {
+            return el['M_Tabs'];
+        }
+        destroy() {
+            this._removeEventHandlers();
+            this._indicator.parentNode.removeChild(this._indicator);
+            if (this.options.swipeable) {
+                this._teardownSwipeableTabs();
+            }
+            else {
+                this._teardownNormalTabs();
+            }
+            this.el['M_Tabs'] = undefined;
+        }
+        /**
+         * The index of tab that is currently shown.
+         */
+        get index() {
+            return this._index;
+        }
+        _setupEventHandlers() {
+            window.addEventListener('resize', this._handleWindowResize);
+            this.el.addEventListener('click', this._handleTabClick);
+        }
+        _removeEventHandlers() {
+            window.removeEventListener('resize', this._handleWindowResize);
+            this.el.removeEventListener('click', this._handleTabClick);
+        }
+        _handleWindowResize = () => {
+            this._setTabsAndTabWidth();
+            if (this._tabWidth !== 0 && this._tabsWidth !== 0) {
+                this._indicator.style.left = this._calcLeftPos(this._activeTabLink) + 'px';
+                this._indicator.style.right = this._calcRightPos(this._activeTabLink) + 'px';
+            }
+        };
+        _handleTabClick = (e) => {
+            let tabLink = e.target;
+            if (!tabLink)
+                return;
+            let tab = tabLink.parentElement;
+            while (tab && !tab.classList.contains('tab')) {
+                tabLink = tabLink.parentElement;
+                tab = tab.parentElement;
+            }
+            // Handle click on tab link only
+            if (!tabLink || !tab.classList.contains('tab'))
+                return;
+            // is disabled?
+            if (tab.classList.contains('disabled')) {
+                e.preventDefault();
+                return;
+            }
+            // Act as regular link if target attribute is specified.
+            if (tabLink.hasAttribute('target'))
+                return;
+            // Make the old tab inactive.
+            this._activeTabLink.classList.remove('active');
+            const _oldContent = this._content;
+            // Update the variables with the new link and content
+            this._activeTabLink = tabLink;
+            if (tabLink.hash)
+                this._content = document.querySelector(tabLink.hash);
+            this._tabLinks = this.el.querySelectorAll('li.tab > a');
+            // Make the tab active
+            this._activeTabLink.classList.add('active');
+            const prevIndex = this._index;
+            this._index = Math.max(Array.from(this._tabLinks).indexOf(tabLink), 0);
+            // Swap content
+            if (this.options.swipeable) {
+                if (this._tabsCarousel) {
+                    this._tabsCarousel.set(this._index, () => {
+                        if (typeof this.options.onShow === 'function')
+                            this.options.onShow.call(this, this._content);
+                    });
+                }
+            }
+            else {
+                if (this._content) {
+                    this._content.style.display = 'block';
+                    this._content.classList.add('active');
+                    if (typeof this.options.onShow === 'function')
+                        this.options.onShow.call(this, this._content);
+                    if (_oldContent && _oldContent !== this._content) {
+                        _oldContent.style.display = 'none';
+                        _oldContent.classList.remove('active');
+                    }
+                }
+            }
+            // Update widths after content is swapped (scrollbar bugfix)
+            this._setTabsAndTabWidth();
+            this._animateIndicator(prevIndex);
+            e.preventDefault();
+        };
+        _createIndicator() {
+            const indicator = document.createElement('li');
+            indicator.classList.add('indicator');
+            this.el.appendChild(indicator);
+            this._indicator = indicator;
+            this._indicator.style.left = this._calcLeftPos(this._activeTabLink) + 'px';
+            this._indicator.style.right = this._calcRightPos(this._activeTabLink) + 'px';
+        }
+        _setupActiveTabLink() {
+            // If the location.hash matches one of the links, use that as the active tab.
+            this._activeTabLink = Array.from(this._tabLinks).find((a) => a.getAttribute('href') === location.hash);
+            // If no match is found, use the first link or any with class 'active' as the initial active tab.
+            if (!this._activeTabLink) {
+                let activeTabLink = this.el.querySelector('li.tab a.active');
+                if (!activeTabLink) {
+                    activeTabLink = this.el.querySelector('li.tab a');
+                }
+                this._activeTabLink = activeTabLink;
+            }
+            Array.from(this._tabLinks).forEach((a) => a.classList.remove('active'));
+            this._activeTabLink.classList.add('active');
+            this._index = Math.max(Array.from(this._tabLinks).indexOf(this._activeTabLink), 0);
+            if (this._activeTabLink && this._activeTabLink.hash) {
+                this._content = document.querySelector(this._activeTabLink.hash);
+                if (this._content)
+                    this._content.classList.add('active');
+            }
+        }
+        _setupSwipeableTabs() {
+            // Change swipeable according to responsive threshold
+            if (window.innerWidth > this.options.responsiveThreshold)
+                this.options.swipeable = false;
+            const tabsContent = [];
+            this._tabLinks.forEach((a) => {
+                if (a.hash) {
+                    const currContent = document.querySelector(a.hash);
+                    currContent.classList.add('carousel-item');
+                    tabsContent.push(currContent);
+                }
+            });
+            // Create Carousel-Wrapper around Tab-Contents
+            const tabsWrapper = document.createElement('div');
+            tabsWrapper.classList.add('tabs-content', 'carousel', 'carousel-slider');
+            // Wrap around
+            tabsContent[0].parentElement.insertBefore(tabsWrapper, tabsContent[0]);
+            tabsContent.forEach((tabContent) => {
+                tabsWrapper.appendChild(tabContent);
+                tabContent.style.display = '';
+            });
+            // Keep active tab index to set initial carousel slide
+            const tab = this._activeTabLink.parentElement;
+            const activeTabIndex = Array.from(tab.parentNode.children).indexOf(tab);
+            this._tabsCarousel = Carousel.init(tabsWrapper, {
+                fullWidth: true,
+                noWrap: true,
+                onCycleTo: (item) => {
+                    const prevIndex = this._index;
+                    this._index = Array.from(item.parentNode.children).indexOf(item);
+                    this._activeTabLink.classList.remove('active');
+                    this._activeTabLink = Array.from(this._tabLinks)[this._index];
+                    this._activeTabLink.classList.add('active');
+                    this._animateIndicator(prevIndex);
+                    if (typeof this.options.onShow === 'function')
+                        this.options.onShow.call(this, this._content);
+                }
+            });
+            // Set initial carousel slide to active tab
+            this._tabsCarousel.set(activeTabIndex);
+        }
+        _teardownSwipeableTabs() {
+            const tabsWrapper = this._tabsCarousel.el;
+            this._tabsCarousel.destroy();
+            // Unwrap
+            tabsWrapper.append(tabsWrapper.parentElement);
+            tabsWrapper.remove();
+        }
+        _setupNormalTabs() {
+            // Hide Tabs Content
+            Array.from(this._tabLinks).forEach((a) => {
+                if (a === this._activeTabLink)
+                    return;
+                if (a.hash) {
+                    const currContent = document.querySelector(a.hash);
+                    if (currContent)
+                        currContent.style.display = 'none';
+                }
+            });
+        }
+        _teardownNormalTabs() {
+            // show Tabs Content
+            this._tabLinks.forEach((a) => {
+                if (a.hash) {
+                    const currContent = document.querySelector(a.hash);
+                    if (currContent)
+                        currContent.style.display = '';
+                }
+            });
+        }
+        _setTabsAndTabWidth() {
+            this._tabsWidth = this.el.getBoundingClientRect().width;
+            this._tabWidth = Math.max(this._tabsWidth, this.el.scrollWidth) / this._tabLinks.length;
+        }
+        _calcRightPos(el) {
+            return Math.ceil(this._tabsWidth - el.offsetLeft - el.getBoundingClientRect().width);
+        }
+        _calcLeftPos(el) {
+            return Math.floor(el.offsetLeft);
+        }
+        /**
+         * Recalculate tab indicator position. This is useful when
+         * the indicator position is not correct.
+         */
+        updateTabIndicator() {
+            this._setTabsAndTabWidth();
+            this._animateIndicator(this._index);
+        }
+        _animateIndicator(prevIndex) {
+            let leftDelay = 0, rightDelay = 0;
+            const isMovingLeftOrStaying = this._index - prevIndex >= 0;
+            if (isMovingLeftOrStaying)
+                leftDelay = 90;
+            else
+                rightDelay = 90;
+            // in v1: easeOutQuad
+            this._indicator.style.transition = `
+      left ${this.options.duration}ms ease-out ${leftDelay}ms,
+      right ${this.options.duration}ms ease-out ${rightDelay}ms`;
+            this._indicator.style.left = this._calcLeftPos(this._activeTabLink) + 'px';
+            this._indicator.style.right = this._calcRightPos(this._activeTabLink) + 'px';
+        }
+        /**
+         * Show tab content that corresponds to the tab with the id.
+         * @param tabId The id of the tab that you want to switch to.
+         */
+        select(tabId) {
+            const tab = Array.from(this._tabLinks).find((a) => a.getAttribute('href') === '#' + tabId);
+            if (tab)
+                tab.click();
+        }
+    }
+
+    const _defaults$6 = {
+        onOpen: null,
+        onClose: null
+    };
+    class TapTarget extends Component {
+        /**
+         * If the tap target is open.
+         */
+        isOpen;
+        static _taptargets;
+        wrapper;
+        // private _origin: HTMLElement;
+        originEl;
+        waveEl;
+        contentEl;
+        constructor(el, options) {
+            super(el, options, TapTarget);
+            this.el['M_TapTarget'] = this;
+            this.options = {
+                ...TapTarget.defaults,
+                ...options
+            };
+            this.isOpen = false;
+            // setup
+            this.originEl = document.querySelector(`#${el.dataset.target}`);
+            this.originEl.tabIndex = 0;
+            this._setup();
+            this._calculatePositioning();
+            this._setupEventHandlers();
+            TapTarget._taptargets.push(this);
+        }
+        static get defaults() {
+            return _defaults$6;
+        }
+        /**
+         * Initializes instances of TapTarget.
+         * @param els HTML elements.
+         * @param options Component options.
+         */
+        static init(els, options = {}) {
+            return super.init(els, options, TapTarget);
+        }
+        static getInstance(el) {
+            return el['M_TapTarget'];
+        }
+        destroy() {
+            this._removeEventHandlers();
+            this.el['M_TapTarget'] = undefined;
+            const index = TapTarget._taptargets.indexOf(this);
+            if (index >= 0) {
+                TapTarget._taptargets.splice(index, 1);
+            }
+        }
+        _setupEventHandlers() {
+            this.originEl.addEventListener('click', this._handleTargetToggle);
+            this.originEl.addEventListener('keypress', this._handleKeyboardInteraction, true);
+            // this.originEl.addEventListener('click', this._handleOriginClick);
+            // Resize
+            window.addEventListener('resize', this._handleThrottledResize);
+        }
+        _removeEventHandlers() {
+            this.originEl.removeEventListener('click', this._handleTargetToggle);
+            this.originEl.removeEventListener('keypress', this._handleKeyboardInteraction, true);
+            // this.originEl.removeEventListener('click', this._handleOriginClick);
+            window.removeEventListener('resize', this._handleThrottledResize);
+        }
+        _handleThrottledResize = Utils.throttle(function () {
+            this._handleResize();
+        }, 200).bind(this);
+        _handleKeyboardInteraction = (e) => {
+            if (Utils.keys.ENTER.includes(e.key)) {
+                this._handleTargetToggle();
+            }
+        };
+        _handleTargetToggle = () => {
+            if (!this.isOpen)
+                this.open();
+            else
+                this.close();
+        };
+        /*_handleOriginClick = () => {
+          this.close();
+        }*/
+        _handleResize = () => {
+            this._calculatePositioning();
+        };
+        _handleDocumentClick = (e) => {
+            if (e.target.closest(`#${this.el.dataset.target}`) !== this.originEl &&
+                !e.target.closest('.tap-target-wrapper')) {
+                this.close();
+                // e.preventDefault();
+                // e.stopPropagation();
+            }
+        };
+        _setup() {
+            // Creating tap target
+            this.wrapper = this.el.parentElement;
+            this.waveEl = this.wrapper.querySelector('.tap-target-wave');
+            this.el.parentElement.ariaExpanded = 'false';
+            this.originEl.style.zIndex = '1002';
+            // this.originEl = this.wrapper.querySelector('.tap-target-origin');
+            this.contentEl = this.el.querySelector('.tap-target-content');
+            // Creating wrapper
+            if (!this.wrapper.classList.contains('.tap-target-wrapper')) {
+                this.wrapper = document.createElement('div');
+                this.wrapper.classList.add('tap-target-wrapper');
+                this.el.before(this.wrapper);
+                this.wrapper.append(this.el);
+            }
+            // Creating content
+            if (!this.contentEl) {
+                this.contentEl = document.createElement('div');
+                this.contentEl.classList.add('tap-target-content');
+                this.el.append(this.contentEl);
+            }
+            // Creating foreground wave
+            if (!this.waveEl) {
+                this.waveEl = document.createElement('div');
+                this.waveEl.classList.add('tap-target-wave');
+                // Creating origin
+                /*if (!this.originEl) {
+                  this.originEl = <HTMLElement>this._origin.cloneNode(true); // .clone(true, true);
+                  this.originEl.classList.add('tap-target-origin');
+                  this.originEl.removeAttribute('id');
+                  this.originEl.removeAttribute('style');
+                  this.waveEl.append(this.originEl);
+                }*/
+                this.wrapper.append(this.waveEl);
+            }
+        }
+        _offset(el) {
+            const box = el.getBoundingClientRect();
+            const docElem = document.documentElement;
+            return {
+                top: box.top + window.pageYOffset - docElem.clientTop,
+                left: box.left + window.pageXOffset - docElem.clientLeft
+            };
+        }
+        _calculatePositioning() {
+            // Element or parent is fixed position?
+            let isFixed = getComputedStyle(this.originEl).position === 'fixed';
+            if (!isFixed) {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                let currentElem = this.originEl;
+                const parents = [];
+                while ((currentElem = currentElem.parentNode) && currentElem !== document)
+                    parents.push(currentElem);
+                for (let i = 0; i < parents.length; i++) {
+                    isFixed = getComputedStyle(parents[i]).position === 'fixed';
+                    if (isFixed)
+                        break;
+                }
+            }
+            // Calculating origin
+            const originWidth = this.originEl.offsetWidth;
+            const originHeight = this.originEl.offsetHeight;
+            const originTop = isFixed
+                ? this._offset(this.originEl).top - Utils.getDocumentScrollTop()
+                : this._offset(this.originEl).top;
+            const originLeft = isFixed
+                ? this._offset(this.originEl).left - Utils.getDocumentScrollLeft()
+                : this._offset(this.originEl).left;
+            // Calculating screen
+            const windowWidth = window.innerWidth;
+            const windowHeight = window.innerHeight;
+            const scrollBarWidth = windowWidth - document.documentElement.clientWidth;
+            const centerX = windowWidth / 2;
+            const centerY = windowHeight / 2;
+            const isLeft = originLeft <= centerX;
+            const isRight = originLeft > centerX;
+            const isTop = originTop <= centerY;
+            const isBottom = originTop > centerY;
+            const isCenterX = originLeft >= windowWidth * 0.25 && originLeft <= windowWidth * 0.75;
+            // Calculating tap target
+            const tapTargetWidth = this.el.offsetWidth;
+            const tapTargetHeight = this.el.offsetHeight;
+            const tapTargetTop = originTop + originHeight / 2 - tapTargetHeight / 2;
+            const tapTargetLeft = originLeft + originWidth / 2 - tapTargetWidth / 2;
+            const tapTargetPosition = isFixed ? 'fixed' : 'absolute';
+            // Calculating content
+            const tapTargetTextWidth = isCenterX ? tapTargetWidth : tapTargetWidth / 2 + originWidth;
+            const tapTargetTextHeight = tapTargetHeight / 2;
+            const tapTargetTextTop = isTop ? tapTargetHeight / 2 : 0;
+            const tapTargetTextBottom = 0;
+            const tapTargetTextLeft = isLeft && !isCenterX ? tapTargetWidth / 2 - originWidth : 0;
+            const tapTargetTextRight = 0;
+            const tapTargetTextPadding = originWidth;
+            const tapTargetTextAlign = isBottom ? 'bottom' : 'top';
+            // Calculating wave
+            const tapTargetWaveWidth = originWidth > originHeight ? originWidth * 2 : originWidth * 2;
+            const tapTargetWaveHeight = tapTargetWaveWidth;
+            const tapTargetWaveTop = tapTargetHeight / 2 - tapTargetWaveHeight / 2;
+            const tapTargetWaveLeft = tapTargetWidth / 2 - tapTargetWaveWidth / 2;
+            // Setting tap target
+            this.wrapper.style.top = isTop ? tapTargetTop + 'px' : '';
+            this.wrapper.style.right = isRight
+                ? windowWidth - tapTargetLeft - tapTargetWidth - scrollBarWidth + 'px'
+                : '';
+            this.wrapper.style.bottom = isBottom
+                ? windowHeight - tapTargetTop - tapTargetHeight + 'px'
+                : '';
+            this.wrapper.style.left = isLeft ? tapTargetLeft + 'px' : '';
+            this.wrapper.style.position = tapTargetPosition;
+            // Setting content
+            this.contentEl.style.width = tapTargetTextWidth + 'px';
+            this.contentEl.style.height = tapTargetTextHeight + 'px';
+            this.contentEl.style.top = tapTargetTextTop + 'px';
+            this.contentEl.style.right = tapTargetTextRight + 'px';
+            this.contentEl.style.bottom = tapTargetTextBottom + 'px';
+            this.contentEl.style.left = tapTargetTextLeft + 'px';
+            this.contentEl.style.padding = tapTargetTextPadding + 'px';
+            this.contentEl.style.verticalAlign = tapTargetTextAlign;
+            // Setting wave
+            this.waveEl.style.top = tapTargetWaveTop + 'px';
+            this.waveEl.style.left = tapTargetWaveLeft + 'px';
+            this.waveEl.style.width = tapTargetWaveWidth + 'px';
+            this.waveEl.style.height = tapTargetWaveHeight + 'px';
+        }
+        /**
+         * Open Tap Target.
+         */
+        open = () => {
+            if (this.isOpen)
+                return;
+            // onOpen callback
+            if (typeof this.options.onOpen === 'function') {
+                this.options.onOpen.call(this, this.originEl);
+            }
+            this.isOpen = true;
+            this.wrapper.classList.add('open');
+            this.wrapper.ariaExpanded = 'true';
+            document.body.addEventListener('click', this._handleDocumentClick, true);
+            document.body.addEventListener('keypress', this._handleDocumentClick, true);
+            document.body.addEventListener('touchend', this._handleDocumentClick);
+        };
+        /**
+         * Close Tap Target.
+         */
+        close = () => {
+            if (!this.isOpen)
+                return;
+            // onClose callback
+            if (typeof this.options.onClose === 'function') {
+                this.options.onClose.call(this, this.originEl);
+            }
+            this.isOpen = false;
+            this.wrapper.classList.remove('open');
+            this.wrapper.ariaExpanded = 'false';
+            document.body.removeEventListener('click', this._handleDocumentClick, true);
+            document.body.removeEventListener('keypress', this._handleDocumentClick, true);
+            document.body.removeEventListener('touchend', this._handleDocumentClick);
+        };
+        static {
+            TapTarget._taptargets = [];
+        }
+    }
+
+    const _defaults$5 = {
+        dialRadius: 135,
+        outerRadius: 105,
+        innerRadius: 70,
+        tickRadius: 20,
+        duration: 350,
+        container: null,
+        defaultTime: 'now', // default time, 'now' or '13:14' e.g.
+        fromNow: 0, // Millisecond offset from the defaultTime
+        showClearBtn: false,
+        autoSubmit: true,
+        // internationalization
+        i18n: {
+            cancel: 'Cancel',
+            clear: 'Clear',
+            done: 'Ok'
+        },
+        twelveHour: true, // change to 12 hour AM/PM clock from 24 hour
+        vibrate: true, // vibrate the device when dragging clock hand
+        // Callbacks
+        onSelect: null,
+        onInputInteraction: null,
+        onDone: null,
+        onCancel: null,
+    };
+    class Timepicker extends Component {
+        id;
+        containerEl;
+        plate;
+        digitalClock;
+        inputHours;
+        inputMinutes;
+        x0;
+        y0;
+        moved;
+        dx;
+        dy;
+        /**
+         * Current view on the timepicker.
+         * @default 'hours'
+         */
+        currentView;
+        hand;
+        minutesView;
+        hours;
+        minutes;
+        /** The selected time. */
+        time;
+        /**
+         * If the time is AM or PM on twelve-hour clock.
+         * @default 'PM'
+         */
+        amOrPm;
+        static _template;
+        /** Vibrate device when dragging clock hand. */
+        vibrate;
+        _canvas;
+        hoursView;
+        spanAmPm;
+        footer;
+        _amBtn;
+        _pmBtn;
+        bg;
+        bearing;
+        g;
+        toggleViewTimer;
+        vibrateTimer;
+        constructor(el, options) {
+            super(el, options, Timepicker);
+            this.el['M_Timepicker'] = this;
+            this.options = {
+                ...Timepicker.defaults,
+                ...options
+            };
+            this.id = Utils.guid();
+            this._insertHTMLIntoDOM();
+            this._setupVariables();
+            this._setupEventHandlers();
+            this._clockSetup();
+            this._pickerSetup();
+        }
+        static get defaults() {
+            return _defaults$5;
+        }
+        /**
+         * Initializes instances of Timepicker.
+         * @param els HTML elements.
+         * @param options Component options.
+         */
+        static init(els, options = {}) {
+            return super.init(els, options, Timepicker);
+        }
+        static _addLeadingZero(num) {
+            return (num < 10 ? '0' : '') + num;
+        }
+        static _createSVGEl(name) {
+            const svgNS = 'http://www.w3.org/2000/svg';
+            return document.createElementNS(svgNS, name);
+        }
+        static _Pos(e) {
+            if (e.type.startsWith('touch') && e.targetTouches.length >= 1) {
+                return {
+                    x: e.targetTouches[0].clientX,
+                    y: e.targetTouches[0].clientY
+                };
+            }
+            // mouse event
+            return { x: e.clientX, y: e.clientY };
+        }
+        static getInstance(el) {
+            return el['M_Timepicker'];
+        }
+        destroy() {
+            this._removeEventHandlers();
+            this.containerEl.remove();
+            this.el['M_Timepicker'] = undefined;
+        }
+        _setupEventHandlers() {
+            this.el.addEventListener('click', this._handleInputClick);
+            this.el.addEventListener('keydown', this._handleInputKeydown);
+            this.plate.addEventListener('mousedown', this._handleClockClickStart);
+            this.plate.addEventListener('touchstart', this._handleClockClickStart);
+            this.digitalClock.addEventListener('keyup', this._inputFromTextField);
+            this.inputHours.addEventListener('focus', () => this.showView('hours'));
+            this.inputHours.addEventListener('focusout', () => this.formatHours());
+            this.inputMinutes.addEventListener('focus', () => this.showView('minutes'));
+            this.inputMinutes.addEventListener('focusout', () => this.formatMinutes());
+        }
+        _removeEventHandlers() {
+            this.el.removeEventListener('click', this._handleInputClick);
+            this.el.removeEventListener('keydown', this._handleInputKeydown);
+        }
+        _handleInputClick = () => {
+            this.inputHours.focus();
+            if (typeof this.options.onInputInteraction === 'function')
+                this.options.onInputInteraction.call(this);
+        };
+        _handleInputKeydown = (e) => {
+            if (Utils.keys.ENTER.includes(e.key)) {
+                e.preventDefault();
+                this.inputHours.focus();
+                if (typeof this.options.onInputInteraction === 'function')
+                    this.options.onInputInteraction.call(this);
+            }
+        };
+        _handleTimeInputEnterKey = (e) => {
+            if (Utils.keys.ENTER.includes(e.key)) {
+                e.preventDefault();
+                this._inputFromTextField();
+            }
+        };
+        _handleClockClickStart = (e) => {
+            e.preventDefault();
+            const clockPlateBR = this.plate.getBoundingClientRect();
+            const offset = { x: clockPlateBR.left, y: clockPlateBR.top };
+            this.x0 = offset.x + this.options.dialRadius;
+            this.y0 = offset.y + this.options.dialRadius;
+            this.moved = false;
+            const clickPos = Timepicker._Pos(e);
+            this.dx = clickPos.x - this.x0;
+            this.dy = clickPos.y - this.y0;
+            // Set clock hands
+            this.setHand(this.dx, this.dy, false);
+            // Mousemove on document
+            document.addEventListener('mousemove', this._handleDocumentClickMove);
+            document.addEventListener('touchmove', this._handleDocumentClickMove);
+            // Mouseup on document
+            document.addEventListener('mouseup', this._handleDocumentClickEnd);
+            document.addEventListener('touchend', this._handleDocumentClickEnd);
+        };
+        _handleDocumentClickMove = (e) => {
+            e.preventDefault();
+            const clickPos = Timepicker._Pos(e);
+            const x = clickPos.x - this.x0;
+            const y = clickPos.y - this.y0;
+            this.moved = true;
+            this.setHand(x, y, false);
+        };
+        _handleDocumentClickEnd = (e) => {
+            e.preventDefault();
+            document.removeEventListener('mouseup', this._handleDocumentClickEnd);
+            document.removeEventListener('touchend', this._handleDocumentClickEnd);
+            const clickPos = Timepicker._Pos(e);
+            const x = clickPos.x - this.x0;
+            const y = clickPos.y - this.y0;
+            if (this.moved && x === this.dx && y === this.dy) {
+                this.setHand(x, y);
+            }
+            if (this.currentView === 'hours') {
+                this.inputMinutes.focus();
+                this.showView('minutes', this.options.duration / 2);
+            }
+            else {
+                // this.minutesView.classList.add('timepicker-dial-out');
+                setTimeout(() => {
+                    if (this.options.autoSubmit)
+                        this.done();
+                }, this.options.duration / 2);
+            }
+            if (typeof this.options.onSelect === 'function') {
+                this.options.onSelect.call(this, this.hours, this.minutes);
+            }
+            // Unbind mousemove event
+            document.removeEventListener('mousemove', this._handleDocumentClickMove);
+            document.removeEventListener('touchmove', this._handleDocumentClickMove);
+        };
+        _insertHTMLIntoDOM() {
+            const template = document.createElement('template');
+            template.innerHTML = Timepicker._template.trim();
+            this.containerEl = template.content.firstChild;
+            this.containerEl.id = 'container-' + this.id;
+            // Append popover to input by default
+            const optEl = this.options.container;
+            const containerEl = optEl instanceof HTMLElement ? optEl : document.querySelector(optEl);
+            if (this.options.container && !!containerEl) {
+                containerEl.append(this.containerEl);
+            }
+            else {
+                this.el.parentElement.appendChild(this.containerEl);
+            }
+        }
+        _setupVariables() {
+            this.currentView = 'hours';
+            this.vibrate = navigator.vibrate
+                ? 'vibrate'
+                : navigator['webkitVibrate']
+                    ? 'webkitVibrate'
+                    : null;
+            this._canvas = this.containerEl.querySelector('.timepicker-canvas');
+            this.plate = this.containerEl.querySelector('.timepicker-plate');
+            this.digitalClock = this.containerEl.querySelector('.timepicker-display-column');
+            this.hoursView = this.containerEl.querySelector('.timepicker-hours');
+            this.minutesView = this.containerEl.querySelector('.timepicker-minutes');
+            this.inputHours = this.containerEl.querySelector('.timepicker-input-hours');
+            this.inputMinutes = this.containerEl.querySelector('.timepicker-input-minutes');
+            this.spanAmPm = this.containerEl.querySelector('.timepicker-span-am-pm');
+            this.footer = this.containerEl.querySelector('.timepicker-footer');
+            this.amOrPm = 'PM';
+        }
+        _createButton(text, visibility) {
+            const button = document.createElement('button');
+            button.classList.add('btn', 'btn-flat', 'waves-effect', 'text');
+            button.style.visibility = visibility;
+            button.type = 'button';
+            button.tabIndex = -1;
+            button.innerText = text;
+            return button;
+        }
+        _pickerSetup() {
+            const clearButton = this._createButton(this.options.i18n.clear, this.options.showClearBtn ? '' : 'hidden');
+            clearButton.classList.add('timepicker-clear');
+            clearButton.addEventListener('click', this.clear);
+            this.footer.appendChild(clearButton);
+            if (!this.options.autoSubmit) {
+                const confirmationBtnsContainer = document.createElement('div');
+                confirmationBtnsContainer.classList.add('confirmation-btns');
+                this.footer.append(confirmationBtnsContainer);
+                const cancelButton = this._createButton(this.options.i18n.cancel, '');
+                cancelButton.classList.add('timepicker-close');
+                cancelButton.addEventListener('click', this.close);
+                confirmationBtnsContainer.appendChild(cancelButton);
+                const doneButton = this._createButton(this.options.i18n.done, '');
+                doneButton.classList.add('timepicker-close');
+                doneButton.addEventListener('click', this.done);
+                confirmationBtnsContainer.appendChild(doneButton);
+            }
+            this._updateTimeFromInput();
+            this.showView('hours');
+        }
+        _clockSetup() {
+            if (this.options.twelveHour) {
+                // AM Button
+                this._amBtn = document.createElement('div');
+                this._amBtn.classList.add('am-btn', 'btn');
+                this._amBtn.innerText = 'AM';
+                this._amBtn.tabIndex = 0;
+                this._amBtn.addEventListener('click', this._handleAmPmClick);
+                this._amBtn.addEventListener('keypress', this._handleAmPmKeypress);
+                this.spanAmPm.appendChild(this._amBtn);
+                // PM Button
+                this._pmBtn = document.createElement('div');
+                this._pmBtn.classList.add('pm-btn', 'btn');
+                this._pmBtn.innerText = 'PM';
+                this._pmBtn.tabIndex = 0;
+                this._pmBtn.addEventListener('click', this._handleAmPmClick);
+                this._pmBtn.addEventListener('keypress', this._handleAmPmKeypress);
+                this.spanAmPm.appendChild(this._pmBtn);
+            }
+            this._buildHoursView();
+            this._buildMinutesView();
+            this._buildSVGClock();
+        }
+        _buildSVGClock() {
+            // Draw clock hands and others
+            const dialRadius = this.options.dialRadius;
+            const tickRadius = this.options.tickRadius;
+            const diameter = dialRadius * 2;
+            const svg = Timepicker._createSVGEl('svg');
+            svg.setAttribute('class', 'timepicker-svg');
+            svg.setAttribute('width', diameter.toString());
+            svg.setAttribute('height', diameter.toString());
+            const g = Timepicker._createSVGEl('g');
+            g.setAttribute('transform', 'translate(' + dialRadius + ',' + dialRadius + ')');
+            const bearing = Timepicker._createSVGEl('circle');
+            bearing.setAttribute('class', 'timepicker-canvas-bearing');
+            bearing.setAttribute('cx', '0');
+            bearing.setAttribute('cy', '0');
+            bearing.setAttribute('r', '4');
+            const hand = Timepicker._createSVGEl('line');
+            hand.setAttribute('x1', '0');
+            hand.setAttribute('y1', '0');
+            const bg = Timepicker._createSVGEl('circle');
+            bg.setAttribute('class', 'timepicker-canvas-bg');
+            bg.setAttribute('r', tickRadius.toString());
+            g.appendChild(hand);
+            g.appendChild(bg);
+            g.appendChild(bearing);
+            svg.appendChild(g);
+            this._canvas.appendChild(svg);
+            this.hand = hand;
+            this.bg = bg;
+            this.bearing = bearing;
+            this.g = g;
+        }
+        _buildHoursView() {
+            // const $tick = document.createElement('div');
+            // $tick.classList.add('timepicker-tick');
+            // Hours view
+            if (this.options.twelveHour) {
+                for (let i = 1; i < 13; i += 1) {
+                    // const tick = <HTMLElement>$tick.cloneNode(true);
+                    const radian = (i / 6) * Math.PI;
+                    const radius = this.options.outerRadius;
+                    this._buildHoursTick(i, radian, radius);
+                }
+            }
+            else {
+                for (let i = 0; i < 24; i += 1) {
+                    // const tick = <HTMLElement>$tick.cloneNode(true);
+                    const radian = (i / 6) * Math.PI;
+                    const inner = i > 0 && i < 13;
+                    const radius = inner ? this.options.innerRadius : this.options.outerRadius;
+                    this._buildHoursTick(i, radian, radius);
+                }
+            }
+        }
+        _buildHoursTick(i, radian, radius) {
+            const tick = document.createElement('div');
+            tick.classList.add('timepicker-tick');
+            tick.style.left =
+                this.options.dialRadius + Math.sin(radian) * radius - this.options.tickRadius + 'px';
+            tick.style.top =
+                this.options.dialRadius - Math.cos(radian) * radius - this.options.tickRadius + 'px';
+            tick.innerHTML = i === 0 ? '00' : i.toString();
+            this.hoursView.appendChild(tick);
+        }
+        _buildMinutesView() {
+            const _tick = document.createElement('div');
+            _tick.classList.add('timepicker-tick');
+            // Minutes view
+            for (let i = 0; i < 60; i += 5) {
+                const tick = _tick.cloneNode(true);
+                const radian = (i / 30) * Math.PI;
+                tick.style.left =
+                    this.options.dialRadius +
+                        Math.sin(radian) * this.options.outerRadius -
+                        this.options.tickRadius +
+                        'px';
+                tick.style.top =
+                    this.options.dialRadius -
+                        Math.cos(radian) * this.options.outerRadius -
+                        this.options.tickRadius +
+                        'px';
+                tick.innerHTML = Timepicker._addLeadingZero(i);
+                this.minutesView.appendChild(tick);
+            }
+        }
+        _handleAmPmClick = (e) => {
+            this._handleAmPmInteraction(e.target);
+        };
+        _handleAmPmKeypress = (e) => {
+            if (Utils.keys.ENTER.includes(e.key)) {
+                this._handleAmPmInteraction(e.target);
+            }
+        };
+        _handleAmPmInteraction = (e) => {
+            this.amOrPm = e.classList.contains('am-btn') ? 'AM' : 'PM';
+            this._updateAmPmView();
+        };
+        _updateAmPmView() {
+            if (this.options.twelveHour) {
+                if (this.amOrPm === 'PM') {
+                    this._amBtn.classList.remove('filled');
+                    this._pmBtn.classList.add('filled');
+                }
+                else if (this.amOrPm === 'AM') {
+                    this._amBtn.classList.add('filled');
+                    this._pmBtn.classList.remove('filled');
+                }
+            }
+        }
+        _updateTimeFromInput() {
+            // Get the time
+            let value = ((this.el.value || this.options.defaultTime || '') + '').split(':');
+            if (this.options.twelveHour && !(typeof value[1] === 'undefined')) {
+                if (value[1].toUpperCase().indexOf('AM') > 0) {
+                    this.amOrPm = 'AM';
+                }
+                else {
+                    this.amOrPm = 'PM';
+                }
+                value[1] = value[1].replace('AM', '').replace('PM', '');
+            }
+            if (value[0] === 'now') {
+                const now = new Date(+new Date() + this.options.fromNow);
+                value = [now.getHours().toString(), now.getMinutes().toString()];
+                if (this.options.twelveHour) {
+                    this.amOrPm = parseInt(value[0]) >= 12 && parseInt(value[0]) < 24 ? 'PM' : 'AM';
+                }
+            }
+            this.hours = +value[0] || 0;
+            this.minutes = +value[1] || 0;
+            this.inputHours.value = Timepicker._addLeadingZero(this.hours);
+            this.inputMinutes.value = Timepicker._addLeadingZero(this.minutes);
+            this._updateAmPmView();
+        }
+        /**
+         * Show hours or minutes view on timepicker.
+         * @param view The name of the view you want to switch to, 'hours' or 'minutes'.
+         * @param delay
+         */
+        showView = (view, delay = null) => {
+            if (view === 'minutes' && getComputedStyle(this.hoursView).visibility === 'visible') ;
+            const isHours = view === 'hours', nextView = isHours ? this.hoursView : this.minutesView, hideView = isHours ? this.minutesView : this.hoursView;
+            this.currentView = view;
+            /*if (isHours) {
+              this.inputHours.classList.add('text-primary');
+              this.inputMinutes.classList.remove('text-primary');
+            } else {
+              this.inputHours.classList.remove('text-primary');
+              this.inputMinutes.classList.add('text-primary');
+            }*/
+            // Transition view
+            hideView.classList.add('timepicker-dial-out');
+            nextView.style.visibility = 'visible';
+            nextView.classList.remove('timepicker-dial-out');
+            // Reset clock hand
+            this.resetClock(delay);
+            // After transitions ended
+            clearTimeout(this.toggleViewTimer);
+            this.toggleViewTimer = setTimeout(() => {
+                hideView.style.visibility = 'hidden';
+            }, this.options.duration);
+        };
+        resetClock(delay) {
+            const view = this.currentView, value = this[view], isHours = view === 'hours', unit = Math.PI / (isHours ? 6 : 30), radian = value * unit, radius = isHours && value > 0 && value < 13 ? this.options.innerRadius : this.options.outerRadius, x = Math.sin(radian) * radius, y = -Math.cos(radian) * radius;
+            if (delay) {
+                this._canvas?.classList.add('timepicker-canvas-out');
+                setTimeout(() => {
+                    this._canvas?.classList.remove('timepicker-canvas-out');
+                    this.setHand(x, y);
+                }, delay);
+            }
+            else {
+                this.setHand(x, y);
+            }
+        }
+        _inputFromTextField = () => {
+            const isHours = this.currentView === 'hours';
+            if (isHours && this.inputHours.value !== '') {
+                const value = parseInt(this.inputHours.value);
+                if (value > 0 && value < (this.options.twelveHour ? 13 : 24)) {
+                    this.hours = value;
+                }
+                else {
+                    this.setHoursDefault();
+                }
+                this.drawClockFromTimeInput(this.hours, isHours);
+            }
+            else if (!isHours && this.inputMinutes.value !== '') {
+                const value = parseInt(this.inputMinutes.value);
+                if (value >= 0 && value < 60) {
+                    this.minutes = value;
+                }
+                else {
+                    this.minutes = new Date().getMinutes();
+                    this.inputMinutes.value = this.minutes.toString();
+                }
+                this.drawClockFromTimeInput(this.minutes, isHours);
+            }
+        };
+        drawClockFromTimeInput(value, isHours) {
+            const unit = Math.PI / (isHours ? 6 : 30);
+            const radian = value * unit;
+            let radius;
+            if (this.options.twelveHour) {
+                radius = this.options.outerRadius;
+            }
+            else {
+                radius =
+                    isHours && value > 0 && value < 13 ? this.options.innerRadius : this.options.outerRadius;
+            }
+            this.setClockAttributes(radian, radius);
+        }
+        setHand(x, y, roundBy5 = false) {
+            const isHours = this.currentView === 'hours', unit = Math.PI / (isHours || roundBy5 ? 6 : 30), z = Math.sqrt(x * x + y * y), inner = isHours && z < (this.options.outerRadius + this.options.innerRadius) / 2;
+            let radian = Math.atan2(x, -y), radius = inner ? this.options.innerRadius : this.options.outerRadius;
+            if (this.options.twelveHour) {
+                radius = this.options.outerRadius;
+            }
+            // Radian should in range [0, 2PI]
+            if (radian < 0) {
+                radian = Math.PI * 2 + radian;
+            }
+            // Get the round value
+            let value = Math.round(radian / unit);
+            // Get the round radian
+            radian = value * unit;
+            // Correct the hours or minutes
+            if (this.options.twelveHour) {
+                if (isHours) {
+                    if (value === 0)
+                        value = 12;
+                }
+                else {
+                    if (roundBy5)
+                        value *= 5;
+                    if (value === 60)
+                        value = 0;
+                }
+            }
+            else {
+                if (isHours) {
+                    if (value === 12) {
+                        value = 0;
+                    }
+                    value = inner ? (value === 0 ? 12 : value) : value === 0 ? 0 : value + 12;
+                }
+                else {
+                    if (roundBy5) {
+                        value *= 5;
+                    }
+                    if (value === 60) {
+                        value = 0;
+                    }
+                }
+            }
+            // Once hours or minutes changed, vibrate the device
+            if (this[this.currentView] !== value) {
+                if (this.vibrate && this.options.vibrate) {
+                    // Do not vibrate too frequently
+                    if (!this.vibrateTimer) {
+                        navigator[this.vibrate](10);
+                        this.vibrateTimer = setTimeout(() => {
+                            this.vibrateTimer = null;
+                        }, 100);
+                    }
+                }
+            }
+            this[this.currentView] = value;
+            if (isHours) {
+                this.inputHours.value = Timepicker._addLeadingZero(value);
+            }
+            else {
+                this.inputMinutes.value = Timepicker._addLeadingZero(value);
+            }
+            // Set clock hand and others' position
+            this.setClockAttributes(radian, radius);
+        }
+        setClockAttributes(radian, radius) {
+            const cx1 = Math.sin(radian) * (radius - this.options.tickRadius), cy1 = -Math.cos(radian) * (radius - this.options.tickRadius), cx2 = Math.sin(radian) * radius, cy2 = -Math.cos(radian) * radius;
+            this.hand.setAttribute('x2', cx1.toString());
+            this.hand.setAttribute('y2', cy1.toString());
+            this.bg.setAttribute('cx', cx2.toString());
+            this.bg.setAttribute('cy', cy2.toString());
+        }
+        formatHours() {
+            if (this.inputHours.value == '')
+                this.setHoursDefault();
+            this.inputHours.value = Timepicker._addLeadingZero(Number(this.inputHours.value));
+        }
+        formatMinutes() {
+            if (this.inputMinutes.value == '')
+                this.minutes = new Date().getMinutes();
+            this.inputMinutes.value = Timepicker._addLeadingZero(Number(this.inputMinutes.value));
+        }
+        setHoursDefault() {
+            this.hours = new Date().getHours();
+            this.inputHours.value = (this.hours % (this.options.twelveHour ? 12 : 24)).toString();
+        }
+        done = (clearValue = null) => {
+            // Set input value
+            const last = this.el.value;
+            let value = clearValue
+                ? ''
+                : Timepicker._addLeadingZero(this.hours) + ':' + Timepicker._addLeadingZero(this.minutes);
+            this.time = value;
+            if (!clearValue && this.options.twelveHour) {
+                value = `${value} ${this.amOrPm}`;
+            }
+            this.el.value = value;
+            // Trigger change event
+            if (value !== last) {
+                this.el.dispatchEvent(new Event('change', { bubbles: true, cancelable: true, composed: true }));
+            }
+        };
+        confirm = () => {
+            this.done();
+            if (typeof this.options.onDone === 'function') {
+                setTimeout(() => {
+                    this.options.onDone.call(this);
+                }, this.options.duration / 2);
+            }
+        };
+        cancel = () => {
+            this.clear();
+            if (typeof this.options.onDone === 'function')
+                this.options.onCancel.call(this);
+        };
+        clear = () => {
+            this.done(true);
+        };
+        // deprecated
+        open() {
+            console.warn('Timepicker.close() is deprecated. Remove this method and wrap in modal yourself.');
+            return this;
+        }
+        close() {
+            console.warn('Timepicker.close() is deprecated. Remove this method and wrap in modal yourself.');
+            return this;
+        }
+        static {
+            Timepicker._template = `<div class="timepicker-container">
+          <div class="timepicker-digital-display">
+            <div class="timepicker-text-container">
+              <div class="timepicker-display-column timepicker-display-digital-clock">
+                <div class="timepicker-input-hours-wrapper">
+                  <input type="text" maxlength="2" class="timepicker-input-hours text-primary" />
+                </div>
+                <div class="timepicker-input-divider-wrapper">
+                  <span class="timepicker-input-divider">:</span>
+                </div>
+                <div class="timepicker-input-minutes-wrapper">
+                  <input type="text" maxlength="2" class="timepicker-input-minutes" />
+                </div>
+              </div>
+              <div class="timepicker-display-column timepicker-display-am-pm">
+                <div class="timepicker-span-am-pm"></div>
+              </div>
+            </div>
+          </div>
+          <div class="timepicker-analog-display">
+            <div class="timepicker-plate">
+              <div class="timepicker-canvas"></div>
+              <div class="timepicker-dial timepicker-hours"></div>
+              <div class="timepicker-dial timepicker-minutes timepicker-dial-out"></div>
+            </div>
+            <div class="timepicker-footer"></div>
+          </div>
+        </div>`;
+        }
+    }
+
+    const _defaults$4 = {
+        exitDelay: 200,
+        enterDelay: 0,
+        text: '',
+        margin: 5,
+        inDuration: 250,
+        outDuration: 200,
+        position: 'bottom',
+        transitionMovement: 10,
+        opacity: 1
+    };
+    class Tooltip extends Component {
+        /**
+         * If tooltip is open.
+         */
+        isOpen;
+        /**
+         * If tooltip is hovered.
+         */
+        isHovered;
+        /**
+         * If tooltip is focused.
+         */
+        isFocused;
+        tooltipEl;
+        _exitDelayTimeout;
+        _enterDelayTimeout;
+        xMovement;
+        yMovement;
+        constructor(el, options) {
+            super(el, options, Tooltip);
+            this.el['M_Tooltip'] = this;
+            this.options = {
+                ...Tooltip.defaults,
+                ...this._getAttributeOptions(),
+                ...options
+            };
+            this.isOpen = false;
+            this.isHovered = false;
+            this.isFocused = false;
+            this._appendTooltipEl();
+            this._setupEventHandlers();
+        }
+        static get defaults() {
+            return _defaults$4;
+        }
+        /**
+         * Initializes instances of Tooltip.
+         * @param els HTML elements.
+         * @param options Component options.
+         */
+        static init(els, options = {}) {
+            return super.init(els, options, Tooltip);
+        }
+        static getInstance(el) {
+            return el['M_Tooltip'];
+        }
+        destroy() {
+            this.tooltipEl.remove();
+            this._removeEventHandlers();
+            this.el['M_Tooltip'] = undefined;
+        }
+        _appendTooltipEl() {
+            this.tooltipEl = document.createElement('div');
+            this.tooltipEl.classList.add('material-tooltip');
+            const tooltipContentEl = this.options.tooltipId
+                ? document.getElementById(this.options.tooltipId)
+                : document.createElement('div');
+            this.tooltipEl.append(tooltipContentEl);
+            tooltipContentEl.style.display = '';
+            tooltipContentEl.classList.add('tooltip-content');
+            this._setTooltipContent(tooltipContentEl);
+            this.tooltipEl.appendChild(tooltipContentEl);
+            document.body.appendChild(this.tooltipEl);
+        }
+        _setTooltipContent(tooltipContentEl) {
+            if (this.options.tooltipId)
+                return;
+            tooltipContentEl.innerText = this.options.text;
+        }
+        _updateTooltipContent() {
+            this._setTooltipContent(this.tooltipEl.querySelector('.tooltip-content'));
+        }
+        _setupEventHandlers() {
+            this.el.addEventListener('mouseenter', this._handleMouseEnter);
+            this.el.addEventListener('mouseleave', this._handleMouseLeave);
+            this.el.addEventListener('focus', this._handleFocus, true);
+            this.el.addEventListener('blur', this._handleBlur, true);
+        }
+        _removeEventHandlers() {
+            this.el.removeEventListener('mouseenter', this._handleMouseEnter);
+            this.el.removeEventListener('mouseleave', this._handleMouseLeave);
+            this.el.removeEventListener('focus', this._handleFocus, true);
+            this.el.removeEventListener('blur', this._handleBlur, true);
+        }
+        /**
+         * Show tooltip.
+         */
+        open = (isManual) => {
+            if (this.isOpen)
+                return;
+            isManual = isManual === undefined ? true : undefined; // Default value true
+            this.isOpen = true;
+            // Update tooltip content with HTML attribute options
+            this.options = { ...this.options, ...this._getAttributeOptions() };
+            this._updateTooltipContent();
+            this._setEnterDelayTimeout(isManual);
+        };
+        /**
+         * Hide tooltip.
+         */
+        close = () => {
+            if (!this.isOpen)
+                return;
+            this.isHovered = false;
+            this.isFocused = false;
+            this.isOpen = false;
+            this._setExitDelayTimeout();
+        };
+        _setExitDelayTimeout() {
+            clearTimeout(this._exitDelayTimeout);
+            this._exitDelayTimeout = setTimeout(() => {
+                if (this.isHovered || this.isFocused)
+                    return;
+                this._animateOut();
+            }, this.options.exitDelay);
+        }
+        _setEnterDelayTimeout(isManual) {
+            clearTimeout(this._enterDelayTimeout);
+            this._enterDelayTimeout = setTimeout(() => {
+                if (!this.isHovered && !this.isFocused && !isManual)
+                    return;
+                this._animateIn();
+            }, this.options.enterDelay);
+        }
+        _positionTooltip() {
+            const tooltip = this.tooltipEl;
+            const origin = this.el, originHeight = origin.offsetHeight, originWidth = origin.offsetWidth, tooltipHeight = tooltip.offsetHeight, tooltipWidth = tooltip.offsetWidth, margin = this.options.margin;
+            this.xMovement = 0;
+            this.yMovement = 0;
+            let targetTop = origin.getBoundingClientRect().top + Utils.getDocumentScrollTop();
+            let targetLeft = origin.getBoundingClientRect().left + Utils.getDocumentScrollLeft();
+            if (this.options.position === 'top') {
+                targetTop += -tooltipHeight - margin;
+                targetLeft += originWidth / 2 - tooltipWidth / 2;
+                this.yMovement = -this.options.transitionMovement;
+            }
+            else if (this.options.position === 'right') {
+                targetTop += originHeight / 2 - tooltipHeight / 2;
+                targetLeft += originWidth + margin;
+                this.xMovement = this.options.transitionMovement;
+            }
+            else if (this.options.position === 'left') {
+                targetTop += originHeight / 2 - tooltipHeight / 2;
+                targetLeft += -tooltipWidth - margin;
+                this.xMovement = -this.options.transitionMovement;
+            }
+            else {
+                targetTop += originHeight + margin;
+                targetLeft += originWidth / 2 - tooltipWidth / 2;
+                this.yMovement = this.options.transitionMovement;
+            }
+            const newCoordinates = this._repositionWithinScreen(targetLeft, targetTop, tooltipWidth, tooltipHeight);
+            tooltip.style.top = newCoordinates.y + 'px';
+            tooltip.style.left = newCoordinates.x + 'px';
+        }
+        _repositionWithinScreen(x, y, width, height) {
+            const scrollLeft = Utils.getDocumentScrollLeft();
+            const scrollTop = Utils.getDocumentScrollTop();
+            let newX = x - scrollLeft;
+            let newY = y - scrollTop;
+            const bounding = {
+                left: newX,
+                top: newY,
+                width: width,
+                height: height
+            };
+            const offset = this.options.margin + this.options.transitionMovement;
+            const edges = Utils.checkWithinContainer(document.body, bounding, offset);
+            if (edges.left) {
+                newX = offset;
+            }
+            else if (edges.right) {
+                newX -= newX + width - window.innerWidth;
+            }
+            if (edges.top) {
+                newY = offset;
+            }
+            else if (edges.bottom) {
+                newY -= newY + height - window.innerHeight;
+            }
+            return {
+                x: newX + scrollLeft,
+                y: newY + scrollTop
+            };
+        }
+        _animateIn() {
+            this._positionTooltip();
+            this.tooltipEl.style.visibility = 'visible';
+            const duration = this.options.inDuration;
+            // easeOutCubic
+            this.tooltipEl.style.transition = `
+      transform ${duration}ms ease-out,
+      opacity ${duration}ms ease-out`;
+            setTimeout(() => {
+                this.tooltipEl.style.transform = `translateX(${this.xMovement}px) translateY(${this.yMovement}px)`;
+                this.tooltipEl.style.opacity = (this.options.opacity || 1).toString();
+            }, 1);
+        }
+        _animateOut() {
+            const duration = this.options.outDuration;
+            // easeOutCubic
+            this.tooltipEl.style.transition = `
+      transform ${duration}ms ease-out,
+      opacity ${duration}ms ease-out`;
+            setTimeout(() => {
+                this.tooltipEl.style.transform = `translateX(0px) translateY(0px)`;
+                this.tooltipEl.style.opacity = '0';
+            }, 1);
+            /*
+            anim.remove(this.tooltipEl);
+            anim({
+              targets: this.tooltipEl,
+              opacity: 0,
+              translateX: 0,
+              translateY: 0,
+              duration: this.options.outDuration,
+              easing: 'easeOutCubic'
+            });
+            */
+        }
+        _handleMouseEnter = () => {
+            this.isHovered = true;
+            this.isFocused = false; // Allows close of tooltip when opened by focus.
+            this.open(false);
+        };
+        _handleMouseLeave = () => {
+            this.isHovered = false;
+            this.isFocused = false; // Allows close of tooltip when opened by focus.
+            this.close();
+        };
+        _handleFocus = () => {
+            if (Utils.tabPressed) {
+                this.isFocused = true;
+                this.open(false);
+            }
+        };
+        _handleBlur = () => {
+            this.isFocused = false;
+            this.close();
+        };
+        _getAttributeOptions() {
+            const attributeOptions = {};
+            const tooltipTextOption = this.el.getAttribute('data-tooltip');
+            const tooltipId = this.el.getAttribute('data-tooltip-id');
+            const positionOption = this.el.getAttribute('data-position');
+            if (tooltipTextOption) {
+                attributeOptions.text = tooltipTextOption;
+            }
+            if (positionOption) {
+                attributeOptions.position = positionOption;
+            }
+            if (tooltipId) {
+                attributeOptions.tooltipId = tooltipId;
+            }
+            return attributeOptions;
+        }
+    }
+
+    class Waves {
+        static _offset(el) {
+            const box = el.getBoundingClientRect();
+            const docElem = document.documentElement;
+            return {
+                top: box.top + window.pageYOffset - docElem.clientTop,
+                left: box.left + window.pageXOffset - docElem.clientLeft
+            };
+        }
+        // https://phoenix-dx.com/css-techniques-for-material-ripple-effect/
+        static renderWaveEffect(targetElement, position = null, color = null) {
+            const isCentered = position === null;
+            const duration = 500;
+            let animationFrame, animationStart;
+            const animationStep = function (timestamp) {
+                if (!animationStart) {
+                    animationStart = timestamp;
+                }
+                const frame = timestamp - animationStart;
+                if (frame < duration) {
+                    const easing = (frame / duration) * (2 - frame / duration);
+                    const circle = isCentered
+                        ? 'circle at 50% 50%'
+                        : `circle at ${position.x}px ${position.y}px`;
+                    const waveColor = `rgba(${color?.r || 0}, ${color?.g || 0}, ${color?.b || 0}, ${0.3 * (1 - easing)})`;
+                    const stop = 90 * easing + '%';
+                    targetElement.style.backgroundImage =
+                        'radial-gradient(' +
+                            circle +
+                            ', ' +
+                            waveColor +
+                            ' ' +
+                            stop +
+                            ', transparent ' +
+                            stop +
+                            ')';
+                    animationFrame = window.requestAnimationFrame(animationStep);
+                }
+                else {
+                    targetElement.style.backgroundImage = 'none';
+                    window.cancelAnimationFrame(animationFrame);
+                }
+            };
+            animationFrame = window.requestAnimationFrame(animationStep);
+        }
+        static Init() {
+            if (typeof document !== 'undefined')
+                document?.addEventListener('DOMContentLoaded', () => {
+                    document.body.addEventListener('click', (e) => {
+                        const trigger = e.target;
+                        const el = trigger.closest('.waves-effect');
+                        if (el && el.contains(trigger)) {
+                            const isCircular = el.classList.contains('waves-circle');
+                            const x = e.pageX - Waves._offset(el).left;
+                            const y = e.pageY - Waves._offset(el).top;
+                            let color = null;
+                            if (el.classList.contains('waves-light'))
+                                color = { r: 255, g: 255, b: 255 };
+                            Waves.renderWaveEffect(el, isCircular ? null : { x, y }, color);
+                        }
+                    });
+                });
+        }
+    }
+
+    const _defaults$3 = {};
+    // TODO: !!!!!
+    class Range extends Component {
+        _mousedown;
+        value;
+        thumb;
+        constructor(el, options) {
+            super(el, options, Range);
+            this.el['M_Range'] = this;
+            this.options = {
+                ...Range.defaults,
+                ...options
+            };
+            this._mousedown = false;
+            this._setupThumb();
+            this._setupEventHandlers();
+        }
+        static get defaults() {
+            return _defaults$3;
+        }
+        /**
+         * Initializes instances of Range.
+         * @param els HTML elements.
+         * @param options Component options.
+         */
+        static init(els, options = {}) {
+            return super.init(els, options, Range);
+        }
+        static getInstance(el) {
+            return el['M_Range'];
+        }
+        destroy() {
+            this._removeEventHandlers();
+            this._removeThumb();
+            this.el['M_Range'] = undefined;
+        }
+        _setupEventHandlers() {
+            this.el.addEventListener('change', this._handleRangeChange);
+            this.el.addEventListener('mousedown', this._handleRangeMousedownTouchstart);
+            this.el.addEventListener('touchstart', this._handleRangeMousedownTouchstart);
+            this.el.addEventListener('input', this._handleRangeInputMousemoveTouchmove);
+            this.el.addEventListener('mousemove', this._handleRangeInputMousemoveTouchmove);
+            this.el.addEventListener('touchmove', this._handleRangeInputMousemoveTouchmove);
+            this.el.addEventListener('mouseup', this._handleRangeMouseupTouchend);
+            this.el.addEventListener('touchend', this._handleRangeMouseupTouchend);
+            this.el.addEventListener('blur', this._handleRangeBlurMouseoutTouchleave);
+            this.el.addEventListener('mouseout', this._handleRangeBlurMouseoutTouchleave);
+            this.el.addEventListener('touchleave', this._handleRangeBlurMouseoutTouchleave);
+        }
+        _removeEventHandlers() {
+            this.el.removeEventListener('change', this._handleRangeChange);
+            this.el.removeEventListener('mousedown', this._handleRangeMousedownTouchstart);
+            this.el.removeEventListener('touchstart', this._handleRangeMousedownTouchstart);
+            this.el.removeEventListener('input', this._handleRangeInputMousemoveTouchmove);
+            this.el.removeEventListener('mousemove', this._handleRangeInputMousemoveTouchmove);
+            this.el.removeEventListener('touchmove', this._handleRangeInputMousemoveTouchmove);
+            this.el.removeEventListener('mouseup', this._handleRangeMouseupTouchend);
+            this.el.removeEventListener('touchend', this._handleRangeMouseupTouchend);
+            this.el.removeEventListener('blur', this._handleRangeBlurMouseoutTouchleave);
+            this.el.removeEventListener('mouseout', this._handleRangeBlurMouseoutTouchleave);
+            this.el.removeEventListener('touchleave', this._handleRangeBlurMouseoutTouchleave);
+        }
+        _handleRangeChange = () => {
+            this.value.innerHTML = this.el.value;
+            if (!this.thumb.classList.contains('active')) {
+                this._showRangeBubble();
+            }
+            const offsetLeft = this._calcRangeOffset();
+            this.thumb.classList.add('active');
+            this.thumb.style.left = offsetLeft + 'px';
+        };
+        _handleRangeMousedownTouchstart = (e) => {
+            // Set indicator value
+            this.value.innerHTML = this.el.value;
+            this._mousedown = true;
+            this.el.classList.add('active');
+            if (!this.thumb.classList.contains('active')) {
+                this._showRangeBubble();
+            }
+            if (e.type !== 'input') {
+                const offsetLeft = this._calcRangeOffset();
+                this.thumb.classList.add('active');
+                this.thumb.style.left = offsetLeft + 'px';
+            }
+        };
+        _handleRangeInputMousemoveTouchmove = () => {
+            if (this._mousedown) {
+                if (!this.thumb.classList.contains('active')) {
+                    this._showRangeBubble();
+                }
+                const offsetLeft = this._calcRangeOffset();
+                this.thumb.classList.add('active');
+                this.thumb.style.left = offsetLeft + 'px';
+                this.value.innerHTML = this.el.value;
+            }
+        };
+        _handleRangeMouseupTouchend = () => {
+            this._mousedown = false;
+            this.el.classList.remove('active');
+        };
+        _handleRangeBlurMouseoutTouchleave = () => {
+            if (!this._mousedown) {
+                const paddingLeft = parseInt(getComputedStyle(this.el).paddingLeft);
+                const marginLeftText = 7 + paddingLeft + 'px';
+                if (this.thumb.classList.contains('active')) {
+                    const duration = 100;
+                    // from
+                    this.thumb.style.transition = 'none';
+                    setTimeout(() => {
+                        this.thumb.style.transition = `
+            height ${duration}ms ease,
+            width ${duration}ms ease,
+            top ${duration}ms ease,
+            margin ${duration}ms ease
+          `;
+                        // to
+                        this.thumb.style.height = '0';
+                        this.thumb.style.width = '0';
+                        this.thumb.style.top = '0';
+                        this.thumb.style.marginLeft = marginLeftText;
+                    }, 1);
+                }
+                this.thumb.classList.remove('active');
+            }
+        };
+        _setupThumb() {
+            this.thumb = document.createElement('span');
+            this.value = document.createElement('span');
+            this.thumb.classList.add('thumb');
+            this.value.classList.add('value');
+            this.thumb.append(this.value);
+            this.el.after(this.thumb);
+        }
+        _removeThumb() {
+            this.thumb.remove();
+        }
+        _showRangeBubble() {
+            const paddingLeft = parseInt(getComputedStyle(this.thumb.parentElement).paddingLeft);
+            const marginLeftText = -7 + paddingLeft + 'px'; // TODO: fix magic number?
+            const duration = 300;
+            // easeOutQuint
+            this.thumb.style.transition = `
+      height ${duration}ms ease,
+      width ${duration}ms ease,
+      top ${duration}ms ease,
+      margin ${duration}ms ease
+    `;
+            // to
+            this.thumb.style.height = '30px';
+            this.thumb.style.width = '30px';
+            this.thumb.style.top = '-30px';
+            this.thumb.style.marginLeft = marginLeftText;
+        }
+        _calcRangeOffset() {
+            const width = this.el.getBoundingClientRect().width - 15;
+            const max = parseFloat(this.el.getAttribute('max')) || 100; // Range default max
+            const min = parseFloat(this.el.getAttribute('min')) || 0; // Range default min
+            const percent = (parseFloat(this.el.value) - min) / (max - min);
+            return percent * width;
+        }
+        /**
+         * Initializes every range input in the current document.
+         */
+        static Init() {
+            if (typeof document !== 'undefined')
+                Range.init(document?.querySelectorAll('input[type=range]'), {});
+        }
+    }
+
+    const _defaults$2 = Object.freeze({});
+    class CharacterCounter extends Component {
+        /** Stores the reference to the counter HTML element. */
+        counterEl;
+        /** Specifies whether the input is valid or not. */
+        isInvalid;
+        /** Specifies whether the input text has valid length or not. */
+        isValidLength;
+        constructor(el, options) {
+            super(el, {}, CharacterCounter);
+            this.el['M_CharacterCounter'] = this;
+            this.options = {
+                ...CharacterCounter.defaults,
+                ...options
+            };
+            this.isInvalid = false;
+            this.isValidLength = false;
+            this._setupCounter();
+            this._setupEventHandlers();
+        }
+        static get defaults() {
+            return _defaults$2;
+        }
+        /**
+         * Initializes instances of CharacterCounter.
+         * @param els HTML elements.
+         * @param options Component options.
+         */
+        static init(els, options = {}) {
+            return super.init(els, options, CharacterCounter);
+        }
+        static getInstance(el) {
+            return el['M_CharacterCounter'];
+        }
+        destroy() {
+            this._removeEventHandlers();
+            this.el['CharacterCounter'] = undefined;
+            this._removeCounter();
+        }
+        _setupEventHandlers() {
+            this.el.addEventListener('focus', this.updateCounter, true);
+            this.el.addEventListener('input', this.updateCounter, true);
+        }
+        _removeEventHandlers() {
+            this.el.removeEventListener('focus', this.updateCounter, true);
+            this.el.removeEventListener('input', this.updateCounter, true);
+        }
+        _setupCounter() {
+            this.counterEl = document.createElement('span');
+            this.counterEl.classList.add('character-counter');
+            this.counterEl.style.float = 'right';
+            this.counterEl.style.fontSize = '12px';
+            this.counterEl.style.height = '1';
+            this.el.parentElement.appendChild(this.counterEl);
+        }
+        _removeCounter() {
+            this.counterEl.remove();
+        }
+        updateCounter = () => {
+            const maxLength = parseInt(this.el.getAttribute('maxlength')), actualLength = this.el.value.length;
+            this.isValidLength = actualLength <= maxLength;
+            let counterString = actualLength.toString();
+            if (maxLength) {
+                counterString += '/' + maxLength;
+                this._validateInput();
+            }
+            this.counterEl.innerHTML = counterString;
+        };
+        _validateInput() {
+            if (this.isValidLength && this.isInvalid) {
+                this.isInvalid = false;
+                this.el.classList.remove('invalid');
+            }
+            else if (!this.isValidLength && !this.isInvalid) {
+                this.isInvalid = true;
+                this.el.classList.remove('valid');
+                this.el.classList.add('invalid');
+            }
+        }
+    }
+
+    const _defaults$1 = {
+        indicators: true,
+        height: 400,
+        duration: 500,
+        interval: 6000,
+        pauseOnFocus: true,
+        pauseOnHover: true,
+        indicatorLabelFunc: null // Function which will generate a label for the indicators (ARIA)
+    };
+    class Slider extends Component {
+        /** Index of current slide. */
+        activeIndex;
+        interval;
+        eventPause;
+        _slider;
+        _slides;
+        _activeSlide;
+        _indicators;
+        _hovered;
+        _focused;
+        _focusCurrent;
+        _sliderId;
+        constructor(el, options) {
+            super(el, options, Slider);
+            this.el['M_Slider'] = this;
+            this.options = {
+                ...Slider.defaults,
+                ...options
+            };
+            // init props
+            this.interval = null;
+            this.eventPause = false;
+            this._hovered = false;
+            this._focused = false;
+            this._focusCurrent = false;
+            // setup
+            this._slider = this.el.querySelector('.slides');
+            this._slides = Array.from(this._slider.querySelectorAll('li'));
+            this.activeIndex = this._slides.findIndex((li) => li.classList.contains('active'));
+            if (this.activeIndex !== -1) {
+                this._activeSlide = this._slides[this.activeIndex];
+            }
+            this._setSliderHeight();
+            // Sets element id if it does not have one
+            if (this._slider.hasAttribute('id'))
+                this._sliderId = this._slider.getAttribute('id');
+            else {
+                this._sliderId = 'slider-' + Utils.guid();
+                this._slider.setAttribute('id', this._sliderId);
+            }
+            const placeholderBase64 = 'data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
+            // Set initial positions of captions
+            this._slides.forEach((slide) => {
+                // Caption
+                //const caption = <HTMLElement|null>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 = `<button type="button" class="indicator-item-btn" aria-label="${label}" aria-controls="${this._sliderId}"></button>`;
+                    arrLi.push(li);
+                    ul.append(li);
+                });
+                this.el.append(ul);
+                this._indicators = arrLi;
+            }
+        }
+        _removeIndicators() {
+            this.el.querySelector('ul.indicators').remove(); //find('ul.indicators').remove();
+        }
+        set(index) {
+            // Wrap around indices.
+            if (index >= this._slides.length)
+                index = 0;
+            else if (index < 0)
+                index = this._slides.length - 1;
+            // Only do if index changes
+            if (this.activeIndex === index)
+                return;
+            this._activeSlide = this._slides[this.activeIndex];
+            const _caption = this._activeSlide.querySelector('.caption');
+            this._activeSlide.classList.remove('active');
+            // Enables every slide
+            this._slides.forEach((slide) => (slide.style.visibility = 'visible'));
+            //--- Hide active Slide + Caption
+            this._activeSlide.style.opacity = '0';
+            setTimeout(() => {
+                this._slides.forEach((slide) => {
+                    if (slide.classList.contains('active'))
+                        return;
+                    slide.style.opacity = '0';
+                    slide.style.transform = 'translate(0, 0)';
+                    // Disables invisible slides (for assistive technologies)
+                    slide.style.visibility = 'hidden';
+                });
+            }, this.options.duration);
+            // Hide active Caption
+            //this._animateCaptionIn(_caption, this.options.duration);
+            _caption.style.opacity = '0';
+            // Update indicators
+            if (this.options.indicators) {
+                const activeIndicator = this._indicators[this.activeIndex].children[0];
+                const nextIndicator = this._indicators[index].children[0];
+                activeIndicator.classList.remove('active');
+                nextIndicator.classList.add('active');
+                if (typeof this.options.indicatorLabelFunc === 'function') {
+                    activeIndicator.ariaLabel = this.options.indicatorLabelFunc.call(this, this.activeIndex, false);
+                    nextIndicator.ariaLabel = this.options.indicatorLabelFunc.call(this, index, true);
+                }
+            }
+            //--- Show new Slide + Caption
+            this._animateSlide(this._slides[index], true);
+            this._slides[index].classList.add('active');
+            this.activeIndex = index;
+            // Reset interval, if allowed. This check prevents autostart
+            // when slider is paused, since it can be changed though indicators.
+            if (this.interval != null) {
+                this.start();
+            }
+        }
+        _pause(fromEvent) {
+            clearInterval(this.interval);
+            this.eventPause = fromEvent;
+            this.interval = null;
+        }
+        /**
+         * Pause slider autoslide.
+         */
+        pause = () => {
+            this._pause(false);
+        };
+        /**
+         * Start slider autoslide.
+         */
+        start = () => {
+            clearInterval(this.interval);
+            this.interval = setInterval(this._handleInterval, this.options.duration + this.options.interval);
+            this.eventPause = false;
+        };
+        /**
+         * Move to next slider.
+         */
+        next = () => {
+            let newIndex = this.activeIndex + 1;
+            // Wrap around indices.
+            if (newIndex >= this._slides.length)
+                newIndex = 0;
+            else if (newIndex < 0)
+                newIndex = this._slides.length - 1;
+            this.set(newIndex);
+        };
+        /**
+         * Move to prev slider.
+         */
+        prev = () => {
+            let newIndex = this.activeIndex - 1;
+            // Wrap around indices.
+            if (newIndex >= this._slides.length)
+                newIndex = 0;
+            else if (newIndex < 0)
+                newIndex = this._slides.length - 1;
+            this.set(newIndex);
+        };
+    }
+
+    const _defaults = {
+        text: '',
+        displayLength: 4000,
+        inDuration: 300,
+        outDuration: 375,
+        classes: '',
+        completeCallback: null,
+        activationPercent: 0.8
+    };
+    class Toast {
+        /** The toast element. */
+        el;
+        /**
+         * The remaining amount of time in ms that the toast
+         * will stay before dismissal.
+         */
+        timeRemaining;
+        /**
+         * Describes the current pan state of the Toast.
+         */
+        panning;
+        options;
+        message;
+        counterInterval;
+        wasSwiped;
+        startingXPos;
+        xPos;
+        time;
+        deltaX;
+        velocityX;
+        static _toasts;
+        static _container;
+        static _draggedToast;
+        constructor(options) {
+            this.options = {
+                ...Toast.defaults,
+                ...options
+            };
+            this.message = this.options.text;
+            this.panning = false;
+            this.timeRemaining = this.options.displayLength;
+            if (Toast._toasts.length === 0) {
+                Toast._createContainer();
+            }
+            // Create new toast
+            Toast._toasts.push(this);
+            const toastElement = this._createToast();
+            toastElement['M_Toast'] = this;
+            this.el = toastElement;
+            this._animateIn();
+            this._setTimer();
+        }
+        static get defaults() {
+            return _defaults;
+        }
+        static getInstance(el) {
+            return el['M_Toast'];
+        }
+        static _createContainer() {
+            const container = document.createElement('div');
+            container.setAttribute('id', 'toast-container');
+            // Add event handler
+            container.addEventListener('touchstart', Toast._onDragStart);
+            container.addEventListener('touchmove', Toast._onDragMove);
+            container.addEventListener('touchend', Toast._onDragEnd);
+            container.addEventListener('mousedown', Toast._onDragStart);
+            document.addEventListener('mousemove', Toast._onDragMove);
+            document.addEventListener('mouseup', Toast._onDragEnd);
+            document.body.appendChild(container);
+            Toast._container = container;
+        }
+        static _removeContainer() {
+            document.removeEventListener('mousemove', Toast._onDragMove);
+            document.removeEventListener('mouseup', Toast._onDragEnd);
+            Toast._container.remove();
+            Toast._container = null;
+        }
+        static _onDragStart(e) {
+            if (e.target && e.target.closest('.toast')) {
+                const toastElem = e.target.closest('.toast');
+                const toast = toastElem['M_Toast'];
+                toast.panning = true;
+                Toast._draggedToast = toast;
+                toast.el.classList.add('panning');
+                toast.el.style.transition = '';
+                toast.startingXPos = Toast._xPos(e);
+                toast.time = Date.now();
+                toast.xPos = Toast._xPos(e);
+            }
+        }
+        static _onDragMove(e) {
+            if (!!Toast._draggedToast) {
+                e.preventDefault();
+                const toast = Toast._draggedToast;
+                toast.deltaX = Math.abs(toast.xPos - Toast._xPos(e));
+                toast.xPos = Toast._xPos(e);
+                toast.velocityX = toast.deltaX / (Date.now() - toast.time);
+                toast.time = Date.now();
+                const totalDeltaX = toast.xPos - toast.startingXPos;
+                const activationDistance = toast.el.offsetWidth * toast.options.activationPercent;
+                toast.el.style.transform = `translateX(${totalDeltaX}px)`;
+                toast.el.style.opacity = (1 - Math.abs(totalDeltaX / activationDistance)).toString();
+            }
+        }
+        static _onDragEnd() {
+            if (!!Toast._draggedToast) {
+                const toast = Toast._draggedToast;
+                toast.panning = false;
+                toast.el.classList.remove('panning');
+                const totalDeltaX = toast.xPos - toast.startingXPos;
+                const activationDistance = toast.el.offsetWidth * toast.options.activationPercent;
+                const shouldBeDismissed = Math.abs(totalDeltaX) > activationDistance || toast.velocityX > 1;
+                // Remove toast
+                if (shouldBeDismissed) {
+                    toast.wasSwiped = true;
+                    toast.dismiss();
+                    // Animate toast back to original position
+                }
+                else {
+                    toast.el.style.transition = 'transform .2s, opacity .2s';
+                    toast.el.style.transform = '';
+                    toast.el.style.opacity = '';
+                }
+                Toast._draggedToast = null;
+            }
+        }
+        static _xPos(e) {
+            if (e.type.startsWith('touch') && e.targetTouches.length >= 1) {
+                return e.targetTouches[0].clientX;
+            }
+            // mouse event
+            return e.clientX;
+        }
+        /**
+         * dismiss all toasts.
+         */
+        static dismissAll() {
+            for (const toastIndex in Toast._toasts) {
+                Toast._toasts[toastIndex].dismiss();
+            }
+        }
+        _createToast() {
+            let toast = this.options.toastId
+                ? document.getElementById(this.options.toastId)
+                : document.createElement('div');
+            if (toast instanceof HTMLTemplateElement) {
+                const node = toast.content.cloneNode(true);
+                toast = node.firstElementChild;
+            }
+            toast.classList.add('toast');
+            toast.setAttribute('role', 'alert');
+            toast.setAttribute('aria-live', 'assertive');
+            toast.setAttribute('aria-atomic', 'true');
+            // Add custom classes onto toast
+            if (this.options.classes.length > 0) {
+                toast.classList.add(...this.options.classes.split(' '));
+            }
+            if (this.message)
+                toast.innerText = this.message;
+            Toast._container.appendChild(toast);
+            return toast;
+        }
+        _animateIn() {
+            // Animate toast in
+            this.el.style.display = '';
+            this.el.style.opacity = '0';
+            // easeOutCubic
+            this.el.style.transition = `
+      top ${this.options.inDuration}ms ease,
+      opacity ${this.options.inDuration}ms ease
+    `;
+            setTimeout(() => {
+                this.el.style.top = '0';
+                this.el.style.opacity = '1';
+            }, 1);
+        }
+        /**
+         * Create setInterval which automatically removes toast when timeRemaining >= 0
+         * has been reached.
+         */
+        _setTimer() {
+            if (this.timeRemaining !== Infinity) {
+                this.counterInterval = setInterval(() => {
+                    // If toast is not being dragged, decrease its time remaining
+                    if (!this.panning) {
+                        this.timeRemaining -= 20;
+                    }
+                    // Animate toast out
+                    if (this.timeRemaining <= 0) {
+                        this.dismiss();
+                    }
+                }, 20);
+            }
+        }
+        /**
+         * Dismiss toast with animation.
+         */
+        dismiss() {
+            clearInterval(this.counterInterval);
+            const activationDistance = this.el.offsetWidth * this.options.activationPercent;
+            if (this.wasSwiped) {
+                this.el.style.transition = 'transform .05s, opacity .05s';
+                this.el.style.transform = `translateX(${activationDistance}px)`;
+                this.el.style.opacity = '0';
+            }
+            // easeOutExpo
+            this.el.style.transition = `
+      margin ${this.options.outDuration}ms ease,
+      opacity ${this.options.outDuration}ms ease`;
+            setTimeout(() => {
+                this.el.style.opacity = '0';
+                this.el.style.marginTop = '-40px';
+            }, 1);
+            setTimeout(() => {
+                // Call the optional callback
+                if (typeof this.options.completeCallback === 'function') {
+                    this.options.completeCallback();
+                }
+                // Remove toast from DOM
+                if (this.el.id != this.options.toastId) {
+                    this.el.remove();
+                    Toast._toasts.splice(Toast._toasts.indexOf(this), 1);
+                    if (Toast._toasts.length === 0) {
+                        Toast._removeContainer();
+                    }
+                }
+            }, this.options.outDuration);
+        }
+        static {
+            Toast._toasts = [];
+            Toast._container = null;
+            Toast._draggedToast = null;
+        }
+    }
+
+    /* eslint-disable @typescript-eslint/no-unused-vars */
+    const version = '2.2.1';
+    /**
+     * Automatically initialize components.
+     * @param context Root element to initialize. Defaults to `document.body`.
+     * @param options Options for each component.
+     */
+    function AutoInit(context = document.body, options) {
+        const registry = {
+            Autocomplete: context.querySelectorAll('.autocomplete:not(.no-autoinit)'),
+            Cards: context.querySelectorAll('.cards:not(.no-autoinit)'),
+            Carousel: context.querySelectorAll('.carousel:not(.no-autoinit)'),
+            Chips: context.querySelectorAll('.chips:not(.no-autoinit)'),
+            Collapsible: context.querySelectorAll('.collapsible:not(.no-autoinit)'),
+            Datepicker: context.querySelectorAll('.datepicker:not(.no-autoinit)'),
+            Dropdown: context.querySelectorAll('.dropdown-trigger:not(.no-autoinit)'),
+            Materialbox: context.querySelectorAll('.materialboxed:not(.no-autoinit)'),
+            Modal: context.querySelectorAll('.modal:not(.no-autoinit)'),
+            Parallax: context.querySelectorAll('.parallax:not(.no-autoinit)'),
+            Pushpin: context.querySelectorAll('.pushpin:not(.no-autoinit)'),
+            ScrollSpy: context.querySelectorAll('.scrollspy:not(.no-autoinit)'),
+            FormSelect: context.querySelectorAll('select:not(.no-autoinit)'),
+            Sidenav: context.querySelectorAll('.sidenav:not(.no-autoinit)'),
+            Tabs: context.querySelectorAll('.tabs:not(.no-autoinit)'),
+            TapTarget: context.querySelectorAll('.tap-target:not(.no-autoinit)'),
+            Timepicker: context.querySelectorAll('.timepicker:not(.no-autoinit)'),
+            Tooltip: context.querySelectorAll('.tooltipped:not(.no-autoinit)'),
+            FloatingActionButton: context.querySelectorAll('.fixed-action-btn:not(.no-autoinit)')
+        };
+        Autocomplete.init(registry.Autocomplete, options?.Autocomplete ?? {});
+        Cards.init(registry.Cards, options?.Cards ?? {});
+        Carousel.init(registry.Carousel, options?.Carousel ?? {});
+        Chips.init(registry.Chips, options?.Chips ?? {});
+        Collapsible.init(registry.Collapsible, options?.Collapsible ?? {});
+        Datepicker.init(registry.Datepicker, options?.Datepicker ?? {});
+        Dropdown.init(registry.Dropdown, options?.Dropdown ?? {});
+        Materialbox.init(registry.Materialbox, options?.Materialbox ?? {});
+        Modal.init(registry.Modal, options?.Modal ?? {});
+        Parallax.init(registry.Parallax, options?.Parallax ?? {});
+        Pushpin.init(registry.Pushpin, options?.Pushpin ?? {});
+        ScrollSpy.init(registry.ScrollSpy, options?.ScrollSpy ?? {});
+        FormSelect.init(registry.FormSelect, options?.FormSelect ?? {});
+        Sidenav.init(registry.Sidenav, options?.Sidenav ?? {});
+        Tabs.init(registry.Tabs, options?.Tabs ?? {});
+        TapTarget.init(registry.TapTarget, options?.TapTarget ?? {});
+        Timepicker.init(registry.Timepicker, options?.Timepicker ?? {});
+        Tooltip.init(registry.Tooltip, options?.Tooltip ?? {});
+        FloatingActionButton.init(registry.FloatingActionButton, options?.FloatingActionButton ?? {});
+    }
+    // Init
+    if (typeof document !== 'undefined') {
+        document.addEventListener('keydown', Utils.docHandleKeydown, true);
+        document.addEventListener('keyup', Utils.docHandleKeyup, true);
+        document.addEventListener('focus', Utils.docHandleFocus, true);
+        document.addEventListener('blur', Utils.docHandleBlur, true);
+    }
+    Forms.Init();
+    Chips.Init();
+    Waves.Init();
+    Range.Init();
+
+    exports.AutoInit = AutoInit;
+    exports.Autocomplete = Autocomplete;
+    exports.Cards = Cards;
+    exports.Carousel = Carousel;
+    exports.CharacterCounter = CharacterCounter;
+    exports.Chips = Chips;
+    exports.Collapsible = Collapsible;
+    exports.Datepicker = Datepicker;
+    exports.Dropdown = Dropdown;
+    exports.FloatingActionButton = FloatingActionButton;
+    exports.FormSelect = FormSelect;
+    exports.Forms = Forms;
+    exports.Materialbox = Materialbox;
+    exports.Modal = Modal;
+    exports.Parallax = Parallax;
+    exports.Pushpin = Pushpin;
+    exports.Range = Range;
+    exports.ScrollSpy = ScrollSpy;
+    exports.Sidenav = Sidenav;
+    exports.Slider = Slider;
+    exports.Tabs = Tabs;
+    exports.TapTarget = TapTarget;
+    exports.Timepicker = Timepicker;
+    exports.Toast = Toast;
+    exports.Tooltip = Tooltip;
+    exports.Waves = Waves;
+    exports.version = version;
+
+    return exports;
+
+})({});
diff --git a/dist/js/materialize.min.js b/dist/js/materialize.min.js
new file mode 100644
index 0000000000..10658be42d
--- /dev/null
+++ b/dist/js/materialize.min.js
@@ -0,0 +1,6 @@
+/*!
+* Materialize v2.2.1 (https://materializeweb.com)
+* Copyright 2014-2025 Materialize
+* MIT License (https://raw.githubusercontent.com/materializecss/materialize/master/LICENSE)
+*/
+var M=function(t){"use strict";class e{static tabPressed=!1;static keyDown=!1;static keys={TAB:["Tab"],ENTER:["Enter"],ESC:["Escape","Esc"],BACKSPACE:["Backspace"],ARROW_UP:["ArrowUp","Up"],ARROW_DOWN:["ArrowDown","Down"],ARROW_LEFT:["ArrowLeft","Left"],ARROW_RIGHT:["ArrowRight","Right"],DELETE:["Delete","Del"]};static docHandleKeydown(t){e.keyDown=!0,[...e.keys.TAB,...e.keys.ARROW_DOWN,...e.keys.ARROW_UP].includes(t.key)&&(e.tabPressed=!0)}static docHandleKeyup(t){e.keyDown=!1,[...e.keys.TAB,...e.keys.ARROW_DOWN,...e.keys.ARROW_UP].includes(t.key)&&(e.tabPressed=!1)}static docHandleFocus(t){e.keyDown&&document.body.classList.add("keyboard-focused")}static docHandleBlur(t){document.body.classList.remove("keyboard-focused")}static guid(){const t=()=>Math.floor(65536*(1+Math.random())).toString(16).substring(1);return t()+t()+"-"+t()+"-"+t()+"-"+t()+"-"+t()+t()+t()}static checkWithinContainer(t,e,i){const s={top:!1,right:!1,bottom:!1,left:!1},n=t.getBoundingClientRect(),o=t===document.body?Math.max(n.bottom,window.innerHeight):n.bottom,a=t.scrollLeft,l=t.scrollTop,r=e.left-a,h=e.top-l;return(r<n.left+i||r<i)&&(s.left=!0),(r+e.width>n.right-i||r+e.width>window.innerWidth-i)&&(s.right=!0),(h<n.top+i||h<i)&&(s.top=!0),(h+e.height>o-i||h+e.height>window.innerHeight-i)&&(s.bottom=!0),s}static checkPossibleAlignments(t,e,i,s){const n={top:!0,right:!0,bottom:!0,left:!0,spaceOnTop:null,spaceOnRight:null,spaceOnBottom:null,spaceOnLeft:null},o="visible"===getComputedStyle(e).overflow,a=e.getBoundingClientRect(),l=Math.min(a.height,window.innerHeight),r=Math.min(a.width,window.innerWidth),h=t.getBoundingClientRect(),d=e.scrollLeft,c=e.scrollTop,p=i.left-d,u=i.top-c,m=i.top+h.height-c;return n.spaceOnRight=o?window.innerWidth-(h.left+i.width):r-(p+i.width),n.spaceOnRight<0&&(n.left=!1),n.spaceOnLeft=o?h.right-i.width:p-i.width+h.width,n.spaceOnLeft<0&&(n.right=!1),n.spaceOnBottom=o?window.innerHeight-(h.top+i.height+s):l-(u+i.height+s),n.spaceOnBottom<0&&(n.top=!1),n.spaceOnTop=o?h.bottom-(i.height+s):m-(i.height-s),n.spaceOnTop<0&&(n.bottom=!1),n}static getIdFromTrigger(t){let e=t.dataset.target;return e||(e=t.getAttribute("href"),e?e.slice(1):"")}static getDocumentScrollTop(){return window.scrollY||document.documentElement.scrollTop||document.body.scrollTop||0}static getDocumentScrollLeft(){return window.scrollX||document.documentElement.scrollLeft||document.body.scrollLeft||0}static throttle(t,e,i={}){let s,n,o,a=null,l=0;const r=()=>{l=!1===i.leading?0:(new Date).getTime(),a=null,o=t.apply(s,n),s=n=null};return(...n)=>{const h=(new Date).getTime();l||!1!==i.leading||(l=h);const d=e-(h-l);return s=this,d<=0?(clearTimeout(a),a=null,l=h,o=t.apply(s,n),s=n=null):a||!1===i.trailing||(a=setTimeout(r,d)),o}}static createConfirmationContainer(t,e,i,s,n){const o=document.createElement("div");o.classList.add("confirmation-btns"),t.append(o),this.createButton(o,i,["btn-cancel"],!0,n),this.createButton(o,e,["btn-confirm"],!0,s)}static createButton(t,i,s=[],n=!0,o=null){s=s.concat(["btn","waves-effect","text"]);const a=document.createElement("button");a.className=s.join(" "),a.style.visibility=n?"visible":"hidden",a.type="button",a.tabIndex=n?0:-1,a.innerText=i,a.addEventListener("click",o),a.addEventListener("keypress",(t=>{e.keys.ENTER.includes(t.key)&&o(t)})),t.append(a)}}class i{el;options;constructor(t,e,i){t instanceof HTMLElement||console.error(Error(t+" is not an HTML Element"));const s=i.getInstance(t);s&&s.destroy(),this.el=t}static init(t,e,i){let s=null;if(t instanceof Element)s=new i(t,e);else if(t&&t.length){s=[];for(let n=0;n<t.length;n++)s.push(new i(t[n],e))}return s}static get defaults(){return{}}static getInstance(t){throw new Error("This method must be implemented.")}destroy(){throw new Error("This method must be implemented.")}}const s={alignment:"left",autoFocus:!0,constrainWidth:!0,container:null,coverTrigger:!0,closeOnClick:!0,hover:!1,inDuration:150,outDuration:250,onOpenStart:null,onOpenEnd:null,onCloseStart:null,onCloseEnd:null,onItemClick:null};class n extends i{static _dropdowns=[];id;dropdownEl;isOpen;isScrollable;isTouchMoving;focusedIndex;filterQuery;filterTimeout;constructor(t,i){super(t,i,n),this.el.M_Dropdown=this,n._dropdowns.push(this),this.id=e.getIdFromTrigger(t),this.dropdownEl=document.getElementById(this.id),this.options={...n.defaults,...i},this.isOpen=!1,this.isScrollable=!1,this.isTouchMoving=!1,this.focusedIndex=-1,this.filterQuery=[],this.el.ariaExpanded="false",this._moveDropdown(),this._makeDropdownFocusable(),this._setupEventHandlers()}static get defaults(){return s}static init(t,e={}){return super.init(t,e,n)}static getInstance(t){return t.M_Dropdown}destroy(){this._resetDropdownStyles(),this._removeEventHandlers(),n._dropdowns.splice(n._dropdowns.indexOf(this),1),this.el.M_Dropdown=void 0}_setupEventHandlers(){this.el.addEventListener("keydown",this._handleTriggerKeydown),this.dropdownEl?.addEventListener("click",this._handleDropdownClick),this.options.hover?(this.el.addEventListener("mouseenter",this._handleMouseEnter),this.el.addEventListener("mouseleave",this._handleMouseLeave),this.dropdownEl.addEventListener("mouseleave",this._handleMouseLeave)):this.el.addEventListener("click",this._handleClick)}_removeEventHandlers(){this.el.removeEventListener("keydown",this._handleTriggerKeydown),this.dropdownEl.removeEventListener("click",this._handleDropdownClick),this.options.hover?(this.el.removeEventListener("mouseenter",this._handleMouseEnter),this.el.removeEventListener("mouseleave",this._handleMouseLeave),this.dropdownEl.removeEventListener("mouseleave",this._handleMouseLeave)):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=t=>{t.preventDefault(),this._moveDropdown(t.target.closest("li")),this.isOpen?this.close():this.open()};_handleMouseEnter=t=>{this._moveDropdown(t.target.closest("li")),this.open()};_handleMouseLeave=t=>{const e=t.relatedTarget,i=!!e.closest(".dropdown-content");let s=!1;const n=e.closest(".dropdown-trigger");n&&n.M_Dropdown&&n.M_Dropdown.isOpen&&(s=!0),s||i||this.close()};_handleDocumentClick=t=>{const e=t.target;this.options.closeOnClick&&e.closest(".dropdown-content")&&!this.isTouchMoving?this.close():e.closest(".dropdown-content")||setTimeout((()=>{this.isOpen&&this.close()}),0),this.isTouchMoving=!1};_handleTriggerKeydown=t=>{(e.keys.ARROW_DOWN.includes(t.key)||e.keys.ENTER.includes(t.key))&&!this.isOpen&&(t.preventDefault(),this.open())};_handleDocumentTouchmove=t=>{t.target.closest(".dropdown-content")&&(this.isTouchMoving=!0)};_handleDropdownClick=t=>{if("function"==typeof this.options.onItemClick){const e=t.target.closest("li");this.options.onItemClick.call(this,e)}};_handleDropdownKeydown=t=>{const i=e.keys.ARROW_DOWN.includes(t.key)||e.keys.ARROW_UP.includes(t.key);if(e.keys.TAB.includes(t.key))t.preventDefault(),this.close();else if(i&&this.isOpen){t.preventDefault();const i=e.keys.ARROW_DOWN.includes(t.key)?1:-1;let s=this.focusedIndex,n=!1;do{if(s+=i,this.dropdownEl.children[s]&&-1!==this.dropdownEl.children[s].tabIndex){n=!0;break}}while(s<this.dropdownEl.children.length&&s>=0);n&&(this.focusedIndex>=0&&this.dropdownEl.children[this.focusedIndex].classList.remove("active"),this.focusedIndex=s,this._focusFocusedItem())}else if(e.keys.ENTER.includes(t.key)&&this.isOpen){const t=this.dropdownEl.children[this.focusedIndex],e=t.querySelector("a, button");e?e.click():t&&t instanceof HTMLElement&&t.click()}else e.keys.ESC.includes(t.key)&&this.isOpen&&(t.preventDefault(),this.close());const s=t.key.toLowerCase(),n=/[a-zA-Z0-9-_]/.test(s),o=[...e.keys.ARROW_DOWN,...e.keys.ARROW_UP,...e.keys.ENTER,...e.keys.ESC,...e.keys.TAB];if(n&&!o.includes(t.key)){this.filterQuery.push(s);const t=this.filterQuery.join(""),e=Array.from(this.dropdownEl.querySelectorAll("li")).find((e=>0===e.innerText.toLowerCase().indexOf(t)));e&&(this.focusedIndex=[...e.parentNode.children].indexOf(e),this._focusFocusedItem())}this.filterTimeout=setTimeout(this._resetFilterQuery,1e3)};_handleWindowResize=()=>{this.el.offsetParent&&this.recalculateDimensions()};_resetFilterQuery=()=>{this.filterQuery=[]};_resetDropdownStyles(){this.dropdownEl.style.display="",this._resetDropdownPositioningStyles(),this.dropdownEl.style.transform="",this.dropdownEl.style.opacity=""}_resetDropdownPositioningStyles(){this.dropdownEl.style.width="",this.dropdownEl.style.height="",this.dropdownEl.style.left="",this.dropdownEl.style.top="",this.dropdownEl.style.transformOrigin=""}_moveDropdown(t=null){this.options.container?this.options.container.append(this.dropdownEl):t?t.contains(this.dropdownEl)||t.append(this.dropdownEl):this.el.after(this.dropdownEl)}_makeDropdownFocusable(){this.dropdownEl&&(this.dropdownEl.popover="",this.dropdownEl.tabIndex=0,Array.from(this.dropdownEl.children).forEach((t=>{t.getAttribute("tabindex")||t.setAttribute("tabindex","0")})))}_focusFocusedItem(){this.focusedIndex>=0&&this.focusedIndex<this.dropdownEl.children.length&&this.options.autoFocus&&(this.dropdownEl.children[this.focusedIndex].focus({preventScroll:!0}),this.dropdownEl.children[this.focusedIndex].scrollIntoView({behavior:"smooth",block:"nearest",inline:"nearest"}))}_getDropdownPosition(t){const i=this.el.getBoundingClientRect(),s=this.dropdownEl.getBoundingClientRect();let n=s.height,o=s.width,a=i.left-s.left,l=i.top-s.top;const r={left:a,top:l,height:n,width:o},h=e.checkPossibleAlignments(this.el,t,r,this.options.coverTrigger?0:i.height);let d="top",c=this.options.alignment;if(l+=this.options.coverTrigger?0:i.height,this.isScrollable=!1,h.top||(h.bottom?(d="bottom",this.options.coverTrigger||(l-=i.height)):(this.isScrollable=!0,n-=20,h.spaceOnTop>h.spaceOnBottom?(d="bottom",n+=h.spaceOnTop,l-=this.options.coverTrigger?h.spaceOnTop-20:h.spaceOnTop-20+i.height):n+=h.spaceOnBottom)),!h[c]){const t="left"===c?"right":"left";h[t]?c=t:h.spaceOnLeft>h.spaceOnRight?(c="right",o+=h.spaceOnLeft,a-=h.spaceOnLeft):(c="left",o+=h.spaceOnRight)}return"bottom"===d&&(l=l-s.height+(this.options.coverTrigger?i.height:0)),"right"===c&&(a=a-s.width+i.width),{x:a,y:l,verticalAlignment:d,horizontalAlignment:c,height:n,width:o}}_animateIn(){const t=this.options.inDuration;this.dropdownEl.style.transition="none",this.dropdownEl.style.opacity="0",this.dropdownEl.style.transform="scale(0.3, 0.3)",setTimeout((()=>{this.dropdownEl.style.transition=`opacity ${t}ms ease, transform ${t}ms ease`,this.dropdownEl.style.opacity="1",this.dropdownEl.style.transform="scale(1, 1)"}),1),setTimeout((()=>{this.options.autoFocus&&this.dropdownEl.focus(),"function"==typeof this.options.onOpenEnd&&this.options.onOpenEnd.call(this,this.el)}),t)}_animateOut(){const t=this.options.outDuration;this.dropdownEl.style.transition=`opacity ${t}ms ease, transform ${t}ms ease`,this.dropdownEl.style.opacity="0",this.dropdownEl.style.transform="scale(0.3, 0.3)",setTimeout((()=>{this._resetDropdownStyles(),"function"==typeof this.options.onCloseEnd&&this.options.onCloseEnd.call(this,this.el)}),t)}_getClosestAncestor(t,e){let i=t.parentNode;for(;null!==i&&i!==document;){if(e(i))return i;i=i.parentElement}return null}_placeDropdown(){let t=this._getClosestAncestor(this.dropdownEl,(t=>!["HTML","BODY"].includes(t.tagName)&&"visible"!==getComputedStyle(t).overflow));t||(t=this.dropdownEl.offsetParent?this.dropdownEl.offsetParent:this.dropdownEl.parentNode),"static"===getComputedStyle(t).position&&(t.style.position="relative"),this._moveDropdown(t);const e=this.options.constrainWidth?this.el.getBoundingClientRect().width:this.dropdownEl.getBoundingClientRect().width;this.dropdownEl.style.width=e+"px";const i=this._getDropdownPosition(t);this.dropdownEl.style.left=i.x+"px",this.dropdownEl.style.top=i.y+"px",this.dropdownEl.style.height=i.height+"px",this.dropdownEl.style.width=i.width+"px",this.dropdownEl.style.transformOrigin=`${"left"===i.horizontalAlignment?"0":"100%"} ${"top"===i.verticalAlignment?"0":"100%"}`}open=()=>{this.isOpen||(this.isOpen=!0,"function"==typeof this.options.onOpenStart&&this.options.onOpenStart.call(this,this.el),this._resetDropdownStyles(),this.dropdownEl.style.display="block",this._placeDropdown(),this._animateIn(),setTimeout((()=>this._setupTemporaryEventHandlers()),0),this.el.ariaExpanded="true")};close=()=>{this.isOpen&&(this.isOpen=!1,this.focusedIndex=-1,"function"==typeof this.options.onCloseStart&&this.options.onCloseStart.call(this,this.el),this._animateOut(),this._removeTemporaryEventHandlers(),this.options.autoFocus&&this.el.focus(),this.el.ariaExpanded="false")};recalculateDimensions=()=>{this.isOpen&&(this._resetDropdownPositioningStyles(),this._placeDropdown())}}const o={data:[],onAutocomplete:null,dropdownOptions:{autoFocus:!1,closeOnClick:!1,coverTrigger:!1},minLength:1,isMultiSelect:!1,onSearch:(t,e)=>{const i=t.toLocaleLowerCase();e.setMenuItems(e.options.data.filter((t=>t.id.toString().toLocaleLowerCase().includes(i)||t.text?.toLocaleLowerCase().includes(i))))},maxDropDownHeight:"300px",allowUnsafeHTML:!1};class a extends i{isOpen;count;activeIndex;oldVal;$active;_mousedown;container;dropdown;static _keydown;selectedValues;menuItems;constructor(t,e){super(t,e,a),this.el.M_Autocomplete=this,this.options={...a.defaults,...e},this.isOpen=!1,this.count=0,this.activeIndex=-1,this.oldVal="",this.selectedValues=[],this.menuItems=this.options.data||[],this.$active=null,this._mousedown=!1,this._setupDropdown(),this._setupEventHandlers()}static get defaults(){return o}static init(t,e={}){return super.init(t,e,a)}static getInstance(t){return t.M_Autocomplete}destroy(){this._removeEventHandlers(),this._removeDropdown(),this.el.M_Autocomplete=void 0}_setupEventHandlers(){this.el.addEventListener("blur",this._handleInputBlur),this.el.addEventListener("keyup",this._handleInputKeyup),this.el.addEventListener("focus",this._handleInputFocus),this.el.addEventListener("keydown",this._handleInputKeydown),this.el.addEventListener("click",this._handleInputClick),this.container.addEventListener("mousedown",this._handleContainerMousedownAndTouchstart),this.container.addEventListener("mouseup",this._handleContainerMouseupAndTouchend),void 0!==window.ontouchstart&&(this.container.addEventListener("touchstart",this._handleContainerMousedownAndTouchstart),this.container.addEventListener("touchend",this._handleContainerMouseupAndTouchend))}_removeEventHandlers(){this.el.removeEventListener("blur",this._handleInputBlur),this.el.removeEventListener("keyup",this._handleInputKeyup),this.el.removeEventListener("focus",this._handleInputFocus),this.el.removeEventListener("keydown",this._handleInputKeydown),this.el.removeEventListener("click",this._handleInputClick),this.container.removeEventListener("mousedown",this._handleContainerMousedownAndTouchstart),this.container.removeEventListener("mouseup",this._handleContainerMouseupAndTouchend),void 0!==window.ontouchstart&&(this.container.removeEventListener("touchstart",this._handleContainerMousedownAndTouchstart),this.container.removeEventListener("touchend",this._handleContainerMouseupAndTouchend))}_setupDropdown(){this.container=document.createElement("ul"),this.container.style.maxHeight=this.options.maxDropDownHeight,this.container.id=`autocomplete-options-${e.guid()}`,this.container.classList.add("autocomplete-content","dropdown-content"),this.el.setAttribute("data-target",this.container.id),this.menuItems.forEach((t=>{const e=this._createDropdownItem(t);this.container.append(e)})),this.el.parentElement.appendChild(this.container);const t={...a.defaults.dropdownOptions,...this.options.dropdownOptions},i=t.onItemClick;t.onItemClick=t=>{if(!t)return;const e=t.getAttribute("data-id");this.selectOption(e),i&&"function"==typeof i&&i.call(this.dropdown,this.el)},this.dropdown=n.init(this.el,t);const s=this.el.parentElement.querySelector("label");s&&this.el.after(s),this.el.removeEventListener("click",this.dropdown._handleClick),this.el.value&&this.selectOption(this.el.value);const o=document.createElement("div");o.classList.add("status-info"),o.setAttribute("style","position: absolute;right:0;top:0;"),this.el.parentElement.appendChild(o),this._updateSelectedInfo()}_removeDropdown(){this.container.parentNode.removeChild(this.container)}_handleInputBlur=()=>{this._mousedown||(this.close(),this._resetAutocomplete())};_handleInputKeyup=t=>{"keyup"===t.type&&(a._keydown=!1),this.count=0;const i=this.el.value.toLocaleLowerCase();e.keys.ENTER.includes(t.key)||e.keys.ARROW_UP.includes(t.key)||e.keys.ARROW_DOWN.includes(t.key)||(this.oldVal!==i&&e.tabPressed&&this.open(),this._inputChangeDetection(i))};_handleInputFocus=()=>{this.count=0;const t=this.el.value.toLocaleLowerCase();this._inputChangeDetection(t)};_inputChangeDetection=t=>{this.oldVal!==t&&(this._setStatusLoading(),this.options.onSearch(this.el.value,this)),this.options.isMultiSelect||0!==this.el.value.length||(this.selectedValues=[],this._triggerChanged()),this.oldVal=t};_handleInputKeydown=t=>{a._keydown=!0;const i=this.container.querySelectorAll("li").length;if(e.keys.ENTER.includes(t.key)&&this.activeIndex>=0){const e=this.container.querySelectorAll("li")[this.activeIndex];e&&(this.selectOption(e.getAttribute("data-id")),t.preventDefault())}else(e.keys.ARROW_UP.includes(t.key)||e.keys.ARROW_DOWN.includes(t.key))&&(t.preventDefault(),e.keys.ARROW_UP.includes(t.key)&&this.activeIndex>0&&this.activeIndex--,e.keys.ARROW_DOWN.includes(t.key)&&this.activeIndex<i-1&&this.activeIndex++,this.$active?.classList.remove("active"),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        <div class="item-selection" style="text-align:center;">\n        <input type="checkbox"${this.selectedValues.some((e=>e.id===t.id))?' checked="checked"':""}><span style="padding-left:21px;"></span>\n      </div>`),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]+'<span class="highlight">'+s[1]+"</span>"+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<this.menuItems.length;t++){const e=this._createDropdownItem(this.menuItems[t]);this.container.append(e)}}_setStatusLoading(){this.el.parentElement.querySelector(".status-info").innerHTML='<div style="height:100%;width:50px;"><svg version="1.1" id="L4" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 0 0" xml:space="preserve">\n    <circle fill="#888c" stroke="none" cx="6" cy="50" r="6"><animate attributeName="opacity" dur="1s" values="0;1;0" repeatCount="indefinite" begin="0.1"/></circle>\n    <circle fill="#888c" stroke="none" cx="26" cy="50" r="6"><animate attributeName="opacity" dur="1s" values="0;1;0" repeatCount="indefinite" begin="0.2"/></circle>\n    <circle fill="#888c" stroke="none" cx="46" cy="50" r="6"><animate attributeName="opacity" dur="1s" values="0;1;0" repeatCount="indefinite"  begin="0.3"/></circle>\n  </svg></div>'}_updateSelectedInfo(){const t=this.el.parentElement.querySelector(".status-info");t&&(this.options.isMultiSelect?t.innerHTML=this.selectedValues.length.toString():t.innerHTML="")}_refreshInputText(){if(1===this.selectedValues.length){const t=this.selectedValues[0];this.el.value=t.text||t.id}}_triggerChanged(){this.el.dispatchEvent(new Event("change")),"function"==typeof this.options.onAutocomplete&&this.options.onAutocomplete.call(this,this.selectedValues)}open=()=>{const t=this.el.value.toLocaleLowerCase();this._resetAutocomplete(),t.length>=this.options.minLength&&(this.isOpen=!0,this._renderDropdown()),this.dropdown.isOpen?this.dropdown.recalculateDimensions():setTimeout((()=>{this.dropdown.open()}),0)};close=()=>{this.dropdown.close()};setMenuItems(t){this.menuItems=t,this.open(),this._updateSelectedInfo()}setValues(t){this.selectedValues=t,this._updateSelectedInfo(),this.options.isMultiSelect||this._refreshInputText(),this._triggerChanged()}selectOption(t){const e=this.menuItems.find((e=>e.id==t));if(!e)return;const i=this.container.querySelector('li[data-id="'+t+'"]');if(i){if(this.options.isMultiSelect){const t=i.querySelector('input[type="checkbox"]');t.checked=!t.checked,t.checked?this.selectedValues.push(e):this.selectedValues=this.selectedValues.filter((t=>t.id!==e.id)),this.el.focus()}else this.selectedValues=[e],this._refreshInputText(),this._resetAutocomplete(),this.close();this._updateSelectedInfo(),this._triggerChanged()}}}const l={direction:"top",hoverEnabled:!0,toolbarEnabled:!1};class r extends i{isOpen;_anchor;_menu;_floatingBtns;_floatingBtnsReverse;offsetY;offsetX;btnBottom;btnLeft;btnWidth;constructor(t,e){super(t,e,r),this.el.M_FloatingActionButton=this,this.options={...r.defaults,...e},this.isOpen=!1,this._anchor=this.el.querySelector("a"),this._menu=this.el.querySelector("ul"),this._floatingBtns=Array.from(this.el.querySelectorAll("ul .btn-floating")),this._floatingBtnsReverse=this._floatingBtns.reverse(),this.offsetY=0,this.offsetX=0,this.el.classList.add(`direction-${this.options.direction}`),"top"===this.options.direction?this.offsetY=40:"right"===this.options.direction?this.offsetX=-40:"bottom"===this.options.direction?this.offsetY=-40:this.offsetX=40,this._setupEventHandlers()}static get defaults(){return l}static init(t,e={}){return super.init(t,e,r)}static getInstance(t){return t.M_FloatingActionButton}destroy(){this._removeEventHandlers(),this.el.M_FloatingActionButton=void 0}_setupEventHandlers(){this.options.hoverEnabled&&!this.options.toolbarEnabled?(this.el.addEventListener("mouseenter",this.open),this.el.addEventListener("mouseleave",this.close)):this.el.addEventListener("click",this._handleFABClick)}_removeEventHandlers(){this.options.hoverEnabled&&!this.options.toolbarEnabled?(this.el.removeEventListener("mouseenter",this.open),this.el.removeEventListener("mouseleave",this.close)):this.el.removeEventListener("click",this._handleFABClick)}_handleFABClick=()=>{this.isOpen?this.close():this.open()};_handleDocumentClick=t=>{t.target!==this._menu&&this.close()};open=()=>{this.isOpen||(this.options.toolbarEnabled?this._animateInToolbar():this._animateInFAB(),this.isOpen=!0)};close=()=>{this.isOpen&&(this.options.toolbarEnabled?(window.removeEventListener("scroll",this.close,!0),document.body.removeEventListener("click",this._handleDocumentClick,!0)):this._animateOutFAB(),this.isOpen=!1)};_animateInFAB(){this.el.classList.add("active");this._floatingBtnsReverse.forEach(((t,e)=>{const i=40*e;t.style.transition="none",t.style.opacity="0",t.style.transform=`translate(${this.offsetX}px, ${this.offsetY}px) scale(0.4)`,setTimeout((()=>{t.style.opacity="0.4",setTimeout((()=>{t.style.transition="opacity 275ms ease, transform 275ms ease",t.style.opacity="1",t.style.transform="translate(0, 0) scale(1)"}),1)}),i)}))}_animateOutFAB(){setTimeout((()=>this.el.classList.remove("active")),175),this._floatingBtnsReverse.forEach((t=>{t.style.transition="opacity 175ms ease, transform 175ms ease",t.style.opacity="0",t.style.transform=`translate(${this.offsetX}px, ${this.offsetY}px) scale(0.4)`}))}_animateInToolbar(){const t=window.innerWidth,e=window.innerHeight,i=this.el.getBoundingClientRect(),s=document.createElement("div"),n=t/s[0].clientWidth,o=getComputedStyle(this._anchor).backgroundColor;s.classList.add("fab-backdrop"),s.style.backgroundColor=o,this._anchor.append(s),this.offsetX=i.left-t/2+i.width/2,this.offsetY=e-i.bottom,this.btnBottom=i.bottom,this.btnLeft=i.left,this.btnWidth=i.width,this.el.classList.add("active"),this.el.style.textAlign="center",this.el.style.width="100%",this.el.style.bottom="0",this.el.style.left="0",this.el.style.transform="translateX("+this.offsetX+"px)",this.el.style.transition="none",this._anchor.style.transform=`translateY(${this.offsetY}px`,this._anchor.style.transition="none",setTimeout((()=>{this.el.style.transform="",this.el.style.transition="transform .2s cubic-bezier(0.550, 0.085, 0.680, 0.530), background-color 0s linear .2s",this._anchor.style.overflow="visible",this._anchor.style.transform="",this._anchor.style.transition="transform .2s",setTimeout((()=>{this.el.style.overflow="hidden",this.el.style.backgroundColor=o,s.style.transform="scale("+n+")",s.style.transition="transform .2s cubic-bezier(0.550, 0.055, 0.675, 0.190)",this._menu.querySelectorAll("li > a").forEach((t=>t.style.opacity="1")),window.addEventListener("scroll",this.close,!0),document.body.addEventListener("click",this._handleDocumentClick,!0)}),100)}),0)}}const h={onOpen:null,onClose:null,inDuration:225,outDuration:300};class d extends i{isOpen=!1;cardReveal;initialOverflow;_activators;cardRevealClose;constructor(t,e){super(t,e,d),this.el.M_Cards=this,this.options={...d.defaults,...e},this.cardReveal=this.el.querySelector(".card-reveal"),this.cardReveal&&(this.initialOverflow=getComputedStyle(this.el).overflow,this._activators=Array.from(this.el.querySelectorAll(".activator")),this._activators.forEach((t=>{t&&(t.tabIndex=0)})),this.cardRevealClose=this.cardReveal?.querySelector(".card-title"),this.cardRevealClose&&(this.cardRevealClose.tabIndex=-1),this.cardReveal.ariaExpanded="false",this._setupEventHandlers())}static get defaults(){return h}static init(t,e){return super.init(t,e,d)}static getInstance(t){return t.M_Cards}destroy(){this._removeEventHandlers(),this._activators=[]}_setupEventHandlers=()=>{this._activators.forEach((t=>{t.addEventListener("click",this._handleClickInteraction),t.addEventListener("keypress",this._handleKeypressEvent)}))};_removeEventHandlers=()=>{this._activators.forEach((t=>{t.removeEventListener("click",this._handleClickInteraction),t.removeEventListener("keypress",this._handleKeypressEvent)}))};_handleClickInteraction=()=>{this._handleRevealEvent()};_handleKeypressEvent=t=>{e.keys.ENTER.includes(t.key)&&this._handleRevealEvent()};_handleRevealEvent=()=>{this._activators.forEach((t=>t.tabIndex=-1)),this.open()};_setupRevealCloseEventHandlers=()=>{this.cardRevealClose.addEventListener("click",this.close),this.cardRevealClose.addEventListener("keypress",this._handleKeypressCloseEvent)};_removeRevealCloseEventHandlers=()=>{this.cardRevealClose.addEventListener("click",this.close),this.cardRevealClose.addEventListener("keypress",this._handleKeypressCloseEvent)};_handleKeypressCloseEvent=t=>{e.keys.ENTER.includes(t.key)&&this.close()};open=()=>{this.isOpen||(this.isOpen=!0,this.el.style.overflow="hidden",this.cardReveal.style.display="block",this.cardReveal.ariaExpanded="true",this.cardRevealClose.tabIndex=0,setTimeout((()=>{this.cardReveal.style.transition=`transform ${this.options.outDuration}ms ease`,this.cardReveal.style.transform="translateY(-100%)"}),1),"function"==typeof this.options.onOpen&&this.options.onOpen.call(this),this._setupRevealCloseEventHandlers())};close=()=>{this.isOpen&&(this.isOpen=!1,this.cardReveal.style.transition=`transform ${this.options.inDuration}ms ease`,this.cardReveal.style.transform="translateY(0)",setTimeout((()=>{this.cardReveal.style.display="none",this.cardReveal.ariaExpanded="false",this._activators.forEach((t=>t.tabIndex=0)),this.cardRevealClose.tabIndex=-1,this.el.style.overflow=this.initialOverflow}),this.options.inDuration),"function"==typeof this.options.onClose&&this.options.onClose.call(this),this._removeRevealCloseEventHandlers())}}const c={duration:200,dist:-100,shift:0,padding:0,numVisible:5,fullWidth:!1,indicators:!1,noWrap:!1,onCycleTo:null};class p extends i{hasMultipleSlides;showIndicators;noWrap;pressed;dragged;offset;target;images;itemWidth;itemHeight;dim;_indicators;count;xform;verticalDragged;reference;referenceY;velocity;frame;timestamp;ticker;amplitude;center=0;imageHeight;scrollingTimeout;oneTimeCallback;constructor(t,e){super(t,e,p),this.el.M_Carousel=this,this.options={...p.defaults,...e},this.hasMultipleSlides=this.el.querySelectorAll(".carousel-item").length>1,this.showIndicators=this.options.indicators&&this.hasMultipleSlides,this.noWrap=this.options.noWrap||!this.hasMultipleSlides,this.pressed=!1,this.dragged=!1,this.offset=this.target=0,this.images=[],this.itemWidth=this.el.querySelector(".carousel-item").clientWidth,this.itemHeight=this.el.querySelector(".carousel-item").clientHeight,this.dim=2*this.itemWidth+this.options.padding||1,this.options.fullWidth&&(this.options.dist=0,this._setCarouselHeight(),this.showIndicators&&this.el.querySelector(".carousel-fixed-item")?.classList.add("with-indicators")),this._indicators=document.createElement("ul"),this._indicators.classList.add("indicators"),this.el.querySelectorAll(".carousel-item").forEach(((t,e)=>{if(this.images.push(t),this.showIndicators){const t=document.createElement("li");t.classList.add("indicator-item"),t.tabIndex=0,0===e&&t.classList.add("active"),this._indicators.appendChild(t)}})),this.showIndicators&&this.el.appendChild(this._indicators),this.count=this.images.length,this.options.numVisible=Math.min(this.count,this.options.numVisible),this.xform="transform",["webkit","Moz","O","ms"].every((t=>{const e=t+"Transform";return void 0===document.body.style[e]||(this.xform=e,!1)})),this._setupEventHandlers(),this._scroll(this.offset)}static get defaults(){return c}static init(t,e={}){return super.init(t,e,p)}static getInstance(t){return t.M_Carousel}destroy(){this._removeEventHandlers(),this.el.M_Carousel=void 0}_setupEventHandlers(){void 0!==window.ontouchstart&&(this.el.addEventListener("touchstart",this._handleCarouselTap),this.el.addEventListener("touchmove",this._handleCarouselDrag),this.el.addEventListener("touchend",this._handleCarouselRelease)),this.el.addEventListener("mousedown",this._handleCarouselTap),this.el.addEventListener("mousemove",this._handleCarouselDrag),this.el.addEventListener("mouseup",this._handleCarouselRelease),this.el.addEventListener("mouseleave",this._handleCarouselRelease),this.el.addEventListener("click",this._handleCarouselClick),this.showIndicators&&this._indicators&&this._indicators.querySelectorAll(".indicator-item").forEach((t=>{t.addEventListener("click",this._handleIndicatorClick),t.addEventListener("keypress",this._handleIndicatorKeyPress)})),window.addEventListener("resize",this._handleThrottledResize)}_removeEventHandlers(){void 0!==window.ontouchstart&&(this.el.removeEventListener("touchstart",this._handleCarouselTap),this.el.removeEventListener("touchmove",this._handleCarouselDrag),this.el.removeEventListener("touchend",this._handleCarouselRelease)),this.el.removeEventListener("mousedown",this._handleCarouselTap),this.el.removeEventListener("mousemove",this._handleCarouselDrag),this.el.removeEventListener("mouseup",this._handleCarouselRelease),this.el.removeEventListener("mouseleave",this._handleCarouselRelease),this.el.removeEventListener("click",this._handleCarouselClick),this.showIndicators&&this._indicators&&this._indicators.querySelectorAll(".indicator-item").forEach((t=>{t.removeEventListener("click",this._handleIndicatorClick)})),window.removeEventListener("resize",this._handleThrottledResize)}_handleThrottledResize=e.throttle((function(){this._handleResize()}),200,null).bind(this);_handleCarouselTap=t=>{"mousedown"===t.type&&"IMG"===t.target.tagName&&t.preventDefault(),this.pressed=!0,this.dragged=!1,this.verticalDragged=!1,this.reference=this._xpos(t),this.referenceY=this._ypos(t),this.velocity=this.amplitude=0,this.frame=this.offset,this.timestamp=Date.now(),clearInterval(this.ticker),this.ticker=setInterval(this._track,100)};_handleCarouselDrag=t=>{let e,i,s,n;if(this.pressed)if(e=this._xpos(t),i=this._ypos(t),s=this.reference-e,n=Math.abs(this.referenceY-i),n<30&&!this.verticalDragged)(s>2||s<-2)&&(this.dragged=!0,this.reference=e,this._scroll(this.offset+s));else{if(this.dragged)return t.preventDefault(),t.stopPropagation(),!1;this.verticalDragged=!0}if(this.dragged)return t.preventDefault(),t.stopPropagation(),!1};_handleCarouselRelease=t=>{if(this.pressed)return this.pressed=!1,clearInterval(this.ticker),this.target=this.offset,(this.velocity>10||this.velocity<-10)&&(this.amplitude=.9*this.velocity,this.target=this.offset+this.amplitude),this.target=Math.round(this.target/this.dim)*this.dim,this.noWrap&&(this.target>=this.dim*(this.count-1)?this.target=this.dim*(this.count-1):this.target<0&&(this.target=0)),this.amplitude=this.target-this.offset,this.timestamp=Date.now(),requestAnimationFrame(this._autoScroll),this.dragged&&(t.preventDefault(),t.stopPropagation()),!1};_handleCarouselClick=t=>{if(this.dragged)return t.preventDefault(),t.stopPropagation(),!1;if(!this.options.fullWidth){const e=t.target.closest(".carousel-item");if(!e)return;const i=[...e.parentNode.children].indexOf(e);0!==this._wrap(this.center)-i&&(t.preventDefault(),t.stopPropagation()),i<0?t.clientX-t.target.getBoundingClientRect().left>this.el.clientWidth/2?this.next():this.prev():this._cycleTo(i)}};_handleIndicatorClick=t=>{t.stopPropagation(),this._handleIndicatorInteraction(t)};_handleIndicatorKeyPress=t=>{t.stopPropagation(),e.keys.ENTER.includes(t.key)&&this._handleIndicatorInteraction(t)};_handleIndicatorInteraction=t=>{const e=t.target.closest(".indicator-item");if(e){const t=[...e.parentNode.children].indexOf(e);this._cycleTo(t)}};_handleResize=()=>{this.options.fullWidth?(this.itemWidth=this.el.querySelector(".carousel-item").clientWidth,this.imageHeight=this.el.querySelector(".carousel-item.active").clientHeight,this.dim=2*this.itemWidth+this.options.padding,this.offset=2*this.center*this.itemWidth,this.target=this.offset,this._setCarouselHeight(!0)):this._scroll()};_setCarouselHeight(t=!1){const e=this.el.querySelector(".carousel-item.active")?this.el.querySelector(".carousel-item.active"):this.el.querySelector(".carousel-item"),i=e.querySelector("img");if(i)if(i.complete){const t=i.clientHeight;if(t>0)this.el.style.height=t+"px";else{const t=i.naturalWidth,e=i.naturalHeight,s=this.el.clientWidth/t*e;this.el.style.height=s+"px"}}else i.addEventListener("load",(()=>{this.el.style.height=i.offsetHeight+"px"}));else if(!t){const t=e.clientHeight;this.el.style.height=t+"px"}}_xpos(t){return t.type.startsWith("touch")&&t.targetTouches.length>=1?t.targetTouches[0].clientX:t.clientX}_ypos(t){return t.type.startsWith("touch")&&t.targetTouches.length>=1?t.targetTouches[0].clientY:t.clientY}_wrap(t){return t>=this.count?t%this.count:t<0?this._wrap(this.count+t%this.count):t}_track=()=>{const t=Date.now(),e=t-this.timestamp,i=1e3*(this.offset-this.frame)/(1+e);this.timestamp=t,this.frame=this.offset,this.velocity=.8*i+.2*this.velocity};_autoScroll=()=>{let t,e;this.amplitude&&(t=Date.now()-this.timestamp,e=this.amplitude*Math.exp(-t/this.options.duration),e>2||e<-2?(this._scroll(this.target-e),requestAnimationFrame(this._autoScroll)):this._scroll(this.target))};_scroll(t=0){this.el.classList.contains("scrolling")||this.el.classList.add("scrolling"),null!=this.scrollingTimeout&&clearTimeout(this.scrollingTimeout),this.scrollingTimeout=setTimeout((()=>{this.el.classList.remove("scrolling")}),this.options.duration),this.offset="number"==typeof t?t:this.offset,this.center=Math.floor((this.offset+this.dim/2)/this.dim);const e=this.count>>1,i=this.offset-this.center*this.dim,s=i<0?1:-1,n=-s*i*2/this.dim;let o,a,l,r,h,d;const c=this.center,p=1/this.options.numVisible;if(this.options.fullWidth?(l="translateX(0)",d=1):(l="translateX("+(this.el.clientWidth-this.itemWidth)/2+"px) ",l+="translateY("+(this.el.clientHeight-this.itemHeight)/2+"px)",d=1-p*n),this.showIndicators){const t=this.center%this.count,e=this._indicators.querySelector(".indicator-item.active");if([...e.parentNode.children].indexOf(e)!==t){e.classList.remove("active");const i=t<0?this.count+t:t;this._indicators.querySelectorAll(".indicator-item")[i].classList.add("active")}}if(!this.noWrap||this.center>=0&&this.center<this.count){a=this.images[this._wrap(this.center)],a.classList.contains("active")||(this.el.querySelector(".carousel-item").classList.remove("active"),a.classList.add("active"));const t=`${l} translateX(${-i/2}px) translateX(${s*this.options.shift*n*o}px) translateZ(${this.options.dist*n}px)`;this._updateItemStyle(a,d,0,t)}for(o=1;o<=e;++o){if(this.options.fullWidth?(r=this.options.dist,h=o===e&&i<0?1-n:1):(r=this.options.dist*(2*o+n*s),h=1-p*(2*o+n*s)),!this.noWrap||this.center+o<this.count){a=this.images[this._wrap(this.center+o)];const t=`${l} translateX(${this.options.shift+(this.dim*o-i)/2}px) translateZ(${r}px)`;this._updateItemStyle(a,h,-o,t)}if(this.options.fullWidth?(r=this.options.dist,h=o===e&&i>0?1-n:1):(r=this.options.dist*(2*o-n*s),h=1-p*(2*o-n*s)),!this.noWrap||this.center-o>=0){a=this.images[this._wrap(this.center-o)];const t=`${l} translateX(${-this.options.shift+(-this.dim*o-i)/2}px) translateZ(${r}px)`;this._updateItemStyle(a,h,-o,t)}}if(!this.noWrap||this.center>=0&&this.center<this.count){a=this.images[this._wrap(this.center)];const t=`${l} translateX(${-i/2}px) translateX(${s*this.options.shift*n}px) translateZ(${this.options.dist*n}px)`;this._updateItemStyle(a,d,0,t)}const u=this.el.querySelectorAll(".carousel-item")[this._wrap(this.center)];c!==this.center&&"function"==typeof this.options.onCycleTo&&this.options.onCycleTo.call(this,u,this.dragged),"function"==typeof this.oneTimeCallback&&(this.oneTimeCallback.call(this,u,this.dragged),this.oneTimeCallback=null)}_updateItemStyle(t,e,i,s){t.style[this.xform]=s,t.style.zIndex=i.toString(),t.style.opacity=e.toString(),t.style.visibility="visible"}_cycleTo(t,e=null){let i=this.center%this.count-t;this.noWrap||(i<0?Math.abs(i+this.count)<Math.abs(i)&&(i+=this.count):i>0&&Math.abs(i-this.count)<i&&(i-=this.count)),this.target=this.dim*Math.round(this.offset/this.dim),i<0?this.target+=this.dim*Math.abs(i):i>0&&(this.target-=this.dim*i),"function"==typeof e&&(this.oneTimeCallback=e),this.offset!==this.target&&(this.amplitude=this.target-this.offset,this.timestamp=Date.now(),requestAnimationFrame(this._autoScroll))}next(t=1){(void 0===t||isNaN(t))&&(t=1);let e=this.center+t;if(e>=this.count||e<0){if(this.noWrap)return;e=this._wrap(e)}this._cycleTo(e)}prev(t=1){(void 0===t||isNaN(t))&&(t=1);let e=this.center-t;if(e>=this.count||e<0){if(this.noWrap)return;e=this._wrap(e)}this._cycleTo(e)}set(t,e){if((void 0===t||isNaN(t))&&(t=0),t>this.count||t<0){if(this.noWrap)return;t=this._wrap(t)}this._cycleTo(t,e)}}const u={data:[],placeholder:"",secondaryPlaceholder:"",closeIconClass:"material-icons",autocompleteOptions:{},autocompleteOnly:!1,limit:1/0,allowUserInput:!1,onChipAdd:null,onChipSelect:null,onChipDelete:null};function m(t){return[...t.parentNode.children].indexOf(t)}class v extends i{chipsData;hasAutocomplete;autocomplete;_input;_label;_chips;static _keydown;_selectedChip;constructor(t,e){super(t,e,v),this.el.M_Chips=this,this.options={...v.defaults,...e},this.el.classList.add("chips"),this.chipsData=[],this._chips=[],this.options.data.length&&(this.chipsData=this.options.data,this._renderChips()),this._setupLabel(),this.options.allowUserInput&&(this.el.classList.add("input-field"),this._setupInput(),this._setupEventHandlers(),this.el.append(this._input))}static get defaults(){return u}static init(t,e={}){return super.init(t,e,v)}static getInstance(t){return t.M_Chips}getData(){return this.chipsData}destroy(){this.options.allowUserInput&&this._removeEventHandlers(),this._chips.forEach((t=>t.remove())),this._chips=[],this.el.M_Chips=void 0}_setupEventHandlers(){this.el.addEventListener("click",this._handleChipClick),document.addEventListener("keydown",v._handleChipsKeydown),document.addEventListener("keyup",v._handleChipsKeyup),this.el.addEventListener("blur",v._handleChipsBlur,!0),this._input.addEventListener("focus",this._handleInputFocus),this._input.addEventListener("blur",this._handleInputBlur),this._input.addEventListener("keydown",this._handleInputKeydown)}_removeEventHandlers(){this.el.removeEventListener("click",this._handleChipClick),document.removeEventListener("keydown",v._handleChipsKeydown),document.removeEventListener("keyup",v._handleChipsKeyup),this.el.removeEventListener("blur",v._handleChipsBlur,!0),this._input.removeEventListener("focus",this._handleInputFocus),this._input.removeEventListener("blur",this._handleInputBlur),this._input.removeEventListener("keydown",this._handleInputKeydown)}_handleChipClick=t=>{const e=t.target.closest(".chip"),i=t.target.classList.contains("close");if(e){const t=[...e.parentNode.children].indexOf(e);i?(this.deleteChip(t),this._input.focus()):this.selectChip(t)}else this._input.focus()};static _handleChipsKeydown(t){v._keydown=!0;const i=t.target.closest(".chips"),s=t.target&&i,n=t.target.tagName;if("INPUT"===n||"TEXTAREA"===n||!s)return;const o=i.M_Chips;if(e.keys.BACKSPACE.includes(t.key)||e.keys.DELETE.includes(t.key)){t.preventDefault();let e=o.chipsData.length;if(o._selectedChip){const t=m(o._selectedChip);o.deleteChip(t),o._selectedChip=null,e=Math.max(t-1,0)}o.chipsData.length?o.selectChip(e):o._input.focus()}else if(e.keys.ARROW_LEFT.includes(t.key)){if(o._selectedChip){const t=m(o._selectedChip)-1;if(t<0)return;o.selectChip(t)}}else if(e.keys.ARROW_RIGHT.includes(t.key)&&o._selectedChip){const t=m(o._selectedChip)+1;t>=o.chipsData.length?o._input.focus():o.selectChip(t)}}static _handleChipsKeyup(){v._keydown=!1}static _handleChipsBlur(t){if(!v._keydown&&document.hidden){t.target.closest(".chips").M_Chips._selectedChip=null}}_handleInputFocus=()=>{this.el.classList.add("focus")};_handleInputBlur=()=>{this.el.classList.remove("focus")};_handleInputKeydown=t=>{if(v._keydown=!0,e.keys.ENTER.includes(t.key)){if(this.hasAutocomplete&&this.autocomplete&&this.autocomplete.isOpen)return;t.preventDefault(),(!this.hasAutocomplete||this.hasAutocomplete&&!this.options.autocompleteOnly)&&this.addChip({id:this._input.value}),this._input.value=""}else(e.keys.BACKSPACE.includes(t.key)||e.keys.ARROW_LEFT.includes(t.key))&&""===this._input.value&&this.chipsData.length&&(t.preventDefault(),this.selectChip(this.chipsData.length-1))};_renderChip(t){if(!t.id)return;const e=document.createElement("div");if(e.classList.add("chip"),e.innerText=t.text||t.id,t.image){const i=document.createElement("img");i.setAttribute("src",t.image),e.insertBefore(i,e.firstChild)}if(this.options.allowUserInput){e.setAttribute("tabindex","0");const t=document.createElement("i");t.classList.add(this.options.closeIconClass,"close"),t.innerText="close",e.appendChild(t)}return e}_renderChips(){this._chips=[];for(let t=0;t<this.chipsData.length;t++){const e=this._renderChip(this.chipsData[t]);this.el.appendChild(e),this._chips.push(e)}}_setupAutocomplete(){this.options.autocompleteOptions.onAutocomplete=t=>{t.length>0&&this.addChip({id:t[0].id,text:t[0].text,image:t[0].image}),this._input.value="",this._input.focus()},this.autocomplete=a.init(this._input,this.options.autocompleteOptions)}_setupInput(){this._input=this.el.querySelector("input"),this._input||(this._input=document.createElement("input"),this.el.append(this._input)),this._input.classList.add("input"),this.hasAutocomplete=Object.keys(this.options.autocompleteOptions).length>0,this.hasAutocomplete&&this._setupAutocomplete(),this._setPlaceholder(),this._input.getAttribute("id")||this._input.setAttribute("id",e.guid())}_setupLabel(){this._label=this.el.querySelector("label"),this._label&&this._label.setAttribute("for",this._input.getAttribute("id"))}_setPlaceholder(){void 0!==this.chipsData&&!this.chipsData.length&&this.options.placeholder?this._input.placeholder=this.options.placeholder:(void 0===this.chipsData||this.chipsData.length)&&this.options.secondaryPlaceholder&&(this._input.placeholder=this.options.secondaryPlaceholder)}_isValidAndNotExist(t){const e=!!t.id,i=!this.chipsData.some((e=>e.id==t.id));return e&&i}addChip(t){if(!this._isValidAndNotExist(t)||this.chipsData.length>=this.options.limit)return;const e=this._renderChip(t);this._chips.push(e),this.chipsData.push(t),this._input.before(e),this._setPlaceholder(),"function"==typeof this.options.onChipAdd&&this.options.onChipAdd(this.el,e)}deleteChip(t){const e=this._chips[t];this._chips[t].remove(),this._chips.splice(t,1),this.chipsData.splice(t,1),this._setPlaceholder(),"function"==typeof this.options.onChipDelete&&this.options.onChipDelete(this.el,e)}selectChip(t){const e=this._chips[t];this._selectedChip=e,e.focus(),"function"==typeof this.options.onChipSelect&&this.options.onChipSelect(this.el,e)}static Init(){"undefined"!=typeof document&&document.addEventListener("DOMContentLoaded",(()=>{document.querySelectorAll(".chips").forEach((t=>{t.addEventListener("click",(t=>{if(t.target.classList.contains("close")){const e=t.target.closest(".chip");e&&e.remove()}}))}))}))}static{v._keydown=!1}}const _={accordion:!0,onOpenStart:null,onOpenEnd:null,onCloseStart:null,onCloseEnd:null,inDuration:300,outDuration:300};class g extends i{_headers;constructor(t,e){super(t,e,g),this.el.M_Collapsible=this,this.options={...g.defaults,...e},this._headers=Array.from(this.el.querySelectorAll("li > .collapsible-header")),this._headers.forEach((t=>t.tabIndex=0)),this._setupEventHandlers();const i=Array.from(this.el.querySelectorAll("li.active > .collapsible-body"));this.options.accordion?i.length>0&&this._setExpanded(i[0]):i.forEach((t=>this._setExpanded(t)))}static get defaults(){return _}static init(t,e={}){return super.init(t,e,g)}static getInstance(t){return t.M_Collapsible}destroy(){this._removeEventHandlers(),this.el.M_Collapsible=void 0}_setupEventHandlers(){this.el.addEventListener("click",this._handleCollapsibleClick),this._headers.forEach((t=>t.addEventListener("keydown",this._handleCollapsibleKeydown)))}_removeEventHandlers(){this.el.removeEventListener("click",this._handleCollapsibleClick),this._headers.forEach((t=>t.removeEventListener("keydown",this._handleCollapsibleKeydown)))}_handleCollapsibleClick=t=>{const e=t.target.closest(".collapsible-header");if(t.target&&e){if(e.closest(".collapsible")!==this.el)return;const t=e.closest("li"),i=t.classList.contains("active"),s=[...t.parentNode.children].indexOf(t);i?this.close(s):this.open(s)}};_handleCollapsibleKeydown=t=>{e.keys.ENTER.includes(t.key)&&this._handleCollapsibleClick(t)};_setExpanded(t){t.style.maxHeight=t.scrollHeight+"px"}_animateIn(t){const e=this.el.children[t];if(!e)return;const i=e.querySelector(".collapsible-body"),s=this.options.inDuration;i.style.transition=`max-height ${s}ms ease-out`,this._setExpanded(i),setTimeout((()=>{"function"==typeof this.options.onOpenEnd&&this.options.onOpenEnd.call(this,e)}),s)}_animateOut(t){const e=this.el.children[t];if(!e)return;const i=e.querySelector(".collapsible-body"),s=this.options.outDuration;i.style.transition=`max-height ${s}ms ease-out`,i.style.maxHeight="0",setTimeout((()=>{"function"==typeof this.options.onCloseEnd&&this.options.onCloseEnd.call(this,e)}),s)}open=t=>{const e=Array.from(this.el.children).filter((t=>"LI"===t.tagName)),i=e[t];if(i&&!i.classList.contains("active")){if("function"==typeof this.options.onOpenStart&&this.options.onOpenStart.call(this,i),this.options.accordion){const t=e.filter((t=>t.classList.contains("active")));t.forEach((t=>{const i=e.indexOf(t);this.close(i)}))}i.classList.add("active"),this._animateIn(t)}};close=t=>{const e=Array.from(this.el.children).filter((t=>"LI"===t.tagName))[t];e&&e.classList.contains("active")&&("function"==typeof this.options.onCloseStart&&this.options.onCloseStart.call(this,e),e.classList.remove("active"),this._animateOut(t))}}const y={classes:"",dropdownOptions:{}};class f extends i{isMultiple;labelEl;dropdownOptions;input;dropdown;wrapper;selectOptions;_values;constructor(t,e){super(t,e,f),this.el.classList.contains("browser-default")||(this.el.M_FormSelect=this,this.options={...f.defaults,...e},this.isMultiple=this.el.multiple,this.el.tabIndex=-1,this._values=[],this._setupDropdown(),this._setupEventHandlers())}static get defaults(){return y}static init(t,e={}){return super.init(t,e,f)}static getInstance(t){return t.M_FormSelect}destroy(){this._removeEventHandlers(),this._removeDropdown(),this.el.M_FormSelect=void 0}_setupEventHandlers(){this.dropdownOptions.querySelectorAll("li:not(.optgroup)").forEach((t=>{t.addEventListener("click",this._handleOptionClick),t.addEventListener("keydown",(t=>{" "!==t.key&&"Enter"!==t.key||this._handleOptionClick(t)}))})),this.el.addEventListener("change",this._handleSelectChange),this.input.addEventListener("click",this._handleInputClick)}_removeEventHandlers(){this.dropdownOptions.querySelectorAll("li:not(.optgroup)").forEach((t=>{t.removeEventListener("click",this._handleOptionClick)})),this.el.removeEventListener("change",this._handleSelectChange),this.input.removeEventListener("click",this._handleInputClick)}_handleSelectChange=()=>{this._setValueToInput()};_handleOptionClick=t=>{t.preventDefault();const e=t.target.closest("li");this._selectOptionElement(e),t.stopPropagation()};_arraysEqual(t,e){if(t===e)return!0;if(null==t||null==e)return!1;if(t.length!==e.length)return!1;for(let i=0;i<t.length;++i)if(t[i]!==e[i])return!1;return!0}_selectOptionElement(t){if(!t.classList.contains("disabled")&&!t.classList.contains("optgroup")){const e=this._values.find((e=>e.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=`<span id="${i}" role="presentation">${t.getAttribute("label")}</span>`,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<i.length;++t){const e=i[t];e.name.startsWith("aria-")&&this.input.setAttribute(e.name,e.value)}this.input.setAttribute("role","combobox"),this.input.ariaExpanded="false",this.input.setAttribute("aria-owns",this.dropdownOptions.id),this.input.setAttribute("aria-controls",this.dropdownOptions.id),this.input.placeholder=" ",this.wrapper.prepend(this.input),this._setValueToInput();const s=document.createElementNS("http://www.w3.org/2000/svg","svg");if(s.classList.add("caret"),s.setAttribute("height","24"),s.setAttribute("width","24"),s.setAttribute("viewBox","0 0 24 24"),s.ariaHidden="true",s.innerHTML='<path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/>',this.wrapper.prepend(s),!this.el.disabled){const t={...this.options.dropdownOptions};t.coverTrigger=!1;const i=t.onOpenEnd,s=t.onCloseEnd;t.onOpenEnd=()=>{const t=this.dropdownOptions.querySelector(".selected");if(t&&(e.keyDown=!0,this.dropdown.focusedIndex=[...t.parentNode.children].indexOf(t),this.dropdown._focusFocusedItem(),e.keyDown=!1,this.dropdown.isScrollable)){let e=t.getBoundingClientRect().top-this.dropdownOptions.getBoundingClientRect().top;e-=this.dropdownOptions.clientHeight/2,this.dropdownOptions.scrollTop=e}this.input.ariaExpanded="true",i&&"function"==typeof i&&i.call(this.dropdown,this.el)},t.onCloseEnd=()=>{this.input.ariaExpanded="false",s&&"function"==typeof s&&s.call(this.dropdown,this.el)},t.closeOnClick=!1,this.dropdown=n.init(this.input,t)}if(this._setSelectedStates(),this.labelEl){const t=document.createElement("label");t.htmlFor=this.input.id,t.innerText=this.labelEl.innerText,this.input.after(t)}}_addOptionToValues(t,e){this._values.push({el:t,optionEl:e})}_removeDropdown(){this.wrapper.querySelector(".caret").remove(),this.input.remove(),this.dropdownOptions.remove(),this.wrapper.before(this.el),this.wrapper.remove()}_createAndAppendOptionWithIcon(t,e){const i=document.createElement("li");i.setAttribute("role","option"),t.disabled&&(i.classList.add("disabled"),i.ariaDisabled="true"),"optgroup-option"===e&&i.classList.add(e);const s=document.createElement("span");s.innerHTML=t.innerHTML,this.isMultiple&&!t.disabled&&(s.innerHTML=`<label><input type="checkbox"><span>${t.innerHTML}</span></label>`),i.appendChild(s);const n=t.getAttribute("data-icon"),o=t.getAttribute("class")?.split(" ");if(n){const t=document.createElement("img");o&&t.classList.add(...o),t.src=n,t.ariaHidden="true",i.prepend(t)}return this.dropdownOptions.append(i),i}_selectValue(t){t.el.selected=!0,t.optionEl.classList.add("selected"),t.optionEl.ariaSelected="true";const e=t.optionEl.querySelector('input[type="checkbox"]');e&&(e.checked=!0)}_deselectValue(t){t.el.selected=!1,t.optionEl.classList.remove("selected"),t.optionEl.ariaSelected="false";const e=t.optionEl.querySelector('input[type="checkbox"]');e&&(e.checked=!1)}_deselectAll(){this._values.forEach((t=>this._deselectValue(t)))}_isValueSelected(t){return this.getSelectedValues().some((e=>e===t.el.value))}_toggleEntryFromArray(t){this._isValueSelected(t)?this._deselectValue(t):this._selectValue(t)}_getSelectedOptions(){return Array.prototype.filter.call(this.el.selectedOptions,(t=>t))}_setValueToInput(){const t=this._getSelectedOptions(),e=this._values.filter((e=>t.indexOf(e.el)>=0)).filter((t=>!t.el.disabled)).map((t=>t.optionEl.querySelector("span").innerText.trim()));if(0===e.length){const t=this.el.querySelector("option:disabled");if(t&&""===t.value)return void(this.input.value=t.innerText)}this.input.value=e.join(", ")}_setSelectedStates(){this._values.forEach((t=>{const e=t.el.selected,i=t.optionEl.querySelector('input[type="checkbox"]');i&&(i.checked=e),e?this._activateOption(this.dropdownOptions,t.optionEl):(t.optionEl.classList.remove("selected"),t.optionEl.ariaSelected="false")}))}_activateOption(t,e){e&&(this.isMultiple||t.querySelectorAll("li.selected").forEach((t=>t.classList.remove("selected"))),e.classList.add("selected"),e.ariaSelected="true")}getSelectedValues(){return this._getSelectedOptions().map((t=>t.value))}}const E={format:"mmm dd, yyyy",parse:null,isDateRange:!1,dateRangeEndEl:null,isMultipleSelection:!1,defaultDate:null,defaultEndDate:null,setDefaultDate:!1,setDefaultEndDate:!1,disableWeekends:!1,disableDayFn:null,firstDay:0,minDate:null,maxDate:null,yearRange:10,minYear:0,maxYear:9999,minMonth:void 0,maxMonth:void 0,startRange:null,endRange:null,isRTL:!1,yearRangeReverse:!1,showMonthAfterYear:!1,showDaysInNextAndPreviousMonths:!1,openByDefault:!1,container:null,showClearBtn:!1,i18n:{cancel:"Cancel",clear:"Clear",done:"Ok",previousMonth:"‹",nextMonth:"›",months:["January","February","March","April","May","June","July","August","September","October","November","December"],monthsShort:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],weekdays:["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],weekdaysShort:["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],weekdaysAbbrev:["S","M","T","W","T","F","S"]},events:[],onSelect:null,onDraw:null,onInputInteraction:null};class w extends i{id;multiple=!1;calendarEl;clearBtn;doneBtn;cancelBtn;containerEl;yearTextEl;dateTextEl;endDateEl;dateEls;date;endDate;dates;formats;calendars;_y;_m;static _template;constructor(t,i){super(t,i,w),this.el.M_Datepicker=this,this.options={...w.defaults,...i},i&&i.hasOwnProperty("i18n")&&"object"==typeof i.i18n&&(this.options.i18n={...w.defaults.i18n,...i.i18n}),this.options.minDate&&this.options.minDate.setHours(0,0,0,0),this.options.maxDate&&this.options.maxDate.setHours(0,0,0,0),this.id=e.guid(),this._setupVariables(),this._insertHTMLIntoDOM(),this._setupEventHandlers(),this.options.defaultDate||(this.options.defaultDate=new Date(Date.parse(this.el.value)));const s=this.options.defaultDate;if(w._isDate(s)?this.options.setDefaultDate?(this.setDate(s,!0),this.setInputValue(this.el,s)):this.gotoDate(s):this.gotoDate(new Date),this.options.isDateRange){this.multiple=!0;const t=this.options.defaultEndDate;w._isDate(t)&&this.options.setDefaultEndDate&&(this.setDate(t,!0,!0),this.setInputValue(this.endDateEl,t))}this.options.isMultipleSelection&&(this.multiple=!0,this.dates=[],this.dateEls=[],this.dateEls.push(t))}static get defaults(){return E}static init(t,e={}){return super.init(t,e,w)}static _isDate(t){return/Date/.test(Object.prototype.toString.call(t))&&!isNaN(t.getTime())}static _isWeekend(t){const e=t.getDay();return 0===e||6===e}static _setToStartOfDay(t){w._isDate(t)&&t.setHours(0,0,0,0)}static _getDaysInMonth(t,e){return[31,w._isLeapYear(t)?29:28,31,30,31,30,31,31,30,31,30,31][e]}static _isLeapYear(t){return t%4==0&&t%100!=0||t%400==0}static _compareDates(t,e){return t.getTime()===e.getTime()}static _compareWithinRange(t,e,i){return t.getTime()>e.getTime()&&t.getTime()<i.getTime()}static _comparePastDate(t,e){return t.getTime()<e.getTime()}static getInstance(t){return t.M_Datepicker}destroy(){this._removeEventHandlers(),this.containerEl.remove(),this.destroySelects(),this.el.M_Datepicker=void 0}destroySelects(){const t=this.calendarEl.querySelector(".orig-select-year");t&&f.getInstance(t).destroy();const e=this.calendarEl.querySelector(".orig-select-month");e&&f.getInstance(e).destroy()}_insertHTMLIntoDOM(){if("date"==this.el.type&&this.el.classList.add("datepicker-date-input"),null===!this.el.parentElement.querySelector(".datepicker-format")&&this._renderDateInputFormat(this.el),this.options.isDateRange&&(this.containerEl.classList.add("daterange"),this.options.dateRangeEndEl?void 0===document.querySelector(this.options.dateRangeEndEl)?console.warn("Specified date range end input element in dateRangeEndEl not found"):(this.endDateEl=document.querySelector(this.options.dateRangeEndEl),null===!this.endDateEl.parentElement.querySelector(".datepicker-format")&&this._renderDateInputFormat(this.endDateEl)):(this.endDateEl=this.createDateInput(),this.endDateEl.classList.add("datepicker-end-date"))),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.containerEl)}else{const t=this.endDateEl?this.endDateEl:this.el;this.options.openByDefault||this.containerEl.setAttribute("style","display: none; visibility: hidden;"),t.parentElement.after(this.containerEl)}}_renderDateInputFormat(t){t.parentElement.querySelector(".datepicker-format").innerHTML=this.options.format.toString()}toString(t=this.date,e=null){return"function"==typeof(e=e||this.options.format)?e(t):w._isDate(t)?this.formatDate(t,e):""}formatDate(t,e){return e.split(/(d{1,4}|m{1,4}|y{4}|yy|!.)/g).map((e=>this.formats[e]?this.formats[e](t):e)).join("")}setDateFromInput(t){const e=new Date(Date.parse(t.value));this.setDate(e,!1,t==this.endDateEl,!0)}setDate(t=null,e=!1,i=!1,s=!1){const n=this.validateDate(t);n&&(this.options.isMultipleSelection?s||this.setMultiDate(n):this.setSingleDate(n,i),w._setToStartOfDay(n),this.gotoDate(n),e||"function"!=typeof this.options.onSelect||this.options.onSelect.call(this,n))}validateDate(t){if(!t)return this._renderDateDisplay(t),this.draw();if("string"==typeof t&&(t=new Date(Date.parse(t))),!w._isDate(t))return;const e=this.options.minDate,i=this.options.maxDate;return w._isDate(e)&&t<e?t=e:w._isDate(i)&&t>i&&(t=i),new Date(t.getTime())}setSingleDate(t,e){e?e&&(this.endDate=t):this.date=t}setMultiDate(t){const e=this.dates?.find((e=>e.getTime()===t.getTime()&&e));e?this.dates.splice(this.dates.indexOf(e),1):this.dates.push(t),this.dates.sort(((t,e)=>t.getTime()<e.getTime()?-1:0))}setDataDate(t,e){t.setAttribute("data-date",this.toString(e))}setInputValues(){if(!this.options?.isMultipleSelection)return this.setInputValue(this.el,this.date),void(this.options?.isDateRange&&this.setInputValue(this.endDateEl,this.endDate));this.setMultipleSelectionInputValues()}setMultipleSelectionInputValues(){Array.from(this.dateEls).filter(((t,e)=>{if(e>this.dates.length-1)return t})).forEach((t=>{t.remove()})),this.dates.forEach(((t,e)=>{if(Array.from(this.dateEls)[e])return void this.setInputValue(this.dateEls[e],t);const i=this.createDateInput();this.setInputValue(i,t),this.dateEls.push(i)}))}setInputValue(t,e){"date"==t.type?(this.setDataDate(t,e),t.value=this.formatDate(e,"yyyy-mm-dd")):t.value=this.toString(e),this.el.dispatchEvent(new CustomEvent("change",{bubbles:!0,cancelable:!0,composed:!0,detail:{firedBy:this}}))}_renderDateDisplay(t,e=null){const i=w._isDate(t)?t:new Date;if(this.options.isDateRange){const t=w._isDate(e)?e:new Date;this.dateTextEl.innerHTML=`${this.formatDate(i,"mmm d")} - ${this.formatDate(t,"mmm d")}`}else this.dateTextEl.innerHTML=this.formatDate(i,"ddd, mmm d")}gotoDate(t){let e=!0;if(w._isDate(t)){if(this.calendars){const i=new Date(this.calendars[0].year,this.calendars[0].month,1),s=new Date(this.calendars[this.calendars.length-1].year,this.calendars[this.calendars.length-1].month,1),n=t.getTime();s.setMonth(s.getMonth()+1),s.setDate(s.getDate()-1),e=n<i.getTime()||s.getTime()<n}e&&(this.calendars=[{month:t.getMonth(),year:t.getFullYear()}]),this.adjustCalendars()}}adjustCalendars(){this.calendars[0]=this.adjustCalendar(this.calendars[0]),this.draw()}adjustCalendar(t){return t.month<0&&(t.year-=Math.ceil(Math.abs(t.month)/12),t.month+=12),t.month>11&&(t.year+=Math.floor(Math.abs(t.month)/12),t.month-=12),t}nextMonth(){this.calendars[0].month++,this.adjustCalendars()}prevMonth(){this.calendars[0].month--,this.adjustCalendars()}render(t,e,i){const s=new Date,n=w._getDaysInMonth(t,e),o=[];let a=new Date(t,e,1).getDay(),l=[];w._setToStartOfDay(s),this.options.firstDay>0&&(a-=this.options.firstDay,a<0&&(a+=7));const r=0===e?11:e-1,h=11===e?0:e+1,d=0===e?t-1:t,c=11===e?t+1:t,p=w._getDaysInMonth(d,r);let u=n+a,m=u;for(;m>7;)m-=7;u+=7-m;let v=!1;for(let i=0,m=0;i<u;i++){const u=new Date(t,e,i-a+1),_=w._compareDates(u,s),g=-1!==this.options.events.indexOf(u.toDateString()),y=i<a||i>=n+a,f=this.options.startRange&&w._compareDates(this.options.startRange,u),E=this.options.endRange&&w._compareDates(this.options.endRange,u),b=this.options.startRange&&this.options.endRange&&this.options.startRange<u&&u<this.options.endRange,L=this.options.minDate&&u<this.options.minDate||this.options.maxDate&&u>this.options.maxDate||this.options.disableWeekends&&w._isWeekend(u)||this.options.disableDayFn&&this.options.disableDayFn(u),C=this.options.isDateRange&&this.date&&this.endDate&&w._compareDates(this.date,u),k=this.options.isDateRange&&this.endDate&&w._compareDates(this.endDate,u),T=this.options.isDateRange&&w._isDate(this.endDate)&&w._compareWithinRange(u,this.date,this.endDate);let D=i-a+1,x=e,S=t,I=!1;w._isDate(this.date)&&(I=w._compareDates(u,this.date)),!I&&w._isDate(this.endDate)&&(I=w._compareDates(u,this.endDate)),this.options.isMultipleSelection&&this.dates?.some((t=>t.getTime()===u.getTime()))&&(I=!0),y&&(i<a?(D=p+D,x=r,S=d):(D-=n,x=h,S=c));const A={day:D,month:x,year:S,hasEvent:g,isSelected:I,isToday:_,isDisabled:L,isEmpty:y,isStartRange:f,isEndRange:E,isInRange:b,showDaysInNextAndPreviousMonths:this.options.showDaysInNextAndPreviousMonths,isDateRangeStart:C,isDateRangeEnd:k,isDateRange:T};l.push(this.renderDay(A)),7==++m&&(o.push(this.renderRow(l,this.options.isRTL,v)),l=[],m=0,v=!1)}return this.renderTable(this.options,o,i)}renderDay(t){const e={isDisabled:"is-disabled",isToday:"is-today",isSelected:"is-selected",hasEvent:"has-event",isInRange:"is-inrange",isStartRange:"is-startrange",isEndRange:"is-endrange",isDateRangeStart:"is-daterange-start",isDateRangeEnd:"is-daterange-end",isDateRange:"is-daterange"},i=!(0===["isSelected","isDateRange"].filter((e=>!(!t.hasOwnProperty(e)||!0!==t[e]))).length),s=["datepicker-day"];if(t.isEmpty){if(!t.showDaysInNextAndPreviousMonths)return'<td class="is-empty"></td>';s.push("is-outside-current-month"),s.push("is-selection-disabled")}for(const[i,n]of Object.entries(e))t.hasOwnProperty(i)&&t[i]&&s.push(n);return`<td data-day="${t.day}" class="${s.join(" ")}" aria-selected="${i}"><button class="datepicker-day-button" type="button" data-year="${t.year}" data-month="${t.month}" data-day="${t.day}">${t.day}</button></td>`}renderRow(t,e,i){return'<tr class="datepicker-row'+(i?" is-selected":"")+'">'+(e?t.reverse():t).join("")+"</tr>"}renderTable(t,e,i){return'<div class="datepicker-table-wrapper"><table cellpadding="0" cellspacing="0" class="datepicker-table" role="grid" aria-labelledby="'+i+'">'+this.renderHead(t)+this.renderBody(e)+"</table></div>"}renderHead(t){const e=[];let i;for(i=0;i<7;i++)e.push(`<th scope="col"><abbr title="${this.renderDayName(t,i)}">${this.renderDayName(t,i,!0)}</abbr></th>`);return"<thead><tr>"+(t.isRTL?e.reverse():e).join("")+"</tr></thead>"}renderBody(t){return"<tbody>"+t.join("")+"</tbody>"}renderTitle(t,e,i,s,n,o){const a=this.options,l=i===a.minYear,r=i===a.maxYear;let h,d,c=[],p='<div id="'+o+'" class="datepicker-controls" role="heading" aria-live="assertive">',u=!0,m=!0;for(h=0;h<12;h++)c.push('<option value="'+(i===n?h-e:12+h-e)+'"'+(h===s?' selected="selected"':"")+(l&&h<a.minMonth||r&&h>a.maxMonth?'disabled="disabled"':"")+">"+a.i18n.months[h]+"</option>");const v='<select class="datepicker-select orig-select-month" tabindex="-1">'+c.join("")+"</select>";for(Array.isArray(a.yearRange)?(h=a.yearRange[0],d=a.yearRange[1]+1):(h=i-a.yearRange,d=1+i+a.yearRange),c=[];h<d&&h<=a.maxYear;h++)h>=a.minYear&&c.push(`<option value="${h}" ${h===i?'selected="selected"':""}>${h}</option>`);a.yearRangeReverse&&c.reverse();const _=`<select class="datepicker-select orig-select-year" tabindex="-1">${c.join("")}</select>`;p+=`<button class="month-prev${u?"":" is-disabled"} btn" type="button"><svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"/><path d="M0-.5h24v24H0z" fill="none"/></svg></button>`,p+='<div class="selects-container">',a.showMonthAfterYear?p+=_+v:p+=v+_,p+="</div>",l&&(0===s||a.minMonth>=s)&&(u=!1),r&&(11===s||a.maxMonth<=s)&&(m=!1);return p+=`<button class="month-next${m?"":" is-disabled"} btn" type="button"><svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"/><path d="M0-.25h24v24H0z" fill="none"/></svg></button>`,p+"</div>"}draw(){const t=this.options,e=t.minYear,i=t.maxYear,s=t.minMonth,n=t.maxMonth;let o="";this._y<=e&&(this._y=e,!isNaN(s)&&this._m<s&&(this._m=s)),this._y>=i&&(this._y=i,!isNaN(n)&&this._m>n&&(this._m=n));const a="datepicker-title-"+Math.random().toString(36).replace(/[^a-z]+/g,"").substr(0,2);for(let t=0;t<1;t++)this.options.isDateRange?this._renderDateDisplay(this.date,this.endDate):this._renderDateDisplay(this.date),o+=this.renderTitle(this,t,this.calendars[t].year,this.calendars[t].month,this.calendars[0].year,a)+this.render(this.calendars[t].year,this.calendars[t].month,a);this.destroySelects(),this.calendarEl.innerHTML=o;const l=this.calendarEl.querySelector(".orig-select-year"),r=this.calendarEl.querySelector(".orig-select-month");f.init(l,{classes:"select-year",dropdownOptions:{container:document.body,constrainWidth:!1}}),f.init(r,{classes:"select-month",dropdownOptions:{container:document.body,constrainWidth:!1}}),l.addEventListener("change",this._handleYearChange),r.addEventListener("change",this._handleMonthChange),"function"==typeof this.options.onDraw&&this.options.onDraw.call(this)}_setupEventHandlers(){this.el.addEventListener("click",this._handleInputClick),this.el.addEventListener("keydown",this._handleInputKeydown),this.el.addEventListener("change",this._handleInputChange),this.calendarEl.addEventListener("click",this._handleCalendarClick),this.doneBtn.addEventListener("click",(()=>this.setInputValues())),this.cancelBtn.addEventListener("click",this.close),this.options.showClearBtn&&this.clearBtn.addEventListener("click",this._handleClearClick)}_setupVariables(){const t=document.createElement("template");t.innerHTML=w._template.trim(),this.containerEl=t.content.firstChild,this.calendarEl=this.containerEl.querySelector(".datepicker-calendar"),this.yearTextEl=this.containerEl.querySelector(".year-text"),this.dateTextEl=this.containerEl.querySelector(".date-text"),this.options.showClearBtn&&(this.clearBtn=this.containerEl.querySelector(".datepicker-clear")),this.doneBtn=this.containerEl.querySelector(".datepicker-done"),this.cancelBtn=this.containerEl.querySelector(".datepicker-cancel"),this.formats={d:t=>t.getDate(),dd:t=>{const e=t.getDate();return(e<10?"0":"")+e},ddd:t=>this.options.i18n.weekdaysShort[t.getDay()],dddd:t=>this.options.i18n.weekdays[t.getDay()],m:t=>t.getMonth()+1,mm:t=>{const e=t.getMonth()+1;return(e<10?"0":"")+e},mmm:t=>this.options.i18n.monthsShort[t.getMonth()],mmmm:t=>this.options.i18n.months[t.getMonth()],yy:t=>(""+t.getFullYear()).slice(2),yyyy:t=>t.getFullYear()}}_removeEventHandlers(){this.el.removeEventListener("click",this._handleInputClick),this.el.removeEventListener("keydown",this._handleInputKeydown),this.el.removeEventListener("change",this._handleInputChange),this.calendarEl.removeEventListener("click",this._handleCalendarClick),this.options.isDateRange&&(this.endDateEl.removeEventListener("click",this._handleInputClick),this.endDateEl.removeEventListener("keypress",this._handleInputKeydown),this.endDateEl.removeEventListener("change",this._handleInputChange))}_handleInputClick=t=>{"date"==t.type&&t.preventDefault(),this.setDateFromInput(t.target),this.draw(),this.gotoDate(t.target===this.el?this.date:this.endDate),this.options.onInputInteraction&&this.options.onInputInteraction.call(this)};_handleInputKeydown=t=>{e.keys.ENTER.includes(t.key)&&(t.preventDefault(),this.setDateFromInput(t.target),this.draw(),this.options.onInputInteraction&&this.options.onInputInteraction.call(this))};_handleCalendarClick=t=>{const e=t.target;if(!e.classList.contains("is-disabled"))if(!e.classList.contains("datepicker-day-button")||e.classList.contains("is-empty")||e.parentElement.classList.contains("is-disabled"))e.closest(".month-prev")?this.prevMonth():e.closest(".month-next")&&this.nextMonth();else{const e=new Date(t.target.getAttribute("data-year"),t.target.getAttribute("data-month"),t.target.getAttribute("data-day"));(!this.multiple||this.multiple&&this.options.isMultipleSelection)&&this.setDate(e),this.options.isDateRange&&this._handleDateRangeCalendarClick(e),this._finishSelection()}};_handleDateRangeCalendarClick=t=>{if(null!=this.endDate&&w._compareDates(t,this.endDate))this._clearDates(),this.draw();else{if(w._isDate(this.date)&&w._comparePastDate(t,this.date))return;this.setDate(t,!1,w._isDate(this.date))}};_handleClearClick=()=>{this._clearDates(),this.setInputValues()};_clearDates=()=>{this.date=null,this.endDate=null};_handleMonthChange=t=>{this.gotoMonth(t.target.value)};_handleYearChange=t=>{this.gotoYear(t.target.value)};gotoMonth(t){isNaN(t)||(this.calendars[0].month=parseInt(t,10),this.adjustCalendars())}gotoYear(t){isNaN(t)||(this.calendars[0].year=parseInt(t,10),this.adjustCalendars())}_handleInputChange=t=>{let e;const i=t.target;t.detail?.firedBy!==this&&(i!=this.endDateEl||this.date)&&(e=this.options.parse?this.options.parse(t.target.value,"function"==typeof this.options.format?this.options.format(new Date(this.el.value)):this.options.format):new Date(Date.parse(t.target.value)),w._isDate(e)&&(this.setDate(e,!1,i==this.endDateEl,!0),"date"==t.type&&(this.setDataDate(t,e),this.setInputValues())))};renderDayName(t,e,i=!1){for(e+=t.firstDay;e>=7;)e-=7;return i?t.i18n.weekdaysAbbrev[e]:t.i18n.weekdays[e]}createDateInput(){const t=this.el.cloneNode(!0);return t.addEventListener("click",this._handleInputClick),t.addEventListener("keypress",this._handleInputKeydown),t.addEventListener("change",this._handleInputChange),this.el.parentElement.appendChild(t),t}_finishSelection=()=>{this.setInputValues(),this.close()};open(){return console.warn("Datepicker.open() is deprecated. Remove this method and wrap in modal yourself."),this}close(){return console.warn("Datepicker.close() is deprecated. Remove this method and wrap in modal yourself."),this}static{w._template='\n        <div class="datepicker-container">\n          <div class="datepicker-date-display">\n            <span class="year-text"></span>\n            <span class="date-text"></span>\n          </div>\n          <div class="datepicker-calendar-container">\n            <div class="datepicker-calendar"></div>\n            <div class="datepicker-footer">\n              <button class="btn-flat datepicker-clear waves-effect" style="visibility: hidden;" type="button"></button>\n              <div class="confirmation-btns">\n                <button class="btn-flat datepicker-cancel waves-effect" type="button"></button>\n                <button class="btn-flat datepicker-done waves-effect" type="button"></button>\n              </div>\n            </div>\n          </div>\n        </div>'}}class b{static validateField(t){if(!t)return void console.error("No text field element found");const e=null!==t.getAttribute("data-length"),i=parseInt(t.getAttribute("data-length")),s=t.value.length;0===s&&!1===t.validity.badInput&&!t.required&&t.classList.contains("validate")?t.classList.remove("invalid"):t.classList.contains("validate")&&(t.validity.valid&&e&&s<=i||t.validity.valid&&!e?t.classList.remove("invalid"):t.classList.add("invalid"))}static textareaAutoResize(t){const e=t;let i=document.querySelector(".hiddendiv");i||(i=document.createElement("div"),i.classList.add("hiddendiv","common"),document.body.append(i));const s=getComputedStyle(e),n=s.fontFamily,o=s.fontSize,a=s.lineHeight,l=s.paddingTop,r=s.paddingRight,h=s.paddingBottom,d=s.paddingLeft;o&&(i.style.fontSize=o),n&&(i.style.fontFamily=n),a&&(i.style.lineHeight=a),l&&(i.style.paddingTop=l),r&&(i.style.paddingRight=r),h&&(i.style.paddingBottom=h),d&&(i.style.paddingLeft=d),e.hasAttribute("original-height")||e.setAttribute("original-height",e.getBoundingClientRect().height.toString()),"off"===e.getAttribute("wrap")&&(i.style.overflowWrap="normal",i.style.whiteSpace="pre"),i.innerText=e.value+"\n",i.innerHTML=i.innerHTML.replace(/\n/g,"<br>"),e.offsetWidth>0&&e.offsetHeight>0?i.style.width=e.getBoundingClientRect().width+"px":i.style.width=window.innerWidth/2+"px";const c=parseInt(e.getAttribute("original-height")),p=parseInt(e.getAttribute("previous-length"));isNaN(c)||(c<=i.clientHeight?e.style.height=i.clientHeight+"px":e.value.length<p&&(e.style.height=c+"px"),e.setAttribute("previous-length",e.value.length.toString()))}static Init(){"undefined"!=typeof document&&document?.addEventListener("DOMContentLoaded",(()=>{document.addEventListener("change",(t=>{const e=t.target;if(e instanceof HTMLInputElement){if(0!==e.value.length||null!==e.getAttribute("placeholder"))for(const t of e.parentNode.children)"label"==t.tagName&&t.classList.add("active");b.validateField(e)}})),document.addEventListener("keyup",(t=>{const i=t.target;i instanceof HTMLInputElement&&["radio","checkbox"].includes(i.type)&&e.keys.TAB.includes(t.key)&&(i.classList.add("tabbed"),i.addEventListener("blur",(()=>i.classList.remove("tabbed")),{once:!0}))})),document.querySelectorAll(".materialize-textarea").forEach((t=>{b.InitTextarea(t)})),document.querySelectorAll('.file-field input[type="file"]').forEach((t=>{b.InitFileInputPath(t)}))}))}static InitTextarea(t){t.setAttribute("original-height",t.getBoundingClientRect().height.toString()),t.setAttribute("previous-length",t.value.length.toString()),b.textareaAutoResize(t),t.addEventListener("keyup",(t=>b.textareaAutoResize(t.target))),t.addEventListener("keydown",(t=>b.textareaAutoResize(t.target)))}static InitFileInputPath(t){t.addEventListener("change",(()=>{const e=t.closest(".file-field").querySelector("input.file-path"),i=t.files,s=[];for(let t=0;t<i.length;t++)s.push(i[t].name);e.value=s.join(", "),e.dispatchEvent(new Event("change",{bubbles:!0,cancelable:!0,composed:!0}))}))}}const L={inDuration:275,outDuration:200,onOpenStart:null,onOpenEnd:null,onCloseStart:null,onCloseEnd:null};class C extends i{overlayActive;doneAnimating;caption;originalWidth;originalHeight;originInlineStyles;placeholder;_changedAncestorList;newHeight;newWidth;windowWidth;windowHeight;attrWidth;attrHeight;_overlay;_photoCaption;constructor(t,e){super(t,e,C),this.el.M_Materialbox=this,this.options={...C.defaults,...e},this.overlayActive=!1,this.doneAnimating=!0,this.placeholder=document.createElement("div"),this.placeholder.classList.add("material-placeholder"),this.originalWidth=0,this.originalHeight=0,this.originInlineStyles=this.el.getAttribute("style"),this.caption=this.el.getAttribute("data-caption")||"",this.el.tabIndex=0,this.el.before(this.placeholder),this.placeholder.append(this.el),this._setupEventHandlers()}static get defaults(){return L}static init(t,e={}){return super.init(t,e,C)}static getInstance(t){return t.M_Materialbox}destroy(){this._removeEventHandlers(),this.el.M_Materialbox=void 0,this.placeholder.remove(),this.el.removeAttribute("style")}_setupEventHandlers(){this.el.addEventListener("click",this._handleMaterialboxClick),this.el.addEventListener("keypress",this._handleMaterialboxKeypress)}_removeEventHandlers(){this.el.removeEventListener("click",this._handleMaterialboxClick),this.el.removeEventListener("keypress",this._handleMaterialboxKeypress)}_handleMaterialboxClick=()=>{this._handleMaterialboxToggle()};_handleMaterialboxKeypress=t=>{e.keys.ENTER.includes(t.key)&&this._handleMaterialboxToggle()};_handleMaterialboxToggle=()=>{!1===this.doneAnimating||this.overlayActive&&this.doneAnimating?this.close():this.open()};_handleWindowScroll=()=>{this.overlayActive&&this.close()};_handleWindowResize=()=>{this.overlayActive&&this.close()};_handleWindowEscape=t=>{e.keys.ESC.includes(t.key)&&this.doneAnimating&&this.overlayActive&&this.close()};_makeAncestorsOverflowVisible(){this._changedAncestorList=[];let t=this.placeholder.parentNode;for(;null!==t&&t!==document;){const e=t;"visible"!==e.style.overflow&&(e.style.overflow="visible",this._changedAncestorList.push(e)),t=t.parentNode}}_offset(t){const e=t.getBoundingClientRect(),i=document.documentElement;return{top:e.top+window.scrollY-i.clientTop,left:e.left+window.scrollX-i.clientLeft}}_updateVars(){this.windowWidth=window.innerWidth,this.windowHeight=window.innerHeight,this.caption=this.el.getAttribute("data-caption")||""}_animateImageIn(){this.el.style.maxHeight=this.newHeight.toString()+"px",this.el.style.maxWidth=this.newWidth.toString()+"px";const t=this.options.inDuration;this.el.style.transition="none",this.el.style.height=this.originalHeight+"px",this.el.style.width=this.originalWidth+"px",setTimeout((()=>{this.el.style.transition=`height ${t}ms ease,\n        width ${t}ms ease,\n        left ${t}ms ease,\n        top ${t}ms ease\n      `,this.el.style.height=this.newHeight+"px",this.el.style.width=this.newWidth+"px",this.el.style.left=e.getDocumentScrollLeft()+this.windowWidth/2-this._offset(this.placeholder).left-this.newWidth/2+"px",this.el.style.top=e.getDocumentScrollTop()+this.windowHeight/2-this._offset(this.placeholder).top-this.newHeight/2+"px"}),1),setTimeout((()=>{this.doneAnimating=!0,"function"==typeof this.options.onOpenEnd&&this.options.onOpenEnd.call(this,this.el)}),t)}_animateImageOut(){const t=this.options.outDuration;this.el.style.transition=`height ${t}ms ease,\n      width ${t}ms ease,\n      left ${t}ms ease,\n      top ${t}ms ease\n    `,this.el.style.height=this.originalWidth+"px",this.el.style.width=this.originalWidth+"px",this.el.style.left="0",this.el.style.top="0",setTimeout((()=>{this.placeholder.style.height="",this.placeholder.style.width="",this.placeholder.style.position="",this.placeholder.style.top="",this.placeholder.style.left="",this.attrWidth&&this.el.setAttribute("width",this.attrWidth.toString()),this.attrHeight&&this.el.setAttribute("height",this.attrHeight.toString()),this.el.removeAttribute("style"),this.originInlineStyles&&this.el.setAttribute("style",this.originInlineStyles),this.el.classList.remove("active"),this.doneAnimating=!0,this._changedAncestorList.forEach((t=>t.style.overflow="")),"function"==typeof this.options.onCloseEnd&&this.options.onCloseEnd.call(this,this.el)}),t)}_addCaption(){this._photoCaption=document.createElement("div"),this._photoCaption.classList.add("materialbox-caption"),this._photoCaption.innerText=this.caption,document.body.append(this._photoCaption),this._photoCaption.style.display="inline",this._photoCaption.style.transition="none",this._photoCaption.style.opacity="0";const t=this.options.inDuration;setTimeout((()=>{this._photoCaption.style.transition=`opacity ${t}ms ease`,this._photoCaption.style.opacity="1"}),1)}_removeCaption(){const t=this.options.outDuration;this._photoCaption.style.transition=`opacity ${t}ms ease`,this._photoCaption.style.opacity="0",setTimeout((()=>{this._photoCaption.remove()}),t)}_addOverlay(){this._overlay=document.createElement("div"),this._overlay.id="materialbox-overlay",this._overlay.addEventListener("click",(()=>{this.doneAnimating&&this.close()}),{once:!0}),this.el.before(this._overlay);const t=this._overlay.getBoundingClientRect();this._overlay.style.width=this.windowWidth+"px",this._overlay.style.height=this.windowHeight+"px",this._overlay.style.left=-1*t.left+"px",this._overlay.style.top=-1*t.top+"px",this._overlay.style.transition="none",this._overlay.style.opacity="0";const e=this.options.inDuration;setTimeout((()=>{this._overlay.style.transition=`opacity ${e}ms ease`,this._overlay.style.opacity="1"}),1)}_removeOverlay(){const t=this.options.outDuration;this._overlay.style.transition=`opacity ${t}ms ease`,this._overlay.style.opacity="0",setTimeout((()=>{this.overlayActive=!1,this._overlay.remove()}),t)}open=()=>{this._updateVars(),this.originalWidth=this.el.getBoundingClientRect().width,this.originalHeight=this.el.getBoundingClientRect().height,this.doneAnimating=!1,this.el.classList.add("active"),this.overlayActive=!0,"function"==typeof this.options.onOpenStart&&this.options.onOpenStart.call(this,this.el),this.placeholder.style.width=this.placeholder.getBoundingClientRect().width+"px",this.placeholder.style.height=this.placeholder.getBoundingClientRect().height+"px",this.placeholder.style.position="relative",this.placeholder.style.top="0",this.placeholder.style.left="0",this._makeAncestorsOverflowVisible(),this.el.style.position="absolute",this.el.style.zIndex="1000",this.el.style.willChange="left, top, width, height",this.attrWidth=this.el.getAttribute("width"),this.attrHeight=this.el.getAttribute("height"),this.attrWidth&&(this.el.style.width=this.attrWidth+"px",this.el.removeAttribute("width")),this.attrHeight&&(this.el.style.width=this.attrHeight+"px",this.el.removeAttribute("height")),this._addOverlay(),""!==this.caption&&this._addCaption();const t=this.originalWidth/this.windowWidth,e=this.originalHeight/this.windowHeight;if(this.newWidth=0,this.newHeight=0,t>e){const t=this.originalHeight/this.originalWidth;this.newWidth=.9*this.windowWidth,this.newHeight=.9*this.windowWidth*t}else{const t=this.originalWidth/this.originalHeight;this.newWidth=.9*this.windowHeight*t,this.newHeight=.9*this.windowHeight}this._animateImageIn(),window.addEventListener("scroll",this._handleWindowScroll),window.addEventListener("resize",this._handleWindowResize),window.addEventListener("keyup",this._handleWindowEscape)};close=()=>{this._updateVars(),this.doneAnimating=!1,"function"==typeof this.options.onCloseStart&&this.options.onCloseStart.call(this,this.el),window.removeEventListener("scroll",this._handleWindowScroll),window.removeEventListener("resize",this._handleWindowResize),window.removeEventListener("keyup",this._handleWindowEscape),this._removeOverlay(),this._animateImageOut(),""!==this.caption&&this._removeCaption()}}const k={opacity:.5,inDuration:250,outDuration:250,onOpenStart:null,onOpenEnd:null,onCloseStart:null,onCloseEnd:null,preventScrolling:!0,dismissible:!0,startingTop:"4%",endingTop:"10%"};class T extends i{constructor(t,e){super(t,e,T),this.el.M_Modal=this,this.options={...T.defaults,...e},this.el.tabIndex=0,this._setupEventHandlers()}static get defaults(){return k}static init(t,e={}){return super.init(t,e,T)}static getInstance(t){return t.M_Modal}destroy(){}_setupEventHandlers(){}_removeEventHandlers(){}_handleTriggerClick(){}_handleOverlayClick(){}_handleModalCloseClick(){}_handleKeydown(){}_handleFocus(){}open(){return this}close(){return this}static#t(t){return`<dialog id="modal1" class="modal">\n      ${t.header?'<div class="modal-header">'+t.header+"</div>":""}\n      <div class="modal-content">\n        ${t.content}\n      </div>\n      ${t.header?'<div class="modal-footer">'+t.footer+"</div>":""}\n    </dialog>`}static#e(t){const e=document.createElement("dialog");return e.id=t.id,e}static create(t){return this.#e(t)}static{}}const D={responsiveThreshold:0};class x extends i{_enabled;_img;static _parallaxes=[];static _handleScrollThrottled;static _handleWindowResizeThrottled;constructor(t,e){super(t,e,x),this.el.M_Parallax=this,this.options={...x.defaults,...e},this._enabled=window.innerWidth>this.options.responsiveThreshold,this._img=this.el.querySelector("img"),this._updateParallax(),this._setupEventHandlers(),this._setupStyles(),x._parallaxes.push(this)}static get defaults(){return D}static init(t,e={}){return super.init(t,e,x)}static getInstance(t){return t.M_Parallax}destroy(){x._parallaxes.splice(x._parallaxes.indexOf(this),1),this._img.style.transform="",this._removeEventHandlers(),this.el.M_Parallax=void 0}static _handleScroll(){for(let t=0;t<x._parallaxes.length;t++){const e=x._parallaxes[t];e._updateParallax.call(e)}}static _handleWindowResize(){for(let t=0;t<x._parallaxes.length;t++){const e=x._parallaxes[t];e._enabled=window.innerWidth>e.options.responsiveThreshold}}_setupEventHandlers(){this._img.addEventListener("load",this._handleImageLoad),0===x._parallaxes.length&&(x._handleScrollThrottled||(x._handleScrollThrottled=e.throttle(x._handleScroll,5)),x._handleWindowResizeThrottled||(x._handleWindowResizeThrottled=e.throttle(x._handleWindowResize,5)),window.addEventListener("scroll",x._handleScrollThrottled),window.addEventListener("resize",x._handleWindowResizeThrottled))}_removeEventHandlers(){this._img.removeEventListener("load",this._handleImageLoad),0===x._parallaxes.length&&(window.removeEventListener("scroll",x._handleScrollThrottled),window.removeEventListener("resize",x._handleWindowResizeThrottled))}_setupStyles(){this._img.style.opacity="1"}_handleImageLoad=()=>{this._updateParallax()};_offset(t){const e=t.getBoundingClientRect(),i=document.documentElement;return{top:e.top+window.scrollY-i.clientTop,left:e.left+window.scrollX-i.clientLeft}}_updateParallax(){const t=this.el.getBoundingClientRect().height>0?this.el.parentElement.offsetHeight:500,i=this._img.offsetHeight-t,s=this._offset(this.el).top+t,n=this._offset(this.el).top,o=e.getDocumentScrollTop(),a=window.innerHeight,l=i*((o+a-n)/(t+a));this._enabled?s>o&&n<o+a&&(this._img.style.transform=`translate3D(-50%, ${l}px, 0)`):this._img.style.transform=""}}const S={top:0,bottom:1/0,offset:0,onPositionChange:null};class I extends i{static _pushpins;originalOffset;constructor(t,e){super(t,e,I),this.el.M_Pushpin=this,this.options={...I.defaults,...e},this.originalOffset=this.el.offsetTop,I._pushpins.push(this),this._setupEventHandlers(),this._updatePosition()}static get defaults(){return S}static init(t,e={}){return super.init(t,e,I)}static getInstance(t){return t.M_Pushpin}destroy(){this.el.style.top=null,this._removePinClasses();const t=I._pushpins.indexOf(this);I._pushpins.splice(t,1),0===I._pushpins.length&&this._removeEventHandlers(),this.el.M_Pushpin=void 0}static _updateElements(){for(const t in I._pushpins){I._pushpins[t]._updatePosition()}}_setupEventHandlers(){document.addEventListener("scroll",I._updateElements)}_removeEventHandlers(){document.removeEventListener("scroll",I._updateElements)}_updatePosition(){const t=e.getDocumentScrollTop()+this.options.offset;this.options.top<=t&&this.options.bottom>=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")),t<this.options.top&&!this.el.classList.contains("pin-top")&&(this._removePinClasses(),this.el.style.top="0",this.el.classList.add("pin-top"),"function"==typeof this.options.onPositionChange&&this.options.onPositionChange.call(this,"pin-top")),t>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","function"==typeof this.options.onPositionChange&&this.options.onPositionChange.call(this,"pin-bottom"))}_removePinClasses(){this.el.classList.remove("pin-top"),this.el.classList.remove("pinned"),this.el.classList.remove("pin-bottom")}static{I._pushpins=[]}}const A={throttle:100,scrollOffset:200,activeClass:"active",getActiveElement:t=>'a[href="#'+t+'"]',keepTopElementActive:!1,animationDuration:null};class M extends i{static _elements;static _count;static _increment;static _elementsInView;static _visibleElements;static _ticks;static _keptTopActiveElement=null;tickId;id;constructor(t,e){super(t,e,M),this.el.M_ScrollSpy=this,this.options={...M.defaults,...e},M._elements.push(this),M._count++,M._increment++,this.tickId=-1,this.id=M._increment.toString(),this._setupEventHandlers(),this._handleWindowScroll()}static get defaults(){return A}static init(t,e={}){return super.init(t,e,M)}static getInstance(t){return t.M_ScrollSpy}destroy(){M._elements.splice(M._elements.indexOf(this),1),M._elementsInView.splice(M._elementsInView.indexOf(this),1),M._visibleElements.splice(M._visibleElements.indexOf(this.el),1),M._count--,this._removeEventHandlers();document.querySelector(this.options.getActiveElement(this.el.id)).classList.remove(this.options.activeClass),this.el.M_ScrollSpy=void 0}_setupEventHandlers(){1===M._count&&(window.addEventListener("scroll",this._handleWindowScroll),window.addEventListener("resize",this._handleThrottledResize),document.body.addEventListener("click",this._handleTriggerClick))}_removeEventHandlers(){0===M._count&&(window.removeEventListener("scroll",this._handleWindowScroll),window.removeEventListener("resize",this._handleThrottledResize),document.body.removeEventListener("click",this._handleTriggerClick))}_handleThrottledResize=e.throttle((function(){this._handleWindowScroll()}),200).bind(this);_handleTriggerClick=t=>{const e=t.target;for(let i=M._elements.length-1;i>=0;i--){const s=M._elements[i];if(e===document.querySelector('a[href="#'+s.el.id+'"]')){t.preventDefault(),s.el.M_ScrollSpy.options.animationDuration?M._smoothScrollIntoView(s.el,s.el.M_ScrollSpy.options.animationDuration):s.el.scrollIntoView({behavior:"smooth"});break}}};_handleWindowScroll=()=>{M._ticks++;const t=e.getDocumentScrollTop(),i=e.getDocumentScrollLeft(),s=i+window.innerWidth,n=t+window.innerHeight,o=M._findElements(t,s,n,i);for(let t=0;t<o.length;t++){const e=o[t];e.tickId<0&&e._enter(),e.tickId=M._ticks}for(let t=0;t<M._elementsInView.length;t++){const e=M._elementsInView[t],i=e.tickId;i>=0&&i!==M._ticks&&(e._exit(),e.tickId=-1)}if(M._elementsInView=o,M._elements.length){const t=M._elements[0].el.M_ScrollSpy.options;if(t.keepTopElementActive&&0===M._visibleElements.length){this._resetKeptTopActiveElementIfNeeded();const e=M._elements.filter((t=>M._getDistanceToViewport(t.el)<=0)).sort(((t,e)=>{const i=M._getDistanceToViewport(t.el),s=M._getDistanceToViewport(e.el);return i<s?-1:i>s?1:0})),i=e.length?e[e.length-1]:M._elements[0],s=document.querySelector(t.getActiveElement(i.el.id));s?.classList.add(t.activeClass),M._keptTopActiveElement=s}}};static _offset(t){const e=t.getBoundingClientRect(),i=document.documentElement;return{top:e.top+window.pageYOffset-i.clientTop,left:e.left+window.pageXOffset-i.clientLeft}}static _findElements(t,e,i,s){const n=[];for(let o=0;o<M._elements.length;o++){const a=M._elements[o],l=t+a.options.scrollOffset||200;if(a.el.getBoundingClientRect().height>0){const t=M._offset(a.el).top,o=M._offset(a.el).left,r=o+a.el.getBoundingClientRect().width,h=t+a.el.getBoundingClientRect().height;!(o>e||r<s||t>i||h<l)&&n.push(a)}}return n}_enter(){if(M._visibleElements=M._visibleElements.filter((t=>0!==t.getBoundingClientRect().height)),M._visibleElements[0]){const t=document.querySelector(this.options.getActiveElement(M._visibleElements[0].id));t?.classList.remove(this.options.activeClass),M._visibleElements[0].M_ScrollSpy&&this.id<M._visibleElements[0].M_ScrollSpy.id?M._visibleElements.unshift(this.el):M._visibleElements.push(this.el)}else M._visibleElements.push(this.el);this._resetKeptTopActiveElementIfNeeded();const t=this.options.getActiveElement(M._visibleElements[0].id);document.querySelector(t)?.classList.add(this.options.activeClass)}_exit(){if(M._visibleElements=M._visibleElements.filter((t=>0!==t.getBoundingClientRect().height)),M._visibleElements[0]){const t=document.querySelector(this.options.getActiveElement(M._visibleElements[0].id));if(t?.classList.remove(this.options.activeClass),M._visibleElements=M._visibleElements.filter((t=>t.id!=this.el.id)),M._visibleElements[0]){const t=this.options.getActiveElement(M._visibleElements[0].id);document.querySelector(t)?.classList.add(this.options.activeClass),this._resetKeptTopActiveElementIfNeeded()}}}_resetKeptTopActiveElementIfNeeded(){M._keptTopActiveElement&&(M._keptTopActiveElement.classList.remove(this.options.activeClass),M._keptTopActiveElement=null)}static _getDistanceToViewport(t){return t.getBoundingClientRect().top}static _smoothScrollIntoView(t,e=300){const i=t.getBoundingClientRect().top+(window.scrollY||window.pageYOffset),s=window.scrollY||window.pageYOffset,n=i-s,o=performance.now();requestAnimationFrame((function t(a){const l=a-o,r=Math.min(l/e,1),h=s+n*r;r<1?(window.scrollTo(0,h),requestAnimationFrame(t)):window.scrollTo(0,i)}))}static{M._elements=[],M._elementsInView=[],M._visibleElements=[],M._count=0,M._increment=0,M._ticks=0}}const O={edge:"left",draggable:!0,dragTargetWidth:"10px",inDuration:250,outDuration:200,onOpenStart:null,onOpenEnd:null,onCloseStart:null,onCloseEnd:null,preventScrolling:!0};class R extends i{id;isOpen;isFixed;isDragged;lastWindowWidth;lastWindowHeight;static _sidenavs;_overlay;dragTarget;_startingXpos;_xPos;_time;_width;_initialScrollTop;_verticallyScrolling;deltaX;velocityX;percentOpen;constructor(t,e){super(t,e,R),this.el.M_Sidenav=this,this.options={...R.defaults,...e},this.id=this.el.id,this.isOpen=!1,this.isFixed=this.el.classList.contains("sidenav-fixed"),this.isDragged=!1,this.lastWindowWidth=window.innerWidth,this.lastWindowHeight=window.innerHeight,this._createOverlay(),this._createDragTarget(),this._setupEventHandlers(),this._setupClasses(),this._setupFixed(),R._sidenavs.push(this)}static get defaults(){return O}static init(t,e={}){return super.init(t,e,R)}static getInstance(t){return t.M_Sidenav}destroy(){this._removeEventHandlers(),this._enableBodyScrolling(),this._overlay.parentNode.removeChild(this._overlay),this.dragTarget.parentNode.removeChild(this.dragTarget),this.el.M_Sidenav=void 0,this.el.style.transform="";const t=R._sidenavs.indexOf(this);t>=0&&R._sidenavs.splice(t,1)}_createOverlay(){this._overlay=document.createElement("div"),this._overlay.classList.add("sidenav-overlay"),this._overlay.addEventListener("click",this.close),document.body.appendChild(this._overlay)}_setupEventHandlers(){0===R._sidenavs.length&&document.body.addEventListener("click",this._handleTriggerClick);this.dragTarget.addEventListener("touchmove",this._handleDragTargetDrag,null),this.dragTarget.addEventListener("touchend",this._handleDragTargetRelease),this._overlay.addEventListener("touchmove",this._handleCloseDrag,null),this._overlay.addEventListener("touchend",this._handleCloseRelease),this.el.addEventListener("touchmove",this._handleCloseDrag),this.el.addEventListener("touchend",this._handleCloseRelease),this.el.addEventListener("click",this._handleCloseTriggerClick),this.isFixed&&window.addEventListener("resize",this._handleWindowResize),this._setAriaHidden(),this._setTabIndex()}_removeEventHandlers(){1===R._sidenavs.length&&document.body.removeEventListener("click",this._handleTriggerClick),this.dragTarget.removeEventListener("touchmove",this._handleDragTargetDrag),this.dragTarget.removeEventListener("touchend",this._handleDragTargetRelease),this._overlay.removeEventListener("touchmove",this._handleCloseDrag),this._overlay.removeEventListener("touchend",this._handleCloseRelease),this.el.removeEventListener("touchmove",this._handleCloseDrag),this.el.removeEventListener("touchend",this._handleCloseRelease),this.el.removeEventListener("click",this._handleCloseTriggerClick),this.isFixed&&window.removeEventListener("resize",this._handleWindowResize)}_handleTriggerClick(t){const i=t.target.closest(".sidenav-trigger");if(t.target&&i){const s=e.getIdFromTrigger(i),n=document.getElementById(s).M_Sidenav;n&&n.open(),t.preventDefault()}}_startDrag(t){const i=t.targetTouches[0].clientX;this.isDragged=!0,this._startingXpos=i,this._xPos=this._startingXpos,this._time=Date.now(),this._width=this.el.getBoundingClientRect().width,this._overlay.style.display="block",this._initialScrollTop=this.isOpen?this.el.scrollTop:e.getDocumentScrollTop(),this._verticallyScrolling=!1}_dragMoveUpdate(t){const i=t.targetTouches[0].clientX,s=this.isOpen?this.el.scrollTop:e.getDocumentScrollTop();this.deltaX=Math.abs(this._xPos-i),this._xPos=i,this.velocityX=this.deltaX/(Date.now()-this._time),this._time=Date.now(),this._initialScrollTop!==s&&(this._verticallyScrolling=!0)}_handleDragTargetDrag=t=>{if(!this._isDraggable())return;let e=this._calculateDelta(t);const i=e>0?"right":"left";e=Math.min(this._width,Math.abs(e)),this.options.edge===i&&(e=0);let s=e,n="translateX(-100%)";"right"===this.options.edge&&(n="translateX(100%)",s=-s),this.percentOpen=Math.min(1,e/this._width),this.el.style.transform=`${n} translateX(${s}px)`,this._overlay.style.opacity=this.percentOpen.toString()};_handleDragTargetRelease=()=>{this.isDragged&&(this.percentOpen>.2?this.open():this._animateOut(),this.isDragged=!1,this._verticallyScrolling=!1)};_handleCloseDrag=t=>{if(!this.isOpen||!this._isDraggable())return;let e=this._calculateDelta(t);const i=e>0?"right":"left";e=Math.min(this._width,Math.abs(e)),this.options.edge!==i&&(e=0);let s=-e;"right"===this.options.edge&&(s=-s),this.percentOpen=Math.min(1,1-e/this._width),this.el.style.transform=`translateX(${s}px)`,this._overlay.style.opacity=this.percentOpen.toString()};_calculateDelta=t=>(this.isDragged||this._startDrag(t),this._dragMoveUpdate(t),this._xPos-this._startingXpos);_handleCloseRelease=()=>{this.isOpen&&this.isDragged&&(this.percentOpen>.8?this._animateIn():this.close(),this.isDragged=!1,this._verticallyScrolling=!1)};_handleCloseTriggerClick=t=>{t.target.closest(".sidenav-close")&&!this._isCurrentlyFixed()&&this.close()};_handleWindowResize=()=>{this.lastWindowWidth!==window.innerWidth&&(window.innerWidth>992?this.open():this.close()),this.lastWindowWidth=window.innerWidth,this.lastWindowHeight=window.innerHeight};_setupClasses(){"right"===this.options.edge&&(this.el.classList.add("right-aligned"),this.dragTarget.classList.add("right-aligned"))}_removeClasses(){this.el.classList.remove("right-aligned"),this.dragTarget.classList.remove("right-aligned")}_setupFixed(){this._isCurrentlyFixed()&&this.open()}_isDraggable(){return this.options.draggable&&!this._isCurrentlyFixed()&&!this._verticallyScrolling}_isCurrentlyFixed(){return this.isFixed&&window.innerWidth>992}_createDragTarget(){const t=document.createElement("div");t.classList.add("drag-target"),t.style.width=this.options.dragTargetWidth,document.body.appendChild(t),this.dragTarget=t}_preventBodyScrolling(){document.body.style.overflow="hidden"}_enableBodyScrolling(){document.body.style.overflow=""}open=()=>{!0!==this.isOpen&&(this.isOpen=!0,"function"==typeof this.options.onOpenStart&&this.options.onOpenStart.call(this,this.el),this._isCurrentlyFixed()?(this.el.style.transform="translateX(0)",this._enableBodyScrolling(),this._overlay.style.display="none"):(this.options.preventScrolling&&this._preventBodyScrolling(),this.isDragged&&1==this.percentOpen||this._animateIn(),this._setAriaHidden(),this._setTabIndex()))};close=()=>{if(!1!==this.isOpen)if(this.isOpen=!1,"function"==typeof this.options.onCloseStart&&this.options.onCloseStart.call(this,this.el),this._isCurrentlyFixed()){const t="left"===this.options.edge?"-105%":"105%";this.el.style.transform=`translateX(${t})`}else this._enableBodyScrolling(),this.isDragged&&0==this.percentOpen?this._overlay.style.display="none":this._animateOut(),this._setAriaHidden(),this._setTabIndex()};_animateIn(){this._animateSidenavIn(),this._animateOverlayIn()}_animateOut(){this._animateSidenavOut(),this._animateOverlayOut()}_animateSidenavIn(){let t="left"===this.options.edge?-1:1;this.isDragged&&(t="left"===this.options.edge?t+this.percentOpen:t-this.percentOpen);const e=this.options.inDuration;this.el.style.transition="none",this.el.style.transform="translateX("+100*t+"%)",setTimeout((()=>{this.el.style.transition=`transform ${e}ms ease`,this.el.style.transform="translateX(0)"}),1),setTimeout((()=>{"function"==typeof this.options.onOpenEnd&&this.options.onOpenEnd.call(this,this.el)}),e)}_animateSidenavOut(){const t="left"===this.options.edge?-1:1,e=this.options.outDuration;this.el.style.transition=`transform ${e}ms ease`,this.el.style.transform="translateX("+100*t+"%)",setTimeout((()=>{"function"==typeof this.options.onCloseEnd&&this.options.onCloseEnd.call(this,this.el)}),e)}_animateOverlayIn(){let t=0;this.isDragged?t=this.percentOpen:this._overlay.style.display="block";const e=this.options.inDuration;this._overlay.style.transition="none",this._overlay.style.opacity=t.toString(),setTimeout((()=>{this._overlay.style.transition=`opacity ${e}ms ease`,this._overlay.style.opacity="1"}),1)}_animateOverlayOut(){const t=this.options.outDuration;this._overlay.style.transition=`opacity ${t}ms ease`,this._overlay.style.opacity="0",setTimeout((()=>{this._overlay.style.display="none"}),t)}_setAriaHidden=()=>{this.el.ariaHidden=this.isOpen?"false":"true";const t=document.querySelector(".nav-wrapper ul");t&&(t.ariaHidden=this.isOpen.toString())};_setTabIndex=()=>{const t=document.querySelectorAll(".nav-wrapper ul li a"),e=document.querySelectorAll(".sidenav li a");t&&t.forEach((t=>{t.tabIndex=this.isOpen?-1:0})),e&&e.forEach((t=>{t.tabIndex=this.isOpen?0:-1}))};static{R._sidenavs=[]}}const H={duration:300,onShow:null,swipeable:!1,responsiveThreshold:1/0};class W extends i{_tabLinks;_index;_indicator;_tabWidth;_tabsWidth;_tabsCarousel;_activeTabLink;_content;constructor(t,e){super(t,e,W),this.el.M_Tabs=this,this.options={...W.defaults,...e},this._tabLinks=this.el.querySelectorAll("li.tab > a"),this._index=0,this._setupActiveTabLink(),this.options.swipeable?this._setupSwipeableTabs():this._setupNormalTabs(),this._setTabsAndTabWidth(),this._createIndicator(),this._setupEventHandlers()}static get defaults(){return H}static init(t,e={}){return super.init(t,e,W)}static getInstance(t){return t.M_Tabs}destroy(){this._removeEventHandlers(),this._indicator.parentNode.removeChild(this._indicator),this.options.swipeable?this._teardownSwipeableTabs():this._teardownNormalTabs(),this.el.M_Tabs=void 0}get index(){return this._index}_setupEventHandlers(){window.addEventListener("resize",this._handleWindowResize),this.el.addEventListener("click",this._handleTabClick)}_removeEventHandlers(){window.removeEventListener("resize",this._handleWindowResize),this.el.removeEventListener("click",this._handleTabClick)}_handleWindowResize=()=>{this._setTabsAndTabWidth(),0!==this._tabWidth&&0!==this._tabsWidth&&(this._indicator.style.left=this._calcLeftPos(this._activeTabLink)+"px",this._indicator.style.right=this._calcRightPos(this._activeTabLink)+"px")};_handleTabClick=t=>{let e=t.target;if(!e)return;let i=e.parentElement;for(;i&&!i.classList.contains("tab");)e=e.parentElement,i=i.parentElement;if(!e||!i.classList.contains("tab"))return;if(i.classList.contains("disabled"))return void t.preventDefault();if(e.hasAttribute("target"))return;this._activeTabLink.classList.remove("active");const s=this._content;this._activeTabLink=e,e.hash&&(this._content=document.querySelector(e.hash)),this._tabLinks=this.el.querySelectorAll("li.tab > a"),this._activeTabLink.classList.add("active");const n=this._index;this._index=Math.max(Array.from(this._tabLinks).indexOf(e),0),this.options.swipeable?this._tabsCarousel&&this._tabsCarousel.set(this._index,(()=>{"function"==typeof this.options.onShow&&this.options.onShow.call(this,this._content)})):this._content&&(this._content.style.display="block",this._content.classList.add("active"),"function"==typeof this.options.onShow&&this.options.onShow.call(this,this._content),s&&s!==this._content&&(s.style.display="none",s.classList.remove("active"))),this._setTabsAndTabWidth(),this._animateIndicator(n),t.preventDefault()};_createIndicator(){const t=document.createElement("li");t.classList.add("indicator"),this.el.appendChild(t),this._indicator=t,this._indicator.style.left=this._calcLeftPos(this._activeTabLink)+"px",this._indicator.style.right=this._calcRightPos(this._activeTabLink)+"px"}_setupActiveTabLink(){if(this._activeTabLink=Array.from(this._tabLinks).find((t=>t.getAttribute("href")===location.hash)),!this._activeTabLink){let t=this.el.querySelector("li.tab a.active");t||(t=this.el.querySelector("li.tab a")),this._activeTabLink=t}Array.from(this._tabLinks).forEach((t=>t.classList.remove("active"))),this._activeTabLink.classList.add("active"),this._index=Math.max(Array.from(this._tabLinks).indexOf(this._activeTabLink),0),this._activeTabLink&&this._activeTabLink.hash&&(this._content=document.querySelector(this._activeTabLink.hash),this._content&&this._content.classList.add("active"))}_setupSwipeableTabs(){window.innerWidth>this.options.responsiveThreshold&&(this.options.swipeable=!1);const t=[];this._tabLinks.forEach((e=>{if(e.hash){const i=document.querySelector(e.hash);i.classList.add("carousel-item"),t.push(i)}}));const e=document.createElement("div");e.classList.add("tabs-content","carousel","carousel-slider"),t[0].parentElement.insertBefore(e,t[0]),t.forEach((t=>{e.appendChild(t),t.style.display=""}));const i=this._activeTabLink.parentElement,s=Array.from(i.parentNode.children).indexOf(i);this._tabsCarousel=p.init(e,{fullWidth:!0,noWrap:!0,onCycleTo:t=>{const e=this._index;this._index=Array.from(t.parentNode.children).indexOf(t),this._activeTabLink.classList.remove("active"),this._activeTabLink=Array.from(this._tabLinks)[this._index],this._activeTabLink.classList.add("active"),this._animateIndicator(e),"function"==typeof this.options.onShow&&this.options.onShow.call(this,this._content)}}),this._tabsCarousel.set(s)}_teardownSwipeableTabs(){const t=this._tabsCarousel.el;this._tabsCarousel.destroy(),t.append(t.parentElement),t.remove()}_setupNormalTabs(){Array.from(this._tabLinks).forEach((t=>{if(t!==this._activeTabLink&&t.hash){const e=document.querySelector(t.hash);e&&(e.style.display="none")}}))}_teardownNormalTabs(){this._tabLinks.forEach((t=>{if(t.hash){const e=document.querySelector(t.hash);e&&(e.style.display="")}}))}_setTabsAndTabWidth(){this._tabsWidth=this.el.getBoundingClientRect().width,this._tabWidth=Math.max(this._tabsWidth,this.el.scrollWidth)/this._tabLinks.length}_calcRightPos(t){return Math.ceil(this._tabsWidth-t.offsetLeft-t.getBoundingClientRect().width)}_calcLeftPos(t){return Math.floor(t.offsetLeft)}updateTabIndicator(){this._setTabsAndTabWidth(),this._animateIndicator(this._index)}_animateIndicator(t){let e=0,i=0;this._index-t>=0?e=90:i=90,this._indicator.style.transition=`\n      left ${this.options.duration}ms ease-out ${e}ms,\n      right ${this.options.duration}ms ease-out ${i}ms`,this._indicator.style.left=this._calcLeftPos(this._activeTabLink)+"px",this._indicator.style.right=this._calcRightPos(this._activeTabLink)+"px"}select(t){const e=Array.from(this._tabLinks).find((e=>e.getAttribute("href")==="#"+t));e&&e.click()}}const P={onOpen:null,onClose:null};class B extends i{isOpen;static _taptargets;wrapper;originEl;waveEl;contentEl;constructor(t,e){super(t,e,B),this.el.M_TapTarget=this,this.options={...B.defaults,...e},this.isOpen=!1,this.originEl=document.querySelector(`#${t.dataset.target}`),this.originEl.tabIndex=0,this._setup(),this._calculatePositioning(),this._setupEventHandlers(),B._taptargets.push(this)}static get defaults(){return P}static init(t,e={}){return super.init(t,e,B)}static getInstance(t){return t.M_TapTarget}destroy(){this._removeEventHandlers(),this.el.M_TapTarget=void 0;const t=B._taptargets.indexOf(this);t>=0&&B._taptargets.splice(t,1)}_setupEventHandlers(){this.originEl.addEventListener("click",this._handleTargetToggle),this.originEl.addEventListener("keypress",this._handleKeyboardInteraction,!0),window.addEventListener("resize",this._handleThrottledResize)}_removeEventHandlers(){this.originEl.removeEventListener("click",this._handleTargetToggle),this.originEl.removeEventListener("keypress",this._handleKeyboardInteraction,!0),window.removeEventListener("resize",this._handleThrottledResize)}_handleThrottledResize=e.throttle((function(){this._handleResize()}),200).bind(this);_handleKeyboardInteraction=t=>{e.keys.ENTER.includes(t.key)&&this._handleTargetToggle()};_handleTargetToggle=()=>{this.isOpen?this.close():this.open()};_handleResize=()=>{this._calculatePositioning()};_handleDocumentClick=t=>{t.target.closest(`#${this.el.dataset.target}`)===this.originEl||t.target.closest(".tap-target-wrapper")||this.close()};_setup(){this.wrapper=this.el.parentElement,this.waveEl=this.wrapper.querySelector(".tap-target-wave"),this.el.parentElement.ariaExpanded="false",this.originEl.style.zIndex="1002",this.contentEl=this.el.querySelector(".tap-target-content"),this.wrapper.classList.contains(".tap-target-wrapper")||(this.wrapper=document.createElement("div"),this.wrapper.classList.add("tap-target-wrapper"),this.el.before(this.wrapper),this.wrapper.append(this.el)),this.contentEl||(this.contentEl=document.createElement("div"),this.contentEl.classList.add("tap-target-content"),this.el.append(this.contentEl)),this.waveEl||(this.waveEl=document.createElement("div"),this.waveEl.classList.add("tap-target-wave"),this.wrapper.append(this.waveEl))}_offset(t){const e=t.getBoundingClientRect(),i=document.documentElement;return{top:e.top+window.pageYOffset-i.clientTop,left:e.left+window.pageXOffset-i.clientLeft}}_calculatePositioning(){let t="fixed"===getComputedStyle(this.originEl).position;if(!t){let e=this.originEl;const i=[];for(;(e=e.parentNode)&&e!==document;)i.push(e);for(let e=0;e<i.length&&(t="fixed"===getComputedStyle(i[e]).position,!t);e++);}const i=this.originEl.offsetWidth,s=this.originEl.offsetHeight,n=t?this._offset(this.originEl).top-e.getDocumentScrollTop():this._offset(this.originEl).top,o=t?this._offset(this.originEl).left-e.getDocumentScrollLeft():this._offset(this.originEl).left,a=window.innerWidth,l=window.innerHeight,r=a-document.documentElement.clientWidth,h=a/2,d=l/2,c=o<=h,p=o>h,u=n<=d,m=n>d,v=o>=.25*a&&o<=.75*a,_=this.el.offsetWidth,g=this.el.offsetHeight,y=n+s/2-g/2,f=o+i/2-_/2,E=t?"fixed":"absolute",w=v?_:_/2+i,b=g/2,L=u?g/2:0,C=c&&!v?_/2-i:0,k=i,T=m?"bottom":"top",D=2*i,x=D,S=g/2-x/2,I=_/2-D/2;this.wrapper.style.top=u?y+"px":"",this.wrapper.style.right=p?a-f-_-r+"px":"",this.wrapper.style.bottom=m?l-y-g+"px":"",this.wrapper.style.left=c?f+"px":"",this.wrapper.style.position=E,this.contentEl.style.width=w+"px",this.contentEl.style.height=b+"px",this.contentEl.style.top=L+"px",this.contentEl.style.right="0px",this.contentEl.style.bottom="0px",this.contentEl.style.left=C+"px",this.contentEl.style.padding=k+"px",this.contentEl.style.verticalAlign=T,this.waveEl.style.top=S+"px",this.waveEl.style.left=I+"px",this.waveEl.style.width=D+"px",this.waveEl.style.height=x+"px"}open=()=>{this.isOpen||("function"==typeof this.options.onOpen&&this.options.onOpen.call(this,this.originEl),this.isOpen=!0,this.wrapper.classList.add("open"),this.wrapper.ariaExpanded="true",document.body.addEventListener("click",this._handleDocumentClick,!0),document.body.addEventListener("keypress",this._handleDocumentClick,!0),document.body.addEventListener("touchend",this._handleDocumentClick))};close=()=>{this.isOpen&&("function"==typeof this.options.onClose&&this.options.onClose.call(this,this.originEl),this.isOpen=!1,this.wrapper.classList.remove("open"),this.wrapper.ariaExpanded="false",document.body.removeEventListener("click",this._handleDocumentClick,!0),document.body.removeEventListener("keypress",this._handleDocumentClick,!0),document.body.removeEventListener("touchend",this._handleDocumentClick))};static{B._taptargets=[]}}const q={dialRadius:135,outerRadius:105,innerRadius:70,tickRadius:20,duration:350,container:null,defaultTime:"now",fromNow:0,showClearBtn:!1,autoSubmit:!0,i18n:{cancel:"Cancel",clear:"Clear",done:"Ok"},twelveHour:!0,vibrate:!0,onSelect:null,onInputInteraction:null,onDone:null,onCancel:null};class F extends i{id;containerEl;plate;digitalClock;inputHours;inputMinutes;x0;y0;moved;dx;dy;currentView;hand;minutesView;hours;minutes;time;amOrPm;static _template;vibrate;_canvas;hoursView;spanAmPm;footer;_amBtn;_pmBtn;bg;bearing;g;toggleViewTimer;vibrateTimer;constructor(t,i){super(t,i,F),this.el.M_Timepicker=this,this.options={...F.defaults,...i},this.id=e.guid(),this._insertHTMLIntoDOM(),this._setupVariables(),this._setupEventHandlers(),this._clockSetup(),this._pickerSetup()}static get defaults(){return q}static init(t,e={}){return super.init(t,e,F)}static _addLeadingZero(t){return(t<10?"0":"")+t}static _createSVGEl(t){return document.createElementNS("http://www.w3.org/2000/svg",t)}static _Pos(t){return t.type.startsWith("touch")&&t.targetTouches.length>=1?{x:t.targetTouches[0].clientX,y:t.targetTouches[0].clientY}:{x:t.clientX,y:t.clientY}}static getInstance(t){return t.M_Timepicker}destroy(){this._removeEventHandlers(),this.containerEl.remove(),this.el.M_Timepicker=void 0}_setupEventHandlers(){this.el.addEventListener("click",this._handleInputClick),this.el.addEventListener("keydown",this._handleInputKeydown),this.plate.addEventListener("mousedown",this._handleClockClickStart),this.plate.addEventListener("touchstart",this._handleClockClickStart),this.digitalClock.addEventListener("keyup",this._inputFromTextField),this.inputHours.addEventListener("focus",(()=>this.showView("hours"))),this.inputHours.addEventListener("focusout",(()=>this.formatHours())),this.inputMinutes.addEventListener("focus",(()=>this.showView("minutes"))),this.inputMinutes.addEventListener("focusout",(()=>this.formatMinutes()))}_removeEventHandlers(){this.el.removeEventListener("click",this._handleInputClick),this.el.removeEventListener("keydown",this._handleInputKeydown)}_handleInputClick=()=>{this.inputHours.focus(),"function"==typeof this.options.onInputInteraction&&this.options.onInputInteraction.call(this)};_handleInputKeydown=t=>{e.keys.ENTER.includes(t.key)&&(t.preventDefault(),this.inputHours.focus(),"function"==typeof this.options.onInputInteraction&&this.options.onInputInteraction.call(this))};_handleTimeInputEnterKey=t=>{e.keys.ENTER.includes(t.key)&&(t.preventDefault(),this._inputFromTextField())};_handleClockClickStart=t=>{t.preventDefault();const e=this.plate.getBoundingClientRect(),i=e.left,s=e.top;this.x0=i+this.options.dialRadius,this.y0=s+this.options.dialRadius,this.moved=!1;const n=F._Pos(t);this.dx=n.x-this.x0,this.dy=n.y-this.y0,this.setHand(this.dx,this.dy,!1),document.addEventListener("mousemove",this._handleDocumentClickMove),document.addEventListener("touchmove",this._handleDocumentClickMove),document.addEventListener("mouseup",this._handleDocumentClickEnd),document.addEventListener("touchend",this._handleDocumentClickEnd)};_handleDocumentClickMove=t=>{t.preventDefault();const e=F._Pos(t),i=e.x-this.x0,s=e.y-this.y0;this.moved=!0,this.setHand(i,s,!1)};_handleDocumentClickEnd=t=>{t.preventDefault(),document.removeEventListener("mouseup",this._handleDocumentClickEnd),document.removeEventListener("touchend",this._handleDocumentClickEnd);const e=F._Pos(t),i=e.x-this.x0,s=e.y-this.y0;this.moved&&i===this.dx&&s===this.dy&&this.setHand(i,s),"hours"===this.currentView?(this.inputMinutes.focus(),this.showView("minutes",this.options.duration/2)):setTimeout((()=>{this.options.autoSubmit&&this.done()}),this.options.duration/2),"function"==typeof this.options.onSelect&&this.options.onSelect.call(this,this.hours,this.minutes),document.removeEventListener("mousemove",this._handleDocumentClickMove),document.removeEventListener("touchmove",this._handleDocumentClickMove)};_insertHTMLIntoDOM(){const t=document.createElement("template");t.innerHTML=F._template.trim(),this.containerEl=t.content.firstChild,this.containerEl.id="container-"+this.id;const e=this.options.container,i=e instanceof HTMLElement?e:document.querySelector(e);this.options.container&&i?i.append(this.containerEl):this.el.parentElement.appendChild(this.containerEl)}_setupVariables(){this.currentView="hours",this.vibrate=navigator.vibrate?"vibrate":navigator.webkitVibrate?"webkitVibrate":null,this._canvas=this.containerEl.querySelector(".timepicker-canvas"),this.plate=this.containerEl.querySelector(".timepicker-plate"),this.digitalClock=this.containerEl.querySelector(".timepicker-display-column"),this.hoursView=this.containerEl.querySelector(".timepicker-hours"),this.minutesView=this.containerEl.querySelector(".timepicker-minutes"),this.inputHours=this.containerEl.querySelector(".timepicker-input-hours"),this.inputMinutes=this.containerEl.querySelector(".timepicker-input-minutes"),this.spanAmPm=this.containerEl.querySelector(".timepicker-span-am-pm"),this.footer=this.containerEl.querySelector(".timepicker-footer"),this.amOrPm="PM"}_createButton(t,e){const i=document.createElement("button");return i.classList.add("btn","btn-flat","waves-effect","text"),i.style.visibility=e,i.type="button",i.tabIndex=-1,i.innerText=t,i}_pickerSetup(){const t=this._createButton(this.options.i18n.clear,this.options.showClearBtn?"":"hidden");if(t.classList.add("timepicker-clear"),t.addEventListener("click",this.clear),this.footer.appendChild(t),!this.options.autoSubmit){const t=document.createElement("div");t.classList.add("confirmation-btns"),this.footer.append(t);const e=this._createButton(this.options.i18n.cancel,"");e.classList.add("timepicker-close"),e.addEventListener("click",this.close),t.appendChild(e);const i=this._createButton(this.options.i18n.done,"");i.classList.add("timepicker-close"),i.addEventListener("click",this.done),t.appendChild(i)}this._updateTimeFromInput(),this.showView("hours")}_clockSetup(){this.options.twelveHour&&(this._amBtn=document.createElement("div"),this._amBtn.classList.add("am-btn","btn"),this._amBtn.innerText="AM",this._amBtn.tabIndex=0,this._amBtn.addEventListener("click",this._handleAmPmClick),this._amBtn.addEventListener("keypress",this._handleAmPmKeypress),this.spanAmPm.appendChild(this._amBtn),this._pmBtn=document.createElement("div"),this._pmBtn.classList.add("pm-btn","btn"),this._pmBtn.innerText="PM",this._pmBtn.tabIndex=0,this._pmBtn.addEventListener("click",this._handleAmPmClick),this._pmBtn.addEventListener("keypress",this._handleAmPmKeypress),this.spanAmPm.appendChild(this._pmBtn)),this._buildHoursView(),this._buildMinutesView(),this._buildSVGClock()}_buildSVGClock(){const t=this.options.dialRadius,e=this.options.tickRadius,i=2*t,s=F._createSVGEl("svg");s.setAttribute("class","timepicker-svg"),s.setAttribute("width",i.toString()),s.setAttribute("height",i.toString());const n=F._createSVGEl("g");n.setAttribute("transform","translate("+t+","+t+")");const o=F._createSVGEl("circle");o.setAttribute("class","timepicker-canvas-bearing"),o.setAttribute("cx","0"),o.setAttribute("cy","0"),o.setAttribute("r","4");const a=F._createSVGEl("line");a.setAttribute("x1","0"),a.setAttribute("y1","0");const l=F._createSVGEl("circle");l.setAttribute("class","timepicker-canvas-bg"),l.setAttribute("r",e.toString()),n.appendChild(a),n.appendChild(l),n.appendChild(o),s.appendChild(n),this._canvas.appendChild(s),this.hand=a,this.bg=l,this.bearing=o,this.g=n}_buildHoursView(){if(this.options.twelveHour)for(let t=1;t<13;t+=1){const e=t/6*Math.PI,i=this.options.outerRadius;this._buildHoursTick(t,e,i)}else for(let t=0;t<24;t+=1){const e=t/6*Math.PI,i=t>0&&t<13?this.options.innerRadius:this.options.outerRadius;this._buildHoursTick(t,e,i)}}_buildHoursTick(t,e,i){const s=document.createElement("div");s.classList.add("timepicker-tick"),s.style.left=this.options.dialRadius+Math.sin(e)*i-this.options.tickRadius+"px",s.style.top=this.options.dialRadius-Math.cos(e)*i-this.options.tickRadius+"px",s.innerHTML=0===t?"00":t.toString(),this.hoursView.appendChild(s)}_buildMinutesView(){const t=document.createElement("div");t.classList.add("timepicker-tick");for(let e=0;e<60;e+=5){const i=t.cloneNode(!0),s=e/30*Math.PI;i.style.left=this.options.dialRadius+Math.sin(s)*this.options.outerRadius-this.options.tickRadius+"px",i.style.top=this.options.dialRadius-Math.cos(s)*this.options.outerRadius-this.options.tickRadius+"px",i.innerHTML=F._addLeadingZero(e),this.minutesView.appendChild(i)}}_handleAmPmClick=t=>{this._handleAmPmInteraction(t.target)};_handleAmPmKeypress=t=>{e.keys.ENTER.includes(t.key)&&this._handleAmPmInteraction(t.target)};_handleAmPmInteraction=t=>{this.amOrPm=t.classList.contains("am-btn")?"AM":"PM",this._updateAmPmView()};_updateAmPmView(){this.options.twelveHour&&("PM"===this.amOrPm?(this._amBtn.classList.remove("filled"),this._pmBtn.classList.add("filled")):"AM"===this.amOrPm&&(this._amBtn.classList.add("filled"),this._pmBtn.classList.remove("filled")))}_updateTimeFromInput(){let t=((this.el.value||this.options.defaultTime||"")+"").split(":");if(this.options.twelveHour&&void 0!==t[1]&&(t[1].toUpperCase().indexOf("AM")>0?this.amOrPm="AM":this.amOrPm="PM",t[1]=t[1].replace("AM","").replace("PM","")),"now"===t[0]){const e=new Date(+new Date+this.options.fromNow);t=[e.getHours().toString(),e.getMinutes().toString()],this.options.twelveHour&&(this.amOrPm=parseInt(t[0])>=12&&parseInt(t[0])<24?"PM":"AM")}this.hours=+t[0]||0,this.minutes=+t[1]||0,this.inputHours.value=F._addLeadingZero(this.hours),this.inputMinutes.value=F._addLeadingZero(this.minutes),this._updateAmPmView()}showView=(t,e=null)=>{"minutes"===t&&getComputedStyle(this.hoursView).visibility;const i="hours"===t,s=i?this.hoursView:this.minutesView,n=i?this.minutesView:this.hoursView;this.currentView=t,n.classList.add("timepicker-dial-out"),s.style.visibility="visible",s.classList.remove("timepicker-dial-out"),this.resetClock(e),clearTimeout(this.toggleViewTimer),this.toggleViewTimer=setTimeout((()=>{n.style.visibility="hidden"}),this.options.duration)};resetClock(t){const e=this.currentView,i=this[e],s="hours"===e,n=i*(Math.PI/(s?6:30)),o=s&&i>0&&i<13?this.options.innerRadius:this.options.outerRadius,a=Math.sin(n)*o,l=-Math.cos(n)*o;t?(this._canvas?.classList.add("timepicker-canvas-out"),setTimeout((()=>{this._canvas?.classList.remove("timepicker-canvas-out"),this.setHand(a,l)}),t)):this.setHand(a,l)}_inputFromTextField=()=>{const t="hours"===this.currentView;if(t&&""!==this.inputHours.value){const e=parseInt(this.inputHours.value);e>0&&e<(this.options.twelveHour?13:24)?this.hours=e:this.setHoursDefault(),this.drawClockFromTimeInput(this.hours,t)}else if(!t&&""!==this.inputMinutes.value){const e=parseInt(this.inputMinutes.value);e>=0&&e<60?this.minutes=e:(this.minutes=(new Date).getMinutes(),this.inputMinutes.value=this.minutes.toString()),this.drawClockFromTimeInput(this.minutes,t)}};drawClockFromTimeInput(t,e){const i=t*(Math.PI/(e?6:30));let s;s=this.options.twelveHour?this.options.outerRadius:e&&t>0&&t<13?this.options.innerRadius:this.options.outerRadius,this.setClockAttributes(i,s)}setHand(t,e,i=!1){const s="hours"===this.currentView,n=Math.PI/(s||i?6:30),o=Math.sqrt(t*t+e*e),a=s&&o<(this.options.outerRadius+this.options.innerRadius)/2;let l=Math.atan2(t,-e),r=a?this.options.innerRadius:this.options.outerRadius;this.options.twelveHour&&(r=this.options.outerRadius),l<0&&(l=2*Math.PI+l);let h=Math.round(l/n);l=h*n,this.options.twelveHour?s?0===h&&(h=12):(i&&(h*=5),60===h&&(h=0)):s?(12===h&&(h=0),h=a?0===h?12:h:0===h?0:h+12):(i&&(h*=5),60===h&&(h=0)),this[this.currentView]!==h&&this.vibrate&&this.options.vibrate&&(this.vibrateTimer||(navigator[this.vibrate](10),this.vibrateTimer=setTimeout((()=>{this.vibrateTimer=null}),100))),this[this.currentView]=h,s?this.inputHours.value=F._addLeadingZero(h):this.inputMinutes.value=F._addLeadingZero(h),this.setClockAttributes(l,r)}setClockAttributes(t,e){const i=Math.sin(t)*(e-this.options.tickRadius),s=-Math.cos(t)*(e-this.options.tickRadius),n=Math.sin(t)*e,o=-Math.cos(t)*e;this.hand.setAttribute("x2",i.toString()),this.hand.setAttribute("y2",s.toString()),this.bg.setAttribute("cx",n.toString()),this.bg.setAttribute("cy",o.toString())}formatHours(){""==this.inputHours.value&&this.setHoursDefault(),this.inputHours.value=F._addLeadingZero(Number(this.inputHours.value))}formatMinutes(){""==this.inputMinutes.value&&(this.minutes=(new Date).getMinutes()),this.inputMinutes.value=F._addLeadingZero(Number(this.inputMinutes.value))}setHoursDefault(){this.hours=(new Date).getHours(),this.inputHours.value=(this.hours%(this.options.twelveHour?12:24)).toString()}done=(t=null)=>{const e=this.el.value;let i=t?"":F._addLeadingZero(this.hours)+":"+F._addLeadingZero(this.minutes);this.time=i,!t&&this.options.twelveHour&&(i=`${i} ${this.amOrPm}`),this.el.value=i,i!==e&&this.el.dispatchEvent(new Event("change",{bubbles:!0,cancelable:!0,composed:!0}))};confirm=()=>{this.done(),"function"==typeof this.options.onDone&&setTimeout((()=>{this.options.onDone.call(this)}),this.options.duration/2)};cancel=()=>{this.clear(),"function"==typeof this.options.onDone&&this.options.onCancel.call(this)};clear=()=>{this.done(!0)};open(){return console.warn("Timepicker.close() is deprecated. Remove this method and wrap in modal yourself."),this}close(){return console.warn("Timepicker.close() is deprecated. Remove this method and wrap in modal yourself."),this}static{F._template='<div class="timepicker-container">\n          <div class="timepicker-digital-display">\n            <div class="timepicker-text-container">\n              <div class="timepicker-display-column timepicker-display-digital-clock">\n                <div class="timepicker-input-hours-wrapper">\n                  <input type="text" maxlength="2" class="timepicker-input-hours text-primary" />\n                </div>\n                <div class="timepicker-input-divider-wrapper">\n                  <span class="timepicker-input-divider">:</span>\n                </div>\n                <div class="timepicker-input-minutes-wrapper">\n                  <input type="text" maxlength="2" class="timepicker-input-minutes" />\n                </div>\n              </div>\n              <div class="timepicker-display-column timepicker-display-am-pm">\n                <div class="timepicker-span-am-pm"></div>\n              </div>\n            </div>\n          </div>\n          <div class="timepicker-analog-display">\n            <div class="timepicker-plate">\n              <div class="timepicker-canvas"></div>\n              <div class="timepicker-dial timepicker-hours"></div>\n              <div class="timepicker-dial timepicker-minutes timepicker-dial-out"></div>\n            </div>\n            <div class="timepicker-footer"></div>\n          </div>\n        </div>'}}const V={exitDelay:200,enterDelay:0,text:"",margin:5,inDuration:250,outDuration:200,position:"bottom",transitionMovement:10,opacity:1};class $ extends i{isOpen;isHovered;isFocused;tooltipEl;_exitDelayTimeout;_enterDelayTimeout;xMovement;yMovement;constructor(t,e){super(t,e,$),this.el.M_Tooltip=this,this.options={...$.defaults,...this._getAttributeOptions(),...e},this.isOpen=!1,this.isHovered=!1,this.isFocused=!1,this._appendTooltipEl(),this._setupEventHandlers()}static get defaults(){return V}static init(t,e={}){return super.init(t,e,$)}static getInstance(t){return t.M_Tooltip}destroy(){this.tooltipEl.remove(),this._removeEventHandlers(),this.el.M_Tooltip=void 0}_appendTooltipEl(){this.tooltipEl=document.createElement("div"),this.tooltipEl.classList.add("material-tooltip");const t=this.options.tooltipId?document.getElementById(this.options.tooltipId):document.createElement("div");this.tooltipEl.append(t),t.style.display="",t.classList.add("tooltip-content"),this._setTooltipContent(t),this.tooltipEl.appendChild(t),document.body.appendChild(this.tooltipEl)}_setTooltipContent(t){this.options.tooltipId||(t.innerText=this.options.text)}_updateTooltipContent(){this._setTooltipContent(this.tooltipEl.querySelector(".tooltip-content"))}_setupEventHandlers(){this.el.addEventListener("mouseenter",this._handleMouseEnter),this.el.addEventListener("mouseleave",this._handleMouseLeave),this.el.addEventListener("focus",this._handleFocus,!0),this.el.addEventListener("blur",this._handleBlur,!0)}_removeEventHandlers(){this.el.removeEventListener("mouseenter",this._handleMouseEnter),this.el.removeEventListener("mouseleave",this._handleMouseLeave),this.el.removeEventListener("focus",this._handleFocus,!0),this.el.removeEventListener("blur",this._handleBlur,!0)}open=t=>{this.isOpen||(t=void 0===t||void 0,this.isOpen=!0,this.options={...this.options,...this._getAttributeOptions()},this._updateTooltipContent(),this._setEnterDelayTimeout(t))};close=()=>{this.isOpen&&(this.isHovered=!1,this.isFocused=!1,this.isOpen=!1,this._setExitDelayTimeout())};_setExitDelayTimeout(){clearTimeout(this._exitDelayTimeout),this._exitDelayTimeout=setTimeout((()=>{this.isHovered||this.isFocused||this._animateOut()}),this.options.exitDelay)}_setEnterDelayTimeout(t){clearTimeout(this._enterDelayTimeout),this._enterDelayTimeout=setTimeout((()=>{(this.isHovered||this.isFocused||t)&&this._animateIn()}),this.options.enterDelay)}_positionTooltip(){const t=this.tooltipEl,i=this.el,s=i.offsetHeight,n=i.offsetWidth,o=t.offsetHeight,a=t.offsetWidth,l=this.options.margin;this.xMovement=0,this.yMovement=0;let r=i.getBoundingClientRect().top+e.getDocumentScrollTop(),h=i.getBoundingClientRect().left+e.getDocumentScrollLeft();"top"===this.options.position?(r+=-o-l,h+=n/2-a/2,this.yMovement=-this.options.transitionMovement):"right"===this.options.position?(r+=s/2-o/2,h+=n+l,this.xMovement=this.options.transitionMovement):"left"===this.options.position?(r+=s/2-o/2,h+=-a-l,this.xMovement=-this.options.transitionMovement):(r+=s+l,h+=n/2-a/2,this.yMovement=this.options.transitionMovement);const d=this._repositionWithinScreen(h,r,a,o);t.style.top=d.y+"px",t.style.left=d.x+"px"}_repositionWithinScreen(t,i,s,n){const o=e.getDocumentScrollLeft(),a=e.getDocumentScrollTop();let l=t-o,r=i-a;const h={left:l,top:r,width:s,height:n},d=this.options.margin+this.options.transitionMovement,c=e.checkWithinContainer(document.body,h,d);return c.left?l=d:c.right&&(l-=l+s-window.innerWidth),c.top?r=d:c.bottom&&(r-=r+n-window.innerHeight),{x:l+o,y:r+a}}_animateIn(){this._positionTooltip(),this.tooltipEl.style.visibility="visible";const t=this.options.inDuration;this.tooltipEl.style.transition=`\n      transform ${t}ms ease-out,\n      opacity ${t}ms ease-out`,setTimeout((()=>{this.tooltipEl.style.transform=`translateX(${this.xMovement}px) translateY(${this.yMovement}px)`,this.tooltipEl.style.opacity=(this.options.opacity||1).toString()}),1)}_animateOut(){const t=this.options.outDuration;this.tooltipEl.style.transition=`\n      transform ${t}ms ease-out,\n      opacity ${t}ms ease-out`,setTimeout((()=>{this.tooltipEl.style.transform="translateX(0px) translateY(0px)",this.tooltipEl.style.opacity="0"}),1)}_handleMouseEnter=()=>{this.isHovered=!0,this.isFocused=!1,this.open(!1)};_handleMouseLeave=()=>{this.isHovered=!1,this.isFocused=!1,this.close()};_handleFocus=()=>{e.tabPressed&&(this.isFocused=!0,this.open(!1))};_handleBlur=()=>{this.isFocused=!1,this.close()};_getAttributeOptions(){const t={},e=this.el.getAttribute("data-tooltip"),i=this.el.getAttribute("data-tooltip-id"),s=this.el.getAttribute("data-position");return e&&(t.text=e),s&&(t.position=s),i&&(t.tooltipId=i),t}}class N{static _offset(t){const e=t.getBoundingClientRect(),i=document.documentElement;return{top:e.top+window.pageYOffset-i.clientTop,left:e.left+window.pageXOffset-i.clientLeft}}static renderWaveEffect(t,e=null,i=null){const s=null===e;let n,o;const a=function(l){o||(o=l);const r=l-o;if(r<500){const o=r/500*(2-r/500),l=s?"circle at 50% 50%":`circle at ${e.x}px ${e.y}px`,h=`rgba(${i?.r||0}, ${i?.g||0}, ${i?.b||0}, ${.3*(1-o)})`,d=90*o+"%";t.style.backgroundImage="radial-gradient("+l+", "+h+" "+d+", transparent "+d+")",n=window.requestAnimationFrame(a)}else t.style.backgroundImage="none",window.cancelAnimationFrame(n)};n=window.requestAnimationFrame(a)}static Init(){"undefined"!=typeof document&&document?.addEventListener("DOMContentLoaded",(()=>{document.body.addEventListener("click",(t=>{const e=t.target,i=e.closest(".waves-effect");if(i&&i.contains(e)){const e=i.classList.contains("waves-circle"),s=t.pageX-N._offset(i).left,n=t.pageY-N._offset(i).top;let o=null;i.classList.contains("waves-light")&&(o={r:255,g:255,b:255}),N.renderWaveEffect(i,e?null:{x:s,y:n},o)}}))}))}}const z={};class X extends i{_mousedown;value;thumb;constructor(t,e){super(t,e,X),this.el.M_Range=this,this.options={...X.defaults,...e},this._mousedown=!1,this._setupThumb(),this._setupEventHandlers()}static get defaults(){return z}static init(t,e={}){return super.init(t,e,X)}static getInstance(t){return t.M_Range}destroy(){this._removeEventHandlers(),this._removeThumb(),this.el.M_Range=void 0}_setupEventHandlers(){this.el.addEventListener("change",this._handleRangeChange),this.el.addEventListener("mousedown",this._handleRangeMousedownTouchstart),this.el.addEventListener("touchstart",this._handleRangeMousedownTouchstart),this.el.addEventListener("input",this._handleRangeInputMousemoveTouchmove),this.el.addEventListener("mousemove",this._handleRangeInputMousemoveTouchmove),this.el.addEventListener("touchmove",this._handleRangeInputMousemoveTouchmove),this.el.addEventListener("mouseup",this._handleRangeMouseupTouchend),this.el.addEventListener("touchend",this._handleRangeMouseupTouchend),this.el.addEventListener("blur",this._handleRangeBlurMouseoutTouchleave),this.el.addEventListener("mouseout",this._handleRangeBlurMouseoutTouchleave),this.el.addEventListener("touchleave",this._handleRangeBlurMouseoutTouchleave)}_removeEventHandlers(){this.el.removeEventListener("change",this._handleRangeChange),this.el.removeEventListener("mousedown",this._handleRangeMousedownTouchstart),this.el.removeEventListener("touchstart",this._handleRangeMousedownTouchstart),this.el.removeEventListener("input",this._handleRangeInputMousemoveTouchmove),this.el.removeEventListener("mousemove",this._handleRangeInputMousemoveTouchmove),this.el.removeEventListener("touchmove",this._handleRangeInputMousemoveTouchmove),this.el.removeEventListener("mouseup",this._handleRangeMouseupTouchend),this.el.removeEventListener("touchend",this._handleRangeMouseupTouchend),this.el.removeEventListener("blur",this._handleRangeBlurMouseoutTouchleave),this.el.removeEventListener("mouseout",this._handleRangeBlurMouseoutTouchleave),this.el.removeEventListener("touchleave",this._handleRangeBlurMouseoutTouchleave)}_handleRangeChange=()=>{this.value.innerHTML=this.el.value,this.thumb.classList.contains("active")||this._showRangeBubble();const t=this._calcRangeOffset();this.thumb.classList.add("active"),this.thumb.style.left=t+"px"};_handleRangeMousedownTouchstart=t=>{if(this.value.innerHTML=this.el.value,this._mousedown=!0,this.el.classList.add("active"),this.thumb.classList.contains("active")||this._showRangeBubble(),"input"!==t.type){const t=this._calcRangeOffset();this.thumb.classList.add("active"),this.thumb.style.left=t+"px"}};_handleRangeInputMousemoveTouchmove=()=>{if(this._mousedown){this.thumb.classList.contains("active")||this._showRangeBubble();const t=this._calcRangeOffset();this.thumb.classList.add("active"),this.thumb.style.left=t+"px",this.value.innerHTML=this.el.value}};_handleRangeMouseupTouchend=()=>{this._mousedown=!1,this.el.classList.remove("active")};_handleRangeBlurMouseoutTouchleave=()=>{if(!this._mousedown){const t=7+parseInt(getComputedStyle(this.el).paddingLeft)+"px";if(this.thumb.classList.contains("active")){const e=100;this.thumb.style.transition="none",setTimeout((()=>{this.thumb.style.transition=`\n            height ${e}ms ease,\n            width ${e}ms ease,\n            top ${e}ms ease,\n            margin ${e}ms ease\n          `,this.thumb.style.height="0",this.thumb.style.width="0",this.thumb.style.top="0",this.thumb.style.marginLeft=t}),1)}this.thumb.classList.remove("active")}};_setupThumb(){this.thumb=document.createElement("span"),this.value=document.createElement("span"),this.thumb.classList.add("thumb"),this.value.classList.add("value"),this.thumb.append(this.value),this.el.after(this.thumb)}_removeThumb(){this.thumb.remove()}_showRangeBubble(){const t=-7+parseInt(getComputedStyle(this.thumb.parentElement).paddingLeft)+"px";this.thumb.style.transition="\n      height 300ms ease,\n      width 300ms ease,\n      top 300ms ease,\n      margin 300ms ease\n    ",this.thumb.style.height="30px",this.thumb.style.width="30px",this.thumb.style.top="-30px",this.thumb.style.marginLeft=t}_calcRangeOffset(){const t=this.el.getBoundingClientRect().width-15,e=parseFloat(this.el.getAttribute("max"))||100,i=parseFloat(this.el.getAttribute("min"))||0;return(parseFloat(this.el.value)-i)/(e-i)*t}static Init(){"undefined"!=typeof document&&X.init(document?.querySelectorAll("input[type=range]"),{})}}const K=Object.freeze({});class Y extends i{counterEl;isInvalid;isValidLength;constructor(t,e){super(t,{},Y),this.el.M_CharacterCounter=this,this.options={...Y.defaults,...e},this.isInvalid=!1,this.isValidLength=!1,this._setupCounter(),this._setupEventHandlers()}static get defaults(){return K}static init(t,e={}){return super.init(t,e,Y)}static getInstance(t){return t.M_CharacterCounter}destroy(){this._removeEventHandlers(),this.el.CharacterCounter=void 0,this._removeCounter()}_setupEventHandlers(){this.el.addEventListener("focus",this.updateCounter,!0),this.el.addEventListener("input",this.updateCounter,!0)}_removeEventHandlers(){this.el.removeEventListener("focus",this.updateCounter,!0),this.el.removeEventListener("input",this.updateCounter,!0)}_setupCounter(){this.counterEl=document.createElement("span"),this.counterEl.classList.add("character-counter"),this.counterEl.style.float="right",this.counterEl.style.fontSize="12px",this.counterEl.style.height="1",this.el.parentElement.appendChild(this.counterEl)}_removeCounter(){this.counterEl.remove()}updateCounter=()=>{const t=parseInt(this.el.getAttribute("maxlength")),e=this.el.value.length;this.isValidLength=e<=t;let i=e.toString();t&&(i+="/"+t,this._validateInput()),this.counterEl.innerHTML=i};_validateInput(){this.isValidLength&&this.isInvalid?(this.isInvalid=!1,this.el.classList.remove("invalid")):this.isValidLength||this.isInvalid||(this.isInvalid=!0,this.el.classList.remove("valid"),this.el.classList.add("invalid"))}}const j={indicators:!0,height:400,duration:500,interval:6e3,pauseOnFocus:!0,pauseOnHover:!0,indicatorLabelFunc:null};class U extends i{activeIndex;interval;eventPause;_slider;_slides;_activeSlide;_indicators;_hovered;_focused;_focusCurrent;_sliderId;constructor(t,i){super(t,i,U),this.el.M_Slider=this,this.options={...U.defaults,...i},this.interval=null,this.eventPause=!1,this._hovered=!1,this._focused=!1,this._focusCurrent=!1,this._slider=this.el.querySelector(".slides"),this._slides=Array.from(this._slider.querySelectorAll("li")),this.activeIndex=this._slides.findIndex((t=>t.classList.contains("active"))),-1!==this.activeIndex&&(this._activeSlide=this._slides[this.activeIndex]),this._setSliderHeight(),this._slider.hasAttribute("id")?this._sliderId=this._slider.getAttribute("id"):(this._sliderId="slider-"+e.guid(),this._slider.setAttribute("id",this._sliderId));const s="data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==";this._slides.forEach((t=>{const e=t.querySelector("img");e&&e.src!==s&&(e.style.backgroundImage="url("+e.src+")",e.src=s),t.hasAttribute("tabindex")||t.setAttribute("tabindex","-1"),t.style.visibility="hidden"})),this._setupIndicators(),this._activeSlide?(this._activeSlide.style.display="block",this._activeSlide.style.visibility="visible"):(this.activeIndex=0,this._slides[0].classList.add("active"),this._slides[0].style.visibility="visible",this._activeSlide=this._slides[0],this._animateSlide(this._slides[0],!0),this.options.indicators&&this._indicators[this.activeIndex].children[0].classList.add("active")),this._setupEventHandlers(),this.start()}static get defaults(){return j}static init(t,e={}){return super.init(t,e,U)}static getInstance(t){return t.M_Slider}destroy(){this.pause(),this._removeIndicators(),this._removeEventHandlers(),this.el.M_Slider=void 0}_setupEventHandlers(){this.options.pauseOnFocus&&(this.el.addEventListener("focusin",this._handleAutoPauseFocus),this.el.addEventListener("focusout",this._handleAutoStartFocus)),this.options.pauseOnHover&&(this.el.addEventListener("mouseenter",this._handleAutoPauseHover),this.el.addEventListener("mouseleave",this._handleAutoStartHover)),this.options.indicators&&this._indicators.forEach((t=>{t.addEventListener("click",this._handleIndicatorClick)}))}_removeEventHandlers(){this.options.pauseOnFocus&&(this.el.removeEventListener("focusin",this._handleAutoPauseFocus),this.el.removeEventListener("focusout",this._handleAutoStartFocus)),this.options.pauseOnHover&&(this.el.removeEventListener("mouseenter",this._handleAutoPauseHover),this.el.removeEventListener("mouseleave",this._handleAutoStartHover)),this.options.indicators&&this._indicators.forEach((t=>{t.removeEventListener("click",this._handleIndicatorClick)}))}_handleIndicatorClick=t=>{const e=t.target.parentElement,i=[...e.parentNode.children].indexOf(e);this._focusCurrent=!0,this.set(i)};_handleAutoPauseHover=()=>{this._hovered=!0,null!=this.interval&&this._pause(!0)};_handleAutoPauseFocus=()=>{this._focused=!0,null!=this.interval&&this._pause(!0)};_handleAutoStartHover=()=>{this._hovered=!1,this.options.pauseOnFocus&&this._focused||!this.eventPause||this.start()};_handleAutoStartFocus=()=>{this._focused=!1,this.options.pauseOnHover&&this._hovered||!this.eventPause||this.start()};_handleInterval=()=>{const t=this._slider.querySelector(".active");let e=[...t.parentNode.children].indexOf(t);this._slides.length===e+1?e=0:e+=1,this.set(e)};_animateSlide(t,e){let i=0,s=0;t.style.opacity=e?"0":"1",setTimeout((()=>{t.style.transition=`opacity ${this.options.duration}ms ease`,t.style.opacity=e?"1":"0"}),1);const n=t.querySelector(".caption");n&&(n.classList.contains("center-align")?s=-100:n.classList.contains("right-align")?i=100:n.classList.contains("left-align")&&(i=-100),n.style.opacity=e?"0":"1",n.style.transform=e?`translate(${i}px, ${s}px)`:"translate(0, 0)",setTimeout((()=>{n.style.transition=`opacity ${this.options.duration}ms ease, transform ${this.options.duration}ms ease`,n.style.opacity=e?"1":"0",n.style.transform=e?"translate(0, 0)":`translate(${i}px, ${s}px)`}),this.options.duration))}_setSliderHeight(){this.el.classList.contains("fullscreen")||(this.options.indicators?this.el.style.height=this.options.height+40+"px":this.el.style.height=this.options.height+"px",this._slider.style.height=this.options.height+"px")}_setupIndicators(){if(this.options.indicators){const t=document.createElement("ul");t.classList.add("indicators");const e=[];this._slides.forEach(((i,s)=>{const n=this.options.indicatorLabelFunc?this.options.indicatorLabelFunc.call(this,s+1,0===s):`${s+1}`,o=document.createElement("li");o.classList.add("indicator-item"),o.innerHTML=`<button type="button" class="indicator-item-btn" aria-label="${n}" aria-controls="${this._sliderId}"></button>`,e.push(o),t.append(o)})),this.el.append(t),this._indicators=e}}_removeIndicators(){this.el.querySelector("ul.indicators").remove()}set(t){if(t>=this._slides.length?t=0:t<0&&(t=this._slides.length-1),this.activeIndex===t)return;this._activeSlide=this._slides[this.activeIndex];const e=this._activeSlide.querySelector(".caption");if(this._activeSlide.classList.remove("active"),this._slides.forEach((t=>t.style.visibility="visible")),this._activeSlide.style.opacity="0",setTimeout((()=>{this._slides.forEach((t=>{t.classList.contains("active")||(t.style.opacity="0",t.style.transform="translate(0, 0)",t.style.visibility="hidden")}))}),this.options.duration),e.style.opacity="0",this.options.indicators){const e=this._indicators[this.activeIndex].children[0],i=this._indicators[t].children[0];e.classList.remove("active"),i.classList.add("active"),"function"==typeof this.options.indicatorLabelFunc&&(e.ariaLabel=this.options.indicatorLabelFunc.call(this,this.activeIndex,!1),i.ariaLabel=this.options.indicatorLabelFunc.call(this,t,!0))}this._animateSlide(this._slides[t],!0),this._slides[t].classList.add("active"),this.activeIndex=t,null!=this.interval&&this.start()}_pause(t){clearInterval(this.interval),this.eventPause=t,this.interval=null}pause=()=>{this._pause(!1)};start=()=>{clearInterval(this.interval),this.interval=setInterval(this._handleInterval,this.options.duration+this.options.interval),this.eventPause=!1};next=()=>{let t=this.activeIndex+1;t>=this._slides.length?t=0:t<0&&(t=this._slides.length-1),this.set(t)};prev=()=>{let t=this.activeIndex-1;t>=this._slides.length?t=0:t<0&&(t=this._slides.length-1),this.set(t)}}const Z={text:"",displayLength:4e3,inDuration:300,outDuration:375,classes:"",completeCallback:null,activationPercent:.8};class G{el;timeRemaining;panning;options;message;counterInterval;wasSwiped;startingXPos;xPos;time;deltaX;velocityX;static _toasts;static _container;static _draggedToast;constructor(t){this.options={...G.defaults,...t},this.message=this.options.text,this.panning=!1,this.timeRemaining=this.options.displayLength,0===G._toasts.length&&G._createContainer(),G._toasts.push(this);const e=this._createToast();e.M_Toast=this,this.el=e,this._animateIn(),this._setTimer()}static get defaults(){return Z}static getInstance(t){return t.M_Toast}static _createContainer(){const t=document.createElement("div");t.setAttribute("id","toast-container"),t.addEventListener("touchstart",G._onDragStart),t.addEventListener("touchmove",G._onDragMove),t.addEventListener("touchend",G._onDragEnd),t.addEventListener("mousedown",G._onDragStart),document.addEventListener("mousemove",G._onDragMove),document.addEventListener("mouseup",G._onDragEnd),document.body.appendChild(t),G._container=t}static _removeContainer(){document.removeEventListener("mousemove",G._onDragMove),document.removeEventListener("mouseup",G._onDragEnd),G._container.remove(),G._container=null}static _onDragStart(t){if(t.target&&t.target.closest(".toast")){const e=t.target.closest(".toast").M_Toast;e.panning=!0,G._draggedToast=e,e.el.classList.add("panning"),e.el.style.transition="",e.startingXPos=G._xPos(t),e.time=Date.now(),e.xPos=G._xPos(t)}}static _onDragMove(t){if(G._draggedToast){t.preventDefault();const e=G._draggedToast;e.deltaX=Math.abs(e.xPos-G._xPos(t)),e.xPos=G._xPos(t),e.velocityX=e.deltaX/(Date.now()-e.time),e.time=Date.now();const i=e.xPos-e.startingXPos,s=e.el.offsetWidth*e.options.activationPercent;e.el.style.transform=`translateX(${i}px)`,e.el.style.opacity=(1-Math.abs(i/s)).toString()}}static _onDragEnd(){if(G._draggedToast){const t=G._draggedToast;t.panning=!1,t.el.classList.remove("panning");const e=t.xPos-t.startingXPos,i=t.el.offsetWidth*t.options.activationPercent;Math.abs(e)>i||t.velocityX>1?(t.wasSwiped=!0,t.dismiss()):(t.el.style.transition="transform .2s, opacity .2s",t.el.style.transform="",t.el.style.opacity=""),G._draggedToast=null}}static _xPos(t){return t.type.startsWith("touch")&&t.targetTouches.length>=1?t.targetTouches[0].clientX:t.clientX}static dismissAll(){for(const t in G._toasts)G._toasts[t].dismiss()}_createToast(){let t=this.options.toastId?document.getElementById(this.options.toastId):document.createElement("div");if(t instanceof HTMLTemplateElement){const e=t.content.cloneNode(!0);t=e.firstElementChild}return t.classList.add("toast"),t.setAttribute("role","alert"),t.setAttribute("aria-live","assertive"),t.setAttribute("aria-atomic","true"),this.options.classes.length>0&&t.classList.add(...this.options.classes.split(" ")),this.message&&(t.innerText=this.message),G._container.appendChild(t),t}_animateIn(){this.el.style.display="",this.el.style.opacity="0",this.el.style.transition=`\n      top ${this.options.inDuration}ms ease,\n      opacity ${this.options.inDuration}ms ease\n    `,setTimeout((()=>{this.el.style.top="0",this.el.style.opacity="1"}),1)}_setTimer(){this.timeRemaining!==1/0&&(this.counterInterval=setInterval((()=>{this.panning||(this.timeRemaining-=20),this.timeRemaining<=0&&this.dismiss()}),20))}dismiss(){clearInterval(this.counterInterval);const t=this.el.offsetWidth*this.options.activationPercent;this.wasSwiped&&(this.el.style.transition="transform .05s, opacity .05s",this.el.style.transform=`translateX(${t}px)`,this.el.style.opacity="0"),this.el.style.transition=`\n      margin ${this.options.outDuration}ms ease,\n      opacity ${this.options.outDuration}ms ease`,setTimeout((()=>{this.el.style.opacity="0",this.el.style.marginTop="-40px"}),1),setTimeout((()=>{"function"==typeof this.options.completeCallback&&this.options.completeCallback(),this.el.id!=this.options.toastId&&(this.el.remove(),G._toasts.splice(G._toasts.indexOf(this),1),0===G._toasts.length&&G._removeContainer())}),this.options.outDuration)}static{G._toasts=[],G._container=null,G._draggedToast=null}}return"undefined"!=typeof document&&(document.addEventListener("keydown",e.docHandleKeydown,!0),document.addEventListener("keyup",e.docHandleKeyup,!0),document.addEventListener("focus",e.docHandleFocus,!0),document.addEventListener("blur",e.docHandleBlur,!0)),b.Init(),v.Init(),N.Init(),X.Init(),t.AutoInit=function(t=document.body,e){const i={Autocomplete:t.querySelectorAll(".autocomplete:not(.no-autoinit)"),Cards:t.querySelectorAll(".cards:not(.no-autoinit)"),Carousel:t.querySelectorAll(".carousel:not(.no-autoinit)"),Chips:t.querySelectorAll(".chips:not(.no-autoinit)"),Collapsible:t.querySelectorAll(".collapsible:not(.no-autoinit)"),Datepicker:t.querySelectorAll(".datepicker:not(.no-autoinit)"),Dropdown:t.querySelectorAll(".dropdown-trigger:not(.no-autoinit)"),Materialbox:t.querySelectorAll(".materialboxed:not(.no-autoinit)"),Modal:t.querySelectorAll(".modal:not(.no-autoinit)"),Parallax:t.querySelectorAll(".parallax:not(.no-autoinit)"),Pushpin:t.querySelectorAll(".pushpin:not(.no-autoinit)"),ScrollSpy:t.querySelectorAll(".scrollspy:not(.no-autoinit)"),FormSelect:t.querySelectorAll("select:not(.no-autoinit)"),Sidenav:t.querySelectorAll(".sidenav:not(.no-autoinit)"),Tabs:t.querySelectorAll(".tabs:not(.no-autoinit)"),TapTarget:t.querySelectorAll(".tap-target:not(.no-autoinit)"),Timepicker:t.querySelectorAll(".timepicker:not(.no-autoinit)"),Tooltip:t.querySelectorAll(".tooltipped:not(.no-autoinit)"),FloatingActionButton:t.querySelectorAll(".fixed-action-btn:not(.no-autoinit)")};a.init(i.Autocomplete,e?.Autocomplete??{}),d.init(i.Cards,e?.Cards??{}),p.init(i.Carousel,e?.Carousel??{}),v.init(i.Chips,e?.Chips??{}),g.init(i.Collapsible,e?.Collapsible??{}),w.init(i.Datepicker,e?.Datepicker??{}),n.init(i.Dropdown,e?.Dropdown??{}),C.init(i.Materialbox,e?.Materialbox??{}),T.init(i.Modal,e?.Modal??{}),x.init(i.Parallax,e?.Parallax??{}),I.init(i.Pushpin,e?.Pushpin??{}),M.init(i.ScrollSpy,e?.ScrollSpy??{}),f.init(i.FormSelect,e?.FormSelect??{}),R.init(i.Sidenav,e?.Sidenav??{}),W.init(i.Tabs,e?.Tabs??{}),B.init(i.TapTarget,e?.TapTarget??{}),F.init(i.Timepicker,e?.Timepicker??{}),$.init(i.Tooltip,e?.Tooltip??{}),r.init(i.FloatingActionButton,e?.FloatingActionButton??{})},t.Autocomplete=a,t.Cards=d,t.Carousel=p,t.CharacterCounter=Y,t.Chips=v,t.Collapsible=g,t.Datepicker=w,t.Dropdown=n,t.FloatingActionButton=r,t.FormSelect=f,t.Forms=b,t.Materialbox=C,t.Modal=T,t.Parallax=x,t.Pushpin=I,t.Range=X,t.ScrollSpy=M,t.Sidenav=R,t.Slider=U,t.Tabs=W,t.TapTarget=B,t.Timepicker=F,t.Toast=G,t.Tooltip=$,t.Waves=N,t.version="2.2.1",t}({});
diff --git a/dist/js/materialize.mjs b/dist/js/materialize.mjs
new file mode 100644
index 0000000000..e22e28c535
--- /dev/null
+++ b/dist/js/materialize.mjs
@@ -0,0 +1,7976 @@
+/*!
+* Materialize v2.2.1 (https://materializeweb.com)
+* Copyright 2014-2025 Materialize
+* MIT License (https://raw.githubusercontent.com/materializecss/materialize/master/LICENSE)
+*/
+/**
+ * Class with utilitary functions for global usage.
+ */
+class Utils {
+    /** Specifies wether tab is pressed or not. */
+    static tabPressed = false;
+    /** Specifies wether there is a key pressed. */
+    static keyDown = false;
+    /**
+     * Key maps.
+     */
+    static keys = {
+        TAB: ['Tab'],
+        ENTER: ['Enter'],
+        ESC: ['Escape', 'Esc'],
+        BACKSPACE: ['Backspace'],
+        ARROW_UP: ['ArrowUp', 'Up'],
+        ARROW_DOWN: ['ArrowDown', 'Down'],
+        ARROW_LEFT: ['ArrowLeft', 'Left'],
+        ARROW_RIGHT: ['ArrowRight', 'Right'],
+        DELETE: ['Delete', 'Del']
+    };
+    /**
+     * Detects when a key is pressed.
+     * @param e Event instance.
+     */
+    static docHandleKeydown(e) {
+        Utils.keyDown = true;
+        if ([...Utils.keys.TAB, ...Utils.keys.ARROW_DOWN, ...Utils.keys.ARROW_UP].includes(e.key)) {
+            Utils.tabPressed = true;
+        }
+    }
+    /**
+     * Detects when a key is released.
+     * @param e Event instance.
+     */
+    static docHandleKeyup(e) {
+        Utils.keyDown = false;
+        if ([...Utils.keys.TAB, ...Utils.keys.ARROW_DOWN, ...Utils.keys.ARROW_UP].includes(e.key)) {
+            Utils.tabPressed = false;
+        }
+    }
+    /**
+     * Detects when document is focused.
+     * @param e Event instance.
+     */
+    /* eslint-disabled as of required event type condition check */
+    /* eslint-disable-next-line */
+    static docHandleFocus(e) {
+        if (Utils.keyDown) {
+            document.body.classList.add('keyboard-focused');
+        }
+    }
+    /**
+     * Detects when document is not focused.
+     * @param e Event instance.
+     */
+    /* eslint-disabled as of required event type condition check */
+    /* eslint-disable-next-line */
+    static docHandleBlur(e) {
+        document.body.classList.remove('keyboard-focused');
+    }
+    /**
+     * Generates a unique string identifier.
+     */
+    static guid() {
+        const s4 = () => {
+            return Math.floor((1 + Math.random()) * 0x10000)
+                .toString(16)
+                .substring(1);
+        };
+        return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
+    }
+    /**
+     * Checks for exceeded edges
+     * @param container Container element.
+     * @param bounding Bounding rect.
+     * @param offset Element offset.
+     */
+    static checkWithinContainer(container, bounding, offset) {
+        const edges = {
+            top: false,
+            right: false,
+            bottom: false,
+            left: false
+        };
+        const containerRect = container.getBoundingClientRect();
+        // If body element is smaller than viewport, use viewport height instead.
+        const containerBottom = container === document.body
+            ? Math.max(containerRect.bottom, window.innerHeight)
+            : containerRect.bottom;
+        const scrollLeft = container.scrollLeft;
+        const scrollTop = container.scrollTop;
+        const scrolledX = bounding.left - scrollLeft;
+        const scrolledY = bounding.top - scrollTop;
+        // Check for container and viewport for each edge
+        if (scrolledX < containerRect.left + offset || scrolledX < offset) {
+            edges.left = true;
+        }
+        if (scrolledX + bounding.width > containerRect.right - offset ||
+            scrolledX + bounding.width > window.innerWidth - offset) {
+            edges.right = true;
+        }
+        if (scrolledY < containerRect.top + offset || scrolledY < offset) {
+            edges.top = true;
+        }
+        if (scrolledY + bounding.height > containerBottom - offset ||
+            scrolledY + bounding.height > window.innerHeight - offset) {
+            edges.bottom = true;
+        }
+        return edges;
+    }
+    /**
+     * Checks if element can be aligned in multiple directions.
+     * @param el Element to be inspected.
+     * @param container Container element.
+     * @param bounding Bounding rect.
+     * @param offset Element offset.
+     */
+    static checkPossibleAlignments(el, container, bounding, offset) {
+        const canAlign = {
+            top: true,
+            right: true,
+            bottom: true,
+            left: true,
+            spaceOnTop: null,
+            spaceOnRight: null,
+            spaceOnBottom: null,
+            spaceOnLeft: null
+        };
+        const containerAllowsOverflow = getComputedStyle(container).overflow === 'visible';
+        const containerRect = container.getBoundingClientRect();
+        const containerHeight = Math.min(containerRect.height, window.innerHeight);
+        const containerWidth = Math.min(containerRect.width, window.innerWidth);
+        const elOffsetRect = el.getBoundingClientRect();
+        const scrollLeft = container.scrollLeft;
+        const scrollTop = container.scrollTop;
+        const scrolledX = bounding.left - scrollLeft;
+        const scrolledYTopEdge = bounding.top - scrollTop;
+        const scrolledYBottomEdge = bounding.top + elOffsetRect.height - scrollTop;
+        // Check for container and viewport for left
+        canAlign.spaceOnRight = !containerAllowsOverflow
+            ? containerWidth - (scrolledX + bounding.width)
+            : window.innerWidth - (elOffsetRect.left + bounding.width);
+        if (canAlign.spaceOnRight < 0) {
+            canAlign.left = false;
+        }
+        // Check for container and viewport for Right
+        canAlign.spaceOnLeft = !containerAllowsOverflow
+            ? scrolledX - bounding.width + elOffsetRect.width
+            : elOffsetRect.right - bounding.width;
+        if (canAlign.spaceOnLeft < 0) {
+            canAlign.right = false;
+        }
+        // Check for container and viewport for Top
+        canAlign.spaceOnBottom = !containerAllowsOverflow
+            ? containerHeight - (scrolledYTopEdge + bounding.height + offset)
+            : window.innerHeight - (elOffsetRect.top + bounding.height + offset);
+        if (canAlign.spaceOnBottom < 0) {
+            canAlign.top = false;
+        }
+        // Check for container and viewport for Bottom
+        canAlign.spaceOnTop = !containerAllowsOverflow
+            ? scrolledYBottomEdge - (bounding.height - offset)
+            : elOffsetRect.bottom - (bounding.height + offset);
+        if (canAlign.spaceOnTop < 0) {
+            canAlign.bottom = false;
+        }
+        return canAlign;
+    }
+    /**
+     * Retrieves target element id from trigger.
+     * @param trigger Trigger element.
+     */
+    static getIdFromTrigger(trigger) {
+        let id = trigger.dataset.target;
+        if (!id) {
+            id = trigger.getAttribute('href');
+            return id ? id.slice(1) : '';
+        }
+        return id;
+    }
+    /**
+     * Retrieves document scroll postion from top.
+     */
+    static getDocumentScrollTop() {
+        return window.scrollY || document.documentElement.scrollTop || document.body.scrollTop || 0;
+    }
+    /**
+     * Retrieves document scroll postion from left.
+     */
+    static getDocumentScrollLeft() {
+        return window.scrollX || document.documentElement.scrollLeft || document.body.scrollLeft || 0;
+    }
+    /**
+     * Fires the given function after a certain ammount of time.
+     * @param func Function to be fired.
+     * @param wait Wait time.
+     * @param options Additional options.
+     */
+    static throttle(func, wait, options = {}) {
+        let context, args, result, timeout = null, previous = 0;
+        const later = () => {
+            previous = options.leading === false ? 0 : new Date().getTime();
+            timeout = null;
+            result = func.apply(context, args);
+            context = args = null;
+        };
+        return (...args) => {
+            const now = new Date().getTime();
+            if (!previous && options.leading === false)
+                previous = now;
+            const remaining = wait - (now - previous);
+            context = this;
+            if (remaining <= 0) {
+                clearTimeout(timeout);
+                timeout = null;
+                previous = now;
+                result = func.apply(context, args);
+                context = args = null;
+            }
+            else if (!timeout && options.trailing !== false) {
+                timeout = setTimeout(later, remaining);
+            }
+            return result;
+        };
+    }
+    /**
+     * Renders confirm/close buttons with callback function
+     */
+    static createConfirmationContainer(container, confirmText, cancelText, onConfirm, onCancel) {
+        const confirmationButtonsContainer = document.createElement('div');
+        confirmationButtonsContainer.classList.add('confirmation-btns');
+        container.append(confirmationButtonsContainer);
+        this.createButton(confirmationButtonsContainer, cancelText, ['btn-cancel'], true, onCancel);
+        this.createButton(confirmationButtonsContainer, confirmText, ['btn-confirm'], true, onConfirm);
+    }
+    /**
+     * Renders a button with optional callback function
+     */
+    static createButton(container, text, className = [], visibility = true, callback = null) {
+        className = className.concat(['btn', 'waves-effect', 'text']);
+        const button = document.createElement('button');
+        button.className = className.join(' ');
+        button.style.visibility = visibility ? 'visible' : 'hidden';
+        button.type = 'button';
+        button.tabIndex = !!visibility ? 0 : -1;
+        button.innerText = text;
+        button.addEventListener('click', callback);
+        button.addEventListener('keypress', (e) => {
+            if (Utils.keys.ENTER.includes(e.key))
+                callback(e);
+        });
+        container.append(button);
+    }
+}
+
+/**
+ * Base class implementation for Materialize components.
+ */
+class Component {
+    /**
+     * The DOM element the plugin was initialized with.
+     */
+    el;
+    /**
+     * The options the instance was initialized with.
+     */
+    options;
+    /**
+     * Constructs component instance and set everything up.
+     */
+    constructor(el, options, classDef) {
+        // Display error if el is not a valid HTML Element
+        if (!(el instanceof HTMLElement)) {
+            console.error(Error(el + ' is not an HTML Element'));
+        }
+        // If exists, destroy and reinitialize in child
+        const ins = classDef.getInstance(el);
+        if (!!ins) {
+            ins.destroy();
+        }
+        this.el = el;
+    }
+    /**
+     * Initializes component instances.
+     * @param els HTML elements.
+     * @param options Component options.
+     * @param classDef Class definition.
+     */
+    static init(els, options, classDef) {
+        let instances = null;
+        if (els instanceof Element) {
+            instances = new classDef(els, options);
+        }
+        else if (!!els && els.length) {
+            instances = [];
+            for (let i = 0; i < els.length; i++) {
+                instances.push(new classDef(els[i], options));
+            }
+        }
+        return instances;
+    }
+    /**
+     * @returns default options for component instance.
+     */
+    static get defaults() {
+        return {};
+    }
+    /**
+     * Retrieves component instance for the given element.
+     * @param el Associated HTML Element.
+     */
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    static getInstance(el) {
+        throw new Error('This method must be implemented.');
+    }
+    /**
+     * Destroy plugin instance and teardown.
+     */
+    destroy() {
+        throw new Error('This method must be implemented.');
+    }
+}
+
+const _defaults$m = {
+    alignment: 'left',
+    autoFocus: true,
+    constrainWidth: true,
+    container: null,
+    coverTrigger: true,
+    closeOnClick: true,
+    hover: false,
+    inDuration: 150,
+    outDuration: 250,
+    onOpenStart: null,
+    onOpenEnd: null,
+    onCloseStart: null,
+    onCloseEnd: null,
+    onItemClick: null
+};
+class Dropdown extends Component {
+    static _dropdowns = [];
+    /** ID of the dropdown element. */
+    id;
+    /** The DOM element of the dropdown. */
+    dropdownEl;
+    /** If the dropdown is open. */
+    isOpen;
+    /** If the dropdown content is scrollable. */
+    isScrollable;
+    isTouchMoving;
+    /** The index of the item focused. */
+    focusedIndex;
+    filterQuery;
+    filterTimeout;
+    constructor(el, options) {
+        super(el, options, Dropdown);
+        this.el['M_Dropdown'] = this;
+        Dropdown._dropdowns.push(this);
+        this.id = Utils.getIdFromTrigger(el);
+        this.dropdownEl = document.getElementById(this.id);
+        this.options = {
+            ...Dropdown.defaults,
+            ...options
+        };
+        this.isOpen = false;
+        this.isScrollable = false;
+        this.isTouchMoving = false;
+        this.focusedIndex = -1;
+        this.filterQuery = [];
+        this.el.ariaExpanded = 'false';
+        // Move dropdown-content after dropdown-trigger
+        this._moveDropdown();
+        this._makeDropdownFocusable();
+        this._setupEventHandlers();
+    }
+    static get defaults() {
+        return _defaults$m;
+    }
+    /**
+     * Initializes instances of Dropdown.
+     * @param els HTML elements.
+     * @param options Component options.
+     */
+    static init(els, options = {}) {
+        return super.init(els, options, Dropdown);
+    }
+    static getInstance(el) {
+        return el['M_Dropdown'];
+    }
+    destroy() {
+        this._resetDropdownStyles();
+        this._removeEventHandlers();
+        Dropdown._dropdowns.splice(Dropdown._dropdowns.indexOf(this), 1);
+        this.el['M_Dropdown'] = undefined;
+    }
+    _setupEventHandlers() {
+        // Trigger keydown handler
+        this.el.addEventListener('keydown', this._handleTriggerKeydown);
+        // Item click handler
+        this.dropdownEl?.addEventListener('click', this._handleDropdownClick);
+        // Hover event handlers
+        if (this.options.hover) {
+            this.el.addEventListener('mouseenter', this._handleMouseEnter);
+            this.el.addEventListener('mouseleave', this._handleMouseLeave);
+            this.dropdownEl.addEventListener('mouseleave', this._handleMouseLeave);
+            // Click event handlers
+        }
+        else {
+            this.el.addEventListener('click', this._handleClick);
+        }
+    }
+    _removeEventHandlers() {
+        this.el.removeEventListener('keydown', this._handleTriggerKeydown);
+        this.dropdownEl.removeEventListener('click', this._handleDropdownClick);
+        if (this.options.hover) {
+            this.el.removeEventListener('mouseenter', this._handleMouseEnter);
+            this.el.removeEventListener('mouseleave', this._handleMouseLeave);
+            this.dropdownEl.removeEventListener('mouseleave', this._handleMouseLeave);
+        }
+        else {
+            this.el.removeEventListener('click', this._handleClick);
+        }
+    }
+    _setupTemporaryEventHandlers() {
+        document.body.addEventListener('click', this._handleDocumentClick);
+        document.body.addEventListener('touchmove', this._handleDocumentTouchmove);
+        this.dropdownEl.addEventListener('keydown', this._handleDropdownKeydown);
+        window.addEventListener('resize', this._handleWindowResize);
+    }
+    _removeTemporaryEventHandlers() {
+        document.body.removeEventListener('click', this._handleDocumentClick);
+        document.body.removeEventListener('touchmove', this._handleDocumentTouchmove);
+        this.dropdownEl.removeEventListener('keydown', this._handleDropdownKeydown);
+        window.removeEventListener('resize', this._handleWindowResize);
+    }
+    _handleClick = (e) => {
+        e.preventDefault();
+        this._moveDropdown(e.target.closest('li'));
+        if (this.isOpen) {
+            this.close();
+        }
+        else {
+            this.open();
+        }
+    };
+    _handleMouseEnter = (e) => {
+        this._moveDropdown(e.target.closest('li'));
+        this.open();
+    };
+    _handleMouseLeave = (e) => {
+        const toEl = e.relatedTarget;
+        const leaveToDropdownContent = !!toEl.closest('.dropdown-content');
+        let leaveToActiveDropdownTrigger = false;
+        const closestTrigger = toEl.closest('.dropdown-trigger');
+        if (closestTrigger && !!closestTrigger['M_Dropdown'] && closestTrigger['M_Dropdown'].isOpen) {
+            leaveToActiveDropdownTrigger = true;
+        }
+        // Close hover dropdown if mouse did not leave to either active dropdown-trigger or dropdown-content
+        if (!leaveToActiveDropdownTrigger && !leaveToDropdownContent) {
+            this.close();
+        }
+    };
+    _handleDocumentClick = (e) => {
+        const target = e.target;
+        if (this.options.closeOnClick && target.closest('.dropdown-content') && !this.isTouchMoving) {
+            // isTouchMoving to check if scrolling on mobile.
+            this.close();
+        }
+        else if (!target.closest('.dropdown-content')) {
+            // Do this one frame later so that if the element clicked also triggers _handleClick
+            // For example, if a label for a select was clicked, that we don't close/open the dropdown
+            setTimeout(() => {
+                if (this.isOpen) {
+                    this.close();
+                }
+            }, 0);
+        }
+        this.isTouchMoving = false;
+    };
+    _handleTriggerKeydown = (e) => {
+        // ARROW DOWN OR ENTER WHEN SELECT IS CLOSED - open Dropdown
+        const arrowDownOrEnter = Utils.keys.ARROW_DOWN.includes(e.key) || Utils.keys.ENTER.includes(e.key);
+        if (arrowDownOrEnter && !this.isOpen) {
+            e.preventDefault();
+            this.open();
+        }
+    };
+    _handleDocumentTouchmove = (e) => {
+        const target = e.target;
+        if (target.closest('.dropdown-content')) {
+            this.isTouchMoving = true;
+        }
+    };
+    _handleDropdownClick = (e) => {
+        // onItemClick callback
+        if (typeof this.options.onItemClick === 'function') {
+            const itemEl = e.target.closest('li');
+            this.options.onItemClick.call(this, itemEl);
+        }
+    };
+    _handleDropdownKeydown = (e) => {
+        const arrowUpOrDown = Utils.keys.ARROW_DOWN.includes(e.key) || Utils.keys.ARROW_UP.includes(e.key);
+        if (Utils.keys.TAB.includes(e.key)) {
+            e.preventDefault();
+            this.close();
+        }
+        // Navigate down dropdown list
+        else if (arrowUpOrDown && this.isOpen) {
+            e.preventDefault();
+            const direction = Utils.keys.ARROW_DOWN.includes(e.key) ? 1 : -1;
+            let newFocusedIndex = this.focusedIndex;
+            let hasFoundNewIndex = false;
+            do {
+                newFocusedIndex = newFocusedIndex + direction;
+                if (!!this.dropdownEl.children[newFocusedIndex] &&
+                    this.dropdownEl.children[newFocusedIndex].tabIndex !== -1) {
+                    hasFoundNewIndex = true;
+                    break;
+                }
+            } while (newFocusedIndex < this.dropdownEl.children.length && newFocusedIndex >= 0);
+            if (hasFoundNewIndex) {
+                // Remove active class from old element
+                if (this.focusedIndex >= 0)
+                    this.dropdownEl.children[this.focusedIndex].classList.remove('active');
+                this.focusedIndex = newFocusedIndex;
+                this._focusFocusedItem();
+            }
+        }
+        // ENTER selects choice on focused item
+        else if (Utils.keys.ENTER.includes(e.key) && this.isOpen) {
+            // Search for <a> and <button>
+            const focusedElement = this.dropdownEl.children[this.focusedIndex];
+            const activatableElement = focusedElement.querySelector('a, button');
+            // Click a or button tag if exists, otherwise click li tag
+            if (!!activatableElement) {
+                activatableElement.click();
+            }
+            else if (!!focusedElement) {
+                if (focusedElement instanceof HTMLElement) {
+                    focusedElement.click();
+                }
+            }
+        }
+        // Close dropdown on ESC
+        else if (Utils.keys.ESC.includes(e.key) && this.isOpen) {
+            e.preventDefault();
+            this.close();
+        }
+        // CASE WHEN USER TYPE LTTERS
+        const keyText = e.key.toLowerCase();
+        const isLetter = /[a-zA-Z0-9-_]/.test(keyText);
+        const specialKeys = [
+            ...Utils.keys.ARROW_DOWN,
+            ...Utils.keys.ARROW_UP,
+            ...Utils.keys.ENTER,
+            ...Utils.keys.ESC,
+            ...Utils.keys.TAB
+        ];
+        if (isLetter && !specialKeys.includes(e.key)) {
+            this.filterQuery.push(keyText);
+            const string = this.filterQuery.join('');
+            const newOptionEl = Array.from(this.dropdownEl.querySelectorAll('li')).find((el) => el.innerText.toLowerCase().indexOf(string) === 0);
+            if (newOptionEl) {
+                this.focusedIndex = [...newOptionEl.parentNode.children].indexOf(newOptionEl);
+                this._focusFocusedItem();
+            }
+        }
+        this.filterTimeout = setTimeout(this._resetFilterQuery, 1000);
+    };
+    _handleWindowResize = () => {
+        // Only re-place the dropdown if it's still visible
+        // Accounts for elements hiding via media queries
+        if (this.el.offsetParent) {
+            this.recalculateDimensions();
+        }
+    };
+    _resetFilterQuery = () => {
+        this.filterQuery = [];
+    };
+    _resetDropdownStyles() {
+        this.dropdownEl.style.display = '';
+        this._resetDropdownPositioningStyles();
+        this.dropdownEl.style.transform = '';
+        this.dropdownEl.style.opacity = '';
+    }
+    _resetDropdownPositioningStyles() {
+        this.dropdownEl.style.width = '';
+        this.dropdownEl.style.height = '';
+        this.dropdownEl.style.left = '';
+        this.dropdownEl.style.top = '';
+        this.dropdownEl.style.transformOrigin = '';
+    }
+    // Move dropdown after container or trigger
+    _moveDropdown(containerEl = null) {
+        if (!!this.options.container) {
+            this.options.container.append(this.dropdownEl);
+        }
+        else if (containerEl) {
+            if (!containerEl.contains(this.dropdownEl)) {
+                containerEl.append(this.dropdownEl);
+            }
+        }
+        else {
+            this.el.after(this.dropdownEl);
+        }
+    }
+    _makeDropdownFocusable() {
+        if (!this.dropdownEl)
+            return;
+        this.dropdownEl.popover = '';
+        // Needed for arrow key navigation
+        this.dropdownEl.tabIndex = 0;
+        // Only set tabindex if it hasn't been set by user
+        Array.from(this.dropdownEl.children).forEach((el) => {
+            if (!el.getAttribute('tabindex'))
+                el.setAttribute('tabindex', '0');
+        });
+    }
+    _focusFocusedItem() {
+        if (this.focusedIndex >= 0 &&
+            this.focusedIndex < this.dropdownEl.children.length &&
+            this.options.autoFocus) {
+            this.dropdownEl.children[this.focusedIndex].focus({
+                preventScroll: true
+            });
+            this.dropdownEl.children[this.focusedIndex].scrollIntoView({
+                behavior: 'smooth',
+                block: 'nearest',
+                inline: 'nearest'
+            });
+        }
+    }
+    _getDropdownPosition(closestOverflowParent) {
+        // const offsetParentBRect = this.el.offsetParent.getBoundingClientRect();
+        const triggerBRect = this.el.getBoundingClientRect();
+        const dropdownBRect = this.dropdownEl.getBoundingClientRect();
+        let idealHeight = dropdownBRect.height;
+        let idealWidth = dropdownBRect.width;
+        let idealXPos = triggerBRect.left - dropdownBRect.left;
+        let idealYPos = triggerBRect.top - dropdownBRect.top;
+        const dropdownBounds = {
+            left: idealXPos,
+            top: idealYPos,
+            height: idealHeight,
+            width: idealWidth
+        };
+        const alignments = Utils.checkPossibleAlignments(this.el, closestOverflowParent, dropdownBounds, this.options.coverTrigger ? 0 : triggerBRect.height);
+        let verticalAlignment = 'top';
+        let horizontalAlignment = this.options.alignment;
+        idealYPos += this.options.coverTrigger ? 0 : triggerBRect.height;
+        // Reset isScrollable
+        this.isScrollable = false;
+        if (!alignments.top) {
+            if (alignments.bottom) {
+                verticalAlignment = 'bottom';
+                if (!this.options.coverTrigger) {
+                    idealYPos -= triggerBRect.height;
+                }
+            }
+            else {
+                this.isScrollable = true;
+                // Determine which side has most space and cutoff at correct height
+                idealHeight -= 20; // Add padding when cutoff
+                if (alignments.spaceOnTop > alignments.spaceOnBottom) {
+                    verticalAlignment = 'bottom';
+                    idealHeight += alignments.spaceOnTop;
+                    idealYPos -= this.options.coverTrigger
+                        ? alignments.spaceOnTop - 20
+                        : alignments.spaceOnTop - 20 + triggerBRect.height;
+                }
+                else {
+                    idealHeight += alignments.spaceOnBottom;
+                }
+            }
+        }
+        // If preferred horizontal alignment is possible
+        if (!alignments[horizontalAlignment]) {
+            const oppositeAlignment = horizontalAlignment === 'left' ? 'right' : 'left';
+            if (alignments[oppositeAlignment]) {
+                horizontalAlignment = oppositeAlignment;
+            }
+            else {
+                // Determine which side has most space and cutoff at correct height
+                if (alignments.spaceOnLeft > alignments.spaceOnRight) {
+                    horizontalAlignment = 'right';
+                    idealWidth += alignments.spaceOnLeft;
+                    idealXPos -= alignments.spaceOnLeft;
+                }
+                else {
+                    horizontalAlignment = 'left';
+                    idealWidth += alignments.spaceOnRight;
+                }
+            }
+        }
+        if (verticalAlignment === 'bottom') {
+            idealYPos =
+                idealYPos - dropdownBRect.height + (this.options.coverTrigger ? triggerBRect.height : 0);
+        }
+        if (horizontalAlignment === 'right') {
+            idealXPos = idealXPos - dropdownBRect.width + triggerBRect.width;
+        }
+        return {
+            x: idealXPos,
+            y: idealYPos,
+            verticalAlignment: verticalAlignment,
+            horizontalAlignment: horizontalAlignment,
+            height: idealHeight,
+            width: idealWidth
+        };
+    }
+    _animateIn() {
+        const duration = this.options.inDuration;
+        this.dropdownEl.style.transition = 'none';
+        // from
+        this.dropdownEl.style.opacity = '0';
+        this.dropdownEl.style.transform = 'scale(0.3, 0.3)';
+        setTimeout(() => {
+            // easeOutQuad (opacity) & easeOutQuint
+            this.dropdownEl.style.transition = `opacity ${duration}ms ease, transform ${duration}ms ease`;
+            // to
+            this.dropdownEl.style.opacity = '1';
+            this.dropdownEl.style.transform = 'scale(1, 1)';
+        }, 1);
+        setTimeout(() => {
+            if (this.options.autoFocus)
+                this.dropdownEl.focus();
+            if (typeof this.options.onOpenEnd === 'function')
+                this.options.onOpenEnd.call(this, this.el);
+        }, duration);
+    }
+    _animateOut() {
+        const duration = this.options.outDuration;
+        // easeOutQuad (opacity) & easeOutQuint
+        this.dropdownEl.style.transition = `opacity ${duration}ms ease, transform ${duration}ms ease`;
+        // to
+        this.dropdownEl.style.opacity = '0';
+        this.dropdownEl.style.transform = 'scale(0.3, 0.3)';
+        setTimeout(() => {
+            this._resetDropdownStyles();
+            if (typeof this.options.onCloseEnd === 'function')
+                this.options.onCloseEnd.call(this, this.el);
+        }, duration);
+    }
+    _getClosestAncestor(el, condition) {
+        let ancestor = el.parentNode;
+        while (ancestor !== null && ancestor !== document) {
+            if (condition(ancestor)) {
+                return ancestor;
+            }
+            ancestor = ancestor.parentElement;
+        }
+        return null;
+    }
+    _placeDropdown() {
+        // Container here will be closest ancestor with overflow: hidden
+        let closestOverflowParent = this._getClosestAncestor(this.dropdownEl, (ancestor) => {
+            return (!['HTML', 'BODY'].includes(ancestor.tagName) &&
+                getComputedStyle(ancestor).overflow !== 'visible');
+        });
+        // Fallback
+        if (!closestOverflowParent) {
+            closestOverflowParent = ((!!this.dropdownEl.offsetParent ? this.dropdownEl.offsetParent : this.dropdownEl.parentNode));
+        }
+        if (getComputedStyle(closestOverflowParent).position === 'static')
+            closestOverflowParent.style.position = 'relative';
+        this._moveDropdown(closestOverflowParent);
+        // Set width before calculating positionInfo
+        const idealWidth = this.options.constrainWidth
+            ? this.el.getBoundingClientRect().width
+            : this.dropdownEl.getBoundingClientRect().width;
+        this.dropdownEl.style.width = idealWidth + 'px';
+        const positionInfo = this._getDropdownPosition(closestOverflowParent);
+        this.dropdownEl.style.left = positionInfo.x + 'px';
+        this.dropdownEl.style.top = positionInfo.y + 'px';
+        this.dropdownEl.style.height = positionInfo.height + 'px';
+        this.dropdownEl.style.width = positionInfo.width + 'px';
+        this.dropdownEl.style.transformOrigin = `${positionInfo.horizontalAlignment === 'left' ? '0' : '100%'} ${positionInfo.verticalAlignment === 'top' ? '0' : '100%'}`;
+    }
+    /**
+     * Open dropdown.
+     */
+    open = () => {
+        if (this.isOpen)
+            return;
+        this.isOpen = true;
+        // onOpenStart callback
+        if (typeof this.options.onOpenStart === 'function') {
+            this.options.onOpenStart.call(this, this.el);
+        }
+        // Reset styles
+        this._resetDropdownStyles();
+        this.dropdownEl.style.display = 'block';
+        this._placeDropdown();
+        this._animateIn();
+        // Do this one frame later so that we don't bind an event handler that's immediately
+        // called when the event bubbles up to the document and closes the dropdown
+        setTimeout(() => this._setupTemporaryEventHandlers(), 0);
+        this.el.ariaExpanded = 'true';
+    };
+    /**
+     * Close dropdown.
+     */
+    close = () => {
+        if (!this.isOpen)
+            return;
+        this.isOpen = false;
+        this.focusedIndex = -1;
+        // onCloseStart callback
+        if (typeof this.options.onCloseStart === 'function') {
+            this.options.onCloseStart.call(this, this.el);
+        }
+        this._animateOut();
+        this._removeTemporaryEventHandlers();
+        if (this.options.autoFocus) {
+            this.el.focus();
+        }
+        this.el.ariaExpanded = 'false';
+    };
+    /**
+     * While dropdown is open, you can recalculate its dimensions if its contents have changed.
+     */
+    recalculateDimensions = () => {
+        if (this.isOpen) {
+            this._resetDropdownPositioningStyles();
+            this._placeDropdown();
+        }
+    };
+}
+
+const _defaults$l = {
+    data: [], // Autocomplete data set
+    onAutocomplete: null, // Callback for when autocompleted
+    dropdownOptions: {
+        // Default dropdown options
+        autoFocus: false,
+        closeOnClick: false,
+        coverTrigger: false
+    },
+    minLength: 1, // Min characters before autocomplete starts
+    isMultiSelect: false,
+    onSearch: (text, autocomplete) => {
+        const normSearch = text.toLocaleLowerCase();
+        autocomplete.setMenuItems(autocomplete.options.data.filter((option) => option.id.toString().toLocaleLowerCase().includes(normSearch) ||
+            option.text?.toLocaleLowerCase().includes(normSearch)));
+    },
+    maxDropDownHeight: '300px',
+    allowUnsafeHTML: false
+};
+class Autocomplete extends Component {
+    /** If the autocomplete is open. */
+    isOpen;
+    /** Number of matching autocomplete options. */
+    count;
+    /** Index of the current selected option. */
+    activeIndex;
+    oldVal;
+    $active;
+    _mousedown;
+    container;
+    /** Instance of the dropdown plugin for this autocomplete. */
+    dropdown;
+    static _keydown;
+    selectedValues;
+    menuItems;
+    constructor(el, options) {
+        super(el, options, Autocomplete);
+        this.el['M_Autocomplete'] = this;
+        this.options = {
+            ...Autocomplete.defaults,
+            ...options
+        };
+        this.isOpen = false;
+        this.count = 0;
+        this.activeIndex = -1;
+        this.oldVal = '';
+        this.selectedValues = [];
+        this.menuItems = this.options.data || [];
+        this.$active = null;
+        this._mousedown = false;
+        this._setupDropdown();
+        this._setupEventHandlers();
+    }
+    static get defaults() {
+        return _defaults$l;
+    }
+    /**
+     * Initializes instances of Autocomplete.
+     * @param els HTML elements.
+     * @param options Component options.
+     */
+    static init(els, options = {}) {
+        return super.init(els, options, Autocomplete);
+    }
+    static getInstance(el) {
+        return el['M_Autocomplete'];
+    }
+    destroy() {
+        this._removeEventHandlers();
+        this._removeDropdown();
+        this.el['M_Autocomplete'] = undefined;
+    }
+    _setupEventHandlers() {
+        this.el.addEventListener('blur', this._handleInputBlur);
+        this.el.addEventListener('keyup', this._handleInputKeyup);
+        this.el.addEventListener('focus', this._handleInputFocus);
+        this.el.addEventListener('keydown', this._handleInputKeydown);
+        this.el.addEventListener('click', this._handleInputClick);
+        this.container.addEventListener('mousedown', this._handleContainerMousedownAndTouchstart);
+        this.container.addEventListener('mouseup', this._handleContainerMouseupAndTouchend);
+        if (typeof window.ontouchstart !== 'undefined') {
+            this.container.addEventListener('touchstart', this._handleContainerMousedownAndTouchstart);
+            this.container.addEventListener('touchend', this._handleContainerMouseupAndTouchend);
+        }
+    }
+    _removeEventHandlers() {
+        this.el.removeEventListener('blur', this._handleInputBlur);
+        this.el.removeEventListener('keyup', this._handleInputKeyup);
+        this.el.removeEventListener('focus', this._handleInputFocus);
+        this.el.removeEventListener('keydown', this._handleInputKeydown);
+        this.el.removeEventListener('click', this._handleInputClick);
+        this.container.removeEventListener('mousedown', this._handleContainerMousedownAndTouchstart);
+        this.container.removeEventListener('mouseup', this._handleContainerMouseupAndTouchend);
+        if (typeof window.ontouchstart !== 'undefined') {
+            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-${Utils.guid()}`;
+        this.container.classList.add('autocomplete-content', 'dropdown-content');
+        this.el.setAttribute('data-target', this.container.id);
+        this.menuItems.forEach((menuItem) => {
+            const itemElement = this._createDropdownItem(menuItem);
+            this.container.append(itemElement);
+        });
+        // ! Issue in Component Dropdown: _placeDropdown moves dom-position
+        this.el.parentElement.appendChild(this.container);
+        // Initialize dropdown
+        const dropdownOptions = {
+            ...Autocomplete.defaults.dropdownOptions,
+            ...this.options.dropdownOptions
+        };
+        // @todo shouldn't we conditionally check if dropdownOptions.onItemClick is set in first place?
+        const userOnItemClick = dropdownOptions.onItemClick;
+        // Ensuring the select Option call when user passes custom onItemClick function to dropdown
+        dropdownOptions.onItemClick = (li) => {
+            if (!li)
+                return;
+            const entryID = li.getAttribute('data-id');
+            this.selectOption(entryID);
+            // Handle user declared onItemClick if needed
+            if (userOnItemClick && typeof userOnItemClick === 'function')
+                userOnItemClick.call(this.dropdown, this.el);
+        };
+        this.dropdown = Dropdown.init(this.el, dropdownOptions);
+        // ! Workaround for Label: move label up again
+        // TODO: Just use PopperJS in future!
+        const label = this.el.parentElement.querySelector('label');
+        if (label)
+            this.el.after(label);
+        // Sketchy removal of dropdown click handler
+        this.el.removeEventListener('click', this.dropdown._handleClick);
+        // Set Value if already set in HTML
+        if (this.el.value)
+            this.selectOption(this.el.value);
+        // Add StatusInfo
+        const div = document.createElement('div');
+        div.classList.add('status-info');
+        div.setAttribute('style', 'position: absolute;right:0;top:0;');
+        this.el.parentElement.appendChild(div);
+        this._updateSelectedInfo();
+    }
+    _removeDropdown() {
+        this.container.parentNode.removeChild(this.container);
+    }
+    _handleInputBlur = () => {
+        if (!this._mousedown) {
+            this.close();
+            this._resetAutocomplete();
+        }
+    };
+    _handleInputKeyup = (e) => {
+        if (e.type === 'keyup')
+            Autocomplete._keydown = false;
+        this.count = 0;
+        const actualValue = this.el.value.toLocaleLowerCase();
+        // Don't capture enter or arrow key usage.
+        if (Utils.keys.ENTER.includes(e.key) ||
+            Utils.keys.ARROW_UP.includes(e.key) ||
+            Utils.keys.ARROW_DOWN.includes(e.key))
+            return;
+        // Check if the input isn't empty
+        // Check if focus triggered by tab
+        if (this.oldVal !== actualValue && Utils.tabPressed) {
+            this.open();
+        }
+        this._inputChangeDetection(actualValue);
+    };
+    _handleInputFocus = () => {
+        this.count = 0;
+        const actualValue = this.el.value.toLocaleLowerCase();
+        this._inputChangeDetection(actualValue);
+    };
+    _inputChangeDetection = (value) => {
+        // Value has changed!
+        if (this.oldVal !== value) {
+            this._setStatusLoading();
+            this.options.onSearch(this.el.value, this);
+        }
+        // Reset Single-Select when Input cleared
+        if (!this.options.isMultiSelect && this.el.value.length === 0) {
+            this.selectedValues = [];
+            this._triggerChanged();
+        }
+        this.oldVal = value;
+    };
+    _handleInputKeydown = (e) => {
+        Autocomplete._keydown = true;
+        // Arrow keys and enter key usage
+        const numItems = this.container.querySelectorAll('li').length;
+        // select element on Enter
+        if (Utils.keys.ENTER.includes(e.key) && this.activeIndex >= 0) {
+            const liElement = this.container.querySelectorAll('li')[this.activeIndex];
+            if (liElement) {
+                this.selectOption(liElement.getAttribute('data-id'));
+                e.preventDefault();
+            }
+            return;
+        }
+        // Capture up and down key
+        if (Utils.keys.ARROW_UP.includes(e.key) || Utils.keys.ARROW_DOWN.includes(e.key)) {
+            e.preventDefault();
+            if (Utils.keys.ARROW_UP.includes(e.key) && this.activeIndex > 0)
+                this.activeIndex--;
+            if (Utils.keys.ARROW_DOWN.includes(e.key) && this.activeIndex < numItems - 1)
+                this.activeIndex++;
+            this.$active?.classList.remove('active');
+            if (this.activeIndex >= 0) {
+                this.$active = this.container.querySelectorAll('li')[this.activeIndex];
+                this.$active?.classList.add('active');
+                // Focus selected
+                this.container.children[this.activeIndex].scrollIntoView({
+                    behavior: 'smooth',
+                    block: 'nearest',
+                    inline: 'nearest'
+                });
+            }
+        }
+    };
+    _handleInputClick = () => {
+        this.open();
+    };
+    _handleContainerMousedownAndTouchstart = () => {
+        this._mousedown = true;
+    };
+    _handleContainerMouseupAndTouchend = () => {
+        this._mousedown = false;
+    };
+    _resetCurrentElementPosition() {
+        this.activeIndex = -1;
+        this.$active?.classList.remove('active');
+    }
+    _resetAutocomplete() {
+        this.container.replaceChildren();
+        this._resetCurrentElementPosition();
+        this.oldVal = null;
+        this.isOpen = false;
+        this._mousedown = false;
+    }
+    _highlightPartialText(input, label) {
+        const start = label.toLocaleLowerCase().indexOf('' + input.toLocaleLowerCase() + '');
+        const end = start + input.length - 1;
+        //custom filters may return results where the string does not match any part
+        if (start == -1 || end == -1) {
+            return [label, '', ''];
+        }
+        return [label.slice(0, start), label.slice(start, end + 1), label.slice(end + 1)];
+    }
+    _createDropdownItem(entry) {
+        const item = document.createElement('li');
+        item.setAttribute('data-id', entry.id);
+        item.setAttribute('style', 'display:grid; grid-auto-flow: column; user-select: none; align-items: center;');
+        // Checkbox
+        if (this.options.isMultiSelect) {
+            item.innerHTML = `
+        <div class="item-selection" style="text-align:center;">
+        <input type="checkbox"${this.selectedValues.some((sel) => sel.id === entry.id) ? ' checked="checked"' : ''}><span style="padding-left:21px;"></span>
+      </div>`;
+        }
+        // Image
+        if (entry.image) {
+            const img = document.createElement('img');
+            img.classList.add('circle');
+            img.src = entry.image;
+            item.appendChild(img);
+        }
+        // Text
+        const inputText = this.el.value.toLocaleLowerCase();
+        const parts = this._highlightPartialText(inputText, (entry.text || entry.id).toString());
+        const div = document.createElement('div');
+        div.setAttribute('style', 'line-height:1.2;font-weight:500;');
+        if (this.options.allowUnsafeHTML) {
+            div.innerHTML = parts[0] + '<span class="highlight">' + parts[1] + '</span>' + parts[2];
+        }
+        else {
+            div.appendChild(document.createTextNode(parts[0]));
+            if (parts[1]) {
+                const highlight = document.createElement('span');
+                highlight.textContent = parts[1];
+                highlight.classList.add('highlight');
+                div.appendChild(highlight);
+                div.appendChild(document.createTextNode(parts[2]));
+            }
+        }
+        const itemText = document.createElement('div');
+        itemText.classList.add('item-text');
+        itemText.setAttribute('style', 'padding:5px;overflow:hidden;');
+        item.appendChild(itemText);
+        item.querySelector('.item-text').appendChild(div);
+        // Description
+        if (typeof entry.description === 'string' ||
+            (typeof entry.description === 'number' && !isNaN(entry.description))) {
+            const description = document.createElement('small');
+            description.setAttribute('style', 'line-height:1.3;color:grey;white-space:nowrap;text-overflow:ellipsis;display:block;width:90%;overflow:hidden;');
+            description.innerText = entry.description;
+            item.querySelector('.item-text').appendChild(description);
+        }
+        // Set Grid
+        const getGridConfig = () => {
+            if (this.options.isMultiSelect) {
+                if (entry.image)
+                    return '40px min-content auto'; // cb-img-txt
+                return '40px auto'; // cb-txt
+            }
+            if (entry.image)
+                return 'min-content auto'; // img-txt
+            return 'auto'; // txt
+        };
+        item.style.gridTemplateColumns = getGridConfig();
+        return item;
+    }
+    _renderDropdown() {
+        this._resetAutocomplete();
+        // Check if Data is empty
+        if (this.menuItems.length === 0) {
+            this.menuItems = this.selectedValues; // Show selected Items
+        }
+        for (let i = 0; i < this.menuItems.length; i++) {
+            const item = this._createDropdownItem(this.menuItems[i]);
+            this.container.append(item);
+        }
+    }
+    _setStatusLoading() {
+        this.el.parentElement.querySelector('.status-info').innerHTML =
+            `<div style="height:100%;width:50px;"><svg version="1.1" id="L4" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 0 0" xml:space="preserve">
+    <circle fill="#888c" stroke="none" cx="6" cy="50" r="6"><animate attributeName="opacity" dur="1s" values="0;1;0" repeatCount="indefinite" begin="0.1"/></circle>
+    <circle fill="#888c" stroke="none" cx="26" cy="50" r="6"><animate attributeName="opacity" dur="1s" values="0;1;0" repeatCount="indefinite" begin="0.2"/></circle>
+    <circle fill="#888c" stroke="none" cx="46" cy="50" r="6"><animate attributeName="opacity" dur="1s" values="0;1;0" repeatCount="indefinite"  begin="0.3"/></circle>
+  </svg></div>`;
+    }
+    _updateSelectedInfo() {
+        const statusElement = this.el.parentElement.querySelector('.status-info');
+        if (statusElement) {
+            if (this.options.isMultiSelect)
+                statusElement.innerHTML = this.selectedValues.length.toString();
+            else
+                statusElement.innerHTML = '';
+        }
+    }
+    _refreshInputText() {
+        if (this.selectedValues.length === 1) {
+            const entry = this.selectedValues[0];
+            this.el.value = entry.text || entry.id; // Write Text to Input
+        }
+    }
+    _triggerChanged() {
+        this.el.dispatchEvent(new Event('change'));
+        // Trigger Autocomplete Event
+        if (typeof this.options.onAutocomplete === 'function')
+            this.options.onAutocomplete.call(this, this.selectedValues);
+    }
+    /**
+     * Show autocomplete.
+     */
+    open = () => {
+        const inputText = this.el.value.toLocaleLowerCase();
+        this._resetAutocomplete();
+        if (inputText.length >= this.options.minLength) {
+            this.isOpen = true;
+            this._renderDropdown();
+        }
+        // Open dropdown
+        if (!this.dropdown.isOpen) {
+            setTimeout(() => {
+                this.dropdown.open();
+            }, 0); // TODO: why?
+        }
+        else
+            this.dropdown.recalculateDimensions(); // Recalculate dropdown when its already open
+    };
+    /**
+     * Hide autocomplete.
+     */
+    close = () => {
+        this.dropdown.close();
+    };
+    /**
+     * Updates the visible or selectable items shown in the menu.
+     * @param menuItems Items to be available.
+     */
+    setMenuItems(menuItems) {
+        this.menuItems = menuItems;
+        this.open();
+        this._updateSelectedInfo();
+    }
+    /**
+     * Sets selected values.
+     * @param entries
+     */
+    setValues(entries) {
+        this.selectedValues = entries;
+        this._updateSelectedInfo();
+        if (!this.options.isMultiSelect) {
+            this._refreshInputText();
+        }
+        this._triggerChanged();
+    }
+    /**
+     * Select a specific autocomplete option via id-property.
+     * @param id The id of a data-entry.
+     */
+    selectOption(id) {
+        const entry = this.menuItems.find((item) => item.id == id);
+        if (!entry)
+            return;
+        // Toggle Checkbox
+        const li = this.container.querySelector('li[data-id="' + id + '"]');
+        if (!li)
+            return;
+        if (this.options.isMultiSelect) {
+            const checkbox = li.querySelector('input[type="checkbox"]');
+            checkbox.checked = !checkbox.checked;
+            if (checkbox.checked)
+                this.selectedValues.push(entry);
+            else
+                this.selectedValues = this.selectedValues.filter((selectedEntry) => selectedEntry.id !== entry.id);
+            this.el.focus();
+        }
+        else {
+            // Single-Select
+            this.selectedValues = [entry];
+            this._refreshInputText();
+            this._resetAutocomplete();
+            this.close();
+        }
+        this._updateSelectedInfo();
+        this._triggerChanged();
+    }
+}
+
+const _defaults$k = {
+    direction: 'top',
+    hoverEnabled: true,
+    toolbarEnabled: false
+};
+class FloatingActionButton extends Component {
+    /**
+     * Describes open/close state of FAB.
+     */
+    isOpen;
+    _anchor;
+    _menu;
+    _floatingBtns;
+    _floatingBtnsReverse;
+    offsetY;
+    offsetX;
+    btnBottom;
+    btnLeft;
+    btnWidth;
+    constructor(el, options) {
+        super(el, options, FloatingActionButton);
+        this.el['M_FloatingActionButton'] = this;
+        this.options = {
+            ...FloatingActionButton.defaults,
+            ...options
+        };
+        this.isOpen = false;
+        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}`);
+        if (this.options.direction === 'top')
+            this.offsetY = 40;
+        else if (this.options.direction === 'right')
+            this.offsetX = -40;
+        else if (this.options.direction === 'bottom')
+            this.offsetY = -40;
+        else
+            this.offsetX = 40;
+        this._setupEventHandlers();
+    }
+    static get defaults() {
+        return _defaults$k;
+    }
+    /**
+     * Initializes instances of FloatingActionButton.
+     * @param els HTML elements.
+     * @param options Component options.
+     */
+    static init(els, options = {}) {
+        return super.init(els, options, FloatingActionButton);
+    }
+    static getInstance(el) {
+        return el['M_FloatingActionButton'];
+    }
+    destroy() {
+        this._removeEventHandlers();
+        this.el['M_FloatingActionButton'] = undefined;
+    }
+    _setupEventHandlers() {
+        if (this.options.hoverEnabled && !this.options.toolbarEnabled) {
+            this.el.addEventListener('mouseenter', this.open);
+            this.el.addEventListener('mouseleave', this.close);
+        }
+        else {
+            this.el.addEventListener('click', this._handleFABClick);
+        }
+    }
+    _removeEventHandlers() {
+        if (this.options.hoverEnabled && !this.options.toolbarEnabled) {
+            this.el.removeEventListener('mouseenter', this.open);
+            this.el.removeEventListener('mouseleave', this.close);
+        }
+        else {
+            this.el.removeEventListener('click', this._handleFABClick);
+        }
+    }
+    _handleFABClick = () => {
+        if (this.isOpen) {
+            this.close();
+        }
+        else {
+            this.open();
+        }
+    };
+    _handleDocumentClick = (e) => {
+        const elem = e.target;
+        if (elem !== this._menu)
+            this.close();
+    };
+    /**
+     * Open FAB.
+     */
+    open = () => {
+        if (this.isOpen)
+            return;
+        if (this.options.toolbarEnabled)
+            this._animateInToolbar();
+        else
+            this._animateInFAB();
+        this.isOpen = true;
+    };
+    /**
+     * Close FAB.
+     */
+    close = () => {
+        if (!this.isOpen)
+            return;
+        if (this.options.toolbarEnabled) {
+            window.removeEventListener('scroll', this.close, true);
+            document.body.removeEventListener('click', this._handleDocumentClick, true);
+        }
+        else {
+            this._animateOutFAB();
+        }
+        this.isOpen = false;
+    };
+    _animateInFAB() {
+        this.el.classList.add('active');
+        const delayIncrement = 40;
+        const duration = 275;
+        this._floatingBtnsReverse.forEach((el, index) => {
+            const delay = delayIncrement * index;
+            el.style.transition = 'none';
+            el.style.opacity = '0';
+            el.style.transform = `translate(${this.offsetX}px, ${this.offsetY}px) scale(0.4)`;
+            setTimeout(() => {
+                // from:
+                el.style.opacity = '0.4';
+                // easeInOutQuad
+                setTimeout(() => {
+                    // to:
+                    el.style.transition = `opacity ${duration}ms ease, transform ${duration}ms ease`;
+                    el.style.opacity = '1';
+                    el.style.transform = 'translate(0, 0) scale(1)';
+                }, 1);
+            }, delay);
+        });
+    }
+    _animateOutFAB() {
+        const duration = 175;
+        setTimeout(() => this.el.classList.remove('active'), duration);
+        this._floatingBtnsReverse.forEach((el) => {
+            el.style.transition = `opacity ${duration}ms ease, transform ${duration}ms ease`;
+            // to
+            el.style.opacity = '0';
+            el.style.transform = `translate(${this.offsetX}px, ${this.offsetY}px) scale(0.4)`;
+        });
+    }
+    _animateInToolbar() {
+        const windowWidth = window.innerWidth;
+        const windowHeight = window.innerHeight;
+        const btnRect = this.el.getBoundingClientRect();
+        const backdrop = document.createElement('div'), scaleFactor = windowWidth / backdrop[0].clientWidth, fabColor = getComputedStyle(this._anchor).backgroundColor; // css('background-color');
+        backdrop.classList.add('fab-backdrop'); //  $('<div class="fab-backdrop"></div>');
+        backdrop.style.backgroundColor = fabColor;
+        this._anchor.append(backdrop);
+        this.offsetX = btnRect.left - windowWidth / 2 + btnRect.width / 2;
+        this.offsetY = windowHeight - btnRect.bottom;
+        this.btnBottom = btnRect.bottom;
+        this.btnLeft = btnRect.left;
+        this.btnWidth = btnRect.width;
+        // Set initial state
+        this.el.classList.add('active');
+        this.el.style.textAlign = 'center';
+        this.el.style.width = '100%';
+        this.el.style.bottom = '0';
+        this.el.style.left = '0';
+        this.el.style.transform = 'translateX(' + this.offsetX + 'px)';
+        this.el.style.transition = 'none';
+        this._anchor.style.transform = `translateY(${this.offsetY}px`;
+        this._anchor.style.transition = 'none';
+        setTimeout(() => {
+            this.el.style.transform = '';
+            this.el.style.transition =
+                'transform .2s cubic-bezier(0.550, 0.085, 0.680, 0.530), background-color 0s linear .2s';
+            this._anchor.style.overflow = 'visible';
+            this._anchor.style.transform = '';
+            this._anchor.style.transition = 'transform .2s';
+            setTimeout(() => {
+                this.el.style.overflow = 'hidden';
+                this.el.style.backgroundColor = fabColor;
+                backdrop.style.transform = 'scale(' + scaleFactor + ')';
+                backdrop.style.transition = 'transform .2s cubic-bezier(0.550, 0.055, 0.675, 0.190)';
+                this._menu
+                    .querySelectorAll('li > a')
+                    .forEach((a) => (a.style.opacity = '1'));
+                // Scroll to close.
+                window.addEventListener('scroll', this.close, true);
+                document.body.addEventListener('click', this._handleDocumentClick, true);
+            }, 100);
+        }, 0);
+    }
+}
+
+const _defaults$j = {
+    onOpen: null,
+    onClose: null,
+    inDuration: 225,
+    outDuration: 300
+};
+class Cards extends Component {
+    isOpen = false;
+    cardReveal;
+    initialOverflow;
+    _activators;
+    cardRevealClose;
+    constructor(el, options) {
+        super(el, options, Cards);
+        this.el['M_Cards'] = this;
+        this.options = {
+            ...Cards.defaults,
+            ...options
+        };
+        this.cardReveal = this.el.querySelector('.card-reveal');
+        if (this.cardReveal) {
+            this.initialOverflow = getComputedStyle(this.el).overflow;
+            this._activators = Array.from(this.el.querySelectorAll('.activator'));
+            this._activators.forEach((el) => {
+                if (el)
+                    el.tabIndex = 0;
+            });
+            this.cardRevealClose = this.cardReveal?.querySelector('.card-title');
+            if (this.cardRevealClose)
+                this.cardRevealClose.tabIndex = -1;
+            this.cardReveal.ariaExpanded = 'false';
+            this._setupEventHandlers();
+        }
+    }
+    static get defaults() {
+        return _defaults$j;
+    }
+    /**
+     * Initializes instances of Cards.
+     * @param els HTML elements.
+     * @param options Component options.
+     */
+    static init(els, options) {
+        return super.init(els, options, Cards);
+    }
+    static getInstance(el) {
+        return el['M_Cards'];
+    }
+    /**
+     * {@inheritDoc}
+     */
+    destroy() {
+        this._removeEventHandlers();
+        this._activators = [];
+    }
+    _setupEventHandlers = () => {
+        this._activators.forEach((el) => {
+            el.addEventListener('click', this._handleClickInteraction);
+            el.addEventListener('keypress', this._handleKeypressEvent);
+        });
+    };
+    _removeEventHandlers = () => {
+        this._activators.forEach((el) => {
+            el.removeEventListener('click', this._handleClickInteraction);
+            el.removeEventListener('keypress', this._handleKeypressEvent);
+        });
+    };
+    _handleClickInteraction = () => {
+        this._handleRevealEvent();
+    };
+    _handleKeypressEvent = (e) => {
+        if (Utils.keys.ENTER.includes(e.key)) {
+            this._handleRevealEvent();
+        }
+    };
+    _handleRevealEvent = () => {
+        // Reveal Card
+        this._activators.forEach((el) => (el.tabIndex = -1));
+        this.open();
+    };
+    _setupRevealCloseEventHandlers = () => {
+        this.cardRevealClose.addEventListener('click', this.close);
+        this.cardRevealClose.addEventListener('keypress', this._handleKeypressCloseEvent);
+    };
+    _removeRevealCloseEventHandlers = () => {
+        this.cardRevealClose.addEventListener('click', this.close);
+        this.cardRevealClose.addEventListener('keypress', this._handleKeypressCloseEvent);
+    };
+    _handleKeypressCloseEvent = (e) => {
+        if (Utils.keys.ENTER.includes(e.key)) {
+            this.close();
+        }
+    };
+    /**
+     * Show card reveal.
+     */
+    open = () => {
+        if (this.isOpen)
+            return;
+        this.isOpen = true;
+        this.el.style.overflow = 'hidden';
+        this.cardReveal.style.display = 'block';
+        this.cardReveal.ariaExpanded = 'true';
+        this.cardRevealClose.tabIndex = 0;
+        setTimeout(() => {
+            this.cardReveal.style.transition = `transform ${this.options.outDuration}ms ease`; //easeInOutQuad
+            this.cardReveal.style.transform = 'translateY(-100%)';
+        }, 1);
+        if (typeof this.options.onOpen === 'function') {
+            this.options.onOpen.call(this);
+        }
+        this._setupRevealCloseEventHandlers();
+    };
+    /**
+     * Hide card reveal.
+     */
+    close = () => {
+        if (!this.isOpen)
+            return;
+        this.isOpen = false;
+        this.cardReveal.style.transition = `transform ${this.options.inDuration}ms ease`; //easeInOutQuad
+        this.cardReveal.style.transform = 'translateY(0)';
+        setTimeout(() => {
+            this.cardReveal.style.display = 'none';
+            this.cardReveal.ariaExpanded = 'false';
+            this._activators.forEach((el) => (el.tabIndex = 0));
+            this.cardRevealClose.tabIndex = -1;
+            this.el.style.overflow = this.initialOverflow;
+        }, this.options.inDuration);
+        if (typeof this.options.onClose === 'function') {
+            this.options.onClose.call(this);
+        }
+        this._removeRevealCloseEventHandlers();
+    };
+}
+
+const _defaults$i = {
+    duration: 200, // ms
+    dist: -100, // zoom scale TODO: make this more intuitive as an option
+    shift: 0, // spacing for center image
+    padding: 0, // Padding between non center items
+    numVisible: 5, // Number of visible items in carousel
+    fullWidth: false, // Change to full width styles
+    indicators: false, // Toggle indicators
+    noWrap: false, // Don't wrap around and cycle through items.
+    onCycleTo: null // Callback for when a new slide is cycled to.
+};
+class Carousel extends Component {
+    hasMultipleSlides;
+    showIndicators;
+    noWrap;
+    /** If the carousel is being clicked or tapped. */
+    pressed;
+    /** If the carousel is currently being dragged. */
+    dragged;
+    offset;
+    target;
+    images;
+    itemWidth;
+    itemHeight;
+    dim;
+    _indicators;
+    count;
+    xform;
+    verticalDragged;
+    reference;
+    referenceY;
+    velocity;
+    frame;
+    timestamp;
+    ticker;
+    amplitude;
+    /** The index of the center carousel item. */
+    center = 0;
+    imageHeight;
+    scrollingTimeout;
+    oneTimeCallback;
+    constructor(el, options) {
+        super(el, options, Carousel);
+        this.el['M_Carousel'] = this;
+        this.options = {
+            ...Carousel.defaults,
+            ...options
+        };
+        // Setup
+        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 = false;
+        this.dragged = false;
+        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 = this.itemWidth * 2 + this.options.padding || 1; // Make sure dim is non zero for divisions.
+        // Full Width carousel setup
+        if (this.options.fullWidth) {
+            this.options.dist = 0;
+            this._setCarouselHeight();
+            // Offset fixed items when indicators.
+            if (this.showIndicators) {
+                this.el.querySelector('.carousel-fixed-item')?.classList.add('with-indicators');
+            }
+        }
+        // Iterate through slides
+        this._indicators = document.createElement('ul');
+        this._indicators.classList.add('indicators');
+        this.el.querySelectorAll('.carousel-item').forEach((item, i) => {
+            this.images.push(item);
+            if (this.showIndicators) {
+                const indicator = document.createElement('li');
+                indicator.classList.add('indicator-item');
+                indicator.tabIndex = 0;
+                if (i === 0) {
+                    indicator.classList.add('active');
+                }
+                this._indicators.appendChild(indicator);
+            }
+        });
+        if (this.showIndicators)
+            this.el.appendChild(this._indicators);
+        this.count = this.images.length;
+        // Cap numVisible at count
+        this.options.numVisible = Math.min(this.count, this.options.numVisible);
+        // Setup cross browser string
+        this.xform = 'transform';
+        ['webkit', 'Moz', 'O', 'ms'].every((prefix) => {
+            const e = prefix + 'Transform';
+            if (typeof document.body.style[e] !== 'undefined') {
+                this.xform = e;
+                return false;
+            }
+            return true;
+        });
+        this._setupEventHandlers();
+        this._scroll(this.offset);
+    }
+    static get defaults() {
+        return _defaults$i;
+    }
+    /**
+     * Initializes instances of Carousel.
+     * @param els HTML elements.
+     * @param options Component options.
+     */
+    static init(els, options = {}) {
+        return super.init(els, options, Carousel);
+    }
+    static getInstance(el) {
+        return el['M_Carousel'];
+    }
+    destroy() {
+        this._removeEventHandlers();
+        this.el['M_Carousel'] = undefined;
+    }
+    _setupEventHandlers() {
+        if (typeof window.ontouchstart !== 'undefined') {
+            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);
+        if (this.showIndicators && this._indicators) {
+            this._indicators.querySelectorAll('.indicator-item').forEach((el) => {
+                el.addEventListener('click', this._handleIndicatorClick);
+                el.addEventListener('keypress', this._handleIndicatorKeyPress);
+            });
+        }
+        // Resize
+        window.addEventListener('resize', this._handleThrottledResize);
+    }
+    _removeEventHandlers() {
+        if (typeof window.ontouchstart !== 'undefined') {
+            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);
+        if (this.showIndicators && this._indicators) {
+            this._indicators.querySelectorAll('.indicator-item').forEach((el) => {
+                el.removeEventListener('click', this._handleIndicatorClick);
+            });
+        }
+        window.removeEventListener('resize', this._handleThrottledResize);
+    }
+    _handleThrottledResize = Utils.throttle(function () {
+        this._handleResize();
+    }, 200, null).bind(this);
+    _handleCarouselTap = (e) => {
+        // Fixes firefox draggable image bug
+        if (e.type === 'mousedown' && e.target.tagName === 'IMG') {
+            e.preventDefault();
+        }
+        this.pressed = true;
+        this.dragged = false;
+        this.verticalDragged = false;
+        this.reference = this._xpos(e);
+        this.referenceY = this._ypos(e);
+        this.velocity = this.amplitude = 0;
+        this.frame = this.offset;
+        this.timestamp = Date.now();
+        clearInterval(this.ticker);
+        this.ticker = setInterval(this._track, 100);
+    };
+    _handleCarouselDrag = (e) => {
+        let x, y, delta, deltaY;
+        if (this.pressed) {
+            x = this._xpos(e);
+            y = this._ypos(e);
+            delta = this.reference - x;
+            deltaY = Math.abs(this.referenceY - y);
+            if (deltaY < 30 && !this.verticalDragged) {
+                // If vertical scrolling don't allow dragging.
+                if (delta > 2 || delta < -2) {
+                    this.dragged = true;
+                    this.reference = x;
+                    this._scroll(this.offset + delta);
+                }
+            }
+            else if (this.dragged) {
+                // If dragging don't allow vertical scroll.
+                e.preventDefault();
+                e.stopPropagation();
+                return false;
+            }
+            else {
+                // Vertical scrolling.
+                this.verticalDragged = true;
+            }
+        }
+        if (this.dragged) {
+            // If dragging don't allow vertical scroll.
+            e.preventDefault();
+            e.stopPropagation();
+            return false;
+        }
+    };
+    _handleCarouselRelease = (e) => {
+        if (this.pressed) {
+            this.pressed = false;
+        }
+        else {
+            return;
+        }
+        clearInterval(this.ticker);
+        this.target = this.offset;
+        if (this.velocity > 10 || this.velocity < -10) {
+            this.amplitude = 0.9 * this.velocity;
+            this.target = this.offset + this.amplitude;
+        }
+        this.target = Math.round(this.target / this.dim) * this.dim;
+        // No wrap of items.
+        if (this.noWrap) {
+            if (this.target >= this.dim * (this.count - 1)) {
+                this.target = this.dim * (this.count - 1);
+            }
+            else if (this.target < 0) {
+                this.target = 0;
+            }
+        }
+        this.amplitude = this.target - this.offset;
+        this.timestamp = Date.now();
+        requestAnimationFrame(this._autoScroll);
+        if (this.dragged) {
+            e.preventDefault();
+            e.stopPropagation();
+        }
+        return false;
+    };
+    _handleCarouselClick = (e) => {
+        // Disable clicks if carousel was dragged.
+        if (this.dragged) {
+            e.preventDefault();
+            e.stopPropagation();
+            return false;
+        }
+        else if (!this.options.fullWidth) {
+            const clickedElem = e.target.closest('.carousel-item');
+            if (!clickedElem)
+                return;
+            const clickedIndex = [...clickedElem.parentNode.children].indexOf(clickedElem);
+            const diff = this._wrap(this.center) - clickedIndex;
+            // Disable clicks if carousel was shifted by click
+            if (diff !== 0) {
+                e.preventDefault();
+                e.stopPropagation();
+            }
+            // fixes https://github.com/materializecss/materialize/issues/180
+            if (clickedIndex < 0) {
+                // relative X position > center of carousel = clicked at the right part of the carousel
+                if (e.clientX - e.target.getBoundingClientRect().left >
+                    this.el.clientWidth / 2) {
+                    this.next();
+                }
+                else {
+                    this.prev();
+                }
+            }
+            else {
+                this._cycleTo(clickedIndex);
+            }
+        }
+    };
+    _handleIndicatorClick = (e) => {
+        e.stopPropagation();
+        this._handleIndicatorInteraction(e);
+    };
+    _handleIndicatorKeyPress = (e) => {
+        e.stopPropagation();
+        if (Utils.keys.ENTER.includes(e.key)) {
+            this._handleIndicatorInteraction(e);
+        }
+    };
+    _handleIndicatorInteraction = (e) => {
+        const indicator = e.target.closest('.indicator-item');
+        if (indicator) {
+            const index = [...indicator.parentNode.children].indexOf(indicator);
+            this._cycleTo(index);
+        }
+    };
+    _handleResize = () => {
+        if (this.options.fullWidth) {
+            this.itemWidth = this.el.querySelector('.carousel-item').clientWidth;
+            this.imageHeight = this.el.querySelector('.carousel-item.active').clientHeight;
+            this.dim = this.itemWidth * 2 + this.options.padding;
+            this.offset = this.center * 2 * this.itemWidth;
+            this.target = this.offset;
+            this._setCarouselHeight(true);
+        }
+        else {
+            this._scroll();
+        }
+    };
+    _setCarouselHeight(imageOnly = false) {
+        const firstSlide = this.el.querySelector('.carousel-item.active')
+            ? this.el.querySelector('.carousel-item.active')
+            : this.el.querySelector('.carousel-item');
+        const firstImage = firstSlide.querySelector('img');
+        if (firstImage) {
+            if (firstImage.complete) {
+                // If image won't trigger the load event
+                const imageHeight = firstImage.clientHeight;
+                if (imageHeight > 0) {
+                    this.el.style.height = imageHeight + 'px';
+                }
+                else {
+                    // If image still has no height, use the natural dimensions to calculate
+                    const naturalWidth = firstImage.naturalWidth;
+                    const naturalHeight = firstImage.naturalHeight;
+                    const adjustedHeight = (this.el.clientWidth / naturalWidth) * naturalHeight;
+                    this.el.style.height = adjustedHeight + 'px';
+                }
+            }
+            else {
+                // Get height when image is loaded normally
+                firstImage.addEventListener('load', () => {
+                    this.el.style.height = firstImage.offsetHeight + 'px';
+                });
+            }
+        }
+        else if (!imageOnly) {
+            const slideHeight = firstSlide.clientHeight;
+            this.el.style.height = slideHeight + 'px';
+        }
+    }
+    _xpos(e) {
+        // touch event
+        if (e.type.startsWith('touch') && e.targetTouches.length >= 1) {
+            return e.targetTouches[0].clientX;
+        }
+        // mouse event
+        return e.clientX;
+    }
+    _ypos(e) {
+        // touch event
+        if (e.type.startsWith('touch') && e.targetTouches.length >= 1) {
+            return e.targetTouches[0].clientY;
+        }
+        // mouse event
+        return e.clientY;
+    }
+    _wrap(x) {
+        return x >= this.count ? x % this.count : x < 0 ? this._wrap(this.count + (x % this.count)) : x;
+    }
+    _track = () => {
+        const now = Date.now(), elapsed = now - this.timestamp, delta = this.offset - this.frame, v = (1000 * delta) / (1 + elapsed);
+        // now = Date.now();
+        // elapsed = now - this.timestamp;
+        this.timestamp = now;
+        // delta = this.offset - this.frame;
+        this.frame = this.offset;
+        // v = (1000 * delta) / (1 + elapsed);
+        this.velocity = 0.8 * v + 0.2 * this.velocity;
+    };
+    _autoScroll = () => {
+        let elapsed, delta;
+        if (this.amplitude) {
+            elapsed = Date.now() - this.timestamp;
+            delta = this.amplitude * Math.exp(-elapsed / this.options.duration);
+            if (delta > 2 || delta < -2) {
+                this._scroll(this.target - delta);
+                requestAnimationFrame(this._autoScroll);
+            }
+            else {
+                this._scroll(this.target);
+            }
+        }
+    };
+    _scroll(x = 0) {
+        // Track scrolling state
+        if (!this.el.classList.contains('scrolling')) {
+            this.el.classList.add('scrolling');
+        }
+        if (this.scrollingTimeout != null) {
+            clearTimeout(this.scrollingTimeout);
+        }
+        this.scrollingTimeout = setTimeout(() => {
+            this.el.classList.remove('scrolling');
+        }, this.options.duration);
+        // Start actual scroll
+        this.offset = typeof x === 'number' ? x : this.offset;
+        this.center = Math.floor((this.offset + this.dim / 2) / this.dim);
+        const half = this.count >> 1, delta = this.offset - this.center * this.dim, dir = delta < 0 ? 1 : -1, tween = (-dir * delta * 2) / this.dim;
+        let i, el, alignment, zTranslation, tweenedOpacity, centerTweenedOpacity;
+        const lastCenter = this.center;
+        const numVisibleOffset = 1 / this.options.numVisible;
+        // delta = this.offset - this.center * this.dim;
+        // dir = delta < 0 ? 1 : -1;
+        // tween = (-dir * delta * 2) / this.dim;
+        // half = this.count >> 1;
+        if (this.options.fullWidth) {
+            alignment = 'translateX(0)';
+            centerTweenedOpacity = 1;
+        }
+        else {
+            alignment = 'translateX(' + (this.el.clientWidth - this.itemWidth) / 2 + 'px) ';
+            alignment += 'translateY(' + (this.el.clientHeight - this.itemHeight) / 2 + 'px)';
+            centerTweenedOpacity = 1 - numVisibleOffset * tween;
+        }
+        // Set indicator active
+        if (this.showIndicators) {
+            const diff = this.center % this.count;
+            const activeIndicator = this._indicators.querySelector('.indicator-item.active');
+            const activeIndicatorIndex = [...activeIndicator.parentNode.children].indexOf(activeIndicator);
+            if (activeIndicatorIndex !== diff) {
+                activeIndicator.classList.remove('active');
+                const pos = diff < 0 ? this.count + diff : diff;
+                this._indicators.querySelectorAll('.indicator-item')[pos].classList.add('active');
+            }
+        }
+        // center
+        // Don't show wrapped items.
+        if (!this.noWrap || (this.center >= 0 && this.center < this.count)) {
+            el = this.images[this._wrap(this.center)];
+            // Add active class to center item.
+            if (!el.classList.contains('active')) {
+                this.el.querySelector('.carousel-item').classList.remove('active');
+                el.classList.add('active');
+            }
+            const transformString = `${alignment} translateX(${-delta / 2}px) translateX(${dir * this.options.shift * tween * i}px) translateZ(${this.options.dist * tween}px)`;
+            this._updateItemStyle(el, centerTweenedOpacity, 0, transformString);
+        }
+        for (i = 1; i <= half; ++i) {
+            // right side
+            if (this.options.fullWidth) {
+                zTranslation = this.options.dist;
+                tweenedOpacity = i === half && delta < 0 ? 1 - tween : 1;
+            }
+            else {
+                zTranslation = this.options.dist * (i * 2 + tween * dir);
+                tweenedOpacity = 1 - numVisibleOffset * (i * 2 + tween * dir);
+            }
+            // Don't show wrapped items.
+            if (!this.noWrap || this.center + i < this.count) {
+                el = this.images[this._wrap(this.center + i)];
+                const transformString = `${alignment} translateX(${this.options.shift + (this.dim * i - delta) / 2}px) translateZ(${zTranslation}px)`;
+                this._updateItemStyle(el, tweenedOpacity, -i, transformString);
+            }
+            // left side
+            if (this.options.fullWidth) {
+                zTranslation = this.options.dist;
+                tweenedOpacity = i === half && delta > 0 ? 1 - tween : 1;
+            }
+            else {
+                zTranslation = this.options.dist * (i * 2 - tween * dir);
+                tweenedOpacity = 1 - numVisibleOffset * (i * 2 - tween * dir);
+            }
+            // Don't show wrapped items.
+            if (!this.noWrap || this.center - i >= 0) {
+                el = this.images[this._wrap(this.center - i)];
+                const transformString = `${alignment} translateX(${-this.options.shift + (-this.dim * i - delta) / 2}px) translateZ(${zTranslation}px)`;
+                this._updateItemStyle(el, tweenedOpacity, -i, transformString);
+            }
+        }
+        // center
+        // Don't show wrapped items.
+        if (!this.noWrap || (this.center >= 0 && this.center < this.count)) {
+            el = this.images[this._wrap(this.center)];
+            const transformString = `${alignment} translateX(${-delta / 2}px) translateX(${dir * this.options.shift * tween}px) translateZ(${this.options.dist * tween}px)`;
+            this._updateItemStyle(el, centerTweenedOpacity, 0, transformString);
+        }
+        // onCycleTo callback
+        const _currItem = this.el.querySelectorAll('.carousel-item')[this._wrap(this.center)];
+        if (lastCenter !== this.center && typeof this.options.onCycleTo === 'function') {
+            this.options.onCycleTo.call(this, _currItem, this.dragged);
+        }
+        // One time callback
+        if (typeof this.oneTimeCallback === 'function') {
+            this.oneTimeCallback.call(this, _currItem, this.dragged);
+            this.oneTimeCallback = null;
+        }
+    }
+    _updateItemStyle(el, opacity, zIndex, transform) {
+        el.style[this.xform] = transform;
+        el.style.zIndex = zIndex.toString();
+        el.style.opacity = opacity.toString();
+        el.style.visibility = 'visible';
+    }
+    _cycleTo(n, callback = null) {
+        let diff = (this.center % this.count) - n;
+        // Account for wraparound.
+        if (!this.noWrap) {
+            if (diff < 0) {
+                if (Math.abs(diff + this.count) < Math.abs(diff)) {
+                    diff += this.count;
+                }
+            }
+            else if (diff > 0) {
+                if (Math.abs(diff - this.count) < diff) {
+                    diff -= this.count;
+                }
+            }
+        }
+        this.target = this.dim * Math.round(this.offset / this.dim);
+        // Next
+        if (diff < 0) {
+            this.target += this.dim * Math.abs(diff);
+        } // Prev
+        else if (diff > 0) {
+            this.target -= this.dim * diff;
+        }
+        // Set one time callback
+        if (typeof callback === 'function') {
+            this.oneTimeCallback = callback;
+        }
+        // Scroll
+        if (this.offset !== this.target) {
+            this.amplitude = this.target - this.offset;
+            this.timestamp = Date.now();
+            requestAnimationFrame(this._autoScroll);
+        }
+    }
+    /**
+     * Move carousel to next slide or go forward a given amount of slides.
+     * @param n How many times the carousel slides.
+     */
+    next(n = 1) {
+        if (n === undefined || isNaN(n)) {
+            n = 1;
+        }
+        let index = this.center + n;
+        if (index >= this.count || index < 0) {
+            if (this.noWrap)
+                return;
+            index = this._wrap(index);
+        }
+        this._cycleTo(index);
+    }
+    /**
+     * Move carousel to previous slide or go back a given amount of slides.
+     * @param n How many times the carousel slides.
+     */
+    prev(n = 1) {
+        if (n === undefined || isNaN(n)) {
+            n = 1;
+        }
+        let index = this.center - n;
+        if (index >= this.count || index < 0) {
+            if (this.noWrap)
+                return;
+            index = this._wrap(index);
+        }
+        this._cycleTo(index);
+    }
+    /**
+     * Move carousel to nth slide.
+     * @param n Index of slide.
+     * @param callback "onCycleTo" optional callback.
+     */
+    set(n, callback) {
+        if (n === undefined || isNaN(n)) {
+            n = 0;
+        }
+        if (n > this.count || n < 0) {
+            if (this.noWrap)
+                return;
+            n = this._wrap(n);
+        }
+        this._cycleTo(n, callback);
+    }
+}
+
+const _defaults$h = {
+    data: [],
+    placeholder: '',
+    secondaryPlaceholder: '',
+    closeIconClass: 'material-icons',
+    autocompleteOptions: {},
+    autocompleteOnly: false,
+    limit: Infinity,
+    allowUserInput: false,
+    onChipAdd: null,
+    onChipSelect: null,
+    onChipDelete: null
+};
+function gGetIndex(el) {
+    return [...el.parentNode.children].indexOf(el);
+}
+class Chips extends Component {
+    /** Array of the current chips data. */
+    chipsData;
+    /** If the chips has autocomplete enabled. */
+    hasAutocomplete;
+    /** Autocomplete instance, if any. */
+    autocomplete;
+    _input;
+    _label;
+    _chips;
+    static _keydown;
+    _selectedChip;
+    constructor(el, options) {
+        super(el, options, Chips);
+        this.el['M_Chips'] = this;
+        this.options = {
+            ...Chips.defaults,
+            ...options
+        };
+        this.el.classList.add('chips');
+        this.chipsData = [];
+        this._chips = [];
+        // Render initial chips
+        if (this.options.data.length) {
+            this.chipsData = this.options.data;
+            this._renderChips();
+        }
+        this._setupLabel();
+        // Render input element, setup event handlers
+        if (this.options.allowUserInput) {
+            this.el.classList.add('input-field');
+            this._setupInput();
+            this._setupEventHandlers();
+            // move input to end
+            this.el.append(this._input);
+        }
+    }
+    static get defaults() {
+        return _defaults$h;
+    }
+    /**
+     * Initializes instances of Chips.
+     * @param els HTML elements.
+     * @param options Component options.
+     */
+    static init(els, options = {}) {
+        return super.init(els, options, Chips);
+    }
+    static getInstance(el) {
+        return el['M_Chips'];
+    }
+    getData() {
+        return this.chipsData;
+    }
+    destroy() {
+        if (this.options.allowUserInput) {
+            this._removeEventHandlers();
+        }
+        this._chips.forEach((c) => c.remove());
+        this._chips = [];
+        this.el['M_Chips'] = undefined;
+    }
+    _setupEventHandlers() {
+        this.el.addEventListener('click', this._handleChipClick);
+        // @todo why do we need this as document event listener, shouldn't we apply it to the element wrapper itself?
+        document.addEventListener('keydown', Chips._handleChipsKeydown);
+        document.addEventListener('keyup', Chips._handleChipsKeyup);
+        this.el.addEventListener('blur', Chips._handleChipsBlur, true);
+        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', Chips._handleChipsKeydown);
+        document.removeEventListener('keyup', Chips._handleChipsKeyup);
+        this.el.removeEventListener('blur', Chips._handleChipsBlur, true);
+        this._input.removeEventListener('focus', this._handleInputFocus);
+        this._input.removeEventListener('blur', this._handleInputBlur);
+        this._input.removeEventListener('keydown', this._handleInputKeydown);
+    }
+    _handleChipClick = (e) => {
+        const _chip = e.target.closest('.chip');
+        const clickedClose = e.target.classList.contains('close');
+        if (_chip) {
+            const index = [..._chip.parentNode.children].indexOf(_chip);
+            if (clickedClose) {
+                this.deleteChip(index);
+                this._input.focus();
+            }
+            else {
+                this.selectChip(index);
+            }
+            // Default handle click to focus on input
+        }
+        else {
+            this._input.focus();
+        }
+    };
+    static _handleChipsKeydown(e) {
+        Chips._keydown = true;
+        const chips = e.target.closest('.chips');
+        const chipsKeydown = e.target && chips;
+        // Don't handle keydown inputs on input and textarea
+        const tag = e.target.tagName;
+        if (tag === 'INPUT' || tag === 'TEXTAREA' || !chipsKeydown)
+            return;
+        const currChips = chips['M_Chips'];
+        if (Utils.keys.BACKSPACE.includes(e.key) || Utils.keys.DELETE.includes(e.key)) {
+            e.preventDefault();
+            let selectIndex = currChips.chipsData.length;
+            if (currChips._selectedChip) {
+                const index = gGetIndex(currChips._selectedChip);
+                currChips.deleteChip(index);
+                currChips._selectedChip = null;
+                // Make sure selectIndex doesn't go negative
+                selectIndex = Math.max(index - 1, 0);
+            }
+            if (currChips.chipsData.length)
+                currChips.selectChip(selectIndex);
+            else
+                currChips._input.focus();
+        }
+        else if (Utils.keys.ARROW_LEFT.includes(e.key)) {
+            if (currChips._selectedChip) {
+                const selectIndex = gGetIndex(currChips._selectedChip) - 1;
+                if (selectIndex < 0)
+                    return;
+                currChips.selectChip(selectIndex);
+            }
+        }
+        else if (Utils.keys.ARROW_RIGHT.includes(e.key)) {
+            if (currChips._selectedChip) {
+                const selectIndex = gGetIndex(currChips._selectedChip) + 1;
+                if (selectIndex >= currChips.chipsData.length)
+                    currChips._input.focus();
+                else
+                    currChips.selectChip(selectIndex);
+            }
+        }
+    }
+    static _handleChipsKeyup() {
+        Chips._keydown = false;
+    }
+    static _handleChipsBlur(e) {
+        if (!Chips._keydown && document.hidden) {
+            const chips = e.target.closest('.chips');
+            const currChips = chips['M_Chips'];
+            currChips._selectedChip = null;
+        }
+    }
+    _handleInputFocus = () => {
+        this.el.classList.add('focus');
+    };
+    _handleInputBlur = () => {
+        this.el.classList.remove('focus');
+    };
+    _handleInputKeydown = (e) => {
+        Chips._keydown = true;
+        if (Utils.keys.ENTER.includes(e.key)) {
+            // Override enter if autocompleting.
+            if (this.hasAutocomplete && this.autocomplete && this.autocomplete.isOpen) {
+                return;
+            }
+            e.preventDefault();
+            if (!this.hasAutocomplete || (this.hasAutocomplete && !this.options.autocompleteOnly)) {
+                this.addChip({ id: this._input.value });
+            }
+            this._input.value = '';
+        }
+        else if ((Utils.keys.BACKSPACE.includes(e.key) || Utils.keys.ARROW_LEFT.includes(e.key)) &&
+            this._input.value === '' &&
+            this.chipsData.length) {
+            e.preventDefault();
+            this.selectChip(this.chipsData.length - 1);
+        }
+    };
+    _renderChip(chip) {
+        if (!chip.id)
+            return;
+        const renderedChip = document.createElement('div');
+        renderedChip.classList.add('chip');
+        renderedChip.innerText = chip.text || chip.id;
+        // attach image if needed
+        if (chip.image) {
+            const img = document.createElement('img');
+            img.setAttribute('src', chip.image);
+            renderedChip.insertBefore(img, renderedChip.firstChild);
+        }
+        if (this.options.allowUserInput) {
+            renderedChip.setAttribute('tabindex', '0');
+            const closeIcon = document.createElement('i');
+            closeIcon.classList.add(this.options.closeIconClass, 'close');
+            closeIcon.innerText = 'close';
+            renderedChip.appendChild(closeIcon);
+        }
+        return renderedChip;
+    }
+    _renderChips() {
+        this._chips = []; //.remove();
+        for (let i = 0; i < this.chipsData.length; i++) {
+            const chipElem = this._renderChip(this.chipsData[i]);
+            this.el.appendChild(chipElem);
+            this._chips.push(chipElem);
+        }
+    }
+    _setupAutocomplete() {
+        this.options.autocompleteOptions.onAutocomplete = (items) => {
+            if (items.length > 0)
+                this.addChip({
+                    id: items[0].id,
+                    text: items[0].text,
+                    image: items[0].image
+                });
+            this._input.value = '';
+            this._input.focus();
+        };
+        this.autocomplete = Autocomplete.init(this._input, this.options.autocompleteOptions);
+    }
+    _setupInput() {
+        this._input = this.el.querySelector('input');
+        if (!this._input) {
+            this._input = document.createElement('input');
+            this.el.append(this._input);
+        }
+        this._input.classList.add('input');
+        this.hasAutocomplete = Object.keys(this.options.autocompleteOptions).length > 0;
+        // Setup autocomplete if needed
+        if (this.hasAutocomplete)
+            this._setupAutocomplete();
+        this._setPlaceholder();
+        // Set input id
+        if (!this._input.getAttribute('id'))
+            this._input.setAttribute('id', Utils.guid());
+    }
+    _setupLabel() {
+        this._label = this.el.querySelector('label');
+        if (this._label)
+            this._label.setAttribute('for', this._input.getAttribute('id'));
+    }
+    _setPlaceholder() {
+        if (this.chipsData !== undefined && !this.chipsData.length && this.options.placeholder) {
+            this._input.placeholder = this.options.placeholder;
+        }
+        else if ((this.chipsData === undefined || !!this.chipsData.length) &&
+            this.options.secondaryPlaceholder) {
+            this._input.placeholder = this.options.secondaryPlaceholder;
+        }
+    }
+    _isValidAndNotExist(chip) {
+        const isValid = !!chip.id;
+        const doesNotExist = !this.chipsData.some((item) => item.id == chip.id);
+        return isValid && doesNotExist;
+    }
+    /**
+     * Add chip to input.
+     * @param chip Chip data object
+     */
+    addChip(chip) {
+        if (!this._isValidAndNotExist(chip) || this.chipsData.length >= this.options.limit)
+            return;
+        const renderedChip = this._renderChip(chip);
+        this._chips.push(renderedChip);
+        this.chipsData.push(chip);
+        //$(this._input).before(renderedChip);
+        this._input.before(renderedChip);
+        this._setPlaceholder();
+        // fire chipAdd callback
+        if (typeof this.options.onChipAdd === 'function') {
+            this.options.onChipAdd(this.el, renderedChip);
+        }
+    }
+    /**
+     * Delete nth chip.
+     * @param chipIndex  Index of chip
+     */
+    deleteChip(chipIndex) {
+        const chip = this._chips[chipIndex];
+        this._chips[chipIndex].remove();
+        this._chips.splice(chipIndex, 1);
+        this.chipsData.splice(chipIndex, 1);
+        this._setPlaceholder();
+        // fire chipDelete callback
+        if (typeof this.options.onChipDelete === 'function') {
+            this.options.onChipDelete(this.el, chip);
+        }
+    }
+    /**
+     * Select nth chip.
+     * @param chipIndex Index of chip
+     */
+    selectChip(chipIndex) {
+        const chip = this._chips[chipIndex];
+        this._selectedChip = chip;
+        chip.focus();
+        // fire chipSelect callback
+        if (typeof this.options.onChipSelect === 'function') {
+            this.options.onChipSelect(this.el, chip);
+        }
+    }
+    static Init() {
+        if (typeof document !== 'undefined')
+            // Handle removal of static chips.
+            document.addEventListener('DOMContentLoaded', () => {
+                const chips = document.querySelectorAll('.chips');
+                chips.forEach((el) => {
+                    // if (el && (el['M_Chips == undefined) return;
+                    el.addEventListener('click', (e) => {
+                        if (e.target.classList.contains('close')) {
+                            const chip = e.target.closest('.chip');
+                            if (chip)
+                                chip.remove();
+                        }
+                    });
+                });
+            });
+    }
+    static {
+        Chips._keydown = false;
+    }
+}
+
+const _defaults$g = {
+    accordion: true,
+    onOpenStart: null,
+    onOpenEnd: null,
+    onCloseStart: null,
+    onCloseEnd: null,
+    inDuration: 300,
+    outDuration: 300
+};
+class Collapsible extends Component {
+    _headers;
+    constructor(el, options) {
+        super(el, options, Collapsible);
+        this.el['M_Collapsible'] = this;
+        this.options = {
+            ...Collapsible.defaults,
+            ...options
+        };
+        // Setup tab indices
+        this._headers = Array.from(this.el.querySelectorAll('li > .collapsible-header'));
+        this._headers.forEach((el) => (el.tabIndex = 0));
+        this._setupEventHandlers();
+        // Open active
+        const activeBodies = Array.from(this.el.querySelectorAll('li.active > .collapsible-body'));
+        if (this.options.accordion) {
+            if (activeBodies.length > 0) {
+                // Accordion => open first active only
+                this._setExpanded(activeBodies[0]);
+            }
+        }
+        else {
+            // Expandables => all active
+            activeBodies.forEach((el) => this._setExpanded(el));
+        }
+    }
+    static get defaults() {
+        return _defaults$g;
+    }
+    /**
+     * Initializes instances of Collapsible.
+     * @param els HTML elements.
+     * @param options Component options.
+     */
+    static init(els, options = {}) {
+        return super.init(els, options, Collapsible);
+    }
+    static getInstance(el) {
+        return el['M_Collapsible'];
+    }
+    destroy() {
+        this._removeEventHandlers();
+        this.el['M_Collapsible'] = undefined;
+    }
+    _setupEventHandlers() {
+        this.el.addEventListener('click', this._handleCollapsibleClick);
+        this._headers.forEach((header) => header.addEventListener('keydown', this._handleCollapsibleKeydown));
+    }
+    _removeEventHandlers() {
+        this.el.removeEventListener('click', this._handleCollapsibleClick);
+        this._headers.forEach((header) => header.removeEventListener('keydown', this._handleCollapsibleKeydown));
+    }
+    _handleCollapsibleClick = (e) => {
+        const header = e.target.closest('.collapsible-header');
+        if (e.target && header) {
+            const collapsible = header.closest('.collapsible');
+            if (collapsible !== this.el)
+                return;
+            const li = header.closest('li');
+            const isActive = li.classList.contains('active');
+            const index = [...li.parentNode.children].indexOf(li);
+            if (isActive)
+                this.close(index);
+            else
+                this.open(index);
+        }
+    };
+    _handleCollapsibleKeydown = (e) => {
+        if (Utils.keys.ENTER.includes(e.key)) {
+            this._handleCollapsibleClick(e);
+        }
+    };
+    _setExpanded(li) {
+        li.style.maxHeight = li.scrollHeight + 'px';
+    }
+    _animateIn(index) {
+        const li = this.el.children[index];
+        if (!li)
+            return;
+        const body = li.querySelector('.collapsible-body');
+        const duration = this.options.inDuration; // easeInOutCubic
+        body.style.transition = `max-height ${duration}ms ease-out`;
+        this._setExpanded(body);
+        setTimeout(() => {
+            if (typeof this.options.onOpenEnd === 'function') {
+                this.options.onOpenEnd.call(this, li);
+            }
+        }, duration);
+    }
+    _animateOut(index) {
+        const li = this.el.children[index];
+        if (!li)
+            return;
+        const body = li.querySelector('.collapsible-body');
+        const duration = this.options.outDuration; // easeInOutCubic
+        body.style.transition = `max-height ${duration}ms ease-out`;
+        body.style.maxHeight = '0';
+        setTimeout(() => {
+            if (typeof this.options.onCloseEnd === 'function') {
+                this.options.onCloseEnd.call(this, li);
+            }
+        }, duration);
+    }
+    /**
+     * Open collapsible section.
+     * @param n Nth section to open.
+     */
+    open = (index) => {
+        const listItems = Array.from(this.el.children).filter((c) => c.tagName === 'LI');
+        const li = listItems[index];
+        if (li && !li.classList.contains('active')) {
+            // onOpenStart callback
+            if (typeof this.options.onOpenStart === 'function') {
+                this.options.onOpenStart.call(this, li);
+            }
+            // Handle accordion behavior
+            if (this.options.accordion) {
+                const activeLis = listItems.filter((li) => li.classList.contains('active'));
+                activeLis.forEach((activeLi) => {
+                    const index = listItems.indexOf(activeLi);
+                    this.close(index);
+                });
+            }
+            // Animate in
+            li.classList.add('active');
+            this._animateIn(index);
+        }
+    };
+    /**
+     * Close collapsible section.
+     * @param n Nth section to close.
+     */
+    close = (index) => {
+        const li = Array.from(this.el.children).filter((c) => c.tagName === 'LI')[index];
+        if (li && li.classList.contains('active')) {
+            // onCloseStart callback
+            if (typeof this.options.onCloseStart === 'function') {
+                this.options.onCloseStart.call(this, li);
+            }
+            // Animate out
+            li.classList.remove('active');
+            this._animateOut(index);
+        }
+    };
+}
+
+const _defaults$f = {
+    classes: '',
+    dropdownOptions: {}
+};
+class FormSelect extends Component {
+    /** If this is a multiple select. */
+    isMultiple;
+    /**
+     * Label associated with the current select element.
+     * Is "null", if not detected.
+     */
+    labelEl;
+    /** Dropdown UL element. */
+    dropdownOptions;
+    /** Text input that shows current selected option. */
+    input;
+    /** Instance of the dropdown plugin for this select. */
+    dropdown;
+    /** The select wrapper element. */
+    wrapper;
+    selectOptions;
+    _values;
+    constructor(el, options) {
+        super(el, options, FormSelect);
+        if (this.el.classList.contains('browser-default'))
+            return;
+        this.el['M_FormSelect'] = this;
+        this.options = {
+            ...FormSelect.defaults,
+            ...options
+        };
+        this.isMultiple = this.el.multiple;
+        this.el.tabIndex = -1;
+        this._values = [];
+        this._setupDropdown();
+        this._setupEventHandlers();
+    }
+    static get defaults() {
+        return _defaults$f;
+    }
+    /**
+     * Initializes instances of FormSelect.
+     * @param els HTML elements.
+     * @param options Component options.
+     */
+    static init(els, options = {}) {
+        return super.init(els, options, FormSelect);
+    }
+    static getInstance(el) {
+        return el['M_FormSelect'];
+    }
+    destroy() {
+        this._removeEventHandlers();
+        this._removeDropdown();
+        this.el['M_FormSelect'] = undefined;
+    }
+    _setupEventHandlers() {
+        this.dropdownOptions.querySelectorAll('li:not(.optgroup)').forEach((el) => {
+            el.addEventListener('click', this._handleOptionClick);
+            el.addEventListener('keydown', (e) => {
+                if (e.key === ' ' || e.key === 'Enter')
+                    this._handleOptionClick(e);
+            });
+        });
+        this.el.addEventListener('change', this._handleSelectChange);
+        this.input.addEventListener('click', this._handleInputClick);
+    }
+    _removeEventHandlers() {
+        this.dropdownOptions.querySelectorAll('li:not(.optgroup)').forEach((el) => {
+            el.removeEventListener('click', this._handleOptionClick);
+        });
+        this.el.removeEventListener('change', this._handleSelectChange);
+        this.input.removeEventListener('click', this._handleInputClick);
+    }
+    _handleSelectChange = () => {
+        this._setValueToInput();
+    };
+    _handleOptionClick = (e) => {
+        e.preventDefault();
+        const virtualOption = e.target.closest('li');
+        this._selectOptionElement(virtualOption);
+        e.stopPropagation();
+    };
+    _arraysEqual(a, b) {
+        if (a === b)
+            return true;
+        if (a == null || b == null)
+            return false;
+        if (a.length !== b.length)
+            return false;
+        for (let i = 0; i < a.length; ++i)
+            if (a[i] !== b[i])
+                return false;
+        return true;
+    }
+    _selectOptionElement(virtualOption) {
+        if (!virtualOption.classList.contains('disabled') &&
+            !virtualOption.classList.contains('optgroup')) {
+            const value = this._values.find((value) => value.optionEl === virtualOption);
+            const previousSelectedValues = this.getSelectedValues();
+            if (this.isMultiple) {
+                // Multi-Select
+                this._toggleEntryFromArray(value);
+            }
+            else {
+                // Single-Select
+                this._deselectAll();
+                this._selectValue(value);
+            }
+            // Refresh Input-Text
+            this._setValueToInput();
+            // Trigger Change-Event only when data is different
+            const actualSelectedValues = this.getSelectedValues();
+            const selectionHasChanged = !this._arraysEqual(previousSelectedValues, actualSelectedValues);
+            if (selectionHasChanged)
+                this.el.dispatchEvent(new Event('change', { bubbles: true, cancelable: true, composed: true })); // trigger('change');
+        }
+        if (!this.isMultiple)
+            this.dropdown.close();
+    }
+    _handleInputClick = () => {
+        if (this.dropdown && this.dropdown.isOpen) {
+            this._setValueToInput();
+            this._setSelectedStates();
+        }
+    };
+    _setupDropdown() {
+        this.labelEl = document.querySelector('[for="' + this.el.id + '"]');
+        if (this.labelEl)
+            this.labelEl.style.display = 'none';
+        this.wrapper = document.createElement('div');
+        this.wrapper.classList.add('select-wrapper', 'input-field');
+        if (this.options.classes.length > 0) {
+            this.wrapper.classList.add(...this.options.classes.split(' '));
+        }
+        this.el.before(this.wrapper);
+        // Move actual select element into overflow hidden wrapper
+        const hiddenDiv = document.createElement('div');
+        hiddenDiv.classList.add('hide-select');
+        this.wrapper.append(hiddenDiv);
+        hiddenDiv.appendChild(this.el);
+        if (this.el.disabled)
+            this.wrapper.classList.add('disabled');
+        this.selectOptions = (Array.from(this.el.children).filter((el) => ['OPTION', 'OPTGROUP'].includes(el.tagName)));
+        // Create dropdown
+        this.dropdownOptions = document.createElement('ul');
+        this.dropdownOptions.id = `select-options-${Utils.guid()}`;
+        this.dropdownOptions.classList.add('dropdown-content', 'select-dropdown');
+        this.dropdownOptions.setAttribute('role', 'listbox');
+        this.dropdownOptions.ariaMultiSelectable = this.isMultiple.toString();
+        if (this.isMultiple)
+            this.dropdownOptions.classList.add('multiple-select-dropdown');
+        // Create dropdown structure
+        if (this.selectOptions.length > 0) {
+            this.selectOptions.forEach((realOption) => {
+                if (realOption.tagName === 'OPTION') {
+                    // Option
+                    const virtualOption = this._createAndAppendOptionWithIcon(realOption, this.isMultiple ? 'multiple' : undefined);
+                    this._addOptionToValues(realOption, virtualOption);
+                }
+                else if (realOption.tagName === 'OPTGROUP') {
+                    // Optgroup
+                    const groupId = 'opt-group-' + Utils.guid();
+                    const groupParent = document.createElement('li');
+                    groupParent.classList.add('optgroup');
+                    groupParent.tabIndex = -1;
+                    groupParent.setAttribute('role', 'group');
+                    groupParent.setAttribute('aria-labelledby', groupId);
+                    groupParent.innerHTML = `<span id="${groupId}" role="presentation">${realOption.getAttribute('label')}</span>`;
+                    this.dropdownOptions.append(groupParent);
+                    const groupChildren = [];
+                    const selectOptions = (Array.from(realOption.children).filter((el) => el.tagName === 'OPTION'));
+                    selectOptions.forEach((realOption) => {
+                        const virtualOption = this._createAndAppendOptionWithIcon(realOption, 'optgroup-option');
+                        const childId = 'opt-child-' + Utils.guid();
+                        virtualOption.id = childId;
+                        groupChildren.push(childId);
+                        this._addOptionToValues(realOption, virtualOption);
+                    });
+                    groupParent.setAttribute('aria-owns', groupChildren.join(' '));
+                }
+            });
+        }
+        this.wrapper.append(this.dropdownOptions);
+        // Add input dropdown
+        this.input = document.createElement('input');
+        this.input.id = 'm_select-input-' + Utils.guid();
+        this.input.classList.add('select-dropdown', 'dropdown-trigger');
+        this.input.type = 'text';
+        this.input.readOnly = true;
+        this.input.setAttribute('data-target', this.dropdownOptions.id);
+        this.input.ariaReadOnly = 'true';
+        this.input.ariaRequired = this.el.hasAttribute('required').toString(); //setAttribute("aria-required", this.el.hasAttribute("required"));
+        if (this.el.disabled)
+            this.input.disabled = true; // 'true');
+        const attrs = this.el.attributes;
+        for (let i = 0; i < attrs.length; ++i) {
+            const attr = attrs[i];
+            if (attr.name.startsWith('aria-'))
+                this.input.setAttribute(attr.name, attr.value);
+        }
+        // Adds aria-attributes to input element
+        this.input.setAttribute('role', 'combobox');
+        this.input.ariaExpanded = 'false';
+        this.input.setAttribute('aria-owns', this.dropdownOptions.id);
+        this.input.setAttribute('aria-controls', this.dropdownOptions.id);
+        this.input.placeholder = ' ';
+        this.wrapper.prepend(this.input);
+        this._setValueToInput();
+        // Add caret
+        const dropdownIcon = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); //document.createElement('svg')
+        dropdownIcon.classList.add('caret');
+        dropdownIcon.setAttribute('height', '24');
+        dropdownIcon.setAttribute('width', '24');
+        dropdownIcon.setAttribute('viewBox', '0 0 24 24');
+        dropdownIcon.ariaHidden = 'true';
+        dropdownIcon.innerHTML = `<path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/>`;
+        this.wrapper.prepend(dropdownIcon);
+        // Initialize dropdown
+        if (!this.el.disabled) {
+            const dropdownOptions = { ...this.options.dropdownOptions }; // TODO:
+            dropdownOptions.coverTrigger = false;
+            const userOnOpenEnd = dropdownOptions.onOpenEnd;
+            const userOnCloseEnd = dropdownOptions.onCloseEnd;
+            // Add callback for centering selected option when dropdown content is scrollable
+            dropdownOptions.onOpenEnd = () => {
+                const selectedOption = this.dropdownOptions.querySelector('.selected');
+                if (selectedOption) {
+                    // Focus selected option in dropdown
+                    Utils.keyDown = true;
+                    this.dropdown.focusedIndex = [...selectedOption.parentNode.children].indexOf(selectedOption);
+                    this.dropdown._focusFocusedItem();
+                    Utils.keyDown = false;
+                    // Handle scrolling to selected option
+                    if (this.dropdown.isScrollable) {
+                        let scrollOffset = selectedOption.getBoundingClientRect().top -
+                            this.dropdownOptions.getBoundingClientRect().top; // scroll to selected option
+                        scrollOffset -= this.dropdownOptions.clientHeight / 2; // center in dropdown
+                        this.dropdownOptions.scrollTop = scrollOffset;
+                    }
+                }
+                this.input.ariaExpanded = 'true';
+                // Handle user declared onOpenEnd if needed
+                if (userOnOpenEnd && typeof userOnOpenEnd === 'function')
+                    userOnOpenEnd.call(this.dropdown, this.el);
+            };
+            // Add callback for reseting "expanded" state
+            dropdownOptions.onCloseEnd = () => {
+                this.input.ariaExpanded = 'false';
+                // Handle user declared onOpenEnd if needed
+                if (userOnCloseEnd && typeof userOnCloseEnd === 'function')
+                    userOnCloseEnd.call(this.dropdown, this.el);
+            };
+            // Prevent dropdown from closing too early
+            dropdownOptions.closeOnClick = false;
+            this.dropdown = Dropdown.init(this.input, dropdownOptions);
+        }
+        // Add initial selections
+        this._setSelectedStates();
+        // Add Label
+        if (this.labelEl) {
+            const label = document.createElement('label');
+            label.htmlFor = this.input.id;
+            label.innerText = this.labelEl.innerText;
+            this.input.after(label);
+        }
+    }
+    _addOptionToValues(realOption, virtualOption) {
+        this._values.push({ el: realOption, optionEl: virtualOption });
+    }
+    _removeDropdown() {
+        this.wrapper.querySelector('.caret').remove();
+        this.input.remove();
+        this.dropdownOptions.remove();
+        this.wrapper.before(this.el);
+        this.wrapper.remove();
+    }
+    _createAndAppendOptionWithIcon(realOption, type) {
+        const li = document.createElement('li');
+        li.setAttribute('role', 'option');
+        if (realOption.disabled) {
+            li.classList.add('disabled');
+            li.ariaDisabled = 'true';
+        }
+        if (type === 'optgroup-option')
+            li.classList.add(type);
+        // Text / Checkbox
+        const span = document.createElement('span');
+        span.innerHTML = realOption.innerHTML;
+        if (this.isMultiple && !realOption.disabled) {
+            span.innerHTML = `<label><input type="checkbox"><span>${realOption.innerHTML}</span></label>`;
+        }
+        li.appendChild(span);
+        // add Icon
+        const iconUrl = realOption.getAttribute('data-icon');
+        const classes = realOption.getAttribute('class')?.split(' ');
+        if (iconUrl) {
+            const img = document.createElement('img');
+            if (classes)
+                img.classList.add(...classes);
+            img.src = iconUrl;
+            img.ariaHidden = 'true';
+            li.prepend(img);
+        }
+        // Check for multiple type
+        this.dropdownOptions.append(li);
+        return li;
+    }
+    _selectValue(value) {
+        value.el.selected = true;
+        value.optionEl.classList.add('selected');
+        value.optionEl.ariaSelected = 'true'; // setAttribute("aria-selected", true);
+        const checkbox = value.optionEl.querySelector('input[type="checkbox"]');
+        if (checkbox)
+            checkbox.checked = true;
+    }
+    _deselectValue(value) {
+        value.el.selected = false;
+        value.optionEl.classList.remove('selected');
+        value.optionEl.ariaSelected = 'false'; //setAttribute("aria-selected", false);
+        const checkbox = value.optionEl.querySelector('input[type="checkbox"]');
+        if (checkbox)
+            checkbox.checked = false;
+    }
+    _deselectAll() {
+        this._values.forEach((value) => this._deselectValue(value));
+    }
+    _isValueSelected(value) {
+        const realValues = this.getSelectedValues();
+        return realValues.some((realValue) => realValue === value.el.value);
+    }
+    _toggleEntryFromArray(value) {
+        if (this._isValueSelected(value))
+            this._deselectValue(value);
+        else
+            this._selectValue(value);
+    }
+    _getSelectedOptions() {
+        // remove null, false, ... values
+        return Array.prototype.filter.call(this.el.selectedOptions, (realOption) => realOption);
+    }
+    _setValueToInput() {
+        const selectedRealOptions = this._getSelectedOptions();
+        const selectedOptionPairs = this._values.filter((value) => selectedRealOptions.indexOf(value.el) >= 0);
+        // Filter not disabled
+        const notDisabledOptionPairs = selectedOptionPairs.filter((op) => !op.el.disabled);
+        const texts = notDisabledOptionPairs.map((value) => value.optionEl.querySelector('span').innerText.trim());
+        // Set input-text to first Option with empty value which indicates a description like "choose your option"
+        if (texts.length === 0) {
+            const firstDisabledOption = this.el.querySelector('option:disabled');
+            if (firstDisabledOption && firstDisabledOption.value === '') {
+                this.input.value = firstDisabledOption.innerText;
+                return;
+            }
+        }
+        this.input.value = texts.join(', ');
+    }
+    _setSelectedStates() {
+        this._values.forEach((value) => {
+            const optionIsSelected = value.el.selected;
+            const cb = value.optionEl.querySelector('input[type="checkbox"]');
+            if (cb)
+                cb.checked = optionIsSelected;
+            if (optionIsSelected) {
+                this._activateOption(this.dropdownOptions, value.optionEl);
+            }
+            else {
+                value.optionEl.classList.remove('selected');
+                value.optionEl.ariaSelected = 'false'; // attr("aria-selected", 'false');
+            }
+        });
+    }
+    _activateOption(ul, li) {
+        if (!li)
+            return;
+        if (!this.isMultiple)
+            ul.querySelectorAll('li.selected').forEach((li) => li.classList.remove('selected'));
+        li.classList.add('selected');
+        li.ariaSelected = 'true';
+    }
+    getSelectedValues() {
+        return this._getSelectedOptions().map((realOption) => realOption.value);
+    }
+}
+
+const _defaults$e = {
+    // the default output format for the input field value
+    format: 'mmm dd, yyyy',
+    // Used to create date object from current input string
+    parse: null,
+    // The initial condition if the datepicker is based on date range
+    isDateRange: false,
+    // The selector of the user specified date range end element
+    dateRangeEndEl: null,
+    // The initial condition if the datepicker is based on multiple date selection
+    isMultipleSelection: false,
+    // The initial date to view when first opened
+    defaultDate: null,
+    // The initial end date to view when first opened
+    defaultEndDate: null,
+    // Make the `defaultDate` the initial selected value
+    setDefaultDate: false,
+    // Make the `defaultEndDate` the initial selected value
+    setDefaultEndDate: false,
+    disableWeekends: false,
+    disableDayFn: null,
+    // First day of week (0: Sunday, 1: Monday etc)
+    firstDay: 0,
+    // The earliest date that can be selected
+    minDate: null,
+    // Thelatest date that can be selected
+    maxDate: null,
+    // Number of years either side, or array of upper/lower range
+    yearRange: 10,
+    // used internally (don't config outside)
+    minYear: 0,
+    maxYear: 9999,
+    minMonth: undefined,
+    maxMonth: undefined,
+    startRange: null,
+    endRange: null,
+    isRTL: false,
+    yearRangeReverse: false,
+    // Render the month after year in the calendar title
+    showMonthAfterYear: false,
+    // Render days of the calendar grid that fall in the next or previous month
+    showDaysInNextAndPreviousMonths: false,
+    // Specify if docked picker is in open state by default
+    openByDefault: false,
+    // Specify a DOM element to render the calendar in
+    container: null,
+    // Show clear button
+    showClearBtn: false,
+    // internationalization
+    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 array
+    events: [],
+    // callback function
+    onSelect: null,
+    onDraw: null,
+    onInputInteraction: null,
+};
+class Datepicker extends Component {
+    id;
+    multiple = false;
+    calendarEl;
+    /** CLEAR button instance. */
+    clearBtn;
+    /** DONE button instance */
+    doneBtn;
+    cancelBtn;
+    containerEl;
+    yearTextEl;
+    dateTextEl;
+    endDateEl;
+    dateEls;
+    /** The selected Date. */
+    date;
+    endDate;
+    dates;
+    formats;
+    calendars;
+    _y;
+    _m;
+    static _template;
+    constructor(el, options) {
+        super(el, options, Datepicker);
+        this.el['M_Datepicker'] = this;
+        this.options = {
+            ...Datepicker.defaults,
+            ...options
+        };
+        // make sure i18n defaults are not lost when only few i18n option properties are passed
+        if (!!options && options.hasOwnProperty('i18n') && typeof options.i18n === 'object') {
+            this.options.i18n = { ...Datepicker.defaults.i18n, ...options.i18n };
+        }
+        // Remove time component from minDate and maxDate options
+        if (this.options.minDate)
+            this.options.minDate.setHours(0, 0, 0, 0);
+        if (this.options.maxDate)
+            this.options.maxDate.setHours(0, 0, 0, 0);
+        this.id = Utils.guid();
+        this._setupVariables();
+        this._insertHTMLIntoDOM();
+        this._setupEventHandlers();
+        if (!this.options.defaultDate) {
+            this.options.defaultDate = new Date(Date.parse(this.el.value));
+        }
+        const defDate = this.options.defaultDate;
+        if (Datepicker._isDate(defDate)) {
+            if (this.options.setDefaultDate) {
+                this.setDate(defDate, true);
+                this.setInputValue(this.el, defDate);
+            }
+            else {
+                this.gotoDate(defDate);
+            }
+        }
+        else {
+            this.gotoDate(new Date());
+        }
+        if (this.options.isDateRange) {
+            this.multiple = true;
+            const defEndDate = this.options.defaultEndDate;
+            if (Datepicker._isDate(defEndDate)) {
+                if (this.options.setDefaultEndDate) {
+                    this.setDate(defEndDate, true, true);
+                    this.setInputValue(this.endDateEl, defEndDate);
+                }
+            }
+        }
+        if (this.options.isMultipleSelection) {
+            this.multiple = true;
+            this.dates = [];
+            this.dateEls = [];
+            this.dateEls.push(el);
+        }
+    }
+    static get defaults() {
+        return _defaults$e;
+    }
+    /**
+     * Initializes instances of Datepicker.
+     * @param els HTML elements.
+     * @param options Component options.
+     */
+    static init(els, options = {}) {
+        return super.init(els, options, Datepicker);
+    }
+    static _isDate(obj) {
+        return /Date/.test(Object.prototype.toString.call(obj)) && !isNaN(obj.getTime());
+    }
+    static _isWeekend(date) {
+        const day = date.getDay();
+        return day === 0 || day === 6;
+    }
+    /**
+     * @deprecated as this function has no effect without any return statement or global parameter setter.
+     */
+    static _setToStartOfDay(date) {
+        if (Datepicker._isDate(date))
+            date.setHours(0, 0, 0, 0);
+    }
+    static _getDaysInMonth(year, month) {
+        return [31, Datepicker._isLeapYear(year) ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][month];
+    }
+    static _isLeapYear(year) {
+        // solution by Matti Virkkunen: http://stackoverflow.com/a/4881951
+        return (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;
+    }
+    static _compareDates(a, b) {
+        // weak date comparison (use setToStartOfDay(date) to ensure correct result)
+        return a.getTime() === b.getTime();
+    }
+    static _compareWithinRange(day, date, dateEnd) {
+        return day.getTime() > date.getTime() && day.getTime() < dateEnd.getTime();
+    }
+    static _comparePastDate(a, b) {
+        return a.getTime() < b.getTime();
+    }
+    static getInstance(el) {
+        return el['M_Datepicker'];
+    }
+    destroy() {
+        this._removeEventHandlers();
+        this.containerEl.remove();
+        this.destroySelects();
+        this.el['M_Datepicker'] = undefined;
+    }
+    destroySelects() {
+        const oldYearSelect = this.calendarEl.querySelector('.orig-select-year');
+        if (oldYearSelect) {
+            FormSelect.getInstance(oldYearSelect).destroy();
+        }
+        const oldMonthSelect = this.calendarEl.querySelector('.orig-select-month');
+        if (oldMonthSelect) {
+            FormSelect.getInstance(oldMonthSelect).destroy();
+        }
+    }
+    _insertHTMLIntoDOM() {
+        // HTML5 input date field support
+        if (this.el.type == 'date') {
+            this.el.classList.add('datepicker-date-input');
+        }
+        if (!this.el.parentElement.querySelector('.datepicker-format') === null) {
+            this._renderDateInputFormat(this.el);
+        }
+        if (this.options.isDateRange) {
+            this.containerEl.classList.add('daterange');
+            if (!this.options.dateRangeEndEl) {
+                this.endDateEl = this.createDateInput();
+                this.endDateEl.classList.add('datepicker-end-date');
+            }
+            else if (document.querySelector(this.options.dateRangeEndEl) === undefined) {
+                console.warn('Specified date range end input element in dateRangeEndEl not found');
+            }
+            else {
+                this.endDateEl = document.querySelector(this.options.dateRangeEndEl);
+                if (!this.endDateEl.parentElement.querySelector('.datepicker-format') === null) {
+                    this._renderDateInputFormat(this.endDateEl);
+                }
+            }
+        }
+        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;
+        if (this.options.container) {
+            const optEl = this.options.container;
+            this.options.container =
+                optEl instanceof HTMLElement ? optEl : document.querySelector(optEl);
+            this.options.container.append(this.containerEl);
+        }
+        else {
+            //this.containerEl.before(this.el);
+            const appendTo = !this.endDateEl ? this.el : this.endDateEl;
+            if (!this.options.openByDefault)
+                this.containerEl.setAttribute('style', 'display: none; visibility: hidden;');
+            appendTo.parentElement.after(this.containerEl);
+        }
+    }
+    /**
+     * Renders the date input format
+     */
+    _renderDateInputFormat(el) {
+        el.parentElement.querySelector('.datepicker-format').innerHTML = this.options.format.toString();
+    }
+    /**
+     * Gets a string representation of the given date.
+     */
+    toString(date = this.date, format = null) {
+        format = format || this.options.format;
+        if (typeof format === 'function')
+            return format(date);
+        if (!Datepicker._isDate(date))
+            return '';
+        // String Format
+        return this.formatDate(date, format);
+    }
+    /**
+     * Returns the formatted date.
+     */
+    formatDate(date, format) {
+        const formatArray = format.split(/(d{1,4}|m{1,4}|y{4}|yy|!.)/g);
+        return formatArray
+            .map((label) => (this.formats[label] ? this.formats[label](date) : label))
+            .join('');
+    }
+    /**
+     * Sets date from input field.
+     */
+    setDateFromInput(el) {
+        const date = new Date(Date.parse(el.value));
+        this.setDate(date, false, el == this.endDateEl, true);
+    }
+    /**
+     * Set a date on the datepicker.
+     * @param date Date to set on the datepicker.
+     * @param preventOnSelect Undocumented as of 5 March 2018.
+     * @param isEndDate
+     * @param fromUserInput
+     */
+    setDate(date = null, preventOnSelect = false, isEndDate = false, fromUserInput = false) {
+        const selectedDate = this.validateDate(date);
+        if (!selectedDate) {
+            return;
+        }
+        if (!this.options.isMultipleSelection)
+            this.setSingleDate(selectedDate, isEndDate);
+        else if (!fromUserInput)
+            this.setMultiDate(selectedDate);
+        Datepicker._setToStartOfDay(selectedDate);
+        this.gotoDate(selectedDate);
+        if (!preventOnSelect && typeof this.options.onSelect === 'function') {
+            this.options.onSelect.call(this, selectedDate);
+        }
+    }
+    validateDate(date) {
+        if (!date) {
+            this._renderDateDisplay(date);
+            return this.draw();
+        }
+        if (typeof date === 'string') {
+            date = new Date(Date.parse(date));
+        }
+        if (!Datepicker._isDate(date)) {
+            return;
+        }
+        const min = this.options.minDate, max = this.options.maxDate;
+        if (Datepicker._isDate(min) && date < min) {
+            date = min;
+        }
+        else if (Datepicker._isDate(max) && date > max) {
+            date = max;
+        }
+        return new Date(date.getTime());
+    }
+    /**
+     * Set a single date on the datepicker.
+     * @param date Date to set on the datepicker.
+     * @param isEndDate
+     */
+    setSingleDate(date, isEndDate) {
+        if (!isEndDate) {
+            this.date = date;
+        }
+        else if (isEndDate) {
+            this.endDate = date;
+        }
+    }
+    /**
+     * Set a multi date on the datepicker.
+     * @param date Date to set on the datepicker.
+     */
+    setMultiDate(date) {
+        const selectedDate = this.dates?.find((item) => {
+            return item.getTime() === date.getTime() ? item : false;
+        });
+        if (!selectedDate) {
+            this.dates.push(date);
+        }
+        else {
+            this.dates.splice(this.dates.indexOf(selectedDate), 1);
+        }
+        this.dates.sort((a, b) => (a.getTime() < b.getTime() ? -1 : 0));
+    }
+    /**
+     * Sets the data-date attribute on the date input field
+     */
+    setDataDate(el, date) {
+        el.setAttribute('data-date', this.toString(date));
+    }
+    /**
+     * Sets dates on the input values.
+     */
+    setInputValues() {
+        if (!this.options?.isMultipleSelection) {
+            this.setInputValue(this.el, this.date);
+            if (this.options?.isDateRange) {
+                this.setInputValue(this.endDateEl, this.endDate);
+            }
+            return;
+        }
+        this.setMultipleSelectionInputValues();
+    }
+    setMultipleSelectionInputValues() {
+        const dateElsArr = Array.from(this.dateEls).filter((el, index) => {
+            if (index > this.dates.length - 1)
+                return el;
+        });
+        dateElsArr.forEach((el) => {
+            el.remove();
+        });
+        this.dates.forEach((date, index) => {
+            if (Array.from(this.dateEls)[index]) {
+                this.setInputValue(this.dateEls[index], date);
+                return;
+            }
+            const dateEl = this.createDateInput();
+            this.setInputValue(dateEl, date);
+            this.dateEls.push(dateEl);
+        });
+    }
+    /**
+     * Sets given date as the input value on the given element.
+     */
+    setInputValue(el, date) {
+        if (el.type == 'date') {
+            this.setDataDate(el, date);
+            el.value = this.formatDate(date, 'yyyy-mm-dd');
+        }
+        else {
+            el.value = this.toString(date);
+        }
+        this.el.dispatchEvent(new CustomEvent('change', {
+            bubbles: true,
+            cancelable: true,
+            composed: true,
+            detail: { firedBy: this }
+        }));
+    }
+    /**
+     * Renders the date in the modal head section.
+     */
+    _renderDateDisplay(date, endDate = null) {
+        const displayDate = Datepicker._isDate(date) ? date : new Date();
+        // this.yearTextEl.innerHTML = displayDate.getFullYear().toString();
+        // @todo should we include an option for date formatting by component options?
+        if (!this.options.isDateRange) {
+            this.dateTextEl.innerHTML = this.formatDate(displayDate, 'ddd, mmm d');
+        }
+        else {
+            const displayEndDate = Datepicker._isDate(endDate) ? endDate : new Date();
+            this.dateTextEl.innerHTML = `${this.formatDate(displayDate, 'mmm d')} - ${this.formatDate(displayEndDate, 'mmm d')}`;
+        }
+    }
+    /**
+     * Change date view to a specific date on the datepicker.
+     * @param date Date to show on the datepicker.
+     */
+    gotoDate(date) {
+        let newCalendar = true;
+        if (!Datepicker._isDate(date)) {
+            return;
+        }
+        if (this.calendars) {
+            const firstVisibleDate = new Date(this.calendars[0].year, this.calendars[0].month, 1), lastVisibleDate = new Date(this.calendars[this.calendars.length - 1].year, this.calendars[this.calendars.length - 1].month, 1), visibleDate = date.getTime();
+            // get the end of the month
+            lastVisibleDate.setMonth(lastVisibleDate.getMonth() + 1);
+            lastVisibleDate.setDate(lastVisibleDate.getDate() - 1);
+            newCalendar =
+                visibleDate < firstVisibleDate.getTime() || lastVisibleDate.getTime() < visibleDate;
+        }
+        if (newCalendar) {
+            this.calendars = [
+                {
+                    month: date.getMonth(),
+                    year: date.getFullYear()
+                }
+            ];
+        }
+        this.adjustCalendars();
+    }
+    adjustCalendars() {
+        this.calendars[0] = this.adjustCalendar(this.calendars[0]);
+        this.draw();
+    }
+    adjustCalendar(calendar) {
+        if (calendar.month < 0) {
+            calendar.year -= Math.ceil(Math.abs(calendar.month) / 12);
+            calendar.month += 12;
+        }
+        if (calendar.month > 11) {
+            calendar.year += Math.floor(Math.abs(calendar.month) / 12);
+            calendar.month -= 12;
+        }
+        return calendar;
+    }
+    nextMonth() {
+        this.calendars[0].month++;
+        this.adjustCalendars();
+    }
+    prevMonth() {
+        this.calendars[0].month--;
+        this.adjustCalendars();
+    }
+    render(year, month, randId) {
+        const now = new Date(), days = Datepicker._getDaysInMonth(year, month), data = [];
+        let before = new Date(year, month, 1).getDay(), row = [];
+        Datepicker._setToStartOfDay(now);
+        if (this.options.firstDay > 0) {
+            before -= this.options.firstDay;
+            if (before < 0) {
+                before += 7;
+            }
+        }
+        const previousMonth = month === 0 ? 11 : month - 1, nextMonth = month === 11 ? 0 : month + 1, yearOfPreviousMonth = month === 0 ? year - 1 : year, yearOfNextMonth = month === 11 ? year + 1 : year, daysInPreviousMonth = Datepicker._getDaysInMonth(yearOfPreviousMonth, previousMonth);
+        let cells = days + before, after = cells;
+        while (after > 7) {
+            after -= 7;
+        }
+        cells += 7 - after;
+        let isWeekSelected = false;
+        for (let i = 0, r = 0; i < cells; i++) {
+            const day = new Date(year, month, 1 + (i - before)), isToday = Datepicker._compareDates(day, now), hasEvent = this.options.events.indexOf(day.toDateString()) !== -1, isEmpty = i < before || i >= days + before, isStartRange = this.options.startRange && Datepicker._compareDates(this.options.startRange, day), isEndRange = this.options.endRange && Datepicker._compareDates(this.options.endRange, day), isInRange = this.options.startRange &&
+                this.options.endRange &&
+                this.options.startRange < day &&
+                day < this.options.endRange, isDisabled = (this.options.minDate && day < this.options.minDate) ||
+                (this.options.maxDate && day > this.options.maxDate) ||
+                (this.options.disableWeekends && Datepicker._isWeekend(day)) ||
+                (this.options.disableDayFn && this.options.disableDayFn(day)), isDateRangeStart = this.options.isDateRange && this.date && this.endDate && Datepicker._compareDates(this.date, day), isDateRangeEnd = this.options.isDateRange && this.endDate && Datepicker._compareDates(this.endDate, day), isDateRange = this.options.isDateRange &&
+                Datepicker._isDate(this.endDate) &&
+                Datepicker._compareWithinRange(day, this.date, this.endDate);
+            let dayNumber = 1 + (i - before), monthNumber = month, yearNumber = year;
+            let isSelected = false;
+            if (Datepicker._isDate(this.date)) {
+                isSelected = Datepicker._compareDates(day, this.date);
+            }
+            if (!isSelected && Datepicker._isDate(this.endDate)) {
+                isSelected = Datepicker._compareDates(day, this.endDate);
+            }
+            if (this.options.isMultipleSelection &&
+                this.dates?.some((item) => item.getTime() === day.getTime())) {
+                isSelected = true;
+            }
+            if (isEmpty) {
+                if (i < before) {
+                    dayNumber = daysInPreviousMonth + dayNumber;
+                    monthNumber = previousMonth;
+                    yearNumber = yearOfPreviousMonth;
+                }
+                else {
+                    dayNumber = dayNumber - days;
+                    monthNumber = nextMonth;
+                    yearNumber = yearOfNextMonth;
+                }
+            }
+            const dayConfig = {
+                day: dayNumber,
+                month: monthNumber,
+                year: yearNumber,
+                hasEvent: hasEvent,
+                isSelected: isSelected,
+                isToday: isToday,
+                isDisabled: isDisabled,
+                isEmpty: isEmpty,
+                isStartRange: isStartRange,
+                isEndRange: isEndRange,
+                isInRange: isInRange,
+                showDaysInNextAndPreviousMonths: this.options.showDaysInNextAndPreviousMonths,
+                isDateRangeStart: isDateRangeStart,
+                isDateRangeEnd: isDateRangeEnd,
+                isDateRange: isDateRange
+            };
+            row.push(this.renderDay(dayConfig));
+            if (++r === 7) {
+                data.push(this.renderRow(row, this.options.isRTL, isWeekSelected));
+                row = [];
+                r = 0;
+                isWeekSelected = false;
+            }
+        }
+        return this.renderTable(this.options, data, randId);
+    }
+    renderDay(opts) {
+        const classMap = {
+            isDisabled: 'is-disabled',
+            isToday: 'is-today',
+            isSelected: 'is-selected',
+            hasEvent: 'has-event',
+            isInRange: 'is-inrange',
+            isStartRange: 'is-startrange',
+            isEndRange: 'is-endrange',
+            isDateRangeStart: 'is-daterange-start',
+            isDateRangeEnd: 'is-daterange-end',
+            isDateRange: 'is-daterange'
+        }, ariaSelected = !(['isSelected', 'isDateRange'].filter((prop) => !!(opts.hasOwnProperty(prop) && opts[prop] === true)).length === 0), arr = ['datepicker-day'];
+        if (opts.isEmpty) {
+            if (opts.showDaysInNextAndPreviousMonths) {
+                arr.push('is-outside-current-month');
+                arr.push('is-selection-disabled');
+            }
+            else {
+                return '<td class="is-empty"></td>';
+            }
+        }
+        for (const [property, className] of Object.entries(classMap)) {
+            if (opts.hasOwnProperty(property) && opts[property]) {
+                arr.push(className);
+            }
+        }
+        return (`<td data-day="${opts.day}" class="${arr.join(' ')}" aria-selected="${ariaSelected}">` +
+            `<button class="datepicker-day-button" type="button" data-year="${opts.year}" data-month="${opts.month}" data-day="${opts.day}">${opts.day}</button>` +
+            '</td>');
+    }
+    renderRow(days, isRTL, isRowSelected) {
+        return ('<tr class="datepicker-row' +
+            (isRowSelected ? ' is-selected' : '') +
+            '">' +
+            (isRTL ? days.reverse() : days).join('') +
+            '</tr>');
+    }
+    renderTable(opts, data, randId) {
+        return ('<div class="datepicker-table-wrapper"><table cellpadding="0" cellspacing="0" class="datepicker-table" role="grid" aria-labelledby="' +
+            randId +
+            '">' +
+            this.renderHead(opts) +
+            this.renderBody(data) +
+            '</table></div>');
+    }
+    renderHead(opts) {
+        const arr = [];
+        let i;
+        for (i = 0; i < 7; i++) {
+            arr.push(`<th scope="col"><abbr title="${this.renderDayName(opts, i)}">${this.renderDayName(opts, i, true)}</abbr></th>`);
+        }
+        return '<thead><tr>' + (opts.isRTL ? arr.reverse() : arr).join('') + '</tr></thead>';
+    }
+    renderBody(rows) {
+        return '<tbody>' + rows.join('') + '</tbody>';
+    }
+    renderTitle(instance, c, year, month, refYear, randId) {
+        const opts = this.options, isMinYear = year === opts.minYear, isMaxYear = year === opts.maxYear;
+        let i, j, arr = [], html = '<div id="' +
+            randId +
+            '" class="datepicker-controls" role="heading" aria-live="assertive">', prev = true, next = true;
+        for (i = 0; i < 12; i++) {
+            arr.push('<option value="' +
+                (year === refYear ? i - c : 12 + i - c) +
+                '"' +
+                (i === month ? ' selected="selected"' : '') +
+                ((isMinYear && i < opts.minMonth) || (isMaxYear && i > opts.maxMonth)
+                    ? 'disabled="disabled"'
+                    : '') +
+                '>' +
+                opts.i18n.months[i] +
+                '</option>');
+        }
+        const monthHtml = '<select class="datepicker-select orig-select-month" tabindex="-1">' +
+            arr.join('') +
+            '</select>';
+        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(`<option value="${i}" ${i === year ? 'selected="selected"' : ''}>${i}</option>`);
+            }
+        }
+        if (opts.yearRangeReverse)
+            arr.reverse();
+        const yearHtml = `<select class="datepicker-select orig-select-year" tabindex="-1">${arr.join('')}</select>`;
+        const leftArrow = '<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"/><path d="M0-.5h24v24H0z" fill="none"/></svg>';
+        html += `<button class="month-prev${prev ? '' : ' is-disabled'
+        // @todo remove button class and add scss mixin, current implementation temporary for focus states, @see https://github.com/materializecss/materialize/issues/566
+        } btn" type="button">${leftArrow}</button>`;
+        html += '<div class="selects-container">';
+        if (opts.showMonthAfterYear) {
+            html += yearHtml + monthHtml;
+        }
+        else {
+            html += monthHtml + yearHtml;
+        }
+        html += '</div>';
+        if (isMinYear && (month === 0 || opts.minMonth >= month)) {
+            prev = false;
+        }
+        if (isMaxYear && (month === 11 || opts.maxMonth <= month)) {
+            next = false;
+        }
+        const rightArrow = '<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"/><path d="M0-.25h24v24H0z" fill="none"/></svg>';
+        html += `<button class="month-next${next ? '' : ' is-disabled'
+        // @todo remove button class and add scss mixin, current implementation temporary for focus states, @see https://github.com/materializecss/materialize/issues/566
+        } btn" type="button">${rightArrow}</button>`;
+        return (html += '</div>');
+    }
+    // refresh HTML
+    draw() {
+        const opts = this.options, minYear = opts.minYear, maxYear = opts.maxYear, minMonth = opts.minMonth, maxMonth = opts.maxMonth;
+        let html = '';
+        if (this._y <= minYear) {
+            this._y = minYear;
+            if (!isNaN(minMonth) && this._m < minMonth) {
+                this._m = minMonth;
+            }
+        }
+        if (this._y >= maxYear) {
+            this._y = maxYear;
+            if (!isNaN(maxMonth) && this._m > maxMonth) {
+                this._m = maxMonth;
+            }
+        }
+        const randId = 'datepicker-title-' +
+            Math.random()
+                .toString(36)
+                .replace(/[^a-z]+/g, '')
+                .substr(0, 2);
+        for (let c = 0; c < 1; c++) {
+            if (!this.options.isDateRange) {
+                this._renderDateDisplay(this.date);
+            }
+            else {
+                this._renderDateDisplay(this.date, this.endDate);
+            }
+            html +=
+                this.renderTitle(this, c, this.calendars[c].year, this.calendars[c].month, this.calendars[0].year, randId) + this.render(this.calendars[c].year, this.calendars[c].month, randId);
+        }
+        this.destroySelects();
+        this.calendarEl.innerHTML = html;
+        // Init Materialize Select
+        const yearSelect = this.calendarEl.querySelector('.orig-select-year');
+        const monthSelect = this.calendarEl.querySelector('.orig-select-month');
+        // @todo fix accessibility @see https://github.com/materializecss/materialize/issues/522
+        FormSelect.init(yearSelect, {
+            classes: 'select-year',
+            dropdownOptions: { container: document.body, constrainWidth: false }
+        });
+        FormSelect.init(monthSelect, {
+            classes: 'select-month',
+            dropdownOptions: { container: document.body, constrainWidth: false }
+        });
+        // Add change handlers for select
+        yearSelect.addEventListener('change', this._handleYearChange);
+        monthSelect.addEventListener('change', this._handleMonthChange);
+        if (typeof this.options.onDraw === 'function') {
+            this.options.onDraw.call(this);
+        }
+    }
+    _setupEventHandlers() {
+        this.el.addEventListener('click', this._handleInputClick);
+        this.el.addEventListener('keydown', this._handleInputKeydown);
+        this.el.addEventListener('change', this._handleInputChange);
+        this.calendarEl.addEventListener('click', this._handleCalendarClick);
+        this.doneBtn.addEventListener('click', () => this.setInputValues());
+        this.cancelBtn.addEventListener('click', this.close);
+        if (this.options.showClearBtn) {
+            this.clearBtn.addEventListener('click', this._handleClearClick);
+        }
+    }
+    _setupVariables() {
+        const template = document.createElement('template');
+        template.innerHTML = Datepicker._template.trim();
+        this.containerEl = template.content.firstChild;
+        this.calendarEl = this.containerEl.querySelector('.datepicker-calendar');
+        this.yearTextEl = this.containerEl.querySelector('.year-text');
+        this.dateTextEl = this.containerEl.querySelector('.date-text');
+        if (this.options.showClearBtn) {
+            this.clearBtn = this.containerEl.querySelector('.datepicker-clear');
+        }
+        // TODO: This should not be part of the datepicker
+        this.doneBtn = this.containerEl.querySelector('.datepicker-done');
+        this.cancelBtn = this.containerEl.querySelector('.datepicker-cancel');
+        this.formats = {
+            d: (date) => {
+                return date.getDate();
+            },
+            dd: (date) => {
+                const d = date.getDate();
+                return (d < 10 ? '0' : '') + d;
+            },
+            ddd: (date) => {
+                return this.options.i18n.weekdaysShort[date.getDay()];
+            },
+            dddd: (date) => {
+                return this.options.i18n.weekdays[date.getDay()];
+            },
+            m: (date) => {
+                return date.getMonth() + 1;
+            },
+            mm: (date) => {
+                const m = date.getMonth() + 1;
+                return (m < 10 ? '0' : '') + m;
+            },
+            mmm: (date) => {
+                return this.options.i18n.monthsShort[date.getMonth()];
+            },
+            mmmm: (date) => {
+                return this.options.i18n.months[date.getMonth()];
+            },
+            yy: (date) => {
+                return ('' + date.getFullYear()).slice(2);
+            },
+            yyyy: (date) => {
+                return date.getFullYear();
+            }
+        };
+    }
+    _removeEventHandlers() {
+        this.el.removeEventListener('click', this._handleInputClick);
+        this.el.removeEventListener('keydown', this._handleInputKeydown);
+        this.el.removeEventListener('change', this._handleInputChange);
+        this.calendarEl.removeEventListener('click', this._handleCalendarClick);
+        if (this.options.isDateRange) {
+            this.endDateEl.removeEventListener('click', this._handleInputClick);
+            this.endDateEl.removeEventListener('keypress', this._handleInputKeydown);
+            this.endDateEl.removeEventListener('change', this._handleInputChange);
+        }
+    }
+    _handleInputClick = (e) => {
+        // Prevents default browser datepicker modal rendering
+        if (e.type == 'date') {
+            e.preventDefault();
+        }
+        this.setDateFromInput(e.target);
+        this.draw();
+        this.gotoDate(e.target === this.el ? this.date : this.endDate);
+        if (this.options.onInputInteraction)
+            this.options.onInputInteraction.call(this);
+    };
+    _handleInputKeydown = (e) => {
+        if (Utils.keys.ENTER.includes(e.key)) {
+            e.preventDefault();
+            this.setDateFromInput(e.target);
+            this.draw();
+            if (this.options.onInputInteraction)
+                this.options.onInputInteraction.call(this);
+        }
+    };
+    _handleCalendarClick = (e) => {
+        const target = e.target;
+        if (!target.classList.contains('is-disabled')) {
+            if (target.classList.contains('datepicker-day-button') &&
+                !target.classList.contains('is-empty') &&
+                !target.parentElement.classList.contains('is-disabled')) {
+                const selectedDate = new Date(e.target.getAttribute('data-year'), e.target.getAttribute('data-month'), e.target.getAttribute('data-day'));
+                if (!this.multiple || (this.multiple && this.options.isMultipleSelection)) {
+                    this.setDate(selectedDate);
+                }
+                if (this.options.isDateRange) {
+                    this._handleDateRangeCalendarClick(selectedDate);
+                }
+                this._finishSelection();
+            }
+            else if (target.closest('.month-prev')) {
+                this.prevMonth();
+            }
+            else if (target.closest('.month-next')) {
+                this.nextMonth();
+            }
+        }
+    };
+    _handleDateRangeCalendarClick = (date) => {
+        if (this.endDate == null || !Datepicker._compareDates(date, this.endDate)) {
+            if (Datepicker._isDate(this.date) && Datepicker._comparePastDate(date, this.date)) {
+                return;
+            }
+            this.setDate(date, false, Datepicker._isDate(this.date));
+            return;
+        }
+        this._clearDates();
+        this.draw();
+    };
+    _handleClearClick = () => {
+        this._clearDates();
+        this.setInputValues();
+    };
+    _clearDates = () => {
+        this.date = null;
+        this.endDate = null;
+    };
+    _handleMonthChange = (e) => {
+        this.gotoMonth(e.target.value);
+    };
+    _handleYearChange = (e) => {
+        this.gotoYear(e.target.value);
+    };
+    // change view to a specific month (zero-index, e.g. 0: January)
+    gotoMonth(month) {
+        if (!isNaN(month)) {
+            this.calendars[0].month = parseInt(month, 10);
+            this.adjustCalendars();
+        }
+    }
+    // change view to a specific full year (e.g. "2012")
+    gotoYear(year) {
+        if (!isNaN(year)) {
+            this.calendars[0].year = parseInt(year, 10);
+            this.adjustCalendars();
+        }
+    }
+    _handleInputChange = (e) => {
+        let date;
+        const el = e.target;
+        // Prevent change event from being fired when triggered by the plugin
+        if (e['detail']?.firedBy === this)
+            return;
+        // Prevent change event from being fired if an end date is set without a start date
+        if (el == this.endDateEl && !this.date)
+            return;
+        if (this.options.parse) {
+            date = this.options.parse(e.target.value, typeof this.options.format === 'function'
+                ? this.options.format(new Date(this.el.value))
+                : this.options.format);
+        }
+        else {
+            date = new Date(Date.parse(e.target.value));
+        }
+        if (Datepicker._isDate(date)) {
+            this.setDate(date, false, el == this.endDateEl, true);
+            if (e.type == 'date') {
+                this.setDataDate(e, date);
+                this.setInputValues();
+            }
+        }
+    };
+    renderDayName(opts, day, abbr = false) {
+        day += opts.firstDay;
+        while (day >= 7) {
+            day -= 7;
+        }
+        return abbr ? opts.i18n.weekdaysAbbrev[day] : opts.i18n.weekdays[day];
+    }
+    createDateInput() {
+        const dateInput = this.el.cloneNode(true);
+        dateInput.addEventListener('click', this._handleInputClick);
+        dateInput.addEventListener('keypress', this._handleInputKeydown);
+        dateInput.addEventListener('change', this._handleInputChange);
+        this.el.parentElement.appendChild(dateInput);
+        return dateInput;
+    }
+    // Set input value to the selected date and close Datepicker
+    _finishSelection = () => {
+        this.setInputValues();
+        this.close();
+    };
+    // deprecated
+    open() {
+        console.warn('Datepicker.open() is deprecated. Remove this method and wrap in modal yourself.');
+        return this;
+    }
+    close() {
+        console.warn('Datepicker.close() is deprecated. Remove this method and wrap in modal yourself.');
+        return this;
+    }
+    static {
+        Datepicker._template = `
+        <div class="datepicker-container">
+          <div class="datepicker-date-display">
+            <span class="year-text"></span>
+            <span class="date-text"></span>
+          </div>
+          <div class="datepicker-calendar-container">
+            <div class="datepicker-calendar"></div>
+            <div class="datepicker-footer">
+              <button class="btn-flat datepicker-clear waves-effect" style="visibility: hidden;" type="button"></button>
+              <div class="confirmation-btns">
+                <button class="btn-flat datepicker-cancel waves-effect" type="button"></button>
+                <button class="btn-flat datepicker-done waves-effect" type="button"></button>
+              </div>
+            </div>
+          </div>
+        </div>`;
+    }
+}
+
+class Forms {
+    /**
+     * Checks if the label has validation and apply
+     * the correct class and styles
+     * @param textfield
+     */
+    static validateField(textfield) {
+        if (!textfield) {
+            console.error('No text field element found');
+            return;
+        }
+        const hasLength = textfield.getAttribute('data-length') !== null;
+        const lenAttr = parseInt(textfield.getAttribute('data-length'));
+        const len = textfield.value.length;
+        if (len === 0 &&
+            textfield.validity.badInput === false &&
+            !textfield.required &&
+            textfield.classList.contains('validate')) {
+            textfield.classList.remove('invalid');
+        }
+        else if (textfield.classList.contains('validate')) {
+            // Check for character counter attributes
+            if ((textfield.validity.valid && hasLength && len <= lenAttr) ||
+                (textfield.validity.valid && !hasLength)) {
+                textfield.classList.remove('invalid');
+            }
+            else {
+                textfield.classList.add('invalid');
+            }
+        }
+    }
+    /**
+     * Resizes the given TextArea after updating the
+     *  value content dynamically.
+     * @param e EventTarget
+     */
+    static textareaAutoResize(e) {
+        const textarea = e;
+        // if (!textarea) {
+        //   console.error('No textarea element found');
+        //   return;
+        // }
+        // Textarea Auto Resize
+        let hiddenDiv = document.querySelector('.hiddendiv');
+        if (!hiddenDiv) {
+            hiddenDiv = document.createElement('div');
+            hiddenDiv.classList.add('hiddendiv', 'common');
+            document.body.append(hiddenDiv);
+        }
+        const style = getComputedStyle(textarea);
+        // Set font properties of hiddenDiv
+        const fontFamily = style.fontFamily; //textarea.css('font-family');
+        const fontSize = style.fontSize; //textarea.css('font-size');
+        const lineHeight = style.lineHeight; //textarea.css('line-height');
+        // Firefox can't handle padding shorthand.
+        const paddingTop = style.paddingTop; //getComputedStyle(textarea).css('padding-top');
+        const paddingRight = style.paddingRight; //textarea.css('padding-right');
+        const paddingBottom = style.paddingBottom; //textarea.css('padding-bottom');
+        const paddingLeft = style.paddingLeft; //textarea.css('padding-left');
+        if (fontSize)
+            hiddenDiv.style.fontSize = fontSize; //('font-size', fontSize);
+        if (fontFamily)
+            hiddenDiv.style.fontFamily = fontFamily; //css('font-family', fontFamily);
+        if (lineHeight)
+            hiddenDiv.style.lineHeight = lineHeight; //css('line-height', lineHeight);
+        if (paddingTop)
+            hiddenDiv.style.paddingTop = paddingTop; //ss('padding-top', paddingTop);
+        if (paddingRight)
+            hiddenDiv.style.paddingRight = paddingRight; //css('padding-right', paddingRight);
+        if (paddingBottom)
+            hiddenDiv.style.paddingBottom = paddingBottom; //css('padding-bottom', paddingBottom);
+        if (paddingLeft)
+            hiddenDiv.style.paddingLeft = paddingLeft; //css('padding-left', paddingLeft);
+        // Set original-height, if none
+        if (!textarea.hasAttribute('original-height'))
+            textarea.setAttribute('original-height', textarea.getBoundingClientRect().height.toString());
+        if (textarea.getAttribute('wrap') === 'off') {
+            hiddenDiv.style.overflowWrap = 'normal'; // ('overflow-wrap', 'normal')
+            hiddenDiv.style.whiteSpace = 'pre'; //.css('white-space', 'pre');
+        }
+        hiddenDiv.innerText = textarea.value + '\n';
+        hiddenDiv.innerHTML = hiddenDiv.innerHTML.replace(/\n/g, '<br>');
+        // When textarea is hidden, width goes crazy.
+        // Approximate with half of window size
+        if (textarea.offsetWidth > 0 && textarea.offsetHeight > 0) {
+            hiddenDiv.style.width = textarea.getBoundingClientRect().width + 'px'; // ('width', textarea.width() + 'px');
+        }
+        else {
+            hiddenDiv.style.width = window.innerWidth / 2 + 'px'; //css('width', window.innerWidth / 2 + 'px');
+        }
+        // Resize if the new height is greater than the
+        // original height of the textarea
+        const originalHeight = parseInt(textarea.getAttribute('original-height'));
+        const prevLength = parseInt(textarea.getAttribute('previous-length'));
+        if (isNaN(originalHeight))
+            return;
+        if (originalHeight <= hiddenDiv.clientHeight) {
+            textarea.style.height = hiddenDiv.clientHeight + 'px'; //css('height', hiddenDiv.innerHeight() + 'px');
+        }
+        else if (textarea.value.length < prevLength) {
+            // In case the new height is less than original height, it
+            // means the textarea has less text than before
+            // So we set the height to the original one
+            textarea.style.height = originalHeight + 'px';
+        }
+        textarea.setAttribute('previous-length', textarea.value.length.toString());
+    }
+    static Init() {
+        if (typeof document !== 'undefined')
+            document?.addEventListener('DOMContentLoaded', () => {
+                document.addEventListener('change', (e) => {
+                    const target = e.target;
+                    if (target instanceof HTMLInputElement) {
+                        if (target.value.length !== 0 || target.getAttribute('placeholder') !== null) {
+                            for (const child of target.parentNode.children) {
+                                if (child.tagName == 'label') {
+                                    child.classList.add('active');
+                                }
+                            }
+                        }
+                        Forms.validateField(target);
+                    }
+                });
+                document.addEventListener('keyup', (e) => {
+                    const target = e.target;
+                    // Radio and Checkbox focus class
+                    if (target instanceof HTMLInputElement && ['radio', 'checkbox'].includes(target.type)) {
+                        // TAB, check if tabbing to radio or checkbox.
+                        if (Utils.keys.TAB.includes(e.key)) {
+                            target.classList.add('tabbed');
+                            target.addEventListener('blur', () => target.classList.remove('tabbed'), {
+                                once: true
+                            });
+                        }
+                    }
+                });
+                document
+                    .querySelectorAll('.materialize-textarea')
+                    .forEach((textArea) => {
+                    Forms.InitTextarea(textArea);
+                });
+                // File Input Path
+                document
+                    .querySelectorAll('.file-field input[type="file"]')
+                    .forEach((fileInput) => {
+                    Forms.InitFileInputPath(fileInput);
+                });
+            });
+    }
+    static InitTextarea(textarea) {
+        // Save Data in Element
+        textarea.setAttribute('original-height', textarea.getBoundingClientRect().height.toString());
+        textarea.setAttribute('previous-length', textarea.value.length.toString());
+        Forms.textareaAutoResize(textarea);
+        textarea.addEventListener('keyup', (e) => Forms.textareaAutoResize(e.target));
+        textarea.addEventListener('keydown', (e) => Forms.textareaAutoResize(e.target));
+    }
+    static InitFileInputPath(fileInput) {
+        fileInput.addEventListener('change', () => {
+            const fileField = fileInput.closest('.file-field');
+            const pathInput = fileField.querySelector('input.file-path');
+            const files = fileInput.files;
+            const filenames = [];
+            for (let i = 0; i < files.length; i++) {
+                filenames.push(files[i].name);
+            }
+            pathInput.value = filenames.join(', ');
+            pathInput.dispatchEvent(new Event('change', { bubbles: true, cancelable: true, composed: true }));
+        });
+    }
+}
+
+const _defaults$d = {
+    inDuration: 275,
+    outDuration: 200,
+    onOpenStart: null,
+    onOpenEnd: null,
+    onCloseStart: null,
+    onCloseEnd: null
+};
+class Materialbox extends Component {
+    /** If the materialbox overlay is showing. */
+    overlayActive;
+    /** If the materialbox is no longer being animated. */
+    doneAnimating;
+    /** Caption, if specified. */
+    caption;
+    /** Original width of image. */
+    originalWidth;
+    /** Original height of image. */
+    originalHeight;
+    originInlineStyles;
+    placeholder;
+    _changedAncestorList;
+    newHeight;
+    newWidth;
+    windowWidth;
+    windowHeight;
+    attrWidth;
+    attrHeight;
+    _overlay;
+    _photoCaption;
+    constructor(el, options) {
+        super(el, options, Materialbox);
+        this.el['M_Materialbox'] = this;
+        this.options = {
+            ...Materialbox.defaults,
+            ...options
+        };
+        this.overlayActive = false;
+        this.doneAnimating = true;
+        this.placeholder = document.createElement('div');
+        this.placeholder.classList.add('material-placeholder');
+        this.originalWidth = 0;
+        this.originalHeight = 0;
+        this.originInlineStyles = this.el.getAttribute('style');
+        this.caption = this.el.getAttribute('data-caption') || '';
+        this.el.tabIndex = 0;
+        // Wrap
+        this.el.before(this.placeholder);
+        this.placeholder.append(this.el);
+        this._setupEventHandlers();
+    }
+    static get defaults() {
+        return _defaults$d;
+    }
+    /**
+     * Initializes instances of MaterialBox.
+     * @param els HTML elements.
+     * @param options Component options.
+     */
+    static init(els, options = {}) {
+        return super.init(els, options, Materialbox);
+    }
+    static getInstance(el) {
+        return el['M_Materialbox'];
+    }
+    destroy() {
+        this._removeEventHandlers();
+        this.el['M_Materialbox'] = undefined;
+        // Unwrap image
+        //this.placeholder.after(this.el).remove();
+        this.placeholder.remove();
+        this.el.removeAttribute('style');
+    }
+    _setupEventHandlers() {
+        this.el.addEventListener('click', this._handleMaterialboxClick);
+        this.el.addEventListener('keypress', this._handleMaterialboxKeypress);
+    }
+    _removeEventHandlers() {
+        this.el.removeEventListener('click', this._handleMaterialboxClick);
+        this.el.removeEventListener('keypress', this._handleMaterialboxKeypress);
+    }
+    _handleMaterialboxClick = () => {
+        this._handleMaterialboxToggle();
+    };
+    _handleMaterialboxKeypress = (e) => {
+        if (Utils.keys.ENTER.includes(e.key)) {
+            this._handleMaterialboxToggle();
+        }
+    };
+    _handleMaterialboxToggle = () => {
+        // If already modal, return to original
+        if (this.doneAnimating === false || (this.overlayActive && this.doneAnimating))
+            this.close();
+        else
+            this.open();
+    };
+    _handleWindowScroll = () => {
+        if (this.overlayActive)
+            this.close();
+    };
+    _handleWindowResize = () => {
+        if (this.overlayActive)
+            this.close();
+    };
+    _handleWindowEscape = (e) => {
+        if (Utils.keys.ESC.includes(e.key) && this.doneAnimating && this.overlayActive)
+            this.close();
+    };
+    _makeAncestorsOverflowVisible() {
+        this._changedAncestorList = [];
+        let ancestor = this.placeholder.parentNode;
+        while (ancestor !== null && ancestor !== document) {
+            const curr = ancestor;
+            if (curr.style.overflow !== 'visible') {
+                curr.style.overflow = 'visible';
+                this._changedAncestorList.push(curr);
+            }
+            ancestor = ancestor.parentNode;
+        }
+    }
+    _offset(el) {
+        const box = el.getBoundingClientRect();
+        const docElem = document.documentElement;
+        return {
+            top: box.top + window.scrollY - docElem.clientTop,
+            left: box.left + window.scrollX - docElem.clientLeft
+        };
+    }
+    _updateVars() {
+        this.windowWidth = window.innerWidth;
+        this.windowHeight = window.innerHeight;
+        this.caption = this.el.getAttribute('data-caption') || '';
+    }
+    // Image
+    _animateImageIn() {
+        this.el.style.maxHeight = this.newHeight.toString() + 'px';
+        this.el.style.maxWidth = this.newWidth.toString() + 'px';
+        const duration = this.options.inDuration;
+        // from
+        this.el.style.transition = 'none';
+        this.el.style.height = this.originalHeight + 'px';
+        this.el.style.width = this.originalWidth + 'px';
+        setTimeout(() => {
+            // easeOutQuad
+            this.el.style.transition = `height ${duration}ms ease,
+        width ${duration}ms ease,
+        left ${duration}ms ease,
+        top ${duration}ms ease
+      `;
+            // to
+            this.el.style.height = this.newHeight + 'px';
+            this.el.style.width = this.newWidth + 'px';
+            this.el.style.left =
+                Utils.getDocumentScrollLeft() +
+                    this.windowWidth / 2 -
+                    this._offset(this.placeholder).left -
+                    this.newWidth / 2 +
+                    'px';
+            this.el.style.top =
+                Utils.getDocumentScrollTop() +
+                    this.windowHeight / 2 -
+                    this._offset(this.placeholder).top -
+                    this.newHeight / 2 +
+                    'px';
+        }, 1);
+        setTimeout(() => {
+            this.doneAnimating = true;
+            if (typeof this.options.onOpenEnd === 'function')
+                this.options.onOpenEnd.call(this, this.el);
+        }, duration);
+        /*
+        anim({
+          targets: this.el, // image
+          height: [this.originalHeight, this.newHeight],
+          width: [this.originalWidth, this.newWidth],
+          left:
+            Utils.getDocumentScrollLeft() +
+            this.windowWidth / 2 -
+            this._offset(this.placeholder).left -
+            this.newWidth / 2,
+          top:
+            Utils.getDocumentScrollTop() +
+            this.windowHeight / 2 -
+            this._offset(this.placeholder).top -
+            this.newHeight / 2,
+    
+          duration: this.options.inDuration,
+          easing: 'easeOutQuad',
+          complete: () => {
+            this.doneAnimating = true;
+            if (typeof this.options.onOpenEnd === 'function') this.options.onOpenEnd.call(this, this.el);
+          }
+        });
+        */
+    }
+    _animateImageOut() {
+        const duration = this.options.outDuration;
+        // easeOutQuad
+        this.el.style.transition = `height ${duration}ms ease,
+      width ${duration}ms ease,
+      left ${duration}ms ease,
+      top ${duration}ms ease
+    `;
+        // to
+        this.el.style.height = this.originalWidth + 'px';
+        this.el.style.width = this.originalWidth + 'px';
+        this.el.style.left = '0';
+        this.el.style.top = '0';
+        setTimeout(() => {
+            this.placeholder.style.height = '';
+            this.placeholder.style.width = '';
+            this.placeholder.style.position = '';
+            this.placeholder.style.top = '';
+            this.placeholder.style.left = '';
+            // Revert to width or height attribute
+            if (this.attrWidth)
+                this.el.setAttribute('width', this.attrWidth.toString());
+            if (this.attrHeight)
+                this.el.setAttribute('height', this.attrHeight.toString());
+            this.el.removeAttribute('style');
+            if (this.originInlineStyles)
+                this.el.setAttribute('style', this.originInlineStyles);
+            // Remove class
+            this.el.classList.remove('active');
+            this.doneAnimating = true;
+            // Remove overflow overrides on ancestors
+            this._changedAncestorList.forEach((anchestor) => (anchestor.style.overflow = ''));
+            // onCloseEnd callback
+            if (typeof this.options.onCloseEnd === 'function')
+                this.options.onCloseEnd.call(this, this.el);
+        }, duration);
+    }
+    // Caption
+    _addCaption() {
+        this._photoCaption = document.createElement('div');
+        this._photoCaption.classList.add('materialbox-caption');
+        this._photoCaption.innerText = this.caption;
+        document.body.append(this._photoCaption);
+        this._photoCaption.style.display = 'inline';
+        // Animate
+        this._photoCaption.style.transition = 'none';
+        this._photoCaption.style.opacity = '0';
+        const duration = this.options.inDuration;
+        setTimeout(() => {
+            this._photoCaption.style.transition = `opacity ${duration}ms ease`;
+            this._photoCaption.style.opacity = '1';
+        }, 1);
+    }
+    _removeCaption() {
+        const duration = this.options.outDuration;
+        this._photoCaption.style.transition = `opacity ${duration}ms ease`;
+        this._photoCaption.style.opacity = '0';
+        setTimeout(() => {
+            this._photoCaption.remove();
+        }, duration);
+    }
+    // Overlay
+    _addOverlay() {
+        this._overlay = document.createElement('div');
+        this._overlay.id = 'materialbox-overlay';
+        this._overlay.addEventListener('click', () => {
+            if (this.doneAnimating)
+                this.close();
+        }, { once: true });
+        // Put before in origin image to preserve z-index layering.
+        this.el.before(this._overlay);
+        // Set dimensions if needed
+        const overlayOffset = this._overlay.getBoundingClientRect();
+        this._overlay.style.width = this.windowWidth + 'px';
+        this._overlay.style.height = this.windowHeight + 'px';
+        this._overlay.style.left = -1 * overlayOffset.left + 'px';
+        this._overlay.style.top = -1 * overlayOffset.top + 'px';
+        // Animate
+        this._overlay.style.transition = 'none';
+        this._overlay.style.opacity = '0';
+        const duration = this.options.inDuration;
+        setTimeout(() => {
+            this._overlay.style.transition = `opacity ${duration}ms ease`;
+            this._overlay.style.opacity = '1';
+        }, 1);
+    }
+    _removeOverlay() {
+        const duration = this.options.outDuration;
+        this._overlay.style.transition = `opacity ${duration}ms ease`;
+        this._overlay.style.opacity = '0';
+        setTimeout(() => {
+            this.overlayActive = false;
+            this._overlay.remove();
+        }, duration);
+    }
+    /**
+     * Open materialbox.
+     */
+    open = () => {
+        this._updateVars();
+        this.originalWidth = this.el.getBoundingClientRect().width;
+        this.originalHeight = this.el.getBoundingClientRect().height;
+        // Set states
+        this.doneAnimating = false;
+        this.el.classList.add('active');
+        this.overlayActive = true;
+        // onOpenStart callback
+        if (typeof this.options.onOpenStart === 'function')
+            this.options.onOpenStart.call(this, this.el);
+        // Set positioning for placeholder
+        this.placeholder.style.width = this.placeholder.getBoundingClientRect().width + 'px';
+        this.placeholder.style.height = this.placeholder.getBoundingClientRect().height + 'px';
+        this.placeholder.style.position = 'relative';
+        this.placeholder.style.top = '0';
+        this.placeholder.style.left = '0';
+        this._makeAncestorsOverflowVisible();
+        // Set css on origin
+        this.el.style.position = 'absolute';
+        this.el.style.zIndex = '1000';
+        this.el.style.willChange = 'left, top, width, height';
+        // Change from width or height attribute to css
+        this.attrWidth = this.el.getAttribute('width');
+        this.attrHeight = this.el.getAttribute('height');
+        if (this.attrWidth) {
+            this.el.style.width = this.attrWidth + 'px';
+            this.el.removeAttribute('width');
+        }
+        if (this.attrHeight) {
+            this.el.style.width = this.attrHeight + 'px';
+            this.el.removeAttribute('height');
+        }
+        this._addOverlay();
+        // Add and animate caption if it exists
+        if (this.caption !== '')
+            this._addCaption();
+        // Resize Image
+        const widthPercent = this.originalWidth / this.windowWidth;
+        const heightPercent = this.originalHeight / this.windowHeight;
+        this.newWidth = 0;
+        this.newHeight = 0;
+        if (widthPercent > heightPercent) {
+            // Width first
+            const ratio = this.originalHeight / this.originalWidth;
+            this.newWidth = this.windowWidth * 0.9;
+            this.newHeight = this.windowWidth * 0.9 * ratio;
+        }
+        else {
+            // Height first
+            const ratio = this.originalWidth / this.originalHeight;
+            this.newWidth = this.windowHeight * 0.9 * ratio;
+            this.newHeight = this.windowHeight * 0.9;
+        }
+        this._animateImageIn();
+        // Handle Exit triggers
+        window.addEventListener('scroll', this._handleWindowScroll);
+        window.addEventListener('resize', this._handleWindowResize);
+        window.addEventListener('keyup', this._handleWindowEscape);
+    };
+    /**
+     * Close materialbox.
+     */
+    close = () => {
+        this._updateVars();
+        this.doneAnimating = false;
+        // onCloseStart callback
+        if (typeof this.options.onCloseStart === 'function')
+            this.options.onCloseStart.call(this, this.el);
+        //anim.remove(this.el);
+        //anim.remove(this._overlay);
+        //if (this.caption !== '') anim.remove(this._photoCaption);
+        // disable exit handlers
+        window.removeEventListener('scroll', this._handleWindowScroll);
+        window.removeEventListener('resize', this._handleWindowResize);
+        window.removeEventListener('keyup', this._handleWindowEscape);
+        this._removeOverlay();
+        this._animateImageOut();
+        if (this.caption !== '')
+            this._removeCaption();
+    };
+}
+
+const _defaults$c = {
+    opacity: 0.5,
+    inDuration: 250,
+    outDuration: 250,
+    onOpenStart: null,
+    onOpenEnd: null,
+    onCloseStart: null,
+    onCloseEnd: null,
+    preventScrolling: true,
+    dismissible: true,
+    startingTop: '4%',
+    endingTop: '10%'
+};
+class Modal extends Component {
+    constructor(el, options) {
+        super(el, options, Modal);
+        this.el['M_Modal'] = this;
+        this.options = {
+            ...Modal.defaults,
+            ...options
+        };
+        this.el.tabIndex = 0;
+        this._setupEventHandlers();
+    }
+    static get defaults() {
+        return _defaults$c;
+    }
+    static init(els, options = {}) {
+        return super.init(els, options, Modal);
+    }
+    static getInstance(el) {
+        return el['M_Modal'];
+    }
+    destroy() { }
+    _setupEventHandlers() { }
+    _removeEventHandlers() { }
+    _handleTriggerClick() { }
+    _handleOverlayClick() { }
+    _handleModalCloseClick() { }
+    _handleKeydown() { }
+    _handleFocus() { }
+    open() {
+        return this;
+    }
+    close() {
+        return this;
+    }
+    // Experimental!
+    static #createHtml(config) {
+        return `<dialog id="modal1" class="modal">
+      ${config.header ? '<div class="modal-header">' + config.header + '</div>' : ''}
+      <div class="modal-content">
+        ${config.content}
+      </div>
+      ${config.header ? '<div class="modal-footer">' + config.footer + '</div>' : ''}
+    </dialog>`;
+    }
+    static #createHtmlElement(config) {
+        const dialog = document.createElement('dialog');
+        dialog.id = config.id;
+        return dialog;
+    }
+    static create(config) {
+        return this.#createHtmlElement(config);
+    }
+    static { }
+}
+
+const _defaults$b = {
+    responsiveThreshold: 0 // breakpoint for swipeable
+};
+class Parallax extends Component {
+    _enabled;
+    _img;
+    static _parallaxes = [];
+    static _handleScrollThrottled;
+    static _handleWindowResizeThrottled;
+    constructor(el, options) {
+        super(el, options, Parallax);
+        this.el['M_Parallax'] = this;
+        this.options = {
+            ...Parallax.defaults,
+            ...options
+        };
+        this._enabled = window.innerWidth > this.options.responsiveThreshold;
+        this._img = this.el.querySelector('img');
+        this._updateParallax();
+        this._setupEventHandlers();
+        this._setupStyles();
+        Parallax._parallaxes.push(this);
+    }
+    static get defaults() {
+        return _defaults$b;
+    }
+    /**
+     * Initializes instances of Parallax.
+     * @param els HTML elements.
+     * @param options Component options.
+     */
+    static init(els, options = {}) {
+        return super.init(els, options, Parallax);
+    }
+    static getInstance(el) {
+        return el['M_Parallax'];
+    }
+    destroy() {
+        Parallax._parallaxes.splice(Parallax._parallaxes.indexOf(this), 1);
+        this._img.style.transform = '';
+        this._removeEventHandlers();
+        this.el['M_Parallax'] = undefined;
+    }
+    static _handleScroll() {
+        for (let i = 0; i < Parallax._parallaxes.length; i++) {
+            const parallaxInstance = Parallax._parallaxes[i];
+            parallaxInstance._updateParallax.call(parallaxInstance);
+        }
+    }
+    static _handleWindowResize() {
+        for (let i = 0; i < Parallax._parallaxes.length; i++) {
+            const parallaxInstance = Parallax._parallaxes[i];
+            parallaxInstance._enabled = window.innerWidth > parallaxInstance.options.responsiveThreshold;
+        }
+    }
+    _setupEventHandlers() {
+        this._img.addEventListener('load', this._handleImageLoad);
+        if (Parallax._parallaxes.length === 0) {
+            if (!Parallax._handleScrollThrottled) {
+                Parallax._handleScrollThrottled = Utils.throttle(Parallax._handleScroll, 5);
+            }
+            if (!Parallax._handleWindowResizeThrottled) {
+                Parallax._handleWindowResizeThrottled = Utils.throttle(Parallax._handleWindowResize, 5);
+            }
+            window.addEventListener('scroll', Parallax._handleScrollThrottled);
+            window.addEventListener('resize', Parallax._handleWindowResizeThrottled);
+        }
+    }
+    _removeEventHandlers() {
+        this._img.removeEventListener('load', this._handleImageLoad);
+        if (Parallax._parallaxes.length === 0) {
+            window.removeEventListener('scroll', Parallax._handleScrollThrottled);
+            window.removeEventListener('resize', Parallax._handleWindowResizeThrottled);
+        }
+    }
+    _setupStyles() {
+        this._img.style.opacity = '1';
+    }
+    _handleImageLoad = () => {
+        this._updateParallax();
+    };
+    _offset(el) {
+        const box = el.getBoundingClientRect();
+        const docElem = document.documentElement;
+        return {
+            top: box.top + window.scrollY - docElem.clientTop,
+            left: box.left + window.scrollX - docElem.clientLeft
+        };
+    }
+    _updateParallax() {
+        const containerHeight = this.el.getBoundingClientRect().height > 0 ? this.el.parentElement.offsetHeight : 500;
+        const imgHeight = this._img.offsetHeight;
+        const parallaxDist = imgHeight - containerHeight;
+        const bottom = this._offset(this.el).top + containerHeight;
+        const top = this._offset(this.el).top;
+        const scrollTop = Utils.getDocumentScrollTop();
+        const windowHeight = window.innerHeight;
+        const windowBottom = scrollTop + windowHeight;
+        const percentScrolled = (windowBottom - top) / (containerHeight + windowHeight);
+        const parallax = parallaxDist * percentScrolled;
+        if (!this._enabled) {
+            this._img.style.transform = '';
+        }
+        else if (bottom > scrollTop && top < scrollTop + windowHeight) {
+            this._img.style.transform = `translate3D(-50%, ${parallax}px, 0)`;
+        }
+    }
+}
+
+const _defaults$a = {
+    top: 0,
+    bottom: Infinity,
+    offset: 0,
+    onPositionChange: null
+};
+class Pushpin extends Component {
+    static _pushpins;
+    originalOffset;
+    constructor(el, options) {
+        super(el, options, Pushpin);
+        this.el['M_Pushpin'] = this;
+        this.options = {
+            ...Pushpin.defaults,
+            ...options
+        };
+        this.originalOffset = this.el.offsetTop;
+        Pushpin._pushpins.push(this);
+        this._setupEventHandlers();
+        this._updatePosition();
+    }
+    static get defaults() {
+        return _defaults$a;
+    }
+    /**
+     * Initializes instances of Pushpin.
+     * @param els HTML elements.
+     * @param options Component options.
+     */
+    static init(els, options = {}) {
+        return super.init(els, options, Pushpin);
+    }
+    static getInstance(el) {
+        return el['M_Pushpin'];
+    }
+    destroy() {
+        this.el.style.top = null;
+        this._removePinClasses();
+        // Remove pushpin Inst
+        const index = Pushpin._pushpins.indexOf(this);
+        Pushpin._pushpins.splice(index, 1);
+        if (Pushpin._pushpins.length === 0) {
+            this._removeEventHandlers();
+        }
+        this.el['M_Pushpin'] = undefined;
+    }
+    static _updateElements() {
+        for (const elIndex in Pushpin._pushpins) {
+            const pInstance = Pushpin._pushpins[elIndex];
+            pInstance._updatePosition();
+        }
+    }
+    _setupEventHandlers() {
+        document.addEventListener('scroll', Pushpin._updateElements);
+    }
+    _removeEventHandlers() {
+        document.removeEventListener('scroll', Pushpin._updateElements);
+    }
+    _updatePosition() {
+        const scrolled = Utils.getDocumentScrollTop() + this.options.offset;
+        if (this.options.top <= scrolled &&
+            this.options.bottom >= scrolled &&
+            !this.el.classList.contains('pinned')) {
+            this._removePinClasses();
+            this.el.style.top = `${this.options.offset}px`;
+            this.el.classList.add('pinned');
+            // onPositionChange callback
+            if (typeof this.options.onPositionChange === 'function') {
+                this.options.onPositionChange.call(this, 'pinned');
+            }
+        }
+        // Add pin-top (when scrolled position is above top)
+        if (scrolled < this.options.top && !this.el.classList.contains('pin-top')) {
+            this._removePinClasses();
+            this.el.style.top = '0';
+            this.el.classList.add('pin-top');
+            // onPositionChange callback
+            if (typeof this.options.onPositionChange === 'function') {
+                this.options.onPositionChange.call(this, 'pin-top');
+            }
+        }
+        // Add pin-bottom (when scrolled position is below bottom)
+        if (scrolled > this.options.bottom && !this.el.classList.contains('pin-bottom')) {
+            this._removePinClasses();
+            this.el.classList.add('pin-bottom');
+            this.el.style.top = `${this.options.bottom - this.originalOffset}px`;
+            // onPositionChange callback
+            if (typeof this.options.onPositionChange === 'function') {
+                this.options.onPositionChange.call(this, 'pin-bottom');
+            }
+        }
+    }
+    _removePinClasses() {
+        // IE 11 bug (can't remove multiple classes in one line)
+        this.el.classList.remove('pin-top');
+        this.el.classList.remove('pinned');
+        this.el.classList.remove('pin-bottom');
+    }
+    static {
+        Pushpin._pushpins = [];
+    }
+}
+
+const _defaults$9 = {
+    throttle: 100,
+    scrollOffset: 200, // offset - 200 allows elements near bottom of page to scroll
+    activeClass: 'active',
+    getActiveElement: (id) => {
+        return 'a[href="#' + id + '"]';
+    },
+    keepTopElementActive: false,
+    animationDuration: null
+};
+class ScrollSpy extends Component {
+    static _elements;
+    static _count;
+    static _increment;
+    static _elementsInView;
+    static _visibleElements;
+    static _ticks;
+    static _keptTopActiveElement = null;
+    tickId;
+    id;
+    constructor(el, options) {
+        super(el, options, ScrollSpy);
+        this.el['M_ScrollSpy'] = this;
+        this.options = {
+            ...ScrollSpy.defaults,
+            ...options
+        };
+        ScrollSpy._elements.push(this);
+        ScrollSpy._count++;
+        ScrollSpy._increment++;
+        this.tickId = -1;
+        this.id = ScrollSpy._increment.toString();
+        this._setupEventHandlers();
+        this._handleWindowScroll();
+    }
+    static get defaults() {
+        return _defaults$9;
+    }
+    /**
+     * Initializes instances of ScrollSpy.
+     * @param els HTML elements.
+     * @param options Component options.
+     */
+    static init(els, options = {}) {
+        return super.init(els, options, ScrollSpy);
+    }
+    static getInstance(el) {
+        return el['M_ScrollSpy'];
+    }
+    destroy() {
+        ScrollSpy._elements.splice(ScrollSpy._elements.indexOf(this), 1);
+        ScrollSpy._elementsInView.splice(ScrollSpy._elementsInView.indexOf(this), 1);
+        ScrollSpy._visibleElements.splice(ScrollSpy._visibleElements.indexOf(this.el), 1);
+        ScrollSpy._count--;
+        this._removeEventHandlers();
+        const actElem = document.querySelector(this.options.getActiveElement(this.el.id));
+        actElem.classList.remove(this.options.activeClass);
+        this.el['M_ScrollSpy'] = undefined;
+    }
+    _setupEventHandlers() {
+        if (ScrollSpy._count === 1) {
+            window.addEventListener('scroll', this._handleWindowScroll);
+            window.addEventListener('resize', this._handleThrottledResize);
+            document.body.addEventListener('click', this._handleTriggerClick);
+        }
+    }
+    _removeEventHandlers() {
+        if (ScrollSpy._count === 0) {
+            window.removeEventListener('scroll', this._handleWindowScroll);
+            window.removeEventListener('resize', this._handleThrottledResize);
+            document.body.removeEventListener('click', this._handleTriggerClick);
+        }
+    }
+    _handleThrottledResize = Utils.throttle(function () {
+        this._handleWindowScroll();
+    }, 200).bind(this);
+    _handleTriggerClick = (e) => {
+        const trigger = e.target;
+        for (let i = ScrollSpy._elements.length - 1; i >= 0; i--) {
+            const scrollspy = ScrollSpy._elements[i];
+            const x = document.querySelector('a[href="#' + scrollspy.el.id + '"]');
+            if (trigger === x) {
+                e.preventDefault();
+                if (scrollspy.el['M_ScrollSpy'].options.animationDuration) {
+                    ScrollSpy._smoothScrollIntoView(scrollspy.el, scrollspy.el['M_ScrollSpy'].options.animationDuration);
+                }
+                else {
+                    scrollspy.el.scrollIntoView({ behavior: 'smooth' });
+                }
+                break;
+            }
+        }
+    };
+    _handleWindowScroll = () => {
+        // unique tick id
+        ScrollSpy._ticks++;
+        // viewport rectangle
+        const top = Utils.getDocumentScrollTop(), left = Utils.getDocumentScrollLeft(), right = left + window.innerWidth, bottom = top + window.innerHeight;
+        // determine which elements are in view
+        const intersections = ScrollSpy._findElements(top, right, bottom, left);
+        for (let i = 0; i < intersections.length; i++) {
+            const scrollspy = intersections[i];
+            const lastTick = scrollspy.tickId;
+            if (lastTick < 0) {
+                // entered into view
+                scrollspy._enter();
+            }
+            // update tick id
+            scrollspy.tickId = ScrollSpy._ticks;
+        }
+        for (let i = 0; i < ScrollSpy._elementsInView.length; i++) {
+            const scrollspy = ScrollSpy._elementsInView[i];
+            const lastTick = scrollspy.tickId;
+            if (lastTick >= 0 && lastTick !== ScrollSpy._ticks) {
+                // exited from view
+                scrollspy._exit();
+                scrollspy.tickId = -1;
+            }
+        }
+        // remember elements in view for next tick
+        ScrollSpy._elementsInView = intersections;
+        if (ScrollSpy._elements.length) {
+            const options = ScrollSpy._elements[0].el['M_ScrollSpy'].options;
+            if (options.keepTopElementActive && ScrollSpy._visibleElements.length === 0) {
+                this._resetKeptTopActiveElementIfNeeded();
+                const topElements = ScrollSpy._elements
+                    .filter((value) => ScrollSpy._getDistanceToViewport(value.el) <= 0)
+                    .sort((a, b) => {
+                    const distanceA = ScrollSpy._getDistanceToViewport(a.el);
+                    const distanceB = ScrollSpy._getDistanceToViewport(b.el);
+                    if (distanceA < distanceB)
+                        return -1;
+                    if (distanceA > distanceB)
+                        return 1;
+                    return 0;
+                });
+                const nearestTopElement = topElements.length
+                    ? topElements[topElements.length - 1]
+                    : ScrollSpy._elements[0];
+                const actElem = document.querySelector(options.getActiveElement(nearestTopElement.el.id));
+                actElem?.classList.add(options.activeClass);
+                ScrollSpy._keptTopActiveElement = actElem;
+            }
+        }
+    };
+    static _offset(el) {
+        const box = el.getBoundingClientRect();
+        const docElem = document.documentElement;
+        return {
+            top: box.top + window.pageYOffset - docElem.clientTop,
+            left: box.left + window.pageXOffset - docElem.clientLeft
+        };
+    }
+    static _findElements(top, right, bottom, left) {
+        const hits = [];
+        for (let i = 0; i < ScrollSpy._elements.length; i++) {
+            const scrollspy = ScrollSpy._elements[i];
+            const currTop = top + scrollspy.options.scrollOffset || 200;
+            if (scrollspy.el.getBoundingClientRect().height > 0) {
+                const elTop = ScrollSpy._offset(scrollspy.el).top, elLeft = ScrollSpy._offset(scrollspy.el).left, elRight = elLeft + scrollspy.el.getBoundingClientRect().width, elBottom = elTop + scrollspy.el.getBoundingClientRect().height;
+                const isIntersect = !(elLeft > right ||
+                    elRight < left ||
+                    elTop > bottom ||
+                    elBottom < currTop);
+                if (isIntersect) {
+                    hits.push(scrollspy);
+                }
+            }
+        }
+        return hits;
+    }
+    _enter() {
+        ScrollSpy._visibleElements = ScrollSpy._visibleElements.filter((value) => value.getBoundingClientRect().height !== 0);
+        if (ScrollSpy._visibleElements[0]) {
+            const actElem = document.querySelector(this.options.getActiveElement(ScrollSpy._visibleElements[0].id));
+            actElem?.classList.remove(this.options.activeClass);
+            if (ScrollSpy._visibleElements[0]['M_ScrollSpy'] &&
+                this.id < ScrollSpy._visibleElements[0]['M_ScrollSpy'].id) {
+                ScrollSpy._visibleElements.unshift(this.el);
+            }
+            else {
+                ScrollSpy._visibleElements.push(this.el);
+            }
+        }
+        else {
+            ScrollSpy._visibleElements.push(this.el);
+        }
+        this._resetKeptTopActiveElementIfNeeded();
+        const selector = this.options.getActiveElement(ScrollSpy._visibleElements[0].id);
+        document.querySelector(selector)?.classList.add(this.options.activeClass);
+    }
+    _exit() {
+        ScrollSpy._visibleElements = ScrollSpy._visibleElements.filter((value) => value.getBoundingClientRect().height !== 0);
+        if (ScrollSpy._visibleElements[0]) {
+            const actElem = document.querySelector(this.options.getActiveElement(ScrollSpy._visibleElements[0].id));
+            actElem?.classList.remove(this.options.activeClass);
+            ScrollSpy._visibleElements = ScrollSpy._visibleElements.filter((x) => x.id != this.el.id);
+            if (ScrollSpy._visibleElements[0]) {
+                // Check if empty
+                const selector = this.options.getActiveElement(ScrollSpy._visibleElements[0].id);
+                document.querySelector(selector)?.classList.add(this.options.activeClass);
+                this._resetKeptTopActiveElementIfNeeded();
+            }
+        }
+    }
+    _resetKeptTopActiveElementIfNeeded() {
+        if (ScrollSpy._keptTopActiveElement) {
+            ScrollSpy._keptTopActiveElement.classList.remove(this.options.activeClass);
+            ScrollSpy._keptTopActiveElement = null;
+        }
+    }
+    static _getDistanceToViewport(element) {
+        const rect = element.getBoundingClientRect();
+        const distance = rect.top;
+        return distance;
+    }
+    static _smoothScrollIntoView(element, duration = 300) {
+        const targetPosition = element.getBoundingClientRect().top + (window.scrollY || window.pageYOffset);
+        const startPosition = window.scrollY || window.pageYOffset;
+        const distance = targetPosition - startPosition;
+        const startTime = performance.now();
+        function scrollStep(currentTime) {
+            const elapsed = currentTime - startTime;
+            const progress = Math.min(elapsed / duration, 1);
+            const scrollY = startPosition + distance * progress;
+            if (progress < 1) {
+                window.scrollTo(0, scrollY);
+                requestAnimationFrame(scrollStep);
+            }
+            else {
+                window.scrollTo(0, targetPosition);
+            }
+        }
+        requestAnimationFrame(scrollStep);
+    }
+    static {
+        ScrollSpy._elements = [];
+        ScrollSpy._elementsInView = [];
+        ScrollSpy._visibleElements = []; // Array.<cash>
+        ScrollSpy._count = 0;
+        ScrollSpy._increment = 0;
+        ScrollSpy._ticks = 0;
+    }
+}
+
+const _defaults$8 = {
+    edge: 'left',
+    draggable: true,
+    dragTargetWidth: '10px',
+    inDuration: 250,
+    outDuration: 200,
+    onOpenStart: null,
+    onOpenEnd: null,
+    onCloseStart: null,
+    onCloseEnd: null,
+    preventScrolling: true
+};
+class Sidenav extends Component {
+    id;
+    /** Describes open/close state of Sidenav. */
+    isOpen;
+    /** Describes if sidenav is fixed. */
+    isFixed;
+    /** Describes if Sidenav is being dragged. */
+    isDragged;
+    lastWindowWidth;
+    lastWindowHeight;
+    static _sidenavs;
+    _overlay;
+    dragTarget;
+    _startingXpos;
+    _xPos;
+    _time;
+    _width;
+    _initialScrollTop;
+    _verticallyScrolling;
+    deltaX;
+    velocityX;
+    percentOpen;
+    constructor(el, options) {
+        super(el, options, Sidenav);
+        this.el['M_Sidenav'] = this;
+        this.options = {
+            ...Sidenav.defaults,
+            ...options
+        };
+        this.id = this.el.id;
+        this.isOpen = false;
+        this.isFixed = this.el.classList.contains('sidenav-fixed');
+        this.isDragged = false;
+        // Window size variables for window resize checks
+        this.lastWindowWidth = window.innerWidth;
+        this.lastWindowHeight = window.innerHeight;
+        this._createOverlay();
+        this._createDragTarget();
+        this._setupEventHandlers();
+        this._setupClasses();
+        this._setupFixed();
+        Sidenav._sidenavs.push(this);
+    }
+    static get defaults() {
+        return _defaults$8;
+    }
+    /**
+     * Initializes instances of Sidenav.
+     * @param els HTML elements.
+     * @param options Component options.
+     */
+    static init(els, options = {}) {
+        return super.init(els, options, Sidenav);
+    }
+    static getInstance(el) {
+        return el['M_Sidenav'];
+    }
+    destroy() {
+        this._removeEventHandlers();
+        this._enableBodyScrolling();
+        this._overlay.parentNode.removeChild(this._overlay);
+        this.dragTarget.parentNode.removeChild(this.dragTarget);
+        this.el['M_Sidenav'] = undefined;
+        this.el.style.transform = '';
+        const index = Sidenav._sidenavs.indexOf(this);
+        if (index >= 0) {
+            Sidenav._sidenavs.splice(index, 1);
+        }
+    }
+    _createOverlay() {
+        this._overlay = document.createElement('div');
+        this._overlay.classList.add('sidenav-overlay');
+        this._overlay.addEventListener('click', this.close);
+        document.body.appendChild(this._overlay);
+    }
+    _setupEventHandlers() {
+        if (Sidenav._sidenavs.length === 0) {
+            document.body.addEventListener('click', this._handleTriggerClick);
+        }
+        const passiveIfSupported = null;
+        this.dragTarget.addEventListener('touchmove', this._handleDragTargetDrag, passiveIfSupported);
+        this.dragTarget.addEventListener('touchend', this._handleDragTargetRelease);
+        this._overlay.addEventListener('touchmove', this._handleCloseDrag, passiveIfSupported);
+        this._overlay.addEventListener('touchend', this._handleCloseRelease);
+        this.el.addEventListener('touchmove', this._handleCloseDrag); // , passiveIfSupported);
+        this.el.addEventListener('touchend', this._handleCloseRelease);
+        this.el.addEventListener('click', this._handleCloseTriggerClick);
+        // Add resize for side nav fixed
+        if (this.isFixed) {
+            window.addEventListener('resize', this._handleWindowResize);
+        }
+        /* Set aria-hidden state */
+        this._setAriaHidden();
+        this._setTabIndex();
+    }
+    _removeEventHandlers() {
+        if (Sidenav._sidenavs.length === 1) {
+            document.body.removeEventListener('click', this._handleTriggerClick);
+        }
+        this.dragTarget.removeEventListener('touchmove', this._handleDragTargetDrag);
+        this.dragTarget.removeEventListener('touchend', this._handleDragTargetRelease);
+        this._overlay.removeEventListener('touchmove', this._handleCloseDrag);
+        this._overlay.removeEventListener('touchend', this._handleCloseRelease);
+        this.el.removeEventListener('touchmove', this._handleCloseDrag);
+        this.el.removeEventListener('touchend', this._handleCloseRelease);
+        this.el.removeEventListener('click', this._handleCloseTriggerClick);
+        // Remove resize for side nav fixed
+        if (this.isFixed) {
+            window.removeEventListener('resize', this._handleWindowResize);
+        }
+    }
+    _handleTriggerClick(e) {
+        const trigger = e.target.closest('.sidenav-trigger');
+        if (e.target && trigger) {
+            const sidenavId = Utils.getIdFromTrigger(trigger);
+            const sidenavInstance = document.getElementById(sidenavId)['M_Sidenav'];
+            if (sidenavInstance) {
+                sidenavInstance.open();
+            }
+            e.preventDefault();
+        }
+    }
+    // Set variables needed at the beginning of drag and stop any current transition.
+    _startDrag(e) {
+        const clientX = e.targetTouches[0].clientX;
+        this.isDragged = true;
+        this._startingXpos = clientX;
+        this._xPos = this._startingXpos;
+        this._time = Date.now();
+        this._width = this.el.getBoundingClientRect().width;
+        this._overlay.style.display = 'block';
+        this._initialScrollTop = this.isOpen ? this.el.scrollTop : Utils.getDocumentScrollTop();
+        this._verticallyScrolling = false;
+    }
+    //Set variables needed at each drag move update tick
+    _dragMoveUpdate(e) {
+        const clientX = e.targetTouches[0].clientX;
+        const currentScrollTop = this.isOpen ? this.el.scrollTop : Utils.getDocumentScrollTop();
+        this.deltaX = Math.abs(this._xPos - clientX);
+        this._xPos = clientX;
+        this.velocityX = this.deltaX / (Date.now() - this._time);
+        this._time = Date.now();
+        if (this._initialScrollTop !== currentScrollTop) {
+            this._verticallyScrolling = true;
+        }
+    }
+    _handleDragTargetDrag = (e) => {
+        // Check if draggable
+        if (!this._isDraggable())
+            return;
+        let totalDeltaX = this._calculateDelta(e);
+        const dragDirection = totalDeltaX > 0 ? 'right' : 'left';
+        // Don't allow totalDeltaX to exceed Sidenav width or be dragged in the opposite direction
+        totalDeltaX = Math.min(this._width, Math.abs(totalDeltaX));
+        if (this.options.edge === dragDirection) {
+            totalDeltaX = 0;
+        }
+        /**
+         * transformX is the drag displacement
+         * transformPrefix is the initial transform placement
+         * Invert values if Sidenav is right edge
+         */
+        let transformX = totalDeltaX;
+        let transformPrefix = 'translateX(-100%)';
+        if (this.options.edge === 'right') {
+            transformPrefix = 'translateX(100%)';
+            transformX = -transformX;
+        }
+        // Calculate open/close percentage of sidenav, with open = 1 and close = 0
+        this.percentOpen = Math.min(1, totalDeltaX / this._width);
+        // Set transform and opacity styles
+        this.el.style.transform = `${transformPrefix} translateX(${transformX}px)`;
+        this._overlay.style.opacity = this.percentOpen.toString();
+    };
+    _handleDragTargetRelease = () => {
+        if (this.isDragged) {
+            if (this.percentOpen > 0.2) {
+                this.open();
+            }
+            else {
+                this._animateOut();
+            }
+            this.isDragged = false;
+            this._verticallyScrolling = false;
+        }
+    };
+    _handleCloseDrag = (e) => {
+        // Check if open and draggable
+        if (!this.isOpen || !this._isDraggable())
+            return;
+        let totalDeltaX = this._calculateDelta(e);
+        // dragDirection is the attempted user drag direction
+        const dragDirection = totalDeltaX > 0 ? 'right' : 'left';
+        totalDeltaX = Math.min(this._width, Math.abs(totalDeltaX));
+        if (this.options.edge !== dragDirection) {
+            totalDeltaX = 0;
+        }
+        let transformX = -totalDeltaX;
+        if (this.options.edge === 'right') {
+            transformX = -transformX;
+        }
+        // Calculate open/close percentage of sidenav, with open = 1 and close = 0
+        this.percentOpen = Math.min(1, 1 - totalDeltaX / this._width);
+        // Set transform and opacity styles
+        this.el.style.transform = `translateX(${transformX}px)`;
+        this._overlay.style.opacity = this.percentOpen.toString();
+    };
+    _calculateDelta = (e) => {
+        // If not being dragged, set initial drag start variables
+        if (!this.isDragged) {
+            this._startDrag(e);
+        }
+        // Run touchmove updates
+        this._dragMoveUpdate(e);
+        // Calculate raw deltaX
+        return this._xPos - this._startingXpos;
+    };
+    _handleCloseRelease = () => {
+        if (this.isOpen && this.isDragged) {
+            if (this.percentOpen > 0.8) {
+                this._animateIn();
+            }
+            else {
+                this.close();
+            }
+            this.isDragged = false;
+            this._verticallyScrolling = false;
+        }
+    };
+    // Handles closing of Sidenav when element with class .sidenav-close
+    _handleCloseTriggerClick = (e) => {
+        const closeTrigger = e.target.closest('.sidenav-close');
+        if (closeTrigger && !this._isCurrentlyFixed()) {
+            this.close();
+        }
+    };
+    _handleWindowResize = () => {
+        // Only handle horizontal resizes
+        if (this.lastWindowWidth !== window.innerWidth) {
+            if (window.innerWidth > 992) {
+                this.open();
+            }
+            else {
+                this.close();
+            }
+        }
+        this.lastWindowWidth = window.innerWidth;
+        this.lastWindowHeight = window.innerHeight;
+    };
+    _setupClasses() {
+        if (this.options.edge === 'right') {
+            this.el.classList.add('right-aligned');
+            this.dragTarget.classList.add('right-aligned');
+        }
+    }
+    _removeClasses() {
+        this.el.classList.remove('right-aligned');
+        this.dragTarget.classList.remove('right-aligned');
+    }
+    _setupFixed() {
+        if (this._isCurrentlyFixed())
+            this.open();
+    }
+    _isDraggable() {
+        return this.options.draggable && !this._isCurrentlyFixed() && !this._verticallyScrolling;
+    }
+    _isCurrentlyFixed() {
+        return this.isFixed && window.innerWidth > 992;
+    }
+    _createDragTarget() {
+        const dragTarget = document.createElement('div');
+        dragTarget.classList.add('drag-target');
+        dragTarget.style.width = this.options.dragTargetWidth;
+        document.body.appendChild(dragTarget);
+        this.dragTarget = dragTarget;
+    }
+    _preventBodyScrolling() {
+        document.body.style.overflow = 'hidden';
+    }
+    _enableBodyScrolling() {
+        document.body.style.overflow = '';
+    }
+    /**
+     * Opens Sidenav.
+     */
+    open = () => {
+        if (this.isOpen === true)
+            return;
+        this.isOpen = true;
+        // Run onOpenStart callback
+        if (typeof this.options.onOpenStart === 'function') {
+            this.options.onOpenStart.call(this, this.el);
+        }
+        // Handle fixed Sidenav
+        if (this._isCurrentlyFixed()) {
+            // Show if fixed
+            this.el.style.transform = 'translateX(0)';
+            this._enableBodyScrolling();
+            this._overlay.style.display = 'none';
+        }
+        // Handle non-fixed Sidenav
+        else {
+            if (this.options.preventScrolling)
+                this._preventBodyScrolling();
+            if (!this.isDragged || this.percentOpen != 1)
+                this._animateIn();
+            /* Set aria-hidden state */
+            this._setAriaHidden();
+            this._setTabIndex();
+        }
+    };
+    /**
+     * Closes Sidenav.
+     */
+    close = () => {
+        if (this.isOpen === false)
+            return;
+        this.isOpen = false;
+        // Run onCloseStart callback
+        if (typeof this.options.onCloseStart === 'function') {
+            this.options.onCloseStart.call(this, this.el);
+        }
+        // Handle fixed Sidenav
+        if (this._isCurrentlyFixed()) {
+            const transformX = this.options.edge === 'left' ? '-105%' : '105%';
+            this.el.style.transform = `translateX(${transformX})`;
+        }
+        // Handle non-fixed Sidenav
+        else {
+            this._enableBodyScrolling();
+            if (!this.isDragged || this.percentOpen != 0) {
+                this._animateOut();
+            }
+            else {
+                this._overlay.style.display = 'none';
+            }
+            /* Set aria-hidden state */
+            this._setAriaHidden();
+            this._setTabIndex();
+        }
+    };
+    _animateIn() {
+        this._animateSidenavIn();
+        this._animateOverlayIn();
+    }
+    _animateOut() {
+        this._animateSidenavOut();
+        this._animateOverlayOut();
+    }
+    _animateSidenavIn() {
+        let slideOutPercent = this.options.edge === 'left' ? -1 : 1;
+        if (this.isDragged) {
+            slideOutPercent =
+                this.options.edge === 'left'
+                    ? slideOutPercent + this.percentOpen
+                    : slideOutPercent - this.percentOpen;
+        }
+        const duration = this.options.inDuration;
+        // from
+        this.el.style.transition = 'none';
+        this.el.style.transform = 'translateX(' + slideOutPercent * 100 + '%)';
+        setTimeout(() => {
+            this.el.style.transition = `transform ${duration}ms ease`; // easeOutQuad
+            // to
+            this.el.style.transform = 'translateX(0)';
+        }, 1);
+        setTimeout(() => {
+            if (typeof this.options.onOpenEnd === 'function')
+                this.options.onOpenEnd.call(this, this.el);
+        }, duration);
+    }
+    _animateSidenavOut() {
+        const endPercent = this.options.edge === 'left' ? -1 : 1;
+        // let slideOutPercent = 0;
+        // if (this.isDragged) {
+        //   // @todo unused variable
+        //   slideOutPercent =
+        //     this.options.edge === 'left'
+        //       ? endPercent + this.percentOpen
+        //       : endPercent - this.percentOpen;
+        // }
+        const duration = this.options.outDuration;
+        this.el.style.transition = `transform ${duration}ms ease`; // easeOutQuad
+        // to
+        this.el.style.transform = 'translateX(' + endPercent * 100 + '%)';
+        setTimeout(() => {
+            if (typeof this.options.onCloseEnd === 'function')
+                this.options.onCloseEnd.call(this, this.el);
+        }, duration);
+    }
+    _animateOverlayIn() {
+        let start = 0;
+        if (this.isDragged)
+            start = this.percentOpen;
+        else
+            this._overlay.style.display = 'block';
+        // Animation
+        const duration = this.options.inDuration;
+        // from
+        this._overlay.style.transition = 'none';
+        this._overlay.style.opacity = start.toString();
+        // easeOutQuad
+        setTimeout(() => {
+            this._overlay.style.transition = `opacity ${duration}ms ease`;
+            // to
+            this._overlay.style.opacity = '1';
+        }, 1);
+    }
+    _animateOverlayOut() {
+        const duration = this.options.outDuration;
+        // easeOutQuad
+        this._overlay.style.transition = `opacity ${duration}ms ease`;
+        // to
+        this._overlay.style.opacity = '0';
+        setTimeout(() => {
+            this._overlay.style.display = 'none';
+        }, duration);
+    }
+    _setAriaHidden = () => {
+        this.el.ariaHidden = this.isOpen ? 'false' : 'true';
+        const navWrapper = document.querySelector('.nav-wrapper ul');
+        if (navWrapper)
+            navWrapper.ariaHidden = this.isOpen.toString();
+    };
+    _setTabIndex = () => {
+        const navLinks = document.querySelectorAll('.nav-wrapper ul li a');
+        const sideNavLinks = document.querySelectorAll('.sidenav li a');
+        if (navLinks)
+            navLinks.forEach((navLink) => {
+                navLink.tabIndex = this.isOpen ? -1 : 0;
+            });
+        if (sideNavLinks)
+            sideNavLinks.forEach((sideNavLink) => {
+                sideNavLink.tabIndex = this.isOpen ? 0 : -1;
+            });
+    };
+    static {
+        Sidenav._sidenavs = [];
+    }
+}
+
+const _defaults$7 = {
+    duration: 300,
+    onShow: null,
+    swipeable: false,
+    responsiveThreshold: Infinity // breakpoint for swipeable
+};
+class Tabs extends Component {
+    _tabLinks;
+    _index;
+    _indicator;
+    _tabWidth;
+    _tabsWidth;
+    _tabsCarousel;
+    _activeTabLink;
+    _content;
+    constructor(el, options) {
+        super(el, options, Tabs);
+        this.el['M_Tabs'] = this;
+        this.options = {
+            ...Tabs.defaults,
+            ...options
+        };
+        this._tabLinks = this.el.querySelectorAll('li.tab > a');
+        this._index = 0;
+        this._setupActiveTabLink();
+        if (this.options.swipeable) {
+            this._setupSwipeableTabs();
+        }
+        else {
+            this._setupNormalTabs();
+        }
+        // Setup tabs indicator after content to ensure accurate widths
+        this._setTabsAndTabWidth();
+        this._createIndicator();
+        this._setupEventHandlers();
+    }
+    static get defaults() {
+        return _defaults$7;
+    }
+    /**
+     * Initializes instances of Tabs.
+     * @param els HTML elements.
+     * @param options Component options.
+     */
+    static init(els, options = {}) {
+        return super.init(els, options, Tabs);
+    }
+    static getInstance(el) {
+        return el['M_Tabs'];
+    }
+    destroy() {
+        this._removeEventHandlers();
+        this._indicator.parentNode.removeChild(this._indicator);
+        if (this.options.swipeable) {
+            this._teardownSwipeableTabs();
+        }
+        else {
+            this._teardownNormalTabs();
+        }
+        this.el['M_Tabs'] = undefined;
+    }
+    /**
+     * The index of tab that is currently shown.
+     */
+    get index() {
+        return this._index;
+    }
+    _setupEventHandlers() {
+        window.addEventListener('resize', this._handleWindowResize);
+        this.el.addEventListener('click', this._handleTabClick);
+    }
+    _removeEventHandlers() {
+        window.removeEventListener('resize', this._handleWindowResize);
+        this.el.removeEventListener('click', this._handleTabClick);
+    }
+    _handleWindowResize = () => {
+        this._setTabsAndTabWidth();
+        if (this._tabWidth !== 0 && this._tabsWidth !== 0) {
+            this._indicator.style.left = this._calcLeftPos(this._activeTabLink) + 'px';
+            this._indicator.style.right = this._calcRightPos(this._activeTabLink) + 'px';
+        }
+    };
+    _handleTabClick = (e) => {
+        let tabLink = e.target;
+        if (!tabLink)
+            return;
+        let tab = tabLink.parentElement;
+        while (tab && !tab.classList.contains('tab')) {
+            tabLink = tabLink.parentElement;
+            tab = tab.parentElement;
+        }
+        // Handle click on tab link only
+        if (!tabLink || !tab.classList.contains('tab'))
+            return;
+        // is disabled?
+        if (tab.classList.contains('disabled')) {
+            e.preventDefault();
+            return;
+        }
+        // Act as regular link if target attribute is specified.
+        if (tabLink.hasAttribute('target'))
+            return;
+        // Make the old tab inactive.
+        this._activeTabLink.classList.remove('active');
+        const _oldContent = this._content;
+        // Update the variables with the new link and content
+        this._activeTabLink = tabLink;
+        if (tabLink.hash)
+            this._content = document.querySelector(tabLink.hash);
+        this._tabLinks = this.el.querySelectorAll('li.tab > a');
+        // Make the tab active
+        this._activeTabLink.classList.add('active');
+        const prevIndex = this._index;
+        this._index = Math.max(Array.from(this._tabLinks).indexOf(tabLink), 0);
+        // Swap content
+        if (this.options.swipeable) {
+            if (this._tabsCarousel) {
+                this._tabsCarousel.set(this._index, () => {
+                    if (typeof this.options.onShow === 'function')
+                        this.options.onShow.call(this, this._content);
+                });
+            }
+        }
+        else {
+            if (this._content) {
+                this._content.style.display = 'block';
+                this._content.classList.add('active');
+                if (typeof this.options.onShow === 'function')
+                    this.options.onShow.call(this, this._content);
+                if (_oldContent && _oldContent !== this._content) {
+                    _oldContent.style.display = 'none';
+                    _oldContent.classList.remove('active');
+                }
+            }
+        }
+        // Update widths after content is swapped (scrollbar bugfix)
+        this._setTabsAndTabWidth();
+        this._animateIndicator(prevIndex);
+        e.preventDefault();
+    };
+    _createIndicator() {
+        const indicator = document.createElement('li');
+        indicator.classList.add('indicator');
+        this.el.appendChild(indicator);
+        this._indicator = indicator;
+        this._indicator.style.left = this._calcLeftPos(this._activeTabLink) + 'px';
+        this._indicator.style.right = this._calcRightPos(this._activeTabLink) + 'px';
+    }
+    _setupActiveTabLink() {
+        // If the location.hash matches one of the links, use that as the active tab.
+        this._activeTabLink = Array.from(this._tabLinks).find((a) => a.getAttribute('href') === location.hash);
+        // If no match is found, use the first link or any with class 'active' as the initial active tab.
+        if (!this._activeTabLink) {
+            let activeTabLink = this.el.querySelector('li.tab a.active');
+            if (!activeTabLink) {
+                activeTabLink = this.el.querySelector('li.tab a');
+            }
+            this._activeTabLink = activeTabLink;
+        }
+        Array.from(this._tabLinks).forEach((a) => a.classList.remove('active'));
+        this._activeTabLink.classList.add('active');
+        this._index = Math.max(Array.from(this._tabLinks).indexOf(this._activeTabLink), 0);
+        if (this._activeTabLink && this._activeTabLink.hash) {
+            this._content = document.querySelector(this._activeTabLink.hash);
+            if (this._content)
+                this._content.classList.add('active');
+        }
+    }
+    _setupSwipeableTabs() {
+        // Change swipeable according to responsive threshold
+        if (window.innerWidth > this.options.responsiveThreshold)
+            this.options.swipeable = false;
+        const tabsContent = [];
+        this._tabLinks.forEach((a) => {
+            if (a.hash) {
+                const currContent = document.querySelector(a.hash);
+                currContent.classList.add('carousel-item');
+                tabsContent.push(currContent);
+            }
+        });
+        // Create Carousel-Wrapper around Tab-Contents
+        const tabsWrapper = document.createElement('div');
+        tabsWrapper.classList.add('tabs-content', 'carousel', 'carousel-slider');
+        // Wrap around
+        tabsContent[0].parentElement.insertBefore(tabsWrapper, tabsContent[0]);
+        tabsContent.forEach((tabContent) => {
+            tabsWrapper.appendChild(tabContent);
+            tabContent.style.display = '';
+        });
+        // Keep active tab index to set initial carousel slide
+        const tab = this._activeTabLink.parentElement;
+        const activeTabIndex = Array.from(tab.parentNode.children).indexOf(tab);
+        this._tabsCarousel = Carousel.init(tabsWrapper, {
+            fullWidth: true,
+            noWrap: true,
+            onCycleTo: (item) => {
+                const prevIndex = this._index;
+                this._index = Array.from(item.parentNode.children).indexOf(item);
+                this._activeTabLink.classList.remove('active');
+                this._activeTabLink = Array.from(this._tabLinks)[this._index];
+                this._activeTabLink.classList.add('active');
+                this._animateIndicator(prevIndex);
+                if (typeof this.options.onShow === 'function')
+                    this.options.onShow.call(this, this._content);
+            }
+        });
+        // Set initial carousel slide to active tab
+        this._tabsCarousel.set(activeTabIndex);
+    }
+    _teardownSwipeableTabs() {
+        const tabsWrapper = this._tabsCarousel.el;
+        this._tabsCarousel.destroy();
+        // Unwrap
+        tabsWrapper.append(tabsWrapper.parentElement);
+        tabsWrapper.remove();
+    }
+    _setupNormalTabs() {
+        // Hide Tabs Content
+        Array.from(this._tabLinks).forEach((a) => {
+            if (a === this._activeTabLink)
+                return;
+            if (a.hash) {
+                const currContent = document.querySelector(a.hash);
+                if (currContent)
+                    currContent.style.display = 'none';
+            }
+        });
+    }
+    _teardownNormalTabs() {
+        // show Tabs Content
+        this._tabLinks.forEach((a) => {
+            if (a.hash) {
+                const currContent = document.querySelector(a.hash);
+                if (currContent)
+                    currContent.style.display = '';
+            }
+        });
+    }
+    _setTabsAndTabWidth() {
+        this._tabsWidth = this.el.getBoundingClientRect().width;
+        this._tabWidth = Math.max(this._tabsWidth, this.el.scrollWidth) / this._tabLinks.length;
+    }
+    _calcRightPos(el) {
+        return Math.ceil(this._tabsWidth - el.offsetLeft - el.getBoundingClientRect().width);
+    }
+    _calcLeftPos(el) {
+        return Math.floor(el.offsetLeft);
+    }
+    /**
+     * Recalculate tab indicator position. This is useful when
+     * the indicator position is not correct.
+     */
+    updateTabIndicator() {
+        this._setTabsAndTabWidth();
+        this._animateIndicator(this._index);
+    }
+    _animateIndicator(prevIndex) {
+        let leftDelay = 0, rightDelay = 0;
+        const isMovingLeftOrStaying = this._index - prevIndex >= 0;
+        if (isMovingLeftOrStaying)
+            leftDelay = 90;
+        else
+            rightDelay = 90;
+        // in v1: easeOutQuad
+        this._indicator.style.transition = `
+      left ${this.options.duration}ms ease-out ${leftDelay}ms,
+      right ${this.options.duration}ms ease-out ${rightDelay}ms`;
+        this._indicator.style.left = this._calcLeftPos(this._activeTabLink) + 'px';
+        this._indicator.style.right = this._calcRightPos(this._activeTabLink) + 'px';
+    }
+    /**
+     * Show tab content that corresponds to the tab with the id.
+     * @param tabId The id of the tab that you want to switch to.
+     */
+    select(tabId) {
+        const tab = Array.from(this._tabLinks).find((a) => a.getAttribute('href') === '#' + tabId);
+        if (tab)
+            tab.click();
+    }
+}
+
+const _defaults$6 = {
+    onOpen: null,
+    onClose: null
+};
+class TapTarget extends Component {
+    /**
+     * If the tap target is open.
+     */
+    isOpen;
+    static _taptargets;
+    wrapper;
+    // private _origin: HTMLElement;
+    originEl;
+    waveEl;
+    contentEl;
+    constructor(el, options) {
+        super(el, options, TapTarget);
+        this.el['M_TapTarget'] = this;
+        this.options = {
+            ...TapTarget.defaults,
+            ...options
+        };
+        this.isOpen = false;
+        // setup
+        this.originEl = document.querySelector(`#${el.dataset.target}`);
+        this.originEl.tabIndex = 0;
+        this._setup();
+        this._calculatePositioning();
+        this._setupEventHandlers();
+        TapTarget._taptargets.push(this);
+    }
+    static get defaults() {
+        return _defaults$6;
+    }
+    /**
+     * Initializes instances of TapTarget.
+     * @param els HTML elements.
+     * @param options Component options.
+     */
+    static init(els, options = {}) {
+        return super.init(els, options, TapTarget);
+    }
+    static getInstance(el) {
+        return el['M_TapTarget'];
+    }
+    destroy() {
+        this._removeEventHandlers();
+        this.el['M_TapTarget'] = undefined;
+        const index = TapTarget._taptargets.indexOf(this);
+        if (index >= 0) {
+            TapTarget._taptargets.splice(index, 1);
+        }
+    }
+    _setupEventHandlers() {
+        this.originEl.addEventListener('click', this._handleTargetToggle);
+        this.originEl.addEventListener('keypress', this._handleKeyboardInteraction, true);
+        // this.originEl.addEventListener('click', this._handleOriginClick);
+        // Resize
+        window.addEventListener('resize', this._handleThrottledResize);
+    }
+    _removeEventHandlers() {
+        this.originEl.removeEventListener('click', this._handleTargetToggle);
+        this.originEl.removeEventListener('keypress', this._handleKeyboardInteraction, true);
+        // this.originEl.removeEventListener('click', this._handleOriginClick);
+        window.removeEventListener('resize', this._handleThrottledResize);
+    }
+    _handleThrottledResize = Utils.throttle(function () {
+        this._handleResize();
+    }, 200).bind(this);
+    _handleKeyboardInteraction = (e) => {
+        if (Utils.keys.ENTER.includes(e.key)) {
+            this._handleTargetToggle();
+        }
+    };
+    _handleTargetToggle = () => {
+        if (!this.isOpen)
+            this.open();
+        else
+            this.close();
+    };
+    /*_handleOriginClick = () => {
+      this.close();
+    }*/
+    _handleResize = () => {
+        this._calculatePositioning();
+    };
+    _handleDocumentClick = (e) => {
+        if (e.target.closest(`#${this.el.dataset.target}`) !== this.originEl &&
+            !e.target.closest('.tap-target-wrapper')) {
+            this.close();
+            // e.preventDefault();
+            // e.stopPropagation();
+        }
+    };
+    _setup() {
+        // Creating tap target
+        this.wrapper = this.el.parentElement;
+        this.waveEl = this.wrapper.querySelector('.tap-target-wave');
+        this.el.parentElement.ariaExpanded = 'false';
+        this.originEl.style.zIndex = '1002';
+        // this.originEl = this.wrapper.querySelector('.tap-target-origin');
+        this.contentEl = this.el.querySelector('.tap-target-content');
+        // Creating wrapper
+        if (!this.wrapper.classList.contains('.tap-target-wrapper')) {
+            this.wrapper = document.createElement('div');
+            this.wrapper.classList.add('tap-target-wrapper');
+            this.el.before(this.wrapper);
+            this.wrapper.append(this.el);
+        }
+        // Creating content
+        if (!this.contentEl) {
+            this.contentEl = document.createElement('div');
+            this.contentEl.classList.add('tap-target-content');
+            this.el.append(this.contentEl);
+        }
+        // Creating foreground wave
+        if (!this.waveEl) {
+            this.waveEl = document.createElement('div');
+            this.waveEl.classList.add('tap-target-wave');
+            // Creating origin
+            /*if (!this.originEl) {
+              this.originEl = <HTMLElement>this._origin.cloneNode(true); // .clone(true, true);
+              this.originEl.classList.add('tap-target-origin');
+              this.originEl.removeAttribute('id');
+              this.originEl.removeAttribute('style');
+              this.waveEl.append(this.originEl);
+            }*/
+            this.wrapper.append(this.waveEl);
+        }
+    }
+    _offset(el) {
+        const box = el.getBoundingClientRect();
+        const docElem = document.documentElement;
+        return {
+            top: box.top + window.pageYOffset - docElem.clientTop,
+            left: box.left + window.pageXOffset - docElem.clientLeft
+        };
+    }
+    _calculatePositioning() {
+        // Element or parent is fixed position?
+        let isFixed = getComputedStyle(this.originEl).position === 'fixed';
+        if (!isFixed) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            let currentElem = this.originEl;
+            const parents = [];
+            while ((currentElem = currentElem.parentNode) && currentElem !== document)
+                parents.push(currentElem);
+            for (let i = 0; i < parents.length; i++) {
+                isFixed = getComputedStyle(parents[i]).position === 'fixed';
+                if (isFixed)
+                    break;
+            }
+        }
+        // Calculating origin
+        const originWidth = this.originEl.offsetWidth;
+        const originHeight = this.originEl.offsetHeight;
+        const originTop = isFixed
+            ? this._offset(this.originEl).top - Utils.getDocumentScrollTop()
+            : this._offset(this.originEl).top;
+        const originLeft = isFixed
+            ? this._offset(this.originEl).left - Utils.getDocumentScrollLeft()
+            : this._offset(this.originEl).left;
+        // Calculating screen
+        const windowWidth = window.innerWidth;
+        const windowHeight = window.innerHeight;
+        const scrollBarWidth = windowWidth - document.documentElement.clientWidth;
+        const centerX = windowWidth / 2;
+        const centerY = windowHeight / 2;
+        const isLeft = originLeft <= centerX;
+        const isRight = originLeft > centerX;
+        const isTop = originTop <= centerY;
+        const isBottom = originTop > centerY;
+        const isCenterX = originLeft >= windowWidth * 0.25 && originLeft <= windowWidth * 0.75;
+        // Calculating tap target
+        const tapTargetWidth = this.el.offsetWidth;
+        const tapTargetHeight = this.el.offsetHeight;
+        const tapTargetTop = originTop + originHeight / 2 - tapTargetHeight / 2;
+        const tapTargetLeft = originLeft + originWidth / 2 - tapTargetWidth / 2;
+        const tapTargetPosition = isFixed ? 'fixed' : 'absolute';
+        // Calculating content
+        const tapTargetTextWidth = isCenterX ? tapTargetWidth : tapTargetWidth / 2 + originWidth;
+        const tapTargetTextHeight = tapTargetHeight / 2;
+        const tapTargetTextTop = isTop ? tapTargetHeight / 2 : 0;
+        const tapTargetTextBottom = 0;
+        const tapTargetTextLeft = isLeft && !isCenterX ? tapTargetWidth / 2 - originWidth : 0;
+        const tapTargetTextRight = 0;
+        const tapTargetTextPadding = originWidth;
+        const tapTargetTextAlign = isBottom ? 'bottom' : 'top';
+        // Calculating wave
+        const tapTargetWaveWidth = originWidth > originHeight ? originWidth * 2 : originWidth * 2;
+        const tapTargetWaveHeight = tapTargetWaveWidth;
+        const tapTargetWaveTop = tapTargetHeight / 2 - tapTargetWaveHeight / 2;
+        const tapTargetWaveLeft = tapTargetWidth / 2 - tapTargetWaveWidth / 2;
+        // Setting tap target
+        this.wrapper.style.top = isTop ? tapTargetTop + 'px' : '';
+        this.wrapper.style.right = isRight
+            ? windowWidth - tapTargetLeft - tapTargetWidth - scrollBarWidth + 'px'
+            : '';
+        this.wrapper.style.bottom = isBottom
+            ? windowHeight - tapTargetTop - tapTargetHeight + 'px'
+            : '';
+        this.wrapper.style.left = isLeft ? tapTargetLeft + 'px' : '';
+        this.wrapper.style.position = tapTargetPosition;
+        // Setting content
+        this.contentEl.style.width = tapTargetTextWidth + 'px';
+        this.contentEl.style.height = tapTargetTextHeight + 'px';
+        this.contentEl.style.top = tapTargetTextTop + 'px';
+        this.contentEl.style.right = tapTargetTextRight + 'px';
+        this.contentEl.style.bottom = tapTargetTextBottom + 'px';
+        this.contentEl.style.left = tapTargetTextLeft + 'px';
+        this.contentEl.style.padding = tapTargetTextPadding + 'px';
+        this.contentEl.style.verticalAlign = tapTargetTextAlign;
+        // Setting wave
+        this.waveEl.style.top = tapTargetWaveTop + 'px';
+        this.waveEl.style.left = tapTargetWaveLeft + 'px';
+        this.waveEl.style.width = tapTargetWaveWidth + 'px';
+        this.waveEl.style.height = tapTargetWaveHeight + 'px';
+    }
+    /**
+     * Open Tap Target.
+     */
+    open = () => {
+        if (this.isOpen)
+            return;
+        // onOpen callback
+        if (typeof this.options.onOpen === 'function') {
+            this.options.onOpen.call(this, this.originEl);
+        }
+        this.isOpen = true;
+        this.wrapper.classList.add('open');
+        this.wrapper.ariaExpanded = 'true';
+        document.body.addEventListener('click', this._handleDocumentClick, true);
+        document.body.addEventListener('keypress', this._handleDocumentClick, true);
+        document.body.addEventListener('touchend', this._handleDocumentClick);
+    };
+    /**
+     * Close Tap Target.
+     */
+    close = () => {
+        if (!this.isOpen)
+            return;
+        // onClose callback
+        if (typeof this.options.onClose === 'function') {
+            this.options.onClose.call(this, this.originEl);
+        }
+        this.isOpen = false;
+        this.wrapper.classList.remove('open');
+        this.wrapper.ariaExpanded = 'false';
+        document.body.removeEventListener('click', this._handleDocumentClick, true);
+        document.body.removeEventListener('keypress', this._handleDocumentClick, true);
+        document.body.removeEventListener('touchend', this._handleDocumentClick);
+    };
+    static {
+        TapTarget._taptargets = [];
+    }
+}
+
+const _defaults$5 = {
+    dialRadius: 135,
+    outerRadius: 105,
+    innerRadius: 70,
+    tickRadius: 20,
+    duration: 350,
+    container: null,
+    defaultTime: 'now', // default time, 'now' or '13:14' e.g.
+    fromNow: 0, // Millisecond offset from the defaultTime
+    showClearBtn: false,
+    autoSubmit: true,
+    // internationalization
+    i18n: {
+        cancel: 'Cancel',
+        clear: 'Clear',
+        done: 'Ok'
+    },
+    twelveHour: true, // change to 12 hour AM/PM clock from 24 hour
+    vibrate: true, // vibrate the device when dragging clock hand
+    // Callbacks
+    onSelect: null,
+    onInputInteraction: null,
+    onDone: null,
+    onCancel: null,
+};
+class Timepicker extends Component {
+    id;
+    containerEl;
+    plate;
+    digitalClock;
+    inputHours;
+    inputMinutes;
+    x0;
+    y0;
+    moved;
+    dx;
+    dy;
+    /**
+     * Current view on the timepicker.
+     * @default 'hours'
+     */
+    currentView;
+    hand;
+    minutesView;
+    hours;
+    minutes;
+    /** The selected time. */
+    time;
+    /**
+     * If the time is AM or PM on twelve-hour clock.
+     * @default 'PM'
+     */
+    amOrPm;
+    static _template;
+    /** Vibrate device when dragging clock hand. */
+    vibrate;
+    _canvas;
+    hoursView;
+    spanAmPm;
+    footer;
+    _amBtn;
+    _pmBtn;
+    bg;
+    bearing;
+    g;
+    toggleViewTimer;
+    vibrateTimer;
+    constructor(el, options) {
+        super(el, options, Timepicker);
+        this.el['M_Timepicker'] = this;
+        this.options = {
+            ...Timepicker.defaults,
+            ...options
+        };
+        this.id = Utils.guid();
+        this._insertHTMLIntoDOM();
+        this._setupVariables();
+        this._setupEventHandlers();
+        this._clockSetup();
+        this._pickerSetup();
+    }
+    static get defaults() {
+        return _defaults$5;
+    }
+    /**
+     * Initializes instances of Timepicker.
+     * @param els HTML elements.
+     * @param options Component options.
+     */
+    static init(els, options = {}) {
+        return super.init(els, options, Timepicker);
+    }
+    static _addLeadingZero(num) {
+        return (num < 10 ? '0' : '') + num;
+    }
+    static _createSVGEl(name) {
+        const svgNS = 'http://www.w3.org/2000/svg';
+        return document.createElementNS(svgNS, name);
+    }
+    static _Pos(e) {
+        if (e.type.startsWith('touch') && e.targetTouches.length >= 1) {
+            return {
+                x: e.targetTouches[0].clientX,
+                y: e.targetTouches[0].clientY
+            };
+        }
+        // mouse event
+        return { x: e.clientX, y: e.clientY };
+    }
+    static getInstance(el) {
+        return el['M_Timepicker'];
+    }
+    destroy() {
+        this._removeEventHandlers();
+        this.containerEl.remove();
+        this.el['M_Timepicker'] = undefined;
+    }
+    _setupEventHandlers() {
+        this.el.addEventListener('click', this._handleInputClick);
+        this.el.addEventListener('keydown', this._handleInputKeydown);
+        this.plate.addEventListener('mousedown', this._handleClockClickStart);
+        this.plate.addEventListener('touchstart', this._handleClockClickStart);
+        this.digitalClock.addEventListener('keyup', this._inputFromTextField);
+        this.inputHours.addEventListener('focus', () => this.showView('hours'));
+        this.inputHours.addEventListener('focusout', () => this.formatHours());
+        this.inputMinutes.addEventListener('focus', () => this.showView('minutes'));
+        this.inputMinutes.addEventListener('focusout', () => this.formatMinutes());
+    }
+    _removeEventHandlers() {
+        this.el.removeEventListener('click', this._handleInputClick);
+        this.el.removeEventListener('keydown', this._handleInputKeydown);
+    }
+    _handleInputClick = () => {
+        this.inputHours.focus();
+        if (typeof this.options.onInputInteraction === 'function')
+            this.options.onInputInteraction.call(this);
+    };
+    _handleInputKeydown = (e) => {
+        if (Utils.keys.ENTER.includes(e.key)) {
+            e.preventDefault();
+            this.inputHours.focus();
+            if (typeof this.options.onInputInteraction === 'function')
+                this.options.onInputInteraction.call(this);
+        }
+    };
+    _handleTimeInputEnterKey = (e) => {
+        if (Utils.keys.ENTER.includes(e.key)) {
+            e.preventDefault();
+            this._inputFromTextField();
+        }
+    };
+    _handleClockClickStart = (e) => {
+        e.preventDefault();
+        const clockPlateBR = this.plate.getBoundingClientRect();
+        const offset = { x: clockPlateBR.left, y: clockPlateBR.top };
+        this.x0 = offset.x + this.options.dialRadius;
+        this.y0 = offset.y + this.options.dialRadius;
+        this.moved = false;
+        const clickPos = Timepicker._Pos(e);
+        this.dx = clickPos.x - this.x0;
+        this.dy = clickPos.y - this.y0;
+        // Set clock hands
+        this.setHand(this.dx, this.dy, false);
+        // Mousemove on document
+        document.addEventListener('mousemove', this._handleDocumentClickMove);
+        document.addEventListener('touchmove', this._handleDocumentClickMove);
+        // Mouseup on document
+        document.addEventListener('mouseup', this._handleDocumentClickEnd);
+        document.addEventListener('touchend', this._handleDocumentClickEnd);
+    };
+    _handleDocumentClickMove = (e) => {
+        e.preventDefault();
+        const clickPos = Timepicker._Pos(e);
+        const x = clickPos.x - this.x0;
+        const y = clickPos.y - this.y0;
+        this.moved = true;
+        this.setHand(x, y, false);
+    };
+    _handleDocumentClickEnd = (e) => {
+        e.preventDefault();
+        document.removeEventListener('mouseup', this._handleDocumentClickEnd);
+        document.removeEventListener('touchend', this._handleDocumentClickEnd);
+        const clickPos = Timepicker._Pos(e);
+        const x = clickPos.x - this.x0;
+        const y = clickPos.y - this.y0;
+        if (this.moved && x === this.dx && y === this.dy) {
+            this.setHand(x, y);
+        }
+        if (this.currentView === 'hours') {
+            this.inputMinutes.focus();
+            this.showView('minutes', this.options.duration / 2);
+        }
+        else {
+            // this.minutesView.classList.add('timepicker-dial-out');
+            setTimeout(() => {
+                if (this.options.autoSubmit)
+                    this.done();
+            }, this.options.duration / 2);
+        }
+        if (typeof this.options.onSelect === 'function') {
+            this.options.onSelect.call(this, this.hours, this.minutes);
+        }
+        // Unbind mousemove event
+        document.removeEventListener('mousemove', this._handleDocumentClickMove);
+        document.removeEventListener('touchmove', this._handleDocumentClickMove);
+    };
+    _insertHTMLIntoDOM() {
+        const template = document.createElement('template');
+        template.innerHTML = Timepicker._template.trim();
+        this.containerEl = template.content.firstChild;
+        this.containerEl.id = 'container-' + this.id;
+        // Append popover to input by default
+        const optEl = this.options.container;
+        const containerEl = optEl instanceof HTMLElement ? optEl : document.querySelector(optEl);
+        if (this.options.container && !!containerEl) {
+            containerEl.append(this.containerEl);
+        }
+        else {
+            this.el.parentElement.appendChild(this.containerEl);
+        }
+    }
+    _setupVariables() {
+        this.currentView = 'hours';
+        this.vibrate = navigator.vibrate
+            ? 'vibrate'
+            : navigator['webkitVibrate']
+                ? 'webkitVibrate'
+                : null;
+        this._canvas = this.containerEl.querySelector('.timepicker-canvas');
+        this.plate = this.containerEl.querySelector('.timepicker-plate');
+        this.digitalClock = this.containerEl.querySelector('.timepicker-display-column');
+        this.hoursView = this.containerEl.querySelector('.timepicker-hours');
+        this.minutesView = this.containerEl.querySelector('.timepicker-minutes');
+        this.inputHours = this.containerEl.querySelector('.timepicker-input-hours');
+        this.inputMinutes = this.containerEl.querySelector('.timepicker-input-minutes');
+        this.spanAmPm = this.containerEl.querySelector('.timepicker-span-am-pm');
+        this.footer = this.containerEl.querySelector('.timepicker-footer');
+        this.amOrPm = 'PM';
+    }
+    _createButton(text, visibility) {
+        const button = document.createElement('button');
+        button.classList.add('btn', 'btn-flat', 'waves-effect', 'text');
+        button.style.visibility = visibility;
+        button.type = 'button';
+        button.tabIndex = -1;
+        button.innerText = text;
+        return button;
+    }
+    _pickerSetup() {
+        const clearButton = this._createButton(this.options.i18n.clear, this.options.showClearBtn ? '' : 'hidden');
+        clearButton.classList.add('timepicker-clear');
+        clearButton.addEventListener('click', this.clear);
+        this.footer.appendChild(clearButton);
+        if (!this.options.autoSubmit) {
+            const confirmationBtnsContainer = document.createElement('div');
+            confirmationBtnsContainer.classList.add('confirmation-btns');
+            this.footer.append(confirmationBtnsContainer);
+            const cancelButton = this._createButton(this.options.i18n.cancel, '');
+            cancelButton.classList.add('timepicker-close');
+            cancelButton.addEventListener('click', this.close);
+            confirmationBtnsContainer.appendChild(cancelButton);
+            const doneButton = this._createButton(this.options.i18n.done, '');
+            doneButton.classList.add('timepicker-close');
+            doneButton.addEventListener('click', this.done);
+            confirmationBtnsContainer.appendChild(doneButton);
+        }
+        this._updateTimeFromInput();
+        this.showView('hours');
+    }
+    _clockSetup() {
+        if (this.options.twelveHour) {
+            // AM Button
+            this._amBtn = document.createElement('div');
+            this._amBtn.classList.add('am-btn', 'btn');
+            this._amBtn.innerText = 'AM';
+            this._amBtn.tabIndex = 0;
+            this._amBtn.addEventListener('click', this._handleAmPmClick);
+            this._amBtn.addEventListener('keypress', this._handleAmPmKeypress);
+            this.spanAmPm.appendChild(this._amBtn);
+            // PM Button
+            this._pmBtn = document.createElement('div');
+            this._pmBtn.classList.add('pm-btn', 'btn');
+            this._pmBtn.innerText = 'PM';
+            this._pmBtn.tabIndex = 0;
+            this._pmBtn.addEventListener('click', this._handleAmPmClick);
+            this._pmBtn.addEventListener('keypress', this._handleAmPmKeypress);
+            this.spanAmPm.appendChild(this._pmBtn);
+        }
+        this._buildHoursView();
+        this._buildMinutesView();
+        this._buildSVGClock();
+    }
+    _buildSVGClock() {
+        // Draw clock hands and others
+        const dialRadius = this.options.dialRadius;
+        const tickRadius = this.options.tickRadius;
+        const diameter = dialRadius * 2;
+        const svg = Timepicker._createSVGEl('svg');
+        svg.setAttribute('class', 'timepicker-svg');
+        svg.setAttribute('width', diameter.toString());
+        svg.setAttribute('height', diameter.toString());
+        const g = Timepicker._createSVGEl('g');
+        g.setAttribute('transform', 'translate(' + dialRadius + ',' + dialRadius + ')');
+        const bearing = Timepicker._createSVGEl('circle');
+        bearing.setAttribute('class', 'timepicker-canvas-bearing');
+        bearing.setAttribute('cx', '0');
+        bearing.setAttribute('cy', '0');
+        bearing.setAttribute('r', '4');
+        const hand = Timepicker._createSVGEl('line');
+        hand.setAttribute('x1', '0');
+        hand.setAttribute('y1', '0');
+        const bg = Timepicker._createSVGEl('circle');
+        bg.setAttribute('class', 'timepicker-canvas-bg');
+        bg.setAttribute('r', tickRadius.toString());
+        g.appendChild(hand);
+        g.appendChild(bg);
+        g.appendChild(bearing);
+        svg.appendChild(g);
+        this._canvas.appendChild(svg);
+        this.hand = hand;
+        this.bg = bg;
+        this.bearing = bearing;
+        this.g = g;
+    }
+    _buildHoursView() {
+        // const $tick = document.createElement('div');
+        // $tick.classList.add('timepicker-tick');
+        // Hours view
+        if (this.options.twelveHour) {
+            for (let i = 1; i < 13; i += 1) {
+                // const tick = <HTMLElement>$tick.cloneNode(true);
+                const radian = (i / 6) * Math.PI;
+                const radius = this.options.outerRadius;
+                this._buildHoursTick(i, radian, radius);
+            }
+        }
+        else {
+            for (let i = 0; i < 24; i += 1) {
+                // const tick = <HTMLElement>$tick.cloneNode(true);
+                const radian = (i / 6) * Math.PI;
+                const inner = i > 0 && i < 13;
+                const radius = inner ? this.options.innerRadius : this.options.outerRadius;
+                this._buildHoursTick(i, radian, radius);
+            }
+        }
+    }
+    _buildHoursTick(i, radian, radius) {
+        const tick = document.createElement('div');
+        tick.classList.add('timepicker-tick');
+        tick.style.left =
+            this.options.dialRadius + Math.sin(radian) * radius - this.options.tickRadius + 'px';
+        tick.style.top =
+            this.options.dialRadius - Math.cos(radian) * radius - this.options.tickRadius + 'px';
+        tick.innerHTML = i === 0 ? '00' : i.toString();
+        this.hoursView.appendChild(tick);
+    }
+    _buildMinutesView() {
+        const _tick = document.createElement('div');
+        _tick.classList.add('timepicker-tick');
+        // Minutes view
+        for (let i = 0; i < 60; i += 5) {
+            const tick = _tick.cloneNode(true);
+            const radian = (i / 30) * Math.PI;
+            tick.style.left =
+                this.options.dialRadius +
+                    Math.sin(radian) * this.options.outerRadius -
+                    this.options.tickRadius +
+                    'px';
+            tick.style.top =
+                this.options.dialRadius -
+                    Math.cos(radian) * this.options.outerRadius -
+                    this.options.tickRadius +
+                    'px';
+            tick.innerHTML = Timepicker._addLeadingZero(i);
+            this.minutesView.appendChild(tick);
+        }
+    }
+    _handleAmPmClick = (e) => {
+        this._handleAmPmInteraction(e.target);
+    };
+    _handleAmPmKeypress = (e) => {
+        if (Utils.keys.ENTER.includes(e.key)) {
+            this._handleAmPmInteraction(e.target);
+        }
+    };
+    _handleAmPmInteraction = (e) => {
+        this.amOrPm = e.classList.contains('am-btn') ? 'AM' : 'PM';
+        this._updateAmPmView();
+    };
+    _updateAmPmView() {
+        if (this.options.twelveHour) {
+            if (this.amOrPm === 'PM') {
+                this._amBtn.classList.remove('filled');
+                this._pmBtn.classList.add('filled');
+            }
+            else if (this.amOrPm === 'AM') {
+                this._amBtn.classList.add('filled');
+                this._pmBtn.classList.remove('filled');
+            }
+        }
+    }
+    _updateTimeFromInput() {
+        // Get the time
+        let value = ((this.el.value || this.options.defaultTime || '') + '').split(':');
+        if (this.options.twelveHour && !(typeof value[1] === 'undefined')) {
+            if (value[1].toUpperCase().indexOf('AM') > 0) {
+                this.amOrPm = 'AM';
+            }
+            else {
+                this.amOrPm = 'PM';
+            }
+            value[1] = value[1].replace('AM', '').replace('PM', '');
+        }
+        if (value[0] === 'now') {
+            const now = new Date(+new Date() + this.options.fromNow);
+            value = [now.getHours().toString(), now.getMinutes().toString()];
+            if (this.options.twelveHour) {
+                this.amOrPm = parseInt(value[0]) >= 12 && parseInt(value[0]) < 24 ? 'PM' : 'AM';
+            }
+        }
+        this.hours = +value[0] || 0;
+        this.minutes = +value[1] || 0;
+        this.inputHours.value = Timepicker._addLeadingZero(this.hours);
+        this.inputMinutes.value = Timepicker._addLeadingZero(this.minutes);
+        this._updateAmPmView();
+    }
+    /**
+     * Show hours or minutes view on timepicker.
+     * @param view The name of the view you want to switch to, 'hours' or 'minutes'.
+     * @param delay
+     */
+    showView = (view, delay = null) => {
+        if (view === 'minutes' && getComputedStyle(this.hoursView).visibility === 'visible') ;
+        const isHours = view === 'hours', nextView = isHours ? this.hoursView : this.minutesView, hideView = isHours ? this.minutesView : this.hoursView;
+        this.currentView = view;
+        /*if (isHours) {
+          this.inputHours.classList.add('text-primary');
+          this.inputMinutes.classList.remove('text-primary');
+        } else {
+          this.inputHours.classList.remove('text-primary');
+          this.inputMinutes.classList.add('text-primary');
+        }*/
+        // Transition view
+        hideView.classList.add('timepicker-dial-out');
+        nextView.style.visibility = 'visible';
+        nextView.classList.remove('timepicker-dial-out');
+        // Reset clock hand
+        this.resetClock(delay);
+        // After transitions ended
+        clearTimeout(this.toggleViewTimer);
+        this.toggleViewTimer = setTimeout(() => {
+            hideView.style.visibility = 'hidden';
+        }, this.options.duration);
+    };
+    resetClock(delay) {
+        const view = this.currentView, value = this[view], isHours = view === 'hours', unit = Math.PI / (isHours ? 6 : 30), radian = value * unit, radius = isHours && value > 0 && value < 13 ? this.options.innerRadius : this.options.outerRadius, x = Math.sin(radian) * radius, y = -Math.cos(radian) * radius;
+        if (delay) {
+            this._canvas?.classList.add('timepicker-canvas-out');
+            setTimeout(() => {
+                this._canvas?.classList.remove('timepicker-canvas-out');
+                this.setHand(x, y);
+            }, delay);
+        }
+        else {
+            this.setHand(x, y);
+        }
+    }
+    _inputFromTextField = () => {
+        const isHours = this.currentView === 'hours';
+        if (isHours && this.inputHours.value !== '') {
+            const value = parseInt(this.inputHours.value);
+            if (value > 0 && value < (this.options.twelveHour ? 13 : 24)) {
+                this.hours = value;
+            }
+            else {
+                this.setHoursDefault();
+            }
+            this.drawClockFromTimeInput(this.hours, isHours);
+        }
+        else if (!isHours && this.inputMinutes.value !== '') {
+            const value = parseInt(this.inputMinutes.value);
+            if (value >= 0 && value < 60) {
+                this.minutes = value;
+            }
+            else {
+                this.minutes = new Date().getMinutes();
+                this.inputMinutes.value = this.minutes.toString();
+            }
+            this.drawClockFromTimeInput(this.minutes, isHours);
+        }
+    };
+    drawClockFromTimeInput(value, isHours) {
+        const unit = Math.PI / (isHours ? 6 : 30);
+        const radian = value * unit;
+        let radius;
+        if (this.options.twelveHour) {
+            radius = this.options.outerRadius;
+        }
+        else {
+            radius =
+                isHours && value > 0 && value < 13 ? this.options.innerRadius : this.options.outerRadius;
+        }
+        this.setClockAttributes(radian, radius);
+    }
+    setHand(x, y, roundBy5 = false) {
+        const isHours = this.currentView === 'hours', unit = Math.PI / (isHours || roundBy5 ? 6 : 30), z = Math.sqrt(x * x + y * y), inner = isHours && z < (this.options.outerRadius + this.options.innerRadius) / 2;
+        let radian = Math.atan2(x, -y), radius = inner ? this.options.innerRadius : this.options.outerRadius;
+        if (this.options.twelveHour) {
+            radius = this.options.outerRadius;
+        }
+        // Radian should in range [0, 2PI]
+        if (radian < 0) {
+            radian = Math.PI * 2 + radian;
+        }
+        // Get the round value
+        let value = Math.round(radian / unit);
+        // Get the round radian
+        radian = value * unit;
+        // Correct the hours or minutes
+        if (this.options.twelveHour) {
+            if (isHours) {
+                if (value === 0)
+                    value = 12;
+            }
+            else {
+                if (roundBy5)
+                    value *= 5;
+                if (value === 60)
+                    value = 0;
+            }
+        }
+        else {
+            if (isHours) {
+                if (value === 12) {
+                    value = 0;
+                }
+                value = inner ? (value === 0 ? 12 : value) : value === 0 ? 0 : value + 12;
+            }
+            else {
+                if (roundBy5) {
+                    value *= 5;
+                }
+                if (value === 60) {
+                    value = 0;
+                }
+            }
+        }
+        // Once hours or minutes changed, vibrate the device
+        if (this[this.currentView] !== value) {
+            if (this.vibrate && this.options.vibrate) {
+                // Do not vibrate too frequently
+                if (!this.vibrateTimer) {
+                    navigator[this.vibrate](10);
+                    this.vibrateTimer = setTimeout(() => {
+                        this.vibrateTimer = null;
+                    }, 100);
+                }
+            }
+        }
+        this[this.currentView] = value;
+        if (isHours) {
+            this.inputHours.value = Timepicker._addLeadingZero(value);
+        }
+        else {
+            this.inputMinutes.value = Timepicker._addLeadingZero(value);
+        }
+        // Set clock hand and others' position
+        this.setClockAttributes(radian, radius);
+    }
+    setClockAttributes(radian, radius) {
+        const cx1 = Math.sin(radian) * (radius - this.options.tickRadius), cy1 = -Math.cos(radian) * (radius - this.options.tickRadius), cx2 = Math.sin(radian) * radius, cy2 = -Math.cos(radian) * radius;
+        this.hand.setAttribute('x2', cx1.toString());
+        this.hand.setAttribute('y2', cy1.toString());
+        this.bg.setAttribute('cx', cx2.toString());
+        this.bg.setAttribute('cy', cy2.toString());
+    }
+    formatHours() {
+        if (this.inputHours.value == '')
+            this.setHoursDefault();
+        this.inputHours.value = Timepicker._addLeadingZero(Number(this.inputHours.value));
+    }
+    formatMinutes() {
+        if (this.inputMinutes.value == '')
+            this.minutes = new Date().getMinutes();
+        this.inputMinutes.value = Timepicker._addLeadingZero(Number(this.inputMinutes.value));
+    }
+    setHoursDefault() {
+        this.hours = new Date().getHours();
+        this.inputHours.value = (this.hours % (this.options.twelveHour ? 12 : 24)).toString();
+    }
+    done = (clearValue = null) => {
+        // Set input value
+        const last = this.el.value;
+        let value = clearValue
+            ? ''
+            : Timepicker._addLeadingZero(this.hours) + ':' + Timepicker._addLeadingZero(this.minutes);
+        this.time = value;
+        if (!clearValue && this.options.twelveHour) {
+            value = `${value} ${this.amOrPm}`;
+        }
+        this.el.value = value;
+        // Trigger change event
+        if (value !== last) {
+            this.el.dispatchEvent(new Event('change', { bubbles: true, cancelable: true, composed: true }));
+        }
+    };
+    confirm = () => {
+        this.done();
+        if (typeof this.options.onDone === 'function') {
+            setTimeout(() => {
+                this.options.onDone.call(this);
+            }, this.options.duration / 2);
+        }
+    };
+    cancel = () => {
+        this.clear();
+        if (typeof this.options.onDone === 'function')
+            this.options.onCancel.call(this);
+    };
+    clear = () => {
+        this.done(true);
+    };
+    // deprecated
+    open() {
+        console.warn('Timepicker.close() is deprecated. Remove this method and wrap in modal yourself.');
+        return this;
+    }
+    close() {
+        console.warn('Timepicker.close() is deprecated. Remove this method and wrap in modal yourself.');
+        return this;
+    }
+    static {
+        Timepicker._template = `<div class="timepicker-container">
+          <div class="timepicker-digital-display">
+            <div class="timepicker-text-container">
+              <div class="timepicker-display-column timepicker-display-digital-clock">
+                <div class="timepicker-input-hours-wrapper">
+                  <input type="text" maxlength="2" class="timepicker-input-hours text-primary" />
+                </div>
+                <div class="timepicker-input-divider-wrapper">
+                  <span class="timepicker-input-divider">:</span>
+                </div>
+                <div class="timepicker-input-minutes-wrapper">
+                  <input type="text" maxlength="2" class="timepicker-input-minutes" />
+                </div>
+              </div>
+              <div class="timepicker-display-column timepicker-display-am-pm">
+                <div class="timepicker-span-am-pm"></div>
+              </div>
+            </div>
+          </div>
+          <div class="timepicker-analog-display">
+            <div class="timepicker-plate">
+              <div class="timepicker-canvas"></div>
+              <div class="timepicker-dial timepicker-hours"></div>
+              <div class="timepicker-dial timepicker-minutes timepicker-dial-out"></div>
+            </div>
+            <div class="timepicker-footer"></div>
+          </div>
+        </div>`;
+    }
+}
+
+const _defaults$4 = {
+    exitDelay: 200,
+    enterDelay: 0,
+    text: '',
+    margin: 5,
+    inDuration: 250,
+    outDuration: 200,
+    position: 'bottom',
+    transitionMovement: 10,
+    opacity: 1
+};
+class Tooltip extends Component {
+    /**
+     * If tooltip is open.
+     */
+    isOpen;
+    /**
+     * If tooltip is hovered.
+     */
+    isHovered;
+    /**
+     * If tooltip is focused.
+     */
+    isFocused;
+    tooltipEl;
+    _exitDelayTimeout;
+    _enterDelayTimeout;
+    xMovement;
+    yMovement;
+    constructor(el, options) {
+        super(el, options, Tooltip);
+        this.el['M_Tooltip'] = this;
+        this.options = {
+            ...Tooltip.defaults,
+            ...this._getAttributeOptions(),
+            ...options
+        };
+        this.isOpen = false;
+        this.isHovered = false;
+        this.isFocused = false;
+        this._appendTooltipEl();
+        this._setupEventHandlers();
+    }
+    static get defaults() {
+        return _defaults$4;
+    }
+    /**
+     * Initializes instances of Tooltip.
+     * @param els HTML elements.
+     * @param options Component options.
+     */
+    static init(els, options = {}) {
+        return super.init(els, options, Tooltip);
+    }
+    static getInstance(el) {
+        return el['M_Tooltip'];
+    }
+    destroy() {
+        this.tooltipEl.remove();
+        this._removeEventHandlers();
+        this.el['M_Tooltip'] = undefined;
+    }
+    _appendTooltipEl() {
+        this.tooltipEl = document.createElement('div');
+        this.tooltipEl.classList.add('material-tooltip');
+        const tooltipContentEl = this.options.tooltipId
+            ? document.getElementById(this.options.tooltipId)
+            : document.createElement('div');
+        this.tooltipEl.append(tooltipContentEl);
+        tooltipContentEl.style.display = '';
+        tooltipContentEl.classList.add('tooltip-content');
+        this._setTooltipContent(tooltipContentEl);
+        this.tooltipEl.appendChild(tooltipContentEl);
+        document.body.appendChild(this.tooltipEl);
+    }
+    _setTooltipContent(tooltipContentEl) {
+        if (this.options.tooltipId)
+            return;
+        tooltipContentEl.innerText = this.options.text;
+    }
+    _updateTooltipContent() {
+        this._setTooltipContent(this.tooltipEl.querySelector('.tooltip-content'));
+    }
+    _setupEventHandlers() {
+        this.el.addEventListener('mouseenter', this._handleMouseEnter);
+        this.el.addEventListener('mouseleave', this._handleMouseLeave);
+        this.el.addEventListener('focus', this._handleFocus, true);
+        this.el.addEventListener('blur', this._handleBlur, true);
+    }
+    _removeEventHandlers() {
+        this.el.removeEventListener('mouseenter', this._handleMouseEnter);
+        this.el.removeEventListener('mouseleave', this._handleMouseLeave);
+        this.el.removeEventListener('focus', this._handleFocus, true);
+        this.el.removeEventListener('blur', this._handleBlur, true);
+    }
+    /**
+     * Show tooltip.
+     */
+    open = (isManual) => {
+        if (this.isOpen)
+            return;
+        isManual = isManual === undefined ? true : undefined; // Default value true
+        this.isOpen = true;
+        // Update tooltip content with HTML attribute options
+        this.options = { ...this.options, ...this._getAttributeOptions() };
+        this._updateTooltipContent();
+        this._setEnterDelayTimeout(isManual);
+    };
+    /**
+     * Hide tooltip.
+     */
+    close = () => {
+        if (!this.isOpen)
+            return;
+        this.isHovered = false;
+        this.isFocused = false;
+        this.isOpen = false;
+        this._setExitDelayTimeout();
+    };
+    _setExitDelayTimeout() {
+        clearTimeout(this._exitDelayTimeout);
+        this._exitDelayTimeout = setTimeout(() => {
+            if (this.isHovered || this.isFocused)
+                return;
+            this._animateOut();
+        }, this.options.exitDelay);
+    }
+    _setEnterDelayTimeout(isManual) {
+        clearTimeout(this._enterDelayTimeout);
+        this._enterDelayTimeout = setTimeout(() => {
+            if (!this.isHovered && !this.isFocused && !isManual)
+                return;
+            this._animateIn();
+        }, this.options.enterDelay);
+    }
+    _positionTooltip() {
+        const tooltip = this.tooltipEl;
+        const origin = this.el, originHeight = origin.offsetHeight, originWidth = origin.offsetWidth, tooltipHeight = tooltip.offsetHeight, tooltipWidth = tooltip.offsetWidth, margin = this.options.margin;
+        this.xMovement = 0;
+        this.yMovement = 0;
+        let targetTop = origin.getBoundingClientRect().top + Utils.getDocumentScrollTop();
+        let targetLeft = origin.getBoundingClientRect().left + Utils.getDocumentScrollLeft();
+        if (this.options.position === 'top') {
+            targetTop += -tooltipHeight - margin;
+            targetLeft += originWidth / 2 - tooltipWidth / 2;
+            this.yMovement = -this.options.transitionMovement;
+        }
+        else if (this.options.position === 'right') {
+            targetTop += originHeight / 2 - tooltipHeight / 2;
+            targetLeft += originWidth + margin;
+            this.xMovement = this.options.transitionMovement;
+        }
+        else if (this.options.position === 'left') {
+            targetTop += originHeight / 2 - tooltipHeight / 2;
+            targetLeft += -tooltipWidth - margin;
+            this.xMovement = -this.options.transitionMovement;
+        }
+        else {
+            targetTop += originHeight + margin;
+            targetLeft += originWidth / 2 - tooltipWidth / 2;
+            this.yMovement = this.options.transitionMovement;
+        }
+        const newCoordinates = this._repositionWithinScreen(targetLeft, targetTop, tooltipWidth, tooltipHeight);
+        tooltip.style.top = newCoordinates.y + 'px';
+        tooltip.style.left = newCoordinates.x + 'px';
+    }
+    _repositionWithinScreen(x, y, width, height) {
+        const scrollLeft = Utils.getDocumentScrollLeft();
+        const scrollTop = Utils.getDocumentScrollTop();
+        let newX = x - scrollLeft;
+        let newY = y - scrollTop;
+        const bounding = {
+            left: newX,
+            top: newY,
+            width: width,
+            height: height
+        };
+        const offset = this.options.margin + this.options.transitionMovement;
+        const edges = Utils.checkWithinContainer(document.body, bounding, offset);
+        if (edges.left) {
+            newX = offset;
+        }
+        else if (edges.right) {
+            newX -= newX + width - window.innerWidth;
+        }
+        if (edges.top) {
+            newY = offset;
+        }
+        else if (edges.bottom) {
+            newY -= newY + height - window.innerHeight;
+        }
+        return {
+            x: newX + scrollLeft,
+            y: newY + scrollTop
+        };
+    }
+    _animateIn() {
+        this._positionTooltip();
+        this.tooltipEl.style.visibility = 'visible';
+        const duration = this.options.inDuration;
+        // easeOutCubic
+        this.tooltipEl.style.transition = `
+      transform ${duration}ms ease-out,
+      opacity ${duration}ms ease-out`;
+        setTimeout(() => {
+            this.tooltipEl.style.transform = `translateX(${this.xMovement}px) translateY(${this.yMovement}px)`;
+            this.tooltipEl.style.opacity = (this.options.opacity || 1).toString();
+        }, 1);
+    }
+    _animateOut() {
+        const duration = this.options.outDuration;
+        // easeOutCubic
+        this.tooltipEl.style.transition = `
+      transform ${duration}ms ease-out,
+      opacity ${duration}ms ease-out`;
+        setTimeout(() => {
+            this.tooltipEl.style.transform = `translateX(0px) translateY(0px)`;
+            this.tooltipEl.style.opacity = '0';
+        }, 1);
+        /*
+        anim.remove(this.tooltipEl);
+        anim({
+          targets: this.tooltipEl,
+          opacity: 0,
+          translateX: 0,
+          translateY: 0,
+          duration: this.options.outDuration,
+          easing: 'easeOutCubic'
+        });
+        */
+    }
+    _handleMouseEnter = () => {
+        this.isHovered = true;
+        this.isFocused = false; // Allows close of tooltip when opened by focus.
+        this.open(false);
+    };
+    _handleMouseLeave = () => {
+        this.isHovered = false;
+        this.isFocused = false; // Allows close of tooltip when opened by focus.
+        this.close();
+    };
+    _handleFocus = () => {
+        if (Utils.tabPressed) {
+            this.isFocused = true;
+            this.open(false);
+        }
+    };
+    _handleBlur = () => {
+        this.isFocused = false;
+        this.close();
+    };
+    _getAttributeOptions() {
+        const attributeOptions = {};
+        const tooltipTextOption = this.el.getAttribute('data-tooltip');
+        const tooltipId = this.el.getAttribute('data-tooltip-id');
+        const positionOption = this.el.getAttribute('data-position');
+        if (tooltipTextOption) {
+            attributeOptions.text = tooltipTextOption;
+        }
+        if (positionOption) {
+            attributeOptions.position = positionOption;
+        }
+        if (tooltipId) {
+            attributeOptions.tooltipId = tooltipId;
+        }
+        return attributeOptions;
+    }
+}
+
+class Waves {
+    static _offset(el) {
+        const box = el.getBoundingClientRect();
+        const docElem = document.documentElement;
+        return {
+            top: box.top + window.pageYOffset - docElem.clientTop,
+            left: box.left + window.pageXOffset - docElem.clientLeft
+        };
+    }
+    // https://phoenix-dx.com/css-techniques-for-material-ripple-effect/
+    static renderWaveEffect(targetElement, position = null, color = null) {
+        const isCentered = position === null;
+        const duration = 500;
+        let animationFrame, animationStart;
+        const animationStep = function (timestamp) {
+            if (!animationStart) {
+                animationStart = timestamp;
+            }
+            const frame = timestamp - animationStart;
+            if (frame < duration) {
+                const easing = (frame / duration) * (2 - frame / duration);
+                const circle = isCentered
+                    ? 'circle at 50% 50%'
+                    : `circle at ${position.x}px ${position.y}px`;
+                const waveColor = `rgba(${color?.r || 0}, ${color?.g || 0}, ${color?.b || 0}, ${0.3 * (1 - easing)})`;
+                const stop = 90 * easing + '%';
+                targetElement.style.backgroundImage =
+                    'radial-gradient(' +
+                        circle +
+                        ', ' +
+                        waveColor +
+                        ' ' +
+                        stop +
+                        ', transparent ' +
+                        stop +
+                        ')';
+                animationFrame = window.requestAnimationFrame(animationStep);
+            }
+            else {
+                targetElement.style.backgroundImage = 'none';
+                window.cancelAnimationFrame(animationFrame);
+            }
+        };
+        animationFrame = window.requestAnimationFrame(animationStep);
+    }
+    static Init() {
+        if (typeof document !== 'undefined')
+            document?.addEventListener('DOMContentLoaded', () => {
+                document.body.addEventListener('click', (e) => {
+                    const trigger = e.target;
+                    const el = trigger.closest('.waves-effect');
+                    if (el && el.contains(trigger)) {
+                        const isCircular = el.classList.contains('waves-circle');
+                        const x = e.pageX - Waves._offset(el).left;
+                        const y = e.pageY - Waves._offset(el).top;
+                        let color = null;
+                        if (el.classList.contains('waves-light'))
+                            color = { r: 255, g: 255, b: 255 };
+                        Waves.renderWaveEffect(el, isCircular ? null : { x, y }, color);
+                    }
+                });
+            });
+    }
+}
+
+const _defaults$3 = {};
+// TODO: !!!!!
+class Range extends Component {
+    _mousedown;
+    value;
+    thumb;
+    constructor(el, options) {
+        super(el, options, Range);
+        this.el['M_Range'] = this;
+        this.options = {
+            ...Range.defaults,
+            ...options
+        };
+        this._mousedown = false;
+        this._setupThumb();
+        this._setupEventHandlers();
+    }
+    static get defaults() {
+        return _defaults$3;
+    }
+    /**
+     * Initializes instances of Range.
+     * @param els HTML elements.
+     * @param options Component options.
+     */
+    static init(els, options = {}) {
+        return super.init(els, options, Range);
+    }
+    static getInstance(el) {
+        return el['M_Range'];
+    }
+    destroy() {
+        this._removeEventHandlers();
+        this._removeThumb();
+        this.el['M_Range'] = undefined;
+    }
+    _setupEventHandlers() {
+        this.el.addEventListener('change', this._handleRangeChange);
+        this.el.addEventListener('mousedown', this._handleRangeMousedownTouchstart);
+        this.el.addEventListener('touchstart', this._handleRangeMousedownTouchstart);
+        this.el.addEventListener('input', this._handleRangeInputMousemoveTouchmove);
+        this.el.addEventListener('mousemove', this._handleRangeInputMousemoveTouchmove);
+        this.el.addEventListener('touchmove', this._handleRangeInputMousemoveTouchmove);
+        this.el.addEventListener('mouseup', this._handleRangeMouseupTouchend);
+        this.el.addEventListener('touchend', this._handleRangeMouseupTouchend);
+        this.el.addEventListener('blur', this._handleRangeBlurMouseoutTouchleave);
+        this.el.addEventListener('mouseout', this._handleRangeBlurMouseoutTouchleave);
+        this.el.addEventListener('touchleave', this._handleRangeBlurMouseoutTouchleave);
+    }
+    _removeEventHandlers() {
+        this.el.removeEventListener('change', this._handleRangeChange);
+        this.el.removeEventListener('mousedown', this._handleRangeMousedownTouchstart);
+        this.el.removeEventListener('touchstart', this._handleRangeMousedownTouchstart);
+        this.el.removeEventListener('input', this._handleRangeInputMousemoveTouchmove);
+        this.el.removeEventListener('mousemove', this._handleRangeInputMousemoveTouchmove);
+        this.el.removeEventListener('touchmove', this._handleRangeInputMousemoveTouchmove);
+        this.el.removeEventListener('mouseup', this._handleRangeMouseupTouchend);
+        this.el.removeEventListener('touchend', this._handleRangeMouseupTouchend);
+        this.el.removeEventListener('blur', this._handleRangeBlurMouseoutTouchleave);
+        this.el.removeEventListener('mouseout', this._handleRangeBlurMouseoutTouchleave);
+        this.el.removeEventListener('touchleave', this._handleRangeBlurMouseoutTouchleave);
+    }
+    _handleRangeChange = () => {
+        this.value.innerHTML = this.el.value;
+        if (!this.thumb.classList.contains('active')) {
+            this._showRangeBubble();
+        }
+        const offsetLeft = this._calcRangeOffset();
+        this.thumb.classList.add('active');
+        this.thumb.style.left = offsetLeft + 'px';
+    };
+    _handleRangeMousedownTouchstart = (e) => {
+        // Set indicator value
+        this.value.innerHTML = this.el.value;
+        this._mousedown = true;
+        this.el.classList.add('active');
+        if (!this.thumb.classList.contains('active')) {
+            this._showRangeBubble();
+        }
+        if (e.type !== 'input') {
+            const offsetLeft = this._calcRangeOffset();
+            this.thumb.classList.add('active');
+            this.thumb.style.left = offsetLeft + 'px';
+        }
+    };
+    _handleRangeInputMousemoveTouchmove = () => {
+        if (this._mousedown) {
+            if (!this.thumb.classList.contains('active')) {
+                this._showRangeBubble();
+            }
+            const offsetLeft = this._calcRangeOffset();
+            this.thumb.classList.add('active');
+            this.thumb.style.left = offsetLeft + 'px';
+            this.value.innerHTML = this.el.value;
+        }
+    };
+    _handleRangeMouseupTouchend = () => {
+        this._mousedown = false;
+        this.el.classList.remove('active');
+    };
+    _handleRangeBlurMouseoutTouchleave = () => {
+        if (!this._mousedown) {
+            const paddingLeft = parseInt(getComputedStyle(this.el).paddingLeft);
+            const marginLeftText = 7 + paddingLeft + 'px';
+            if (this.thumb.classList.contains('active')) {
+                const duration = 100;
+                // from
+                this.thumb.style.transition = 'none';
+                setTimeout(() => {
+                    this.thumb.style.transition = `
+            height ${duration}ms ease,
+            width ${duration}ms ease,
+            top ${duration}ms ease,
+            margin ${duration}ms ease
+          `;
+                    // to
+                    this.thumb.style.height = '0';
+                    this.thumb.style.width = '0';
+                    this.thumb.style.top = '0';
+                    this.thumb.style.marginLeft = marginLeftText;
+                }, 1);
+            }
+            this.thumb.classList.remove('active');
+        }
+    };
+    _setupThumb() {
+        this.thumb = document.createElement('span');
+        this.value = document.createElement('span');
+        this.thumb.classList.add('thumb');
+        this.value.classList.add('value');
+        this.thumb.append(this.value);
+        this.el.after(this.thumb);
+    }
+    _removeThumb() {
+        this.thumb.remove();
+    }
+    _showRangeBubble() {
+        const paddingLeft = parseInt(getComputedStyle(this.thumb.parentElement).paddingLeft);
+        const marginLeftText = -7 + paddingLeft + 'px'; // TODO: fix magic number?
+        const duration = 300;
+        // easeOutQuint
+        this.thumb.style.transition = `
+      height ${duration}ms ease,
+      width ${duration}ms ease,
+      top ${duration}ms ease,
+      margin ${duration}ms ease
+    `;
+        // to
+        this.thumb.style.height = '30px';
+        this.thumb.style.width = '30px';
+        this.thumb.style.top = '-30px';
+        this.thumb.style.marginLeft = marginLeftText;
+    }
+    _calcRangeOffset() {
+        const width = this.el.getBoundingClientRect().width - 15;
+        const max = parseFloat(this.el.getAttribute('max')) || 100; // Range default max
+        const min = parseFloat(this.el.getAttribute('min')) || 0; // Range default min
+        const percent = (parseFloat(this.el.value) - min) / (max - min);
+        return percent * width;
+    }
+    /**
+     * Initializes every range input in the current document.
+     */
+    static Init() {
+        if (typeof document !== 'undefined')
+            Range.init(document?.querySelectorAll('input[type=range]'), {});
+    }
+}
+
+const _defaults$2 = Object.freeze({});
+class CharacterCounter extends Component {
+    /** Stores the reference to the counter HTML element. */
+    counterEl;
+    /** Specifies whether the input is valid or not. */
+    isInvalid;
+    /** Specifies whether the input text has valid length or not. */
+    isValidLength;
+    constructor(el, options) {
+        super(el, {}, CharacterCounter);
+        this.el['M_CharacterCounter'] = this;
+        this.options = {
+            ...CharacterCounter.defaults,
+            ...options
+        };
+        this.isInvalid = false;
+        this.isValidLength = false;
+        this._setupCounter();
+        this._setupEventHandlers();
+    }
+    static get defaults() {
+        return _defaults$2;
+    }
+    /**
+     * Initializes instances of CharacterCounter.
+     * @param els HTML elements.
+     * @param options Component options.
+     */
+    static init(els, options = {}) {
+        return super.init(els, options, CharacterCounter);
+    }
+    static getInstance(el) {
+        return el['M_CharacterCounter'];
+    }
+    destroy() {
+        this._removeEventHandlers();
+        this.el['CharacterCounter'] = undefined;
+        this._removeCounter();
+    }
+    _setupEventHandlers() {
+        this.el.addEventListener('focus', this.updateCounter, true);
+        this.el.addEventListener('input', this.updateCounter, true);
+    }
+    _removeEventHandlers() {
+        this.el.removeEventListener('focus', this.updateCounter, true);
+        this.el.removeEventListener('input', this.updateCounter, true);
+    }
+    _setupCounter() {
+        this.counterEl = document.createElement('span');
+        this.counterEl.classList.add('character-counter');
+        this.counterEl.style.float = 'right';
+        this.counterEl.style.fontSize = '12px';
+        this.counterEl.style.height = '1';
+        this.el.parentElement.appendChild(this.counterEl);
+    }
+    _removeCounter() {
+        this.counterEl.remove();
+    }
+    updateCounter = () => {
+        const maxLength = parseInt(this.el.getAttribute('maxlength')), actualLength = this.el.value.length;
+        this.isValidLength = actualLength <= maxLength;
+        let counterString = actualLength.toString();
+        if (maxLength) {
+            counterString += '/' + maxLength;
+            this._validateInput();
+        }
+        this.counterEl.innerHTML = counterString;
+    };
+    _validateInput() {
+        if (this.isValidLength && this.isInvalid) {
+            this.isInvalid = false;
+            this.el.classList.remove('invalid');
+        }
+        else if (!this.isValidLength && !this.isInvalid) {
+            this.isInvalid = true;
+            this.el.classList.remove('valid');
+            this.el.classList.add('invalid');
+        }
+    }
+}
+
+const _defaults$1 = {
+    indicators: true,
+    height: 400,
+    duration: 500,
+    interval: 6000,
+    pauseOnFocus: true,
+    pauseOnHover: true,
+    indicatorLabelFunc: null // Function which will generate a label for the indicators (ARIA)
+};
+class Slider extends Component {
+    /** Index of current slide. */
+    activeIndex;
+    interval;
+    eventPause;
+    _slider;
+    _slides;
+    _activeSlide;
+    _indicators;
+    _hovered;
+    _focused;
+    _focusCurrent;
+    _sliderId;
+    constructor(el, options) {
+        super(el, options, Slider);
+        this.el['M_Slider'] = this;
+        this.options = {
+            ...Slider.defaults,
+            ...options
+        };
+        // init props
+        this.interval = null;
+        this.eventPause = false;
+        this._hovered = false;
+        this._focused = false;
+        this._focusCurrent = false;
+        // setup
+        this._slider = this.el.querySelector('.slides');
+        this._slides = Array.from(this._slider.querySelectorAll('li'));
+        this.activeIndex = this._slides.findIndex((li) => li.classList.contains('active'));
+        if (this.activeIndex !== -1) {
+            this._activeSlide = this._slides[this.activeIndex];
+        }
+        this._setSliderHeight();
+        // Sets element id if it does not have one
+        if (this._slider.hasAttribute('id'))
+            this._sliderId = this._slider.getAttribute('id');
+        else {
+            this._sliderId = 'slider-' + Utils.guid();
+            this._slider.setAttribute('id', this._sliderId);
+        }
+        const placeholderBase64 = 'data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
+        // Set initial positions of captions
+        this._slides.forEach((slide) => {
+            // Caption
+            //const caption = <HTMLElement|null>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 = `<button type="button" class="indicator-item-btn" aria-label="${label}" aria-controls="${this._sliderId}"></button>`;
+                arrLi.push(li);
+                ul.append(li);
+            });
+            this.el.append(ul);
+            this._indicators = arrLi;
+        }
+    }
+    _removeIndicators() {
+        this.el.querySelector('ul.indicators').remove(); //find('ul.indicators').remove();
+    }
+    set(index) {
+        // Wrap around indices.
+        if (index >= this._slides.length)
+            index = 0;
+        else if (index < 0)
+            index = this._slides.length - 1;
+        // Only do if index changes
+        if (this.activeIndex === index)
+            return;
+        this._activeSlide = this._slides[this.activeIndex];
+        const _caption = this._activeSlide.querySelector('.caption');
+        this._activeSlide.classList.remove('active');
+        // Enables every slide
+        this._slides.forEach((slide) => (slide.style.visibility = 'visible'));
+        //--- Hide active Slide + Caption
+        this._activeSlide.style.opacity = '0';
+        setTimeout(() => {
+            this._slides.forEach((slide) => {
+                if (slide.classList.contains('active'))
+                    return;
+                slide.style.opacity = '0';
+                slide.style.transform = 'translate(0, 0)';
+                // Disables invisible slides (for assistive technologies)
+                slide.style.visibility = 'hidden';
+            });
+        }, this.options.duration);
+        // Hide active Caption
+        //this._animateCaptionIn(_caption, this.options.duration);
+        _caption.style.opacity = '0';
+        // Update indicators
+        if (this.options.indicators) {
+            const activeIndicator = this._indicators[this.activeIndex].children[0];
+            const nextIndicator = this._indicators[index].children[0];
+            activeIndicator.classList.remove('active');
+            nextIndicator.classList.add('active');
+            if (typeof this.options.indicatorLabelFunc === 'function') {
+                activeIndicator.ariaLabel = this.options.indicatorLabelFunc.call(this, this.activeIndex, false);
+                nextIndicator.ariaLabel = this.options.indicatorLabelFunc.call(this, index, true);
+            }
+        }
+        //--- Show new Slide + Caption
+        this._animateSlide(this._slides[index], true);
+        this._slides[index].classList.add('active');
+        this.activeIndex = index;
+        // Reset interval, if allowed. This check prevents autostart
+        // when slider is paused, since it can be changed though indicators.
+        if (this.interval != null) {
+            this.start();
+        }
+    }
+    _pause(fromEvent) {
+        clearInterval(this.interval);
+        this.eventPause = fromEvent;
+        this.interval = null;
+    }
+    /**
+     * Pause slider autoslide.
+     */
+    pause = () => {
+        this._pause(false);
+    };
+    /**
+     * Start slider autoslide.
+     */
+    start = () => {
+        clearInterval(this.interval);
+        this.interval = setInterval(this._handleInterval, this.options.duration + this.options.interval);
+        this.eventPause = false;
+    };
+    /**
+     * Move to next slider.
+     */
+    next = () => {
+        let newIndex = this.activeIndex + 1;
+        // Wrap around indices.
+        if (newIndex >= this._slides.length)
+            newIndex = 0;
+        else if (newIndex < 0)
+            newIndex = this._slides.length - 1;
+        this.set(newIndex);
+    };
+    /**
+     * Move to prev slider.
+     */
+    prev = () => {
+        let newIndex = this.activeIndex - 1;
+        // Wrap around indices.
+        if (newIndex >= this._slides.length)
+            newIndex = 0;
+        else if (newIndex < 0)
+            newIndex = this._slides.length - 1;
+        this.set(newIndex);
+    };
+}
+
+const _defaults = {
+    text: '',
+    displayLength: 4000,
+    inDuration: 300,
+    outDuration: 375,
+    classes: '',
+    completeCallback: null,
+    activationPercent: 0.8
+};
+class Toast {
+    /** The toast element. */
+    el;
+    /**
+     * The remaining amount of time in ms that the toast
+     * will stay before dismissal.
+     */
+    timeRemaining;
+    /**
+     * Describes the current pan state of the Toast.
+     */
+    panning;
+    options;
+    message;
+    counterInterval;
+    wasSwiped;
+    startingXPos;
+    xPos;
+    time;
+    deltaX;
+    velocityX;
+    static _toasts;
+    static _container;
+    static _draggedToast;
+    constructor(options) {
+        this.options = {
+            ...Toast.defaults,
+            ...options
+        };
+        this.message = this.options.text;
+        this.panning = false;
+        this.timeRemaining = this.options.displayLength;
+        if (Toast._toasts.length === 0) {
+            Toast._createContainer();
+        }
+        // Create new toast
+        Toast._toasts.push(this);
+        const toastElement = this._createToast();
+        toastElement['M_Toast'] = this;
+        this.el = toastElement;
+        this._animateIn();
+        this._setTimer();
+    }
+    static get defaults() {
+        return _defaults;
+    }
+    static getInstance(el) {
+        return el['M_Toast'];
+    }
+    static _createContainer() {
+        const container = document.createElement('div');
+        container.setAttribute('id', 'toast-container');
+        // Add event handler
+        container.addEventListener('touchstart', Toast._onDragStart);
+        container.addEventListener('touchmove', Toast._onDragMove);
+        container.addEventListener('touchend', Toast._onDragEnd);
+        container.addEventListener('mousedown', Toast._onDragStart);
+        document.addEventListener('mousemove', Toast._onDragMove);
+        document.addEventListener('mouseup', Toast._onDragEnd);
+        document.body.appendChild(container);
+        Toast._container = container;
+    }
+    static _removeContainer() {
+        document.removeEventListener('mousemove', Toast._onDragMove);
+        document.removeEventListener('mouseup', Toast._onDragEnd);
+        Toast._container.remove();
+        Toast._container = null;
+    }
+    static _onDragStart(e) {
+        if (e.target && e.target.closest('.toast')) {
+            const toastElem = e.target.closest('.toast');
+            const toast = toastElem['M_Toast'];
+            toast.panning = true;
+            Toast._draggedToast = toast;
+            toast.el.classList.add('panning');
+            toast.el.style.transition = '';
+            toast.startingXPos = Toast._xPos(e);
+            toast.time = Date.now();
+            toast.xPos = Toast._xPos(e);
+        }
+    }
+    static _onDragMove(e) {
+        if (!!Toast._draggedToast) {
+            e.preventDefault();
+            const toast = Toast._draggedToast;
+            toast.deltaX = Math.abs(toast.xPos - Toast._xPos(e));
+            toast.xPos = Toast._xPos(e);
+            toast.velocityX = toast.deltaX / (Date.now() - toast.time);
+            toast.time = Date.now();
+            const totalDeltaX = toast.xPos - toast.startingXPos;
+            const activationDistance = toast.el.offsetWidth * toast.options.activationPercent;
+            toast.el.style.transform = `translateX(${totalDeltaX}px)`;
+            toast.el.style.opacity = (1 - Math.abs(totalDeltaX / activationDistance)).toString();
+        }
+    }
+    static _onDragEnd() {
+        if (!!Toast._draggedToast) {
+            const toast = Toast._draggedToast;
+            toast.panning = false;
+            toast.el.classList.remove('panning');
+            const totalDeltaX = toast.xPos - toast.startingXPos;
+            const activationDistance = toast.el.offsetWidth * toast.options.activationPercent;
+            const shouldBeDismissed = Math.abs(totalDeltaX) > activationDistance || toast.velocityX > 1;
+            // Remove toast
+            if (shouldBeDismissed) {
+                toast.wasSwiped = true;
+                toast.dismiss();
+                // Animate toast back to original position
+            }
+            else {
+                toast.el.style.transition = 'transform .2s, opacity .2s';
+                toast.el.style.transform = '';
+                toast.el.style.opacity = '';
+            }
+            Toast._draggedToast = null;
+        }
+    }
+    static _xPos(e) {
+        if (e.type.startsWith('touch') && e.targetTouches.length >= 1) {
+            return e.targetTouches[0].clientX;
+        }
+        // mouse event
+        return e.clientX;
+    }
+    /**
+     * dismiss all toasts.
+     */
+    static dismissAll() {
+        for (const toastIndex in Toast._toasts) {
+            Toast._toasts[toastIndex].dismiss();
+        }
+    }
+    _createToast() {
+        let toast = this.options.toastId
+            ? document.getElementById(this.options.toastId)
+            : document.createElement('div');
+        if (toast instanceof HTMLTemplateElement) {
+            const node = toast.content.cloneNode(true);
+            toast = node.firstElementChild;
+        }
+        toast.classList.add('toast');
+        toast.setAttribute('role', 'alert');
+        toast.setAttribute('aria-live', 'assertive');
+        toast.setAttribute('aria-atomic', 'true');
+        // Add custom classes onto toast
+        if (this.options.classes.length > 0) {
+            toast.classList.add(...this.options.classes.split(' '));
+        }
+        if (this.message)
+            toast.innerText = this.message;
+        Toast._container.appendChild(toast);
+        return toast;
+    }
+    _animateIn() {
+        // Animate toast in
+        this.el.style.display = '';
+        this.el.style.opacity = '0';
+        // easeOutCubic
+        this.el.style.transition = `
+      top ${this.options.inDuration}ms ease,
+      opacity ${this.options.inDuration}ms ease
+    `;
+        setTimeout(() => {
+            this.el.style.top = '0';
+            this.el.style.opacity = '1';
+        }, 1);
+    }
+    /**
+     * Create setInterval which automatically removes toast when timeRemaining >= 0
+     * has been reached.
+     */
+    _setTimer() {
+        if (this.timeRemaining !== Infinity) {
+            this.counterInterval = setInterval(() => {
+                // If toast is not being dragged, decrease its time remaining
+                if (!this.panning) {
+                    this.timeRemaining -= 20;
+                }
+                // Animate toast out
+                if (this.timeRemaining <= 0) {
+                    this.dismiss();
+                }
+            }, 20);
+        }
+    }
+    /**
+     * Dismiss toast with animation.
+     */
+    dismiss() {
+        clearInterval(this.counterInterval);
+        const activationDistance = this.el.offsetWidth * this.options.activationPercent;
+        if (this.wasSwiped) {
+            this.el.style.transition = 'transform .05s, opacity .05s';
+            this.el.style.transform = `translateX(${activationDistance}px)`;
+            this.el.style.opacity = '0';
+        }
+        // easeOutExpo
+        this.el.style.transition = `
+      margin ${this.options.outDuration}ms ease,
+      opacity ${this.options.outDuration}ms ease`;
+        setTimeout(() => {
+            this.el.style.opacity = '0';
+            this.el.style.marginTop = '-40px';
+        }, 1);
+        setTimeout(() => {
+            // Call the optional callback
+            if (typeof this.options.completeCallback === 'function') {
+                this.options.completeCallback();
+            }
+            // Remove toast from DOM
+            if (this.el.id != this.options.toastId) {
+                this.el.remove();
+                Toast._toasts.splice(Toast._toasts.indexOf(this), 1);
+                if (Toast._toasts.length === 0) {
+                    Toast._removeContainer();
+                }
+            }
+        }, this.options.outDuration);
+    }
+    static {
+        Toast._toasts = [];
+        Toast._container = null;
+        Toast._draggedToast = null;
+    }
+}
+
+/* eslint-disable @typescript-eslint/no-unused-vars */
+const version = '2.2.1';
+/**
+ * Automatically initialize components.
+ * @param context Root element to initialize. Defaults to `document.body`.
+ * @param options Options for each component.
+ */
+function AutoInit(context = document.body, options) {
+    const registry = {
+        Autocomplete: context.querySelectorAll('.autocomplete:not(.no-autoinit)'),
+        Cards: context.querySelectorAll('.cards:not(.no-autoinit)'),
+        Carousel: context.querySelectorAll('.carousel:not(.no-autoinit)'),
+        Chips: context.querySelectorAll('.chips:not(.no-autoinit)'),
+        Collapsible: context.querySelectorAll('.collapsible:not(.no-autoinit)'),
+        Datepicker: context.querySelectorAll('.datepicker:not(.no-autoinit)'),
+        Dropdown: context.querySelectorAll('.dropdown-trigger:not(.no-autoinit)'),
+        Materialbox: context.querySelectorAll('.materialboxed:not(.no-autoinit)'),
+        Modal: context.querySelectorAll('.modal:not(.no-autoinit)'),
+        Parallax: context.querySelectorAll('.parallax:not(.no-autoinit)'),
+        Pushpin: context.querySelectorAll('.pushpin:not(.no-autoinit)'),
+        ScrollSpy: context.querySelectorAll('.scrollspy:not(.no-autoinit)'),
+        FormSelect: context.querySelectorAll('select:not(.no-autoinit)'),
+        Sidenav: context.querySelectorAll('.sidenav:not(.no-autoinit)'),
+        Tabs: context.querySelectorAll('.tabs:not(.no-autoinit)'),
+        TapTarget: context.querySelectorAll('.tap-target:not(.no-autoinit)'),
+        Timepicker: context.querySelectorAll('.timepicker:not(.no-autoinit)'),
+        Tooltip: context.querySelectorAll('.tooltipped:not(.no-autoinit)'),
+        FloatingActionButton: context.querySelectorAll('.fixed-action-btn:not(.no-autoinit)')
+    };
+    Autocomplete.init(registry.Autocomplete, options?.Autocomplete ?? {});
+    Cards.init(registry.Cards, options?.Cards ?? {});
+    Carousel.init(registry.Carousel, options?.Carousel ?? {});
+    Chips.init(registry.Chips, options?.Chips ?? {});
+    Collapsible.init(registry.Collapsible, options?.Collapsible ?? {});
+    Datepicker.init(registry.Datepicker, options?.Datepicker ?? {});
+    Dropdown.init(registry.Dropdown, options?.Dropdown ?? {});
+    Materialbox.init(registry.Materialbox, options?.Materialbox ?? {});
+    Modal.init(registry.Modal, options?.Modal ?? {});
+    Parallax.init(registry.Parallax, options?.Parallax ?? {});
+    Pushpin.init(registry.Pushpin, options?.Pushpin ?? {});
+    ScrollSpy.init(registry.ScrollSpy, options?.ScrollSpy ?? {});
+    FormSelect.init(registry.FormSelect, options?.FormSelect ?? {});
+    Sidenav.init(registry.Sidenav, options?.Sidenav ?? {});
+    Tabs.init(registry.Tabs, options?.Tabs ?? {});
+    TapTarget.init(registry.TapTarget, options?.TapTarget ?? {});
+    Timepicker.init(registry.Timepicker, options?.Timepicker ?? {});
+    Tooltip.init(registry.Tooltip, options?.Tooltip ?? {});
+    FloatingActionButton.init(registry.FloatingActionButton, options?.FloatingActionButton ?? {});
+}
+// Init
+if (typeof document !== 'undefined') {
+    document.addEventListener('keydown', Utils.docHandleKeydown, true);
+    document.addEventListener('keyup', Utils.docHandleKeyup, true);
+    document.addEventListener('focus', Utils.docHandleFocus, true);
+    document.addEventListener('blur', Utils.docHandleBlur, true);
+}
+Forms.Init();
+Chips.Init();
+Waves.Init();
+Range.Init();
+
+export { AutoInit, Autocomplete, Cards, Carousel, CharacterCounter, Chips, Collapsible, Datepicker, Dropdown, FloatingActionButton, FormSelect, Forms, Materialbox, Modal, Parallax, Pushpin, Range, ScrollSpy, Sidenav, Slider, Tabs, TapTarget, Timepicker, Toast, Tooltip, Waves, version };

From 4d736eea809fb02243fc68f4e2588f7312394685 Mon Sep 17 00:00:00 2001
From: Daniel Wurzer <info@wuda.io>
Date: Thu, 30 Jan 2025 22:03:11 +0100
Subject: [PATCH 41/43] fix: repair timeout

---
 src/buttons.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/buttons.ts b/src/buttons.ts
index 9bc68e4aa0..c15987e6da 100644
--- a/src/buttons.ts
+++ b/src/buttons.ts
@@ -215,9 +215,9 @@ export class FloatingActionButton
   _animateOutFAB() {
     const duration = 175;
     setTimeout(() => {
-      this.el.classList.remove('active'), duration;
+      this.el.classList.remove('active');
       this._menu.ariaExpanded = 'false';
-    });
+    }, duration);
     this._floatingBtnsReverse.forEach((el) => {
       el.style.transition = `opacity ${duration}ms ease, transform ${duration}ms ease`;
       // to

From 20b667c4ece0633e5516e2bb85ab1035d01a3d41 Mon Sep 17 00:00:00 2001
From: Daniel Wurzer <wurzer.da@gmail.com>
Date: Thu, 30 Jan 2025 22:31:26 +0100
Subject: [PATCH 42/43] Update _global.scss

---
 sass/components/_global.scss | 39 ------------------------------------
 1 file changed, 39 deletions(-)

diff --git a/sass/components/_global.scss b/sass/components/_global.scss
index ef1419c93b..85b46f52ea 100644
--- a/sass/components/_global.scss
+++ b/sass/components/_global.scss
@@ -195,45 +195,6 @@ video.responsive-video {
   }
 }*/
 
-// @todo remove this as component has moved to breadcrumb component scss file as of https://github.com/materializecss/materialize/issues/573
-// Breadcrumbs
-/*.breadcrumb {
-  display: inline-block;
-  font-size: 18px;
-  color: var(--font-on-primary-color-medium);
-
-  i,
-  [class^="mdi-"], [class*="mdi-"],
-  i.material-icons, i.material-symbols-outlined,
-  i.material-symbols-rounded, i.material-symbols-sharp {
-    display: block;
-    float: left;
-    font-size: 24px;
-  }
-
-  &:before {
-    content: '\E5CC';
-    color: var(--font-on-primary-color-medium);
-    vertical-align: top;
-    display: inline-block;
-    font-family: 'Material Symbols Outlined', 'Material Symbols Rounded', 'Material Symbols Sharp', 'Material Icons';
-    font-weight: normal;
-    font-style: normal;
-    font-size: 25px;
-    margin: 0 10px 0 8px;
-    -webkit-font-smoothing: antialiased;
-    float: left;
-  }
-
-  &:first-child:before {
-    display: none;
-  }
-
-  &:last-child {
-    color:  var(--md-sys-color-on-primary);
-  }
-}*/
-
 // Parallax
 .parallax-container {
   position: relative;

From 42693b35e11f6406e72138967db135b5bac4cfc6 Mon Sep 17 00:00:00 2001
From: Daniel Wurzer <info@wuda.io>
Date: Thu, 30 Jan 2025 23:03:40 +0100
Subject: [PATCH 43/43] fix(cards): init activators

---
 src/cards.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/cards.ts b/src/cards.ts
index ebe714ee90..a6d361fc7e 100644
--- a/src/cards.ts
+++ b/src/cards.ts
@@ -31,6 +31,8 @@ export class Cards extends Component<CardsOptions> implements Openable {
       ...options
     };
 
+    this._activators = [];
+
     this.cardReveal = this.el.querySelector('.card-reveal');
     if (this.cardReveal) {
       this.initialOverflow = getComputedStyle(this.el).overflow;