@akcelik/strct 5.6.1 → 5.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1053,6 +1053,11 @@ class StrctShell {
1053
1053
  /** The link's text (localisable). */
1054
1054
  skipLinkLabel = input('Skip to main content', /* @ts-ignore */
1055
1055
  ...(ngDevMode ? [{ debugName: "skipLinkLabel" }] : /* istanbul ignore next */ []));
1056
+ /** The name of the backdrop that closes the navigation drawer on a phone. */
1057
+ closeNavLabel = input('Close navigation', /* @ts-ignore */
1058
+ ...(ngDevMode ? [{ debugName: "closeNavLabel" }] : /* istanbul ignore next */ []));
1059
+ /** The drawer's open state lives on the shell, and so does its backdrop. */
1060
+ shell = inject(StrctShellService);
1056
1061
  doc = inject(DOCUMENT$1);
1057
1062
  /**
1058
1063
  * Moves focus rather than only the scroll position: an href alone scrolls
@@ -1071,7 +1076,7 @@ class StrctShell {
1071
1076
  target.scrollIntoView?.({ block: 'start' });
1072
1077
  }
1073
1078
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctShell, deps: [], target: i0.ɵɵFactoryTarget.Component });
1074
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctShell, isStandalone: true, selector: "strct-shell", inputs: { skipLinkTarget: { classPropertyName: "skipLinkTarget", publicName: "skipLinkTarget", isSignal: true, isRequired: false, transformFunction: null }, skipLinkLabel: { classPropertyName: "skipLinkLabel", publicName: "skipLinkLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "strct-shell" }, providers: [StrctShellService], ngImport: i0, template: `
1079
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctShell, isStandalone: true, selector: "strct-shell", inputs: { skipLinkTarget: { classPropertyName: "skipLinkTarget", publicName: "skipLinkTarget", isSignal: true, isRequired: false, transformFunction: null }, skipLinkLabel: { classPropertyName: "skipLinkLabel", publicName: "skipLinkLabel", isSignal: true, isRequired: false, transformFunction: null }, closeNavLabel: { classPropertyName: "closeNavLabel", publicName: "closeNavLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "strct-shell" }, providers: [StrctShellService], ngImport: i0, template: `
1075
1080
  @if (skipLinkTarget()) {
1076
1081
  <!-- The first focusable element on the page, invisible until focused. -->
1077
1082
  <a
@@ -1082,6 +1087,19 @@ class StrctShell {
1082
1087
  >
1083
1088
  }
1084
1089
  <ng-content select="strct-header" />
1090
+ @if (shell.mobileNavOpen()) {
1091
+ <!-- Outside the drawer, which is transformed and would otherwise be this
1092
+ fixed element's containing block (BUG-53-01). -->
1093
+ <div
1094
+ class="strct-vnav__backdrop"
1095
+ tabindex="-1"
1096
+ role="button"
1097
+ [attr.aria-label]="closeNavLabel()"
1098
+ (click)="shell.mobileNavOpen.set(false)"
1099
+ (keydown.enter)="shell.mobileNavOpen.set(false)"
1100
+ (keydown.space)="shell.mobileNavOpen.set(false)"
1101
+ ></div>
1102
+ }
1085
1103
  <div class="strct-shell__main"><ng-content /></div>
1086
1104
  <ng-content select="strct-footer" />
1087
1105
  `, isInline: true, styles: [".strct-shell{display:grid;grid-template-rows:auto 1fr auto;height:100vh;overflow:hidden;background:var(--bg-0)}.strct-shell__main{display:flex;min-height:0;overflow:hidden}.strct-shell__skip{position:absolute;inset-inline-start:0;top:0;z-index:1;transform:translateY(-120%);padding:var(--space-2) var(--space-3);border-radius:0 0 var(--radius-md) 0;background:var(--acc);color:var(--inv);font-size:var(--text-sm);text-decoration:none}.strct-shell__skip:focus-visible{transform:none;outline:2px solid var(--acc50);outline-offset:2px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
@@ -1099,10 +1117,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
1099
1117
  >
1100
1118
  }
1101
1119
  <ng-content select="strct-header" />
1120
+ @if (shell.mobileNavOpen()) {
1121
+ <!-- Outside the drawer, which is transformed and would otherwise be this
1122
+ fixed element's containing block (BUG-53-01). -->
1123
+ <div
1124
+ class="strct-vnav__backdrop"
1125
+ tabindex="-1"
1126
+ role="button"
1127
+ [attr.aria-label]="closeNavLabel()"
1128
+ (click)="shell.mobileNavOpen.set(false)"
1129
+ (keydown.enter)="shell.mobileNavOpen.set(false)"
1130
+ (keydown.space)="shell.mobileNavOpen.set(false)"
1131
+ ></div>
1132
+ }
1102
1133
  <div class="strct-shell__main"><ng-content /></div>
1103
1134
  <ng-content select="strct-footer" />
1104
1135
  `, host: { class: 'strct-shell' }, styles: [".strct-shell{display:grid;grid-template-rows:auto 1fr auto;height:100vh;overflow:hidden;background:var(--bg-0)}.strct-shell__main{display:flex;min-height:0;overflow:hidden}.strct-shell__skip{position:absolute;inset-inline-start:0;top:0;z-index:1;transform:translateY(-120%);padding:var(--space-2) var(--space-3);border-radius:0 0 var(--radius-md) 0;background:var(--acc);color:var(--inv);font-size:var(--text-sm);text-decoration:none}.strct-shell__skip:focus-visible{transform:none;outline:2px solid var(--acc50);outline-offset:2px}\n"] }]
1105
- }], propDecorators: { skipLinkTarget: [{ type: i0.Input, args: [{ isSignal: true, alias: "skipLinkTarget", required: false }] }], skipLinkLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "skipLinkLabel", required: false }] }] } });
1136
+ }], propDecorators: { skipLinkTarget: [{ type: i0.Input, args: [{ isSignal: true, alias: "skipLinkTarget", required: false }] }], skipLinkLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "skipLinkLabel", required: false }] }], closeNavLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeNavLabel", required: false }] }] } });
1106
1137
  /** Top application bar. Holds brand on the left and actions on the right. */
1107
1138
  class StrctHeader {
1108
1139
  /** Accessible label of the mobile drawer toggle. */
@@ -1122,7 +1153,7 @@ class StrctHeader {
1122
1153
  <strct-icon name="menu" [size]="18" />
1123
1154
  </button>
1124
1155
  <ng-content />
1125
- `, isInline: true, styles: [".strct-header{display:flex;align-items:center;gap:14px;height:56px;padding:0 18px;background:var(--hdr);border-bottom:1px solid var(--b2);color:var(--hdr-fg)}.strct-header .strct-btn--flat{color:color-mix(in srgb,var(--hdr-fg) 72%,transparent)}.strct-header .strct-btn--flat:hover:not(:disabled){background:color-mix(in srgb,var(--hdr-fg) 12%,transparent);color:var(--hdr-fg)}.strct-header .strct-btn--flat:focus-visible{outline-color:color-mix(in srgb,var(--hdr-fg) 60%,transparent)}.strct-header__drawer-toggle{display:none;align-items:center;justify-content:center;padding:4px;border:0;border-radius:5px;background:transparent;color:color-mix(in srgb,var(--hdr-fg) 85%,transparent);cursor:pointer}.strct-header__drawer-toggle:hover{background:#ffffff1f;color:var(--hdr-fg)}@media(max-width:768px){.strct-header__drawer-toggle{display:inline-flex}}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "strictName", "size", "strokeWidth", "badge", "ariaLabel", "count", "countMax", "countStatus", "countLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
1156
+ `, isInline: true, styles: [".strct-vnav__backdrop{position:fixed;inset:0;z-index:calc(var(--z-nav) - 1);background:var(--backdrop);animation:strct-vnav-backdrop-in .2s ease}@media(min-width:769px){.strct-vnav__backdrop{display:none}}@keyframes strct-vnav-backdrop-in{0%{opacity:0}to{opacity:1}}.strct-header{display:flex;align-items:center;gap:14px;height:56px;padding:0 18px;background:var(--hdr);border-bottom:1px solid var(--b2);color:var(--hdr-fg)}.strct-header .strct-btn--flat:not(.strct-modal__dialog *,.strct-drawer *,.strct-popover__panel *,.strct-dd__menu *,.strct-tour__card *){color:color-mix(in srgb,var(--hdr-fg) 72%,transparent)}.strct-header .strct-btn--flat:not(.strct-modal__dialog *,.strct-drawer *,.strct-popover__panel *,.strct-dd__menu *,.strct-tour__card *):hover:not(:disabled){background:color-mix(in srgb,var(--hdr-fg) 12%,transparent);color:var(--hdr-fg)}.strct-header .strct-btn--flat:not(.strct-modal__dialog *,.strct-drawer *,.strct-popover__panel *,.strct-dd__menu *,.strct-tour__card *):focus-visible{outline-color:color-mix(in srgb,var(--hdr-fg) 60%,transparent)}.strct-header__drawer-toggle{display:none;align-items:center;justify-content:center;padding:4px;border:0;border-radius:5px;background:transparent;color:color-mix(in srgb,var(--hdr-fg) 85%,transparent);cursor:pointer}.strct-header__drawer-toggle:hover{background:#ffffff1f;color:var(--hdr-fg)}@media(max-width:768px){.strct-header__drawer-toggle{display:inline-flex}}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "strictName", "size", "strokeWidth", "badge", "ariaLabel", "count", "countMax", "countStatus", "countLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
1126
1157
  }
1127
1158
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctHeader, decorators: [{
1128
1159
  type: Component,
@@ -1138,7 +1169,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
1138
1169
  <strct-icon name="menu" [size]="18" />
1139
1170
  </button>
1140
1171
  <ng-content />
1141
- `, host: { class: 'strct-header' }, styles: [".strct-header{display:flex;align-items:center;gap:14px;height:56px;padding:0 18px;background:var(--hdr);border-bottom:1px solid var(--b2);color:var(--hdr-fg)}.strct-header .strct-btn--flat{color:color-mix(in srgb,var(--hdr-fg) 72%,transparent)}.strct-header .strct-btn--flat:hover:not(:disabled){background:color-mix(in srgb,var(--hdr-fg) 12%,transparent);color:var(--hdr-fg)}.strct-header .strct-btn--flat:focus-visible{outline-color:color-mix(in srgb,var(--hdr-fg) 60%,transparent)}.strct-header__drawer-toggle{display:none;align-items:center;justify-content:center;padding:4px;border:0;border-radius:5px;background:transparent;color:color-mix(in srgb,var(--hdr-fg) 85%,transparent);cursor:pointer}.strct-header__drawer-toggle:hover{background:#ffffff1f;color:var(--hdr-fg)}@media(max-width:768px){.strct-header__drawer-toggle{display:inline-flex}}\n"] }]
1172
+ `, host: { class: 'strct-header' }, styles: [".strct-vnav__backdrop{position:fixed;inset:0;z-index:calc(var(--z-nav) - 1);background:var(--backdrop);animation:strct-vnav-backdrop-in .2s ease}@media(min-width:769px){.strct-vnav__backdrop{display:none}}@keyframes strct-vnav-backdrop-in{0%{opacity:0}to{opacity:1}}.strct-header{display:flex;align-items:center;gap:14px;height:56px;padding:0 18px;background:var(--hdr);border-bottom:1px solid var(--b2);color:var(--hdr-fg)}.strct-header .strct-btn--flat:not(.strct-modal__dialog *,.strct-drawer *,.strct-popover__panel *,.strct-dd__menu *,.strct-tour__card *){color:color-mix(in srgb,var(--hdr-fg) 72%,transparent)}.strct-header .strct-btn--flat:not(.strct-modal__dialog *,.strct-drawer *,.strct-popover__panel *,.strct-dd__menu *,.strct-tour__card *):hover:not(:disabled){background:color-mix(in srgb,var(--hdr-fg) 12%,transparent);color:var(--hdr-fg)}.strct-header .strct-btn--flat:not(.strct-modal__dialog *,.strct-drawer *,.strct-popover__panel *,.strct-dd__menu *,.strct-tour__card *):focus-visible{outline-color:color-mix(in srgb,var(--hdr-fg) 60%,transparent)}.strct-header__drawer-toggle{display:none;align-items:center;justify-content:center;padding:4px;border:0;border-radius:5px;background:transparent;color:color-mix(in srgb,var(--hdr-fg) 85%,transparent);cursor:pointer}.strct-header__drawer-toggle:hover{background:#ffffff1f;color:var(--hdr-fg)}@media(max-width:768px){.strct-header__drawer-toggle{display:inline-flex}}\n"] }]
1142
1173
  }], propDecorators: { drawerToggleAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "drawerToggleAriaLabel", required: false }] }] } });
1143
1174
  /** Bottom status bar. */
1144
1175
  class StrctFooter {
@@ -1159,42 +1190,30 @@ class StrctVerticalNav {
1159
1190
  this.shell.mobileNavOpen.set(false);
1160
1191
  }
1161
1192
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctVerticalNav, deps: [], target: i0.ɵɵFactoryTarget.Component });
1162
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctVerticalNav, isStandalone: true, selector: "strct-vertical-nav", host: { listeners: { "document:keydown.escape": "onEscape()" }, properties: { "id": "shell.navId", "class.strct-vnav--open": "shell.mobileNavOpen()" }, classAttribute: "strct-vnav" }, ngImport: i0, template: `
1163
- @if (shell.mobileNavOpen()) {
1164
- <div
1165
- class="strct-vnav__backdrop"
1166
- tabindex="-1"
1167
- role="button"
1168
- aria-label="Close navigation"
1169
- (click)="shell.mobileNavOpen.set(false)"
1170
- (keydown.enter)="shell.mobileNavOpen.set(false)"
1171
- (keydown.space)="shell.mobileNavOpen.set(false)"
1172
- ></div>
1173
- }
1193
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.4", type: StrctVerticalNav, isStandalone: true, selector: "strct-vertical-nav", host: { listeners: { "document:keydown.escape": "onEscape()" }, properties: { "id": "shell.navId", "class.strct-vnav--open": "shell.mobileNavOpen()" }, classAttribute: "strct-vnav" }, ngImport: i0, template: `
1194
+ <!-- The backdrop is drawn by strct-shell. Here it was a fixed child of a
1195
+ transformed element, so its inset: 0 was the drawer's own box and its
1196
+ z-index put it above the drawer's content: the page beside the drawer
1197
+ was never dimmed, and every tap on the rail or the menu landed on the
1198
+ backdrop and closed the drawer. -->
1174
1199
  <ng-content />
1175
- `, isInline: true, styles: [".strct-vnav{display:flex;flex-direction:column;width:264px;flex-shrink:0;background:var(--bg-1);border-inline-end:1px solid var(--b2);overflow:hidden}@media(max-width:768px){.strct-vnav{position:fixed;top:0;inset-inline-start:0;bottom:0;z-index:var(--z-nav);transform:translate(-100%);transition:transform .2s ease}[dir=rtl] .strct-vnav{transform:translate(100%)}.strct-vnav--open,[dir=rtl] .strct-vnav--open{transform:translate(0)}.strct-vnav__backdrop{position:fixed;inset:0;z-index:calc(var(--z-nav) - 1);background:var(--backdrop);animation:strct-vnav-backdrop-in .2s ease}}@media(min-width:769px){.strct-vnav__backdrop{display:none}}@keyframes strct-vnav-backdrop-in{0%{opacity:0}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
1200
+ `, isInline: true, styles: [".strct-vnav{display:flex;flex-direction:column;width:264px;flex-shrink:0;background:var(--bg-1);border-inline-end:1px solid var(--b2);overflow:hidden}@media(max-width:768px){.strct-vnav{position:fixed;top:0;inset-inline-start:0;bottom:0;z-index:var(--z-nav);transform:translate(-100%);transition:transform .2s ease}[dir=rtl] .strct-vnav{transform:translate(100%)}.strct-vnav--open,[dir=rtl] .strct-vnav--open{transform:translate(0)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
1176
1201
  }
1177
1202
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctVerticalNav, decorators: [{
1178
1203
  type: Component,
1179
1204
  args: [{ selector: 'strct-vertical-nav', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: `
1180
- @if (shell.mobileNavOpen()) {
1181
- <div
1182
- class="strct-vnav__backdrop"
1183
- tabindex="-1"
1184
- role="button"
1185
- aria-label="Close navigation"
1186
- (click)="shell.mobileNavOpen.set(false)"
1187
- (keydown.enter)="shell.mobileNavOpen.set(false)"
1188
- (keydown.space)="shell.mobileNavOpen.set(false)"
1189
- ></div>
1190
- }
1205
+ <!-- The backdrop is drawn by strct-shell. Here it was a fixed child of a
1206
+ transformed element, so its inset: 0 was the drawer's own box and its
1207
+ z-index put it above the drawer's content: the page beside the drawer
1208
+ was never dimmed, and every tap on the rail or the menu landed on the
1209
+ backdrop and closed the drawer. -->
1191
1210
  <ng-content />
1192
1211
  `, host: {
1193
1212
  class: 'strct-vnav',
1194
1213
  '[id]': 'shell.navId',
1195
1214
  '[class.strct-vnav--open]': 'shell.mobileNavOpen()',
1196
1215
  '(document:keydown.escape)': 'onEscape()',
1197
- }, styles: [".strct-vnav{display:flex;flex-direction:column;width:264px;flex-shrink:0;background:var(--bg-1);border-inline-end:1px solid var(--b2);overflow:hidden}@media(max-width:768px){.strct-vnav{position:fixed;top:0;inset-inline-start:0;bottom:0;z-index:var(--z-nav);transform:translate(-100%);transition:transform .2s ease}[dir=rtl] .strct-vnav{transform:translate(100%)}.strct-vnav--open,[dir=rtl] .strct-vnav--open{transform:translate(0)}.strct-vnav__backdrop{position:fixed;inset:0;z-index:calc(var(--z-nav) - 1);background:var(--backdrop);animation:strct-vnav-backdrop-in .2s ease}}@media(min-width:769px){.strct-vnav__backdrop{display:none}}@keyframes strct-vnav-backdrop-in{0%{opacity:0}}\n"] }]
1216
+ }, styles: [".strct-vnav{display:flex;flex-direction:column;width:264px;flex-shrink:0;background:var(--bg-1);border-inline-end:1px solid var(--b2);overflow:hidden}@media(max-width:768px){.strct-vnav{position:fixed;top:0;inset-inline-start:0;bottom:0;z-index:var(--z-nav);transform:translate(-100%);transition:transform .2s ease}[dir=rtl] .strct-vnav{transform:translate(100%)}.strct-vnav--open,[dir=rtl] .strct-vnav--open{transform:translate(0)}}\n"] }]
1198
1217
  }] });
1199
1218
  /** Horizontal strip of icon tabs (e.g. section switcher at the top of a sidebar). */
