@progress/kendo-angular-buttons
Version:
Buttons Package for Angular
168 lines (167 loc) • 8.37 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, Output, EventEmitter } from '@angular/core';
import { validatePackage } from '@progress/kendo-licensing';
import { packageMetadata } from '../package-metadata';
import { ButtonItemTemplateDirective } from './button-item-template.directive';
import { SIZES } from '../util';
import { IconWrapperComponent } from '@progress/kendo-angular-icons';
import { FocusableDirective } from '../focusable/focusable.directive';
import { NgClass, NgFor, NgIf } from '@angular/common';
import { TemplateContextDirective } from '@progress/kendo-angular-common';
import * as i0 from "@angular/core";
/**
* @hidden
*/
export class ListComponent {
data;
textField;
itemTemplate;
onItemClick = new EventEmitter();
onItemBlur = new EventEmitter();
set size(size) {
if (size) {
this.sizeClass = `k-menu-group-${SIZES[size]}`;
}
else {
this.sizeClass = '';
}
}
sizeClass = '';
constructor() {
validatePackage(packageMetadata);
}
getText(dataItem) {
if (dataItem) {
return this.textField ? dataItem[this.textField] : dataItem.text || dataItem;
}
return undefined;
}
getIconClasses(dataItem) {
const icon = dataItem.icon ? 'k-icon k-i-' + dataItem.icon : undefined;
const classes = {};
classes[icon || dataItem.iconClass] = true;
return classes;
}
onClick(index) {
this.onItemClick.emit(index);
}
onBlur() {
this.onItemBlur.emit();
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ListComponent, isStandalone: true, selector: "kendo-button-list", inputs: { data: "data", textField: "textField", itemTemplate: "itemTemplate", size: "size" }, outputs: { onItemClick: "onItemClick", onItemBlur: "onItemBlur" }, ngImport: i0, template: `
<ul class="k-group k-menu-group k-reset" role="list" [ngClass]="sizeClass">
<li kendoButtonFocusable
*ngFor="let dataItem of data; let index = index;"
[]="index"
tabindex="-1"
class="k-item k-menu-item"
role="listitem"
[]="dataItem.disabled ? true : false"
(click)="$event.stopImmediatePropagation(); onClick(index);"
(blur)="onBlur()">
<ng-template [ngIf]="itemTemplate?.templateRef">
<span
class="k-link k-menu-link"
[]="dataItem.disabled"
[]="dataItem.cssClass">
<ng-template
[]="{ templateRef: itemTemplate?.templateRef, $implicit: dataItem }"
></ng-template>
</span>
</ng-template>
<ng-template [ngIf]="!itemTemplate?.templateRef">
<span
class="k-link k-menu-link"
[]="dataItem.disabled"
[]="dataItem.cssClass">
<kendo-icon-wrapper
*ngIf="dataItem.icon || dataItem.iconClass || dataItem.svgIcon"
[]="dataItem.icon"
[]="dataItem.svgIcon"
[]="dataItem.iconClass"
></kendo-icon-wrapper>
<img
*ngIf="dataItem.imageUrl"
class="k-image"
[]="dataItem.imageUrl"
[]="dataItem.imageAlt"
>
<span *ngIf="getText(dataItem)" class="k-menu-link-text">
{{ getText(dataItem) }}
</span>
</span>
</ng-template>
</li>
</ul>
`, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: FocusableDirective, selector: "[kendoButtonFocusable]", inputs: ["index"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ListComponent, decorators: [{
type: Component,
args: [{
selector: 'kendo-button-list',
template: `
<ul class="k-group k-menu-group k-reset" role="list" [ngClass]="sizeClass">
<li kendoButtonFocusable
*ngFor="let dataItem of data; let index = index;"
[]="index"
tabindex="-1"
class="k-item k-menu-item"
role="listitem"
[]="dataItem.disabled ? true : false"
(click)="$event.stopImmediatePropagation(); onClick(index);"
(blur)="onBlur()">
<ng-template [ngIf]="itemTemplate?.templateRef">
<span
class="k-link k-menu-link"
[]="dataItem.disabled"
[]="dataItem.cssClass">
<ng-template
[]="{ templateRef: itemTemplate?.templateRef, $implicit: dataItem }"
></ng-template>
</span>
</ng-template>
<ng-template [ngIf]="!itemTemplate?.templateRef">
<span
class="k-link k-menu-link"
[]="dataItem.disabled"
[]="dataItem.cssClass">
<kendo-icon-wrapper
*ngIf="dataItem.icon || dataItem.iconClass || dataItem.svgIcon"
[]="dataItem.icon"
[]="dataItem.svgIcon"
[]="dataItem.iconClass"
></kendo-icon-wrapper>
<img
*ngIf="dataItem.imageUrl"
class="k-image"
[]="dataItem.imageUrl"
[]="dataItem.imageAlt"
>
<span *ngIf="getText(dataItem)" class="k-menu-link-text">
{{ getText(dataItem) }}
</span>
</span>
</ng-template>
</li>
</ul>
`,
standalone: true,
imports: [NgClass, NgFor, FocusableDirective, NgIf, TemplateContextDirective, IconWrapperComponent]
}]
}], ctorParameters: function () { return []; }, propDecorators: { data: [{
type: Input
}], textField: [{
type: Input
}], itemTemplate: [{
type: Input
}], onItemClick: [{
type: Output
}], onItemBlur: [{
type: Output
}], size: [{
type: Input
}] } });