@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.
- package/fesm2022/akcelik-strct.mjs +389 -75
- package/fesm2022/akcelik-strct.mjs.map +1 -1
- package/package.json +1 -1
- package/styles/_forms.scss +9 -0
- package/types/akcelik-strct.d.ts +97 -6
|
@@ -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: "
|
|
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: {
|
|
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">{{
|
|
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">{{
|
|
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
|
-
|
|
14165
|
+
const field = editor.matches('input')
|
|
13987
14166
|
? editor
|
|
13988
14167
|
: (editor.querySelector('input') ??
|
|
13989
|
-
editor.querySelector('button'))
|
|
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
|
-
|
|
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() :
|
|
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 (
|
|
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
|
-
|
|
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
|
-
|
|
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() :
|
|
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 (
|
|
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
|
-
|
|
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
|
-
|
|
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
|