@progress/kendo-angular-indicators
Version:
Kendo UI Indicators for Angular
98 lines (97 loc) • 4.09 kB
TypeScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import { AfterViewInit, ElementRef, OnChanges, Renderer2, OnDestroy } from '@angular/core';
import { LocalizationService } from '@progress/kendo-angular-l10n';
import { BadgeAlign } from './models/align';
import { BadgeSize } from './models/size';
import { BadgeFill } from './models/fill';
import { BadgeThemeColor } from './models/theme-color';
import { BadgeRounded } from './models/rounded';
import { BadgePosition } from './models/position';
import * as i0 from "@angular/core";
/**
* 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 declare class BadgeComponent implements AfterViewInit, OnChanges, OnDestroy {
private element;
private renderer;
private localizationService;
hostClass: boolean;
get cutoutBorderClass(): boolean;
/**
* @hidden
*/
direction: string;
/**
* Specifies the alignment of the Badge ([see example]({% slug alignandposition_badge %}#toc-alignment)).
*
* @default "{ vertical: 'top', horizontal: 'end' }"
*/
get align(): BadgeAlign;
set align(align: BadgeAlign);
/**
* Specifies the size of the Badge ([see example]({% slug appearance_badge %}#toc-size)).
*
* @default medium
*/
size: BadgeSize;
/**
* Specifies the appearance fill style of the Badge ([see example]({% slug appearance_badge %}#toc-fill)).
*
* @default solid
*/
fill: BadgeFill;
/**
* 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: BadgeThemeColor;
/**
* Specifies the roundness of the Badge ([see example]({% slug appearance_badge %}#toc-rounded)).
*
* @default medium
*/
rounded: BadgeRounded;
/**
* 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: BadgePosition;
/**
* Specifies whether to render additional `cutout` border around the Badge ([see example]({% slug appearance_badge %}#toc-cutout-border)).
*
* @default false
*/
cutoutBorder: boolean;
private badgeClasses;
private badgeAlign;
private dynamicRTLSubscription;
private rtl;
constructor(element: ElementRef, renderer: Renderer2, localizationService: LocalizationService);
ngAfterViewInit(): void;
ngOnChanges(): void;
ngOnDestroy(): void;
private alignClass;
private positionClass;
private sizeClass;
private roundedClass;
private themeColorClass;
private fillClass;
private setBadgeClasses;
static ɵfac: i0.ɵɵFactoryDeclaration<BadgeComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<BadgeComponent, "kendo-badge", never, { "align": { "alias": "align"; "required": false; }; "size": { "alias": "size"; "required": false; }; "fill": { "alias": "fill"; "required": false; }; "themeColor": { "alias": "themeColor"; "required": false; }; "rounded": { "alias": "rounded"; "required": false; }; "position": { "alias": "position"; "required": false; }; "cutoutBorder": { "alias": "cutoutBorder"; "required": false; }; }, {}, never, ["*"], true, never>;
}