@akcelik/strct 4.19.0 → 4.21.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 +506 -38
- package/fesm2022/akcelik-strct.mjs.map +1 -1
- package/package.json +1 -1
- package/styles/_base.scss +41 -0
- package/types/akcelik-strct.d.ts +179 -6
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@akcelik/strct",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.21.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/styles/_base.scss
CHANGED
|
@@ -129,3 +129,44 @@ kbd,
|
|
|
129
129
|
transition-duration: 0.01ms !important;
|
|
130
130
|
}
|
|
131
131
|
}
|
|
132
|
+
|
|
133
|
+
// The splitter's gutter, as a standalone handle for layouts the splitter does
|
|
134
|
+
// not own (a shell grid, a docked panel). Shipped in the theme layer because
|
|
135
|
+
// the directive attaches only the class.
|
|
136
|
+
.strct-resize {
|
|
137
|
+
flex: none;
|
|
138
|
+
position: relative;
|
|
139
|
+
width: 5px;
|
|
140
|
+
cursor: col-resize;
|
|
141
|
+
background: transparent;
|
|
142
|
+
touch-action: none;
|
|
143
|
+
}
|
|
144
|
+
.strct-resize--y {
|
|
145
|
+
width: auto;
|
|
146
|
+
height: 5px;
|
|
147
|
+
cursor: row-resize;
|
|
148
|
+
}
|
|
149
|
+
.strct-resize::after {
|
|
150
|
+
content: '';
|
|
151
|
+
position: absolute;
|
|
152
|
+
inset-block: 50%;
|
|
153
|
+
inset-inline: 50%;
|
|
154
|
+
width: 3px;
|
|
155
|
+
height: 34px;
|
|
156
|
+
transform: translate(-50%, -50%);
|
|
157
|
+
border-radius: 999px;
|
|
158
|
+
background: var(--b2);
|
|
159
|
+
transition: background 0.14s ease;
|
|
160
|
+
}
|
|
161
|
+
.strct-resize--y::after {
|
|
162
|
+
width: 34px;
|
|
163
|
+
height: 3px;
|
|
164
|
+
}
|
|
165
|
+
.strct-resize:hover::after,
|
|
166
|
+
.strct-resize--dragging::after {
|
|
167
|
+
background: var(--acc);
|
|
168
|
+
}
|
|
169
|
+
.strct-resize:focus-visible {
|
|
170
|
+
outline: 2px solid var(--acc50);
|
|
171
|
+
outline-offset: -1px;
|
|
172
|
+
}
|
package/types/akcelik-strct.d.ts
CHANGED
|
@@ -438,8 +438,22 @@ declare class StrctShellService {
|
|
|
438
438
|
* </strct-shell>
|
|
439
439
|
*/
|
|
440
440
|
declare class StrctShell {
|
|
441
|
+
/**
|
|
442
|
+
* Id of the main region. Given one, the shell renders "Skip to main content"
|
|
443
|
+
* as its first focusable element — invisible until focused. Null (the
|
|
444
|
+
* default) renders nothing, so existing shells are unchanged.
|
|
445
|
+
*/
|
|
446
|
+
readonly skipLinkTarget: _angular_core.InputSignal<string | null>;
|
|
447
|
+
/** The link's text (localisable). */
|
|
448
|
+
readonly skipLinkLabel: _angular_core.InputSignal<string>;
|
|
449
|
+
private readonly doc;
|
|
450
|
+
/**
|
|
451
|
+
* Moves focus rather than only the scroll position: an href alone scrolls
|
|
452
|
+
* without focusing, so the next Tab would resume from the link.
|
|
453
|
+
*/
|
|
454
|
+
protected skipToMain(event: Event): void;
|
|
441
455
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrctShell, never>;
|
|
442
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctShell, "strct-shell", never, {}, {}, never, ["strct-header", "*", "strct-footer"], true, never>;
|
|
456
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctShell, "strct-shell", never, { "skipLinkTarget": { "alias": "skipLinkTarget"; "required": false; "isSignal": true; }; "skipLinkLabel": { "alias": "skipLinkLabel"; "required": false; "isSignal": true; }; }, {}, never, ["strct-header", "*", "strct-footer"], true, never>;
|
|
443
457
|
}
|
|
444
458
|
/** Top application bar. Holds brand on the left and actions on the right. */
|
|
445
459
|
declare class StrctHeader {
|
|
@@ -1061,11 +1075,17 @@ declare class StrctAccordionPanel {
|
|
|
1061
1075
|
readonly heading: _angular_core.InputSignal<string>;
|
|
1062
1076
|
/** Whether the panel is open (two-way). */
|
|
1063
1077
|
readonly expanded: _angular_core.ModelSignal<boolean>;
|
|
1078
|
+
/**
|
|
1079
|
+
* `quiet` is a fold in running text — no border or background, a `--text-sm`
|
|
1080
|
+
* summary in `--t2` with a chevron, the body indented. It reads like a raw
|
|
1081
|
+
* `<details>` while keeping the button + region semantics.
|
|
1082
|
+
*/
|
|
1083
|
+
readonly appearance: _angular_core.InputSignal<"boxed" | "quiet">;
|
|
1064
1084
|
protected readonly bodyId: string;
|
|
1065
1085
|
protected readonly headId: string;
|
|
1066
1086
|
toggle(): void;
|
|
1067
1087
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrctAccordionPanel, never>;
|
|
1068
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctAccordionPanel, "strct-accordion-panel", never, { "heading": { "alias": "heading"; "required": true; "isSignal": true; }; "expanded": { "alias": "expanded"; "required": false; "isSignal": true; }; }, { "expanded": "expandedChange"; }, never, ["*"], true, never>;
|
|
1088
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctAccordionPanel, "strct-accordion-panel", never, { "heading": { "alias": "heading"; "required": true; "isSignal": true; }; "expanded": { "alias": "expanded"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; }, { "expanded": "expandedChange"; }, never, ["*"], true, never>;
|
|
1069
1089
|
}
|
|
1070
1090
|
|
|
1071
1091
|
/** A single tab. Place inside `<strct-tabs>`; `label` names its button. */
|
|
@@ -5564,13 +5584,30 @@ declare class StrctSplitter {
|
|
|
5564
5584
|
/** Clamp bounds for the split (percent). */
|
|
5565
5585
|
readonly min: _angular_core.InputSignal<number>;
|
|
5566
5586
|
readonly max: _angular_core.InputSignal<number>;
|
|
5587
|
+
/**
|
|
5588
|
+
* What `split`, `minSize` and `maxSize` are measured in. A sidebar is 280px,
|
|
5589
|
+
* not 22%, so `px` sizes the start pane in pixels and drags it in pixels.
|
|
5590
|
+
*/
|
|
5591
|
+
readonly unit: _angular_core.InputSignal<"px" | "percent">;
|
|
5592
|
+
/** Bounds in `unit` for the start pane; they win over `min` / `max`. */
|
|
5593
|
+
readonly minSize: _angular_core.InputSignal<number | null>;
|
|
5594
|
+
readonly maxSize: _angular_core.InputSignal<number | null>;
|
|
5595
|
+
/** The start pane can be collapsed to nothing (Enter on the gutter). */
|
|
5596
|
+
readonly collapsible: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
5597
|
+
/** Whether it is collapsed (two-way). */
|
|
5598
|
+
readonly collapsed: _angular_core.ModelSignal<boolean>;
|
|
5567
5599
|
/** Stack panes vertically (gutter drags up/down). */
|
|
5568
5600
|
readonly vertical: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
5569
5601
|
/** Accessible name of the separator (localizable). */
|
|
5570
5602
|
readonly gutterLabel: _angular_core.InputSignal<string>;
|
|
5571
5603
|
/** Keyboard nudge step in percent. */
|
|
5572
5604
|
readonly step: _angular_core.InputSignal<number>;
|
|
5605
|
+
/** The effective bounds, in whichever unit the splitter is measured in. */
|
|
5606
|
+
protected readonly lowerBound: _angular_core.Signal<number>;
|
|
5607
|
+
protected readonly upperBound: _angular_core.Signal<number>;
|
|
5573
5608
|
protected readonly clamped: _angular_core.Signal<number>;
|
|
5609
|
+
/** The start pane's flex-basis: its size, or nothing while collapsed. */
|
|
5610
|
+
protected readonly startBasis: _angular_core.Signal<string>;
|
|
5574
5611
|
protected readonly dragging: _angular_core.WritableSignal<boolean>;
|
|
5575
5612
|
private moveHandler;
|
|
5576
5613
|
private upHandler;
|
|
@@ -5583,7 +5620,56 @@ declare class StrctSplitter {
|
|
|
5583
5620
|
private isRtl;
|
|
5584
5621
|
protected onKeydown(event: KeyboardEvent): void;
|
|
5585
5622
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrctSplitter, never>;
|
|
5586
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctSplitter, "strct-splitter", never, { "split": { "alias": "split"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "vertical": { "alias": "vertical"; "required": false; "isSignal": true; }; "gutterLabel": { "alias": "gutterLabel"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; }, { "split": "splitChange"; }, never, ["[strctPaneStart]", "[strctPaneEnd]"], true, never>;
|
|
5623
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctSplitter, "strct-splitter", never, { "split": { "alias": "split"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "unit": { "alias": "unit"; "required": false; "isSignal": true; }; "minSize": { "alias": "minSize"; "required": false; "isSignal": true; }; "maxSize": { "alias": "maxSize"; "required": false; "isSignal": true; }; "collapsible": { "alias": "collapsible"; "required": false; "isSignal": true; }; "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; "vertical": { "alias": "vertical"; "required": false; "isSignal": true; }; "gutterLabel": { "alias": "gutterLabel"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; }, { "split": "splitChange"; "collapsed": "collapsedChange"; }, never, ["[strctPaneStart]", "[strctPaneEnd]"], true, never>;
|
|
5624
|
+
}
|
|
5625
|
+
|
|
5626
|
+
/**
|
|
5627
|
+
* The splitter's gutter, for layouts the splitter does not own — a shell grid,
|
|
5628
|
+
* a docked panel. It draws the library's grip and brings the separator
|
|
5629
|
+
* semantics with it: `role="separator"`, a tab stop, arrows that step, Home and
|
|
5630
|
+
* End for the bounds, and Enter to collapse when `collapsible`.
|
|
5631
|
+
*
|
|
5632
|
+
* <div [strctResizeHandle]="'y'" [(size)]="panelHeight" [min]="120" [max]="600"
|
|
5633
|
+
* aria-label="Resize the task panel"></div>
|
|
5634
|
+
*
|
|
5635
|
+
* The consumer owns the size — the handle only reports it, so the value can be
|
|
5636
|
+
* persisted, clamped or animated as the layout needs.
|
|
5637
|
+
*/
|
|
5638
|
+
declare class StrctResizeHandle {
|
|
5639
|
+
/** Which axis the handle resizes along: `'x'` (default) or `'y'`. */
|
|
5640
|
+
readonly axis: _angular_core.InputSignal<"x" | "y">;
|
|
5641
|
+
/** The size being dragged, in px (two-way). */
|
|
5642
|
+
readonly size: _angular_core.ModelSignal<number>;
|
|
5643
|
+
/** Bounds, in px. */
|
|
5644
|
+
readonly min: _angular_core.InputSignal<number>;
|
|
5645
|
+
readonly max: _angular_core.InputSignal<number>;
|
|
5646
|
+
/** Arrow-key step in px; Shift multiplies it by four. */
|
|
5647
|
+
readonly step: _angular_core.InputSignal<number>;
|
|
5648
|
+
/** Enter collapses the pane the handle sizes. */
|
|
5649
|
+
readonly collapsible: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
5650
|
+
/** Whether it is collapsed (two-way). */
|
|
5651
|
+
readonly collapsed: _angular_core.ModelSignal<boolean>;
|
|
5652
|
+
/**
|
|
5653
|
+
* Which side of the handle the sized pane is on. `'before'` (default) grows
|
|
5654
|
+
* the pane as the pointer moves toward the inline/block end.
|
|
5655
|
+
*/
|
|
5656
|
+
readonly side: _angular_core.InputSignal<"before" | "after">;
|
|
5657
|
+
private readonly el;
|
|
5658
|
+
protected readonly dragging: _angular_core.WritableSignal<boolean>;
|
|
5659
|
+
private origin;
|
|
5660
|
+
private originSize;
|
|
5661
|
+
private readonly rtl;
|
|
5662
|
+
private readonly move;
|
|
5663
|
+
private readonly up;
|
|
5664
|
+
constructor();
|
|
5665
|
+
protected onDown(event: PointerEvent): void;
|
|
5666
|
+
private onMove;
|
|
5667
|
+
private onUp;
|
|
5668
|
+
private detach;
|
|
5669
|
+
protected onKeydown(event: KeyboardEvent): void;
|
|
5670
|
+
private commit;
|
|
5671
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrctResizeHandle, never>;
|
|
5672
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<StrctResizeHandle, "[strctResizeHandle]", never, { "axis": { "alias": "strctResizeHandle"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "collapsible": { "alias": "collapsible"; "required": false; "isSignal": true; }; "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; "side": { "alias": "side"; "required": false; "isSignal": true; }; }, { "size": "sizeChange"; "collapsed": "collapsedChange"; }, never, never, true, never>;
|
|
5587
5673
|
}
|
|
5588
5674
|
|
|
5589
5675
|
/** One transferable item. */
|
|
@@ -5915,6 +6001,40 @@ interface StrctReorderEvent {
|
|
|
5915
6001
|
from: number;
|
|
5916
6002
|
to: number;
|
|
5917
6003
|
}
|
|
6004
|
+
/** A completed move between two connected lists. */
|
|
6005
|
+
interface StrctReorderMoveEvent {
|
|
6006
|
+
/** The moved element, so the consumer can identify its own item. */
|
|
6007
|
+
item: HTMLElement;
|
|
6008
|
+
fromList: string;
|
|
6009
|
+
toList: string;
|
|
6010
|
+
fromIndex: number;
|
|
6011
|
+
toIndex: number;
|
|
6012
|
+
}
|
|
6013
|
+
/**
|
|
6014
|
+
* Connects several `[strctReorder]` lists, so a card can move between the
|
|
6015
|
+
* columns of a board — by its handle, or with Alt+ArrowLeft / Alt+ArrowRight.
|
|
6016
|
+
* Moves within one list stay on that list's `reordered`; moves across lists
|
|
6017
|
+
* come out here.
|
|
6018
|
+
*/
|
|
6019
|
+
declare class StrctReorderGroup {
|
|
6020
|
+
/** A card moved from one list to another. */
|
|
6021
|
+
readonly moved: _angular_core.OutputEmitterRef<StrctReorderMoveEvent>;
|
|
6022
|
+
/** Every list in this group, in DOM order. */
|
|
6023
|
+
readonly lists: _angular_core.WritableSignal<StrctReorder[]>;
|
|
6024
|
+
/** Where the current drag started, so a drop elsewhere knows its origin. */
|
|
6025
|
+
readonly source: _angular_core.WritableSignal<{
|
|
6026
|
+
list: StrctReorder;
|
|
6027
|
+
index: number;
|
|
6028
|
+
} | null>;
|
|
6029
|
+
register(list: StrctReorder): void;
|
|
6030
|
+
unregister(list: StrctReorder): void;
|
|
6031
|
+
/** The list next to `list` in the given direction, or null at the ends. */
|
|
6032
|
+
neighbour(list: StrctReorder, dir: -1 | 1): StrctReorder | null;
|
|
6033
|
+
/** DOM order, not registration order — columns read left to right. */
|
|
6034
|
+
ordered(): StrctReorder[];
|
|
6035
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrctReorderGroup, never>;
|
|
6036
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<StrctReorderGroup, "[strctReorderGroup]", never, {}, { "moved": "moved"; }, never, never, true, never>;
|
|
6037
|
+
}
|
|
5918
6038
|
/**
|
|
5919
6039
|
* List drag-reorder primitive — the consumer owns the array:
|
|
5920
6040
|
*
|
|
@@ -5936,6 +6056,8 @@ interface StrctReorderEvent {
|
|
|
5936
6056
|
*/
|
|
5937
6057
|
declare class StrctReorder implements OnDestroy {
|
|
5938
6058
|
private readonly host;
|
|
6059
|
+
/** The group this list belongs to, when it is one of several. */
|
|
6060
|
+
readonly group: StrctReorderGroup | null;
|
|
5939
6061
|
private readonly renderer;
|
|
5940
6062
|
private readonly doc;
|
|
5941
6063
|
private readonly announcer;
|
|
@@ -5953,11 +6075,19 @@ declare class StrctReorder implements OnDestroy {
|
|
|
5953
6075
|
* (moved item's text, new 1-based position, item count).
|
|
5954
6076
|
*/
|
|
5955
6077
|
readonly announcement: _angular_core.InputSignal<(label: string, position: number, total: number) => string>;
|
|
6078
|
+
/** This list's name inside a `[strctReorderGroup]`. */
|
|
6079
|
+
readonly listId: _angular_core.InputSignal<string>;
|
|
6080
|
+
/** What a move between lists says (localizable). */
|
|
6081
|
+
readonly moveAnnouncement: _angular_core.InputSignal<(label: string, list: string, position: number, total: number) => string>;
|
|
5956
6082
|
readonly dragIndex: _angular_core.WritableSignal<number | null>;
|
|
5957
6083
|
readonly overIndex: _angular_core.WritableSignal<number | null>;
|
|
5958
6084
|
/** Id of the sr-only instructions element the items point to. */
|
|
5959
6085
|
readonly instructionsId: string;
|
|
5960
6086
|
private hint;
|
|
6087
|
+
/** The container element — the group orders its lists by DOM position. */
|
|
6088
|
+
element(): HTMLElement;
|
|
6089
|
+
/** Move an item into this list at `index`, and say so. */
|
|
6090
|
+
acceptFrom(from: StrctReorder, fromIndex: number, index: number): void;
|
|
5961
6091
|
constructor();
|
|
5962
6092
|
items(): HTMLElement[];
|
|
5963
6093
|
indexOf(el: HTMLElement): number;
|
|
@@ -5967,7 +6097,15 @@ declare class StrctReorder implements OnDestroy {
|
|
|
5967
6097
|
protected onDragLeave(event: DragEvent): void;
|
|
5968
6098
|
ngOnDestroy(): void;
|
|
5969
6099
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrctReorder, never>;
|
|
5970
|
-
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<StrctReorder, "[strctReorder]", never, { "reorderDisabled": { "alias": "reorderDisabled"; "required": false; "isSignal": true; }; "instructions": { "alias": "instructions"; "required": false; "isSignal": true; }; "announcement": { "alias": "announcement"; "required": false; "isSignal": true; }; }, { "reordered": "reordered"; }, never, never, true, never>;
|
|
6100
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<StrctReorder, "[strctReorder]", never, { "reorderDisabled": { "alias": "reorderDisabled"; "required": false; "isSignal": true; }; "instructions": { "alias": "instructions"; "required": false; "isSignal": true; }; "announcement": { "alias": "announcement"; "required": false; "isSignal": true; }; "listId": { "alias": "listId"; "required": false; "isSignal": true; }; "moveAnnouncement": { "alias": "moveAnnouncement"; "required": false; "isSignal": true; }; }, { "reordered": "reordered"; }, never, never, true, never>;
|
|
6101
|
+
}
|
|
6102
|
+
/**
|
|
6103
|
+
* The only place a drag may start from, when an item has one. Content that is
|
|
6104
|
+
* itself draggable — text selection, a chart brush — must not start a move.
|
|
6105
|
+
*/
|
|
6106
|
+
declare class StrctReorderHandle {
|
|
6107
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrctReorderHandle, never>;
|
|
6108
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<StrctReorderHandle, "[strctReorderHandle]", never, {}, {}, never, never, true, never>;
|
|
5971
6109
|
}
|
|
5972
6110
|
/** One draggable row inside a `[strctReorder]` container. */
|
|
5973
6111
|
declare class StrctReorderItem {
|
|
@@ -5975,9 +6113,14 @@ declare class StrctReorderItem {
|
|
|
5975
6113
|
private readonly el;
|
|
5976
6114
|
private readonly hadOwnTabindex;
|
|
5977
6115
|
protected hostTabindex(): number | null;
|
|
6116
|
+
/** The keys that apply: the sideways pair only when there is somewhere to go. */
|
|
6117
|
+
protected shortcuts(): string;
|
|
5978
6118
|
protected isDragging(): boolean;
|
|
5979
6119
|
protected isOver(): boolean;
|
|
5980
6120
|
protected index(): number;
|
|
6121
|
+
/** Where the last pointerdown landed — a drag may only start on a handle. */
|
|
6122
|
+
private fromHandle;
|
|
6123
|
+
protected onPointerDown(event: PointerEvent): void;
|
|
5981
6124
|
protected onDragStart(event: DragEvent): void;
|
|
5982
6125
|
protected onDragOver(event: DragEvent): void;
|
|
5983
6126
|
protected onDrop(event: DragEvent): void;
|
|
@@ -6196,6 +6339,36 @@ declare class StrctSteps {
|
|
|
6196
6339
|
static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctSteps, "strct-steps", never, { "steps": { "alias": "steps"; "required": true; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "numbered": { "alias": "numbered"; "required": false; "isSignal": true; }; "dense": { "alias": "dense"; "required": false; "isSignal": true; }; "labels": { "alias": "labels"; "required": false; "isSignal": true; }; }, {}, ["actionTpl"], never, true, never>;
|
|
6197
6340
|
}
|
|
6198
6341
|
|
|
6342
|
+
/** What the frame is showing instead of a picture. */
|
|
6343
|
+
type StrctMediaState = 'content' | 'loading' | 'empty' | 'off' | 'error';
|
|
6344
|
+
/**
|
|
6345
|
+
* A live picture — a console thumbnail, a camera — sits in a fixed-ratio frame,
|
|
6346
|
+
* and when there is no picture yet, or none at all, the frame says why **in its
|
|
6347
|
+
* own small space**: an empty state is too large for a 240px card.
|
|
6348
|
+
*
|
|
6349
|
+
* <strct-media-frame ratio="4 / 3"><img [src]="thumb" alt="" /></strct-media-frame>
|
|
6350
|
+
* <strct-media-frame state="off" message="The VM is off" />
|
|
6351
|
+
*/
|
|
6352
|
+
declare class StrctMediaFrame {
|
|
6353
|
+
/** The frame's aspect ratio, as a CSS `aspect-ratio` value. */
|
|
6354
|
+
readonly ratio: _angular_core.InputSignal<string>;
|
|
6355
|
+
/** What the frame shows: the projected picture, or why there is none. */
|
|
6356
|
+
readonly state: _angular_core.InputSignal<StrctMediaState>;
|
|
6357
|
+
/** The placeholder's line ("The VM is off"). */
|
|
6358
|
+
readonly message: _angular_core.InputSignal<string>;
|
|
6359
|
+
/** Overrides the icon derived from `state`. */
|
|
6360
|
+
readonly icon: _angular_core.InputSignal<string>;
|
|
6361
|
+
/** The whole frame becomes one tab stop that emits `activated`. */
|
|
6362
|
+
readonly interactive: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
6363
|
+
/** The accessible name of that control; falls back to `message`. */
|
|
6364
|
+
readonly activateLabel: _angular_core.InputSignal<string>;
|
|
6365
|
+
/** The frame was activated. */
|
|
6366
|
+
readonly activated: _angular_core.OutputEmitterRef<void>;
|
|
6367
|
+
protected readonly iconName: _angular_core.Signal<string>;
|
|
6368
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrctMediaFrame, never>;
|
|
6369
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctMediaFrame, "strct-media-frame", never, { "ratio": { "alias": "ratio"; "required": false; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "message": { "alias": "message"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "interactive": { "alias": "interactive"; "required": false; "isSignal": true; }; "activateLabel": { "alias": "activateLabel"; "required": false; "isSignal": true; }; }, { "activated": "activated"; }, never, ["*"], true, never>;
|
|
6370
|
+
}
|
|
6371
|
+
|
|
6199
6372
|
/**
|
|
6200
6373
|
* A value change, as one phrase: "v10.27 → v10.28". The old value is muted, the
|
|
6201
6374
|
* arrow is the library's, the new one is emphasised — and assistive tech hears
|
|
@@ -6833,5 +7006,5 @@ declare class StrctHeatmap {
|
|
|
6833
7006
|
static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctHeatmap, "strct-heatmap", never, { "data": { "alias": "data"; "required": false; "isSignal": true; }; "rows": { "alias": "rows"; "required": false; "isSignal": true; }; "cols": { "alias": "cols"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "colLabelEvery": { "alias": "colLabelEvery"; "required": false; "isSignal": true; }; "colLabel": { "alias": "colLabel"; "required": false; "isSignal": true; }; "valueFormat": { "alias": "valueFormat"; "required": false; "isSignal": true; }; "thresholds": { "alias": "thresholds"; "required": false; "isSignal": true; }; "status": { "alias": "status"; "required": false; "isSignal": true; }; "emptyText": { "alias": "emptyText"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "summaryFormat": { "alias": "summaryFormat"; "required": false; "isSignal": true; }; "cellHeight": { "alias": "cellHeight"; "required": false; "isSignal": true; }; "gap": { "alias": "gap"; "required": false; "isSignal": true; }; "rowLabelWidth": { "alias": "rowLabelWidth"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
6834
7007
|
}
|
|
6835
7008
|
|
|
6836
|
-
export { FOCUSABLE_SELECTOR, STRCT_DP_DOW, STRCT_DP_DOW_FULL, STRCT_DP_MONTHS, STRCT_ICONS, STRCT_ICON_GROUPS, STRCT_ICON_NAMES, STRCT_MASKS, STRCT_NOTIFICATION_HISTORY_LIMIT, STRCT_PALETTES, STRCT_RAW_ICONS, STRCT_TIME_RANGE_PRESETS, STRCT_WIZARD_DEFAULTS, StrctAccordion, StrctAccordionPanel, StrctAlert, StrctAnnouncer, StrctAvatar, StrctBadge, StrctBreadcrumb, StrctBreadcrumbItem, StrctButton, StrctButtonGroup, StrctBytesPipe, StrctCard, StrctCardBlock, StrctCardFooter, StrctCardHeader, StrctCardHeaderActions, StrctCardHeaderMeta, StrctCardHeaderNote, StrctCascadeColumn, StrctCascadeHost, StrctCascadeSelect, StrctCellDef, StrctCellStatus, StrctChange, StrctChart, StrctCheckbox, StrctChips, StrctCode, StrctCodeInline, StrctColorPicker, StrctCombobox, StrctCommandPalette, StrctConfirmOutlet, StrctConfirmService, StrctContextMenu, StrctContextMenuTrigger, StrctControlDescription, StrctCopy, StrctDatagrid, StrctDatagridActionBar, StrctDatagridActionBarCaption, StrctDatepicker, StrctDatetimePicker, StrctDesc, StrctDescriptionList, StrctDiff, StrctDivider, StrctDonut, StrctDrawer, StrctDrawerFooter, StrctDropdown, StrctDropdownDivider, StrctDropdownItem, StrctDropdownItemAction, StrctDropdownTrigger, StrctDurationPipe, StrctEmptyState, StrctField, StrctFieldGroup, StrctFieldHint, StrctFieldPrefix, StrctFieldSuffix, StrctFile, StrctFilterBar, StrctFlow, StrctFlowNodeTemplate, StrctFooter, StrctGauge, StrctHeader, StrctHeatmap, StrctHero, StrctHotkeysHelp, StrctHotkeysService, StrctIcon, StrctInlineEdit, StrctInput, StrctInputMask, StrctInputOtp, StrctKbd, StrctKnob, StrctLegend, StrctList, StrctListItem, StrctListItemDescription, StrctListItemLeading, StrctListItemMeta, StrctListItemTrailing, StrctLiveIndicator, StrctLogViewer, StrctLogin, StrctMenuPanel, StrctMenuService, StrctMenubar, StrctMetricTile, StrctModal, StrctModalContent, StrctNav, StrctNavItem, StrctNotificationCenter, StrctNumber, StrctOverlay, StrctPageHeader, StrctPageHeaderActions, StrctPageHeaderCrumbs, StrctPageHeaderTitleMeta, StrctPagination, StrctPassword, StrctPopover, StrctPopoverTrigger, StrctProgress, StrctRadio, StrctRadioGroup, StrctRail, StrctRange, StrctRatePipe, StrctRating, StrctReorder, StrctReorderItem, StrctRowDetailDef, StrctSearchbox, StrctSectionHeader, StrctSectionHeaderActions, StrctSectionHeaderMeta, StrctSectionMenu, StrctSegmented, StrctSelect, StrctShell, StrctShellService, StrctSiPipe, StrctSignpost, StrctSignpostTrigger, StrctSkeleton, StrctSparkline, StrctSpeedDial, StrctSpinner, StrctSplitButton, StrctSplitter, StrctStack, StrctStackItem, StrctStatusDot, StrctStep, StrctStepAction, StrctSteps, StrctSubmenu, StrctTab, StrctTable, StrctTabs, StrctTag, StrctTagLeading, StrctThemeService, StrctThemeSwitcher, StrctTimeRangePicker, StrctTimeline, StrctTimelineItem, StrctToastOutlet, StrctToastService, StrctToggle, StrctToolbar, StrctToolbarCaption, StrctToolbarSpacer, StrctTooltip, StrctTour, StrctTransfer, StrctTree, StrctTreeNode, StrctTreeSelect, StrctVerticalNav, StrctWatermark, StrctWizard, StrctWizardAside, focusFirstIn, keepTabInside, lockBodyScroll, parseAnsi, provideStrctWizardDefaults, registerStrctIcon, restoreFocus, saveFocusedElement, strctComputeDiff, strctDpPad, strctFormatBytes, strctFormatDuration, strctFormatRate, strctFormatSi, strctValidationIcon, strctValidationTone, unlockBodyScroll };
|
|
6837
|
-
export type { StrctAlertType, StrctAvatarSize, StrctAvatarStatus, StrctBadgeStatus, StrctButtonSize, StrctButtonVariant, StrctCascadeOption, StrctCellContext, StrctChartAnnotation, StrctChartColor, StrctChartCurve, StrctChartSeries, StrctChartSlot, StrctChartStatus, StrctChartSummaryInfo, StrctChartThreshold, StrctChartType, StrctColumn, StrctCommandItem, StrctConfirmOptions, StrctConfirmTone, StrctDatagridColumn, StrctDatagridColumnState, StrctDatagridFilters, StrctDatagridLabels, StrctDatagridLazyState, StrctDescAlign, StrctDescItem, StrctDiffRow, StrctDonutSegment, StrctDrawerSide, StrctDrawerSize, StrctEmptyVariant, StrctFilterChip, StrctFlowDirection, StrctFlowEdge, StrctFlowNode, StrctFlowOrientation, StrctHeatmapCell, StrctHeatmapSummaryInfo, StrctHotkey, StrctIconBadge, StrctIconName, StrctKnobStatus, StrctLegendItem, StrctLiveLabels, StrctLiveState, StrctLogLine, StrctMenuItem, StrctMenuLink, StrctMenuOpenOptions, StrctMenuPlacement, StrctMenuSection, StrctMenubarItem, StrctMetricStatus, StrctModalSize, StrctMode, StrctNotification, StrctOption, StrctOverlayPlacement, StrctPalette, StrctPaletteInfo, StrctProgressSegment, StrctProgressStatus, StrctRailItem, StrctRailStatus, StrctReorderEvent, StrctRow, StrctRowId, StrctSegmentedOption, StrctSegmentedSize, StrctSignpostPosition, StrctSpeedDialDirection, StrctSpinnerSize, StrctStatus, StrctStatusDotSize, StrctStepPhase, StrctStepState, StrctStepsLabels, StrctTagStatus, StrctThresholds, StrctTimeRange, StrctTimeRangePreset, StrctTimelineState, StrctToast, StrctToastOptions, StrctToastType, StrctTooltipPosition, StrctTourStep, StrctTransferItem, StrctTreeDropEvent, StrctTreeMenuEvent, StrctTreeNodeData, StrctTreeNodeMenuFn, StrctValidationState, StrctValidationStatus, StrctWizardDefaults };
|
|
7009
|
+
export { FOCUSABLE_SELECTOR, STRCT_DP_DOW, STRCT_DP_DOW_FULL, STRCT_DP_MONTHS, STRCT_ICONS, STRCT_ICON_GROUPS, STRCT_ICON_NAMES, STRCT_MASKS, STRCT_NOTIFICATION_HISTORY_LIMIT, STRCT_PALETTES, STRCT_RAW_ICONS, STRCT_TIME_RANGE_PRESETS, STRCT_WIZARD_DEFAULTS, StrctAccordion, StrctAccordionPanel, StrctAlert, StrctAnnouncer, StrctAvatar, StrctBadge, StrctBreadcrumb, StrctBreadcrumbItem, StrctButton, StrctButtonGroup, StrctBytesPipe, StrctCard, StrctCardBlock, StrctCardFooter, StrctCardHeader, StrctCardHeaderActions, StrctCardHeaderMeta, StrctCardHeaderNote, StrctCascadeColumn, StrctCascadeHost, StrctCascadeSelect, StrctCellDef, StrctCellStatus, StrctChange, StrctChart, StrctCheckbox, StrctChips, StrctCode, StrctCodeInline, StrctColorPicker, StrctCombobox, StrctCommandPalette, StrctConfirmOutlet, StrctConfirmService, StrctContextMenu, StrctContextMenuTrigger, StrctControlDescription, StrctCopy, StrctDatagrid, StrctDatagridActionBar, StrctDatagridActionBarCaption, StrctDatepicker, StrctDatetimePicker, StrctDesc, StrctDescriptionList, StrctDiff, StrctDivider, StrctDonut, StrctDrawer, StrctDrawerFooter, StrctDropdown, StrctDropdownDivider, StrctDropdownItem, StrctDropdownItemAction, StrctDropdownTrigger, StrctDurationPipe, StrctEmptyState, StrctField, StrctFieldGroup, StrctFieldHint, StrctFieldPrefix, StrctFieldSuffix, StrctFile, StrctFilterBar, StrctFlow, StrctFlowNodeTemplate, StrctFooter, StrctGauge, StrctHeader, StrctHeatmap, StrctHero, StrctHotkeysHelp, StrctHotkeysService, StrctIcon, StrctInlineEdit, StrctInput, StrctInputMask, StrctInputOtp, StrctKbd, StrctKnob, StrctLegend, StrctList, StrctListItem, StrctListItemDescription, StrctListItemLeading, StrctListItemMeta, StrctListItemTrailing, StrctLiveIndicator, StrctLogViewer, StrctLogin, StrctMediaFrame, StrctMenuPanel, StrctMenuService, StrctMenubar, StrctMetricTile, StrctModal, StrctModalContent, StrctNav, StrctNavItem, StrctNotificationCenter, StrctNumber, StrctOverlay, StrctPageHeader, StrctPageHeaderActions, StrctPageHeaderCrumbs, StrctPageHeaderTitleMeta, StrctPagination, StrctPassword, StrctPopover, StrctPopoverTrigger, StrctProgress, StrctRadio, StrctRadioGroup, StrctRail, StrctRange, StrctRatePipe, StrctRating, StrctReorder, StrctReorderGroup, StrctReorderHandle, StrctReorderItem, StrctResizeHandle, StrctRowDetailDef, StrctSearchbox, StrctSectionHeader, StrctSectionHeaderActions, StrctSectionHeaderMeta, StrctSectionMenu, StrctSegmented, StrctSelect, StrctShell, StrctShellService, StrctSiPipe, StrctSignpost, StrctSignpostTrigger, StrctSkeleton, StrctSparkline, StrctSpeedDial, StrctSpinner, StrctSplitButton, StrctSplitter, StrctStack, StrctStackItem, StrctStatusDot, StrctStep, StrctStepAction, StrctSteps, StrctSubmenu, StrctTab, StrctTable, StrctTabs, StrctTag, StrctTagLeading, StrctThemeService, StrctThemeSwitcher, StrctTimeRangePicker, StrctTimeline, StrctTimelineItem, StrctToastOutlet, StrctToastService, StrctToggle, StrctToolbar, StrctToolbarCaption, StrctToolbarSpacer, StrctTooltip, StrctTour, StrctTransfer, StrctTree, StrctTreeNode, StrctTreeSelect, StrctVerticalNav, StrctWatermark, StrctWizard, StrctWizardAside, focusFirstIn, keepTabInside, lockBodyScroll, parseAnsi, provideStrctWizardDefaults, registerStrctIcon, restoreFocus, saveFocusedElement, strctComputeDiff, strctDpPad, strctFormatBytes, strctFormatDuration, strctFormatRate, strctFormatSi, strctValidationIcon, strctValidationTone, unlockBodyScroll };
|
|
7010
|
+
export type { StrctAlertType, StrctAvatarSize, StrctAvatarStatus, StrctBadgeStatus, StrctButtonSize, StrctButtonVariant, StrctCascadeOption, StrctCellContext, StrctChartAnnotation, StrctChartColor, StrctChartCurve, StrctChartSeries, StrctChartSlot, StrctChartStatus, StrctChartSummaryInfo, StrctChartThreshold, StrctChartType, StrctColumn, StrctCommandItem, StrctConfirmOptions, StrctConfirmTone, StrctDatagridColumn, StrctDatagridColumnState, StrctDatagridFilters, StrctDatagridLabels, StrctDatagridLazyState, StrctDescAlign, StrctDescItem, StrctDiffRow, StrctDonutSegment, StrctDrawerSide, StrctDrawerSize, StrctEmptyVariant, StrctFilterChip, StrctFlowDirection, StrctFlowEdge, StrctFlowNode, StrctFlowOrientation, StrctHeatmapCell, StrctHeatmapSummaryInfo, StrctHotkey, StrctIconBadge, StrctIconName, StrctKnobStatus, StrctLegendItem, StrctLiveLabels, StrctLiveState, StrctLogLine, StrctMediaState, StrctMenuItem, StrctMenuLink, StrctMenuOpenOptions, StrctMenuPlacement, StrctMenuSection, StrctMenubarItem, StrctMetricStatus, StrctModalSize, StrctMode, StrctNotification, StrctOption, StrctOverlayPlacement, StrctPalette, StrctPaletteInfo, StrctProgressSegment, StrctProgressStatus, StrctRailItem, StrctRailStatus, StrctReorderEvent, StrctReorderMoveEvent, StrctRow, StrctRowId, StrctSegmentedOption, StrctSegmentedSize, StrctSignpostPosition, StrctSpeedDialDirection, StrctSpinnerSize, StrctStatus, StrctStatusDotSize, StrctStepPhase, StrctStepState, StrctStepsLabels, StrctTagStatus, StrctThresholds, StrctTimeRange, StrctTimeRangePreset, StrctTimelineState, StrctToast, StrctToastOptions, StrctToastType, StrctTooltipPosition, StrctTourStep, StrctTransferItem, StrctTreeDropEvent, StrctTreeMenuEvent, StrctTreeNodeData, StrctTreeNodeMenuFn, StrctValidationState, StrctValidationStatus, StrctWizardDefaults };
|