@progress/kendo-angular-buttons/esm2022/listbutton/list.component.mjs

Buttons Package for Angular

/**-----------------------------------------------------------------------------------------
* 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 } 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: "18.2.14", ngImport: i0, type: ListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", 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">
          @for (dataItem of data; track dataItem; let index = $index) {
            <li kendoButtonFocusable
              [index]="index"
              tabindex="-1"
              class="k-item k-menu-item"
              role="listitem"
              [attr.aria-disabled]="dataItem.disabled ? true : false"
              (click)="$event.stopImmediatePropagation(); onClick(index);"
              (blur)="onBlur()">
              @if (itemTemplate?.templateRef) {
                <span
                  class="k-link k-menu-link"
                  [class.k-disabled]="dataItem.disabled"
                  [ngClass]="dataItem.cssClass">
                  <ng-template
                    [templateContext]="{ templateRef: itemTemplate?.templateRef, $implicit: dataItem }"
                  ></ng-template>
                </span>
              }
              @if (!itemTemplate?.templateRef) {
                <span
                  class="k-link k-menu-link"
                  [class.k-disabled]="dataItem.disabled"
                  [ngClass]="dataItem.cssClass">
                  @if (dataItem.icon || dataItem.iconClass || dataItem.svgIcon) {
                    <kendo-icon-wrapper
                      [name]="dataItem.icon"
                      [svgIcon]="dataItem.svgIcon"
                      [customFontClass]="dataItem.iconClass"
                    ></kendo-icon-wrapper>
                  }
                  @if (dataItem.imageUrl) {
                    <img
                      class="k-image"
                      [src]="dataItem.imageUrl"
                      [alt]="dataItem.imageAlt"
                      >
                  }
                  @if (getText(dataItem)) {
                    <span class="k-menu-link-text">
                      {{ getText(dataItem) }}
                    </span>
                  }
                </span>
              }
            </li>
          }
        </ul>
        `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: FocusableDirective, selector: "[kendoButtonFocusable]", inputs: ["index"] }, { 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: "18.2.14", 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">
          @for (dataItem of data; track dataItem; let index = $index) {
            <li kendoButtonFocusable
              [index]="index"
              tabindex="-1"
              class="k-item k-menu-item"
              role="listitem"
              [attr.aria-disabled]="dataItem.disabled ? true : false"
              (click)="$event.stopImmediatePropagation(); onClick(index);"
              (blur)="onBlur()">
              @if (itemTemplate?.templateRef) {
                <span
                  class="k-link k-menu-link"
                  [class.k-disabled]="dataItem.disabled"
                  [ngClass]="dataItem.cssClass">
                  <ng-template
                    [templateContext]="{ templateRef: itemTemplate?.templateRef, $implicit: dataItem }"
                  ></ng-template>
                </span>
              }
              @if (!itemTemplate?.templateRef) {
                <span
                  class="k-link k-menu-link"
                  [class.k-disabled]="dataItem.disabled"
                  [ngClass]="dataItem.cssClass">
                  @if (dataItem.icon || dataItem.iconClass || dataItem.svgIcon) {
                    <kendo-icon-wrapper
                      [name]="dataItem.icon"
                      [svgIcon]="dataItem.svgIcon"
                      [customFontClass]="dataItem.iconClass"
                    ></kendo-icon-wrapper>
                  }
                  @if (dataItem.imageUrl) {
                    <img
                      class="k-image"
                      [src]="dataItem.imageUrl"
                      [alt]="dataItem.imageAlt"
                      >
                  }
                  @if (getText(dataItem)) {
                    <span class="k-menu-link-text">
                      {{ getText(dataItem) }}
                    </span>
                  }
                </span>
              }
            </li>
          }
        </ul>
        `,
                    standalone: true,
                    imports: [NgClass, FocusableDirective, TemplateContextDirective, IconWrapperComponent]
                }]
        }], ctorParameters: () => [], propDecorators: { data: [{
                type: Input
            }], textField: [{
                type: Input
            }], itemTemplate: [{
                type: Input
            }], onItemClick: [{
                type: Output
            }], onItemBlur: [{
                type: Output
            }], size: [{
                type: Input
            }] } });