@akcelik/strct 5.1.0 → 5.3.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.
@@ -8197,6 +8197,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
8197
8197
  type: Directive,
8198
8198
  args: [{ selector: 'ng-template[strctFieldHint]' }]
8199
8199
  }] });
8200
+ /**
8201
+ * A value that is read-only *here* — a name, a badge, a switch that only shows
8202
+ * state — placed in an inline field's control column. Without it the text sits
8203
+ * 9px above the label's line, because the column centres on a 34px control.
8204
+ */
8205
+ class StrctFieldValue {
8206
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctFieldValue, deps: [], target: i0.ɵɵFactoryTarget.Directive });
8207
+ 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 });
8208
+ }
8209
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctFieldValue, decorators: [{
8210
+ type: Directive,
8211
+ args: [{ selector: '[strctFieldValue]', host: { class: 'strct-field__value' } }]
8212
+ }] });
8200
8213
  /**
8201
8214
  * Wrapper that opts a run of `layout="inline"` fields out of the hairlines
8202
8215
  * between them — for settings that belong together and should read as one
@@ -8394,7 +8407,7 @@ class StrctField {
8394
8407
  } @else if (hint()) {
8395
8408
  <div class="strct-field__msg strct-field__msg--hint" [id]="hintId">{{ hint() }}</div>
8396
8409
  }
8397
- `, 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--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{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 });
8410
+ `, 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 });
8398
8411
  }
8399
8412
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctField, decorators: [{
8400
8413
  type: Component,
@@ -8455,7 +8468,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
8455
8468
  '[class.strct-field--inline]': "layout() === 'inline'",
8456
8469
  '[class.strct-field--prefix]': 'hasPrefix()',
8457
8470
  '[class.strct-field--suffix]': 'hasSuffix()',
8458
- }, 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--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{padding-block-start:0}.strct-field--inline>.strct-field__msg--hint{padding-block-end:0}}\n"] }]
8471
+ }, 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"] }]
8459
8472
  }], 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 }] }] } });
8460
8473
 
8461
8474
  /**
@@ -8464,10 +8477,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
8464
8477
  * <select strctInput>…</select>
8465
8478
  * The visual definition lives in `strct/styles/_forms.scss` (shipped via the
8466
8479
  * theme entry point), so this directive only attaches the class.
8480
+ *
8481
+ * `mono` sets the monospace face, for a PEM block, a `key=value` mapping or an
8482
+ * identifier — the three things consumers were restyling by hand.
8467
8483
  */
8468
8484
  class StrctInput {
8485
+ /** Monospace text with tabular figures — a PEM block, an id, a mapping. */
8486
+ mono = input(false, { ...(ngDevMode ? { debugName: "mono" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
8469
8487
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctInput, deps: [], target: i0.ɵɵFactoryTarget.Directive });
8470
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.4", type: StrctInput, isStandalone: true, selector: "input[strctInput], textarea[strctInput], select[strctInput], input[strct-input], textarea[strct-input], select[strct-input]", host: { classAttribute: "strct-control" }, ngImport: i0 });
8488
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.4", type: StrctInput, isStandalone: true, selector: "input[strctInput], textarea[strctInput], select[strctInput], input[strct-input], textarea[strct-input], select[strct-input]", inputs: { mono: { classPropertyName: "mono", publicName: "mono", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.strct-control--mono": "mono()" }, classAttribute: "strct-control" }, ngImport: i0 });
8471
8489
  }
8472
8490
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctInput, decorators: [{
8473
8491
  type: Directive,
@@ -8477,9 +8495,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
8477
8495
  // failure that follows. The alias is kinder than a warning and costs nothing.
8478
8496
  selector: 'input[strctInput], textarea[strctInput], select[strctInput], ' +
8479
8497
  'input[strct-input], textarea[strct-input], select[strct-input]',
8480
- host: { class: 'strct-control' },
8498
+ host: {
8499
+ class: 'strct-control',
8500
+ '[class.strct-control--mono]': 'mono()',
8501
+ },
8481
8502
  }]
8482
- }] });
8503
+ }], propDecorators: { mono: [{ type: i0.Input, args: [{ isSignal: true, alias: "mono", required: false }] }] } });
8483
8504
 
8484
8505
  /**
8485
8506
  * A description with markup in it, projected into `strct-checkbox`,
@@ -9111,6 +9132,19 @@ class StrctRange {
9111
9132
  ...(ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []));
9112
9133
  /** Display the current numeric value. */
