@progress/kendo-angular-grid 6.1.3 → 7.0.0-dev.202204150740

package/esm2015/rendering/common/dom-queries.js

@@ -0,0 +1,158 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+const focusableRegex = /^(?:a|input|select|option|textarea|button|object)$/i;
+const NODE_NAME_PREDICATES = {};
+const toClassList = (classNames) => String(classNames).trim().split(' ');
+/**
+ * @hidden
+ */
+export const hasClasses = (element, classNames) => {
+    const namesList = toClassList(classNames);
+    return Boolean(toClassList(element.className).find((className) => namesList.indexOf(className) >= 0));
+};
+/**
+ * @hidden
+ */
+export const matchesClasses = (classNames) => (element) => hasClasses(element, classNames);
+/**
+ * @hidden
+ */
+export const matchesNodeName = (nodeName) => {
+    if (!NODE_NAME_PREDICATES[nodeName]) {
+        NODE_NAME_PREDICATES[nodeName] = (element) => String(element.nodeName).toLowerCase() === nodeName.toLowerCase();
+    }
+    return NODE_NAME_PREDICATES[nodeName];
+};
+/**
+ * @hidden
+ */
+export const closest = (node, predicate) => {
+    while (node && !predicate(node)) {
+        node = node.parentNode;
+    }
+    return node;
+};
+/**
+ * @hidden
+ */
+export const closestInScope = (node, predicate, scope) => {
+    while (node && node !== scope && !predicate(node)) {
+        node = node.parentNode;
+    }
+    if (node !== scope) {
+        return node;
+    }
+};
+/**
+ * @hidden
+ */
+export const contains = (parent, node, matchSelf = false) => {
+    const outside = !closest(node, (child) => child === parent);
+    if (outside) {
+        return false;
+    }
+    const el = closest(node, (child) => child === node);
+    return el && (matchSelf || el !== parent);
+};
+/**
+ * @hidden
+ */
+export const isVisible = (element) => {
+    const rect = element.getBoundingClientRect();
+    const hasSize = rect.width > 0 && rect.height > 0;
+    const hasPosition = rect.x !== 0 && rect.y !== 0;
+    // Elements can have zero size due to styling, but they will still count as visible.
+    // For example, the selection checkbox has no size, but is made visible through styling.
+    return (hasSize || hasPosition) && window.getComputedStyle(element).visibility !== 'hidden';
+};
+/**
+ * @hidden
+ */
+export const isFocusable = (element) => {
+    if (!element.tagName) {
+        return false;
+    }
+    const tagName = element.tagName.toLowerCase();
+    const hasTabIndex = Boolean(element.getAttribute('tabIndex'));
+    const focusable = !element.disabled && focusableRegex.test(tagName);
+    return focusable || hasTabIndex;
+};
+/**
+ * @hidden
+ */
+export const isFocusableWithTabKey = (element, checkVisibility = true) => {
+    if (!isFocusable(element)) {
+        return false;
+    }
+    const visible = !checkVisibility || isVisible(element);
+    const ariaHidden = element.getAttribute('aria-hidden') === 'true';
+    const tabIndex = element.getAttribute('tabIndex');
+    return visible && !ariaHidden && tabIndex !== '-1';
+};
+/**
+ * @hidden
+ */
+export const findElement = (node, predicate, matchSelf = true) => {
+    if (!node) {
+        return;
+    }
+    if (matchSelf && predicate(node)) {
+        return node;
+    }
+    node = node.firstChild;
+    while (node) {
+        if (node.nodeType === 1) {
+            const element = findElement(node, predicate);
+            if (element) {
+                return element;
+            }
+        }
+        node = node.nextSibling;
+    }
+};
+/**
+ * @hidden
+ */
+export const findLastElement = (node, predicate, matchSelf = true) => {
+    let last = null;
+    findElement(node, (node) => {
+        if (predicate(node)) {
+            last = node;
+        }
+        return false;
+    }, matchSelf);
+    return last;
+};
+/**
+ * @hidden
+ */
+export const findFocusable = (element, checkVisibility = true) => {
+    return findElement(element, (node) => isFocusableWithTabKey(node, checkVisibility));
+};
+/**
+ * @hidden
+ */
+export const findFocusableChild = (element, checkVisibility = true) => {
+    return findElement(element, (node) => isFocusableWithTabKey(node, checkVisibility), false);
+};
+/**
+ * @hidden
+ */
+export const findLastFocusableChild = (element, checkVisibility = true) => {
+    return findLastElement(element, (node) => isFocusableWithTabKey(node, checkVisibility), false);
+};
+/**
+ * @hidden
+ */
+export function rtlScrollPosition(position, element, initial) {
+    let result = position;
+    if (initial < 0) {
+        result = -position;
+    }
+    else if (initial > 0) {
+        result = element.scrollWidth - element.offsetWidth - position;
+    }
+    return result;
+}

