kmaterialize 2.3.3-1.0.21 → 2.3.3-1.0.23

package/components/carousel/slider.js

@@ -0,0 +1,340 @@
+import { Utils } from '../../src/utils';
+import { Component } from '../../src/component';
+const _defaults = {
+    indicators: true,
+    height: 400,
+    duration: 500,
+    interval: 6000,
+    pauseOnFocus: true,
+    pauseOnHover: true,
+    indicatorLabelFunc: null // Function which will generate a label for the indicators (ARIA)
+};
+export class Slider extends Component {
+    /** Index of current slide. */
+    activeIndex;
+    interval;
+    eventPause;
+    _slider;
+    _slides;
+    _activeSlide;
+    _indicators;
+    _hovered;
+    _focused;
+    _focusCurrent;
+    _sliderId;
+    constructor(el, options) {
+        super(el, options, Slider);
+        this.el['M_Slider'] = this;
+        this.options = {
+            ...Slider.defaults,
+            ...options
+        };
+        // init props
+        this.interval = null;
+        this.eventPause = false;
+        this._hovered = false;
+        this._focused = false;
+        this._focusCurrent = false;
+        // setup
+        this._slider = this.el.querySelector('.slides');
+        this._slides = Array.from(this._slider.querySelectorAll('li'));
+        this.activeIndex = this._slides.findIndex((li) => li.classList.contains('active'));
+        if (this.activeIndex !== -1) {
+            this._activeSlide = this._slides[this.activeIndex];
+        }
+        this._setSliderHeight();
+        // Sets element id if it does not have one
+        if (this._slider.hasAttribute('id'))
+            this._sliderId = this._slider.getAttribute('id');
+        else {
+            this._sliderId = 'slider-' + Utils.guid();
+            this._slider.setAttribute('id', this._sliderId);
+        }
+        const placeholderBase64 = 'data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
+        // Set initial positions of captions
+        this._slides.forEach((slide) => {
+            // Caption
+            //const caption = <HTMLElement|null>slide.querySelector('.caption');
+            //if (caption) this._animateCaptionIn(caption, 0);
+            // Set Images as Background Images
+            const img = slide.querySelector('img');
+            if (img) {
+                if (img.src !== placeholderBase64) {
+                    img.style.backgroundImage = 'url(' + img.src + ')';
+                    img.src = placeholderBase64;
+                }
+            }
+            // Sets slide as focusable by code
+            if (!slide.hasAttribute('tabindex'))
+                slide.setAttribute('tabindex', '-1');
+            // Removes initial visibility from "inactive" slides
+            slide.style.visibility = 'hidden';
+        });
+        this._setupIndicators();
+        // Show active slide
+        if (this._activeSlide) {
+            this._activeSlide.style.display = 'block';
+            this._activeSlide.style.visibility = 'visible';
+        }
+        else {
+            this.activeIndex = 0;
+            this._slides[0].classList.add('active');
+            this._slides[0].style.visibility = 'visible';
+            this._activeSlide = this._slides[0];
+            this._animateSlide(this._slides[0], true);
+            // Update indicators
+            if (this.options.indicators) {
+                this._indicators[this.activeIndex].children[0].classList.add('active');
+            }
+        }
+        this._setupEventHandlers();
+        // auto scroll
+        this.start();
+    }
+    static get defaults() {
+        return _defaults;
+    }
+    /**
+     * Initializes instances of Slider.
+     * @param els HTML elements.
+     * @param options Component options.
+     */
+    static init(els, options = {}) {
+        return super.init(els, options, Slider);
+    }
+    static getInstance(el) {
+        return el['M_Slider'];
+    }
+    destroy() {
+        this.pause();
+        this._removeIndicators();
+        this._removeEventHandlers();
+        this.el['M_Slider'] = undefined;
+    }
+    _setupEventHandlers() {
+        if (this.options.pauseOnFocus) {
+            this.el.addEventListener('focusin', this._handleAutoPauseFocus);
+            this.el.addEventListener('focusout', this._handleAutoStartFocus);
+        }
+        if (this.options.pauseOnHover) {
+            this.el.addEventListener('mouseenter', this._handleAutoPauseHover);
+            this.el.addEventListener('mouseleave', this._handleAutoStartHover);
+        }
+        if (this.options.indicators) {
+            this._indicators.forEach((el) => {
+                el.addEventListener('click', this._handleIndicatorClick);
+            });
+        }
+    }
+    _removeEventHandlers() {
+        if (this.options.pauseOnFocus) {
+            this.el.removeEventListener('focusin', this._handleAutoPauseFocus);
+            this.el.removeEventListener('focusout', this._handleAutoStartFocus);
+        }
+        if (this.options.pauseOnHover) {
+            this.el.removeEventListener('mouseenter', this._handleAutoPauseHover);
+            this.el.removeEventListener('mouseleave', this._handleAutoStartHover);
+        }
+        if (this.options.indicators) {
+            this._indicators.forEach((el) => {
+                el.removeEventListener('click', this._handleIndicatorClick);
+            });
+        }
+    }
+    _handleIndicatorClick = (e) => {
+        const el = e.target.parentElement;
+        const currIndex = [...el.parentNode.children].indexOf(el);
+        this._focusCurrent = true;
+        this.set(currIndex);
+    };
+    _handleAutoPauseHover = () => {
+        this._hovered = true;
+        if (this.interval != null) {
+            this._pause(true);
+        }
+    };
+    _handleAutoPauseFocus = () => {
+        this._focused = true;
+        if (this.interval != null) {
+            this._pause(true);
+        }
+    };
+    _handleAutoStartHover = () => {
+        this._hovered = false;
+        if (!(this.options.pauseOnFocus && this._focused) && this.eventPause) {
+            this.start();
+        }
+    };
+    _handleAutoStartFocus = () => {
+        this._focused = false;
+        if (!(this.options.pauseOnHover && this._hovered) && this.eventPause) {
+            this.start();
+        }
+    };
+    _handleInterval = () => {
+        const activeElem = this._slider.querySelector('.active');
+        let newActiveIndex = [...activeElem.parentNode.children].indexOf(activeElem);
+        if (this._slides.length === newActiveIndex + 1)
+            newActiveIndex = 0; // loop to start
+        else
+            newActiveIndex += 1;
+        this.set(newActiveIndex);
+    };
+    _animateSlide(slide, isDirectionIn) {
+        let dx = 0, dy = 0;
+        // from
+        slide.style.opacity = isDirectionIn ? '0' : '1';
+        setTimeout(() => {
+            slide.style.transition = `opacity ${this.options.duration}ms ease`;
+            // to
+            slide.style.opacity = isDirectionIn ? '1' : '0';
+        }, 1);
+        // Caption
+        const caption = slide.querySelector('.caption');
+        if (!caption)
+            return;
+        if (caption.classList.contains('center-align'))
+            dy = -100;
+        else if (caption.classList.contains('right-align'))
+            dx = 100;
+        else if (caption.classList.contains('left-align'))
+            dx = -100;
+        // from
+        caption.style.opacity = isDirectionIn ? '0' : '1';
+        caption.style.transform = isDirectionIn ? `translate(${dx}px, ${dy}px)` : `translate(0, 0)`;
+        setTimeout(() => {
+            caption.style.transition = `opacity ${this.options.duration}ms ease, transform ${this.options.duration}ms ease`;
+            // to
+            caption.style.opacity = isDirectionIn ? '1' : '0';
+            caption.style.transform = isDirectionIn ? `translate(0, 0)` : `translate(${dx}px, ${dy}px)`;
+        }, this.options.duration); // delay
+    }
+    _setSliderHeight() {
+        // If fullscreen, do nothing
+        if (!this.el.classList.contains('fullscreen')) {
+            if (this.options.indicators) {
+                // Add height if indicators are present
+                this.el.style.height = this.options.height + 40 + 'px'; //.css('height', this.options.height + 40 + 'px');
+            }
+            else {
+                this.el.style.height = this.options.height + 'px';
+            }
+            this._slider.style.height = this.options.height + 'px';
+        }
+    }
+    _setupIndicators() {
+        if (this.options.indicators) {
+            const ul = document.createElement('ul');
+            ul.classList.add('indicators');
+            const arrLi = [];
+            this._slides.forEach((el, i) => {
+                const label = this.options.indicatorLabelFunc
+                    ? this.options.indicatorLabelFunc.call(this, i + 1, i === 0)
+                    : `${i + 1}`;
+                const li = document.createElement('li');
+                li.classList.add('indicator-item');
+                li.innerHTML = `<button type="button" class="indicator-item-btn" aria-label="${label}" aria-controls="${this._sliderId}"></button>`;
+                arrLi.push(li);
+                ul.append(li);
+            });
+            this.el.append(ul);
+            this._indicators = arrLi;
+        }
+    }
+    _removeIndicators() {
+        this.el.querySelector('ul.indicators').remove(); //find('ul.indicators').remove();
+    }
+    set(index) {
+        // Wrap around indices.
+        if (index >= this._slides.length)
+            index = 0;
+        else if (index < 0)
+            index = this._slides.length - 1;
+        // Only do if index changes
+        if (this.activeIndex === index)
+            return;
+        this._activeSlide = this._slides[this.activeIndex];
+        const _caption = this._activeSlide.querySelector('.caption');
+        this._activeSlide.classList.remove('active');
+        // Enables every slide
+        this._slides.forEach((slide) => (slide.style.visibility = 'visible'));
+        //--- Hide active Slide + Caption
+        this._activeSlide.style.opacity = '0';
+        setTimeout(() => {
+            this._slides.forEach((slide) => {
+                if (slide.classList.contains('active'))
+                    return;
+                slide.style.opacity = '0';
+                slide.style.transform = 'translate(0, 0)';
+                // Disables invisible slides (for assistive technologies)
+                slide.style.visibility = 'hidden';
+            });
+        }, this.options.duration);
+        // Hide active Caption
+        //this._animateCaptionIn(_caption, this.options.duration);
+        _caption.style.opacity = '0';
+        // Update indicators
+        if (this.options.indicators) {
+            const activeIndicator = this._indicators[this.activeIndex].children[0];
+            const nextIndicator = this._indicators[index].children[0];
+            activeIndicator.classList.remove('active');
+            nextIndicator.classList.add('active');
+            if (typeof this.options.indicatorLabelFunc === 'function') {
+                activeIndicator.ariaLabel = this.options.indicatorLabelFunc.call(this, this.activeIndex, false);
+                nextIndicator.ariaLabel = this.options.indicatorLabelFunc.call(this, index, true);
+            }
+        }
+        //--- Show new Slide + Caption
+        this._animateSlide(this._slides[index], true);
+        this._slides[index].classList.add('active');
+        this.activeIndex = index;
+        // Reset interval, if allowed. This check prevents autostart
+        // when slider is paused, since it can be changed though indicators.
+        if (this.interval != null) {
+            this.start();
+        }
+    }
+    _pause(fromEvent) {
+        clearInterval(this.interval);
+        this.eventPause = fromEvent;
+        this.interval = null;
+    }
+    /**
+     * Pause slider autoslide.
+     */
+    pause = () => {
+        this._pause(false);
+    };
+    /**
+     * Start slider autoslide.
+     */
+    start = () => {
+        clearInterval(this.interval);
+        this.interval = setInterval(this._handleInterval, this.options.duration + this.options.interval);
+        this.eventPause = false;
+    };
+    /**
+     * Move to next slider.
+     */
+    next = () => {
+        let newIndex = this.activeIndex + 1;
+        // Wrap around indices.
+        if (newIndex >= this._slides.length)
+            newIndex = 0;
+        else if (newIndex < 0)
+            newIndex = this._slides.length - 1;
+        this.set(newIndex);
+    };
+    /**
+     * Move to prev slider.
+     */
+    prev = () => {
+        let newIndex = this.activeIndex - 1;
+        // Wrap around indices.
+        if (newIndex >= this._slides.length)
+            newIndex = 0;
+        else if (newIndex < 0)
+            newIndex = this._slides.length - 1;
+        this.set(newIndex);
+    };
+}

