@progress/kendo-angular-pivotgrid 0.2.0-dev.202209020712 → 0.2.0-dev.202209020832

package/esm2015/configurator/chip-menu/chip-menu.module.js

@@ -0,0 +1,83 @@
+/**-----------------------------------------------------------------------------------------
+* 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 { ChipMenuItemComponent } from './chip-menu-item.component';
+import { ChipMenuSortComponent } from './chip-menu-sort.component';
+import { ChipMenuComponent } from './chip-menu.component';
+import { ChipMenuContainerComponent } from './chip-menu-container.component';
+import { ChipMenuItemDirective } from './chip-menu-item.directive';
+import { ChipMenuFilterComponent } from './chip-menu-filter.component';
+import { ChipMenuItemContentTemplateDirective } from './chip-menu-item-content-template.directive';
+import { FilterMenuContainerComponent } from './filtering/filter-menu-container.component';
+import { StringFilterMenuComponent } from './filtering/string-filter-menu.component';
+import { FilterMenuDropDownListDirective } from './filtering/filter-menu-dropdownlist.directive';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { SharedModule } from '../../shared.module';
+import * as i0 from "@angular/core";
+const COMPONENTS = [
+    ChipMenuItemComponent,
+    ChipMenuSortComponent,
+    ChipMenuComponent,
+    ChipMenuFilterComponent,
+    ChipMenuItemContentTemplateDirective,
+    FilterMenuContainerComponent,
+    StringFilterMenuComponent,
+    FilterMenuDropDownListDirective,
+    ChipMenuContainerComponent,
+    ChipMenuItemDirective
+];
+/**
+ * @hidden
+ */
+export class ChipMenuModule {
+    static exports() {
+        return [
+            ChipMenuItemComponent,
+            ChipMenuSortComponent,
+            ChipMenuContainerComponent,
+            ChipMenuItemDirective,
+            ChipMenuComponent
+        ];
+    }
+}
+ChipMenuModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ChipMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ChipMenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ChipMenuModule, declarations: [ChipMenuItemComponent,
+        ChipMenuSortComponent,
+        ChipMenuComponent,
+        ChipMenuFilterComponent,
+        ChipMenuItemContentTemplateDirective,
+        FilterMenuContainerComponent,
+        StringFilterMenuComponent,
+        FilterMenuDropDownListDirective,
+        ChipMenuContainerComponent,
+        ChipMenuItemDirective], imports: [SharedModule,
+        ReactiveFormsModule,
+        FormsModule], exports: [ChipMenuItemComponent,
+        ChipMenuSortComponent,
+        ChipMenuComponent,
+        ChipMenuFilterComponent,
+        ChipMenuItemContentTemplateDirective,
+        FilterMenuContainerComponent,
+        StringFilterMenuComponent,
+        FilterMenuDropDownListDirective,
+        ChipMenuContainerComponent,
+        ChipMenuItemDirective] });
+ChipMenuModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ChipMenuModule, imports: [[
+            SharedModule,
+            ReactiveFormsModule,
+            FormsModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ChipMenuModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [COMPONENTS],
+                    imports: [
+                        SharedModule,
+                        ReactiveFormsModule,
+                        FormsModule
+                    ],
+                    exports: [COMPONENTS]
+                }]
+        }] });

package/esm2015/configurator/chip-menu/chip-menu.service.js

@@ -0,0 +1,28 @@
+/**-----------------------------------------------------------------------------------------
+* 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-tabbing.service";
+/**
+ * @hidden
+ * Represents the service that is passed to the ChipMenuFilterComponent and ChipMenuSortComponent.
+ */
+export class ChipMenuService {
+    constructor(menuTabbingService) {
+        this.closeMenu = new EventEmitter();
+        this.menuTabbingService = menuTabbingService;
+    }
+    /**
+     * Closes the chip menu.
+     */
+    close() {
+        this.closeMenu.emit();
+    }
+}
+ChipMenuService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ChipMenuService, deps: [{ token: i1.MenuTabbingService }], target: i0.ɵɵFactoryTarget.Injectable });
+ChipMenuService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ChipMenuService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ChipMenuService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i1.MenuTabbingService }]; } });