package/esm2015/rendering/common/field-accessor.pipe.js

@@ -0,0 +1,45 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Pipe } from '@angular/core';
+import { getter } from '@progress/kendo-common';
+import { isString, isNullOrEmptyString } from '../../utils';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-intl";
+const FORMAT_REGEX = /\{\d+:?/;
+/**
+ * @hidden
+ */
+export class FieldAccessorPipe {
+    constructor(intlService) {
+        this.intlService = intlService;
+    }
+    transform(dataItem, fieldName, format) {
+        if (!isNullOrEmptyString(fieldName)) {
+            const value = getter(fieldName)(dataItem);
+            if (!isNullOrEmptyString(format)) {
+                return this.formatValue(format, value);
+            }
+            return value;
+        }
+        return dataItem;
+    }
+    formatValue(format, value) {
+        const intl = this.intlService;
+        if (isString(format) && format.match(FORMAT_REGEX)) {
+            return intl.format(format, value);
+        }
+        return intl.toString(value, format);
+    }
+}
+FieldAccessorPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FieldAccessorPipe, deps: [{ token: i1.IntlService }], target: i0.ɵɵFactoryTarget.Pipe });
+FieldAccessorPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FieldAccessorPipe, name: "valueOf", pure: false });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FieldAccessorPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/pipe-prefix
+                    name: 'valueOf',
+                    pure: false
+                }]
+        }], ctorParameters: function () { return [{ type: i1.IntlService }]; } });

package/esm2015/rendering/common/loading.component.js

