kmaterialize 2.3.3-1.0.2 → 2.3.3-1.0.21

package/components/kanban/kanban.ts

@@ -0,0 +1,133 @@
+import { BaseOptions, Component, InitElements, MElement } from '../../src/component';
+
+export interface KanbanMoveDetail {
+  card: HTMLElement;
+  from: HTMLElement;
+  to: HTMLElement;
+}
+
+export interface KanbanOptions extends BaseOptions {
+  /** Enable native drag-and-drop interactions. */
+  draggable: boolean;
+  /** Called after a card changes column or order. */
+  onMove?: (detail: KanbanMoveDetail) => void;
+}
+
+const _defaults: KanbanOptions = {
+  draggable: true
+};
+
+/** A lightweight, dependency-free board for columns of draggable cards. */
+export class Kanban extends Component<KanbanOptions> {
+  private _draggedCard: HTMLElement | null = null;
+  private _dragSourceColumn: HTMLElement | null = null;
+
+  private _onDragStart = (event: DragEvent) => {
+    const card = (event.target as HTMLElement | null)?.closest<HTMLElement>('.kanban-card');
+    if (!card || !this.options.draggable) return;
+    this._draggedCard = card;
+    this._dragSourceColumn = card.closest<HTMLElement>('.kanban-column');
+    card.classList.add('is-dragging');
+    event.dataTransfer?.setData('text/plain', card.dataset.kanbanCard || '');
+    if (event.dataTransfer) event.dataTransfer.effectAllowed = 'move';
+  };
+
+  private _onDragOver = (event: DragEvent) => {
+    if (!this._draggedCard) return;
+    const column = (event.target as HTMLElement | null)?.closest<HTMLElement>('.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');
+  };
+
+  private _onDrop = (event: DragEvent) => {
+    if (!this._draggedCard) return;
+    const column = (event.target as HTMLElement | null)?.closest<HTMLElement>('.kanban-column');
+    if (!column || !this.el.contains(column)) return;
+    event.preventDefault();
+    const body = column.querySelector<HTMLElement>('.kanban-column-body') || column;
+    const targetCard = (event.target as HTMLElement | null)?.closest<HTMLElement>('.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 });
+  };
+
+  private _onDragEnd = () => this._clearDragState();
+
+  constructor(el: HTMLElement, options: Partial<KanbanOptions>) {
+    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(): KanbanOptions {
+    return _defaults;
+  }
+
+  static init(el: HTMLElement, options?: Partial<KanbanOptions>): Kanban;
+  static init(els: InitElements<MElement>, options?: Partial<KanbanOptions>): Kanban[];
+  static init(els: HTMLElement | InitElements<MElement>, options: Partial<KanbanOptions> = {}): Kanban | Kanban[] {
+    return super.init(els, options, Kanban);
+  }
+
+  static getInstance(el: HTMLElement): Kanban {
+    return el['M_Kanban'];
+  }
+
+  private _prepareMarkup() {
+    this.el.setAttribute('role', 'region');
+    this.el.querySelectorAll<HTMLElement>('.kanban-column').forEach((column) => {
+      column.setAttribute('role', 'group');
+      const body = column.querySelector<HTMLElement>('.kanban-column-body');
+      if (body) body.setAttribute('role', 'list');
+      column.querySelectorAll<HTMLElement>('.kanban-card').forEach((card) => {
+        card.setAttribute('role', 'listitem');
+        card.setAttribute('tabindex', '0');
+        if (this.options.draggable) card.draggable = true;
+      });
+    });
+    this._updateCounts();
+  }
+
+  private _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);
+  }
+
+  private _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;
+  }
+
+  private _updateCounts() {
+    this.el.querySelectorAll<HTMLElement>('.kanban-column').forEach((column) => {
+      const count = column.querySelector<HTMLElement>('.kanban-column-count');
+      const body = column.querySelector<HTMLElement>('.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'];
+  }
+}

package/components/list/_collection.scss

@@ -3,9 +3,13 @@
 .collection {
   padding-left: 0;
   list-style-type: none;
+  background-color: var(--md-sys-color-surface);
   margin: $element-top-margin 0 $element-bottom-margin 0;
   border: 1px solid var(--md-sys-color-outline-variant);
-  border-radius: 2px;
+  // @implement /Users/kzarshenas/Sites/RodeoFx/rodeo_toolkit_2/app/Front/style/scss/component_enhance.scss
+  // Matches the 12px corner radius used across cards, dropdowns and
+  // collapsibles instead of the near-square 2px default.
+  border-radius: 12px;
   overflow: hidden;
   position: relative;
 
@@ -89,7 +93,11 @@
 
   &.with-header {
     .collection-header {
-      background-color: transparent;
+      // @implement /Users/kzarshenas/Sites/RodeoFx/rodeo_toolkit_2/app/Front/style/scss/component_enhance.scss
+      // A tinted header reads as its own row instead of blending into the
+      // list; it also isn't text, so it shouldn't be selectable.
+      background-color: var(--md-sys-color-surface-variant);
+      user-select: none;
       border-bottom: 1px solid var(--md-sys-color-outline-variant);
       padding: 10px 20px;
     }

package/components/number-input/number-input.ts

@@ -0,0 +1,103 @@
+import type IMaskCtor from 'imask';
+import type { MaskedNumberOptions, InputMask } from 'imask';
+import { Component, BaseOptions, InitElements, MElement } from '../../src/component';
+import { loadPeer } from '../../src/peer-loader';
+
+export interface NumberInputOptions extends BaseOptions {
+  thousandsSeparator: string;
+  radix: string;
+  mapToRadix: string[];
+  min?: number;
+  max?: number;
+  scale?: number;
+}
+
+const _defaults: NumberInputOptions = {
+  thousandsSeparator: ' ',
+  radix: '.',
+  mapToRadix: [',']
+};
+
+// @implement /Users/kzarshenas/Sites/CrazyProject/CrazyPHP/src/Front/Library/Utility/Form/Number.ts
+// Masked/formatted numeric input via IMask (thousands separator, decimal
+// scale, min/max) - deliberately opts in on `type="text" data-type="number"`
+// rather than `type="number"`, so IMask can format the display value
+// (thousands separators etc.) that a native number input wouldn't allow.
+//
+// IMask is an optional peerDependency, loaded on demand via peer-loader -
+// see that file for the bundler/no-bundler resolution strategy.
+export class NumberInput extends Component<NumberInputOptions> {
+  declare el: HTMLInputElement;
+  mask: InputMask<MaskedNumberOptions> | undefined;
+  ready: Promise<void>;
+
+  constructor(el: HTMLInputElement, options: Partial<NumberInputOptions>) {
+    super(el, options, NumberInput);
+    (this.el as any).M_NumberInput = this;
+
+    this.options = {
+      ...NumberInput.defaults,
+      ...options
+    };
+
+    this.ready = this._setup();
+  }
+
+  static get defaults(): NumberInputOptions {
+    return _defaults;
+  }
+
+  static init(el: HTMLInputElement, options?: Partial<NumberInputOptions>): NumberInput;
+  static init(
+    els: InitElements<HTMLInputElement | MElement>,
+    options?: Partial<NumberInputOptions>
+  ): NumberInput[];
+  static init(
+    els: HTMLInputElement | InitElements<HTMLInputElement | MElement>,
+    options: Partial<NumberInputOptions> = {}
+  ): NumberInput | NumberInput[] {
+    return super.init(els, options, NumberInput);
+  }
+
+  static getInstance(el: HTMLInputElement): NumberInput {
+    return (el as any).M_NumberInput;
+  }
+
+  destroy() {
+    this.mask?.destroy();
+    (this.el as any).M_NumberInput = undefined;
+  }
+
+  async _setup(): Promise<void> {
+    const IMask = await loadPeer<typeof IMaskCtor>(
+      {
+        specifier: 'imask',
+        globalName: 'IMask',
+        feature: 'Number input (IMask) enhancement',
+        cdnHint: '<script src="path/to/imask.min.js"></script> (self-hosted - copy from node_modules/imask/dist/imask.min.js, or a CDN of your choice)'
+      },
+      () => import('imask')
+    );
+
+    const maskOptions: MaskedNumberOptions = {
+      mask: Number,
+      skipInvalid: true,
+      thousandsSeparator: this.options.thousandsSeparator,
+      radix: this.options.radix,
+      mapToRadix: this.options.mapToRadix,
+      autofix: true
+    };
+
+    const max = this.options.max ?? (this.el.hasAttribute('max') ? Number(this.el.getAttribute('max')) : undefined);
+    if (max !== undefined && !Number.isNaN(max)) maskOptions.max = max;
+
+    const min = this.options.min ?? (this.el.hasAttribute('min') ? Number(this.el.getAttribute('min')) : undefined);
+    if (min !== undefined && !Number.isNaN(min)) maskOptions.min = min;
+
+    const step = this.el.getAttribute('step');
+    const scale = this.options.scale ?? (step?.includes('.') ? step.split('.').at(-1)?.length : undefined);
+    if (scale !== undefined) maskOptions.scale = scale;
+
+    this.mask = IMask(this.el, maskOptions) as InputMask<MaskedNumberOptions>;
+  }
+}

package/components/password-input/password-input.ts

@@ -0,0 +1,72 @@
+import { Component, BaseOptions, InitElements, MElement } from '../../src/component';
+
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface PasswordInputOptions extends BaseOptions {}
+
+const _defaults: PasswordInputOptions = {};
+
+// @implement /Users/kzarshenas/Sites/CrazyProject/CrazyPHP/src/Front/Library/Utility/Form/Password.ts
+// Show/hide toggle for a password input - no third-party dependency, just
+// Materialize's own .prefix/.suffix icon-slot convention (see
+// components/textfield/_input-fields.scss), so unlike the other new form
+// enhancements in this batch this one needs no peer-loader/dynamic import.
+export class PasswordInput extends Component<PasswordInputOptions> {
+  declare el: HTMLInputElement;
+  private _suffixEl: HTMLElement | null;
+
+  constructor(el: HTMLInputElement, options: Partial<PasswordInputOptions>) {
+    super(el, options, PasswordInput);
+    (this.el as any).M_PasswordInput = this;
+
+    this.options = {
+      ...PasswordInput.defaults,
+      ...options
+    };
+
+    this._suffixEl = this.el.parentElement?.querySelector<HTMLElement>('[data-password-toggle-icon]') ?? null;
+    if (!this.el.dataset.passwordVisible) this.el.dataset.passwordVisible = '0';
+    this._setupEventHandlers();
+  }
+
+  static get defaults(): PasswordInputOptions {
+    return _defaults;
+  }
+
+  static init(el: HTMLInputElement, options?: Partial<PasswordInputOptions>): PasswordInput;
+  static init(
+    els: InitElements<HTMLInputElement | MElement>,
+    options?: Partial<PasswordInputOptions>
+  ): PasswordInput[];
+  static init(
+    els: HTMLInputElement | InitElements<HTMLInputElement | MElement>,
+    options: Partial<PasswordInputOptions> = {}
+  ): PasswordInput | PasswordInput[] {
+    return super.init(els, options, PasswordInput);
+  }
+
+  static getInstance(el: HTMLInputElement): PasswordInput {
+    return (el as any).M_PasswordInput;
+  }
+
+  destroy() {
+    this._removeEventHandlers();
+    (this.el as any).M_PasswordInput = undefined;
+  }
+
+  _setupEventHandlers() {
+    this._suffixEl?.addEventListener('click', this._handleToggleClick);
+  }
+
+  _removeEventHandlers() {
+    this._suffixEl?.removeEventListener('click', this._handleToggleClick);
+  }
+
+  _handleToggleClick = () => {
+    const visible = this.el.dataset.passwordVisible === '1';
+    this.el.type = visible ? 'password' : 'text';
+    this.el.dataset.passwordVisible = visible ? '0' : '1';
+
+    const iconEl = this._suffixEl?.querySelector('i');
+    if (iconEl) iconEl.textContent = visible ? 'visibility' : 'visibility_off';
+  };
+}

package/components/slider/_range.scss

@@ -114,7 +114,11 @@ input[type=range]::-moz-focus-inner {
 
 input[type=range]::-moz-range-thumb {
   @include range-thumb;
-  margin-top: -5px;
+  // No margin-top here, unlike the -webkit-slider-thumb rule above:
+  // Firefox already vertically centers ::-moz-range-thumb on the track
+  // by default. Copying webkit's -5px correction (needed there because
+  // Chrome/Safari top-align the thumb by default) over-corrects in
+  // Firefox, pushing an already-centered thumb noticeably too high.
 }
 
 // hide the outline behind the border

package/components/switch/_switches.scss

@@ -23,6 +23,11 @@
   opacity: 0;
   width: 0;
   height: 0;
+  // @implement /Users/kzarshenas/Sites/RodeoFx/rodeo_toolkit_2/app/Front/style/scss/component_enhance.scss
+  // Without this, an inherited padding can push the (invisible, 0x0)
+  // checkbox out of alignment with the lever it's meant to sit under.
+  box-sizing: border-box;
+  padding: 0 !important;
 
   // CHECKED
   // Track

package/components/textfield/_input-fields.scss

@@ -50,10 +50,10 @@ textarea.materialize-textarea {
 
   // Default
 
-  input, textarea {
+  input:not([type=checkbox]):not([type=radio]), textarea {
     box-sizing: border-box; /* https://stackoverflow.com/questions/1377719/padding-within-inputs-breaks-width-100*/
     padding: 0 16px;
-    padding-top: 20px;
+    // padding-top: 20px;
     //background-color: transparent; //background-color: var(--md-sys-color-surface);
     border: none; // reset
     border-radius: 4px; // md.sys.shape.corner.extra-small.top
@@ -180,7 +180,7 @@ textarea.materialize-textarea {
 
   &.outlined {
 
-    input, textarea {
+    input:not([type=checkbox]):not([type=radio]), textarea {
       padding-top: 0;
       background-color: transparent; //(--md-sys-color-background);
       border: 1px solid var(--md-sys-color-on-surface-variant);
@@ -225,7 +225,7 @@ textarea.materialize-textarea {
     // border/label/text below should pick up the error color.
     background-color: transparent;
 
-    input, textarea {
+    input:not([type=checkbox]):not([type=radio]), textarea {
       border-color: var(--md-sys-color-error);
     }
     input:focus:not([readonly]), textarea:focus:not([readonly]) {

package/components/textfield/_select.scss

@@ -89,6 +89,60 @@ select:disabled {
   }
 }
 
+// Keep enhanced FormSelect labels in sync with TomSelectField.
+// FormSelect moves the original label inside its generated .select-wrapper.
+.input-field:has(> .select-wrapper) {
+  margin-top: 16px;
+}
+
+// State 1: a genuinely empty select with no visible placeholder.
+.input-field > .select-wrapper > label {
+  position: absolute !important;
+  top: 16px !important;
+  left: 16px !important;
+  z-index: 2;
+  margin: 0 !important;
+  padding: 0 !important;
+  color: var(--md-sys-color-on-surface-variant);
+  font-size: 16px !important;
+  line-height: 24px !important;
+  text-align: left !important;
+  background: transparent;
+  transform: none !important;
+  transform-origin: top left !important;
+  transition: top 0.2s ease-out, transform 0.2s ease-out, color 0.2s ease-out;
+}
+
+// State 2: the generated input displays a placeholder/selection, the native
+// select declares a placeholder, or the component currently has focus.
+.input-field > .select-wrapper:has(> input.select-dropdown:not(:placeholder-shown)) > label,
+.input-field > .select-wrapper:has(.hide-select > select[placeholder]:not([placeholder=""])) > label,
+.input-field > .select-wrapper:focus-within > label {
+  position: absolute !important;
+  top: -12px !important;
+  left: 16px !important;
+  padding: 0 4px !important;
+  font-size: 16px !important;
+  background: var(--md-sys-color-surface);
+  transform: scale(0.75) !important;
+}
+
+.input-field > .select-wrapper:focus-within > label {
+  color: var(--input-color);
+}
+
+// Outlined FormSelect uses the same state logic with the label in its notch.
+.input-field.outlined > .select-wrapper:has(> input.select-dropdown:not(:placeholder-shown)) > label,
+.input-field.outlined > .select-wrapper:has(.hide-select > select[placeholder]:not([placeholder=""])) > label,
+.input-field.outlined > .select-wrapper:focus-within > label {
+  top: -8px !important;
+  left: 12px !important;
+  padding: 0 4px !important;
+  line-height: 16px !important;
+  background: var(--md-sys-color-surface);
+  transform: scale(0.75) !important;
+}
+
 // Optgroup styles
 .select-dropdown li.optgroup {
   border-top: 1px solid rgba(0, 0, 0, 0.04);