kmaterialize 2.3.3-1.0.13 → 2.3.3-1.0.16

package/components/air-datepicker/_air-datepicker.scss

@@ -0,0 +1,137 @@
+// @implement /Users/kzarshenas/Sites/RodeoFx/rodeo_toolkit_2/app/Front/style/scss/enhancement/airdatepicker_materializecss.scss
+// Remaps air-datepicker's own --adp-* custom properties onto MD3 tokens so
+// its calendar popup auto-themes with the rest of kmaterialize, instead of
+// theming the popup's own markup directly. Requires the consumer to
+// separately import air-datepicker's own base CSS (`air-datepicker/air-datepicker.css`) -
+// kmaterialize can't reach into an optional peer's package at build time
+// without turning it into a hard dependency, so this partial only overrides
+// the custom properties that stylesheet defines.
+//
+// This is the richer Rodeo toolkit variant of the port (rounded corners,
+// circular day cells, weekend/other-month readability fixes, a two-line
+// nav title) rather than CrazyPHP's plainer original.
+input[data-date-picker='air-datepicker'][readonly] {
+  caret-color: transparent;
+  cursor: pointer;
+}
+
+.input-field:has(input[data-date-picker='air-datepicker']) {
+  > label,
+  .prefix,
+  .suffix {
+    z-index: 1;
+    cursor: pointer;
+  }
+}
+
+.air-datepicker {
+  --adp-z-index: 100001; // above modals/SweetAlert-style overlays
+  --adp-transition-duration: 0.11s;
+
+  --adp-font-family: 'Roboto', sans-serif;
+  --adp-background-color: var(--md-sys-color-surface);
+  --adp-color: var(--md-sys-color-on-surface);
+  --adp-color-secondary: var(--md-sys-color-on-surface-variant);
+  --adp-border-color: var(--md-sys-color-outline-variant);
+  --adp-border-color-inner: var(--md-sys-color-outline-variant);
+
+  --adp-color-current-date: var(--md-sys-color-primary);
+
+  --adp-background-color-hover: var(--md-sys-color-surface-variant);
+  --adp-background-color-active: var(--md-sys-color-surface-variant);
+
+  --adp-cell-background-color-selected: var(--md-sys-color-primary);
+  --adp-cell-background-color-selected-hover: var(--md-sys-color-primary-container);
+  --adp-cell-border-color-in-range: var(--md-sys-color-primary);
+  --adp-cell-background-color-in-range: var(--md-sys-color-primary-container);
+  --adp-cell-background-color-in-range-hover: var(--md-sys-color-primary-container);
+  --adp-color-other-month: var(--md-sys-color-outline);
+  --adp-color-other-month-hover: var(--md-sys-color-on-surface-variant);
+
+  --adp-btn-color: var(--md-sys-color-primary);
+  --adp-btn-color-hover: var(--md-sys-color-on-primary);
+  --adp-btn-background-color-hover: var(--md-sys-color-primary-container);
+  --adp-btn-background-color-active: var(--md-sys-color-primary-container);
+
+  --adp-time-track-color: var(--md-sys-color-outline-variant);
+  --adp-time-track-color-hover: var(--md-sys-color-primary);
+  --adp-time-day-period-color: var(--md-sys-color-on-surface-variant);
+
+  // Shape - rounded popup, circular day cells, generous padding, matching
+  // the rest of kmaterialize's MD3 shape language (pill toolbars, rounded
+  // cards) rather than air-datepicker's own square default.
+  --adp-border-radius: 24px;
+  --adp-cell-border-radius: 50%;
+  --adp-padding: 16px;
+
+  --adp-color-disabled: var(--md-sys-color-outline);
+  --adp-color-disabled-in-range: var(--md-sys-color-on-surface-variant);
+
+  .air-datepicker-nav {
+    height: auto;
+    min-height: 32px;
+    padding: 0px;
+    box-shadow: initial;
+    background-color: inherit;
+    color: var(--adp-nav-color-secondary) !important;
+
+    .air-datepicker-nav--title {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      font-size: 14px;
+      line-height: 1.25;
+
+      i {
+        font-size: 14px;
+      }
+
+      // A second line under the month/year, for context (e.g. what range
+      // is about to apply) - opt-in, air-datepicker doesn't emit this
+      // itself, a consumer's own `dateFormatter` can inject it.
+      small {
+        font-size: 10.5px;
+        font-weight: 500;
+        letter-spacing: 0.03em;
+        font-variant-numeric: tabular-nums;
+        color: var(--adp-color-secondary);
+      }
+    }
+
+    // Material icons sit larger than the arrows they replace.
+    .air-datepicker-nav--action i {
+      font-size: 18px;
+    }
+  }
+
+  .air-datepicker-cell {
+    font-variant-numeric: tabular-nums;
+  }
+
+  // air-datepicker tags weekends and ships no style for them.
+  .air-datepicker-cell.-day-.-weekend- {
+    color: var(--md-sys-color-outline);
+  }
+
+  .air-datepicker-body--day-name.-weekend- {
+    opacity: 0.7;
+  }
+
+  // Inside a selected range a weekend has to stay readable.
+  .air-datepicker-cell.-day-.-weekend-.-in-range-,
+  .air-datepicker-cell.-day-.-weekend-.-selected- {
+    color: inherit;
+  }
+
+  // The view holds still when a greyed (other-month) day is picked, so the
+  // selection can land off-month - without this it reads as nothing
+  // selected.
+  .air-datepicker-cell.-day-.-other-month-.-selected- {
+    color: var(--md-sys-color-on-primary);
+    background: var(--md-sys-color-primary);
+  }
+
+  i.air-datepicker--pointer {
+    display: none;
+  }
+}

