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

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';
@@ -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" | "lg" | "xs">;
+    readonly size: _angular_core.InputSignal<"sm" | "md" | "xs" | "lg">;
     /** 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" | "lg" | "xs" | "xl">;
+    readonly size: _angular_core.InputSignal<"sm" | "md" | "xs" | "lg" | "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" | "lg" | "xs">;
+    readonly size: _angular_core.InputSignal<"sm" | "md" | "xs" | "lg">;
     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<"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). */
@@ -1198,6 +1198,10 @@ declare const DW_MENU_PLAIN_GROUP = "dw-menu-plain-group";
  * <!-- external trigger -->
  * <dw-button label="Create" trailingIcon="pi pi-chevron-down" (clicked)="createMenu.toggle($event)" />
  * <dw-menu #createMenu [items]="createItems" trigger="none" />
+ *
+ * <!-- context menu: opens at the pointer; commands get what was right-clicked -->
+ * <div (contextmenu)="rowMenu.openAt($event, row)">…</div>
+ * <dw-menu #rowMenu [items]="rowItems" trigger="none" />
  * ```
  * Items with `danger: true` are styled red and separated from the rest.
  *
@@ -1224,6 +1228,8 @@ declare class DwMenuComponent<T = unknown> {
     readonly closed: _angular_core.OutputEmitterRef<void>;
     readonly itemClick: _angular_core.OutputEmitterRef<DwMenuItem<T>>;
     readonly open: _angular_core.WritableSignal<boolean>;
+    /** Set by `openAt`: where the panel goes and the context its commands get, until opened another way. */
+    private readonly atPoint;
     readonly header: _angular_core.Signal<DwMenuHeaderDirective | undefined>;
     private readonly listMenu;
     private readonly tieredMenu;
@@ -1231,6 +1237,12 @@ declare class DwMenuComponent<T = unknown> {
     readonly model: _angular_core.Signal<MenuItem[]>;
     toggle(event: Event): void;
     show(event: Event): void;
+    /**
+     * Opens the menu as a context menu: at the pointer (kept inside the viewport) instead of under a trigger, without the
+     * browser's own menu. Commands receive `context` (what was right-clicked) instead of the `context` input. Opening
+     * it again while it is open moves it.
+     */
+    openAt(event: MouseEvent, context?: T | null): void;
     hide(): void;
     onShow(): void;
     onHide(): void;
@@ -1243,6 +1255,8 @@ declare class DwMenuComponent<T = unknown> {
     private groupLooseItems;
     private toMenuItems;
     private toMenuItem;
+    /** Puts the panel's corner at the pointer, flipping left / up where it would leave the viewport. */
+    private placeAtPoint;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DwMenuComponent<any>, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<DwMenuComponent<any>, "dw-menu", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "context": { "alias": "context"; "required": false; "isSignal": true; }; "trigger": { "alias": "trigger"; "required": false; "isSignal": true; }; "triggerIcon": { "alias": "triggerIcon"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "triggerVariant": { "alias": "triggerVariant"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "appendTo": { "alias": "appendTo"; "required": false; "isSignal": true; }; "styleClass": { "alias": "styleClass"; "required": false; "isSignal": true; }; "testId": { "alias": "testId"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; }, { "opened": "opened"; "closed": "closed"; "itemClick": "itemClick"; }, ["header"], never, true, never>;
 }
@@ -2781,6 +2795,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> {
@@ -2795,7 +2810,7 @@ declare class DwDatePickerComponent<T extends DwDateValue = Date> extends DwForm
     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">;
+    readonly selectionMode: _angular_core.InputSignal<"single" | "multiple" | "range">;
     /** Shows the calendar itself, always open, instead of a field. */
     readonly inline: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly numberOfMonths: _angular_core.InputSignalWithTransform<number, unknown>;
@@ -2808,11 +2823,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 +2845,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';
@@ -2875,6 +2896,114 @@ declare class DwChartComponent {
     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>;
 }
 
+/**
+ * A node of a `dw-tree`. `children` are its sub-nodes; a node with `leaf: false` and no children yet shows an expand
+ * toggle, for children loaded when it opens (`nodeExpand`). The tree sets `expanded`, `parent` and, for checkboxes,
+ * `partialSelected` as the user works it.
+ */
+interface DwTreeNode<T = unknown> {
+    /** Unique among the tree's nodes; selection and re-renders match nodes by it. */
+    key?: string;
+    label?: string;
+    data?: T;
+    /** A `pi pi-…` icon before the label; `expandedIcon` / `collapsedIcon` swap it as the node opens. */
+    icon?: string;
+    expandedIcon?: string;
+    collapsedIcon?: string;
+    children?: DwTreeNode<T>[];
+    /** `false`: can be expanded although it has no children yet. */
+    leaf?: boolean;
+    expanded?: boolean;
+    /** `false`: shown, but cannot be selected. */
+    selectable?: boolean;
+    /** Shows a spinner in place of the toggle while its children load. */
+    loading?: boolean;
+    partialSelected?: boolean;
+    parent?: DwTreeNode<T>;
+    /** A class on the node's row, for the screen's own layout of its content. */
+    styleClass?: string;
+}
+/** The node a `dw-tree` event is about, with the browser event that caused it. */
+interface DwTreeNodeEvent<T = unknown> {
+    originalEvent: Event;
+    node: DwTreeNode<T>;
+}
+/** What a tree selects: one node (`single`), or a list of them (`multiple`, `checkbox`). */
+type DwTreeSelection<T = unknown> = DwTreeNode<T> | DwTreeNode<T>[] | null;
+/**
+ * A node's content, instead of its label: `<ng-template dwTreeNode let-node>…</ng-template>`. `node` is the
+ * `DwTreeNode`, untyped in the template (as in PrimeNG's own), so it can read the screen's own `data`.
+ */
+declare class DwTreeNodeDirective {
+    readonly template: TemplateRef<{
+        $implicit: DwTreeNode;
+    }>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DwTreeNodeDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DwTreeNodeDirective, "ng-template[dwTreeNode]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * Crystal's tree, PrimeNG's Tree underneath, which the app never imports. Nodes open and close with their toggle or the
+ * arrow keys; a tree can select one node, several (with modifier keys), or check them (`checkbox`, where checking a
+ * parent checks its children and a parent of partly checked children shows a dash).
+ *
+ * Children can load when a node opens: give it `leaf: false`, then fill `children` in `nodeExpand` (set `loading` on
+ * the node meanwhile). `contextMenu` takes a `dw-menu` (`trigger="none"`) that opens at the pointer on right-click, its
+ * commands receiving the node.
+ *
+ * The tree has no box of its own and sits on its container; `framed` gives it a border and padding, and
+ * `scrollHeight` a height after which it scrolls. `.dw-tree` (no `-view`) is the markup-only guide-line tree for
+ * hand-built lists.
+ *
+ * ```html
+ * <dw-tree [value]="folders" selectionMode="single" [(selection)]="folder" (nodeExpand)="loadChildren($event.node)" />
+ * <dw-tree [value]="privileges" selectionMode="checkbox" [(selection)]="granted" scrollHeight="320px" [framed]="true" />
+ * <dw-tree [value]="dirs" [contextMenu]="dirMenu" ariaLabel="Directories">
+ *   <ng-template dwTreeNode let-node><span class="dw-truncate">{{ node.label }}</span></ng-template>
+ * </dw-tree>
+ * <dw-menu #dirMenu [items]="dirActions" trigger="none" />
+ * ```
+ */
+declare class DwTreeComponent<T = unknown> {
+    readonly value: _angular_core.InputSignal<DwTreeNode<T>[] | null | undefined>;
+    /** No selection (`null`), one node, several with Ctrl / Cmd and Shift (`multiple`), or checkboxes. */
+    readonly selectionMode: _angular_core.InputSignal<"single" | "multiple" | "checkbox" | null>;
+    /** The selected node, or nodes (`multiple`, `checkbox`). */
+    readonly selection: _angular_core.ModelSignal<DwTreeSelection<T>>;
+    /** Checkboxes: checking a node checks its children, and its parent once all of them are. */
+    readonly propagateSelection: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** A loading state for the whole tree, its nodes dimmed under a spinner (`mask`), or a spinner beside them (`icon`). */
+    readonly loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly loadingMode: _angular_core.InputSignal<"mask" | "icon">;
+    /** A CSS height after which the tree scrolls (`320px`, `calc(100vh - 250px)`); it grows with its nodes when omitted. */
+    readonly scrollHeight: _angular_core.InputSignal<string | undefined>;
+    /** Shown when there are no nodes. */
+    readonly emptyMessage: _angular_core.InputSignal<string>;
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
+    /** A border, radius and padding around the tree, for one that is not already inside a framed surface. */
+    readonly framed: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** A `dw-menu` (`trigger="none"`) opened at the pointer when a node is right-clicked; its commands get the node. */
+    readonly contextMenu: _angular_core.InputSignal<DwMenuComponent<DwTreeNode<T>> | undefined>;
+    readonly nodeSelect: _angular_core.OutputEmitterRef<DwTreeNodeEvent<T>>;
+    readonly nodeUnselect: _angular_core.OutputEmitterRef<DwTreeNodeEvent<T>>;
+    /** A node opened: the moment to load its children. */
+    readonly nodeExpand: _angular_core.OutputEmitterRef<DwTreeNodeEvent<T>>;
+    readonly nodeCollapse: _angular_core.OutputEmitterRef<DwTreeNodeEvent<T>>;
+    /** A node was right-clicked, with `contextMenu` set; the menu is opening. */
+    readonly nodeContextMenu: _angular_core.OutputEmitterRef<DwTreeNodeEvent<T>>;
+    protected readonly nodeTemplate: _angular_core.Signal<DwTreeNodeDirective | undefined>;
+    /**
+     * PrimeNG shows its context menu itself, before saying which node it is for; it gets this stand-in, and the
+     * `dw-menu` opens once the node is known (`openMenu`).
+     */
+    protected readonly menuBridge: _angular_core.Signal<{
+        show: () => undefined;
+        hide: () => void | undefined;
+    } | undefined>;
+    protected openMenu(event: DwTreeNodeEvent<T>): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DwTreeComponent<any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DwTreeComponent<any>, "dw-tree", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "selectionMode": { "alias": "selectionMode"; "required": false; "isSignal": true; }; "selection": { "alias": "selection"; "required": false; "isSignal": true; }; "propagateSelection": { "alias": "propagateSelection"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "loadingMode": { "alias": "loadingMode"; "required": false; "isSignal": true; }; "scrollHeight": { "alias": "scrollHeight"; "required": false; "isSignal": true; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "framed": { "alias": "framed"; "required": false; "isSignal": true; }; "contextMenu": { "alias": "contextMenu"; "required": false; "isSignal": true; }; }, { "selection": "selectionChange"; "nodeSelect": "nodeSelect"; "nodeUnselect": "nodeUnselect"; "nodeExpand": "nodeExpand"; "nodeCollapse": "nodeCollapse"; "nodeContextMenu": "nodeContextMenu"; }, ["nodeTemplate"], never, true, never>;
+}
+
 /**
  * Backend timestamp normalization.
  *
@@ -3422,5 +3551,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, 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 };
+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, DwTreeComponent, DwTreeNodeDirective, 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, DwTreeNode, DwTreeNodeEvent, DwTreeSelection };

package/package.json

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

package/styles/components/data.css

@@ -138,6 +138,18 @@ body .p-treetable .p-treetable-tbody > tr.p-treetable-row-selected {
   border-left: 1px solid var(--dw-tree-spine);
 }
 
+/* dw-tree: no box of its own (it sits on its container); --framed draws one. Node content fills the row, so a
+   dwTreeNode template can lay out across it. */
+.dw-tree-view { display: block; min-width: 0; }
+.dw-tree-view > .p-tree { padding: 0; border: 0; border-radius: 0; background: transparent; }
+.dw-tree-view.dw-tree-view--framed > .p-tree {
+  padding: var(--dw-space-2);
+  border: 1px solid var(--dw-border-strong);
+  border-radius: var(--dw-radius-control);
+  background: var(--dw-surface);
+}
+.dw-tree-view .p-tree-node-label { flex: 1 1 auto; min-width: 0; }
+
 /* ── Skeleton ── */
 .dw-skeleton {
   height: 20px;

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;
+}