@akcelik/strct 5.4.0 → 5.5.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 +156 -33
- package/fesm2022/akcelik-strct.mjs.map +1 -1
- package/package.json +1 -1
- package/types/akcelik-strct.d.ts +50 -8
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@akcelik/strct",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.5.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
|
@@ -937,6 +937,22 @@ declare class StrctProgress {
|
|
|
937
937
|
readonly valueText: _angular_core.InputSignal<string>;
|
|
938
938
|
/** A quiet line under the bar — "219 GB free across 2 nodes". */
|
|
939
939
|
readonly caption: _angular_core.InputSignal<string>;
|
|
940
|
+
/**
|
|
941
|
+
* The caption's tone. A critical capacity line's note — "2 GB left after the
|
|
942
|
+
* tightest node" — is the warning; `--t3` says it is an aside.
|
|
943
|
+
*/
|
|
944
|
+
readonly captionStatus: _angular_core.InputSignal<StrctProgressStatus | null>;
|
|
945
|
+
/**
|
|
946
|
+
* The bar's accessible name, when the visible `label` is not it: a column of
|
|
947
|
+
* per-cluster memory bars would otherwise all be named "Memory". Defaults to
|
|
948
|
+
* `label`.
|
|
949
|
+
*/
|
|
950
|
+
readonly ariaLabel: _angular_core.InputSignal<string>;
|
|
951
|
+
/**
|
|
952
|
+
* Where `showValue` puts the number: on its own row above the track, or
|
|
953
|
+
* beside it — which is what a bar inside a table cell wants.
|
|
954
|
+
*/
|
|
955
|
+
readonly valuePosition: _angular_core.InputSignal<"end" | "top">;
|
|
940
956
|
/** Running, but with no percentage to report. */
|
|
941
957
|
readonly indeterminate: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
942
958
|
/** Stack several fills (used now + what would arrive); clamped to 100 total. */
|
|
@@ -960,7 +976,7 @@ declare class StrctProgress {
|
|
|
960
976
|
/** Status after applying thresholds (falls back to `status` when none set). */
|
|
961
977
|
protected readonly resolvedStatus: _angular_core.Signal<StrctProgressStatus>;
|
|
962
978
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrctProgress, never>;
|
|
963
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctProgress, "strct-progress", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "status": { "alias": "status"; "required": false; "isSignal": true; }; "visibleLabel": { "alias": "visibleLabel"; "required": false; "isSignal": true; }; "showValue": { "alias": "showValue"; "required": false; "isSignal": true; }; "valueText": { "alias": "valueText"; "required": false; "isSignal": true; }; "caption": { "alias": "caption"; "required": false; "isSignal": true; }; "indeterminate": { "alias": "indeterminate"; "required": false; "isSignal": true; }; "segments": { "alias": "segments"; "required": false; "isSignal": true; }; "thresholds": { "alias": "thresholds"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
979
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctProgress, "strct-progress", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "status": { "alias": "status"; "required": false; "isSignal": true; }; "visibleLabel": { "alias": "visibleLabel"; "required": false; "isSignal": true; }; "showValue": { "alias": "showValue"; "required": false; "isSignal": true; }; "valueText": { "alias": "valueText"; "required": false; "isSignal": true; }; "caption": { "alias": "caption"; "required": false; "isSignal": true; }; "captionStatus": { "alias": "captionStatus"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "valuePosition": { "alias": "valuePosition"; "required": false; "isSignal": true; }; "indeterminate": { "alias": "indeterminate"; "required": false; "isSignal": true; }; "segments": { "alias": "segments"; "required": false; "isSignal": true; }; "thresholds": { "alias": "thresholds"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
964
980
|
}
|
|
965
981
|
|
|
966
982
|
/** Spinner size variants. */
|
|
@@ -5260,11 +5276,20 @@ declare class StrctHero {
|
|
|
5260
5276
|
/** Tighter padding for secondary placements. */
|
|
5261
5277
|
readonly dense: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
5262
5278
|
/**
|
|
5263
|
-
*
|
|
5264
|
-
*
|
|
5265
|
-
*
|
|
5279
|
+
* How the banner announces itself. `true` opts a non-critical hero into a
|
|
5280
|
+
* polite live region (`role="status"`), for content that updates after load.
|
|
5281
|
+
* `'polite'` and `'assertive'` say it outright, whatever the status — a page
|
|
5282
|
+
* that renders its verdict on navigation wants `'polite'`, so a critical
|
|
5283
|
+
* hero does not interrupt on every load.
|
|
5266
5284
|
*/
|
|
5267
|
-
readonly live: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
5285
|
+
readonly live: _angular_core.InputSignalWithTransform<boolean | "polite" | "assertive", unknown>;
|
|
5286
|
+
/**
|
|
5287
|
+
* A critical hero interrupts by default, because it usually appears in
|
|
5288
|
+
* answer to something the user did. A page that renders a verdict on
|
|
5289
|
+
* navigation would interrupt on every load instead, so `live="polite"` makes
|
|
5290
|
+
* it a `status`; `live="assertive"` asks for `alert` whatever the status.
|
|
5291
|
+
*/
|
|
5292
|
+
protected readonly liveRole: _angular_core.Signal<"status" | "alert" | null>;
|
|
5268
5293
|
protected readonly headingId: string;
|
|
5269
5294
|
protected readonly resolvedIcon: _angular_core.Signal<string>;
|
|
5270
5295
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrctHero, never>;
|
|
@@ -5478,6 +5503,12 @@ declare class StrctEmptyState {
|
|
|
5478
5503
|
/** Override the preset tone (neutral / warning / critical / accent). */
|
|
5479
5504
|
readonly tone: _angular_core.InputSignal<string>;
|
|
5480
5505
|
readonly title: _angular_core.InputSignal<string>;
|
|
5506
|
+
/**
|
|
5507
|
+
* Which heading element the title is. `null` renders a `<p>` — what a
|
|
5508
|
+
* loading state inside a card wants, since it should not add a heading to
|
|
5509
|
+
* the page outline.
|
|
5510
|
+
*/
|
|
5511
|
+
readonly titleLevel: _angular_core.InputSignal<2 | 3 | 5 | 4 | 6 | null>;
|
|
5481
5512
|
/**
|
|
5482
5513
|
* `sm` is the inline row a 240px frame wants: a 16px icon with the title and
|
|
5483
5514
|
* description on one line. A page-sized empty state stays `md`.
|
|
@@ -5487,7 +5518,7 @@ declare class StrctEmptyState {
|
|
|
5487
5518
|
protected readonly resolvedIcon: _angular_core.Signal<string>;
|
|
5488
5519
|
protected readonly toneClass: _angular_core.Signal<string>;
|
|
5489
5520
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrctEmptyState, never>;
|
|
5490
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctEmptyState, "strct-empty-state", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": true; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
|
|
5521
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctEmptyState, "strct-empty-state", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": true; "isSignal": true; }; "titleLevel": { "alias": "titleLevel"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
|
|
5491
5522
|
}
|
|
5492
5523
|
|
|
5493
5524
|
/**
|
|
@@ -6582,6 +6613,12 @@ type StrctMediaState = 'content' | 'loading' | 'empty' | 'off' | 'error';
|
|
|
6582
6613
|
declare class StrctMediaFrame {
|
|
6583
6614
|
/** The frame's aspect ratio, as a CSS `aspect-ratio` value. */
|
|
6584
6615
|
readonly ratio: _angular_core.InputSignal<string>;
|
|
6616
|
+
/**
|
|
6617
|
+
* How the media fills the frame. `cover` crops to fill, as today; `contain`
|
|
6618
|
+
* shows all of it — what a console thumbnail needs, since the corner it
|
|
6619
|
+
* would crop is where the error is.
|
|
6620
|
+
*/
|
|
6621
|
+
readonly fit: _angular_core.InputSignal<"cover" | "contain">;
|
|
6585
6622
|
/** What the frame shows: the projected picture, or why there is none. */
|
|
6586
6623
|
readonly state: _angular_core.InputSignal<StrctMediaState>;
|
|
6587
6624
|
/** The placeholder's line ("The VM is off"). */
|
|
@@ -6596,7 +6633,7 @@ declare class StrctMediaFrame {
|
|
|
6596
6633
|
readonly activated: _angular_core.OutputEmitterRef<void>;
|
|
6597
6634
|
protected readonly iconName: _angular_core.Signal<string>;
|
|
6598
6635
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrctMediaFrame, never>;
|
|
6599
|
-
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>;
|
|
6636
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctMediaFrame, "strct-media-frame", never, { "ratio": { "alias": "ratio"; "required": false; "isSignal": true; }; "fit": { "alias": "fit"; "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>;
|
|
6600
6637
|
}
|
|
6601
6638
|
|
|
6602
6639
|
/** Where a window sits and how big it is, in viewport px. */
|
|
@@ -6811,6 +6848,11 @@ declare class StrctChatComposer {
|
|
|
6811
6848
|
readonly label: _angular_core.InputSignal<string>;
|
|
6812
6849
|
/** Disabled while the assistant is busy, say. */
|
|
6813
6850
|
readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
6851
|
+
/**
|
|
6852
|
+
* Only the send button is disabled: the reader may draft their next question
|
|
6853
|
+
* while a reply is still streaming. `disabled` stops the typing as well.
|
|
6854
|
+
*/
|
|
6855
|
+
readonly sendDisabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
6814
6856
|
/** How tall the box grows before it scrolls. */
|
|
6815
6857
|
readonly maxRows: _angular_core.InputSignal<number>;
|
|
6816
6858
|
/** The send button's accessible name. */
|
|
@@ -6827,7 +6869,7 @@ declare class StrctChatComposer {
|
|
|
6827
6869
|
protected onEnter(event: Event): void;
|
|
6828
6870
|
submit(): void;
|
|
6829
6871
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrctChatComposer, never>;
|
|
6830
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctChatComposer, "strct-chat-composer", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "maxRows": { "alias": "maxRows"; "required": false; "isSignal": true; }; "sendLabel": { "alias": "sendLabel"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "send": "send"; }, never, never, true, never>;
|
|
6872
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctChatComposer, "strct-chat-composer", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "sendDisabled": { "alias": "sendDisabled"; "required": false; "isSignal": true; }; "maxRows": { "alias": "maxRows"; "required": false; "isSignal": true; }; "sendLabel": { "alias": "sendLabel"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "send": "send"; }, never, never, true, never>;
|
|
6831
6873
|
}
|
|
6832
6874
|
|
|
6833
6875
|
/**
|