@progress/kendo-angular-indicators
Version:
Kendo UI Indicators for Angular
217 lines (216 loc) • 7.91 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, Input, Renderer2, HostBinding } from '@angular/core';
import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
import { validatePackage } from '@progress/kendo-licensing';
import { packageMetadata } from '../package-metadata';
import * as i0 from "@angular/core";
import * as i1 from "@progress/kendo-angular-l10n";
const SIZE_CLASSES = {
'small': 'k-badge-sm',
'medium': 'k-badge-md',
'large': 'k-badge-lg'
};
const ROUNDED_CLASSES = {
'small': 'k-rounded-sm',
'medium': 'k-rounded-md',
'large': 'k-rounded-lg',
'full': 'k-rounded-full'
};
/**
* Represents the [Kendo UI Badge component for Angular]({% slug overview_badge %}).
* Displays additional information or status related to an element, such as notifications or counts.
*
* Provides configuration options for alignment, size, fill, theme color, roundness, position, and cutout border.
*
* @example
* ```html
* <kendo-badge [size]="'large'" [themeColor]="'success'">99+</kendo-badge>
* ```
*/
export class BadgeComponent {
element;
renderer;
localizationService;
hostClass = true;
get cutoutBorderClass() {
return this.cutoutBorder;
}
/**
* @hidden
*/
direction;
/**
* Specifies the alignment of the Badge ([see example]({% slug alignandposition_badge %}#toc-alignment)).
*
* @default "{ vertical: 'top', horizontal: 'end' }"
*/
get align() {
return this.badgeAlign;
}
set align(align) {
this.badgeAlign = Object.assign(this.badgeAlign, align);
}
/**
* Specifies the size of the Badge ([see example]({% slug appearance_badge %}#toc-size)).
*
* @default medium
*/
size = 'medium';
/**
* Specifies the appearance fill style of the Badge ([see example]({% slug appearance_badge %}#toc-fill)).
*
* @default solid
*/
fill = 'solid';
/**
* Specifies the theme color of the Badge.
* The theme color applies as background and border color, while also amending the text color accordingly
* ([see example]({% slug appearance_badge %}#toc-theme-color)).
*
* @default primary
*/
themeColor = 'primary';
/**
* Specifies the roundness of the Badge ([see example]({% slug appearance_badge %}#toc-rounded)).
*
* @default medium
*/
rounded = 'medium';
/**
* Specifies the position of the Badge relative to the edge of the parent container element ([see example]({% slug alignandposition_badge %}#toc-position)).
*
* @default edge
*/
position = 'edge';
/**
* Specifies whether to render additional `cutout` border around the Badge ([see example]({% slug appearance_badge %}#toc-cutout-border)).
*
* @default false
*/
cutoutBorder = false;
badgeClasses = [];
badgeAlign = { vertical: 'top', horizontal: 'end' };
dynamicRTLSubscription;
rtl = false;
constructor(element, renderer, localizationService) {
this.element = element;
this.renderer = renderer;
this.localizationService = localizationService;
validatePackage(packageMetadata);
this.dynamicRTLSubscription = this.localizationService.changes.subscribe(({ rtl }) => {
this.rtl = rtl;
this.direction = this.rtl ? 'rtl' : 'ltr';
});
}
ngAfterViewInit() {
if (!this.badgeClasses.length) {
this.setBadgeClasses();
}
}
ngOnChanges() {
this.setBadgeClasses();
}
ngOnDestroy() {
if (this.dynamicRTLSubscription) {
this.dynamicRTLSubscription.unsubscribe();
}
}
alignClass() {
return `k-${this.badgeAlign.vertical}-${this.badgeAlign.horizontal}`;
}
positionClass() {
return `k-badge-${this.position}`;
}
sizeClass() {
if (this.size !== 'none') {
return SIZE_CLASSES[this.size];
}
return '';
}
roundedClass() {
if (this.rounded !== 'none') {
return ROUNDED_CLASSES[this.rounded];
}
return '';
}
themeColorClass() {
if (this.themeColor !== 'none' && this.fill !== 'none') {
return `k-badge-${this.fill}-${this.themeColor}`;
}
return '';
}
fillClass() {
if (this.fill !== 'none') {
return `k-badge-${this.fill}`;
}
return '';
}
setBadgeClasses() {
const element = this.element.nativeElement;
this.badgeClasses.forEach((className) => {
this.renderer.removeClass(element, className);
});
this.badgeClasses = [
this.themeColorClass(),
this.fillClass(),
this.sizeClass(),
this.roundedClass(),
this.alignClass(),
this.positionClass()
];
this.badgeClasses.forEach((className) => {
if (className) {
this.renderer.addClass(element, className);
}
});
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BadgeComponent, 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: BadgeComponent, isStandalone: true, selector: "kendo-badge", inputs: { align: "align", size: "size", fill: "fill", themeColor: "themeColor", rounded: "rounded", position: "position", cutoutBorder: "cutoutBorder" }, host: { properties: { "class.k-badge": "this.hostClass", "class.k-badge-border-cutout": "this.cutoutBorderClass", "attr.dir": "this.direction" } }, providers: [
LocalizationService,
{
provide: L10N_PREFIX,
useValue: 'kendo.badge.component'
}
], usesOnChanges: true, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BadgeComponent, decorators: [{
type: Component,
args: [{
selector: 'kendo-badge',
providers: [
LocalizationService,
{
provide: L10N_PREFIX,
useValue: 'kendo.badge.component'
}
],
template: `<ng-content></ng-content>`,
standalone: true
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.LocalizationService }]; }, propDecorators: { hostClass: [{
type: HostBinding,
args: ['class.k-badge']
}], cutoutBorderClass: [{
type: HostBinding,
args: ['class.k-badge-border-cutout']
}], direction: [{
type: HostBinding,
args: ['attr.dir']
}], align: [{
type: Input
}], size: [{
type: Input
}], fill: [{
type: Input
}], themeColor: [{
type: Input
}], rounded: [{
type: Input
}], position: [{
type: Input
}], cutoutBorder: [{
type: Input
}] } });