1200
1219
  class StrctNav {
@@ -1901,7 +1920,7 @@ class StrctListItem {
1901
1920
  <span class="strct-li__meta"><ng-content select="[strctListItemMeta]" /></span>
1902
1921
  </div>
1903
1922
  <span class="strct-li__trailing"><ng-content select="[strctListItemTrailing]" /></span>
1904
- `, isInline: true, styles: [".strct-li{display:flex;align-items:center;gap:var(--space-2);padding-inline:var(--space-3);position:relative}.strct-list--dividers .strct-li+.strct-li{border-block-start:1px solid var(--b1)}.strct-li__main{display:flex;align-items:center;gap:var(--space-2);flex:1;min-width:0;min-height:44px;padding-block:6px;text-align:start;border-radius:var(--radius-sm)}.strct-list--dense .strct-li__main{min-height:32px;padding-block:2px}.strct-li--interactive .strct-li__main{cursor:pointer}.strct-li--interactive:hover{background:var(--bg-2)}.strct-li--selected{background:var(--acc-s)}.strct-li__main:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-li--status:before{content:\"\";position:absolute;inset-block:0;inset-inline-start:0;width:2px;background:var(--t3)}.strct-li[data-status=accent]:before{background:var(--acc)}.strct-li[data-status=success]:before{background:var(--success)}.strct-li[data-status=warning]:before{background:var(--warning)}.strct-li[data-status=critical]:before{background:var(--critical)}.strct-li--wrap .strct-li__main,.strct-list--wrap .strct-li__main{align-items:flex-start}.strct-li--wrap .strct-li__leading,.strct-list--wrap .strct-li__leading{min-height:calc(var(--text-md) * 1.45)}.strct-li--wrap .strct-li__title,.strct-li--wrap .strct-li__desc,.strct-list--wrap .strct-li__title,.strct-list--wrap .strct-li__desc{overflow:visible;text-overflow:clip;white-space:normal}.strct-li--wrap .strct-li__meta,.strct-list--wrap .strct-li__meta{align-self:flex-start;min-height:calc(var(--text-md) * 1.45)}.strct-li__leading:empty,.strct-li__meta:empty,.strct-li__desc:empty,.strct-li__trailing:empty{display:none}.strct-li__leading{display:inline-flex;align-items:center;flex:none}.strct-li__text{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0}.strct-li__title{font-size:var(--text-md);color:var(--t1);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.strct-li__desc{font-size:var(--text-sm);color:var(--t3);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.strct-li__meta{display:inline-flex;align-items:center;flex:none;font-size:var(--text-sm);color:var(--t3);white-space:nowrap}.strct-li__trailing{display:inline-flex;align-items:center;gap:var(--space-2);flex:none}@container (max-width: 360px){.strct-li__main{flex-wrap:wrap}.strct-li__meta{flex-basis:100%;padding-inline-start:0}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
1923
+ `, isInline: true, styles: [".strct-li{display:flex;align-items:center;gap:var(--space-2);padding-inline:var(--space-3);position:relative}.strct-list--flush .strct-li{padding-inline:0}.strct-list--dividers .strct-li+.strct-li{border-block-start:1px solid var(--b1)}.strct-li__main{display:flex;align-items:center;gap:var(--space-2);flex:1;min-width:0;min-height:44px;padding-block:6px;text-align:start;border-radius:var(--radius-sm)}.strct-list--dense .strct-li__main{min-height:32px;padding-block:2px}.strct-li--interactive .strct-li__main{cursor:pointer}.strct-li--interactive:hover{background:var(--bg-2)}.strct-li--selected{background:var(--acc-s)}.strct-li__main:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-li--status:before{content:\"\";position:absolute;inset-block:0;inset-inline-start:0;width:2px;background:var(--t3)}.strct-li[data-status=accent]:before{background:var(--acc)}.strct-li[data-status=success]:before{background:var(--success)}.strct-li[data-status=warning]:before{background:var(--warning)}.strct-li[data-status=critical]:before{background:var(--critical)}.strct-li--wrap .strct-li__main,.strct-list--wrap .strct-li__main{align-items:flex-start}.strct-li--wrap .strct-li__leading,.strct-list--wrap .strct-li__leading{min-height:calc(var(--text-md) * 1.45)}.strct-li--wrap .strct-li__title,.strct-li--wrap .strct-li__desc,.strct-list--wrap .strct-li__title,.strct-list--wrap .strct-li__desc{overflow:visible;text-overflow:clip;white-space:normal;overflow-wrap:anywhere}.strct-li--wrap .strct-li__meta,.strct-list--wrap .strct-li__meta{align-self:flex-start;min-height:calc(var(--text-md) * 1.45)}.strct-li__leading:empty,.strct-li__meta:empty,.strct-li__desc:empty,.strct-li__trailing:empty{display:none}.strct-li__leading{display:inline-flex;align-items:center;flex:none}.strct-li__text{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0}.strct-li__title{font-size:var(--text-md);color:var(--t1);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.strct-li__desc{font-size:var(--text-sm);color:var(--t3);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.strct-li__meta{display:inline-flex;align-items:center;flex:none;font-size:var(--text-sm);color:var(--t3);white-space:nowrap}.strct-li__trailing{display:inline-flex;align-items:center;gap:var(--space-2);flex:none}@container (max-width: 360px){.strct-li__main{flex-wrap:wrap}.strct-li__meta{flex-basis:100%;padding-inline-start:0}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
1905
1924
  }
1906
1925
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctListItem, decorators: [{
1907
1926
  type: Component,
@@ -1931,7 +1950,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
1931
1950
  '[class.strct-li--selected]': 'selected()',
1932
1951
  '[class.strct-li--status]': 'status()',
1933
1952
  '[attr.data-status]': 'status()',
1934
- }, styles: [".strct-li{display:flex;align-items:center;gap:var(--space-2);padding-inline:var(--space-3);position:relative}.strct-list--dividers .strct-li+.strct-li{border-block-start:1px solid var(--b1)}.strct-li__main{display:flex;align-items:center;gap:var(--space-2);flex:1;min-width:0;min-height:44px;padding-block:6px;text-align:start;border-radius:var(--radius-sm)}.strct-list--dense .strct-li__main{min-height:32px;padding-block:2px}.strct-li--interactive .strct-li__main{cursor:pointer}.strct-li--interactive:hover{background:var(--bg-2)}.strct-li--selected{background:var(--acc-s)}.strct-li__main:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-li--status:before{content:\"\";position:absolute;inset-block:0;inset-inline-start:0;width:2px;background:var(--t3)}.strct-li[data-status=accent]:before{background:var(--acc)}.strct-li[data-status=success]:before{background:var(--success)}.strct-li[data-status=warning]:before{background:var(--warning)}.strct-li[data-status=critical]:before{background:var(--critical)}.strct-li--wrap .strct-li__main,.strct-list--wrap .strct-li__main{align-items:flex-start}.strct-li--wrap .strct-li__leading,.strct-list--wrap .strct-li__leading{min-height:calc(var(--text-md) * 1.45)}.strct-li--wrap .strct-li__title,.strct-li--wrap .strct-li__desc,.strct-list--wrap .strct-li__title,.strct-list--wrap .strct-li__desc{overflow:visible;text-overflow:clip;white-space:normal}.strct-li--wrap .strct-li__meta,.strct-list--wrap .strct-li__meta{align-self:flex-start;min-height:calc(var(--text-md) * 1.45)}.strct-li__leading:empty,.strct-li__meta:empty,.strct-li__desc:empty,.strct-li__trailing:empty{display:none}.strct-li__leading{display:inline-flex;align-items:center;flex:none}.strct-li__text{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0}.strct-li__title{font-size:var(--text-md);color:var(--t1);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.strct-li__desc{font-size:var(--text-sm);color:var(--t3);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.strct-li__meta{display:inline-flex;align-items:center;flex:none;font-size:var(--text-sm);color:var(--t3);white-space:nowrap}.strct-li__trailing{display:inline-flex;align-items:center;gap:var(--space-2);flex:none}@container (max-width: 360px){.strct-li__main{flex-wrap:wrap}.strct-li__meta{flex-basis:100%;padding-inline-start:0}}\n"] }]
1953
+ }, styles: [".strct-li{display:flex;align-items:center;gap:var(--space-2);padding-inline:var(--space-3);position:relative}.strct-list--flush .strct-li{padding-inline:0}.strct-list--dividers .strct-li+.strct-li{border-block-start:1px solid var(--b1)}.strct-li__main{display:flex;align-items:center;gap:var(--space-2);flex:1;min-width:0;min-height:44px;padding-block:6px;text-align:start;border-radius:var(--radius-sm)}.strct-list--dense .strct-li__main{min-height:32px;padding-block:2px}.strct-li--interactive .strct-li__main{cursor:pointer}.strct-li--interactive:hover{background:var(--bg-2)}.strct-li--selected{background:var(--acc-s)}.strct-li__main:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-li--status:before{content:\"\";position:absolute;inset-block:0;inset-inline-start:0;width:2px;background:var(--t3)}.strct-li[data-status=accent]:before{background:var(--acc)}.strct-li[data-status=success]:before{background:var(--success)}.strct-li[data-status=warning]:before{background:var(--warning)}.strct-li[data-status=critical]:before{background:var(--critical)}.strct-li--wrap .strct-li__main,.strct-list--wrap .strct-li__main{align-items:flex-start}.strct-li--wrap .strct-li__leading,.strct-list--wrap .strct-li__leading{min-height:calc(var(--text-md) * 1.45)}.strct-li--wrap .strct-li__title,.strct-li--wrap .strct-li__desc,.strct-list--wrap .strct-li__title,.strct-list--wrap .strct-li__desc{overflow:visible;text-overflow:clip;white-space:normal;overflow-wrap:anywhere}.strct-li--wrap .strct-li__meta,.strct-list--wrap .strct-li__meta{align-self:flex-start;min-height:calc(var(--text-md) * 1.45)}.strct-li__leading:empty,.strct-li__meta:empty,.strct-li__desc:empty,.strct-li__trailing:empty{display:none}.strct-li__leading{display:inline-flex;align-items:center;flex:none}.strct-li__text{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0}.strct-li__title{font-size:var(--text-md);color:var(--t1);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.strct-li__desc{font-size:var(--text-sm);color:var(--t3);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.strct-li__meta{display:inline-flex;align-items:center;flex:none;font-size:var(--text-sm);color:var(--t3);white-space:nowrap}.strct-li__trailing{display:inline-flex;align-items:center;gap:var(--space-2);flex:none}@container (max-width: 360px){.strct-li__main{flex-wrap:wrap}.strct-li__meta{flex-basis:100%;padding-inline-start:0}}\n"] }]
1935
1954
  }], propDecorators: { interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], wrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrap", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], activated: [{ type: i0.Output, args: ["activated"] }] } });
1936
1955
  /**
1937
1956
  * A short list of things with a status — alarms, findings, clusters in a
@@ -1957,6 +1976,11 @@ class StrctList {
1957
1976
  * `strct-list-item [wrap]` turns it on for one row.
1958
1977
  */
1959
1978
  wrap = input(false, { ...(ngDevMode ? { debugName: "wrap" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
1979
+ /**
1980
+ * Drop the rows' inline padding, so a list of statements lines up with the
1981
+ * paragraphs around it instead of sitting 12px inside them.
1982
+ */
1983
+ flush = input(false, { ...(ngDevMode ? { debugName: "flush" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
1960
1984
  /** Hairline between rows. */
1961
1985
  dividers = input(true, { ...(ngDevMode ? { debugName: "dividers" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
1962
1986
  /** Shown when the list has no items. */
@@ -1968,7 +1992,7 @@ class StrctList {
1968
1992
  items = contentChildren(StrctListItem, /* @ts-ignore */
1969
1993
  ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
1970
1994
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctList, deps: [], target: i0.ɵɵFactoryTarget.Component });
1971
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctList, isStandalone: true, selector: "strct-list", inputs: { dense: { classPropertyName: "dense", publicName: "dense", isSignal: true, isRequired: false, transformFunction: null }, wrap: { classPropertyName: "wrap", publicName: "wrap", isSignal: true, isRequired: false, transformFunction: null }, dividers: { classPropertyName: "dividers", publicName: "dividers", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "list" }, properties: { "attr.aria-label": "label() || null", "class.strct-list--dense": "dense()", "class.strct-list--dividers": "dividers()", "class.strct-list--wrap": "wrap()" }, classAttribute: "strct-list" }, queries: [{ propertyName: "items", predicate: StrctListItem, isSignal: true }], ngImport: i0, template: `
1995
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctList, isStandalone: true, selector: "strct-list", inputs: { dense: { classPropertyName: "dense", publicName: "dense", isSignal: true, isRequired: false, transformFunction: null }, wrap: { classPropertyName: "wrap", publicName: "wrap", isSignal: true, isRequired: false, transformFunction: null }, flush: { classPropertyName: "flush", publicName: "flush", isSignal: true, isRequired: false, transformFunction: null }, dividers: { classPropertyName: "dividers", publicName: "dividers", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "list" }, properties: { "attr.aria-label": "label() || null", "class.strct-list--dense": "dense()", "class.strct-list--dividers": "dividers()", "class.strct-list--wrap": "wrap()", "class.strct-list--flush": "flush()" }, classAttribute: "strct-list" }, queries: [{ propertyName: "items", predicate: StrctListItem, isSignal: true }], ngImport: i0, template: `
1972
1996
  <ng-content />
1973
1997
  @if (emptyText() && !items().length) {
1974
1998
  <p class="strct-list__empty">{{ emptyText() }}</p>
@@ -1989,8 +2013,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
1989
2013
  '[class.strct-list--dense]': 'dense()',
1990
2014
  '[class.strct-list--dividers]': 'dividers()',
1991
2015
  '[class.strct-list--wrap]': 'wrap()',
2016
+ '[class.strct-list--flush]': 'flush()',
1992
2017
  }, styles: [".strct-list{display:block;container-type:inline-size}.strct-list__empty{margin:0;padding:var(--space-3);font-size:var(--text-sm);color:var(--t3)}\n"] }]
1993
- }], propDecorators: { dense: [{ type: i0.Input, args: [{ isSignal: true, alias: "dense", required: false }] }], wrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrap", required: false }] }], dividers: [{ type: i0.Input, args: [{ isSignal: true, alias: "dividers", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], items: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => StrctListItem), { isSignal: true }] }] } });
2018
+ }], propDecorators: { dense: [{ type: i0.Input, args: [{ isSignal: true, alias: "dense", required: false }] }], wrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrap", required: false }] }], flush: [{ type: i0.Input, args: [{ isSignal: true, alias: "flush", required: false }] }], dividers: [{ type: i0.Input, args: [{ isSignal: true, alias: "dividers", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], items: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => StrctListItem), { isSignal: true }] }] } });
1994
2019
 
1995
2020
  /** Follows the heading on its line — a badge, a count, a status dot. */
1996
2021
  class StrctSectionHeaderMeta {
@@ -2673,7 +2698,7 @@ class StrctProgress {
2673
2698
  {{ caption() }}
2674
2699
  </p>
2675
2700
  }
2676
- `, isInline: true, styles: [".strct-progress{display:block}.strct-progress__row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-2);margin-block-end:4px;font-size:var(--text-sm)}.strct-progress__label{color:var(--t2);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.strct-progress__value{color:var(--t1);font-variant-numeric:tabular-nums;white-space:nowrap}.strct-progress__caption{margin:4px 0 0;font-size:var(--text-sm);line-height:1.5;color:var(--t3)}.strct-progress__caption--accent{color:var(--acc)}.strct-progress__caption--success{color:var(--success)}.strct-progress__caption--warning{color:var(--warning)}.strct-progress__caption--critical{color:var(--critical)}.strct-progress--endvalue{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap}.strct-progress--endvalue .strct-progress__track{flex:1;min-width:0}.strct-progress__value--end{flex:none;font-size:var(--text-sm);color:var(--t2);font-variant-numeric:tabular-nums}.strct-progress--endvalue .strct-progress__caption,.strct-progress--endvalue .strct-progress__row{flex-basis:100%}.strct-progress__track{position:relative;display:flex;height:6px;border-radius:var(--radius-sm);background:var(--strct-progress-track, color-mix(in srgb, var(--t1) 12%, transparent));box-shadow:inset 0 0 0 1px var(--b2);overflow:hidden}.strct-progress__fill{height:100%;border-radius:var(--radius-sm);background:var(--acc);transition:width .3s ease}.strct-progress--neutral .strct-progress__fill{background:var(--t3)}.strct-progress--success .strct-progress__fill{background:var(--success)}.strct-progress--warning .strct-progress__fill{background:var(--warning)}.strct-progress--critical .strct-progress__fill{background:var(--critical)}.strct-progress .strct-progress__fill--neutral{background:var(--t3)}.strct-progress .strct-progress__fill--accent{background:var(--acc)}.strct-progress .strct-progress__fill--success{background:var(--success)}.strct-progress .strct-progress__fill--warning{background:var(--warning)}.strct-progress .strct-progress__fill--critical{background:var(--critical)}.strct-progress__track .strct-progress__fill+.strct-progress__fill{border-start-start-radius:0;border-end-start-radius:0}.strct-progress .strct-progress__fill--indeterminate{width:35%;animation:strct-progress-sweep 1.1s ease-in-out infinite}@keyframes strct-progress-sweep{0%{transform:translate(-120%)}to{transform:translate(340%)}}@media(prefers-reduced-motion:reduce){.strct-progress .strct-progress__fill--indeterminate{width:100%;animation:none;background:repeating-linear-gradient(135deg,var(--acc) 0 6px,color-mix(in srgb,var(--acc) 45%,transparent) 6px 12px)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
2701
+ `, isInline: true, styles: [".strct-progress{display:block}.strct-progress__row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-2);margin-block-end:4px;font-size:var(--text-sm)}.strct-progress__label{color:var(--t2);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.strct-progress__value{color:var(--t1);font-variant-numeric:tabular-nums;white-space:nowrap}.strct-progress__caption{margin:4px 0 0;font-size:var(--text-sm);line-height:1.5;color:var(--t3)}.strct-progress__caption--accent{color:var(--acc)}.strct-progress__caption--success{color:var(--success)}.strct-progress__caption--warning{color:var(--warning)}.strct-progress__caption--critical{color:var(--critical)}.strct-progress--endvalue{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap}.strct-progress--endvalue .strct-progress__track{flex:1;min-width:0}.strct-progress__value--end{flex:none;width:var(--strct-progress-value-w, 4ch);text-align:end;font-size:var(--text-sm);color:var(--t2);font-variant-numeric:tabular-nums}.strct-progress--endvalue .strct-progress__caption,.strct-progress--endvalue .strct-progress__row{flex-basis:100%}.strct-progress__track{position:relative;display:flex;height:6px;border-radius:var(--radius-sm);background:var(--strct-progress-track, color-mix(in srgb, var(--t1) 12%, transparent));box-shadow:inset 0 0 0 1px var(--b2);overflow:hidden}.strct-progress__fill{height:100%;border-radius:var(--radius-sm);background:var(--acc);transition:width .3s ease}.strct-progress--neutral .strct-progress__fill{background:var(--t3)}.strct-progress--success .strct-progress__fill{background:var(--success)}.strct-progress--warning .strct-progress__fill{background:var(--warning)}.strct-progress--critical .strct-progress__fill{background:var(--critical)}.strct-progress .strct-progress__fill--neutral{background:var(--t3)}.strct-progress .strct-progress__fill--accent{background:var(--acc)}.strct-progress .strct-progress__fill--success{background:var(--success)}.strct-progress .strct-progress__fill--warning{background:var(--warning)}.strct-progress .strct-progress__fill--critical{background:var(--critical)}.strct-progress__track .strct-progress__fill+.strct-progress__fill{border-start-start-radius:0;border-end-start-radius:0}.strct-progress .strct-progress__fill--indeterminate{width:35%;animation:strct-progress-sweep 1.1s ease-in-out infinite}@keyframes strct-progress-sweep{0%{transform:translate(-120%)}to{transform:translate(340%)}}@media(prefers-reduced-motion:reduce){.strct-progress .strct-progress__fill--indeterminate{width:100%;animation:none;background:repeating-linear-gradient(135deg,var(--acc) 0 6px,color-mix(in srgb,var(--acc) 45%,transparent) 6px 12px)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
2677
2702
  }
2678
2703
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctProgress, decorators: [{
2679
2704
  type: Component,
@@ -2728,7 +2753,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
2728
2753
  '[class.strct-progress--warning]': "resolvedStatus() === 'warning'",
2729
2754
  '[class.strct-progress--critical]': "resolvedStatus() === 'critical'",
2730
2755
  '[class.strct-progress--endvalue]': "showValue() && valuePosition() === 'end'",
2731
- }, styles: [".strct-progress{display:block}.strct-progress__row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-2);margin-block-end:4px;font-size:var(--text-sm)}.strct-progress__label{color:var(--t2);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.strct-progress__value{color:var(--t1);font-variant-numeric:tabular-nums;white-space:nowrap}.strct-progress__caption{margin:4px 0 0;font-size:var(--text-sm);line-height:1.5;color:var(--t3)}.strct-progress__caption--accent{color:var(--acc)}.strct-progress__caption--success{color:var(--success)}.strct-progress__caption--warning{color:var(--warning)}.strct-progress__caption--critical{color:var(--critical)}.strct-progress--endvalue{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap}.strct-progress--endvalue .strct-progress__track{flex:1;min-width:0}.strct-progress__value--end{flex:none;font-size:var(--text-sm);color:var(--t2);font-variant-numeric:tabular-nums}.strct-progress--endvalue .strct-progress__caption,.strct-progress--endvalue .strct-progress__row{flex-basis:100%}.strct-progress__track{position:relative;display:flex;height:6px;border-radius:var(--radius-sm);background:var(--strct-progress-track, color-mix(in srgb, var(--t1) 12%, transparent));box-shadow:inset 0 0 0 1px var(--b2);overflow:hidden}.strct-progress__fill{height:100%;border-radius:var(--radius-sm);background:var(--acc);transition:width .3s ease}.strct-progress--neutral .strct-progress__fill{background:var(--t3)}.strct-progress--success .strct-progress__fill{background:var(--success)}.strct-progress--warning .strct-progress__fill{background:var(--warning)}.strct-progress--critical .strct-progress__fill{background:var(--critical)}.strct-progress .strct-progress__fill--neutral{background:var(--t3)}.strct-progress .strct-progress__fill--accent{background:var(--acc)}.strct-progress .strct-progress__fill--success{background:var(--success)}.strct-progress .strct-progress__fill--warning{background:var(--warning)}.strct-progress .strct-progress__fill--critical{background:var(--critical)}.strct-progress__track .strct-progress__fill+.strct-progress__fill{border-start-start-radius:0;border-end-start-radius:0}.strct-progress .strct-progress__fill--indeterminate{width:35%;animation:strct-progress-sweep 1.1s ease-in-out infinite}@keyframes strct-progress-sweep{0%{transform:translate(-120%)}to{transform:translate(340%)}}@media(prefers-reduced-motion:reduce){.strct-progress .strct-progress__fill--indeterminate{width:100%;animation:none;background:repeating-linear-gradient(135deg,var(--acc) 0 6px,color-mix(in srgb,var(--acc) 45%,transparent) 6px 12px)}}\n"] }]
2756
+ }, styles: [".strct-progress{display:block}.strct-progress__row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-2);margin-block-end:4px;font-size:var(--text-sm)}.strct-progress__label{color:var(--t2);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.strct-progress__value{color:var(--t1);font-variant-numeric:tabular-nums;white-space:nowrap}.strct-progress__caption{margin:4px 0 0;font-size:var(--text-sm);line-height:1.5;color:var(--t3)}.strct-progress__caption--accent{color:var(--acc)}.strct-progress__caption--success{color:var(--success)}.strct-progress__caption--warning{color:var(--warning)}.strct-progress__caption--critical{color:var(--critical)}.strct-progress--endvalue{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap}.strct-progress--endvalue .strct-progress__track{flex:1;min-width:0}.strct-progress__value--end{flex:none;width:var(--strct-progress-value-w, 4ch);text-align:end;font-size:var(--text-sm);color:var(--t2);font-variant-numeric:tabular-nums}.strct-progress--endvalue .strct-progress__caption,.strct-progress--endvalue .strct-progress__row{flex-basis:100%}.strct-progress__track{position:relative;display:flex;height:6px;border-radius:var(--radius-sm);background:var(--strct-progress-track, color-mix(in srgb, var(--t1) 12%, transparent));box-shadow:inset 0 0 0 1px var(--b2);overflow:hidden}.strct-progress__fill{height:100%;border-radius:var(--radius-sm);background:var(--acc);transition:width .3s ease}.strct-progress--neutral .strct-progress__fill{background:var(--t3)}.strct-progress--success .strct-progress__fill{background:var(--success)}.strct-progress--warning .strct-progress__fill{background:var(--warning)}.strct-progress--critical .strct-progress__fill{background:var(--critical)}.strct-progress .strct-progress__fill--neutral{background:var(--t3)}.strct-progress .strct-progress__fill--accent{background:var(--acc)}.strct-progress .strct-progress__fill--success{background:var(--success)}.strct-progress .strct-progress__fill--warning{background:var(--warning)}.strct-progress .strct-progress__fill--critical{background:var(--critical)}.strct-progress__track .strct-progress__fill+.strct-progress__fill{border-start-start-radius:0;border-end-start-radius:0}.strct-progress .strct-progress__fill--indeterminate{width:35%;animation:strct-progress-sweep 1.1s ease-in-out infinite}@keyframes strct-progress-sweep{0%{transform:translate(-120%)}to{transform:translate(340%)}}@media(prefers-reduced-motion:reduce){.strct-progress .strct-progress__fill--indeterminate{width:100%;animation:none;background:repeating-linear-gradient(135deg,var(--acc) 0 6px,color-mix(in srgb,var(--acc) 45%,transparent) 6px 12px)}}\n"] }]
2732
2757
  }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], visibleLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "visibleLabel", required: false }] }], showValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValue", required: false }] }], valueText: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueText", required: false }] }], caption: [{ type: i0.Input, args: [{ isSignal: true, alias: "caption", required: false }] }], captionStatus: [{ type: i0.Input, args: [{ isSignal: true, alias: "captionStatus", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], valuePosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "valuePosition", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }], segments: [{ type: i0.Input, args: [{ isSignal: true, alias: "segments", required: false }] }], thresholds: [{ type: i0.Input, args: [{ isSignal: true, alias: "thresholds", required: false }] }] } });
