@akcelik/strct 0.31.1 → 1.0.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 +148 -62
- package/fesm2022/akcelik-strct.mjs.map +1 -1
- package/package.json +1 -1
- package/types/akcelik-strct.d.ts +11 -0
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { inject, DOCUMENT, signal, computed, Injectable, input, ViewEncapsulation, ChangeDetectionStrategy, Component, ElementRef, NgZone, afterNextRender, Directive, model, output, booleanAttribute, HostListener, contentChildren, effect, ApplicationRef, EnvironmentInjector, createComponent, forwardRef, DestroyRef, contentChild, viewChild, viewChildren,
|
|
2
|
+
import { inject, DOCUMENT, signal, computed, Injectable, input, ViewEncapsulation, ChangeDetectionStrategy, Component, ElementRef, NgZone, afterNextRender, Directive, model, output, booleanAttribute, HostListener, contentChildren, effect, ApplicationRef, EnvironmentInjector, createComponent, forwardRef, DestroyRef, contentChild, viewChild, viewChildren, untracked, TemplateRef, Renderer2 } from '@angular/core';
|
|
3
3
|
import { DomSanitizer } from '@angular/platform-browser';
|
|
4
4
|
import { NgTemplateOutlet, DOCUMENT as DOCUMENT$1 } from '@angular/common';
|
|
5
5
|
import { RouterLink, RouterLinkActive } from '@angular/router';
|
|
@@ -6413,8 +6413,10 @@ const MONTHS = [
|
|
|
6413
6413
|
'December',
|
|
6414
6414
|
];
|
|
6415
6415
|
const DOW = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
|
|
6416
|
+
const DOW_FULL = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
|
|
6416
6417
|
const pad = (n) => String(n).padStart(2, '0');
|
|
6417
6418
|
const toIso = (y, m, d) => `${y}-${pad(m + 1)}-${pad(d)}`;
|
|
6419
|
+
let dpUid = 0;
|
|
6418
6420
|
/**
|
|
6419
6421
|
* Calendar date picker. Value is an ISO `yyyy-mm-dd` string. CVA-compatible.
|
|
6420
6422
|
* <strct-datepicker [(ngModel)]="date" />
|
|
@@ -6424,6 +6426,8 @@ class StrctDatepicker {
|
|
|
6424
6426
|
/** Placeholder text when empty. */
|
|
6425
6427
|
placeholder = input('Select a date', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
6426
6428
|
dow = DOW;
|
|
6429
|
+
dowFull = DOW_FULL;
|
|
6430
|
+
titleId = `strct-dp-title-${++dpUid}`;
|
|
6427
6431
|
value = signal('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
6428
6432
|
open = signal(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
|
|
6429
6433
|
isDisabled = signal(false, ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
|
|
@@ -6458,6 +6462,17 @@ class StrctDatepicker {
|
|
|
6458
6462
|
};
|
|
6459
6463
|
});
|
|
6460
6464
|
}, ...(ngDevMode ? [{ debugName: "cells" }] : /* istanbul ignore next */ []));
|
|
6465
|
+
/** The 42 cells chunked into ARIA grid rows (weeks). */
|
|
6466
|
+
weeks = computed(() => {
|
|
6467
|
+
const all = this.cells();
|
|
6468
|
+
return Array.from({ length: 6 }, (_, w) => all.slice(w * 7, w * 7 + 7));
|
|
6469
|
+
}, ...(ngDevMode ? [{ debugName: "weeks" }] : /* istanbul ignore next */ []));
|
|
6470
|
+
/** Accessible name of one day cell: "Tuesday, March 4, 2026". */
|
|
6471
|
+
cellAria(cell) {
|
|
6472
|
+
const [y, m, d] = cell.iso.split('-').map(Number);
|
|
6473
|
+
const dow = DOW_FULL[new Date(y, m - 1, d).getDay()];
|
|
6474
|
+
return `${dow}, ${MONTHS[m - 1]} ${d}, ${y}`;
|
|
6475
|
+
}
|
|
6461
6476
|
onChange = () => { };
|
|
6462
6477
|
onTouched = () => { };
|
|
6463
6478
|
toggle() {
|
|
@@ -6477,10 +6492,26 @@ class StrctDatepicker {
|
|
|
6477
6492
|
this.focusedIso.set(iso);
|
|
6478
6493
|
const [y, m] = iso.split('-').map(Number);
|
|
6479
6494
|
this.view.set({ y, m: m - 1 });
|
|
6480
|
-
this.
|
|
6495
|
+
this.close();
|
|
6481
6496
|
this.onChange(iso);
|
|
6482
6497
|
this.onTouched();
|
|
6483
6498
|
}
|
|
6499
|
+
constructor() {
|
|
6500
|
+
// Roving focus: the keyboard cursor's day cell takes real focus while the
|
|
6501
|
+
// calendar is open (APG date-picker dialog pattern); the input gets it back
|
|
6502
|
+
// on close via close().
|
|
6503
|
+
effect(() => {
|
|
6504
|
+
const open = this.open();
|
|
6505
|
+
const iso = this.focusedIso();
|
|
6506
|
+
untracked(() => {
|
|
6507
|
+
if (!open || !iso)
|
|
6508
|
+
return;
|
|
6509
|
+
setTimeout(() => this.host.nativeElement
|
|
6510
|
+
.querySelector(`.strct-dp__day[data-iso="${iso}"]`)
|
|
6511
|
+
?.focus());
|
|
6512
|
+
});
|
|
6513
|
+
});
|
|
6514
|
+
}
|
|
6484
6515
|
onKeydown(event) {
|
|
6485
6516
|
if (this.isDisabled())
|
|
6486
6517
|
return;
|
|
@@ -6508,13 +6539,24 @@ class StrctDatepicker {
|
|
|
6508
6539
|
event.preventDefault();
|
|
6509
6540
|
this.shiftFocus(7);
|
|
6510
6541
|
break;
|
|
6542
|
+
case 'Home': {
|
|
6543
|
+
// Start of the focused week (APG grid pattern).
|
|
6544
|
+
event.preventDefault();
|
|
6545
|
+
this.shiftFocus(-this.focusedDow());
|
|
6546
|
+
break;
|
|
6547
|
+
}
|
|
6548
|
+
case 'End': {
|
|
6549
|
+
event.preventDefault();
|
|
6550
|
+
this.shiftFocus(6 - this.focusedDow());
|
|
6551
|
+
break;
|
|
6552
|
+
}
|
|
6511
6553
|
case 'PageUp':
|
|
6512
6554
|
event.preventDefault();
|
|
6513
|
-
this.shiftFocus(0, -1);
|
|
6555
|
+
this.shiftFocus(0, event.shiftKey ? -12 : -1); // Shift = previous year
|
|
6514
6556
|
break;
|
|
6515
6557
|
case 'PageDown':
|
|
6516
6558
|
event.preventDefault();
|
|
6517
|
-
this.shiftFocus(0, 1);
|
|
6559
|
+
this.shiftFocus(0, event.shiftKey ? 12 : 1); // Shift = next year
|
|
6518
6560
|
break;
|
|
6519
6561
|
case 'Enter':
|
|
6520
6562
|
case ' ':
|
|
@@ -6524,10 +6566,22 @@ class StrctDatepicker {
|
|
|
6524
6566
|
break;
|
|
6525
6567
|
case 'Escape':
|
|
6526
6568
|
event.preventDefault();
|
|
6527
|
-
this.
|
|
6569
|
+
this.close();
|
|
6528
6570
|
break;
|
|
6529
6571
|
}
|
|
6530
6572
|
}
|
|
6573
|
+
/** Day-of-week (0–6) of the keyboard cursor. */
|
|
6574
|
+
focusedDow() {
|
|
6575
|
+
const [y, m, d] = (this.focusedIso() || this.today).split('-').map(Number);
|
|
6576
|
+
return new Date(y, m - 1, d).getDay();
|
|
6577
|
+
}
|
|
6578
|
+
/** Close the panel and hand focus back to the input. */
|
|
6579
|
+
close() {
|
|
6580
|
+
this.open.set(false);
|
|
6581
|
+
this.host.nativeElement
|
|
6582
|
+
.querySelector('.strct-dp__input')
|
|
6583
|
+
?.focus();
|
|
6584
|
+
}
|
|
6531
6585
|
syncFocus() {
|
|
6532
6586
|
const base = this.value() || this.today;
|
|
6533
6587
|
this.focusedIso.set(base);
|
|
@@ -6598,6 +6652,7 @@ class StrctDatepicker {
|
|
|
6598
6652
|
<div
|
|
6599
6653
|
class="strct-dp__panel"
|
|
6600
6654
|
role="dialog"
|
|
6655
|
+
[attr.aria-labelledby]="titleId"
|
|
6601
6656
|
[strctOverlay]="field"
|
|
6602
6657
|
strctOverlayPlacement="bottom-start"
|
|
6603
6658
|
>
|
|
@@ -6610,7 +6665,7 @@ class StrctDatepicker {
|
|
|
6610
6665
|
>
|
|
6611
6666
|
<strct-icon name="chevronLeft" [size]="14" [strokeWidth]="1.7" />
|
|
6612
6667
|
</button>
|
|
6613
|
-
<span class="strct-dp__title">{{ monthLabel() }}</span>
|
|
6668
|
+
<span class="strct-dp__title" [id]="titleId" aria-live="polite">{{ monthLabel() }}</span>
|
|
6614
6669
|
<button
|
|
6615
6670
|
type="button"
|
|
6616
6671
|
class="strct-dp__nav"
|
|
@@ -6620,24 +6675,39 @@ class StrctDatepicker {
|
|
|
6620
6675
|
<strct-icon name="chevronRight" [size]="14" [strokeWidth]="1.7" />
|
|
6621
6676
|
</button>
|
|
6622
6677
|
</div>
|
|
6623
|
-
|
|
6624
|
-
|
|
6625
|
-
|
|
6626
|
-
|
|
6627
|
-
|
|
6628
|
-
|
|
6629
|
-
|
|
6630
|
-
|
|
6631
|
-
|
|
6632
|
-
|
|
6633
|
-
|
|
6634
|
-
|
|
6635
|
-
|
|
6636
|
-
|
|
6637
|
-
|
|
6638
|
-
|
|
6639
|
-
|
|
6640
|
-
|
|
6678
|
+
<!-- ARIA grid (APG date-picker dialog pattern): focus roves the day
|
|
6679
|
+
cells; the input regains focus on close. -->
|
|
6680
|
+
<div class="strct-dp__gridwrap" role="grid" [attr.aria-labelledby]="titleId">
|
|
6681
|
+
<div class="strct-dp__dow" role="row">
|
|
6682
|
+
@for (d of dow; track d; let i = $index) {
|
|
6683
|
+
<span role="columnheader" [attr.aria-label]="dowFull[i]" [attr.abbr]="dowFull[i]">{{
|
|
6684
|
+
d
|
|
6685
|
+
}}</span>
|
|
6686
|
+
}
|
|
6687
|
+
</div>
|
|
6688
|
+
@for (week of weeks(); track $index) {
|
|
6689
|
+
<div class="strct-dp__grid" role="row">
|
|
6690
|
+
@for (cell of week; track cell.iso) {
|
|
6691
|
+
<button
|
|
6692
|
+
type="button"
|
|
6693
|
+
role="gridcell"
|
|
6694
|
+
class="strct-dp__day"
|
|
6695
|
+
[class.strct-dp__day--muted]="!cell.inMonth"
|
|
6696
|
+
[class.strct-dp__day--today]="cell.iso === today"
|
|
6697
|
+
[class.strct-dp__day--focused]="cell.iso === focusedIso()"
|
|
6698
|
+
[class.strct-dp__day--selected]="cell.iso === value()"
|
|
6699
|
+
[attr.data-iso]="cell.iso"
|
|
6700
|
+
[attr.tabindex]="cell.iso === focusedIso() ? 0 : -1"
|
|
6701
|
+
[attr.aria-selected]="cell.iso === value()"
|
|
6702
|
+
[attr.aria-current]="cell.iso === today ? 'date' : null"
|
|
6703
|
+
[attr.aria-label]="cellAria(cell)"
|
|
6704
|
+
(click)="pick(cell.iso)"
|
|
6705
|
+
(keydown)="onKeydown($event)"
|
|
6706
|
+
>
|
|
6707
|
+
{{ cell.day }}
|
|
6708
|
+
</button>
|
|
6709
|
+
}
|
|
6710
|
+
</div>
|
|
6641
6711
|
}
|
|
6642
6712
|
</div>
|
|
6643
6713
|
</div>
|
|
@@ -6675,6 +6745,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
|
|
|
6675
6745
|
<div
|
|
6676
6746
|
class="strct-dp__panel"
|
|
6677
6747
|
role="dialog"
|
|
6748
|
+
[attr.aria-labelledby]="titleId"
|
|
6678
6749
|
[strctOverlay]="field"
|
|
6679
6750
|
strctOverlayPlacement="bottom-start"
|
|
6680
6751
|
>
|
|
@@ -6687,7 +6758,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
|
|
|
6687
6758
|
>
|
|
6688
6759
|
<strct-icon name="chevronLeft" [size]="14" [strokeWidth]="1.7" />
|
|
6689
6760
|
</button>
|
|
6690
|
-
<span class="strct-dp__title">{{ monthLabel() }}</span>
|
|
6761
|
+
<span class="strct-dp__title" [id]="titleId" aria-live="polite">{{ monthLabel() }}</span>
|
|
6691
6762
|
<button
|
|
6692
6763
|
type="button"
|
|
6693
6764
|
class="strct-dp__nav"
|
|
@@ -6697,30 +6768,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
|
|
|
6697
6768
|
<strct-icon name="chevronRight" [size]="14" [strokeWidth]="1.7" />
|
|
6698
6769
|
</button>
|
|
6699
6770
|
</div>
|
|
6700
|
-
|
|
6701
|
-
|
|
6702
|
-
|
|
6703
|
-
|
|
6704
|
-
|
|
6705
|
-
|
|
6706
|
-
|
|
6707
|
-
|
|
6708
|
-
|
|
6709
|
-
|
|
6710
|
-
|
|
6711
|
-
|
|
6712
|
-
|
|
6713
|
-
|
|
6714
|
-
|
|
6715
|
-
|
|
6716
|
-
|
|
6717
|
-
|
|
6771
|
+
<!-- ARIA grid (APG date-picker dialog pattern): focus roves the day
|
|
6772
|
+
cells; the input regains focus on close. -->
|
|
6773
|
+
<div class="strct-dp__gridwrap" role="grid" [attr.aria-labelledby]="titleId">
|
|
6774
|
+
<div class="strct-dp__dow" role="row">
|
|
6775
|
+
@for (d of dow; track d; let i = $index) {
|
|
6776
|
+
<span role="columnheader" [attr.aria-label]="dowFull[i]" [attr.abbr]="dowFull[i]">{{
|
|
6777
|
+
d
|
|
6778
|
+
}}</span>
|
|
6779
|
+
}
|
|
6780
|
+
</div>
|
|
6781
|
+
@for (week of weeks(); track $index) {
|
|
6782
|
+
<div class="strct-dp__grid" role="row">
|
|
6783
|
+
@for (cell of week; track cell.iso) {
|
|
6784
|
+
<button
|
|
6785
|
+
type="button"
|
|
6786
|
+
role="gridcell"
|
|
6787
|
+
class="strct-dp__day"
|
|
6788
|
+
[class.strct-dp__day--muted]="!cell.inMonth"
|
|
6789
|
+
[class.strct-dp__day--today]="cell.iso === today"
|
|
6790
|
+
[class.strct-dp__day--focused]="cell.iso === focusedIso()"
|
|
6791
|
+
[class.strct-dp__day--selected]="cell.iso === value()"
|
|
6792
|
+
[attr.data-iso]="cell.iso"
|
|
6793
|
+
[attr.tabindex]="cell.iso === focusedIso() ? 0 : -1"
|
|
6794
|
+
[attr.aria-selected]="cell.iso === value()"
|
|
6795
|
+
[attr.aria-current]="cell.iso === today ? 'date' : null"
|
|
6796
|
+
[attr.aria-label]="cellAria(cell)"
|
|
6797
|
+
(click)="pick(cell.iso)"
|
|
6798
|
+
(keydown)="onKeydown($event)"
|
|
6799
|
+
>
|
|
6800
|
+
{{ cell.day }}
|
|
6801
|
+
</button>
|
|
6802
|
+
}
|
|
6803
|
+
</div>
|
|
6718
6804
|
}
|
|
6719
6805
|
</div>
|
|
6720
6806
|
</div>
|
|
6721
6807
|
}
|
|
6722
6808
|
`, host: { class: 'strct-dp' }, styles: [".strct-dp{position:relative;display:inline-block;width:100%;max-width:240px}.strct-dp__field{position:relative}.strct-dp__input{padding-inline-end:36px;cursor:pointer}.strct-dp__icon{position:absolute;right:4px;top:50%;transform:translateY(-50%);display:inline-flex;padding:5px;border:0;border-radius:5px;background:transparent;color:var(--t2);cursor:pointer}.strct-dp__icon:hover{color:var(--acc);background:var(--bg-3)}.strct-dp__panel{position:absolute;top:calc(100% + 5px);left:0;z-index:250;width:250px;padding:10px;background:var(--bg-1);border:1px solid var(--b2);border-radius:9px;box-shadow:var(--shh)}.strct-dp__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.strct-dp__title{font-size:13px;font-weight:600;color:var(--t1)}.strct-dp__nav{display:inline-flex;padding:5px;border:0;border-radius:5px;background:transparent;color:var(--t2);cursor:pointer}.strct-dp__nav:hover{color:var(--t1);background:var(--bg-3)}.strct-dp__dow{display:grid;grid-template-columns:repeat(7,1fr);margin-bottom:4px}.strct-dp__dow span{text-align:center;font-size:12px;font-weight:600;color:var(--t3);padding:4px 0}.strct-dp__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.strct-dp__day{aspect-ratio:1;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:6px;background:transparent;cursor:pointer;font-family:var(--font);font-size:12px;color:var(--t1)}.strct-dp__day:hover{background:var(--bg-3)}.strct-dp__day--muted{color:var(--t3)}.strct-dp__day--today{box-shadow:inset 0 0 0 1px var(--acc30)}.strct-dp__day--focused{box-shadow:inset 0 0 0 2px var(--acc)}.strct-dp__day--selected{background:var(--acc);color:var(--inv)}.strct-dp__day--selected:hover{background:var(--acc)}\n"] }]
|
|
6723
|
-
}], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], onDocClick: [{
|
|
6809
|
+
}], ctorParameters: () => [], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], onDocClick: [{
|
|
6724
6810
|
type: HostListener,
|
|
6725
6811
|
args: ['document:click', ['$event']]
|
|
6726
6812
|
}], onEscape: [{
|
|
@@ -7965,21 +8051,21 @@ class StrctDatagrid {
|
|
|
7965
8051
|
<th
|
|
7966
8052
|
class="strct-dg__expandcol"
|
|
7967
8053
|
[class.strct-dg__cell--sticky]="stickyActive()"
|
|
7968
|
-
[style.
|
|
8054
|
+
[style.insetInlineStart.px]="utilLeft('detail')"
|
|
7969
8055
|
></th>
|
|
7970
8056
|
}
|
|
7971
8057
|
@if (canExpand()) {
|
|
7972
8058
|
<th
|
|
7973
8059
|
class="strct-dg__expandcol"
|
|
7974
8060
|
[class.strct-dg__cell--sticky]="stickyActive()"
|
|
7975
|
-
[style.
|
|
8061
|
+
[style.insetInlineStart.px]="utilLeft('expand')"
|
|
7976
8062
|
></th>
|
|
7977
8063
|
}
|
|
7978
8064
|
@if (selectable()) {
|
|
7979
8065
|
<th
|
|
7980
8066
|
class="strct-dg__sel"
|
|
7981
8067
|
[class.strct-dg__cell--sticky]="stickyActive()"
|
|
7982
|
-
[style.
|
|
8068
|
+
[style.insetInlineStart.px]="utilLeft('sel')"
|
|
7983
8069
|
>
|
|
7984
8070
|
<strct-checkbox
|
|
7985
8071
|
[ariaLabel]="L().selectAll"
|
|
@@ -7996,7 +8082,7 @@ class StrctDatagrid {
|
|
|
7996
8082
|
[class.strct-dg__th--sortable]="col.sortable"
|
|
7997
8083
|
[class.strct-dg__cell--sticky]="isSticky(col)"
|
|
7998
8084
|
[class.strct-dg__cell--sticky-last]="col.key === lastStickyKey()"
|
|
7999
|
-
[style.
|
|
8085
|
+
[style.insetInlineStart.px]="stickyLeft(col.key)"
|
|
8000
8086
|
[attr.tabindex]="col.sortable ? 0 : null"
|
|
8001
8087
|
[attr.aria-sort]="col.sortable ? ariaSort(col.key) : null"
|
|
8002
8088
|
(click)="col.sortable && sortBy(col.key)"
|
|
@@ -8064,7 +8150,7 @@ class StrctDatagrid {
|
|
|
8064
8150
|
<td
|
|
8065
8151
|
class="strct-dg__expandcell"
|
|
8066
8152
|
[class.strct-dg__cell--sticky]="stickyActive()"
|
|
8067
|
-
[style.
|
|
8153
|
+
[style.insetInlineStart.px]="utilLeft('detail')"
|
|
8068
8154
|
>
|
|
8069
8155
|
<button
|
|
8070
8156
|
type="button"
|
|
@@ -8082,7 +8168,7 @@ class StrctDatagrid {
|
|
|
8082
8168
|
<td
|
|
8083
8169
|
class="strct-dg__expandcell"
|
|
8084
8170
|
[class.strct-dg__cell--sticky]="stickyActive()"
|
|
8085
|
-
[style.
|
|
8171
|
+
[style.insetInlineStart.px]="utilLeft('expand')"
|
|
8086
8172
|
>
|
|
8087
8173
|
<button
|
|
8088
8174
|
type="button"
|
|
@@ -8100,7 +8186,7 @@ class StrctDatagrid {
|
|
|
8100
8186
|
<td
|
|
8101
8187
|
class="strct-dg__sel"
|
|
8102
8188
|
[class.strct-dg__cell--sticky]="stickyActive()"
|
|
8103
|
-
[style.
|
|
8189
|
+
[style.insetInlineStart.px]="utilLeft('sel')"
|
|
8104
8190
|
>
|
|
8105
8191
|
<strct-checkbox
|
|
8106
8192
|
[ariaLabel]="L().selectRow"
|
|
@@ -8114,7 +8200,7 @@ class StrctDatagrid {
|
|
|
8114
8200
|
[style.text-align]="col.align ?? 'start'"
|
|
8115
8201
|
[class.strct-dg__cell--sticky]="isSticky(col)"
|
|
8116
8202
|
[class.strct-dg__cell--sticky-last]="col.key === lastStickyKey()"
|
|
8117
|
-
[style.
|
|
8203
|
+
[style.insetInlineStart.px]="stickyLeft(col.key)"
|
|
8118
8204
|
>
|
|
8119
8205
|
@if (cellTemplate(col.key); as tpl) {
|
|
8120
8206
|
<ng-container
|
|
@@ -8253,7 +8339,7 @@ class StrctDatagrid {
|
|
|
8253
8339
|
</div>
|
|
8254
8340
|
</div>
|
|
8255
8341
|
}
|
|
8256
|
-
`, isInline: true, styles: [".strct-dg-host{display:block;border:1px solid var(--b2);border-radius:10px;background:var(--bg-2);box-shadow:var(--shadow-rest)}.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:5}.strct-dg__vspacer td{padding:0;border:0;background:transparent}.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:3}.strct-dg thead th.strct-dg__cell--sticky{z-index:6}.strct-dg .strct-dg__cell--sticky-last:after{content:\"\";position:absolute;top:0;bottom:0;
|
|
8342
|
+
`, isInline: true, styles: [".strct-dg-host{display:block;border:1px solid var(--b2);border-radius:10px;background:var(--bg-2);box-shadow:var(--shadow-rest)}.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:5}.strct-dg__vspacer td{padding:0;border:0;background:transparent}.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:3}.strct-dg thead th.strct-dg__cell--sticky{z-index:6}.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:2}.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-top-right-radius:0;border-bottom-right-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;right: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:0 8px 8px 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;background:var(--bg-3);border-radius:var(--radius-sm);animation:strct-skeleton-pulse 1.4s ease infinite}.strct-dg__skeleton-row td{border-bottom:1px solid var(--b1)}.strct-dg__empty{text-align:center;color:var(--t3);padding:22px}.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);left:0;z-index:10;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)}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "size", "strokeWidth", "badge", "ariaLabel"] }, { kind: "component", type: StrctPagination, selector: "strct-pagination", inputs: ["prevLabel", "nextLabel", "regionLabel", "total", "pageSize", "page"], outputs: ["pageChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: StrctCheckbox, selector: "strct-checkbox", inputs: ["checked", "isDisabled", "disabled", "indeterminate", "ariaLabel"], outputs: ["checkedChange", "isDisabledChange"] }, { 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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
8257
8343
|
}
|
|
8258
8344
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctDatagrid, decorators: [{
|
|
8259
8345
|
type: Component,
|
|
@@ -8285,21 +8371,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
|
|
|
8285
8371
|
<th
|
|
8286
8372
|
class="strct-dg__expandcol"
|
|
8287
8373
|
[class.strct-dg__cell--sticky]="stickyActive()"
|
|
8288
|
-
[style.
|
|
8374
|
+
[style.insetInlineStart.px]="utilLeft('detail')"
|
|
8289
8375
|
></th>
|
|
8290
8376
|
}
|
|
8291
8377
|
@if (canExpand()) {
|
|
8292
8378
|
<th
|
|
8293
8379
|
class="strct-dg__expandcol"
|
|
8294
8380
|
[class.strct-dg__cell--sticky]="stickyActive()"
|
|
8295
|
-
[style.
|
|
8381
|
+
[style.insetInlineStart.px]="utilLeft('expand')"
|
|
8296
8382
|
></th>
|
|
8297
8383
|
}
|
|
8298
8384
|
@if (selectable()) {
|
|
8299
8385
|
<th
|
|
8300
8386
|
class="strct-dg__sel"
|
|
8301
8387
|
[class.strct-dg__cell--sticky]="stickyActive()"
|
|
8302
|
-
[style.
|
|
8388
|
+
[style.insetInlineStart.px]="utilLeft('sel')"
|
|
8303
8389
|
>
|
|
8304
8390
|
<strct-checkbox
|
|
8305
8391
|
[ariaLabel]="L().selectAll"
|
|
@@ -8316,7 +8402,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
|
|
|
8316
8402
|
[class.strct-dg__th--sortable]="col.sortable"
|
|
8317
8403
|
[class.strct-dg__cell--sticky]="isSticky(col)"
|
|
8318
8404
|
[class.strct-dg__cell--sticky-last]="col.key === lastStickyKey()"
|
|
8319
|
-
[style.
|
|
8405
|
+
[style.insetInlineStart.px]="stickyLeft(col.key)"
|
|
8320
8406
|
[attr.tabindex]="col.sortable ? 0 : null"
|
|
8321
8407
|
[attr.aria-sort]="col.sortable ? ariaSort(col.key) : null"
|
|
8322
8408
|
(click)="col.sortable && sortBy(col.key)"
|
|
@@ -8384,7 +8470,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
|
|
|
8384
8470
|
<td
|
|
8385
8471
|
class="strct-dg__expandcell"
|
|
8386
8472
|
[class.strct-dg__cell--sticky]="stickyActive()"
|
|
8387
|
-
[style.
|
|
8473
|
+
[style.insetInlineStart.px]="utilLeft('detail')"
|
|
8388
8474
|
>
|
|
8389
8475
|
<button
|
|
8390
8476
|
type="button"
|
|
@@ -8402,7 +8488,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
|
|
|
8402
8488
|
<td
|
|
8403
8489
|
class="strct-dg__expandcell"
|
|
8404
8490
|
[class.strct-dg__cell--sticky]="stickyActive()"
|
|
8405
|
-
[style.
|
|
8491
|
+
[style.insetInlineStart.px]="utilLeft('expand')"
|
|
8406
8492
|
>
|
|
8407
8493
|
<button
|
|
8408
8494
|
type="button"
|
|
@@ -8420,7 +8506,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
|
|
|
8420
8506
|
<td
|
|
8421
8507
|
class="strct-dg__sel"
|
|
8422
8508
|
[class.strct-dg__cell--sticky]="stickyActive()"
|
|
8423
|
-
[style.
|
|
8509
|
+
[style.insetInlineStart.px]="utilLeft('sel')"
|
|
8424
8510
|
>
|
|
8425
8511
|
<strct-checkbox
|
|
8426
8512
|
[ariaLabel]="L().selectRow"
|
|
@@ -8434,7 +8520,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
|
|
|
8434
8520
|
[style.text-align]="col.align ?? 'start'"
|
|
8435
8521
|
[class.strct-dg__cell--sticky]="isSticky(col)"
|
|
8436
8522
|
[class.strct-dg__cell--sticky-last]="col.key === lastStickyKey()"
|
|
8437
|
-
[style.
|
|
8523
|
+
[style.insetInlineStart.px]="stickyLeft(col.key)"
|
|
8438
8524
|
>
|
|
8439
8525
|
@if (cellTemplate(col.key); as tpl) {
|
|
8440
8526
|
<ng-container
|
|
@@ -8579,7 +8665,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
|
|
|
8579
8665
|
'[class.strct-dg-host--singleline]': 'singleLine()',
|
|
8580
8666
|
'[class.strct-dg-host--virtual]': 'virtual()',
|
|
8581
8667
|
'[class.strct-dg-host--sticky]': 'stickyActive()',
|
|
8582
|
-
}, styles: [".strct-dg-host{display:block;border:1px solid var(--b2);border-radius:10px;background:var(--bg-2);box-shadow:var(--shadow-rest)}.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:5}.strct-dg__vspacer td{padding:0;border:0;background:transparent}.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:3}.strct-dg thead th.strct-dg__cell--sticky{z-index:6}.strct-dg .strct-dg__cell--sticky-last:after{content:\"\";position:absolute;top:0;bottom:0;
|
|
8668
|
+
}, styles: [".strct-dg-host{display:block;border:1px solid var(--b2);border-radius:10px;background:var(--bg-2);box-shadow:var(--shadow-rest)}.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:5}.strct-dg__vspacer td{padding:0;border:0;background:transparent}.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:3}.strct-dg thead th.strct-dg__cell--sticky{z-index:6}.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:2}.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-top-right-radius:0;border-bottom-right-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;right: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:0 8px 8px 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;background:var(--bg-3);border-radius:var(--radius-sm);animation:strct-skeleton-pulse 1.4s ease infinite}.strct-dg__skeleton-row td{border-bottom:1px solid var(--b1)}.strct-dg__empty{text-align:center;color:var(--t3);padding:22px}.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);left:0;z-index:10;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)}\n"] }]
|
|
8583
8669
|
}], 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 }] }], 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"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], syncChange: [{ type: i0.Output, args: ["syncChange"] }], rowAction: [{ type: i0.Output, args: ["rowAction"] }], lazyLoad: [{ type: i0.Output, args: ["lazyLoad"] }], 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 }] }] } });
|
|
8584
8670
|
|
|
8585
8671
|
/** Vertical timeline container. Wraps `<strct-timeline-item>` children. */
|