@materializecss/materialize 2.1.1 → 2.2.1

package/dist/js/materialize.js

@@ -1,5 +1,5 @@
 /*!
-* Materialize v2.1.1 (https://materializeweb.com)
+* Materialize v2.2.1 (https://materializeweb.com)
 * Copyright 2014-2024 Materialize
 * MIT License (https://raw.githubusercontent.com/materializecss/materialize/master/LICENSE)
 */
@@ -26,7 +26,7 @@ var M = (function (exports) {
             ARROW_DOWN: ['ArrowDown', 'Down'],
             ARROW_LEFT: ['ArrowLeft', 'Left'],
             ARROW_RIGHT: ['ArrowRight', 'Right'],
-            DELETE: ['Delete', 'Del'],
+            DELETE: ['Delete', 'Del']
         };
         /**
          * Detects when a key is pressed.
@@ -52,6 +52,8 @@ var M = (function (exports) {
          * 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');
@@ -61,6 +63,8 @@ var M = (function (exports) {
          * 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');
         }
@@ -82,21 +86,21 @@ var M = (function (exports) {
          * @param offset Element offset.
          */
         static checkWithinContainer(container, bounding, offset) {
-            let edges = {
+            const edges = {
                 top: false,
                 right: false,
                 bottom: false,
                 left: false
             };
-            let containerRect = container.getBoundingClientRect();
+            const containerRect = container.getBoundingClientRect();
             // If body element is smaller than viewport, use viewport height instead.
-            let containerBottom = container === document.body
+            const containerBottom = container === document.body
                 ? Math.max(containerRect.bottom, window.innerHeight)
                 : containerRect.bottom;
-            let scrollLeft = container.scrollLeft;
-            let scrollTop = container.scrollTop;
-            let scrolledX = bounding.left - scrollLeft;
-            let scrolledY = bounding.top - scrollTop;
+            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;
@@ -122,7 +126,7 @@ var M = (function (exports) {
          * @param offset Element offset.
          */
         static checkPossibleAlignments(el, container, bounding, offset) {
-            let canAlign = {
+            const canAlign = {
                 top: true,
                 right: true,
                 bottom: true,
@@ -132,16 +136,16 @@ var M = (function (exports) {
                 spaceOnBottom: null,
                 spaceOnLeft: null
             };
-            let containerAllowsOverflow = getComputedStyle(container).overflow === 'visible';
-            let containerRect = container.getBoundingClientRect();
-            let containerHeight = Math.min(containerRect.height, window.innerHeight);
-            let containerWidth = Math.min(containerRect.width, window.innerWidth);
-            let elOffsetRect = el.getBoundingClientRect();
-            let scrollLeft = container.scrollLeft;
-            let scrollTop = container.scrollTop;
-            let scrolledX = bounding.left - scrollLeft;
-            let scrolledYTopEdge = bounding.top - scrollTop;
-            let scrolledYBottomEdge = bounding.top + elOffsetRect.height - scrollTop;
+            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)
@@ -190,7 +194,6 @@ var M = (function (exports) {
         static getDocumentScrollTop() {
             return window.scrollY || document.documentElement.scrollTop || document.body.scrollTop || 0;
         }
-        ;
         /**
          * Retrieves document scroll postion from left.
          */
@@ -203,24 +206,20 @@ var M = (function (exports) {
          * @param wait Wait time.
          * @param options Additional options.
          */
-        static throttle(func, wait, options = null) {
-            let context, args, result;
-            let timeout = null;
-            let previous = 0;
-            options || (options = {});
-            let later = function () {
+        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 function () {
-                let now = new Date().getTime();
+            return (...args) => {
+                const now = new Date().getTime();
                 if (!previous && options.leading === false)
                     previous = now;
-                let remaining = wait - (now - previous);
+                const remaining = wait - (now - previous);
                 context = this;
-                args = arguments;
                 if (remaining <= 0) {
                     clearTimeout(timeout);
                     timeout = null;
@@ -257,7 +256,7 @@ var M = (function (exports) {
                 console.error(Error(el + ' is not an HTML Element'));
             }
             // If exists, destroy and reinitialize in child
-            let ins = classDef.getInstance(el);
+            const ins = classDef.getInstance(el);
             if (!!ins) {
                 ins.destroy();
             }
@@ -285,21 +284,26 @@ var M = (function (exports) {
         /**
          * @returns default options for component instance.
          */
-        static get defaults() { return {}; }
+        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.");
+            throw new Error('This method must be implemented.');
         }
         /**
          * Destroy plugin instance and teardown.
          */
-        destroy() { throw new Error("This method must be implemented."); }
+        destroy() {
+            throw new Error('This method must be implemented.');
+        }
     }
 
-    const _defaults$l = {
+    const _defaults$m = {
         alignment: 'left',
         autoFocus: true,
         constrainWidth: true,
@@ -332,7 +336,7 @@ var M = (function (exports) {
         filterTimeout;
         constructor(el, options) {
             super(el, options, Dropdown);
-            this.el.M_Dropdown = this;
+            this.el['M_Dropdown'] = this;
             Dropdown._dropdowns.push(this);
             this.id = Utils.getIdFromTrigger(el);
             this.dropdownEl = document.getElementById(this.id);
@@ -345,13 +349,14 @@ var M = (function (exports) {
             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$l;
+            return _defaults$m;
         }
         /**
          * Initializes instances of Dropdown.
@@ -362,13 +367,13 @@ var M = (function (exports) {
             return super.init(els, options, Dropdown);
         }
         static getInstance(el) {
-            return el.M_Dropdown;
+            return el['M_Dropdown'];
         }
         destroy() {
             this._resetDropdownStyles();
             this._removeEventHandlers();
             Dropdown._dropdowns.splice(Dropdown._dropdowns.indexOf(this), 1);
-            this.el.M_Dropdown = undefined;
+            this.el['M_Dropdown'] = undefined;
         }
         _setupEventHandlers() {
             // Trigger keydown handler
@@ -412,6 +417,7 @@ var M = (function (exports) {
         }
         _handleClick = (e) => {
             e.preventDefault();
+            this._moveDropdown(e.target.closest('li'));
             if (this.isOpen) {
                 this.close();
             }
@@ -419,7 +425,8 @@ var M = (function (exports) {
                 this.open();
             }
         };
-        _handleMouseEnter = () => {
+        _handleMouseEnter = (e) => {
+            this._moveDropdown(e.target.closest('li'));
             this.open();
         };
         _handleMouseLeave = (e) => {
@@ -427,9 +434,7 @@ var M = (function (exports) {
             const leaveToDropdownContent = !!toEl.closest('.dropdown-content');
             let leaveToActiveDropdownTrigger = false;
             const closestTrigger = toEl.closest('.dropdown-trigger');
-            if (closestTrigger &&
-                !!closestTrigger.M_Dropdown &&
-                closestTrigger.M_Dropdown.isOpen) {
+            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
@@ -439,9 +444,7 @@ var M = (function (exports) {
         };
         _handleDocumentClick = (e) => {
             const target = e.target;
-            if (this.options.closeOnClick &&
-                target.closest('.dropdown-content') &&
-                !this.isTouchMoving) {
+            if (this.options.closeOnClick && target.closest('.dropdown-content') && !this.isTouchMoving) {
                 // isTouchMoving to check if scrolling on mobile.
                 this.close();
             }
@@ -528,12 +531,17 @@ var M = (function (exports) {
             // 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];
+            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);
+                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();
@@ -541,7 +549,7 @@ var M = (function (exports) {
             }
             this.filterTimeout = setTimeout(this._resetFilterQuery, 1000);
         };
-        _handleWindowResize = (e) => {
+        _handleWindowResize = () => {
             // Only re-place the dropdown if it's still visible
             // Accounts for elements hiding via media queries
             if (this.el.offsetParent) {
@@ -553,13 +561,16 @@ var M = (function (exports) {
         };
         _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 = '';
-            this.dropdownEl.style.transform = '';
-            this.dropdownEl.style.opacity = '';
         }
         // Move dropdown after container or trigger
         _moveDropdown(containerEl = null) {
@@ -578,7 +589,7 @@ var M = (function (exports) {
         _makeDropdownFocusable() {
             if (!this.dropdownEl)
                 return;
-            this.dropdownEl.popover = "";
+            this.dropdownEl.popover = '';
             // Needed for arrow key navigation
             this.dropdownEl.tabIndex = 0;
             // Only set tabindex if it hasn't been set by user
@@ -602,7 +613,7 @@ var M = (function (exports) {
             }
         }
         _getDropdownPosition(closestOverflowParent) {
-            this.el.offsetParent.getBoundingClientRect();
+            // const offsetParentBRect = this.el.offsetParent.getBoundingClientRect();
             const triggerBRect = this.el.getBoundingClientRect();
             const dropdownBRect = this.dropdownEl.getBoundingClientRect();
             let idealHeight = dropdownBRect.height;
@@ -686,7 +697,7 @@ var M = (function (exports) {
             this.dropdownEl.style.opacity = '0';
             this.dropdownEl.style.transform = 'scale(0.3, 0.3)';
             setTimeout(() => {
-                // easeOutQuad (opacity) & easeOutQuint    
+                // easeOutQuad (opacity) & easeOutQuint
                 this.dropdownEl.style.transition = `opacity ${duration}ms ease, transform ${duration}ms ease`;
                 // to
                 this.dropdownEl.style.opacity = '1';
@@ -701,7 +712,7 @@ var M = (function (exports) {
         }
         _animateOut() {
             const duration = this.options.outDuration;
-            // easeOutQuad (opacity) & easeOutQuint    
+            // easeOutQuad (opacity) & easeOutQuint
             this.dropdownEl.style.transition = `opacity ${duration}ms ease, transform ${duration}ms ease`;
             // to
             this.dropdownEl.style.opacity = '0';
@@ -722,17 +733,15 @@ var M = (function (exports) {
             }
             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';
+                return (!['HTML', 'BODY'].includes(ancestor.tagName) &&
+                    getComputedStyle(ancestor).overflow !== 'visible');
             });
             // Fallback
             if (!closestOverflowParent) {
-                closestOverflowParent = (!!this.dropdownEl.offsetParent
-                    ? this.dropdownEl.offsetParent
-                    : this.dropdownEl.parentNode);
+                closestOverflowParent = ((!!this.dropdownEl.offsetParent ? this.dropdownEl.offsetParent : this.dropdownEl.parentNode));
             }
             if (getComputedStyle(closestOverflowParent).position === 'static')
                 closestOverflowParent.style.position = 'relative';
@@ -768,6 +777,7 @@ var M = (function (exports) {
             // 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.
@@ -786,23 +796,20 @@ var M = (function (exports) {
             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.dropdownEl.style.width = '';
-                this.dropdownEl.style.height = '';
-                this.dropdownEl.style.left = '';
-                this.dropdownEl.style.top = '';
-                this.dropdownEl.style.transformOrigin = '';
+                this._resetDropdownPositioningStyles();
                 this._placeDropdown();
             }
         };
     }
 
-    let _defaults$k = {
+    const _defaults$l = {
         data: [], // Autocomplete data set
         onAutocomplete: null, // Callback for when autocompleted
         dropdownOptions: {
@@ -815,8 +822,8 @@ var M = (function (exports) {
         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)));
+            autocomplete.setMenuItems(autocomplete.options.data.filter((option) => option.id.toString().toLocaleLowerCase().includes(normSearch) ||
+                option.text?.toLocaleLowerCase().includes(normSearch)));
         },
         maxDropDownHeight: '300px',
         allowUnsafeHTML: false
@@ -839,7 +846,7 @@ var M = (function (exports) {
         menuItems;
         constructor(el, options) {
             super(el, options, Autocomplete);
-            this.el.M_Autocomplete = this;
+            this.el['M_Autocomplete'] = this;
             this.options = {
                 ...Autocomplete.defaults,
                 ...options
@@ -847,7 +854,7 @@ var M = (function (exports) {
             this.isOpen = false;
             this.count = 0;
             this.activeIndex = -1;
-            this.oldVal = "";
+            this.oldVal = '';
             this.selectedValues = [];
             this.menuItems = this.options.data || [];
             this.$active = null;
@@ -856,7 +863,7 @@ var M = (function (exports) {
             this._setupEventHandlers();
         }
         static get defaults() {
-            return _defaults$k;
+            return _defaults$l;
         }
         /**
          * Initializes instances of Autocomplete.
@@ -867,17 +874,17 @@ var M = (function (exports) {
             return super.init(els, options, Autocomplete);
         }
         static getInstance(el) {
-            return el.M_Autocomplete;
+            return el['M_Autocomplete'];
         }
         destroy() {
             this._removeEventHandlers();
             this._removeDropdown();
-            this.el.M_Autocomplete = undefined;
+            this.el['M_Autocomplete'] = undefined;
         }
         _setupEventHandlers() {
             this.el.addEventListener('blur', this._handleInputBlur);
-            this.el.addEventListener('keyup', this._handleInputKeyupAndFocus);
-            this.el.addEventListener('focus', this._handleInputKeyupAndFocus);
+            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);
@@ -889,8 +896,8 @@ var M = (function (exports) {
         }
         _removeEventHandlers() {
             this.el.removeEventListener('blur', this._handleInputBlur);
-            this.el.removeEventListener('keyup', this._handleInputKeyupAndFocus);
-            this.el.removeEventListener('focus', this._handleInputKeyupAndFocus);
+            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);
@@ -906,18 +913,19 @@ var M = (function (exports) {
             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 => {
+            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
-            let dropdownOptions = {
+            const dropdownOptions = {
                 ...Autocomplete.defaults.dropdownOptions,
                 ...this.options.dropdownOptions
             };
-            let userOnItemClick = dropdownOptions.onItemClick;
+            // @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)
@@ -955,21 +963,31 @@ var M = (function (exports) {
                 this._resetAutocomplete();
             }
         };
-        _handleInputKeyupAndFocus = (e) => {
+        _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))
+            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 || e.type !== 'focus')) {
+            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 !== actualValue) {
+            if (this.oldVal !== value) {
                 this._setStatusLoading();
                 this.options.onSearch(this.el.value, this);
             }
@@ -978,7 +996,7 @@ var M = (function (exports) {
                 this.selectedValues = [];
                 this._triggerChanged();
             }
-            this.oldVal = actualValue;
+            this.oldVal = value;
         };
         _handleInputKeydown = (e) => {
             Autocomplete._keydown = true;
@@ -1084,7 +1102,8 @@ var M = (function (exports) {
             item.appendChild(itemText);
             item.querySelector('.item-text').appendChild(div);
             // Description
-            if (typeof entry.description === 'string' || (typeof entry.description === 'number' && !isNaN(entry.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;
@@ -1116,7 +1135,8 @@ var M = (function (exports) {
             }
         }
         _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">
+            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>
@@ -1222,7 +1242,7 @@ var M = (function (exports) {
         }
     }
 
-    let _defaults$j = {
+    const _defaults$k = {
         direction: 'top',
         hoverEnabled: true,
         toolbarEnabled: false
@@ -1243,7 +1263,7 @@ var M = (function (exports) {
         btnWidth;
         constructor(el, options) {
             super(el, options, FloatingActionButton);
-            this.el.M_FloatingActionButton = this;
+            this.el['M_FloatingActionButton'] = this;
             this.options = {
                 ...FloatingActionButton.defaults,
                 ...options
@@ -1267,7 +1287,7 @@ var M = (function (exports) {
             this._setupEventHandlers();
         }
         static get defaults() {
-            return _defaults$j;
+            return _defaults$k;
         }
         /**
          * Initializes instances of FloatingActionButton.
@@ -1278,11 +1298,11 @@ var M = (function (exports) {
             return super.init(els, options, FloatingActionButton);
         }
         static getInstance(el) {
-            return el.M_FloatingActionButton;
+            return el['M_FloatingActionButton'];
         }
         destroy() {
             this._removeEventHandlers();
-            this.el.M_FloatingActionButton = undefined;
+            this.el['M_FloatingActionButton'] = undefined;
         }
         _setupEventHandlers() {
             if (this.options.hoverEnabled && !this.options.toolbarEnabled) {
@@ -1313,7 +1333,7 @@ var M = (function (exports) {
         _handleDocumentClick = (e) => {
             const elem = e.target;
             if (elem !== this._menu)
-                this.close;
+                this.close();
         };
         /**
          * Open FAB.
@@ -1375,17 +1395,15 @@ var M = (function (exports) {
             });
         }
         _animateInToolbar() {
-            let scaleFactor;
-            let windowWidth = window.innerWidth;
-            let windowHeight = window.innerHeight;
-            let btnRect = this.el.getBoundingClientRect();
-            const backdrop = document.createElement('div');
+            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>');
-            const fabColor = getComputedStyle(this._anchor).backgroundColor; // css('background-color');
+            backdrop.style.backgroundColor = fabColor;
             this._anchor.append(backdrop);
             this.offsetX = btnRect.left - windowWidth / 2 + btnRect.width / 2;
             this.offsetY = windowHeight - btnRect.bottom;
-            scaleFactor = windowWidth / backdrop[0].clientWidth;
             this.btnBottom = btnRect.bottom;
             this.btnLeft = btnRect.left;
             this.btnWidth = btnRect.width;
@@ -1399,10 +1417,10 @@ var M = (function (exports) {
             this.el.style.transition = 'none';
             this._anchor.style.transform = `translateY(${this.offsetY}px`;
             this._anchor.style.transition = 'none';
-            backdrop.style.backgroundColor = fabColor;
             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.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';
@@ -1411,7 +1429,9 @@ var M = (function (exports) {
                     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');
+                    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);
@@ -1420,49 +1440,143 @@ var M = (function (exports) {
         }
     }
 
-    class Cards {
-        static Init() {
-            if (typeof document !== 'undefined')
-                document.addEventListener("DOMContentLoaded", () => {
-                    document.body.addEventListener('click', e => {
-                        const trigger = e.target;
-                        const card = trigger.closest('.card');
-                        if (!card)
-                            return;
-                        const cardReveal = Array.from(card.children).find(elem => elem.classList.contains('card-reveal'));
-                        if (!cardReveal)
-                            return;
-                        const initialOverflow = getComputedStyle(card).overflow;
-                        // Close Card
-                        const closeArea = cardReveal.querySelector('.card-reveal .card-title');
-                        if (trigger === closeArea || closeArea.contains(trigger)) {
-                            const duration = 225;
-                            cardReveal.style.transition = `transform ${duration}ms ease`; //easeInOutQuad
-                            cardReveal.style.transform = 'translateY(0)';
-                            setTimeout(() => {
-                                cardReveal.style.display = 'none';
-                                card.style.overflow = initialOverflow;
-                            }, duration);
-                        }
-                        // Reveal Card
-                        const activators = card.querySelectorAll('.activator');
-                        activators.forEach(activator => {
-                            if (trigger === activator || activator.contains(trigger)) {
-                                card.style.overflow = 'hidden';
-                                cardReveal.style.display = 'block';
-                                setTimeout(() => {
-                                    const duration = 300;
-                                    cardReveal.style.transition = `transform ${duration}ms ease`; //easeInOutQuad
-                                    cardReveal.style.transform = 'translateY(-100%)';
-                                }, 1);
-                            }
-                        });
-                    });
+    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();
+        };
     }
 
-    let _defaults$i = {
+    const _defaults$i = {
         duration: 200, // ms
         dist: -100, // zoom scale TODO: make this more intuitive as an option
         shift: 0, // spacing for center image
@@ -1505,7 +1619,7 @@ var M = (function (exports) {
         oneTimeCallback;
         constructor(el, options) {
             super(el, options, Carousel);
-            this.el.M_Carousel = this;
+            this.el['M_Carousel'] = this;
             this.options = {
                 ...Carousel.defaults,
                 ...options
@@ -1538,6 +1652,7 @@ var M = (function (exports) {
                 if (this.showIndicators) {
                     const indicator = document.createElement('li');
                     indicator.classList.add('indicator-item');
+                    indicator.tabIndex = 0;
                     if (i === 0) {
                         indicator.classList.add('active');
                     }
@@ -1552,7 +1667,7 @@ var M = (function (exports) {
             // Setup cross browser string
             this.xform = 'transform';
             ['webkit', 'Moz', 'O', 'ms'].every((prefix) => {
-                var e = prefix + 'Transform';
+                const e = prefix + 'Transform';
                 if (typeof document.body.style[e] !== 'undefined') {
                     this.xform = e;
                     return false;
@@ -1574,11 +1689,11 @@ var M = (function (exports) {
             return super.init(els, options, Carousel);
         }
         static getInstance(el) {
-            return el.M_Carousel;
+            return el['M_Carousel'];
         }
         destroy() {
             this._removeEventHandlers();
-            this.el.M_Carousel = undefined;
+            this.el['M_Carousel'] = undefined;
         }
         _setupEventHandlers() {
             if (typeof window.ontouchstart !== 'undefined') {
@@ -1594,6 +1709,7 @@ var M = (function (exports) {
             if (this.showIndicators && this._indicators) {
                 this._indicators.querySelectorAll('.indicator-item').forEach((el) => {
                     el.addEventListener('click', this._handleIndicatorClick);
+                    el.addEventListener('keypress', this._handleIndicatorKeyPress);
                 });
             }
             // Resize
@@ -1617,7 +1733,9 @@ var M = (function (exports) {
             }
             window.removeEventListener('resize', this._handleThrottledResize);
         }
-        _handleThrottledResize = Utils.throttle(function () { this._handleResize(); }, 200, null).bind(this);
+        _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') {
@@ -1720,7 +1838,8 @@ var M = (function (exports) {
                 // 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) {
+                    if (e.clientX - e.target.getBoundingClientRect().left >
+                        this.el.clientWidth / 2) {
                         this.next();
                     }
                     else {
@@ -1734,6 +1853,15 @@ var M = (function (exports) {
         };
         _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);
@@ -1787,7 +1915,7 @@ var M = (function (exports) {
         }
         _xpos(e) {
             // touch event
-            if (e.type.startsWith("touch") && e.targetTouches.length >= 1) {
+            if (e.type.startsWith('touch') && e.targetTouches.length >= 1) {
                 return e.targetTouches[0].clientX;
             }
             // mouse event
@@ -1795,27 +1923,23 @@ var M = (function (exports) {
         }
         _ypos(e) {
             // touch event
-            if (e.type.startsWith("touch") && e.targetTouches.length >= 1) {
+            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;
+            return x >= this.count ? x % this.count : x < 0 ? this._wrap(this.count + (x % this.count)) : x;
         }
         _track = () => {
-            let now, elapsed, delta, v;
-            now = Date.now();
-            elapsed = now - this.timestamp;
+            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;
+            // delta = this.offset - this.frame;
             this.frame = this.offset;
-            v = (1000 * delta) / (1 + elapsed);
+            // v = (1000 * delta) / (1 + elapsed);
             this.velocity = 0.8 * v + 0.2 * this.velocity;
         };
         _autoScroll = () => {
@@ -1838,21 +1962,22 @@ var M = (function (exports) {
                 this.el.classList.add('scrolling');
             }
             if (this.scrollingTimeout != null) {
-                window.clearTimeout(this.scrollingTimeout);
+                clearTimeout(this.scrollingTimeout);
             }
-            this.scrollingTimeout = window.setTimeout(() => {
+            this.scrollingTimeout = setTimeout(() => {
                 this.el.classList.remove('scrolling');
             }, this.options.duration);
             // Start actual scroll
-            let i, half, delta, dir, tween, el, alignment, zTranslation, tweenedOpacity, centerTweenedOpacity;
-            let lastCenter = this.center;
-            let numVisibleOffset = 1 / this.options.numVisible;
             this.offset = typeof x === 'number' ? x : this.offset;
             this.center = Math.floor((this.offset + this.dim / 2) / this.dim);
-            delta = this.offset - this.center * this.dim;
-            dir = delta < 0 ? 1 : -1;
-            tween = (-dir * delta * 2) / this.dim;
-            half = this.count >> 1;
+            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;
@@ -1882,10 +2007,7 @@ var M = (function (exports) {
                     this.el.querySelector('.carousel-item').classList.remove('active');
                     el.classList.add('active');
                 }
-                let transformString = `${alignment} translateX(${-delta / 2}px) translateX(${dir *
-                this.options.shift *
-                tween *
-                i}px) translateZ(${this.options.dist * tween}px)`;
+                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) {
@@ -1901,8 +2023,7 @@ var M = (function (exports) {
                 // Don't show wrapped items.
                 if (!this.noWrap || this.center + i < this.count) {
                     el = this.images[this._wrap(this.center + i)];
-                    let transformString = `${alignment} translateX(${this.options.shift +
-                    (this.dim * i - delta) / 2}px) translateZ(${zTranslation}px)`;
+                    const transformString = `${alignment} translateX(${this.options.shift + (this.dim * i - delta) / 2}px) translateZ(${zTranslation}px)`;
                     this._updateItemStyle(el, tweenedOpacity, -i, transformString);
                 }
                 // left side
@@ -1917,8 +2038,7 @@ var M = (function (exports) {
                 // Don't show wrapped items.
                 if (!this.noWrap || this.center - i >= 0) {
                     el = this.images[this._wrap(this.center - i)];
-                    let transformString = `${alignment} translateX(${-this.options.shift +
-                    (-this.dim * i - delta) / 2}px) translateZ(${zTranslation}px)`;
+                    const transformString = `${alignment} translateX(${-this.options.shift + (-this.dim * i - delta) / 2}px) translateZ(${zTranslation}px)`;
                     this._updateItemStyle(el, tweenedOpacity, -i, transformString);
                 }
             }
@@ -1926,9 +2046,7 @@ var M = (function (exports) {
             // Don't show wrapped items.
             if (!this.noWrap || (this.center >= 0 && this.center < this.count)) {
                 el = this.images[this._wrap(this.center)];
-                let transformString = `${alignment} translateX(${-delta / 2}px) translateX(${dir *
-                this.options.shift *
-                tween}px) translateZ(${this.options.dist * tween}px)`;
+                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
@@ -2032,7 +2150,7 @@ var M = (function (exports) {
         }
     }
 
-    let _defaults$h = {
+    const _defaults$h = {
         data: [],
         placeholder: '',
         secondaryPlaceholder: '',
@@ -2040,6 +2158,7 @@ var M = (function (exports) {
         autocompleteOptions: {},
         autocompleteOnly: false,
         limit: Infinity,
+        allowUserInput: false,
         onChipAdd: null,
         onChipSelect: null,
         onChipDelete: null
@@ -2061,30 +2180,28 @@ var M = (function (exports) {
         _selectedChip;
         constructor(el, options) {
             super(el, options, Chips);
-            this.el.M_Chips = this;
+            this.el['M_Chips'] = this;
             this.options = {
                 ...Chips.defaults,
                 ...options
             };
-            this.el.classList.add('chips', 'input-field');
+            this.el.classList.add('chips');
             this.chipsData = [];
             this._chips = [];
-            this._setupInput();
-            this.hasAutocomplete = Object.keys(this.options.autocompleteOptions).length > 0;
-            // Set input id
-            if (!this._input.getAttribute('id'))
-                this._input.setAttribute('id', Utils.guid());
             // Render initial chips
             if (this.options.data.length) {
                 this.chipsData = this.options.data;
                 this._renderChips();
             }
-            // Setup autocomplete if needed
-            if (this.hasAutocomplete)
-                this._setupAutocomplete();
-            this._setPlaceholder();
             this._setupLabel();
-            this._setupEventHandlers();
+            // 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;
@@ -2098,19 +2215,22 @@ var M = (function (exports) {
             return super.init(els, options, Chips);
         }
         static getInstance(el) {
-            return el.M_Chips;
+            return el['M_Chips'];
         }
         getData() {
             return this.chipsData;
         }
         destroy() {
-            this._removeEventHandlers();
-            this._chips.forEach(c => c.remove());
+            if (this.options.allowUserInput) {
+                this._removeEventHandlers();
+            }
+            this._chips.forEach((c) => c.remove());
             this._chips = [];
-            this.el.M_Chips = undefined;
+            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);
@@ -2153,7 +2273,7 @@ var M = (function (exports) {
             const tag = e.target.tagName;
             if (tag === 'INPUT' || tag === 'TEXTAREA' || !chipsKeydown)
                 return;
-            const currChips = chips.M_Chips;
+            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;
@@ -2187,13 +2307,13 @@ var M = (function (exports) {
                 }
             }
         }
-        static _handleChipsKeyup(e) {
+        static _handleChipsKeyup() {
             Chips._keydown = false;
         }
         static _handleChipsBlur(e) {
             if (!Chips._keydown && document.hidden) {
                 const chips = e.target.closest('.chips');
-                const currChips = chips.M_Chips;
+                const currChips = chips['M_Chips'];
                 currChips._selectedChip = null;
             }
         }
@@ -2229,17 +2349,19 @@ var M = (function (exports) {
             const renderedChip = document.createElement('div');
             renderedChip.classList.add('chip');
             renderedChip.innerText = chip.text || chip.id;
-            renderedChip.setAttribute('tabindex', "0");
-            const closeIcon = document.createElement('i');
-            closeIcon.classList.add(this.options.closeIconClass, 'close');
-            closeIcon.innerText = 'close';
             // attach image if needed
             if (chip.image) {
                 const img = document.createElement('img');
                 img.setAttribute('src', chip.image);
                 renderedChip.insertBefore(img, renderedChip.firstChild);
             }
-            renderedChip.appendChild(closeIcon);
+            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() {
@@ -2249,8 +2371,6 @@ var M = (function (exports) {
                 this.el.appendChild(chipElem);
                 this._chips.push(chipElem);
             }
-            // move input to end
-            this.el.append(this._input);
         }
         _setupAutocomplete() {
             this.options.autocompleteOptions.onAutocomplete = (items) => {
@@ -2272,6 +2392,14 @@ var M = (function (exports) {
                 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');
@@ -2289,7 +2417,7 @@ var M = (function (exports) {
         }
         _isValidAndNotExist(chip) {
             const isValid = !!chip.id;
-            const doesNotExist = !this.chipsData.some(item => item.id == chip.id);
+            const doesNotExist = !this.chipsData.some((item) => item.id == chip.id);
             return isValid && doesNotExist;
         }
         /**
@@ -2340,15 +2468,18 @@ var M = (function (exports) {
         }
         static Init() {
             if (typeof document !== 'undefined')
-                document.addEventListener("DOMContentLoaded", () => {
-                    // Handle removal of static chips.
-                    document.body.addEventListener('click', e => {
-                        if (e.target.closest('.chip .close')) {
-                            const chips = e.target.closest('.chips');
-                            if (chips && chips.M_Chips == undefined)
-                                return;
-                            e.target.closest('.chip').remove();
-                        }
+                // 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();
+                            }
+                        });
                     });
                 });
         }
@@ -2370,14 +2501,14 @@ var M = (function (exports) {
         _headers;
         constructor(el, options) {
             super(el, options, Collapsible);
-            this.el.M_Collapsible = this;
+            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._headers.forEach((el) => (el.tabIndex = 0));
             this._setupEventHandlers();
             // Open active
             const activeBodies = Array.from(this.el.querySelectorAll('li.active > .collapsible-body'));
@@ -2389,7 +2520,7 @@ var M = (function (exports) {
             }
             else {
                 // Expandables => all active
-                activeBodies.forEach(el => this._setExpanded(el));
+                activeBodies.forEach((el) => this._setExpanded(el));
             }
         }
         static get defaults() {
@@ -2404,19 +2535,19 @@ var M = (function (exports) {
             return super.init(els, options, Collapsible);
         }
         static getInstance(el) {
-            return el.M_Collapsible;
+            return el['M_Collapsible'];
         }
         destroy() {
             this._removeEventHandlers();
-            this.el.M_Collapsible = undefined;
+            this.el['M_Collapsible'] = undefined;
         }
         _setupEventHandlers() {
             this.el.addEventListener('click', this._handleCollapsibleClick);
-            this._headers.forEach(header => header.addEventListener('keydown', this._handleCollapsibleKeydown));
+            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));
+            this._headers.forEach((header) => header.removeEventListener('keydown', this._handleCollapsibleKeydown));
         }
         _handleCollapsibleClick = (e) => {
             const header = e.target.closest('.collapsible-header');
@@ -2439,7 +2570,7 @@ var M = (function (exports) {
             }
         };
         _setExpanded(li) {
-            li.style.maxHeight = li.scrollHeight + "px";
+            li.style.maxHeight = li.scrollHeight + 'px';
         }
         _animateIn(index) {
             const li = this.el.children[index];
@@ -2462,7 +2593,7 @@ var M = (function (exports) {
             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";
+            body.style.maxHeight = '0';
             setTimeout(() => {
                 if (typeof this.options.onCloseEnd === 'function') {
                     this.options.onCloseEnd.call(this, li);
@@ -2474,7 +2605,7 @@ var M = (function (exports) {
          * @param n Nth section to open.
          */
         open = (index) => {
-            const listItems = Array.from(this.el.children).filter(c => c.tagName === 'LI');
+            const listItems = Array.from(this.el.children).filter((c) => c.tagName === 'LI');
             const li = listItems[index];
             if (li && !li.classList.contains('active')) {
                 // onOpenStart callback
@@ -2483,8 +2614,8 @@ var M = (function (exports) {
                 }
                 // Handle accordion behavior
                 if (this.options.accordion) {
-                    const activeLis = listItems.filter(li => li.classList.contains('active'));
-                    activeLis.forEach(activeLi => {
+                    const activeLis = listItems.filter((li) => li.classList.contains('active'));
+                    activeLis.forEach((activeLi) => {
                         const index = listItems.indexOf(activeLi);
                         this.close(index);
                     });
@@ -2499,7 +2630,7 @@ var M = (function (exports) {
          * @param n Nth section to close.
          */
         close = (index) => {
-            const li = Array.from(this.el.children).filter(c => c.tagName === 'LI')[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') {
@@ -2513,271 +2644,6 @@ var M = (function (exports) {
     }
 
     const _defaults$f = {
-        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 {
-        static _modalsOpen;
-        static _count;
-        /**
-         * ID of the modal element.
-         */
-        id;
-        /**
-         * If the modal is open.
-         */
-        isOpen;
-        _openingTrigger;
-        _overlay;
-        _nthModalOpened;
-        constructor(el, options) {
-            super(el, options, Modal);
-            this.el.M_Modal = this;
-            this.options = {
-                ...Modal.defaults,
-                ...options
-            };
-            this.isOpen = false;
-            this.id = this.el.id;
-            this._openingTrigger = undefined;
-            this._overlay = document.createElement('div');
-            this._overlay.classList.add('modal-overlay');
-            this.el.tabIndex = 0;
-            this._nthModalOpened = 0;
-            Modal._count++;
-            this._setupEventHandlers();
-        }
-        static get defaults() {
-            return _defaults$f;
-        }
-        /**
-         * Initializes instances of Modal.
-         * @param els HTML elements.
-         * @param options Component options.
-         * @returns {Modal | Modal[]}
-         */
-        static init(els, options = {}) {
-            return super.init(els, options, Modal);
-        }
-        static getInstance(el) {
-            return el.M_Modal;
-        }
-        destroy() {
-            Modal._count--;
-            this._removeEventHandlers();
-            this.el.removeAttribute('style');
-            this._overlay.remove();
-            this.el.M_Modal = undefined;
-        }
-        _setupEventHandlers() {
-            if (Modal._count === 1) {
-                document.body.addEventListener('click', this._handleTriggerClick);
-            }
-            this._overlay.addEventListener('click', this._handleOverlayClick);
-            this.el.addEventListener('click', this._handleModalCloseClick);
-        }
-        _removeEventHandlers() {
-            if (Modal._count === 0) {
-                document.body.removeEventListener('click', this._handleTriggerClick);
-            }
-            this._overlay.removeEventListener('click', this._handleOverlayClick);
-            this.el.removeEventListener('click', this._handleModalCloseClick);
-        }
-        _handleTriggerClick = (e) => {
-            const trigger = e.target.closest('.modal-trigger');
-            if (!trigger)
-                return;
-            const modalId = Utils.getIdFromTrigger(trigger);
-            const modalInstance = document.getElementById(modalId).M_Modal;
-            if (modalInstance)
-                modalInstance.open(trigger);
-            e.preventDefault();
-        };
-        _handleOverlayClick = () => {
-            if (this.options.dismissible)
-                this.close();
-        };
-        _handleModalCloseClick = (e) => {
-            const closeTrigger = e.target.closest('.modal-close');
-            if (closeTrigger)
-                this.close();
-        };
-        _handleKeydown = (e) => {
-            if (Utils.keys.ESC.includes(e.key) && this.options.dismissible)
-                this.close();
-        };
-        _handleFocus = (e) => {
-            // Only trap focus if this modal is the last model opened (prevents loops in nested modals).
-            if (!this.el.contains(e.target) && this._nthModalOpened === Modal._modalsOpen) {
-                this.el.focus();
-            }
-        };
-        _animateIn() {
-            // Set initial styles
-            this._overlay.style.display = 'block';
-            this._overlay.style.opacity = '0';
-            this.el.style.display = 'block';
-            this.el.style.opacity = '0';
-            const duration = this.options.inDuration;
-            const isBottomSheet = this.el.classList.contains('bottom-sheet');
-            if (!isBottomSheet) {
-                this.el.style.top = this.options.startingTop;
-                this.el.style.transform = 'scaleX(0.9) scaleY(0.9)';
-            }
-            // Overlay
-            this._overlay.style.transition = `opacity ${duration}ms ease-out`; // v1: easeOutQuad
-            // Modal
-            this.el.style.transition = `
-      top ${duration}ms ease-out,
-      bottom ${duration}ms ease-out,
-      opacity ${duration}ms ease-out,
-      transform ${duration}ms ease-out
-    `;
-            setTimeout(() => {
-                this._overlay.style.opacity = this.options.opacity.toString();
-                this.el.style.opacity = '1';
-                if (isBottomSheet) {
-                    this.el.style.bottom = '0';
-                }
-                else {
-                    this.el.style.top = this.options.endingTop;
-                    this.el.style.transform = 'scaleX(1) scaleY(1)';
-                }
-                setTimeout(() => {
-                    if (typeof this.options.onOpenEnd === 'function') {
-                        this.options.onOpenEnd.call(this, this.el, this._openingTrigger);
-                    }
-                }, duration);
-            }, 1);
-        }
-        _animateOut() {
-            const duration = this.options.outDuration;
-            const isBottomSheet = this.el.classList.contains('bottom-sheet');
-            if (!isBottomSheet) {
-                this.el.style.top = this.options.endingTop;
-            }
-            // Overlay
-            this._overlay.style.transition = `opacity ${duration}ms ease-out`; // v1: easeOutQuart
-            // Modal // easeOutCubic
-            this.el.style.transition = `
-      top ${duration}ms ease-out,
-      bottom ${duration}ms ease-out,
-      opacity ${duration}ms ease-out,
-      transform ${duration}ms ease-out
-    `;
-            setTimeout(() => {
-                this._overlay.style.opacity = '0';
-                this.el.style.opacity = '0';
-                if (isBottomSheet) {
-                    this.el.style.bottom = '-100%';
-                }
-                else {
-                    this.el.style.top = this.options.startingTop;
-                    this.el.style.transform = 'scaleX(0.9) scaleY(0.9)';
-                }
-                setTimeout(() => {
-                    this.el.style.display = 'none';
-                    this._overlay.remove();
-                    if (typeof this.options.onCloseEnd === 'function') {
-                        this.options.onCloseEnd.call(this, this.el);
-                    }
-                }, duration);
-            }, 1);
-        }
-        /**
-         * Open modal.
-         */
-        open = (trigger) => {
-            if (this.isOpen)
-                return;
-            this.isOpen = true;
-            Modal._modalsOpen++;
-            this._nthModalOpened = Modal._modalsOpen;
-            // Set Z-Index based on number of currently open modals
-            this._overlay.style.zIndex = (1000 + Modal._modalsOpen * 2).toString();
-            this.el.style.zIndex = (1000 + Modal._modalsOpen * 2 + 1).toString();
-            // Set opening trigger, undefined indicates modal was opened by javascript
-            this._openingTrigger = !!trigger ? trigger : undefined;
-            // onOpenStart callback
-            if (typeof this.options.onOpenStart === 'function') {
-                this.options.onOpenStart.call(this, this.el, this._openingTrigger);
-            }
-            if (this.options.preventScrolling) {
-                const hasVerticalScrollBar = document.documentElement.scrollHeight > document.documentElement.clientHeight;
-                if (hasVerticalScrollBar) {
-                    const scrollTop = document.documentElement.scrollTop;
-                    document.documentElement.style.top = '-' + scrollTop + "px";
-                    document.documentElement.classList.add('noscroll');
-                }
-            }
-            this.el.classList.add('open');
-            this.el.insertAdjacentElement('afterend', this._overlay);
-            if (this.options.dismissible) {
-                document.addEventListener('keydown', this._handleKeydown);
-                document.addEventListener('focus', this._handleFocus, true);
-            }
-            this._animateIn();
-            // Focus modal
-            this.el.focus();
-            return this;
-        };
-        /**
-         * Close modal.
-         */
-        close = () => {
-            if (!this.isOpen)
-                return;
-            this.isOpen = false;
-            Modal._modalsOpen--;
-            this._nthModalOpened = 0;
-            // Call onCloseStart callback
-            if (typeof this.options.onCloseStart === 'function') {
-                this.options.onCloseStart.call(this, this.el);
-            }
-            this.el.classList.remove('open');
-            // Enable body scrolling only if there are no more modals open.
-            if (Modal._modalsOpen === 0) {
-                const scrollTop = -parseInt(document.documentElement.style.top);
-                document.documentElement.style.removeProperty("top");
-                document.documentElement.classList.remove('noscroll');
-                document.documentElement.scrollTop = scrollTop;
-            }
-            if (this.options.dismissible) {
-                document.removeEventListener('keydown', this._handleKeydown);
-                document.removeEventListener('focus', this._handleFocus, true);
-            }
-            this._animateOut();
-            return this;
-        };
-        // Experimental!
-        // also note: https://stackoverflow.com/a/35385518/8830502
-        static create(children = '') {
-            return `<dialog id="modal1" class="modal">
-      <div class="modal-content">
-        <h4>${children}</h4>
-        <p>A bunch of text</p>
-      </div>
-      <div class="modal-footer">
-        <a href="#!" class="modal-close waves-effect btn-flat">Agree</a>
-      </div>
-    </dialog>`;
-        }
-        static {
-            Modal._modalsOpen = 0;
-            Modal._count = 0;
-        }
-    }
-
-    let _defaults$e = {
         classes: '',
         dropdownOptions: {}
     };
@@ -2803,7 +2669,7 @@ var M = (function (exports) {
             super(el, options, FormSelect);
             if (this.el.classList.contains('browser-default'))
                 return;
-            this.el.M_FormSelect = this;
+            this.el['M_FormSelect'] = this;
             this.options = {
                 ...FormSelect.defaults,
                 ...options
@@ -2815,7 +2681,7 @@ var M = (function (exports) {
             this._setupEventHandlers();
         }
         static get defaults() {
-            return _defaults$e;
+            return _defaults$f;
         }
         /**
          * Initializes instances of FormSelect.
@@ -2826,18 +2692,18 @@ var M = (function (exports) {
             return super.init(els, options, FormSelect);
         }
         static getInstance(el) {
-            return el.M_FormSelect;
+            return el['M_FormSelect'];
         }
         destroy() {
             this._removeEventHandlers();
             this._removeDropdown();
-            this.el.M_FormSelect = undefined;
+            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")
+                    if (e.key === ' ' || e.key === 'Enter')
                         this._handleOptionClick(e);
                 });
             });
@@ -2873,7 +2739,8 @@ var M = (function (exports) {
             return true;
         }
         _selectOptionElement(virtualOption) {
-            if (!virtualOption.classList.contains('disabled') && !virtualOption.classList.contains('optgroup')) {
+            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) {
@@ -2919,7 +2786,7 @@ var M = (function (exports) {
             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));
+            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()}`;
@@ -2938,7 +2805,7 @@ var M = (function (exports) {
                     }
                     else if (realOption.tagName === 'OPTGROUP') {
                         // Optgroup
-                        const groupId = "opt-group-" + Utils.guid();
+                        const groupId = 'opt-group-' + Utils.guid();
                         const groupParent = document.createElement('li');
                         groupParent.classList.add('optgroup');
                         groupParent.tabIndex = -1;
@@ -2947,42 +2814,42 @@ var M = (function (exports) {
                         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 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();
+                            const childId = 'opt-child-' + Utils.guid();
                             virtualOption.id = childId;
                             groupChildren.push(childId);
                             this._addOptionToValues(realOption, virtualOption);
                         });
-                        groupParent.setAttribute("aria-owns", groupChildren.join(" "));
+                        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.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"));
+            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-"))
+                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.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
@@ -3001,7 +2868,7 @@ var M = (function (exports) {
                 const userOnOpenEnd = dropdownOptions.onOpenEnd;
                 const userOnCloseEnd = dropdownOptions.onCloseEnd;
                 // Add callback for centering selected option when dropdown content is scrollable
-                dropdownOptions.onOpenEnd = (el) => {
+                dropdownOptions.onOpenEnd = () => {
                     const selectedOption = this.dropdownOptions.querySelector('.selected');
                     if (selectedOption) {
                         // Focus selected option in dropdown
@@ -3023,7 +2890,7 @@ var M = (function (exports) {
                         userOnOpenEnd.call(this.dropdown, this.el);
                 };
                 // Add callback for reseting "expanded" state
-                dropdownOptions.onCloseEnd = (el) => {
+                dropdownOptions.onCloseEnd = () => {
                     this.input.ariaExpanded = 'false';
                     // Handle user declared onOpenEnd if needed
                     if (userOnCloseEnd && typeof userOnCloseEnd === 'function')
@@ -3101,7 +2968,7 @@ var M = (function (exports) {
                 checkbox.checked = false;
         }
         _deselectAll() {
-            this._values.forEach(value => this._deselectValue(value));
+            this._values.forEach((value) => this._deselectValue(value));
         }
         _isValueSelected(value) {
             const realValues = this.getSelectedValues();
@@ -3121,7 +2988,7 @@ var M = (function (exports) {
             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 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) {
@@ -3152,7 +3019,7 @@ var M = (function (exports) {
             if (!li)
                 return;
             if (!this.isMultiple)
-                ul.querySelectorAll('li.selected').forEach(li => li.classList.remove('selected'));
+                ul.querySelectorAll('li.selected').forEach((li) => li.classList.remove('selected'));
             li.classList.add('selected');
             li.ariaSelected = 'true';
         }
@@ -3161,17 +3028,23 @@ var M = (function (exports) {
         }
     }
 
-    let _defaults$d = {
-        // Close when date is selected
-        autoClose: false,
+    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 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)
@@ -3242,15 +3115,11 @@ var M = (function (exports) {
         events: [],
         // callback function
         onSelect: null,
-        onOpen: null,
-        onClose: null,
         onDraw: null
     };
     class Datepicker extends Component {
         id;
-        /** If the picker is open. */
-        isOpen;
-        modal;
+        multiple = false;
         calendarEl;
         /** CLEAR button instance. */
         clearBtn;
@@ -3260,8 +3129,12 @@ var M = (function (exports) {
         modalEl;
         yearTextEl;
         dateTextEl;
+        endDateEl;
+        dateEls;
         /** The selected Date. */
         date;
+        endDate;
+        dates;
         formats;
         calendars;
         _y;
@@ -3269,7 +3142,7 @@ var M = (function (exports) {
         static _template;
         constructor(el, options) {
             super(el, options, Datepicker);
-            this.el.M_Datepicker = this;
+            this.el['M_Datepicker'] = this;
             this.options = {
                 ...Datepicker.defaults,
                 ...options
@@ -3286,16 +3159,15 @@ var M = (function (exports) {
             this.id = Utils.guid();
             this._setupVariables();
             this._insertHTMLIntoDOM();
-            this._setupModal();
             this._setupEventHandlers();
             if (!this.options.defaultDate) {
                 this.options.defaultDate = new Date(Date.parse(this.el.value));
             }
-            let defDate = this.options.defaultDate;
+            const defDate = this.options.defaultDate;
             if (Datepicker._isDate(defDate)) {
                 if (this.options.setDefaultDate) {
                     this.setDate(defDate, true);
-                    this.setInputValue();
+                    this.setInputValue(this.el, defDate);
                 }
                 else {
                     this.gotoDate(defDate);
@@ -3304,10 +3176,25 @@ var M = (function (exports) {
             else {
                 this.gotoDate(new Date());
             }
-            this.isOpen = false;
+            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$d;
+            return _defaults$e;
         }
         /**
          * Initializes instances of Datepicker.
@@ -3321,9 +3208,12 @@ var M = (function (exports) {
             return /Date/.test(Object.prototype.toString.call(obj)) && !isNaN(obj.getTime());
         }
         static _isWeekend(date) {
-            let day = date.getDay();
+            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);
@@ -3339,27 +3229,40 @@ var M = (function (exports) {
             // 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;
+            return el['M_Datepicker'];
         }
         destroy() {
             this._removeEventHandlers();
-            this.modal.destroy();
             this.modalEl.remove();
             this.destroySelects();
-            this.el.M_Datepicker = undefined;
+            this.el['M_Datepicker'] = undefined;
         }
         destroySelects() {
-            let oldYearSelect = this.calendarEl.querySelector('.orig-select-year');
+            const oldYearSelect = this.calendarEl.querySelector('.orig-select-year');
             if (oldYearSelect) {
                 FormSelect.getInstance(oldYearSelect).destroy();
             }
-            let oldMonthSelect = this.calendarEl.querySelector('.orig-select-month');
+            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.options.isDateRange) {
+                this.endDateEl = this.createDateInput();
+                this.endDateEl.classList.add('datepicker-end-date');
+            }
             if (this.options.showClearBtn) {
                 this.clearBtn.style.visibility = '';
                 this.clearBtn.innerText = this.options.i18n.clear;
@@ -3377,39 +3280,59 @@ var M = (function (exports) {
                 this.el.parentElement.appendChild(this.modalEl);
             }
         }
-        _setupModal() {
-            this.modalEl.id = 'modal-' + this.id;
-            this.modal = Modal.init(this.modalEl, {
-                onCloseEnd: () => {
-                    this.isOpen = false;
-                }
-            });
-        }
         /**
-         * Gets a string representation of the selected date.
+         * Gets a string representation of the given date.
          */
-        toString(format = null) {
+        toString(date = this.date, format = null) {
             format = format || this.options.format;
             if (typeof format === 'function')
-                return format(this.date);
-            if (!Datepicker._isDate(this.date))
+                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);
-            const formattedDate = formatArray
-                .map(label => this.formats[label] ? this.formats[label]() : label)
+            return formatArray
+                .map((label) => (this.formats[label] ? this.formats[label](date) : label))
                 .join('');
-            return formattedDate;
+        }
+        /**
+         * 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) {
+        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.date = null;
-                this._renderDateDisplay();
+                this._renderDateDisplay(date);
                 return this.draw();
             }
             if (typeof date === 'string') {
@@ -3418,36 +3341,114 @@ var M = (function (exports) {
             if (!Datepicker._isDate(date)) {
                 return;
             }
-            let min = this.options.minDate, max = this.options.maxDate;
+            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;
             }
-            this.date = new Date(date.getTime());
-            this._renderDateDisplay();
-            Datepicker._setToStartOfDay(this.date);
-            this.gotoDate(this.date);
-            if (!preventOnSelect && typeof this.options.onSelect === 'function') {
-                this.options.onSelect.call(this, this.date);
+            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 current date as the input value.
+         * Sets given date as the input value on the given element.
          */
-        setInputValue() {
-            this.el.value = this.toString();
-            this.el.dispatchEvent(new CustomEvent('change', { bubbles: true, cancelable: true, composed: true, detail: { firedBy: this } }));
-        }
-        _renderDateDisplay() {
-            let displayDate = Datepicker._isDate(this.date) ? this.date : new Date();
-            let i18n = this.options.i18n;
-            let day = i18n.weekdaysShort[displayDate.getDay()];
-            let month = i18n.monthsShort[displayDate.getMonth()];
-            let date = displayDate.getDate();
-            this.yearTextEl.innerHTML = displayDate.getFullYear().toString();
-            this.dateTextEl.innerHTML = `${day}, ${month} ${date}`;
+        setInputValue(el, date) {
+            console.log('setinputvalue');
+            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.
@@ -3459,7 +3460,7 @@ var M = (function (exports) {
                 return;
             }
             if (this.calendars) {
-                let 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();
+                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);
@@ -3500,15 +3501,16 @@ var M = (function (exports) {
             this.adjustCalendars();
         }
         render(year, month, randId) {
-            let opts = this.options, now = new Date(), days = Datepicker._getDaysInMonth(year, month), before = new Date(year, month, 1).getDay(), data = [], row = [];
+            const now = new Date(), days = Datepicker._getDaysInMonth(year, month), data = [];
+            let before = new Date(year, month, 1).getDay(), row = [];
             Datepicker._setToStartOfDay(now);
-            if (opts.firstDay > 0) {
-                before -= opts.firstDay;
+            if (this.options.firstDay > 0) {
+                before -= this.options.firstDay;
                 if (before < 0) {
                     before += 7;
                 }
             }
-            let 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);
+            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;
@@ -3516,12 +3518,27 @@ var M = (function (exports) {
             cells += 7 - after;
             let isWeekSelected = false;
             for (let i = 0, r = 0; i < cells; i++) {
-                let day = new Date(year, month, 1 + (i - before)), isSelected = Datepicker._isDate(this.date)
-                    ? Datepicker._compareDates(day, this.date)
-                    : false, isToday = Datepicker._compareDates(day, now), hasEvent = opts.events.indexOf(day.toDateString()) !== -1 ? true : false, isEmpty = i < before || i >= days + before, dayNumber = 1 + (i - before), monthNumber = month, yearNumber = year, isStartRange = opts.startRange && Datepicker._compareDates(opts.startRange, day), isEndRange = opts.endRange && Datepicker._compareDates(opts.endRange, day), isInRange = opts.startRange && opts.endRange && opts.startRange < day && day < opts.endRange, isDisabled = (opts.minDate && day < opts.minDate) ||
-                    (opts.maxDate && day > opts.maxDate) ||
-                    (opts.disableWeekends && Datepicker._isWeekend(day)) ||
-                    (opts.disableDayFn && opts.disableDayFn(day));
+                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)), 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;
@@ -3534,7 +3551,7 @@ var M = (function (exports) {
                         yearNumber = yearOfNextMonth;
                     }
                 }
-                let dayConfig = {
+                const dayConfig = {
                     day: dayNumber,
                     month: monthNumber,
                     year: yearNumber,
@@ -3546,20 +3563,21 @@ var M = (function (exports) {
                     isStartRange: isStartRange,
                     isEndRange: isEndRange,
                     isInRange: isInRange,
-                    showDaysInNextAndPreviousMonths: opts.showDaysInNextAndPreviousMonths
+                    showDaysInNextAndPreviousMonths: this.options.showDaysInNextAndPreviousMonths,
+                    isDateRange: isDateRange
                 };
                 row.push(this.renderDay(dayConfig));
                 if (++r === 7) {
-                    data.push(this.renderRow(row, opts.isRTL, isWeekSelected));
+                    data.push(this.renderRow(row, this.options.isRTL, isWeekSelected));
                     row = [];
                     r = 0;
                     isWeekSelected = false;
                 }
             }
-            return this.renderTable(opts, data, randId);
+            return this.renderTable(this.options, data, randId);
         }
         renderDay(opts) {
-            let arr = [];
+            const arr = [];
             let ariaSelected = 'false';
             if (opts.isEmpty) {
                 if (opts.showDaysInNextAndPreviousMonths) {
@@ -3570,6 +3588,7 @@ var M = (function (exports) {
                     return '<td class="is-empty"></td>';
                 }
             }
+            // @todo wouldn't it be better defining opts class mapping and looping trough opts?
             if (opts.isDisabled) {
                 arr.push('is-disabled');
             }
@@ -3580,18 +3599,26 @@ var M = (function (exports) {
                 arr.push('is-selected');
                 ariaSelected = 'true';
             }
+            // @todo should we create this additional css class?
             if (opts.hasEvent) {
                 arr.push('has-event');
             }
+            // @todo should we create this additional css class?
             if (opts.isInRange) {
                 arr.push('is-inrange');
             }
+            // @todo should we create this additional css class?
             if (opts.isStartRange) {
                 arr.push('is-startrange');
             }
+            // @todo should we create this additional css class?
             if (opts.isEndRange) {
                 arr.push('is-endrange');
             }
+            // @todo create additional css class
+            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>` +
                 '</td>');
@@ -3612,7 +3639,8 @@ var M = (function (exports) {
                 '</table></div>');
         }
         renderHead(opts) {
-            let i, arr = [];
+            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>`);
             }
@@ -3622,10 +3650,11 @@ var M = (function (exports) {
             return '<tbody>' + rows.join('') + '</tbody>';
         }
         renderTitle(instance, c, year, month, refYear, randId) {
-            let i, j, arr, opts = this.options, isMinYear = year === opts.minYear, isMaxYear = year === opts.maxYear, html = '<div id="' +
+            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">', monthHtml, yearHtml, prev = true, next = true;
-            for (arr = [], i = 0; i < 12; i++) {
+                '" 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) +
                     '"' +
@@ -3637,7 +3666,9 @@ var M = (function (exports) {
                     opts.i18n.months[i] +
                     '</option>');
             }
-            monthHtml = '<select class="datepicker-select orig-select-month" tabindex="-1">' + arr.join('') + '</select>';
+            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;
@@ -3653,8 +3684,8 @@ var M = (function (exports) {
             }
             if (opts.yearRangeReverse)
                 arr.reverse();
-            yearHtml = `<select class="datepicker-select orig-select-year" tabindex="-1">${arr.join('')}</select>`;
-            let 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>';
+            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'} btn-flat" type="button">${leftArrow}</button>`;
             html += '<div class="selects-container">';
             if (opts.showMonthAfterYear) {
@@ -3670,15 +3701,14 @@ var M = (function (exports) {
             if (isMaxYear && (month === 11 || opts.maxMonth <= month)) {
                 next = false;
             }
-            let 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>';
+            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'} btn-flat" type="button">${rightArrow}</button>`;
             return (html += '</div>');
         }
         // refresh HTML
-        draw(force = false) {
-            if (!this.isOpen && !force)
-                return;
-            let opts = this.options, minYear = opts.minYear, maxYear = opts.maxYear, minMonth = opts.minMonth, maxMonth = opts.maxMonth, html = '', randId;
+        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) {
@@ -3691,22 +3721,26 @@ var M = (function (exports) {
                     this._m = maxMonth;
                 }
             }
-            randId =
-                'datepicker-title-' +
-                    Math.random()
-                        .toString(36)
-                        .replace(/[^a-z]+/g, '')
-                        .substr(0, 2);
+            const randId = 'datepicker-title-' +
+                Math.random()
+                    .toString(36)
+                    .replace(/[^a-z]+/g, '')
+                    .substr(0, 2);
             for (let c = 0; c < 1; c++) {
-                this._renderDateDisplay();
+                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
-            let yearSelect = this.calendarEl.querySelector('.orig-select-year');
-            let monthSelect = this.calendarEl.querySelector('.orig-select-month');
+            const yearSelect = this.calendarEl.querySelector('.orig-select-year');
+            const monthSelect = this.calendarEl.querySelector('.orig-select-month');
             FormSelect.init(yearSelect, {
                 classes: 'select-year',
                 dropdownOptions: { container: document.body, constrainWidth: false }
@@ -3727,7 +3761,7 @@ var M = (function (exports) {
             this.el.addEventListener('keydown', this._handleInputKeydown);
             this.el.addEventListener('change', this._handleInputChange);
             this.calendarEl.addEventListener('click', this._handleCalendarClick);
-            this.doneBtn.addEventListener('click', this._finishSelection);
+            this.doneBtn.addEventListener('click', () => this.setInputValues());
             this.cancelBtn.addEventListener('click', this.close);
             if (this.options.showClearBtn) {
                 this.clearBtn.addEventListener('click', this._handleClearClick);
@@ -3743,40 +3777,41 @@ var M = (function (exports) {
             if (this.options.showClearBtn) {
                 this.clearBtn = this.modalEl.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.formats = {
-                d: () => {
-                    return this.date.getDate();
+                d: (date) => {
+                    return date.getDate();
                 },
-                dd: () => {
-                    let d = this.date.getDate();
+                dd: (date) => {
+                    const d = date.getDate();
                     return (d < 10 ? '0' : '') + d;
                 },
-                ddd: () => {
-                    return this.options.i18n.weekdaysShort[this.date.getDay()];
+                ddd: (date) => {
+                    return this.options.i18n.weekdaysShort[date.getDay()];
                 },
-                dddd: () => {
-                    return this.options.i18n.weekdays[this.date.getDay()];
+                dddd: (date) => {
+                    return this.options.i18n.weekdays[date.getDay()];
                 },
-                m: () => {
-                    return this.date.getMonth() + 1;
+                m: (date) => {
+                    return date.getMonth() + 1;
                 },
-                mm: () => {
-                    let m = this.date.getMonth() + 1;
+                mm: (date) => {
+                    const m = date.getMonth() + 1;
                     return (m < 10 ? '0' : '') + m;
                 },
-                mmm: () => {
-                    return this.options.i18n.monthsShort[this.date.getMonth()];
+                mmm: (date) => {
+                    return this.options.i18n.monthsShort[date.getMonth()];
                 },
-                mmmm: () => {
-                    return this.options.i18n.months[this.date.getMonth()];
+                mmmm: (date) => {
+                    return this.options.i18n.months[date.getMonth()];
                 },
-                yy: () => {
-                    return ('' + this.date.getFullYear()).slice(2);
+                yy: (date) => {
+                    return ('' + date.getFullYear()).slice(2);
                 },
-                yyyy: () => {
-                    return this.date.getFullYear();
+                yyyy: (date) => {
+                    return date.getFullYear();
                 }
             };
         }
@@ -3785,28 +3820,42 @@ var M = (function (exports) {
             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 = () => {
-            this.open();
+        _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);
         };
         _handleInputKeydown = (e) => {
             if (Utils.keys.ENTER.includes(e.key)) {
                 e.preventDefault();
-                this.open();
+                this.setDateFromInput(e.target);
+                this.draw();
             }
         };
         _handleCalendarClick = (e) => {
-            if (!this.isOpen)
-                return;
-            const target = (e.target);
+            const target = e.target;
             if (!target.classList.contains('is-disabled')) {
                 if (target.classList.contains('datepicker-day-button') &&
                     !target.classList.contains('is-empty') &&
                     !target.parentElement.classList.contains('is-disabled')) {
-                    this.setDate(new Date(e.target.getAttribute('data-year'), e.target.getAttribute('data-month'), e.target.getAttribute('data-day')));
-                    if (this.options.autoClose) {
-                        this._finishSelection();
+                    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();
@@ -3816,10 +3865,24 @@ var M = (function (exports) {
                 }
             }
         };
+        _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.setInputValue();
-            this.close();
+            this.endDate = null;
         };
         _handleMonthChange = (e) => {
             this.gotoMonth(e.target.value);
@@ -3843,19 +3906,28 @@ var M = (function (exports) {
         }
         _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(this.el.value, typeof this.options.format === "function"
+                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(this.el.value));
+                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();
+                }
             }
-            if (Datepicker._isDate(date))
-                this.setDate(date);
         };
         renderDayName(opts, day, abbr = false) {
             day += opts.firstDay;
@@ -3864,41 +3936,31 @@ var M = (function (exports) {
             }
             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.setInputValue();
+            this.setInputValues();
             this.close();
         };
-        /**
-         * Open datepicker.
-         */
-        open = () => {
-            if (this.isOpen)
-                return;
-            this.isOpen = true;
-            if (typeof this.options.onOpen === 'function') {
-                this.options.onOpen.call(this);
-            }
-            this.draw();
-            this.modal.open(undefined);
+        // deprecated
+        open() {
+            console.warn('Datepicker.open() is deprecated. Remove this method and wrap in modal yourself.');
             return this;
-        };
-        /**
-         * Close datepicker.
-         */
-        close = () => {
-            if (!this.isOpen)
-                return;
-            this.isOpen = false;
-            if (typeof this.options.onClose === 'function') {
-                this.options.onClose.call(this);
-            }
-            this.modal.close();
+        }
+        close() {
+            console.warn('Datepicker.close() is deprecated. Remove this method and wrap in modal yourself.');
             return this;
-        };
+        }
         static {
             Datepicker._template = `
-      <div class="modal datepicker-modal">
+      <div class="datepicker-modal">
         <div class="modal-content datepicker-container">
           <div class="datepicker-date-display">
             <span class="year-text"></span>
@@ -3921,15 +3983,46 @@ var M = (function (exports) {
 
     class Forms {
         /**
-         * Resizes the given TextArea after updating the
-         *  value content dynamically.
-         * @param textarea TextArea to be resized
+         * Checks if the label has validation and apply
+         * the correct class and styles
+         * @param textfield
          */
-        static textareaAutoResize(textarea) {
-            if (!textarea) {
-                console.error('No textarea element found');
+        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) {
@@ -3969,15 +4062,14 @@ var M = (function (exports) {
                 hiddenDiv.style.whiteSpace = 'pre'; //.css('white-space', 'pre');
             }
             hiddenDiv.innerText = textarea.value + '\n';
-            const content = hiddenDiv.innerHTML.replace(/\n/g, '<br>');
-            hiddenDiv.innerHTML = content;
+            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');
+                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
@@ -3996,10 +4088,22 @@ var M = (function (exports) {
             }
             textarea.setAttribute('previous-length', textarea.value.length.toString());
         }
-        ;
         static Init() {
             if (typeof document !== 'undefined')
-                document?.addEventListener("DOMContentLoaded", () => {
+                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
@@ -4007,15 +4111,21 @@ var M = (function (exports) {
                             // TAB, check if tabbing to radio or checkbox.
                             if (Utils.keys.TAB.includes(e.key)) {
                                 target.classList.add('tabbed');
-                                target.addEventListener('blur', e => target.classList.remove('tabbed'), { once: true });
+                                target.addEventListener('blur', () => target.classList.remove('tabbed'), {
+                                    once: true
+                                });
                             }
                         }
                     });
-                    document.querySelectorAll('.materialize-textarea').forEach((textArea) => {
+                    document
+                        .querySelectorAll('.materialize-textarea')
+                        .forEach((textArea) => {
                         Forms.InitTextarea(textArea);
                     });
                     // File Input Path
-                    document.querySelectorAll('.file-field input[type="file"]').forEach((fileInput) => {
+                    document
+                        .querySelectorAll('.file-field input[type="file"]')
+                        .forEach((fileInput) => {
                         Forms.InitFileInputPath(fileInput);
                     });
                 });
@@ -4025,11 +4135,11 @@ var M = (function (exports) {
             textarea.setAttribute('original-height', textarea.getBoundingClientRect().height.toString());
             textarea.setAttribute('previous-length', textarea.value.length.toString());
             Forms.textareaAutoResize(textarea);
-            textarea.addEventListener('keyup', e => Forms.textareaAutoResize(textarea));
-            textarea.addEventListener('keydown', e => Forms.textareaAutoResize(textarea));
+            textarea.addEventListener('keyup', (e) => Forms.textareaAutoResize(e.target));
+            textarea.addEventListener('keydown', (e) => Forms.textareaAutoResize(e.target));
         }
         static InitFileInputPath(fileInput) {
-            fileInput.addEventListener('change', e => {
+            fileInput.addEventListener('change', () => {
                 const fileField = fileInput.closest('.file-field');
                 const pathInput = fileField.querySelector('input.file-path');
                 const files = fileInput.files;
@@ -4043,7 +4153,7 @@ var M = (function (exports) {
         }
     }
 
-    const _defaults$c = {
+    const _defaults$d = {
         inDuration: 275,
         outDuration: 200,
         onOpenStart: null,
@@ -4075,7 +4185,7 @@ var M = (function (exports) {
         _photoCaption;
         constructor(el, options) {
             super(el, options, Materialbox);
-            this.el.M_Materialbox = this;
+            this.el['M_Materialbox'] = this;
             this.options = {
                 ...Materialbox.defaults,
                 ...options
@@ -4088,13 +4198,14 @@ var M = (function (exports) {
             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$c;
+            return _defaults$d;
         }
         /**
          * Initializes instances of MaterialBox.
@@ -4105,11 +4216,11 @@ var M = (function (exports) {
             return super.init(els, options, Materialbox);
         }
         static getInstance(el) {
-            return el.M_Materialbox;
+            return el['M_Materialbox'];
         }
         destroy() {
             this._removeEventHandlers();
-            this.el.M_Materialbox = undefined;
+            this.el['M_Materialbox'] = undefined;
             // Unwrap image
             //this.placeholder.after(this.el).remove();
             this.placeholder.remove();
@@ -4117,11 +4228,21 @@ var M = (function (exports) {
         }
         _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();
@@ -4156,8 +4277,8 @@ var M = (function (exports) {
             const box = el.getBoundingClientRect();
             const docElem = document.documentElement;
             return {
-                top: box.top + window.pageYOffset - docElem.clientTop,
-                left: box.left + window.pageXOffset - docElem.clientLeft
+                top: box.top + window.scrollY - docElem.clientTop,
+                left: box.left + window.scrollX - docElem.clientLeft
             };
         }
         _updateVars() {
@@ -4184,14 +4305,18 @@ var M = (function (exports) {
                 // 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';
+                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;
@@ -4248,12 +4373,13 @@ var M = (function (exports) {
                 if (this.attrHeight)
                     this.el.setAttribute('height', this.attrHeight.toString());
                 this.el.removeAttribute('style');
-                this.originInlineStyles && this.el.setAttribute('style', this.originInlineStyles);
+                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 = '');
+                this._changedAncestorList.forEach((anchestor) => (anchestor.style.overflow = ''));
                 // onCloseEnd callback
                 if (typeof this.options.onCloseEnd === 'function')
                     this.options.onCloseEnd.call(this, this.el);
@@ -4287,7 +4413,7 @@ var M = (function (exports) {
         _addOverlay() {
             this._overlay = document.createElement('div');
             this._overlay.id = 'materialbox-overlay';
-            this._overlay.addEventListener('click', e => {
+            this._overlay.addEventListener('click', () => {
                 if (this.doneAnimating)
                     this.close();
             }, { once: true });
@@ -4403,7 +4529,75 @@ var M = (function (exports) {
         };
     }
 
-    let _defaults$b = {
+    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 {
@@ -4414,7 +4608,7 @@ var M = (function (exports) {
         static _handleWindowResizeThrottled;
         constructor(el, options) {
             super(el, options, Parallax);
-            this.el.M_Parallax = this;
+            this.el['M_Parallax'] = this;
             this.options = {
                 ...Parallax.defaults,
                 ...options
@@ -4438,25 +4632,24 @@ var M = (function (exports) {
             return super.init(els, options, Parallax);
         }
         static getInstance(el) {
-            return el.M_Parallax;
+            return el['M_Parallax'];
         }
         destroy() {
             Parallax._parallaxes.splice(Parallax._parallaxes.indexOf(this), 1);
             this._img.style.transform = '';
             this._removeEventHandlers();
-            this.el.M_Parallax = undefined;
+            this.el['M_Parallax'] = undefined;
         }
         static _handleScroll() {
             for (let i = 0; i < Parallax._parallaxes.length; i++) {
-                let parallaxInstance = Parallax._parallaxes[i];
+                const parallaxInstance = Parallax._parallaxes[i];
                 parallaxInstance._updateParallax.call(parallaxInstance);
             }
         }
         static _handleWindowResize() {
             for (let i = 0; i < Parallax._parallaxes.length; i++) {
-                let parallaxInstance = Parallax._parallaxes[i];
-                parallaxInstance._enabled =
-                    window.innerWidth > parallaxInstance.options.responsiveThreshold;
+                const parallaxInstance = Parallax._parallaxes[i];
+                parallaxInstance._enabled = window.innerWidth > parallaxInstance.options.responsiveThreshold;
             }
         }
         _setupEventHandlers() {
@@ -4489,12 +4682,12 @@ var M = (function (exports) {
             const box = el.getBoundingClientRect();
             const docElem = document.documentElement;
             return {
-                top: box.top + window.pageYOffset - docElem.clientTop,
-                left: box.left + window.pageXOffset - docElem.clientLeft
+                top: box.top + window.scrollY - docElem.clientTop,
+                left: box.left + window.scrollX - docElem.clientLeft
             };
         }
         _updateParallax() {
-            const containerHeight = this.el.getBoundingClientRect().height > 0 ? this.el.parentNode.offsetHeight : 500;
+            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;
@@ -4513,7 +4706,7 @@ var M = (function (exports) {
         }
     }
 
-    let _defaults$a = {
+    const _defaults$a = {
         top: 0,
         bottom: Infinity,
         offset: 0,
@@ -4524,7 +4717,7 @@ var M = (function (exports) {
         originalOffset;
         constructor(el, options) {
             super(el, options, Pushpin);
-            this.el.M_Pushpin = this;
+            this.el['M_Pushpin'] = this;
             this.options = {
                 ...Pushpin.defaults,
                 ...options
@@ -4546,22 +4739,22 @@ var M = (function (exports) {
             return super.init(els, options, Pushpin);
         }
         static getInstance(el) {
-            return el.M_Pushpin;
+            return el['M_Pushpin'];
         }
         destroy() {
             this.el.style.top = null;
             this._removePinClasses();
             // Remove pushpin Inst
-            let index = Pushpin._pushpins.indexOf(this);
+            const index = Pushpin._pushpins.indexOf(this);
             Pushpin._pushpins.splice(index, 1);
             if (Pushpin._pushpins.length === 0) {
                 this._removeEventHandlers();
             }
-            this.el.M_Pushpin = undefined;
+            this.el['M_Pushpin'] = undefined;
         }
         static _updateElements() {
-            for (let elIndex in Pushpin._pushpins) {
-                let pInstance = Pushpin._pushpins[elIndex];
+            for (const elIndex in Pushpin._pushpins) {
+                const pInstance = Pushpin._pushpins[elIndex];
                 pInstance._updatePosition();
             }
         }
@@ -4572,7 +4765,7 @@ var M = (function (exports) {
             document.removeEventListener('scroll', Pushpin._updateElements);
         }
         _updatePosition() {
-            let scrolled = Utils.getDocumentScrollTop() + this.options.offset;
+            const scrolled = Utils.getDocumentScrollTop() + this.options.offset;
             if (this.options.top <= scrolled &&
                 this.options.bottom >= scrolled &&
                 !this.el.classList.contains('pinned')) {
@@ -4616,24 +4809,29 @@ var M = (function (exports) {
         }
     }
 
-    let _defaults$9 = {
+    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 + '"]'; }
+        getActiveElement: (id) => {
+            return 'a[href="#' + id + '"]';
+        },
+        keepTopElementActive: false,
+        animationDuration: null
     };
     class ScrollSpy extends Component {
         static _elements;
         static _count;
         static _increment;
-        tickId;
-        id;
         static _elementsInView;
         static _visibleElements;
         static _ticks;
+        static _keptTopActiveElement = null;
+        tickId;
+        id;
         constructor(el, options) {
             super(el, options, ScrollSpy);
-            this.el.M_ScrollSpy = this;
+            this.el['M_ScrollSpy'] = this;
             this.options = {
                 ...ScrollSpy.defaults,
                 ...options
@@ -4642,7 +4840,7 @@ var M = (function (exports) {
             ScrollSpy._count++;
             ScrollSpy._increment++;
             this.tickId = -1;
-            this.id = ScrollSpy._increment;
+            this.id = ScrollSpy._increment.toString();
             this._setupEventHandlers();
             this._handleWindowScroll();
         }
@@ -4658,7 +4856,7 @@ var M = (function (exports) {
             return super.init(els, options, ScrollSpy);
         }
         static getInstance(el) {
-            return el.M_ScrollSpy;
+            return el['M_ScrollSpy'];
         }
         destroy() {
             ScrollSpy._elements.splice(ScrollSpy._elements.indexOf(this), 1);
@@ -4668,7 +4866,7 @@ var M = (function (exports) {
             this._removeEventHandlers();
             const actElem = document.querySelector(this.options.getActiveElement(this.el.id));
             actElem.classList.remove(this.options.activeClass);
-            this.el.M_ScrollSpy = undefined;
+            this.el['M_ScrollSpy'] = undefined;
         }
         _setupEventHandlers() {
             if (ScrollSpy._count === 1) {
@@ -4684,7 +4882,9 @@ var M = (function (exports) {
                 document.body.removeEventListener('click', this._handleTriggerClick);
             }
         }
-        _handleThrottledResize = Utils.throttle(function () { this._handleWindowScroll(); }, 200).bind(this);
+        _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--) {
@@ -4692,7 +4892,12 @@ var M = (function (exports) {
                 const x = document.querySelector('a[href="#' + scrollspy.el.id + '"]');
                 if (trigger === x) {
                     e.preventDefault();
-                    scrollspy.el.scrollIntoView({ behavior: 'smooth' });
+                    if (scrollspy.el['M_ScrollSpy'].options.animationDuration) {
+                        ScrollSpy._smoothScrollIntoView(scrollspy.el, scrollspy.el['M_ScrollSpy'].options.animationDuration);
+                    }
+                    else {
+                        scrollspy.el.scrollIntoView({ behavior: 'smooth' });
+                    }
                     break;
                 }
             }
@@ -4701,12 +4906,12 @@ var M = (function (exports) {
             // unique tick id
             ScrollSpy._ticks++;
             // viewport rectangle
-            let top = Utils.getDocumentScrollTop(), left = Utils.getDocumentScrollLeft(), right = left + window.innerWidth, bottom = top + window.innerHeight;
+            const top = Utils.getDocumentScrollTop(), left = Utils.getDocumentScrollLeft(), right = left + window.innerWidth, bottom = top + window.innerHeight;
             // determine which elements are in view
-            let intersections = ScrollSpy._findElements(top, right, bottom, left);
+            const intersections = ScrollSpy._findElements(top, right, bottom, left);
             for (let i = 0; i < intersections.length; i++) {
-                let scrollspy = intersections[i];
-                let lastTick = scrollspy.tickId;
+                const scrollspy = intersections[i];
+                const lastTick = scrollspy.tickId;
                 if (lastTick < 0) {
                     // entered into view
                     scrollspy._enter();
@@ -4715,8 +4920,8 @@ var M = (function (exports) {
                 scrollspy.tickId = ScrollSpy._ticks;
             }
             for (let i = 0; i < ScrollSpy._elementsInView.length; i++) {
-                let scrollspy = ScrollSpy._elementsInView[i];
-                let lastTick = scrollspy.tickId;
+                const scrollspy = ScrollSpy._elementsInView[i];
+                const lastTick = scrollspy.tickId;
                 if (lastTick >= 0 && lastTick !== ScrollSpy._ticks) {
                     // exited from view
                     scrollspy._exit();
@@ -4725,6 +4930,29 @@ var M = (function (exports) {
             }
             // 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();
@@ -4735,13 +4963,13 @@ var M = (function (exports) {
             };
         }
         static _findElements(top, right, bottom, left) {
-            let hits = [];
+            const hits = [];
             for (let i = 0; i < ScrollSpy._elements.length; i++) {
-                let scrollspy = ScrollSpy._elements[i];
-                let currTop = top + scrollspy.options.scrollOffset || 200;
+                const scrollspy = ScrollSpy._elements[i];
+                const currTop = top + scrollspy.options.scrollOffset || 200;
                 if (scrollspy.el.getBoundingClientRect().height > 0) {
-                    let elTop = ScrollSpy._offset(scrollspy.el).top, elLeft = ScrollSpy._offset(scrollspy.el).left, elRight = elLeft + scrollspy.el.getBoundingClientRect().width, elBottom = elTop + scrollspy.el.getBoundingClientRect().height;
-                    let isIntersect = !(elLeft > right ||
+                    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);
@@ -4753,11 +4981,12 @@ var M = (function (exports) {
             return hits;
         }
         _enter() {
-            ScrollSpy._visibleElements = ScrollSpy._visibleElements.filter(value => value.getBoundingClientRect().height !== 0);
+            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) {
+                if (ScrollSpy._visibleElements[0]['M_ScrollSpy'] &&
+                    this.id < ScrollSpy._visibleElements[0]['M_ScrollSpy'].id) {
                     ScrollSpy._visibleElements.unshift(this.el);
                 }
                 else {
@@ -4767,11 +4996,12 @@ var M = (function (exports) {
             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);
+            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);
@@ -4780,8 +5010,39 @@ var M = (function (exports) {
                     // 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 = [];
@@ -4829,7 +5090,7 @@ var M = (function (exports) {
         percentOpen;
         constructor(el, options) {
             super(el, options, Sidenav);
-            this.el.M_Sidenav = this;
+            this.el['M_Sidenav'] = this;
             this.options = {
                 ...Sidenav.defaults,
                 ...options
@@ -4860,14 +5121,14 @@ var M = (function (exports) {
             return super.init(els, options, Sidenav);
         }
         static getInstance(el) {
-            return el.M_Sidenav;
+            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['M_Sidenav'] = undefined;
             this.el.style.transform = '';
             const index = Sidenav._sidenavs.indexOf(this);
             if (index >= 0) {
@@ -4884,18 +5145,21 @@ var M = (function (exports) {
             if (Sidenav._sidenavs.length === 0) {
                 document.body.addEventListener('click', this._handleTriggerClick);
             }
-            var passiveIfSupported = null;
+            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('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) {
@@ -4917,9 +5181,9 @@ var M = (function (exports) {
             const trigger = e.target.closest('.sidenav-trigger');
             if (e.target && trigger) {
                 const sidenavId = Utils.getIdFromTrigger(trigger);
-                const sidenavInstance = document.getElementById(sidenavId).M_Sidenav;
+                const sidenavInstance = document.getElementById(sidenavId)['M_Sidenav'];
                 if (sidenavInstance) {
-                    sidenavInstance.open(trigger);
+                    sidenavInstance.open();
                 }
                 e.preventDefault();
             }
@@ -4950,18 +5214,9 @@ var M = (function (exports) {
         }
         _handleDragTargetDrag = (e) => {
             // Check if draggable
-            if (!this.options.draggable || this._isCurrentlyFixed() || this._verticallyScrolling) {
+            if (!this._isDraggable())
                 return;
-            }
-            // If not being dragged, set initial drag start variables
-            if (!this.isDragged) {
-                this._startDrag(e);
-            }
-            // Run touchmove updates
-            this._dragMoveUpdate(e);
-            // Calculate raw deltaX
-            let totalDeltaX = this._xPos - this._startingXpos;
-            // dragDirection is the attempted user drag direction
+            let 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));
@@ -4998,36 +5253,35 @@ var M = (function (exports) {
             }
         };
         _handleCloseDrag = (e) => {
-            if (this.isOpen) {
-                // Check if draggable
-                if (!this.options.draggable || this._isCurrentlyFixed() || this._verticallyScrolling) {
-                    return;
-                }
-                // If not being dragged, set initial drag start variables
-                if (!this.isDragged) {
-                    this._startDrag(e);
-                }
-                // Run touchmove updates
-                this._dragMoveUpdate(e);
-                // Calculate raw deltaX
-                let totalDeltaX = this._xPos - this._startingXpos;
-                // dragDirection is the attempted user drag direction
-                let dragDirection = totalDeltaX > 0 ? 'right' : 'left';
-                // Don't allow totalDeltaX to exceed Sidenav width or be dragged in the opposite direction
-                totalDeltaX = Math.min(this._width, Math.abs(totalDeltaX));
-                if (this.options.edge !== dragDirection) {
-                    totalDeltaX = 0;
-                }
-                let transformX = -totalDeltaX;
-                if (this.options.edge === 'right') {
-                    transformX = -transformX;
-                }
-                // Calculate open/close percentage of sidenav, with open = 1 and close = 0
-                this.percentOpen = Math.min(1, 1 - totalDeltaX / this._width);
-                // Set transform and opacity styles
-                this.el.style.transform = `translateX(${transformX}px)`;
-                this._overlay.style.opacity = this.percentOpen.toString();
+            // 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) {
@@ -5075,6 +5329,9 @@ var M = (function (exports) {
             if (this._isCurrentlyFixed())
                 this.open();
         }
+        _isDraggable() {
+            return this.options.draggable && !this._isCurrentlyFixed() && !this._verticallyScrolling;
+        }
         _isCurrentlyFixed() {
             return this.isFixed && window.innerWidth > 992;
         }
@@ -5115,6 +5372,9 @@ var M = (function (exports) {
                     this._preventBodyScrolling();
                 if (!this.isDragged || this.percentOpen != 1)
                     this._animateIn();
+                /* Set aria-hidden state */
+                this._setAriaHidden();
+                this._setTabIndex();
             }
         };
         /**
@@ -5142,6 +5402,9 @@ var M = (function (exports) {
                 else {
                     this._overlay.style.display = 'none';
                 }
+                /* Set aria-hidden state */
+                this._setAriaHidden();
+                this._setTabIndex();
             }
         };
         _animateIn() {
@@ -5163,7 +5426,7 @@ var M = (function (exports) {
             const duration = this.options.inDuration;
             // from
             this.el.style.transition = 'none';
-            this.el.style.transform = 'translateX(' + (slideOutPercent * 100) + '%)';
+            this.el.style.transform = 'translateX(' + slideOutPercent * 100 + '%)';
             setTimeout(() => {
                 this.el.style.transition = `transform ${duration}ms ease`; // easeOutQuad
                 // to
@@ -5176,15 +5439,18 @@ var M = (function (exports) {
         }
         _animateSidenavOut() {
             const endPercent = this.options.edge === 'left' ? -1 : 1;
-            if (this.isDragged) {
-                this.options.edge === 'left'
-                        ? endPercent + this.percentOpen
-                        : endPercent - this.percentOpen;
-            }
+            // 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) + '%)';
+            this.el.style.transform = 'translateX(' + endPercent * 100 + '%)';
             setTimeout(() => {
                 if (typeof this.options.onCloseEnd === 'function')
                     this.options.onCloseEnd.call(this, this.el);
@@ -5218,12 +5484,30 @@ var M = (function (exports) {
                 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 = [];
         }
     }
 
-    let _defaults$7 = {
+    const _defaults$7 = {
         duration: 300,
         onShow: null,
         swipeable: false,
@@ -5240,7 +5524,7 @@ var M = (function (exports) {
         _content;
         constructor(el, options) {
             super(el, options, Tabs);
-            this.el.M_Tabs = this;
+            this.el['M_Tabs'] = this;
             this.options = {
                 ...Tabs.defaults,
                 ...options
@@ -5271,7 +5555,7 @@ var M = (function (exports) {
             return super.init(els, options, Tabs);
         }
         static getInstance(el) {
-            return el.M_Tabs;
+            return el['M_Tabs'];
         }
         destroy() {
             this._removeEventHandlers();
@@ -5282,12 +5566,14 @@ var M = (function (exports) {
             else {
                 this._teardownNormalTabs();
             }
-            this.el.M_Tabs = undefined;
+            this.el['M_Tabs'] = undefined;
         }
         /**
          * The index of tab that is currently shown.
          */
-        get index() { return this._index; }
+        get index() {
+            return this._index;
+        }
         _setupEventHandlers() {
             window.addEventListener('resize', this._handleWindowResize);
             this.el.addEventListener('click', this._handleTabClick);
@@ -5304,8 +5590,14 @@ var M = (function (exports) {
             }
         };
         _handleTabClick = (e) => {
-            const tabLink = e.target;
-            const tab = tabLink.parentElement;
+            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;
@@ -5368,10 +5660,11 @@ var M = (function (exports) {
             this._activeTabLink = Array.from(this._tabLinks).find((a) => a.getAttribute('href') === location.hash);
             // If no match is found, use the first link or any with class 'active' as the initial active tab.
             if (!this._activeTabLink) {
-                this._activeTabLink = this.el.querySelector('li.tab a.active');
-            }
-            if (this._activeTabLink.length === 0) {
-                this._activeTabLink = this.el.querySelector('li.tab a');
+                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');
@@ -5387,7 +5680,7 @@ var M = (function (exports) {
             if (window.innerWidth > this.options.responsiveThreshold)
                 this.options.swipeable = false;
             const tabsContent = [];
-            this._tabLinks.forEach(a => {
+            this._tabLinks.forEach((a) => {
                 if (a.hash) {
                     const currContent = document.querySelector(a.hash);
                     currContent.classList.add('carousel-item');
@@ -5399,7 +5692,7 @@ var M = (function (exports) {
             tabsWrapper.classList.add('tabs-content', 'carousel', 'carousel-slider');
             // Wrap around
             tabsContent[0].parentElement.insertBefore(tabsWrapper, tabsContent[0]);
-            tabsContent.forEach(tabContent => {
+            tabsContent.forEach((tabContent) => {
                 tabsWrapper.appendChild(tabContent);
                 tabContent.style.display = '';
             });
@@ -5427,7 +5720,7 @@ var M = (function (exports) {
             const tabsWrapper = this._tabsCarousel.el;
             this._tabsCarousel.destroy();
             // Unwrap
-            tabsWrapper.after(tabsWrapper.children);
+            tabsWrapper.append(tabsWrapper.parentElement);
             tabsWrapper.remove();
         }
         _setupNormalTabs() {
@@ -5472,7 +5765,7 @@ var M = (function (exports) {
         }
         _animateIndicator(prevIndex) {
             let leftDelay = 0, rightDelay = 0;
-            const isMovingLeftOrStaying = (this._index - prevIndex >= 0);
+            const isMovingLeftOrStaying = this._index - prevIndex >= 0;
             if (isMovingLeftOrStaying)
                 leftDelay = 90;
             else
@@ -5495,7 +5788,7 @@ var M = (function (exports) {
         }
     }
 
-    let _defaults$6 = {
+    const _defaults$6 = {
         onOpen: null,
         onClose: null
     };
@@ -5504,24 +5797,27 @@ var M = (function (exports) {
          * If the tap target is open.
          */
         isOpen;
+        static _taptargets;
         wrapper;
-        _origin;
+        // private _origin: HTMLElement;
         originEl;
         waveEl;
         contentEl;
         constructor(el, options) {
             super(el, options, TapTarget);
-            this.el.M_TapTarget = this;
+            this.el['M_TapTarget'] = this;
             this.options = {
                 ...TapTarget.defaults,
                 ...options
             };
             this.isOpen = false;
             // setup
-            this._origin = document.querySelector(`#${el.dataset.target}`);
+            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;
@@ -5535,45 +5831,64 @@ var M = (function (exports) {
             return super.init(els, options, TapTarget);
         }
         static getInstance(el) {
-            return el.M_TapTarget;
+            return el['M_TapTarget'];
         }
         destroy() {
             this._removeEventHandlers();
-            this.el.TapTarget = undefined;
+            this.el['M_TapTarget'] = undefined;
+            const index = TapTarget._taptargets.indexOf(this);
+            if (index >= 0) {
+                TapTarget._taptargets.splice(index, 1);
+            }
         }
         _setupEventHandlers() {
-            this.el.addEventListener('click', this._handleTargetClick);
-            this.originEl.addEventListener('click', this._handleOriginClick);
+            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.el.removeEventListener('click', this._handleTargetClick);
-            this.originEl.removeEventListener('click', this._handleOriginClick);
+            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);
-        _handleTargetClick = () => {
-            this.open();
+        _handleThrottledResize = Utils.throttle(function () {
+            this._handleResize();
+        }, 200).bind(this);
+        _handleKeyboardInteraction = (e) => {
+            if (Utils.keys.ENTER.includes(e.key)) {
+                this._handleTargetToggle();
+            }
         };
-        _handleOriginClick = () => {
-            this.close();
+        _handleTargetToggle = () => {
+            if (!this.isOpen)
+                this.open();
+            else
+                this.close();
         };
+        /*_handleOriginClick = () => {
+          this.close();
+        }*/
         _handleResize = () => {
             this._calculatePositioning();
         };
         _handleDocumentClick = (e) => {
-            if (!e.target.closest('.tap-target-wrapper')) {
+            if (e.target.closest(`#${this.el.dataset.target}`) !== this.originEl &&
+                !e.target.closest('.tap-target-wrapper')) {
                 this.close();
-                e.preventDefault();
-                e.stopPropagation();
+                // e.preventDefault();
+                // e.stopPropagation();
             }
         };
         _setup() {
             // Creating tap target
             this.wrapper = this.el.parentElement;
             this.waveEl = this.wrapper.querySelector('.tap-target-wave');
-            this.originEl = this.wrapper.querySelector('.tap-target-origin');
+            this.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')) {
@@ -5593,13 +5908,13 @@ var M = (function (exports) {
                 this.waveEl = document.createElement('div');
                 this.waveEl.classList.add('tap-target-wave');
                 // Creating origin
-                if (!this.originEl) {
-                    this.originEl = this._origin.cloneNode(true); // .clone(true, true);
-                    this.originEl.classList.add('tap-target-origin');
-                    this.originEl.removeAttribute('id');
-                    this.originEl.removeAttribute('style');
-                    this.waveEl.append(this.originEl);
-                }
+                /*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);
             }
         }
@@ -5613,9 +5928,10 @@ var M = (function (exports) {
         }
         _calculatePositioning() {
             // Element or parent is fixed position?
-            let isFixed = getComputedStyle(this._origin).position === 'fixed';
+            let isFixed = getComputedStyle(this.originEl).position === 'fixed';
             if (!isFixed) {
-                let currentElem = this._origin;
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                let currentElem = this.originEl;
                 const parents = [];
                 while ((currentElem = currentElem.parentNode) && currentElem !== document)
                     parents.push(currentElem);
@@ -5626,10 +5942,14 @@ var M = (function (exports) {
                 }
             }
             // Calculating origin
-            const originWidth = this._origin.offsetWidth;
-            const originHeight = this._origin.offsetHeight;
-            const originTop = isFixed ? this._offset(this._origin).top - Utils.getDocumentScrollTop() : this._offset(this._origin).top;
-            const originLeft = isFixed ? this._offset(this._origin).left - Utils.getDocumentScrollLeft() : this._offset(this._origin).left;
+            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;
@@ -5663,8 +5983,12 @@ var M = (function (exports) {
             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.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
@@ -5690,11 +6014,13 @@ var M = (function (exports) {
                 return;
             // onOpen callback
             if (typeof this.options.onOpen === 'function') {
-                this.options.onOpen.call(this, this._origin);
+                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);
         };
         /**
@@ -5705,16 +6031,21 @@ var M = (function (exports) {
                 return;
             // onClose callback
             if (typeof this.options.onClose === 'function') {
-                this.options.onClose.call(this, this._origin);
+                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 = [];
+        }
     }
 
-    let _defaults$5 = {
+    const _defaults$5 = {
         dialRadius: 135,
         outerRadius: 105,
         innerRadius: 70,
@@ -5730,19 +6061,13 @@ var M = (function (exports) {
             clear: 'Clear',
             done: 'Ok'
         },
-        autoClose: false, // auto close when minute is selected
         twelveHour: true, // change to 12 hour AM/PM clock from 24 hour
         vibrate: true, // vibrate the device when dragging clock hand
         // Callbacks
-        onOpenStart: null,
-        onOpenEnd: null,
-        onCloseStart: null,
-        onCloseEnd: null,
         onSelect: null
     };
     class Timepicker extends Component {
         id;
-        modal;
         modalEl;
         plate;
         digitalClock;
@@ -5770,8 +6095,6 @@ var M = (function (exports) {
          */
         amOrPm;
         static _template;
-        /** If the picker is open. */
-        isOpen;
         /** Vibrate device when dragging clock hand. */
         vibrate;
         _canvas;
@@ -5784,18 +6107,16 @@ var M = (function (exports) {
         bearing;
         g;
         toggleViewTimer;
-        canvas;
         vibrateTimer;
         constructor(el, options) {
             super(el, options, Timepicker);
-            this.el.M_Timepicker = this;
+            this.el['M_Timepicker'] = this;
             this.options = {
                 ...Timepicker.defaults,
                 ...options
             };
             this.id = Utils.guid();
             this._insertHTMLIntoDOM();
-            this._setupModal();
             this._setupVariables();
             this._setupEventHandlers();
             this._clockSetup();
@@ -5816,24 +6137,26 @@ var M = (function (exports) {
             return (num < 10 ? '0' : '') + num;
         }
         static _createSVGEl(name) {
-            let svgNS = 'http://www.w3.org/2000/svg';
+            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 };
+            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;
+            return el['M_Timepicker'];
         }
         destroy() {
             this._removeEventHandlers();
-            this.modal.destroy();
             this.modalEl.remove();
-            this.el.M_Timepicker = undefined;
+            this.el['M_Timepicker'] = undefined;
         }
         _setupEventHandlers() {
             this.el.addEventListener('click', this._handleInputClick);
@@ -5841,8 +6164,10 @@ var M = (function (exports) {
             this.plate.addEventListener('mousedown', this._handleClockClickStart);
             this.plate.addEventListener('touchstart', this._handleClockClickStart);
             this.digitalClock.addEventListener('keyup', this._inputFromTextField);
-            this.inputHours.addEventListener('click', () => this.showView('hours'));
-            this.inputMinutes.addEventListener('click', () => this.showView('minutes'));
+            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);
@@ -5865,12 +6190,12 @@ var M = (function (exports) {
         };
         _handleClockClickStart = (e) => {
             e.preventDefault();
-            let clockPlateBR = this.plate.getBoundingClientRect();
-            let offset = { x: clockPlateBR.left, y: clockPlateBR.top };
+            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;
-            let clickPos = Timepicker._Pos(e);
+            const clickPos = Timepicker._Pos(e);
             this.dx = clickPos.x - this.x0;
             this.dy = clickPos.y - this.y0;
             // Set clock hands
@@ -5884,9 +6209,9 @@ var M = (function (exports) {
         };
         _handleDocumentClickMove = (e) => {
             e.preventDefault();
-            let clickPos = Timepicker._Pos(e);
-            let x = clickPos.x - this.x0;
-            let y = clickPos.y - this.y0;
+            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);
         };
@@ -5894,16 +6219,16 @@ var M = (function (exports) {
             e.preventDefault();
             document.removeEventListener('mouseup', this._handleDocumentClickEnd);
             document.removeEventListener('touchend', this._handleDocumentClickEnd);
-            let clickPos = Timepicker._Pos(e);
-            let x = clickPos.x - this.x0;
-            let y = clickPos.y - this.y0;
+            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.showView('minutes', this.options.duration / 2);
             }
-            else if (this.options.autoClose) {
+            else {
                 this.minutesView.classList.add('timepicker-dial-out');
                 setTimeout(() => {
                     this.done();
@@ -5931,24 +6256,11 @@ var M = (function (exports) {
                 this.el.parentElement.appendChild(this.modalEl);
             }
         }
-        _setupModal() {
-            this.modal = Modal.init(this.modalEl, {
-                onOpenStart: this.options.onOpenStart,
-                onOpenEnd: this.options.onOpenEnd,
-                onCloseStart: this.options.onCloseStart,
-                onCloseEnd: () => {
-                    if (typeof this.options.onCloseEnd === 'function') {
-                        this.options.onCloseEnd.call(this);
-                    }
-                    this.isOpen = false;
-                }
-            });
-        }
         _setupVariables() {
             this.currentView = 'hours';
             this.vibrate = navigator.vibrate
                 ? 'vibrate'
-                : navigator.webkitVibrate
+                : navigator['webkitVibrate']
                     ? 'webkitVibrate'
                     : null;
             this._canvas = this.modalEl.querySelector('.timepicker-canvas');
@@ -5964,10 +6276,10 @@ var M = (function (exports) {
         }
         _createButton(text, visibility) {
             const button = document.createElement('button');
-            button.classList.add('btn-flat', 'waves-effect');
+            button.classList.add('btn', 'btn-flat', 'waves-effect', 'text');
             button.style.visibility = visibility;
             button.type = 'button';
-            button.tabIndex = this.options.twelveHour ? 3 : 1;
+            button.tabIndex = -1;
             button.innerText = text;
             return button;
         }
@@ -5985,20 +6297,20 @@ var M = (function (exports) {
             confirmationBtnsContainer.appendChild(cancelButton);
             const doneButton = this._createButton(this.options.i18n.done, '');
             doneButton.classList.add('timepicker-close');
-            doneButton.addEventListener('click', this.done);
+            //doneButton.addEventListener('click', this._finishSelection);
             confirmationBtnsContainer.appendChild(doneButton);
         }
         _clockSetup() {
             if (this.options.twelveHour) {
                 // AM Button
                 this._amBtn = document.createElement('div');
-                this._amBtn.classList.add('am-btn');
+                this._amBtn.classList.add('am-btn', 'btn');
                 this._amBtn.innerText = 'AM';
                 this._amBtn.addEventListener('click', this._handleAmPmClick);
                 this.spanAmPm.appendChild(this._amBtn);
                 // PM Button
                 this._pmBtn = document.createElement('div');
-                this._pmBtn.classList.add('pm-btn');
+                this._pmBtn.classList.add('pm-btn', 'btn');
                 this._pmBtn.innerText = 'PM';
                 this._pmBtn.addEventListener('click', this._handleAmPmClick);
                 this.spanAmPm.appendChild(this._pmBtn);
@@ -6009,24 +6321,24 @@ var M = (function (exports) {
         }
         _buildSVGClock() {
             // Draw clock hands and others
-            let dialRadius = this.options.dialRadius;
-            let tickRadius = this.options.tickRadius;
-            let diameter = dialRadius * 2;
-            let svg = Timepicker._createSVGEl('svg');
+            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());
-            let g = Timepicker._createSVGEl('g');
+            const g = Timepicker._createSVGEl('g');
             g.setAttribute('transform', 'translate(' + dialRadius + ',' + dialRadius + ')');
-            let bearing = Timepicker._createSVGEl('circle');
+            const bearing = Timepicker._createSVGEl('circle');
             bearing.setAttribute('class', 'timepicker-canvas-bearing');
             bearing.setAttribute('cx', '0');
             bearing.setAttribute('cy', '0');
             bearing.setAttribute('r', '4');
-            let hand = Timepicker._createSVGEl('line');
+            const hand = Timepicker._createSVGEl('line');
             hand.setAttribute('x1', '0');
             hand.setAttribute('y1', '0');
-            let bg = Timepicker._createSVGEl('circle');
+            const bg = Timepicker._createSVGEl('circle');
             bg.setAttribute('class', 'timepicker-canvas-bg');
             bg.setAttribute('r', tickRadius.toString());
             g.appendChild(hand);
@@ -6040,35 +6352,37 @@ var M = (function (exports) {
             this.g = g;
         }
         _buildHoursView() {
-            const $tick = document.createElement('div');
-            $tick.classList.add('timepicker-tick');
+            // const $tick = document.createElement('div');
+            // $tick.classList.add('timepicker-tick');
             // Hours view
             if (this.options.twelveHour) {
                 for (let i = 1; i < 13; i += 1) {
-                    const tick = $tick.cloneNode(true);
+                    // const tick = <HTMLElement>$tick.cloneNode(true);
                     const radian = (i / 6) * Math.PI;
                     const radius = this.options.outerRadius;
-                    tick.style.left = this.options.dialRadius + Math.sin(radian) * radius - this.options.tickRadius + 'px';
-                    tick.style.top = this.options.dialRadius - Math.cos(radian) * radius - this.options.tickRadius + 'px';
-                    tick.innerHTML = i === 0 ? '00' : i.toString();
-                    this.hoursView.appendChild(tick);
-                    // tick.on(mousedownEvent, mousedown);
+                    this._buildHoursTick(i, radian, radius);
                 }
             }
             else {
                 for (let i = 0; i < 24; i += 1) {
-                    const tick = $tick.cloneNode(true);
+                    // 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;
-                    tick.style.left = this.options.dialRadius + Math.sin(radian) * radius - this.options.tickRadius + 'px';
-                    tick.style.top = this.options.dialRadius - Math.cos(radian) * radius - this.options.tickRadius + 'px';
-                    tick.innerHTML = i === 0 ? '00' : i.toString();
-                    this.hoursView.appendChild(tick);
-                    // tick.on(mousedownEvent, mousedown);
+                    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');
@@ -6098,12 +6412,12 @@ var M = (function (exports) {
         _updateAmPmView() {
             if (this.options.twelveHour) {
                 if (this.amOrPm === 'PM') {
-                    this._amBtn.classList.remove('text-primary');
-                    this._pmBtn.classList.add('text-primary');
+                    this._amBtn.classList.remove('filled');
+                    this._pmBtn.classList.add('filled');
                 }
                 else if (this.amOrPm === 'AM') {
-                    this._amBtn.classList.add('text-primary');
-                    this._pmBtn.classList.remove('text-primary');
+                    this._amBtn.classList.add('filled');
+                    this._pmBtn.classList.remove('filled');
                 }
             }
         }
@@ -6120,7 +6434,7 @@ var M = (function (exports) {
                 value[1] = value[1].replace('AM', '').replace('PM', '');
             }
             if (value[0] === 'now') {
-                let now = new Date(+new Date() + this.options.fromNow);
+                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';
@@ -6128,17 +6442,18 @@ var M = (function (exports) {
             }
             this.hours = +value[0] || 0;
             this.minutes = +value[1] || 0;
-            this.inputHours.value = this.hours;
+            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') ;
-            let isHours = view === 'hours', nextView = isHours ? this.hoursView : this.minutesView, hideView = isHours ? this.minutesView : this.hoursView;
+            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');
@@ -6161,12 +6476,12 @@ var M = (function (exports) {
             }, this.options.duration);
         };
         resetClock(delay) {
-            let view = this.currentView, value = this[view], isHours = view === 'hours', unit = Math.PI / (isHours ? 6 : 30), radian = value * unit, radius = isHours && value > 0 && value < 13 ? this.options.innerRadius : this.options.outerRadius, x = Math.sin(radian) * radius, y = -Math.cos(radian) * radius, self = this;
+            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');
+                this._canvas?.classList.add('timepicker-canvas-out');
                 setTimeout(() => {
-                    self.canvas?.classList.remove('timepicker-canvas-out');
-                    self.setHand(x, y);
+                    this._canvas?.classList.remove('timepicker-canvas-out');
+                    this.setHand(x, y);
                 }, delay);
             }
             else {
@@ -6175,31 +6490,26 @@ var M = (function (exports) {
         }
         _inputFromTextField = () => {
             const isHours = this.currentView === 'hours';
-            if (isHours) {
+            if (isHours && this.inputHours.value !== '') {
                 const value = parseInt(this.inputHours.value);
-                if (value > 0 && value < 13) {
-                    this.drawClockFromTimeInput(value, isHours);
-                    this.showView('minutes', this.options.duration / 2);
+                if (value > 0 && value < (this.options.twelveHour ? 13 : 24)) {
                     this.hours = value;
-                    this.inputMinutes.focus();
                 }
                 else {
-                    const hour = new Date().getHours();
-                    this.inputHours.value = (hour % 12).toString();
+                    this.setHoursDefault();
                 }
+                this.drawClockFromTimeInput(this.hours, isHours);
             }
-            else {
+            else if (!isHours && this.inputMinutes.value !== '') {
                 const value = parseInt(this.inputMinutes.value);
                 if (value >= 0 && value < 60) {
-                    this.inputMinutes.value = Timepicker._addLeadingZero(value);
-                    this.drawClockFromTimeInput(value, isHours);
                     this.minutes = value;
-                    this.modalEl.querySelector('.confirmation-btns :nth-child(2)').focus();
                 }
                 else {
-                    const minutes = new Date().getMinutes();
-                    this.inputMinutes.value = Timepicker._addLeadingZero(minutes);
+                    this.minutes = new Date().getMinutes();
+                    this.inputMinutes.value = this.minutes.toString();
                 }
+                this.drawClockFromTimeInput(this.minutes, isHours);
             }
         };
         drawClockFromTimeInput(value, isHours) {
@@ -6209,14 +6519,15 @@ var M = (function (exports) {
             if (this.options.twelveHour) {
                 radius = this.options.outerRadius;
             }
-            let cx1 = Math.sin(radian) * (radius - this.options.tickRadius), cy1 = -Math.cos(radian) * (radius - this.options.tickRadius), cx2 = Math.sin(radian) * radius, cy2 = -Math.cos(radian) * radius;
-            this.hand.setAttribute('x2', cx1.toString());
-            this.hand.setAttribute('y2', cy1.toString());
-            this.bg.setAttribute('cx', cx2.toString());
-            this.bg.setAttribute('cy', cy2.toString());
+            else {
+                radius =
+                    isHours && value > 0 && value < 13 ? this.options.innerRadius : this.options.outerRadius;
+            }
+            this.setClockAttributes(radian, radius);
         }
         setHand(x, y, roundBy5 = false) {
-            let radian = Math.atan2(x, -y), isHours = this.currentView === 'hours', unit = Math.PI / (isHours || roundBy5 ? 6 : 30), z = Math.sqrt(x * x + y * y), inner = isHours && z < (this.options.outerRadius + this.options.innerRadius) / 2, radius = inner ? this.options.innerRadius : this.options.outerRadius;
+            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;
             }
@@ -6271,41 +6582,39 @@ var M = (function (exports) {
             }
             this[this.currentView] = value;
             if (isHours) {
-                this.inputHours.value = value.toString();
+                this.inputHours.value = Timepicker._addLeadingZero(value);
             }
             else {
                 this.inputMinutes.value = Timepicker._addLeadingZero(value);
             }
             // Set clock hand and others' position
-            let cx1 = Math.sin(radian) * (radius - this.options.tickRadius), cy1 = -Math.cos(radian) * (radius - this.options.tickRadius), cx2 = Math.sin(radian) * radius, cy2 = -Math.cos(radian) * radius;
+            this.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());
         }
-        /**
-         * Open timepicker.
-         */
-        open = () => {
-            if (this.isOpen)
-                return;
-            this.isOpen = true;
-            this._updateTimeFromInput();
-            this.showView('hours');
-            this.modal.open(undefined);
-        };
-        /**
-         * Close timepicker.
-         */
-        close = () => {
-            if (!this.isOpen)
-                return;
-            this.isOpen = false;
-            this.modal.close();
-        };
+        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();
+        }
+        // todo: remove e
         done = (e = null, clearValue = null) => {
             // Set input value
-            let last = this.el.value;
+            const last = this.el.value;
             let value = clearValue
                 ? ''
                 : Timepicker._addLeadingZero(this.hours) + ':' + Timepicker._addLeadingZero(this.minutes);
@@ -6318,12 +6627,23 @@ var M = (function (exports) {
             if (value !== last) {
                 this.el.dispatchEvent(new Event('change', { bubbles: true, cancelable: true, composed: true }));
             }
-            this.close();
-            this.el.focus();
+            //this.el.focus();
+            return e; // just for passing linter, can be removed
         };
         clear = () => {
             this.done(null, true);
         };
+        // deprecated
+        open() {
+            // this._updateTimeFromInput();
+            // this.showView('hours');
+            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="modal timepicker-modal">
@@ -6331,9 +6651,15 @@ var M = (function (exports) {
           <div class="timepicker-digital-display">
             <div class="timepicker-text-container">
               <div class="timepicker-display-column">
-                <input type="text" maxlength="2" autofocus class="timepicker-input-hours text-primary" />
-                :
-                <input type="text" maxlength="2" class="timepicker-input-minutes" />
+                <div class="timepicker-input-hours-wrapper">
+                  <input type="text" maxlength="2" autofocus 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>
@@ -6349,7 +6675,7 @@ var M = (function (exports) {
             <div class="timepicker-footer"></div>
           </div>
         </div>
-      </div`;
+      </div>`;
         }
     }
 
@@ -6384,7 +6710,7 @@ var M = (function (exports) {
         yMovement;
         constructor(el, options) {
             super(el, options, Tooltip);
-            this.el.M_Tooltip = this;
+            this.el['M_Tooltip'] = this;
             this.options = {
                 ...Tooltip.defaults,
                 ...this._getAttributeOptions(),
@@ -6408,12 +6734,12 @@ var M = (function (exports) {
             return super.init(els, options, Tooltip);
         }
         static getInstance(el) {
-            return el.M_Tooltip;
+            return el['M_Tooltip'];
         }
         destroy() {
             this.tooltipEl.remove();
             this._removeEventHandlers();
-            this.el.M_Tooltip = undefined;
+            this.el['M_Tooltip'] = undefined;
         }
         _appendTooltipEl() {
             this.tooltipEl = document.createElement('div');
@@ -6422,7 +6748,7 @@ var M = (function (exports) {
                 ? document.getElementById(this.options.tooltipId)
                 : document.createElement('div');
             this.tooltipEl.append(tooltipContentEl);
-            tooltipContentEl.style.display = "";
+            tooltipContentEl.style.display = '';
             tooltipContentEl.classList.add('tooltip-content');
             this._setTooltipContent(tooltipContentEl);
             this.tooltipEl.appendChild(tooltipContentEl);
@@ -6491,7 +6817,8 @@ var M = (function (exports) {
         _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);
+            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') {
@@ -6604,7 +6931,7 @@ var M = (function (exports) {
             this.close();
         };
         _getAttributeOptions() {
-            let attributeOptions = {};
+            const attributeOptions = {};
             const tooltipTextOption = this.el.getAttribute('data-tooltip');
             const tooltipId = this.el.getAttribute('data-tooltip-id');
             const positionOption = this.el.getAttribute('data-position');
@@ -6641,11 +6968,22 @@ var M = (function (exports) {
                 }
                 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 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 + ")";
+                    const stop = 90 * easing + '%';
+                    targetElement.style.backgroundImage =
+                        'radial-gradient(' +
+                            circle +
+                            ', ' +
+                            waveColor +
+                            ' ' +
+                            stop +
+                            ', transparent ' +
+                            stop +
+                            ')';
                     animationFrame = window.requestAnimationFrame(animationStep);
                 }
                 else {
@@ -6657,8 +6995,8 @@ var M = (function (exports) {
         }
         static Init() {
             if (typeof document !== 'undefined')
-                document?.addEventListener("DOMContentLoaded", () => {
-                    document.body.addEventListener('click', e => {
+                document?.addEventListener('DOMContentLoaded', () => {
+                    document.body.addEventListener('click', (e) => {
                         const trigger = e.target;
                         const el = trigger.closest('.waves-effect');
                         if (el && el.contains(trigger)) {
@@ -6683,7 +7021,7 @@ var M = (function (exports) {
         thumb;
         constructor(el, options) {
             super(el, options, Range);
-            this.el.M_Range = this;
+            this.el['M_Range'] = this;
             this.options = {
                 ...Range.defaults,
                 ...options
@@ -6704,12 +7042,12 @@ var M = (function (exports) {
             return super.init(els, options, Range);
         }
         static getInstance(el) {
-            return el.M_Range;
+            return el['M_Range'];
         }
         destroy() {
             this._removeEventHandlers();
             this._removeThumb();
-            this.el.M_Range = undefined;
+            this.el['M_Range'] = undefined;
         }
         _setupEventHandlers() {
             this.el.addEventListener('change', this._handleRangeChange);
@@ -6790,7 +7128,7 @@ var M = (function (exports) {
             top ${duration}ms ease,
             margin ${duration}ms ease
           `;
-                        // to          
+                        // to
                         this.thumb.style.height = '0';
                         this.thumb.style.width = '0';
                         this.thumb.style.top = '0';
@@ -6840,7 +7178,7 @@ var M = (function (exports) {
          */
         static Init() {
             if (typeof document !== 'undefined')
-                Range.init((document?.querySelectorAll('input[type=range]')), {});
+                Range.init(document?.querySelectorAll('input[type=range]'), {});
         }
     }
 
@@ -6854,7 +7192,7 @@ var M = (function (exports) {
         isValidLength;
         constructor(el, options) {
             super(el, {}, CharacterCounter);
-            this.el.M_CharacterCounter = this;
+            this.el['M_CharacterCounter'] = this;
             this.options = {
                 ...CharacterCounter.defaults,
                 ...options
@@ -6876,11 +7214,11 @@ var M = (function (exports) {
             return super.init(els, options, CharacterCounter);
         }
         static getInstance(el) {
-            return el.M_CharacterCounter;
+            return el['M_CharacterCounter'];
         }
         destroy() {
             this._removeEventHandlers();
-            this.el.CharacterCounter = undefined;
+            this.el['CharacterCounter'] = undefined;
             this._removeCounter();
         }
         _setupEventHandlers() {
@@ -6903,7 +7241,7 @@ var M = (function (exports) {
             this.counterEl.remove();
         }
         updateCounter = () => {
-            let maxLength = parseInt(this.el.getAttribute('maxlength')), actualLength = this.el.value.length;
+            const maxLength = parseInt(this.el.getAttribute('maxlength')), actualLength = this.el.value.length;
             this.isValidLength = actualLength <= maxLength;
             let counterString = actualLength.toString();
             if (maxLength) {
@@ -6925,7 +7263,7 @@ var M = (function (exports) {
         }
     }
 
-    let _defaults$1 = {
+    const _defaults$1 = {
         indicators: true,
         height: 400,
         duration: 500,
@@ -6949,7 +7287,7 @@ var M = (function (exports) {
         _sliderId;
         constructor(el, options) {
             super(el, options, Slider);
-            this.el.M_Slider = this;
+            this.el['M_Slider'] = this;
             this.options = {
                 ...Slider.defaults,
                 ...options
@@ -6963,7 +7301,7 @@ var M = (function (exports) {
             // 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'));
+            this.activeIndex = this._slides.findIndex((li) => li.classList.contains('active'));
             if (this.activeIndex !== -1) {
                 this._activeSlide = this._slides[this.activeIndex];
             }
@@ -6977,7 +7315,7 @@ var M = (function (exports) {
             }
             const placeholderBase64 = 'data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
             // Set initial positions of captions
-            this._slides.forEach(slide => {
+            this._slides.forEach((slide) => {
                 // Caption
                 //const caption = <HTMLElement|null>slide.querySelector('.caption');
                 //if (caption) this._animateCaptionIn(caption, 0);
@@ -7028,13 +7366,13 @@ var M = (function (exports) {
             return super.init(els, options, Slider);
         }
         static getInstance(el) {
-            return el.M_Slider;
+            return el['M_Slider'];
         }
         destroy() {
             this.pause();
             this._removeIndicators();
             this._removeEventHandlers();
-            this.el.M_Slider = undefined;
+            this.el['M_Slider'] = undefined;
         }
         _setupEventHandlers() {
             if (this.options.pauseOnFocus) {
@@ -7139,7 +7477,7 @@ var M = (function (exports) {
             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');
+                    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';
@@ -7182,11 +7520,11 @@ var M = (function (exports) {
             const _caption = this._activeSlide.querySelector('.caption');
             this._activeSlide.classList.remove('active');
             // Enables every slide
-            this._slides.forEach(slide => slide.style.visibility = 'visible');
+            this._slides.forEach((slide) => (slide.style.visibility = 'visible'));
             //--- Hide active Slide + Caption
             this._activeSlide.style.opacity = '0';
             setTimeout(() => {
-                this._slides.forEach(slide => {
+                this._slides.forEach((slide) => {
                     if (slide.classList.contains('active'))
                         return;
                     slide.style.opacity = '0';
@@ -7204,7 +7542,7 @@ var M = (function (exports) {
                 const nextIndicator = this._indicators[index].children[0];
                 activeIndicator.classList.remove('active');
                 nextIndicator.classList.add('active');
-                if (typeof this.options.indicatorLabelFunc === "function") {
+                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);
                 }
@@ -7264,7 +7602,7 @@ var M = (function (exports) {
         };
     }
 
-    let _defaults = {
+    const _defaults = {
         text: '',
         displayLength: 4000,
         inDuration: 300,
@@ -7310,8 +7648,8 @@ var M = (function (exports) {
             }
             // Create new toast
             Toast._toasts.push(this);
-            let toastElement = this._createToast();
-            toastElement.M_Toast = this;
+            const toastElement = this._createToast();
+            toastElement['M_Toast'] = this;
             this.el = toastElement;
             this._animateIn();
             this._setTimer();
@@ -7320,7 +7658,7 @@ var M = (function (exports) {
             return _defaults;
         }
         static getInstance(el) {
-            return el.M_Toast;
+            return el['M_Toast'];
         }
         static _createContainer() {
             const container = document.createElement('div');
@@ -7344,7 +7682,7 @@ var M = (function (exports) {
         static _onDragStart(e) {
             if (e.target && e.target.closest('.toast')) {
                 const toastElem = e.target.closest('.toast');
-                const toast = toastElem.M_Toast;
+                const toast = toastElem['M_Toast'];
                 toast.panning = true;
                 Toast._draggedToast = toast;
                 toast.el.classList.add('panning');
@@ -7370,12 +7708,12 @@ var M = (function (exports) {
         }
         static _onDragEnd() {
             if (!!Toast._draggedToast) {
-                let toast = Toast._draggedToast;
+                const toast = Toast._draggedToast;
                 toast.panning = false;
                 toast.el.classList.remove('panning');
-                let totalDeltaX = toast.xPos - toast.startingXPos;
-                let activationDistance = toast.el.offsetWidth * toast.options.activationPercent;
-                let shouldBeDismissed = Math.abs(totalDeltaX) > activationDistance || toast.velocityX > 1;
+                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;
@@ -7391,7 +7729,7 @@ var M = (function (exports) {
             }
         }
         static _xPos(e) {
-            if (e.type.startsWith("touch") && e.targetTouches.length >= 1) {
+            if (e.type.startsWith('touch') && e.targetTouches.length >= 1) {
                 return e.targetTouches[0].clientX;
             }
             // mouse event
@@ -7401,7 +7739,7 @@ var M = (function (exports) {
          * dismiss all toasts.
          */
         static dismissAll() {
-            for (let toastIndex in Toast._toasts) {
+            for (const toastIndex in Toast._toasts) {
                 Toast._toasts[toastIndex].dismiss();
             }
         }
@@ -7428,7 +7766,7 @@ var M = (function (exports) {
         }
         _animateIn() {
             // Animate toast in
-            this.el.style.display = "";
+            this.el.style.display = '';
             this.el.style.opacity = '0';
             // easeOutCubic
             this.el.style.transition = `
@@ -7462,8 +7800,8 @@ var M = (function (exports) {
          * Dismiss toast with animation.
          */
         dismiss() {
-            window.clearInterval(this.counterInterval);
-            let activationDistance = this.el.offsetWidth * this.options.activationPercent;
+            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)`;
@@ -7499,20 +7837,17 @@ var M = (function (exports) {
         }
     }
 
-    const version = '2.1.1';
-    const Grid = (children = '') => {
-        return `<div class="row">${children}</row>`;
-    };
-    function Button(children = '') {
-        return `<button class="btn">${children}</button>`;
-    }
+    /* 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) {
-        let registry = {
+    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)'),
@@ -7531,24 +7866,25 @@ var M = (function (exports) {
             Tooltip: context.querySelectorAll('.tooltipped:not(.no-autoinit)'),
             FloatingActionButton: context.querySelectorAll('.fixed-action-btn:not(.no-autoinit)')
         };
-        Autocomplete.init(registry.Autocomplete, {});
-        Carousel.init(registry.Carousel, {});
-        Chips.init(registry.Chips, {});
-        Collapsible.init(registry.Collapsible, {});
-        Datepicker.init(registry.Datepicker, {});
-        Dropdown.init(registry.Dropdown, {});
-        Materialbox.init(registry.Materialbox, {});
-        Modal.init(registry.Modal, {});
-        Parallax.init(registry.Parallax, {});
-        Pushpin.init(registry.Pushpin, {});
-        ScrollSpy.init(registry.ScrollSpy, {});
-        FormSelect.init(registry.FormSelect, {});
-        Sidenav.init(registry.Sidenav, {});
-        Tabs.init(registry.Tabs, {});
-        TapTarget.init(registry.TapTarget, {});
-        Timepicker.init(registry.Timepicker, {});
-        Tooltip.init(registry.Tooltip, {});
-        FloatingActionButton.init(registry.FloatingActionButton, {});
+        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') {
@@ -7557,7 +7893,6 @@ var M = (function (exports) {
         document.addEventListener('focus', Utils.docHandleFocus, true);
         document.addEventListener('blur', Utils.docHandleBlur, true);
     }
-    Cards.Init();
     Forms.Init();
     Chips.Init();
     Waves.Init();
@@ -7565,7 +7900,6 @@ var M = (function (exports) {
 
     exports.AutoInit = AutoInit;
     exports.Autocomplete = Autocomplete;
-    exports.Button = Button;
     exports.Cards = Cards;
     exports.Carousel = Carousel;
     exports.CharacterCounter = CharacterCounter;
@@ -7576,7 +7910,6 @@ var M = (function (exports) {
     exports.FloatingActionButton = FloatingActionButton;
     exports.FormSelect = FormSelect;
     exports.Forms = Forms;
-    exports.Grid = Grid;
     exports.Materialbox = Materialbox;
     exports.Modal = Modal;
     exports.Parallax = Parallax;