@mmlogic/components 0.5.5 → 0.5.7

package/dist/mosterdcomponents/validation-CjjTt66G.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"validation-CjjTt66G.js","sources":["src/utils/validation.ts"],"sourcesContent":["import { ClientLayoutItemFieldDataType } from '../types';\n\nexport function validateRequired(value: unknown): boolean {\n  if (value === null || value === undefined) return false;\n  if (typeof value === 'string') return value.trim().length > 0;\n  if (Array.isArray(value)) return value.length > 0;\n  if (typeof value === 'object') {\n    // HyperlinkValue check\n    const hv = value as { href?: unknown };\n    if ('href' in hv) return typeof hv.href === 'string' && hv.href.trim().length > 0;\n    // CurrencyValue check\n    const cv = value as { amount?: unknown };\n    if ('amount' in cv) return cv.amount !== null && cv.amount !== undefined && cv.amount !== '';\n  }\n  return true;\n}\n\nexport function validateEmail(value: string): boolean {\n  if (!value) return true;\n  return /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/.test(value);\n}\n\nexport function validateUrl(value: string): boolean {\n  if (!value) return true;\n  try {\n    const url = new URL(value);\n    return url.protocol === 'http:' || url.protocol === 'https:';\n  } catch {\n    return false;\n  }\n}\n\nexport function validateNumber(value: unknown, dataType: ClientLayoutItemFieldDataType): boolean {\n  if (value === null || value === undefined || value === '') return true;\n  const num = Number(value);\n  if (isNaN(num)) return false;\n  if (dataType === ClientLayoutItemFieldDataType.INTEGER) {\n    return Number.isInteger(num);\n  }\n  if (dataType === ClientLayoutItemFieldDataType.PERCENTAGE) {\n    return num >= 0 && num <= 100;\n  }\n  return true;\n}\n"],"names":[],"mappings":";;;AAEM,SAAU,gBAAgB,CAAC,KAAc,EAAA;AAC7C,IAAA,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,SAAS;AAAE,QAAA,OAAO,KAAK;IACvD,IAAI,OAAO,KAAK,KAAK,QAAQ;QAAE,OAAO,KAAK,CAAC,IAAI,EAAE,CAAC,MAAM,GAAG,CAAC;AAC7D,IAAA,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC;AAAE,QAAA,OAAO,KAAK,CAAC,MAAM,GAAG,CAAC;AACjD,IAAA,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;;QAE7B,MAAM,EAAE,GAAG,KAA2B;QACtC,IAAI,MAAM,IAAI,EAAE;AAAE,YAAA,OAAO,OAAO,EAAE,CAAC,IAAI,KAAK,QAAQ,IAAI,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,MAAM,GAAG,CAAC;;QAEjF,MAAM,EAAE,GAAG,KAA6B;QACxC,IAAI,QAAQ,IAAI,EAAE;AAAE,YAAA,OAAO,EAAE,CAAC,MAAM,KAAK,IAAI,IAAI,EAAE,CAAC,MAAM,KAAK,SAAS,IAAI,EAAE,CAAC,MAAM,KAAK,EAAE;;AAE9F,IAAA,OAAO,IAAI;AACb;AAEM,SAAU,aAAa,CAAC,KAAa,EAAA;AACzC,IAAA,IAAI,CAAC,KAAK;AAAE,QAAA,OAAO,IAAI;AACvB,IAAA,OAAO,4BAA4B,CAAC,IAAI,CAAC,KAAK,CAAC;AACjD;AAEM,SAAU,WAAW,CAAC,KAAa,EAAA;AACvC,IAAA,IAAI,CAAC,KAAK;AAAE,QAAA,OAAO,IAAI;AACvB,IAAA,IAAI;AACF,QAAA,MAAM,GAAG,GAAG,IAAI,GAAG,CAAC,KAAK,CAAC;QAC1B,OAAO,GAAG,CAAC,QAAQ,KAAK,OAAO,IAAI,GAAG,CAAC,QAAQ,KAAK,QAAQ;;IAC5D,OAAA,EAAA,EAAM;AACN,QAAA,OAAO,KAAK;;AAEhB;AAEM,SAAU,cAAc,CAAC,KAAc,EAAE,QAAuC,EAAA;IACpF,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,EAAE;AAAE,QAAA,OAAO,IAAI;AACtE,IAAA,MAAM,GAAG,GAAG,MAAM,CAAC,KAAK,CAAC;IACzB,IAAI,KAAK,CAAC,GAAG,CAAC;AAAE,QAAA,OAAO,KAAK;AAC5B,IAAA,IAAI,QAAQ,KAAK,6BAA6B,CAAC,OAAO,EAAE;AACtD,QAAA,OAAO,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC;;AAE9B,IAAA,IAAI,QAAQ,KAAK,6BAA6B,CAAC,UAAU,EAAE;AACzD,QAAA,OAAO,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI,GAAG;;AAE/B,IAAA,OAAO,IAAI;AACb;;;;"}

