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: `

`, 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: `

`, }] }], 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