@lesterarte/sefin-ui 0.0.20-dev.11 → 0.0.20-dev.12
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.
|
@@ -5734,11 +5734,11 @@ class TableComponent {
|
|
|
5734
5734
|
// Expose Math to template
|
|
5735
5735
|
Math = Math;
|
|
5736
5736
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TableComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
5737
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: TableComponent, isStandalone: true, selector: "sefin-table", inputs: { columns: "columns", data: "data", trackByKey: "trackByKey", loading: "loading", emptyText: "emptyText", density: "density", striped: "striped", hover: "hover", selectable: "selectable", selectionMode: "selectionMode", pagination: "pagination", pageSizeOptions: "pageSizeOptions", pageSize: "pageSize", total: "total", sort: "sort", serverSide: "serverSide", stickyHeader: "stickyHeader", headerActionsTemplate: "headerActionsTemplate", emptyIconTemplate: "emptyIconTemplate" }, outputs: { rowClicked: "rowClicked", selectionChanged: "selectionChanged", pageChanged: "pageChanged", sortChanged: "sortChanged" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"sefin-table__container\">\n <!-- Header Actions Slot -->\n <div *ngIf=\"headerActionsTemplate\" class=\"sefin-table__header-actions\">\n <ng-container *ngTemplateOutlet=\"headerActionsTemplate\"></ng-container>\n </div>\n\n <!-- Loading Overlay -->\n <div *ngIf=\"loading\" class=\"sefin-table__loading\">\n <div class=\"sefin-table__loading-bar\"></div>\n <div class=\"sefin-table__loading-rows\">\n <div *ngFor=\"let i of [1, 2, 3, 4, 5]\" class=\"sefin-table__skeleton-row\">\n <div\n class=\"sefin-table__skeleton-cell\"\n *ngFor=\"let col of columns\"\n ></div>\n </div>\n </div>\n </div>\n\n <!-- Table -->\n <div\n class=\"sefin-table__wrapper\"\n [class.sefin-table__wrapper--loading]=\"loading\"\n >\n <table [class]=\"getTableClasses()\" class=\"sefin-table__native-table\">\n <!-- Table Header -->\n <thead\n class=\"sefin-table__header\"\n [class.sefin-table__header--sticky]=\"stickyHeader\"\n >\n <tr class=\"sefin-table__header-row\">\n <!-- Selection Column Header -->\n <th\n *ngIf=\"selectable\"\n class=\"sefin-table__header-cell sefin-table__header-cell--select\"\n >\n <sefin-checkbox\n *ngIf=\"selectionMode === 'multiple'\"\n [value]=\"isAllSelected()\"\n [indeterminate]=\"isIndeterminate()\"\n (checkedChange)=\"toggleSelectAll($event)\"\n [attr.aria-label]=\"'Select all rows'\"\n size=\"sm\"\n ></sefin-checkbox>\n </th>\n\n <!-- Data Column Headers -->\n <th\n *ngFor=\"let column of columns\"\n [class]=\"getColumnClass(column)\"\n [class.sefin-table__header-cell--sortable]=\"column.sortable && sort\"\n [class.sefin-table__header-cell--sorted]=\"\n currentSortColumn() === column.key\n \"\n [class.sefin-table__header-cell--sort-asc]=\"\n currentSortColumn() === column.key &&\n currentSortDirection() === 'asc'\n \"\n [class.sefin-table__header-cell--sort-desc]=\"\n currentSortColumn() === column.key &&\n currentSortDirection() === 'desc'\n \"\n [class.sefin-table__header-cell--sticky]=\"column.sticky\"\n [class.sefin-table__header-cell--sticky-end]=\"\n column.sticky && column.stickyEnd\n \"\n [style.width]=\"getColumnWidth(column)\"\n class=\"sefin-table__header-cell\"\n (click)=\"column.sortable && sort ? onSort(column) : null\"\n [attr.aria-sort]=\"\n currentSortColumn() === column.key\n ? currentSortDirection() === 'asc'\n ? 'ascending'\n : currentSortDirection() === 'desc'\n ? 'descending'\n : 'none'\n : null\n \"\n role=\"columnheader\"\n [attr.tabindex]=\"column.sortable && sort ? 0 : null\"\n >\n <span class=\"sefin-table__header-content\">\n {{ column.header }}\n <span\n *ngIf=\"column.sortable && sort\"\n class=\"sefin-table__sort-icon\"\n >\n <svg\n *ngIf=\"\n currentSortColumn() !== column.key ||\n currentSortDirection() === ''\n \"\n width=\"12\"\n height=\"12\"\n viewBox=\"0 0 12 12\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M3 4.5L6 1.5L9 4.5M3 7.5L6 10.5L9 7.5\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n <svg\n *ngIf=\"\n currentSortColumn() === column.key &&\n currentSortDirection() === 'asc'\n \"\n width=\"12\"\n height=\"12\"\n viewBox=\"0 0 12 12\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M3 7.5L6 4.5L9 7.5\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n <svg\n *ngIf=\"\n currentSortColumn() === column.key &&\n currentSortDirection() === 'desc'\n \"\n width=\"12\"\n height=\"12\"\n viewBox=\"0 0 12 12\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M3 4.5L6 7.5L9 4.5\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </span>\n </span>\n </th>\n\n <th\n *ngIf=\"hasActionsColumn()\"\n class=\"sefin-table__header-cell sefin-table__header-cell--actions\"\n ></th>\n </tr>\n </thead>\n\n <!-- Table Body -->\n <tbody class=\"sefin-table__body\">\n <!-- Data Rows -->\n <tr\n *ngFor=\"let row of displayedData(); trackBy: trackByFn\"\n class=\"sefin-table__row sefin-table__row--clickable\"\n (click)=\"onRowClick(row)\"\n >\n <!-- Selection Column Cell -->\n <td\n *ngIf=\"selectable\"\n class=\"sefin-table__cell sefin-table__cell--select\"\n >\n <sefin-checkbox\n [value]=\"isSelected(row)\"\n (checkedChange)=\"toggleRowSelection($event, row)\"\n [attr.aria-label]=\"'Select row'\"\n size=\"sm\"\n ></sefin-checkbox>\n </td>\n\n <!-- Data Column Cells -->\n <td\n *ngFor=\"let column of columns\"\n [class]=\"getColumnClass(column)\"\n [class.sefin-table__cell--sticky]=\"column.sticky\"\n [class.sefin-table__cell--sticky-end]=\"\n column.sticky && column.stickyEnd\n \"\n class=\"sefin-table__cell\"\n >\n <!-- Custom Template -->\n <ng-container *ngIf=\"column.cellTemplate\">\n <ng-container\n *ngTemplateOutlet=\"\n column.cellTemplate;\n context: {\n $implicit: row,\n column: column,\n value: getCellValue(row, column)\n }\n \"\n ></ng-container>\n </ng-container>\n\n <!-- Badge Type -->\n <ng-container\n *ngIf=\"!column.cellTemplate && column.type === 'badge'\"\n >\n <sefin-badge\n [value]=\"getCellValue(row, column)\"\n variant=\"primary\"\n size=\"sm\"\n ></sefin-badge>\n </ng-container>\n\n <!-- Actions Type -->\n <ng-container\n *ngIf=\"!column.cellTemplate && column.type === 'actions'\"\n >\n <div class=\"sefin-table__actions\">\n <ng-content select=\"[actions]\"></ng-content>\n </div>\n </ng-container>\n\n <!-- Default/Text/Number/Date Type -->\n <ng-container\n *ngIf=\"\n !column.cellTemplate &&\n column.type !== 'badge' &&\n column.type !== 'actions'\n \"\n >\n <span class=\"sefin-table__cell-content\">\n {{ formatCellValue(getCellValue(row, column), column.type) }}\n </span>\n </ng-container>\n </td>\n\n <!-- Actions Column Cell -->\n <td\n *ngIf=\"hasActionsColumn()\"\n class=\"sefin-table__cell sefin-table__cell--actions\"\n >\n <div class=\"sefin-table__actions\">\n <ng-content select=\"[actions]\"></ng-content>\n </div>\n </td>\n </tr>\n\n <!-- Empty Row -->\n <tr *ngIf=\"isEmpty()\" class=\"sefin-table__row sefin-table__row--empty\">\n <td [attr.colspan]=\"totalColspan()\" class=\"sefin-table__empty-cell\">\n <div class=\"sefin-table__empty-state\">\n <ng-container *ngIf=\"emptyIconTemplate\">\n <ng-container\n *ngTemplateOutlet=\"emptyIconTemplate\"\n ></ng-container>\n </ng-container>\n <p class=\"sefin-table__empty-text\">{{ emptyText }}</p>\n </div>\n </td>\n </tr>\n </tbody>\n </table>\n </div>\n\n <!-- Pagination -->\n <sefin-pagination\n *ngIf=\"pagination && !isEmpty()\"\n [currentPage]=\"currentPage()\"\n [totalPages]=\"totalPages()\"\n [totalItems]=\"serverSide && total !== undefined ? total : undefined\"\n [itemsPerPage]=\"currentPageSize()\"\n (pageChange)=\"onPageChange($event)\"\n class=\"sefin-table__paginator\"\n size=\"md\"\n ></sefin-pagination>\n</div>\n", styles: [".sefin-table{display:block;width:100%;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif);background-color:var(--sefin-color-surface, #ffffff);border-radius:var(--sefin-radius-md, 8px);overflow:hidden}.sefin-table__container{display:flex;flex-direction:column;width:100%;background-color:var(--sefin-color-surface, #ffffff);border:1px solid var(--sefin-color-border, #cecece);border-radius:var(--sefin-radius-md, 8px);overflow:hidden;box-shadow:var(--sefin-shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, .05));transition:box-shadow .2s ease-in-out}.sefin-table__header-actions{display:flex;justify-content:flex-end;align-items:center;padding:var(--sefin-spacing-md, 16px);border-bottom:1px solid var(--sefin-color-border, #e5e5e5);background-color:var(--sefin-color-background, #ffffff);border-radius:var(--sefin-radius-md, 8px) var(--sefin-radius-md, 8px) 0 0}.sefin-table__wrapper{position:relative;overflow-x:auto;overflow-y:visible;background-color:var(--sefin-color-surface, #ffffff)}.sefin-table__wrapper--loading{opacity:.6;pointer-events:none}.sefin-table__loading{position:absolute;inset:0;z-index:10;background-color:#fffffffa;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;flex-direction:column;border-radius:var(--sefin-radius-md, 8px)}.sefin-table__loading-bar{height:3px;background:linear-gradient(90deg,transparent,var(--sefin-color-primary, #55C3D8),transparent);animation:loading-bar 1.5s ease-in-out infinite;width:100%;border-radius:0 var(--sefin-radius-lg, 12px) 0 0}@keyframes loading-bar{0%{transform:translate(-100%)}to{transform:translate(200%)}}.sefin-table__loading-rows{flex:1;display:flex;flex-direction:column;padding:var(--sefin-spacing-lg, 24px);gap:var(--sefin-spacing-md, 16px)}.sefin-table__skeleton-row{display:flex;gap:var(--sefin-spacing-md, 16px);padding:var(--sefin-spacing-sm, 8px) 0}.sefin-table__skeleton-cell{flex:1;height:20px;background:linear-gradient(90deg,var(--sefin-color-surface-hover, #f5f5f5) 0%,rgba(85,195,216,.15) 50%,var(--sefin-color-surface-hover, #f5f5f5) 100%);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:var(--sefin-radius-sm, 4px)}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}.sefin-table__native-table{width:100%;border-collapse:separate;border-spacing:0;background-color:var(--sefin-color-surface, #ffffff)}.sefin-table--density-compact .sefin-table__header-cell,.sefin-table--density-compact .sefin-table__cell{padding:var(--sefin-spacing-xs, 4px) var(--sefin-spacing-sm, 8px);font-size:var(--sefin-font-size-sm, .875rem);line-height:var(--sefin-line-height-normal, 1.5)}.sefin-table--density-compact .sefin-table__header-cell{padding-top:var(--sefin-spacing-sm, 8px);padding-bottom:var(--sefin-spacing-sm, 8px)}.sefin-table--density-compact .sefin-table__cell{padding-top:var(--sefin-spacing-xs, 4px);padding-bottom:var(--sefin-spacing-xs, 4px)}.sefin-table:not(.sefin-table--density-compact) .sefin-table__header-cell,.sefin-table:not(.sefin-table--density-compact) .sefin-table__cell{padding:var(--sefin-spacing-md, 16px);font-size:var(--sefin-font-size-base, 1rem);line-height:var(--sefin-line-height-normal, 1.5)}.sefin-table:not(.sefin-table--density-compact) .sefin-table__header-cell{padding-top:var(--sefin-spacing-md, 16px);padding-bottom:var(--sefin-spacing-md, 16px)}.sefin-table:not(.sefin-table--density-compact) .sefin-table__cell{padding-top:var(--sefin-spacing-sm, 8px);padding-bottom:var(--sefin-spacing-sm, 8px)}.sefin-table__header{background-color:var(--sefin-color-background-elevated, #fafafa);border-bottom:2px solid var(--sefin-color-border, #e5e5e5)}.sefin-table__header--sticky{position:sticky;top:0;z-index:3;box-shadow:0 2px 8px #0000000f}.sefin-table__header-row{background-color:var(--sefin-color-background-elevated, #fafafa)}.sefin-table__header-cell{font-weight:var(--sefin-font-weight-semibold, 600);font-size:var(--sefin-font-size-sm, .875rem);color:var(--sefin-color-text, #383838);text-transform:uppercase;letter-spacing:.5px;text-align:left;white-space:nowrap;border-bottom:none;position:relative;background-color:var(--sefin-color-background-elevated, #fafafa);-webkit-user-select:none;user-select:none;transition:all .2s ease-in-out;z-index:1}.sefin-table__header-cell--align-left{text-align:left}.sefin-table__header-cell--align-center{text-align:center}.sefin-table__header-cell--align-right{text-align:right}.sefin-table__header-cell--select{width:56px;padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-sm, 8px);text-align:center}.sefin-table__header-cell--actions{width:120px;text-align:right}.sefin-table__header-cell--sortable{cursor:pointer}.sefin-table__header-cell--sortable:hover{background-color:#55c3d814;color:var(--sefin-color-primary, #55C3D8)}.sefin-table__header-cell--sortable:hover .sefin-table__sort-icon{opacity:1;color:var(--sefin-color-primary, #55C3D8)}.sefin-table__header-cell--sortable:active{background-color:#55c3d81f}.sefin-table__header-cell--sortable:focus-visible{outline:2px solid var(--sefin-color-border-focus, #55C3D8);outline-offset:-2px;border-radius:var(--sefin-radius-sm, 4px)}.sefin-table__header-cell--sorted{color:var(--sefin-color-primary, #55C3D8);background-color:#55c3d80f}.sefin-table__header-cell--sorted .sefin-table__sort-icon{opacity:1;color:var(--sefin-color-primary, #55C3D8)}.sefin-table__header-cell--sticky{position:sticky;background-color:var(--sefin-color-background-elevated, #fafafa);z-index:2;box-shadow:2px 0 4px #0000000a}.sefin-table__header-cell--sticky:after{content:\"\";position:absolute;top:0;right:0;bottom:0;width:1px;background-color:var(--sefin-color-border, #e5e5e5);opacity:.6}.sefin-table__header-cell--sticky.sefin-table__header-cell--sticky-end{right:0;box-shadow:-2px 0 4px #0000000a}.sefin-table__header-cell--sticky.sefin-table__header-cell--sticky-end:after{left:0;right:auto}.sefin-table__header-content{display:flex;align-items:center;justify-content:flex-start;gap:var(--sefin-spacing-xs, 4px);width:100%}.sefin-table__sort-icon{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;color:var(--sefin-color-text-secondary, #9b9b9b);opacity:.4;transition:all .2s ease-in-out;flex-shrink:0;margin-left:var(--sefin-spacing-xs, 4px)}.sefin-table__sort-icon svg{display:block;width:100%;height:100%}.sefin-table__body{background-color:var(--sefin-color-surface, #ffffff)}.sefin-table__row{border-bottom:1px solid var(--sefin-color-border, #e5e5e5);transition:all .2s ease-in-out;background-color:var(--sefin-color-surface, #ffffff)}.sefin-table__row--clickable{cursor:pointer}.sefin-table__row--clickable:hover:not(.sefin-table__row--empty){background-color:#55c3d80d;box-shadow:inset 3px 0 0 var(--sefin-color-primary, #55C3D8)}.sefin-table__row--clickable:hover:not(.sefin-table__row--empty) .sefin-table__cell--sticky{background-color:#55c3d80d}.sefin-table__row--clickable:active:not(.sefin-table__row--empty){background-color:#55c3d814;box-shadow:inset 3px 0 0 var(--sefin-color-primary-dark, #3f9bb0)}.sefin-table__row--clickable:active:not(.sefin-table__row--empty) .sefin-table__cell--sticky{background-color:#55c3d814}.sefin-table__row--empty{border-bottom:none}.sefin-table__row:focus-visible{outline:2px solid var(--sefin-color-border-focus, #55C3D8);outline-offset:-2px;border-radius:var(--sefin-radius-sm, 4px)}.sefin-table__row:last-child{border-bottom:none}.sefin-table__cell{font-family:var(--sefin-font-family-base, \"Pluto\", sans-serif);font-size:var(--sefin-font-size-base, 1rem);font-weight:var(--sefin-font-weight-normal, 400);color:var(--sefin-color-text, #383838);border-bottom:none;vertical-align:middle;background-color:inherit;transition:background-color .2s ease-in-out,color .2s ease-in-out}.sefin-table__cell--align-left{text-align:left}.sefin-table__cell--align-center{text-align:center}.sefin-table__cell--align-right{text-align:right}.sefin-table__cell--select{width:56px;padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-sm, 8px);text-align:center}.sefin-table__cell--actions{text-align:right;width:120px}.sefin-table__cell--sticky{position:sticky;background-color:inherit;z-index:1;box-shadow:2px 0 4px #0000000a}.sefin-table__cell--sticky:after{content:\"\";position:absolute;top:0;right:0;bottom:0;width:1px;background-color:var(--sefin-color-border, #e5e5e5);opacity:.6}.sefin-table__cell--sticky.sefin-table__cell--sticky-end{right:0;box-shadow:-2px 0 4px #0000000a}.sefin-table__cell--sticky.sefin-table__cell--sticky-end:after{left:0;right:auto}.sefin-table__cell-content{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:var(--sefin-line-height-normal, 1.5);color:var(--sefin-color-text, #383838)}.sefin-table__actions{display:flex;align-items:center;justify-content:flex-end;gap:var(--sefin-spacing-xs, 4px);flex-wrap:wrap}.sefin-table--striped .sefin-table__row:nth-child(2n){background-color:var(--sefin-color-surface, #ffffff)}.sefin-table--striped .sefin-table__row:nth-child(odd){background-color:#f8f9facc}.sefin-table--striped .sefin-table__cell--sticky:nth-child(2n){background-color:var(--sefin-color-surface, #ffffff)}.sefin-table--striped .sefin-table__cell--sticky:nth-child(odd){background-color:#f8f9facc}.sefin-table--striped .sefin-table__row--clickable:hover,.sefin-table--striped .sefin-table__row--clickable:hover .sefin-table__cell--sticky{background-color:#55c3d814!important}.sefin-table--hover .sefin-table__row:not(.sefin-table__row--empty):hover{background-color:#55c3d80d}.sefin-table--hover .sefin-table__row:not(.sefin-table__row--empty):hover .sefin-table__cell--sticky{background-color:#55c3d80d}.sefin-table--hover .sefin-table__row--clickable:not(.sefin-table__row--empty):hover{background-color:#55c3d80d}.sefin-table--hover .sefin-table__row--clickable:not(.sefin-table__row--empty):hover .sefin-table__cell--sticky{background-color:#55c3d80d}.sefin-table--sticky-header .sefin-table__header{position:sticky;top:0;z-index:3;box-shadow:0 4px 12px #00000014}.sefin-table__empty-cell{padding:var(--sefin-spacing-4xl, 96px) var(--sefin-spacing-xl, 32px);text-align:center;border-bottom:none;background-color:var(--sefin-color-surface, #ffffff)}.sefin-table__empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sefin-spacing-lg, 24px);padding:var(--sefin-spacing-2xl, 48px);background:linear-gradient(to bottom,rgba(248,249,250,.5),transparent);border-radius:var(--sefin-radius-md, 8px);margin:var(--sefin-spacing-lg, 24px)}.sefin-table__empty-text{font-size:var(--sefin-font-size-lg, 1.125rem);font-weight:var(--sefin-font-weight-medium, 500);line-height:var(--sefin-line-height-relaxed, 1.75);color:var(--sefin-color-text-secondary, #686868);margin:0;font-family:var(--sefin-font-family-base, \"Pluto\", sans-serif);max-width:480px;letter-spacing:.2px}.sefin-table__paginator{border-top:1px solid var(--sefin-color-border, #e5e5e5);background-color:var(--sefin-color-background, #ffffff);padding:var(--sefin-spacing-md, 16px);border-radius:0 0 var(--sefin-radius-md, 8px) var(--sefin-radius-md, 8px)}.sefin-table ::ng-deep .sefin-checkbox{margin:0;transition:transform .2s ease-in-out}.sefin-table ::ng-deep .sefin-checkbox:hover{transform:scale(1.05)}.sefin-table ::ng-deep .sefin-badge{margin:0;box-shadow:0 1px 3px #0000001a;transition:transform .2s ease-in-out,box-shadow .2s ease-in-out}.sefin-table ::ng-deep .sefin-badge:hover{transform:translateY(-1px);box-shadow:0 2px 6px #00000026}.sefin-table ::ng-deep .sefin-button,.sefin-table ::ng-deep .sefin-icon-button{transition:transform .2s ease-in-out,box-shadow .2s ease-in-out}.sefin-table ::ng-deep .sefin-button:hover,.sefin-table ::ng-deep .sefin-icon-button:hover{transform:translateY(-1px)}.sefin-table ::ng-deep .sefin-button:active,.sefin-table ::ng-deep .sefin-icon-button:active{transform:translateY(0)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PaginationComponent, selector: "sefin-pagination", inputs: ["currentPage", "totalPages", "totalItems", "itemsPerPage", "siblingCount", "showFirstLast", "showPrevNext", "size", "variant", "class"], outputs: ["pageChange"] }, { kind: "component", type: CheckboxComponent, selector: "sefin-checkbox", inputs: ["size", "disabled", "indeterminate", "class", "label", "name", "value"], outputs: ["valueChange", "checkedChange"] }, { kind: "component", type: BadgeComponent, selector: "sefin-badge", inputs: ["variant", "size", "dot", "max", "value", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
5737
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: TableComponent, isStandalone: true, selector: "sefin-table", inputs: { columns: "columns", data: "data", trackByKey: "trackByKey", loading: "loading", emptyText: "emptyText", density: "density", striped: "striped", hover: "hover", selectable: "selectable", selectionMode: "selectionMode", pagination: "pagination", pageSizeOptions: "pageSizeOptions", pageSize: "pageSize", total: "total", sort: "sort", serverSide: "serverSide", stickyHeader: "stickyHeader", headerActionsTemplate: "headerActionsTemplate", emptyIconTemplate: "emptyIconTemplate" }, outputs: { rowClicked: "rowClicked", selectionChanged: "selectionChanged", pageChanged: "pageChanged", sortChanged: "sortChanged" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"sefin-table__container\">\n <!-- Header Actions Slot -->\n <div *ngIf=\"headerActionsTemplate\" class=\"sefin-table__header-actions\">\n <ng-container *ngTemplateOutlet=\"headerActionsTemplate\"></ng-container>\n </div>\n\n <!-- Loading Overlay -->\n <div *ngIf=\"loading\" class=\"sefin-table__loading\">\n <div class=\"sefin-table__loading-bar\"></div>\n <div class=\"sefin-table__loading-rows\">\n <div *ngFor=\"let i of [1, 2, 3, 4, 5]\" class=\"sefin-table__skeleton-row\">\n <div\n class=\"sefin-table__skeleton-cell\"\n *ngFor=\"let col of columns\"\n ></div>\n </div>\n </div>\n </div>\n\n <!-- Table -->\n <div\n class=\"sefin-table__wrapper\"\n [class.sefin-table__wrapper--loading]=\"loading\"\n >\n <table [class]=\"getTableClasses()\" class=\"sefin-table__native-table\">\n <!-- Table Header -->\n <thead\n class=\"sefin-table__header\"\n [class.sefin-table__header--sticky]=\"stickyHeader\"\n >\n <tr class=\"sefin-table__header-row\">\n <!-- Selection Column Header -->\n <th\n *ngIf=\"selectable\"\n class=\"sefin-table__header-cell sefin-table__header-cell--select\"\n >\n <sefin-checkbox\n *ngIf=\"selectionMode === 'multiple'\"\n [value]=\"isAllSelected()\"\n [indeterminate]=\"isIndeterminate()\"\n (checkedChange)=\"toggleSelectAll($event)\"\n [attr.aria-label]=\"'Select all rows'\"\n size=\"sm\"\n ></sefin-checkbox>\n </th>\n\n <!-- Data Column Headers -->\n <th\n *ngFor=\"let column of columns\"\n [class]=\"getColumnClass(column)\"\n [class.sefin-table__header-cell--sortable]=\"column.sortable && sort\"\n [class.sefin-table__header-cell--sorted]=\"\n currentSortColumn() === column.key\n \"\n [class.sefin-table__header-cell--sort-asc]=\"\n currentSortColumn() === column.key &&\n currentSortDirection() === 'asc'\n \"\n [class.sefin-table__header-cell--sort-desc]=\"\n currentSortColumn() === column.key &&\n currentSortDirection() === 'desc'\n \"\n [class.sefin-table__header-cell--sticky]=\"column.sticky\"\n [class.sefin-table__header-cell--sticky-end]=\"\n column.sticky && column.stickyEnd\n \"\n [style.width]=\"getColumnWidth(column)\"\n class=\"sefin-table__header-cell\"\n (click)=\"column.sortable && sort ? onSort(column) : null\"\n [attr.aria-sort]=\"\n currentSortColumn() === column.key\n ? currentSortDirection() === 'asc'\n ? 'ascending'\n : currentSortDirection() === 'desc'\n ? 'descending'\n : 'none'\n : null\n \"\n role=\"columnheader\"\n [attr.tabindex]=\"column.sortable && sort ? 0 : null\"\n >\n <span class=\"sefin-table__header-content\">\n {{ column.header }}\n <span\n *ngIf=\"column.sortable && sort\"\n class=\"sefin-table__sort-icon\"\n >\n <svg\n *ngIf=\"\n currentSortColumn() !== column.key ||\n currentSortDirection() === ''\n \"\n width=\"12\"\n height=\"12\"\n viewBox=\"0 0 12 12\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M3 4.5L6 1.5L9 4.5M3 7.5L6 10.5L9 7.5\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n <svg\n *ngIf=\"\n currentSortColumn() === column.key &&\n currentSortDirection() === 'asc'\n \"\n width=\"12\"\n height=\"12\"\n viewBox=\"0 0 12 12\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M3 7.5L6 4.5L9 7.5\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n <svg\n *ngIf=\"\n currentSortColumn() === column.key &&\n currentSortDirection() === 'desc'\n \"\n width=\"12\"\n height=\"12\"\n viewBox=\"0 0 12 12\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M3 4.5L6 7.5L9 4.5\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </span>\n </span>\n </th>\n\n <th\n *ngIf=\"hasActionsColumn()\"\n class=\"sefin-table__header-cell sefin-table__header-cell--actions\"\n ></th>\n </tr>\n </thead>\n\n <!-- Table Body -->\n <tbody class=\"sefin-table__body\">\n <!-- Data Rows -->\n <tr\n *ngFor=\"let row of displayedData(); trackBy: trackByFn\"\n class=\"sefin-table__row sefin-table__row--clickable\"\n (click)=\"onRowClick(row)\"\n >\n <!-- Selection Column Cell -->\n <td\n *ngIf=\"selectable\"\n class=\"sefin-table__cell sefin-table__cell--select\"\n >\n <sefin-checkbox\n [value]=\"isSelected(row)\"\n (checkedChange)=\"toggleRowSelection($event, row)\"\n [attr.aria-label]=\"'Select row'\"\n size=\"sm\"\n ></sefin-checkbox>\n </td>\n\n <!-- Data Column Cells -->\n <td\n *ngFor=\"let column of columns\"\n [class]=\"getColumnClass(column)\"\n [class.sefin-table__cell--sticky]=\"column.sticky\"\n [class.sefin-table__cell--sticky-end]=\"\n column.sticky && column.stickyEnd\n \"\n class=\"sefin-table__cell\"\n >\n <!-- Custom Template -->\n <ng-container *ngIf=\"column.cellTemplate\">\n <ng-container\n *ngTemplateOutlet=\"\n column.cellTemplate;\n context: {\n $implicit: row,\n column: column,\n value: getCellValue(row, column)\n }\n \"\n ></ng-container>\n </ng-container>\n\n <!-- Badge Type -->\n <ng-container\n *ngIf=\"!column.cellTemplate && column.type === 'badge'\"\n >\n <sefin-badge\n [value]=\"getCellValue(row, column)\"\n variant=\"primary\"\n size=\"sm\"\n ></sefin-badge>\n </ng-container>\n\n <!-- Actions Type -->\n <ng-container\n *ngIf=\"!column.cellTemplate && column.type === 'actions'\"\n >\n <div class=\"sefin-table__actions\">\n <ng-content select=\"[actions]\"></ng-content>\n </div>\n </ng-container>\n\n <!-- Default/Text/Number/Date Type -->\n <ng-container\n *ngIf=\"\n !column.cellTemplate &&\n column.type !== 'badge' &&\n column.type !== 'actions'\n \"\n >\n <span class=\"sefin-table__cell-content\">\n {{ formatCellValue(getCellValue(row, column), column.type) }}\n </span>\n </ng-container>\n </td>\n\n <!-- Actions Column Cell -->\n <td\n *ngIf=\"hasActionsColumn()\"\n class=\"sefin-table__cell sefin-table__cell--actions\"\n >\n <div class=\"sefin-table__actions\">\n <ng-content select=\"[actions]\"></ng-content>\n </div>\n </td>\n </tr>\n\n <!-- Empty Row -->\n <tr *ngIf=\"isEmpty()\" class=\"sefin-table__row sefin-table__row--empty\">\n <td [attr.colspan]=\"totalColspan()\" class=\"sefin-table__empty-cell\">\n <div class=\"sefin-table__empty-state\">\n <ng-container *ngIf=\"emptyIconTemplate\">\n <ng-container\n *ngTemplateOutlet=\"emptyIconTemplate\"\n ></ng-container>\n </ng-container>\n <p class=\"sefin-table__empty-text\">{{ emptyText }}</p>\n </div>\n </td>\n </tr>\n </tbody>\n </table>\n </div>\n\n <!-- Pagination -->\n <sefin-pagination\n *ngIf=\"pagination && !isEmpty()\"\n [currentPage]=\"currentPage()\"\n [totalPages]=\"totalPages()\"\n [totalItems]=\"serverSide && total !== undefined ? total : undefined\"\n [itemsPerPage]=\"currentPageSize()\"\n (pageChange)=\"onPageChange($event)\"\n class=\"sefin-table__paginator\"\n size=\"sm\"\n ></sefin-pagination>\n</div>\n", styles: [".sefin-table{display:block;width:100%;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif);background-color:var(--sefin-color-surface, #ffffff);border-radius:var(--sefin-radius-md, 8px);overflow:hidden}.sefin-table__container{display:flex;flex-direction:column;width:100%;background-color:var(--sefin-color-surface, #ffffff);border:1px solid var(--sefin-color-border, #cecece);border-radius:var(--sefin-radius-md, 8px);overflow:hidden;box-shadow:var(--sefin-shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, .05));transition:box-shadow .2s ease-in-out}.sefin-table__header-actions{display:flex;justify-content:flex-end;align-items:center;padding:var(--sefin-spacing-md, 16px);border-bottom:1px solid var(--sefin-color-border, #e5e5e5);background-color:var(--sefin-color-background, #ffffff);border-radius:var(--sefin-radius-md, 8px) var(--sefin-radius-md, 8px) 0 0}.sefin-table__wrapper{position:relative;overflow-x:auto;overflow-y:visible;background-color:var(--sefin-color-surface, #ffffff)}.sefin-table__wrapper--loading{opacity:.6;pointer-events:none}.sefin-table__loading{position:absolute;inset:0;z-index:10;background-color:#fffffffa;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;flex-direction:column;border-radius:var(--sefin-radius-md, 8px)}.sefin-table__loading-bar{height:3px;background:linear-gradient(90deg,transparent,var(--sefin-color-primary, #55C3D8),transparent);animation:loading-bar 1.5s ease-in-out infinite;width:100%;border-radius:0 var(--sefin-radius-lg, 12px) 0 0}@keyframes loading-bar{0%{transform:translate(-100%)}to{transform:translate(200%)}}.sefin-table__loading-rows{flex:1;display:flex;flex-direction:column;padding:var(--sefin-spacing-lg, 24px);gap:var(--sefin-spacing-md, 16px)}.sefin-table__skeleton-row{display:flex;gap:var(--sefin-spacing-md, 16px);padding:var(--sefin-spacing-sm, 8px) 0}.sefin-table__skeleton-cell{flex:1;height:20px;background:linear-gradient(90deg,var(--sefin-color-surface-hover, #f5f5f5) 0%,rgba(85,195,216,.15) 50%,var(--sefin-color-surface-hover, #f5f5f5) 100%);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:var(--sefin-radius-sm, 4px)}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}.sefin-table__native-table{width:100%;border-collapse:separate;border-spacing:0;background-color:var(--sefin-color-surface, #ffffff)}.sefin-table--density-compact .sefin-table__header-cell,.sefin-table--density-compact .sefin-table__cell{padding:var(--sefin-spacing-xs, 4px) var(--sefin-spacing-sm, 8px);font-size:var(--sefin-font-size-sm, .875rem);line-height:var(--sefin-line-height-normal, 1.5)}.sefin-table--density-compact .sefin-table__header-cell{padding-top:var(--sefin-spacing-sm, 8px);padding-bottom:var(--sefin-spacing-sm, 8px)}.sefin-table--density-compact .sefin-table__cell{padding-top:var(--sefin-spacing-xs, 4px);padding-bottom:var(--sefin-spacing-xs, 4px)}.sefin-table:not(.sefin-table--density-compact) .sefin-table__header-cell,.sefin-table:not(.sefin-table--density-compact) .sefin-table__cell{padding:var(--sefin-spacing-md, 16px);font-size:var(--sefin-font-size-base, 1rem);line-height:var(--sefin-line-height-normal, 1.5)}.sefin-table:not(.sefin-table--density-compact) .sefin-table__header-cell{padding-top:var(--sefin-spacing-md, 16px);padding-bottom:var(--sefin-spacing-md, 16px)}.sefin-table:not(.sefin-table--density-compact) .sefin-table__cell{padding-top:var(--sefin-spacing-sm, 8px);padding-bottom:var(--sefin-spacing-sm, 8px)}.sefin-table__header{background-color:var(--sefin-color-background-elevated, #fafafa);border-bottom:2px solid var(--sefin-color-border, #e5e5e5)}.sefin-table__header--sticky{position:sticky;top:0;z-index:3;box-shadow:0 2px 8px #0000000f}.sefin-table__header-row{background-color:var(--sefin-color-background-elevated, #fafafa)}.sefin-table__header-cell{font-weight:var(--sefin-font-weight-semibold, 600);font-size:var(--sefin-font-size-sm, .875rem);color:var(--sefin-color-text, #383838);text-transform:uppercase;letter-spacing:.5px;text-align:left;white-space:nowrap;border-bottom:none;position:relative;background-color:var(--sefin-color-background-elevated, #fafafa);-webkit-user-select:none;user-select:none;transition:all .2s ease-in-out;z-index:1}.sefin-table__header-cell--align-left{text-align:left}.sefin-table__header-cell--align-center{text-align:center}.sefin-table__header-cell--align-right{text-align:right}.sefin-table__header-cell--select{width:56px;padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-sm, 8px);text-align:center}.sefin-table__header-cell--actions{width:120px;text-align:right}.sefin-table__header-cell--sortable{cursor:pointer}.sefin-table__header-cell--sortable:hover{background-color:#55c3d814;color:var(--sefin-color-primary, #55C3D8)}.sefin-table__header-cell--sortable:hover .sefin-table__sort-icon{opacity:1;color:var(--sefin-color-primary, #55C3D8)}.sefin-table__header-cell--sortable:active{background-color:#55c3d81f}.sefin-table__header-cell--sortable:focus-visible{outline:2px solid var(--sefin-color-border-focus, #55C3D8);outline-offset:-2px;border-radius:var(--sefin-radius-sm, 4px)}.sefin-table__header-cell--sorted{color:var(--sefin-color-primary, #55C3D8);background-color:#55c3d80f}.sefin-table__header-cell--sorted .sefin-table__sort-icon{opacity:1;color:var(--sefin-color-primary, #55C3D8)}.sefin-table__header-cell--sticky{position:sticky;background-color:var(--sefin-color-background-elevated, #fafafa);z-index:2;box-shadow:2px 0 4px #0000000a}.sefin-table__header-cell--sticky:after{content:\"\";position:absolute;top:0;right:0;bottom:0;width:1px;background-color:var(--sefin-color-border, #e5e5e5);opacity:.6}.sefin-table__header-cell--sticky.sefin-table__header-cell--sticky-end{right:0;box-shadow:-2px 0 4px #0000000a}.sefin-table__header-cell--sticky.sefin-table__header-cell--sticky-end:after{left:0;right:auto}.sefin-table__header-content{display:flex;align-items:center;justify-content:flex-start;gap:var(--sefin-spacing-xs, 4px);width:100%}.sefin-table__sort-icon{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;color:var(--sefin-color-text-secondary, #9b9b9b);opacity:.4;transition:all .2s ease-in-out;flex-shrink:0;margin-left:var(--sefin-spacing-xs, 4px)}.sefin-table__sort-icon svg{display:block;width:100%;height:100%}.sefin-table__body{background-color:var(--sefin-color-surface, #ffffff)}.sefin-table__row{border-bottom:1px solid var(--sefin-color-border, #e5e5e5);transition:all .2s ease-in-out;background-color:var(--sefin-color-surface, #ffffff)}.sefin-table__row--clickable{cursor:pointer}.sefin-table__row--clickable:hover:not(.sefin-table__row--empty){background-color:#55c3d80d;box-shadow:inset 3px 0 0 var(--sefin-color-primary, #55C3D8)}.sefin-table__row--clickable:hover:not(.sefin-table__row--empty) .sefin-table__cell--sticky{background-color:#55c3d80d}.sefin-table__row--clickable:active:not(.sefin-table__row--empty){background-color:#55c3d814;box-shadow:inset 3px 0 0 var(--sefin-color-primary-dark, #3f9bb0)}.sefin-table__row--clickable:active:not(.sefin-table__row--empty) .sefin-table__cell--sticky{background-color:#55c3d814}.sefin-table__row--empty{border-bottom:none}.sefin-table__row:focus-visible{outline:2px solid var(--sefin-color-border-focus, #55C3D8);outline-offset:-2px;border-radius:var(--sefin-radius-sm, 4px)}.sefin-table__row:last-child{border-bottom:none}.sefin-table__cell{font-family:var(--sefin-font-family-base, \"Pluto\", sans-serif);font-size:var(--sefin-font-size-base, 1rem);font-weight:var(--sefin-font-weight-normal, 400);color:var(--sefin-color-text, #383838);border-bottom:none;vertical-align:middle;background-color:inherit;transition:background-color .2s ease-in-out,color .2s ease-in-out}.sefin-table__cell--align-left{text-align:left}.sefin-table__cell--align-center{text-align:center}.sefin-table__cell--align-right{text-align:right}.sefin-table__cell--select{width:56px;padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-sm, 8px);text-align:center}.sefin-table__cell--actions{text-align:right;width:120px}.sefin-table__cell--sticky{position:sticky;background-color:inherit;z-index:1;box-shadow:2px 0 4px #0000000a}.sefin-table__cell--sticky:after{content:\"\";position:absolute;top:0;right:0;bottom:0;width:1px;background-color:var(--sefin-color-border, #e5e5e5);opacity:.6}.sefin-table__cell--sticky.sefin-table__cell--sticky-end{right:0;box-shadow:-2px 0 4px #0000000a}.sefin-table__cell--sticky.sefin-table__cell--sticky-end:after{left:0;right:auto}.sefin-table__cell-content{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:var(--sefin-line-height-normal, 1.5);color:var(--sefin-color-text, #383838)}.sefin-table__actions{display:flex;align-items:center;justify-content:flex-end;gap:var(--sefin-spacing-xs, 4px);flex-wrap:wrap}.sefin-table--striped .sefin-table__row:nth-child(2n){background-color:var(--sefin-color-surface, #ffffff)}.sefin-table--striped .sefin-table__row:nth-child(odd){background-color:#f8f9facc}.sefin-table--striped .sefin-table__cell--sticky:nth-child(2n){background-color:var(--sefin-color-surface, #ffffff)}.sefin-table--striped .sefin-table__cell--sticky:nth-child(odd){background-color:#f8f9facc}.sefin-table--striped .sefin-table__row--clickable:hover,.sefin-table--striped .sefin-table__row--clickable:hover .sefin-table__cell--sticky{background-color:#55c3d814!important}.sefin-table--hover .sefin-table__row:not(.sefin-table__row--empty):hover{background-color:#55c3d80d}.sefin-table--hover .sefin-table__row:not(.sefin-table__row--empty):hover .sefin-table__cell--sticky{background-color:#55c3d80d}.sefin-table--hover .sefin-table__row--clickable:not(.sefin-table__row--empty):hover{background-color:#55c3d80d}.sefin-table--hover .sefin-table__row--clickable:not(.sefin-table__row--empty):hover .sefin-table__cell--sticky{background-color:#55c3d80d}.sefin-table--sticky-header .sefin-table__header{position:sticky;top:0;z-index:3;box-shadow:0 4px 12px #00000014}.sefin-table__empty-cell{padding:var(--sefin-spacing-4xl, 96px) var(--sefin-spacing-xl, 32px);text-align:center;border-bottom:none;background-color:var(--sefin-color-surface, #ffffff)}.sefin-table__empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sefin-spacing-lg, 24px);padding:var(--sefin-spacing-2xl, 48px);background:linear-gradient(to bottom,rgba(248,249,250,.5),transparent);border-radius:var(--sefin-radius-md, 8px);margin:var(--sefin-spacing-lg, 24px)}.sefin-table__empty-text{font-size:var(--sefin-font-size-lg, 1.125rem);font-weight:var(--sefin-font-weight-medium, 500);line-height:var(--sefin-line-height-relaxed, 1.75);color:var(--sefin-color-text-secondary, #686868);margin:0;font-family:var(--sefin-font-family-base, \"Pluto\", sans-serif);max-width:480px;letter-spacing:.2px}.sefin-table__paginator{border-top:1px solid var(--sefin-color-border, #e5e5e5);background-color:var(--sefin-color-background, #ffffff);padding:var(--sefin-spacing-md, 16px);border-radius:0 0 var(--sefin-radius-md, 8px) var(--sefin-radius-md, 8px)}.sefin-table ::ng-deep .sefin-checkbox{margin:0;transition:transform .2s ease-in-out}.sefin-table ::ng-deep .sefin-checkbox:hover{transform:scale(1.05)}.sefin-table ::ng-deep .sefin-badge{margin:0;box-shadow:0 1px 3px #0000001a;transition:transform .2s ease-in-out,box-shadow .2s ease-in-out}.sefin-table ::ng-deep .sefin-badge:hover{transform:translateY(-1px);box-shadow:0 2px 6px #00000026}.sefin-table ::ng-deep .sefin-button,.sefin-table ::ng-deep .sefin-icon-button{transition:transform .2s ease-in-out,box-shadow .2s ease-in-out}.sefin-table ::ng-deep .sefin-button:hover,.sefin-table ::ng-deep .sefin-icon-button:hover{transform:translateY(-1px)}.sefin-table ::ng-deep .sefin-button:active,.sefin-table ::ng-deep .sefin-icon-button:active{transform:translateY(0)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PaginationComponent, selector: "sefin-pagination", inputs: ["currentPage", "totalPages", "totalItems", "itemsPerPage", "siblingCount", "showFirstLast", "showPrevNext", "size", "variant", "class"], outputs: ["pageChange"] }, { kind: "component", type: CheckboxComponent, selector: "sefin-checkbox", inputs: ["size", "disabled", "indeterminate", "class", "label", "name", "value"], outputs: ["valueChange", "checkedChange"] }, { kind: "component", type: BadgeComponent, selector: "sefin-badge", inputs: ["variant", "size", "dot", "max", "value", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
5738
5738
|
}
|
|
5739
5739
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TableComponent, decorators: [{
|
|
5740
5740
|
type: Component,
|
|
5741
|
-
args: [{ selector: 'sefin-table', standalone: true, imports: [CommonModule, PaginationComponent, CheckboxComponent, BadgeComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"sefin-table__container\">\n <!-- Header Actions Slot -->\n <div *ngIf=\"headerActionsTemplate\" class=\"sefin-table__header-actions\">\n <ng-container *ngTemplateOutlet=\"headerActionsTemplate\"></ng-container>\n </div>\n\n <!-- Loading Overlay -->\n <div *ngIf=\"loading\" class=\"sefin-table__loading\">\n <div class=\"sefin-table__loading-bar\"></div>\n <div class=\"sefin-table__loading-rows\">\n <div *ngFor=\"let i of [1, 2, 3, 4, 5]\" class=\"sefin-table__skeleton-row\">\n <div\n class=\"sefin-table__skeleton-cell\"\n *ngFor=\"let col of columns\"\n ></div>\n </div>\n </div>\n </div>\n\n <!-- Table -->\n <div\n class=\"sefin-table__wrapper\"\n [class.sefin-table__wrapper--loading]=\"loading\"\n >\n <table [class]=\"getTableClasses()\" class=\"sefin-table__native-table\">\n <!-- Table Header -->\n <thead\n class=\"sefin-table__header\"\n [class.sefin-table__header--sticky]=\"stickyHeader\"\n >\n <tr class=\"sefin-table__header-row\">\n <!-- Selection Column Header -->\n <th\n *ngIf=\"selectable\"\n class=\"sefin-table__header-cell sefin-table__header-cell--select\"\n >\n <sefin-checkbox\n *ngIf=\"selectionMode === 'multiple'\"\n [value]=\"isAllSelected()\"\n [indeterminate]=\"isIndeterminate()\"\n (checkedChange)=\"toggleSelectAll($event)\"\n [attr.aria-label]=\"'Select all rows'\"\n size=\"sm\"\n ></sefin-checkbox>\n </th>\n\n <!-- Data Column Headers -->\n <th\n *ngFor=\"let column of columns\"\n [class]=\"getColumnClass(column)\"\n [class.sefin-table__header-cell--sortable]=\"column.sortable && sort\"\n [class.sefin-table__header-cell--sorted]=\"\n currentSortColumn() === column.key\n \"\n [class.sefin-table__header-cell--sort-asc]=\"\n currentSortColumn() === column.key &&\n currentSortDirection() === 'asc'\n \"\n [class.sefin-table__header-cell--sort-desc]=\"\n currentSortColumn() === column.key &&\n currentSortDirection() === 'desc'\n \"\n [class.sefin-table__header-cell--sticky]=\"column.sticky\"\n [class.sefin-table__header-cell--sticky-end]=\"\n column.sticky && column.stickyEnd\n \"\n [style.width]=\"getColumnWidth(column)\"\n class=\"sefin-table__header-cell\"\n (click)=\"column.sortable && sort ? onSort(column) : null\"\n [attr.aria-sort]=\"\n currentSortColumn() === column.key\n ? currentSortDirection() === 'asc'\n ? 'ascending'\n : currentSortDirection() === 'desc'\n ? 'descending'\n : 'none'\n : null\n \"\n role=\"columnheader\"\n [attr.tabindex]=\"column.sortable && sort ? 0 : null\"\n >\n <span class=\"sefin-table__header-content\">\n {{ column.header }}\n <span\n *ngIf=\"column.sortable && sort\"\n class=\"sefin-table__sort-icon\"\n >\n <svg\n *ngIf=\"\n currentSortColumn() !== column.key ||\n currentSortDirection() === ''\n \"\n width=\"12\"\n height=\"12\"\n viewBox=\"0 0 12 12\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M3 4.5L6 1.5L9 4.5M3 7.5L6 10.5L9 7.5\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n <svg\n *ngIf=\"\n currentSortColumn() === column.key &&\n currentSortDirection() === 'asc'\n \"\n width=\"12\"\n height=\"12\"\n viewBox=\"0 0 12 12\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M3 7.5L6 4.5L9 7.5\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n <svg\n *ngIf=\"\n currentSortColumn() === column.key &&\n currentSortDirection() === 'desc'\n \"\n width=\"12\"\n height=\"12\"\n viewBox=\"0 0 12 12\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M3 4.5L6 7.5L9 4.5\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </span>\n </span>\n </th>\n\n <th\n *ngIf=\"hasActionsColumn()\"\n class=\"sefin-table__header-cell sefin-table__header-cell--actions\"\n ></th>\n </tr>\n </thead>\n\n <!-- Table Body -->\n <tbody class=\"sefin-table__body\">\n <!-- Data Rows -->\n <tr\n *ngFor=\"let row of displayedData(); trackBy: trackByFn\"\n class=\"sefin-table__row sefin-table__row--clickable\"\n (click)=\"onRowClick(row)\"\n >\n <!-- Selection Column Cell -->\n <td\n *ngIf=\"selectable\"\n class=\"sefin-table__cell sefin-table__cell--select\"\n >\n <sefin-checkbox\n [value]=\"isSelected(row)\"\n (checkedChange)=\"toggleRowSelection($event, row)\"\n [attr.aria-label]=\"'Select row'\"\n size=\"sm\"\n ></sefin-checkbox>\n </td>\n\n <!-- Data Column Cells -->\n <td\n *ngFor=\"let column of columns\"\n [class]=\"getColumnClass(column)\"\n [class.sefin-table__cell--sticky]=\"column.sticky\"\n [class.sefin-table__cell--sticky-end]=\"\n column.sticky && column.stickyEnd\n \"\n class=\"sefin-table__cell\"\n >\n <!-- Custom Template -->\n <ng-container *ngIf=\"column.cellTemplate\">\n <ng-container\n *ngTemplateOutlet=\"\n column.cellTemplate;\n context: {\n $implicit: row,\n column: column,\n value: getCellValue(row, column)\n }\n \"\n ></ng-container>\n </ng-container>\n\n <!-- Badge Type -->\n <ng-container\n *ngIf=\"!column.cellTemplate && column.type === 'badge'\"\n >\n <sefin-badge\n [value]=\"getCellValue(row, column)\"\n variant=\"primary\"\n size=\"sm\"\n ></sefin-badge>\n </ng-container>\n\n <!-- Actions Type -->\n <ng-container\n *ngIf=\"!column.cellTemplate && column.type === 'actions'\"\n >\n <div class=\"sefin-table__actions\">\n <ng-content select=\"[actions]\"></ng-content>\n </div>\n </ng-container>\n\n <!-- Default/Text/Number/Date Type -->\n <ng-container\n *ngIf=\"\n !column.cellTemplate &&\n column.type !== 'badge' &&\n column.type !== 'actions'\n \"\n >\n <span class=\"sefin-table__cell-content\">\n {{ formatCellValue(getCellValue(row, column), column.type) }}\n </span>\n </ng-container>\n </td>\n\n <!-- Actions Column Cell -->\n <td\n *ngIf=\"hasActionsColumn()\"\n class=\"sefin-table__cell sefin-table__cell--actions\"\n >\n <div class=\"sefin-table__actions\">\n <ng-content select=\"[actions]\"></ng-content>\n </div>\n </td>\n </tr>\n\n <!-- Empty Row -->\n <tr *ngIf=\"isEmpty()\" class=\"sefin-table__row sefin-table__row--empty\">\n <td [attr.colspan]=\"totalColspan()\" class=\"sefin-table__empty-cell\">\n <div class=\"sefin-table__empty-state\">\n <ng-container *ngIf=\"emptyIconTemplate\">\n <ng-container\n *ngTemplateOutlet=\"emptyIconTemplate\"\n ></ng-container>\n </ng-container>\n <p class=\"sefin-table__empty-text\">{{ emptyText }}</p>\n </div>\n </td>\n </tr>\n </tbody>\n </table>\n </div>\n\n <!-- Pagination -->\n <sefin-pagination\n *ngIf=\"pagination && !isEmpty()\"\n [currentPage]=\"currentPage()\"\n [totalPages]=\"totalPages()\"\n [totalItems]=\"serverSide && total !== undefined ? total : undefined\"\n [itemsPerPage]=\"currentPageSize()\"\n (pageChange)=\"onPageChange($event)\"\n class=\"sefin-table__paginator\"\n size=\"md\"\n ></sefin-pagination>\n</div>\n", styles: [".sefin-table{display:block;width:100%;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif);background-color:var(--sefin-color-surface, #ffffff);border-radius:var(--sefin-radius-md, 8px);overflow:hidden}.sefin-table__container{display:flex;flex-direction:column;width:100%;background-color:var(--sefin-color-surface, #ffffff);border:1px solid var(--sefin-color-border, #cecece);border-radius:var(--sefin-radius-md, 8px);overflow:hidden;box-shadow:var(--sefin-shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, .05));transition:box-shadow .2s ease-in-out}.sefin-table__header-actions{display:flex;justify-content:flex-end;align-items:center;padding:var(--sefin-spacing-md, 16px);border-bottom:1px solid var(--sefin-color-border, #e5e5e5);background-color:var(--sefin-color-background, #ffffff);border-radius:var(--sefin-radius-md, 8px) var(--sefin-radius-md, 8px) 0 0}.sefin-table__wrapper{position:relative;overflow-x:auto;overflow-y:visible;background-color:var(--sefin-color-surface, #ffffff)}.sefin-table__wrapper--loading{opacity:.6;pointer-events:none}.sefin-table__loading{position:absolute;inset:0;z-index:10;background-color:#fffffffa;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;flex-direction:column;border-radius:var(--sefin-radius-md, 8px)}.sefin-table__loading-bar{height:3px;background:linear-gradient(90deg,transparent,var(--sefin-color-primary, #55C3D8),transparent);animation:loading-bar 1.5s ease-in-out infinite;width:100%;border-radius:0 var(--sefin-radius-lg, 12px) 0 0}@keyframes loading-bar{0%{transform:translate(-100%)}to{transform:translate(200%)}}.sefin-table__loading-rows{flex:1;display:flex;flex-direction:column;padding:var(--sefin-spacing-lg, 24px);gap:var(--sefin-spacing-md, 16px)}.sefin-table__skeleton-row{display:flex;gap:var(--sefin-spacing-md, 16px);padding:var(--sefin-spacing-sm, 8px) 0}.sefin-table__skeleton-cell{flex:1;height:20px;background:linear-gradient(90deg,var(--sefin-color-surface-hover, #f5f5f5) 0%,rgba(85,195,216,.15) 50%,var(--sefin-color-surface-hover, #f5f5f5) 100%);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:var(--sefin-radius-sm, 4px)}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}.sefin-table__native-table{width:100%;border-collapse:separate;border-spacing:0;background-color:var(--sefin-color-surface, #ffffff)}.sefin-table--density-compact .sefin-table__header-cell,.sefin-table--density-compact .sefin-table__cell{padding:var(--sefin-spacing-xs, 4px) var(--sefin-spacing-sm, 8px);font-size:var(--sefin-font-size-sm, .875rem);line-height:var(--sefin-line-height-normal, 1.5)}.sefin-table--density-compact .sefin-table__header-cell{padding-top:var(--sefin-spacing-sm, 8px);padding-bottom:var(--sefin-spacing-sm, 8px)}.sefin-table--density-compact .sefin-table__cell{padding-top:var(--sefin-spacing-xs, 4px);padding-bottom:var(--sefin-spacing-xs, 4px)}.sefin-table:not(.sefin-table--density-compact) .sefin-table__header-cell,.sefin-table:not(.sefin-table--density-compact) .sefin-table__cell{padding:var(--sefin-spacing-md, 16px);font-size:var(--sefin-font-size-base, 1rem);line-height:var(--sefin-line-height-normal, 1.5)}.sefin-table:not(.sefin-table--density-compact) .sefin-table__header-cell{padding-top:var(--sefin-spacing-md, 16px);padding-bottom:var(--sefin-spacing-md, 16px)}.sefin-table:not(.sefin-table--density-compact) .sefin-table__cell{padding-top:var(--sefin-spacing-sm, 8px);padding-bottom:var(--sefin-spacing-sm, 8px)}.sefin-table__header{background-color:var(--sefin-color-background-elevated, #fafafa);border-bottom:2px solid var(--sefin-color-border, #e5e5e5)}.sefin-table__header--sticky{position:sticky;top:0;z-index:3;box-shadow:0 2px 8px #0000000f}.sefin-table__header-row{background-color:var(--sefin-color-background-elevated, #fafafa)}.sefin-table__header-cell{font-weight:var(--sefin-font-weight-semibold, 600);font-size:var(--sefin-font-size-sm, .875rem);color:var(--sefin-color-text, #383838);text-transform:uppercase;letter-spacing:.5px;text-align:left;white-space:nowrap;border-bottom:none;position:relative;background-color:var(--sefin-color-background-elevated, #fafafa);-webkit-user-select:none;user-select:none;transition:all .2s ease-in-out;z-index:1}.sefin-table__header-cell--align-left{text-align:left}.sefin-table__header-cell--align-center{text-align:center}.sefin-table__header-cell--align-right{text-align:right}.sefin-table__header-cell--select{width:56px;padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-sm, 8px);text-align:center}.sefin-table__header-cell--actions{width:120px;text-align:right}.sefin-table__header-cell--sortable{cursor:pointer}.sefin-table__header-cell--sortable:hover{background-color:#55c3d814;color:var(--sefin-color-primary, #55C3D8)}.sefin-table__header-cell--sortable:hover .sefin-table__sort-icon{opacity:1;color:var(--sefin-color-primary, #55C3D8)}.sefin-table__header-cell--sortable:active{background-color:#55c3d81f}.sefin-table__header-cell--sortable:focus-visible{outline:2px solid var(--sefin-color-border-focus, #55C3D8);outline-offset:-2px;border-radius:var(--sefin-radius-sm, 4px)}.sefin-table__header-cell--sorted{color:var(--sefin-color-primary, #55C3D8);background-color:#55c3d80f}.sefin-table__header-cell--sorted .sefin-table__sort-icon{opacity:1;color:var(--sefin-color-primary, #55C3D8)}.sefin-table__header-cell--sticky{position:sticky;background-color:var(--sefin-color-background-elevated, #fafafa);z-index:2;box-shadow:2px 0 4px #0000000a}.sefin-table__header-cell--sticky:after{content:\"\";position:absolute;top:0;right:0;bottom:0;width:1px;background-color:var(--sefin-color-border, #e5e5e5);opacity:.6}.sefin-table__header-cell--sticky.sefin-table__header-cell--sticky-end{right:0;box-shadow:-2px 0 4px #0000000a}.sefin-table__header-cell--sticky.sefin-table__header-cell--sticky-end:after{left:0;right:auto}.sefin-table__header-content{display:flex;align-items:center;justify-content:flex-start;gap:var(--sefin-spacing-xs, 4px);width:100%}.sefin-table__sort-icon{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;color:var(--sefin-color-text-secondary, #9b9b9b);opacity:.4;transition:all .2s ease-in-out;flex-shrink:0;margin-left:var(--sefin-spacing-xs, 4px)}.sefin-table__sort-icon svg{display:block;width:100%;height:100%}.sefin-table__body{background-color:var(--sefin-color-surface, #ffffff)}.sefin-table__row{border-bottom:1px solid var(--sefin-color-border, #e5e5e5);transition:all .2s ease-in-out;background-color:var(--sefin-color-surface, #ffffff)}.sefin-table__row--clickable{cursor:pointer}.sefin-table__row--clickable:hover:not(.sefin-table__row--empty){background-color:#55c3d80d;box-shadow:inset 3px 0 0 var(--sefin-color-primary, #55C3D8)}.sefin-table__row--clickable:hover:not(.sefin-table__row--empty) .sefin-table__cell--sticky{background-color:#55c3d80d}.sefin-table__row--clickable:active:not(.sefin-table__row--empty){background-color:#55c3d814;box-shadow:inset 3px 0 0 var(--sefin-color-primary-dark, #3f9bb0)}.sefin-table__row--clickable:active:not(.sefin-table__row--empty) .sefin-table__cell--sticky{background-color:#55c3d814}.sefin-table__row--empty{border-bottom:none}.sefin-table__row:focus-visible{outline:2px solid var(--sefin-color-border-focus, #55C3D8);outline-offset:-2px;border-radius:var(--sefin-radius-sm, 4px)}.sefin-table__row:last-child{border-bottom:none}.sefin-table__cell{font-family:var(--sefin-font-family-base, \"Pluto\", sans-serif);font-size:var(--sefin-font-size-base, 1rem);font-weight:var(--sefin-font-weight-normal, 400);color:var(--sefin-color-text, #383838);border-bottom:none;vertical-align:middle;background-color:inherit;transition:background-color .2s ease-in-out,color .2s ease-in-out}.sefin-table__cell--align-left{text-align:left}.sefin-table__cell--align-center{text-align:center}.sefin-table__cell--align-right{text-align:right}.sefin-table__cell--select{width:56px;padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-sm, 8px);text-align:center}.sefin-table__cell--actions{text-align:right;width:120px}.sefin-table__cell--sticky{position:sticky;background-color:inherit;z-index:1;box-shadow:2px 0 4px #0000000a}.sefin-table__cell--sticky:after{content:\"\";position:absolute;top:0;right:0;bottom:0;width:1px;background-color:var(--sefin-color-border, #e5e5e5);opacity:.6}.sefin-table__cell--sticky.sefin-table__cell--sticky-end{right:0;box-shadow:-2px 0 4px #0000000a}.sefin-table__cell--sticky.sefin-table__cell--sticky-end:after{left:0;right:auto}.sefin-table__cell-content{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:var(--sefin-line-height-normal, 1.5);color:var(--sefin-color-text, #383838)}.sefin-table__actions{display:flex;align-items:center;justify-content:flex-end;gap:var(--sefin-spacing-xs, 4px);flex-wrap:wrap}.sefin-table--striped .sefin-table__row:nth-child(2n){background-color:var(--sefin-color-surface, #ffffff)}.sefin-table--striped .sefin-table__row:nth-child(odd){background-color:#f8f9facc}.sefin-table--striped .sefin-table__cell--sticky:nth-child(2n){background-color:var(--sefin-color-surface, #ffffff)}.sefin-table--striped .sefin-table__cell--sticky:nth-child(odd){background-color:#f8f9facc}.sefin-table--striped .sefin-table__row--clickable:hover,.sefin-table--striped .sefin-table__row--clickable:hover .sefin-table__cell--sticky{background-color:#55c3d814!important}.sefin-table--hover .sefin-table__row:not(.sefin-table__row--empty):hover{background-color:#55c3d80d}.sefin-table--hover .sefin-table__row:not(.sefin-table__row--empty):hover .sefin-table__cell--sticky{background-color:#55c3d80d}.sefin-table--hover .sefin-table__row--clickable:not(.sefin-table__row--empty):hover{background-color:#55c3d80d}.sefin-table--hover .sefin-table__row--clickable:not(.sefin-table__row--empty):hover .sefin-table__cell--sticky{background-color:#55c3d80d}.sefin-table--sticky-header .sefin-table__header{position:sticky;top:0;z-index:3;box-shadow:0 4px 12px #00000014}.sefin-table__empty-cell{padding:var(--sefin-spacing-4xl, 96px) var(--sefin-spacing-xl, 32px);text-align:center;border-bottom:none;background-color:var(--sefin-color-surface, #ffffff)}.sefin-table__empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sefin-spacing-lg, 24px);padding:var(--sefin-spacing-2xl, 48px);background:linear-gradient(to bottom,rgba(248,249,250,.5),transparent);border-radius:var(--sefin-radius-md, 8px);margin:var(--sefin-spacing-lg, 24px)}.sefin-table__empty-text{font-size:var(--sefin-font-size-lg, 1.125rem);font-weight:var(--sefin-font-weight-medium, 500);line-height:var(--sefin-line-height-relaxed, 1.75);color:var(--sefin-color-text-secondary, #686868);margin:0;font-family:var(--sefin-font-family-base, \"Pluto\", sans-serif);max-width:480px;letter-spacing:.2px}.sefin-table__paginator{border-top:1px solid var(--sefin-color-border, #e5e5e5);background-color:var(--sefin-color-background, #ffffff);padding:var(--sefin-spacing-md, 16px);border-radius:0 0 var(--sefin-radius-md, 8px) var(--sefin-radius-md, 8px)}.sefin-table ::ng-deep .sefin-checkbox{margin:0;transition:transform .2s ease-in-out}.sefin-table ::ng-deep .sefin-checkbox:hover{transform:scale(1.05)}.sefin-table ::ng-deep .sefin-badge{margin:0;box-shadow:0 1px 3px #0000001a;transition:transform .2s ease-in-out,box-shadow .2s ease-in-out}.sefin-table ::ng-deep .sefin-badge:hover{transform:translateY(-1px);box-shadow:0 2px 6px #00000026}.sefin-table ::ng-deep .sefin-button,.sefin-table ::ng-deep .sefin-icon-button{transition:transform .2s ease-in-out,box-shadow .2s ease-in-out}.sefin-table ::ng-deep .sefin-button:hover,.sefin-table ::ng-deep .sefin-icon-button:hover{transform:translateY(-1px)}.sefin-table ::ng-deep .sefin-button:active,.sefin-table ::ng-deep .sefin-icon-button:active{transform:translateY(0)}\n"] }]
|
|
5741
|
+
args: [{ selector: 'sefin-table', standalone: true, imports: [CommonModule, PaginationComponent, CheckboxComponent, BadgeComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"sefin-table__container\">\n <!-- Header Actions Slot -->\n <div *ngIf=\"headerActionsTemplate\" class=\"sefin-table__header-actions\">\n <ng-container *ngTemplateOutlet=\"headerActionsTemplate\"></ng-container>\n </div>\n\n <!-- Loading Overlay -->\n <div *ngIf=\"loading\" class=\"sefin-table__loading\">\n <div class=\"sefin-table__loading-bar\"></div>\n <div class=\"sefin-table__loading-rows\">\n <div *ngFor=\"let i of [1, 2, 3, 4, 5]\" class=\"sefin-table__skeleton-row\">\n <div\n class=\"sefin-table__skeleton-cell\"\n *ngFor=\"let col of columns\"\n ></div>\n </div>\n </div>\n </div>\n\n <!-- Table -->\n <div\n class=\"sefin-table__wrapper\"\n [class.sefin-table__wrapper--loading]=\"loading\"\n >\n <table [class]=\"getTableClasses()\" class=\"sefin-table__native-table\">\n <!-- Table Header -->\n <thead\n class=\"sefin-table__header\"\n [class.sefin-table__header--sticky]=\"stickyHeader\"\n >\n <tr class=\"sefin-table__header-row\">\n <!-- Selection Column Header -->\n <th\n *ngIf=\"selectable\"\n class=\"sefin-table__header-cell sefin-table__header-cell--select\"\n >\n <sefin-checkbox\n *ngIf=\"selectionMode === 'multiple'\"\n [value]=\"isAllSelected()\"\n [indeterminate]=\"isIndeterminate()\"\n (checkedChange)=\"toggleSelectAll($event)\"\n [attr.aria-label]=\"'Select all rows'\"\n size=\"sm\"\n ></sefin-checkbox>\n </th>\n\n <!-- Data Column Headers -->\n <th\n *ngFor=\"let column of columns\"\n [class]=\"getColumnClass(column)\"\n [class.sefin-table__header-cell--sortable]=\"column.sortable && sort\"\n [class.sefin-table__header-cell--sorted]=\"\n currentSortColumn() === column.key\n \"\n [class.sefin-table__header-cell--sort-asc]=\"\n currentSortColumn() === column.key &&\n currentSortDirection() === 'asc'\n \"\n [class.sefin-table__header-cell--sort-desc]=\"\n currentSortColumn() === column.key &&\n currentSortDirection() === 'desc'\n \"\n [class.sefin-table__header-cell--sticky]=\"column.sticky\"\n [class.sefin-table__header-cell--sticky-end]=\"\n column.sticky && column.stickyEnd\n \"\n [style.width]=\"getColumnWidth(column)\"\n class=\"sefin-table__header-cell\"\n (click)=\"column.sortable && sort ? onSort(column) : null\"\n [attr.aria-sort]=\"\n currentSortColumn() === column.key\n ? currentSortDirection() === 'asc'\n ? 'ascending'\n : currentSortDirection() === 'desc'\n ? 'descending'\n : 'none'\n : null\n \"\n role=\"columnheader\"\n [attr.tabindex]=\"column.sortable && sort ? 0 : null\"\n >\n <span class=\"sefin-table__header-content\">\n {{ column.header }}\n <span\n *ngIf=\"column.sortable && sort\"\n class=\"sefin-table__sort-icon\"\n >\n <svg\n *ngIf=\"\n currentSortColumn() !== column.key ||\n currentSortDirection() === ''\n \"\n width=\"12\"\n height=\"12\"\n viewBox=\"0 0 12 12\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M3 4.5L6 1.5L9 4.5M3 7.5L6 10.5L9 7.5\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n <svg\n *ngIf=\"\n currentSortColumn() === column.key &&\n currentSortDirection() === 'asc'\n \"\n width=\"12\"\n height=\"12\"\n viewBox=\"0 0 12 12\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M3 7.5L6 4.5L9 7.5\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n <svg\n *ngIf=\"\n currentSortColumn() === column.key &&\n currentSortDirection() === 'desc'\n \"\n width=\"12\"\n height=\"12\"\n viewBox=\"0 0 12 12\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M3 4.5L6 7.5L9 4.5\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </span>\n </span>\n </th>\n\n <th\n *ngIf=\"hasActionsColumn()\"\n class=\"sefin-table__header-cell sefin-table__header-cell--actions\"\n ></th>\n </tr>\n </thead>\n\n <!-- Table Body -->\n <tbody class=\"sefin-table__body\">\n <!-- Data Rows -->\n <tr\n *ngFor=\"let row of displayedData(); trackBy: trackByFn\"\n class=\"sefin-table__row sefin-table__row--clickable\"\n (click)=\"onRowClick(row)\"\n >\n <!-- Selection Column Cell -->\n <td\n *ngIf=\"selectable\"\n class=\"sefin-table__cell sefin-table__cell--select\"\n >\n <sefin-checkbox\n [value]=\"isSelected(row)\"\n (checkedChange)=\"toggleRowSelection($event, row)\"\n [attr.aria-label]=\"'Select row'\"\n size=\"sm\"\n ></sefin-checkbox>\n </td>\n\n <!-- Data Column Cells -->\n <td\n *ngFor=\"let column of columns\"\n [class]=\"getColumnClass(column)\"\n [class.sefin-table__cell--sticky]=\"column.sticky\"\n [class.sefin-table__cell--sticky-end]=\"\n column.sticky && column.stickyEnd\n \"\n class=\"sefin-table__cell\"\n >\n <!-- Custom Template -->\n <ng-container *ngIf=\"column.cellTemplate\">\n <ng-container\n *ngTemplateOutlet=\"\n column.cellTemplate;\n context: {\n $implicit: row,\n column: column,\n value: getCellValue(row, column)\n }\n \"\n ></ng-container>\n </ng-container>\n\n <!-- Badge Type -->\n <ng-container\n *ngIf=\"!column.cellTemplate && column.type === 'badge'\"\n >\n <sefin-badge\n [value]=\"getCellValue(row, column)\"\n variant=\"primary\"\n size=\"sm\"\n ></sefin-badge>\n </ng-container>\n\n <!-- Actions Type -->\n <ng-container\n *ngIf=\"!column.cellTemplate && column.type === 'actions'\"\n >\n <div class=\"sefin-table__actions\">\n <ng-content select=\"[actions]\"></ng-content>\n </div>\n </ng-container>\n\n <!-- Default/Text/Number/Date Type -->\n <ng-container\n *ngIf=\"\n !column.cellTemplate &&\n column.type !== 'badge' &&\n column.type !== 'actions'\n \"\n >\n <span class=\"sefin-table__cell-content\">\n {{ formatCellValue(getCellValue(row, column), column.type) }}\n </span>\n </ng-container>\n </td>\n\n <!-- Actions Column Cell -->\n <td\n *ngIf=\"hasActionsColumn()\"\n class=\"sefin-table__cell sefin-table__cell--actions\"\n >\n <div class=\"sefin-table__actions\">\n <ng-content select=\"[actions]\"></ng-content>\n </div>\n </td>\n </tr>\n\n <!-- Empty Row -->\n <tr *ngIf=\"isEmpty()\" class=\"sefin-table__row sefin-table__row--empty\">\n <td [attr.colspan]=\"totalColspan()\" class=\"sefin-table__empty-cell\">\n <div class=\"sefin-table__empty-state\">\n <ng-container *ngIf=\"emptyIconTemplate\">\n <ng-container\n *ngTemplateOutlet=\"emptyIconTemplate\"\n ></ng-container>\n </ng-container>\n <p class=\"sefin-table__empty-text\">{{ emptyText }}</p>\n </div>\n </td>\n </tr>\n </tbody>\n </table>\n </div>\n\n <!-- Pagination -->\n <sefin-pagination\n *ngIf=\"pagination && !isEmpty()\"\n [currentPage]=\"currentPage()\"\n [totalPages]=\"totalPages()\"\n [totalItems]=\"serverSide && total !== undefined ? total : undefined\"\n [itemsPerPage]=\"currentPageSize()\"\n (pageChange)=\"onPageChange($event)\"\n class=\"sefin-table__paginator\"\n size=\"sm\"\n ></sefin-pagination>\n</div>\n", styles: [".sefin-table{display:block;width:100%;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif);background-color:var(--sefin-color-surface, #ffffff);border-radius:var(--sefin-radius-md, 8px);overflow:hidden}.sefin-table__container{display:flex;flex-direction:column;width:100%;background-color:var(--sefin-color-surface, #ffffff);border:1px solid var(--sefin-color-border, #cecece);border-radius:var(--sefin-radius-md, 8px);overflow:hidden;box-shadow:var(--sefin-shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, .05));transition:box-shadow .2s ease-in-out}.sefin-table__header-actions{display:flex;justify-content:flex-end;align-items:center;padding:var(--sefin-spacing-md, 16px);border-bottom:1px solid var(--sefin-color-border, #e5e5e5);background-color:var(--sefin-color-background, #ffffff);border-radius:var(--sefin-radius-md, 8px) var(--sefin-radius-md, 8px) 0 0}.sefin-table__wrapper{position:relative;overflow-x:auto;overflow-y:visible;background-color:var(--sefin-color-surface, #ffffff)}.sefin-table__wrapper--loading{opacity:.6;pointer-events:none}.sefin-table__loading{position:absolute;inset:0;z-index:10;background-color:#fffffffa;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;flex-direction:column;border-radius:var(--sefin-radius-md, 8px)}.sefin-table__loading-bar{height:3px;background:linear-gradient(90deg,transparent,var(--sefin-color-primary, #55C3D8),transparent);animation:loading-bar 1.5s ease-in-out infinite;width:100%;border-radius:0 var(--sefin-radius-lg, 12px) 0 0}@keyframes loading-bar{0%{transform:translate(-100%)}to{transform:translate(200%)}}.sefin-table__loading-rows{flex:1;display:flex;flex-direction:column;padding:var(--sefin-spacing-lg, 24px);gap:var(--sefin-spacing-md, 16px)}.sefin-table__skeleton-row{display:flex;gap:var(--sefin-spacing-md, 16px);padding:var(--sefin-spacing-sm, 8px) 0}.sefin-table__skeleton-cell{flex:1;height:20px;background:linear-gradient(90deg,var(--sefin-color-surface-hover, #f5f5f5) 0%,rgba(85,195,216,.15) 50%,var(--sefin-color-surface-hover, #f5f5f5) 100%);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:var(--sefin-radius-sm, 4px)}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}.sefin-table__native-table{width:100%;border-collapse:separate;border-spacing:0;background-color:var(--sefin-color-surface, #ffffff)}.sefin-table--density-compact .sefin-table__header-cell,.sefin-table--density-compact .sefin-table__cell{padding:var(--sefin-spacing-xs, 4px) var(--sefin-spacing-sm, 8px);font-size:var(--sefin-font-size-sm, .875rem);line-height:var(--sefin-line-height-normal, 1.5)}.sefin-table--density-compact .sefin-table__header-cell{padding-top:var(--sefin-spacing-sm, 8px);padding-bottom:var(--sefin-spacing-sm, 8px)}.sefin-table--density-compact .sefin-table__cell{padding-top:var(--sefin-spacing-xs, 4px);padding-bottom:var(--sefin-spacing-xs, 4px)}.sefin-table:not(.sefin-table--density-compact) .sefin-table__header-cell,.sefin-table:not(.sefin-table--density-compact) .sefin-table__cell{padding:var(--sefin-spacing-md, 16px);font-size:var(--sefin-font-size-base, 1rem);line-height:var(--sefin-line-height-normal, 1.5)}.sefin-table:not(.sefin-table--density-compact) .sefin-table__header-cell{padding-top:var(--sefin-spacing-md, 16px);padding-bottom:var(--sefin-spacing-md, 16px)}.sefin-table:not(.sefin-table--density-compact) .sefin-table__cell{padding-top:var(--sefin-spacing-sm, 8px);padding-bottom:var(--sefin-spacing-sm, 8px)}.sefin-table__header{background-color:var(--sefin-color-background-elevated, #fafafa);border-bottom:2px solid var(--sefin-color-border, #e5e5e5)}.sefin-table__header--sticky{position:sticky;top:0;z-index:3;box-shadow:0 2px 8px #0000000f}.sefin-table__header-row{background-color:var(--sefin-color-background-elevated, #fafafa)}.sefin-table__header-cell{font-weight:var(--sefin-font-weight-semibold, 600);font-size:var(--sefin-font-size-sm, .875rem);color:var(--sefin-color-text, #383838);text-transform:uppercase;letter-spacing:.5px;text-align:left;white-space:nowrap;border-bottom:none;position:relative;background-color:var(--sefin-color-background-elevated, #fafafa);-webkit-user-select:none;user-select:none;transition:all .2s ease-in-out;z-index:1}.sefin-table__header-cell--align-left{text-align:left}.sefin-table__header-cell--align-center{text-align:center}.sefin-table__header-cell--align-right{text-align:right}.sefin-table__header-cell--select{width:56px;padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-sm, 8px);text-align:center}.sefin-table__header-cell--actions{width:120px;text-align:right}.sefin-table__header-cell--sortable{cursor:pointer}.sefin-table__header-cell--sortable:hover{background-color:#55c3d814;color:var(--sefin-color-primary, #55C3D8)}.sefin-table__header-cell--sortable:hover .sefin-table__sort-icon{opacity:1;color:var(--sefin-color-primary, #55C3D8)}.sefin-table__header-cell--sortable:active{background-color:#55c3d81f}.sefin-table__header-cell--sortable:focus-visible{outline:2px solid var(--sefin-color-border-focus, #55C3D8);outline-offset:-2px;border-radius:var(--sefin-radius-sm, 4px)}.sefin-table__header-cell--sorted{color:var(--sefin-color-primary, #55C3D8);background-color:#55c3d80f}.sefin-table__header-cell--sorted .sefin-table__sort-icon{opacity:1;color:var(--sefin-color-primary, #55C3D8)}.sefin-table__header-cell--sticky{position:sticky;background-color:var(--sefin-color-background-elevated, #fafafa);z-index:2;box-shadow:2px 0 4px #0000000a}.sefin-table__header-cell--sticky:after{content:\"\";position:absolute;top:0;right:0;bottom:0;width:1px;background-color:var(--sefin-color-border, #e5e5e5);opacity:.6}.sefin-table__header-cell--sticky.sefin-table__header-cell--sticky-end{right:0;box-shadow:-2px 0 4px #0000000a}.sefin-table__header-cell--sticky.sefin-table__header-cell--sticky-end:after{left:0;right:auto}.sefin-table__header-content{display:flex;align-items:center;justify-content:flex-start;gap:var(--sefin-spacing-xs, 4px);width:100%}.sefin-table__sort-icon{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;color:var(--sefin-color-text-secondary, #9b9b9b);opacity:.4;transition:all .2s ease-in-out;flex-shrink:0;margin-left:var(--sefin-spacing-xs, 4px)}.sefin-table__sort-icon svg{display:block;width:100%;height:100%}.sefin-table__body{background-color:var(--sefin-color-surface, #ffffff)}.sefin-table__row{border-bottom:1px solid var(--sefin-color-border, #e5e5e5);transition:all .2s ease-in-out;background-color:var(--sefin-color-surface, #ffffff)}.sefin-table__row--clickable{cursor:pointer}.sefin-table__row--clickable:hover:not(.sefin-table__row--empty){background-color:#55c3d80d;box-shadow:inset 3px 0 0 var(--sefin-color-primary, #55C3D8)}.sefin-table__row--clickable:hover:not(.sefin-table__row--empty) .sefin-table__cell--sticky{background-color:#55c3d80d}.sefin-table__row--clickable:active:not(.sefin-table__row--empty){background-color:#55c3d814;box-shadow:inset 3px 0 0 var(--sefin-color-primary-dark, #3f9bb0)}.sefin-table__row--clickable:active:not(.sefin-table__row--empty) .sefin-table__cell--sticky{background-color:#55c3d814}.sefin-table__row--empty{border-bottom:none}.sefin-table__row:focus-visible{outline:2px solid var(--sefin-color-border-focus, #55C3D8);outline-offset:-2px;border-radius:var(--sefin-radius-sm, 4px)}.sefin-table__row:last-child{border-bottom:none}.sefin-table__cell{font-family:var(--sefin-font-family-base, \"Pluto\", sans-serif);font-size:var(--sefin-font-size-base, 1rem);font-weight:var(--sefin-font-weight-normal, 400);color:var(--sefin-color-text, #383838);border-bottom:none;vertical-align:middle;background-color:inherit;transition:background-color .2s ease-in-out,color .2s ease-in-out}.sefin-table__cell--align-left{text-align:left}.sefin-table__cell--align-center{text-align:center}.sefin-table__cell--align-right{text-align:right}.sefin-table__cell--select{width:56px;padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-sm, 8px);text-align:center}.sefin-table__cell--actions{text-align:right;width:120px}.sefin-table__cell--sticky{position:sticky;background-color:inherit;z-index:1;box-shadow:2px 0 4px #0000000a}.sefin-table__cell--sticky:after{content:\"\";position:absolute;top:0;right:0;bottom:0;width:1px;background-color:var(--sefin-color-border, #e5e5e5);opacity:.6}.sefin-table__cell--sticky.sefin-table__cell--sticky-end{right:0;box-shadow:-2px 0 4px #0000000a}.sefin-table__cell--sticky.sefin-table__cell--sticky-end:after{left:0;right:auto}.sefin-table__cell-content{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:var(--sefin-line-height-normal, 1.5);color:var(--sefin-color-text, #383838)}.sefin-table__actions{display:flex;align-items:center;justify-content:flex-end;gap:var(--sefin-spacing-xs, 4px);flex-wrap:wrap}.sefin-table--striped .sefin-table__row:nth-child(2n){background-color:var(--sefin-color-surface, #ffffff)}.sefin-table--striped .sefin-table__row:nth-child(odd){background-color:#f8f9facc}.sefin-table--striped .sefin-table__cell--sticky:nth-child(2n){background-color:var(--sefin-color-surface, #ffffff)}.sefin-table--striped .sefin-table__cell--sticky:nth-child(odd){background-color:#f8f9facc}.sefin-table--striped .sefin-table__row--clickable:hover,.sefin-table--striped .sefin-table__row--clickable:hover .sefin-table__cell--sticky{background-color:#55c3d814!important}.sefin-table--hover .sefin-table__row:not(.sefin-table__row--empty):hover{background-color:#55c3d80d}.sefin-table--hover .sefin-table__row:not(.sefin-table__row--empty):hover .sefin-table__cell--sticky{background-color:#55c3d80d}.sefin-table--hover .sefin-table__row--clickable:not(.sefin-table__row--empty):hover{background-color:#55c3d80d}.sefin-table--hover .sefin-table__row--clickable:not(.sefin-table__row--empty):hover .sefin-table__cell--sticky{background-color:#55c3d80d}.sefin-table--sticky-header .sefin-table__header{position:sticky;top:0;z-index:3;box-shadow:0 4px 12px #00000014}.sefin-table__empty-cell{padding:var(--sefin-spacing-4xl, 96px) var(--sefin-spacing-xl, 32px);text-align:center;border-bottom:none;background-color:var(--sefin-color-surface, #ffffff)}.sefin-table__empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sefin-spacing-lg, 24px);padding:var(--sefin-spacing-2xl, 48px);background:linear-gradient(to bottom,rgba(248,249,250,.5),transparent);border-radius:var(--sefin-radius-md, 8px);margin:var(--sefin-spacing-lg, 24px)}.sefin-table__empty-text{font-size:var(--sefin-font-size-lg, 1.125rem);font-weight:var(--sefin-font-weight-medium, 500);line-height:var(--sefin-line-height-relaxed, 1.75);color:var(--sefin-color-text-secondary, #686868);margin:0;font-family:var(--sefin-font-family-base, \"Pluto\", sans-serif);max-width:480px;letter-spacing:.2px}.sefin-table__paginator{border-top:1px solid var(--sefin-color-border, #e5e5e5);background-color:var(--sefin-color-background, #ffffff);padding:var(--sefin-spacing-md, 16px);border-radius:0 0 var(--sefin-radius-md, 8px) var(--sefin-radius-md, 8px)}.sefin-table ::ng-deep .sefin-checkbox{margin:0;transition:transform .2s ease-in-out}.sefin-table ::ng-deep .sefin-checkbox:hover{transform:scale(1.05)}.sefin-table ::ng-deep .sefin-badge{margin:0;box-shadow:0 1px 3px #0000001a;transition:transform .2s ease-in-out,box-shadow .2s ease-in-out}.sefin-table ::ng-deep .sefin-badge:hover{transform:translateY(-1px);box-shadow:0 2px 6px #00000026}.sefin-table ::ng-deep .sefin-button,.sefin-table ::ng-deep .sefin-icon-button{transition:transform .2s ease-in-out,box-shadow .2s ease-in-out}.sefin-table ::ng-deep .sefin-button:hover,.sefin-table ::ng-deep .sefin-icon-button:hover{transform:translateY(-1px)}.sefin-table ::ng-deep .sefin-button:active,.sefin-table ::ng-deep .sefin-icon-button:active{transform:translateY(0)}\n"] }]
|
|
5742
5742
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { columns: [{
|
|
5743
5743
|
type: Input
|
|
5744
5744
|
}], data: [{
|