@materializecss/materialize 2.2.1 → 2.2.2

package/dist/js/materialize.mjs

@@ -1,6 +1,6 @@
 /*!
-* Materialize v2.2.1 (https://materializeweb.com)
-* Copyright 2014-2024 Materialize
+* Materialize v2.2.2 (https://materializeweb.com)
+* Copyright 2014-2025 Materialize
 * MIT License (https://raw.githubusercontent.com/materializecss/materialize/master/LICENSE)
 */
 /**
@@ -216,13 +216,11 @@ class Utils {
             if (!previous && options.leading === false)
                 previous = now;
             const remaining = wait - (now - previous);
-            context = this;
             if (remaining <= 0) {
                 clearTimeout(timeout);
                 timeout = null;
                 previous = now;
-                result = func.apply(context, args);
-                context = args = null;
+                result = func.apply(this, args);
             }
             else if (!timeout && options.trailing !== false) {
                 timeout = setTimeout(later, remaining);
@@ -230,6 +228,105 @@ class Utils {
             return result;
         };
     }
+    /**
+     * Renders confirm/close buttons with callback function
+     */
+    static createConfirmationContainer(container, confirmText, cancelText, onConfirm, onCancel) {
+        const confirmationButtonsContainer = document.createElement('div');
+        confirmationButtonsContainer.classList.add('confirmation-btns');
+        container.append(confirmationButtonsContainer);
+        this.createButton(confirmationButtonsContainer, cancelText, ['btn-cancel'], true, onCancel);
+        this.createButton(confirmationButtonsContainer, confirmText, ['btn-confirm'], true, onConfirm);
+    }
+    /**
+     * Renders a button with optional callback function
+     */
+    static createButton(container, text, className = [], visibility = true, callback = null) {
+        className = className.concat(['btn', 'waves-effect', 'text']);
+        const button = document.createElement('button');
+        button.className = className.join(' ');
+        button.style.visibility = visibility ? 'visible' : 'hidden';
+        button.type = 'button';
+        button.tabIndex = !!visibility ? 0 : -1;
+        button.innerText = text;
+        button.addEventListener('click', callback);
+        button.addEventListener('keypress', (e) => {
+            if (Utils.keys.ENTER.includes(e.key))
+                callback(e);
+        });
+        container.append(button);
+    }
+    static _setAbsolutePosition(origin, container, position, margin, transitionMovement, align = 'center') {
+        const originHeight = origin.offsetHeight, originWidth = origin.offsetWidth, containerHeight = container.offsetHeight, containerWidth = container.offsetWidth;
+        let xMovement = 0, yMovement = 0, targetTop = origin.getBoundingClientRect().top + Utils.getDocumentScrollTop(), targetLeft = origin.getBoundingClientRect().left + Utils.getDocumentScrollLeft();
+        if (position === 'top') {
+            targetTop += -containerHeight - margin;
+            if (align === 'center') {
+                targetLeft += originWidth / 2 - containerWidth / 2; // This is center align
+            }
+            yMovement = -transitionMovement;
+        }
+        else if (position === 'right') {
+            targetTop += originHeight / 2 - containerHeight / 2;
+            targetLeft = originWidth + margin;
+            xMovement = transitionMovement;
+        }
+        else if (position === 'left') {
+            targetTop += originHeight / 2 - containerHeight / 2;
+            targetLeft = -containerWidth - margin;
+            xMovement = -transitionMovement;
+        }
+        else {
+            targetTop += originHeight + margin;
+            if (align === 'center') {
+                targetLeft += originWidth / 2 - containerWidth / 2; // This is center align
+            }
+            yMovement = transitionMovement;
+        }
+        if (align === 'right') {
+            targetLeft += originWidth - containerWidth - margin;
+        }
+        const newCoordinates = Utils._repositionWithinScreen(targetLeft, targetTop, containerWidth, containerHeight, margin, transitionMovement, align);
+        container.style.top = newCoordinates.y + 'px';
+        container.style.left = newCoordinates.x + 'px';
+        return { x: xMovement, y: yMovement };
+    }
+    static _repositionWithinScreen(x, y, width, height, margin, transitionMovement, align) {
+        const scrollLeft = Utils.getDocumentScrollLeft();
+        const scrollTop = Utils.getDocumentScrollTop();
+        let newX = x - scrollLeft;
+        let newY = y - scrollTop;
+        const bounding = {
+            left: newX,
+            top: newY,
+            width: width,
+            height: height
+        };
+        let offset;
+        if (align === 'left' || align == 'center') {
+            offset = margin + transitionMovement;
+        }
+        else if (align === 'right') {
+            offset = margin - transitionMovement;
+        }
+        const edges = Utils.checkWithinContainer(document.body, bounding, offset);
+        if (edges.left) {
+            newX = offset;
+        }
+        else if (edges.right) {
+            newX -= newX + width - window.innerWidth;
+        }
+        if (edges.top) {
+            newY = offset;
+        }
+        else if (edges.bottom) {
+            newY -= newY + height - window.innerHeight;
+        }
+        return {
+            x: newX + scrollLeft,
+            y: newY + scrollTop
+        };
+    }
 }
 
 /**
@@ -300,7 +397,7 @@ class Component {
     }
 }
 
-const _defaults$m = {
+const _defaults$n = {
     alignment: 'left',
     autoFocus: true,
     constrainWidth: true,
@@ -348,12 +445,12 @@ class Dropdown extends Component {
         this.filterQuery = [];
         this.el.ariaExpanded = 'false';
         // Move dropdown-content after dropdown-trigger
-        this._moveDropdown();
+        this._moveDropdownToElement();
         this._makeDropdownFocusable();
         this._setupEventHandlers();
     }
     static get defaults() {
-        return _defaults$m;
+        return _defaults$n;
     }
     /**
      * Initializes instances of Dropdown.
@@ -414,7 +511,7 @@ class Dropdown extends Component {
     }
     _handleClick = (e) => {
         e.preventDefault();
-        this._moveDropdown(e.target.closest('li'));
+        //this._moveDropdown((<HTMLElement>e.target).closest('li'));
         if (this.isOpen) {
             this.close();
         }
@@ -422,8 +519,8 @@ class Dropdown extends Component {
             this.open();
         }
     };
-    _handleMouseEnter = (e) => {
-        this._moveDropdown(e.target.closest('li'));
+    _handleMouseEnter = () => {
+        //this._moveDropdown((<HTMLElement>e.target).closest('li'));
         this.open();
     };
     _handleMouseLeave = (e) => {
@@ -509,7 +606,7 @@ class Dropdown extends Component {
         else if (Utils.keys.ENTER.includes(e.key) && this.isOpen) {
             // Search for <a> and <button>
             const focusedElement = this.dropdownEl.children[this.focusedIndex];
-            const activatableElement = focusedElement.querySelector('a, button');
+            const activatableElement = focusedElement?.querySelector('a, button');
             // Click a or button tag if exists, otherwise click li tag
             if (!!activatableElement) {
                 activatableElement.click();
@@ -569,19 +666,17 @@ class Dropdown extends Component {
         this.dropdownEl.style.top = '';
         this.dropdownEl.style.transformOrigin = '';
     }
-    // Move dropdown after container or trigger
-    _moveDropdown(containerEl = null) {
-        if (!!this.options.container) {
+    _moveDropdownToElement(containerEl = null) {
+        if (this.options.container) {
             this.options.container.append(this.dropdownEl);
+            return;
         }
-        else if (containerEl) {
-            if (!containerEl.contains(this.dropdownEl)) {
+        if (containerEl) {
+            if (!containerEl.contains(this.dropdownEl))
                 containerEl.append(this.dropdownEl);
-            }
-        }
-        else {
-            this.el.after(this.dropdownEl);
+            return;
         }
+        this.el.after(this.dropdownEl);
     }
     _makeDropdownFocusable() {
         if (!this.dropdownEl)
@@ -742,7 +837,7 @@ class Dropdown extends Component {
         }
         if (getComputedStyle(closestOverflowParent).position === 'static')
             closestOverflowParent.style.position = 'relative';
-        this._moveDropdown(closestOverflowParent);
+        //this._moveDropdown(closestOverflowParent);
         // Set width before calculating positionInfo
         const idealWidth = this.options.constrainWidth
             ? this.el.getBoundingClientRect().width
@@ -806,7 +901,7 @@ class Dropdown extends Component {
     };
 }
 
-const _defaults$l = {
+const _defaults$m = {
     data: [], // Autocomplete data set
     onAutocomplete: null, // Callback for when autocompleted
     dropdownOptions: {
@@ -819,11 +914,12 @@ const _defaults$l = {
     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
+    allowUnsafeHTML: false,
+    selected: []
 };
 class Autocomplete extends Component {
     /** If the autocomplete is open. */
