kmaterialize 2.3.3-1.0.22 → 2.3.3-1.0.24

package/components/air-datepicker/air-datepicker.js

@@ -0,0 +1,152 @@
+import { Component } from '../../src/component';
+import { loadPeer } from '../../src/peer-loader';
+const _defaults = {};
+let activeAirDatepickerField;
+// @implement /Users/kzarshenas/Sites/CrazyProject/CrazyPHP/src/Front/Library/Utility/Form/Date.ts
+// Enhances `<input type="text" data-type="date" data-date-picker="air-datepicker">`
+// with the air-datepicker calendar/range picker - deliberately separate from
+// kmaterialize's own native `components/datepicker/` (a different, already
+// existing class-based component); this one is opted into per-input via the
+// `data-date-picker` attribute so it never collides with `.datepicker`
+// elements. The `multiple` attribute switches the picker into range mode,
+// `data-date-format`/`data-date-lang` (only "fr-FR" ported so far) mirror
+// CrazyPHP's own dataset convention.
+//
+// air-datepicker is an optional peerDependency, loaded on demand via
+// peer-loader. Its own base stylesheet (air-datepicker/air-datepicker.css)
+// must be imported separately by the consumer - see the docs page.
+export class AirDatepickerField extends Component {
+    picker;
+    ready;
+    _triggers;
+    _handleOutsideClick = (e) => {
+        const calendarEl = document.querySelector('.air-datepicker');
+        const clickedTrigger = this._triggers.some(trigger => trigger.contains(e.target));
+        if (calendarEl instanceof HTMLElement &&
+            !calendarEl.contains(e.target) &&
+            !this.el.contains(e.target) &&
+            !clickedTrigger) {
+            this.picker?.hide();
+        }
+    };
+    constructor(el, options) {
+        super(el, options, AirDatepickerField);
+        this.el.M_AirDatepickerField = this;
+        this.options = {
+            ...AirDatepickerField.defaults,
+            ...options
+        };
+        const labels = Array.from(document.querySelectorAll('label')).filter(label => label.htmlFor === this.el.id);
+        const icons = Array.from(this.el.parentElement?.querySelectorAll('.prefix, .suffix') ?? []);
+        this._triggers = [...labels, ...icons];
+        this._triggers.forEach(trigger => trigger.addEventListener('click', this._handleTriggerClick));
+        this.ready = this._setup();
+    }
+    static get defaults() {
+        return _defaults;
+    }
+    static init(els, options = {}) {
+        return super.init(els, options, AirDatepickerField);
+    }
+    static getInstance(el) {
+        return el.M_AirDatepickerField;
+    }
+    destroy() {
+        document.removeEventListener('click', this._handleOutsideClick);
+        this._triggers.forEach(trigger => trigger.removeEventListener('click', this._handleTriggerClick));
+        this.picker?.destroy();
+        if (activeAirDatepickerField === this)
+            activeAirDatepickerField = undefined;
+        this.el.M_AirDatepickerField = undefined;
+    }
+    _handleTriggerClick = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        void this.ready.then(() => this.picker?.show());
+    };
+    async _setup() {
+        const AirDatepicker = await loadPeer({
+            specifier: 'air-datepicker',
+            globalName: 'AirDatepicker',
+            feature: 'Date input (air-datepicker) enhancement',
+            cdnHint: '<link rel="stylesheet" href="path/to/air-datepicker.css">\n' +
+                '    <script src="path/to/air-datepicker.js"></script>\n' +
+                '    (self-hosted - copy from node_modules/air-datepicker/, or a CDN of your choice)'
+        }, () => import('air-datepicker'));
+        const dataset = this.el.dataset;
+        const builtInLocale = dataset.dateLang === 'fr-FR'
+            ? (await import('air-datepicker/locale/fr')).default
+            : (await import('air-datepicker/locale/en')).default;
+        const pickerOptions = {
+            dateFormat: dataset.dateFormat || 'yyyy-MM-dd',
+            autoClose: dataset.dateAutoClose !== 'false',
+            locale: (this.options.locale ?? builtInLocale),
+            onShow: isAnimationComplete => {
+                if (isAnimationComplete)
+                    return;
+                if (activeAirDatepickerField && activeAirDatepickerField !== this) {
+                    activeAirDatepickerField.picker?.hide();
+                }
+                activeAirDatepickerField = this;
+            },
+            onHide: isAnimationComplete => {
+                if (isAnimationComplete && activeAirDatepickerField === this) {
+                    activeAirDatepickerField = undefined;
+                }
+            }
+        };
+        let multiple = false;
+        if (this.el.multiple || dataset.dateRange === 'true') {
+            pickerOptions.range = true;
+            pickerOptions.multipleDatesSeparator = ' - ';
+            multiple = true;
+        }
+        const initialValue = this.el.getAttribute('value')?.trim();
+        if (initialValue) {
+            pickerOptions.selectedDates = multiple
+                ? initialValue.split(' - ').map(value => value.trim())
+                : [initialValue];
+        }
+        if (dataset.dateTimepicker === 'true') {
+            pickerOptions.timepicker = true;
+            if (dataset.dateTimeFormat)
+                pickerOptions.timeFormat = dataset.dateTimeFormat;
+        }
+        const supportedViews = ['days', 'months', 'years'];
+        if (supportedViews.includes(dataset.dateView ?? '')) {
+            pickerOptions.view = dataset.dateView;
+        }
+        if (supportedViews.includes(dataset.dateMinView ?? '')) {
+            pickerOptions.minView = dataset.dateMinView;
+        }
+        if (dataset.dateMobile === 'true')
+            pickerOptions.isMobile = true;
+        if (dataset.datePosition) {
+            pickerOptions.position = dataset.datePosition;
+        }
+        if (dataset.dateButtons) {
+            const supportedButtons = ['today', 'clear'];
+            pickerOptions.buttons = dataset.dateButtons
+                .split(',')
+                .map(button => button.trim())
+                .filter(button => supportedButtons.includes(button));
+        }
+        if (this.el.hasAttribute('min') && this.el.getAttribute('min')) {
+            pickerOptions.minDate = new Date(this.el.getAttribute('min'));
+        }
+        if (this.el.hasAttribute('max') && this.el.getAttribute('max')) {
+            pickerOptions.maxDate = new Date(this.el.getAttribute('max'));
+        }
+        if (!this.el.required && !pickerOptions.buttons) {
+            pickerOptions.buttons = ['clear'];
+        }
+        pickerOptions.onSelect = ({ date }) => {
+            if (multiple && Array.isArray(date) && date.length === 1)
+                return;
+            this.el.dispatchEvent(new Event('input', { bubbles: true }));
+            this.el.dispatchEvent(new Event('change', { bubbles: true }));
+        };
+        this.picker = new AirDatepicker(this.el, pickerOptions);
+        document.addEventListener('click', this._handleOutsideClick);
+    }
+}

