@engie-group/fluid-design-system-angular
Version:
Fluid Design System Angular
80 lines • 13.4 kB
JavaScript
import { CommonModule } from '@angular/common';
import { ChangeDetectionStrategy, Component, ContentChild, Input } from '@angular/core';
import { CustomIconDirective } from '../../directives/custom-icon.directive';
import { Utils } from '../../utils/utils.util';
import { IconComponent } from '../icon/icon.component';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
export class BadgeComponent {
constructor() {
this.badgeClassName = 'nj-badge';
}
isValueDefined() {
return !Utils.isUndefinedOrNull(this.value);
}
getFormattedValue() {
if (typeof this.value === 'string') {
return this.value;
}
let formattedValue = `${this.value}`;
if (!Utils.isUndefinedOrNull(this.capedValue) && this.value > this.capedValue) {
if (this.capedValue <= 0) {
formattedValue = '0+';
}
else {
formattedValue = `${this.capedValue}+`;
}
}
return formattedValue;
}
getBadgeEmphasisClass() {
if (!this.emphasis || this.emphasis === 'bold') {
return '';
}
return `${this.badgeClassName}--${this.emphasis}`;
}
getBadgeVariantClass() {
if (!this.variant || this.variant === 'neutral') {
return '';
}
return `${this.badgeClassName}--${this.variant}`;
}
getBadgeSizeClass() {
if (!this.size || this.size === 'md') {
return '';
}
return `${this.badgeClassName}--${this.size}`;
}
getBadgeUppercaseClass() {
if (!this.isUppercase) {
return '';
}
return `${this.badgeClassName}--uppercase`;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: BadgeComponent, isStandalone: true, selector: "nj-badge", inputs: { emphasis: "emphasis", variant: "variant", size: "size", iconName: "iconName", value: "value", capedValue: "capedValue", isUppercase: "isUppercase", unitLabel: "unitLabel" }, queries: [{ propertyName: "customIcon", first: true, predicate: CustomIconDirective, descendants: true }], ngImport: i0, template: "<p class=\"nj-badge\"\n [ngClass]=\"[getBadgeEmphasisClass(), getBadgeVariantClass(), getBadgeSizeClass(), getBadgeUppercaseClass()]\">\n <span class=\"nj-badge__icon\" *ngIf=\"customIcon?.templateRef || iconName\">\n <ng-container *ngIf=\"customIcon?.templateRef as iconTemplateRef; else icon\" [ngTemplateOutlet]=\"iconTemplateRef\"></ng-container>\n <ng-template #icon>\n <nj-icon [name]=\"iconName\" variant=\"inherit\" size=\"inherit\"></nj-icon>\n </ng-template>\n </span>\n <span>\n <ng-container *ngIf=\"!isValueDefined()\">\n <ng-content></ng-content>\n </ng-container>\n <ng-container *ngIf=\"isValueDefined()\">\n {{ getFormattedValue() }}\n </ng-container>\n </span>\n <span *ngIf=\"unitLabel\" class=\"nj-sr-only\">{{ unitLabel }}</span>\n</p>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "nj-icon", inputs: ["size", "variant"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BadgeComponent, decorators: [{
type: Component,
args: [{ selector: 'nj-badge', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, IconComponent], template: "<p class=\"nj-badge\"\n [ngClass]=\"[getBadgeEmphasisClass(), getBadgeVariantClass(), getBadgeSizeClass(), getBadgeUppercaseClass()]\">\n <span class=\"nj-badge__icon\" *ngIf=\"customIcon?.templateRef || iconName\">\n <ng-container *ngIf=\"customIcon?.templateRef as iconTemplateRef; else icon\" [ngTemplateOutlet]=\"iconTemplateRef\"></ng-container>\n <ng-template #icon>\n <nj-icon [name]=\"iconName\" variant=\"inherit\" size=\"inherit\"></nj-icon>\n </ng-template>\n </span>\n <span>\n <ng-container *ngIf=\"!isValueDefined()\">\n <ng-content></ng-content>\n </ng-container>\n <ng-container *ngIf=\"isValueDefined()\">\n {{ getFormattedValue() }}\n </ng-container>\n </span>\n <span *ngIf=\"unitLabel\" class=\"nj-sr-only\">{{ unitLabel }}</span>\n</p>\n" }]
}], propDecorators: { emphasis: [{
type: Input
}], variant: [{
type: Input
}], size: [{
type: Input
}], iconName: [{
type: Input
}], value: [{
type: Input
}], capedValue: [{
type: Input
}], isUppercase: [{
type: Input
}], unitLabel: [{
type: Input
}], customIcon: [{
type: ContentChild,
args: [CustomIconDirective]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYmFkZ2UuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvYmFkZ2UvYmFkZ2UuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvYmFkZ2UvYmFkZ2UuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUN4RixPQUFPLEVBQUUsbUJBQW1CLEVBQUUsTUFBTSx3Q0FBd0MsQ0FBQztBQUM3RSxPQUFPLEVBQUUsS0FBSyxFQUFFLE1BQU0sd0JBQXdCLENBQUM7QUFDL0MsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLHdCQUF3QixDQUFDOzs7QUFVdkQsTUFBTSxPQUFPLGNBQWM7SUFQM0I7UUFRVSxtQkFBYyxHQUFHLFVBQVUsQ0FBQztLQXNHckM7SUEvQ1csY0FBYztRQUN0QixPQUFPLENBQUMsS0FBSyxDQUFDLGlCQUFpQixDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUM5QyxDQUFDO0lBRVMsaUJBQWlCO1FBQ3pCLElBQUksT0FBTyxJQUFJLENBQUMsS0FBSyxLQUFLLFFBQVEsRUFBRTtZQUNsQyxPQUFPLElBQUksQ0FBQyxLQUFLLENBQUM7U0FDbkI7UUFFRCxJQUFJLGNBQWMsR0FBRyxHQUFHLElBQUksQ0FBQyxLQUFLLEVBQUUsQ0FBQztRQUNyQyxJQUFJLENBQUMsS0FBSyxDQUFDLGlCQUFpQixDQUFDLElBQUksQ0FBQyxVQUFVLENBQUMsSUFBSSxJQUFJLENBQUMsS0FBSyxHQUFHLElBQUksQ0FBQyxVQUFVLEVBQUU7WUFDN0UsSUFBSSxJQUFJLENBQUMsVUFBVSxJQUFJLENBQUMsRUFBRTtnQkFDeEIsY0FBYyxHQUFHLElBQUksQ0FBQzthQUN2QjtpQkFBTTtnQkFDTCxjQUFjLEdBQUcsR0FBRyxJQUFJLENBQUMsVUFBVSxHQUFHLENBQUM7YUFDeEM7U0FDRjtRQUNELE9BQU8sY0FBYyxDQUFDO0lBQ3hCLENBQUM7SUFFUyxxQkFBcUI7UUFDN0IsSUFBSSxDQUFDLElBQUksQ0FBQyxRQUFRLElBQUksSUFBSSxDQUFDLFFBQVEsS0FBSyxNQUFNLEVBQUU7WUFDOUMsT0FBTyxFQUFFLENBQUM7U0FDWDtRQUNELE9BQU8sR0FBRyxJQUFJLENBQUMsY0FBYyxLQUFLLElBQUksQ0FBQyxRQUFRLEVBQUUsQ0FBQztJQUNwRCxDQUFDO0lBRVMsb0JBQW9CO1FBQzVCLElBQUksQ0FBQyxJQUFJLENBQUMsT0FBTyxJQUFJLElBQUksQ0FBQyxPQUFPLEtBQUssU0FBUyxFQUFFO1lBQy9DLE9BQU8sRUFBRSxDQUFDO1NBQ1g7UUFDRCxPQUFPLEdBQUcsSUFBSSxDQUFDLGNBQWMsS0FBSyxJQUFJLENBQUMsT0FBTyxFQUFFLENBQUM7SUFDbkQsQ0FBQztJQUVTLGlCQUFpQjtRQUN6QixJQUFJLENBQUMsSUFBSSxDQUFDLElBQUksSUFBSSxJQUFJLENBQUMsSUFBSSxLQUFLLElBQUksRUFBRTtZQUNwQyxPQUFPLEVBQUUsQ0FBQztTQUNYO1FBQ0QsT0FBTyxHQUFHLElBQUksQ0FBQyxjQUFjLEtBQUssSUFBSSxDQUFDLElBQUksRUFBRSxDQUFDO0lBQ2hELENBQUM7SUFFUyxzQkFBc0I7UUFDOUIsSUFBSSxDQUFDLElBQUksQ0FBQyxXQUFXLEVBQUU7WUFDckIsT0FBTyxFQUFFLENBQUM7U0FDWDtRQUNELE9BQU8sR0FBRyxJQUFJLENBQUMsY0FBYyxhQUFhLENBQUM7SUFDN0MsQ0FBQzsrR0F0R1UsY0FBYzttR0FBZCxjQUFjLG9TQXNEWCxtQkFBbUIsZ0RDcEVuQyxpekJBa0JBLDJDRE5ZLFlBQVksd1lBQUUsYUFBYTs7NEZBRTFCLGNBQWM7a0JBUDFCLFNBQVM7K0JBQ0UsVUFBVSxtQkFFSCx1QkFBdUIsQ0FBQyxNQUFNLGNBQ25DLElBQUksV0FDUCxDQUFDLFlBQVksRUFBRSxhQUFhLENBQUM7OEJBVTdCLFFBQVE7c0JBQWhCLEtBQUs7Z0JBT0csT0FBTztzQkFBZixLQUFLO2dCQU9HLElBQUk7c0JBQVosS0FBSztnQkFLRyxRQUFRO3NCQUFoQixLQUFLO2dCQU1HLEtBQUs7c0JBQWIsS0FBSztnQkFLRyxVQUFVO3NCQUFsQixLQUFLO2dCQUtHLFdBQVc7c0JBQW5CLEtBQUs7Z0JBU0csU0FBUztzQkFBakIsS0FBSztnQkFFdUMsVUFBVTtzQkFBdEQsWUFBWTt1QkFBQyxtQkFBbUIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHsgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENvbXBvbmVudCwgQ29udGVudENoaWxkLCBJbnB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQ3VzdG9tSWNvbkRpcmVjdGl2ZSB9IGZyb20gJy4uLy4uL2RpcmVjdGl2ZXMvY3VzdG9tLWljb24uZGlyZWN0aXZlJztcbmltcG9ydCB7IFV0aWxzIH0gZnJvbSAnLi4vLi4vdXRpbHMvdXRpbHMudXRpbCc7XG5pbXBvcnQgeyBJY29uQ29tcG9uZW50IH0gZnJvbSAnLi4vaWNvbi9pY29uLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBCYWRnZUVtcGhhc2lzLCBCYWRnZVNpemUsIEJhZGdlVmFyaWFudCB9IGZyb20gJy4vYmFkZ2UubW9kZWwnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICduai1iYWRnZScsXG4gIHRlbXBsYXRlVXJsOiAnLi9iYWRnZS5jb21wb25lbnQuaHRtbCcsXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbQ29tbW9uTW9kdWxlLCBJY29uQ29tcG9uZW50XVxufSlcbmV4cG9ydCBjbGFzcyBCYWRnZUNvbXBvbmVudCB7XG4gIHByaXZhdGUgYmFkZ2VDbGFzc05hbWUgPSAnbmotYmFkZ2UnO1xuXG4gIC8qKlxuICAgKiBCYWRnZSBlbXBoYXNpc1xuICAgKlxuICAgKiBAZGVmYXVsdCBgYm9sZGBcbiAgICovXG4gIEBJbnB1dCgpIGVtcGhhc2lzPzogQmFkZ2VFbXBoYXNpcztcblxuICAvKipcbiAgICogQmFkZ2UgdmFyaWFudFxuICAgKlxuICAgKiBAZGVmYXVsdCBgbmV1dHJhbGBcbiAgICovXG4gIEBJbnB1dCgpIHZhcmlhbnQ/OiBCYWRnZVZhcmlhbnQ7XG5cbiAgLyoqXG4gICAqIEJhZGdlIHNpemVcbiAgICpcbiAgICogQGRlZmF1bHQgYG1kYFxuICAgKi9cbiAgQElucHV0KCkgc2l6ZT86IEJhZGdlU2l6ZTtcblxuICAvKipcbiAgICogTWF0ZXJpYWwgaWNvbiBuYW1lXG4gICAqL1xuICBASW5wdXQoKSBpY29uTmFtZT86IHN0cmluZztcblxuICAvKipcbiAgICogQmFkZ2UgdmFsdWVcbiAgICogKHdoZW4gdmFsdWUgaXMgYSBzdHJpbmcsIHlvdSBjYW4gcGFzcyBpdCBkaXJlY3RseSBhcyBuZy1jb250ZW50KVxuICAgKi9cbiAgQElucHV0KCkgdmFsdWU/OiBzdHJpbmcgfCBudW1iZXI7XG5cbiAgLyoqXG4gICAqIFdoZW4gdmFsdWUgaXMgYSBudW1iZXIsIHlvdSBjYW4gcGFzcyBhIGNhcGVkVmFsdWUsIHNvIHRoZSBkaXNwbGF5ZWQgdmFsdWUgd2lsbCBiZSBgJHtjYXBlZFZhbHVlfStgXG4gICAqL1xuICBASW5wdXQoKSBjYXBlZFZhbHVlPzogbnVtYmVyO1xuXG4gIC8qKlxuICAgKiBCYWRnZSB2YWx1ZVxuICAgKi9cbiAgQElucHV0KCkgaXNVcHBlcmNhc2U/OiBib29sZWFuO1xuXG4gIC8qKlxuICAgKiBTY3JlZW4gcmVhZGVyIG9ubHkgdW5pdCBsYWJlbC5cbiAgICpcbiAgICogQGV4YW1wbGVcbiAgICogLy8gcmVhZCBhcyBcIjEyIG5vdGlmaWNhdGlvbnNcIlxuICAgKiA8bmotYmFkZ2UgdW5pdExhYmVsPVwibm90aWZpY2F0aW9uc1wiPjEyPC9OSkJhZGdlPlxuICAgKi9cbiAgQElucHV0KCkgdW5pdExhYmVsPzogc3RyaW5nO1xuXG4gIEBDb250ZW50Q2hpbGQoQ3VzdG9tSWNvbkRpcmVjdGl2ZSkgcHJvdGVjdGVkIGN1c3RvbUljb24/OiBDdXN0b21JY29uRGlyZWN0aXZlO1xuXG4gIHByb3RlY3RlZCBpc1ZhbHVlRGVmaW5lZCgpOiBib29sZWFuIHtcbiAgICByZXR1cm4gIVV0aWxzLmlzVW5kZWZpbmVkT3JOdWxsKHRoaXMudmFsdWUpO1xuICB9XG5cbiAgcHJvdGVjdGVkIGdldEZvcm1hdHRlZFZhbHVlKCk6IHN0cmluZyB7XG4gICAgaWYgKHR5cGVvZiB0aGlzLnZhbHVlID09PSAnc3RyaW5nJykge1xuICAgICAgcmV0dXJuIHRoaXMudmFsdWU7XG4gICAgfVxuXG4gICAgbGV0IGZvcm1hdHRlZFZhbHVlID0gYCR7dGhpcy52YWx1ZX1gO1xuICAgIGlmICghVXRpbHMuaXNVbmRlZmluZWRPck51bGwodGhpcy5jYXBlZFZhbHVlKSAmJiB0aGlzLnZhbHVlID4gdGhpcy5jYXBlZFZhbHVlKSB7XG4gICAgICBpZiAodGhpcy5jYXBlZFZhbHVlIDw9IDApIHtcbiAgICAgICAgZm9ybWF0dGVkVmFsdWUgPSAnMCsnO1xuICAgICAgfSBlbHNlIHtcbiAgICAgICAgZm9ybWF0dGVkVmFsdWUgPSBgJHt0aGlzLmNhcGVkVmFsdWV9K2A7XG4gICAgICB9XG4gICAgfVxuICAgIHJldHVybiBmb3JtYXR0ZWRWYWx1ZTtcbiAgfVxuXG4gIHByb3RlY3RlZCBnZXRCYWRnZUVtcGhhc2lzQ2xhc3MoKTogc3RyaW5nIHtcbiAgICBpZiAoIXRoaXMuZW1waGFzaXMgfHwgdGhpcy5lbXBoYXNpcyA9PT0gJ2JvbGQnKSB7XG4gICAgICByZXR1cm4gJyc7XG4gICAgfVxuICAgIHJldHVybiBgJHt0aGlzLmJhZGdlQ2xhc3NOYW1lfS0tJHt0aGlzLmVtcGhhc2lzfWA7XG4gIH1cblxuICBwcm90ZWN0ZWQgZ2V0QmFkZ2VWYXJpYW50Q2xhc3MoKTogc3RyaW5nIHtcbiAgICBpZiAoIXRoaXMudmFyaWFudCB8fCB0aGlzLnZhcmlhbnQgPT09ICduZXV0cmFsJykge1xuICAgICAgcmV0dXJuICcnO1xuICAgIH1cbiAgICByZXR1cm4gYCR7dGhpcy5iYWRnZUNsYXNzTmFtZX0tLSR7dGhpcy52YXJpYW50fWA7XG4gIH1cblxuICBwcm90ZWN0ZWQgZ2V0QmFkZ2VTaXplQ2xhc3MoKTogc3RyaW5nIHtcbiAgICBpZiAoIXRoaXMuc2l6ZSB8fCB0aGlzLnNpemUgPT09ICdtZCcpIHtcbiAgICAgIHJldHVybiAnJztcbiAgICB9XG4gICAgcmV0dXJuIGAke3RoaXMuYmFkZ2VDbGFzc05hbWV9LS0ke3RoaXMuc2l6ZX1gO1xuICB9XG5cbiAgcHJvdGVjdGVkIGdldEJhZGdlVXBwZXJjYXNlQ2xhc3MoKTogc3RyaW5nIHtcbiAgICBpZiAoIXRoaXMuaXNVcHBlcmNhc2UpIHtcbiAgICAgIHJldHVybiAnJztcbiAgICB9XG4gICAgcmV0dXJuIGAke3RoaXMuYmFkZ2VDbGFzc05hbWV9LS11cHBlcmNhc2VgO1xuICB9XG59XG4iLCI8cCBjbGFzcz1cIm5qLWJhZGdlXCJcbiAgIFtuZ0NsYXNzXT1cIltnZXRCYWRnZUVtcGhhc2lzQ2xhc3MoKSwgZ2V0QmFkZ2VWYXJpYW50Q2xhc3MoKSwgZ2V0QmFkZ2VTaXplQ2xhc3MoKSwgZ2V0QmFkZ2VVcHBlcmNhc2VDbGFzcygpXVwiPlxuICA8c3BhbiBjbGFzcz1cIm5qLWJhZGdlX19pY29uXCIgKm5nSWY9XCJjdXN0b21JY29uPy50ZW1wbGF0ZVJlZiB8fCBpY29uTmFtZVwiPlxuICAgIDxuZy1jb250YWluZXIgKm5nSWY9XCJjdXN0b21JY29uPy50ZW1wbGF0ZVJlZiBhcyBpY29uVGVtcGxhdGVSZWY7IGVsc2UgaWNvblwiIFtuZ1RlbXBsYXRlT3V0bGV0XT1cImljb25UZW1wbGF0ZVJlZlwiPjwvbmctY29udGFpbmVyPlxuICAgIDxuZy10ZW1wbGF0ZSAjaWNvbj5cbiAgICAgIDxuai1pY29uIFtuYW1lXT1cImljb25OYW1lXCIgdmFyaWFudD1cImluaGVyaXRcIiBzaXplPVwiaW5oZXJpdFwiPjwvbmotaWNvbj5cbiAgICA8L25nLXRlbXBsYXRlPlxuICA8L3NwYW4+XG4gIDxzcGFuPlxuICAgICAgPG5nLWNvbnRhaW5lciAqbmdJZj1cIiFpc1ZhbHVlRGVmaW5lZCgpXCI+XG4gICAgICAgIDxuZy1jb250ZW50PjwvbmctY29udGVudD5cbiAgICAgIDwvbmctY29udGFpbmVyPlxuICAgICAgPG5nLWNvbnRhaW5lciAqbmdJZj1cImlzVmFsdWVEZWZpbmVkKClcIj5cbiAgICAgICAge3sgZ2V0Rm9ybWF0dGVkVmFsdWUoKSB9fVxuICAgICAgPC9uZy1jb250YWluZXI+XG4gICAgPC9zcGFuPlxuICA8c3BhbiAqbmdJZj1cInVuaXRMYWJlbFwiIGNsYXNzPVwibmotc3Itb25seVwiPnt7IHVuaXRMYWJlbCB9fTwvc3Bhbj5cbjwvcD5cbiJdfQ==