@sixbell-telco/sdk
Version:
A collection of reusable components designed for use in Sixbell Telco Angular projects
159 lines (158 loc) • 7.5 kB
TypeScript
import { PaginationType } from '@sixbell-telco/sdk/components/paginator';
import { TableContainerHeightProps, TableContentSizeProps } from '@sixbell-telco/sdk/components/table';
import { TypographyVariantProps } from '@sixbell-telco/sdk/directives/typography';
import { TranslateService } from '@sixbell-telco/sdk/utils/translation';
import { DataTableContextService } from './data-table-context.service';
import { DataTablePagination } from './models';
import * as i0 from "@angular/core";
/** Configuration object for data table styling variants */
export type DataTableVariantProps = {
size?: TableContentSizeProps;
containerHeight?: TableContainerHeightProps;
};
/**
* @internal
* Generates data table classes with size and height variants
*/
export declare const dataTableContent: (props?: ({
size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
/**
* A styled container component for data tables - provides styling shell only
*
* This component is similar to st-table but with additional data table specific styling.
* Users should compose their own table structure using TanStack Table and SDK components.
*
* @example
* ```html
* <st-data-table-container size="md" height="lg">
* <table>
* <thead>
* <tr>
* <th><st-data-table-sortable-header>Name</st-data-table-sortable-header></th>
* </tr>
* </thead>
* <tbody>
* <tr>
* <td>John Doe</td>
* </tr>
* </tbody>
* </table>
* </st-data-table-container>
* ```
*/
export declare class DataTableContainerComponent {
readonly translationService: TranslateService;
readonly dataTableContext: DataTableContextService;
readonly noDataIcon = "<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\" style=\"stroke-width:var(--ng-icon__stroke-width, 1.5)\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z\"></path></svg>";
readonly noResultsIcon = "<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\" style=\"stroke-width:var(--ng-icon__stroke-width, 1.5)\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m9.75 9.75 4.5 4.5m0-4.5-4.5 4.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z\"></path></svg>";
/**
* Table size variant
* @defaultValue 'sm'
*/
size: import("@angular/core").InputSignal<TableContentSizeProps>;
constructor();
/**
* Enable sticky header row
* @defaultValue false
*/
pinRows: import("@angular/core").InputSignal<boolean>;
/**
* Enable sticky first column
* @defaultValue false
*/
pinColumns: import("@angular/core").InputSignal<boolean>;
/**
* Apply zebra-striping to rows
* @defaultValue false
*/
zebra: import("@angular/core").InputSignal<boolean>;
/**
* Pagination control display variant
* @defaultValue 'default'
*/
paginatorType: import("@angular/core").InputSignal<PaginationType>;
/**
* Total number of items across all pages
* @defaultValue 0
*/
totalItems: import("@angular/core").InputSignal<number>;
/**
* Pagination configuration
* @defaultValue { id: 'paginator', currentPage: 1, itemsPerPage: 10, search: '', sortColumn: null, sortDirection: null, filters: {} }
*/
pagination: import("@angular/core").InputSignal<DataTablePagination>;
/**
* Maximum number of pagination buttons to display
* @defaultValue 4
*/
maxSize: import("@angular/core").InputSignal<number>;
/** Event emitted when page changes */
pageChanged: import("@angular/core").OutputEmitterRef<number>;
/** Event emitted when page size changes */
pageSizeChanged: import("@angular/core").OutputEmitterRef<number>;
readonly ENTRIES: readonly [5, 10, 20, 50, 100];
readonly entriesPerPageOptions: import("@angular/core").Signal<{
value: 10 | 5 | 20 | 50 | 100;
text: any;
}[]>;
/**
* Computed total number of pages for the internal paginator.
* Calculated from totalItems and itemsPerPage.
*/
readonly totalPages: import("@angular/core").Signal<number>;
/**
* Computed display range for current page entries
* @example "1-10" of 100 entries
*/
paginationRange: import("@angular/core").Signal<string>;
/**
* Function to determine if any filters are currently active
* This allows the parent component to define what constitutes an "active filter"
*/
hasActiveFiltersCallback: import("@angular/core").InputSignal<(() => boolean) | undefined>;
/**
* Computed boolean indicating if any filters are currently active
*/
readonly hasActiveFilters: import("@angular/core").Signal<boolean>;
/**
* Computed boolean indicating if we should show "no results" vs "no data"
*/
readonly hasNoResults: import("@angular/core").Signal<boolean>;
/**
* Computed boolean indicating if we should show "no data" state
*/
readonly hasNoData: import("@angular/core").Signal<boolean>;
/**
* Handles page navigation events
* @param page - New page number
*/
handlePageChange(page: number): void;
/**
* Handles page size changes
* @param size - New items per page value
*/
handlePageSizeChange(size: unknown): void;
/**
* @internal
* Computes typography variant for paginator text based on table size
*/
readonly paginatorTextSize: import("@angular/core").Signal<TypographyVariantProps>;
/**
* @internal
* Computes table element classes based on current configuration
*/
readonly tableClass: import("@angular/core").Signal<string>;
/**
* @internal
* Computes table container classes based on height input
*/
readonly tableContainerClass: import("@angular/core").Signal<string>;
/**
* @internal
* Computes outer container classes based on size
*/
readonly containerClass: import("@angular/core").Signal<string>;
static ɵfac: i0.ɵɵFactoryDeclaration<DataTableContainerComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<DataTableContainerComponent, "st-data-table", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "pinRows": { "alias": "pinRows"; "required": false; "isSignal": true; }; "pinColumns": { "alias": "pinColumns"; "required": false; "isSignal": true; }; "zebra": { "alias": "zebra"; "required": false; "isSignal": true; }; "paginatorType": { "alias": "paginatorType"; "required": false; "isSignal": true; }; "totalItems": { "alias": "totalItems"; "required": false; "isSignal": true; }; "pagination": { "alias": "pagination"; "required": false; "isSignal": true; }; "maxSize": { "alias": "maxSize"; "required": false; "isSignal": true; }; "hasActiveFiltersCallback": { "alias": "hasActiveFiltersCallback"; "required": false; "isSignal": true; }; }, { "pageChanged": "pageChanged"; "pageSizeChanged": "pageSizeChanged"; }, never, ["*"], true, never>;
}