package/dist/types/components/fields/mrd-date-field/mrd-date-field.d.ts

@@ -2,20 +2,11 @@ import { EventEmitter } from '../../../stencil-public-runtime';
 export declare class MrdDateField {
     name: string;
     label: string;
-    /** ISO date, 'YYYY-MM-DD'. */
     value: string;
-    /** Overrides the locale-derived pattern placeholder (e.g. 'dd-mm-jjjj'). */
-    placeholder: string;
     required: boolean;
     disabled: boolean;
     locale: string;
-    /** What the user sees: the value formatted for `locale`, or their raw typing. */
-    displayValue: string;
     error: string;
-    /** While focused the user owns the text; prop updates must not overwrite it. */
-    private focused;
-    /** Hidden native date input; only used as the platform picker's anchor. */
-    private nativeInput?;
     mrdChange: EventEmitter<{
         name: string;
         value: string;
@@ -24,19 +15,7 @@ export declare class MrdDateField {
         name: string;
         value: string;
     }>;
-    componentWillLoad(): void;
-    valueChanged(newValue: string): void;
-    localeChanged(): void;
-    private patternPlaceholder;
-    /** Parse the typed text, reformat it, and emit the ISO value. */
-    private commit;
-    private handleFocus;
-    private handleInput;
+    private handleChange;
     private handleBlur;
-    private handleKeyDown;
-    /** The ISO value currently shown, so the picker opens on the right date. */
-    private currentIso;
-    private openPicker;
-    private handlePickerChange;
     render(): any;
 }

package/dist/types/components/fields/mrd-datetime-field/mrd-datetime-field.d.ts

@@ -2,20 +2,12 @@ import { EventEmitter } from '../../../stencil-public-runtime';
 export declare class MrdDatetimeField {
     name: string;
     label: string;
-    /** UTC ISO string, e.g. '2026-07-06T12:30:00Z'. */
     value: string;
-    /** Overrides the locale-derived pattern placeholder (e.g. 'dd-mm-jjjj uu:mm'). */
-    placeholder: string;
     required: boolean;
     disabled: boolean;
     locale: string;
-    /** What the user sees: the value formatted for `locale`, or their raw typing. */
-    displayValue: string;
     error: string;
-    /** While focused the user owns the text; prop updates must not overwrite it. */
-    private focused;
-    /** Hidden native datetime-local input; only used as the platform picker's anchor. */
-    private nativeInput?;
+    localValue: string;
     mrdChange: EventEmitter<{
         name: string;
         value: string;
@@ -26,20 +18,9 @@ export declare class MrdDatetimeField {
     }>;
     componentWillLoad(): void;
     valueChanged(newVal: string): void;
-    localeChanged(): void;
     private utcToLocal;
     private localToUtc;
-    private toDisplay;
-    private patternPlaceholder;
-    /** Parse the typed text, reformat it, and return the UTC value to emit. */
-    private commit;
-    private handleFocus;
-    private handleInput;
+    private handleChange;
     private handleBlur;
-    private handleKeyDown;
-    /** The local 'YYYY-MM-DDTHH:mm' currently shown, so the picker opens on the right moment. */
-    private currentLocal;
-    private openPicker;
-    private handlePickerChange;
     render(): any;
 }

package/dist/types/components/table/mrd-table/mrd-table.d.ts

@@ -17,6 +17,13 @@ export declare class MrdTable {
     private viewPopoverClickHandler;
     /** Guards against scheduling more than one column-width measurement per freeze. */
     private colWidthMeasureScheduled;
+    /** Drag origin of the running column resize (null = no drag in progress). */
+    private resizeOrigin;
+    /** True once the user has dragged (or auto-fitted) a column — see colWidthsUserSet usages. */
+    private colWidthsUserSet;
+    /** Set once the host drives this table through init()/setPage(). Never cleared: it has to
+     *  survive resetPages(), which empties loadedPages — see the isPaginated getter. */
+    private paginationActivated;
     /** The VIEW or RELATED_VIEW layout item. Contains view config, dataClass, fromClass, actions etc. */
     item: ClientLayoutItem | null;
     /** Parent record id — required for RELATED_VIEW to build /{fromClass}/{parentId}/{dataClass}. */
@@ -35,7 +42,10 @@ export declare class MrdTable {
     /** Time (ms) to wait for setPage() before retrying a page request; after
      *  MAX_RETRY_ATTEMPTS retries the page is marked failed (see failedPages). */
     requestTimeoutMs: number;
-    /** Clamp renderEnd when totalElements shrinks (e.g. after a filter is applied). */
+    /** Clamp renderEnd when totalElements shrinks (e.g. after a filter is applied).
+     *  0 means "unknown" (hosts that rely on minKnownTotal never set it, and some reset it
+     *  while a filter is being applied) — clamping to it would collapse the window to a
+     *  single row, so leave the window alone and let the render pass clamp it. */
     totalElementsChanged(newVal: number): void;
     /** Reset to primary view when the item prop is replaced from outside. */
     itemChanged(newVal: ClientLayoutItem | null): void;
@@ -48,10 +58,10 @@ export declare class MrdTable {
     renderStart: number;
     renderEnd: number;
     colWidths: number[];
+    /** Index of the column currently being dragged by its resize handle (null = not resizing). */
+    resizingCol: number | null;
     sortField: string;
     sortDir: 'asc' | 'desc';
-    /** Whether the filter UI is visible on column headers. */
-    filterMode: boolean;
     /** Active filters keyed by field name. */
     activeFilters: Map<string, ColumnFilter>;
     /** Field name of the currently open filter popup (null = closed). */
@@ -150,6 +160,29 @@ export declare class MrdTable {
     setAggregations(data: AggregationResult): Promise<void>;
     disconnectedCallback(): void;
     componentDidRender(): void;
+    /** Current rendered header widths, or null when they can't be trusted (header not laid out yet). */
+    private measureColWidths;
+    /** Locks the columns at their current rendered widths if they aren't locked yet. */
+    private ensureColWidths;
+    private setColWidth;
+    private handleResizeStart;
+    private handleResizeMove;
+    private handleResizeEnd;
+    /** Double-click on the handle: widen the column to fit its widest *rendered* cell.
+     *  Only rows currently in the virtual-scroll window are measured — off-screen pages
+     *  aren't in the DOM at all, so this is "fit what you can see", not "fit all data". */
+    private handleResizeAutoFit;
+    /** Inline table style once the column widths are locked, undefined while still auto-layout.
+     *  Once locked the table gets an explicit pixel width (the sum of the columns) instead of
+     *  the stylesheet's `min-width: max-content`. max-content is re-derived from the cell
+     *  contents, so every page that scrolled in with a longer value widened the table and
+     *  re-proportioned all columns — the jitter this replaces.
+     *  `minWidth: 100%` keeps an auto-measured table stretched to its container, but is dropped
+     *  once the user resizes by hand: with it, the space freed by narrowing a column is
+     *  redistributed over all columns, so a drag would partly spring back. */
+    private lockedTableStyle;
+    /** The resize handle rendered in the right edge of every header cell. */
+    private renderColResizer;
     private visibleCount;
     private sortParam;
     /** Stable ordered list: primary view first, then alternatives (from the item prop). */
@@ -165,6 +198,15 @@ export declare class MrdTable {
     private buildDataPath;
     /** Build query params for a page request from current sort, view filters, filterClass and active column filters. */
     private buildQueryParams;
+    /** True when the table is in paginated / virtual-scroll mode rather than driven by the
+     *  rows prop. Mirrors the branch taken in render().
+     *
+     *  The filter handlers gate their reload on this. They used to test minKnownTotal, which is
+     *  0 after a filter returned no rows at all — so clearing that filter reloaded nothing and
+     *  the table stayed empty. Hosts that omit totalElements have the same problem, hence the
+     *  sticky flag rather than loadedPages.size: resetPages() clears the loaded pages, and the
+     *  mode must not flip back to the rows prop (and its "no results") while page 0 is in flight. */
+    private get isPaginated();
     private get columns();
     private get tableActions();
     private toggleCreatePicker;
@@ -179,7 +221,8 @@ export declare class MrdTable {
     private emitLoadAggregations;
     /** Reset pagination state and scroll to top (used after sort or filter change). */
     private resetPages;
-    private handleSortClick;
+    /** Sorting runs through the column popup's sort section (applySort); there is no
+     *  separate click-to-sort mode any more. */
     private applySort;
     /** Emits mrdLoadPage for a page and records the request timestamp for stale-request detection. */
     private emitLoadPage;
@@ -193,7 +236,6 @@ export declare class MrdTable {
     /** Manually retry a page the user gave up on (clicked the retry row). */
     private retryPage;
     private handleScroll;
-    private handleFilterToggle;
     private handleFilterOpen;
     private closeFilterPopup;
     private openTextblockModal;

package/dist/types/components/table/mrd-table/table-parts.d.ts

@@ -35,7 +35,6 @@ export declare const JsonModal: FunctionalComponent<{
     onClose: () => void;
 }>;
 export interface ToolbarCallbacks {
-    onFilterToggle: () => void;
     onClearAllFilters: () => void;
     onViewSwitch: (idx: number) => void;
     onToggleViewPopover: (e: MouseEvent) => void;
@@ -47,7 +46,6 @@ export interface ToolbarCallbacks {
 }
 export declare const Toolbar: FunctionalComponent<{
     locale: string;
-    filterMode: boolean;
     filterCount: number;
     actions: TableAction[];
     views: Array<{

package/dist/types/components/table/mrd-table/virtual-scroll.d.ts

@@ -12,7 +12,12 @@ export declare const REQUEST_TIMEOUT_MS = 15000;
 /** Max retries for a stale page request before giving up and showing a retry row. */
 export declare const MAX_RETRY_ATTEMPTS = 3;
 export declare function visibleCount(tableHeight: number, rowHeight: number): number;
-/** Render window (with buffer) for the given scroll offset. */
+/** Render window (with buffer) for the given scroll offset.
+ *  total <= 0 means "not known yet" (no totalElements prop, no aggregation total and no page
+ *  loaded — e.g. right after a filter reset), *not* "no rows". Clamping to total - 1 would
+ *  collapse the window to renderEnd = -1, so nothing renders and no page is ever requested;
+ *  the window is left unclamped instead and the render pass clamps it against
+ *  effectiveTotal once real data has landed. */
 export declare function computeWindow(scrollTop: number, rowHeight: number, tableHeight: number, total: number): {
     renderStart: number;
     renderEnd: number;

package/dist/types/components.d.ts

@@ -85,17 +85,11 @@ export namespace Components {
           * @default ''
          */
         "name": string;
-        /**
-          * Overrides the locale-derived pattern placeholder (e.g. 'dd-mm-jjjj').
-          * @default ''
-         */
-        "placeholder": string;
         /**
           * @default false
          */
         "required": boolean;
         /**
-          * ISO date, 'YYYY-MM-DD'.
           * @default ''
          */
         "value": string;
@@ -117,17 +111,11 @@ export namespace Components {
           * @default ''
          */
         "name": string;
-        /**
-          * Overrides the locale-derived pattern placeholder (e.g. 'dd-mm-jjjj uu:mm').
-          * @default ''
-         */
-        "placeholder": string;
         /**
           * @default false
          */
         "required": boolean;
         /**
-          * UTC ISO string, e.g. '2026-07-06T12:30:00Z'.
           * @default ''
          */
         "value": string;
@@ -1749,17 +1737,11 @@ declare namespace LocalJSX {
         "name"?: string;
         "onMrdBlur"?: (event: MrdDateFieldCustomEvent<{ name: string; value: string }>) => void;
         "onMrdChange"?: (event: MrdDateFieldCustomEvent<{ name: string; value: string }>) => void;
-        /**
-          * Overrides the locale-derived pattern placeholder (e.g. 'dd-mm-jjjj').
-          * @default ''
-         */
-        "placeholder"?: string;
         /**
           * @default false
          */
         "required"?: boolean;
         /**
-          * ISO date, 'YYYY-MM-DD'.
           * @default ''
          */
         "value"?: string;
@@ -1783,17 +1765,11 @@ declare namespace LocalJSX {
         "name"?: string;
         "onMrdBlur"?: (event: MrdDatetimeFieldCustomEvent<{ name: string; value: string }>) => void;
         "onMrdChange"?: (event: MrdDatetimeFieldCustomEvent<{ name: string; value: string }>) => void;
-        /**
-          * Overrides the locale-derived pattern placeholder (e.g. 'dd-mm-jjjj uu:mm').
-          * @default ''
-         */
-        "placeholder"?: string;
         /**
           * @default false
          */
         "required"?: boolean;
         /**
-          * UTC ISO string, e.g. '2026-07-06T12:30:00Z'.
           * @default ''
          */
         "value"?: string;
@@ -2773,7 +2749,6 @@ declare namespace LocalJSX {
         "name": string;
         "label": string;
         "value": string;
-        "placeholder": string;
         "required": boolean;
         "disabled": boolean;
         "locale": string;
@@ -2782,7 +2757,6 @@ declare namespace LocalJSX {
         "name": string;
         "label": string;
         "value": string;
-        "placeholder": string;
         "required": boolean;
         "disabled": boolean;
         "locale": string;

package/dist/types/utils/format.d.ts

@@ -4,38 +4,4 @@ export declare function formatPercentage(value: number, locale: string, decimalP
 export declare function formatDate(value: string | Date, locale: string): string;
 export declare function formatDateTime(value: string | Date, locale: string): string;
 export declare function formatTime(value: string, locale: string): string;
-/** Tokens used to build the input placeholder, e.g. { day: 'dd', month: 'mm', year: 'jjjj' }. */
-export interface DatePatternTokens {
-    day: string;
-    month: string;
-    year: string;
-    hour?: string;
-    minute?: string;
-}
-/**
- * Placeholder showing the locale's date order, e.g. 'dd-mm-jjjj' (nl-NL) or
- * 'mm/dd/yyyy' (en-US). Pass `hour`/`minute` tokens to include the time part.
- */
-export declare function localeDatePattern(locale: string, tokens: DatePatternTokens): string;
-/**
- * Parses a date the user typed in their own locale format → 'YYYY-MM-DD'.
- * Accepts any separator, one- or two-digit day/month, two-digit years, and
- * plain ISO input (pasted values). Returns null when it is not a valid date.
- */
-export declare function parseLocalizedDate(input: string, locale: string): string | null;
-/**
- * Parses a date+time the user typed in their own locale format →
- * 'YYYY-MM-DDTHH:mm' in local time (the shape mrd-datetime-field converts to
- * UTC before emitting). A missing time defaults to 00:00; am/pm is recognised
- * both in English and in the locale's own markers.
- */
-export declare function parseLocalizedDateTime(input: string, locale: string): string | null;
-/**
- * 'YYYY-MM-DD' → localized display string. Parsed as a *local* date, unlike
- * formatDate(), which would read a date-only string as UTC midnight and shift
- * the day in negative-offset timezones.
- */
-export declare function formatIsoDate(iso: string, locale: string): string;
-/** 'YYYY-MM-DDTHH:mm' in local time → localized display string. */
-export declare function formatLocalDateTime(local: string, locale: string): string;
 export declare function parseLocalizedNumber(str: string, locale: string): number | null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mmlogic/components",
-  "version": "0.5.5",
+  "version": "0.5.7",
   "description": "Stencil.js web component library for dynamic forms and virtual-scroll data tables",
   "license": "MIT",
   "author": "Mosterd",