kmaterialize 2.3.3-1.0.21 → 2.3.3-1.0.23

package/components/collapsible/collapsible.js

@@ -0,0 +1,156 @@
+import { Utils } from '../../src/utils';
+import { Component } from '../../src/component';
+const _defaults = {
+    accordion: true,
+    onOpenStart: null,
+    onOpenEnd: null,
+    onCloseStart: null,
+    onCloseEnd: null,
+    inDuration: 300,
+    outDuration: 300
+};
+export class Collapsible extends Component {
+    _headers;
+    constructor(el, options) {
+        super(el, options, Collapsible);
+        this.el['M_Collapsible'] = this;
+        this.options = {
+            ...Collapsible.defaults,
+            ...options
+        };
+        // Setup tab indices
+        this._headers = Array.from(this.el.querySelectorAll('li > .collapsible-header'));
+        this._headers.forEach((el) => (el.tabIndex = 0));
+        this._setupEventHandlers();
+        // Open active
+        const activeBodies = Array.from(this.el.querySelectorAll('li.active > .collapsible-body'));
+        if (this.options.accordion) {
+            if (activeBodies.length > 0) {
+                // Accordion => open first active only
+                this._setExpanded(activeBodies[0]);
+            }
+        }
+        else {
+            // Expandables => all active
+            activeBodies.forEach((el) => this._setExpanded(el));
+        }
+    }
+    static get defaults() {
+        return _defaults;
+    }
+    /**
+     * Initializes instances of Collapsible.
+     * @param els HTML elements.
+     * @param options Component options.
+     */
+    static init(els, options = {}) {
+        return super.init(els, options, Collapsible);
+    }
+    static getInstance(el) {
+        return el['M_Collapsible'];
+    }
+    destroy() {
+        this._removeEventHandlers();
+        this.el['M_Collapsible'] = undefined;
+    }
+    _setupEventHandlers() {
+        this.el.addEventListener('click', this._handleCollapsibleClick);
+        this._headers.forEach((header) => header.addEventListener('keydown', this._handleCollapsibleKeydown));
+    }
+    _removeEventHandlers() {
+        this.el.removeEventListener('click', this._handleCollapsibleClick);
+        this._headers.forEach((header) => header.removeEventListener('keydown', this._handleCollapsibleKeydown));
+    }
+    _handleCollapsibleClick = (e) => {
+        const header = e.target.closest('.collapsible-header');
+        if (e.target && header) {
+            const collapsible = header.closest('.collapsible');
+            if (collapsible !== this.el)
+                return;
+            const li = header.closest('li');
+            const isActive = li.classList.contains('active');
+            const index = [...li.parentNode.children].indexOf(li);
+            if (isActive)
+                this.close(index);
+            else
+                this.open(index);
+        }
+    };
+    _handleCollapsibleKeydown = (e) => {
+        if (Utils.keys.ENTER.includes(e.key)) {
+            this._handleCollapsibleClick(e);
+        }
+    };
+    _setExpanded(li) {
+        li.style.maxHeight = li.scrollHeight + 'px';
+    }
+    _animateIn(index) {
+        const li = this.el.children[index];
+        if (!li)
+            return;
+        const body = li.querySelector('.collapsible-body');
+        const duration = this.options.inDuration; // easeInOutCubic
+        body.style.transition = `max-height ${duration}ms ease-out`;
+        this._setExpanded(body);
+        setTimeout(() => {
+            if (typeof this.options.onOpenEnd === 'function') {
+                this.options.onOpenEnd.call(this, li);
+            }
+        }, duration);
+    }
+    _animateOut(index) {
+        const li = this.el.children[index];
+        if (!li)
+            return;
+        const body = li.querySelector('.collapsible-body');
+        const duration = this.options.outDuration; // easeInOutCubic
+        body.style.transition = `max-height ${duration}ms ease-out`;
+        body.style.maxHeight = '0';
+        setTimeout(() => {
+            if (typeof this.options.onCloseEnd === 'function') {
+                this.options.onCloseEnd.call(this, li);
+            }
+        }, duration);
+    }
+    /**
+     * Open collapsible section.
+     * @param n Nth section to open.
+     */
+    open = (index) => {
+        const listItems = Array.from(this.el.children).filter((c) => c.tagName === 'LI');
+        const li = listItems[index];
+        if (li && !li.classList.contains('active')) {
+            // onOpenStart callback
+            if (typeof this.options.onOpenStart === 'function') {
+                this.options.onOpenStart.call(this, li);
+            }
+            // Handle accordion behavior
+            if (this.options.accordion) {
+                const activeLis = listItems.filter((li) => li.classList.contains('active'));
+                activeLis.forEach((activeLi) => {
+                    const index = listItems.indexOf(activeLi);
+                    this.close(index);
+                });
+            }
+            // Animate in
+            li.classList.add('active');
+            this._animateIn(index);
+        }
+    };
+    /**
+     * Close collapsible section.
+     * @param n Nth section to close.
+     */
+    close = (index) => {
+        const li = Array.from(this.el.children).filter((c) => c.tagName === 'LI')[index];
+        if (li && li.classList.contains('active')) {
+            // onCloseStart callback
+            if (typeof this.options.onCloseStart === 'function') {
+                this.options.onCloseStart.call(this, li);
+            }
+            // Animate out
+            li.classList.remove('active');
+            this._animateOut(index);
+        }
+    };
+}

