@progress/kendo-angular-buttons
Version:
Buttons Package for Angular
152 lines (149 loc) • 6.98 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, ElementRef, HostBinding, Input, Renderer2, TemplateRef } from "@angular/core";
import { LocalizationService } from '@progress/kendo-angular-l10n';
import { IconWrapperComponent } from "@progress/kendo-angular-icons";
import { NgIf, NgTemplateOutlet } from "@angular/common";
import * as i0 from "@angular/core";
import * as i1 from "@progress/kendo-angular-l10n";
/**
* @hidden
*/
export class DialItemComponent {
element;
renderer;
localisationService;
hostClass = true;
role = 'menuitem';
get disabledClass() {
return this.item.disabled;
}
get title() {
const label = this.item.label;
return label || this.itemTitle;
}
get indexAttr() {
return this.index;
}
cssClass;
cssStyle;
isFocused;
index;
item;
dialItemTemplate;
align;
constructor(element, renderer, localisationService) {
this.element = element;
this.renderer = renderer;
this.localisationService = localisationService;
}
get iconClasses() {
const classes = [];
if (this.item.iconClass) {
classes.push(`${this.item.iconClass}`);
}
if (this.item.icon) {
classes.push(`k-fab-item-icon k-icon k-i-${this.item.icon}`);
}
return classes;
}
get itemTitle() {
const icon = this.item.icon;
const itemTitle = this.item.itemTitle;
return (icon && itemTitle) ? itemTitle : icon;
}
ngAfterViewInit() {
const element = this.element.nativeElement;
const rtl = this.localisationService.rtl;
const hAlign = this.align.horizontal;
this.renderer.addClass(element, this.getTextDirectionClass(rtl, hAlign));
}
getTextDirectionClass(rtl, hAlign) {
const dir = rtl ? 'rtl' : 'ltr';
const align = hAlign === 'end' ? 'end' : 'start';
const directions = {
rtl: { end: 'k-text-left', start: 'k-text-right' },
ltr: { start: 'k-text-left', end: 'k-text-right' }
};
return directions[dir][align];
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DialItemComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DialItemComponent, isStandalone: true, selector: "[kendoDialItem]", inputs: { cssClass: "cssClass", cssStyle: "cssStyle", isFocused: "isFocused", index: "index", item: "item", dialItemTemplate: "dialItemTemplate", align: "align" }, host: { properties: { "class.k-fab-item": "this.hostClass", "attr.role": "this.role", "attr.aria-disabled": "this.disabledClass", "class.k-disabled": "this.disabledClass", "attr.title": "this.title", "attr.aria-label": "this.title", "attr.data-fab-item-index": "this.indexAttr" } }, ngImport: i0, template: `
<ng-template *ngIf="dialItemTemplate"
[ngTemplateOutlet]="dialItemTemplate"
[ngTemplateOutletContext]="{ $implicit: item, index: index, isFocused: isFocused }"
>
</ng-template>
<ng-container *ngIf="!dialItemTemplate">
<span *ngIf="item.label" class="k-fab-item-text">{{ item.label }}</span>
<kendo-icon-wrapper
*ngIf="item.icon || item.iconClass || item.svgIcon"
[name]="item.icon"
innerCssClass="k-fab-item-icon"
[customFontClass]="item.iconClass"
[svgIcon]="item.svgIcon"></kendo-icon-wrapper>
</ng-container>
`, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: DialItemComponent, decorators: [{
type: Component,
args: [{
// eslint-disable-next-line @angular-eslint/component-selector
selector: '[kendoDialItem]',
template: `
<ng-template *ngIf="dialItemTemplate"
[ngTemplateOutlet]="dialItemTemplate"
[ngTemplateOutletContext]="{ $implicit: item, index: index, isFocused: isFocused }"
>
</ng-template>
<ng-container *ngIf="!dialItemTemplate">
<span *ngIf="item.label" class="k-fab-item-text">{{ item.label }}</span>
<kendo-icon-wrapper
*ngIf="item.icon || item.iconClass || item.svgIcon"
[name]="item.icon"
innerCssClass="k-fab-item-icon"
[customFontClass]="item.iconClass"
[svgIcon]="item.svgIcon"></kendo-icon-wrapper>
</ng-container>
`,
standalone: true,
imports: [NgIf, NgTemplateOutlet, IconWrapperComponent]
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.LocalizationService }]; }, propDecorators: { hostClass: [{
type: HostBinding,
args: ['class.k-fab-item']
}], role: [{
type: HostBinding,
args: ['attr.role']
}], disabledClass: [{
type: HostBinding,
args: ['attr.aria-disabled']
}, {
type: HostBinding,
args: ['class.k-disabled']
}], title: [{
type: HostBinding,
args: ['attr.title']
}, {
type: HostBinding,
args: ['attr.aria-label']
}], indexAttr: [{
type: HostBinding,
args: ['attr.data-fab-item-index']
}], cssClass: [{
type: Input
}], cssStyle: [{
type: Input
}], isFocused: [{
type: Input
}], index: [{
type: Input
}], item: [{
type: Input
}], dialItemTemplate: [{
type: Input
}], align: [{
type: Input
}] } });