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

package/index.d.ts

@@ -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.
@@ -2545,6 +2548,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 +2561,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 +2610,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 +2620,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 +2631,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 +2667,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>;
 }
 
 /**

package/package.json

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

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/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';