primeng
Version:
PrimeNG is an open source UI library for Angular featuring a rich set of 80+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeB
477 lines (458 loc) • 17 kB
JavaScript
import { CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { Injectable, inject, Input, Directive, input, booleanAttribute, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
import { isEmpty, isNotEmpty, uuid, hasClass, removeClass, addClass } from '@primeuix/utils';
import { SharedModule } from 'primeng/api';
import { BaseComponent } from 'primeng/basecomponent';
import { BaseStyle } from 'primeng/base';
const theme = ({ dt }) => `
.p-badge {
display: inline-flex;
border-radius: ${dt('badge.border.radius')};
justify-content: center;
padding: ${dt('badge.padding')};
background: ${dt('badge.primary.background')};
color: ${dt('badge.primary.color')};
font-size: ${dt('badge.font.size')};
font-weight: ${dt('badge.font.weight')};
min-width: ${dt('badge.min.width')};
height: ${dt('badge.height')};
line-height: ${dt('badge.height')};
}
.p-badge-dot {
width: ${dt('badge.dot.size')};
min-width: ${dt('badge.dot.size')};
height: ${dt('badge.dot.size')};
border-radius: 50%;
padding: 0;
}
.p-badge-circle {
padding: 0;
border-radius: 50%;
}
.p-badge-secondary {
background: ${dt('badge.secondary.background')};
color: ${dt('badge.secondary.color')};
}
.p-badge-success {
background: ${dt('badge.success.background')};
color: ${dt('badge.success.color')};
}
.p-badge-info {
background: ${dt('badge.info.background')};
color: ${dt('badge.info.color')};
}
.p-badge-warn {
background: ${dt('badge.warn.background')};
color: ${dt('badge.warn.color')};
}
.p-badge-danger {
background: ${dt('badge.danger.background')};
color: ${dt('badge.danger.color')};
}
.p-badge-contrast {
background: ${dt('badge.contrast.background')};
color: ${dt('badge.contrast.color')};
}
.p-badge-sm {
font-size: ${dt('badge.sm.font.size')};
min-width: ${dt('badge.sm.min.width')};
height: ${dt('badge.sm.height')};
line-height: ${dt('badge.sm.height')};
}
.p-badge-lg {
font-size: ${dt('badge.lg.font.size')};
min-width: ${dt('badge.lg.min.width')};
height: ${dt('badge.lg.height')};
line-height: ${dt('badge.lg.height')};
}
.p-badge-xl {
font-size: ${dt('badge.xl.font.size')};
min-width: ${dt('badge.xl.min.width')};
height: ${dt('badge.xl.height')};
line-height: ${dt('badge.xl.height')};
}
/* For PrimeNG (directive)*/
.p-overlay-badge {
position: relative;
}
.p-overlay-badge > .p-badge {
position: absolute;
top: 0;
inset-inline-end: 0;
transform: translate(50%, -50%);
transform-origin: 100% 0;
margin: 0;
}
`;
const classes = {
root: ({ props, instance }) => [
'p-badge p-component',
{
'p-badge-circle': isNotEmpty(props.value) && String(props.value).length === 1,
'p-badge-dot': isEmpty(props.value) && !instance.$slots.default,
'p-badge-sm': props.size === 'small',
'p-badge-lg': props.size === 'large',
'p-badge-xl': props.size === 'xlarge',
'p-badge-info': props.severity === 'info',
'p-badge-success': props.severity === 'success',
'p-badge-warn': props.severity === 'warn',
'p-badge-danger': props.severity === 'danger',
'p-badge-secondary': props.severity === 'secondary',
'p-badge-contrast': props.severity === 'contrast'
}
]
};
class BadgeStyle extends BaseStyle {
name = 'badge';
theme = theme;
classes = classes;
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: BadgeStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: BadgeStyle });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", 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 = {}));
/**
* Badge Directive is directive usage of badge component.
* @group Components
*/
class BadgeDirective extends BaseComponent {
/**
* When specified, disables the component.
* @group Props
*/
disabled;
/**
* Size of the badge, valid options are "large" and "xlarge".
* @group Props
*/
badgeSize;
/**
* Size of the badge, valid options are "large" and "xlarge".
* @group Props
* @deprecated use badgeSize instead.
*/
set size(value) {
this._size = value;
console.log('size property is deprecated and will removed in v18, use badgeSize instead.');
}
get size() {
return this._size;
}
_size;
/**
* Severity type of the badge.
* @group Props
*/
severity;
/**
* Value to display inside the badge.
* @group Props
*/
value;
/**
* Inline style of the element.
* @group Props
*/
badgeStyle;
/**
* Class of the element.
* @group Props
*/
badgeStyleClass;
id;
badgeEl;
_componentStyle = inject(BadgeStyle);
get activeElement() {
return this.el.nativeElement.nodeName.indexOf('-') != -1 ? this.el.nativeElement.firstChild : this.el.nativeElement;
}
get canUpdateBadge() {
return this.id && !this.disabled;
}
constructor() {
super();
}
ngOnChanges({ value, size, severity, disabled, badgeStyle, badgeStyleClass }) {
super.ngOnChanges({ value, size, severity, disabled });
if (disabled) {
this.toggleDisableState();
}
if (!this.canUpdateBadge) {
return;
}
if (severity) {
this.setSeverity(severity.previousValue);
}
if (size) {
this.setSizeClasses();
}
if (value) {
this.setValue();
}
if (badgeStyle || badgeStyleClass) {
this.applyStyles();
}
}
ngAfterViewInit() {
super.ngAfterViewInit();
this.id = uuid('pn_id_') + '_badge';
this.renderBadgeContent();
}
setValue(element) {
const badge = element ?? this.document.getElementById(this.id);
if (!badge) {
return;
}
if (this.value != null) {
if (hasClass(badge, 'p-badge-dot')) {
removeClass(badge, 'p-badge-dot');
}
if (this.value && String(this.value).length === 1) {
addClass(badge, 'p-badge-circle');
}
else {
removeClass(badge, 'p-badge-circle');
}
}
else {
if (!hasClass(badge, 'p-badge-dot')) {
addClass(badge, 'p-badge-dot');
}
removeClass(badge, 'p-badge-circle');
}
badge.innerHTML = '';
const badgeValue = this.value != null ? String(this.value) : '';
this.renderer.appendChild(badge, this.document.createTextNode(badgeValue));
}
setSizeClasses(element) {
const badge = element ?? this.document.getElementById(this.id);
if (!badge) {
return;
}
if (this.badgeSize) {
if (this.badgeSize === 'large') {
addClass(badge, 'p-badge-lg');
removeClass(badge, 'p-badge-xl');
}
if (this.badgeSize === 'xlarge') {
addClass(badge, 'p-badge-xl');
removeClass(badge, 'p-badge-lg');
}
}
else if (this.size && !this.badgeSize) {
if (this.size === 'large') {
addClass(badge, 'p-badge-lg');
removeClass(badge, 'p-badge-xl');
}
if (this.size === 'xlarge') {
addClass(badge, 'p-badge-xl');
removeClass(badge, 'p-badge-lg');
}
}
else {
removeClass(badge, 'p-badge-lg');
removeClass(badge, 'p-badge-xl');
}
}
renderBadgeContent() {
if (this.disabled) {
return null;
}
const el = this.activeElement;
const badge = this.document.createElement('span');
badge.id = this.id;
badge.className = 'p-badge p-component';
this.setSeverity(null, badge);
this.setSizeClasses(badge);
this.setValue(badge);
addClass(el, 'p-overlay-badge');
this.renderer.appendChild(el, badge);
this.badgeEl = badge;
this.applyStyles();
}
applyStyles() {
if (this.badgeEl && this.badgeStyle && typeof this.badgeStyle === 'object') {
for (const [key, value] of Object.entries(this.badgeStyle)) {
this.renderer.setStyle(this.badgeEl, key, value);
}
}
if (this.badgeEl && this.badgeStyleClass) {
this.badgeEl.classList.add(...this.badgeStyleClass.split(' '));
}
}
setSeverity(oldSeverity, element) {
const badge = element ?? this.document.getElementById(this.id);
if (!badge) {
return;
}
if (this.severity) {
addClass(badge, `p-badge-${this.severity}`);
}
if (oldSeverity) {
removeClass(badge, `p-badge-${oldSeverity}`);
}
}
toggleDisableState() {
if (!this.id) {
return;
}
if (this.disabled) {
const badge = this.activeElement?.querySelector(`#${this.id}`);
if (badge) {
this.renderer.removeChild(this.activeElement, badge);
}
}
else {
this.renderBadgeContent();
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: BadgeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.2", type: BadgeDirective, isStandalone: true, selector: "[pBadge]", inputs: { disabled: ["badgeDisabled", "disabled"], badgeSize: "badgeSize", size: "size", severity: "severity", value: "value", badgeStyle: "badgeStyle", badgeStyleClass: "badgeStyleClass" }, providers: [BadgeStyle], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: BadgeDirective, decorators: [{
type: Directive,
args: [{
selector: '[pBadge]',
providers: [BadgeStyle],
standalone: true
}]
}], ctorParameters: () => [], propDecorators: { disabled: [{
type: Input,
args: ['badgeDisabled']
}], badgeSize: [{
type: Input
}], size: [{
type: Input
}], severity: [{
type: Input
}], value: [{
type: Input
}], badgeStyle: [{
type: Input
}], badgeStyleClass: [{
type: Input
}] } });
/**
* Badge is a small status indicator for another element.
* @group Components
*/
class Badge extends BaseComponent {
/**
* Class of the element.
* @group Props
*/
styleClass = input();
/**
* Inline style of the element.
* @group Props
*/
style = input();
/**
* Size of the badge, valid options are "large" and "xlarge".
* @group Props
*/
badgeSize = input();
/**
* Size of the badge, valid options are "large" and "xlarge".
* @group Props
*/
size = input();
/**
* Severity type of the badge.
* @group Props
*/
severity = input();
/**
* Value to display inside the badge.
* @group Props
*/
value = input();
/**
* When specified, disables the component.
* @group Props
*/
badgeDisabled = input(false, { transform: booleanAttribute });
_componentStyle = inject(BadgeStyle);
/**
* Computes the container class for the badge element based on its properties.
* @returns An object representing the CSS classes to be applied to the badge container.
*/
containerClass = computed(() => {
let classes = 'p-badge p-component';
if (isNotEmpty(this.value()) && String(this.value()).length === 1) {
classes += ' p-badge-circle';
}
if (this.badgeSize() === 'large') {
classes += ' p-badge-lg';
}
else if (this.badgeSize() === 'xlarge') {
classes += ' p-badge-xl';
}
else if (this.badgeSize() === 'small') {
classes += ' p-badge-sm';
}
if (isEmpty(this.value())) {
classes += ' p-badge-dot';
}
if (this.styleClass()) {
classes += ` ${this.styleClass()}`;
}
if (this.severity()) {
classes += ` p-badge-${this.severity()}`;
}
return classes;
});
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: Badge, deps: null, target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.2", type: Badge, isStandalone: true, selector: "p-badge", inputs: { styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null }, 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": "containerClass()", "style.display": "badgeDisabled() ? \"none\" : null", "style": "style()" } }, providers: [BadgeStyle], usesInheritance: true, ngImport: i0, template: `{{ value() }}`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: SharedModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: Badge, decorators: [{
type: Component,
args: [{
selector: 'p-badge',
template: `{{ value() }}`,
standalone: true,
imports: [CommonModule, SharedModule],
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
providers: [BadgeStyle],
host: {
'[class]': 'containerClass()',
'[style.display]': 'badgeDisabled() ? "none" : null',
'[style]': 'style()'
}
}]
}] });
class BadgeModule {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: BadgeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.2", ngImport: i0, type: BadgeModule, imports: [Badge, BadgeDirective, SharedModule], exports: [Badge, BadgeDirective, SharedModule] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: BadgeModule, imports: [Badge, SharedModule, SharedModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: BadgeModule, decorators: [{
type: NgModule,
args: [{
imports: [Badge, BadgeDirective, SharedModule],
exports: [Badge, BadgeDirective, SharedModule]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { Badge, BadgeClasses, BadgeDirective, BadgeModule, BadgeStyle };
//# sourceMappingURL=primeng-badge.mjs.map