import * as i0 from '@angular/core'; import { InjectionToken, AfterViewInit, AfterViewChecked, OnDestroy, OnChanges, ElementRef, Renderer2, SimpleChanges, EventEmitter, TemplateRef, ApplicationRef, NgZone, Type, ViewContainerRef, OnInit, ChangeDetectorRef, ComponentRef, Injector, DoCheck, IterableDiffers, EmbeddedViewRef, IterableDiffer, TrackByFunction, IterableChanges, QueryList, AfterContentInit, PipeTransform, DestroyRef, AfterContentChecked, EnvironmentInjector, SimpleChange } from '@angular/core'; import * as _angular_forms from '@angular/forms'; import { FormGroup, ValidationErrors, FormControl, NgModel, NgControl, FormControlName, ControlValueAccessor, Validator, AbstractControl, FormGroupDirective, RequiredValidator, MinValidator, MaxValidator, EmailValidator, MinLengthValidator, MaxLengthValidator, PatternValidator } from '@angular/forms'; import * as _angular_animations from '@angular/animations'; import { AnimationReferenceMetadata, AnimationBuilder } from '@angular/animations'; import * as rxjs from 'rxjs'; import { BehaviorSubject, Subject, Observable, Subscription } from 'rxjs'; import { NgForOfContext } from '@angular/common'; import { DomSanitizer, SafeHtml, EventManager, HammerGestureConfig } from '@angular/platform-browser'; import { HttpClient } from '@angular/common/http'; import * as igniteui_angular from 'igniteui-angular'; import { IMXIcon } from '@igniteui/material-icons-extended'; /** * Common interface for Components with show and collapse functionality */ interface IToggleView { element: any; open(...args: any[]): any; close(...args: any[]): any; toggle(...args: any[]): any; } /** * Common service to be injected between components where those implementing common * ToggleView interface can register and toggle directives can call their methods. * TODO: Track currently active? Events? */ declare class IgxNavigationService { private navs; constructor(); add(id: string, navItem: IToggleView): void; remove(id: string): void; get(id: string): IToggleView; toggle(id: string, ...args: any[]): any; open(id: string, ...args: any[]): any; close(id: string, ...args: any[]): any; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵprov: i0.ɵɵInjectableDeclaration; } /** * Directive that can toggle targets through provided NavigationService. * * Usage: * ``` * * ``` * Where the `ID` matches the ID of compatible `IToggleView` component. */ declare class IgxNavigationToggleDirective { private target; state: IgxNavigationService; constructor(nav: IgxNavigationService); toggleNavigationDrawer(): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * Directive that can close targets through provided NavigationService. * * Usage: * ``` * * ``` * Where the `ID` matches the ID of compatible `IToggleView` component. */ declare class IgxNavigationCloseDirective { private target; state: IgxNavigationService; constructor(nav: IgxNavigationService); closeNavigationDrawer(): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } declare class ThemeToken { private t?; private document; subject: BehaviorSubject; constructor(t?: IgxTheme); onChange(callback: (theme: IgxTheme) => void): rxjs.Subscription; set(theme: IgxTheme): void; get theme(): IgxTheme; get preferToken(): boolean; } declare const THEME_TOKEN: InjectionToken; declare const Theme: { readonly Material: "material"; readonly Fluent: "fluent"; readonly Bootstrap: "bootstrap"; readonly IndigoDesign: "indigo"; }; /** * Determines the component theme. */ type IgxTheme = (typeof Theme)[keyof typeof Theme]; /** * Utility service taking care of various utility functions such as * detecting browser features, general cross browser DOM manipulation, etc. * * @hidden @internal */ declare class PlatformUtil { private platformId; isBrowser: boolean; isIOS: boolean; isSafari: boolean; isFirefox: boolean; isEdge: boolean; isChromium: boolean; browserVersion: number; /** @hidden @internal */ isElements: boolean; KEYMAP: { readonly ENTER: "Enter"; readonly SPACE: " "; readonly ESCAPE: "Escape"; readonly ARROW_DOWN: "ArrowDown"; readonly ARROW_UP: "ArrowUp"; readonly ARROW_LEFT: "ArrowLeft"; readonly ARROW_RIGHT: "ArrowRight"; readonly END: "End"; readonly HOME: "Home"; readonly PAGE_DOWN: "PageDown"; readonly PAGE_UP: "PageUp"; readonly F2: "F2"; readonly TAB: "Tab"; readonly SEMICOLON: ";"; readonly DELETE: "Delete"; readonly BACKSPACE: "Backspace"; readonly CONTROL: "Control"; readonly X: "x"; readonly Y: "y"; readonly Z: "z"; }; constructor(platformId: any); /** * @hidden @internal * Returns the actual size of the node content, using Range * ```typescript * let range = document.createRange(); * let column = this.grid.columnList.filter(c => c.field === 'ID')[0]; * * let size = getNodeSizeViaRange(range, column.cells[0].nativeElement); * * @remarks * The last parameter is useful when the size of the element to measure is modified by a * parent element that has explicit size. In such cases the calculated size is never lower * and the function may instead remove the parent size while measuring to get the correct value. * ``` */ getNodeSizeViaRange(range: Range, node: HTMLElement, sizeHoldingNode?: HTMLElement): number; /** * Returns true if the current keyboard event is an activation key (Enter/Space bar) * * @hidden * @internal * * @memberof PlatformUtil */ isActivationKey(event: KeyboardEvent): boolean; /** * Returns true if the current keyboard event is a combination that closes the filtering UI of the grid. (Escape/Ctrl+Shift+L) * * @hidden * @internal * @param event * @memberof PlatformUtil */ isFilteringKeyCombo(event: KeyboardEvent): boolean; /** * @hidden @internal */ isLeftClick(event: PointerEvent | MouseEvent): boolean; /** * @hidden @internal */ isNavigationKey(key: string): boolean; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵprov: i0.ɵɵInjectableDeclaration; } interface CancelableEventArgs { /** * Provides the ability to cancel the event. */ cancel: boolean; } interface IBaseEventArgs { /** * Provides reference to the owner component. */ owner?: any; } interface CancelableBrowserEventArgs extends CancelableEventArgs { /** Browser event */ event?: Event; } interface IBaseCancelableBrowserEventArgs extends CancelableBrowserEventArgs, IBaseEventArgs { } interface IBaseCancelableEventArgs extends CancelableEventArgs, IBaseEventArgs { } /** * Collection re-created w/ the built in track by identity will always log * warning even for valid cases of recalculating all collection items. * See https://github.com/angular/angular/blob/55581b4181639568fb496e91055142a1b489e988/packages/core/src/render3/instructions/control_flow.ts#L393-L409 * Current solution explicit track function doing the same as suggested in: * https://github.com/angular/angular/issues/56471#issuecomment-2180315803 * This should be used with moderation and when necessary. * @internal */ declare function trackByIdentity(item: T): T; interface IBaseSearchInfo { searchText: string; caseSensitive: boolean; exactMatch: boolean; matchCount: number; content: string; } /** * An interface describing information for the active highlight. */ interface IActiveHighlightInfo { /** * The row of the highlight. */ row?: any; /** * The column of the highlight. */ column?: any; /** * The index of the highlight. */ index: number; /** * Additional, custom checks to perform prior an element highlighting. */ metadata?: Map; } declare class IgxTextHighlightDirective implements AfterViewInit, AfterViewChecked, OnDestroy, OnChanges { private element; private service; private renderer; /** * Determines the `CSS` class of the highlight elements. * This allows the developer to provide custom `CSS` to customize the highlight. * * ```html *
*
* ``` */ cssClass: string; /** * Determines the `CSS` class of the active highlight element. * This allows the developer to provide custom `CSS` to customize the highlight. * * ```html *
*
* ``` */ activeCssClass: string; /** * @hidden */ containerClass: string; /** * Identifies the highlight within a unique group. * This allows it to have several different highlight groups, * with each of them having their own active highlight. * * ```html *
*
* ``` */ groupName: string; /** * The underlying value of the element that will be highlighted. * * ```typescript * // get * const elementValue = this.textHighlight.value; * ``` * * ```html * *
*
* ``` */ get value(): any; set value(value: any); /** * The identifier of the row on which the directive is currently on. * * ```html *
*
* ``` */ row: any; /** * The identifier of the column on which the directive is currently on. * * ```html *
*
* ``` */ column: any; /** * A map that contains all additional conditions, that you need to activate a highlighted * element. To activate the condition, you will have to add a new metadata key to * the `metadata` property of the IActiveHighlightInfo interface. * * @example * ```typescript * // Set a property, which would disable the highlight for a given element on a certain condition * const metadata = new Map(); * metadata.set('highlightElement', false); * ``` * ```html *
*
* ``` */ metadata: Map; /** * @hidden */ get lastSearchInfo(): IBaseSearchInfo; /** * @hidden */ parentElement: any; private _container; private destroy$; private _value; private _lastSearchInfo; private _div; private _observer; private _nodeWasRemoved; private _forceEvaluation; private _activeElementIndex; private _valueChanged; private _defaultCssClass; private _defaultActiveCssClass; constructor(element: ElementRef, service: IgxTextHighlightService, renderer: Renderer2); /** * @hidden */ ngOnDestroy(): void; /** * @hidden */ ngOnChanges(changes: SimpleChanges): void; /** * @hidden */ ngAfterViewInit(): void; /** * @hidden */ ngAfterViewChecked(): void; /** * Clears the existing highlight and highlights the searched text. * Returns how many times the element contains the searched text. */ highlight(text: string, caseSensitive?: boolean, exactMatch?: boolean): number; /** * Clears any existing highlight. */ clearHighlight(): void; /** * Activates the highlight if it is on the currently active row and column. */ activateIfNecessary(): void; /** * Attaches a MutationObserver to the parentElement and watches for when the container element is removed/readded to the DOM. * Should be used only when necessary as using many observers may lead to performance degradation. */ observe(): void; private activate; private deactivate; private clearChildElements; private getHighlightedText; private appendText; private appendSpan; private appendDiv; private searchNeedsEvaluation; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } declare class IgxTextHighlightService { highlightGroupsMap: Map; onActiveElementChanged: EventEmitter; constructor(); /** * Activates the highlight at a given index. * (if such index exists) */ setActiveHighlight(groupName: string, highlight: IActiveHighlightInfo): void; /** * Clears any existing highlight. */ clearActiveHighlight(groupName: any): void; /** * Destroys a highlight group. */ destroyGroup(groupName: string): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵprov: i0.ɵɵInjectableDeclaration; } /** * Enumeration representing different filter modes for grid filtering. * - quickFilter: Default mode with a filter row UI between the column headers and the first row of records. * - excelStyleFilter: Filter mode where an Excel-style filter is used. */ declare const FilterMode: { readonly quickFilter: "quickFilter"; readonly excelStyleFilter: "excelStyleFilter"; }; type FilterMode = (typeof FilterMode)[keyof typeof FilterMode]; /** * Enumeration representing the position of grid summary rows. * - top: Default value; Summary rows are displayed at the top of the grid. * - bottom: Summary rows are displayed at the bottom of the grid. */ declare const GridSummaryPosition: { readonly top: "top"; readonly bottom: "bottom"; }; type GridSummaryPosition = (typeof GridSummaryPosition)[keyof typeof GridSummaryPosition]; /** * Enumeration representing different calculation modes for grid summaries. * - rootLevelOnly: Summaries are calculated only for the root level. * - childLevelsOnly: Summaries are calculated only for child levels. * - rootAndChildLevels: Default value; Summaries are calculated for both root and child levels. */ declare const GridSummaryCalculationMode: { readonly rootLevelOnly: "rootLevelOnly"; readonly childLevelsOnly: "childLevelsOnly"; readonly rootAndChildLevels: "rootAndChildLevels"; }; type GridSummaryCalculationMode = (typeof GridSummaryCalculationMode)[keyof typeof GridSummaryCalculationMode]; /** * Type representing the triggers for grid cell validation. * - 'change': Validation is triggered when the cell value changes. * - 'blur': Validation is triggered when the cell loses focus. */ type GridValidationTrigger = 'change' | 'blur'; /** * Type representing the type of the target object (elements of the grid) for keydown (fired when a key is pressed) events in the grid. * - 'dataCell': Represents a data cell within the grid. It contains and displays individual data values * - 'summaryCell': Summary cells display aggregated/summarized data at the bottom of the grid. They provide insights like total record count, min/max values, etc. * - 'groupRow': Group row within the grid. Group rows are used to group related data rows by columns. Contains the related group expression, level, sub-records and group value. * - 'hierarchicalRow': Hierarchical rows are similar to group rows, but represent a more complex hierarchical structure, allowing for nested grouping * - 'headerCell': Represents a header cell within the grid. Header cells are used to display column headers, providing context and labels for the columns. * - 'masterDetailRow': Represents a grid row that can be expanded in order to show additional information */ type GridKeydownTargetType = 'dataCell' | 'summaryCell' | 'groupRow' | 'hierarchicalRow' | 'headerCell' | 'masterDetailRow'; /** * Enumeration representing different selection modes for the grid elements if can be selected. * - 'none': No selection is allowed. Default row and column selection mode. * - 'single': Only one element can be selected at a time. Selecting a new one will deselect the previously selected one. * - 'multiple': Default cell selection mode. More than one element can be selected at a time. * - 'multipleCascade': Similar to multiple selection. It is used in hierarchical or tree grids. Allows selection not only to an individual item but also all its related or nested items in a single action */ declare const GridSelectionMode: { readonly none: "none"; readonly single: "single"; readonly multiple: "multiple"; readonly multipleCascade: "multipleCascade"; }; type GridSelectionMode = (typeof GridSelectionMode)[keyof typeof GridSelectionMode]; /** Enumeration representing different column display order options. */ declare const ColumnDisplayOrder: { readonly Alphabetical: "Alphabetical"; readonly DisplayOrder: "DisplayOrder"; }; type ColumnDisplayOrder = (typeof ColumnDisplayOrder)[keyof typeof ColumnDisplayOrder]; /** * Enumeration representing the possible positions for pinning columns. * - Start: Columns are pinned to the start of the grid. * - End: Columns are pinned to the end of the grid. */ declare enum ColumnPinningPosition { Start = 0, End = 1 } /** * Enumeration representing the possible positions for pinning rows. * - Top: Rows are pinned to the top of the grid. * - Bottom: Rows are pinned to the bottom of the grid. */ declare enum RowPinningPosition { Top = 0, Bottom = 1 } /** * Enumeration representing different paging modes for the grid. * - Local: The grid will use local data to extract pages during paging. * - Remote: The grid will expect pages to be delivered from a remote location and will only raise events during paging interactions. */ declare const GridPagingMode: { readonly Local: "local"; readonly Remote: "remote"; }; type GridPagingMode = (typeof GridPagingMode)[keyof typeof GridPagingMode]; /** * @hidden @internal * * Enumeration representing the possible predefined size options of the grid. * - Small: This is the smallest size with 32px row height. Left and Right paddings are 12px. Minimal column width is 56px. * - Medium: This is the middle size with 40px row height. Left and Right paddings are 16px. Minimal column width is 64px. * - Large: this is the default Grid size with the lowest intense and row height equal to 50px. Left and Right paddings are 24px. Minimal column width is 80px. */ declare const Size$1: { readonly Small: "1"; readonly Medium: "2"; readonly Large: "3"; }; type Size$1 = (typeof Size$1)[keyof typeof Size$1]; /** * Provides base filtering operations * Implementations should be Singleton * * @export */ declare class IgxFilteringOperand { protected static _instance: IgxFilteringOperand; operations: IFilteringOperation[]; constructor(); static instance(): IgxFilteringOperand; /** * Returns an array of names of the conditions which are visible in the filtering UI */ conditionList(): string[]; /** * Returns an array of names of the conditions which are visible in the UI, including "In" and "Not In", allowing the creation of sub-queries. * @hidden @internal */ extendedConditionList(): string[]; /** * Returns an instance of the condition with the specified name. * * @param name The name of the condition. */ condition(name: string): IFilteringOperation; /** * Adds a new condition to the filtering operations. * * @param operation The filtering operation. */ append(operation: IFilteringOperation): void; protected findValueInSet(target: any, searchVal: Set): boolean; } /** * Provides filtering operations for booleans * * @export */ declare class IgxBooleanFilteringOperand extends IgxFilteringOperand { protected constructor(); } /** * @internal * @hidden */ declare class IgxBaseDateTimeFilteringOperand extends IgxFilteringOperand { protected constructor(); /** * Splits a Date object into parts * * @memberof IgxDateFilteringOperand */ static getDateParts(date: Date, dateFormat?: string): IDateParts; protected findValueInSet(target: any, searchVal: Set): boolean; protected validateInputData(target: Date): void; } /** * Provides filtering operations for Dates * * @export */ declare class IgxDateFilteringOperand extends IgxBaseDateTimeFilteringOperand { protected constructor(); protected findValueInSet(target: any, searchVal: Set): boolean; } declare class IgxDateTimeFilteringOperand extends IgxBaseDateTimeFilteringOperand { protected constructor(); } declare class IgxTimeFilteringOperand extends IgxBaseDateTimeFilteringOperand { protected constructor(); protected findValueInSet(target: any, searchVal: Set): boolean; } /** * Provides filtering operations for numbers * * @export */ declare class IgxNumberFilteringOperand extends IgxFilteringOperand { protected constructor(); } /** * Provides filtering operations for strings * * @export */ declare class IgxStringFilteringOperand extends IgxFilteringOperand { protected constructor(); /** * Applies case sensitivity on strings if provided * * @memberof IgxStringFilteringOperand */ static applyIgnoreCase(a: string, ignoreCase: boolean): string; } /** * Interface describing filtering operations * * @export */ interface IFilteringOperation { name: string; isUnary: boolean; isNestedQuery?: boolean; iconName: string; hidden?: boolean; logic?: null | ((value: any, searchVal?: any, ignoreCase?: boolean) => boolean); } /** * Interface describing Date object in parts * * @export */ interface IDateParts { year: number; month: number; day: number; hours: number; minutes: number; seconds: number; milliseconds: number; } declare enum FilteringLogic { And = 0, Or = 1 } /** * Represents filtering expressions. */ declare interface IFilteringExpression { fieldName: string; condition?: IFilteringOperation | null; conditionName?: string | null; searchVal?: any; searchTree?: IExpressionTree | null; ignoreCase?: boolean; } declare enum FilteringExpressionsTreeType { Regular = 0, Advanced = 1 } declare interface IExpressionTree { filteringOperands: (IExpressionTree | IFilteringExpression)[]; operator: FilteringLogic; fieldName?: string | null; entity?: string | null; returnFields?: string[] | null; } declare interface IFilteringExpressionsTree extends IBaseEventArgs, IExpressionTree { filteringOperands: (IFilteringExpressionsTree | IFilteringExpression)[]; type?: FilteringExpressionsTreeType; /** * @deprecated in version 18.2.0. Use `ExpressionsTreeUtil.find` instead. */ find?: (fieldName: string) => IFilteringExpressionsTree | IFilteringExpression; /** * @deprecated in version 18.2.0. Use `ExpressionsTreeUtil.findIndex` instead. */ findIndex?: (fieldName: string) => number; } declare class FilteringExpressionsTree implements IFilteringExpressionsTree { /** * Sets/gets the filtering operands. * ```typescript * const gridExpressionsTree = new FilteringExpressionsTree(FilteringLogic.And); * const expression = [ * { * condition: IgxStringFilteringOperand.instance().condition('contains'), * fieldName: 'Column Field', * searchVal: 'Value', * ignoreCase: false * }]; * gridExpressionsTree.filteringOperands.push(expression); * this.grid.filteringExpressionsTree = gridExpressionsTree; * ``` * ```typescript * let filteringOperands = gridExpressionsTree.filteringOperands; * ``` * * @memberof FilteringExpressionsTree */ filteringOperands: (IFilteringExpressionsTree | IFilteringExpression)[]; /** * Sets/gets the operator. * ```typescript * gridExpressionsTree.operator = FilteringLogic.And; * ``` * ```typescript * let operator = gridExpressionsTree.operator; * ``` * * @memberof FilteringExpressionsTree */ operator: FilteringLogic; /** * Sets/gets the field name of the column where the filtering expression is placed. * ```typescript * gridExpressionTree.fieldName = 'Column Field'; * ``` * ```typescript * let columnField = expressionTree.fieldName; * ``` * * @memberof FilteringExpressionsTree */ fieldName?: string; /** * Sets/gets the type of the filtering expressions tree. * ```typescript * gridExpressionTree.type = FilteringExpressionsTree.Advanced; * ``` * ```typescript * let type = expressionTree.type; * ``` * * @memberof FilteringExpressionsTree */ type?: FilteringExpressionsTreeType; /** * Sets/gets the entity. * ```typescript * gridExpressionsTree.entity = 'Entity A'; * ``` * ```typescript * let entity = gridExpressionsTree.entity; * ``` * * @memberof FilteringExpressionsTree */ entity?: string; /** * Sets/gets the return fields. * ```typescript * gridExpressionsTree.returnFields = ['Column Field 1', 'Column Field 2']; * ``` * ```typescript * let returnFields = gridExpressionsTree.returnFields; * ``` * * @memberof FilteringExpressionsTree */ returnFields?: string[]; constructor(operator: FilteringLogic, fieldName?: string, entity?: string, returnFields?: string[]); /** * Checks if filtering expressions tree is empty. * * @param expressionTree filtering expressions tree. */ static empty(expressionTree: IFilteringExpressionsTree): boolean; /** * Returns the filtering expression for a column with the provided fieldName. * ```typescript * let filteringExpression = gridExpressionTree.find('Column Field'); * ``` * * @memberof FilteringExpressionsTree * @deprecated in version 18.2.0. Use `ExpressionsTreeUtil.find` instead. */ find(fieldName: string): IFilteringExpressionsTree | IFilteringExpression; /** * Returns the index of the filtering expression for a column with the provided fieldName. * ```typescript * let filteringExpressionIndex = gridExpressionTree.findIndex('Column Field'); * ``` * * @memberof FilteringExpressionsTree * @deprecated in version 18.2.0. Use `ExpressionsTreeUtil.findIndex` instead. */ findIndex(fieldName: string): number; } type KeyOfOrString = K extends keyof T ? K : string; declare enum SortingDirection { None = 0, Asc = 1, Desc = 2 } interface ISortingExpression extends IBaseEventArgs { fieldName: KeyOfOrString & string; dir: SortingDirection; ignoreCase?: boolean; strategy?: ISortingStrategy; } interface ISortingStrategy { sort: (data: any[], fieldName: string, dir: SortingDirection, ignoreCase: boolean, valueResolver: (obj: any, key: string, isDate?: boolean) => any, isDate?: boolean, isTime?: boolean, grid?: GridType) => any[]; } declare class DefaultSortingStrategy implements ISortingStrategy { protected static _instance: DefaultSortingStrategy; protected constructor(); static instance(): DefaultSortingStrategy; sort(data: any[], fieldName: string, dir: SortingDirection, ignoreCase: boolean, valueResolver: (obj: any, key: string, isDate?: boolean) => any, isDate?: boolean, isTime?: boolean): any[]; compareValues(a: any, b: any): number; protected compareObjects(obj1: any, obj2: any, key: string, reverse: number, ignoreCase: boolean, valueResolver: (obj: any, key: string, isDate?: boolean, isTime?: boolean) => any, isDate: boolean, isTime: boolean): number; protected arraySort(data: any[], compareFn?: (arg0: any, arg1: any) => number): any[]; } declare class GroupMemberCountSortingStrategy implements ISortingStrategy { protected static _instance: GroupMemberCountSortingStrategy; protected constructor(); static instance(): GroupMemberCountSortingStrategy; sort(data: any[], fieldName: string, dir: SortingDirection): any[]; groupBy(data: any, key: any): any; protected compareObjects(obj1: any, obj2: any, data: any[], fieldName: string, reverse: number): number; } declare class FormattedValuesSortingStrategy extends DefaultSortingStrategy { protected static _instance: FormattedValuesSortingStrategy; constructor(); static instance(): FormattedValuesSortingStrategy; sort(data: any[], fieldName: string, dir: SortingDirection, ignoreCase: boolean, valueResolver: (obj: any, key: string, isDate?: boolean) => any, isDate?: boolean, isTime?: boolean, grid?: GridType): any[]; protected compareObjects(obj1: any, obj2: any, key: string, reverse: number, ignoreCase: boolean, valueResolver: (obj: any, key: string, isDate?: boolean, isTime?: boolean) => any, isDate: boolean, isTime: boolean, grid?: GridType): number; } interface IGroupingExpression extends ISortingExpression { groupingComparer?: (a: any, b: any, currRec?: any, groupRec?: any) => number; } declare abstract class IgxExporterOptionsBase { protected _fileExtension: string; /** * Specifies whether hidden columns should be exported. * ```typescript * let ignoreColumnsVisibility = this.exportOptions.ignoreColumnsVisibility; * this.exportOptions.ignoreColumnsVisibility = true; * ``` * * @memberof IgxExporterOptionsBase */ ignoreColumnsVisibility: boolean; /** * Specifies whether filtered out rows should be exported. * ```typescript * let ignoreFiltering = this.exportOptions.ignoreFiltering; * this.exportOptions.ignoreFiltering = true; * ``` * * @memberof IgxExporterOptionsBase */ ignoreFiltering: boolean; /** * Specifies if the exporter should ignore the current column order in the IgxGrid. * ```typescript * let ignoreColumnsOrder = this.exportOptions.ignoreColumnsOrder; * this.exportOptions.ignoreColumnsOrder = true; * ``` * * @memberof IgxExporterOptionsBase */ ignoreColumnsOrder: boolean; /** * Specifies whether the exported data should be sorted as in the provided IgxGrid. * When you export grouped data, setting ignoreSorting to true will cause * the grouping to fail because it relies on the sorting of the records. * ```typescript * let ignoreSorting = this.exportOptions.ignoreSorting; * this.exportOptions.ignoreSorting = true; * ``` * * @memberof IgxExporterOptionsBase */ ignoreSorting: boolean; /** * Specifies whether the exported data should be grouped as in the provided IgxGrid. * ```typescript * let ignoreGrouping = this.exportOptions.ignoreGrouping; * this.exportOptions.ignoreGrouping = true; * ``` * * @memberof IgxExporterOptionsBase */ ignoreGrouping: boolean; /** * Specifies whether the exported data should include multi column headers as in the provided IgxGrid. * ```typescript * let ignoreMultiColumnHeaders = this.exportOptions.ignoreMultiColumnHeaders; * this.exportOptions.ignoreMultiColumnHeaders = true; * ``` * * @memberof IgxExporterOptionsBase */ ignoreMultiColumnHeaders: boolean; /** * Specifies whether the exported data should include column summaries. * ```typescript * let exportSummaries = this.exportOptions.exportSummaries; * this.exportOptions.exportSummaries = true; * ``` * * @memberof IgxExporterOptionsBase */ exportSummaries: boolean; /** * Specifies whether the exported data should have frozen headers. * ```typescript * let freezeHeaders = this.exportOptions.freezeHeaders; * this.exportOptions.freezeHeaders = true; * ``` * * @memberof IgxExporterOptionsBase */ freezeHeaders: boolean; /** * Specifies whether the headers should be exported if there is no data. * ```typescript * let alwaysExportHeaders = this.exportOptions.alwaysExportHeaders; * this.exportOptions.alwaysExportHeaders = false; * ``` * * @memberof IgxExporterOptionsBase */ alwaysExportHeaders: boolean; private _fileName; constructor(fileName: string, _fileExtension: string); private setFileName; /** * Gets the file name which will be used for the exporting operation. * ```typescript * let fileName = this.exportOptions.fileName; * ``` * * @memberof IgxExporterOptionsBase */ get fileName(): string; /** * Sets the file name which will be used for the exporting operation. * ```typescript * this.exportOptions.fileName = 'exportedData01'; * ``` * * @memberof IgxExporterOptionsBase */ set fileName(value: string); } /** The event arguments when data from a grid is being copied. */ interface IGridClipboardEvent { /** `data` can be of any type and refers to the data that is being copied/stored to the clipboard */ data: any[]; /** * `cancel` returns whether an external event has intercepted the copying * If the value becomes "true", it returns/exits from the method, instantiating the interface */ cancel: boolean; } /** Represents an event argument related to grid cell interactions. */ interface IGridCellEventArgs extends IBaseEventArgs { /** Represents the grid cell that triggered the event. */ cell: CellType; /** * Represents the original event that occurred * Examples of such events include: selecting, clicking, double clicking, etc. */ event: Event; } /** Represents an event argument related to grid row interactions. */ interface IGridRowEventArgs extends IBaseEventArgs { /** Represents the grid row that triggered the event. */ row: RowType; /** * Represents the original event that occurred * Examples of such events include: selecting, clicking, double clicking, etc. */ event: Event; } /** Represents an event argument for the grid contextMenu output */ interface IGridContextMenuEventArgs extends IGridCellEventArgs, IGridRowEventArgs { } /** Represents event arguments related to grid editing completion. */ interface IGridEditDoneEventArgs extends IBaseEventArgs { /** * @deprecated since version 17.1.0. Use the `rowKey` property instead. */ rowID: any; /** * @deprecated since version 17.1.0. Use the `rowKey` property instead. */ primaryKey: any; rowKey: any; cellID?: { rowID: any; columnID: any; rowIndex: number; }; /** * `rowData` represents the updated/committed data of the row after the edit (newValue) * The only case rowData (of the current object) is used directly, is when there is no rowEditing or transactions enabled */ rowData: any; /** * Represents the previous (before editing) value of the edited cell. * It's used when the event has been stopped/exited. */ oldValue: any; /** * Optional * Represents the value, that is being entered in the edited cell * When there is no `newValue` and the event has ended, the value of the cell returns to the `oldValue` */ newValue?: any; /** * Optional * Represents the original event, that has triggered the edit */ event?: Event; /** * Optional * Represents the column information of the edited cell */ column?: ColumnType; /** * Optional * Represents the grid instance that owns the edit event. */ owner?: GridType; /** * Optional * Indicates if the editing consists of adding a new row */ isAddRow?: boolean; /** * Optional * Indicates if the new value would be valid. * It can be set to return the result of the methods for validation of the grid */ valid?: boolean; } /** * Represents event arguments related to grid editing. * The event is cancelable * It contains information about the row and the column, as well as the old and nwe value of the element/cell */ interface IGridEditEventArgs extends CancelableEventArgs, IGridEditDoneEventArgs { } interface IRowDataCancelableEventArgs extends IRowDataEventArgs, IGridEditEventArgs { /** * @deprecated */ cellID?: { rowID: any; columnID: any; rowIndex: number; }; /** * @deprecated */ oldValue: any; /** * @deprecated */ newValue?: any; /** * @deprecated */ isAddRow?: boolean; owner: GridType; } /** * The event arguments after a column's pin state is changed. * `insertAtIndex`specifies at which index in the pinned/unpinned area the column was inserted. * `isPinned` returns the actual pin state of the column after the operation completed. */ interface IPinColumnEventArgs extends IBaseEventArgs { column: ColumnType; /** * If pinned, specifies at which index in the pinned area the column is inserted. * If unpinned, specifies at which index in the unpinned area the column is inserted. */ insertAtIndex: number; /** * Returns the actual pin state of the column. * If pinning/unpinning is successful, value of `isPinned` will change accordingly when read in the "-ing" and "-ed" event. */ isPinned: boolean; } /** * The event arguments before a column's pin state is changed. * `insertAtIndex`specifies at which index in the pinned/unpinned area the column is inserted. * Can be changed in the `columnPin` event. * `isPinned` returns the actual pin state of the column. When pinning/unpinning is successful, * the value of `isPinned` will change accordingly when read in the "-ing" and "-ed" event. */ interface IPinColumnCancellableEventArgs extends IPinColumnEventArgs, CancelableEventArgs { } /** * Represents event arguments related to events, that can occur for rows in a grid * Example for events: adding, deleting, selection, transaction, etc. */ interface IRowDataEventArgs extends IBaseEventArgs { /** * @deprecated since version 17.1.0. Use the `rowData` property instead. */ data: any; rowData: any; /** * Represents the unique key, the row can be associated with. * Available if `primaryKey` exists * @deprecated since version 17.1.0. Use the `rowKey` property instead. */ primaryKey: any; rowKey: any; /** Represents the grid instance that owns the edit event. */ owner: GridType; } /** The event arguments when a column is being resized */ interface IColumnResizeEventArgs extends IBaseEventArgs { /** Represents the information of the column that is being resized */ column: ColumnType; /** Represents the old width of the column before the resizing */ prevWidth: string; /** Represents the new width, the column is being resized to */ newWidth: string; } /** * The event arguments when a column is being resized * It contains information about the column, it's old and new width * The event can be canceled */ interface IColumnResizingEventArgs extends IColumnResizeEventArgs, CancelableEventArgs { } /** * The event arguments when the selection state of a row is being changed * The event is cancelable */ interface IRowSelectionEventArgs extends CancelableEventArgs, IBaseEventArgs { /** Represents an array of rows, that have already been selected */ readonly oldSelection: any[]; /** Represents the newly selected rows */ newSelection: any[]; /** * Represents an array of all added rows * Whenever a row has been selected, the array is "refreshed" with the selected rows */ readonly added: any[]; /** * Represents an array of all rows, removed from the selection * Whenever a row has been deselected, the array is "refreshed" with the rows, * that have been previously selected, but are no longer */ readonly removed: any[]; /** * Represents the original event, that has triggered the selection change * selecting, deselecting */ readonly event?: Event; /** Indicates whether or not all rows of the grid have been selected */ readonly allRowsSelected?: boolean; } /** * The event arguments when the selection state of a column is being changed * The event is cancelable */ interface IColumnSelectionEventArgs extends CancelableEventArgs, IBaseEventArgs { /** Represents an array of columns, that have already been selected */ readonly oldSelection: string[]; /** Represents the newly selected columns */ newSelection: string[]; /** * Represents an array of all added columns * Whenever a column has been selected, the array is "refreshed" with the selected columns */ readonly added: string[]; /** * Represents an array of all columns, removed from the selection * Whenever a column has been deselected, the array is "refreshed" with the columns, that have been previously selected, but are no longer */ readonly removed: string[]; /** * Represents the original event, that has triggered the selection change * selecting, deselecting */ readonly event?: Event; } interface ISearchInfo extends IBaseSearchInfo { matchInfoCache: any[]; activeMatchIndex: number; } /** * Represents the arguments for the grid toolbar export event. * It provides information about the grid instance, exporter service, export options, * and allows the event to be canceled. */ interface IGridToolbarExportEventArgs extends IBaseEventArgs { /** `grid` represents a reference to the instance of the grid te event originated from */ grid: GridType; /** * The `exporter` is a base service. * The type (an abstract class `IgxBaseExporter`) has it's own properties and methods * It is used to define the format and options of the export, the exported element * and methods for preparing the data from the elements for exporting */ exporter: IgxBaseExporter; /** * Represents the different settings, that can be given to an export * The type (an abstract class `IgxExporterOptionsBase`) has properties for column settings * (whether they should be ignored) as well as method for generating a file name */ options: IgxExporterOptionsBase; /** * `cancel` returns whether the event has been intercepted and stopped * If the value becomes "true", it returns/exits from the method, instantiating the interface */ cancel: boolean; } /** Represents event arguments related to the start of a column moving operation in a grid. */ interface IColumnMovingStartEventArgs extends IBaseEventArgs { /** * Represents the column that is being moved. * The `ColumnType` contains the information (the grid it belongs to, css data, settings, etc.) of the column in its properties */ source: ColumnType; } /** Represents event arguments related to a column moving operation in a grid */ interface IColumnMovingEventArgs extends IBaseEventArgs { /** * Represents the column that is being moved. * The `ColumnType` contains the information (the grid it belongs to, css data, settings, etc.) of the column in its properties */ source: ColumnType; /** * `cancel` returns whether the event has been intercepted and stopped * If the value becomes "true", it returns/exits from the method, instantiating the interface */ cancel: boolean; } /** Represents event arguments related to the end of a column moving operation in a grid */ interface IColumnMovingEndEventArgs extends IBaseEventArgs { /** * The source of the event represents the column that is being moved. * The `ColumnType` contains the information (the grid it belongs to, css data, settings, etc.) of the column in its properties */ source: ColumnType; /** * The target of the event represents the column, the source is being moved to. * The `ColumnType` contains the information (the grid it belongs to, css data, settings, etc.) of the column in its properties */ target: ColumnType; /** * `cancel` returns whether the event has been intercepted and stopped * If the value becomes "true", it returns/exits from the method, instantiating the interface */ cancel: boolean; } /** * Represents an event, emitted when keydown is triggered over element inside grid's body * This event is fired only if the key combination is supported in the grid. */ interface IGridKeydownEventArgs extends IBaseEventArgs { /** The `targetType` represents the type of the targeted object. For example a cell or a row */ targetType: GridKeydownTargetType; /** Represents the information and details of the object itself */ target: any; /** Represents the original event, that occurred. */ event: Event; /** * The event is cancelable * `cancel` returns whether the event has been intercepted and stopped * If the value becomes "true", it returns/exits from the method, instantiating the interface */ cancel: boolean; } /** The event is triggered when getting the current position of a certain cell */ interface ICellPosition { /** It returns the position (index) of the row, the cell is in */ rowIndex: number; /** * It returns the position (index) of the column, the cell is in * Counts only the visible (non hidden) columns */ visibleColumnIndex: number; } /** Emitted when a dragging operation is finished (when the row is dropped) */ interface IRowDragEndEventArgs extends IBaseEventArgs { /** Represents the drag directive or information associated with the drag operation */ dragDirective: any; /** Represents the information of the row that is being dragged. */ dragData: RowType; /** Represents the HTML element itself */ dragElement: HTMLElement; /** `animation` returns whether the event is animated */ animation: boolean; } /** * Emitted when a dragging operation is starting (when the row is "picked") * The event is cancelable */ interface IRowDragStartEventArgs extends CancelableEventArgs, IBaseEventArgs { /** Represents the drag directive or information associated with the drag operation */ dragDirective: any; /** Represents the information of the row that is being dragged. */ dragData: RowType; /** Represents the HTML element itself */ dragElement: HTMLElement; } /** Represents event arguments related to the row's expansion state being changed in a grid */ interface IRowToggleEventArgs extends IBaseEventArgs { /** * Represents the ID of the row that emitted the event (which state is changed) * @deprecated since version 17.1.0. Use the `rowKey` property instead. */ rowID: any; rowKey: any; /** * Returns the state of the row after the operation has ended * Indicating whether the row is being expanded (true) or collapsed (false) */ expanded: boolean; /** * Optional * Represents the original event, that has triggered the expansion/collapse */ event?: Event; /** * The event is cancelable * `cancel` returns whether the event has been intercepted and stopped * If the value becomes "true", it returns/exits from the method, instantiating the interface */ cancel: boolean; } /** * Event emitted when a row's pin state changes. * The event is cancelable */ interface IPinRowEventArgs extends IBaseEventArgs, CancelableEventArgs { /** * The ID of the row, that was pinned/unpinned. * ID is either the primaryKey value or the data record instance. * @deprecated since version 17.1.0. Use the `rowKey` property instead. */ readonly rowID: any; readonly rowKey: any; row?: RowType; /** The index at which to pin the row in the pinned rows collection. */ insertAtIndex?: number; /** Whether or not the row is pinned or unpinned. */ readonly isPinned: boolean; } /** * Event emitted when a grid is scrolled. */ interface IGridScrollEventArgs extends IBaseEventArgs { /** The scroll direction - vertical or horizontal. */ direction: string; /** The original browser scroll event. */ event: Event; /** The new scroll position */ scrollPosition: number; } /** * Event emitted when a checkbox in the checkbox * list of an IgxColumnActions component is clicked. */ interface IColumnToggledEventArgs extends IBaseEventArgs { /** The column that is toggled. */ column: ColumnType; /** The checked state after the action. */ checked: boolean; } /** Emitted when the active node is changed */ interface IActiveNodeChangeEventArgs extends IBaseEventArgs { /** Represents the row index of the active node */ row: number; /** Represents the column index of the active node */ column: number; /** * Optional * Represents the hierarchical level of the active node */ level?: number; /** * Represents the type of the active node. * The GridKeydownTargetType is an enum or that specifies the possible target types */ tag: GridKeydownTargetType; } /** * Represents event arguments related to sorting and grouping operations * The event is cancelable */ interface ISortingEventArgs extends IBaseEventArgs, CancelableEventArgs { /** * Optional * Represents the sorting expressions applied to the grid. * It can be a single sorting expression or an array of them * The expression contains information like file name, whether the letter case should be taken into account, etc. */ sortingExpressions?: ISortingExpression | Array; /** * Optional * Represents the grouping expressions applied to the grid. * It can be a single grouping expression or an array of them * The expression contains information like the sorting expression and criteria by which the elements will be grouped */ groupingExpressions?: IGroupingExpression | Array; } /** @hidden @internal */ interface IColumnsAutoGeneratedEventArgs extends IBaseEventArgs { columns?: ColumnType[]; } /** * Represents event arguments related to filtering operations * The event is cancelable */ interface IFilteringEventArgs extends IBaseEventArgs, CancelableEventArgs { /** * Represents the filtering expressions applied to the grid. * The expression contains information like filtering operands and operator, an expression or condition, etc. */ filteringExpressions: IFilteringExpressionsTree; } /** The event arguments after a column's visibility is changed. */ interface IColumnVisibilityChangedEventArgs extends IBaseEventArgs { /** Represents the column the event originated from */ column: any; /** * The new hidden state that the column will have, if operation is successful. * Will be `true` when hiding and `false` when showing. */ newValue: boolean; } /** * The event arguments when a column's visibility is changed. * The event is cancelable * It contains information about the column and the it's visibility after the operation (will be `true` when hiding and `false` when showing) */ interface IColumnVisibilityChangingEventArgs extends IColumnVisibilityChangedEventArgs, CancelableEventArgs { } interface IGridResourceStrings { igx_grid_groupByArea_message?: string; igx_grid_groupByArea_select_message?: string; igx_grid_groupByArea_deselect_message?: string; igx_grid_emptyFilteredGrid_message?: string; igx_grid_emptyGrid_message?: string; igx_grid_filter?: string; igx_grid_filter_row_close?: string; igx_grid_filter_row_reset?: string; igx_grid_filter_row_placeholder?: string; igx_grid_filter_row_boolean_placeholder?: string; igx_grid_filter_row_date_placeholder?: string; igx_grid_filter_row_time_placeholder?: string; igx_grid_filter_operator_and?: string; igx_grid_complex_filter?: string; igx_grid_filter_operator_or?: string; igx_grid_filter_contains?: string; igx_grid_filter_doesNotContain?: string; igx_grid_filter_startsWith?: string; igx_grid_filter_endsWith?: string; igx_grid_filter_equals?: string; igx_grid_filter_doesNotEqual?: string; igx_grid_filter_empty?: string; igx_grid_filter_notEmpty?: string; igx_grid_filter_null?: string; igx_grid_filter_notNull?: string; igx_grid_filter_before?: string; igx_grid_filter_after?: string; igx_grid_filter_at?: string; igx_grid_filter_not_at?: string; igx_grid_filter_at_before?: string; igx_grid_filter_at_after?: string; igx_grid_filter_today?: string; igx_grid_filter_yesterday?: string; igx_grid_filter_thisMonth?: string; igx_grid_filter_lastMonth?: string; igx_grid_filter_nextMonth?: string; igx_grid_filter_thisYear?: string; igx_grid_filter_lastYear?: string; igx_grid_filter_nextYear?: string; igx_grid_filter_greaterThan?: string; igx_grid_filter_lessThan?: string; igx_grid_filter_greaterThanOrEqualTo?: string; igx_grid_filter_lessThanOrEqualTo?: string; igx_grid_filter_true?: string; igx_grid_filter_false?: string; igx_grid_filter_all?: string; igx_grid_filter_in?: string; igx_grid_filter_notIn?: string; igx_grid_filter_condition_placeholder?: string; igx_grid_summary_count?: string; igx_grid_summary_min?: string; igx_grid_summary_max?: string; igx_grid_summary_sum?: string; igx_grid_summary_average?: string; igx_grid_summary_earliest?: string; igx_grid_summary_latest?: string; igx_grid_excel_filter_moving_left?: string; igx_grid_excel_filter_moving_left_short?: string; igx_grid_excel_filter_moving_right?: string; igx_grid_excel_filter_moving_right_short?: string; igx_grid_excel_filter_moving_header?: string; igx_grid_excel_filter_sorting_asc?: string; igx_grid_excel_filter_sorting_asc_short?: string; igx_grid_excel_filter_sorting_desc?: string; igx_grid_excel_filter_sorting_desc_short?: string; igx_grid_excel_filter_sorting_header?: string; igx_grid_excel_filter_clear?: string; igx_grid_excel_custom_dialog_add?: string; igx_grid_excel_custom_dialog_clear?: string; igx_grid_excel_custom_dialog_header?: string; igx_grid_excel_cancel?: string; igx_grid_excel_apply?: string; igx_grid_excel_search_placeholder?: string; igx_grid_excel_select_all?: string; igx_grid_excel_select_all_search_results?: string; igx_grid_excel_add_to_filter?: string; igx_grid_excel_blanks?: string; igx_grid_excel_hide?: string; igx_grid_excel_show?: string; igx_grid_excel_pin?: string; igx_grid_excel_unpin?: string; igx_grid_excel_select?: string; igx_grid_excel_deselect?: string; igx_grid_excel_text_filter?: string; igx_grid_excel_number_filter?: string; igx_grid_excel_date_filter?: string; igx_grid_excel_boolean_filter?: string; igx_grid_excel_currency_filter?: string; igx_grid_excel_custom_filter?: string; igx_grid_excel_no_matches?: string; igx_grid_excel_matches_count?: string; igx_grid_advanced_filter_title?: string; igx_grid_advanced_filter_from_label?: string; igx_grid_advanced_filter_and_group?: string; igx_grid_advanced_filter_or_group?: string; igx_grid_advanced_filter_end_group?: string; igx_grid_advanced_filter_create_and_group?: string; igx_grid_advanced_filter_create_or_group?: string; igx_grid_advanced_filter_and_label?: string; igx_grid_advanced_filter_or_label?: string; igx_grid_advanced_filter_add_condition?: string; igx_grid_advanced_filter_add_condition_root?: string; igx_grid_advanced_filter_add_group?: string; igx_grid_advanced_filter_add_group_root?: string; igx_grid_advanced_filter_ungroup?: string; igx_grid_advanced_filter_delete?: string; igx_grid_advanced_filter_delete_filters?: string; igx_grid_advanced_filter_initial_text?: string; igx_grid_advanced_filter_column_placeholder?: string; igx_grid_advanced_filter_value_placeholder?: string; igx_grid_advanced_filter_query_value_placeholder?: string; igx_grid_advanced_filter_switch_group?: string; igx_grid_advanced_filter_dialog_title?: string; igx_grid_advanced_filter_dialog_message?: string; igx_grid_advanced_filter_dialog_checkbox_text?: string; igx_grid_advanced_filter_drop_ghost_text?: string; igx_grid_advanced_filter_select_entity?: string; igx_grid_advanced_filter_select_return_field_single?: string; igx_grid_pinned_row_indicator?: string; igx_grid_hiding_check_all_label?: string; igx_grid_hiding_uncheck_all_label?: string; igx_grid_pinning_check_all_label?: string; igx_grid_pinning_uncheck_all_label?: string; igx_grid_row_edit_btn_done?: string; igx_grid_row_edit_btn_cancel?: string; igx_grid_row_edit_text?: string; igx_grid_toolbar_actions_filter_prompt?: string; igx_grid_toolbar_pinning_button_tooltip?: string; igx_grid_toolbar_hiding_button_tooltip?: string; igx_grid_toolbar_pinning_title?: string; igx_grid_toolbar_hiding_title?: string; igx_grid_toolbar_advanced_filtering_button_tooltip?: string; igx_grid_toolbar_advanced_filtering_button_label?: string; igx_grid_toolbar_exporter_button_tooltip?: string; igx_grid_toolbar_exporter_button_label?: string; igx_grid_toolbar_exporter_excel_entry_text?: string; igx_grid_toolbar_exporter_csv_entry_text?: string; igx_grid_snackbar_addrow_label?: string; igx_grid_snackbar_addrow_actiontext?: string; igx_grid_actions_edit_label?: string; igx_grid_actions_add_label?: string; igx_grid_add_row_label?: string; igx_grid_actions_add_child_label?: string; igx_grid_actions_delete_label?: string; igx_grid_actions_pin_label?: string; igx_grid_actions_unpin_label?: string; igx_grid_actions_jumpUp_label?: string; igx_grid_actions_jumpDown_label?: string; igx_grid_pivot_date_dimension_total?: string; igx_grid_pivot_aggregate_count?: string; igx_grid_pivot_aggregate_min?: string; igx_grid_pivot_aggregate_max?: string; igx_grid_pivot_aggregate_sum?: string; igx_grid_pivot_aggregate_avg?: string; igx_grid_pivot_aggregate_date_latest?: string; igx_grid_pivot_aggregate_date_earliest?: string; igx_grid_pivot_aggregate_time_latest?: string; igx_grid_pivot_aggregate_time_earliest?: string; igx_grid_pivot_empty_row_drop_area?: string; igx_grid_pivot_empty_column_drop_area?: string; igx_grid_pivot_empty_filter_drop_area?: string; igx_grid_pivot_empty_value_drop_area?: string; igx_grid_pivot_row_drop_chip?: string; igx_grid_pivot_column_drop_chip?: string; igx_grid_pivot_filter_drop_chip?: string; igx_grid_pivot_value_drop_chip?: string; igx_grid_pivot_empty_message?: string; igx_grid_pivot_selector_filters?: string; igx_grid_pivot_selector_rows?: string; igx_grid_pivot_selector_columns?: string; igx_grid_pivot_selector_values?: string; igx_grid_pivot_selector_panel_empty?: string; igx_grid_required_validation_error?: string; igx_grid_min_validation_error?: string; igx_grid_max_validation_error?: string; igx_grid_min_length_validation_error?: string; igx_grid_max_length_validation_error?: string; igx_grid_email_validation_error?: string; igx_grid_pattern_validation_error?: string; } declare const GridResourceStringsEN: IGridResourceStrings; interface IGroupByExpandState { expanded: boolean; hierarchy: Array; } interface IGroupByKey { fieldName: string; value: any; } interface IPageEventArgs extends IBaseEventArgs { previous: number; current: number; } interface IPageCancellableEventArgs extends CancelableEventArgs { current: number; next: number; } declare class IgxPaginatorDirective { template: TemplateRef; constructor(template: TemplateRef); static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } interface IPaginatorResourceStrings { igx_paginator_label?: string; igx_paginator_pager_text?: string; igx_paginator_first_page_button_text?: string; igx_paginator_previous_page_button_text?: string; igx_paginator_last_page_button_text?: string; igx_paginator_next_page_button_text?: string; } declare const PaginatorResourceStringsEN: IPaginatorResourceStrings; interface AnimationService { /** * Creates an `AnimationPlayer` instance * @param animation A set of options describing the animation * @param element The DOM element on which animation will be applied * @returns AnimationPlayer */ buildAnimation: (animationMetaData: AnimationReferenceMetadata, element: HTMLElement) => AnimationPlayer; } interface AnimationPlayer { /** * Emits when the animation starts */ animationStart: EventEmitter; /** * Emits when the animation ends */ animationEnd: EventEmitter; /** * Current position of the animation. */ position: number; /** * Initialize the animation */ init(): void; /** * Runs the animation */ play(): void; /** * Ends the animation */ finish(): void; /** * Resets the animation to its initial state */ reset(): void; /** * Destroys the animation. */ destroy(): void; /** * Reports whether the animation has started. */ hasStarted(): boolean; } /** * [Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/overlay-main) * The overlay service allows users to show components on overlay div above all other elements in the page. */ declare class IgxOverlayService implements OnDestroy { private _appRef; private document; private _zone; protected platformUtil: PlatformUtil; private animationService; /** * Emitted just before the overlay content starts to open. * ```typescript * opening(event: OverlayCancelableEventArgs){ * const opening = event; * } * ``` */ opening: EventEmitter; /** * Emitted after the overlay content is opened and all animations are finished. * ```typescript * opened(event: OverlayEventArgs){ * const opened = event; * } * ``` */ opened: EventEmitter; /** * Emitted just before the overlay content starts to close. * ```typescript * closing(event: OverlayCancelableEventArgs){ * const closing = event; * } * ``` */ closing: EventEmitter; /** * Emitted after the overlay content is closed and all animations are finished. * ```typescript * closed(event: OverlayEventArgs){ * const closed = event; * } * ``` */ closed: EventEmitter; /** * Emitted before the content is appended to the overlay. * ```typescript * contentAppending(event: OverlayEventArgs){ * const contentAppending = event; * } * ``` */ contentAppending: EventEmitter; /** * Emitted after the content is appended to the overlay, and before animations are started. * ```typescript * contentAppended(event: OverlayEventArgs){ * const contentAppended = event; * } * ``` */ contentAppended: EventEmitter; /** * Emitted just before the overlay animation start. * ```typescript * animationStarting(event: OverlayAnimationEventArgs){ * const animationStarting = event; * } * ``` */ animationStarting: EventEmitter; private _componentId; private _overlayInfos; private _overlayElement; private _document; private _keyPressEventListener; private destroy$; private _cursorStyleIsSet; private _cursorOriginalValue; private _defaultSettings; constructor(_appRef: ApplicationRef, document: any, _zone: NgZone, platformUtil: PlatformUtil, animationService: AnimationService); /** * Creates overlay settings with global or container position strategy and preset position settings * * @param position Preset position settings. Default position is 'center' * @param outlet The outlet container to attach the overlay to * @returns Non-modal overlay settings based on Global or Container position strategy and the provided position. */ static createAbsoluteOverlaySettings(position?: AbsolutePosition, outlet?: IgxOverlayOutletDirective | ElementRef): OverlaySettings; /** * Creates overlay settings with auto, connected or elastic position strategy and preset position settings * * @param target Attaching target for the component to show * @param strategy The relative position strategy to be applied to the overlay settings. Default is Auto positioning strategy. * @param position Preset position settings. By default the element is positioned below the target, left aligned. * @returns Non-modal overlay settings based on the provided target, strategy and position. */ static createRelativeOverlaySettings(target: Point | HTMLElement, position?: RelativePosition, strategy?: RelativePositionStrategy): OverlaySettings; private static createAbsolutePositionSettings; private static createRelativePositionSettings; private static createPositionStrategy; /** * Generates Id. Provide this Id when call `show(id)` method * * @param component ElementRef to show in overlay * @param settings (optional): Display settings for the overlay, such as positioning and scroll/close behavior. * @returns Id of the created overlay. Valid until `detach` is called. */ attach(element: ElementRef, settings?: OverlaySettings): string; /** * Generates Id. Provide this Id when call `show(id)` method * * Note created instance is in root scope, prefer the `viewContainerRef` overload when local injection context is needed. * * @param component Component Type to show in overlay * @param settings (optional): Create settings for the overlay, such as positioning and scroll/close behavior. * Includes also an optional `Injector` to add to the created dynamic component's injectors. * @returns Id of the created overlay. Valid until `detach` is called. */ attach(component: Type, settings?: OverlayCreateSettings): string; /** * Generates an Id. Provide this Id when calling the `show(id)` method * * @param component Component Type to show in overlay * @param viewContainerRef Reference to the container where created component's host view will be inserted * @param settings (optional): Display settings for the overlay, such as positioning and scroll/close behavior. */ attach(component: Type, viewContainerRef: ViewContainerRef, settings?: OverlaySettings): string; /** * Remove overlay with the provided id. * * @param id Id of the overlay to remove * ```typescript * this.overlay.detach(id); * ``` */ detach(id: string): void; /** * Remove all the overlays. * ```typescript * this.overlay.detachAll(); * ``` */ detachAll(): void; /** * Shows the overlay for provided id. * * @param id Id to show overlay for * @param settings Display settings for the overlay, such as positioning and scroll/close behavior. */ show(id: string, settings?: OverlaySettings): void; /** * Hides the component with the ID provided as a parameter. * ```typescript * this.overlay.hide(id); * ``` */ hide(id: string, event?: Event): void; /** * Hides all the components and the overlay. * ```typescript * this.overlay.hideAll(); * ``` */ hideAll(): void; /** * Repositions the component with ID provided as a parameter. * * @param id Id to reposition overlay for * ```typescript * this.overlay.reposition(id); * ``` */ reposition(id: string): void; /** * Offsets the content along the corresponding axis by the provided amount with optional offsetMode that determines whether to add (by default) or set the offset values * * @param id Id to offset overlay for * @param deltaX Amount of offset in horizontal direction * @param deltaY Amount of offset in vertical direction * @param offsetMode Determines whether to add (by default) or set the offset values with OffsetMode.Add and OffsetMode.Set * ```typescript * this.overlay.setOffset(id, deltaX, deltaY, offsetMode); * ``` */ setOffset(id: string, deltaX: number, deltaY: number, offsetMode?: OffsetMode): void; /** @hidden */ repositionAll: () => void; /** @hidden */ ngOnDestroy(): void; /** @hidden @internal */ getOverlayById(id: string): OverlayInfo; private _hide; /** * Creates overlayInfo. Sets the info's `elementRef`, `componentRef`and `settings`. Also * initialize info's `ngZone`, `transformX` and `transformY`. * @param component ElementRef or Type. If type is provided dynamic component will be created * @param viewContainerRefOrSettings (optional): If ElementRef is provided for `component` this * parameter is OverlaySettings. Otherwise it could be ViewContainerRef or OverlayCreateSettings and will be * used when dynamic component is created. * @param settings (optional): OverlaySettings when `ViewContainerRef` is provided. * @returns OverlayInfo */ private getOverlayInfo; private placeElementHook; private moveElementToOverlay; private getWrapperElement; private getContentElement; private getOverlayElement; private updateSize; private closeDone; private cleanUp; private playOpenAnimation; private playCloseAnimation; private applyAnimationParams; private documentClicked; private addOutsideClickListener; private removeOutsideClickListener; private addResizeHandler; private removeResizeHandler; private addCloseOnEscapeListener; private removeCloseOnEscapeListener; private addModalClasses; private removeModalClasses; private buildAnimationPlayers; private openAnimationDone; private closeAnimationDone; private finishAnimations; private getComponentSize; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵprov: i0.ɵɵInjectableDeclaration; } interface ToggleViewEventArgs extends IBaseEventArgs { /** Id of the toggle view */ id: string; event?: Event; } interface ToggleViewCancelableEventArgs extends ToggleViewEventArgs, CancelableBrowserEventArgs { } declare class IgxToggleDirective implements IToggleView, OnInit, OnDestroy { private elementRef; private cdr; protected overlayService: IgxOverlayService; private navigationService; private platform?; /** * Emits an event after the toggle container is opened. * * ```typescript * onToggleOpened(event) { * alert("Toggle opened!"); * } * ``` * * ```html *
*
* ``` */ opened: EventEmitter; /** * Emits an event before the toggle container is opened. * * ```typescript * onToggleOpening(event) { * alert("Toggle opening!"); * } * ``` * * ```html *
*
* ``` */ opening: EventEmitter; /** * Emits an event after the toggle container is closed. * * ```typescript * onToggleClosed(event) { * alert("Toggle closed!"); * } * ``` * * ```html *
*
* ``` */ closed: EventEmitter; /** * Emits an event before the toggle container is closed. * * ```typescript * onToggleClosing(event) { * alert("Toggle closing!"); * } * ``` * * ```html *
*
* ``` */ closing: EventEmitter; /** * Emits an event after the toggle element is appended to the overlay container. * * ```typescript * onAppended() { * alert("Content appended!"); * } * ``` * * ```html *
*
* ``` */ appended: EventEmitter; /** * @hidden */ get collapsed(): boolean; /** * Identifier which is registered into `IgxNavigationService` * * ```typescript * let myToggleId = this.toggle.id; * ``` */ id: string; /** * @hidden */ get element(): HTMLElement; /** * @hidden */ get hiddenClass(): boolean; get hiddenWebkitClass(): boolean; /** * @hidden */ get defaultClass(): boolean; protected _overlayId: string; private _collapsed; protected destroy$: Subject; private _overlaySubFilter; private _overlayOpenedSub; private _overlayClosingSub; private _overlayClosedSub; private _overlayContentAppendedSub; /** * @hidden */ constructor(elementRef: ElementRef, cdr: ChangeDetectorRef, overlayService: IgxOverlayService, navigationService: IgxNavigationService, platform?: PlatformUtil); /** * Opens the toggle. * * ```typescript * this.myToggle.open(); * ``` */ open(overlaySettings?: OverlaySettings): void; /** * Closes the toggle. * * ```typescript * this.myToggle.close(); * ``` */ close(event?: Event): void; /** * Opens or closes the toggle, depending on its current state. * * ```typescript * this.myToggle.toggle(); * ``` */ toggle(overlaySettings?: OverlaySettings): void; /** @hidden @internal */ get isClosing(): boolean; /** * Returns the id of the overlay the content is rendered in. * ```typescript * this.myToggle.overlayId; * ``` */ get overlayId(): string; /** * Repositions the toggle. * ```typescript * this.myToggle.reposition(); * ``` */ reposition(): void; /** * Offsets the content along the corresponding axis by the provided amount with optional * offsetMode that determines whether to add (by default) or set the offset values with OffsetMode.Add and OffsetMode.Set */ setOffset(deltaX: number, deltaY: number, offsetMode?: OffsetMode): void; /** * @hidden */ ngOnInit(): void; /** * @hidden */ ngOnDestroy(): void; private overlayClosed; private subscribe; private unsubscribe; private clearSubscription; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } declare class IgxToggleActionDirective implements OnInit { private element; private navigationService; /** * Provide settings that control the toggle overlay positioning, interaction and scroll behavior. * ```typescript * const settings: OverlaySettings = { * closeOnOutsideClick: false, * modal: false * } * ``` * --- * ```html * *
* ``` */ overlaySettings: OverlaySettings; /** * Determines where the toggle element overlay should be attached. * * ```html * *
* ``` * Where `outlet` in an instance of `IgxOverlayOutletDirective` or an `ElementRef` */ outlet: IgxOverlayOutletDirective | ElementRef; /** * @hidden */ set target(target: any); /** * @hidden */ get target(): any; protected _overlayDefaults: OverlaySettings; protected _target: IToggleView | string; constructor(element: ElementRef, navigationService: IgxNavigationService); /** * @hidden */ onClick(): void; /** * @hidden */ ngOnInit(): void; /** * Updates provided overlay settings * * @param settings settings to update * @returns returns updated copy of provided overlay settings */ protected updateOverlaySettings(settings: OverlaySettings): OverlaySettings; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * Mark an element as an igxOverlay outlet container. * Directive instance is exported as `overlay-outlet` to be assigned to templates variables: * ```html *
* ``` */ declare class IgxOverlayOutletDirective { element: ElementRef; constructor(element: ElementRef); /** @hidden */ get nativeElement(): HTMLElement; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * [Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/overlay-position) * Position strategies determine where to display the component in the provided IgxOverlayService. */ interface IPositionStrategy { /** * PositionSettings to use when position the component in the overlay */ settings: PositionSettings; /** * Position the element based on the PositionStrategy implementing this interface. * * @param contentElement The HTML element to be positioned * @param size Size of the element * @param document reference to the Document object * @param initialCall should be true if this is the initial call to the method * @param target attaching target for the component to show * ```typescript * settings.positionStrategy.position(content, size, document, true); * ``` */ position(contentElement: HTMLElement, size?: Size, document?: Document, initialCall?: boolean, target?: Point | HTMLElement): void; /** * Clone the strategy instance. * ```typescript * settings.positionStrategy.clone(); * ``` */ clone(): IPositionStrategy; } /** * [Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/overlay-scroll). * Scroll strategies determines how the scrolling will be handled in the provided IgxOverlayService. */ interface IScrollStrategy { /** * Initializes the strategy. Should be called once * * @param document reference to Document object. * @param overlayService IgxOverlay service to use in this strategy. * @param id Unique id for this strategy. * ```typescript * settings.scrollStrategy.initialize(document, overlay, id); * ``` */ initialize(document: Document, overlayService: IgxOverlayService, id: string): any; /** * Attaches the strategy * ```typescript * settings.scrollStrategy.attach(); * ``` */ attach(): void; /** * Detaches the strategy * ```typescript * settings.scrollStrategy.detach(); * ``` */ detach(): void; } declare abstract class ScrollStrategy implements IScrollStrategy { constructor(); /** * Initializes the strategy. Should be called once * * @param document reference to Document object. * @param overlayService IgxOverlay service to use in this strategy. * @param id Unique id for this strategy. * ```typescript * settings.scrollStrategy.initialize(document, overlay, id); * ``` */ abstract initialize(document: Document, overlayService: IgxOverlayService, id: string): any; /** * Attaches the strategy * ```typescript * settings.scrollStrategy.attach(); * ``` */ abstract attach(): void; /** * Detaches the strategy * ```typescript * settings.scrollStrategy.detach(); * ``` */ abstract detach(): void; } /** * On scroll reposition the overlay content. */ declare class AbsoluteScrollStrategy extends ScrollStrategy { private _initialized; private _document; private _overlayService; private _id; private _scrollContainer; private _zone; constructor(scrollContainer?: HTMLElement); /** * Initializes the strategy. Should be called once * * @param document reference to Document object. * @param overlayService IgxOverlay service to use in this strategy. * @param id Unique id for this strategy. * ```typescript * settings.scrollStrategy.initialize(document, overlay, id); * ``` */ initialize(document: Document, overlayService: IgxOverlayService, id: string): void; /** * Attaches the strategy * ```typescript * settings.scrollStrategy.attach(); * ``` */ attach(): void; /** * Detaches the strategy * ```typescript * settings.scrollStrategy.detach(); * ``` */ detach(): void; private addScrollEventListener; private onScroll; } /** * Prevents scrolling while the overlay content is shown. */ declare class BlockScrollStrategy extends ScrollStrategy { private _initialized; private _document; private _initialScrollTop; private _initialScrollLeft; private _sourceElement; constructor(); /** * Initializes the strategy. Should be called once * */ initialize(document: Document): void; /** * Attaches the strategy * ```typescript * settings.scrollStrategy.attach(); * ``` */ attach(): void; /** * Detaches the strategy * ```typescript * settings.scrollStrategy.detach(); * ``` */ detach(): void; private onScroll; } /** * Uses a tolerance and closes the shown component upon scrolling if the tolerance is exceeded */ declare class CloseScrollStrategy extends ScrollStrategy { private _document; private _overlayService; private _id; private initialScrollTop; private initialScrollLeft; private _threshold; private _initialized; private _sourceElement; private _scrollContainer; private _overlayInfo; constructor(scrollContainer?: HTMLElement); /** * Initializes the strategy. Should be called once * * @param document reference to Document object. * @param overlayService IgxOverlay service to use in this strategy. * @param id Unique id for this strategy. * ```typescript * settings.scrollStrategy.initialize(document, overlay, id); * ``` */ initialize(document: Document, overlayService: IgxOverlayService, id: string): void; /** * Attaches the strategy * ```typescript * settings.scrollStrategy.attach(); * ``` */ attach(): void; /** * Detaches the strategy * ```typescript * settings.scrollStrategy.detach(); * ``` */ detach(): void; private onScroll; } /** * Empty scroll strategy. Does nothing. */ declare class NoOpScrollStrategy extends ScrollStrategy { constructor(); /** * Initializes the strategy. Should be called once */ initialize(): void; /** * Detaches the strategy * ```typescript * settings.scrollStrategy.detach(); * ``` */ attach(): void; /** * Detaches the strategy * ```typescript * settings.scrollStrategy.detach(); * ``` */ detach(): void; } declare enum HorizontalAlignment { Left = -1, Center = -0.5, Right = 0 } declare enum VerticalAlignment { Top = -1, Middle = -0.5, Bottom = 0 } /** * Defines the possible values of the overlays' position strategy. */ declare enum RelativePositionStrategy { Connected = "connected", Auto = "auto", Elastic = "elastic" } /** * Defines the possible positions for the relative overlay settings presets. */ declare enum RelativePosition { Above = "above", Below = "below", Before = "before", After = "after", Default = "default" } /** * Defines the possible positions for the absolute overlay settings presets. */ declare enum AbsolutePosition { Bottom = "bottom", Top = "top", Center = "center" } /** * Determines whether to add or set the offset values. */ declare enum OffsetMode { Add = 0, Set = 1 } declare class Point { x: number; y: number; constructor(x: number, y: number); } /** @hidden */ interface OutOfViewPort { /** Out of view port at Top or Left */ back: number; /** Out of view port at Bottom or Right */ forward: number; } interface PositionSettings { /** Direction in which the component should show */ horizontalDirection?: HorizontalAlignment; /** Direction in which the component should show */ verticalDirection?: VerticalAlignment; /** Target's starting point */ horizontalStartPoint?: HorizontalAlignment; /** Target's starting point */ verticalStartPoint?: VerticalAlignment; /** Animation applied while overlay opens */ openAnimation?: AnimationReferenceMetadata; /** Animation applied while overlay closes */ closeAnimation?: AnimationReferenceMetadata; /** The size up to which element may shrink when shown in elastic position strategy */ minSize?: Size; } interface OverlaySettings { /** Attaching target for the component to show */ target?: Point | HTMLElement; /** Position strategy to use with these settings */ positionStrategy?: IPositionStrategy; /** Scroll strategy to use with these settings */ scrollStrategy?: IScrollStrategy; /** Set if the overlay should be in modal mode */ modal?: boolean; /** Set if the overlay should close on outside click */ closeOnOutsideClick?: boolean; /** Set if the overlay should close when `Esc` key is pressed */ closeOnEscape?: boolean; /** Set the outlet container to attach the overlay to */ outlet?: IgxOverlayOutletDirective | ElementRef; /** * @hidden @internal * Elements to be excluded for closeOnOutsideClick. * Clicking on the elements in this collection will not close the overlay when closeOnOutsideClick = true. */ excludeFromOutsideClick?: HTMLElement[]; } interface OverlayEventArgs extends IBaseEventArgs { /** Id of the overlay generated with `attach()` method */ id: string; /** Available when `Type` is provided to the `attach()` method and allows access to the created Component instance */ componentRef?: ComponentRef; /** Will provide the elementRef of the markup that will be displayed in the overlay */ elementRef?: ElementRef; /** Will provide the overlay settings which will be used when the component is attached */ settings?: OverlaySettings; /** Will provide the original keyboard event if closed from ESC or click */ event?: Event; } interface OverlayCancelableEventArgs extends OverlayEventArgs, CancelableEventArgs { } interface OverlayClosingEventArgs extends OverlayEventArgs, CancelableBrowserEventArgs { } interface OverlayAnimationEventArgs extends IBaseEventArgs { /** Id of the overlay generated with `attach()` method */ id: string; /** Animation player that will play the animation */ animationPlayer: AnimationPlayer; /** Type of animation to be played. It should be either 'open' or 'close' */ animationType: 'open' | 'close'; } interface Size { /** Gets or sets the horizontal component of Size */ width: number; /** Gets or sets the vertical component of Size */ height: number; } /** @hidden */ interface OverlayInfo { id?: string; visible?: boolean; detached?: boolean; elementRef?: ElementRef; componentRef?: ComponentRef; settings?: OverlaySettings; initialSize?: Size; hook?: HTMLElement; openAnimationPlayer?: AnimationPlayer; openAnimationDetaching?: boolean; closeAnimationPlayer?: AnimationPlayer; closeAnimationDetaching?: boolean; ngZone: NgZone; transformX?: number; transformY?: number; event?: Event; wrapperElement?: HTMLElement; size?: string; } /** @hidden */ interface ConnectedFit { contentElementRect?: Partial; targetRect?: Partial; viewPortRect?: Partial; fitHorizontal?: OutOfViewPort; fitVertical?: OutOfViewPort; left?: number; right?: number; top?: number; bottom?: number; horizontalOffset?: number; verticalOffset?: number; } interface OverlayCreateSettings extends OverlaySettings { /** * An `Injector` instance to add in the created component ref's injectors tree. */ injector?: Injector; } /** @hidden @internal */ declare abstract class IgxPaginatorToken { abstract page: number; abstract perPage: number; abstract totalRecords: number; abstract pageChange: EventEmitter; abstract paginate(val: number): void; } declare class IgxPaginatorContentDirective { /** * @internal * @hidden */ cssClass: string; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * Paginator component description * @igxParent IgxGridComponent, IgxTreeGridComponent, IgxHierarchicalGridComponent, IgxPivotGridComponent, * */ declare class IgxPaginatorComponent implements IgxPaginatorToken { private elementRef; private cdr; /** * @hidden * @internal */ customContent: IgxPaginatorContentDirective; /** * Emitted when `perPage` property value of the paginator is changed. * * @example * ```html * * ``` * ```typescript * public onPerPageChange(perPage: number) { * this.perPage = perPage; * } * ``` */ perPageChange: EventEmitter; /** * Emitted after the current page is changed. * * @example * ```html * * ``` * ```typescript * public onPageChange(page: number) { * this.currentPage = page; * } * ``` */ pageChange: EventEmitter; /** * Emitted before paging is performed. * * @remarks * Returns an object consisting of the current and next pages. * @example * ```html * * ``` */ paging: EventEmitter; /** * Emitted after paging is performed. * * @remarks * Returns an object consisting of the previous and current pages. * @example * ```html * * ``` */ pagingDone: EventEmitter; /** * Total pages calculated from totalRecords and perPage */ totalPages: number; protected _page: number; protected _totalRecords: number; protected _selectOptions: number[]; protected _perPage: number; private _resourceStrings; private _overlaySettings; private defaultSelectValues; /** @hidden @internal */ cssClass: string; /** * Gets/Sets the current page of the paginator. * The default is 0. * ```typescript * let page = this.paginator.page; * ``` * * @memberof IgxPaginatorComponent */ get page(): number; set page(value: number); /** * Gets/Sets the number of visible items per page in the paginator. * The default is 15. * ```typescript * let itemsPerPage = this.paginator.perPage; * ``` * * @memberof IgxPaginatorComponent */ get perPage(): number; set perPage(value: number); /** * Sets the total records. * ```typescript * let totalRecords = this.paginator.totalRecords; * ``` * * @memberof IgxPaginatorComponent */ get totalRecords(): number; set totalRecords(value: number); /** * Sets custom options in the select of the paginator * ```typescript * let options = this.paginator.selectOptions; * ``` * * @memberof IgxPaginatorComponent */ get selectOptions(): Array; set selectOptions(value: Array); /** * Sets custom OverlaySettings. * ```html * * ``` */ get overlaySettings(): OverlaySettings; set overlaySettings(value: OverlaySettings); /** * An accessor that sets the resource strings. * By default it uses EN resources. */ set resourceStrings(value: IPaginatorResourceStrings); /** * An accessor that returns the resource strings. */ get resourceStrings(): IPaginatorResourceStrings; constructor(elementRef: ElementRef, cdr: ChangeDetectorRef); /** * Returns if the current page is the last page. * ```typescript * const lastPage = this.paginator.isLastPage; * ``` */ get isLastPage(): boolean; /** * Returns if the current page is the first page. * ```typescript * const lastPage = this.paginator.isFirstPage; * ``` */ get isFirstPage(): boolean; /** * Returns if the first pager buttons should be disabled * @hidden * @deprecated in version 18.1.0. Use the `isFirstPage` property instead. */ get isFirstPageDisabled(): boolean; /** * Returns if the last pager buttons should be disabled * @hidden * @deprecated in version 18.1.0. Use the `isLastPage` property instead. */ get isLastPageDisabled(): boolean; get nativeElement(): any; /** * Goes to the next page of the `IgxPaginatorComponent`, if the paginator is not already at the last page. * ```typescript * this.paginator.nextPage(); * ``` * * @memberof IgxPaginatorComponent */ nextPage(): void; /** * Goes to the previous page of the `IgxPaginatorComponent`, if the paginator is not already at the first page. * ```typescript * this.paginator.previousPage(); * ``` * * @memberof IgxPaginatorComponent */ previousPage(): void; /** * Goes to the desired page index. * ```typescript * this.paginator.paginate(1); * ``` * * @param val * @memberof IgxPaginatorComponent */ paginate(val: number): void; private sortUniqueOptions; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } declare class IgxPageSizeSelectorComponent { paginator: IgxPaginatorComponent; /** * @internal * @hidden */ cssClass: string; constructor(paginator: IgxPaginatorComponent); static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } declare class IgxPageNavigationComponent { paginator: IgxPaginatorComponent; /** * @internal * @hidden */ cssClass: string; /** * Sets the `role` attribute of the element. */ role: string; constructor(paginator: IgxPaginatorComponent); static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } declare class IgxEditRow { id: any; index: number; data: any; grid: GridType; transactionState: any; state: any; newData: any; rowFormGroup: FormGroup<{}>; constructor(id: any, index: number, data: any, grid: GridType); createRowEditEventArgs(includeNewValue?: boolean, event?: Event): IGridEditEventArgs; createRowDataEventArgs(event?: Event): IRowDataCancelableEventArgs; createRowEditDoneEventArgs(cachedRowData: any, event?: Event): IGridEditDoneEventArgs; get isAddRow(): boolean; } declare class IgxAddRow extends IgxEditRow { recordRef: any; constructor(id: any, index: number, data: any, recordRef: any, grid: GridType); createRowEditEventArgs(includeNewValue?: boolean, event?: Event): IGridEditEventArgs; createRowEditDoneEventArgs(cachedRowData: any, event?: Event): IGridEditDoneEventArgs; get isAddRow(): boolean; } interface IgxAddRowParent { /** * @deprecated since version 17.1.0. Use `rowKey` instead */ rowID: string; rowKey: any; index: number; asChild: boolean; isPinned: boolean; } declare class IgxCell { id: any; rowIndex: number; column: any; value: any; _editValue: any; rowData: any; grid: GridType; primaryKey: any; state: any; pendingValue: any; constructor(id: any, rowIndex: number, column: any, value: any, _editValue: any, rowData: any, grid: GridType); get editValue(): any; set editValue(value: any); castToNumber(value: any): any; createCellEditEventArgs(includeNewValue?: boolean, event?: Event): IGridEditEventArgs; createCellEditDoneEventArgs(value: any, event?: Event): IGridEditDoneEventArgs; } declare class IgxCellCrudState { grid: GridType; cell: IgxCell | null; row: IgxEditRow | null; isInCompositionMode: boolean; createCell(cell: any): IgxCell; createRow(cell: IgxCell): IgxEditRow; sameRow(rowID: any): boolean; sameCell(cell: IgxCell): boolean; get cellInEditMode(): boolean; beginCellEdit(event?: Event): void; cellEdit(event?: Event): IGridEditEventArgs; updateCell(exit: boolean, event?: Event): IGridEditEventArgs; cellEditDone(event: any, addRow: boolean): IGridEditDoneEventArgs; /** Exit cell edit mode */ exitCellEdit(event?: Event): IGridEditDoneEventArgs; /** Clears cell editing state */ endCellEdit(): void; /** Returns whether the targeted cell is in edit mode */ targetInEdit(rowIndex: number, columnIndex: number): boolean; } declare class IgxRowCrudState extends IgxCellCrudState { closeRowEditingOverlay: Subject; private _rowEditingBlocked; private _rowEditingStarted; get primaryKey(): any; get rowInEditMode(): RowType; get rowEditing(): boolean; get nonEditable(): boolean; get rowEditingBlocked(): boolean; set rowEditingBlocked(val: boolean); /** Enters row edit mode */ beginRowEdit(event?: Event): boolean; rowEdit(event: Event): IGridEditEventArgs; updateRow(commit: boolean, event?: Event): IGridEditEventArgs; /** * @hidden @internal */ endRowTransaction(commit: boolean, event?: Event): IGridEditEventArgs | IRowDataCancelableEventArgs; rowEditDone(cachedRowData: any, event: Event): IGridEditDoneEventArgs; /** Exit row edit mode */ exitRowEdit(cachedRowData: any, event?: Event): IGridEditDoneEventArgs; /** Clears row editing state */ endRowEdit(): void; /** Clears cell and row editing state and closes row editing template if it is open */ endEditMode(): void; updateRowEditData(row: IgxEditRow, value?: any): void; protected getParentRowId(): any; } declare class IgxRowAddCrudState extends IgxRowCrudState { addRowParent: IgxAddRowParent; /** * @hidden @internal */ createAddRow(parentRow: RowType, asChild?: boolean): IgxAddRow; /** * @hidden @internal */ createAddRowParent(row: RowType, newRowAsChild?: boolean): void; /** * @hidden @internal */ endRowTransaction(commit: boolean, event?: Event): IGridEditEventArgs | IRowDataCancelableEventArgs; /** * @hidden @internal */ endAddRow(): void; /** * @hidden * @internal * TODO: consider changing modifier */ _findRecordIndexInView(rec: any): number; protected getParentRowId(): any; } declare class IgxGridCRUDService extends IgxRowAddCrudState { enterEditMode(cell: any, event?: Event): boolean; /** * Enters add row mode by creating temporary dummy so the user can fill in new row cells. * * @param parentRow Parent row after which the Add Row UI will be rendered. * If `null` will show it at the bottom after all rows (or top if there are not rows). * @param asChild Specifies if the new row should be added as a child to a tree row. * @param event Base event that triggered the add row mode. */ enterAddRowMode(parentRow: RowType, asChild?: boolean, event?: Event): void; /** * Finishes the row transactions on the current row and returns whether the grid editing was canceled. * * @remarks * If `commit === true`, passes them from the pending state to the data (or transaction service) * @example * ```html * * ``` * @param commit */ endEdit(commit?: boolean, event?: Event): boolean; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵprov: i0.ɵɵInjectableDeclaration; } /** * Represents a range selection between certain rows and columns of the grid. * Range selection can be made either through drag selection or through keyboard selection. */ interface GridSelectionRange { /** The index of the starting row of the selection range. */ rowStart: number; /** The index of the ending row of the selection range. */ rowEnd: number; /** * The identifier or index of the starting column of the selection range. * It can be either a string representing the column's field name or a numeric index. */ columnStart: string | number; /** * The identifier or index of the ending column of the selection range. * It can be either a string representing the column's field name or a numeric index. */ columnEnd: string | number; } /** * Represents a single selected cell or node in a grid. */ interface ISelectionNode { /** * The index of the selected row. */ row: number; /** * The index of the selected column. */ column: number; /** * (Optional) * Additional layout information for multi-row selection nodes. */ layout?: IMultiRowLayoutNode; /** * (Optional) * Indicates if the selected node is a summary row. * This property is true if the selected row is a summary row; otherwise, it is false. */ isSummaryRow?: boolean; } interface IMultiRowLayoutNode { rowStart: number; colStart: number; rowEnd: number; colEnd: number; columnVisibleIndex: number; } /** * Represents the state of the keyboard when selecting. */ interface ISelectionKeyboardState { /** The selected node in the grid, if any. Can be null if no node is selected. */ node: null | ISelectionNode; /** Indicates whether the Shift key is currently pressed during the selection. */ shift: boolean; /** The range of the selected cells in the grid. Can be null when resetting the selection. */ range: GridSelectionRange; /** Indicates whether the selection is currently active (being performed). `False` when resetting the selection. */ active: boolean; } /** * Represents the state of the grid selection using pointer interactions (mouse). * Extends ISelectionKeyboardState to include pointer-specific properties. */ interface ISelectionPointerState extends ISelectionKeyboardState { /** Indicates whether the Ctrl key is currently pressed during the selection. */ ctrl: boolean; /** Indicates whether the primary pointer button is pressed during the selection (clicked). */ primaryButton: boolean; } /** * Represents the state of the columns in the grid. */ interface IColumnSelectionState { /** Represents the field name of the selected column, if any. Can be null if no column is selected. */ field: null | string; /** An array of strings representing the ranges of selected columns in the grid. */ range: string[]; } /** * Represents the overall state of grid selection, combining both keyboard and pointer interaction states. * It can be either an ISelectionKeyboardState or an ISelectionPointerState. */ type SelectionState = ISelectionKeyboardState | ISelectionPointerState; /** * Injection token for accessing the grid transaction object. * This allows injecting the grid transaction object into components or services. */ declare const IgxGridTransaction: InjectionToken; declare interface IFilteringState { expressionsTree: IFilteringExpressionsTree; advancedExpressionsTree?: IFilteringExpressionsTree; strategy?: IFilteringStrategy; } declare class FilterUtil { static filter(data: T[], state: IFilteringState, grid?: GridType): T[]; } interface IFilteringStrategy { filter(data: any[], expressionsTree: IFilteringExpressionsTree, advancedExpressionsTree?: IFilteringExpressionsTree, grid?: GridType): any[]; getFilterItems(column: ColumnType, tree: IFilteringExpressionsTree): Promise; } interface IgxFilterItem { value: any; label?: string; children?: IgxFilterItem[]; } declare abstract class BaseFilteringStrategy implements IFilteringStrategy { findMatchByExpression(rec: any, expr: IFilteringExpression, isDate?: boolean, isTime?: boolean, grid?: GridType): boolean; matchRecord(rec: any, expressions: IFilteringExpressionsTree | IFilteringExpression, grid?: GridType, entity?: string): boolean; private findEntityByName; getFilterItems(column: ColumnType, tree: IFilteringExpressionsTree): Promise; protected getFilterItemLabel(column: ColumnType, value: any, applyFormatter: boolean, data: any): any; protected getUniqueFilterItems(column: ColumnType, filterItems: IgxFilterItem[]): any[]; protected shouldFormatFilterValues(_column: ColumnType): boolean; abstract filter(data: any[], expressionsTree: IFilteringExpressionsTree, advancedExpressionsTree?: IFilteringExpressionsTree, grid?: GridType): any[]; protected abstract getFieldValue(rec: any, fieldName: string, isDate?: boolean, isTime?: boolean, grid?: GridType): any; } declare class NoopFilteringStrategy extends BaseFilteringStrategy { protected getFieldValue(rec: any, _fieldName: string): any; private static _instance; static instance(): NoopFilteringStrategy; filter(data: any[], _: IFilteringExpressionsTree, __?: IFilteringExpressionsTree): any[]; } declare class FilteringStrategy extends BaseFilteringStrategy { private static _instance; static instance(): FilteringStrategy; filter(data: T[], expressionsTree: IFilteringExpressionsTree, advancedExpressionsTree: IFilteringExpressionsTree, grid: GridType): T[]; protected getFieldValue(rec: any, fieldName: string, isDate?: boolean, isTime?: boolean, grid?: GridType): any; } declare class FormattedValuesFilteringStrategy extends FilteringStrategy { private fields?; /** * Creates a new instance of FormattedValuesFilteringStrategy. * * @param fields An array of column field names that should be formatted. * If omitted the values of all columns which has formatter will be formatted. */ constructor(fields?: string[]); protected shouldFormatFilterValues(column: ColumnType): boolean; } /** * This enumeration is used to configure whether the drop position is set before or after * the target. */ declare enum DropPosition { BeforeDropTarget = 0, AfterDropTarget = 1 } /** * @hidden * @internal */ declare class IgxColumnMovingService { cancelDrop: boolean; icon: HTMLElement; column: ColumnType; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵprov: i0.ɵɵInjectableDeclaration; } interface ITreeGridRecord { key: any; data: any; children?: ITreeGridRecord[]; parent?: ITreeGridRecord; level?: number; isFilteredOutParent?: boolean; expanded?: boolean; } interface IDataCloneStrategy { /** * Clones provided data * @param data primitive value, date and object to be cloned * @returns deep copy of provided value */ clone(data: any): any; } /** * Simplified data clone strategy that deep clones primitive values, dates and objects. * Does not support circular references in objects. */ declare class DefaultDataCloneStrategy implements IDataCloneStrategy { clone(data: any): any; } /** * Data clone strategy that is uses cache to deep clone primitive values, dates and objects. * It allows using circular references inside object. */ declare class CachedDataCloneStrategy implements IDataCloneStrategy { clone(data: any): any; } declare enum TransactionType { ADD = "add", DELETE = "delete", UPDATE = "update" } declare enum TransactionEventOrigin { UNDO = "undo", REDO = "redo", CLEAR = "clear", ADD = "add", END = "endPending" } interface Transaction { id: any; type: TransactionType; newValue: any; } /** * @experimental * @hidden */ interface HierarchicalTransaction extends Transaction { path?: any[]; } interface State { value: any; recordRef: any; type: TransactionType; } interface Action { transaction: T; recordRef: any; } interface StateUpdateEvent { origin: TransactionEventOrigin; actions: Action[]; } /** * @experimental * @hidden */ interface HierarchicalState extends State { path: any[]; } interface TransactionService { /** * Returns whether transaction is enabled for this service */ readonly enabled: boolean; /** * Gets/Sets the data clone strategy used to clone data */ cloneStrategy: IDataCloneStrategy; /** * Event fired when transaction state has changed - add transaction, commit all transactions, undo and redo */ onStateUpdate?: EventEmitter; /** * @returns if there are any transactions in the Undo stack */ canUndo: boolean; /** * @returns if there are any transactions in the Redo stack */ canRedo: boolean; /** * Adds provided transaction with recordRef if any * * @param transaction Transaction to be added * @param recordRef Reference to the value of the record in the data source related to the changed item */ add(transaction: T, recordRef?: any): void; /** * Returns all recorded transactions in chronological order * * @param id Optional record id to get transactions for * @returns All transaction in the service or for the specified record */ getTransactionLog(id?: any): T[]; /** * Remove the last transaction if any */ undo(): void; /** * Applies the last undone transaction if any */ redo(): void; /** * Returns aggregated changes from all transactions * * @param mergeChanges If set to true will merge each state's value over relate recordRef * and will record resulting value in the related transaction * @returns Collection of aggregated transactions for each changed record */ getAggregatedChanges(mergeChanges: boolean): T[]; /** * Returns the state of the record with provided id * * @param id The id of the record * @param pending Should get pending state * @returns State of the record if any */ getState(id: any, pending?: boolean): S; /** * Returns value of the required id including all uncommitted changes * * @param id The id of the record to return value for * @param mergeChanges If set to true will merge state's value over relate recordRef * and will return merged value * @returns Value with changes or **null** */ getAggregatedValue(id: any, mergeChanges: boolean): any; /** * Applies all transactions over the provided data * * @param data Data source to update * @param id Optional record id to commit transactions for */ commit(data: any[], id?: any): void; /** * Clears all transactions * * @param id Optional record id to clear transactions for */ clear(id?: any): void; /** * Starts pending transactions. All transactions passed after call to startPending * will not be added to transaction log */ startPending(): void; /** * Clears all pending transactions and aggregated pending state. If commit is set to true * commits pending states as single transaction * * @param commit Should commit the pending states */ endPending(commit: boolean): void; } /** * Sets the selection type - single, multi or range. */ declare const CalendarSelection: { readonly SINGLE: "single"; readonly MULTI: "multi"; readonly RANGE: "range"; }; type CalendarSelection = (typeof CalendarSelection)[keyof typeof CalendarSelection]; declare const enum ScrollDirection { PREV = "prev", NEXT = "next", NONE = "none" } interface IViewDateChangeEventArgs { previousValue: Date; currentValue: Date; } declare const IgxCalendarView: { readonly Month: "month"; readonly Year: "year"; readonly Decade: "decade"; }; /** * Determines the Calendar active view - days, months or years. */ type IgxCalendarView = (typeof IgxCalendarView)[keyof typeof IgxCalendarView]; declare const range: (start: number, stop: number, step?: number) => any[]; /** * Returns true for leap years, false for non-leap years. * * @export * @param year * @returns */ declare const isLeap: (year: number) => boolean; declare const weekDay: (year: number, month: number, day: number) => number; /** * Return weekday and number of days for year, month. * * @export * @param year * @param month * @returns */ declare const monthRange: (year: number, month: number) => number[]; interface IFormattedParts { value: string; literal?: string; combined: string; } interface IFormattingOptions { day?: 'numeric' | '2-digit'; month?: 'numeric' | '2-digit' | 'long' | 'short' | 'narrow'; weekday?: 'long' | 'short' | 'narrow'; year?: 'numeric' | '2-digit'; } interface IFormattingViews { day?: boolean; month?: boolean; year?: boolean; } declare enum WEEKDAYS { SUNDAY = 0, MONDAY = 1, TUESDAY = 2, WEDNESDAY = 3, THURSDAY = 4, FRIDAY = 5, SATURDAY = 6 } declare class Calendar { timedelta(date: Date, interval: string, units: number): Date; } /** * @hidden * @internal */ interface MRLColumnSizeInfo { ref: ColumnType; width: number; colSpan: number; colEnd: number; widthSetByUser: boolean; } /** * @hidden * @internal */ interface MRLResizeColumnInfo { target: ColumnType; spanUsed: number; } interface IFieldPipeArgs { /** The date/time components that a date column will display, using predefined options or a custom format string. */ format?: string; /** A timezone offset (such as '+0430'), or a standard UTC/GMT or continental US timezone abbreviation. */ timezone?: string; /** * Decimal representation options, specified by a string in the following format: * `{minIntegerDigits}`.`{minFractionDigits}`-`{maxFractionDigits}`. * `minIntegerDigits`: The minimum number of integer digits before the decimal point. Default is 1. * `minFractionDigits`: The minimum number of digits after the decimal point. Default is 0. * `maxFractionDigits`: The maximum number of digits after the decimal point. Default is 3. */ digitsInfo?: string; /** The currency code of type string, default value undefined */ currencyCode?: string; /** * Allow us to display currency 'symbol' or 'code' or 'symbol-narrow' or our own string. * The value is of type string. By default is set to 'symbol' */ display?: string; /** The first week day to be displayed in calendar when filtering or editing a date column */ weekStart?: WEEKDAYS | number; } interface IColumnPipeArgs extends IFieldPipeArgs { } interface IFieldEditorOptions { /** * A custom input format string used for the built-in editors of date/time columns. * See the Editing section under https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/column-types#datetime-date-and-time */ dateTimeFormat?: string; } interface IColumnEditorOptions extends IFieldEditorOptions { } interface ISortingOptions { mode: 'single' | 'multiple'; } interface ISummaryExpression { fieldName: string; customSummary?: any; } interface IgxSummaryResult { key: string; label: string; summaryResult: any; /** * Apply default formatting based on the grid column type. * ```typescript * const result: IgxSummaryResult = { * key: 'key', * label: 'label', * defaultFormatting: true * } * ``` * * @memberof IgxSummaryResult */ defaultFormatting?: boolean; } interface ISummaryRecord { summaries: Map; max?: number; cellIndentation?: number; } declare class IgxSummaryOperand { /** * Counts all the records in the data source. * If filtering is applied, counts only the filtered records. * ```typescript * IgxSummaryOperand.count(dataSource); * ``` * * @memberof IgxSummaryOperand */ static count(data: any[]): number; /** * Executes the static `count` method and returns `IgxSummaryResult[]`. * ```typescript * interface IgxSummaryResult { * key: string; * label: string; * summaryResult: any; * } * ``` * Can be overridden in the inherited classes to provide customization for the `summary`. * ```typescript * class CustomSummary extends IgxSummaryOperand { * constructor() { * super(); * } * public operate(data: any[], allData: any[], fieldName: string, groupRecord: IGroupByRecord): IgxSummaryResult[] { * const result = []; * result.push({ * key: "test", * label: "Test", * summaryResult: IgxSummaryOperand.count(data) * }); * return result; * } * } * this.grid.getColumnByName('ColumnName').summaries = CustomSummary; * ``` * * @memberof IgxSummaryOperand */ operate(data?: any[], _allData?: any[], _fieldName?: string, _groupRecord?: IGroupByRecord): IgxSummaryResult[]; } declare class IgxNumberSummaryOperand extends IgxSummaryOperand { /** * Returns the minimum numeric value in the provided data records. * If filtering is applied, returns the minimum value in the filtered data records. * ```typescript * IgxNumberSummaryOperand.min(data); * ``` * * @memberof IgxNumberSummaryOperand */ static min(data: any[]): number; /** * Returns the maximum numeric value in the provided data records. * If filtering is applied, returns the maximum value in the filtered data records. * ```typescript * IgxNumberSummaryOperand.max(data); * ``` * * @memberof IgxNumberSummaryOperand */ static max(data: any[]): number; /** * Returns the sum of the numeric values in the provided data records. * If filtering is applied, returns the sum of the numeric values in the data records. * ```typescript * IgxNumberSummaryOperand.sum(data); * ``` * * @memberof IgxNumberSummaryOperand */ static sum(data: any[]): number; /** * Returns the average numeric value in the data provided data records. * If filtering is applied, returns the average numeric value in the filtered data records. * ```typescript * IgxSummaryOperand.average(data); * ``` * * @memberof IgxNumberSummaryOperand */ static average(data: any[]): number; /** * Executes the static methods and returns `IgxSummaryResult[]`. * ```typescript * interface IgxSummaryResult { * key: string; * label: string; * summaryResult: any; * } * ``` * Can be overridden in the inherited classes to provide customization for the `summary`. * ```typescript * class CustomNumberSummary extends IgxNumberSummaryOperand { * constructor() { * super(); * } * public operate(data: any[], allData: any[], fieldName: string, groupRecord: IGroupByRecord): IgxSummaryResult[] { * const result = super.operate(data, allData, fieldName, groupRecord); * result.push({ * key: "avg", * label: "Avg", * summaryResult: IgxNumberSummaryOperand.average(data) * }); * result.push({ * key: 'mdn', * label: 'Median', * summaryResult: this.findMedian(data) * }); * return result; * } * } * this.grid.getColumnByName('ColumnName').summaries = CustomNumberSummary; * ``` * * @memberof IgxNumberSummaryOperand */ operate(data?: any[], allData?: any[], fieldName?: string, groupRecord?: IGroupByRecord): IgxSummaryResult[]; } declare class IgxDateSummaryOperand extends IgxSummaryOperand { /** * Returns the latest date value in the data records. * If filtering is applied, returns the latest date value in the filtered data records. * ```typescript * IgxDateSummaryOperand.latest(data); * ``` * * @memberof IgxDateSummaryOperand */ static latest(data: any[]): any; /** * Returns the earliest date value in the data records. * If filtering is applied, returns the latest date value in the filtered data records. * ```typescript * IgxDateSummaryOperand.earliest(data); * ``` * * @memberof IgxDateSummaryOperand */ static earliest(data: any[]): any; /** * Executes the static methods and returns `IgxSummaryResult[]`. * ```typescript * interface IgxSummaryResult { * key: string; * label: string; * summaryResult: any; * } * ``` * Can be overridden in the inherited classes to provide customization for the `summary`. * ```typescript * class CustomDateSummary extends IgxDateSummaryOperand { * constructor() { * super(); * } * public operate(data: any[], allData: any[], fieldName: string, groupRecord: IGroupByRecord): IgxSummaryResult[] { * const result = super.operate(data, allData, fieldName, groupRecord); * result.push({ * key: "deadline", * label: "Deadline Date", * summaryResult: this.calculateDeadline(data); * }); * return result; * } * } * this.grid.getColumnByName('ColumnName').summaries = CustomDateSummary; * ``` * * @memberof IgxDateSummaryOperand */ operate(data?: any[], allData?: any[], fieldName?: string, groupRecord?: IGroupByRecord): IgxSummaryResult[]; } declare class IgxTimeSummaryOperand extends IgxSummaryOperand { /** * Returns the latest time value in the data records. Compare only the time part of the date. * If filtering is applied, returns the latest time value in the filtered data records. * ```typescript * IgxTimeSummaryOperand.latestTime(data); * ``` * * @memberof IgxTimeSummaryOperand */ static latestTime(data: any[]): any; /** * Returns the earliest time value in the data records. Compare only the time part of the date. * If filtering is applied, returns the earliest time value in the filtered data records. * ```typescript * IgxTimeSummaryOperand.earliestTime(data); * ``` * * @memberof IgxTimeSummaryOperand */ static earliestTime(data: any[]): any; /** * @memberof IgxTimeSummaryOperand */ operate(data?: any[], allData?: any[], fieldName?: string, groupRecord?: IGroupByRecord): IgxSummaryResult[]; } interface IGroupingState { expressions: IGroupingExpression[]; expansion: IGroupByExpandState[]; defaultExpanded: boolean; } /** * Represents a sorting strategy for the grid data * Contains a single method sort that sorts the provided data based on the given sorting expressions */ interface IGridSortingStrategy { /** * `data`: The array of data to be sorted. Could be of any type. * `expressions`: An array of sorting expressions that define the sorting rules. The expression contains information like file name, whether the letter case should be taken into account, etc. * `grid`: (Optional) The instance of the grid where the sorting is applied. * Returns a new array with the data sorted according to the sorting expressions. */ sort(data: any[], expressions: ISortingExpression[], grid?: GridType): any[]; } /** * Represents a grouping strategy for the grid data, extending the Sorting Strategy interface (contains a sorting method). */ interface IGridGroupingStrategy extends IGridSortingStrategy { /** * The method groups the provided data based on the given grouping state and returns the result. * `data`: The array of data to be grouped. Could be of any type. * `state`: The grouping state that defines the grouping settings and expressions. * `grid`: (Optional) The instance of the grid where the grouping is applied. * `groupsRecords`: (Optional) An array that holds the records for each group. * `fullResult`: (Optional) The complete result of grouping including groups and summary data. * Returns an object containing the result of the grouping operation. */ groupBy(data: any[], state: IGroupingState, grid?: any, groupsRecords?: any[], fullResult?: IGroupByResult): IGroupByResult; } /** * Represents a class implementing the IGridSortingStrategy interface. * It provides sorting functionality for grid data based on sorting expressions. */ declare class IgxSorting implements IGridSortingStrategy { /** * Sorts the provided data based on the given sorting expressions. * `data`: The array of data to be sorted. * `expressions`: An array of sorting expressions that define the sorting rules. The expression contains information like file name, whether the letter case should be taken into account, etc. * `grid`: (Optional) The instance of the grid where the sorting is applied. * Returns a new array with the data sorted according to the sorting expressions. */ sort(data: any[], expressions: ISortingExpression[], grid?: GridType): any[]; /** * Recursively groups the provided data based on the given grouping state and returns the grouped result. * Returns an array containing the grouped result. * @internal */ protected groupDataRecursive(data: any[], state: IGroupingState, level: number, parent: IGroupByRecord, metadata: IGroupByRecord[], grid?: GridType, groupsRecords?: any[], fullResult?: IGroupByResult): any[]; /** * Retrieves the value of the specified field from the given object, considering date and time data types. * `key`: The key of the field to retrieve. * `isDate`: (Optional) Indicates if the field is of type Date. * `isTime`: (Optional) Indicates if the field is of type Time. * Returns the value of the specified field in the data object. * @internal */ protected getFieldValue(obj: T, key: string, isDate?: boolean, isTime?: boolean): unknown; /** * Groups the records in the provided data array based on the given grouping expression. * `groupingComparer`: (Optional) A custom grouping comparator to determine the members of the group. * Returns an array containing the records that belong to the group. * @internal */ private groupedRecordsByExpression; /** * Sorts the provided data array based on the given sorting expressions. * The method can be used when multiple sorting is performed, going through each one * Returns a new array with the data sorted according to the sorting expressions. * @internal */ private sortDataRecursive; } /** * Represents a class implementing the IGridGroupingStrategy interface and extending the IgxSorting class. * It provides a method to group data based on the given grouping state. */ declare class IgxGrouping extends IgxSorting implements IGridGroupingStrategy { /** * Groups the provided data based on the given grouping state. * Returns an object containing the result of the grouping operation. */ groupBy(data: any[], state: IGroupingState, grid?: any, groupsRecords?: any[], fullResult?: IGroupByResult): IGroupByResult; } /** * Represents a class implementing the IGridSortingStrategy interface with a no-operation sorting strategy. * It performs no sorting and returns the data as it is. */ declare class NoopSortingStrategy implements IGridSortingStrategy { private static _instance; private constructor(); static instance(): NoopSortingStrategy; sort(data: any[]): any[]; } /** * Represents a class extending the IgxSorting class * Provides custom data record sorting. */ declare class IgxDataRecordSorting extends IgxSorting { /** * Overrides the base method to retrieve the field value from the data object instead of the record object. * Returns the value of the specified field in the data object. */ protected getFieldValue(obj: any, key: string, isDate?: boolean, isTime?: boolean): any; } /** * @hidden */ declare class IgxScrollInertiaDirective implements OnInit, OnDestroy { private element; private _zone; IgxScrollInertiaDirection: string; IgxScrollInertiaScrollContainer: any; wheelStep: number; inertiaStep: number; smoothingStep: number; smoothingDuration: number; swipeToleranceX: number; inertiaDeltaY: number; inertiaDeltaX: number; inertiaDuration: number; private _touchInertiaAnimID; private _startX; private _startY; private _touchStartX; private _touchStartY; private _lastTouchEnd; private _lastTouchX; private _lastTouchY; private _savedSpeedsX; private _savedSpeedsY; private _totalMovedX; private _offsetRecorded; private _offsetDirection; private _lastMovedX; private _lastMovedY; private _nextX; private _nextY; private parentElement; private baseDeltaMultiplier; private firefoxDeltaMultiplier; constructor(element: ElementRef, _zone: NgZone); ngOnInit(): void; ngOnDestroy(): void; /** * @hidden * Function that is called when scrolling with the mouse wheel or using touchpad */ protected onWheel(evt: any): void; /** * @hidden * When there is still room to scroll up/down prevent the parent elements from scrolling too. */ protected preventParentScroll(evt: any, preventDefault: any, nextTop?: number): void; /** * @hidden * Checks if the wheel event would have scrolled an element under the display container * in DOM tree so that it can correctly be ignored until that element can no longer be scrolled. */ protected didChildScroll(evt: any, scrollDeltaX: any, scrollDeltaY: any): boolean; /** * @hidden * Function that is called the first moment we start interacting with the content on a touch device */ protected onTouchStart(event: any): boolean; /** * @hidden * Function that is called when we need to scroll the content based on touch interactions */ protected onTouchMove(event: any): void; protected onTouchEnd(event: any): void; protected _smoothWheelScroll(delta: any): void; protected _inertiaInit(speedX: any, speedY: any): void; private calcAxisCoords; private _scrollTo; private _scrollToX; private _scrollToY; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } declare class DisplayContainerComponent { cdr: ChangeDetectorRef; _viewContainer: ViewContainerRef; _vcr: any; _scrollInertia: IgxScrollInertiaDirective; cssClass: string; notVirtual: boolean; scrollDirection: string; scrollContainer: any; constructor(cdr: ChangeDetectorRef, _viewContainer: ViewContainerRef); static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } declare class VirtualHelperBaseDirective implements OnDestroy, AfterViewInit { elementRef: ElementRef; cdr: ChangeDetectorRef; protected _zone: NgZone; document: any; protected platformUtil: PlatformUtil; scrollAmount: number; _size: number; destroyed: any; protected destroy$: Subject; private _afterViewInit; private _scrollNativeSize; private _detached; constructor(elementRef: ElementRef, cdr: ChangeDetectorRef, _zone: NgZone, document: any, platformUtil: PlatformUtil); onScroll(event: any): void; ngAfterViewInit(): void; get nativeElement(): HTMLElement; ngOnDestroy(): void; calculateScrollNativeSize(): number; set size(value: number); get size(): number; get scrollNativeSize(): number; protected get isAttachedToDom(): boolean; protected handleMutations(event: any): void; protected restoreScroll(): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } declare class IgxForOfSyncService { private _master; /** * @hidden */ isMaster(directive: IgxGridForOfDirective): boolean; /** * @hidden */ setMaster(directive: IgxGridForOfDirective, forced?: boolean): void; /** * @hidden */ resetMaster(): void; /** * @hidden */ sizesCache(dir: string): number[]; /** * @hidden */ chunkSize(dir: string): number; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵprov: i0.ɵɵInjectableDeclaration; } declare class IgxForOfScrollSyncService { private _masterScroll; setScrollMaster(dir: string, scroll: VirtualHelperBaseDirective): void; getScrollMaster(dir: string): VirtualHelperBaseDirective; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵprov: i0.ɵɵInjectableDeclaration; } /** * @publicApi */ declare class IgxForOfContext { $implicit: T; igxForOf: U; index: number; count: number; constructor($implicit: T, igxForOf: U, index: number, count: number); /** * A function that returns whether the element is the first or not */ get first(): boolean; /** * A function that returns whether the element is the last or not */ get last(): boolean; /** * A function that returns whether the element is even or not */ get even(): boolean; /** * A function that returns whether the element is odd or not */ get odd(): boolean; } /** @hidden @internal */ declare abstract class IgxForOfToken { abstract igxForOf: U & T[] | null; abstract state: IForOfState; abstract totalItemCount: number; abstract scrollPosition: number; abstract chunkLoad: EventEmitter; abstract chunkPreload: EventEmitter; abstract scrollTo(index: number): void; abstract getScrollForIndex(index: number, bottom?: boolean): number; abstract getScroll(): HTMLElement | undefined; abstract igxForItemSize: any; abstract igxForContainerSize: any; /** @hidden */ abstract dc: ComponentRef; } declare class IgxForOfDirective extends IgxForOfToken implements OnInit, OnChanges, DoCheck, OnDestroy, AfterViewInit { private _viewContainer; protected _template: TemplateRef>; protected _differs: IterableDiffers; cdr: ChangeDetectorRef; protected _zone: NgZone; protected syncScrollService: IgxForOfScrollSyncService; protected platformUtil: PlatformUtil; protected document: any; /** * Sets the data to be rendered. * ```html * * ``` */ igxForOf: U & T[] | null; /** * Sets the property name from which to read the size in the data object. */ igxForSizePropName: any; /** * Specifies the scroll orientation. * Scroll orientation can be "vertical" or "horizontal". * ```html * * ``` */ igxForScrollOrientation: string; /** * Optionally pass the parent `igxFor` instance to create a virtual template scrolling both horizontally and vertically. * ```html * *
* *
{{rowIndex}} : {{item.text}}
*
*
*
* ``` */ igxForScrollContainer: any; /** * Sets the px-affixed size of the container along the axis of scrolling. * For "horizontal" orientation this value is the width of the container and for "vertical" is the height. * ```html * * * ``` */ igxForContainerSize: any; /** * @hidden * @internal * Initial chunk size if no container size is passed. If container size is passed then the igxForOf calculates its chunk size */ igxForInitialChunkSize: any; /** * Sets the px-affixed size of the item along the axis of scrolling. * For "horizontal" orientation this value is the width of the column and for "vertical" is the height or the row. * ```html * * ``` */ igxForItemSize: any; /** * An event that is emitted after a new chunk has been loaded. * ```html * * ``` * ```typescript * loadChunk(e){ * alert("chunk loaded!"); * } * ``` */ chunkLoad: EventEmitter; /** * @hidden @internal * An event that is emitted when scrollbar visibility has changed. */ scrollbarVisibilityChanged: EventEmitter; /** * An event that is emitted after the rendered content size of the igxForOf has been changed. */ contentSizeChange: EventEmitter; /** * An event that is emitted after data has been changed. * ```html * * ``` * ```typescript * dataChanged(e){ * alert("data changed!"); * } * ``` */ dataChanged: EventEmitter; beforeViewDestroyed: EventEmitter>; /** * An event that is emitted on chunk loading to emit the current state information - startIndex, endIndex, totalCount. * Can be used for implementing remote load on demand for the igxFor data. * ```html * * ``` * ```typescript * chunkPreload(e){ * alert("chunk is loading!"); * } * ``` */ chunkPreload: EventEmitter; /** * @hidden */ dc: ComponentRef; /** * The current state of the directive. It contains `startIndex` and `chunkSize`. * state.startIndex - The index of the item at which the current visible chunk begins. * state.chunkSize - The number of items the current visible chunk holds. * These options can be used when implementing remote virtualization as they provide the necessary state information. * ```typescript * const gridState = this.parentVirtDir.state; * ``` */ state: IForOfState; protected func: any; protected _sizesCache: number[]; protected scrollComponent: VirtualHelperBaseDirective; protected _differ: IterableDiffer | null; protected _trackByFn: TrackByFunction; protected individualSizeCache: number[]; /** Internal track for scroll top that is being virtualized */ protected _virtScrollPosition: number; /** If the next onScroll event is triggered due to internal setting of scrollTop */ protected _bScrollInternal: boolean; protected _embeddedViews: Array>; protected contentResizeNotify: Subject; protected contentObserver: ResizeObserver; /** Size that is being virtualized. */ protected _virtSize: number; /** * @hidden */ protected destroy$: Subject; private _totalItemCount; private _adjustToIndex; /** Maximum size for an element of the browser. */ private _maxSize; /** * Ratio for height that's being virtualizaed and the one visible * If _virtHeightRatio = 1, the visible height and the virtualized are the same, also _maxSize > _virtHeight. */ private _virtRatio; /** * The total count of the virtual data items, when using remote service. * Similar to the property totalItemCount, but this will allow setting the data count into the template. * ```html * * ``` */ get igxForTotalItemCount(): number; set igxForTotalItemCount(value: number); /** * The total count of the virtual data items, when using remote service. * ```typescript * this.parentVirtDir.totalItemCount = data.Count; * ``` */ get totalItemCount(): number; set totalItemCount(val: number); get displayContainer(): HTMLElement | undefined; get virtualHelper(): HTMLElement; /** * @hidden */ get isRemote(): boolean; /** * * Gets/Sets the scroll position. * ```typescript * const position = directive.scrollPosition; * directive.scrollPosition = value; * ``` */ get scrollPosition(): number; set scrollPosition(val: number); /** * @hidden */ protected get isRTL(): boolean; protected get sizesCache(): number[]; protected set sizesCache(value: number[]); private get _isScrolledToBottom(); private get _isAtBottomIndex(); constructor(_viewContainer: ViewContainerRef, _template: TemplateRef>, _differs: IterableDiffers, cdr: ChangeDetectorRef, _zone: NgZone, syncScrollService: IgxForOfScrollSyncService, platformUtil: PlatformUtil, document: any); verticalScrollHandler(event: any): void; isScrollable(): boolean; /** * @hidden */ ngOnInit(): void; ngAfterViewInit(): void; /** * @hidden */ ngOnDestroy(): void; /** * @hidden @internal * Asserts the correct type of the context for the template that `igxForOf` will render. * * The presence of this method is a signal to the Ivy template type-check compiler that the * `IgxForOf` structural directive renders its template with a specific context type. */ static ngTemplateContextGuard(dir: IgxForOfDirective, ctx: any): ctx is IgxForOfContext; /** * @hidden */ ngOnChanges(changes: SimpleChanges): void; /** * @hidden */ ngDoCheck(): void; /** * Shifts the scroll thumb position. * ```typescript * this.parentVirtDir.addScroll(5); * ``` * * @param addTop negative value to scroll up and positive to scroll down; */ addScrollTop(add: number): boolean; /** * Shifts the scroll thumb position. * ```typescript * this.parentVirtDir.addScroll(5); * ``` * * @param add negative value to scroll previous and positive to scroll next; */ addScroll(add: number): boolean; /** * Scrolls to the specified index. * ```typescript * this.parentVirtDir.scrollTo(5); * ``` * * @param index */ scrollTo(index: number): void; /** * Scrolls by one item into the appropriate next direction. * For "horizontal" orientation that will be the right column and for "vertical" that is the lower row. * ```typescript * this.parentVirtDir.scrollNext(); * ``` */ scrollNext(): void; /** * Scrolls by one item into the appropriate previous direction. * For "horizontal" orientation that will be the left column and for "vertical" that is the upper row. * ```typescript * this.parentVirtDir.scrollPrev(); * ``` */ scrollPrev(): void; /** * Scrolls by one page into the appropriate next direction. * For "horizontal" orientation that will be one view to the right and for "vertical" that is one view to the bottom. * ```typescript * this.parentVirtDir.scrollNextPage(); * ``` */ scrollNextPage(): void; /** * Scrolls by one page into the appropriate previous direction. * For "horizontal" orientation that will be one view to the left and for "vertical" that is one view to the top. * ```typescript * this.parentVirtDir.scrollPrevPage(); * ``` */ scrollPrevPage(): void; /** * @hidden */ getColumnScrollLeft(colIndex: any): number; /** * Returns the total number of items that are fully visible. * ```typescript * this.parentVirtDir.getItemCountInView(); * ``` */ getItemCountInView(): number; /** * Returns a reference to the scrollbar DOM element. * This is either a vertical or horizontal scrollbar depending on the specified igxForScrollOrientation. * ```typescript * dir.getScroll(); * ``` */ getScroll(): HTMLElement; /** * Returns the size of the element at the specified index. * ```typescript * this.parentVirtDir.getSizeAt(1); * ``` */ getSizeAt(index: number): number; /** * @hidden * Function that is called to get the native scrollbar size that the browsers renders. */ getScrollNativeSize(): number; /** * Returns the scroll offset of the element at the specified index. * ```typescript * this.parentVirtDir.getScrollForIndex(1); * ``` */ getScrollForIndex(index: number, bottom?: boolean): number; /** * Returns the index of the element at the specified offset. * ```typescript * this.parentVirtDir.getIndexAtScroll(100); * ``` */ getIndexAtScroll(scrollOffset: number): number; /** * Returns whether the target index is outside the view. * ```typescript * this.parentVirtDir.isIndexOutsideView(10); * ``` */ isIndexOutsideView(index: number): boolean; /** * @hidden * Function that recalculates and updates cache sizes. */ recalcUpdateSizes(): void; /** * @hidden * Reset scroll position. * Needed in case scrollbar is hidden/detached but we still need to reset it. */ resetScrollPosition(): void; /** * @hidden */ protected removeScrollEventListeners(): void; /** * @hidden * Function that is called when scrolling vertically */ protected onScroll(event: any): void; /** * @hidden * @internal */ updateScroll(): void; protected updateSizes(): void; /** * @hidden */ protected fixedUpdateAllElements(inScrollTop: number): number; /** * @hidden * The function applies an optimized state change for scrolling down/right employing context change with view rearrangement */ protected moveApplyScrollNext(prevIndex: number): void; /** * @hidden * The function applies an optimized state change for scrolling up/left employing context change with view rearrangement */ protected moveApplyScrollPrev(prevIndex: number): void; /** * @hidden */ protected getContextIndex(input: any): number; /** * @hidden * Function which updates the passed context of an embedded view with the provided index * from the view container. * Often, called while handling a scroll event. */ protected updateTemplateContext(context: any, index?: number): void; /** * @hidden * The function applies an optimized state change through context change for each view */ protected fixedApplyScroll(): void; /** * @hidden * @internal * * Clears focus inside the virtualized container on small scroll swaps. */ protected scrollFocus(node?: HTMLElement): void; /** * @hidden * Function that is called when scrolling horizontally */ protected onHScroll(event: any): void; /** * Gets the function used to track changes in the items collection. * By default the object references are compared. However this can be optimized if you have unique identifier * value that can be used for the comparison instead of the object ref or if you have some other property values * in the item object that should be tracked for changes. * This option is similar to ngForTrackBy. * ```typescript * const trackFunc = this.parentVirtDir.igxForTrackBy; * ``` */ get igxForTrackBy(): TrackByFunction; /** * Sets the function used to track changes in the items collection. * This function can be set in scenarios where you want to optimize or * customize the tracking of changes for the items in the collection. * The igxForTrackBy function takes the index and the current item as arguments and needs to return the unique identifier for this item. * ```typescript * this.parentVirtDir.igxForTrackBy = (index, item) => { * return item.id + item.width; * }; * ``` */ set igxForTrackBy(fn: TrackByFunction); /** * @hidden */ protected _applyChanges(): void; /** * @hidden */ protected _calcMaxBrowserSize(): number; /** * @hidden * Recalculates the chunkSize based on current startIndex and returns the new size. * This should be called after this.state.startIndex is updated, not before. */ protected _calculateChunkSize(): number; /** * @hidden */ protected getElement(viewref: any, nodeName: any): any; /** * @hidden */ protected initSizesCache(items: U): number; protected _updateSizeCache(): void; /** * @hidden */ protected _calcMaxChunkSize(): number; /** * @hidden */ protected getIndexAt(left: any, set: any): number; protected _recalcScrollBarSize(containerSizeInfo?: any): void; protected _calcSize(): number; protected _recalcOnContainerChange(containerSizeInfo?: any): void; /** * @hidden * Removes an element from the embedded views and updates chunkSize. */ protected removeLastElem(): void; /** * @hidden * If there exists an element that we can create embedded view for creates it, appends it and updates chunkSize */ protected addLastElem(): void; /** * Recalculates chunkSize and adds/removes elements if need due to the change. * this.state.chunkSize is updated in @addLastElem() or @removeLastElem() */ protected applyChunkSizeChange(): void; protected _calcVirtualScrollPosition(scrollPosition: number): void; protected _getItemSize(item: any, dimension: string): number; protected _updateScrollOffset(): void; protected _adjustScrollPositionAfterSizeChange(sizeDiff: any): void; private getMargin; static ɵfac: i0.ɵɵFactoryDeclaration, never>; static ɵdir: i0.ɵɵDirectiveDeclaration, "[igxFor][igxForOf]", never, { "igxForOf": { "alias": "igxForOf"; "required": false; }; "igxForSizePropName": { "alias": "igxForSizePropName"; "required": false; }; "igxForScrollOrientation": { "alias": "igxForScrollOrientation"; "required": false; }; "igxForScrollContainer": { "alias": "igxForScrollContainer"; "required": false; }; "igxForContainerSize": { "alias": "igxForContainerSize"; "required": false; }; "igxForInitialChunkSize": { "alias": "igxForInitialChunkSize"; "required": false; }; "igxForItemSize": { "alias": "igxForItemSize"; "required": false; }; "igxForTotalItemCount": { "alias": "igxForTotalItemCount"; "required": false; }; "igxForTrackBy": { "alias": "igxForTrackBy"; "required": false; }; }, { "chunkLoad": "chunkLoad"; "scrollbarVisibilityChanged": "scrollbarVisibilityChanged"; "contentSizeChange": "contentSizeChange"; "dataChanged": "dataChanged"; "beforeViewDestroyed": "beforeViewDestroyed"; "chunkPreload": "chunkPreload"; }, never, never, true, never>; } interface IForOfState extends IBaseEventArgs { startIndex?: number; chunkSize?: number; } /** * @deprecated in 19.2.7. Use `IForOfDataChangeEventArgs` instead. */ interface IForOfDataChangingEventArgs extends IBaseEventArgs { containerSize: number; state: IForOfState; } interface IForOfDataChangeEventArgs extends IForOfDataChangingEventArgs { } declare class IgxGridForOfContext extends IgxForOfContext { igxGridForOf: U; constructor($implicit: T, igxGridForOf: U, index: number, count: number); } declare class IgxGridForOfDirective extends IgxForOfDirective implements OnInit, OnChanges, DoCheck { protected syncService: IgxForOfSyncService; set igxGridForOf(value: U & T[] | null); get igxGridForOf(): (U & T[]) | null; igxGridForOfUniqueSizeCache: boolean; igxGridForOfVariableSizes: boolean; /** * @hidden * @internal */ get sizesCache(): number[]; /** * @hidden * @internal */ set sizesCache(value: number[]); protected get itemsDimension(): any; recalcUpdateSizes(): void; /** * @hidden @internal * An event that is emitted after data has been changed but before the view is refreshed */ dataChanging: EventEmitter; constructor(_viewContainer: ViewContainerRef, _template: TemplateRef>, _differs: IterableDiffers, cdr: ChangeDetectorRef, _zone: NgZone, _platformUtil: PlatformUtil, _document: any, syncScrollService: IgxForOfScrollSyncService, syncService: IgxForOfSyncService); /** * @hidden @internal * Asserts the correct type of the context for the template that `IgxGridForOfDirective` will render. * * The presence of this method is a signal to the Ivy template type-check compiler that the * `IgxGridForOfDirective` structural directive renders its template with a specific context type. */ static ngTemplateContextGuard(dir: IgxGridForOfDirective, ctx: any): ctx is IgxGridForOfContext; ngOnInit(): void; ngOnChanges(changes: SimpleChanges): void; /** * @hidden * @internal */ assumeMaster(): void; ngDoCheck(): void; onScroll(event: any): void; onHScroll(scrollAmount: any): void; protected getItemSize(item: any): number; protected initSizesCache(items: U): number; protected _updateSizeCache(changes?: IterableChanges): number; protected handleCacheChanges(changes: IterableChanges): number; protected addLastElem(): void; protected _updateViews(prevChunkSize: any): void; protected _applyChanges(): void; /** * @hidden */ protected _calcMaxChunkSize(): number; static ɵfac: i0.ɵɵFactoryDeclaration, never>; static ɵdir: i0.ɵɵDirectiveDeclaration, "[igxGridFor][igxGridForOf]", never, { "igxGridForOf": { "alias": "igxGridForOf"; "required": false; }; "igxGridForOfUniqueSizeCache": { "alias": "igxGridForOfUniqueSizeCache"; "required": false; }; "igxGridForOfVariableSizes": { "alias": "igxGridForOfVariableSizes"; "required": false; }; }, { "dataChanging": "dataChanging"; }, never, never, true, never>; static ngAcceptInputType_igxGridForOfUniqueSizeCache: unknown; static ngAcceptInputType_igxGridForOfVariableSizes: unknown; } /** * Default pivot keys used for data processing in the pivot pipes. */ declare const DEFAULT_PIVOT_KEYS: { aggregations: string; records: string; children: string; level: string; rowDimensionSeparator: string; columnDimensionSeparator: string; }; /** * Event emitted when dimension collection for rows, columns of filters is changed. */ interface IDimensionsChange { /** The new list of dimensions. */ dimensions: IPivotDimension[]; /** The dimension list type - Row, Column or Filter. */ dimensionCollectionType: PivotDimensionType; } /** * Event emitted when values list is changed. */ interface IValuesChange { /** The new list of values. */ values: IPivotValue[]; } /** * Event emitted when pivot configuration is changed. */ interface IPivotConfigurationChangedEventArgs { /** The new configuration. */ pivotConfiguration: IPivotConfiguration; } /** * Interface describing Pivot data processing for dimensions. * Should contain a process method and return records hierarchy based on the provided dimensions. */ interface IPivotDimensionStrategy { process(collection: any, dimensions: IPivotDimension[], values: IPivotValue[], cloneStrategy: IDataCloneStrategy, pivotKeys?: IPivotKeys): any[]; } /** * Interface describing a PivotAggregation function. * Accepts an array of extracted data members and a array of the original data records. */ type PivotAggregation = (members: any[], data: any[]) => any; /** * Interface describing a IPivotAggregator class. * Used for specifying custom aggregator lists. */ interface IPivotAggregator { /** Aggregation unique key. */ key: string; /** Aggregation label to show in the UI. */ label: string; /** * Aggregation name that will be used from a list of predefined aggregations. * If not set will use the specified aggregator function. */ aggregatorName?: PivotAggregationType; /** * Aggregator function can be a custom implementation of `PivotAggregation`, or * use predefined ones from `IgxPivotAggregate` and its variants. */ aggregator?: (members: any[], data?: any[]) => any; } /** * Configuration of the pivot grid. */ interface IPivotConfiguration { /** A strategy to transform the rows. */ rowStrategy?: IPivotDimensionStrategy | null; /** A strategy to transform the columns. */ columnStrategy?: IPivotDimensionStrategy | null; /** A list of the rows. */ rows: IPivotDimension[] | null; /** A list of the columns. */ columns: IPivotDimension[] | null; /** A list of the values. */ values: IPivotValue[] | null; /** Dimensions to be displayed in the filter area. */ filters?: IPivotDimension[] | null; /** Pivot data keys used for data generation. Can be used for custom remote scenarios where the data is pre-populated. */ pivotKeys?: IPivotKeys; } /** * Configuration of a pivot dimension. */ interface IPivotDimension { /** Allows defining a hierarchy when multiple sub groups need to be extracted from single member. */ childLevel?: IPivotDimension; /** Unique member to extract related data field value or the result of the memberFunction. */ memberName: string; /** Function that extracts the value */ memberFunction?: (data: any) => any; /** Display name to show instead of the field name of this value. **/ displayName?: string; /** Enables/Disables a particular dimension from pivot structure. */ enabled: boolean; /** * A predefined or defined via the `igxPivotSelector` filter expression tree for the current dimension to be applied in the filter pipe. * */ filter?: IFilteringExpressionsTree | null; /** Enable/disable sorting for a particular dimension. True by default. */ sortable?: boolean; /** * The sorting direction of the current dimension. Determines the order in which the values will appear in the related dimension. */ sortDirection?: SortingDirection; /** * The dataType of the related data field. */ dataType?: GridColumnDataType; /** The width of the dimension cells to be rendered.Can be pixel, % or "auto". */ width?: string; /** Level of the dimension. */ level?: number; /** @hidden @internal */ autoWidth?: number; horizontalSummary?: boolean; } /** * Configuration of a pivot value aggregation. */ interface IPivotValue { /** Unique member to extract related data field value for aggregations. */ member: string; /** Display name to show instead of member for the column header of this value. **/ displayName?: string; /** * Active aggregator definition with key, label and aggregator. */ aggregate: IPivotAggregator; /** * List of aggregates to show in aggregate drop-down. */ aggregateList?: IPivotAggregator[]; /** Enables/Disables a particular value from pivot aggregation. */ enabled: boolean; /** Allow conditionally styling of the IgxPivotGrid cells. */ styles?: any; /** Enables a data type specific template of the cells */ dataType?: GridColumnDataType; /** Applies display format to cell values. */ formatter?: (value: any, rowData?: IPivotGridRecord, columnData?: IPivotGridColumn) => any; } /** Interface describing the Pivot column data. * Contains information on the related column dimensions and their values. */ interface IPivotGridColumn { field: string; /** Gets/Sets the group value associated with the related column dimension by its memberName. **/ dimensionValues: Map; /** List of dimensions associated with the column.**/ dimensions: IPivotDimension[]; value: IPivotValue; } /** Interface describing the Pivot data keys used for data generation. * Can be used for custom remote scenarios where the data is pre-populated. */ interface IPivotKeys { /** Field that stores children for hierarchy building. */ children: string; /** Field that stores reference to the original data records. */ records: string; /** Field that stores aggregation values. */ aggregations: string; /** Field that stores dimension level based on its hierarchy. */ level: string; /** Separator used when generating the unique column field values. */ columnDimensionSeparator: string; /** Separator used when generating the unique row field values. */ rowDimensionSeparator: string; } /** The dimension types - Row, Column or Filter. */ declare enum PivotDimensionType { Row = 0, Column = 1, Filter = 2 } declare enum PivotRowLayoutType { Vertical = "vertical", Horizontal = "horizontal" } declare enum PivotSummaryPosition { Top = "top", Bottom = "bottom" } interface IPivotUISettings { showConfiguration?: boolean; showRowHeaders?: boolean; rowLayout?: PivotRowLayoutType; horizontalSummariesPosition?: PivotSummaryPosition; } type PivotAggregationType = 'SUM' | 'AVG' | 'MIN' | 'MAX' | 'COUNT' | 'LATEST' | 'EARLIEST'; /** Interface describing the pivot dimension data. * Contains additional information needed to render dimension headers. */ interface IPivotDimensionData { /** Associated column definition. */ column: ColumnType; /** Associated dimension definition. */ dimension: IPivotDimension; /** List of previous dimension groups. */ prevDimensions: IPivotDimension[]; /** Whether this a child dimension. */ isChild?: boolean; } interface PivotRowHeaderGroupType { rowIndex: number; parent: any; header: any; headerID: string; grid: any; } interface DimensionValueType { value: string; children: Map; } interface IPivotGridRecord { /** Gets/Sets the group value associated with the related row dimension by its memberName. **/ dimensionValues: Map; /** Gets/Sets the aggregation value associated with the value path. Value path depends on configured column dimension hierarchy and values.**/ aggregationValues: Map; /** List of children records in case any row dimension member contain a hierarchy. Each dimension member contains its own hierarchy, which you can get by its memberName. **/ children?: Map; /** List of original data records associated with the current pivoted data. **/ records?: any[]; /** Record level**/ level?: number; /** List of dimensions associated with the record.**/ dimensions: IPivotDimension[]; /** If set, it specifies the name of the dimension, that has total record enabled. */ totalRecordDimensionName?: string; /** The index of the record in the total view */ dataIndex?: number; } interface IPivotGridGroupRecord extends IPivotGridRecord { height?: number; rowSpan?: number; } interface IPivotGridHorizontalGroup { value?: string; rootDimension?: IPivotDimension; dimensions?: IPivotDimension[]; records?: IPivotGridRecord[]; rowStart?: number; rowSpan?: number; colStart?: number; colSpan?: number; } interface IgxPivotGridValueTemplateContext { $implicit: IPivotValue; } declare class IgxGridValidationService { /** * @hidden * @internal */ grid: GridType; private _validityStates; private _valid; /** Gets whether state is valid. */ get valid(): boolean; /** * @hidden * @internal */ create(rowId: any, data: any): FormGroup; /** * @hidden * @internal */ private addFormControl; /** * @hidden * @internal */ private getFieldKey; /** * @hidden * @internal */ getFormGroup(id: any): FormGroup; /** * @hidden * @internal */ getFormControl(rowId: any, columnKey: string): _angular_forms.AbstractControl; /** * @hidden * @internal */ add(rowId: any, form: FormGroup): void; /** * @hidden * @internal */ private getValidity; /** * Returns all invalid record states. */ getInvalid(): IRecordValidationState[]; /** * @hidden * @internal */ update(rowId: any, rowData: any): void; /** * @hidden * @internal * Update validity based on new data. */ updateAll(newData: any): void; /** Marks the associated record or field as touched. * @param key The id of the record that will be marked as touched. * @param field Optional. The field from the record that will be marked as touched. If not provided all fields will be touched. */ markAsTouched(key: any, field?: string): void; /** * @hidden * @internal */ private updateStatus; /** Clears validation state by key or all states if none is provided. * @param key Optional. The key of the record for which to clear state. */ clear(key?: any): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵprov: i0.ɵɵInjectableDeclaration; } declare const IGX_GRID_BASE: InjectionToken; declare const IGX_GRID_SERVICE_BASE: InjectionToken; /** Interface representing a segment of a path in a hierarchical grid. */ interface IPathSegment { /** * The unique identifier of the row within the segment. * @deprecated since version 17.1.0. Use the `rowKey` property instead. */ rowID: any; rowKey: any; /** The key representing the row's 'hierarchical level. */ rowIslandKey: string; } interface IGridDataBindable { data: any[] | null; get filteredData(): any[]; } /** * Interface representing a cell in the grid. It is essentially the blueprint to a cell object. * Contains definitions of properties and methods, relevant to a cell */ interface CellType { /** The current value of the cell. */ value: any; /** The value to display when the cell is in edit mode. */ editValue: any; /** Indicates whether the cell is currently selected. It is false, if the sell is not selected, and true, if it is. */ selected: boolean; /** Indicates whether the cell is currently active (focused). */ active: boolean; /** Indicates whether the cell can be edited. */ editable: boolean; /** Indicates whether the cell is currently in edit mode. */ editMode: boolean; /** Represents the native HTML element of the cell itself */ nativeElement?: HTMLElement; /** Represents the column that the cell belongs to. */ column: ColumnType; /** Represents the row that the cell belongs to */ row: RowType; /** Represents the grid instance containing the cell */ grid: GridType; /** Optional; An object identifying the cell. It contains rowID, columnID, and rowIndex of the cell. */ id?: { rowID: any; columnID: number; rowIndex: number; }; /** Optional; The `cellID` is the unique key, used to identify the cell */ cellID?: any; /** * Optional; An object representing the validation state of the cell. * Whether it's valid or invalid, and if it has errors */ readonly validation?: IGridValidationState; readonly?: boolean; /** An optional title to display for the cell */ title?: any; /** The CSS width of the cell as a string. */ width: string; /** The index of the column that the cell belongs to. It counts only the visible (not hidden) columns */ visibleColumnIndex?: number; /** A method definition to update the value of the cell. */ update: (value: any) => void; /** A method definition to start or end the edit mode of the cell. It takes a boolean value as an argument*/ setEditMode?(value: boolean): void; /** * Optional; * A method definition to calculate the size of the cell to fit the content * The method can be used to calculate the size of the cell with the longest content and resize all cells to that size */ calculateSizeToFit?(range: any): number; /** * Optional * A method to activate the cell. * It takes a focus or keyboard event as an argument */ activate?(event: FocusEvent | KeyboardEvent): void; /** * Optional * A method to handle double-click events on the cell * It takes a mouse event as an argument */ onDoubleClick?(event: MouseEvent): void; /** * Optional * A method to handle click events on the cell * It takes a mouse event as an argument */ onClick?(event: MouseEvent): void; } /** * Interface representing a header cell in the grid. It is essentially the blueprint to a header cell object. * Contains definitions of properties, relevant to the header */ interface HeaderType { /** Represents the native HTML element of the cell itself */ nativeElement: HTMLElement; /** The column that the header cell represents. */ column: ColumnType; /** Indicates whether the column is currently sorted. */ sorted: boolean; /** Indicates whether the cell can be selected */ selectable: boolean; /** Indicates whether the cell is currently selected */ selected: boolean; /** Indicates whether the column header is a title cell. */ title: boolean; /** Represents the sorting direction of the column (ascending, descending or none). */ sortDirection: SortingDirection; } /** * Interface representing a row in the grid. It is essentially the blueprint to a row object. * Contains definitions of properties and methods, relevant to a row */ interface RowType { /** Represents the native HTML element of the row itself */ nativeElement?: HTMLElement; /** The index of the row within the grid */ index: number; viewIndex: number; /** Indicates whether the row is grouped. */ isGroupByRow?: boolean; isSummaryRow?: boolean; /** * Optional * A map of column field names to the summary results for the row. */ summaries?: Map; groupRow?: IGroupByRecord; key?: any; readonly validation?: IGridValidationState; data?: any; /** * Optional * A list or an array of cells, that belong to the row */ cells?: QueryList | CellType[]; /** * Optional * Indicates whether the current row is disabled */ disabled?: boolean; /** * Optional * Virtualization state of data record added from cache */ virtDirRow?: IgxGridForOfDirective; /** * Optional * Indicates whether the current row is pinned. */ pinned?: boolean; /** * Optional * Indicates whether the current row is selected */ selected?: boolean; /** * Optional * Indicates whether the current row is expanded. * The value is true, if the row is expanded and false, if it is collapsed */ expanded?: boolean; /** * Optional * Indicates whether the row is marked for deletion. */ deleted?: boolean; /** * Optional * Indicates whether the row is currently being edited. */ inEditMode?: boolean; /** * Optional * Contains the child rows of the current row, if there are any. */ children?: RowType[]; /** * Optional * Contains the parent row of the current row, if it has one. * If the parent row exist, it means that the current row is a child row */ parent?: RowType; /** * Optional * Indicates whether the current row has any child rows */ hasChildren?: boolean; /** * Optional * Represents the hierarchical record associated with the row (for tree grids). * It is of type ITreeGridRecord, which contains the data, children, the hierarchical level, etc. */ treeRow?: ITreeGridRecord; addRowUI?: boolean; /** * Optional * Indicates whether the row is currently focused. */ focused?: boolean; /** Represent the grid instance, the row belongs to */ grid: GridType; onRowSelectorClick?: (event: MouseEvent) => void; /** * Optional * A method to handle click event on the row * It takes a `MouseEvent` as an argument */ onClick?: (event: MouseEvent) => void; /** * Optional * A method to handle adding a new row */ beginAddRow?: () => void; /** * Optional * A method to handle changing the value of elements of the row * It takes the new value as an argument */ update?: (value: any) => void; /** * Optional * A method to handle deleting rows */ delete?: () => any; /** * Optional * A method to handle pinning a row */ pin?: () => void; /** * Optional * A method to handle unpinning a row, that has been pinned */ unpin?: () => void; } interface FieldType { label?: string; field: string; header?: string; dataType: DataType; editorOptions?: IFieldEditorOptions; filters?: IgxFilteringOperand; pipeArgs?: IFieldPipeArgs; defaultTimeFormat?: string; defaultDateTimeFormat?: string; formatter?(value: any, rowData?: any): any; } /** * Represents a column in the `GridType`. It is essentially the blueprint to a column object. * Contains definitions of properties and methods, relevant to a column */ interface ColumnType extends FieldType { /** Represents the instance of the parent `GridType` that contains this column. */ grid: GridType; /** * A list containing all the child columns under this column (if any). * @deprecated in version 18.1.0. Use the `childColumns` property instead. */ children: QueryList; /** * A list containing all the child columns under this column (if any). * Empty without children or if this column is not Group or Layout. */ get childColumns(): ColumnType[]; /** @hidden @internal */ allChildren: ColumnType[]; /** @hidden @internal */ headerGroup: any; /** @hidden @internal */ headerCell: any; validators: any[]; /** * The template reference for the custom header of the column * It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views */ headerTemplate: TemplateRef; /** * The template reference for the collapsible indicator of the column. * It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views */ collapsibleIndicatorTemplate?: TemplateRef; /** Represents custom CSS classes applied to the header element. When added, they take different styling */ headerClasses: any; /** Represents custom CSS styles applied to the header element. When added, they take different styling */ headerStyles: any; /** Represents custom CSS classes applied to the header group. When added, they take different styling */ headerGroupClasses: any; /** Represents custom CSS styles applied to the header group. When added, they take different styling */ headerGroupStyles: any; /** * Custom CSS styling, applied to every column * calcWidth, minWidthPx, maxWidthPx, minWidth, maxWidth, minWidthPercent, maxWidthPercent, resolvedWidth */ calcWidth: any; minWidthPx: number; maxWidthPx: number; minWidth: string; maxWidth: string; minWidthPercent: number; maxWidthPercent: number; resolvedWidth: string; /** * Optional * Represents the header text of the column */ header?: string; /** * The index of the column within the grid. * Includes the hidden columns when counting */ index: number; /** * Represents the type of data for the column: * string, number, boolean, currency, date, time, etc. */ dataType: GridColumnDataType; /** * Sets properties on the default column editors */ editorOptions: IColumnEditorOptions; /** * The template reference for the custom inline editor of the column * It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views */ inlineEditorTemplate: TemplateRef; /** * The index of the column within the grid. * Does not include the hidden columns when counting */ visibleIndex: number; /** Optional * Indicated whether the column can be collapsed. If the value is true, the column can be collapsed * It is used in tree grid and for navigation */ collapsible?: boolean; /** Indicated whether the column can be edited. If the value is true, the column can be edited */ editable: boolean; /** Specifies whether the column can be resized. If the value is true, the column can be resized */ resizable: boolean; /** Specifies whether the data of the column can be searched. If the value is true, the column data can be searched */ searchable: boolean; /** Specifies whether the column belongs to a group of columns. */ columnGroup: boolean; /** Indicates whether a column can be put in a group. If the value is true, the column can be put in a group */ groupable: boolean; /** Indicates whether a column can be sorted. If the value is true, the column can be sorted. */ sortable: boolean; /** Indicates whether a column can be filtered. If the value is true, the column can be filtered */ filterable: boolean; /** Indicates whether a column is currently hidden (not visible). If the value is true, the column is not visible */ hidden: boolean; /** Indicates whether a column can be pinned. If the value is true, the column cannot be pinned */ disablePinning: boolean; /** Indicates whether a column can be hidden. If the value is true, the column cannot be hidden */ disableHiding: boolean; /** * The sorting strategy used for sorting this column. * The interface contains a method sort that sorts the provided data based on the given sorting expressions */ sortStrategy: ISortingStrategy; /** * Indicates whether the search should match results, no matter the case of the letters (upper and lower) * If the value is false, the result will depend on the case (example: `E` will not match `e`) * If the value is true, the result will not depend on the case (example: `E` will match `e`) */ sortingIgnoreCase: boolean; /** @hidden @internal */ filterCell: any; filteringIgnoreCase: boolean; /** * The filtering expressions for the column. * The type contains properties and methods for filtering: filteringOperands, operator (logic), fieldName, etc. */ filteringExpressionsTree: FilteringExpressionsTree; hasSummary: boolean; summaries: any; disabledSummaries?: string[]; /** * The template reference for a summary of the column * It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views */ summaryTemplate: TemplateRef; /** Indicates if the column is currently pinned. If the value is true, the column is pinned */ pinned: boolean; /** Indicates if the column is currently expanded or collapsed. If the value is true, the column is expanded */ expanded: boolean; /** Indicates if the column is currently selected. If the value is true, the column is selected */ selected: boolean; /** Indicates if the column can be selected. If the value is true, the column can be selected */ selectable: boolean; columnLayout: boolean; /** Represents the hierarchical level of the column in the column layout */ level: number; rowStart: number; rowEnd: number; colStart: number; colEnd: number; /** @hidden @internal */ gridRowSpan: number; /** @hidden @internal */ gridColumnSpan: number; columnLayoutChild: boolean; width: string; /** * Optional * The root parent of this column (if any). * If there is no root parent, that means the current column is the root parent */ topLevelParent?: ColumnType; /** * Optional * The immediate parent (right above) column of this column (if any). * If there is no parent, that means the current column is the root parent */ parent?: ColumnType; pipeArgs: IColumnPipeArgs; hasNestedPath: boolean; additionalTemplateContext: any; /** Indicates whether the current column is the last to be pinned. * If the value is false, there are columns, that have been pinned after the current */ isLastPinned: boolean; /** Indicates whether the current column is the first for the grid to be pinned. * If the value is false, there are columns, that have been pinned before the current */ isFirstPinned: boolean; applySelectableClass: boolean; /** The title of the column, used for accessibility purposes */ title: string; /** Represents a method with custom grouping comparator to determine the members of the group. */ groupingComparer: (a: any, b: any) => number; /** * Represents a custom template for filtering * It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views */ filterCellTemplate: TemplateRef; /** * A method definition to move the column to the specified index. * It takes the index of type number as a parameter */ move(index: number): void; /** A method definition to retrieve the set CSS size */ getAutoSize(): string; getResizableColUnderEnd(): MRLResizeColumnInfo[]; /** A method definition to retrieve the set CSS width of the cells under the column */ getCellWidth(): string; getGridTemplate(isRow: boolean): string; /** A method definition to toggle column visibility (hidden or visible) */ toggleVisibility(value?: boolean): void; populateVisibleIndexes?(): void; /** Pins the column at the specified index (if not already pinned). */ pin(index?: number): boolean; /** Unpins the column at the specified index (if not already unpinned). */ unpin(index?: number): boolean; } /** * Interface representing the event arguments when a form group is created in the grid. * - formGroup: The form group that is created. * - owner: The grid instance that owns the form group. */ interface IGridFormGroupCreatedEventArgs { formGroup: FormGroup; owner: GridType; } /** * Interface representing the event arguments for the grid validation status change event. * - status: The validation status ('VALID' or 'INVALID'). * - owner: The grid instance that owns the validation state. */ interface IGridValidationStatusEventArgs { status: ValidationStatus; owner: GridType; } /** * Type representing the validation status. * - 'VALID': The validation status is valid. * - 'INVALID': The validation status is invalid. */ type ValidationStatus = 'VALID' | 'INVALID'; /** * Interface representing the validation state of a grid. * - status: The validation status ('VALID' or 'INVALID'). * - errors: The validation errors if any. */ interface IGridValidationState { readonly status: ValidationStatus; readonly errors?: ValidationErrors; } /** * Interface representing the validation state of a record in the grid. * - `key`: The unique identifier of the record. * - `fields`: An array of the validation state of individual fields in the record. */ interface IRecordValidationState extends IGridValidationState { key: any; fields: IFieldValidationState[]; } /** * Interface representing the validation state of a field in the grid. * -`field`: The name of the field (property) being validated. */ interface IFieldValidationState extends IGridValidationState { field: string; } /** * Represents the service interface for interacting with the grid. */ interface GridServiceType { /** The reference to the parent `GridType` that contains the service. */ grid: GridType; /** Represents the type of the CRUD service (Create, Read, Update, Delete) operations on the grid data. */ crudService: any; /** A service responsible for handling column moving within the grid. It contains a reference to the column, its icon, and indicator for cancelation. */ cms: IgxColumnMovingService; /** Represents a method declaration for retrieving the data used in the grid. The returned values could be of any type */ get_data(): any[]; /** * Represents a method declaration for retrieving all the data available in the grid, including any transactional data. * `includeTransactions`: Optional parameter. Specifies whether to include transactional data if present. * Returns an array containing all the data available in the grid. */ get_all_data(includeTransactions?: boolean): any[]; /** Represents a method declaration for retrieving a column object by its name, taken as a parameter. */ get_column_by_name(name: string): ColumnType; /** Represents a method declaration for retrieving the data associated with a specific row by its unique identifier (of any type, taken as a parameter). */ getRowData(id: any): any; /** Represents a method declaration for retrieving the data associated with a specific record by its unique identifier (of any type, taken as a parameter). */ get_rec_by_id(id: any): any; /** Represents a method declaration for retrieving the unique identifier of a specific row by its data. */ get_row_id(rowData: any): any; /** Represents a method declaration for retrieving the row object associated with a specific index (taken as a parameter) in the grid */ get_row_by_index(rowSelector: any): RowType; /** Represents a method declaration for retrieving the row object associated with a specific key (taken as a parameter) in the grid */ get_row_by_key(rowSelector: any): RowType; /** Represents a method declaration for retrieving the index of a record in the grid's data collection using its unique identifier. */ get_rec_index_by_id(pk: string | number, dataCollection?: any[]): number; /** Represents a method declaration for retrieving the index of a record in the grid's data collection using its index. */ get_rec_id_by_index(index: number, dataCollection?: any[]): any; get_row_index_in_data(rowID: any, dataCollection?: any[]): number; /** Represents a method declaration for retrieving the cell object associated with a specific row and column in the grid. */ get_cell_by_key(rowSelector: any, field: string): CellType; /** Represents a method declaration for retrieving the cell object associated with a specific row and column using their indexes. */ get_cell_by_index(rowIndex: number, columnID: number | string): CellType; /** * Represents a method declaration for retrieving the cell object associated with a specific row and column using their indexes. * It counts only the indexes of the visible columns and rows */ get_cell_by_visible_index(rowIndex: number, columnIndex: number): any; /** Represents a method declaration that sets the expansion state of a group row (used for tree grids) * It takes the value for the expansion as a parameter (expanded or collapsed) */ set_grouprow_expansion_state?(groupRow: IGroupByRecord, value: boolean): void; row_deleted_transaction(id: any): boolean; /** * Represents a method declaration for adding a new row to the grid. * It takes the row's data and the identifier of the parent row if applicable (used for tree grids) */ addRowToData(rowData: any, parentID?: any): void; /** Represents a method declaration for deleting a row, specified by it's identifier (taken as a parameter) */ deleteRowById(id: any): any; /** Represents a method declaration for retrieving the row's current state of expansion (used for tree grids)*/ get_row_expansion_state(id: any): boolean; /** Represents a method declaration for setting a new expansion state. It can be triggered by an event */ set_row_expansion_state(id: any, expanded: boolean, event?: Event): void; get_summary_data(): any[]; prepare_sorting_expression(stateCollections: Array>, expression: ISortingExpression): void; /** * Represents a method declaration for sorting by only one expression * The expression contains fieldName, sorting directory, whether case should be ignored and optional sorting strategy */ sort(expression: ISortingExpression): void; /** * Represents a method declaration for sorting by multiple expressions * The expressions contains fieldName, sorting directory, whether case should be ignored and optional sorting strategy */ sort_multiple(expressions: ISortingExpression[]): void; /** Represents a method declaration for resetting the sorting */ clear_sort(fieldName: string): void; /** Represents an event, triggered when the pin state is changed */ get_pin_row_event_args(rowID: any, index?: number, row?: RowType, pinned?: boolean): IPinRowEventArgs; filterDataByExpressions(expressionsTree: IFilteringExpressionsTree): any[]; sortDataByExpressions(data: any[], expressions: ISortingExpression[]): any[]; update_cell(cell: IgxCell): IGridEditEventArgs; update_row(row: IgxEditRow, value: any, event?: Event): IGridEditEventArgs; expand_path_to_record?(record: ITreeGridRecord): void; get_selected_children?(record: ITreeGridRecord, selectedRowIDs: any[]): void; get_groupBy_record_id?(gRow: IGroupByRecord): string; remove_grouping_expression?(fieldName: string): void; clear_groupby?(field: string | any): void; getParentRowId?(child: GridType): any; getChildGrids?(inDepth?: boolean): GridType[]; getChildGrid?(path: IPathSegment[]): GridType; unsetChildRowIsland?(rowIsland: GridType): void; registerChildRowIsland?(rowIsland: GridType): void; } /** * Interface representing a grid type. It is essentially the blueprint to a grid object. * Contains definitions of properties and methods, relevant to a grid * Extends `IGridDataBindable` */ interface GridType extends IGridDataBindable { /** Represents the locale of the grid: `USD`, `EUR`, `GBP`, `CNY`, `JPY`, etc. */ locale: string; resourceStrings: IGridResourceStrings; /** Represents the native HTML element itself */ nativeElement: HTMLElement; /** Indicates whether rows in the grid are editable. If te value is true, the rows can be edited */ rowEditable: boolean; rootSummariesEnabled: boolean; /** Indicates whether filtering in the grid is enabled. If te value is true, the grid can be filtered */ allowFiltering: boolean; /** Indicates whether rows in the grid can be dragged. If te value is true, the rows can be dragged */ rowDraggable: boolean; /** Represents the unique primary key used for identifying rows in the grid */ primaryKey: string; /** Represents the unique identifier of the grid. */ id: string; /** The height of the visible rows in the grid. */ renderedRowHeight: number; pipeTrigger: number; summaryPipeTrigger: number; /** @hidden @internal */ groupablePipeTrigger: number; filteringPipeTrigger: number; /** @hidden @internal */ hasColumnLayouts: boolean; /** Indicates whether the grid is currently in a moving state. */ moving: boolean; isLoading: boolean; /** @hidden @internal */ gridSize: Size$1; /** @hidden @internal */ isColumnWidthSum: boolean; /** @hidden @internal */ minColumnWidth: number; /** Strategy, used for cloning the provided data. The type has one method, that takes any type of data */ dataCloneStrategy: IDataCloneStrategy; /** Represents the grid service type providing API methods for the grid */ readonly gridAPI: GridServiceType; /** The filter mode for the grid. It can be quick filter of excel-style filter */ filterMode: FilterMode; /** @hidden @internal */ theadRow: any; /** @hidden @internal */ groupArea: any; /** @hidden @internal */ filterCellList: any[]; /** @hidden @internal */ filteringRow: any; /** @hidden @internal */ actionStrip: any; /** @hidden @internal */ resizeLine: any; /** @hidden @internal */ tfoot: ElementRef; /** @hidden @internal */ paginator: IgxPaginatorComponent; /** @hidden @internal */ paginatorList?: QueryList; /** @hidden @internal */ crudService: any; /** @hidden @internal */ summaryService: any; /** Represents the state of virtualization for the grid. It has an owner, start index and chunk size */ virtualizationState: IForOfState; /** @hidden @internal */ /** The service handling selection in the grid. Selecting, deselecting elements */ selectionService: any; navigation: any; /** @hidden @internal */ filteringService: any; outlet: any; /** Indicates whether the grid has columns that can be moved */ /** @hidden @internal */ hasMovableColumns: boolean; /** Indicates whether the grid's rows can be selected */ isRowSelectable: boolean; /** Indicates whether the selectors of the rows are visible */ showRowSelectors: boolean; /** Indicates whether the grid's element is pinned to the start of the grid */ isPinningToStart: boolean; /** Indicates if the column of the grid is in drag mode */ columnInDrag: any; /** @hidden @internal */ /** The width of pinned element */ pinnedWidth: number; /** @hidden @internal */ /** The width of unpinned element */ unpinnedWidth: number; /** The CSS margin of the summaries */ summariesMargin: number; headSelectorBaseAriaLabel: string; /** Indicates whether the grid has columns that are shown */ hasVisibleColumns: boolean; /** * Optional * Indicates whether the grid has expandable children (hierarchical and tree grid) */ hasExpandableChildren?: boolean; /** * Optional * Indicates whether collapsed grid elements should be expanded */ showExpandAll?: boolean; /** Represents the count of only the hidden (not visible) columns */ hiddenColumnsCount: number; /** Represents the count of only the pinned columns */ pinnedColumnsCount: number; /** * Optional * The template for grid icons. * It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views */ iconTemplate?: TemplateRef; /** * Optional * The template for group-by rows. * It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views */ groupRowTemplate?: TemplateRef; /** * Optional * The template for the group row selector. * It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views */ groupByRowSelectorTemplate?: TemplateRef; /** * Optional * The template for row loading indicators. * It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views */ rowLoadingIndicatorTemplate?: TemplateRef; /** * The template for the header selector. * It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views */ headSelectorTemplate: TemplateRef; /** * The template for row selectors. * It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views */ rowSelectorTemplate: TemplateRef; /** * The template for sort header icons. * It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views */ sortHeaderIconTemplate: TemplateRef; /** * The template for ascending sort header icons. * It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views */ sortAscendingHeaderIconTemplate: TemplateRef; /** * The template for descending sort header icons. * It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views */ sortDescendingHeaderIconTemplate: TemplateRef; /** * The template for header collapsed indicators. * It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views */ headerCollapsedIndicatorTemplate: TemplateRef; /** * The template for header expanded indicators. * It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views */ headerExpandedIndicatorTemplate: TemplateRef; /** The template for drag indicator icons. Could be of any type */ dragIndicatorIconTemplate: any; /** The base drag indicator icon. Could be of any type */ dragIndicatorIconBase: any; /** Indicates whether transitions are disabled for the grid. */ disableTransitions: boolean; /** Indicates whether the currency symbol is positioned to the left of values. */ currencyPositionLeft: boolean; /** Indicates whether the width of the column is set by the user, or is configured automatically. */ columnWidthSetByUser: boolean; headerFeaturesWidth: number; /** CSS styling calculated for an element: calcHeight, calcWidth, outerWidth */ calcHeight: number; calcWidth: number; outerWidth: number; /** The height of each row in the grid. Setting a constant height can solve problems with not showing all elements when scrolling */ rowHeight: number; multiRowLayoutRowSize: number; /** Minimal width for headers */ defaultHeaderGroupMinWidth: any; maxLevelHeaderDepth: number; defaultRowHeight: number; /** The default font size, calculated for each element */ _baseFontSize?: number; scrollSize: number; /** The trigger for grid validation. It's value can either be `change` or `blur` */ validationTrigger: GridValidationTrigger; /** * The configuration for columns and rows pinning in the grid * It's of type IPinningConfig, which can have value for columns (start, end) and for rows (top, bottom) */ pinning: IPinningConfig; expansionStates: Map; parentVirtDir: any; tbody: any; verticalScrollContainer: any; dataRowList: any; rowList: any; /** An unmodifiable list, containing all the columns of the grid. */ columnList: QueryList; columns: ColumnType[]; /** An array of columns, but it counts only the ones visible (not hidden) in the view */ visibleColumns: ColumnType[]; /** An array of columns, but it counts only the ones that are not pinned */ unpinnedColumns: ColumnType[]; /** An array of columns, but it counts only the ones that are pinned */ pinnedColumns: ColumnType[]; /** represents an array of the headers of the columns */ /** @hidden @internal */ headerCellList: any[]; /** @hidden @internal */ headerGroups: any[]; /** @hidden @internal */ headerGroupsList: any[]; summariesRowList: any; /** @hidden @internal */ headerContainer: any; /** Indicates whether cells are selectable in the grid */ isCellSelectable: boolean; /** Indicates whether it is allowed to select more than one row in the grid */ isMultiRowSelectionEnabled: boolean; hasPinnedRecords: boolean; pinnedRecordsCount: number; pinnedRecords: any[]; unpinnedRecords: any[]; /** @hidden @internal */ pinnedDataView: any[]; pinnedRows: any[]; dataView: any[]; _filteredUnpinnedData: any[]; _filteredSortedUnpinnedData: any[]; filteredSortedData: any[]; dataWithAddedInTransactionRows: any[]; /** Represents the transaction service for the grid. */ readonly transactions: TransactionService; /** Represents the validation service for the grid. The type contains properties and methods (logic) for validating records */ readonly validation: IgxGridValidationService; defaultSummaryHeight: number; summaryRowHeight: number; rowEditingOverlay: IgxToggleDirective; totalRowsCountAfterFilter: number; _totalRecords: number; /** * Represents the paging of the grid. It can be either 'Local' or 'Remote' * - Local: Default value; The grid will paginate the data source based on the page */ pagingMode: GridPagingMode; /** The paging state for the grid; Used to configure how paging should be applied - which is the current page, records per page */ /** @hidden */ pagingState: any; rowEditTabs: any; /** Represents the last search in the grid * It contains the search text (the user has entered), the match and some settings for the search */ readonly lastSearchInfo: ISearchInfo; /** @hidden @internal */ page: number; /** @hidden @internal */ perPage: number; /** The ID of the row currently being dragged in the grid. */ /** @hidden @internal */ dragRowID: any; /** Indicates whether a row is currently being dragged */ rowDragging: boolean; firstEditableColumnIndex: number; lastEditableColumnIndex: number; isRowPinningToTop: boolean; hasDetails: boolean; /** @hidden @internal */ hasSummarizedColumns: boolean; /** @hidden @internal */ hasColumnGroups: boolean; /** @hidden @internal */ hasEditableColumns: boolean; /** Property, that provides a callback for loading unique column values on demand. * If this property is provided, the unique values it generates will be used by the Excel Style Filtering */ uniqueColumnValuesStrategy: (column: ColumnType, tree: FilteringExpressionsTree, done: (values: any[]) => void) => void; /** Property, that gets the header cell inner width for auto-sizing. */ getHeaderCellWidth: (element: HTMLElement) => ISizeInfo; /** * Provides change detection functionality. * A change-detection tree collects all views that are to be checked for changes. * The property cannot be changed (readonly) */ readonly cdr: ChangeDetectorRef; /** @hidden @internal */ document: Document; /** * The template for expanded row indicators. * It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views */ rowExpandedIndicatorTemplate: TemplateRef; /** * The template for collapsed row indicators. * It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views */ rowCollapsedIndicatorTemplate: TemplateRef; /** * The template for header icon * It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views */ excelStyleHeaderIconTemplate: TemplateRef; selectRowOnClick: boolean; /** Represents the selection mode for cells: 'none','single', 'multiple', 'multipleCascade' */ cellSelection: GridSelectionMode; /** Represents the selection mode for rows: 'none','single', 'multiple', 'multipleCascade' */ rowSelection: GridSelectionMode; /** Represents the selection mode for columns: 'none','single', 'multiple', 'multipleCascade' */ columnSelection: GridSelectionMode; /** Represents the calculation mode for summaries: 'rootLevelOnly', 'childLevelsOnly', 'rootAndChildLevels' */ summaryCalculationMode: GridSummaryCalculationMode; /** Represents the position of summaries: 'top', 'bottom' */ summaryPosition: GridSummaryPosition; lastChildGrid?: GridType; /** @hidden @internal */ toolbarOutlet?: ViewContainerRef; /** @hidden @internal */ paginatorOutlet?: ViewContainerRef; flatData?: any[] | null; /** @hidden @internal */ childRow?: any; expansionDepth?: number; childDataKey?: any; foreignKey?: any; cascadeOnDelete?: boolean; loadChildrenOnDemand?: (parentID: any, done: (children: any[]) => void) => void; hasChildrenKey?: any; loadingRows?: Set; parent?: GridType; highlightedRowID?: any; updateOnRender?: boolean; childLayoutKeys?: any[]; childLayoutList?: QueryList; rootGrid?: GridType; processedRootRecords?: ITreeGridRecord[]; rootRecords?: ITreeGridRecord[]; records?: Map; processedExpandedFlatData?: any[] | null; processedRecords?: Map; treeGroupArea?: any; activeNodeChange: EventEmitter; gridKeydown: EventEmitter; cellClick: EventEmitter; rowClick: EventEmitter; doubleClick: EventEmitter; contextMenu: EventEmitter; selected: EventEmitter; rangeSelected: EventEmitter; rowSelectionChanging: EventEmitter; localeChange: EventEmitter; filtering: EventEmitter; filteringDone: EventEmitter; columnPinned: EventEmitter; columnResized: EventEmitter; columnMovingEnd: EventEmitter; columnSelectionChanging: EventEmitter; columnMoving: EventEmitter; columnMovingStart: EventEmitter; columnPin: EventEmitter; columnVisibilityChanging: EventEmitter; columnVisibilityChanged: EventEmitter; batchEditingChange?: EventEmitter; rowAdd: EventEmitter; rowAdded: EventEmitter; rowAddedNotifier: Subject; rowDelete: EventEmitter; rowDeleted: EventEmitter; rowDeletedNotifier: Subject; cellEditEnter: EventEmitter; cellEdit: EventEmitter; cellEditDone: EventEmitter; cellEditExit: EventEmitter; rowEditEnter: EventEmitter; rowEdit: EventEmitter; rowEditDone: EventEmitter; rowEditExit: EventEmitter; rowDragStart: EventEmitter; rowDragEnd: EventEmitter; rowToggle: EventEmitter; formGroupCreated: EventEmitter; validationStatusChange: EventEmitter; toolbarExporting: EventEmitter; rendered$: Observable; resizeNotify: Subject; sortStrategy: IGridSortingStrategy; groupStrategy?: IGridGroupingStrategy; filteringLogic: FilteringLogic; filterStrategy: IFilteringStrategy; allowAdvancedFiltering: boolean; sortingExpressions: ISortingExpression[]; sortingExpressionsChange: EventEmitter; filteringExpressionsTree: IFilteringExpressionsTree; filteringExpressionsTreeChange: EventEmitter; advancedFilteringExpressionsTree: IFilteringExpressionsTree; advancedFilteringExpressionsTreeChange: EventEmitter; sortingOptions: ISortingOptions; batchEditing: boolean; groupingExpansionState?: IGroupByExpandState[]; groupingExpressions?: IGroupingExpression[]; groupingExpressionsChange?: EventEmitter; groupsExpanded?: boolean; readonly groupsRecords?: IGroupByRecord[]; groupingFlatResult?: any[]; groupingResult?: any[]; groupingMetadata?: any[]; selectedCells?: CellType[]; selectedRows: any[]; /** @hidden @internal */ activeDescendant?: string; /** @hidden @internal */ readonly type: 'flat' | 'tree' | 'hierarchical' | 'pivot'; toggleGroup?(groupRow: IGroupByRecord): void; clearGrouping?(field: string): void; groupBy?(expression: IGroupingExpression | Array): void; resolveOutlet?(): IgxOverlayOutletDirective; updateColumns(columns: ColumnType[]): void; getSelectedRanges(): GridSelectionRange[]; deselectAllColumns(): void; deselectColumns(columns: string[] | ColumnType[]): void; selectColumns(columns: string[] | ColumnType[]): void; selectedColumns(): ColumnType[]; refreshSearch(): void; getDefaultExpandState(record: any): boolean; trackColumnChanges(index: number, column: any): any; getPossibleColumnWidth(): string; resetHorizontalVirtualization(): void; hasVerticalScroll(): boolean; getVisibleContentHeight(): number; getDragGhostCustomTemplate(): TemplateRef | null; openRowOverlay(id: any): void; openAdvancedFilteringDialog(overlaySettings?: OverlaySettings): void; showSnackbarFor(index: number): void; getColumnByName(name: string): any; getColumnByVisibleIndex(index: number): ColumnType; getHeaderGroupWidth(column: ColumnType): string; getRowByKey?(key: any): RowType; getRowByIndex?(index: number): RowType; setFilteredData(data: any, pinned: boolean): void; setFilteredSortedData(data: any, pinned: boolean): void; sort(expression: ISortingExpression | ISortingExpression[]): void; clearSort(name?: string): void; pinRow(id: any, index?: number, row?: RowType): boolean; unpinRow(id: any, row?: RowType): boolean; getUnpinnedIndexById(id: any): number; getEmptyRecordObjectFor(inRow: RowType): any; isSummaryRow(rec: any): boolean; isRecordPinned(rec: any): boolean; getInitialPinnedIndex(rec: any): number; isRecordPinnedByViewIndex(rowIndex: number): boolean; isColumnGrouped(fieldName: string): boolean; isDetailRecord(rec: any): boolean; isGroupByRecord(rec: any): boolean; isGhostRecord(rec: any): boolean; isTreeRow?(rec: any): boolean; isChildGridRecord?(rec: any): boolean; getChildGrids?(inDepth?: boolean): any[]; isHierarchicalRecord?(record: any): boolean; columnToVisibleIndex(key: string | number): number; moveColumn(column: ColumnType, target: ColumnType, pos: DropPosition): void; navigateTo(rowIndex: number, visibleColumnIndex: number, callback?: (e: any) => any): void; getPreviousCell(currRowIndex: number, curVisibleColIndex: number, callback: (c: ColumnType) => boolean): ICellPosition; getNextCell(currRowIndex: number, curVisibleColIndex: number, callback: (c: ColumnType) => boolean): ICellPosition; clearCellSelection(): void; selectRange(range: GridSelectionRange | GridSelectionRange[]): void; selectRows(rowIDs: any[], clearCurrentSelection?: boolean): void; deselectRows(rowIDs: any[]): void; selectAllRows(onlyFilterData?: boolean): void; deselectAllRows(onlyFilterData?: boolean): void; setUpPaginator(): void; createFilterDropdown(column: ColumnType, options: OverlaySettings): any; updateCell(value: any, rowSelector: any, column: string): void; createRow?(index: number, data?: any): RowType; deleteRow(id: any): any; deleteRowById(id: any): any; updateRow(value: any, rowSelector: any): void; collapseRow(id: any): void; notifyChanges(repaint?: boolean): void; resetColumnCollections(): void; triggerPipes(): void; repositionRowEditingOverlay(row: RowType): void; closeRowEditingOverlay(): void; reflow(): void; isExpandedGroup(group: IGroupByRecord): boolean; createColumnsList?(cols: ColumnType[]): void; toggleAllGroupRows?(): void; toggleAll?(): void; generateRowPath?(rowId: any): any[]; preventHeaderScroll?(args: any): void; } /** * An interface describing a Flat Grid type. It is essentially the blueprint to a grid kind * Contains definitions of properties and methods, relevant to a grid kind * Extends from `GridType` */ interface FlatGridType extends GridType { groupingExpansionState: IGroupByExpandState[]; groupingExpressions: IGroupingExpression[]; groupingExpressionsChange: EventEmitter; toggleGroup(groupRow: IGroupByRecord): void; clearGrouping(field: string): void; groupBy(expression: IGroupingExpression | Array): void; } /** * An interface describing a Tree Grid type. It is essentially the blueprint to a grid kind * Contains definitions of properties and methods, relevant to a grid kind * Extends from `GridType` */ interface TreeGridType extends GridType { records: Map; isTreeRow(rec: any): boolean; } /** * An interface describing a Hierarchical Grid type. It is essentially the blueprint to a grid kind * Contains definitions of properties and methods, relevant to a grid kind * Extends from `GridType` */ interface HierarchicalGridType extends GridType { childLayoutKeys: any[]; } /** * An interface describing a Pivot Grid type. It is essentially the blueprint to a grid kind * Contains definitions of properties and methods, relevant to a grid kind * Extends from `GridType` */ interface PivotGridType extends GridType { /** * The configuration settings for the pivot grid. * it includes dimension strategy for rows and columns, filters and data keys */ pivotConfiguration: IPivotConfiguration; /** * An array of all dimensions (rows and columns) in the pivot grid. * it includes hierarchical level, filters and sorting, dimensional level, etc. */ allDimensions: IPivotDimension[]; /** Specifies whether to show the pivot configuration UI in the grid. */ pivotUI: IPivotUISettings; /** @hidden @internal */ columnDimensions: IPivotDimension[]; /** @hidden @internal */ rowDimensions: IPivotDimension[]; rowDimensionResizing: boolean; /** @hidden @internal */ visibleRowDimensions: IPivotDimension[]; /** @hidden @internal */ hasHorizontalLayout: boolean; /** @hidden @internal */ values: IPivotValue[]; /** @hidden @internal */ filterDimensions: IPivotDimension[]; /** @hidden @internal */ dimensionDataColumns: ColumnType[]; pivotRowWidths: number; getRowDimensionByName(name: string): IPivotDimension; /** Represents a method declaration for setting up the columns for the pivot grid based on the pivot configuration */ setupColumns(): void; /** Represents a method declaration that allows toggle of expansion state of a row (taken as a parameter) in the pivot grid */ toggleRow(rowID: any): void; /** * Represents a method declaration for resolving the data type for a specific field (column). * It takes the field as a parameter and returns it's type */ resolveDataTypes(field: any): GridColumnDataType; /** * Represents a method declaration for moving dimension from its currently collection to the specified target collection * by type (Row, Column or Filter) at specified index or at the collection's end */ moveDimension(dimension: IPivotDimension, targetCollectionType: PivotDimensionType, index?: number): any; getDimensionsByType(dimension: PivotDimensionType): any; /** Toggles the dimension's enabled state on or off. The dimension remains in its current collection */ toggleDimension(dimension: IPivotDimension): any; /** Sort the dimension and its children in the provided direction (ascending, descending or none). */ sortDimension(dimension: IPivotDimension, sortDirection: SortingDirection): any; /** Toggles the value's enabled state on or off. The value remains in its current collection. */ toggleValue(value: IPivotValue): any; /** Move value from its currently at specified index or at the end. * If the parameter is not set, it will add it to the end of the collection. */ moveValue(value: IPivotValue, index?: number): any; rowDimensionWidth(dim: IPivotDimension): string; rowDimensionWidthToPixels(dim: IPivotDimension): number; /** Emits an event when the dimensions in the pivot grid change. */ dimensionsChange: EventEmitter; /** Emits an event when the values in the pivot grid change. */ valuesChange: EventEmitter; /** Emits an event when the a dimension is sorted. */ dimensionsSortingExpressionsChange: EventEmitter; /** @hidden @internal */ pivotKeys: IPivotKeys; hasMultipleValues: boolean; excelStyleFilterMaxHeight: string; excelStyleFilterMinHeight: string; valueChipTemplate: TemplateRef; rowDimensionHeaderTemplate: TemplateRef; } interface GridSVGIcon { name: string; value: string; } interface ISizeInfo { width: number; padding: number; } interface IgxGridMasterDetailContext { $implicit: any; index: number; } interface IgxGroupByRowTemplateContext { $implicit: IGroupByRecord; } interface IgxGridTemplateContext { $implicit: GridType; } interface IgxGridRowTemplateContext { $implicit: RowType; } interface IgxGridRowDragGhostContext { $implicit: any; data: any; grid: GridType; } interface IgxGridEmptyTemplateContext { $implicit: undefined; } interface IgxGridRowEditTemplateContext { $implicit: undefined; rowChangesCount: number; endEdit: (commit: boolean, event?: Event) => void; } interface IgxGridRowEditTextTemplateContext { $implicit: number; } interface IgxGridRowEditActionsTemplateContext { $implicit: (commit: boolean, event?: Event) => void; } interface IgxGridHeaderTemplateContext { $implicit: HeaderType; } interface IgxColumnTemplateContext { $implicit: ColumnType; column: ColumnType; } interface IgxCellTemplateContext { $implicit: any; additionalTemplateContext: any; formControl?: FormControl; defaultErrorTemplate?: TemplateRef; cell: CellType; } interface IgxRowSelectorTemplateDetails { index: number; /** * @deprecated in version 15.1.0. Use the `key` property instead. */ rowID: any; key: any; selected: boolean; select?: () => void; deselect?: () => void; } interface IgxRowSelectorTemplateContext { $implicit: IgxRowSelectorTemplateDetails; } interface IgxGroupByRowSelectorTemplateDetails { selectedCount: number; totalCount: number; groupRow: IGroupByRecord; } interface IgxGroupByRowSelectorTemplateContext { $implicit: IgxGroupByRowSelectorTemplateDetails; } interface IgxHeadSelectorTemplateDetails { selectedCount: number; totalCount: number; selectAll?: () => void; deselectAll?: () => void; } interface IgxHeadSelectorTemplateContext { $implicit: IgxHeadSelectorTemplateDetails; } interface IgxSummaryTemplateContext { $implicit: IgxSummaryResult[]; } interface IgxGridPaginatorTemplateContext { $implicit: GridType; } /** * An interface describing settings for row/column pinning position. */ interface IPinningConfig { columns?: ColumnPinningPosition; rows?: RowPinningPosition; } /** * An interface describing settings for clipboard options */ interface IClipboardOptions { /** * Enables/disables the copy behavior */ enabled: boolean; /** * Include the columns headers in the clipboard output. */ copyHeaders: boolean; /** * Apply the columns formatters (if any) on the data in the clipboard output. */ copyFormatters: boolean; /** * The separator used for formatting the copy output. Defaults to `\t`. */ separator: string; } /** * An interface describing entity */ interface EntityType { name: string; fields: FieldType[]; childEntities?: EntityType[]; } /** * @hidden */ declare class GroupedRecords extends Array { } interface IGroupByRecord { expression: ISortingExpression; level: number; records: GroupedRecords; value: any; groupParent: IGroupByRecord; groups?: IGroupByRecord[]; height: number; column?: ColumnType; } interface IGroupByResult { data: any[]; metadata: IGroupByRecord[]; } declare enum PagingError { None = 0, IncorrectPageIndex = 1, IncorrectRecordsPerPage = 2 } declare interface IPagingState { index: number; recordsPerPage: number; metadata?: { countPages: number; error: PagingError; countRecords: number; }; } /** * @hidden */ declare const DataType: { readonly String: "string"; readonly Number: "number"; readonly Boolean: "boolean"; readonly Date: "date"; readonly DateTime: "dateTime"; readonly Time: "time"; readonly Currency: "currency"; readonly Percent: "percent"; readonly Image: "image"; }; type DataType = (typeof DataType)[keyof typeof DataType]; /** * @hidden */ declare const GridColumnDataType: { readonly String: "string"; readonly Number: "number"; readonly Boolean: "boolean"; readonly Date: "date"; readonly DateTime: "dateTime"; readonly Time: "time"; readonly Currency: "currency"; readonly Percent: "percent"; readonly Image: "image"; }; type GridColumnDataType = (typeof GridColumnDataType)[keyof typeof GridColumnDataType]; /** * @hidden */ declare class DataUtil { static sort(data: T[], expressions: ISortingExpression[], sorting?: IGridSortingStrategy, grid?: GridType): T[]; static treeGridSort(hierarchicalData: ITreeGridRecord[], expressions: ISortingExpression[], sorting?: IGridSortingStrategy, parent?: ITreeGridRecord, grid?: GridType): ITreeGridRecord[]; static cloneTreeGridRecord(hierarchicalRecord: ITreeGridRecord): ITreeGridRecord; static group(data: T[], state: IGroupingState, grouping?: IGridGroupingStrategy, grid?: GridType, groupsRecords?: any[], fullResult?: IGroupByResult): IGroupByResult; static page(data: T[], state: IPagingState, dataLength?: number): T[]; static correctPagingState(state: IPagingState, length: number): void; static getHierarchy(gRow: IGroupByRecord): Array; static isHierarchyMatch(h1: Array, h2: Array, expressions: IGroupingExpression[]): boolean; /** * Merges all changes from provided transactions into provided data collection * * @param data Collection to merge * @param transactions Transactions to merge into data * @param primaryKey Primary key of the collection, if any * @param deleteRows Should delete rows with DELETE transaction type from data * @returns Provided data collections updated with all provided transactions */ static mergeTransactions(data: T[], transactions: Transaction[], primaryKey?: any, cloneStrategy?: IDataCloneStrategy, deleteRows?: boolean): T[]; /** * Merges all changes from provided transactions into provided hierarchical data collection * * @param data Collection to merge * @param transactions Transactions to merge into data * @param childDataKey Data key of child collections * @param primaryKey Primary key of the collection, if any * @param deleteRows Should delete rows with DELETE transaction type from data * @returns Provided data collections updated with all provided transactions */ static mergeHierarchicalTransactions(data: any[], transactions: HierarchicalTransaction[], childDataKey: any, primaryKey?: any, cloneStrategy?: IDataCloneStrategy, deleteRows?: boolean): any[]; static parseValue(dataType: GridColumnDataType, value: any): any; private static findParentFromPath; } declare enum ExportRecordType { GroupedRecord = "GroupedRecord", TreeGridRecord = "TreeGridRecord", DataRecord = "DataRecord", HierarchicalGridRecord = "HierarchicalGridRecord", HeaderRecord = "HeaderRecord", SummaryRecord = "SummaryRecord", PivotGridRecord = "PivotGridRecord" } declare enum ExportHeaderType { RowHeader = "RowHeader", ColumnHeader = "ColumnHeader", MultiRowHeader = "MultiRowHeader", MultiColumnHeader = "MultiColumnHeader", PivotRowHeader = "PivotRowHeader", PivotMergedHeader = "PivotMergedHeader" } interface IExportRecord { data: any; level: number; type: ExportRecordType; owner?: string | GridType; hidden?: boolean; summaryKey?: string; hierarchicalOwner?: string; references?: IColumnInfo[]; rawData?: any; dimensionKeys?: string[]; } interface IColumnList { columns: IColumnInfo[]; columnWidths: number[]; indexOfLastPinnedColumn: number; maxLevel?: number; maxRowLevel?: number; } interface IColumnInfo { header: string; field: string; skip: boolean; dataType?: GridColumnDataType; skipFormatter?: boolean; formatter?: any; headerType?: ExportHeaderType; startIndex?: number; columnSpan?: number; rowSpan?: number; level?: number; exportIndex?: number; pinnedIndex?: number; columnGroupParent?: ColumnType | string; columnGroup?: ColumnType | string; currencyCode?: string; displayFormat?: string; dateFormat?: string; digitsInfo?: string; } /** * rowExporting event arguments * this.exporterService.rowExporting.subscribe((args: IRowExportingEventArgs) => { * // set args properties here * }) */ interface IRowExportingEventArgs extends IBaseEventArgs { /** * Contains the exporting row data */ rowData: any; /** * Contains the exporting row index */ rowIndex: number; /** * Skip the exporting row when set to true */ cancel: boolean; } /** * columnExporting event arguments * ```typescript * this.exporterService.columnExporting.subscribe((args: IColumnExportingEventArgs) => { * // set args properties here * }); * ``` */ interface IColumnExportingEventArgs extends IBaseEventArgs { /** * Contains the exporting column header */ header: string; /** * Contains the exporting column field name */ field: string; /** * Contains the exporting column index */ columnIndex: number; /** * Skip the exporting column when set to true */ cancel: boolean; /** * Export the column's data without applying its formatter, when set to true */ skipFormatter: boolean; /** * A reference to the grid owner. */ grid?: GridType; } declare const DEFAULT_OWNER = "default"; declare const GRID_ROOT_SUMMARY = "igxGridRootSummary"; declare const GRID_PARENT = "grid-parent"; declare const GRID_LEVEL_COL = "GRID_LEVEL_COL"; declare abstract class IgxBaseExporter { exportEnded: EventEmitter; /** * This event is emitted when a row is exported. * ```typescript * this.exporterService.rowExporting.subscribe((args: IRowExportingEventArgs) => { * // put event handler code here * }); * ``` * * @memberof IgxBaseExporter */ rowExporting: EventEmitter; /** * This event is emitted when a column is exported. * ```typescript * this.exporterService.columnExporting.subscribe((args: IColumnExportingEventArgs) => { * // put event handler code here * }); * ``` * * @memberof IgxBaseExporter */ columnExporting: EventEmitter; protected _sort: any; protected pivotGridFilterFieldsCount: number; protected _ownersMap: Map; private locale; private _setChildSummaries; private isPivotGridExport; private options; private summaries; private rowIslandCounter; private flatRecords; private pivotGridColumns; private pivotGridRowDimensionsMap; private pivotGridKeyValueMap; private ownerGrid; /** * Method for exporting IgxGrid component's data. * ```typescript * this.exporterService.export(this.igxGridForExport, this.exportOptions); * ``` * * @memberof IgxBaseExporter */ export(grid: any, options: IgxExporterOptionsBase): void; /** * Method for exporting any kind of array data. * ```typescript * this.exporterService.exportData(this.arrayForExport, this.exportOptions); * ``` * * @memberof IgxBaseExporter */ exportData(data: any[], options: IgxExporterOptionsBase): void; private addToRowDimensionsMap; private exportGridRecordsData; private calculateColumnSpans; private exportRow; private reorderColumns; private prepareData; private preparePivotGridData; private prepareHierarchicalGridData; private addHierarchicalGridData; private prepareSummaries; private prepareIslandData; private getAllChildColumnsAndData; private prepareGridData; private prepareTreeGridData; private addTreeGridData; private getTreeGridChildData; private addFlatData; private setSummaries; private addGroupedData; private getColumns; private mapHierarchicalGridColumns; private getAutoGeneratedColumns; private addPivotRowHeaders; private addPivotGridColumns; private preparePivotGridColumns; private groupByKeys; private calculateRowSpan; private createRowDimension; private addLevelColumns; private addLevelData; private resetDefaults; protected abstract exportDataImplementation(data: any[], options: IgxExporterOptionsBase, done: () => void): void; } /** * Objects of this class are used to configure the CSV exporting process. */ declare class IgxCsvExporterOptions extends IgxExporterOptionsBase { private _valueDelimiter; private _fileType; constructor(fileName: string, fileType: CsvFileTypes); private static getExtensionFromFileType; /** * Gets the value delimiter which will be used for the exporting operation. * ```typescript * let delimiter = this.exportOptions.valueDelimiter; * ``` * * @memberof IgxCsvExporterOptions */ get valueDelimiter(): any; /** * Sets a value delimiter which will overwrite the default delimiter of the selected export format. * ```typescript * this.exportOptions.valueDelimiter = '|'; * ``` * * @memberof IgxCsvExporterOptions */ set valueDelimiter(value: any); /** * Gets the CSV export format. * ```typescript * let filetype = this.exportOptions.fileType; * ``` * * @memberof IgxCsvExporterOptions */ get fileType(): any; /** * Sets the CSV export format. * ```typescript * this.exportOptions.fileType = CsvFileTypes.TAB; * ``` * * @memberof IgxCsvExporterOptions */ set fileType(value: any); private setFileType; private setDelimiter; } /** * This enumeration is used to configure the default value separator * as well as the default file extension used when performing CSV exporting. */ declare enum CsvFileTypes { /** * Character Separated Values, default separator is "comma", default file extension is .csv */ CSV = 0, /** * Tab Separated Values, default separator is tab, default file extension is .tsv */ TSV = 1, /** * Tab Separated Values, default separator is tab, default file extension is .tab */ TAB = 2 } interface ICsvExportEndedEventArgs extends IBaseEventArgs { csvData?: string; } /** * **Ignite UI for Angular CSV Exporter Service** - * [Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/exporter-csv) * * The Ignite UI for Angular CSV Exporter service can export data in a Character Separated Values format from * both raw data (array) or from an `IgxGrid`. * * Example: * ```typescript * public localData = [ * { Name: "Eric Ridley", Age: "26" }, * { Name: "Alanis Brook", Age: "22" }, * { Name: "Jonathan Morris", Age: "23" } * ]; * * constructor(private csvExportService: IgxCsvExporterService) { * } * * const opt: IgxCsvExporterOptions = new IgxCsvExporterOptions("FileName", CsvFileTypes.CSV); * this.csvExportService.exportData(this.localData, opt); * ``` */ declare class IgxCsvExporterService extends IgxBaseExporter { /** * This event is emitted when the export process finishes. * ```typescript * this.exporterService.exportEnded.subscribe((args: ICsvExportEndedEventArgs) => { * // put event handler code here * }); * ``` * * @memberof IgxCsvExporterService */ exportEnded: EventEmitter; private _stringData; protected exportDataImplementation(data: IExportRecord[], options: IgxCsvExporterOptions, done: () => void): void; private saveFile; private exportFile; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵprov: i0.ɵɵInjectableDeclaration; } /** * Objects of this class are used to configure the Excel exporting process. */ declare class IgxExcelExporterOptions extends IgxExporterOptionsBase { /** * Specifies if column pinning should be ignored. If ignoreColumnsOrder is set to true, * this option will always be considered as set to true. * ```typescript * let ignorePinning = this.exportOptions.ignorePinning; * this.exportOptions.ignorePinning = true; * ``` * * @memberof IgxExcelExporterOptions */ ignorePinning: boolean; /** * Specifies whether the exported data should be formatted as Excel table. (True by default) * ```typescript * let exportAsTable = this.exportOptions.exportAsTable; * this.exportOptions.exportAsTable = false; * ``` * * @memberof IgxExcelExporterOptions */ exportAsTable: boolean; private _columnWidth; private _rowHeight; private _worksheetName; constructor(fileName: string); /** * Gets the width of the columns in the exported excel file. * ```typescript * let width = this.exportOptions.columnWidth; * ``` * * @memberof IgxExcelExporterOptions */ get columnWidth(): number; /** * Sets the width of the columns in the exported excel file. If left unspecified, * the width of the column or the default width of the excel columns will be used. * ```typescript * this.exportOptions.columnWidth = 55; * ``` * * @memberof IgxExcelExporterOptions */ set columnWidth(value: number); /** * Gets the height of the rows in the exported excel file. * ```typescript * let height = this.exportOptions.rowHeight; * ``` * * @memberof IgxExcelExporterOptions */ get rowHeight(): number; /** * Sets the height of the rows in the exported excel file. If left unspecified or 0, * the default height of the excel rows will be used. * ```typescript * this.exportOptions.rowHeight = 25; * ``` * * @memberof IgxExcelExporterOptions */ set rowHeight(value: number); /** * Gets the name of the worksheet in the exported excel file. * ```typescript * let worksheetName = this.exportOptions.worksheetName; * ``` * * @memberof IgxExcelExporterOptions */ get worksheetName(): string; /** * Sets the name of the worksheet in the exported excel file. * ```typescript * this.exportOptions.worksheetName = "Worksheet"; * ``` * * @memberof IgxExcelExporterOptions */ set worksheetName(value: string); } interface IExcelExportEndedEventArgs extends IBaseEventArgs { xlsx?: Object; } /** * **Ignite UI for Angular Excel Exporter Service** - * [Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/exporter_excel.html) * * The Ignite UI for Angular Excel Exporter service can export data in Microsoft® Excel® format from both raw data * (array) or from an `IgxGrid`. * * Example: * ```typescript * public localData = [ * { Name: "Eric Ridley", Age: "26" }, * { Name: "Alanis Brook", Age: "22" }, * { Name: "Jonathan Morris", Age: "23" } * ]; * * constructor(private excelExportService: IgxExcelExporterService) { * } * * this.excelExportService.exportData(this.localData, new IgxExcelExporterOptions("FileName")); * ``` */ declare class IgxExcelExporterService extends IgxBaseExporter { /** * This event is emitted when the export process finishes. * ```typescript * this.exporterService.exportEnded.subscribe((args: IExcelExportEndedEventArgs) => { * // put event handler code here * }); * ``` * * @memberof IgxExcelExporterService */ exportEnded: EventEmitter; private static populateZipFileConfig; protected exportDataImplementation(data: IExportRecord[], options: IgxExcelExporterOptions, done: () => void): void; private saveFile; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵprov: i0.ɵɵInjectableDeclaration; } /** * Positions the element based on the directions passed in trough PositionSettings. * These are Top/Middle/Bottom for verticalDirection and Left/Center/Right for horizontalDirection */ declare class GlobalPositionStrategy implements IPositionStrategy { /** * PositionSettings to use when position the component in the overlay */ settings: PositionSettings; protected _defaultSettings: PositionSettings; constructor(settings?: PositionSettings); /** * Position the element based on the PositionStrategy implementing this interface. * * @param contentElement The HTML element to be positioned * @param size Size of the element * @param document reference to the Document object * @param initialCall should be true if this is the initial call to the method * @param target attaching target for the component to show * ```typescript * settings.positionStrategy.position(content, size, document, true); * ``` */ position(contentElement: HTMLElement): void; /** * Clone the strategy instance. * ```typescript * settings.positionStrategy.clone(); * ``` */ clone(): IPositionStrategy; protected setPosition(contentElement: HTMLElement): void; } /** * Positions the element inside the containing outlet based on the directions passed in trough PositionSettings. * These are Top/Middle/Bottom for verticalDirection and Left/Center/Right for horizontalDirection */ declare class ContainerPositionStrategy extends GlobalPositionStrategy { constructor(settings?: PositionSettings); /** * Position the element based on the PositionStrategy implementing this interface. */ position(contentElement: HTMLElement): void; } /** * Positions the element based on the directions and start point passed in trough PositionSettings. * It is possible to either pass a start point or an HTMLElement as a positioning base. */ declare class ConnectedPositioningStrategy implements IPositionStrategy { /** * PositionSettings to use when position the component in the overlay */ settings: PositionSettings; private _defaultSettings; constructor(settings?: PositionSettings); /** * Position the element based on the PositionStrategy implementing this interface. * * @param contentElement The HTML element to be positioned * @param size Size of the element * @param document reference to the Document object * @param initialCall should be true if this is the initial call to the method * @param target attaching target for the component to show * ```typescript * settings.positionStrategy.position(content, size, document, true); * ``` */ position(contentElement: HTMLElement, size: Size, document?: Document, initialCall?: boolean, target?: Point | HTMLElement): void; /** * Creates clone of this position strategy * @returns clone of this position strategy */ clone(): IPositionStrategy; /** * Obtains the DomRect objects for the required elements - target and element to position * * @returns target and element DomRect objects */ protected calculateElementRectangles(contentElement: any, target: Point | HTMLElement): { targetRect: Partial; elementRect: Partial; }; /** * Sets element's style which effectively positions provided element according * to provided position settings * * @param element Element to position * @param targetRect Bounding rectangle of strategy target * @param elementRect Bounding rectangle of the element */ protected setStyle(element: HTMLElement, targetRect: Partial, elementRect: Partial, connectedFit: ConnectedFit): void; } declare abstract class BaseFitPositionStrategy extends ConnectedPositioningStrategy { protected _initialSize: Size; protected _initialSettings: PositionSettings; /** * Position the element based on the PositionStrategy implementing this interface. * * @param contentElement The HTML element to be positioned * @param size Size of the element * @param document reference to the Document object * @param initialCall should be true if this is the initial call to the method * @param target attaching target for the component to show * ```typescript * settings.positionStrategy.position(content, size, document, true); * ``` */ position(contentElement: HTMLElement, size: Size, document?: Document, initialCall?: boolean, target?: Point | HTMLElement): void; /** * Checks if element can fit in viewport and updates provided connectedFit * with the result * * @param connectedFit connectedFit to update */ protected updateViewPortFit(connectedFit: ConnectedFit): void; /** * Calculates the position of the left border of the element if it gets positioned * with provided start point and direction * * @param targetRect Rectangle of the target where element is attached * @param elementRect Rectangle of the element * @param startPoint Start point of the target * @param direction Direction in which to show the element */ protected calculateLeft(targetRect: Partial, elementRect: Partial, startPoint: HorizontalAlignment, direction: HorizontalAlignment, offset?: number): number; /** * Calculates the position of the top border of the element if it gets positioned * with provided position settings related to the target * * @param targetRect Rectangle of the target where element is attached * @param elementRect Rectangle of the element * @param startPoint Start point of the target * @param direction Direction in which to show the element */ protected calculateTop(targetRect: Partial, elementRect: Partial, startPoint: VerticalAlignment, direction: VerticalAlignment, offset?: number): number; /** * Returns whether the element should fit in viewport * * @param connectedFit connectedFit object containing all necessary parameters */ protected shouldFitInViewPort(connectedFit: ConnectedFit): boolean; /** * Fits the element into viewport according to the position settings * * @param element element to fit in viewport * @param connectedFit connectedFit object containing all necessary parameters */ protected abstract fitInViewport(element: HTMLElement, connectedFit: ConnectedFit): any; } /** * Positions the element as in **Connected** positioning strategy and re-positions the element in * the view port (calculating a different start point) in case the element is partially getting out of view */ declare class AutoPositionStrategy extends BaseFitPositionStrategy { /** * Fits the element into viewport according to the position settings * * @param element element to fit in viewport * @param connectedFit connectedFit object containing all necessary parameters */ protected fitInViewport(element: HTMLElement, connectedFit: ConnectedFit): void; /** * Checks if element can be flipped without get off the viewport * * @param connectedFit connectedFit object containing all necessary parameters * @returns true if element can be flipped and stain in viewport */ private canFlipHorizontal; /** * Checks if element can be flipped without get off the viewport * * @param connectedFit connectedFit object containing all necessary parameters * @returns true if element can be flipped and stain in viewport */ private canFlipVertical; /** * Flips direction and start point of the position settings */ private flipHorizontal; /** * Flips direction and start point of the position settings */ private flipVertical; /** * Calculates necessary horizontal push according to provided connectedFit * * @param connectedFit connectedFit object containing all necessary parameters * @returns amount of necessary translation which will push the element into viewport */ private horizontalPush; /** * Calculates necessary vertical push according to provided connectedFit * * @param connectedFit connectedFit object containing all necessary parameters * @returns amount of necessary translation which will push the element into viewport */ private verticalPush; /** * Changes open and close animation with reverse animation if one exists * * @param flipDirection direction for which to change the animations */ private flipAnimation; /** * Tries to find the reverse animation according to provided direction * * @param animation animation to update * @param direction required animation direction * @returns reverse animation in given direction if one exists */ private updateAnimation; } /** * Positions the element as in **Connected** positioning strategy and resize the element * to fit in the view port in case the element is partially getting out of view */ declare class ElasticPositionStrategy extends BaseFitPositionStrategy { /** * Fits the element into viewport according to the position settings * * @param element element to fit in viewport * @param connectedFit connectedFit object containing all necessary parameters */ protected fitInViewport(element: HTMLElement, connectedFit: ConnectedFit): void; } declare class IgxBaseTransactionService implements TransactionService { /** * Gets/Sets the data clone strategy used to clone data */ get cloneStrategy(): IDataCloneStrategy; set cloneStrategy(strategy: IDataCloneStrategy); /** * @returns if there are any transactions in the Redo stack */ get canRedo(): boolean; /** * @returns if there are any transactions in the Undo stack */ get canUndo(): boolean; /** * Returns whether transaction is enabled for this service */ get enabled(): boolean; /** * Event fired when transaction state has changed - add transaction, commit all transactions, undo and redo */ onStateUpdate: EventEmitter; protected _isPending: boolean; protected _pendingTransactions: T[]; protected _pendingStates: Map; private _cloneStrategy; /** * Adds provided transaction with recordRef if any * * @param transaction Transaction to be added * @param recordRef Reference to the value of the record in the data source related to the changed item */ add(transaction: T, recordRef?: any): void; /** * Returns all recorded transactions in chronological order * * @param id Optional record id to get transactions for * @returns All transaction in the service or for the specified record */ getTransactionLog(_id?: any): T[]; /** * Remove the last transaction if any */ undo(): void; /** * Applies the last undone transaction if any */ redo(): void; /** * Returns aggregated changes from all transactions * * @param mergeChanges If set to true will merge each state's value over relate recordRef * and will record resulting value in the related transaction * @returns Collection of aggregated transactions for each changed record */ getAggregatedChanges(mergeChanges: boolean): T[]; /** * Returns the state of the record with provided id * * @param id The id of the record * @param pending Should get pending state * @returns State of the record if any */ getState(id: any): S; /** * Returns value of the required id including all uncommitted changes * * @param id The id of the record to return value for * @param mergeChanges If set to true will merge state's value over relate recordRef * and will return merged value * @returns Value with changes or **null** */ getAggregatedValue(id: any, mergeChanges: boolean): any; /** * Applies all transactions over the provided data * * @param data Data source to update * @param id Optional record id to commit transactions for */ commit(_data: any[], _id?: any): void; /** * Clears all transactions * * @param id Optional record id to clear transactions for */ clear(_id?: any): void; /** * Starts pending transactions. All transactions passed after call to startPending * will not be added to transaction log */ startPending(): void; /** * Clears all pending transactions and aggregated pending state. If commit is set to true * commits pending states as single transaction * * @param commit Should commit the pending states */ endPending(_commit: boolean): void; /** * Updates the provided states collection according to passed transaction and recordRef * * @param states States collection to apply the update to * @param transaction Transaction to apply to the current state * @param recordRef Reference to the value of the record in data source, if any, where transaction should be applied */ protected updateState(states: Map, transaction: T, recordRef?: any): void; /** * Updates the recordRef of the provided state with all the changes in the state. Accepts primitive and object value types * * @param state State to update value for * @returns updated value including all the changes in provided state */ protected updateValue(state: S): any; /** * Merges second values in first value and the result in empty object. If values are primitive type * returns second value if exists, or first value. * * @param first Value to merge into * @param second Value to merge */ protected mergeValues(first: U, second: U): U; /** * Compares the state with recordRef and clears all duplicated values. If any state ends as * empty object removes it from states. * * @param state State to clean */ protected cleanState(id: any, states: Map): void; } interface HierarchicalTransactionService extends TransactionService { /** * Applies all transactions over the provided data * * @param data Data source to update * @param id Optional record id to commit transactions for */ commit(data: any[], id?: any): void; /** * Applies all transactions over the provided data * * @param data Data source to update * @param primaryKey Primary key of the hierarchical data * @param childDataKey Key of child data collection * @param id Optional record id to commit transactions for */ commit(data: any[], primaryKey: any, childDataKey: any, id?: any): void; } declare class IgxTransactionService extends IgxBaseTransactionService { protected _transactions: T[]; protected _redoStack: Action[][]; protected _undoStack: Action[][]; protected _states: Map; /** * @returns if there are any transactions in the Undo stack */ get canUndo(): boolean; /** * @returns if there are any transactions in the Redo stack */ get canRedo(): boolean; /** * Adds provided transaction with recordRef if any * * @param transaction Transaction to be added * @param recordRef Reference to the value of the record in the data source related to the changed item */ add(transaction: T, recordRef?: any): void; /** * Returns all recorded transactions in chronological order * * @param id Optional record id to get transactions for * @returns All transaction in the service or for the specified record */ getTransactionLog(id?: any): T[]; /** * Returns aggregated changes from all transactions * * @param mergeChanges If set to true will merge each state's value over relate recordRef * and will record resulting value in the related transaction * @returns Collection of aggregated transactions for each changed record */ getAggregatedChanges(mergeChanges: boolean): T[]; /** * Returns the state of the record with provided id * * @param id The id of the record * @param pending Should get pending state * @returns State of the record if any */ getState(id: any, pending?: boolean): S; /** * Returns whether transaction is enabled for this service */ get enabled(): boolean; /** * Returns value of the required id including all uncommitted changes * * @param id The id of the record to return value for * @param mergeChanges If set to true will merge state's value over relate recordRef * and will return merged value * @returns Value with changes or **null** */ getAggregatedValue(id: any, mergeChanges: boolean): any; /** * Clears all pending transactions and aggregated pending state. If commit is set to true * commits pending states as single transaction * * @param commit Should commit the pending states */ endPending(commit: boolean): void; /** * Applies all transactions over the provided data * * @param data Data source to update * @param id Optional record id to commit transactions for */ commit(data: any[], id?: any): void; /** * Clears all transactions * * @param id Optional record id to clear transactions for */ clear(id?: any): void; /** * Remove the last transaction if any */ undo(): void; /** * Applies the last undone transaction if any */ redo(): void; protected addTransaction(transaction: T, states: Map, recordRef?: any): void; /** * Verifies if the passed transaction is correct. If not throws an exception. * * @param transaction Transaction to be verified */ protected verifyAddedTransaction(states: Map, transaction: T, recordRef?: any): void; /** * Updates the provided states collection according to passed transaction and recordRef * * @param states States collection to apply the update to * @param transaction Transaction to apply to the current state * @param recordRef Reference to the value of the record in data source, if any, where transaction should be applied */ protected updateState(states: Map, transaction: T, recordRef?: any): void; /** * Updates state related record in the provided data * * @param data Data source to update * @param state State to update data from */ protected updateRecord(data: any[], state: S): void; } /** @experimental @hidden */ declare class IgxHierarchicalTransactionService extends IgxTransactionService implements HierarchicalTransactionService { getAggregatedChanges(mergeChanges: boolean): T[]; commit(data: any[], primaryKeyOrId?: any, childDataKey?: any, id?: any): void; protected updateState(states: Map, transaction: T, recordRef?: any): void; private clearArraysFromObject; } /** * The type of the transaction that should be provided. * When batchEditing is disabled, `None` is provided. * When enabled - `Base` is provided. * An enum instead of a boolean value leaves room for extra scenarios in the future. */ declare const enum TRANSACTION_TYPE { 'None' = "None", 'Base' = "Base" } /** * Factory service for instantiating TransactionServices */ declare class IgxFlatTransactionFactory { /** * Creates a new Transaction service instance depending on the specified type. * * @param type The type of the transaction * @returns a new instance of TransactionService */ create(type: TRANSACTION_TYPE): TransactionService; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵprov: i0.ɵɵInjectableDeclaration; } /** * Factory service for instantiating HierarchicalTransactionServices */ declare class IgxHierarchicalTransactionFactory extends IgxFlatTransactionFactory { /** * Creates a new HierarchialTransaction service instance depending on the specified type. * * @param type The type of the transaction * @returns a new instance of HierarchialTransaction */ create(type: TRANSACTION_TYPE): HierarchicalTransactionService; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵprov: i0.ɵɵInjectableDeclaration; } /** @hidden */ declare class IgxSelectionAPIService { /** * If primaryKey is defined, then multiple selection is based on the primaryKey, and it is array of numbers, strings, etc. * If the primaryKey is omitted, then selection is based on the item data */ protected selection: Map>; /** * Get current component selection. * * @param componentID ID of the component. */ get(componentID: string): Set; /** * Set new component selection. * * @param componentID ID of the component. * @param newSelection The new component selection to be set. */ set(componentID: string, newSelection: Set): void; /** * Clears selection for component. * * @param componentID ID of the component. */ clear(componentID: string): void; /** * Removes selection for a component. * @param componentID */ delete(componentID: string): void; /** * Get current component selection length. * * @param componentID ID of the component. */ size(componentID: string): number; /** * Creates new selection that consist of the new item added to the current component selection. * The returned collection is new Set, * therefore if you want to update component selection you need to call in addition the set_selection() method * or instead use the select_item() one. * * @param componentID ID of the component, which we add new item to. * @param itemID ID of the item to add to component selection. * @param sel Used internally only by the selection (add_items method) to accumulate selection for multiple items. * * @returns Selection after the new item is added. */ add_item(componentID: string, itemID: any, sel?: Set): Set; /** * Creates new selection that consist of the new items added to the current component selection. * The returned collection is new Set, * therefore if you want to update component selection you need to call in addition the set_selection() method * or instead use the select_items() one. * * @param componentID ID of the component, which we add new items to. * @param itemIDs Array of IDs of the items to add to component selection. * @param clearSelection If true it will clear previous selection. * * @returns Selection after the new items are added. */ add_items(componentID: string, itemIDs: any[], clearSelection?: boolean): Set; /** * Add item to the current component selection. * * @param componentID ID of the component, which we add new item to. * @param itemID ID of the item to add to component selection. * @param sel Used internally only by the selection (select_items method) to accumulate selection for multiple items. */ select_item(componentID: string, itemID: any, sel?: Set): void; /** * Add items to the current component selection. * * @param componentID ID of the component, which we add new items to. * @param itemIDs Array of IDs of the items to add to component selection. * @param clearSelection If true it will clear previous selection. */ select_items(componentID: string, itemID: any[], clearSelection?: boolean): void; /** * Creates new selection that consist of the new items excluded from the current component selection. * The returned collection is new Set, * therefore if you want to update component selection you need to call in addition the set_selection() method * or instead use the deselect_item() one. * * @param componentID ID of the component, which we remove items from. * @param itemID ID of the item to remove from component selection. * @param sel Used internally only by the selection (delete_items method) to accumulate deselected items. * * @returns Selection after the item is removed. */ delete_item(componentID: string, itemID: any, sel?: Set): Set; /** * Creates new selection that consist of the new items removed to the current component selection. * The returned collection is new Set, * therefore if you want to update component selection you need to call in addition the set_selection() method * or instead use the deselect_items() one. * * @param componentID ID of the component, which we remove items from. * @param itemID ID of the items to remove from component selection. * * @returns Selection after the items are removed. */ delete_items(componentID: string, itemIDs: any[]): Set; /** * Remove item from the current component selection. * * @param componentID ID of the component, which we remove item from. * @param itemID ID of the item to remove from component selection. * @param sel Used internally only by the selection (deselect_items method) to accumulate selection for multiple items. */ deselect_item(componentID: string, itemID: any, sel?: Set): void; /** * Remove items to the current component selection. * * @param componentID ID of the component, which we add new items to. * @param itemIDs Array of IDs of the items to add to component selection. */ deselect_items(componentID: string, itemID: any[], _clearSelection?: boolean): void; /** * Check if the item is selected in the component selection. * * @param componentID ID of the component. * @param itemID ID of the item to search. * * @returns If item is selected. */ is_item_selected(componentID: string, itemID: any): boolean; /** * Get first element in the selection. * This is correct when we have only one item in the collection (for single selection purposes) * and the method returns that item. * * @param componentID ID of the component. * * @returns First element in the set. */ first_item(componentID: string): any; /** * Returns whether all items are selected. * * @param componentID ID of the component. * @param dataCount: number Number of items in the data. * * @returns If all items are selected. */ are_all_selected(componentID: string, dataCount: number): boolean; /** * Returns whether any of the items is selected. * * @param componentID ID of the component. * @param data Entire data array. * * @returns If there is any item selected. */ are_none_selected(componentID: string): boolean; /** * Get all primary key values from a data array. If there isn't a primary key defined that the entire data is returned instead. * * @param data Entire data array. * @param primaryKey Data primary key. * * @returns Array of identifiers, either primary key values or the entire data array. */ get_all_ids(data: any, primaryKey?: any): any; /** * Returns empty selection collection. * * @returns empty set. */ get_empty(): Set; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵprov: i0.ɵɵInjectableDeclaration; } /** * The `` is a container intended for row items in * a `` container. */ declare class IgxDropDownGroupComponent { /** * @hidden @internal */ get labelId(): string; get labelledBy(): string; /** * @hidden @internal */ role: string; /** @hidden @internal */ groupClass: boolean; /** * Sets/gets if the item group is disabled * * ```typescript * const myDropDownGroup: IgxDropDownGroupComponent = this.dropdownGroup; * // get * ... * const groupState: boolean = myDropDownGroup.disabled; * ... * //set * ... * myDropDownGroup,disabled = false; * ... * ``` * * ```html * * * {{ item.text }} * * * ``` * * **NOTE:** All items inside of a disabled drop down group will be treated as disabled */ disabled: boolean; /** * Sets/gets the label of the item group * * ```typescript * const myDropDownGroup: IgxDropDownGroupComponent = this.dropdownGroup; * // get * ... * const myLabel: string = myDropDownGroup.label; * ... * // set * ... * myDropDownGroup.label = 'My New Label'; * ... * ``` * * ```html * * ... * * ``` */ label: string; private _id; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; static ngAcceptInputType_disabled: unknown; } /** * An abstract class defining a drop-down item: * With properties / styles for selection, highlight, height * Bindable property for passing data (`value: any`) * Parent component (has to be used under a parent with type `IDropDownBase`) * Method for handling click on Host() */ declare class IgxDropDownItemBaseDirective implements DoCheck { protected dropDown: IDropDownBase; protected elementRef: ElementRef; protected group: IgxDropDownGroupComponent; protected selection?: IgxSelectionAPIService; /** * Sets/gets the `id` of the item. * ```html * * ``` * ```typescript * let itemId = this.item.id; * ``` * * @memberof IgxSelectItemComponent */ id: string; get ariaLabel(): string; set ariaLabel(value: string); /** * @hidden @internal */ get itemID(): this; /** * The data index of the dropdown item. * * ```typescript * // get the data index of the selected dropdown item * let selectedItemIndex = this.dropdown.selectedItem.index * ``` */ get index(): number; set index(value: number); /** * Gets/sets the value of the item if the item is databound * * ```typescript * // usage in IgxDropDownItemComponent * // get * let mySelectedItemValue = this.dropdown.selectedItem.value; * * // set * let mySelectedItem = this.dropdown.selectedItem; * mySelectedItem.value = { id: 123, name: 'Example Name' } * * // usage in IgxComboItemComponent * // get * let myComboItemValue = this.combo.items[0].value; * ``` */ value: any; /** * @hidden @internal */ get itemStyle(): boolean; /** * Sets/Gets if the item is the currently selected one in the dropdown * * ```typescript * let mySelectedItem = this.dropdown.selectedItem; * let isMyItemSelected = mySelectedItem.selected; // true * ``` * * Two-way data binding * ```html * * ``` */ get selected(): boolean; set selected(value: boolean); /** * @hidden */ selectedChange: EventEmitter; /** * Sets/gets if the given item is focused * ```typescript * let mySelectedItem = this.dropdown.selectedItem; * let isMyItemFocused = mySelectedItem.focused; * ``` */ get focused(): boolean; /** * ```html * *
* {{item.field}} *
*
* ``` */ set focused(value: boolean); /** * Sets/gets if the given item is header * ```typescript * // get * let mySelectedItem = this.dropdown.selectedItem; * let isMyItemHeader = mySelectedItem.isHeader; * ``` * * ```html * * *
* {{item.field}} *
*
* ``` */ isHeader: boolean; /** * Sets/gets if the given item is disabled * * ```typescript * // get * let mySelectedItem = this.dropdown.selectedItem; * let myItemIsDisabled = mySelectedItem.disabled; * ``` * * ```html * *
* {{item.field}} *
*
* ``` * **NOTE:** Drop-down items inside of a disabled `IgxDropDownGroup` will always count as disabled */ get disabled(): boolean; set disabled(value: boolean); /** * Gets/sets the `role` attribute of the item. Default is 'option'. * * ```html * * ``` */ role: string; /** * Gets item index * * @hidden @internal */ get itemIndex(): number; /** * Gets item element height * * @hidden @internal */ get elementHeight(): number; /** * Get item html element * * @hidden @internal */ get element(): ElementRef; protected get hasIndex(): boolean; /** * @hidden */ protected _focused: boolean; protected _selected: boolean; protected _index: any; protected _disabled: boolean; protected _label: any; constructor(dropDown: IDropDownBase, elementRef: ElementRef, group: IgxDropDownGroupComponent, selection?: IgxSelectionAPIService); /** * @hidden * @internal */ clicked(event: any): void; /** * @hidden * @internal */ handleMousedown(event: MouseEvent): void; ngDoCheck(): void; /** Returns true if the items is not a header or disabled */ protected get isSelectable(): boolean; /** If `allowItemsFocus` is enabled, keep the browser focus on the active item */ protected ensureItemFocus(): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; static ngAcceptInputType_selected: unknown; static ngAcceptInputType_isHeader: unknown; static ngAcceptInputType_disabled: unknown; } /** @hidden */ declare enum Navigate { Up = -1, Down = 1 } /** Key actions that have designated handlers in IgxDropDownComponent */ declare const DropDownActionKey: { readonly ESCAPE: "escape"; readonly ENTER: "enter"; readonly SPACE: "space"; }; type DropDownActionKey = (typeof DropDownActionKey)[keyof typeof DropDownActionKey]; /** * Interface that encapsulates selectionChanging event arguments - old selection, new selection and cancel selection. * * @export */ interface ISelectionEventArgs extends CancelableEventArgs, IBaseEventArgs { oldSelection: IgxDropDownItemBaseDirective; newSelection: IgxDropDownItemBaseDirective; } /** * Interface for an instance of IgxDropDownNavigationDirective * * @export */ interface IDropDownNavigationDirective { target: any; handleKeyDown(event: KeyboardEvent): void; onArrowDownKeyDown(event?: KeyboardEvent): void; onArrowUpKeyDown(event?: KeyboardEvent): void; onEndKeyDown(event?: KeyboardEvent): void; onHomeKeyDown(event?: KeyboardEvent): void; } /** * @hidden */ interface IDropDownList { selectionChanging: EventEmitter; width: string; height: string; id: string; maxHeight: string; collapsed: boolean; items: IgxDropDownItemBaseDirective[]; headers: IgxDropDownItemBaseDirective[]; focusedItem: IgxDropDownItemBaseDirective; navigateFirst(): void; navigateLast(): void; navigateNext(): void; navigatePrev(): void; navigateItem(newIndex: number, direction?: Navigate): void; onItemActionKey(key: DropDownActionKey, event?: Event): void; } /** * @hidden */ interface IDropDownBase extends IDropDownList, IToggleView { selectedItem: any; opening: EventEmitter; opened: EventEmitter; closing: EventEmitter; closed: EventEmitter; allowItemsFocus?: boolean; setSelectedItem(index: number): void; selectItem(item: IgxDropDownItemBaseDirective, event?: Event, emit?: boolean): void; } /** * An abstract class, defining a drop-down component, with: * Properties for display styles and classes * A collection items of type `IgxDropDownItemBaseDirective` * Properties and methods for navigating (highlighting/focusing) items from the collection * Properties and methods for selecting items from the collection */ declare abstract class IgxDropDownBaseDirective implements IDropDownList, OnInit { protected elementRef: ElementRef; protected cdr: ChangeDetectorRef; document: any; /** * Emitted when item selection is changing, before the selection completes * * ```html * * ``` */ selectionChanging: EventEmitter; /** * Gets/Sets the width of the drop down * * ```typescript * // get * let myDropDownCurrentWidth = this.dropdown.width; * ``` * ```html * * * ``` */ width: string; /** * Gets/Sets the height of the drop down * * ```typescript * // get * let myDropDownCurrentHeight = this.dropdown.height; * ``` * ```html * * * ``` */ height: string; /** * Gets/Sets the drop down's id * * ```typescript * // get * let myDropDownCurrentId = this.dropdown.id; * ``` * ```html * * * ``` */ get id(): string; set id(value: string); /** * Gets/Sets the drop down's container max height. * * ```typescript * // get * let maxHeight = this.dropdown.maxHeight; * ``` * ```html * * * ``` */ maxHeight: any; /** * @hidden @internal */ cssClass: boolean; /** * Get all non-header items * * ```typescript * let myDropDownItems = this.dropdown.items; * ``` */ get items(): IgxDropDownItemBaseDirective[]; /** * Get all header items * * ```typescript * let myDropDownHeaderItems = this.dropdown.headers; * ``` */ get headers(): IgxDropDownItemBaseDirective[]; /** * Get dropdown html element * * ```typescript * let myDropDownElement = this.dropdown.element; * ``` */ get element(): any; /** * @hidden @internal * Get dropdown's html element of its scroll container */ get scrollContainer(): HTMLElement; /** * @hidden * @internal */ children: QueryList; protected _width: any; protected _height: any; protected _focusedItem: any; protected _id: string; protected computedStyles: any; /** * Gets if the dropdown is collapsed */ abstract readonly collapsed: boolean; constructor(elementRef: ElementRef, cdr: ChangeDetectorRef, document: any); ngOnInit(): void; /** Keydown Handler */ onItemActionKey(key: DropDownActionKey, event?: Event): void; /** * Emits selectionChanging with the target item & event * * @hidden @internal * @param newSelection the item selected * @param event the event that triggered the call */ selectItem(newSelection?: IgxDropDownItemBaseDirective, event?: Event, emit?: boolean): void; /** * @hidden @internal */ get focusedItem(): IgxDropDownItemBaseDirective; /** * @hidden @internal */ set focusedItem(item: IgxDropDownItemBaseDirective); /** * Navigates to the item on the specified index * * @param newIndex number - the index of the item in the `items` collection */ navigateItem(newIndex: number): void; /** * @hidden @internal */ navigateFirst(): void; /** * @hidden @internal */ navigateLast(): void; /** * @hidden @internal */ navigateNext(): void; /** * @hidden @internal */ navigatePrev(): void; protected scrollToHiddenItem(newItem: IgxDropDownItemBaseDirective): void; protected navigate(direction: Navigate, currentIndex?: number): void; protected getNearestSiblingFocusableItemIndex(startIndex: number, direction: Navigate): number; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * **Ignite UI for Angular DropDown** - * [Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/drop-down) * * The Ignite UI for Angular Drop Down displays a scrollable list of items which may be visually grouped and * supports selection of a single item. Clicking or tapping an item selects it and closes the Drop Down * * Example: * ```html * * * {{ item.value }} * * * ``` */ declare class IgxDropDownComponent extends IgxDropDownBaseDirective implements IDropDownBase, OnChanges, AfterViewInit, OnDestroy { protected selection: IgxSelectionAPIService; /** * @hidden * @internal */ children: QueryList; /** * Emitted before the dropdown is opened * * ```html * * ``` */ opening: EventEmitter; /** * Emitted after the dropdown is opened * * ```html * * ``` */ opened: EventEmitter; /** * Emitted before the dropdown is closed * * ```html * * ``` */ closing: EventEmitter; /** * Emitted after the dropdown is closed * * ```html * * ``` */ closed: EventEmitter; /** * Gets/sets whether items take focus. Disabled by default. * When enabled, drop down items gain tab index and are focused when active - * this includes activating the selected item when opening the drop down and moving with keyboard navigation. * * Note: Keep that focus shift in mind when using the igxDropDownItemNavigation directive * and ensure it's placed either on each focusable item or a common ancestor to allow it to handle keyboard events. * * ```typescript * // get * let dropDownAllowsItemFocus = this.dropdown.allowItemsFocus; * ``` * * ```html * * * ``` */ allowItemsFocus: boolean; /** * Sets aria-labelledby attribute value. * ```html * * ``` */ labelledBy: string; protected virtDir: IgxForOfToken; protected toggleDirective: IgxToggleDirective; protected scrollContainerRef: ElementRef; /** * @hidden @internal */ get focusedItem(): IgxDropDownItemBaseDirective; set focusedItem(value: IgxDropDownItemBaseDirective); get id(): string; set id(value: string); /** Id of the internal listbox of the drop down */ get listId(): string; /** * Get currently selected item * * ```typescript * let currentItem = this.dropdown.selectedItem; * ``` */ get selectedItem(): IgxDropDownItemBaseDirective; /** * Gets if the dropdown is collapsed * * ```typescript * let isCollapsed = this.dropdown.collapsed; * ``` */ get collapsed(): boolean; /** @hidden @internal */ get scrollContainer(): HTMLElement; protected get collectionLength(): number; protected destroy$: Subject; protected _scrollPosition: number; constructor(elementRef: ElementRef, cdr: ChangeDetectorRef, document: any, selection: IgxSelectionAPIService); /** * Opens the dropdown * * ```typescript * this.dropdown.open(); * ``` */ open(overlaySettings?: OverlaySettings): void; /** * @hidden @internal */ getDefaultOverlaySettings(): OverlaySettings; /** * Closes the dropdown * * ```typescript * this.dropdown.close(); * ``` */ close(event?: Event): void; /** * Toggles the dropdown * * ```typescript * this.dropdown.toggle(); * ``` */ toggle(overlaySettings?: OverlaySettings): void; /** * Select an item by index * * @param index of the item to select; If the drop down uses *igxFor, pass the index in data */ setSelectedItem(index: number): void; /** * Navigates to the item on the specified index * If the data in the drop-down is virtualized, pass the index of the item in the virtualized data. * * @param newIndex number */ navigateItem(index: number): void; /** * @hidden @internal */ updateScrollPosition(): void; /** * @hidden @internal */ onToggleOpening(e: IBaseCancelableBrowserEventArgs): void; /** * @hidden @internal */ onToggleContentAppended(_event: ToggleViewEventArgs): void; /** * @hidden @internal */ onToggleOpened(): void; /** * @hidden @internal */ onToggleClosing(e: IBaseCancelableBrowserEventArgs): void; /** * @hidden @internal */ onToggleClosed(): void; /** * @hidden @internal */ ngOnDestroy(): void; /** @hidden @internal */ calculateScrollPosition(item: IgxDropDownItemBaseDirective): number; /** * @hidden @internal */ ngOnChanges(changes: SimpleChanges): void; ngAfterViewInit(): void; /** Keydown Handler */ onItemActionKey(key: DropDownActionKey, event?: Event): void; /** * Virtual scroll implementation * * @hidden @internal */ navigateFirst(): void; /** * @hidden @internal */ navigateLast(): void; /** * @hidden @internal */ navigateNext(): void; /** * @hidden @internal */ navigatePrev(): void; /** * Handles the `selectionChanging` emit and the drop down toggle when selection changes * * @hidden * @internal * @param newSelection * @param emit * @param event */ selectItem(newSelection?: IgxDropDownItemBaseDirective, event?: Event, emit?: boolean): void; /** * Clears the selection of the dropdown * ```typescript * this.dropdown.clearSelection(); * ``` */ clearSelection(): void; /** * Checks whether the selection is valid * `null` - the selection should be emptied * Virtual? - the selection should at least have and `index` and `value` property * Non-virtual? - the selection should be a valid drop-down item and **not** be a header */ protected isSelectionValid(selection: any): boolean; protected scrollToItem(item: IgxDropDownItemBaseDirective): void; protected focusItem(value: boolean): void; protected updateItemFocus(): void; protected skipHeader(direction: Navigate): void; private isIndexOutOfBounds; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; static ngAcceptInputType_allowItemsFocus: unknown; } /** * Navigation Directive that handles keyboard events on its host and controls a targeted IgxDropDownBaseDirective component */ declare class IgxDropDownItemNavigationDirective implements IDropDownNavigationDirective { dropdown: IgxDropDownBaseDirective; protected _target: IgxDropDownBaseDirective; constructor(dropdown: IgxDropDownBaseDirective); /** * Gets the target of the navigation directive; * * ```typescript * // Get * export class MyComponent { * ... * @ContentChild(IgxDropDownNavigationDirective) * navDirective: IgxDropDownNavigationDirective = null * ... * const navTarget: IgxDropDownBaseDirective = navDirective.navTarget * } * ``` */ get target(): IgxDropDownBaseDirective; /** * Sets the target of the navigation directive; * If no valid target is passed, it falls back to the drop down context * * ```html * * * ... * * ... * * ``` */ set target(target: IgxDropDownBaseDirective); /** * Captures keydown events and calls the appropriate handlers on the target component */ handleKeyDown(event: KeyboardEvent): void; /** * Navigates to previous item */ onArrowDownKeyDown(): void; /** * Navigates to previous item */ onArrowUpKeyDown(): void; /** * Navigates to target's last item */ onEndKeyDown(): void; /** * Navigates to target's first item */ onHomeKeyDown(): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } declare class IgxHintDirective implements OnInit { /** * Sets/gets whether the hint position is at the start. * Default value is `false`. * ```typescript * @ViewChild('hint', {read: IgxHintDirective}) * public igxHint: IgxHintDirective; * this.igxHint.isPositionStart = true; * ``` * ```typescript * let isHintPositionStart = this.igxHint.isPositionStart; * ``` * * @memberof IgxHintDirective */ isPositionStart: boolean; /** * Sets/gets whether the hint position is at the end. * Default value is `false`. * ```typescript * @ViewChild('hint', {read: IgxHintDirective}) * public igxHint: IgxHintDirective; * this.igxHint.isPositionEnd = true; * ``` * ```typescript * let isHintPositionEnd = this.igxHint.isPositionEnd; * ``` * * @memberof IgxHintDirective */ isPositionEnd: boolean; private _position; /** * Sets the position of the hint. * ```html * * * IgxHint displayed at the start * * ``` * * @memberof IgxHintDirective */ set position(value: string); /** * Gets the position of the hint. * ```typescript * @ViewChild('hint', {read: IgxHintDirective}) * public igxHint: IgxHintDirective; * let hintPosition = this.igxHint.position; * ``` * * @memberof IgxHintDirective */ get position(): string; /** * @hidden */ ngOnInit(): void; private _applyPosition; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** @hidden */ declare abstract class IgxInputGroupBase { disabled: boolean; isFocused: boolean; isRequired: boolean; hasPlaceholder: boolean; } declare enum IgxInputState { INITIAL = 0, VALID = 1, INVALID = 2 } /** * The `igxInput` directive creates single- or multiline text elements, covering common scenarios when dealing with form inputs. * * @igxModule IgxInputGroupModule * * @igxParent Data Entry & Display * * @igxTheme igx-input-group-theme * * @igxKeywords input, input group, form, field, validation * * @igxGroup presentation * * @example * ```html * * * * * ``` */ declare class IgxInputDirective implements AfterViewInit, OnDestroy { inputGroup: IgxInputGroupBase; protected ngModel: NgModel; protected formControl: NgControl; protected element: ElementRef; protected cdr: ChangeDetectorRef; protected renderer: Renderer2; /** * Sets/gets whether the `"igx-input-group__input"` class is added to the host element. * Default value is `false`. * * @example * ```typescript * this.igxInput.isInput = true; * ``` * * @example * ```typescript * let isCLassAdded = this.igxInput.isInput; * ``` */ isInput: boolean; /** * Sets/gets whether the `"class.igx-input-group__textarea"` class is added to the host element. * Default value is `false`. * * @example * ```typescript * this.igxInput.isTextArea = true; * ``` * * @example * ```typescript * let isCLassAdded = this.igxInput.isTextArea; * ``` */ isTextArea: boolean; private _valid; private _statusChanges$; private _valueChanges$; private _fileNames; private _disabled; constructor(inputGroup: IgxInputGroupBase, ngModel: NgModel, formControl: NgControl, element: ElementRef, cdr: ChangeDetectorRef, renderer: Renderer2); private get ngControl(); /** * Sets the `value` property. * * @example * ```html * * * * ``` */ set value(value: any); /** * Gets the `value` property. * * @example * ```typescript * @ViewChild('igxInput', {read: IgxInputDirective}) * public igxInput: IgxInputDirective; * let inputValue = this.igxInput.value; * ``` */ get value(): any; /** * Sets the `disabled` property. * * @example * ```html * * * * ``` */ set disabled(value: boolean); /** * Gets the `disabled` property * * @example * ```typescript * @ViewChild('igxInput', {read: IgxInputDirective}) * public igxInput: IgxInputDirective; * let isDisabled = this.igxInput.disabled; * ``` */ get disabled(): boolean; /** * Sets the `required` property. * * @example * ```html * * * * ``` */ set required(value: boolean); /** * Gets whether the igxInput is required. * * @example * ```typescript * let isRequired = this.igxInput.required; * ``` */ get required(): boolean; /** * @hidden * @internal */ onFocus(): void; /** * @param event The event to invoke the handler * * @hidden * @internal */ onBlur(): void; /** @hidden @internal */ onInput(): void; /** @hidden @internal */ change(event: Event): void; /** @hidden @internal */ get fileNames(): string; /** @hidden @internal */ clear(): void; /** @hidden @internal */ ngAfterViewInit(): void; /** @hidden @internal */ ngOnDestroy(): void; /** * Sets a focus on the igxInput. * * @example * ```typescript * this.igxInput.focus(); * ``` */ focus(): void; /** * Gets the `nativeElement` of the igxInput. * * @example * ```typescript * let igxInputNativeElement = this.igxInput.nativeElement; * ``` */ get nativeElement(): HTMLInputElement; /** @hidden @internal */ protected onStatusChanged(): void; /** @hidden @internal */ protected onValueChanged(): void; /** * @hidden * @internal */ protected updateValidityState(): void; private get isTouchedOrDirty(); private get hasValidators(); /** * Gets whether the igxInput has a placeholder. * * @example * ```typescript * let hasPlaceholder = this.igxInput.hasPlaceholder; * ``` */ get hasPlaceholder(): boolean; /** * Gets the placeholder element of the igxInput. * * @example * ```typescript * let igxInputPlaceholder = this.igxInput.placeholder; * ``` */ get placeholder(): string; /** * @returns An indicator of whether the input has validator attributes or not * * @hidden * @internal */ private _hasValidators; /** * Gets whether the igxInput is focused. * * @example * ```typescript * let isFocused = this.igxInput.focused; * ``` */ get focused(): boolean; /** * Gets the state of the igxInput. * * @example * ```typescript * let igxInputState = this.igxInput.valid; * ``` */ get valid(): IgxInputState; /** * Sets the state of the igxInput. * * @example * ```typescript * this.igxInput.valid = IgxInputState.INVALID; * ``` */ set valid(value: IgxInputState); /** * Gets whether the igxInput is valid. * * @example * ```typescript * let valid = this.igxInput.isValid; * ``` */ get isValid(): boolean; /** * A function to assign a native validity property of an input. * This should be used when there's no ngControl * * @hidden * @internal */ private checkNativeValidity; /** * Returns the input type. * * @hidden * @internal */ get type(): string; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; static ngAcceptInputType_disabled: unknown; static ngAcceptInputType_required: unknown; } declare class IgxLabelDirective { defaultClass: boolean; /** * @hidden */ id: string; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * @hidden */ declare class IgxPrefixDirective { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * @hidden */ declare class IgxSuffixDirective { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } interface IInputResourceStrings { igx_input_upload_button?: string; igx_input_file_placeholder?: string; } declare const InputResourceStringsEN: IInputResourceStrings; declare const IgxInputGroupEnum: { readonly Line: "line"; readonly Box: "box"; readonly Border: "border"; readonly Search: "search"; }; /** * Defines the InputGroupType DI token. */ declare const IGX_INPUT_GROUP_TYPE: InjectionToken; /** * Determines the InputGroupType. */ type IgxInputGroupType = (typeof IgxInputGroupEnum)[keyof typeof IgxInputGroupEnum]; declare class IgxInputGroupComponent implements IgxInputGroupBase { element: ElementRef; private _inputGroupType; private document; private platform; private cdr; private themeToken; /** * Sets the resource strings. * By default it uses EN resources. */ set resourceStrings(value: IInputResourceStrings); /** * Returns the resource strings. */ get resourceStrings(): IInputResourceStrings; /** * Property that enables/disables the auto-generated class of the `IgxInputGroupComponent`. * By default applied the class is applied. * ```typescript * @ViewChild("MyInputGroup") * public inputGroup: IgxInputGroupComponent; * ngAfterViewInit(){ * this.inputGroup.defaultClass = false; * ``` * } */ defaultClass: boolean; /** @hidden */ hasPlaceholder: boolean; /** @hidden */ isRequired: boolean; /** @hidden */ isFocused: boolean; /** * @hidden @internal * When truthy, disables the `IgxInputGroupComponent`. * Controlled by the underlying `IgxInputDirective`. * ```html * * ``` */ disabled: boolean; /** * Prevents automatically focusing the input when clicking on other elements in the input group (e.g. prefix or suffix). * * @remarks Automatic focus causes software keyboard to show on mobile devices. * * @example * ```html * * ``` */ suppressInputAutofocus: boolean; /** @hidden */ hasWarning: boolean; /** @hidden */ protected hints: QueryList; protected _prefixes: QueryList; protected _suffixes: QueryList; /** @hidden */ protected input: IgxInputDirective; private _destroyRef; private _type; private _filled; private _theme; private _resourceStrings; /** @hidden */ get validClass(): boolean; /** @hidden */ get invalidClass(): boolean; /** @hidden */ get isFilled(): any; /** @hidden */ get textAreaClass(): boolean; /** * Sets how the input will be styled. * Allowed values of type IgxInputGroupType. * ```html * * ``` */ set type(value: IgxInputGroupType); /** * Returns the type of the `IgxInputGroupComponent`. How the input is styled. * The default is `line`. * ```typescript * @ViewChild("MyInputGroup") * public inputGroup: IgxInputGroupComponent; * ngAfterViewInit(){ * let inputType = this.inputGroup.type; * } * ``` */ get type(): IgxInputGroupType; /** * Sets the theme of the input. * Allowed values of type IgxInputGroupTheme. * ```typescript * @ViewChild("MyInputGroup") * public inputGroup: IgxInputGroupComponent; * ngAfterViewInit() { * let inputTheme = 'fluent'; * } */ set theme(value: IgxTheme); /** * Returns the theme of the input. * The returned value is of type IgxInputGroupType. * ```typescript * @ViewChild("MyInputGroup") * public inputGroup: IgxInputGroupComponent; * ngAfterViewInit() { * let inputTheme = this.inputGroup.theme; * } */ get theme(): IgxTheme; constructor(element: ElementRef, _inputGroupType: IgxInputGroupType, document: any, platform: PlatformUtil, cdr: ChangeDetectorRef, themeToken: ThemeToken); /** @hidden */ onClick(event: MouseEvent): void; /** @hidden */ onPointerDown(event: PointerEvent): void; /** @hidden @internal */ hintClickHandler(event: MouseEvent): void; /** * Returns whether the `IgxInputGroupComponent` has hints. * ```typescript * @ViewChild("MyInputGroup") * public inputGroup: IgxInputGroupComponent; * ngAfterViewInit(){ * let inputHints = this.inputGroup.hasHints; * } * ``` */ get hasHints(): boolean; /** @hidden @internal */ get hasPrefixes(): boolean; /** @hidden @internal */ set prefixes(items: QueryList); /** @hidden @internal */ get hasSuffixes(): any; /** @hidden @internal */ set suffixes(items: QueryList); /** * Returns whether the `IgxInputGroupComponent` has border. * ```typescript * @ViewChild("MyInputGroup") * public inputGroup: IgxInputGroupComponent; * ngAfterViewInit(){ * let inputBorder = this.inputGroup.hasBorder; * } * ``` */ get hasBorder(): boolean; /** * Returns whether the `IgxInputGroupComponent` type is line. * ```typescript * @ViewChild("MyInputGroup1") * public inputGroup: IgxInputGroupComponent; * ngAfterViewInit(){ * let isTypeLine = this.inputGroup.isTypeLine; * } * ``` */ get isTypeLine(): boolean; /** * Returns whether the `IgxInputGroupComponent` type is box. * ```typescript * @ViewChild("MyInputGroup1") * public inputGroup: IgxInputGroupComponent; * ngAfterViewInit(){ * let isTypeBox = this.inputGroup.isTypeBox; * } * ``` */ get isTypeBox(): boolean; /** @hidden @internal */ uploadButtonHandler(): void; /** @hidden @internal */ clearValueHandler(): void; /** @hidden @internal */ get isFileType(): boolean; /** @hidden @internal */ get fileNames(): string; /** * Returns whether the `IgxInputGroupComponent` type is border. * ```typescript * @ViewChild("MyInputGroup1") * public inputGroup: IgxInputGroupComponent; * ngAfterViewInit(){ * let isTypeBorder = this.inputGroup.isTypeBorder; * } * ``` */ get isTypeBorder(): boolean; /** * Returns true if the `IgxInputGroupComponent` theme is Fluent. * ```typescript * @ViewChild("MyInputGroup1") * public inputGroup: IgxInputGroupComponent; * ngAfterViewInit(){ * let isTypeFluent = this.inputGroup.isTypeFluent; * } * ``` */ get isTypeFluent(): boolean; /** * Returns true if the `IgxInputGroupComponent` theme is Bootstrap. * ```typescript * @ViewChild("MyInputGroup1") * public inputGroup: IgxInputGroupComponent; * ngAfterViewInit(){ * let isTypeBootstrap = this.inputGroup.isTypeBootstrap; * } * ``` */ get isTypeBootstrap(): boolean; /** * Returns true if the `IgxInputGroupComponent` theme is Indigo. * ```typescript * @ViewChild("MyInputGroup1") * public inputGroup: IgxInputGroupComponent; * ngAfterViewInit(){ * let isTypeIndigo = this.inputGroup.isTypeIndigo; * } * ``` */ get isTypeIndigo(): boolean; /** * Returns whether the `IgxInputGroupComponent` type is search. * ```typescript * @ViewChild("MyInputGroup1") * public inputGroup: IgxInputGroupComponent; * ngAfterViewInit(){ * let isTypeSearch = this.inputGroup.isTypeSearch; * } * ``` */ get isTypeSearch(): boolean; /** @hidden */ get filled(): boolean; /** @hidden */ set filled(val: boolean); private setComponentTheme; /** @hidden @internal */ ngAfterContentChecked(): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; static ngAcceptInputType_suppressInputAutofocus: unknown; } declare const IGX_INPUT_GROUP_DIRECTIVES: readonly [typeof IgxInputGroupComponent, typeof IgxInputDirective, typeof IgxLabelDirective, typeof IgxPrefixDirective, typeof IgxSuffixDirective, typeof IgxHintDirective]; /** * Interface that encapsulates onItemSelection event arguments - new value and cancel selection. * * @export */ interface AutocompleteSelectionChangingEventArgs extends CancelableEventArgs, IBaseEventArgs { /** * New value selected from the drop down */ value: string; } interface AutocompleteOverlaySettings { /** Position strategy to use with this settings */ positionStrategy?: IPositionStrategy; /** Scroll strategy to use with this settings */ scrollStrategy?: IScrollStrategy; /** Set the outlet container to attach the overlay to */ outlet?: IgxOverlayOutletDirective | ElementRef; } /** * **Ignite UI for Angular Autocomplete** - * [Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/autocomplete.html) * * The igxAutocomplete directive provides a way to enhance a text input * by showing a drop down of suggested options, provided by the developer. * * Example: * ```html * * * * {{town}} * * * ``` */ declare class IgxAutocompleteDirective extends IgxDropDownItemNavigationDirective implements OnDestroy, AfterViewInit, OnInit { protected ngModel: NgModel; protected formControl: FormControlName; protected group: IgxInputGroupComponent; protected elementRef: ElementRef; protected cdr: ChangeDetectorRef; /** * Sets the target of the autocomplete directive * * ```html * * * ... * * ... * * ``` */ get target(): IgxDropDownComponent; set target(v: IgxDropDownComponent); /** * Provide overlay settings for the autocomplete drop down * * ```typescript * // get * let settings = this.autocomplete.autocompleteSettings; * ``` * ```html * * * ``` * ```typescript * // set * this.settings = { * positionStrategy: new ConnectedPositioningStrategy({ * closeAnimation: null, * openAnimation: null * }) * }; * ``` */ autocompleteSettings: AutocompleteOverlaySettings; /** @hidden @internal */ autofill: string; /** @hidden @internal */ role: string; /** * Enables/disables autocomplete component * * ```typescript * // get * let disabled = this.autocomplete.disabled; * ``` * ```html * * * ``` * ```typescript * // set * public disabled = true; * ``` */ disabled: boolean; /** * Emitted after item from the drop down is selected * * ```html * * ``` */ selectionChanging: EventEmitter; /** @hidden @internal */ get nativeElement(): HTMLInputElement; /** @hidden @internal */ get parentElement(): HTMLElement; private get settings(); /** @hidden @internal */ get ariaExpanded(): boolean; /** @hidden @internal */ get hasPopUp(): string; /** @hidden @internal */ get ariaOwns(): string; /** @hidden @internal */ get ariaActiveDescendant(): string; /** @hidden @internal */ get ariaAutocomplete(): string; protected _composing: boolean; protected id: string; protected get model(): NgModel | FormControlName; private _shouldBeOpen; private destroy$; private defaultSettings; constructor(ngModel: NgModel, formControl: FormControlName, group: IgxInputGroupComponent, elementRef: ElementRef, cdr: ChangeDetectorRef); /** @hidden @internal */ onInput(): void; /** @hidden @internal */ onCompositionStart(): void; /** @hidden @internal */ onCompositionEnd(): void; /** @hidden @internal */ onArrowDown(event: Event): void; /** @hidden @internal */ onTab(): void; /** @hidden @internal */ handleKeyDown(event: any): void; /** @hidden @internal */ onArrowDownKeyDown(): void; /** @hidden @internal */ onArrowUpKeyDown(): void; /** @hidden @internal */ onEndKeyDown(): void; /** @hidden @internal */ onHomeKeyDown(): void; /** * Closes autocomplete drop down */ close(): void; /** * Opens autocomplete drop down */ open(): void; /** @hidden @internal */ ngOnInit(): void; /** @hidden */ ngOnDestroy(): void; ngAfterViewInit(): void; private get collapsed(); private select; private highlightFirstItem; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; static ngAcceptInputType_disabled: unknown; } declare const IgxBaseButtonType: { readonly Flat: "flat"; readonly Contained: "contained"; readonly Outlined: "outlined"; }; declare abstract class IgxButtonBaseDirective { element: ElementRef; /** * Emitted when the button is clicked. */ buttonClick: EventEmitter; /** * Sets/gets the `role` attribute. * * @example * ```typescript * this.button.role = 'navbutton'; * let buttonRole = this.button.role; * ``` */ role: string; /** * @hidden * @internal */ onClick(ev: MouseEvent): void; /** * @hidden * @internal */ protected onBlur(): void; /** * Sets/gets whether the button component is on focus. * Default value is `false`. * ```typescript * this.button.focus = true; * ``` * ```typescript * let isFocused = this.button.focused; * ``` */ protected focused: boolean; /** * Enables/disables the button. * * @example * ```html * * ``` */ disabled: boolean; /** * @hidden * @internal */ get disabledAttribute(): true; constructor(element: ElementRef); /** * @hidden * @internal */ protected updateOnKeyUp(event: KeyboardEvent): void; /** * Returns the underlying DOM element. */ get nativeElement(): any; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; static ngAcceptInputType_disabled: unknown; } declare const IgxButtonType: { readonly FAB: "fab"; readonly Flat: "flat"; readonly Contained: "contained"; readonly Outlined: "outlined"; }; /** * Determines the Button type. */ type IgxButtonType = typeof IgxButtonType[keyof typeof IgxButtonType]; /** * The Button directive provides the Ignite UI Button functionality to every component that's intended to be used as a button. * * @igxModule IgxButtonModule * * @igxParent Data Entry & Display * * @igxTheme igx-button-theme * * @igxKeywords button, span, div, click * * @remarks * The Ignite UI Button directive is intended to be used by any button, span or div and turn it into a fully functional button. * * @example * ```html * * ``` */ declare class IgxButtonDirective extends IgxButtonBaseDirective { element: ElementRef; private _renderer; private static ngAcceptInputType_type; /** * Called when the button is selected. */ buttonSelected: EventEmitter; /** * @hidden * @internal */ _cssClass: string; /** * @hidden * @internal */ private _type; /** * @hidden * @internal */ private _color; /** * @hidden * @internal */ private _label; /** * @hidden * @internal */ private _backgroundColor; /** * @hidden * @internal */ private _selected; protected emitSelected(): void; /** * Gets or sets whether the button is selected. * Mainly used in the IgxButtonGroup component and it will have no effect if set separately. * * @example * ```html * * ``` */ set selected(value: boolean); get selected(): boolean; constructor(element: ElementRef, _renderer: Renderer2); /** * Sets the type of the button. * * @example * ```html * * ``` */ set type(type: IgxButtonType); /** * Sets the `aria-label` attribute. * * @example * ```html * * ``` */ set label(value: string); /** * @hidden * @internal */ get flat(): boolean; /** * @hidden * @internal */ get contained(): boolean; /** * @hidden * @internal */ get outlined(): boolean; /** * @hidden * @internal */ get fab(): boolean; /** * @hidden * @internal */ select(): void; /** * @hidden * @internal */ deselect(): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; static ngAcceptInputType_selected: unknown; } interface IButtonEventArgs extends IBaseEventArgs { button: IgxButtonDirective; } declare const IgxDividerType: { readonly SOLID: "solid"; readonly DASHED: "dashed"; }; type IgxDividerType = (typeof IgxDividerType)[keyof typeof IgxDividerType]; declare class IgxDividerDirective { /** * Sets/gets the `id` of the divider. * If not set, `id` will have value `"igx-divider-0"`; * ```html * * ``` * ```typescript * let dividerId = this.divider.id; * ``` */ id: string; /** * Sets the value of `role` attribute. * If not the default value of `separator` will be used. */ role: string; /** * Sets the type of the divider. The default value * is `default`. The divider can also be `dashed`; * ```html * * ``` */ type: IgxDividerType | string; get isDashed(): boolean; /** * If set to `true` and an `inset` value has been provided, * the divider will start shrinking from both ends. * ```html * * ``` */ middle: boolean; /** * Sets the divider in vertical orientation. * ```html * * ``` */ vertical: boolean; /** * Sets the inset of the divider from the side(s). * If the divider attribute `middle` is set to `true`, * it will inset the divider on both sides. * ```typescript * this.divider.inset = '32px'; * ``` */ set inset(value: string); /** * Gets the current divider inset in terms of * inset-inline-start representation as applied to the divider. * ```typescript * const inset = this.divider.inset; * ``` */ get inset(): string; /** * Sets the value of the `inset` attribute. * If not provided it will be set to `'0'`. * ```html * * ``` */ private _inset; /** * A getter that returns `true` if the type of the divider is `default`; * ```typescript * const isDefault = this.divider.isDefault; * ``` */ get isSolid(): boolean; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; static ngAcceptInputType_middle: unknown; static ngAcceptInputType_vertical: unknown; } interface IDropStrategy { dropAction: (drag: IgxDragDirective, drop: IgxDropDirective, atIndex: number) => void; } declare class IgxDefaultDropStrategy implements IDropStrategy { dropAction(_drag: IgxDragDirective, _drop: IgxDropDirective, _atIndex: number): void; } declare class IgxAppendDropStrategy implements IDropStrategy { private _renderer; constructor(_renderer: Renderer2); dropAction(drag: IgxDragDirective, drop: IgxDropDirective, _atIndex: number): void; } declare class IgxPrependDropStrategy implements IDropStrategy { private _renderer; constructor(_renderer: Renderer2); dropAction(drag: IgxDragDirective, drop: IgxDropDirective, _atIndex: number): void; } declare class IgxInsertDropStrategy implements IDropStrategy { private _renderer; constructor(_renderer: Renderer2); dropAction(drag: IgxDragDirective, drop: IgxDropDirective, atIndex: number): void; } declare enum DragScrollDirection { UP = 0, DOWN = 1, LEFT = 2, RIGHT = 3 } declare enum DragDirection { VERTICAL = 0, HORIZONTAL = 1, BOTH = 2 } interface IgxDragCustomEventDetails { startX: number; startY: number; pageX: number; pageY: number; owner: IgxDragDirective; originalEvent: any; } interface IDropBaseEventArgs extends IBaseEventArgs { /** * Reference to the original event that caused the draggable element to enter the igxDrop element. * Can be PointerEvent, TouchEvent or MouseEvent. */ originalEvent: any; /** The owner igxDrop directive that triggered this event. */ owner: IgxDropDirective; /** The igxDrag directive instanced on an element that entered the area of the igxDrop element */ drag: IgxDragDirective; /** The data contained for the draggable element in igxDrag directive. */ dragData: any; /** The initial position of the pointer on X axis when the dragged element began moving */ startX: number; /** The initial position of the pointer on Y axis when the dragged element began moving */ startY: number; /** * The current position of the pointer on X axis when the event was triggered. * Note: The browser might trigger the event with some delay and pointer would be already inside the igxDrop. */ pageX: number; /** * The current position of the pointer on Y axis when the event was triggered. * Note: The browser might trigger the event with some delay and pointer would be already inside the igxDrop. */ pageY: number; /** * The current position of the pointer on X axis relative to the container that initializes the igxDrop. * Note: The browser might trigger the event with some delay and pointer would be already inside the igxDrop. */ offsetX: number; /** * The current position of the pointer on Y axis relative to the container that initializes the igxDrop. * Note: The browser might trigger the event with some delay and pointer would be already inside the igxDrop. */ offsetY: number; } interface IDropDroppedEventArgs extends IDropBaseEventArgs { /** Specifies if the default drop logic related to the event should be canceled. */ cancel: boolean; } interface IDragBaseEventArgs extends IBaseEventArgs { /** * Reference to the original event that caused the interaction with the element. * Can be PointerEvent, TouchEvent or MouseEvent. */ originalEvent: PointerEvent | MouseEvent | TouchEvent; /** The owner igxDrag directive that triggered this event. */ owner: IgxDragDirective; /** The initial position of the pointer on X axis when the dragged element began moving */ startX: number; /** The initial position of the pointer on Y axis when the dragged element began moving */ startY: number; /** * The current position of the pointer on X axis when the event was triggered. * Note: The browser might trigger the event with some delay and pointer would be already inside the igxDrop. */ pageX: number; /** * The current position of the pointer on Y axis when the event was triggered. * Note: The browser might trigger the event with some delay and pointer would be already inside the igxDrop. */ pageY: number; } interface IDragStartEventArgs extends IDragBaseEventArgs { /** Set if the the dragging should be canceled. */ cancel: boolean; } interface IDragMoveEventArgs extends IDragStartEventArgs { /** The new pageX position of the pointer that the igxDrag will use. It can be overridden to limit dragged element X movement. */ nextPageX: number; /** The new pageX position of the pointer that the igxDrag will use. It can be overridden to limit dragged element Y movement. */ nextPageY: number; } interface IDragGhostBaseEventArgs extends IBaseEventArgs { /** The owner igxDrag directive that triggered this event. */ owner: IgxDragDirective; /** Instance to the ghost element that is created when dragging starts. */ ghostElement: any; /** Set if the ghost creation/destruction should be canceled. */ cancel: boolean; } interface IDragCustomTransitionArgs { duration?: number; timingFunction?: string; delay?: number; } declare class IgxDragLocation { private _pageX; private _pageY; pageX: number; pageY: number; constructor(_pageX: any, _pageY: any); } declare class IgxDragHandleDirective { element: ElementRef; baseClass: boolean; /** * @hidden */ parentDragElement: HTMLElement; constructor(element: ElementRef); static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } declare class IgxDragIgnoreDirective { element: ElementRef; baseClass: boolean; constructor(element: ElementRef); static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } declare class IgxDragDirective implements AfterContentInit, OnDestroy { cdr: ChangeDetectorRef; element: ElementRef; viewContainer: ViewContainerRef; zone: NgZone; renderer: Renderer2; protected platformUtil: PlatformUtil; /** * - Save data inside the `igxDrag` directive. This can be set when instancing `igxDrag` on an element. * ```html *
* ``` * * @memberof IgxDragDirective */ set data(value: any); get data(): any; /** * Sets the tolerance in pixels before drag starts. * By default the drag starts after the draggable element is moved by 5px. * ```html *
* Drag Me! *
* ``` * * @memberof IgxDragDirective */ dragTolerance: number; /** * Sets the directions that the element can be dragged. * By default it is set to both horizontal and vertical directions. * ```html *
* Drag Me! *
* ``` * ```typescript * public dragDir = DragDirection.HORIZONTAL; * ``` * * @memberof IgxDragDirective */ dragDirection: DragDirection; /** * A property that provides a way for igxDrag and igxDrop to be linked through channels. * It accepts single value or an array of values and evaluates then using strict equality. * ```html *
* 95 *
*
* Numbers drop area! *
* ``` * * @memberof IgxDragDirective */ dragChannel: number | string | number[] | string[]; /** * Sets whether the base element should be moved, or a ghost element should be rendered that represents it instead. * By default it is set to `true`. * If it is set to `false` when dragging the base element is moved instead and no ghost elements are rendered. * ```html *
* Drag Me! *
* ``` * * @memberof IgxDragDirective */ ghost: boolean; /** * Sets a custom class that will be added to the `ghostElement` element. * ```html *
* Drag Me! *
* ``` * * @memberof IgxDragDirective */ ghostClass: string; /** * Set styles that will be added to the `ghostElement` element. * ```html *
* Drag Me! *
* ``` * * @memberof IgxDragDirective */ ghostStyle: {}; /** * Specifies a template for the ghost element created when dragging starts and `ghost` is true. * By default a clone of the base element the igxDrag is instanced is created. * ```html *
* Drag Me! *
* *
* I am being dragged! *
*
* ``` * * @memberof IgxDragDirective */ ghostTemplate: TemplateRef; /** * Sets the element to which the dragged element will be appended. * By default it's set to null and the dragged element is appended to the body. * ```html *
*
* Drag Me! *
* ``` * * @memberof IgxDragDirective */ ghostHost: any; /** * Overrides the scroll container of the dragged element. By default its the window. */ scrollContainer: HTMLElement; /** * Event triggered when the draggable element drag starts. * ```html *
* Drag Me! *
* ``` * ```typescript * public onDragStart(){ * alert("The drag has stared!"); * } * ``` * * @memberof IgxDragDirective */ dragStart: EventEmitter; /** * Event triggered when the draggable element has been moved. * ```html *
* Drag Me! *
* ``` * ```typescript * public onDragMove(){ * alert("The element has moved!"); * } * ``` * * @memberof IgxDragDirective */ dragMove: EventEmitter; /** * Event triggered when the draggable element is released. * ```html *
* Drag Me! *
* ``` * ```typescript * public onDragEnd(){ * alert("The drag has ended!"); * } * ``` * * @memberof IgxDragDirective */ dragEnd: EventEmitter; /** * Event triggered when the draggable element is clicked. * ```html *
* Drag Me! *
* ``` * ```typescript * public onDragClick(){ * alert("The element has been clicked!"); * } * ``` * * @memberof IgxDragDirective */ dragClick: EventEmitter; /** * Event triggered when the drag ghost element is created. * ```html *
* Drag Me! *
* ``` * ```typescript * public ghostCreated(){ * alert("The ghost has been created!"); * } * ``` * * @memberof IgxDragDirective */ ghostCreate: EventEmitter; /** * Event triggered when the drag ghost element is created. * ```html *
* Drag Me! *
* ``` * ```typescript * public ghostDestroyed(){ * alert("The ghost has been destroyed!"); * } * ``` * * @memberof IgxDragDirective */ ghostDestroy: EventEmitter; /** * Event triggered after the draggable element is released and after its animation has finished. * ```html *
* Drag Me! *
* ``` * ```typescript * public onMoveEnd(){ * alert("The move has ended!"); * } * ``` * * @memberof IgxDragDirective */ transitioned: EventEmitter; /** * @hidden */ dragHandles: QueryList; /** * @hidden */ dragIgnoredElems: QueryList; /** * @hidden */ baseClass: boolean; /** * @hidden */ selectDisabled: boolean; /** * Gets the current location of the element relative to the page. */ get location(): IgxDragLocation; /** * Gets the original location of the element before dragging started. */ get originLocation(): IgxDragLocation; /** * @hidden */ get pointerEventsEnabled(): boolean; /** * @hidden */ get touchEventsEnabled(): boolean; /** * @hidden */ get pageX(): number; /** * @hidden */ get pageY(): number; protected get baseLeft(): number; protected get baseTop(): number; protected get baseOriginLeft(): number; protected get baseOriginTop(): number; protected set ghostLeft(pageX: number); protected get ghostLeft(): number; protected set ghostTop(pageY: number); protected get ghostTop(): number; protected get windowScrollTop(): number; protected get windowScrollLeft(): number; protected get windowScrollHeight(): number; protected get windowScrollWidth(): number; /** * @hidden */ defaultReturnDuration: string; /** * @hidden */ ghostElement: any; /** * @hidden */ animInProgress: boolean; protected ghostContext: any; protected _startX: number; protected _startY: number; protected _lastX: number; protected _lastY: number; protected _dragStarted: boolean; /** Drag ghost related properties */ protected _defaultOffsetX: any; protected _defaultOffsetY: any; protected _offsetX: any; protected _offsetY: any; protected _ghostStartX: any; protected _ghostStartY: any; protected _ghostHostX: number; protected _ghostHostY: number; protected _dynamicGhostRef: EmbeddedViewRef; protected _pointerDownId: any; protected _clicked: boolean; protected _lastDropArea: any; protected _destroy: Subject; protected _removeOnDestroy: boolean; protected _data: any; protected _scrollContainer: any; protected _originalScrollContainerWidth: number; protected _originalScrollContainerHeight: number; protected _scrollContainerStep: number; protected _scrollContainerStepMs: number; protected _scrollContainerThreshold: number; protected _containerScrollIntervalId: any; private document; /** * Sets the offset of the dragged element relative to the mouse in pixels. * By default it's taking the relative position to the mouse when the drag started and keeps it the same. * ```html *
*
* Drag Me! *
* ``` * * @memberof IgxDragDirective */ set ghostOffsetX(value: any); get ghostOffsetX(): any; /** * Sets the offset of the dragged element relative to the mouse in pixels. * By default it's taking the relative position to the mouse when the drag started and keeps it the same. * ```html *
*
* Drag Me! *
* ``` * * @memberof IgxDragDirective */ set ghostOffsetY(value: any); get ghostOffsetY(): any; constructor(cdr: ChangeDetectorRef, element: ElementRef, viewContainer: ViewContainerRef, zone: NgZone, renderer: Renderer2, platformUtil: PlatformUtil); /** * @hidden */ ngAfterContentInit(): void; /** * @hidden */ ngOnDestroy(): void; /** * Sets desired location of the base element or ghost element if rended relative to the document. * * @param newLocation New location that should be applied. It is advised to get new location using getBoundingClientRects() + scroll. */ setLocation(newLocation: IgxDragLocation): void; /** * Animates the base or ghost element depending on the `ghost` input to its initial location. * If `ghost` is true but there is not ghost rendered, it will be created and animated. * If the base element has changed its DOM position its initial location will be changed accordingly. * * @param customAnimArgs Custom transition properties that will be applied when performing the transition. * @param startLocation Start location from where the transition should start. */ transitionToOrigin(customAnimArgs?: IDragCustomTransitionArgs, startLocation?: IgxDragLocation): void; /** * Animates the base or ghost element to a specific target location or other element using transition. * If `ghost` is true but there is not ghost rendered, it will be created and animated. * It is recommended to use 'getBoundingClientRects() + pageScroll' when determining desired location. * * @param target Target that the base or ghost will transition to. It can be either location in the page or another HTML element. * @param customAnimArgs Custom transition properties that will be applied when performing the transition. * @param startLocation Start location from where the transition should start. */ transitionTo(target: IgxDragLocation | ElementRef, customAnimArgs?: IDragCustomTransitionArgs, startLocation?: IgxDragLocation): void; /** * @hidden * Method bound to the PointerDown event of the base element igxDrag is initialized. * @param event PointerDown event captured */ onPointerDown(event: any): void; /** * @hidden * Perform drag move logic when dragging and dispatching events if there is igxDrop under the pointer. * This method is bound at first at the base element. * If dragging starts and after the ghostElement is rendered the pointerId is reassigned it. Then this method is bound to it. * @param event PointerMove event captured */ onPointerMove(event: any): void; /** * @hidden * Perform drag end logic when releasing the ghostElement and dispatching drop event if igxDrop is under the pointer. * This method is bound at first at the base element. * If dragging starts and after the ghostElement is rendered the pointerId is reassigned to it. Then this method is bound to it. * @param event PointerUp event captured */ onPointerUp(event: any): void; /** * @hidden * Execute this method whe the pointer capture has been lost. * This means that during dragging the user has performed other action like right clicking and then clicking somewhere else. * This method will ensure that the drag state is being reset in this case as if the user released the dragged element. * @param event Event captured */ onPointerLost(event: any): void; /** * @hidden */ onTransitionEnd(event: any): void; protected detachGhost(): void; protected clearGhost(): void; /** * @hidden * Create ghost element - if a Node object is provided it creates a clone of that node, * otherwise it clones the host element. * Bind all needed events. * @param pageX Latest pointer position on the X axis relative to the page. * @param pageY Latest pointer position on the Y axis relative to the page. * @param node The Node object to be cloned. */ protected createGhost(pageX: any, pageY: any, node?: any): void; /** * @hidden * Dispatch custom igxDragEnter/igxDragLeave events based on current pointer position and if drop area is under. */ protected dispatchDragEvents(pageX: number, pageY: number, originalEvent: any): void; /** * @hidden * Traverse shadow dom in depth. */ protected getFromShadowRoot(elem: any, pageX: any, pageY: any, parentDomElems: any): any[]; /** * @hidden * Dispatch custom igxDrop event based on current pointer position if there is last recorder drop area under the pointer. * Last recorder drop area is updated in @dispatchDragEvents method. */ protected dispatchDropEvent(pageX: number, pageY: number, originalEvent: any): void; /** * @hidden */ protected getElementsAtPoint(pageX: number, pageY: number): any; /** * @hidden */ protected dispatchEvent(target: any, eventName: string, eventArgs: IgxDragCustomEventDetails): void; protected getTransformX(elem: any): number; protected getTransformY(elem: any): number; /** Method setting transformation to the base draggable element. */ protected setTransformXY(x: number, y: number): void; /** * Since we are using absolute position to move the ghost, the ghost host might not have position: relative. * Combined with position static, this means that the absolute position in the browser is relative to the offsetParent. * The offsetParent is pretty much the closes parent that has position: relative, or if no such until it reaches the body. * That's why if this is the case, we need to know how much we should compensate for the ghostHost being offset from * its offsetParent. * * OffsetParent can be null in the case of position: fixed applied to the ghost host or display: none. In that case * just get the clientRects of the ghost host. */ protected getGhostHostBaseOffsetX(): any; protected getGhostHostBaseOffsetY(): any; protected getContainerScrollDirection(): DragScrollDirection; protected onScrollContainerStep(scrollDir: DragScrollDirection): void; protected onScrollContainer(): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; static ngAcceptInputType_ghost: unknown; } declare class IgxDropDirective implements OnInit, OnDestroy { element: ElementRef; private _renderer; private _zone; /** * - Save data inside the `igxDrop` directive. This can be set when instancing `igxDrop` on an element. * ```html *
* ``` * * @memberof IgxDropDirective */ set data(v: any); get data(): any; /** * A property that provides a way for igxDrag and igxDrop to be linked through channels. * It accepts single value or an array of values and evaluates then using strict equality. * ```html *
* 95 *
*
* Numbers drop area! *
* ``` * * @memberof IgxDropDirective */ dropChannel: number | string | number[] | string[]; /** * Sets a drop strategy type that will be executed when an `IgxDrag` element is released inside * the current drop area. The provided strategies are: * - IgxDefaultDropStrategy - This is the default base strategy and it doesn't perform any actions. * - IgxAppendDropStrategy - Appends the dropped element to last position as a direct child to the `igxDrop`. * - IgxPrependDropStrategy - Prepends the dropped element to first position as a direct child to the `igxDrop`. * - IgxInsertDropStrategy - If the dropped element is released above a child element of the `igxDrop`, it will be inserted * at that position. Otherwise the dropped element will be appended if released outside any child of the `igxDrop`. * ```html *
* DragMe *
*
* Numbers drop area! *
* ``` * ```typescript * import { IgxAppendDropStrategy } from 'igniteui-angular'; * * export class App { * public myDropStrategy = IgxAppendDropStrategy; * } * ``` * * @memberof IgxDropDirective */ set dropStrategy(classRef: any); get dropStrategy(): any; /** * Event triggered when dragged element enters the area of the element. * ```html *
*
* ``` * ```typescript * public dragEnter(){ * alert("A draggable element has entered the chip area!"); * } * ``` * * @memberof IgxDropDirective */ enter: EventEmitter; /** * Event triggered when dragged element enters the area of the element. * ```html *
*
* ``` * ```typescript * public dragEnter(){ * alert("A draggable element has entered the chip area!"); * } * ``` * * @memberof IgxDropDirective */ over: EventEmitter; /** * Event triggered when dragged element leaves the area of the element. * ```html *
*
* ``` * ```typescript * public dragLeave(){ * alert("A draggable element has left the chip area!"); * } * ``` * * @memberof IgxDropDirective */ leave: EventEmitter; /** * Event triggered when dragged element is dropped in the area of the element. * Since the `igxDrop` has default logic that appends the dropped element as a child, it can be canceled here. * To cancel the default logic the `cancel` property of the event needs to be set to true. * ```html *
*
* ``` * ```typescript * public dragDrop(){ * alert("A draggable element has been dropped in the chip area!"); * } * ``` * * @memberof IgxDropDirective */ dropped: EventEmitter; /** * @hidden */ droppable: boolean; /** * @hidden */ dragover: boolean; /** * @hidden */ protected _destroy: Subject; protected _dropStrategy: IDropStrategy; private _data; constructor(element: ElementRef, _renderer: Renderer2, _zone: NgZone); /** * @hidden */ onDragDrop(event: any): void; /** * @hidden */ ngOnInit(): void; /** * @hidden */ ngOnDestroy(): void; /** * @hidden */ onDragOver(event: any): void; /** * @hidden */ onDragEnter(event: CustomEvent): void; /** * @hidden */ onDragLeave(event: any): void; protected getWindowScrollTop(): number; protected getWindowScrollLeft(): number; protected isDragLinked(drag: IgxDragDirective): boolean; protected getInsertIndexAt(draggedDir: IgxDragDirective, elementsAtPoint: any[]): number; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } declare const IGX_DRAG_DROP_DIRECTIVES: readonly [typeof IgxDragDirective, typeof IgxDropDirective, typeof IgxDragHandleDirective, typeof IgxDragIgnoreDirective]; declare class IgxFilterOptions { inputValue: string; key: string | string[]; items: any[]; get_value(item: any, key: string): string; formatter(valueToTest: string): string; matchFn(valueToTest: string, inputValue: string): boolean; metConditionFn(item: any): void; overdueConditionFn(item: any): void; } declare class IgxFilterDirective implements OnChanges { filtering: EventEmitter; filtered: EventEmitter; filterOptions: IgxFilterOptions; constructor(); ngOnChanges(changes: SimpleChanges): void; private filter; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } declare class IgxFilterPipe implements PipeTransform { private findMatchByKey; transform(items: any[], options: IgxFilterOptions): any[]; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵpipe: i0.ɵɵPipeDeclaration; } declare class IgxFocusDirective { private element; private comp?; private control?; private focusState; /** * Returns the state of the igxFocus. * ```typescript * @ViewChild('focusContainer', {read: IgxFocusDirective}) * public igxFocus: IgxFocusDirective; * let isFocusOn = this.igxFocus.focused; * ``` * * @memberof IgxFocusDirective */ get focused(): boolean; /** * Sets the state of the igxFocus. * ```html * * * * ``` * * @memberof IgxFocusDirective */ set focused(val: boolean); /** * Gets the native element of the igxFocus. * ```typescript * @ViewChild('focusContainer', {read: IgxFocusDirective}) * public igxFocus: IgxFocusDirective; * let igxFocusNativeElement = this.igxFocus.nativeElement; * ``` * * @memberof IgxFocusDirective */ get nativeElement(): any; constructor(element: ElementRef, comp?: any[], control?: any[]); /** * Triggers the igxFocus state. * ```typescript * @ViewChild('focusContainer', {read: IgxFocusDirective}) * public igxFocus: IgxFocusDirective; * this.igxFocus.trigger(); * ``` * * @memberof IgxFocusDirective */ trigger(): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; static ngAcceptInputType_focused: unknown; } declare class IgxFocusTrapDirective implements AfterViewInit, OnDestroy { private elementRef; protected platformUtil: PlatformUtil; /** @hidden */ get element(): HTMLElement | null; private destroy$; private _focusTrap; /** @hidden */ constructor(elementRef: ElementRef, platformUtil: PlatformUtil); /** * Sets whether the Tab key focus is trapped within the element. * * @example * ```html *
* ``` */ set focusTrap(focusTrap: boolean); /** @hidden */ get focusTrap(): boolean; /** @hidden */ ngAfterViewInit(): void; /** @hidden */ ngOnDestroy(): void; private handleTab; private getFocusableElements; private getFocusedElement; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; static ngAcceptInputType_focusTrap: unknown; } /** * Determines the Icon Button type. */ type IgxIconButtonType = typeof IgxBaseButtonType[keyof typeof IgxBaseButtonType]; /** * The IgxIconButtonDirective provides a way to use an icon as a fully functional button. * * @example * ```html * * ``` */ declare class IgxIconButtonDirective extends IgxButtonBaseDirective { private static ngAcceptInputType_type; /** * @hidden * @internal */ private _cssClass; /** * @hidden * @internal */ private _type; /** * Sets the type of the icon button. * * @example * ```html * * ``` */ set type(type: IgxIconButtonType); /** * @hidden * @internal */ get flat(): boolean; /** * @hidden * @internal */ get contained(): boolean; /** * @hidden * @internal */ get outlined(): boolean; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } declare class IgxLayoutDirective { /** * Sets the default flow direction of the container's children. * * Defaults to `rows`. * * ```html *
*
1
*
2
*
3
*
* ``` */ dir: string; /** * Defines the direction flex children are placed in the flex container. * * When set to `true`, the `rows` direction goes right to left and `columns` goes bottom to top. * * ```html *
*
1
*
2
*
3
*
* ``` */ reverse: boolean; /** * By default the immediate children will all try to fit onto one line. * * The default value `nowrap` sets this behavior. * * Other accepted values are `wrap` and `wrap-reverse`. * * ```html *
*
1
*
2
*
3
*
* ``` */ wrap: string; /** * Defines the alignment along the main axis. * * Defaults to `flex-start` which packs the children toward the start line. * * Other possible values are `flex-end`, `center`, `space-between`, `space-around`. * * ```html *
*
1
*
2
*
3
*
* ``` */ justify: string; /** * Defines the default behavior for how children are laid out along the corss axis of the current line. * * Defaults to `flex-start`. * * Other possible values are `flex-end`, `center`, `baseline`, and `stretch`. * * ```html *
*
1
*
2
*
3
*
* ``` */ itemAlign: string; /** * @hidden */ display: string; /** * @hidden */ get flexwrap(): string; /** * @hidden */ get justifycontent(): string; /** * @hidden */ get align(): string; /** * @hidden */ get direction(): "row" | "row-reverse" | "column-reverse" | "column"; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; static ngAcceptInputType_reverse: unknown; } declare class IgxFlexDirective { /** * Applies the `grow` attribute to an element that uses the directive. * * Default value is `1`. * * ```html *
*
Content1
*
Content2
*
Content3
*
* ``` */ grow: number; /** * Applies the `shrink` attribute to an element that uses the directive. * * Default value is `1`. * * ```html *
*
Content1
*
Content2
*
Content3
*
* ``` */ shrink: number; /** * Applies the directive to an element. * * Possible values include `igxFlexGrow`, `igxFlexShrink`, `igxFlexOrder`, `igxFlexBasis`. * * ```html *
Content
* ``` */ flex: string; /** * Applies the `order` attribute to an element that uses the directive. * * Default value is `0`. * * ```html *
*
Content1
*
Content2
*
Content3
*
* ``` */ order: number; /** * Applies the `flex-basis` attribute to an element that uses the directive. * * Default value is `auto`. * * Other possible values include `content`, `max-content`, `min-content`, `fit-content`. * * ```html *
Content
* ``` */ basis: string; /** * @hidden */ get style(): string; /** * @hidden */ get itemorder(): number; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** @hidden */ interface MaskOptions { format: string; promptChar: string; } /** @hidden */ interface Replaced { value: string; end: number; } /** @hidden */ declare class MaskParsingService { applyMask(inputVal: string, maskOptions: MaskOptions, pos?: number): string; parseValueFromMask(maskedValue: string, maskOptions: MaskOptions): string; replaceInMask(maskedValue: string, value: string, maskOptions: MaskOptions, start: number, end: number): Replaced; /** Validates only non literal positions. */ private validateCharOnPosition; private getNonLiteralIndices; private getNonLiteralValues; private replaceIMENumbers; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵprov: i0.ɵɵInjectableDeclaration; } declare class IgxMaskDirective implements OnInit, AfterViewChecked, ControlValueAccessor { protected elementRef: ElementRef; protected maskParser: MaskParsingService; protected renderer: Renderer2; protected platform: PlatformUtil; /** * Sets the input mask. * ```html * * ``` */ get mask(): string; set mask(val: string); /** * Sets the character representing a fillable spot in the input mask. * Default value is "'_'". * ```html * * ``` */ promptChar: string; /** * Specifies if the bound value includes the formatting symbols. * ```html * * ``` */ includeLiterals: boolean; /** * Specifies a pipe to be used on blur. * ```html * * ``` */ displayValuePipe: PipeTransform; /** * Specifies a pipe to be used on focus. * ```html * * ``` */ focusedValuePipe: PipeTransform; /** * Emits an event each time the value changes. * Provides `rawValue: string` and `formattedValue: string` as event arguments. * ```html * * ``` */ valueChanged: EventEmitter; /** @hidden */ get nativeElement(): HTMLInputElement; /** @hidden @internal; */ protected get inputValue(): string; /** @hidden @internal */ protected set inputValue(val: string); /** @hidden */ protected get maskOptions(): MaskOptions; /** @hidden */ protected get selectionStart(): number; /** @hidden */ protected get selectionEnd(): number; /** @hidden */ protected get start(): number; /** @hidden */ protected get end(): number; protected _composing: boolean; protected _compositionStartIndex: number; protected _focused: boolean; private _compositionValue; private _end; private _start; private _key; private _mask; private _oldText; private _dataValue; private _droppedData; private _hasDropAction; private readonly defaultMask; protected _onTouchedCallback: () => void; protected _onChangeCallback: (_: any) => void; constructor(elementRef: ElementRef, maskParser: MaskParsingService, renderer: Renderer2, platform: PlatformUtil); /** @hidden */ onKeyDown(event: KeyboardEvent): void; /** @hidden @internal */ onCompositionStart(): void; /** @hidden @internal */ onCompositionEnd(): void; /** @hidden @internal */ onInputChanged(event: any): void; /** @hidden */ onPaste(): void; /** @hidden */ onFocus(): void; /** @hidden */ onBlur(value: string): void; /** @hidden */ onDragEnter(): void; /** @hidden */ onDragLeave(): void; /** @hidden */ onDrop(event: DragEvent): void; /** @hidden */ ngOnInit(): void; /** * TODO: Remove after date/time picker integration refactor * * @hidden */ ngAfterViewChecked(): void; /** @hidden */ writeValue(value: string): void; /** @hidden */ registerOnChange(fn: (_: any) => void): void; /** @hidden */ registerOnTouched(fn: () => void): void; /** @hidden */ protected showMask(value: string): void; /** @hidden */ protected setSelectionRange(start: number, end?: number): void; /** @hidden */ protected afterInput(): void; /** @hidden */ protected setPlaceholder(value: string): void; private updateInputValue; private updateInput; private showDisplayValue; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; static ngAcceptInputType_includeLiterals: unknown; } /** * The IgxMaskModule provides the {@link IgxMaskDirective} inside your application. */ interface IMaskEventArgs extends IBaseEventArgs { rawValue: string; formattedValue: string; } /** * Used for editor control components * * @hidden */ interface EditorProvider { /** Return the focusable native element */ getEditElement(): HTMLElement; } declare const LabelPosition: { readonly BEFORE: "before"; readonly AFTER: "after"; }; type LabelPosition = typeof LabelPosition[keyof typeof LabelPosition]; interface IChangeCheckboxEventArgs extends IBaseEventArgs { checked: boolean; value?: any; } declare class CheckboxBaseDirective implements AfterViewInit { protected cdr: ChangeDetectorRef; protected themeToken: ThemeToken; ngControl: NgControl; /** * An event that is emitted after the checkbox state is changed. * Provides references to the `IgxCheckboxComponent` and the `checked` property as event arguments. */ readonly change: EventEmitter; /** * @hidden * @internal */ destroy$: Subject; /** * Returns reference to the native checkbox element. * * @example * ```typescript * let checkboxElement = this.component.checkboxElement; * ``` */ nativeInput: ElementRef; /** * Returns reference to the native label element. * ```typescript * * @example * let labelElement = this.component.nativeLabel; * ``` */ nativeLabel: ElementRef; cssClass: string; disabled: boolean; readonly: boolean; indeterminate: boolean; focused: boolean; invalid: boolean; get checked(): boolean; set checked(value: boolean); /** * Returns reference to the `nativeElement` of the igx-checkbox/igx-switch. * * @example * ```typescript * let nativeElement = this.component.nativeElement; * ``` */ get nativeElement(): any; /** * Returns reference to the label placeholder element. * ```typescript * * @example * let labelPlaceholder = this.component.placeholderLabel; * ``` */ placeholderLabel: ElementRef; /** * Sets/gets the `id` of the checkbox component. * If not set, the `id` of the first checkbox component will be `"igx-checkbox-0"`. * * @example * ```html * * ``` * ```typescript * let checkboxId = this.checkbox.id; * ``` */ id: string; /** * Sets/gets the id of the `label` element. * If not set, the id of the `label` in the first checkbox component will be `"igx-checkbox-0-label"`. * * @example * ```html * * ``` * ```typescript * let labelId = this.component.labelId; * ``` */ labelId: string; /** * Sets/gets the `value` attribute. * * @example * ```html * * ``` * ```typescript * let value = this.checkbox.value; * ``` */ value: any; /** * Sets/gets the `name` attribute. * * @example * ```html * * ``` * ```typescript * let name = this.checkbox.name; * ``` */ name: string; /** * Sets/gets the value of the `tabindex` attribute. * * @example * ```html * * ``` * ```typescript * let tabIndex = this.checkbox.tabindex; * ``` */ tabindex: number; /** * Sets/gets the position of the `label`. * If not set, the `labelPosition` will have value `"after"`. * * @example * ```html * * ``` * ```typescript * let labelPosition = this.checkbox.labelPosition; * ``` */ labelPosition: LabelPosition | string; /** * Enables/Disables the ripple effect. * If not set, `disableRipple` will have value `false`. * * @example * ```html * * ``` * ```typescript * let isRippleDisabled = this.checkbox.desableRipple; * ``` */ disableRipple: boolean; /** * Sets/gets the `aria-labelledby` attribute. * If not set, the `aria-labelledby` will be equal to the value of `labelId` attribute. * * @example * ```html * * ``` * ```typescript * let ariaLabelledBy = this.checkbox.ariaLabelledBy; * ``` */ ariaLabelledBy: string; /** * Sets/gets the value of the `aria-label` attribute. * * @example * ```html * * ``` * ```typescript * let ariaLabel = this.checkbox.ariaLabel; * ``` */ ariaLabel: string | null; constructor(cdr: ChangeDetectorRef, themeToken: ThemeToken, ngControl: NgControl); /** * Sets/gets whether the checkbox is required. * If not set, `required` will have value `false`. * * @example * ```html * * ``` * ```typescript * let isRequired = this.checkbox.required; * ``` */ get required(): boolean; set required(value: boolean); /** * @hidden * @internal */ ngAfterViewInit(): void; /** * @hidden * @internal */ inputId: string; /** * @hidden */ protected _onChangeCallback: (_: any) => void; /** * @hidden */ private _onTouchedCallback; /** * @hidden * @internal */ protected _checked: boolean; /** * @hidden * @internal */ protected theme: IgxTheme; /** * @hidden * @internal */ _required: boolean; private elRef; protected destroyRef: DestroyRef; private setComponentTheme; /** @hidden @internal */ onKeyUp(event: KeyboardEvent): void; /** @hidden @internal */ _onCheckboxClick(event: PointerEvent | MouseEvent): void; /** * @hidden * @internal */ get ariaChecked(): boolean | "mixed"; /** @hidden @internal */ _onCheckboxChange(event: Event): void; /** @hidden @internal */ onBlur(): void; /** @hidden @internal */ writeValue(value: boolean): void; /** @hidden @internal */ get labelClass(): string; /** @hidden @internal */ registerOnChange(fn: (_: any) => void): void; /** @hidden @internal */ registerOnTouched(fn: () => void): void; /** @hidden @internal */ setDisabledState(isDisabled: boolean): void; /** @hidden @internal */ getEditElement(): any; /** * @hidden * @internal */ protected updateValidityState(): void; /** * A function to assign a native validity property of a checkbox. * This should be used when there's no ngControl * * @hidden * @internal */ private checkNativeValidity; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; static ngAcceptInputType_checked: unknown; static ngAcceptInputType_disableRipple: unknown; static ngAcceptInputType_required: unknown; } /** * **Ignite UI for Angular Radio Button** - * [Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/radio_button.html) * * The Ignite UI Radio Button allows the user to select a single option from an available set of options that are listed side by side. * * Example: * ```html * * Simple radio button * * ``` */ declare class IgxRadioComponent extends CheckboxBaseDirective implements AfterViewInit, ControlValueAccessor, EditorProvider { /** @hidden @internal */ blurRadio: EventEmitter; /** * Returns the class of the radio component. * ```typescript * let radioClass = this.radio.cssClass; * ``` * * @memberof IgxRadioComponent */ cssClass: string; /** * Sets/gets the `checked` attribute. * Default value is `false`. * ```html * * ``` * ```typescript * let isChecked = this.radio.checked; * ``` * * @memberof IgxRadioComponent */ set checked(value: boolean); get checked(): boolean; /** * Sets/gets the `disabled` attribute. * Default value is `false`. * ```html * * ``` * ```typescript * let isDisabled = this.radio.disabled; * ``` * * @memberof IgxRadioComponent */ disabled: boolean; /** * Sets/gets whether the radio button is invalid. * Default value is `false`. * ```html * * ``` * ```typescript * let isInvalid = this.radio.invalid; * ``` * * @memberof IgxRadioComponent */ invalid: boolean; /** * Sets/gets whether the radio component is on focus. * Default value is `false`. * ```typescript * this.radio.focus = true; * ``` * ```typescript * let isFocused = this.radio.focused; * ``` * * @memberof IgxRadioComponent */ focused: boolean; /** * @hidden * @internal */ _changed(event: Event): void; /** * @hidden */ _onCheckboxClick(): void; /** * Selects the current radio button. * ```typescript * this.radio.select(); * ``` * * @memberof IgxRadioComponent */ select(): void; /** * Deselects the current radio button. * ```typescript * this.radio.deselect(); * ``` * * @memberof IgxRadioComponent */ deselect(): void; /** * Checks whether the provided value is consistent to the current radio button. * If it is, the checked attribute will have value `true`; * ```typescript * this.radio.writeValue('radioButtonValue'); * ``` */ writeValue(value: any): void; /** * @hidden */ onBlur(): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; static ngAcceptInputType_checked: unknown; static ngAcceptInputType_disabled: unknown; static ngAcceptInputType_invalid: unknown; } /** * @hidden */ type Direction$2 = 'ltr' | 'rtl'; /** * @hidden * * Bidirectional service that extracts the value of the direction attribute on the body or html elements. * * The dir attribute over the body element takes precedence. */ declare class IgxDirectionality { private _dir; private _document; get value(): Direction$2; get document(): Document; get rtl(): boolean; constructor(document: any); static ɵfac: i0.ɵɵFactoryDeclaration; static ɵprov: i0.ɵɵInjectableDeclaration; } /** * Allows users to make a binary choice for a certain condition. * * @igxModule IgxCheckboxModule * * @igxTheme igx-checkbox-theme * * @igxKeywords checkbox, label * * @igxGroup Data entry and display * * @remarks * The Ignite UI Checkbox is a selection control that allows users to make a binary choice for a certain condition.It behaves similarly * to the native browser checkbox. * * @example * ```html * * simple checkbox * * ``` */ declare class IgxCheckboxComponent extends CheckboxBaseDirective implements AfterViewInit, ControlValueAccessor, EditorProvider { /** * Returns the class of the checkbox component. * * @example * ```typescript * let class = this.checkbox.cssClass; * ``` */ cssClass: string; /** * Returns if the component is of type `material`. * * @example * ```typescript * let checkbox = this.checkbox.material; * ``` */ protected get material(): boolean; /** * Returns if the component is of type `indigo`. * * @example * ```typescript * let checkbox = this.checkbox.indigo; * ``` */ protected get indigo(): boolean; /** * Returns if the component is of type `bootstrap`. * * @example * ```typescript * let checkbox = this.checkbox.bootstrap; * ``` */ protected get bootstrap(): boolean; /** * Returns if the component is of type `fluent`. * * @example * ```typescript * let checkbox = this.checkbox.fluent; * ``` */ protected get fluent(): boolean; /** * Sets/gets whether the checkbox component is on focus. * Default value is `false`. * * @example * ```typescript * this.checkbox.focused = true; * ``` * ```typescript * let isFocused = this.checkbox.focused; * ``` */ focused: boolean; /** * Sets/gets the checkbox indeterminate visual state. * Default value is `false`; * * @example * ```html * * ``` * ```typescript * let isIndeterminate = this.checkbox.indeterminate; * ``` */ indeterminate: boolean; /** * Sets/gets whether the checkbox is checked. * Default value is `false`. * * @example * ```html * * ``` * ```typescript * let isChecked = this.checkbox.checked; * ``` */ set checked(value: boolean); get checked(): boolean; /** * Sets/gets whether the checkbox is disabled. * Default value is `false`. * * @example * ```html * * ``` * ```typescript * let isDisabled = this.checkbox.disabled; * ``` */ disabled: boolean; /** * Sets/gets whether the checkbox is invalid. * Default value is `false`. * * @example * ```html * * ``` * ```typescript * let isInvalid = this.checkbox.invalid; * ``` */ invalid: boolean; /** * Sets/gets whether the checkbox is readonly. * Default value is `false`. * * @example * ```html * * ``` * ```typescript * let readonly = this.checkbox.readonly; * ``` */ readonly: boolean; /** * Sets/gets whether the checkbox should disable all css transitions. * Default value is `false`. * * @example * ```html * * ``` * ```typescript * let disableTransitions = this.checkbox.disableTransitions; * ``` */ disableTransitions: boolean; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; static ngAcceptInputType_indeterminate: unknown; static ngAcceptInputType_checked: unknown; static ngAcceptInputType_disabled: unknown; static ngAcceptInputType_invalid: unknown; static ngAcceptInputType_readonly: unknown; static ngAcceptInputType_disableTransitions: unknown; } /** * Determines the Radio Group alignment */ declare const RadioGroupAlignment: { readonly horizontal: "horizontal"; readonly vertical: "vertical"; }; type RadioGroupAlignment = typeof RadioGroupAlignment[keyof typeof RadioGroupAlignment]; /** * Radio group directive renders set of radio buttons. * * @igxModule IgxRadioModule * * @igxTheme igx-radio-theme * * @igxKeywords radiogroup, radio, button, input * * @igxGroup Data Entry & Display * * @remarks * The Ignite UI Radio Group allows the user to select a single option from an available set of options that are listed side by side. * * @example: * ```html * * * {{item}} * * * ``` */ declare class IgxRadioGroupDirective implements ControlValueAccessor, OnDestroy, DoCheck { ngControl: NgControl; private _directionality; private cdr; private _radioButtons; private _radioButtonsList; /** * Returns reference to the child radio buttons. * * @example * ```typescript * let radioButtons = this.radioGroup.radioButtons; * ``` */ get radioButtons(): QueryList; /** * Sets/gets the `value` attribute. * * @example * ```html * * ``` */ get value(): any; set value(newValue: any); /** * Sets/gets the `name` attribute of the radio group component. All child radio buttons inherits this name. * * @example * ```html * * ``` */ get name(): string; set name(newValue: string); /** * Sets/gets whether the radio group is required. * * @remarks * If not set, `required` will have value `false`. * * @example * ```html * * ``` */ get required(): boolean; set required(value: boolean); /** * Sets/gets the selected child radio button. * * @example * ```typescript * let selectedButton = this.radioGroup.selected; * this.radioGroup.selected = selectedButton; * ``` */ get selected(): IgxRadioComponent | null; set selected(selected: IgxRadioComponent | null); /** * Sets/gets whether the radio group is invalid. * * @remarks * If not set, `invalid` will have value `false`. * * @example * ```html * * ``` */ get invalid(): boolean; set invalid(value: boolean); /** * An event that is emitted after the radio group `value` is changed. * * @remarks * Provides references to the selected `IgxRadioComponent` and the `value` property as event arguments. * * @example * ```html * * ``` */ readonly change: EventEmitter; /** * The css class applied to the component. * * @hidden * @internal */ cssClass: string; /** * Sets vertical alignment to the radio group, if `alignment` is set to `vertical`. * By default the alignment is horizontal. * * @example * ```html * * ``` */ private vertical; /** * A css class applied to the component if any of the * child radio buttons labelPosition is set to `before`. * * @hidden * @internal */ protected get labelBefore(): boolean; /** * A css class applied to the component if all * child radio buttons are disabled. * * @hidden * @internal */ protected get disabled(): boolean; protected handleClick(event: MouseEvent): void; protected handleKeyDown(event: KeyboardEvent): void; /** * Returns the alignment of the `igx-radio-group`. * ```typescript * @ViewChild("MyRadioGroup") * public radioGroup: IgxRadioGroupDirective; * ngAfterViewInit(){ * let radioAlignment = this.radioGroup.alignment; * } * ``` */ get alignment(): RadioGroupAlignment; /** * Allows you to set the radio group alignment. * Available options are `RadioGroupAlignment.horizontal` (default) and `RadioGroupAlignment.vertical`. * ```typescript * public alignment = RadioGroupAlignment.vertical; * //.. * ``` * ```html * * ``` */ set alignment(value: RadioGroupAlignment); /** * @hidden * @internal */ private _onChangeCallback; /** * @hidden * @internal */ private _name; /** * @hidden * @internal */ private _value; /** * @hidden * @internal */ private _selected; /** * @hidden * @internal */ private _isInitialized; /** * @hidden * @internal */ private _required; /** * @hidden * @internal */ private _invalid; /** * @hidden * @internal */ private destroy$; /** * @hidden * @internal */ private queryChange$; /** * @hidden * @internal */ private updateValidityOnBlur; /** * @hidden * @internal */ private updateOnKeyUp; ngDoCheck(): void; private _updateTabIndex; /** * Sets the "checked" property value on the radio input element. * * @remarks * Checks whether the provided value is consistent to the current radio button. * If it is, the checked attribute will have value `true` and selected property will contain the selected `IgxRadioComponent`. * * @example * ```typescript * this.radioGroup.writeValue('radioButtonValue'); * ``` */ writeValue(value: any): void; /** * Registers a function called when the control value changes. * * @hidden * @internal */ registerOnChange(fn: (_: any) => void): void; /** * Registers a function called when the control is touched. * * @hidden * @internal */ registerOnTouched(fn: () => void): void; /** * @hidden * @internal */ ngOnDestroy(): void; constructor(ngControl: NgControl, _directionality: IgxDirectionality, cdr: ChangeDetectorRef); /** * @hidden * @internal */ private initialize; /** * @hidden * @internal */ private setRadioButtons; /** * @hidden * @internal */ private _setRadioButtonEvents; /** * @hidden * @internal */ private _selectedRadioButtonChanged; /** * @hidden * @internal */ private _setRadioButtonNames; /** * @hidden * @internal */ private _selectRadioButton; /** * @hidden * @internal */ private _setRadioButtonsRequired; /** * @hidden * @internal */ private _setRadioButtonsInvalid; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; static ngAcceptInputType_required: unknown; static ngAcceptInputType_invalid: unknown; } declare const IGX_RADIO_GROUP_DIRECTIVES: readonly [typeof IgxRadioGroupDirective, typeof IgxRadioComponent]; declare class IgxRippleDirective { protected builder: AnimationBuilder; protected elementRef: ElementRef; protected renderer: Renderer2; private zone; /** * Sets/gets the ripple target. * ```html *
* ``` * ```typescript * @ViewChild('rippleContainer', {read: IgxRippleDirective}) * public ripple: IgxRippleDirective; * let rippleTarget = this.ripple.rippleTarget; * ``` * Can set the ripple to activate on a child element inside the parent where igxRipple is defined. * ```html *
* *
* ``` * * @memberof IgxRippleDirective */ rippleTarget: string; /** * Sets/gets the ripple color. * ```html * * ``` * ```typescript * @ViewChild('rippleContainer', {read: IgxRippleDirective}) * public ripple: IgxRippleDirective; * let rippleColor = this.ripple.rippleColor; * ``` * * @memberof IgxRippleDirective */ rippleColor: string; /** * Sets/gets the ripple duration(in milliseconds). * Default value is `600`. * ```html * * ``` * ```typescript * @ViewChild('rippleContainer', {read: IgxRippleDirective}) * public ripple: IgxRippleDirective; * let rippleDuration = this.ripple.rippleDuration; * ``` * * @memberof IgxRippleDirective */ rippleDuration: number; /** * Enables/disables the ripple to be centered. * ```html * * ``` * * @memberof IgxRippleDirective */ set centered(value: boolean); /** * Sets/gets whether the ripple is disabled. * Default value is `false`. * ```html * * ``` * ```typescript * @ViewChild('rippleContainer', {read: IgxRippleDirective}) * public ripple: IgxRippleDirective; * let isRippleDisabled = this.ripple.rippleDisabled; * ``` * * @memberof IgxRippleDirective */ rippleDisabled: boolean; protected get nativeElement(): HTMLElement; private rippleElementClass; private rippleHostClass; private _centered; private animationQueue; constructor(builder: AnimationBuilder, elementRef: ElementRef, renderer: Renderer2, zone: NgZone); /** * @hidden */ onMouseDown(event: any): void; private setStyles; private _ripple; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; static ngAcceptInputType_centered: unknown; static ngAcceptInputType_rippleDisabled: unknown; } declare class IgSizeDirective { private _size; get igSize(): string; set igSize(value: 'small' | 'medium' | 'large'); static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } declare class IgxTextSelectionDirective { private element; /** * Determines whether the input element could be selected through the directive. * * ```html * * * * * * * ``` */ selected: boolean; /** * Returns the nativeElement of the element where the directive was applied. * * ```html * * * ``` * * ```typescript * @ViewChild('firstName', * {read: IgxTextSelectionDirective}) * public inputElement: IgxTextSelectionDirective; * * public getNativeElement() { * return this.inputElement.nativeElement; * } * ``` */ get nativeElement(): any; constructor(element: ElementRef); /** * @hidden */ onFocus(): void; /** * Triggers the selection of the element if it is marked as selectable. * * ```html * * * ``` * * ```typescript * @ViewChild('firstName', * {read: IgxTextSelectionDirective}) * public inputElement: IgxTextSelectionDirective; * * public triggerElementSelection() { * this.inputElement.trigger(); * } * ``` */ trigger(): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; static ngAcceptInputType_selected: unknown; } /** * @hidden */ declare class IgxTemplateOutletDirective implements OnChanges { _viewContainerRef: ViewContainerRef; private _zone; cdr: ChangeDetectorRef; igxTemplateOutletContext: any; igxTemplateOutlet: TemplateRef; viewCreated: EventEmitter; viewMoved: EventEmitter; cachedViewLoaded: EventEmitter; beforeViewDetach: EventEmitter; private _viewRef; /** * The embedded views cache. Collection is key-value paired. * Key is the template type, value is another key-value paired collection * where the key is the template id and value is the embedded view for the related template. */ private _embeddedViewsMap; constructor(_viewContainerRef: ViewContainerRef, _zone: NgZone, cdr: ChangeDetectorRef); ngOnChanges(changes: SimpleChanges): void; cleanCache(): void; cleanView(tmplID: any): void; private _recreateView; private _moveView; private _useCachedView; private _shouldRecreateView; private _hasContextShapeChanged; private _updateExistingContext; private _cloneContext; private _getActionType; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } interface IViewChangeEventArgs extends IBaseEventArgs { owner: IgxTemplateOutletDirective; view: EmbeddedViewRef; context: any; } interface ICachedViewLoadedEventArgs extends IViewChangeEventArgs { oldContext: any; } /** * **Ignite UI for Angular Tooltip** - * [Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/tooltip) * * The Ignite UI for Angular Tooltip directive is used to mark an HTML element in the markup as one that should behave as a tooltip. * The tooltip is used in combination with the Ignite UI for Angular Tooltip Target by assigning the exported tooltip reference to the * respective target's selector property. * * Example: * ```html * * Hello there, I am a tooltip! * ``` */ declare class IgxTooltipDirective extends IgxToggleDirective implements OnDestroy { /** * @hidden */ get hiddenClass(): boolean; /** * @hidden */ get defaultClass(): boolean; /** * Gets/sets any tooltip related data. * The 'context' can be used for storing any information that is necessary * to access when working with the tooltip. * * ```typescript * // get * let tooltipContext = this.tooltip.context; * ``` * * ```typescript * // set * this.tooltip.context = "Tooltip's context"; * ``` */ context: any; /** * Identifier for the tooltip. * If this is property is not explicitly set, it will be automatically generated. * * ```typescript * let tooltipId = this.tooltip.id; * ``` */ id: string; /** * Get the role attribute of the tooltip. * * ```typescript * let tooltipRole = this.tooltip.role; * ``` */ get role(): string; /** * @hidden */ timeoutId: any; /** * @hidden * Returns whether close time out has started */ toBeHidden: boolean; /** * @hidden * Returns whether open time out has started */ toBeShown: boolean; /** * @hidden */ tooltipTarget: IgxTooltipTargetDirective; private _destroy$; /** @hidden */ constructor(elementRef: ElementRef, cdr: ChangeDetectorRef, overlayService: IgxOverlayService, navigationService: IgxNavigationService); /** @hidden */ ngOnDestroy(): void; /** * If there is open animation in progress this method will finish is. * If there is no open animation in progress this method will open the toggle with no animation. * * @param overlaySettings setting to use for opening the toggle */ protected forceOpen(overlaySettings?: OverlaySettings): void; /** * If there is close animation in progress this method will finish is. * If there is no close animation in progress this method will close the toggle with no animation. * * @param overlaySettings settings to use for closing the toggle */ protected forceClose(overlaySettings?: OverlaySettings): void; private onDocumentTouchStart; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } interface ITooltipShowEventArgs extends IBaseEventArgs { target: IgxTooltipTargetDirective; tooltip: IgxTooltipDirective; cancel: boolean; } interface ITooltipHideEventArgs extends IBaseEventArgs { target: IgxTooltipTargetDirective; tooltip: IgxTooltipDirective; cancel: boolean; } /** * **Ignite UI for Angular Tooltip Target** - * [Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/tooltip) * * The Ignite UI for Angular Tooltip Target directive is used to mark an HTML element in the markup as one that has a tooltip. * The tooltip target is used in combination with the Ignite UI for Angular Tooltip by assigning the exported tooltip reference to the * target's selector property. * * Example: * ```html * * Hello there, I am a tooltip! * ``` */ declare class IgxTooltipTargetDirective extends IgxToggleActionDirective implements OnInit, OnDestroy { private _element; private _navigationService; private _viewContainerRef; /** * Gets/sets the amount of milliseconds that should pass before showing the tooltip. * * ```typescript * // get * let tooltipShowDelay = this.tooltipTarget.showDelay; * ``` * * ```html * * * Hello there, I am a tooltip! * ``` */ showDelay: number; /** * Gets/sets the amount of milliseconds that should pass before hiding the tooltip. * * ```typescript * // get * let tooltipHideDelay = this.tooltipTarget.hideDelay; * ``` * * ```html * * * Hello there, I am a tooltip! * ``` */ hideDelay: number; /** * Specifies if the tooltip should not show when hovering its target with the mouse. (defaults to false) * While setting this property to 'true' will disable the user interactions that shows/hides the tooltip, * the developer will still be able to show/hide the tooltip through the API. * * ```typescript * // get * let tooltipDisabledValue = this.tooltipTarget.tooltipDisabled; * ``` * * ```html * * * Hello there, I am a tooltip! * ``` */ tooltipDisabled: boolean; /** * @hidden */ set target(target: any); /** * @hidden */ get target(): any; /** * @hidden */ set tooltip(content: any); /** * Gets the respective native element of the directive. * * ```typescript * let tooltipTargetElement = this.tooltipTarget.nativeElement; * ``` */ get nativeElement(): any; /** * Indicates if the tooltip that is is associated with this target is currently hidden. * * ```typescript * let tooltipHiddenValue = this.tooltipTarget.tooltipHidden; * ``` */ get tooltipHidden(): boolean; /** * Emits an event when the tooltip that is associated with this target starts showing. * This event is fired before the start of the countdown to showing the tooltip. * * ```typescript * tooltipShowing(args: ITooltipShowEventArgs) { * alert("Tooltip started showing!"); * } * ``` * * ```html * * Hello there, I am a tooltip! * ``` */ tooltipShow: EventEmitter; /** * Emits an event when the tooltip that is associated with this target starts hiding. * This event is fired before the start of the countdown to hiding the tooltip. * * ```typescript * tooltipHiding(args: ITooltipHideEventArgs) { * alert("Tooltip started hiding!"); * } * ``` * * ```html * * Hello there, I am a tooltip! * ``` */ tooltipHide: EventEmitter; private destroy$; constructor(_element: ElementRef, _navigationService: IgxNavigationService, _viewContainerRef: ViewContainerRef); /** * @hidden */ onClick(): void; /** * @hidden */ onMouseEnter(): void; /** * @hidden */ onMouseLeave(): void; /** * @hidden */ onTouchStart(): void; /** * @hidden */ onDocumentTouchStart(event: any): void; /** * @hidden */ ngOnInit(): void; /** * @hidden */ ngOnDestroy(): void; /** * Shows the tooltip by respecting the 'showDelay' property. * * ```typescript * this.tooltipTarget.showTooltip(); * ``` */ showTooltip(): void; /** * Hides the tooltip by respecting the 'hideDelay' property. * * ```typescript * this.tooltipTarget.hideTooltip(); * ``` */ hideTooltip(): void; private checkOutletAndOutsideClick; private get mergedOverlaySettings(); private preMouseEnterCheck; private preMouseLeaveCheck; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; static ngAcceptInputType_tooltipDisabled: unknown; } declare const IGX_TOOLTIP_DIRECTIVES: readonly [typeof IgxTooltipDirective, typeof IgxTooltipTargetDirective]; interface IgxDateTimeEditorEventArgs { readonly oldValue?: Date; newValue?: Date; readonly userInput: string; } /** * Specify a particular date, time or AmPm part. */ declare enum DatePart { Date = "date", Month = "month", Year = "year", Hours = "hours", Minutes = "minutes", Seconds = "seconds", FractionalSeconds = "fractionalSeconds", AmPm = "ampm", Literal = "literal" } /** Delta values used for spin actions. */ interface DatePartDeltas { date?: number; month?: number; year?: number; hours?: number; minutes?: number; seconds?: number; fractionalSeconds?: number; } /** * Date Time Editor provides a functionality to input, edit and format date and time. * * @igxModule IgxDateTimeEditorModule * * @igxParent IgxInputGroup * * @igxTheme igx-input-theme * * @igxKeywords date, time, editor * * @igxGroup Scheduling * * @remarks * * The Ignite UI Date Time Editor Directive makes it easy for developers to manipulate date/time user input. * It requires input in a specified or default input format which is visible in the input element as a placeholder. * It allows the input of only date (ex: 'dd/MM/yyyy'), only time (ex:'HH:mm tt') or both at once, if needed. * Supports display format that may differ from the input format. * Provides methods to increment and decrement any specific/targeted `DatePart`. * * @example * ```html * * * * ``` */ declare class IgxDateTimeEditorDirective extends IgxMaskDirective implements OnChanges, OnInit, Validator, ControlValueAccessor { private _document; private _locale; /** * Locale settings used for value formatting. * * @remarks * Uses Angular's `LOCALE_ID` by default. Affects both input mask and display format if those are not set. * If a `locale` is set, it must be registered via `registerLocaleData`. * Please refer to https://angular.io/guide/i18n#i18n-pipes. * If it is not registered, `Intl` will be used for formatting. * * @example * ```html * * ``` */ locale: string; /** * Minimum value required for the editor to remain valid. * * @remarks * If a `string` value is passed, it must be in the defined input format. * * @example * ```html * * ``` */ get minValue(): string | Date; set minValue(value: string | Date); /** * Maximum value required for the editor to remain valid. * * @remarks * If a `string` value is passed in, it must be in the defined input format. * * @example * ```html * * ``` */ get maxValue(): string | Date; set maxValue(value: string | Date); /** * Specify if the currently spun date segment should loop over. * * @example * ```html * * ``` */ spinLoop: boolean; /** * Set both pre-defined format options such as `shortDate` and `longDate`, * as well as constructed format string using characters supported by `DatePipe`, e.g. `EE/MM/yyyy`. * * @example * ```html * * ``` */ set displayFormat(value: string); get displayFormat(): string; /** * Expected user input format (and placeholder). * * @example * ```html * * ``` */ set inputFormat(value: string); get inputFormat(): string; /** * Editor value. * * @example * ```html * * ``` */ set value(value: Date | string | undefined | null); get value(): Date | string | undefined | null; /** * Specify the default input format type. Defaults to `date`, which includes * only date parts for editing. Other valid options are `time` and `dateTime`. * * @example * ```html * * ``` */ defaultFormatType: 'date' | 'time' | 'dateTime'; /** * Delta values used to increment or decrement each editor date part on spin actions. * All values default to `1`. * * @example * ```html * * ``` */ spinDelta: DatePartDeltas; /** * Emitted when the editor's value has changed. * * @example * ```html * * ``` */ valueChange: EventEmitter; /** * Emitted when the editor is not within a specified range or when the editor's value is in an invalid state. * * @example * ```html * * ``` */ validationFailed: EventEmitter; private _inputFormat; private _displayFormat; private _oldValue; private _dateValue; private _onClear; private document; private _defaultInputFormat; private _value?; private _minValue; private _maxValue; private _inputDateParts; private _datePartDeltas; private onChangeCallback; private _onValidatorChange; private get datePartDeltas(); private get emptyMask(); private get targetDatePart(); private get hasDateParts(); private get hasTimeParts(); private get dateValue(); constructor(renderer: Renderer2, elementRef: ElementRef, maskParser: MaskParsingService, platform: PlatformUtil, _document: any, _locale: any); onWheel(event: WheelEvent): void; ngOnInit(): void; /** @hidden @internal */ ngOnChanges(changes: SimpleChanges): void; /** Clear the input element value. */ clear(): void; /** * Increment specified DatePart. * * @param datePart The optional DatePart to increment. Defaults to Date or Hours (when Date is absent from the inputFormat - ex:'HH:mm'). * @param delta The optional delta to increment by. Overrides `spinDelta`. */ increment(datePart?: DatePart, delta?: number): void; /** * Decrement specified DatePart. * * @param datePart The optional DatePart to decrement. Defaults to Date or Hours (when Date is absent from the inputFormat - ex:'HH:mm'). * @param delta The optional delta to decrement by. Overrides `spinDelta`. */ decrement(datePart?: DatePart, delta?: number): void; /** @hidden @internal */ writeValue(value: any): void; /** @hidden @internal */ validate(control: AbstractControl): ValidationErrors | null; /** @hidden @internal */ registerOnValidatorChange?(fn: () => void): void; /** @hidden @internal */ registerOnChange(fn: any): void; /** @hidden @internal */ registerOnTouched(fn: any): void; /** @hidden @internal */ setDisabledState?(_isDisabled: boolean): void; /** @hidden @internal */ onCompositionEnd(): void; /** @hidden @internal */ onInputChanged(event: any): void; /** @hidden @internal */ onKeyDown(event: KeyboardEvent): void; /** @hidden @internal */ onFocus(): void; /** @hidden @internal */ onBlur(value: string): void; /** @hidden */ protected setPlaceholder(_value: string): void; private updateDefaultFormat; private updateMask; private setMask; private parseDate; private getMaskedValue; private valueInRange; private spinValue; private trySpinValue; private setDateValue; private updateValue; private toTwelveHourFormat; private getPartValue; private prependValue; private spin; private inputIsComplete; private moveCursor; /** * Move the cursor in a specific direction until it reaches a date/time separator. * Then return its index. * * @param value The string it operates on. * @param direction 0 is left, 1 is right. Default is 0. */ private getNewPosition; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; static ngAcceptInputType_spinLoop: unknown; } declare class IgcFormControlDirective implements ControlValueAccessor { private elementRef; private renderer; /** @hidden @internal */ private onChange; /** @hidden @internal */ private onTouched; constructor(elementRef: ElementRef, renderer: Renderer2); /** @hidden @internal */ onBlur(): void; /** @hidden @internal */ listenForValueChange(value: any): void; /** @hidden @internal */ writeValue(value: any): void; /** @hidden @internal */ registerOnChange(fn: any): void; /** @hidden @internal */ registerOnTouched(fn: any): void; /** @hidden @internal */ setDisabledState(isDisabled: boolean): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } declare class ExpressionsTreeUtil { /** * Returns the filtering expression for a column with the provided tree and fieldName. * ```typescript * let filteringExpression = ExpressionsTreeUtil.find(gridExpressionTree, 'Column Field'); * ``` */ static find(tree: IFilteringExpressionsTree, fieldName: string): IFilteringExpressionsTree | IFilteringExpression; /** * Returns the index of the filtering expression for a column with the provided tree and fieldName. * ```typescript * let filteringExpressionIndex = ExpressionsTreeUtil.findIndex(gridExpressionTree, 'Column Field'); * ``` */ static findIndex(tree: IFilteringExpressionsTree, fieldName: string): number; protected static isFilteringExpressionsTreeForColumn(expressionsTree: IFilteringExpressionsTree, fieldName: string): boolean; } interface IgxExpansionPanelBase { id: string; cssClass: string; /** @hidden @internal */ headerId: string; collapsed: boolean; animationSettings: { openAnimation: AnimationReferenceMetadata; closeAnimation: AnimationReferenceMetadata; }; contentCollapsed: EventEmitter; contentCollapsing: EventEmitter; contentExpanded: EventEmitter; contentExpanding: EventEmitter; collapse(evt?: Event): any; expand(evt?: Event): any; toggle(evt?: Event): any; } interface IExpansionPanelEventArgs extends IBaseEventArgs { event: Event; } interface IExpansionPanelCancelableEventArgs extends IExpansionPanelEventArgs, CancelableEventArgs { } declare abstract class HeaderContentBaseDirective { protected element: ElementRef; constructor(element: ElementRef); /** * Returns the `textContent` of an element * * ```html * * Tooltip content * * ``` * * or the `title` content * * ```html * * * ``` * * If both are provided, returns the `title` content. * * @param element * @returns tooltip content for an element */ getTooltipContent: (element: ElementRef) => string; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } declare class IgxExpansionPanelBodyComponent { panel: IgxExpansionPanelBase; element: ElementRef; cdr: ChangeDetectorRef; /** * @hidden */ cssClass: string; /** * Gets/sets the `role` attribute of the panel body * Default is 'region'; * Get * ```typescript * const currentRole = this.panel.body.role; * ``` * Set * ```typescript * this.panel.body.role = 'content'; * ``` * ```html * * ``` */ role: string; private _labelledBy; private _label; constructor(panel: IgxExpansionPanelBase, element: ElementRef, cdr: ChangeDetectorRef); /** * Gets the `aria-label` attribute of the panel body * Defaults to the panel id with '-region' in the end; * Get * ```typescript * const currentLabel = this.panel.body.label; * ``` */ get label(): string; /** * Sets the `aria-label` attribute of the panel body * ```typescript * this.panel.body.label = 'my-custom-label'; * ``` * ```html * * ``` */ set label(val: string); /** * Gets the `aria-labelledby` attribute of the panel body * Defaults to the panel header id; * Get * ```typescript * const currentLabel = this.panel.body.labelledBy; * ``` */ get labelledBy(): string; /** * Sets the `aria-labelledby` attribute of the panel body * ```typescript * this.panel.body.labelledBy = 'my-custom-id'; * ``` * ```html * * ``` */ set labelledBy(val: string); static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @hidden */ declare const ExpansionPanelHeaderIconPosition: { readonly LEFT: "left"; readonly NONE: "none"; readonly RIGHT: "right"; }; type ExpansionPanelHeaderIconPosition = (typeof ExpansionPanelHeaderIconPosition)[keyof typeof ExpansionPanelHeaderIconPosition]; declare class IgxExpansionPanelHeaderComponent { panel: IgxExpansionPanelBase; cdr: ChangeDetectorRef; elementRef: ElementRef; /** * Returns a reference to the `igx-expansion-panel-icon` element; * If `iconPosition` is `NONE` - return null; */ get iconRef(): ElementRef; /** * @hidden */ set iconTemplate(val: boolean); /** * @hidden */ get iconTemplate(): boolean; /** * Gets/sets the `aria-level` attribute of the header * Get * ```typescript * const currentAriaLevel = this.panel.header.lv; * ``` * Set * ```typescript * this.panel.header.lv = '5'; * ``` * ```html * * ``` */ lv: string; /** * Gets/sets the `role` attribute of the header * Get * ```typescript * const currentRole = this.panel.header.role; * ``` * Set * ```typescript * this.panel.header.role = '5'; * ``` * ```html * * ``` */ role: string; /** * @hidden */ get controls(): string; /** * @hidden @internal */ get innerElement(): any; /** * Gets/sets the position of the expansion-panel-header expand/collapse icon * Accepts `left`, `right` or `none` * ```typescript * const currentIconPosition = this.panel.header.iconPosition; * ``` * Set * ```typescript * this.panel.header.iconPosition = 'left'; * ``` * ```html * * ``` */ iconPosition: ExpansionPanelHeaderIconPosition; /** * Emitted whenever a user interacts with the header host * ```typescript * handleInteraction(event: IExpansionPanelCancelableEventArgs) { * ... * } * ``` * ```html * * ... * * ``` */ interaction: EventEmitter; /** * @hidden */ cssClass: string; /** * @hidden */ get isExpanded(): boolean; /** * Gets/sets the whether the header is disabled * When disabled, the header will not handle user events and will stop their propagation * * ```typescript * const isDisabled = this.panel.header.disabled; * ``` * Set * ```typescript * this.panel.header.disabled = true; * ``` * ```html * * ... * * ``` */ get disabled(): boolean; set disabled(val: boolean); /** @hidden @internal */ private customIconRef; /** @hidden @internal */ private defaultIconRef; /** * Sets/gets the `id` of the expansion panel header. * ```typescript * let panelHeaderId = this.panel.header.id; * ``` * * @memberof IgxExpansionPanelComponent */ id: string; /** @hidden @internal */ tabIndex: number; private _iconTemplate; private _disabled; constructor(panel: IgxExpansionPanelBase, cdr: ChangeDetectorRef, elementRef: ElementRef); /** * @hidden */ onAction(evt?: Event): void; /** @hidden @internal */ openPanel(event: KeyboardEvent): void; /** @hidden @internal */ closePanel(event: KeyboardEvent): void; /** * @hidden */ get iconPositionClass(): string; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; static ngAcceptInputType_disabled: unknown; } /**@hidden @internal */ interface ToggleAnimationSettings { openAnimation: AnimationReferenceMetadata; closeAnimation: AnimationReferenceMetadata; } interface ToggleAnimationOwner { animationSettings: ToggleAnimationSettings; openAnimationStart: EventEmitter; openAnimationDone: EventEmitter; closeAnimationStart: EventEmitter; closeAnimationDone: EventEmitter; openAnimationPlayer: AnimationPlayer; closeAnimationPlayer: AnimationPlayer; playOpenAnimation(element: ElementRef, onDone: () => void): void; playCloseAnimation(element: ElementRef, onDone: () => void): void; } /**@hidden @internal */ declare abstract class ToggleAnimationPlayer implements ToggleAnimationOwner, OnDestroy { protected animationService: AnimationService; /** @hidden @internal */ openAnimationDone: EventEmitter; /** @hidden @internal */ closeAnimationDone: EventEmitter; /** @hidden @internal */ openAnimationStart: EventEmitter; /** @hidden @internal */ closeAnimationStart: EventEmitter; get animationSettings(): ToggleAnimationSettings; set animationSettings(value: ToggleAnimationSettings); /** @hidden @internal */ openAnimationPlayer: AnimationPlayer; /** @hidden @internal */ closeAnimationPlayer: AnimationPlayer; protected destroy$: Subject; protected players: Map; protected _animationSettings: ToggleAnimationSettings; private closeInterrupted; private openInterrupted; private _defaultClosedCallback; private _defaultOpenedCallback; private onClosedCallback; private onOpenedCallback; constructor(animationService: AnimationService); /** @hidden @internal */ playOpenAnimation(targetElement: ElementRef, onDone?: () => void): void; /** @hidden @internal */ playCloseAnimation(targetElement: ElementRef, onDone?: () => void): void; /** @hidden @internal */ ngOnDestroy(): void; private startPlayer; private initializePlayer; private onDoneHandler; private setCallback; private cleanUpPlayer; private getPlayer; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } declare class IgxExpansionPanelComponent extends ToggleAnimationPlayer implements IgxExpansionPanelBase, AfterContentInit { private cdr; private elementRef?; /** * Sets/gets the animation settings of the expansion panel component * Open and Close animation should be passed * * Get * ```typescript * const currentAnimations = this.panel.animationSettings; * ``` * Set * ```typescript * import { slideInLeft, slideOutRight } from 'igniteui-angular'; * ... * this.panel.animationsSettings = { * openAnimation: slideInLeft, * closeAnimation: slideOutRight * }; * ``` * or via template * ```typescript * import { slideInLeft, slideOutRight } from 'igniteui-angular'; * ... * myCustomAnimationObject = { * openAnimation: slideInLeft, * closeAnimation: slideOutRight * }; * ```html * * ... * * ``` */ get animationSettings(): ToggleAnimationSettings; set animationSettings(value: ToggleAnimationSettings); /** * Sets/gets the `id` of the expansion panel component. * If not set, `id` will have value `"igx-expansion-panel-0"`; * ```html * * ``` * ```typescript * let panelId = this.panel.id; * ``` * * @memberof IgxExpansionPanelComponent */ id: string; /** * @hidden */ cssClass: string; /** * @hidden */ private opened; /** * @hidden @internal */ get panelExpanded(): boolean; /** * Gets/sets whether the component is collapsed (its content is hidden) * Get * ```typescript * const myPanelState: boolean = this.panel.collapsed; * ``` * Set * ```html * this.panel.collapsed = true; * ``` * * Two-way data binding: * ```html * * ``` */ collapsed: boolean; /** * @hidden */ collapsedChange: EventEmitter; /** * Emitted when the expansion panel starts collapsing * ```typescript * handleCollapsing(event: IExpansionPanelCancelableEventArgs) * ``` * ```html * * ... * * ``` */ contentCollapsing: EventEmitter; /** * Emitted when the expansion panel finishes collapsing * ```typescript * handleCollapsed(event: IExpansionPanelEventArgs) * ``` * ```html * * ... * * ``` */ contentCollapsed: EventEmitter; /** * Emitted when the expansion panel starts expanding * ```typescript * handleExpanding(event: IExpansionPanelCancelableEventArgs) * ``` * ```html * * ... * * ``` */ contentExpanding: EventEmitter; /** * Emitted when the expansion panel finishes expanding * ```typescript * handleExpanded(event: IExpansionPanelEventArgs) * ``` * ```html * * ... * * ``` */ contentExpanded: EventEmitter; /** * @hidden */ get headerId(): string; /** * @hidden @internal */ get nativeElement(): any; /** * @hidden */ body: IgxExpansionPanelBodyComponent; /** * @hidden */ header: IgxExpansionPanelHeaderComponent; constructor(animationService: AnimationService, cdr: ChangeDetectorRef, elementRef?: ElementRef); /** @hidden */ ngAfterContentInit(): void; /** * Collapses the panel * * ```html * * ... * * * ``` */ collapse(evt?: Event): void; /** * Expands the panel * * ```html * * ... * * * ``` */ expand(evt?: Event): void; /** * Toggles the panel * * ```html * * ... * * * ``` */ toggle(evt?: Event): void; open(evt?: Event): void; close(evt?: Event): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; static ngAcceptInputType_collapsed: unknown; } interface IAccordionEventArgs extends IExpansionPanelEventArgs { owner: IgxAccordionComponent; /** Provides a reference to the `IgxExpansionPanelComponent` which was expanded/collapsed. */ panel: IgxExpansionPanelBase; } interface IAccordionCancelableEventArgs extends IExpansionPanelCancelableEventArgs { owner: IgxAccordionComponent; /** Provides a reference to the `IgxExpansionPanelComponent` which is currently expanding/collapsing. */ panel: IgxExpansionPanelBase; } /** * IgxAccordion is a container-based component that contains that can house multiple expansion panels. * * @igxModule IgxAccordionModule * * @igxKeywords accordion * * @igxGroup Layouts * * @remarks * The Ignite UI for Angular Accordion component enables the user to navigate among multiple collapsing panels * displayed in a single container. * The accordion offers keyboard navigation and API to control the underlying panels' expansion state. * * @example * ```html * * * ... * * * ``` */ declare class IgxAccordionComponent implements AfterContentInit, AfterViewInit, OnDestroy { private cdr; /** * Get/Set the `id` of the accordion component. * Default value is `"igx-accordion-0"`; * ```html * * ``` * ```typescript * const accordionId = this.accordion.id; * ``` */ id: string; /** @hidden @internal **/ cssClass: string; /** @hidden @internal **/ displayStyle: string; /** * Get/Set the animation settings that panels should use when expanding/collpasing. * * ```html * * ``` * * ```typescript * const customAnimationSettings: ToggleAnimationSettings = { * openAnimation: growVerIn, * closeAnimation: growVerOut * }; * * this.accordion.animationSettings = customAnimationSettings; * ``` */ get animationSettings(): ToggleAnimationSettings; set animationSettings(value: ToggleAnimationSettings); /** * Get/Set how the accordion handles the expansion of the projected expansion panels. * If set to `true`, only a single panel can be expanded at a time, collapsing all others * * ```html * * ... * * ``` * * ```typescript * this.accordion.singleBranchExpand = false; * ``` */ get singleBranchExpand(): boolean; set singleBranchExpand(val: boolean); /** * Emitted before a panel is expanded. * * @remarks * This event is cancelable. * * ```html * * * ``` * *```typescript * public handlePanelExpanding(event: IExpansionPanelCancelableEventArgs){ * const expandedPanel: IgxExpansionPanelComponent = event.panel; * if (expandedPanel.disabled) { * event.cancel = true; * } * } *``` */ panelExpanding: EventEmitter; /** * Emitted after a panel has been expanded. * * ```html * * * ``` * *```typescript * public handlePanelExpanded(event: IExpansionPanelCancelableEventArgs) { * const expandedPanel: IgxExpansionPanelComponent = event.panel; * console.log("Panel is expanded: ", expandedPanel.id); * } *``` */ panelExpanded: EventEmitter; /** * Emitted before a panel is collapsed. * * @remarks * This event is cancelable. * * ```html * * * ``` */ panelCollapsing: EventEmitter; /** * Emitted after a panel has been collapsed. * * ```html * * * ``` */ panelCollapsed: EventEmitter; /** * Get all panels. * * ```typescript * const panels: IgxExpansionPanelComponent[] = this.accordion.panels; * ``` */ get panels(): IgxExpansionPanelComponent[]; private _panels; private _animationSettings; private _expandedPanels; private _expandingPanels; private _destroy$; private _unsubChildren$; private _enabledPanels; private _singleBranchExpand; constructor(cdr: ChangeDetectorRef); /** @hidden @internal **/ ngAfterContentInit(): void; /** @hidden @internal **/ ngAfterViewInit(): void; /** @hidden @internal */ ngOnDestroy(): void; /** * Expands all collapsed expansion panels. * * ```typescript * accordion.expandAll(); * ``` */ expandAll(): void; /** * Collapses all expanded expansion panels. * * ```typescript * accordion.collapseAll(); * ``` */ collapseAll(): void; private collapseAllExceptLast; private handleKeydown; private handleNavigation; private handleUpDownArrow; private getNextPanel; private subToChanges; private updatePanelsAnimation; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; static ngAcceptInputType_singleBranchExpand: unknown; } /** @hidden @internal */ declare class IgxExpansionPanelTitleDirective extends HeaderContentBaseDirective { cssClass: string; private get title(); static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** @hidden @internal */ declare class IgxExpansionPanelDescriptionDirective extends HeaderContentBaseDirective { cssClass: string; private get title(); static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** @hidden @internal */ declare class IgxExpansionPanelIconDirective { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } declare const IGX_EXPANSION_PANEL_DIRECTIVES: readonly [typeof IgxExpansionPanelComponent, typeof IgxExpansionPanelHeaderComponent, typeof IgxExpansionPanelBodyComponent, typeof IgxExpansionPanelDescriptionDirective, typeof IgxExpansionPanelTitleDirective, typeof IgxExpansionPanelIconDirective]; declare const IGX_ACCORDION_DIRECTIVES: readonly [typeof IgxAccordionComponent, typeof IgxExpansionPanelComponent, typeof IgxExpansionPanelHeaderComponent, typeof IgxExpansionPanelBodyComponent, typeof IgxExpansionPanelDescriptionDirective, typeof IgxExpansionPanelTitleDirective, typeof IgxExpansionPanelIconDirective]; interface IActionStripResourceStrings { igx_action_strip_button_more_title?: string; } declare const ActionStripResourceStringsEN: IActionStripResourceStrings; declare class IgxGridActionButtonComponent { container: ElementRef; /** * Event emitted when action button is clicked. * * @example * ```html * * ``` */ actionClick: EventEmitter; /** * Reference to the current template. * * @hidden * @internal */ templateRef: TemplateRef; /** * Whether button action is rendered in menu and should container text label. */ asMenuItem: boolean; /** * Name of the icon to display in the button. */ iconName: string; /** * Additional Menu item container element classes. */ classNames: string; /** @hidden @internal */ get containerClass(): string; /** * The name of the icon set. Used in case the icon is from a different icon set. */ iconSet: string; /** * The text of the label. */ labelText: string; /** * @hidden * @internal */ handleClick(event: any): void; /** * @hidden @internal */ preventEvent(event: any): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; static ngAcceptInputType_asMenuItem: unknown; } declare class IgxGridSelectionService { private zone; protected platform: PlatformUtil; grid: GridType; dragMode: boolean; activeElement: ISelectionNode | null; keyboardState: ISelectionKeyboardState; pointerState: ISelectionPointerState; columnsState: IColumnSelectionState; selection: Map>; temp: Map>; rowSelection: Set; indeterminateRows: Set; columnSelection: Set; /** * @hidden @internal */ selectedRowsChange: Subject; /** * Toggled when a pointerdown event is triggered inside the grid body (cells). * When `false` the drag select behavior is disabled. */ private pointerEventInGridBody; private allRowsSelected; private _lastSelectedNode; private _ranges; private _selectionRange; /** * Returns the current selected ranges in the grid from both * keyboard and pointer interactions */ get ranges(): GridSelectionRange[]; get primaryButton(): boolean; set primaryButton(value: boolean); constructor(zone: NgZone, platform: PlatformUtil); /** * Resets the keyboard state */ initKeyboardState(): void; /** * Resets the pointer state */ initPointerState(): void; /** * Resets the columns state */ initColumnsState(): void; /** * Adds a single node. * Single clicks | Ctrl + single clicks on cells is the usual case. */ add(node: ISelectionNode, addToRange?: boolean): void; /** * Adds the active keyboard range selection (if any) to the `ranges` meta. */ addKeyboardRange(): void; remove(node: ISelectionNode): void; isInMap(node: ISelectionNode): boolean; selected(node: ISelectionNode): boolean; isActiveNode(node: ISelectionNode): boolean; isActiveLayout(current: IMultiRowLayoutNode, target: IMultiRowLayoutNode): boolean; addRangeMeta(node: ISelectionNode, state?: SelectionState): void; removeRangeMeta(node: ISelectionNode, state?: SelectionState): void; /** * Generates a new selection range from the given `node`. * If `state` is passed instead it will generate the range based on the passed `node` * and the start node of the `state`. */ generateRange(node: ISelectionNode, state?: SelectionState): GridSelectionRange; /** * */ keyboardStateOnKeydown(node: ISelectionNode, shift: boolean, shiftTab: boolean): void; keyboardStateOnFocus(node: ISelectionNode, emitter: EventEmitter, dom: any): void; pointerDown(node: ISelectionNode, shift: boolean, ctrl: boolean): void; pointerDownShiftKey(node: ISelectionNode): void; mergeMap(target: Map>, source: Map>): void; pointerEnter(node: ISelectionNode, event: PointerEvent): boolean; pointerUp(node: ISelectionNode, emitter: EventEmitter, firedOutsideGrid?: boolean): boolean; selectRange(node: ISelectionNode, state: SelectionState, collection?: Map>): void; dragSelect(node: ISelectionNode, state: SelectionState): void; clear(clearAcriveEl?: boolean): void; clearTextSelection(): void; restoreTextSelection(): void; getSelectedRowsData(): any[]; /** Returns array of the selected row id's. */ getSelectedRows(): Array; /** Returns array of the rows in indeterminate state. */ getIndeterminateRows(): Array; /** Clears row selection, if filtering is applied clears only selected rows from filtered data. */ clearRowSelection(event?: any): void; /** Select all rows, if filtering is applied select only from filtered data. */ selectAllRows(event?: any): void; /** Select the specified row and emit event. */ selectRowById(rowID: any, clearPrevSelection?: any, event?: any): void; selectPivotRowById(rowID: any, clearPrevSelection: boolean, event?: any): void; /** Deselect the specified row and emit event. */ deselectRow(rowID: any, event?: any): void; deselectPivotRowByID(rowID: any, event?: any): void; private emitRowSelectionEventPivotGrid; /** Select the specified rows and emit event. */ selectRows(keys: any[], clearPrevSelection?: boolean, event?: any): void; deselectRows(keys: any[], event?: any): void; /** Select specified rows. No event is emitted. */ selectRowsWithNoEvent(rowIDs: any[], clearPrevSelection?: any): void; /** Deselect specified rows. No event is emitted. */ deselectRowsWithNoEvent(rowIDs: any[]): void; isRowSelected(rowID: any): boolean; isPivotRowSelected(rowID: any): boolean; isRowInIndeterminateState(rowID: any): boolean; /** Select range from last selected row to the current specified row. */ selectMultipleRows(rowID: any, rowData: any, event?: any): void; areAllRowSelected(newSelection?: any): boolean; hasSomeRowSelected(): boolean; get filteredSelectedRowIds(): any[]; emitRowSelectionEvent(newSelection: any, added: any, removed: any, event?: any, currSelection?: any): boolean; getPivotRowsByIds(ids: any[]): any[]; getRowDataById(rowID: any): any; clearHeaderCBState(): void; getRowIDs(data: any): Array; getRecordKey(record: any): any; /** Clear rowSelection and update checkbox state */ clearAllSelectedRows(): void; /** Returns all data in the grid, with applied filtering and sorting and without deleted rows. */ get allData(): Array; /** Returns array of the selected columns fields. */ getSelectedColumns(): Array; isColumnSelected(field: string): boolean; /** Select the specified column and emit event. */ selectColumn(field: string, clearPrevSelection?: any, selectColumnsRange?: any, event?: any): void; /** Select specified columns. And emit event. */ selectColumns(fields: string[], clearPrevSelection?: any, selectColumnsRange?: any, event?: any): void; /** Select range from last clicked column to the current specified column. */ selectColumnsRange(field: string, event: any): void; /** Select specified columns. No event is emitted. */ selectColumnsWithNoEvent(fields: string[], clearPrevSelection?: any): void; /** Deselect the specified column and emit event. */ deselectColumn(field: string, event?: any): void; /** Deselect specified columns. No event is emitted. */ deselectColumnsWithNoEvent(fields: string[]): void; /** Deselect specified columns. And emit event. */ deselectColumns(fields: string[], event?: any): void; emitColumnSelectionEvent(newSelection: any, added: any, removed: any, event?: any): boolean; /** Clear columnSelection */ clearAllSelectedColumns(): void; protected areEqualCollections(first: any, second: any): boolean; /** * (╯°□°)╯︵ ┻━┻ * Chrome and Chromium don't care about the active * range after keyboard navigation, thus this. */ private _moveSelectionChrome; private isFilteringApplied; private isRowDeleted; private pointerOriginHandler; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵprov: i0.ɵɵInjectableDeclaration; } declare class IgxRowDirective implements DoCheck, AfterViewInit, OnDestroy { grid: GridType; selectionService: IgxGridSelectionService; element: ElementRef; cdr: ChangeDetectorRef; /** * @hidden */ addAnimationEnd: EventEmitter; /** * @hidden */ role: string; /** * The data passed to the row component. * * ```typescript * // get the row data for the first selected row * let selectedRowData = this.grid.selectedRows[0].data; * ``` */ get data(): any; set data(v: any); /** * The index of the row. * * ```typescript * // get the index of the second selected row * let selectedRowIndex = this.grid.selectedRows[1].index; * ``` */ index: number; /** * Sets whether this specific row has disabled functionality for editing and row selection. * Default value is `false`. * ```typescript * this.grid.selectedRows[0].pinned = true; * ``` */ disabled: boolean; /** * Sets whether the row is pinned. * Default value is `false`. * ```typescript * this.grid.selectedRows[0].pinned = true; * ``` */ set pinned(value: boolean); /** * Gets whether the row is pinned. * ```typescript * let isPinned = row.pinned; * ``` */ get pinned(): boolean; /** * Gets the expanded state of the row. * ```typescript * let isExpanded = row.expanded; * ``` */ get expanded(): boolean; /** * Expands/collapses the current row. * * ```typescript * this.grid.selectedRows[2].expanded = true; * ``` */ set expanded(val: boolean); get addRowUI(): any; get rowHeight(): number; /** * @hidden */ gridID: string; /** * @hidden */ _virtDirRow: QueryList>; get virtDirRow(): IgxGridForOfDirective; /** * @hidden */ checkboxElement: IgxCheckboxComponent; protected _cells: QueryList; /** * Gets the rendered cells in the row component. * * ```typescript * // get the cells of the third selected row * let selectedRowCells = this.grid.selectedRows[2].cells; * ``` */ get cells(): QueryList; get dataRowIndex(): number; /** * @hidden */ get selected(): boolean; set selected(value: boolean); /** * @hidden */ get columns(): ColumnType[]; /** * @hidden * @internal */ get viewIndex(): number; /** * @hidden */ get pinnedColumns(): ColumnType[]; /** * @hidden */ get isRoot(): boolean; /** * @hidden */ get hasChildren(): boolean; /** * @hidden */ get unpinnedColumns(): ColumnType[]; /** * @hidden */ get showRowSelectors(): boolean; /** @hidden */ get dirty(): boolean; /** * @hidden */ get rowDraggable(): boolean; /** @hidden */ get added(): boolean; /** @hidden */ get deleted(): boolean; /** * @hidden */ get dragging(): boolean; get inEditMode(): boolean; /** * Gets the ID of the row. * A row in the grid is identified either by: * - primaryKey data value, * - the whole data, if the primaryKey is omitted. * * ```typescript * let rowID = this.grid.selectedRows[2].key; * ``` */ get key(): any; /** * The native DOM element representing the row. Could be null in certain environments. * * ```typescript * // get the nativeElement of the second selected row * let selectedRowNativeElement = this.grid.selectedRows[1].nativeElement; * ``` */ get nativeElement(): HTMLElement; /** * @hidden */ focused: boolean; /** * @hidden * @internal */ defaultCssClass: string; /** * @hidden */ triggerAddAnimationClass: boolean; protected destroy$: Subject; protected _data: any; protected _addRow: boolean; constructor(grid: GridType, selectionService: IgxGridSelectionService, element: ElementRef, cdr: ChangeDetectorRef); /** * @hidden * @internal */ onClick(event: MouseEvent): void; /** * @hidden * @internal */ onContextMenu(event: MouseEvent): void; /** * @hidden * @internal */ showActionStrip(): void; /** * @hidden * @internal */ hideActionStrip(): void; /** * @hidden * @internal */ ngAfterViewInit(): void; /** * @hidden * @internal */ ngOnDestroy(): void; /** * @hidden */ onRowSelectorClick(event: any): void; /** * Updates the specified row object and the data source record with the passed value. * * ```typescript * // update the second selected row's value * let newValue = "Apple"; * this.grid.selectedRows[1].update(newValue); * ``` */ update(value: any): void; /** * Removes the specified row from the grid's data source. * This method emits `rowDeleted` event. * * ```typescript * // delete the third selected row from the grid * this.grid.selectedRows[2].delete(); * ``` */ delete(): void; isCellActive(visibleColumnIndex: any): boolean; /** * Pins the specified row. * This method emits `rowPinning`\`rowPinned` event. * * ```typescript * // pin the selected row from the grid * this.grid.selectedRows[0].pin(); * ``` */ pin(): boolean; /** * Unpins the specified row. * This method emits `rowPinning`\`rowPinned` event. * * ```typescript * // unpin the selected row from the grid * this.grid.selectedRows[0].unpin(); * ``` */ unpin(): boolean; /** * @hidden */ get rowCheckboxAriaLabel(): string; /** * @hidden */ ngDoCheck(): void; /** * @hidden */ shouldDisplayPinnedChip(visibleColumnIndex: number): boolean; /** * Spawns the add row UI for the specific row. * * @example * ```typescript * const row = this.grid1.getRowByIndex(1); * row.beginAddRow(); * ``` */ beginAddRow(): void; /** * @hidden */ triggerAddAnimation(): void; /** * @hidden */ animationEndHandler(): void; /** * @hidden */ get resolveDragIndicatorClasses(): string; /** * - state persistence switching all pinned columns resets collection * - MRL unpinnedColumns igxFor modes entire child loop on unpin */ protected trackPinnedColumn: typeof trackByIdentity; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; static ngAcceptInputType_disabled: unknown; } type IconType = "svg" | "font" | "liga"; type IconReference = IconMeta & FamilyMeta; interface IconMeta { name: string; family: string; type?: IconType; /** @hidden @internal */ external?: boolean; } interface FamilyMeta { className: string; type: IconType; prefix?: string; } interface IconFamily { name: string; meta: FamilyMeta; } /** * Event emitted when a SVG icon is loaded through * a HTTP request. */ interface IgxIconLoadedEvent { /** Name of the icon */ name: string; /** The actual SVG text, if any */ value?: string; /** The font-family for the icon. Defaults to material. */ family: string; } /** * **Ignite UI for Angular Icon Service** - * * The Ignite UI Icon Service makes it easy for developers to include custom SVG images and use them with IgxIconComponent. * In addition it could be used to associate a custom class to be applied on IgxIconComponent according to given font-family. * * Example: * ```typescript * this.iconService.setFamily('material', { className: 'material-icons', type: 'font' }); * this.iconService.addSvgIcon('aruba', '/assets/svg/country_flags/aruba.svg', 'svg-flags'); * ``` */ declare class IgxIconService { private _sanitizer; private _httpClient; private _platformUtil; private _themeToken; private _destroyRef; protected document: Document; /** * Observable that emits when an icon is successfully loaded * through a HTTP request. * * @example * ```typescript * this.service.iconLoaded.subscribe((ev: IgxIconLoadedEvent) => ...); * ``` */ iconLoaded: Observable; private _defaultFamily; private _iconRefs; private _families; private _cachedIcons; private _iconLoaded; private _domParser; constructor(_sanitizer: DomSanitizer, _httpClient: HttpClient, _platformUtil: PlatformUtil, _themeToken: ThemeToken | undefined, _destroyRef: DestroyRef, document: Document); /** * Returns the default font-family. * ```typescript * const defaultFamily = this.iconService.defaultFamily; * ``` */ get defaultFamily(): IconFamily; /** * Sets the default font-family. * ```typescript * this.iconService.defaultFamily = 'svg-flags'; * ``` */ set defaultFamily(family: IconFamily); /** * Registers a custom class to be applied to IgxIconComponent for a given font-family. * ```typescript * this.iconService.registerFamilyAlias('material', 'material-icons'); * ``` * @deprecated in version 18.1.0. Use `setFamily` instead. */ registerFamilyAlias(alias: string, className?: string, type?: IconType): this; /** * Returns the custom class, if any, associated to a given font-family. * ```typescript * const familyClass = this.iconService.familyClassName('material'); * ``` */ familyClassName(alias: string): string; /** @hidden @internal */ private familyType; /** @hidden @internal */ setRefsByTheme(theme: IgxTheme): void; /** * Creates a family to className relationship that is applied to the IgxIconComponent * whenever that family name is used. * ```typescript * this.iconService.setFamily('material', { className: 'material-icons', type: 'liga' }); * ``` */ setFamily(name: string, meta: FamilyMeta): void; /** * Adds an icon reference meta for an icon in a meta family. * Executes only if no icon reference is found. * ```typescript * this.iconService.addIconRef('aruba', 'default', { name: 'aruba', family: 'svg-flags' }); * ``` */ addIconRef(name: string, family: string, icon: IconMeta): void; private _setIconRef; /** * Similar to addIconRef, but always sets the icon reference meta for an icon in a meta family. * ```typescript * this.iconService.setIconRef('aruba', 'default', { name: 'aruba', family: 'svg-flags' }); * ``` */ setIconRef(name: string, family: string, icon: IconMeta): void; /** * Returns the icon reference meta for an icon in a given family. * ```typescript * const iconRef = this.iconService.getIconRef('aruba', 'default'); * ``` */ getIconRef(name: string, family: string): IconReference; private getOrCreateSvgFamily; /** * Adds an SVG image to the cache. SVG source is an url. * ```typescript * this.iconService.addSvgIcon('aruba', '/assets/svg/country_flags/aruba.svg', 'svg-flags'); * ``` */ addSvgIcon(name: string, url: string, family?: string, stripMeta?: boolean): void; /** * Adds an SVG image to the cache. SVG source is its text. * ```typescript * this.iconService.addSvgIconFromText('simple', ' * ', 'svg-flags'); * ``` */ addSvgIconFromText(name: string, iconText: string, family?: string, stripMeta?: boolean): void; /** * Returns whether a given SVG image is present in the cache. * ```typescript * const isSvgCached = this.iconService.isSvgIconCached('aruba', 'svg-flags'); * ``` */ isSvgIconCached(name: string, family: string): boolean; /** * Returns the cached SVG image as string. * ```typescript * const svgIcon = this.iconService.getSvgIcon('aruba', 'svg-flags'); * ``` */ getSvgIcon(name: string, family: string): SafeHtml; /** * @hidden */ private fetchSvg; /** * @hidden */ private cacheSvgIcon; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵprov: i0.ɵɵInjectableDeclaration; } declare class IgxGridActionsBaseDirective implements AfterViewInit { protected iconService: IgxIconService; protected differs: IterableDiffers; /** @hidden @internal **/ buttons: QueryList; /** * Gets/Sets if the action buttons will be rendered as menu items. When in menu, items will be rendered with text label. * * @example * ```html * * * ``` */ asMenuItems: boolean; /** @hidden @internal **/ strip: IgxActionStripComponent; /** * @hidden * @internal */ get grid(): any; /** * Getter to be used in template * * @hidden * @internal */ get isRowContext(): boolean; constructor(iconService: IgxIconService, differs: IterableDiffers); /** * @hidden * @internal */ ngAfterViewInit(): void; /** * Check if the param is a row from a grid * * @hidden * @internal * @param context */ protected isRow(context: any): context is IgxRowDirective; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; static ngAcceptInputType_asMenuItems: unknown; } /** @hidden @internal */ declare abstract class IgxActionStripToken { abstract context: any; abstract menuOverlaySettings: OverlaySettings; abstract get hideOnRowLeave(): boolean; abstract show(context?: any): void; abstract hide(): void; } declare class IgxActionStripMenuItemDirective { templateRef: TemplateRef; constructor(templateRef: TemplateRef); static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * Action Strip provides templatable area for one or more actions. * * @igxModule IgxActionStripModule * * @igxTheme igx-action-strip-theme * * @igxKeywords action, strip, actionStrip, pinning, editing * * @igxGroup Data Entry & Display * * @igxParent IgxGridComponent, IgxTreeGridComponent, IgxHierarchicalGridComponent, IgxRowIslandComponent, * * * @remarks * The Ignite UI Action Strip is a container, overlaying its parent container, * and displaying action buttons with action applicable to the parent component the strip is instantiated or shown for. * * @example * ```html * * * */ declare class IgxActionStripComponent implements IgxActionStripToken, AfterContentInit, AfterViewInit { private _viewContainer; private renderer; protected el: ElementRef; /** @hidden @internal **/ cdr: ChangeDetectorRef; /** * Sets the context of an action strip. * The context should be an instance of a @Component, that has element property. * This element will be the placeholder of the action strip. * * @example * ```html * * ``` */ context: any; /** * Menu Items ContentChildren inside the Action Strip * * @hidden * @internal */ _menuItems: QueryList; /** * ActionButton as ContentChildren inside the Action Strip * * @hidden * @internal */ actionButtons: QueryList; /** * Gets/Sets the visibility of the Action Strip. * Could be used to set if the Action Strip will be initially hidden. * * @example * ```html * * ``` */ hidden: boolean; /** * Gets/Sets the resource strings. * * @remarks * By default it uses EN resources. */ set resourceStrings(value: IActionStripResourceStrings); get resourceStrings(): IActionStripResourceStrings; /** * Hide or not the Action Strip based on if it is a menu. * * @hidden * @internal */ get hideOnRowLeave(): boolean; /** * Reference to the menu * * @hidden * @internal */ menu: IgxDropDownComponent; /** * Getter for menu overlay settings * * @hidden * @internal */ menuOverlaySettings: OverlaySettings; private _hidden; private _resourceStrings; private _originalParent; constructor(_viewContainer: ViewContainerRef, renderer: Renderer2, el: ElementRef, /** @hidden @internal **/ cdr: ChangeDetectorRef); /** * Menu Items list. * * @hidden * @internal */ get menuItems(): any[]; /** * Getter for the 'display' property of the current `IgxActionStrip` */ private get display(); /** * Host `attr.class` binding. */ protected hostClass: string; /** * @hidden * @internal */ ngAfterContentInit(): void; /** * @hidden * @internal */ ngAfterViewInit(): void; /** * Showing the Action Strip and appending it the specified context element. * * @param context * @example * ```typescript * this.actionStrip.show(row); * ``` */ show(context?: any): void; /** * Hiding the Action Strip and removing it from its current context element. * * @example * ```typescript * this.actionStrip.hide(); * ``` */ hide(): void; /** pin swapping w/ unpin resets the menuItems collection */ protected trackMenuItem: typeof trackByIdentity; /** * Close the menu if opened * * @hidden * @internal */ private closeMenu; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; static ngAcceptInputType_hidden: unknown; } /** * Grid Editing Actions for the Action Strip * * @igxParent IgxActionStripComponent */ declare class IgxGridEditingActionsComponent extends IgxGridActionsBaseDirective { /** * Host `class.igx-action-strip` binding. * * @hidden * @internal */ cssClass: string; /** * An input to enable/disable action strip row adding button */ set addRow(value: boolean); get addRow(): boolean; /** * An input to enable/disable action strip row editing button */ editRow: boolean; /** * An input to enable/disable action strip row deleting button */ deleteRow: boolean; /** * Getter if the row is disabled * * @hidden * @internal */ get disabled(): boolean; /** * Getter if the row is root. * * @hidden * @internal */ get isRootRow(): boolean; get hasChildren(): boolean; /** * An input to enable/disable action strip child row adding button */ addChild: boolean; private isMessageShown; private _addRow; private iconsRendered; /** * Enter row or cell edit mode depending the grid rowEditable option * * @example * ```typescript * this.gridEditingActions.startEdit(); * ``` */ startEdit(event?: any): void; /** @hidden @internal **/ deleteRowHandler(event?: any): void; /** @hidden @internal **/ addRowHandler(event?: any, asChild?: boolean): void; /** * @hidden * @internal */ private registerIcons; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; static ngAcceptInputType_addRow: unknown; static ngAcceptInputType_editRow: unknown; static ngAcceptInputType_deleteRow: unknown; static ngAcceptInputType_addChild: unknown; } /** * Grid Pinning Actions for the Action Strip * * @igxParent IgxActionStripComponent */ declare class IgxGridPinningActionsComponent extends IgxGridActionsBaseDirective { /** * Host `class.igx-action-strip` binding. * * @hidden * @internal */ cssClass: string; private iconsRendered; /** * Getter to know if the row is pinned * * @hidden * @internal */ get pinned(): boolean; /** * Getter to know if the row is in pinned and ghost * * @hidden * @internal */ get inPinnedArea(): boolean; /** * Getter to know if the row pinning is set to top or bottom * * @hidden * @internal */ get pinnedTop(): boolean; /** * Pin the row according to the context. * * @example * ```typescript * this.gridPinningActions.pin(); * ``` */ pin(event?: any): void; /** * Unpin the row according to the context. * * @example * ```typescript * this.gridPinningActions.unpin(); * ``` */ unpin(event?: any): void; scrollToRow(event: any): void; private registerSVGIcons; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } declare const IGX_ACTION_STRIP_DIRECTIVES: readonly [typeof IgxActionStripComponent, typeof IgxActionStripMenuItemDirective]; declare const IGX_GRID_ACTION_STRIP_DIRECTIVES: readonly [typeof IgxActionStripComponent, typeof IgxActionStripMenuItemDirective, typeof IgxGridPinningActionsComponent, typeof IgxGridEditingActionsComponent, typeof IgxGridActionsBaseDirective, typeof IgxGridActionButtonComponent]; declare const IgxAvatarSize: { readonly SMALL: "small"; readonly MEDIUM: "medium"; readonly LARGE: "large"; }; type IgxAvatarSize = (typeof IgxAvatarSize)[keyof typeof IgxAvatarSize]; declare const IgxAvatarType: { readonly INITIALS: "initials"; readonly IMAGE: "image"; readonly ICON: "icon"; readonly CUSTOM: "custom"; }; type IgxAvatarType = (typeof IgxAvatarType)[keyof typeof IgxAvatarType]; /** * Avatar provides a way to display an image, icon or initials to the user. * * @igxModule IgxAvatarModule * * @igxTheme igx-avatar-theme, igx-icon-theme * * @igxKeywords avatar, profile, picture, initials * * @igxGroup Layouts * * @remarks * * The Ignite UI Avatar provides an easy way to add an avatar icon to your application. This icon can be an * image, someone's initials or a material icon from the Google Material icon set. * * @example * ```html * * * ``` */ declare class IgxAvatarComponent implements OnInit { elementRef: ElementRef; /** * Returns the `aria-label` attribute of the avatar. * * @example * ```typescript * let ariaLabel = this.avatar.ariaLabel; * ``` * */ ariaLabel: string; /** * Returns the `role` attribute of the avatar. * * @example * ```typescript * let avatarRole = this.avatar.role; * ``` */ role: string; /** * Host `class.igx-avatar` binding. * * @hidden * @internal */ cssClass: string; /** * Returns the type of the avatar. * The avatar can be: * - `"initials type avatar"` * - `"icon type avatar"` * - `"image type avatar"`. * - `"custom type avatar"`. * * @example * ```typescript * let avatarDescription = this.avatar.roleDescription; * ``` */ roleDescription: string; /** * Sets the `id` of the avatar. If not set, the first avatar component will have `id` = `"igx-avatar-0"`. * * @example * ```html * * ``` */ id: string; /** * Sets square, rounded or circular shape to the avatar. * By default the shape of the avatar is square. * * @example * ```html * * ``` */ shape: 'square' | 'rounded' | 'circle'; /** @hidden @internal */ get isRounded(): boolean; /** @hidden @internal */ get isCircle(): boolean; /** * Sets the color of the avatar's initials or icon. * * @example * ```html * * ``` * @deprecated in version 17.2.0. */ color: string; /** * Sets the background color of the avatar. * * @example * ```html * * ``` * @igxFriendlyName Background color * @deprecated in version 17.2.0. */ bgColor: string; /** * Sets initials to the avatar. * * @example * ```html * * ``` */ initials: string; /** * Sets an icon to the avatar. All icons from the material icon set are supported. * * @example * ```html * * ``` */ icon: string; /** * Sets the image source of the avatar. * * @example * ```html * * ``` * @igxFriendlyName Image URL */ set src(value: string); get src(): string; /** @hidden @internal */ protected defaultTemplate: TemplateRef; /** @hidden @internal */ protected imageTemplate: TemplateRef; /** @hidden @internal */ protected initialsTemplate: TemplateRef; /** @hidden @internal */ protected iconTemplate: TemplateRef; /** * @hidden * @internal */ private _size; private _src; /** * Returns the size of the avatar. * * @example * ```typescript * let avatarSize = this.avatar.size; * ``` */ get size(): string | IgxAvatarSize; /** * Sets the size of the avatar. * By default, the size is `"small"`. It can be set to `"medium"` or `"large"`. * * @example * ```html * * ``` */ set size(value: string | IgxAvatarSize); /** * Returns the type of the avatar. * * @example * ```typescript * let avatarType = this.avatar.type; * ``` */ get type(): IgxAvatarType; /** @hidden @internal */ get _isImageType(): boolean; /** @hidden @internal */ get _isIconType(): boolean; /** @hidden @internal */ get _isInitialsType(): boolean; protected get componentSize(): string; /** * Returns the template of the avatar. * * @hidden * @internal */ get template(): TemplateRef; constructor(elementRef: ElementRef); /** * Returns the css url of the image. * * @hidden * @internal */ getSrcUrl(): string; /** @hidden @internal */ ngOnInit(): void; /** @hidden @internal */ private getRole; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * Determines the igxBadge type */ declare const IgxBadgeType: { readonly PRIMARY: "primary"; readonly INFO: "info"; readonly SUCCESS: "success"; readonly WARNING: "warning"; readonly ERROR: "error"; }; type IgxBadgeType = (typeof IgxBadgeType)[keyof typeof IgxBadgeType]; /** * Badge provides visual notifications used to decorate avatars, menus, etc. * * @igxModule IgxBadgeModule * * @igxTheme igx-badge-theme * * @igxKeywords badge, icon, notification * * @igxGroup Data Entry & Display * * @remarks * The Ignite UI Badge is used to decorate avatars, navigation menus, or other components in the * application when visual notification is needed. They are usually designed as icons with a predefined * style to communicate information, success, warnings, or errors. * * @example * ```html * * * */ declare class IgxBadgeComponent { /** * Sets/gets the `id` of the badge. * * @remarks * If not set, the `id` will have value `"igx-badge-0"`. * * @example * ```html * * ``` */ id: string; /** * Sets/gets the type of the badge. * * @remarks * Allowed values are `primary`, `info`, `success`, `warning`, `error`. * Providing an invalid value won't display a badge. * * @example * ```html * * ``` */ type: string | IgxBadgeType; /** * Sets/gets the value to be displayed inside the badge. * * @remarks * If an `icon` property is already set the `icon` will be displayed. * If neither a `value` nor an `icon` is set the content of the badge will be empty. * * @example * ```html * * ``` */ value: string | number; /** * Sets/gets an icon for the badge from the material icons set. * * @remarks * Has priority over the `value` property. * If neither a `value` nor an `icon` is set the content of the badge will be empty. * Providing an invalid value won't display anything. * * @example * ```html * * ``` */ icon: string; /** * The name of the icon set. Used in case the icon is from a different icon set. */ iconSet: string; /** * Sets/gets the role attribute value. * * @example * ```typescript * @ViewChild("MyBadge", { read: IgxBadgeComponent }) * public badge: IgxBadgeComponent; * * badge.role = 'status'; * ``` */ role: string; /** * Sets/gets the css class to use on the badge. * * @example * ```typescript * @ViewChild("MyBadge", { read: IgxBadgeComponent }) * public badge: IgxBadgeComponent; * * badge.cssClass = 'my-badge-class'; * ``` */ cssClass: string; /** * Sets a square shape to the badge, if `shape` is set to `square`. * By default the shape of the badge is rounded. * * @example * ```html * * ``` */ shape: 'rounded' | 'square'; /** @hidden @internal */ get _squareShape(): boolean; /** * Sets/gets the aria-label attribute value. * * @example * ```typescript * @ViewChild("MyBadge", { read: IgxBadgeComponent }) * public badge: IgxBadgeComponent; * * badge.label = 'badge'; * ``` */ label: string; /** * Sets/gets whether the badge is outlined. * Default value is `false`. * * @example * ```html * * ``` */ outlined: boolean; /** * Defines a human-readable, accessor, author-localized description for * the `type` and the `icon` or `value` of the element. * * @hidden * @internal */ get roleDescription(): string; get infoClass(): boolean; get successClass(): boolean; get warningClass(): boolean; get errorClass(): boolean; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; static ngAcceptInputType_outlined: unknown; } /** * Icon provides a way to include material icons to markup * * @igxModule IgxIconModule * * @igxTheme igx-icon-theme * * @igxKeywords icon, picture * * @igxGroup Display * * @remarks * * The Ignite UI Icon makes it easy for developers to include material design icons directly in their markup. The icons * support different icon families and can be marked as active or disabled using the `active` property. This will change the appearance * of the icon. * * @example * ```html * home * ``` */ declare class IgxIconComponent implements OnInit, OnChanges, OnDestroy { el: ElementRef; private iconService; private ref; private _iconRef; private _destroy$; private _userClasses; private _iconClasses; protected get elementClasses(): string; private addIconClass; private clearIconClasses; /** * An accessor that returns inactive property. * * @example * ```typescript * @ViewChild("MyIcon") * public icon: IgxIconComponent; * ngAfterViewInit() { * let iconActive = this.icon.getInactive; * } * ``` */ get getInactive(): boolean; /** * An @Input property that sets the value of the `family`. By default it's "material". * * @example * ```html * settings * ``` */ family: string; /** * Set the `name` of the icon. * * @example * ```html * * ``` */ name: string; /** * An @Input property that allows you to disable the `active` property. By default it's applied. * * @example * ```html * settings * ``` */ active: boolean; constructor(el: ElementRef, iconService: IgxIconService, ref: ChangeDetectorRef); /** * @hidden * @internal */ ngOnInit(): void; /** * @hidden * @internal */ ngOnChanges(): void; /** * @hidden * @internal */ ngOnDestroy(): void; protected get iconRef(): IconReference; protected set iconRef(ref: IconReference); /** * An accessor that returns the value of the family property. * * @example * ```typescript * @ViewChild("MyIcon") * public icon: IgxIconComponent; * ngAfterViewInit() { * let iconFamily = this.icon.getFamily; * } * ``` */ get getFamily(): string; /** * An accessor that returns the value of the active property. * * @example * ```typescript * @ViewChild("MyIcon") * public icon: IgxIconComponent; * ngAfterViewInit() { * let iconActive = this.icon.getActive; * } * ``` */ get getActive(): boolean; /** * An accessor that returns the value of the iconName property. * * @example * ```typescript * @ViewChild("MyIcon") * public icon: IgxIconComponent; * ngAfterViewInit() { * let name = this.icon.getName; * } * ``` */ get getName(): string; /** * An accessor that returns the underlying SVG image as SafeHtml. * * @example * ```typescript * @ViewChild("MyIcon") * public icon: IgxIconComponent; * ngAfterViewInit() { * let svg: SafeHtml = this.icon.getSvg; * } * ``` */ get getSvg(): SafeHtml; /** * @hidden * @internal */ private setIcon; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; static ngAcceptInputType_active: unknown; } interface IBannerResourceStrings { igx_banner_button_dismiss?: string; } declare const BannerResourceStringsEN: IBannerResourceStrings; interface BannerEventArgs extends IBaseEventArgs { event?: Event; } interface BannerCancelEventArgs extends BannerEventArgs, CancelableEventArgs { } /** * **Ignite UI for Angular Banner** - * [Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/banner.html) * * The Ignite UI Banner provides a highly template-able and easy to use banner that can be shown in your application. * * Usage: * * ```html * * Our privacy settings have changed. * * * * * * ``` */ declare class IgxBannerComponent implements IToggleView { elementRef: ElementRef; /** * @hidden */ bannerIcon: IgxIconComponent; /** * Fires after the banner shows up * ```typescript * public handleOpened(event) { * ... * } * ``` * ```html * * ``` */ opened: EventEmitter; /** * Fires before the banner shows up * ```typescript * public handleOpening(event) { * ... * } * ``` * ```html * * ``` */ opening: EventEmitter; /** * Fires after the banner hides * ```typescript * public handleClosed(event) { * ... * } * ``` * ```html * * ``` */ closed: EventEmitter; /** * Fires before the banner hides * ```typescript * public handleClosing(event) { * ... * } * ``` * ```html * * ``` */ closing: EventEmitter; /** @hidden */ get useDefaultTemplate(): boolean; /** * Set the animation settings used by the banner open/close methods * ```typescript * import { slideInLeft, slideOutRight } from 'igniteui-angular'; * ... * banner.animationSettings: ToggleAnimationSettings = { openAnimation: slideInLeft, closeAnimation: slideOutRight }; * ``` */ set animationSettings(settings: ToggleAnimationSettings); /** * Get the animation settings used by the banner open/close methods * ```typescript * let currentAnimations: ToggleAnimationSettings = banner.animationSettings * ``` */ get animationSettings(): ToggleAnimationSettings; /** * Gets/Sets the resource strings. * * @remarks * By default it uses EN resources. */ set resourceStrings(value: IBannerResourceStrings); get resourceStrings(): IBannerResourceStrings; /** * Gets/Sets whether the banner is expanded (visible) or collapsed (hidden). * Defaults to `false`. * Setting to `true` opens the banner, while `false` closes it. * * @example * // Expand the banner * banner.expanded = true; * * @example * // Collapse the banner * banner.expanded = false; * * @example * // Check if the banner is expanded * const isExpanded = banner.expanded; */ get expanded(): boolean; set expanded(value: boolean); /** * Gets whether the banner is collapsed. * * ```typescript * const isCollapsed: boolean = banner.collapsed; * ``` */ get collapsed(): boolean; /** * Returns the native element of the banner component * ```typescript * const myBannerElement: HTMLElement = banner.element; * ``` */ get element(): HTMLElement; cssClass: string; /** * @hidden */ get displayStyle(): string; private _expansionPanel; private _bannerActionTemplate; private _expanded; private _shouldFireEvent; private _bannerEvent; private _animationSettings; private _resourceStrings; constructor(elementRef: ElementRef); /** * Opens the banner * * ```typescript * myBanner.open(); * ``` * * ```html * * ... * * * ``` */ open(event?: Event): void; /** * Closes the banner * * ```typescript * myBanner.close(); * ``` * * ```html * * ... * * * ``` */ close(event?: Event): void; /** * Toggles the banner * * ```typescript * myBanner.toggle(); * ``` * * ```html * * ... * * * ``` */ toggle(event?: Event): void; /** @hidden */ onExpansionPanelOpen(): void; /** @hidden */ onExpansionPanelClose(): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } declare class IgxBannerActionsDirective { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } declare const IGX_BANNER_DIRECTIVES: readonly [typeof IgxBannerComponent, typeof IgxBannerActionsDirective]; /** * Determines the Button Group alignment */ declare const ButtonGroupAlignment: { readonly horizontal: "horizontal"; readonly vertical: "vertical"; }; type ButtonGroupAlignment = typeof ButtonGroupAlignment[keyof typeof ButtonGroupAlignment]; /** * **Ignite UI for Angular Button Group** - * [Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/buttongroup.html) * * The Ignite UI Button Group displays a group of buttons either vertically or horizontally. The group supports * single, multi and singleRequired selection. * * Example: * ```html * * * ``` * The `fontOptions` value shown above is defined as: * ```typescript * this.fontOptions = [ * { icon: 'format_bold', selected: false }, * { icon: 'format_italic', selected: false }, * { icon: 'format_underlined', selected: false }]; * ``` */ declare class IgxButtonGroupComponent implements AfterViewInit, OnDestroy { private _cdr; private _renderer; private _el; /** * A collection containing all buttons inside the button group. */ get buttons(): IgxButtonDirective[]; /** * Gets/Sets the value of the `id` attribute. If not set it will be automatically generated. * ```html * * ``` */ id: string; /** * @hidden */ zIndex: number; /** * Allows you to set a style using the `itemContentCssClass` input. * The value should be the CSS class name that will be applied to the button group. * ```typescript * public style1 = "styleClass"; * //.. * ``` * ```html * * ``` */ set itemContentCssClass(value: string); /** * Returns the CSS class of the item content of the `IgxButtonGroup`. * ```typescript * @ViewChild("MyChild") * public buttonG: IgxButtonGroupComponent; * ngAfterViewInit(){ * let buttonSelect = this.buttonG.itemContentCssClass; * } * ``` */ get itemContentCssClass(): string; /** * Enables selecting multiple buttons. By default, multi-selection is false. * * @deprecated in version 16.1.0. Use the `selectionMode` property instead. */ get multiSelection(): boolean; set multiSelection(selectionMode: boolean); /** * Gets/Sets the selection mode to 'single', 'singleRequired' or 'multi' of the buttons. By default, the selection mode is 'single'. * ```html * * ``` */ get selectionMode(): "single" | "singleRequired" | "multi"; set selectionMode(selectionMode: 'single' | 'singleRequired' | 'multi'); /** * Property that configures the buttons in the button group using a collection of `Button` objects. * ```typescript * public ngOnInit() { * this.cities = [ * new Button({ * label: "Sofia" * }), * new Button({ * label: "London" * }), * new Button({ * label: "New York", * selected: true * }), * new Button({ * label: "Tokyo" * }) * ]; * } * //.. * ``` * ```html * * ``` */ values: any; /** * Disables the `igx-buttongroup` component. By default it's false. * ```html * * ``` */ get disabled(): boolean; set disabled(value: boolean); /** * Allows you to set the button group alignment. * Available options are `ButtonGroupAlignment.horizontal` (default) and `ButtonGroupAlignment.vertical`. * ```typescript * public alignment = ButtonGroupAlignment.vertical; * //.. * ``` * ```html * * ``` */ set alignment(value: ButtonGroupAlignment); /** * Returns the alignment of the `igx-buttongroup`. * ```typescript * @ViewChild("MyChild") * public buttonG: IgxButtonGroupComponent; * ngAfterViewInit(){ * let buttonAlignment = this.buttonG.alignment; * } * ``` */ get alignment(): ButtonGroupAlignment; /** * An @Ouput property that emits an event when a button is selected. * ```typescript * @ViewChild("toast") * private toast: IgxToastComponent; * public selectedHandler(buttongroup) { * this.toast.open() * } * //... * ``` * ```html * * You have made a selection! * ``` */ selected: EventEmitter; /** * An @Ouput property that emits an event when a button is deselected. * ```typescript * @ViewChild("toast") * private toast: IgxToastComponent; * public deselectedHandler(buttongroup){ * this.toast.open() * } * //... * ``` * ```html * #MyChild [selectionMode]="'multi'" (deselected)="deselectedHandler($event)"> * You have deselected a button! * ``` */ deselected: EventEmitter; private viewButtons; private templateButtons; /** * Returns true if the `igx-buttongroup` alignment is vertical. * Note that in order for the accessor to work correctly the property should be set explicitly. * ```html * * ``` * ```typescript * //... * @ViewChild("MyChild") * private buttonG: IgxButtonGroupComponent; * ngAfterViewInit(){ * let orientation = this.buttonG.isVertical; * } * ``` */ get isVertical(): boolean; /** * @hidden */ selectedIndexes: number[]; protected buttonClickNotifier$: Subject; protected queryListNotifier$: Subject; private _isVertical; private _itemContentCssClass; private _disabled; private _selectionMode; private mutationObserver; private observerConfig; constructor(_cdr: ChangeDetectorRef, _renderer: Renderer2, _el: ElementRef); /** * Gets the selected button/buttons. * ```typescript * @ViewChild("MyChild") * private buttonG: IgxButtonGroupComponent; * ngAfterViewInit(){ * let selectedButton = this.buttonG.selectedButtons; * } * ``` */ get selectedButtons(): IgxButtonDirective[]; /** * Selects a button by its index. * ```typescript * @ViewChild("MyChild") * private buttonG: IgxButtonGroupComponent; * ngAfterViewInit(){ * this.buttonG.selectButton(2); * this.cdr.detectChanges(); * } * ``` * * @memberOf {@link IgxButtonGroupComponent} */ selectButton(index: number): void; /** * @hidden * @internal */ updateSelected(index: number): void; updateDeselected(index: number): void; /** * Deselects a button by its index. * ```typescript * @ViewChild("MyChild") * private buttonG: IgxButtonGroupComponent; * ngAfterViewInit(){ * this.buttonG.deselectButton(2); * this.cdr.detectChanges(); * } * ``` * * @memberOf {@link IgxButtonGroupComponent} */ deselectButton(index: number): void; /** * @hidden */ ngAfterViewInit(): void; /** * @hidden */ ngOnDestroy(): void; /** * @hidden */ _clickHandler(index: number): void; private setMutationsObserver; private getUpdatedButtons; private updateButtonSelectionState; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; static ngAcceptInputType_disabled: unknown; } interface IButtonGroupEventArgs extends IBaseEventArgs { owner: IgxButtonGroupComponent; button: IgxButtonDirective; index: number; } declare const IGX_BUTTON_GROUP_DIRECTIVES: readonly [typeof IgxButtonGroupComponent, typeof IgxButtonDirective]; interface DateRangeDescriptor { type: DateRangeType; dateRange?: Date[]; } declare enum DateRangeType { After = 0, Before = 1, Between = 2, Specific = 3, Weekdays = 4, Weekends = 5 } type DayParameter = CalendarDay | Date; type CalendarDayParams = { year: number; month: number; date?: number; }; type DayInterval = "year" | "quarter" | "month" | "week" | "day"; declare class CalendarDay { private _date; /** Constructs and returns the current day. */ static get today(): CalendarDay; /** Constructs a new CalendarDay instance from a Date object. */ static from(date: Date): CalendarDay; constructor(args: CalendarDayParams); /** Returns a copy of this instance. */ clone(): CalendarDay; /** * Returns a new instance with values replaced. */ set(args: Partial): CalendarDay; add(unit: DayInterval, value: number): CalendarDay; /** Returns the day of the week (Sunday = 0). */ get day(): number; /** Returns the full year. */ get year(): number; /** Returns the month. */ get month(): number; /** Returns the date */ get date(): number; /** Returns the timestamp since epoch in milliseconds. */ get timestamp(): number; /** Returns the current week number. */ get week(): number; /** Returns the underlying native date instance. */ get native(): Date; /** * Whether the current date is a weekend day. * * @remarks * This is naive, since it does not account for locale specifics. */ get weekend(): boolean; equalTo(value: DayParameter): boolean; greaterThan(value: DayParameter): boolean; lessThan(value: DayParameter): boolean; toString(): string; } /** * @hidden */ declare class IgxDayItemComponent { private elementRef; date: CalendarDay; viewDate: Date; selection: string; /** * Returns boolean indicating if the day is selected * */ get selected(): any; /** * Selects the day */ set selected(value: any); disabledDates: DateRangeDescriptor[]; specialDates: DateRangeDescriptor[]; hideOutsideDays: boolean; isLastInRange: boolean; isFirstInRange: boolean; isWithinRange: boolean; isWithinPreviewRange: boolean; hideLeadingDays: boolean; hideTrailingDays: boolean; private get hideLeading(); private get hideTrailing(); dateSelection: EventEmitter; mouseEnter: EventEmitter; mouseLeave: EventEmitter; mouseDown: EventEmitter; get isCurrentMonth(): boolean; get isPreviousMonth(): boolean; get isNextMonth(): boolean; get nativeElement(): any; isActive: boolean; get isSelectedCSS(): boolean; get isInactive(): boolean; get isHidden(): boolean; get isToday(): boolean; get isWeekend(): boolean; get isDisabled(): boolean; get isFocusable(): boolean; protected onMouseEnter(): void; protected onMouseLeave(): void; protected onMouseDown(event: MouseEvent): void; get isWithinRangeCSS(): boolean; get isWithinPreviewRangeCSS(): boolean; get isSpecial(): boolean; get isDisabledCSS(): boolean; get isSingleSelection(): boolean; private _selected; constructor(elementRef: ElementRef); static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; static ngAcceptInputType_hideOutsideDays: unknown; static ngAcceptInputType_isLastInRange: unknown; static ngAcceptInputType_isFirstInRange: unknown; static ngAcceptInputType_isWithinRange: unknown; static ngAcceptInputType_isWithinPreviewRange: unknown; static ngAcceptInputType_hideLeadingDays: unknown; static ngAcceptInputType_hideTrailingDays: unknown; static ngAcceptInputType_isActive: unknown; } /** * This file contains all the directives used by the @link IgxCalendarComponent. * Except for the directives which are used for templating the calendar itself * you should generally not use them directly. * * @preferred */ declare const IGX_CALENDAR_VIEW_ITEM: InjectionToken; declare abstract class IgxCalendarViewBaseDirective { elementRef: ElementRef; value: Date; date: Date; showActive: boolean; itemSelection: EventEmitter; get nativeElement(): any; constructor(elementRef: ElementRef); onMouseDown(event: MouseEvent): void; abstract get isCurrent(): boolean; abstract get isSelected(): boolean; abstract get isActive(): boolean; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * @hidden */ declare class IgxCalendarYearDirective extends IgxCalendarViewBaseDirective { get isCurrent(): boolean; get isSelected(): boolean; get isActive(): boolean; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } declare class IgxCalendarMonthDirective extends IgxCalendarViewBaseDirective { get isCurrent(): boolean; get isSelected(): boolean; get isActive(): boolean; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * @hidden */ declare class IgxCalendarHeaderTitleTemplateDirective { template: TemplateRef; constructor(template: TemplateRef); static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * @hidden */ declare class IgxCalendarHeaderTemplateDirective { template: TemplateRef; constructor(template: TemplateRef); static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * @hidden */ declare class IgxCalendarSubheaderTemplateDirective { template: TemplateRef; constructor(template: TemplateRef); static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * @hidden */ declare class IgxCalendarScrollPageDirective implements AfterViewInit, OnDestroy { private element; private zone; protected platform: PlatformUtil; /** * A callback function to be invoked when increment/decrement page is triggered. * * @hidden */ startScroll: (keydown?: boolean) => void; /** * A callback function to be invoked when increment/decrement page stops. * * @hidden */ stopScroll: (event: any) => void; /** * @hidden */ private destroy$; constructor(element: ElementRef, zone: NgZone, platform: PlatformUtil); /** * @hidden */ onMouseDown(event: MouseEvent): void; /** * @hidden */ onMouseUp(event: MouseEvent): void; /** * @hidden */ ngAfterViewInit(): void; /** * @hidden */ ngOnDestroy(): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } declare enum Direction$1 { NEXT = 1, PREV = -1 } declare abstract class IgxCalendarViewDirective implements ControlValueAccessor { protected dayInterval?: DayInterval; role: string; tabIndex: number; protected get activeDescendant(): number; /** * Gets/sets whether the view should be rendered * according to the locale and format, if any. */ formatView: boolean; /** * Applies styles to the active item on view focus. */ showActive: boolean; /** * Emits an event when a selection is made in the view. * Provides reference the `date` property in the component. * @memberof IgxCalendarViewDirective */ selected: EventEmitter; /** * Emits an event when a page changes in the view. * Provides reference the `date` property in the component. * @memberof IgxCalendarViewDirective * @hidden @internal */ pageChanged: EventEmitter; /** * Emits an event when the active date has changed. * @memberof IgxCalendarViewDirective * @hidden @internal */ activeDateChanged: EventEmitter; /** * @hidden * @internal */ viewItems: QueryList; /** * @hidden */ protected _formatter: Intl.DateTimeFormat; /** * @hidden */ protected _locale: string; /** * @hidden * @internal */ private _date; /** * @hidden */ protected _onTouchedCallback: () => void; /** * @hidden */ protected _onChangeCallback: (_: Date) => void; /** * Gets/sets the selected date of the view. * By default it's the current date. * ```typescript * let date = this.view.date; * ``` * * @memberof IgxYearsViewComponent */ set date(value: Date); get date(): Date; /** * Gets the `locale` of the view. * Default value is `"en"`. * ```typescript * let locale = this.view.locale; * ``` * * @memberof IgxCalendarViewDirective */ get locale(): string; /** * Sets the `locale` of the view. * Expects a valid BCP 47 language tag. * Default value is `"en"`. * * @memberof IgxCalendarViewDirective */ set locale(value: string); constructor(dayInterval?: DayInterval); /** * @hidden */ onKeydownArrowDown(event: KeyboardEvent): void; /** * @hidden */ onKeydownArrowUp(event: KeyboardEvent): void; /** * @hidden */ onKeydownArrowRight(event: KeyboardEvent): void; /** * @hidden */ onKeydownArrowLeft(event: KeyboardEvent): void; /** * @hidden */ onKeydownHome(event: KeyboardEvent): void; /** * @hidden */ onKeydownEnd(event: KeyboardEvent): void; /** * @hidden */ onKeydownEnter(event: KeyboardEvent): void; /** * @hidden */ protected handleFocus(): void; /** * @hidden */ protected handleBlur(): void; /** * @hidden */ selectDate(value: Date): void; /** * @hidden */ registerOnChange(fn: (v: Date) => void): void; /** * @hidden */ registerOnTouched(fn: () => void): void; /** * @hidden */ writeValue(value: Date): void; /** * @hidden */ protected navigateTo(event: KeyboardEvent, direction: Direction$1, delta: number): void; /** * @hidden */ protected abstract initFormatter(): void; /** * @hidden */ protected abstract get range(): Date[]; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; static ngAcceptInputType_formatView: unknown; static ngAcceptInputType_showActive: unknown; } declare class IgxMonthsViewComponent extends IgxCalendarViewDirective implements ControlValueAccessor { #private; el: ElementRef; /** * Sets/gets the `id` of the months view. * If not set, the `id` will have value `"igx-months-view-0"`. * ```html * * ``` * ```typescript * let monthsViewId = this.monthsView.id; * ``` * * @memberof IgxMonthsViewComponent */ id: string; /** * The default css class applied to the component. * * @hidden */ readonly viewClass = true; /** * @hidden @internal */ get standalone(): boolean; set standalone(value: boolean); /** * Gets the month format option of the months view. * ```typescript * let monthFormat = this.monthsView.monthFormat. * ``` */ get monthFormat(): any; /** * Sets the month format option of the months view. * ```html * [monthFormat]="short'" * ``` * * @memberof IgxMonthsViewComponent */ set monthFormat(value: any); /** * Gets/sets whether the view should be rendered * according to the locale and format, if any. */ formatView: boolean; /** * Returns an array of date objects which are then used to * properly render the month names. * * Used in the template of the component * * @hidden @internal */ get range(): Date[]; /** * @hidden */ private _monthFormat; constructor(el: ElementRef, dayInterval: DayInterval); /** * @hidden */ protected onMouseDown(): void; /** * Returns the locale representation of the month in the months view. * * @hidden */ formattedMonth(value: Date): { long: string; formatted: string; }; /** * @hidden */ monthTracker(_: number, item: Date): string; /** * @hidden */ protected initFormatter(): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; static ngAcceptInputType_formatView: unknown; } declare class IgxYearsViewComponent extends IgxCalendarViewDirective implements ControlValueAccessor { #private; el: ElementRef; /** * The default css class applied to the component. * * @hidden */ readonly viewClass = true; /** * @hidden @internal */ get standalone(): boolean; set standalone(value: boolean); /** * @hidden */ private _yearFormat; /** * @hidden */ private _yearsPerPage; /** * Gets the year format option of the years view. * ```typescript * let yearFormat = this.yearsView.yearFormat. * ``` */ get yearFormat(): any; /** * Sets the year format option of the years view. * ```html * * ``` * * @memberof IgxYearsViewComponent */ set yearFormat(value: any); /** * Returns an array of date objects which are then used to properly * render the years. * * Used in the template of the component. * * @hidden @internal */ get range(): Date[]; constructor(el: ElementRef, dayInterval: DayInterval); /** * Returns the locale representation of the year in the years view. * * @hidden */ formattedYear(value: Date): { long: string; formatted: string; }; /** * @hidden */ yearTracker(_: number, item: Date): string; /** * @hidden */ protected initFormatter(): void; /** * @hidden */ protected onMouseDown(): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } interface ICalendarResourceStrings { igx_calendar_previous_month?: string; igx_calendar_next_month?: string; igx_calendar_previous_year?: string; igx_calendar_next_year?: string; igx_calendar_previous_years?: string; igx_calendar_next_years?: string; igx_calendar_select_date?: string; igx_calendar_select_month?: string; igx_calendar_select_year?: string; igx_calendar_range_start?: string; igx_calendar_range_end?: string; igx_calendar_range_label_start?: string; igx_calendar_range_label_end?: string; igx_calendar_range_placeholder?: string; igx_calendar_selected_month_is?: string; igx_calendar_first_picker_of?: string; igx_calendar_multi_selection?: string; igx_calendar_range_selection?: string; igx_calendar_single_selection?: string; igx_calendar_singular_multi_selection?: string; igx_calendar_singular_range_selection?: string; igx_calendar_singular_single_selection?: string; } declare const CalendarResourceStringsEN: ICalendarResourceStrings; declare class KeyboardNavigationService { private eventManager; private ngZone; private keyHandlers; private eventUnsubscribeFn; constructor(eventManager: EventManager, ngZone: NgZone); attachKeyboardHandlers(elementRef: ElementRef, context: any): this; detachKeyboardHandlers(): void; set(key: string, handler: (event: KeyboardEvent) => void): this; unset(key: string): this; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵprov: i0.ɵɵInjectableDeclaration; } /** @hidden @internal */ declare class IgxCalendarBaseDirective implements ControlValueAccessor { protected platform: PlatformUtil; protected _localeId: string; protected keyboardNavigation?: KeyboardNavigationService; protected cdr?: ChangeDetectorRef; /** * Holds month view index we are operating on. */ protected activeViewIdx: number; /** * @hidden */ private _activeView; /** * @hidden */ private activeViewSubject; /** * @hidden */ protected activeView$: rxjs.Observable; /** * Sets/gets whether the outside dates (dates that are out of the current month) will be hidden. * Default value is `false`. * ```html * * ``` * ```typescript * let hideOutsideDays = this.calendar.hideOutsideDays; * ``` */ hideOutsideDays: boolean; /** * Emits an event when a date is selected. * Provides reference the `selectedDates` property. */ selected: EventEmitter; /** * Emits an event when the month in view is changed. * ```html * * ``` * ```typescript * public viewDateChanged(event: IViewDateChangeEventArgs) { * let viewDate = event.currentValue; * } * ``` */ viewDateChanged: EventEmitter; /** * Emits an event when the active view is changed. * ```html * * ``` * ```typescript * public activeViewChanged(event: CalendarView) { * let activeView = event; * } * ``` */ activeViewChanged: EventEmitter; /** * @hidden */ rangeStarted: boolean; /** * @hidden */ pageScrollDirection: ScrollDirection; /** * @hidden */ scrollPage$: Subject; /** * @hidden */ stopPageScroll$: Subject; /** * @hidden */ startPageScroll$: Subject; /** * @hidden */ selectedDates: Date[]; /** * @hidden */ shiftKey: boolean; /** * @hidden */ lastSelectedDate: Date; /** * @hidden */ protected formatterWeekday: Intl.DateTimeFormat; /** * @hidden */ protected formatterDay: Intl.DateTimeFormat; /** * @hidden */ protected formatterMonth: Intl.DateTimeFormat; /** * @hidden */ protected formatterYear: Intl.DateTimeFormat; /** * @hidden */ protected formatterMonthday: Intl.DateTimeFormat; /** * @hidden */ protected formatterRangeday: Intl.DateTimeFormat; /** * @hidden */ protected _onTouchedCallback: () => void; /** * @hidden */ protected _onChangeCallback: (_: Date | Date[]) => void; /** * @hidden */ protected _deselectDate: boolean; /** * @hidden */ private initialSelection; /** * @hidden */ private _locale; /** * @hidden */ private _weekStart; /** * @hidden */ private _viewDate; /** * @hidden */ private _startDate; /** * @hidden */ private _endDate; /** * @hidden */ private _disabledDates; /** * @hidden */ private _specialDates; /** * @hidden */ private _selection; /** @hidden @internal */ private _resourceStrings; /** * @hidden */ private _formatOptions; /** * @hidden */ private _formatViews; /** * An accessor that sets the resource strings. * By default it uses EN resources. */ set resourceStrings(value: ICalendarResourceStrings); /** * An accessor that returns the resource strings. */ get resourceStrings(): ICalendarResourceStrings; /** * Gets the start day of the week. * Can return a numeric or an enum representation of the week day. * If not set, defaults to the first day of the week for the application locale. */ get weekStart(): WEEKDAYS | number; /** * Sets the start day of the week. * Can be assigned to a numeric value or to `WEEKDAYS` enum value. */ set weekStart(value: WEEKDAYS | number); /** * Gets the `locale` of the calendar. * If not set, defaults to application's locale. */ get locale(): string; /** * Sets the `locale` of the calendar. * Expects a valid BCP 47 language tag. */ set locale(value: string); /** * Gets the date format options of the views. */ get formatOptions(): IFormattingOptions; /** * Sets the date format options of the views. * Default is { day: 'numeric', month: 'short', weekday: 'short', year: 'numeric' } */ set formatOptions(formatOptions: IFormattingOptions); /** * Gets whether the `day`, `month` and `year` should be rendered * according to the locale and formatOptions, if any. */ get formatViews(): IFormattingViews; /** * Sets whether the `day`, `month` and `year` should be rendered * according to the locale and formatOptions, if any. */ set formatViews(formatViews: IFormattingViews); /** * Gets the current active view. * ```typescript * this.activeView = calendar.activeView; * ``` */ get activeView(): IgxCalendarView; /** * Sets the current active view. * ```html * * ``` * ```typescript * calendar.activeView = IgxCalendarView.YEAR; * ``` */ set activeView(val: IgxCalendarView); /** * @hidden */ get isDefaultView(): boolean; /** * @hidden */ get isDecadeView(): boolean; /** * @hidden */ activeViewDecade(activeViewIdx?: number): void; /** * @hidden */ activeViewDecadeKB(event: KeyboardEvent, activeViewIdx?: number): void; /** * @hidden */ yearsBtns: QueryList; /** * @hidden @internal */ previousViewDate: Date; /** * @hidden */ changeYear(date: Date): void; /** * Returns the locale representation of the year in the year view if enabled, * otherwise returns the default `Date.getFullYear()` value. * * @hidden */ formattedYear(value: Date | Date[]): string; formattedYears(value: Date): string; protected prevNavLabel(detail?: string): string; protected nextNavLabel(detail?: string): string; protected getDecadeRange(): { start: string; end: string; }; /** * * Gets the selection type. * Default value is `"single"`. * Changing the type of selection resets the currently * selected values if any. */ get selection(): string; /** * Sets the selection. */ set selection(value: string); /** * Gets the date that is presented. By default it is the current date. */ get viewDate(): Date; /** * Sets the date that will be presented in the default view when the component renders. */ set viewDate(value: Date | string); /** * Gets the disabled dates descriptors. */ get disabledDates(): DateRangeDescriptor[]; /** * Sets the disabled dates' descriptors. * ```typescript * @ViewChild("MyCalendar") * public calendar: IgxCalendarComponent; * ngOnInit(){ * this.calendar.disabledDates = [ * {type: DateRangeType.Between, dateRange: [new Date("2020-1-1"), new Date("2020-1-15")]}, * {type: DateRangeType.Weekends}]; * } * ``` */ set disabledDates(value: DateRangeDescriptor[]); /** * Checks whether a date is disabled. * * @hidden */ isDateDisabled(date: Date | string): boolean; /** * Gets the special dates descriptors. */ get specialDates(): DateRangeDescriptor[]; /** * Sets the special dates' descriptors. * ```typescript * @ViewChild("MyCalendar") * public calendar: IgxCalendarComponent; * ngOnInit(){ * this.calendar.specialDates = [ * {type: DateRangeType.Between, dateRange: [new Date("2020-1-1"), new Date("2020-1-15")]}, * {type: DateRangeType.Weekends}]; * } * ``` */ set specialDates(value: DateRangeDescriptor[]); /** * Gets the selected date(s). * * When selection is set to `single`, it returns * a single `Date` object. * Otherwise it is an array of `Date` objects. */ get value(): Date | Date[]; /** * Sets the selected date(s). * * When selection is set to `single`, it accepts * a single `Date` object. * Otherwise it is an array of `Date` objects. */ set value(value: Date | Date[] | string); /** * @hidden */ constructor(platform: PlatformUtil, _localeId: string, keyboardNavigation?: KeyboardNavigationService, cdr?: ChangeDetectorRef); /** * Multi/Range selection with shift key * * @hidden * @internal */ onPointerdown(event: MouseEvent): void; /** * @hidden */ registerOnChange(fn: (v: Date | Date[]) => void): void; /** * @hidden */ registerOnTouched(fn: () => void): void; /** * @hidden */ writeValue(value: Date | Date[]): void; /** * Selects date(s) (based on the selection type). */ selectDate(value: Date | Date[] | string): void; /** * Deselects date(s) (based on the selection type). */ deselectDate(value?: Date | Date[] | string): void; /** * Performs a single selection. * * @hidden */ private selectSingle; /** * Performs a single deselection. * * @hidden */ private deselectSingle; /** * Performs a multiple selection * * @hidden */ private selectMultiple; /** * Performs a multiple deselection. * * @hidden */ private deselectMultiple; /** * @hidden */ private selectRange; /** * Performs a range deselection. * * @hidden */ private deselectRange; /** * @hidden */ protected initFormatters(): void; /** * @hidden */ protected getDateOnly(date: Date): Date; /** * @hidden */ private getDateOnlyInMs; /** * @hidden */ private generateDateRange; private validateDate; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; static ngAcceptInputType_hideOutsideDays: unknown; } interface IViewChangingEventArgs { monthAction: string; key: string; nextDate: Date; } declare class IgxDaysViewComponent extends IgxCalendarBaseDirective { #private; protected el: ElementRef; cdr: ChangeDetectorRef; /** * Sets/gets the `id` of the days view. * If not set, the `id` will have value `"igx-days-view-0"`. * ```html * * ``` * ```typescript * let daysViewId = this.daysView.id; * ``` */ id: string; tabIndex: number; role: string; readonly viewClass = true; get standalone(): boolean; set standalone(value: boolean); protected get activeDescendant(): number; /** * Show/hide week numbers * * @example * ```html * * `` */ showWeekNumbers: boolean; /** * @hidden * @internal */ set activeDate(value: Date); get activeDate(): Date; /** * @hidden * @internal */ set previewRangeDate(value: Date); get previewRangeDate(): Date; set hideLeadingDays(value: boolean); get hideLeadingDays(): boolean; set hideTrailingDays(value: boolean); get hideTrailingDays(): boolean; set showActiveDay(value: boolean); get showActiveDay(): boolean; /** * @hidden */ dateSelected: EventEmitter; /** * @hidden */ pageChanged: EventEmitter; /** * @hidden */ activeDateChange: EventEmitter; /** * @hidden */ previewRangeDateChange: EventEmitter; /** * @hidden */ dates: QueryList; private _activeDate; private _previewRangeDate; private _hideLeadingDays; private _hideTrailingDays; private _showActiveDay; /** * @hidden */ constructor(platform: PlatformUtil, _localeId: string, el: ElementRef, cdr: ChangeDetectorRef); /** * @hidden */ private handleArrowKeydown; /** * @hidden */ protected onArrowRight(event: KeyboardEvent): void; /** * @hidden */ protected onArrowLeft(event: KeyboardEvent): void; /** * @hidden */ protected onArrowUp(event: KeyboardEvent): void; /** * @hidden */ protected onArrowDown(event: KeyboardEvent): void; /** * @hidden */ protected onKeydownEnter(event: KeyboardEvent): void; /** * @hidden */ protected onKeydownHome(event: KeyboardEvent): void; /** * @hidden */ protected onKeydownEnd(event: KeyboardEvent): void; /** * @hidden */ protected handleFocus(): void; /** * @hidden */ protected handleBlur(): void; /** * @hidden */ protected handleDateClick(item: IgxDayItemComponent): void; private selectActiveDate; protected get calendarMonth(): CalendarDay[]; protected get monthWeeks(): CalendarDay[][]; /** * Returns the week number by date * * @hidden */ getWeekNumber(date: CalendarDay): number; /** * Returns the locale representation of the date in the days view. * * @hidden */ formattedDate(value: Date): string; /** * @hidden */ get weekHeaderLabels(): { long: string; formatted: string; }[]; protected get weekNumberHeader(): { short: string; long: string; }; /** * @hidden */ rowTracker(_: number, item: CalendarDay[]): string; /** * @hidden */ dateTracker(_: number, item: CalendarDay): string; /** * @hidden */ isSelected(date: CalendarDay): boolean; /** * @hidden */ protected isFirstInRange(date: CalendarDay): boolean; /** * @hidden */ protected isLastInRange(date: CalendarDay): boolean; /** * @hidden */ protected isActiveDate(day: CalendarDay): boolean; /** * @hidden */ protected isWithinRange(date: Date, checkForRange: boolean, min?: Date, max?: Date): boolean; protected isWithinPreviewRange(date: Date): boolean; /** * @hidden */ private get isSingleSelection(); /** * @hidden @internal */ changePreviewRange(date: Date): void; /** * @hidden @internal */ clearPreviewRange(): void; private setPreviewRangeDate; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; static ngAcceptInputType_showWeekNumbers: unknown; static ngAcceptInputType_hideLeadingDays: unknown; static ngAcceptInputType_hideTrailingDays: unknown; static ngAcceptInputType_showActiveDay: unknown; } /** * Calendar provides a way to display date information. * * @igxModule IgxCalendarModule * * @igxTheme igx-calendar-theme, igx-icon-theme * * @igxKeywords calendar, datepicker, schedule, date * * @igxGroup Scheduling * * @remarks * The Ignite UI Calendar provides an easy way to display a calendar and allow users to select dates using single, multiple * or range selection. * * @example: * ```html * * ``` */ declare class IgxCalendarComponent extends IgxCalendarBaseDirective implements AfterViewInit, OnDestroy { /** * @hidden * @internal */ private _activeDescendant; /** * @hidden * @internal */ wrapper: ElementRef; /** * Sets/gets the `id` of the calendar. * * @remarks * If not set, the `id` will have value `"igx-calendar-0"`. * * @example * ```html * * ``` * @memberof IgxCalendarComponent */ id: string; /** * Sets/gets whether the calendar has header. * Default value is `true`. * * @example * ```html * * ``` */ hasHeader: boolean; /** * Sets/gets whether the calendar header will be in vertical position. * Default value is `false`. * * @example * ```html * * ``` */ vertical: boolean; orientation: 'horizontal' | 'vertical'; headerOrientation: 'horizontal' | 'vertical'; /** * Sets/gets the number of month views displayed. * Default value is `1`. * * @example * ```html * * ``` */ get monthsViewNumber(): number; set monthsViewNumber(val: number); /** * Show/hide week numbers * * @example * ```html * * `` */ showWeekNumbers: boolean; /** * The default css class applied to the component. * * @hidden * @internal */ get styleVerticalClass(): boolean; /** * The default css class applied to the component. * * @hidden * @internal */ styleClass: boolean; /** * Month button, that displays the months view. * * @hidden * @internal */ monthsBtns: QueryList; /** * ViewChild that represents the decade view. * * @hidden * @internal */ dacadeView: IgxYearsViewComponent; /** * ViewChild that represents the months view. * * @hidden * @internal */ monthsView: IgxMonthsViewComponent; /** * ViewChild that represents the days view. * * @hidden * @internal */ daysView: IgxDaysViewComponent; /** * ViewChildrenden representing all of the rendered days views. * * @hidden * @internal */ monthViews: QueryList; /** * Button for previous month. * * @hidden * @internal */ prevPageBtn: ElementRef; /** * Button for next month. * * @hidden * @internal */ nextPageBtn: ElementRef; /** * Denote if the year view is active. * * @hidden * @internal */ get isYearView(): boolean; /** * Gets the header template. * * @example * ```typescript * let headerTitleTemplate = this.calendar.headerTitleTeamplate; * ``` * @memberof IgxCalendarComponent */ get headerTitleTemplate(): any; /** * Sets the header template. * * @example * ```html * * ``` * @memberof IgxCalendarComponent */ set headerTitleTemplate(directive: any); /** * Gets the header template. * * @example * ```typescript * let headerTemplate = this.calendar.headerTeamplate; * ``` * @memberof IgxCalendarComponent */ get headerTemplate(): any; /** * Sets the header template. * * @example * ```html * * ``` * @memberof IgxCalendarComponent */ set headerTemplate(directive: any); /** * Gets the subheader template. * * @example * ```typescript * let subheaderTemplate = this.calendar.subheaderTemplate; * ``` */ get subheaderTemplate(): any; /** * Sets the subheader template. * * @example * ```html * * ``` * @memberof IgxCalendarComponent */ set subheaderTemplate(directive: any); /** * Gets the context for the template marked with the `igxCalendarHeader` directive. * * @example * ```typescript * let headerContext = this.calendar.headerContext; * ``` */ get headerContext(): { $implicit: { index: number; date: Date; } | { index: number; date: Date; }[]; }; /** * Gets the context for the template marked with either `igxCalendarSubHeaderMonth` * or `igxCalendarSubHeaderYear` directive. * * @example * ```typescript * let context = this.calendar.context; * ``` */ get context(): { $implicit: { index: number; date: Date; } | { index: number; date: Date; }[]; }; /** * Date displayed in header * * @hidden * @internal */ get headerDate(): Date; /** * @hidden * @internal */ private headerTemplateDirective; /** * @hidden * @internal */ private headerTitleTemplateDirective; /** * @hidden * @internal */ private subheaderTemplateDirective; /** * @hidden * @internal */ activeDate: Date; /** * @hidden * @internal */ protected previewRangeDate: Date; /** * Used to apply the active date when the calendar view is changed * * @hidden * @internal */ nextDate: Date; /** * Denote if the calendar view was changed with the keyboard * * @hidden * @internal */ isKeydownTrigger: boolean; /** * @hidden * @internal */ private _monthsViewNumber; protected onMouseDown(event: MouseEvent): void; private _showActiveDay; /** * @hidden * @internal */ protected set showActiveDay(value: boolean); protected get showActiveDay(): boolean; protected get activeDescendant(): number; protected set activeDescendant(date: Date); ngAfterViewInit(): void; protected onWrapperFocus(_event: FocusEvent): void; protected onWrapperBlur(_event: FocusEvent): void; private handleArrowKeydown; private handlePageUpDown; private handlePageUp; private handlePageDown; private onArrowUp; private onArrowDown; private onArrowLeft; private onArrowRight; private onEnter; private onHome; private onEnd; /** * Returns the locale representation of the month in the month view if enabled, * otherwise returns the default `Date.getMonth()` value. * * @hidden * @internal */ formattedMonth(value: Date): string; /** * Change to previous page * * @hidden * @internal */ previousPage(isKeydownTrigger?: boolean): void; /** * Change to next page * * @hidden * @internal */ nextPage(isKeydownTrigger?: boolean): void; /** * Changes the current page * * @hidden * @internal */ protected changePage(isKeydownTrigger: boolean, direction: ScrollDirection): void; /** * Continious navigation through the previous pages * * @hidden * @internal */ startPrevPageScroll: (isKeydownTrigger?: boolean) => void; /** * Continious navigation through the next pages * * @hidden * @internal */ startNextPageScroll: (isKeydownTrigger?: boolean) => void; /** * Stop continuous navigation * * @hidden * @internal */ stopPageScroll: (event: KeyboardEvent) => void; /** * @hidden * @internal */ onActiveViewDecade(event: MouseEvent, date: Date, activeViewIdx: number): void; /** * @hidden * @internal */ onActiveViewDecadeKB(date: Date, event: KeyboardEvent, activeViewIdx: number): void; /** * @hidden * @internal */ onYearsViewClick(event: MouseEvent): void; /** * @hidden * @internal */ onYearsViewKeydown(event: KeyboardEvent): void; /** * @hidden * @internal */ protected getFormattedDate(): { weekday: string; monthday: string; }; /** * @hidden * @internal */ protected getFormattedRange(): { start: string; end: string; }; /** * @hidden * @internal */ protected get viewDates(): IgxDayItemComponent[]; /** * Handles invoked on date selection * * @hidden * @internal */ protected handleDateSelection(date: Date): void; /** * @hidden * @intenal */ changeMonth(date: Date): void; /** * @hidden * @intenal */ changeYear(date: Date): void; /** * @hidden * @intenal */ updateYear(date: Date): void; updateActiveDescendant(date: Date): void; /** * @hidden * @internal */ onActiveViewYear(event: MouseEvent, date: Date, activeViewIdx: number): void; /** * @hidden * @internal */ onActiveViewYearKB(date: Date, event: KeyboardEvent, activeViewIdx: number): void; /** * Deselects date(s) (based on the selection type). * * @example * ```typescript * this.calendar.deselectDate(new Date(`2018-06-12`)); * ```` */ deselectDate(value?: Date | Date[] | string): void; /** * Getter for the context object inside the calendar templates. * * @hidden * @internal */ getContext(i: number): { $implicit: { index: number; date: Date; } | { index: number; date: Date; }[]; }; /** * @hidden * @internal */ resetActiveDate(date: Date): void; /** * @hidden * @internal */ ngOnDestroy(): void; /** * @hidden * @internal */ getPrevMonth(date: Date): Date; /** * @hidden * @internal */ getNextMonth(date: Date, viewIndex: number): Date; /** * Helper method building and returning the context object inside the calendar templates. * * @hidden * @internal */ private generateContext; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; static ngAcceptInputType_hasHeader: unknown; static ngAcceptInputType_vertical: unknown; static ngAcceptInputType_showWeekNumbers: unknown; } declare class IgxMonthPickerComponent extends IgxCalendarBaseDirective implements OnInit, AfterViewInit, OnDestroy { /** * Sets/gets the `id` of the month picker. * If not set, the `id` will have value `"igx-month-picker-0"`. */ id: string; /** * @hidden * @internal */ private _activeDescendant; /** * @hidden * @internal */ wrapper: ElementRef; /** * The default css class applied to the component. * * @hidden */ styleClass: boolean; /** * @hidden */ monthsView: IgxMonthsViewComponent; /** * @hidden */ dacadeView: IgxYearsViewComponent; /** * @hidden */ daysView: IgxDaysViewComponent; /** * @hidden */ yearsBtn: ElementRef; /** * @hidden */ previousPage(event?: KeyboardEvent): void; /** * @hidden */ nextPage(event?: KeyboardEvent): void; /** * @hidden * @internal */ onActiveViewDecadeKB(date: Date, event: KeyboardEvent, activeViewIdx: number): void; /** * @hidden * @internal */ onActiveViewDecade(event: MouseEvent, date: Date, activeViewIdx: number): void; /** * @hidden */ activeViewDecadeKB(event: KeyboardEvent): void; /** * @hidden */ activeViewDecade(): void; /** * @hidden */ changePageKB(event: KeyboardEvent, next?: boolean): void; /** * @hidden */ selectYear(event: Date): void; /** * @hidden */ selectMonth(event: Date): void; /** * Selects a date. * ```typescript * this.monthPicker.selectDate(new Date(`2018-06-12`)); * ``` */ selectDate(value: Date): Date; /** * @hidden */ getNextYear(): number; /** * @hidden */ getPreviousYear(): number; /** * @hidden */ updateDate(date: Date): void; protected onMouseDown(event: MouseEvent): void; private _showActiveDay; /** * @hidden * @internal */ protected set showActiveDay(value: boolean); protected get showActiveDay(): boolean; protected get activeDescendant(): number; protected set activeDescendant(date: Date); get isDefaultView(): boolean; ngOnInit(): void; ngAfterViewInit(): void; protected onWrapperFocus(event: FocusEvent): void; protected onWrapperBlur(event: FocusEvent): void; private handlePageUpDown; private handlePageUp; private handlePageDown; private onArrowUp; private onArrowDown; private onArrowLeft; private onArrowRight; private onEnter; private onHome; private onEnd; /** * @hidden * @internal */ ngOnDestroy(): void; /** * @hidden * @internal */ getPrevYearDate(date: Date): Date; /** * @hidden * @internal */ getNextYearDate(date: Date): Date; /** * Getter for the context object inside the calendar templates. * * @hidden * @internal */ getContext(i: number): { $implicit: { index: number; date: Date; } | { index: number; date: Date; }[]; }; /** * Helper method building and returning the context object inside the calendar templates. * * @hidden * @internal */ private generateContext; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } declare const IGX_CALENDAR_DIRECTIVES: readonly [typeof IgxCalendarComponent, typeof IgxDaysViewComponent, typeof IgxMonthsViewComponent, typeof IgxYearsViewComponent, typeof IgxMonthPickerComponent, typeof IgxCalendarHeaderTemplateDirective, typeof IgxCalendarHeaderTitleTemplateDirective, typeof IgxCalendarMonthDirective, typeof IgxCalendarYearDirective, typeof IgxCalendarSubheaderTemplateDirective]; /** * IgxCardMedia is container for the card media section. * Use it to wrap images and videos. */ declare class IgxCardMediaDirective { /** @hidden @internal */ cssClass: string; /** * Sets the `width` and `min-width` style property * of the media container. If not provided it will be set to `auto`. * * @example * ```html * * ``` */ width: string; /** * Sets the `height` style property of the media container. * If not provided it will be set to `auto`. * * @example * ```html * * ``` */ height: string; /** * Sets the `role` attribute of the media container. */ role: string; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * IgxCardHeader is container for the card header */ declare class IgxCardHeaderComponent { /** @hidden @internal */ cssClass: string; /** * Sets the layout style of the header. * By default the header elements(thumbnail and title/subtitle) are aligned horizontally. * * @example * ```html * * ``` */ vertical: boolean; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; static ngAcceptInputType_vertical: unknown; } /** * IgxCardThumbnail is container for the card thumbnail section. * Use it to wrap anything you want to be used as a thumbnail. */ declare class IgxCardThumbnailDirective { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * igxCardHeaderTitle is used to denote the header title in a card. * Use it to tag text nodes. */ declare class IgxCardHeaderTitleDirective { /** @hidden @internal */ cssClass: string; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * igxCardHeaderSubtitle is used to denote the header subtitle in a card. * Use it to tag text nodes. */ declare class IgxCardHeaderSubtitleDirective { /** @hidden @internal */ cssClass: string; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * IgxCardContent is container for the card content. */ declare class IgxCardContentDirective { /** @hidden @internal */ cssClass: string; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * IgxCardFooter is container for the card footer */ declare class IgxCardFooterDirective { /** * Sets the value of the `role` attribute of the card footer. * By default the value is set to `footer`. * * @example * ```html * * ``` */ role: string; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * Card provides a way to display organized content in appealing way. * * @igxModule IgxCardModule * * @igxTheme igx-card-theme, igx-icon-theme, igx-button-theme * * @igxKeywords card, button, avatar, icon * * @igxGroup Layouts * * @remarks * The Ignite UI Card serves as a container that allows custom content to be organized in an appealing way. There are * five sections in a card that you can use to organize your content. These are header, media, content, actions, and footer. * * @example * ```html * * *

{{title}}

*
{{subtitle}}
*
* * * * *
* ``` */ declare class IgxCardComponent { /** * Sets/gets the `id` of the card. * If not set, `id` will have value `"igx-card-0"`; * * @example * ```html * * ``` * ```typescript * let cardId = this.card.id; * ``` */ id: string; /** * Sets the `igx-card` css class to the card component. * * @hidden * @internal */ cssClass: string; /** * Sets the value of the `role` attribute of the card. * By default the value is set to `group`. * * @example * ```html * * ``` */ role: string; /** * Sets/gets whether the card is elevated. * Default value is `false`. * * @example * ```html * * ``` * ```typescript * let cardElevation = this.card.elevated; * ``` */ elevated: boolean; /** * Sets the value of the `horizontal` attribute of the card. * Setting this to `true` will make the different card sections align horizontally, * essentially flipping the card to the side. * * @example * ```html * * ``` */ horizontal: boolean; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; static ngAcceptInputType_elevated: unknown; static ngAcceptInputType_horizontal: unknown; } declare const IgxCardActionsLayout: { readonly START: "start"; readonly JUSTIFY: "justify"; }; type IgxCardActionsLayout = (typeof IgxCardActionsLayout)[keyof typeof IgxCardActionsLayout]; /** * IgxCardActions is container for the card actions. */ declare class IgxCardActionsComponent implements OnInit, OnChanges { card: IgxCardComponent; /** * Sets the layout style of the actions. * You can justify the elements slotted in the igx-card-action container * so that they are positioned equally from one another taking up all the * space available along the card actions axis. * * @example * ```html * * ``` */ layout: IgxCardActionsLayout | string; /** * Sets the vertical attribute of the actions. * When set to `true` the actions will be layed out vertically. */ vertical: boolean; /** * A getter that returns `true` when the layout has been * set to `justify`. */ get isJustifyLayout(): boolean; private isVerticalSet; constructor(card: IgxCardComponent); /** * @hidden * @internal */ ngOnChanges(changes: SimpleChanges): void; /** * @hidden * @internal */ ngOnInit(): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; static ngAcceptInputType_vertical: unknown; } declare const IGX_CARD_DIRECTIVES: readonly [typeof IgxCardComponent, typeof IgxCardHeaderComponent, typeof IgxCardMediaDirective, typeof IgxCardContentDirective, typeof IgxCardActionsComponent, typeof IgxCardFooterDirective, typeof IgxCardHeaderTitleDirective, typeof IgxCardHeaderSubtitleDirective, typeof IgxCardThumbnailDirective]; interface ICarouselResourceStrings { igx_carousel_of?: string; igx_carousel_slide?: string; igx_carousel_previous_slide?: string; igx_carousel_next_slide?: string; } declare const CarouselResourceStringsEN: ICarouselResourceStrings; declare const CarouselAnimationType: { readonly none: "none"; readonly slide: "slide"; readonly fade: "fade"; }; type CarouselAnimationType = (typeof CarouselAnimationType)[keyof typeof CarouselAnimationType]; declare const CarouselIndicatorsOrientation: { /** * @deprecated in version 19.1.0. Use `end` instead. */ readonly bottom: "bottom"; /** * @deprecated in version 19.1.0. Use `start` instead. */ readonly top: "top"; readonly start: "start"; readonly end: "end"; }; type CarouselIndicatorsOrientation = (typeof CarouselIndicatorsOrientation)[keyof typeof CarouselIndicatorsOrientation]; declare enum Direction { NONE = 0, NEXT = 1, PREV = 2 } interface CarouselAnimationSettings { enterAnimation: AnimationReferenceMetadata; leaveAnimation: AnimationReferenceMetadata; } /** @hidden */ interface IgxSlideComponentBase { direction: Direction; previous: boolean; } /** @hidden */ declare abstract class IgxCarouselComponentBase implements OnDestroy { private animationService; protected cdr: ChangeDetectorRef; /** @hidden */ animationType: CarouselAnimationType; /** @hidden @internal */ enterAnimationDone: EventEmitter; /** @hidden @internal */ leaveAnimationDone: EventEmitter; /** @hidden */ protected currentItem: IgxSlideComponentBase; /** @hidden */ protected previousItem: IgxSlideComponentBase; /** @hidden */ protected enterAnimationPlayer?: AnimationPlayer; /** @hidden */ protected leaveAnimationPlayer?: AnimationPlayer; /** @hidden */ protected defaultAnimationDuration: number; /** @hidden */ protected animationPosition: number; /** @hidden */ protected newDuration: number; /** @hidden */ protected vertical: boolean; constructor(animationService: AnimationService, cdr: ChangeDetectorRef); ngOnDestroy(): void; /** @hidden */ protected triggerAnimations(): void; /** @hidden */ protected animationStarted(animation: AnimationPlayer): boolean; /** @hidden */ protected playAnimations(): void; private resetAnimations; private getAnimation; private playEnterAnimation; private playLeaveAnimation; protected abstract getPreviousElement(): HTMLElement; protected abstract getCurrentElement(): HTMLElement; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * A slide component that usually holds an image and/or a caption text. * IgxSlideComponent is usually a child component of an IgxCarouselComponent. * * ``` * * * * ``` * * @export */ declare class IgxSlideComponent implements AfterContentChecked, OnDestroy, IgxSlideComponentBase { private elementRef; /** * Gets/sets the `index` of the slide inside the carousel. * ```html * * * * ``` * * @memberOf IgxSlideComponent */ index: number; /** * Gets/sets the target `direction` for the slide. * ```html * * * * ``` * * @memberOf IgxSlideComponent */ direction: Direction; total: number; /** * Returns the `tabIndex` of the slide component. * ```typescript * let tabIndex = this.carousel.tabIndex; * ``` * * @memberof IgxSlideComponent * @deprecated in version 19.2.0. */ get tabIndex(): number; /** * @hidden */ id: string; /** * Returns the `role` of the slide component. * By default is set to `tabpanel` * * @memberof IgxSlideComponent */ tab: string; /** @hidden */ ariaLabelledBy: any; /** * Returns the class of the slide component. * ```typescript * let class = this.slide.cssClass; * ``` * * @memberof IgxSlideComponent */ cssClass: string; /** * Gets/sets the `active` state of the slide. * ```html * * * * ``` * * Two-way data binding. * ```html * * * * ``` * * @memberof IgxSlideComponent */ get active(): boolean; set active(value: boolean); previous: boolean; /** * @hidden */ activeChange: EventEmitter; private _active; private _destroy$; constructor(elementRef: ElementRef); /** * Returns a reference to the carousel element in the DOM. * ```typescript * let nativeElement = this.slide.nativeElement; * ``` * * @memberof IgxSlideComponent */ get nativeElement(): any; /** * @hidden */ get isDestroyed(): Subject; ngAfterContentChecked(): void; /** * @hidden */ ngOnDestroy(): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; static ngAcceptInputType_active: unknown; static ngAcceptInputType_previous: unknown; } declare class CarouselHammerConfig extends HammerGestureConfig { overrides: { pan: { direction: number; }; }; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵprov: i0.ɵɵInjectableDeclaration; } /** * **Ignite UI for Angular Carousel** - * [Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/carousel.html) * * The Ignite UI Carousel is used to browse or navigate through a collection of slides. Slides can contain custom * content such as images or cards and be used for things such as on-boarding tutorials or page-based interfaces. * It can be used as a separate fullscreen element or inside another component. * * Example: * ```html * * *

First Slide Header

*

First slide Content

* * *

Second Slide Header

*

Second Slide Content

*
* ``` */ declare class IgxCarouselComponent extends IgxCarouselComponentBase implements OnDestroy, AfterContentInit { private element; private iterableDiffers; private platformUtil; private dir; private document; /** * Sets the `id` of the carousel. * If not set, the `id` of the first carousel component will be `"igx-carousel-0"`. * ```html * * ``` * * @memberof IgxCarouselComponent */ id: string; /** * Returns the `role` attribute of the carousel. * ```typescript * let carouselRole = this.carousel.role; * ``` * * @memberof IgxCarouselComponent */ role: string; /** @hidden */ roleDescription: string; /** @hidden */ get labelId(): string; /** @hidden */ get isVertical(): boolean; /** * Returns the class of the carousel component. * ```typescript * let class = this.carousel.cssClass; * ``` * * @memberof IgxCarouselComponent */ cssClass: string; /** * Gets the `touch-action` style of the `list item`. * ```typescript * let touchAction = this.listItem.touchAction; * ``` */ get touchAction(): "auto" | "pan-y"; /** * Sets whether the carousel should `loop` back to the first slide after reaching the last slide. * Default value is `true`. * ```html * * ``` * * @memberOf IgxCarouselComponent */ loop: boolean; /** * Sets whether the carousel will `pause` the slide transitions on user interactions. * Default value is `true`. * ```html * * ``` * * @memberOf IgxCarouselComponent */ pause: boolean; /** * Controls whether the carousel should render the left/right `navigation` buttons. * Default value is `true`. * ```html * * ``` * * @memberOf IgxCarouselComponent */ navigation: boolean; /** * Controls whether the carousel should render the indicators. * Default value is `true`. * ```html * * ``` * * @memberOf IgxCarouselComponent */ indicators: boolean; /** * Controls whether the carousel has vertical alignment. * Default value is `false`. * ```html * * ``` * * @memberOf IgxCarouselComponent */ vertical: boolean; /** * Controls whether the carousel should support gestures. * Default value is `true`. * ```html * * ``` * * @memberOf IgxCarouselComponent */ gesturesSupport: boolean; /** * Controls the maximum indexes that can be shown. * Default value is `10`. * ```html * * ``` * * @memberOf IgxCarouselComponent */ maximumIndicatorsCount: number; /** * Gets/sets the display mode of carousel indicators. It can be `start` or `end`. * Default value is `end`. * ```html * * * ``` * * @memberOf IgxCarouselComponent */ indicatorsOrientation: CarouselIndicatorsOrientation; /** * Gets/sets the animation type of carousel. * Default value is `slide`. * ```html * * * ``` * * @memberOf IgxCarouselComponent */ animationType: CarouselAnimationType; /** * The custom template, if any, that should be used when rendering carousel indicators * * ```typescript * // Set in typescript * const myCustomTemplate: TemplateRef = myComponent.customTemplate; * myComponent.carousel.indicatorTemplate = myCustomTemplate; * ``` * ```html * * * ... * * brightness_7 * brightness_5 * * * ``` */ indicatorTemplate: TemplateRef; /** * The custom template, if any, that should be used when rendering carousel next button * * ```typescript * // Set in typescript * const myCustomTemplate: TemplateRef = myComponent.customTemplate; * myComponent.carousel.nextButtonTemplate = myCustomTemplate; * ``` * ```html * * * ... * * * * * ``` */ nextButtonTemplate: TemplateRef; /** * The custom template, if any, that should be used when rendering carousel previous button * * ```typescript * // Set in typescript * const myCustomTemplate: TemplateRef = myComponent.customTemplate; * myComponent.carousel.prevButtonTemplate = myCustomTemplate; * ``` * ```html * * * ... * * * * * ``` */ prevButtonTemplate: TemplateRef; /** * The collection of `slides` currently in the carousel. * ```typescript * let slides: QueryList = this.carousel.slides; * ``` * * @memberOf IgxCarouselComponent */ slides: QueryList; /** * An event that is emitted after a slide transition has happened. * Provides references to the `IgxCarouselComponent` and `IgxSlideComponent` as event arguments. * ```html * * ``` * * @memberOf IgxCarouselComponent */ slideChanged: EventEmitter; /** * An event that is emitted after a slide has been added to the carousel. * Provides references to the `IgxCarouselComponent` and `IgxSlideComponent` as event arguments. * ```html * * ``` * * @memberOf IgxCarouselComponent */ slideAdded: EventEmitter; /** * An event that is emitted after a slide has been removed from the carousel. * Provides references to the `IgxCarouselComponent` and `IgxSlideComponent` as event arguments. * ```html * * ``` * * @memberOf IgxCarouselComponent */ slideRemoved: EventEmitter; /** * An event that is emitted after the carousel has been paused. * Provides a reference to the `IgxCarouselComponent` as an event argument. * ```html * * ``` * * @memberOf IgxCarouselComponent */ carouselPaused: EventEmitter; /** * An event that is emitted after the carousel has resumed transitioning between `slides`. * Provides a reference to the `IgxCarouselComponent` as an event argument. * ```html * * ``` * * @memberOf IgxCarouselComponent */ carouselPlaying: EventEmitter; private defaultIndicator; private defaultNextButton; private defaultPrevButton; private _indicators; /** * @hidden * @internal */ stoppedByInteraction: boolean; protected currentItem: IgxSlideComponent; protected previousItem: IgxSlideComponent; private _interval; private _resourceStrings; private lastInterval; private playing; private destroyed; private destroy$; private differ; private incomingSlide; private _hasKeyboardFocusOnIndicators; /** * An accessor that sets the resource strings. * By default it uses EN resources. */ set resourceStrings(value: ICarouselResourceStrings); /** * An accessor that returns the resource strings. */ get resourceStrings(): ICarouselResourceStrings; /** @hidden */ get getIndicatorTemplate(): TemplateRef; /** @hidden */ get getNextButtonTemplate(): TemplateRef; /** @hidden */ get getPrevButtonTemplate(): TemplateRef; /** @hidden */ get indicatorsClass(): { [x: string]: boolean; "igx-carousel-indicators--focused": boolean; }; /** @hidden */ get showIndicators(): boolean; /** @hidden */ get showIndicatorsLabel(): boolean; /** @hidden */ get getCarouselLabel(): string; /** * Returns the total number of `slides` in the carousel. * ```typescript * let slideCount = this.carousel.total; * ``` * * @memberOf IgxCarouselComponent */ get total(): number; /** * The index of the slide being currently shown. * ```typescript * let currentSlideNumber = this.carousel.current; * ``` * * @memberOf IgxCarouselComponent */ get current(): number; /** * Returns a boolean indicating if the carousel is playing. * ```typescript * let isPlaying = this.carousel.isPlaying; * ``` * * @memberOf IgxCarouselComponent */ get isPlaying(): boolean; /** * Returns а boolean indicating if the carousel is destroyed. * ```typescript * let isDestroyed = this.carousel.isDestroyed; * ``` * * @memberOf IgxCarouselComponent */ get isDestroyed(): boolean; /** * Returns a reference to the carousel element in the DOM. * ```typescript * let nativeElement = this.carousel.nativeElement; * ``` * * @memberof IgxCarouselComponent */ get nativeElement(): any; /** * Returns the time `interval` in milliseconds before the slide changes. * ```typescript * let timeInterval = this.carousel.interval; * ``` * * @memberof IgxCarouselComponent */ get interval(): number; /** * Sets the time `interval` in milliseconds before the slide changes. * If not set, the carousel will not change `slides` automatically. * ```html * * ``` * * @memberof IgxCarouselComponent */ set interval(value: number); constructor(cdr: ChangeDetectorRef, element: ElementRef, iterableDiffers: IterableDiffers, animationService: AnimationService, platformUtil: PlatformUtil, dir: IgxDirectionality, document: any); /** @hidden */ onTap(event: any): void; /** @hidden */ onMouseEnter(): void; /** @hidden */ onMouseLeave(): void; /** @hidden */ onPanLeft(event: any): void; /** @hidden */ onPanRight(event: any): void; /** @hidden */ onPanUp(event: any): void; /** @hidden */ onPanDown(event: any): void; /** * @hidden */ onPanEnd(event: any): void; /** @hidden */ ngAfterContentInit(): void; /** @hidden */ ngOnDestroy(): void; /** @hidden */ handleKeydownPrev(event: KeyboardEvent): void; /** @hidden */ handleKeydownNext(event: KeyboardEvent): void; /** @hidden */ handleKeyUp(event: KeyboardEvent): void; /** @hidden */ handleFocusOut(event: FocusEvent): void; /** @hidden */ handleClick(): void; /** @hidden */ handleKeydown(event: KeyboardEvent): void; /** * Returns the slide corresponding to the provided `index` or null. * ```typescript * let slide1 = this.carousel.get(1); * ``` * * @memberOf IgxCarouselComponent */ get(index: number): IgxSlideComponent; /** * Adds a new slide to the carousel. * ```typescript * this.carousel.add(newSlide); * ``` * * @memberOf IgxCarouselComponent */ add(slide: IgxSlideComponent): void; /** * Removes a slide from the carousel. * ```typescript * this.carousel.remove(slide); * ``` * * @memberOf IgxCarouselComponent */ remove(slide: IgxSlideComponent): void; /** * Kicks in a transition for a given slide with a given `direction`. * ```typescript * this.carousel.select(this.carousel.get(2), Direction.NEXT); * ``` * * @memberOf IgxCarouselComponent */ select(slide: IgxSlideComponent, direction?: Direction): void; /** * Transitions to the next slide in the carousel. * ```typescript * this.carousel.next(); * ``` * * @memberOf IgxCarouselComponent */ next(): void; /** * Transitions to the previous slide in the carousel. * ```typescript * this.carousel.prev(); * ``` * * @memberOf IgxCarouselComponent */ prev(): void; /** * Resumes playing of the carousel if in paused state. * No operation otherwise. * ```typescript * this.carousel.play(); * } * ``` * * @memberOf IgxCarouselComponent */ play(): void; /** * Stops slide transitions if the `pause` option is set to `true`. * No operation otherwise. * ```typescript * this.carousel.stop(); * } * ``` * * @memberOf IgxCarouselComponent */ stop(): void; protected getPreviousElement(): HTMLElement; protected getCurrentElement(): HTMLElement; private resetInterval; private restartInterval; /** @hidden */ get nextButtonDisabled(): boolean; /** @hidden */ get prevButtonDisabled(): boolean; private get indicatorsElements(); private getIndicatorsClass; private getNextIndex; private getPrevIndex; private resetSlideStyles; private pan; private unsubscriber; private onSlideActivated; private finishAnimations; private initSlides; private updateSlidesSelection; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; static ngAcceptInputType_loop: unknown; static ngAcceptInputType_pause: unknown; static ngAcceptInputType_navigation: unknown; static ngAcceptInputType_indicators: unknown; static ngAcceptInputType_vertical: unknown; static ngAcceptInputType_gesturesSupport: unknown; } interface ISlideEventArgs extends IBaseEventArgs { carousel: IgxCarouselComponent; slide: IgxSlideComponent; } declare class IgxCarouselIndicatorDirective { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } declare class IgxCarouselNextButtonDirective { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } declare class IgxCarouselPrevButtonDirective { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } declare const IGX_CAROUSEL_DIRECTIVES: readonly [typeof IgxCarouselComponent, typeof IgxSlideComponent, typeof IgxCarouselIndicatorDirective, typeof IgxCarouselNextButtonDirective, typeof IgxCarouselPrevButtonDirective]; interface IChipResourceStrings { igx_chip_remove?: string; igx_chip_select?: string; } declare const ChipResourceStringsEN: IChipResourceStrings; declare const IgxChipTypeVariant: { readonly PRIMARY: "primary"; readonly INFO: "info"; readonly SUCCESS: "success"; readonly WARNING: "warning"; readonly DANGER: "danger"; }; type IgxChipTypeVariant = (typeof IgxChipTypeVariant)[keyof typeof IgxChipTypeVariant]; interface IBaseChipEventArgs extends IBaseEventArgs { originalEvent: IDragBaseEventArgs | IDropBaseEventArgs | KeyboardEvent | MouseEvent | TouchEvent; owner: IgxChipComponent; } interface IChipClickEventArgs extends IBaseChipEventArgs { cancel: boolean; } interface IChipKeyDownEventArgs extends IBaseChipEventArgs { originalEvent: KeyboardEvent; cancel: boolean; } interface IChipEnterDragAreaEventArgs extends IBaseChipEventArgs { dragChip: IgxChipComponent; } interface IChipSelectEventArgs extends IBaseChipEventArgs { cancel: boolean; selected: boolean; } /** * Chip is compact visual component that displays information in an obround. * * @igxModule IgxChipsModule * * @igxTheme igx-chip-theme * * @igxKeywords chip * * @igxGroup display * * @remarks * The Ignite UI Chip can be templated, deleted, and selected. * Multiple chips can be reordered and visually connected to each other. * Chips reside in a container called chips area which is responsible for managing the interactions between the chips. * * @example * ```html * * * * ``` */ declare class IgxChipComponent implements OnInit, OnDestroy { cdr: ChangeDetectorRef; private ref; private renderer; document: any; /** * Sets/gets the variant of the chip. * * @remarks * Allowed values are `primary`, `info`, `success`, `warning`, `danger`. * Providing no/nullish value leaves the chip in its default state. * * @example * ```html * * ``` */ variant?: IgxChipTypeVariant | null; /** * Sets the value of `id` attribute. If not provided it will be automatically generated. * * @example * ```html * * ``` */ id: string; /** * Returns the `role` attribute of the chip. * * @example * ```typescript * let chipRole = this.chip.role; * ``` */ role: string; /** * Sets the value of `tabindex` attribute. If not provided it will use the element's tabindex if set. * * @example * ```html * * ``` */ set tabIndex(value: number); get tabIndex(): number; /** * Stores data related to the chip. * * @example * ```html * * ``` */ data: any; /** * Defines if the `IgxChipComponent` can be dragged in order to change it's position. * By default it is set to false. * * @example * ```html * * ``` */ draggable: boolean; /** * Enables/disables the draggable element animation when the element is released. * By default it's set to true. * * @example * ```html * * ``` */ animateOnRelease: boolean; /** * Enables/disables the hiding of the base element that has been dragged. * By default it's set to true. * * @example * ```html * * ``` */ hideBaseOnDrag: boolean; /** * Defines if the `IgxChipComponent` should render remove button and throw remove events. * By default it is set to false. * * @example * ```html * * ``` */ removable: boolean; /** * Overrides the default icon that the chip applies to the remove button. * * @example * ```html * * delete * ``` */ removeIcon: TemplateRef; /** * Defines if the `IgxChipComponent` can be selected on click or through navigation, * By default it is set to false. * * @example * ```html * * ``` */ selectable: boolean; /** * Overrides the default icon that the chip applies when it is selected. * * @example * ```html * * done_outline * ``` */ selectIcon: TemplateRef; /** * @hidden * @internal */ class: string; /** * Disables the `IgxChipComponent`. When disabled it restricts user interactions * like focusing on click or tab, selection on click or Space, dragging. * By default it is set to false. * * @example * ```html * * ``` */ disabled: boolean; /** * Sets the `IgxChipComponent` selected state. * * @example * ```html * * ``` * * Two-way data binding: * ```html * * ``` */ set selected(newValue: boolean); /** * Returns if the `IgxChipComponent` is selected. * * @example * ```typescript * @ViewChild('myChip') * public chip: IgxChipComponent; * selectedChip(){ * let selectedChip = this.chip.selected; * } * ``` */ get selected(): boolean; /** * @hidden * @internal */ selectedChange: EventEmitter; /** * Sets the `IgxChipComponent` background color. * The `color` property supports string, rgb, hex. * * @example * ```html * * ``` */ set color(newColor: any); /** * Returns the background color of the `IgxChipComponent`. * * @example * ```typescript * @ViewChild('myChip') * public chip: IgxChipComponent; * ngAfterViewInit(){ * let chipColor = this.chip.color; * } * ``` */ get color(): any; /** * An accessor that sets the resource strings. * By default it uses EN resources. */ set resourceStrings(value: IChipResourceStrings); /** * An accessor that returns the resource strings. */ get resourceStrings(): IChipResourceStrings; /** * Emits an event when the `IgxChipComponent` moving starts. * Returns the moving `IgxChipComponent`. * * @example * ```html * * ``` */ moveStart: EventEmitter; /** * Emits an event when the `IgxChipComponent` moving ends. * Returns the moved `IgxChipComponent`. * * @example * ```html * * ``` */ moveEnd: EventEmitter; /** * Emits an event when the `IgxChipComponent` is removed. * Returns the removed `IgxChipComponent`. * * @example * ```html * * ``` */ remove: EventEmitter; /** * Emits an event when the `IgxChipComponent` is clicked. * Returns the clicked `IgxChipComponent`, whether the event should be canceled. * * @example * ```html * * ``` */ chipClick: EventEmitter; /** * Emits event when the `IgxChipComponent` is selected/deselected. * Returns the selected chip reference, whether the event should be canceled, what is the next selection state and * when the event is triggered by interaction `originalEvent` is provided, otherwise `originalEvent` is `null`. * * @example * ```html * * ``` */ selectedChanging: EventEmitter; /** * Emits event when the `IgxChipComponent` is selected/deselected and any related animations and transitions also end. * * @example * ```html * * ``` */ selectedChanged: EventEmitter; /** * Emits an event when the `IgxChipComponent` keyboard navigation is being used. * Returns the focused/selected `IgxChipComponent`, whether the event should be canceled, * if the `alt`, `shift` or `control` key is pressed and the pressed key name. * * @example * ```html * * ``` */ keyDown: EventEmitter; /** * Emits an event when the `IgxChipComponent` has entered the `IgxChipsAreaComponent`. * Returns the target `IgxChipComponent`, the drag `IgxChipComponent`, as well as * the original drop event arguments. * * @example * ```html * * ``` */ dragEnter: EventEmitter; /** * Emits an event when the `IgxChipComponent` has left the `IgxChipsAreaComponent`. * Returns the target `IgxChipComponent`, the drag `IgxChipComponent`, as well as * the original drop event arguments. * * @example * ```html * * ``` */ dragLeave: EventEmitter; /** * Emits an event when the `IgxChipComponent` is over the `IgxChipsAreaComponent`. * Returns the target `IgxChipComponent`, the drag `IgxChipComponent`, as well as * the original drop event arguments. * * @example * ```html * * ``` */ dragOver: EventEmitter; /** * Emits an event when the `IgxChipComponent` has been dropped in the `IgxChipsAreaComponent`. * Returns the target `IgxChipComponent`, the drag `IgxChipComponent`, as well as * the original drop event arguments. * * @example * ```html * * ``` */ dragDrop: EventEmitter; protected defaultClass: string; protected get isPrimary(): boolean; protected get isInfo(): boolean; protected get isSuccess(): boolean; protected get isWarning(): boolean; protected get isDanger(): boolean; /** * Property that contains a reference to the `IgxDragDirective` the `IgxChipComponent` uses for dragging behavior. * * @example * ```html * * ``` * ```typescript * onMoveStart(event: IBaseChipEventArgs){ * let dragDirective = event.owner.dragDirective; * } * ``` */ dragDirective: IgxDragDirective; /** * @hidden * @internal */ chipArea: ElementRef; /** * @hidden * @internal */ defaultRemoveIcon: TemplateRef; /** * @hidden * @internal */ defaultSelectIcon: TemplateRef; /** * @hidden * @internal */ get removeButtonTemplate(): TemplateRef; /** * @hidden * @internal */ get selectIconTemplate(): TemplateRef; /** * @hidden * @internal */ get ghostStyles(): { '--ig-size': string; }; /** @hidden @internal */ get nativeElement(): HTMLElement; /** * @hidden * @internal */ hideBaseElement: boolean; /** * @hidden * @internal */ destroy$: Subject; protected get chipSize(): Size$1; protected _tabIndex: any; protected _selected: boolean; protected _selectedItemClass: string; protected _movedWhileRemoving: boolean; protected computedStyles: any; private _resourceStrings; constructor(cdr: ChangeDetectorRef, ref: ElementRef, renderer: Renderer2, document: any); /** * @hidden * @internal */ keyEvent(event: KeyboardEvent): void; /** * @hidden * @internal */ selectClass(condition: boolean): any; onSelectTransitionDone(event: any): void; /** * @hidden * @internal */ onChipKeyDown(event: KeyboardEvent): void; /** * @hidden * @internal */ onRemoveBtnKeyDown(event: KeyboardEvent): void; onRemoveMouseDown(event: PointerEvent | MouseEvent): void; /** * @hidden * @internal */ onRemoveClick(event: MouseEvent | TouchEvent): void; /** * @hidden * @internal */ onRemoveTouchMove(): void; /** * @hidden * @internal */ onRemoveTouchEnd(event: TouchEvent): void; /** * @hidden * @internal */ onChipDragStart(event: IDragStartEventArgs): void; /** * @hidden * @internal */ onChipDragEnd(): void; /** * @hidden * @internal */ onChipMoveEnd(event: IDragBaseEventArgs): void; /** * @hidden * @internal */ onChipGhostCreate(): void; /** * @hidden * @internal */ onChipGhostDestroy(): void; /** * @hidden * @internal */ onChipDragClicked(event: IDragBaseEventArgs): void; /** * @hidden * @internal */ onChipDragEnterHandler(event: IDropBaseEventArgs): void; /** * @hidden * @internal */ onChipDragLeaveHandler(event: IDropBaseEventArgs): void; /** * @hidden * @internal */ onChipDrop(event: IDropDroppedEventArgs): void; /** * @hidden * @internal */ onChipOverHandler(event: IDropBaseEventArgs): void; protected changeSelection(newValue: boolean, srcEvent?: any): void; ngOnInit(): void; ngOnDestroy(): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; static ngAcceptInputType_draggable: unknown; static ngAcceptInputType_animateOnRelease: unknown; static ngAcceptInputType_hideBaseOnDrag: unknown; static ngAcceptInputType_removable: unknown; static ngAcceptInputType_selectable: unknown; static ngAcceptInputType_disabled: unknown; static ngAcceptInputType_selected: unknown; } interface IBaseChipsAreaEventArgs { originalEvent: IDragBaseEventArgs | IDropBaseEventArgs | KeyboardEvent | MouseEvent | TouchEvent; owner: IgxChipsAreaComponent; } interface IChipsAreaReorderEventArgs extends IBaseChipsAreaEventArgs { chipsArray: IgxChipComponent[]; } interface IChipsAreaSelectEventArgs extends IBaseChipsAreaEventArgs { newSelection: IgxChipComponent[]; } /** * The chip area allows you to perform more complex scenarios with chips that require interaction, * like dragging, selection, navigation, etc. * * @igxModule IgxChipsModule * * @igxTheme igx-chip-theme * * @igxKeywords chip area, chip * * @igxGroup display * * @example * ```html * * * {{chip.text}} * * * ``` */ declare class IgxChipsAreaComponent implements DoCheck, AfterViewInit, OnDestroy { cdr: ChangeDetectorRef; element: ElementRef; private _iterableDiffers; /** * Returns the `role` attribute of the chips area. * * @example * ```typescript * let chipsAreaRole = this.chipsArea.role; * ``` */ role: string; /** * Returns the `aria-label` attribute of the chips area. * * @example * ```typescript * let ariaLabel = this.chipsArea.ariaLabel; * ``` * */ ariaLabel: string; /** * Sets the width of the `IgxChipsAreaComponent`. * * @example * ```html * * ``` */ width: number; /** @hidden @internal */ get _widthToRem(): number; /** * Sets the height of the `IgxChipsAreaComponent`. * * @example * ```html * * ``` */ height: number; /** @hidden @internal */ get _heightToRem(): number; /** * Emits an event when `IgxChipComponent`s in the `IgxChipsAreaComponent` should be reordered. * Returns an array of `IgxChipComponent`s. * * @example * ```html * * ``` */ reorder: EventEmitter; /** * Emits an event when an `IgxChipComponent` in the `IgxChipsAreaComponent` is selected/deselected. * Fired after the chips area is initialized if there are initially selected chips as well. * Returns an array of selected `IgxChipComponent`s and the `IgxChipAreaComponent`. * * @example * ```html * * ``` */ selectionChange: EventEmitter; /** * Emits an event when an `IgxChipComponent` in the `IgxChipsAreaComponent` is moved. * * @example * ```html * * ``` */ moveStart: EventEmitter; /** * Emits an event after an `IgxChipComponent` in the `IgxChipsAreaComponent` is moved. * * @example * ```html * * ``` */ moveEnd: EventEmitter; /** * Holds the `IgxChipComponent` in the `IgxChipsAreaComponent`. * * @example * ```typescript * ngAfterViewInit(){ * let chips = this.chipsArea.chipsList; * } * ``` */ chipsList: QueryList; protected destroy$: Subject; private hostClass; private modifiedChipsArray; private _differ; constructor(cdr: ChangeDetectorRef, element: ElementRef, _iterableDiffers: IterableDiffers); /** * @hidden * @internal */ ngAfterViewInit(): void; /** * @hidden * @internal */ ngDoCheck(): void; /** * @hidden * @internal */ ngOnDestroy(): void; /** * @hidden * @internal */ protected onChipKeyDown(event: IChipKeyDownEventArgs): void; /** * @hidden * @internal */ protected onChipMoveStart(event: IBaseChipEventArgs): void; /** * @hidden * @internal */ protected onChipMoveEnd(event: IBaseChipEventArgs): void; /** * @hidden * @internal */ protected onChipDragEnter(event: IChipEnterDragAreaEventArgs): void; /** * @hidden * @internal */ protected positionChipAtIndex(chipIndex: any, targetIndex: any, shiftRestLeft: any, originalEvent: any): boolean; /** * @hidden * @internal */ protected onChipSelectionChange(event: IChipSelectEventArgs): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } declare const IGX_CHIPS_DIRECTIVES: readonly [typeof IgxChipsAreaComponent, typeof IgxChipComponent, typeof IgxPrefixDirective, typeof IgxSuffixDirective]; /** * @hidden */ declare class IgxComboAPIService { disableTransitions: boolean; protected combo: IgxComboBase; get valueKey(): string; get item_focusable(): boolean; get isRemote(): boolean; get comboID(): string; register(combo: IgxComboBase): void; clear(): void; add_custom_item(): void; set_selected_item(itemID: any, event?: Event): void; is_item_selected(itemID: any): boolean; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵprov: i0.ɵɵInjectableDeclaration; } interface IComboResourceStrings { igx_combo_empty_message?: string; igx_combo_filter_search_placeholder?: string; igx_combo_addCustomValues_placeholder?: string; igx_combo_clearItems_placeholder?: string; } declare const ComboResourceStringsEN: IComboResourceStrings; /** @hidden @internal TODO: Evaluate */ interface IgxComboBase { id: string; data: any[] | null; valueKey: string; groupKey: string; isRemote: boolean; filteredData: any[] | null; totalItemCount: number; itemsMaxHeight: number; itemHeight: number; searchValue: string; searchInput: ElementRef; comboInput: ElementRef; opened: EventEmitter; opening: EventEmitter; closing: EventEmitter; closed: EventEmitter; focusSearchInput(opening?: boolean): void; triggerCheck(): void; addItemToCollection(): void; isAddButtonVisible(): boolean; handleInputChange(event?: string): void; isItemSelected(itemID: any): boolean; select(item: any): void; select(itemIDs: any[], clearSelection?: boolean, event?: Event): void; deselect(...args: [] | [itemIDs: any[], event?: Event]): void; setActiveDescendant(): void; } /** The filtering criteria to be applied on data search */ interface IComboFilteringOptions { /** Defines filtering case-sensitivity */ caseSensitive?: boolean; /** * Defines whether filtering is allowed * @deprecated in version 18.2.0. Use the `disableFiltering` property instead. */ filterable?: boolean; /** Defines optional key to filter against complex list items. Default to displayKey if provided.*/ filteringKey?: string; } declare abstract class IgxComboBaseDirective implements IgxComboBase, AfterViewChecked, OnInit, AfterViewInit, AfterContentChecked, OnDestroy, ControlValueAccessor { protected elementRef: ElementRef; protected cdr: ChangeDetectorRef; protected selectionService: IgxSelectionAPIService; protected comboAPI: IgxComboAPIService; document: Document; protected _inputGroupType: IgxInputGroupType; protected _injector: Injector; protected _iconService?: IgxIconService; /** * Defines whether the caseSensitive icon should be shown in the search input * * ```typescript * // get * let myComboShowSearchCaseIcon = this.combo.showSearchCaseIcon; * ``` * * ```html * * * ``` */ showSearchCaseIcon: boolean; /** * Set custom overlay settings that control how the combo's list of items is displayed. * Set: * ```html * * ``` * * ```typescript * const customSettings = { positionStrategy: { settings: { target: myTarget } } }; * combo.overlaySettings = customSettings; * ``` * Get any custom overlay settings used by the combo: * ```typescript * const comboOverlaySettings: OverlaySettings = myCombo.overlaySettings; * ``` */ overlaySettings: OverlaySettings; /** * Gets/gets combo id. * * ```typescript * // get * let id = this.combo.id; * ``` * * ```html * * * ``` */ get id(): string; set id(value: string); /** * Sets the style width of the element * * ```typescript * // get * let myComboWidth = this.combo.width; * ``` * * ```html * * * ``` */ width: string; /** * Controls whether custom values can be added to the collection * * ```typescript * // get * let comboAllowsCustomValues = this.combo.allowCustomValues; * ``` * * ```html * * * ``` */ allowCustomValues: boolean; /** * Configures the drop down list height * * ```typescript * // get * let myComboItemsMaxHeight = this.combo.itemsMaxHeight; * ``` * * ```html * * * ``` */ get itemsMaxHeight(): number; set itemsMaxHeight(val: number); /** @hidden */ get itemsMaxHeightInRem(): number; /** * Configures the drop down list item height * * ```typescript * // get * let myComboItemHeight = this.combo.itemHeight; * ``` * * ```html * * * ``` */ get itemHeight(): number; set itemHeight(val: number); /** * Configures the drop down list width * * ```typescript * // get * let myComboItemsWidth = this.combo.itemsWidth; * ``` * * ```html * * * ``` */ itemsWidth: string; /** * Defines the placeholder value for the combo value field * * ```typescript * // get * let myComboPlaceholder = this.combo.placeholder; * ``` * * ```html * * * ``` */ placeholder: string; /** * Combo data source. * * ```html * * * ``` */ get data(): any[] | null; set data(val: any[] | null); /** * Determines which column in the data source is used to determine the value. * * ```typescript * // get * let myComboValueKey = this.combo.valueKey; * ``` * * ```html * * * ``` */ valueKey: string; set displayKey(val: string); /** * Determines which column in the data source is used to determine the display value. * * ```typescript * // get * let myComboDisplayKey = this.combo.displayKey; * * // set * this.combo.displayKey = 'val'; * * ``` * * ```html * * * ``` */ get displayKey(): string; /** * The item property by which items should be grouped inside the items list. Not usable if data is not of type Object[]. * * ```html * * * ``` */ set groupKey(val: string); /** * The item property by which items should be grouped inside the items list. Not usable if data is not of type Object[]. * * ```typescript * // get * let currentGroupKey = this.combo.groupKey; * ``` */ get groupKey(): string; /** * Sets groups sorting order. * * @example * ```html * * ``` * ```typescript * public groupSortingDirection = SortingDirection.Asc; * ``` */ get groupSortingDirection(): SortingDirection; set groupSortingDirection(val: SortingDirection); /** * Gets/Sets the custom filtering function of the combo. * * @example * ```html * * ``` */ filterFunction: (collection: any[], searchValue: any, filteringOptions: IComboFilteringOptions) => any[]; /** * Sets aria-labelledby attribute value. * ```html * * ``` */ ariaLabelledBy: string; /** @hidden @internal */ cssClass: string; /** * Disables the combo. The default is `false`. * ```html * * ``` */ disabled: boolean; /** * Sets the visual combo type. * The allowed values are `line`, `box`, `border` and `search`. The default is `box`. * ```html * * ``` */ get type(): IgxInputGroupType; set type(val: IgxInputGroupType); /** * Gets/Sets the resource strings. * * @remarks * By default it uses EN resources. */ get resourceStrings(): IComboResourceStrings; set resourceStrings(value: IComboResourceStrings); /** * Emitted before the dropdown is opened * * ```html * * ``` */ opening: EventEmitter; /** * Emitted after the dropdown is opened * * ```html * * ``` */ opened: EventEmitter; /** * Emitted before the dropdown is closed * * ```html * * ``` */ closing: EventEmitter; /** * Emitted after the dropdown is closed * * ```html * * ``` */ closed: EventEmitter; /** * Emitted when an item is being added to the data collection * * ```html * * ``` */ addition: EventEmitter; /** * Emitted when the value of the search input changes (e.g. typing, pasting, clear, etc.) * * ```html * * ``` */ searchInputUpdate: EventEmitter; /** * Emitted when new chunk of data is loaded from the virtualization * * ```html * * ``` */ dataPreLoad: EventEmitter; /** * The custom template, if any, that should be used when rendering ITEMS in the combo list * * ```typescript * // Set in typescript * const myCustomTemplate: TemplateRef = myComponent.customTemplate; * myComponent.combo.itemTemplate = myCustomTemplate; * ``` * ```html * * * ... * *
*
{{ item[key] }}
*
{{ item.cost }}
*
*
*
* ``` */ itemTemplate: TemplateRef; /** * The custom template, if any, that should be used when rendering the HEADER for the combo items list * * ```typescript * // Set in typescript * const myCustomTemplate: TemplateRef = myComponent.customTemplate; * myComponent.combo.headerTemplate = myCustomTemplate; * ``` * ```html * * * ... * *
* This is a custom header *
*
*
* ``` */ headerTemplate: TemplateRef; /** * The custom template, if any, that should be used when rendering the FOOTER for the combo items list * * ```typescript * // Set in typescript * const myCustomTemplate: TemplateRef = myComponent.customTemplate; * myComponent.combo.footerTemplate = myCustomTemplate; * ``` * ```html * * * ... * * * * * ``` */ footerTemplate: TemplateRef; /** * The custom template, if any, that should be used when rendering HEADER ITEMS for groups in the combo list * * ```typescript * // Set in typescript * const myCustomTemplate: TemplateRef = myComponent.customTemplate; * myComponent.combo.headerItemTemplate = myCustomTemplate; * ``` * ```html * * * ... * *
Group header for {{ item[key] }}
*
*
* ``` */ headerItemTemplate: TemplateRef; /** * The custom template, if any, that should be used when rendering the ADD BUTTON in the combo drop down * * ```typescript * // Set in typescript * const myCustomTemplate: TemplateRef = myComponent.customTemplate; * myComponent.combo.addItemTemplate = myCustomTemplate; * ``` * ```html * * * ... * * * * * ``` */ addItemTemplate: TemplateRef; /** * The custom template, if any, that should be used when rendering the ADD BUTTON in the combo drop down * * ```typescript * // Set in typescript * const myCustomTemplate: TemplateRef = myComponent.customTemplate; * myComponent.combo.emptyTemplate = myCustomTemplate; * ``` * ```html * * * ... * *
* There are no items to display *
*
*
* ``` */ emptyTemplate: TemplateRef; /** * The custom template, if any, that should be used when rendering the combo TOGGLE(open/close) button * * ```typescript * // Set in typescript * const myCustomTemplate: TemplateRef = myComponent.customTemplate; * myComponent.combo.toggleIconTemplate = myCustomTemplate; * ``` * ```html * * * ... * * {{ collapsed ? 'remove_circle' : 'remove_circle_outline'}} * * * ``` */ toggleIconTemplate: TemplateRef; /** * The custom template, if any, that should be used when rendering the combo CLEAR button * * ```typescript * // Set in typescript * const myCustomTemplate: TemplateRef = myComponent.customTemplate; * myComponent.combo.clearIconTemplate = myCustomTemplate; * ``` * ```html * * * ... * * clear * * * ``` */ clearIconTemplate: TemplateRef; /** @hidden @internal */ label: IgxLabelDirective; /** @hidden @internal */ inputGroup: IgxInputGroupComponent; /** @hidden @internal */ comboInput: IgxInputDirective; /** @hidden @internal */ searchInput: ElementRef; /** @hidden @internal */ virtualScrollContainer: IgxForOfDirective; protected virtDir: IgxForOfDirective; protected dropdownContainer: ElementRef; protected primitiveTemplate: TemplateRef; protected complexTemplate: TemplateRef; protected prefixes: QueryList; protected suffixes: QueryList; /** @hidden @internal */ get searchValue(): string; set searchValue(val: string); /** @hidden @internal */ get isRemote(): boolean; /** @hidden @internal */ get dataType(): string; /** * Gets if control is valid, when used in a form * * ```typescript * // get * let valid = this.combo.valid; * ``` */ get valid(): IgxInputState; /** * Sets if control is valid, when used in a form * * ```typescript * // set * this.combo.valid = IgxInputState.INVALID; * ``` */ set valid(valid: IgxInputState); /** * The value of the combo * * ```typescript * // get * let comboValue = this.combo.value; * ``` */ get value(): any[]; /** * The text displayed in the combo input * * ```typescript * // get * let comboDisplayValue = this.combo.displayValue; * ``` */ get displayValue(): string; /** * Defines the current state of the virtualized data. It contains `startIndex` and `chunkSize` * * ```typescript * // get * let state = this.combo.virtualizationState; * ``` */ get virtualizationState(): IForOfState; /** * Sets the current state of the virtualized data. * * ```typescript * // set * this.combo.virtualizationState(state); * ``` */ set virtualizationState(state: IForOfState); /** * Gets drop down state. * * ```typescript * let state = this.combo.collapsed; * ``` */ get collapsed(): boolean; /** * Gets total count of the virtual data items, when using remote service. * * ```typescript * // get * let count = this.combo.totalItemCount; * ``` */ get totalItemCount(): number; /** * Sets total count of the virtual data items, when using remote service. * * ```typescript * // set * this.combo.totalItemCount(remoteService.count); * ``` */ set totalItemCount(count: number); /** @hidden @internal */ get template(): TemplateRef; /** @hidden @internal */ customValueFlag: boolean; /** @hidden @internal */ filterValue: string; /** @hidden @internal */ defaultFallbackGroup: string; /** @hidden @internal */ activeDescendant: string; /** * Configures the way combo items will be filtered. * * ```typescript * // get * let myFilteringOptions = this.combo.filteringOptions; * ``` * * ```html * * * ``` */ get filteringOptions(): IComboFilteringOptions; set filteringOptions(value: IComboFilteringOptions); protected containerSize: any; protected itemSize: any; protected _data: any[]; protected _value: any[]; protected _displayValue: string; protected _groupKey: string; protected _searchValue: string; protected _filteredData: any[]; protected _displayKey: string; protected _remoteSelection: {}; protected _resourceStrings: igniteui_angular.IResourceStrings; protected _valid: IgxInputState; protected ngControl: NgControl; protected destroy$: Subject; protected _onTouchedCallback: () => void; protected _onChangeCallback: (_: any) => void; protected compareCollator: Intl.Collator; protected computedStyles: any; private _id; private _type; private _dataType; private _itemHeight; private _itemsMaxHeight; private _overlaySettings; private _groupSortingDirection; private _filteringOptions; private _defaultFilteringOptions; private itemsInContainer; abstract dropdown: IgxComboDropDownComponent; abstract selectionChanging: EventEmitter; constructor(elementRef: ElementRef, cdr: ChangeDetectorRef, selectionService: IgxSelectionAPIService, comboAPI: IgxComboAPIService, document: Document, _inputGroupType: IgxInputGroupType, _injector: Injector, _iconService?: IgxIconService); ngAfterViewChecked(): void; /** @hidden @internal */ ngAfterContentChecked(): void; /** @hidden @internal */ ngOnInit(): void; /** @hidden @internal */ ngAfterViewInit(): void; /** @hidden @internal */ ngOnDestroy(): void; /** * A method that opens/closes the combo. * * ```html * * * ``` */ toggle(): void; /** * A method that opens the combo. * * ```html * * * ``` */ open(): void; /** * A method that closes the combo. * * ```html * * * ``` */ close(): void; /** * Triggers change detection on the combo view */ triggerCheck(): void; /** * Get current selection state * * @returns Array of selected items * ```typescript * let mySelection = this.combo.selection; * ``` */ get selection(): any[]; /** * Returns if the specified itemID is selected * * @hidden * @internal */ isItemSelected(item: any): boolean; /** @hidden @internal */ get toggleIcon(): string; /** @hidden @internal */ addItemToCollection(): void; /** @hidden @internal */ isAddButtonVisible(): boolean; /** @hidden @internal */ handleInputChange(event?: any): void; /** * Event handlers * * @hidden * @internal */ handleOpening(e: IBaseCancelableBrowserEventArgs): void; /** @hidden @internal */ handleClosing(e: IBaseCancelableBrowserEventArgs): void; /** @hidden @internal */ handleClosed(): void; /** @hidden @internal */ handleKeyDown(event: KeyboardEvent): void; /** @hidden @internal */ registerOnChange(fn: any): void; /** @hidden @internal */ registerOnTouched(fn: any): void; /** @hidden @internal */ setDisabledState(isDisabled: boolean): void; /** @hidden @internal */ onClick(event: Event): void; /** @hidden @internal */ onBlur(): void; /** @hidden @internal */ setActiveDescendant(): void; /** @hidden @internal */ toggleCaseSensitive(): void; protected onStatusChanged: () => void; private updateValidity; private get isTouchedOrDirty(); private get hasValidators(); /** if there is a valueKey - map the keys to data items, else - just return the keys */ protected convertKeysToItems(keys: any[]): any[]; protected checkMatch(): void; protected findMatch: (element: any) => boolean; protected manageRequiredAsterisk(): void; /** Contains key-value pairs of the selected valueKeys and their resp. displayKeys */ protected registerRemoteEntries(ids: any[], add?: boolean): void; /** * For `id: any[]` returns a mapped `{ [combo.valueKey]: any, [combo.displayKey]: any }[]` */ protected getValueDisplayPairs(ids: any[]): { [x: string]: any; }[]; protected getRemoteSelection(newSelection: any[], oldSelection: any[]): string; protected get required(): boolean; abstract get filteredData(): any[] | null; abstract set filteredData(val: any[] | null); abstract handleOpened(): any; abstract onArrowDown(event: Event): any; abstract focusSearchInput(opening?: boolean): any; abstract select(newItem: any): void; abstract select(newItems: Array | any, clearCurrentSelection?: boolean, event?: Event): void; abstract deselect(...args: [] | [items: Array, event?: Event]): void; abstract writeValue(value: any): void; protected abstract setSelection(newSelection: Set, event?: Event): void; protected abstract createDisplayText(newSelection: any[], oldSelection: any[]): any; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; static ngAcceptInputType_showSearchCaseIcon: unknown; static ngAcceptInputType_allowCustomValues: unknown; static ngAcceptInputType_disabled: unknown; } /** * The `` is a container intended for row items in * a `` container. */ declare class IgxDropDownItemComponent extends IgxDropDownItemBaseDirective { /** * Sets/gets if the given item is focused * ```typescript * let mySelectedItem = this.dropdown.selectedItem; * let isMyItemFocused = mySelectedItem.focused; * ``` */ get focused(): boolean; /** * Sets/gets if the given item is focused * ```typescript * let mySelectedItem = this.dropdown.selectedItem; * let isMyItemFocused = mySelectedItem.focused; * ``` */ set focused(value: boolean); /** * Sets/Gets if the item is the currently selected one in the dropdown * * ```typescript * let mySelectedItem = this.dropdown.selectedItem; * let isMyItemSelected = mySelectedItem.selected; // true * ``` * * Two-way data binding * ```html * * ``` */ get selected(): boolean; /** * Sets/Gets if the item is the currently selected one in the dropdown * */ set selected(value: boolean); /** * @hidden @internal */ get setTabIndex(): number; clicked(event: any): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** @hidden */ declare class IgxComboItemComponent extends IgxDropDownItemComponent { protected comboAPI: IgxComboAPIService; /** * Gets the height of a list item * * @hidden */ itemHeight: string | number; /** @hidden @internal */ get _itemHeightToRem(): number; get ariaLabel(): string; /** @hidden @internal */ singleMode: boolean; /** * @hidden */ get itemID(): any; /** * @hidden */ get comboID(): string; /** * @hidden * @internal */ get disableTransitions(): boolean; constructor(comboAPI: IgxComboAPIService, dropDown: IDropDownBase, elementRef: ElementRef, selection: IgxSelectionAPIService); /** * @hidden */ get selected(): boolean; set selected(value: boolean); /** * @hidden */ isVisible(direction: Navigate): boolean; clicked(event: any): void; /** * @hidden * @internal * The event that is prevented is the click on the checkbox label element. * That is the only visible element that a user can interact with. * The click propagates to the host and the preventDefault is to stop it from * switching focus to the input it's base on. * The toggle happens in an internal handler in the drop-down on the next task queue cycle. */ disableCheck(event: MouseEvent): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; static ngAcceptInputType_singleMode: unknown; } /** @hidden */ declare class IgxComboDropDownComponent extends IgxDropDownComponent implements IDropDownBase, OnDestroy, AfterViewInit { combo: IgxComboBase; protected comboAPI: IgxComboAPIService; /** @hidden @internal */ singleMode: boolean; /** * @hidden * @internal */ children: QueryList; /** @hidden @internal */ get scrollContainer(): HTMLElement; protected get isScrolledToLast(): boolean; protected get lastVisibleIndex(): number; protected get sortedChildren(): IgxDropDownItemBaseDirective[]; /** * Get all non-header items * * ```typescript * let myDropDownItems = this.dropdown.items; * ``` */ get items(): IgxComboItemComponent[]; constructor(elementRef: ElementRef, cdr: ChangeDetectorRef, document: any, selection: IgxSelectionAPIService, combo: IgxComboBase, comboAPI: IgxComboAPIService); /** * @hidden @internal */ onFocus(): void; /** * @hidden @internal */ onBlur(_evt?: any): void; /** * @hidden @internal */ onToggleOpened(): void; /** * @hidden */ navigateFirst(): void; /** * @hidden */ navigatePrev(): void; /** * @hidden */ navigateNext(): void; /** * @hidden @internal */ selectItem(item: IgxDropDownItemBaseDirective): void; /** * @hidden @internal */ updateScrollPosition(): void; /** * @hidden @internal */ onItemActionKey(key: DropDownActionKey): void; ngAfterViewInit(): void; /** * @hidden @internal */ ngOnDestroy(): void; protected scrollToHiddenItem(_newItem: any): void; protected scrollHandler: () => void; private handleEnter; private handleSpace; private isAddItemFocused; private focusAddItemButton; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; static ngAcceptInputType_singleMode: unknown; } /** Event emitted when an igx-combo's selection is changing */ interface IComboSelectionChangingEventArgs extends IBaseCancelableEventArgs { /** An array containing the values that are currently selected */ oldValue: any[]; /** An array containing the values that will be selected after this event */ newValue: any[]; /** An array containing the items that are currently selected */ oldSelection: any[]; /** An array containing the items that will be selected after this event */ newSelection: any[]; /** An array containing the items that will be added to the selection (if any) */ added: any[]; /** An array containing the items that will be removed from the selection (if any) */ removed: any[]; /** The text that will be displayed in the combo text box */ displayText: string; /** The user interaction that triggered the selection change */ event?: Event; } /** Event emitted when the igx-combo's search input changes */ interface IComboSearchInputEventArgs extends IBaseCancelableEventArgs { /** The text that has been typed into the search input */ searchText: string; } interface IComboItemAdditionEvent extends IBaseEventArgs, CancelableEventArgs { oldCollection: any[]; addedItem: any; newCollection: any[]; } /** * Represents a drop-down list that provides editable functionalities, allowing users to choose an option from a predefined list. * * @igxModule IgxComboModule * @igxTheme igx-combo-theme * @igxKeywords combobox, combo selection * @igxGroup Grids & Lists * * @remarks * It provides the ability to filter items as well as perform selection with the provided data. * Additionally, it exposes keyboard navigation and custom styling capabilities. * @example * ```html * * * ``` */ declare class IgxComboComponent extends IgxComboBaseDirective implements AfterViewInit, ControlValueAccessor, OnInit, OnDestroy, DoCheck, EditorProvider { /** * Whether the combo's search box should be focused after the dropdown is opened. * When `false`, the combo's list item container will be focused instead */ autoFocusSearch: boolean; /** * Enables/disables filtering in the list. The default is `false`. */ get disableFiltering(): boolean; set disableFiltering(value: boolean); /** * Defines the placeholder value for the combo dropdown search field * * @deprecated in version 18.2.0. Replaced with values in the localization resource strings. * * ```typescript * // get * let myComboSearchPlaceholder = this.combo.searchPlaceholder; * ``` * * ```html * * * ``` */ searchPlaceholder: string; /** * Emitted when item selection is changing, before the selection completes * * ```html * * ``` */ selectionChanging: EventEmitter; /** @hidden @internal */ dropdown: IgxComboDropDownComponent; /** @hidden @internal */ get filteredData(): any[] | null; /** @hidden @internal */ set filteredData(val: any[] | null); protected _prevInputValue: string; private _displayText; private _disableFiltering; constructor(elementRef: ElementRef, cdr: ChangeDetectorRef, selectionService: IgxSelectionAPIService, comboAPI: IgxComboAPIService, document: any, _inputGroupType: IgxInputGroupType, _injector: Injector, _iconService?: IgxIconService); onArrowDown(event: Event): void; /** @hidden @internal */ get displaySearchInput(): boolean; /** * @hidden @internal */ handleKeyUp(event: KeyboardEvent): void; /** * @hidden @internal */ handleSelectAll(evt: any): void; /** * @hidden @internal */ writeValue(value: any[]): void; /** @hidden @internal */ ngDoCheck(): void; /** * @hidden */ getEditElement(): HTMLElement; /** * @hidden @internal */ get context(): any; /** * @hidden @internal */ handleClearItems(event: Event): void; /** * Select defined items * * @param newItems new items to be selected * @param clearCurrentSelection if true clear previous selected items * ```typescript * this.combo.select(["New York", "New Jersey"]); * ``` */ select(newItems: Array, clearCurrentSelection?: boolean, event?: Event): void; /** * Deselect defined items * * @param items items to deselected * ```typescript * this.combo.deselect(["New York", "New Jersey"]); * ``` */ deselect(items: Array, event?: Event): void; /** * Select all (filtered) items * * @param ignoreFilter if set to true, selects all items, otherwise selects only the filtered ones. * ```typescript * this.combo.selectAllItems(); * ``` */ selectAllItems(ignoreFilter?: boolean, event?: Event): void; /** * Deselect all (filtered) items * * @param ignoreFilter if set to true, deselects all items, otherwise deselects only the filtered ones. * ```typescript * this.combo.deselectAllItems(); * ``` */ deselectAllItems(ignoreFilter?: boolean, event?: Event): void; /** * Selects/Deselects a single item * * @param itemID the itemID of the specific item * @param select If the item should be selected (true) or deselected (false) * * Without specified valueKey; * ```typescript * this.combo.valueKey = null; * const items: { field: string, region: string}[] = data; * this.combo.setSelectedItem(items[0], true); * ``` * With specified valueKey; * ```typescript * this.combo.valueKey = 'field'; * const items: { field: string, region: string}[] = data; * this.combo.setSelectedItem('Connecticut', true); * ``` */ setSelectedItem(itemID: any, select?: boolean, event?: Event): void; /** @hidden @internal */ handleOpened(): void; /** @hidden @internal */ focusSearchInput(opening?: boolean): void; protected setSelection(selection: Set, event?: Event): void; protected createDisplayText(newSelection: any[], oldSelection: any[]): string; protected getSearchPlaceholderText(): string; /** Returns a string that should be populated in the combo's text box */ private concatDisplayText; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; static ngAcceptInputType_autoFocusSearch: unknown; static ngAcceptInputType_disableFiltering: unknown; } /** * Allows a custom element to be added at the beginning of the combo list. * * @igxModule IgxComboModule * @igxTheme igx-combo-theme * @igxKeywords combobox, combo selection * @igxGroup Grids & Lists * * @example * * *
Custom header
* *
*
*/ declare class IgxComboHeaderDirective { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * Allows a custom element to be added at the end of the combo list. * * @igxModule IgxComboModule * @igxTheme igx-combo-theme * @igxKeywords combobox, combo selection * @igxGroup Grids & Lists * * @example * * * * * * */ declare class IgxComboFooterDirective { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * Allows the combo's items to be modified with a custom template * * @igxModule IgxComboModule * @igxTheme igx-combo-theme * @igxKeywords combobox, combo selection * @igxGroup Grids & Lists * * @example * * *
* State: {{ display[key] }} * Region: {{ display.region }} *
*
*
*/ declare class IgxComboItemDirective { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * Defines the custom template that will be displayed when the combo's list is empty * * @igxModule IgxComboModule * @igxTheme igx-combo-theme * @igxKeywords combobox, combo selection * @igxGroup Grids & Lists * * @example * * *
* There are no items to display *
*
*
*/ declare class IgxComboEmptyDirective { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * Defines the custom template that will be used when rendering header items for groups in the combo's list * * @igxModule IgxComboModule * @igxTheme igx-combo-theme * @igxKeywords combobox, combo selection * @igxGroup Grids & Lists * * @example * * *
Group header for {{ item[key] }}
*
*
*/ declare class IgxComboHeaderItemDirective { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * Defines the custom template that will be used to display the `ADD` button * * @remarks To show the `ADD` button, the `allowCustomValues` option must be enabled * * @igxModule IgxComboModule * @igxTheme igx-combo-theme * @igxKeywords combobox, combo selection * @igxGroup Grids & Lists * * @example * * * * * */ declare class IgxComboAddItemDirective { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * The custom template that will be used when rendering the combo's toggle button * * @igxModule IgxComboModule * @igxTheme igx-combo-theme * @igxKeywords combobox, combo selection * @igxGroup Grids & Lists * * @example * * * {{ collapsed ? 'remove_circle' : 'remove_circle_outline'}} * * */ declare class IgxComboToggleIconDirective { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * Defines the custom template that will be used when rendering the combo's clear icon * * @igxModule IgxComboModule * @igxTheme igx-combo-theme * @igxKeywords combobox, combo selection * @igxGroup Grids & Lists * * @example * * * clear * * */ declare class IgxComboClearIconDirective { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * Combo filter function which does not distinguish between accented letters and their base letters. * For example, when filtering for "resume", this function will match both "resume" and "résumé". * * @example * ```html * * ``` */ declare function comboIgnoreDiacriticsFilter(collection: T[], searchValue: string, filteringOptions: IComboFilteringOptions): T[]; declare const IGX_COMBO_DIRECTIVES: readonly [typeof IgxComboComponent, typeof IgxComboAddItemDirective, typeof IgxComboClearIconDirective, typeof IgxComboEmptyDirective, typeof IgxComboFooterDirective, typeof IgxComboHeaderDirective, typeof IgxComboHeaderItemDirective, typeof IgxComboItemDirective, typeof IgxComboToggleIconDirective, typeof IgxLabelDirective, typeof IgxPrefixDirective, typeof IgxSuffixDirective, typeof IgxHintDirective]; /** * @hidden */ declare class IgxComboAddItemComponent extends IgxComboItemComponent { get isDropDownItem(): boolean; get selected(): boolean; set selected(value: boolean); clicked(event?: any): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** Emitted when an igx-simple-combo's selection is changing. */ interface ISimpleComboSelectionChangingEventArgs extends CancelableEventArgs, IBaseEventArgs { /** An object which represents the value that is currently selected */ oldValue: any; /** An object which represents the value that will be selected after this event */ newValue: any; /** An object which represents the item that is currently selected */ oldSelection: any; /** An object which represents the item that will be selected after this event */ newSelection: any; /** The text that will be displayed in the combo text box */ displayText: string; } /** * Represents a drop-down list that provides filtering functionality, allowing users to choose a single option from a predefined list. * * @igxModule IgxSimpleComboModule * @igxTheme igx-combo-theme * @igxKeywords combobox, single combo selection * @igxGroup Grids & Lists * * @remarks * It provides the ability to filter items as well as perform single selection on the provided data. * Additionally, it exposes keyboard navigation and custom styling capabilities. * @example * ```html * * * ``` */ declare class IgxSimpleComboComponent extends IgxComboBaseDirective implements ControlValueAccessor, AfterViewInit, DoCheck { private platformUtil; private formGroupDirective?; /** @hidden @internal */ dropdown: IgxComboDropDownComponent; /** @hidden @internal */ addItem: IgxComboAddItemComponent; /** * Emitted when item selection is changing, before the selection completes * * ```html * * ``` */ selectionChanging: EventEmitter; private textSelection; get value(): any; /** * Get current selection state * * @returns The selected item, if any * ```typescript * let mySelection = this.combo.selection; * ``` */ get selection(): any; /** @hidden @internal */ composing: boolean; private _updateInput; private _collapsing; /** @hidden @internal */ get filteredData(): any[] | null; /** @hidden @internal */ set filteredData(val: any[] | null); /** @hidden @internal */ get searchValue(): string; set searchValue(val: string); private get selectedItem(); protected get hasSelectedItem(): boolean; constructor(elementRef: ElementRef, cdr: ChangeDetectorRef, selectionService: IgxSelectionAPIService, comboAPI: IgxComboAPIService, platformUtil: PlatformUtil, document: any, _inputGroupType: IgxInputGroupType, _injector: Injector, _iconService?: IgxIconService, formGroupDirective?: FormGroupDirective); /** @hidden @internal */ onArrowDown(event: Event): void; /** * Select a defined item * * @param item the item to be selected * ```typescript * this.combo.select("New York"); * ``` */ select(item: any): void; /** * Deselect the currently selected item * * @param item the items to be deselected * ```typescript * this.combo.deselect("New York"); * ``` */ deselect(): void; /** @hidden @internal */ writeValue(value: any): void; /** @hidden @internal */ ngAfterViewInit(): void; /** @hidden @internal */ ngDoCheck(): void; /** @hidden @internal */ handleInputChange(event?: any): void; /** @hidden @internal */ handleInputClick(): void; /** @hidden @internal */ handleKeyDown(event: KeyboardEvent): void; /** @hidden @internal */ handleKeyUp(event: KeyboardEvent): void; /** @hidden @internal */ handleItemKeyDown(event: KeyboardEvent): void; /** @hidden @internal */ handleItemClick(): void; /** @hidden @internal */ onBlur(): void; /** @hidden @internal */ getEditElement(): HTMLElement; /** @hidden @internal */ handleClear(event: Event): void; /** @hidden @internal */ handleOpened(): void; /** @hidden @internal */ handleClosing(e: IBaseCancelableBrowserEventArgs): void; /** @hidden @internal */ focusSearchInput(opening?: boolean): void; /** @hidden @internal */ onClick(event: Event): void; protected findAllMatches: (element: any) => boolean; protected setSelection(newSelection: any): void; protected createDisplayText(newSelection: any[], oldSelection: any[]): string; protected getRemoteSelection(newSelection: any[], oldSelection: any[]): string; /** Contains key-value pairs of the selected valueKeys and their resp. displayKeys */ protected registerRemoteEntries(ids: any[], add?: boolean): void; private clearSelection; private clearOnBlur; private getElementVal; private clear; private isValid; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } declare const IGX_SIMPLE_COMBO_DIRECTIVES: readonly [typeof IgxSimpleComboComponent, typeof IgxComboAddItemDirective, typeof IgxComboClearIconDirective, typeof IgxComboEmptyDirective, typeof IgxComboFooterDirective, typeof IgxComboHeaderDirective, typeof IgxComboHeaderItemDirective, typeof IgxComboItemDirective, typeof IgxComboToggleIconDirective, typeof IgxLabelDirective, typeof IgxPrefixDirective, typeof IgxSuffixDirective, typeof IgxHintDirective]; /** * Templates the default toggle icon in the picker. * * @remarks Can be applied to IgxDatePickerComponent, IgxTimePickerComponent, IgxDateRangePickerComponent * * @example * ```html * * * calendar_view_day * * * ``` */ declare class IgxPickerToggleComponent { clicked: EventEmitter; onClick(event: MouseEvent): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * Templates the default clear icon in the picker. * * @remarks Can be applied to IgxDatePickerComponent, IgxTimePickerComponent, IgxDateRangePickerComponent * * @example * ```html * * * delete * * * ``` */ declare class IgxPickerClearComponent extends IgxPickerToggleComponent { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * IgxPickerActionsDirective can be used to re-template the dropdown/dialog action buttons. * * @remarks Can be applied to IgxDatePickerComponent, IgxTimePickerComponent, IgxDateRangePickerComponent * */ declare class IgxPickerActionsDirective { template: TemplateRef; constructor(template: TemplateRef); static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } interface IDatePickerResourceStrings { igx_date_picker_change_date?: string; igx_date_picker_choose_date?: string; } declare const DatePickerResourceStringsEN: IDatePickerResourceStrings; /** Header orientation in `dialog` mode. */ declare const PickerHeaderOrientation: { readonly Horizontal: "horizontal"; readonly Vertical: "vertical"; }; type PickerHeaderOrientation = (typeof PickerHeaderOrientation)[keyof typeof PickerHeaderOrientation]; /** * This enumeration is used to configure whether the date/time picker has an editable input with drop down * or is readonly - the date/time is selected only through a dialog. */ declare const PickerInteractionMode: { readonly DropDown: "dropdown"; readonly Dialog: "dialog"; }; type PickerInteractionMode = (typeof PickerInteractionMode)[keyof typeof PickerInteractionMode]; /** Represents a range between two dates. */ interface DateRange { start: Date | string; end: Date | string; } /** @hidden @internal */ declare class DateRangePickerFormatPipe implements PipeTransform { transform(values: DateRange, appliedFormat?: string, locale?: string, formatter?: (_: DateRange) => string): string; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵpipe: i0.ɵɵPipeDeclaration; } /** @hidden @internal */ declare class IgxDateRangeInputsBaseComponent extends IgxInputGroupComponent { dateTimeEditor: IgxDateTimeEditorDirective; inputDirective: IgxInputDirective; protected ngControl: NgControl; /** @hidden @internal */ get nativeElement(): HTMLElement; /** @hidden @internal */ setFocus(): void; /** @hidden @internal */ updateInputValue(value: Date): void; /** @hidden @internal */ updateInputValidity(state: IgxInputState): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * Defines the start input for a date range picker * * @igxModule IgxDateRangePickerModule * * @igxTheme igx-input-group-theme, igx-calendar-theme, igx-date-range-picker-theme * * @igxKeywords date, range, date range, date picker * * @igxGroup scheduling * * @remarks * When templating, start input has to be templated separately * * @example * ```html * * * * * ... * * ``` */ declare class IgxDateRangeStartComponent extends IgxDateRangeInputsBaseComponent { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * Defines the end input for a date range picker * * @igxModule IgxDateRangePickerModule * * @igxTheme igx-input-group-theme, igx-calendar-theme, igx-date-range-picker-theme * * @igxKeywords date, range, date range, date picker * * @igxGroup scheduling * * @remarks * When templating, end input has to be template separately * * @example * ```html * * ... * * * * * ``` */ declare class IgxDateRangeEndComponent extends IgxDateRangeInputsBaseComponent { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * Replaces the default separator `to` with the provided value * * @igxModule IgxDateRangePickerModule * * @igxTheme igx-date-range-picker-theme * * @igxKeywords date, range, date range, date picker * * @igxGroup scheduling * * @example * ```html * * * * * * - * * * * * ... * * ``` */ declare class IgxDateRangeSeparatorDirective { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } declare abstract class PickerBaseDirective implements IToggleView, EditorProvider, AfterViewInit, AfterContentChecked, OnDestroy { element: ElementRef; protected _localeId: string; protected _inputGroupType?: IgxInputGroupType; /** * The editor's input mask. * * @remarks * Also used as a placeholder when none is provided. * * @example * ```html * * ``` */ inputFormat: string; /** * The format used to display the picker's value when it's not being edited. * * @remarks * Uses Angular's DatePipe. * * @example * ```html * * ``` * */ displayFormat: string; /** * Sets the `placeholder` of the picker's input. * * @example * ```html * * ``` */ placeholder: string; /** * Can be `dropdown` with editable input field or `dialog` with readonly input field. * * @remarks * Default mode is `dropdown` * * @example * ```html * * ``` */ mode: PickerInteractionMode; /** * Overlay settings used to display the pop-up element. * * @example * ```html * * ``` */ overlaySettings: OverlaySettings; /** * Enables or disables the picker. * * @example * ```html * * ``` */ disabled: boolean; /** * @example * ```html * * ``` */ /** * Gets the `locale` of the date-picker. * If not set, defaults to applciation's locale.. */ get locale(): string; /** * Sets the `locale` of the date-picker. * Expects a valid BCP 47 language tag. */ set locale(value: string); /** * Gets the start day of the week. * Can return a numeric or an enum representation of the week day. * If not set, defaults to the first day of the week for the application locale. */ get weekStart(): WEEKDAYS | number; /** * Sets the start day of the week. * Can be assigned to a numeric value or to `WEEKDAYS` enum value. */ set weekStart(value: WEEKDAYS | number); /** * The container used for the pop-up element. * * @example * ```html *
* * * * ``` */ outlet: IgxOverlayOutletDirective | ElementRef; /** * Determines how the picker's input will be styled. * * @remarks * Default is `box`. * * @example * ```html * * ``` */ set type(val: IgxInputGroupType); get type(): IgxInputGroupType; /** * Gets/Sets the default template editor's tabindex. * * @example * ```html * * ``` */ tabIndex: number | string; /** * Emitted when the calendar has started opening, cancelable. * * @example * ```html * * ``` */ opening: EventEmitter; /** * Emitted after the calendar has opened. * * @example * ```html * * ``` */ opened: EventEmitter; /** * Emitted when the calendar has started closing, cancelable. * * @example * ```html * * ``` */ closing: EventEmitter; /** * Emitted after the calendar has closed. * * @example * ```html * * ``` */ closed: EventEmitter; /** @hidden @internal */ toggleComponents: QueryList; protected prefixes: QueryList; protected suffixes: QueryList; protected inputGroup: IgxInputGroupComponent; protected _locale: string; protected _collapsed: boolean; protected _type: IgxInputGroupType; protected _minValue: Date | string; protected _maxValue: Date | string; protected _weekStart: WEEKDAYS | number; protected abstract get toggleContainer(): HTMLElement | undefined; /** * Gets the picker's pop-up state. * * @example * ```typescript * const state = this.picker.collapsed; * ``` */ get collapsed(): boolean; /** @hidden @internal */ get isDropdown(): boolean; /** * Returns if there's focus within the picker's element OR popup container * @hidden @internal */ get isFocused(): boolean; protected _destroy$: Subject; abstract valueChange: EventEmitter; constructor(element: ElementRef, _localeId: string, _inputGroupType?: IgxInputGroupType); /** @hidden @internal */ ngAfterViewInit(): void; /** @hidden @internal */ ngAfterContentChecked(): void; /** @hidden @internal */ ngOnDestroy(): void; /** Subscribes to the click events of toggle/clear icons in a query */ protected subToIconsClicked(components: QueryList, next: () => any): void; abstract select(value: Date | DateRange | string): void; abstract open(settings?: OverlaySettings): void; abstract toggle(settings?: OverlaySettings): void; abstract close(): void; abstract getEditElement(): HTMLInputElement; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; static ngAcceptInputType_disabled: unknown; } /** * Provides information about date picker reference and its previously valid value * when onValidationFailed event is fired. */ interface IDatePickerValidationFailedEventArgs extends IBaseEventArgs { prevValue: Date | string; currentValue: Date | string; } /** * Date Picker displays a popup calendar that lets users select a single date. * * @igxModule IgxDatePickerModule * @igxTheme igx-calendar-theme, igx-icon-theme * @igxGroup Scheduling * @igxKeywords datepicker, calendar, schedule, date * @example * ```html * * ``` */ declare class IgxDatePickerComponent extends PickerBaseDirective implements ControlValueAccessor, Validator, OnInit, AfterViewInit, OnDestroy, AfterViewChecked, AfterContentChecked { private _overlayService; private _injector; private _renderer; private platform; private cdr; /** * Gets/Sets whether the inactive dates will be hidden. * * @remarks * Applies to dates that are out of the current month. * Default value is `false`. * @example * ```html * * ``` * @example * ```typescript * let hideOutsideDays = this.datePicker.hideOutsideDays; * ``` */ hideOutsideDays: boolean; /** * Gets/Sets the number of month views displayed. * * @remarks * Default value is `1`. * * @example * ```html * * ``` * @example * ```typescript * let monthViewsDisplayed = this.datePicker.displayMonthsCount; * ``` */ displayMonthsCount: number; /** * Show/hide week numbers * * @example * ```html * * `` */ showWeekNumbers: boolean; /** * Gets/Sets a custom formatter function on the selected or passed date. * * @example * ```html * * ``` */ formatter: (val: Date) => string; /** * Gets/Sets the orientation of the `IgxDatePickerComponent` header. * * @example * ```html * * ``` */ headerOrientation: PickerHeaderOrientation; /** * Gets/Sets the today button's label. * * @example * ```html * * ``` */ todayButtonLabel: string; /** * Gets/Sets the cancel button's label. * * @example * ```html * * ``` */ cancelButtonLabel: string; /** * Specify if the currently spun date segment should loop over. * * @example * ```html * * ``` */ spinLoop: boolean; /** * Delta values used to increment or decrement each editor date part on spin actions. * All values default to `1`. * * @example * ```html * * ``` */ spinDelta: Pick; /** * Gets/Sets the container used for the popup element. * * @remarks * `outlet` is an instance of `IgxOverlayOutletDirective` or an `ElementRef`. * @example * ```html *
* //.. * * //.. * ``` */ outlet: IgxOverlayOutletDirective | ElementRef; /** * Gets/Sets the value of `id` attribute. * * @remarks If not provided it will be automatically generated. * @example * ```html * * ``` */ id: string; /** * Gets/Sets the format views of the `IgxDatePickerComponent`. * * @example * ```typescript * let formatViews = this.datePicker.formatViews; * this.datePicker.formatViews = {day:false, month: false, year:false}; * ``` */ formatViews: IFormattingViews; /** * Gets/Sets the disabled dates descriptors. * * @example * ```typescript * let disabledDates = this.datepicker.disabledDates; * this.datePicker.disabledDates = [ {type: DateRangeType.Weekends}, ...]; * ``` */ get disabledDates(): DateRangeDescriptor[]; set disabledDates(value: DateRangeDescriptor[]); /** * Gets/Sets the special dates descriptors. * * @example * ```typescript * let specialDates = this.datepicker.specialDates; * this.datePicker.specialDates = [ {type: DateRangeType.Weekends}, ... ]; * ``` */ get specialDates(): DateRangeDescriptor[]; set specialDates(value: DateRangeDescriptor[]); /** * Gets/Sets the format options of the `IgxDatePickerComponent`. * * @example * ```typescript * this.datePicker.calendarFormat = {day: "numeric", month: "long", weekday: "long", year: "numeric"}; * ``` */ calendarFormat: IFormattingOptions; /** * Gets/Sets the selected date. * * @example * ```html * * ``` */ get value(): Date | string; set value(date: Date | string); /** * The minimum value the picker will accept. * * @example * */ set minValue(value: Date | string); get minValue(): Date | string; /** * The maximum value the picker will accept. * * @example * */ set maxValue(value: Date | string); get maxValue(): Date | string; /** * Gets/Sets the resource strings for the picker's default toggle icon. * By default it uses EN resources. */ resourceStrings: IDatePickerResourceStrings; /** @hidden @internal */ readOnly: boolean; /** * Emitted when the picker's value changes. * * @remarks * Used for `two-way` bindings. * * @example * ```html * * ``` */ valueChange: EventEmitter; /** * Emitted when the user types/spins invalid date in the date-picker editor. * * @example * ```html * * ``` */ validationFailed: EventEmitter; /** @hidden @internal */ clearComponents: QueryList; /** @hidden @internal */ label: IgxLabelDirective; private headerTitleTemplate; private headerTemplate; private dateTimeEditor; private viewContainerRef; private labelDirective; private inputDirective; private subheaderTemplate; private pickerActions; private get dialogOverlaySettings(); private get dropDownOverlaySettings(); private get inputGroupElement(); private get dateValue(); private get pickerFormatViews(); private get pickerCalendarFormat(); /** @hidden @internal */ displayValue: PipeTransform; private _resourceStrings; private _dateValue; private _overlayId; private _value; private _targetViewDate; private _ngControl; private _statusChanges$; private _calendar; private _calendarContainer?; private _specialDates; private _disabledDates; private _overlaySubFilter; private _dropDownOverlaySettings; private _dialogOverlaySettings; private _calendarFormat; private _defFormatViews; private _onChangeCallback; private _onTouchedCallback; private _onValidatorChange; constructor(element: ElementRef, _localeId: string, _overlayService: IgxOverlayService, _injector: Injector, _renderer: Renderer2, platform: PlatformUtil, cdr: ChangeDetectorRef, _inputGroupType?: IgxInputGroupType); /** @hidden @internal */ get required(): boolean; /** @hidden @internal */ get pickerResourceStrings(): IDatePickerResourceStrings; protected get toggleContainer(): HTMLElement | undefined; /** @hidden @internal */ onKeyDown(event: KeyboardEvent): void; /** * Opens the picker's dropdown or dialog. * * @example * ```html * * * * ``` */ open(settings?: OverlaySettings): void; /** * Toggles the picker's dropdown or dialog * * @example * ```html * * * * ``` */ toggle(settings?: OverlaySettings): void; /** * Closes the picker's dropdown or dialog. * * @example * ```html * * * * ``` */ close(): void; /** * Selects a date. * * @remarks Updates the value in the input field. * * @example * ```typescript * this.datePicker.select(date); * ``` * @param date passed date that has to be set to the calendar. */ select(value: Date): void; /** * Selects today's date and closes the picker. * * @example * ```html * * * * ``` * */ selectToday(): void; /** * Clears the input field and the picker's value. * * @example * ```typescript * this.datePicker.clear(); * ``` */ clear(): void; /** * Increment a specified `DatePart`. * * @param datePart The optional DatePart to increment. Defaults to Date. * @param delta The optional delta to increment by. Overrides `spinDelta`. * @example * ```typescript * this.datePicker.increment(DatePart.Date); * ``` */ increment(datePart?: DatePart, delta?: number): void; /** * Decrement a specified `DatePart` * * @param datePart The optional DatePart to decrement. Defaults to Date. * @param delta The optional delta to decrement by. Overrides `spinDelta`. * @example * ```typescript * this.datePicker.decrement(DatePart.Date); * ``` */ decrement(datePart?: DatePart, delta?: number): void; /** @hidden @internal */ writeValue(value: Date | string): void; /** @hidden @internal */ registerOnChange(fn: any): void; /** @hidden @internal */ registerOnTouched(fn: any): void; /** @hidden @internal */ setDisabledState?(isDisabled: boolean): void; /** @hidden @internal */ registerOnValidatorChange(fn: any): void; /** @hidden @internal */ validate(control: AbstractControl): ValidationErrors | null; /** @hidden @internal */ ngOnInit(): void; /** @hidden @internal */ ngAfterViewInit(): void; /** @hidden @internal */ ngAfterViewChecked(): void; /** @hidden @internal */ ngOnDestroy(): void; /** @hidden @internal */ getEditElement(): HTMLInputElement; private subscribeToClick; private setDateValue; private updateValidity; private get isTouchedOrDirty(); private get hasValidators(); private onStatusChanged; private handleSelection; private subscribeToDateEditorEvents; private subscribeToOverlayEvents; private getMinMaxDates; private setDisabledDates; private _initializeCalendarContainer; private setCalendarViewDate; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; static ngAcceptInputType_hideOutsideDays: unknown; static ngAcceptInputType_showWeekNumbers: unknown; static ngAcceptInputType_spinLoop: unknown; static ngAcceptInputType_readOnly: unknown; } declare const IGX_DATE_PICKER_DIRECTIVES: readonly [typeof IgxDatePickerComponent, typeof IgxPickerToggleComponent, typeof IgxPickerClearComponent, typeof IgxPickerActionsDirective, typeof IgxLabelDirective, typeof IgxPrefixDirective, typeof IgxSuffixDirective, typeof IgxHintDirective]; /** * **Ignite UI for Angular Dialog Window** - * [Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/dialog.html) * * The Ignite UI Dialog Window presents a dialog window to the user which can simply display messages or display * more complicated visuals such as a user sign-in form. It also provides a right and left button * which can be used for custom actions. * * Example: * ```html * * *
* * * * *
*
* * * * *
*
* ``` */ declare class IgxDialogComponent implements IToggleView, OnInit, OnDestroy, AfterContentInit { private elementRef; private navService; private static NEXT_ID; private static readonly DIALOG_CLASS; toggleRef: IgxToggleDirective; /** * Sets the value of the `id` attribute. If not provided it will be automatically generated. * ```html * * * ``` */ id: string; /** * Controls whether the dialog should be shown as modal. Defaults to `true` * ```html * * ``` */ get isModal(): boolean; set isModal(val: boolean); /** * Controls whether the dialog should close when `Esc` key is pressed. Defaults to `true` * ```html * * ``` */ get closeOnEscape(): boolean; set closeOnEscape(val: boolean); /** * Set whether the Tab key focus is trapped within the dialog when opened. * Defaults to `true`. * ```html * * ``` */ focusTrap: boolean; /** * Sets the title of the dialog. * ```html * * ``` */ title: string; /** * Sets the message text of the dialog. * ```html * * ``` */ message: string; /** * Sets the `label` of the left button of the dialog. * ```html * * ``` */ leftButtonLabel: string; /** * Sets the left button `type`. The types are `flat`, `contained` and `fab`. * The `flat` type button is a rectangle and doesn't have a shadow.
* The `contained` type button is also a rectangle but has a shadow.
* The `fab` type button is a circle with a shadow.
* The default value is `flat`. * ```html * * ``` */ leftButtonType: IgxButtonType; /** * Sets the left button `ripple`. The `ripple` animates a click/tap to a component as a series of fading waves. * The property accepts all valid CSS color property values. * ```html * * ``` */ leftButtonRipple: string; /** * Sets the `label` of the right button of the dialog. * ```html * * ``` */ rightButtonLabel: string; /** * Sets the right button `type`. The types are `flat`, `contained` and `fab`. * The `flat` type button is a rectangle and doesn't have a shadow.
* The `contained` type button is also a rectangle but has a shadow.
* The `fab` type button is a circle with a shadow.
* The default value is `flat`. * ```html * * ``` */ rightButtonType: IgxButtonType; /** * Sets the right button `ripple`. * ```html * * ``` */ rightButtonRipple: string; /** * Gets/Sets whether the dialog should close on click outside the component. By default it's false. * ```html * * * ``` */ get closeOnOutsideSelect(): boolean; set closeOnOutsideSelect(val: boolean); /** * Get the position and animation settings used by the dialog. * ```typescript * @ViewChild('alert', { static: true }) public alert: IgxDialogComponent; * let currentPosition: PositionSettings = this.alert.positionSettings * ``` */ get positionSettings(): PositionSettings; /** * Set the position and animation settings used by the dialog. * ```typescript * import { slideInLeft, slideOutRight } from 'igniteui-angular'; * ... * @ViewChild('alert', { static: true }) public alert: IgxDialogComponent; * public newPositionSettings: PositionSettings = { * openAnimation: useAnimation(slideInTop, { params: { duration: '2000ms' } }), * closeAnimation: useAnimation(slideOutBottom, { params: { duration: '2000ms'} }), * horizontalDirection: HorizontalAlignment.Left, * verticalDirection: VerticalAlignment.Middle, * horizontalStartPoint: HorizontalAlignment.Left, * verticalStartPoint: VerticalAlignment.Middle, * minSize: { height: 100, width: 100 } * }; * this.alert.positionSettings = this.newPositionSettings; * ``` */ set positionSettings(settings: PositionSettings); /** * The default `tabindex` attribute for the component * * @hidden */ tabindex: number; /** * An event that is emitted before the dialog is opened. * ```html * * * ``` */ opening: EventEmitter; /** * An event that is emitted after the dialog is opened. * ```html * * * ``` */ opened: EventEmitter; /** * An event that is emitted before the dialog is closed. * ```html * * * ``` */ closing: EventEmitter; /** * An event that is emitted after the dialog is closed. * ```html * * * ``` */ closed: EventEmitter; /** * An event that is emitted when the left button is clicked. * ```html * * * ``` */ leftButtonSelect: EventEmitter; /** * An event that is emitted when the right button is clicked. * ```html * * * ``` */ rightButtonSelect: EventEmitter; /** * @hidden */ isOpenChange: EventEmitter; /** * @hidden */ get element(): any; /** * Returns the value of state. Possible state values are "open" or "close". * ```typescript * @ViewChild("MyDialog") * public dialog: IgxDialogComponent; * ngAfterViewInit() { * let dialogState = this.dialog.state; * } * ``` */ get state(): string; /** * State of the dialog. * * ```typescript * // get * let dialogIsOpen = this.dialog.isOpen; * ``` * * ```html * * * ``` * * Two-way data binding. * ```html * * * ``` */ get isOpen(): boolean; set isOpen(value: boolean); get isCollapsed(): boolean; /** * Returns the value of the role of the dialog. The valid values are `dialog`, `alertdialog`, `alert`. * ```typescript * @ViewChild("MyDialog") * public dialog: IgxDialogComponent; * ngAfterViewInit() { * let dialogRole = this.dialog.role; * } * ``` */ get role(): "dialog" | "alertdialog" | "alert"; /** * Returns the value of the title id. * ```typescript * @ViewChild("MyDialog") * public dialog: IgxDialogComponent; * ngAfterViewInit() { * let dialogTitle = this.dialog.titleId; * } * ``` */ get titleId(): string; protected destroy$: Subject; private _positionSettings; private _overlayDefaultSettings; private _closeOnOutsideSelect; private _closeOnEscape; private _isModal; private _titleId; constructor(elementRef: ElementRef, navService: IgxNavigationService); ngAfterContentInit(): void; /** * A method that opens the dialog. * * @memberOf {@link IgxDialogComponent} * ```html * * * ``` */ open(overlaySettings?: OverlaySettings): void; /** * A method that that closes the dialog. * * @memberOf {@link IgxDialogComponent} * ```html * * * ``` */ close(): void; /** * A method that opens/closes the dialog. * * @memberOf {@link IgxDialogComponent} * ```html * * * ``` */ toggle(): void; /** * @hidden */ onDialogSelected(event: any): void; /** * @hidden */ onInternalLeftButtonSelect(event: any): void; /** * @hidden */ onInternalRightButtonSelect(event: any): void; /** * @hidden */ ngOnInit(): void; /** * @hidden */ ngOnDestroy(): void; private emitCloseFromDialog; private emitClosedFromDialog; private emitOpenedFromDialog; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; static ngAcceptInputType_isModal: unknown; static ngAcceptInputType_closeOnEscape: unknown; static ngAcceptInputType_focusTrap: unknown; static ngAcceptInputType_closeOnOutsideSelect: unknown; static ngAcceptInputType_isOpen: unknown; } interface IDialogEventArgs extends IBaseEventArgs { dialog: IgxDialogComponent; event: Event; } interface IDialogCancellableEventArgs extends IDialogEventArgs, CancelableEventArgs { } /** * @hidden */ declare class IgxDialogTitleDirective { defaultStyle: boolean; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * @hidden */ declare class IgxDialogActionsDirective { defaultClass: boolean; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } declare const IGX_DIALOG_DIRECTIVES: readonly [typeof IgxDialogComponent, typeof IgxDialogTitleDirective, typeof IgxDialogActionsDirective]; declare const IGX_DROP_DOWN_DIRECTIVES: readonly [typeof IgxDropDownComponent, typeof IgxDropDownItemComponent, typeof IgxDropDownGroupComponent, typeof IgxDropDownItemNavigationDirective]; declare abstract class IgxColumnActionsBaseDirective { /** @hidden @internal */ abstract actionEnabledColumnsFilter: (value: ColumnType, index: number, array: ColumnType[]) => boolean; /** * @hidden @internal */ abstract get checkAllLabel(): string; /** * @hidden @internal */ abstract get uncheckAllLabel(): string; /** @hidden @internal */ abstract columnChecked(column: ColumnType): boolean; /** @hidden @internal */ abstract toggleColumn(column: ColumnType): void; /** @hidden @internal */ abstract uncheckAll(): void; /** @hidden @internal */ abstract checkAll(): void; /** @hidden @internal */ abstract get allChecked(): boolean; /** @hidden @internal */ abstract get allUnchecked(): boolean; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * Providing reference to `IgxColumnActionsComponent`: * ```typescript * @ViewChild('columnActions', { read: IgxColumnActionsComponent }) * public columnActions: IgxColumnActionsComponent; */ declare class IgxColumnActionsComponent implements DoCheck { private differs; /** * Gets/Sets the grid to provide column actions for. * * @example * ```typescript * let grid = this.columnActions.grid; * ``` */ grid: GridType; /** * Gets/sets the indentation of columns in the column list based on their hierarchy level. * * @example * ``` * * ``` */ indentation: number; /** * Sets/Gets the css class selector. * By default the value of the `class` attribute is `"igx-column-actions"`. * ```typescript * let cssCLass = this.columnHidingUI.cssClass; * ``` * ```typescript * this.columnHidingUI.cssClass = 'column-chooser'; * ``` */ cssClass: string; /** * Gets/sets the max height of the columns area. * * @remarks * The default max height is 100%. * @example * ```html * * ``` */ columnsAreaMaxHeight: string; /** * Shows/hides the columns filtering input from the UI. * * @example * ```html * * ``` */ hideFilter: boolean; /** * Gets the checkbox components representing column items currently present in the dropdown * * @example * ```typescript * let columnItems = this.columnActions.columnItems; * ``` */ columnItems: QueryList; /** * Gets/sets the title of the column actions component. * * @example * ```html * * ``` */ title: string; /** * An event that is emitted after a column's checked state is changed. * Provides references to the `column` and the `checked` properties as event arguments. * ```html * * ``` */ columnToggled: EventEmitter; /** * @hidden @internal */ actionableColumns: ColumnType[]; /** * @hidden @internal */ filteredColumns: ColumnType[]; /** * @hidden @internal */ pipeTrigger: number; /** * @hidden @internal */ actionsDirective: IgxColumnActionsBaseDirective; protected _differ: IterableDiffer | null; /** * @hidden @internal */ private _filterColumnsPrompt; /** * @hidden @internal */ private _filterCriteria; /** * @hidden @internal */ private _columnDisplayOrder; /** * @hidden @internal */ private _uncheckAllText; /** * @hidden @internal */ private _checkAllText; /** * @hidden @internal */ private _id; constructor(differs: IterableDiffers); /** * Gets the prompt that is displayed in the filter input. * * @example * ```typescript * let filterColumnsPrompt = this.columnActions.filterColumnsPrompt; * ``` */ get filterColumnsPrompt(): string; /** * Sets the prompt that is displayed in the filter input. * * @example * ```html * * ``` */ set filterColumnsPrompt(value: string); /** * Gets the value which filters the columns list. * * @example * ```typescript * let filterCriteria = this.columnActions.filterCriteria; * ``` */ get filterCriteria(): string; /** * Sets the value which filters the columns list. * * @example * ```html * * ``` */ set filterCriteria(value: string); /** * Gets the display order of the columns. * * @example * ```typescript * let columnDisplayOrder = this.columnActions.columnDisplayOrder; * ``` */ get columnDisplayOrder(): ColumnDisplayOrder; /** * Sets the display order of the columns. * * @example * ```typescript * this.columnActions.columnDisplayOrder = ColumnDisplayOrder.Alphabetical; * ``` */ set columnDisplayOrder(value: ColumnDisplayOrder); /** * Gets the text of the button that unchecks all columns. * * @remarks * If unset it is obtained from the IgxColumnActionsBased derived directive applied. * @example * ```typescript * let uncheckAllText = this.columnActions.uncheckAllText; * ``` */ get uncheckAllText(): string; /** * Sets the text of the button that unchecks all columns. * * @example * ```html * * ``` */ set uncheckAllText(value: string); /** * Gets the text of the button that checks all columns. * * @remarks * If unset it is obtained from the IgxColumnActionsBased derived directive applied. * @example * ```typescript * let uncheckAllText = this.columnActions.uncheckAllText; * ``` */ get checkAllText(): string; /** * Sets the text of the button that checks all columns. * * @remarks * If unset it is obtained from the IgxColumnActionsBased derived directive applied. * @example * ```html * * ``` */ set checkAllText(value: string); /** * @hidden @internal */ get checkAllDisabled(): boolean; /** * @hidden @internal */ get uncheckAllDisabled(): boolean; /** * Gets/Sets the value of the `id` attribute. * * @remarks * If not provided it will be automatically generated. * @example * ```html * * ``` */ get id(): string; set id(value: string); /** * @hidden @internal */ get titleID(): string; /** * @hidden @internal */ trackChanges: (index: any, col: any) => string; /** * @hidden @internal */ ngDoCheck(): void; /** * Unchecks all columns and performs the appropriate action. * * @example * ```typescript * this.columnActions.uncheckAllColumns(); * ``` */ uncheckAllColumns(): void; /** * Checks all columns and performs the appropriate action. * * @example * ```typescript * this.columnActions.checkAllColumns(); * ``` */ checkAllColumns(): void; /** * @hidden @internal */ toggleColumn(column: ColumnType): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; static ngAcceptInputType_hideFilter: unknown; } declare class IgxColumnHidingDirective extends IgxColumnActionsBaseDirective { protected columnActions: IgxColumnActionsComponent; constructor(columnActions: IgxColumnActionsComponent); /** * @hidden @internal */ get checkAllLabel(): string; /** * @hidden @internal */ get uncheckAllLabel(): string; /** * @hidden @internal */ checkAll(): void; /** * @hidden @internal */ uncheckAll(): void; /** * @hidden @internal */ actionEnabledColumnsFilter: (c: any) => boolean; /** * @hidden @internal */ columnChecked(column: ColumnType): boolean; /** * @hidden @internal */ toggleColumn(column: ColumnType): void; get allChecked(): boolean; get allUnchecked(): boolean; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } declare class IgxColumnPinningDirective extends IgxColumnActionsBaseDirective { protected columnActions: IgxColumnActionsComponent; constructor(columnActions: IgxColumnActionsComponent); /** * @hidden @internal */ get checkAllLabel(): string; /** * @hidden @internal */ get uncheckAllLabel(): string; /** * @hidden @internal */ checkAll(): void; /** * @hidden @internal */ uncheckAll(): void; /** * @hidden @internal */ actionEnabledColumnsFilter: (c: ColumnType) => boolean; /** * @hidden @internal */ columnChecked(column: ColumnType): boolean; /** * @hidden @internal */ toggleColumn(column: ColumnType): void; get allUnchecked(): boolean; get allChecked(): boolean; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } declare class IgxColumnRequiredValidatorDirective extends RequiredValidator { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } declare class IgxColumnMinValidatorDirective extends MinValidator { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } declare class IgxColumnMaxValidatorDirective extends MaxValidator { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } declare class IgxColumnEmailValidatorDirective extends EmailValidator { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } declare class IgxColumnMinLengthValidatorDirective extends MinLengthValidator { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } declare class IgxColumnMaxLengthValidatorDirective extends MaxLengthValidator { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } declare class IgxColumPatternValidatorDirective extends PatternValidator { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * @hidden * @internal */ declare class IgxColumnResizingService { private zone; /** * @hidden */ startResizePos: number; /** * Indicates that a column is currently being resized. */ isColumnResizing: boolean; /** * @hidden */ resizeCursor: string; /** * @hidden */ showResizer: boolean; /** * The column being resized. */ column: ColumnType; constructor(zone: NgZone); /** * @hidden */ getColumnHeaderRenderedWidth(): number; /** * @hidden */ get resizerHeight(): number; /** * Returns the minimal possible width to which the column can be resized. */ get restrictResizeMin(): number; /** * Returns the maximal possible width to which the column can be resized. */ get restrictResizeMax(): number; /** * Autosizes the column to the longest currently visible cell value, including the header cell. * If the column has a predifined maxWidth and the autosized column width will become bigger than it, * then the column is sized to its maxWidth. */ autosizeColumnOnDblClick(): void; /** * Resizes the column regaridng to the column minWidth and maxWidth. */ resizeColumn(event: MouseEvent, ratio?: number): void; protected _handlePixelResize(diff: number, column: ColumnType): void; protected _handlePercentageResize(diff: number, column: ColumnType): void; protected getColMinWidth(column: ColumnType): number; protected resizeColumnLayoutFor(column: ColumnType, diff: number): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵprov: i0.ɵɵInjectableDeclaration; } /** * @hidden */ declare class IgxGridHeaderComponent implements DoCheck, OnDestroy { grid: GridType; colResizingService: IgxColumnResizingService; cdr: ChangeDetectorRef; private ref; column: ColumnType; /** * @hidden */ protected defaultESFHeaderIconTemplate: TemplateRef; /** * @hidden */ protected defaultSortHeaderIconTemplate: any; /** * @hidden */ protected sortIconContainer: ElementRef; /** * Returns the `aria-selected` of the header. */ get ariaSelected(): boolean; get columnGroupStyle(): boolean; get sortAscendingStyle(): boolean; get sortDescendingStyle(): boolean; get numberStyle(): boolean; get sortableStyle(): boolean; get selectableStyle(): boolean; get filterableStyle(): any; get sortedStyle(): boolean; get selectedStyle(): boolean; /** * @hidden */ get esfIconTemplate(): TemplateRef; /** * @hidden */ get sortIconTemplate(): any; /** * @hidden */ get disabled(): boolean; get sorted(): boolean; get filterIconClassName(): "igx-excel-filter__icon--filtered" | "igx-excel-filter__icon"; get selectable(): boolean; get selected(): boolean; get title(): string; get nativeElement(): HTMLElement; sortDirection: SortingDirection; protected _destroy$: Subject; constructor(grid: GridType, colResizingService: IgxColumnResizingService, cdr: ChangeDetectorRef, ref: ElementRef); onClick(event: MouseEvent): void; /** * @hidden */ onPinterEnter(): void; /** * @hidden */ onPointerLeave(): void; /** * @hidden @internal */ ngDoCheck(): void; /** * @hidden @internal */ ngOnDestroy(): void; /** * @hidden @internal */ onPointerDownIndicator(event: any): void; /** * @hidden @internal */ onFilteringIconClick(event: any): void; /** * @hidden @internal */ onSortingIconClick(event: any): void; protected getSortDirection(): void; protected isAdvancedFilterApplied(): boolean; private triggerSort; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @hidden @internal */ declare class FilterListItem { value: any; label: any; isSelected: boolean; indeterminate: boolean; isFiltered: boolean; isSpecial: boolean; isBlanks: boolean; children?: Array; parent?: FilterListItem; } /** * @hidden */ declare class ExpressionUI { expressionId: string; expression: IFilteringExpression; beforeOperator: FilteringLogic; afterOperator: FilteringLogic; isSelected: boolean; isVisible: boolean; constructor(); } /** * @hidden @internal */ declare class ActiveElement { index: number; id: string; checked: boolean; } /** * @hidden */ declare class IgxFilteringService implements OnDestroy { private iconService; protected _overlayService: IgxOverlayService; isFilterRowVisible: boolean; filteredColumn: ColumnType; selectedExpression: IFilteringExpression; columnToMoreIconHidden: Map; activeFilterCell: number; grid: GridType; private columnsWithComplexFilter; private areEventsSubscribed; protected destroy$: Subject; private isFiltering; private columnToExpressionsMap; private columnStartIndex; protected _filterMenuOverlaySettings: OverlaySettings; protected lastActiveNode: any; constructor(iconService: IgxIconService, _overlayService: IgxOverlayService); ngOnDestroy(): void; toggleFilterDropdown(element: HTMLElement, column: ColumnType): void; /** * Subscribe to grid's events. */ subscribeToEvents(): void; /** * Close filtering row if a column is hidden. */ hideFilteringRowOnColumnVisibilityChange(col: ColumnType): void; /** * Internal method to create expressionsTree and filter grid used in both filter modes. */ filterInternal(field: string, expressions?: FilteringExpressionsTree | Array): void; /** * Execute filtering on the grid. */ filter(field: string, value: any, conditionOrExpressionTree?: IFilteringOperation | IFilteringExpressionsTree, ignoreCase?: boolean): void; filter_global(term: any, condition: any, ignoreCase: any): void; /** * Clears the filter of a given column if name is provided. Otherwise clears the filters of all columns. */ clearFilter(field: string): void; clear_filter(fieldName: string): void; /** * Filters all the `IgxColumnComponent` in the `IgxGridComponent` with the same condition. * @deprecated in version 19.0.0. */ filterGlobal(value: any, condition: any, ignoreCase?: any): void; /** * Register filtering SVG icons in the icon service. */ registerSVGIcons(): void; /** * Returns the ExpressionUI array for a given column. */ getExpressions(columnId: string): ExpressionUI[]; /** * Recreates all ExpressionUIs for all columns. Executed after filtering to refresh the cache. */ refreshExpressions(): void; /** * Remove an ExpressionUI for a given column. */ removeExpression(columnId: string, indexToRemove: number): void; /** * Generate filtering tree for a given column from existing ExpressionUIs. */ createSimpleFilteringTree(columnId: string, expressionUIList?: any): FilteringExpressionsTree; /** * Returns whether a complex filter is applied to a given column. */ isFilterComplex(columnId: string): boolean; /** * Returns the string representation of the FilteringLogic operator. */ getOperatorAsString(operator: FilteringLogic): any; /** * Generate the label of a chip from a given filtering expression. */ getChipLabel(expression: IFilteringExpression): any; /** * Updates the content of a filterCell. */ updateFilteringCell(column: ColumnType): void; generateExpressionsList(expressions: IFilteringExpressionsTree | IFilteringExpression, operator: FilteringLogic, expressionsUIs: ExpressionUI[]): void; isFilteringExpressionsTreeEmpty(expressionTree: IFilteringExpressionsTree): boolean; protected filter_internal(fieldName: string, term: any, conditionOrExpressionsTree: IFilteringOperation | IFilteringExpressionsTree, ignoreCase: boolean): void; /** Modifies the filteringState object to contain the newly added filtering conditions/expressions. * If createNewTree is true, filteringState will not be modified (because it directly affects the grid.filteringExpressionsTree), * but a new object is created and returned. */ protected prepare_filtering_expression(filteringState: IFilteringExpressionsTree, fieldName: string, searchVal: any, conditionOrExpressionsTree: IFilteringOperation | IFilteringExpressionsTree, ignoreCase: boolean, insertAtIndex?: number, createNewTree?: boolean): FilteringExpressionsTree; private isFilteringTreeComplex; private getChildAndOperatorsCount; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵprov: i0.ɵɵInjectableDeclaration; } /** * @hidden */ declare class IgxGridFilteringCellComponent implements AfterViewInit, OnInit, DoCheck { cdr: ChangeDetectorRef; filteringService: IgxFilteringService; column: ColumnType; protected emptyFilter: TemplateRef; protected defaultFilter: TemplateRef; protected complexFilter: TemplateRef; protected chipsArea: IgxChipsAreaComponent; protected moreIcon: ElementRef; protected ghostChip: IgxChipComponent; protected complexChip: IgxChipComponent; get styleClasses(): string; expressionsList: ExpressionUI[]; moreFiltersCount: number; private baseClass; constructor(cdr: ChangeDetectorRef, filteringService: IgxFilteringService); ngOnInit(): void; ngAfterViewInit(): void; ngDoCheck(): void; /** * Returns whether a chip with a given index is visible or not. */ isChipVisible(index: number): boolean; /** * Updates the filtering cell area. */ updateFilterCellArea(): void; get template(): TemplateRef; /** * Gets the context passed to the filter template. * * @memberof IgxGridFilteringCellComponent */ get context(): { $implicit: ColumnType; column: ColumnType; }; /** * Chip clicked event handler. */ onChipClicked(expression?: IFilteringExpression): void; /** * Chip removed event handler. */ onChipRemoved(eventArgs: IBaseChipEventArgs, item: ExpressionUI): void; /** * Clears the filtering. */ clearFiltering(): void; /** * Returns the filtering indicator class. */ filteringIndicatorClass(): { [x: string]: boolean; }; protected get filteringElementsSize(): Size$1; private removeExpression; private isMoreIconHidden; private updateVisibleFilters; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @hidden */ declare class IgxGridHeaderGroupComponent implements DoCheck { private cdr; grid: GridType; private ref; colResizingService: IgxColumnResizingService; filteringService: IgxFilteringService; protected platform: PlatformUtil; get rowEnd(): number; get colEnd(): number; get rowStart(): number; get colStart(): number; get headerID(): string; /** * Gets the column of the header group. * * @memberof IgxGridHeaderGroupComponent */ column: ColumnType; get active(): boolean; get activeGroup(): boolean; /** * @hidden */ header: IgxGridHeaderComponent; /** * @hidden */ filter: IgxGridFilteringCellComponent; /** * @hidden */ children: QueryList; /** * Gets the width of the header group. * * @memberof IgxGridHeaderGroupComponent */ get width(): string; defaultCss: boolean; constructor(cdr: ChangeDetectorRef, grid: GridType, ref: ElementRef, colResizingService: IgxColumnResizingService, filteringService: IgxFilteringService, platform: PlatformUtil); get pinnedCss(): boolean; get pinnedLastCss(): boolean; get pinnedFirstCSS(): boolean; get headerDragCss(): boolean; get filteringCss(): boolean; /** * @hidden */ get zIndex(): number; /** * Gets whether the header group belongs to a column that is filtered. * * @memberof IgxGridHeaderGroupComponent */ get isFiltered(): boolean; /** * Gets whether the header group is stored in the last column in the pinned area. * * @memberof IgxGridHeaderGroupComponent */ get isLastPinned(): boolean; /** * Gets whether the header group is stored in the first column of the right pinned area. */ get isFirstPinned(): boolean; get groupDisplayStyle(): string; /** * Gets whether the header group is stored in a pinned column. * * @memberof IgxGridHeaderGroupComponent */ get isPinned(): boolean; /** * Gets whether the header group belongs to a column that is moved. * * @memberof IgxGridHeaderGroupComponent */ get isHeaderDragged(): boolean; /** * @hidden */ get hasLastPinnedChildColumn(): boolean; /** * @hidden */ get hasFirstPinnedChildColumn(): boolean; /** * @hidden */ get selectable(): boolean; /** * @hidden */ get selected(): boolean; /** * @hidden */ get height(): number; /** * @hidden */ get title(): string; get nativeElement(): HTMLElement; /** * @hidden */ onMouseDown(event: MouseEvent): void; /** * @hidden */ groupClicked(event: MouseEvent): void; /** * @hidden @internal */ onPointerDownIndicator(event: any): void; /** * @hidden @internal */ toggleExpandState(event: MouseEvent): void; /** * @hidden @internal */ pointerdown(event: PointerEvent): void; activate(): void; ngDoCheck(): void; /** * @hidden */ onPinterEnter(): void; /** * @hidden */ onPointerLeave(): void; protected get activeNode(): { row: number; column: number; level: number; mchCache: { level: number; visibleIndex: number; }; layout: { rowStart: number; colStart: number; rowEnd: number; colEnd: number; columnVisibleIndex: number; }; }; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } declare class IgxFilterCellTemplateDirective { template: TemplateRef; constructor(template: TemplateRef); static ngTemplateContextGuard(_directive: IgxFilterCellTemplateDirective, context: unknown): context is IgxColumnTemplateContext; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } declare class IgxCellTemplateDirective { template: TemplateRef; constructor(template: TemplateRef); static ngTemplateContextGuard(_directive: IgxCellTemplateDirective, context: unknown): context is IgxCellTemplateContext; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } declare class IgxCellValidationErrorDirective { template: TemplateRef; constructor(template: TemplateRef); static ngTemplateContextGuard(_directive: IgxCellValidationErrorDirective, context: unknown): context is IgxCellTemplateContext; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } declare class IgxCellHeaderTemplateDirective { template: TemplateRef; constructor(template: TemplateRef); static ngTemplateContextGuard(_directive: IgxCellHeaderTemplateDirective, context: unknown): context is IgxColumnTemplateContext; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * @hidden */ declare class IgxCellFooterTemplateDirective { template: TemplateRef; constructor(template: TemplateRef); static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } declare class IgxCellEditorTemplateDirective { template: TemplateRef; constructor(template: TemplateRef); static ngTemplateContextGuard(_directive: IgxCellEditorTemplateDirective, context: unknown): context is IgxCellTemplateContext; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } declare class IgxCollapsibleIndicatorTemplateDirective { template: TemplateRef; constructor(template: TemplateRef); static ngTemplateContextGuard(_directive: IgxCollapsibleIndicatorTemplateDirective, context: unknown): context is IgxColumnTemplateContext; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } declare class IgxSummaryTemplateDirective { template: TemplateRef; constructor(template: TemplateRef); static ngTemplateContextGuard(_directive: IgxSummaryTemplateDirective, context: unknown): context is IgxSummaryTemplateContext; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * **Ignite UI for Angular Column** - * [Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/grid#columns-configuration) * * The Ignite UI Column is used within an `igx-grid` element to define what data the column will show. Features such as sorting, * filtering & editing are enabled at the column level. You can also provide a template containing custom content inside * the column using `ng-template` which will be used for all cells within the column. * * @igxParent IgxGridComponent, IgxTreeGridComponent, IgxHierarchicalGridComponent, IgxPivotGridComponent, IgxRowIslandComponent, IgxColumnGroupComponent, IgxColumnLayoutComponent */ declare class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnType { grid: GridType; private _validators; /** @hidden @internal **/ cdr: ChangeDetectorRef; protected platform: PlatformUtil; /** * Sets/gets the `field` value. * ```typescript * let columnField = this.column.field; * ``` * ```html * * ``` * * @memberof IgxColumnComponent */ set field(value: string); get field(): string; /** * @hidden @internal */ validators: Validator[]; /** * Sets/gets the `header` value. * ```typescript * let columnHeader = this.column.header; * ``` * ```html * * ``` * * @memberof IgxColumnComponent */ header: string; /** * Sets/gets the `title` value. * ```typescript * let title = this.column.title; * ``` * ```html * * ``` * * @memberof IgxColumnComponent */ title: string; /** * Sets/gets whether the column is sortable. * Default value is `false`. * ```typescript * let isSortable = this.column.sortable; * ``` * ```html * * ``` * * @memberof IgxColumnComponent */ sortable: boolean; /** * Returns if the column is selectable. * ```typescript * let columnSelectable = this.column.selectable; * ``` * * @memberof IgxColumnComponent */ get selectable(): boolean; /** * Sets if the column is selectable. * Default value is `true`. * ```html * * ``` * * @memberof IgxColumnComponent */ set selectable(value: boolean); /** * Sets/gets whether the column is groupable. * Default value is `false`. * ```typescript * let isGroupable = this.column.groupable; * ``` * ```html * * ``` * * @memberof IgxColumnComponent */ get groupable(): boolean; set groupable(value: boolean); /** * Gets whether the column is editable. * Default value is `false`. * ```typescript * let isEditable = this.column.editable; * ``` * * @memberof IgxColumnComponent */ get editable(): boolean; /** * Sets whether the column is editable. * ```typescript * this.column.editable = true; * ``` * ```html * * ``` * * @memberof IgxColumnComponent */ set editable(editable: boolean); /** * Sets/gets whether the column is filterable. * Default value is `true`. * ```typescript * let isFilterable = this.column.filterable; * ``` * ```html * * ``` * * @memberof IgxColumnComponent */ filterable: boolean; /** * Sets/gets whether the column is resizable. * Default value is `false`. * ```typescript * let isResizable = this.column.resizable; * ``` * ```html * * ``` * * @memberof IgxColumnComponent */ resizable: boolean; /** * Sets/gets whether the column header is included in autosize logic. * Useful when template for a column header is sized based on parent, for example a default `div`. * Default value is `false`. * ```typescript * let isResizable = this.column.resizable; * ``` * ```html * * ``` * * @memberof IgxColumnComponent */ autosizeHeader: boolean; /** * Gets a value indicating whether the summary for the column is enabled. * ```typescript * let hasSummary = this.column.hasSummary; * ``` * * @memberof IgxColumnComponent */ get hasSummary(): boolean; /** * Sets a value indicating whether the summary for the column is enabled. * Default value is `false`. * ```html * * ``` * * @memberof IgxColumnComponent */ set hasSummary(value: boolean); /** * Gets whether the column is hidden. * ```typescript * let isHidden = this.column.hidden; * ``` * * @memberof IgxColumnComponent */ get hidden(): boolean; /** * Sets the column hidden property. * Default value is `false`. * ```html * * ``` * * Two-way data binding. * ```html * * ``` * * @memberof IgxColumnComponent */ set hidden(value: boolean); /** * Returns if the column is selected. * ```typescript * let isSelected = this.column.selected; * ``` * * @memberof IgxColumnComponent */ get selected(): boolean; /** * Select/deselect a column. * Default value is `false`. * ```typescript * this.column.selected = true; * ``` * * @memberof IgxColumnComponent */ set selected(value: boolean); /** * Emitted when the column is hidden or shown. * * ```html * * * ``` * */ hiddenChange: EventEmitter; /** * Emitted when the column expanded or collapsed. * * ```html * * * ``` * */ expandedChange: EventEmitter; /** @hidden */ collapsibleChange: EventEmitter; /** @hidden */ visibleWhenCollapsedChange: EventEmitter; /** @hidden @internal */ columnChange: EventEmitter; /** * Gets whether the hiding is disabled. * ```typescript * let isHidingDisabled = this.column.disableHiding; * ``` * * @memberof IgxColumnComponent */ disableHiding: boolean; /** * Gets whether the pinning is disabled. * ```typescript * let isPinningDisabled = this.column.disablePinning; * ``` * * @memberof IgxColumnComponent */ disablePinning: boolean; /** * Gets the `width` of the column. * ```typescript * let columnWidth = this.column.width; * ``` * * @memberof IgxColumnComponent */ get width(): string; /** * Sets the `width` of the column. * ```html * * ``` * * Two-way data binding. * ```html * * ``` * * @memberof IgxColumnComponent */ set width(value: string); /** @hidden @internal **/ autoSize: number; /** * Sets/gets the maximum `width` of the column. * ```typescript * let columnMaxWidth = this.column.width; * ``` * ```html * * ``` * * @memberof IgxColumnComponent */ set maxWidth(value: string); get maxWidth(): string; /** * Sets/gets the class selector of the column header. * ```typescript * let columnHeaderClass = this.column.headerClasses; * ``` * ```html * * ``` * * @memberof IgxColumnComponent */ headerClasses: string; /** * Sets conditional style properties on the column header. * Similar to `ngStyle` it accepts an object literal where the keys are * the style properties and the value is the expression to be evaluated. * ```typescript * styles = { * background: 'royalblue', * color: (column) => column.pinned ? 'red': 'inherit' * } * ``` * ```html * * ``` * * @memberof IgxColumnComponent */ headerStyles: any; /** * Sets/gets the class selector of the column group header. * ```typescript * let columnHeaderClass = this.column.headerGroupClasses; * ``` * ```html * * ``` * * @memberof IgxColumnComponent */ headerGroupClasses: string; /** * Sets conditional style properties on the column header group wrapper. * Similar to `ngStyle` it accepts an object literal where the keys are * the style properties and the value is the expression to be evaluated. * ```typescript * styles = { * background: 'royalblue', * color: (column) => column.pinned ? 'red': 'inherit' * } * ``` * ```html * * ``` * * @memberof IgxColumnComponent */ headerGroupStyles: any; /** * Sets a conditional class selector of the column cells. * Accepts an object literal, containing key-value pairs, * where the key is the name of the CSS class, while the * value is either a callback function that returns a boolean, * or boolean, like so: * ```typescript * callback = (rowData, columnKey, cellValue, rowIndex) => { return rowData[columnKey] > 6; } * cellClasses = { 'className' : this.callback }; * ``` * ```html * * * ``` * * @memberof IgxColumnComponent */ cellClasses: any; /** * Sets conditional style properties on the column cells. * Similar to `ngStyle` it accepts an object literal where the keys are * the style properties and the value is the expression to be evaluated. * As with `cellClasses` it accepts a callback function. * ```typescript * styles = { * background: 'royalblue', * color: (rowData, columnKey, cellValue, rowIndex) => value.startsWith('Important') ? 'red': 'inherit' * } * ``` * ```html * * ``` * * @memberof IgxColumnComponent */ cellStyles: any; /** * Applies display format to cell values in the column. Does not modify the underlying data. * * @remarks * Note: As the formatter is used in places like the Excel style filtering dialog, in certain * scenarios (remote filtering for example), the row data argument can be `undefined`. * * * In this example, we check to see if the column name is Salary, and then provide a method as the column formatter * to format the value into a currency string. * * @example * ```typescript * columnInit(column: IgxColumnComponent) { * if (column.field == "Salary") { * column.formatter = (salary => this.format(salary)); * } * } * * format(value: number) : string { * return formatCurrency(value, "en-us", "$"); * } * ``` * * @example * ```typescript * const column = this.grid.getColumnByName('Address'); * const addressFormatter = (address: string, rowData: any) => data.privacyEnabled ? 'unknown' : address; * column.formatter = addressFormatter; * ``` * * @memberof IgxColumnComponent */ formatter: (value: any, rowData?: any) => any; /** * The summaryFormatter is used to format the display of the column summaries. * * In this example, we check to see if the column name is OrderDate, and then provide a method as the summaryFormatter * to change the locale for the dates to 'fr-FR'. The summaries with the count key are skipped so they are displayed as numbers. * * ```typescript * columnInit(column: IgxColumnComponent) { * if (column.field == "OrderDate") { * column.summaryFormatter = this.summaryFormat; * } * } * * summaryFormat(summary: IgxSummaryResult, summaryOperand: IgxSummaryOperand): string { * const result = summary.summaryResult; * if(summaryResult.key !== 'count' && result !== null && result !== undefined) { * const pipe = new DatePipe('fr-FR'); * return pipe.transform(result,'mediumDate'); * } * return result; * } * ``` * * @memberof IgxColumnComponent */ summaryFormatter: (summary: IgxSummaryResult, summaryOperand: IgxSummaryOperand) => any; /** * Sets/gets whether the column filtering should be case sensitive. * Default value is `true`. * ```typescript * let filteringIgnoreCase = this.column.filteringIgnoreCase; * ``` * ```html * * ``` * * @memberof IgxColumnComponent */ filteringIgnoreCase: boolean; /** * Sets/gets whether the column sorting should be case sensitive. * Default value is `true`. * ```typescript * let sortingIgnoreCase = this.column.sortingIgnoreCase; * ``` * ```html * * ``` * * @memberof IgxColumnComponent */ sortingIgnoreCase: boolean; /** * Sets/gets whether the column is `searchable`. * Default value is `true`. * ```typescript * let isSearchable = this.column.searchable'; * ``` * ```html * * ``` * * @memberof IgxColumnComponent */ searchable: boolean; /** * Sets/gets the data type of the column values. * Default value is `string`. * ```typescript * let columnDataType = this.column.dataType; * ``` * ```html * * ``` * * @memberof IgxColumnComponent */ dataType: GridColumnDataType; /** @hidden */ collapsibleIndicatorTemplate: TemplateRef; /** * Row index where the current field should end. * The amount of rows between rowStart and rowEnd will determine the amount of spanning rows to that field * ```html * * * * ``` * * @memberof IgxColumnComponent */ rowEnd: number; /** * Column index where the current field should end. * The amount of columns between colStart and colEnd will determine the amount of spanning columns to that field * ```html * * * * ``` * * @memberof IgxColumnComponent */ colEnd: number; /** * Row index from which the field is starting. * ```html * * * * ``` * * @memberof IgxColumnComponent */ rowStart: number; /** * Column index from which the field is starting. * ```html * * * * ``` * * @memberof IgxColumnComponent */ colStart: number; /** * Sets/gets custom properties provided in additional template context. * * ```html * * * {{ props }} * * * ``` * * @memberof IgxColumnComponent */ additionalTemplateContext: any; /** * Emitted when the column width changes. * * ```html * * * ``` * */ widthChange: EventEmitter; /** * Emitted when the column is pinned/unpinned. * * ```html * * * ``` * */ pinnedChange: EventEmitter; /** * @hidden */ filterCellTemplateDirective: IgxFilterCellTemplateDirective; /** * @hidden */ protected summaryTemplateDirective: IgxSummaryTemplateDirective; /** * @hidden * @see {@link bodyTemplate} */ protected cellTemplate: IgxCellTemplateDirective; /** * @hidden */ protected cellValidationErrorTemplate: IgxCellValidationErrorDirective; /** * @hidden */ protected headTemplate: QueryList; /** * @hidden */ protected editorTemplate: IgxCellEditorTemplateDirective; /** * @hidden */ protected collapseIndicatorTemplate: IgxCollapsibleIndicatorTemplateDirective; /** * @hidden */ get calcWidth(): any; /** @hidden @internal **/ calcPixelWidth: number; /** * @hidden */ get maxWidthPx(): number; /** * @hidden */ get maxWidthPercent(): number; /** * @hidden */ get minWidthPx(): number; /** * @hidden */ get userSetMinWidthPx(): number; /** * @hidden */ get minWidthPercent(): number; /** * Sets/gets the minimum `width` of the column. * Default value is `88`; * ```typescript * let columnMinWidth = this.column.minWidth; * ``` * ```html * * ``` * * @memberof IgxColumnComponent */ set minWidth(value: string); get minWidth(): string; /** @hidden @internal **/ get resolvedWidth(): string; /** * Gets the column index. * ```typescript * let columnIndex = this.column.index; * ``` * * @memberof IgxColumnComponent */ get index(): number; /** * Gets whether the column is `pinned`. * ```typescript * let isPinned = this.column.pinned; * ``` * * @memberof IgxColumnComponent */ get pinned(): boolean; /** * Sets whether the column is pinned. * Default value is `false`. * ```html * * ``` * * Two-way data binding. * ```html * * ``` * * @memberof IgxColumnComponent */ set pinned(value: boolean); /** * Gets the column `summaries`. * ```typescript * let columnSummaries = this.column.summaries; * ``` * * @memberof IgxColumnComponent */ get summaries(): any; /** * Sets the column `summaries`. * ```typescript * this.column.summaries = IgxNumberSummaryOperand; * ``` * * @memberof IgxColumnComponent */ set summaries(classRef: any); /** * Sets/gets the summary operands to exclude from display. * Accepts an array of string keys representing the summary types to disable, such as 'Min', 'Max', 'Count' etc. * ```typescript * let disabledSummaries = this.column.disabledSummaries; * ``` * ```html * * ``` * * @memberof IgxColumnComponent */ get disabledSummaries(): string[]; set disabledSummaries(value: string[]); /** * Gets the column `filters`. * ```typescript * let columnFilters = this.column.filters' * ``` * * @memberof IgxColumnComponent */ get filters(): IgxFilteringOperand; /** * Sets the column `filters`. * ```typescript * this.column.filters = IgxBooleanFilteringOperand.instance(). * ``` * * @memberof IgxColumnComponent */ set filters(instance: IgxFilteringOperand); /** * Gets the column `sortStrategy`. * ```typescript * let sortStrategy = this.column.sortStrategy * ``` * * @memberof IgxColumnComponent */ get sortStrategy(): ISortingStrategy; /** * Sets the column `sortStrategy`. * ```typescript * this.column.sortStrategy = new CustomSortingStrategy(). * class CustomSortingStrategy extends SortingStrategy {...} * ``` * * @memberof IgxColumnComponent */ set sortStrategy(classRef: ISortingStrategy); /** * Gets the function that compares values for grouping. * ```typescript * let groupingComparer = this.column.groupingComparer' * ``` * * @memberof IgxColumnComponent */ get groupingComparer(): (a: any, b: any, currRec?: any, groupRec?: any) => number; /** * Sets a custom function to compare values for grouping. * Subsequent values in the sorted data that the function returns 0 for are grouped. * ```typescript * this.column.groupingComparer = (a: any, b: any, currRec?: any, groupRec?: any) => { return a === b ? 0 : -1; } * ``` * * @memberof IgxColumnComponent */ set groupingComparer(funcRef: (a: any, b: any, currRec?: any, groupRec?: any) => number); /** * @hidden @internal */ get defaultMinWidth(): string; /** * Returns a reference to the `summaryTemplate`. * ```typescript * let summaryTemplate = this.column.summaryTemplate; * ``` * * @memberof IgxColumnComponent */ get summaryTemplate(): TemplateRef; /** * Sets the summary template. * ```html * *

{{ summaryResults[0].label }}: {{ summaryResults[0].summaryResult }}

*

{{ summaryResults[1].label }}: {{ summaryResults[1].summaryResult }}

*
* ``` * ```typescript * @ViewChild("'summaryTemplate'", {read: TemplateRef }) * public summaryTemplate: TemplateRef; * this.column.summaryTemplate = this.summaryTemplate; * ``` * * @memberof IgxColumnComponent */ set summaryTemplate(template: TemplateRef); /** * Returns a reference to the `bodyTemplate`. * ```typescript * let bodyTemplate = this.column.bodyTemplate; * ``` * * @memberof IgxColumnComponent */ get bodyTemplate(): TemplateRef; /** * Sets the body template. * ```html * *
* {{val}} *
*
* ``` * ```typescript * @ViewChild("'bodyTemplate'", {read: TemplateRef }) * public bodyTemplate: TemplateRef; * this.column.bodyTemplate = this.bodyTemplate; * ``` * * @memberof IgxColumnComponent */ set bodyTemplate(template: TemplateRef); /** * Returns a reference to the header template. * ```typescript * let headerTemplate = this.column.headerTemplate; * ``` * * @memberof IgxColumnComponent */ get headerTemplate(): TemplateRef; /** * Sets the header template. * Note that the column header height is fixed and any content bigger than it will be cut off. * ```html * *
* {{column.field}} *
*
* ``` * ```typescript * @ViewChild("'headerTemplate'", {read: TemplateRef }) * public headerTemplate: TemplateRef; * this.column.headerTemplate = this.headerTemplate; * ``` * * @memberof IgxColumnComponent */ set headerTemplate(template: TemplateRef); /** * Returns a reference to the inline editor template. * ```typescript * let inlineEditorTemplate = this.column.inlineEditorTemplate; * ``` * * @memberof IgxColumnComponent */ get inlineEditorTemplate(): TemplateRef; /** * Sets the inline editor template. * ```html * * * * ``` * ```typescript * @ViewChild("'inlineEditorTemplate'", {read: TemplateRef }) * public inlineEditorTemplate: TemplateRef; * this.column.inlineEditorTemplate = this.inlineEditorTemplate; * ``` * * @memberof IgxColumnComponent */ set inlineEditorTemplate(template: TemplateRef); /** * Returns a reference to the validation error template. * ```typescript * let errorTemplate = this.column.errorTemplate; * ``` */ get errorTemplate(): TemplateRef; /** * Sets the error template. * ```html * *
* This name is forbidden. *
*
* ``` * ```typescript * @ViewChild("'errorTemplate'", {read: TemplateRef }) * public errorTemplate: TemplateRef; * this.column.errorTemplate = this.errorTemplate; * ``` */ set errorTemplate(template: TemplateRef); /** * Returns a reference to the `filterCellTemplate`. * ```typescript * let filterCellTemplate = this.column.filterCellTemplate; * ``` * * @memberof IgxColumnComponent */ get filterCellTemplate(): TemplateRef; /** * Sets the quick filter template. * ```html * * * * ``` * ```typescript * @ViewChild("'filterCellTemplate'", {read: TemplateRef }) * public filterCellTemplate: TemplateRef; * this.column.filterCellTemplate = this.filterCellTemplate; * ``` * * @memberof IgxColumnComponent */ set filterCellTemplate(template: TemplateRef); /** * @hidden @internal */ get cells(): CellType[]; /** * @hidden @internal */ get _cells(): CellType[]; /** * Gets the column visible index. * If the column is not visible, returns `-1`. * ```typescript * let visibleColumnIndex = this.column.visibleIndex; * ``` * * @memberof IgxColumnComponent */ get visibleIndex(): number; /** * Returns a boolean indicating if the column is a `ColumnGroup`. * ```typescript * let columnGroup = this.column.columnGroup; * ``` * * @memberof IgxColumnComponent */ get columnGroup(): boolean; /** * Returns a boolean indicating if the column is a `ColumnLayout` for multi-row layout. * ```typescript * let columnGroup = this.column.columnGroup; * ``` * * @memberof IgxColumnComponent */ get columnLayout(): boolean; /** * Returns a boolean indicating if the column is a child of a `ColumnLayout` for multi-row layout. * ```typescript * let columnLayoutChild = this.column.columnLayoutChild; * ``` * * @memberof IgxColumnComponent */ get columnLayoutChild(): boolean; /** * A list containing all the child columns under this column (if any). * Empty without children or if this column is not Group or Layout. */ get childColumns(): ColumnType[]; /** @hidden @internal **/ get allChildren(): IgxColumnComponent[]; /** * Returns the level of the column in a column group. * Returns `0` if the column doesn't have a `parent`. * ```typescript * let columnLevel = this.column.level; * ``` * * @memberof IgxColumnComponent */ get level(): number; /** @hidden @internal **/ get isLastPinned(): boolean; /** @hidden @internal **/ get isFirstPinned(): boolean; /** @hidden @internal **/ get rightPinnedOffset(): string; /** @hidden @internal **/ get gridRowSpan(): number; /** @hidden @internal **/ get gridColumnSpan(): number; /** * Indicates whether the column will be visible when its parent is collapsed. * ```html * * * * ``` * * @memberof IgxColumnComponent */ set visibleWhenCollapsed(value: boolean); get visibleWhenCollapsed(): boolean; /** * @remarks * Pass optional parameters for DatePipe and/or DecimalPipe to format the display value for date and numeric columns. * Accepts an `IColumnPipeArgs` object with any of the `format`, `timezone` and `digitsInfo` properties. * For more details see https://angular.io/api/common/DatePipe and https://angular.io/api/common/DecimalPipe * @example * ```typescript * const pipeArgs: IColumnPipeArgs = { * format: 'longDate', * timezone: 'UTC', * digitsInfo: '1.1-2' * } * ``` * ```html * * * ``` * @memberof IgxColumnComponent */ set pipeArgs(value: IColumnPipeArgs); get pipeArgs(): IColumnPipeArgs; /** * Pass optional properties for the default column editors. * @remarks * Options may be applicable only to specific column type editors. * @example * ```typescript * const editorOptions: IColumnEditorOptions = { * dateTimeFormat: 'MM/dd/YYYY', * } * ``` * ```html * * ``` * @memberof IgxColumnComponent */ set editorOptions(value: IColumnEditorOptions); get editorOptions(): IColumnEditorOptions; /** * @hidden * @internal */ get collapsible(): boolean; set collapsible(_value: boolean); /** * @hidden * @internal */ get expanded(): boolean; set expanded(_value: boolean); /** * @hidden */ defaultWidth: string; /** * @hidden */ widthSetByUser: boolean; /** * @hidden */ hasNestedPath: boolean; /** * @hidden * @internal */ defaultTimeFormat: string; /** * @hidden * @internal */ defaultDateTimeFormat: string; /** * Returns the filteringExpressionsTree of the column. * ```typescript * let tree = this.column.filteringExpressionsTree; * ``` * * @memberof IgxColumnComponent */ get filteringExpressionsTree(): FilteringExpressionsTree; /** * Sets/gets the parent column. * ```typescript * let parentColumn = this.column.parent; * ``` * ```typescript * this.column.parent = higherLevelColumn; * ``` * * @memberof IgxColumnComponent */ parent: any; /** * Sets/gets the children columns. * ```typescript * let columnChildren = this.column.children; * ``` * * @deprecated in version 18.1.0. Use the `childColumns` property instead. */ children: QueryList; /** * @hidden */ destroy$: Subject; /** * @hidden */ widthConstrained: boolean; /** * @hidden */ protected _applySelectableClass: boolean; protected _vIndex: number; /** * @hidden */ protected _pinned: boolean; /** * @hidden */ protected _bodyTemplate: TemplateRef; /** * @hidden */ protected _errorTemplate: TemplateRef; /** * @hidden */ protected _headerTemplate: TemplateRef; /** * @hidden */ protected _summaryTemplate: TemplateRef; /** * @hidden */ protected _inlineEditorTemplate: TemplateRef; /** * @hidden */ protected _filterCellTemplate: TemplateRef; /** * @hidden */ protected _summaries: any; /** * @hidden */ private _disabledSummaries; /** * @hidden */ protected _filters: any; /** * @hidden */ protected _sortStrategy: ISortingStrategy; /** * @hidden */ protected _groupingComparer: (a: any, b: any, currRec?: any, groupRec?: any) => number; /** * @hidden */ protected _hidden: boolean; /** * @hidden */ protected _index: number; /** * @hidden */ protected _disablePinning: boolean; /** * @hidden */ protected _width: string; /** * @hidden */ protected _defaultMinWidth: string; /** * @hidden */ protected _maxWidth: any; /** * @hidden */ protected _hasSummary: boolean; /** * @hidden */ protected _editable: boolean; /** * @hidden */ protected _groupable: boolean; /** * @hidden */ protected _visibleWhenCollapsed: any; /** * @hidden */ protected _collapsible: boolean; /** * @hidden */ protected _expanded: boolean; /** * @hidden */ protected _selectable: boolean; /** * @hidden */ protected get isPrimaryColumn(): boolean; private _field; private _calcWidth; private _columnPipeArgs; private _editorOptions; constructor(grid: GridType, _validators: Validator[], /** @hidden @internal **/ cdr: ChangeDetectorRef, platform: PlatformUtil); /** * @hidden * @internal */ resetCaches(): void; /** * @hidden */ ngOnDestroy(): void; /** * @hidden */ ngAfterContentInit(): void; /** * @hidden */ getGridTemplate(isRow: boolean): string; /** @hidden @internal **/ getInitialChildColumnSizes(children: QueryList): Array; /** @hidden @internal **/ getFilledChildColumnSizes(children: QueryList): Array; /** @hidden @internal **/ getResizableColUnderEnd(): MRLResizeColumnInfo[]; /** * Pins the column at the provided index in the pinned area. * Defaults to index `0` if not provided, or to the initial index in the pinned area. * Returns `true` if the column is successfully pinned. Returns `false` if the column cannot be pinned. * Column cannot be pinned if: * - Is already pinned * - index argument is out of range * - The pinned area exceeds 80% of the grid width * ```typescript * let success = this.column.pin(); * ``` * * @memberof IgxColumnComponent */ pin(index?: number): boolean; /** * Unpins the column and place it at the provided index in the unpinned area. * Defaults to index `0` if not provided, or to the initial index in the unpinned area. * Returns `true` if the column is successfully unpinned. Returns `false` if the column cannot be unpinned. * Column cannot be unpinned if: * - Is already unpinned * - index argument is out of range * ```typescript * let success = this.column.unpin(); * ``` * * @memberof IgxColumnComponent */ unpin(index?: number): boolean; /** * Moves a column to the specified visible index. * If passed index is invalid, or if column would receive a different visible index after moving, moving is not performed. * If passed index would move the column to a different column group. moving is not performed. * * @example * ```typescript * column.move(index); * ``` * @memberof IgxColumnComponent */ move(index: number): void; /** * No children for the column, so will returns 1 or 0, if the column is hidden. * * @hidden */ calcChildren(): number; /** * Toggles column vibisility and emits the respective event. * * @hidden */ toggleVisibility(value?: boolean): void; /** * Returns a reference to the top level parent column. * ```typescript * let topLevelParent = this.column.topLevelParent; * ``` */ get topLevelParent(): ColumnType | undefined; /** * @hidden @internal */ get headerCell(): IgxGridHeaderComponent; /** * @hidden @internal */ get filterCell(): IgxGridFilteringCellComponent; /** * @hidden @internal */ get headerGroup(): IgxGridHeaderGroupComponent; /** * Autosize the column to the longest currently visible cell value, including the header cell. * ```typescript * @ViewChild('grid') grid: IgxGridComponent; * let column = this.grid.columnList.filter(c => c.field === 'ID')[0]; * column.autosize(); * ``` * * @memberof IgxColumnComponent * @param byHeaderOnly Set if column should be autosized based only on the header content. */ autosize(byHeaderOnly?: boolean): void; /** * @hidden */ getAutoSize(byHeader?: boolean): string; /** * @hidden */ getCalcWidth(): any; /** * @hidden * Returns the width and padding of a header cell. */ getHeaderCellWidths(): igniteui_angular.ISizeInfo; /** * @hidden * Returns the size (in pixels) of the longest currently visible cell, including the header cell. * ```typescript * @ViewChild('grid') grid: IgxGridComponent; * * let column = this.grid.columnList.filter(c => c.field === 'ID')[0]; * let size = column.getLargestCellWidth(); * ``` * @memberof IgxColumnComponent */ getLargestCellWidth(): string; /** * @hidden */ getCellWidth(): string; /** * @hidden */ populateVisibleIndexes(): void; protected getColumnSizesString(children: QueryList): string; /** * @hidden * @internal */ getConstrainedSizePx(newSize: any): any; /** * @hidden * @internal */ protected cacheCalcWidth(): any; /** * @hidden * @internal */ protected setExpandCollapseState(): void; /** * @hidden * @internal */ protected checkCollapsibleState(): boolean; /** * @hidden */ get pinnable(): any; /** * @hidden */ get applySelectableClass(): boolean; /** * @hidden */ set applySelectableClass(value: boolean); static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; static ngAcceptInputType_sortable: unknown; static ngAcceptInputType_groupable: unknown; static ngAcceptInputType_editable: unknown; static ngAcceptInputType_filterable: unknown; static ngAcceptInputType_resizable: unknown; static ngAcceptInputType_autosizeHeader: unknown; static ngAcceptInputType_hasSummary: unknown; static ngAcceptInputType_hidden: unknown; static ngAcceptInputType_disableHiding: unknown; static ngAcceptInputType_disablePinning: unknown; static ngAcceptInputType_filteringIgnoreCase: unknown; static ngAcceptInputType_sortingIgnoreCase: unknown; static ngAcceptInputType_searchable: unknown; static ngAcceptInputType_pinned: unknown; static ngAcceptInputType_visibleWhenCollapsed: unknown; } /** * **Ignite UI for Angular Column Group** * * @igxParent IgxGridComponent, IgxTreeGridComponent, IgxHierarchicalGridComponent, IgxColumnGroupComponent, IgxRowIslandComponent */ declare class IgxColumnGroupComponent extends IgxColumnComponent implements AfterContentInit { /** * @deprecated in version 18.1.0. Use the `childColumns` property instead. */ children: QueryList; /** * Set if the column group is collapsible. * Default value is `false` * ```html * * ``` * * @memberof IgxColumnGroupComponent */ set collapsible(value: boolean); get collapsible(): boolean; /** * Set whether the group is expanded or collapsed initially. * Applied only if the collapsible property is set to `true` * Default value is `true` * ```html * const state = false * * ``` * * @memberof IgxColumnGroupComponent */ set expanded(value: boolean); get expanded(): boolean; /** * Gets the column group `summaries`. * ```typescript * let columnGroupSummaries = this.columnGroup.summaries; * ``` * * @memberof IgxColumnGroupComponent */ get summaries(): any; /** * Sets the column group `summaries`. * ```typescript * this.columnGroup.summaries = IgxNumberSummaryOperand; * ``` * * @memberof IgxColumnGroupComponent */ set summaries(classRef: any); /** * Sets/gets whether the column group is `searchable`. * Default value is `true`. * ```typescript * let isSearchable = this.columnGroup.searchable; * ``` * ```html * * ``` * * @memberof IgxColumnGroupComponent */ searchable: boolean; /** * Gets the column group `filters`. * ```typescript * let columnGroupFilters = this.columnGroup.filters; * ``` * * @memberof IgxColumnGroupComponent */ get filters(): any; /** * Sets the column group `filters`. * ```typescript * this.columnGroup.filters = IgxStringFilteringOperand; * ``` * * @memberof IgxColumnGroupComponent */ set filters(classRef: any); /** * Returns if the column group is selectable * ```typescript * let columnGroupSelectable = this.columnGroup.selectable; * ``` * * @memberof IgxColumnGroupComponent */ get selectable(): boolean; /** * @hidden */ set selectable(value: boolean); /** * @hidden */ get bodyTemplate(): TemplateRef; /** * @hidden */ set bodyTemplate(template: TemplateRef); /** * Allows you to define a custom template for expand/collapse indicator * * @memberof IgxColumnGroupComponent */ collapsibleIndicatorTemplate: TemplateRef; /** * @hidden */ get inlineEditorTemplate(): TemplateRef; /** * @hidden */ set inlineEditorTemplate(template: TemplateRef); /** * @hidden @internal */ get cells(): CellType[]; /** * Gets whether the column group is hidden. * ```typescript * let isHidden = this.columnGroup.hidden; * ``` * * @memberof IgxColumnGroupComponent */ get hidden(): boolean; /** * Sets the column group hidden property. * ```html * * ``` * * Two-way data binding * ```html * * ``` * * @memberof IgxColumnGroupComponent */ set hidden(value: boolean); /** * Returns if the column group is selected. * ```typescript * let isSelected = this.columnGroup.selected; * ``` * * @memberof IgxColumnGroupComponent */ get selected(): boolean; /** * Select/deselect the column group. * ```typescript * this.columnGroup.selected = true; * ``` * * @memberof IgxColumnGroupComponent */ set selected(value: boolean); /** * @hidden */ ngAfterContentInit(): void; /** * A list containing all the child columns under this column (if any). * Empty without children or if this column is not Group or Layout. */ get childColumns(): ColumnType[]; /** @hidden @internal **/ get allChildren(): IgxColumnComponent[]; /** * Returns a boolean indicating if the column is a `ColumnGroup`. * ```typescript * let isColumnGroup = this.columnGroup.columnGroup * ``` * * @memberof IgxColumnGroupComponent */ get columnGroup(): boolean; /** * Returns a boolean indicating if the column is a `ColumnLayout` for multi-row layout. * ```typescript * let columnGroup = this.column.columnGroup; * ``` * * @memberof IgxColumnComponent */ get columnLayout(): boolean; /** * Gets the width of the column group. * ```typescript * let columnGroupWidth = this.columnGroup.width; * ``` * * @memberof IgxColumnGroupComponent */ get width(): string; set width(val: string); /** @hidden @internal **/ get resolvedWidth(): string; /** * @hidden */ get applySelectableClass(): boolean; /** * @hidden */ set applySelectableClass(value: boolean); /** * @hidden * Calculates the number of visible columns, based on indexes of first and last visible columns. */ calcChildren(): number; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; static ngAcceptInputType_collapsible: unknown; static ngAcceptInputType_expanded: unknown; static ngAcceptInputType_searchable: unknown; static ngAcceptInputType_hidden: unknown; } /** * Column layout for declaration of Multi-row Layout * * @igxParent IgxGridComponent */ declare class IgxColumnLayoutComponent extends IgxColumnGroupComponent implements AfterContentInit { /** @hidden @internal **/ childrenVisibleIndexes: any[]; /** * Gets the width of the column layout. * ```typescript * let columnGroupWidth = this.columnGroup.width; * ``` * * @memberof IgxColumnGroupComponent */ get width(): any; set width(val: any); get columnLayout(): boolean; /** * @hidden */ getCalcWidth(): any; /** * Gets the column visible index. * If the column is not visible, returns `-1`. * ```typescript * let visibleColumnIndex = this.column.visibleIndex; * ``` * * @memberof IgxColumnComponent */ get visibleIndex(): number; get hidden(): boolean; /** * Sets the column layout hidden property. * ```typescript * * ``` * * @memberof IgxColumnGroupComponent */ set hidden(value: boolean); /** * @hidden */ ngAfterContentInit(): void; /** @hidden @internal **/ get hasLastPinnedChildColumn(): boolean; /** @hidden @internal **/ get hasFirstPinnedChildColumn(): boolean; /** * @hidden */ populateVisibleIndexes(): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; static ngAcceptInputType_hidden: unknown; } declare const IGX_GRID_VALIDATION_DIRECTIVES: readonly [typeof IgxColumnRequiredValidatorDirective, typeof IgxColumnMinValidatorDirective, typeof IgxColumnMaxValidatorDirective, typeof IgxColumnEmailValidatorDirective, typeof IgxColumnMinLengthValidatorDirective, typeof IgxColumnMaxLengthValidatorDirective, typeof IgxColumPatternValidatorDirective]; interface ColumnGroupsCache { level: number; visibleIndex: number; } interface IActiveNode { gridID?: string; row: number; column?: number; level?: number; mchCache?: ColumnGroupsCache; layout?: IMultiRowLayoutNode; } /** @hidden */ declare class IgxGridNavigationService { protected platform: PlatformUtil; grid: GridType; _activeNode: IActiveNode; lastActiveNode: IActiveNode; protected pendingNavigation: boolean; get activeNode(): IActiveNode; set activeNode(value: IActiveNode); constructor(platform: PlatformUtil); handleNavigation(event: KeyboardEvent): void; dispatchEvent(event: KeyboardEvent): void; summaryNav(event: KeyboardEvent): void; headerNavigation(event: KeyboardEvent): void; focusTbody(event: any): void; focusFirstCell(header?: boolean): void; isColumnFullyVisible(columnIndex: number): boolean; shouldPerformHorizontalScroll(visibleColIndex: number, rowIndex?: number): boolean; shouldPerformVerticalScroll(targetRowIndex: number, _visibleColIndex: number): boolean; performVerticalScrollToCell(rowIndex: number, visibleColIndex?: number, cb?: () => void): void; performHorizontalScrollToCell(visibleColumnIndex: number, cb?: () => void): void; isDataRow(rowIndex: number, includeSummary?: boolean): boolean; isGroupRow(rowIndex: number): boolean; setActiveNode(activeNode: IActiveNode): void; isActiveNodeChanged(activeNode: IActiveNode): boolean; /** Focus the Grid section (header, body, footer) depending on the current activeNode */ restoreActiveNodeFocus(): void; protected getNextPosition(rowIndex: number, colIndex: number, key: string, shift: boolean, ctrl: boolean, event: KeyboardEvent): { rowIndex: number; colIndex: number; }; protected horizontalNav(event: KeyboardEvent, key: string, rowIndex: number, tag: GridKeydownTargetType): void; get lastColumnIndex(): number; get displayContainerWidth(): number; get displayContainerScrollLeft(): number; get containerTopOffset(): number; protected getColumnUnpinnedIndex(visibleColumnIndex: number): number; protected forOfDir(): IgxForOfDirective; protected handleAlt(key: string, event: KeyboardEvent): void; protected handleEditing(shift: boolean, event: KeyboardEvent): void; protected navigateInBody(rowIndex: any, visibleColIndex: any, cb?: (arg: any) => void): void; protected emitKeyDown(type: GridKeydownTargetType, rowIndex: any, event: any): true; protected isColumnPinned(columnIndex: number, forOfDir: IgxForOfDirective): boolean; protected findFirstDataRowIndex(): number; protected findLastDataRowIndex(): number; protected getRowElementByIndex(index: any): any; protected isValidPosition(rowIndex: number, colIndex: number): boolean; protected performHeaderKeyCombination(column: any, key: any, shift: any, ctrl: any, alt: any, event: any): void; private firstVisibleNode; private handleMCHeaderNav; private handleMCHExpandCollapse; private handleColumnSelection; private getNextColumnMCH; private get currentActiveColumn(); private isActiveNode; private isToggleKey; private isAddKey; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵprov: i0.ɵɵInjectableDeclaration; } interface IQueryBuilderResourceStrings { igx_query_builder_date_placeholder?: string; igx_query_builder_time_placeholder?: string; igx_query_builder_datetime_placeholder?: string; igx_query_builder_filter_operator_and?: string; igx_query_builder_filter_operator_or?: string; igx_query_builder_filter_contains?: string; igx_query_builder_filter_doesNotContain?: string; igx_query_builder_filter_startsWith?: string; igx_query_builder_filter_endsWith?: string; igx_query_builder_filter_equals?: string; igx_query_builder_filter_doesNotEqual?: string; igx_query_builder_filter_empty?: string; igx_query_builder_filter_notEmpty?: string; igx_query_builder_filter_null?: string; igx_query_builder_filter_notNull?: string; igx_query_builder_filter_in?: string; igx_query_builder_filter_notIn?: string; igx_query_builder_filter_before?: string; igx_query_builder_filter_after?: string; igx_query_builder_filter_at?: string; igx_query_builder_filter_not_at?: string; igx_query_builder_filter_at_before?: string; igx_query_builder_filter_at_after?: string; igx_query_builder_filter_today?: string; igx_query_builder_filter_yesterday?: string; igx_query_builder_filter_thisMonth?: string; igx_query_builder_filter_lastMonth?: string; igx_query_builder_filter_nextMonth?: string; igx_query_builder_filter_thisYear?: string; igx_query_builder_filter_lastYear?: string; igx_query_builder_filter_nextYear?: string; igx_query_builder_filter_greaterThan?: string; igx_query_builder_filter_lessThan?: string; igx_query_builder_filter_greaterThanOrEqualTo?: string; igx_query_builder_filter_lessThanOrEqualTo?: string; igx_query_builder_filter_true?: string; igx_query_builder_filter_false?: string; igx_query_builder_filter_all?: string; igx_query_builder_from_label?: string; igx_query_builder_select_label?: string; igx_query_builder_where_label?: string; igx_query_builder_and_group?: string; igx_query_builder_or_group?: string; igx_query_builder_end_group?: string; igx_query_builder_and_label?: string; igx_query_builder_or_label?: string; igx_query_builder_switch_group?: string; igx_query_builder_add_condition?: string; igx_query_builder_add_group?: string; igx_query_builder_add_condition_root?: string; igx_query_builder_add_group_root?: string; igx_query_builder_ungroup?: string; igx_query_builder_delete?: string; igx_query_builder_delete_filters?: string; igx_query_builder_initial_text?: string; igx_query_builder_column_placeholder?: string; igx_query_builder_condition_placeholder?: string; igx_query_builder_value_placeholder?: string; igx_query_builder_query_value_placeholder?: string; igx_query_builder_all_fields?: string; igx_query_builder_details?: string; igx_query_builder_search?: string; igx_query_builder_select_all?: string; igx_query_builder_select_entity?: string; igx_query_builder_select_return_field_single?: string; igx_query_builder_select_return_fields?: string; igx_query_builder_dialog_title?: string; igx_query_builder_dialog_message?: string; igx_query_builder_dialog_checkbox_text?: string; igx_query_builder_dialog_cancel?: string; igx_query_builder_dialog_confirm?: string; igx_query_builder_drop_ghost_text?: string; } declare const QueryBuilderResourceStringsEN: IQueryBuilderResourceStrings; declare class IgxSelectItemComponent extends IgxDropDownItemComponent { /** @hidden @internal */ isHeader: boolean; private _text; /** * Gets/Sets the item's text to be displayed in the select component's input when the item is selected. * * ```typescript * //get * let mySelectedItem = this.dropDown.selectedItem; * let selectedItemText = mySelectedItem.text; * ``` * * ```html * // set * * ``` */ get text(): string; set text(text: string); /** @hidden @internal */ get itemText(): any; /** * Sets/Gets if the item is the currently selected one in the select * * ```typescript * let mySelectedItem = this.select.selectedItem; * let isMyItemSelected = mySelectedItem.selected; // true * ``` */ get selected(): any; set selected(value: any); static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** @hidden @internal */ interface IgxSelectBase extends IgxDropDownBaseDirective { input: IgxInputDirective; readonly selectedItem: IgxDropDownItemBaseDirective; open(overlaySettings?: OverlaySettings): any; close(): any; toggle(overlaySettings?: OverlaySettings): any; calculateScrollPosition(item: IgxDropDownItemBaseDirective): number; getFirstItemElement(): HTMLElement; getEditElement(): HTMLElement; } /** @hidden @internal */ declare class IgxSelectToggleIconDirective { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** @hidden @internal */ declare class IgxSelectHeaderDirective { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** @hidden @internal */ declare class IgxSelectFooterDirective { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * **Ignite UI for Angular Select** - * [Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/select) * * The `igxSelect` provides an input with dropdown list allowing selection of a single item. * * Example: * ```html * * * * {{ item.field }} * * * ``` */ declare class IgxSelectComponent extends IgxDropDownComponent implements IgxSelectBase, ControlValueAccessor, AfterContentInit, OnInit, AfterViewInit, OnDestroy, EditorProvider, AfterContentChecked { protected overlayService: IgxOverlayService; private _inputGroupType; private _injector; /** @hidden @internal */ inputGroup: IgxInputGroupComponent; /** @hidden @internal */ input: IgxInputDirective; /** @hidden @internal */ children: QueryList; protected prefixes: QueryList; protected suffixes: QueryList; /** @hidden @internal */ label: IgxLabelDirective; /** * Sets input placeholder. * */ placeholder: any; /** * Disables the component. * ```html * * ``` */ disabled: boolean; /** * Sets custom OverlaySettings `IgxSelectComponent`. * ```html * * ``` */ overlaySettings: OverlaySettings; /** @hidden @internal */ maxHeight: string; /** * Emitted before the dropdown is opened * * ```html * * ``` */ opening: EventEmitter; /** * Emitted after the dropdown is opened * * ```html * * ``` */ opened: EventEmitter; /** * Emitted before the dropdown is closed * * ```html * * ``` */ closing: EventEmitter; /** * Emitted after the dropdown is closed * * ```html * * ``` */ closed: EventEmitter; /** * The custom template, if any, that should be used when rendering the select TOGGLE(open/close) button * * ```typescript * // Set in typescript * const myCustomTemplate: TemplateRef = myComponent.customTemplate; * myComponent.select.toggleIconTemplate = myCustomTemplate; * ``` * ```html * * * ... * * {{ collapsed ? 'remove_circle' : 'remove_circle_outline'}} * * * ``` */ toggleIconTemplate: TemplateRef; /** * The custom template, if any, that should be used when rendering the HEADER for the select items list * * ```typescript * // Set in typescript * const myCustomTemplate: TemplateRef = myComponent.customTemplate; * myComponent.select.headerTemplate = myCustomTemplate; * ``` * ```html * * * ... * *
* This is a custom header *
*
*
* ``` */ headerTemplate: TemplateRef; /** * The custom template, if any, that should be used when rendering the FOOTER for the select items list * * ```typescript * // Set in typescript * const myCustomTemplate: TemplateRef = myComponent.customTemplate; * myComponent.select.footerTemplate = myCustomTemplate; * ``` * ```html * * * ... * * * * * ``` */ footerTemplate: TemplateRef; private hintElement; /** @hidden @internal */ width: string; /** @hidden @internal do not use the drop-down container class */ cssClass: boolean; /** @hidden @internal */ allowItemsFocus: boolean; /** @hidden @internal */ height: string; private ngControl; private _overlayDefaults; private _value; private _type; /** * Gets/Sets the component value. * * ```typescript * // get * let selectValue = this.select.value; * ``` * * ```typescript * // set * this.select.value = 'London'; * ``` * ```html * * ``` */ get value(): any; set value(v: any); /** * Sets how the select will be styled. * The allowed values are `line`, `box` and `border`. The input-group default is `line`. * ```html * * ``` */ get type(): IgxInputGroupType; set type(val: IgxInputGroupType); /** @hidden @internal */ get selectionValue(): any; /** @hidden @internal */ get selectedItem(): IgxSelectItemComponent; private _onChangeCallback; private _onTouchedCallback; constructor(elementRef: ElementRef, cdr: ChangeDetectorRef, document: any, selection: IgxSelectionAPIService, overlayService: IgxOverlayService, _inputGroupType: IgxInputGroupType, _injector: Injector); /** @hidden @internal */ writeValue: (value: any) => void; /** @hidden @internal */ registerOnChange(fn: any): void; /** @hidden @internal */ registerOnTouched(fn: any): void; /** @hidden @internal */ setDisabledState(isDisabled: boolean): void; /** @hidden @internal */ getEditElement(): HTMLInputElement; /** @hidden @internal */ selectItem(newSelection: IgxDropDownItemBaseDirective, event?: any): void; /** @hidden @internal */ getFirstItemElement(): HTMLElement; /** * Opens the select * * ```typescript * this.select.open(); * ``` */ open(overlaySettings?: OverlaySettings): void; inputGroupClick(event: MouseEvent, overlaySettings?: OverlaySettings): void; /** @hidden @internal */ ngAfterContentInit(): void; /** * Event handlers * * @hidden @internal */ handleOpening(e: ToggleViewCancelableEventArgs): void; /** @hidden @internal */ onToggleContentAppended(event: ToggleViewEventArgs): void; /** @hidden @internal */ handleOpened(): void; /** @hidden @internal */ handleClosing(e: ToggleViewCancelableEventArgs): void; /** @hidden @internal */ handleClosed(): void; /** @hidden @internal */ onBlur(): void; /** @hidden @internal */ onFocus(): void; /** * @hidden @internal */ ngOnInit(): void; /** * @hidden @internal */ ngAfterViewInit(): void; /** @hidden @internal */ ngAfterContentChecked(): void; /** @hidden @internal */ get toggleIcon(): string; /** * @hidden @internal * Prevent input blur - closing the items container on Header/Footer Template click. */ mousedownHandler(event: any): void; protected onStatusChanged(): void; private get isTouchedOrDirty(); private get hasValidators(); protected navigate(direction: Navigate, currentIndex?: number): void; protected manageRequiredAsterisk(): void; private setSelection; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; static ngAcceptInputType_disabled: unknown; } /** * Defines the custom template that will be used for the search value input of condition in edit mode * * @igxModule IgxQueryBuilderModule * @igxKeywords query builder, query builder search value * @igxGroup Data entry and display * * @example * * * * * */ declare class IgxQueryBuilderSearchValueTemplateDirective { template: TemplateRef; constructor(template: TemplateRef); static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * @hidden @internal */ declare class ExpressionItem { parent: ExpressionGroupItem; expanded: boolean; constructor(parent?: ExpressionGroupItem); } /** * @hidden @internal */ declare class ExpressionGroupItem extends ExpressionItem { operator: FilteringLogic; children: ExpressionItem[]; constructor(operator: FilteringLogic, parent?: ExpressionGroupItem); } /** * @hidden @internal */ declare class ExpressionOperandItem extends ExpressionItem { expression: IFilteringExpression; inEditMode: boolean; inAddMode: boolean; hovered: boolean; focused: boolean; fieldLabel: string; constructor(expression: IFilteringExpression, parent: ExpressionGroupItem); } /** @hidden @internal */ declare class IgxQueryBuilderDragService { /** The ExpressionItem that's actually the drop ghost's content */ dropGhostExpression: ExpressionItem; isKeyboardDrag: boolean; private _queryBuilderTreeComponent; private _queryBuilderTreeComponentElRef; private _sourceExpressionItem; private _sourceElement; private _targetExpressionItem; private _dropUnder; private _ghostChipMousemoveSubscription$; private _keyboardSubscription$; private _keyDragCurrentIndex; private _keyDragInitialIndex; private _isKeyDragsFirstMove; /** Stores a flat ordered list of possible drop locations as Tuple <[targetExpression, dropUnder]>, while performing the keyboard drag&drop */ private _possibleDropLocations; private _timeoutId; /** Get the dragged ghost as a HTMLElement*/ private get getDragGhostElement(); /** Get the drop ghost chip component */ private get getDropGhostElement(); private get getMainExpressionTree(); register(tree: IgxQueryBuilderTreeComponent, el: ElementRef): void; /** When chip is picked up for dragging * * @param sourceDragElement The HTML element of the chip that's been dragged * @param sourceExpressionItem The expressionItem of the chip that's been dragged * @param isKeyboardDrag If it's a mouse drag or keyboard reorder * */ onMoveStart(sourceDragElement: HTMLElement, sourceExpressionItem: ExpressionItem, isKeyboardDrag: boolean): void; /** When dragged chip is let go outside a proper drop zone */ onMoveEnd(): void; /** When mouse drag enters a chip's area * @param targetDragElement The HTML element of the drop area chip that's been dragged to * @param targetExpressionItem The expressionItem of the drop area chip that's been dragged to */ onChipEnter(targetDragElement: HTMLElement, targetExpressionItem: ExpressionItem): void; /** When mouse drag moves in a div's drop area * @param targetDragElement The HTML element of the drop area chip that's been dragged to * @param targetExpressionItem The expressionItem of the drop area chip that's been dragged to */ onDivOver(targetDragElement: HTMLElement, targetExpressionItem: ExpressionItem): void; /** When mouse drag moves in a chip's drop area * @param targetDragElement The HTML element of the drop area chip that's been dragged to */ onChipOver(targetDragElement: HTMLElement): void; /** When mouse drag leaves a chip's drop area */ onChipLeave(): void; /** When dragged chip is let go in div's drop area * @param targetExpressionItem The expressionItem of the drop area chip that's been dragged to */ onDivDropped(targetExpressionItem: ExpressionItem): void; /** When dragged chip is let go in chip's drop area */ onChipDropped(): void; /** When mouse drag moves in a AND/OR drop area * @param targetDragElement The HTML element of the drop area chip that's been dragged to * @param targetExpressionItem The expressionItem of the drop area chip that's been dragged to */ onGroupRootOver(targetDragElement: HTMLElement, targetExpressionItem: ExpressionGroupItem): void; /** When mouse drag moves in 'Add condition' button's drop area * @param addConditionElement The Add condition button HTML Element * @param rootGroup The root group of the query tree */ onAddConditionEnter(addConditionElement: HTMLElement, rootGroup: ExpressionGroupItem): void; /** When chip's drag indicator is focused * * @param sourceDragElement The HTML element of the chip that's been dragged * @param sourceExpressionItem The expressionItem of the chip that's been dragged * */ onChipDragIndicatorFocus(sourceDragElement: HTMLElement, sourceExpressionItem: ExpressionItem): void; /** When chip's drag indicator looses focus*/ onChipDragIndicatorFocusOut(): void; /** Upon blurring the tree, if Keyboard drag is underway and the next active item is not the drop ghost's drag indicator icon, cancel the drag&drop procedure*/ onDragFocusOut(): void; /** Checks if the dragged ghost is horizontally on the same line with the drop ghost*/ private dragGhostIsOnDropGhostRow; /** Checks if the dragged ghost is north or south of a target element's center*/ private ghostInLowerPart; /** Make a copy of the _sourceExpressionItem's chip and paste it in the tree north or south of the _targetExpressionItem's chip */ private renderDropGhostChip; /** Set the cursor when dragging a ghost*/ private setDragCursor; /** Removes the drop ghost expression from the tree and it's chip effectively */ private clearDropGhost; /** Reset Drag&Drop vars. Optionally the drag source vars too*/ private resetDragAndDrop; /** Start listening for drag and drop specific keys */ private listenToKeyboard; /** Perform up/down movement of drop ghost along the expression tree*/ private arrowDrag; /** Produces a flat ordered list of possible drop locations as Tuple <[targetExpression, dropUnder]>, while performing the keyboard drag&drop */ private getPossibleDropLocations; /** Counts how many chips will be in the tree (from top to bottom) before the dropped one */ private countChipsBeforeDropLocation; /** Sets the z-index of the drag ghost with a little delay, since we don't have access to ghostCreated() but we know it's executed right after moveStart() */ private setDragGhostZIndex; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵprov: i0.ɵɵInjectableDeclaration; } /** @hidden */ declare class IgxQueryBuilderTreeComponent implements AfterViewInit, OnDestroy { cdr: ChangeDetectorRef; dragService: IgxQueryBuilderDragService; protected platform: PlatformUtil; private elRef; protected _localeId: string; /** * @hidden @internal */ _expressionTree: IExpressionTree; /** * @hidden @internal */ _expressionTreeCopy: IExpressionTree; /** * @hidden @internal */ get getClass(): string; /** * Sets/gets the entities. */ entities: EntityType[]; /** * Sets/gets the parent query builder component. */ queryBuilder: IgxQueryBuilderComponent; /** * Sets/gets the search value template. */ searchValueTemplate: TemplateRef; /** * Returns the parent expression operand. */ get parentExpression(): ExpressionOperandItem; /** * Sets the parent expression operand. */ set parentExpression(value: ExpressionOperandItem); /** * Returns the fields. */ get fields(): FieldType[]; /** * Sets the fields. */ set fields(fields: FieldType[]); /** * Returns the expression tree. */ get expressionTree(): IExpressionTree; /** * Sets the expression tree. */ set expressionTree(expressionTree: IExpressionTree); /** * Gets the `locale` of the query builder. * If not set, defaults to application's locale. */ get locale(): string; /** * Sets the `locale` of the query builder. * Expects a valid BCP 47 language tag. */ set locale(value: string); /** * Sets the resource strings. * By default it uses EN resources. */ set resourceStrings(value: IQueryBuilderResourceStrings); /** * Returns the resource strings. */ get resourceStrings(): IQueryBuilderResourceStrings; /** * Gets/sets the expected return field. */ expectedReturnField: string; /** * Event fired as the expression tree is changed. */ expressionTreeChange: EventEmitter; /** * Event fired if a nested query builder tree is being edited. */ inEditModeChange: EventEmitter; protected entitySelect: IgxSelectComponent; private editingInputs; private returnFieldsCombo; protected returnFieldSelect: IgxSelectComponent; private fieldSelect; private conditionSelect; private searchValueInput; private picker; private addRootAndGroupButton; private addConditionButton; private entityChangeDialog; private addExpressionItemDropDown; private groupContextMenuDropDown; /** * @hidden @internal */ expressionsChips: QueryList; protected set editingInputsContainer(value: ElementRef); /** @hidden */ protected get editingInputsContainer(): ElementRef; protected set currentGroupButtonsContainer(value: ElementRef); /** @hidden */ protected get currentGroupButtonsContainer(): ElementRef; private expressionsContainer; private overlayOutlet; private innerQueries; /** * @hidden @internal */ innerQueryNewExpressionTree: IExpressionTree; /** * @hidden @internal */ rootGroup: ExpressionGroupItem; /** * @hidden @internal */ selectedExpressions: ExpressionOperandItem[]; /** * @hidden @internal */ currentGroup: ExpressionGroupItem; /** * @hidden @internal */ contextualGroup: ExpressionGroupItem; /** * @hidden @internal */ filteringLogics: any; /** * @hidden @internal */ selectedCondition: string; /** * @hidden @internal */ searchValue: { value: any; }; /** * @hidden @internal */ pickerOutlet: IgxOverlayOutletDirective | ElementRef; /** * @hidden @internal */ prevFocusedExpression: ExpressionOperandItem; /** * @hidden @internal */ initialOperator: number; /** * @hidden @internal */ returnFieldSelectOverlaySettings: OverlaySettings; /** * @hidden @internal */ entitySelectOverlaySettings: OverlaySettings; /** * @hidden @internal */ fieldSelectOverlaySettings: OverlaySettings; /** * @hidden @internal */ conditionSelectOverlaySettings: OverlaySettings; /** * @hidden @internal */ addExpressionDropDownOverlaySettings: OverlaySettings; /** * @hidden @internal */ groupContextMenuDropDownOverlaySettings: OverlaySettings; private destroy$; private _timeoutId; private _lastFocusedChipIndex; private _focusDelay; private _parentExpression; private _selectedEntity; private _selectedReturnFields; private _selectedField; private _editingInputsContainer; private _currentGroupButtonsContainer; private _addModeExpression; private _editedExpression; private _preventInit; private _prevFocusedContainer; private _expandedExpressions; private _fields; private _locale; private _entityNewValue; private _resourceStrings; /** * Returns if the select entity dropdown at the root level is disabled after the initial selection. */ get disableEntityChange(): boolean; /** * Returns if the fields combo at the root level is disabled. */ get disableReturnFieldsChange(): boolean; /** * Returns the current level. */ get level(): number; private _positionSettings; private _overlaySettings; /** @hidden */ protected isAdvancedFiltering(): boolean; /** @hidden */ protected isHierarchicalNestedQuery(): boolean; /** @hidden */ protected isSearchValueInputDisabled(): boolean; constructor(cdr: ChangeDetectorRef, dragService: IgxQueryBuilderDragService, platform: PlatformUtil, elRef: ElementRef, _localeId: string); /** * @hidden @internal */ ngAfterViewInit(): void; /** * @hidden @internal */ ngOnDestroy(): void; /** * @hidden @internal */ set selectedEntity(value: string); /** * @hidden @internal */ get selectedEntity(): EntityType; /** * @hidden @internal */ onEntitySelectChanging(event: ISelectionEventArgs): void; /** * @hidden */ onShowEntityChangeDialogChange(eventArgs: IChangeCheckboxEventArgs): void; /** * @hidden */ onEntityChangeCancel(): void; /** * @hidden */ onEntityChangeConfirm(): void; /** * @hidden @internal */ set selectedReturnFields(value: string[]); /** * @hidden @internal */ get selectedReturnFields(): string[]; /** * @hidden @internal */ set selectedField(value: FieldType); /** * @hidden @internal */ get selectedField(): FieldType; /** * @hidden @internal * * used by the grid */ setPickerOutlet(outlet?: IgxOverlayOutletDirective | ElementRef): void; /** * @hidden @internal * * used by the grid */ get isContextMenuVisible(): boolean; /** * @hidden @internal */ get hasEditedExpression(): boolean; /** * @hidden @internal */ addCondition(parent: ExpressionGroupItem, afterExpression?: ExpressionOperandItem, isUIInteraction?: boolean): void; /** * @hidden @internal */ addReverseGroup(parent?: ExpressionGroupItem, afterExpression?: ExpressionItem): void; /** * @hidden @internal */ endGroup(groupItem: ExpressionGroupItem): void; /** * @hidden @internal */ commitExpression(): void; /** * @hidden @internal */ discardExpression(expressionItem?: ExpressionOperandItem): void; /** * @hidden @internal */ commitOperandEdit(): void; /** * @hidden @internal */ cancelOperandAdd(): void; /** * @hidden @internal */ deleteItem: (expressionItem: ExpressionItem, skipEmit?: boolean) => void; /** * @hidden @internal */ cancelOperandEdit(): void; /** * @hidden @internal */ operandCanBeCommitted(): boolean; /** * @hidden @internal */ canCommitCurrentState(): boolean; /** * @hidden @internal */ commitCurrentState(): void; /** * @hidden @internal */ exitEditAddMode(shouldPreventInit?: boolean): void; /** * @hidden @internal * * used by the grid */ exitOperandEdit(): void; /** * @hidden @internal */ isExpressionGroup(expression: ExpressionItem): boolean; /** * @hidden @internal */ onExpressionFocus(expressionItem: ExpressionOperandItem): void; /** * @hidden @internal */ onExpressionBlur(event: any, expressionItem: ExpressionOperandItem): void; /** * @hidden @internal */ onChipRemove(expressionItem: ExpressionItem): void; /** * @hidden @internal */ focusChipAfterDrag: (index: number) => void; /** * @hidden @internal */ addExpressionBlur(): void; /** * @hidden @internal */ onChipClick(expressionItem: ExpressionOperandItem, chip: IgxChipComponent): void; /** * @hidden @internal */ enterExpressionEdit(expressionItem: ExpressionOperandItem, chip?: IgxChipComponent): void; /** * @hidden @internal */ clickExpressionAdd(targetButton: HTMLElement, chip: IgxChipComponent): void; /** * @hidden @internal */ openExpressionAddDialog(targetButton: HTMLElement): void; /** * @hidden @internal */ enterExpressionAdd(event: ISelectionEventArgs, expressionItem: ExpressionOperandItem): void; /** * @hidden @internal */ enterEditMode(expressionItem: ExpressionOperandItem): void; /** * @hidden @internal */ onConditionSelectChanging(event: ISelectionEventArgs): void; /** * @hidden @internal */ onKeyDown(eventArgs: KeyboardEvent): void; /** * @hidden @internal */ onGroupClick(groupContextMenuDropDown: any, targetButton: HTMLButtonElement, groupItem: ExpressionGroupItem): void; /** * @hidden @internal */ getOperator(expressionItem: any): any; /** * @hidden @internal */ getSwitchGroupText(expressionItem: any): string; /** * @hidden @internal */ onGroupContextMenuDropDownSelectionChanging(event: ISelectionEventArgs): void; /** * @hidden @internal */ ungroup(): void; /** * @hidden @internal */ selectFilteringLogic(index: number): void; /** * @hidden @internal */ getConditionFriendlyName(name: string): string; /** * @hidden @internal */ isDate(value: any): value is Date; /** * @hidden @internal */ invokeClick(eventArgs: KeyboardEvent): void; /** * @hidden @internal */ openPicker(args: KeyboardEvent): void; /** * @hidden @internal */ onOutletPointerDown(event: any): void; /** * @hidden @internal */ getConditionList(): string[]; /** * @hidden @internal */ getFormatter(field: string): (value: any, rowData?: any) => any; /** * @hidden @internal */ getFormat(field: string): string; /** * @hidden @internal * * used by the grid */ setAddButtonFocus(): void; /** * @hidden @internal */ context(expression: ExpressionItem, afterExpression?: ExpressionItem): { $implicit: ExpressionItem; afterExpression: ExpressionItem; }; formatReturnFields(innerTree: IFilteringExpressionsTree): string; isInEditMode(): boolean; onInEditModeChanged(expressionItem: ExpressionOperandItem): void; getExpressionTreeCopy(expressionTree: IExpressionTree, shouldAssignInnerQueryExprTree?: boolean): IExpressionTree; onSelectAllClicked(): void; onReturnFieldSelectChanging(event: IComboSelectionChangingEventArgs | ISelectionEventArgs): void; initExpressionTree(selectedEntityName: string, selectedReturnFields: string[]): void; getSearchValueTemplateContext(defaultSearchValueTemplate: any): any; private getPipeArgs; private selectDefaultCondition; private getFilters; private addGroup; private createExpressionGroupItem; private createExpressionTreeFromGroupItem; private scrollElementIntoView; private focusEditedExpressionChip; private init; /** rootGroup is recreated after clicking Apply, which sets new expressionTree and calls init()*/ protected trackExpressionItem: typeof trackByIdentity; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * A component used for operating with complex filters by creating or editing conditions * and grouping them using AND/OR logic. * It is used internally in the Advanced Filtering of the Grid. * * @example * ```html * * * ``` */ declare class IgxQueryBuilderComponent implements OnDestroy { protected iconService: IgxIconService; /** * @hidden @internal */ cssClass: string; /** * @hidden @internal */ display: string; /** * Gets/sets whether the confirmation dialog should be shown when changing entity. * Default value is `true`. */ showEntityChangeDialog: boolean; /** * Returns the entities. * @hidden */ get entities(): EntityType[]; /** * Sets the entities. * @hidden */ set entities(entities: EntityType[]); /** * Returns the fields. * @hidden * @deprecated in version 19.1.0. Use the `entities` property instead. */ get fields(): FieldType[]; /** * Sets the fields. * @hidden * @deprecated in version 19.1.0. Use the `entities` property instead. */ set fields(fields: FieldType[]); /** * Returns the expression tree. */ get expressionTree(): IExpressionTree; /** * Sets the expression tree. */ set expressionTree(expressionTree: IExpressionTree); /** * Gets the `locale` of the query builder. * If not set, defaults to application's locale. */ locale: string; /** * Sets the resource strings. * By default it uses EN resources. */ set resourceStrings(value: IQueryBuilderResourceStrings); /** * Returns the resource strings. */ get resourceStrings(): IQueryBuilderResourceStrings; /** * Disables subsequent entity changes at the root level after the initial selection. */ disableEntityChange: boolean; /** * Disables return fields changes at the root level. */ disableReturnFieldsChange: boolean; /** * Event fired as the expression tree is changed. * * ```html * * ``` */ expressionTreeChange: EventEmitter; /** * @hidden @internal */ searchValueTemplate: TemplateRef; /** * @hidden @internal */ queryTree: IgxQueryBuilderTreeComponent; private destroy$; private _resourceStrings; private _expressionTree; private _fields; private _entities; private _shouldEmitTreeChange; constructor(iconService: IgxIconService); /** * Returns whether the expression tree can be committed in the current state. */ canCommit(): boolean; /** * Commits the expression tree in the current state if it is valid. If not throws an exception. */ commit(): void; /** * Discards all unsaved changes to the expression tree. */ discard(): void; /** * @hidden @internal */ ngOnDestroy(): void; /** * @hidden @internal * * used by the grid */ setPickerOutlet(outlet?: IgxOverlayOutletDirective | ElementRef): void; /** * @hidden @internal * * used by the grid */ get isContextMenuVisible(): boolean; /** * @hidden @internal * * used by the grid */ exitOperandEdit(): void; /** * @hidden @internal * * used by the grid */ setAddButtonFocus(): void; onExpressionTreeChange(tree: IExpressionTree): void; private registerSVGIcons; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; static ngAcceptInputType_showEntityChangeDialog: unknown; } /** * A component used for presenting advanced filtering UI for a Grid. * It is used internally in the Grid, but could also be hosted in a container outside of it. * * Example: * ```html * * * ``` */ declare class IgxAdvancedFilteringDialogComponent implements AfterViewInit, OnDestroy { cdr: ChangeDetectorRef; protected platform: PlatformUtil; /** * @hidden @internal */ queryBuilder: IgxQueryBuilderComponent; /** * @hidden @internal */ display: string; /** * @hidden @internal */ inline: boolean; /** * @hidden @internal */ lastActiveNode: IActiveNode; private destroy$; private _overlayComponentId; private _overlayService; private _grid; constructor(cdr: ChangeDetectorRef, platform: PlatformUtil); /** * @hidden @internal */ ngAfterViewInit(): void; /** * @hidden @internal */ ngOnDestroy(): void; /** * Assigns the grid instance corresponding to the advanced filtering dialog instance. */ set grid(grid: GridType); /** * Returns the grid. */ get grid(): GridType; /** * @hidden @internal */ get filterableFields(): FieldType[]; /** * @hidden @internal */ dragStart(dragArgs: IDragStartEventArgs): void; /** * @hidden @internal */ onDragMove(e: any): void; /** * @hidden @internal */ onKeyDown(eventArgs: KeyboardEvent): void; /** * @hidden @internal */ initialize(grid: GridType, overlayService: IgxOverlayService, overlayComponentId: string): void; /** * @hidden @internal */ onClearButtonClick(event?: Event): void; /** * @hidden @internal */ closeDialog(): void; /** * @hidden @internal */ applyChanges(event?: Event): void; /** * @hidden @internal */ cancelChanges(): void; /** * @hidden @internal */ onApplyButtonClick(event?: Event): void; /** * @hidden @internal */ generateEntity(): EntityType[]; private assignResourceStrings; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } declare abstract class BaseFilteringComponent { protected cdr: ChangeDetectorRef; element: ElementRef; protected platform: PlatformUtil; abstract column: any; abstract get grid(): any; abstract overlayComponentId: string; abstract mainDropdown: ElementRef; abstract expressionsList: ExpressionUI[]; abstract listData: FilterListItem[]; abstract isHierarchical: boolean; abstract loadingStart: EventEmitter; abstract loadingEnd: EventEmitter; abstract initialized: EventEmitter; abstract columnChange: EventEmitter; abstract sortingChanged: EventEmitter; abstract listDataLoaded: EventEmitter; constructor(cdr: ChangeDetectorRef, element: ElementRef, platform: PlatformUtil); abstract initialize(column: any, overlayService: IgxOverlayService): void; abstract detectChanges(): void; abstract hide(): void; abstract closeDropdown(): void; abstract onSelect(): void; abstract onPin(): void; abstract onHideToggle(): void; abstract cancel(): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * A component used for presenting Excel style clear filters UI. */ declare class IgxExcelStyleClearFiltersComponent { esf: BaseFilteringComponent; protected platform: PlatformUtil; constructor(esf: BaseFilteringComponent, platform: PlatformUtil); /** * @hidden @internal */ clearFilterClass(): "igx-excel-filter__actions-clear" | "igx-excel-filter__actions-clear--disabled"; /** * @hidden @internal */ clearFilter(): void; /** * @hidden @internal */ onClearFilterKeyDown(eventArgs: KeyboardEvent): void; private selectAllFilterItems; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @hidden */ interface ILogicOperatorChangedArgs extends IBaseEventArgs { target: ExpressionUI; newValue: FilteringLogic; } /** * @hidden */ declare class IgxExcelStyleDefaultExpressionComponent implements AfterViewInit { cdr: ChangeDetectorRef; protected platform: PlatformUtil; column: ColumnType; expressionUI: ExpressionUI; expressionsList: Array; grid: any; expressionRemoved: EventEmitter; logicOperatorChanged: EventEmitter; overlayOutlet: IgxOverlayOutletDirective; protected dropdownConditions: IgxSelectComponent; protected logicOperatorButtonGroup: IgxButtonGroupComponent; protected inputValuesDirective: IgxInputDirective; dropDownOverlaySettings: OverlaySettings; get isLast(): boolean; get isSingle(): boolean; get conditionsPlaceholder(): string; get inputValuePlaceholder(): string; get type(): "number" | "text"; constructor(cdr: ChangeDetectorRef, platform: PlatformUtil); get conditions(): string[]; protected get inputValuesElement(): HTMLInputElement; ngAfterViewInit(): void; focus(): void; translateCondition(value: string): string; getIconName(): string; isConditionSelected(conditionName: string): boolean; onConditionsChanged(eventArgs: any): void; getCondition(value: string): IFilteringOperation; getConditionFriendlyName(name: string): string; onValuesInput(eventArgs: any): void; onLogicOperatorButtonClicked(eventArgs: any, buttonIndex: number): void; onLogicOperatorKeyDown(eventArgs: KeyboardEvent, buttonIndex: number): void; onRemoveButtonClick(): void; onOutletPointerDown(event: any): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @hidden */ declare class IgxExcelStyleCustomDialogComponent implements AfterViewInit { protected overlayService: IgxOverlayService; private cdr; protected platform: PlatformUtil; esf: BaseFilteringComponent; expressionsList: ExpressionUI[]; column: ColumnType; selectedOperator: string; filteringService: IgxFilteringService; overlayComponentId: string; toggle: IgxToggleDirective; protected defaultExpressionTemplate: TemplateRef; protected dateExpressionTemplate: TemplateRef; protected expressionsContainer: ElementRef; private expressionComponents; private expressionDateComponents; private _customDialogPositionSettings; private _customDialogOverlaySettings; constructor(overlayService: IgxOverlayService, cdr: ChangeDetectorRef, platform: PlatformUtil, esf: BaseFilteringComponent); ngAfterViewInit(): void; get template(): TemplateRef; get grid(): any; onCustomDialogOpening(): void; onCustomDialogOpened(): void; open(esf: any): void; onClearButtonClick(): void; closeDialog(): void; cancelDialog(): void; onApplyButtonClick(): void; onAddButtonClick(): void; onExpressionRemoved(event: ExpressionUI): void; onLogicOperatorChanged(event: ILogicOperatorChangedArgs): void; onKeyDown(eventArgs: KeyboardEvent): void; onApplyButtonKeyDown(eventArgs: KeyboardEvent): void; private createCondition; private markChildrenForCheck; private createInitialExpressionUIElement; private scrollToBottom; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * A component used for presenting Excel style conditional filter UI. */ declare class IgxExcelStyleConditionalFilterComponent implements OnDestroy { esf: BaseFilteringComponent; protected platform: PlatformUtil; /** * @hidden @internal */ customDialog: IgxExcelStyleCustomDialogComponent; /** * @hidden @internal */ subMenu: IgxDropDownComponent; protected get filterNumber(): number; private shouldOpenSubMenu; private destroy$; private _subMenuPositionSettings; private _subMenuOverlaySettings; constructor(esf: BaseFilteringComponent, platform: PlatformUtil); ngOnDestroy(): void; /** * @hidden @internal */ onTextFilterKeyDown(eventArgs: KeyboardEvent): void; /** * @hidden @internal */ onTextFilterClick(eventArgs: any): void; /** * @hidden @internal */ getCondition(value: string): IFilteringOperation; protected getSelectedCondition(condition: string): boolean; /** * @hidden @internal */ translateCondition(value: string): string; /** * @hidden @internal */ onSubMenuSelection(eventArgs: ISelectionEventArgs): void; /** * @hidden @internal */ onSubMenuClosed(): void; /** * @hidden @internal */ showCustomFilterItem(): boolean; /** * @hidden @internal */ get subMenuText(): any; /** * @hidden @internal */ get conditions(): any; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * A component used for presenting Excel style header UI. */ declare class IgxExcelStyleHeaderComponent { esf: BaseFilteringComponent; /** * Sets whether the column pinning icon should be shown in the header. * Default value is `false`. * * @example * ```html * * ``` */ showPinning: boolean; /** * Sets whether the column selecting icon should be shown in the header. * Default value is `false`. * * @example * ```html * * ``` */ showSelecting: boolean; /** * Sets whether the column hiding icon should be shown in the header. * Default value is `false`. * * @example * ```html * * ``` */ showHiding: boolean; constructor(esf: BaseFilteringComponent); static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; static ngAcceptInputType_showPinning: unknown; static ngAcceptInputType_showSelecting: unknown; static ngAcceptInputType_showHiding: unknown; } /** * A component used for presenting Excel style column hiding UI. */ declare class IgxExcelStyleHidingComponent { esf: BaseFilteringComponent; constructor(esf: BaseFilteringComponent); static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * A component used for presenting Excel style column moving UI. */ declare class IgxExcelStyleMovingComponent { esf: BaseFilteringComponent; /** * @hidden @internal */ defaultClass: boolean; constructor(esf: BaseFilteringComponent); private get visibleColumns(); /** * @hidden @internal */ get canNotMoveLeft(): any; /** * @hidden @internal */ get canNotMoveRight(): boolean; /** * @hidden @internal */ onMoveButtonClicked(moveDirection: any): void; protected get esfSize(): string; private findColumn; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * A component used for presenting Excel style column pinning UI. */ declare class IgxExcelStylePinningComponent { esf: BaseFilteringComponent; constructor(esf: BaseFilteringComponent); static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** Comparer function that can be used when searching through IgxTreeNode[] */ type IgxTreeSearchResolver = (data: any, node: IgxTreeNode) => boolean; interface IgxTree { /** @hidden @internal */ nodes: QueryList>; /** @hidden @internal */ rootNodes: IgxTreeNode[]; singleBranchExpand: boolean; toggleNodeOnClick: boolean; selection: IgxTreeSelectionType; expandIndicator: TemplateRef; animationSettings: ToggleAnimationSettings; /** @hidden @internal */ forceSelect: IgxTreeNode[]; /** @hidden @internal */ disabledChange: EventEmitter>; /** @hidden @internal */ activeNodeBindingChange: EventEmitter>; nodeSelection: EventEmitter; nodeExpanding: EventEmitter; nodeExpanded: EventEmitter; nodeCollapsing: EventEmitter; nodeCollapsed: EventEmitter; activeNodeChanged: EventEmitter>; expandAll(nodes: IgxTreeNode[]): void; collapseAll(nodes: IgxTreeNode[]): void; deselectAll(node?: IgxTreeNode[]): void; findNodes(searchTerm: any, comparer?: IgxTreeSearchResolver): IgxTreeNode[] | null; } interface IgxTreeNode { parentNode?: IgxTreeNode | null; loading: boolean; path: IgxTreeNode[]; expanded: boolean | null; /** @hidden @internal */ indeterminate: boolean; selected: boolean | null; disabled: boolean; /** @hidden @internal */ isFocused: boolean; active: boolean; level: number; data: T; /** @hidden @internal */ nativeElement: HTMLElement; /** @hidden @internal */ header: ElementRef; /** @hidden @internal */ tabIndex: number; /** @hidden @internal */ allChildren: QueryList>; /** @hidden @internal */ _children: QueryList> | null; selectedChange: EventEmitter; expandedChange: EventEmitter; expand(): void; collapse(): void; toggle(): void; /** @hidden @internal */ addLinkChild(node: any): void; /** @hidden @internal */ removeLinkChild(node: any): void; } interface ITreeNodeSelectionEvent extends IBaseCancelableBrowserEventArgs { oldSelection: IgxTreeNode[]; newSelection: IgxTreeNode[]; added: IgxTreeNode[]; removed: IgxTreeNode[]; event?: Event; } interface ITreeNodeEditingEvent extends IBaseCancelableBrowserEventArgs { node: IgxTreeNode; value: string; } interface ITreeNodeEditedEvent extends IBaseEventArgs { node: IgxTreeNode; value: any; } interface ITreeNodeTogglingEventArgs extends IBaseEventArgs, IBaseCancelableBrowserEventArgs { node: IgxTreeNode; } interface ITreeNodeToggledEventArgs extends IBaseEventArgs { node: IgxTreeNode; } declare const IgxTreeSelectionType: { readonly None: "None"; readonly BiState: "BiState"; readonly Cascading: "Cascading"; }; type IgxTreeSelectionType = (typeof IgxTreeSelectionType)[keyof typeof IgxTreeSelectionType]; /** @hidden @internal */ declare class IgxTreeService { expandedNodes: Set>; collapsingNodes: Set>; private tree; /** * Adds the node to the `expandedNodes` set and fires the nodes change event * * @param node target node * @param uiTrigger is the event triggered by a ui interraction (so we know if we should animate) * @returns void */ expand(node: IgxTreeNode, uiTrigger?: boolean): void; /** * Adds a node to the `collapsing` collection * * @param node target node */ collapsing(node: IgxTreeNode): void; /** * Removes the node from the 'expandedNodes' set and emits the node's change event * * @param node target node * @returns void */ collapse(node: IgxTreeNode): void; isExpanded(node: IgxTreeNode): boolean; register(tree: IgxTree): void; private siblingComparer; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵprov: i0.ɵɵInjectableDeclaration; } /** @hidden @internal */ declare class IgxTreeSelectionService { private tree; private nodeSelection; private indeterminateNodes; private nodesToBeSelected; private nodesToBeIndeterminate; register(tree: IgxTree): void; /** Select range from last selected node to the current specified node. */ selectMultipleNodes(node: IgxTreeNode, event?: Event): void; /** Select the specified node and emit event. */ selectNode(node: IgxTreeNode, event?: Event): void; /** Deselect the specified node and emit event. */ deselectNode(node: IgxTreeNode, event?: Event): void; /** Clears node selection */ clearNodesSelection(): void; isNodeSelected(node: IgxTreeNode): boolean; isNodeIndeterminate(node: IgxTreeNode): boolean; /** Select specified nodes. No event is emitted. */ selectNodesWithNoEvent(nodes: IgxTreeNode[], clearPrevSelection?: boolean, shouldEmit?: boolean): void; /** Deselect specified nodes. No event is emitted. */ deselectNodesWithNoEvent(nodes?: IgxTreeNode[], shouldEmit?: boolean): void; /** Called on `node.ngOnDestroy` to ensure state is correct after node is removed */ ensureStateOnNodeDelete(node: IgxTreeNode): void; /** Retriggers a node's selection state */ private retriggerNodeState; /** Returns array of the selected nodes. */ private getSelectedNodes; /** Returns array of the nodes in indeterminate state. */ private getIndeterminateNodes; private emitNodeSelectionEvent; private areEqualCollections; private cascadeSelectNodesWithNoEvent; private cascadeDeselectNodesWithNoEvent; /** * populates the nodesToBeSelected and nodesToBeIndeterminate sets * with the nodes which will be eventually in selected/indeterminate state */ private calculateNodesNewSelectionState; /** Ensures proper selection state for all predescessors and descendants during a selection event */ private cascadeSelectionState; private emitCascadeNodeSelectionEvent; /** * recursively handle the selection state of the direct and indirect parents */ private handleParentSelectionState; /** * Handle the selection state of a given node based the selection states of its direct children */ private handleNodeSelectionState; /** * Get a collection of all nodes affected by the change event * * @param nodesToBeProcessed set of the nodes to be selected/deselected * @returns a collection of all affected nodes and all their parents */ private getCascadingNodeCollection; /** * retrieve the nodes which should be added/removed to/from the old selection */ private populateAddRemoveArgs; /** Emits the `selectedChange` event for each node affected by the selection */ private emitSelectedChangeEvent; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵprov: i0.ɵɵInjectableDeclaration; } /** @hidden @internal */ declare class IgxTreeNavigationService implements OnDestroy { private treeService; private selectionService; private tree; private _focusedNode; private _lastFocusedNode; private _activeNode; private _visibleChildren; private _invisibleChildren; private _disabledChildren; private _cacheChange; constructor(treeService: IgxTreeService, selectionService: IgxTreeSelectionService); register(tree: IgxTree): void; get focusedNode(): IgxTreeNode; set focusedNode(value: IgxTreeNode); get activeNode(): IgxTreeNode; set activeNode(value: IgxTreeNode); get visibleChildren(): IgxTreeNode[]; update_disabled_cache(node: IgxTreeNode): void; init_invisible_cache(): void; update_visible_cache(node: IgxTreeNode, expanded: boolean, shouldEmit?: boolean): void; /** * Sets the node as focused (and active) * * @param node target node * @param isActive if true, sets the node as active */ setFocusedAndActiveNode(node: IgxTreeNode, isActive?: boolean): void; /** Handler for keydown events. Used in tree.component.ts */ handleKeydown(event: KeyboardEvent): void; ngOnDestroy(): void; private handleNavigation; private handleArrowLeft; private handleArrowRight; private handleUpDownArrow; private handleAsterisk; private handleSpace; /** Gets the next visible node in the given direction - 1 -> next, -1 -> previous */ private getVisibleNode; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵprov: i0.ɵɵInjectableDeclaration; } interface ITreeResourceStrings { igx_expand?: string; igx_collapse?: string; } declare const TreeResourceStringsEN: ITreeResourceStrings; /** * @hidden @internal * Used for links (`a` tags) in the body of an `igx-tree-node`. Handles aria and event dispatch. */ declare class IgxTreeNodeLinkDirective implements OnDestroy { private node; private navService; elementRef: ElementRef; role: string; /** * The node's parent. Should be used only when the link is defined * in `` tag outside of its parent, as Angular DI will not properly provide a reference * * ```html * * * * * * ... * * * {{ data.label }} * * * ``` */ set parentNode(val: any); get parentNode(): any; /** A pointer to the parent node */ private get target(); private _parentNode; constructor(node: IgxTreeNode, navService: IgxTreeNavigationService, elementRef: ElementRef); /** @hidden @internal */ get tabIndex(): number; /** * @hidden @internal * Clear the node's focused state */ handleBlur(): void; /** * @hidden @internal * Set the node as focused */ handleFocus(): void; ngOnDestroy(): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * * The tree node component represents a child node of the tree component or another tree node. * Usage: * * ```html * * ... * * {{ data.FirstName }} {{ data.LastName }} * * ... * * ``` */ declare class IgxTreeNodeComponent extends ToggleAnimationPlayer implements IgxTreeNode, OnInit, OnDestroy { tree: IgxTree; protected selectionService: IgxTreeSelectionService; protected treeService: IgxTreeService; protected navService: IgxTreeNavigationService; protected cdr: ChangeDetectorRef; private element; parentNode: IgxTreeNode; /** * The data entry that the node is visualizing. * * @remarks * Required for searching through nodes. * * @example * ```html * * ... * * {{ data.FirstName }} {{ data.LastName }} * * ... * * ``` */ data: T; /** * To be used for load-on-demand scenarios in order to specify whether the node is loading data. * * @remarks * Loading nodes do not render children. */ loading: boolean; /** @hidden @internal */ set tabIndex(val: number); /** @hidden @internal */ get tabIndex(): number; /** @hidden @internal */ get animationSettings(): ToggleAnimationSettings; /** * Gets/Sets the resource strings. * * @remarks * Uses EN resources by default. */ set resourceStrings(value: ITreeResourceStrings); /** * An accessor that returns the resource strings. */ get resourceStrings(): ITreeResourceStrings; /** * Gets/Sets the active state of the node * * @param value: boolean */ set active(value: boolean); get active(): boolean; /** * Emitted when the node's `selected` property changes. * * ```html * * * * * ``` * * ```typescript * const node: IgxTreeNode = this.tree.findNodes(data[0])[0]; * node.selectedChange.pipe(takeUntil(this.destroy$)).subscribe((e: boolean) => console.log("Node selection changed to ", e)) * ``` */ selectedChange: EventEmitter; /** * Emitted when the node's `expanded` property changes. * * ```html * * * * * ``` * * ```typescript * const node: IgxTreeNode = this.tree.findNodes(data[0])[0]; * node.expandedChange.pipe(takeUntil(this.destroy$)).subscribe((e: boolean) => console.log("Node expansion state changed to ", e)) * ``` */ expandedChange: EventEmitter; /** @hidden @internal */ get focused(): boolean; /** * Retrieves the full path to the node incuding itself * * ```typescript * const node: IgxTreeNode = this.tree.findNodes(data[0])[0]; * const path: IgxTreeNode[] = node.path; * ``` */ get path(): IgxTreeNode[]; /** * Gets/Sets the disabled state of the node * * @param value: boolean */ get disabled(): boolean; set disabled(value: boolean); /** @hidden @internal */ cssClass: string; /** @hidden @internal */ get role(): "none" | "treeitem"; /** @hidden @internal */ linkChildren: QueryList; /** @hidden @internal */ _children: QueryList>; /** @hidden @internal */ allChildren: QueryList>; /** * Return the child nodes of the node (if any) * * @remarks * Returns `null` if node does not have children * * @example * ```typescript * const node: IgxTreeNode = this.tree.findNodes(data[0])[0]; * const children: IgxTreeNode[] = node.children; * ``` */ get children(): IgxTreeNode[]; /** @hidden @internal */ header: ElementRef; private _defaultExpandIndicatorTemplate; private childrenContainer; private get hasLinkChildren(); /** @hidden @internal */ isFocused: boolean; /** @hidden @internal */ registeredChildren: IgxTreeNodeLinkDirective[]; /** @hidden @internal */ private _resourceStrings; private _tabIndex; private _disabled; constructor(tree: IgxTree, selectionService: IgxTreeSelectionService, treeService: IgxTreeService, navService: IgxTreeNavigationService, cdr: ChangeDetectorRef, animationService: AnimationService, element: ElementRef, parentNode: IgxTreeNode); /** * @hidden @internal */ get showSelectors(): boolean; /** * @hidden @internal */ get indeterminate(): boolean; /** The depth of the node, relative to the root * * ```html * * ... * * My level is {{ node.level }} * * * ``` * * ```typescript * const node: IgxTreeNode = this.tree.findNodes(data[12])[0]; * const level: number = node.level; * ``` */ get level(): number; /** Get/set whether the node is selected. Supporst two-way binding. * * ```html * * ... * * {{ node.label }} * * * ``` * * ```typescript * const node: IgxTreeNode = this.tree.findNodes(data[0])[0]; * const selected = node.selected; * node.selected = true; * ``` */ get selected(): boolean; set selected(val: boolean); /** Get/set whether the node is expanded * * ```html * * ... * * {{ node.label }} * * * ``` * * ```typescript * const node: IgxTreeNode = this.tree.findNodes(data[0])[0]; * const expanded = node.expanded; * node.expanded = true; * ``` */ get expanded(): boolean; set expanded(val: boolean); /** @hidden @internal */ get expandIndicatorTemplate(): TemplateRef; /** * The native DOM element representing the node. Could be null in certain environments. * * ```typescript * // get the nativeElement of the second node * const node: IgxTreeNode = this.tree.nodes.first(); * const nodeElement: HTMLElement = node.nativeElement; * ``` */ /** @hidden @internal */ get nativeElement(): HTMLElement; /** @hidden @internal */ ngOnInit(): void; /** * @hidden @internal * Sets the focus to the node's child, if present * Sets the node as the tree service's focusedNode * Marks the node as the current active element */ handleFocus(): void; /** * @hidden @internal * Clear the node's focused status */ clearFocus(): void; /** * @hidden @internal */ onSelectorPointerDown(event: any): void; /** * @hidden @internal */ onSelectorClick(event: any): void; /** * Toggles the node expansion state, triggering animation * * ```html * * My Node * * * ``` * * ```typescript * const myNode: IgxTreeNode = this.tree.findNodes(data[0])[0]; * myNode.toggle(); * ``` */ toggle(): void; /** @hidden @internal */ indicatorClick(): void; /** * @hidden @internal */ onPointerDown(event: any): void; ngOnDestroy(): void; /** * Expands the node, triggering animation * * ```html * * My Node * * * ``` * * ```typescript * const myNode: IgxTreeNode = this.tree.findNodes(data[0])[0]; * myNode.expand(); * ``` */ expand(): void; /** * Collapses the node, triggering animation * * ```html * * My Node * * * ``` * * ```typescript * const myNode: IgxTreeNode = this.tree.findNodes(data[0])[0]; * myNode.collapse(); * ``` */ collapse(): void; /** @hidden @internal */ addLinkChild(link: IgxTreeNodeLinkDirective): void; /** @hidden @internal */ removeLinkChild(link: IgxTreeNodeLinkDirective): void; static ɵfac: i0.ɵɵFactoryDeclaration, [null, null, null, null, null, null, null, { optional: true; skipSelf: true; }]>; static ɵcmp: i0.ɵɵComponentDeclaration, "igx-tree-node", never, { "data": { "alias": "data"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "resourceStrings": { "alias": "resourceStrings"; "required": false; }; "active": { "alias": "active"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "expanded": { "alias": "expanded"; "required": false; }; }, { "selectedChange": "selectedChange"; "expandedChange": "expandedChange"; }, ["linkChildren", "_children", "allChildren"], ["igx-tree-node", "*"], true, never>; static ngAcceptInputType_loading: unknown; static ngAcceptInputType_active: unknown; static ngAcceptInputType_disabled: unknown; static ngAcceptInputType_selected: unknown; static ngAcceptInputType_expanded: unknown; } /** * @hidden @internal * Used for templating the expand indicator of the tree */ declare class IgxTreeExpandIndicatorDirective { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * IgxTreeComponent allows a developer to show a set of nodes in a hierarchical fashion. * * @igxModule IgxTreeModule * @igxKeywords tree * @igxTheme igx-tree-theme * @igxGroup Grids & Lists * * @remark * The Angular Tree Component allows users to represent hierarchical data in a tree-view structure, * maintaining parent-child relationships, as well as to define static tree-view structure without a corresponding data model. * Its primary purpose is to allow end-users to visualize and navigate within hierarchical data structures. * The Ignite UI for Angular Tree Component also provides load on demand capabilities, item activation, * bi-state and cascading selection of items through built-in checkboxes, built-in keyboard navigation and more. * * @example * ```html * * * I am a parent node 1 * * I am a child node 1 * * ... * * ... * * ``` */ declare class IgxTreeComponent implements IgxTree, OnInit, AfterViewInit, OnDestroy { private navService; private selectionService; private treeService; private element; cssClass: string; /** * Gets/Sets tree selection mode * * @remarks * By default the tree selection mode is 'None' * @param selectionMode: IgxTreeSelectionType */ get selection(): IgxTreeSelectionType; set selection(selectionMode: IgxTreeSelectionType); /** Get/Set how the tree should handle branch expansion. * If set to `true`, only a single branch can be expanded at a time, collapsing all others * * ```html * * ... * * ``` * * ```typescript * const tree: IgxTree = this.tree; * this.tree.singleBranchExpand = false; * ``` */ singleBranchExpand: boolean; /** Get/Set if nodes should be expanded/collapsed when clicking over them. * * ```html * * ... * * ``` * * ```typescript * const tree: IgxTree = this.tree; * this.tree.toggleNodeOnClick = false; * ``` */ toggleNodeOnClick: boolean; /** Get/Set the animation settings that branches should use when expanding/collpasing. * * ```html * * * ``` * * ```typescript * const animationSettings: ToggleAnimationSettings = { * openAnimation: growVerIn, * closeAnimation: growVerOut * }; * * this.tree.animationSettings = animationSettings; * ``` */ animationSettings: ToggleAnimationSettings; /** Emitted when the node selection is changed through interaction * * ```html * * * ``` * *```typescript * public handleNodeSelection(event: ITreeNodeSelectionEvent) { * const newSelection: IgxTreeNode[] = event.newSelection; * const added: IgxTreeNode[] = event.added; * console.log("New selection will be: ", newSelection); * console.log("Added nodes: ", event.added); * } *``` */ nodeSelection: EventEmitter; /** Emitted when a node is expanding, before it finishes * * ```html * * * ``` * *```typescript * public handleNodeExpanding(event: ITreeNodeTogglingEventArgs) { * const expandedNode: IgxTreeNode = event.node; * if (expandedNode.disabled) { * event.cancel = true; * } * } *``` */ nodeExpanding: EventEmitter; /** Emitted when a node is expanded, after it finishes * * ```html * * * ``` * *```typescript * public handleNodeExpanded(event: ITreeNodeToggledEventArgs) { * const expandedNode: IgxTreeNode = event.node; * console.log("Node is expanded: ", expandedNode.data); * } *``` */ nodeExpanded: EventEmitter; /** Emitted when a node is collapsing, before it finishes * * ```html * * * ``` * *```typescript * public handleNodeCollapsing(event: ITreeNodeTogglingEventArgs) { * const collapsedNode: IgxTreeNode = event.node; * if (collapsedNode.alwaysOpen) { * event.cancel = true; * } * } *``` */ nodeCollapsing: EventEmitter; /** Emitted when a node is collapsed, after it finishes * * @example * ```html * * * ``` * ```typescript * public handleNodeCollapsed(event: ITreeNodeToggledEventArgs) { * const collapsedNode: IgxTreeNode = event.node; * console.log("Node is collapsed: ", collapsedNode.data); * } * ``` */ nodeCollapsed: EventEmitter; /** * Emitted when the active node is changed. * * @example * ``` * * ``` */ activeNodeChanged: EventEmitter>; /** * A custom template to be used for the expand indicator of nodes * ```html * * * {{ expanded ? "close_fullscreen": "open_in_full"}} * * * ``` */ expandIndicator: TemplateRef; /** @hidden @internal */ nodes: QueryList>; /** @hidden @internal */ disabledChange: EventEmitter>; /** * Returns all **root level** nodes * * ```typescript * const tree: IgxTree = this.tree; * const rootNodes: IgxTreeNodeComponent[] = tree.rootNodes; * ``` */ get rootNodes(): IgxTreeNodeComponent[]; /** * Emitted when the active node is set through API * * @hidden @internal */ activeNodeBindingChange: EventEmitter>; /** @hidden @internal */ forceSelect: any[]; /** @hidden @internal */ resizeNotify: Subject; private _selection; private destroy$; private unsubChildren$; constructor(navService: IgxTreeNavigationService, selectionService: IgxTreeSelectionService, treeService: IgxTreeService, element: ElementRef); /** @hidden @internal */ get nativeElement(): HTMLElement; /** * Expands all of the passed nodes. * If no nodes are passed, expands ALL nodes * * @param nodes nodes to be expanded * * ```typescript * const targetNodes: IgxTreeNode = this.tree.findNodes(true, (_data: any, node: IgxTreeNode) => node.data.expandable); * tree.expandAll(nodes); * ``` */ expandAll(nodes?: IgxTreeNode[]): void; /** * Collapses all of the passed nodes. * If no nodes are passed, collapses ALL nodes * * @param nodes nodes to be collapsed * * ```typescript * const targetNodes: IgxTreeNode = this.tree.findNodes(true, (_data: any, node: IgxTreeNode) => node.data.collapsible); * tree.collapseAll(nodes); * ``` */ collapseAll(nodes?: IgxTreeNode[]): void; /** * Deselect all nodes if the nodes collection is empty. Otherwise, deselect the nodes in the nodes collection. * * @example * ```typescript * const arr = [ * this.tree.nodes.toArray()[0], * this.tree.nodes.toArray()[1] * ]; * this.tree.deselectAll(arr); * ``` * @param nodes: IgxTreeNodeComponent[] */ deselectAll(nodes?: IgxTreeNodeComponent[]): void; /** * Returns all of the nodes that match the passed searchTerm. * Accepts a custom comparer function for evaluating the search term against the nodes. * * @remarks * Default search compares the passed `searchTerm` against the node's `data` Input. * When using `findNodes` w/o a `comparer`, make sure all nodes have `data` passed. * * @param searchTerm The data of the searched node * @param comparer A custom comparer function that evaluates the passed `searchTerm` against all nodes. * @returns Array of nodes that match the search. `null` if no nodes are found. * * ```html * * * {{ node.label }} * * * ``` * * ```typescript * public data: DataEntry[] = FETCHED_DATA; * ... * const matchedNodes: IgxTreeNode[] = this.tree.findNodes(searchTerm: data[5]); * ``` * * Using a custom comparer * ```typescript * public data: DataEntry[] = FETCHED_DATA; * ... * const comparer: IgxTreeSearchResolver = (data: any, node: IgxTreeNode) { * return node.data.index % 2 === 0; * } * const evenIndexNodes: IgxTreeNode[] = this.tree.findNodes(null, comparer); * ``` */ findNodes(searchTerm: any, comparer?: IgxTreeSearchResolver): IgxTreeNodeComponent[] | null; /** @hidden @internal */ handleKeydown(event: KeyboardEvent): void; /** @hidden @internal */ ngOnInit(): void; /** @hidden @internal */ ngAfterViewInit(): void; /** @hidden @internal */ ngOnDestroy(): void; private expandToNode; private subToCollapsing; private subToChanges; private scrollNodeIntoView; private _comparer; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; static ngAcceptInputType_singleBranchExpand: unknown; static ngAcceptInputType_toggleNodeOnClick: unknown; } interface IListChild { index: number; } /** @hidden */ declare class IgxListBaseDirective { protected el: ElementRef; itemClicked: EventEmitter; allowLeftPanning: boolean; allowRightPanning: boolean; panEndTriggeringThreshold: number; leftPan: EventEmitter; rightPan: EventEmitter; startPan: EventEmitter; endPan: EventEmitter; resetPan: EventEmitter; panStateChange: EventEmitter; children: QueryList; listItemLeftPanningTemplate: IgxListItemLeftPanningTemplateDirective; listItemRightPanningTemplate: IgxListItemRightPanningTemplateDirective; constructor(el: ElementRef); static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } declare enum IgxListPanState { NONE = 0, LEFT = 1, RIGHT = 2 } declare class IgxEmptyListTemplateDirective { template: TemplateRef; constructor(template: TemplateRef); static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } declare class IgxDataLoadingTemplateDirective { template: TemplateRef; constructor(template: TemplateRef); static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } declare class IgxListItemLeftPanningTemplateDirective { template: TemplateRef; constructor(template: TemplateRef); static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } declare class IgxListItemRightPanningTemplateDirective { template: TemplateRef; constructor(template: TemplateRef); static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * The Ignite UI List Item component is a container intended for row items in the Ignite UI for Angular List component. * * Example: * ```html * * Contacts * * {{ contact.name }} * {{ contact.phone }} * * * ``` */ declare class IgxListItemComponent implements IListChild { list: IgxListBaseDirective; private elementRef; private _renderer; /** * Provides a reference to the template's base element shown when left panning a list item. * ```typescript * const leftPanTmpl = this.listItem.leftPanningTemplateElement; * ``` */ leftPanningTemplateElement: any; /** * Provides a reference to the template's base element shown when right panning a list item. * ```typescript * const rightPanTmpl = this.listItem.rightPanningTemplateElement; * ``` */ rightPanningTemplateElement: any; /** * Sets/gets whether the `list item` is a header. * ```html * Header * ``` * ```typescript * let isHeader = this.listItem.isHeader; * ``` * * @memberof IgxListItemComponent */ isHeader: boolean; /** * Sets/gets whether the `list item` is hidden. * By default the `hidden` value is `false`. * ```html * Hidden Item * ``` * ```typescript * let isHidden = this.listItem.hidden; * ``` * * @memberof IgxListItemComponent */ hidden: boolean; /** * Sets/gets the `aria-label` attribute of the `list item`. * ```typescript * this.listItem.ariaLabel = "Item1"; * ``` * ```typescript * let itemAriaLabel = this.listItem.ariaLabel; * ``` * * @memberof IgxListItemComponent */ ariaLabel: string; /** * Gets the `touch-action` style of the `list item`. * ```typescript * let touchAction = this.listItem.touchAction; * ``` */ touchAction: string; /** * @hidden */ private _panState; /** * @hidden */ private panOffset; /** * @hidden */ private _index; /** * @hidden */ private lastPanDir; private _role; private _selected; /** * Gets the `panState` of a `list item`. * ```typescript * let itemPanState = this.listItem.panState; * ``` * * @memberof IgxListItemComponent */ get panState(): IgxListPanState; /** * Gets the `index` of a `list item`. * ```typescript * let itemIndex = this.listItem.index; * ``` * * @memberof IgxListItemComponent */ get index(): number; /** * Sets the `index` of the `list item`. * ```typescript * this.listItem.index = index; * ``` * * @memberof IgxListItemComponent */ set index(value: number); /** * Returns an element reference to the list item. * ```typescript * let listItemElement = this.listItem.element. * ``` * * @memberof IgxListItemComponent */ get element(): any; /** * Returns a reference container which contains the list item's content. * ```typescript * let listItemContainer = this.listItem.contentElement. * ``` * * @memberof IgxListItemComponent */ get contentElement(): any; /** * Returns the `context` object which represents the `template context` binding into the `list item container` * by providing the `$implicit` declaration which is the `IgxListItemComponent` itself. * ```typescript * let listItemComponent = this.listItem.context; * ``` */ get context(): any; /** * Gets the width of a `list item`. * ```typescript * let itemWidth = this.listItem.width; * ``` * * @memberof IgxListItemComponent */ get width(): any; /** * Gets the maximum left position of the `list item`. * ```typescript * let maxLeft = this.listItem.maxLeft; * ``` * * @memberof IgxListItemComponent */ get maxLeft(): number; /** * Gets the maximum right position of the `list item`. * ```typescript * let maxRight = this.listItem.maxRight; * ``` * * @memberof IgxListItemComponent */ get maxRight(): any; /** @hidden @internal */ get offsetWidthInRem(): number; /** @hidden @internal */ get offsetHeightInRem(): number; constructor(list: IgxListBaseDirective, elementRef: ElementRef, _renderer: Renderer2); /** * Gets/Sets the `role` attribute of the `list item`. * ```typescript * let itemRole = this.listItem.role; * ``` * * @memberof IgxListItemComponent */ get role(): string; set role(val: string); /** * Sets/gets whether the `list item` is selected. * Selection is only applied to non-header items. * When selected, the CSS class 'igx-list__item-base--selected' is added to the item. * ```html * Selected Item * ``` * ```typescript * let isSelected = this.listItem.selected; * this.listItem.selected = true; * ``` * * @memberof IgxListItemComponent */ get selected(): boolean; set selected(value: boolean); /** * Indicates whether `list item` should have header style. * ```typescript * let headerStyle = this.listItem.headerStyle; * ``` * * @memberof IgxListItemComponent */ get headerStyle(): boolean; /** * Applies the inner style of the `list item` if the item is not counted as header. * ```typescript * let innerStyle = this.listItem.innerStyle; * ``` * * @memberof IgxListItemComponent */ get innerStyle(): boolean; /** * Returns string value which describes the display mode of the `list item`. * ```typescript * let isHidden = this.listItem.display; * ``` * * @memberof IgxListItemComponent */ get display(): string; /** * @hidden */ clicked(evt: any): void; /** * @hidden */ panStart(): void; /** * @hidden */ panCancel(): void; /** * @hidden */ panMove(ev: any): void; /** * @hidden */ panEnd(): void; /** * @hidden */ private showLeftPanTemplate; /** * @hidden */ private showRightPanTemplate; /** * @hidden */ private hideLeftAndRightPanTemplates; /** * @hidden */ private setLeftAndRightTemplatesVisibility; /** * @hidden */ private setContentElementLeft; /** * @hidden */ private isTrue; /** * @hidden */ private resetPanPosition; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; static ngAcceptInputType_isHeader: unknown; static ngAcceptInputType_hidden: unknown; static ngAcceptInputType_selected: unknown; } interface IListResourceStrings { igx_list_no_items?: string; igx_list_loading?: string; } declare const ListResourceStringsEN: IListResourceStrings; /** * Interface for the panStateChange igxList event arguments */ interface IPanStateChangeEventArgs extends IBaseEventArgs { oldState: IgxListPanState; newState: IgxListPanState; item: IgxListItemComponent; } /** * Interface for the listItemClick igxList event arguments */ interface IListItemClickEventArgs extends IBaseEventArgs { item: IgxListItemComponent; event: Event; direction: IgxListPanState; } /** * Interface for the listItemPanning igxList event arguments */ interface IListItemPanningEventArgs extends IBaseEventArgs { item: IgxListItemComponent; direction: IgxListPanState; keepItem: boolean; } /** * igxListThumbnail is container for the List media * Use it to wrap anything you want to be used as a thumbnail. */ declare class IgxListThumbnailDirective { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * igxListAction is container for the List action * Use it to wrap anything you want to be used as a list action: icon, checkbox... */ declare class IgxListActionDirective { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * igxListLine is container for the List text content * Use it to wrap anything you want to be used as a plane text. */ declare class IgxListLineDirective { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * igxListLineTitle is a directive that add class to the target element * Use it to make anything to look like list Title. */ declare class IgxListLineTitleDirective { cssClass: string; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * igxListLineSubTitle is a directive that add class to the target element * Use it to make anything to look like list Subtitle. */ declare class IgxListLineSubTitleDirective { cssClass: string; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * Displays a collection of data items in a templatable list format * * @igxModule IgxListModule * * @igxTheme igx-list-theme * * @igxKeywords list, data * * @igxGroup Grids & Lists * * @remarks * The Ignite UI List displays rows of items and supports one or more header items as well as search and filtering * of list items. Each list item is completely templatable and will support any valid HTML or Angular component. * * @example * ```html * * Contacts * * {{ contact.name }} * {{ contact.phone }} * * * ``` */ declare class IgxListComponent extends IgxListBaseDirective { element: ElementRef; /** * Returns a collection of all items and headers in the list. * * @example * ```typescript * let listChildren: QueryList = this.list.children; * ``` */ children: QueryList; /** * Sets/gets the empty list template. * * @remarks * This template is used by IgxList in case there are no list items * defined and `isLoading` is set to `false`. * * @example * ```html * * *

No contacts! :(

*
*
* ``` * ```typescript * let emptyTemplate = this.list.emptyListTemplate; * ``` */ emptyListTemplate: IgxEmptyListTemplateDirective; /** * Sets/gets the list loading template. * * @remarks * This template is used by IgxList in case there are no list items defined and `isLoading` is set to `true`. * * @example * ```html * * *

Patience, we are currently loading your data...

*
*
* ``` * ```typescript * let loadingTemplate = this.list.dataLoadingTemplate; * ``` */ dataLoadingTemplate: IgxDataLoadingTemplateDirective; /** * Sets/gets the template for left panning a list item. * * @remarks * Default value is `null`. * * @example * ```html * * * deleteDelete * * * ``` * ```typescript * let itemLeftPanTmpl = this.list.listItemLeftPanningTemplate; * ``` */ listItemLeftPanningTemplate: IgxListItemLeftPanningTemplateDirective; /** * Sets/gets the template for right panning a list item. * * @remarks * Default value is `null`. * * @example * ```html * * * callDial * * * ``` * ```typescript * let itemRightPanTmpl = this.list.listItemRightPanningTemplate; * ``` */ listItemRightPanningTemplate: IgxListItemRightPanningTemplateDirective; /** * Provides a threshold after which the item's panning will be completed automatically. * * @remarks * By default this property is set to 0.5 which is 50% of the list item's width. * * @example * ```html * * ``` */ panEndTriggeringThreshold: number; /** * Sets/gets the `id` of the list. * * @remarks * If not set, the `id` of the first list component will be `"igx-list-0"`. * * @example * ```html * * ``` * ```typescript * let listId = this.list.id; * ``` */ id: string; /** * Sets/gets whether the left panning of an item is allowed. * * @remarks * Default value is `false`. * * @example * ```html * * ``` * ```typescript * let isLeftPanningAllowed = this.list.allowLeftPanning; * ``` */ allowLeftPanning: boolean; /** * Sets/gets whether the right panning of an item is allowed. * * @remarks * Default value is `false`. * * @example * ```html * * ``` * ```typescript * let isRightPanningAllowed = this.list.allowRightPanning; * ``` */ allowRightPanning: boolean; /** * Sets/gets whether the list is currently loading data. * * @remarks * Set it to display the dataLoadingTemplate while data is being retrieved. * Default value is `false`. * * @example * ```html * * ``` * ```typescript * let isLoading = this.list.isLoading; * ``` */ isLoading: boolean; /** * Event emitted when a left pan gesture is executed on a list item. * * @remarks * Provides a reference to an object of type `IListItemPanningEventArgs` as an event argument. * * @example * ```html * * ``` */ leftPan: EventEmitter; /** * Event emitted when a right pan gesture is executed on a list item. * * @remarks * Provides a reference to an object of type `IListItemPanningEventArgs` as an event argument. * * @example * ```html * * ``` */ rightPan: EventEmitter; /** * Event emitted when a pan gesture is started. * * @remarks * Provides a reference to an object of type `IListItemPanningEventArgs` as an event argument. * * @example * ```html * * ``` */ startPan: EventEmitter; /** * Event emitted when a pan gesture is completed or canceled. * * @remarks * Provides a reference to an object of type `IListItemPanningEventArgs` as an event argument. * * @example * ```html * * ``` */ endPan: EventEmitter; /** * Event emitted when a pan item is returned to its original position. * * @remarks * Provides a reference to an object of type `IgxListComponent` as an event argument. * * @example * ```html * * ``` */ resetPan: EventEmitter; /** * * Event emitted when a pan gesture is executed on a list item. * * @remarks * Provides references to the `IgxListItemComponent` and `IgxListPanState` as event arguments. * * @example * ```html * * ``` */ panStateChange: EventEmitter; /** * Event emitted when a list item is clicked. * * @remarks * Provides references to the `IgxListItemComponent` and `Event` as event arguments. * * @example * ```html * * ``` */ itemClicked: EventEmitter; /** * @hidden * @internal */ protected defaultEmptyListTemplate: TemplateRef; /** * @hidden * @internal */ protected defaultDataLoadingTemplate: TemplateRef; private _resourceStrings; /** * Sets the resource strings. * By default it uses EN resources. */ set resourceStrings(value: IListResourceStrings); /** * Returns the resource strings. */ get resourceStrings(): IListResourceStrings; constructor(element: ElementRef); /** * @hidden * @internal */ protected get sortedChildren(): IgxListItemComponent[]; private _role; /** * Gets/Sets the `role` attribute value. * * @example * ```typescript * let listRole = this.list.role; * ``` */ get role(): string; set role(val: string); /** * Gets a boolean indicating if the list is empty. * * @example * ```typescript * let isEmpty = this.list.isListEmpty; * ``` */ get isListEmpty(): boolean; /** * @hidden * @internal */ get cssClass(): boolean; /** * Gets the list `items` excluding the header ones. * * @example * ```typescript * let listItems: IgxListItemComponent[] = this.list.items; * ``` */ get items(): IgxListItemComponent[]; /** * Gets the header list `items`. * * @example * ```typescript * let listHeaders: IgxListItemComponent[] = this.list.headers; * ``` */ get headers(): IgxListItemComponent[]; /** * Gets the `context` object of the template binding. * * @remarks * Gets the `context` object which represents the `template context` binding into the `list container` * by providing the `$implicit` declaration which is the `IgxListComponent` itself. * * @example * ```typescript * let listComponent = this.list.context; * ``` */ get context(): any; /** * Gets a `TemplateRef` to the currently used template. * * @example * ```typescript * let listTemplate = this.list.template; * ``` */ get template(): TemplateRef; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; static ngAcceptInputType_allowLeftPanning: unknown; static ngAcceptInputType_allowRightPanning: unknown; static ngAcceptInputType_isLoading: unknown; } declare class IgxExcelStyleLoadingValuesTemplateDirective { template: TemplateRef; static ngTemplateContextGuard(_dir: IgxExcelStyleLoadingValuesTemplateDirective, ctx: unknown): ctx is undefined; constructor(template: TemplateRef); static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * A component used for presenting Excel style search UI. */ declare class IgxExcelStyleSearchComponent implements AfterViewInit, OnDestroy { cdr: ChangeDetectorRef; esf: BaseFilteringComponent; protected platform: PlatformUtil; private static readonly filterOptimizationThreshold; /** * @hidden @internal */ defaultClass: boolean; /** * @hidden @internal */ searchInput: IgxInputDirective; protected cancelButton: IgxButtonDirective; /** * @hidden @internal */ list: IgxListComponent; /** * @hidden @internal */ selectAllCheckbox: IgxCheckboxComponent; /** * @hidden @internal */ addToCurrentFilterCheckbox: IgxCheckboxComponent; /** * @hidden @internal */ tree: IgxTreeComponent; /** * @hidden @internal */ protected virtDir: IgxForOfDirective; /** * @hidden @internal */ protected defaultExcelStyleLoadingValuesTemplate: TemplateRef; /** * @hidden @internal */ get selectAllItem(): FilterListItem; /** * @hidden @internal */ get addToCurrentFilterItem(): FilterListItem; /** * @hidden @internal */ get isLoading(): boolean; /** * @hidden @internal */ set isLoading(value: boolean); /** * @hidden @internal */ searchValue: any; /** * @hidden @internal */ displayedListData: FilterListItem[]; /** * @hidden @internal */ matchesCount: number; /** * @hidden @internal */ get valuesLoadingTemplate(): any; protected activeDescendant: string; private _id; private _isLoading; private _addToCurrentFilterItem; private _selectAllItem; private _hierarchicalSelectedItems; private _focusedItem; private destroy$; constructor(cdr: ChangeDetectorRef, esf: BaseFilteringComponent, platform: PlatformUtil); ngAfterViewInit(): void; ngOnDestroy(): void; /** * @hidden @internal */ refreshSize: () => void; /** * @hidden @internal */ clearInput(): void; /** * @hidden @internal */ onCheckboxChange(eventArgs: IChangeCheckboxEventArgs): void; /** * @hidden @internal */ onSelectAllCheckboxChange(eventArgs: IChangeCheckboxEventArgs): void; /** * @hidden @internal */ onNodeSelectionChange(eventArgs: ITreeNodeSelectionEvent): void; /** * @hidden @internal */ get itemSize(): string; /** * @hidden @internal */ get containerSize(): any; protected get id(): string; protected set id(value: string); protected getItemId(index: number): string; protected setActiveDescendant(): void; protected get focusedItem(): ActiveElement; protected set focusedItem(val: ActiveElement); /** * @hidden @internal */ get applyButtonDisabled(): boolean; /** * @hidden @internal */ onInputKeyDown(event: KeyboardEvent): void; /** * @hidden @internal */ filterListData(): void; /** * @hidden @internal */ applyFilter(): void; protected handleKeyDown(event: KeyboardEvent): void; protected onFocus(): void; protected onFocusOut(): void; /** * @hidden @internal */ isHierarchical(): boolean; /** * @hidden @internal */ isTreeEmpty(): boolean; private hierarchicalSelectMatches; private hierarchicalSelectAllChildren; private expandAllParentNodes; private addFilteredToSelectedItems; private createCondition; /** * @hidden @internal */ private rejectNonNumericalEntries; private onArrowUpKeyDown; private onArrowDownKeyDown; private onHomeKeyDown; private onEndKeyDown; private onActionKeyDown; private navigateItem; private isIndexOutOfBounds; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * A component used for presenting Excel style conditional filter UI. */ declare class IgxExcelStyleSelectingComponent { esf: BaseFilteringComponent; constructor(esf: BaseFilteringComponent); static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * A component used for presenting Excel style column sorting UI. */ declare class IgxExcelStyleSortingComponent implements OnDestroy { esf: BaseFilteringComponent; private cdr; /** * @hidden @internal */ defaultClass: boolean; /** * @hidden @internal */ sortButtonGroup: IgxButtonGroupComponent; private destroy$; constructor(esf: BaseFilteringComponent, cdr: ChangeDetectorRef); ngOnDestroy(): void; /** * @hidden @internal */ onSortButtonClicked(sortDirection: any): void; protected get esfSize(): string; private updateSelectedButtons; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } declare class IgxExcelStyleColumnOperationsTemplateDirective { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } declare class IgxExcelStyleFilterOperationsTemplateDirective { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * A component used for presenting Excel style filtering UI for a specific column. * It is used internally in the Grid, but could also be hosted in a container outside of it. * * Example: * ```html * * * ``` */ declare class IgxGridExcelStyleFilteringComponent extends BaseFilteringComponent implements AfterViewInit, OnDestroy { private document; protected gridAPI?: GridType; /** * @hidden @internal */ defaultClass: boolean; protected get shouldApplySizes(): boolean; /** * @hidden @internal */ inline: boolean; /** * @hidden @internal */ loadingStart: EventEmitter; /** * @hidden @internal */ loadingEnd: EventEmitter; /** * @hidden @internal */ initialized: EventEmitter; /** * @hidden @internal */ sortingChanged: EventEmitter; /** * @hidden @internal */ columnChange: EventEmitter; /** * @hidden @internal */ listDataLoaded: EventEmitter; mainDropdown: ElementRef; /** * @hidden @internal */ excelColumnOperationsDirective: IgxExcelStyleColumnOperationsTemplateDirective; /** * @hidden @internal */ excelFilterOperationsDirective: IgxExcelStyleFilterOperationsTemplateDirective; /** * @hidden @internal */ protected defaultExcelColumnOperations: TemplateRef; /** * @hidden @internal */ protected defaultExcelFilterOperations: TemplateRef; /** * Sets the column. */ set column(value: ColumnType); /** * Returns the current column. */ get column(): ColumnType; /** * @hidden @internal */ expressionsList: ExpressionUI[]; /** * @hidden @internal */ listData: FilterListItem[]; /** * @hidden @internal */ uniqueValues: IgxFilterItem[]; /** * @hidden @internal */ overlayService: IgxOverlayService; /** * @hidden @internal */ overlayComponentId: string; /** * @hidden @internal */ isHierarchical: boolean; private _minHeight; /** * Gets the minimum height. * * Setting value in template: * ```ts * [minHeight]="''" * ``` * * Example for setting a value: * ```ts * [minHeight]="'700px'" * ``` */ get minHeight(): string; /** * Sets the minimum height. */ set minHeight(value: string); private _maxHeight; private containsNullOrEmpty; private selectAllSelected; private selectAllIndeterminate; private filterValues; private _column; private subscriptions; private _originalDisplay; /** * Gets the maximum height. * * Setting value in template: * ```ts * [maxHeight]="''" * ``` * * Example for setting a value: * ```ts * [maxHeight]="'700px'" * ``` */ get maxHeight(): string; /** * Sets the maximum height. */ set maxHeight(value: string); /** * @hidden @internal */ get grid(): GridType; constructor(cdr: ChangeDetectorRef, element: ElementRef, platform: PlatformUtil, document: any, gridAPI?: GridType); /** * @hidden @internal */ ngOnDestroy(): void; /** * @hidden @internal */ ngAfterViewInit(): void; /** * @hidden @internal */ initialize(column: ColumnType, overlayService: IgxOverlayService): void; /** * @hidden @internal */ onPin(): void; /** * @hidden @internal */ onSelect(): void; /** * @hidden @internal */ columnSelectable(): boolean; /** * @hidden @internal */ onHideToggle(): void; /** * @hidden @internal */ cancel(): void; /** * @hidden @internal */ closeDropdown(): void; /** * @hidden @internal */ onKeyDown(eventArgs: KeyboardEvent): void; /** * @hidden @internal */ hide(): void; /** * @hidden @internal */ detectChanges(): void; protected computedStyles: any; protected get size(): string; private init; private areExpressionsSelectable; private populateColumnData; private renderColumnValuesRemotely; private renderColumnValuesFromData; private renderValues; private generateFilterValues; private modifyExpression; private generateListData; private getColumnFilterExpressionsTree; private addBooleanItems; private addItems; private generateFilterListItems; private addSelectAllItem; private generateBlanksItem; private getFilterItemLabel; private getExpressionValue; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @hidden */ declare class IgxExcelStyleDateExpressionComponent extends IgxExcelStyleDefaultExpressionComponent { private input; private picker; get searchVal(): any; set searchVal(value: any); protected get inputValuesElement(): HTMLInputElement; get inputDatePlaceholder(): string; get inputTimePlaceholder(): string; get weekStart(): number; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } declare class IgxGridFooterComponent { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * An internal component representing a base group-by drop area. * * @hidden @internal */ declare abstract class IgxGroupByAreaDirective { private ref; protected platform: PlatformUtil; /** * The drop area template if provided by the parent grid. * Otherwise, uses the default internal one. */ dropAreaTemplate: TemplateRef; defaultClass: boolean; /** The parent grid containing the component. */ grid: FlatGridType | GridType; /** * The group-by expressions provided by the parent grid. */ get expressions(): IGroupingExpression[]; set expressions(value: IGroupingExpression[]); /** * The default message for the default drop area template. * Obviously, if another template is provided, this is ignored. */ get dropAreaMessage(): string; set dropAreaMessage(value: string); expressionsChange: EventEmitter; chips: QueryList; chipExpressions: IGroupingExpression[]; /** The native DOM element. Used in sizing calculations. */ get nativeElement(): HTMLElement; private _expressions; private _dropAreaMessage; constructor(ref: ElementRef, platform: PlatformUtil); get dropAreaVisible(): boolean; handleKeyDown(id: string, event: KeyboardEvent): void; handleClick(id: string): void; onDragDrop(event: any): void; protected getReorderedExpressions(chipsArray: IgxChipComponent[]): any[]; protected updateGroupSorting(id: string): void; protected expressionsChanged(): void; abstract handleReorder(event: IChipsAreaReorderEventArgs): any; abstract handleMoveEnd(): any; abstract groupBy(expression: IGroupingExpression): any; abstract clearGrouping(name: string): any; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * @hidden */ declare class IgxGroupByRowTemplateDirective { template: TemplateRef; static ngTemplateContextGuard(_dir: IgxGroupByRowTemplateDirective, ctx: unknown): ctx is IgxGroupByRowTemplateContext; constructor(template: TemplateRef); static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * @hidden */ declare class IgxGridDetailTemplateDirective { static ngTemplateContextGuard(_dir: IgxGridDetailTemplateDirective, ctx: unknown): ctx is IgxGridMasterDetailContext; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * @hidden */ declare class IgxRowExpandedIndicatorDirective { static ngTemplateContextGuard(_directive: IgxRowExpandedIndicatorDirective, context: unknown): context is IgxGridRowTemplateContext; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * @hidden */ declare class IgxRowCollapsedIndicatorDirective { static ngTemplateContextGuard(_directive: IgxRowCollapsedIndicatorDirective, context: unknown): context is IgxGridRowTemplateContext; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * @hidden */ declare class IgxHeaderExpandedIndicatorDirective { static ngTemplateContextGuard(_directive: IgxHeaderExpandedIndicatorDirective, context: unknown): context is IgxGridTemplateContext; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * @hidden */ declare class IgxHeaderCollapsedIndicatorDirective { static ngTemplateContextGuard(_directive: IgxHeaderCollapsedIndicatorDirective, context: unknown): context is IgxGridTemplateContext; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * @hidden */ declare class IgxExcelStyleHeaderIconDirective { static ngTemplateContextGuard(_directive: IgxExcelStyleHeaderIconDirective, context: unknown): context is IgxGridHeaderTemplateContext; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * @hidden */ declare class IgxSortHeaderIconDirective { static ngTemplateContextGuard(_directive: IgxSortHeaderIconDirective, context: unknown): context is IgxGridHeaderTemplateContext; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * @hidden */ declare class IgxSortAscendingHeaderIconDirective { static ngTemplateContextGuard(_directive: IgxSortAscendingHeaderIconDirective, context: unknown): context is IgxGridHeaderTemplateContext; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * @hidden */ declare class IgxSortDescendingHeaderIconDirective { static ngTemplateContextGuard(_directive: IgxSortDescendingHeaderIconDirective, context: unknown): context is IgxGridHeaderTemplateContext; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** @hidden */ declare class IgxGridLoadingTemplateDirective { static ngTemplateContextGuard(_directive: IgxGridLoadingTemplateDirective, context: unknown): context is IgxGridTemplateContext; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** @hidden */ declare class IgxGridEmptyTemplateDirective { static ngTemplateContextGuard(_directive: IgxGridEmptyTemplateDirective, context: unknown): context is IgxGridTemplateContext; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * @hidden */ declare class IgxGroupAreaDropDirective extends IgxDropDirective { private groupArea; private elementRef; hovered: boolean; constructor(groupArea: IgxGroupByAreaDirective, elementRef: ElementRef, renderer: Renderer2, zone: NgZone); onDragEnter(event: any): void; onDragLeave(event: any): void; private closestParentByAttr; private columnBelongsToGrid; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** @hidden */ interface IgxTimePickerBase { hourList: ElementRef; locale: string; minuteList: ElementRef; secondsList: ElementRef; ampmList: ElementRef; inputFormat: string; itemsDelta: Pick; spinLoop: boolean; selectedDate: Date; maxDropdownValue: Date; minDropdownValue: Date; isTwelveHourFormat: boolean; showHoursList: boolean; showMinutesList: boolean; showSecondsList: boolean; showAmPmList: boolean; minDateValue: Date; maxDateValue: Date; /** @hidden @internal */ appliedFormat: string; nextHour(delta: number): any; nextMinute(delta: number): any; nextSeconds(delta: number): any; nextAmPm(delta: number): any; close(): void; cancelButtonClick(): void; okButtonClick(): void; onItemClick(item: string, dateType: string): void; getPartValue(value: Date, type: string): string; toISOString(value: Date): string; } interface ITimePickerResourceStrings { igx_time_picker_ok?: string; igx_time_picker_cancel?: string; igx_time_picker_change_time?: string; igx_time_picker_choose_time?: string; } declare const TimePickerResourceStringsEN: ITimePickerResourceStrings; interface IgxTimePickerValidationFailedEventArgs extends IBaseEventArgs { previousValue: Date | string; currentValue: Date | string; } declare class IgxTimePickerComponent extends PickerBaseDirective implements IgxTimePickerBase, ControlValueAccessor, OnInit, OnDestroy, AfterViewInit, Validator { private _injector; private platform; private cdr; /** * Sets the value of the `id` attribute. * ```html * * ``` */ id: string; /** * The format used when editable input is not focused. Defaults to the `inputFormat` if not set. * * @remarks * Uses Angular's `DatePipe`. * * @example * ```html * * ``` * */ displayFormat: string; /** * The expected user input format and placeholder. * * @remarks * Default is `hh:mm tt` * * @example * ```html * * ``` */ inputFormat: string; /** * Gets/Sets the interaction mode - dialog or drop down. * * @example * ```html * * ``` */ mode: PickerInteractionMode; /** * The minimum value the picker will accept. * * @remarks * If a `string` value is passed in, it must be in ISO format. * * @example * ```html * * ``` */ set minValue(value: Date | string); get minValue(): Date | string; /** * Gets if the dropdown/dialog is collapsed * * ```typescript * let isCollapsed = this.timePicker.collapsed; * ``` */ get collapsed(): boolean; /** * The maximum value the picker will accept. * * @remarks * If a `string` value is passed in, it must be in ISO format. * * @example * ```html * * ``` */ set maxValue(value: Date | string); get maxValue(): Date | string; /** * Sets whether the seconds, minutes and hour spinning will loop back around when end value is reached. * By default it's set to true. * ```html * * ``` */ spinLoop: boolean; /** * Gets/Sets a custom formatter function on the selected or passed date. * * @example * ```html * * ``` */ formatter: (val: Date) => string; /** * Sets the orientation of the picker's header. * * @remarks * Available in dialog mode only. Default value is `horizontal`. * * ```html * * ``` */ headerOrientation: PickerHeaderOrientation; /** @hidden @internal */ readOnly: boolean; /** * Emitted after a selection has been done. * * @example * ```html * * ``` */ selected: EventEmitter; /** * Emitted when the picker's value changes. * * @remarks * Used for `two-way` bindings. * * @example * ```html * * ``` */ valueChange: EventEmitter; /** * Emitted when the user types/spins invalid time in the time-picker editor. * * @example * ```html * * ``` */ validationFailed: EventEmitter; /** @hidden */ hourList: ElementRef; /** @hidden */ minuteList: ElementRef; /** @hidden */ secondsList: ElementRef; /** @hidden */ ampmList: ElementRef; /** @hidden @internal */ clearComponents: QueryList; /** @hidden @internal */ label: IgxLabelDirective; /** @hidden @internal */ timePickerActionsDirective: IgxPickerActionsDirective; private inputDirective; private _inputGroup; private dateTimeEditor; private toggleRef; /** @hidden */ cleared: boolean; /** @hidden */ isNotEmpty: boolean; /** @hidden */ currentHour: number; /** @hidden */ currentMinutes: number; /** @hidden */ get showClearButton(): boolean; /** @hidden */ get showHoursList(): boolean; /** @hidden */ get showMinutesList(): boolean; /** @hidden */ get showSecondsList(): boolean; /** @hidden */ get showAmPmList(): boolean; /** @hidden */ get isTwelveHourFormat(): boolean; /** @hidden @internal */ get isVertical(): boolean; /** @hidden @internal */ get selectedDate(): Date; /** @hidden @internal */ get minDateValue(): Date; /** @hidden @internal */ get maxDateValue(): Date; /** @hidden @internal */ get appliedFormat(): string; protected get toggleContainer(): HTMLElement | undefined; private get required(); private get dialogOverlaySettings(); private get dropDownOverlaySettings(); /** @hidden @internal */ displayValue: PipeTransform; /** @hidden @internal */ minDropdownValue: Date; /** @hidden @internal */ maxDropdownValue: Date; /** @hidden @internal */ hourItems: any[]; /** @hidden @internal */ minuteItems: any[]; /** @hidden @internal */ secondsItems: any[]; /** @hidden @internal */ ampmItems: any[]; private _value; private _dateValue; private _dateMinValue; private _dateMaxValue; private _selectedDate; private _resourceStrings; private _okButtonLabel; private _cancelButtonLabel; private _itemsDelta; private _statusChanges$; private _ngControl; private _onChangeCallback; private _onTouchedCallback; private _onValidatorChange; private _defaultDialogOverlaySettings; private _defaultDropDownOverlaySettings; /** * The currently selected value / time from the drop-down/dialog * * @remarks * The current value is of type `Date` * * @example * ```typescript * const newValue: Date = new Date(2000, 2, 2, 10, 15, 15); * this.timePicker.value = newValue; * ``` */ get value(): Date | string; /** * An accessor that allows you to set a time using the `value` input. * ```html * public date: Date = new Date(Date.now()); * //... * * ``` */ set value(value: Date | string); /** * An accessor that sets the resource strings. * By default it uses EN resources. */ set resourceStrings(value: ITimePickerResourceStrings); /** * An accessor that returns the resource strings. */ get resourceStrings(): ITimePickerResourceStrings; /** * Overrides the default text of the **OK** button. * * @remarks * Defaults to the value from resource strings, `"OK"` for the built-in EN. * * ```html * * ``` */ set okButtonLabel(value: string); /** * An accessor that returns the label of ok button. */ get okButtonLabel(): string; /** * Overrides the default text of the **Cancel** button. * @remarks * Defaults to the value from resource strings, `"Cancel"` for the built-in EN. * ```html * * ``` */ set cancelButtonLabel(value: string); /** * An accessor that returns the label of cancel button. */ get cancelButtonLabel(): string; /** * Delta values used to increment or decrement each editor date part on spin actions and * to display time portions in the dropdown/dialog. * By default `itemsDelta` is set to `{hour: 1, minute: 1, second: 1}` * ```html * * ``` */ set itemsDelta(value: Pick); get itemsDelta(): Pick; constructor(element: ElementRef, _localeId: string, _inputGroupType: IgxInputGroupType, _injector: Injector, platform: PlatformUtil, cdr: ChangeDetectorRef); /** @hidden @internal */ onKeyDown(event: KeyboardEvent): void; /** @hidden @internal */ getPartValue(value: Date, type: string): string; /** @hidden @internal */ toISOString(value: Date): string; /** @hidden @internal */ writeValue(value: Date | string): void; /** @hidden @internal */ registerOnChange(fn: (_: Date | string) => void): void; /** @hidden @internal */ registerOnTouched(fn: () => void): void; /** @hidden @internal */ registerOnValidatorChange(fn: any): void; /** @hidden @internal */ validate(control: AbstractControl): ValidationErrors | null; /** @hidden @internal */ setDisabledState(isDisabled: boolean): void; /** @hidden */ ngOnInit(): void; /** @hidden */ ngAfterViewInit(): void; /** @hidden */ ngOnDestroy(): void; /** @hidden */ getEditElement(): HTMLInputElement; /** * Opens the picker's dialog UI. * * @param settings OverlaySettings - the overlay settings to use for positioning the drop down or dialog container according to * ```html * * * ``` */ open(settings?: OverlaySettings): void; /** * Closes the dropdown/dialog. * ```html * * ``` * ```typescript * @ViewChild('timePicker', { read: IgxTimePickerComponent }) picker: IgxTimePickerComponent; * picker.close(); * ``` */ close(): void; toggle(settings?: OverlaySettings): void; /** * Clears the time picker value if it is a `string` or resets the time to `00:00:00` if the value is a Date object. * * @example * ```typescript * this.timePicker.clear(); * ``` */ clear(): void; /** * Selects time from the igxTimePicker. * * @example * ```typescript * this.timePicker.select(date); * * @param date Date object containing the time to be selected. */ select(date: Date | string): void; /** * Increment a specified `DatePart`. * * @param datePart The optional DatePart to increment. Defaults to Hour. * @param delta The optional delta to increment by. Overrides `itemsDelta`. * @example * ```typescript * this.timePicker.increment(DatePart.Hours); * ``` */ increment(datePart?: DatePart, delta?: number): void; /** * Decrement a specified `DatePart` * * @param datePart The optional DatePart to decrement. Defaults to Hour. * @param delta The optional delta to decrement by. Overrides `itemsDelta`. * @example * ```typescript * this.timePicker.decrement(DatePart.Seconds); * ``` */ decrement(datePart?: DatePart, delta?: number): void; /** @hidden @internal */ cancelButtonClick(): void; /** @hidden @internal */ okButtonClick(): void; /** @hidden @internal */ onItemClick(item: string, dateType: string): void; /** @hidden @internal */ nextHour(delta: number): void; /** @hidden @internal */ nextMinute(delta: number): void; /** @hidden @internal */ nextSeconds(delta: number): void; /** @hidden @internal */ nextAmPm(delta?: number): void; /** @hidden @internal */ setSelectedValue(value: Date): void; protected onStatusChanged(): void; private get isTouchedOrDirty(); private get hasValidators(); private setMinMaxDropdownValue; private initializeContainer; private validateDropdownValue; private emitValueChange; private emitValidationFailedEvent; private updateValidityOnBlur; private valueInRange; private parseToDate; private toTwentyFourHourFormat; private updateValue; private updateEditorValue; private subscribeToDateEditorEvents; private subscribeToToggleDirectiveEvents; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; static ngAcceptInputType_spinLoop: unknown; static ngAcceptInputType_readOnly: unknown; } /** * @hidden */ declare class IgxGridFilteringRowComponent implements AfterViewInit, OnDestroy { filteringService: IgxFilteringService; ref: ElementRef; cdr: ChangeDetectorRef; protected platform: PlatformUtil; get column(): ColumnType; set column(val: ColumnType); get value(): any; set value(val: any); protected get filteringElementsSize(): Size$1; defaultCSSClass: boolean; protected defaultFilterUI: TemplateRef; protected defaultDateUI: TemplateRef; protected defaultTimeUI: TemplateRef; protected defaultDateTimeUI: TemplateRef; protected input: ElementRef; protected dropDownConditions: IgxDropDownComponent; protected chipsArea: IgxChipsAreaComponent; protected dropDownOperators: QueryList; protected inputGroup: ElementRef; protected picker: IgxDatePickerComponent | IgxTimePickerComponent; protected inputGroupPrefix: ElementRef; protected container: ElementRef; protected operand: ElementRef; protected closeButton: ElementRef; get nativeElement(): HTMLElement; showArrows: boolean; expression: IFilteringExpression; expressionsList: Array; private _positionSettings; private _conditionsOverlaySettings; private _operatorsOverlaySettings; private chipsAreaWidth; private chipAreaScrollOffset; private _column; private isKeyPressed; private isComposing; private _cancelChipClick; private _value; /** switch to icon buttons when width is below 432px */ private readonly NARROW_WIDTH_THRESHOLD; private $destroyer; constructor(filteringService: IgxFilteringService, ref: ElementRef, cdr: ChangeDetectorRef, platform: PlatformUtil); onKeydownHandler(evt: KeyboardEvent): void; ngAfterViewInit(): void; get disabled(): boolean; get template(): TemplateRef; get type(): "number" | "text"; get conditions(): any; get isUnaryCondition(): boolean; get placeholder(): string; /** * Event handler for keydown on the input group's prefix. */ onPrefixKeyDown(event: KeyboardEvent): void; /** * Event handler for keydown on the input. */ onInputKeyDown(event: KeyboardEvent): void; /** * Event handler for keyup on the input. */ onInputKeyUp(): void; /** * Event handler for input on the input. */ onInput(eventArgs: any): void; /** * Event handler for compositionstart on the input. */ onCompositionStart(): void; /** * Event handler for compositionend on the input. */ onCompositionEnd(): void; /** * Event handler for input click event. */ onInputClick(): void; /** * Returns the filtering operation condition for a given value. */ getCondition(value: string): IFilteringOperation; /** * Returns the translated condition name for a given value. */ translateCondition(value: string): string; /** * Returns the icon name of the current condition. */ getIconName(): string; /** * Returns whether a given condition is selected in dropdown. */ isConditionSelected(conditionName: string): boolean; /** * Clears the current filtering. */ clearFiltering(): void; /** * Commits the value of the input. */ commitInput(): void; /** * Clears the value of the input. */ clearInput(event?: MouseEvent): void; /** * Event handler for keydown on clear button. */ onClearKeyDown(eventArgs: KeyboardEvent): void; /** * Event handler for click on clear button. */ onClearClick(): void; /** * Event handler for keydown on commit button. */ onCommitKeyDown(eventArgs: KeyboardEvent): void; /** * Event handler for click on commit button. */ onCommitClick(event?: MouseEvent): void; /** * Event handler for focusout on the input group. */ onInputGroupFocusout(): void; /** * Closes the filtering edit row. */ close(): void; /** * Event handler for date picker's selection. */ onDateSelected(value: Date): void; /** @hidden @internal */ inputGroupPrefixClick(event: MouseEvent): void; /** * Opens the conditions dropdown. */ toggleConditionsDropDown(target: any): void; /** * Opens the logic operators dropdown. */ toggleOperatorsDropDown(eventArgs: any, index: any): void; /** * Event handler for change event in conditions dropdown. */ onConditionsChanged(eventArgs: any): void; onChipPointerdown(args: any, chip: IgxChipComponent): void; onChipClick(args: any, item: ExpressionUI): void; toggleChip(item: ExpressionUI): void; /** * Event handler for chip keydown event. */ onChipKeyDown(eventArgs: KeyboardEvent, item: ExpressionUI): void; /** * Scrolls the first chip into view if the tab key is pressed on the left arrow. */ onLeftArrowKeyDown(event: KeyboardEvent): void; /** * Event handler for chip removed event. */ onChipRemoved(eventArgs: IBaseChipEventArgs, item: ExpressionUI): void; /** * Event handler for logic operator changed event. */ onLogicOperatorChanged(eventArgs: ISelectionEventArgs, expression: ExpressionUI): void; /** * Scrolls the chips into the chip area when left or right arrows are pressed. */ scrollChipsOnArrowPress(arrowPosition: string): void; /** * @hidden * Resets the chips area * @memberof IgxGridFilteringRowComponent */ resetChipsArea(): void; /** @hidden @internal */ focusEditElement(): void; ngOnDestroy(): void; private showHideArrowButtons; private addExpression; private removeExpression; private resetExpression; private scrollChipsWhenAddingExpression; private transform; private scrollChipsOnRemove; private conditionChangedCallback; private unaryConditionChangedCallback; private filter; private editorFocused; private get isColumnFiltered(); get isNarrowWidth(): boolean; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * * For all intents & purposes treat this component as what a usually is in the default element. * * This container holds the grid header elements and their behavior/interactions. * * @hidden @internal */ declare class IgxGridHeaderRowComponent implements DoCheck { protected ref: ElementRef; protected cdr: ChangeDetectorRef; /** The grid component containing this element. */ grid: GridType; /** Pinned columns of the grid. */ pinnedColumnCollection: ColumnType[]; /** Unpinned columns of the grid. */ unpinnedColumnCollection: ColumnType[]; activeDescendant: string; hasMRL: boolean; width: number; /** * Header groups inside the header row. * * @remarks * Note: These are only the top level header groups in case there are multi-column headers * or a specific column layout. If you want to get the flattened collection use the `groups` * property below. * * @hidden @internal * */ _groups: QueryList; /** * The flattened header groups collection. * * @hidden @internal */ get groups(): IgxGridHeaderGroupComponent[]; /** Header components in the header row. */ get headers(): IgxGridHeaderComponent[]; /** Filtering cell components in the header row. */ get filters(): IgxGridFilteringCellComponent[]; /** The virtualized part of the header row containing the unpinned header groups. */ headerContainer: IgxGridForOfDirective; get headerForOf(): IgxGridForOfDirective; headerDragContainer: ElementRef; headerSelectorContainer: ElementRef; headerGroupContainer: ElementRef; headSelectorBaseTemplate: TemplateRef; filterRow: IgxGridFilteringRowComponent; /** * Expand/collapse all child grids area in a hierarchical grid. * `undefined` in the base and tree grids. * * @internal @hidden */ headerHierarchyExpander: ElementRef; get navigation(): any; get nativeElement(): HTMLElement; /** * Returns whether the current grid instance is a hierarchical grid. * as only hierarchical grids have the `isHierarchicalRecord` method. * * @hidden @internal */ get isHierarchicalGrid(): boolean; get indentationCSSClasses(): string; get rowSelectorsContext(): IgxHeadSelectorTemplateContext; constructor(ref: ElementRef, cdr: ChangeDetectorRef); /** * This hook exists as a workaround for the unfortunate fact * that when we have pinned columns in the grid, the unpinned columns headers * are affected by a delayed change detection cycle after a horizontal scroll :( * Thus, we tell the parent grid change detector to check us at each cycle. * * @hidden @internal */ ngDoCheck(): void; /** * @hidden @internal */ scroll(event: Event): void; headerRowSelection(event: MouseEvent): void; /** state persistence switching all pinned columns resets collection */ protected trackPinnedColumn: typeof trackByIdentity; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; static ngAcceptInputType_hasMRL: unknown; } /** * @hidden */ declare class IgxDragIndicatorIconDirective { static ngTemplateContextGuard(_directive: IgxDragIndicatorIconDirective, context: unknown): context is IgxGridEmptyTemplateContext; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * @hidden */ declare class IgxRowDragGhostDirective { templateRef: TemplateRef; constructor(templateRef: TemplateRef); static ngTemplateContextGuard(_directive: IgxRowDragGhostDirective, context: unknown): context is IgxGridRowDragGhostContext; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * @hidden * @internal */ declare class IgxRowSelectorDirective { templateRef: TemplateRef; constructor(templateRef: TemplateRef); static ngTemplateContextGuard(_directive: IgxRowSelectorDirective, context: unknown): context is IgxRowSelectorTemplateContext; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * @hidden * @internal */ declare class IgxGroupByRowSelectorDirective { templateRef: TemplateRef; constructor(templateRef: TemplateRef); static ngTemplateContextGuard(_directive: IgxGroupByRowSelectorDirective, context: unknown): context is IgxGroupByRowSelectorTemplateContext; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * @hidden * @internal */ declare class IgxHeadSelectorDirective { templateRef: TemplateRef; constructor(templateRef: TemplateRef); static ngTemplateContextGuard(_directive: IgxHeadSelectorDirective, context: unknown): context is IgxHeadSelectorTemplateContext; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } interface IGridState { columns?: IColumnState[]; filtering?: IFilteringExpressionsTree; advancedFiltering?: IFilteringExpressionsTree; paging?: IPagingState; moving?: boolean; sorting?: ISortingExpression[]; groupBy?: IGroupingState; cellSelection?: GridSelectionRange[]; rowSelection?: any[]; columnSelection?: string[]; rowPinning?: any[]; pinningConfig?: IPinningConfig; expansion?: any[]; rowIslands?: IGridStateCollection[]; id?: string; pivotConfiguration?: IPivotConfiguration; } interface IGridStateCollection { id: string; parentRowID: any; state: IGridState; } interface IGridStateOptions { columns?: boolean; filtering?: boolean; advancedFiltering?: boolean; sorting?: boolean; groupBy?: boolean; paging?: boolean; cellSelection?: boolean; rowSelection?: boolean; columnSelection?: boolean; rowPinning?: boolean; pinningConfig?: boolean; expansion?: boolean; rowIslands?: boolean; moving?: boolean; pivotConfiguration?: boolean; } interface IColumnState { pinned: boolean; sortable: boolean; filterable: boolean; editable: boolean; sortingIgnoreCase: boolean; filteringIgnoreCase: boolean; headerClasses: string; headerGroupClasses: string; maxWidth: string; groupable: boolean; hidden: boolean; dataType: GridColumnDataType; hasSummary: boolean; field: string; width: any; header: string; resizable: boolean; searchable: boolean; columnGroup: boolean; columnLayout?: boolean; rowStart?: number; rowEnd?: number; colStart?: number; colEnd?: number; /** * @deprecated */ parent?: any; key: string; parentKey: string; disableHiding: boolean; disablePinning: boolean; collapsible?: boolean; expanded?: boolean; visibleWhenCollapsed?: boolean; } type GridFeatures = keyof IGridStateOptions; declare class IgxGridStateBaseDirective { grid: GridType; protected viewRef: ViewContainerRef; protected envInjector: EnvironmentInjector; protected injector: Injector; private featureKeys; private state; private currGrid; protected _options: IGridStateOptions; private FEATURES; /** * An object with options determining if a certain feature state should be saved. * ```html * * ``` * ```typescript * public options = {selection: false, advancedFiltering: false}; * ``` */ get options(): IGridStateOptions; set options(value: IGridStateOptions); /** * @hidden */ constructor(grid: GridType, viewRef: ViewContainerRef, envInjector: EnvironmentInjector, injector: Injector); /** * Gets the state of a feature or states of all grid features, unless a certain feature is disabled through the `options` property. * * @param `serialize` determines whether the returned object will be serialized to JSON string. Default value is true. * @param `feature` string or array of strings determining the features to be added in the state. If skipped, all features are added. * @returns Returns the serialized to JSON string IGridState object, or the non-serialized IGridState object. * ```html * * ``` * ```typescript * @ViewChild(IgxGridStateDirective, { static: true }) public state; * let state = this.state.getState(); // returns string * let state = this.state(false) // returns `IGridState` object * ``` */ protected getStateInternal(serialize?: boolean, features?: GridFeatures | GridFeatures[]): IGridState | string; /** * Restores grid features' state based on the IGridState object passed as an argument. * * @param IGridState object to restore state from. * @returns * ```html * * ``` * ```typescript * @ViewChild(IgxGridStateDirective, { static: true }) public state; * this.state.setState(gridState); * ``` */ protected setStateInternal(state: IGridState, features?: GridFeatures | GridFeatures[]): void; /** * Builds an IGridState object. */ private buildState; /** * The method that calls corresponding methods to restore features from the passed IGridState object. */ private restoreGridState; private restoreFeatures; /** * Returns a collection of all grid features. */ private applyFeatures; /** * This method restores complex objects in the pivot dimensions * Like the IgxPivotDateDimension and filters. */ private restoreDimensions; /** * This method restores the IgxPivotDateDimension with its default functions and resource strings. */ private restoreDateDimension; /** * Returns if this is a IgxPivotDateDimension. */ private isDateDimension; /** * This method restores complex objects in the pivot values. * Like the default aggregator methods. */ private restoreValues; /** * This method builds a rehydrated IExpressionTree from a provided object. */ private createExpressionsTreeFromObject; protected stringifyCallback(key: string, val: any): any; private getColumnGroupKey; private getFeature; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } declare class IgxGridStateDirective extends IgxGridStateBaseDirective { private static ngAcceptInputType_options; /** * An object with options determining if a certain feature state should be saved. * ```html * * ``` * ```typescript * public options = {selection: false, advancedFiltering: false}; * ``` */ get options(): IGridStateOptions; set options(value: IGridStateOptions); /** * Gets the state of a feature or states of all grid features, unless a certain feature is disabled through the `options` property. * * @param `serialize` determines whether the returned object will be serialized to JSON string. Default value is true. * @param `feature` string or array of strings determining the features to be added in the state. If skipped, all features are added. * @returns Returns the serialized to JSON string IGridState object, or the non-serialized IGridState object. * ```html * * ``` * ```typescript * @ViewChild(IgxGridStateDirective, { static: true }) public state; * let state = this.state.getState(); // returns string * let state = this.state(false) // returns `IGridState` object * ``` */ getState(serialize?: boolean, features?: GridFeatures | GridFeatures[]): IGridState | string; /** * Restores grid features' state based on the IGridState object passed as an argument. * * @param IGridState object to restore state from. * @returns * ```html * * ``` * ```typescript * @ViewChild(IgxGridStateDirective, { static: true }) public state; * this.state.setState(gridState); * ``` */ setState(state: IGridState | string, features?: GridFeatures | GridFeatures[]): void; /** * Event emitted when set state is called with a string. * Returns the parsed state object so that it can be further modified before applying to the grid. * ```typescript * this.state.stateParsed.subscribe(parsedState => parsedState.sorting.forEach(x => x.strategy = NoopSortingStrategy.instance()}); * ``` */ stateParsed: EventEmitter; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } declare class IgxExcelTextDirective { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } declare class IgxCSVTextDirective { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * Provides a way to template the title portion of the toolbar in the grid. * * @igxModule IgxGridToolbarModule * @igxParent IgxGridToolbarComponent * * @example * ```html * My custom title * ``` */ declare class IgxGridToolbarTitleComponent { /** * Host `class.igx-grid-toolbar__title` binding. * * @hidden * @internal */ cssClass: string; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * Provides a way to template the action portion of the toolbar in the grid. * * @igxModule IgxGridToolbarModule * @igxParent IgxGridToolbarComponent * * @example * ```html * * * * ``` */ declare class IgxGridToolbarActionsComponent { /** * Host `class.igx-grid-toolbar__actions` binding. * * @hidden * @internal */ cssClass: string; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } interface IgxGridToolbarTemplateContext { $implicit: GridType; } declare class IgxGridToolbarDirective { template: TemplateRef; constructor(template: TemplateRef); static ngTemplateContextGuard(_dir: IgxGridToolbarDirective, ctx: unknown): ctx is IgxGridToolbarTemplateContext; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * Provides a context-aware container component for UI operations for the grid components. * * @igxModule IgxGridToolbarModule * @igxParent IgxGridComponent, IgxTreeGridComponent, IgxHierarchicalGridComponent, IgxPivotGridComponent * */ declare class IgxGridToolbarComponent implements OnDestroy { private api; private iconService; private element; /** * When enabled, shows the indeterminate progress bar. * * @remarks * By default this will be toggled, when the default exporter component is present * and an exporting is in progress. */ showProgress: boolean; /** * Gets/sets the grid component for the toolbar component. * * @deprecated since version 17.1.0. No longer required to be set for the Hierarchical Grid child grid template * * @remarks * Usually you should not set this property in the context of the default grid/tree grid. * The only grids that demands this to be set are the hierarchical child grids. For additional * information check the toolbar topic. */ get grid(): GridType; set grid(value: GridType); /** Returns the native DOM element of the toolbar component */ get nativeElement(): HTMLElement; /** * @hidden * @internal */ hasActions: IgxGridToolbarActionsComponent; /** * @hidden * @internal */ defaultStyle: boolean; protected _grid: GridType; protected sub: Subscription; constructor(api: GridServiceType, iconService: IgxIconService, element: ElementRef); /** @hidden @internal */ ngOnDestroy(): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; static ngAcceptInputType_showProgress: unknown; } /** @hidden @internal */ declare abstract class IgxToolbarToken { abstract grid: GridType; abstract showProgress: boolean; } /** * Provides a pre-configured button to open the advanced filtering dialog of the grid. * * * @igxModule IgxGridToolbarModule * @igxParent IgxGridToolbarComponent, IgxGridToolbarActionsComponent * * @example * ```html * * Custom text * ``` */ declare class IgxGridToolbarAdvancedFilteringComponent implements OnInit { private toolbar; protected numberOfColumns: number; /** * Returns the grid containing this component. * @hidden @internal */ get grid(): igniteui_angular.GridType; overlaySettings: OverlaySettings; constructor(toolbar: IgxToolbarToken); /** * @hidden */ ngOnInit(): void; protected extractUniqueFieldNamesFromFilterTree(filteringTree?: IFilteringExpressionsTree): string[]; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * Base class for the pinning/hiding column and exporter actions. * * @hidden @internal */ declare abstract class BaseToolbarDirective implements OnDestroy { protected toolbar: IgxToolbarToken; /** * Sets the height of the column list in the dropdown. */ columnListHeight: string; /** * Title text for the column action component */ title: string; /** * The placeholder text for the search input. */ prompt: string; /** * Sets overlay settings */ set overlaySettings(overlaySettings: OverlaySettings); /** * Returns overlay settings */ get overlaySettings(): OverlaySettings; /** * Emits an event before the toggle container is opened. */ opening: EventEmitter; /** * Emits an event after the toggle container is opened. */ opened: EventEmitter; /** * Emits an event before the toggle container is closed. */ closing: EventEmitter; /** * Emits an event after the toggle container is closed. */ closed: EventEmitter; /** * Emits when after a column's checked state is changed */ columnToggle: EventEmitter; private $destroy; private $sub; private _overlaySettings; /** * Returns the grid containing this component. * @hidden @internal */ get grid(): igniteui_angular.GridType; constructor(toolbar: IgxToolbarToken); /** @hidden @internal **/ ngOnDestroy(): void; /** @hidden @internal */ toggle(anchorElement: HTMLElement, toggleRef: IgxToggleDirective, actions?: IgxColumnActionsComponent): void; /** @hidden @internal */ focusSearch(columnActions: HTMLElement): void; private _setupListeners; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * @hidden @internal * Base class for pinning/hiding column actions */ declare abstract class BaseToolbarColumnActionsDirective extends BaseToolbarDirective { hideFilter: boolean; filterCriteria: string; columnDisplayOrder: ColumnDisplayOrder; columnsAreaMaxHeight: string; uncheckAllText: string; checkAllText: string; indentetion: number; buttonText: string; protected columnActionsUI: IgxColumnActionsComponent; checkAll(): void; uncheckAll(): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; static ngAcceptInputType_hideFilter: unknown; } type IgxExporterOptions = IgxCsvExporterOptions | IgxExcelExporterOptions; interface IgxExporterEvent { exporter: IgxBaseExporter; options: IgxExporterOptions; grid: GridType; cancel: boolean; } /** * Provides a pre-configured exporter component for the grid. * * @remarks * This component still needs the actual exporter service(s) provided in the DI chain * in order to export something. * * @igxModule IgxGridToolbarModule * @igxParent IgxGridToolbarComponent, IgxGridToolbarActionsComponent * */ declare class IgxGridToolbarExporterComponent extends BaseToolbarDirective { private excelExporter; private csvExporter; /** * Show entry for CSV export. */ exportCSV: boolean; /** * Show entry for Excel export. */ exportExcel: boolean; /** * The name for the exported file. */ filename: string; /** * Emitted when starting an export operation. Re-emitted additionally * by the grid itself. */ exportStarted: EventEmitter; /** * Emitted on successful ending of an export operation. */ exportEnded: EventEmitter; /** * Indicates whether there is an export in progress. */ protected isExporting: boolean; constructor(toolbar: IgxToolbarToken, excelExporter: IgxExcelExporterService, csvExporter: IgxCsvExporterService); protected exportClicked(type: 'excel' | 'csv', toggleRef?: IgxToggleDirective): void; /** * Export the grid's data * @param type File type to export */ export(type: 'excel' | 'csv'): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; static ngAcceptInputType_exportCSV: unknown; static ngAcceptInputType_exportExcel: unknown; } /** * Provides a pre-configured column hiding component for the grid. * * * @igxModule IgxGridToolbarModule * @igxParent IgxGridToolbarComponent, IgxGridToolbarActionsComponent * * @example * ```html * * ``` */ declare class IgxGridToolbarHidingComponent extends BaseToolbarColumnActionsDirective { private set content(value); static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * Provides a pre-configured column pinning component for the grid. * * * @igxModule IgxGridToolbarModule * @igxParent IgxGridToolbarComponent, IgxGridToolbarActionsComponent * * @example * ```html * * ``` */ declare class IgxGridToolbarPinningComponent extends BaseToolbarColumnActionsDirective { private set content(value); static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } declare abstract class BaseRow implements RowType { index: number; /** * The grid that contains the row. */ grid: GridType; protected _data?: any; /** * Returns the view index calculated per the grid page. */ get viewIndex(): number; /** * Gets the row key. * A row in the grid is identified either by: * - primaryKey data value, * - the whole rowData, if the primaryKey is omitted. * * ```typescript * let rowKey = row.key; * ``` */ get key(): any; /** * Gets if this represents add row UI * * ```typescript * let isAddRow = row.addRowUI; * ``` */ get addRowUI(): boolean; /** Gets the validation status and errors, if any. * ```typescript * let validation = row.validation; * let errors = validation.errors; * ``` */ get validation(): IGridValidationState; /** * The data record that populates the row. * * ```typescript * let rowData = row.data; * ``` */ get data(): any; /** * Returns if the row is currently in edit mode. */ get inEditMode(): boolean; /** * Gets whether the row is pinned. * Default value is `false`. * ```typescript * const isPinned = row.pinned; * ``` */ get pinned(): boolean; /** * Sets whether the row is pinned. * Default value is `false`. * ```typescript * row.pinned = !row.pinned; * ``` */ set pinned(val: boolean); /** * Gets the row expanded/collapsed state. * * ```typescript * const isExpanded = row.expanded; * ``` */ get expanded(): boolean; /** * Expands/collapses the row. * * ```typescript * row.expanded = true; * ``` */ set expanded(val: boolean); /** * Gets whether the row is selected. * Default value is `false`. * ```typescript * row.selected = true; * ``` */ get selected(): boolean; /** * Sets whether the row is selected. * Default value is `false`. * ```typescript * row.selected = !row.selected; * ``` */ set selected(val: boolean); /** * Returns if the row is in delete state. */ get deleted(): boolean; /** * Returns if the row has child rows. Always return false for IgxGridRow. */ get hasChildren(): boolean; get disabled(): boolean; /** * Gets the rendered cells in the row component. */ get cells(): CellType[]; /** * Pins the specified row. * This method emits `onRowPinning` event. * * ```typescript * // pin the selected row from the grid * this.grid.selectedRows[0].pin(); * ``` */ pin(): boolean; /** * Unpins the specified row. * This method emits `onRowPinning` event. * * ```typescript * // unpin the selected row from the grid * this.grid.selectedRows[0].unpin(); * ``` */ unpin(): boolean; /** * Updates the specified row object and the data source record with the passed value. * * ```typescript * // update the second selected row's value * let newValue = "Apple"; * this.grid.selectedRows[1].update(newValue); * ``` */ update(value: any): void; /** * Removes the specified row from the grid's data source. * This method emits `onRowDeleted` event. * * ```typescript * // delete the third selected row from the grid * this.grid.selectedRows[2].delete(); * ``` */ delete(): void; } declare class IgxGridRow extends BaseRow implements RowType { grid: GridType; index: number; /** * @hidden */ constructor(grid: GridType, index: number, data?: any); /** * Returns the view index calculated per the grid page. */ get viewIndex(): number; /** * Returns the parent row, if grid is grouped. */ get parent(): RowType; } declare class IgxTreeGridRow extends BaseRow implements RowType { grid: GridType; index: number; private _treeRow?; /** * @hidden */ constructor(grid: GridType, index: number, data?: any, _treeRow?: ITreeGridRecord); /** * Returns the view index calculated per the grid page. */ get viewIndex(): number; /** * The data passed to the row component. * * ```typescript * let selectedRowData = this.grid.selectedRows[0].data; * ``` */ get data(): any; /** * Returns the child rows. */ get children(): RowType[]; /** * Returns the parent row. */ get parent(): RowType; /** * Returns true if child rows exist. Always return false for IgxGridRow. */ get hasChildren(): boolean; /** * The `ITreeGridRecord` with metadata about the row in the context of the tree grid. * * ```typescript * const rowParent = this.treeGrid.getRowByKey(1).treeRow.parent; * ``` */ get treeRow(): ITreeGridRecord; /** * Gets whether the row is pinned. * * ```typescript * let isPinned = row.pinned; * ``` */ get pinned(): boolean; /** * Sets whether the row is pinned. * Default value is `false`. * ```typescript * row.pinned = !row.pinned; * ``` */ set pinned(val: boolean); /** * Gets whether the row is expanded. * * ```typescript * let esExpanded = row.expanded; * ``` */ get expanded(): boolean; /** * Expands/collapses the row. * * ```typescript * row.expanded = true; * ``` */ set expanded(val: boolean); get disabled(): boolean; private getRootParent; } declare class IgxHierarchicalGridRow extends BaseRow implements RowType { grid: GridType; index: number; /** * @hidden */ constructor(grid: GridType, index: number, data?: any); /** * Returns true if row islands exist. */ get hasChildren(): boolean; /** * Returns the view index calculated per the grid page. */ get viewIndex(): number; /** * Gets the rendered cells in the row component. */ get cells(): CellType[]; } declare class IgxGroupByRow implements RowType { private _groupRow?; /** * Returns the row index. */ index: number; /** * The grid that contains the row. */ grid: GridType; /** * Returns always true, because this is in instance of an IgxGroupByRow. */ isGroupByRow: boolean; /** * The IGroupByRecord object, representing the group record, if the row is a GroupByRow. */ get groupRow(): IGroupByRecord; /** * Returns the child rows. */ get children(): RowType[]; /** * Returns the view index calculated per the grid page. */ get viewIndex(): number; /** * @hidden */ constructor(grid: GridType, index: number, _groupRow?: IGroupByRecord); /** * Gets whether the row is selected. * Default value is `false`. * ```typescript * row.selected = true; * ``` */ get selected(): boolean; /** * Sets whether the row is selected. * Default value is `false`. * ```typescript * row.selected = !row.selected; * ``` */ set selected(val: boolean); /** * Gets/sets whether the group row is expanded. * ```typescript * const groupRowExpanded = groupRow.expanded; * ``` */ get expanded(): boolean; set expanded(value: boolean); isActive(): boolean; /** * Toggles the group row expanded/collapsed state. * ```typescript * groupRow.toggle() * ``` */ toggle(): void; private get gridAPI(); } declare class IgxSummaryRow implements RowType { private _summaries?; /** * Returns the row index. */ index: number; /** * The grid that contains the row. */ grid: GridType; /** * Returns always true, because this is in instance of an IgxGroupByRow. */ isSummaryRow: boolean; /** * The IGroupByRecord object, representing the group record, if the row is a GroupByRow. */ get summaries(): Map; /** * Returns the view index calculated per the grid page. */ get viewIndex(): number; /** * @hidden */ constructor(grid: GridType, index: number, _summaries?: Map); private getRootParent; } declare class IgxGridCell implements CellType { /** * Returns the grid containing the cell. * * @memberof IgxGridCell */ grid: GridType; private _row; private _rowIndex; private _column; private _columnField; /** * @hidden */ constructor(grid: GridType, row: number | RowType, column: ColumnType); /** * Returns the row containing the cell. * ```typescript * let row = this.cell.row; * ``` * * @memberof IgxGridCell */ get row(): RowType; /** * Returns the column of the cell. * ```typescript * let column = this.cell.column; * ``` * * @memberof IgxGridCell */ get column(): ColumnType; /** * Gets the current edit value while a cell is in edit mode. * ```typescript * let editValue = this.cell.editValue; * ``` * * @memberof IgxGridCell */ get editValue(): any; /** * Sets the current edit value while a cell is in edit mode. * Only for cell editing mode. * ```typescript * this.cell.editValue = value; * ``` * * @memberof IgxGridCell */ set editValue(value: any); /** * Gets the validation status and errors, if any. * ```typescript * let validation = this.cell.validation; * let errors = validation.errors; * ``` */ get validation(): IGridValidationState; /** * Returns whether the cell is editable.. * * @memberof IgxGridCell */ get editable(): boolean; /** * Gets the width of the cell. * ```typescript * let cellWidth = this.cell.width; * ``` * * @memberof IgxGridCell */ get width(): string; /** * Returns the cell value. * * @memberof IgxGridCell */ get value(): any; /** * Updates the cell value. * * @memberof IgxGridCell */ set value(val: any); /** * Gets the cell id. * A cell in the grid is identified by: * - rowID - primaryKey data value or the whole rowData, if the primaryKey is omitted. * - rowIndex - the row index * - columnID - column index * * ```typescript * let cellID = cell.id; * ``` * * @memberof IgxGridCell */ get id(): any; /** * Returns if the row is currently in edit mode. * * @memberof IgxGridCell */ get editMode(): boolean; /** * Starts/ends edit mode for the cell. * * ```typescript * cell.editMode = !cell.editMode; * ``` * * @memberof IgxGridCell */ set editMode(value: boolean); /** * Gets whether the cell is selected. * ```typescript * let isSelected = this.cell.selected; * ``` * * * @memberof IgxGridCell */ get selected(): boolean; /** * Selects/deselects the cell. * ```typescript * this.cell.selected = true. * ``` * * * @memberof IgxGridCell */ set selected(val: boolean); get active(): boolean; /** * Updates the cell value. * * ```typescript * cell.update(newValue); * ``` * * @memberof IgxGridCell */ update(val: any): void; protected get selectionNode(): ISelectionNode; private isCellInEditMode; private endEdit; } /** @hidden @internal */ declare class IgxRowEditTextDirective { static ngTemplateContextGuard(_directive: IgxRowEditTextDirective, context: unknown): context is IgxGridRowEditTextTemplateContext; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** @hidden @internal */ declare class IgxRowAddTextDirective { static ngTemplateContextGuard(_directive: IgxRowAddTextDirective, context: unknown): context is IgxGridEmptyTemplateContext; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** @hidden @internal */ declare class IgxRowEditActionsDirective { static ngTemplateContextGuard(_directive: IgxRowEditActionsDirective, context: unknown): context is IgxGridRowEditActionsTemplateContext; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** @hidden @internal */ declare class IgxRowEditTabStopDirective { grid: GridType; element: ElementRef; private currentCellIndex; constructor(grid: GridType, element: ElementRef); handleTab(event: KeyboardEvent): void; handleEscape(event: KeyboardEvent): void; handleEnter(event: KeyboardEvent): void; /** * Moves focus to first/last editable cell in the editable row and put the cell in edit mode. * If cell is out of view first scrolls to the cell * * @param event keyboard event containing information about whether SHIFT key was pressed */ private move; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } declare const IGX_GRID_COMMON_DIRECTIVES: readonly [typeof IgxRowDirective, typeof IgxGridFooterComponent, typeof IgxAdvancedFilteringDialogComponent, typeof IgxRowExpandedIndicatorDirective, typeof IgxRowCollapsedIndicatorDirective, typeof IgxHeaderExpandedIndicatorDirective, typeof IgxHeaderCollapsedIndicatorDirective, typeof IgxExcelStyleHeaderIconDirective, typeof IgxSortAscendingHeaderIconDirective, typeof IgxSortDescendingHeaderIconDirective, typeof IgxSortHeaderIconDirective, typeof IgxGridEmptyTemplateDirective, typeof IgxGridLoadingTemplateDirective, typeof IgxDragIndicatorIconDirective, typeof IgxRowDragGhostDirective, typeof IgxGridStateDirective, typeof IgxGridHeaderComponent, typeof IgxGridHeaderGroupComponent, typeof IgxGridHeaderRowComponent, typeof IgxFilterCellTemplateDirective, typeof IgxSummaryTemplateDirective, typeof IgxCellTemplateDirective, typeof IgxCellValidationErrorDirective, typeof IgxCellHeaderTemplateDirective, typeof IgxCellFooterTemplateDirective, typeof IgxCellEditorTemplateDirective, typeof IgxCollapsibleIndicatorTemplateDirective, typeof IgxColumnComponent, typeof IgxColumnGroupComponent, typeof IgxColumnLayoutComponent, typeof IgxColumnActionsComponent, typeof IgxColumnHidingDirective, typeof IgxColumnPinningDirective, typeof IgxRowSelectorDirective, typeof IgxGroupByRowSelectorDirective, typeof IgxHeadSelectorDirective, typeof IgxCSVTextDirective, typeof IgxExcelTextDirective, typeof IgxGridToolbarActionsComponent, typeof IgxGridToolbarAdvancedFilteringComponent, typeof IgxGridToolbarComponent, typeof IgxGridToolbarExporterComponent, typeof IgxGridToolbarHidingComponent, typeof IgxGridToolbarPinningComponent, typeof IgxGridToolbarTitleComponent, typeof IgxGridToolbarDirective, typeof IgxGridExcelStyleFilteringComponent, typeof IgxExcelStyleHeaderComponent, typeof IgxExcelStyleSortingComponent, typeof IgxExcelStylePinningComponent, typeof IgxExcelStyleHidingComponent, typeof IgxExcelStyleSelectingComponent, typeof IgxExcelStyleClearFiltersComponent, typeof IgxExcelStyleConditionalFilterComponent, typeof IgxExcelStyleMovingComponent, typeof IgxExcelStyleSearchComponent, typeof IgxExcelStyleColumnOperationsTemplateDirective, typeof IgxExcelStyleFilterOperationsTemplateDirective, typeof IgxExcelStyleLoadingValuesTemplateDirective]; /** @hidden */ declare class IgxGridSummaryService { grid: GridType; rootSummaryID: string; summaryHeight: number; maxSummariesLength: number; groupingExpressions: any[]; retriggerRootPipe: number; deleteOperation: boolean; protected summaryCacheMap: Map>; recalculateSummaries(): void; clearSummaryCache(args?: any): void; removeSummaries(rowID: any, columnName?: any): void; removeSummariesCachePerColumn(columnName: any): void; calcMaxSummaryHeight(): number; calculateSummaries(rowID: any, data: any, groupRecord: any): Map; resetSummaryHeight(): void; updateSummaryCache(groupingArgs: any): void; get hasSummarizedColumns(): boolean; private deleteSummaryCache; private getSummaryID; private removeAllTreeGridSummaries; private compareGroupingExpressions; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵprov: i0.ɵɵInjectableDeclaration; } declare class IgxSummaryCellComponent { private element; summaryResults: IgxSummaryResult[]; column: ColumnType; firstCellIndentation: number; hasSummary: boolean; summaryFormatter: (summaryResult: IgxSummaryResult, summaryOperand: IgxSummaryOperand) => any; summaryTemplate: TemplateRef; /** @hidden */ active: boolean; rowIndex: number; constructor(element: ElementRef); get visibleColumnIndex(): number; get attrCellID(): string; activate(): void; protected get selectionNode(): ISelectionNode; get width(): string; get nativeElement(): any; get columnDatatype(): GridColumnDataType; get itemHeight(): number; /** * @hidden */ get grid(): any; /** * @hidden @internal */ get currencyCode(): string; /** * @hidden @internal */ get currencySymbol(): string; /** cached single summary res after filter resets collection */ protected trackSummaryResult: typeof trackByIdentity; translateSummary(summary: IgxSummaryResult): string; /** * @hidden @internal */ formatSummaryResult(summary: IgxSummaryResult): string; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; static ngAcceptInputType_hasSummary: unknown; } declare class IgxSummaryRowComponent implements DoCheck { grid: GridType; element: ElementRef; cdr: ChangeDetectorRef; summaries: Map; gridID: any; index: number; firstCellIndentation: number; get dataRowIndex(): number; get minHeight(): number; _summaryCells: QueryList; get summaryCells(): QueryList; set summaryCells(cells: QueryList); /** * @hidden */ virtDirRow: IgxGridForOfDirective; constructor(grid: GridType, element: ElementRef, cdr: ChangeDetectorRef); ngDoCheck(): void; get nativeElement(): HTMLElement; getColumnSummaries(columnName: string): IgxSummaryResult[]; /** * @hidden * @internal */ isCellActive(visibleColumnIndex: any): boolean; /** * @hidden */ get pinnedColumns(): ColumnType[]; /** * @hidden */ get unpinnedColumns(): ColumnType[]; getContext(row: any): { $implicit: any; }; /** state persistence switching all pinned columns resets collection */ protected trackPinnedColumn: typeof trackByIdentity; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @hidden * @internal */ declare class IgxColumnResizerDirective implements OnInit, OnDestroy { element: ElementRef; document: any; zone: NgZone; restrictHResizeMin: number; restrictHResizeMax: number; restrictResizerTop: number; resizeEnd: Subject; resizeStart: Subject; resize: Subject; private _left; private _ratio; private _destroy; get ratio(): number; constructor(element: ElementRef, document: any, zone: NgZone); ngOnInit(): void; ngOnDestroy(): void; set left(val: number); set top(val: number); onMouseup(event: MouseEvent): void; onMousedown(event: MouseEvent): void; onMousemove(event: MouseEvent): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } declare class IgxGridColumnResizerComponent { colResizingService: IgxColumnResizingService; restrictResizerTop: number; resizer: IgxColumnResizerDirective; constructor(colResizingService: IgxColumnResizingService); static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } declare abstract class IgxNotificationsDirective extends IgxToggleDirective implements IToggleView, OnDestroy { /** * Sets/gets the `aria-live` attribute. * If not set, `aria-live` will have value `"polite"`. */ ariaLive: string; /** * Sets/gets whether the element will be hidden after the `displayTime` is over. * Default value is `true`. */ autoHide: boolean; /** * Sets/gets the duration of time span (in milliseconds) which the element will be visible * after it is being shown. * Default value is `4000`. */ displayTime: number; /** * Gets/Sets the container used for the element. * * @remarks * `outlet` is an instance of `IgxOverlayOutletDirective` or an `ElementRef`. */ outlet: IgxOverlayOutletDirective | ElementRef; /** * Enables/Disables the visibility of the element. * If not set, the `isVisible` attribute will have value `false`. */ get isVisible(): boolean; set isVisible(value: boolean); /** * @hidden * @internal */ textMessage: string; /** * @hidden */ timeoutId: number; /** * @hidden */ protected strategy: IPositionStrategy; /** * @hidden */ open(): void; /** * Hides the element. */ close(): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; static ngAcceptInputType_autoHide: unknown; static ngAcceptInputType_isVisible: unknown; } /** * **Ignite UI for Angular Snackbar** - * [Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/snackbar.html) * * The Ignite UI Snack Bar provides feedback about an operation with a single-line message, which can * include a link to an action such as Undo. * * Example: * ```html * *
* * Message sent * *
* ``` */ declare class IgxSnackbarComponent extends IgxNotificationsDirective implements OnInit { /** * Sets/gets the `id` of the snackbar. * If not set, the `id` of the first snackbar component will be `"igx-snackbar-0"`; * ```html * * ``` * ```typescript * let snackbarId = this.snackbar.id; * ``` * * @memberof IgxSnackbarComponent */ id: string; /** * The default css class applied to the component. * * @hidden * @internal */ cssClass: string; /** * Sets/gets the `actionText` attribute. * ```html * * ``` */ actionText?: string; /** * An event that will be emitted when the action button is clicked. * Provides reference to the `IgxSnackbarComponent` as an argument. * ```html * * ``` */ clicked: EventEmitter; /** * An event that will be emitted when the snackbar animation starts. * Provides reference to the `ToggleViewEventArgs` interface as an argument. * ```html * * ``` */ animationStarted: EventEmitter; /** * An event that will be emitted when the snackbar animation ends. * Provides reference to the `ToggleViewEventArgs` interface as an argument. * ```html * * ``` */ animationDone: EventEmitter; /** * Get the position and animation settings used by the snackbar. * ```typescript * @ViewChild('snackbar', { static: true }) public snackbar: IgxSnackbarComponent; * let currentPosition: PositionSettings = this.snackbar.positionSettings * ``` */ get positionSettings(): PositionSettings; /** * Set the position and animation settings used by the snackbar. * ```html * * ``` * ```typescript * import { slideInTop, slideOutBottom } from 'igniteui-angular'; * ... * @ViewChild('snackbar', { static: true }) public snackbar: IgxSnackbarComponent; * public newPositionSettings: PositionSettings = { * openAnimation: useAnimation(slideInTop, { params: { duration: '1000ms', fromPosition: 'translateY(100%)'}}), * closeAnimation: useAnimation(slideOutBottom, { params: { duration: '1000ms', fromPosition: 'translateY(0)'}}), * horizontalDirection: HorizontalAlignment.Left, * verticalDirection: VerticalAlignment.Middle, * horizontalStartPoint: HorizontalAlignment.Left, * verticalStartPoint: VerticalAlignment.Middle, * minSize: { height: 100, width: 100 } * }; * this.snackbar.positionSettings = this.newPositionSettings; * ``` */ set positionSettings(settings: PositionSettings); private _positionSettings; /** * Shows the snackbar and hides it after the `displayTime` is over if `autoHide` is set to `true`. * ```typescript * this.snackbar.open(); * ``` */ open(message?: string): void; /** * Opens or closes the snackbar, depending on its current state. * * ```typescript * this.snackbar.toggle(); * ``` */ toggle(): void; /** * @hidden */ triggerAction(): void; /** * @hidden */ ngOnInit(): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } declare class IgxGridRowComponent extends IgxRowDirective { getContext(col: any, row: any): { $implicit: any; row: any; }; get mrlRightPinnedOffset(): string; getContextMRL(pinnedCols: any, row: any): { $implicit: any; row: any; }; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * An internal component representing the group-by drop area for the igx-grid component. * * @hidden @internal */ declare class IgxGridGroupByAreaComponent extends IgxGroupByAreaDirective { sortingExpressions: ISortingExpression[]; /** The parent grid containing the component. */ grid: FlatGridType; constructor(ref: ElementRef, platform: PlatformUtil); handleReorder(event: IChipsAreaReorderEventArgs): void; handleMoveEnd(): void; groupBy(expression: IGroupingExpression): void; clearGrouping(name: string): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } declare abstract class IgxGridBaseDirective implements GridType, OnInit, DoCheck, OnDestroy, AfterContentInit, AfterViewInit { readonly validation: IgxGridValidationService; /** @hidden @internal */ readonly selectionService: IgxGridSelectionService; protected colResizingService: IgxColumnResizingService; readonly gridAPI: GridServiceType; protected transactionFactory: IgxFlatTransactionFactory; private elementRef; protected zone: NgZone; /** @hidden @internal */ document: any; readonly cdr: ChangeDetectorRef; protected differs: IterableDiffers; protected viewRef: ViewContainerRef; protected injector: Injector; protected envInjector: EnvironmentInjector; navigation: IgxGridNavigationService; /** @hidden @internal */ filteringService: IgxFilteringService; protected textHighlightService: IgxTextHighlightService; protected overlayService: IgxOverlayService; /** @hidden @internal */ summaryService: IgxGridSummaryService; private localeId; protected platform: PlatformUtil; protected _diTransactions?: TransactionService; /** * Gets/Sets the display time for the row adding snackbar notification. * * @remarks * By default it is 6000ms. */ snackbarDisplayTime: number; /** * Gets/Sets whether to auto-generate the columns. * * @remarks * The default value is false. When set to true, it will override all columns declared through code or in markup. * @example * ```html * * ``` */ autoGenerate: boolean; /** * Gets/Sets a list of property keys to be excluded from the generated column collection * @remarks * The collection is only used during initialization and changing it will not cause any changes in the generated columns at runtime * unless the grid is destroyed and recreated. To modify the columns visible in the UI at runtime, please use their * [hidden](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxColumnComponent.html#hidden) property. * @example * ```html * * ``` * ```typescript * const Data = [{ 'Id': '1', 'ProductName': 'name1', 'Description': 'description1', 'Count': 5 }] * ``` */ autoGenerateExclude: string[]; /** * Controls whether columns moving is enabled in the grid. * */ moving: boolean; /** * Gets/Sets a custom template when empty. * * @example * ```html * * * * ``` * Or * ```html * * ``` */ get emptyGridTemplate(): TemplateRef; set emptyGridTemplate(template: TemplateRef); /** * Gets/Sets a custom template for adding row UI when grid is empty. * * @example * ```html * * ``` */ addRowEmptyTemplate: TemplateRef; /** * Gets/Sets a custom template when loading. * * @example * ```html * * * * ``` * Or * ```html * * ``` */ get loadingGridTemplate(): TemplateRef; set loadingGridTemplate(template: TemplateRef); /** * Get/Set IgxSummaryRow height */ set summaryRowHeight(value: number); get summaryRowHeight(): number; /** @hidden @internal */ get hasColumnsToAutosize(): boolean; /** * Gets/Sets the data clone strategy of the grid when in edit mode. * * @example * ```html * * ``` */ get dataCloneStrategy(): IDataCloneStrategy; set dataCloneStrategy(strategy: IDataCloneStrategy); /** * Controls the copy behavior of the grid. */ clipboardOptions: IClipboardOptions; /** * Emitted after filtering is performed. * * @remarks * Returns the filtering expressions tree of the column for which filtering was performed. * @example * ```html * * ``` */ filteringExpressionsTreeChange: EventEmitter; /** * Emitted after advanced filtering is performed. * * @remarks * Returns the advanced filtering expressions tree. * @example * ```html * * ``` */ advancedFilteringExpressionsTreeChange: EventEmitter; /** * Emitted when grid is scrolled horizontally/vertically. * * @example * ```html * * ``` */ gridScroll: EventEmitter; /** * Sets a conditional class selector to the grid's row element. * Accepts an object literal, containing key-value pairs, * where the key is the name of the CSS class and the value is * either a callback function that returns a boolean, or boolean, like so: * ```typescript * callback = (row: RowType) => { return row.selected > 6; } * rowClasses = { 'className' : this.callback }; * ``` * ```html * * ``` * * @memberof IgxColumnComponent */ rowClasses: any; /** * Sets conditional style properties on the grid row element. * It accepts an object literal where the keys are * the style properties and the value is an expression to be evaluated. * ```typescript * styles = { * background: 'yellow', * color: (row: RowType) => row.selected : 'red': 'white' * } * ``` * ```html * * ``` * * @memberof IgxColumnComponent */ rowStyles: any; /** * Gets/Sets the primary key. * * @example * ```html * * ``` */ get primaryKey(): string; set primaryKey(value: string); /** * Gets/Sets a unique values strategy used by the Excel Style Filtering * * @remarks * Provides a callback for loading unique column values on demand. * If this property is provided, the unique values it generates will be used by the Excel Style Filtering. * @example * ```html * * ``` */ uniqueColumnValuesStrategy: (column: ColumnType, filteringExpressionsTree: IFilteringExpressionsTree, done: (values: any[]) => void) => void; /** @hidden @internal */ excelStyleFilteringComponents: QueryList; /** @hidden @internal */ get excelStyleFilteringComponent(): IgxGridExcelStyleFilteringComponent; /** @hidden @internal */ get headerGroups(): IgxGridHeaderGroupComponent[]; /** * Emitted when a cell is clicked. * * @remarks * Returns the `IgxGridCell`. * @example * ```html * * ``` */ cellClick: EventEmitter; /** * Emitted when a row is clicked. * * @remarks * Returns the `IgxGridRow`. * @example * ```html * * ``` */ rowClick: EventEmitter; /** * Emitted when formGroup is created on edit of row/cell. * * @example * ```html * * ``` */ formGroupCreated: EventEmitter; /** * Emitted when grid's validation status changes. * * @example * ```html * * ``` */ validationStatusChange: EventEmitter; /** * Emitted when a cell is selected. * * @remarks * Returns the `IgxGridCell`. * @example * ```html * * ``` */ selected: EventEmitter; /** * Emitted when `IgxGridRowComponent` is selected. * * @example * ```html * * ``` */ rowSelectionChanging: EventEmitter; /** * Emitted when `IgxColumnComponent` is selected. * * @example * ```html * * ``` */ columnSelectionChanging: EventEmitter; /** * Emitted before `IgxColumnComponent` is pinned. * * @remarks * The index at which to insert the column may be changed through the `insertAtIndex` property. * @example * ```typescript * public columnPinning(event) { * if (event.column.field === "Name") { * event.insertAtIndex = 0; * } * } * ``` */ columnPin: EventEmitter; /** * Emitted after `IgxColumnComponent` is pinned. * * @remarks * The index that the column is inserted at may be changed through the `insertAtIndex` property. * @example * ```typescript * public columnPinning(event) { * if (event.column.field === "Name") { * event.insertAtIndex = 0; * } * } * ``` */ columnPinned: EventEmitter; /** * Emitted when cell enters edit mode. * * @remarks * This event is cancelable. * @example * ```html * * * ``` */ cellEditEnter: EventEmitter; /** * Emitted when cell exits edit mode. * * @example * ```html * * * ``` */ cellEditExit: EventEmitter; /** * Emitted when cell has been edited. * * @remarks * Event is fired after editing is completed, when the cell is exiting edit mode. * This event is cancelable. * @example * ```html * * * ``` */ cellEdit: EventEmitter; /** * Emitted after cell has been edited and editing has been committed. * * @example * ```html * * * ``` */ cellEditDone: EventEmitter; /** * Emitted when a row enters edit mode. * * @remarks * Emitted when [rowEditable]="true". * This event is cancelable. * @example * ```html * * * ``` */ rowEditEnter: EventEmitter; /** * Emitted when exiting edit mode for a row. * * @remarks * Emitted when [rowEditable]="true" & `endEdit(true)` is called. * Emitted when changing rows during edit mode, selecting an un-editable cell in the edited row, * performing paging operation, column resizing, pinning, moving or hitting `Done` * button inside of the rowEditingOverlay, or hitting the `Enter` key while editing a cell. * This event is cancelable. * @example * ```html * * * ``` */ rowEdit: EventEmitter; /** * Emitted after exiting edit mode for a row and editing has been committed. * * @remarks * Emitted when [rowEditable]="true" & `endEdit(true)` is called. * Emitted when changing rows during edit mode, selecting an un-editable cell in the edited row, * performing paging operation, column resizing, pinning, moving or hitting `Done` * button inside of the rowEditingOverlay, or hitting the `Enter` key while editing a cell. * @example * ```html * * * ``` */ rowEditDone: EventEmitter; /** * Emitted when row editing is canceled. * * @remarks * Emits when [rowEditable]="true" & `endEdit(false)` is called. * Emitted when changing hitting `Esc` key during cell editing and when click on the `Cancel` button * in the row editing overlay. * @example * ```html * * * ``` */ rowEditExit: EventEmitter; /** * Emitted when a column is initialized. * * @remarks * Returns the column object. * @example * ```html * * ``` */ columnInit: EventEmitter; /** * @hidden @internal */ columnsAutogenerated: EventEmitter; /** * Emitted before sorting expressions are applied. * * @remarks * Returns an `ISortingEventArgs` object. `sortingExpressions` key holds the sorting expressions. * @example * ```html * * ``` */ sorting: EventEmitter; /** * Emitted after sorting is completed. * * @remarks * Returns the sorting expression. * @example * ```html * * ``` */ sortingDone: EventEmitter | ISortingExpression[]>; /** * Emitted before filtering expressions are applied. * * @remarks * Returns an `IFilteringEventArgs` object. `filteringExpressions` key holds the filtering expressions for the column. * @example * ```html * * ``` */ filtering: EventEmitter; /** * Emitted after filtering is performed through the UI. * * @remarks * Returns the filtering expressions tree of the column for which filtering was performed. * @example * ```html * * ``` */ filteringDone: EventEmitter; /** * Emitted when a row is added. * * @remarks * Returns the data for the new `IgxGridRowComponent` object. * @example * ```html * * ``` */ rowAdded: EventEmitter; /** * Emitted when a row is deleted. * * @remarks * Returns an `IRowDataEventArgs` object. * @example * ```html * * ``` */ rowDeleted: EventEmitter; /** * Emmited when deleting a row. * * @remarks * This event is cancelable. * Returns an IRowDataCancellableEventArgs` object. * @example * ```html * * ``` */ rowDelete: EventEmitter; /** * Emmited just before the newly added row is commited. * * @remarks * This event is cancelable. * Returns an IRowDataCancellableEventArgs` object. * @example * ```html * * ``` */ rowAdd: EventEmitter; /** * Emitted after column is resized. * * @remarks * Returns the `IgxColumnComponent` object's old and new width. * @example * ```html * * ``` */ columnResized: EventEmitter; /** * Emitted when a cell or row is right clicked. * * @remarks * Returns the `IgxGridCell` object if the immediate context menu target is a cell or an `IgxGridRow` otherwise. * ```html * * ``` */ contextMenu: EventEmitter; /** * Emitted when a cell is double clicked. * * @remarks * Returns the `IgxGridCell` object. * @example * ```html * * ``` */ doubleClick: EventEmitter; /** * Emitted before column visibility is changed. * * @remarks * Args: { column: any, newValue: boolean } * @example * ```html * * ``` */ columnVisibilityChanging: EventEmitter; /** * Emitted after column visibility is changed. * * @remarks * Args: { column: IgxColumnComponent, newValue: boolean } * @example * ```html * * ``` */ columnVisibilityChanged: EventEmitter; /** * Emitted when column moving starts. * * @remarks * Returns the moved `IgxColumnComponent` object. * @example * ```html * * ``` */ columnMovingStart: EventEmitter; /** * Emitted during the column moving operation. * * @remarks * Returns the source and target `IgxColumnComponent` objects. This event is cancelable. * @example * ```html * * ``` */ columnMoving: EventEmitter; /** * Emitted when column moving ends. * * @remarks * Returns the source and target `IgxColumnComponent` objects. * @example * ```html * * ``` */ columnMovingEnd: EventEmitter; /** * Emitted when keydown is triggered over element inside grid's body. * * @remarks * This event is fired only if the key combination is supported in the grid. * Return the target type, target object and the original event. This event is cancelable. * @example * ```html * * ``` */ gridKeydown: EventEmitter; /** * Emitted when start dragging a row. * * @remarks * Return the dragged row. */ rowDragStart: EventEmitter; /** * Emitted when dropping a row. * * @remarks * Return the dropped row. */ rowDragEnd: EventEmitter; /** * Emitted when a copy operation is executed. * * @remarks * Fired only if copy behavior is enabled through the [`clipboardOptions`]{@link IgxGridBaseDirective#clipboardOptions}. */ gridCopy: EventEmitter; /** * Emitted when the rows are expanded or collapsed. * * @example * ```html * * ``` */ expansionStatesChange: EventEmitter>; /** * Emitted when the rows are selected or deselected. * * @example * ```html * * ``` */ selectedRowsChange: EventEmitter; /** * Emitted when the expanded state of a row gets changed. * * @example * ```html * * ``` */ rowToggle: EventEmitter; /** * Emitted when the pinned state of a row is changed. * * @example * ```html * * ``` */ rowPinning: EventEmitter; /** * Emitted when the pinned state of a row is changed. * * @example * ```html * * ``` */ rowPinned: EventEmitter; /** * Emitted when the active node is changed. * * @example * ``` * * ``` */ activeNodeChange: EventEmitter; /** * Emitted before sorting is performed. * * @remarks * Returns the sorting expressions. * @example * ```html * * ``` */ sortingExpressionsChange: EventEmitter[]>; /** * Emitted when an export process is initiated by the user. * * @example * ```typescript * toolbarExporting(event: IGridToolbarExportEventArgs){ * const toolbarExporting = event; * } * ``` */ toolbarExporting: EventEmitter; /** * Emitted when making a range selection. * * @remarks * Range selection can be made either through drag selection or through keyboard selection. */ rangeSelected: EventEmitter; /** Emitted after the ngAfterViewInit hook. At this point the grid exists in the DOM */ rendered: EventEmitter; /** * @hidden @internal */ localeChange: EventEmitter; /** * Emitted before the grid's data view is changed because of a data operation, rebinding, etc. * * @example * ```typescript * * ``` */ dataChanging: EventEmitter; /** * Emitted after the grid's data view is changed because of a data operation, rebinding, etc. * * @example * ```typescript * * ``` */ dataChanged: EventEmitter; /** * @hidden @internal */ addRowSnackbar: IgxSnackbarComponent; /** * @hidden @internal */ resizeLine: IgxGridColumnResizerComponent; /** * @hidden @internal */ loadingOverlay: IgxToggleDirective; /** * @hidden @internal */ loadingOutlet: IgxOverlayOutletDirective; /** * @hidden @internal */ columnList: QueryList; /** @hidden @internal */ protected actionStripComponents: QueryList; /** @hidden @internal */ get actionStrip(): IgxActionStripToken; /** * @hidden @internal */ excelStyleLoadingValuesTemplateDirective: IgxExcelStyleLoadingValuesTemplateDirective; /** @hidden @internal */ emptyFilteredGridTemplate: TemplateRef; /** @hidden @internal */ emptyGridDefaultTemplate: TemplateRef; /** * @hidden @internal */ loadingGridDefaultTemplate: TemplateRef; /** * @hidden @internal */ parentVirtDir: IgxGridForOfDirective; /** * @hidden * @internal */ headSelectorsTemplates: QueryList>; /** * @hidden * @internal */ rowSelectorsTemplates: QueryList>; /** * @hidden * @internal */ dragGhostCustomTemplates: QueryList>; /** * Gets the custom template, if any, used for row drag ghost. */ get dragGhostCustomTemplate(): TemplateRef; /** * Sets a custom template for the row drag ghost. *```html * * menu * * ``` * ```typescript * @ViewChild("'template'", {read: TemplateRef }) * public template: TemplateRef; * this.grid.dragGhostCustomTemplate = this.template; * ``` */ set dragGhostCustomTemplate(template: TemplateRef); /** * @hidden @internal */ verticalScrollContainer: IgxGridForOfDirective; /** * @hidden @internal */ verticalScroll: IgxGridForOfDirective; /** * @hidden @internal */ scr: ElementRef; /** @hidden @internal */ headerSelectorBaseTemplate: TemplateRef; /** * @hidden @internal */ footer: ElementRef; /** @hidden @internal */ get headerContainer(): IgxGridForOfDirective; /** @hidden @internal */ get headerSelectorContainer(): ElementRef; /** @hidden @internal */ get headerDragContainer(): ElementRef; /** @hidden @internal */ get headerGroupContainer(): ElementRef; /** @hidden @internal */ get filteringRow(): IgxGridFilteringRowComponent; /** @hidden @internal */ theadRow: IgxGridHeaderRowComponent; /** @hidden @internal */ groupArea: IgxGridGroupByAreaComponent; /** * @hidden @internal */ tbody: ElementRef; protected tbodyContainer: ElementRef; /** * @hidden @internal */ pinContainer: ElementRef; /** * @hidden @internal */ tfoot: ElementRef; /** * @hidden @internal */ rowEditingOutletDirective: IgxOverlayOutletDirective; /** * @hidden @internal */ tmpOutlets: QueryList; /** * @hidden * @internal */ dragIndicatorIconBase: TemplateRef; /** * @hidden @internal */ rowEditCustomDirectives: QueryList>; /** * @hidden @internal */ rowEditTextDirectives: QueryList>; /** * Gets the row edit text template. */ get rowEditTextTemplate(): TemplateRef; /** * Sets the row edit text template. *```html * * Changes: {{rowChangesCount}} * * ``` *```typescript * @ViewChild('template', {read: TemplateRef }) * public template: TemplateRef; * this.grid.rowEditTextTemplate = this.template; * ``` */ set rowEditTextTemplate(template: TemplateRef); /** * @hidden @internal */ rowAddText: TemplateRef; /** * Gets the row add text template. */ get rowAddTextTemplate(): TemplateRef; /** * Sets the row add text template. *```html * * Adding Row * * ``` *```typescript * @ViewChild('template', {read: TemplateRef }) * public template: TemplateRef; * this.grid.rowAddTextTemplate = this.template; * ``` */ set rowAddTextTemplate(template: TemplateRef); /** * @hidden @internal */ rowEditActionsDirectives: QueryList>; /** * Gets the row edit actions template. */ get rowEditActionsTemplate(): TemplateRef; /** * Sets the row edit actions template. *```html * * * * * ``` *```typescript * @ViewChild('template', {read: TemplateRef }) * public template: TemplateRef; * this.grid.rowEditActionsTemplate = this.template; * ``` */ set rowEditActionsTemplate(template: TemplateRef); /** * The custom template, if any, that should be used when rendering a row expand indicator. */ protected rowExpandedIndicatorDirectiveTemplate: TemplateRef; /** * Gets the row expand indicator template. */ get rowExpandedIndicatorTemplate(): TemplateRef; /** * Sets the row expand indicator template. *```html * * remove * * ``` *```typescript * @ViewChild('template', {read: TemplateRef }) * public template: TemplateRef; * this.grid.rowExpandedIndicatorTemplate = this.template; * ``` */ set rowExpandedIndicatorTemplate(template: TemplateRef); /** * The custom template, if any, that should be used when rendering a row collapse indicator. */ protected rowCollapsedIndicatorDirectiveTemplate: TemplateRef; /** * Gets the row collapse indicator template. */ get rowCollapsedIndicatorTemplate(): TemplateRef; /** * Sets the row collapse indicator template. *```html * * add * * ``` *```typescript * @ViewChild('template', {read: TemplateRef }) * public template: TemplateRef; * this.grid.rowCollapsedIndicatorTemplate = this.template; * ``` */ set rowCollapsedIndicatorTemplate(template: TemplateRef); /** * The custom template, if any, that should be used when rendering a header expand indicator. */ protected headerExpandedIndicatorDirectiveTemplate: TemplateRef; /** * Gets the header expand indicator template. */ get headerExpandedIndicatorTemplate(): TemplateRef; /** * Sets the header expand indicator template. *```html * * remove * * ``` *```typescript * @ViewChild('template', {read: TemplateRef }) * public template: TemplateRef; * this.grid.headerExpandedIndicatorTemplate = this.template; * ``` */ set headerExpandedIndicatorTemplate(template: TemplateRef); /** * The custom template, if any, that should be used when rendering a header collapse indicator. */ protected headerCollapsedIndicatorDirectiveTemplate: TemplateRef; /** * Gets the row collapse indicator template. */ get headerCollapsedIndicatorTemplate(): TemplateRef; /** * Sets the row collapse indicator template. *```html * * add * * ``` *```typescript * @ViewChild('template', {read: TemplateRef }) * public template: TemplateRef; * this.grid.headerCollapsedIndicatorTemplate = this.template; * ``` */ set headerCollapsedIndicatorTemplate(template: TemplateRef); /** @hidden @internal */ excelStyleHeaderIconDirectiveTemplate: TemplateRef; /** * Gets the excel style header icon. */ get excelStyleHeaderIconTemplate(): TemplateRef; /** * Sets the excel style header icon. *```html * * filter_alt * * ``` *```typescript * @ViewChild('template', {read: TemplateRef }) * public template: TemplateRef; * this.grid.excelStyleHeaderIconTemplate = this.template; * ``` */ set excelStyleHeaderIconTemplate(template: TemplateRef); /** * @hidden * @internal */ sortAscendingHeaderIconDirectiveTemplate: TemplateRef; /** * The custom template, if any, that should be used when rendering a header sorting indicator when columns are sorted in asc order. */ get sortAscendingHeaderIconTemplate(): TemplateRef; /** * Sets a custom template that should be used when rendering a header sorting indicator when columns are sorted in asc order. *```html * * expand_less * * ``` * ```typescript * @ViewChild("'template'", {read: TemplateRef }) * public template: TemplateRef; * this.grid.sortAscendingHeaderIconTemplate = this.template; * ``` */ set sortAscendingHeaderIconTemplate(template: TemplateRef); /** @hidden @internal */ sortDescendingHeaderIconDirectiveTemplate: TemplateRef; /** * The custom template, if any, that should be used when rendering a header sorting indicator when columns are sorted in desc order. */ get sortDescendingHeaderIconTemplate(): TemplateRef; /** * Sets a custom template that should be used when rendering a header sorting indicator when columns are sorted in desc order. *```html * * expand_more * * ``` * ```typescript * @ViewChild("'template'", {read: TemplateRef }) * public template: TemplateRef; * this.grid.sortDescendingHeaderIconTemplate = this.template; * ``` */ set sortDescendingHeaderIconTemplate(template: TemplateRef); /** * @hidden * @internal */ sortHeaderIconDirectiveTemplate: TemplateRef; /** * Gets custom template, if any, that should be used when rendering a header sorting indicator when columns are not sorted. */ get sortHeaderIconTemplate(): TemplateRef; /** * Sets a custom template that should be used when rendering a header sorting indicator when columns are not sorted. *```html * * unfold_more * * ``` * ```typescript * @ViewChild("'template'", {read: TemplateRef }) * public template: TemplateRef; * this.grid.sortHeaderIconTemplate = this.template; * ``` */ set sortHeaderIconTemplate(template: TemplateRef); /** * @hidden * @internal */ dragIndicatorIconTemplates: QueryList>; protected loadingDirectiveTemplate: TemplateRef; protected emptyDirectiveTemplate: TemplateRef; /** * @hidden @internal */ rowEditTabsDEFAULT: QueryList; /** * @hidden @internal */ rowEditTabsCUSTOM: QueryList; /** * @hidden @internal */ rowEditingOverlay: IgxToggleDirective; /** * @hidden @internal */ tabindex: number; /** * @hidden @internal */ hostRole: string; /** @hidden @internal */ toolbar: QueryList; /** @hidden @internal */ protected paginationComponents: QueryList; /** * @hidden @internal */ protected _outletDirective: IgxOverlayOutletDirective; /** * @hidden @internal * @igxElementsAnchor */ anchor: ViewContainerRef; /** * @hidden @internal */ protected defaultExpandedTemplate: TemplateRef; /** * @hidden @internal */ protected defaultCollapsedTemplate: TemplateRef; /** * @hidden @internal */ protected defaultESFHeaderIconTemplate: TemplateRef; protected _summaryRowList: QueryList; private _rowList; private _pinnedRowList; /** * @hidden @internal */ private defaultRowEditTemplate; private _dataRowList; protected baseClass: string; /** * Gets/Sets the resource strings. * * @remarks * By default it uses EN resources. */ set resourceStrings(value: IGridResourceStrings); get resourceStrings(): IGridResourceStrings; /** * Gets/Sets the filtering logic of the `IgxGridComponent`. * * @remarks * The default is AND. * @example * ```html * * ``` */ get filteringLogic(): FilteringLogic; set filteringLogic(value: FilteringLogic); /** * Gets/Sets the filtering state. * * @example * ```html * * ``` * @remarks * Supports two-way binding. */ get filteringExpressionsTree(): IFilteringExpressionsTree; set filteringExpressionsTree(value: IFilteringExpressionsTree); /** * Gets/Sets the advanced filtering state. * * @example * ```typescript * let advancedFilteringExpressionsTree = this.grid.advancedFilteringExpressionsTree; * this.grid.advancedFilteringExpressionsTree = logic; * ``` */ get advancedFilteringExpressionsTree(): IFilteringExpressionsTree; set advancedFilteringExpressionsTree(value: IFilteringExpressionsTree); /** * Gets/Sets the locale. * * @remarks * If not set, returns browser's language. */ get locale(): string; set locale(value: string); get pagingMode(): GridPagingMode; set pagingMode(val: GridPagingMode); /** @hidden @internal */ get page(): number; set page(val: number); /** @hidden @internal */ get perPage(): number; set perPage(val: number); /** * Gets/Sets if the row selectors are hidden. * * @remarks * By default row selectors are shown */ get hideRowSelectors(): boolean; set hideRowSelectors(value: boolean); /** * Gets/Sets whether rows can be moved. * * @example * ```html * * ``` */ get rowDraggable(): boolean; set rowDraggable(val: boolean); /** * Gets/Sets the trigger for validators used when editing the grid. * * @example * ```html * * ``` */ validationTrigger: GridValidationTrigger; /** * @hidden * @internal */ rowDragging: boolean; /** @hidden @internal */ dragRowID: any; /** * Gets/Sets whether the rows are editable. * * @remarks * By default it is set to false. * @example * ```html * * ``` */ get rowEditable(): boolean; set rowEditable(val: boolean); /** * Gets/Sets the height. * * @example * ```html * * ``` */ get height(): string | null; set height(value: string | null); /** * @hidden @internal */ get hostWidth(): any; /** * Gets/Sets the width of the grid. * * @example * ```typescript * let gridWidth = this.grid.width; * ``` */ get width(): string | null; set width(value: string | null); /** @hidden @internal */ get headerWidth(): number; /** * Gets/Sets the row height. * * @example * ```html * * ``` */ get rowHeight(): number; set rowHeight(value: number | string); /** * Gets/Sets the default width of the columns. * * @example * ```html * * ``` */ get columnWidth(): string; set columnWidth(value: string); /** * Get/Sets the message displayed when there are no records. * * @example * ```html * * ``` */ set emptyGridMessage(value: string); get emptyGridMessage(): string; /** * Gets/Sets whether the grid is going to show a loading indicator. * * @example * ```html * * ``` */ set isLoading(value: boolean); get isLoading(): boolean; /** * Gets/Sets whether the columns should be auto-generated once again after the initialization of the grid * * @remarks * This will allow to bind the grid to remote data and having auto-generated columns at the same time. * Note that after generating the columns, this property would be disabled to avoid re-creating * columns each time a new data is assigned. * @example * ```typescript * this.grid.shouldGenerate = true; * ``` * @deprecated in version 18.2.0. Column re-creation now relies on `autoGenerate` instead. */ get shouldGenerate(): boolean; set shouldGenerate(value: boolean); /** * Gets/Sets the message displayed when there are no records and the grid is filtered. * * @example * ```html * * ``` */ set emptyFilteredGridMessage(value: string); get emptyFilteredGridMessage(): string; /** * Gets/Sets the initial pinning configuration. * * @remarks * Allows to apply pinning the columns to the start or the end. * Note that pinning to both sides at a time is not allowed. * @example * ```html * * ``` */ get pinning(): IPinningConfig; set pinning(value: IPinningConfig); /** * Gets/Sets if the filtering is enabled. * * @example * ```html * * ``` */ get allowFiltering(): boolean; set allowFiltering(value: boolean); /** * Gets/Sets a value indicating whether the advanced filtering is enabled. * * @example * ```html * * ``` */ get allowAdvancedFiltering(): boolean; set allowAdvancedFiltering(value: boolean); /** * Gets/Sets the filter mode. * * @example * ```html * * ``` * @remarks * By default it's set to FilterMode.quickFilter. */ get filterMode(): FilterMode; set filterMode(value: FilterMode); /** * Gets/Sets the summary position. * * @example * ```html * * ``` * @remarks * By default it is bottom. */ get summaryPosition(): GridSummaryPosition; set summaryPosition(value: GridSummaryPosition); /** * Gets/Sets the summary calculation mode. * * @example * ```html * * ``` * @remarks * By default it is rootAndChildLevels which means the summaries are calculated for the root level and each child level. */ get summaryCalculationMode(): GridSummaryCalculationMode; set summaryCalculationMode(value: GridSummaryCalculationMode); /** * Controls whether the summary row is visible when groupBy/parent row is collapsed. * * @example * ```html * * ``` * @remarks * By default showSummaryOnCollapse is set to 'false' which means that the summary row is not visible * when the groupBy/parent row is collapsed. */ get showSummaryOnCollapse(): boolean; set showSummaryOnCollapse(value: boolean); /** * Gets/Sets the filtering strategy of the grid. * * @example * ```html * * ``` */ get filterStrategy(): IFilteringStrategy; set filterStrategy(classRef: IFilteringStrategy); /** * Gets/Sets the sorting strategy of the grid. * * @example * ```html * * ``` */ get sortStrategy(): IGridSortingStrategy; set sortStrategy(value: IGridSortingStrategy); /** * Gets/Sets the sorting options - single or multiple sorting. * Accepts an `ISortingOptions` object with any of the `mode` properties. * * @example * ```typescript * const _sortingOptions: ISortingOptions = { * mode: 'single' * } * ```html * * ``` */ set sortingOptions(value: ISortingOptions); get sortingOptions(): ISortingOptions; /** * Gets/Sets the current selection state. * * @remarks * Represents the selected rows' IDs (primary key or rowData) * @example * ```html * * ``` */ set selectedRows(rowIDs: any[]); get selectedRows(): any[]; /** @hidden @internal */ get headerGroupsList(): IgxGridHeaderGroupComponent[]; /** @hidden @internal */ get headerCellList(): IgxGridHeaderComponent[]; /** @hidden @internal */ get filterCellList(): IgxGridFilteringCellComponent[]; /** * @hidden @internal */ get summariesRowList(): QueryList; /** * A list of `IgxGridRowComponent`. * * @example * ```typescript * const rowList = this.grid.rowList; * ``` */ get rowList(): QueryList; /** * A list of currently rendered `IgxGridRowComponent`'s. * * @example * ```typescript * const dataList = this.grid.dataRowList; * ``` */ get dataRowList(): QueryList; /** * Gets the header row selector template. */ get headSelectorTemplate(): TemplateRef; /** * Sets the header row selector template. * ```html * * {{ headContext.selectedCount }} / {{ headContext.totalCount }} * * ``` * ```typescript * @ViewChild("'template'", {read: TemplateRef }) * public template: TemplateRef; * this.grid.headSelectorTemplate = this.template; * ``` */ set headSelectorTemplate(template: TemplateRef); /** * @hidden * @internal */ get isPinningToStart(): boolean; /** * @hidden * @internal */ get isRowPinningToTop(): boolean; /** * Gets the row selector template. */ get rowSelectorTemplate(): TemplateRef; /** * Sets a custom template for the row selectors. * ```html * * * * ``` * ```typescript * @ViewChild("'template'", {read: TemplateRef }) * public template: TemplateRef; * this.grid.rowSelectorTemplate = this.template; * ``` */ set rowSelectorTemplate(template: TemplateRef); /** * @hidden @internal */ get rowOutletDirective(): IgxOverlayOutletDirective; /** * @hidden @internal */ get parentRowOutletDirective(): IgxOverlayOutletDirective; /** * @hidden @internal */ get rowEditCustom(): TemplateRef; /** /** * @hidden @internal */ get rowEditContainer(): TemplateRef; /** * The custom template, if any, that should be used when rendering the row drag indicator icon */ get dragIndicatorIconTemplate(): TemplateRef; /** * Sets a custom template that should be used when rendering the row drag indicator icon. *```html * * expand_less * * ``` * ```typescript * @ViewChild("'template'", {read: TemplateRef }) * public template: TemplateRef; * this.grid.dragIndicatorIconTemplate = this.template; * ``` */ set dragIndicatorIconTemplate(val: TemplateRef); /** * @hidden @internal */ get firstEditableColumnIndex(): number; /** * @hidden @internal */ get lastEditableColumnIndex(): number; /** * @hidden @internal * TODO: Nav service logic doesn't handle 0 results from this querylist */ get rowEditTabs(): QueryList; /** @hidden @internal */ get activeDescendant(): string; /** @hidden @internal */ get bannerClass(): string; /** * Gets/Sets the sorting state. * * @remarks * Supports two-way data binding. * @example * ```html * * ``` */ get sortingExpressions(): ISortingExpression[]; set sortingExpressions(value: ISortingExpression[]); /** * @hidden @internal */ get maxLevelHeaderDepth(): any; /** * Gets the number of hidden columns. * * @example * ```typescript * const hiddenCol = this.grid.hiddenColumnsCount; * `` */ get hiddenColumnsCount(): number; /** * Gets the number of pinned columns. */ get pinnedColumnsCount(): number; /** * Gets/Sets whether the grid has batch editing enabled. * When batch editing is enabled, changes are not made directly to the underlying data. * Instead, they are stored as transactions, which can later be committed w/ the `commit` method. * * @example * ```html * * * ``` */ get batchEditing(): boolean; set batchEditing(val: boolean); /** * Get transactions service for the grid. */ get transactions(): TransactionService; /** * @hidden @internal */ get currentRowState(): any; /** * @hidden @internal */ get currencyPositionLeft(): boolean; /** * Gets/Sets cell selection mode. * * @remarks * By default the cell selection mode is multiple * @param selectionMode: GridSelectionMode */ get cellSelection(): GridSelectionMode; set cellSelection(selectionMode: GridSelectionMode); /** * Gets/Sets row selection mode * * @remarks * By default the row selection mode is 'none' * Note that in IgxGrid and IgxHierarchicalGrid 'multipleCascade' behaves like 'multiple' */ get rowSelection(): GridSelectionMode; set rowSelection(selectionMode: GridSelectionMode); /** * Gets/Sets column selection mode * * @remarks * By default the row selection mode is none * @param selectionMode: GridSelectionMode */ get columnSelection(): GridSelectionMode; set columnSelection(selectionMode: GridSelectionMode); /** * @hidden @internal */ set pagingState(value: any); get pagingState(): any; /** * @hidden @internal */ rowEditMessage: any; /** * @hidden @internal */ calcWidth: number; /** * @hidden @internal */ calcHeight: number; /** * @hidden @internal */ tfootHeight: number; /** * @hidden @internal */ disableTransitions: boolean; /** * Represents the last search information. */ get lastSearchInfo(): ISearchInfo; /** * @hidden @internal */ columnWidthSetByUser: boolean; /** * @hidden @internal */ pinnedRecords: any[]; /** * @hidden @internal */ unpinnedRecords: any[]; /** * @hidden @internal */ rendered$: rxjs.Observable; /** @hidden @internal */ resizeNotify: Subject; /** @hidden @internal */ rowAddedNotifier: Subject; /** @hidden @internal */ rowDeletedNotifier: Subject; /** @hidden @internal */ pipeTriggerNotifier: Subject; /** @hidden @internal */ _filteredSortedPinnedData: any[]; /** @hidden @internal */ _filteredSortedUnpinnedData: any[]; /** @hidden @internal */ _filteredPinnedData: any[]; /** * @hidden */ _filteredUnpinnedData: any; /** * @hidden @internal */ _destroyed: boolean; /** * @hidden @internal */ _totalRecords: number; /** * @hidden @internal */ columnsWithNoSetWidths: any; /** * @hidden @internal */ pipeTrigger: number; /** * @hidden @internal */ filteringPipeTrigger: number; /** * @hidden @internal */ isColumnWidthSum: boolean; /** * @hidden @internal */ summaryPipeTrigger: number; /** * @hidden @internal */ groupablePipeTrigger: number; /** * @hidden @internal */ EMPTY_DATA: any[]; /** @hidden @internal */ get type(): GridType["type"]; /** @hidden @internal */ _baseFontSize: number; /** * @hidden */ destroy$: Subject; /** * @hidden */ protected _pagingMode: GridPagingMode; /** * @hidden */ protected _pagingState: any; /** * @hidden */ protected _hideRowSelectors: boolean; /** * @hidden */ protected _rowDrag: boolean; /** * @hidden */ protected _columns: IgxColumnComponent[]; /** * @hidden */ protected _pinnedColumns: IgxColumnComponent[]; /** * @hidden */ protected _unpinnedColumns: IgxColumnComponent[]; /** * @hidden */ protected _filteringExpressionsTree: IFilteringExpressionsTree; /** * @hidden */ protected _advancedFilteringExpressionsTree: IFilteringExpressionsTree; /** * @hidden */ protected _sortingExpressions: Array; /** * @hidden */ protected _maxLevelHeaderDepth: any; /** * @hidden */ protected _columnHiding: boolean; /** * @hidden */ protected _columnPinning: boolean; protected _pinnedRecordIDs: any[]; /** * @hidden */ protected _hasVisibleColumns: any; protected _allowFiltering: boolean; protected _allowAdvancedFiltering: boolean; protected _filterMode: FilterMode; protected _defaultTargetRecordNumber: number; protected _expansionStates: Map; protected _defaultExpandState: boolean; protected _headerFeaturesWidth: number; protected _init: boolean; protected _firstAutoResize: boolean; protected _autoSizeColumnsNotify: Subject; protected _cdrRequestRepaint: boolean; protected _userOutletDirective: IgxOverlayOutletDirective; protected _transactions: TransactionService; protected _batchEditing: boolean; protected _sortingOptions: ISortingOptions; protected _filterStrategy: IFilteringStrategy; protected _autoGeneratedCols: any[]; protected _autoGeneratedColsRefs: ComponentRef[]; protected _dataView: any[]; protected _lastSearchInfo: ISearchInfo; protected _hGridSchema: EntityType[]; protected gridComputedStyles: any; /** @hidden @internal */ get paginator(): IgxPaginatorComponent; /** * @hidden @internal */ get scrollSize(): number; private _primaryKey; private _rowEditable; private _currentRowState; private _filteredSortedData; private _filteredData; private _customDragIndicatorIconTemplate; private _excelStyleHeaderIconTemplate; private _rowSelectorTemplate; private _headSelectorTemplate; private _rowEditTextTemplate; private _rowAddTextTemplate; private _rowEditActionsTemplate; private _dragGhostCustomTemplate; private _rowExpandedIndicatorTemplate; private _rowCollapsedIndicatorTemplate; private _headerExpandIndicatorTemplate; private _headerCollapseIndicatorTemplate; private _emptyGridTemplate; private _loadingGridTemplate; private _cdrRequests; private _resourceStrings; private _emptyGridMessage; private _emptyFilteredGridMessage; private _isLoading; private _locale; private overlayIDs; private _sortingStrategy; private _pinning; private _shouldRecalcRowHeight; private _hostWidth; private _advancedFilteringOverlayId; private _advancedFilteringPositionSettings; private _advancedFilteringOverlaySettings; private columnListDiffer; private rowListDiffer; private _height; private _width; private _rowHeight; private _horizontalForOfs; private _multiRowLayoutRowSize; private _totalWidth; private _pinnedVisible; private _unpinnedVisible; private _pinnedWidth; private _unpinnedWidth; private _visibleColumns; private _columnGroups; private _columnWidth; private _summaryPosition; private _summaryCalculationMode; private _showSummaryOnCollapse; private _summaryRowHeight; private _cellSelectionMode; private _rowSelectionMode; private _selectRowOnClick; private _columnSelectionMode; private lastAddedRowIndex; private _currencyPositionLeft; private rowEditPositioningStrategy; private rowEditSettings; private transactionChange$; private _rendered; private readonly DRAG_SCROLL_DELTA; private _dataCloneStrategy; private _autoSize; private _sortHeaderIconTemplate; private _sortAscendingHeaderIconTemplate; private _sortDescendingHeaderIconTemplate; private _gridSize; private _defaultRowHeight; /** * @hidden @internal */ get minColumnWidth(): number; protected get isCustomSetRowHeight(): boolean; /** * @hidden @internal */ abstract id: string; abstract data: any[] | null; /** * Returns an array of objects containing the filtered data. * * @example * ```typescript * let filteredData = this.grid.filteredData; * ``` */ get filteredData(): any; /** * Returns an array containing the filtered sorted data. * * @example * ```typescript * const filteredSortedData = this.grid1.filteredSortedData; * ``` */ get filteredSortedData(): any[]; /** * @hidden @internal */ get rowChangesCount(): number; /** * @hidden @internal */ get dataWithAddedInTransactionRows(): any[]; /** * @hidden @internal */ get dataLength(): number; /** * @hidden @internal */ get template(): TemplateRef; /** * @hidden @internal */ private get hasZeroResultFilter(); protected get totalCalcWidth(): number; protected get renderData(): any[]; protected displayStyle: string; protected templateRows: string; /** * @hidden @internal */ private get hasNoData(); /** * @hidden @internal */ get shouldOverlayLoading(): boolean; /** * @hidden @internal */ get isMultiRowSelectionEnabled(): boolean; /** * @hidden @internal */ get isRowSelectable(): boolean; /** * @hidden @internal */ get isCellSelectable(): boolean; /** * @hidden @internal */ get columnInDrag(): ColumnType; constructor(validation: IgxGridValidationService, /** @hidden @internal */ selectionService: IgxGridSelectionService, colResizingService: IgxColumnResizingService, gridAPI: GridServiceType, transactionFactory: IgxFlatTransactionFactory, elementRef: ElementRef, zone: NgZone, /** @hidden @internal */ document: any, cdr: ChangeDetectorRef, differs: IterableDiffers, viewRef: ViewContainerRef, injector: Injector, envInjector: EnvironmentInjector, navigation: IgxGridNavigationService, /** @hidden @internal */ filteringService: IgxFilteringService, textHighlightService: IgxTextHighlightService, overlayService: IgxOverlayService, /** @hidden @internal */ summaryService: IgxGridSummaryService, localeId: string, platform: PlatformUtil, _diTransactions?: TransactionService); /** * @hidden * @internal */ hideActionStrip(): void; /** * @hidden * @internal */ get headerFeaturesWidth(): number; /** * @hidden * @internal */ isDetailRecord(_rec: any): boolean; /** * @hidden * @internal */ isGroupByRecord(_rec: any): boolean; /** * @hidden @internal */ isGhostRecord(record: any): boolean; /** * @hidden @internal */ isAddRowRecord(record: any): boolean; /** * @hidden * Returns the row index of a row that takes into account the full view data like pinning. */ getDataViewIndex(rowIndex: any, pinned: any): any; /** * @hidden * @internal */ get hasDetails(): boolean; /** * Returns the state of the grid virtualization. * * @remarks * Includes the start index and how many records are rendered. * @example * ```typescript * const gridVirtState = this.grid1.virtualizationState; * ``` */ get virtualizationState(): igniteui_angular.IForOfState; /** * @hidden * @internal */ hideOverlays(): void; /** * Returns whether the record is pinned or not. * * @param rowIndex Index of the record in the `dataView` collection. * * @hidden * @internal */ isRecordPinnedByViewIndex(rowIndex: number): boolean; /** * Returns whether the record is pinned or not. * * @param rowIndex Index of the record in the `filteredSortedData` collection. */ isRecordPinnedByIndex(rowIndex: number): boolean; /** * @hidden * @internal */ isRecordPinned(rec: any): boolean; /** * @hidden * @internal * Returns the record index in order of pinning by the user. Does not consider sorting/filtering. */ getInitialPinnedIndex(rec: any): number; /** * @hidden * @internal */ get hasPinnedRecords(): boolean; /** * @hidden * @internal */ get pinnedRecordsCount(): number; /** * @hidden * @internal */ get crudService(): any; /** * @hidden * @internal */ _setupServices(): void; /** * @hidden * @internal */ _setupListeners(): void; /** * @hidden */ ngOnInit(): void; /** * @hidden * @internal */ resetColumnsCaches(): void; /** * @hidden @internal */ generateRowID(): string | number; /** * @hidden * @internal */ resetForOfCache(): void; /** * @hidden * @internal */ setFilteredData(data: any, pinned: boolean): void; /** * @hidden * @internal */ resetColumnCollections(): void; /** * @hidden * @internal */ resetCachedWidths(): void; /** * @hidden * @internal */ resetCaches(recalcFeatureWidth?: boolean): void; /** * @hidden */ ngAfterContentInit(): void; /** * @hidden @internal */ dataRebinding(event: IForOfDataChangeEventArgs): void; /** * @hidden @internal */ dataRebound(event: IForOfDataChangeEventArgs): void; /** @hidden @internal */ createFilterDropdown(column: ColumnType, options: OverlaySettings): string; /** @hidden @internal */ setUpPaginator(): void; /** * @hidden * @internal */ setFilteredSortedData(data: any, pinned: boolean): void; /** * @hidden @internal */ resetHorizontalVirtualization(): void; /** * @hidden @internal */ _setupRowObservers(): void; /** * @hidden @internal */ _zoneBegoneListeners(): void; /** * @hidden */ ngAfterViewInit(): void; /** * @hidden @internal */ notifyChanges(repaint?: boolean): void; /** * @hidden @internal */ ngDoCheck(): void; /** * @hidden * @internal */ getDragGhostCustomTemplate(): TemplateRef; /** * @hidden @internal */ ngOnDestroy(): void; /** * Toggles the specified column's visibility. * * @example * ```typescript * this.grid1.toggleColumnVisibility({ * column: this.grid1.columns[0], * newValue: true * }); * ``` */ toggleColumnVisibility(args: IColumnVisibilityChangedEventArgs): void; /** * Gets/Sets a list of key-value pairs [row ID, expansion state]. * * @remarks * Includes only states that differ from the default one. * Supports two-way binding. * @example * ```html * * * ``` */ get expansionStates(): Map; set expansionStates(value: Map); /** * Expands all rows. * * @example * ```typescript * this.grid.expandAll(); * ``` */ expandAll(): void; /** * Collapses all rows. * * @example * ```typescript * this.grid.collapseAll(); * ``` */ collapseAll(): void; /** * Expands the row by its id. * * @remarks * ID is either the primaryKey value or the data record instance. * @example * ```typescript * this.grid.expandRow(rowID); * ``` * @param rowID The row id - primaryKey value or the data record instance. */ expandRow(rowID: any): void; /** * Collapses the row by its id. * * @remarks * ID is either the primaryKey value or the data record instance. * @example * ```typescript * this.grid.collapseRow(rowID); * ``` * @param rowID The row id - primaryKey value or the data record instance. */ collapseRow(rowID: any): void; /** * Toggles the row by its id. * * @remarks * ID is either the primaryKey value or the data record instance. * @example * ```typescript * this.grid.toggleRow(rowID); * ``` * @param rowID The row id - primaryKey value or the data record instance. */ toggleRow(rowID: any): void; /** * @hidden * @internal */ getDefaultExpandState(_rec: any): boolean; /** * Gets the native element. * * @example * ```typescript * const nativeEl = this.grid.nativeElement. * ``` */ get nativeElement(): HTMLElement; /** * Gets/Sets the outlet used to attach the grid's overlays to. * * @remarks * If set, returns the outlet defined outside the grid. Otherwise returns the grid's internal outlet directive. */ get outlet(): IgxOverlayOutletDirective; set outlet(val: IgxOverlayOutletDirective); /** * Gets the default row height. * * @example * ```typescript * const rowHeigh = this.grid.defaultRowHeight; * ``` */ get defaultRowHeight(): number; /** * @hidden @internal */ get defaultSummaryHeight(): number; /** * Returns the `IgxGridHeaderGroupComponent`'s minimum allowed width. * * @remarks * Used internally for restricting header group component width. * The values below depend on the header cell default right/left padding values. */ get defaultHeaderGroupMinWidth(): number; /** @hidden @internal */ get pinnedWidth(): number; /** @hidden @internal */ get unpinnedWidth(): number; /** * @hidden @internal */ isHorizontalScrollHidden: boolean; /** * @hidden @internal * Gets the header cell inner width for auto-sizing. */ getHeaderCellWidth(element: HTMLElement): ISizeInfo; /** * @hidden @internal * Gets the combined width of the columns that are specific to the enabled grid features. They are fixed. */ featureColumnsWidth(expander?: ElementRef): number; /** * @hidden @internal */ get summariesMargin(): number; /** * Gets an array of `IgxColumnComponent`s. * * @example * ```typescript * const colums = this.grid.columns. * ``` */ get columns(): IgxColumnComponent[]; /** * Gets an array of the pinned `IgxColumnComponent`s. * * @example * ```typescript * const pinnedColumns = this.grid.pinnedColumns. * ``` */ get pinnedColumns(): IgxColumnComponent[]; /** * Gets an array of the pinned `IgxRowComponent`s. * * @example * ```typescript * const pinnedRow = this.grid.pinnedRows; * ``` */ get pinnedRows(): IgxGridRowComponent[]; /** * Gets an array of unpinned `IgxColumnComponent`s. * * @example * ```typescript * const unpinnedColumns = this.grid.unpinnedColumns. * ``` */ get unpinnedColumns(): IgxColumnComponent[]; /** * Gets the `width` to be set on `IgxGridHeaderGroupComponent`. */ getHeaderGroupWidth(column: IgxColumnComponent): string; /** * Returns the `IgxColumnComponent` by field name. * * @example * ```typescript * const myCol = this.grid1.getColumnByName("ID"); * ``` * @param name */ getColumnByName(name: string): IgxColumnComponent; getColumnByVisibleIndex(index: number): IgxColumnComponent; /** * Recalculates all widths of columns that have size set to `auto`. * * @example * ```typescript * this.grid1.recalculateAutoSizes(); * ``` */ recalculateAutoSizes(): void; /** * Returns an array of visible `IgxColumnComponent`s. * * @example * ```typescript * const visibleColumns = this.grid.visibleColumns. * ``` */ get visibleColumns(): IgxColumnComponent[]; /** * Returns the total number of records. * * @remarks * Only functions when paging is enabled. * @example * ```typescript * const totalRecords = this.grid.totalRecords; * ``` */ get totalRecords(): number; set totalRecords(total: number); /** @hidden @internal */ get totalWidth(): number; /** * @hidden * @internal */ get showRowSelectors(): boolean; /** * @hidden * @internal */ get showAddButton(): boolean; /** * @hidden * @internal */ get showDragIcons(): boolean; /** * @hidden * @internal */ protected _getDataViewIndex(index: number): number; /** * @hidden * @internal */ protected getDataIndex(dataViewIndex: number): number; /** * Places a column before or after the specified target column. * * @example * ```typescript * grid.moveColumn(column, target); * ``` */ moveColumn(column: IgxColumnComponent, target: IgxColumnComponent, pos?: DropPosition): void; /** * Triggers change detection for the `IgxGridComponent`. * Calling markForCheck also triggers the grid pipes explicitly, resulting in all updates being processed. * May degrade performance if used when not needed, or if misused: * ```typescript * // DON'Ts: * // don't call markForCheck from inside a loop * // don't call markForCheck when a primitive has changed * grid.data.forEach(rec => { * rec = newValue; * grid.markForCheck(); * }); * * // DOs * // call markForCheck after updating a nested property * grid.data.forEach(rec => { * rec.nestedProp1.nestedProp2 = newValue; * }); * grid.markForCheck(); * ``` * * @example * ```typescript * grid.markForCheck(); * ``` */ markForCheck(): void; /** * Creates a new `IgxGridRowComponent` and adds the data record to the end of the data source. * * @example * ```typescript * this.grid1.addRow(record); * ``` * @param data */ addRow(data: any): void; /** * Removes the `IgxGridRowComponent` and the corresponding data record by primary key. * * @remarks * Requires that the `primaryKey` property is set. * The method accept rowSelector as a parameter, which is the rowID. * @example * ```typescript * this.grid1.deleteRow(0); * ``` * @param rowSelector */ deleteRow(rowSelector: any): any; /** @hidden */ deleteRowById(rowId: any): any; /** * Updates the `IgxGridRowComponent` and the corresponding data record by primary key. * * @remarks * Requires that the `primaryKey` property is set. * @example * ```typescript * this.gridWithPK.updateCell('Updated', 1, 'ProductName'); * ``` * @param value the new value which is to be set. * @param rowSelector corresponds to rowID. * @param column corresponds to column field. */ updateCell(value: any, rowSelector: any, column: string): void; /** * Updates the `IgxGridRowComponent` * * @remarks * The row is specified by * rowSelector parameter and the data source record with the passed value. * This method will apply requested update only if primary key is specified in the grid. * @example * ```typescript * grid.updateRow({ * ProductID: 1, ProductName: 'Spearmint', InStock: true, UnitsInStock: 1, OrderDate: new Date('2005-03-21') * }, 1); * ``` * @param value– * @param rowSelector correspond to rowID */ updateRow(value: any, rowSelector: any): void; /** * Returns the data that is contained in the row component. * * @remarks * If the primary key is not specified the row selector match the row data. * @example * ```typescript * const data = grid.getRowData(94741); * ``` * @param rowSelector correspond to rowID */ getRowData(rowSelector: any): any; /** * Sort a single `IgxColumnComponent`. * * @remarks * Sort the `IgxGridComponent`'s `IgxColumnComponent` based on the provided array of sorting expressions. * @example * ```typescript * this.grid.sort({ fieldName: name, dir: SortingDirection.Asc, ignoreCase: false }); * ``` */ sort(expression: ISortingExpression | Array): void; /** * Filters a single `IgxColumnComponent`. * * @example * ```typescript * public filter(term) { * this.grid.filter("ProductName", term, IgxStringFilteringOperand.instance().condition("contains")); * } * ``` * @param name * @param value * @param conditionOrExpressionTree * @param ignoreCase */ filter(name: string, value: any, conditionOrExpressionTree?: IFilteringOperation | IFilteringExpressionsTree, ignoreCase?: boolean): void; /** * Filters all the `IgxColumnComponent` in the `IgxGridComponent` with the same condition. * * @example * ```typescript * grid.filterGlobal('some', IgxStringFilteringOperand.instance().condition('contains')); * ``` * @param value * @param condition * @param ignoreCase * @deprecated in version 19.0.0. */ filterGlobal(value: any, condition: any, ignoreCase?: any): void; /** * Enables summaries for the specified column and applies your customSummary. * * @remarks * If you do not provide the customSummary, then the default summary for the column data type will be applied. * @example * ```typescript * grid.enableSummaries([{ fieldName: 'ProductName' }, { fieldName: 'ID' }]); * ``` * Enable summaries for the listed columns. * @example * ```typescript * grid.enableSummaries('ProductName'); * ``` * @param rest */ enableSummaries(...rest: any[]): void; /** * Disable summaries for the specified column. * * @example * ```typescript * grid.disableSummaries('ProductName'); * ``` * @remarks * Disable summaries for the listed columns. * @example * ```typescript * grid.disableSummaries([{ fieldName: 'ProductName' }]); * ``` */ disableSummaries(...rest: any[]): void; /** * If name is provided, clears the filtering state of the corresponding `IgxColumnComponent`. * * @remarks * Otherwise clears the filtering state of all `IgxColumnComponent`s. * @example * ```typescript * this.grid.clearFilter(); * ``` * @param name */ clearFilter(name?: string): void; /** * If name is provided, clears the sorting state of the corresponding `IgxColumnComponent`. * * @remarks * otherwise clears the sorting state of all `IgxColumnComponent`. * @example * ```typescript * this.grid.clearSort(); * ``` * @param name */ clearSort(name?: string): void; /** * @hidden @internal */ refreshGridState(_args?: any): void; /** * Pins a column by field name. * * @remarks * Returns whether the operation is successful. * @example * ```typescript * this.grid.pinColumn("ID"); * ``` * @param columnName * @param index */ pinColumn(columnName: string | IgxColumnComponent, index?: number): boolean; /** * Unpins a column by field name. Returns whether the operation is successful. * * @example * ```typescript * this.grid.pinColumn("ID"); * ``` * @param columnName * @param index */ unpinColumn(columnName: string | IgxColumnComponent, index?: number): boolean; /** * Pin the row by its id. * * @remarks * ID is either the primaryKey value or the data record instance. * @example * ```typescript * this.grid.pinRow(rowID); * ``` * @param rowID The row id - primaryKey value or the data record instance. * @param index The index at which to insert the row in the pinned collection. */ pinRow(rowID: any, index?: number, row?: RowType): boolean; /** * Unpin the row by its id. * * @remarks * ID is either the primaryKey value or the data record instance. * @example * ```typescript * this.grid.unpinRow(rowID); * ``` * @param rowID The row id - primaryKey value or the data record instance. */ unpinRow(rowID: any, row?: RowType): boolean; /** @hidden @internal */ get pinnedRowHeight(): any; /** @hidden @internal */ get totalHeight(): any; /** * Recalculates grid width/height dimensions. * * @remarks * Should be run when changing DOM elements dimentions manually that affect the grid's size. * @example * ```typescript * this.grid.reflow(); * ``` */ reflow(): void; /** * Finds the next occurrence of a given string in the grid and scrolls to the cell if it isn't visible. * * @remarks * Returns how many times the grid contains the string. * @example * ```typescript * this.grid.findNext("financial"); * ``` * @param text the string to search. * @param caseSensitive optionally, if the search should be case sensitive (defaults to false). * @param exactMatch optionally, if the text should match the entire value (defaults to false). */ findNext(text: string, caseSensitive?: boolean, exactMatch?: boolean): number; /** * Finds the previous occurrence of a given string in the grid and scrolls to the cell if it isn't visible. * * @remarks * Returns how many times the grid contains the string. * @example * ```typescript * this.grid.findPrev("financial"); * ``` * @param text the string to search. * @param caseSensitive optionally, if the search should be case sensitive (defaults to false). * @param exactMatch optionally, if the text should match the entire value (defaults to false). */ findPrev(text: string, caseSensitive?: boolean, exactMatch?: boolean): number; /** * Reapplies the existing search. * * @remarks * Returns how many times the grid contains the last search. * @example * ```typescript * this.grid.refreshSearch(); * ``` * @param updateActiveInfo */ refreshSearch(updateActiveInfo?: boolean, endEdit?: boolean): number; /** * Removes all the highlights in the cell. * * @example * ```typescript * this.grid.clearSearch(); * ``` */ clearSearch(): void; /** @hidden @internal */ get hasEditableColumns(): boolean; /** @hidden @internal */ get hasSummarizedColumns(): boolean; /** * @hidden @internal */ get rootSummariesEnabled(): boolean; /** * @hidden @internal */ get hasVisibleColumns(): boolean; set hasVisibleColumns(value: boolean); /** @hidden @internal */ get hasMovableColumns(): boolean; /** @hidden @internal */ get hasColumnGroups(): boolean; /** @hidden @internal */ get hasColumnLayouts(): boolean; /** * @hidden @internal */ get multiRowLayoutRowSize(): number; /** * @hidden */ protected get rowBasedHeight(): number; /** * @hidden */ protected get isPercentWidth(): boolean; protected get shouldResize(): boolean; /** * @hidden @internal */ get isPercentHeight(): boolean; /** * @hidden */ protected get defaultTargetBodyHeight(): number; /** * @hidden @internal * The rowHeight input is bound to min-height css prop of rows that adds a 1px border in all cases */ get renderedRowHeight(): number; /** * @hidden @internal */ get outerWidth(): number; /** * @hidden @internal * Gets the size of the grid */ get gridSize(): Size$1; /** * @hidden @internal * Gets the visible content height that includes header + tbody + footer. */ getVisibleContentHeight(): any; /** * @hidden @internal */ getPossibleColumnWidth(baseWidth?: number): string; /** * @hidden @internal */ hasVerticalScroll(): boolean; /** * Gets calculated width of the pinned area. * * @example * ```typescript * const pinnedWidth = this.grid.getPinnedWidth(); * ``` * @param takeHidden If we should take into account the hidden columns in the pinned area. */ getPinnedWidth(takeHidden?: boolean): number; /** * @hidden @internal */ isColumnGrouped(_fieldName: string): boolean; /** * @hidden @internal * TODO: REMOVE */ onHeaderSelectorClick(event: any): void; /** * @hidden @internal */ get headSelectorBaseAriaLabel(): "Deselect all filtered" | "Select all filtered" | "Deselect all" | "Select all"; /** * @hidden * @internal */ get totalRowsCountAfterFilter(): number; /** @hidden @internal */ get pinnedDataView(): any[]; /** @hidden @internal */ get unpinnedDataView(): any[]; /** * Returns the currently transformed paged/filtered/sorted/grouped/pinned/unpinned row data, displayed in the grid. * * @example * ```typescript * const dataView = this.grid.dataView; * ``` */ get dataView(): any[]; /** * Gets/Sets whether clicking over a row should select/deselect it * * @remarks * By default it is set to true * @param enabled: boolean */ get selectRowOnClick(): boolean; set selectRowOnClick(enabled: boolean); /** * Select specified rows by ID. * * @example * ```typescript * this.grid.selectRows([1,2,5], true); * ``` * @param rowIDs * @param clearCurrentSelection if true clears the current selection */ selectRows(rowIDs: any[], clearCurrentSelection?: boolean): void; /** * Deselect specified rows by ID. * * @example * ```typescript * this.grid.deselectRows([1,2,5]); * ``` * @param rowIDs */ deselectRows(rowIDs: any[]): void; /** * Selects all rows * * @remarks * By default if filtering is in place, selectAllRows() and deselectAllRows() select/deselect all filtered rows. * If you set the parameter onlyFilterData to false that will select all rows in the grid exept deleted rows. * @example * ```typescript * this.grid.selectAllRows(); * this.grid.selectAllRows(false); * ``` * @param onlyFilterData */ selectAllRows(onlyFilterData?: boolean): void; /** * Deselects all rows * * @remarks * By default if filtering is in place, selectAllRows() and deselectAllRows() select/deselect all filtered rows. * If you set the parameter onlyFilterData to false that will deselect all rows in the grid exept deleted rows. * @example * ```typescript * this.grid.deselectAllRows(); * ``` * @param onlyFilterData */ deselectAllRows(onlyFilterData?: boolean): void; /** * Deselect selected cells. * @example * ```typescript * this.grid.clearCellSelection(); * ``` */ clearCellSelection(): void; /** * @hidden @internal */ dragScroll(delta: { left: number; top: number; }): void; /** * @hidden @internal */ isDefined(arg: any): boolean; /** * Select range(s) of cells between certain rows and columns of the grid. */ selectRange(arg: GridSelectionRange | GridSelectionRange[] | null | undefined): void; /** * @hidden @internal */ columnToVisibleIndex(field: string | number): number; /** * @hidden @internal */ setSelection(range: GridSelectionRange): void; /** * Get the currently selected ranges in the grid. */ getSelectedRanges(): GridSelectionRange[]; /** * * Returns an array of the current cell selection in the form of `[{ column.field: cell.value }, ...]`. * * @remarks * If `formatters` is enabled, the cell value will be formatted by its respective column formatter (if any). * If `headers` is enabled, it will use the column header (if any) instead of the column field. */ getSelectedData(formatters?: boolean, headers?: boolean): any[]; /** * Get current selected columns. * * @example * Returns an array with selected columns * ```typescript * const selectedColumns = this.grid.selectedColumns(); * ``` */ selectedColumns(): ColumnType[]; /** * Select specified columns. * * @example * ```typescript * this.grid.selectColumns(['ID','Name'], true); * ``` * @param columns * @param clearCurrentSelection if true clears the current selection */ selectColumns(columns: string[] | ColumnType[], clearCurrentSelection?: boolean): void; /** * Deselect specified columns by field. * * @example * ```typescript * this.grid.deselectColumns(['ID','Name']); * ``` * @param columns */ deselectColumns(columns: string[] | ColumnType[]): void; /** * Deselects all columns * * @example * ```typescript * this.grid.deselectAllColumns(); * ``` */ deselectAllColumns(): void; /** * Selects all columns * * @example * ```typescript * this.grid.deselectAllColumns(); * ``` */ selectAllColumns(): void; /** * * Returns an array of the current columns selection in the form of `[{ column.field: cell.value }, ...]`. * * @remarks * If `formatters` is enabled, the cell value will be formatted by its respective column formatter (if any). * If `headers` is enabled, it will use the column header (if any) instead of the column field. */ getSelectedColumnsData(formatters?: boolean, headers?: boolean): any[]; /** @hidden @internal **/ combineSelectedCellAndColumnData(columnData: any[], formatters?: boolean, headers?: boolean): any[]; /** * @hidden @internal */ preventContainerScroll: (evt: any) => void; /** * @hidden * @internal */ copyHandler(event: any): void; /** * @hidden @internal */ prepareCopyData(event: any, data: any, keys?: any): string; /** * @hidden @internal */ showSnackbarFor(index: number): void; /** * Navigates to a position in the grid based on provided `rowindex` and `visibleColumnIndex`. * * @remarks * Also can execute a custom logic over the target element, * through a callback function that accepts { targetType: GridKeydownTargetType, target: Object } * @example * ```typescript * this.grid.navigateTo(10, 3, (args) => { args.target.nativeElement.focus(); }); * ``` */ navigateTo(rowIndex: number, visibleColIndex?: number, cb?: (args: any) => void): void; /** * Returns `ICellPosition` which defines the next cell, * according to the current position, that match specific criteria. * * @remarks * You can pass callback function as a third parameter of `getPreviousCell` method. * The callback function accepts IgxColumnComponent as a param * @example * ```typescript * const nextEditableCellPosition = this.grid.getNextCell(0, 3, (column) => column.editable); * ``` */ getNextCell(currRowIndex: number, curVisibleColIndex: number, callback?: (IgxColumnComponent: any) => boolean): ICellPosition; /** * Returns `ICellPosition` which defines the previous cell, * according to the current position, that match specific criteria. * * @remarks * You can pass callback function as a third parameter of `getPreviousCell` method. * The callback function accepts IgxColumnComponent as a param * @example * ```typescript * const previousEditableCellPosition = this.grid.getPreviousCell(0, 3, (column) => column.editable); * ``` */ getPreviousCell(currRowIndex: number, curVisibleColIndex: number, callback?: (IgxColumnComponent: any) => boolean): ICellPosition; /** * @hidden * @internal */ endRowEditTabStop(commit?: boolean, event?: Event): boolean; /** * @hidden @internal */ trackColumnChanges(_index: any, col: any): any; /** * @hidden */ isExpandedGroup(_group: IGroupByRecord): boolean; /** * @hidden @internal * TODO: MOVE to CRUD */ openRowOverlay(id: any): void; /** * @hidden @internal */ closeRowEditingOverlay(): void; /** * @hidden @internal */ toggleRowEditingOverlay(show: any): void; /** * @hidden @internal */ repositionRowEditingOverlay(row: RowType): void; /** * @hidden @internal */ cachedViewLoaded(args: ICachedViewLoadedEventArgs): void; /** * Opens the advanced filtering dialog. */ openAdvancedFilteringDialog(overlaySettings?: OverlaySettings): void; /** * Closes the advanced filtering dialog. * * @param applyChanges indicates whether the changes should be applied */ closeAdvancedFilteringDialog(applyChanges: boolean): void; /** * @hidden @internal */ getEmptyRecordObjectFor(inRow: RowType): { rowID: string | number; data: any; recordRef: any; }; /** * @hidden @internal */ hasHorizontalScroll(): boolean; /** * @hidden @internal */ isSummaryRow(rowData: any): boolean; /** * @hidden @internal */ triggerPipes(): void; /** * @hidden */ rowEditingWheelHandler: (event: WheelEvent) => void; /** * @hidden */ getUnpinnedIndexById(id: any): number; /** * Finishes the row transactions on the current row and returns whether the grid editing was canceled. * * @remarks * If `commit === true`, passes them from the pending state to the data (or transaction service) * @example * ```html * * ``` * @param commit */ endEdit(commit?: boolean, event?: Event): boolean; /** * Enters add mode by spawning the UI under the specified row by rowID. * * @remarks * If null is passed as rowID, the row adding UI is spawned as the first record in the data view * @remarks * Spawning the UI to add a child for a record only works if you provide a rowID * @example * ```typescript * this.grid.beginAddRowById('ALFKI'); * this.grid.beginAddRowById('ALFKI', true); * this.grid.beginAddRowById(null); * ``` * @param rowID - The rowID to spawn the add row UI for, or null to spawn it as the first record in the data view * @param asChild - Whether the record should be added as a child. Only applicable to igxTreeGrid. */ beginAddRowById(rowID: any, asChild?: boolean): void; protected _addRowForIndex(index: number, asChild?: boolean): void; /** * Enters add mode by spawning the UI at the specified index. * * @remarks * Accepted values for index are integers from 0 to this.grid.dataView.length * @example * ```typescript * this.grid.beginAddRowByIndex(0); * ``` * @param index - The index to spawn the UI at. Accepts integers from 0 to this.grid.dataView.length */ beginAddRowByIndex(index: number): void; /** * @hidden */ preventHeaderScroll(args: any): void; protected beginAddRowForIndex(index: number, asChild?: boolean): void; protected switchTransactionService(val: boolean): void; protected subscribeToTransactions(): void; protected transactionStatusUpdate(event: StateUpdateEvent): void; protected writeToData(rowIndex: number, value: any): void; protected _restoreVirtState(row: any): void; protected changeRowEditingOverlayStateOnScroll(row: RowType): void; /** * Should be called when data and/or isLoading input changes so that the overlay can be * hidden/shown based on the current value of shouldOverlayLoading */ protected evaluateLoadingState(): void; /** * @hidden * Sets grid width i.e. this.calcWidth */ protected calculateGridWidth(): void; /** * @hidden * Sets columns defaultWidth property */ protected _derivePossibleWidth(): void; /** * @hidden * @internal */ protected getExtremumBasedColWidth(column: IgxColumnComponent): string; protected resetNotifyChanges(): void; /** @hidden @internal */ resolveOutlet(): IgxOverlayOutletDirective; /** * Reorder columns in the main columnList and _columns collections. * * @hidden */ protected _moveColumns(from: IgxColumnComponent, to: IgxColumnComponent, pos: DropPosition): void; /** * Update internal column's collection. * @hidden */ updateColumns(newColumns: IgxColumnComponent[]): void; /** * @hidden */ protected _resetColumnList(list?: any): any[]; /** * Reorders columns inside the passed column collection. * When reordering column group collection, the collection is not flattened. * In all other cases, the columns collection is flattened, this is why adittional calculations on the dropIndex are done. * * @hidden */ protected _reorderColumns(from: IgxColumnComponent, to: IgxColumnComponent, position: DropPosition, columnCollection: any[], inGroup?: boolean): void; /** * Reorder column group collection. * * @hidden */ protected _moveChildColumns(parent: IgxColumnComponent, from: IgxColumnComponent, to: IgxColumnComponent, pos: DropPosition): void; /** * @hidden @internal */ protected setupColumns(): void; protected getColumnList(): IgxColumnComponent[]; /** * @hidden */ protected deleteRowFromData(rowID: any, index: number): void; /** * @hidden @internal */ protected getDataBasedBodyHeight(): number; /** * @hidden @internal */ protected onPinnedRowsChanged(change: QueryList): void; /** * @hidden */ protected onColumnsChanged(change: QueryList): void; protected checkPrimaryKeyField(): void; /** * @hidden @internal */ protected onColumnsAddedOrRemoved(): void; /** * @hidden */ protected calculateGridSizes(recalcFeatureWidth?: boolean): void; /** * @hidden * Sets TBODY height i.e. this.calcHeight */ protected calculateGridHeight(): void; /** * @hidden */ protected getGroupAreaHeight(): number; /** * @hidden */ protected getComputedHeight(elem: any): number; /** * @hidden */ protected getFooterHeight(): number; /** * @hidden */ protected getTheadRowHeight(): number; /** * @hidden */ protected getToolbarHeight(): number; /** * @hidden */ protected getPagingFooterHeight(): number; /** * @hidden */ protected getFilterCellHeight(): number; /** * @hidden */ protected _calculateGridBodyHeight(): number; protected checkContainerSizeChange(): boolean; protected _shouldAutoSize(renderedHeight: any): boolean; /** * @hidden * Gets calculated width of the unpinned area * @param takeHidden If we should take into account the hidden columns in the pinned area. */ protected getUnpinnedWidth(takeHidden?: boolean): number; /** * @hidden */ protected _summaries(fieldName: string, hasSummary: boolean, summaryOperand?: any): void; /** * @hidden */ protected _multipleSummaries(expressions: ISummaryExpression[], hasSummary: boolean): void; /** * @hidden */ protected _disableMultipleSummaries(expressions: any): void; /** * @hidden */ resolveDataTypes(rec: any): "string" | "number" | "boolean" | "date" | "image"; /** * @hidden */ protected autogenerateColumns(): void; protected generateDataFields(data: any[]): string[]; /** * @hidden */ protected initColumns(collection: IgxColumnComponent[], cb?: (args: any) => void): void; /** * @hidden */ protected reinitPinStates(): void; protected extractDataFromSelection(source: any[], formatters?: boolean, headers?: boolean, columnData?: any[]): any[]; protected getSelectableColumnsAt(index: any): IgxColumnComponent[]; protected autoSizeColumnsInView(): void; protected extractDataFromColumnsSelection(source: any[], formatters?: boolean, headers?: boolean): any[]; /** * @hidden */ protected initPinning(): void; /** * @hidden */ protected scrollTo(row: any | number, column: any | number, inCollection?: any[]): void; /** * @hidden */ protected scrollToHorizontally(column: any | number): void; /** * @hidden */ protected scrollDirective(directive: IgxGridForOfDirective, goal: number): void; /** * @hidden */ protected getColumnWidthSum(): number; /** * Notify changes, reset cache and populateVisibleIndexes. * * @hidden */ private _columnsReordered; protected buildDataView(_data: any[]): void; private _applyWidthHostBinding; protected verticalScrollHandler(event: any): void; protected horizontalScrollHandler(event: any): void; protected get renderedActualRowHeight(): number; private executeCallback; private getNavigationArguments; private getNextDataRowIndex; /** * Returns the previous editable row index or -1 if no such row is found. * * @param currentIndex The index of the current editable record. */ private findPrevEditableDataRowIndex; /** * Returns if the record at the specified data view index is a an editable data record. * If record is group rec, summary rec, child rec, ghost rec. etc. it is not editable. * * @param dataViewIndex The index of that record in the data view. * */ private isEditableDataRecordAtIndex; /** * Returns if the record at the specified data view index is a ghost. * If record is pinned but is not in pinned area then it is a ghost record. * * @param dataViewIndex The index of that record in the data view. */ private isGhostRecordAtIndex; private isValidPosition; private find; private rebuildMatchCache; protected updateDefaultRowHeight(): void; private configureRowEditingOverlay; private handleColumnPinningForGroups; protected shouldRecreateColumns(oldData: any[] | null | undefined, newData: any[] | null | undefined): boolean; /** * Clears the current navigation service active node */ private clearActiveNode; private getRecreatedTree; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; static ngAcceptInputType_autoGenerate: unknown; static ngAcceptInputType_moving: unknown; static ngAcceptInputType_hideRowSelectors: unknown; static ngAcceptInputType_rowDraggable: unknown; static ngAcceptInputType_rowEditable: unknown; static ngAcceptInputType_isLoading: unknown; static ngAcceptInputType_allowFiltering: unknown; static ngAcceptInputType_allowAdvancedFiltering: unknown; static ngAcceptInputType_showSummaryOnCollapse: unknown; static ngAcceptInputType_batchEditing: unknown; static ngAcceptInputType_selectRowOnClick: unknown; } interface IGroupingDoneEventArgs extends IBaseEventArgs { expressions: Array | ISortingExpression; groupedColumns: Array | IgxColumnComponent; ungroupedColumns: Array | IgxColumnComponent; } /** * Grid provides a way to present and manipulate tabular data. * * @igxModule IgxGridModule * @igxGroup Grids & Lists * @igxKeywords grid, table * @igxTheme igx-grid-theme * @remarks * The Ignite UI Grid is used for presenting and manipulating tabular data in the simplest way possible. Once data * has been bound, it can be manipulated through filtering, sorting & editing operations. * @example * ```html * * * * * * ``` */ declare class IgxGridComponent extends IgxGridBaseDirective implements GridType, OnInit, DoCheck, AfterContentInit, AfterViewInit { /** * Emitted when a new chunk of data is loaded from virtualization. * * @example * ```typescript * * ``` */ dataPreLoad: EventEmitter; /** * Emitted when grouping is performed. * * @example * ```html * * ``` */ groupingExpressionsChange: EventEmitter; /** * Emitted when groups are expanded/collapsed. * * @example * ```html * * ``` */ groupingExpansionStateChange: EventEmitter; /** * Emitted when columns are grouped/ungrouped. * * @remarks * The `groupingDone` event would be raised only once if several columns get grouped at once by calling * the `groupBy()` or `clearGrouping()` API methods and passing an array as an argument. * The event arguments provide the `expressions`, `groupedColumns` and `ungroupedColumns` properties, which contain * the `ISortingExpression` and the `IgxColumnComponent` related to the grouping/ungrouping operation. * Please note that `groupedColumns` and `ungroupedColumns` show only the **newly** changed columns (affected by the **last** * grouping/ungrouping operation), not all columns which are currently grouped/ungrouped. * columns. * @example * ```html * * ``` */ groupingDone: EventEmitter; /** * Gets/Sets whether created groups are rendered expanded or collapsed. * * @remarks * The default rendered state is expanded. * @example * ```html * * ``` */ groupsExpanded: boolean; /** * Gets/Sets the template that will be rendered as a GroupBy drop area. * * @remarks * The grid needs to have at least one groupable column in order the GroupBy area to be displayed. * @example * ```html * * * * Custom drop area! * * ``` */ dropAreaTemplate: TemplateRef; /** * @hidden @internal */ detailTemplateDirective: TemplateRef; /** * Returns a reference to the master-detail template. * ```typescript * let detailTemplate = this.grid.detailTemplate; * ``` * * @memberof IgxColumnComponent */ get detailTemplate(): TemplateRef; /** * Sets the master-detail template. * ```html * *
*
City: {{dataItem.City}}
*
Address: {{dataItem.Address}}
*
*
* ``` * ```typescript * @ViewChild("'detailTemplate'", {read: TemplateRef }) * public detailTemplate: TemplateRef; * this.grid.detailTemplate = this.detailTemplate; * ``` * * @memberof IgxColumnComponent */ set detailTemplate(template: TemplateRef); /** * @hidden @internal */ role: string; /** * Gets/Sets the value of the `id` attribute. * * @remarks * If not provided it will be automatically generated. * @example * ```html * * ``` */ id: string; /** * @hidden @internal */ protected recordTemplate: TemplateRef; protected detailTemplateContainer: TemplateRef; protected defaultGroupTemplate: TemplateRef; protected summaryTemplate: TemplateRef; /** * @hidden @internal */ protected groupTemplate: IgxGroupByRowTemplateDirective; /** * @hidden * @internal */ protected groupByRowSelectorsTemplates: QueryList>; private _groupsRowList; private _groupsRecords; /** * Gets the hierarchical representation of the group by records. * * @example * ```typescript * let groupRecords = this.grid.groupsRecords; * ``` */ get groupsRecords(): IGroupByRecord[]; /** * @hidden @internal * Includes children of collapsed group rows. */ groupingResult: any[]; /** * @hidden @internal */ groupingMetadata: any[]; /** * @hidden @internal * Does not include children of collapsed group rows. */ groupingFlatResult: any[]; /** * @hidden */ protected _groupingExpressions: IGroupingExpression[]; /** * @hidden */ protected _groupingExpandState: IGroupByExpandState[]; /** * @hidden */ protected _groupRowTemplate: TemplateRef; /** * @hidden */ protected _groupStrategy: IGridGroupingStrategy; /** * @hidden */ protected groupingDiffer: any; private _data?; private _hideGroupedColumns; private _dropAreaMessage; private _showGroupArea; private _groupByRowSelectorTemplate; private _detailTemplate; /** * Gets/Sets the array of data that populates the component. * * @example * ```html * * ``` */ get data(): any[] | null; set data(value: any[] | null); /** * Gets/Sets the total number of records in the data source. * * @remarks * This property is required for remote grid virtualization to function when it is bound to remote data. * @example * ```typescript * const itemCount = this.grid1.totalItemCount; * this.grid1.totalItemCount = 55; * ``` */ set totalItemCount(count: number); get totalItemCount(): number; private get _gridAPI(); private childDetailTemplates; /** * @hidden @internal */ groupingPerformedSubject: Subject; /** * @hidden @internal */ groupingPerformed$: Observable; /** * Gets/Sets the group by state. * * @example * ```typescript * let groupByState = this.grid.groupingExpressions; * this.grid.groupingExpressions = [...]; * ``` * @remarks * Supports two-way data binding. * @example * ```html * * ``` */ get groupingExpressions(): IGroupingExpression[]; set groupingExpressions(value: IGroupingExpression[]); /** * Gets/Sets a list of expansion states for group rows. * * @remarks * Includes only states that differ from the default one (controlled through groupsExpanded and states that the user has changed. * Contains the expansion state (expanded: boolean) and the unique identifier for the group row (Array). * Supports two-way data binding. * @example * ```html * * ``` */ get groupingExpansionState(): IGroupByExpandState[]; set groupingExpansionState(value: IGroupByExpandState[]); /** * Gets/Sets whether the grouped columns should be hidden. * * @remarks * The default value is "false" * @example * ```html * * ``` */ get hideGroupedColumns(): boolean; set hideGroupedColumns(value: boolean); /** * Gets/Sets the grouping strategy of the grid. * * @remarks The default IgxGrouping extends from IgxSorting and a custom one can be used as a `sortStrategy` as well. * * @example * ```html * * ``` */ get groupStrategy(): IGridGroupingStrategy; set groupStrategy(value: IGridGroupingStrategy); /** * Gets/Sets the message displayed inside the GroupBy drop area where columns can be dragged on. * * @remarks * The grid needs to have at least one groupable column in order the GroupBy area to be displayed. * @example * ```html * * * * ``` */ set dropAreaMessage(value: string); get dropAreaMessage(): string; /** * @hidden @internal */ get groupsRowList(): QueryList; /** * Gets the group by row selector template. */ get groupByRowSelectorTemplate(): TemplateRef; /** * Sets the group by row selector template. * ```html * * {{ groupByRowContext.selectedCount }} / {{ groupByRowContext.totalCount }} * * ``` * ```typescript * @ViewChild("'template'", {read: TemplateRef }) * public template: TemplateRef; * this.grid.groupByRowSelectorTemplate = this.template; * ``` */ set groupByRowSelectorTemplate(template: TemplateRef); /** * @hidden @internal */ getDetailsContext(rowData: any, index: any): IgxGridDetailTemplateDirective; /** * @hidden @internal */ detailsViewFocused(container: any, rowIndex: any): void; /** * @hidden @internal */ get hasDetails(): boolean; /** * @hidden @internal */ getRowTemplate(rowData: any): TemplateRef; /** * @hidden @internal */ isDetailRecord(record: any): boolean; /** * @hidden @internal */ isDetailActive(rowIndex: any): boolean; /** * Gets/Sets the template reference for the group row. * * @example * ``` * const groupRowTemplate = this.grid.groupRowTemplate; * this.grid.groupRowTemplate = myRowTemplate; * ``` */ get groupRowTemplate(): TemplateRef; set groupRowTemplate(template: TemplateRef); /** @hidden @internal */ trackChanges: (index: any, rec: any) => any; /** * Groups by a new `IgxColumnComponent` based on the provided expression, or modifies an existing one. * * @remarks * Also allows for multiple columns to be grouped at once if an array of `ISortingExpression` is passed. * The `groupingDone` event would get raised only **once** if this method gets called multiple times with the same arguments. * @example * ```typescript * this.grid.groupBy({ fieldName: name, dir: SortingDirection.Asc, ignoreCase: false }); * this.grid.groupBy([ * { fieldName: name1, dir: SortingDirection.Asc, ignoreCase: false }, * { fieldName: name2, dir: SortingDirection.Desc, ignoreCase: true }, * { fieldName: name3, dir: SortingDirection.Desc, ignoreCase: false } * ]); * ``` */ groupBy(expression: IGroupingExpression | Array): void; /** * Clears grouping for particular column, array of columns or all columns. * * @remarks * Clears all grouping in the grid, if no parameter is passed. * If a parameter is provided, clears grouping for a particular column or an array of columns. * @example * ```typescript * this.grid.clearGrouping(); //clears all grouping * this.grid.clearGrouping("ID"); //ungroups a single column * this.grid.clearGrouping(["ID", "Column1", "Column2"]); //ungroups multiple columns * ``` * @param name Name of column or array of column names to be ungrouped. */ clearGrouping(name?: string | Array): void; /** * Returns if a group is expanded or not. * * @param group The group record. * @example * ```typescript * public groupRow: IGroupByRecord; * const expandedGroup = this.grid.isExpandedGroup(this.groupRow); * ``` */ isExpandedGroup(group: IGroupByRecord): boolean; /** * Toggles the expansion state of a group. * * @param groupRow The group record to toggle. * @example * ```typescript * public groupRow: IGroupByRecord; * const toggleExpGroup = this.grid.toggleGroup(this.groupRow); * ``` */ toggleGroup(groupRow: IGroupByRecord): void; /** * Select all rows within a group. * * @param groupRow: The group record which rows would be selected. * @param clearCurrentSelection if true clears the current selection * @example * ```typescript * this.grid.selectRowsInGroup(this.groupRow, true); * ``` */ selectRowsInGroup(groupRow: IGroupByRecord, clearPrevSelection?: boolean): void; /** * Deselect all rows within a group. * * @param groupRow The group record which rows would be deselected. * @example * ```typescript * public groupRow: IGroupByRecord; * this.grid.deselectRowsInGroup(this.groupRow); * ``` */ deselectRowsInGroup(groupRow: IGroupByRecord): void; /** * Expands the specified group and all of its parent groups. * * @param groupRow The group record to fully expand. * @example * ```typescript * public groupRow: IGroupByRecord; * this.grid.fullyExpandGroup(this.groupRow); * ``` */ fullyExpandGroup(groupRow: IGroupByRecord): void; /** * @hidden @internal */ isGroupByRecord(record: any): boolean; /** * Toggles the expansion state of all group rows recursively. * * @example * ```typescript * this.grid.toggleAllGroupRows; * ``` */ toggleAllGroupRows(): void; /** @hidden @internal */ get hasGroupableColumns(): boolean; /** * Returns whether the `IgxGridComponent` has group area. * * @example * ```typescript * let isGroupAreaVisible = this.grid.showGroupArea; * ``` * * @example * ```html * * ``` */ get showGroupArea(): boolean; set showGroupArea(value: boolean); /** * @hidden @internal */ isColumnGrouped(fieldName: string): boolean; /** * @hidden @internal */ getContext(rowData: any, rowIndex: number, pinned?: boolean): any; /** * @hidden @internal */ viewCreatedHandler(args: any): void; /** * @hidden @internal */ viewMovedHandler(args: any): void; /** * @hidden @internal */ get iconTemplate(): TemplateRef; /** * @hidden @internal */ ngAfterContentInit(): void; /** * @hidden @internal */ ngAfterViewInit(): void; /** * @hidden @internal */ ngOnInit(): void; /** * @hidden @internal */ ngDoCheck(): void; /** * @hidden @internal */ dataLoading(event: any): void; /** * * Returns an array of the current cell selection in the form of `[{ column.field: cell.value }, ...]`. * * @remarks * If `formatters` is enabled, the cell value will be formatted by its respective column formatter (if any). * If `headers` is enabled, it will use the column header (if any) instead of the column field. */ getSelectedData(formatters?: boolean, headers?: boolean): any[]; /** * Returns the `IgxGridRow` by index. * * @example * ```typescript * const myRow = grid.getRowByIndex(1); * ``` * @param index */ getRowByIndex(index: number): RowType; /** * Returns `IgxGridRow` object by the specified primary key. * * @remarks * Requires that the `primaryKey` property is set. * @example * ```typescript * const myRow = this.grid1.getRowByKey("cell5"); * ``` * @param keyValue */ getRowByKey(key: any): RowType; /** * @hidden @internal */ allRows(): RowType[]; /** * Returns the collection of `IgxGridRow`s for current page. * * @hidden @internal */ dataRows(): RowType[]; /** * Returns an array of the selected `IgxGridCell`s. * * @example * ```typescript * const selectedCells = this.grid.selectedCells; * ``` */ get selectedCells(): CellType[]; /** * Returns a `CellType` object that matches the conditions. * * @example * ```typescript * const myCell = this.grid1.getCellByColumn(2, "UnitPrice"); * ``` * @param rowIndex * @param columnField */ getCellByColumn(rowIndex: number, columnField: string): CellType; /** * Returns a `CellType` object that matches the conditions. * * @remarks * Requires that the primaryKey property is set. * @example * ```typescript * grid.getCellByKey(1, 'index'); * ``` * @param rowSelector match any rowID * @param columnField */ getCellByKey(rowSelector: any, columnField: string): CellType; pinRow(rowID: any, index?: number): boolean; unpinRow(rowID: any): boolean; /** * @hidden @internal */ createRow(index: number, data?: any): RowType; /** * @hidden @internal */ protected get defaultTargetBodyHeight(): number; /** * @hidden @internal */ protected getGroupAreaHeight(): number; /** * @hidden @internal */ protected onColumnsAddedOrRemoved(): void; /** * @hidden @internal */ protected scrollTo(row: any | number, column: any | number): void; /** * @hidden @internal */ protected _getStateForGroupRow(groupRow: IGroupByRecord): IGroupByExpandState; /** * @hidden */ protected _toggleGroup(groupRow: IGroupByRecord): void; /** * @hidden @internal */ protected _fullyExpandGroup(groupRow: IGroupByRecord): void; /** * @hidden @internal */ protected _applyGrouping(): void; private _setupNavigationService; private checkIfNoColumnField; private _setGroupColsVisibility; private stringifyCallback; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; static ngAcceptInputType_groupsExpanded: unknown; static ngAcceptInputType_hideGroupedColumns: unknown; static ngAcceptInputType_showGroupArea: unknown; } declare const IGX_PAGINATOR_DIRECTIVES: readonly [typeof IgxPaginatorComponent, typeof IgxPageNavigationComponent, typeof IgxPageSizeSelectorComponent, typeof IgxPaginatorContentDirective, typeof IgxPaginatorDirective]; declare const IGX_GRID_DIRECTIVES: readonly [typeof IgxGridComponent, typeof IgxGroupByRowTemplateDirective, typeof IgxGridDetailTemplateDirective, typeof IgxRowAddTextDirective, typeof IgxRowEditActionsDirective, typeof IgxRowEditTextDirective, typeof IgxRowEditTabStopDirective, typeof IgxRowDirective, typeof IgxGridFooterComponent, typeof IgxAdvancedFilteringDialogComponent, typeof IgxRowExpandedIndicatorDirective, typeof IgxRowCollapsedIndicatorDirective, typeof IgxHeaderExpandedIndicatorDirective, typeof IgxHeaderCollapsedIndicatorDirective, typeof IgxExcelStyleHeaderIconDirective, typeof IgxSortAscendingHeaderIconDirective, typeof IgxSortDescendingHeaderIconDirective, typeof IgxSortHeaderIconDirective, typeof IgxGridEmptyTemplateDirective, typeof IgxGridLoadingTemplateDirective, typeof IgxDragIndicatorIconDirective, typeof IgxRowDragGhostDirective, typeof IgxGridStateDirective, typeof IgxGridHeaderComponent, typeof IgxGridHeaderGroupComponent, typeof IgxGridHeaderRowComponent, typeof IgxFilterCellTemplateDirective, typeof IgxSummaryTemplateDirective, typeof IgxCellTemplateDirective, typeof IgxCellValidationErrorDirective, typeof IgxCellHeaderTemplateDirective, typeof IgxCellFooterTemplateDirective, typeof IgxCellEditorTemplateDirective, typeof IgxCollapsibleIndicatorTemplateDirective, typeof IgxColumnComponent, typeof IgxColumnGroupComponent, typeof IgxColumnLayoutComponent, typeof IgxColumnActionsComponent, typeof IgxColumnHidingDirective, typeof IgxColumnPinningDirective, typeof IgxRowSelectorDirective, typeof IgxGroupByRowSelectorDirective, typeof IgxHeadSelectorDirective, typeof IgxCSVTextDirective, typeof IgxExcelTextDirective, typeof IgxGridToolbarActionsComponent, typeof IgxGridToolbarAdvancedFilteringComponent, typeof IgxGridToolbarComponent, typeof IgxGridToolbarExporterComponent, typeof IgxGridToolbarHidingComponent, typeof IgxGridToolbarPinningComponent, typeof IgxGridToolbarTitleComponent, typeof IgxGridToolbarDirective, typeof IgxGridExcelStyleFilteringComponent, typeof IgxExcelStyleHeaderComponent, typeof IgxExcelStyleSortingComponent, typeof IgxExcelStylePinningComponent, typeof IgxExcelStyleHidingComponent, typeof IgxExcelStyleSelectingComponent, typeof IgxExcelStyleClearFiltersComponent, typeof IgxExcelStyleConditionalFilterComponent, typeof IgxExcelStyleMovingComponent, typeof IgxExcelStyleSearchComponent, typeof IgxExcelStyleColumnOperationsTemplateDirective, typeof IgxExcelStyleFilterOperationsTemplateDirective, typeof IgxExcelStyleLoadingValuesTemplateDirective, typeof IgxColumnRequiredValidatorDirective, typeof IgxColumnMinValidatorDirective, typeof IgxColumnMaxValidatorDirective, typeof IgxColumnEmailValidatorDirective, typeof IgxColumnMinLengthValidatorDirective, typeof IgxColumnMaxLengthValidatorDirective, typeof IgxColumPatternValidatorDirective, typeof IgxPaginatorComponent, typeof IgxPageNavigationComponent, typeof IgxPageSizeSelectorComponent, typeof IgxPaginatorContentDirective, typeof IgxPaginatorDirective]; interface IDataSelectorPanel { name: string; i18n: string; type?: PivotDimensionType; dataKey: string; icon: string; itemKey: string; displayKey?: string; sortable: boolean; dragChannels: string[]; } /** * Pivot Data Selector provides means to configure the pivot state of the Pivot Grid via a vertical panel UI * * @igxModule IgxPivotGridModule * @igxGroup Grids & Lists * @igxKeywords data selector, pivot, grid * @igxTheme pivot-data-selector-theme * @remarks * The Ignite UI Data Selector has a searchable list with the grid data columns, * there are also four expandable areas underneath for filters, rows, columns, and values * is used for grouping and aggregating simple flat data into a pivot table. * @example * ```html * * * * ``` */ declare class IgxPivotDataSelectorComponent { private renderer; private cdr; /** * Gets/sets whether the columns panel is expanded * Get * ```typescript * const columnsPanelState: boolean = this.dataSelector.columnsExpanded; * ``` * Set * ```html * * ``` * * Two-way data binding: * ```html * * ``` */ columnsExpanded: boolean; /** * Emitted when the columns panel is expanded or collapsed. * * @example * ```html * * ``` */ columnsExpandedChange: EventEmitter; /** * Gets/sets whether the rows panel is expanded * Get * ```typescript * const rowsPanelState: boolean = this.dataSelector.rowsExpanded; * ``` * Set * ```html * * ``` * * Two-way data binding: * ```html * * ``` */ rowsExpanded: boolean; /** * Emitted when the rows panel is expanded or collapsed. * * @example * ```html * * ``` */ rowsExpandedChange: EventEmitter; /** * Gets/sets whether the filters panel is expanded * Get * ```typescript * const filtersPanelState: boolean = this.dataSelector.filtersExpanded; * ``` * Set * ```html * * ``` * * Two-way data binding: * ```html * * ``` */ filtersExpanded: boolean; /** * Emitted when the filters panel is expanded or collapsed. * * @example * ```html * * ``` */ filtersExpandedChange: EventEmitter; /** * Gets/sets whether the values panel is expanded * Get * ```typescript * const valuesPanelState: boolean = this.dataSelector.valuesExpanded; * ``` * Set * ```html * * ``` * * Two-way data binding: * ```html * * ``` */ valuesExpanded: boolean; /** * Emitted when the values panel is expanded or collapsed. * * @example * ```html * * ``` */ valuesExpandedChange: EventEmitter; private _grid; private _dropDelta; /** @hidden @internal **/ cssClass: string; protected get size(): Size$1; /** @hidden @internal **/ dimensions: IPivotDimension[]; private _subMenuPositionSettings; private _subMenuOverlaySettings; animationSettings: { closeAnimation: _angular_animations.AnimationAnimateRefMetadata; openAnimation: _angular_animations.AnimationAnimateRefMetadata; }; /** @hidden @internal */ aggregateList: IPivotAggregator[]; /** @hidden @internal */ value: IPivotValue; /** @hidden @internal */ ghostText: string; /** @hidden @internal */ ghostWidth: number; /** @hidden @internal */ dropAllowed: boolean; /** @hidden @internal */ get dims(): IPivotDimension[]; /** @hidden @internal */ get values(): IPivotValue[]; constructor(renderer: Renderer2, cdr: ChangeDetectorRef); /** * @hidden @internal */ _panels: IDataSelectorPanel[]; /** * Sets the grid. */ set grid(value: PivotGridType); /** * Returns the grid. */ get grid(): PivotGridType; /** * @hidden * @internal */ onItemSort(_: Event, dimension: IPivotDimension, dimensionType: PivotDimensionType): void; /** * @hidden * @internal */ onFilteringIconPointerDown(event: PointerEvent): void; /** * @hidden * @internal */ onFilteringIconClick(event: MouseEvent, dimension: IPivotDimension): void; /** * @hidden * @internal */ protected getDimensionState(dimensionType: PivotDimensionType): IPivotDimension[]; /** * @hidden * @internal */ protected moveValueItem(itemId: string): void; /** * @hidden * @internal */ onItemDropped(event: IDropDroppedEventArgs, dimensionType: PivotDimensionType): void; /** * @hidden * @internal */ protected updateDropDown(value: IPivotValue, dropdown: IgxDropDownComponent): void; /** * @hidden * @internal */ onSummaryClick(event: MouseEvent, value: IPivotValue, dropdown: IgxDropDownComponent): void; /** * @hidden * @internal */ onAggregationChange(event: ISelectionEventArgs): void; /** * @hidden * @internal */ isSelected(val: IPivotAggregator): boolean; /** * @hidden * @internal */ ghostCreated(event: IDragGhostBaseEventArgs, value: string): void; /** * @hidden * @internal */ toggleItem(item: IPivotDimension | IPivotValue): void; /** * @hidden * @internal */ onPanelEntry(event: IDropBaseEventArgs, panel: string): void; /** * @hidden * @internal */ onItemDragMove(event: IDragMoveEventArgs): void; /** * @hidden * @internal */ onItemDragEnd(event: IDragBaseEventArgs): void; /** * @hidden * @internal */ onItemDragOver(event: IDropBaseEventArgs): void; /** * @hidden * @internal */ onItemDragLeave(event: IDropBaseEventArgs): void; /** * @hidden * @internal */ getPanelCollapsed(panelType: PivotDimensionType): boolean; /** * @hidden * @internal */ onCollapseChange(value: boolean, panelType: PivotDimensionType): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; static ngAcceptInputType_columnsExpanded: unknown; static ngAcceptInputType_rowsExpanded: unknown; static ngAcceptInputType_filtersExpanded: unknown; static ngAcceptInputType_valuesExpanded: unknown; } /** * @hidden * @internal */ declare class IgxPivotColumnResizingService extends IgxColumnResizingService { /** * @hidden */ rowHeaderGroup: PivotRowHeaderGroupType; /** * @hidden */ getColumnHeaderRenderedWidth(): any; protected _handlePixelResize(diff: number, column: ColumnType): void; protected _handlePercentageResize(): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵprov: i0.ɵɵInjectableDeclaration; } /** * @hidden */ declare class IgxPivotRowDimensionHeaderComponent extends IgxGridHeaderComponent implements AfterViewInit { colResizingService: IgxPivotColumnResizingService; refInstance: ElementRef; private pivotGrid; constructor(grid: GridType, colResizingService: IgxPivotColumnResizingService, cdr: ChangeDetectorRef, refInstance: ElementRef); ngAfterViewInit(): void; onClick(event: MouseEvent): void; /** * @hidden @internal */ get selectable(): boolean; /** * @hidden @internal */ onSortingIconClick(event: any): void; protected getSortDirection(): void; protected setSortIndex(): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @hidden */ declare class IgxPivotRowDimensionHeaderGroupComponent extends IgxGridHeaderGroupComponent implements PivotRowHeaderGroupType { private cdRef; grid: PivotGridType; private elementRef; colResizingService: IgxPivotColumnResizingService; protected zone: NgZone; /** * @hidden */ userSelect: string; constructor(cdRef: ChangeDetectorRef, grid: PivotGridType, elementRef: ElementRef, colResizingService: IgxPivotColumnResizingService, filteringService: IgxFilteringService, platform: PlatformUtil, zone: NgZone); /** * @hidden * @internal */ rowIndex: number; /** * @hidden * @internal */ colIndex: number; /** * @hidden * @internal */ layout: IMultiRowLayoutNode; /** * @hidden * @internal */ parent: any; header: IgxPivotRowDimensionHeaderComponent; get headerID(): string; get title(): string; /** * @hidden @internal */ onClick(event: MouseEvent): void; /** * @hidden * @internal */ get visibleIndex(): number; get active(): boolean; protected get activeNode(): { row: number; column: number; level: any; mchCache: any; layout: IMultiRowLayoutNode; }; private findRootDimension; activate(): void; /** * @hidden @internal */ pointerdown(_event: PointerEvent): void; /** * @hidden @internal */ onMouseDown(_event: MouseEvent): void; get selectable(): boolean; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * * For all intents & purposes treat this component as what a
usually is in the default
element. * * This container holds the pivot grid header elements and their behavior/interactions. * * @hidden @internal */ declare class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent implements OnChanges { grid: PivotGridType; protected renderer: Renderer2; aggregateList: IPivotAggregator[]; value: IPivotValue; filterDropdownDimensions: Set; filterAreaDimensions: Set; private _dropPos; private _subMenuPositionSettings; private _subMenuOverlaySettings; /** * @hidden @internal */ esf: any; /** * @hidden @internal */ filterArea: any; /** * @hidden @internal */ filtersButton: any; /** * @hidden @internal */ dropdownChips: any; /** * @hidden @internal */ pivotFilterContainer: any; /** * @hidden @internal */ pivotRowContainer: any; /** * @hidden * @internal */ notificationChips: QueryList; /** * @hidden * @internal * The virtualized part of the header row containing the unpinned header groups. */ headerContainers: QueryList>; /** * @hidden * @internal */ rowDimensionHeaders: QueryList; get headerForOf(): IgxGridForOfDirective; constructor(grid: PivotGridType, ref: ElementRef, cdr: ChangeDetectorRef, renderer: Renderer2); /** * @hidden * @internal * Default is a single empty level since default depth is 1 */ columnDimensionsByLevel: any[]; /** * @hidden @internal */ get isFiltersButton(): boolean; /** * @hidden * @internal */ get totalDepth(): number; /** * @hidden * @internal */ get maxContainerHeight(): number; /** * @hidden * @internal */ calcHeight(col: ColumnType, index: number): number; /** * @hidden * @internal */ isDuplicateOfExistingParent(col: ColumnType, lvl: number): boolean; /** * @hidden * @internal */ isMultiRow(col: ColumnType, lvl: number): boolean; /** * @hidden * @internal */ populateColumnDimensionsByLevel(): void; protected populateDimensionRecursively(currentLevelColumns: ColumnType[], level: number, res: any[]): void; /** * @hidden * @internal */ ngOnChanges(changes: SimpleChanges): void; /** * @hidden * @internal */ onDimDragStart(event: any, area: any): void; /** * @hidden * @internal */ onDimDragEnd(): void; /** * @hidden * @internal */ getAreaHeight(area: IgxChipsAreaComponent): number; /** * @hidden * @internal */ rowRemoved(event: IBaseChipEventArgs): void; /** * @hidden * @internal */ columnRemoved(event: IBaseChipEventArgs): void; /** * @hidden * @internal */ valueRemoved(event: IBaseChipEventArgs): void; /** * @hidden * @internal */ filterRemoved(event: IBaseChipEventArgs): void; onFiltersSelectionChanged(event?: IBaseChipEventArgs): void; /** * @hidden * @internal */ onFilteringIconPointerDown(event: any): void; /** * @hidden * @internal */ onFilteringIconClick(event: any, dimension: any): void; /** * @hidden * @internal */ onSummaryClick(eventArgs: any, value: IPivotValue, dropdown: IgxDropDownComponent, chip: IgxChipComponent): void; /** * @hidden @internal */ onFiltersAreaDropdownClick(event: any, dimension?: any, shouldReattach?: boolean): void; /** * @hidden * @internal */ onAggregationChange(event: ISelectionEventArgs): void; /** * @hidden * @internal */ isSelected(val: IPivotAggregator): boolean; /** * @hidden * @internal */ onChipSort(_event: any, dimension: IPivotDimension): void; /** * @hidden * @internal */ onDimDragOver(event: any, dimension?: PivotDimensionType): void; /** * @hidden * @internal */ onDimDragLeave(event: any): void; /** * @hidden * @internal */ onAreaDragLeave(event: any, area: any): void; /** * @hidden * @internal */ onValueDrop(event: any, area: any): void; /** * @hidden * @internal */ onDimDrop(event: any, area: any, dimensionType: PivotDimensionType): void; protected updateDropDown(value: IPivotValue, dropdown: IgxDropDownComponent, chip: IgxChipComponent): void; protected getRowDimensionColumn(dim: IPivotDimension): ColumnType; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } declare class IgxPivotGridNavigationService extends IgxGridNavigationService { grid: IgxPivotGridComponent; isRowHeaderActive: boolean; isRowDimensionHeaderActive: boolean; get lastRowDimensionsIndex(): number; get lastRowDimensionMRLRowIndex(): number; focusOutRowHeader(): void; handleNavigation(event: KeyboardEvent): Promise; handleAlt(key: string, event: KeyboardEvent): void; updateActiveNodeLayout(): void; /** Update active cell when toggling row expand when horizontal summaries have position set to top */ onRowToggle(newExpandState: boolean, dimension: IPivotDimension, rowData: IPivotGridRecord, prevCellLayout: IMultiRowLayoutNode): void; headerNavigation(event: KeyboardEvent): Promise; focusTbody(event: any): void; getNextVerticalPosition(previous: any, ctrl: any, homeEnd: any): Promise<{ row: number; column: number; layout: IMultiRowLayoutNode; }>; getNextHorizontalPosition(previous: any, ctrl: any): Promise<{ row: number; column: number; layout: IMultiRowLayoutNode; }>; private scrollToNextHorizontalDimRow; private getNextVerticalColumnIndex; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵprov: i0.ɵɵInjectableDeclaration; } /** * @hidden */ declare class GridBaseAPIService implements GridServiceType { crudService: IgxGridCRUDService; cms: IgxColumnMovingService; grid: T; protected destroyMap: Map>; constructor(crudService: IgxGridCRUDService, cms: IgxColumnMovingService); get_column_by_name(name: string): ColumnType; get_summary_data(): any[]; /** * @hidden * @internal */ getRowData(rowID: any): any; get_row_index_in_data(rowID: any, dataCollection?: any[]): number; get_row_by_key(rowSelector: any): RowType; get_row_by_index(rowIndex: number): RowType; /** * Gets the rowID of the record at the specified data view index * * @param index * @param dataCollection */ get_rec_id_by_index(index: number, dataCollection?: any[]): any; get_cell_by_key(rowSelector: any, field: string): CellType; get_cell_by_index(rowIndex: number, columnID: number | string): CellType; get_cell_by_visible_index(rowIndex: number, columnIndex: number): CellType; update_cell(cell: IgxCell): IGridEditEventArgs; update_row(row: IgxEditRow, value: any, event?: Event): IGridEditEventArgs; sort(expression: ISortingExpression): void; sort_decoupled(expression: IGroupingExpression): void; sort_multiple(expressions: ISortingExpression[]): void; sort_groupBy_multiple(expressions: ISortingExpression[]): void; clear_sort(fieldName: string): void; clear_groupby(_name?: string | Array): void; should_apply_number_style(column: ColumnType): boolean; get_data(): any[]; get_all_data(includeTransactions?: boolean): any[]; get_filtered_data(): any[]; addRowToData(rowData: any, _parentID?: any): void; deleteRowFromData(rowID: any, index: number): void; deleteRowById(rowId: any): any; get_row_id(rowData: any): any; row_deleted_transaction(rowID: any): boolean; get_row_expansion_state(record: any): boolean; set_row_expansion_state(rowID: any, expanded: boolean, event?: Event): void; get_rec_by_id(rowID: any): any; /** * Returns the index of the record in the data view by pk or -1 if not found or primaryKey is not set. * * @param pk * @param dataCollection */ get_rec_index_by_id(pk: string | number, dataCollection?: any[]): number; allow_expansion_state_change(rowID: any, expanded: any): boolean; prepare_sorting_expression(stateCollections: Array>, expression: ISortingExpression): void; prepare_grouping_expression(stateCollections: Array>, expression: IGroupingExpression): void; remove_grouping_expression(_fieldName: any): void; filterDataByExpressions(expressionsTree: IFilteringExpressionsTree): any[]; sortDataByExpressions(data: any[], expressions: ISortingExpression[]): any[]; pin_row(rowID: any, index?: number, row?: RowType): void; unpin_row(rowID: any, row: RowType): void; get_pin_row_event_args(rowID: any, index?: number, row?: RowType, pinned?: boolean): IPinRowEventArgs; /** * Updates related row of provided grid's data source with provided new row value * * @param grid Grid to update data for * @param rowID ID of the row to update * @param rowValueInDataSource Initial value of the row as it is in data source * @param rowCurrentValue Current value of the row as it is with applied previous transactions * @param rowNewValue New value of the row */ protected updateData(grid: any, rowID: any, rowValueInDataSource: any, rowCurrentValue: any, rowNewValue: { [x: string]: any; }): void; protected update_row_in_array(value: any, rowID: any, index: number): void; protected getSortStrategyPerColumn(fieldName: string): igniteui_angular.ISortingStrategy; static ɵfac: i0.ɵɵFactoryDeclaration, never>; static ɵprov: i0.ɵɵInjectableDeclaration>; } /** * * For all intents & purposes treat this component as what a usually is in the default
element. * * This container holds the pivot grid header elements and their behavior/interactions. * * @hidden @internal */ declare class IgxPivotRowDimensionContentComponent extends IgxGridHeaderRowComponent implements OnChanges { grid: PivotGridType; protected injector: Injector; protected envInjector: EnvironmentInjector; protected viewRef: ViewContainerRef; get rowStart(): string; get rowsEnd(): string; get colStart(): string; get colEnd(): string; /** * @hidden * @internal */ rowIndex: number; /** * @hidden * @internal */ colIndex: number; layout: IMultiRowLayoutNode; dimension: IPivotDimension; rootDimension: IPivotDimension; rowData: IPivotGridGroupRecord; /** * @hidden @internal */ headerTemplate: TemplateRef; /** * @hidden @internal */ headerTemplateDefault: TemplateRef; headerGroups: QueryList; constructor(grid: PivotGridType, ref: ElementRef, injector: Injector, envInjector: EnvironmentInjector, cdr: ChangeDetectorRef, viewRef: ViewContainerRef); /** * @hidden @internal */ rowDimensionData: IPivotDimensionData; get rowDimensionColumn(): igniteui_angular.ColumnType; /** * @hidden * @internal */ ngOnChanges(changes: SimpleChanges): void; /** * @hidden * @internal */ toggleRowDimension(event: any): void; /** * @hidden * @internal */ getRowDimensionKey(): string; getExpandState(): boolean; getLevel(): number; protected getHeaderWidthFromDimension(): string | number; protected extractFromDimensions(): void; protected extractFromDimension(dim: IPivotDimension, rowData: IPivotGridGroupRecord): IgxColumnComponent; protected _createColComponent(field: string, header: string, dim: IPivotDimension): IgxColumnComponent; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } declare class IgxPivotGridColumnResizerComponent extends IgxGridColumnResizerComponent { colResizingService: IgxPivotColumnResizingService; constructor(colResizingService: IgxPivotColumnResizingService); static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @hidden */ declare class IgxPivotValueChipTemplateDirective { template: TemplateRef; constructor(template: TemplateRef); static ngTemplateContextGuard(_directive: IgxPivotValueChipTemplateDirective, context: unknown): context is IgxPivotGridValueTemplateContext; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * @hidden */ declare class IgxPivotRowDimensionHeaderTemplateDirective { template: TemplateRef; constructor(template: TemplateRef); static ngTemplateContextGuard(_directive: IgxPivotRowDimensionHeaderTemplateDirective, context: unknown): context is IgxColumnTemplateContext; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * @hidden */ declare class IgxPivotRowHeaderGroupComponent extends IgxGridHeaderGroupComponent implements PivotRowHeaderGroupType { private cdRef; grid: PivotGridType; private elementRef; colResizingService: IgxPivotColumnResizingService; protected zone: NgZone; /** * @hidden */ userSelect: string; constructor(cdRef: ChangeDetectorRef, grid: PivotGridType, elementRef: ElementRef, colResizingService: IgxPivotColumnResizingService, filteringService: IgxFilteringService, platform: PlatformUtil, zone: NgZone); /** * @hidden * @internal */ rowIndex: number; set dimWidth(value: number); get dimWidth(): number; get parent(): this; rootDimension: IPivotDimension; header: IgxPivotRowDimensionHeaderComponent; get headerID(): string; get title(): string; /** * @hidden * @internal */ get visibleIndex(): number; get active(): boolean; get sortAscendingStyle(): boolean; get sortDescendingStyle(): boolean; get sortableStyle(): boolean; get sortedStyle(): boolean; protected get activeNode(): { row: number; column: number; level: any; mchCache: { level: number; visibleIndex: number; }; layout: any; }; activate(): void; /** * @hidden @internal */ pointerdown(_event: PointerEvent): void; /** * @hidden @internal */ onMouseDown(_event: MouseEvent): void; get selectable(): boolean; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * * For all intents & purposes treat this component as what a usually is in the default
element. * * This container holds the pivot grid header elements and their behavior/interactions. * * @hidden @internal */ declare class IgxPivotRowDimensionMrlRowComponent extends IgxGridHeaderRowComponent { grid: PivotGridType; protected injector: Injector; protected envInjector: EnvironmentInjector; protected viewRef: ViewContainerRef; pivotDim: boolean; mrlBlock: boolean; get rowsTemplate(): string; get colsTemplate(): string; /** * @hidden @internal */ rowIndex: number; /** * @hidden @internal */ rowGroup: IPivotGridRecord[]; /** * @hidden @internal */ groupedData: IPivotGridRecord[][]; /** * @hidden @internal */ contentCells: QueryList; constructor(grid: PivotGridType, ref: ElementRef, injector: Injector, envInjector: EnvironmentInjector, cdr: ChangeDetectorRef, viewRef: ViewContainerRef); /** * @hidden @internal */ rowDimensionData: IPivotDimensionData; protected getRowMRLTemplate(forRows: boolean, rows: IPivotGridRecord[]): string; rowDimensionWidthCombined(dims: IPivotDimension[]): number; protected getGroupKey(group: IPivotGridHorizontalGroup): string; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * Pivot Grid provides a way to present and manipulate data in a pivot table view. * * @igxModule IgxPivotGridModule * @igxGroup Grids & Lists * @igxKeywords pivot, grid, table * @igxTheme igx-grid-theme * @remarks * The Ignite UI Pivot Grid is used for grouping and aggregating simple flat data into a pivot table. Once data * has been bound and the dimensions and values configured it can be manipulated via sorting and filtering. * @example * ```html * * * ``` */ declare class IgxPivotGridComponent extends IgxGridBaseDirective implements OnInit, AfterContentInit, GridType, AfterViewInit, OnChanges { navigation: IgxPivotGridNavigationService; /** * Emitted when the dimension collection is changed via the grid chip area. * * @remarks * Returns the new dimension collection and its type: * @example * ```html * * ``` */ dimensionsChange: EventEmitter; /** * Emitted when any of the pivotConfiguration properties is changed via the grid chip area. * * @example * ```html * * ``` */ pivotConfigurationChange: EventEmitter; /** * Emitted when the dimension is initialized. * @remarks * Emits the dimension that is about to be initialized. * @example * ```html * * ``` */ dimensionInit: EventEmitter; /** * Emitted when the value is initialized. * @remarks * Emits the value that is about to be initialized. * @example * ```html * * ``` */ valueInit: EventEmitter; /** * Emitted when a dimension is sorted. * * @example * ```html * * ``` */ dimensionsSortingExpressionsChange: EventEmitter[]>; /** * Emitted when the values collection is changed via the grid chip area. * * @remarks * Returns the new dimension * @example * ```html * * ``` */ valuesChange: EventEmitter; /** * Gets the sorting expressions generated for the dimensions. * * @example * ```typescript * const expressions = this.grid.dimensionsSortingExpressions; * ``` */ get dimensionsSortingExpressions(): ISortingExpression[]; /** @hidden @internal */ theadRow: IgxPivotHeaderRowComponent; /** * @hidden @internal */ protected valueChipTemplateDirective: IgxPivotValueChipTemplateDirective; /** * @hidden @internal */ protected rowDimensionHeaderDirective: IgxPivotRowDimensionHeaderTemplateDirective; /** * Gets/Sets a custom template for the value chips. * * @example * ```html * * ``` */ valueChipTemplate: TemplateRef; rowDimensionHeaderTemplate: TemplateRef; /** * Gets/Sets the pivot configuration with all related dimensions and values. * * @example * ```html * * ``` */ set pivotConfiguration(value: IPivotConfiguration); get pivotConfiguration(): IPivotConfiguration; /** * Gets/Sets whether to auto-generate the pivot configuration based on the provided data. * * @remarks * The default value is false. When set to true, it will override all dimensions and values in the pivotConfiguration. * @example * ```html * * ``` */ autoGenerateConfig: boolean; set pivotUI(value: IPivotUISettings); get pivotUI(): IPivotUISettings; /** * @hidden @internal */ role: string; /** * Enables a super compact theme for the component. * @remarks * Overrides the grid size option if one is set. * @example * ```html * * ``` */ get superCompactMode(): boolean; set superCompactMode(value: boolean); /** @hidden @internal */ get gridSize(): Size$1; /** * Gets/Sets the values clone strategy of the pivot grid when assigning them to different dimensions. * * @example * ```html * * ``` * @hidden @internal */ get pivotValueCloneStrategy(): IDataCloneStrategy; set pivotValueCloneStrategy(strategy: IDataCloneStrategy); /** * @hidden @internal */ recordTemplate: TemplateRef; /** * @hidden @internal */ headerTemplate: TemplateRef; /** * @hidden @internal */ rowDimensionContainer: QueryList>; /** * @hidden @internal */ resizeLine: IgxPivotGridColumnResizerComponent; /** * @hidden @internal */ excelStyleFilteringComponents: QueryList; /** * @hidden @internal */ protected rowDimensionContentCollection: QueryList; /** * @hidden @internal */ get minColumnWidth(): 200 | 104; /** * @hidden @internal */ verticalRowDimScrollContainers: QueryList>; /** * @hidden @internal */ rowDimensionMrlRowsCollection: QueryList; /** * @hidden @internal */ addRowEmptyTemplate: TemplateRef; /** * @hidden @internal */ autoGenerateExclude: string[]; /** * @hidden @internal */ snackbarDisplayTime: number; /** * @hidden @internal */ cellEdit: EventEmitter; /** * @hidden @internal */ cellEditDone: EventEmitter; /** * @hidden @internal */ cellEditEnter: EventEmitter; /** * @hidden @internal */ cellEditExit: EventEmitter; /** * @hidden @internal */ columnMovingStart: EventEmitter; /** * @hidden @internal */ columnMoving: EventEmitter; /** * @hidden @internal */ columnMovingEnd: EventEmitter; /** * @hidden @internal */ columnPin: EventEmitter; /** * @hidden @internal */ columnPinned: EventEmitter; /** * @hidden @internal */ rowAdd: EventEmitter; /** * @hidden @internal */ rowAdded: EventEmitter; /** * @hidden @internal */ rowDeleted: EventEmitter; /** * @hidden @internal */ rowDelete: EventEmitter; /** * @hidden @internal */ rowDragStart: EventEmitter; /** * @hidden @internal */ rowDragEnd: EventEmitter; /** * @hidden @internal */ rowEditEnter: EventEmitter; /** * @hidden @internal */ rowEdit: EventEmitter; /** * @hidden @internal */ rowEditDone: EventEmitter; /** * @hidden @internal */ rowEditExit: EventEmitter; /** * @hidden @internal */ rowPinning: EventEmitter; /** * @hidden @internal */ rowPinned: EventEmitter; /** @hidden @internal */ columnGroupStates: Map; /** @hidden @internal */ dimensionDataColumns: any[]; /** @hidden @internal */ get pivotKeys(): { aggregations: string; records: string; children: string; level: string; rowDimensionSeparator: string; columnDimensionSeparator: string; }; /** @hidden @internal */ get type(): GridType["type"]; /** * @hidden @internal */ dragRowID: any; /** * @hidden @internal */ get rootSummariesEnabled(): boolean; /** * @hidden @internal */ rowDimensionResizing: boolean; private _emptyRowDimension; /** * @hidden @internal */ get emptyRowDimension(): IPivotDimension; protected _pivotValueCloneStrategy: IDataCloneStrategy; protected _defaultExpandState: boolean; protected _filterStrategy: IFilteringStrategy; protected regroupTrigger: number; private _data; private _pivotConfiguration; private p_id; private _superCompactMode; private _pivotUI; private _sortableColumns; private _visibleRowDimensions; private _shouldUpdateSizes; /** * Gets/Sets the default expand state for all rows. */ get defaultExpandState(): boolean; set defaultExpandState(val: boolean); /** * @hidden @internal */ get pagingMode(): GridPagingMode; set pagingMode(_val: GridPagingMode); /** * @hidden @internal */ get hideRowSelectors(): boolean; set hideRowSelectors(_value: boolean); /** * @hidden @internal */ autoGenerate: boolean; /** * @hidden @internal */ get actionStrip(): any; /** * @hidden @internal * @deprecated in version 18.2.0. This property is no longer supported. */ get shouldGenerate(): boolean; set shouldGenerate(value: boolean); /** * @hidden @internal */ moving: boolean; /** * @hidden @internal */ toolbarExporting: EventEmitter; /** * @hidden @internal */ get rowDraggable(): boolean; set rowDraggable(_val: boolean); /** * @hidden @internal */ get allowAdvancedFiltering(): boolean; set allowAdvancedFiltering(_value: boolean); /** * @hidden @internal */ get filterMode(): FilterMode; set filterMode(_value: FilterMode); /** * @hidden @internal */ get allowFiltering(): boolean; set allowFiltering(_value: boolean); /** * @hidden @internal */ get page(): number; set page(_val: number); /** * @hidden @internal */ get perPage(): number; set perPage(_val: number); /** * @hidden @internal */ get pinnedColumns(): IgxColumnComponent[]; /** * @hidden @internal */ get unpinnedColumns(): IgxColumnComponent[]; /** * @hidden @internal */ get unpinnedDataView(): any[]; /** * @hidden @internal */ get unpinnedWidth(): number; /** * @hidden @internal */ get pinnedWidth(): number; /** * @hidden @internal */ set summaryRowHeight(_value: number); get summaryRowHeight(): number; /** * @hidden @internal */ get transactions(): TransactionService; /** * @hidden @internal */ get dragIndicatorIconTemplate(): TemplateRef; set dragIndicatorIconTemplate(_val: TemplateRef); /** * @hidden @internal */ get rowEditable(): boolean; set rowEditable(_val: boolean); /** * @hidden @internal */ get pinning(): {}; set pinning(_value: {}); /** * @hidden @internal */ get summaryPosition(): GridSummaryPosition; set summaryPosition(_value: GridSummaryPosition); /** * @hidden @interal */ get summaryCalculationMode(): GridSummaryCalculationMode; set summaryCalculationMode(_value: GridSummaryCalculationMode); /** * @hidden @interal */ get showSummaryOnCollapse(): boolean; set showSummaryOnCollapse(_value: boolean); /** * @hidden @internal */ get hiddenColumnsCount(): any; /** * @hidden @internal */ get pinnedColumnsCount(): any; /** * @hidden @internal */ get batchEditing(): boolean; set batchEditing(_val: boolean); get selectedRows(): any[]; constructor(validationService: IgxGridValidationService, selectionService: IgxGridSelectionService, colResizingService: IgxPivotColumnResizingService, gridAPI: GridBaseAPIService, transactionFactory: IgxFlatTransactionFactory, elementRef: ElementRef, zone: NgZone, document: any, cdr: ChangeDetectorRef, differs: IterableDiffers, viewRef: ViewContainerRef, injector: Injector, envInjector: EnvironmentInjector, navigation: IgxPivotGridNavigationService, filteringService: IgxFilteringService, textHighlightService: IgxTextHighlightService, overlayService: IgxOverlayService, summaryService: IgxGridSummaryService, localeId: string, platform: PlatformUtil, _diTransactions?: TransactionService); /** * @hidden */ ngOnInit(): void; /** * @hidden */ ngAfterContentInit(): void; /** * @hidden @internal */ ngAfterViewInit(): void; /** * @hidden @internal */ ngOnChanges(changes: SimpleChanges): void; /** * Notifies for dimension change. */ notifyDimensionChange(regenerateColumns?: boolean): void; /** * Gets the full list of dimensions. * * @example * ```typescript * const dimensions = this.grid.allDimensions; * ``` */ get allDimensions(): IPivotDimension[]; protected get allVisibleDimensions(): IPivotDimension[]; protected get shouldResize(): boolean; protected get emptyBottomSize(): number; /** @hidden @internal */ createFilterESF(dropdown: any, column: ColumnType, options: OverlaySettings, shouldReatach: boolean): { id: any; ref: any; }; /** @hidden */ featureColumnsWidth(): number; /** * Gets/Sets the value of the `id` attribute. * * @remarks * If not provided it will be automatically generated. * @example * ```html * * ``` */ get id(): string; set id(value: string); /** * Gets/Sets the array of data that populates the component. * ```html * * ``` */ set data(value: any[] | null); /** * Returns an array of data set to the component. * ```typescript * let data = this.grid.data; * ``` */ get data(): any[] | null; /** * @hidden */ getContext(rowData: any, rowIndex: any): any; /** * @hidden @internal */ get pivotRowWidths(): number; /** * @hidden @internal */ rowDimensionWidth(dim: any): string; /** * @hidden @internal */ rowDimensionWidthToPixels(dim: IPivotDimension): number; /** * @hidden @internal */ reverseDimensionWidthToPercent(width: number): number; /** @hidden @internal */ get pivotContentCalcWidth(): number; /** @hidden @internal */ get pivotPinnedWidth(): number; /** @hidden @internal */ get pivotUnpinnedWidth(): number; /** @hidden @internal */ get rowDimensions(): IPivotDimension[]; /** @hidden @internal */ set visibleRowDimensions(value: IPivotDimension[]); get visibleRowDimensions(): IPivotDimension[]; /** @hidden @internal */ get columnDimensions(): IPivotDimension[]; /** @hidden @internal */ get filterDimensions(): IPivotDimension[]; /** @hidden @internal */ get values(): IPivotValue[]; toggleColumn(col: IgxColumnComponent): void; /** * @hidden @internal */ isRecordPinnedByIndex(_rowIndex: number): any; /** * @hidden @internal */ toggleColumnVisibility(_args: IColumnVisibilityChangedEventArgs): void; /** * @hidden @internal */ expandAll(): void; /** * @hidden @internal */ collapseAll(): void; /** * @hidden @internal */ expandRow(_rowID: any): void; /** * @hidden @internal */ collapseRow(_rowID: any): void; /** * @hidden @internal */ get pinnedRows(): IgxGridRowComponent[]; /** * @hidden @internal */ get totalRecords(): number; set totalRecords(_total: number); /** * @hidden @internal */ moveColumn(_column: IgxColumnComponent, _target: IgxColumnComponent, _pos?: DropPosition): void; /** * @hidden @internal */ addRow(_data: any): void; /** * @hidden @internal */ deleteRow(_rowSelector: any): any; /** * @hidden @internal */ updateCell(_value: any, _rowSelector: any, _column: string): void; /** * @hidden @internal */ updateRow(_value: any, _rowSelector: any): void; /** * @hidden @internal */ enableSummaries(..._rest: any[]): void; /** * @hidden @internal */ disableSummaries(..._rest: any[]): void; /** * @hidden @internal */ pinColumn(_columnName: string | IgxColumnComponent, _index?: any): boolean; /** * @hidden @internal */ unpinColumn(_columnName: string | IgxColumnComponent, _index?: any): boolean; /** * @hidden @internal */ pinRow(_rowID: any, _index?: number, _row?: RowType): boolean; /** * @hidden @internal */ unpinRow(_rowID: any, _row?: RowType): boolean; /** * @hidden @internal */ get pinnedRowHeight(): void; /** * @hidden @internal */ get hasEditableColumns(): boolean; /** * @hidden @internal */ get hasSummarizedColumns(): boolean; /** * @hidden @internal */ get hasMovableColumns(): boolean; /** * @hidden @internal */ get pinnedDataView(): any[]; /** * @hidden @internal */ openAdvancedFilteringDialog(_overlaySettings?: OverlaySettings): void; /** * @hidden @internal */ closeAdvancedFilteringDialog(_applyChanges: boolean): void; /** * @hidden @internal */ endEdit(_commit?: boolean, _event?: Event): boolean; /** * @hidden @internal */ beginAddRowById(_rowID: any, _asChild?: boolean): void; /** * @hidden @internal */ beginAddRowByIndex(_index: number): void; /** * @hidden @internal */ clearSearch(): void; /** * @hidden @internal */ refreshSearch(_updateActiveInfo?: boolean, _endEdit?: boolean): number; /** * @hidden @internal */ findNext(_text: string, _caseSensitive?: boolean, _exactMatch?: boolean): number; /** * @hidden @internal */ findPrev(_text: string, _caseSensitive?: boolean, _exactMatch?: boolean): number; /** * @hidden @internal */ getNextCell(currRowIndex: number, curVisibleColIndex: number, callback?: (IgxColumnComponent: any) => boolean): ICellPosition; /** * @hidden @internal */ getPreviousCell(currRowIndex: number, curVisibleColIndex: number, callback?: (IgxColumnComponent: any) => boolean): ICellPosition; /** * @hidden @internal */ getPinnedWidth(takeHidden?: boolean): number; /** * @hidden @internal */ get totalHeight(): number; getColumnGroupExpandState(col: IgxColumnComponent): boolean; toggleRowGroup(col: IgxColumnComponent, newState: boolean): void; /** * @hidden @internal */ setupColumns(): void; /** * @hidden @internal */ dataRebinding(event: IForOfDataChangingEventArgs): void; /** * Auto-sizes row dimension cells. * * @remarks * Only sizes based on the dimension cells in view. * @example * ```typescript * this.grid.autoSizeRowDimension(dimension); * ``` * @param dimension The row dimension to size. */ autoSizeRowDimension(dimension: IPivotDimension): void; /** * Inserts dimension in target collection by type at specified index or at the collection's end. * * @example * ```typescript * this.grid.insertDimensionAt(dimension, PivotDimensionType.Row, 1); * ``` * @param dimension The dimension that will be added. * @param targetCollectionType The target collection type to add to. Can be Row, Column or Filter. * @param index The index in the collection at which to add. * This parameter is optional. If not set it will add it to the end of the collection. */ insertDimensionAt(dimension: IPivotDimension, targetCollectionType: PivotDimensionType, index?: number): void; /** * Move dimension from its currently collection to the specified target collection by type at specified index or at the collection's end. * * @example * ```typescript * this.grid.moveDimension(dimension, PivotDimensionType.Row, 1); * ``` * @param dimension The dimension that will be moved. * @param targetCollectionType The target collection type to move it to. Can be Row, Column or Filter. * @param index The index in the collection at which to add. * This parameter is optional. If not set it will add it to the end of the collection. */ moveDimension(dimension: IPivotDimension, targetCollectionType: PivotDimensionType, index?: number): void; /** * Removes dimension from its currently collection. * @remarks * This is different than toggleDimension that enabled/disables the dimension. * This completely removes the specified dimension from the collection. * @example * ```typescript * this.grid.removeDimension(dimension); * ``` * @param dimension The dimension to be removed. */ removeDimension(dimension: IPivotDimension): void; /** * Toggles the dimension's enabled state on or off. * @remarks * The dimension remains in its current collection. This just changes its enabled state. * @example * ```typescript * this.grid.toggleDimension(dimension); * ``` * @param dimension The dimension to be toggled. */ toggleDimension(dimension: IPivotDimension): void; /** * Inserts value at specified index or at the end. * * @example * ```typescript * this.grid.insertValueAt(value, 1); * ``` * @param value The value definition that will be added. * @param index The index in the collection at which to add. * This parameter is optional. If not set it will add it to the end of the collection. */ insertValueAt(value: IPivotValue, index?: number): void; /** * Move value from its currently at specified index or at the end. * * @example * ```typescript * this.grid.moveValue(value, 1); * ``` * @param value The value that will be moved. * @param index The index in the collection at which to add. * This parameter is optional. If not set it will add it to the end of the collection. */ moveValue(value: IPivotValue, index?: number): void; /** * Removes value from collection. * @remarks * This is different than toggleValue that enabled/disables the value. * This completely removes the specified value from the collection. * @example * ```typescript * this.grid.removeValue(dimension); * ``` * @param value The value to be removed. */ removeValue(value: IPivotValue): void; /** * Toggles the value's enabled state on or off. * @remarks * The value remains in its current collection. This just changes its enabled state. * @example * ```typescript * this.grid.toggleValue(value); * ``` * @param value The value to be toggled. */ toggleValue(value: IPivotValue): void; /** * Sort the dimension and its children in the provided direction. * @example * ```typescript * this.grid.sortDimension(dimension, SortingDirection.Asc); * ``` * @param value The value to be toggled. */ sortDimension(dimension: IPivotDimension, sortDirection: SortingDirection): void; /** * Filters a single `IPivotDimension`. * * @example * ```typescript * public filter() { * const set = new Set(); * set.add('Value 1'); * set.add('Value 2'); * this.grid1.filterDimension(this.pivotConfigHierarchy.rows[0], set, IgxStringFilteringOperand.instance().condition('in')); * } * ``` */ filterDimension(dimension: IPivotDimension, value: any, conditionOrExpressionTree?: IFilteringOperation | IFilteringExpressionsTree): void; /** * @hidden @internal */ getRowDimensionByName(memberName: string): any; /** * @hidden @internal */ getDimensionsByType(dimension: PivotDimensionType): IPivotDimension[]; /** * @hidden @internal */ resizeRowDimensionPixels(dimension: IPivotDimension, newWidth: number): void; protected _removeDimensionInternal(dimension: any): void; protected getDimensionType(dimension: IPivotDimension): PivotDimensionType; protected getPivotRowHeaderContentWidth(headerGroup: IgxPivotRowHeaderGroupComponent): number; protected getLargesContentWidth(contents: ElementRef[]): string; /** @hidden @internal */ get hasHorizontalLayout(): boolean; /** * @hidden */ get hasMultipleValues(): boolean; /** * @hidden */ get excelStyleFilterMaxHeight(): string; /** * @hidden */ get excelStyleFilterMinHeight(): string; /** @hidden @internal */ get activeDescendant(): string; protected resolveToggle(groupColumn: IgxColumnComponent, state: boolean): void; protected buildDataView(data: any[]): void; /** * @hidden @internal */ protected getDataBasedBodyHeight(): number; protected horizontalScrollHandler(event: any): void; protected verticalScrollHandler(event: any): void; /** * @hidden */ protected autogenerateColumns(): void; protected generateDimensionColumns(): IgxColumnComponent[]; protected calculateGridSizes(recalcFeatureWidth?: boolean): void; protected getContentCollection(dimenstion: IPivotDimension): any; protected autoSizeDimensionsInView(): void; /** @hidden @internal */ get hasDimensionsToAutosize(): boolean; protected generateFromData(fields: string[]): Map; protected generateColumnHierarchy(fields: Map, data: any, parent?: any): IgxColumnComponent[]; protected generateConfig(): void; protected createColumnForDimension(value: any, data: any, parent: ColumnType, isGroup: boolean): IgxColumnGroupComponent; protected resolveColumnDimensionWidth(dim: IPivotDimension): string; protected getMeasureChildren(data: any, parent: any, hidden: any, parentWidth: any): any[]; /** * @hidden @internal */ defaultEmptyPivotGridTemplate: TemplateRef; /** * Gets/Sets a custom template when pivot grid is empty. * * @example * ```html * * ``` */ emptyPivotGridTemplate: TemplateRef; /** * @hidden @internal */ get template(): TemplateRef; private emitInitEvents; protected rowDimensionByName(memberName: string): IPivotDimension; protected calculateResizerTop(): any; protected updateDefaultRowHeight(): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; static ngAcceptInputType_autoGenerateConfig: unknown; static ngAcceptInputType_defaultExpandState: unknown; static ngAcceptInputType_hideRowSelectors: unknown; static ngAcceptInputType_rowDraggable: unknown; static ngAcceptInputType_allowAdvancedFiltering: unknown; static ngAcceptInputType_allowFiltering: unknown; static ngAcceptInputType_rowEditable: unknown; static ngAcceptInputType_showSummaryOnCollapse: unknown; static ngAcceptInputType_batchEditing: unknown; } declare class IgxPivotAggregate { /** * Gets array with default aggregator function for base aggregation. * ```typescript * IgxPivotAggregate.aggregators(); * ``` * * @memberof IgxPivotAggregate */ static aggregators(): Array; /** * Counts all the records in the data source. * If filtering is applied, counts only the filtered records. * ```typescript * IgxSummaryOperand.count(dataSource); * ``` * * @memberof IgxPivotAggregate */ static count(members: number[]): number; } declare class IgxPivotNumericAggregate extends IgxPivotAggregate { /** * Gets array with default aggregator function for numeric aggregation. * ```typescript * IgxPivotAggregate.aggregators(); * ``` * * @memberof IgxPivotAggregate */ static aggregators(): IPivotAggregator[]; /** * Returns the minimum numeric value in the provided data records. * If filtering is applied, returns the minimum value in the filtered data records. * ```typescript * IgxPivotNumericAggregate.min(members, data); * ``` * * @memberof IgxPivotNumericAggregate */ static min(members: number[]): number; /** * Returns the maximum numeric value in the provided data records. * If filtering is applied, returns the maximum value in the filtered data records. * ```typescript * IgxPivotNumericAggregate.max(data); * ``` * * @memberof IgxPivotNumericAggregate */ static max(members: number[]): number; /** * Returns the sum of the numeric values in the provided data records. * If filtering is applied, returns the sum of the numeric values in the data records. * ```typescript * IgxPivotNumericAggregate.sum(data); * ``` * * @memberof IgxPivotNumericAggregate */ static sum(members: number[]): number; /** * Returns the average numeric value in the data provided data records. * If filtering is applied, returns the average numeric value in the filtered data records. * ```typescript * IgxPivotNumericAggregate.average(data); * ``` * * @memberof IgxPivotNumericAggregate */ static average(members: number[]): number; } declare class IgxPivotDateAggregate extends IgxPivotAggregate { /** * Gets array with default aggregator function for date aggregation. * ```typescript * IgxPivotDateAggregate.aggregators(); * ``` * * @memberof IgxPivotAggregate */ static aggregators(): IPivotAggregator[]; /** * Returns the latest date value in the data records. * If filtering is applied, returns the latest date value in the filtered data records. * ```typescript * IgxPivotDateAggregate.latest(data); * ``` * * @memberof IgxPivotDateAggregate */ static latest(members: any[]): any; /** * Returns the earliest date value in the data records. * If filtering is applied, returns the latest date value in the filtered data records. * ```typescript * IgxPivotDateAggregate.earliest(data); * ``` * * @memberof IgxPivotDateAggregate */ static earliest(members: any[]): any; } declare class IgxPivotTimeAggregate extends IgxPivotAggregate { /** * Gets array with default aggregator function for time aggregation. * ```typescript * IgxPivotTimeAggregate.aggregators(); * ``` * * @memberof IgxPivotAggregate */ static aggregators(): IPivotAggregator[]; /** * Returns the latest time value in the data records. Compare only the time part of the date. * If filtering is applied, returns the latest time value in the filtered data records. * ```typescript * IgxPivotTimeAggregate.latestTime(data); * ``` * * @memberof IgxPivotTimeAggregate */ static latestTime(members: any[]): any; /** * Returns the earliest time value in the data records. Compare only the time part of the date. * If filtering is applied, returns the earliest time value in the filtered data records. * ```typescript * IgxPivotTimeAggregate.earliestTime(data); * ``` * * @memberof IgxPivotTimeAggregate */ static earliestTime(members: any[]): any; } interface IPivotDateDimensionOptions { /** Enables/Disables total value of all periods. */ total?: boolean; /** Enables/Disables dimensions per year from provided periods. */ years?: boolean; quarters?: boolean; /** Enables/Disables dimensions per month from provided periods. */ months?: boolean; /** Enabled/Disables dimensions for the full date provided */ fullDate?: boolean; } declare class IgxPivotDateDimension implements IPivotDimension { /** Enables/Disables a particular dimension from pivot structure. */ enabled: boolean; /** * Gets/Sets data type */ dataType?: GridColumnDataType; /** Default options. */ defaultOptions: { total: boolean; years: boolean; months: boolean; fullDate: boolean; }; /** * Gets/Sets the resource strings. * * @remarks * By default it uses EN resources. */ set resourceStrings(value: IGridResourceStrings); get resourceStrings(): IGridResourceStrings; /** * Gets/Sets the base dimension that is used by this class to determine the other dimensions and their values. * Having base dimension set is required in order for the Date Dimensions to show. */ get baseDimension(): IPivotDimension; set baseDimension(value: IPivotDimension); /** * Gets/Sets the options for the predefined date dimensions whether to show quarter, years and etc. */ get options(): IPivotDateDimensionOptions; set options(value: IPivotDateDimensionOptions); /** @hidden @internal */ childLevel?: IPivotDimension; /** @hidden @internal */ memberName: string; displayName: string; private _resourceStrings; private _baseDimension; private _options; private _monthIntl; /** * Creates additional pivot date dimensions based on a provided dimension describing date data: * * @param inDateDimension Base dimension that is used by this class to determine the other dimensions and their values. * @param inOptions Options for the predefined date dimensions whether to show quarter, years and etc. * @example * ```typescript * // Displays only years as parent dimension to the base dimension provided. * new IgxPivotDateDimension({ memberName: 'Date', enabled: true }, { total: false, months: false }); * ``` */ constructor(inBaseDimension?: IPivotDimension, inOptions?: IPivotDateDimensionOptions); protected initialize(inBaseDimension: any, inOptions: any): void; /** @hidden @internal */ memberFunction: (_data: any) => string; } declare class NoopPivotDimensionsStrategy implements IPivotDimensionStrategy { private static _instance; static instance(): NoopPivotDimensionsStrategy; process(collection: any[], _: IPivotDimension[], __: IPivotValue[]): any[]; } declare class PivotRowDimensionsStrategy implements IPivotDimensionStrategy { private static _instance; static instance(): PivotRowDimensionsStrategy; process(collection: any, rows: IPivotDimension[], values: IPivotValue[], cloneStrategy: IDataCloneStrategy, pivotKeys?: IPivotKeys): IPivotGridRecord[]; } declare class PivotColumnDimensionsStrategy implements IPivotDimensionStrategy { private static _instance; static instance(): PivotRowDimensionsStrategy | PivotColumnDimensionsStrategy; process(collection: IPivotGridRecord[], columns: IPivotDimension[], values: IPivotValue[], cloneStrategy: IDataCloneStrategy, pivotKeys?: IPivotKeys): any[]; private processHierarchy; private groupColumns; private applyAggregates; private getLeafs; } declare class DimensionValuesFilteringStrategy extends FilteringStrategy { private fields?; /** * Creates a new instance of FormattedValuesFilteringStrategy. * * @param fields An array of column field names that should be formatted. * If omitted the values of all columns which has formatter will be formatted. */ constructor(fields?: string[]); protected getFieldValue(rec: any, fieldName: string, _isDate?: boolean, _isTime?: boolean, grid?: PivotGridType): any; getFilterItems(column: ColumnType, tree: IFilteringExpressionsTree): Promise; private _getFilterItems; private _getDimensionValueHierarchy; } declare class DefaultPivotGridRecordSortingStrategy extends DefaultSortingStrategy { protected static _instance: DefaultPivotGridRecordSortingStrategy; static instance(): DefaultPivotGridRecordSortingStrategy; sort(data: any[], fieldName: string, dir: SortingDirection, ignoreCase: boolean, valueResolver: (obj: any, key: string, isDate?: boolean) => any, isDate?: boolean, isTime?: boolean, _grid?: PivotGridType): any[]; protected getFieldValue(obj: IPivotGridRecord, key: string, _isDate?: boolean, _isTime?: boolean): any; } declare class DefaultPivotSortingStrategy extends DefaultSortingStrategy { protected static _instance: DefaultPivotSortingStrategy; protected dimension: any; static instance(): DefaultPivotSortingStrategy; sort(data: any[], fieldName: string, dir: SortingDirection, ignoreCase: boolean, valueResolver: (obj: any, key: string, isDate?: boolean) => any, isDate?: boolean, isTime?: boolean, grid?: PivotGridType): any[]; protected getFieldValue(obj: any, key: string, _isDate?: boolean, isTime?: boolean): any; } declare const IGX_PIVOT_GRID_DIRECTIVES: readonly [typeof IgxPivotGridComponent, typeof IgxPivotDataSelectorComponent, typeof IgxPivotValueChipTemplateDirective, typeof IgxRowDirective, typeof IgxGridFooterComponent, typeof IgxAdvancedFilteringDialogComponent, typeof IgxRowExpandedIndicatorDirective, typeof IgxRowCollapsedIndicatorDirective, typeof IgxHeaderExpandedIndicatorDirective, typeof IgxHeaderCollapsedIndicatorDirective, typeof IgxExcelStyleHeaderIconDirective, typeof IgxSortAscendingHeaderIconDirective, typeof IgxSortDescendingHeaderIconDirective, typeof IgxSortHeaderIconDirective, typeof IgxDragIndicatorIconDirective, typeof IgxRowDragGhostDirective, typeof IgxGridStateDirective, typeof IgxGridHeaderComponent, typeof IgxGridHeaderGroupComponent, typeof IgxGridHeaderRowComponent, typeof IgxFilterCellTemplateDirective, typeof IgxSummaryTemplateDirective, typeof IgxCellTemplateDirective, typeof IgxCellValidationErrorDirective, typeof IgxCellHeaderTemplateDirective, typeof IgxCellFooterTemplateDirective, typeof IgxCellEditorTemplateDirective, typeof IgxCollapsibleIndicatorTemplateDirective, typeof IgxColumnComponent, typeof IgxColumnGroupComponent, typeof IgxColumnLayoutComponent, typeof IgxColumnActionsComponent, typeof IgxColumnHidingDirective, typeof IgxColumnPinningDirective, typeof IgxRowSelectorDirective, typeof IgxGroupByRowSelectorDirective, typeof IgxHeadSelectorDirective, typeof IgxCSVTextDirective, typeof IgxExcelTextDirective, typeof IgxGridToolbarActionsComponent, typeof IgxGridToolbarAdvancedFilteringComponent, typeof IgxGridToolbarComponent, typeof IgxGridToolbarExporterComponent, typeof IgxGridToolbarHidingComponent, typeof IgxGridToolbarPinningComponent, typeof IgxGridToolbarTitleComponent, typeof IgxGridToolbarDirective, typeof IgxGridExcelStyleFilteringComponent, typeof IgxExcelStyleHeaderComponent, typeof IgxExcelStyleSortingComponent, typeof IgxExcelStylePinningComponent, typeof IgxExcelStyleHidingComponent, typeof IgxExcelStyleSelectingComponent, typeof IgxExcelStyleClearFiltersComponent, typeof IgxExcelStyleConditionalFilterComponent, typeof IgxExcelStyleMovingComponent, typeof IgxExcelStyleSearchComponent, typeof IgxExcelStyleColumnOperationsTemplateDirective, typeof IgxExcelStyleFilterOperationsTemplateDirective, typeof IgxExcelStyleLoadingValuesTemplateDirective]; /** * @hidden */ declare class IgxRowLoadingIndicatorTemplateDirective { template: TemplateRef; constructor(template: TemplateRef); static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * An internal component representing the group-by drop area for the igx-grid component. * * @hidden @internal */ declare class IgxTreeGridGroupByAreaComponent extends IgxGroupByAreaDirective implements AfterContentInit, OnDestroy { private differs; get hideGroupedColumns(): boolean; set hideGroupedColumns(value: boolean); private _hideGroupedColumns; private groupingDiffer; private destroy$; constructor(differs: IterableDiffers, ref: ElementRef, platform: PlatformUtil); ngAfterContentInit(): void; ngOnDestroy(): void; handleReorder(event: IChipsAreaReorderEventArgs): void; handleMoveEnd(): void; groupBy(expression: IGroupingExpression): void; clearGrouping(name: string): void; protected expressionsChanged(): void; private updateColumnsVisibility; private setColumnsVisibility; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; static ngAcceptInputType_hideGroupedColumns: unknown; } declare class TreeGridFilteringStrategy extends BaseFilteringStrategy { hierarchicalFilterFields?: string[]; constructor(hierarchicalFilterFields?: string[]); filter(data: ITreeGridRecord[], expressionsTree: IFilteringExpressionsTree, advancedExpressionsTree?: IFilteringExpressionsTree, grid?: GridType): ITreeGridRecord[]; protected getFieldValue(rec: any, fieldName: string, isDate?: boolean, isTime?: boolean, grid?: GridType): any; private getHierarchicalFieldValue; private filterImpl; private isHierarchicalFilterField; getFilterItems(column: ColumnType, tree: IFilteringExpressionsTree): Promise; private getHierarchicalFilterItems; } declare class TreeGridFormattedValuesFilteringStrategy extends TreeGridFilteringStrategy { private fields?; /** * Creates a new instance of FormattedValuesFilteringStrategy. * * @param fields An array of column field names that should be formatted. * If omitted the values of all columns which has formatter will be formatted. */ constructor(fields?: string[]); protected shouldFormatFilterValues(column: ColumnType): boolean; } declare class TreeGridMatchingRecordsOnlyFilteringStrategy extends TreeGridFilteringStrategy { filter(data: ITreeGridRecord[], expressionsTree: IFilteringExpressionsTree, advancedExpressionsTree?: IFilteringExpressionsTree, grid?: GridType): ITreeGridRecord[]; private filterImplementation; private setCorrectLevelToFilteredRecords; } /** * **Ignite UI for Angular Tree Grid** - * [Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/grid) * * The Ignite UI Tree Grid displays and manipulates hierarchical data with consistent schema formatted as a table and * provides features such as sorting, filtering, editing, column pinning, paging, column moving and hiding. * * Example: * ```html * * * * * * ``` */ declare class IgxTreeGridComponent extends IgxGridBaseDirective implements GridType, OnInit, AfterViewInit, DoCheck, AfterContentInit { protected _diTransactions?: HierarchicalTransactionService; /** * Sets the child data key of the `IgxTreeGridComponent`. * ```html * * ``` * * @memberof IgxTreeGridComponent */ childDataKey: string; /** * Sets the foreign key of the `IgxTreeGridComponent`. * ```html * * * ``` * * @memberof IgxTreeGridComponent */ foreignKey: string; /** * Sets the key indicating whether a row has children. * This property is only used for load on demand scenarios. * ```html * * * ``` * * @memberof IgxTreeGridComponent */ hasChildrenKey: string; /** * Sets whether child records should be deleted when their parent gets deleted. * By default it is set to true and deletes all children along with the parent. * ```html * * * ``` * * @memberof IgxTreeGridComponent */ cascadeOnDelete: boolean; /** * Sets a callback for loading child rows on demand. * ```html * * * ``` * ```typescript * public loadChildren = (parentID: any, done: (children: any[]) => void) => { * this.dataService.getData(parentID, children => done(children)); * } * ``` * * @memberof IgxTreeGridComponent */ loadChildrenOnDemand: (parentID: any, done: (children: any[]) => void) => void; /** * @hidden @internal */ role: string; /** * Sets the value of the `id` attribute. If not provided it will be automatically generated. * ```html * * ``` * * @memberof IgxTreeGridComponent */ id: string; /** * @hidden * @internal */ treeGroupArea: IgxTreeGridGroupByAreaComponent; /** * @hidden @internal */ protected recordTemplate: TemplateRef; /** * @hidden @internal */ protected summaryTemplate: TemplateRef; /** * @hidden */ protected rowLoadingTemplate: IgxRowLoadingIndicatorTemplateDirective; /** * @hidden */ flatData: any[] | null; /** * @hidden */ processedExpandedFlatData: any[] | null; /** * Returns an array of the root level `ITreeGridRecord`s. * ```typescript * // gets the root record with index=2 * const states = this.grid.rootRecords[2]; * ``` * * @memberof IgxTreeGridComponent */ rootRecords: ITreeGridRecord[]; /** * Returns a map of all `ITreeGridRecord`s. * ```typescript * // gets the record with primaryKey=2 * const states = this.grid.records.get(2); * ``` * * @memberof IgxTreeGridComponent */ records: Map; /** * Returns an array of processed (filtered and sorted) root `ITreeGridRecord`s. * ```typescript * // gets the processed root record with index=2 * const states = this.grid.processedRootRecords[2]; * ``` * * @memberof IgxTreeGridComponent */ processedRootRecords: ITreeGridRecord[]; /** * Returns a map of all processed (filtered and sorted) `ITreeGridRecord`s. * ```typescript * // gets the processed record with primaryKey=2 * const states = this.grid.processedRecords.get(2); * ``` * * @memberof IgxTreeGridComponent */ processedRecords: Map; /** * @hidden */ loadingRows: Set; protected _filterStrategy: TreeGridFilteringStrategy; protected _transactions: HierarchicalTransactionService; private _data; private _rowLoadingIndicatorTemplate; private _expansionDepth; /** * Gets/Sets the array of data that populates the component. * ```html * * ``` * * @memberof IgxTreeGridComponent */ get data(): any[] | null; set data(value: any[] | null); /** @hidden @internal */ get type(): GridType["type"]; /** * Get transactions service for the grid. * * @experimental @hidden */ get transactions(): HierarchicalTransactionService; /** * Sets the count of levels to be expanded in the `IgxTreeGridComponent`. By default it is * set to `Infinity` which means all levels would be expanded. * ```html * * ``` * * @memberof IgxTreeGridComponent */ get expansionDepth(): number; set expansionDepth(value: number); /** * Template for the row loading indicator when load on demand is enabled. * ```html * * loop * * * * * ``` * * @memberof IgxTreeGridComponent */ get rowLoadingIndicatorTemplate(): TemplateRef; set rowLoadingIndicatorTemplate(value: TemplateRef); constructor(validationService: IgxGridValidationService, selectionService: IgxGridSelectionService, colResizingService: IgxColumnResizingService, gridAPI: GridServiceType, transactionFactory: IgxHierarchicalTransactionFactory, _elementRef: ElementRef, _zone: NgZone, document: any, cdr: ChangeDetectorRef, differs: IterableDiffers, viewRef: ViewContainerRef, injector: Injector, envInjector: EnvironmentInjector, navigation: IgxGridNavigationService, filteringService: IgxFilteringService, textHighlightService: IgxTextHighlightService, overlayService: IgxOverlayService, summaryService: IgxGridSummaryService, localeId: string, platform: PlatformUtil, _diTransactions?: HierarchicalTransactionService); /** * @hidden */ ngOnInit(): void; /** * @hidden */ ngAfterViewInit(): void; /** * @hidden */ ngAfterContentInit(): void; getDefaultExpandState(record: ITreeGridRecord): boolean; /** * Expands all rows. * ```typescript * this.grid.expandAll(); * ``` * * @memberof IgxTreeGridComponent */ expandAll(): void; /** * Collapses all rows. * * ```typescript * this.grid.collapseAll(); * ``` * * @memberof IgxTreeGridComponent */ collapseAll(): void; /** * @hidden */ refreshGridState(args?: IRowDataEventArgs): void; /** * Creates a new `IgxTreeGridRowComponent` with the given data. If a parentRowID is not specified, the newly created * row would be added at the root level. Otherwise, it would be added as a child of the row whose primaryKey matches * the specified parentRowID. If the parentRowID does not exist, an error would be thrown. * ```typescript * const record = { * ID: this.grid.data[this.grid1.data.length - 1].ID + 1, * Name: this.newRecord * }; * this.grid.addRow(record, 1); // Adds a new child row to the row with ID=1. * ``` * * @param data * @param parentRowID * @memberof IgxTreeGridComponent */ addRow(data: any, parentRowID?: any): void; /** * Enters add mode by spawning the UI with the context of the specified row by index. * * @remarks * Accepted values for index are integers from 0 to this.grid.dataView.length * @remarks * When adding the row as a child, the parent row is the specified row. * @remarks * To spawn the UI on top, call the function with index = null or a negative number. * In this case trying to add this row as a child will result in error. * @example * ```typescript * this.grid.beginAddRowByIndex(10); * this.grid.beginAddRowByIndex(10, true); * this.grid.beginAddRowByIndex(null); * ``` * @param index - The index to spawn the UI at. Accepts integers from 0 to this.grid.dataView.length * @param asChild - Whether the record should be added as a child. Only applicable to igxTreeGrid. */ beginAddRowByIndex(index: number, asChild?: boolean): void; /** * @hidden */ getContext(rowData: any, rowIndex: number, pinned?: boolean): any; /** * @hidden * @internal */ getInitialPinnedIndex(rec: any): number; /** * @hidden * @internal */ isRecordPinned(rec: any): boolean; /** * * Returns an array of the current cell selection in the form of `[{ column.field: cell.value }, ...]`. * * @remarks * If `formatters` is enabled, the cell value will be formatted by its respective column formatter (if any). * If `headers` is enabled, it will use the column header (if any) instead of the column field. */ getSelectedData(formatters?: boolean, headers?: boolean): any[]; /** * @hidden @internal */ getEmptyRecordObjectFor(inTreeRow: RowType): { rowID: string | number; data: any; recordRef: { key: any; data: any; children?: ITreeGridRecord[]; parent?: ITreeGridRecord; level?: number; isFilteredOutParent?: boolean; expanded?: boolean; }; }; /** @hidden */ deleteRowById(rowId: any): any; /** * Returns the `IgxTreeGridRow` by index. * * @example * ```typescript * const myRow = treeGrid.getRowByIndex(1); * ``` * @param index */ getRowByIndex(index: number): RowType; /** * Returns the `RowType` object by the specified primary key. * * @example * ```typescript * const myRow = this.treeGrid.getRowByIndex(1); * ``` * @param index */ getRowByKey(key: any): RowType; /** * Returns the collection of all RowType for current page. * * @hidden @internal */ allRows(): RowType[]; /** * Returns the collection of `IgxTreeGridRow`s for current page. * * @hidden @internal */ dataRows(): RowType[]; /** * Returns an array of the selected `IgxGridCell`s. * * @example * ```typescript * const selectedCells = this.grid.selectedCells; * ``` */ get selectedCells(): CellType[]; /** * Returns a `CellType` object that matches the conditions. * * @example * ```typescript * const myCell = this.grid1.getCellByColumn(2, "UnitPrice"); * ``` * @param rowIndex * @param columnField */ getCellByColumn(rowIndex: number, columnField: string): CellType; /** * Returns a `CellType` object that matches the conditions. * * @remarks * Requires that the primaryKey property is set. * @example * ```typescript * grid.getCellByKey(1, 'index'); * ``` * @param rowSelector match any rowID * @param columnField */ getCellByKey(rowSelector: any, columnField: string): CellType; pinRow(rowID: any, index?: number): boolean; unpinRow(rowID: any): boolean; /** @hidden */ generateRowPath(rowId: any): any[]; /** @hidden */ isTreeRow(record: any): boolean; /** @hidden */ getUnpinnedIndexById(id: any): number; /** * @hidden */ createRow(index: number, data?: any): RowType; protected generateDataFields(data: any[]): string[]; protected transactionStatusUpdate(event: StateUpdateEvent): void; protected findRecordIndexInView(rec: any): number; /** * @hidden @internal */ protected getDataBasedBodyHeight(): number; /** * @hidden */ protected scrollTo(row: any | number, column: any | number): void; protected writeToData(rowIndex: number, value: any): void; /** * @hidden */ protected initColumns(collection: IgxColumnComponent[], cb?: (args: any) => void): void; /** * @hidden @internal */ protected getGroupAreaHeight(): number; /** {@link triggerPipes} will re-create pinnedData on CRUD operations */ protected trackPinnedRowData(record: ITreeGridRecord): ITreeGridRecord; /** * @description A recursive way to deselect all selected children of a given record * @param recordID ID of the record whose children to deselect * @hidden * @internal */ private deselectChildren; private addChildRows; private loadChildrenOnRowExpansion; private handleCascadeSelection; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; static ngAcceptInputType_cascadeOnDelete: unknown; } declare class ITreeGridAggregation { field: string; aggregate: (parent: any, children: any[]) => any; } declare class IgxGroupedTreeGridSorting extends IgxSorting { private static _instance; static instance(): IgxGroupedTreeGridSorting; protected getFieldValue(obj: any, key: string, isDate?: boolean, isTime?: boolean): any; } /** @hidden */ declare class IgxTreeGridGroupingPipe implements PipeTransform { private grid; transform(collection: any[], groupingExpressions: IGroupingExpression[], groupKey: string, childDataKey: string, grid: GridType, aggregations?: ITreeGridAggregation[]): any[]; private flattenGrouping; private groupByMultiple; private groupBy; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵpipe: i0.ɵɵPipeDeclaration; } declare const IGX_TREE_GRID_DIRECTIVES: readonly [typeof IgxTreeGridComponent, typeof IgxTreeGridGroupByAreaComponent, typeof IgxTreeGridGroupingPipe, typeof IgxRowAddTextDirective, typeof IgxRowEditActionsDirective, typeof IgxRowEditTextDirective, typeof IgxRowEditTabStopDirective, typeof IgxRowDirective, typeof IgxGridFooterComponent, typeof IgxAdvancedFilteringDialogComponent, typeof IgxRowExpandedIndicatorDirective, typeof IgxRowCollapsedIndicatorDirective, typeof IgxHeaderExpandedIndicatorDirective, typeof IgxHeaderCollapsedIndicatorDirective, typeof IgxExcelStyleHeaderIconDirective, typeof IgxSortAscendingHeaderIconDirective, typeof IgxSortDescendingHeaderIconDirective, typeof IgxSortHeaderIconDirective, typeof IgxDragIndicatorIconDirective, typeof IgxRowDragGhostDirective, typeof IgxGridStateDirective, typeof IgxGridHeaderComponent, typeof IgxGridHeaderGroupComponent, typeof IgxGridHeaderRowComponent, typeof IgxFilterCellTemplateDirective, typeof IgxSummaryTemplateDirective, typeof IgxCellTemplateDirective, typeof IgxCellValidationErrorDirective, typeof IgxCellHeaderTemplateDirective, typeof IgxCellFooterTemplateDirective, typeof IgxCellEditorTemplateDirective, typeof IgxCollapsibleIndicatorTemplateDirective, typeof IgxColumnComponent, typeof IgxColumnGroupComponent, typeof IgxColumnLayoutComponent, typeof IgxColumnActionsComponent, typeof IgxColumnHidingDirective, typeof IgxColumnPinningDirective, typeof IgxRowSelectorDirective, typeof IgxGroupByRowSelectorDirective, typeof IgxHeadSelectorDirective, typeof IgxCSVTextDirective, typeof IgxExcelTextDirective, typeof IgxGridToolbarActionsComponent, typeof IgxGridToolbarAdvancedFilteringComponent, typeof IgxGridToolbarComponent, typeof IgxGridToolbarExporterComponent, typeof IgxGridToolbarHidingComponent, typeof IgxGridToolbarPinningComponent, typeof IgxGridToolbarTitleComponent, typeof IgxGridToolbarDirective, typeof IgxGridExcelStyleFilteringComponent, typeof IgxExcelStyleHeaderComponent, typeof IgxExcelStyleSortingComponent, typeof IgxExcelStylePinningComponent, typeof IgxExcelStyleHidingComponent, typeof IgxExcelStyleSelectingComponent, typeof IgxExcelStyleClearFiltersComponent, typeof IgxExcelStyleConditionalFilterComponent, typeof IgxExcelStyleMovingComponent, typeof IgxExcelStyleSearchComponent, typeof IgxExcelStyleColumnOperationsTemplateDirective, typeof IgxExcelStyleFilterOperationsTemplateDirective, typeof IgxExcelStyleLoadingValuesTemplateDirective, typeof IgxColumnRequiredValidatorDirective, typeof IgxColumnMinValidatorDirective, typeof IgxColumnMaxValidatorDirective, typeof IgxColumnEmailValidatorDirective, typeof IgxColumnMinLengthValidatorDirective, typeof IgxColumnMaxLengthValidatorDirective, typeof IgxColumPatternValidatorDirective, typeof IgxPaginatorComponent, typeof IgxPageNavigationComponent, typeof IgxPageSizeSelectorComponent, typeof IgxPaginatorContentDirective, typeof IgxPaginatorDirective]; declare class IgxHierarchicalGridNavigationService extends IgxGridNavigationService { protected _pendingNavigation: boolean; dispatchEvent(event: KeyboardEvent): void; navigateInBody(rowIndex: any, visibleColIndex: any, cb?: (arg: any) => void): void; shouldPerformVerticalScroll(index: any, visibleColumnIndex?: number, isNext?: any): boolean; focusTbody(event: any): void; protected nextSiblingIndex(isNext: any): number; /** * Handles scrolling in child grid and ensures target child row is in main grid view port. * * @param rowIndex The row index which should be in view. * @param isNext Optional. Whether we are navigating to next. Used to determine scroll direction. * @param cb Optional.Callback function called when operation is complete. */ protected _handleScrollInChild(rowIndex: number, isNext?: boolean, cb?: () => void): void; /** * * @param rowIndex Row index that should come in view. * @param isNext Whether we are navigating to next. Used to determine scroll direction. * @param cb Optional.Callback function called when operation is complete. */ protected positionInParent(rowIndex: any, isNext: any, cb?: () => void): void; /** * Navigates to the specific child grid based on the array of paths leading to it * * @param pathToChildGrid Array of IPathSegments that describe the path to the child grid * each segment is described by the rowKey of the parent row and the rowIslandKey. */ navigateToChildGrid(pathToChildGrid: IPathSegment[], cb?: () => void): void; /** * Moves navigation to child grid. * * @param parentRowIndex The parent row index, at which the child grid is rendered. * @param childLayoutIndex Optional. The index of the child row island to which the child grid belongs to. Uses first if not set. */ protected _moveToChild(parentRowIndex: number, visibleColIndex: number, isNext: boolean, childLayoutIndex?: number, cb?: (arg: any) => void): void; /** * Moves navigation back to parent grid. * * @param rowIndex */ protected _moveToParent(isNext: boolean, columnIndex: any, cb?: any): void; /** * Gets information on the row position relative to the root grid view port. * Returns whether the row is in view and its offset. * * @param rowObj * @param isNext */ protected getPositionInfo(row: RowType, isNext: boolean): { inView: boolean; offset: number; }; protected getElementPosition(element: HTMLElement, isNext: boolean): { inView: boolean; offset: number; }; /** * Gets closest element by its tag name. * * @param sourceElem The element from which to start the search. * @param targetTag The target element tag name, for which to search. */ protected getClosestElemByTag(sourceElem: any, targetTag: any): any; private clearActivation; private hasNextTarget; /** * Gets the max top view in the current grid hierarchy. * * @param grid */ private _getMaxTop; /** * Gets the min bottom view in the current grid hierarchy. * * @param grid */ private _getMinBottom; /** * Finds the next grid that allows scrolling down. * * @param grid The grid from which to begin the search. */ private getNextScrollableDown; /** * Finds the next grid that allows scrolling up. * * @param grid The grid from which to begin the search. */ private getNextScrollableUp; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵprov: i0.ɵɵInjectableDeclaration; } declare abstract class IgxHierarchicalGridBaseDirective extends IgxGridBaseDirective implements GridType { gridAPI: IgxHierarchicalGridAPIService; navigation: IgxHierarchicalGridNavigationService; /** * Gets/Sets the key indicating whether a row has children. If row has no children it does not render an expand indicator. * * @example * ```html * * * ``` */ hasChildrenKey: string; /** * Gets/Sets whether the expand/collapse all button in the header should be rendered. * * @remarks * The default value is false. * @example * ```html * * * ``` */ showExpandAll: boolean; /** * Emitted when a new chunk of data is loaded from virtualization. * * @example * ```typescript * * * ``` */ dataPreLoad: EventEmitter; /** @hidden @internal */ get type(): GridType["type"]; /** * @hidden */ get maxLevelHeaderDepth(): any; /** * Gets the outlet used to attach the grid's overlays to. * * @remarks * If set, returns the outlet defined outside the grid. Otherwise returns the grid's internal outlet directive. */ get outlet(): any; /** * Sets the outlet used to attach the grid's overlays to. */ set outlet(val: any); /** @hidden @internal */ batchEditingChange: EventEmitter; get batchEditing(): boolean; set batchEditing(val: boolean); /** * @hidden */ parentIsland: IgxRowIslandComponent; abstract rootGrid: GridType; abstract expandChildren: boolean; constructor(validationService: IgxGridValidationService, selectionService: IgxGridSelectionService, colResizingService: IgxColumnResizingService, gridAPI: IgxHierarchicalGridAPIService, transactionFactory: IgxFlatTransactionFactory, elementRef: ElementRef, zone: NgZone, document: any, cdr: ChangeDetectorRef, differs: IterableDiffers, viewRef: ViewContainerRef, injector: Injector, envInjector: EnvironmentInjector, navigation: IgxHierarchicalGridNavigationService, filteringService: IgxFilteringService, textHighlightService: IgxTextHighlightService, overlayService: IgxOverlayService, summaryService: IgxGridSummaryService, localeId: string, platform: PlatformUtil, _diTransactions?: TransactionService); /** * @hidden */ createColumnsList(cols: Array): void; protected _createColumn(col: any): any; protected _createColGroupComponent(col: IgxColumnGroupComponent): i0.ComponentRef; protected _createColComponent(col: any): i0.ComponentRef; protected getGridsForIsland(rowIslandID: string): GridType[]; protected getChildGrid(path: Array): any; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; static ngAcceptInputType_showExpandAll: unknown; } declare class IgxRowIslandAPIService { rowIsland: IgxRowIslandComponent; change: Subject; protected state: Map; protected destroyMap: Map>; protected childRowIslands: Map; protected childGrids: Map; register(rowIsland: IgxRowIslandComponent): void; unsubscribe(rowIsland: IgxRowIslandComponent): void; get(id: string): IgxRowIslandComponent; unset(id: string): void; reset(oldId: string, newId: string): void; registerChildRowIsland(rowIsland: IgxRowIslandComponent): void; unsetChildRowIsland(rowIsland: IgxRowIslandComponent): void; getChildRowIsland(rowIslandKey: string): IgxRowIslandComponent; registerChildGrid(parentRowID: any, grid: IgxHierarchicalGridComponent): void; getChildGrids(inDepth?: boolean): any[]; getChildGridByID(rowID: any): IgxHierarchicalGridComponent; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵprov: i0.ɵɵInjectableDeclaration; } interface IGridCreatedEventArgs extends IBaseEventArgs { owner: IgxRowIslandComponent; parentID: any; grid: IgxHierarchicalGridComponent; parentRowData?: any; } /** * Row island * * @igxModule IgxHierarchicalGridModule * @igxParent IgxHierarchicalGridComponent, IgxRowIslandComponent * */ declare class IgxRowIslandComponent extends IgxHierarchicalGridBaseDirective implements AfterContentInit, AfterViewInit, OnChanges, OnInit, OnDestroy { rowIslandAPI: IgxRowIslandAPIService; /** * Sets the key of the row island by which child data would be taken from the row data if such is provided. * ```html * * * * * * ``` * * @memberof IgxRowIslandComponent */ key: string; /** * Sets the key of the row island by which child data would be taken from the row data if such is provided. * @hidden @internal */ get childDataKey(): string; set childDataKey(value: string); /** * @hidden */ children: QueryList; /** * @hidden @internal */ childLayoutList: QueryList; /** * @hidden */ childColumns: QueryList; protected toolbarDirectiveTemplate: TemplateRef; protected paginatorDirectiveTemplate: TemplateRef; /** * Sets/Gets the toolbar template for each child grid created from this row island. */ get toolbarTemplate(): TemplateRef; set toolbarTemplate(template: TemplateRef); /** * Sets/Gets the paginator template for each child grid created from this row island. */ get paginatorTemplate(): TemplateRef; set paginatorTemplate(template: TemplateRef); /** @hidden @internal */ protected actionStripComponents: QueryList; /** * @hidden */ layoutChange: EventEmitter; /** * Event emitted when a grid is being created based on this row island. * ```html * * * * * * ``` * * @memberof IgxRowIslandComponent */ gridCreated: EventEmitter; /** * Emitted after a grid is being initialized for this row island. * The emitting is done in `ngAfterViewInit`. * ```html * * * * * * ``` * * @memberof IgxRowIslandComponent */ gridInitialized: EventEmitter; /** * @hidden */ initialChanges: any[]; /** * @hidden */ rootGrid: GridType; /** @hidden */ readonly data: any[] | null; /** @hidden */ get hiddenColumnsCount(): number; /** @hidden */ get pinnedColumnsCount(): number; /** @hidden */ get lastSearchInfo(): ISearchInfo; /** @hidden */ get filteredData(): any; /** @hidden */ get filteredSortedData(): any[]; /** @hidden */ get virtualizationState(): IForOfState; /** @hidden */ get pinnedColumns(): IgxColumnComponent[]; /** @hidden */ get unpinnedColumns(): IgxColumnComponent[]; /** @hidden */ get visibleColumns(): IgxColumnComponent[]; /** @hidden */ get dataView(): any[]; /** @hidden @internal */ tabindex: number; /** @hidden @internal */ hostRole: any; protected baseClass: any; /** @hidden @internal */ get hostWidth(): any; protected displayStyle: string; protected templateRows: any; private ri_columnListDiffer; private layout_id; private isInit; private _toolbarTemplate; private _paginatorTemplate; /** * Sets if all immediate children of the grids for this `IgxRowIslandComponent` should be expanded/collapsed. * ```html * * * * * * ``` * * @memberof IgxRowIslandComponent */ set expandChildren(value: boolean); /** * Gets if all immediate children of the grids for this `IgxRowIslandComponent` have been set to be expanded/collapsed. * ```typescript * const expanded = this.rowIsland.expandChildren; * ``` * * @memberof IgxRowIslandComponent */ get expandChildren(): boolean; /** * @hidden */ get id(): string; /** * @hidden */ get parentId(): any; /** * @hidden */ get level(): number; constructor(validationService: IgxGridValidationService, selectionService: IgxGridSelectionService, colResizingService: IgxColumnResizingService, gridAPI: IgxHierarchicalGridAPIService, transactionFactory: IgxFlatTransactionFactory, elementRef: ElementRef, zone: NgZone, document: any, cdr: ChangeDetectorRef, differs: IterableDiffers, viewRef: ViewContainerRef, injector: Injector, envInjector: EnvironmentInjector, navigation: IgxHierarchicalGridNavigationService, filteringService: IgxFilteringService, textHighlightService: IgxTextHighlightService, overlayService: IgxOverlayService, summaryService: IgxGridSummaryService, rowIslandAPI: IgxRowIslandAPIService, localeId: string, platform: PlatformUtil); /** * @hidden */ ngOnInit(): void; /** * @hidden */ ngAfterContentInit(): void; /** * @hidden */ ngAfterViewInit(): void; /** * @hidden */ ngOnChanges(changes: any): void; /** * @hidden */ ngOnDestroy(): void; /** * @hidden */ reflow(): void; /** * @hidden */ calculateGridHeight(): void; /** * @hidden */ calculateGridWidth(): void; protected _childColumns: any[]; protected updateColumnList(): void; protected updateChildren(): void; private cleanGridState; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; static ngAcceptInputType_expandChildren: unknown; } declare class IgxHierarchicalGridAPIService extends GridBaseAPIService { protected childRowIslands: Map; protected childGrids: Map>; registerChildRowIsland(rowIsland: IgxRowIslandComponent): void; unsetChildRowIsland(rowIsland: IgxRowIslandComponent): void; getChildRowIsland(key: string): IgxRowIslandComponent; getChildGrid(path: Array): any; getChildGrids(inDepth?: boolean): GridType[]; getParentRowId(childGrid: GridType): any; registerChildGrid(parentRowID: any, rowIslandKey: string, grid: GridType): void; getChildGridsForRowIsland(rowIslandKey: string): GridType[]; getChildGridByID(rowIslandKey: any, rowID: any): GridType; get_row_expansion_state(record: any): boolean; allow_expansion_state_change(rowID: any, expanded: any): boolean; get_rec_by_id(rowID: any): any; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵprov: i0.ɵɵInjectableDeclaration; } /** * @hidden @internal */ declare class IgxChildGridRowComponent implements AfterViewInit, OnInit { readonly gridAPI: IgxHierarchicalGridAPIService; element: ElementRef; cdr: ChangeDetectorRef; layout: IgxRowIslandComponent; /** * @hidden */ get parentHasScroll(): boolean; /** * @hidden */ parentGridID: string; /** * The data passed to the row component. * * ```typescript * // get the row data for the first selected row * let selectedRowData = this.grid.selectedRows[0].data; * ``` */ get data(): any; set data(value: any); /** * The index of the row. * * ```typescript * // get the index of the second selected row * let selectedRowIndex = this.grid.selectedRows[1].index; * ``` */ index: number; container: ViewContainerRef; /** * @hidden */ hGrid: IgxHierarchicalGridComponent; /** * Get a reference to the grid that contains the selected row. * * ```typescript * handleRowSelection(event) { * // the grid on which the rowSelected event was triggered * const grid = event.row.grid; * } * ``` * * ```html * * * ``` */ get parentGrid(): IgxHierarchicalGridComponent; get level(): number; /** * The native DOM element representing the row. Could be null in certain environments. * * ```typescript * // get the nativeElement of the second selected row * let selectedRowNativeElement = this.grid.selectedRows[1].nativeElement; * ``` */ get nativeElement(): HTMLElement; /** * Returns whether the row is expanded. * ```typescript * const RowExpanded = this.grid1.rowList.first.expanded; * ``` */ expanded: boolean; private _data; constructor(gridAPI: IgxHierarchicalGridAPIService, element: ElementRef, cdr: ChangeDetectorRef); /** * @hidden */ ngOnInit(): void; /** * @hidden */ ngAfterViewInit(): void; private setupEventEmitters; private _handleLayoutChanges; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * Hierarchical grid * * @igxModule IgxHierarchicalGridModule * */ declare class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirective implements GridType, AfterViewInit, AfterContentInit, OnInit, OnDestroy, DoCheck { /** * @hidden @internal */ role: string; /** * @hidden */ childLayoutList: QueryList; /** * @hidden */ allLayoutList: QueryList; /** @hidden @internal */ paginatorList: QueryList; /** @hidden @internal */ toolbarOutlet: ViewContainerRef; /** @hidden @internal */ paginatorOutlet: ViewContainerRef; /** * @hidden */ templateOutlets: QueryList; /** * @hidden */ hierarchicalRows: QueryList; protected hierarchicalRecordTemplate: TemplateRef; protected childTemplate: TemplateRef; protected get headerHierarchyExpander(): ElementRef; /** * @hidden */ childLayoutKeys: any[]; /** @hidden @internal */ dataSetByUser: boolean; /** * @hidden */ highlightedRowID: any; /** * @hidden */ updateOnRender: boolean; /** * @hidden */ parent: IgxHierarchicalGridComponent; /** * @hidden @internal */ childRow: IgxChildGridRowComponent; protected actionStripComponents: QueryList; /** @hidden @internal */ get actionStrip(): IgxActionStripToken; get advancedFilteringExpressionsTree(): IFilteringExpressionsTree; set advancedFilteringExpressionsTree(value: IFilteringExpressionsTree); private _data; private h_id; private childGridTemplates; /** * Gets/Sets the value of the `id` attribute. * * @remarks * If not provided it will be automatically generated. * @example * ```html * * ``` */ get id(): string; set id(value: string); /** * Gets/Sets the array of data that populates the component. * ```html * * ``` * * @memberof IgxHierarchicalGridComponent */ set data(value: any[] | null); /** * Returns an array of data set to the `IgxHierarchicalGridComponent`. * ```typescript * let filteredData = this.grid.filteredData; * ``` * * @memberof IgxHierarchicalGridComponent */ get data(): any[] | null; /** @hidden @internal */ get paginator(): IgxPaginatorComponent; /** @hidden @internal */ get excelStyleFilteringComponent(): IgxGridExcelStyleFilteringComponent; /** * Gets/Sets the total number of records in the data source. * * @remarks * This property is required for remote grid virtualization to function when it is bound to remote data. * @example * ```typescript * const itemCount = this.grid1.totalItemCount; * this.grid1.totalItemCount = 55; * ``` */ set totalItemCount(count: number); get totalItemCount(): number; /** * Sets if all immediate children of the `IgxHierarchicalGridComponent` should be expanded/collapsed. * Default value is false. * ```html * * ``` * * @memberof IgxHierarchicalGridComponent */ set expandChildren(value: boolean); /** * Gets if all immediate children of the `IgxHierarchicalGridComponent` previously have been set to be expanded/collapsed. * If previously set and some rows have been manually expanded/collapsed it will still return the last set value. * ```typescript * const expanded = this.grid.expandChildren; * ``` * * @memberof IgxHierarchicalGridComponent */ get expandChildren(): boolean; /** * Gets/Sets the schema for the hierarchical grid. * This schema defines the structure and properties of the data displayed in the grid. * @Input() * @param {EntityType[]} entities - An array of EntityType objects representing the grid's schema. * @remarks * This property is required in remote data filtering scenarios. * @example * ```typescript * const schema = this.grid.schema; * this.grid.schema = [{ name: 'Products', fields: [...], childEntities: [...] }]; * ``` */ set schema(entities: EntityType[]); get schema(): EntityType[]; /** * Gets the unique identifier of the parent row. It may be a `string` or `number` if `primaryKey` of the * parent grid is set or an object reference of the parent record otherwise. * ```typescript * const foreignKey = this.grid.foreignKey; * ``` * * @memberof IgxHierarchicalGridComponent */ get foreignKey(): any; /** * @hidden */ get hasExpandableChildren(): boolean; /** * @hidden */ get resolveRowEditContainer(): TemplateRef; /** * @hidden */ get resolveRowEditActions(): TemplateRef; /** * @hidden */ get resolveRowEditText(): TemplateRef; /** @hidden */ hideActionStrip(): void; /** * @hidden */ get parentRowOutletDirective(): any; /** * @hidden */ ngOnInit(): void; /** * @hidden */ ngAfterViewInit(): void; /** * @hidden */ ngAfterContentInit(): void; /** * Returns the `RowType` by index. * * @example * ```typescript * const myRow = this.grid1.getRowByIndex(1); * ``` * @param index */ getRowByIndex(index: number): RowType; /** * Returns the `RowType` by key. * * @example * ```typescript * const myRow = this.grid1.getRowByKey(1); * ``` * @param key */ getRowByKey(key: any): RowType; /** * @hidden @internal */ allRows(): RowType[]; /** * Returns the collection of `IgxHierarchicalGridRow`s for current page. * * @hidden @internal */ dataRows(): RowType[]; /** * Returns an array of the selected `IgxGridCell`s. * * @example * ```typescript * const selectedCells = this.grid.selectedCells; * ``` */ get selectedCells(): CellType[]; /** * Returns a `CellType` object that matches the conditions. * * @example * ```typescript * const myCell = this.grid1.getCellByColumn(2, "UnitPrice"); * ``` * @param rowIndex * @param columnField */ getCellByColumn(rowIndex: number, columnField: string): CellType; /** * Returns a `CellType` object that matches the conditions. * * @remarks * Requires that the primaryKey property is set. * @example * ```typescript * grid.getCellByKey(1, 'index'); * ``` * @param rowSelector match any rowID * @param columnField */ getCellByKey(rowSelector: any, columnField: string): CellType; pinRow(rowID: any, index?: number): boolean; /** @hidden @internal */ setDataInternal(value: any): void; unpinRow(rowID: any): boolean; /** * @hidden @internal */ dataLoading(event: any): void; /** @hidden */ featureColumnsWidth(): number; /** * @hidden */ onRowIslandChange(): void; /** @hidden @internal **/ ngOnDestroy(): void; /** * @hidden */ isRowHighlighted(rowData: any): boolean; /** * @hidden */ isHierarchicalRecord(record: any): boolean; /** * @hidden */ isChildGridRecord(record: any): boolean; /** * @hidden */ trackChanges(index: any, rec: any): any; /** * @hidden */ getContext(rowData: any, rowIndex: any, pinned: any): any; /** * @hidden */ get rootGrid(): GridType; /** * @hidden */ get iconTemplate(): TemplateRef; /** * @hidden * @internal */ getDragGhostCustomTemplate(): TemplateRef; /** * @hidden * Gets the visible content height that includes header + tbody + footer. * For hierarchical child grid it may be scrolled and not fully visible. */ getVisibleContentHeight(): any; /** * @hidden */ toggleAll(): void; /** * @hidden * @internal */ hasExpandedRecords(): boolean; getDefaultExpandState(record: any): boolean; /** * @hidden */ isExpanded(record: any): boolean; /** * @hidden */ viewCreatedHandler(args: any): void; /** * @hidden */ viewMovedHandler(args: any): void; /** @hidden @internal **/ onContainerScroll(): void; /** * @hidden */ createRow(index: number, data?: any): RowType; /** @hidden @internal */ getChildGrids(inDeph?: boolean): GridType[]; protected generateDataFields(data: any[]): string[]; protected resizeNotifyHandler(): void; /** * @hidden */ protected initColumns(collection: IgxColumnComponent[], cb?: (args: any) => void): void; protected setupColumns(): void; protected getColumnList(): IgxColumnComponent[]; protected onColumnsChanged(): void; protected _shouldAutoSize(renderedHeight: any): boolean; private updateColumnList; private _clearSeletionHighlights; private generateSchema; private generateChildEntity; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; static ngAcceptInputType_expandChildren: unknown; } declare const IGX_HIERARCHICAL_GRID_DIRECTIVES: readonly [typeof IgxHierarchicalGridComponent, typeof IgxRowIslandComponent, typeof IgxRowAddTextDirective, typeof IgxRowEditActionsDirective, typeof IgxRowEditTextDirective, typeof IgxRowEditTabStopDirective, typeof IgxRowDirective, typeof IgxGridFooterComponent, typeof IgxAdvancedFilteringDialogComponent, typeof IgxRowExpandedIndicatorDirective, typeof IgxRowCollapsedIndicatorDirective, typeof IgxHeaderExpandedIndicatorDirective, typeof IgxHeaderCollapsedIndicatorDirective, typeof IgxExcelStyleHeaderIconDirective, typeof IgxSortAscendingHeaderIconDirective, typeof IgxSortDescendingHeaderIconDirective, typeof IgxSortHeaderIconDirective, typeof IgxDragIndicatorIconDirective, typeof IgxRowDragGhostDirective, typeof IgxGridStateDirective, typeof IgxGridHeaderComponent, typeof IgxGridHeaderGroupComponent, typeof IgxGridHeaderRowComponent, typeof IgxFilterCellTemplateDirective, typeof IgxSummaryTemplateDirective, typeof IgxCellTemplateDirective, typeof IgxCellValidationErrorDirective, typeof IgxCellHeaderTemplateDirective, typeof IgxCellFooterTemplateDirective, typeof IgxCellEditorTemplateDirective, typeof IgxCollapsibleIndicatorTemplateDirective, typeof IgxColumnComponent, typeof IgxColumnGroupComponent, typeof IgxColumnLayoutComponent, typeof IgxColumnActionsComponent, typeof IgxColumnHidingDirective, typeof IgxColumnPinningDirective, typeof IgxRowSelectorDirective, typeof IgxGroupByRowSelectorDirective, typeof IgxHeadSelectorDirective, typeof IgxCSVTextDirective, typeof IgxExcelTextDirective, typeof IgxGridToolbarActionsComponent, typeof IgxGridToolbarAdvancedFilteringComponent, typeof IgxGridToolbarComponent, typeof IgxGridToolbarExporterComponent, typeof IgxGridToolbarHidingComponent, typeof IgxGridToolbarPinningComponent, typeof IgxGridToolbarTitleComponent, typeof IgxGridToolbarDirective, typeof IgxGridExcelStyleFilteringComponent, typeof IgxExcelStyleHeaderComponent, typeof IgxExcelStyleSortingComponent, typeof IgxExcelStylePinningComponent, typeof IgxExcelStyleHidingComponent, typeof IgxExcelStyleSelectingComponent, typeof IgxExcelStyleClearFiltersComponent, typeof IgxExcelStyleConditionalFilterComponent, typeof IgxExcelStyleMovingComponent, typeof IgxExcelStyleSearchComponent, typeof IgxExcelStyleColumnOperationsTemplateDirective, typeof IgxExcelStyleFilterOperationsTemplateDirective, typeof IgxExcelStyleLoadingValuesTemplateDirective, typeof IgxColumnRequiredValidatorDirective, typeof IgxColumnMinValidatorDirective, typeof IgxColumnMaxValidatorDirective, typeof IgxColumnEmailValidatorDirective, typeof IgxColumnMinLengthValidatorDirective, typeof IgxColumnMaxLengthValidatorDirective, typeof IgxColumPatternValidatorDirective, typeof IgxPaginatorComponent, typeof IgxPageNavigationComponent, typeof IgxPageSizeSelectorComponent, typeof IgxPaginatorContentDirective, typeof IgxPaginatorDirective]; declare const IndigoIcons: Map; declare const IGX_LIST_DIRECTIVES: readonly [typeof IgxListComponent, typeof IgxListItemComponent, typeof IgxListThumbnailDirective, typeof IgxListActionDirective, typeof IgxListLineDirective, typeof IgxListLineTitleDirective, typeof IgxListLineSubTitleDirective, typeof IgxDataLoadingTemplateDirective, typeof IgxEmptyListTemplateDirective, typeof IgxListItemLeftPanningTemplateDirective, typeof IgxListItemRightPanningTemplateDirective]; /** * IgxActionIcon is a container for the action nav icon of the IgxNavbar. */ declare class IgxNavbarActionDirective { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } declare class IgxNavbarTitleDirective { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * **Ignite UI for Angular Navbar** - * [Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/navbar.html) * * The Ignite UI Navbar is most commonly used to provide an app header with a hamburger menu and navigation * state such as a "Go Back" button. It also supports other actions represented by icons. * * Example: * ```html * * search * favorite * more_vert * * ``` */ declare class IgxNavbarComponent { /** * Sets the value of the `id` attribute. If not provided it will be automatically generated. * ```html * * ``` */ id: string; /** * Sets the icon of the `IgxNavbarComponent`. * ```html * * ``` */ actionButtonIcon: string; /** * Sets the title of the `IgxNavbarComponent`. * ```html * * ``` */ title: string; /** * The event that will be thrown when the action is executed, * provides reference to the `IgxNavbar` component as argument * ```typescript * public actionExc(event){ * alert("Action Execute!"); * } * //.. * ``` * ```html * * ``` */ action: EventEmitter; /** * Sets the titleId of the `IgxNavbarComponent`. If not set it will be automatically generated. * ```html * * ``` */ titleId: string; /** * @hidden */ protected actionIconTemplate: IgxNavbarActionDirective; /** * @hidden */ protected titleContent: IgxNavbarTitleDirective; private isVisible; /** * Sets whether the action button of the `IgxNavbarComponent` is visible. * ```html * * ``` */ set isActionButtonVisible(value: boolean); /** * Returns whether the `IgxNavbarComponent` action button is visible, true/false. * ```typescript * @ViewChild("MyChild") * public navBar: IgxNavbarComponent; * ngAfterViewInit(){ * let actionButtonVisibile = this.navBar.isActionButtonVisible; * } * ``` */ get isActionButtonVisible(): boolean; get isTitleContentVisible(): boolean; /** * @hidden */ _triggerAction(): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; static ngAcceptInputType_isActionButtonVisible: unknown; } declare const IGX_NAVBAR_DIRECTIVES: readonly [typeof IgxNavbarComponent, typeof IgxNavbarActionDirective, typeof IgxNavbarTitleDirective]; /** * Stripped-down HammerJS annotations. */ /** * @hidden * @internal */ interface HammerInput { preventDefault: () => void; deltaX: number; deltaY: number; center: { x: number; y: number; }; pointerType: string; distance: number; } /** * @hidden * @internal */ interface HammerStatic { new (element: HTMLElement | SVGElement, options?: any): HammerManager; Pan: Recognizer; Swipe: Recognizer; Tap: Recognizer; TouchInput: HammerInput; DIRECTION_HORIZONTAL: number; DIRECTION_VERTICAL: number; } /** * @hidden * @internal */ interface Recognizer { } /** * @hidden * @internal */ interface HammerManager { set(options: any): HammerManager; off(events: string, handler?: (event: HammerInput) => void): void; on(events: string, handler: (event: HammerInput) => void): void; destroy(): void; get(event: string): HammerManager; } /** * @hidden * @internal */ interface HammerOptions { cssProps?: { [key: string]: string; }; recognizers?: any[]; inputClass?: HammerInput; } /** * Touch gestures manager based on Hammer.js * Use with caution, this will track references for single manager per element. Very TBD. Much TODO. * * @hidden */ declare class HammerGesturesManager { private _zone; private doc; private platformUtil; static Hammer: HammerStatic; /** * Event option defaults for each recognizer, see http://hammerjs.github.io/api/ for API listing. */ protected hammerOptions: HammerOptions; private platformBrowser; private _hammerManagers; constructor(_zone: NgZone, doc: any, platformUtil: PlatformUtil); supports(eventName: string): boolean; /** * Add listener extended with options for Hammer.js. Will use defaults if none are provided. * Modeling after other event plugins for easy future modifications. */ addEventListener(element: HTMLElement, eventName: string, eventHandler: (eventObj: any) => void, options?: HammerOptions): () => void; /** * Add listener extended with options for Hammer.js. Will use defaults if none are provided. * Modeling after other event plugins for easy future modifications. * * @param target Can be one of either window, body or document(fallback default). */ addGlobalEventListener(target: string, eventName: string, eventHandler: (eventObj: any) => void): () => void; /** * Exposes [Dom]Adapter.getGlobalEventTarget to get global event targets. * Supported: window, document, body. Defaults to document for invalid args. * * @param target Target name */ getGlobalEventTarget(target: string): EventTarget; /** * Set HammerManager options. * * @param element The DOM element used to create the manager on. * * ### Example * * ```ts * manager.setManagerOption(myElem, "pan", { pointers: 1 }); * ``` */ setManagerOption(element: EventTarget, event: string, options: any): void; /** * Add an element and manager map to the internal collection. * * @param element The DOM element used to create the manager on. */ addManagerForElement(element: EventTarget, manager: HammerManager): void; /** * Get HammerManager for the element or null * * @param element The DOM element used to create the manager on. */ getManagerForElement(element: EventTarget): HammerManager; /** * Destroys the HammerManager for the element, removing event listeners in the process. * * @param element The DOM element used to create the manager on. */ removeManagerForElement(element: HTMLElement): void; /** Destroys all internally tracked HammerManagers, removing event listeners in the process. */ destroy(): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵprov: i0.ɵɵInjectableDeclaration; } declare class IgxNavDrawerItemDirective { /** * Styles a navigation drawer item as selected. * If not set, `active` will have default value `false`. * * @example * ```html * Active Item * ``` */ active: boolean; /** * Disables a navigation drawer item. * If not set, `disabled` will have default value `false`. * * @example * ```html * Disabled Item * ``` */ disabled: boolean; /** * Styles a navigation drawer item as a group header. * If not set, `isHeader` will have default value `false`. * * @example * ```html * Header * ``` */ isHeader: boolean; /** * @hidden */ readonly activeClass = "igx-nav-drawer__item--active"; /** * @hidden */ readonly disabledClass = "igx-nav-drawer__item--disabled"; /** * @hidden */ get defaultCSS(): boolean; /** * @hidden */ get currentCSS(): boolean; /** * @hidden */ get headerCSS(): boolean; /** * @hidden */ get disabledCSS(): boolean; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; static ngAcceptInputType_active: unknown; static ngAcceptInputType_disabled: unknown; static ngAcceptInputType_isHeader: unknown; } declare class IgxNavDrawerTemplateDirective { template: TemplateRef; constructor(template: TemplateRef); static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } declare class IgxNavDrawerMiniTemplateDirective { template: TemplateRef; constructor(template: TemplateRef); static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * **Ignite UI for Angular Navigation Drawer** - * [Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/navdrawer) * * The Ignite UI Navigation Drawer is a collapsible side navigation container commonly used in combination with the Navbar. * * Example: * ```html * * * * * * ``` */ declare class IgxNavigationDrawerComponent implements IToggleView, OnInit, AfterContentInit, OnDestroy, OnChanges { private elementRef; private _state; protected renderer: Renderer2; private _touchManager; private platformUtil; /** @hidden @internal */ cssClass: boolean; /** * ID of the component * * ```typescript * // get * let myNavDrawerId = this.navdrawer.id; * ``` * * ```html * * * ``` */ id: string; /** * Position of the Navigation Drawer. Can be "left"(default) or "right". * * ```typescript * // get * let myNavDrawerPosition = this.navdrawer.position; * ``` * * ```html * * * ``` */ position: string; /** * Enables the use of touch gestures to manipulate the drawer: * - swipe/pan from edge to open, swipe-toggle and pan-drag. * * ```typescript * // get * let gesturesEnabled = this.navdrawer.enableGestures; * ``` * * ```html * * * ``` */ enableGestures: boolean; /** * @hidden */ isOpenChange: EventEmitter; /** * Minimum device width required for automatic pin to be toggled. * Default is 1024, can be set to a falsy value to disable this behavior. * * ```typescript * // get * let navDrawerPinThreshold = this.navdrawer.pinThreshold; * ``` * * ```html * * * ``` */ pinThreshold: number; /** * When pinned the drawer is relatively positioned instead of sitting above content. * May require additional layout styling. * * ```typescript * // get * let navDrawerIsPinned = this.navdrawer.pin; * ``` * * ```html * * * ``` */ pin: boolean; /** * Width of the drawer in its open state. * * ```typescript * // get * let navDrawerWidth = this.navdrawer.width; * ``` * * ```html * * * ``` */ private _width; get width(): string; set width(value: string); /** * Enables/disables the animation, when toggling the drawer. Set to `false` by default. * ````html * * ```` */ disableAnimation: boolean; /** * Width of the drawer in its mini state. * * ```typescript * // get * let navDrawerMiniWidth = this.navdrawer.miniWidth; * ``` * * ```html * * * ``` */ miniWidth: string; /** * Pinned state change output for two-way binding. * * ```html * * ``` */ pinChange: EventEmitter; /** * Event fired as the Navigation Drawer is about to open. * * ```html * * ``` */ opening: EventEmitter; /** * Event fired when the Navigation Drawer has opened. * * ```html * * ``` */ opened: EventEmitter; /** * Event fired as the Navigation Drawer is about to close. * * ```html * * ``` */ closing: EventEmitter; /** * Event fired when the Navigation Drawer has closed. * * ```html * * ``` */ closed: EventEmitter; /** * @hidden */ protected contentTemplate: IgxNavDrawerTemplateDirective; private _drawer; private _overlay; private _styleDummy; private _isOpen; /** * State of the drawer. * * ```typescript * // get * let navDrawerIsOpen = this.navdrawer.isOpen; * ``` * * ```html * * * ``` * * Two-way data binding. * ```html * * * ``` */ get isOpen(): boolean; set isOpen(value: boolean); /** * Returns nativeElement of the component. * * @hidden */ get element(): any; /** * @hidden */ get template(): i0.TemplateRef; private _miniTemplate; /** * @hidden */ get miniTemplate(): IgxNavDrawerMiniTemplateDirective; /** * @hidden */ set miniTemplate(v: IgxNavDrawerMiniTemplateDirective); /** @hidden @internal */ get isMini(): boolean; /** @hidden @internal */ get pinned(): boolean; /** * @hidden */ get normalSize(): string; /** * @hidden */ get miniSize(): string; /** @hidden */ get isPinnedRight(): "1" | "0"; private _gesturesAttached; private _widthCache; private _resizeObserver; private css; /** * @hidden */ get drawer(): any; /** * @hidden */ get overlay(): any; /** * @hidden */ get styleDummy(): any; /** Pan animation properties */ private _panning; private _panStartWidth; private _panLimit; /** * Property to decide whether to change width or translate the drawer from pan gesture. * * @hidden */ get hasAnimateWidth(): boolean; private _maxEdgeZone; /** * Used for touch gestures (swipe and pan). * Defaults to 50 (in px) and is extended to at least 110% of the mini template width if available. * * @hidden */ get maxEdgeZone(): number; /** * Gets the Drawer width for specific state. * Will attempt to evaluate requested state and cache. * * * @hidden */ get expectedWidth(): number; /** * Get the Drawer mini width for specific state. * Will attempt to evaluate requested state and cache. * * @hidden */ get expectedMiniWidth(): number; /** * @hidden */ get touchManager(): HammerGesturesManager; /** * Exposes optional navigation service * * @hidden */ get state(): IgxNavigationService; constructor(elementRef: ElementRef, _state: IgxNavigationService, renderer: Renderer2, _touchManager: HammerGesturesManager, platformUtil: PlatformUtil); /** * @hidden */ ngOnInit(): void; /** * @hidden */ ngAfterContentInit(): void; /** * @hidden */ ngOnDestroy(): void; /** * @hidden */ ngOnChanges(changes: { [propName: string]: SimpleChange; }): void; /** * Toggle the open state of the Navigation Drawer. * * ```typescript * this.navdrawer.toggle(); * ``` */ toggle(): void; /** * Open the Navigation Drawer. Has no effect if already opened. * * ```typescript * this.navdrawer.open(); * ``` */ open(): void; /** * Close the Navigation Drawer. Has no effect if already closed. * * ```typescript * this.navdrawer.close(); * ``` */ close(): void; /** * @hidden */ protected set_maxEdgeZone(value: number): void; /** * Get the Drawer width for specific state. Will attempt to evaluate requested state and cache. * * @hidden * @param [mini] - Request mini width instead */ protected getExpectedWidth(mini?: boolean): number; private getWindowWidth; /** * Get current Drawer width. */ private getDrawerWidth; private ensureEvents; private updateEdgeZone; private checkPinThreshold; private swipe; private panstart; private pan; private panEnd; private resetPan; /** * Sets the absolute position or width in case the drawer doesn't change position. * * @param x the number pixels to translate on the X axis or the width to set. 0 width will clear the style instead. * @param opacity optional value to apply to the overlay */ private setXSize; private toggleOpenedEvent; private toggleClosedEvent; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; static ngAcceptInputType_enableGestures: unknown; static ngAcceptInputType_pin: unknown; static ngAcceptInputType_disableAnimation: unknown; static ngAcceptInputType_isOpen: unknown; } declare const IGX_NAVIGATION_DRAWER_DIRECTIVES: readonly [typeof IgxNavigationDrawerComponent, typeof IgxNavDrawerItemDirective, typeof IgxNavDrawerMiniTemplateDirective, typeof IgxNavDrawerTemplateDirective]; declare class IgxProgressBarTextTemplateDirective { template: TemplateRef; constructor(template: TemplateRef); static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } declare class IgxProgressBarGradientDirective { template: TemplateRef; constructor(template: TemplateRef); static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } declare const IgxTextAlign: { readonly START: "start"; readonly CENTER: "center"; readonly END: "end"; }; type IgxTextAlign = (typeof IgxTextAlign)[keyof typeof IgxTextAlign]; declare const IgxProgressType: { readonly ERROR: "error"; readonly INFO: "info"; readonly WARNING: "warning"; readonly SUCCESS: "success"; }; type IgxProgressType = (typeof IgxProgressType)[keyof typeof IgxProgressType]; interface IChangeProgressEventArgs extends IBaseEventArgs { previousValue: number; currentValue: number; } /** * @hidden */ declare abstract class BaseProgressDirective { /** * An event, which is triggered after progress is changed. * ```typescript * public progressChange(event) { * alert("Progress made!"); * } * //... * ``` * ```html * * * ``` */ progressChanged: EventEmitter; /** * Sets/Gets progressbar animation duration. By default, it is 2000ms. * ```html * * * ``` */ animationDuration: number; protected _contentInit: boolean; protected _indeterminate: boolean; protected _text: string; protected _max: number; protected _value: number; protected _animate: boolean; protected _step: number; protected _fraction: number; protected _integer: number; protected _cdr: ChangeDetectorRef; protected _zone: NgZone; /** * Sets progressbar in indeterminate. By default, it is set to false. * ```html * * * ``` */ set indeterminate(isIndeterminate: boolean); /** * Gets the current state of the progress bar: * - `true` if in the indeterminate state (no progress value displayed), * - `false` if the progress bar shows the actual progress. * * ```typescript * const isIndeterminate = progressBar.indeterminate; * ``` */ get indeterminate(): boolean; /** * Returns the value which update the progress indicator of the `progress bar`. * ```typescript * @ViewChild("MyProgressBar") * public progressBar: IgxLinearProgressBarComponent | IgxCircularBarComponent; * public stepValue(event) { * let step = this.progressBar.step; * alert(step); * } * ``` */ get step(): number; /** * Sets the value by which progress indicator is updated. By default, it is 1. * ```html * * * ``` */ set step(val: number); /** * Set a custom text. This will hide the counter value. * ```html * * ``` */ set text(value: string); /** * Gets a custom text. * ```typescript * let text = this.circularBar.text; * ``` */ get text(): string; /** * Animating the progress. By default, it is set to true. * ```html * * * ``` */ set animate(animate: boolean); /** * Returns whether the `progress bar` has animation true/false. * ```typescript * @ViewChild("MyProgressBar") * public progressBar: IgxLinearProgressBarComponent | IgxCircularBarComponent; * public animationStatus(event) { * let animationStatus = this.progressBar.animate; * alert(animationStatus); * } * ``` */ get animate(): boolean; /** * Set maximum value that can be passed. By default it is set to 100. * ```html * * * ``` */ set max(maxNum: number); /** * Returns the maximum progress value of the `progress bar`. * ```typescript * @ViewChild("MyProgressBar") * public progressBar: IgxLinearProgressBarComponent | IgxCircularBarComponent; * public maxValue(event) { * let max = this.progressBar.max; * alert(max); * } * ``` */ get max(): number; private get progressInteger(); private get progressFraction(); private get progressWhole(); private get transitionDuration(); /** * @hidden */ protected get hasFraction(): boolean; /** * Returns the `IgxLinearProgressBarComponent`/`IgxCircularProgressBarComponent` value in percentage. * ```typescript * @ViewChild("MyProgressBar") * public progressBar: IgxLinearProgressBarComponent / IgxCircularProgressBarComponent * public valuePercent(event){ * let percentValue = this.progressBar.valueInPercent; * alert(percentValue); * } * ``` */ get valueInPercent(): number; /** * Returns value that indicates the current `IgxLinearProgressBarComponent`/`IgxCircularProgressBarComponent` position. * ```typescript * @ViewChild("MyProgressBar") * public progressBar: IgxLinearProgressBarComponent / IgxCircularProgressBarComponent; * public getValue(event) { * let value = this.progressBar.value; * alert(value); * } * ``` */ get value(): number; /** * @hidden */ protected _updateProgressValues(): void; private _resetCounterValues; /** * Set value that indicates the current `IgxLinearProgressBarComponent / IgxCircularProgressBarComponent` position. * ```html * * * ``` */ set value(val: number); static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; static ngAcceptInputType_indeterminate: unknown; static ngAcceptInputType_animate: unknown; } declare class IgxLinearProgressBarComponent extends BaseProgressDirective implements AfterContentInit { valueMin: number; cssClass: string; /** * Set `IgxLinearProgressBarComponent` to have striped style. By default it is set to false. * ```html * * ``` */ striped: boolean; /** * @hidden * ``` */ get isIndeterminate(): boolean; /** * Sets the value of the `role` attribute. If not provided it will be automatically set to `progressbar`. * ```html * * ``` */ role: string; /** * Sets the value of `id` attribute. If not provided it will be automatically generated. * ```html * * ``` */ id: string; /** * @hidden */ get disableAnimationClass(): boolean; /** * @hidden */ get hasText(): boolean; /** * Set the position that defines where the text is aligned. * Possible options - `IgxTextAlign.START` (default), `IgxTextAlign.CENTER`, `IgxTextAlign.END`. * ```typescript * public positionCenter: IgxTextAlign; * public ngOnInit() { * this.positionCenter = IgxTextAlign.CENTER; * } * //... * ``` * ```html * * ``` */ textAlign: IgxTextAlign; /** * Set the text to be visible. By default, it is set to true. * ```html * * ``` */ textVisibility: boolean; /** * Set the position that defines if the text should be aligned above the progress line. By default, is set to false. * ```html * * ``` */ textTop: boolean; /** * Set type of the `IgxLinearProgressBarComponent`. Possible options - `default`, `success`, `info`, `warning`, and `error`. * ```html * * ``` */ type: string; /** * @hidden */ get error(): boolean; /** * @hidden */ get info(): boolean; /** * @hidden */ get warning(): boolean; /** * @hidden */ get success(): boolean; ngAfterContentInit(): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; static ngAcceptInputType_striped: unknown; static ngAcceptInputType_textVisibility: unknown; static ngAcceptInputType_textTop: unknown; } declare class IgxCircularProgressBarComponent extends BaseProgressDirective implements AfterContentInit { private renderer; /** * @hidden */ cssClass: string; /** * Sets the value of `id` attribute. If not provided it will be automatically generated. * ```html * * ``` */ id: string; /** * @hidden */ get isIndeterminate(): boolean; /** * @hidden */ get disableAnimationClass(): boolean; /** * @hidden */ get hasText(): boolean; /** * Sets the text visibility. By default, it is set to true. * ```html * * ``` */ textVisibility: boolean; textTemplate: IgxProgressBarTextTemplateDirective; gradientTemplate: IgxProgressBarGradientDirective; private _svgCircle; /** * @hidden */ gradientId: string; /** * @hidden */ get context(): any; /** * @hidden */ get textContent(): string; constructor(renderer: Renderer2); /** * Set type of the `IgxCircularProgressBarComponent`. Possible options - `default`, `success`, `info`, `warning`, and `error`. * ```html * * ``` */ type: string; /** * @hidden */ get error(): boolean; /** * @hidden */ get info(): boolean; /** * @hidden */ get warning(): boolean; /** * @hidden */ get success(): boolean; /** * @hidden */ get strokeStyle(): string; ngAfterContentInit(): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; static ngAcceptInputType_textVisibility: unknown; } declare const IGX_PROGRESS_BAR_DIRECTIVES: readonly [typeof IgxLinearProgressBarComponent, typeof IgxCircularProgressBarComponent, typeof IgxProgressBarTextTemplateDirective, typeof IgxProgressBarGradientDirective]; declare const IGX_LINEAR_PROGRESS_BAR_DIRECTIVES: readonly [typeof IgxLinearProgressBarComponent, typeof IgxProgressBarGradientDirective]; declare const IGX_CIRCULAR_PROGRESS_BAR_DIRECTIVES: readonly [typeof IgxCircularProgressBarComponent, typeof IgxProgressBarTextTemplateDirective, typeof IgxProgressBarGradientDirective]; /** * Template directive that allows you to set a custom template representing the lower label value of the {@link IgxSliderComponent} * * ```html * * {{value}} * * ``` * * @context {@link IgxSliderComponent.context} */ declare class IgxThumbFromTemplateDirective { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * Template directive that allows you to set a custom template representing the upper label value of the {@link IgxSliderComponent} * * ```html * * {{value}} * * ``` * * @context {@link IgxSliderComponent.context} */ declare class IgxThumbToTemplateDirective { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * Template directive that allows you to set a custom template, represeting primary/secondary tick labels of the {@link IgxSliderComponent} * * @context {@link IgxTicksComponent.context} */ declare class IgxTickLabelTemplateDirective { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } interface IRangeSliderValue { lower: number; upper: number; } interface ISliderValueChangeEventArgs { oldValue: number | IRangeSliderValue; value: number | IRangeSliderValue; } declare const IgxSliderType: { /** * Slider with single thumb. */ readonly SLIDER: "slider"; /** * Range slider with multiple thumbs, that can mark the range. */ readonly RANGE: "range"; }; type IgxSliderType = (typeof IgxSliderType)[keyof typeof IgxSliderType]; declare const SliderHandle: { readonly FROM: "from"; readonly TO: "to"; }; type SliderHandle = (typeof SliderHandle)[keyof typeof SliderHandle]; /** * Slider Tick labels Orientation */ declare const TickLabelsOrientation: { readonly Horizontal: "horizontal"; readonly TopToBottom: "toptobottom"; readonly BottomToTop: "bottomtotop"; }; type TickLabelsOrientation = (typeof TickLabelsOrientation)[keyof typeof TickLabelsOrientation]; /** * Slider Ticks orientation */ declare const TicksOrientation: { readonly Top: "top"; readonly Bottom: "bottom"; readonly Mirror: "mirror"; }; type TicksOrientation = (typeof TicksOrientation)[keyof typeof TicksOrientation]; /** * @hidden */ declare class IgxSliderThumbComponent implements OnInit, OnDestroy { private _elementRef; private _dir; value: any; continuous: boolean; thumbLabelVisibilityDuration: number; disabled: boolean; onPan: Subject; stepDistance: number; step: number; templateRef: TemplateRef; context: any; type: SliderHandle; deactiveState: boolean; min: number; max: number; labels: any[]; thumbValueChange: EventEmitter; thumbChange: EventEmitter; thumbBlur: EventEmitter; hoverChange: EventEmitter; tabindex: number; role: string; get ariaValueNow(): any; get ariaValueMin(): number; get ariaValueMax(): number; get ariaValueText(): any; get ariaLabelAttr(): string; ariaOrientation: string; get ariaDisabled(): boolean; zIndex: number; focused: boolean; get thumbFromClass(): boolean; get thumbToClass(): boolean; get thumbFromActiveClass(): boolean; get thumbToActiveClass(): boolean; get thumbFromDisabledClass(): boolean; get thumbToDisabledClass(): boolean; get thumbFromPressedClass(): boolean; get thumbToPressedClass(): boolean; get getDotClass(): { 'igx-slider-thumb-from__dot': boolean; 'igx-slider-thumb-to__dot': boolean; }; isActive: boolean; get nativeElement(): any; get destroy(): Subject; private _isActive; private _isPressed; private _destroy$; private get thumbPositionX(); constructor(_elementRef: ElementRef, _dir: IgxDirectionality); onPointerEnter(): void; onPointerLeave(): void; onKeyUp(event: KeyboardEvent): void; onKeyDown(event: KeyboardEvent): void; onBlur(): void; onFocusListener(): void; /** * @hidden */ ngOnInit(): void; /** * @hidden */ ngOnDestroy(): void; /** * Show thumb label and ripple. */ showThumbIndicators(): void; /** * Hide thumb label and ripple. */ hideThumbIndicators(): void; private updateThumbValue; private calculateTrackUpdate; private stepToProceed; private toggleThumbIndicators; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; static ngAcceptInputType_continuous: unknown; static ngAcceptInputType_disabled: unknown; static ngAcceptInputType_deactiveState: unknown; } /** * **Ignite UI for Angular Slider** - * [Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/slider/slider) * * The Ignite UI Slider allows selection in a given range by moving the thumb along the track. The track * can be defined as continuous or stepped, and you can choose between single and range slider types. * * Example: * ```html * * * ``` */ declare class IgxSliderComponent implements ControlValueAccessor, EditorProvider, OnInit, AfterViewInit, AfterContentInit, OnChanges, OnDestroy { private renderer; private _el; private _cdr; private _ngZone; private _dir; /** * @hidden */ get thumbFrom(): IgxSliderThumbComponent; /** * @hidden */ get thumbTo(): IgxSliderThumbComponent; private get labelFrom(); private get labelTo(); /** * @hidden */ trackRef: ElementRef; /** * @hidden */ thumbFromTemplateRef: TemplateRef; /** * @hidden */ thumbToTemplateRef: TemplateRef; /** * @hidden */ tickLabelTemplateRef: TemplateRef; /** * @hidden */ slierClass: boolean; /** * Sets the value of the `id` attribute. * If not provided it will be automatically generated. * ```html * * ``` */ id: string; /** * Sets the duration visibility of thumbs labels. The default value is 750 milliseconds. * ```html * * ``` */ thumbLabelVisibilityDuration: number; /** * @hidden */ get disabledClass(): boolean; /** * Gets the type of the `IgxSliderComponent`. * The slider can be IgxSliderType.SLIDER(default) or IgxSliderType.RANGE. * ```typescript * @ViewChild("slider2") * public slider: IgxSliderComponent; * ngAfterViewInit(){ * let type = this.slider.type; * } */ get type(): IgxSliderType; /** * Sets the type of the `IgxSliderComponent`. * The slider can be IgxSliderType.SLIDER(default) or IgxSliderType.RANGE. * ```typescript * sliderType: IgxSliderType = IgxSliderType.RANGE; * ``` * ```html * * ``` */ set type(type: IgxSliderType); /** * Enables `labelView`, by accepting a collection of primitive values with more than one element. * Each element will be equally spread over the slider and it will serve as a thumb label. * Once the property is set, it will precendence over {@link maxValue}, {@link minValue}, {@link step}. * This means that the manipulation for those properties won't be allowed. */ get labels(): Array; set labels(labels: Array); /** * Returns the template context corresponding * to {@link IgxThumbFromTemplateDirective} and {@link IgxThumbToTemplateDirective} templates. * * ```typescript * return { * $implicit // returns the value of the label, * labels // returns the labels collection the user has passed. * } * ``` */ get context(): any; /** * Sets the incremental/decremental step of the value when dragging the thumb. * The default step is 1, and step should not be less or equal than 0. * ```html * * ``` */ set step(step: number); /** * Returns the incremental/decremental dragging step of the {@link IgxSliderComponent}. * ```typescript * @ViewChild("slider2") * public slider: IgxSliderComponent; * ngAfterViewInit(){ * let step = this.slider.step; * } * ``` */ get step(): number; /** * Returns if the {@link IgxSliderComponent} is disabled. * ```typescript * @ViewChild("slider2") * public slider: IgxSliderComponent; * ngAfterViewInit(){ * let isDisabled = this.slider.disabled; * } * ``` */ get disabled(): boolean; /** * Disables the component. * ```html * * ``` */ set disabled(disable: boolean); /** * Returns if the {@link IgxSliderComponent} is set as continuous. * ```typescript * @ViewChild("slider2") * public slider: IgxSliderComponent; * ngAfterViewInit(){ * let continuous = this.slider.continuous; * } * ``` */ get continuous(): boolean; /** * Sets the {@link IgxSliderComponent} as continuous. * By default is considered that the {@link IgxSliderComponent} is discrete. * Discrete {@link IgxSliderComponent} slider has step indicators over the track and visible thumb labels during interaction. * Continuous {@link IgxSliderComponent} does not have ticks and does not show bubble labels for values. * ```html * * ``` */ set continuous(continuous: boolean); /** * Returns the minimal displayed track value of the `IgxSliderComponent`. * ```typescript * @ViewChild("slider2") * public slider: IgxSliderComponent; * ngAfterViewInit(){ * let sliderMin = this.slider.minValue; * } * ``` */ get minValue(): number; /** * Sets the minimal displayed track value for the `IgxSliderComponent`. * The default minimal value is 0. * ```html * * ``` */ set minValue(value: number); /** * Returns the maximum displayed track value for the {@link IgxSliderComponent}. * ```typescript * @ViewChild("slider") * public slider: IgxSliderComponent; * ngAfterViewInit(){ * let sliderMax = this.slider.maxValue; * } * ``` */ get maxValue(): number; /** * Sets the maximal displayed track value for the `IgxSliderComponent`. * The default maximum value is 100. * ```html * * ``` */ set maxValue(value: number); /** * Returns the lower boundary of settable values of the `IgxSliderComponent`. * If not set, will return `minValue`. * ```typescript * @ViewChild("slider") * public slider: IgxSliderComponent; * ngAfterViewInit(){ * let sliderLowBound = this.slider.lowerBound; * } * ``` */ get lowerBound(): number; /** * Sets the lower boundary of settable values of the `IgxSliderComponent`. * If not set is the same as min value. * ```html * * ``` */ set lowerBound(value: number); /** * Returns the upper boundary of settable values of the `IgxSliderComponent`. * If not set, will return `maxValue` * ```typescript * @ViewChild("slider") * public slider: IgxSliderComponent; * ngAfterViewInit(){ * let sliderUpBound = this.slider.upperBound; * } * ``` */ get upperBound(): number; /** * Sets the upper boundary of the `IgxSliderComponent`. * If not set is the same as max value. * ```html * * ``` */ set upperBound(value: number); /** * Returns the slider value. If the slider is of type {@link IgxSliderType.SLIDER} the returned value is number. * If the slider type is {@link IgxSliderType.RANGE}. * The returned value represents an object of {@link lowerValue} and {@link upperValue}. * ```typescript * @ViewChild("slider2") * public slider: IgxSliderComponent; * public sliderValue(event){ * let sliderVal = this.slider.value; * } * ``` */ get value(): number | IRangeSliderValue; /** * Sets the slider value. * If the slider is of type {@link IgxSliderType.SLIDER}. * The argument is number. By default the {@link value} gets the {@link lowerBound}. * If the slider type is {@link IgxSliderType.RANGE} the argument * represents an object of {@link lowerValue} and {@link upperValue} properties. * By default the object is associated with the {@link lowerBound} and {@link upperBound} property values. * ```typescript * rangeValue = { * lower: 30, * upper: 60 * }; * ``` * ```html * * ``` */ set value(value: number | IRangeSliderValue); /** * Returns the number of the presented primary ticks. * ```typescript * const primaryTicks = this.slider.primaryTicks; * ``` */ get primaryTicks(): number; /** * Sets the number of primary ticks. If {@link @labels} is enabled, this property won't function. * Insted enable ticks by {@link showTicks} property. * ```typescript * this.slider.primaryTicks = 5; * ``` */ set primaryTicks(val: number); /** * Returns the number of the presented secondary ticks. * ```typescript * const secondaryTicks = this.slider.secondaryTicks; * ``` */ get secondaryTicks(): number; /** * Sets the number of secondary ticks. The property functions even when {@link labels} is enabled, * but all secondary ticks won't present any tick labels. * ```typescript * this.slider.secondaryTicks = 5; * ``` */ set secondaryTicks(val: number); /** * Show/hide slider ticks * ```html * * ``` */ showTicks: boolean; /** * show/hide primary tick labels * ```html * * ``` */ primaryTickLabels: boolean; /** * show/hide secondary tick labels * ```html * * ``` */ secondaryTickLabels: boolean; /** * Changes ticks orientation: * bottom - The default orienation, below the slider track. * top - Above the slider track * mirror - combines top and bottom orientation. * ```html * * ``` */ ticksOrientation: TicksOrientation; /** * Changes tick labels rotation: * horizontal - The default rotation * toptobottom - Rotates tick labels vertically to 90deg * bottomtotop - Rotate tick labels vertically to -90deg * ```html * * ``` */ tickLabelsOrientation: TickLabelsOrientation; /** * @hidden */ get deactivateThumbLabel(): boolean; /** * This event is emitted every time the value is changed. * ```typescript * public change(event){ * alert("The value has been changed!"); * } * ``` * ```html * * ``` */ valueChange: EventEmitter; /** * This event is emitted every time the lower value of a range slider is changed. * ```typescript * public change(value){ * alert(`The lower value has been changed to ${value}`); * } * ``` * ```html * * ``` */ lowerValueChange: EventEmitter; /** * This event is emitted every time the upper value of a range slider is changed. * ```typescript * public change(value){ * alert(`The upper value has been changed to ${value}`); * } * ``` * ```html * * ``` */ upperValueChange: EventEmitter; /** * This event is emitted at the end of every slide interaction. * ```typescript * public change(event){ * alert("The value has been changed!"); * } * ``` * ```html * * ``` */ dragFinished: EventEmitter; /** * @hidden */ private ticks; /** * @hidden */ private thumbs; /** * @hidden */ private labelRefs; /** * @hidden */ onPan: Subject; /** * @hidden */ stepDistance: number; private _pMin; private _pMax; private _hasViewInit; private _minValue; private _maxValue; private _lowerBound; private _upperBound; private _lowerValue; private _upperValue; private _continuous; private _disabled; private _step; private _value; private _primaryTicks; private _secondaryTicks; private _sliding; private _labels; private _type; private _destroyer$; private _indicatorsDestroyer$; private _indicatorsTimer; private _onChangeCallback; private _onTouchedCallback; constructor(renderer: Renderer2, _el: ElementRef, _cdr: ChangeDetectorRef, _ngZone: NgZone, _dir: IgxDirectionality); /** * @hidden */ onFocus(): void; /** * Returns whether the `IgxSliderComponent` type is RANGE. * ```typescript * @ViewChild("slider") * public slider: IgxSliderComponent; * ngAfterViewInit(){ * let sliderRange = this.slider.isRange; * } * ``` */ get isRange(): boolean; /** * Returns the lower value of a RANGE `IgxSliderComponent`. * ```typescript * @ViewChild("slider") * public slider: IgxSliderComponent; * public lowValue(event){ * let sliderLowValue = this.slider.lowerValue; * } * ``` */ get lowerValue(): number; /** * Sets the lower value of a RANGE `IgxSliderComponent`. * ```typescript * @ViewChild("slider") * public slider: IgxSliderComponent; * public lowValue(event){ * this.slider.lowerValue = value; * } * ``` */ set lowerValue(value: number); /** * Returns the upper value of a RANGE `IgxSliderComponent`. * Returns `value` of a SLIDER `IgxSliderComponent` * ```typescript * @ViewChild("slider2") * public slider: IgxSliderComponent; * public upperValue(event){ * let upperValue = this.slider.upperValue; * } * ``` */ get upperValue(): number; /** * Sets the upper value of a RANGE `IgxSliderComponent`. * ```typescript * @ViewChild("slider2") * public slider: IgxSliderComponent; * public upperValue(event){ * this.slider.upperValue = value; * } * ``` */ set upperValue(value: number); /** * Returns the value corresponding the lower label. * ```typescript * @ViewChild("slider") * public slider: IgxSliderComponent; * let label = this.slider.lowerLabel; * ``` */ get lowerLabel(): string | number | boolean; /** * Returns the value corresponding the upper label. * ```typescript * @ViewChild("slider") * public slider: IgxSliderComponent; * let label = this.slider.upperLabel; * ``` */ get upperLabel(): string | number | boolean; /** * Returns if label view is enabled. * If the {@link labels} is set, the view is automatically activated. * ```typescript * @ViewChild("slider") * public slider: IgxSliderComponent; * let labelView = this.slider.labelsViewEnabled; * ``` */ get labelsViewEnabled(): boolean; /** * @hidden */ get showTopTicks(): boolean; /** * @hidden */ get showBottomTicks(): boolean; /** * @hidden */ ngOnChanges(changes: SimpleChanges): void; /** * @hidden */ ngOnInit(): void; ngAfterContentInit(): void; /** * @hidden */ ngAfterViewInit(): void; /** * @hidden */ ngOnDestroy(): void; /** * @hidden */ writeValue(value: IRangeSliderValue | number): void; /** * @hidden */ registerOnChange(fn: any): void; /** * @hidden */ registerOnTouched(fn: any): void; /** @hidden */ getEditElement(): any; /** * * @hidden */ update(mouseX: any): void; /** * @hidden */ thumbChanged(value: number, thumbType: string): void; /** * @hidden */ onThumbChange(): void; /** * @hidden */ onHoverChange(state: boolean): void; setValue(value: number | IRangeSliderValue, triggerChange: boolean): void; private onPointerDown; private onPointerMove; private onPointerUp; private validateInitialValue; private findClosestThumb; private updateLowerBoundAndMinTravelZone; private updateUpperBoundAndMaxTravelZone; private calculateStepDistance; private valueInRange; private positionHandler; private positionHandlersAndUpdateTrack; private closestHandle; private setTickInterval; private showSliderIndicators; private hideSliderIndicators; private toggleSliderIndicators; private changeThumbFocusableState; private closestTo; private valueToFraction; private isNullishButNotZero; /** * @hidden * Normalizе the value when two-way data bind is used and {@link this.step} is set. * @param value */ private normalizeByStep; private updateTrack; private subscribeToEvents; private unsubscriber; private hasValueChanged; private emitValueChange; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; static ngAcceptInputType_disabled: unknown; static ngAcceptInputType_continuous: unknown; static ngAcceptInputType_showTicks: unknown; static ngAcceptInputType_primaryTickLabels: unknown; static ngAcceptInputType_secondaryTickLabels: unknown; } declare const IGX_SLIDER_DIRECTIVES: readonly [typeof IgxSliderComponent, typeof IgxThumbFromTemplateDirective, typeof IgxThumbToTemplateDirective, typeof IgxTickLabelTemplateDirective]; /** * * The Switch component is a binary choice selection component. * * @igxModule IgxSwitchModule * * @igxTheme igx-switch-theme, igx-tooltip-theme * * @igxKeywords switch, states, tooltip * * @igxGroup Data Entry & Display * @remarks * * The Ignite UI Switch lets the user toggle between on/off or true/false states. * * @example * ```html * * Simple switch * * ``` */ declare class IgxSwitchComponent extends CheckboxBaseDirective implements ControlValueAccessor, EditorProvider, AfterViewInit { /** * Returns the class of the switch component. * * @example * ```typescript * let switchClass = this.switch.cssClass; * ``` */ cssClass: string; /** * Sets/gets whether the switch is on or off. * Default value is 'false'. * * @example * ```html * * ``` */ set checked(value: boolean); get checked(): boolean; /** * Sets/gets the `disabled` attribute. * Default value is `false`. * * @example * ```html * * ``` */ disabled: boolean; /** * Sets/gets whether the switch component is invalid. * Default value is `false`. * * @example * ```html * * ``` * ```typescript * let isInvalid = this.switch.invalid; * ``` */ invalid: boolean; /** * Sets/gets whether the switch component is on focus. * Default value is `false`. * * @example * ```typescript * this.switch.focused = true; * ``` */ focused: boolean; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; static ngAcceptInputType_disabled: unknown; static ngAcceptInputType_invalid: unknown; } /** @hidden */ declare abstract class IgxTabsBase { items: QueryList; selectedIndex: number; abstract selectTab(tab: IgxTabItemBase, selected: boolean): any; } /** @hidden */ declare abstract class IgxTabItemBase { disabled: boolean; selected: boolean; headerTemplate: TemplateRef; panelTemplate: TemplateRef; headerComponent: IgxTabHeaderBase; panelComponent: IgxTabContentBase; } /** @hidden */ declare abstract class IgxTabHeaderBase { nativeElement: HTMLElement; } /** @hidden */ declare abstract class IgxTabContentBase { nativeElement: HTMLElement; } declare abstract class IgxTabItemDirective implements IgxTabItemBase, IgxSlideComponentBase { private tabs; /** @hidden */ headerComponent: IgxTabHeaderBase; /** @hidden */ panelComponent: IgxTabContentBase; /** @hidden */ headerTemplate: TemplateRef; /** @hidden */ panelTemplate: TemplateRef; /** * Output to enable support for two-way binding on [(selected)] */ selectedChange: EventEmitter; /** * Disables the item. */ disabled: boolean; /** @hidden */ direction: Direction; /** @hidden */ previous: boolean; private _selected; /** * Gets/Sets whether an item is selected. */ get selected(): boolean; set selected(value: boolean); /** @hidden */ constructor(tabs: IgxTabsBase); static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; static ngAcceptInputType_disabled: unknown; static ngAcceptInputType_selected: unknown; } declare abstract class IgxTabContentDirective implements IgxTabContentBase { tab: IgxTabItemDirective; private elementRef; /** @hidden */ role: string; /** @hidden */ constructor(tab: IgxTabItemDirective, elementRef: ElementRef); /** @hidden */ get tabIndex(): 0 | -1; /** @hidden */ get zIndex(): -1 | "auto"; /** @hidden */ get nativeElement(): HTMLElement; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } declare class IgxBottomNavContentComponent extends IgxTabContentDirective { /** @hidden */ defaultClass: boolean; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } declare abstract class IgxTabHeaderDirective implements IgxTabHeaderBase { protected tabs: IgxTabsBase; tab: IgxTabItemDirective; private elementRef; protected platform: PlatformUtil; /** @hidden */ role: string; /** @hidden */ constructor(tabs: IgxTabsBase, tab: IgxTabItemDirective, elementRef: ElementRef, platform: PlatformUtil); /** @hidden */ get tabIndex(): 0 | -1; /** @hidden */ get ariaSelected(): boolean; /** @hidden */ get ariaDisabled(): boolean; /** @hidden */ onClick(): void; /** @hidden */ get nativeElement(): HTMLElement; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } declare class IgxBottomNavHeaderComponent extends IgxTabHeaderDirective { /** @hidden */ get cssClassSelected(): boolean; /** @hidden */ get cssClassDisabled(): boolean; /** @hidden */ get cssClass(): boolean; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } declare class IgxBottomNavItemComponent extends IgxTabItemDirective { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } interface ITabsBaseEventArgs extends IBaseEventArgs { readonly owner: IgxTabsDirective; } interface ITabsSelectedIndexChangingEventArgs extends ITabsBaseEventArgs { cancel: boolean; readonly oldIndex: number; newIndex: number; } interface ITabsSelectedItemChangeEventArgs extends ITabsBaseEventArgs { readonly oldItem: IgxTabItemDirective; readonly newItem: IgxTabItemDirective; } declare abstract class IgxTabsDirective extends IgxCarouselComponentBase implements IgxTabsBase, AfterViewInit, OnDestroy { dir: IgxDirectionality; /** * Gets/Sets the index of the selected item. * Default value is 0 if contents are defined otherwise defaults to -1. */ get selectedIndex(): number; set selectedIndex(value: number); /** * Enables/disables the transition animation of the contents. */ disableAnimation: boolean; /** * Output to enable support for two-way binding on [(selectedIndex)] */ selectedIndexChange: EventEmitter; /** * Emitted when the selected index is about to change. */ selectedIndexChanging: EventEmitter; /** * Emitted when the selected item is changed. */ selectedItemChange: EventEmitter; /** * Returns the items. */ items: QueryList; /** * Gets the selected item. */ get selectedItem(): IgxTabItemDirective; /** @hidden */ panels: QueryList; /** @hidden */ protected currentItem: IgxTabItemDirective; /** @hidden */ protected previousItem: IgxTabItemDirective; /** @hidden */ protected componentName: string; private _selectedIndex; private _itemChanges$; /** @hidden */ constructor(animationService: AnimationService, cdr: ChangeDetectorRef, dir: IgxDirectionality); /** @hidden */ ngAfterViewInit(): void; /** @hidden */ ngOnDestroy(): void; /** @hidden */ selectTab(tab: IgxTabItemDirective, selected: boolean): void; /** @hidden */ protected getPreviousElement(): HTMLElement; /** @hidden */ protected getCurrentElement(): HTMLElement; /** @hidden */ protected scrollTabHeaderIntoView(): void; /** @hidden */ protected onItemChanges(): void; private setAttributes; private setHeaderAttribute; private setPanelAttribute; private get hasPanels(); private updateSelectedTabs; private triggerPanelAnimations; /** @hidden */ protected abstract getNextTabId(): any; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; static ngAcceptInputType_disableAnimation: unknown; } /** * Bottom Navigation component enables the user to navigate among a number of contents displayed in a single view. * * @igxModule IgxBottomNavModule * * @igxTheme igx-bottom-nav-theme * * @igxKeywords bottom navigation * * @igxGroup Layouts * * @remarks * The Ignite UI for Angular Bottom Navigation component enables the user to navigate among a number of contents * displayed in a single view. The navigation through the contents is accomplished with the tab buttons located at bottom. * * @example * ```html * * * * folder * Tab 1 * * * Content 1 * * * ... * * ``` */ declare class IgxBottomNavComponent extends IgxTabsDirective { /** @hidden */ disableAnimation: boolean; /** @hidden */ protected componentName: string; /** @hidden */ protected getNextTabId(): number; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } declare class IgxBottomNavHeaderLabelDirective { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } declare class IgxBottomNavHeaderIconDirective { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } declare const IGX_BOTTOM_NAV_DIRECTIVES: readonly [typeof IgxBottomNavComponent, typeof IgxBottomNavItemComponent, typeof IgxBottomNavHeaderComponent, typeof IgxBottomNavContentComponent, typeof IgxBottomNavHeaderLabelDirective, typeof IgxBottomNavHeaderIconDirective]; declare class IgxTabContentComponent extends IgxTabContentDirective { /** @hidden */ cssClass: boolean; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } declare const IgxTabsAlignment: { readonly start: "start"; readonly end: "end"; readonly center: "center"; readonly justify: "justify"; }; type IgxTabsAlignment = (typeof IgxTabsAlignment)[keyof typeof IgxTabsAlignment]; /** * Tabs component is used to organize or switch between similar data sets. * * @igxModule IgxTabsModule * * @igxTheme igx-tabs-theme * * @igxKeywords tabs * * @igxGroup Layouts * * @remarks * The Ignite UI for Angular Tabs component places tabs at the top and allows for scrolling when there are multiple tab items on the screen. * * @example * ```html * * * * folder * Tab 1 * * * Content 1 * * * ... * * ``` */ declare class IgxTabsComponent extends IgxTabsDirective implements AfterViewInit, OnDestroy { private ngZone; private platform; /** * Gets/Sets the tab alignment. Defaults to `start`. */ get tabAlignment(): string | IgxTabsAlignment; set tabAlignment(value: string | IgxTabsAlignment); /** * Determines the tab activation. * When set to auto, the tab is instantly selected while navigating with the Left/Right Arrows, Home or End keys and the corresponding panel is displayed. * When set to manual, the tab is only focused. The selection happens after pressing Space or Enter. * Defaults is auto. */ activation: 'auto' | 'manual'; /** @hidden */ headerContainer: ElementRef; /** @hidden */ viewPort: ElementRef; /** @hidden */ itemsWrapper: ElementRef; /** @hidden */ itemsContainer: ElementRef; /** @hidden */ selectedIndicator: ElementRef; /** @hidden */ scrollPrevButton: ElementRef; /** @hidden */ scrollNextButton: ElementRef; /** @hidden */ defaultClass: boolean; /** @hidden */ offset: number; /** @hidden */ protected componentName: string; private _tabAlignment; private _resizeObserver; constructor(animationService: AnimationService, cdr: ChangeDetectorRef, ngZone: NgZone, dir: IgxDirectionality, platform: PlatformUtil); /** @hidden @internal */ ngAfterViewInit(): void; /** @hidden @internal */ ngOnDestroy(): void; /** @hidden */ scrollPrev(): void; /** @hidden */ scrollNext(): void; /** @hidden */ realignSelectedIndicator(): void; /** @hidden */ resolveHeaderScrollClasses(): { 'igx-tabs__header-scroll--start': boolean; 'igx-tabs__header-scroll--end': boolean; 'igx-tabs__header-scroll--center': boolean; 'igx-tabs__header-scroll--justify': boolean; }; /** @hidden */ protected scrollTabHeaderIntoView(): void; /** @hidden */ protected getNextTabId(): number; /** @hidden */ protected onItemChanges(): void; private alignSelectedIndicator; private hideSelectedIndicator; private scroll; private scrollElement; private updateScrollButtons; private setScrollButtonStyle; private resolveLeftScrollButtonStyle; private resolveRightScrollButtonStyle; private getTabItemsContainerWidth; private getOffset; private getElementOffset; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } declare class IgxTabHeaderComponent extends IgxTabHeaderDirective implements AfterViewInit, OnDestroy { protected tabs: IgxTabsComponent; private ngZone; private dir; /** @hidden @internal */ get provideCssClassSelected(): boolean; /** @hidden @internal */ get provideCssClassDisabled(): boolean; /** @hidden @internal */ cssClass: boolean; private _resizeObserver; /** @hidden @internal */ constructor(tabs: IgxTabsComponent, tab: IgxTabItemDirective, elementRef: ElementRef, platform: PlatformUtil, ngZone: NgZone, dir: IgxDirectionality); /** @hidden @internal */ keyDown(event: KeyboardEvent): void; /** @hidden @internal */ ngAfterViewInit(): void; /** @hidden @internal */ ngOnDestroy(): void; private getNewSelectionIndex; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } declare class IgxTabItemComponent extends IgxTabItemDirective { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } declare class IgxTabHeaderLabelDirective { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } declare class IgxTabHeaderIconDirective { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } declare const IGX_TABS_DIRECTIVES: readonly [typeof IgxTabsComponent, typeof IgxTabItemComponent, typeof IgxTabHeaderComponent, typeof IgxTabContentComponent, typeof IgxTabHeaderLabelDirective, typeof IgxTabHeaderIconDirective, typeof IgxPrefixDirective, typeof IgxSuffixDirective]; /** * This file contains all the directives used by the @link IgxTimePickerComponent. * You should generally not use them directly. * * @preferred */ /** @hidden */ declare class IgxItemListDirective implements OnInit, OnDestroy { timePicker: IgxTimePickerBase; private elementRef; private touchManager; tabindex: number; type: string; isActive: boolean; constructor(timePicker: IgxTimePickerBase, elementRef: ElementRef, touchManager: HammerGesturesManager); get defaultCSS(): boolean; get hourCSS(): boolean; get minuteCSS(): boolean; get secondsCSS(): boolean; get ampmCSS(): boolean; onFocus(): void; onBlur(): void; /** * @hidden */ onKeydownArrowDown(event: KeyboardEvent): void; /** * @hidden */ onKeydownArrowUp(event: KeyboardEvent): void; /** * @hidden */ onKeydownArrowRight(event: KeyboardEvent): void; /** * @hidden */ onKeydownArrowLeft(event: KeyboardEvent): void; /** * @hidden */ onKeydownEnter(event: KeyboardEvent): void; /** * @hidden */ onKeydownEscape(event: KeyboardEvent): void; /** * @hidden */ onHover(): void; /** * @hidden */ onScroll(event: any): void; /** * @hidden @internal */ ngOnInit(): void; /** * @hidden @internal */ ngOnDestroy(): void; private onPanMove; private nextItem; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * @hidden */ declare class IgxTimeItemDirective { timePicker: IgxTimePickerBase; private itemList; value: string; get defaultCSS(): boolean; get selectedCSS(): boolean; get activeCSS(): boolean; get isSelectedTime(): boolean; get minValue(): string; get maxValue(): string; get hourValue(): string; constructor(timePicker: IgxTimePickerBase, itemList: IgxItemListDirective); onClick(item: any): void; private getHourPart; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } declare const IGX_TIME_PICKER_DIRECTIVES: readonly [typeof IgxTimePickerComponent, typeof IgxPickerActionsDirective, typeof IgxPickerToggleComponent, typeof IgxPickerClearComponent, typeof IgxLabelDirective, typeof IgxPrefixDirective, typeof IgxSuffixDirective, typeof IgxHintDirective]; /** * **Ignite UI for Angular Toast** - * [Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/toast) * * The Ignite UI Toast provides information and warning messages that are non-interactive and cannot * be dismissed by the user. Toasts can be displayed at the bottom, middle, or top of the page. * * Example: * ```html * * * Notification displayed * * ``` */ declare class IgxToastComponent extends IgxNotificationsDirective implements OnInit { private _element; /** * @hidden */ cssClass: string; /** * Sets/gets the `id` of the toast. * If not set, the `id` will have value `"igx-toast-0"`. * ```html * * ``` * ```typescript * let toastId = this.toast.id; * ``` */ id: string; /** * Sets/gets the `role` attribute. * If not set, `role` will have value `"alert"`. * ```html * * ``` * ```typescript * let toastRole = this.toast.role; * ``` * * @memberof IgxToastComponent */ role: string; /** * @hidden */ isVisibleChange: EventEmitter; /** * Get the position and animation settings used by the toast. * ```typescript * @ViewChild('toast', { static: true }) public toast: IgxToastComponent; * let currentPosition: PositionSettings = this.toast.positionSettings * ``` */ get positionSettings(): PositionSettings; /** * Set the position and animation settings used by the toast. * ```html * * ``` * ```typescript * import { slideInTop, slideOutBottom } from 'igniteui-angular'; * ... * @ViewChild('toast', { static: true }) public toast: IgxToastComponent; * public newPositionSettings: PositionSettings = { * openAnimation: useAnimation(slideInTop, { params: { duration: '1000ms', fromPosition: 'translateY(100%)'}}), * closeAnimation: useAnimation(slideOutBottom, { params: { duration: '1000ms', fromPosition: 'translateY(0)'}}), * horizontalDirection: HorizontalAlignment.Left, * verticalDirection: VerticalAlignment.Middle, * horizontalStartPoint: HorizontalAlignment.Left, * verticalStartPoint: VerticalAlignment.Middle * }; * this.toast.positionSettings = this.newPositionSettings; * ``` */ set positionSettings(settings: PositionSettings); private _positionSettings; /** * Gets the nativeElement of the toast. * ```typescript * let nativeElement = this.toast.element; * ``` * * @memberof IgxToastComponent */ get element(): any; constructor(_element: ElementRef, cdr: ChangeDetectorRef, navService: IgxNavigationService, overlayService: IgxOverlayService); /** * Shows the toast. * If `autoHide` is enabled, the toast will hide after `displayTime` is over. * * ```typescript * this.toast.open(); * ``` */ open(message?: string, settings?: PositionSettings): void; /** * Opens or closes the toast, depending on its current state. * * ```typescript * this.toast.toggle(); * ``` */ toggle(): void; /** * @hidden */ ngOnInit(): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * The `` is a container intended for row items in * a `` container. */ declare class IgxSelectGroupComponent extends IgxDropDownGroupComponent { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } declare const IGX_SELECT_DIRECTIVES: readonly [typeof IgxSelectComponent, typeof IgxSelectItemComponent, typeof IgxSelectGroupComponent, typeof IgxSelectHeaderDirective, typeof IgxSelectFooterDirective, typeof IgxSelectToggleIconDirective, typeof IgxLabelDirective, typeof IgxPrefixDirective, typeof IgxSuffixDirective, typeof IgxHintDirective]; /** * Represents individual resizable/collapsible panes. * * @igxModule IgxSplitterModule * * @igxParent IgxSplitterComponent * * @igxKeywords pane * * @igxGroup presentation * * @remarks * Users can control the resize behavior via the min and max size properties. */ declare class IgxSplitterPaneComponent { private el; private _minSize; private _maxSize; /** * @hidden @internal * Gets/Sets the 'display' property of the current pane. */ display: string; /** * Gets/Sets the minimum allowed size of the current pane. * * @example * ```html * * ... * * ``` */ get minSize(): string; set minSize(value: string); /** * Gets/Set the maximum allowed size of the current pane. * * @example * ```html * * ... * * ``` */ get maxSize(): string; set maxSize(value: string); /** * Gets/Sets whether pane is resizable. * * @example * ```html * * ... * * ``` * @remarks * If pane is not resizable its related splitter bar cannot be dragged. */ resizable: boolean; /** * Event fired when collapsed state of pane is changed. * * @example * ```html * * ... * * ``` */ collapsedChange: EventEmitter; /** @hidden @internal */ order: number; /** * @hidden @internal * Gets/Sets the `overflow`. */ overflow: string; /** * @hidden @internal * Get/Sets the `minWidth` properties of the current pane. */ minWidth: string; /** * @hidden @internal * Get/Sets the `maxWidth` properties of the current pane. */ maxWidth: string; /** * @hidden @internal * Gets/Sets the `minHeight` properties of the current pane. */ minHeight: string; /** * @hidden @internal * Gets/Sets the `maxHeight` properties of the current `IgxSplitterPaneComponent`. */ maxHeight: string; /** @hidden @internal */ owner: any; /** * Gets/Sets the size of the current pane. * * @example * ```html * * ... * * ``` */ get size(): string; set size(value: string); /** @hidden @internal */ get isPercentageSize(): boolean; /** @hidden @internal */ get dragSize(): any; set dragSize(val: any); /** * * @hidden @internal * Gets the host native element. */ get element(): any; /** * @hidden @internal * Gets the `flex` property of the current `IgxSplitterPaneComponent`. */ get flex(): string; /** * Gets/Sets whether current pane is collapsed. * * @example * ```typescript * const isCollapsed = pane.collapsed; * ``` */ set collapsed(value: boolean); get collapsed(): boolean; private _size; private _dragSize; private _collapsed; constructor(el: ElementRef); /** * Toggles the collapsed state of the pane. * * @example * ```typescript * pane.toggle(); * ``` */ toggle(): void; /** @hidden @internal */ private _getSiblings; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; static ngAcceptInputType_resizable: unknown; static ngAcceptInputType_collapsed: unknown; } /** * An enumeration that defines the `SplitterComponent` panes orientation. */ declare enum SplitterType { Horizontal = 0, Vertical = 1 } declare interface ISplitterBarResizeEventArgs { pane: IgxSplitterPaneComponent; sibling: IgxSplitterPaneComponent; } /** * Provides a framework for a simple layout, splitting the view horizontally or vertically * into multiple smaller resizable and collapsible areas. * * @igxModule IgxSplitterModule * * @igxParent Layouts * * @igxTheme igx-splitter-theme * * @igxKeywords splitter panes layout * * @igxGroup presentation * * @example * ```html * * * ... * * * ... * * * ``` */ declare class IgxSplitterComponent implements AfterContentInit { document: any; private elementRef; /** * Gets the list of splitter panes. * * @example * ```typescript * const panes = this.splitter.panes; * ``` */ panes: QueryList; /** * @hidden * @internal */ cssClass: string; /** * @hidden @internal * Gets/Sets the `overflow` property of the current splitter. */ overflow: string; /** * @hidden @internal * Sets/Gets the `display` property of the current splitter. */ display: string; /** * @hidden * @internal */ get orientation(): "horizontal" | "vertical"; /** * Event fired when resizing of panes starts. * * @example * ```html * * ... * * ``` */ resizeStart: EventEmitter; /** * Event fired when resizing of panes is in progress. * * @example * ```html * * ... * * ``` */ resizing: EventEmitter; /** * Event fired when resizing of panes ends. * * @example * ```html * * ... * * ``` */ resizeEnd: EventEmitter; private _type; /** * @hidden @internal * A field that holds the initial size of the main `IgxSplitterPaneComponent` in each pair of panes divided by a splitter bar. */ private initialPaneSize; /** * @hidden @internal * A field that holds the initial size of the sibling pane in each pair of panes divided by a gripper. * @memberof SplitterComponent */ private initialSiblingSize; /** * @hidden @internal * The main pane in each pair of panes divided by a gripper. */ private pane; /** * The sibling pane in each pair of panes divided by a splitter bar. */ private sibling; constructor(document: any, elementRef: ElementRef); /** * Gets/Sets the splitter orientation. * * @example * ```html * ... * ``` */ get type(): SplitterType; set type(value: SplitterType); /** * Sets the visibility of the handle and expanders in the splitter bar. * False by default * * @example * ```html * * * ``` */ nonCollapsible: boolean; /** * @hidden @internal * Gets the `flex-direction` property of the current `SplitterComponent`. */ get direction(): string; /** @hidden @internal */ ngAfterContentInit(): void; /** * @hidden @internal * This method performs initialization logic when the user starts dragging the splitter bar between each pair of panes. * @param pane - the main pane associated with the currently dragged bar. */ onMoveStart(pane: IgxSplitterPaneComponent): void; /** * @hidden @internal * This method performs calculations concerning the sizes of each pair of panes when the bar between them is dragged. * @param delta - The difference along the X (or Y) axis between the initial and the current point when dragging the bar. */ onMoving(delta: number): void; onMoveEnd(delta: number): void; /** @hidden @internal */ getPaneSiblingsByOrder(order: number, barIndex: number): Array; private getTotalSize; /** * @hidden @internal * This method inits panes with properties. */ private initPanes; /** * @hidden @internal * This method reset pane sizes. */ private resetPaneSizes; /** * @hidden @internal * This method assigns the order of each pane. */ private assignFlexOrder; /** * @hidden @internal * Calculates new sizes for the panes based on move delta and initial sizes */ private calcNewSizes; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; static ngAcceptInputType_nonCollapsible: unknown; } /** * @hidden @internal * Represents the draggable bar that visually separates panes and allows for changing their sizes. */ declare class IgxSplitBarComponent { /** * Set css class to the host element. */ cssClass: string; /** * Sets the visibility of the handle and expanders in the splitter bar. */ nonCollapsible: any; /** * Gets/Sets the orientation. */ type: SplitterType; /** * Sets/gets the element order. */ order: number; /** * @hidden * @internal */ get tabindex(): number; /** * @hidden * @internal */ get orientation(): "horizontal" | "vertical"; /** * @hidden * @internal */ get cursor(): "" | "col-resize" | "row-resize"; /** * Sets/gets the `SplitPaneComponent` associated with the current `SplitBarComponent`. * * @memberof SplitBarComponent */ pane: IgxSplitterPaneComponent; /** * Sets/Gets the `SplitPaneComponent` sibling components associated with the current `SplitBarComponent`. */ siblings: Array; /** * An event that is emitted whenever we start dragging the current `SplitBarComponent`. */ moveStart: EventEmitter; /** * An event that is emitted while we are dragging the current `SplitBarComponent`. */ moving: EventEmitter; movingEnd: EventEmitter; /** * A temporary holder for the pointer coordinates. */ private startPoint; private interactionKeys; /** * @hidden @internal */ get prevButtonHidden(): boolean; /** * @hidden @internal */ keyEvent(event: KeyboardEvent): void; /** * @hidden @internal */ get dragDir(): DragDirection.VERTICAL | DragDirection.HORIZONTAL; /** * @hidden @internal */ get nextButtonHidden(): boolean; /** * @hidden @internal */ onDragStart(event: IDragStartEventArgs): void; /** * @hidden @internal */ onDragMove(event: IDragMoveEventArgs): void; onDragEnd(event: any): void; protected get resizeDisallowed(): boolean; /** * @hidden @internal */ onCollapsing(next: boolean): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; static ngAcceptInputType_nonCollapsible: unknown; } declare const IGX_SPLITTER_DIRECTIVES: readonly [typeof IgxSplitterComponent, typeof IgxSplitterPaneComponent, typeof IgxSplitBarComponent]; /** @hidden @internal */ declare class IgxStepperService { activeStep: IgxStepComponent; previousActiveStep: IgxStepComponent; focusedStep: IgxStepComponent; collapsingSteps: Set; linearDisabledSteps: Set; visitedSteps: Set; stepper: IgxStepper; /** * Activates the step, fires the steps change event and plays animations. */ expand(step: IgxStepComponent): void; /** * Activates the step and fires the steps change event without playing animations. */ expandThroughApi(step: IgxStepComponent): void; /** * Collapses the currently active step and fires the change event. */ collapse(step: IgxStepComponent): void; /** * Determines the steps that should be marked as visited based on the active step. */ calculateVisitedSteps(): void; /** * Determines the steps that should be disabled in linear mode based on the validity of the active step. */ calculateLinearDisabledSteps(): void; emitActivatingEvent(step: IgxStepComponent): boolean; /** * Updates the linearDisabled steps from the current active step to the next required invalid step. * * @param toIndex the index of the last step that should be enabled. */ private updateLinearDisabledSteps; private getNextRequiredStep; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵprov: i0.ɵɵInjectableDeclaration; } /** * Allows a custom element to be added as an active step indicator. * * @igxModule IgxStepperModule * @igxTheme igx-stepper-theme * @igxKeywords stepper * @igxGroup Layouts * * @example * * * edit * * */ declare class IgxStepActiveIndicatorDirective { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * Allows a custom element to be added as a complete step indicator. * * @igxModule IgxStepperModule * @igxTheme igx-stepper-theme * @igxKeywords stepper * @igxGroup Layouts * * @example * * * check * * */ declare class IgxStepCompletedIndicatorDirective { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * Allows a custom element to be added as an invalid step indicator. * * @igxModule IgxStepperModule * @igxTheme igx-stepper-theme * @igxKeywords stepper * @igxGroup Layouts * * @example * * * error * * */ declare class IgxStepInvalidIndicatorDirective { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * Allows a custom element to be added as a step indicator. * * @igxModule IgxStepperModule * @igxTheme igx-stepper-theme * @igxKeywords stepper * @igxGroup Layouts * * @example * * * home * * */ declare class IgxStepIndicatorDirective { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * Allows a custom element to be added as a step title. * * @igxModule IgxStepperModule * @igxTheme igx-stepper-theme * @igxKeywords stepper * @igxGroup Layouts * * @example * * *

Home

*
*
*/ declare class IgxStepTitleDirective { defaultClass: boolean; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * Allows a custom element to be added as a step subtitle. * * @igxModule IgxStepperModule * @igxTheme igx-stepper-theme * @igxKeywords stepper * @igxGroup Layouts * * @example * * *

Home Subtitle

*
*
*/ declare class IgxStepSubtitleDirective { defaultClass: boolean; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * Allows a custom element to be added as a step content. * * @igxModule IgxStepperModule * @igxTheme igx-stepper-theme * @igxKeywords stepper * @igxGroup Layouts * * @example * * *
...
*
*
*/ declare class IgxStepContentDirective { private step; private stepperService; elementRef: ElementRef; private get target(); defaultClass: boolean; role: string; get stepId(): string; id: string; get tabIndex(): number; set tabIndex(val: number); private _tabIndex; constructor(step: IgxStep, stepperService: IgxStepperService, elementRef: ElementRef); static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * IgxStepper provides a wizard-like workflow by dividing content into logical steps. * * @igxModule IgxStepperModule * * @igxKeywords stepper * * @igxGroup Layouts * * @remarks * The Ignite UI for Angular Stepper component allows the user to navigate between multiple steps. * It supports horizontal and vertical orientation as well as keyboard navigation and provides API methods to control the active step. * The component offers keyboard navigation and API to control the active step. * * @example * ```html * * * home *

Home

*
* ... *
*
* *
* ... *
*
* *
* ... *
*
*
* ``` */ declare class IgxStepperComponent extends IgxCarouselComponentBase implements IgxStepper, OnChanges, OnInit, AfterContentInit, OnDestroy { private stepperService; private element; /** * Get/Set the animation type of the stepper when the orientation direction is vertical. * * @remarks * Default value is `grow`. Other possible values are `fade` and `none`. * * ```html * * * ``` */ get verticalAnimationType(): VerticalAnimationType; set verticalAnimationType(value: VerticalAnimationType); /** * Get/Set the animation type of the stepper when the orientation direction is horizontal. * * @remarks * Default value is `grow`. Other possible values are `fade` and `none`. * * ```html * * * ``` */ get horizontalAnimationType(): HorizontalAnimationType; set horizontalAnimationType(value: HorizontalAnimationType); /** * Get/Set the animation duration. * ```html * * * ``` */ get animationDuration(): number; set animationDuration(value: number); /** * Get/Set whether the stepper is linear. * * @remarks * If the stepper is in linear mode and if the active step is valid only then the user is able to move forward. * * ```html * * ``` */ get linear(): boolean; set linear(value: boolean); /** * Get/Set the stepper orientation. * * ```typescript * this.stepper.orientation = IgxStepperOrientation.Vertical; * ``` */ get orientation(): IgxStepperOrientation; set orientation(value: IgxStepperOrientation); /** * Get/Set the type of the steps. * * ```typescript * this.stepper.stepType = IgxStepType.Indicator; * ``` */ stepType: IgxStepType; /** * Get/Set whether the content is displayed above the steps. * * @remarks * Default value is `false` and the content is below the steps. * * ```typescript * this.stepper.contentTop = true; * ``` */ contentTop: boolean; /** * Get/Set the position of the steps title. * * @remarks * The default value when the stepper is horizontally orientated is `bottom`. * In vertical layout the default title position is `end`. * * ```typescript * this.stepper.titlePosition = IgxStepperTitlePosition.Top; * ``` */ titlePosition: IgxStepperTitlePosition; /** @hidden @internal **/ cssClass: string; /** @hidden @internal **/ role: string; /** @hidden @internal **/ get directionClass(): boolean; /** * Emitted when the stepper's active step is changing. * *```html * * * ``` * *```typescript * public handleActiveStepChanging(event: IStepChangingEventArgs) { * if (event.newIndex < event.oldIndex) { * event.cancel = true; * } * } *``` */ activeStepChanging: EventEmitter; /** * Emitted when the active step is changed. * * @example * ``` * * ``` */ activeStepChanged: EventEmitter; /** @hidden @internal */ invalidIndicatorTemplate: TemplateRef; /** @hidden @internal */ completedIndicatorTemplate: TemplateRef; /** @hidden @internal */ activeIndicatorTemplate: TemplateRef; /** @hidden @internal */ private _steps; /** * Get all steps. * * ```typescript * const steps: IgxStepComponent[] = this.stepper.steps; * ``` */ get steps(): IgxStepComponent[]; /** @hidden @internal */ get nativeElement(): HTMLElement; /** @hidden @internal */ verticalAnimationSettings: ToggleAnimationSettings; /** @hidden @internal */ _defaultTitlePosition: IgxStepperTitlePosition; private destroy$; private _orientation; private _verticalAnimationType; private _linear; private readonly _defaultAnimationDuration; constructor(cdr: ChangeDetectorRef, animationService: AnimationService, stepperService: IgxStepperService, element: ElementRef); /** @hidden @internal */ ngOnChanges(changes: SimpleChanges): void; /** @hidden @internal */ ngOnInit(): void; /** @hidden @internal */ ngAfterContentInit(): void; /** @hidden @internal */ ngOnDestroy(): void; /** * Activates the step at a given index. * *```typescript * this.stepper.navigateTo(1); *``` */ navigateTo(index: number): void; /** * Activates the next enabled step. * *```typescript * this.stepper.next(); *``` */ next(): void; /** * Activates the previous enabled step. * *```typescript * this.stepper.prev(); *``` */ prev(): void; /** * Resets the stepper to its initial state i.e. activates the first step. * * @remarks * The steps' content will not be automatically reset. *```typescript * this.stepper.reset(); *``` */ reset(): void; /** @hidden @internal */ playHorizontalAnimations(): void; protected getPreviousElement(): HTMLElement; protected getCurrentElement(): HTMLElement; private updateVerticalAnimationSettings; private updateStepAria; private handleStepChanges; private activateFirstStep; private activateStep; private moveToNextStep; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; static ngAcceptInputType_linear: unknown; static ngAcceptInputType_contentTop: unknown; } interface IgxStepper extends IgxCarouselComponentBase { steps: IgxStepComponent[]; /** @hidden @internal */ nativeElement: HTMLElement; /** @hidden @internal */ invalidIndicatorTemplate: TemplateRef; /** @hidden @internal */ completedIndicatorTemplate: TemplateRef; /** @hidden @internal */ activeIndicatorTemplate: TemplateRef; verticalAnimationType: VerticalAnimationType; horizontalAnimationType: HorizontalAnimationType; animationDuration: number; linear: boolean; orientation: IgxStepperOrientation; stepType: IgxStepType; contentTop: boolean; titlePosition: IgxStepperTitlePosition; /** @hidden @internal */ verticalAnimationSettings: ToggleAnimationSettings; /** @hidden @internal */ _defaultTitlePosition: IgxStepperTitlePosition; activeStepChanging: EventEmitter; activeStepChanged: EventEmitter; navigateTo(index: number): void; next(): void; prev(): void; reset(): void; /** @hidden @internal */ playHorizontalAnimations(): void; } interface IgxStep extends ToggleAnimationPlayer { id: string; /** @hidden @internal */ contentTemplate: TemplateRef; /** @hidden @internal */ customIndicatorTemplate: TemplateRef; /** @hidden @internal */ contentContainer: ElementRef; /** @hidden @internal */ indicator: IgxStepIndicatorDirective; /** @hidden @internal */ content: IgxStepContentDirective; /** @hidden @internal */ indicatorTemplate: TemplateRef; index: number; disabled: boolean; completed: boolean; isValid: boolean; optional: boolean; active: boolean; tabIndex: number; /** @hidden @internal */ contentId: string; /** @hidden @internal */ generalDisabled: boolean; /** @hidden @internal */ titlePositionTop: string; /** @hidden @internal */ direction: Direction; /** @hidden @internal */ isAccessible: boolean; /** @hidden @internal */ isHorizontal: boolean; /** @hidden @internal */ isTitleVisible: boolean; /** @hidden @internal */ isIndicatorVisible: boolean; /** @hidden @internal */ titlePosition: string; /** @hidden @internal */ linearDisabled: boolean; /** @hidden @internal */ collapsing: boolean; /** @hidden @internal */ animationSettings: ToggleAnimationSettings; /** @hidden @internal */ contentClasses: any; /** @hidden @internal */ stepHeaderClasses: any; /** @hidden @internal */ nativeElement: HTMLElement; /** @hidden @internal */ previous: boolean; cdr: ChangeDetectorRef; activeChange: EventEmitter; } interface IStepChangingEventArgs extends IBaseEventArgs, IBaseCancelableBrowserEventArgs { newIndex: number; oldIndex: number; owner: IgxStepper; } interface IStepChangedEventArgs extends IBaseEventArgs { index: number; owner: IgxStepper; } declare const IgxStepperOrientation: { readonly Horizontal: "horizontal"; readonly Vertical: "vertical"; }; type IgxStepperOrientation = (typeof IgxStepperOrientation)[keyof typeof IgxStepperOrientation]; declare const IgxStepType: { readonly Indicator: "indicator"; readonly Title: "title"; readonly Full: "full"; }; type IgxStepType = (typeof IgxStepType)[keyof typeof IgxStepType]; declare const IgxStepperTitlePosition: { readonly Bottom: "bottom"; readonly Top: "top"; readonly End: "end"; readonly Start: "start"; }; type IgxStepperTitlePosition = (typeof IgxStepperTitlePosition)[keyof typeof IgxStepperTitlePosition]; declare const VerticalAnimationType: { readonly Grow: "grow"; readonly Fade: "fade"; readonly None: "none"; }; type VerticalAnimationType = (typeof VerticalAnimationType)[keyof typeof VerticalAnimationType]; declare const HorizontalAnimationType: { readonly none: "none"; readonly slide: "slide"; readonly fade: "fade"; }; type HorizontalAnimationType = (typeof HorizontalAnimationType)[keyof typeof HorizontalAnimationType]; /** * The IgxStepComponent is used within the `igx-stepper` element and it holds the content of each step. * It also supports custom indicators, title and subtitle. * * @igxModule IgxStepperModule * * @igxKeywords step * * @example * ```html * * ... * * ... * * ... * * ``` */ declare class IgxStepComponent extends ToggleAnimationPlayer implements IgxStep, AfterViewInit, OnDestroy, IgxSlideComponentBase { stepper: IgxStepper; cdr: ChangeDetectorRef; renderer: Renderer2; protected platform: PlatformUtil; protected stepperService: IgxStepperService; private element; private dir; /** * Get/Set the `id` of the step component. * Default value is `"igx-step-0"`; * ```html * * ``` * ```typescript * const stepId = this.step.id; * ``` */ id: string; /** * Get/Set whether the step is interactable. * * ```html * * ... * * ... * * ``` * * ```typescript * this.stepper.steps[1].disabled = true; * ``` */ set disabled(value: boolean); get disabled(): boolean; /** * Get/Set whether the step is completed. * * @remarks * When set to `true` the following separator is styled `solid`. * * ```html * * ... * * ... * * ``` * * ```typescript * this.stepper.steps[1].completed = true; * ``` */ completed: boolean; /** * Get/Set whether the step is valid. *```html * * ... *
*
* ... * *
*
* ``` */ get isValid(): boolean; set isValid(value: boolean); /** * Get/Set whether the step is optional. * * @remarks * Optional steps validity does not affect the default behavior when the stepper is in linear mode i.e. * if optional step is invalid the user could still move to the next step. * * ```html * * ``` * ```typescript * this.stepper.steps[1].optional = true; * ``` */ optional: boolean; /** * Get/Set the active state of the step * * ```html * * ``` * * ```typescript * this.stepper.steps[1].active = true; * ``` * * @param value: boolean */ set active(value: boolean); get active(): boolean; /** @hidden @internal */ set tabIndex(value: number); get tabIndex(): number; /** @hidden @internal **/ role: string; /** @hidden @internal */ get contentId(): string; /** @hidden @internal */ cssClass: boolean; /** @hidden @internal */ get generalDisabled(): boolean; /** @hidden @internal */ get titlePositionTop(): string; /** * Emitted when the step's `active` property changes. Can be used for two-way binding. * * ```html * * * ``` * * ```typescript * const step: IgxStepComponent = this.stepper.step[0]; * step.activeChange.subscribe((e: boolean) => console.log("Step active state change to ", e)) * ``` */ activeChange: EventEmitter; /** @hidden @internal */ contentTemplate: TemplateRef; /** @hidden @internal */ customIndicatorTemplate: TemplateRef; /** @hidden @internal */ contentContainer: ElementRef; /** @hidden @internal */ indicator: IgxStepIndicatorDirective; /** @hidden @internal */ content: IgxStepContentDirective; /** * Get the step index inside of the stepper. * * ```typescript * const step = this.stepper.steps[1]; * const stepIndex: number = step.index; * ``` */ get index(): number; /** @hidden @internal */ get indicatorTemplate(): TemplateRef; /** @hidden @internal */ get direction(): Direction; /** @hidden @internal */ get isAccessible(): boolean; /** @hidden @internal */ get isHorizontal(): boolean; /** @hidden @internal */ get isTitleVisible(): boolean; /** @hidden @internal */ get isIndicatorVisible(): boolean; /** @hidden @internal */ get titlePosition(): string; /** @hidden @internal */ get linearDisabled(): boolean; /** @hidden @internal */ get collapsing(): boolean; /** @hidden @internal */ get animationSettings(): ToggleAnimationSettings; /** @hidden @internal */ get contentClasses(): any; /** @hidden @internal */ get stepHeaderClasses(): any; /** @hidden @internal */ get nativeElement(): HTMLElement; /** @hidden @internal */ previous: boolean; /** @hidden @internal */ _index: number; private _tabIndex; private _valid; private _focused; private _disabled; constructor(stepper: IgxStepper, cdr: ChangeDetectorRef, renderer: Renderer2, platform: PlatformUtil, stepperService: IgxStepperService, animationService: AnimationService, element: ElementRef, dir: IgxDirectionality); /** @hidden @internal */ onFocus(): void; /** @hidden @internal */ onBlur(): void; /** @hidden @internal */ handleKeydown(event: KeyboardEvent): void; /** @hidden @internal */ ngAfterViewInit(): void; /** @hidden @internal */ onPointerDown(event: MouseEvent): void; /** @hidden @internal */ handleNavigation(key: string): void; /** @hidden @internal */ changeHorizontalActiveStep(): void; private get nextStep(); private get previousStep(); private changeVerticalActiveStep; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; static ngAcceptInputType_disabled: unknown; static ngAcceptInputType_completed: unknown; static ngAcceptInputType_isValid: unknown; static ngAcceptInputType_optional: unknown; static ngAcceptInputType_active: unknown; } declare const IGX_STEPPER_DIRECTIVES: readonly [typeof IgxStepComponent, typeof IgxStepperComponent, typeof IgxStepTitleDirective, typeof IgxStepSubtitleDirective, typeof IgxStepIndicatorDirective, typeof IgxStepContentDirective, typeof IgxStepActiveIndicatorDirective, typeof IgxStepCompletedIndicatorDirective, typeof IgxStepInvalidIndicatorDirective]; interface IDateRangePickerResourceStrings { igx_date_range_picker_date_separator?: string; igx_date_range_picker_done_button?: string; } declare const DateRangePickerResourceStringsEN: IDateRangePickerResourceStrings; /** * Provides the ability to select a range of dates from a calendar UI or editable inputs. * * @igxModule IgxDateRangeModule * * @igxTheme igx-input-group-theme, igx-calendar-theme, igx-date-range-picker-theme * * @igxKeywords date, range, date range, date picker * * @igxGroup scheduling * * @remarks * It displays the range selection in a single or two input fields. * The default template displays a single *readonly* input field * while projecting `igx-date-range-start` and `igx-date-range-end` * displays two *editable* input fields. * * @example * ```html * * ``` */ declare class IgxDateRangePickerComponent extends PickerBaseDirective implements OnChanges, OnInit, AfterViewInit, OnDestroy, ControlValueAccessor, Validator { protected platform: PlatformUtil; private _injector; private _cdr; private _overlayService; /** * The number of displayed month views. * * @remarks * Default is `2`. * * @example * ```html * * ``` */ displayMonthsCount: number; /** * Gets/Sets whether dates that are not part of the current month will be displayed. * * @remarks * Default value is `false`. * * @example * ```html * * ``` */ hideOutsideDays: boolean; /** * A custom formatter function, applied on the selected or passed in date. * * @example * ```typescript * private dayFormatter = new Intl.DateTimeFormat("en", { weekday: "long" }); * private monthFormatter = new Intl.DateTimeFormat("en", { month: "long" }); * * public formatter(date: Date): string { * return `${this.dayFormatter.format(date)} - ${this.monthFormatter.format(date)} - ${date.getFullYear()}`; * } * ``` * ```html * * ``` */ formatter: (val: DateRange) => string; /** * Overrides the default text of the calendar dialog **Done** button. * * @remarks * Defaults to the value from resource strings, `"Done"` for the built-in EN. * The button will only show up in `dialog` mode. * * @example * ```html * * ``` */ set doneButtonText(value: string); get doneButtonText(): string; /** * Custom overlay settings that should be used to display the calendar. * * @example * ```html * * ``` */ overlaySettings: OverlaySettings; /** * The format used when editable inputs are not focused. * * @remarks * Uses Angular's DatePipe. * * @example * ```html * * ``` * */ displayFormat: string; /** * The expected user input format and placeholder. * * @example * ```html * * ``` */ inputFormat: string; /** * The minimum value in a valid range. * * @example * */ set minValue(value: Date | string); get minValue(): Date | string; /** * The maximum value in a valid range. * * @example * */ set maxValue(value: Date | string); get maxValue(): Date | string; /** * An accessor that sets the resource strings. * By default it uses EN resources. */ set resourceStrings(value: IDateRangePickerResourceStrings); /** * An accessor that returns the resource strings. */ get resourceStrings(): IDateRangePickerResourceStrings; /** * Sets the `placeholder` for single-input `IgxDateRangePickerComponent`. * * @example * ```html * * ``` */ placeholder: string; /** * Gets/Sets the container used for the popup element. * * @remarks * `outlet` is an instance of `IgxOverlayOutletDirective` or an `ElementRef`. * @example * ```html *
* //.. * * //.. * ``` */ outlet: IgxOverlayOutletDirective | ElementRef; /** * Show/hide week numbers * * @remarks * Default is `false`. * * @example * ```html * * `` */ showWeekNumbers: boolean; /** * Emitted when the picker's value changes. Used for two-way binding. * * @example * ```html * * ``` */ valueChange: EventEmitter; /** @hidden @internal */ cssClass: string; private viewContainerRef; /** @hidden @internal */ inputDirective: IgxInputDirective; /** @hidden @internal */ projectedInputs: QueryList; label: IgxLabelDirective; pickerActions: IgxPickerActionsDirective; /** @hidden @internal */ dateSeparatorTemplate: TemplateRef; /** @hidden @internal */ get dateSeparator(): string; /** @hidden @internal */ get appliedFormat(): string; /** * @example * ```html * * ``` */ /** * Gets the `locale` of the date-range-picker. * If not set, defaults to application's locale. */ get locale(): string; /** * Sets the `locale` of the date-picker. * Expects a valid BCP 47 language tag. */ set locale(value: string); /** @hidden @internal */ get singleInputFormat(): string; /** * Gets calendar state. * * ```typescript * let state = this.dateRange.collapsed; * ``` */ get collapsed(): boolean; /** * The currently selected value / range from the calendar * * @remarks * The current value is of type `DateRange` * * @example * ```typescript * const newValue: DateRange = { start: new Date("2/2/2012"), end: new Date("3/3/2013")}; * this.dateRangePicker.value = newValue; * ``` */ get value(): DateRange | null; set value(value: DateRange | null); /** @hidden @internal */ get hasProjectedInputs(): boolean; /** @hidden @internal */ get separatorClass(): string; protected get toggleContainer(): HTMLElement | undefined; private get required(); private get calendar(); private get dropdownOverlaySettings(); private get dialogOverlaySettings(); private _resourceStrings; private _doneButtonText; private _dateSeparator; private _value; private _overlayId; private _ngControl; private _statusChanges$; private _calendar; private _calendarContainer?; private _positionSettings; private _focusedInput; private _overlaySubFilter; private _dialogOverlaySettings; private _dropDownOverlaySettings; private onChangeCallback; private onTouchCallback; private onValidatorChange; constructor(element: ElementRef, _localeId: string, platform: PlatformUtil, _injector: Injector, _cdr: ChangeDetectorRef, _overlayService: IgxOverlayService, _inputGroupType?: IgxInputGroupType); /** @hidden @internal */ onKeyDown(event: KeyboardEvent): void; /** * Opens the date range picker's dropdown or dialog. * * @example * ```html * * * * * * ``` */ close(): void; /** * Toggles the date range picker's dropdown or dialog * * @example * ```html * * * * ``` */ toggle(overlaySettings?: OverlaySettings): void; /** * Selects a range of dates. If no `endDate` is passed, range is 1 day (only `startDate`) * * @example * ```typescript * public selectFiveDayRange() { * const today = new Date(); * const inFiveDays = new Date(new Date().setDate(today.getDate() + 5)); * this.dateRange.select(today, inFiveDays); * } * ``` */ select(startDate: Date, endDate?: Date): void; /** @hidden @internal */ writeValue(value: DateRange): void; /** @hidden @internal */ registerOnChange(fn: any): void; /** @hidden @internal */ registerOnTouched(fn: any): void; /** @hidden @internal */ validate(control: AbstractControl): ValidationErrors | null; /** @hidden @internal */ registerOnValidatorChange?(fn: any): void; /** @hidden @internal */ setDisabledState?(isDisabled: boolean): void; /** @hidden */ ngOnInit(): void; /** @hidden */ ngAfterViewInit(): void; /** @hidden @internal */ ngOnChanges(changes: SimpleChanges): void; /** @hidden @internal */ ngOnDestroy(): void; /** @hidden @internal */ getEditElement(): HTMLInputElement; protected onStatusChanged: () => void; private setValidityState; private get isTouchedOrDirty(); private get hasValidators(); private handleSelection; private handleClosing; private subscribeToOverlayEvents; private updateValue; private updateValidityOnBlur; private updateDisabledState; private setRequiredToInputs; private parseMinValue; private parseMaxValue; private updateCalendar; private swapEditorDates; private valueInRange; private extractRange; private toRangeOfDates; private subscribeToDateEditorEvents; private attachOnTouched; private cacheFocusedInput; private configPositionStrategy; private configOverlaySettings; private initialSetValue; private updateInputs; private updateDisplayFormat; private updateInputFormat; private updateInputLocale; private _initializeCalendarContainer; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; static ngAcceptInputType_hideOutsideDays: unknown; static ngAcceptInputType_showWeekNumbers: unknown; } declare const IGX_DATE_RANGE_PICKER_DIRECTIVES: readonly [typeof IgxDateRangePickerComponent, typeof IgxPickerToggleComponent, typeof IgxDateRangeStartComponent, typeof IgxDateRangeEndComponent, typeof IgxDateRangeSeparatorDirective, typeof IgxLabelDirective, typeof IgxPrefixDirective, typeof IgxSuffixDirective, typeof IgxHintDirective]; declare const IGX_TREE_DIRECTIVES: readonly [typeof IgxTreeComponent, typeof IgxTreeNodeComponent, typeof IgxTreeNodeLinkDirective, typeof IgxTreeExpandIndicatorDirective]; declare class IgxQueryBuilderHeaderComponent { private _resourceStrings; /** * @hidden @internal */ get getClass(): string; /** * Sets the title of the `IgxQueryBuilderHeaderComponent`. * * @example * ```html * * ``` */ title: string; /** * Show/hide the legend. * * @example * ```html * * ``` * @deprecated in version 19.1.0. */ showLegend: boolean; /** * Sets the resource strings. * By default it uses EN resources. * * @deprecated in version 19.1.0. */ set resourceStrings(value: IQueryBuilderResourceStrings); /** * Returns the resource strings. */ get resourceStrings(): IQueryBuilderResourceStrings; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } declare const IGX_QUERY_BUILDER_DIRECTIVES: readonly [typeof IgxQueryBuilderComponent, typeof IgxQueryBuilderHeaderComponent, typeof IgxQueryBuilderSearchValueTemplateDirective]; interface IResourceStrings extends IGridResourceStrings, ITimePickerResourceStrings, ICalendarResourceStrings, ICarouselResourceStrings, IChipResourceStrings, IComboResourceStrings, IInputResourceStrings, IDatePickerResourceStrings, IDateRangePickerResourceStrings, IListResourceStrings, IPaginatorResourceStrings, ITreeResourceStrings, IActionStripResourceStrings, IQueryBuilderResourceStrings, IBannerResourceStrings { } declare class igxI18N { private static _instance; private _currentResourceStrings; private constructor(); static instance(): igxI18N; /** * Changes the resource strings for all components in the application * ``` * @param resourceStrings to be applied */ changei18n(resourceStrings: IResourceStrings): void; getCurrentResourceStrings(en: IResourceStrings): IResourceStrings; } declare function changei18n(resourceStrings: IResourceStrings): void; /** * @hidden * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components */ declare class IgxAccordionModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @hidden * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components */ declare class IgxActionStripModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @hidden * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components */ declare class IgxAvatarModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @hidden * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components */ declare class IgxBadgeModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @hidden * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components */ declare class IgxBannerModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @hidden * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components */ declare class IgxButtonGroupModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @hidden * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components */ declare class IgxCalendarModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @hidden * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components */ declare class IgxCardModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @hidden * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components */ declare class IgxCarouselModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @hidden * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components */ declare class IgxCheckboxModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @hidden * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components */ declare class IgxChipsModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @hidden * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components */ declare class IgxComboModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @hidden * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components */ declare class IgxDatePickerModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @hidden * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components */ declare class IgxDateRangePickerModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @hidden * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components */ declare class IgxDialogModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @hidden * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components */ declare class IgxAutocompleteModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @hidden * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components */ declare class IgxButtonModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @hidden * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components */ declare class IgxDateTimeEditorModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @hidden * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components */ declare class IgxDividerModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @hidden * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components */ declare class IgxDragDropModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @hidden * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components */ declare class IgxFilterModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @hidden * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components */ declare class IgxFocusModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @hidden * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components */ declare class IgxFocusTrapModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @hidden * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components */ declare class IgxForOfModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @hidden * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components */ declare class IgcFormsModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @hidden * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components */ declare class IgxLayoutModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @hidden * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components */ declare class IgxMaskModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @hidden * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components */ declare class IgxRadioModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @hidden * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components */ declare class IgxRippleModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @hidden * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components */ declare class IgxScrollInertiaModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @hidden * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components */ declare class IgxTextHighlightModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @hidden * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components */ declare class IgxTextSelectionModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @hidden * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components */ declare class IgxToggleModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @hidden * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components */ declare class IgxTooltipModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @hidden * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components */ declare class IgxDropDownModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @hidden * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components */ declare class IgxExpansionPanelModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @hidden * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components */ declare class IgxGridModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @hidden * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components */ declare class IgxTreeGridModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @hidden * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components */ declare class IgxHierarchicalGridModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @hidden * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components */ declare class IgxPivotGridModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @hidden * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components */ declare class IgxIconModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @hidden * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components */ declare class IgxInputGroupModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @hidden * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components */ declare class IgxListModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @hidden * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components */ declare class IgxNavbarModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @hidden */ declare class IgxNavigationDrawerModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @hidden * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components */ declare class IgxPaginatorModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @hidden * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components */ declare class IgxProgressBarModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @hidden * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components */ declare class IgxQueryBuilderModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @hidden * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components */ declare class IgxSelectModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @hidden * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components */ declare class IgxSimpleComboModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @hidden * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components */ declare class IgxSliderModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @hidden * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components */ declare class IgxSnackbarModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @hidden * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components */ declare class IgxSplitterModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @hidden * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components */ declare class IgxStepperModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @hidden * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components */ declare class IgxSwitchModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @hidden * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components */ declare class IgxBottomNavModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @hidden * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components */ declare class IgxTabsModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @hidden * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components */ declare class IgxTimePickerModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @hidden * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components */ declare class IgxToastModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @hidden * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components */ declare class IgxTreeModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } export { AbsolutePosition, AbsoluteScrollStrategy, ActionStripResourceStringsEN, AutoPositionStrategy, BannerResourceStringsEN, BaseFilteringStrategy, BlockScrollStrategy, ButtonGroupAlignment, CachedDataCloneStrategy, Calendar, CalendarResourceStringsEN, CalendarSelection, CarouselAnimationType, CarouselHammerConfig, CarouselIndicatorsOrientation, CarouselResourceStringsEN, ChipResourceStringsEN, CloseScrollStrategy, ColumnDisplayOrder, ColumnPinningPosition, ComboResourceStringsEN, ConnectedPositioningStrategy, ContainerPositionStrategy, CsvFileTypes, DEFAULT_OWNER, DEFAULT_PIVOT_KEYS, DataType, DataUtil, DatePart, DatePickerResourceStringsEN, DateRangePickerFormatPipe, DateRangePickerResourceStringsEN, DateRangeType, DefaultDataCloneStrategy, DefaultPivotGridRecordSortingStrategy, DefaultPivotSortingStrategy, DefaultSortingStrategy, DimensionValuesFilteringStrategy, Direction, DragDirection, ElasticPositionStrategy, ExpansionPanelHeaderIconPosition, ExportHeaderType, ExportRecordType, ExpressionsTreeUtil, FilterMode, FilterUtil, FilteringExpressionsTree, FilteringExpressionsTreeType, FilteringLogic, FilteringStrategy, FormattedValuesFilteringStrategy, FormattedValuesSortingStrategy, GRID_LEVEL_COL, GRID_PARENT, GRID_ROOT_SUMMARY, GlobalPositionStrategy, GridColumnDataType, GridPagingMode, GridResourceStringsEN, GridSelectionMode, GridSummaryCalculationMode, GridSummaryPosition, GroupMemberCountSortingStrategy, GroupedRecords, HorizontalAlignment, HorizontalAnimationType, IGX_ACCORDION_DIRECTIVES, IGX_ACTION_STRIP_DIRECTIVES, IGX_BANNER_DIRECTIVES, IGX_BOTTOM_NAV_DIRECTIVES, IGX_BUTTON_GROUP_DIRECTIVES, IGX_CALENDAR_DIRECTIVES, IGX_CALENDAR_VIEW_ITEM, IGX_CARD_DIRECTIVES, IGX_CAROUSEL_DIRECTIVES, IGX_CHIPS_DIRECTIVES, IGX_CIRCULAR_PROGRESS_BAR_DIRECTIVES, IGX_COMBO_DIRECTIVES, IGX_DATE_PICKER_DIRECTIVES, IGX_DATE_RANGE_PICKER_DIRECTIVES, IGX_DIALOG_DIRECTIVES, IGX_DRAG_DROP_DIRECTIVES, IGX_DROP_DOWN_DIRECTIVES, IGX_EXPANSION_PANEL_DIRECTIVES, IGX_GRID_ACTION_STRIP_DIRECTIVES, IGX_GRID_BASE, IGX_GRID_COMMON_DIRECTIVES, IGX_GRID_DIRECTIVES, IGX_GRID_SERVICE_BASE, IGX_GRID_VALIDATION_DIRECTIVES, IGX_HIERARCHICAL_GRID_DIRECTIVES, IGX_INPUT_GROUP_DIRECTIVES, IGX_INPUT_GROUP_TYPE, IGX_LINEAR_PROGRESS_BAR_DIRECTIVES, IGX_LIST_DIRECTIVES, IGX_NAVBAR_DIRECTIVES, IGX_NAVIGATION_DRAWER_DIRECTIVES, IGX_PAGINATOR_DIRECTIVES, IGX_PIVOT_GRID_DIRECTIVES, IGX_PROGRESS_BAR_DIRECTIVES, IGX_QUERY_BUILDER_DIRECTIVES, IGX_RADIO_GROUP_DIRECTIVES, IGX_SELECT_DIRECTIVES, IGX_SIMPLE_COMBO_DIRECTIVES, IGX_SLIDER_DIRECTIVES, IGX_SPLITTER_DIRECTIVES, IGX_STEPPER_DIRECTIVES, IGX_TABS_DIRECTIVES, IGX_TIME_PICKER_DIRECTIVES, IGX_TOOLTIP_DIRECTIVES, IGX_TREE_DIRECTIVES, IGX_TREE_GRID_DIRECTIVES, ITreeGridAggregation, IgSizeDirective, IgcFormControlDirective, IgcFormsModule, IgxAccordionComponent, IgxAccordionModule, IgxActionStripComponent, IgxActionStripMenuItemDirective, IgxActionStripModule, IgxAdvancedFilteringDialogComponent, IgxAppendDropStrategy, IgxAutocompleteDirective, IgxAutocompleteModule, IgxAvatarComponent, IgxAvatarModule, IgxAvatarSize, IgxAvatarType, IgxBadgeComponent, IgxBadgeModule, IgxBadgeType, IgxBannerActionsDirective, IgxBannerComponent, IgxBannerModule, IgxBaseExporter, IgxBaseTransactionService, IgxBooleanFilteringOperand, IgxBottomNavComponent, IgxBottomNavContentComponent, IgxBottomNavHeaderComponent, IgxBottomNavHeaderIconDirective, IgxBottomNavHeaderLabelDirective, IgxBottomNavItemComponent, IgxBottomNavModule, IgxButtonDirective, IgxButtonGroupComponent, IgxButtonGroupModule, IgxButtonModule, IgxButtonType, IgxCSVTextDirective, IgxCalendarComponent, IgxCalendarHeaderTemplateDirective, IgxCalendarHeaderTitleTemplateDirective, IgxCalendarModule, IgxCalendarMonthDirective, IgxCalendarScrollPageDirective, IgxCalendarSubheaderTemplateDirective, IgxCalendarView, IgxCalendarViewBaseDirective, IgxCalendarYearDirective, IgxCardActionsComponent, IgxCardActionsLayout, IgxCardComponent, IgxCardContentDirective, IgxCardFooterDirective, IgxCardHeaderComponent, IgxCardHeaderSubtitleDirective, IgxCardHeaderTitleDirective, IgxCardMediaDirective, IgxCardModule, IgxCardThumbnailDirective, IgxCarouselComponent, IgxCarouselIndicatorDirective, IgxCarouselModule, IgxCarouselNextButtonDirective, IgxCarouselPrevButtonDirective, IgxCellEditorTemplateDirective, IgxCellFooterTemplateDirective, IgxCellHeaderTemplateDirective, IgxCellTemplateDirective, IgxCellValidationErrorDirective, IgxCheckboxComponent, IgxCheckboxModule, IgxChildGridRowComponent, IgxChipComponent, IgxChipTypeVariant, IgxChipsAreaComponent, IgxChipsModule, IgxCircularProgressBarComponent, IgxCollapsibleIndicatorTemplateDirective, IgxColumPatternValidatorDirective, IgxColumnActionsBaseDirective, IgxColumnActionsComponent, IgxColumnComponent, IgxColumnEmailValidatorDirective, IgxColumnGroupComponent, IgxColumnHidingDirective, IgxColumnLayoutComponent, IgxColumnMaxLengthValidatorDirective, IgxColumnMaxValidatorDirective, IgxColumnMinLengthValidatorDirective, IgxColumnMinValidatorDirective, IgxColumnPinningDirective, IgxColumnRequiredValidatorDirective, IgxComboAddItemDirective, IgxComboClearIconDirective, IgxComboComponent, IgxComboEmptyDirective, IgxComboFooterDirective, IgxComboHeaderDirective, IgxComboHeaderItemDirective, IgxComboItemDirective, IgxComboModule, IgxComboToggleIconDirective, IgxCsvExporterOptions, IgxCsvExporterService, IgxDataLoadingTemplateDirective, IgxDataRecordSorting, IgxDateFilteringOperand, IgxDatePickerComponent, IgxDatePickerModule, IgxDateRangeEndComponent, IgxDateRangeInputsBaseComponent, IgxDateRangePickerComponent, IgxDateRangePickerModule, IgxDateRangeSeparatorDirective, IgxDateRangeStartComponent, IgxDateSummaryOperand, IgxDateTimeEditorDirective, IgxDateTimeEditorModule, IgxDateTimeFilteringOperand, IgxDaysViewComponent, IgxDefaultDropStrategy, IgxDialogActionsDirective, IgxDialogComponent, IgxDialogModule, IgxDialogTitleDirective, IgxDividerDirective, IgxDividerModule, IgxDividerType, IgxDragDirective, IgxDragDropModule, IgxDragHandleDirective, IgxDragIgnoreDirective, IgxDragIndicatorIconDirective, IgxDragLocation, IgxDropDirective, IgxDropDownComponent, IgxDropDownGroupComponent, IgxDropDownItemComponent, IgxDropDownItemNavigationDirective, IgxDropDownModule, IgxEmptyListTemplateDirective, IgxExcelExporterOptions, IgxExcelExporterService, IgxExcelStyleClearFiltersComponent, IgxExcelStyleColumnOperationsTemplateDirective, IgxExcelStyleConditionalFilterComponent, IgxExcelStyleDateExpressionComponent, IgxExcelStyleFilterOperationsTemplateDirective, IgxExcelStyleHeaderComponent, IgxExcelStyleHeaderIconDirective, IgxExcelStyleHidingComponent, IgxExcelStyleLoadingValuesTemplateDirective, IgxExcelStyleMovingComponent, IgxExcelStylePinningComponent, IgxExcelStyleSearchComponent, IgxExcelStyleSelectingComponent, IgxExcelStyleSortingComponent, IgxExcelTextDirective, IgxExpansionPanelBodyComponent, IgxExpansionPanelComponent, IgxExpansionPanelDescriptionDirective, IgxExpansionPanelHeaderComponent, IgxExpansionPanelIconDirective, IgxExpansionPanelModule, IgxExpansionPanelTitleDirective, IgxExporterOptionsBase, IgxFilterCellTemplateDirective, IgxFilterDirective, IgxFilterModule, IgxFilterOptions, IgxFilterPipe, IgxFilteringOperand, IgxFlatTransactionFactory, IgxFlexDirective, IgxFocusDirective, IgxFocusModule, IgxFocusTrapDirective, IgxFocusTrapModule, IgxForOfContext, IgxForOfDirective, IgxForOfModule, IgxGridActionButtonComponent, IgxGridActionsBaseDirective, IgxGridCell, IgxGridComponent, IgxGridDetailTemplateDirective, IgxGridEditingActionsComponent, IgxGridEmptyTemplateDirective, IgxGridExcelStyleFilteringComponent, IgxGridFooterComponent, IgxGridForOfContext, IgxGridForOfDirective, IgxGridHeaderComponent, IgxGridHeaderGroupComponent, IgxGridHeaderRowComponent, IgxGridLoadingTemplateDirective, IgxGridModule, IgxGridPinningActionsComponent, IgxGridRow, IgxGridStateDirective, IgxGridToolbarActionsComponent, IgxGridToolbarAdvancedFilteringComponent, IgxGridToolbarComponent, IgxGridToolbarDirective, IgxGridToolbarExporterComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarTitleComponent, IgxGridTransaction, IgxGroupAreaDropDirective, IgxGroupByRow, IgxGroupByRowSelectorDirective, IgxGroupByRowTemplateDirective, IgxGroupedTreeGridSorting, IgxGrouping, IgxHeadSelectorDirective, IgxHeaderCollapsedIndicatorDirective, IgxHeaderExpandedIndicatorDirective, IgxHierarchicalGridComponent, IgxHierarchicalGridModule, IgxHierarchicalGridRow, IgxHierarchicalTransactionFactory, IgxHierarchicalTransactionService, IgxHintDirective, IgxIconButtonDirective, IgxIconComponent, IgxIconModule, IgxIconService, IgxInputDirective, IgxInputGroupComponent, IgxInputGroupEnum, IgxInputGroupModule, IgxInputState, IgxInsertDropStrategy, IgxItemListDirective, IgxLabelDirective, IgxLayoutDirective, IgxLayoutModule, IgxLinearProgressBarComponent, IgxListActionDirective, IgxListBaseDirective, IgxListComponent, IgxListItemComponent, IgxListItemLeftPanningTemplateDirective, IgxListItemRightPanningTemplateDirective, IgxListLineDirective, IgxListLineSubTitleDirective, IgxListLineTitleDirective, IgxListModule, IgxListPanState, IgxListThumbnailDirective, IgxMaskDirective, IgxMaskModule, IgxMonthPickerComponent, IgxMonthsViewComponent, IgxNavDrawerItemDirective, IgxNavDrawerMiniTemplateDirective, IgxNavDrawerTemplateDirective, IgxNavbarActionDirective, IgxNavbarComponent, IgxNavbarModule, IgxNavbarTitleDirective, IgxNavigationCloseDirective, IgxNavigationDrawerComponent, IgxNavigationDrawerModule, IgxNavigationService, IgxNavigationToggleDirective, IgxNumberFilteringOperand, IgxNumberSummaryOperand, IgxOverlayOutletDirective, IgxOverlayService, IgxPageNavigationComponent, IgxPageSizeSelectorComponent, IgxPaginatorComponent, IgxPaginatorContentDirective, IgxPaginatorDirective, IgxPaginatorModule, IgxPickerActionsDirective, IgxPickerClearComponent, IgxPickerToggleComponent, IgxPivotAggregate, IgxPivotDataSelectorComponent, IgxPivotDateAggregate, IgxPivotDateDimension, IgxPivotGridComponent, IgxPivotGridModule, IgxPivotNumericAggregate, IgxPivotRowDimensionHeaderTemplateDirective, IgxPivotTimeAggregate, IgxPivotValueChipTemplateDirective, IgxPrefixDirective, IgxPrependDropStrategy, IgxProgressBarGradientDirective, IgxProgressBarModule, IgxProgressBarTextTemplateDirective, IgxProgressType, IgxQueryBuilderComponent, IgxQueryBuilderHeaderComponent, IgxQueryBuilderModule, IgxQueryBuilderSearchValueTemplateDirective, IgxRadioComponent, IgxRadioGroupDirective, IgxRadioModule, IgxRippleDirective, IgxRippleModule, IgxRowAddTextDirective, IgxRowCollapsedIndicatorDirective, IgxRowDirective, IgxRowDragGhostDirective, IgxRowEditActionsDirective, IgxRowEditTabStopDirective, IgxRowEditTextDirective, IgxRowExpandedIndicatorDirective, IgxRowIslandComponent, IgxRowSelectorDirective, IgxScrollInertiaDirective, IgxScrollInertiaModule, IgxSelectComponent, IgxSelectFooterDirective, IgxSelectGroupComponent, IgxSelectHeaderDirective, IgxSelectItemComponent, IgxSelectModule, IgxSelectToggleIconDirective, IgxSimpleComboComponent, IgxSimpleComboModule, IgxSlideComponent, IgxSliderComponent, IgxSliderModule, IgxSliderType, IgxSnackbarComponent, IgxSnackbarModule, IgxSortAscendingHeaderIconDirective, IgxSortDescendingHeaderIconDirective, IgxSortHeaderIconDirective, IgxSorting, IgxSplitBarComponent, IgxSplitterComponent, IgxSplitterModule, IgxSplitterPaneComponent, IgxStepActiveIndicatorDirective, IgxStepCompletedIndicatorDirective, IgxStepComponent, IgxStepContentDirective, IgxStepIndicatorDirective, IgxStepInvalidIndicatorDirective, IgxStepSubtitleDirective, IgxStepTitleDirective, IgxStepType, IgxStepperComponent, IgxStepperModule, IgxStepperOrientation, IgxStepperTitlePosition, IgxStringFilteringOperand, IgxSuffixDirective, IgxSummaryOperand, IgxSummaryRow, IgxSummaryTemplateDirective, IgxSwitchComponent, IgxSwitchModule, IgxTabContentComponent, IgxTabHeaderComponent, IgxTabHeaderIconDirective, IgxTabHeaderLabelDirective, IgxTabItemComponent, IgxTabsAlignment, IgxTabsComponent, IgxTabsModule, IgxTemplateOutletDirective, IgxTextAlign, IgxTextHighlightDirective, IgxTextHighlightModule, IgxTextHighlightService, IgxTextSelectionDirective, IgxTextSelectionModule, IgxThumbFromTemplateDirective, IgxThumbToTemplateDirective, IgxTickLabelTemplateDirective, IgxTimeFilteringOperand, IgxTimeItemDirective, IgxTimePickerComponent, IgxTimePickerModule, IgxTimeSummaryOperand, IgxToastComponent, IgxToastModule, IgxToggleActionDirective, IgxToggleDirective, IgxToggleModule, IgxTooltipDirective, IgxTooltipModule, IgxTooltipTargetDirective, IgxTransactionService, IgxTreeComponent, IgxTreeExpandIndicatorDirective, IgxTreeGridComponent, IgxTreeGridGroupByAreaComponent, IgxTreeGridGroupingPipe, IgxTreeGridModule, IgxTreeGridRow, IgxTreeModule, IgxTreeNodeComponent, IgxTreeNodeLinkDirective, IgxTreeSelectionType, IgxYearsViewComponent, IndigoIcons, InputResourceStringsEN, LabelPosition, ListResourceStringsEN, NoOpScrollStrategy, NoopFilteringStrategy, NoopPivotDimensionsStrategy, NoopSortingStrategy, PaginatorResourceStringsEN, PagingError, PickerInteractionMode, PivotColumnDimensionsStrategy, PivotDimensionType, PivotRowDimensionsStrategy, PivotRowLayoutType, PivotSummaryPosition, Point, QueryBuilderResourceStringsEN, RadioGroupAlignment, RelativePosition, RelativePositionStrategy, RowPinningPosition, ScrollDirection, ScrollStrategy, Size$1 as Size, SliderHandle, SortingDirection, SplitterType, THEME_TOKEN, TRANSACTION_TYPE, ThemeToken, TickLabelsOrientation, TicksOrientation, TimePickerResourceStringsEN, TransactionEventOrigin, TransactionType, TreeGridFilteringStrategy, TreeGridFormattedValuesFilteringStrategy, TreeGridMatchingRecordsOnlyFilteringStrategy, TreeResourceStringsEN, VerticalAlignment, VerticalAnimationType, WEEKDAYS, changei18n, comboIgnoreDiacriticsFilter, igxI18N, isLeap, monthRange, range, weekDay }; export type { Action, AutocompleteOverlaySettings, AutocompleteSelectionChangingEventArgs, BannerCancelEventArgs, BannerEventArgs, CancelableBrowserEventArgs, CancelableEventArgs, CarouselAnimationSettings, CellType, ColumnType, DatePartDeltas, DateRange, DateRangeDescriptor, DimensionValueType, EntityType, FamilyMeta, FieldType, FlatGridType, GridFeatures, GridKeydownTargetType, GridSVGIcon, GridSelectionRange, GridServiceType, GridType, GridValidationTrigger, HeaderType, HierarchicalGridType, HierarchicalState, HierarchicalTransaction, HierarchicalTransactionService, IAccordionCancelableEventArgs, IAccordionEventArgs, IActionStripResourceStrings, IActiveHighlightInfo, IActiveNodeChangeEventArgs, IBannerResourceStrings, IBaseChipEventArgs, IBaseChipsAreaEventArgs, IBaseSearchInfo, IButtonEventArgs, IButtonGroupEventArgs, ICachedViewLoadedEventArgs, ICalendarResourceStrings, ICarouselResourceStrings, ICellPosition, IChangeCheckboxEventArgs, IChangeProgressEventArgs, IChipClickEventArgs, IChipEnterDragAreaEventArgs, IChipKeyDownEventArgs, IChipResourceStrings, IChipSelectEventArgs, IChipsAreaReorderEventArgs, IChipsAreaSelectEventArgs, IClipboardOptions, IColumnEditorOptions, IColumnExportingEventArgs, IColumnInfo, IColumnList, IColumnMovingEndEventArgs, IColumnMovingEventArgs, IColumnMovingStartEventArgs, IColumnPipeArgs, IColumnResizeEventArgs, IColumnResizingEventArgs, IColumnSelectionEventArgs, IColumnSelectionState, IColumnState, IColumnToggledEventArgs, IColumnVisibilityChangedEventArgs, IColumnVisibilityChangingEventArgs, IColumnsAutoGeneratedEventArgs, IComboFilteringOptions, IComboItemAdditionEvent, IComboResourceStrings, IComboSearchInputEventArgs, IComboSelectionChangingEventArgs, ICsvExportEndedEventArgs, IDataCloneStrategy, IDateParts, IDatePickerResourceStrings, IDateRangePickerResourceStrings, IDialogCancellableEventArgs, IDialogEventArgs, IDimensionsChange, IDragBaseEventArgs, IDragCustomTransitionArgs, IDragGhostBaseEventArgs, IDragMoveEventArgs, IDragStartEventArgs, IDropBaseEventArgs, IDropDownNavigationDirective, IDropDroppedEventArgs, IDropStrategy, IExcelExportEndedEventArgs, IExpansionPanelEventArgs, IExportRecord, IExpressionTree, IFieldEditorOptions, IFieldPipeArgs, IFieldValidationState, IFilteringEventArgs, IFilteringExpression, IFilteringExpressionsTree, IFilteringOperation, IFilteringState, IFilteringStrategy, IForOfDataChangeEventArgs, IForOfDataChangingEventArgs, IForOfState, IFormattedParts, IFormattingOptions, IFormattingViews, IGridCellEventArgs, IGridClipboardEvent, IGridContextMenuEventArgs, IGridCreatedEventArgs, IGridDataBindable, IGridEditDoneEventArgs, IGridEditEventArgs, IGridFormGroupCreatedEventArgs, IGridGroupingStrategy, IGridKeydownEventArgs, IGridResourceStrings, IGridRowEventArgs, IGridScrollEventArgs, IGridSortingStrategy, IGridState, IGridStateCollection, IGridStateOptions, IGridToolbarExportEventArgs, IGridValidationState, IGridValidationStatusEventArgs, IGroupByExpandState, IGroupByKey, IGroupByRecord, IGroupingDoneEventArgs, IGroupingExpression, IGroupingState, IInputResourceStrings, IListItemClickEventArgs, IListItemPanningEventArgs, IListResourceStrings, IMaskEventArgs, IMultiRowLayoutNode, IPageCancellableEventArgs, IPageEventArgs, IPaginatorResourceStrings, IPagingState, IPanStateChangeEventArgs, IPathSegment, IPinColumnCancellableEventArgs, IPinColumnEventArgs, IPinRowEventArgs, IPinningConfig, IPivotAggregator, IPivotConfiguration, IPivotConfigurationChangedEventArgs, IPivotDateDimensionOptions, IPivotDimension, IPivotDimensionData, IPivotDimensionStrategy, IPivotGridColumn, IPivotGridGroupRecord, IPivotGridHorizontalGroup, IPivotGridRecord, IPivotKeys, IPivotUISettings, IPivotValue, IPositionStrategy, IQueryBuilderResourceStrings, IRangeSliderValue, IRecordValidationState, IResourceStrings, IRowDataCancelableEventArgs, IRowDataEventArgs, IRowDragEndEventArgs, IRowDragStartEventArgs, IRowExportingEventArgs, IRowSelectionEventArgs, IRowToggleEventArgs, IScrollStrategy, ISearchInfo, ISelectionEventArgs, ISelectionKeyboardState, ISelectionNode, ISelectionPointerState, ISimpleComboSelectionChangingEventArgs, ISizeInfo, ISlideEventArgs, ISliderValueChangeEventArgs, ISortingEventArgs, ISortingExpression, ISortingOptions, ISortingStrategy, ISplitterBarResizeEventArgs, IStepChangedEventArgs, IStepChangingEventArgs, ISummaryExpression, ISummaryRecord, ITabsSelectedIndexChangingEventArgs, ITabsSelectedItemChangeEventArgs, ITimePickerResourceStrings, IToggleView, ITooltipHideEventArgs, ITooltipShowEventArgs, ITreeGridRecord, ITreeNodeEditedEvent, ITreeNodeEditingEvent, ITreeNodeSelectionEvent, ITreeNodeToggledEventArgs, ITreeNodeTogglingEventArgs, ITreeResourceStrings, IValuesChange, IViewChangeEventArgs, IViewDateChangeEventArgs, IconFamily, IconMeta, IconReference, IgxCellTemplateContext, IgxColumnTemplateContext, IgxDateTimeEditorEventArgs, IgxDragCustomEventDetails, IgxExporterEvent, IgxExporterOptions, IgxFilterItem, IgxGridEmptyTemplateContext, IgxGridHeaderTemplateContext, IgxGridMasterDetailContext, IgxGridPaginatorTemplateContext, IgxGridRowDragGhostContext, IgxGridRowEditActionsTemplateContext, IgxGridRowEditTemplateContext, IgxGridRowEditTextTemplateContext, IgxGridRowTemplateContext, IgxGridTemplateContext, IgxGridToolbarTemplateContext, IgxGroupByRowSelectorTemplateContext, IgxGroupByRowSelectorTemplateDetails, IgxGroupByRowTemplateContext, IgxHeadSelectorTemplateContext, IgxHeadSelectorTemplateDetails, IgxIconButtonType, IgxIconLoadedEvent, IgxInputGroupType, IgxPivotGridValueTemplateContext, IgxRowSelectorTemplateContext, IgxRowSelectorTemplateDetails, IgxSummaryResult, IgxSummaryTemplateContext, IgxTheme, IgxTimePickerValidationFailedEventArgs, IgxTree, IgxTreeNode, IgxTreeSearchResolver, MRLColumnSizeInfo, MRLResizeColumnInfo, OverlayAnimationEventArgs, OverlayCancelableEventArgs, OverlayClosingEventArgs, OverlayCreateSettings, OverlayEventArgs, OverlaySettings, PivotAggregation, PivotAggregationType, PivotGridType, PivotRowHeaderGroupType, PositionSettings, RowType, SelectionState, State, StateUpdateEvent, ToggleViewCancelableEventArgs, ToggleViewEventArgs, Transaction, TransactionService, TreeGridType, ValidationStatus };