package/components/air-datepicker/air-datepicker.ts

@@ -0,0 +1,192 @@
+import type AirDatepickerCtor from 'air-datepicker';
+import type { AirDatepickerOptions } from 'air-datepicker';
+import { Component, BaseOptions, InitElements, MElement } from '../../src/component';
+import { loadPeer } from '../../src/peer-loader';
+
+export interface AirDatepickerFieldOptions extends BaseOptions {
+  locale?: unknown;
+}
+
+const _defaults: AirDatepickerFieldOptions = {};
+let activeAirDatepickerField: AirDatepickerField | undefined;
+
+// @implement /Users/kzarshenas/Sites/CrazyProject/CrazyPHP/src/Front/Library/Utility/Form/Date.ts
+// Enhances `<input type="text" data-type="date" data-date-picker="air-datepicker">`
+// with the air-datepicker calendar/range picker - deliberately separate from
+// kmaterialize's own native `components/datepicker/` (a different, already
+// existing class-based component); this one is opted into per-input via the
+// `data-date-picker` attribute so it never collides with `.datepicker`
+// elements. The `multiple` attribute switches the picker into range mode,
+// `data-date-format`/`data-date-lang` (only "fr-FR" ported so far) mirror
+// CrazyPHP's own dataset convention.
+//
+// air-datepicker is an optional peerDependency, loaded on demand via
+// peer-loader. Its own base stylesheet (air-datepicker/air-datepicker.css)
+// must be imported separately by the consumer - see the docs page.
+export class AirDatepickerField extends Component<AirDatepickerFieldOptions> {
+  declare el: HTMLInputElement;
+  picker: AirDatepickerCtor | undefined;
+  ready: Promise<void>;
+  private _triggers: HTMLElement[];
+  private _handleOutsideClick = (e: MouseEvent) => {
+    const calendarEl = document.querySelector('.air-datepicker');
+    const clickedTrigger = this._triggers.some(trigger => trigger.contains(e.target as Node));
+    if (
+      calendarEl instanceof HTMLElement &&
+      !calendarEl.contains(e.target as Node) &&
+      !this.el.contains(e.target as Node) &&
+      !clickedTrigger
+    ) {
+      this.picker?.hide();
+    }
+  };
+
+  constructor(el: HTMLInputElement, options: Partial<AirDatepickerFieldOptions>) {
+    super(el, options, AirDatepickerField);
+    (this.el as any).M_AirDatepickerField = this;
+
+    this.options = {
+      ...AirDatepickerField.defaults,
+      ...options
+    };
+
+    const labels = Array.from(document.querySelectorAll('label')).filter(
+      label => label.htmlFor === this.el.id
+    );
+    const icons = Array.from(
+      this.el.parentElement?.querySelectorAll<HTMLElement>('.prefix, .suffix') ?? []
+    );
+    this._triggers = [...labels, ...icons];
+    this._triggers.forEach(trigger => trigger.addEventListener('click', this._handleTriggerClick));
+    this.ready = this._setup();
+  }
+
+  static get defaults(): AirDatepickerFieldOptions {
+    return _defaults;
+  }
+
+  static init(el: HTMLInputElement, options?: Partial<AirDatepickerFieldOptions>): AirDatepickerField;
+  static init(
+    els: InitElements<HTMLInputElement | MElement>,
+    options?: Partial<AirDatepickerFieldOptions>
+  ): AirDatepickerField[];
+  static init(
+    els: HTMLInputElement | InitElements<HTMLInputElement | MElement>,
+    options: Partial<AirDatepickerFieldOptions> = {}
+  ): AirDatepickerField | AirDatepickerField[] {
+    return super.init(els, options, AirDatepickerField);
+  }
+
+  static getInstance(el: HTMLInputElement): AirDatepickerField {
+    return (el as any).M_AirDatepickerField;
+  }
+
+  destroy() {
+    document.removeEventListener('click', this._handleOutsideClick);
+    this._triggers.forEach(trigger => trigger.removeEventListener('click', this._handleTriggerClick));
+    this.picker?.destroy();
+    if (activeAirDatepickerField === this) activeAirDatepickerField = undefined;
+    (this.el as any).M_AirDatepickerField = undefined;
+  }
+
+  private _handleTriggerClick = (event: MouseEvent) => {
+    event.preventDefault();
+    event.stopPropagation();
+    void this.ready.then(() => this.picker?.show());
+  };
+
+  async _setup(): Promise<void> {
+    const AirDatepicker = await loadPeer<typeof AirDatepickerCtor>(
+      {
+        specifier: 'air-datepicker',
+        globalName: 'AirDatepicker',
+        feature: 'Date input (air-datepicker) enhancement',
+        cdnHint:
+          '<link rel="stylesheet" href="path/to/air-datepicker.css">\n' +
+          '    <script src="path/to/air-datepicker.js"></script>\n' +
+          '    (self-hosted - copy from node_modules/air-datepicker/, or a CDN of your choice)'
+      },
+      () => import('air-datepicker')
+    );
+
+    const dataset = this.el.dataset;
+    const builtInLocale = dataset.dateLang === 'fr-FR'
+      ? (await import('air-datepicker/locale/fr')).default
+      : (await import('air-datepicker/locale/en')).default;
+    const pickerOptions: AirDatepickerOptions = {
+      dateFormat: dataset.dateFormat || 'yyyy-MM-dd',
+      autoClose: dataset.dateAutoClose !== 'false',
+      locale: (this.options.locale ?? builtInLocale) as AirDatepickerOptions['locale'],
+      onShow: isAnimationComplete => {
+        if (isAnimationComplete) return;
+        if (activeAirDatepickerField && activeAirDatepickerField !== this) {
+          activeAirDatepickerField.picker?.hide();
+        }
+        activeAirDatepickerField = this;
+      },
+      onHide: isAnimationComplete => {
+        if (isAnimationComplete && activeAirDatepickerField === this) {
+          activeAirDatepickerField = undefined;
+        }
+      }
+    };
+
+    let multiple = false;
+    if (this.el.multiple || dataset.dateRange === 'true') {
+      pickerOptions.range = true;
+      pickerOptions.multipleDatesSeparator = ' - ';
+      multiple = true;
+    }
+
+    const initialValue = this.el.getAttribute('value')?.trim();
+    if (initialValue) {
+      pickerOptions.selectedDates = multiple
+        ? initialValue.split(' - ').map(value => value.trim())
+        : [initialValue];
+    }
+
+    if (dataset.dateTimepicker === 'true') {
+      pickerOptions.timepicker = true;
+      if (dataset.dateTimeFormat) pickerOptions.timeFormat = dataset.dateTimeFormat;
+    }
+
+    const supportedViews = ['days', 'months', 'years'];
+    if (supportedViews.includes(dataset.dateView ?? '')) {
+      pickerOptions.view = dataset.dateView as AirDatepickerOptions['view'];
+    }
+    if (supportedViews.includes(dataset.dateMinView ?? '')) {
+      pickerOptions.minView = dataset.dateMinView as AirDatepickerOptions['minView'];
+    }
+
+    if (dataset.dateMobile === 'true') pickerOptions.isMobile = true;
+    if (dataset.datePosition) {
+      pickerOptions.position = dataset.datePosition as AirDatepickerOptions['position'];
+    }
+    if (dataset.dateButtons) {
+      const supportedButtons = ['today', 'clear'];
+      pickerOptions.buttons = dataset.dateButtons
+        .split(',')
+        .map(button => button.trim())
+        .filter(button => supportedButtons.includes(button)) as AirDatepickerOptions['buttons'];
+    }
+
+    if (this.el.hasAttribute('min') && this.el.getAttribute('min')) {
+      pickerOptions.minDate = new Date(this.el.getAttribute('min') as string);
+    }
+    if (this.el.hasAttribute('max') && this.el.getAttribute('max')) {
+      pickerOptions.maxDate = new Date(this.el.getAttribute('max') as string);
+    }
+    if (!this.el.required && !pickerOptions.buttons) {
+      pickerOptions.buttons = ['clear'];
+    }
+
+    pickerOptions.onSelect = ({ date }: any) => {
+      if (multiple && Array.isArray(date) && date.length === 1) return;
+      this.el.dispatchEvent(new Event('input', { bubbles: true }));
+      this.el.dispatchEvent(new Event('change', { bubbles: true }));
+    };
+
+    this.picker = new AirDatepicker(this.el, pickerOptions);
+    document.addEventListener('click', this._handleOutsideClick);
+  }
+}

