igniteui-angular
Version:
Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps
1,608 lines • 113 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
import * as tslib_1 from "tslib";
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, HostBinding, HostListener, Input, TemplateRef, ViewChild, NgZone } from '@angular/core';
import { IgxSelectionAPIService } from '../core/selection';
import { IgxTextHighlightDirective } from '../directives/text-highlight/text-highlight.directive';
import { GridBaseAPIService } from './api.service';
import { IgxColumnComponent } from './column.component';
import { getNodeSizeViaRange, ROW_COLLAPSE_KEYS, ROW_EXPAND_KEYS, SUPPORTED_KEYS, NAVIGATION_KEYS, isIE } from '../core/utils';
import { IgxGridSelectionService, IgxGridCRUDService } from '../core/grid-selection';
import { DeprecateProperty } from '../core/deprecateDecorators';
/**
* Providing reference to `IgxGridCellComponent`:
* ```typescript
* \@ViewChild('grid', { read: IgxGridComponent })
* public grid: IgxGridComponent;
* ```
* ```typescript
* let column = this.grid.columnList.first;
* ```
* ```typescript
* let cell = column.cells[0];
* ```
*/
var IgxGridCellComponent = /** @class */ (function () {
function IgxGridCellComponent(selectionService, crudService, gridAPI, selection, cdr, element, zone) {
var _this = this;
this.selectionService = selectionService;
this.crudService = crudService;
this.gridAPI = gridAPI;
this.selection = selection;
this.cdr = cdr;
this.element = element;
this.zone = zone;
/**
* Sets/gets the highlight class of the cell.
* Default value is `"igx-highlight"`.
* ```typescript
* let highlightClass = this.cell.highlightClass;
* ```
* ```typescript
* this.cell.highlightClass = 'igx-cell-highlight';
* ```
* \@memberof IgxGridCellComponent
*/
this.highlightClass = 'igx-highlight';
/**
* Sets/gets the active highlight class class of the cell.
* Default value is `"igx-highlight__active"`.
* ```typescript
* let activeHighlightClass = this.cell.activeHighlightClass;
* ```
* ```typescript
* this.cell.activeHighlightClass = 'igx-cell-highlight_active';
* ```
* \@memberof IgxGridCellComponent
*/
this.activeHighlightClass = 'igx-highlight__active';
/**
* Gets the visible `index` of the in which the cell is stored.
* ```typescript
* let visibleColumnIndex = this.cell.visibleColumnIndex;
* ```
* \@memberof IgxGridCellComponent
*/
this.visibleColumnIndex = -1;
/**
* @hidden
* \@internal
*/
this.lastPinned = false;
/**
* Returns whether the cell is in edit mode.
*/
this.editMode = false;
/**
* Sets/get the `tabindex` property of the cell.
* Default value is `0`.
* ```typescript
* this.cell.tabindex = 1;
* ```
* ```typescript
* let cellTabIndex = this.cell.tabindex;
* ```
* \@memberof IgxGridCellComponent
*/
this.tabindex = 0;
/**
* Sets/get the `role` property of the cell.
* Default value is `"gridcell"`.
* ```typescript
* this.cell.role = 'grid-cell';
* ```
* ```typescript
* let cellRole = this.cell.role;
* ```
* \@memberof IgxGridCellComponent
*/
this.role = 'gridcell';
/**
* Gets the width of the cell.
* ```typescript
* let cellWidth = this.cell.width;
* ```
* \@memberof IgxGridCellComponent
*/
this.width = '';
/**
* @hidden
* \@internal
*/
this.focused = false;
this.isInCompositionMode = false;
/**
*
* @hidden
* \@internal
*/
this.pointerdown = function (event) {
_this.selectionService.pointerDown(_this.selectionNode, event.shiftKey, event.ctrlKey);
};
/**
*
* @hidden
* \@internal
*/
this.pointerenter = function (event) {
/** @type {?} */
var dragMode = _this.selectionService.pointerEnter(_this.selectionNode, event.buttons === 1);
if (dragMode) {
_this.grid.cdr.detectChanges();
}
};
/**
* @hidden
* \@internal
*/
this.pointerup = function () {
if (_this.selectionService.pointerUp(_this.selectionNode, _this.grid.onRangeSelection)) {
_this.grid.cdr.detectChanges();
}
};
}
Object.defineProperty(IgxGridCellComponent.prototype, "context", {
/**
* Gets the cell template context object.
* ```typescript
* let context = this.cell.context();
* ```
* @memberof IgxGridCellComponent
*/
get: /**
* Gets the cell template context object.
* ```typescript
* let context = this.cell.context();
* ```
* \@memberof IgxGridCellComponent
* @return {?}
*/
function () {
return {
$implicit: this.value,
cell: this
};
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxGridCellComponent.prototype, "template", {
/**
* Gets the cell template.
* ```typescript
* let template = this.cell.template;
* ```
* @memberof IgxGridCellComponent
*/
get: /**
* Gets the cell template.
* ```typescript
* let template = this.cell.template;
* ```
* \@memberof IgxGridCellComponent
* @return {?}
*/
function () {
if (this.editMode) {
/** @type {?} */
var inlineEditorTemplate = this.column.inlineEditorTemplate;
return inlineEditorTemplate ? inlineEditorTemplate : this.inlineEditorTemplate;
}
if (this.cellTemplate) {
return this.cellTemplate;
}
return this.defaultCellTemplate;
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxGridCellComponent.prototype, "gridID", {
/**
* Gets the `id` of the grid in which the cell is stored.
* ```typescript
* let gridId = this.cell.gridID;
* ```
* @memberof IgxGridCellComponent
*/
get: /**
* Gets the `id` of the grid in which the cell is stored.
* ```typescript
* let gridId = this.cell.gridID;
* ```
* \@memberof IgxGridCellComponent
* @return {?}
*/
function () {
return this.row.gridID;
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxGridCellComponent.prototype, "grid", {
/**
* Gets the grid of the cell.
* ```typescript
* let grid = this.cell.grid;
* ```
* @memberof IgxGridCellComponent
*/
get: /**
* Gets the grid of the cell.
* ```typescript
* let grid = this.cell.grid;
* ```
* \@memberof IgxGridCellComponent
* @return {?}
*/
function () {
return this.gridAPI.grid;
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxGridCellComponent.prototype, "rowIndex", {
/**
* Gets the `index` of the row where the cell is stored.
* ```typescript
* let rowIndex = this.cell.rowIndex;
* ```
* @memberof IgxGridCellComponent
*/
get: /**
* Gets the `index` of the row where the cell is stored.
* ```typescript
* let rowIndex = this.cell.rowIndex;
* ```
* \@memberof IgxGridCellComponent
* @return {?}
*/
function () {
return this.row.index;
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxGridCellComponent.prototype, "columnIndex", {
/**
* Gets the `index` of the cell column.
* ```typescript
* let columnIndex = this.cell.columnIndex;
* ```
* @memberof IgxGridCellComponent
*/
get: /**
* Gets the `index` of the cell column.
* ```typescript
* let columnIndex = this.cell.columnIndex;
* ```
* \@memberof IgxGridCellComponent
* @return {?}
*/
function () {
return this.column.index;
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxGridCellComponent.prototype, "cellID", {
/**
* Gets the ID of the cell.
* ```typescript
* let cellID = this.cell.cellID;
* ```
* @memberof IgxGridCellComponent
*/
get: /**
* Gets the ID of the cell.
* ```typescript
* let cellID = this.cell.cellID;
* ```
* \@memberof IgxGridCellComponent
* @return {?}
*/
function () {
/** @type {?} */
var primaryKey = this.grid.primaryKey;
/** @type {?} */
var rowID = primaryKey ? this.rowData[primaryKey] : this.rowData;
return { rowID: rowID, columnID: this.columnIndex, rowIndex: this.rowIndex };
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxGridCellComponent.prototype, "nativeElement", {
/**
* Returns a reference to the nativeElement of the cell.
* ```typescript
* let cellNativeElement = this.cell.nativeElement;
* ```
* @memberof IgxGridCellComponent
*/
get: /**
* Returns a reference to the nativeElement of the cell.
* ```typescript
* let cellNativeElement = this.cell.nativeElement;
* ```
* \@memberof IgxGridCellComponent
* @return {?}
*/
function () {
return this.element.nativeElement;
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxGridCellComponent.prototype, "inEditMode", {
/**
* @deprecated
* Use `cell.editMode` as a getter and
* `cell.setEditMode(true | false)` to start/exit edit mode.
*
* Gets/sets whether the cell is in edit mode.
* ```typescript
* let isCellInEditMode = this.cell.inEditMode;
* ```
* @memberof IgxGridCellComponent
*/
get: /**
* @deprecated
* Use `cell.editMode` as a getter and
* `cell.setEditMode(true | false)` to start/exit edit mode.
*
* Gets/sets whether the cell is in edit mode.
* ```typescript
* let isCellInEditMode = this.cell.inEditMode;
* ```
* \@memberof IgxGridCellComponent
* @return {?}
*/
function () {
return this.editMode;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this.setEditMode(value);
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxGridCellComponent.prototype, "readonly", {
/**
* Gets whether the cell is editable.
* ```typescript
* let isCellReadonly = this.cell.readonly;
* ```
* @memberof IgxGridCellComponent
*/
get: /**
* Gets whether the cell is editable.
* ```typescript
* let isCellReadonly = this.cell.readonly;
* ```
* \@memberof IgxGridCellComponent
* @return {?}
*/
function () {
return !this.column.editable;
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxGridCellComponent.prototype, "describedby", {
/**
* Returns a string containing the grid `id` and the column `field` concatenated by "_".
* ```typescript
* let describedBy = this.cell.describedBy;
* ```
* @memberof IgxGridCellComponent
*/
get: /**
* Returns a string containing the grid `id` and the column `field` concatenated by "_".
* ```typescript
* let describedBy = this.cell.describedBy;
* ```
* \@memberof IgxGridCellComponent
* @return {?}
*/
function () {
return this.row.gridID + "_" + this.column.field;
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxGridCellComponent.prototype, "selected", {
/**
* Gets whether the cell is selected.
* ```typescript
* let isSelected = this.cell.selected;
* ```
* @memberof IgxGridCellComponent
*/
get: /**
* Gets whether the cell is selected.
* ```typescript
* let isSelected = this.cell.selected;
* ```
* \@memberof IgxGridCellComponent
* @return {?}
*/
function () {
return this.isCellSelected();
},
/**
* Selects/deselects the cell.
* ```typescript
* this.cell.selected = true.
* ```
* @memberof IgxGridCellComponent
*/
set: /**
* Selects/deselects the cell.
* ```typescript
* this.cell.selected = true.
* ```
* \@memberof IgxGridCellComponent
* @param {?} val
* @return {?}
*/
function (val) {
/** @type {?} */
var node = this.selectionNode;
val ? this.selectionService.add(node) : this.selectionService.remove(node);
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxGridCellComponent.prototype, "dirty", {
get: /**
* @return {?}
*/
function () {
if (this.grid.rowEditable) {
/** @type {?} */
var rowCurrentState = this.grid.transactions.getAggregatedValue(this.row.rowID, false);
if (rowCurrentState) {
return rowCurrentState[this.column.field] !== undefined && rowCurrentState[this.column.field] !== null;
}
}
else {
/** @type {?} */
var rowTransaction = this.grid.transactions.getState(this.row.rowID);
return rowTransaction && rowTransaction.value && rowTransaction.value[this.column.field];
}
return false;
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxGridCellComponent.prototype, "editValue", {
/**
* Gets the current edit value while a cell is in edit mode.
* Only for cell editing mode.
* ```typescript
* let editValue = this.cell.editValue;
* ```
* @memberof IgxGridCellComponent
*/
get: /**
* Gets the current edit value while a cell is in edit mode.
* Only for cell editing mode.
* ```typescript
* let editValue = this.cell.editValue;
* ```
* \@memberof IgxGridCellComponent
* @return {?}
*/
function () {
if (this.crudService.inEditMode) {
return this.crudService.cell.editValue;
}
},
/**
* Sets the current edit value while a cell is in edit mode.
* Only for cell editing mode.
* ```typescript
* this.cell.editValue = value;
* ```
* @memberof IgxGridCellComponent
*/
set: /**
* Sets the current edit value while a cell is in edit mode.
* Only for cell editing mode.
* ```typescript
* this.cell.editValue = value;
* ```
* \@memberof IgxGridCellComponent
* @param {?} value
* @return {?}
*/
function (value) {
if (this.crudService.inEditMode) {
this.crudService.cell.editValue = value;
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxGridCellComponent.prototype, "editable", {
/**
* Returns whether the cell is editable.
*/
get: /**
* Returns whether the cell is editable.
* @return {?}
*/
function () {
return this.column.editable;
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxGridCellComponent.prototype, "highlight", {
get: /**
* @protected
* @return {?}
*/
function () {
return this._highlight;
},
set: /**
* @protected
* @param {?} value
* @return {?}
*/
function (value) {
this._highlight = value;
if (this._highlight && this.grid.lastSearchInfo.searchText) {
this._highlight.highlight(this.grid.lastSearchInfo.searchText, this.grid.lastSearchInfo.caseSensitive, this.grid.lastSearchInfo.exactMatch);
this._highlight.activateIfNecessary();
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxGridCellComponent.prototype, "selectionNode", {
get: /**
* @protected
* @return {?}
*/
function () {
return { row: this.rowIndex, column: this.visibleColumnIndex };
},
enumerable: true,
configurable: true
});
/**
* @hidden
* @internal
*/
/**
* @hidden
* \@internal
* @return {?}
*/
IgxGridCellComponent.prototype.ngOnInit = /**
* @hidden
* \@internal
* @return {?}
*/
function () {
var _this = this;
this.zone.runOutsideAngular(function () {
_this.nativeElement.addEventListener('pointerdown', _this.pointerdown);
_this.nativeElement.addEventListener('pointerenter', _this.pointerenter);
_this.nativeElement.addEventListener('pointerup', _this.pointerup);
// IE 11 workarounds
if (isIE()) {
_this.compositionStartHandler = function () { return _this.isInCompositionMode = true; };
_this.compositionEndHandler = function () { return _this.isInCompositionMode = false; };
// Hitting Enter with IME submits and exits from edit mode instead of first closing the IME dialog
_this.nativeElement.addEventListener('compositionstart', _this.compositionStartHandler);
_this.nativeElement.addEventListener('compositionend', _this.compositionEndHandler);
// https://stackoverflow.com/q/51404782
_this.focusHandlerIE = function (e) { return _this.onFocus(e); };
_this.focusOut = function () { return _this.onBlur(); };
_this.nativeElement.addEventListener('focusin', _this.focusHandlerIE);
_this.nativeElement.addEventListener('focusout', _this.focusOut);
}
});
};
/**
* @hidden
* @internal
*/
/**
* @hidden
* \@internal
* @return {?}
*/
IgxGridCellComponent.prototype.ngOnDestroy = /**
* @hidden
* \@internal
* @return {?}
*/
function () {
var _this = this;
this.zone.runOutsideAngular(function () {
_this.nativeElement.removeEventListener('pointerdown', _this.pointerdown);
_this.nativeElement.removeEventListener('pointerenter', _this.pointerenter);
_this.nativeElement.removeEventListener('pointerup', _this.pointerup);
if (isIE()) {
_this.nativeElement.removeEventListener('compositionstart', _this.compositionStartHandler);
_this.nativeElement.removeEventListener('compositionend', _this.compositionEndHandler);
_this.nativeElement.removeEventListener('focusin', _this.focusHandlerIE);
_this.nativeElement.removeEventListener('focusout', _this.focusOut);
}
});
};
/**
* @hidden
* @internal
*/
/**
* @hidden
* \@internal
* @return {?}
*/
IgxGridCellComponent.prototype._updateCRUDStatus = /**
* @hidden
* \@internal
* @return {?}
*/
function () {
if (this.editable && this.crudService.inEditMode && !this.row.deleted) {
this.gridAPI.update_cell(this.crudService.cell, this.crudService.cell.editValue);
this.crudService.end();
this.grid.cdr.markForCheck();
this.crudService.begin(this);
}
else if (this.crudService.inEditMode) {
this.grid.endEdit(true);
}
};
/**
* @hidden
* @internal
*/
/**
* @hidden
* \@internal
* @return {?}
*/
IgxGridCellComponent.prototype._updateCellSelectionStatus = /**
* @hidden
* \@internal
* @return {?}
*/
function () {
if (this.editMode) {
return;
}
/** @type {?} */
var node = this.selectionNode;
this._updateCRUDStatus();
this.selectionService.keyboardStateOnFocus(node, this.grid.onRangeSelection);
};
/**
* Gets whether the cell is selected.
* ```typescript
* let isCellSelected = thid.cell.isCellSelected();
* ```
* @memberof IgxGridCellComponent
*/
/**
* Gets whether the cell is selected.
* ```typescript
* let isCellSelected = thid.cell.isCellSelected();
* ```
* \@memberof IgxGridCellComponent
* @return {?}
*/
IgxGridCellComponent.prototype.isCellSelected = /**
* Gets whether the cell is selected.
* ```typescript
* let isCellSelected = thid.cell.isCellSelected();
* ```
* \@memberof IgxGridCellComponent
* @return {?}
*/
function () {
return this.selectionService.selected(this.selectionNode);
};
/**
* @hidden
* @internal
*/
/**
* @hidden
* \@internal
* @param {?} changes
* @return {?}
*/
IgxGridCellComponent.prototype.ngOnChanges = /**
* @hidden
* \@internal
* @param {?} changes
* @return {?}
*/
function (changes) {
if (changes.value && !changes.value.firstChange) {
if (this.highlight) {
this.highlight.lastSearchInfo.searchedText = this.grid.lastSearchInfo.searchText;
this.highlight.lastSearchInfo.caseSensitive = this.grid.lastSearchInfo.caseSensitive;
this.highlight.lastSearchInfo.exactMatch = this.grid.lastSearchInfo.exactMatch;
}
}
};
/**
* Starts/ends edit mode for the cell.
*
* ```typescript
* cell.setEditMode(true);
* ```
*/
/**
* Starts/ends edit mode for the cell.
*
* ```typescript
* cell.setEditMode(true);
* ```
* @param {?} value
* @return {?}
*/
IgxGridCellComponent.prototype.setEditMode = /**
* Starts/ends edit mode for the cell.
*
* ```typescript
* cell.setEditMode(true);
* ```
* @param {?} value
* @return {?}
*/
function (value) {
if (this.row.deleted) {
return;
}
if (this.editable && value) {
this.gridAPI.submit_value();
this.crudService.begin(this);
}
else {
this.gridAPI.escape_editMode();
}
this.grid.cdr.markForCheck();
};
/**
* Sets new value to the cell.
* ```typescript
* this.cell.update('New Value');
* ```
* @memberof IgxGridCellComponent
*/
// TODO: Refactor
/**
* Sets new value to the cell.
* ```typescript
* this.cell.update('New Value');
* ```
* \@memberof IgxGridCellComponent
* @param {?} val
* @return {?}
*/
// TODO: Refactor
IgxGridCellComponent.prototype.update = /**
* Sets new value to the cell.
* ```typescript
* this.cell.update('New Value');
* ```
* \@memberof IgxGridCellComponent
* @param {?} val
* @return {?}
*/
// TODO: Refactor
function (val) {
if (this.row.deleted) {
return;
}
/** @type {?} */
var cell = this.crudService.createCell(this);
/** @type {?} */
var args = this.gridAPI.update_cell(cell, val);
if (this.crudService.cell && this.crudService.sameCell(cell)) {
if (args.cancel) {
return;
}
this.gridAPI.escape_editMode();
}
this.cdr.markForCheck();
};
/**
* @hidden
* @internal
*/
/**
* @hidden
* \@internal
* @param {?} event
* @return {?}
*/
IgxGridCellComponent.prototype.onDoubleClick = /**
* @hidden
* \@internal
* @param {?} event
* @return {?}
*/
function (event) {
if (this.editable && !this.editMode && !this.row.deleted) {
this.crudService.begin(this);
}
this.grid.onDoubleClick.emit({
cell: this,
event: event
});
};
/**
* @hidden
* @internal
*/
/**
* @hidden
* \@internal
* @param {?} event
* @return {?}
*/
IgxGridCellComponent.prototype.onClick = /**
* @hidden
* \@internal
* @param {?} event
* @return {?}
*/
function (event) {
this.grid.onCellClick.emit({
cell: this,
event: event
});
};
/**
* @hidden
* @internal
*/
/**
* @hidden
* \@internal
* @param {?} event
* @return {?}
*/
IgxGridCellComponent.prototype.onContextMenu = /**
* @hidden
* \@internal
* @param {?} event
* @return {?}
*/
function (event) {
this.grid.onContextMenu.emit({
cell: this,
event: event
});
};
/**
* @hidden
* @internal
*/
/**
* @hidden
* \@internal
* @param {?} event
* @return {?}
*/
IgxGridCellComponent.prototype.onFocus = /**
* @hidden
* \@internal
* @param {?} event
* @return {?}
*/
function (event) {
this.focused = true;
this.row.focused = true;
this._updateCellSelectionStatus();
if (!this.selectionService.isActiveNode(this.selectionNode)) {
this.grid.onSelection.emit({ cell: this, event: event });
}
this.selectionService.activeElement = this.selectionNode;
};
/**
* @hidden
* @internal
*/
/**
* @hidden
* \@internal
* @return {?}
*/
IgxGridCellComponent.prototype.onBlur = /**
* @hidden
* \@internal
* @return {?}
*/
function () {
this.focused = false;
this.row.focused = false;
};
/**
* @protected
* @param {?} key
* @param {?} event
* @return {?}
*/
IgxGridCellComponent.prototype.handleAlt = /**
* @protected
* @param {?} key
* @param {?} event
* @return {?}
*/
function (key, event) {
if (this.row.nativeElement.tagName.toLowerCase() === 'igx-tree-grid-row' && this.isToggleKey(key)) {
/** @type {?} */
var collapse = ((/** @type {?} */ (this.row))).expanded && ROW_COLLAPSE_KEYS.has(key);
/** @type {?} */
var expand = !((/** @type {?} */ (this.row))).expanded && ROW_EXPAND_KEYS.has(key);
if (collapse) {
((/** @type {?} */ (this.gridAPI))).trigger_row_expansion_toggle(this.row.treeRow, !this.row.expanded, event, this.visibleColumnIndex);
}
else if (expand) {
((/** @type {?} */ (this.gridAPI))).trigger_row_expansion_toggle(this.row.treeRow, !this.row.expanded, event, this.visibleColumnIndex);
}
}
};
/**
* @protected
* @param {?} shift
* @return {?}
*/
IgxGridCellComponent.prototype.handleTab = /**
* @protected
* @param {?} shift
* @return {?}
*/
function (shift) {
if (shift) {
this.grid.navigation.performShiftTabKey(this.row.nativeElement, this.rowIndex, this.visibleColumnIndex);
}
else {
this.grid.navigation.performTab(this.row.nativeElement, this.rowIndex, this.visibleColumnIndex);
}
};
/**
* @protected
* @param {?} ctrl
* @return {?}
*/
IgxGridCellComponent.prototype.handleEnd = /**
* @protected
* @param {?} ctrl
* @return {?}
*/
function (ctrl) {
if (ctrl) {
this.grid.navigation.goToLastCell();
}
else {
this.grid.navigation.onKeydownEnd(this.rowIndex);
}
};
/**
* @protected
* @param {?} ctrl
* @return {?}
*/
IgxGridCellComponent.prototype.handleHome = /**
* @protected
* @param {?} ctrl
* @return {?}
*/
function (ctrl) {
if (ctrl) {
this.grid.navigation.goToFirstCell();
}
else {
this.grid.navigation.onKeydownHome(this.rowIndex);
}
};
// TODO: Refactor
/**
*
* @hidden
* @internal
*/
// TODO: Refactor
/**
*
* @hidden
* \@internal
* @param {?} event
* @return {?}
*/
IgxGridCellComponent.prototype.dispatchEvent =
// TODO: Refactor
/**
*
* @hidden
* \@internal
* @param {?} event
* @return {?}
*/
function (event) {
/** @type {?} */
var key = event.key.toLowerCase();
/** @type {?} */
var shift = event.shiftKey;
/** @type {?} */
var ctrl = event.ctrlKey;
/** @type {?} */
var node = this.selectionNode;
if (!SUPPORTED_KEYS.has(key)) {
return;
}
event.stopPropagation();
/** @type {?} */
var keydownArgs = { targetType: 'dataCell', target: this, event: event, cancel: false };
this.grid.onGridKeydown.emit(keydownArgs);
if (keydownArgs.cancel) {
this.selectionService.keyboardStateOnKeydown(node, shift, shift && key === 'tab');
return;
}
if (event.altKey) {
event.preventDefault();
this.handleAlt(key, event);
return;
}
this.selectionService.keyboardStateOnKeydown(node, shift, shift && key === 'tab');
if (key === 'tab') {
event.preventDefault();
}
if (this.editMode) {
if (NAVIGATION_KEYS.has(key)) {
if (this.column.inlineEditorTemplate) {
return;
}
if (['date', 'boolean'].indexOf(this.column.dataType) > -1) {
return;
}
return;
}
}
if (NAVIGATION_KEYS.has(key)) {
event.preventDefault();
}
// TODO: to be deleted when onFocusChange event is removed #4054
/** @type {?} */
var args = { cell: this, groupRow: null, event: event, cancel: false };
this.grid.onFocusChange.emit(args);
if (args.cancel) {
return;
}
switch (key) {
case 'tab':
this.handleTab(shift);
break;
case 'end':
this.handleEnd(ctrl);
break;
case 'home':
this.handleHome(ctrl);
break;
case 'arrowleft':
case 'left':
if (ctrl) {
this.grid.navigation.onKeydownHome(node.row);
break;
}
this.grid.navigation.onKeydownArrowLeft(this.nativeElement, node.row, node.column);
break;
case 'arrowright':
case 'right':
if (ctrl) {
this.grid.navigation.onKeydownEnd(node.row);
break;
}
this.grid.navigation.onKeydownArrowRight(this.nativeElement, node.row, node.column);
break;
case 'arrowup':
case 'up':
if (ctrl) {
this.grid.navigation.navigateTop(node.column);
break;
}
this.grid.navigation.navigateUp(this.row.nativeElement, node.row, node.column);
break;
case 'arrowdown':
case 'down':
if (ctrl) {
this.grid.navigation.navigateBottom(node.column);
break;
}
this.grid.navigation.navigateDown(this.row.nativeElement, node.row, node.column);
break;
case 'enter':
case 'f2':
this.onKeydownEnterEditMode();
break;
case 'escape':
case 'esc':
this.onKeydownExitEditMode();
break;
case ' ':
case 'spacebar':
case 'space':
if (this.row.rowSelectable) {
this.row.checkboxElement.toggle();
}
break;
default:
return;
}
};
/**
* @hidden
* @internal
*/
/**
* @hidden
* \@internal
* @return {?}
*/
IgxGridCellComponent.prototype.onKeydownEnterEditMode = /**
* @hidden
* \@internal
* @return {?}
*/
function () {
if (this.isInCompositionMode) {
return;
}
if (this.column.editable && !this.row.deleted) {
if (this.editMode) {
this.grid.endEdit(true);
this.nativeElement.focus();
}
else {
this.crudService.begin(this);
}
}
};
/**
* @hidden
* @internal
*/
/**
* @hidden
* \@internal
* @return {?}
*/
IgxGridCellComponent.prototype.onKeydownExitEditMode = /**
* @hidden
* \@internal
* @return {?}
*/
function () {
if (this.isInCompositionMode) {
return;
}
if (this.editMode) {
/** @type {?} */
var v = this.crudService.cell;
/** @type {?} */
var args = (/** @type {?} */ ({
cellID: v.id,
rowID: v.id.rowID,
oldValue: v.value,
newValue: v.editValue,
cancel: false
}));
this.grid.onCellEditCancel.emit(args);
if (args.cancel) {
return;
}
this.grid.endEdit(false);
this.nativeElement.focus();
}
};
/**
* If the provided string matches the text in the cell, the text gets highlighted.
* ```typescript
* this.cell.highlightText('Cell Value', true);
* ```
* @memberof IgxGridCellComponent
*/
/**
* If the provided string matches the text in the cell, the text gets highlighted.
* ```typescript
* this.cell.highlightText('Cell Value', true);
* ```
* \@memberof IgxGridCellComponent
* @param {?} text
* @param {?=} caseSensitive
* @param {?=} exactMatch
* @return {?}
*/
IgxGridCellComponent.prototype.highlightText = /**
* If the provided string matches the text in the cell, the text gets highlighted.
* ```typescript
* this.cell.highlightText('Cell Value', true);
* ```
* \@memberof IgxGridCellComponent
* @param {?} text
* @param {?=} caseSensitive
* @param {?=} exactMatch
* @return {?}
*/
function (text, caseSensitive, exactMatch) {
return this.highlight && this.column.searchable ? this.highlight.highlight(text, caseSensitive, exactMatch) : 0;
};
/**
* Clears the highlight of the text in the cell.
* ```typescript
* this.cell.clearHighLight();
* ```
* @memberof IgxGridCellComponent
*/
/**
* Clears the highlight of the text in the cell.
* ```typescript
* this.cell.clearHighLight();
* ```
* \@memberof IgxGridCellComponent
* @return {?}
*/
IgxGridCellComponent.prototype.clearHighlight = /**
* Clears the highlight of the text in the cell.
* ```typescript
* this.cell.clearHighLight();
* ```
* \@memberof IgxGridCellComponent
* @return {?}
*/
function () {
if (this.highlight && this.column.searchable) {
this.highlight.clearHighlight();
}
};
/**
* @hidden
* @internal
*/
/**
* @hidden
* \@internal
* @param {?} range
* @return {?}
*/
IgxGridCellComponent.prototype.calculateSizeToFit = /**
* @hidden
* \@internal
* @param {?} range
* @return {?}
*/
function (range) {
return Math.max.apply(Math, tslib_1.__spread(Array.from(this.nativeElement.children)
.map(function (child) { return getNodeSizeViaRange(range, child); })));
};
/**
* @private
* @param {?} key
* @return {?}
*/
IgxGridCellComponent.prototype.isToggleKey = /**
* @private
* @param {?} key
* @return {?}
*/
function (key) {
return ROW_COLLAPSE_KEYS.has(key) || ROW_EXPAND_KEYS.has(key);
};
IgxGridCellComponent.decorators = [
{ type: Component, args: [{
changeDetection: ChangeDetectionStrategy.OnPush,
selector: 'igx-grid-cell',
template: "<ng-template #defaultCell>\n <div igxTextHighlight [cssClass]=\"highlightClass\" [activeCssClass]=\"activeHighlightClass\" [groupName]=\"gridID\"\n [value]=\"formatter ? formatter(value) : column.dataType === 'number' ? (value | igxdecimal: grid.locale) : column.dataType === 'date' ? (value | igxdate: grid.locale) : value\"\n [row]=\"rowData\" [column]=\"this.column.field\" [containerClass]=\"'igx-grid__td-text'\"\n class=\"igx-grid__td-text\">{{ formatter ? formatter(value) : column.dataType === 'number' ? (value | igxdecimal:\n grid.locale) : column.dataType === 'date' ? (value | igxdate: grid.locale) : value }}</div>\n</ng-template>\n<ng-template #inlineEditor let-cell=\"cell\">\n <ng-container *ngIf=\"column.dataType === 'string'\">\n <igx-input-group displayDensity=\"compact\">\n <input igxInput [value]=\"editValue\" (input)=\"editValue = $event.target.value\" [igxFocus]=\"focused\" />\n </igx-input-group>\n </ng-container>\n <ng-container *ngIf=\"column.dataType === 'number'\">\n <igx-input-group displayDensity=\"compact\">\n <input igxInput [value]=\"editValue\" (input)=\"editValue = $event.target.value\" [igxFocus]=\"focused\" type=\"number\">\n </igx-input-group>\n </ng-container>\n <ng-container *ngIf=\"column.dataType === 'boolean'\">\n <igx-checkbox (change)=\"editValue = $event.checked\" [value]=\"editValue\" [checked]=\"editValue\"\n [igxFocus]=\"focused\" [disableRipple]=\"true\"></igx-checkbox>\n </ng-container>\n <ng-container *ngIf=\"column.dataType === 'date'\">\n <igx-date-picker [style.width.%]=\"100\" [outlet]=\"grid.outletDirective\" mode=\"dropdown\" (onSelection)=\"editValue = $event\"\n [locale]=\"grid.locale\" [value]=\"editValue\" [igxFocus]=\"focused\" [labelVisibility]=\"false\">\n </igx-date-picker>\n </ng-container>\n</ng-template>\n<ng-container *ngTemplateOutlet=\"template; context: context\">\n</ng-container>\n"
}] }
];
/** @nocollapse */
IgxGridCellComponent.ctorParameters = function () { return [
{ type: IgxGridSelectionService },
{ type: IgxGridCRUDService },
{ type: GridBaseAPIService },
{ type: IgxSelectionAPIService },
{ type: ChangeDetectorRef },
{ type: ElementRef },
{ type: NgZone }
]; };
IgxGridCellComponent.propDecorators = {
column: [{ type: Input }],
row: [{ type: Input }],
rowData: [{ type: Input }],
cellTemplate: [{ type: Input }],
value: [{ type: Input }],
formatter: [{ type: Input }],
rowIndex: [{ type: HostBinding, args: ['attr.data-rowIndex',] }],
visibleColumnIndex: [{ type: HostBinding, args: ['attr.data-visibleIndex',] }, { type: Input }],
lastPinned: [{ type: Input }, { type: HostBinding, args: ['class.igx-grid__td--pinned-last',] }],
editMode: [{ type: Input }, { type: HostBinding, args: ['class.igx-grid__td--editing',] }],
tabindex: [{ type: HostBinding, args: ['attr.tabindex',] }],
role: [{ type: HostBinding, args: ['attr.role',] }],
readonly: [{ type: HostBinding, args: ['attr.aria-readonly',] }],
describedby: [{ type: HostBinding, args: ['attr.aria-describedby',] }],
width: [{ type: HostBinding, args: ['style.min-width',] }, { type: HostBinding, args: ['style.max-width',] }, { type: HostBinding, args: ['style.flex-basis',] }, { type: Input }],
selected: [{ type: HostBinding, args: ['attr.aria-selected',] }, { type: HostBinding, args: ['class.igx-grid__td--selected',] }],
dirty: [{ type: HostBinding, args: ['class.igx-grid__td--edited',] }],
focused: [{ type: HostBinding, args: ['class.igx-grid__td--active',] }],
defaultCellTemplate: [{ type: ViewChild, args: ['defaultCell', { read: TemplateRef },] }],
inlineEditorTemplate: [{ type: ViewChild, args: ['inlineEditor', { read: TemplateRef },] }],
highlight: [{ type: ViewChild, args: [IgxTextHighlightDirective, { read: IgxTextHighlightDirective },] }],
onDoubleClick: [{ type: HostListener, args: ['dblclick', ['$event'],] }],
onClick: [{ type: HostListener, args: ['click', ['$event'],] }],
onContextMenu: [{ type: HostListener, args: ['contextmenu', ['$event'],] }],
onFocus: [{ type: HostListener, args: ['focus', ['$event'],] }],
onBlur: [{ type: HostListener, args: ['blur',] }],
dispatchEvent: [{ type: HostListener, args: ['keydown', ['$event'],] }]
};
tslib_1.__decorate([
DeprecateProperty("'inEditMode' is deprecated\nUse 'editMode' to get the current state and 'setEditMode(boolean)' as a setter"),
tslib_1.__metadata("design:type", Boolean),
tslib_1.__metadata("design:paramtypes", [Boolean])
], IgxGridCellComponent.prototype, "inEditMode", null);
return IgxGridCellComponent;
}());
export { IgxGridCellComponent };
if (false) {
/**
* Gets the column of the cell.
* ```typescript
* let cellColumn = this.cell.column;
* ```
* \@memberof IgxGridCellComponent
* @type {?}
*/
IgxGridCellComponent.prototype.column;
/**
* Gets the row of the cell.
* ```typescript
* let cellRow = this.cell.row;
* ```
* \@memberof IgxGridCellComponent
* @type {?}
*/
IgxGridCellComponent.prototype.row;
/**
* Gets the data of the row of the cell.
* ```typescript
* let rowData = this.cell.rowData;
* ```
* \@memberof IgxGridCellComponent
* @type {?}
*/
IgxGridCellComponent.prototype.rowData;
/**
* Sets/gets the template of the cell.
* ```html
* <ng-template #cellTemplate igxCell let-value>
* <div style="font-style: oblique; color:blueviolet; background:red">
* <span>{{value}}</span>
* </div>
* </ng-template>
* ```
* ```typescript
* \@ViewChild('cellTemplate',{read: TemplateRef})
* cellTemplate: TemplateRef<any>;
* ```
* ```typescript
* this.cell.cellTemplate = this.cellTemplate;
* ```
* ```typescript
* let template = this.cell.cellTemplate;
* ```
* \@memberof IgxGridCellComponent
* @type {?}
*/
IgxGridCellComponent.prototype.cellTemplate;
/**
* Sets/gets the cell value.
* ```typescript
* this.cell.value = "Cell Value";
* ```
* ```typescript
* let cellValue = this.cell.value;
* ```
* \@memberof IgxGridCellComponent
* @type {?}
*/
IgxGridCellComponent.prototype.value;
/**
* Sets/gets the highlight class of the cell.
* Default value is `"igx-highlight"`.
* ```typescript
* let highlightClass = this.cell.highlightClass;
* ```
* ```typescript
* this.cell.highlightClass = 'igx-cell-highlight';
* ```
* \@memberof IgxGridCellComponent
* @type {?}
*/
IgxGridCellComponent.prototype.highlightClass;
/**
* Sets/gets the active highlight class class of the cell.
* Default value is `"igx-highlight__active"`.
* ```typescript
* let activeHighlightClass = this.cell.activeHighlightClass;
* ```
* ```typescript
* this.cell.activeHighlightClass = 'igx-cell-highlight_active';
* ```
* \@memberof IgxGridCellComponent
* @type {?}
*/
IgxGridCellComponent.prototype.activeHighlightClass;
/**
* Gets the cell formatter.
* ```typescript
* let cellForamatter = this.cell.formatter;
* ```
* \@memberof IgxGridCellComponent
* @type {?}
*/
IgxGridCellComponent.prototype.formatter;
/**
* Gets the visible `index` of the in which the cell is stored.
* ```typescript
* let visibleColumnIndex = this.cell.visibleColumnIndex;
* ```
* \@memberof IgxGridCellComponent
* @type {?}
*/
IgxGridCellComponent.prototype.visibleColumnIndex;
/**
* @hidden
* \@internal
* @type {?}
*/
IgxGridCellComponent.prototype.lastPinned;
/**
* Returns whether the cell is in edit mode.
* @type {?}
*/
IgxGridCellComponent.prototype.editMode;
/**
* Sets/get the `tabindex` property of the cell.
* Default value is `0`.
* ```typescript
* this.cell.tabindex = 1;
* ```
* ```typescript
* let cellTabIndex = this.cell.tabindex;
* ```
* \@memberof IgxGridCellComponent
* @type {?}
*/
IgxGridCellComponent.prototype.tabindex;
/**
* Sets/get the `role` property of the cell.
* Default value is `"gridcell"`.
* ```typescript
* this.cell.role = 'grid-cell';
* ```
* ```typescript
* let cellRole = this.cell.role;
* ```
* \@memberof IgxGridCellComponent
* @type {?}
*/
IgxGridCellComponent.prototype.role;
/**
* Gets the width of the cell.
* ```typescript
* let cellWidth = this.cell.width;
* ```
* \@memberof IgxGridCellComponent
* @type {?}
*/
IgxGridCellComponent.prototype.width;
/**
* @hidden
* \@internal
* @type {?}
*/
IgxGridCellComponent.prototype.focused;
/**
* @type {?}
* @protected
*/
IgxGridCellComponent.prototype.defaultCellTemplate;
/**
* @type {?}
* @protected
*/
IgxGridCellComponent.prototype.inlineEditorTemplate;
/**
* @type {?}
* @protected
*/
IgxGridCellComponent.prototype.isInCompositionMode;
/**
* @type {?}
* @protected
*/
IgxGridCellComponent.prototype.compositionStartHandler;
/**
* @type {?}
* @protected
*/
IgxGridCellComponent.prototype.compositionEndHandler;
/**
* @type {?}
* @protected
*/
IgxGridCellComponent.prototype.focusHandlerIE;
/**
* @type {?}
* @protected
*/
IgxGridCellComponent.prototype.focusOut;
/**
* @type {?}
* @private
*/
IgxGridCellComponent.prototype._highlight;
/**
*
* @hidden
* \@internal
* @type {?}
*/
IgxGridCellComponent.prototype.pointerdown;
/**
*
* @hidden
* \@internal
* @type {?}
*/
IgxGridCellComponent.prototype.pointerenter;
/**
* @hidden
* \@internal
* @type {?}
*/
IgxGridCellComponent.prototype.pointerup;
/**
* @type {?}
* @protected
*/
IgxGridCellComponent.prototype.selectionService;
/**
* @type {?}
* @protected
*/
IgxGridCellComponent.prototype.crudService;
/** @type {?} */
IgxGridCellComponent.prototype.gridAPI;
/** @type {?} */
IgxGridCellComponent.prototype.selection;
/** @type {?} */
IgxGridCellComponent.prototype.cdr;
/**
* @type {?}
* @private
*/
IgxGridCellComponent.prototype.element;
/**
* @type {?}
* @protected
*/
IgxGridCellComponent.prototype.zone;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2VsbC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9pZ25pdGV1aS1hbmd1bGFyLyIsInNvdXJjZXMiOlsibGliL2dyaWRzL2NlbGwuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcG