s4y-ui 7.2.0 → 7.4.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
|
@@ -1122,16 +1122,20 @@ class TableComponent {
|
|
|
1122
1122
|
errorMessageDefault = input('Não foi possível carregar os dados.');
|
|
1123
1123
|
emptyMessageDefault = input(' Não encontramos dados para exibir.');
|
|
1124
1124
|
sortBy = signal(undefined);
|
|
1125
|
+
tableGrow = input(false);
|
|
1125
1126
|
lastPresetSignature = '';
|
|
1126
|
-
containerStyle = computed(() => {
|
|
1127
|
-
|
|
1128
|
-
|
|
1129
|
-
|
|
1130
|
-
|
|
1131
|
-
|
|
1132
|
-
:
|
|
1133
|
-
|
|
1134
|
-
|
|
1127
|
+
containerStyle = computed(() => ({
|
|
1128
|
+
...this.tableStyle(),
|
|
1129
|
+
...(this.tableHeight() ? { height: this.tableHeight() } : {}),
|
|
1130
|
+
...(this.tableMaxHeight() ? { 'max-height': this.tableMaxHeight() } : {}),
|
|
1131
|
+
...(this.tableGrow()
|
|
1132
|
+
? {
|
|
1133
|
+
height: '100%',
|
|
1134
|
+
flex: '1',
|
|
1135
|
+
'min-height': '0',
|
|
1136
|
+
}
|
|
1137
|
+
: {}),
|
|
1138
|
+
}));
|
|
1135
1139
|
scrollToTop() {
|
|
1136
1140
|
if (this.tableScrollContainer.nativeElement) {
|
|
1137
1141
|
this.tableScrollContainer.nativeElement.scrollTop = 0;
|
|
@@ -1202,11 +1206,11 @@ class TableComponent {
|
|
|
1202
1206
|
}
|
|
1203
1207
|
trackByIndex = (index) => index;
|
|
1204
1208
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1205
|
-
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 }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: true, isRequired: false, transformFunction: null }, virtualItemSize: { classPropertyName: "virtualItemSize", publicName: "virtualItemSize", isSignal: true, isRequired: false, transformFunction: null }, virtualMinBufferPx: { classPropertyName: "virtualMinBufferPx", publicName: "virtualMinBufferPx", isSignal: true, isRequired: false, transformFunction: null }, virtualMaxBufferPx: { classPropertyName: "virtualMaxBufferPx", publicName: "virtualMaxBufferPx", 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 }, 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 } }, outputs: { sortFunction: "sortFunction", multiSortFunction: "multiSortFunction" }, 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 }], viewQueries: [{ propertyName: "tableScrollContainer", first: true, predicate: ["tableScrollContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (virtualScroll()) {\r\n <div class=\"s4y-table-virtual-container\" [ngStyle]=\"containerStyle()\">\r\n <table class=\"s4y-table s4y-table-virtual-header\">\r\n <thead>\r\n <ng-container [ngTemplateOutlet]=\"headTemplate\"></ng-container>\r\n </thead>\r\n </table>\r\n\r\n <cdk-virtual-scroll-viewport\r\n class=\"s4y-table-virtual-viewport\"\r\n [itemSize]=\"virtualItemSize()\"\r\n [minBufferPx]=\"virtualMinBufferPx()\"\r\n [maxBufferPx]=\"virtualMaxBufferPx()\"\r\n >\r\n <table class=\"s4y-table s4y-table-virtual-body\">\r\n <tbody>\r\n <ng-container\r\n *cdkVirtualFor=\"\r\n let item of sortedData();\r\n let idx = index;\r\n trackBy: trackByIndex\r\n \"\r\n [ngTemplateOutlet]=\"rowTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item, idx: idx }\"\r\n />\r\n </tbody>\r\n </table>\r\n </cdk-virtual-scroll-viewport>\r\n </div>\r\n} @else {\r\n <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 >\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\r\n [ngTemplateOutlet]=\"customErrorTemplate\"\r\n ></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\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</ng-template>\r\n", styles: [".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-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{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-virtual-container{width:100%;height:36rem;overflow:hidden}.s4y-table-virtual-header,.s4y-table-virtual-body{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0}.s4y-table-virtual-header{height:5rem;flex-shrink:0}.s4y-table-virtual-viewport{width:100%;height:calc(100% - 5rem);overflow-y:auto;overflow-x:hidden}\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: i2.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "directive", type: i2.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i2.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i2.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
1209
|
+
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 }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: true, isRequired: false, transformFunction: null }, virtualItemSize: { classPropertyName: "virtualItemSize", publicName: "virtualItemSize", isSignal: true, isRequired: false, transformFunction: null }, virtualMinBufferPx: { classPropertyName: "virtualMinBufferPx", publicName: "virtualMinBufferPx", isSignal: true, isRequired: false, transformFunction: null }, virtualMaxBufferPx: { classPropertyName: "virtualMaxBufferPx", publicName: "virtualMaxBufferPx", 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 }, 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 } }, outputs: { sortFunction: "sortFunction", multiSortFunction: "multiSortFunction" }, 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 }], viewQueries: [{ propertyName: "tableScrollContainer", first: true, predicate: ["tableScrollContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (virtualScroll()) {\r\n <div class=\"s4y-table-virtual-container\" [ngStyle]=\"containerStyle()\">\r\n <table class=\"s4y-table s4y-table-virtual-header\">\r\n <thead>\r\n <ng-container [ngTemplateOutlet]=\"headTemplate\"></ng-container>\r\n </thead>\r\n </table>\r\n\r\n <cdk-virtual-scroll-viewport\r\n class=\"s4y-table-virtual-viewport\"\r\n [itemSize]=\"virtualItemSize()\"\r\n [minBufferPx]=\"virtualMinBufferPx()\"\r\n [maxBufferPx]=\"virtualMaxBufferPx()\"\r\n >\r\n <table class=\"s4y-table s4y-table-virtual-body\">\r\n <tbody>\r\n <ng-container\r\n *cdkVirtualFor=\"\r\n let item of sortedData();\r\n let idx = index;\r\n trackBy: trackByIndex\r\n \"\r\n [ngTemplateOutlet]=\"rowTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item, idx: idx }\"\r\n />\r\n </tbody>\r\n </table>\r\n </cdk-virtual-scroll-viewport>\r\n </div>\r\n} @else {\r\n <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 >\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\r\n [ngTemplateOutlet]=\"customErrorTemplate\"\r\n ></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\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</ng-template>\r\n", styles: [".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-table-virtual-container{width:100%;height:36rem;overflow:hidden}.s4y-table-virtual-container tbody tr td{border-bottom:1px solid var(--gray-300)}.s4y-table-virtual-header,.s4y-table-virtual-body{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0}.s4y-table-virtual-header{height:5rem;flex-shrink:0}.s4y-table-virtual-viewport{width:100%;height:calc(100% - 5rem);overflow-y:auto;overflow-x:hidden}\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: i2.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "directive", type: i2.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i2.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i2.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
1206
1210
|
}
|
|
1207
1211
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: TableComponent, decorators: [{
|
|
1208
1212
|
type: Component,
|
|
1209
|
-
args: [{ selector: 's4y-table', imports: [CommonModule, SpinnerComponent, ScrollingModule], encapsulation: ViewEncapsulation.None, template: "@if (virtualScroll()) {\r\n <div class=\"s4y-table-virtual-container\" [ngStyle]=\"containerStyle()\">\r\n <table class=\"s4y-table s4y-table-virtual-header\">\r\n <thead>\r\n <ng-container [ngTemplateOutlet]=\"headTemplate\"></ng-container>\r\n </thead>\r\n </table>\r\n\r\n <cdk-virtual-scroll-viewport\r\n class=\"s4y-table-virtual-viewport\"\r\n [itemSize]=\"virtualItemSize()\"\r\n [minBufferPx]=\"virtualMinBufferPx()\"\r\n [maxBufferPx]=\"virtualMaxBufferPx()\"\r\n >\r\n <table class=\"s4y-table s4y-table-virtual-body\">\r\n <tbody>\r\n <ng-container\r\n *cdkVirtualFor=\"\r\n let item of sortedData();\r\n let idx = index;\r\n trackBy: trackByIndex\r\n \"\r\n [ngTemplateOutlet]=\"rowTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item, idx: idx }\"\r\n />\r\n </tbody>\r\n </table>\r\n </cdk-virtual-scroll-viewport>\r\n </div>\r\n} @else {\r\n <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 >\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\r\n [ngTemplateOutlet]=\"customErrorTemplate\"\r\n ></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\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</ng-template>\r\n", styles: [".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
|
|
1213
|
+
args: [{ selector: 's4y-table', imports: [CommonModule, SpinnerComponent, ScrollingModule], encapsulation: ViewEncapsulation.None, template: "@if (virtualScroll()) {\r\n <div class=\"s4y-table-virtual-container\" [ngStyle]=\"containerStyle()\">\r\n <table class=\"s4y-table s4y-table-virtual-header\">\r\n <thead>\r\n <ng-container [ngTemplateOutlet]=\"headTemplate\"></ng-container>\r\n </thead>\r\n </table>\r\n\r\n <cdk-virtual-scroll-viewport\r\n class=\"s4y-table-virtual-viewport\"\r\n [itemSize]=\"virtualItemSize()\"\r\n [minBufferPx]=\"virtualMinBufferPx()\"\r\n [maxBufferPx]=\"virtualMaxBufferPx()\"\r\n >\r\n <table class=\"s4y-table s4y-table-virtual-body\">\r\n <tbody>\r\n <ng-container\r\n *cdkVirtualFor=\"\r\n let item of sortedData();\r\n let idx = index;\r\n trackBy: trackByIndex\r\n \"\r\n [ngTemplateOutlet]=\"rowTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item, idx: idx }\"\r\n />\r\n </tbody>\r\n </table>\r\n </cdk-virtual-scroll-viewport>\r\n </div>\r\n} @else {\r\n <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 >\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\r\n [ngTemplateOutlet]=\"customErrorTemplate\"\r\n ></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\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</ng-template>\r\n", styles: [".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-table-virtual-container{width:100%;height:36rem;overflow:hidden}.s4y-table-virtual-container tbody tr td{border-bottom:1px solid var(--gray-300)}.s4y-table-virtual-header,.s4y-table-virtual-body{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0}.s4y-table-virtual-header{height:5rem;flex-shrink:0}.s4y-table-virtual-viewport{width:100%;height:calc(100% - 5rem);overflow-y:auto;overflow-x:hidden}\n"] }]
|
|
1210
1214
|
}], ctorParameters: () => [], propDecorators: { tableScrollContainer: [{
|
|
1211
1215
|
type: ViewChild,
|
|
1212
1216
|
args: ['tableScrollContainer']
|