@progress/kendo-angular-navigation
Version:
Kendo UI Navigation for Angular
94 lines (93 loc) • 5.15 kB
JavaScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import { Component, Input, TemplateRef, Output, EventEmitter, ElementRef, Renderer2, NgZone } from "@angular/core";
import { NgFor, NgClass, NgStyle } from "@angular/common";
import { Subscription } from "rxjs";
import { getActionSheetItemIndex, ACTIONSHEET_ITEM_INDEX_ATTRIBUTE } from "../common/util";
import { ActionSheetItemComponent } from "./item.component";
import * as i0 from "@angular/core";
/**
* @hidden
*/
export class ActionSheetListComponent {
renderer;
ngZone;
element;
groupItems = [];
allItems = [];
itemTemplate;
itemClick = new EventEmitter();
subscriptions = new Subscription();
constructor(renderer, ngZone, element) {
this.renderer = renderer;
this.ngZone = ngZone;
this.element = element;
}
ngAfterViewInit() {
this.initDomEvents();
}
ngOnDestroy() {
this.subscriptions.unsubscribe();
}
initDomEvents() {
if (!this.element) {
return;
}
this.ngZone.runOutsideAngular(() => {
const nativeElement = this.element.nativeElement;
this.subscriptions.add(this.renderer.listen(nativeElement, 'click', this.clickHandler.bind(this)));
});
}
clickHandler(e) {
const itemIndex = getActionSheetItemIndex(e.target, ACTIONSHEET_ITEM_INDEX_ATTRIBUTE, this.element.nativeElement);
const item = this.allItems[itemIndex];
if (!item) {
return;
}
if (item.disabled) {
e.preventDefault();
return;
}
this.ngZone.run(() => {
this.itemClick.emit({ item, originalEvent: e });
});
}
setAttrIndex(item) {
return this.allItems.indexOf(item);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ActionSheetListComponent, deps: [{ token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ActionSheetListComponent, isStandalone: true, selector: "[kendoActionSheetList]", inputs: { groupItems: "groupItems", allItems: "allItems", itemTemplate: "itemTemplate" }, outputs: { itemClick: "itemClick" }, ngImport: i0, template: "\n <span *ngFor=\"let item of groupItems\" kendoActionSheetItem\n tabindex=\"0\"\n role=\"button\"\n [attr.aria-disabled]=\"item.disabled\"\n [class.k-actionsheet-item]=\"true\"\n [attr.kendo-actionsheet-item-index]=\"setAttrIndex(item)\"\n [class.k-disabled]=\"item.disabled\"\n [ngClass]=\"item.cssClass\"\n [ngStyle]=\"item.cssStyle\"\n [itemTemplate]=\"itemTemplate\"\n [item]=\"item\">\n </span>\n ", isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ActionSheetItemComponent, selector: "[kendoActionSheetItem]", inputs: ["itemTemplate", "item"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ActionSheetListComponent, decorators: [{
type: Component,
args: [{
// eslint-disable-next-line @angular-eslint/component-selector
selector: '[kendoActionSheetList]',
template: `
<span *ngFor="let item of groupItems" kendoActionSheetItem
tabindex="0"
role="button"
[attr.aria-disabled]="item.disabled"
[class.k-actionsheet-item]="true"
[attr.${ACTIONSHEET_ITEM_INDEX_ATTRIBUTE}]="setAttrIndex(item)"
[class.k-disabled]="item.disabled"
[ngClass]="item.cssClass"
[ngStyle]="item.cssStyle"
[itemTemplate]="itemTemplate"
[item]="item">
</span>
`,
standalone: true,
imports: [NgFor, ActionSheetItemComponent, NgClass, NgStyle]
}]
}], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.NgZone }, { type: i0.ElementRef }]; }, propDecorators: { groupItems: [{
type: Input
}], allItems: [{
type: Input
}], itemTemplate: [{
type: Input
}], itemClick: [{
type: Output
}] } });