package/components/chip/chips.js

@@ -0,0 +1,341 @@
+var _a;
+import { Utils } from '../../src/utils';
+import { Autocomplete } from '../search/autocomplete';
+import { Component } from '../../src/component';
+const _defaults = {
+    data: [],
+    placeholder: '',
+    secondaryPlaceholder: '',
+    closeIconClass: 'material-icons',
+    autocompleteOptions: {},
+    autocompleteOnly: false,
+    limit: Infinity,
+    allowUserInput: false,
+    onChipAdd: null,
+    onChipSelect: null,
+    onChipDelete: null
+};
+function gGetIndex(el) {
+    return [...el.parentNode.children].indexOf(el);
+}
+class Chips extends Component {
+    /** Array of the current chips data. */
+    chipsData;
+    /** If the chips has autocomplete enabled. */
+    hasAutocomplete;
+    /** Autocomplete instance, if any. */
+    autocomplete;
+    #input;
+    #label;
+    #chips;
+    static #keydown;
+    #selectedChip;
+    constructor(el, options) {
+        super(el, options, _a);
+        this.el['M_Chips'] = this;
+        this.options = {
+            ..._a.defaults,
+            ...options
+        };
+        this.el.classList.add('chips');
+        this.chipsData = [];
+        this.#chips = [];
+        // Render initial chips
+        if (this.options.data.length) {
+            this.chipsData = this.options.data;
+            this.#renderChips();
+        }
+        // Render input element, setup event handlers
+        if (this.options.allowUserInput) {
+            this.#setupLabel();
+            this.el.classList.add('input-field');
+            this.#setupInput();
+            this.#setupEventHandlers();
+            // move input to end
+            this.el.append(this.#input);
+        }
+    }
+    static get defaults() {
+        return _defaults;
+    }
+    /**
+     * Initializes instances of Chips.
+     * @param els HTML elements.
+     * @param options Component options.
+     */
+    static init(els, options = {}) {
+        return super.init(els, options, _a);
+    }
+    static getInstance(el) {
+        return el['M_Chips'];
+    }
+    getData() {
+        return this.chipsData;
+    }
+    destroy() {
+        if (this.options.allowUserInput)
+            this.#removeEventHandlers();
+        this.#chips.forEach((c) => c.remove());
+        this.#chips = [];
+        this.el['M_Chips'] = undefined;
+    }
+    #setupEventHandlers() {
+        this.el.addEventListener('click', this.#handleChipClick);
+        // @todo why do we need this as document event listener, shouldn't we apply it to the element wrapper itself?
+        document.addEventListener('keydown', _a.#handleChipsKeydown);
+        document.addEventListener('keyup', _a.#handleChipsKeyup);
+        this.el.addEventListener('blur', _a.#handleChipsBlur, true);
+        this.#input.addEventListener('focus', this.#handleInputFocus);
+        this.#input.addEventListener('blur', this.#handleInputBlur);
+        this.#input.addEventListener('keydown', this.#handleInputKeydown);
+    }
+    #removeEventHandlers() {
+        this.el.removeEventListener('click', this.#handleChipClick);
+        document.removeEventListener('keydown', _a.#handleChipsKeydown);
+        document.removeEventListener('keyup', _a.#handleChipsKeyup);
+        this.el.removeEventListener('blur', _a.#handleChipsBlur, true);
+        this.#input.removeEventListener('focus', this.#handleInputFocus);
+        this.#input.removeEventListener('blur', this.#handleInputBlur);
+        this.#input.removeEventListener('keydown', this.#handleInputKeydown);
+    }
+    #handleChipClick = (e) => {
+        const _chip = e.target.closest('.chip');
+        const clickedClose = e.target.classList.contains('close');
+        if (_chip) {
+            const index = [..._chip.parentNode.children].indexOf(_chip);
+            if (clickedClose) {
+                this.deleteChip(index);
+                this.#input.focus();
+            }
+            else {
+                this.selectChip(index);
+            }
+            // Default handle click to focus on input
+        }
+        else {
+            this.#input.focus();
+        }
+    };
+    static #handleChipsKeydown(e) {
+        _a.#keydown = true;
+        const chips = e.target.closest('.chips');
+        const chipsKeydown = e.target && chips;
+        // Don't handle keydown inputs on input and textarea
+        const tag = e.target.tagName;
+        if (tag === 'INPUT' || tag === 'TEXTAREA' || !chipsKeydown)
+            return;
+        const currChips = chips['M_Chips'];
+        if (Utils.keys.BACKSPACE.includes(e.key) || Utils.keys.DELETE.includes(e.key)) {
+            e.preventDefault();
+            let selectIndex = currChips.chipsData.length;
+            if (currChips.#selectedChip) {
+                const index = gGetIndex(currChips.#selectedChip);
+                currChips.deleteChip(index);
+                currChips.#selectedChip = null;
+                // Make sure selectIndex doesn't go negative
+                selectIndex = Math.max(index - 1, 0);
+            }
+            if (currChips.chipsData.length)
+                currChips.selectChip(selectIndex);
+            else
+                currChips.#input.focus();
+        }
+        else if (Utils.keys.ARROW_LEFT.includes(e.key)) {
+            if (currChips.#selectedChip) {
+                const selectIndex = gGetIndex(currChips.#selectedChip) - 1;
+                if (selectIndex < 0)
+                    return;
+                currChips.selectChip(selectIndex);
+            }
+        }
+        else if (Utils.keys.ARROW_RIGHT.includes(e.key)) {
+            if (currChips.#selectedChip) {
+                const selectIndex = gGetIndex(currChips.#selectedChip) + 1;
+                if (selectIndex >= currChips.chipsData.length)
+                    currChips.#input.focus();
+                else
+                    currChips.selectChip(selectIndex);
+            }
+        }
+    }
+    static #handleChipsKeyup() {
+        _a.#keydown = false;
+    }
+    static #handleChipsBlur(e) {
+        if (!_a.#keydown && document.hidden) {
+            const chips = e.target.closest('.chips');
+            const currChips = chips['M_Chips'];
+            currChips.#selectedChip = null;
+        }
+    }
+    #handleInputFocus = () => {
+        this.el.classList.add('focus');
+    };
+    #handleInputBlur = () => {
+        this.el.classList.remove('focus');
+    };
+    #handleInputKeydown = (e) => {
+        _a.#keydown = true;
+        if (Utils.keys.ENTER.includes(e.key)) {
+            // Override enter if autocompleting.
+            if (this.hasAutocomplete && this.autocomplete && this.autocomplete.isOpen) {
+                return;
+            }
+            e.preventDefault();
+            if (!this.hasAutocomplete || (this.hasAutocomplete && !this.options.autocompleteOnly)) {
+                this.addChip({ id: this.#input.value });
+            }
+            this.#input.value = '';
+        }
+        else if ((Utils.keys.BACKSPACE.includes(e.key) || Utils.keys.ARROW_LEFT.includes(e.key)) &&
+            this.#input.value === '' &&
+            this.chipsData.length) {
+            e.preventDefault();
+            this.selectChip(this.chipsData.length - 1);
+        }
+    };
+    #renderChip(chip) {
+        if (!chip.id)
+            return;
+        const renderedChip = document.createElement('li');
+        renderedChip.classList.add('chip');
+        renderedChip.innerText = chip.text || chip.id;
+        // attach image if needed
+        if (chip.image) {
+            const img = document.createElement('img');
+            img.setAttribute('src', chip.image);
+            renderedChip.insertBefore(img, renderedChip.firstChild);
+        }
+        if (this.options.allowUserInput) {
+            const closeButton = document.createElement('button');
+            closeButton.classList.add(this.options.closeIconClass, 'close');
+            closeButton.innerText = 'close';
+            renderedChip.appendChild(closeButton);
+        }
+        return renderedChip;
+    }
+    #renderChips() {
+        this.#chips = []; //.remove();
+        for (let i = 0; i < this.chipsData.length; i++) {
+            const chipElem = this.#renderChip(this.chipsData[i]);
+            this.el.appendChild(chipElem);
+            this.#chips.push(chipElem);
+        }
+    }
+    #setupAutocomplete() {
+        this.options.autocompleteOptions.onAutocomplete = (items) => {
+            if (items.length > 0)
+                this.addChip({
+                    id: items[0].id,
+                    text: items[0].text,
+                    image: items[0].image
+                });
+            this.#input.value = '';
+            this.#input.focus();
+        };
+        this.autocomplete = Autocomplete.init(this.#input, this.options.autocompleteOptions);
+    }
+    #setupInput() {
+        this.#input = this.el.querySelector('input');
+        if (!this.#input) {
+            this.#input = document.createElement('input');
+            this.el.append(this.#input);
+        }
+        this.#input.classList.add('input');
+        this.hasAutocomplete = Object.keys(this.options.autocompleteOptions).length > 0;
+        // Setup autocomplete if needed
+        if (this.hasAutocomplete)
+            this.#setupAutocomplete();
+        this.#setPlaceholder();
+        // Set input id
+        if (!this.#input.getAttribute('id'))
+            this.#input.setAttribute('id', Utils.guid());
+    }
+    #setupLabel() {
+        this.#label = this.el.querySelector('label');
+        if (this.#label)
+            this.#label.setAttribute('for', this.#input.getAttribute('id'));
+    }
+    #setPlaceholder() {
+        if (this.chipsData !== undefined && !this.chipsData.length && this.options.placeholder) {
+            this.#input.placeholder = this.options.placeholder;
+        }
+        else if ((this.chipsData === undefined || !!this.chipsData.length) &&
+            this.options.secondaryPlaceholder) {
+            this.#input.placeholder = this.options.secondaryPlaceholder;
+        }
+    }
+    #isValidAndNotExist(chip) {
+        const isValid = !!chip.id;
+        const doesNotExist = !this.chipsData.some((item) => item.id == chip.id);
+        return isValid && doesNotExist;
+    }
+    /**
+     * Add chip to input.
+     * @param chip Chip data object
+     */
+    addChip(chip) {
+        if (!this.#isValidAndNotExist(chip) || this.chipsData.length >= this.options.limit)
+            return;
+        const renderedChip = this.#renderChip(chip);
+        this.#chips.push(renderedChip);
+        this.chipsData.push(chip);
+        //$(this._input).before(renderedChip);
+        this.#input.before(renderedChip);
+        this.#setPlaceholder();
+        // fire chipAdd callback
+        if (typeof this.options.onChipAdd === 'function') {
+            this.options.onChipAdd(this.el, renderedChip);
+        }
+    }
+    /**
+     * Delete nth chip.
+     * @param chipIndex  Index of chip
+     */
+    deleteChip(chipIndex) {
+        const chip = this.#chips[chipIndex];
+        this.#chips[chipIndex].remove();
+        this.#chips.splice(chipIndex, 1);
+        this.chipsData.splice(chipIndex, 1);
+        this.#setPlaceholder();
+        // fire chipDelete callback
+        if (typeof this.options.onChipDelete === 'function') {
+            this.options.onChipDelete(this.el, chip);
+        }
+    }
+    /**
+     * Select nth chip.
+     * @param chipIndex Index of chip
+     */
+    selectChip(chipIndex) {
+        const chip = this.#chips[chipIndex];
+        this.#selectedChip = chip;
+        chip.focus();
+        // fire chipSelect callback
+        if (typeof this.options.onChipSelect === 'function') {
+            this.options.onChipSelect(this.el, chip);
+        }
+    }
+    static Init() {
+        if (typeof document !== 'undefined')
+            // Handle removal of static chips.
+            document.addEventListener('DOMContentLoaded', () => {
+                const chips = document.querySelectorAll('.chips');
+                chips.forEach((el) => {
+                    // if (el && (el['M_Chips == undefined) return;
+                    el.addEventListener('click', (e) => {
+                        if (e.target.classList.contains('close')) {
+                            const chip = e.target.closest('.chip');
+                            if (chip)
+                                chip.remove();
+                        }
+                    });
+                });
+            });
+    }
+    static {
+        this.#keydown = false;
+    }
+}
+_a = Chips;
+export { Chips };