2733
2758
 
2734
2759
  /** Indeterminate loading ring. `<strct-spinner size="sm" />`. */
@@ -7990,6 +8015,12 @@ class StrctCodeInline {
7990
8015
  ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
7991
8016
  /** Long ids wrap instead of overflowing a narrow card. */
7992
8017
  wrap = input(false, { ...(ngDevMode ? { debugName: "wrap" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
8018
+ /**
8019
+ * What the copy button is called. Two spans in the same drawer are both
8020
+ * "Copy" without it; these are "Copy thumbprint" and "Copy serial number".
8021
+ */
8022
+ copyLabel = input('', /* @ts-ignore */
8023
+ ...(ngDevMode ? [{ debugName: "copyLabel" }] : /* istanbul ignore next */ []));
7993
8024
  host = inject(ElementRef);
7994
8025
  vcr = inject(ViewContainerRef);
7995
8026
  destroyRef = inject(DestroyRef);
@@ -7998,14 +8029,12 @@ class StrctCodeInline {
7998
8029
  ...(ngDevMode ? [{ debugName: "copyRef" }] : /* istanbul ignore next */ []));
7999
8030
  revision = signal(0, /* @ts-ignore */
8000
8031
  ...(ngDevMode ? [{ debugName: "revision" }] : /* istanbul ignore next */ []));
8032
+ /** The host exists: nothing may be created into it before that. */
8033
+ rendered = signal(false, /* @ts-ignore */
8034
+ ...(ngDevMode ? [{ debugName: "rendered" }] : /* istanbul ignore next */ []));
8001
8035
  constructor() {
8002
8036
  afterNextRender(() => {
8003
- if (!this.copyable())
8004
- return;
8005
8037
  const el = this.host.nativeElement;
8006
- const ref = this.vcr.createComponent(StrctCopy);
8007
- el.appendChild(ref.location.nativeElement);
8008
- this.copyRef.set(ref);
8009
8038
  // The element's text is not a signal, so watch it: a path or a thumbprint
8010
8039
  // that loads later must be the text that gets copied, not the first one.
8011
8040
  if (typeof MutationObserver !== 'undefined') {
@@ -8013,19 +8042,46 @@ class StrctCodeInline {
8013
8042
  mo.observe(el, { childList: true, characterData: true, subtree: true });
8014
8043
  this.destroyRef.onDestroy(() => mo.disconnect());
8015
8044
  }
8045
+ this.rendered.set(true);
8046
+ });
8047
+ // `copyable` was read once, at first render, so a button that depends on
8048
+ // state needed two template branches. It is a signal like any other now:
8049
+ // the button is created when it turns on and destroyed when it turns off.
8050
+ effect(() => {
8051
+ if (!this.rendered())
8052
+ return;
8053
+ const want = this.copyable();
8054
+ const ref = untracked(() => this.copyRef());
8055
+ if (want === !!ref)
8056
+ return;
8057
+ untracked(() => {
8058
+ if (want) {
8059
+ const created = this.vcr.createComponent(StrctCopy);
8060
+ this.host.nativeElement.appendChild(created.location.nativeElement);
8061
+ this.copyRef.set(created);
8062
+ }
8063
+ else {
8064
+ ref?.destroy();
8065
+ this.copyRef.set(null);
8066
+ }
8067
+ });
8016
8068
  });
8017
- // Keeps the button's text in step with `value`, or with the element.
8069
+ // Keeps the button's text — and its name — in step with the element.
8018
8070
  effect(() => {
8019
8071
  const ref = this.copyRef();
8020
8072
  if (!ref)
8021
8073
  return;
8022
8074
  this.revision(); // re-read the element whenever its text changed
8023
8075
  const text = this.value() || this.ownText();
8076
+ const label = this.copyLabel();
8024
8077
  untracked(() => {
8025
8078
  ref.setInput('text', text);
8079
+ if (label)
8080
+ ref.setInput('ariaLabel', label);
8026
8081
  ref.changeDetectorRef.detectChanges();
8027
8082
  });
8028
8083
  });
8084
+ this.destroyRef.onDestroy(() => untracked(() => this.copyRef())?.destroy());
8029
8085
  }
8030
8086
  /** What the element says, without the copy button's own content. */
8031
8087
  ownText() {
@@ -8034,7 +8090,7 @@ class StrctCodeInline {
8034
8090
  return clone.textContent?.trim() ?? '';
8035
8091
  }
8036
8092
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctCodeInline, deps: [], target: i0.ɵɵFactoryTarget.Directive });
8037
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.4", type: StrctCodeInline, isStandalone: true, selector: "[strctCode]", inputs: { copyable: { classPropertyName: "copyable", publicName: "copyable", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, wrap: { classPropertyName: "wrap", publicName: "wrap", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.strct-code-inline--copyable": "copyable()", "class.strct-code-inline--wrap": "wrap()" }, classAttribute: "strct-code-inline" }, ngImport: i0 });
8093
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.4", type: StrctCodeInline, isStandalone: true, selector: "[strctCode]", inputs: { copyable: { classPropertyName: "copyable", publicName: "copyable", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, wrap: { classPropertyName: "wrap", publicName: "wrap", isSignal: true, isRequired: false, transformFunction: null }, copyLabel: { classPropertyName: "copyLabel", publicName: "copyLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.strct-code-inline--copyable": "copyable()", "class.strct-code-inline--wrap": "wrap()" }, classAttribute: "strct-code-inline" }, ngImport: i0 });
8038
8094
  }
8039
8095
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctCodeInline, decorators: [{
8040
8096
  type: Directive,
@@ -8046,7 +8102,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
8046
8102
  '[class.strct-code-inline--wrap]': 'wrap()',
8047
8103
  },
8048
8104
  }]
8049
- }], ctorParameters: () => [], propDecorators: { copyable: [{ type: i0.Input, args: [{ isSignal: true, alias: "copyable", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], wrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrap", required: false }] }] } });
8105
+ }], ctorParameters: () => [], propDecorators: { copyable: [{ type: i0.Input, args: [{ isSignal: true, alias: "copyable", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], wrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrap", required: false }] }], copyLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "copyLabel", required: false }] }] } });
8050
8106
 
8051
8107
  /**
8052
8108
  * The standard strip above a data grid: a search field, the active filter
@@ -8275,13 +8331,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
8275
8331
  * 9px above the label's line, because the column centres on a 34px control.
8276
8332
  */
8277
8333
  class StrctFieldValue {
8334
+ /**
8335
+ * What the slot holds. Text (the default) reads on the label's own line; a
8336
+ * `control` — a segmented picker, a small button, a switch with its own box
8337
+ * — is centred where a real control in this column would be, rather than
8338
+ * pushed down by the padding that puts text on the line.
8339
+ */
8340
+ strctFieldValue = input('', /* @ts-ignore */
8341
+ ...(ngDevMode ? [{ debugName: "strctFieldValue" }] : /* istanbul ignore next */ []));
8278
8342
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctFieldValue, deps: [], target: i0.ɵɵFactoryTarget.Directive });
8279
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.4", type: StrctFieldValue, isStandalone: true, selector: "[strctFieldValue]", host: { classAttribute: "strct-field__value" }, ngImport: i0 });
8343
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.4", type: StrctFieldValue, isStandalone: true, selector: "[strctFieldValue]", inputs: { strctFieldValue: { classPropertyName: "strctFieldValue", publicName: "strctFieldValue", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.strct-field__value--control": "strctFieldValue() === 'control'" }, classAttribute: "strct-field__value" }, ngImport: i0 });
8280
8344
  }
8281
8345
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctFieldValue, decorators: [{
8282
8346
  type: Directive,
8283
- args: [{ selector: '[strctFieldValue]', host: { class: 'strct-field__value' } }]
8284
- }] });
8347
+ args: [{
8348
+ selector: '[strctFieldValue]',
8349
+ host: {
8350
+ class: 'strct-field__value',
8351
+ '[class.strct-field__value--control]': "strctFieldValue() === 'control'",
8352
+ },
8353
+ }]
8354
+ }], propDecorators: { strctFieldValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "strctFieldValue", required: false }] }] } });
8285
8355
  /**
8286
8356
  * Wrapper that opts a run of `layout="inline"` fields out of the hairlines
8287
8357
  * between them — for settings that belong together and should read as one
@@ -8479,7 +8549,7 @@ class StrctField {
8479
8549
  } @else if (hint()) {
8480
8550
  <div class="strct-field__msg strct-field__msg--hint" [id]="hintId">{{ hint() }}</div>
8481
8551
  }
8482
- `, isInline: true, styles: [".strct-field{display:flex;flex-direction:column;gap:6px}.strct-field__label{font-size:12px;font-weight:600;color:var(--t2)}.strct-field__req{color:var(--critical);margin-inline-start:2px}.strct-field__control{position:relative;display:flex;flex-direction:column}.strct-field__adorn{position:absolute;top:50%;inset-inline-end:10px;transform:translateY(-50%);display:inline-flex;align-items:center;pointer-events:none}.strct-field__adorn--ok{color:var(--success)}.strct-field__adorn--warning{color:var(--warning)}.strct-field__adorn--error{color:var(--critical)}.strct-field--validating .strct-control{padding-inline-end:32px}.strct-field__msg{font-size:12px;line-height:1.4}.strct-field__msg--hint,.strct-field__msg--checking{color:var(--t3)}.strct-field__msg--ok{color:var(--success)}.strct-field__msg--warning{color:var(--warning)}.strct-field__msg--error{color:var(--critical)}.strct-field__addon{display:none;align-items:center;flex:none;font-size:13px;color:var(--t3)}.strct-field__addon--prefix{order:-1;padding-inline-start:var(--space-3)}.strct-field__addon--suffix{order:1;padding-inline-end:var(--space-3)}.strct-field--prefix .strct-field__addon--prefix,.strct-field--suffix .strct-field__addon--suffix{display:inline-flex}.strct-field__addon:has(.strct-btn){padding:3px}.strct-field--prefix .strct-field__control,.strct-field--suffix .strct-field__control{flex-direction:row;align-items:center;background:var(--bg-2);border:1px solid var(--b2);border-radius:var(--radius-md);transition:border-color .14s ease,box-shadow .14s ease,background .14s ease}.strct-field--prefix .strct-field__control:hover,.strct-field--suffix .strct-field__control:hover{border-color:var(--b3)}.strct-field--prefix .strct-field__control:focus-within,.strct-field--suffix .strct-field__control:focus-within{border-color:var(--acc50);box-shadow:0 0 0 3px var(--acc18);background:var(--bg-1)}.strct-field--invalid.strct-field--prefix .strct-field__control,.strct-field--invalid.strct-field--suffix .strct-field__control{border-color:var(--critical)}.strct-field--prefix .strct-control,.strct-field--suffix .strct-control{flex:1;min-width:0;border:0;background:transparent}.strct-field--prefix .strct-control:focus,.strct-field--prefix .strct-control:focus-visible,.strct-field--suffix .strct-control:focus,.strct-field--suffix .strct-control:focus-visible{box-shadow:none;background:transparent}.strct-field--prefix textarea.strct-control,.strct-field--suffix textarea.strct-control{min-height:0}.strct-field--inline{container-type:inline-size;display:grid;grid-template-columns:var(--strct-field-label-w, 220px) minmax(0,1fr);column-gap:var(--space-3);row-gap:4px;align-items:start}.strct-field--inline>.strct-field__label{grid-column:1;grid-row:1;padding-block-start:9px}.strct-field--inline>.strct-field__control{grid-column:2;grid-row:1}.strct-field--inline>.strct-field__msg{grid-column:2;grid-row:2}.strct-field--inline>.strct-field__msg--hint{grid-column:1;padding-block-end:var(--space-2)}.strct-field__value{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-2);min-height:20px;font-size:var(--text-md);color:var(--t1)}.strct-field--inline .strct-field__value{padding-block-start:9px}.strct-field--inline+.strct-field--inline{border-block-start:1px solid var(--b1);margin-block-start:var(--space-3);padding-block-start:var(--space-3)}.strct-field-group .strct-field--inline+.strct-field--inline{border-block-start:0;padding-block-start:0}@container (max-width: 480px){.strct-field--inline>.strct-field__label,.strct-field--inline>.strct-field__control,.strct-field--inline>.strct-field__msg{grid-column:1 / -1;grid-row:auto}.strct-field--inline>.strct-field__label,.strct-field--inline .strct-field__value{padding-block-start:0}.strct-field--inline>.strct-field__msg--hint{padding-block-end:0}}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "strictName", "size", "strokeWidth", "badge", "ariaLabel", "count", "countMax", "countStatus", "countLabel"] }, { kind: "component", type: StrctSpinner, selector: "strct-spinner", inputs: ["size", "label", "caption"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
8552
+ `, isInline: true, styles: [".strct-field{display:flex;flex-direction:column;gap:6px}.strct-field__label{font-size:12px;font-weight:600;color:var(--t2)}.strct-field__req{color:var(--critical);margin-inline-start:2px}.strct-field__control{position:relative;display:flex;flex-direction:column}.strct-field__adorn{position:absolute;top:50%;inset-inline-end:10px;transform:translateY(-50%);display:inline-flex;align-items:center;pointer-events:none}.strct-field__adorn--ok{color:var(--success)}.strct-field__adorn--warning{color:var(--warning)}.strct-field__adorn--error{color:var(--critical)}.strct-field--validating .strct-control{padding-inline-end:32px}.strct-field__msg{font-size:12px;line-height:1.4}.strct-field__msg--hint,.strct-field__msg--checking{color:var(--t3)}.strct-field__msg--ok{color:var(--success)}.strct-field__msg--warning{color:var(--warning)}.strct-field__msg--error{color:var(--critical)}.strct-field__addon{display:none;align-items:center;flex:none;font-size:13px;color:var(--t3)}.strct-field__addon--prefix{order:-1;padding-inline-start:var(--space-3)}.strct-field__addon--suffix{order:1;padding-inline-end:var(--space-3)}.strct-field--prefix .strct-field__addon--prefix,.strct-field--suffix .strct-field__addon--suffix{display:inline-flex}.strct-field__addon:has(.strct-btn){padding:3px}.strct-field--prefix .strct-field__control,.strct-field--suffix .strct-field__control{flex-direction:row;align-items:center;background:var(--bg-2);border:1px solid var(--b2);border-radius:var(--radius-md);transition:border-color .14s ease,box-shadow .14s ease,background .14s ease}.strct-field--prefix .strct-field__control:hover,.strct-field--suffix .strct-field__control:hover{border-color:var(--b3)}.strct-field--prefix .strct-field__control:focus-within,.strct-field--suffix .strct-field__control:focus-within{border-color:var(--acc50);box-shadow:0 0 0 3px var(--acc18);background:var(--bg-1)}.strct-field--invalid.strct-field--prefix .strct-field__control,.strct-field--invalid.strct-field--suffix .strct-field__control{border-color:var(--critical)}.strct-field--prefix .strct-control,.strct-field--suffix .strct-control{flex:1;min-width:0;border:0;background:transparent}.strct-field--prefix .strct-control:focus,.strct-field--prefix .strct-control:focus-visible,.strct-field--suffix .strct-control:focus,.strct-field--suffix .strct-control:focus-visible{box-shadow:none;background:transparent}.strct-field--prefix textarea.strct-control,.strct-field--suffix textarea.strct-control{min-height:0}.strct-field--inline{container-type:inline-size;display:grid;grid-template-columns:var(--strct-field-label-w, 220px) minmax(0,1fr);column-gap:var(--space-3);row-gap:4px;align-items:start}.strct-field--inline>.strct-field__label{grid-column:1;grid-row:1;padding-block-start:9px}.strct-field--inline>.strct-field__control{grid-column:2;grid-row:1}.strct-field--inline>.strct-field__msg{grid-column:2;grid-row:2}.strct-field--inline>.strct-field__msg--hint{grid-column:1;padding-block-end:var(--space-2)}.strct-field__value{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-2);min-height:20px;font-size:var(--text-md);color:var(--t1)}.strct-field--inline .strct-field__value{padding-block-start:9px}.strct-field--inline .strct-field__value--control{padding-block-start:0;min-height:var(--strct-field-control-h, 34px);align-items:center}.strct-field--inline+.strct-field--inline{border-block-start:1px solid var(--b1);margin-block-start:var(--space-3);padding-block-start:var(--space-3)}.strct-field-group .strct-field--inline+.strct-field--inline{border-block-start:0;padding-block-start:0}@container (max-width: 480px){.strct-field--inline>.strct-field__label,.strct-field--inline>.strct-field__control,.strct-field--inline>.strct-field__msg{grid-column:1 / -1;grid-row:auto}.strct-field--inline>.strct-field__label,.strct-field--inline .strct-field__value{padding-block-start:0}.strct-field--inline .strct-field__value--control{min-height:0}.strct-field--inline>.strct-field__msg--hint{padding-block-end:0}}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "strictName", "size", "strokeWidth", "badge", "ariaLabel", "count", "countMax", "countStatus", "countLabel"] }, { kind: "component", type: StrctSpinner, selector: "strct-spinner", inputs: ["size", "label", "caption"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
8483
8553
  }
8484
8554
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctField, decorators: [{
8485
8555
  type: Component,
@@ -8540,7 +8610,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
8540
8610
  '[class.strct-field--inline]': "layout() === 'inline'",
8541
8611
  '[class.strct-field--prefix]': 'hasPrefix()',
8542
8612
  '[class.strct-field--suffix]': 'hasSuffix()',
8543
- }, styles: [".strct-field{display:flex;flex-direction:column;gap:6px}.strct-field__label{font-size:12px;font-weight:600;color:var(--t2)}.strct-field__req{color:var(--critical);margin-inline-start:2px}.strct-field__control{position:relative;display:flex;flex-direction:column}.strct-field__adorn{position:absolute;top:50%;inset-inline-end:10px;transform:translateY(-50%);display:inline-flex;align-items:center;pointer-events:none}.strct-field__adorn--ok{color:var(--success)}.strct-field__adorn--warning{color:var(--warning)}.strct-field__adorn--error{color:var(--critical)}.strct-field--validating .strct-control{padding-inline-end:32px}.strct-field__msg{font-size:12px;line-height:1.4}.strct-field__msg--hint,.strct-field__msg--checking{color:var(--t3)}.strct-field__msg--ok{color:var(--success)}.strct-field__msg--warning{color:var(--warning)}.strct-field__msg--error{color:var(--critical)}.strct-field__addon{display:none;align-items:center;flex:none;font-size:13px;color:var(--t3)}.strct-field__addon--prefix{order:-1;padding-inline-start:var(--space-3)}.strct-field__addon--suffix{order:1;padding-inline-end:var(--space-3)}.strct-field--prefix .strct-field__addon--prefix,.strct-field--suffix .strct-field__addon--suffix{display:inline-flex}.strct-field__addon:has(.strct-btn){padding:3px}.strct-field--prefix .strct-field__control,.strct-field--suffix .strct-field__control{flex-direction:row;align-items:center;background:var(--bg-2);border:1px solid var(--b2);border-radius:var(--radius-md);transition:border-color .14s ease,box-shadow .14s ease,background .14s ease}.strct-field--prefix .strct-field__control:hover,.strct-field--suffix .strct-field__control:hover{border-color:var(--b3)}.strct-field--prefix .strct-field__control:focus-within,.strct-field--suffix .strct-field__control:focus-within{border-color:var(--acc50);box-shadow:0 0 0 3px var(--acc18);background:var(--bg-1)}.strct-field--invalid.strct-field--prefix .strct-field__control,.strct-field--invalid.strct-field--suffix .strct-field__control{border-color:var(--critical)}.strct-field--prefix .strct-control,.strct-field--suffix .strct-control{flex:1;min-width:0;border:0;background:transparent}.strct-field--prefix .strct-control:focus,.strct-field--prefix .strct-control:focus-visible,.strct-field--suffix .strct-control:focus,.strct-field--suffix .strct-control:focus-visible{box-shadow:none;background:transparent}.strct-field--prefix textarea.strct-control,.strct-field--suffix textarea.strct-control{min-height:0}.strct-field--inline{container-type:inline-size;display:grid;grid-template-columns:var(--strct-field-label-w, 220px) minmax(0,1fr);column-gap:var(--space-3);row-gap:4px;align-items:start}.strct-field--inline>.strct-field__label{grid-column:1;grid-row:1;padding-block-start:9px}.strct-field--inline>.strct-field__control{grid-column:2;grid-row:1}.strct-field--inline>.strct-field__msg{grid-column:2;grid-row:2}.strct-field--inline>.strct-field__msg--hint{grid-column:1;padding-block-end:var(--space-2)}.strct-field__value{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-2);min-height:20px;font-size:var(--text-md);color:var(--t1)}.strct-field--inline .strct-field__value{padding-block-start:9px}.strct-field--inline+.strct-field--inline{border-block-start:1px solid var(--b1);margin-block-start:var(--space-3);padding-block-start:var(--space-3)}.strct-field-group .strct-field--inline+.strct-field--inline{border-block-start:0;padding-block-start:0}@container (max-width: 480px){.strct-field--inline>.strct-field__label,.strct-field--inline>.strct-field__control,.strct-field--inline>.strct-field__msg{grid-column:1 / -1;grid-row:auto}.strct-field--inline>.strct-field__label,.strct-field--inline .strct-field__value{padding-block-start:0}.strct-field--inline>.strct-field__msg--hint{padding-block-end:0}}\n"] }]
8613
+ }, styles: [".strct-field{display:flex;flex-direction:column;gap:6px}.strct-field__label{font-size:12px;font-weight:600;color:var(--t2)}.strct-field__req{color:var(--critical);margin-inline-start:2px}.strct-field__control{position:relative;display:flex;flex-direction:column}.strct-field__adorn{position:absolute;top:50%;inset-inline-end:10px;transform:translateY(-50%);display:inline-flex;align-items:center;pointer-events:none}.strct-field__adorn--ok{color:var(--success)}.strct-field__adorn--warning{color:var(--warning)}.strct-field__adorn--error{color:var(--critical)}.strct-field--validating .strct-control{padding-inline-end:32px}.strct-field__msg{font-size:12px;line-height:1.4}.strct-field__msg--hint,.strct-field__msg--checking{color:var(--t3)}.strct-field__msg--ok{color:var(--success)}.strct-field__msg--warning{color:var(--warning)}.strct-field__msg--error{color:var(--critical)}.strct-field__addon{display:none;align-items:center;flex:none;font-size:13px;color:var(--t3)}.strct-field__addon--prefix{order:-1;padding-inline-start:var(--space-3)}.strct-field__addon--suffix{order:1;padding-inline-end:var(--space-3)}.strct-field--prefix .strct-field__addon--prefix,.strct-field--suffix .strct-field__addon--suffix{display:inline-flex}.strct-field__addon:has(.strct-btn){padding:3px}.strct-field--prefix .strct-field__control,.strct-field--suffix .strct-field__control{flex-direction:row;align-items:center;background:var(--bg-2);border:1px solid var(--b2);border-radius:var(--radius-md);transition:border-color .14s ease,box-shadow .14s ease,background .14s ease}.strct-field--prefix .strct-field__control:hover,.strct-field--suffix .strct-field__control:hover{border-color:var(--b3)}.strct-field--prefix .strct-field__control:focus-within,.strct-field--suffix .strct-field__control:focus-within{border-color:var(--acc50);box-shadow:0 0 0 3px var(--acc18);background:var(--bg-1)}.strct-field--invalid.strct-field--prefix .strct-field__control,.strct-field--invalid.strct-field--suffix .strct-field__control{border-color:var(--critical)}.strct-field--prefix .strct-control,.strct-field--suffix .strct-control{flex:1;min-width:0;border:0;background:transparent}.strct-field--prefix .strct-control:focus,.strct-field--prefix .strct-control:focus-visible,.strct-field--suffix .strct-control:focus,.strct-field--suffix .strct-control:focus-visible{box-shadow:none;background:transparent}.strct-field--prefix textarea.strct-control,.strct-field--suffix textarea.strct-control{min-height:0}.strct-field--inline{container-type:inline-size;display:grid;grid-template-columns:var(--strct-field-label-w, 220px) minmax(0,1fr);column-gap:var(--space-3);row-gap:4px;align-items:start}.strct-field--inline>.strct-field__label{grid-column:1;grid-row:1;padding-block-start:9px}.strct-field--inline>.strct-field__control{grid-column:2;grid-row:1}.strct-field--inline>.strct-field__msg{grid-column:2;grid-row:2}.strct-field--inline>.strct-field__msg--hint{grid-column:1;padding-block-end:var(--space-2)}.strct-field__value{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-2);min-height:20px;font-size:var(--text-md);color:var(--t1)}.strct-field--inline .strct-field__value{padding-block-start:9px}.strct-field--inline .strct-field__value--control{padding-block-start:0;min-height:var(--strct-field-control-h, 34px);align-items:center}.strct-field--inline+.strct-field--inline{border-block-start:1px solid var(--b1);margin-block-start:var(--space-3);padding-block-start:var(--space-3)}.strct-field-group .strct-field--inline+.strct-field--inline{border-block-start:0;padding-block-start:0}@container (max-width: 480px){.strct-field--inline>.strct-field__label,.strct-field--inline>.strct-field__control,.strct-field--inline>.strct-field__msg{grid-column:1 / -1;grid-row:auto}.strct-field--inline>.strct-field__label,.strct-field--inline .strct-field__value{padding-block-start:0}.strct-field--inline .strct-field__value--control{min-height:0}.strct-field--inline>.strct-field__msg--hint{padding-block-end:0}}\n"] }]
8544
8614
  }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], validationState: [{ type: i0.Input, args: [{ isSignal: true, alias: "validationState", required: false }] }], hintTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StrctFieldHint), { ...{ read: TemplateRef }, isSignal: true }] }], hasPrefix: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StrctFieldPrefix), { isSignal: true }] }], hasSuffix: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StrctFieldSuffix), { isSignal: true }] }] } });
8545
8615
 
8546
8616
  /**
@@ -8755,6 +8825,9 @@ class StrctToggle {
8755
8825
  */
