@sixbell-telco/sdk
Version:
A collection of reusable components designed for use in Sixbell Telco Angular projects
62 lines (61 loc) • 3.01 kB
TypeScript
import { ButtonSizeProps } from '@sixbell-telco/sdk/components/button';
import { IconSizeProps } from '@sixbell-telco/sdk/components/icon';
import { DataTableContextService } from '../src/data-table-context.service';
import * as i0 from "@angular/core";
/**
* Sortable header component for data table columns
*
* @example
* ```typescript
* flexRenderComponent(DataTableSortableHeaderComponent, {
* inputs: {
* label: 'Column Name',
* sortState: column.getIsSorted(),
* },
* outputs: {
* sortToggle: () => column.toggleSorting(),
* },
* })
* ```
*/
export declare class DataTableSortableHeaderComponent {
readonly dataTableContext: DataTableContextService;
/**
* Display label for the column
*/
readonly label: import("@angular/core").InputSignal<string>;
/**
* 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>;
/** @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<DataTableSortableHeaderComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<DataTableSortableHeaderComponent, "st-data-table-sortable-header", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "sortState": { "alias": "sortState"; "required": false; "isSignal": true; }; }, { "sortToggle": "sortToggle"; }, never, never, true, never>;
}