628 lines
27 KiB
JavaScript
628 lines
27 KiB
JavaScript
import { NgIf, NgStyle, NgSwitch, NgSwitchCase, NgSwitchDefault } from "@angular/common";
|
|
import { ChangeDetectionStrategy, Component, Directive, EventEmitter, inject, Input, NgModule, Output, } from "@angular/core";
|
|
import { NzTypographyComponent, NzTypographyModule } from "ng-zorro-antd/typography";
|
|
import { tachTypographyClassList, tachTypographyClassName, tachTypographyEllipsisStyle, tachTypographyMarkdownToHtml, } from "../core";
|
|
import * as i0 from "@angular/core";
|
|
import * as i1 from "ng-zorro-antd/typography";
|
|
const camelToKebab = (value) => value.replace(/[A-Z]/g, match => `-${match.toLowerCase()}`);
|
|
const toCssProperty = (styleKey) => {
|
|
if (styleKey.startsWith("Webkit")) {
|
|
return `-webkit-${camelToKebab(styleKey.slice(6))}`;
|
|
}
|
|
return camelToKebab(styleKey);
|
|
};
|
|
export const tachAngularTypographyClassName = (options = {}) => {
|
|
return tachTypographyClassName(options);
|
|
};
|
|
export const tachAngularTypographyClassList = (options = {}) => {
|
|
return tachTypographyClassList(options);
|
|
};
|
|
export const tachAngularTypographyStyles = (ellipsis, preserveStyle = {}) => {
|
|
const ellipsisStyle = tachTypographyEllipsisStyle(ellipsis);
|
|
if (!ellipsisStyle) {
|
|
return preserveStyle;
|
|
}
|
|
return {
|
|
...ellipsisStyle,
|
|
...preserveStyle,
|
|
};
|
|
};
|
|
export class TachTypographyDirective {
|
|
elementRef;
|
|
renderer;
|
|
tachTypography;
|
|
tachTypographyVariant = "Body";
|
|
tachTypographyColor = "primary";
|
|
tachTypographyWeight = "normal";
|
|
tachTypographyClickable = false;
|
|
tachTypographyClassName;
|
|
tachTypographyEllipsis;
|
|
appliedClasses = new Set();
|
|
appliedStyleProperties = new Set();
|
|
constructor(elementRef, renderer) {
|
|
this.elementRef = elementRef;
|
|
this.renderer = renderer;
|
|
}
|
|
ngOnChanges(_changes) {
|
|
this.syncClasses();
|
|
this.syncEllipsisStyles();
|
|
}
|
|
syncClasses() {
|
|
const nextClassList = tachTypographyClassList({
|
|
variant: this.tachTypography || this.tachTypographyVariant,
|
|
color: this.tachTypographyColor,
|
|
weight: this.tachTypographyWeight,
|
|
clickable: this.tachTypographyClickable,
|
|
className: this.tachTypographyClassName,
|
|
});
|
|
const nextSet = new Set(nextClassList);
|
|
for (const className of this.appliedClasses) {
|
|
if (!nextSet.has(className)) {
|
|
this.renderer.removeClass(this.elementRef.nativeElement, className);
|
|
}
|
|
}
|
|
for (const className of nextSet) {
|
|
this.renderer.addClass(this.elementRef.nativeElement, className);
|
|
}
|
|
this.appliedClasses.clear();
|
|
for (const className of nextSet) {
|
|
this.appliedClasses.add(className);
|
|
}
|
|
}
|
|
syncEllipsisStyles() {
|
|
const nextStyles = tachTypographyEllipsisStyle(this.tachTypographyEllipsis) || {};
|
|
const nextStyleKeys = new Set(Object.keys(nextStyles));
|
|
for (const styleKey of this.appliedStyleProperties) {
|
|
if (!nextStyleKeys.has(styleKey)) {
|
|
this.renderer.removeStyle(this.elementRef.nativeElement, toCssProperty(styleKey));
|
|
}
|
|
}
|
|
for (const [styleKey, styleValue] of Object.entries(nextStyles)) {
|
|
this.renderer.setStyle(this.elementRef.nativeElement, toCssProperty(styleKey), styleValue);
|
|
}
|
|
this.appliedStyleProperties.clear();
|
|
for (const styleKey of nextStyleKeys) {
|
|
this.appliedStyleProperties.add(styleKey);
|
|
}
|
|
}
|
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: TachTypographyDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
|
|
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: TachTypographyDirective, isStandalone: true, selector: "[tachTypography]", inputs: { tachTypography: "tachTypography", tachTypographyVariant: "tachTypographyVariant", tachTypographyColor: "tachTypographyColor", tachTypographyWeight: "tachTypographyWeight", tachTypographyClickable: "tachTypographyClickable", tachTypographyClassName: "tachTypographyClassName", tachTypographyEllipsis: "tachTypographyEllipsis" }, usesOnChanges: true, ngImport: i0 });
|
|
}
|
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: TachTypographyDirective, decorators: [{
|
|
type: Directive,
|
|
args: [{
|
|
selector: "[tachTypography]",
|
|
standalone: true,
|
|
}]
|
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { tachTypography: [{
|
|
type: Input
|
|
}], tachTypographyVariant: [{
|
|
type: Input
|
|
}], tachTypographyColor: [{
|
|
type: Input
|
|
}], tachTypographyWeight: [{
|
|
type: Input
|
|
}], tachTypographyClickable: [{
|
|
type: Input
|
|
}], tachTypographyClassName: [{
|
|
type: Input
|
|
}], tachTypographyEllipsis: [{
|
|
type: Input
|
|
}] } });
|
|
export class TachTypographyNzPropsDirective {
|
|
tachTypographyNzProps;
|
|
appliedNzKeys = new Set();
|
|
nzTypography = inject(NzTypographyComponent, { self: true, optional: true });
|
|
ngOnChanges() {
|
|
if (!this.nzTypography) {
|
|
return;
|
|
}
|
|
const nzTypography = this.nzTypography;
|
|
const nextProps = this.tachTypographyNzProps ?? {};
|
|
const nextKeys = new Set();
|
|
for (const [key, value] of Object.entries(nextProps)) {
|
|
if (!key.startsWith("nz")) {
|
|
continue;
|
|
}
|
|
nzTypography[key] = value;
|
|
nextKeys.add(key);
|
|
}
|
|
for (const key of this.appliedNzKeys) {
|
|
if (!nextKeys.has(key)) {
|
|
nzTypography[key] = undefined;
|
|
}
|
|
}
|
|
this.appliedNzKeys.clear();
|
|
for (const key of nextKeys) {
|
|
this.appliedNzKeys.add(key);
|
|
}
|
|
}
|
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: TachTypographyNzPropsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: TachTypographyNzPropsDirective, isStandalone: true, selector: "[tachTypographyNzProps]", inputs: { tachTypographyNzProps: "tachTypographyNzProps" }, usesOnChanges: true, ngImport: i0 });
|
|
}
|
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: TachTypographyNzPropsDirective, decorators: [{
|
|
type: Directive,
|
|
args: [{
|
|
selector: "[tachTypographyNzProps]",
|
|
standalone: true,
|
|
}]
|
|
}], propDecorators: { tachTypographyNzProps: [{
|
|
type: Input
|
|
}] } });
|
|
export class TachTypographyHostPropsDirective {
|
|
elementRef;
|
|
renderer;
|
|
tachTypographyHostProps;
|
|
appliedHostProps = new Map();
|
|
constructor(elementRef, renderer) {
|
|
this.elementRef = elementRef;
|
|
this.renderer = renderer;
|
|
}
|
|
ngOnChanges() {
|
|
const nextProps = this.tachTypographyHostProps ?? {};
|
|
const nextAppliedProps = new Map();
|
|
for (const [key, value] of Object.entries(nextProps)) {
|
|
if (key === "class" || key === "className" || key === "style") {
|
|
continue;
|
|
}
|
|
if (value === undefined || value === null) {
|
|
continue;
|
|
}
|
|
const applyAsAttr = this.shouldApplyAsAttribute(key, value);
|
|
if (applyAsAttr) {
|
|
if (typeof value === "boolean") {
|
|
if (value) {
|
|
this.renderer.setAttribute(this.elementRef.nativeElement, key, "");
|
|
}
|
|
else {
|
|
this.renderer.removeAttribute(this.elementRef.nativeElement, key);
|
|
}
|
|
}
|
|
else {
|
|
this.renderer.setAttribute(this.elementRef.nativeElement, key, String(value));
|
|
}
|
|
nextAppliedProps.set(key, "attr");
|
|
continue;
|
|
}
|
|
this.renderer.setProperty(this.elementRef.nativeElement, key, value);
|
|
nextAppliedProps.set(key, "prop");
|
|
}
|
|
for (const [key, kind] of this.appliedHostProps.entries()) {
|
|
if (nextAppliedProps.has(key)) {
|
|
continue;
|
|
}
|
|
if (kind === "attr") {
|
|
this.renderer.removeAttribute(this.elementRef.nativeElement, key);
|
|
}
|
|
else {
|
|
this.renderer.setProperty(this.elementRef.nativeElement, key, undefined);
|
|
}
|
|
}
|
|
this.appliedHostProps.clear();
|
|
for (const [key, kind] of nextAppliedProps.entries()) {
|
|
this.appliedHostProps.set(key, kind);
|
|
}
|
|
}
|
|
shouldApplyAsAttribute(key, value) {
|
|
if (key.startsWith("data-") || key.startsWith("aria-")) {
|
|
return true;
|
|
}
|
|
if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") {
|
|
return !this.hasPropertyOnElement(key);
|
|
}
|
|
return false;
|
|
}
|
|
hasPropertyOnElement(key) {
|
|
return key in this.elementRef.nativeElement;
|
|
}
|
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: TachTypographyHostPropsDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
|
|
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: TachTypographyHostPropsDirective, isStandalone: true, selector: "[tachTypographyHostProps]", inputs: { tachTypographyHostProps: "tachTypographyHostProps" }, usesOnChanges: true, ngImport: i0 });
|
|
}
|
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: TachTypographyHostPropsDirective, decorators: [{
|
|
type: Directive,
|
|
args: [{
|
|
selector: "[tachTypographyHostProps]",
|
|
standalone: true,
|
|
}]
|
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { tachTypographyHostProps: [{
|
|
type: Input
|
|
}] } });
|
|
export class TachTypographyComponent {
|
|
hostTag = "span";
|
|
variant = "Body";
|
|
color = "primary";
|
|
weight = "normal";
|
|
clickable = false;
|
|
markdownEnabled = false;
|
|
markdown;
|
|
className;
|
|
ellipsis;
|
|
nzProps;
|
|
hostProps;
|
|
preserveStyle;
|
|
tachClick = new EventEmitter();
|
|
renderedMarkdown = "";
|
|
ngOnChanges(_changes) {
|
|
this.renderedMarkdown = this.markdownEnabled
|
|
? tachTypographyMarkdownToHtml(this.markdown ?? "")
|
|
: "";
|
|
}
|
|
handleClick(event) {
|
|
this.tachClick.emit(event);
|
|
}
|
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: TachTypographyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: TachTypographyComponent, isStandalone: true, selector: "tach-typography", inputs: { hostTag: ["as", "hostTag"], variant: "variant", color: "color", weight: "weight", clickable: "clickable", markdownEnabled: "markdownEnabled", markdown: "markdown", className: "className", ellipsis: "ellipsis", nzProps: "nzProps", hostProps: "hostProps", preserveStyle: "preserveStyle" }, outputs: { tachClick: "tachClick" }, usesOnChanges: true, ngImport: i0, template: `
|
|
<ng-container [ngSwitch]="hostTag">
|
|
<p
|
|
*ngSwitchCase="'p'"
|
|
nz-typography
|
|
[tachTypography]="variant"
|
|
[tachTypographyColor]="color"
|
|
[tachTypographyWeight]="weight"
|
|
[tachTypographyClickable]="clickable"
|
|
[tachTypographyClassName]="className"
|
|
[tachTypographyEllipsis]="ellipsis"
|
|
[tachTypographyNzProps]="nzProps"
|
|
[tachTypographyHostProps]="hostProps"
|
|
[ngStyle]="preserveStyle"
|
|
(click)="handleClick($event)"
|
|
>
|
|
<ng-container *ngIf="markdownEnabled; else tachTypographyContentP">
|
|
<span [innerHTML]="renderedMarkdown"></span>
|
|
</ng-container>
|
|
<ng-template #tachTypographyContentP>
|
|
<ng-content />
|
|
</ng-template>
|
|
</p>
|
|
<a
|
|
*ngSwitchCase="'a'"
|
|
nz-typography
|
|
[tachTypography]="variant"
|
|
[tachTypographyColor]="color"
|
|
[tachTypographyWeight]="weight"
|
|
[tachTypographyClickable]="clickable"
|
|
[tachTypographyClassName]="className"
|
|
[tachTypographyEllipsis]="ellipsis"
|
|
[tachTypographyNzProps]="nzProps"
|
|
[tachTypographyHostProps]="hostProps"
|
|
[ngStyle]="preserveStyle"
|
|
(click)="handleClick($event)"
|
|
>
|
|
<ng-container *ngIf="markdownEnabled; else tachTypographyContentA">
|
|
<span [innerHTML]="renderedMarkdown"></span>
|
|
</ng-container>
|
|
<ng-template #tachTypographyContentA>
|
|
<ng-content />
|
|
</ng-template>
|
|
</a>
|
|
<h1
|
|
*ngSwitchCase="'h1'"
|
|
nz-typography
|
|
[tachTypography]="variant"
|
|
[tachTypographyColor]="color"
|
|
[tachTypographyWeight]="weight"
|
|
[tachTypographyClickable]="clickable"
|
|
[tachTypographyClassName]="className"
|
|
[tachTypographyEllipsis]="ellipsis"
|
|
[tachTypographyNzProps]="nzProps"
|
|
[tachTypographyHostProps]="hostProps"
|
|
[ngStyle]="preserveStyle"
|
|
(click)="handleClick($event)"
|
|
>
|
|
<ng-container *ngIf="markdownEnabled; else tachTypographyContentH1">
|
|
<span [innerHTML]="renderedMarkdown"></span>
|
|
</ng-container>
|
|
<ng-template #tachTypographyContentH1>
|
|
<ng-content />
|
|
</ng-template>
|
|
</h1>
|
|
<h2
|
|
*ngSwitchCase="'h2'"
|
|
nz-typography
|
|
[tachTypography]="variant"
|
|
[tachTypographyColor]="color"
|
|
[tachTypographyWeight]="weight"
|
|
[tachTypographyClickable]="clickable"
|
|
[tachTypographyClassName]="className"
|
|
[tachTypographyEllipsis]="ellipsis"
|
|
[tachTypographyNzProps]="nzProps"
|
|
[tachTypographyHostProps]="hostProps"
|
|
[ngStyle]="preserveStyle"
|
|
(click)="handleClick($event)"
|
|
>
|
|
<ng-container *ngIf="markdownEnabled; else tachTypographyContentH2">
|
|
<span [innerHTML]="renderedMarkdown"></span>
|
|
</ng-container>
|
|
<ng-template #tachTypographyContentH2>
|
|
<ng-content />
|
|
</ng-template>
|
|
</h2>
|
|
<h3
|
|
*ngSwitchCase="'h3'"
|
|
nz-typography
|
|
[tachTypography]="variant"
|
|
[tachTypographyColor]="color"
|
|
[tachTypographyWeight]="weight"
|
|
[tachTypographyClickable]="clickable"
|
|
[tachTypographyClassName]="className"
|
|
[tachTypographyEllipsis]="ellipsis"
|
|
[tachTypographyNzProps]="nzProps"
|
|
[tachTypographyHostProps]="hostProps"
|
|
[ngStyle]="preserveStyle"
|
|
(click)="handleClick($event)"
|
|
>
|
|
<ng-container *ngIf="markdownEnabled; else tachTypographyContentH3">
|
|
<span [innerHTML]="renderedMarkdown"></span>
|
|
</ng-container>
|
|
<ng-template #tachTypographyContentH3>
|
|
<ng-content />
|
|
</ng-template>
|
|
</h3>
|
|
<h4
|
|
*ngSwitchCase="'h4'"
|
|
nz-typography
|
|
[tachTypography]="variant"
|
|
[tachTypographyColor]="color"
|
|
[tachTypographyWeight]="weight"
|
|
[tachTypographyClickable]="clickable"
|
|
[tachTypographyClassName]="className"
|
|
[tachTypographyEllipsis]="ellipsis"
|
|
[tachTypographyNzProps]="nzProps"
|
|
[tachTypographyHostProps]="hostProps"
|
|
[ngStyle]="preserveStyle"
|
|
(click)="handleClick($event)"
|
|
>
|
|
<ng-container *ngIf="markdownEnabled; else tachTypographyContentH4">
|
|
<span [innerHTML]="renderedMarkdown"></span>
|
|
</ng-container>
|
|
<ng-template #tachTypographyContentH4>
|
|
<ng-content />
|
|
</ng-template>
|
|
</h4>
|
|
<span
|
|
*ngSwitchDefault
|
|
nz-typography
|
|
[tachTypography]="variant"
|
|
[tachTypographyColor]="color"
|
|
[tachTypographyWeight]="weight"
|
|
[tachTypographyClickable]="clickable"
|
|
[tachTypographyClassName]="className"
|
|
[tachTypographyEllipsis]="ellipsis"
|
|
[tachTypographyNzProps]="nzProps"
|
|
[tachTypographyHostProps]="hostProps"
|
|
[ngStyle]="preserveStyle"
|
|
(click)="handleClick($event)"
|
|
>
|
|
<ng-container *ngIf="markdownEnabled; else tachTypographyContentSpan">
|
|
<span [innerHTML]="renderedMarkdown"></span>
|
|
</ng-container>
|
|
<ng-template #tachTypographyContentSpan>
|
|
<ng-content />
|
|
</ng-template>
|
|
</span>
|
|
</ng-container>
|
|
`, isInline: true, dependencies: [{ kind: "ngmodule", type: NzTypographyModule }, { kind: "component", type: i1.NzTypographyComponent, selector: " nz-typography, [nz-typography], p[nz-paragraph], span[nz-text], h1[nz-title], h2[nz-title], h3[nz-title], h4[nz-title] ", inputs: ["nzCopyable", "nzEditable", "nzDisabled", "nzExpandable", "nzEllipsis", "nzCopyTooltips", "nzCopyIcons", "nzEditTooltip", "nzEditIcon", "nzContent", "nzEllipsisRows", "nzType", "nzCopyText", "nzSuffix"], outputs: ["nzContentChange", "nzCopy", "nzExpandChange", "nzOnEllipsis"], exportAs: ["nzTypography"] }, { kind: "directive", type: TachTypographyDirective, selector: "[tachTypography]", inputs: ["tachTypography", "tachTypographyVariant", "tachTypographyColor", "tachTypographyWeight", "tachTypographyClickable", "tachTypographyClassName", "tachTypographyEllipsis"] }, { kind: "directive", type: TachTypographyNzPropsDirective, selector: "[tachTypographyNzProps]", inputs: ["tachTypographyNzProps"] }, { kind: "directive", type: TachTypographyHostPropsDirective, selector: "[tachTypographyHostProps]", inputs: ["tachTypographyHostProps"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
}
|
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: TachTypographyComponent, decorators: [{
|
|
type: Component,
|
|
args: [{
|
|
selector: "tach-typography",
|
|
standalone: true,
|
|
imports: [
|
|
NzTypographyModule,
|
|
TachTypographyDirective,
|
|
TachTypographyNzPropsDirective,
|
|
TachTypographyHostPropsDirective,
|
|
NgSwitch,
|
|
NgSwitchCase,
|
|
NgSwitchDefault,
|
|
NgIf,
|
|
NgStyle,
|
|
],
|
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
template: `
|
|
<ng-container [ngSwitch]="hostTag">
|
|
<p
|
|
*ngSwitchCase="'p'"
|
|
nz-typography
|
|
[tachTypography]="variant"
|
|
[tachTypographyColor]="color"
|
|
[tachTypographyWeight]="weight"
|
|
[tachTypographyClickable]="clickable"
|
|
[tachTypographyClassName]="className"
|
|
[tachTypographyEllipsis]="ellipsis"
|
|
[tachTypographyNzProps]="nzProps"
|
|
[tachTypographyHostProps]="hostProps"
|
|
[ngStyle]="preserveStyle"
|
|
(click)="handleClick($event)"
|
|
>
|
|
<ng-container *ngIf="markdownEnabled; else tachTypographyContentP">
|
|
<span [innerHTML]="renderedMarkdown"></span>
|
|
</ng-container>
|
|
<ng-template #tachTypographyContentP>
|
|
<ng-content />
|
|
</ng-template>
|
|
</p>
|
|
<a
|
|
*ngSwitchCase="'a'"
|
|
nz-typography
|
|
[tachTypography]="variant"
|
|
[tachTypographyColor]="color"
|
|
[tachTypographyWeight]="weight"
|
|
[tachTypographyClickable]="clickable"
|
|
[tachTypographyClassName]="className"
|
|
[tachTypographyEllipsis]="ellipsis"
|
|
[tachTypographyNzProps]="nzProps"
|
|
[tachTypographyHostProps]="hostProps"
|
|
[ngStyle]="preserveStyle"
|
|
(click)="handleClick($event)"
|
|
>
|
|
<ng-container *ngIf="markdownEnabled; else tachTypographyContentA">
|
|
<span [innerHTML]="renderedMarkdown"></span>
|
|
</ng-container>
|
|
<ng-template #tachTypographyContentA>
|
|
<ng-content />
|
|
</ng-template>
|
|
</a>
|
|
<h1
|
|
*ngSwitchCase="'h1'"
|
|
nz-typography
|
|
[tachTypography]="variant"
|
|
[tachTypographyColor]="color"
|
|
[tachTypographyWeight]="weight"
|
|
[tachTypographyClickable]="clickable"
|
|
[tachTypographyClassName]="className"
|
|
[tachTypographyEllipsis]="ellipsis"
|
|
[tachTypographyNzProps]="nzProps"
|
|
[tachTypographyHostProps]="hostProps"
|
|
[ngStyle]="preserveStyle"
|
|
(click)="handleClick($event)"
|
|
>
|
|
<ng-container *ngIf="markdownEnabled; else tachTypographyContentH1">
|
|
<span [innerHTML]="renderedMarkdown"></span>
|
|
</ng-container>
|
|
<ng-template #tachTypographyContentH1>
|
|
<ng-content />
|
|
</ng-template>
|
|
</h1>
|
|
<h2
|
|
*ngSwitchCase="'h2'"
|
|
nz-typography
|
|
[tachTypography]="variant"
|
|
[tachTypographyColor]="color"
|
|
[tachTypographyWeight]="weight"
|
|
[tachTypographyClickable]="clickable"
|
|
[tachTypographyClassName]="className"
|
|
[tachTypographyEllipsis]="ellipsis"
|
|
[tachTypographyNzProps]="nzProps"
|
|
[tachTypographyHostProps]="hostProps"
|
|
[ngStyle]="preserveStyle"
|
|
(click)="handleClick($event)"
|
|
>
|
|
<ng-container *ngIf="markdownEnabled; else tachTypographyContentH2">
|
|
<span [innerHTML]="renderedMarkdown"></span>
|
|
</ng-container>
|
|
<ng-template #tachTypographyContentH2>
|
|
<ng-content />
|
|
</ng-template>
|
|
</h2>
|
|
<h3
|
|
*ngSwitchCase="'h3'"
|
|
nz-typography
|
|
[tachTypography]="variant"
|
|
[tachTypographyColor]="color"
|
|
[tachTypographyWeight]="weight"
|
|
[tachTypographyClickable]="clickable"
|
|
[tachTypographyClassName]="className"
|
|
[tachTypographyEllipsis]="ellipsis"
|
|
[tachTypographyNzProps]="nzProps"
|
|
[tachTypographyHostProps]="hostProps"
|
|
[ngStyle]="preserveStyle"
|
|
(click)="handleClick($event)"
|
|
>
|
|
<ng-container *ngIf="markdownEnabled; else tachTypographyContentH3">
|
|
<span [innerHTML]="renderedMarkdown"></span>
|
|
</ng-container>
|
|
<ng-template #tachTypographyContentH3>
|
|
<ng-content />
|
|
</ng-template>
|
|
</h3>
|
|
<h4
|
|
*ngSwitchCase="'h4'"
|
|
nz-typography
|
|
[tachTypography]="variant"
|
|
[tachTypographyColor]="color"
|
|
[tachTypographyWeight]="weight"
|
|
[tachTypographyClickable]="clickable"
|
|
[tachTypographyClassName]="className"
|
|
[tachTypographyEllipsis]="ellipsis"
|
|
[tachTypographyNzProps]="nzProps"
|
|
[tachTypographyHostProps]="hostProps"
|
|
[ngStyle]="preserveStyle"
|
|
(click)="handleClick($event)"
|
|
>
|
|
<ng-container *ngIf="markdownEnabled; else tachTypographyContentH4">
|
|
<span [innerHTML]="renderedMarkdown"></span>
|
|
</ng-container>
|
|
<ng-template #tachTypographyContentH4>
|
|
<ng-content />
|
|
</ng-template>
|
|
</h4>
|
|
<span
|
|
*ngSwitchDefault
|
|
nz-typography
|
|
[tachTypography]="variant"
|
|
[tachTypographyColor]="color"
|
|
[tachTypographyWeight]="weight"
|
|
[tachTypographyClickable]="clickable"
|
|
[tachTypographyClassName]="className"
|
|
[tachTypographyEllipsis]="ellipsis"
|
|
[tachTypographyNzProps]="nzProps"
|
|
[tachTypographyHostProps]="hostProps"
|
|
[ngStyle]="preserveStyle"
|
|
(click)="handleClick($event)"
|
|
>
|
|
<ng-container *ngIf="markdownEnabled; else tachTypographyContentSpan">
|
|
<span [innerHTML]="renderedMarkdown"></span>
|
|
</ng-container>
|
|
<ng-template #tachTypographyContentSpan>
|
|
<ng-content />
|
|
</ng-template>
|
|
</span>
|
|
</ng-container>
|
|
`,
|
|
}]
|
|
}], propDecorators: { hostTag: [{
|
|
type: Input,
|
|
args: ["as"]
|
|
}], variant: [{
|
|
type: Input
|
|
}], color: [{
|
|
type: Input
|
|
}], weight: [{
|
|
type: Input
|
|
}], clickable: [{
|
|
type: Input
|
|
}], markdownEnabled: [{
|
|
type: Input
|
|
}], markdown: [{
|
|
type: Input
|
|
}], className: [{
|
|
type: Input
|
|
}], ellipsis: [{
|
|
type: Input
|
|
}], nzProps: [{
|
|
type: Input
|
|
}], hostProps: [{
|
|
type: Input
|
|
}], preserveStyle: [{
|
|
type: Input
|
|
}], tachClick: [{
|
|
type: Output
|
|
}] } });
|
|
export class TachTypographyNzModule {
|
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: TachTypographyNzModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.18", ngImport: i0, type: TachTypographyNzModule, imports: [NzTypographyModule, TachTypographyDirective, TachTypographyNzPropsDirective, TachTypographyHostPropsDirective, TachTypographyComponent], exports: [NzTypographyModule, TachTypographyDirective, TachTypographyNzPropsDirective, TachTypographyHostPropsDirective, TachTypographyComponent] });
|
|
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: TachTypographyNzModule, imports: [NzTypographyModule,
|
|
TachTypographyComponent, NzTypographyModule] });
|
|
}
|
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: TachTypographyNzModule, decorators: [{
|
|
type: NgModule,
|
|
args: [{
|
|
imports: [
|
|
NzTypographyModule,
|
|
TachTypographyDirective,
|
|
TachTypographyNzPropsDirective,
|
|
TachTypographyHostPropsDirective,
|
|
TachTypographyComponent,
|
|
],
|
|
exports: [
|
|
NzTypographyModule,
|
|
TachTypographyDirective,
|
|
TachTypographyNzPropsDirective,
|
|
TachTypographyHostPropsDirective,
|
|
TachTypographyComponent,
|
|
],
|
|
}]
|
|
}] });
|
|
//# sourceMappingURL=index.js.map
|