9113
9134
  showValue = input(false, { ...(ngDevMode ? { debugName: "showValue" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
9135
+ /**
9136
+ * How the shown value reads: memory is "4 GB" and a weight is "20%", not 4
9137
+ * and 20. It formats the label only — the model stays the number.
9138
+ */
9139
+ valueFormat = input(null, /* @ts-ignore */
9140
+ ...(ngDevMode ? [{ debugName: "valueFormat" }] : /* istanbul ignore next */ []));
9141
+ /** What `showValue` prints: the format, or the number itself. */
9142
+ valueText = computed(() => {
9143
+ const v = this.value();
9144
+ const format = this.valueFormat();
9145
+ return format ? format(v) : String(v);
9146
+ }, /* @ts-ignore */
9147
+ ...(ngDevMode ? [{ debugName: "valueText" }] : /* istanbul ignore next */ []));
9114
9148
  /** Static disable; forms' setDisabledState also drives the disabled state. */
9115
9149
  disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
9116
9150
  value = signal(0, /* @ts-ignore */
@@ -9145,7 +9179,7 @@ class StrctRange {
9145
9179
  this.cvaDisabled.set(isDisabled);
9146
9180
  }
9147
9181
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctRange, deps: [], target: i0.ɵɵFactoryTarget.Component });
9148
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctRange, isStandalone: true, selector: "strct-range", inputs: { min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
9182
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctRange, isStandalone: true, selector: "strct-range", inputs: { min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null }, valueFormat: { classPropertyName: "valueFormat", publicName: "valueFormat", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
9149
9183
  { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => StrctRange), multi: true },
9150
9184
  ], ngImport: i0, template: `
9151
9185
  <input
@@ -9161,7 +9195,7 @@ class StrctRange {
9161
9195
  (blur)="onTouched()"
9162
9196
  />
9163
9197
  @if (showValue()) {
9164
- <span class="strct-range__value">{{ value() }}</span>
9198
+ <span class="strct-range__value">{{ valueText() }}</span>
9165
9199
  }
9166
9200
  `, isInline: true, styles: [".strct-range{display:inline-flex;align-items:center;gap:10px;width:100%}.strct-range__input{flex:1;appearance:none;height:5px;border-radius:3px;cursor:pointer;background:linear-gradient(to right,var(--acc) 0 var(--strct-range-fill, 0%),var(--bg-3) var(--strct-range-fill, 0%) 100%)}[dir=rtl] .strct-range__input{background:linear-gradient(to left,var(--acc) 0 var(--strct-range-fill, 0%),var(--bg-3) var(--strct-range-fill, 0%) 100%)}.strct-range__input:disabled{opacity:.5;cursor:not-allowed}.strct-range__input::-webkit-slider-thumb{appearance:none;width:15px;height:15px;border-radius:50%;background:var(--acc);border:2px solid var(--bg-1);box-shadow:var(--sh)}.strct-range__input::-moz-range-thumb{width:15px;height:15px;border-radius:50%;background:var(--acc);border:2px solid var(--bg-1);box-shadow:var(--sh)}.strct-range__input:focus-visible{outline:none}.strct-range__input:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px var(--acc18)}.strct-range__value{min-width:30px;text-align:end;font-size:12px;font-family:var(--mono);color:var(--t2)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
9167
9201
  }
@@ -9183,10 +9217,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
9183
9217
  (blur)="onTouched()"
9184
9218
  />
9185
9219
  @if (showValue()) {
9186
- <span class="strct-range__value">{{ value() }}</span>
9220
+ <span class="strct-range__value">{{ valueText() }}</span>
9187
9221
  }
9188
9222
  `, styles: [".strct-range{display:inline-flex;align-items:center;gap:10px;width:100%}.strct-range__input{flex:1;appearance:none;height:5px;border-radius:3px;cursor:pointer;background:linear-gradient(to right,var(--acc) 0 var(--strct-range-fill, 0%),var(--bg-3) var(--strct-range-fill, 0%) 100%)}[dir=rtl] .strct-range__input{background:linear-gradient(to left,var(--acc) 0 var(--strct-range-fill, 0%),var(--bg-3) var(--strct-range-fill, 0%) 100%)}.strct-range__input:disabled{opacity:.5;cursor:not-allowed}.strct-range__input::-webkit-slider-thumb{appearance:none;width:15px;height:15px;border-radius:50%;background:var(--acc);border:2px solid var(--bg-1);box-shadow:var(--sh)}.strct-range__input::-moz-range-thumb{width:15px;height:15px;border-radius:50%;background:var(--acc);border:2px solid var(--bg-1);box-shadow:var(--sh)}.strct-range__input:focus-visible{outline:none}.strct-range__input:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px var(--acc18)}.strct-range__value{min-width:30px;text-align:end;font-size:12px;font-family:var(--mono);color:var(--t2)}\n"] }]
9189
- }], propDecorators: { min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], showValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValue", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
9223
+ }], propDecorators: { min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], showValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValue", required: false }] }], valueFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueFormat", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
9190
9224
 
9191
9225
  const LEVEL_COLORS = [
9192
9226
  'var(--critical)',
@@ -12959,6 +12993,12 @@ class StrctNumber {
12959
12993
  /** Placeholder text when empty. */
12960
12994
  placeholder = input('', /* @ts-ignore */
12961
12995
  ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
12996
+ /**
12997
+ * The field's accessible name, for a number that is not inside a
12998
+ * `strct-field` — in a grid cell, or beside a label it does not own.
12999
+ */
13000
+ ariaLabel = input('', /* @ts-ignore */
13001
+ ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
12962
13002
  /** Accessible label of the + button (localizable). */
12963
13003
  incrementLabel = input('Increment', /* @ts-ignore */
12964
13004
  ...(ngDevMode ? [{ debugName: "incrementLabel" }] : /* istanbul ignore next */ []));
@@ -13125,7 +13165,7 @@ class StrctNumber {
13125
13165
  this.cvaDisabled.set(isDisabled);
13126
13166
  }
13127
13167
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctNumber, deps: [], target: i0.ɵɵFactoryTarget.Component });
13128
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: StrctNumber, isStandalone: true, selector: "strct-number", inputs: { min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, incrementLabel: { classPropertyName: "incrementLabel", publicName: "incrementLabel", isSignal: true, isRequired: false, transformFunction: null }, decrementLabel: { classPropertyName: "decrementLabel", publicName: "decrementLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "strct-num" }, providers: [
13168
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: StrctNumber, isStandalone: true, selector: "strct-number", inputs: { min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", 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 }, incrementLabel: { classPropertyName: "incrementLabel", publicName: "incrementLabel", isSignal: true, isRequired: false, transformFunction: null }, decrementLabel: { classPropertyName: "decrementLabel", publicName: "decrementLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "strct-num" }, providers: [
13129
13169
  { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => StrctNumber), multi: true },
13130
13170
  ], ngImport: i0, template: `
13131
13171
  <div class="strct-num__wrap">
@@ -13143,6 +13183,7 @@ class StrctNumber {
13143
13183
  inputmode="decimal"
13144
13184
  class="strct-control strct-num__input"
13145
13185
  role="spinbutton"
13186
+ [attr.aria-label]="ariaLabel() || null"
13146
13187
  [attr.aria-valuemin]="min()"
13147
13188
  [attr.aria-valuemax]="max()"
13148
13189
  [attr.aria-valuenow]="value()"
@@ -13185,6 +13226,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
13185
13226
  inputmode="decimal"
13186
13227
  class="strct-control strct-num__input"
13187
13228
  role="spinbutton"
13229
+ [attr.aria-label]="ariaLabel() || null"
13188
13230
  [attr.aria-valuemin]="min()"
13189
13231
  [attr.aria-valuemax]="max()"
13190
13232
  [attr.aria-valuenow]="value()"
@@ -13206,7 +13248,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
13206
13248
  </button>
13207
13249
  </div>
13208
13250
  `, host: { class: 'strct-num' }, styles: [".strct-num{display:block;width:100%}.strct-num__wrap{display:flex;align-items:stretch;gap:var(--space-1)}.strct-num__input{flex:1;min-width:0;text-align:center;font-variant-numeric:tabular-nums}.strct-num__btn{display:inline-flex;align-items:center;justify-content:center;flex:none;padding-inline:var(--space-2);color:var(--t2);background:var(--bg-2);border:1px solid var(--b2);border-radius:var(--radius-md);cursor:pointer;transition:border-color .14s ease,color .14s ease,background .14s ease}.strct-num__btn:hover:not(:disabled){color:var(--t1);border-color:var(--b3);background:var(--bg-3)}.strct-num__btn:disabled{opacity:var(--disabled-opacity);cursor:not-allowed}\n"] }]
13209
- }], propDecorators: { min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], incrementLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "incrementLabel", required: false }] }], decrementLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "decrementLabel", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
13251
+ }], propDecorators: { min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], incrementLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "incrementLabel", required: false }] }], decrementLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "decrementLabel", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
13210
13252
 
13211
13253
  /**
13212
13254
  * Minimal, dependency-free XLSX writer for the datagrid's Excel export.
@@ -13349,6 +13391,7 @@ const DG_LABELS = {
13349
13391
  filterPlaceholder: 'Filter…',
13350
13392
  clearFilter: 'Clear filter',
13351
13393
  editCell: 'Edit',
13394
+ editCellInstructions: 'Editable cell. Press Enter or F2 to edit, arrow keys to move.',
13352
13395
  toggleChildren: 'Toggle children',
13353
13396
  quickFilter: 'Quick filter',
13354
13397
  };
@@ -13496,6 +13539,15 @@ class StrctDatagrid {
13496
13539
  */
13497
13540
  initialSelection = input(null, /* @ts-ignore */
13498
13541
  ...(ngDevMode ? [{ debugName: "initialSelection" }] : /* istanbul ignore next */ []));
13542
+ /**
13543
+ * The selection itself, two-way, for `selectionMode="multiple"` — what
13544
+ * `selectedId` is for single mode. Write it and the grid checks those rows
13545
+ * and counts them; the user's own picks write back, in the order they were
13546
+ * made. `null` (the default) means the consumer does not drive the
13547
+ * selection, so a grid that only seeds with `initialSelection` is unchanged.
13548
+ */
13549
+ selectedIds = model(null, /* @ts-ignore */
13550
+ ...(ngDevMode ? [{ debugName: "selectedIds" }] : /* istanbul ignore next */ []));
13499
13551
  /** Override any user-visible / assistive string (partial; merged over defaults). */
13500
13552
  labels = input({}, /* @ts-ignore */
13501
13553
  ...(ngDevMode ? [{ debugName: "labels" }] : /* istanbul ignore next */ []));
@@ -13512,6 +13564,18 @@ class StrctDatagrid {
13512
13564
  /** Scroll viewport height in px (virtual mode). */
13513
13565
  viewportHeight = input(360, /* @ts-ignore */
13514
13566
  ...(ngDevMode ? [{ debugName: "viewportHeight" }] : /* istanbul ignore next */ []));
13567
+ /**
13568
+ * Bound the grid's own scroll box (px), with a sticky header — what
13569
+ * `viewportHeight` does for `virtual`, for every other grid: a grouped
13570
+ * picker inside a dialog scrolls instead of growing the page.
13571
+ */
13572
+ maxHeight = input(null, /* @ts-ignore */
13573
+ ...(ngDevMode ? [{ debugName: "maxHeight" }] : /* istanbul ignore next */ []));
13574
+ /**
13575
+ * Show a pencil on an editable cell when it is hovered or focused. A mouse
13576
+ * user finds an editable cell by double-clicking one; nothing said so.
13577
+ */
13578
+ editHint = input(false, { ...(ngDevMode ? { debugName: "editHint" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
13515
13579
  /** Uniform row height in px (virtual mode; tune when `compact`). */
13516
13580
  rowHeight = input(38, /* @ts-ignore */
13517
13581
  ...(ngDevMode ? [{ debugName: "rowHeight" }] : /* istanbul ignore next */ []));
@@ -13603,6 +13667,9 @@ class StrctDatagrid {
13603
13667
  ...(ngDevMode ? [{ debugName: "detailDef" }] : /* istanbul ignore next */ []));
13604
13668
  actionBarDef = contentChild(StrctDatagridActionBar, /* @ts-ignore */
13605
13669
  ...(ngDevMode ? [{ debugName: "actionBarDef" }] : /* istanbul ignore next */ []));
13670
+ /** A read-only grid with a note needed an empty action bar to show it. */
13671
+ actionBarCaptionDef = contentChild(StrctDatagridActionBarCaption, /* @ts-ignore */
13672
+ ...(ngDevMode ? [{ debugName: "actionBarCaptionDef" }] : /* istanbul ignore next */ []));
13606
13673
  cellDefs = contentChildren(StrctCellDef, /* @ts-ignore */
13607
13674
  ...(ngDevMode ? [{ debugName: "cellDefs" }] : /* istanbul ignore next */ []));
13608
13675
  cellMap = computed(() => {
@@ -13974,6 +14041,118 @@ class StrctDatagrid {
13974
14041
  /** The value a typed editor holds while it is open (committed on Enter / blur). */
13975
14042
  editDraft = signal(null, /* @ts-ignore */
13976
14043
  ...(ngDevMode ? [{ debugName: "editDraft" }] : /* istanbul ignore next */ []));
14044
+ /**
14045
+ * Keyboard access to editable cells (FR-49-02). An editable cell opened only
14046
+ * on double-click, so a keyboard user could not reach one at all.
14047
+ *
14048
+ * The editable cells of a grid form one roving tab stop, as a toolbar's
14049
+ * buttons do: Tab reaches the grid, the arrow keys move between cells,
14050
+ * Enter or F2 opens the editor and Escape closes it — focus coming back to
14051
+ * the cell either way, so the next key press continues from where the user
14052
+ * was. While an editor is open, Tab commits it and opens the next cell, the
14053
+ * way a spreadsheet fills a row.
14054
+ */
14055
+ editHintId = `strct-dg-edithint-${++datagridCounter}`;
14056
+ /** The cell that currently holds the grid's editable-cell tab stop. */
14057
+ activeEditCell = signal(null, /* @ts-ignore */
14058
+ ...(ngDevMode ? [{ debugName: "activeEditCell" }] : /* istanbul ignore next */ []));
14059
+ editableColumns = computed(() => this.visibleColumns().filter((c) => c.editable), /* @ts-ignore */
14060
+ ...(ngDevMode ? [{ debugName: "editableColumns" }] : /* istanbul ignore next */ []));
14061
+ hasEditableColumn = computed(() => this.editableColumns().length > 0, /* @ts-ignore */
14062
+ ...(ngDevMode ? [{ debugName: "hasEditableColumn" }] : /* istanbul ignore next */ []));
14063
+ editCellTabindex(row, col) {
14064
+ const active = this.activeEditCell();
14065
+ if (active) {
14066
+ const rows = this.renderRows();
14067
+ // The active row may have paged away; fall back to the first cell.
14068
+ if (rows.some((r) => this.rowKey(r) === this.rowKey(active.row))) {
14069
+ return this.rowKey(active.row) === this.rowKey(row) && active.col.key === col.key ? 0 : -1;
14070
+ }
14071
+ }
14072
+ const first = this.renderRows()[0];
14073
+ const firstCol = this.editableColumns()[0];
14074
+ return first && firstCol && this.rowKey(first) === this.rowKey(row) && firstCol.key === col.key
14075
+ ? 0
14076
+ : -1;
14077
+ }
14078
+ onEditCellFocus(row, col) {
14079
+ this.activeEditCell.set({ row, col });
14080
+ }
14081
+ /** Every editable cell in DOM order — the order the arrows walk. */
14082
+ editCells() {
14083
+ return [...this.hostRef.nativeElement.querySelectorAll('td[data-edit]')];
14084
+ }
14085
+ /**
14086
+ * Move focus `delta` cells along (or `delta` rows, when `byRow`). Focusing
14087
+ * the cell runs its own focus handler, so the roving tab stop follows.
14088
+ */
14089
+ moveEditFocus(from, delta, byRow = false) {
14090
+ const cells = this.editCells();
14091
+ const i = cells.indexOf(from);
14092
+ if (i < 0)
14093
+ return false;
14094
+ const step = byRow ? Math.max(1, this.editableColumns().length) : 1;
14095
+ const next = cells[i + delta * step];
14096
+ if (!next)
14097
+ return false;
14098
+ next.focus();
14099
+ return true;
14100
+ }
14101
+ /** Commit whatever the open editor holds, by the kind of editor it is. */
14102
+ commitOpenEditor(row, col, event) {
14103
+ switch (col.editor ?? 'text') {
14104
+ case 'number':
14105
+ this.commitDraft(row, col, event);
14106
+ break;
14107
+ case 'select':
14108
+ // Choosing an option already committed; leaving only closes it.
14109
+ this.cancelEdit();
14110
+ break;
14111
+ default:
14112
+ this.commitEdit(row, col, event);
14113
+ }
14114
+ }
14115
+ onEditCellKeydown(row, col, event) {
14116
+ const cell = event.currentTarget;
14117
+ if (this.isEditingCell(row, col)) {
14118
+ // Enter and Escape belong to the editor; only Tab is the grid's.
14119
+ if (event.key !== 'Tab')
14120
+ return;
14121
+ event.preventDefault();
14122
+ this.commitOpenEditor(row, col, event);
14123
+ if (!this.moveEditFocus(cell, event.shiftKey ? -1 : 1)) {
14124
+ cell.focus();
14125
+ return;
14126
+ }
14127
+ const next = this.activeEditCell();
14128
+ if (next)
14129
+ this.startEdit(next.row, next.col);
14130
+ return;
14131
+ }
14132
+ switch (event.key) {
14133
+ case 'Enter':
14134
+ case 'F2':
14135
+ event.preventDefault();
14136
+ this.startEdit(row, col);
14137
+ break;
14138
+ case 'ArrowRight':
14139
+ case 'ArrowLeft':
14140
+ if (this.moveEditFocus(cell, event.key === 'ArrowRight' ? 1 : -1))
14141
+ event.preventDefault();
14142
+ break;
14143
+ case 'ArrowDown':
14144
+ case 'ArrowUp':
14145
+ if (this.moveEditFocus(cell, event.key === 'ArrowDown' ? 1 : -1, true))
14146
+ event.preventDefault();
14147
+ break;
14148
+ }
14149
+ }
14150
+ /** Put focus back on the cell an editor just left, so the keys keep working. */
14151
+ refocusCell(from) {
14152
+ const cell = from?.closest?.('td[data-edit]');
14153
+ if (cell)
14154
+ setTimeout(() => cell.focus());
14155
+ }
13977
14156
  startEdit(row, col) {
13978
14157
  this.editing.set({ rowKey: this.rowKey(row), colKey: col.key });
13979
14158
  this.editDraft.set(row[col.key]);
@@ -13983,10 +14162,15 @@ class StrctDatagrid {
13983
14162
  return;
13984
14163
  // The stepper buttons come first in the DOM; the value is what the user
13985
14164
  // came to change, so focus lands on the field itself.
13986
- (editor.matches('input')
14165
+ const field = editor.matches('input')
13987
14166
  ? editor
13988
14167
  : (editor.querySelector('input') ??
13989
- editor.querySelector('button')))?.focus();
14168
+ editor.querySelector('button'));
14169
+ field?.focus();
14170
+ // Opening from the keyboard, the first thing typed is meant to replace
14171
+ // the value, not to be appended to it.
14172
+ if (field instanceof HTMLInputElement && field.type === 'text')
14173
+ field.select();
13990
14174
  });
13991
14175
  }
13992
14176
  captionId = `strct-dg-caption-${++datagridCounter}`;
@@ -14025,6 +14209,8 @@ class StrctDatagrid {
14025
14209
  commitDraft(row, col, event) {
14026
14210
  event?.stopPropagation();
14027
14211
  this.commitValue(row, col, this.editDraft());
14212
+ if (event && event.type !== 'focusout')
14213
+ this.refocusCell(event.target);
14028
14214
  }
14029
14215
  /**
14030
14216
  * A column that declares bounds means them: Enter commits what the field
@@ -14059,6 +14245,8 @@ class StrctDatagrid {
14059
14245
  return; // Escape/Enter already closed it
14060
14246
  const value = event.target.value;
14061
14247
  this.editing.set(null);
14248
+ if (event.type !== 'blur')
14249
+ this.refocusCell(event.target);
14062
14250
  const previous = row[col.key];
14063
14251
  if (String(previous ?? '') !== value)
14064
14252
  this.cellEdit.emit({ row, column: col, value, typedValue: value, previous });
@@ -14066,6 +14254,8 @@ class StrctDatagrid {
14066
14254
  cancelEdit(event) {
14067
14255
  event?.stopPropagation();
14068
14256
  this.editing.set(null);
14257
+ if (event)
14258
+ this.refocusCell(event.target);
14069
14259
  }
14070
14260
  /**
14071
14261
  * `singleLine` reveal: hovering a cell whose content is actually clipped
@@ -14172,12 +14362,26 @@ class StrctDatagrid {
14172
14362
  ...(ngDevMode ? [{ debugName: "sorted" }] : /* istanbul ignore next */ []));
14173
14363
  paged = computed(() => {
14174
14364
  const size = this.pageSize();
14175
- if (this.lazy() || size <= 0)
14365
+ // A cursor feed accumulates: slicing it by pageSize would hide every row
14366
+ // past the first page behind a pager that "more" does not draw.
14367
+ if (this.lazy() || size <= 0 || this.paging() === 'more')
14176
14368
  return this.sorted();
14177
14369
  const start = (this.page() - 1) * size;
14178
14370
  return this.sorted().slice(start, start + size);
14179
14371
  }, /* @ts-ignore */
14180
14372
  ...(ngDevMode ? [{ debugName: "paged" }] : /* istanbul ignore next */ []));
14373
+ /**
14374
+ * The footer exists for the count, the column chooser, the sync button and
14375
+ * whichever pager applies — `paging="more"` used to replace all of it, and a
14376
+ * chooser on a grid with no pager had nowhere to live.
14377
+ */
14378
+ showFooter = computed(() => !this.loading() &&
14379
+ (this.paging() === 'more' ||
14380
+ this.pageSize() > 0 ||
14381
+ this.virtual() ||
14382
+ this.columnChooser() ||
14383
+ this.sync()), /* @ts-ignore */
14384
+ ...(ngDevMode ? [{ debugName: "showFooter" }] : /* istanbul ignore next */ []));
14181
14385
  /** Full count for the pager / footer (server total in lazy mode). */
14182
14386
  totalCount = computed(() => this.lazy() ? (this.total() ?? this.rows().length) : this.sorted().length, /* @ts-ignore */
14183
14387
  ...(ngDevMode ? [{ debugName: "totalCount" }] : /* istanbul ignore next */ []));
@@ -14467,6 +14671,30 @@ class StrctDatagrid {
14467
14671
  this.commitSelection(kept);
14468
14672
  });
14469
14673
  });
14674
+ // Multiple mode: the checked rows follow `selectedIds`, whoever wrote them
14675
+ // — the user picking, or a consumer that also un-ticks a member somewhere
14676
+ // else on the screen. Like the single-mode effect, it writes `selected`
14677
+ // directly, so an external write never emits selectionChange.
14678
+ effect(() => {
14679
+ if (this.mode() === 'single')
14680
+ return;
14681
+ const ids = this.selectedIds();
14682
+ if (ids == null)
14683
+ return;
14684
+ untracked(() => {
14685
+ const next = new Set(ids);
14686
+ const current = this.selected();
14687
+ if (current.size === next.size && [...next].every((v) => current.has(v)))
14688
+ return;
14689
+ this.selected.set(next);
14690
+ this.selectedRowCache.clear();
14691
+ for (const row of this.rows()) {
14692
+ const id = this.idOf(row);
14693
+ if (next.has(id))
14694
+ this.selectedRowCache.set(id, row);
14695
+ }
14696
+ });
14697
+ });
14470
14698
  // Single mode: the checked row follows `selectedId`, whoever wrote it — the
14471
14699
  // user picking, or a consumer restoring a pick from an earlier step. It
14472
14700
  // writes `selected` directly rather than through commitSelection, so an
@@ -14841,6 +15069,10 @@ class StrctDatagrid {
14841
15069
  this.selectedRowCache.delete(id);
14842
15070
  }
14843
15071
  this.selected.set(next);
15072
+ // Keep the two-way model in step with what the user did. The effect above
15073
+ // compares sets, so writing it here cannot loop.
15074
+ if (this.mode() !== 'single' && this.selectedIds() != null)
15075
+ this.selectedIds.set([...next]);
14844
15076
  const fresh = this.rows().filter((r) => next.has(this.idOf(r)));
14845
15077
  const freshIds = new Set(fresh.map((r) => this.idOf(r)));
14846
15078
  const offData = [...next]
@@ -14855,8 +15087,8 @@ class StrctDatagrid {
14855
15087
  return String(a ?? '').localeCompare(String(b ?? ''), undefined, { numeric: true });
14856
15088
  }
14857
15089
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctDatagrid, deps: [], target: i0.ɵɵFactoryTarget.Component });
14858
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctDatagrid, isStandalone: true, selector: "strct-datagrid", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: true, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: true, isRequired: false, transformFunction: null }, detailPane: { classPropertyName: "detailPane", publicName: "detailPane", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, singleLine: { classPropertyName: "singleLine", publicName: "singleLine", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, columnChooser: { classPropertyName: "columnChooser", publicName: "columnChooser", isSignal: true, isRequired: false, transformFunction: null }, sync: { classPropertyName: "sync", publicName: "sync", isSignal: true, isRequired: false, transformFunction: null }, footerActionsDisabled: { classPropertyName: "footerActionsDisabled", publicName: "footerActionsDisabled", isSignal: true, isRequired: false, transformFunction: null }, rowId: { classPropertyName: "rowId", publicName: "rowId", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, selectedId: { classPropertyName: "selectedId", publicName: "selectedId", isSignal: true, isRequired: false, transformFunction: null }, rowSelectable: { classPropertyName: "rowSelectable", publicName: "rowSelectable", isSignal: true, isRequired: false, transformFunction: null }, flush: { classPropertyName: "flush", publicName: "flush", isSignal: true, isRequired: false, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: true, isRequired: false, transformFunction: null }, paging: { classPropertyName: "paging", publicName: "paging", isSignal: true, isRequired: false, transformFunction: null }, hasMore: { classPropertyName: "hasMore", publicName: "hasMore", isSignal: true, isRequired: false, transformFunction: null }, loadingMore: { classPropertyName: "loadingMore", publicName: "loadingMore", isSignal: true, isRequired: false, transformFunction: null }, moreTotal: { classPropertyName: "moreTotal", publicName: "moreTotal", isSignal: true, isRequired: false, transformFunction: null }, groupSelect: { classPropertyName: "groupSelect", publicName: "groupSelect", isSignal: true, isRequired: false, transformFunction: null }, rowActions: { classPropertyName: "rowActions", publicName: "rowActions", isSignal: true, isRequired: false, transformFunction: null }, initialSelection: { classPropertyName: "initialSelection", publicName: "initialSelection", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, virtual: { classPropertyName: "virtual", publicName: "virtual", isSignal: true, isRequired: false, transformFunction: null }, viewportHeight: { classPropertyName: "viewportHeight", publicName: "viewportHeight", isSignal: true, isRequired: false, transformFunction: null }, rowHeight: { classPropertyName: "rowHeight", publicName: "rowHeight", isSignal: true, isRequired: false, transformFunction: null }, lazy: { classPropertyName: "lazy", publicName: "lazy", isSignal: true, isRequired: false, transformFunction: null }, total: { classPropertyName: "total", publicName: "total", isSignal: true, isRequired: false, transformFunction: null }, stateKey: { classPropertyName: "stateKey", publicName: "stateKey", isSignal: true, isRequired: false, transformFunction: null }, columnState: { classPropertyName: "columnState", publicName: "columnState", isSignal: true, isRequired: false, transformFunction: null }, reorderable: { classPropertyName: "reorderable", publicName: "reorderable", isSignal: true, isRequired: false, transformFunction: null }, groupBy: { classPropertyName: "groupBy", publicName: "groupBy", isSignal: true, isRequired: false, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, quickFilter: { classPropertyName: "quickFilter", publicName: "quickFilter", isSignal: true, isRequired: false, transformFunction: null }, quickFilterFields: { classPropertyName: "quickFilterFields", publicName: "quickFilterFields", isSignal: true, isRequired: false, transformFunction: null }, quickFilterable: { classPropertyName: "quickFilterable", publicName: "quickFilterable", isSignal: true, isRequired: false, transformFunction: null }, quickFilterAlign: { classPropertyName: "quickFilterAlign", publicName: "quickFilterAlign", isSignal: true, isRequired: false, transformFunction: null }, childrenKey: { classPropertyName: "childrenKey", publicName: "childrenKey", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedId: "selectedIdChange", loadMore: "loadMore", columnState: "columnStateChange", filters: "filtersChange", quickFilter: "quickFilterChange", selectionChange: "selectionChange", syncChange: "syncChange", rowAction: "rowAction", lazyLoad: "lazyLoad", cellEdit: "cellEdit" }, host: { listeners: { "document:click": "onDocClickOverlays($event)", "document:keydown.escape": "onEscapeOverlays($event)" }, properties: { "class.strct-dg-host--compact": "compact()", "class.strct-dg-host--singleline": "singleLine()", "class.strct-dg-host--virtual": "virtual()", "class.strct-dg-host--sticky": "stickyActive()", "class.strct-dg-host--flush": "flush()" }, classAttribute: "strct-dg-host" }, queries: [{ propertyName: "detailDef", first: true, predicate: StrctRowDetailDef, descendants: true, isSignal: true }, { propertyName: "actionBarDef", first: true, predicate: StrctDatagridActionBar, descendants: true, isSignal: true }, { propertyName: "cellDefs", predicate: StrctCellDef, isSignal: true }], ngImport: i0, template: `
14859
- @if (actionBarDef() || quickFilterable()) {
15090
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctDatagrid, isStandalone: true, selector: "strct-datagrid", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: true, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: true, isRequired: false, transformFunction: null }, detailPane: { classPropertyName: "detailPane", publicName: "detailPane", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, singleLine: { classPropertyName: "singleLine", publicName: "singleLine", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, columnChooser: { classPropertyName: "columnChooser", publicName: "columnChooser", isSignal: true, isRequired: false, transformFunction: null }, sync: { classPropertyName: "sync", publicName: "sync", isSignal: true, isRequired: false, transformFunction: null }, footerActionsDisabled: { classPropertyName: "footerActionsDisabled", publicName: "footerActionsDisabled", isSignal: true, isRequired: false, transformFunction: null }, rowId: { classPropertyName: "rowId", publicName: "rowId", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, selectedId: { classPropertyName: "selectedId", publicName: "selectedId", isSignal: true, isRequired: false, transformFunction: null }, rowSelectable: { classPropertyName: "rowSelectable", publicName: "rowSelectable", isSignal: true, isRequired: false, transformFunction: null }, flush: { classPropertyName: "flush", publicName: "flush", isSignal: true, isRequired: false, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: true, isRequired: false, transformFunction: null }, paging: { classPropertyName: "paging", publicName: "paging", isSignal: true, isRequired: false, transformFunction: null }, hasMore: { classPropertyName: "hasMore", publicName: "hasMore", isSignal: true, isRequired: false, transformFunction: null }, loadingMore: { classPropertyName: "loadingMore", publicName: "loadingMore", isSignal: true, isRequired: false, transformFunction: null }, moreTotal: { classPropertyName: "moreTotal", publicName: "moreTotal", isSignal: true, isRequired: false, transformFunction: null }, groupSelect: { classPropertyName: "groupSelect", publicName: "groupSelect", isSignal: true, isRequired: false, transformFunction: null }, rowActions: { classPropertyName: "rowActions", publicName: "rowActions", isSignal: true, isRequired: false, transformFunction: null }, initialSelection: { classPropertyName: "initialSelection", publicName: "initialSelection", isSignal: true, isRequired: false, transformFunction: null }, selectedIds: { classPropertyName: "selectedIds", publicName: "selectedIds", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, virtual: { classPropertyName: "virtual", publicName: "virtual", isSignal: true, isRequired: false, transformFunction: null }, viewportHeight: { classPropertyName: "viewportHeight", publicName: "viewportHeight", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, editHint: { classPropertyName: "editHint", publicName: "editHint", isSignal: true, isRequired: false, transformFunction: null }, rowHeight: { classPropertyName: "rowHeight", publicName: "rowHeight", isSignal: true, isRequired: false, transformFunction: null }, lazy: { classPropertyName: "lazy", publicName: "lazy", isSignal: true, isRequired: false, transformFunction: null }, total: { classPropertyName: "total", publicName: "total", isSignal: true, isRequired: false, transformFunction: null }, stateKey: { classPropertyName: "stateKey", publicName: "stateKey", isSignal: true, isRequired: false, transformFunction: null }, columnState: { classPropertyName: "columnState", publicName: "columnState", isSignal: true, isRequired: false, transformFunction: null }, reorderable: { classPropertyName: "reorderable", publicName: "reorderable", isSignal: true, isRequired: false, transformFunction: null }, groupBy: { classPropertyName: "groupBy", publicName: "groupBy", isSignal: true, isRequired: false, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, quickFilter: { classPropertyName: "quickFilter", publicName: "quickFilter", isSignal: true, isRequired: false, transformFunction: null }, quickFilterFields: { classPropertyName: "quickFilterFields", publicName: "quickFilterFields", isSignal: true, isRequired: false, transformFunction: null }, quickFilterable: { classPropertyName: "quickFilterable", publicName: "quickFilterable", isSignal: true, isRequired: false, transformFunction: null }, quickFilterAlign: { classPropertyName: "quickFilterAlign", publicName: "quickFilterAlign", isSignal: true, isRequired: false, transformFunction: null }, childrenKey: { classPropertyName: "childrenKey", publicName: "childrenKey", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedId: "selectedIdChange", loadMore: "loadMore", selectedIds: "selectedIdsChange", columnState: "columnStateChange", filters: "filtersChange", quickFilter: "quickFilterChange", selectionChange: "selectionChange", syncChange: "syncChange", rowAction: "rowAction", lazyLoad: "lazyLoad", cellEdit: "cellEdit" }, host: { listeners: { "document:click": "onDocClickOverlays($event)", "document:keydown.escape": "onEscapeOverlays($event)" }, properties: { "class.strct-dg-host--compact": "compact()", "class.strct-dg-host--singleline": "singleLine()", "class.strct-dg-host--virtual": "virtual()", "class.strct-dg-host--bounded": "!virtual() && maxHeight() !== null", "class.strct-dg-host--sticky": "stickyActive()", "class.strct-dg-host--flush": "flush()" }, classAttribute: "strct-dg-host" }, queries: [{ propertyName: "detailDef", first: true, predicate: StrctRowDetailDef, descendants: true, isSignal: true }, { propertyName: "actionBarDef", first: true, predicate: StrctDatagridActionBar, descendants: true, isSignal: true }, { propertyName: "actionBarCaptionDef", first: true, predicate: StrctDatagridActionBarCaption, descendants: true, isSignal: true }, { propertyName: "cellDefs", predicate: StrctCellDef, isSignal: true }], ngImport: i0, template: `
15091
+ @if (actionBarDef() || quickFilterable() || actionBarCaptionDef()) {
14860
15092
  <div class="strct-dg__toolbar">
14861
15093
  @if (quickFilterable()) {
14862
15094
  <strct-searchbox
@@ -14882,13 +15114,27 @@ class StrctDatagrid {
14882
15114
  </div>
14883
15115
  }
14884
15116
 
15117
+ @if (hasEditableColumn()) {
15118
+ <!-- What the editable cells point at with aria-describedby: a keyboard
15119
+ user is told the cell can be edited, and how. -->
15120
+ <!-- In flow, not absolutely positioned: an out-of-flow box whose
15121
+ containing block is the page extends the document's scrollable area
15122
+ from wherever the grid happens to sit. 1x1 and clipped is enough. -->
15123
+ <span
15124
+ class="strct-dg__hint"
15125
+ style="display: inline-block; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap"
15126
+ [id]="editHintId"
15127
+ >{{ L().editCellInstructions }}</span
15128
+ >
15129
+ }
15130
+
14885
15131
  <div class="strct-dg__layout" [class.strct-dg__layout--paned]="paneOpen()">
14886
15132
  <div
14887
15133
  class="strct-dg__scroll"
14888
15134
  tabindex="0"
14889
15135
  role="region"
14890
15136
  [attr.aria-label]="L().rows"
14891
- [style.max-height.px]="virtual() ? viewportHeight() : null"
15137
+ [style.max-height.px]="virtual() ? viewportHeight() : maxHeight()"
14892
15138
  (scroll)="virtual() && onScroll($event)"
14893
15139
  >
14894
15140
  <table
@@ -15206,7 +15452,12 @@ class StrctDatagrid {
15206
15452
  [class.strct-dg__cell--sticky-last]="col.key === lastStickyKey()"
15207
15453
  [class.strct-dg__cell--editable]="col.editable"
15208
15454
  [style.insetInlineStart.px]="stickyLeft(col.key)"
15455
+ [attr.data-edit]="col.editable ? '' : null"
15456
+ [attr.tabindex]="col.editable ? editCellTabindex(row, col) : null"
15457
+ [attr.aria-describedby]="col.editable ? editHintId : null"
15209
15458
  (dblclick)="col.editable && startEdit(row, col)"
15459
+ (focus)="col.editable && onEditCellFocus(row, col)"
15460
+ (keydown)="col.editable && onEditCellKeydown(row, col, $event)"
15210
15461
  >
15211
15462
  @if (childrenKey() && colIdx === 0) {
15212
15463
  <span
@@ -15296,6 +15547,17 @@ class StrctDatagrid {
15296
15547
  <span class="strct-dg__celldesc">{{ row[col.descriptionKey] }}</span>
15297
15548
  }
15298
15549
  }
15550
+ <!-- The affordance a mouse never needed: a cell that
15551
+ can be edited says so on hover and on focus. -->
15552
+ @if (col.editable && editHint() && !isEditingCell(row, col)) {
15553
+ <strct-icon
15554
+ class="strct-dg__editpencil"
15555
+ name="pencil"
15556
+ [size]="12"
15557
+ [strokeWidth]="1.6"
15558
+ aria-hidden="true"
15559
+ />
15560
+ }
15299
15561
  </td>
15300
15562
  }
15301
15563
  @if (canActions()) {
@@ -15362,29 +15624,7 @@ class StrctDatagrid {
15362
15624
  }
15363
15625
  </div>
15364
15626
 
15365
- @if (paging() === 'more' && !loading()) {
15366
- <!-- A feed that pages by cursor loads more at the end: page numbers are
15367
- something a cursor API cannot answer. -->
15368
- <div class="strct-dg__foot strct-dg__foot--more">
15369
- <span class="strct-dg__count">{{
15370
- L().showing(rows().length, moreTotal() ?? undefined)
15371
- }}</span>
15372
- @if (hasMore()) {
15373
- <button
15374
- strct-button
15375
- size="sm"
15376
- class="strct-dg__more"
15377
- [disabled]="loadingMore()"
15378
- (click)="loadMore.emit()"
15379
- >
15380
- @if (loadingMore()) {
15381
- <strct-spinner size="sm" />
15382
- }
15383
- {{ L().loadMore }}
15384
- </button>
15385
- }
15386
- </div>
15387
- } @else if ((pageSize() > 0 || virtual()) && !loading()) {
15627
+ @if (showFooter()) {
15388
15628
  <div class="strct-dg__foot">
15389
15629
  <div class="strct-dg__foot-left">
15390
15630
  @if (columnChooser() || sync()) {
@@ -15437,7 +15677,11 @@ class StrctDatagrid {
15437
15677
  </div>
15438
15678
  }
15439
15679
  <span class="strct-dg__count">
15440
- {{ totalCount() }} {{ totalCount() === 1 ? L().row : L().rows }}
15680
+ @if (paging() === 'more') {
15681
+ {{ L().showing(rows().length, moreTotal() ?? undefined) }}
15682
+ } @else {
15683
+ {{ totalCount() }} {{ totalCount() === 1 ? L().row : L().rows }}
15684
+ }
15441
15685
  @if (selectedCount() && mode() !== 'single') {
15442
15686
  <span class="strct-dg__count-sep">|</span>
15443
15687
  <span class="strct-dg__count-sel">{{ selectedCount() }} {{ L().selected }}</span>
@@ -15445,13 +15689,32 @@ class StrctDatagrid {
15445
15689
  </span>
15446
15690
  </div>
15447
15691
  <div class="strct-dg__foot-right">
15448
- @if (pageSize() > 0 && !groupBy()) {
15692
+ <!-- A feed that pages by cursor loads more at the end: page numbers
15693
+ are something a cursor API cannot answer. It takes the pager's
15694
+ place — the column chooser, the sync button and the count are
15695
+ the footer's, not the pager's. -->
15696
+ @if (paging() === 'more') {
15697
+ @if (hasMore()) {
15698
+ <button
15699
+ strct-button
15700
+ size="sm"
15701
+ class="strct-dg__more"
15702
+ [disabled]="loadingMore()"
15703
+ (click)="loadMore.emit()"
15704
+ >
15705
+ @if (loadingMore()) {
15706
+ <strct-spinner size="sm" />
15707
+ }
15708
+ {{ L().loadMore }}
15709
+ </button>
15710
+ }
15711
+ } @else if (pageSize() > 0 && !groupBy()) {
15449
15712
  <strct-pagination [total]="totalCount()" [pageSize]="pageSize()" [(page)]="page" />
15450
15713
  }
15451
15714
  </div>
15452
15715
  </div>
15453
15716
  }
15454
- `, 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__foot--more{justify-content:space-between}.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{overflow-y:auto}.strct-dg-host--virtual .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{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}.strct-dg__cell--editable:hover{box-shadow:inset 0 0 0 1px var(--b2)}.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", "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 });
15717
+ `, 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 });
15455
15718
  }
15456
15719
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctDatagrid, decorators: [{
15457
15720
  type: Component,
@@ -15469,7 +15732,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
15469
15732
  StrctSpinner,
15470
15733
  FormsModule,
15471
15734
  ], template: `
15472
- @if (actionBarDef() || quickFilterable()) {
15735
+ @if (actionBarDef() || quickFilterable() || actionBarCaptionDef()) {
15473
15736
  <div class="strct-dg__toolbar">
15474
15737
  @if (quickFilterable()) {
15475
15738
  <strct-searchbox
@@ -15495,13 +15758,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
15495
15758
  </div>
15496
15759
  }
15497
15760
 
15761
+ @if (hasEditableColumn()) {
15762
+ <!-- What the editable cells point at with aria-describedby: a keyboard
15763
+ user is told the cell can be edited, and how. -->
15764
+ <!-- In flow, not absolutely positioned: an out-of-flow box whose
15765
+ containing block is the page extends the document's scrollable area
15766
+ from wherever the grid happens to sit. 1x1 and clipped is enough. -->
15767
+ <span
15768
+ class="strct-dg__hint"
15769
+ style="display: inline-block; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap"
15770
+ [id]="editHintId"
15771
+ >{{ L().editCellInstructions }}</span
15772
+ >
15773
+ }
15774
+
15498
15775
  <div class="strct-dg__layout" [class.strct-dg__layout--paned]="paneOpen()">
15499
15776
  <div
15500
15777
  class="strct-dg__scroll"
15501
15778
  tabindex="0"
15502
15779
  role="region"
15503
15780
  [attr.aria-label]="L().rows"
15504
- [style.max-height.px]="virtual() ? viewportHeight() : null"
15781
+ [style.max-height.px]="virtual() ? viewportHeight() : maxHeight()"
15505
15782
  (scroll)="virtual() && onScroll($event)"
15506
15783
  >
15507
15784
  <table
@@ -15819,7 +16096,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
15819
16096
  [class.strct-dg__cell--sticky-last]="col.key === lastStickyKey()"
15820
16097
  [class.strct-dg__cell--editable]="col.editable"
15821
16098
  [style.insetInlineStart.px]="stickyLeft(col.key)"
16099
+ [attr.data-edit]="col.editable ? '' : null"
16100
+ [attr.tabindex]="col.editable ? editCellTabindex(row, col) : null"
16101
+ [attr.aria-describedby]="col.editable ? editHintId : null"
15822
16102
  (dblclick)="col.editable && startEdit(row, col)"
16103
+ (focus)="col.editable && onEditCellFocus(row, col)"
16104
+ (keydown)="col.editable && onEditCellKeydown(row, col, $event)"
15823
16105
  >
15824
16106
  @if (childrenKey() && colIdx === 0) {
15825
16107
  <span
@@ -15909,6 +16191,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
15909
16191
  <span class="strct-dg__celldesc">{{ row[col.descriptionKey] }}</span>
15910
16192
  }
15911
16193
  }
16194
+ <!-- The affordance a mouse never needed: a cell that
16195
+ can be edited says so on hover and on focus. -->
16196
+ @if (col.editable && editHint() && !isEditingCell(row, col)) {
16197
+ <strct-icon
16198
+ class="strct-dg__editpencil"
16199
+ name="pencil"
16200
+ [size]="12"
16201
+ [strokeWidth]="1.6"
16202
+ aria-hidden="true"
16203
+ />
16204
+ }
15912
16205
  </td>
15913
16206
  }
15914
16207
  @if (canActions()) {
@@ -15975,29 +16268,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
15975
16268
  }
15976
16269
  </div>
15977
16270
 
15978
- @if (paging() === 'more' && !loading()) {
15979
- <!-- A feed that pages by cursor loads more at the end: page numbers are
15980
- something a cursor API cannot answer. -->
15981
- <div class="strct-dg__foot strct-dg__foot--more">
15982
- <span class="strct-dg__count">{{
15983
- L().showing(rows().length, moreTotal() ?? undefined)
15984
- }}</span>
15985
- @if (hasMore()) {
15986
- <button
15987
- strct-button
15988
- size="sm"
15989
- class="strct-dg__more"
15990
- [disabled]="loadingMore()"
15991
- (click)="loadMore.emit()"
15992
- >
15993
- @if (loadingMore()) {
15994
- <strct-spinner size="sm" />
15995
- }
15996
- {{ L().loadMore }}
15997
- </button>
15998
- }
15999
- </div>
16000
- } @else if ((pageSize() > 0 || virtual()) && !loading()) {
16271
+ @if (showFooter()) {
16001
16272
  <div class="strct-dg__foot">
16002
16273
  <div class="strct-dg__foot-left">
16003
16274
  @if (columnChooser() || sync()) {
@@ -16050,7 +16321,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
16050
16321
  </div>
16051
16322
  }
16052
16323
  <span class="strct-dg__count">
16053
- {{ totalCount() }} {{ totalCount() === 1 ? L().row : L().rows }}
16324
+ @if (paging() === 'more') {
16325
+ {{ L().showing(rows().length, moreTotal() ?? undefined) }}
16326
+ } @else {
16327
+ {{ totalCount() }} {{ totalCount() === 1 ? L().row : L().rows }}
16328
+ }
16054
16329
  @if (selectedCount() && mode() !== 'single') {
16055
16330
  <span class="strct-dg__count-sep">|</span>
16056
16331
  <span class="strct-dg__count-sel">{{ selectedCount() }} {{ L().selected }}</span>
@@ -16058,7 +16333,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
16058
16333
  </span>
16059
16334
  </div>
16060
16335
  <div class="strct-dg__foot-right">
16061
- @if (pageSize() > 0 && !groupBy()) {
16336
+ <!-- A feed that pages by cursor loads more at the end: page numbers
16337
+ are something a cursor API cannot answer. It takes the pager's
16338
+ place — the column chooser, the sync button and the count are
16339
+ the footer's, not the pager's. -->
16340
+ @if (paging() === 'more') {
16341
+ @if (hasMore()) {
16342
+ <button
16343
+ strct-button
16344
+ size="sm"
16345
+ class="strct-dg__more"
16346
+ [disabled]="loadingMore()"
16347
+ (click)="loadMore.emit()"
16348
+ >
16349
+ @if (loadingMore()) {
16350
+ <strct-spinner size="sm" />
16351
+ }
16352
+ {{ L().loadMore }}
16353
+ </button>
16354
+ }
16355
+ } @else if (pageSize() > 0 && !groupBy()) {
16062
16356
  <strct-pagination [total]="totalCount()" [pageSize]="pageSize()" [(page)]="page" />
16063
16357
  }
16064
16358
  </div>
@@ -16069,10 +16363,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
16069
16363
  '[class.strct-dg-host--compact]': 'compact()',
16070
16364
  '[class.strct-dg-host--singleline]': 'singleLine()',
16071
16365
  '[class.strct-dg-host--virtual]': 'virtual()',
16366
+ '[class.strct-dg-host--bounded]': '!virtual() && maxHeight() !== null',
16072
16367
  '[class.strct-dg-host--sticky]': 'stickyActive()',
16073
16368
  '[class.strct-dg-host--flush]': 'flush()',
16074
- }, 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__foot--more{justify-content:space-between}.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{overflow-y:auto}.strct-dg-host--virtual .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{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}.strct-dg__cell--editable:hover{box-shadow:inset 0 0 0 1px var(--b2)}.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"] }]
16075
- }], 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 }] }], 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 }] }], 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 }] }], cellDefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => StrctCellDef), { isSignal: true }] }], onDocClickOverlays: [{
16369
+ }, 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"] }]
16370
+ }], 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: [{
16076
16371
  type: HostListener,
16077
16372
  args: ['document:click', ['$event']]
16078
16373
  }], onEscapeOverlays: [{
@@ -19332,6 +19627,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
19332
19627
  }, styles: [".strct-hero{display:flex;align-items:flex-start;flex-wrap:wrap;gap:var(--space-3);padding:var(--space-4) var(--space-5);border-radius:var(--radius-lg);background:var(--bg-1);border:1px solid var(--b2);border-inline-start:3px solid var(--b3)}.strct-hero--dense{padding:var(--space-3) var(--space-4);gap:var(--space-2)}.strct-hero__chip{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;flex-shrink:0;background:var(--bg-a);color:var(--t2)}.strct-hero--dense .strct-hero__chip{width:28px;height:28px}.strct-hero__text{flex:1 1 280px;min-width:0;display:flex;flex-direction:column;gap:3px}.strct-hero__heading{margin:0;font-size:var(--text-xl);font-weight:650;letter-spacing:-.01em;color:var(--t1);line-height:var(--leading-tight)}.strct-hero--dense .strct-hero__heading{font-size:var(--text-lg)}.strct-hero__desc{font-size:var(--text-md);color:var(--t2);line-height:var(--leading-normal)}.strct-hero__desc:empty{display:none}.strct-hero__aside{display:flex;flex-direction:column;align-items:flex-end;gap:var(--space-2);margin-inline-start:auto}.strct-hero__meta,.strct-hero__actions{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-2);justify-content:flex-end}.strct-hero__meta:empty,.strct-hero__actions:empty{display:none}.strct-hero__aside:not(:has(*:not(:empty))){display:none}.strct-hero--accent{border-inline-start-color:var(--acc)}.strct-hero--accent .strct-hero__chip{background:var(--acc);color:var(--inv)}.strct-hero--success{border-inline-start-color:var(--success)}.strct-hero--success .strct-hero__chip{background:var(--success);color:var(--inv)}.strct-hero--warning{border-inline-start-color:var(--warning)}.strct-hero--warning .strct-hero__chip{background:var(--warning);color:var(--inv)}.strct-hero--critical{border-inline-start-color:var(--critical)}.strct-hero--critical .strct-hero__chip{background:var(--critical);color:var(--inv)}@media(max-width:560px){.strct-hero__aside{margin-inline-start:0;align-items:stretch;width:100%}.strct-hero__meta,.strct-hero__actions{justify-content:flex-start}}\n"] }]
