primeng
Version:
PrimeNG is a premium UI library for Angular featuring a rich set of 90+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBlock,
162 lines (157 loc) • 8.65 kB
JavaScript
import * as i0 from '@angular/core';
import { Injectable, InjectionToken, inject, input, booleanAttribute, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
import { SharedModule } from 'primeng/api';
import { BaseComponent, PARENT_INSTANCE } from 'primeng/basecomponent';
import * as i1 from 'primeng/bind';
import { Bind } from 'primeng/bind';
import { style as style$1 } from '@primeuix/styles/badge';
import { isEmpty, isNotEmpty } from '@primeuix/utils';
import { BaseStyle } from 'primeng/base';
const style = /*css*/ `
${style$1}
`;
const classes = {
root: ({ instance }) => {
const value = instance.value();
const size = instance.size();
const badgeSize = instance.badgeSize();
const severity = instance.severity();
return [
'p-badge p-component',
{
'p-badge-circle': isNotEmpty(value) && String(value).length === 1,
'p-badge-dot': isEmpty(value),
'p-badge-sm': size === 'small' || badgeSize === 'small',
'p-badge-lg': size === 'large' || badgeSize === 'large',
'p-badge-xl': size === 'xlarge' || badgeSize === 'xlarge',
'p-badge-info': severity === 'info',
'p-badge-success': severity === 'success',
'p-badge-warn': severity === 'warn',
'p-badge-danger': severity === 'danger',
'p-badge-secondary': severity === 'secondary',
'p-badge-contrast': severity === 'contrast'
}
];
}
};
class BadgeStyle extends BaseStyle {
name = 'badge';
style = style;
classes = classes;
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: BadgeStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: BadgeStyle });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: BadgeStyle, decorators: [{
type: Injectable
}] });
/**
*
* Badge represents people using icons, labels and images.
*
* [Live Demo](https://www.primeng.org/badge)
*
* @module badgestyle
*
*/
var BadgeClasses;
(function (BadgeClasses) {
/**
* Class name of the root element
*/
BadgeClasses["root"] = "p-badge";
})(BadgeClasses || (BadgeClasses = {}));
const BADGE_INSTANCE = new InjectionToken('BADGE_INSTANCE');
/**
* Badge is a small status indicator for another element.
* @group Components
*/
class Badge extends BaseComponent {
componentName = 'Badge';
$pcBadge = inject(BADGE_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;
bindDirectiveInstance = inject(Bind, { self: true });
onAfterViewChecked() {
this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
}
/**
* Size of the badge, valid options are "large" and "xlarge".
* @group Props
*/
badgeSize = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "badgeSize" }] : /* istanbul ignore next */ []));
/**
* Size of the badge, valid options are "large" and "xlarge".
* @group Props
*/
size = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "size" }] : /* istanbul ignore next */ []));
/**
* Severity type of the badge.
* @group Props
*/
severity = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "severity" }] : /* istanbul ignore next */ []));
/**
* Value to display inside the badge.
* @group Props
*/
value = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
/**
* When specified, disables the component.
* @group Props
*/
badgeDisabled = input(false, { ...(ngDevMode ? { debugName: "badgeDisabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
_componentStyle = inject(BadgeStyle);
displayStyle = computed(() => (this.badgeDisabled() ? 'none' : null), /* @ts-ignore */
...(ngDevMode ? [{ debugName: "displayStyle" }] : /* istanbul ignore next */ []));
dataP = computed(() => {
const value = this.value();
const severity = this.severity();
const size = this.size();
return this.cn({
circle: value != null && String(value).length === 1,
empty: value == null,
disabled: this.badgeDisabled(),
[severity]: severity,
[size]: size
});
}, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "dataP" }] : /* istanbul ignore next */ []));
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: Badge, deps: null, target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.6", type: Badge, isStandalone: true, selector: "p-badge", inputs: { badgeSize: { classPropertyName: "badgeSize", publicName: "badgeSize", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, badgeDisabled: { classPropertyName: "badgeDisabled", publicName: "badgeDisabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "cx('root')", "style.display": "displayStyle()", "attr.data-p": "dataP()" } }, providers: [BadgeStyle, { provide: BADGE_INSTANCE, useExisting: Badge }, { provide: PARENT_INSTANCE, useExisting: Badge }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `{{ value() }}`, isInline: true, dependencies: [{ kind: "ngmodule", type: SharedModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: Badge, decorators: [{
type: Component,
args: [{
selector: 'p-badge',
template: `{{ value() }}`,
standalone: true,
imports: [SharedModule],
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
providers: [BadgeStyle, { provide: BADGE_INSTANCE, useExisting: Badge }, { provide: PARENT_INSTANCE, useExisting: Badge }],
host: {
'[class]': "cx('root')",
'[style.display]': 'displayStyle()',
'[attr.data-p]': 'dataP()'
},
hostDirectives: [Bind]
}]
}], propDecorators: { badgeSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgeSize", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], severity: [{ type: i0.Input, args: [{ isSignal: true, alias: "severity", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], badgeDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgeDisabled", required: false }] }] } });
class BadgeModule {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: BadgeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.6", ngImport: i0, type: BadgeModule, imports: [Badge, SharedModule], exports: [Badge, SharedModule] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: BadgeModule, imports: [Badge, SharedModule, SharedModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: BadgeModule, decorators: [{
type: NgModule,
args: [{
imports: [Badge, SharedModule],
exports: [Badge, SharedModule]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { Badge, BadgeClasses, BadgeModule, BadgeStyle };
//# sourceMappingURL=primeng-badge.mjs.map