package/components/alert/alert.js

@@ -0,0 +1,54 @@
+import { Component } from '../../src/component';
+const _defaults = {
+    dismissible: true
+};
+/** A persistent, contextual feedback banner. */
+export class Alert extends Component {
+    _closeButton = null;
+    _onClose = () => this.dismiss();
+    constructor(el, options) {
+        super(el, options, Alert);
+        this.options = { ...Alert.defaults, ...options };
+        this.el['M_Alert'] = this;
+        this._bindCloseButton();
+    }
+    static get defaults() {
+        return _defaults;
+    }
+    static init(els, options = {}) {
+        return super.init(els, options, Alert);
+    }
+    static getInstance(el) {
+        return el['M_Alert'];
+    }
+    _bindCloseButton() {
+        this._closeButton = this.el.querySelector('.alert-close');
+        if (this.options.dismissible && this._closeButton) {
+            this._closeButton.addEventListener('click', this._onClose);
+        }
+    }
+    /** Hide and remove the alert from the document. */
+    dismiss() {
+        if (!this.el.isConnected)
+            return;
+        this.el.classList.add('alert-dismissing');
+        const remove = () => {
+            this.el.removeEventListener('transitionend', remove);
+            this.el.hidden = true;
+            this.options.onDismiss?.(this);
+        };
+        if (getComputedStyle(this.el).transitionDuration === '0s')
+            remove();
+        else
+            this.el.addEventListener('transitionend', remove, { once: true });
+    }
+    /** Show an alert that was previously dismissed. */
+    open() {
+        this.el.hidden = false;
+        this.el.classList.remove('alert-dismissing');
+    }
+    destroy() {
+        this._closeButton?.removeEventListener('click', this._onClose);
+        delete this.el['M_Alert'];
+    }
+}

