s4y-ui 7.8.0 → 7.9.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/s4y-ui.mjs
CHANGED
|
@@ -1128,7 +1128,59 @@ class TableComponent {
|
|
|
1128
1128
|
infiniteScroll = input(false);
|
|
1129
1129
|
infiniteScrollThreshold = input(80);
|
|
1130
1130
|
isFetchingMore = input(false);
|
|
1131
|
+
virtualScroll = input(false);
|
|
1132
|
+
rowHeight = input(48);
|
|
1133
|
+
virtualBuffer = input(8);
|
|
1134
|
+
scrollTop = signal(0);
|
|
1135
|
+
containerHeight = signal(0);
|
|
1131
1136
|
scrollEndReached = output();
|
|
1137
|
+
totalRows = computed(() => this.sortedData().length);
|
|
1138
|
+
startIndex = computed(() => {
|
|
1139
|
+
if (!this.virtualScroll())
|
|
1140
|
+
return 0;
|
|
1141
|
+
const start = Math.floor(this.scrollTop() / this.rowHeight()) - this.virtualBuffer();
|
|
1142
|
+
return Math.max(start, 0);
|
|
1143
|
+
});
|
|
1144
|
+
visibleCount = computed(() => {
|
|
1145
|
+
if (!this.virtualScroll())
|
|
1146
|
+
return this.sortedData().length;
|
|
1147
|
+
const height = this.containerHeight();
|
|
1148
|
+
if (!height) {
|
|
1149
|
+
return this.virtualBuffer() * 2;
|
|
1150
|
+
}
|
|
1151
|
+
return Math.ceil(height / this.rowHeight()) + this.virtualBuffer() * 2;
|
|
1152
|
+
});
|
|
1153
|
+
endIndex = computed(() => {
|
|
1154
|
+
if (!this.virtualScroll())
|
|
1155
|
+
return this.sortedData().length;
|
|
1156
|
+
return Math.min(this.startIndex() + this.visibleCount(), this.sortedData().length);
|
|
1157
|
+
});
|
|
1158
|
+
virtualRows = computed(() => {
|
|
1159
|
+
const data = this.sortedData();
|
|
1160
|
+
if (!this.virtualScroll()) {
|
|
1161
|
+
return data.map((item, index) => ({
|
|
1162
|
+
item,
|
|
1163
|
+
index,
|
|
1164
|
+
}));
|
|
1165
|
+
}
|
|
1166
|
+
return data
|
|
1167
|
+
.slice(this.startIndex(), this.endIndex())
|
|
1168
|
+
.map((item, index) => ({
|
|
1169
|
+
item,
|
|
1170
|
+
index: this.startIndex() + index,
|
|
1171
|
+
}));
|
|
1172
|
+
});
|
|
1173
|
+
topSpacerHeight = computed(() => {
|
|
1174
|
+
if (!this.virtualScroll())
|
|
1175
|
+
return 0;
|
|
1176
|
+
return this.startIndex() * this.rowHeight();
|
|
1177
|
+
});
|
|
1178
|
+
bottomSpacerHeight = computed(() => {
|
|
1179
|
+
if (!this.virtualScroll())
|
|
1180
|
+
return 0;
|
|
1181
|
+
const remainingRows = this.totalRows() - this.endIndex();
|
|
1182
|
+
return remainingRows * this.rowHeight();
|
|
1183
|
+
});
|
|
1132
1184
|
lastPresetSignature = '';
|
|
1133
1185
|
get isTableGrow() {
|
|
1134
1186
|
return this.tableGrow();
|
|
@@ -1208,6 +1260,11 @@ class TableComponent {
|
|
|
1208
1260
|
}
|
|
1209
1261
|
trackByIndex = (index) => index;
|
|
1210
1262
|
onTableScroll(event) {
|
|
1263
|
+
const element = event.target;
|
|
1264
|
+
if (this.virtualScroll()) {
|
|
1265
|
+
this.scrollTop.set(element.scrollTop);
|
|
1266
|
+
this.containerHeight.set(element.clientHeight);
|
|
1267
|
+
}
|
|
1211
1268
|
if (!this.infiniteScroll())
|
|
1212
1269
|
return;
|
|
1213
1270
|
if (this.isLoading())
|
|
@@ -1218,7 +1275,6 @@ class TableComponent {
|
|
|
1218
1275
|
return;
|
|
1219
1276
|
if (this.isEndReached())
|
|
1220
1277
|
return;
|
|
1221
|
-
const element = event.target;
|
|
1222
1278
|
const hasScroll = element.scrollHeight > element.clientHeight;
|
|
1223
1279
|
if (!hasScroll)
|
|
1224
1280
|
return;
|
|
@@ -1228,11 +1284,11 @@ class TableComponent {
|
|
|
1228
1284
|
}
|
|
1229
1285
|
}
|
|
1230
1286
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1231
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.22", type: TableComponent, isStandalone: true, selector: "s4y-table", inputs: { headers: { classPropertyName: "headers", publicName: "headers", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, stickyHeader: { classPropertyName: "stickyHeader", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, customSort: { classPropertyName: "customSort", publicName: "customSort", isSignal: true, isRequired: false, transformFunction: null }, multipleSort: { classPropertyName: "multipleSort", publicName: "multipleSort", isSignal: true, isRequired: false, transformFunction: null }, initialSorts: { classPropertyName: "initialSorts", publicName: "initialSorts", isSignal: true, isRequired: false, transformFunction: null }, sortField: { classPropertyName: "sortField", publicName: "sortField", isSignal: true, isRequired: false, transformFunction: null }, sortOrder: { classPropertyName: "sortOrder", publicName: "sortOrder", isSignal: true, isRequired: false, transformFunction: null }, tableHeight: { classPropertyName: "tableHeight", publicName: "tableHeight", isSignal: true, isRequired: false, transformFunction: null }, tableMaxHeight: { classPropertyName: "tableMaxHeight", publicName: "tableMaxHeight", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null }, isFetchMoreError: { classPropertyName: "isFetchMoreError", publicName: "isFetchMoreError", isSignal: true, isRequired: false, transformFunction: null }, isEndReached: { classPropertyName: "isEndReached", publicName: "isEndReached", isSignal: true, isRequired: false, transformFunction: null }, fetchMoreErrorMessageDefault: { classPropertyName: "fetchMoreErrorMessageDefault", publicName: "fetchMoreErrorMessageDefault", isSignal: true, isRequired: false, transformFunction: null }, endReachedMessageDefault: { classPropertyName: "endReachedMessageDefault", publicName: "endReachedMessageDefault", isSignal: true, isRequired: false, transformFunction: null }, tableStyle: { classPropertyName: "tableStyle", publicName: "tableStyle", isSignal: true, isRequired: false, transformFunction: null }, errorMessageDefault: { classPropertyName: "errorMessageDefault", publicName: "errorMessageDefault", isSignal: true, isRequired: false, transformFunction: null }, emptyMessageDefault: { classPropertyName: "emptyMessageDefault", publicName: "emptyMessageDefault", isSignal: true, isRequired: false, transformFunction: null }, tableGrow: { classPropertyName: "tableGrow", publicName: "tableGrow", isSignal: true, isRequired: false, transformFunction: null }, infiniteScroll: { classPropertyName: "infiniteScroll", publicName: "infiniteScroll", isSignal: true, isRequired: false, transformFunction: null }, infiniteScrollThreshold: { classPropertyName: "infiniteScrollThreshold", publicName: "infiniteScrollThreshold", isSignal: true, isRequired: false, transformFunction: null }, isFetchingMore: { classPropertyName: "isFetchingMore", publicName: "isFetchingMore", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortFunction: "sortFunction", multiSortFunction: "multiSortFunction", scrollEndReached: "scrollEndReached" }, host: { properties: { "class.s4y-table-grow": "this.isTableGrow" } }, queries: [{ propertyName: "rowTemplate", first: true, predicate: ["rowTemplate"], descendants: true }, { propertyName: "headTemplate", first: true, predicate: ["headTemplate"], descendants: true }, { propertyName: "emptyTemplate", first: true, predicate: ["emptyTemplate"], descendants: true }, { propertyName: "errorTemplate", first: true, predicate: ["errorTemplate"], descendants: true }, { propertyName: "customEmptyTemplate", first: true, predicate: ["customEmptyTemplate"], descendants: true }, { propertyName: "customErrorTemplate", first: true, predicate: ["customErrorTemplate"], descendants: true }, { propertyName: "fetchMoreLoadingTemplate", first: true, predicate: ["fetchMoreLoadingTemplate"], descendants: true }, { propertyName: "fetchMoreErrorTemplate", first: true, predicate: ["fetchMoreErrorTemplate"], descendants: true }, { propertyName: "endReachedTemplate", first: true, predicate: ["endReachedTemplate"], descendants: true }], viewQueries: [{ propertyName: "tableScrollContainer", first: true, predicate: ["tableScrollContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\r\n class=\"s4y-table-container\"\r\n [class.s4y-table-container--sticky-header]=\"stickyHeader()\"\r\n #tableScrollContainer\r\n [ngStyle]=\"containerStyle()\"\r\n cdkScrollable\r\n (scroll)=\"onTableScroll($event)\"\r\n>\r\n <table class=\"s4y-table\">\r\n <thead>\r\n <ng-container [ngTemplateOutlet]=\"headTemplate\"></ng-container>\r\n </thead>\r\n <tbody>\r\n @if (isLoading()) {\r\n <tr class=\"loading\">\r\n <td [colSpan]=\"headers().length\">\r\n <s4y-spinner></s4y-spinner>\r\n </td>\r\n </tr>\r\n } @else if (hasError()) {\r\n @if (errorTemplate) {\r\n <tr class=\"error\">\r\n <td [colSpan]=\"headers().length\">\r\n <ng-container [ngTemplateOutlet]=\"errorTemplate\"></ng-container>\r\n </td>\r\n </tr>\r\n } @else if (customErrorTemplate) {\r\n <ng-container [ngTemplateOutlet]=\"customErrorTemplate\"></ng-container>\r\n } @else {\r\n <tr class=\"error\">\r\n <td [colSpan]=\"headers().length\">\r\n {{ errorMessageDefault() }}\r\n </td>\r\n </tr>\r\n }\r\n } @else {\r\n <ng-container [ngTemplateOutlet]=\"tableContent\"></ng-container>\r\n }\r\n </tbody>\r\n </table>\r\n</div>\r\n\r\n<ng-template #SortIcon>\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M4.86885 11H2.6665L6 3H8L11.3334 11H9.13113L8.7213 10H5.27869L4.86885 11ZM6.09836 8H7.90163L7 5.8L6.09836 8ZM18.9999 16V3H16.9999V16H13.9999L17.9999 21L21.9999 16H18.9999ZM10.9999 13H2.99992V15H7.85414L2.99992 19V21H10.9999V19H6.14605L10.9999 15V13Z\"\r\n ></path>\r\n </svg>\r\n</ng-template>\r\n\r\n<ng-template #tableContent>\r\n @for (item of sortedData(); track $index) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"rowTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item, idx: $index }\"\r\n >\r\n </ng-container>\r\n } @empty {\r\n @if (emptyTemplate) {\r\n <tr class=\"empty-content\">\r\n <td [colSpan]=\"headers().length\">\r\n <ng-container [ngTemplateOutlet]=\"emptyTemplate\"></ng-container>\r\n </td>\r\n </tr>\r\n } @else if (customEmptyTemplate) {\r\n <ng-container [ngTemplateOutlet]=\"customEmptyTemplate\"></ng-container>\r\n } @else {\r\n <tr class=\"empty-content\">\r\n <td [colSpan]=\"headers().length\">\r\n {{ emptyMessageDefault() }}\r\n </td>\r\n </tr>\r\n }\r\n }\r\n\r\n <ng-container [ngTemplateOutlet]=\"fetchMoreTemplate\"></ng-container>\r\n</ng-template>\r\n\r\n<ng-template #fetchMoreTemplate>\r\n @if (isFetchingMore()) {\r\n <tr class=\"fetch-more-loading\">\r\n <td [colSpan]=\"headers().length\">\r\n @if (fetchMoreLoadingTemplate) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"fetchMoreLoadingTemplate\"\r\n ></ng-container>\r\n } @else {\r\n <div class=\"s4y-fetch-more-state\">\r\n <s4y-spinner size=\"mini\"></s4y-spinner>\r\n </div>\r\n }\r\n </td>\r\n </tr>\r\n } @else if (isFetchMoreError()) {\r\n <tr class=\"fetch-more-error\">\r\n <td [colSpan]=\"headers().length\">\r\n @if (fetchMoreErrorTemplate) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"fetchMoreErrorTemplate\"\r\n ></ng-container>\r\n } @else {\r\n <div class=\"s4y-fetch-more-state\">\r\n {{ fetchMoreErrorMessageDefault() }}\r\n </div>\r\n }\r\n </td>\r\n </tr>\r\n } @else if (isEndReached()) {\r\n <tr class=\"fetch-more-end\">\r\n <td [colSpan]=\"headers().length\">\r\n @if (endReachedTemplate) {\r\n <ng-container [ngTemplateOutlet]=\"endReachedTemplate\"></ng-container>\r\n } @else {\r\n <div class=\"s4y-fetch-more-state\">\r\n {{ endReachedMessageDefault() }}\r\n </div>\r\n }\r\n </td>\r\n </tr>\r\n }\r\n</ng-template>\r\n", styles: ["s4y-table.s4y-table-grow{flex:1;min-height:0;display:flex;flex-direction:column}::host .table-grow{display:block;flex:1;min-height:0;display:flex;flex-direction:column}.s4y-table-container{overflow:auto;min-height:30rem;width:100%;container-type:inline-size}@media screen and (min-width:320px)and (max-width:480px){.s4y-table-container{padding-bottom:1.4rem;margin:0 auto}}@media screen and (min-width:481px)and (max-width:767px){.s4y-table-container{padding-bottom:1.4rem;margin:0 auto}}@media screen and (min-width:768px)and (max-width:1024px){.s4y-table-container{padding-bottom:1.4rem;margin:0 auto}}.s4y-table{border:1px solid var(--gray-300);border-collapse:collapse;width:100%}@media screen and (min-width:320px)and (max-width:480px){.s4y-table tr{white-space:nowrap}}@media screen and (min-width:481px)and (max-width:767px){.s4y-table tr{white-space:nowrap}}@media screen and (min-width:768px)and (max-width:1024px){.s4y-table tr{white-space:nowrap}}.s4y-table .s4y-table-head-th__content{display:flex;justify-content:space-between}.s4y-table thead{background-color:#eaeaea}.s4y-table thead tr{font-size:1.3rem;height:5rem;font-weight:700}.s4y-table thead th{transition:.2s ease}.s4y-table tbody tr{background-color:#fff;font-size:1.3rem;font-weight:400;height:5rem;border-bottom:1px solid var(--gray-300)}.s4y-table tfoot{background-color:#eaeaea}.s4y-table th,.s4y-table td{text-align:start;padding:0 .4rem}.s4y-table td:first-child,.s4y-table td:last-child,.s4y-table th:first-child,.s4y-table th:last-child{padding:0 1.4rem}.s4y-table td,.s4y-table th{padding:0 1.4rem}.s4y-table th.s4y-active-sort,.s4y-table th.s4y-active-sort.s4y-hover{background-color:var(--primary-color);color:#fff}.s4y-table tr.empty-content,.s4y-table tr.loading,.s4y-table tr.error{border:none}.s4y-table tr.empty-content td,.s4y-table tr.loading td,.s4y-table tr.error td{text-align:center;height:28rem;background-color:transparent;color:var(--gray-900);font-weight:700;border:none}.s4y-table .s4y-table-sticky{position:sticky;z-index:5;background-color:#fff}.s4y-table thead .s4y-table-sticky{z-index:15;background-color:#eaeaea}.s4y-table .s4y-table-sticky--left{left:0}.s4y-table .s4y-table-sticky--right{right:0}.s4y-table thead .s4y-table-sticky.s4y-active-sort{background-color:var(--primary-color);color:#fff}.s4y-table-container--sticky-header{position:relative;overflow:auto}.s4y-table-container--sticky-header .s4y-table{border-collapse:separate;border-spacing:0}.s4y-table-container--sticky-header .s4y-table thead th{position:sticky;top:0;z-index:10;background-color:#eaeaea;box-shadow:0 .1rem 0 var(--border-color)}.s4y-table-container--sticky-header .s4y-table thead th.s4y-table-sticky{z-index:20}.s4y-table-container--sticky-header .s4y-table tbody tr td{border-bottom:1px solid var(--gray-300)}.s4y-fetch-more-state{width:100%;min-height:44px;display:flex;align-items:center;justify-content:center;font-size:13px;color:#667085}.fetch-more-loading td,.fetch-more-error td,.fetch-more-end td{padding:8px 16px!important;text-align:center}.fetch-more-error .s4y-fetch-more-state{color:#b42318}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: SpinnerComponent, selector: "s4y-spinner", inputs: ["size", "color"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i1$3.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }], encapsulation: i0.ViewEncapsulation.None });
|
|
1287
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.22", type: TableComponent, isStandalone: true, selector: "s4y-table", inputs: { headers: { classPropertyName: "headers", publicName: "headers", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, stickyHeader: { classPropertyName: "stickyHeader", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, customSort: { classPropertyName: "customSort", publicName: "customSort", isSignal: true, isRequired: false, transformFunction: null }, multipleSort: { classPropertyName: "multipleSort", publicName: "multipleSort", isSignal: true, isRequired: false, transformFunction: null }, initialSorts: { classPropertyName: "initialSorts", publicName: "initialSorts", isSignal: true, isRequired: false, transformFunction: null }, sortField: { classPropertyName: "sortField", publicName: "sortField", isSignal: true, isRequired: false, transformFunction: null }, sortOrder: { classPropertyName: "sortOrder", publicName: "sortOrder", isSignal: true, isRequired: false, transformFunction: null }, tableHeight: { classPropertyName: "tableHeight", publicName: "tableHeight", isSignal: true, isRequired: false, transformFunction: null }, tableMaxHeight: { classPropertyName: "tableMaxHeight", publicName: "tableMaxHeight", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null }, isFetchMoreError: { classPropertyName: "isFetchMoreError", publicName: "isFetchMoreError", isSignal: true, isRequired: false, transformFunction: null }, isEndReached: { classPropertyName: "isEndReached", publicName: "isEndReached", isSignal: true, isRequired: false, transformFunction: null }, fetchMoreErrorMessageDefault: { classPropertyName: "fetchMoreErrorMessageDefault", publicName: "fetchMoreErrorMessageDefault", isSignal: true, isRequired: false, transformFunction: null }, endReachedMessageDefault: { classPropertyName: "endReachedMessageDefault", publicName: "endReachedMessageDefault", isSignal: true, isRequired: false, transformFunction: null }, tableStyle: { classPropertyName: "tableStyle", publicName: "tableStyle", isSignal: true, isRequired: false, transformFunction: null }, errorMessageDefault: { classPropertyName: "errorMessageDefault", publicName: "errorMessageDefault", isSignal: true, isRequired: false, transformFunction: null }, emptyMessageDefault: { classPropertyName: "emptyMessageDefault", publicName: "emptyMessageDefault", isSignal: true, isRequired: false, transformFunction: null }, tableGrow: { classPropertyName: "tableGrow", publicName: "tableGrow", isSignal: true, isRequired: false, transformFunction: null }, infiniteScroll: { classPropertyName: "infiniteScroll", publicName: "infiniteScroll", isSignal: true, isRequired: false, transformFunction: null }, infiniteScrollThreshold: { classPropertyName: "infiniteScrollThreshold", publicName: "infiniteScrollThreshold", isSignal: true, isRequired: false, transformFunction: null }, isFetchingMore: { classPropertyName: "isFetchingMore", publicName: "isFetchingMore", isSignal: true, isRequired: false, transformFunction: null }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: true, isRequired: false, transformFunction: null }, rowHeight: { classPropertyName: "rowHeight", publicName: "rowHeight", isSignal: true, isRequired: false, transformFunction: null }, virtualBuffer: { classPropertyName: "virtualBuffer", publicName: "virtualBuffer", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortFunction: "sortFunction", multiSortFunction: "multiSortFunction", scrollEndReached: "scrollEndReached" }, host: { properties: { "class.s4y-table-grow": "this.isTableGrow" } }, queries: [{ propertyName: "rowTemplate", first: true, predicate: ["rowTemplate"], descendants: true }, { propertyName: "headTemplate", first: true, predicate: ["headTemplate"], descendants: true }, { propertyName: "emptyTemplate", first: true, predicate: ["emptyTemplate"], descendants: true }, { propertyName: "errorTemplate", first: true, predicate: ["errorTemplate"], descendants: true }, { propertyName: "customEmptyTemplate", first: true, predicate: ["customEmptyTemplate"], descendants: true }, { propertyName: "customErrorTemplate", first: true, predicate: ["customErrorTemplate"], descendants: true }, { propertyName: "fetchMoreLoadingTemplate", first: true, predicate: ["fetchMoreLoadingTemplate"], descendants: true }, { propertyName: "fetchMoreErrorTemplate", first: true, predicate: ["fetchMoreErrorTemplate"], descendants: true }, { propertyName: "endReachedTemplate", first: true, predicate: ["endReachedTemplate"], descendants: true }], viewQueries: [{ propertyName: "tableScrollContainer", first: true, predicate: ["tableScrollContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\r\n class=\"s4y-table-container\"\r\n [class.s4y-table-container--sticky-header]=\"stickyHeader()\"\r\n #tableScrollContainer\r\n [ngStyle]=\"containerStyle()\"\r\n cdkScrollable\r\n (scroll)=\"onTableScroll($event)\"\r\n>\r\n <table class=\"s4y-table\">\r\n <thead>\r\n <ng-container [ngTemplateOutlet]=\"headTemplate\"></ng-container>\r\n </thead>\r\n <tbody>\r\n @if (isLoading()) {\r\n <tr class=\"loading\">\r\n <td [colSpan]=\"headers().length\">\r\n <s4y-spinner></s4y-spinner>\r\n </td>\r\n </tr>\r\n } @else if (hasError()) {\r\n @if (errorTemplate) {\r\n <tr class=\"error\">\r\n <td [colSpan]=\"headers().length\">\r\n <ng-container [ngTemplateOutlet]=\"errorTemplate\"></ng-container>\r\n </td>\r\n </tr>\r\n } @else if (customErrorTemplate) {\r\n <ng-container [ngTemplateOutlet]=\"customErrorTemplate\"></ng-container>\r\n } @else {\r\n <tr class=\"error\">\r\n <td [colSpan]=\"headers().length\">\r\n {{ errorMessageDefault() }}\r\n </td>\r\n </tr>\r\n }\r\n } @else {\r\n <ng-container [ngTemplateOutlet]=\"tableContent\"></ng-container>\r\n }\r\n </tbody>\r\n </table>\r\n</div>\r\n\r\n<ng-template #SortIcon>\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M4.86885 11H2.6665L6 3H8L11.3334 11H9.13113L8.7213 10H5.27869L4.86885 11ZM6.09836 8H7.90163L7 5.8L6.09836 8ZM18.9999 16V3H16.9999V16H13.9999L17.9999 21L21.9999 16H18.9999ZM10.9999 13H2.99992V15H7.85414L2.99992 19V21H10.9999V19H6.14605L10.9999 15V13Z\"\r\n ></path>\r\n </svg>\r\n</ng-template>\r\n\r\n<ng-template #tableContent>\r\n @if (virtualScroll() && topSpacerHeight() > 0) {\r\n <tr class=\"virtual-spacer-row\">\r\n <td\r\n [colSpan]=\"headers().length\"\r\n [style.height.px]=\"topSpacerHeight()\"\r\n ></td>\r\n </tr>\r\n }\r\n\r\n @for (row of virtualRows(); track row.index) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"rowTemplate\"\r\n [ngTemplateOutletContext]=\"{\r\n $implicit: row.item,\r\n idx: row.index,\r\n }\"\r\n >\r\n </ng-container>\r\n } @empty {\r\n @if (emptyTemplate) {\r\n <tr class=\"empty-content\">\r\n <td [colSpan]=\"headers().length\">\r\n <ng-container [ngTemplateOutlet]=\"emptyTemplate\"></ng-container>\r\n </td>\r\n </tr>\r\n } @else if (customEmptyTemplate) {\r\n <ng-container [ngTemplateOutlet]=\"customEmptyTemplate\"></ng-container>\r\n } @else {\r\n <tr class=\"empty-content\">\r\n <td [colSpan]=\"headers().length\">\r\n {{ emptyMessageDefault() }}\r\n </td>\r\n </tr>\r\n }\r\n }\r\n\r\n @if (virtualScroll() && bottomSpacerHeight() > 0) {\r\n <tr class=\"virtual-spacer-row\">\r\n <td\r\n [colSpan]=\"headers().length\"\r\n [style.height.px]=\"bottomSpacerHeight()\"\r\n ></td>\r\n </tr>\r\n }\r\n\r\n <ng-container [ngTemplateOutlet]=\"fetchMoreTemplate\"></ng-container>\r\n</ng-template>\r\n\r\n<ng-template #fetchMoreTemplate>\r\n @if (isFetchingMore()) {\r\n <tr class=\"fetch-more-loading\">\r\n <td [colSpan]=\"headers().length\">\r\n @if (fetchMoreLoadingTemplate) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"fetchMoreLoadingTemplate\"\r\n ></ng-container>\r\n } @else {\r\n <div class=\"s4y-fetch-more-state\">\r\n <s4y-spinner size=\"mini\"></s4y-spinner>\r\n </div>\r\n }\r\n </td>\r\n </tr>\r\n } @else if (isFetchMoreError()) {\r\n <tr class=\"fetch-more-error\">\r\n <td [colSpan]=\"headers().length\">\r\n @if (fetchMoreErrorTemplate) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"fetchMoreErrorTemplate\"\r\n ></ng-container>\r\n } @else {\r\n <div class=\"s4y-fetch-more-state\">\r\n {{ fetchMoreErrorMessageDefault() }}\r\n </div>\r\n }\r\n </td>\r\n </tr>\r\n } @else if (isEndReached()) {\r\n <tr class=\"fetch-more-end\">\r\n <td [colSpan]=\"headers().length\">\r\n @if (endReachedTemplate) {\r\n <ng-container [ngTemplateOutlet]=\"endReachedTemplate\"></ng-container>\r\n } @else {\r\n <div class=\"s4y-fetch-more-state\">\r\n {{ endReachedMessageDefault() }}\r\n </div>\r\n }\r\n </td>\r\n </tr>\r\n }\r\n</ng-template>\r\n", styles: ["s4y-table.s4y-table-grow{flex:1;min-height:0;display:flex;flex-direction:column}::host .table-grow{display:block;flex:1;min-height:0;display:flex;flex-direction:column}.s4y-table-container{overflow:auto;min-height:30rem;width:100%;container-type:inline-size}@media screen and (min-width:320px)and (max-width:480px){.s4y-table-container{padding-bottom:1.4rem;margin:0 auto}}@media screen and (min-width:481px)and (max-width:767px){.s4y-table-container{padding-bottom:1.4rem;margin:0 auto}}@media screen and (min-width:768px)and (max-width:1024px){.s4y-table-container{padding-bottom:1.4rem;margin:0 auto}}.s4y-table{border:1px solid var(--gray-300);border-collapse:collapse;width:100%}@media screen and (min-width:320px)and (max-width:480px){.s4y-table tr{white-space:nowrap}}@media screen and (min-width:481px)and (max-width:767px){.s4y-table tr{white-space:nowrap}}@media screen and (min-width:768px)and (max-width:1024px){.s4y-table tr{white-space:nowrap}}.s4y-table .s4y-table-head-th__content{display:flex;justify-content:space-between}.s4y-table thead{background-color:#eaeaea}.s4y-table thead tr{font-size:1.3rem;height:5rem;font-weight:700}.s4y-table thead th{transition:.2s ease}.s4y-table tbody tr{background-color:#fff;font-size:1.3rem;font-weight:400;height:5rem;border-bottom:1px solid var(--gray-300)}.s4y-table tfoot{background-color:#eaeaea}.s4y-table th,.s4y-table td{text-align:start;padding:0 .4rem}.s4y-table td:first-child,.s4y-table td:last-child,.s4y-table th:first-child,.s4y-table th:last-child{padding:0 1.4rem}.s4y-table td,.s4y-table th{padding:0 1.4rem}.s4y-table th.s4y-active-sort,.s4y-table th.s4y-active-sort.s4y-hover{background-color:var(--primary-color);color:#fff}.s4y-table tr.empty-content,.s4y-table tr.loading,.s4y-table tr.error{border:none}.s4y-table tr.empty-content td,.s4y-table tr.loading td,.s4y-table tr.error td{text-align:center;height:28rem;background-color:transparent;color:var(--gray-900);font-weight:700;border:none}.s4y-table .s4y-table-sticky{position:sticky;z-index:5;background-color:#fff}.s4y-table thead .s4y-table-sticky{z-index:15;background-color:#eaeaea}.s4y-table .s4y-table-sticky--left{left:0}.s4y-table .s4y-table-sticky--right{right:0}.s4y-table thead .s4y-table-sticky.s4y-active-sort{background-color:var(--primary-color);color:#fff}.s4y-table-container--sticky-header{position:relative;overflow:auto}.s4y-table-container--sticky-header .s4y-table{border-collapse:separate;border-spacing:0}.s4y-table-container--sticky-header .s4y-table thead th{position:sticky;top:0;z-index:10;background-color:#eaeaea;box-shadow:0 .1rem 0 var(--border-color)}.s4y-table-container--sticky-header .s4y-table thead th.s4y-table-sticky{z-index:20}.s4y-table-container--sticky-header .s4y-table tbody tr td{border-bottom:1px solid var(--gray-300)}.s4y-fetch-more-state{width:100%;min-height:44px;display:flex;align-items:center;justify-content:center;font-size:13px;color:#667085}.fetch-more-loading td,.fetch-more-error td,.fetch-more-end td{padding:8px 16px!important;text-align:center}.fetch-more-error .s4y-fetch-more-state{color:#b42318}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: SpinnerComponent, selector: "s4y-spinner", inputs: ["size", "color"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i1$3.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }], encapsulation: i0.ViewEncapsulation.None });
|
|
1232
1288
|
}
|
|
1233
1289
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: TableComponent, decorators: [{
|
|
1234
1290
|
type: Component,
|
|
1235
|
-
args: [{ selector: 's4y-table', imports: [CommonModule, SpinnerComponent, ScrollingModule], encapsulation: ViewEncapsulation.None, template: "<div\r\n class=\"s4y-table-container\"\r\n [class.s4y-table-container--sticky-header]=\"stickyHeader()\"\r\n #tableScrollContainer\r\n [ngStyle]=\"containerStyle()\"\r\n cdkScrollable\r\n (scroll)=\"onTableScroll($event)\"\r\n>\r\n <table class=\"s4y-table\">\r\n <thead>\r\n <ng-container [ngTemplateOutlet]=\"headTemplate\"></ng-container>\r\n </thead>\r\n <tbody>\r\n @if (isLoading()) {\r\n <tr class=\"loading\">\r\n <td [colSpan]=\"headers().length\">\r\n <s4y-spinner></s4y-spinner>\r\n </td>\r\n </tr>\r\n } @else if (hasError()) {\r\n @if (errorTemplate) {\r\n <tr class=\"error\">\r\n <td [colSpan]=\"headers().length\">\r\n <ng-container [ngTemplateOutlet]=\"errorTemplate\"></ng-container>\r\n </td>\r\n </tr>\r\n } @else if (customErrorTemplate) {\r\n <ng-container [ngTemplateOutlet]=\"customErrorTemplate\"></ng-container>\r\n } @else {\r\n <tr class=\"error\">\r\n <td [colSpan]=\"headers().length\">\r\n {{ errorMessageDefault() }}\r\n </td>\r\n </tr>\r\n }\r\n } @else {\r\n <ng-container [ngTemplateOutlet]=\"tableContent\"></ng-container>\r\n }\r\n </tbody>\r\n </table>\r\n</div>\r\n\r\n<ng-template #SortIcon>\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M4.86885 11H2.6665L6 3H8L11.3334 11H9.13113L8.7213 10H5.27869L4.86885 11ZM6.09836 8H7.90163L7 5.8L6.09836 8ZM18.9999 16V3H16.9999V16H13.9999L17.9999 21L21.9999 16H18.9999ZM10.9999 13H2.99992V15H7.85414L2.99992 19V21H10.9999V19H6.14605L10.9999 15V13Z\"\r\n ></path>\r\n </svg>\r\n</ng-template>\r\n\r\n<ng-template #tableContent>\r\n @for (
|
|
1291
|
+
args: [{ selector: 's4y-table', imports: [CommonModule, SpinnerComponent, ScrollingModule], encapsulation: ViewEncapsulation.None, template: "<div\r\n class=\"s4y-table-container\"\r\n [class.s4y-table-container--sticky-header]=\"stickyHeader()\"\r\n #tableScrollContainer\r\n [ngStyle]=\"containerStyle()\"\r\n cdkScrollable\r\n (scroll)=\"onTableScroll($event)\"\r\n>\r\n <table class=\"s4y-table\">\r\n <thead>\r\n <ng-container [ngTemplateOutlet]=\"headTemplate\"></ng-container>\r\n </thead>\r\n <tbody>\r\n @if (isLoading()) {\r\n <tr class=\"loading\">\r\n <td [colSpan]=\"headers().length\">\r\n <s4y-spinner></s4y-spinner>\r\n </td>\r\n </tr>\r\n } @else if (hasError()) {\r\n @if (errorTemplate) {\r\n <tr class=\"error\">\r\n <td [colSpan]=\"headers().length\">\r\n <ng-container [ngTemplateOutlet]=\"errorTemplate\"></ng-container>\r\n </td>\r\n </tr>\r\n } @else if (customErrorTemplate) {\r\n <ng-container [ngTemplateOutlet]=\"customErrorTemplate\"></ng-container>\r\n } @else {\r\n <tr class=\"error\">\r\n <td [colSpan]=\"headers().length\">\r\n {{ errorMessageDefault() }}\r\n </td>\r\n </tr>\r\n }\r\n } @else {\r\n <ng-container [ngTemplateOutlet]=\"tableContent\"></ng-container>\r\n }\r\n </tbody>\r\n </table>\r\n</div>\r\n\r\n<ng-template #SortIcon>\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M4.86885 11H2.6665L6 3H8L11.3334 11H9.13113L8.7213 10H5.27869L4.86885 11ZM6.09836 8H7.90163L7 5.8L6.09836 8ZM18.9999 16V3H16.9999V16H13.9999L17.9999 21L21.9999 16H18.9999ZM10.9999 13H2.99992V15H7.85414L2.99992 19V21H10.9999V19H6.14605L10.9999 15V13Z\"\r\n ></path>\r\n </svg>\r\n</ng-template>\r\n\r\n<ng-template #tableContent>\r\n @if (virtualScroll() && topSpacerHeight() > 0) {\r\n <tr class=\"virtual-spacer-row\">\r\n <td\r\n [colSpan]=\"headers().length\"\r\n [style.height.px]=\"topSpacerHeight()\"\r\n ></td>\r\n </tr>\r\n }\r\n\r\n @for (row of virtualRows(); track row.index) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"rowTemplate\"\r\n [ngTemplateOutletContext]=\"{\r\n $implicit: row.item,\r\n idx: row.index,\r\n }\"\r\n >\r\n </ng-container>\r\n } @empty {\r\n @if (emptyTemplate) {\r\n <tr class=\"empty-content\">\r\n <td [colSpan]=\"headers().length\">\r\n <ng-container [ngTemplateOutlet]=\"emptyTemplate\"></ng-container>\r\n </td>\r\n </tr>\r\n } @else if (customEmptyTemplate) {\r\n <ng-container [ngTemplateOutlet]=\"customEmptyTemplate\"></ng-container>\r\n } @else {\r\n <tr class=\"empty-content\">\r\n <td [colSpan]=\"headers().length\">\r\n {{ emptyMessageDefault() }}\r\n </td>\r\n </tr>\r\n }\r\n }\r\n\r\n @if (virtualScroll() && bottomSpacerHeight() > 0) {\r\n <tr class=\"virtual-spacer-row\">\r\n <td\r\n [colSpan]=\"headers().length\"\r\n [style.height.px]=\"bottomSpacerHeight()\"\r\n ></td>\r\n </tr>\r\n }\r\n\r\n <ng-container [ngTemplateOutlet]=\"fetchMoreTemplate\"></ng-container>\r\n</ng-template>\r\n\r\n<ng-template #fetchMoreTemplate>\r\n @if (isFetchingMore()) {\r\n <tr class=\"fetch-more-loading\">\r\n <td [colSpan]=\"headers().length\">\r\n @if (fetchMoreLoadingTemplate) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"fetchMoreLoadingTemplate\"\r\n ></ng-container>\r\n } @else {\r\n <div class=\"s4y-fetch-more-state\">\r\n <s4y-spinner size=\"mini\"></s4y-spinner>\r\n </div>\r\n }\r\n </td>\r\n </tr>\r\n } @else if (isFetchMoreError()) {\r\n <tr class=\"fetch-more-error\">\r\n <td [colSpan]=\"headers().length\">\r\n @if (fetchMoreErrorTemplate) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"fetchMoreErrorTemplate\"\r\n ></ng-container>\r\n } @else {\r\n <div class=\"s4y-fetch-more-state\">\r\n {{ fetchMoreErrorMessageDefault() }}\r\n </div>\r\n }\r\n </td>\r\n </tr>\r\n } @else if (isEndReached()) {\r\n <tr class=\"fetch-more-end\">\r\n <td [colSpan]=\"headers().length\">\r\n @if (endReachedTemplate) {\r\n <ng-container [ngTemplateOutlet]=\"endReachedTemplate\"></ng-container>\r\n } @else {\r\n <div class=\"s4y-fetch-more-state\">\r\n {{ endReachedMessageDefault() }}\r\n </div>\r\n }\r\n </td>\r\n </tr>\r\n }\r\n</ng-template>\r\n", styles: ["s4y-table.s4y-table-grow{flex:1;min-height:0;display:flex;flex-direction:column}::host .table-grow{display:block;flex:1;min-height:0;display:flex;flex-direction:column}.s4y-table-container{overflow:auto;min-height:30rem;width:100%;container-type:inline-size}@media screen and (min-width:320px)and (max-width:480px){.s4y-table-container{padding-bottom:1.4rem;margin:0 auto}}@media screen and (min-width:481px)and (max-width:767px){.s4y-table-container{padding-bottom:1.4rem;margin:0 auto}}@media screen and (min-width:768px)and (max-width:1024px){.s4y-table-container{padding-bottom:1.4rem;margin:0 auto}}.s4y-table{border:1px solid var(--gray-300);border-collapse:collapse;width:100%}@media screen and (min-width:320px)and (max-width:480px){.s4y-table tr{white-space:nowrap}}@media screen and (min-width:481px)and (max-width:767px){.s4y-table tr{white-space:nowrap}}@media screen and (min-width:768px)and (max-width:1024px){.s4y-table tr{white-space:nowrap}}.s4y-table .s4y-table-head-th__content{display:flex;justify-content:space-between}.s4y-table thead{background-color:#eaeaea}.s4y-table thead tr{font-size:1.3rem;height:5rem;font-weight:700}.s4y-table thead th{transition:.2s ease}.s4y-table tbody tr{background-color:#fff;font-size:1.3rem;font-weight:400;height:5rem;border-bottom:1px solid var(--gray-300)}.s4y-table tfoot{background-color:#eaeaea}.s4y-table th,.s4y-table td{text-align:start;padding:0 .4rem}.s4y-table td:first-child,.s4y-table td:last-child,.s4y-table th:first-child,.s4y-table th:last-child{padding:0 1.4rem}.s4y-table td,.s4y-table th{padding:0 1.4rem}.s4y-table th.s4y-active-sort,.s4y-table th.s4y-active-sort.s4y-hover{background-color:var(--primary-color);color:#fff}.s4y-table tr.empty-content,.s4y-table tr.loading,.s4y-table tr.error{border:none}.s4y-table tr.empty-content td,.s4y-table tr.loading td,.s4y-table tr.error td{text-align:center;height:28rem;background-color:transparent;color:var(--gray-900);font-weight:700;border:none}.s4y-table .s4y-table-sticky{position:sticky;z-index:5;background-color:#fff}.s4y-table thead .s4y-table-sticky{z-index:15;background-color:#eaeaea}.s4y-table .s4y-table-sticky--left{left:0}.s4y-table .s4y-table-sticky--right{right:0}.s4y-table thead .s4y-table-sticky.s4y-active-sort{background-color:var(--primary-color);color:#fff}.s4y-table-container--sticky-header{position:relative;overflow:auto}.s4y-table-container--sticky-header .s4y-table{border-collapse:separate;border-spacing:0}.s4y-table-container--sticky-header .s4y-table thead th{position:sticky;top:0;z-index:10;background-color:#eaeaea;box-shadow:0 .1rem 0 var(--border-color)}.s4y-table-container--sticky-header .s4y-table thead th.s4y-table-sticky{z-index:20}.s4y-table-container--sticky-header .s4y-table tbody tr td{border-bottom:1px solid var(--gray-300)}.s4y-fetch-more-state{width:100%;min-height:44px;display:flex;align-items:center;justify-content:center;font-size:13px;color:#667085}.fetch-more-loading td,.fetch-more-error td,.fetch-more-end td{padding:8px 16px!important;text-align:center}.fetch-more-error .s4y-fetch-more-state{color:#b42318}\n"] }]
|
|
1236
1292
|
}], ctorParameters: () => [], propDecorators: { tableScrollContainer: [{
|
|
1237
1293
|
type: ViewChild,
|
|
1238
1294
|
args: ['tableScrollContainer']
|