@progress/kendo-angular-pivotgrid
Version:
PivotGrid package for Angular
168 lines (167 loc) • 8.92 kB
JavaScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
/* eslint-disable @typescript-eslint/no-explicit-any */
import { MenuTabbingService } from './filtering/menu-tabbing.service';
import { Component, Input, ViewChild, Renderer2, TemplateRef } from '@angular/core';
import { SinglePopupService } from './single-popup.service';
import { ChipMenuService } from './chip-menu.service';
import { PivotLocalizationService } from '../../localization/pivot-localization.service';
import { replaceMessagePlaceholder } from '../../util';
import { moreVerticalIcon } from '@progress/kendo-svg-icons';
import { ChipMenuReorderComponent } from './chip-menu-reorder.component';
import { ChipMenuFilterComponent } from './chip-menu-filter.component';
import { ChipMenuItemDirective } from './chip-menu-item.directive';
import { ChipMenuSortComponent } from './chip-menu-sort.component';
import { NgIf } from '@angular/common';
import { ChipMenuContainerComponent } from './chip-menu-container.component';
import { IconWrapperComponent } from '@progress/kendo-angular-icons';
import { ChipComponent } from '@progress/kendo-angular-buttons';
import * as i0 from "@angular/core";
import * as i1 from "./single-popup.service";
import * as i2 from "../../localization/pivot-localization.service";
import * as i3 from "./chip-menu.service";
const POPUP_CLASS = 'k-column-menu';
/**
* @hidden
*
* Represents the field chip menu component.
*/
export class ChipMenuComponent {
popupService;
localization;
service;
renderer;
/**
* The Configurator field instance to control with the menu.
*/
chip;
tabIndex = '-1';
isMeasureField = false;
anchor;
template;
menuItemSVGIcon = moreVerticalIcon;
popupRef;
closeSubscription;
constructor(popupService, localization, service, renderer) {
this.popupService = popupService;
this.localization = localization;
this.service = service;
this.renderer = renderer;
this.closeSubscription = service.closeMenu.subscribe(this.close.bind(this));
}
ngOnDestroy() {
this.close();
this.closeSubscription.unsubscribe();
}
toggle(e) {
if (e?.originalEvent) {
e.originalEvent.preventDefault();
e.originalEvent.stopImmediatePropagation();
}
const anchorElement = this.anchor.element.nativeElement;
this.popupRef = this.popupService.open(anchorElement, this.template, this.popupRef, POPUP_CLASS);
this.popupRef && this.renderer.setAttribute(this.popupRef.popupElement, 'dir', this.localization.rtl ? 'rtl' : 'ltr');
if (!this.popupRef) {
anchorElement.focus();
}
}
close() {
this.popupService.destroy();
this.popupRef = null;
this.anchor.element.nativeElement.closest('.k-chip').focus();
}
get chipMenuTitle() {
const localizationMsg = this.localization.get('chipMenuIconTitle') || '';
const chipName = this.chip.name.toString();
return replaceMessagePlaceholder(localizationMsg, 'fieldName', chipName);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChipMenuComponent, deps: [{ token: i1.SinglePopupService }, { token: i2.PivotLocalizationService }, { token: i3.ChipMenuService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ChipMenuComponent, isStandalone: true, selector: "kendo-pivot-chip-menu", inputs: { chip: "chip", tabIndex: "tabIndex", isMeasureField: "isMeasureField", anchor: "anchor" }, providers: [
ChipMenuService,
MenuTabbingService
], viewQueries: [{ propertyName: "template", first: true, predicate: ["template"], descendants: true, static: true }], ngImport: i0, template: `
<ng-template #template>
<kendo-pivot-chipmenu-container
(keydown.escape)="close()"
(keydown.enter)="$event.stopImmediatePropagation()">
<ng-container *ngIf="!isMeasureField">
<kendo-pivot-chipmenu-sort
#sortItem
[chip]="chip"
[kendoPivotChipMenuItem]="sortItem"
[service]="service">
</kendo-pivot-chipmenu-sort>
<span class="k-separator" [style.borderColor]="'rgba(0, 0, 0, 0.08)'"></span>
<kendo-pivot-chipmenu-filter
#filterItem
[chip]="chip"
[isLast]="true"
[kendoPivotChipMenuItem]="filterItem"
[service]="service">
</kendo-pivot-chipmenu-filter>
<span class="k-separator" [style.borderColor]="'rgba(0, 0, 0, 0.08)'"></span>
</ng-container>
<kendo-pivot-chipmenu-reorder
#reorderItem
[chip]="chip"
[kendoPivotChipMenuItem]="reorderItem"
[service]="service"></kendo-pivot-chipmenu-reorder>
</kendo-pivot-chipmenu-container>
</ng-template>
`, isInline: true, dependencies: [{ kind: "component", type: ChipMenuContainerComponent, selector: "kendo-pivot-chipmenu-container" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ChipMenuSortComponent, selector: "kendo-pivot-chipmenu-sort", inputs: ["chip"] }, { kind: "directive", type: ChipMenuItemDirective, selector: "[kendoPivotChipMenuItem]", inputs: ["kendoPivotChipMenuItem"] }, { kind: "component", type: ChipMenuFilterComponent, selector: "kendo-pivot-chipmenu-filter", inputs: ["chip", "expanded", "isLast"], outputs: ["expand", "collapse"] }, { kind: "component", type: ChipMenuReorderComponent, selector: "kendo-pivot-chipmenu-reorder", inputs: ["chip"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChipMenuComponent, decorators: [{
type: Component,
args: [{
providers: [
ChipMenuService,
MenuTabbingService
],
selector: 'kendo-pivot-chip-menu',
template: `
<ng-template #template>
<kendo-pivot-chipmenu-container
(keydown.escape)="close()"
(keydown.enter)="$event.stopImmediatePropagation()">
<ng-container *ngIf="!isMeasureField">
<kendo-pivot-chipmenu-sort
#sortItem
[chip]="chip"
[kendoPivotChipMenuItem]="sortItem"
[service]="service">
</kendo-pivot-chipmenu-sort>
<span class="k-separator" [style.borderColor]="'rgba(0, 0, 0, 0.08)'"></span>
<kendo-pivot-chipmenu-filter
#filterItem
[chip]="chip"
[isLast]="true"
[kendoPivotChipMenuItem]="filterItem"
[service]="service">
</kendo-pivot-chipmenu-filter>
<span class="k-separator" [style.borderColor]="'rgba(0, 0, 0, 0.08)'"></span>
</ng-container>
<kendo-pivot-chipmenu-reorder
#reorderItem
[chip]="chip"
[kendoPivotChipMenuItem]="reorderItem"
[service]="service"></kendo-pivot-chipmenu-reorder>
</kendo-pivot-chipmenu-container>
</ng-template>
`,
standalone: true,
imports: [IconWrapperComponent, ChipMenuContainerComponent, NgIf, ChipMenuSortComponent, ChipMenuItemDirective, ChipMenuFilterComponent, ChipMenuReorderComponent]
}]
}], ctorParameters: function () { return [{ type: i1.SinglePopupService }, { type: i2.PivotLocalizationService }, { type: i3.ChipMenuService }, { type: i0.Renderer2 }]; }, propDecorators: { chip: [{
type: Input
}], tabIndex: [{
type: Input
}], isMeasureField: [{
type: Input
}], anchor: [{
type: Input
}], template: [{
type: ViewChild,
args: ['template', { static: true }]
}] } });