@@ -0,0 +1,50 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Component, HostBinding, Input } from '@angular/core';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-l10n";
+import * as i2 from "@angular/common";
+/**
+ * @hidden
+ */
+export class LoadingComponent {
+    constructor(localization) {
+        this.localization = localization;
+        this.hostClass = true;
+    }
+    get loadingText() {
+        return this.localization.get('loading');
+    }
+}
+LoadingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LoadingComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+LoadingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: LoadingComponent, selector: "[kendoGridLoading]", inputs: { loadingTemplate: "loadingTemplate" }, host: { properties: { "class.k-loading-mask": "this.hostClass" } }, ngImport: i0, template: `
+        <ng-container *ngIf="!loadingTemplate">
+            <span class="k-loading-text">{{ loadingText }}</span>
+            <div class="k-loading-image"></div>
+            <div class="k-loading-color"></div>
+        </ng-container>
+        <ng-template *ngIf="loadingTemplate" [ngTemplateOutlet]="loadingTemplate?.templateRef">
+        </ng-template>
+    `, isInline: true, directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LoadingComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[kendoGridLoading]',
+                    template: `
+        <ng-container *ngIf="!loadingTemplate">
+            <span class="k-loading-text">{{ loadingText }}</span>
+            <div class="k-loading-image"></div>
+            <div class="k-loading-color"></div>
+        </ng-container>
+        <ng-template *ngIf="loadingTemplate" [ngTemplateOutlet]="loadingTemplate?.templateRef">
+        </ng-template>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; }, propDecorators: { hostClass: [{
+                type: HostBinding,
+                args: ['class.k-loading-mask']
+            }], loadingTemplate: [{
+                type: Input
+            }] } });

package/esm2015/rendering/common/row-args.js

@@ -0,0 +1,5 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+export {};

package/esm2015/rendering/common/row-class.js

@@ -0,0 +1,5 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+export {};

package/esm2015/rendering/common/spacer.component.js

@@ -0,0 +1,44 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Component, HostBinding, Input } from '@angular/core';
+import { isPresent } from '../../utils';
+import * as i0 from "@angular/core";
+/**
+ * Represents the Kendo UI GridSpacer component for Angular.
+ * Used to give additional white space between the Pager inner elements,
+ * and provides a way for customizing the spacer width.
+ * It can also be used in any flex container within the Grid.
+ */
+export class GridSpacerComponent {
+    constructor() {
+        this.hostClass = true;
+    }
+    get sizedClass() {
+        return isPresent(this.width);
+    }
+    get flexBasisStyle() {
+        return this.width;
+    }
+}
+GridSpacerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: GridSpacerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+GridSpacerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: GridSpacerComponent, selector: "kendo-grid-spacer, kendo-pager-spacer", inputs: { width: "width" }, host: { properties: { "class.k-spacer": "this.hostClass", "class.k-spacer-sized": "this.sizedClass", "style.flexBasis": "this.flexBasisStyle" } }, ngImport: i0, template: ``, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: GridSpacerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-grid-spacer, kendo-pager-spacer',
+                    template: ``
+                }]
+        }], propDecorators: { hostClass: [{
+                type: HostBinding,
+                args: ['class.k-spacer']
+            }], sizedClass: [{
+                type: HostBinding,
+                args: ['class.k-spacer-sized']
+            }], flexBasisStyle: [{
+                type: HostBinding,
+                args: ['style.flexBasis']
+            }], width: [{
+                type: Input
+            }] } });

package/esm2015/rendering/common/template-context.directive.js

@@ -0,0 +1,40 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Directive, Input } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * @hidden
+ */
+export class TemplateContextDirective {
+    constructor(viewContainerRef) {
+        this.viewContainerRef = viewContainerRef;
+    }
+    set templateContext(context) {
+        this.removeView();
+        if (context.templateRef) {
+            this.insertedViewRef = this.viewContainerRef.createEmbeddedView(context.templateRef, context);
+        }
+    }
+    ngOnDestroy() {
+        this.removeView();
+    }
+    removeView() {
+        if (this.insertedViewRef) {
+            this.viewContainerRef.remove(this.viewContainerRef.indexOf(this.insertedViewRef));
+            this.insertedViewRef = undefined;
+        }
+    }
+}
+TemplateContextDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TemplateContextDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+TemplateContextDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: TemplateContextDirective, selector: "[templateContext]", inputs: { templateContext: "templateContext" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TemplateContextDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    selector: '[templateContext]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; }, propDecorators: { templateContext: [{
+                type: Input
+            }] } });

package/esm2015/rendering/details/detail-template.directive.js

@@ -0,0 +1,103 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Directive, Optional, Input } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * Represents the detail template of the Grid ([more information and examples]({% slug detailrowtemplate_grid %})).
+ * To define the detail template, nest an `<ng-template>` tag with the `kendoGridDetailTemplate` directive inside a `<kendo-grid>` tag.
+ *
+ * @example
+ * ```ts-preview
+ *
+ * _@Component({
+ *   selector: 'my-app',
+ *   template: `
+ *       <kendo-grid
+ *         [data]="data"
+ *         selectable="true"
+ *         style="height: 160px"
+ *         >
+ *         <kendo-grid-column field="ProductID"></kendo-grid-column>
+ *         <kendo-grid-column field="ProductName"></kendo-grid-column>
+ *         <kendo-grid-column field="UnitPrice"></kendo-grid-column>
+ *         <ng-template kendoGridDetailTemplate let-dataItem>
+ *           <div *ngIf="dataItem.Category">
+ *             <header>{{dataItem.Category?.CategoryName}}</header>
+ *             <span>{{dataItem.Category?.Description}}</span>
+ *           </div>
+ *         </ng-template>
+ *       </kendo-grid>
+ *   `
+ * })
+ *
+ * class AppComponent {
+ *     public data = [{
+ *         "ProductID": 1,
+ *         "ProductName": "Chai",
+ *         "UnitPrice": 18.0000,
+ *         "Discontinued": false,
+ *         "Category": {
+ *             "CategoryID": 1,
+ *             "CategoryName": "Beverages",
+ *             "Description": "Soft drinks, coffees, teas, beers, and ales"
+ *         }
+ *       }, {
+ *         "ProductID": 2,
+ *         "ProductName": "Chang",
+ *         "UnitPrice": 19.0000,
+ *         "Discontinued": false,
+ *         "Category": {
+ *             "CategoryID": 1,
+ *             "CategoryName": "Beverages",
+ *             "Description": "Soft drinks, coffees, teas, beers, and ales"
+ *         }
+ *       }, {
+ *         "ProductID": 3,
+ *         "ProductName": "Aniseed Syrup",
+ *         "UnitPrice": 10.0000,
+ *         "Discontinued": false,
+ *         "Category": {
+ *             "CategoryID": 2,
+ *             "CategoryName": "Condiments",
+ *             "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+ *         }
+ *     }];
+ *
+ * }
+ *
+ * ```
+ *
+ */
+export class DetailTemplateDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+        this._condition = () => true;
+    }
+    /**
+     * Defines the function that indicates if a given detail row and the associated **Expand** or **Collapse** button will be displayed.
+     */
+    set showIf(fn) {
+        if (typeof fn !== 'function') {
+            throw new Error(`showIf must be a function, but received ${JSON.stringify(fn)}.`);
+        }
+        this._condition = fn;
+    }
+    get showIf() {
+        return this._condition;
+    }
+}
+DetailTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DetailTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+DetailTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: DetailTemplateDirective, selector: "[kendoGridDetailTemplate]", inputs: { showIf: ["kendoGridDetailTemplateShowIf", "showIf"] }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DetailTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoGridDetailTemplate]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef, decorators: [{
+                    type: Optional
+                }] }]; }, propDecorators: { showIf: [{
+                type: Input,
+                args: ["kendoGridDetailTemplateShowIf"]
+            }] } });

package/esm2015/rendering/details/details.service.js

@@ -0,0 +1,57 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Injectable } from '@angular/core';
+import { Subject } from 'rxjs';
+import { DetailCollapseEvent } from './detail-collapse-event';
+import { DetailExpandEvent } from './detail-expand-event';
+import * as i0 from "@angular/core";
+/**
+ * @hidden
+ */
+export class DetailsService {
+    constructor() {
+        this.changes = new Subject();
+        this.rowState = new Set();
+    }
+    ngOnDestroy() {
+        this.rowState.clear();
+    }
+    isExpanded(index, dataItem) {
+        if (this.userCallback) {
+            return this.userCallback({ index, dataItem });
+        }
+        return this.rowState.has(index);
+    }
+    toggleRow(index, dataItem) {
+        if (this.isExpanded(index, dataItem)) {
+            this.collapseRow(index, dataItem);
+        }
+        else {
+            this.expandRow(index, dataItem);
+        }
+    }
+    expandRow(index, dataItem) {
+        const prevented = this.emitEvent({ dataItem, index, expand: true });
+        if (!prevented && !this.userCallback) {
+            this.rowState.add(index);
+        }
+    }
+    collapseRow(index, dataItem) {
+        const prevented = this.emitEvent({ dataItem, index, expand: false });
+        if (!prevented && !this.userCallback) {
+            this.rowState.delete(index);
+        }
+    }
+    emitEvent(args) {
+        const eventArg = new (args.expand ? DetailExpandEvent : DetailCollapseEvent)(args);
+        this.changes.next(eventArg);
+        return eventArg.isDefaultPrevented();
+    }
+}
+DetailsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DetailsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+DetailsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DetailsService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DetailsService, decorators: [{
+            type: Injectable
+        }] });

package/esm2015/rendering/details-expand.directive.js

@@ -0,0 +1,118 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Directive, EventEmitter, Input, Output } from '@angular/core';
+import { Subscription, merge } from 'rxjs';
+import { map } from 'rxjs/operators';
+import { getter } from '@progress/kendo-common';
+import { isPresent, isString } from '../utils';
+import * as i0 from "@angular/core";
+import * as i1 from "../grid.component";
+/**
+ * A directive which controls the expanded state of the master detail rows.
+ */
+export class ExpandDetailsDirective {
+    constructor(grid) {
+        this.grid = grid;
+        /**
+         * Fires when the expandedDetailKeys are changed.
+         */
+        this.expandedDetailKeysChange = new EventEmitter();
+        /**
+         * Defines the collection that will store the expanded keys.
+         */
+        this.expandedDetailKeys = [];
+        /**
+         * Specifies if the items should be initially expanded.
+         * When set to `true` items added to the `expandedDetailKeys` collection will be collapsed, and items that are not present in it will be expanded.
+         *
+         * @default false
+         */
+        this.initiallyExpanded = false;
+        this.expandedState = new Set();
+        this.subscriptions = new Subscription();
+        this.grid.isDetailExpanded = this.isExpanded.bind(this);
+        this.subscriptions.add(merge(this.grid.detailExpand.pipe(map(e => (Object.assign({ expand: true }, e)))), this.grid.detailCollapse.pipe(map(e => (Object.assign({ expand: false }, e))))).subscribe(this.toggleState.bind(this)));
+    }
+    /**
+     * Defines the item key that will be stored in the `expandedDetailKeys` collection ([see example]({% slug master_detail_expanded_state_grid %}#toc-built-in-directive)).
+     */
+    get expandDetailsKey() {
+        return this._expandBy;
+    }
+    set expandDetailsKey(key) {
+        if (isString(key)) {
+            this._expandBy = getter(key);
+        }
+        else {
+            this._expandBy = key;
+        }
+    }
+    /**
+     *
+     * @hidden
+     * A deprecated alias for setting the `expandDetailsKey` property.
+     */
+    get expandDetailBy() {
+        return this.expandDetailsKey;
+    }
+    set expandDetailBy(key) {
+        this.expandDetailsKey = key;
+    }
+    ngOnChanges(changes) {
+        // skip reinitialization if the user data is the same as the last state change
+        if (isPresent(changes.expandedDetailKeys) && this.lastExpandedState !== this.expandedDetailKeys) {
+            this.expandedState = new Set(this.expandedDetailKeys);
+        }
+    }
+    ngOnDestroy() {
+        this.subscriptions.unsubscribe();
+    }
+    get keyGetter() {
+        return this._expandBy || getter(undefined);
+    }
+    /**
+     * @hidden
+     */
+    isExpanded(args) {
+        const key = this.keyGetter(args.dataItem);
+        const hasKey = this.expandedState.has(key);
+        // when [initiallyExpanded]="true" a present key means the corresponding detail row is collapsed
+        return this.initiallyExpanded ? !hasKey : hasKey;
+    }
+    toggleState(args) {
+        const key = this.keyGetter(args.dataItem);
+        if (Boolean(this.initiallyExpanded) !== args.expand) {
+            this.expandedState.add(key);
+        }
+        else {
+            this.expandedState.delete(key);
+        }
+        this.notifyChange();
+    }
+    notifyChange() {
+        this.lastExpandedState = Array.from(this.expandedState);
+        this.expandedDetailKeysChange.emit(this.lastExpandedState);
+    }
+}
+ExpandDetailsDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ExpandDetailsDirective, deps: [{ token: i1.GridComponent }], target: i0.ɵɵFactoryTarget.Directive });
+ExpandDetailsDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: ExpandDetailsDirective, selector: "[kendoGridExpandDetailsBy]", inputs: { expandDetailsKey: ["kendoGridExpandDetailsBy", "expandDetailsKey"], expandDetailBy: "expandDetailBy", expandedDetailKeys: "expandedDetailKeys", initiallyExpanded: "initiallyExpanded" }, outputs: { expandedDetailKeysChange: "expandedDetailKeysChange" }, exportAs: ["kendoGridExpandDetailsBy"], usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ExpandDetailsDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoGridExpandDetailsBy]',
+                    exportAs: 'kendoGridExpandDetailsBy'
+                }]
+        }], ctorParameters: function () { return [{ type: i1.GridComponent }]; }, propDecorators: { expandedDetailKeysChange: [{
+                type: Output
+            }], expandDetailsKey: [{
+                type: Input,
+                args: ['kendoGridExpandDetailsBy']
+            }], expandDetailBy: [{
+                type: Input
+            }], expandedDetailKeys: [{
+                type: Input
+            }], initiallyExpanded: [{
+                type: Input
+            }] } });