@akcelik/strct 5.7.0 → 5.8.0
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/fesm2022/akcelik-strct.mjs +149 -42
- package/fesm2022/akcelik-strct.mjs.map +1 -1
- package/package.json +1 -1
- package/types/akcelik-strct.d.ts +59 -8
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@akcelik/strct",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.8.0",
|
|
4
4
|
"description": "UIStruct — a standalone Angular component library with a tokenised, multi-palette theme system, built for datacenter / infrastructure management UIs.",
|
|
5
5
|
"author": "Serkan Akcelik <serkan.akcelik@gmail.com>",
|
|
6
6
|
"license": "MIT",
|
package/types/akcelik-strct.d.ts
CHANGED
|
@@ -734,6 +734,11 @@ declare class StrctList {
|
|
|
734
734
|
* `strct-list-item [wrap]` turns it on for one row.
|
|
735
735
|
*/
|
|
736
736
|
readonly wrap: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
737
|
+
/**
|
|
738
|
+
* Drop the rows' inline padding, so a list of statements lines up with the
|
|
739
|
+
* paragraphs around it instead of sitting 12px inside them.
|
|
740
|
+
*/
|
|
741
|
+
readonly flush: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
737
742
|
/** Hairline between rows. */
|
|
738
743
|
readonly dividers: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
739
744
|
/** Shown when the list has no items. */
|
|
@@ -742,7 +747,7 @@ declare class StrctList {
|
|
|
742
747
|
readonly label: _angular_core.InputSignal<string>;
|
|
743
748
|
protected readonly items: _angular_core.Signal<readonly StrctListItem[]>;
|
|
744
749
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrctList, never>;
|
|
745
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctList, "strct-list", never, { "dense": { "alias": "dense"; "required": false; "isSignal": true; }; "wrap": { "alias": "wrap"; "required": false; "isSignal": true; }; "dividers": { "alias": "dividers"; "required": false; "isSignal": true; }; "emptyText": { "alias": "emptyText"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; }, {}, ["items"], ["*"], true, never>;
|
|
750
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctList, "strct-list", never, { "dense": { "alias": "dense"; "required": false; "isSignal": true; }; "wrap": { "alias": "wrap"; "required": false; "isSignal": true; }; "flush": { "alias": "flush"; "required": false; "isSignal": true; }; "dividers": { "alias": "dividers"; "required": false; "isSignal": true; }; "emptyText": { "alias": "emptyText"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; }, {}, ["items"], ["*"], true, never>;
|
|
746
751
|
}
|
|
747
752
|
|
|
748
753
|
/** Follows the heading on its line — a badge, a count, a status dot. */
|
|
@@ -2526,17 +2531,24 @@ declare class StrctCodeInline {
|
|
|
2526
2531
|
readonly value: _angular_core.InputSignal<string>;
|
|
2527
2532
|
/** Long ids wrap instead of overflowing a narrow card. */
|
|
2528
2533
|
readonly wrap: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
2534
|
+
/**
|
|
2535
|
+
* What the copy button is called. Two spans in the same drawer are both
|
|
2536
|
+
* "Copy" without it; these are "Copy thumbprint" and "Copy serial number".
|
|
2537
|
+
*/
|
|
2538
|
+
readonly copyLabel: _angular_core.InputSignal<string>;
|
|
2529
2539
|
private readonly host;
|
|
2530
2540
|
private readonly vcr;
|
|
2531
2541
|
private readonly destroyRef;
|
|
2532
2542
|
/** The button, once it exists; and a counter the observer bumps. */
|
|
2533
2543
|
private readonly copyRef;
|
|
2534
2544
|
private readonly revision;
|
|
2545
|
+
/** The host exists: nothing may be created into it before that. */
|
|
2546
|
+
private readonly rendered;
|
|
2535
2547
|
constructor();
|
|
2536
2548
|
/** What the element says, without the copy button's own content. */
|
|
2537
2549
|
private ownText;
|
|
2538
2550
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrctCodeInline, never>;
|
|
2539
|
-
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<StrctCodeInline, "[strctCode]", never, { "copyable": { "alias": "copyable"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "wrap": { "alias": "wrap"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
2551
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<StrctCodeInline, "[strctCode]", never, { "copyable": { "alias": "copyable"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "wrap": { "alias": "wrap"; "required": false; "isSignal": true; }; "copyLabel": { "alias": "copyLabel"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
2540
2552
|
}
|
|
2541
2553
|
|
|
2542
2554
|
/** One active filter chip in a {@link StrctFilterBar}. */
|
|
@@ -2645,8 +2657,15 @@ declare class StrctFieldHint {
|
|
|
2645
2657
|
* 9px above the label's line, because the column centres on a 34px control.
|
|
2646
2658
|
*/
|
|
2647
2659
|
declare class StrctFieldValue {
|
|
2660
|
+
/**
|
|
2661
|
+
* What the slot holds. Text (the default) reads on the label's own line; a
|
|
2662
|
+
* `control` — a segmented picker, a small button, a switch with its own box
|
|
2663
|
+
* — is centred where a real control in this column would be, rather than
|
|
2664
|
+
* pushed down by the padding that puts text on the line.
|
|
2665
|
+
*/
|
|
2666
|
+
readonly strctFieldValue: _angular_core.InputSignal<"" | "text" | "control">;
|
|
2648
2667
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrctFieldValue, never>;
|
|
2649
|
-
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<StrctFieldValue, "[strctFieldValue]", never, {}, {}, never, never, true, never>;
|
|
2668
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<StrctFieldValue, "[strctFieldValue]", never, { "strctFieldValue": { "alias": "strctFieldValue"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
2650
2669
|
}
|
|
2651
2670
|
/**
|
|
2652
2671
|
* Wrapper that opts a run of `layout="inline"` fields out of the hairlines
|
|
@@ -2810,6 +2829,8 @@ declare class StrctToggle implements ControlValueAccessor {
|
|
|
2810
2829
|
* `[strctControlDescription]` projects one with markup in it.
|
|
2811
2830
|
*/
|
|
2812
2831
|
readonly description: _angular_core.InputSignal<string>;
|
|
2832
|
+
/** The switch's accessible name, where no visible label gives it one. */
|
|
2833
|
+
readonly ariaLabel: _angular_core.InputSignal<string | null>;
|
|
2813
2834
|
private readonly n;
|
|
2814
2835
|
protected readonly descId: string;
|
|
2815
2836
|
protected readonly labelId: string;
|
|
@@ -2827,7 +2848,7 @@ declare class StrctToggle implements ControlValueAccessor {
|
|
|
2827
2848
|
registerOnTouched(fn: () => void): void;
|
|
2828
2849
|
setDisabledState(isDisabled: boolean): void;
|
|
2829
2850
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrctToggle, never>;
|
|
2830
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctToggle, "strct-toggle", never, { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; }, {}, ["projected"], ["[strctControlDescription]", "*"], true, never>;
|
|
2851
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctToggle, "strct-toggle", never, { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, {}, ["projected"], ["[strctControlDescription]", "*"], true, never>;
|
|
2831
2852
|
}
|
|
2832
2853
|
|
|
2833
2854
|
/**
|
|
@@ -3418,6 +3439,12 @@ declare class StrctSelect implements ControlValueAccessor {
|
|
|
3418
3439
|
readonly options: _angular_core.InputSignal<StrctOption[]>;
|
|
3419
3440
|
/** Muted text shown while no value is selected (localizable). */
|
|
3420
3441
|
readonly placeholder: _angular_core.InputSignal<string>;
|
|
3442
|
+
/**
|
|
3443
|
+
* The control's accessible name, where it is not inside a `strct-field`.
|
|
3444
|
+
* ARIA does not let a `combobox` take its name from its content, so a bare
|
|
3445
|
+
* select — a filter above a list, a cell editor — has none without this.
|
|
3446
|
+
*/
|
|
3447
|
+
readonly ariaLabel: _angular_core.InputSignal<string | null>;
|
|
3421
3448
|
/** Accessible name of the listbox (localizable). */
|
|
3422
3449
|
readonly listLabel: _angular_core.InputSignal<string>;
|
|
3423
3450
|
/** Text shown when `options` is empty (localizable). */
|
|
@@ -3464,7 +3491,7 @@ declare class StrctSelect implements ControlValueAccessor {
|
|
|
3464
3491
|
registerOnTouched(fn: () => void): void;
|
|
3465
3492
|
setDisabledState(isDisabled: boolean): void;
|
|
3466
3493
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrctSelect, never>;
|
|
3467
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctSelect, "strct-select", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "listLabel": { "alias": "listLabel"; "required": false; "isSignal": true; }; "emptyText": { "alias": "emptyText"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "compareWith": { "alias": "compareWith"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
3494
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctSelect, "strct-select", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "listLabel": { "alias": "listLabel"; "required": false; "isSignal": true; }; "emptyText": { "alias": "emptyText"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "compareWith": { "alias": "compareWith"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
3468
3495
|
}
|
|
3469
3496
|
|
|
3470
3497
|
interface DayCell {
|
|
@@ -3892,7 +3919,12 @@ interface StrctDatagridColumn {
|
|
|
3892
3919
|
*/
|
|
3893
3920
|
editor?: 'text' | 'number' | 'select';
|
|
3894
3921
|
/** Options for `editor: 'select'` (the library's own option shape). */
|
|
3895
|
-
|
|
3922
|
+
/**
|
|
3923
|
+
* The choices an `editor: 'select'` offers. A function is asked per row: a
|
|
3924
|
+
* rule that holds a value the host no longer reports lists it for that row
|
|
3925
|
+
* only, rather than every row's picker carrying every other row's.
|
|
3926
|
+
*/
|
|
3927
|
+
editorOptions?: StrctOption[] | ((row: StrctRow) => StrctOption[]);
|
|
3896
3928
|
/** Bounds and step for `editor: 'number'`. */
|
|
3897
3929
|
editorMin?: number;
|
|
3898
3930
|
editorMax?: number;
|
|
@@ -4325,6 +4357,8 @@ declare class StrctDatagrid {
|
|
|
4325
4357
|
protected onEditCellKeydown(row: StrctRow, col: StrctDatagridColumn, event: KeyboardEvent): void;
|
|
4326
4358
|
/** Put focus back on the cell an editor just left, so the keys keep working. */
|
|
4327
4359
|
private refocusCell;
|
|
4360
|
+
/** A column's choices, asked per row when the column gives a function. */
|
|
4361
|
+
protected editorOptionsFor(row: StrctRow, col: StrctDatagridColumn): StrctOption[];
|
|
4328
4362
|
protected startEdit(row: StrctRow, col: StrctDatagridColumn): void;
|
|
4329
4363
|
protected readonly captionId: string;
|
|
4330
4364
|
/** Whether a cell has nothing to show and the column says what to show then. */
|
|
@@ -6544,6 +6578,12 @@ interface StrctLegendItem {
|
|
|
6544
6578
|
disabled?: boolean;
|
|
6545
6579
|
/** Why a `disabled` row cannot be picked; its title and its description. */
|
|
6546
6580
|
reason?: string;
|
|
6581
|
+
/**
|
|
6582
|
+
* What the row is, for any row — "vm.cpu.wait — CPU ready (written by the
|
|
6583
|
+
* agent)". `reason` is the why-not of a row that cannot be picked; this is
|
|
6584
|
+
* the what of one that can.
|
|
6585
|
+
*/
|
|
6586
|
+
description?: string;
|
|
6547
6587
|
}
|
|
6548
6588
|
/**
|
|
6549
6589
|
* A chart's key is a component. The same swatch · label · value rows serve a
|
|
@@ -6760,6 +6800,12 @@ declare class StrctWindow {
|
|
|
6760
6800
|
readonly resizeLabel: _angular_core.InputSignal<(corner: string) => string>;
|
|
6761
6801
|
/** A leading icon in the title bar, as `strct-page-header [icon]` has. */
|
|
6762
6802
|
readonly icon: _angular_core.InputSignal<string>;
|
|
6803
|
+
/**
|
|
6804
|
+
* Whatever the consumer needs to recognise this window elsewhere — a session
|
|
6805
|
+
* id, the object it shows. The dock passes it to `[strctWindowDockItem]`, so
|
|
6806
|
+
* an app no longer keeps its own window-to-thing index.
|
|
6807
|
+
*/
|
|
6808
|
+
readonly data: _angular_core.InputSignal<unknown>;
|
|
6763
6809
|
/**
|
|
6764
6810
|
* What a double-click on the title bar does. A console whose content has a
|
|
6765
6811
|
* real full screen of its own wants `none` and its own answer to
|
|
@@ -6838,7 +6884,7 @@ declare class StrctWindow {
|
|
|
6838
6884
|
private clamp;
|
|
6839
6885
|
private setRect;
|
|
6840
6886
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrctWindow, never>;
|
|
6841
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctWindow, "strct-window", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "minimized": { "alias": "minimized"; "required": false; "isSignal": true; }; "maximized": { "alias": "maximized"; "required": false; "isSignal": true; }; "bounds": { "alias": "bounds"; "required": false; "isSignal": true; }; "heading": { "alias": "heading"; "required": false; "isSignal": true; }; "resizable": { "alias": "resizable"; "required": false; "isSignal": true; }; "minWidth": { "alias": "minWidth"; "required": false; "isSignal": true; }; "minHeight": { "alias": "minHeight"; "required": false; "isSignal": true; }; "palette": { "alias": "palette"; "required": false; "isSignal": true; }; "closeOnOutside": { "alias": "closeOnOutside"; "required": false; "isSignal": true; }; "labels": { "alias": "labels"; "required": false; "isSignal": true; }; "resizeLabel": { "alias": "resizeLabel"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "titleDblclick": { "alias": "titleDblclick"; "required": false; "isSignal": true; }; }, { "open": "openChange"; "minimized": "minimizedChange"; "maximized": "maximizedChange"; "bounds": "boundsChange"; "closed": "closed"; "titleDblclicked": "titleDblclicked"; "outsidePointer": "outsidePointer"; }, never, ["[strctWindowTitleMeta]", "[strctWindowActions]", "*", "[strctWindowStatus]"], true, never>;
|
|
6887
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctWindow, "strct-window", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "minimized": { "alias": "minimized"; "required": false; "isSignal": true; }; "maximized": { "alias": "maximized"; "required": false; "isSignal": true; }; "bounds": { "alias": "bounds"; "required": false; "isSignal": true; }; "heading": { "alias": "heading"; "required": false; "isSignal": true; }; "resizable": { "alias": "resizable"; "required": false; "isSignal": true; }; "minWidth": { "alias": "minWidth"; "required": false; "isSignal": true; }; "minHeight": { "alias": "minHeight"; "required": false; "isSignal": true; }; "palette": { "alias": "palette"; "required": false; "isSignal": true; }; "closeOnOutside": { "alias": "closeOnOutside"; "required": false; "isSignal": true; }; "labels": { "alias": "labels"; "required": false; "isSignal": true; }; "resizeLabel": { "alias": "resizeLabel"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "titleDblclick": { "alias": "titleDblclick"; "required": false; "isSignal": true; }; }, { "open": "openChange"; "minimized": "minimizedChange"; "maximized": "maximizedChange"; "bounds": "boundsChange"; "closed": "closed"; "titleDblclicked": "titleDblclicked"; "outsidePointer": "outsidePointer"; }, never, ["[strctWindowTitleMeta]", "[strctWindowActions]", "*", "[strctWindowStatus]"], true, never>;
|
|
6842
6888
|
}
|
|
6843
6889
|
/**
|
|
6844
6890
|
* What a dock chip shows, when the window's heading is not enough — a status
|
|
@@ -6863,6 +6909,11 @@ declare class StrctWindowDock {
|
|
|
6863
6909
|
readonly label: _angular_core.InputSignal<string>;
|
|
6864
6910
|
/** The name of each chip's close button. */
|
|
6865
6911
|
readonly closeLabel: _angular_core.InputSignal<(heading: string) => string>;
|
|
6912
|
+
/**
|
|
6913
|
+
* The name of each chip itself — what restoring it does: "Show the console
|
|
6914
|
+
* of APP02". The window is passed, so its `data` can shape the sentence.
|
|
6915
|
+
*/
|
|
6916
|
+
readonly restoreLabel: _angular_core.InputSignal<(w: StrctWindow) => string>;
|
|
6866
6917
|
/** What each chip shows, when a heading is not enough. */
|
|
6867
6918
|
protected readonly itemTpl: _angular_core.Signal<TemplateRef<any> | undefined>;
|
|
6868
6919
|
/**
|
|
@@ -6877,7 +6928,7 @@ declare class StrctWindowDock {
|
|
|
6877
6928
|
readonly restoreRequest: _angular_core.OutputEmitterRef<StrctWindow>;
|
|
6878
6929
|
protected onRestore(w: StrctWindow): void;
|
|
6879
6930
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrctWindowDock, never>;
|
|
6880
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctWindowDock, "strct-window-dock", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "closeLabel": { "alias": "closeLabel"; "required": false; "isSignal": true; }; "restoreMode": { "alias": "restoreMode"; "required": false; "isSignal": true; }; }, { "restoreRequest": "restoreRequest"; }, ["itemTpl"], never, true, never>;
|
|
6931
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctWindowDock, "strct-window-dock", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "closeLabel": { "alias": "closeLabel"; "required": false; "isSignal": true; }; "restoreLabel": { "alias": "restoreLabel"; "required": false; "isSignal": true; }; "restoreMode": { "alias": "restoreMode"; "required": false; "isSignal": true; }; }, { "restoreRequest": "restoreRequest"; }, ["itemTpl"], never, true, never>;
|
|
6881
6932
|
}
|
|
6882
6933
|
|
|
6883
6934
|
/** Who wrote a message. */
|