8756
8826
  description = input('', /* @ts-ignore */
8757
8827
  ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
8828
+ /** The switch's accessible name, where no visible label gives it one. */
8829
+ ariaLabel = input(null, /* @ts-ignore */
8830
+ ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
8758
8831
  n = ++toggleCounter;
8759
8832
  descId = `strct-tg-desc-${this.n}`;
8760
8833
  labelId = `strct-tg-label-${this.n}`;
@@ -8788,7 +8861,7 @@ class StrctToggle {
8788
8861
  this.cvaDisabled.set(isDisabled);
8789
8862
  }
8790
8863
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctToggle, deps: [], target: i0.ɵɵFactoryTarget.Component });
8791
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctToggle, isStandalone: true, selector: "strct-toggle", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
8864
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctToggle, isStandalone: true, selector: "strct-toggle", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
8792
8865
  { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => StrctToggle), multi: true },
8793
8866
  ], queries: [{ propertyName: "projected", first: true, predicate: StrctControlDescription, descendants: true, isSignal: true }], ngImport: i0, template: `
8794
8867
  <label
@@ -8802,6 +8875,7 @@ class StrctToggle {
8802
8875
  role="switch"
8803
8876
  [checked]="checked()"
8804
8877
  [disabled]="isDisabled()"
8878
+ [attr.aria-label]="ariaLabel()"
8805
8879
  [attr.aria-labelledby]="labelledBy()"
8806
8880
  [attr.aria-describedby]="describedBy()"
8807
8881
  (change)="onToggle($event)"
@@ -8838,6 +8912,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
8838
8912
  role="switch"
8839
8913
  [checked]="checked()"
8840
8914
  [disabled]="isDisabled()"
8915
+ [attr.aria-label]="ariaLabel()"
8841
8916
  [attr.aria-labelledby]="labelledBy()"
8842
8917
  [attr.aria-describedby]="describedBy()"
8843
8918
  (change)="onToggle($event)"
@@ -8857,7 +8932,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
8857
8932
  </span>
8858
8933
  </label>
8859
8934
  `, styles: [".strct-tg{display:inline-flex;align-items:center;gap:9px;cursor:pointer;font-size:13px;color:var(--t1);-webkit-user-select:none;user-select:none}.strct-tg--disabled{opacity:.5;cursor:not-allowed}.strct-tg__native{position:absolute;opacity:0;width:0;height:0}.strct-tg__track{position:relative;width:34px;height:19px;border-radius:11px;flex-shrink:0;background:var(--bg-3);border:1px solid var(--b3);transition:background .16s ease,border-color .16s ease}.strct-tg__thumb{position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:50%;background:var(--t2);transition:transform .16s ease,background .16s ease}.strct-tg__native:checked+.strct-tg__track{background:var(--acc);border-color:transparent}.strct-tg__native:checked+.strct-tg__track .strct-tg__thumb{transform:translate(15px);background:var(--inv)}:host-context([dir=\"rtl\"]) .strct-tg__native:checked+.strct-tg__track .strct-tg__thumb{transform:translate(-15px)}.strct-tg__native:focus-visible+.strct-tg__track{box-shadow:0 0 0 3px var(--acc18)}.strct-tg__text{display:flex;flex-direction:column;gap:1px;min-width:0}.strct-tg__desc{font-size:var(--text-sm);line-height:1.4;color:var(--t3)}.strct-tg__desc--projected{order:1}.strct-tg--described{align-items:flex-start}.strct-tg--described .strct-tg__track{margin-block-start:1px}\n"] }]
8860
- }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], projected: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StrctControlDescription), { isSignal: true }] }] } });
8935
+ }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], projected: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StrctControlDescription), { isSignal: true }] }] } });
8861
8936
 
8862
8937
  let groupCounter = 0;
8863
8938
  let radioCounter = 0;
@@ -11211,6 +11286,13 @@ class StrctSelect {
11211
11286
  /** Muted text shown while no value is selected (localizable). */
11212
11287
  placeholder = input('Select…', /* @ts-ignore */
11213
11288
  ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
11289
+ /**
11290
+ * The control's accessible name, where it is not inside a `strct-field`.
11291
+ * ARIA does not let a `combobox` take its name from its content, so a bare
11292
+ * select — a filter above a list, a cell editor — has none without this.
11293
+ */
11294
+ ariaLabel = input(null, /* @ts-ignore */
11295
+ ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
11214
11296
  /** Accessible name of the listbox (localizable). */
11215
11297
  listLabel = input('', /* @ts-ignore */
11216
11298
  ...(ngDevMode ? [{ debugName: "listLabel" }] : /* istanbul ignore next */ []));
@@ -11402,7 +11484,7 @@ class StrctSelect {
11402
11484
  this.isDisabled.set(isDisabled);
11403
11485
  }
11404
11486
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
11405
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctSelect, isStandalone: true, selector: "strct-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, listLabel: { classPropertyName: "listLabel", publicName: "listLabel", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:click": "onDocClick($event)" }, classAttribute: "strct-sel" }, providers: [
11487
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctSelect, isStandalone: true, selector: "strct-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, listLabel: { classPropertyName: "listLabel", publicName: "listLabel", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:click": "onDocClick($event)" }, classAttribute: "strct-sel" }, providers: [
11406
11488
  { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => StrctSelect), multi: true },
11407
11489
  ], ngImport: i0, template: `
11408
11490
  <button
@@ -11412,6 +11494,7 @@ class StrctSelect {
11412
11494
  class="strct-control strct-sel__btn"
11413
11495
  role="combobox"
11414
11496
  aria-haspopup="listbox"
11497
+ [attr.aria-label]="ariaLabel() || null"
11415
11498
  [attr.aria-expanded]="open()"
11416
11499
  [attr.aria-controls]="open() ? listId : null"
11417
11500
  [attr.aria-activedescendant]="open() ? listId + '-' + activeIndex() : null"
@@ -11474,6 +11557,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
11474
11557
  class="strct-control strct-sel__btn"
11475
11558
  role="combobox"
11476
11559
  aria-haspopup="listbox"
11560
+ [attr.aria-label]="ariaLabel() || null"
11477
11561
  [attr.aria-expanded]="open()"
11478
11562
  [attr.aria-controls]="open() ? listId : null"
11479
11563
  [attr.aria-activedescendant]="open() ? listId + '-' + activeIndex() : null"
@@ -11523,7 +11607,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
11523
11607
  </div>
11524
11608
  }
11525
11609
  `, host: { class: 'strct-sel' }, styles: [".strct-sel{position:relative;display:block;width:100%}.strct-sel__btn{display:flex;align-items:center;gap:8px;text-align:start;cursor:pointer}.strct-sel__btn:disabled{cursor:not-allowed}.strct-sel__value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.strct-sel__value--placeholder{color:var(--t3)}.strct-sel__caret{flex:none;color:var(--t3)}.strct-sel__list{z-index:var(--z-dropdown);max-height:240px;overflow-y:auto;padding:4px;background:var(--bg-1);border:1px solid var(--b2);border-radius:7px;box-shadow:var(--shh)}.strct-sel__opt{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:5px;cursor:pointer;font-size:13px;color:var(--t1)}.strct-sel__opt--highlight{background:var(--bg-3)}.strct-sel__opt--selected{font-weight:600;background:var(--acc-s)}.strct-sel__opt--selected.strct-sel__opt--highlight{background:var(--acc-m)}.strct-sel__opt[aria-disabled=true]{color:var(--t4);cursor:default}.strct-sel__check{display:inline-flex;width:14px;flex:none;color:var(--acc)}.strct-sel__empty{padding:9px 10px;font-size:13px;color:var(--t3)}\n"] }]
11526
- }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], listLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "listLabel", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }], onDocClick: [{
11610
+ }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], listLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "listLabel", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }], onDocClick: [{
11527
11611
  type: HostListener,
11528
11612
  args: ['document:click', ['$event']]
11529
11613
  }] } });
@@ -13469,6 +13553,9 @@ const DG_LABELS = {
13469
13553
  clearFilter: 'Clear filter',
13470
13554
  editCell: 'Edit',
13471
13555
  editCellInstructions: 'Editable cell. Press Enter or F2 to edit, arrow keys to move.',
13556
+ detailColumn: 'Open detail',
13557
+ expandColumn: 'Expand row',
13558
+ selectColumn: 'Select row',
13472
13559
  toggleChildren: 'Toggle children',
13473
13560
  quickFilter: 'Quick filter',
13474
13561
  };
@@ -14230,6 +14317,11 @@ class StrctDatagrid {
14230
14317
  if (cell)
14231
14318
  setTimeout(() => cell.focus());
14232
14319
  }
14320
+ /** A column's choices, asked per row when the column gives a function. */
14321
+ editorOptionsFor(row, col) {
14322
+ const opts = col.editorOptions;
14323
+ return typeof opts === 'function' ? opts(row) : (opts ?? []);
14324
+ }
14233
14325
  startEdit(row, col) {
14234
14326
  this.editing.set({ rowKey: this.rowKey(row), colKey: col.key });
14235
14327
  this.editDraft.set(row[col.key]);
@@ -14263,7 +14355,8 @@ class StrctDatagrid {
14263
14355
  const raw = row[col.key];
14264
14356
  if (col.editor !== 'select')
14265
14357
  return raw;
14266
- return col.editorOptions?.find((o) => o.value === raw)?.label ?? raw;
14358
+ // Per-row options: this row's own choices decide what its value reads as.
14359
+ return this.editorOptionsFor(row, col).find((o) => o.value === raw)?.label ?? raw;
14267
14360
  }
14268
14361
  /** Close the editor and emit `cellEdit` when the value actually changed. */
14269
14362
  commitValue(row, col, raw) {
@@ -14457,7 +14550,10 @@ class StrctDatagrid {
14457
14550
  this.pageSize() > 0 ||
14458
14551
  this.virtual() ||
14459
14552
  this.columnChooser() ||
14460
- this.sync()), /* @ts-ignore */
14553
+ this.sync() ||
14554
+ // "3 selected" is something to say, and a grid with no pager had
14555
+ // nowhere to say it: two member pickers went `virtual` for the count.
14556
+ (this.mode() !== 'single' && this.selectedCount() > 0)), /* @ts-ignore */
14461
14557
  ...(ngDevMode ? [{ debugName: "showFooter" }] : /* istanbul ignore next */ []));
14462
14558
  /** Full count for the pager / footer (server total in lazy mode). */
