s4y-ui 7.3.0 → 7.5.0

package/fesm2022/s4y-ui.mjs

@@ -1122,16 +1122,16 @@ class TableComponent {
     errorMessageDefault = input('Não foi possível carregar os dados.');
     emptyMessageDefault = input(' Não encontramos dados para exibir.');
     sortBy = signal(undefined);
+    tableGrow = input(false);
     lastPresetSignature = '';
-    containerStyle = computed(() => {
-        return {
-            ...this.tableStyle(),
-            ...(this.tableHeight() ? { height: this.tableHeight() } : {}),
-            ...(this.tableMaxHeight()
-                ? { 'max-height': this.tableMaxHeight() }
-                : {}),
-        };
-    });
+    get isTableGrow() {
+        return this.tableGrow();
+    }
+    containerStyle = computed(() => ({
+        ...this.tableStyle(),
+        ...(this.tableHeight() ? { height: this.tableHeight() } : {}),
+        ...(this.tableMaxHeight() ? { 'max-height': this.tableMaxHeight() } : {}),
+    }));
     scrollToTop() {
         if (this.tableScrollContainer.nativeElement) {
             this.tableScrollContainer.nativeElement.scrollTop = 0;
@@ -1202,11 +1202,11 @@ class TableComponent {
     }
     trackByIndex = (index) => index;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    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{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 });
+    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" }, 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 }], 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.s4y-table-grow{flex:1;min-height:0;display:flex;flex-direction:column}.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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
-            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"] }]
+            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-container.s4y-table-grow{flex:1;min-height:0;display:flex;flex-direction:column}.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"] }]
         }], ctorParameters: () => [], propDecorators: { tableScrollContainer: [{
                 type: ViewChild,
                 args: ['tableScrollContainer']
@@ -1228,6 +1228,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImpo
             }], customErrorTemplate: [{
                 type: ContentChild,
                 args: ['customErrorTemplate']
+            }], isTableGrow: [{
+                type: HostBinding,
+                args: ['class.s4y-table-grow']
             }] } });
 
 class TableSortDirective {