@dataworkz/crystal 0.1.0-beta.2 → 0.1.0-beta.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +38 -0
- package/fesm2022/dataworkz-crystal-icons.mjs +1 -1
- package/fesm2022/dataworkz-crystal-icons.mjs.map +1 -1
- package/fesm2022/dataworkz-crystal-primeng.mjs +2 -2
- package/fesm2022/dataworkz-crystal-primeng.mjs.map +1 -1
- package/fesm2022/dataworkz-crystal.mjs +966 -32
- package/fesm2022/dataworkz-crystal.mjs.map +1 -1
- package/icons/index.d.ts +4 -2
- package/index.d.ts +429 -19
- package/package.json +4 -7
- package/primeng/index.d.ts +2 -2
- package/styles/components/content.css +5 -0
- package/styles/components/form.css +33 -2
- package/styles/crystal-no-fonts.css +2 -0
package/index.d.ts
CHANGED
|
@@ -1,12 +1,15 @@
|
|
|
1
1
|
import * as _angular_core from '@angular/core';
|
|
2
|
-
import { InjectionToken, EnvironmentProviders, OnDestroy, TemplateRef } from '@angular/core';
|
|
3
|
-
import { StorageIconSet } from '@dataworkz/crystal/icons';
|
|
4
|
-
export { DW_ICON_NAMES, DW_ICON_PREFIX, DwIconName, IconName, dwIconName, icon } from '@dataworkz/crystal/icons';
|
|
2
|
+
import { InjectionToken, EnvironmentProviders, OnDestroy, TemplateRef, OnInit } from '@angular/core';
|
|
3
|
+
import { StorageIconSet, DwPrimeIcon } from '@dataworkz/crystal/icons';
|
|
4
|
+
export { DW_ICON_NAMES, DW_ICON_PREFIX, DwIconName, DwPrimeIcon, IconName, dwIconName, icon } from '@dataworkz/crystal/icons';
|
|
5
5
|
import { ValidationErrors, AbstractControl, NgModel, NgControl, ControlValueAccessor } from '@angular/forms';
|
|
6
6
|
import { MenuItem, SortMeta, SortEvent } from 'primeng/api';
|
|
7
7
|
import { UrlTree } from '@angular/router';
|
|
8
8
|
import { CdkDragDrop } from '@angular/cdk/drag-drop';
|
|
9
9
|
import { Observable } from 'rxjs';
|
|
10
|
+
import * as i1 from 'primeng/tooltip';
|
|
11
|
+
import * as i1$1 from 'primeng/inputtext';
|
|
12
|
+
import * as i2 from 'primeng/textarea';
|
|
10
13
|
import { TablePageEvent, Table } from 'primeng/table';
|
|
11
14
|
import { SafeHtml } from '@angular/platform-browser';
|
|
12
15
|
|
|
@@ -596,7 +599,7 @@ declare class DwMeterComponent {
|
|
|
596
599
|
* "Show deprecated" beside a list's search, "Tree view" beside a tree's. Controlled: it shows
|
|
597
600
|
* `checked` and emits the flipped value; the host decides.
|
|
598
601
|
*
|
|
599
|
-
* A button with role="checkbox" rather than a
|
|
602
|
+
* A button with role="checkbox" rather than a `<label>`-wrapped `<input>`: a label-wrapped input
|
|
600
603
|
* forwards a synthetic click to the input, which bubbles back to the label and double-fires.
|
|
601
604
|
*
|
|
602
605
|
* ```html
|
|
@@ -935,12 +938,12 @@ type DwShowErrorsWhen = 'touched' | 'dirty' | 'touchedOrDirty' | 'always';
|
|
|
935
938
|
*
|
|
936
939
|
* ```html
|
|
937
940
|
* <dw-field label="Name" [control]="form.controls.name" help="Shown to end users" [maxLength]="100">
|
|
938
|
-
* <input
|
|
941
|
+
* <input dwInput formControlName="name" />
|
|
939
942
|
* </dw-field>
|
|
940
943
|
*
|
|
941
944
|
* <dw-field label="Prompt" layout="inline" info="Supports {{ '{{' }}variables}}">
|
|
942
945
|
* <a dwFieldActions class="dw-link" (click)="generate()">Generate with AI</a>
|
|
943
|
-
* <textarea
|
|
946
|
+
* <textarea dwInput [(ngModel)]="prompt" #p="ngModel" required></textarea>
|
|
944
947
|
* </dw-field>
|
|
945
948
|
*
|
|
946
949
|
* <dw-field label="Region" [error]="regionError">…</dw-field> <!-- template-driven / manual -->
|
|
@@ -1325,7 +1328,7 @@ declare class DwCardComponent {
|
|
|
1325
1328
|
static ɵcmp: _angular_core.ɵɵComponentDeclaration<DwCardComponent, "dw-card", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "clampLines": { "alias": "clampLines"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "iconTint": { "alias": "iconTint"; "required": false; "isSignal": true; }; "badge": { "alias": "badge"; "required": false; "isSignal": true; }; "badgeTone": { "alias": "badgeTone"; "required": false; "isSignal": true; }; "tooltip": { "alias": "tooltip"; "required": false; "isSignal": true; }; "interactive": { "alias": "interactive"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "disabledReason": { "alias": "disabledReason"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "menuItems": { "alias": "menuItems"; "required": false; "isSignal": true; }; "menuContext": { "alias": "menuContext"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "labelStyle": { "alias": "labelStyle"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "valueSuffix": { "alias": "valueSuffix"; "required": false; "isSignal": true; }; "infoPosition": { "alias": "infoPosition"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "hasBody": { "alias": "hasBody"; "required": false; "isSignal": true; }; "testId": { "alias": "testId"; "required": false; "isSignal": true; }; }, { "activate": "activate"; }, never, ["*", "[dwStatLabelEnd]", "[dwCardHeaderEnd]", "[dwCardTags]", "[dwCardFooter]"], true, never>;
|
|
1326
1329
|
}
|
|
1327
1330
|
|
|
1328
|
-
/** Marks the switch (usually `<
|
|
1331
|
+
/** Marks the switch (usually `<dw-switch formControlName=…>`) shown at the card's leading edge. */
|
|
1329
1332
|
declare class DwToggleCardControlDirective {
|
|
1330
1333
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<DwToggleCardControlDirective, never>;
|
|
1331
1334
|
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DwToggleCardControlDirective, "[dwToggleCardControl]", never, {}, {}, never, never, true, never>;
|
|
@@ -1348,7 +1351,7 @@ declare class DwToggleCardBodyDirective {
|
|
|
1348
1351
|
* <dw-toggle-card title="Full Text Search Index" description="Enable full text search"
|
|
1349
1352
|
* icon="pi pi-search" [expanded]="form.value.fullTextSearchIndex"
|
|
1350
1353
|
* [disabledReason]="graphDbOn ? '' : 'Requires Graph Database Storage to be enabled'">
|
|
1351
|
-
* <
|
|
1354
|
+
* <dw-switch dwToggleCardControl formControlName="fullTextSearchIndex" />
|
|
1352
1355
|
* <ng-template dwToggleCardBody>…configuration fields…</ng-template>
|
|
1353
1356
|
* </dw-toggle-card>
|
|
1354
1357
|
* ```
|
|
@@ -2344,6 +2347,401 @@ declare class DwTooltipIfTruncatedDirective {
|
|
|
2344
2347
|
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DwTooltipIfTruncatedDirective, "[dwTooltipIfTruncated]", never, { "truncationTarget": { "alias": "truncationTarget"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
2345
2348
|
}
|
|
2346
2349
|
|
|
2350
|
+
type DwTooltipPosition = 'top' | 'bottom' | 'left' | 'right';
|
|
2351
|
+
/** `multiline` keeps line breaks (up to 360px), `code` monospace, `error` danger red, `toolbar` a slate chip. */
|
|
2352
|
+
type DwTooltipVariant = 'default' | 'multiline' | 'code' | 'error' | 'toolbar';
|
|
2353
|
+
/**
|
|
2354
|
+
* A tooltip on any element, in crystal's look (PrimeNG's Tooltip underneath, which the app never imports). It opens
|
|
2355
|
+
* on hover and focus, above the element unless told otherwise, appended to `<body>` so nothing clips it.
|
|
2356
|
+
*
|
|
2357
|
+
* ```html
|
|
2358
|
+
* <button dwTooltip="Refresh">…</button>
|
|
2359
|
+
* <span [dwTooltip]="fullName" dwTooltipPosition="bottom" [dwTooltipDelay]="300">{{ shortName }}</span>
|
|
2360
|
+
* <i dwTooltip="Line one line two" dwTooltipVariant="multiline"></i>
|
|
2361
|
+
* <span [dwTooltip]="token" [dwTooltipInteractive]="true">Token</span> <!-- hover into it to copy -->
|
|
2362
|
+
* ```
|
|
2363
|
+
*/
|
|
2364
|
+
declare class DwTooltipDirective {
|
|
2365
|
+
private readonly prime;
|
|
2366
|
+
readonly dwTooltipPosition: _angular_core.InputSignal<DwTooltipPosition>;
|
|
2367
|
+
/** Milliseconds before it opens. */
|
|
2368
|
+
readonly dwTooltipDelay: _angular_core.InputSignal<number>;
|
|
2369
|
+
readonly dwTooltipVariant: _angular_core.InputSignal<DwTooltipVariant>;
|
|
2370
|
+
/** Stays open while the pointer moves onto it, so its text can be selected and copied. */
|
|
2371
|
+
readonly dwTooltipInteractive: _angular_core.InputSignal<boolean>;
|
|
2372
|
+
constructor();
|
|
2373
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<DwTooltipDirective, never>;
|
|
2374
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DwTooltipDirective, "[dwTooltip]", never, { "dwTooltipPosition": { "alias": "dwTooltipPosition"; "required": false; "isSignal": true; }; "dwTooltipDelay": { "alias": "dwTooltipDelay"; "required": false; "isSignal": true; }; "dwTooltipVariant": { "alias": "dwTooltipVariant"; "required": false; "isSignal": true; }; "dwTooltipInteractive": { "alias": "dwTooltipInteractive"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1.Tooltip; inputs: { "pTooltip": "dwTooltip"; "tooltipDisabled": "dwTooltipDisabled"; }; outputs: {}; }]>;
|
|
2375
|
+
}
|
|
2376
|
+
|
|
2377
|
+
type DwInputSize = 'sm' | 'md' | 'lg';
|
|
2378
|
+
/**
|
|
2379
|
+
* Crystal's text input: a native `<input>` in crystal's look (PrimeNG's InputText underneath, which the app never
|
|
2380
|
+
* imports). Works with ngModel and reactive forms, and inside `dw-field`, which wires its label and error.
|
|
2381
|
+
*
|
|
2382
|
+
* ```html
|
|
2383
|
+
* <input dwInput placeholder="Name" [(ngModel)]="name" />
|
|
2384
|
+
* <input dwInput size="sm" type="number" formControlName="limit" />
|
|
2385
|
+
* <input dwInput [fluid]="true" [invalid]="!!serverError" />
|
|
2386
|
+
* ```
|
|
2387
|
+
*/
|
|
2388
|
+
declare class DwInputDirective {
|
|
2389
|
+
private readonly prime;
|
|
2390
|
+
/** `md` by default; `sm` matches small buttons (28px). Shadows the native character-count `size` attribute. */
|
|
2391
|
+
set size(size: DwInputSize | null | undefined);
|
|
2392
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<DwInputDirective, never>;
|
|
2393
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DwInputDirective, "input[dwInput]", never, { "size": { "alias": "size"; "required": false; }; }, {}, never, never, true, [{ directive: typeof i1$1.InputText; inputs: { "fluid": "fluid"; "invalid": "invalid"; }; outputs: {}; }]>;
|
|
2394
|
+
}
|
|
2395
|
+
/**
|
|
2396
|
+
* Crystal's multi-line text input: a native `<textarea>` in crystal's look (PrimeNG's Textarea underneath).
|
|
2397
|
+
* `autoResize` grows it with its content.
|
|
2398
|
+
*
|
|
2399
|
+
* ```html
|
|
2400
|
+
* <textarea dwInput rows="3" [(ngModel)]="prompt"></textarea>
|
|
2401
|
+
* <textarea dwInput [autoResize]="true" formControlName="notes"></textarea>
|
|
2402
|
+
* ```
|
|
2403
|
+
*/
|
|
2404
|
+
declare class DwTextareaDirective {
|
|
2405
|
+
private readonly prime;
|
|
2406
|
+
/** `md` by default; `sm` uses the 12px type. */
|
|
2407
|
+
set size(size: DwInputSize | null | undefined);
|
|
2408
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<DwTextareaDirective, never>;
|
|
2409
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DwTextareaDirective, "textarea[dwInput]", never, { "size": { "alias": "size"; "required": false; }; }, {}, never, never, true, [{ directive: typeof i2.Textarea; inputs: { "autoResize": "autoResize"; "fluid": "fluid"; "invalid": "invalid"; }; outputs: {}; }]>;
|
|
2410
|
+
}
|
|
2411
|
+
/** Both: `imports: [DW_INPUT]` covers `<input dwInput>` and `<textarea dwInput>`. */
|
|
2412
|
+
declare const DW_INPUT: readonly [typeof DwInputDirective, typeof DwTextareaDirective];
|
|
2413
|
+
|
|
2414
|
+
/**
|
|
2415
|
+
* What every crystal form control shares (dw-select, dw-checkbox, dw-switch…): it works with ngModel, formControlName
|
|
2416
|
+
* and formControl, or on its own through `[(value)]`; it is disabled by the form or by `disabled`; and it shows
|
|
2417
|
+
* itself invalid once its control is invalid and touched or dirty (as crystal's inputs do), or when `invalid` says so.
|
|
2418
|
+
*
|
|
2419
|
+
* A subclass renders its PrimeNG control from `isDisabled()` and `showInvalid()` and hands it to `drive()`, which keeps
|
|
2420
|
+
* it in step with `value()`; or it calls `commit(value)` itself when the user changes the value, and `markTouched()`
|
|
2421
|
+
* when the control loses focus.
|
|
2422
|
+
*/
|
|
2423
|
+
declare abstract class DwFormControl<T> implements ControlValueAccessor, OnInit {
|
|
2424
|
+
private readonly ngControl;
|
|
2425
|
+
private readonly destroyRef;
|
|
2426
|
+
/** The value, for use without forms: `[(value)]`. With forms, bind ngModel / formControlName instead. */
|
|
2427
|
+
readonly value: _angular_core.ModelSignal<T | null>;
|
|
2428
|
+
readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
2429
|
+
/** Shows the invalid state whatever the form says (e.g. a server error). */
|
|
2430
|
+
readonly invalid: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
2431
|
+
/** The user changed the value (not emitted when the form or `[value]` sets one). */
|
|
2432
|
+
readonly changed: _angular_core.OutputEmitterRef<T | null>;
|
|
2433
|
+
private readonly formDisabled;
|
|
2434
|
+
/** Bumped on every status / value / touched event of the bound control, so `showInvalid` re-evaluates. */
|
|
2435
|
+
private readonly controlEvents;
|
|
2436
|
+
readonly isDisabled: _angular_core.Signal<boolean>;
|
|
2437
|
+
readonly showInvalid: _angular_core.Signal<boolean>;
|
|
2438
|
+
private onChange;
|
|
2439
|
+
private onTouched;
|
|
2440
|
+
constructor();
|
|
2441
|
+
ngOnInit(): void;
|
|
2442
|
+
writeValue(value: T | null | undefined): void;
|
|
2443
|
+
registerOnChange(fn: (value: T | null) => void): void;
|
|
2444
|
+
registerOnTouched(fn: () => void): void;
|
|
2445
|
+
setDisabledState(disabled: boolean): void;
|
|
2446
|
+
/** The user changed the value. */
|
|
2447
|
+
protected commit(value: T | null): void;
|
|
2448
|
+
/**
|
|
2449
|
+
* Keeps a PrimeNG control (its own value accessor) in step with this one, synchronously: the value goes in through
|
|
2450
|
+
* its `writeValue`, the user's changes and blurs come back. Call from the constructor with the control's viewChild.
|
|
2451
|
+
* (A second ngModel on the PrimeNG control would write a microtask after the app's, one render behind.)
|
|
2452
|
+
* `prepare` runs just before each write, for inputs the control reads while writing (a radio's own value).
|
|
2453
|
+
* Only this control's value and what `prepare` reads are tracked: PrimeNG's own signals, which `writeValue` reads and
|
|
2454
|
+
* sets, are not, or a write that changes one would run the effect again, without end.
|
|
2455
|
+
*/
|
|
2456
|
+
protected drive<C extends DwPrimeValueAccessor<T>>(prime: () => C | undefined, prepare?: (control: C) => void): void;
|
|
2457
|
+
/** The control lost focus. */
|
|
2458
|
+
protected markTouched(): void;
|
|
2459
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<DwFormControl<any>, never>;
|
|
2460
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DwFormControl<any>, never, never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "changed": "changed"; }, never, never, true, never>;
|
|
2461
|
+
}
|
|
2462
|
+
/** The part of a PrimeNG form control that `drive()` uses: Angular's value accessor. */
|
|
2463
|
+
interface DwPrimeValueAccessor<T> {
|
|
2464
|
+
writeValue(value: T | null): void;
|
|
2465
|
+
registerOnChange(fn: (value: T | null) => void): void;
|
|
2466
|
+
registerOnTouched(fn: () => void): void;
|
|
2467
|
+
}
|
|
2468
|
+
type DwControlSize = 'sm' | 'md' | 'lg';
|
|
2469
|
+
/** Crystal's control sizes in PrimeNG's words: `md` is PrimeNG's default. */
|
|
2470
|
+
declare function primeSize(size: DwControlSize): 'small' | 'large' | undefined;
|
|
2471
|
+
|
|
2472
|
+
/** Context of an option template: the option itself. */
|
|
2473
|
+
interface DwSelectOptionContext<T = unknown> {
|
|
2474
|
+
$implicit: T;
|
|
2475
|
+
}
|
|
2476
|
+
/**
|
|
2477
|
+
* How each option of a dw-select / dw-multiselect is drawn in its list.
|
|
2478
|
+
*
|
|
2479
|
+
* ```html
|
|
2480
|
+
* <dw-select [options]="llms" optionLabel="name" optionValue="id" [(ngModel)]="llmId">
|
|
2481
|
+
* <ng-template dwSelectOption let-llm><dw-entity-icon kind="llm" [type]="llm.provider" /> {{ llm.name }}</ng-template>
|
|
2482
|
+
* </dw-select>
|
|
2483
|
+
* ```
|
|
2484
|
+
*/
|
|
2485
|
+
declare class DwSelectOptionDirective<T = unknown> {
|
|
2486
|
+
readonly template: TemplateRef<DwSelectOptionContext<T>>;
|
|
2487
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<DwSelectOptionDirective<any>, never>;
|
|
2488
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DwSelectOptionDirective<any>, "ng-template[dwSelectOption]", never, {}, {}, never, never, true, never>;
|
|
2489
|
+
}
|
|
2490
|
+
/** How a dw-select draws its selected option in the closed control (defaults to the option template's look). */
|
|
2491
|
+
declare class DwSelectValueDirective<T = unknown> {
|
|
2492
|
+
readonly template: TemplateRef<DwSelectOptionContext<T>>;
|
|
2493
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<DwSelectValueDirective<any>, never>;
|
|
2494
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DwSelectValueDirective<any>, "ng-template[dwSelectValue]", never, {}, {}, never, never, true, never>;
|
|
2495
|
+
}
|
|
2496
|
+
/** Content under the option list (e.g. a "Create new" action). */
|
|
2497
|
+
declare class DwSelectFooterDirective {
|
|
2498
|
+
readonly template: TemplateRef<void>;
|
|
2499
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<DwSelectFooterDirective, never>;
|
|
2500
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DwSelectFooterDirective, "ng-template[dwSelectFooter]", never, {}, {}, never, never, true, never>;
|
|
2501
|
+
}
|
|
2502
|
+
|
|
2503
|
+
/**
|
|
2504
|
+
* Crystal's single select (PrimeNG's Select underneath, which the app never imports). The option list is appended to
|
|
2505
|
+
* `<body>`, as wide as the control; long options end in an ellipsis. Works with ngModel and reactive forms, inside
|
|
2506
|
+
* `dw-field`, or on its own with `[(value)]`.
|
|
2507
|
+
*
|
|
2508
|
+
* ```html
|
|
2509
|
+
* <dw-select [options]="regions" optionLabel="name" optionValue="id" placeholder="Region" formControlName="region" />
|
|
2510
|
+
* <dw-select size="sm" [options]="llms" [(ngModel)]="llm" [filter]="true" filterBy="name" (changed)="save($event)">
|
|
2511
|
+
* <ng-template dwSelectOption let-llm>{{ llm.name }}</ng-template>
|
|
2512
|
+
* </dw-select>
|
|
2513
|
+
* <dw-select [options]="providers" [readonly]="true" [(value)]="provider" />
|
|
2514
|
+
* ```
|
|
2515
|
+
*/
|
|
2516
|
+
declare class DwSelectComponent<T = unknown> extends DwFormControl<T> {
|
|
2517
|
+
readonly options: _angular_core.InputSignal<unknown[] | null | undefined>;
|
|
2518
|
+
/** The option field to show; options are shown as they are when omitted (strings, numbers). */
|
|
2519
|
+
readonly optionLabel: _angular_core.InputSignal<string | undefined>;
|
|
2520
|
+
/** The option field to bind; the whole option is the value when omitted. */
|
|
2521
|
+
readonly optionValue: _angular_core.InputSignal<string | undefined>;
|
|
2522
|
+
/** The option field that disables an option. */
|
|
2523
|
+
readonly optionDisabled: _angular_core.InputSignal<string | undefined>;
|
|
2524
|
+
/** The field that identifies an option when the value is an object. */
|
|
2525
|
+
readonly dataKey: _angular_core.InputSignal<string | undefined>;
|
|
2526
|
+
readonly placeholder: _angular_core.InputSignal<string | undefined>;
|
|
2527
|
+
/** A search box at the top of the list. */
|
|
2528
|
+
readonly filter: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
2529
|
+
/** Fields to search, comma-separated; the label by default. */
|
|
2530
|
+
readonly filterBy: _angular_core.InputSignal<string | undefined>;
|
|
2531
|
+
readonly filterPlaceholder: _angular_core.InputSignal<string | undefined>;
|
|
2532
|
+
readonly emptyMessage: _angular_core.InputSignal<string>;
|
|
2533
|
+
readonly emptyFilterMessage: _angular_core.InputSignal<string>;
|
|
2534
|
+
readonly loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
2535
|
+
/** A clear (×) button once something is selected. */
|
|
2536
|
+
readonly showClear: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
2537
|
+
/** Lets the user type a value of their own. */
|
|
2538
|
+
readonly editable: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
2539
|
+
/** Height of the list before it scrolls. */
|
|
2540
|
+
readonly scrollHeight: _angular_core.InputSignal<string>;
|
|
2541
|
+
readonly autofocus: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
2542
|
+
readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
|
|
2543
|
+
/** Id of the focusable element, for a `<label for>` outside dw-field. */
|
|
2544
|
+
readonly inputId: _angular_core.InputSignal<string | undefined>;
|
|
2545
|
+
readonly size: _angular_core.InputSignal<DwControlSize>;
|
|
2546
|
+
/** Fills the width of its container. */
|
|
2547
|
+
readonly fluid: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
2548
|
+
/** Reads as a fixed value, not a control: no arrow, the value in body text. */
|
|
2549
|
+
readonly readonly: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
2550
|
+
readonly opened: _angular_core.OutputEmitterRef<void>;
|
|
2551
|
+
readonly closed: _angular_core.OutputEmitterRef<void>;
|
|
2552
|
+
readonly focused: _angular_core.OutputEmitterRef<void>;
|
|
2553
|
+
readonly blurred: _angular_core.OutputEmitterRef<void>;
|
|
2554
|
+
protected readonly optionTemplate: _angular_core.Signal<DwSelectOptionDirective<any> | undefined>;
|
|
2555
|
+
protected readonly valueTemplate: _angular_core.Signal<DwSelectValueDirective<any> | undefined>;
|
|
2556
|
+
protected readonly footerTemplate: _angular_core.Signal<DwSelectFooterDirective | undefined>;
|
|
2557
|
+
protected readonly primeSize: _angular_core.Signal<"small" | "large" | undefined>;
|
|
2558
|
+
private readonly prime;
|
|
2559
|
+
constructor();
|
|
2560
|
+
/** Opens the list (e.g. when an editable select's text is clicked). */
|
|
2561
|
+
open(): void;
|
|
2562
|
+
close(): void;
|
|
2563
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<DwSelectComponent<any>, never>;
|
|
2564
|
+
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>;
|
|
2565
|
+
}
|
|
2566
|
+
|
|
2567
|
+
/**
|
|
2568
|
+
* Crystal's multiple select (PrimeNG's MultiSelect underneath, which the app never imports): a checkbox per option,
|
|
2569
|
+
* a search box and "select all" by default, the picks shown as a comma list (or chips) up to `maxSelectedLabels`.
|
|
2570
|
+
* The list is appended to `<body>`. Its value is an array.
|
|
2571
|
+
*
|
|
2572
|
+
* ```html
|
|
2573
|
+
* <dw-multiselect [options]="tags" optionLabel="name" optionValue="id" placeholder="Tags" formControlName="tags" />
|
|
2574
|
+
* <dw-multiselect [options]="columns" [(ngModel)]="shown" display="chip" [filter]="false" />
|
|
2575
|
+
* ```
|
|
2576
|
+
*/
|
|
2577
|
+
declare class DwMultiselectComponent<T = unknown> extends DwFormControl<T[]> {
|
|
2578
|
+
readonly options: _angular_core.InputSignal<unknown[] | undefined>;
|
|
2579
|
+
readonly optionLabel: _angular_core.InputSignal<string | undefined>;
|
|
2580
|
+
readonly optionValue: _angular_core.InputSignal<string | undefined>;
|
|
2581
|
+
readonly optionDisabled: _angular_core.InputSignal<string | undefined>;
|
|
2582
|
+
readonly dataKey: _angular_core.InputSignal<string | undefined>;
|
|
2583
|
+
readonly placeholder: _angular_core.InputSignal<string | undefined>;
|
|
2584
|
+
/** A search box at the top of the list (on by default, as in PrimeNG). */
|
|
2585
|
+
readonly filter: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
2586
|
+
readonly filterBy: _angular_core.InputSignal<string | undefined>;
|
|
2587
|
+
readonly filterPlaceholder: _angular_core.InputSignal<string | undefined>;
|
|
2588
|
+
readonly emptyMessage: _angular_core.InputSignal<string>;
|
|
2589
|
+
readonly emptyFilterMessage: _angular_core.InputSignal<string>;
|
|
2590
|
+
/** A "select all" checkbox above the options. */
|
|
2591
|
+
readonly showToggleAll: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
2592
|
+
/** How many picks are listed before it says "{0} items selected"; `null` lists them all. */
|
|
2593
|
+
readonly maxSelectedLabels: _angular_core.InputSignal<number | null>;
|
|
2594
|
+
/** The summary past `maxSelectedLabels`; `{0}` is the count. */
|
|
2595
|
+
readonly selectedItemsLabel: _angular_core.InputSignal<string | undefined>;
|
|
2596
|
+
readonly display: _angular_core.InputSignal<"comma" | "chip">;
|
|
2597
|
+
readonly loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
2598
|
+
readonly showClear: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
2599
|
+
readonly scrollHeight: _angular_core.InputSignal<string>;
|
|
2600
|
+
readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
|
|
2601
|
+
readonly inputId: _angular_core.InputSignal<string | undefined>;
|
|
2602
|
+
readonly size: _angular_core.InputSignal<DwControlSize>;
|
|
2603
|
+
readonly fluid: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
2604
|
+
readonly opened: _angular_core.OutputEmitterRef<void>;
|
|
2605
|
+
readonly closed: _angular_core.OutputEmitterRef<void>;
|
|
2606
|
+
readonly focused: _angular_core.OutputEmitterRef<void>;
|
|
2607
|
+
readonly blurred: _angular_core.OutputEmitterRef<void>;
|
|
2608
|
+
protected readonly optionTemplate: _angular_core.Signal<DwSelectOptionDirective<any> | undefined>;
|
|
2609
|
+
protected readonly footerTemplate: _angular_core.Signal<DwSelectFooterDirective | undefined>;
|
|
2610
|
+
protected readonly primeSize: _angular_core.Signal<"small" | "large" | undefined>;
|
|
2611
|
+
/** PrimeNG reads a null maxSelectedLabels as 0 (summarise everything), so "list them all" is a ceiling no list reaches. */
|
|
2612
|
+
protected readonly listAll: number;
|
|
2613
|
+
private readonly prime;
|
|
2614
|
+
constructor();
|
|
2615
|
+
/** Opens the list from code. */
|
|
2616
|
+
open(): void;
|
|
2617
|
+
close(): void;
|
|
2618
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<DwMultiselectComponent<any>, never>;
|
|
2619
|
+
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>;
|
|
2620
|
+
}
|
|
2621
|
+
|
|
2622
|
+
/**
|
|
2623
|
+
* Crystal's checkbox (PrimeNG's Checkbox underneath, which the app never imports), on/off: its value is a boolean.
|
|
2624
|
+
* With a `label` (or projected content) the label sits beside it on one line and toggles it too.
|
|
2625
|
+
*
|
|
2626
|
+
* ```html
|
|
2627
|
+
* <dw-checkbox label="Remember me" [(ngModel)]="remember" />
|
|
2628
|
+
* <dw-checkbox formControlName="agree">I accept the <a href="/terms">terms</a></dw-checkbox>
|
|
2629
|
+
* <dw-checkbox ariaLabel="Select row" [indeterminate]="some" [(value)]="all" />
|
|
2630
|
+
* ```
|
|
2631
|
+
*/
|
|
2632
|
+
declare class DwCheckboxComponent extends DwFormControl<boolean> {
|
|
2633
|
+
readonly label: _angular_core.InputSignal<string>;
|
|
2634
|
+
/** For a checkbox with no visible label. */
|
|
2635
|
+
readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
|
|
2636
|
+
/** Id of the native checkbox; generated when omitted. */
|
|
2637
|
+
readonly inputId: _angular_core.InputSignal<string | undefined>;
|
|
2638
|
+
/** The "some, not all" state of a select-all checkbox. */
|
|
2639
|
+
readonly indeterminate: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
2640
|
+
readonly size: _angular_core.InputSignal<DwControlSize>;
|
|
2641
|
+
readonly focused: _angular_core.OutputEmitterRef<void>;
|
|
2642
|
+
readonly blurred: _angular_core.OutputEmitterRef<void>;
|
|
2643
|
+
private readonly generatedId;
|
|
2644
|
+
protected readonly id: _angular_core.Signal<string>;
|
|
2645
|
+
protected readonly primeSize: _angular_core.Signal<"small" | "large" | undefined>;
|
|
2646
|
+
private readonly prime;
|
|
2647
|
+
constructor();
|
|
2648
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<DwCheckboxComponent, never>;
|
|
2649
|
+
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>;
|
|
2650
|
+
}
|
|
2651
|
+
|
|
2652
|
+
/**
|
|
2653
|
+
* One radio button of a choice (PrimeNG's RadioButton underneath, which the app never imports). Every radio of the
|
|
2654
|
+
* choice binds the same model and `name`; each has its own `option`, and is checked while the model equals it.
|
|
2655
|
+
*
|
|
2656
|
+
* ```html
|
|
2657
|
+
* <dw-radio name="schedule" option="daily" label="Daily" [(ngModel)]="schedule" />
|
|
2658
|
+
* <dw-radio name="schedule" option="weekly" label="Weekly" [(ngModel)]="schedule" />
|
|
2659
|
+
* ```
|
|
2660
|
+
*/
|
|
2661
|
+
declare class DwRadioComponent<T = unknown> extends DwFormControl<T> {
|
|
2662
|
+
/** The value this radio stands for: the model takes it when the radio is picked. */
|
|
2663
|
+
readonly option: _angular_core.InputSignal<T>;
|
|
2664
|
+
/** Groups the radios of one choice (keyboard arrows move between them). */
|
|
2665
|
+
readonly name: _angular_core.InputSignal<string | undefined>;
|
|
2666
|
+
readonly label: _angular_core.InputSignal<string>;
|
|
2667
|
+
readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
|
|
2668
|
+
readonly inputId: _angular_core.InputSignal<string | undefined>;
|
|
2669
|
+
readonly size: _angular_core.InputSignal<DwControlSize>;
|
|
2670
|
+
readonly focused: _angular_core.OutputEmitterRef<void>;
|
|
2671
|
+
readonly blurred: _angular_core.OutputEmitterRef<void>;
|
|
2672
|
+
private readonly generatedId;
|
|
2673
|
+
protected readonly id: _angular_core.Signal<string>;
|
|
2674
|
+
protected readonly primeSize: _angular_core.Signal<"small" | "large" | undefined>;
|
|
2675
|
+
private readonly prime;
|
|
2676
|
+
constructor();
|
|
2677
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<DwRadioComponent<any>, never>;
|
|
2678
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<DwRadioComponent<any>, "dw-radio", never, { "option": { "alias": "option"; "required": true; "isSignal": true; }; "name": { "alias": "name"; "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; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, { "focused": "focused"; "blurred": "blurred"; }, never, ["*"], true, never>;
|
|
2679
|
+
}
|
|
2680
|
+
|
|
2681
|
+
type DwSwitchSize = 'xs' | 'sm' | 'md';
|
|
2682
|
+
/**
|
|
2683
|
+
* Crystal's on/off switch (PrimeNG's ToggleSwitch underneath, which the app never imports); its value is a boolean.
|
|
2684
|
+
* `sm` sits beside small buttons in a toolbar, `xs` in dense settings rows.
|
|
2685
|
+
*
|
|
2686
|
+
* ```html
|
|
2687
|
+
* <dw-switch label="Enabled" formControlName="enabled" />
|
|
2688
|
+
* <dw-switch size="xs" ariaLabel="Stream responses" [(ngModel)]="stream" (changed)="save()" />
|
|
2689
|
+
* ```
|
|
2690
|
+
*/
|
|
2691
|
+
declare class DwSwitchComponent extends DwFormControl<boolean> {
|
|
2692
|
+
readonly label: _angular_core.InputSignal<string>;
|
|
2693
|
+
readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
|
|
2694
|
+
readonly inputId: _angular_core.InputSignal<string | undefined>;
|
|
2695
|
+
readonly size: _angular_core.InputSignal<DwSwitchSize>;
|
|
2696
|
+
/** Shows the state without letting the user change it. */
|
|
2697
|
+
readonly readonly: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
2698
|
+
readonly blurred: _angular_core.OutputEmitterRef<void>;
|
|
2699
|
+
private readonly generatedId;
|
|
2700
|
+
protected readonly id: _angular_core.Signal<string>;
|
|
2701
|
+
private readonly prime;
|
|
2702
|
+
constructor();
|
|
2703
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<DwSwitchComponent, never>;
|
|
2704
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<DwSwitchComponent, "dw-switch", never, { "label": { "alias": "label"; "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; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; }, { "blurred": "blurred"; }, never, never, true, never>;
|
|
2705
|
+
}
|
|
2706
|
+
|
|
2707
|
+
/**
|
|
2708
|
+
* Crystal's number input (PrimeNG's InputNumber underneath, which the app never imports): typed digits only, kept
|
|
2709
|
+
* within `min` / `max`, with optional prefix / suffix text, fraction digits and +/− buttons. Its value is a number.
|
|
2710
|
+
*
|
|
2711
|
+
* ```html
|
|
2712
|
+
* <dw-number-input [min]="1" [max]="100" suffix=" %" formControlName="threshold" />
|
|
2713
|
+
* <dw-number-input size="sm" [showButtons]="true" buttonLayout="horizontal" [(ngModel)]="retries" />
|
|
2714
|
+
* ```
|
|
2715
|
+
*/
|
|
2716
|
+
declare class DwNumberInputComponent extends DwFormControl<number> {
|
|
2717
|
+
readonly min: _angular_core.InputSignal<number | null | undefined>;
|
|
2718
|
+
readonly max: _angular_core.InputSignal<number | null | undefined>;
|
|
2719
|
+
/** How far the buttons and arrow keys move it. */
|
|
2720
|
+
readonly step: _angular_core.InputSignal<number>;
|
|
2721
|
+
readonly prefix: _angular_core.InputSignal<string | undefined>;
|
|
2722
|
+
readonly suffix: _angular_core.InputSignal<string | undefined>;
|
|
2723
|
+
readonly minFractionDigits: _angular_core.InputSignal<number | undefined>;
|
|
2724
|
+
readonly maxFractionDigits: _angular_core.InputSignal<number | undefined>;
|
|
2725
|
+
/** Thousands separators (on by default, as in PrimeNG). */
|
|
2726
|
+
readonly useGrouping: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
2727
|
+
/** +/− buttons: stacked arrows on the right, or − and + on either side (`horizontal`). */
|
|
2728
|
+
readonly showButtons: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
2729
|
+
readonly buttonLayout: _angular_core.InputSignal<"horizontal" | "stacked">;
|
|
2730
|
+
readonly placeholder: _angular_core.InputSignal<string | undefined>;
|
|
2731
|
+
readonly inputId: _angular_core.InputSignal<string | undefined>;
|
|
2732
|
+
readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
|
|
2733
|
+
readonly readonly: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
2734
|
+
readonly size: _angular_core.InputSignal<DwControlSize>;
|
|
2735
|
+
readonly fluid: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
2736
|
+
readonly focused: _angular_core.OutputEmitterRef<void>;
|
|
2737
|
+
readonly blurred: _angular_core.OutputEmitterRef<void>;
|
|
2738
|
+
protected readonly primeSize: _angular_core.Signal<"small" | "large" | undefined>;
|
|
2739
|
+
private readonly prime;
|
|
2740
|
+
constructor();
|
|
2741
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<DwNumberInputComponent, never>;
|
|
2742
|
+
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>;
|
|
2743
|
+
}
|
|
2744
|
+
|
|
2347
2745
|
/**
|
|
2348
2746
|
* Backend timestamp normalization.
|
|
2349
2747
|
*
|
|
@@ -2673,13 +3071,18 @@ declare class DwColumnPickerComponent<T = any> {
|
|
|
2673
3071
|
}
|
|
2674
3072
|
|
|
2675
3073
|
/**
|
|
2676
|
-
* One
|
|
2677
|
-
*
|
|
3074
|
+
* One icon, drawn at 1em so it follows the font size of its context, in `currentColor`:
|
|
3075
|
+
* - `name`: one of crystal's SVG glyphs (icons/svg/glyphs), or an icon the app registered with provideCrystalIcons();
|
|
3076
|
+
* - `pi`: a PrimeIcons glyph, by its name without `pi-` (crystal ships the icon font, so an app never loads it).
|
|
3077
|
+
*
|
|
3078
|
+
* Give it one of the two. It is decorative (hidden from assistive tech) unless it has a `label`.
|
|
2678
3079
|
*
|
|
2679
3080
|
* ```html
|
|
2680
3081
|
* <dw-icon name="hand" />
|
|
2681
3082
|
* <dw-icon name="workflow" size="16px" class="dw-text-accent" />
|
|
2682
3083
|
* <dw-icon name="rocket" /> <!-- registered by the app -->
|
|
3084
|
+
* <dw-icon pi="trash" />
|
|
3085
|
+
* <dw-icon pi="spinner" [spin]="true" label="Loading" />
|
|
2683
3086
|
* ```
|
|
2684
3087
|
*/
|
|
2685
3088
|
declare class DwIconComponent {
|
|
@@ -2687,11 +3090,18 @@ declare class DwIconComponent {
|
|
|
2687
3090
|
private readonly registry;
|
|
2688
3091
|
/** A crystal glyph name, or a name registered with provideCrystalIcons(). */
|
|
2689
3092
|
readonly name: _angular_core.InputSignal<"link" | "reset" | "code" | "search" | "info" | "workflow" | "agent" | "agentBuilder" | "alertError" | "alertWarn" | "attach" | "autoplay" | "back" | "bell" | "bolt" | "book" | "brain" | "bulb" | "chart" | "check" | "chevDown" | "chevLeft" | "chevRight" | "chevUp" | "close" | "cog" | "collapse" | "comment" | "comments" | "copy" | "cpu" | "expand" | "file" | "gear" | "hand" | "home" | "kebab" | "layers" | "notesPad" | "panelCollapse" | "panelExpand" | "paperclip" | "parse" | "pencil" | "play" | "plus" | "reference" | "refresh" | "robot" | "send" | "sidebarCollapse" | "sidebarExpand" | "sparkle" | "tag" | "tagFilled" | "testShield" | "trash" | "users" | "wrench" | (string & {})>;
|
|
3093
|
+
/** A PrimeIcons name without `pi-` (`trash`, `check-circle`…), checked against the installed font. */
|
|
3094
|
+
readonly pi: _angular_core.InputSignal<"" | DwPrimeIcon>;
|
|
2690
3095
|
/** CSS length; defaults to the surrounding font size. */
|
|
2691
3096
|
readonly size: _angular_core.InputSignal<string>;
|
|
3097
|
+
/** Spins the icon (a loader). */
|
|
3098
|
+
readonly spin: _angular_core.InputSignal<boolean>;
|
|
3099
|
+
/** Makes the icon meaningful: read out as an image with this text. */
|
|
3100
|
+
readonly label: _angular_core.InputSignal<string>;
|
|
3101
|
+
readonly hostClass: _angular_core.Signal<string>;
|
|
2692
3102
|
readonly svg: _angular_core.Signal<SafeHtml>;
|
|
2693
3103
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<DwIconComponent, never>;
|
|
2694
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<DwIconComponent, "dw-icon", never, { "name": { "alias": "name"; "required": true; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
3104
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<DwIconComponent, "dw-icon", never, { "name": { "alias": "name"; "required": false; "isSignal": true; }; "pi": { "alias": "pi"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "spin": { "alias": "spin"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
2695
3105
|
}
|
|
2696
3106
|
|
|
2697
3107
|
/** Icon names starting with this (any case) are crystal's: `dw…` and `dwi-…`. */
|
|
@@ -2803,8 +3213,8 @@ type DwTheme = 'light' | 'dark';
|
|
|
2803
3213
|
declare const DW_THEME_STORAGE_KEY = "dw-theme";
|
|
2804
3214
|
interface CrystalThemeConfig {
|
|
2805
3215
|
/**
|
|
2806
|
-
* Set `data-theme` on
|
|
2807
|
-
* its
|
|
3216
|
+
* Set `data-theme` on `<html>` at start-up and on every switch. `false` for federated elements: the host page owns
|
|
3217
|
+
* its `<html>`. Default true.
|
|
2808
3218
|
*/
|
|
2809
3219
|
apply?: boolean;
|
|
2810
3220
|
/** Theme used until the viewer picks one. Default 'light'. */
|
|
@@ -2820,13 +3230,13 @@ interface CrystalConfig {
|
|
|
2820
3230
|
declare const DW_CRYSTAL_CONFIG: InjectionToken<CrystalConfig>;
|
|
2821
3231
|
/**
|
|
2822
3232
|
* Light / dark theme switch. The theme is the `data-theme` attribute on
|
|
2823
|
-
*
|
|
3233
|
+
* `<html>`: semantic-dark.css re-points the --dw-* tokens under
|
|
2824
3234
|
* [data-theme="dark"] and PrimeNG's darkModeSelector follows the same
|
|
2825
3235
|
* attribute. The choice is remembered per browser (light until chosen).
|
|
2826
3236
|
*
|
|
2827
3237
|
* `provideCrystal()` applies it once at start-up so a stored dark choice
|
|
2828
3238
|
* doesn't flash light. With `theme.apply: false` (federated elements on a
|
|
2829
|
-
* page crystal doesn't own) it never touches
|
|
3239
|
+
* page crystal doesn't own) it never touches `<html>`.
|
|
2830
3240
|
*/
|
|
2831
3241
|
declare class ThemeService {
|
|
2832
3242
|
private readonly document;
|
|
@@ -2834,7 +3244,7 @@ declare class ThemeService {
|
|
|
2834
3244
|
private readonly storageKey;
|
|
2835
3245
|
private readonly applies;
|
|
2836
3246
|
readonly theme: _angular_core.WritableSignal<DwTheme>;
|
|
2837
|
-
/** Puts the current theme on
|
|
3247
|
+
/** Puts the current theme on `<html>` (unless `theme.apply` is false). */
|
|
2838
3248
|
init(): void;
|
|
2839
3249
|
setTheme(theme: DwTheme): void;
|
|
2840
3250
|
toggle(): void;
|
|
@@ -2846,7 +3256,7 @@ declare class ThemeService {
|
|
|
2846
3256
|
|
|
2847
3257
|
/**
|
|
2848
3258
|
* Crystal's app-level setup: the theme. With `theme.apply` (the default) it puts the stored or
|
|
2849
|
-
* initial theme on
|
|
3259
|
+
* initial theme on `<html>` before the first render, so a dark choice doesn't flash light.
|
|
2850
3260
|
*
|
|
2851
3261
|
* ```ts
|
|
2852
3262
|
* providers: [provideCrystal(), provideCrystalPrimeNG()] // an app
|
|
@@ -2879,5 +3289,5 @@ declare function installCrystalHostTheme({ fonts }?: CrystalHostThemeOptions): v
|
|
|
2879
3289
|
/** Removes the host theme again (e.g. a host that unloads crystal, or a test). */
|
|
2880
3290
|
declare function removeCrystalHostTheme(): void;
|
|
2881
3291
|
|
|
2882
|
-
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_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, DwChipComponent, DwClockService, DwColumnPickerComponent, DwConfirmDialogComponent, DwConfirmHostComponent, DwConfirmService, DwCopyButtonComponent, DwDialogComponent, DwDialogFooterDirective, DwDialogHeaderDirective, DwDialogTitleSuffixDirective, DwDividerComponent, DwDrawerComponent, DwDrawerFooterDirective, DwDrawerHeaderDirective, DwDrawerSubheaderDirective, DwEmptyStateComponent, DwEntityIconComponent, DwFieldComponent, DwFileDropzoneComponent, DwFileListComponent, DwFormSectionHeaderComponent, DwGridDirective, DwHeaderDirective, DwHstackDirective, DwIconButtonComponent, DwIconComponent, DwIconRegistry, IdBlockComponent as DwIdBlockComponent, DwMenuComponent, DwMenuHeaderDirective, DwMeterComponent, DwNavItemActionsDirective, DwNavItemExtraDirective, DwNavListComponent, DwPageHeaderComponent, DwPopoverComponent, DwPopoverFooterDirective, DwRailTabsComponent, DwResizerComponent, DwRowActionsDirective, DwRowExpansionDirective, DwSearchInputComponent, DwSectionComponent, DwSkeletonComponent, DwSpinnerComponent, DwStackDirective, DwStatusPillComponent, DwTabPanelDirective, DwTableComponent, DwTableEmptyComponent, DwTabsComponent, DwTagColorButtonComponent, DwTagColorPickerComponent, DwTagComponent, DwTagListComponent, DwTileComponent, DwTimestampComponent, DwToastHostComponent, DwToastService, DwToggleCardBodyDirective, DwToggleCardComponent, DwToggleCardControlDirective, DwTooltipIfTruncatedDirective, ThemeService, alignUnderOverlayAnchor, extensionOf, fieldErrorMessage, formatBytes, gapToken, hashTagIndex, humanizeStatus, initialsOf, installCrystalHostTheme, isImageIcon, isTruncated, normalizeStatus, provideCrystal, provideCrystalFieldMessages, provideCrystalIconResolvers, provideCrystalIcons, removeCrystalHostTheme, tagColorVar, tintFor, toneForStatus };
|
|
2883
|
-
export type { CrystalConfig, CrystalHostThemeOptions, CrystalThemeConfig, DwAlign, DwAvatarTint, DwBadgeKind, DwBadgeTone, DwBreadcrumb, DwButtonAppearance, DwButtonSize, DwButtonVariant, DwCanClose, DwCardTint, DwCardVariant, DwColumn, DwConfirmOptions, DwConfirmSeverity, DwConfirmSummaryRow, DwConfirmWarning, DwDialogSize, DwDividerOrientation, DwDividerSpacing, DwDrawerAction, DwDrawerSize, DwEntityKind, DwEntityTint, DwFieldMessage, DwFileItem, DwFileRejectReason, DwFileRejection, DwFileStatus, DwGap, DwIconButtonVariant, DwIconResolvers, DwInitialsStrategy, DwJustify, DwMenuItem, DwNavGroup, DwNavItem, DwNavItemDot, DwNavReorder, DwRailTab, DwResizerDrag, DwRowClickEvent, DwSeverity, DwShowErrorsWhen, DwSkeletonPreset, DwSupportedType, DwTabOption, DwTabValue, DwTagItem, DwTheme, DwToast, DwToastOptions, DwToastPosition, DwToastSeverity, DwTone };
|
|
3292
|
+
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 };
|
|
3293
|
+
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 };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dataworkz/crystal",
|
|
3
|
-
"version": "0.1.0-beta.
|
|
3
|
+
"version": "0.1.0-beta.4",
|
|
4
4
|
"description": "Dataworkz core UI for Angular: dw-* components, icons, toasts, design tokens, theme CSS and bundled fonts.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": "Dataworkz",
|
|
@@ -19,21 +19,18 @@
|
|
|
19
19
|
"@angular/forms": "^20.3.0",
|
|
20
20
|
"@angular/platform-browser": "^20.3.0",
|
|
21
21
|
"@angular/router": "^20.3.0",
|
|
22
|
-
"@primeng/themes": "^21.0.0",
|
|
23
22
|
"ngx-markdown": "^20.0.0",
|
|
24
|
-
"primeicons": "^7.0.0",
|
|
25
|
-
"primeng": "^20.4.0",
|
|
26
23
|
"rxjs": "~7.8.0"
|
|
27
24
|
},
|
|
28
25
|
"peerDependenciesMeta": {
|
|
29
|
-
"@primeng/themes": {
|
|
30
|
-
"optional": true
|
|
31
|
-
},
|
|
32
26
|
"ngx-markdown": {
|
|
33
27
|
"optional": true
|
|
34
28
|
}
|
|
35
29
|
},
|
|
36
30
|
"dependencies": {
|
|
31
|
+
"@primeng/themes": "^21.0.0",
|
|
32
|
+
"primeicons": "^7.0.0",
|
|
33
|
+
"primeng": "~20.4.0",
|
|
37
34
|
"tslib": "^2.8.1"
|
|
38
35
|
},
|
|
39
36
|
"exports": {
|