@sixbell-telco/sdk
Version:
A collection of reusable components designed for use in Sixbell Telco Angular projects
130 lines (129 loc) • 6.66 kB
TypeScript
import { ButtonSizeProps } from '@sixbell-telco/sdk/components/button';
import { IconSizeProps } from '@sixbell-telco/sdk/components/icon';
import { RowData, type CellContext, type HeaderContext, type Row } from '@tanstack/angular-table';
import { DataTableContextService } from '../src/data-table-context.service';
import * as i0 from "@angular/core";
/**
* Expandable cell component that shows row data and expand/collapse toggle
*/
export declare class DataTableExpandableCellComponent<T extends RowData> {
/**
* TanStack Table context injected by flexRender
*/
context: CellContext<T, unknown>;
/**
* Data table context for size synchronization
*/
dataTableContext: DataTableContextService;
/**
* Get the row instance from context
*/
get row(): Row<T>;
/** @internal */
readonly iconChevronDown = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6l-6-6l1.41-1.41z\"></path></svg>";
/**
* @internal
* Computes button size based on data table size
*/
readonly buttonSize: import("@angular/core").Signal<ButtonSizeProps>;
/**
* @internal
* Computes icon size based on data table size
*/
readonly iconSize: import("@angular/core").Signal<IconSizeProps>;
static ɵfac: i0.ɵɵFactoryDeclaration<DataTableExpandableCellComponent<any>, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<DataTableExpandableCellComponent<any>, "st-data-table-expandable-cell", never, {}, {}, never, never, true, never>;
}
/**
* Expandable header cell component with sorting capability and expand all functionality
*/
export declare class DataTableExpandableHeaderCellComponent<T extends RowData> {
/**
* TanStack Table context injected by flexRender
*/
readonly context: HeaderContext<T, unknown>;
/**
* Data table context for size synchronization
*/
readonly dataTableContext: DataTableContextService;
/**
* Display label for the column
*/
readonly label: import("@angular/core").InputSignal<string>;
/**
* Whether this column can be sorted
*/
readonly canSort: import("@angular/core").InputSignal<boolean>;
/**
* Current sort state of the column
*/
readonly sortState: import("@angular/core").InputSignal<false | "asc" | "desc">;
/**
* Event emitted when sort toggle is requested
*/
readonly sortToggle: import("@angular/core").OutputEmitterRef<void>;
/**
* Get the table instance from context
*/
get table(): import("@tanstack/table-core").Table<T>;
/** @internal */
readonly iconChevronDown = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6l-6-6l1.41-1.41z\"></path></svg>";
/** @internal */
readonly iconDefaultSort = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M16 17.01V10h-2v7.01h-3L15 21l4-3.99h-3zM9 3L5 6.99h3V14h2V6.99h3L9 3z\"></path></svg>";
/** @internal */
readonly iconAscending = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8l-8 8z\"></path></svg>";
/**
* @internal
* Computes button size based on data table size
*/
readonly buttonSize: import("@angular/core").Signal<ButtonSizeProps>;
/**
* @internal
* Computes icon size based on data table size
*/
readonly iconSize: import("@angular/core").Signal<IconSizeProps>;
/**
* @internal
* Computes the appropriate icon based on current sort state
*/
readonly currentSortIcon: import("@angular/core").Signal<"<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M16 17.01V10h-2v7.01h-3L15 21l4-3.99h-3zM9 3L5 6.99h3V14h2V6.99h3L9 3z\"></path></svg>" | "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8l-8 8z\"></path></svg>">;
/**
* @internal
* Computes aria-sort attribute for accessibility
*/
readonly computedAriaSortAttribute: import("@angular/core").Signal<"ascending" | "descending" | "none">;
static ɵfac: i0.ɵɵFactoryDeclaration<DataTableExpandableHeaderCellComponent<any>, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<DataTableExpandableHeaderCellComponent<any>, "st-data-table-expandable-header-cell", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "canSort": { "alias": "canSort"; "required": false; "isSignal": true; }; "sortState": { "alias": "sortState"; "required": false; "isSignal": true; }; }, { "sortToggle": "sortToggle"; }, never, never, true, never>;
}
/**
* Sub-component toggle cell for controlling custom sub-component visibility
*/
export declare class DataTableSubToggleCellComponent {
/**
* The table row instance
*/
readonly row: import("@angular/core").InputSignal<Row<unknown>>;
/**
* Whether the sub-component is currently expanded
*/
readonly isExpanded: import("@angular/core").InputSignal<boolean>;
/**
* Whether this row can toggle a sub-component
*/
readonly canToggleSubComponent: import("@angular/core").InputSignal<boolean>;
/**
* Event emitted when toggle is clicked
*/
readonly toggled: import("@angular/core").OutputEmitterRef<string>;
/** @internal */
readonly expandIcon = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6l-6-6l1.41-1.41z\"></path></svg>";
/** @internal */
readonly infoIcon = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z\"></path></svg>";
/**
* @internal
* Handles the toggle click
*/
handleToggle(): void;
static ɵfac: i0.ɵɵFactoryDeclaration<DataTableSubToggleCellComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<DataTableSubToggleCellComponent, "st-data-table-sub-toggle-cell", never, { "row": { "alias": "row"; "required": true; "isSignal": true; }; "isExpanded": { "alias": "isExpanded"; "required": false; "isSignal": true; }; "canToggleSubComponent": { "alias": "canToggleSubComponent"; "required": false; "isSignal": true; }; }, { "toggled": "toggled"; }, never, never, true, never>;
}