@akcelik/strct 5.22.0 → 5.23.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 +211 -51
- package/fesm2022/akcelik-strct.mjs.map +1 -1
- package/package.json +1 -1
- package/types/akcelik-strct.d.ts +37 -2
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@akcelik/strct",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.23.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
|
@@ -1579,6 +1579,25 @@ interface StrctTreeNodeData {
|
|
|
1579
1579
|
/** Initial expanded state. */
|
|
1580
1580
|
expanded?: boolean;
|
|
1581
1581
|
children?: StrctTreeNodeData[];
|
|
1582
|
+
/**
|
|
1583
|
+
* A quiet trailing word on the row — what `[strctTreeTrailing]` is for a
|
|
1584
|
+
* projected node: "VM" on a virtual machine's own folder.
|
|
1585
|
+
*/
|
|
1586
|
+
meta?: string;
|
|
1587
|
+
/** A trailing tag instead of (or beside) `meta`. */
|
|
1588
|
+
tag?: {
|
|
1589
|
+
label: string;
|
|
1590
|
+
status?: StrctBadgeStatus;
|
|
1591
|
+
};
|
|
1592
|
+
/**
|
|
1593
|
+
* "It has children, they have not been read yet": the chevron and
|
|
1594
|
+
* `aria-expanded` appear before `children` arrives, and expanding emits
|
|
1595
|
+
* `(nodeToggled)` as usual. A node that turns out to be empty loses its
|
|
1596
|
+
* chevron when `children` arrives as `[]`.
|
|
1597
|
+
*/
|
|
1598
|
+
hasChildren?: boolean;
|
|
1599
|
+
/** Its children are being read: a quiet row under it, and `aria-busy`. */
|
|
1600
|
+
loading?: boolean;
|
|
1582
1601
|
/** Arbitrary payload returned with (nodeActivated). */
|
|
1583
1602
|
data?: unknown;
|
|
1584
1603
|
}
|
|
@@ -1680,6 +1699,8 @@ declare class StrctTreeNode {
|
|
|
1680
1699
|
rowEl(): HTMLElement | null;
|
|
1681
1700
|
/** Roving tabindex: inside a tree only the active row is tabbable. */
|
|
1682
1701
|
protected readonly rowTabindex: _angular_core.Signal<0 | -1>;
|
|
1702
|
+
/** Wording of the "children are being read" row (from the owning tree). */
|
|
1703
|
+
protected readonly loadingLabel: _angular_core.Signal<string>;
|
|
1683
1704
|
/** Accessible label of the chevron toggle (factory from the owning tree). */
|
|
1684
1705
|
protected readonly chevronAriaLabel: _angular_core.Signal<string>;
|
|
1685
1706
|
protected onRowFocus(): void;
|
|
@@ -1732,6 +1753,8 @@ declare class StrctTree {
|
|
|
1732
1753
|
readonly dragExpandDelay: _angular_core.InputSignal<number>;
|
|
1733
1754
|
/** Emitted for an accepted drop only. */
|
|
1734
1755
|
readonly nodeDrop: _angular_core.OutputEmitterRef<StrctTreeDropEvent>;
|
|
1756
|
+
/** Wording of the row shown under a node whose children are being read (`node.loading`). */
|
|
1757
|
+
readonly loadingLabel: _angular_core.InputSignal<string>;
|
|
1735
1758
|
/** Accessible label of each node's chevron toggle; receives the expanded state and the node label. */
|
|
1736
1759
|
readonly chevronAriaLabel: _angular_core.InputSignal<(expanded: boolean, label: string) => string>;
|
|
1737
1760
|
/** Emitted when any data-driven node is clicked. */
|
|
@@ -1829,7 +1852,7 @@ declare class StrctTree {
|
|
|
1829
1852
|
/** Toggle a node's expansion, updating state and emitting outputs. */
|
|
1830
1853
|
toggleNode(node: StrctTreeNodeData): void;
|
|
1831
1854
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrctTree, never>;
|
|
1832
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctTree, "strct-tree", never, { "nodes": { "alias": "nodes"; "required": false; "isSignal": true; }; "density": { "alias": "density"; "required": false; "isSignal": true; }; "framed": { "alias": "framed"; "required": false; "isSignal": true; }; "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; "nodeMenu": { "alias": "nodeMenu"; "required": false; "isSignal": true; }; "canDrag": { "alias": "canDrag"; "required": false; "isSignal": true; }; "canDrop": { "alias": "canDrop"; "required": false; "isSignal": true; }; "dragExpandDelay": { "alias": "dragExpandDelay"; "required": false; "isSignal": true; }; "chevronAriaLabel": { "alias": "chevronAriaLabel"; "required": false; "isSignal": true; }; "expandedIds": { "alias": "expandedIds"; "required": false; "isSignal": true; }; }, { "nodeDrop": "nodeDrop"; "nodeActivated": "nodeActivated"; "nodeMenuSelect": "nodeMenuSelect"; "expandedIds": "expandedIdsChange"; "expandedChange": "expandedChange"; "nodeToggled": "nodeToggled"; }, ["projectedNodes"], ["*"], true, never>;
|
|
1855
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctTree, "strct-tree", never, { "nodes": { "alias": "nodes"; "required": false; "isSignal": true; }; "density": { "alias": "density"; "required": false; "isSignal": true; }; "framed": { "alias": "framed"; "required": false; "isSignal": true; }; "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; "nodeMenu": { "alias": "nodeMenu"; "required": false; "isSignal": true; }; "canDrag": { "alias": "canDrag"; "required": false; "isSignal": true; }; "canDrop": { "alias": "canDrop"; "required": false; "isSignal": true; }; "dragExpandDelay": { "alias": "dragExpandDelay"; "required": false; "isSignal": true; }; "loadingLabel": { "alias": "loadingLabel"; "required": false; "isSignal": true; }; "chevronAriaLabel": { "alias": "chevronAriaLabel"; "required": false; "isSignal": true; }; "expandedIds": { "alias": "expandedIds"; "required": false; "isSignal": true; }; }, { "nodeDrop": "nodeDrop"; "nodeActivated": "nodeActivated"; "nodeMenuSelect": "nodeMenuSelect"; "expandedIds": "expandedIdsChange"; "expandedChange": "expandedChange"; "nodeToggled": "nodeToggled"; }, ["projectedNodes"], ["*"], true, never>;
|
|
1833
1856
|
}
|
|
1834
1857
|
|
|
1835
1858
|
/** Fixed modal width presets: sm 480 · md 640 · lg 860 · xl 1080 (px). */
|
|
@@ -2711,6 +2734,11 @@ declare class StrctSearchbox implements ControlValueAccessor {
|
|
|
2711
2734
|
protected onTouched: () => void;
|
|
2712
2735
|
protected onInput(event: Event): void;
|
|
2713
2736
|
/** Clear the text (Escape / the × button). */
|
|
2737
|
+
/**
|
|
2738
|
+
* An Escape that clears a value is used: a modal around this box takes an
|
|
2739
|
+
* unhandled Escape as "close me", and the same keystroke did both.
|
|
2740
|
+
*/
|
|
2741
|
+
protected onEscape(event: Event): void;
|
|
2714
2742
|
clear(): void;
|
|
2715
2743
|
/** Focus the input programmatically (e.g. from a global shortcut). */
|
|
2716
2744
|
focus(): void;
|
|
@@ -8630,8 +8658,15 @@ interface StrctProductItem {
|
|
|
8630
8658
|
description?: string;
|
|
8631
8659
|
/** The dot beside that line. */
|
|
8632
8660
|
status?: StrctStatus;
|
|
8633
|
-
/** The product's own colour (a token or value): the
|
|
8661
|
+
/** The product's own colour (a token or value): the row's icon takes it. */
|
|
8634
8662
|
tone?: string;
|
|
8663
|
+
/**
|
|
8664
|
+
* The chip's own shade. The chip sits on `--hdr`, which is dark in every
|
|
8665
|
+
* scheme, and the menu rows on `--bg-1`: one colour measured 2.45–2.93 : 1
|
|
8666
|
+
* on one of the two, under the 3 : 1 a graphical object owes. Falls back to
|
|
8667
|
+
* `tone`.
|
|
8668
|
+
*/
|
|
8669
|
+
headerTone?: string;
|
|
8635
8670
|
/** Render the row as a real router link (middle-click, a new tab). */
|
|
8636
8671
|
routerLink?: string | unknown[];
|
|
8637
8672
|
/** Render the row as a plain link. */
|