ng-devui
Version:
DevUI components based on Angular
99 lines (94 loc) • 13.4 kB
JavaScript
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { Component, ViewChild, Input, NgModule } from '@angular/core';
class BadgeComponent {
/**
* @deprecated
* 用position替代
*/
set badgePos(value) {
this.position = value;
}
/**
* @deprecated
* 用offset替代
*/
set offsetXY(value) {
this.offset = value;
}
hasContentProjection() {
const nodes = this.contentProjection?.nativeElement;
const contents = nodes.childNodes;
this.hasContent = contents.length ? true : false;
}
parseCountToNumber() {
if (typeof (this.count) === 'number') {
return this.count;
}
else {
const parseNumber = parseInt(this.count);
return isNaN(parseNumber) ? -1 : parseNumber;
}
}
constructor(cdr) {
this.cdr = cdr;
this.hasContent = true;
this.maxCount = 99;
this.showDot = false;
this.position = 'top-right';
}
ngAfterViewInit() {
this.hasContentProjection();
this.cdr.detectChanges();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BadgeComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: BadgeComponent, selector: "d-badge", inputs: { count: "count", maxCount: "maxCount", showDot: "showDot", status: "status", badgePos: "badgePos", position: "position", offsetXY: "offsetXY", offset: "offset", bgColor: "bgColor", textColor: "textColor" }, viewQueries: [{ propertyName: "contentProjection", first: true, predicate: ["contentProjection"], descendants: true }], ngImport: i0, template: "<span #contentProjection><ng-content></ng-content></span>\n<span\n *ngIf=\"!showDot && !hasContent\"\n class=\"devui-badge-count devui-badge-count-{{ status }}\"\n [style.background]=\"bgColor\"\n [style.color]=\"textColor\"\n>\n {{ count }}\n</span>\n<span *ngIf=\"showDot && !hasContent\" class=\"devui-badge-status devui-badge-status-{{ status }}\"></span>\n<span\n *ngIf=\"hasContent\"\n class=\"devui-badge-content devui-badge-content-{{ status }} devui-badge-content-{{ position }}\"\n [style.background]=\"bgColor\"\n [style.color]=\"textColor\"\n [style.right.px]=\"offset && offset[0] ? -offset[0] : null\"\n [style.top.px]=\"offset && offset[1] ? offset[1] : null\"\n [ngClass]=\"{ 'devui-badge-content-count': !showDot, 'devui-badge-content-dot': showDot }\"\n>\n <ng-container *ngIf=\"!showDot && parseCountToNumber() <= maxCount\">{{ count }}</ng-container>\n <ng-container *ngIf=\"!showDot && parseCountToNumber() > maxCount\">{{ maxCount }}+</ng-container>\n</span>\n", styles: [".devui-font-size-base{font-size:var(--devui-font-size, 12px)}.devui-font-base{font-size:var(--devui-font-size, 12px);font-weight:var(--devui-font-content-weight, normal);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-modal-title{font-size:var(--devui-font-size-modal-title, 18px)}.devui-font-modal-title{font-size:var(--devui-font-size-modal-title, 18px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-page-title{font-size:var(--devui-font-size-page-title, 16px)}.devui-font-page-title{font-size:var(--devui-font-size-page-title, 16px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-secondary-title{font-size:var(--devui-font-size-card-title, 14px)}.devui-font-secondary-title{font-size:var(--devui-font-size-card-title, 14px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}:host{position:relative;display:inline-block;line-height:1}.devui-badge-content{position:absolute}.devui-badge-content-count{background:var(--devui-brand, #0a59f7);color:var(--devui-light-text, #ffffff);min-width:16px;height:16px;font-size:var(--devui-font-size-sm, 12px);line-height:16px;text-align:center;padding:0 4px;border-radius:var(--devui-border-radius-full, 100px)}.devui-badge-content-dot{width:6px;height:6px;border-radius:100%;background:var(--devui-danger, #e02128)}.devui-badge-content-top-left{top:0;left:0;transform:translate(-50%,-50%)}.devui-badge-content-top-right{top:0;right:0;transform:translate(50%,-50%)}.devui-badge-content-bottom-left{bottom:0;left:0;transform:translate(-50%,50%)}.devui-badge-content-bottom-right{bottom:0;right:0;transform:translate(50%,50%)}.devui-badge-content-danger{background:var(--devui-danger, #e02128)}.devui-badge-content-warning{background:var(--devui-warning, #fcc800)}.devui-badge-content-waiting{background:var(--devui-waiting, #9dbdfc)}.devui-badge-content-success{background:var(--devui-success, #058358)}.devui-badge-content-info{background:var(--devui-info, #0a59f7)}.devui-badge-content-common{background:var(--devui-unavailable, #f3f3f3);color:var(--devui-aide-text, #595959)}.devui-badge-count{display:inline-block;position:relative;right:0;background:var(--devui-brand, #0a59f7);color:var(--devui-light-text, #ffffff);min-width:16px;height:16px;font-size:var(--devui-font-size-sm, 12px);line-height:16px;text-align:center;padding:0 4px;border-radius:var(--devui-border-radius-full, 100px)}.devui-badge-count-danger{background:var(--devui-danger, #e02128)}.devui-badge-count-warning{background:var(--devui-warning, #fcc800)}.devui-badge-count-waiting{background:var(--devui-waiting, #9dbdfc)}.devui-badge-count-success{background:var(--devui-success, #058358)}.devui-badge-count-info{background:var(--devui-info, #0a59f7)}.devui-badge-count-common{background:var(--devui-unavailable, #f3f3f3);color:var(--devui-aide-text, #595959)}.devui-badge-status{line-height:inherit;vertical-align:baseline;position:relative;top:-1px;display:inline-block;width:6px;height:6px;border-radius:100%}.devui-badge-status-danger{background:var(--devui-danger, #e02128)}.devui-badge-status-warning{background:var(--devui-warning, #fcc800)}.devui-badge-status-waiting{background:var(--devui-waiting, #9dbdfc)}.devui-badge-status-success{background:var(--devui-success, #058358)}.devui-badge-status-info{background:var(--devui-info, #0a59f7)}.devui-badge-status-common{background:var(--devui-unavailable, #f3f3f3);color:var(--devui-aide-text, #595959)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BadgeComponent, decorators: [{
type: Component,
args: [{ selector: 'd-badge', template: "<span #contentProjection><ng-content></ng-content></span>\n<span\n *ngIf=\"!showDot && !hasContent\"\n class=\"devui-badge-count devui-badge-count-{{ status }}\"\n [style.background]=\"bgColor\"\n [style.color]=\"textColor\"\n>\n {{ count }}\n</span>\n<span *ngIf=\"showDot && !hasContent\" class=\"devui-badge-status devui-badge-status-{{ status }}\"></span>\n<span\n *ngIf=\"hasContent\"\n class=\"devui-badge-content devui-badge-content-{{ status }} devui-badge-content-{{ position }}\"\n [style.background]=\"bgColor\"\n [style.color]=\"textColor\"\n [style.right.px]=\"offset && offset[0] ? -offset[0] : null\"\n [style.top.px]=\"offset && offset[1] ? offset[1] : null\"\n [ngClass]=\"{ 'devui-badge-content-count': !showDot, 'devui-badge-content-dot': showDot }\"\n>\n <ng-container *ngIf=\"!showDot && parseCountToNumber() <= maxCount\">{{ count }}</ng-container>\n <ng-container *ngIf=\"!showDot && parseCountToNumber() > maxCount\">{{ maxCount }}+</ng-container>\n</span>\n", styles: [".devui-font-size-base{font-size:var(--devui-font-size, 12px)}.devui-font-base{font-size:var(--devui-font-size, 12px);font-weight:var(--devui-font-content-weight, normal);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-modal-title{font-size:var(--devui-font-size-modal-title, 18px)}.devui-font-modal-title{font-size:var(--devui-font-size-modal-title, 18px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-page-title{font-size:var(--devui-font-size-page-title, 16px)}.devui-font-page-title{font-size:var(--devui-font-size-page-title, 16px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-secondary-title{font-size:var(--devui-font-size-card-title, 14px)}.devui-font-secondary-title{font-size:var(--devui-font-size-card-title, 14px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}:host{position:relative;display:inline-block;line-height:1}.devui-badge-content{position:absolute}.devui-badge-content-count{background:var(--devui-brand, #0a59f7);color:var(--devui-light-text, #ffffff);min-width:16px;height:16px;font-size:var(--devui-font-size-sm, 12px);line-height:16px;text-align:center;padding:0 4px;border-radius:var(--devui-border-radius-full, 100px)}.devui-badge-content-dot{width:6px;height:6px;border-radius:100%;background:var(--devui-danger, #e02128)}.devui-badge-content-top-left{top:0;left:0;transform:translate(-50%,-50%)}.devui-badge-content-top-right{top:0;right:0;transform:translate(50%,-50%)}.devui-badge-content-bottom-left{bottom:0;left:0;transform:translate(-50%,50%)}.devui-badge-content-bottom-right{bottom:0;right:0;transform:translate(50%,50%)}.devui-badge-content-danger{background:var(--devui-danger, #e02128)}.devui-badge-content-warning{background:var(--devui-warning, #fcc800)}.devui-badge-content-waiting{background:var(--devui-waiting, #9dbdfc)}.devui-badge-content-success{background:var(--devui-success, #058358)}.devui-badge-content-info{background:var(--devui-info, #0a59f7)}.devui-badge-content-common{background:var(--devui-unavailable, #f3f3f3);color:var(--devui-aide-text, #595959)}.devui-badge-count{display:inline-block;position:relative;right:0;background:var(--devui-brand, #0a59f7);color:var(--devui-light-text, #ffffff);min-width:16px;height:16px;font-size:var(--devui-font-size-sm, 12px);line-height:16px;text-align:center;padding:0 4px;border-radius:var(--devui-border-radius-full, 100px)}.devui-badge-count-danger{background:var(--devui-danger, #e02128)}.devui-badge-count-warning{background:var(--devui-warning, #fcc800)}.devui-badge-count-waiting{background:var(--devui-waiting, #9dbdfc)}.devui-badge-count-success{background:var(--devui-success, #058358)}.devui-badge-count-info{background:var(--devui-info, #0a59f7)}.devui-badge-count-common{background:var(--devui-unavailable, #f3f3f3);color:var(--devui-aide-text, #595959)}.devui-badge-status{line-height:inherit;vertical-align:baseline;position:relative;top:-1px;display:inline-block;width:6px;height:6px;border-radius:100%}.devui-badge-status-danger{background:var(--devui-danger, #e02128)}.devui-badge-status-warning{background:var(--devui-warning, #fcc800)}.devui-badge-status-waiting{background:var(--devui-waiting, #9dbdfc)}.devui-badge-status-success{background:var(--devui-success, #058358)}.devui-badge-status-info{background:var(--devui-info, #0a59f7)}.devui-badge-status-common{background:var(--devui-unavailable, #f3f3f3);color:var(--devui-aide-text, #595959)}\n"] }]
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { contentProjection: [{
type: ViewChild,
args: ['contentProjection']
}], count: [{
type: Input
}], maxCount: [{
type: Input
}], showDot: [{
type: Input
}], status: [{
type: Input
}], badgePos: [{
type: Input
}], position: [{
type: Input
}], offsetXY: [{
type: Input
}], offset: [{
type: Input
}], bgColor: [{
type: Input
}], textColor: [{
type: Input
}] } });
class BadgeModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BadgeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: BadgeModule, declarations: [BadgeComponent], imports: [CommonModule], exports: [BadgeComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BadgeModule, imports: [CommonModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BadgeModule, decorators: [{
type: NgModule,
args: [{
imports: [
CommonModule,
],
exports: [BadgeComponent],
declarations: [BadgeComponent]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { BadgeComponent, BadgeModule };
//# sourceMappingURL=ng-devui-badge.mjs.map