@ux-aspects/ux-aspects

import { ArrayDataSource } from '@angular/cdk/collections'; import { FlatTreeControl } from '@angular/cdk/tree'; import { ElementRef, EventEmitter, OnChanges, QueryList, SimpleChanges, TemplateRef } from '@angular/core'; import { ColumnPickerGroupItem } from './interfaces/column-picker-group-item.interface'; import { ColumnPickerTreeNode } from './interfaces/column-picker-tree-node.interface'; import * as i0 from "@angular/core"; export declare class ColumnPickerComponent implements OnChanges { private readonly _columnPicker; /** Access the LiveAnnounce to provide accessibility on reordering */ private readonly _liveAnnouncer; /** We are using OnPush change detection so we must manually trigger CD */ private readonly _changeDetectorRef; /** Sets the id of the column picker. */ id: string; /** Define a list of all selected columns. */ selected: ReadonlyArray<string | ColumnPickerGroupItem>; /** Define a list of columns that are always selected. The columns cannot be moved or reordered. */ locked: ReadonlyArray<string>; /** Define a list of columns that are not selected or locked. All columns must have unique names, including columns in different groups. */ deselected: ReadonlyArray<string | ColumnPickerGroupItem>; /** Define a custom selected title template. */ selectedTitleTemplate: TemplateRef<void>; /** Define a custom deselected title template. */ deselectedTitleTemplate: TemplateRef<void>; /** Define a custom template for deselected items. */ deselectedTemplate: TemplateRef<string>; /** Define a custom template for selected items. */ selectedTemplate: TemplateRef<string>; /** Define a custom template for locked items. */ lockedTemplate: TemplateRef<string>; /** Define a custom template for the action buttons columns. */ actionsTemplate: TemplateRef<ColumnPickerActionsContext>; /** Define a function to get the aria label of reorderable items in the selected column. */ selectedAriaLabel: (column: string | ColumnPickerGroupItem, index: number) => string; /** Define a function to get the aria label of a group in the deselected list. */ deselectedGroupAriaLabel: (column: string | ColumnPickerGroupItem, isExpanded: boolean) => string; /** Define a function that returns a column move announcement. */ columnMovedAnnouncement: (column: string | ColumnPickerGroupItem, delta: number) => string; /** Define settings for the grouped deselected items. */ set groups(groups: ColumnPickerGroup[]); get groups(): ColumnPickerGroup[]; /** Define a comparator function used for sorting the deselected columns. */ sort: (a: ColumnPickerGroupItem, b: ColumnPickerGroupItem) => number; /** Define the aria label for the add column button */ addColumnAriaLabel: string; /** Define the aria label for the remove column button */ removeColumnAriaLabel: string; /** Define the aria label for the add all column button */ addAllColumnsAriaLabel: string; /** Define the aria label for the remove all column button */ removeAllColumnsAriaLabel: string; /** Emits when the selected items change or the order of the selected items change. */ selectedChange: EventEmitter<readonly (string | ColumnPickerGroupItem)[]>; /** Emits when the deselected items change. */ deselectedChange: EventEmitter<readonly (string | ColumnPickerGroupItem)[]>; /** The Nested tree control used for the deselect tree */ _treeControl: FlatTreeControl<ColumnPickerTreeNode>; /** A tree-friendly representation of the deselected data */ _treeData: ColumnPickerTreeNode[]; /** Data source observable bound to the tree control */ _treeDataSource: ArrayDataSource<ColumnPickerTreeNode>; /** The remaining selectable columns in the deselected list */ _availableDeselectedColumns: number; /** An array of items that are currently selected in the left column. */ _deselectedSelection: ReadonlyArray<string | ColumnPickerGroupItem>; /** An array of items that are currently selected in the right column. */ _selectedSelection: ReadonlyArray<string | ColumnPickerGroupItem>; /** Cache selection during reordering */ private _selection; /** Shallow copy of selection for reordering directive */ _storedSelection: Array<string | ColumnPickerGroupItem>; /** Get the elements for the selected items */ selectedElements: QueryList<ElementRef>; ngOnChanges(changes: SimpleChanges): void; /** Parse data into suitable format for the FlatTreeComponent to understand and initialize deselect tree */ private rebuildDeselectTree; /** A function that can be called to add columns. If no columns are passed to the function, the items that are selected in the left column will be added. */ addColumns(columns?: ReadonlyArray<string | ColumnPickerGroupItem>): void; /** A function that can be called to remove columns. If no columns are passed to the function, the items that are selected in the right column will be removed. */ removeColumns(columns?: ReadonlyArray<string | ColumnPickerGroupItem>): void; /** A function that can be called to add all columns. */ addAllColumns(): void; /** A function that can be called to remove all columns. */ removeAllColumns(): void; /** Ensure we don't select while dragging */ storeSelection(): void; /** Restore the selection once dragging ends */ restoreSelection(): void; /** Update when reordering has occurred */ onReorder(): void; /** Get an aria label for deselected list groups */ private getDefaultDeselectedGroupAriaLabel; /** Get an aria label for reorderable items */ private getDefaultSelectedAriaLabel; /** Get the announcement to read when a selected column is moved */ getColumnMovedAnnouncement(column: string, delta: number): string; /** Perform a reorder with the keyboard */ move(column: string | ColumnPickerGroupItem, delta: number): void; /** Provide a trackBy function for the reorderable options */ selectedTrackBy(index: number, column: string | ColumnPickerGroupItem): string; /** Swap two elements in the selected columns array */ private swap; /** Get the column name based on type */ _getColumnName(item: string | ColumnPickerGroupItem): string; /** Check if tree group has visible children */ _nodeHasChildren(_: number, node: ColumnPickerTreeNode): boolean; _nodeHasAvailableChildren(node: ColumnPickerTreeNode): boolean; /** Check to see if current item should display in deselect tree */ _shouldRenderNode(node: ColumnPickerTreeNode): boolean; /** Work backwards from the index of the current node to find the parent node */ private getTreeParent; /** Store the current count of nodes that are available for selection from the deselected list */ private updateAvailableDeselectedColumns; /** Update the order of the items when reordering has changed */ onReorderChange(model: string[]): void; /** Get the action context, ensuring that functions have a pre-bound context */ _getActionContext(): ColumnPickerActionsContext; /** Change the expanded state of a node */ _setNodeExpanded(node: ColumnPickerTreeNode, isExpanded: boolean): void; protected _isNodeSelected(name: any): boolean; static ɵfac: i0.ɵɵFactoryDeclaration<ColumnPickerComponent, never>; static ɵcmp: i0.ɵɵComponentDeclaration<ColumnPickerComponent, "ux-column-picker", never, { "id": { "alias": "id"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "locked": { "alias": "locked"; "required": false; }; "deselected": { "alias": "deselected"; "required": false; }; "selectedTitleTemplate": { "alias": "selectedTitleTemplate"; "required": false; }; "deselectedTitleTemplate": { "alias": "deselectedTitleTemplate"; "required": false; }; "deselectedTemplate": { "alias": "deselectedTemplate"; "required": false; }; "selectedTemplate": { "alias": "selectedTemplate"; "required": false; }; "lockedTemplate": { "alias": "lockedTemplate"; "required": false; }; "actionsTemplate": { "alias": "actionsTemplate"; "required": false; }; "selectedAriaLabel": { "alias": "selectedAriaLabel"; "required": false; }; "deselectedGroupAriaLabel": { "alias": "deselectedGroupAriaLabel"; "required": false; }; "columnMovedAnnouncement": { "alias": "columnMovedAnnouncement"; "required": false; }; "groups": { "alias": "groups"; "required": false; }; "sort": { "alias": "sort"; "required": false; }; "addColumnAriaLabel": { "alias": "addColumnAriaLabel"; "required": false; }; "removeColumnAriaLabel": { "alias": "removeColumnAriaLabel"; "required": false; }; "addAllColumnsAriaLabel": { "alias": "addAllColumnsAriaLabel"; "required": false; }; "removeAllColumnsAriaLabel": { "alias": "removeAllColumnsAriaLabel"; "required": false; }; }, { "selectedChange": "selectedChange"; "deselectedChange": "deselectedChange"; }, never, never, false, never>; } /** Define a context for the column actions template */ export interface ColumnPickerActionsContext { /** An array of items that are currently selected in the left column. */ addSelection: ReadonlyArray<string | ColumnPickerGroupItem>; /** An array of items that are currently selected in the right column. */ removeSelection: ReadonlyArray<string | ColumnPickerGroupItem>; /** A function that can be called to add columns. If no columns are passed to the function, the items that are selected in the left column will be added. */ addColumns(columns?: ReadonlyArray<string | ColumnPickerGroupItem>): void; /** A function that can be called to remove columns. If no columns are passed to the function, the items that are selected in the right column will be removed. */ removeColumns(columns?: ReadonlyArray<string | ColumnPickerGroupItem>): void; /** A function that can be called to add all columns. */ addAllColumns(): void; /** A function that can be called to remove all columns. */ removeAllColumns(): void; } /** An interface representing settings of groups defined in ColumnPickerGroupItem objects */ export interface ColumnPickerGroup { /** The name of the group this setting object is related to. */ name: string; /** Defines if this group will be expanded on load. This is an optional property. */ expanded?: boolean; }