package/esm2015/configurator/chip-menu/filtering/filter-menu-container.component.js

@@ -0,0 +1,173 @@
+/**-----------------------------------------------------------------------------------------
+* 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 './menu-tabbing.service';
+import { Component, Input, Output, EventEmitter, ViewChild } from '@angular/core';
+import { isNullOrEmptyString } from "../../../util";
+import { PIVOT_CONFIGURATOR_ACTION } from '@progress/kendo-pivotgrid-common';
+import * as i0 from "@angular/core";
+import * as i1 from "../../../localization/pivot-localization.service";
+import * as i2 from "./menu-tabbing.service";
+import * as i3 from "../../configurator.service";
+import * as i4 from "./string-filter-menu.component";
+import * as i5 from "@angular/forms";
+import * as i6 from "@angular/common";
+import * as i7 from "@progress/kendo-angular-buttons";
+const isNoValueOperator = operator => (operator === "isnull"
+    || operator === "isnotnull"
+    || operator === "isempty"
+    || operator === "isnotempty");
+const validFilter = ({ value, operator }) => !isNullOrEmptyString(value) || isNoValueOperator(operator);
+/**
+ * @hidden
+ */
+export class FilterMenuContainerComponent {
+    constructor(localization, cd, menuTabbingService, configuratorService) {
+        this.localization = localization;
+        this.cd = cd;
+        this.configuratorService = configuratorService;
+        this.close = new EventEmitter();
+        this.actionsClass = 'k-action-buttons k-button-group';
+        this.menuTabbingService = menuTabbingService;
+    }
+    ngOnInit() {
+    }
+    ngAfterViewChecked() {
+        if (!this.menuTabbingService.isColumnMenu || (this.isLast && this.isExpanded)) {
+            this.menuTabbingService.lastFocusable = this.disabled ?
+                this.resetButton.nativeElement : this.filterButton.nativeElement;
+        }
+    }
+    ngOnDestroy() {
+        this.menuTabbingService.lastFocusable = null;
+    }
+    get disabled() {
+        return !(this.filterDescriptorValue && validFilter(this.filterDescriptorValue));
+    }
+    submit() {
+        const filterDescriptor = Object.assign({ field: this.chip.name.toString() }, this.filterDescriptorValue);
+        const payload = !this.configuratorService.state.filter ?
+            [filterDescriptor] :
+            [
+                ...this.configuratorService.state.filter.filter(descriptor => descriptor.field !== filterDescriptor.field),
+                filterDescriptor
+            ];
+        this.configuratorService.parseConfiguratorState({ type: PIVOT_CONFIGURATOR_ACTION.setFilter, payload: payload });
+        this.close.emit();
+        return false;
+    }
+    reset() {
+        const filters = this.configuratorService.state.filter.filter(descriptor => descriptor.field !== this.chip.name.toString());
+        this.configuratorService.parseConfiguratorState({ type: PIVOT_CONFIGURATOR_ACTION.setFilter, payload: filters });
+        this.close.emit();
+    }
+    onTab(e, buttonType) {
+        if (this.menuTabbingService.firstFocusable && (!this.menuTabbingService.isColumnMenu || this.isLast)) {
+            e.preventDefault();
+            if (buttonType === 'reset') {
+                // eslint-disable-next-line no-unused-expressions
+                this.disabled ? this.menuTabbingService.firstFocusable.focus() : this.filterButton.nativeElement.focus();
+            }
+            else {
+                this.menuTabbingService.firstFocusable.focus();
+            }
+        }
+    }
+    /**
+     * Returns the localized message for a given token
+     */
+    messageFor(localizationToken) {
+        return this.localization.get(localizationToken);
+    }
+}
+FilterMenuContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FilterMenuContainerComponent, deps: [{ token: i1.PivotLocalizationService }, { token: i0.ChangeDetectorRef }, { token: i2.MenuTabbingService }, { token: i3.ConfiguratorService }], target: i0.ɵɵFactoryTarget.Component });
+FilterMenuContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FilterMenuContainerComponent, selector: "kendo-pivot-filter-menu-container", inputs: { chip: "chip", isLast: "isLast", isExpanded: "isExpanded", menuTabbingService: "menuTabbingService", actionsClass: "actionsClass" }, outputs: { close: "close" }, providers: [
+        MenuTabbingService
+    ], viewQueries: [{ propertyName: "resetButton", first: true, predicate: ["resetButton"], descendants: true }, { propertyName: "filterButton", first: true, predicate: ["filterButton"], descendants: true }], ngImport: i0, template: `
+        <form (submit)="submit()" (reset)="reset()"
+            class="k-filter-menu k-group k-reset k-state-border-up">
+            <div class="k-filter-menu-container">
+                <kendo-pivot-string-filter-menu
+                    [(ngModel)]="filterDescriptorValue"
+                    name="'filterDescriptorValue'"
+                    [chip]="chip"
+                    [menuTabbingService]="menuTabbingService">
+                </kendo-pivot-string-filter-menu>
+                <div [ngClass]="actionsClass">
+                    <button
+                        #resetButton
+                        type="reset"
+                        kendoButton
+                        (keydown.tab)="onTab($event, 'reset')">{{messageFor('filterClearButton')}}</button>
+                    <button #filterButton
+                        type="submit"
+                        [disabled]="disabled"
+                        kendoButton
+                        themeColor="primary"
+                        (keydown.tab)="onTab($event, 'filter')">{{messageFor('filterFilterButton')}}</button>
+                </div>
+            </div>
+        </form>
+    `, isInline: true, styles: ["\n        kendo-pivot-string-filter-menu {\n            display: flex;\n            flex-flow: column nowrap;\n            align-items: stretch;\n            gap: 8px;\n        }\n    "], components: [{ type: i4.StringFilterMenuComponent, selector: "kendo-pivot-string-filter-menu", inputs: ["chip", "menuTabbingService"] }], directives: [{ type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i5.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FilterMenuContainerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    providers: [
+                        MenuTabbingService
+                    ],
+                    selector: 'kendo-pivot-filter-menu-container',
+                    template: `
+        <form (submit)="submit()" (reset)="reset()"
+            class="k-filter-menu k-group k-reset k-state-border-up">
+            <div class="k-filter-menu-container">
+                <kendo-pivot-string-filter-menu
+                    [(ngModel)]="filterDescriptorValue"
+                    name="'filterDescriptorValue'"
+                    [chip]="chip"
+                    [menuTabbingService]="menuTabbingService">
+                </kendo-pivot-string-filter-menu>
+                <div [ngClass]="actionsClass">
+                    <button
+                        #resetButton
+                        type="reset"
+                        kendoButton
+                        (keydown.tab)="onTab($event, 'reset')">{{messageFor('filterClearButton')}}</button>
+                    <button #filterButton
+                        type="submit"
+                        [disabled]="disabled"
+                        kendoButton
+                        themeColor="primary"
+                        (keydown.tab)="onTab($event, 'filter')">{{messageFor('filterFilterButton')}}</button>
+                </div>
+            </div>
+        </form>
+    `,
+                    styles: [`
+        kendo-pivot-string-filter-menu {
+            display: flex;
+            flex-flow: column nowrap;
+            align-items: stretch;
+            gap: 8px;
+        }
+    `]
+                }]
+        }], ctorParameters: function () { return [{ type: i1.PivotLocalizationService }, { type: i0.ChangeDetectorRef }, { type: i2.MenuTabbingService }, { type: i3.ConfiguratorService }]; }, propDecorators: { close: [{
+                type: Output
+            }], chip: [{
+                type: Input
+            }], isLast: [{
+                type: Input
+            }], isExpanded: [{
+                type: Input
+            }], menuTabbingService: [{
+                type: Input
+            }], actionsClass: [{
+                type: Input
+            }], resetButton: [{
+                type: ViewChild,
+                args: ['resetButton']
+            }], filterButton: [{
+                type: ViewChild,
+                args: ['filterButton']
+            }] } });