package/components/button/buttons.js

@@ -0,0 +1,220 @@
+import { Component } from '../../src/component';
+import { Utils } from '../../src/utils';
+const _defaults = {
+    direction: 'top',
+    hoverEnabled: true,
+    toolbarEnabled: false
+};
+class FloatingActionButton extends Component {
+    #anchor;
+    #menu;
+    #floatingBtns;
+    #floatingBtnsReverse;
+    /**
+     * Describes open/close state of FAB.
+     */
+    isOpen;
+    offsetY;
+    offsetX;
+    btnBottom;
+    btnLeft;
+    btnWidth;
+    constructor(el, options) {
+        super(el, options, FloatingActionButton);
+        this.el['M_FloatingActionButton'] = this;
+        this.options = {
+            ...FloatingActionButton.defaults,
+            ...options
+        };
+        this.isOpen = false;
+        this.#anchor = this.el.querySelector('a');
+        this.#menu = this.el.querySelector('ul');
+        this.#floatingBtns = Array.from(this.el.querySelectorAll('ul .btn-floating'));
+        this.#floatingBtnsReverse = this.#floatingBtns.reverse();
+        this.offsetY = 0;
+        this.offsetX = 0;
+        this.el.classList.add(`direction-${this.options.direction}`);
+        this.#anchor.tabIndex = 0;
+        this.#menu.ariaExpanded = 'false';
+        if (this.options.direction === 'top')
+            this.offsetY = 40;
+        else if (this.options.direction === 'right')
+            this.offsetX = -40;
+        else if (this.options.direction === 'bottom')
+            this.offsetY = -40;
+        else
+            this.offsetX = 40;
+        this.#setupEventHandlers();
+    }
+    static get defaults() {
+        return _defaults;
+    }
+    /**
+     * Initializes instances of FloatingActionButton.
+     * @param els HTML elements.
+     * @param options Component options.
+     */
+    static init(els, options = {}) {
+        return super.init(els, options, FloatingActionButton);
+    }
+    static getInstance(el) {
+        return el['M_FloatingActionButton'];
+    }
+    destroy() {
+        this.#removeEventHandlers();
+        this.el['M_FloatingActionButton'] = undefined;
+    }
+    #setupEventHandlers() {
+        if (this.options.hoverEnabled && !this.options.toolbarEnabled) {
+            this.el.addEventListener('mouseenter', this.open);
+            this.el.addEventListener('mouseleave', this.close);
+        }
+        else {
+            this.el.addEventListener('click', this.#handleFABClick);
+        }
+        this.el.addEventListener('keypress', this.#handleFABKeyPress);
+    }
+    #removeEventHandlers() {
+        if (this.options.hoverEnabled && !this.options.toolbarEnabled) {
+            this.el.removeEventListener('mouseenter', this.open);
+            this.el.removeEventListener('mouseleave', this.close);
+        }
+        else {
+            this.el.removeEventListener('click', this.#handleFABClick);
+        }
+        this.el.removeEventListener('keypress', this.#handleFABKeyPress);
+    }
+    #handleFABClick = () => {
+        this.#handleFABToggle();
+    };
+    #handleFABKeyPress = (e) => {
+        if (Utils.keys.ENTER.includes(e.key)) {
+            this.#handleFABToggle();
+        }
+    };
+    #handleFABToggle = () => {
+        if (this.isOpen) {
+            this.close();
+        }
+        else {
+            this.open();
+        }
+    };
+    #handleDocumentClick = (e) => {
+        const elem = e.target;
+        if (elem !== this.#menu)
+            this.close();
+    };
+    /**
+     * Open FAB.
+     */
+    open = () => {
+        if (this.isOpen)
+            return;
+        if (this.options.toolbarEnabled)
+            this.#animateInToolbar();
+        else
+            this.#animateInFAB();
+        this.isOpen = true;
+    };
+    /**
+     * Close FAB.
+     */
+    close = () => {
+        if (!this.isOpen)
+            return;
+        if (this.options.toolbarEnabled) {
+            window.removeEventListener('scroll', this.close, true);
+            document.body.removeEventListener('click', this.#handleDocumentClick, true);
+        }
+        else {
+            this.#animateOutFAB();
+        }
+        this.isOpen = false;
+    };
+    #animateInFAB() {
+        this.el.classList.add('active');
+        this.#menu.ariaExpanded = 'true';
+        const delayIncrement = 40;
+        const duration = 275;
+        this.#floatingBtnsReverse.forEach((el, index) => {
+            const delay = delayIncrement * index;
+            el.style.transition = 'none';
+            el.style.opacity = '0';
+            el.style.transform = `translate(${this.offsetX}px, ${this.offsetY}px) scale(0.4)`;
+            setTimeout(() => {
+                // from:
+                el.style.opacity = '0.4';
+                // easeInOutQuad
+                setTimeout(() => {
+                    // to:
+                    el.style.transition = `opacity ${duration}ms ease, transform ${duration}ms ease`;
+                    el.style.opacity = '1';
+                    el.style.transform = 'translate(0, 0) scale(1)';
+                    el.tabIndex = 0;
+                }, 1);
+            }, delay);
+        });
+    }
+    #animateOutFAB() {
+        const duration = 175;
+        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() {
+        const windowWidth = window.innerWidth;
+        const windowHeight = window.innerHeight;
+        const btnRect = this.el.getBoundingClientRect();
+        const backdrop = document.createElement('div'), scaleFactor = windowWidth / backdrop[0].clientWidth, fabColor = getComputedStyle(this.#anchor).backgroundColor; // css('background-color');
+        backdrop.classList.add('fab-backdrop'); //  $('<div class="fab-backdrop"></div>');
+        backdrop.style.backgroundColor = fabColor;
+        this.#anchor.append(backdrop);
+        this.offsetX = btnRect.left - windowWidth / 2 + btnRect.width / 2;
+        this.offsetY = windowHeight - btnRect.bottom;
+        this.btnBottom = btnRect.bottom;
+        this.btnLeft = btnRect.left;
+        this.btnWidth = btnRect.width;
+        // Set initial state
+        this.el.classList.add('active');
+        this.el.style.textAlign = 'center';
+        this.el.style.width = '100%';
+        this.el.style.bottom = '0';
+        this.el.style.left = '0';
+        this.el.style.transform = 'translateX(' + this.offsetX + 'px)';
+        this.el.style.transition = 'none';
+        this.#menu.ariaExpanded = 'true';
+        this.#anchor.style.transform = `translateY(${this.offsetY}px`;
+        this.#anchor.style.transition = 'none';
+        setTimeout(() => {
+            this.el.style.transform = '';
+            this.el.style.transition =
+                'transform .2s cubic-bezier(0.550, 0.085, 0.680, 0.530), background-color 0s linear .2s';
+            this.#anchor.style.overflow = 'visible';
+            this.#anchor.style.transform = '';
+            this.#anchor.style.transition = 'transform .2s';
+            setTimeout(() => {
+                this.el.style.overflow = 'hidden';
+                this.el.style.backgroundColor = fabColor;
+                backdrop.style.transform = 'scale(' + scaleFactor + ')';
+                backdrop.style.transition = 'transform .2s cubic-bezier(0.550, 0.055, 0.675, 0.190)';
+                this.#menu.querySelectorAll('li > a').forEach((a) => {
+                    a.style.opacity = '1';
+                    a.tabIndex = 0;
+                });
+                // Scroll to close.
+                window.addEventListener('scroll', this.close, true);
+                document.body.addEventListener('click', this.#handleDocumentClick, true);
+            }, 100);
+        }, 0);
+    }
+}
+export { FloatingActionButton };

