igniteui-angular
Version:
Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps
265 lines (260 loc) • 10.2 kB
JavaScript
import * as i0 from '@angular/core';
import { booleanAttribute, HostBinding, Input, Component, NgModule } from '@angular/core';
import { IgxIconComponent } from 'igniteui-angular/icon';
let NEXT_ID = 0;
/**
* Determines the igxBadge type
*/
const IgxBadgeType = {
PRIMARY: 'primary',
INFO: 'info',
SUCCESS: 'success',
WARNING: 'warning',
ERROR: 'error'
};
/**
* Badge provides visual notifications used to decorate avatars, menus, etc.
*
* @igxModule IgxBadgeModule
*
* @igxTheme igx-badge-theme
*
* @igxKeywords badge, icon, notification
*
* @igxGroup Data Entry & Display
*
* @remarks
* The Ignite UI Badge is used to decorate avatars, navigation menus, or other components in the
* application when visual notification is needed. They are usually designed as icons with a predefined
* style to communicate information, success, warnings, or errors.
*
* @example
* ```html
* <igx-avatar>
* <igx-badge icon="check" type="success"></igx-badge>
* </igx-avatar>
*/
class IgxBadgeComponent {
constructor() {
/**
* Sets/gets the `id` of the badge.
*
* @remarks
* If not set, the `id` will have value `"igx-badge-0"`.
*
* @example
* ```html
* <igx-badge id="igx-badge-2"></igx-badge>
* ```
*/
this.id = `igx-badge-${NEXT_ID++}`;
/**
* Sets/gets the type of the badge.
*
* @remarks
* Allowed values are `primary`, `info`, `success`, `warning`, `error`.
* Providing an invalid value won't display a badge.
*
* @example
* ```html
* <igx-badge type="success"></igx-badge>
* ```
*/
this.type = IgxBadgeType.PRIMARY;
/**
* Sets/gets the value to be displayed inside the badge.
*
* @remarks
* If an `icon` property is already set the `icon` will be displayed.
* If neither a `value` nor an `icon` is set the content of the badge will be empty.
*
* @example
* ```html
* <igx-badge value="11"></igx-badge>
* ```
*/
this.value = '';
/**
* Sets/gets the role attribute value.
*
* @example
* ```typescript
* @ViewChild("MyBadge", { read: IgxBadgeComponent })
* public badge: IgxBadgeComponent;
*
* badge.role = 'status';
* ```
*/
this.role = 'status';
/**
* Sets/gets the css class to use on the badge.
*
* @example
* ```typescript
* @ViewChild("MyBadge", { read: IgxBadgeComponent })
* public badge: IgxBadgeComponent;
*
* badge.cssClass = 'my-badge-class';
* ```
*/
this.cssClass = 'igx-badge';
/**
* Sets a square shape to the badge, if `shape` is set to `square`.
* By default the shape of the badge is rounded.
*
* @example
* ```html
* <igx-badge shape="square"></igx-badge>
* ```
*/
this.shape = 'rounded';
/**
* Sets/gets the aria-label attribute value.
*
* @example
* ```typescript
* @ViewChild("MyBadge", { read: IgxBadgeComponent })
* public badge: IgxBadgeComponent;
*
* badge.label = 'badge';
* ```
*/
this.label = 'badge';
/**
* Sets/gets whether the badge is outlined.
* Default value is `false`.
*
* @example
* ```html
* <igx-badge outlined></igx-badge>
* ```
*/
this.outlined = false;
/**
* Sets/gets whether the badge is displayed as a dot.
* When true, the badge will be rendered as a minimal 8px indicator without any content.
* Default value is `false`.
*
* @example
* ```html
* <igx-badge dot type="success"></igx-badge>
* ```
*/
this.dot = false;
}
/** @hidden @internal */
get _squareShape() {
if (!this.dot) {
return this.shape === 'square';
}
}
/**
* Defines a human-readable, accessor, author-localized description for
* the `type` and the `icon` or `value` of the element.
*
* @hidden
* @internal
*/
get roleDescription() {
if (this.icon) {
return this.type + ' type badge with icon type ' + this.icon;
}
else if (this.value || this.value === 0) {
return this.type + ' badge type with value ' + this.value;
}
return this.type + ' badge type without value';
}
get infoClass() {
return this.type === IgxBadgeType.INFO;
}
get successClass() {
return this.type === IgxBadgeType.SUCCESS;
}
get warningClass() {
return this.type === IgxBadgeType.WARNING;
}
get errorClass() {
return this.type === IgxBadgeType.ERROR;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: IgxBadgeComponent, isStandalone: true, selector: "igx-badge", inputs: { id: "id", type: "type", value: "value", icon: "icon", iconSet: "iconSet", shape: "shape", outlined: ["outlined", "outlined", booleanAttribute], dot: ["dot", "dot", booleanAttribute] }, host: { properties: { "attr.id": "this.id", "attr.role": "this.role", "class.igx-badge": "this.cssClass", "class.igx-badge--square": "this._squareShape", "attr.aria-label": "this.label", "class.igx-badge--outlined": "this.outlined", "class.igx-badge--dot": "this.dot", "attr.aria-roledescription": "this.roleDescription", "class.igx-badge--info": "this.infoClass", "class.igx-badge--success": "this.successClass", "class.igx-badge--warning": "this.warningClass", "class.igx-badge--error": "this.errorClass" } }, ngImport: i0, template: "@if (value || value === 0 && !icon) {\n <span class=\"igx-badge__value\">{{value}}</span>\n}\n@if (icon && !iconSet) {\n <igx-icon>{{icon}}</igx-icon>\n}\n@if (icon && iconSet) {\n <igx-icon [family]=\"iconSet\" [name]=\"icon\">{{icon}}</igx-icon>\n}\n<ng-content></ng-content>\n", dependencies: [{ kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxBadgeComponent, decorators: [{
type: Component,
args: [{ selector: 'igx-badge', imports: [IgxIconComponent], template: "@if (value || value === 0 && !icon) {\n <span class=\"igx-badge__value\">{{value}}</span>\n}\n@if (icon && !iconSet) {\n <igx-icon>{{icon}}</igx-icon>\n}\n@if (icon && iconSet) {\n <igx-icon [family]=\"iconSet\" [name]=\"icon\">{{icon}}</igx-icon>\n}\n<ng-content></ng-content>\n" }]
}], propDecorators: { id: [{
type: HostBinding,
args: ['attr.id']
}, {
type: Input
}], type: [{
type: Input
}], value: [{
type: Input
}], icon: [{
type: Input
}], iconSet: [{
type: Input
}], role: [{
type: HostBinding,
args: ['attr.role']
}], cssClass: [{
type: HostBinding,
args: ['class.igx-badge']
}], shape: [{
type: Input
}], _squareShape: [{
type: HostBinding,
args: ['class.igx-badge--square']
}], label: [{
type: HostBinding,
args: ['attr.aria-label']
}], outlined: [{
type: Input,
args: [{ transform: booleanAttribute }]
}, {
type: HostBinding,
args: ['class.igx-badge--outlined']
}], dot: [{
type: Input,
args: [{ transform: booleanAttribute }]
}, {
type: HostBinding,
args: ['class.igx-badge--dot']
}], roleDescription: [{
type: HostBinding,
args: ['attr.aria-roledescription']
}], infoClass: [{
type: HostBinding,
args: ['class.igx-badge--info']
}], successClass: [{
type: HostBinding,
args: ['class.igx-badge--success']
}], warningClass: [{
type: HostBinding,
args: ['class.igx-badge--warning']
}], errorClass: [{
type: HostBinding,
args: ['class.igx-badge--error']
}] } });
/**
* @hidden
* IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components
*/
class IgxBadgeModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxBadgeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.2", ngImport: i0, type: IgxBadgeModule, imports: [IgxBadgeComponent], exports: [IgxBadgeComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxBadgeModule, imports: [IgxBadgeComponent] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxBadgeModule, decorators: [{
type: NgModule,
args: [{
exports: [IgxBadgeComponent],
imports: [IgxBadgeComponent]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { IgxBadgeComponent, IgxBadgeModule, IgxBadgeType };
//# sourceMappingURL=igniteui-angular-badge.mjs.map