19333
19628
  }], propDecorators: { status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: true }] }], dense: [{ type: i0.Input, args: [{ isSignal: true, alias: "dense", required: false }] }], live: [{ type: i0.Input, args: [{ isSignal: true, alias: "live", required: false }] }] } });
19334
19629
 
19630
+ /** Controls at the alert's end — the fix the alert is about. */
19631
+ class StrctAlertActions {
19632
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctAlertActions, deps: [], target: i0.ɵɵFactoryTarget.Directive });
19633
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.4", type: StrctAlertActions, isStandalone: true, selector: "[strctAlertActions]", ngImport: i0 });
19634
+ }
19635
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctAlertActions, decorators: [{
19636
+ type: Directive,
19637
+ args: [{ selector: '[strctAlertActions]' }]
19638
+ }] });
19335
19639
  /** Inline contextual banner. `<strct-alert type="warning">…</strct-alert>`. */
19336
19640
  class StrctAlert {
19337
19641
  hostEl = inject(ElementRef);
@@ -19388,6 +19692,11 @@ class StrctAlert {
19388
19692
  display:block for spacing must not put the icon on its own line. -->
19389
19693
  <div class="strct-alert__row">
19390
19694
  <strct-icon class="strct-alert__icon" [name]="iconName()" [size]="16" />
19695
+ <!-- Declared before the catch-all so the selector wins; it renders at
19696
+ the row's end either way, after the body. -->
19697
+ <span class="strct-alert__actions">
19698
+ <ng-content select="[strctAlertActions]" />
19699
+ </span>
19391
19700
  <div class="strct-alert__body"><ng-content /></div>
19392
19701
  @if (closable()) {
19393
19702
  <button
@@ -19400,7 +19709,7 @@ class StrctAlert {
19400
19709
  </button>
19401
19710
  }
19402
19711
  </div>
19403
- `, isInline: true, styles: [".strct-alert{display:block;padding:var(--space-2) var(--space-3);border-radius:var(--radius-lg);font-size:13px;color:var(--t1);background:var(--bg-1);border:1px solid var(--b2);border-inline-start:3px solid var(--acc)}.strct-alert__row{display:flex;align-items:flex-start;gap:var(--space-2)}.strct-alert strct-icon{color:var(--acc);margin-top:1px;flex-shrink:0}.strct-alert__body{flex:1;color:var(--t1)}.strct-alert__close{flex-shrink:0;display:inline-flex;padding:2px;margin-block-start:-2px;margin-inline-end:-2px;border:0;background:transparent;color:var(--t3);cursor:pointer;border-radius:var(--radius-sm)}.strct-alert__close:hover{color:var(--t1);background:var(--bg-3)}.strct-alert--success{border-inline-start-color:var(--success)}.strct-alert--success strct-icon{color:var(--success)}.strct-alert--warning{border-inline-start-color:var(--warning)}.strct-alert--warning strct-icon{color:var(--warning)}.strct-alert--critical{border-inline-start-color:var(--critical)}.strct-alert--critical strct-icon{color:var(--critical)}\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 });
19712
+ `, isInline: true, styles: [".strct-alert{display:block;padding:var(--space-2) var(--space-3);border-radius:var(--radius-lg);font-size:13px;color:var(--t1);background:var(--bg-1);border:1px solid var(--b2);border-inline-start:3px solid var(--acc)}.strct-alert__row{display:flex;align-items:flex-start;gap:var(--space-2)}.strct-alert strct-icon{color:var(--acc);margin-top:1px;flex-shrink:0}.strct-alert__body{flex:1;color:var(--t1);order:1}.strct-alert__actions{order:2;display:inline-flex;align-items:center;gap:var(--space-2);flex:none}.strct-alert__actions:empty{display:none}.strct-alert__close{flex-shrink:0;display:inline-flex;padding:2px;margin-block-start:-2px;margin-inline-end:-2px;border:0;background:transparent;color:var(--t3);cursor:pointer;border-radius:var(--radius-sm)}.strct-alert__close:hover{color:var(--t1);background:var(--bg-3)}.strct-alert--success{border-inline-start-color:var(--success)}.strct-alert--success strct-icon{color:var(--success)}.strct-alert--warning{border-inline-start-color:var(--warning)}.strct-alert--warning strct-icon{color:var(--warning)}.strct-alert--critical{border-inline-start-color:var(--critical)}.strct-alert--critical strct-icon{color:var(--critical)}\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 });
19404
19713
  }
19405
19714
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctAlert, decorators: [{
19406
19715
  type: Component,
@@ -19409,6 +19718,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
19409
19718
  display:block for spacing must not put the icon on its own line. -->
19410
19719
  <div class="strct-alert__row">
19411
19720
  <strct-icon class="strct-alert__icon" [name]="iconName()" [size]="16" />
19721
+ <!-- Declared before the catch-all so the selector wins; it renders at
19722
+ the row's end either way, after the body. -->
19723
+ <span class="strct-alert__actions">
19724
+ <ng-content select="[strctAlertActions]" />
19725
+ </span>
19412
19726
  <div class="strct-alert__body"><ng-content /></div>
19413
19727
  @if (closable()) {
19414
19728
  <button
@@ -19428,7 +19742,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
19428
19742
  '[class.strct-alert--success]': "type() === 'success'",
19429
19743
  '[class.strct-alert--warning]': "type() === 'warning'",
19430
19744
  '[class.strct-alert--critical]': "type() === 'critical'",
19431
- }, styles: [".strct-alert{display:block;padding:var(--space-2) var(--space-3);border-radius:var(--radius-lg);font-size:13px;color:var(--t1);background:var(--bg-1);border:1px solid var(--b2);border-inline-start:3px solid var(--acc)}.strct-alert__row{display:flex;align-items:flex-start;gap:var(--space-2)}.strct-alert strct-icon{color:var(--acc);margin-top:1px;flex-shrink:0}.strct-alert__body{flex:1;color:var(--t1)}.strct-alert__close{flex-shrink:0;display:inline-flex;padding:2px;margin-block-start:-2px;margin-inline-end:-2px;border:0;background:transparent;color:var(--t3);cursor:pointer;border-radius:var(--radius-sm)}.strct-alert__close:hover{color:var(--t1);background:var(--bg-3)}.strct-alert--success{border-inline-start-color:var(--success)}.strct-alert--success strct-icon{color:var(--success)}.strct-alert--warning{border-inline-start-color:var(--warning)}.strct-alert--warning strct-icon{color:var(--warning)}.strct-alert--critical{border-inline-start-color:var(--critical)}.strct-alert--critical strct-icon{color:var(--critical)}\n"] }]
19745
+ }, styles: [".strct-alert{display:block;padding:var(--space-2) var(--space-3);border-radius:var(--radius-lg);font-size:13px;color:var(--t1);background:var(--bg-1);border:1px solid var(--b2);border-inline-start:3px solid var(--acc)}.strct-alert__row{display:flex;align-items:flex-start;gap:var(--space-2)}.strct-alert strct-icon{color:var(--acc);margin-top:1px;flex-shrink:0}.strct-alert__body{flex:1;color:var(--t1);order:1}.strct-alert__actions{order:2;display:inline-flex;align-items:center;gap:var(--space-2);flex:none}.strct-alert__actions:empty{display:none}.strct-alert__close{flex-shrink:0;display:inline-flex;padding:2px;margin-block-start:-2px;margin-inline-end:-2px;border:0;background:transparent;color:var(--t3);cursor:pointer;border-radius:var(--radius-sm)}.strct-alert__close:hover{color:var(--t1);background:var(--bg-3)}.strct-alert--success{border-inline-start-color:var(--success)}.strct-alert--success strct-icon{color:var(--success)}.strct-alert--warning{border-inline-start-color:var(--warning)}.strct-alert--warning strct-icon{color:var(--warning)}.strct-alert--critical{border-inline-start-color:var(--critical)}.strct-alert--critical strct-icon{color:var(--critical)}\n"] }]
19432
19746
  }], ctorParameters: () => [], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], dismissLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissLabel", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
