igniteui-angular
Version:
Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps
1,064 lines (1,055 loc) • 1.27 MB
JavaScript
import * as i0 from '@angular/core';
import { inject, IterableDiffers, EventEmitter, booleanAttribute, HostBinding, Input, Output, ViewChildren, forwardRef, Component, Pipe, Directive, SimpleChange, NgZone, Injectable, InjectionToken, ElementRef, ChangeDetectorRef, QueryList, HostListener, ViewChild, TemplateRef, ContentChild, ContentChildren, ChangeDetectionStrategy, DOCUMENT, ViewContainerRef, EnvironmentInjector, Injector, createComponent } from '@angular/core';
import * as i1 from '@angular/forms';
import { FormsModule, RequiredValidator, NG_VALIDATORS, MinValidator, MaxValidator, EmailValidator, MinLengthValidator, MaxLengthValidator, PatternValidator, FormGroup, FormControl, ReactiveFormsModule } from '@angular/forms';
import { IgxInputGroupComponent, IgxInputDirective, IgxPrefixDirective, IgxSuffixDirective } from 'igniteui-angular/input-group';
import { IgxCheckboxComponent } from 'igniteui-angular/checkbox';
import { IgxButtonDirective, IgxRippleDirective, IgxGridForOfDirective, IgxDragDirective, IgxDragHandleDirective, IgxIconButtonDirective, IgxDateTimeEditorDirective, IgxToggleDirective, IgxForOfDirective, IgxDropDirective, IgxForOfSyncService, IgxTextHighlightDirective, IgxFocusDirective, IgxTextSelectionDirective, IgxTooltipTargetDirective, IgxTooltipDirective } from 'igniteui-angular/directives';
import { __decorate } from 'tslib';
import { Subject, fromEvent, interval, animationFrameScheduler } from 'rxjs';
import { mergeWith, isEqual as isEqual$1 } from 'lodash-es';
import { IgxSorting, DataUtil, FilteringExpressionsTree, FilteringLogic, GridColumnDataType, PlatformUtil, isDate, isEqual, DateTimeUtil, copyDescriptors, trackByIdentity, TransactionType, resolveNestedPath, columnFieldPath, DefaultSortingStrategy, isConstructor, ɵSize as _Size, ColumnPinningPosition, ExpressionsTreeUtil, IgxStringFilteringOperand, IgxDateTimeFilteringOperand, IgxTimeFilteringOperand, IgxDateFilteringOperand, IgxNumberFilteringOperand, IgxBooleanFilteringOperand, flatten, GridResourceStringsEN, getCurrentResourceStrings, QueryBuilderResourceStringsEN, AbsoluteScrollStrategy, ConnectedPositioningStrategy, IgxOverlayOutletDirective, IgxPickerToggleComponent, IgxPickerClearComponent, isTree, IgxOverlayService, VerticalAlignment, HorizontalAlignment, AutoPositionStrategy, cloneHierarchicalArray, SortingDirection, showMessage, IgxActionStripActionsToken, formatDate as formatDate$1, GridSummaryCalculationMode, cloneArray, cloneValue, recreateTreeFromFields, yieldingLoop, FilterUtil, TreeGridFilteringStrategy, getHierarchy, isHierarchyMatch, FilteringStrategy, NAVIGATION_KEYS, SUPPORTED_KEYS, HEADER_KEYS, HORIZONTAL_NAV_KEYS, ROW_EXPAND_KEYS, ROW_COLLAPSE_KEYS, ROW_ADD_KEYS, HammerGesturesManager, formatCurrency as formatCurrency$1, reverseMapper, mergeObjects } from 'igniteui-angular/core';
import { first as first$1, takeUntil, map, debounceTime, filter, switchMap, throttle, throttleTime, takeWhile } from 'rxjs/operators';
import { NgClass, getLocaleFirstDayOfWeek, NgTemplateOutlet, formatPercent, formatNumber, formatCurrency, getLocaleCurrencyCode, formatDate, NgStyle, DatePipe, getLocaleDateFormat, FormatWidth, getLocaleDateTimeFormat, AsyncPipe, getLocaleCurrencySymbol, getCurrencySymbol, DecimalPipe, PercentPipe, CurrencyPipe } from '@angular/common';
import { IgxQueryBuilderComponent, IgxQueryBuilderHeaderComponent } from 'igniteui-angular/query-builder';
import { IgxIconComponent, IgxIconService } from 'igniteui-angular/icon';
import { IgxSelectComponent, IgxSelectItemComponent } from 'igniteui-angular/select';
import { IgxButtonGroupComponent } from 'igniteui-angular/button-group';
import { IgxDatePickerComponent } from 'igniteui-angular/date-picker';
import { IgxTimePickerComponent } from 'igniteui-angular/time-picker';
import { IgxDropDownItemNavigationDirective, IgxDropDownComponent, IgxDropDownItemComponent, Navigate } from 'igniteui-angular/drop-down';
import { IgxListComponent, IgxListItemComponent, IgxDataLoadingTemplateDirective, IgxEmptyListTemplateDirective } from 'igniteui-angular/list';
import { IgxTreeComponent, IgxTreeNodeComponent } from 'igniteui-angular/tree';
import { IgxCircularProgressBarComponent, IgxLinearProgressBarComponent } from 'igniteui-angular/progressbar';
import { addRow, addChild, pinLeft, unpinLeft, jumpDown, jumpUp, editor } from '@igniteui/material-icons-extended';
import { IgxChipComponent, IgxChipsAreaComponent } from 'igniteui-angular/chips';
import { useAnimation } from '@angular/animations';
import { fadeIn, scaleInVerBottom, scaleInVerTop, fadeOut, scaleInCenter } from 'igniteui-angular/animations';
import { IgxBadgeComponent } from 'igniteui-angular/badge';
import { strToU8, zip } from 'fflate';
/**
* 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.
*/
const FilterMode = {
quickFilter: 'quickFilter',
excelStyleFilter: 'excelStyleFilter'
};
/**
* 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.
*/
const GridSummaryPosition = {
top: 'top',
bottom: 'bottom'
};
/**
* 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
*/
const GridSelectionMode = {
none: 'none',
single: 'single',
multiple: 'multiple',
multipleCascade: 'multipleCascade'
};
/**
* Enumeration representing different cell merging modes for the grid elements.
* - 'never': Never merge cells.
* - 'always': Always merge adjacent cells based on merge strategy.
* - 'onSort': Only merge cells in column that are sorted.
*/
const GridCellMergeMode = {
always: 'always',
onSort: 'onSort'
};
/** Enumeration representing different column display order options. */
const ColumnDisplayOrder = {
Alphabetical: 'Alphabetical',
DisplayOrder: 'DisplayOrder'
};
/* mustCoerceToInt */
/**
* 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.
*/
var RowPinningPosition;
(function (RowPinningPosition) {
RowPinningPosition[RowPinningPosition["Top"] = 0] = "Top";
RowPinningPosition[RowPinningPosition["Bottom"] = 1] = "Bottom";
})(RowPinningPosition || (RowPinningPosition = {}));
/**
* 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.
*/
const GridPagingMode = {
Local: 'local',
Remote: 'remote'
};
let NEXT_ID$1 = 0;
/**
* Providing reference to `IgxColumnActionsComponent`:
* ```typescript
* @ViewChild('columnActions', { read: IgxColumnActionsComponent })
* public columnActions: IgxColumnActionsComponent;
*/
class IgxColumnActionsComponent {
constructor() {
this.differs = inject(IterableDiffers);
/**
* Gets/sets the indentation of columns in the column list based on their hierarchy level.
*
* @example
* ```
* <igx-column-actions [indentation]="15"></igx-column-actions>
* ```
*/
this.indentation = 30;
/**
* 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';
* ```
*/
this.cssClass = 'igx-column-actions';
/**
* Gets/sets the max height of the columns area.
*
* @remarks
* The default max height is 100%.
* @example
* ```html
* <igx-column-actions [columnsAreaMaxHeight]="200px"></igx-column-actions>
* ```
*/
this.columnsAreaMaxHeight = '100%';
/**
* Shows/hides the columns filtering input from the UI.
*
* @example
* ```html
* <igx-column-actions [hideFilter]="true"></igx-column-actions>
* ```
*/
this.hideFilter = false;
/**
* Gets/sets the title of the column actions component.
*
* @example
* ```html
* <igx-column-actions [title]="'Pin Columns'"></igx-column-actions>
* ```
*/
this.title = '';
/**
* 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
* <igx-column-actions (columnToggled)="columnToggled($event)"></igx-column-actions>
* ```
*/
this.columnToggled = new EventEmitter();
/**
* @hidden @internal
*/
this.actionableColumns = [];
/**
* @hidden @internal
*/
this.filteredColumns = [];
/**
* @hidden @internal
*/
this.pipeTrigger = 0;
this._differ = null;
/**
* @hidden @internal
*/
this._filterColumnsPrompt = '';
/**
* @hidden @internal
*/
this._filterCriteria = '';
/**
* @hidden @internal
*/
this._columnDisplayOrder = ColumnDisplayOrder.DisplayOrder;
/**
* @hidden @internal
*/
this._id = `igx-column-actions-${NEXT_ID$1++}`;
/**
* @hidden @internal
*/
this.trackChanges = (index, col) => col.field + '_' + this.actionsDirective.actionEnabledColumnsFilter(col, index, []);
this._differ = this.differs.find([]).create(this.trackChanges);
}
/**
* Gets the prompt that is displayed in the filter input.
*
* @example
* ```typescript
* let filterColumnsPrompt = this.columnActions.filterColumnsPrompt;
* ```
*/
get filterColumnsPrompt() {
return this._filterColumnsPrompt;
}
/**
* Sets the prompt that is displayed in the filter input.
*
* @example
* ```html
* <igx-column-actions [filterColumnsPrompt]="'Type here to search'"></igx-column-actions>
* ```
*/
set filterColumnsPrompt(value) {
this._filterColumnsPrompt = value || '';
}
/**
* Gets the value which filters the columns list.
*
* @example
* ```typescript
* let filterCriteria = this.columnActions.filterCriteria;
* ```
*/
get filterCriteria() {
return this._filterCriteria;
}
/**
* Sets the value which filters the columns list.
*
* @example
* ```html
* <igx-column-actions [filterCriteria]="'ID'"></igx-column-actions>
* ```
*/
set filterCriteria(value) {
value = value || '';
if (value !== this._filterCriteria) {
this._filterCriteria = value;
this.pipeTrigger++;
}
}
/**
* Gets the display order of the columns.
*
* @example
* ```typescript
* let columnDisplayOrder = this.columnActions.columnDisplayOrder;
* ```
*/
get columnDisplayOrder() {
return this._columnDisplayOrder;
}
/**
* Sets the display order of the columns.
*
* @example
* ```typescript
* this.columnActions.columnDisplayOrder = ColumnDisplayOrder.Alphabetical;
* ```
*/
set columnDisplayOrder(value) {
if (value && value !== this._columnDisplayOrder) {
this._columnDisplayOrder = value;
this.pipeTrigger++;
}
}
/**
* 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() {
return this._uncheckAllText || this.actionsDirective.uncheckAllLabel;
}
/**
* Sets the text of the button that unchecks all columns.
*
* @example
* ```html
* <igx-column-actions [uncheckAllText]="'Show All'"></igx-column-actions>
* ```
*/
set uncheckAllText(value) {
this._uncheckAllText = value;
}
/**
* 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() {
return this._checkAllText || this.actionsDirective.checkAllLabel;
}
/**
* Sets the text of the button that checks all columns.
*
* @remarks
* If unset it is obtained from the IgxColumnActionsBased derived directive applied.
* @example
* ```html
* <igx-column-actions [checkAllText]="'Hide All'"></igx-column-actions>
* ```
*/
set checkAllText(value) {
this._checkAllText = value;
}
/**
* @hidden @internal
*/
get checkAllDisabled() {
return this.actionsDirective.allUnchecked;
}
/**
* @hidden @internal
*/
get uncheckAllDisabled() {
return this.actionsDirective.allChecked;
}
/**
* Gets/Sets the value of the `id` attribute.
*
* @remarks
* If not provided it will be automatically generated.
* @example
* ```html
* <igx-column-actions [id]="'igx-actions-1'"></igx-column-actions>
* ```
*/
get id() {
return this._id;
}
set id(value) {
this._id = value;
}
/**
* @hidden @internal
*/
get titleID() {
return this.id + '_title';
}
/**
* @hidden @internal
*/
ngDoCheck() {
if (this._differ) {
const changes = this._differ.diff(this.grid?.columnList);
if (changes) {
this.pipeTrigger++;
}
}
}
/**
* Unchecks all columns and performs the appropriate action.
*
* @example
* ```typescript
* this.columnActions.uncheckAllColumns();
* ```
*/
uncheckAllColumns() {
this.actionsDirective.uncheckAll();
}
/**
* Checks all columns and performs the appropriate action.
*
* @example
* ```typescript
* this.columnActions.checkAllColumns();
* ```
*/
checkAllColumns() {
this.actionsDirective.checkAll();
}
/**
* @hidden @internal
*/
toggleColumn(column) {
this.actionsDirective.toggleColumn(column);
this.columnToggled.emit({ column: column, checked: this.actionsDirective.columnChecked(column) });
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxColumnActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: IgxColumnActionsComponent, isStandalone: true, selector: "igx-column-actions", inputs: { grid: "grid", indentation: "indentation", columnsAreaMaxHeight: "columnsAreaMaxHeight", hideFilter: ["hideFilter", "hideFilter", booleanAttribute], title: "title", filterColumnsPrompt: "filterColumnsPrompt", filterCriteria: "filterCriteria", columnDisplayOrder: "columnDisplayOrder", uncheckAllText: "uncheckAllText", checkAllText: "checkAllText", id: "id" }, outputs: { columnToggled: "columnToggled" }, host: { properties: { "class": "this.cssClass", "attr.id": "this.id" } }, viewQueries: [{ propertyName: "columnItems", predicate: IgxCheckboxComponent, descendants: true }], ngImport: i0, template: "<div class=\"igx-column-actions__header\">\n @if (title) {\n <h4 [attr.id]='titleID' class=\"igx-column-actions__header-title\">{{ title }}</h4>\n }\n\n @if (!hideFilter) {\n <igx-input-group class=\"igx-column-actions__header-input\">\n <input igxInput\n type=\"text\"\n [attr.aria-describedby]='titleID'\n [(ngModel)]=\"filterCriteria\"\n [placeholder]=\"filterColumnsPrompt\"\n autocomplete=\"off\" />\n </igx-input-group>\n }\n</div>\n\n<div class=\"igx-column-actions__columns\" tabindex=\"0\"\n [style.max-height]=\"columnsAreaMaxHeight\">\n @for (\n column of $any(grid)?._columns\n | columnActionEnabled:actionsDirective.actionEnabledColumnsFilter:pipeTrigger\n | filterActionColumns:filterCriteria:pipeTrigger\n | sortActionColumns:columnDisplayOrder:pipeTrigger; track column\n ) {\n <igx-checkbox\n class=\"igx-column-actions__columns-item\"\n [readonly]=\"true\"\n (click)=\"toggleColumn(column)\"\n [checked]=\"actionsDirective.columnChecked(column)\"\n [style.margin-left.px]=\"column.level * indentation\">\n {{ column.header || column.field }}\n </igx-checkbox>\n }\n</div>\n\n<div class=\"igx-column-actions__buttons\">\n <button type=\"button\" igxButton igxRipple (click)=\"uncheckAllColumns()\" [disabled]=\"uncheckAllDisabled\">{{ uncheckAllText }}</button>\n <button type=\"button\" igxButton igxRipple (click)=\"checkAllColumns()\" [disabled]=\"checkAllDisabled\">{{ checkAllText }}</button>\n</div>\n", dependencies: [{ kind: "component", type: i0.forwardRef(() => IgxInputGroupComponent), selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "ngmodule", type: i0.forwardRef(() => FormsModule) }, { kind: "directive", type: i0.forwardRef(() => i1.DefaultValueAccessor), selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i0.forwardRef(() => i1.NgControlStatus), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(() => i1.NgModel), selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i0.forwardRef(() => IgxInputDirective), selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "component", type: i0.forwardRef(() => IgxCheckboxComponent), selector: "igx-checkbox", inputs: ["indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"] }, { kind: "directive", type: i0.forwardRef(() => IgxButtonDirective), selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "directive", type: i0.forwardRef(() => IgxRippleDirective), selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { kind: "pipe", type: i0.forwardRef(() => IgxColumnActionEnabledPipe), name: "columnActionEnabled" }, { kind: "pipe", type: i0.forwardRef(() => IgxFilterActionColumnsPipe), name: "filterActionColumns" }, { kind: "pipe", type: i0.forwardRef(() => IgxSortActionColumnsPipe), name: "sortActionColumns" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxColumnActionsComponent, decorators: [{
type: Component,
args: [{ selector: 'igx-column-actions', imports: [IgxInputGroupComponent, FormsModule, IgxInputDirective, IgxCheckboxComponent, IgxButtonDirective, IgxRippleDirective, forwardRef(() => IgxColumnActionEnabledPipe), forwardRef(() => IgxFilterActionColumnsPipe), forwardRef(() => IgxSortActionColumnsPipe)], template: "<div class=\"igx-column-actions__header\">\n @if (title) {\n <h4 [attr.id]='titleID' class=\"igx-column-actions__header-title\">{{ title }}</h4>\n }\n\n @if (!hideFilter) {\n <igx-input-group class=\"igx-column-actions__header-input\">\n <input igxInput\n type=\"text\"\n [attr.aria-describedby]='titleID'\n [(ngModel)]=\"filterCriteria\"\n [placeholder]=\"filterColumnsPrompt\"\n autocomplete=\"off\" />\n </igx-input-group>\n }\n</div>\n\n<div class=\"igx-column-actions__columns\" tabindex=\"0\"\n [style.max-height]=\"columnsAreaMaxHeight\">\n @for (\n column of $any(grid)?._columns\n | columnActionEnabled:actionsDirective.actionEnabledColumnsFilter:pipeTrigger\n | filterActionColumns:filterCriteria:pipeTrigger\n | sortActionColumns:columnDisplayOrder:pipeTrigger; track column\n ) {\n <igx-checkbox\n class=\"igx-column-actions__columns-item\"\n [readonly]=\"true\"\n (click)=\"toggleColumn(column)\"\n [checked]=\"actionsDirective.columnChecked(column)\"\n [style.margin-left.px]=\"column.level * indentation\">\n {{ column.header || column.field }}\n </igx-checkbox>\n }\n</div>\n\n<div class=\"igx-column-actions__buttons\">\n <button type=\"button\" igxButton igxRipple (click)=\"uncheckAllColumns()\" [disabled]=\"uncheckAllDisabled\">{{ uncheckAllText }}</button>\n <button type=\"button\" igxButton igxRipple (click)=\"checkAllColumns()\" [disabled]=\"checkAllDisabled\">{{ checkAllText }}</button>\n</div>\n" }]
}], ctorParameters: () => [], propDecorators: { grid: [{
type: Input
}], indentation: [{
type: Input
}], cssClass: [{
type: HostBinding,
args: ['class']
}], columnsAreaMaxHeight: [{
type: Input
}], hideFilter: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], columnItems: [{
type: ViewChildren,
args: [IgxCheckboxComponent]
}], title: [{
type: Input
}], columnToggled: [{
type: Output
}], filterColumnsPrompt: [{
type: Input
}], filterCriteria: [{
type: Input
}], columnDisplayOrder: [{
type: Input
}], uncheckAllText: [{
type: Input
}], checkAllText: [{
type: Input
}], id: [{
type: HostBinding,
args: ['attr.id']
}, {
type: Input
}] } });
class IgxColumnActionEnabledPipe {
constructor() {
this.columnActions = inject(IgxColumnActionsComponent);
}
transform(collection, actionFilter, _pipeTrigger) {
if (!collection) {
return collection;
}
let copy = collection.slice(0);
if (copy.length && copy[0].grid.hasColumnLayouts) {
copy = copy.filter(c => c.columnLayout);
}
if (actionFilter) {
copy = copy.filter(actionFilter);
}
// Preserve the actionable collection for use in the component
this.columnActions.actionableColumns = copy;
return copy;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxColumnActionEnabledPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.2", ngImport: i0, type: IgxColumnActionEnabledPipe, isStandalone: true, name: "columnActionEnabled" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxColumnActionEnabledPipe, decorators: [{
type: Pipe,
args: [{
name: 'columnActionEnabled',
standalone: true
}]
}] });
class IgxFilterActionColumnsPipe {
constructor() {
this.columnActions = inject(IgxColumnActionsComponent);
}
transform(collection, filterCriteria, _pipeTrigger) {
if (!collection) {
return collection;
}
let copy = collection.slice(0);
if (filterCriteria && filterCriteria.length > 0) {
const filterFunc = (c) => {
const filterText = c.header || c.field;
if (!filterText) {
return false;
}
return filterText.toLocaleLowerCase().indexOf(filterCriteria.toLocaleLowerCase()) >= 0 ||
(c.children?.some(filterFunc) ?? false);
};
copy = collection.filter(filterFunc);
}
// Preserve the filtered collection for use in the component
this.columnActions.filteredColumns = copy;
return copy;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxFilterActionColumnsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.2", ngImport: i0, type: IgxFilterActionColumnsPipe, isStandalone: true, name: "filterActionColumns" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxFilterActionColumnsPipe, decorators: [{
type: Pipe,
args: [{
name: 'filterActionColumns',
standalone: true
}]
}] });
class IgxSortActionColumnsPipe {
transform(collection, displayOrder, _pipeTrigger) {
if (displayOrder === ColumnDisplayOrder.Alphabetical) {
return collection.sort((a, b) => (a.header || a.field).localeCompare(b.header || b.field));
}
return collection;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxSortActionColumnsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.2", ngImport: i0, type: IgxSortActionColumnsPipe, isStandalone: true, name: "sortActionColumns" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxSortActionColumnsPipe, decorators: [{
type: Pipe,
args: [{
name: 'sortActionColumns',
standalone: true
}]
}] });
class IgxColumnActionsBaseDirective {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxColumnActionsBaseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxColumnActionsBaseDirective, isStandalone: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxColumnActionsBaseDirective, decorators: [{
type: Directive
}] });
class IgxColumnHidingDirective extends IgxColumnActionsBaseDirective {
constructor() {
super();
this.columnActions = inject(IgxColumnActionsComponent);
/**
* @hidden @internal
*/
this.actionEnabledColumnsFilter = c => !c.disableHiding;
const columnActions = this.columnActions;
columnActions.actionsDirective = this;
}
/**
* @hidden @internal
*/
get checkAllLabel() {
return this.columnActions.grid?.resourceStrings.igx_grid_hiding_check_all_label ?? 'Show All';
}
/**
* @hidden @internal
*/
get uncheckAllLabel() {
return this.columnActions.grid?.resourceStrings.igx_grid_hiding_uncheck_all_label ?? 'Hide All';
}
/**
* @hidden @internal
*/
checkAll() {
this.columnActions.filteredColumns.forEach(c => c.toggleVisibility(false));
}
/**
* @hidden @internal
*/
uncheckAll() {
this.columnActions.filteredColumns.forEach(c => c.toggleVisibility(true));
}
/**
* @hidden @internal
*/
columnChecked(column) {
return !column.hidden;
}
/**
* @hidden @internal
*/
toggleColumn(column) {
column.toggleVisibility();
}
get allChecked() {
return this.columnActions.filteredColumns.every(col => !this.columnChecked(col));
}
get allUnchecked() {
return this.columnActions.filteredColumns.every(col => this.columnChecked(col));
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxColumnHidingDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxColumnHidingDirective, isStandalone: true, selector: "[igxColumnHiding]", usesInheritance: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxColumnHidingDirective, decorators: [{
type: Directive,
args: [{
selector: '[igxColumnHiding]',
standalone: true
}]
}], ctorParameters: () => [] });
class IgxColumnPinningDirective extends IgxColumnActionsBaseDirective {
constructor() {
super();
this.columnActions = inject(IgxColumnActionsComponent);
/**
* @hidden @internal
*/
this.actionEnabledColumnsFilter = (c) => !c.disablePinning && !c.level;
const columnActions = this.columnActions;
columnActions.actionsDirective = this;
}
/**
* @hidden @internal
*/
get checkAllLabel() {
return this.columnActions.grid?.resourceStrings.igx_grid_pinning_check_all_label ?? 'Pin All';
}
/**
* @hidden @internal
*/
get uncheckAllLabel() {
return this.columnActions.grid?.resourceStrings.igx_grid_pinning_uncheck_all_label ?? 'Unpin All';
}
/**
* @hidden @internal
*/
checkAll() {
this.columnActions.filteredColumns.forEach(c => c.pinned = true);
}
/**
* @hidden @internal
*/
uncheckAll() {
this.columnActions.filteredColumns.forEach(c => c.pinned = false);
}
/**
* @hidden @internal
*/
columnChecked(column) {
return column.pinned;
}
/**
* @hidden @internal
*/
toggleColumn(column) {
column.pinned = !column.pinned;
}
get allUnchecked() {
return !this.columnActions.filteredColumns.some(col => !this.columnChecked(col));
}
get allChecked() {
return !this.columnActions.filteredColumns.some(col => this.columnChecked(col));
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxColumnPinningDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxColumnPinningDirective, isStandalone: true, selector: "[igxColumnPinning]", usesInheritance: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxColumnPinningDirective, decorators: [{
type: Directive,
args: [{
selector: '[igxColumnPinning]',
standalone: true
}]
}], ctorParameters: () => [] });
// import { IgxColumnActionsComponent } from './column-actions.component';
// import { IgxColumnHidingDirective } from './column-hiding.directive';
// import { IgxColumnPinningDirective } from './column-pinning.directive';
/* NOTE: Grid column actions directives collection for ease-of-use import in standalone components scenario */
// export const IGX_GRID_COLUMN_ACTIONS_DIRECTIVES = [
// IgxColumnActionsComponent,
// IgxColumnHidingDirective,
// IgxColumnPinningDirective
// ] as const;
class IgxColumnRequiredValidatorDirective extends RequiredValidator {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxColumnRequiredValidatorDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxColumnRequiredValidatorDirective, isStandalone: true, selector: "igx-column[required]", providers: [{
provide: NG_VALIDATORS,
useExisting: IgxColumnRequiredValidatorDirective,
multi: true
}], usesInheritance: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxColumnRequiredValidatorDirective, decorators: [{
type: Directive,
args: [{
selector: 'igx-column[required]',
providers: [{
provide: NG_VALIDATORS,
useExisting: IgxColumnRequiredValidatorDirective,
multi: true
}],
standalone: true
}]
}] });
class IgxColumnMinValidatorDirective extends MinValidator {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxColumnMinValidatorDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxColumnMinValidatorDirective, isStandalone: true, selector: "igx-column[min]", providers: [{
provide: NG_VALIDATORS,
useExisting: IgxColumnMinValidatorDirective,
multi: true
}], usesInheritance: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxColumnMinValidatorDirective, decorators: [{
type: Directive,
args: [{
selector: 'igx-column[min]',
providers: [{
provide: NG_VALIDATORS,
useExisting: IgxColumnMinValidatorDirective,
multi: true
}],
standalone: true
}]
}] });
class IgxColumnMaxValidatorDirective extends MaxValidator {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxColumnMaxValidatorDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxColumnMaxValidatorDirective, isStandalone: true, selector: "igx-column[max]", providers: [{
provide: NG_VALIDATORS,
useExisting: IgxColumnMaxValidatorDirective,
multi: true
}], usesInheritance: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxColumnMaxValidatorDirective, decorators: [{
type: Directive,
args: [{
selector: 'igx-column[max]',
providers: [{
provide: NG_VALIDATORS,
useExisting: IgxColumnMaxValidatorDirective,
multi: true
}],
standalone: true
}]
}] });
class IgxColumnEmailValidatorDirective extends EmailValidator {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxColumnEmailValidatorDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxColumnEmailValidatorDirective, isStandalone: true, selector: "igx-column[email]", providers: [{
provide: NG_VALIDATORS,
useExisting: IgxColumnEmailValidatorDirective,
multi: true
}], usesInheritance: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxColumnEmailValidatorDirective, decorators: [{
type: Directive,
args: [{
selector: 'igx-column[email]',
providers: [{
provide: NG_VALIDATORS,
useExisting: IgxColumnEmailValidatorDirective,
multi: true
}],
standalone: true
}]
}] });
class IgxColumnMinLengthValidatorDirective extends MinLengthValidator {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxColumnMinLengthValidatorDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxColumnMinLengthValidatorDirective, isStandalone: true, selector: "igx-column[minlength]", providers: [{
provide: NG_VALIDATORS,
useExisting: IgxColumnMinLengthValidatorDirective,
multi: true
}], usesInheritance: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxColumnMinLengthValidatorDirective, decorators: [{
type: Directive,
args: [{
selector: 'igx-column[minlength]',
providers: [{
provide: NG_VALIDATORS,
useExisting: IgxColumnMinLengthValidatorDirective,
multi: true
}],
standalone: true
}]
}] });
class IgxColumnMaxLengthValidatorDirective extends MaxLengthValidator {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxColumnMaxLengthValidatorDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxColumnMaxLengthValidatorDirective, isStandalone: true, selector: "igx-column[maxlength]", providers: [{
provide: NG_VALIDATORS,
useExisting: IgxColumnMaxLengthValidatorDirective,
multi: true
}], usesInheritance: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxColumnMaxLengthValidatorDirective, decorators: [{
type: Directive,
args: [{
selector: 'igx-column[maxlength]',
providers: [{
provide: NG_VALIDATORS,
useExisting: IgxColumnMaxLengthValidatorDirective,
multi: true
}],
standalone: true
}]
}] });
class IgxColumnPatternValidatorDirective extends PatternValidator {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxColumnPatternValidatorDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxColumnPatternValidatorDirective, isStandalone: true, selector: "igx-column[pattern]", providers: [{
provide: NG_VALIDATORS,
useExisting: IgxColumnPatternValidatorDirective,
multi: true
}], usesInheritance: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxColumnPatternValidatorDirective, decorators: [{
type: Directive,
args: [{
selector: 'igx-column[pattern]',
providers: [{
provide: NG_VALIDATORS,
useExisting: IgxColumnPatternValidatorDirective,
multi: true
}],
standalone: true
}]
}] });
/**
* @hidden
*/
function WatchChanges() {
return (target, key, propDesc) => {
const privateKey = '_' + key.toString();
propDesc = propDesc || {
configurable: true,
enumerable: true,
};
propDesc.get = propDesc.get || (function () {
return this[privateKey];
});
const originalSetter = propDesc.set || (function (val) {
this[privateKey] = val;
});
propDesc.set = function (val) {
const init = this._init;
const oldValue = this[key];
if (val !== oldValue || (typeof val === 'object' && val === oldValue)) {
originalSetter.call(this, val);
if (this.ngOnChanges && !init) {
// in case wacthed prop changes trigger ngOnChanges manually
const changes = {
[key]: new SimpleChange(oldValue, val, false)
};
this.ngOnChanges(changes);
}
}
};
return propDesc;
};
}
function WatchColumnChanges() {
return (target, key, propDesc) => {
const privateKey = '_' + key.toString();
propDesc = propDesc || {
configurable: true,
enumerable: true,
};
propDesc.get = propDesc.get || (function () {
return this[privateKey];
});
const originalSetter = propDesc.set || (function (val) {
this[privateKey] = val;
});
propDesc.set = function (val) {
const oldValue = this[key];
originalSetter.call(this, val);
if (val !== oldValue || (typeof val === 'object' && val === oldValue)) {
if (this.columnChange) {
this.columnChange.emit();
}
}
};
return propDesc;
};
}
function notifyChanges(repaint = false) {
return (_, key, propDesc) => {
const privateKey = `__${key}`;
propDesc = propDesc || {
enumerable: true,
configurable: true
};
const originalSetter = propDesc ? propDesc.set : null;
propDesc.get = propDesc.get || (function () {
return this[privateKey];
});
propDesc.set = function (newValue) {
if (originalSetter) {
originalSetter.call(this, newValue);
if (this.grid) {
this.grid.notifyChanges(repaint && this.type !== 'pivot');
}
}
else {
if (newValue === this[key]) {
return;
}
this[privateKey] = newValue;
if (this.grid) {
this.grid.notifyChanges(repaint && this.type !== 'pivot');
}
}
};
return propDesc;
};
}
const clear = (el) => el === 0 || Boolean(el);
const first = (arr) => arr[0];
const last = (arr) => arr[arr.length - 1];
/* blazorCSSuppress */
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) {
return data.length;
}
/**
* 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 = [], _allData = [], _fieldName, _groupRecord) {
return [{
key: 'count',
label: 'Count',
defaultFormatting: false,
summaryResult: IgxSummaryOperand.count(data)
}];
}
}
/* blazorCSSuppress */
// @dynamic
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) {
return data.length && data.filter(clear).length ? data.filter(clear).reduce((a, b) => Math.min(a, b)) : 0;
}
/**
* 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) {
return data.length && data.filter(clear).length ? data.filter(clear).reduce((a, b) => Math.max(a, b)) : 0;
}
/**
* 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) {
return data.length && data.filter(clear).length ? data.filter(clear).reduce((a, b) => +a + +b) : 0;
}
/**
* 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) {
return data.length && data.filter(clear).length ? this.sum(data) / this.count(data) : 0;
}
/**
* 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 = [], allData = [], fieldName, groupRecord) {
const result = super.operate(data, allData, fieldName, groupRecord);
result.push({
key: 'min',
label: 'Min',
defaultFormatting: true,
summaryResult: IgxNumberSummaryOperand.min(data)
});
result.push({
key: 'max',
label: 'Max',
defaultFormatting: true,
summaryResult: IgxNumberSummaryOperand.max(data)
});
result.push({
key: 'sum',
label: 'Sum',
defaultFormatting: true,
summaryResult: IgxNumberSummaryOperand.sum(data)
});
result.push({
key: 'average',
label: 'Avg',
defaultFormatting: true,
summaryResult: IgxNumberSummaryOperand.average(data)
});
return resul