package/esm2015/configurator/chip-menu/filtering/filter-menu-dropdownlist.directive.js

@@ -0,0 +1,38 @@
+/**-----------------------------------------------------------------------------------------
+* 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 { Keys } from '@progress/kendo-angular-common';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-dropdowns";
+/**
+ * @hidden
+ */
+export class FilterMenuDropDownListDirective {
+    constructor(host) {
+        this.host = host;
+        this.keydownHandler = (e) => {
+            if (e.keyCode === Keys.Escape && this.host.isOpen) {
+                e.stopPropagation();
+                this.host.toggle(false);
+            }
+        };
+    }
+    ngAfterViewInit() {
+        const wrapperElement = this.host.wrapper.nativeElement;
+        wrapperElement.setAttribute('aria-label', this.filterMenuDropDownLabel);
+        wrapperElement.addEventListener('keydown', this.keydownHandler, true);
+    }
+    ngOnDestroy() {
+        this.host.wrapper.nativeElement.removeEventListener('keydown', this.keydownHandler);
+    }
+}
+FilterMenuDropDownListDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FilterMenuDropDownListDirective, deps: [{ token: i1.DropDownListComponent }], target: i0.ɵɵFactoryTarget.Directive });
+FilterMenuDropDownListDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: FilterMenuDropDownListDirective, selector: "[kendoFilterMenuDropDown]", inputs: { filterMenuDropDownLabel: "filterMenuDropDownLabel" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FilterMenuDropDownListDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[kendoFilterMenuDropDown]' }]
+        }], ctorParameters: function () { return [{ type: i1.DropDownListComponent }]; }, propDecorators: { filterMenuDropDownLabel: [{
+                type: Input
+            }] } });

