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

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, NgControl, AbstractControl, NgModel, ControlValueAccessor } from '@angular/forms';
+import { ValidationErrors, AbstractControl, NgModel, NgControl, ControlValueAccessor } from '@angular/forms';
 import { MenuItem, SortMeta, SortEvent } from 'primeng/api';
 import { UrlTree } from '@angular/router';
 import { CdkDragDrop } from '@angular/cdk/drag-drop';
@@ -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<"error" | "default">;
+    readonly tone: _angular_core.InputSignal<"default" | "error">;
     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<NgControl | AbstractControl<any, any, any> | NgModel | null>;
+    readonly control: _angular_core.InputSignal<AbstractControl<any, any, any> | NgModel | NgControl | 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). */
@@ -2781,6 +2781,7 @@ type DwDateValue = Date | (Date | null)[];
  * <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" />
+ * <dw-date-picker [inline]="true" [flush]="true" [fluid]="true" [(ngModel)]="expiry" />
  * ```
  */
 declare class DwDatePickerComponent<T extends DwDateValue = Date> extends DwFormControl<T> {
@@ -2808,11 +2809,17 @@ declare class DwDatePickerComponent<T extends DwDateValue = Date> extends DwForm
     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>;
+    /**
+     * An inline calendar without a box of its own (border, fill, radius, padding): it sits on its container's surface,
+     * a popover's or a panel's, which pads it. Inline only.
+     */
+    readonly flush: _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>;
+    /** Fills its container: the field, or the inline calendar. */
     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>;
@@ -2824,7 +2831,7 @@ declare class DwDatePickerComponent<T extends DwDateValue = Date> extends DwForm
     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>;
+    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; }; "flush": { "alias": "flush"; "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';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataworkz/crystal",
-  "version": "0.1.0-beta.6",
+  "version": "0.1.0-beta.7",
   "description": "Dataworkz core UI for Angular: dw-* components, icons, toasts, design tokens, theme CSS and bundled fonts.",
   "license": "MIT",
   "author": "Dataworkz",

package/styles/components/form.css

@@ -708,8 +708,17 @@ body .dw-var-field .p-textarea {
 .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 (component): sized by the screen like dw-select; the inline calendar keeps its own width unless fluid ── */
 .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; }
+.dw-date-picker.dw-date-picker--inline.dw-date-picker--fluid > p-datepicker { flex: 1 1 auto; }
+/* flush: the inline calendar loses its own box and sits on its container's surface (a popover or a panel pads it). */
+.dw-date-picker.dw-date-picker--flush .p-datepicker-panel-inline {
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+}