kmaterialize 2.3.3-1.0.21 → 2.3.3-1.0.23

package/dist/js/materialize.js

@@ -1,5 +1,5 @@
 /*!
-* Materialize v2.3.3-1.0.21 (https://materializeweb.com)
+* Materialize v2.3.3-1.0.23 (https://materializeweb.com)
 * Copyright 2014-2026 Materialize
 * MIT License (https://raw.githubusercontent.com/materializecss/materialize/master/LICENSE)
 */
@@ -400,7 +400,7 @@ var M = (function (exports) {
         }
     }
 
-    const _defaults$x = {
+    const _defaults$y = {
         alignment: 'left',
         autoFocus: true,
         constrainWidth: true,
@@ -453,7 +453,7 @@ var M = (function (exports) {
             this._setupEventHandlers();
         }
         static get defaults() {
-            return _defaults$x;
+            return _defaults$y;
         }
         /**
          * Initializes instances of Dropdown.
@@ -904,7 +904,7 @@ var M = (function (exports) {
         };
     }
 
-    const _defaults$w = {
+    const _defaults$x = {
         data: [], // Autocomplete data set
         onAutocomplete: null, // Callback for when autocompleted
         dropdownOptions: {
@@ -964,7 +964,7 @@ var M = (function (exports) {
             this._setupEventHandlers();
         }
         static get defaults() {
-            return _defaults$w;
+            return _defaults$x;
         }
         /**
          * Initializes instances of Autocomplete.
@@ -1372,6 +1372,194 @@ var M = (function (exports) {
         }
     }
 
+    const _cache = new Map();
+    async function loadPeer(spec, importer) {
+        if (_cache.has(spec.specifier))
+            return _cache.get(spec.specifier);
+        try {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const mod = await importer();
+            const resolved = mod?.default ?? mod;
+            _cache.set(spec.specifier, resolved);
+            return resolved;
+        }
+        catch {
+            // fall through to the global-scope lookup below
+        }
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const globalScope = typeof window !== 'undefined' ? window : undefined;
+        if (globalScope && globalScope[spec.globalName]) {
+            const resolved = globalScope[spec.globalName];
+            _cache.set(spec.specifier, resolved);
+            return resolved;
+        }
+        throw new Error(`kmaterialize's ${spec.feature} requires "${spec.specifier}", which isn't installed/loaded.\n` +
+            `- If you're using a bundler: npm/pnpm/yarn install "${spec.specifier}".\n` +
+            `- If you're using the plain <script> (no-bundler) build: add\n` +
+            `    ${spec.cdnHint}\n` +
+            `  before initializing this component, so window.${spec.globalName} is defined.`);
+    }
+
+    function withClass(required, custom) {
+        return [
+            required,
+            ...(typeof custom === 'string'
+                ? custom.split(/\s+/)
+                : custom ?? [])
+        ]
+            .filter((value, index, values) => value && values.indexOf(value) === index)
+            .join(' ');
+    }
+    /** Materialize-themed SweetAlert2 dialogs. No element initialization is needed. */
+    class Popup {
+        /** Fresh defaults so per-dialog customization cannot affect later popups. */
+        static get defaults() {
+            return {
+                buttonsStyling: false,
+                heightAuto: false,
+                customClass: {
+                    container: 'popup-container',
+                    popup: 'popup',
+                    confirmButton: 'btn filled',
+                    cancelButton: 'btn outlined',
+                    denyButton: 'btn tonal'
+                }
+            };
+        }
+        static _load() {
+            // Use the JS-only build: the consumer controls stylesheet order.
+            return loadPeer({
+                specifier: 'sweetalert2',
+                globalName: 'Swal',
+                feature: 'Popup',
+                cdnHint: '<link rel="stylesheet" href="path/to/sweetalert2.min.css">\n' +
+                    '    <script src="path/to/sweetalert2.min.js"></script>\n' +
+                    '    (copy from node_modules/sweetalert2/dist/; load the CSS before materialize.css)'
+            }, () => import('sweetalert2/dist/sweetalert2.js'));
+        }
+        /** Open a dialog and resolve with SweetAlert2's confirmation/dismissal result. */
+        static async fire(options = {}) {
+            const swal = await Popup._load();
+            const defaults = Popup.defaults;
+            const customClass = {
+                ...defaults.customClass,
+                ...options.customClass,
+                // Keep the scoped theme even when consumers add their own classes.
+                container: withClass('popup-container', options.customClass?.container),
+                popup: withClass('popup', options.customClass?.popup)
+            };
+            /*
+             * SweetAlertOptions is a discriminated union because `input: "file"`
+             * uses a different inputValidator signature. Object spreading causes
+             * TypeScript to lose that correlation, even though the resulting
+             * object is valid.
+             */
+            const mergedOptions = {
+                ...defaults,
+                ...options,
+                customClass
+            };
+            const result = await swal.fire(mergedOptions);
+            /*
+             * SweetAlert2 declares its own internal Awaited<T>, while modern
+             * TypeScript provides the global Awaited<T>. They are semantically
+             * equivalent here but TypeScript can report them as unrelated.
+             */
+            return result;
+        }
+        /** Close the current SweetAlert2 dialog, resolving its pending result. */
+        static async close() {
+            const swal = await Popup._load();
+            swal.close();
+        }
+    }
+
+    const _defaults$w = {
+        active: true,
+        label: 'Loading…',
+        completeLabel: 'Ready'
+    };
+    /** A circular loading indicator with an optional centered logo or icon. */
+    class Loading extends Component {
+        _originalAttributes = {};
+        _originalActive;
+        _originalLoading;
+        _generatedSpinner = null;
+        constructor(el, options = {}) {
+            super(el, options, Loading);
+            this.options = { ...Loading.defaults, ...options };
+            this.el['M_Loading'] = this;
+            this._originalActive = this.el.classList.contains('active');
+            this._originalLoading = this.el.classList.contains('loading');
+            for (const name of ['role', 'aria-live', 'aria-busy', 'aria-label']) {
+                this._originalAttributes[name] = this.el.getAttribute(name);
+            }
+            // Preserve an accessible name supplied in the markup unless overridden.
+            if (options.label === undefined && this.el.hasAttribute('aria-label')) {
+                this.options.label = this.el.getAttribute('aria-label');
+            }
+            this.el.classList.add('loading');
+            // Reuse authored Preloader markup; generate it for the compact JS API.
+            if (!this.el.querySelector(':scope > .preloader-wrapper')) {
+                this._generatedSpinner = document.createElement('div');
+                this._generatedSpinner.className = 'preloader-wrapper active';
+                this._generatedSpinner.setAttribute('aria-hidden', 'true');
+                this._generatedSpinner.innerHTML = `<div class="spinner-layer">
+        <div class="circle-clipper left"><div class="circle"></div></div>
+        <div class="gap-patch"><div class="circle"></div></div>
+        <div class="circle-clipper right"><div class="circle"></div></div>
+      </div>`;
+                this.el.appendChild(this._generatedSpinner);
+            }
+            if (!this.el.hasAttribute('role'))
+                this.el.setAttribute('role', 'status');
+            if (!this.el.hasAttribute('aria-live'))
+                this.el.setAttribute('aria-live', 'polite');
+            if (this.options.active)
+                this.start();
+            else
+                this.stop();
+        }
+        static get defaults() {
+            return _defaults$w;
+        }
+        static init(els, options = {}) {
+            return super.init(els, options, Loading);
+        }
+        static getInstance(el) {
+            return el['M_Loading'];
+        }
+        get isActive() {
+            return this.el.classList.contains('active');
+        }
+        /** Show the animated ring and announce the loading status. */
+        start(label = this.options.label) {
+            this.el.setAttribute('aria-label', label);
+            this.el.setAttribute('aria-busy', 'true');
+            this.el.classList.add('active');
+        }
+        /** Hide the ring, keeping the centered content visible. */
+        stop(label = this.options.completeLabel) {
+            this.el.setAttribute('aria-label', label);
+            this.el.setAttribute('aria-busy', 'false');
+            this.el.classList.remove('active');
+        }
+        /** Restore the original markup state and remove the instance. */
+        destroy() {
+            this._generatedSpinner?.remove();
+            this._generatedSpinner = null;
+            for (const [name, value] of Object.entries(this._originalAttributes)) {
+                if (value === null)
+                    this.el.removeAttribute(name);
+                else
+                    this.el.setAttribute(name, value);
+            }
+            this.el.classList.toggle('active', this._originalActive);
+            this.el.classList.toggle('loading', this._originalLoading);
+            delete this.el['M_Loading'];
+        }
+    }
+
     const _defaults$v = {
         dismissible: true
     };
@@ -1433,13 +1621,24 @@ var M = (function (exports) {
     class Kanban extends Component {
         _draggedCard = null;
         _dragSourceColumn = null;
+        _dropPreview = null;
+        _dragImage = null;
+        _previewHeight = 64;
         _onDragStart = (event) => {
             const card = event.target?.closest('.kanban-card');
-            if (!card || !this.options.draggable)
+            if (!card || !this.options.draggable || card.classList.contains('is-disabled') || card.getAttribute('aria-disabled') === 'true')
                 return;
             this._draggedCard = card;
             this._dragSourceColumn = card.closest('.kanban-column');
+            this._previewHeight = Math.max(64, Math.round(card.getBoundingClientRect().height));
             card.classList.add('is-dragging');
+            this._dragImage = card.cloneNode(true);
+            this._dragImage.classList.remove('is-dragging');
+            this._dragImage.classList.add('kanban-drag-image');
+            this._dragImage.setAttribute('aria-hidden', 'true');
+            this._dragImage.style.width = `${card.getBoundingClientRect().width}px`;
+            document.body.appendChild(this._dragImage);
+            event.dataTransfer?.setDragImage(this._dragImage, card.offsetWidth / 2, card.offsetHeight / 2);
             event.dataTransfer?.setData('text/plain', card.dataset.kanbanCard || '');
             if (event.dataTransfer)
                 event.dataTransfer.effectAllowed = 'move';
@@ -1455,6 +1654,7 @@ var M = (function (exports) {
                 event.dataTransfer.dropEffect = 'move';
             this.el.querySelectorAll('.kanban-column.is-drag-over').forEach((item) => item.classList.remove('is-drag-over'));
             column.classList.add('is-drag-over');
+            this._updateDropPreview(column, event);
         };
         _onDrop = (event) => {
             if (!this._draggedCard)
@@ -1466,17 +1666,21 @@ var M = (function (exports) {
             const body = column.querySelector('.kanban-column-body') || column;
             const targetCard = event.target?.closest('.kanban-card');
             const source = this._dragSourceColumn;
-            if (targetCard && targetCard !== this._draggedCard && targetCard.parentElement === body) {
-                const box = targetCard.getBoundingClientRect();
-                body.insertBefore(this._draggedCard, event.clientY < box.top + box.height / 2 ? targetCard : targetCard.nextSibling);
+            const movedCard = this._draggedCard;
+            if (this._dropPreview?.parentElement === body) {
+                body.insertBefore(movedCard, this._dropPreview);
+                this._dropPreview.remove();
+            }
+            else if (targetCard && targetCard !== movedCard && targetCard.parentElement === body) {
+                body.insertBefore(movedCard, targetCard);
             }
             else {
-                body.appendChild(this._draggedCard);
+                body.appendChild(movedCard);
             }
             this._clearDragState();
             this._updateCounts();
             if (source && source !== column)
-                this.options.onMove?.({ card: this._draggedCard, from: source, to: column });
+                this.options.onMove?.({ card: movedCard, from: source, to: column });
         };
         _onDragEnd = () => this._clearDragState();
         constructor(el, options) {
@@ -1505,9 +1709,15 @@ var M = (function (exports) {
                     body.setAttribute('role', 'list');
                 column.querySelectorAll('.kanban-card').forEach((card) => {
                     card.setAttribute('role', 'listitem');
-                    card.setAttribute('tabindex', '0');
-                    if (this.options.draggable)
+                    const disabled = card.classList.contains('is-disabled') || card.getAttribute('aria-disabled') === 'true';
+                    card.setAttribute('tabindex', disabled ? '-1' : '0');
+                    if (disabled) {
+                        card.setAttribute('aria-disabled', 'true');
+                        card.draggable = false;
+                    }
+                    else if (this.options.draggable) {
                         card.draggable = true;
+                    }
                 });
             });
             this._updateCounts();
@@ -1519,10 +1729,15 @@ var M = (function (exports) {
             this.el.addEventListener('dragend', this._onDragEnd);
         }
         _clearDragState() {
+            this._dragImage?.remove();
+            this._dragImage = null;
+            this._dropPreview?.remove();
+            this._dropPreview = null;
             this._draggedCard?.classList.remove('is-dragging');
             this.el.querySelectorAll('.kanban-column.is-drag-over').forEach((item) => item.classList.remove('is-drag-over'));
             this._draggedCard = null;
             this._dragSourceColumn = null;
+            this._previewHeight = 64;
         }
         _updateCounts() {
             this.el.querySelectorAll('.kanban-column').forEach((column) => {
@@ -1530,8 +1745,33 @@ var M = (function (exports) {
                 const body = column.querySelector('.kanban-column-body');
                 if (count && body)
                     count.textContent = String(body.querySelectorAll(':scope > .kanban-card').length);
+                const empty = body?.querySelector('.kanban-empty');
+                if (empty && body)
+                    empty.hidden = body.querySelectorAll(':scope > .kanban-card').length > 0;
             });
         }
+        _updateDropPreview(column, event) {
+            const body = column.querySelector('.kanban-column-body') || column;
+            const targetCard = event.target?.closest('.kanban-card');
+            if (targetCard === this._draggedCard)
+                return;
+            if (!this._dropPreview) {
+                this._dropPreview = document.createElement('div');
+                this._dropPreview.className = 'kanban-drop-preview';
+                this._dropPreview.setAttribute('aria-hidden', 'true');
+            }
+            // Keep the preview tied to the dragged card's original height. Using the
+            // hovered card's height makes the placeholder jump as the pointer crosses
+            // cards with different content lengths.
+            this._dropPreview.style.height = `${this._previewHeight}px`;
+            if (targetCard && targetCard.parentElement === body) {
+                const box = targetCard.getBoundingClientRect();
+                body.insertBefore(this._dropPreview, event.clientY < box.top + box.height / 2 ? targetCard : targetCard.nextSibling);
+            }
+            else if (this._dropPreview.parentElement !== body) {
+                body.appendChild(this._dropPreview);
+            }
+        }
         destroy() {
             this._clearDragState();
             this.el.removeEventListener('dragstart', this._onDragStart);
@@ -7794,34 +8034,6 @@ var M = (function (exports) {
         };
     }
 
-    const _cache = new Map();
-    async function loadPeer(spec, importer) {
-        if (_cache.has(spec.specifier))
-            return _cache.get(spec.specifier);
-        try {
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            const mod = await importer();
-            const resolved = mod?.default ?? mod;
-            _cache.set(spec.specifier, resolved);
-            return resolved;
-        }
-        catch {
-            // fall through to the global-scope lookup below
-        }
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        const globalScope = typeof window !== 'undefined' ? window : undefined;
-        if (globalScope && globalScope[spec.globalName]) {
-            const resolved = globalScope[spec.globalName];
-            _cache.set(spec.specifier, resolved);
-            return resolved;
-        }
-        throw new Error(`kmaterialize's ${spec.feature} requires "${spec.specifier}", which isn't installed/loaded.\n` +
-            `- If you're using a bundler: npm/pnpm/yarn install "${spec.specifier}".\n` +
-            `- If you're using the plain <script> (no-bundler) build: add\n` +
-            `    ${spec.cdnHint}\n` +
-            `  before initializing this component, so window.${spec.globalName} is defined.`);
-    }
-
     const _defaults$9 = {
         thousandsSeparator: ' ',
         radix: '.',
@@ -9381,7 +9593,7 @@ var M = (function (exports) {
     }
 
     /* eslint-disable @typescript-eslint/no-unused-vars */
-    const version = '2.3.3-1.0.21';
+    const version = '2.3.3-1.0.23';
     /**
      * Convenience helper matching v1's `M.toast({...})` call, since Toast is a
      * class in v2 with no bare functional equivalent of its own.
@@ -9396,6 +9608,7 @@ var M = (function (exports) {
      */
     function AutoInit(context = document.body, options) {
         const registry = {
+            Loading: context.querySelectorAll('.loading:not(.no-autoinit)'),
             Alert: context.querySelectorAll('.alert:not(.no-autoinit)'),
             Kanban: context.querySelectorAll('.kanban-board:not(.no-autoinit)'),
             Autocomplete: context.querySelectorAll('.autocomplete:not(.no-autoinit)'),
@@ -9430,6 +9643,7 @@ var M = (function (exports) {
             TomSelectField: context.querySelectorAll('select.tomselected:not(.no-autoinit)')
         };
         Autocomplete.init(registry.Autocomplete, options?.Autocomplete ?? {});
+        Loading.init(registry.Loading, options?.Loading ?? {});
         Alert.init(registry.Alert, options?.Alert ?? {});
         Kanban.init(registry.Kanban, options?.Kanban ?? {});
         Cards.init(registry.Cards, options?.Cards ?? {});
@@ -9488,11 +9702,13 @@ var M = (function (exports) {
     exports.FormSelect = FormSelect;
     exports.Forms = Forms;
     exports.Kanban = Kanban;
+    exports.Loading = Loading;
     exports.Materialbox = Materialbox;
     exports.Modal = Modal;
     exports.NumberInput = NumberInput;
     exports.Parallax = Parallax;
     exports.PasswordInput = PasswordInput;
+    exports.Popup = Popup;
     exports.Pushpin = Pushpin;
     exports.Range = Range;
     exports.ScrollSpy = ScrollSpy;