@dataworkz/crystal 0.1.0-beta.5 → 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). */
@@ -2455,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. */
@@ -2764,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.
  *
@@ -3311,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.5",
+  "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/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; }