@@ -852,7 +948,7 @@ class Autocomplete extends Component {
         this.count = 0;
         this.activeIndex = -1;
         this.oldVal = '';
-        this.selectedValues = [];
+        this.selectedValues = this.selectedValues || this.options.selected.map((value) => ({ id: value })) || [];
         this.menuItems = this.options.data || [];
         this.$active = null;
         this._mousedown = false;
@@ -860,7 +956,7 @@ class Autocomplete extends Component {
         this._setupEventHandlers();
     }
     static get defaults() {
-        return _defaults$l;
+        return _defaults$m;
     }
     /**
      * Initializes instances of Autocomplete.
@@ -909,6 +1005,7 @@ class Autocomplete extends Component {
         this.container.style.maxHeight = this.options.maxDropDownHeight;
         this.container.id = `autocomplete-options-${Utils.guid()}`;
         this.container.classList.add('autocomplete-content', 'dropdown-content');
+        this.container.ariaExpanded = 'true';
         this.el.setAttribute('data-target', this.container.id);
         this.menuItems.forEach((menuItem) => {
             const itemElement = this._createDropdownItem(menuItem);
@@ -941,6 +1038,10 @@ class Autocomplete extends Component {
             this.el.after(label);
         // Sketchy removal of dropdown click handler
         this.el.removeEventListener('click', this.dropdown._handleClick);
+        if (!this.options.isMultiSelect && !(this.options.selected.length === 0)) {
+            const selectedValue = this.menuItems.filter((value) => value.id === this.selectedValues[0].id);
+            this.el.value = selectedValue[0].text;
+        }
         // Set Value if already set in HTML
         if (this.el.value)
             this.selectOption(this.el.value);
@@ -952,6 +1053,7 @@ class Autocomplete extends Component {
         this._updateSelectedInfo();
     }
     _removeDropdown() {
+        this.container.ariaExpanded = 'false';
         this.container.parentNode.removeChild(this.container);
     }
     _handleInputBlur = () => {
@@ -1061,6 +1163,7 @@ class Autocomplete extends Component {
         const item = document.createElement('li');
         item.setAttribute('data-id', entry.id);
         item.setAttribute('style', 'display:grid; grid-auto-flow: column; user-select: none; align-items: center;');
+        item.tabIndex = 0;
         // Checkbox
         if (this.options.isMultiSelect) {
             item.innerHTML = `
@@ -1188,14 +1291,29 @@ class Autocomplete extends Component {
     /**
      * Updates the visible or selectable items shown in the menu.
      * @param menuItems Items to be available.
+     * @param selected Selected item ids
+     * @param open Option to conditionally open dropdown
      */
-    setMenuItems(menuItems) {
+    setMenuItems(menuItems, selected = null, open = true) {
         this.menuItems = menuItems;
-        this.open();
+        this.options.data = menuItems;
+        if (selected) {
+            this.selectedValues = this.menuItems.filter((item) => !(selected.indexOf(item.id) === -1));
+        }
+        if (this.options.isMultiSelect) {
+            this._renderDropdown();
+        }
+        else {
+            this._refreshInputText();
+        }
+        if (open)
+            this.open();
         this._updateSelectedInfo();
+        this._triggerChanged();
     }
     /**
      * Sets selected values.
+     * @deprecated @see https://github.com/materializecss/materialize/issues/552
      * @param entries
      */
     setValues(entries) {
@@ -1215,16 +1333,16 @@ class Autocomplete extends Component {
         if (!entry)
             return;
         // Toggle Checkbox
-        const li = this.container.querySelector('li[data-id="' + id + '"]');
-        if (!li)
-            return;
+        /* const li = this.container.querySelector('li[data-id="' + id + '"]');
+        if (!li) return;*/
         if (this.options.isMultiSelect) {
-            const checkbox = li.querySelector('input[type="checkbox"]');
-            checkbox.checked = !checkbox.checked;
-            if (checkbox.checked)
+            /* const checkbox = <HTMLInputElement | null>li.querySelector('input[type="checkbox"]');
+            checkbox.checked = !checkbox.checked;*/
+            if (!(this.selectedValues.filter((selectedEntry) => selectedEntry.id === entry.id).length >= 1))
                 this.selectedValues.push(entry);
             else
                 this.selectedValues = this.selectedValues.filter((selectedEntry) => selectedEntry.id !== entry.id);
+            this._renderDropdown();
             this.el.focus();
         }
         else {
@@ -1237,9 +1355,16 @@ class Autocomplete extends Component {
         this._updateSelectedInfo();
         this._triggerChanged();
     }
+    selectOptions(ids) {
+        const entries = this.menuItems.filter((item) => !(ids.indexOf(item.id) === -1));
+        if (!entries)
+            return;
+        this.selectedValues = entries;
+        this._renderDropdown();
+    }
 }
 
-const _defaults$k = {
+const _defaults$l = {
     direction: 'top',
     hoverEnabled: true,
     toolbarEnabled: false
@@ -1273,6 +1398,8 @@ class FloatingActionButton extends Component {
         this.offsetY = 0;
         this.offsetX = 0;
         this.el.classList.add(`direction-${this.options.direction}`);
+        this._anchor.tabIndex = 0;
+        this._menu.ariaExpanded = 'false';
         if (this.options.direction === 'top')
             this.offsetY = 40;
         else if (this.options.direction === 'right')
@@ -1284,7 +1411,7 @@ class FloatingActionButton extends Component {
         this._setupEventHandlers();
     }
     static get defaults() {
-        return _defaults$k;
+        return _defaults$l;
     }
     /**
      * Initializes instances of FloatingActionButton.
@@ -1309,6 +1436,7 @@ class FloatingActionButton extends Component {
         else {
             this.el.addEventListener('click', this._handleFABClick);
         }
+        this.el.addEventListener('keypress', this._handleFABKeyPress);
     }
     _removeEventHandlers() {
         if (this.options.hoverEnabled && !this.options.toolbarEnabled) {
@@ -1318,8 +1446,17 @@ class FloatingActionButton extends Component {
         else {
             this.el.removeEventListener('click', this._handleFABClick);
         }
+        this.el.removeEventListener('keypress', this._handleFABKeyPress);
     }
     _handleFABClick = () => {
+        this._handleFABToggle();
+    };
+    _handleFABKeyPress = (e) => {
+        if (Utils.keys.ENTER.includes(e.key)) {
+            this._handleFABToggle();
+        }
+    };
+    _handleFABToggle = () => {
         if (this.isOpen) {
             this.close();
         }
@@ -1361,6 +1498,7 @@ class FloatingActionButton extends Component {
     };
     _animateInFAB() {
         this.el.classList.add('active');
+        this._menu.ariaExpanded = 'true';
         const delayIncrement = 40;
         const duration = 275;
         this._floatingBtnsReverse.forEach((el, index) => {
@@ -1377,18 +1515,23 @@ class FloatingActionButton extends Component {
                     el.style.transition = `opacity ${duration}ms ease, transform ${duration}ms ease`;
                     el.style.opacity = '1';
                     el.style.transform = 'translate(0, 0) scale(1)';
+                    el.tabIndex = 0;
                 }, 1);
             }, delay);
         });
     }
     _animateOutFAB() {
         const duration = 175;
-        setTimeout(() => this.el.classList.remove('active'), duration);
+        setTimeout(() => {
+            this.el.classList.remove('active');
+            this._menu.ariaExpanded = 'false';
+        }, duration);
         this._floatingBtnsReverse.forEach((el) => {
             el.style.transition = `opacity ${duration}ms ease, transform ${duration}ms ease`;
             // to
             el.style.opacity = '0';
             el.style.transform = `translate(${this.offsetX}px, ${this.offsetY}px) scale(0.4)`;
+            el.tabIndex = -1;
         });
     }
     _animateInToolbar() {
@@ -1412,6 +1555,7 @@ class FloatingActionButton extends Component {
         this.el.style.left = '0';
         this.el.style.transform = 'translateX(' + this.offsetX + 'px)';
         this.el.style.transition = 'none';
+        this._menu.ariaExpanded = 'true';
         this._anchor.style.transform = `translateY(${this.offsetY}px`;
         this._anchor.style.transition = 'none';
         setTimeout(() => {
@@ -1426,9 +1570,10 @@ class FloatingActionButton extends Component {
                 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';
+                    a.tabIndex = 0;
+                });
                 // Scroll to close.
                 window.addEventListener('scroll', this.close, true);
                 document.body.addEventListener('click', this._handleDocumentClick, true);
@@ -1437,7 +1582,7 @@ class FloatingActionButton extends Component {
     }
 }
 
-const _defaults$j = {
+const _defaults$k = {
     onOpen: null,
     onClose: null,
     inDuration: 225,
@@ -1456,6 +1601,7 @@ class Cards extends Component {
             ...Cards.defaults,
             ...options
         };
+        this._activators = [];
         this.cardReveal = this.el.querySelector('.card-reveal');
         if (this.cardReveal) {
             this.initialOverflow = getComputedStyle(this.el).overflow;
@@ -1472,7 +1618,7 @@ class Cards extends Component {
         }
     }
     static get defaults() {
-        return _defaults$j;
+        return _defaults$k;
     }
     /**
      * Initializes instances of Cards.
@@ -1571,9 +1717,20 @@ class Cards extends Component {
         }
         this._removeRevealCloseEventHandlers();
     };
+    static Init() {
+        if (typeof document !== 'undefined')
+            // Handle initialization of static cards.
+            document.addEventListener('DOMContentLoaded', () => {
+                const cards = document.querySelectorAll('.card');
+                cards.forEach((el) => {
+                    if (el && (el['M_Card'] == undefined))
+                        this.init(el);
+                });
+            });
+    }
 }
 
-const _defaults$i = {
+const _defaults$j = {
     duration: 200, // ms
     dist: -100, // zoom scale TODO: make this more intuitive as an option
     shift: 0, // spacing for center image
@@ -1675,7 +1832,7 @@ class Carousel extends Component {
         this._scroll(this.offset);
     }
     static get defaults() {
-        return _defaults$i;
+        return _defaults$j;
     }
     /**
      * Initializes instances of Carousel.
@@ -1730,9 +1887,7 @@ class Carousel extends Component {
         }
         window.removeEventListener('resize', this._handleThrottledResize);
     }
-    _handleThrottledResize = Utils.throttle(function () {
-        this._handleResize();
-    }, 200, null).bind(this);
+    _handleThrottledResize = () => Utils.throttle(this._handleResize, 200, null).bind(this);
     _handleCarouselTap = (e) => {
         // Fixes firefox draggable image bug
         if (e.type === 'mousedown' && e.target.tagName === 'IMG') {
@@ -2147,7 +2302,7 @@ class Carousel extends Component {
     }
 }
 
-const _defaults$h = {
+const _defaults$i = {
     data: [],
     placeholder: '',
     secondaryPlaceholder: '',
@@ -2201,7 +2356,7 @@ class Chips extends Component {
         }
     }
     static get defaults() {
-        return _defaults$h;
+        return _defaults$i;
     }
     /**
      * Initializes instances of Chips.
@@ -2485,7 +2640,7 @@ class Chips extends Component {
     }
 }
 
-const _defaults$g = {
+const _defaults$h = {
     accordion: true,
     onOpenStart: null,
     onOpenEnd: null,
@@ -2521,7 +2676,7 @@ class Collapsible extends Component {
         }
     }
     static get defaults() {
-        return _defaults$g;
+        return _defaults$h;
     }
     /**
      * Initializes instances of Collapsible.
@@ -2640,7 +2795,7 @@ class Collapsible extends Component {
     };
 }
 
-const _defaults$f = {
+const _defaults$g = {
     classes: '',
     dropdownOptions: {}
 };
@@ -2662,6 +2817,7 @@ class FormSelect extends Component {
     wrapper;
     selectOptions;
     _values;
+    nativeTabIndex;
     constructor(el, options) {
         super(el, options, FormSelect);
         if (this.el.classList.contains('browser-default'))
@@ -2672,13 +2828,14 @@ class FormSelect extends Component {
             ...options
         };
         this.isMultiple = this.el.multiple;
+        this.nativeTabIndex = this.el.tabIndex ?? -1;
         this.el.tabIndex = -1;
         this._values = [];
         this._setupDropdown();
         this._setupEventHandlers();
     }
     static get defaults() {
-        return _defaults$f;
+        return _defaults$g;
     }
     /**
      * Initializes instances of FormSelect.
@@ -2768,8 +2925,6 @@ class FormSelect extends Component {
     };
     _setupDropdown() {
         this.labelEl = document.querySelector('[for="' + this.el.id + '"]');
-        if (this.labelEl)
-            this.labelEl.style.display = 'none';
         this.wrapper = document.createElement('div');
         this.wrapper.classList.add('select-wrapper', 'input-field');
         if (this.options.classes.length > 0) {
@@ -2787,6 +2942,7 @@ class FormSelect extends Component {
         // Create dropdown
         this.dropdownOptions = document.createElement('ul');
         this.dropdownOptions.id = `select-options-${Utils.guid()}`;
+        this.dropdownOptions.setAttribute('popover', 'auto');
         this.dropdownOptions.classList.add('dropdown-content', 'select-dropdown');
         this.dropdownOptions.setAttribute('role', 'listbox');
         this.dropdownOptions.ariaMultiSelectable = this.isMultiple.toString();
@@ -2835,6 +2991,7 @@ class FormSelect extends Component {
         this.input.ariaRequired = this.el.hasAttribute('required').toString(); //setAttribute("aria-required", this.el.hasAttribute("required"));
         if (this.el.disabled)
             this.input.disabled = true; // 'true');
+        this.input.setAttribute('tabindex', this.nativeTabIndex.toString());
         const attrs = this.el.attributes;
         for (let i = 0; i < attrs.length; ++i) {
             const attr = attrs[i];
@@ -2860,7 +3017,7 @@ class FormSelect extends Component {
         this.wrapper.prepend(dropdownIcon);
         // Initialize dropdown
         if (!this.el.disabled) {
-            const dropdownOptions = { ...this.options.dropdownOptions }; // TODO:
+            const dropdownOptions = { ...this.options.dropdownOptions };
             dropdownOptions.coverTrigger = false;
             const userOnOpenEnd = dropdownOptions.onOpenEnd;
             const userOnCloseEnd = dropdownOptions.onCloseEnd;
@@ -2899,13 +3056,9 @@ class FormSelect extends Component {
         }
         // Add initial selections
         this._setSelectedStates();
-        // Add Label
-        if (this.labelEl) {
-            const label = document.createElement('label');
-            label.htmlFor = this.input.id;
-            label.innerText = this.labelEl.innerText;
-            this.input.after(label);
-        }
+        // move label
+        if (this.labelEl)
+            this.input.after(this.labelEl);
     }
     _addOptionToValues(realOption, virtualOption) {
         this._values.push({ el: realOption, optionEl: virtualOption });
@@ -3025,6 +3178,74 @@ class FormSelect extends Component {
     }
 }
 
+const _defaults$f = {
+    margin: 5,
+    transition: 10,
+    duration: 250,
+    align: 'left'
+};
+class DockedDisplayPlugin {
+    el;
+    container;
+    options;
+    visible;
+    constructor(el, container, options) {
+        this.el = el;
+        this.options = {
+            ..._defaults$f,
+            ...options
+        };
+        this.container = document.createElement('div');
+        this.container.classList.add('display-docked');
+        this.container.append(container);
+        el.parentElement.append(this.container);
+        document.addEventListener('click', (e) => {
+            if (this.visible && !(this.el === e.target) && !(e.target.closest('.display-docked'))) {
+                this.hide();
+            }
+        });
+    }
+    /**
+     * Initializes instance of DockedDisplayPlugin
+     * @param el HTMLElement to position to
+     * @param container HTMLElement to be positioned
+     * @param options Plugin options
+     */
+    static init(el, container, options) {
+        return new DockedDisplayPlugin(el, container, options);
+    }
+    show = () => {
+        if (this.visible)
+            return;
+        this.visible = true;
+        const coordinates = Utils._setAbsolutePosition(this.el, this.container, 'bottom', this.options.margin, this.options.transition, this.options.align);
+        // @todo move to Util? -> duplicate code fragment with tooltip
+        // easeOutCubic
+        this.container.style.visibility = 'visible';
+        this.container.style.transition = `
+      transform ${this.options.duration}ms ease-out,
+      opacity ${this.options.duration}ms ease-out`;
+        setTimeout(() => {
+            this.container.style.transform = `translateX(${coordinates.x}px) translateY(${coordinates.y}px)`;
+            this.container.style.opacity = (1).toString();
+        }, 1);
+    };
+    hide = () => {
+        if (!this.visible)
+            return;
+        this.visible = false;
+        // @todo move to Util? -> duplicate code fragment with tooltip
+        this.container.removeAttribute('style');
+        this.container.style.transition = `
+      transform ${this.options.duration}ms ease-out,
+      opacity ${this.options.duration}ms ease-out`;
+        setTimeout(() => {
+            this.container.style.transform = `translateX(0px) translateY(0px)`;
+            this.container.style.opacity = '0';
+        }, 1);
+    };
+}
+
 const _defaults$e = {
     // the default output format for the input field value
     format: 'mmm dd, yyyy',
@@ -3032,6 +3253,8 @@ const _defaults$e = {
     parse: null,
     // The initial condition if the datepicker is based on date range
     isDateRange: false,
+    // The selector of the user specified date range end element
+    dateRangeEndEl: null,
     // The initial condition if the datepicker is based on multiple date selection
     isMultipleSelection: false,
     // The initial date to view when first opened
@@ -3065,10 +3288,14 @@ const _defaults$e = {
     showMonthAfterYear: false,
     // Render days of the calendar grid that fall in the next or previous month
     showDaysInNextAndPreviousMonths: false,
+    // Specify if docked picker is in open state by default
+    openByDefault: false,
     // Specify a DOM element to render the calendar in
     container: null,
     // Show clear button
     showClearBtn: false,
+    // Autosubmit
+    autoSubmit: true,
     // internationalization
     i18n: {
         cancel: 'Cancel',
@@ -3112,18 +3339,23 @@ const _defaults$e = {
     events: [],
     // callback function
     onSelect: null,
-    onDraw: null
+    onDraw: null,
+    onInputInteraction: null,
+    displayPlugin: null,
+    displayPluginOptions: null,
+    onConfirm: null,
+    onCancel: null,
 };
 class Datepicker extends Component {
     id;
     multiple = false;
     calendarEl;
     /** CLEAR button instance. */
-    clearBtn;
+    // clearBtn: HTMLElement;
     /** DONE button instance */
-    doneBtn;
-    cancelBtn;
-    modalEl;
+    /*doneBtn: HTMLElement;
+    cancelBtn: HTMLElement;*/
+    containerEl;
     yearTextEl;
     dateTextEl;
     endDateEl;
@@ -3136,6 +3368,8 @@ class Datepicker extends Component {
     calendars;
     _y;
     _m;
+    displayPlugin;
+    footer;
     static _template;
     constructor(el, options) {
         super(el, options, Datepicker);
@@ -3189,6 +3423,10 @@ class Datepicker extends Component {
             this.dateEls = [];
             this.dateEls.push(el);
         }
+        if (this.options.displayPlugin) {
+            if (this.options.displayPlugin === 'docked')
+                this.displayPlugin = DockedDisplayPlugin.init(this.el, this.containerEl, this.options.displayPluginOptions);
+        }
     }
     static get defaults() {
         return _defaults$e;
@@ -3237,7 +3475,7 @@ class Datepicker extends Component {
     }
     destroy() {
         this._removeEventHandlers();
-        this.modalEl.remove();
+        this.containerEl.remove();
         this.destroySelects();
         this.el['M_Datepicker'] = undefined;
     }
@@ -3256,27 +3494,55 @@ class Datepicker extends Component {
         if (this.el.type == 'date') {
             this.el.classList.add('datepicker-date-input');
         }
+        if (!this.el.parentElement.querySelector('.datepicker-format') === null) {
+            this._renderDateInputFormat(this.el);
+        }
         if (this.options.isDateRange) {
-            this.endDateEl = this.createDateInput();
-            this.endDateEl.classList.add('datepicker-end-date');
+            this.containerEl.classList.add('daterange');
+            if (!this.options.dateRangeEndEl) {
+                this.endDateEl = this.createDateInput();
+                this.endDateEl.classList.add('datepicker-end-date');
+            }
+            else if (document.querySelector(this.options.dateRangeEndEl) === undefined) {
+                console.warn('Specified date range end input element in dateRangeEndEl not found');
+            }
+            else {
+                this.endDateEl = document.querySelector(this.options.dateRangeEndEl);
+                if (!this.endDateEl.parentElement.querySelector('.datepicker-format') === null) {
+                    this._renderDateInputFormat(this.endDateEl);
+                }
+            }
         }
-        if (this.options.showClearBtn) {
-            this.clearBtn.style.visibility = '';
-            this.clearBtn.innerText = this.options.i18n.clear;
+        /*if (this.options.showClearBtn) {
+          this.clearBtn.style.visibility = '';
+          this.clearBtn.innerText = this.options.i18n.clear;
         }
         this.doneBtn.innerText = this.options.i18n.done;
-        this.cancelBtn.innerText = this.options.i18n.cancel;
+        this.cancelBtn.innerText = this.options.i18n.cancel;*/
+        Utils.createButton(this.footer, this.options.i18n.clear, ['datepicker-clear'], this.options.showClearBtn, this._handleClearClick);
+        if (!this.options.autoSubmit) {
+            Utils.createConfirmationContainer(this.footer, this.options.i18n.done, this.options.i18n.cancel, this._confirm, this._cancel);
+        }
         if (this.options.container) {
             const optEl = this.options.container;
             this.options.container =
                 optEl instanceof HTMLElement ? optEl : document.querySelector(optEl);
-            this.options.container.append(this.modalEl);
+            this.options.container.append(this.containerEl);
         }
         else {
-            //this.modalEl.before(this.el);
-            this.el.parentElement.appendChild(this.modalEl);
+            //this.containerEl.before(this.el);
+            const appendTo = !this.endDateEl ? this.el : this.endDateEl;
+            if (!this.options.openByDefault)
+                this.containerEl.setAttribute('style', 'display: none; visibility: hidden;');
+            appendTo.parentElement.after(this.containerEl);
         }
     }
+    /**
+     * Renders the date input format
+     */
+    _renderDateInputFormat(el) {
+        el.parentElement.querySelector('.datepicker-format').innerHTML = this.options.format.toString();
+    }
     /**
      * Gets a string representation of the given date.
      */
@@ -3417,7 +3683,6 @@ class Datepicker extends Component {
      * Sets given date as the input value on the given element.
      */
     setInputValue(el, date) {
-        console.log('setinputvalue');
         if (el.type == 'date') {
             this.setDataDate(el, date);
             el.value = this.formatDate(date, 'yyyy-mm-dd');
@@ -3521,7 +3786,7 @@ class Datepicker extends Component {
                 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 &&
+                (this.options.disableDayFn && this.options.disableDayFn(day)), isDateRangeStart = this.options.isDateRange && this.date && this.endDate && Datepicker._compareDates(this.date, day), isDateRangeEnd = this.options.isDateRange && this.endDate && Datepicker._compareDates(this.endDate, day), isDateRange = this.options.isDateRange &&
                 Datepicker._isDate(this.endDate) &&
                 Datepicker._compareWithinRange(day, this.date, this.endDate);
             let dayNumber = 1 + (i - before), monthNumber = month, yearNumber = year;
@@ -3561,6 +3826,8 @@ class Datepicker extends Component {
                 isEndRange: isEndRange,
                 isInRange: isInRange,
                 showDaysInNextAndPreviousMonths: this.options.showDaysInNextAndPreviousMonths,
+                isDateRangeStart: isDateRangeStart,
+                isDateRangeEnd: isDateRangeEnd,
                 isDateRange: isDateRange
             };
             row.push(this.renderDay(dayConfig));
@@ -3574,8 +3841,18 @@ class Datepicker extends Component {
         return this.renderTable(this.options, data, randId);
     }
     renderDay(opts) {
-        const arr = [];
-        let ariaSelected = 'false';
+        const classMap = {
+            isDisabled: 'is-disabled',
+            isToday: 'is-today',
+            isSelected: 'is-selected',
+            hasEvent: 'has-event',
+            isInRange: 'is-inrange',
+            isStartRange: 'is-startrange',
+            isEndRange: 'is-endrange',
+            isDateRangeStart: 'is-daterange-start',
+            isDateRangeEnd: 'is-daterange-end',
+            isDateRange: 'is-daterange'
+        }, ariaSelected = !(['isSelected', 'isDateRange'].filter((prop) => !!(opts.hasOwnProperty(prop) && opts[prop] === true)).length === 0), arr = ['datepicker-day'];
         if (opts.isEmpty) {
             if (opts.showDaysInNextAndPreviousMonths) {
                 arr.push('is-outside-current-month');
@@ -3585,36 +3862,10 @@ class Datepicker extends Component {
                 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');
-        }
-        if (opts.isToday) {
-            arr.push('is-today');
-        }
-        if (opts.isSelected) {
-            arr.push('is-selected');
-            ariaSelected = 'true';
-        }
-        // @todo should we create this additional css class?
-        if (opts.hasEvent) {
-            arr.push('has-event');
-        }
-        // @todo should we create this additional css class?
-        if (opts.isInRange) {
-            arr.push('is-inrange');
-        }
-        // @todo should we create this additional css class?
-        if (opts.isStartRange) {
-            arr.push('is-startrange');
-        }
-        // @todo should we create this additional css class?
-        if (opts.isEndRange) {
-            arr.push('is-endrange');
-        }
-        // @todo create additional css class
-        if (opts.isDateRange) {
-            arr.push('is-daterange');
+        for (const [property, className] of Object.entries(classMap)) {
+            if (opts.hasOwnProperty(property) && opts[property]) {
+                arr.push(className);
+            }
         }
         return (`<td data-day="${opts.day}" class="${arr.join(' ')}" aria-selected="${ariaSelected}">` +
             `<button class="datepicker-day-button" type="button" data-year="${opts.year}" data-month="${opts.month}" data-day="${opts.day}">${opts.day}</button>` +
@@ -3683,7 +3934,9 @@ class Datepicker extends Component {
             arr.reverse();
         const yearHtml = `<select class="datepicker-select orig-select-year" tabindex="-1">${arr.join('')}</select>`;
         const leftArrow = '<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"/><path d="M0-.5h24v24H0z" fill="none"/></svg>';
-        html += `<button class="month-prev${prev ? '' : ' is-disabled'} btn-flat" type="button">${leftArrow}</button>`;
+        html += `<button class="month-prev${prev ? '' : ' is-disabled'
+        // @todo remove button class and add scss mixin, current implementation temporary for focus states, @see https://github.com/materializecss/materialize/issues/566
+        } btn" type="button">${leftArrow}</button>`;
         html += '<div class="selects-container">';
         if (opts.showMonthAfterYear) {
             html += yearHtml + monthHtml;
@@ -3699,7 +3952,9 @@ class Datepicker extends Component {
             next = false;
         }
         const rightArrow = '<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"/><path d="M0-.25h24v24H0z" fill="none"/></svg>';
-        html += `<button class="month-next${next ? '' : ' is-disabled'} btn-flat" type="button">${rightArrow}</button>`;
+        html += `<button class="month-next${next ? '' : ' is-disabled'
+        // @todo remove button class and add scss mixin, current implementation temporary for focus states, @see https://github.com/materializecss/materialize/issues/566
+        } btn" type="button">${rightArrow}</button>`;
         return (html += '</div>');
     }
     // refresh HTML
@@ -3738,6 +3993,7 @@ class Datepicker extends Component {
         // Init Materialize Select
         const yearSelect = this.calendarEl.querySelector('.orig-select-year');
         const monthSelect = this.calendarEl.querySelector('.orig-select-month');
+        // @todo fix accessibility @see https://github.com/materializecss/materialize/issues/522
         FormSelect.init(yearSelect, {
             classes: 'select-year',
             dropdownOptions: { container: document.body, constrainWidth: false }
@@ -3758,25 +4014,26 @@ class Datepicker extends Component {
         this.el.addEventListener('keydown', this._handleInputKeydown);
         this.el.addEventListener('change', this._handleInputChange);
         this.calendarEl.addEventListener('click', this._handleCalendarClick);
-        this.doneBtn.addEventListener('click', () => this.setInputValues());
-        this.cancelBtn.addEventListener('click', this.close);
+        /* this.doneBtn.addEventListener('click', this._confirm);
+        this.cancelBtn.addEventListener('click', this._cancel);
+    
         if (this.options.showClearBtn) {
-            this.clearBtn.addEventListener('click', this._handleClearClick);
-        }
+          this.clearBtn.addEventListener('click', this._handleClearClick);
+        }*/
     }
     _setupVariables() {
         const template = document.createElement('template');
         template.innerHTML = Datepicker._template.trim();
-        this.modalEl = template.content.firstChild;
-        this.calendarEl = this.modalEl.querySelector('.datepicker-calendar');
-        this.yearTextEl = this.modalEl.querySelector('.year-text');
-        this.dateTextEl = this.modalEl.querySelector('.date-text');
-        if (this.options.showClearBtn) {
-            this.clearBtn = this.modalEl.querySelector('.datepicker-clear');
-        }
-        // TODO: This should not be part of the datepicker
-        this.doneBtn = this.modalEl.querySelector('.datepicker-done');
-        this.cancelBtn = this.modalEl.querySelector('.datepicker-cancel');
+        this.containerEl = template.content.firstChild;
+        this.calendarEl = this.containerEl.querySelector('.datepicker-calendar');
+        this.yearTextEl = this.containerEl.querySelector('.year-text');
+        this.dateTextEl = this.containerEl.querySelector('.date-text');
+        /* if (this.options.showClearBtn) {
+          this.clearBtn = this.containerEl.querySelector('.datepicker-clear');
+        }
+        this.doneBtn = this.containerEl.querySelector('.datepicker-done');
+        this.cancelBtn = this.containerEl.querySelector('.datepicker-cancel');*/
+        this.footer = this.containerEl.querySelector('.datepicker-footer');
         this.formats = {
             d: (date) => {
                 return date.getDate();
@@ -3831,12 +4088,20 @@ class Datepicker extends Component {
         this.setDateFromInput(e.target);
         this.draw();
         this.gotoDate(e.target === this.el ? this.date : this.endDate);
+        if (this.displayPlugin)
+            this.displayPlugin.show();
+        if (this.options.onInputInteraction)
+            this.options.onInputInteraction.call(this);
     };
     _handleInputKeydown = (e) => {
         if (Utils.keys.ENTER.includes(e.key)) {
             e.preventDefault();
             this.setDateFromInput(e.target);
             this.draw();
+            if (this.displayPlugin)
+                this.displayPlugin.show();
+            if (this.options.onInputInteraction)
+                this.options.onInputInteraction.call(this);
         }
     };
     _handleCalendarClick = (e) => {
@@ -3852,7 +4117,8 @@ class Datepicker extends Component {
                 if (this.options.isDateRange) {
                     this._handleDateRangeCalendarClick(selectedDate);
                 }
-                this._finishSelection();
+                if (this.options.autoSubmit)
+                    this._finishSelection();
             }
             else if (target.closest('.month-prev')) {
                 this.prevMonth();
@@ -3880,6 +4146,7 @@ class Datepicker extends Component {
     _clearDates = () => {
         this.date = null;
         this.endDate = null;
+        this.draw();
     };
     _handleMonthChange = (e) => {
         this.gotoMonth(e.target.value);
@@ -3944,7 +4211,17 @@ class Datepicker extends Component {
     // Set input value to the selected date and close Datepicker
     _finishSelection = () => {
         this.setInputValues();
-        this.close();
+        // Commented out because of function deprecations
+        // this.close();
+    };
+    _confirm = () => {
+        this._finishSelection();
+        if (typeof this.options.onConfirm === 'function')
+            this.options.onConfirm.call(this);
+    };
+    _cancel = () => {
+        if (typeof this.options.onCancel === 'function')
+            this.options.onCancel.call(this);
     };
     // deprecated
     open() {
@@ -3957,8 +4234,7 @@ class Datepicker extends Component {
     }
     static {
         Datepicker._template = `
-      <div class="datepicker-modal">
-        <div class="modal-content datepicker-container">
+        <div class="datepicker-container">
           <div class="datepicker-date-display">
             <span class="year-text"></span>
             <span class="date-text"></span>
@@ -3966,15 +4242,14 @@ class Datepicker extends Component {
           <div class="datepicker-calendar-container">
             <div class="datepicker-calendar"></div>
             <div class="datepicker-footer">
-              <button class="btn-flat datepicker-clear waves-effect" style="visibility: hidden;" type="button"></button>
+              <!--<button class="btn-flat datepicker-clear waves-effect" style="visibility: hidden;" type="button"></button>
               <div class="confirmation-btns">
                 <button class="btn-flat datepicker-cancel waves-effect" type="button"></button>
                 <button class="btn-flat datepicker-done waves-effect" type="button"></button>
-              </div>
+              </div>-->
             </div>
           </div>
-        </div>
-      </div>`;
+        </div>`;
     }
 }
 
@@ -4083,7 +4358,7 @@ class Forms {
             // So we set the height to the original one
             textarea.style.height = originalHeight + 'px';
         }
-        textarea.setAttribute('previous-length', textarea.value.length.toString());
+        textarea.setAttribute('previous-length', (textarea.value || '').length.toString());
     }
     static Init() {
         if (typeof document !== 'undefined')
@@ -4130,7 +4405,7 @@ class Forms {
     static InitTextarea(textarea) {
         // Save Data in Element
         textarea.setAttribute('original-height', textarea.getBoundingClientRect().height.toString());
-        textarea.setAttribute('previous-length', textarea.value.length.toString());
+        textarea.setAttribute('previous-length', (textarea.value || '').length.toString());
         Forms.textareaAutoResize(textarea);
         textarea.addEventListener('keyup', (e) => Forms.textareaAutoResize(e.target));
         textarea.addEventListener('keydown', (e) => Forms.textareaAutoResize(e.target));
@@ -4879,9 +5154,7 @@ class ScrollSpy extends Component {
             document.body.removeEventListener('click', this._handleTriggerClick);
         }
     }
-    _handleThrottledResize = Utils.throttle(function () {
-        this._handleWindowScroll();
-    }, 200).bind(this);
+    _handleThrottledResize = () => Utils.throttle(this._handleWindowScroll, 200).bind(this);
     _handleTriggerClick = (e) => {
         const trigger = e.target;
         for (let i = ScrollSpy._elements.length - 1; i >= 0; i--) {
@@ -5851,9 +6124,7 @@ class TapTarget extends Component {
         // this.originEl.removeEventListener('click', this._handleOriginClick);
         window.removeEventListener('resize', this._handleThrottledResize);
     }
-    _handleThrottledResize = Utils.throttle(function () {
-        this._handleResize();
-    }, 200).bind(this);
+    _handleThrottledResize = () => Utils.throttle(this._handleResize, 200).bind(this);
     _handleKeyboardInteraction = (e) => {
         if (Utils.keys.ENTER.includes(e.key)) {
             this._handleTargetToggle();
@@ -6052,6 +6323,7 @@ const _defaults$5 = {
     defaultTime: 'now', // default time, 'now' or '13:14' e.g.
     fromNow: 0, // Millisecond offset from the defaultTime
     showClearBtn: false,
+    autoSubmit: true,
     // internationalization
     i18n: {
         cancel: 'Cancel',
@@ -6061,11 +6333,16 @@ const _defaults$5 = {
     twelveHour: true, // change to 12 hour AM/PM clock from 24 hour
     vibrate: true, // vibrate the device when dragging clock hand
     // Callbacks
-    onSelect: null
+    onSelect: null,
+    onInputInteraction: null,
+    onDone: null,
+    onCancel: null,
+    displayPlugin: null,
+    displayPluginOptions: null,
 };
 class Timepicker extends Component {
     id;
-    modalEl;
+    containerEl;
     plate;
     digitalClock;
     inputHours;
@@ -6105,6 +6382,7 @@ class Timepicker extends Component {
     g;
     toggleViewTimer;
     vibrateTimer;
+    displayPlugin;
     constructor(el, options) {
         super(el, options, Timepicker);
         this.el['M_Timepicker'] = this;
@@ -6118,6 +6396,10 @@ class Timepicker extends Component {
         this._setupEventHandlers();
         this._clockSetup();
         this._pickerSetup();
+        if (this.options.displayPlugin) {
+            if (this.options.displayPlugin === 'docked')
+                this.displayPlugin = DockedDisplayPlugin.init(this.el, this.containerEl, this.options.displayPluginOptions);
+        }
     }
     static get defaults() {
         return _defaults$5;
@@ -6152,7 +6434,7 @@ class Timepicker extends Component {
     }
     destroy() {
         this._removeEventHandlers();
-        this.modalEl.remove();
+        this.containerEl.remove();
         this.el['M_Timepicker'] = undefined;
     }
     _setupEventHandlers() {
@@ -6171,12 +6453,20 @@ class Timepicker extends Component {
         this.el.removeEventListener('keydown', this._handleInputKeydown);
     }
     _handleInputClick = () => {
-        this.open();
+        this.inputHours.focus();
+        if (typeof this.options.onInputInteraction === 'function')
+            this.options.onInputInteraction.call(this);
+        if (this.displayPlugin)
+            this.displayPlugin.show();
     };
     _handleInputKeydown = (e) => {
         if (Utils.keys.ENTER.includes(e.key)) {
             e.preventDefault();
-            this.open();
+            this.inputHours.focus();
+            if (typeof this.options.onInputInteraction === 'function')
+                this.options.onInputInteraction.call(this);
+            if (this.displayPlugin)
+                this.displayPlugin.show();
         }
     };
     _handleTimeInputEnterKey = (e) => {
@@ -6223,12 +6513,14 @@ class Timepicker extends Component {
             this.setHand(x, y);
         }
         if (this.currentView === 'hours') {
+            this.inputMinutes.focus();
             this.showView('minutes', this.options.duration / 2);
         }
         else {
-            this.minutesView.classList.add('timepicker-dial-out');
+            // this.minutesView.classList.add('timepicker-dial-out');
             setTimeout(() => {
-                this.done();
+                if (this.options.autoSubmit)
+                    this.done();
             }, this.options.duration / 2);
         }
         if (typeof this.options.onSelect === 'function') {
@@ -6241,16 +6533,16 @@ class Timepicker extends Component {
     _insertHTMLIntoDOM() {
         const template = document.createElement('template');
         template.innerHTML = Timepicker._template.trim();
-        this.modalEl = template.content.firstChild;
-        this.modalEl.id = 'modal-' + this.id;
+        this.containerEl = template.content.firstChild;
+        this.containerEl.id = 'container-' + this.id;
         // Append popover to input by default
         const optEl = this.options.container;
         const containerEl = optEl instanceof HTMLElement ? optEl : document.querySelector(optEl);
         if (this.options.container && !!containerEl) {
-            containerEl.append(this.modalEl);
+            containerEl.append(this.containerEl);
         }
         else {
-            this.el.parentElement.appendChild(this.modalEl);
+            this.el.parentElement.appendChild(this.containerEl);
         }
     }
     _setupVariables() {
@@ -6260,42 +6552,49 @@ class Timepicker extends Component {
             : navigator['webkitVibrate']
                 ? 'webkitVibrate'
                 : null;
-        this._canvas = this.modalEl.querySelector('.timepicker-canvas');
-        this.plate = this.modalEl.querySelector('.timepicker-plate');
-        this.digitalClock = this.modalEl.querySelector('.timepicker-display-column');
-        this.hoursView = this.modalEl.querySelector('.timepicker-hours');
-        this.minutesView = this.modalEl.querySelector('.timepicker-minutes');
-        this.inputHours = this.modalEl.querySelector('.timepicker-input-hours');
-        this.inputMinutes = this.modalEl.querySelector('.timepicker-input-minutes');
-        this.spanAmPm = this.modalEl.querySelector('.timepicker-span-am-pm');
-        this.footer = this.modalEl.querySelector('.timepicker-footer');
+        this._canvas = this.containerEl.querySelector('.timepicker-canvas');
+        this.plate = this.containerEl.querySelector('.timepicker-plate');
+        this.digitalClock = this.containerEl.querySelector('.timepicker-display-column');
+        this.hoursView = this.containerEl.querySelector('.timepicker-hours');
+        this.minutesView = this.containerEl.querySelector('.timepicker-minutes');
+        this.inputHours = this.containerEl.querySelector('.timepicker-input-hours');
+        this.inputMinutes = this.containerEl.querySelector('.timepicker-input-minutes');
+        this.spanAmPm = this.containerEl.querySelector('.timepicker-span-am-pm');
+        this.footer = this.containerEl.querySelector('.timepicker-footer');
         this.amOrPm = 'PM';
     }
-    _createButton(text, visibility) {
-        const button = document.createElement('button');
-        button.classList.add('btn', 'btn-flat', 'waves-effect', 'text');
-        button.style.visibility = visibility;
-        button.type = 'button';
-        button.tabIndex = -1;
-        button.innerText = text;
-        return button;
-    }
+    /*private _createButton(text: string, visibility: string): HTMLButtonElement {
+      const button = document.createElement('button');
+      button.classList.add('btn', 'waves-effect', 'text');
+      button.style.visibility = visibility;
+      button.type = 'button';
+      button.tabIndex = -1;
+      button.innerText = text;
+      return button;
+    }*/
     _pickerSetup() {
-        const clearButton = this._createButton(this.options.i18n.clear, this.options.showClearBtn ? '' : 'hidden');
-        clearButton.classList.add('timepicker-clear');
-        clearButton.addEventListener('click', this.clear);
-        this.footer.appendChild(clearButton);
-        const confirmationBtnsContainer = document.createElement('div');
-        confirmationBtnsContainer.classList.add('confirmation-btns');
-        this.footer.append(confirmationBtnsContainer);
-        const cancelButton = this._createButton(this.options.i18n.cancel, '');
-        cancelButton.classList.add('timepicker-close');
-        cancelButton.addEventListener('click', this.close);
-        confirmationBtnsContainer.appendChild(cancelButton);
-        const doneButton = this._createButton(this.options.i18n.done, '');
-        doneButton.classList.add('timepicker-close');
-        //doneButton.addEventListener('click', this._finishSelection);
-        confirmationBtnsContainer.appendChild(doneButton);
+        // clearButton.classList.add('timepicker-clear');
+        // clearButton.addEventListener('click', this.clear);
+        // this.footer.appendChild(clearButton);
+        Utils.createButton(this.footer, this.options.i18n.clear, ['timepicker-clear'], this.options.showClearBtn, this.clear);
+        if (!this.options.autoSubmit) {
+            /*const confirmationBtnsContainer = document.createElement('div');
+            confirmationBtnsContainer.classList.add('confirmation-btns');
+            this.footer.append(confirmationBtnsContainer);
+        
+            const cancelButton = this._createButton(this.options.i18n.cancel, '');
+            cancelButton.classList.add('timepicker-close');
+            cancelButton.addEventListener('click', this.close);
+            confirmationBtnsContainer.appendChild(cancelButton);
+        
+            const doneButton = this._createButton(this.options.i18n.done, '');
+            doneButton.classList.add('timepicker-close');
+            //doneButton.addEventListener('click', this._finishSelection);
+            confirmationBtnsContainer.appendChild(doneButton);*/
+            Utils.createConfirmationContainer(this.footer, this.options.i18n.done, this.options.i18n.cancel, this.confirm, this.cancel);
+        }
+        this._updateTimeFromInput();
+        this.showView('hours');
     }
     _clockSetup() {
         if (this.options.twelveHour) {
@@ -6303,13 +6602,17 @@ class Timepicker extends Component {
             this._amBtn = document.createElement('div');
             this._amBtn.classList.add('am-btn', 'btn');
             this._amBtn.innerText = 'AM';
+            this._amBtn.tabIndex = 0;
             this._amBtn.addEventListener('click', this._handleAmPmClick);
+            this._amBtn.addEventListener('keypress', this._handleAmPmKeypress);
             this.spanAmPm.appendChild(this._amBtn);
             // PM Button
             this._pmBtn = document.createElement('div');
             this._pmBtn.classList.add('pm-btn', 'btn');
             this._pmBtn.innerText = 'PM';
+            this._pmBtn.tabIndex = 0;
             this._pmBtn.addEventListener('click', this._handleAmPmClick);
+            this._pmBtn.addEventListener('keypress', this._handleAmPmKeypress);
             this.spanAmPm.appendChild(this._pmBtn);
         }
         this._buildHoursView();
@@ -6402,8 +6705,15 @@ class Timepicker extends Component {
         }
     }
     _handleAmPmClick = (e) => {
-        const btnClicked = e.target;
-        this.amOrPm = btnClicked.classList.contains('am-btn') ? 'AM' : 'PM';
+        this._handleAmPmInteraction(e.target);
+    };
+    _handleAmPmKeypress = (e) => {
+        if (Utils.keys.ENTER.includes(e.key)) {
+            this._handleAmPmInteraction(e.target);
+        }
+    };
+    _handleAmPmInteraction = (e) => {
+        this.amOrPm = e.classList.contains('am-btn') ? 'AM' : 'PM';
         this._updateAmPmView();
     };
     _updateAmPmView() {
@@ -6452,14 +6762,13 @@ class Timepicker extends Component {
         if (view === 'minutes' && getComputedStyle(this.hoursView).visibility === 'visible') ;
         const isHours = view === 'hours', nextView = isHours ? this.hoursView : this.minutesView, hideView = isHours ? this.minutesView : this.hoursView;
         this.currentView = view;
-        if (isHours) {
-            this.inputHours.classList.add('text-primary');
-            this.inputMinutes.classList.remove('text-primary');
-        }
-        else {
-            this.inputHours.classList.remove('text-primary');
-            this.inputMinutes.classList.add('text-primary');
-        }
+        /*if (isHours) {
+          this.inputHours.classList.add('text-primary');
+          this.inputMinutes.classList.remove('text-primary');
+        } else {
+          this.inputHours.classList.remove('text-primary');
+          this.inputMinutes.classList.add('text-primary');
+        }*/
         // Transition view
         hideView.classList.add('timepicker-dial-out');
         nextView.style.visibility = 'visible';
@@ -6608,8 +6917,7 @@ class Timepicker extends Component {
         this.hours = new Date().getHours();
         this.inputHours.value = (this.hours % (this.options.twelveHour ? 12 : 24)).toString();
     }
-    // todo: remove e
-    done = (e = null, clearValue = null) => {
+    done = (clearValue = null) => {
         // Set input value
         const last = this.el.value;
         let value = clearValue
@@ -6624,16 +6932,23 @@ class Timepicker extends Component {
         if (value !== last) {
             this.el.dispatchEvent(new Event('change', { bubbles: true, cancelable: true, composed: true }));
         }
-        //this.el.focus();
-        return e; // just for passing linter, can be removed
+    };
+    confirm = () => {
+        this.done();
+        if (typeof this.options.onDone === 'function')
+            this.options.onDone.call(this);
+    };
+    cancel = () => {
+        // not logical clearing the input field on cancel, since the end user might want to make use of the previously submitted value
+        // this.clear();
+        if (typeof this.options.onCancel === 'function')
+            this.options.onCancel.call(this);
     };
     clear = () => {
-        this.done(null, true);
+        this.done(true);
     };
     // deprecated
     open() {
-        // this._updateTimeFromInput();
-        // this.showView('hours');
         console.warn('Timepicker.close() is deprecated. Remove this method and wrap in modal yourself.');
         return this;
     }
@@ -6642,14 +6957,12 @@ class Timepicker extends Component {
         return this;
     }
     static {
-        Timepicker._template = `
-      <div class="modal timepicker-modal">
-        <div class="modal-content timepicker-container">
+        Timepicker._template = `<div class="timepicker-container">
           <div class="timepicker-digital-display">
             <div class="timepicker-text-container">
-              <div class="timepicker-display-column">
+              <div class="timepicker-display-column timepicker-display-digital-clock">
                 <div class="timepicker-input-hours-wrapper">
-                  <input type="text" maxlength="2" autofocus class="timepicker-input-hours text-primary" />
+                  <input type="text" maxlength="2" class="timepicker-input-hours text-primary" />
                 </div>
                 <div class="timepicker-input-divider-wrapper">
                   <span class="timepicker-input-divider">:</span>
@@ -6671,8 +6984,7 @@ class Timepicker extends Component {
             </div>
             <div class="timepicker-footer"></div>
           </div>
-        </div>
-      </div>`;
+        </div>`;
     }
 }
 
@@ -7835,7 +8147,7 @@ class Toast {
 }
 
 /* eslint-disable @typescript-eslint/no-unused-vars */
-const version = '2.2.1';
+const version = '2.2.2';
 /**
  * Automatically initialize components.
  * @param context Root element to initialize. Defaults to `document.body`.
@@ -7894,5 +8206,6 @@ Forms.Init();
 Chips.Init();
 Waves.Init();
 Range.Init();
+Cards.Init();
 
 export { AutoInit, Autocomplete, Cards, Carousel, CharacterCounter, Chips, Collapsible, Datepicker, Dropdown, FloatingActionButton, FormSelect, Forms, Materialbox, Modal, Parallax, Pushpin, Range, ScrollSpy, Sidenav, Slider, Tabs, TapTarget, Timepicker, Toast, Tooltip, Waves, version };