kmaterialize 2.3.3-1.0.21 → 2.3.3-1.0.23

package/components/textfield/forms.js

@@ -0,0 +1,172 @@
+import { Utils } from '../../src/utils';
+export class Forms {
+    /**
+     * Checks if the label has validation and apply
+     * the correct class and styles
+     * @param textfield
+     */
+    static validateField(textfield) {
+        if (!textfield) {
+            console.error('No text field element found');
+            return;
+        }
+        const hasLength = textfield.getAttribute('data-length') !== null;
+        const lenAttr = parseInt(textfield.getAttribute('data-length'));
+        const len = textfield.value.length;
+        if (len === 0 &&
+            textfield.validity.badInput === false &&
+            !textfield.required &&
+            textfield.classList.contains('validate')) {
+            textfield.classList.remove('invalid');
+        }
+        else if (textfield.classList.contains('validate')) {
+            // Check for character counter attributes
+            if ((textfield.validity.valid && hasLength && len <= lenAttr) ||
+                (textfield.validity.valid && !hasLength)) {
+                textfield.classList.remove('invalid');
+            }
+            else {
+                textfield.classList.add('invalid');
+            }
+        }
+    }
+    /**
+     * Resizes the given TextArea after updating the
+     *  value content dynamically.
+     * @param e EventTarget
+     */
+    static textareaAutoResize(e) {
+        const textarea = e;
+        // if (!textarea) {
+        //   console.error('No textarea element found');
+        //   return;
+        // }
+        // Textarea Auto Resize
+        let hiddenDiv = document.querySelector('.hiddendiv');
+        if (!hiddenDiv) {
+            hiddenDiv = document.createElement('div');
+            hiddenDiv.classList.add('hiddendiv', 'common');
+            document.body.append(hiddenDiv);
+        }
+        const style = getComputedStyle(textarea);
+        // Set font properties of hiddenDiv
+        const fontFamily = style.fontFamily; //textarea.css('font-family');
+        const fontSize = style.fontSize; //textarea.css('font-size');
+        const lineHeight = style.lineHeight; //textarea.css('line-height');
+        // Firefox can't handle padding shorthand.
+        const paddingTop = style.paddingTop; //getComputedStyle(textarea).css('padding-top');
+        const paddingRight = style.paddingRight; //textarea.css('padding-right');
+        const paddingBottom = style.paddingBottom; //textarea.css('padding-bottom');
+        const paddingLeft = style.paddingLeft; //textarea.css('padding-left');
+        if (fontSize)
+            hiddenDiv.style.fontSize = fontSize; //('font-size', fontSize);
+        if (fontFamily)
+            hiddenDiv.style.fontFamily = fontFamily; //css('font-family', fontFamily);
+        if (lineHeight)
+            hiddenDiv.style.lineHeight = lineHeight; //css('line-height', lineHeight);
+        if (paddingTop)
+            hiddenDiv.style.paddingTop = paddingTop; //ss('padding-top', paddingTop);
+        if (paddingRight)
+            hiddenDiv.style.paddingRight = paddingRight; //css('padding-right', paddingRight);
+        if (paddingBottom)
+            hiddenDiv.style.paddingBottom = paddingBottom; //css('padding-bottom', paddingBottom);
+        if (paddingLeft)
+            hiddenDiv.style.paddingLeft = paddingLeft; //css('padding-left', paddingLeft);
+        // Set original-height, if none
+        if (!textarea.hasAttribute('original-height'))
+            textarea.setAttribute('original-height', textarea.getBoundingClientRect().height.toString());
+        if (textarea.getAttribute('wrap') === 'off') {
+            hiddenDiv.style.overflowWrap = 'normal'; // ('overflow-wrap', 'normal')
+            hiddenDiv.style.whiteSpace = 'pre'; //.css('white-space', 'pre');
+        }
+        hiddenDiv.innerText = textarea.value + '\n';
+        hiddenDiv.innerHTML = hiddenDiv.innerHTML.replace(/\n/g, '<br>');
+        // When textarea is hidden, width goes crazy.
+        // Approximate with half of window size
+        if (textarea.offsetWidth > 0 && textarea.offsetHeight > 0) {
+            hiddenDiv.style.width = textarea.getBoundingClientRect().width + 'px'; // ('width', textarea.width() + 'px');
+        }
+        else {
+            hiddenDiv.style.width = window.innerWidth / 2 + 'px'; //css('width', window.innerWidth / 2 + 'px');
+        }
+        // Resize if the new height is greater than the
+        // original height of the textarea
+        const originalHeight = parseInt(textarea.getAttribute('original-height'));
+        const prevLength = parseInt(textarea.getAttribute('previous-length'));
+        if (isNaN(originalHeight))
+            return;
+        if (originalHeight <= hiddenDiv.clientHeight) {
+            textarea.style.height = hiddenDiv.clientHeight + 'px'; //css('height', hiddenDiv.innerHeight() + 'px');
+        }
+        else if (textarea.value.length < prevLength) {
+            // In case the new height is less than original height, it
+            // means the textarea has less text than before
+            // So we set the height to the original one
+            textarea.style.height = originalHeight + 'px';
+        }
+        textarea.setAttribute('previous-length', (textarea.value || '').length.toString());
+    }
+    static Init() {
+        if (typeof document !== 'undefined')
+            document?.addEventListener('DOMContentLoaded', () => {
+                document.addEventListener('change', (e) => {
+                    const target = e.target;
+                    if (target instanceof HTMLInputElement) {
+                        if (target.value.length !== 0 || target.getAttribute('placeholder') !== null) {
+                            for (const child of target.parentNode.children) {
+                                if (child.tagName == 'label') {
+                                    child.classList.add('active');
+                                }
+                            }
+                        }
+                        Forms.validateField(target);
+                    }
+                });
+                document.addEventListener('keyup', (e) => {
+                    const target = e.target;
+                    // Radio and Checkbox focus class
+                    if (target instanceof HTMLInputElement && ['radio', 'checkbox'].includes(target.type)) {
+                        // TAB, check if tabbing to radio or checkbox.
+                        if (Utils.keys.TAB.includes(e.key)) {
+                            target.classList.add('tabbed');
+                            target.addEventListener('blur', () => target.classList.remove('tabbed'), {
+                                once: true
+                            });
+                        }
+                    }
+                });
+                document
+                    .querySelectorAll('.materialize-textarea')
+                    .forEach((textArea) => {
+                    Forms.InitTextarea(textArea);
+                });
+                // File Input Path
+                document
+                    .querySelectorAll('.file-field input[type="file"]')
+                    .forEach((fileInput) => {
+                    Forms.InitFileInputPath(fileInput);
+                });
+            });
+    }
+    static InitTextarea(textarea) {
+        // Save Data in Element
+        textarea.setAttribute('original-height', textarea.getBoundingClientRect().height.toString());
+        textarea.setAttribute('previous-length', (textarea.value || '').length.toString());
+        Forms.textareaAutoResize(textarea);
+        textarea.addEventListener('keyup', (e) => Forms.textareaAutoResize(e.target));
+        textarea.addEventListener('keydown', (e) => Forms.textareaAutoResize(e.target));
+    }
+    static InitFileInputPath(fileInput) {
+        fileInput.addEventListener('change', () => {
+            const fileField = fileInput.closest('.file-field');
+            const pathInput = fileField.querySelector('input.file-path');
+            const files = fileInput.files;
+            const filenames = [];
+            for (let i = 0; i < files.length; i++) {
+                filenames.push(files[i].name);
+            }
+            pathInput.value = filenames.join(', ');
+            pathInput.dispatchEvent(new Event('change', { bubbles: true, cancelable: true, composed: true }));
+        });
+    }
+}

