@akcelik/strct 5.12.0 → 5.14.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 +1629 -986
- package/fesm2022/akcelik-strct.mjs.map +1 -1
- package/package.json +1 -1
- package/types/akcelik-strct.d.ts +240 -9
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@akcelik/strct",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.14.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
|
@@ -434,6 +434,17 @@ declare class StrctShellService {
|
|
|
434
434
|
readonly mobileNavOpen: _angular_core.WritableSignal<boolean>;
|
|
435
435
|
/** Id of the vertical nav controlled by the header drawer toggle. */
|
|
436
436
|
readonly navId: string;
|
|
437
|
+
/**
|
|
438
|
+
* The header's drawer toggle, so closing the drawer can hand focus back to
|
|
439
|
+
* what opened it. The header registers it; nothing else writes it.
|
|
440
|
+
*/
|
|
441
|
+
drawerToggle: HTMLElement | null;
|
|
442
|
+
/**
|
|
443
|
+
* Closes the navigation drawer. On a phone the drawer holds the
|
|
444
|
+
* navigation, so a choice made in it opens a page *behind* it; the shell
|
|
445
|
+
* calls this on every completed navigation unless told not to.
|
|
446
|
+
*/
|
|
447
|
+
closeNav(): void;
|
|
437
448
|
}
|
|
438
449
|
/**
|
|
439
450
|
* Application frame: a full-viewport grid of header / body / footer rows.
|
|
@@ -454,24 +465,99 @@ declare class StrctShell {
|
|
|
454
465
|
readonly skipLinkLabel: _angular_core.InputSignal<string>;
|
|
455
466
|
/** The name of the backdrop that closes the navigation drawer on a phone. */
|
|
456
467
|
readonly closeNavLabel: _angular_core.InputSignal<string>;
|
|
468
|
+
/**
|
|
469
|
+
* Close the drawer when a navigation completes — the subscription every app
|
|
470
|
+
* with a router ends up writing. It needs a `Router`; without one nothing
|
|
471
|
+
* happens. Set it to `false` to keep the drawer open across navigations,
|
|
472
|
+
* and close it yourself with `StrctShellService.closeNav()`.
|
|
473
|
+
*/
|
|
474
|
+
readonly closeNavOnNavigate: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
457
475
|
/** The drawer's open state lives on the shell, and so does its backdrop. */
|
|
458
476
|
protected readonly shell: StrctShellService;
|
|
459
477
|
private readonly doc;
|
|
478
|
+
private readonly router;
|
|
479
|
+
constructor();
|
|
460
480
|
/**
|
|
461
481
|
* Moves focus rather than only the scroll position: an href alone scrolls
|
|
462
482
|
* without focusing, so the next Tab would resume from the link.
|
|
463
483
|
*/
|
|
464
484
|
protected skipToMain(event: Event): void;
|
|
465
485
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrctShell, never>;
|
|
466
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctShell, "strct-shell", never, { "skipLinkTarget": { "alias": "skipLinkTarget"; "required": false; "isSignal": true; }; "skipLinkLabel": { "alias": "skipLinkLabel"; "required": false; "isSignal": true; }; "closeNavLabel": { "alias": "closeNavLabel"; "required": false; "isSignal": true; }; }, {}, never, ["strct-header", "*", "strct-footer"], true, never>;
|
|
486
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctShell, "strct-shell", never, { "skipLinkTarget": { "alias": "skipLinkTarget"; "required": false; "isSignal": true; }; "skipLinkLabel": { "alias": "skipLinkLabel"; "required": false; "isSignal": true; }; "closeNavLabel": { "alias": "closeNavLabel"; "required": false; "isSignal": true; }; "closeNavOnNavigate": { "alias": "closeNavOnNavigate"; "required": false; "isSignal": true; }; }, {}, never, ["strct-header", "*", "strct-footer"], true, never>;
|
|
487
|
+
}
|
|
488
|
+
/** What a header action is, and whether it may move into the overflow menu. */
|
|
489
|
+
interface StrctHeaderActionConfig {
|
|
490
|
+
/** The name the overflow row shows, and the action's own name. */
|
|
491
|
+
label: string;
|
|
492
|
+
/** Optional icon for the overflow row (an icon-set name). */
|
|
493
|
+
icon?: string;
|
|
494
|
+
/**
|
|
495
|
+
* `'phone'` (the default) moves the action into the "More" menu below the
|
|
496
|
+
* breakpoint. `'never'` keeps it in the header at every width — what an
|
|
497
|
+
* action that opens its own popover (alarms, the account menu) needs, since
|
|
498
|
+
* a popover inside a menu is a menu inside a menu.
|
|
499
|
+
*/
|
|
500
|
+
overflow?: 'phone' | 'never';
|
|
501
|
+
/**
|
|
502
|
+
* What the overflow row does when it is chosen. Given one, the row is a
|
|
503
|
+
* menu item with the icon and the label — a command.
|
|
504
|
+
*
|
|
505
|
+
* Without one the action's own template is drawn in the menu instead, in a
|
|
506
|
+
* row that is not a menu item: the way out for an action that is a control
|
|
507
|
+
* in its own right (a segmented choice, a switcher). It keeps its own tab
|
|
508
|
+
* stop and its own clicks, and using it does not close the menu.
|
|
509
|
+
*/
|
|
510
|
+
run?: () => void;
|
|
511
|
+
}
|
|
512
|
+
/**
|
|
513
|
+
* An action in the header that knows whether it may move into the overflow
|
|
514
|
+
* menu on a phone:
|
|
515
|
+
*
|
|
516
|
+
* <ng-container *strctHeaderAction="{ label: 'Create', icon: 'plus', run: create }">
|
|
517
|
+
* <button strct-button variant="flat" iconOnly aria-label="Create">…</button>
|
|
518
|
+
* </ng-container>
|
|
519
|
+
*
|
|
520
|
+
* Content projected into the header without this directive never moves.
|
|
521
|
+
*/
|
|
522
|
+
declare class StrctHeaderAction {
|
|
523
|
+
readonly config: _angular_core.InputSignal<StrctHeaderActionConfig>;
|
|
524
|
+
readonly template: TemplateRef<unknown>;
|
|
525
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrctHeaderAction, never>;
|
|
526
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<StrctHeaderAction, "[strctHeaderAction]", never, { "config": { "alias": "strctHeaderAction"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
467
527
|
}
|
|
468
528
|
/** Top application bar. Holds brand on the left and actions on the right. */
|
|
469
529
|
declare class StrctHeader {
|
|
470
530
|
/** Accessible label of the mobile drawer toggle. */
|
|
471
531
|
readonly drawerToggleAriaLabel: _angular_core.InputSignal<string>;
|
|
532
|
+
/**
|
|
533
|
+
* A thin line in a product's colour under the header — a colour token or
|
|
534
|
+
* any CSS colour. It is drawn inset, so the header keeps its height and
|
|
535
|
+
* nothing under it moves. Empty leaves today's border alone.
|
|
536
|
+
*/
|
|
537
|
+
readonly accent: _angular_core.InputSignal<string>;
|
|
538
|
+
/**
|
|
539
|
+
* Below this width (px) the actions marked `overflow: 'phone'` move into a
|
|
540
|
+
* "More" menu. A console header carries more icons than a phone has room
|
|
541
|
+
* for, and an app should not have to draw two copies of each.
|
|
542
|
+
*/
|
|
543
|
+
readonly overflowBreakpoint: _angular_core.InputSignal<number>;
|
|
544
|
+
/** The "More" trigger's accessible name (localisable). */
|
|
545
|
+
readonly overflowLabel: _angular_core.InputSignal<string>;
|
|
546
|
+
protected readonly actions: _angular_core.Signal<readonly StrctHeaderAction[]>;
|
|
547
|
+
/** Whether the viewport is below `overflowBreakpoint`. */
|
|
548
|
+
private readonly narrow;
|
|
549
|
+
protected readonly inlineActions: _angular_core.Signal<StrctHeaderAction[]>;
|
|
550
|
+
protected readonly overflowActions: _angular_core.Signal<StrctHeaderAction[]>;
|
|
551
|
+
/** An action that brings its own control makes the panel a dialog, not a menu. */
|
|
552
|
+
protected readonly overflowIsPanel: _angular_core.Signal<boolean>;
|
|
553
|
+
private readonly overflowPanel;
|
|
554
|
+
/** In panel mode nothing closes on activation, so a command closes it. */
|
|
555
|
+
protected runAndClose(run: () => void): void;
|
|
472
556
|
protected readonly shell: StrctShellService;
|
|
557
|
+
private readonly hostEl;
|
|
558
|
+
constructor();
|
|
473
559
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrctHeader, never>;
|
|
474
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctHeader, "strct-header", never, { "drawerToggleAriaLabel": { "alias": "drawerToggleAriaLabel"; "required": false; "isSignal": true; }; }, {},
|
|
560
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctHeader, "strct-header", never, { "drawerToggleAriaLabel": { "alias": "drawerToggleAriaLabel"; "required": false; "isSignal": true; }; "accent": { "alias": "accent"; "required": false; "isSignal": true; }; "overflowBreakpoint": { "alias": "overflowBreakpoint"; "required": false; "isSignal": true; }; "overflowLabel": { "alias": "overflowLabel"; "required": false; "isSignal": true; }; }, {}, ["actions"], ["*"], true, never>;
|
|
475
561
|
}
|
|
476
562
|
/** Bottom status bar. */
|
|
477
563
|
declare class StrctFooter {
|
|
@@ -482,10 +568,39 @@ declare class StrctFooter {
|
|
|
482
568
|
/** Scrollable left sidebar surface. Holds the icon nav and/or a tree. */
|
|
483
569
|
declare class StrctVerticalNav {
|
|
484
570
|
protected readonly shell: StrctShellService;
|
|
571
|
+
private readonly host;
|
|
572
|
+
/**
|
|
573
|
+
* How wide the drawer may get on a phone — only in drawer mode, so the
|
|
574
|
+
* width an app sets for its desktop sidebar is untouched. The default
|
|
575
|
+
* leaves 48px of page to tap the drawer away.
|
|
576
|
+
*/
|
|
577
|
+
readonly drawerMaxWidth: _angular_core.InputSignal<string>;
|
|
578
|
+
/**
|
|
579
|
+
* Draw a close control at the drawer's top. Escape and the backdrop close
|
|
580
|
+
* it too, but neither is visible, and a touch screen has no Escape.
|
|
581
|
+
*/
|
|
582
|
+
readonly closeButton: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
583
|
+
/** The close control's accessible name (localisable). */
|
|
584
|
+
readonly closeLabel: _angular_core.InputSignal<string>;
|
|
585
|
+
/**
|
|
586
|
+
* Keep Tab inside the open drawer and move focus into it, the way a dialog
|
|
587
|
+
* does. It is only ever on in drawer mode: a sidebar that is part of the
|
|
588
|
+
* page must not trap anything.
|
|
589
|
+
*/
|
|
590
|
+
readonly trapFocus: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
591
|
+
/** True while the drawer is open AND the viewport is in drawer mode. */
|
|
592
|
+
protected trapped(): boolean;
|
|
593
|
+
constructor();
|
|
485
594
|
/** Closes the mobile nav on Escape. */
|
|
486
595
|
protected onEscape(): void;
|
|
596
|
+
protected onTab(event: Event): void;
|
|
597
|
+
/**
|
|
598
|
+
* The drawer breakpoint is the media query the styles use; matchMedia is
|
|
599
|
+
* the only way the component can read it, and a server render has none.
|
|
600
|
+
*/
|
|
601
|
+
private isDrawer;
|
|
487
602
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrctVerticalNav, never>;
|
|
488
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctVerticalNav, "strct-vertical-nav", never, {}, {}, never, ["*"], true, never>;
|
|
603
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctVerticalNav, "strct-vertical-nav", never, { "drawerMaxWidth": { "alias": "drawerMaxWidth"; "required": false; "isSignal": true; }; "closeButton": { "alias": "closeButton"; "required": false; "isSignal": true; }; "closeLabel": { "alias": "closeLabel"; "required": false; "isSignal": true; }; "trapFocus": { "alias": "trapFocus"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
|
|
489
604
|
}
|
|
490
605
|
/** Horizontal strip of icon tabs (e.g. section switcher at the top of a sidebar). */
|
|
491
606
|
declare class StrctNav {
|
|
@@ -840,10 +955,24 @@ declare class StrctBadge {
|
|
|
840
955
|
constructor();
|
|
841
956
|
/** Visual status color. */
|
|
842
957
|
readonly status: _angular_core.InputSignal<StrctBadgeStatus>;
|
|
958
|
+
/**
|
|
959
|
+
* A colour of your own — `tone="var(--prod-acc)"` — for a distinction the
|
|
960
|
+
* five statuses do not carry, such as which product a row belongs to. The
|
|
961
|
+
* text takes it and the border a 30% wash of it; `solid` fills with it and
|
|
962
|
+
* writes in `--strct-badge-on` (`--inv` by default). It overrides `status`.
|
|
963
|
+
*
|
|
964
|
+
* The same can be set from a stylesheet with `--strct-badge-fg`,
|
|
965
|
+
* `--strct-badge-border` and `--strct-badge-on`, which is the better route
|
|
966
|
+
* when a rule already selects the badges (`.product-badge { … }`).
|
|
967
|
+
*
|
|
968
|
+
* The colour is yours to pick, so its contrast is yours to check: the
|
|
969
|
+
* library's own check covers `--acc` and the status tokens.
|
|
970
|
+
*/
|
|
971
|
+
readonly tone: _angular_core.InputSignal<string>;
|
|
843
972
|
/** Opt-in filled style instead of the default outlined style. */
|
|
844
973
|
readonly solid: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
845
974
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrctBadge, never>;
|
|
846
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctBadge, "strct-badge", never, { "status": { "alias": "status"; "required": false; "isSignal": true; }; "solid": { "alias": "solid"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
|
|
975
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctBadge, "strct-badge", never, { "status": { "alias": "status"; "required": false; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "solid": { "alias": "solid"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
|
|
847
976
|
}
|
|
848
977
|
|
|
849
978
|
/** Content rendered before the tag's text — a status dot, an icon. */
|
|
@@ -1926,6 +2055,38 @@ declare class StrctDropdownItemAction {
|
|
|
1926
2055
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrctDropdownItemAction, never>;
|
|
1927
2056
|
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<StrctDropdownItemAction, "[strctDropdownItemAction]", never, {}, {}, never, never, true, never>;
|
|
1928
2057
|
}
|
|
2058
|
+
/**
|
|
2059
|
+
* A leading icon for a menu row, in a colour of its own:
|
|
2060
|
+
* `<strct-icon strctDropdownItemIcon tone="var(--prod-acc)" name="shield" />`.
|
|
2061
|
+
* The row keeps its text aligned whether or not the icon is there.
|
|
2062
|
+
*/
|
|
2063
|
+
declare class StrctDropdownItemIcon {
|
|
2064
|
+
/** A colour token or value — a product's accent, say. */
|
|
2065
|
+
readonly tone: _angular_core.InputSignal<string>;
|
|
2066
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrctDropdownItemIcon, never>;
|
|
2067
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<StrctDropdownItemIcon, "[strctDropdownItemIcon]", never, { "tone": { "alias": "tone"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
2068
|
+
}
|
|
2069
|
+
/**
|
|
2070
|
+
* The row's label, when the row also carries a description. A screen reader
|
|
2071
|
+
* reads a row in DOM order, and a projected slot can only be declared before
|
|
2072
|
+
* the catch-all one — so marking the label is what keeps "HyperStruct Backup"
|
|
2073
|
+
* ahead of "2 VMs past RPO" in what the row is called. A row without a
|
|
2074
|
+
* description does not need it.
|
|
2075
|
+
*/
|
|
2076
|
+
declare class StrctDropdownItemLabel {
|
|
2077
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrctDropdownItemLabel, never>;
|
|
2078
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<StrctDropdownItemLabel, "[strctDropdownItemLabel]", never, {}, {}, never, never, true, never>;
|
|
2079
|
+
}
|
|
2080
|
+
/**
|
|
2081
|
+
* A second, quieter line under a row's label: "● 2 VMs past RPO" under
|
|
2082
|
+
* "HyperStruct Backup". It is inside the row, so it is part of what the row
|
|
2083
|
+
* is called — put the label in `[strctDropdownItemLabel]` so it is read
|
|
2084
|
+
* first.
|
|
2085
|
+
*/
|
|
2086
|
+
declare class StrctDropdownItemDescription {
|
|
2087
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrctDropdownItemDescription, never>;
|
|
2088
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<StrctDropdownItemDescription, "[strctDropdownItemDescription]", never, {}, {}, never, never, true, never>;
|
|
2089
|
+
}
|
|
1929
2090
|
declare class StrctDropdownItem {
|
|
1930
2091
|
/**
|
|
1931
2092
|
* Select-like usage: bind `selected` and the item becomes a
|
|
@@ -1956,7 +2117,19 @@ declare class StrctDropdownItem {
|
|
|
1956
2117
|
protected readonly tabindex: _angular_core.Signal<number | null>;
|
|
1957
2118
|
constructor();
|
|
1958
2119
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrctDropdownItem, never>;
|
|
1959
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctDropdownItem, "strct-dropdown-item", never, { "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "critical": { "alias": "critical"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; }, {}, never, ["[strctDropdownItemAction]", "*"], true, never>;
|
|
2120
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctDropdownItem, "strct-dropdown-item", never, { "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "critical": { "alias": "critical"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; }, {}, never, ["[strctDropdownItemIcon]", "[strctDropdownItemAction]", "[strctDropdownItemLabel]", "[strctDropdownItemDescription]", "*"], true, never>;
|
|
2121
|
+
}
|
|
2122
|
+
/**
|
|
2123
|
+
* A named group of rows — "Create" above the create actions, where a divider
|
|
2124
|
+
* alone leaves what the group is unsaid. The label is not an item: the arrows
|
|
2125
|
+
* pass over it and it is never activated.
|
|
2126
|
+
*/
|
|
2127
|
+
declare class StrctDropdownGroup {
|
|
2128
|
+
/** What the group is — read when a screen reader enters it. */
|
|
2129
|
+
readonly label: _angular_core.InputSignal<string>;
|
|
2130
|
+
protected readonly labelId: string;
|
|
2131
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrctDropdownGroup, never>;
|
|
2132
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctDropdownGroup, "strct-dropdown-group", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
|
|
1960
2133
|
}
|
|
1961
2134
|
/** Thin separator between groups of menu items. */
|
|
1962
2135
|
declare class StrctDropdownDivider {
|
|
@@ -2275,6 +2448,15 @@ interface StrctMenuLink {
|
|
|
2275
2448
|
dotStatus?: StrctRailStatus;
|
|
2276
2449
|
/** Muted trailing icon (e.g. "restart required"), before any badge / dot. */
|
|
2277
2450
|
trailingIcon?: string;
|
|
2451
|
+
/**
|
|
2452
|
+
* Render as a real router link (`<a routerLink>`): middle-click, ⌘/Ctrl-click
|
|
2453
|
+
* and "open in new tab" work, and the address can be copied — which a page
|
|
2454
|
+
* with an address of its own needs. `(select)` still fires on plain
|
|
2455
|
+
* activation. Without `routerLink` or `href` the entry stays a `<button>`.
|
|
2456
|
+
*/
|
|
2457
|
+
routerLink?: string | unknown[];
|
|
2458
|
+
/** Render as a plain `<a href>` (external or non-router destinations). */
|
|
2459
|
+
href?: string;
|
|
2278
2460
|
}
|
|
2279
2461
|
/** A category (level 1) that groups {@link StrctMenuLink} items (level 2). */
|
|
2280
2462
|
interface StrctMenuSection {
|
|
@@ -2311,7 +2493,15 @@ declare class StrctSectionMenu {
|
|
|
2311
2493
|
private readonly overrides;
|
|
2312
2494
|
protected isOpen(sec: StrctMenuSection): boolean;
|
|
2313
2495
|
protected toggle(sec: StrctMenuSection): void;
|
|
2314
|
-
|
|
2496
|
+
/** Enabled entry with a router destination → renders as `<a routerLink>`. */
|
|
2497
|
+
protected isRouted(item: StrctMenuLink): boolean;
|
|
2498
|
+
/**
|
|
2499
|
+
* Active state of a router-link entry: an explicit `activeId` is
|
|
2500
|
+
* authoritative; without one the router's own active state drives it — the
|
|
2501
|
+
* rail's contract.
|
|
2502
|
+
*/
|
|
2503
|
+
protected isActive(item: StrctMenuLink, routerActive: boolean): boolean;
|
|
2504
|
+
protected pick(item: StrctMenuLink, event?: MouseEvent): void;
|
|
2315
2505
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrctSectionMenu, never>;
|
|
2316
2506
|
static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctSectionMenu, "strct-section-menu", never, { "sections": { "alias": "sections"; "required": true; "isSignal": true; }; "activeId": { "alias": "activeId"; "required": false; "isSignal": true; }; "collapsible": { "alias": "collapsible"; "required": false; "isSignal": true; }; "showIcons": { "alias": "showIcons"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "activeId": "activeIdChange"; "select": "select"; }, never, never, true, never>;
|
|
2317
2507
|
}
|
|
@@ -2323,6 +2513,23 @@ interface StrctCommandItem {
|
|
|
2323
2513
|
label: string;
|
|
2324
2514
|
/** Right-aligned group tag (e.g. a category or section name). */
|
|
2325
2515
|
group?: string;
|
|
2516
|
+
/**
|
|
2517
|
+
* Which section this result belongs to. A palette fed from several sources
|
|
2518
|
+
* — a product's objects, another product's, the platform's pages — reads as
|
|
2519
|
+
* one undifferentiated list without headings.
|
|
2520
|
+
*/
|
|
2521
|
+
section?: string;
|
|
2522
|
+
/**
|
|
2523
|
+
* A tinted badge before the tag: which product a result belongs to, where
|
|
2524
|
+
* the same VM is three results. The label is in the option's name too.
|
|
2525
|
+
*/
|
|
2526
|
+
badge?: {
|
|
2527
|
+
label: string;
|
|
2528
|
+
status?: StrctStatus;
|
|
2529
|
+
tone?: string;
|
|
2530
|
+
};
|
|
2531
|
+
/** A muted second line — where the tag's detail can go on a narrow palette. */
|
|
2532
|
+
description?: string;
|
|
2326
2533
|
/** Leading icon name (StrctIcon set). */
|
|
2327
2534
|
icon?: string;
|
|
2328
2535
|
/** Right-aligned shortcut hint, rendered as a key chip. */
|
|
@@ -2366,6 +2573,11 @@ declare class StrctCommandPalette {
|
|
|
2366
2573
|
* rendering.
|
|
2367
2574
|
*/
|
|
2368
2575
|
readonly filter: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
2576
|
+
/**
|
|
2577
|
+
* The order the sections are drawn in — the product you are in first, say.
|
|
2578
|
+
* Sections not named here follow, in the order their first result arrives.
|
|
2579
|
+
*/
|
|
2580
|
+
readonly sectionOrder: _angular_core.InputSignal<readonly string[]>;
|
|
2369
2581
|
/** Show a "searching" row while server results are in flight. */
|
|
2370
2582
|
readonly loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
2371
2583
|
/** Localizable text of the loading row. */
|
|
@@ -2381,8 +2593,27 @@ declare class StrctCommandPalette {
|
|
|
2381
2593
|
protected readonly listId: string;
|
|
2382
2594
|
private previousActive;
|
|
2383
2595
|
protected optionId(i: number): string;
|
|
2596
|
+
/**
|
|
2597
|
+
* The results in their drawn order, chunked into sections. The flat index
|
|
2598
|
+
* each row carries is the one the keyboard and `aria-activedescendant`
|
|
2599
|
+
* use, so what the arrows do and what the eye sees stay the same list.
|
|
2600
|
+
*/
|
|
2601
|
+
protected readonly sections: _angular_core.Signal<{
|
|
2602
|
+
label: string;
|
|
2603
|
+
id: string;
|
|
2604
|
+
rows: {
|
|
2605
|
+
item: StrctCommandItem;
|
|
2606
|
+
index: number;
|
|
2607
|
+
}[];
|
|
2608
|
+
}[]>;
|
|
2384
2609
|
/** Rank: label prefix > word-start > substring; group/keyword matches last. */
|
|
2385
2610
|
protected readonly filtered: _angular_core.Signal<StrctCommandItem[]>;
|
|
2611
|
+
/**
|
|
2612
|
+
* Keeps each section's results together, in `sectionOrder` where it is
|
|
2613
|
+
* given and otherwise in the order the sections first appear. The sort is
|
|
2614
|
+
* stable, so how well a result matched still orders it inside its section.
|
|
2615
|
+
*/
|
|
2616
|
+
private bySection;
|
|
2386
2617
|
constructor();
|
|
2387
2618
|
/** ⌘/Ctrl-K toggle + global Escape while open. */
|
|
2388
2619
|
protected onGlobalKey(event: KeyboardEvent): void;
|
|
@@ -2392,7 +2623,7 @@ declare class StrctCommandPalette {
|
|
|
2392
2623
|
protected pick(item: StrctCommandItem): void;
|
|
2393
2624
|
protected close(): void;
|
|
2394
2625
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrctCommandPalette, never>;
|
|
2395
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctCommandPalette, "strct-command-palette", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; "hotkey": { "alias": "hotkey"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "emptyText": { "alias": "emptyText"; "required": false; "isSignal": true; }; "maxResults": { "alias": "maxResults"; "required": false; "isSignal": true; }; "filter": { "alias": "filter"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "loadingText": { "alias": "loadingText"; "required": false; "isSignal": true; }; "query": { "alias": "query"; "required": false; "isSignal": true; }; }, { "open": "openChange"; "picked": "picked"; "query": "queryChange"; }, never, never, true, never>;
|
|
2626
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctCommandPalette, "strct-command-palette", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; "hotkey": { "alias": "hotkey"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "emptyText": { "alias": "emptyText"; "required": false; "isSignal": true; }; "maxResults": { "alias": "maxResults"; "required": false; "isSignal": true; }; "filter": { "alias": "filter"; "required": false; "isSignal": true; }; "sectionOrder": { "alias": "sectionOrder"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "loadingText": { "alias": "loadingText"; "required": false; "isSignal": true; }; "query": { "alias": "query"; "required": false; "isSignal": true; }; }, { "open": "openChange"; "picked": "picked"; "query": "queryChange"; }, never, never, true, never>;
|
|
2396
2627
|
}
|
|
2397
2628
|
|
|
2398
2629
|
/**
|
|
@@ -8175,5 +8406,5 @@ declare class StrctMarkdown {
|
|
|
8175
8406
|
static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctMarkdown, "strct-markdown", never, { "source": { "alias": "source"; "required": false; "isSignal": true; }; "tree": { "alias": "tree"; "required": false; "isSignal": true; }; "streaming": { "alias": "streaming"; "required": false; "isSignal": true; }; "headingOffset": { "alias": "headingOffset"; "required": false; "isSignal": true; }; "linkPolicy": { "alias": "linkPolicy"; "required": false; "isSignal": true; }; "tokens": { "alias": "tokens"; "required": false; "isSignal": true; }; }, { "navigate": "navigate"; }, ["tokenDefs"], never, true, never>;
|
|
8176
8407
|
}
|
|
8177
8408
|
|
|
8178
|
-
export { FOCUSABLE_SELECTOR, STRCT_DP_DOW, STRCT_DP_DOW_FULL, STRCT_DP_MONTHS, STRCT_ICONS, STRCT_ICON_GROUPS, STRCT_ICON_NAMES, STRCT_MASKS, STRCT_MD_LIMITS, STRCT_NOTIFICATION_HISTORY_LIMIT, STRCT_PALETTES, STRCT_RAW_ICONS, STRCT_TIME_RANGE_PRESETS, STRCT_WIZARD_DEFAULTS, StrctAccordion, StrctAccordionPanel, StrctAlert, StrctAlertActions, StrctAnnouncer, StrctAvatar, StrctBadge, StrctBreadcrumb, StrctBreadcrumbItem, StrctButton, StrctButtonGroup, StrctBytesPipe, StrctCard, StrctCardBlock, StrctCardFooter, StrctCardHeader, StrctCardHeaderActions, StrctCardHeaderLeading, StrctCardHeaderMeta, StrctCardHeaderNote, StrctCascadeColumn, StrctCascadeHost, StrctCascadeSelect, StrctCellDef, StrctCellStatus, StrctChange, StrctChart, StrctChatAttachment, StrctChatComposer, StrctChatMessage, StrctChatMessageActions, StrctChatThread, StrctCheckbox, StrctChips, StrctCode, StrctCodeInline, StrctColorPicker, StrctCombobox, StrctCommandPalette, StrctConfirmOutlet, StrctConfirmService, StrctContextMenu, StrctContextMenuTrigger, StrctControlDescription, StrctCopy, StrctDatagrid, StrctDatagridActionBar, StrctDatagridActionBarCaption, StrctDatepicker, StrctDatetimePicker, StrctDesc, StrctDescriptionList, StrctDetailPaneActions, StrctDetailPaneMeta, StrctDetailPaneTitle, StrctDiff, StrctDivider, StrctDonut, StrctDrawer, StrctDrawerFooter, StrctDropdown, StrctDropdownDivider, StrctDropdownItem, StrctDropdownItemAction, StrctDropdownTrigger, StrctDurationPipe, StrctEmptyState, StrctField, StrctFieldGroup, StrctFieldHint, StrctFieldPrefix, StrctFieldSuffix, StrctFieldValue, StrctFile, StrctFilterBar, StrctFlow, StrctFlowNodeTemplate, StrctFooter, StrctGauge, StrctGroupHeaderDef, StrctHeader, StrctHeatmap, StrctHero, StrctHotkeysHelp, StrctHotkeysService, StrctIcon, StrctInlineEdit, StrctInput, StrctInputMask, StrctInputOtp, StrctKbd, StrctKnob, StrctLegend, StrctList, StrctListItem, StrctListItemDescription, StrctListItemLeading, StrctListItemMeta, StrctListItemTrailing, StrctLiveIndicator, StrctLogViewer, StrctLogin, StrctMarkdown, StrctMarkdownToken, StrctMediaFrame, StrctMenuPanel, StrctMenuService, StrctMenubar, StrctMetricTile, StrctModal, StrctModalContent, StrctNav, StrctNavItem, StrctNotificationCenter, StrctNumber, StrctOverlay, StrctPageHeader, StrctPageHeaderActions, StrctPageHeaderCrumbs, StrctPageHeaderTitleMeta, StrctPagination, StrctPassword, StrctPopover, StrctPopoverTrigger, StrctProgress, StrctQr, 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, StrctWindow, StrctWindowDock, StrctWindowDockItem, StrctWindowService, StrctWizard, StrctWizardAside, __qrInternals, focusFirstIn, keepTabInside, lockBodyScroll, parseAnsi, parseInlines, provideStrctWizardDefaults, registerStrctIcon, restoreFocus, saveFocusedElement, strctCheckHostDisplay, strctCheckHostInputs, strctClassifyHref, strctComputeDiff, strctDpPad, strctFormatBytes, strctFormatDuration, strctFormatRate, strctFormatSi, strctParseMarkdown, strctQrMatrix, strctValidationIcon, strctValidationTone, unlockBodyScroll };
|
|
8179
|
-
export type { StrctAlertType, StrctAvatarSize, StrctAvatarStatus, StrctBadgeStatus, StrctButtonSize, StrctButtonVariant, StrctCascadeOption, StrctCellContext, StrctChartAnnotation, StrctChartColor, StrctChartCurve, StrctChartSeries, StrctChartSlot, StrctChartStatus, StrctChartSummaryInfo, StrctChartThreshold, StrctChartType, StrctChatAuthor, StrctColumn, StrctCommandItem, StrctConfirmOptions, StrctConfirmTone, StrctDatagridColumn, StrctDatagridColumnState, StrctDatagridFilters, StrctDatagridGroup, StrctDatagridLabels, StrctDatagridLazyState, StrctDescAlign, StrctDescItem, StrctDiffRow, StrctDonutSegment, StrctDrawerSide, StrctDrawerSize, StrctEmptyVariant, StrctFilterChip, StrctFlowColumn, StrctFlowDirection, StrctFlowEdge, StrctFlowNode, StrctFlowOrientation, StrctHeatmapCell, StrctHeatmapSummaryInfo, StrctHotkey, StrctIconBadge, StrctIconName, StrctKnobStatus, StrctLegendItem, StrctLiveLabels, StrctLiveState, StrctLogLine, StrctMdAlign, StrctMdBlock, StrctMdInline, StrctMdToken, StrctMdTokenizer, StrctMediaState, StrctMenuItem, StrctMenuLink, StrctMenuOpenOptions, StrctMenuPlacement, StrctMenuSection, StrctMenubarItem, StrctMetricStatus, StrctModalSize, StrctMode, StrctNotification, StrctOption, StrctOverlayPlacement, StrctPalette, StrctPaletteInfo, StrctProgressSegment, StrctProgressStatus, StrctQrEcc, 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, StrctWindowBounds, StrctWindowLabels, StrctWindowOutsidePointer, StrctWizardDefaults };
|
|
8409
|
+
export { FOCUSABLE_SELECTOR, STRCT_DP_DOW, STRCT_DP_DOW_FULL, STRCT_DP_MONTHS, STRCT_ICONS, STRCT_ICON_GROUPS, STRCT_ICON_NAMES, STRCT_MASKS, STRCT_MD_LIMITS, STRCT_NOTIFICATION_HISTORY_LIMIT, STRCT_PALETTES, STRCT_RAW_ICONS, STRCT_TIME_RANGE_PRESETS, STRCT_WIZARD_DEFAULTS, StrctAccordion, StrctAccordionPanel, StrctAlert, StrctAlertActions, StrctAnnouncer, StrctAvatar, StrctBadge, StrctBreadcrumb, StrctBreadcrumbItem, StrctButton, StrctButtonGroup, StrctBytesPipe, StrctCard, StrctCardBlock, StrctCardFooter, StrctCardHeader, StrctCardHeaderActions, StrctCardHeaderLeading, StrctCardHeaderMeta, StrctCardHeaderNote, StrctCascadeColumn, StrctCascadeHost, StrctCascadeSelect, StrctCellDef, StrctCellStatus, StrctChange, StrctChart, StrctChatAttachment, StrctChatComposer, StrctChatMessage, StrctChatMessageActions, StrctChatThread, StrctCheckbox, StrctChips, StrctCode, StrctCodeInline, StrctColorPicker, StrctCombobox, StrctCommandPalette, StrctConfirmOutlet, StrctConfirmService, StrctContextMenu, StrctContextMenuTrigger, StrctControlDescription, StrctCopy, StrctDatagrid, StrctDatagridActionBar, StrctDatagridActionBarCaption, StrctDatepicker, StrctDatetimePicker, StrctDesc, StrctDescriptionList, StrctDetailPaneActions, StrctDetailPaneMeta, StrctDetailPaneTitle, StrctDiff, StrctDivider, StrctDonut, StrctDrawer, StrctDrawerFooter, StrctDropdown, StrctDropdownDivider, StrctDropdownGroup, StrctDropdownItem, StrctDropdownItemAction, StrctDropdownItemDescription, StrctDropdownItemIcon, StrctDropdownItemLabel, StrctDropdownTrigger, StrctDurationPipe, StrctEmptyState, StrctField, StrctFieldGroup, StrctFieldHint, StrctFieldPrefix, StrctFieldSuffix, StrctFieldValue, StrctFile, StrctFilterBar, StrctFlow, StrctFlowNodeTemplate, StrctFooter, StrctGauge, StrctGroupHeaderDef, StrctHeader, StrctHeaderAction, StrctHeatmap, StrctHero, StrctHotkeysHelp, StrctHotkeysService, StrctIcon, StrctInlineEdit, StrctInput, StrctInputMask, StrctInputOtp, StrctKbd, StrctKnob, StrctLegend, StrctList, StrctListItem, StrctListItemDescription, StrctListItemLeading, StrctListItemMeta, StrctListItemTrailing, StrctLiveIndicator, StrctLogViewer, StrctLogin, StrctMarkdown, StrctMarkdownToken, StrctMediaFrame, StrctMenuPanel, StrctMenuService, StrctMenubar, StrctMetricTile, StrctModal, StrctModalContent, StrctNav, StrctNavItem, StrctNotificationCenter, StrctNumber, StrctOverlay, StrctPageHeader, StrctPageHeaderActions, StrctPageHeaderCrumbs, StrctPageHeaderTitleMeta, StrctPagination, StrctPassword, StrctPopover, StrctPopoverTrigger, StrctProgress, StrctQr, 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, StrctWindow, StrctWindowDock, StrctWindowDockItem, StrctWindowService, StrctWizard, StrctWizardAside, __qrInternals, focusFirstIn, keepTabInside, lockBodyScroll, parseAnsi, parseInlines, provideStrctWizardDefaults, registerStrctIcon, restoreFocus, saveFocusedElement, strctCheckHostDisplay, strctCheckHostInputs, strctClassifyHref, strctComputeDiff, strctDpPad, strctFormatBytes, strctFormatDuration, strctFormatRate, strctFormatSi, strctParseMarkdown, strctQrMatrix, strctValidationIcon, strctValidationTone, unlockBodyScroll };
|
|
8410
|
+
export type { StrctAlertType, StrctAvatarSize, StrctAvatarStatus, StrctBadgeStatus, StrctButtonSize, StrctButtonVariant, StrctCascadeOption, StrctCellContext, StrctChartAnnotation, StrctChartColor, StrctChartCurve, StrctChartSeries, StrctChartSlot, StrctChartStatus, StrctChartSummaryInfo, StrctChartThreshold, StrctChartType, StrctChatAuthor, StrctColumn, StrctCommandItem, StrctConfirmOptions, StrctConfirmTone, StrctDatagridColumn, StrctDatagridColumnState, StrctDatagridFilters, StrctDatagridGroup, StrctDatagridLabels, StrctDatagridLazyState, StrctDescAlign, StrctDescItem, StrctDiffRow, StrctDonutSegment, StrctDrawerSide, StrctDrawerSize, StrctEmptyVariant, StrctFilterChip, StrctFlowColumn, StrctFlowDirection, StrctFlowEdge, StrctFlowNode, StrctFlowOrientation, StrctHeaderActionConfig, StrctHeatmapCell, StrctHeatmapSummaryInfo, StrctHotkey, StrctIconBadge, StrctIconName, StrctKnobStatus, StrctLegendItem, StrctLiveLabels, StrctLiveState, StrctLogLine, StrctMdAlign, StrctMdBlock, StrctMdInline, StrctMdToken, StrctMdTokenizer, StrctMediaState, StrctMenuItem, StrctMenuLink, StrctMenuOpenOptions, StrctMenuPlacement, StrctMenuSection, StrctMenubarItem, StrctMetricStatus, StrctModalSize, StrctMode, StrctNotification, StrctOption, StrctOverlayPlacement, StrctPalette, StrctPaletteInfo, StrctProgressSegment, StrctProgressStatus, StrctQrEcc, 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, StrctWindowBounds, StrctWindowLabels, StrctWindowOutsidePointer, StrctWizardDefaults };
|