@tapsellorg/angular-material-library
Version:
Angular library for Tapsell
85 lines (79 loc) • 8.9 kB
JavaScript
import * as i0 from '@angular/core';
import { InjectionToken, input, Inject, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import * as i1 from '@angular/material/icon';
import { MatIconModule } from '@angular/material/icon';
const PGH_STATUS_CONFIG = new InjectionToken('pghStatusLabelConfig', {
providedIn: 'root',
factory: () => ({}),
});
class PghStatusLabelComponent {
constructor(statusConfig) {
this.statusConfig = statusConfig;
this.TYPE_CSS_CLASS = {
success: { colorCode: 'success', iconName: 'done' },
primary: { colorCode: 'primary' },
accent: { colorCode: 'accent' },
warning: { colorCode: 'warning', iconName: 'report_problem' },
danger: { colorCode: 'danger', iconName: 'close' },
info: { colorCode: 'info', iconName: 'info' },
};
this.type = input('primary');
this.label = input(undefined);
this.showIcon = input(this.statusConfig.showIcon ?? true);
this.typeMapping = input(undefined);
this.styleMode = input(this.statusConfig.styleMode ?? 'stroked');
this.labelSize = input(this.statusConfig.labelSize ?? 'medium');
this.updateAdditionalTypeDefinitions();
this.mapTypeMappingsToTypeDefinitions();
}
updateAdditionalTypeDefinitions() {
this.TYPE_CSS_CLASS = { ...this.TYPE_CSS_CLASS, ...this.statusConfig.additionalTypes };
}
get typeConfig() {
return this.TYPE_CSS_CLASS[this.type()] || { colorCode: this.type() };
}
mapTypeMappingsToTypeDefinitions(typeMapping = this.statusConfig.typesMapping) {
if (!typeMapping)
return;
this.TYPE_CSS_CLASS = {
...this.TYPE_CSS_CLASS,
...Object.keys(typeMapping).reduce((res, existingType) => ({ ...res, ...this.enrichMappingsOf(typeMapping, existingType) }), {}),
};
}
enrichMappingsOf(typeMapping, type) {
return (typeMapping[type] || []).reduce((res, typeEquivalent) => ({ ...res, [typeEquivalent]: this.TYPE_CSS_CLASS[type] }), {});
}
ngOnChanges(changes) {
if (changes.typeMapping) {
this.mapTypeMappingsToTypeDefinitions(this.typeMapping());
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: PghStatusLabelComponent, deps: [{ token: PGH_STATUS_CONFIG }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.13", type: PghStatusLabelComponent, isStandalone: false, selector: "pgh-status-label", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, typeMapping: { classPropertyName: "typeMapping", publicName: "typeMapping", isSignal: true, isRequired: false, transformFunction: null }, styleMode: { classPropertyName: "styleMode", publicName: "styleMode", isSignal: true, isRequired: false, transformFunction: null }, labelSize: { classPropertyName: "labelSize", publicName: "labelSize", isSignal: true, isRequired: false, transformFunction: null } }, usesOnChanges: true, ngImport: i0, template: "<span\n [class]=\"\n 'pgh-status-label text-truncate' +\n (' pgh-status-label-' + styleMode()) +\n (' pgh-status-label-' + labelSize())\n \"\n [style.--pgh-status-label-color-code]=\"'var(--' + typeConfig.colorCode + ')'\"\n [style.--pgh-status-label-color-code-dark]=\"'var(--' + typeConfig.colorCode + '-700)'\"\n [style.--pgh-status-label-color-code-light]=\"'var(--' + typeConfig.colorCode + '-50)'\"\n>\n @if (typeConfig.iconName && showIcon()) {\n <mat-icon class=\"pgh-status-label-icon\" [svgIcon]=\"typeConfig.iconName || ''\"></mat-icon>\n }\n {{ label() }}\n <ng-content></ng-content>\n</span>\n", styles: [".pgh-status-label{display:inline-block;margin:.125rem;vertical-align:middle;max-width:100%}.pgh-status-label-icon{width:1rem;margin-inline-start:-.125rem;vertical-align:middle}.pgh-status-label-mini{border-radius:var(--box-radius);font-size:.75rem;padding-block:0;padding-inline:.25rem;height:1.6rem;line-height:1.5rem;max-width:140px}.pgh-status-label-medium{font-size:1rem;border-radius:50px;padding-block:.125rem;padding-inline:.75rem;height:1.9rem;line-height:1.7rem}.pgh-status-label-large{font-size:1.125rem;border-radius:50px;padding-block:.25rem;padding-inline:.75rem;height:2.1rem;line-height:1.6rem}.pgh-status-label-large .pgh-status-label-icon{width:1.25rem}.pgh-status-label-stroked{border:1px solid;border-color:var(--pgh-status-label-color-code);color:var(--pgh-status-label-color-code-dark);background:var(--pgh-status-label-color-code-light)}.pgh-status-label-filled{color:var(--fff)!important;background:var(--pgh-status-label-color-code);box-shadow:inset 0 0 0 2px var(--pgh-status-label-color-code-dark);text-shadow:0 1px 2px rgba(0,0,0,.4)}\n"], dependencies: [{ kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: PghStatusLabelComponent, decorators: [{
type: Component,
args: [{ selector: 'pgh-status-label', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<span\n [class]=\"\n 'pgh-status-label text-truncate' +\n (' pgh-status-label-' + styleMode()) +\n (' pgh-status-label-' + labelSize())\n \"\n [style.--pgh-status-label-color-code]=\"'var(--' + typeConfig.colorCode + ')'\"\n [style.--pgh-status-label-color-code-dark]=\"'var(--' + typeConfig.colorCode + '-700)'\"\n [style.--pgh-status-label-color-code-light]=\"'var(--' + typeConfig.colorCode + '-50)'\"\n>\n @if (typeConfig.iconName && showIcon()) {\n <mat-icon class=\"pgh-status-label-icon\" [svgIcon]=\"typeConfig.iconName || ''\"></mat-icon>\n }\n {{ label() }}\n <ng-content></ng-content>\n</span>\n", styles: [".pgh-status-label{display:inline-block;margin:.125rem;vertical-align:middle;max-width:100%}.pgh-status-label-icon{width:1rem;margin-inline-start:-.125rem;vertical-align:middle}.pgh-status-label-mini{border-radius:var(--box-radius);font-size:.75rem;padding-block:0;padding-inline:.25rem;height:1.6rem;line-height:1.5rem;max-width:140px}.pgh-status-label-medium{font-size:1rem;border-radius:50px;padding-block:.125rem;padding-inline:.75rem;height:1.9rem;line-height:1.7rem}.pgh-status-label-large{font-size:1.125rem;border-radius:50px;padding-block:.25rem;padding-inline:.75rem;height:2.1rem;line-height:1.6rem}.pgh-status-label-large .pgh-status-label-icon{width:1.25rem}.pgh-status-label-stroked{border:1px solid;border-color:var(--pgh-status-label-color-code);color:var(--pgh-status-label-color-code-dark);background:var(--pgh-status-label-color-code-light)}.pgh-status-label-filled{color:var(--fff)!important;background:var(--pgh-status-label-color-code);box-shadow:inset 0 0 0 2px var(--pgh-status-label-color-code-dark);text-shadow:0 1px 2px rgba(0,0,0,.4)}\n"] }]
}], ctorParameters: () => [{ type: undefined, decorators: [{
type: Inject,
args: [PGH_STATUS_CONFIG]
}] }] });
class PghStatusLabelModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: PghStatusLabelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.13", ngImport: i0, type: PghStatusLabelModule, declarations: [PghStatusLabelComponent], imports: [CommonModule, MatIconModule], exports: [PghStatusLabelComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: PghStatusLabelModule, imports: [CommonModule, MatIconModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: PghStatusLabelModule, decorators: [{
type: NgModule,
args: [{
declarations: [PghStatusLabelComponent],
exports: [PghStatusLabelComponent],
imports: [CommonModule, MatIconModule],
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { PGH_STATUS_CONFIG, PghStatusLabelComponent, PghStatusLabelModule };
//# sourceMappingURL=tapsellorg-angular-material-library-src-lib-status-label.mjs.map