package/components/color-input/color-input.js

@@ -0,0 +1,166 @@
+import { Component } from '../../src/component';
+import { loadPeer } from '../../src/peer-loader';
+// @implement /Users/kzarshenas/Sites/CrazyProject/CrazyPHP/src/Front/Library/Utility/Form/Color.ts
+// Built-in French translation for Pickr's UI strings, activated by
+// `data-color-locale="fr-fr"` alone - no separate options object required
+// from the consumer, unlike a fully custom `options.locale` override.
+const FR_FR = {
+    'ui:dialog': 'boîte de dialogue du sélecteur de couleur',
+    'btn:toggle': 'basculer la boîte de dialogue du sélecteur de couleur',
+    'btn:swatch': 'échantillon de couleur',
+    'btn:last-color': 'utiliser la couleur précédente',
+    'btn:save': 'Enregistrer',
+    'btn:cancel': 'Annuler',
+    'btn:clear': 'Effacer',
+    'aria:btn:save': 'enregistrer et fermer',
+    'aria:btn:cancel': 'annuler et fermer',
+    'aria:btn:clear': 'effacer et fermer',
+    'aria:input': 'champ de saisie de couleur',
+    'aria:palette': 'zone de sélection des couleurs',
+    'aria:hue': 'curseur de sélection de teinte',
+    'aria:opacity': "curseur de sélection d'opacité"
+};
+const _defaults = {
+    theme: 'classic',
+    opacity: true,
+    swatches: [
+        'rgba(244, 67, 54, 1)',
+        'rgba(233, 30, 99, 0.95)',
+        'rgba(156, 39, 176, 0.9)',
+        'rgba(103, 58, 183, 0.85)',
+        'rgba(63, 81, 181, 0.8)',
+        'rgba(33, 150, 243, 0.75)',
+        'rgba(3, 169, 244, 0.7)',
+        'rgba(0, 188, 212, 0.7)',
+        'rgba(0, 150, 136, 0.75)',
+        'rgba(76, 175, 80, 0.8)',
+        'rgba(139, 195, 74, 0.85)',
+        'rgba(205, 220, 57, 0.9)',
+        'rgba(255, 235, 59, 0.95)',
+        'rgba(255, 193, 7, 1)'
+    ]
+};
+// @implement /Users/kzarshenas/Sites/CrazyProject/CrazyPHP/src/Front/Library/Utility/Form/Color.ts
+// Enhances a native `<input type="color" data-color-picker="pickr">` with a
+// full Pickr popup (palette, hue/opacity sliders, swatches, hex/rgba/hsla).
+// If `data-color-picker` is absent the input is left completely untouched -
+// still a plain native color swatch, matching CrazyPHP's own fallback.
+//
+// Pickr remains an optional peerDependency and is loaded on demand via peer-loader.
+export class ColorInput extends Component {
+    pickr;
+    ready;
+    _swatchEl;
+    _labels;
+    constructor(el, options) {
+        super(el, options, ColorInput);
+        this.el.M_ColorInput = this;
+        this.options = {
+            ...ColorInput.defaults,
+            ...options
+        };
+        this._swatchEl = document.createElement('div');
+        this.el.after(this._swatchEl);
+        this.el.classList.add('hide');
+        this.el.addEventListener('change', this._handleInputChange);
+        this._labels = Array.from(document.querySelectorAll('label')).filter(label => label.htmlFor === this.el.id);
+        this._labels.forEach(label => label.addEventListener('click', this._handleLabelClick));
+        this.ready = this._setup();
+    }
+    static get defaults() {
+        return _defaults;
+    }
+    static init(els, options = {}) {
+        return super.init(els, options, ColorInput);
+    }
+    static getInstance(el) {
+        return el.M_ColorInput;
+    }
+    destroy() {
+        this.el.removeEventListener('change', this._handleInputChange);
+        this._labels.forEach(label => label.removeEventListener('click', this._handleLabelClick));
+        this.pickr?.destroyAndRemove();
+        this._swatchEl.remove();
+        this.el.classList.remove('hide');
+        this.el.M_ColorInput = undefined;
+    }
+    _handleInputChange = () => {
+        this.pickr?.setColor(this.el.value);
+    };
+    _handleLabelClick = (event) => {
+        // A label associated with a hidden input[type=color] otherwise opens
+        // the browser's native picker (notably in Firefox). Route the same
+        // accessible label activation to Pickr instead.
+        event.preventDefault();
+        void this.ready.then(() => this.pickr?.show());
+    };
+    async _setup() {
+        const Pickr = await loadPeer({
+            specifier: '@simonwep/pickr',
+            globalName: 'Pickr',
+            feature: 'Color input (Pickr) enhancement',
+            cdnHint: '<link rel="stylesheet" href="path/to/pickr-classic.min.css">\n' +
+                '    <script src="path/to/pickr.min.js"></script>\n' +
+                '    (self-hosted - copy from node_modules/@simonwep/pickr/dist/, or a CDN of your choice)'
+        }, () => import('@simonwep/pickr'));
+        const dataset = this.el.dataset;
+        const theme = (['classic', 'monolith', 'nano'].includes(dataset.colorTheme ?? '')
+            ? dataset.colorTheme
+            : this.options.theme);
+        const lockOpacity = dataset.colorOpacity !== undefined
+            ? ['false', '0', '', 'null'].includes(dataset.colorOpacity)
+            : !this.options.opacity;
+        const pickrOptions = {
+            el: this._swatchEl,
+            theme,
+            lockOpacity,
+            swatches: this.options.swatches,
+            components: {
+                preview: true,
+                opacity: true,
+                hue: true,
+                interaction: {
+                    hex: true,
+                    rgba: true,
+                    hsla: true,
+                    hsva: true,
+                    cmyk: true,
+                    input: true,
+                    clear: true,
+                    save: true
+                }
+            }
+        };
+        if (this.options.locale) {
+            pickrOptions.i18n = this.options.locale;
+        }
+        else if (dataset.colorLocale === 'fr-fr') {
+            pickrOptions.i18n = FR_FR;
+        }
+        const currentValue = this.el.getAttribute('value');
+        if (currentValue && currentValue !== 'randomHex()') {
+            pickrOptions.default = currentValue;
+        }
+        else if (this.el.hasAttribute('default')) {
+            const currentDefault = this.el.getAttribute('default');
+            if (currentDefault === 'randomHex()') {
+                const randomColor = Math.floor(Math.random() * 16777216);
+                pickrOptions.default = `#${randomColor.toString(16).padStart(6, '0')}`;
+            }
+            else if (currentDefault) {
+                pickrOptions.default = currentDefault;
+            }
+        }
+        this.pickr = Pickr.create(pickrOptions);
+        if (this.el.disabled)
+            this.pickr.disable();
+        this.pickr.on('save', (color, instance) => {
+            const hexa = color?.toHEXA().toString();
+            if (hexa) {
+                this.el.value = hexa;
+                this.el.dispatchEvent(new Event('change', { bubbles: true }));
+            }
+            instance.hide();
+        });
+    }
+}