kmaterialize 2.3.3-1.0.21 → 2.3.3-1.0.23

package/dist/js/materialize.mjs

@@ -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)
 */
@@ -397,7 +397,7 @@ class Component {
     }
 }
 
-const _defaults$x = {
+const _defaults$y = {
     alignment: 'left',
     autoFocus: true,
     constrainWidth: true,
@@ -450,7 +450,7 @@ class Dropdown extends Component {
         this._setupEventHandlers();
     }
     static get defaults() {
-        return _defaults$x;
+        return _defaults$y;
     }
     /**
      * Initializes instances of Dropdown.
@@ -901,7 +901,7 @@ class Dropdown extends Component {
     };
 }
 
-const _defaults$w = {
+const _defaults$x = {
     data: [], // Autocomplete data set
     onAutocomplete: null, // Callback for when autocompleted
     dropdownOptions: {
@@ -961,7 +961,7 @@ class Autocomplete extends Component {
         this._setupEventHandlers();
     }
     static get defaults() {
-        return _defaults$w;
+        return _defaults$x;
     }
     /**
      * Initializes instances of Autocomplete.
@@ -1369,6 +1369,194 @@ class Autocomplete extends Component {
     }
 }
 
+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
 };
@@ -1430,13 +1618,24 @@ const _defaults$u = {
 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';
@@ -1452,6 +1651,7 @@ class Kanban extends Component {
             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)
@@ -1463,17 +1663,21 @@ class Kanban extends Component {
         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) {
@@ -1502,9 +1706,15 @@ class Kanban extends Component {
                 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();
@@ -1516,10 +1726,15 @@ class Kanban extends Component {
         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) => {
@@ -1527,8 +1742,33 @@ class Kanban extends Component {
             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);
@@ -7791,34 +8031,6 @@ class PasswordInput extends Component {
     };
 }
 
-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: '.',
@@ -9378,7 +9590,7 @@ class Waves {
 }
 
 /* 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.
@@ -9393,6 +9605,7 @@ function toast(options) {
  */
 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)'),
@@ -9427,6 +9640,7 @@ function AutoInit(context = document.body, options) {
         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 ?? {});
@@ -9468,4 +9682,4 @@ Waves.Init();
 Range.Init();
 Cards.Init();
 
-export { AirDatepickerField, Alert, AutoInit, Autocomplete, Cards, Carousel, CharacterCounter, Chips, Collapsible, ColorInput, Datepicker, Dropdown, FileInput, FloatingActionButton, FormSelect, Forms, Kanban, Materialbox, Modal, NumberInput, Parallax, PasswordInput, Pushpin, Range, ScrollSpy, Sidenav, Slider, Tabs, TapTarget, Timepicker, Toast, TomSelectField, Toolbar, Tooltip, Waves, toast, version };
+export { AirDatepickerField, Alert, AutoInit, Autocomplete, Cards, Carousel, CharacterCounter, Chips, Collapsible, ColorInput, Datepicker, Dropdown, FileInput, FloatingActionButton, FormSelect, Forms, Kanban, Loading, Materialbox, Modal, NumberInput, Parallax, PasswordInput, Popup, Pushpin, Range, ScrollSpy, Sidenav, Slider, Tabs, TapTarget, Timepicker, Toast, TomSelectField, Toolbar, Tooltip, Waves, toast, version };

package/package.json

@@ -3,7 +3,7 @@
   "description": "The responsive front-end library based on Material Design from Google.",
   "author": "The Materialize Team",
   "homepage": "https://materialize.kevinzarshenas.com",
-  "version": "2.3.3-1.0.21",
+  "version": "2.3.3-1.0.23",
   "style": "dist/css/materialize.css",
   "sass": "sass/materialize.scss",
   "typings": "dist/js/materialize.d.ts",
@@ -64,6 +64,7 @@
     "filepond-plugin-image-exif-orientation": "^1.0.0",
     "filepond-plugin-image-preview": "^4.6.0",
     "imask": "^7.6.0",
+    "sweetalert2": "^11.26.25",
     "tom-select": "^2.3.0"
   },
   "peerDependenciesMeta": {
@@ -88,6 +89,9 @@
     "imask": {
       "optional": true
     },
+    "sweetalert2": {
+      "optional": true
+    },
     "tom-select": {
       "optional": true
     }
@@ -122,6 +126,7 @@
     "rollup-plugin-scss": "^4.0.0",
     "sass": "^1.77.8",
     "storybook": "^9.0.12",
+    "sweetalert2": "^11.26.25",
     "tom-select": "^2.3.0",
     "tslib": "^2.6.3",
     "typescript": "^5.4.3",

package/sass/materialize.scss

@@ -37,6 +37,8 @@
 @forward '../components/appbar/appbar.css';
 @forward '../components/navigation-drawer/sidenav';
 @forward '../components/progress/preloader';
+@forward '../components/loading/loading';
+@forward '../components/popup/popup';
 @forward '../components/carousel/slider';
 @forward '../components/carousel/carousel';
 @forward '../components/datepicker/datepicker';