import { SkyFilterStateService, SkyFilterState } from '@skyux/lists'; import { Observable, Subject, BehaviorSubject } from 'rxjs'; import * as i0 from '@angular/core'; import { OnDestroy, OnInit } from '@angular/core'; import { SkyBackToTopMessage } from '@skyux/layout'; import { SkyCheckboxChange } from '@skyux/forms'; import * as i1 from '@skyux/core'; import { SkyUIConfigService } from '@skyux/core'; import * as i2 from '@skyux/indicators'; import { SkyModalInstance } from '@skyux/modals'; interface SkyDataManagerFilterData { /** * Whether any filters are applied. */ filtersApplied?: boolean; /** * The filter data used in the data manager. You may use any filter model that works for * your data set and models. See the demo for an example. */ filters?: any; } /** * Sets the state of the filters. */ declare class SkyDataManagerFilterModalContext { /** * Sets the state of the filters. */ filterData: SkyDataManagerFilterData | undefined; } /** * Concrete implementation of SkyFilterStateService that manages filter state * for integration between list components and data managers. * @internal */ declare class SkyDataManagerFilterStateService implements SkyFilterStateService { #private; updateFilterState(data: SkyFilterState, sourceId: string): void; getFilterStateUpdates(sourceId: string): Observable; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵprov: i0.ɵɵInjectableDeclaration; } type SkyDataManagerDockType = 'none' | 'fill'; /** * The top-level data manager component. Provide `SkyDataManagerService` at this level. */ declare class SkyDataManagerComponent implements OnDestroy, OnInit { #private; get currentViewkeeperClasses(): string[]; set currentViewkeeperClasses(value: string[] | undefined); get isInitialized(): boolean; set isInitialized(value: boolean); /** * How the data manager docks to the page. Use `fill` to dock the data manager * to the container's size where the container is a `sky-page` component with * its `layout` set to `fit`, or where the container is another element with * a `relative` or `absolute` position and a fixed size. * `sky-data-manager-toolbar` will be docked to the top of all other content. * @default "none" */ readonly dock: i0.InputSignal; protected readonly dockClass: i0.Signal; backToTopController: Subject; backToTopOptions: { buttonHidden: boolean; }; ngOnInit(): void; ngOnDestroy(): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * A directive applied to a filtering component that enables integration with a data manager. */ declare class SkyDataManagerFilterControllerDirective implements OnInit { #private; ngOnInit(): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } interface SkyDataManagerSortOption { /** * Whether to apply the sort in descending order. * @required */ descending: boolean; /** * An ID for the sort option. * @required */ id: string; /** * The label to display in the sort dropdown. * @required */ label: string; /** * The data property to sort by. * @required */ propertyName: string; } /** * The data manager config contains settings that apply to the data manager across all views, * such as the sort and filter settings. */ interface SkyDataManagerConfig { /** * An untyped property that can track any config information relevant to a * data manager that existing options do not include. */ additionalOptions?: any; /** * The modal component to launch when the filter button is selected. The same filter options are * used for all views, but views can use `SkyDataViewConfig` to indicate whether to display * the filter button. The modal receives the `filterData` in the data state as context. * @deprecated Use [filter bar](https://developer.blackbaud.com/skyux/components/filter-bar) in a data manager toolbar instead. */ filterModalComponent?: any; /** * A descriptor for the data that the data manager manipulates. Use a plural term. The descriptor helps set the data manager's `aria-label` attributes for multiselect toolbars, search inputs, sort buttons, and filter buttons to provide text equivalents for screen readers [to support accessibility](https://developer.blackbaud.com/skyux/components/checkbox#accessibility). * For example, when the descriptor is "constituents," the search input's `aria-label` is "Search constituents." For more information about the `aria-label` attribute, see the [WAI-ARIA definition](https://www.w3.org/TR/wai-aria/#aria-label). */ listDescriptor?: string; /** * The sort options displayed in the sort dropdown. The same sort options are used for all views, * but views can use `SkyDataViewConfig` to indicate whether to display the sort button. */ sortOptions?: SkyDataManagerSortOption[]; } interface SkyDataViewColumnWidths { /** * A map of columnIds to column widths at the xs breakpoint size. */ xs: Record; /** * A map of columnIds to column widths at the sm or larger breakpoint size. */ sm: Record; } interface SkyDataViewStateOptions { /** * The ID of this view. */ viewId: string; /** * The IDs of the columns able to be displayed for column-based views. This property is required when utilizing a grid-based view, a column picker, or both. */ columnIds?: string[]; /** * The widths of columns in column-based views for xs and sm+ breakpoints. If using sticky settings, the widths a user sets will be persisted. */ columnWidths?: SkyDataViewColumnWidths; /** * The IDs of the columns displayed for column-based views. */ displayedColumnIds?: string[]; /** * An untyped property that tracks any view-specific state information * that is relevant to a data manager but that existing properties do not cover. */ additionalData?: any; } interface SkyDataManagerStateOptions { /** * The selected SkyDataManagerSortOption to apply. */ activeSortOption?: SkyDataManagerSortOption; /** * An untyped property that tracks any state information that's relevant to a data * manager but that the existing properties do not cover. */ additionalData?: any; /** * The state of the filters. */ filterData?: SkyDataManagerFilterData; /** * Whether to display only the selected rows or objects. The multiselect toolbar * uses this property. */ onlyShowSelected?: boolean; /** * The search text to apply. */ searchText?: string; /** * The currently selected rows or objects. */ selectedIds?: string[]; /** * The states of the individual views. */ views?: SkyDataViewStateOptions[]; } /** * Provides options for defining how data is displayed, such as which columns appear. */ declare class SkyDataViewState { /** * The IDs of the columns able to be displayed for column-based views. This property is required when utilizing a grid-based view, a column picker, or both. */ columnIds: string[]; /** * The widths of columns in column-based views for xs and sm+ breakpoints. If using sticky settings, the widths a user sets will be persisted. */ columnWidths: SkyDataViewColumnWidths; /** * The IDs of the columns displayed for column-based views. */ displayedColumnIds: string[]; /** * The ID of this view. */ viewId: string; /** * An untyped property that tracks any view-specific state information * that is relevant to a data manager but that existing properties do not cover. */ additionalData: any; constructor(data: SkyDataViewStateOptions); /** * Returns the `SkyDataViewStateOptions` for the current view. * @returns The `SkyDataViewStateOptions`. */ getViewStateOptions(): SkyDataViewStateOptions; } /** * Provides options that control which data to display. */ declare class SkyDataManagerState { /** * The selected SkyDataManagerSortOption to apply. */ activeSortOption: SkyDataManagerSortOption | undefined; /** * An untyped property that tracks any state information that's relevant to a data * manager but that the existing properties do not cover. */ additionalData: any; /** * The state of the filters. */ filterData: SkyDataManagerFilterData | undefined; /** * Whether to display only the selected rows or objects. The multiselect toolbar * uses this property. */ onlyShowSelected: boolean | undefined; /** * The search text to apply. */ searchText: string | undefined; /** * The currently selected rows or objects. */ selectedIds: string[] | undefined; /** * The states of the individual views. */ views: SkyDataViewState[]; constructor(data: SkyDataManagerStateOptions); /** * Returns the `SkyDataManagerStateOptions` for the data manager. * @returns The `SkyDataManagerStateOptions` for the data manager. */ getStateOptions(): SkyDataManagerStateOptions; /** * Returns the `SkyDataViewState` for the specified view. * @param viewId The ID for the view. * @returns The `SkyDataViewState` for the specified view. */ getViewStateById(viewId: string): SkyDataViewState | undefined; /** * Adds a `SkyDataViewState` to a view or updates an existing view. * @param viewId The ID for the view. * @param view The `SkyDataViewState` option to add or update. * @returns The state of the data manager for the specified view. */ addOrUpdateView(viewId: string, view: SkyDataViewState): SkyDataManagerState; } /** * The options to display in a view's column picker. */ interface SkyDataManagerColumnPickerOption { /** * Whether a column is always visible and is not listed as an option in the column * picker. For example, a context menu column may always be visible. */ alwaysDisplayed?: boolean; /** * The description text rendered beneath the column label in the column picker. */ description?: string; /** * Initially hide the column when it is added to the grid unless given in the view state's * `displayedColumnIds`. When enabled, this column will not be automatically added to a view's * state when this column is recognized as being missing from an initial data state or a data * state returned via the SKY UI config service. */ initialHide?: boolean; /** * The ID of the corresponding column. * @required */ id: string; /** * The label to display in the column picker. * @required */ label: string; } /** * These options specify the sorting strategy applied to columns when `columnPickerEnabled` is enabled. */ declare enum SkyDataManagerColumnPickerSortStrategy { /** * No sorting is applied to the columns. */ None = "none", /** * If `sortEnabled` is set to `true`, then the selected columns are displayed before the unselected columns. Unselected columns are sorted alphabetically. * If `sortEnabled` is set to `false`, then the columns are displayed in the order specified by `columnOptions`. */ SelectedThenAlphabetical = "selectedThenAlphabetical" } /** * The data view config contains settings that apply to the specific view, such as * column picker options and the buttons to display in the toolbar. */ interface SkyDataViewConfig { /** * An untyped property that can track any view config information relevant to a * data view that the existing options do not include. */ additionalOptions?: Record; /** * The column data to pass to the column picker. Columns that are always displayed should be * passed in addition to the optional columns. See SkyDataManagerColumnPickerOption. */ columnOptions?: SkyDataManagerColumnPickerOption[]; /** * Whether to display the column picker button for this view. */ columnPickerEnabled?: boolean; /** * The strategy used to sort the options in the column picker. If no strategy is provided the columns will be sorted * by selected then alphabetical. */ columnPickerSortStrategy?: SkyDataManagerColumnPickerSortStrategy; /** * Whether to display the filter button for this view. * @deprecated Use [filter bar](https://developer.blackbaud.com/skyux/components/filter-bar) in a data manager toolbar instead. */ filterButtonEnabled?: boolean; /** * The name of the Blackbaud SVG icon to display for this view in the view switcher. * Required if you have more than one view. */ iconName?: string; /** * The unique ID for this view. */ id: string; /** * Whether to display the multiselect toolbar for this view. */ multiselectToolbarEnabled?: boolean; /** * The name of the view. This is used in the ARIA label for the view switcher. */ name: string; /** * The function called when a user selects the "Clear all" button on the multi-select toolbar. * Update your displayed data to indicate it is not selected in this function. */ onClearAllClick?: () => void; /** * The function called when a user selects the "Select all" button on the multi-select toolbar. * Update your displayed data to indicate it is selected in this function. */ onSelectAllClick?: () => void; /** * Whether to display the search box for this view. */ searchEnabled?: boolean; /** * Placeholder text to display in the search input until users enter search criteria. * See the [search component](https://developer.blackbaud.com/skyux/components/search) for the default value. */ searchPlaceholderText?: string; /** * Sets the `expandMode` property on the search box for this view. * See the [search component](https://developer.blackbaud.com/skyux/components/search) for valid options and the default value. */ searchExpandMode?: string; /** * Highlights text that matches the search text using the text highlight directive. */ searchHighlightEnabled?: boolean; /** * Whether to include the "Filter" text on the displayed filter button for this view. * If it is not set, no text appears. * @deprecated Use [filter bar](https://developer.blackbaud.com/skyux/components/filter-bar) in a data manager toolbar instead. */ showFilterButtonText?: boolean; /** * Whether to include the "Sort" text on the displayed sort button for this view. * If it is not set, no text appears. */ showSortButtonText?: boolean; /** * Whether to display the sort button in this view. */ sortEnabled?: boolean; } /** * Renders a `sky-toolbar` with the contents specified by the active view's `SkyDataViewConfig` * and the `SkyDataManagerToolbarLeftItemComponent`, `SkyDataManagerToolbarRightItemComponent`, * and `SkyDataManagerToolbarSectionComponent` wrappers. */ declare class SkyDataManagerToolbarComponent implements OnDestroy, OnInit { #private; get activeView(): SkyDataViewConfig | undefined; set activeView(value: SkyDataViewConfig | undefined); get dataManagerConfig(): SkyDataManagerConfig | undefined; set dataManagerConfig(value: SkyDataManagerConfig | undefined); get dataState(): SkyDataManagerState | undefined; set dataState(value: SkyDataManagerState | undefined); get views(): SkyDataViewConfig[]; set views(value: SkyDataViewConfig[]); onlyShowSelected: boolean | undefined; ngOnInit(): void; ngOnDestroy(): void; sortSelected(sortOption: SkyDataManagerSortOption): void; onViewChange(viewId: string): void; searchApplied(text: string): void; filterButtonClicked(): void; openColumnPicker(): void; selectAll(): void; clearAll(): void; onOnlyShowSelected(event: SkyCheckboxChange): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * A wrapper for an item to be rendered in `SkyDataManagerToolbarComponent`. The contents are * rendered after the standard toolbar actions and before the search box. Each item should be * wrapped in its own `sky-data-manager-toolbar-left-item`. The items render in the order they are in in the template. */ declare class SkyDataManagerToolbarLeftItemComponent { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * A wrapper for an item to be rendered in `SkyDataManagerToolbarComponent`. The contents are * rendered as the first items in the toolbar and should be standard actions. Each item should be * wrapped in its own `sky-data-manager-toolbar-primary-item`. The items render in the order they are in in the template. */ declare class SkyDataManagerToolbarPrimaryItemComponent { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * A wrapper for an item to be rendered in `SkyDataManagerToolbarComponent`. The contents are * rendered in `sky-toolbar-view-actions` on the right side of the toolbar and before the view * switcher icons (if present). Each item should be wrapped in its own * `sky-data-manager-toolbar-right-item`. The items render in the order they are in in the template. */ declare class SkyDataManagerToolbarRightItemComponent { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * A wrapper for items to be rendered in `SkyDataManagerToolbarComponent`. The contents are * rendered in an additional toolbar row beneath the primary toolbar and above the multiselect * toolbar (if present). */ declare class SkyDataManagerToolbarSectionComponent { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * A data view is rendered within a data manager component. * It can subscribe to data state changes from `SkyDataManagerService` and apply the filters, * search text, and more to the data it displays. */ declare class SkyDataViewComponent implements OnDestroy, OnInit { #private; /** * The configuration for the view. See the `SkyDataViewConfig` interface. * @required */ viewId: string | undefined; get dataViewId(): string | undefined; get isActive(): boolean; set isActive(value: boolean); get textHighlight(): string | undefined; set textHighlight(value: string | undefined); ngOnInit(): void; ngOnDestroy(): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } declare class SkyDataManagerModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } interface SkyDataManagerInitArgs { /** * The initial active view's ID. * @required */ activeViewId: string; /** * The initial configuration for the data manager. See the SkyDataManagerConfig interface. * @required */ dataManagerConfig: SkyDataManagerConfig; /** * The data state used if no settings key is provided or if no data state is saved in the SKY UI * config service for the user. See the SkyDataManagerState interface. * @required */ defaultDataState: SkyDataManagerState; /** * The unique key for the UI Config Service to retrieve stored settings from a database. * The UI Config Service saves configuration settings for users to preserve the current data state. For more information about the UI Config Service, see [the sticky settings documentation](https://developer.blackbaud.com/skyux/learn/develop/sticky-settings). */ settingsKey?: string; } /** * Optional arguments to pass to `getDataStateUpdates`. * Provide either a list of properties to filter on OR a custom comparator. */ interface SkyDataManagerStateUpdateFilterArgs { /** * A list of `SkyDataManagerState` properties to compare to test if the new `SkyDataManagerState` is distinct from the previous. * This allows you to subscribe to changes for only the provided properties. */ properties?: string[]; /** * A comparator function called to test if the new `SkyDataManagerState` is distinct from the previous. */ comparator?: (state1: SkyDataManagerState, state2: SkyDataManagerState) => boolean; } /** * Contains summary details of the data displayed within the data manager. */ interface SkyDataManagerSummary { /** * The total number of items in the data set. */ totalItems: number; /** * The total number of items that match the search and filter criteria. */ itemsMatching: number; } /** * The data manager service provides ways for data views, toolbar items, and more to stay up to date * with the active view ID, data manager config, registered views and their configs, and data state. * There are methods to get current values, update values, and get subscriptions to the changing values. * * Provide this service at the component level for each instance of a data manager. Do not * provide it at the module level or in `app-extras`. This allows multiple data * managers to be used and self-contained. */ declare class SkyDataManagerService implements OnDestroy { #private; /** * @internal */ viewkeeperClasses: BehaviorSubject>; constructor(uiConfigService: SkyUIConfigService); ngOnDestroy(): void; /** * Initializes the data manager with the given settings and sets `isInitialized` to `true`. * This must be called for the data manager to render. * @param args The initial active view ID, data manager config, and state to use for the data manager. * If a settings key is provided, it checks for a saved data state in the SKY UI config service before using the default data state * and saves any state changes to the service. */ initDataManager(args: SkyDataManagerInitArgs): void; /** * Initializes a view within the data manager. This must be called for each view for the views to appear within the data manager. * @param viewConfig The SkyDataViewConfig settings for the view being registered. */ initDataView(viewConfig: SkyDataViewConfig): void; /** * Returns an observable of data state changes that views and other data manager entities can subscribe to. * It excludes updates originating from the provided source. This allows subscribers to only respond to * changes they did not create and helps prevent infinite loops of updates and responses. * @param sourceId The ID of the entity subscribing to data state updates. This can be any value you choose * but should be unique within the data manager instance and should also be used when that entity updates the state. */ getDataStateUpdates(sourceId: string, updateFilter?: SkyDataManagerStateUpdateFilterArgs): Observable; /** * Updates the data state and emits a new value to entities subscribed to data state changes. * @param state The new `SkyDataManagerState` value. * @param sourceId The ID of the entity updating the state. This can be any value you choose, * but should be unique within the data manager instance and should also be used when that entity * subscribes to state changes from `getDataStateUpdates`. */ updateDataState(state: SkyDataManagerState, sourceId: string): void; /** * Returns an observable of data summary changes that views and other data manager entities can subscribe to. * It excludes updates originating from the provided source. This allows subscribers to only respond to * changes they did not create and helps prevent infinite loops of updates and responses. * @param sourceId The ID of the entity subscribing to data summary updates. This can be any value you choose * but should be unique within the data manager instance and should also be used when that entity updates the summary. */ getDataSummaryUpdates(sourceId: string): Observable; /** * Updates the data summary and emits a new value to entities subscribed to data summary changes. * @param summary The new `SkyDataManagerSummary` value. * @param sourceId The ID of the entity updating the summary. This can be any value you choose, * but should be unique within the data manager instance and should also be used when that entity * subscribes to summary changes from `getDataSummaryUpdates`. */ updateDataSummary(summary: SkyDataManagerSummary, sourceId: string): void; /** * Returns the current `SkyDataManagerConfig`. */ getCurrentDataManagerConfig(): SkyDataManagerConfig; /** * Returns an observable of data manager config changes that views and other data manager entities can subscribe to. */ getDataManagerConfigUpdates(): Observable; /** * Updates the data manager config and emits a new value to entities subscribed to data config changes. * @param value The new `SkyDataManagerConfig` value. */ updateDataManagerConfig(value: SkyDataManagerConfig): void; /** * Returns an observable of data view config changes that views and other data manager entities can subscribe to. */ getDataViewsUpdates(): Observable; /** * Returns an observable of the active view ID that views and other data manager entities can subscribe to. */ getActiveViewIdUpdates(): Observable; /** * Updates the active view ID. The data manager changes the displayed view. * @param id The new active view ID. */ updateActiveViewId(id: string): void; /** * Returns the `SkyDataViewConfig` for the given view ID. * @param viewId The ID of the view config to get. */ getViewById(viewId: string): SkyDataViewConfig | undefined; /** * Updates the given view config. The registered view with the same ID is updated to the * provided config, so include all properties regardless of whether they changed. If the * view was not initialized already, no update happens. * @param view The new `SkyDataViewConfig` containing all properties. */ updateViewConfig(view: SkyDataViewConfig): void; /** * @internal */ setViewkeeperClasses(viewId: string, classes: string[]): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵprov: i0.ɵɵInjectableDeclaration; } declare class SkyDataManagerColumnPickerContext { columnOptions: SkyDataManagerColumnPickerOption[]; displayedColumnIds: string[]; columnPickerSortStrategy: SkyDataManagerColumnPickerSortStrategy; constructor(columnOptions: SkyDataManagerColumnPickerOption[], displayedColumnIds: string[], columnPickerSortStrategy?: SkyDataManagerColumnPickerSortStrategy); } /** * @internal */ interface Column extends SkyDataManagerColumnPickerOption { isSelected: boolean; } /** * @internal */ declare class SkyDataManagerColumnPickerComponent implements OnDestroy, OnInit { #private; get dataState(): SkyDataManagerState; set dataState(value: SkyDataManagerState); columnData: Column[]; displayedColumnData: Column[]; viewConfig: SkyDataViewConfig; isAnyDisplayedColumnSelected: boolean; readonly context: SkyDataManagerColumnPickerContext; protected readonly dataManagerService: SkyDataManagerService; protected readonly instance: SkyModalInstance; ngOnInit(): void; ngOnDestroy(): void; updateData(): void; searchColumns(columns: Column[]): Column[]; selectAll(): void; clearAll(): void; onIsSelectedChange(): void; cancelChanges(): void; isSelected(id: string): boolean; applyChanges(): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } export { SkyDataManagerColumnPickerSortStrategy, SkyDataManagerFilterModalContext, SkyDataManagerFilterStateService, SkyDataManagerModule, SkyDataManagerService, SkyDataManagerState, SkyDataViewState, SkyDataManagerColumnPickerComponent as λ1, SkyDataManagerComponent as λ2, SkyDataManagerToolbarLeftItemComponent as λ3, SkyDataManagerToolbarPrimaryItemComponent as λ4, SkyDataManagerToolbarRightItemComponent as λ5, SkyDataManagerToolbarSectionComponent as λ6, SkyDataManagerToolbarComponent as λ7, SkyDataViewComponent as λ8, SkyDataManagerFilterControllerDirective as λ9 }; export type { SkyDataManagerColumnPickerOption, SkyDataManagerConfig, SkyDataManagerDockType, SkyDataManagerFilterData, SkyDataManagerInitArgs, SkyDataManagerSortOption, SkyDataManagerStateOptions, SkyDataManagerStateUpdateFilterArgs, SkyDataManagerSummary, SkyDataViewColumnWidths, SkyDataViewConfig, SkyDataViewStateOptions };