14463
14559
  totalCount = computed(() => this.lazy() ? (this.total() ?? this.rows().length) : this.sorted().length, /* @ts-ignore */
@@ -14737,6 +14833,12 @@ class StrctDatagrid {
14737
14833
  const rows = this.rows();
14738
14834
  if (this.lazy())
14739
14835
  return;
14836
+ // An empty array proves nothing was deleted: a poll that replaces the
14837
+ // rows, a reload that blanks them and a grid still loading all look the
14838
+ // same from here, and wiping the pick on one of those is the bug this
14839
+ // guard exists for. A genuinely emptied grid is the consumer's to clear.
14840
+ if (!rows.length || this.loading())
14841
+ return;
14740
14842
  untracked(() => {
14741
14843
  const selected = this.selected();
14742
14844
  if (!selected.size)
@@ -14781,6 +14883,17 @@ class StrctDatagrid {
14781
14883
  if (this.mode() !== 'single')
14782
14884
  return;
14783
14885
  const id = this.selectedId();
14886
+ // `selectedId` is a model, so its null is two things: "the consumer does
14887
+ // not drive it" and "the consumer cleared the pick". Until it has once
14888
+ // been non-null it is the former — otherwise the first run wipes what
14889
+ // `initialSelection` seeded, which is how a 4.x grid picks its row.
14890
+ if (id == null && !this.selectedIdDriven)
14891
+ return;
14892
+ if (id != null)
14893
+ this.selectedIdDriven = true;
14894
+ // Read the rows as well: a pick whose row leaves and comes back must be
14895
+ // checked again, and `selectedId` itself never changed to say so.
14896
+ this.rows();
14784
14897
  untracked(() => {
14785
14898
  const next = id == null ? new Set() : new Set([id]);
14786
14899
  const current = this.selected();
@@ -15128,6 +15241,8 @@ class StrctDatagrid {
15128
15241
  this.rangeAnchor = null;
15129
15242
  this.commitSelection(new Set());
15130
15243
  }
15244
+ /** Whether `selectedId` has ever been given a value — see the effect. */
15245
+ selectedIdDriven = false;
15131
15246
  /** Last known row object per selected id — selections made on one page stay
15132
15247
  * in the payload when the data set no longer contains them (lazy paging),
15133
15248
  * so `selectionChange` and `selectedCount` never disagree. */
@@ -15198,7 +15313,7 @@ class StrctDatagrid {
15198
15313
  containing block is the page extends the document's scrollable area
15199
15314
  from wherever the grid happens to sit. 1x1 and clipped is enough. -->
15200
15315
  <span
15201
- class="strct-dg__hint"
15316
+ class="strct-sr-only"
15202
15317
  style="display: inline-block; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap"
15203
15318
  [id]="editHintId"
15204
15319
  >{{ L().editCellInstructions }}</span
@@ -15228,23 +15343,34 @@ class StrctDatagrid {
15228
15343
  }
15229
15344
  <thead>
15230
15345
  <tr>
15346
+ <!-- A utility column is still a column: axe reports every empty
15347
+ header, and a screen-reader user hears nothing where the
15348
+ detail, expand and select controls are. The name is hidden,
15349
+ not absent. -->
15231
15350
  @if (canDetail()) {
15232
15351
  <th
15233
15352
  class="strct-dg__expandcol"
15353
+ scope="col"
15234
15354
  [class.strct-dg__cell--sticky]="stickyActive()"
15235
15355
  [style.insetInlineStart.px]="utilLeft('detail')"
15236
- ></th>
15356
+ >
15357
+ <span class="strct-sr-only">{{ L().detailColumn }}</span>
15358
+ </th>
15237
15359
  }
15238
15360
  @if (canExpand()) {
15239
15361
  <th
15240
15362
  class="strct-dg__expandcol"
15363
+ scope="col"
15241
15364
  [class.strct-dg__cell--sticky]="stickyActive()"
15242
15365
  [style.insetInlineStart.px]="utilLeft('expand')"
15243
- ></th>
15366
+ >
15367
+ <span class="strct-sr-only">{{ L().expandColumn }}</span>
15368
+ </th>
15244
15369
  }
15245
15370
  @if (hasSelectionColumn()) {
15246
15371
  <th
15247
15372
  class="strct-dg__sel"
15373
+ scope="col"
15248
15374
  [class.strct-dg__cell--sticky]="stickyActive()"
15249
15375
  [style.insetInlineStart.px]="utilLeft('sel')"
15250
15376
  >
@@ -15255,11 +15381,14 @@ class StrctDatagrid {
15255
15381
  [indeterminate]="somePageSelected()"
15256
15382
  (checkedChange)="toggleAll()"
15257
15383
  />
15384
+ } @else {
15385
+ <span class="strct-sr-only">{{ L().selectColumn }}</span>
15258
15386
  }
15259
15387
  </th>
15260
15388
  }
15261
15389
  @for (col of visibleColumns(); track col.key) {
15262
15390
  <th
15391
+ scope="col"
15263
15392
  [style.text-align]="col.align ?? (col.numeric ? 'end' : 'start')"
15264
15393
  [style.width]="colWidth(col.key) ?? col.width ?? null"
15265
15394
  [class.strct-dg__th--sortable]="col.sortable"
@@ -15354,7 +15483,7 @@ class StrctDatagrid {
15354
15483
  </th>
15355
15484
  }
15356
15485
  @if (canActions()) {
15357
- <th class="strct-dg__actioncol" [attr.aria-label]="L().actions"></th>
15486
+ <th class="strct-dg__actioncol" scope="col" [attr.aria-label]="L().actions"></th>
15358
15487
  }
15359
15488
  </tr>
15360
15489
  </thead>
@@ -15567,7 +15696,7 @@ class StrctDatagrid {
15567
15696
  confirm with Enter once an option is picked. -->
15568
15697
  <strct-select
15569
15698
  class="strct-dg__editselect"
15570
- [options]="col.editorOptions ?? []"
15699
+ [options]="editorOptionsFor(row, col)"
15571
15700
  [listLabel]="L().editCell + ': ' + col.label"
15572
15701
  [ngModel]="row[col.key]"
15573
15702
  (ngModelChange)="commitValue(row, col, $event)"
@@ -15578,6 +15707,7 @@ class StrctDatagrid {
15578
15707
  @case ('number') {
15579
15708
  <strct-number
15580
15709
  class="strct-dg__editnumber"
15710
+ [ariaLabel]="L().editCell + ': ' + col.label"
15581
15711
  [min]="col.editorMin ?? null"
15582
15712
  [max]="col.editorMax ?? null"
15583
15713
  [step]="col.editorStep ?? 1"
@@ -15791,7 +15921,7 @@ class StrctDatagrid {
15791
15921
  </div>
15792
15922
  </div>
15793
15923
  }
15794
- `, isInline: true, styles: [".strct-dg__radio{width:15px;height:15px;accent-color:var(--acc);cursor:pointer}.strct-dg__radio:disabled{cursor:not-allowed}.strct-dg__row--locked .strct-dg__sel{opacity:.55}.strct-dg__actioncaption:empty{display:none}.strct-dg__actioncaption{display:inline-flex;align-items:center;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-sm);color:var(--t3)}.strct-dg-host{display:block;border:1px solid var(--b2);border-radius:var(--radius-lg);background:var(--bg-2);box-shadow:var(--shadow-rest)}.strct-dg-host--flush{border:0;border-radius:0;background:transparent;box-shadow:none}.strct-dg__more strct-spinner{margin-inline-end:4px}.strct-dg__caption{caption-side:top;text-align:start;padding:var(--space-2) var(--space-3);font-size:var(--text-sm);font-weight:600;color:var(--t2)}.strct-dg td.strct-dg__cell--mono{font-family:var(--mono);font-size:var(--text-sm)}.strct-dg td.strct-dg__cell--muted{color:var(--t3)}.strct-dg td.strct-dg__cell--numeric{font-variant-numeric:tabular-nums}.strct-dg__empty{color:var(--t3)}.strct-dg__celldesc{display:block;font-size:var(--text-sm);color:var(--t3);line-height:1.3}.strct-dg__scroll{flex:1 1 auto;min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch}.strct-dg-host--virtual .strct-dg__scroll,.strct-dg-host--bounded .strct-dg__scroll{overflow-y:auto}.strct-dg-host--virtual .strct-dg thead th,.strct-dg-host--bounded .strct-dg thead th{position:sticky;top:0;z-index:var(--z-raised)}.strct-dg__vspacer td{padding:0;border:0;background:transparent}.strct-dg th[draggable]{cursor:grab}.strct-dg__th--drop{box-shadow:inset 3px 0 0 var(--acc)}.strct-dg__grouprow td{background:var(--bg-2)!important;padding:0}.strct-dg__groupbtn{display:flex;align-items:center;gap:8px;width:100%;padding:7px 13px;border:0;background:transparent;color:var(--t1);font-family:var(--font);font-size:12.5px;font-weight:600;cursor:pointer;text-align:start}.strct-dg__groupbtn:hover{background:var(--bg-3)}.strct-dg__groupbtn:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-dg__groupchev{display:inline-flex;color:var(--t3);transition:transform .15s ease}.strct-dg__groupchev--open{transform:rotate(90deg)}@media(prefers-reduced-motion:reduce){.strct-dg__groupchev{transition:none}}.strct-dg__groupcount{min-width:18px;height:18px;padding:0 5px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;border-radius:9px;background:var(--acc-m);color:var(--acc);font-variant-numeric:tabular-nums}.strct-dg-host--sticky .strct-dg,.strct-dg-host--virtual .strct-dg,.strct-dg-host--bounded .strct-dg{border-collapse:separate;border-spacing:0;overflow:visible;border-radius:0}.strct-dg-host--sticky .strct-dg{width:max-content;min-width:100%}.strct-dg .strct-dg__cell--sticky{position:sticky;z-index:calc(var(--z-base) + 2)}.strct-dg thead th.strct-dg__cell--sticky{z-index:calc(var(--z-raised) + 1)}.strct-dg .strct-dg__cell--sticky-last:after{content:\"\";position:absolute;top:0;bottom:0;inset-inline-end:-1px;width:7px;pointer-events:none;background:linear-gradient(to right,rgba(0,0,0,.14),transparent)}[dir=rtl] .strct-dg .strct-dg__cell--sticky-last:after{background:linear-gradient(to left,rgba(0,0,0,.14),transparent)}.strct-dg-host--sticky .strct-dg__expandcol,.strct-dg-host--sticky .strct-dg__expandcell{width:36px;min-width:36px;max-width:36px;box-sizing:border-box}.strct-dg-host--sticky .strct-dg__sel{width:40px;min-width:40px;max-width:40px;box-sizing:border-box}.strct-dg-host--sticky tbody .strct-dg__cell--sticky{background:var(--bg-1)}[data-theme=dark] .strct-dg-host--sticky tbody .strct-dg__cell--sticky{background:var(--bg-3)}.strct-dg-host--sticky tbody tr:hover .strct-dg__cell--sticky{background:linear-gradient(var(--acc-s),var(--acc-s)) var(--bg-1)}[data-theme=dark] .strct-dg-host--sticky tbody tr:hover .strct-dg__cell--sticky{background:linear-gradient(var(--acc-s),var(--acc-s)) var(--bg-3)}.strct-dg-host--sticky tbody .strct-dg__row--selected .strct-dg__cell--sticky{background:linear-gradient(var(--acc-m),var(--acc-m)) var(--bg-1)}[data-theme=dark] .strct-dg-host--sticky tbody .strct-dg__row--selected .strct-dg__cell--sticky{background:linear-gradient(var(--acc-m),var(--acc-m)) var(--bg-3)}.strct-dg{width:100%;border-collapse:collapse;font-size:13px;overflow:hidden;background:var(--bg-2)}.strct-dg-host:not(:has(.strct-dg__toolbar)) .strct-dg{border-start-start-radius:9px;border-start-end-radius:9px}.strct-dg-host:not(:has(.strct-dg__foot)) .strct-dg{border-end-start-radius:9px;border-end-end-radius:9px}.strct-dg th,.strct-dg td{padding:9px 13px;text-align:start;border-bottom:1px solid var(--b1)}.strct-dg tbody td{background:var(--bg-1)}[data-theme=dark] .strct-dg tbody td{background:var(--bg-3)}.strct-dg-host--compact .strct-dg th,.strct-dg-host--compact .strct-dg td{padding:5px 11px}.strct-dg-host--singleline .strct-dg tbody tr:not(.strct-dg__detailrow)>td{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:360px}.strct-dg th{position:relative;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--t2);background:var(--bg-2);white-space:nowrap;-webkit-user-select:none;user-select:none}.strct-dg__th--sortable{cursor:pointer}.strct-dg__th--sortable:hover{color:var(--t1)}.strct-dg__th--sortable:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-dg__hd{display:inline-flex;align-items:center;gap:5px}.strct-dg__sorticon{color:var(--t3)}.strct-dg__th--sortable:hover .strct-dg__sorticon{color:var(--acc)}.strct-dg__resize{position:absolute;inset-inline-end:0;top:0;bottom:0;width:4px;cursor:col-resize;background:transparent;z-index:calc(var(--z-base) + 1)}.strct-dg__resize:hover{background:var(--acc)}.strct-dg td{color:var(--t1)}.strct-dg tbody tr:last-child td{border-bottom:0}.strct-dg tbody tr:not(.strct-dg__detailrow):hover td{background:var(--acc-s)}.strct-dg__row--selected td{background:var(--acc-m)}.strct-dg__sel{width:1%;white-space:nowrap}.strct-dg__sel input{accent-color:var(--acc);width:15px;height:15px;cursor:pointer}.strct-dg__expandcol,.strct-dg__expandcell{width:1%;white-space:nowrap}.strct-dg__actioncol,.strct-dg__actioncell{width:1%;white-space:nowrap;text-align:end}.strct-dg__kebab{display:inline-flex;padding:4px;border:0;border-radius:5px;background:transparent;color:var(--t3);cursor:pointer;transition:color .14s ease,background .14s ease}.strct-dg__kebab:hover{color:var(--t1);background:var(--bg-3)}.strct-dg__expandbtn{display:inline-flex;padding:3px;border:0;border-radius:4px;background:transparent;color:var(--t3);cursor:pointer;transition:transform .15s ease,color .15s ease}.strct-dg__expandbtn:hover{color:var(--t1);background:var(--bg-3)}.strct-dg__expandbtn--open{transform:rotate(90deg);color:var(--acc)}.strct-dg__detailbtn{display:inline-flex;padding:3px;border:0;border-radius:4px;background:transparent;color:var(--t3);cursor:pointer;transition:color .14s ease,background .14s ease}.strct-dg__detailbtn:hover{color:var(--acc);background:var(--bg-3)}.strct-dg__detailbtn--active{color:var(--acc);background:var(--acc-m)}.strct-dg__detailrow td{background:var(--bg-2);padding:0}.strct-dg__detail{padding:14px 16px;font-size:13px;color:var(--t2)}.strct-dg__layout{display:flex;align-items:flex-start;min-width:0}.strct-dg__layout--paned{gap:0}.strct-dg__layout--paned .strct-dg__scroll{flex:0 0 auto;width:260px;min-width:260px;max-width:260px}.strct-dg__layout--paned .strct-dg{width:260px;min-width:260px;max-width:260px;flex-shrink:0;border-start-end-radius:0;border-end-end-radius:0}.strct-dg__row--clickable{cursor:pointer}.strct-dg__row--active td{background:var(--acc-m)}.strct-dg__layout--paned .strct-dg__row--active td:last-child{position:relative;padding-inline-end:26px}.strct-dg__layout--paned .strct-dg__row--active td:last-child:after{content:\"\";position:absolute;inset-inline-end:11px;top:50%;width:6px;height:6px;border-top:1.6px solid var(--acc);border-inline-end:1.6px solid var(--acc);transform:translateY(-50%) rotate(45deg)}.strct-dg__pane{flex:1;min-width:0;align-self:stretch;background:var(--bg-1);border:1px solid var(--b2);border-inline-start:2px solid var(--acc);border-radius:8px;border-start-start-radius:0;border-end-start-radius:0;overflow:hidden;animation:strct-dg-pane-in .14s ease}.strct-dg__pane-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 14px;border-bottom:1px solid var(--b1);font-size:13px;font-weight:600;color:var(--t1)}.strct-dg__pane-close{display:inline-flex;padding:3px;border:0;border-radius:4px;background:transparent;color:var(--t3);cursor:pointer}.strct-dg__pane-close:hover{color:var(--t1);background:var(--bg-3)}.strct-dg__pane-body{padding:14px 16px;font-size:13px;color:var(--t2)}@keyframes strct-dg-pane-in{0%{opacity:0;transform:translate(8px)}}@keyframes strct-skeleton-pulse{0%,to{opacity:.4}50%{opacity:.7}}.strct-dg__skeleton-block{height:12px;border-radius:var(--radius-sm);background:linear-gradient(90deg,var(--bg-3) 25%,var(--skeleton-hi, var(--acc18)) 50%,var(--bg-3) 75%);background-size:200% 100%;animation:strct-dg-skeleton-sweep 1.1s linear infinite}@keyframes strct-dg-skeleton-sweep{0%{background-position:100% 0}to{background-position:-100% 0}}@media(prefers-reduced-motion:reduce){.strct-dg__skeleton-block{animation:none;background:var(--skeleton-hi, var(--acc18))}}.strct-dg__skeleton-row td{border-bottom:1px solid var(--b1)}.strct-dg__empty{text-align:center;color:var(--t3);padding:22px}.strct-dg__quickfilter{min-width:180px;max-width:260px}.strct-dg__quickfilter--end{order:2;margin-inline-start:auto}.strct-dg__filternote--end{order:3}.strct-dg__filternote{font-size:11.5px;color:var(--t3);font-variant-numeric:tabular-nums;white-space:nowrap}.strct-dg__toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:9px 14px;border-bottom:1px solid var(--b2)}.strct-dg__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 14px;border-top:1px solid var(--b2);flex-wrap:wrap}.strct-dg__foot-left,.strct-dg__foot-right{display:flex;align-items:center;gap:12px}.strct-dg__actions{position:relative}.strct-dg__chooser-menu{position:absolute;bottom:calc(100% + 6px);inset-inline-start:0;z-index:var(--z-sticky);min-width:180px;background:var(--bg-1);border:1px solid var(--b2);border-radius:8px;box-shadow:var(--shadow-pop);padding:6px;display:flex;flex-direction:column;gap:2px}.strct-dg__chooser-menu--right{inset-inline-start:auto;inset-inline-end:0}.strct-dg__chooser-item{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:6px;cursor:pointer;font-size:12px;color:var(--t1);transition:background .1s ease;-webkit-user-select:none;user-select:none}.strct-dg__chooser-item:hover{background:var(--bg-3)}.strct-dg__count{font-size:12px;color:var(--t2)}.strct-dg__count-sep{margin:0 8px;color:var(--b2)}.strct-dg__count-sel{color:var(--acc)}.strct-dg__filterbtn{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin-inline-start:2px;padding:0;border:0;border-radius:4px;background:transparent;color:var(--t3);cursor:pointer;vertical-align:middle}.strct-dg__filterbtn:hover{color:var(--t1);background:var(--bg-3)}.strct-dg__filterbtn--active{color:var(--acc)}.strct-dg__filterbtn:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}.strct-dg__filterpanel{position:absolute;z-index:calc(var(--z-dropdown) + 10);display:flex;flex-direction:column;gap:6px;min-width:180px;padding:10px;background:var(--bg-1);border:1px solid var(--b2);border-radius:7px;box-shadow:var(--shh);font-weight:400;text-transform:none;letter-spacing:normal;white-space:nowrap}.strct-dg__filterinput{padding:5px 8px;border:1px solid var(--b2);border-radius:var(--radius-sm);background:var(--bg-2);color:var(--t1);font-family:var(--font);font-size:12px}.strct-dg__filterinput:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}.strct-dg__filteropt{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--t1);cursor:pointer}.strct-dg__filterclear{align-self:flex-start;padding:3px 8px;border:1px solid var(--b2);border-radius:var(--radius-sm);background:transparent;color:var(--t2);font-family:var(--font);font-size:11.5px;cursor:pointer}.strct-dg__filterclear:hover:not(:disabled){color:var(--t1);background:var(--bg-3)}.strct-dg__filterclear:disabled{color:var(--t4);cursor:default}.strct-dg tbody tr[tabindex]:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-dg__treepad{display:inline-block;height:1px;vertical-align:middle}.strct-dg__treebtn{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-inline-end:4px;padding:0;border:0;border-radius:4px;background:transparent;color:var(--t3);cursor:pointer;vertical-align:middle}.strct-dg__treebtn:hover{color:var(--t1);background:var(--bg-3)}.strct-dg__treebtn:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}.strct-dg__treebtn strct-icon{transition:transform .15s ease}.strct-dg__treebtn--open strct-icon{transform:rotate(90deg)}.strct-dg__treebtn--leaf{cursor:default;pointer-events:none}@media(prefers-reduced-motion:reduce){.strct-dg__treebtn strct-icon{transition:none}}.strct-dg__cell--editable{cursor:text;position:relative}.strct-dg__cell--editable:hover{box-shadow:inset 0 0 0 1px var(--b2)}.strct-dg__cell--editable:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--acc50)}.strct-dg__editpencil{position:absolute;top:50%;inset-inline-end:6px;transform:translateY(-50%);color:var(--t3);opacity:0;pointer-events:none}td:hover>.strct-dg__editpencil,td:focus-within>.strct-dg__editpencil{opacity:1}.strct-dg__editinput{width:100%;box-sizing:border-box;padding:3px 6px;border:1px solid var(--acc);border-radius:var(--radius-sm);background:var(--bg-1);color:var(--t1);font:inherit}.strct-dg__editselect,.strct-dg__editnumber{display:block;width:100%}.strct-dg__editinput:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "strictName", "size", "strokeWidth", "badge", "ariaLabel", "count", "countMax", "countStatus", "countLabel"] }, { kind: "component", type: StrctPagination, selector: "strct-pagination", inputs: ["prevLabel", "nextLabel", "regionLabel", "pageLabel", "total", "pageSize", "page"], outputs: ["pageChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: StrctCheckbox, selector: "strct-checkbox", inputs: ["checked", "disabled", "indeterminate", "ariaLabel", "description"], outputs: ["checkedChange"] }, { kind: "component", type: StrctButton, selector: "button[strct-button], a[strct-button]", inputs: ["variant", "size", "solid", "block", "iconOnly"] }, { kind: "component", type: StrctButtonGroup, selector: "strct-button-group" }, { kind: "directive", type: StrctOverlay, selector: "[strctOverlay]", inputs: ["strctOverlay", "strctOverlayPlacement", "strctOverlayMatchWidth", "strctOverlayGap"] }, { kind: "component", type: StrctSearchbox, selector: "strct-searchbox", inputs: ["placeholder", "hint", "trigger", "clearable", "ariaLabel", "clearLabel", "value"], outputs: ["valueChange", "search", "activated"] }, { kind: "component", type: StrctSelect, selector: "strct-select", inputs: ["options", "placeholder", "listLabel", "emptyText", "disabled", "compareWith"] }, { kind: "component", type: StrctNumber, selector: "strct-number", inputs: ["min", "max", "step", "placeholder", "ariaLabel", "incrementLabel", "decrementLabel", "disabled"] }, { kind: "component", type: StrctSpinner, selector: "strct-spinner", inputs: ["size", "label", "caption"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
15924
+ `, isInline: true, styles: [".strct-dg__radio{width:15px;height:15px;accent-color:var(--acc);cursor:pointer}.strct-dg__radio:disabled{cursor:not-allowed}.strct-dg__row--locked .strct-dg__sel{opacity:.55}.strct-dg__actioncaption:empty{display:none}.strct-dg__actioncaption{display:inline-flex;align-items:center;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-sm);color:var(--t3)}.strct-dg-host{display:block;border:1px solid var(--b2);border-radius:var(--radius-lg);background:var(--bg-2);box-shadow:var(--shadow-rest)}.strct-dg-host--flush{border:0;border-radius:0;background:transparent;box-shadow:none}.strct-dg__more strct-spinner{margin-inline-end:4px}.strct-dg__caption{caption-side:top;text-align:start;padding:var(--space-2) var(--space-3);font-size:var(--text-sm);font-weight:600;color:var(--t2)}.strct-dg td.strct-dg__cell--mono{font-family:var(--mono);font-size:var(--text-sm)}.strct-dg td.strct-dg__cell--muted{color:var(--t3)}.strct-dg td.strct-dg__cell--numeric{font-variant-numeric:tabular-nums}.strct-dg__empty{color:var(--t3)}.strct-dg__celldesc{display:block;font-size:var(--text-sm);color:var(--t3);line-height:1.3}.strct-dg__scroll{flex:1 1 auto;min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch}.strct-dg-host--virtual .strct-dg__scroll,.strct-dg-host--bounded .strct-dg__scroll{overflow-y:auto}.strct-dg-host--virtual .strct-dg thead th,.strct-dg-host--bounded .strct-dg thead th{position:sticky;top:0;z-index:var(--z-raised)}.strct-dg__vspacer td{padding:0;border:0;background:transparent}.strct-dg th[draggable]{cursor:grab}.strct-dg__th--drop{box-shadow:inset 3px 0 0 var(--acc)}.strct-dg__grouprow td{background:var(--bg-2)!important;padding:0}.strct-dg__groupbtn{display:flex;align-items:center;gap:8px;width:100%;padding:7px 13px;border:0;background:transparent;color:var(--t1);font-family:var(--font);font-size:12.5px;font-weight:600;cursor:pointer;text-align:start}.strct-dg__groupbtn:hover{background:var(--bg-3)}.strct-dg__groupbtn:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-dg__groupchev{display:inline-flex;color:var(--t3);transition:transform .15s ease}.strct-dg__groupchev--open{transform:rotate(90deg)}@media(prefers-reduced-motion:reduce){.strct-dg__groupchev{transition:none}}.strct-dg__groupcount{min-width:18px;height:18px;padding:0 5px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;border-radius:9px;background:var(--acc-m);color:var(--acc);font-variant-numeric:tabular-nums}.strct-dg-host--singleline .strct-dg,.strct-dg-host--sticky .strct-dg,.strct-dg-host--virtual .strct-dg,.strct-dg-host--bounded .strct-dg{border-collapse:separate;border-spacing:0;overflow:visible;border-radius:0}.strct-dg-host--sticky .strct-dg{width:max-content;min-width:100%}.strct-dg .strct-dg__cell--sticky{position:sticky;z-index:calc(var(--z-base) + 2)}.strct-dg thead th.strct-dg__cell--sticky{z-index:calc(var(--z-raised) + 1)}.strct-dg .strct-dg__cell--sticky-last:after{content:\"\";position:absolute;top:0;bottom:0;inset-inline-end:-1px;width:7px;pointer-events:none;background:linear-gradient(to right,rgba(0,0,0,.14),transparent)}[dir=rtl] .strct-dg .strct-dg__cell--sticky-last:after{background:linear-gradient(to left,rgba(0,0,0,.14),transparent)}.strct-dg-host--sticky .strct-dg__expandcol,.strct-dg-host--sticky .strct-dg__expandcell{width:36px;min-width:36px;max-width:36px;box-sizing:border-box}.strct-dg-host--sticky .strct-dg__sel{width:40px;min-width:40px;max-width:40px;box-sizing:border-box}.strct-dg-host--sticky tbody .strct-dg__cell--sticky{background:var(--bg-1)}[data-theme=dark] .strct-dg-host--sticky tbody .strct-dg__cell--sticky{background:var(--bg-3)}.strct-dg-host--sticky tbody tr:hover .strct-dg__cell--sticky{background:linear-gradient(var(--acc-s),var(--acc-s)) var(--bg-1)}[data-theme=dark] .strct-dg-host--sticky tbody tr:hover .strct-dg__cell--sticky{background:linear-gradient(var(--acc-s),var(--acc-s)) var(--bg-3)}.strct-dg-host--sticky tbody .strct-dg__row--selected .strct-dg__cell--sticky{background:linear-gradient(var(--acc-m),var(--acc-m)) var(--bg-1)}[data-theme=dark] .strct-dg-host--sticky tbody .strct-dg__row--selected .strct-dg__cell--sticky{background:linear-gradient(var(--acc-m),var(--acc-m)) var(--bg-3)}.strct-dg{width:100%;border-collapse:collapse;font-size:13px;overflow:hidden;background:var(--bg-2)}.strct-dg-host:not(:has(.strct-dg__toolbar)) .strct-dg{border-start-start-radius:9px;border-start-end-radius:9px}.strct-dg-host:not(:has(.strct-dg__foot)) .strct-dg{border-end-start-radius:9px;border-end-end-radius:9px}.strct-dg th,.strct-dg td{padding:9px 13px;text-align:start;border-bottom:1px solid var(--b1)}.strct-dg tbody td{background:var(--bg-1)}[data-theme=dark] .strct-dg tbody td{background:var(--bg-3)}.strct-dg-host--compact .strct-dg th,.strct-dg-host--compact .strct-dg td{padding:5px 11px}.strct-dg-host--singleline .strct-dg tbody tr:not(.strct-dg__detailrow)>td{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:360px}.strct-dg th{position:relative;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--t2);background:var(--bg-2);white-space:nowrap;-webkit-user-select:none;user-select:none}.strct-dg__th--sortable{cursor:pointer}.strct-dg__th--sortable:hover{color:var(--t1)}.strct-dg__th--sortable:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-dg__hd{display:inline-flex;align-items:center;gap:5px}.strct-dg__sorticon{color:var(--t3)}.strct-dg__th--sortable:hover .strct-dg__sorticon{color:var(--acc)}.strct-dg__resize{position:absolute;inset-inline-end:0;top:0;bottom:0;width:4px;cursor:col-resize;background:transparent;z-index:calc(var(--z-base) + 1)}.strct-dg__resize:hover{background:var(--acc)}.strct-dg td{color:var(--t1)}.strct-dg tbody tr:last-child td{border-bottom:0}.strct-dg tbody tr:not(.strct-dg__detailrow):hover td{background:var(--acc-s)}.strct-dg tbody .strct-dg__row--selected td{background:var(--acc-m)}.strct-dg__sel{width:1%;white-space:nowrap}.strct-dg__sel input{accent-color:var(--acc);width:15px;height:15px;cursor:pointer}.strct-dg__expandcol,.strct-dg__expandcell{width:1%;white-space:nowrap}.strct-dg__actioncol,.strct-dg__actioncell{width:1%;white-space:nowrap;text-align:end}.strct-dg__kebab{display:inline-flex;padding:4px;border:0;border-radius:5px;background:transparent;color:var(--t3);cursor:pointer;transition:color .14s ease,background .14s ease}.strct-dg__kebab:hover{color:var(--t1);background:var(--bg-3)}.strct-dg__expandbtn{display:inline-flex;padding:3px;border:0;border-radius:4px;background:transparent;color:var(--t3);cursor:pointer;transition:transform .15s ease,color .15s ease}.strct-dg__expandbtn:hover{color:var(--t1);background:var(--bg-3)}.strct-dg__expandbtn--open{transform:rotate(90deg);color:var(--acc)}.strct-dg__detailbtn{display:inline-flex;padding:3px;border:0;border-radius:4px;background:transparent;color:var(--t3);cursor:pointer;transition:color .14s ease,background .14s ease}.strct-dg__detailbtn:hover{color:var(--acc);background:var(--bg-3)}.strct-dg__detailbtn--active{color:var(--acc);background:var(--acc-m)}.strct-dg__detailrow td{background:var(--bg-2);padding:0}.strct-dg__detail{padding:14px 16px;font-size:13px;color:var(--t2)}.strct-dg__layout{display:flex;align-items:flex-start;min-width:0}.strct-dg__layout--paned{gap:0}.strct-dg__layout--paned .strct-dg__scroll{flex:0 0 auto;width:260px;min-width:260px;max-width:260px}.strct-dg__layout--paned .strct-dg{width:260px;min-width:260px;max-width:260px;flex-shrink:0;border-start-end-radius:0;border-end-end-radius:0}.strct-dg__row--clickable{cursor:pointer}.strct-dg tbody .strct-dg__row--active td{background:var(--acc-m)}.strct-dg__layout--paned .strct-dg__row--active td:last-child{position:relative;padding-inline-end:26px}.strct-dg__layout--paned .strct-dg__row--active td:last-child:after{content:\"\";position:absolute;inset-inline-end:11px;top:50%;width:6px;height:6px;border-top:1.6px solid var(--acc);border-inline-end:1.6px solid var(--acc);transform:translateY(-50%) rotate(45deg)}.strct-dg__pane{flex:1;min-width:0;align-self:stretch;background:var(--bg-1);border:1px solid var(--b2);border-inline-start:2px solid var(--acc);border-radius:8px;border-start-start-radius:0;border-end-start-radius:0;overflow:hidden;animation:strct-dg-pane-in .14s ease}.strct-dg__pane-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 14px;border-bottom:1px solid var(--b1);font-size:13px;font-weight:600;color:var(--t1)}.strct-dg__pane-close{display:inline-flex;padding:3px;border:0;border-radius:4px;background:transparent;color:var(--t3);cursor:pointer}.strct-dg__pane-close:hover{color:var(--t1);background:var(--bg-3)}.strct-dg__pane-body{padding:14px 16px;font-size:13px;color:var(--t2)}@keyframes strct-dg-pane-in{0%{opacity:0;transform:translate(8px)}}@keyframes strct-skeleton-pulse{0%,to{opacity:.4}50%{opacity:.7}}.strct-dg__skeleton-block{height:12px;border-radius:var(--radius-sm);background:linear-gradient(90deg,var(--bg-3) 25%,var(--skeleton-hi, var(--acc18)) 50%,var(--bg-3) 75%);background-size:200% 100%;animation:strct-dg-skeleton-sweep 1.1s linear infinite}@keyframes strct-dg-skeleton-sweep{0%{background-position:100% 0}to{background-position:-100% 0}}@media(prefers-reduced-motion:reduce){.strct-dg__skeleton-block{animation:none;background:var(--skeleton-hi, var(--acc18))}}.strct-dg__skeleton-row td{border-bottom:1px solid var(--b1)}.strct-dg__empty{text-align:center;color:var(--t3);padding:22px}.strct-dg__quickfilter{min-width:180px;max-width:260px}.strct-dg__quickfilter--end{order:2;margin-inline-start:auto}.strct-dg__filternote--end{order:3}.strct-dg__filternote{font-size:11.5px;color:var(--t3);font-variant-numeric:tabular-nums;white-space:nowrap}.strct-dg__toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:9px 14px;border-bottom:1px solid var(--b2)}.strct-dg__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 14px;border-top:1px solid var(--b2);flex-wrap:wrap}.strct-dg__foot-left,.strct-dg__foot-right{display:flex;align-items:center;gap:12px}.strct-dg__actions{position:relative}.strct-dg__chooser-menu{position:absolute;bottom:calc(100% + 6px);inset-inline-start:0;z-index:var(--z-sticky);min-width:180px;background:var(--bg-1);border:1px solid var(--b2);border-radius:8px;box-shadow:var(--shadow-pop);padding:6px;display:flex;flex-direction:column;gap:2px}.strct-dg__chooser-menu--right{inset-inline-start:auto;inset-inline-end:0}.strct-dg__chooser-item{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:6px;cursor:pointer;font-size:12px;color:var(--t1);transition:background .1s ease;-webkit-user-select:none;user-select:none}.strct-dg__chooser-item:hover{background:var(--bg-3)}.strct-dg__count{font-size:12px;color:var(--t2)}.strct-dg__count-sep{margin:0 8px;color:var(--b2)}.strct-dg__count-sel{color:var(--acc)}.strct-dg__filterbtn{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin-inline-start:2px;padding:0;border:0;border-radius:4px;background:transparent;color:var(--t3);cursor:pointer;vertical-align:middle}.strct-dg__filterbtn:hover{color:var(--t1);background:var(--bg-3)}.strct-dg__filterbtn--active{color:var(--acc)}.strct-dg__filterbtn:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}.strct-dg__filterpanel{position:absolute;z-index:calc(var(--z-dropdown) + 10);display:flex;flex-direction:column;gap:6px;min-width:180px;padding:10px;background:var(--bg-1);border:1px solid var(--b2);border-radius:7px;box-shadow:var(--shh);font-weight:400;text-transform:none;letter-spacing:normal;white-space:nowrap}.strct-dg__filterinput{padding:5px 8px;border:1px solid var(--b2);border-radius:var(--radius-sm);background:var(--bg-2);color:var(--t1);font-family:var(--font);font-size:12px}.strct-dg__filterinput:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}.strct-dg__filteropt{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--t1);cursor:pointer}.strct-dg__filterclear{align-self:flex-start;padding:3px 8px;border:1px solid var(--b2);border-radius:var(--radius-sm);background:transparent;color:var(--t2);font-family:var(--font);font-size:11.5px;cursor:pointer}.strct-dg__filterclear:hover:not(:disabled){color:var(--t1);background:var(--bg-3)}.strct-dg__filterclear:disabled{color:var(--t4);cursor:default}.strct-dg tbody tr[tabindex]:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-dg__treepad{display:inline-block;height:1px;vertical-align:middle}.strct-dg__treebtn{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-inline-end:4px;padding:0;border:0;border-radius:4px;background:transparent;color:var(--t3);cursor:pointer;vertical-align:middle}.strct-dg__treebtn:hover{color:var(--t1);background:var(--bg-3)}.strct-dg__treebtn:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}.strct-dg__treebtn strct-icon{transition:transform .15s ease}.strct-dg__treebtn--open strct-icon{transform:rotate(90deg)}.strct-dg__treebtn--leaf{cursor:default;pointer-events:none}@media(prefers-reduced-motion:reduce){.strct-dg__treebtn strct-icon{transition:none}}.strct-dg__cell--editable{cursor:text;position:relative}.strct-dg__cell--editable:hover{box-shadow:inset 0 0 0 1px var(--b2)}.strct-dg__cell--editable:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--acc50)}.strct-dg__editpencil{position:absolute;top:50%;inset-inline-end:6px;transform:translateY(-50%);color:var(--t3);opacity:0;pointer-events:none}td:hover>.strct-dg__editpencil,td:focus-within>.strct-dg__editpencil{opacity:1}.strct-dg__editinput{width:100%;box-sizing:border-box;padding:3px 6px;border:1px solid var(--acc);border-radius:var(--radius-sm);background:var(--bg-1);color:var(--t1);font:inherit}.strct-dg__editselect,.strct-dg__editnumber{display:block;width:100%}.strct-dg__editinput:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "strictName", "size", "strokeWidth", "badge", "ariaLabel", "count", "countMax", "countStatus", "countLabel"] }, { kind: "component", type: StrctPagination, selector: "strct-pagination", inputs: ["prevLabel", "nextLabel", "regionLabel", "pageLabel", "total", "pageSize", "page"], outputs: ["pageChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: StrctCheckbox, selector: "strct-checkbox", inputs: ["checked", "disabled", "indeterminate", "ariaLabel", "description"], outputs: ["checkedChange"] }, { kind: "component", type: StrctButton, selector: "button[strct-button], a[strct-button]", inputs: ["variant", "size", "solid", "block", "iconOnly"] }, { kind: "component", type: StrctButtonGroup, selector: "strct-button-group" }, { kind: "directive", type: StrctOverlay, selector: "[strctOverlay]", inputs: ["strctOverlay", "strctOverlayPlacement", "strctOverlayMatchWidth", "strctOverlayGap"] }, { kind: "component", type: StrctSearchbox, selector: "strct-searchbox", inputs: ["placeholder", "hint", "trigger", "clearable", "ariaLabel", "clearLabel", "value"], outputs: ["valueChange", "search", "activated"] }, { kind: "component", type: StrctSelect, selector: "strct-select", inputs: ["options", "placeholder", "ariaLabel", "listLabel", "emptyText", "disabled", "compareWith"] }, { kind: "component", type: StrctNumber, selector: "strct-number", inputs: ["min", "max", "step", "placeholder", "ariaLabel", "incrementLabel", "decrementLabel", "disabled"] }, { kind: "component", type: StrctSpinner, selector: "strct-spinner", inputs: ["size", "label", "caption"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
15795
15925
  }
15796
15926
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctDatagrid, decorators: [{
15797
15927
  type: Component,
@@ -15842,7 +15972,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
15842
15972
  containing block is the page extends the document's scrollable area
15843
15973
  from wherever the grid happens to sit. 1x1 and clipped is enough. -->
15844
15974
  <span
15845
- class="strct-dg__hint"
15975
+ class="strct-sr-only"
15846
15976
  style="display: inline-block; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap"
15847
15977
  [id]="editHintId"
15848
15978
  >{{ L().editCellInstructions }}</span
@@ -15872,23 +16002,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
15872
16002
  }
15873
16003
  <thead>
15874
16004
  <tr>
16005
+ <!-- A utility column is still a column: axe reports every empty
16006
+ header, and a screen-reader user hears nothing where the
16007
+ detail, expand and select controls are. The name is hidden,
16008
+ not absent. -->
15875
16009
  @if (canDetail()) {
15876
16010
  <th
15877
16011
  class="strct-dg__expandcol"
16012
+ scope="col"
15878
16013
  [class.strct-dg__cell--sticky]="stickyActive()"
15879
16014
  [style.insetInlineStart.px]="utilLeft('detail')"
15880
- ></th>
16015
+ >
16016
+ <span class="strct-sr-only">{{ L().detailColumn }}</span>
16017
+ </th>
15881
16018
  }
15882
16019
  @if (canExpand()) {
15883
16020
  <th
15884
16021
  class="strct-dg__expandcol"
16022
+ scope="col"
15885
16023
  [class.strct-dg__cell--sticky]="stickyActive()"
15886
16024
  [style.insetInlineStart.px]="utilLeft('expand')"
15887
- ></th>
16025
+ >
16026
+ <span class="strct-sr-only">{{ L().expandColumn }}</span>
16027
+ </th>
15888
16028
  }
15889
16029
  @if (hasSelectionColumn()) {
15890
16030
  <th
15891
16031
  class="strct-dg__sel"
16032
+ scope="col"
15892
16033
  [class.strct-dg__cell--sticky]="stickyActive()"
15893
16034
  [style.insetInlineStart.px]="utilLeft('sel')"
15894
16035
  >
@@ -15899,11 +16040,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
15899
16040
  [indeterminate]="somePageSelected()"
15900
16041
  (checkedChange)="toggleAll()"
15901
16042
  />
16043
+ } @else {
16044
+ <span class="strct-sr-only">{{ L().selectColumn }}</span>
15902
16045
  }
15903
16046
  </th>
15904
16047
  }
15905
16048
  @for (col of visibleColumns(); track col.key) {
15906
16049
  <th
16050
+ scope="col"
15907
16051
  [style.text-align]="col.align ?? (col.numeric ? 'end' : 'start')"
15908
16052
  [style.width]="colWidth(col.key) ?? col.width ?? null"
15909
16053
  [class.strct-dg__th--sortable]="col.sortable"
@@ -15998,7 +16142,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
15998
16142
  </th>
15999
16143
  }
16000
16144
  @if (canActions()) {
16001
- <th class="strct-dg__actioncol" [attr.aria-label]="L().actions"></th>
16145
+ <th class="strct-dg__actioncol" scope="col" [attr.aria-label]="L().actions"></th>
16002
16146
  }
16003
16147
  </tr>
16004
16148
  </thead>
@@ -16211,7 +16355,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
16211
16355
  confirm with Enter once an option is picked. -->
16212
16356
  <strct-select
16213
16357
  class="strct-dg__editselect"
16214
- [options]="col.editorOptions ?? []"
16358
+ [options]="editorOptionsFor(row, col)"
16215
16359
  [listLabel]="L().editCell + ': ' + col.label"
16216
16360
  [ngModel]="row[col.key]"
16217
16361
  (ngModelChange)="commitValue(row, col, $event)"
@@ -16222,6 +16366,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
16222
16366
  @case ('number') {
16223
16367
  <strct-number
16224
16368
  class="strct-dg__editnumber"
16369
+ [ariaLabel]="L().editCell + ': ' + col.label"
16225
16370
  [min]="col.editorMin ?? null"
16226
16371
  [max]="col.editorMax ?? null"
16227
16372
  [step]="col.editorStep ?? 1"
@@ -16443,7 +16588,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
16443
16588
  '[class.strct-dg-host--bounded]': '!virtual() && maxHeight() !== null',
16444
16589
  '[class.strct-dg-host--sticky]': 'stickyActive()',
16445
16590
  '[class.strct-dg-host--flush]': 'flush()',
16446
- }, styles: [".strct-dg__radio{width:15px;height:15px;accent-color:var(--acc);cursor:pointer}.strct-dg__radio:disabled{cursor:not-allowed}.strct-dg__row--locked .strct-dg__sel{opacity:.55}.strct-dg__actioncaption:empty{display:none}.strct-dg__actioncaption{display:inline-flex;align-items:center;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-sm);color:var(--t3)}.strct-dg-host{display:block;border:1px solid var(--b2);border-radius:var(--radius-lg);background:var(--bg-2);box-shadow:var(--shadow-rest)}.strct-dg-host--flush{border:0;border-radius:0;background:transparent;box-shadow:none}.strct-dg__more strct-spinner{margin-inline-end:4px}.strct-dg__caption{caption-side:top;text-align:start;padding:var(--space-2) var(--space-3);font-size:var(--text-sm);font-weight:600;color:var(--t2)}.strct-dg td.strct-dg__cell--mono{font-family:var(--mono);font-size:var(--text-sm)}.strct-dg td.strct-dg__cell--muted{color:var(--t3)}.strct-dg td.strct-dg__cell--numeric{font-variant-numeric:tabular-nums}.strct-dg__empty{color:var(--t3)}.strct-dg__celldesc{display:block;font-size:var(--text-sm);color:var(--t3);line-height:1.3}.strct-dg__scroll{flex:1 1 auto;min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch}.strct-dg-host--virtual .strct-dg__scroll,.strct-dg-host--bounded .strct-dg__scroll{overflow-y:auto}.strct-dg-host--virtual .strct-dg thead th,.strct-dg-host--bounded .strct-dg thead th{position:sticky;top:0;z-index:var(--z-raised)}.strct-dg__vspacer td{padding:0;border:0;background:transparent}.strct-dg th[draggable]{cursor:grab}.strct-dg__th--drop{box-shadow:inset 3px 0 0 var(--acc)}.strct-dg__grouprow td{background:var(--bg-2)!important;padding:0}.strct-dg__groupbtn{display:flex;align-items:center;gap:8px;width:100%;padding:7px 13px;border:0;background:transparent;color:var(--t1);font-family:var(--font);font-size:12.5px;font-weight:600;cursor:pointer;text-align:start}.strct-dg__groupbtn:hover{background:var(--bg-3)}.strct-dg__groupbtn:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-dg__groupchev{display:inline-flex;color:var(--t3);transition:transform .15s ease}.strct-dg__groupchev--open{transform:rotate(90deg)}@media(prefers-reduced-motion:reduce){.strct-dg__groupchev{transition:none}}.strct-dg__groupcount{min-width:18px;height:18px;padding:0 5px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;border-radius:9px;background:var(--acc-m);color:var(--acc);font-variant-numeric:tabular-nums}.strct-dg-host--sticky .strct-dg,.strct-dg-host--virtual .strct-dg,.strct-dg-host--bounded .strct-dg{border-collapse:separate;border-spacing:0;overflow:visible;border-radius:0}.strct-dg-host--sticky .strct-dg{width:max-content;min-width:100%}.strct-dg .strct-dg__cell--sticky{position:sticky;z-index:calc(var(--z-base) + 2)}.strct-dg thead th.strct-dg__cell--sticky{z-index:calc(var(--z-raised) + 1)}.strct-dg .strct-dg__cell--sticky-last:after{content:\"\";position:absolute;top:0;bottom:0;inset-inline-end:-1px;width:7px;pointer-events:none;background:linear-gradient(to right,rgba(0,0,0,.14),transparent)}[dir=rtl] .strct-dg .strct-dg__cell--sticky-last:after{background:linear-gradient(to left,rgba(0,0,0,.14),transparent)}.strct-dg-host--sticky .strct-dg__expandcol,.strct-dg-host--sticky .strct-dg__expandcell{width:36px;min-width:36px;max-width:36px;box-sizing:border-box}.strct-dg-host--sticky .strct-dg__sel{width:40px;min-width:40px;max-width:40px;box-sizing:border-box}.strct-dg-host--sticky tbody .strct-dg__cell--sticky{background:var(--bg-1)}[data-theme=dark] .strct-dg-host--sticky tbody .strct-dg__cell--sticky{background:var(--bg-3)}.strct-dg-host--sticky tbody tr:hover .strct-dg__cell--sticky{background:linear-gradient(var(--acc-s),var(--acc-s)) var(--bg-1)}[data-theme=dark] .strct-dg-host--sticky tbody tr:hover .strct-dg__cell--sticky{background:linear-gradient(var(--acc-s),var(--acc-s)) var(--bg-3)}.strct-dg-host--sticky tbody .strct-dg__row--selected .strct-dg__cell--sticky{background:linear-gradient(var(--acc-m),var(--acc-m)) var(--bg-1)}[data-theme=dark] .strct-dg-host--sticky tbody .strct-dg__row--selected .strct-dg__cell--sticky{background:linear-gradient(var(--acc-m),var(--acc-m)) var(--bg-3)}.strct-dg{width:100%;border-collapse:collapse;font-size:13px;overflow:hidden;background:var(--bg-2)}.strct-dg-host:not(:has(.strct-dg__toolbar)) .strct-dg{border-start-start-radius:9px;border-start-end-radius:9px}.strct-dg-host:not(:has(.strct-dg__foot)) .strct-dg{border-end-start-radius:9px;border-end-end-radius:9px}.strct-dg th,.strct-dg td{padding:9px 13px;text-align:start;border-bottom:1px solid var(--b1)}.strct-dg tbody td{background:var(--bg-1)}[data-theme=dark] .strct-dg tbody td{background:var(--bg-3)}.strct-dg-host--compact .strct-dg th,.strct-dg-host--compact .strct-dg td{padding:5px 11px}.strct-dg-host--singleline .strct-dg tbody tr:not(.strct-dg__detailrow)>td{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:360px}.strct-dg th{position:relative;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--t2);background:var(--bg-2);white-space:nowrap;-webkit-user-select:none;user-select:none}.strct-dg__th--sortable{cursor:pointer}.strct-dg__th--sortable:hover{color:var(--t1)}.strct-dg__th--sortable:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-dg__hd{display:inline-flex;align-items:center;gap:5px}.strct-dg__sorticon{color:var(--t3)}.strct-dg__th--sortable:hover .strct-dg__sorticon{color:var(--acc)}.strct-dg__resize{position:absolute;inset-inline-end:0;top:0;bottom:0;width:4px;cursor:col-resize;background:transparent;z-index:calc(var(--z-base) + 1)}.strct-dg__resize:hover{background:var(--acc)}.strct-dg td{color:var(--t1)}.strct-dg tbody tr:last-child td{border-bottom:0}.strct-dg tbody tr:not(.strct-dg__detailrow):hover td{background:var(--acc-s)}.strct-dg__row--selected td{background:var(--acc-m)}.strct-dg__sel{width:1%;white-space:nowrap}.strct-dg__sel input{accent-color:var(--acc);width:15px;height:15px;cursor:pointer}.strct-dg__expandcol,.strct-dg__expandcell{width:1%;white-space:nowrap}.strct-dg__actioncol,.strct-dg__actioncell{width:1%;white-space:nowrap;text-align:end}.strct-dg__kebab{display:inline-flex;padding:4px;border:0;border-radius:5px;background:transparent;color:var(--t3);cursor:pointer;transition:color .14s ease,background .14s ease}.strct-dg__kebab:hover{color:var(--t1);background:var(--bg-3)}.strct-dg__expandbtn{display:inline-flex;padding:3px;border:0;border-radius:4px;background:transparent;color:var(--t3);cursor:pointer;transition:transform .15s ease,color .15s ease}.strct-dg__expandbtn:hover{color:var(--t1);background:var(--bg-3)}.strct-dg__expandbtn--open{transform:rotate(90deg);color:var(--acc)}.strct-dg__detailbtn{display:inline-flex;padding:3px;border:0;border-radius:4px;background:transparent;color:var(--t3);cursor:pointer;transition:color .14s ease,background .14s ease}.strct-dg__detailbtn:hover{color:var(--acc);background:var(--bg-3)}.strct-dg__detailbtn--active{color:var(--acc);background:var(--acc-m)}.strct-dg__detailrow td{background:var(--bg-2);padding:0}.strct-dg__detail{padding:14px 16px;font-size:13px;color:var(--t2)}.strct-dg__layout{display:flex;align-items:flex-start;min-width:0}.strct-dg__layout--paned{gap:0}.strct-dg__layout--paned .strct-dg__scroll{flex:0 0 auto;width:260px;min-width:260px;max-width:260px}.strct-dg__layout--paned .strct-dg{width:260px;min-width:260px;max-width:260px;flex-shrink:0;border-start-end-radius:0;border-end-end-radius:0}.strct-dg__row--clickable{cursor:pointer}.strct-dg__row--active td{background:var(--acc-m)}.strct-dg__layout--paned .strct-dg__row--active td:last-child{position:relative;padding-inline-end:26px}.strct-dg__layout--paned .strct-dg__row--active td:last-child:after{content:\"\";position:absolute;inset-inline-end:11px;top:50%;width:6px;height:6px;border-top:1.6px solid var(--acc);border-inline-end:1.6px solid var(--acc);transform:translateY(-50%) rotate(45deg)}.strct-dg__pane{flex:1;min-width:0;align-self:stretch;background:var(--bg-1);border:1px solid var(--b2);border-inline-start:2px solid var(--acc);border-radius:8px;border-start-start-radius:0;border-end-start-radius:0;overflow:hidden;animation:strct-dg-pane-in .14s ease}.strct-dg__pane-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 14px;border-bottom:1px solid var(--b1);font-size:13px;font-weight:600;color:var(--t1)}.strct-dg__pane-close{display:inline-flex;padding:3px;border:0;border-radius:4px;background:transparent;color:var(--t3);cursor:pointer}.strct-dg__pane-close:hover{color:var(--t1);background:var(--bg-3)}.strct-dg__pane-body{padding:14px 16px;font-size:13px;color:var(--t2)}@keyframes strct-dg-pane-in{0%{opacity:0;transform:translate(8px)}}@keyframes strct-skeleton-pulse{0%,to{opacity:.4}50%{opacity:.7}}.strct-dg__skeleton-block{height:12px;border-radius:var(--radius-sm);background:linear-gradient(90deg,var(--bg-3) 25%,var(--skeleton-hi, var(--acc18)) 50%,var(--bg-3) 75%);background-size:200% 100%;animation:strct-dg-skeleton-sweep 1.1s linear infinite}@keyframes strct-dg-skeleton-sweep{0%{background-position:100% 0}to{background-position:-100% 0}}@media(prefers-reduced-motion:reduce){.strct-dg__skeleton-block{animation:none;background:var(--skeleton-hi, var(--acc18))}}.strct-dg__skeleton-row td{border-bottom:1px solid var(--b1)}.strct-dg__empty{text-align:center;color:var(--t3);padding:22px}.strct-dg__quickfilter{min-width:180px;max-width:260px}.strct-dg__quickfilter--end{order:2;margin-inline-start:auto}.strct-dg__filternote--end{order:3}.strct-dg__filternote{font-size:11.5px;color:var(--t3);font-variant-numeric:tabular-nums;white-space:nowrap}.strct-dg__toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:9px 14px;border-bottom:1px solid var(--b2)}.strct-dg__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 14px;border-top:1px solid var(--b2);flex-wrap:wrap}.strct-dg__foot-left,.strct-dg__foot-right{display:flex;align-items:center;gap:12px}.strct-dg__actions{position:relative}.strct-dg__chooser-menu{position:absolute;bottom:calc(100% + 6px);inset-inline-start:0;z-index:var(--z-sticky);min-width:180px;background:var(--bg-1);border:1px solid var(--b2);border-radius:8px;box-shadow:var(--shadow-pop);padding:6px;display:flex;flex-direction:column;gap:2px}.strct-dg__chooser-menu--right{inset-inline-start:auto;inset-inline-end:0}.strct-dg__chooser-item{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:6px;cursor:pointer;font-size:12px;color:var(--t1);transition:background .1s ease;-webkit-user-select:none;user-select:none}.strct-dg__chooser-item:hover{background:var(--bg-3)}.strct-dg__count{font-size:12px;color:var(--t2)}.strct-dg__count-sep{margin:0 8px;color:var(--b2)}.strct-dg__count-sel{color:var(--acc)}.strct-dg__filterbtn{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin-inline-start:2px;padding:0;border:0;border-radius:4px;background:transparent;color:var(--t3);cursor:pointer;vertical-align:middle}.strct-dg__filterbtn:hover{color:var(--t1);background:var(--bg-3)}.strct-dg__filterbtn--active{color:var(--acc)}.strct-dg__filterbtn:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}.strct-dg__filterpanel{position:absolute;z-index:calc(var(--z-dropdown) + 10);display:flex;flex-direction:column;gap:6px;min-width:180px;padding:10px;background:var(--bg-1);border:1px solid var(--b2);border-radius:7px;box-shadow:var(--shh);font-weight:400;text-transform:none;letter-spacing:normal;white-space:nowrap}.strct-dg__filterinput{padding:5px 8px;border:1px solid var(--b2);border-radius:var(--radius-sm);background:var(--bg-2);color:var(--t1);font-family:var(--font);font-size:12px}.strct-dg__filterinput:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}.strct-dg__filteropt{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--t1);cursor:pointer}.strct-dg__filterclear{align-self:flex-start;padding:3px 8px;border:1px solid var(--b2);border-radius:var(--radius-sm);background:transparent;color:var(--t2);font-family:var(--font);font-size:11.5px;cursor:pointer}.strct-dg__filterclear:hover:not(:disabled){color:var(--t1);background:var(--bg-3)}.strct-dg__filterclear:disabled{color:var(--t4);cursor:default}.strct-dg tbody tr[tabindex]:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-dg__treepad{display:inline-block;height:1px;vertical-align:middle}.strct-dg__treebtn{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-inline-end:4px;padding:0;border:0;border-radius:4px;background:transparent;color:var(--t3);cursor:pointer;vertical-align:middle}.strct-dg__treebtn:hover{color:var(--t1);background:var(--bg-3)}.strct-dg__treebtn:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}.strct-dg__treebtn strct-icon{transition:transform .15s ease}.strct-dg__treebtn--open strct-icon{transform:rotate(90deg)}.strct-dg__treebtn--leaf{cursor:default;pointer-events:none}@media(prefers-reduced-motion:reduce){.strct-dg__treebtn strct-icon{transition:none}}.strct-dg__cell--editable{cursor:text;position:relative}.strct-dg__cell--editable:hover{box-shadow:inset 0 0 0 1px var(--b2)}.strct-dg__cell--editable:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--acc50)}.strct-dg__editpencil{position:absolute;top:50%;inset-inline-end:6px;transform:translateY(-50%);color:var(--t3);opacity:0;pointer-events:none}td:hover>.strct-dg__editpencil,td:focus-within>.strct-dg__editpencil{opacity:1}.strct-dg__editinput{width:100%;box-sizing:border-box;padding:3px 6px;border:1px solid var(--acc);border-radius:var(--radius-sm);background:var(--bg-1);color:var(--t1);font:inherit}.strct-dg__editselect,.strct-dg__editnumber{display:block;width:100%}.strct-dg__editinput:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}\n"] }]
16591
+ }, styles: [".strct-dg__radio{width:15px;height:15px;accent-color:var(--acc);cursor:pointer}.strct-dg__radio:disabled{cursor:not-allowed}.strct-dg__row--locked .strct-dg__sel{opacity:.55}.strct-dg__actioncaption:empty{display:none}.strct-dg__actioncaption{display:inline-flex;align-items:center;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-sm);color:var(--t3)}.strct-dg-host{display:block;border:1px solid var(--b2);border-radius:var(--radius-lg);background:var(--bg-2);box-shadow:var(--shadow-rest)}.strct-dg-host--flush{border:0;border-radius:0;background:transparent;box-shadow:none}.strct-dg__more strct-spinner{margin-inline-end:4px}.strct-dg__caption{caption-side:top;text-align:start;padding:var(--space-2) var(--space-3);font-size:var(--text-sm);font-weight:600;color:var(--t2)}.strct-dg td.strct-dg__cell--mono{font-family:var(--mono);font-size:var(--text-sm)}.strct-dg td.strct-dg__cell--muted{color:var(--t3)}.strct-dg td.strct-dg__cell--numeric{font-variant-numeric:tabular-nums}.strct-dg__empty{color:var(--t3)}.strct-dg__celldesc{display:block;font-size:var(--text-sm);color:var(--t3);line-height:1.3}.strct-dg__scroll{flex:1 1 auto;min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch}.strct-dg-host--virtual .strct-dg__scroll,.strct-dg-host--bounded .strct-dg__scroll{overflow-y:auto}.strct-dg-host--virtual .strct-dg thead th,.strct-dg-host--bounded .strct-dg thead th{position:sticky;top:0;z-index:var(--z-raised)}.strct-dg__vspacer td{padding:0;border:0;background:transparent}.strct-dg th[draggable]{cursor:grab}.strct-dg__th--drop{box-shadow:inset 3px 0 0 var(--acc)}.strct-dg__grouprow td{background:var(--bg-2)!important;padding:0}.strct-dg__groupbtn{display:flex;align-items:center;gap:8px;width:100%;padding:7px 13px;border:0;background:transparent;color:var(--t1);font-family:var(--font);font-size:12.5px;font-weight:600;cursor:pointer;text-align:start}.strct-dg__groupbtn:hover{background:var(--bg-3)}.strct-dg__groupbtn:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-dg__groupchev{display:inline-flex;color:var(--t3);transition:transform .15s ease}.strct-dg__groupchev--open{transform:rotate(90deg)}@media(prefers-reduced-motion:reduce){.strct-dg__groupchev{transition:none}}.strct-dg__groupcount{min-width:18px;height:18px;padding:0 5px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;border-radius:9px;background:var(--acc-m);color:var(--acc);font-variant-numeric:tabular-nums}.strct-dg-host--singleline .strct-dg,.strct-dg-host--sticky .strct-dg,.strct-dg-host--virtual .strct-dg,.strct-dg-host--bounded .strct-dg{border-collapse:separate;border-spacing:0;overflow:visible;border-radius:0}.strct-dg-host--sticky .strct-dg{width:max-content;min-width:100%}.strct-dg .strct-dg__cell--sticky{position:sticky;z-index:calc(var(--z-base) + 2)}.strct-dg thead th.strct-dg__cell--sticky{z-index:calc(var(--z-raised) + 1)}.strct-dg .strct-dg__cell--sticky-last:after{content:\"\";position:absolute;top:0;bottom:0;inset-inline-end:-1px;width:7px;pointer-events:none;background:linear-gradient(to right,rgba(0,0,0,.14),transparent)}[dir=rtl] .strct-dg .strct-dg__cell--sticky-last:after{background:linear-gradient(to left,rgba(0,0,0,.14),transparent)}.strct-dg-host--sticky .strct-dg__expandcol,.strct-dg-host--sticky .strct-dg__expandcell{width:36px;min-width:36px;max-width:36px;box-sizing:border-box}.strct-dg-host--sticky .strct-dg__sel{width:40px;min-width:40px;max-width:40px;box-sizing:border-box}.strct-dg-host--sticky tbody .strct-dg__cell--sticky{background:var(--bg-1)}[data-theme=dark] .strct-dg-host--sticky tbody .strct-dg__cell--sticky{background:var(--bg-3)}.strct-dg-host--sticky tbody tr:hover .strct-dg__cell--sticky{background:linear-gradient(var(--acc-s),var(--acc-s)) var(--bg-1)}[data-theme=dark] .strct-dg-host--sticky tbody tr:hover .strct-dg__cell--sticky{background:linear-gradient(var(--acc-s),var(--acc-s)) var(--bg-3)}.strct-dg-host--sticky tbody .strct-dg__row--selected .strct-dg__cell--sticky{background:linear-gradient(var(--acc-m),var(--acc-m)) var(--bg-1)}[data-theme=dark] .strct-dg-host--sticky tbody .strct-dg__row--selected .strct-dg__cell--sticky{background:linear-gradient(var(--acc-m),var(--acc-m)) var(--bg-3)}.strct-dg{width:100%;border-collapse:collapse;font-size:13px;overflow:hidden;background:var(--bg-2)}.strct-dg-host:not(:has(.strct-dg__toolbar)) .strct-dg{border-start-start-radius:9px;border-start-end-radius:9px}.strct-dg-host:not(:has(.strct-dg__foot)) .strct-dg{border-end-start-radius:9px;border-end-end-radius:9px}.strct-dg th,.strct-dg td{padding:9px 13px;text-align:start;border-bottom:1px solid var(--b1)}.strct-dg tbody td{background:var(--bg-1)}[data-theme=dark] .strct-dg tbody td{background:var(--bg-3)}.strct-dg-host--compact .strct-dg th,.strct-dg-host--compact .strct-dg td{padding:5px 11px}.strct-dg-host--singleline .strct-dg tbody tr:not(.strct-dg__detailrow)>td{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:360px}.strct-dg th{position:relative;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--t2);background:var(--bg-2);white-space:nowrap;-webkit-user-select:none;user-select:none}.strct-dg__th--sortable{cursor:pointer}.strct-dg__th--sortable:hover{color:var(--t1)}.strct-dg__th--sortable:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-dg__hd{display:inline-flex;align-items:center;gap:5px}.strct-dg__sorticon{color:var(--t3)}.strct-dg__th--sortable:hover .strct-dg__sorticon{color:var(--acc)}.strct-dg__resize{position:absolute;inset-inline-end:0;top:0;bottom:0;width:4px;cursor:col-resize;background:transparent;z-index:calc(var(--z-base) + 1)}.strct-dg__resize:hover{background:var(--acc)}.strct-dg td{color:var(--t1)}.strct-dg tbody tr:last-child td{border-bottom:0}.strct-dg tbody tr:not(.strct-dg__detailrow):hover td{background:var(--acc-s)}.strct-dg tbody .strct-dg__row--selected td{background:var(--acc-m)}.strct-dg__sel{width:1%;white-space:nowrap}.strct-dg__sel input{accent-color:var(--acc);width:15px;height:15px;cursor:pointer}.strct-dg__expandcol,.strct-dg__expandcell{width:1%;white-space:nowrap}.strct-dg__actioncol,.strct-dg__actioncell{width:1%;white-space:nowrap;text-align:end}.strct-dg__kebab{display:inline-flex;padding:4px;border:0;border-radius:5px;background:transparent;color:var(--t3);cursor:pointer;transition:color .14s ease,background .14s ease}.strct-dg__kebab:hover{color:var(--t1);background:var(--bg-3)}.strct-dg__expandbtn{display:inline-flex;padding:3px;border:0;border-radius:4px;background:transparent;color:var(--t3);cursor:pointer;transition:transform .15s ease,color .15s ease}.strct-dg__expandbtn:hover{color:var(--t1);background:var(--bg-3)}.strct-dg__expandbtn--open{transform:rotate(90deg);color:var(--acc)}.strct-dg__detailbtn{display:inline-flex;padding:3px;border:0;border-radius:4px;background:transparent;color:var(--t3);cursor:pointer;transition:color .14s ease,background .14s ease}.strct-dg__detailbtn:hover{color:var(--acc);background:var(--bg-3)}.strct-dg__detailbtn--active{color:var(--acc);background:var(--acc-m)}.strct-dg__detailrow td{background:var(--bg-2);padding:0}.strct-dg__detail{padding:14px 16px;font-size:13px;color:var(--t2)}.strct-dg__layout{display:flex;align-items:flex-start;min-width:0}.strct-dg__layout--paned{gap:0}.strct-dg__layout--paned .strct-dg__scroll{flex:0 0 auto;width:260px;min-width:260px;max-width:260px}.strct-dg__layout--paned .strct-dg{width:260px;min-width:260px;max-width:260px;flex-shrink:0;border-start-end-radius:0;border-end-end-radius:0}.strct-dg__row--clickable{cursor:pointer}.strct-dg tbody .strct-dg__row--active td{background:var(--acc-m)}.strct-dg__layout--paned .strct-dg__row--active td:last-child{position:relative;padding-inline-end:26px}.strct-dg__layout--paned .strct-dg__row--active td:last-child:after{content:\"\";position:absolute;inset-inline-end:11px;top:50%;width:6px;height:6px;border-top:1.6px solid var(--acc);border-inline-end:1.6px solid var(--acc);transform:translateY(-50%) rotate(45deg)}.strct-dg__pane{flex:1;min-width:0;align-self:stretch;background:var(--bg-1);border:1px solid var(--b2);border-inline-start:2px solid var(--acc);border-radius:8px;border-start-start-radius:0;border-end-start-radius:0;overflow:hidden;animation:strct-dg-pane-in .14s ease}.strct-dg__pane-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 14px;border-bottom:1px solid var(--b1);font-size:13px;font-weight:600;color:var(--t1)}.strct-dg__pane-close{display:inline-flex;padding:3px;border:0;border-radius:4px;background:transparent;color:var(--t3);cursor:pointer}.strct-dg__pane-close:hover{color:var(--t1);background:var(--bg-3)}.strct-dg__pane-body{padding:14px 16px;font-size:13px;color:var(--t2)}@keyframes strct-dg-pane-in{0%{opacity:0;transform:translate(8px)}}@keyframes strct-skeleton-pulse{0%,to{opacity:.4}50%{opacity:.7}}.strct-dg__skeleton-block{height:12px;border-radius:var(--radius-sm);background:linear-gradient(90deg,var(--bg-3) 25%,var(--skeleton-hi, var(--acc18)) 50%,var(--bg-3) 75%);background-size:200% 100%;animation:strct-dg-skeleton-sweep 1.1s linear infinite}@keyframes strct-dg-skeleton-sweep{0%{background-position:100% 0}to{background-position:-100% 0}}@media(prefers-reduced-motion:reduce){.strct-dg__skeleton-block{animation:none;background:var(--skeleton-hi, var(--acc18))}}.strct-dg__skeleton-row td{border-bottom:1px solid var(--b1)}.strct-dg__empty{text-align:center;color:var(--t3);padding:22px}.strct-dg__quickfilter{min-width:180px;max-width:260px}.strct-dg__quickfilter--end{order:2;margin-inline-start:auto}.strct-dg__filternote--end{order:3}.strct-dg__filternote{font-size:11.5px;color:var(--t3);font-variant-numeric:tabular-nums;white-space:nowrap}.strct-dg__toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:9px 14px;border-bottom:1px solid var(--b2)}.strct-dg__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 14px;border-top:1px solid var(--b2);flex-wrap:wrap}.strct-dg__foot-left,.strct-dg__foot-right{display:flex;align-items:center;gap:12px}.strct-dg__actions{position:relative}.strct-dg__chooser-menu{position:absolute;bottom:calc(100% + 6px);inset-inline-start:0;z-index:var(--z-sticky);min-width:180px;background:var(--bg-1);border:1px solid var(--b2);border-radius:8px;box-shadow:var(--shadow-pop);padding:6px;display:flex;flex-direction:column;gap:2px}.strct-dg__chooser-menu--right{inset-inline-start:auto;inset-inline-end:0}.strct-dg__chooser-item{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:6px;cursor:pointer;font-size:12px;color:var(--t1);transition:background .1s ease;-webkit-user-select:none;user-select:none}.strct-dg__chooser-item:hover{background:var(--bg-3)}.strct-dg__count{font-size:12px;color:var(--t2)}.strct-dg__count-sep{margin:0 8px;color:var(--b2)}.strct-dg__count-sel{color:var(--acc)}.strct-dg__filterbtn{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin-inline-start:2px;padding:0;border:0;border-radius:4px;background:transparent;color:var(--t3);cursor:pointer;vertical-align:middle}.strct-dg__filterbtn:hover{color:var(--t1);background:var(--bg-3)}.strct-dg__filterbtn--active{color:var(--acc)}.strct-dg__filterbtn:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}.strct-dg__filterpanel{position:absolute;z-index:calc(var(--z-dropdown) + 10);display:flex;flex-direction:column;gap:6px;min-width:180px;padding:10px;background:var(--bg-1);border:1px solid var(--b2);border-radius:7px;box-shadow:var(--shh);font-weight:400;text-transform:none;letter-spacing:normal;white-space:nowrap}.strct-dg__filterinput{padding:5px 8px;border:1px solid var(--b2);border-radius:var(--radius-sm);background:var(--bg-2);color:var(--t1);font-family:var(--font);font-size:12px}.strct-dg__filterinput:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}.strct-dg__filteropt{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--t1);cursor:pointer}.strct-dg__filterclear{align-self:flex-start;padding:3px 8px;border:1px solid var(--b2);border-radius:var(--radius-sm);background:transparent;color:var(--t2);font-family:var(--font);font-size:11.5px;cursor:pointer}.strct-dg__filterclear:hover:not(:disabled){color:var(--t1);background:var(--bg-3)}.strct-dg__filterclear:disabled{color:var(--t4);cursor:default}.strct-dg tbody tr[tabindex]:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-dg__treepad{display:inline-block;height:1px;vertical-align:middle}.strct-dg__treebtn{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-inline-end:4px;padding:0;border:0;border-radius:4px;background:transparent;color:var(--t3);cursor:pointer;vertical-align:middle}.strct-dg__treebtn:hover{color:var(--t1);background:var(--bg-3)}.strct-dg__treebtn:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}.strct-dg__treebtn strct-icon{transition:transform .15s ease}.strct-dg__treebtn--open strct-icon{transform:rotate(90deg)}.strct-dg__treebtn--leaf{cursor:default;pointer-events:none}@media(prefers-reduced-motion:reduce){.strct-dg__treebtn strct-icon{transition:none}}.strct-dg__cell--editable{cursor:text;position:relative}.strct-dg__cell--editable:hover{box-shadow:inset 0 0 0 1px var(--b2)}.strct-dg__cell--editable:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--acc50)}.strct-dg__editpencil{position:absolute;top:50%;inset-inline-end:6px;transform:translateY(-50%);color:var(--t3);opacity:0;pointer-events:none}td:hover>.strct-dg__editpencil,td:focus-within>.strct-dg__editpencil{opacity:1}.strct-dg__editinput{width:100%;box-sizing:border-box;padding:3px 6px;border:1px solid var(--acc);border-radius:var(--radius-sm);background:var(--bg-1);color:var(--t1);font:inherit}.strct-dg__editselect,.strct-dg__editnumber{display:block;width:100%}.strct-dg__editinput:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}\n"] }]
16447
16592
  }], ctorParameters: () => [], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: true }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], expandable: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandable", required: false }] }], detailPane: [{ type: i0.Input, args: [{ isSignal: true, alias: "detailPane", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], singleLine: [{ type: i0.Input, args: [{ isSignal: true, alias: "singleLine", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], resizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizable", required: false }] }], columnChooser: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnChooser", required: false }] }], sync: [{ type: i0.Input, args: [{ isSignal: true, alias: "sync", required: false }] }], footerActionsDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "footerActionsDisabled", required: false }] }], rowId: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowId", required: false }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], selectedId: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedId", required: false }] }, { type: i0.Output, args: ["selectedIdChange"] }], rowSelectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowSelectable", required: false }] }], flush: [{ type: i0.Input, args: [{ isSignal: true, alias: "flush", required: false }] }], caption: [{ type: i0.Input, args: [{ isSignal: true, alias: "caption", required: false }] }], paging: [{ type: i0.Input, args: [{ isSignal: true, alias: "paging", required: false }] }], hasMore: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasMore", required: false }] }], loadingMore: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingMore", required: false }] }], moreTotal: [{ type: i0.Input, args: [{ isSignal: true, alias: "moreTotal", required: false }] }], loadMore: [{ type: i0.Output, args: ["loadMore"] }], groupSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupSelect", required: false }] }], rowActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowActions", required: false }] }], initialSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialSelection", required: false }] }], selectedIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedIds", required: false }] }, { type: i0.Output, args: ["selectedIdsChange"] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], virtual: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtual", required: false }] }], viewportHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewportHeight", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], editHint: [{ type: i0.Input, args: [{ isSignal: true, alias: "editHint", required: false }] }], rowHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowHeight", required: false }] }], lazy: [{ type: i0.Input, args: [{ isSignal: true, alias: "lazy", required: false }] }], total: [{ type: i0.Input, args: [{ isSignal: true, alias: "total", required: false }] }], stateKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "stateKey", required: false }] }], columnState: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnState", required: false }] }, { type: i0.Output, args: ["columnStateChange"] }], reorderable: [{ type: i0.Input, args: [{ isSignal: true, alias: "reorderable", required: false }] }], groupBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupBy", required: false }] }], filters: [{ type: i0.Input, args: [{ isSignal: true, alias: "filters", required: false }] }, { type: i0.Output, args: ["filtersChange"] }], quickFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "quickFilter", required: false }] }, { type: i0.Output, args: ["quickFilterChange"] }], quickFilterFields: [{ type: i0.Input, args: [{ isSignal: true, alias: "quickFilterFields", required: false }] }], quickFilterable: [{ type: i0.Input, args: [{ isSignal: true, alias: "quickFilterable", required: false }] }], quickFilterAlign: [{ type: i0.Input, args: [{ isSignal: true, alias: "quickFilterAlign", required: false }] }], childrenKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "childrenKey", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], syncChange: [{ type: i0.Output, args: ["syncChange"] }], rowAction: [{ type: i0.Output, args: ["rowAction"] }], lazyLoad: [{ type: i0.Output, args: ["lazyLoad"] }], cellEdit: [{ type: i0.Output, args: ["cellEdit"] }], detailDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StrctRowDetailDef), { isSignal: true }] }], actionBarDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StrctDatagridActionBar), { isSignal: true }] }], actionBarCaptionDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StrctDatagridActionBarCaption), { isSignal: true }] }], cellDefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => StrctCellDef), { isSignal: true }] }], onDocClickOverlays: [{
