@progress/kendo-angular-grid 7.0.0-dev.202201251337 → 7.0.0-next.202204010834

package/esm2015/column-menu/column-menu.component.js

@@ -0,0 +1,308 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { MenuTabbingService } from './../filtering/menu/menu-tabbing.service';
+import { Component, Input, TemplateRef, HostBinding, ViewChild } from '@angular/core';
+import { ColumnMenuService } from './column-menu.service';
+import { filtersByField } from '../filtering/base-filter-cell.component';
+import { hasFilter, hasSort, hasLock, hasStick, hasColumnChooser, hasPosition } from './utils';
+import { replaceMessagePlaceholder } from '../utils';
+import * as i0 from "@angular/core";
+import * as i1 from "../common/single-popup.service";
+import * as i2 from "@progress/kendo-angular-l10n";
+import * as i3 from "./column-menu.service";
+import * as i4 from "./../navigation/navigation.service";
+import * as i5 from "./column-menu-container.component";
+import * as i6 from "./column-menu-sort.component";
+import * as i7 from "./column-menu-lock.component";
+import * as i8 from "./column-menu-stick.component";
+import * as i9 from "./column-menu-position.component";
+import * as i10 from "./column-menu-chooser.component";
+import * as i11 from "./column-menu-filter.component";
+import * as i12 from "@angular/common";
+import * as i13 from "./column-menu-item.directive";
+const POPUP_CLASS = 'k-grid-columnmenu-popup';
+/**
+ * Represents the [column menu]({% slug columnmenu_grid %}) component.
+ */
+export class ColumnMenuComponent {
+    constructor(popupService, localization, service, navigationService) {
+        this.popupService = popupService;
+        this.localization = localization;
+        this.service = service;
+        this.navigationService = navigationService;
+        /**
+         * @hidden
+         */
+        this.standalone = true;
+        /**
+         * The settings for the Column Menu.
+         */
+        this.settings = {};
+        /**
+         * @hidden
+         */
+        this.sortable = true;
+        /**
+         * @hidden
+         */
+        this.tabIndex = '-1';
+        /**
+         * @hidden
+         */
+        this.expandedFilter = false;
+        /**
+         * @hidden
+         */
+        this.expandedColumns = false;
+        /**
+         * @hidden
+         */
+        this.expandedPosition = false;
+        this.closeSubscription = service.closeMenu.subscribe(this.close.bind(this));
+    }
+    /**
+     * @hidden
+     */
+    get isActive() {
+        return (this.hasFilter && filtersByField(this.filter, this.column.field).length > 0) ||
+            (!this.sortable && this.hasSort && this.sort.find(descriptor => descriptor.field === this.column.field));
+    }
+    /**
+     * @hidden
+     */
+    get hasFilter() {
+        return hasFilter(this.settings, this.column);
+    }
+    /**
+     * @hidden
+     */
+    get hasSort() {
+        return hasSort(this.settings, this.column);
+    }
+    /**
+     * @hidden
+     */
+    get hasColumnChooser() {
+        return hasColumnChooser(this.settings);
+    }
+    /**
+     * @hidden
+     */
+    get hasLock() {
+        return hasLock(this.settings, this.column);
+    }
+    /**
+     * @hidden
+     */
+    get hasStick() {
+        return hasStick(this.settings, this.column);
+    }
+    /**
+     * @hidden
+     */
+    get hasPosition() {
+        return hasPosition(this.settings, this.column);
+    }
+    ngOnChanges() {
+        this.service.column = this.column;
+        this.service.sort = this.sort;
+        this.service.filter = this.filter;
+        this.service.sortable = this.sortable;
+    }
+    ngOnDestroy() {
+        this.close();
+        this.closeSubscription.unsubscribe();
+    }
+    /**
+     * @hidden
+     */
+    toggle(e, anchor, template) {
+        if (e) {
+            e.preventDefault();
+            e.stopImmediatePropagation();
+        }
+        this.expandedFilter = this.getExpandedState(this.settings.filter);
+        this.expandedColumns = this.getExpandedState(this.settings.columnChooser);
+        this.expandedPosition = this.getExpandedState(this.settings.setColumnPosition);
+        this.popupRef = this.popupService.open(anchor, template, this.popupRef, POPUP_CLASS);
+        if (!this.popupRef) {
+            if (this.navigationService.enabled) {
+                this.navigationService.focusCell(0, this.column.leafIndex);
+            }
+            else {
+                this.anchor.nativeElement.focus();
+            }
+        }
+    }
+    /**
+     * @hidden
+     */
+    close() {
+        this.popupService.destroy();
+        this.popupRef = null;
+        if (this.navigationService.enabled) {
+            this.navigationService.focusCell(0, this.column.leafIndex);
+        }
+        else {
+            this.anchor.nativeElement.focus();
+        }
+    }
+    /**
+     * @hidden
+     */
+    get columnMenuTitle() {
+        const localizationMsg = this.localization.get('columnMenu') || '';
+        const columnName = this.column.title || this.column.field;
+        return replaceMessagePlaceholder(localizationMsg, 'columnName', columnName);
+    }
+    getExpandedState(menuItemSettings) {
+        return typeof (menuItemSettings) === 'object' ? menuItemSettings.expanded : false;
+    }
+}
+ColumnMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColumnMenuComponent, deps: [{ token: i1.SinglePopupService }, { token: i2.LocalizationService }, { token: i3.ColumnMenuService }, { token: i4.NavigationService }], target: i0.ɵɵFactoryTarget.Component });
+ColumnMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ColumnMenuComponent, selector: "kendo-grid-column-menu", inputs: { standalone: "standalone", column: "column", settings: "settings", sort: "sort", filter: "filter", sortable: "sortable", columnMenuTemplate: "columnMenuTemplate", tabIndex: "tabIndex" }, host: { properties: { "class.k-grid-column-menu-standalone": "this.standalone" } }, providers: [
+        ColumnMenuService,
+        MenuTabbingService
+    ], viewQueries: [{ propertyName: "anchor", first: true, predicate: ["anchor"], descendants: true, static: true }, { propertyName: "template", first: true, predicate: ["template"], descendants: true, read: TemplateRef, static: true }], usesOnChanges: true, ngImport: i0, template: `
+        <a #anchor
+            class="k-grid-column-menu k-grid-filter"
+            [ngClass]="{ 'k-state-active': isActive }"
+            (click)="toggle($event, anchor, template)"
+            (keydown.enter)="$event.stopImmediatePropagation()"
+            href="#"
+            [tabindex]="tabIndex"
+            [attr.title]="columnMenuTitle">
+            <span class="k-icon k-i-more-vertical"></span>
+        </a>
+        <ng-template #template>
+            <ng-container
+                [ngTemplateOutlet]="column.columnMenuTemplateRef || columnMenuTemplate || defaultTemplate"
+                [ngTemplateOutletContext]="{ service: service, column: column }">
+            </ng-container>
+        </ng-template>
+        <ng-template #defaultTemplate>
+            <kendo-grid-columnmenu-container
+                (keydown.escape)="close()"
+                (keydown.enter)="$event.stopImmediatePropagation()">
+                <kendo-grid-columnmenu-sort #sortItem [kendoGridColumnMenuItem]="sortItem" *ngIf="hasSort" [service]="service">
+                </kendo-grid-columnmenu-sort>
+                <kendo-grid-columnmenu-lock #lockItem *ngIf="hasLock && !hasPosition" [kendoGridColumnMenuItem]="lockItem" [service]="service">
+                </kendo-grid-columnmenu-lock>
+                <kendo-grid-columnmenu-stick #stickItem *ngIf="hasStick && !hasPosition" [kendoGridColumnMenuItem]="stickItem" [service]="service">
+                </kendo-grid-columnmenu-stick>
+                <kendo-grid-columnmenu-position
+                    #positionItem
+                    *ngIf="hasPosition"
+                    [showLock]="hasLock"
+                    [showStick]="hasStick"
+                    [kendoGridColumnMenuItem]="positionItem"
+                    [service]="service"
+                    [expanded]="expandedPosition">
+                </kendo-grid-columnmenu-position>
+                <kendo-grid-columnmenu-chooser
+                    #chooserItem
+                    *ngIf="hasColumnChooser"
+                    [kendoGridColumnMenuItem]="chooserItem"
+                    [service]="service"
+                    [expanded]="expandedColumns">
+                </kendo-grid-columnmenu-chooser>
+                <kendo-grid-columnmenu-filter
+                    #filterItem
+                    *ngIf="hasFilter"
+                    [kendoGridColumnMenuItem]="filterItem"
+                    [service]="service"
+                    [expanded]="expandedFilter">
+                </kendo-grid-columnmenu-filter>
+            </kendo-grid-columnmenu-container>
+        </ng-template>
+    `, isInline: true, components: [{ type: i5.ColumnMenuContainerComponent, selector: "kendo-grid-columnmenu-container" }, { type: i6.ColumnMenuSortComponent, selector: "kendo-grid-columnmenu-sort" }, { type: i7.ColumnMenuLockComponent, selector: "kendo-grid-columnmenu-lock" }, { type: i8.ColumnMenuStickComponent, selector: "kendo-grid-columnmenu-stick" }, { type: i9.ColumnMenuPositionComponent, selector: "kendo-grid-columnmenu-position", inputs: ["expanded", "showLock", "showStick", "isLast"], outputs: ["expand", "collapse"] }, { type: i10.ColumnMenuChooserComponent, selector: "kendo-grid-columnmenu-chooser", inputs: ["expanded", "isLast"], outputs: ["expand", "collapse"] }, { type: i11.ColumnMenuFilterComponent, selector: "kendo-grid-columnmenu-filter", inputs: ["expanded", "isLast"], outputs: ["expand", "collapse"] }], directives: [{ type: i12.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i12.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i12.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i13.ColumnMenuItemDirective, selector: "[kendoGridColumnMenuItem]", inputs: ["kendoGridColumnMenuItem"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColumnMenuComponent, decorators: [{
+            type: Component,
+            args: [{
+                    providers: [
+                        ColumnMenuService,
+                        MenuTabbingService
+                    ],
+                    selector: 'kendo-grid-column-menu',
+                    template: `
+        <a #anchor
+            class="k-grid-column-menu k-grid-filter"
+            [ngClass]="{ 'k-state-active': isActive }"
+            (click)="toggle($event, anchor, template)"
+            (keydown.enter)="$event.stopImmediatePropagation()"
+            href="#"
+            [tabindex]="tabIndex"
+            [attr.title]="columnMenuTitle">
+            <span class="k-icon k-i-more-vertical"></span>
+        </a>
+        <ng-template #template>
+            <ng-container
+                [ngTemplateOutlet]="column.columnMenuTemplateRef || columnMenuTemplate || defaultTemplate"
+                [ngTemplateOutletContext]="{ service: service, column: column }">
+            </ng-container>
+        </ng-template>
+        <ng-template #defaultTemplate>
+            <kendo-grid-columnmenu-container
+                (keydown.escape)="close()"
+                (keydown.enter)="$event.stopImmediatePropagation()">
+                <kendo-grid-columnmenu-sort #sortItem [kendoGridColumnMenuItem]="sortItem" *ngIf="hasSort" [service]="service">
+                </kendo-grid-columnmenu-sort>
+                <kendo-grid-columnmenu-lock #lockItem *ngIf="hasLock && !hasPosition" [kendoGridColumnMenuItem]="lockItem" [service]="service">
+                </kendo-grid-columnmenu-lock>
+                <kendo-grid-columnmenu-stick #stickItem *ngIf="hasStick && !hasPosition" [kendoGridColumnMenuItem]="stickItem" [service]="service">
+                </kendo-grid-columnmenu-stick>
+                <kendo-grid-columnmenu-position
+                    #positionItem
+                    *ngIf="hasPosition"
+                    [showLock]="hasLock"
+                    [showStick]="hasStick"
+                    [kendoGridColumnMenuItem]="positionItem"
+                    [service]="service"
+                    [expanded]="expandedPosition">
+                </kendo-grid-columnmenu-position>
+                <kendo-grid-columnmenu-chooser
+                    #chooserItem
+                    *ngIf="hasColumnChooser"
+                    [kendoGridColumnMenuItem]="chooserItem"
+                    [service]="service"
+                    [expanded]="expandedColumns">
+                </kendo-grid-columnmenu-chooser>
+                <kendo-grid-columnmenu-filter
+                    #filterItem
+                    *ngIf="hasFilter"
+                    [kendoGridColumnMenuItem]="filterItem"
+                    [service]="service"
+                    [expanded]="expandedFilter">
+                </kendo-grid-columnmenu-filter>
+            </kendo-grid-columnmenu-container>
+        </ng-template>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i1.SinglePopupService }, { type: i2.LocalizationService }, { type: i3.ColumnMenuService }, { type: i4.NavigationService }]; }, propDecorators: { standalone: [{
+                type: HostBinding,
+                args: ['class.k-grid-column-menu-standalone']
+            }, {
+                type: Input
+            }], column: [{
+                type: Input
+            }], settings: [{
+                type: Input
+            }], sort: [{
+                type: Input
+            }], filter: [{
+                type: Input
+            }], sortable: [{
+                type: Input
+            }], columnMenuTemplate: [{
+                type: Input
+            }], tabIndex: [{
+                type: Input
+            }], anchor: [{
+                type: ViewChild,
+                args: ['anchor', { static: true }]
+            }], template: [{
+                type: ViewChild,
+                args: ['template', { static: true, read: TemplateRef }]
+            }] } });

package/esm2015/column-menu/column-menu.module.js

@@ -0,0 +1,97 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ColumnListComponent } from './column-list.component';
+import { ColumnChooserComponent } from './column-chooser.component';
+import { ColumnMenuChooserComponent } from './column-menu-chooser.component';
+import { ColumnMenuFilterComponent } from './column-menu-filter.component';
+import { ColumnMenuItemComponent } from './column-menu-item.component';
+import { ColumnMenuItemContentTemplateDirective } from './column-menu-item-content-template.directive';
+import { ColumnMenuSortComponent } from './column-menu-sort.component';
+import { ColumnMenuComponent } from './column-menu.component';
+import { ColumnMenuLockComponent } from './column-menu-lock.component';
+import { FilterMenuModule } from '../filtering/menu/filter-menu.module';
+import { ColumnMenuTemplateDirective } from './column-menu-template.directive';
+import { ColumnMenuContainerComponent } from './column-menu-container.component';
+import { ColumnMenuItemDirective } from './column-menu-item.directive';
+import { ColumnMenuStickComponent } from './column-menu-stick.component';
+import { ColumnMenuPositionComponent } from './column-menu-position.component';
+import * as i0 from "@angular/core";
+const COMPONENTS = [
+    ColumnListComponent,
+    ColumnChooserComponent,
+    ColumnMenuChooserComponent,
+    ColumnMenuFilterComponent,
+    ColumnMenuItemComponent,
+    ColumnMenuItemContentTemplateDirective,
+    ColumnMenuSortComponent,
+    ColumnMenuComponent,
+    ColumnMenuLockComponent,
+    ColumnMenuTemplateDirective,
+    ColumnMenuContainerComponent,
+    ColumnMenuItemDirective,
+    ColumnMenuStickComponent,
+    ColumnMenuPositionComponent
+];
+/**
+ * @hidden
+ */
+export class ColumnMenuModule {
+    static exports() {
+        return [
+            ColumnChooserComponent,
+            ColumnMenuFilterComponent,
+            ColumnMenuItemComponent,
+            ColumnMenuItemContentTemplateDirective,
+            ColumnMenuSortComponent,
+            ColumnMenuLockComponent,
+            ColumnMenuStickComponent,
+            ColumnMenuPositionComponent,
+            ColumnMenuChooserComponent,
+            ColumnMenuTemplateDirective,
+            ColumnMenuContainerComponent,
+            ColumnMenuItemDirective,
+            ColumnMenuComponent
+        ];
+    }
+}
+ColumnMenuModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColumnMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ColumnMenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColumnMenuModule, declarations: [ColumnListComponent,
+        ColumnChooserComponent,
+        ColumnMenuChooserComponent,
+        ColumnMenuFilterComponent,
+        ColumnMenuItemComponent,
+        ColumnMenuItemContentTemplateDirective,
+        ColumnMenuSortComponent,
+        ColumnMenuComponent,
+        ColumnMenuLockComponent,
+        ColumnMenuTemplateDirective,
+        ColumnMenuContainerComponent,
+        ColumnMenuItemDirective,
+        ColumnMenuStickComponent,
+        ColumnMenuPositionComponent], imports: [CommonModule, FilterMenuModule], exports: [ColumnListComponent,
+        ColumnChooserComponent,
+        ColumnMenuChooserComponent,
+        ColumnMenuFilterComponent,
+        ColumnMenuItemComponent,
+        ColumnMenuItemContentTemplateDirective,
+        ColumnMenuSortComponent,
+        ColumnMenuComponent,
+        ColumnMenuLockComponent,
+        ColumnMenuTemplateDirective,
+        ColumnMenuContainerComponent,
+        ColumnMenuItemDirective,
+        ColumnMenuStickComponent,
+        ColumnMenuPositionComponent] });
+ColumnMenuModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColumnMenuModule, imports: [[CommonModule, FilterMenuModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColumnMenuModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [COMPONENTS],
+                    imports: [CommonModule, FilterMenuModule],
+                    exports: [COMPONENTS]
+                }]
+        }] });

package/esm2015/column-menu/column-menu.service.js

@@ -0,0 +1,59 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Injectable, EventEmitter } from '@angular/core';
+import * as i0 from "@angular/core";
+import * as i1 from "./../filtering/menu/menu-tabbing.service";
+/**
+ * Represents the service that is passed to the
+ * [ColumnMenuTemplate]({% slug api_grid_columnmenutemplatedirective %}) directive.
+ *
+ * @example
+ * ```ts-preview
+ *
+ * _@Component({
+ *     selector: 'my-app',
+ *     template: `
+ *       <kendo-grid [data]="data" [columnMenu]="true">
+ *          <ng-template kendoGridColumnMenuTemplate let-service="service">
+ *              <span class="k-icon k-i-close" (click)="service.close()"
+ *                  style="position: absolute; right: 5px; top: 5px;cursor: pointer;"></span>
+ *              <kendo-grid-columnmenu-sort [service]="service">
+ *              </kendo-grid-columnmenu-sort>
+ *          </ng-template>
+ *          <kendo-grid-column field="Field1"></kendo-grid-column>
+ *          <kendo-grid-column field="Field2"></kendo-grid-column>
+ *       </kendo-grid>
+ *     `
+ * })
+ *
+ * class AppComponent {
+ *   public data: any[] = [{ Field1: 'Foo', Field2: 'Bar' }];
+ * }
+ *
+ * ```
+ */
+export class ColumnMenuService {
+    /**
+     * @hidden
+     */
+    constructor(menuTabbingService) {
+        /**
+         * @hidden
+         */
+        this.closeMenu = new EventEmitter();
+        this.menuTabbingService = menuTabbingService;
+    }
+    /**
+     * Closes the column menu.
+     */
+    close() {
+        this.closeMenu.emit();
+    }
+}
+ColumnMenuService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColumnMenuService, deps: [{ token: i1.MenuTabbingService }], target: i0.ɵɵFactoryTarget.Injectable });
+ColumnMenuService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColumnMenuService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColumnMenuService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i1.MenuTabbingService }]; } });