package/esm2015/configurator/chip-menu/filtering/menu-tabbing.service.js

@@ -0,0 +1,20 @@
+/**-----------------------------------------------------------------------------------------
+* 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 * as i0 from "@angular/core";
+/**
+ * @hidden
+ */
+export class MenuTabbingService {
+    constructor() {
+        this.isColumnMenu = false;
+        this.isPopupOpen = false;
+    }
+}
+MenuTabbingService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MenuTabbingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+MenuTabbingService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MenuTabbingService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MenuTabbingService, decorators: [{
+            type: Injectable
+        }] });

package/esm2015/configurator/chip-menu/filtering/string-filter-menu.component.js

@@ -0,0 +1,133 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Component, Input, forwardRef } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { Subscription } from 'rxjs';
+import { replaceMessagePlaceholder } from '../../../util';
+import * as i0 from "@angular/core";
+import * as i1 from "../../../localization/pivot-localization.service";
+import * as i2 from "../../configurator.service";
+import * as i3 from "@angular/forms";
+import * as i4 from "@progress/kendo-angular-dropdowns";
+import * as i5 from "./filter-menu-dropdownlist.directive";
+import * as i6 from "@progress/kendo-angular-inputs";
+/**
+ * @hidden
+ */
+export const localizeOperators = operators => localization => Object.keys(operators).map(key => ({
+    text: localization.get(key),
+    value: operators[key]
+}));
+const stringOperators = localizeOperators({
+    "filterEqOperator": "eq",
+    "filterNotEqOperator": "neq",
+    "filterContainsOperator": "contains",
+    "filterNotContainsOperator": "doesnotcontain",
+    "filterStartsWithOperator": "startswith",
+    "filterEndsWithOperator": "endswith",
+    "filterIsNullOperator": "isnull",
+    "filterIsNotNullOperator": "isnotnull",
+    "filterIsEmptyOperator": "isempty",
+    "filterIsNotEmptyOperator": "isnotempty"
+});
+/**
+ * @hidden
+ *
+ * Represents a string-filter menu component.
+ */
+export class StringFilterMenuComponent {
+    constructor(localization, configuratorService, fb) {
+        this.localization = localization;
+        this.configuratorService = configuratorService;
+        this.fb = fb;
+        this.subscription = new Subscription();
+        this.onTouched = () => { };
+    }
+    get currentFilter() {
+        var _a;
+        const filterValue = (_a = this.configuratorService.state.filter) === null || _a === void 0 ? void 0 : _a.filter(x => x.field === this.chip.name.toString());
+        return filterValue && filterValue[0];
+    }
+    registerOnChange(fn) {
+        this.filterFormGroup.valueChanges.subscribe(fn);
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    writeValue(val) {
+        if (val) {
+            this.filterFormGroup.setValue(val, { emitEvent: false });
+        }
+    }
+    get filterMenuDropDownLabel() {
+        const localizationMsg = this.localization.get('filterOperatorsDropDownLabel') || '';
+        const chipName = this.chip.name.toString();
+        return replaceMessagePlaceholder(localizationMsg, 'fields', chipName);
+    }
+    ngOnInit() {
+        this.filterFormGroup = this.fb.group({
+            operator: [this.currentFilter ? this.currentFilter.operator : ''],
+            value: [this.currentFilter ? this.currentFilter.value : '']
+        });
+        this.operators = stringOperators(this.localization);
+    }
+    ngOnDestroy() {
+        this.subscription.unsubscribe();
+    }
+}
+StringFilterMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: StringFilterMenuComponent, deps: [{ token: i1.PivotLocalizationService }, { token: i2.ConfiguratorService }, { token: i3.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
+StringFilterMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: StringFilterMenuComponent, selector: "kendo-pivot-string-filter-menu", inputs: { chip: "chip", menuTabbingService: "menuTabbingService" }, providers: [{
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => StringFilterMenuComponent),
+            multi: true
+        }], ngImport: i0, template: `
+        <ng-container [formGroup]="filterFormGroup">
+            <kendo-dropdownlist
+                    kendoFilterMenuDropDown
+                    [filterMenuDropDownLabel]="filterMenuDropDownLabel"
+                    [data]="operators"
+                    formControlName="operator"
+                    [valuePrimitive]="true"
+                    textField="text"
+                    valueField="value">
+                </kendo-dropdownlist>
+                <input
+                    kendoTextBox
+                    formControlName="value"
+                />
+        </ng-container>
+    `, isInline: true, components: [{ type: i4.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["iconClass", "loading", "data", "value", "textField", "valueField", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }], directives: [{ type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5.FilterMenuDropDownListDirective, selector: "[kendoFilterMenuDropDown]", inputs: ["filterMenuDropDownLabel"] }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i6.TextBoxDirective, selector: "input[kendoTextBox]", inputs: ["value"] }, { type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: StringFilterMenuComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-pivot-string-filter-menu',
+                    providers: [{
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => StringFilterMenuComponent),
+                            multi: true
+                        }],
+                    template: `
+        <ng-container [formGroup]="filterFormGroup">
+            <kendo-dropdownlist
+                    kendoFilterMenuDropDown
+                    [filterMenuDropDownLabel]="filterMenuDropDownLabel"
+                    [data]="operators"
+                    formControlName="operator"
+                    [valuePrimitive]="true"
+                    textField="text"
+                    valueField="value">
+                </kendo-dropdownlist>
+                <input
+                    kendoTextBox
+                    formControlName="value"
+                />
+        </ng-container>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i1.PivotLocalizationService }, { type: i2.ConfiguratorService }, { type: i3.FormBuilder }]; }, propDecorators: { chip: [{
+                type: Input
+            }], menuTabbingService: [{
+                type: Input
+            }] } });

package/esm2015/configurator/chip-menu/single-popup.service.js

@@ -0,0 +1,121 @@
+/**-----------------------------------------------------------------------------------------
+* 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, Subscription } from 'rxjs';
+import { PreventableEvent } from '@progress/kendo-angular-common';
+import { isPresent } from '../../util';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-popup";
+import * as i2 from "../../localization/pivot-localization.service";
+const contains = (node, predicate) => {
+    while (node) {
+        if (predicate(node)) {
+            return true;
+        }
+        node = node.parentNode;
+    }
+    return false;
+};
+/**
+ * @hidden
+ * Arguments for the `close` event of the chip-menu popup.
+ */
+export class PopupCloseEvent extends PreventableEvent {
+    constructor(e) {
+        super();
+        this.originalEvent = e;
+    }
+}
+const DEFAULT_POPUP_CLASS = 'k-grid-filter-popup';
+/**
+ * @hidden
+ * The service that is used for the popups of the chip menus.
+ */
+export class SinglePopupService {
+    constructor(popupService, renderer, ngZone, localization) {
+        this.popupService = popupService;
+        this.renderer = renderer;
+        this.ngZone = ngZone;
+        this.localization = localization;
+        /**
+         * Fires when the chip menus are about to close because the user clicked outside their popups.
+         * Used to prevent the popup from closing.
+         */
+        this.onClose = new Subject();
+        this.pointerEventsSub = new Subscription();
+        this.scrollSubscription = new Subscription();
+    }
+    open(anchor, template, popupRef, popupClass = DEFAULT_POPUP_CLASS) {
+        var _a;
+        const toggle = isPresent(popupRef) && this.popupRef === popupRef;
+        this.destroy();
+        if (!toggle) {
+            const direction = this.localization.rtl ? 'right' : 'left';
+            this.popupRef = this.popupService.open({
+                anchorAlign: { vertical: 'bottom', horizontal: direction },
+                popupAlign: { vertical: 'top', horizontal: direction },
+                anchor: anchor,
+                popupClass: popupClass,
+                content: template,
+                positionMode: "absolute"
+            });
+            this.renderer.setAttribute(this.popupRef.popupElement, 'dir', this.localization.rtl ? 'rtl' : 'ltr');
+            this.attachClose(anchor);
+        }
+        const popupEl = (_a = this.popupRef) === null || _a === void 0 ? void 0 : _a.popupElement;
+        if (popupEl) {
+            this.attachMouseListeners(popupEl);
+        }
+        return this.popupRef;
+    }
+    destroy() {
+        if (this.popupRef) {
+            this.detachClose();
+            this.pointerEventsSub.unsubscribe();
+            this.pointerEventsSub = null;
+            this.popupRef.close();
+            this.popupRef = null;
+        }
+    }
+    ngOnDestroy() {
+        this.destroy();
+        this.scrollSubscription.unsubscribe();
+    }
+    detachClose() {
+        if (this.removeClick) {
+            this.removeClick();
+        }
+    }
+    attachClose(skipElement) {
+        this.detachClose();
+        this.ngZone.runOutsideAngular(() => this.removeClick = this.renderer.listen('document', 'click', (e) => {
+            if (!contains(e.target, x => this.popupRef.popupElement === x || x === skipElement)) {
+                const args = new PopupCloseEvent(e);
+                this.onClose.next(args);
+                if (!args.isDefaultPrevented() && this.canClosePopup) {
+                    this.destroy();
+                }
+                this.canClosePopup = true;
+            }
+        }));
+    }
+    attachMouseListeners(el) {
+        this.pointerEventsSub = new Subscription();
+        this.ngZone.runOutsideAngular(() => {
+            this.pointerEventsSub.add(this.renderer.listen(el, 'pointerdown', (e) => {
+                e.stopImmediatePropagation();
+                this.canClosePopup = false;
+            }));
+            this.pointerEventsSub.add(this.renderer.listen(el, 'pointerup', () => {
+                this.canClosePopup = true;
+            }));
+        });
+    }
+}
+SinglePopupService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SinglePopupService, deps: [{ token: i1.PopupService }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i2.PivotLocalizationService }], target: i0.ɵɵFactoryTarget.Injectable });
+SinglePopupService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SinglePopupService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SinglePopupService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i1.PopupService }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i2.PivotLocalizationService }]; } });