16448
16593
  type: HostListener,
16449
16594
  args: ['document:click', ['$event']]
@@ -23927,15 +24072,19 @@ class StrctLegend {
23927
24072
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctLegend, isStandalone: true, selector: "strct-legend", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemToggle: "itemToggle" }, host: { properties: { "class.strct-legend--vertical": "orientation() === 'vertical'", "class.strct-legend--picker": "appearance() === 'picker'" }, classAttribute: "strct-legend" }, ngImport: i0, template: `
23928
24073
  <ul class="strct-legend__list" role="list">
23929
24074
  @for (item of items(); track item.label) {
23930
- <li class="strct-legend__row" [class.strct-legend__row--muted]="item.muted">
24075
+ <li
24076
+ class="strct-legend__row"
24077
+ [class.strct-legend__row--muted]="item.muted"
24078
+ [attr.title]="!interactive() && item.description ? item.description : null"
24079
+ >
23931
24080
  @if (interactive()) {
23932
24081
  <button
23933
24082
  type="button"
23934
24083
  class="strct-legend__hit"
23935
24084
  [attr.aria-pressed]="!item.off"
23936
24085
  [disabled]="item.disabled || null"
23937
- [attr.title]="item.reason || null"
23938
- [attr.aria-description]="item.reason || null"
24086
+ [attr.title]="item.reason || item.description || null"
24087
+ [attr.aria-description]="item.reason || item.description || null"
23939
24088
  (click)="itemToggle.emit(item.label)"
23940
24089
  >
23941
24090
  <span
@@ -23978,15 +24127,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
23978
24127
  args: [{ selector: 'strct-legend', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [StrctIcon], template: `
