kmaterialize 2.3.3-1.0.20 → 2.3.3-1.0.21

package/dist/js/materialize.js

@@ -1,5 +1,5 @@
 /*!
-* Materialize v2.3.3-1.0.20 (https://materializeweb.com)
+* Materialize v2.3.3-1.0.21 (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$w = {
+    const _defaults$x = {
         alignment: 'left',
         autoFocus: true,
         constrainWidth: true,
@@ -453,7 +453,7 @@ var M = (function (exports) {
             this._setupEventHandlers();
         }
         static get defaults() {
-            return _defaults$w;
+            return _defaults$x;
         }
         /**
          * Initializes instances of Dropdown.
@@ -904,7 +904,7 @@ var M = (function (exports) {
         };
     }
 
-    const _defaults$v = {
+    const _defaults$w = {
         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$v;
+            return _defaults$w;
         }
         /**
          * Initializes instances of Autocomplete.
@@ -1372,7 +1372,7 @@ var M = (function (exports) {
         }
     }
 
-    const _defaults$u = {
+    const _defaults$v = {
         dismissible: true
     };
     /** A persistent, contextual feedback banner. */
@@ -1386,7 +1386,7 @@ var M = (function (exports) {
             this._bindCloseButton();
         }
         static get defaults() {
-            return _defaults$u;
+            return _defaults$v;
         }
         static init(els, options = {}) {
             return super.init(els, options, Alert);
@@ -1426,6 +1426,122 @@ var M = (function (exports) {
         }
     }
 
+    const _defaults$u = {
+        draggable: true
+    };
+    /** A lightweight, dependency-free board for columns of draggable cards. */
+    class Kanban extends Component {
+        _draggedCard = null;
+        _dragSourceColumn = null;
+        _onDragStart = (event) => {
+            const card = event.target?.closest('.kanban-card');
+            if (!card || !this.options.draggable)
+                return;
+            this._draggedCard = card;
+            this._dragSourceColumn = card.closest('.kanban-column');
+            card.classList.add('is-dragging');
+            event.dataTransfer?.setData('text/plain', card.dataset.kanbanCard || '');
+            if (event.dataTransfer)
+                event.dataTransfer.effectAllowed = 'move';
+        };
+        _onDragOver = (event) => {
+            if (!this._draggedCard)
+                return;
+            const column = event.target?.closest('.kanban-column');
+            if (!column || !this.el.contains(column))
+                return;
+            event.preventDefault();
+            if (event.dataTransfer)
+                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');
+        };
+        _onDrop = (event) => {
+            if (!this._draggedCard)
+                return;
+            const column = event.target?.closest('.kanban-column');
+            if (!column || !this.el.contains(column))
+                return;
+            event.preventDefault();
+            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);
+            }
+            else {
+                body.appendChild(this._draggedCard);
+            }
+            this._clearDragState();
+            this._updateCounts();
+            if (source && source !== column)
+                this.options.onMove?.({ card: this._draggedCard, from: source, to: column });
+        };
+        _onDragEnd = () => this._clearDragState();
+        constructor(el, options) {
+            super(el, options, Kanban);
+            this.options = { ...Kanban.defaults, ...options };
+            this.el['M_Kanban'] = this;
+            this._prepareMarkup();
+            if (this.options.draggable)
+                this._bindEvents();
+        }
+        static get defaults() {
+            return _defaults$u;
+        }
+        static init(els, options = {}) {
+            return super.init(els, options, Kanban);
+        }
+        static getInstance(el) {
+            return el['M_Kanban'];
+        }
+        _prepareMarkup() {
+            this.el.setAttribute('role', 'region');
+            this.el.querySelectorAll('.kanban-column').forEach((column) => {
+                column.setAttribute('role', 'group');
+                const body = column.querySelector('.kanban-column-body');
+                if (body)
+                    body.setAttribute('role', 'list');
+                column.querySelectorAll('.kanban-card').forEach((card) => {
+                    card.setAttribute('role', 'listitem');
+                    card.setAttribute('tabindex', '0');
+                    if (this.options.draggable)
+                        card.draggable = true;
+                });
+            });
+            this._updateCounts();
+        }
+        _bindEvents() {
+            this.el.addEventListener('dragstart', this._onDragStart);
+            this.el.addEventListener('dragover', this._onDragOver);
+            this.el.addEventListener('drop', this._onDrop);
+            this.el.addEventListener('dragend', this._onDragEnd);
+        }
+        _clearDragState() {
+            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;
+        }
+        _updateCounts() {
+            this.el.querySelectorAll('.kanban-column').forEach((column) => {
+                const count = column.querySelector('.kanban-column-count');
+                const body = column.querySelector('.kanban-column-body');
+                if (count && body)
+                    count.textContent = String(body.querySelectorAll(':scope > .kanban-card').length);
+            });
+        }
+        destroy() {
+            this._clearDragState();
+            this.el.removeEventListener('dragstart', this._onDragStart);
+            this.el.removeEventListener('dragover', this._onDragOver);
+            this.el.removeEventListener('drop', this._onDrop);
+            this.el.removeEventListener('dragend', this._onDragEnd);
+            delete this.el['M_Kanban'];
+        }
+    }
+
     const _defaults$t = {
         direction: 'top',
         hoverEnabled: true,
@@ -9265,7 +9381,7 @@ var M = (function (exports) {
     }
 
     /* eslint-disable @typescript-eslint/no-unused-vars */
-    const version = '2.3.3-1.0.20';
+    const version = '2.3.3-1.0.21';
     /**
      * Convenience helper matching v1's `M.toast({...})` call, since Toast is a
      * class in v2 with no bare functional equivalent of its own.
@@ -9281,6 +9397,7 @@ var M = (function (exports) {
     function AutoInit(context = document.body, options) {
         const registry = {
             Alert: context.querySelectorAll('.alert:not(.no-autoinit)'),
+            Kanban: context.querySelectorAll('.kanban-board:not(.no-autoinit)'),
             Autocomplete: context.querySelectorAll('.autocomplete:not(.no-autoinit)'),
             Cards: context.querySelectorAll('.cards:not(.no-autoinit)'),
             Carousel: context.querySelectorAll('.carousel:not(.no-autoinit)'),
@@ -9314,6 +9431,7 @@ var M = (function (exports) {
         };
         Autocomplete.init(registry.Autocomplete, options?.Autocomplete ?? {});
         Alert.init(registry.Alert, options?.Alert ?? {});
+        Kanban.init(registry.Kanban, options?.Kanban ?? {});
         Cards.init(registry.Cards, options?.Cards ?? {});
         Carousel.init(registry.Carousel, options?.Carousel ?? {});
         Chips.init(registry.Chips, options?.Chips ?? {});
@@ -9369,6 +9487,7 @@ var M = (function (exports) {
     exports.FloatingActionButton = FloatingActionButton;
     exports.FormSelect = FormSelect;
     exports.Forms = Forms;
+    exports.Kanban = Kanban;
     exports.Materialbox = Materialbox;
     exports.Modal = Modal;
     exports.NumberInput = NumberInput;