package/components/textfield/select.js

@@ -0,0 +1,385 @@
+import { Utils } from '../../src/utils';
+import { Dropdown } from '../dropdown/dropdown';
+import { Component } from '../../src/component';
+const _defaults = {
+    classes: '',
+    dropdownOptions: {}
+};
+export class FormSelect extends Component {
+    /** If this is a multiple select. */
+    isMultiple;
+    /**
+     * Label associated with the current select element.
+     * Is "null", if not detected.
+     */
+    labelEl;
+    /** Dropdown UL element. */
+    dropdownOptions;
+    /** Text input that shows current selected option. */
+    input;
+    /** Instance of the dropdown plugin for this select. */
+    dropdown;
+    /** The select wrapper element. */
+    wrapper;
+    selectOptions;
+    _values;
+    nativeTabIndex;
+    constructor(el, options) {
+        super(el, options, FormSelect);
+        if (this.el.classList.contains('browser-default'))
+            return;
+        this.el['M_FormSelect'] = this;
+        this.options = {
+            ...FormSelect.defaults,
+            ...options
+        };
+        this.isMultiple = this.el.multiple;
+        this.nativeTabIndex = this.el.tabIndex ?? -1;
+        this.el.tabIndex = -1;
+        this._values = [];
+        this._setupDropdown();
+        this._setupEventHandlers();
+    }
+    static get defaults() {
+        return _defaults;
+    }
+    /**
+     * Initializes instances of FormSelect.
+     * @param els HTML elements.
+     * @param options Component options.
+     */
+    static init(els, options = {}) {
+        return super.init(els, options, FormSelect);
+    }
+    static getInstance(el) {
+        return el['M_FormSelect'];
+    }
+    destroy() {
+        this._removeEventHandlers();
+        this._removeDropdown();
+        this.el['M_FormSelect'] = undefined;
+    }
+    _setupEventHandlers() {
+        this.dropdownOptions.querySelectorAll('li:not(.optgroup)').forEach((el) => {
+            el.addEventListener('click', this._handleOptionClick);
+            el.addEventListener('keydown', (e) => {
+                if (e.key === ' ' || e.key === 'Enter')
+                    this._handleOptionClick(e);
+            });
+        });
+        this.el.addEventListener('change', this._handleSelectChange);
+        this.input.addEventListener('click', this._handleInputClick);
+    }
+    _removeEventHandlers() {
+        this.dropdownOptions.querySelectorAll('li:not(.optgroup)').forEach((el) => {
+            el.removeEventListener('click', this._handleOptionClick);
+        });
+        this.el.removeEventListener('change', this._handleSelectChange);
+        this.input.removeEventListener('click', this._handleInputClick);
+    }
+    _handleSelectChange = () => {
+        this._setValueToInput();
+    };
+    _handleOptionClick = (e) => {
+        e.preventDefault();
+        const virtualOption = e.target.closest('li');
+        this._selectOptionElement(virtualOption);
+        e.stopPropagation();
+    };
+    _arraysEqual(a, b) {
+        if (a === b)
+            return true;
+        if (a == null || b == null)
+            return false;
+        if (a.length !== b.length)
+            return false;
+        for (let i = 0; i < a.length; ++i)
+            if (a[i] !== b[i])
+                return false;
+        return true;
+    }
+    _selectOptionElement(virtualOption) {
+        if (!virtualOption.classList.contains('disabled') &&
+            !virtualOption.classList.contains('optgroup')) {
+            const value = this._values.find((value) => value.optionEl === virtualOption);
+            const previousSelectedValues = this.getSelectedValues();
+            if (this.isMultiple) {
+                // Multi-Select
+                this._toggleEntryFromArray(value);
+            }
+            else {
+                // Single-Select
+                this._deselectAll();
+                this._selectValue(value);
+            }
+            // Refresh Input-Text
+            this._setValueToInput();
+            // Trigger Change-Event only when data is different
+            const actualSelectedValues = this.getSelectedValues();
+            const selectionHasChanged = !this._arraysEqual(previousSelectedValues, actualSelectedValues);
+            if (selectionHasChanged)
+                this.el.dispatchEvent(new Event('change', { bubbles: true, cancelable: true, composed: true })); // trigger('change');
+        }
+        if (!this.isMultiple)
+            this.dropdown.close();
+    }
+    _handleInputClick = () => {
+        if (this.dropdown && this.dropdown.isOpen) {
+            this._setValueToInput();
+            this._setSelectedStates();
+        }
+    };
+    _setupDropdown() {
+        this.labelEl = document.querySelector('[for="' + this.el.id + '"]');
+        this.wrapper = document.createElement('div');
+        this.wrapper.classList.add('select-wrapper', 'input-field');
+        if (this.options.classes.length > 0) {
+            this.wrapper.classList.add(...this.options.classes.split(' '));
+        }
+        this.el.before(this.wrapper);
+        // Move actual select element into overflow hidden wrapper
+        const hiddenDiv = document.createElement('div');
+        hiddenDiv.classList.add('hide-select');
+        this.wrapper.append(hiddenDiv);
+        hiddenDiv.appendChild(this.el);
+        if (this.el.disabled)
+            this.wrapper.classList.add('disabled');
+        this.selectOptions = (Array.from(this.el.children).filter((el) => ['OPTION', 'OPTGROUP'].includes(el.tagName)));
+        // Create dropdown
+        this.dropdownOptions = document.createElement('ul');
+        this.dropdownOptions.id = `select-options-${Utils.guid()}`;
+        this.dropdownOptions.setAttribute('popover', 'auto');
+        this.dropdownOptions.classList.add('dropdown-content', 'select-dropdown');
+        this.dropdownOptions.setAttribute('role', 'listbox');
+        this.dropdownOptions.ariaMultiSelectable = this.isMultiple.toString();
+        if (this.isMultiple)
+            this.dropdownOptions.classList.add('multiple-select-dropdown');
+        // Create dropdown structure
+        if (this.selectOptions.length > 0) {
+            this.selectOptions.forEach((realOption) => {
+                if (realOption.tagName === 'OPTION') {
+                    // Option
+                    const virtualOption = this._createAndAppendOptionWithIcon(realOption, this.isMultiple ? 'multiple' : undefined);
+                    this._addOptionToValues(realOption, virtualOption);
+                }
+                else if (realOption.tagName === 'OPTGROUP') {
+                    // Optgroup
+                    const groupId = 'opt-group-' + Utils.guid();
+                    const groupParent = document.createElement('li');
+                    groupParent.classList.add('optgroup');
+                    groupParent.tabIndex = -1;
+                    groupParent.setAttribute('role', 'group');
+                    groupParent.setAttribute('aria-labelledby', groupId);
+                    groupParent.innerHTML = `<span id="${groupId}" role="presentation">${realOption.getAttribute('label')}</span>`;
+                    this.dropdownOptions.append(groupParent);
+                    const groupChildren = [];
+                    const selectOptions = (Array.from(realOption.children).filter((el) => el.tagName === 'OPTION'));
+                    selectOptions.forEach((realOption) => {
+                        const virtualOption = this._createAndAppendOptionWithIcon(realOption, 'optgroup-option');
+                        const childId = 'opt-child-' + Utils.guid();
+                        virtualOption.id = childId;
+                        groupChildren.push(childId);
+                        this._addOptionToValues(realOption, virtualOption);
+                    });
+                    groupParent.setAttribute('aria-owns', groupChildren.join(' '));
+                }
+            });
+        }
+        this.wrapper.append(this.dropdownOptions);
+        // Add input dropdown
+        this.input = document.createElement('input');
+        this.input.id = 'm_select-input-' + Utils.guid();
+        this.input.classList.add('select-dropdown', 'dropdown-trigger');
+        this.input.type = 'text';
+        this.input.readOnly = true;
+        this.input.setAttribute('data-target', this.dropdownOptions.id);
+        this.input.ariaReadOnly = 'true';
+        this.input.ariaRequired = this.el.hasAttribute('required').toString(); //setAttribute("aria-required", this.el.hasAttribute("required"));
+        if (this.el.disabled)
+            this.input.disabled = true; // 'true');
+        this.input.setAttribute('tabindex', this.nativeTabIndex.toString());
+        const attrs = this.el.attributes;
+        for (let i = 0; i < attrs.length; ++i) {
+            const attr = attrs[i];
+            if (attr.name.startsWith('aria-'))
+                this.input.setAttribute(attr.name, attr.value);
+        }
+        // Adds aria-attributes to input element
+        this.input.setAttribute('role', 'combobox');
+        this.input.ariaExpanded = 'false';
+        this.input.setAttribute('aria-owns', this.dropdownOptions.id);
+        this.input.setAttribute('aria-controls', this.dropdownOptions.id);
+        this.input.placeholder = ' ';
+        this.wrapper.prepend(this.input);
+        this._setValueToInput();
+        // Add caret
+        const dropdownIcon = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); //document.createElement('svg')
+        dropdownIcon.classList.add('caret');
+        dropdownIcon.setAttribute('height', '24');
+        dropdownIcon.setAttribute('width', '24');
+        dropdownIcon.setAttribute('viewBox', '0 0 24 24');
+        dropdownIcon.ariaHidden = 'true';
+        dropdownIcon.innerHTML = `<path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/>`;
+        this.wrapper.prepend(dropdownIcon);
+        // Initialize dropdown
+        if (!this.el.disabled) {
+            const dropdownOptions = { ...this.options.dropdownOptions };
+            dropdownOptions.coverTrigger = false;
+            const userOnOpenEnd = dropdownOptions.onOpenEnd;
+            const userOnCloseEnd = dropdownOptions.onCloseEnd;
+            // Add callback for centering selected option when dropdown content is scrollable
+            dropdownOptions.onOpenEnd = () => {
+                const selectedOption = this.dropdownOptions.querySelector('.selected');
+                if (selectedOption) {
+                    // Focus selected option in dropdown
+                    Utils.keyDown = true;
+                    this.dropdown.focusedIndex = [...selectedOption.parentNode.children].indexOf(selectedOption);
+                    this.dropdown._focusFocusedItem();
+                    Utils.keyDown = false;
+                    // Handle scrolling to selected option
+                    if (this.dropdown.isScrollable) {
+                        let scrollOffset = selectedOption.getBoundingClientRect().top -
+                            this.dropdownOptions.getBoundingClientRect().top; // scroll to selected option
+                        scrollOffset -= this.dropdownOptions.clientHeight / 2; // center in dropdown
+                        this.dropdownOptions.scrollTop = scrollOffset;
+                    }
+                }
+                this.input.ariaExpanded = 'true';
+                // Handle user declared onOpenEnd if needed
+                if (userOnOpenEnd && typeof userOnOpenEnd === 'function')
+                    userOnOpenEnd.call(this.dropdown, this.el);
+            };
+            // Add callback for reseting "expanded" state
+            dropdownOptions.onCloseEnd = () => {
+                this.input.ariaExpanded = 'false';
+                // Handle user declared onOpenEnd if needed
+                if (userOnCloseEnd && typeof userOnCloseEnd === 'function')
+                    userOnCloseEnd.call(this.dropdown, this.el);
+            };
+            // Prevent dropdown from closing too early
+            dropdownOptions.closeOnClick = false;
+            this.dropdown = Dropdown.init(this.input, dropdownOptions);
+        }
+        // Add initial selections
+        this._setSelectedStates();
+        // move label
+        if (this.labelEl)
+            this.input.after(this.labelEl);
+    }
+    _addOptionToValues(realOption, virtualOption) {
+        this._values.push({ el: realOption, optionEl: virtualOption });
+    }
+    _removeDropdown() {
+        this.wrapper.querySelector('.caret').remove();
+        this.input.remove();
+        this.dropdownOptions.remove();
+        this.wrapper.before(this.el);
+        this.wrapper.remove();
+    }
+    _createAndAppendOptionWithIcon(realOption, type) {
+        const li = document.createElement('li');
+        li.setAttribute('role', 'option');
+        if (realOption.disabled) {
+            li.classList.add('disabled');
+            li.ariaDisabled = 'true';
+        }
+        if (type === 'optgroup-option')
+            li.classList.add(type);
+        // Text / Checkbox
+        const span = document.createElement('span');
+        span.innerHTML = realOption.innerHTML;
+        if (this.isMultiple && !realOption.disabled) {
+            span.innerHTML = `<label><input type="checkbox"><span>${realOption.innerHTML}</span></label>`;
+        }
+        li.appendChild(span);
+        // add Icon
+        const iconUrl = realOption.getAttribute('data-icon');
+        const classes = realOption.getAttribute('class')?.split(' ');
+        if (iconUrl) {
+            const img = document.createElement('img');
+            if (classes)
+                img.classList.add(...classes);
+            img.src = iconUrl;
+            img.ariaHidden = 'true';
+            li.prepend(img);
+        }
+        // Check for multiple type
+        this.dropdownOptions.append(li);
+        return li;
+    }
+    _selectValue(value) {
+        value.el.selected = true;
+        value.optionEl.classList.add('selected');
+        value.optionEl.ariaSelected = 'true'; // setAttribute("aria-selected", true);
+        const checkbox = value.optionEl.querySelector('input[type="checkbox"]');
+        if (checkbox)
+            checkbox.checked = true;
+    }
+    _deselectValue(value) {
+        value.el.selected = false;
+        value.optionEl.classList.remove('selected');
+        value.optionEl.ariaSelected = 'false'; //setAttribute("aria-selected", false);
+        const checkbox = value.optionEl.querySelector('input[type="checkbox"]');
+        if (checkbox)
+            checkbox.checked = false;
+    }
+    _deselectAll() {
+        this._values.forEach((value) => this._deselectValue(value));
+    }
+    _isValueSelected(value) {
+        const realValues = this.getSelectedValues();
+        return realValues.some((realValue) => realValue === value.el.value);
+    }
+    _toggleEntryFromArray(value) {
+        if (this._isValueSelected(value))
+            this._deselectValue(value);
+        else
+            this._selectValue(value);
+    }
+    _getSelectedOptions() {
+        // remove null, false, ... values
+        return Array.prototype.filter.call(this.el.selectedOptions, (realOption) => realOption);
+    }
+    _setValueToInput() {
+        const selectedRealOptions = this._getSelectedOptions();
+        const selectedOptionPairs = this._values.filter((value) => selectedRealOptions.indexOf(value.el) >= 0);
+        // Filter not disabled
+        const notDisabledOptionPairs = selectedOptionPairs.filter((op) => !op.el.disabled);
+        const texts = notDisabledOptionPairs.map((value) => value.optionEl.querySelector('span').innerText.trim());
+        // Set input-text to first Option with empty value which indicates a description like "choose your option"
+        if (texts.length === 0) {
+            const firstDisabledOption = this.el.querySelector('option:disabled');
+            if (firstDisabledOption && firstDisabledOption.value === '') {
+                this.input.value = firstDisabledOption.innerText;
+                return;
+            }
+        }
+        this.input.value = texts.join(', ');
+    }
+    _setSelectedStates() {
+        this._values.forEach((value) => {
+            const optionIsSelected = value.el.selected;
+            const cb = value.optionEl.querySelector('input[type="checkbox"]');
+            if (cb)
+                cb.checked = optionIsSelected;
+            if (optionIsSelected) {
+                this._activateOption(this.dropdownOptions, value.optionEl);
+            }
+            else {
+                value.optionEl.classList.remove('selected');
+                value.optionEl.ariaSelected = 'false'; // attr("aria-selected", 'false');
+            }
+        });
+    }
+    _activateOption(ul, li) {
+        if (!li)
+            return;
+        if (!this.isMultiple)
+            ul.querySelectorAll('li.selected').forEach((li) => li.classList.remove('selected'));
+        li.classList.add('selected');
+        li.ariaSelected = 'true';
+    }
+    getSelectedValues() {
+        return this._getSelectedOptions().map((realOption) => realOption.value);
+    }
+}