package/components/appbar/appbar.css

@@ -142,10 +142,35 @@
 }
 
 .navbar .brand-logo.center {
+  position: absolute;
   left: 50%;
   transform: translateX(-50%);
 }
 
+/* Collision-safe centered app bar: the left link region and the generated
+   right spacer share the available width, keeping the logo truly centered
+   without taking it out of the flex layout. */
+.navbar.appbar-bordered .nav-wrapper.nav-wrapper-centered::after {
+  content: '';
+  order: 3;
+  flex: 1 1 0;
+  min-width: 0;
+}
+
+.navbar.appbar-bordered .nav-wrapper.nav-wrapper-centered > ul {
+  order: 1;
+  flex: 1 1 0;
+  min-width: 0;
+}
+
+.navbar.appbar-bordered .nav-wrapper.nav-wrapper-centered > .brand-logo.center {
+  position: static;
+  order: 2;
+  flex: 0 0 auto;
+  left: auto;
+  transform: none;
+}
+
 .navbar .brand-logo.right {
   right: 0.5rem;
   padding: 0;
@@ -168,11 +193,188 @@
   margin-right: 15px;
 }
 
+/* Structured MD3 app-bar content. These hooks keep branded demos and app
+   shells from falling back to bare, loosely spaced anchor elements. */
+.navbar.appbar-bordered {
+  overflow: hidden;
+  background: var(--md-sys-color-surface-variant);
+  border: 1px solid var(--md-sys-color-outline-variant);
+  border-radius: 16px;
+  box-shadow: 0 1px 2px color-mix(in srgb, var(--md-sys-color-shadow) 18%, transparent);
+}
+
+/* Extended app bars may contain tabs and a halfway FAB. Keep the rounded
+   surface on its children, but let the FAB extend below the bar. */
+.navbar.appbar-bordered.nav-extended {
+  overflow: visible;
+}
+
+.navbar.appbar-bordered.nav-extended .nav-wrapper {
+  border-radius: 15px 15px 0 0;
+}
+
+.navbar.appbar-bordered.nav-extended .nav-content {
+  color: var(--md-sys-color-on-surface);
+  background: var(--md-sys-color-surface-variant);
+  border-radius: 0 0 15px 15px;
+}
+
+.navbar.appbar-bordered .nav-wrapper {
+  gap: 12px;
+  padding-inline: 12px;
+  background: var(--md-sys-color-surface-variant);
+}
+
+.navbar .brand-logo .brand-logo-image {
+  box-sizing: border-box;
+  width: 40px;
+  height: 40px;
+  margin-right: 10px;
+  padding: 8px;
+  object-fit: contain;
+  background: var(--md-sys-color-primary-container);
+  border-radius: 12px;
+}
+
+.navbar .nav-separator {
+  flex: 0 0 1px;
+  width: 1px;
+  height: 32px;
+  margin-inline: 4px;
+  background: var(--md-sys-color-outline-variant);
+}
+
+.navbar .nav-context {
+  color: var(--md-sys-color-on-surface-variant);
+  font-size: 14px;
+  white-space: nowrap;
+}
+
+.navbar ul.nav-actions:not(.dropdown-content) {
+  gap: 8px;
+}
+
+.navbar.appbar-bordered ul:not(.dropdown-content):not(.nav-actions):not(.tabs) > li > a:not(.btn):not(.btn-floating) {
+  box-sizing: border-box;
+  height: 40px;
+  padding-inline: 12px;
+  line-height: 40px;
+  border-radius: 20px;
+}
+
+.navbar.appbar-bordered ul:not(.dropdown-content):not(.nav-actions):not(.tabs) > li > a:not(.btn):not(.btn-floating):hover {
+  background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
+}
+
+.navbar.appbar-bordered ul:not(.dropdown-content):not(.nav-actions):not(.tabs) > li.active > a:not(.btn):not(.btn-floating) {
+  color: var(--md-sys-color-on-primary-container);
+  background: var(--md-sys-color-primary-container);
+}
+
+/* Text links use the same centred row as the app bar. The global navbar icon
+   rule intentionally sizes standalone icons to the full bar; undo that for
+   icons embedded beside link text. */
+.navbar.appbar-bordered ul:not(.dropdown-content):not(.tabs) > li > a:not(.btn):not(.btn-floating):has(> .material-icons.left),
+.navbar.appbar-bordered ul:not(.dropdown-content):not(.tabs) > li > a:not(.btn):not(.btn-floating):has(> .material-icons.right),
+.navbar.appbar-bordered .dropdown-trigger:has(> .material-icons) {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 40px;
+  font-size: 16px;
+  line-height: 1;
+}
+
+.navbar.appbar-bordered ul:not(.dropdown-content):not(.tabs) > li > a > .material-icons:is(.left, .right) {
+  width: 24px;
+  height: 24px;
+  margin: 0;
+  line-height: 24px;
+}
+
+.navbar.appbar-bordered ul:not(.dropdown-content):not(.tabs) > li > a > .material-icons.right {
+  order: 1;
+}
+
+/* Tabs retain their component geometry and click target instead of inheriting
+   navigation-pill spacing. */
+.navbar.appbar-bordered .tabs {
+  gap: 0;
+  background: transparent;
+}
+
+.navbar.appbar-bordered .tabs .tab > a {
+  height: 48px;
+  min-height: 48px;
+  padding-inline: 24px;
+  line-height: 48px;
+  border-radius: 0;
+}
+
+/* Buttons must remain legible and vertically centred in the constrained app
+   bar row, including legacy examples using btn-large. */
+.navbar.appbar-bordered ul:not(.dropdown-content) > li > :is(.btn, .btn-large) {
+  box-sizing: border-box;
+  max-height: 48px;
+  margin: 0;
+  color: var(--md-sys-color-on-primary);
+  white-space: nowrap;
+}
+
+.navbar.appbar-bordered ul:not(.dropdown-content) > li > :is(.btn, .btn-large) > .material-icons {
+  width: 20px;
+  height: 20px;
+  margin-left: 8px;
+  line-height: 20px;
+}
+
+.navbar.appbar-bordered ul:not(.dropdown-content) > li > a:has(> .material-icons:only-child) {
+  display: grid;
+  place-items: center;
+  width: 40px;
+  padding: 0;
+}
+
+.navbar.appbar-bordered ul:not(.dropdown-content) > li > a:has(> .material-icons:only-child) > .material-icons {
+  width: 24px;
+  height: 24px;
+  line-height: 24px;
+  text-align: center;
+}
+
+.navbar ul.nav-actions:not(.dropdown-content) > li > :is(.btn, .btn-floating) {
+  margin: 0;
+}
+
+.navbar .nav-actions .btn-floating {
+  display: inline-grid;
+  place-items: center;
+  width: 40px;
+  height: 40px;
+  padding: 0;
+  border-radius: 50%;
+  box-shadow: none;
+}
+
+.navbar .nav-actions .btn-floating > .material-icons {
+  display: block;
+  width: 24px;
+  height: 24px;
+  line-height: 24px;
+  text-align: center;
+}
+
+.navbar .nav-actions .btn > .material-icons {
+  height: 16px;
+  line-height: 16px;
+}
+
 /* Title */
 .navbar .nav-title {
   display: inline-block;
+  color: var(--md-sys-color-on-surface);
   font-size: 32px;
-  padding: 28px 0;
+  padding: 20px 24px 28px;
 }
 
 /* Navbar Search Form */
@@ -235,6 +437,7 @@
   }
 
   .nav,
+  .navbar,
   .navbar .nav-wrapper i,
   nav a.sidenav-trigger,
   .navbar a.sidenav-trigger i {

package/components/button/_buttons.scss

@@ -51,7 +51,10 @@
 
 .btn.icon-left i, .btn.icon-right i {
   position: absolute;
+  top: 50%;
   font-size: var(--btn-font-size-icon);
+  line-height: 1;
+  transform: translateY(-50%);
 }
 
 .btn.icon-left i {