package/components/card/cards.js

@@ -0,0 +1,149 @@
+import { Utils } from '../../src/utils';
+import { Component } from '../../src/component';
+const _defaults = {
+    onOpen: null,
+    onClose: null,
+    inDuration: 225,
+    outDuration: 300
+};
+class Cards extends Component {
+    #cardReveal;
+    #initialOverflow;
+    #activators;
+    #cardRevealClose;
+    isOpen = false;
+    constructor(el, options) {
+        super(el, options, Cards);
+        this.el['M_Cards'] = this;
+        this.options = {
+            ...Cards.defaults,
+            ...options
+        };
+        this.#activators = [];
+        this.#cardReveal = this.el.querySelector('.card-reveal');
+        if (this.#cardReveal) {
+            this.#initialOverflow = getComputedStyle(this.el).overflow;
+            this.#activators = Array.from(this.el.querySelectorAll('.activator'));
+            this.#activators.forEach((el) => {
+                if (el)
+                    el.tabIndex = 0;
+            });
+            this.#cardRevealClose = this.#cardReveal?.querySelector('.card-title');
+            if (this.#cardRevealClose)
+                this.#cardRevealClose.tabIndex = -1;
+            this.#cardReveal.ariaExpanded = 'false';
+            this.#setupEventHandlers();
+        }
+    }
+    static get defaults() {
+        return _defaults;
+    }
+    /**
+     * Initializes instances of Cards.
+     * @param els HTML elements.
+     * @param options Component options.
+     */
+    static init(els, options) {
+        return super.init(els, options, Cards);
+    }
+    static getInstance(el) {
+        return el['M_Cards'];
+    }
+    /**
+     * {@inheritDoc}
+     */
+    destroy() {
+        this.#removeEventHandlers();
+        this.#activators = [];
+    }
+    #setupEventHandlers = () => {
+        this.#activators.forEach((el) => {
+            el.addEventListener('click', this.#handleClickInteraction);
+            el.addEventListener('keypress', this.#handleKeypressEvent);
+        });
+    };
+    #removeEventHandlers = () => {
+        this.#activators.forEach((el) => {
+            el.removeEventListener('click', this.#handleClickInteraction);
+            el.removeEventListener('keypress', this.#handleKeypressEvent);
+        });
+    };
+    #handleClickInteraction = () => {
+        this.#handleRevealEvent();
+    };
+    #handleKeypressEvent = (e) => {
+        if (Utils.keys.ENTER.includes(e.key)) {
+            this.#handleRevealEvent();
+        }
+    };
+    #handleRevealEvent = () => {
+        this.#activators.forEach((el) => (el.tabIndex = -1)); // Reveal Card
+        this.open();
+    };
+    #setupRevealCloseEventHandlers = () => {
+        this.#cardRevealClose.addEventListener('click', this.close);
+        this.#cardRevealClose.addEventListener('keypress', this.#handleKeypressCloseEvent);
+    };
+    #removeRevealCloseEventHandlers = () => {
+        this.#cardRevealClose.addEventListener('click', this.close);
+        this.#cardRevealClose.addEventListener('keypress', this.#handleKeypressCloseEvent);
+    };
+    #handleKeypressCloseEvent = (e) => {
+        if (Utils.keys.ENTER.includes(e.key)) {
+            this.close();
+        }
+    };
+    /**
+     * Show card reveal.
+     */
+    open = () => {
+        if (this.isOpen)
+            return;
+        this.isOpen = true;
+        this.el.style.overflow = 'hidden';
+        this.#cardReveal.style.display = 'block';
+        this.#cardReveal.ariaExpanded = 'true';
+        this.#cardRevealClose.tabIndex = 0;
+        setTimeout(() => {
+            this.#cardReveal.style.transition = `transform ${this.options.outDuration}ms ease`; //easeInOutQuad
+            this.#cardReveal.style.transform = 'translateY(-100%)';
+        }, 1);
+        if (typeof this.options.onOpen === 'function') {
+            this.options.onOpen.call(this);
+        }
+        this.#setupRevealCloseEventHandlers();
+    };
+    /**
+     * Hide card reveal.
+     */
+    close = () => {
+        if (!this.isOpen)
+            return;
+        this.isOpen = false;
+        this.#cardReveal.style.transition = `transform ${this.options.inDuration}ms ease`; //easeInOutQuad
+        this.#cardReveal.style.transform = 'translateY(0)';
+        setTimeout(() => {
+            this.#cardReveal.style.display = 'none';
+            this.#cardReveal.ariaExpanded = 'false';
+            this.#activators.forEach((el) => (el.tabIndex = 0));
+            this.#cardRevealClose.tabIndex = -1;
+            this.el.style.overflow = this.#initialOverflow;
+        }, this.options.inDuration);
+        if (typeof this.options.onClose === 'function') {
+            this.options.onClose.call(this);
+        }
+        this.#removeRevealCloseEventHandlers();
+    };
+    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);
+                });
+            });
+    }
+}
+export { Cards };