23979
24128
  <ul class="strct-legend__list" role="list">
23980
24129
  @for (item of items(); track item.label) {
23981
- <li class="strct-legend__row" [class.strct-legend__row--muted]="item.muted">
24130
+ <li
24131
+ class="strct-legend__row"
24132
+ [class.strct-legend__row--muted]="item.muted"
24133
+ [attr.title]="!interactive() && item.description ? item.description : null"
24134
+ >
23982
24135
  @if (interactive()) {
23983
24136
  <button
23984
24137
  type="button"
23985
24138
  class="strct-legend__hit"
23986
24139
  [attr.aria-pressed]="!item.off"
23987
24140
  [disabled]="item.disabled || null"
23988
- [attr.title]="item.reason || null"
23989
- [attr.aria-description]="item.reason || null"
24141
+ [attr.title]="item.reason || item.description || null"
24142
+ [attr.aria-description]="item.reason || item.description || null"
23990
24143
  (click)="itemToggle.emit(item.label)"
23991
24144
  >
23992
24145
  <span
@@ -24378,6 +24531,13 @@ class StrctWindow {
24378
24531
  /** A leading icon in the title bar, as `strct-page-header [icon]` has. */
24379
24532
  icon = input('', /* @ts-ignore */
24380
24533
  ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
24534
+ /**
24535
+ * Whatever the consumer needs to recognise this window elsewhere — a session
24536
+ * id, the object it shows. The dock passes it to `[strctWindowDockItem]`, so
24537
+ * an app no longer keeps its own window-to-thing index.
24538
+ */
24539
+ data = input(null, /* @ts-ignore */
24540
+ ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
24381
24541
  /**
24382
24542
  * What a double-click on the title bar does. A console whose content has a
24383
24543
  * real full screen of its own wants `none` and its own answer to
@@ -24389,6 +24549,12 @@ class StrctWindow {
24389
24549
  closed = output();
24390
24550
  /** The title bar was double-clicked, whatever `titleDblclick` then did. */
24391
24551
  titleDblclicked = output();
24552
+ /**
24553
+ * A pointer landed outside the window while `closeOnOutside="minimize"`,
24554
+ * before it is acted on. Call `cancel()` to keep the window as it is — a
24555
+ * console that owns its own shade, a drag that started on the page.
24556
+ */
24557
+ outsidePointer = output();
24392
24558
  CORNERS = ['nw', 'ne', 'sw', 'se'];
24393
24559
  titleId = `strct-window-${++windowCounter}`;
24394
24560
  L = computed(() => ({
@@ -24419,10 +24585,51 @@ class StrctWindow {
24419
24585
  return;
24420
24586
  const frame = this.host.nativeElement.querySelector('.strct-window__frame');
24421
24587
  const target = event.target;
24422
- if (frame && target instanceof Node && frame.contains(target))
24588
+ if (!(target instanceof Node))
24589
+ return;
24590
+ if (frame && frame.contains(target))
24423
24591
  return;
24424
- this.zone.run(() => this.minimize());
24592
+ // A menu, a modal or a toast opened from inside the window is appended to
24593
+ // <body>, so "not in the frame" called it outside and minimised the window
24594
+ // the operator was working in — on the very click that chose the menu
24595
+ // entry. Anything stacked at or above the window belongs to it.
24596
+ if (this.inOverlayAbove(target, frame))
24597
+ return;
24598
+ let vetoed = false;
24599
+ this.zone.run(() => {
24600
+ this.outsidePointer.emit({ target, cancel: () => (vetoed = true) });
24601
+ if (!vetoed)
24602
+ this.minimize();
24603
+ });
24425
24604
  };
24605
+ /**
24606
+ * Whether the pointer landed in something stacked at or above this window:
24607
+ * a menu, a modal, a toast, a popover. They are rendered at the document's
24608
+ * root, so containment cannot answer this — the stacking order can.
24609
+ */
24610
+ inOverlayAbove(target, frame) {
24611
+ const view = this.doc.defaultView;
24612
+ if (!view || !frame)
24613
+ return false;
24614
+ // `auto` — and the empty string a non-rendering environment returns — mean
24615
+ // "not stacked", not zero. Reading them as 0 would call the whole page an
24616
+ // overlay the moment the window's own z-index could not be read.
24617
+ const zOf = (el) => {
24618
+ const raw = view.getComputedStyle(el).zIndex;
24619
+ const n = raw === '' || raw === 'auto' ? NaN : Number(raw);
24620
+ return Number.isFinite(n) ? n : NaN;
24621
+ };
24622
+ const mine = zOf(frame);
24623
+ if (!Number.isFinite(mine))
24624
+ return false;
24625
+ let el = target instanceof Element ? target : target.parentElement;
24626
+ for (; el && el !== this.doc.body; el = el.parentElement) {
24627
+ const z = zOf(el);
24628
+ if (Number.isFinite(z) && z >= mine)
24629
+ return true;
24630
+ }
24631
+ return false;
24632
+ }
24426
24633
  constructor() {
24427
24634
  this.service.register(this);
24428
24635
  effect(() => {
@@ -24609,7 +24816,7 @@ class StrctWindow {
24609
24816
  this.fallback.set(clamped);
24610
24817
  }
24611
24818
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctWindow, deps: [], target: i0.ɵɵFactoryTarget.Component });
24612
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctWindow, isStandalone: true, selector: "strct-window", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, minimized: { classPropertyName: "minimized", publicName: "minimized", isSignal: true, isRequired: false, transformFunction: null }, maximized: { classPropertyName: "maximized", publicName: "maximized", isSignal: true, isRequired: false, transformFunction: null }, bounds: { classPropertyName: "bounds", publicName: "bounds", isSignal: true, isRequired: false, transformFunction: null }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, palette: { classPropertyName: "palette", publicName: "palette", isSignal: true, isRequired: false, transformFunction: null }, closeOnOutside: { classPropertyName: "closeOnOutside", publicName: "closeOnOutside", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, resizeLabel: { classPropertyName: "resizeLabel", publicName: "resizeLabel", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, titleDblclick: { classPropertyName: "titleDblclick", publicName: "titleDblclick", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", minimized: "minimizedChange", maximized: "maximizedChange", bounds: "boundsChange", closed: "closed", titleDblclicked: "titleDblclicked" }, host: { classAttribute: "strct-window" }, ngImport: i0, template: `
24819
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctWindow, isStandalone: true, selector: "strct-window", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, minimized: { classPropertyName: "minimized", publicName: "minimized", isSignal: true, isRequired: false, transformFunction: null }, maximized: { classPropertyName: "maximized", publicName: "maximized", isSignal: true, isRequired: false, transformFunction: null }, bounds: { classPropertyName: "bounds", publicName: "bounds", isSignal: true, isRequired: false, transformFunction: null }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, palette: { classPropertyName: "palette", publicName: "palette", isSignal: true, isRequired: false, transformFunction: null }, closeOnOutside: { classPropertyName: "closeOnOutside", publicName: "closeOnOutside", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, resizeLabel: { classPropertyName: "resizeLabel", publicName: "resizeLabel", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, titleDblclick: { classPropertyName: "titleDblclick", publicName: "titleDblclick", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", minimized: "minimizedChange", maximized: "maximizedChange", bounds: "boundsChange", closed: "closed", titleDblclicked: "titleDblclicked", outsidePointer: "outsidePointer" }, host: { classAttribute: "strct-window" }, ngImport: i0, template: `
24613
24820
  @if (open() && !minimized()) {
24614
24821
  <div
24615
24822
  class="strct-window__frame"
@@ -24782,7 +24989,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
24782
24989
  </div>
24783
24990
  }
24784
24991
  `, host: { class: 'strct-window' }, styles: [".strct-window{display:contents}.strct-window__frame{position:fixed;display:flex;flex-direction:column;min-width:0;border:1px solid var(--b2);border-radius:var(--radius-lg);background:var(--bg-1);color:var(--t1);box-shadow:var(--shadow-overlay, 0 12px 40px rgba(0, 0, 0, .32));overflow:hidden}.strct-window__frame--max{inset:var(--space-3);width:auto;height:auto}.strct-window__icon{flex:none;color:var(--t3)}.strct-window__title{display:flex;align-items:center;gap:var(--space-2);padding:6px 6px 6px var(--space-3);border-block-end:1px solid var(--b1);background:var(--bg-2);cursor:move;-webkit-user-select:none;user-select:none;touch-action:none}.strct-window__title:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-window__heading{font-size:var(--text-sm);font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.strct-window__meta,.strct-window__actions{display:inline-flex;align-items:center;gap:6px}.strct-window__actions{margin-inline-start:auto}.strct-window__controls{display:inline-flex;align-items:center;gap:2px;flex:none}.strct-window__btn{display:inline-flex;padding:4px;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--t2);cursor:pointer}.strct-window__btn:hover{background:var(--bg-3);color:var(--t1)}.strct-window__btn--close:hover{background:var(--critical-bg);color:var(--critical)}.strct-window__body{flex:1;min-height:0;overflow:auto}.strct-window__status:empty{display:none}.strct-window__status{border-block-start:1px solid var(--b1);padding:4px var(--space-3);font-size:var(--text-sm);color:var(--t3);background:var(--bg-2)}.strct-window__rz{position:absolute;width:14px;height:14px;padding:0;border:0;background:transparent}.strct-window__rz:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-window__rz--nw{inset-block-start:0;inset-inline-start:0;cursor:nwse-resize}.strct-window__rz--ne{inset-block-start:0;inset-inline-end:0;cursor:nesw-resize}.strct-window__rz--sw{inset-block-end:0;inset-inline-start:0;cursor:nesw-resize}.strct-window__rz--se{inset-block-end:0;inset-inline-end:0;cursor:nwse-resize}\n"] }]
24785
- }], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], minimized: [{ type: i0.Input, args: [{ isSignal: true, alias: "minimized", required: false }] }, { type: i0.Output, args: ["minimizedChange"] }], maximized: [{ type: i0.Input, args: [{ isSignal: true, alias: "maximized", required: false }] }, { type: i0.Output, args: ["maximizedChange"] }], bounds: [{ type: i0.Input, args: [{ isSignal: true, alias: "bounds", required: false }] }, { type: i0.Output, args: ["boundsChange"] }], heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }], resizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizable", required: false }] }], minWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidth", required: false }] }], minHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "minHeight", required: false }] }], palette: [{ type: i0.Input, args: [{ isSignal: true, alias: "palette", required: false }] }], closeOnOutside: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnOutside", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], resizeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizeLabel", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], titleDblclick: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleDblclick", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], titleDblclicked: [{ type: i0.Output, args: ["titleDblclicked"] }] } });
24992
+ }], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], minimized: [{ type: i0.Input, args: [{ isSignal: true, alias: "minimized", required: false }] }, { type: i0.Output, args: ["minimizedChange"] }], maximized: [{ type: i0.Input, args: [{ isSignal: true, alias: "maximized", required: false }] }, { type: i0.Output, args: ["maximizedChange"] }], bounds: [{ type: i0.Input, args: [{ isSignal: true, alias: "bounds", required: false }] }, { type: i0.Output, args: ["boundsChange"] }], heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }], resizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizable", required: false }] }], minWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidth", required: false }] }], minHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "minHeight", required: false }] }], palette: [{ type: i0.Input, args: [{ isSignal: true, alias: "palette", required: false }] }], closeOnOutside: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnOutside", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], resizeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizeLabel", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], titleDblclick: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleDblclick", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], titleDblclicked: [{ type: i0.Output, args: ["titleDblclicked"] }], outsidePointer: [{ type: i0.Output, args: ["outsidePointer"] }] } });
24786
24993
  /**
24787
24994
  * What a dock chip shows, when the window's heading is not enough — a status
24788
24995
  * dot, an icon, a count. The window is the context:
@@ -24812,6 +25019,12 @@ class StrctWindowDock {
24812
25019
  /** The name of each chip's close button. */
24813
25020
  closeLabel = input((heading) => `Close ${heading}`, /* @ts-ignore */
24814
25021
  ...(ngDevMode ? [{ debugName: "closeLabel" }] : /* istanbul ignore next */ []));
25022
+ /**
25023
+ * The name of each chip itself — what restoring it does: "Show the console
25024
+ * of APP02". The window is passed, so its `data` can shape the sentence.
25025
+ */
25026
+ restoreLabel = input((w) => `Restore ${w.heading()}`, /* @ts-ignore */
25027
+ ...(ngDevMode ? [{ debugName: "restoreLabel" }] : /* istanbul ignore next */ []));
24815
25028
  /** What each chip shows, when a heading is not enough. */
24816
25029
  itemTpl = contentChild(StrctWindowDockItem, { ...(ngDevMode ? { debugName: "itemTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
24817
25030
  /**
@@ -24831,16 +25044,21 @@ class StrctWindowDock {
24831
25044
  w.restore();
24832
25045
  }
24833
25046
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctWindowDock, deps: [], target: i0.ɵɵFactoryTarget.Component });
24834
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctWindowDock, isStandalone: true, selector: "strct-window-dock", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null }, restoreMode: { classPropertyName: "restoreMode", publicName: "restoreMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { restoreRequest: "restoreRequest" }, host: { attributes: { "role": "group" }, properties: { "attr.aria-label": "label()" }, classAttribute: "strct-windock" }, queries: [{ propertyName: "itemTpl", first: true, predicate: StrctWindowDockItem, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: `
25047
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctWindowDock, isStandalone: true, selector: "strct-window-dock", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null }, restoreLabel: { classPropertyName: "restoreLabel", publicName: "restoreLabel", isSignal: true, isRequired: false, transformFunction: null }, restoreMode: { classPropertyName: "restoreMode", publicName: "restoreMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { restoreRequest: "restoreRequest" }, host: { attributes: { "role": "group" }, properties: { "attr.aria-label": "label()" }, classAttribute: "strct-windock" }, queries: [{ propertyName: "itemTpl", first: true, predicate: StrctWindowDockItem, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: `
24835
25048
  @for (w of service.minimized(); track w) {
24836
25049
  <span class="strct-windock__chip">
24837
- <button type="button" class="strct-windock__open" (click)="onRestore(w)">
25050
+ <button
25051
+ type="button"
25052
+ class="strct-windock__open"
25053
+ [attr.aria-label]="restoreLabel()(w)"
25054
+ (click)="onRestore(w)"
25055
+ >
24838
25056
  @if (itemTpl(); as tpl) {
24839
25057
  <!-- A chip can say more than a heading: a status dot, an icon, a
24840
25058
  count. The window is the template's context. -->
24841
25059
  <ng-container
24842
25060
  [ngTemplateOutlet]="tpl"
24843
- [ngTemplateOutletContext]="{ $implicit: w, window: w }"
25061
+ [ngTemplateOutletContext]="{ $implicit: w, window: w, data: w.data() }"
24844
25062
  />
24845
25063
  } @else {
24846
25064
  {{ w.heading() }}
@@ -24863,13 +25081,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
24863
25081
  args: [{ selector: 'strct-window-dock', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [StrctIcon, NgTemplateOutlet], template: `
24864
25082
  @for (w of service.minimized(); track w) {
24865
25083
  <span class="strct-windock__chip">
24866
- <button type="button" class="strct-windock__open" (click)="onRestore(w)">
25084
+ <button
25085
+ type="button"
25086
+ class="strct-windock__open"
25087
+ [attr.aria-label]="restoreLabel()(w)"
25088
+ (click)="onRestore(w)"
25089
+ >
24867
25090
  @if (itemTpl(); as tpl) {
24868
25091
  <!-- A chip can say more than a heading: a status dot, an icon, a
24869
25092
  count. The window is the template's context. -->
24870
25093
  <ng-container
24871
25094
  [ngTemplateOutlet]="tpl"
24872
- [ngTemplateOutletContext]="{ $implicit: w, window: w }"
25095
+ [ngTemplateOutletContext]="{ $implicit: w, window: w, data: w.data() }"
24873
25096
  />
24874
25097
  } @else {
24875
25098
  {{ w.heading() }}
@@ -24890,7 +25113,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
24890
25113
  role: 'group',
24891
25114
  '[attr.aria-label]': 'label()',
24892
25115
  }, styles: [".strct-windock{display:inline-flex;align-items:center;gap:6px}.strct-windock__chip{display:inline-flex;align-items:center;gap:2px;padding-inline:8px 4px;border:1px solid var(--b2);border-radius:var(--radius-full, 999px);background:var(--bg-1);font-size:12px}.strct-windock__open,.strct-windock__close{border:0;background:none;color:inherit;font:inherit;cursor:pointer;padding:3px 2px;border-radius:var(--radius-sm)}.strct-windock__open:hover{color:var(--acc)}.strct-windock__close{display:inline-flex;color:var(--t3)}.strct-windock__close:hover{color:var(--critical)}.strct-windock__open:focus-visible,.strct-windock__close:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}\n"] }]
24893
- }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], closeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeLabel", required: false }] }], itemTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StrctWindowDockItem), { ...{ read: TemplateRef }, isSignal: true }] }], restoreMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "restoreMode", required: false }] }], restoreRequest: [{ type: i0.Output, args: ["restoreRequest"] }] } });
25116
+ }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], closeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeLabel", required: false }] }], restoreLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "restoreLabel", required: false }] }], itemTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StrctWindowDockItem), { ...{ read: TemplateRef }, isSignal: true }] }], restoreMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "restoreMode", required: false }] }], restoreRequest: [{ type: i0.Output, args: ["restoreRequest"] }] } });
24894
25117
 
24895
25118
  /** A card the message carries — an action to approve, a result to read. */
24896
25119
  class StrctChatAttachment {