19433
19747
 
19434
19748
  let tooltipCounter = 0;
@@ -26954,5 +27268,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
26954
27268
  * Generated bundle index. Do not edit.
26955
27269
  */
26956
27270
 
26957
- export { FOCUSABLE_SELECTOR, STRCT_DP_DOW, STRCT_DP_DOW_FULL, STRCT_DP_MONTHS, STRCT_ICONS, STRCT_ICON_GROUPS, STRCT_ICON_NAMES, STRCT_MASKS, STRCT_NOTIFICATION_HISTORY_LIMIT, STRCT_PALETTES, STRCT_RAW_ICONS, STRCT_TIME_RANGE_PRESETS, STRCT_WIZARD_DEFAULTS, StrctAccordion, StrctAccordionPanel, StrctAlert, StrctAnnouncer, StrctAvatar, StrctBadge, StrctBreadcrumb, StrctBreadcrumbItem, StrctButton, StrctButtonGroup, StrctBytesPipe, StrctCard, StrctCardBlock, StrctCardFooter, StrctCardHeader, StrctCardHeaderActions, StrctCardHeaderLeading, StrctCardHeaderMeta, StrctCardHeaderNote, StrctCascadeColumn, StrctCascadeHost, StrctCascadeSelect, StrctCellDef, StrctCellStatus, StrctChange, StrctChart, StrctChatAttachment, StrctChatComposer, StrctChatMessage, StrctChatThread, StrctCheckbox, StrctChips, StrctCode, StrctCodeInline, StrctColorPicker, StrctCombobox, StrctCommandPalette, StrctConfirmOutlet, StrctConfirmService, StrctContextMenu, StrctContextMenuTrigger, StrctControlDescription, StrctCopy, StrctDatagrid, StrctDatagridActionBar, StrctDatagridActionBarCaption, StrctDatepicker, StrctDatetimePicker, StrctDesc, StrctDescriptionList, StrctDiff, StrctDivider, StrctDonut, StrctDrawer, StrctDrawerFooter, StrctDropdown, StrctDropdownDivider, StrctDropdownItem, StrctDropdownItemAction, StrctDropdownTrigger, StrctDurationPipe, StrctEmptyState, StrctField, StrctFieldGroup, StrctFieldHint, StrctFieldPrefix, StrctFieldSuffix, StrctFile, StrctFilterBar, StrctFlow, StrctFlowNodeTemplate, StrctFooter, StrctGauge, StrctHeader, StrctHeatmap, StrctHero, StrctHotkeysHelp, StrctHotkeysService, StrctIcon, StrctInlineEdit, StrctInput, StrctInputMask, StrctInputOtp, StrctKbd, StrctKnob, StrctLegend, StrctList, StrctListItem, StrctListItemDescription, StrctListItemLeading, StrctListItemMeta, StrctListItemTrailing, StrctLiveIndicator, StrctLogViewer, StrctLogin, StrctMediaFrame, StrctMenuPanel, StrctMenuService, StrctMenubar, StrctMetricTile, StrctModal, StrctModalContent, StrctNav, StrctNavItem, StrctNotificationCenter, StrctNumber, StrctOverlay, StrctPageHeader, StrctPageHeaderActions, StrctPageHeaderCrumbs, StrctPageHeaderTitleMeta, StrctPagination, StrctPassword, StrctPopover, StrctPopoverTrigger, StrctProgress, StrctQr, StrctRadio, StrctRadioGroup, StrctRail, StrctRange, StrctRatePipe, StrctRating, StrctReorder, StrctReorderGroup, StrctReorderHandle, StrctReorderItem, StrctResizeHandle, StrctRowDetailDef, StrctSearchbox, StrctSectionHeader, StrctSectionHeaderActions, StrctSectionHeaderMeta, StrctSectionMenu, StrctSegmented, StrctSelect, StrctShell, StrctShellService, StrctSiPipe, StrctSignpost, StrctSignpostTrigger, StrctSkeleton, StrctSparkline, StrctSpeedDial, StrctSpinner, StrctSplitButton, StrctSplitter, StrctStack, StrctStackItem, StrctStatusDot, StrctStep, StrctStepAction, StrctSteps, StrctSubmenu, StrctTab, StrctTable, StrctTabs, StrctTag, StrctTagLeading, StrctThemeService, StrctThemeSwitcher, StrctTimeRangePicker, StrctTimeline, StrctTimelineItem, StrctToastOutlet, StrctToastService, StrctToggle, StrctToolbar, StrctToolbarCaption, StrctToolbarSpacer, StrctTooltip, StrctTour, StrctTransfer, StrctTree, StrctTreeNode, StrctTreeSelect, StrctVerticalNav, StrctWatermark, StrctWindow, StrctWindowDock, StrctWindowService, StrctWizard, StrctWizardAside, __qrInternals, focusFirstIn, keepTabInside, lockBodyScroll, parseAnsi, provideStrctWizardDefaults, registerStrctIcon, restoreFocus, saveFocusedElement, strctCheckHostDisplay, strctCheckHostInputs, strctComputeDiff, strctDpPad, strctFormatBytes, strctFormatDuration, strctFormatRate, strctFormatSi, strctQrMatrix, strctValidationIcon, strctValidationTone, unlockBodyScroll };
27271
+ export { FOCUSABLE_SELECTOR, STRCT_DP_DOW, STRCT_DP_DOW_FULL, STRCT_DP_MONTHS, STRCT_ICONS, STRCT_ICON_GROUPS, STRCT_ICON_NAMES, STRCT_MASKS, STRCT_NOTIFICATION_HISTORY_LIMIT, STRCT_PALETTES, STRCT_RAW_ICONS, STRCT_TIME_RANGE_PRESETS, STRCT_WIZARD_DEFAULTS, StrctAccordion, StrctAccordionPanel, StrctAlert, StrctAlertActions, StrctAnnouncer, StrctAvatar, StrctBadge, StrctBreadcrumb, StrctBreadcrumbItem, StrctButton, StrctButtonGroup, StrctBytesPipe, StrctCard, StrctCardBlock, StrctCardFooter, StrctCardHeader, StrctCardHeaderActions, StrctCardHeaderLeading, StrctCardHeaderMeta, StrctCardHeaderNote, StrctCascadeColumn, StrctCascadeHost, StrctCascadeSelect, StrctCellDef, StrctCellStatus, StrctChange, StrctChart, StrctChatAttachment, StrctChatComposer, StrctChatMessage, StrctChatThread, StrctCheckbox, StrctChips, StrctCode, StrctCodeInline, StrctColorPicker, StrctCombobox, StrctCommandPalette, StrctConfirmOutlet, StrctConfirmService, StrctContextMenu, StrctContextMenuTrigger, StrctControlDescription, StrctCopy, StrctDatagrid, StrctDatagridActionBar, StrctDatagridActionBarCaption, StrctDatepicker, StrctDatetimePicker, StrctDesc, StrctDescriptionList, StrctDiff, StrctDivider, StrctDonut, StrctDrawer, StrctDrawerFooter, StrctDropdown, StrctDropdownDivider, StrctDropdownItem, StrctDropdownItemAction, StrctDropdownTrigger, StrctDurationPipe, StrctEmptyState, StrctField, StrctFieldGroup, StrctFieldHint, StrctFieldPrefix, StrctFieldSuffix, StrctFieldValue, StrctFile, StrctFilterBar, StrctFlow, StrctFlowNodeTemplate, StrctFooter, StrctGauge, StrctHeader, StrctHeatmap, StrctHero, StrctHotkeysHelp, StrctHotkeysService, StrctIcon, StrctInlineEdit, StrctInput, StrctInputMask, StrctInputOtp, StrctKbd, StrctKnob, StrctLegend, StrctList, StrctListItem, StrctListItemDescription, StrctListItemLeading, StrctListItemMeta, StrctListItemTrailing, StrctLiveIndicator, StrctLogViewer, StrctLogin, StrctMediaFrame, StrctMenuPanel, StrctMenuService, StrctMenubar, StrctMetricTile, StrctModal, StrctModalContent, StrctNav, StrctNavItem, StrctNotificationCenter, StrctNumber, StrctOverlay, StrctPageHeader, StrctPageHeaderActions, StrctPageHeaderCrumbs, StrctPageHeaderTitleMeta, StrctPagination, StrctPassword, StrctPopover, StrctPopoverTrigger, StrctProgress, StrctQr, StrctRadio, StrctRadioGroup, StrctRail, StrctRange, StrctRatePipe, StrctRating, StrctReorder, StrctReorderGroup, StrctReorderHandle, StrctReorderItem, StrctResizeHandle, StrctRowDetailDef, StrctSearchbox, StrctSectionHeader, StrctSectionHeaderActions, StrctSectionHeaderMeta, StrctSectionMenu, StrctSegmented, StrctSelect, StrctShell, StrctShellService, StrctSiPipe, StrctSignpost, StrctSignpostTrigger, StrctSkeleton, StrctSparkline, StrctSpeedDial, StrctSpinner, StrctSplitButton, StrctSplitter, StrctStack, StrctStackItem, StrctStatusDot, StrctStep, StrctStepAction, StrctSteps, StrctSubmenu, StrctTab, StrctTable, StrctTabs, StrctTag, StrctTagLeading, StrctThemeService, StrctThemeSwitcher, StrctTimeRangePicker, StrctTimeline, StrctTimelineItem, StrctToastOutlet, StrctToastService, StrctToggle, StrctToolbar, StrctToolbarCaption, StrctToolbarSpacer, StrctTooltip, StrctTour, StrctTransfer, StrctTree, StrctTreeNode, StrctTreeSelect, StrctVerticalNav, StrctWatermark, StrctWindow, StrctWindowDock, StrctWindowService, StrctWizard, StrctWizardAside, __qrInternals, focusFirstIn, keepTabInside, lockBodyScroll, parseAnsi, provideStrctWizardDefaults, registerStrctIcon, restoreFocus, saveFocusedElement, strctCheckHostDisplay, strctCheckHostInputs, strctComputeDiff, strctDpPad, strctFormatBytes, strctFormatDuration, strctFormatRate, strctFormatSi, strctQrMatrix, strctValidationIcon, strctValidationTone, unlockBodyScroll };
26958
27272
  //# sourceMappingURL=akcelik-strct.mjs.map