@dataworkz/crystal 0.1.0-beta.4 → 0.1.0-beta.6

package/index.d.ts

@@ -2,7 +2,7 @@ import * as _angular_core from '@angular/core';
 import { InjectionToken, EnvironmentProviders, OnDestroy, TemplateRef, OnInit } from '@angular/core';
 import { StorageIconSet, DwPrimeIcon } from '@dataworkz/crystal/icons';
 export { DW_ICON_NAMES, DW_ICON_PREFIX, DwIconName, DwPrimeIcon, IconName, dwIconName, icon } from '@dataworkz/crystal/icons';
-import { ValidationErrors, AbstractControl, NgModel, NgControl, ControlValueAccessor } from '@angular/forms';
+import { ValidationErrors, NgControl, AbstractControl, NgModel, ControlValueAccessor } from '@angular/forms';
 import { MenuItem, SortMeta, SortEvent } from 'primeng/api';
 import { UrlTree } from '@angular/router';
 import { CdkDragDrop } from '@angular/cdk/drag-drop';
@@ -449,7 +449,7 @@ declare class DwAvatarComponent {
     readonly name: _angular_core.InputSignal<string | null>;
     readonly initials: _angular_core.InputSignal<DwInitialsStrategy>;
     readonly src: _angular_core.InputSignal<string | null>;
-    readonly size: _angular_core.InputSignal<"sm" | "md" | "xs" | "lg">;
+    readonly size: _angular_core.InputSignal<"sm" | "md" | "lg" | "xs">;
     /** Colour of the tile; neutral grey by default. */
     readonly tint: _angular_core.InputSignal<DwAvatarTint>;
     readonly presence: _angular_core.InputSignal<boolean | null>;
@@ -487,7 +487,7 @@ declare class DwEntityIconComponent {
     readonly src: _angular_core.InputSignal<string | null>;
     readonly fallback: _angular_core.InputSignal<string | undefined>;
     readonly storageSet: _angular_core.InputSignal<StorageIconSet>;
-    readonly size: _angular_core.InputSignal<"sm" | "md" | "xs" | "lg" | "xl">;
+    readonly size: _angular_core.InputSignal<"sm" | "md" | "lg" | "xs" | "xl">;
     readonly framed: _angular_core.InputSignal<boolean>;
     readonly tint: _angular_core.InputSignal<DwEntityTint>;
     readonly alt: _angular_core.InputSignal<string>;
@@ -540,7 +540,7 @@ declare function provideCrystalIconResolvers(resolvers: DwIconResolvers): Enviro
  * ```
  */
 declare class DwSpinnerComponent {
-    readonly size: _angular_core.InputSignal<"sm" | "md" | "xs" | "lg">;
+    readonly size: _angular_core.InputSignal<"sm" | "md" | "lg" | "xs">;
     readonly mode: _angular_core.InputSignal<"inline" | "block" | "overlay" | "fullscreen">;
     readonly label: _angular_core.InputSignal<string>;
     readonly hostClasses: _angular_core.Signal<string>;
@@ -638,7 +638,7 @@ declare class DwEmptyStateComponent {
     readonly imageWidth: _angular_core.InputSignal<string>;
     readonly title: _angular_core.InputSignal<string>;
     readonly text: _angular_core.InputSignal<string>;
-    readonly tone: _angular_core.InputSignal<"default" | "error">;
+    readonly tone: _angular_core.InputSignal<"error" | "default">;
     readonly size: _angular_core.InputSignal<"default" | "inline" | "compact">;
     readonly hostClasses: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DwEmptyStateComponent, never>;
@@ -963,7 +963,7 @@ declare class DwFieldComponent {
     readonly help: _angular_core.InputSignal<string>;
     readonly layout: _angular_core.InputSignal<"inline" | "stacked">;
     readonly labelWidth: _angular_core.InputSignal<string>;
-    readonly control: _angular_core.InputSignal<AbstractControl<any, any, any> | NgModel | NgControl | null>;
+    readonly control: _angular_core.InputSignal<NgControl | AbstractControl<any, any, any> | NgModel | null>;
     /** Per-field message overrides by validator key. */
     readonly errors: _angular_core.InputSignal<Record<string, string> | null>;
     /** Manual error message (template-driven forms or server errors). */
@@ -2348,8 +2348,11 @@ declare class DwTooltipIfTruncatedDirective {
 }
 
 type DwTooltipPosition = 'top' | 'bottom' | 'left' | 'right';
-/** `multiline` keeps line breaks (up to 360px), `code` monospace, `error` danger red, `toolbar` a slate chip. */
-type DwTooltipVariant = 'default' | 'multiline' | 'code' | 'error' | 'toolbar';
+/**
+ * `multiline` keeps line breaks (up to 360px), `code` monospace, `error` danger red, `toolbar` a slate chip, `preview`
+ * a long value shown whole (up to 720 × 340px, then scrolled; pair it with `dwTooltipInteractive`).
+ */
+type DwTooltipVariant = 'default' | 'multiline' | 'code' | 'error' | 'toolbar' | 'preview';
 /**
  * A tooltip on any element, in crystal's look (PrimeNG's Tooltip underneath, which the app never imports). It opens
  * on hover and focus, above the element unless told otherwise, appended to `<body>` so nothing clips it.
@@ -2452,6 +2455,8 @@ declare abstract class DwFormControl<T> implements ControlValueAccessor, OnInit
      * `prepare` runs just before each write, for inputs the control reads while writing (a radio's own value).
      * Only this control's value and what `prepare` reads are tracked: PrimeNG's own signals, which `writeValue` reads and
      * sets, are not, or a write that changes one would run the effect again, without end.
+     * The user's own change is not written back (as with ngModel): the control has it already, and some redraw on a
+     * write (a date picker turns its calendar to the written date's month).
      */
     protected drive<C extends DwPrimeValueAccessor<T>>(prime: () => C | undefined, prepare?: (control: C) => void): void;
     /** The control lost focus. */
@@ -2545,6 +2550,9 @@ declare class DwSelectComponent<T = unknown> extends DwFormControl<T> {
     readonly size: _angular_core.InputSignal<DwControlSize>;
     /** Fills the width of its container. */
     readonly fluid: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Stacks the list above this z-index (as dw-dialog / dw-drawer / dw-popover's `baseZIndex`), for a select inside a
+     *  layer that sets its own z-index, e.g. a page that hosts crystal in a high layer. 0 = PrimeNG's own stacking. */
+    readonly baseZIndex: _angular_core.InputSignal<number>;
     /** Reads as a fixed value, not a control: no arrow, the value in body text. */
     readonly readonly: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly opened: _angular_core.OutputEmitterRef<void>;
@@ -2555,13 +2563,16 @@ declare class DwSelectComponent<T = unknown> extends DwFormControl<T> {
     protected readonly valueTemplate: _angular_core.Signal<DwSelectValueDirective<any> | undefined>;
     protected readonly footerTemplate: _angular_core.Signal<DwSelectFooterDirective | undefined>;
     protected readonly primeSize: _angular_core.Signal<"small" | "large" | undefined>;
+    protected readonly overlayOptions: _angular_core.Signal<{
+        baseZIndex: number;
+    } | undefined>;
     private readonly prime;
     constructor();
     /** Opens the list (e.g. when an editable select's text is clicked). */
     open(): void;
     close(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DwSelectComponent<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DwSelectComponent<any>, "dw-select", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "optionLabel": { "alias": "optionLabel"; "required": false; "isSignal": true; }; "optionValue": { "alias": "optionValue"; "required": false; "isSignal": true; }; "optionDisabled": { "alias": "optionDisabled"; "required": false; "isSignal": true; }; "dataKey": { "alias": "dataKey"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "filter": { "alias": "filter"; "required": false; "isSignal": true; }; "filterBy": { "alias": "filterBy"; "required": false; "isSignal": true; }; "filterPlaceholder": { "alias": "filterPlaceholder"; "required": false; "isSignal": true; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; "isSignal": true; }; "emptyFilterMessage": { "alias": "emptyFilterMessage"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "showClear": { "alias": "showClear"; "required": false; "isSignal": true; }; "editable": { "alias": "editable"; "required": false; "isSignal": true; }; "scrollHeight": { "alias": "scrollHeight"; "required": false; "isSignal": true; }; "autofocus": { "alias": "autofocus"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "fluid": { "alias": "fluid"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; }, { "opened": "opened"; "closed": "closed"; "focused": "focused"; "blurred": "blurred"; }, ["optionTemplate", "valueTemplate", "footerTemplate"], never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DwSelectComponent<any>, "dw-select", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "optionLabel": { "alias": "optionLabel"; "required": false; "isSignal": true; }; "optionValue": { "alias": "optionValue"; "required": false; "isSignal": true; }; "optionDisabled": { "alias": "optionDisabled"; "required": false; "isSignal": true; }; "dataKey": { "alias": "dataKey"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "filter": { "alias": "filter"; "required": false; "isSignal": true; }; "filterBy": { "alias": "filterBy"; "required": false; "isSignal": true; }; "filterPlaceholder": { "alias": "filterPlaceholder"; "required": false; "isSignal": true; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; "isSignal": true; }; "emptyFilterMessage": { "alias": "emptyFilterMessage"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "showClear": { "alias": "showClear"; "required": false; "isSignal": true; }; "editable": { "alias": "editable"; "required": false; "isSignal": true; }; "scrollHeight": { "alias": "scrollHeight"; "required": false; "isSignal": true; }; "autofocus": { "alias": "autofocus"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "fluid": { "alias": "fluid"; "required": false; "isSignal": true; }; "baseZIndex": { "alias": "baseZIndex"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; }, { "opened": "opened"; "closed": "closed"; "focused": "focused"; "blurred": "blurred"; }, ["optionTemplate", "valueTemplate", "footerTemplate"], never, true, never>;
 }
 
 /**
@@ -2601,6 +2612,9 @@ declare class DwMultiselectComponent<T = unknown> extends DwFormControl<T[]> {
     readonly inputId: _angular_core.InputSignal<string | undefined>;
     readonly size: _angular_core.InputSignal<DwControlSize>;
     readonly fluid: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Stacks the list above this z-index (as dw-dialog / dw-drawer / dw-popover's `baseZIndex`), for a select inside a
+     *  layer that sets its own z-index, e.g. a page that hosts crystal in a high layer. 0 = PrimeNG's own stacking. */
+    readonly baseZIndex: _angular_core.InputSignal<number>;
     readonly opened: _angular_core.OutputEmitterRef<void>;
     readonly closed: _angular_core.OutputEmitterRef<void>;
     readonly focused: _angular_core.OutputEmitterRef<void>;
@@ -2608,6 +2622,9 @@ declare class DwMultiselectComponent<T = unknown> extends DwFormControl<T[]> {
     protected readonly optionTemplate: _angular_core.Signal<DwSelectOptionDirective<any> | undefined>;
     protected readonly footerTemplate: _angular_core.Signal<DwSelectFooterDirective | undefined>;
     protected readonly primeSize: _angular_core.Signal<"small" | "large" | undefined>;
+    protected readonly overlayOptions: _angular_core.Signal<{
+        baseZIndex: number;
+    } | undefined>;
     /** PrimeNG reads a null maxSelectedLabels as 0 (summarise everything), so "list them all" is a ceiling no list reaches. */
     protected readonly listAll: number;
     private readonly prime;
@@ -2616,20 +2633,27 @@ declare class DwMultiselectComponent<T = unknown> extends DwFormControl<T[]> {
     open(): void;
     close(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DwMultiselectComponent<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DwMultiselectComponent<any>, "dw-multiselect", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "optionLabel": { "alias": "optionLabel"; "required": false; "isSignal": true; }; "optionValue": { "alias": "optionValue"; "required": false; "isSignal": true; }; "optionDisabled": { "alias": "optionDisabled"; "required": false; "isSignal": true; }; "dataKey": { "alias": "dataKey"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "filter": { "alias": "filter"; "required": false; "isSignal": true; }; "filterBy": { "alias": "filterBy"; "required": false; "isSignal": true; }; "filterPlaceholder": { "alias": "filterPlaceholder"; "required": false; "isSignal": true; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; "isSignal": true; }; "emptyFilterMessage": { "alias": "emptyFilterMessage"; "required": false; "isSignal": true; }; "showToggleAll": { "alias": "showToggleAll"; "required": false; "isSignal": true; }; "maxSelectedLabels": { "alias": "maxSelectedLabels"; "required": false; "isSignal": true; }; "selectedItemsLabel": { "alias": "selectedItemsLabel"; "required": false; "isSignal": true; }; "display": { "alias": "display"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "showClear": { "alias": "showClear"; "required": false; "isSignal": true; }; "scrollHeight": { "alias": "scrollHeight"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "fluid": { "alias": "fluid"; "required": false; "isSignal": true; }; }, { "opened": "opened"; "closed": "closed"; "focused": "focused"; "blurred": "blurred"; }, ["optionTemplate", "footerTemplate"], never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DwMultiselectComponent<any>, "dw-multiselect", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "optionLabel": { "alias": "optionLabel"; "required": false; "isSignal": true; }; "optionValue": { "alias": "optionValue"; "required": false; "isSignal": true; }; "optionDisabled": { "alias": "optionDisabled"; "required": false; "isSignal": true; }; "dataKey": { "alias": "dataKey"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "filter": { "alias": "filter"; "required": false; "isSignal": true; }; "filterBy": { "alias": "filterBy"; "required": false; "isSignal": true; }; "filterPlaceholder": { "alias": "filterPlaceholder"; "required": false; "isSignal": true; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; "isSignal": true; }; "emptyFilterMessage": { "alias": "emptyFilterMessage"; "required": false; "isSignal": true; }; "showToggleAll": { "alias": "showToggleAll"; "required": false; "isSignal": true; }; "maxSelectedLabels": { "alias": "maxSelectedLabels"; "required": false; "isSignal": true; }; "selectedItemsLabel": { "alias": "selectedItemsLabel"; "required": false; "isSignal": true; }; "display": { "alias": "display"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "showClear": { "alias": "showClear"; "required": false; "isSignal": true; }; "scrollHeight": { "alias": "scrollHeight"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "fluid": { "alias": "fluid"; "required": false; "isSignal": true; }; "baseZIndex": { "alias": "baseZIndex"; "required": false; "isSignal": true; }; }, { "opened": "opened"; "closed": "closed"; "focused": "focused"; "blurred": "blurred"; }, ["optionTemplate", "footerTemplate"], never, true, never>;
 }
 
 /**
- * Crystal's checkbox (PrimeNG's Checkbox underneath, which the app never imports), on/off: its value is a boolean.
- * With a `label` (or projected content) the label sits beside it on one line and toggles it too.
+ * Crystal's checkbox (PrimeNG's Checkbox underneath, which the app never imports). On its own it is on/off: its value
+ * is a boolean. With an `option`, it is one box of a set that fills one array: ticked while the array holds the option,
+ * and clicking adds or removes it (as dw-radio's `option`, for many picks). With a `label` (or projected content) the
+ * label sits beside it on one line and toggles it too.
  *
  * ```html
  * <dw-checkbox label="Remember me" [(ngModel)]="remember" />
+ * @for (f of filters; track f.name) {
+ *   <dw-checkbox [option]="f.name" [label]="f.name" [(ngModel)]="selectedFilterNames" />
+ * }
  * <dw-checkbox formControlName="agree">I accept the <a href="/terms">terms</a></dw-checkbox>
  * <dw-checkbox ariaLabel="Select row" [indeterminate]="some" [(value)]="all" />
  * ```
  */
-declare class DwCheckboxComponent extends DwFormControl<boolean> {
+declare class DwCheckboxComponent<T = boolean> extends DwFormControl<T> {
+    /** Makes this box one of a set: the value is an array, and this box stands for this entry of it. */
+    readonly option: _angular_core.InputSignal<unknown>;
     readonly label: _angular_core.InputSignal<string>;
     /** For a checkbox with no visible label. */
     readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
@@ -2645,8 +2669,8 @@ declare class DwCheckboxComponent extends DwFormControl<boolean> {
     protected readonly primeSize: _angular_core.Signal<"small" | "large" | undefined>;
     private readonly prime;
     constructor();
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DwCheckboxComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DwCheckboxComponent, "dw-checkbox", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "indeterminate": { "alias": "indeterminate"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, { "focused": "focused"; "blurred": "blurred"; }, never, ["*"], true, never>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DwCheckboxComponent<any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DwCheckboxComponent<any>, "dw-checkbox", never, { "option": { "alias": "option"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "indeterminate": { "alias": "indeterminate"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, { "focused": "focused"; "blurred": "blurred"; }, never, ["*"], true, never>;
 }
 
 /**
@@ -2742,6 +2766,115 @@ declare class DwNumberInputComponent extends DwFormControl<number> {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<DwNumberInputComponent, "dw-number-input", never, { "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "prefix": { "alias": "prefix"; "required": false; "isSignal": true; }; "suffix": { "alias": "suffix"; "required": false; "isSignal": true; }; "minFractionDigits": { "alias": "minFractionDigits"; "required": false; "isSignal": true; }; "maxFractionDigits": { "alias": "maxFractionDigits"; "required": false; "isSignal": true; }; "useGrouping": { "alias": "useGrouping"; "required": false; "isSignal": true; }; "showButtons": { "alias": "showButtons"; "required": false; "isSignal": true; }; "buttonLayout": { "alias": "buttonLayout"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "fluid": { "alias": "fluid"; "required": false; "isSignal": true; }; }, { "focused": "focused"; "blurred": "blurred"; }, never, never, true, never>;
 }
 
+/** What a date picker holds: one date, or a list of them for `selectionMode="range"` (start, end) and `"multiple"`. */
+type DwDateValue = Date | (Date | null)[];
+/**
+ * Crystal's date (and time) picker, PrimeNG's DatePicker underneath, which the app never imports. A text field that
+ * opens a calendar appended to `<body>`, or the calendar alone with `inline`. It picks one date, a range or several
+ * dates, optionally with a time. Works with ngModel and reactive forms, inside `dw-field`, or on its own with
+ * `[(value)]`.
+ *
+ * `dateFormat` uses PrimeNG's tokens: `yy` is the four-digit year, `mm` / `M` the month as a number / short name and
+ * `dd` the day, so `"yy-mm-dd"` shows 2026-03-14 and `"M dd, yy"` shows Mar 14, 2026.
+ *
+ * ```html
+ * <dw-date-picker dateFormat="yy-mm-dd" [maxDate]="today" placeholder="Start date" formControlName="start" />
+ * <dw-date-picker [showTime]="true" [showSeconds]="true" [showIcon]="true" [(ngModel)]="runAt" (changed)="save()" />
+ * <dw-date-picker [inline]="true" selectionMode="range" [numberOfMonths]="2" [compact]="true" [(value)]="range" />
+ * ```
+ */
+declare class DwDatePickerComponent<T extends DwDateValue = Date> extends DwFormControl<T> {
+    readonly placeholder: _angular_core.InputSignal<string | undefined>;
+    /** How the field shows the date, in PrimeNG's tokens (see above); PrimeNG's locale format (`mm/dd/yy`) when omitted. */
+    readonly dateFormat: _angular_core.InputSignal<string | undefined>;
+    /** Picks a time as well as a date. */
+    readonly showTime: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly showSeconds: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly hourFormat: _angular_core.InputSignal<"12" | "24">;
+    /** The earliest and latest dates that can be picked. */
+    readonly minDate: _angular_core.InputSignal<Date | null | undefined>;
+    readonly maxDate: _angular_core.InputSignal<Date | null | undefined>;
+    /** One date, a start and an end (`range`), or any number of dates (`multiple`). */
+    readonly selectionMode: _angular_core.InputSignal<"single" | "range" | "multiple">;
+    /** Shows the calendar itself, always open, instead of a field. */
+    readonly inline: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly numberOfMonths: _angular_core.InputSignalWithTransform<number, unknown>;
+    /** Shows the days of the months before and after, greyed. */
+    readonly showOtherMonths: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** A calendar icon: a button beside the field, or drawn inside it (`iconDisplay="input"`). */
+    readonly showIcon: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly iconDisplay: _angular_core.InputSignal<"button" | "input">;
+    /** An × in the field that clears it. */
+    readonly showClear: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Smaller day cells, type and time picker, for a calendar inside a popover or a narrow panel. */
+    readonly compact: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** The calendar's z-index floor, for a picker inside an overlay that sits above crystal's own layers. */
+    readonly baseZIndex: _angular_core.InputSignalWithTransform<number, unknown>;
+    readonly inputId: _angular_core.InputSignal<string | undefined>;
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
+    readonly size: _angular_core.InputSignal<DwControlSize>;
+    readonly fluid: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** A day (or time) was picked in the calendar; `changed` also follows typing. */
+    readonly selected: _angular_core.OutputEmitterRef<Date>;
+    readonly focused: _angular_core.OutputEmitterRef<void>;
+    readonly blurred: _angular_core.OutputEmitterRef<void>;
+    readonly opened: _angular_core.OutputEmitterRef<void>;
+    readonly closed: _angular_core.OutputEmitterRef<void>;
+    protected readonly primeSize: _angular_core.Signal<"small" | "large" | undefined>;
+    private readonly prime;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DwDatePickerComponent<any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DwDatePickerComponent<any>, "dw-date-picker", never, { "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "dateFormat": { "alias": "dateFormat"; "required": false; "isSignal": true; }; "showTime": { "alias": "showTime"; "required": false; "isSignal": true; }; "showSeconds": { "alias": "showSeconds"; "required": false; "isSignal": true; }; "hourFormat": { "alias": "hourFormat"; "required": false; "isSignal": true; }; "minDate": { "alias": "minDate"; "required": false; "isSignal": true; }; "maxDate": { "alias": "maxDate"; "required": false; "isSignal": true; }; "selectionMode": { "alias": "selectionMode"; "required": false; "isSignal": true; }; "inline": { "alias": "inline"; "required": false; "isSignal": true; }; "numberOfMonths": { "alias": "numberOfMonths"; "required": false; "isSignal": true; }; "showOtherMonths": { "alias": "showOtherMonths"; "required": false; "isSignal": true; }; "showIcon": { "alias": "showIcon"; "required": false; "isSignal": true; }; "iconDisplay": { "alias": "iconDisplay"; "required": false; "isSignal": true; }; "showClear": { "alias": "showClear"; "required": false; "isSignal": true; }; "compact": { "alias": "compact"; "required": false; "isSignal": true; }; "baseZIndex": { "alias": "baseZIndex"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "fluid": { "alias": "fluid"; "required": false; "isSignal": true; }; }, { "selected": "selected"; "focused": "focused"; "blurred": "blurred"; "opened": "opened"; "closed": "closed"; }, never, never, true, never>;
+}
+
+type DwChartType = 'line' | 'bar' | 'doughnut' | 'pie' | 'polarArea' | 'radar' | 'scatter' | 'bubble';
+/** A click on a bar, point or slice: the chart.js element and its dataset. */
+interface DwChartSelectEvent {
+    originalEvent: Event;
+    element: {
+        datasetIndex: number;
+        index: number;
+    };
+    dataset: unknown[];
+}
+/**
+ * Crystal's chart: a chart.js canvas (through PrimeNG's Chart, which the app never imports; chart.js comes with
+ * crystal). `data` and `options` are chart.js's own; a new object for either redraws the chart, and so does a new
+ * `type`, size or `plugins`. A canvas cannot read CSS variables, so resolve colours from the tokens first: `cssVar()` and
+ * `chartPalette()` from `@dataworkz/crystal/tokens`.
+ *
+ * The chart fills its container's width and keeps chart.js's aspect ratio, unless it is given a `height` (or the
+ * options say `maintainAspectRatio: false` and the container has one).
+ *
+ * ```html
+ * <dw-chart type="line" [data]="requests()" [options]="lineOptions" />
+ * <dw-chart [type]="kind()" [data]="series()" [options]="options()" height="240px" (dataSelect)="drill($event)" />
+ * ```
+ */
+declare class DwChartComponent {
+    readonly type: _angular_core.InputSignal<DwChartType>;
+    /** chart.js data: `{ labels, datasets }`. */
+    readonly data: _angular_core.InputSignal<object | null | undefined>;
+    /** chart.js options. */
+    readonly options: _angular_core.InputSignal<object | null | undefined>;
+    /** chart.js plugins for this chart only. */
+    readonly plugins: _angular_core.InputSignal<unknown[]>;
+    /** A CSS width / height for the canvas box (`240px`, `100%`); chart.js sizes it when omitted. */
+    readonly width: _angular_core.InputSignal<string | undefined>;
+    readonly height: _angular_core.InputSignal<string | undefined>;
+    /** Redraws the chart when its container resizes. */
+    readonly responsive: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
+    /** A bar, point or slice was clicked. */
+    readonly dataSelect: _angular_core.OutputEmitterRef<DwChartSelectEvent>;
+    private readonly prime;
+    constructor();
+    /** Redraws the chart in place (animating), after the app changed `data` or `options` without a new object. */
+    refresh(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DwChartComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DwChartComponent, "dw-chart", never, { "type": { "alias": "type"; "required": true; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "plugins": { "alias": "plugins"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "responsive": { "alias": "responsive"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "dataSelect": "dataSelect"; }, never, never, true, never>;
+}
+
 /**
  * Backend timestamp normalization.
  *
@@ -3289,5 +3422,5 @@ declare function installCrystalHostTheme({ fonts }?: CrystalHostThemeOptions): v
 /** Removes the host theme again (e.g. a host that unloads crystal, or a test). */
 declare function removeCrystalHostTheme(): void;
 
-export { DW_APP_FIELD_MESSAGES, DW_CLOCK_TICK_MS, DW_CRYSTAL_CONFIG, DW_DIALOG, DW_DRAWER, DW_FIELD_MESSAGES, DW_HOST_THEME_ATTR, DW_ICON_RESOLVERS, DW_INPUT, DW_IN_PROGRESS_STATUSES, DW_LAYOUT, DW_MENU_PLAIN_GROUP, DW_OVERLAY_ANCHOR_ATTR, DW_OVERLAY_ANCHOR_GAP, DW_POPOVER, DW_RESERVED_ICON_PREFIX, DW_STATUS_TONES, DW_TABLE, DW_TAG_PALETTE, DW_THEME_STORAGE_KEY, DW_TOGGLE_CARD, DwActionBarComponent, DwAvatarComponent, DwBadgeComponent, DwBannerComponent, DwBoxComponent, DwBreadcrumbComponent, DwButtonComponent, DwCardComponent, DwCellDirective, DwCheckToggleComponent, DwCheckboxComponent, DwChipComponent, DwClockService, DwColumnPickerComponent, DwConfirmDialogComponent, DwConfirmHostComponent, DwConfirmService, DwCopyButtonComponent, DwDialogComponent, DwDialogFooterDirective, DwDialogHeaderDirective, DwDialogTitleSuffixDirective, DwDividerComponent, DwDrawerComponent, DwDrawerFooterDirective, DwDrawerHeaderDirective, DwDrawerSubheaderDirective, DwEmptyStateComponent, DwEntityIconComponent, DwFieldComponent, DwFileDropzoneComponent, DwFileListComponent, DwFormControl, DwFormSectionHeaderComponent, DwGridDirective, DwHeaderDirective, DwHstackDirective, DwIconButtonComponent, DwIconComponent, DwIconRegistry, IdBlockComponent as DwIdBlockComponent, DwInputDirective, DwMenuComponent, DwMenuHeaderDirective, DwMeterComponent, DwMultiselectComponent, DwNavItemActionsDirective, DwNavItemExtraDirective, DwNavListComponent, DwNumberInputComponent, DwPageHeaderComponent, DwPopoverComponent, DwPopoverFooterDirective, DwRadioComponent, DwRailTabsComponent, DwResizerComponent, DwRowActionsDirective, DwRowExpansionDirective, DwSearchInputComponent, DwSectionComponent, DwSelectComponent, DwSelectFooterDirective, DwSelectOptionDirective, DwSelectValueDirective, DwSkeletonComponent, DwSpinnerComponent, DwStackDirective, DwStatusPillComponent, DwSwitchComponent, DwTabPanelDirective, DwTableComponent, DwTableEmptyComponent, DwTabsComponent, DwTagColorButtonComponent, DwTagColorPickerComponent, DwTagComponent, DwTagListComponent, DwTextareaDirective, DwTileComponent, DwTimestampComponent, DwToastHostComponent, DwToastService, DwToggleCardBodyDirective, DwToggleCardComponent, DwToggleCardControlDirective, DwTooltipDirective, DwTooltipIfTruncatedDirective, ThemeService, alignUnderOverlayAnchor, extensionOf, fieldErrorMessage, formatBytes, gapToken, hashTagIndex, humanizeStatus, initialsOf, installCrystalHostTheme, isImageIcon, isTruncated, normalizeStatus, primeSize, provideCrystal, provideCrystalFieldMessages, provideCrystalIconResolvers, provideCrystalIcons, removeCrystalHostTheme, tagColorVar, tintFor, toneForStatus };
-export type { CrystalConfig, CrystalHostThemeOptions, CrystalThemeConfig, DwAlign, DwAvatarTint, DwBadgeKind, DwBadgeTone, DwBreadcrumb, DwButtonAppearance, DwButtonSize, DwButtonVariant, DwCanClose, DwCardTint, DwCardVariant, DwColumn, DwConfirmOptions, DwConfirmSeverity, DwConfirmSummaryRow, DwConfirmWarning, DwControlSize, DwDialogSize, DwDividerOrientation, DwDividerSpacing, DwDrawerAction, DwDrawerSize, DwEntityKind, DwEntityTint, DwFieldMessage, DwFileItem, DwFileRejectReason, DwFileRejection, DwFileStatus, DwGap, DwIconButtonVariant, DwIconResolvers, DwInitialsStrategy, DwInputSize, DwJustify, DwMenuItem, DwNavGroup, DwNavItem, DwNavItemDot, DwNavReorder, DwPrimeValueAccessor, DwRailTab, DwResizerDrag, DwRowClickEvent, DwSelectOptionContext, DwSeverity, DwShowErrorsWhen, DwSkeletonPreset, DwSupportedType, DwSwitchSize, DwTabOption, DwTabValue, DwTagItem, DwTheme, DwToast, DwToastOptions, DwToastPosition, DwToastSeverity, DwTone, DwTooltipPosition, DwTooltipVariant };
+export { DW_APP_FIELD_MESSAGES, DW_CLOCK_TICK_MS, DW_CRYSTAL_CONFIG, DW_DIALOG, DW_DRAWER, DW_FIELD_MESSAGES, DW_HOST_THEME_ATTR, DW_ICON_RESOLVERS, DW_INPUT, DW_IN_PROGRESS_STATUSES, DW_LAYOUT, DW_MENU_PLAIN_GROUP, DW_OVERLAY_ANCHOR_ATTR, DW_OVERLAY_ANCHOR_GAP, DW_POPOVER, DW_RESERVED_ICON_PREFIX, DW_STATUS_TONES, DW_TABLE, DW_TAG_PALETTE, DW_THEME_STORAGE_KEY, DW_TOGGLE_CARD, DwActionBarComponent, DwAvatarComponent, DwBadgeComponent, DwBannerComponent, DwBoxComponent, DwBreadcrumbComponent, DwButtonComponent, DwCardComponent, DwCellDirective, DwChartComponent, DwCheckToggleComponent, DwCheckboxComponent, DwChipComponent, DwClockService, DwColumnPickerComponent, DwConfirmDialogComponent, DwConfirmHostComponent, DwConfirmService, DwCopyButtonComponent, DwDatePickerComponent, DwDialogComponent, DwDialogFooterDirective, DwDialogHeaderDirective, DwDialogTitleSuffixDirective, DwDividerComponent, DwDrawerComponent, DwDrawerFooterDirective, DwDrawerHeaderDirective, DwDrawerSubheaderDirective, DwEmptyStateComponent, DwEntityIconComponent, DwFieldComponent, DwFileDropzoneComponent, DwFileListComponent, DwFormControl, DwFormSectionHeaderComponent, DwGridDirective, DwHeaderDirective, DwHstackDirective, DwIconButtonComponent, DwIconComponent, DwIconRegistry, IdBlockComponent as DwIdBlockComponent, DwInputDirective, DwMenuComponent, DwMenuHeaderDirective, DwMeterComponent, DwMultiselectComponent, DwNavItemActionsDirective, DwNavItemExtraDirective, DwNavListComponent, DwNumberInputComponent, DwPageHeaderComponent, DwPopoverComponent, DwPopoverFooterDirective, DwRadioComponent, DwRailTabsComponent, DwResizerComponent, DwRowActionsDirective, DwRowExpansionDirective, DwSearchInputComponent, DwSectionComponent, DwSelectComponent, DwSelectFooterDirective, DwSelectOptionDirective, DwSelectValueDirective, DwSkeletonComponent, DwSpinnerComponent, DwStackDirective, DwStatusPillComponent, DwSwitchComponent, DwTabPanelDirective, DwTableComponent, DwTableEmptyComponent, DwTabsComponent, DwTagColorButtonComponent, DwTagColorPickerComponent, DwTagComponent, DwTagListComponent, DwTextareaDirective, DwTileComponent, DwTimestampComponent, DwToastHostComponent, DwToastService, DwToggleCardBodyDirective, DwToggleCardComponent, DwToggleCardControlDirective, DwTooltipDirective, DwTooltipIfTruncatedDirective, ThemeService, alignUnderOverlayAnchor, extensionOf, fieldErrorMessage, formatBytes, gapToken, hashTagIndex, humanizeStatus, initialsOf, installCrystalHostTheme, isImageIcon, isTruncated, normalizeStatus, primeSize, provideCrystal, provideCrystalFieldMessages, provideCrystalIconResolvers, provideCrystalIcons, removeCrystalHostTheme, tagColorVar, tintFor, toneForStatus };
+export type { CrystalConfig, CrystalHostThemeOptions, CrystalThemeConfig, DwAlign, DwAvatarTint, DwBadgeKind, DwBadgeTone, DwBreadcrumb, DwButtonAppearance, DwButtonSize, DwButtonVariant, DwCanClose, DwCardTint, DwCardVariant, DwChartSelectEvent, DwChartType, DwColumn, DwConfirmOptions, DwConfirmSeverity, DwConfirmSummaryRow, DwConfirmWarning, DwControlSize, DwDateValue, DwDialogSize, DwDividerOrientation, DwDividerSpacing, DwDrawerAction, DwDrawerSize, DwEntityKind, DwEntityTint, DwFieldMessage, DwFileItem, DwFileRejectReason, DwFileRejection, DwFileStatus, DwGap, DwIconButtonVariant, DwIconResolvers, DwInitialsStrategy, DwInputSize, DwJustify, DwMenuItem, DwNavGroup, DwNavItem, DwNavItemDot, DwNavReorder, DwPrimeValueAccessor, DwRailTab, DwResizerDrag, DwRowClickEvent, DwSelectOptionContext, DwSeverity, DwShowErrorsWhen, DwSkeletonPreset, DwSupportedType, DwSwitchSize, DwTabOption, DwTabValue, DwTagItem, DwTheme, DwToast, DwToastOptions, DwToastPosition, DwToastSeverity, DwTone, DwTooltipPosition, DwTooltipVariant };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataworkz/crystal",
-  "version": "0.1.0-beta.4",
+  "version": "0.1.0-beta.6",
   "description": "Dataworkz core UI for Angular: dw-* components, icons, toasts, design tokens, theme CSS and bundled fonts.",
   "license": "MIT",
   "author": "Dataworkz",
@@ -29,6 +29,7 @@
   },
   "dependencies": {
     "@primeng/themes": "^21.0.0",
+    "chart.js": "^4.5.1",
     "primeicons": "^7.0.0",
     "primeng": "~20.4.0",
     "tslib": "^2.8.1"

package/primeng/index.d.ts

@@ -639,6 +639,17 @@ declare const DW_PRIMENG_PT: {
         };
     };
 };
+/**
+ * PrimeNG's z-index bases, with tooltips raised to 5000: PrimeNG already stacks a tooltip above the overlays it manages
+ * (dialogs, drawers, popovers), and the higher base keeps it above layers that set their own z-index too (a panel or
+ * page chrome with `z-index` in CSS), so a tooltip is never hidden under what it describes.
+ */
+declare const DW_PRIMENG_Z_INDEX: {
+    readonly modal: 1100;
+    readonly overlay: 1000;
+    readonly menu: 1000;
+    readonly tooltip: 5000;
+};
 /**
  * PrimeNG with the Dataworkz preset, dark mode on `[data-theme="dark"]`. Pass app-specific PrimeNG settings
  * (ripple, zIndex, translation…) as `config`; its `theme.options` are merged over crystal's.
@@ -649,4 +660,4 @@ declare const DW_PRIMENG_PT: {
  */
 declare function provideCrystalPrimeNG(config?: PrimeNGConfigType): EnvironmentProviders;
 
-export { AZURE_PRIMARY_RAMP, DW_COLOR_SCHEME, DW_DARK_MODE_SELECTOR, DW_PRESET_OVERRIDES, DW_PRIMENG_PT, DW_SELECT_PANEL_SM, DwPreset, provideCrystalPrimeNG };
+export { AZURE_PRIMARY_RAMP, DW_COLOR_SCHEME, DW_DARK_MODE_SELECTOR, DW_PRESET_OVERRIDES, DW_PRIMENG_PT, DW_PRIMENG_Z_INDEX, DW_SELECT_PANEL_SM, DwPreset, provideCrystalPrimeNG };

package/styles/components/form.css

@@ -233,7 +233,7 @@ dw-field.dw-field--inline:has(.dw-field__control :is(.p-inputtext-sm, .p-textare
 .dw-field__control > p-inputnumber,
 .dw-field__control > p-datepicker,
 .dw-field__control > p-autocomplete,
-.dw-field__control > :is(dw-select, dw-multiselect, dw-number-input) { width: 100%; }
+.dw-field__control > :is(dw-select, dw-multiselect, dw-number-input, dw-date-picker) { width: 100%; }
 .dw-field__error { display: inline-flex; align-items: center; gap: var(--dw-space-1); }
 /* Field errors are text only (the red text and border carry the state): no leading icon, even in
    hand-written error lines. */
@@ -637,7 +637,7 @@ body .dw-var-field .p-textarea {
 .dw-check-toggle.is-on .dw-check-toggle__label { color: var(--dw-text-strong); font-weight: var(--dw-font-weight-medium); }
 
 /* Compact calendar (inline in popovers): smaller day cells and type, quieter weekday row and a
-   tighter time picker. <p-datepicker styleClass="dw-datepicker--compact" [inline]="true" />.
+   tighter time picker. <dw-date-picker [compact]="true" [inline]="true" />.
    Two classes per rule so they outrank PrimeNG's own (unlayered) datepicker styles. */
 .dw-datepicker--compact .p-datepicker-header { padding: 0 0 var(--dw-space-2); }
 .dw-datepicker--compact .p-datepicker-title,
@@ -707,3 +707,9 @@ body .dw-var-field .p-textarea {
 .dw-number-input { display: inline-flex; min-width: 0; max-width: 100%; vertical-align: middle; }
 .dw-number-input > p-inputnumber { flex: 1 1 auto; min-width: 0; }
 .dw-number-input.dw-number-input--fluid { display: flex; width: 100%; }
+
+/* ── dw-date-picker (component): sized by the screen like dw-select; the inline calendar keeps its own width ── */
+.dw-date-picker { display: inline-flex; min-width: 0; max-width: 100%; vertical-align: middle; }
+.dw-date-picker > p-datepicker { flex: 1 1 auto; min-width: 0; }
+.dw-date-picker.dw-date-picker--fluid { display: flex; width: 100%; }
+.dw-date-picker.dw-date-picker--inline > p-datepicker { flex: none; }

package/styles/components/overlay.css

@@ -339,9 +339,24 @@ body .p-drawer-right {
 }
 .p-tooltip.dw-tooltip--multiline .p-tooltip-text { white-space: pre-line; }
 .p-tooltip.dw-tooltip--error .p-tooltip-text { background: var(--dw-status-danger-fg); color: var(--dw-text-inverse); }
+/* Preview (dwTooltipVariant="preview"): a long value shown whole, up to 720 × 340px, then scrolled; line breaks kept,
+   long tokens broken anywhere. Pair it with dwTooltipInteractive so the pointer can scroll it. */
+.p-tooltip.dw-tooltip--preview { width: auto; max-width: min(720px, 68vw); }
+.p-tooltip.dw-tooltip--preview .p-tooltip-text {
+  display: inline-block;
+  box-sizing: border-box;
+  width: max-content;
+  max-width: min(720px, 68vw);
+  max-height: min(42vh, 340px);
+  overflow: auto;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  font-size: var(--dw-font-size-12);
+  line-height: 1.45;
+}
 .p-tooltip.dw-tooltip--error .p-tooltip-arrow { border-top-color: var(--dw-status-danger-fg); }
 /* Long code / JSON: wide, scrollable, monospace, wrapped. */
-.p-tooltip.dw-tooltip--code { width: min(520px, calc(100vw - 48px)); max-width: min(520px, calc(100vw - 48px)); z-index: 5000; }
+.p-tooltip.dw-tooltip--code { width: min(520px, calc(100vw - 48px)); max-width: min(520px, calc(100vw - 48px)); }
 .p-tooltip.dw-tooltip--code .p-tooltip-text {
   display: block;
   width: 100%;

package/styles/crystal-no-fonts.css

@@ -5,7 +5,7 @@
  * Rules: colours only in tokens/primitives.css (everything else uses semantic tokens); font-family only in base.css.
  */
 /* PrimeIcons (pi pi-*): crystal's dependency, so an app never installs or loads it itself. Its font is local. */
-@import 'primeicons/primeicons.css';
+@import './icons.css';
 @import './tokens/primitives.css';
 @import './tokens/semantic.css';
 @import './tokens/semantic-dark.css';

package/styles/icons.css

@@ -0,0 +1,6 @@
+/*
+ * @dataworkz/crystal — the PrimeIcons font (`pi pi-*`, `<dw-icon pi>`), shipped as @dataworkz/crystal/styles/icons.css.
+ * Crystal depends on primeicons, so an app never installs or loads it itself: crystal.css / crystal-no-fonts.css import
+ * this file; an app that imports crystal's styles file by file imports it too. The font files are local (no CDN).
+ */
+@import 'primeicons/primeicons.css';