HUB/_hublib-web
18
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

release(tach-typography): v0.2.0

Browse Source
This commit is contained in:
Stanislav Ulegin
2026-03-25 14:01:45 +03:00
parent 9eaca089e5
commit a8c2eaa2fd
38 changed files with 1319 additions and 501 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
packages/tach-typography/README.md
View File

@@ -8,7 +8,7 @@ Typography package with shared tokens and framework adapters:
## Install from Git (SSH tag)
```bash
yarn add "@hublib-web/tach-typography@git+ssh://git@github.com/ORG/REPO.git#workspace=@hublib-web/tach-typography&tag=tach-typography-v0.1.0"
yarn add "@hublib-web/tach-typography@git+ssh://git@github.com/ORG/REPO.git#workspace=@hublib-web/tach-typography&tag=tach-typography-v0.2.0"
```
## Install inside this monorepo
@@ -30,13 +30,13 @@ yarn workspace @hublib-web/tach-typography build
```bash
git add packages/tach-typography/package.json packages/tach-typography/dist
git commit -m "release(tach-typography): v0.1.0"
git commit -m "release(tach-typography): v0.2.0"
```
4. Create and push tag:
```bash
git tag -a tach-typography-v0.1.0 -m "@hublib-web/tach-typography v0.1.0"
git tag -a tach-typography-v0.2.0 -m "@hublib-web/tach-typography v0.2.0"
git push origin main --follow-tags
```
@@ -62,22 +62,31 @@ export const Example = () => (
```ts
import { Component } from "@angular/core";
import { TachTypographyDirective, TachTypographyNzModule } from "@hublib-web/tach-typography/angular";
import { TachTypographyComponent } from "@hublib-web/tach-typography/angular";
@Component({
selector: "app-example",
standalone: true,
imports: [TachTypographyNzModule, TachTypographyDirective],
imports: [TachTypographyComponent],
template: `
<span
nz-typography
tachTypography
tachTypography="Body"
tachTypographyColor="link"
tachTypographyWeight="bold"
<tach-typography
variant="Body"
color="link"
weight="bold"
[nzProps]="{ nzCopyable: true, nzType: 'secondary' }"
>
Hello from Angular + NG-ZORRO
</span>
</tach-typography>
<tach-typography
as="a"
variant="Body"
color="link"
[hostProps]="{ href: '/docs', target: '_blank', rel: 'noopener noreferrer' }"
[nzProps]="{ nzType: 'secondary' }"
>
Open docs
</tach-typography>
`,
})
export class ExampleComponent {}

81
packages/tach-typography/dist/angular/angular/index.d.ts vendored Normal file
View File

@@ -0,0 +1,81 @@
import { ElementRef, EventEmitter, OnChanges, Renderer2, SimpleChanges } from "@angular/core";
import { NzTypographyComponent } from "ng-zorro-antd/typography";
import { type EllipsisOptions, type TypographyClassOptions, type TypographyColor, type TypographyRenderOptions, type TypographyVariant, type TypographyWeight } from "../core";
import * as i0 from "@angular/core";
import * as i1 from "ng-zorro-antd/typography";
export type AngularTypographyClassInput = TypographyClassOptions;
export interface AngularTypographyRenderOptions extends TypographyRenderOptions {
preserveStyle?: Record<string, string | number>;
}
export type TachTypographyHostTag = "span" | "p" | "a" | "h1" | "h2" | "h3" | "h4";
type NonFunctionNonEmitterKeys<T> = {
[K in keyof T]-?: T[K] extends (...args: never[]) => unknown ? never : T[K] extends EventEmitter<unknown> ? never : K;
}[keyof T];
type NzTypographyInputKey = Extract<NonFunctionNonEmitterKeys<NzTypographyComponent>, `nz${string}`>;
export type TachTypographyNzProps = Partial<Pick<NzTypographyComponent, NzTypographyInputKey>>;
export type TachTypographyHostProps = Record<string, unknown>;
export declare const tachAngularTypographyClassName: (options?: AngularTypographyClassInput) => string;
export declare const tachAngularTypographyClassList: (options?: AngularTypographyClassInput) => string[];
export declare const tachAngularTypographyStyles: (ellipsis?: EllipsisOptions, preserveStyle?: Record<string, string | number>) => Record<string, string | number>;
export declare class TachTypographyDirective implements OnChanges {
private readonly elementRef;
private readonly renderer;
tachTypography: TypographyVariant | "" | undefined;
tachTypographyVariant: TypographyVariant;
tachTypographyColor: TypographyColor;
tachTypographyWeight: TypographyWeight;
tachTypographyClickable: boolean;
tachTypographyClassName: string | undefined;
tachTypographyEllipsis: EllipsisOptions | undefined;
private readonly appliedClasses;
private readonly appliedStyleProperties;
constructor(elementRef: ElementRef<HTMLElement>, renderer: Renderer2);
ngOnChanges(_changes: SimpleChanges): void;
private syncClasses;
private syncEllipsisStyles;
static ɵfac: i0.ɵɵFactoryDeclaration<TachTypographyDirective, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<TachTypographyDirective, "[tachTypography]", never, { "tachTypography": { "alias": "tachTypography"; "required": false; }; "tachTypographyVariant": { "alias": "tachTypographyVariant"; "required": false; }; "tachTypographyColor": { "alias": "tachTypographyColor"; "required": false; }; "tachTypographyWeight": { "alias": "tachTypographyWeight"; "required": false; }; "tachTypographyClickable": { "alias": "tachTypographyClickable"; "required": false; }; "tachTypographyClassName": { "alias": "tachTypographyClassName"; "required": false; }; "tachTypographyEllipsis": { "alias": "tachTypographyEllipsis"; "required": false; }; }, {}, never, never, true, never>;
}
export declare class TachTypographyNzPropsDirective implements OnChanges {
tachTypographyNzProps: TachTypographyNzProps | null | undefined;
private readonly appliedNzKeys;
private readonly nzTypography;
ngOnChanges(): void;
static ɵfac: i0.ɵɵFactoryDeclaration<TachTypographyNzPropsDirective, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<TachTypographyNzPropsDirective, "[tachTypographyNzProps]", never, { "tachTypographyNzProps": { "alias": "tachTypographyNzProps"; "required": false; }; }, {}, never, never, true, never>;
}
export declare class TachTypographyHostPropsDirective implements OnChanges {
private readonly elementRef;
private readonly renderer;
tachTypographyHostProps: TachTypographyHostProps | null | undefined;
private readonly appliedHostProps;
constructor(elementRef: ElementRef<HTMLElement>, renderer: Renderer2);
ngOnChanges(): void;
private shouldApplyAsAttribute;
private hasPropertyOnElement;
static ɵfac: i0.ɵɵFactoryDeclaration<TachTypographyHostPropsDirective, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<TachTypographyHostPropsDirective, "[tachTypographyHostProps]", never, { "tachTypographyHostProps": { "alias": "tachTypographyHostProps"; "required": false; }; }, {}, never, never, true, never>;
}
export declare class TachTypographyComponent {
hostTag: TachTypographyHostTag;
variant: TypographyVariant;
color: TypographyColor;
weight: TypographyWeight;
clickable: boolean;
className: string | undefined;
ellipsis: EllipsisOptions | undefined;
nzProps: TachTypographyNzProps | undefined;
hostProps: TachTypographyHostProps | undefined;
preserveStyle: Record<string, string | number> | undefined;
readonly tachClick: EventEmitter<MouseEvent>;
handleClick(event: MouseEvent): void;
static ɵfac: i0.ɵɵFactoryDeclaration<TachTypographyComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<TachTypographyComponent, "tach-typography", never, { "hostTag": { "alias": "as"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "color": { "alias": "color"; "required": false; }; "weight": { "alias": "weight"; "required": false; }; "clickable": { "alias": "clickable"; "required": false; }; "className": { "alias": "className"; "required": false; }; "ellipsis": { "alias": "ellipsis"; "required": false; }; "nzProps": { "alias": "nzProps"; "required": false; }; "hostProps": { "alias": "hostProps"; "required": false; }; "preserveStyle": { "alias": "preserveStyle"; "required": false; }; }, { "tachClick": "tachClick"; }, never, ["*", "*", "*", "*", "*", "*", "*"], true, never>;
}
export declare class TachTypographyNzModule {
static ɵfac: i0.ɵɵFactoryDeclaration<TachTypographyNzModule, never>;
static ɵmod: i0.ɵɵNgModuleDeclaration<TachTypographyNzModule, never, [typeof i1.NzTypographyModule, typeof TachTypographyDirective, typeof TachTypographyNzPropsDirective, typeof TachTypographyHostPropsDirective, typeof TachTypographyComponent], [typeof i1.NzTypographyModule, typeof TachTypographyDirective, typeof TachTypographyNzPropsDirective, typeof TachTypographyHostPropsDirective, typeof TachTypographyComponent]>;
static ɵinj: i0.ɵɵInjectorDeclaration<TachTypographyNzModule>;
}
export {};
//# sourceMappingURL=index.d.ts.map

1
packages/tach-typography/dist/angular/angular/index.d.ts.map vendored Normal file
View File

@@ -0,0 +1 @@
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/angular/index.ts"],"names":[],"mappings":"AACA,OAAO,EAIL,UAAU,EACV,YAAY,EAIZ,SAAS,EAET,SAAS,EACT,aAAa,EACd,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,qBAAqB,EAAsB,MAAM,0BAA0B,CAAC;AAErF,OAAO,EAIL,KAAK,eAAe,EACpB,KAAK,sBAAsB,EAC3B,KAAK,eAAe,EACpB,KAAK,uBAAuB,EAC5B,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,EACtB,MAAM,SAAS,CAAC;;;AAEjB,MAAM,MAAM,2BAA2B,GAAG,sBAAsB,CAAC;AAEjE,MAAM,WAAW,8BAA+B,SAAQ,uBAAuB;IAC7E,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC;CACjD;AAED,MAAM,MAAM,qBAAqB,GAAG,MAAM,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACnF,KAAK,yBAAyB,CAAC,CAAC,IAAI;KACjC,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,GAAG,IAAI,EAAE,KAAK,EAAE,KAAK,OAAO,GACxD,KAAK,GACL,CAAC,CAAC,CAAC,CAAC,SAAS,YAAY,CAAC,OAAO,CAAC,GAChC,KAAK,GACL,CAAC;CACR,CAAC,MAAM,CAAC,CAAC,CAAC;AACX,KAAK,oBAAoB,GAAG,OAAO,CAAC,yBAAyB,CAAC,qBAAqB,CAAC,EAAE,KAAK,MAAM,EAAE,CAAC,CAAC;AACrG,MAAM,MAAM,qBAAqB,GAAG,OAAO,CAAC,IAAI,CAAC,qBAAqB,EAAE,oBAAoB,CAAC,CAAC,CAAC;AAC/F,MAAM,MAAM,uBAAuB,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAa9D,eAAO,MAAM,8BAA8B,GACzC,UAAS,2BAAgC,KACxC,MAEF,CAAC;AAEF,eAAO,MAAM,8BAA8B,GACzC,UAAS,2BAAgC,KACxC,MAAM,EAER,CAAC;AAEF,eAAO,MAAM,2BAA2B,GACtC,WAAW,eAAe,EAC1B,gBAAe,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAM,KAClD,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAWhC,CAAC;AAEF,qBAIa,uBAAwB,YAAW,SAAS;IAarD,OAAO,CAAC,QAAQ,CAAC,UAAU;IAC3B,OAAO,CAAC,QAAQ,CAAC,QAAQ;IAblB,cAAc,EAAE,iBAAiB,GAAG,EAAE,GAAG,SAAS,CAAC;IACnD,qBAAqB,EAAE,iBAAiB,CAAU;IAClD,mBAAmB,EAAE,eAAe,CAAa;IACjD,oBAAoB,EAAE,gBAAgB,CAAY;IAClD,uBAAuB,UAAS;IAChC,uBAAuB,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5C,sBAAsB,EAAE,eAAe,GAAG,SAAS,CAAC;IAE7D,OAAO,CAAC,QAAQ,CAAC,cAAc,CAAqB;IACpD,OAAO,CAAC,QAAQ,CAAC,sBAAsB,CAAqB;gBAGzC,UAAU,EAAE,UAAU,CAAC,WAAW,CAAC,EACnC,QAAQ,EAAE,SAAS;IAGtC,WAAW,CAAC,QAAQ,EAAE,aAAa,GAAG,IAAI;IAK1C,OAAO,CAAC,WAAW;IA2BnB,OAAO,CAAC,kBAAkB;yCAjDf,uBAAuB;2CAAvB,uBAAuB;CAoEnC;AAED,qBAIa,8BAA+B,YAAW,SAAS;IACrD,qBAAqB,EAAE,qBAAqB,GAAG,IAAI,GAAG,SAAS,CAAC;IAEzE,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAqB;IACnD,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAiE;IAE9F,WAAW,IAAI,IAAI;yCANR,8BAA8B;2CAA9B,8BAA8B;CAmC1C;AAED,qBAIa,gCAAiC,YAAW,SAAS;IAM9D,OAAO,CAAC,QAAQ,CAAC,UAAU;IAC3B,OAAO,CAAC,QAAQ,CAAC,QAAQ;IANlB,uBAAuB,EAAE,uBAAuB,GAAG,IAAI,GAAG,SAAS,CAAC;IAE7E,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAAsC;gBAGpD,UAAU,EAAE,UAAU,CAAC,WAAW,CAAC,EACnC,QAAQ,EAAE,SAAS;IAGtC,WAAW,IAAI,IAAI;IAkDnB,OAAO,CAAC,sBAAsB;IAY9B,OAAO,CAAC,oBAAoB;yCAxEjB,gCAAgC;2CAAhC,gCAAgC;CA2E5C;AAED,qBAmIa,uBAAuB;IACrB,OAAO,EAAE,qBAAqB,CAAU;IAC5C,OAAO,EAAE,iBAAiB,CAAU;IACpC,KAAK,EAAE,eAAe,CAAa;IACnC,MAAM,EAAE,gBAAgB,CAAY;IACpC,SAAS,UAAS;IAClB,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,QAAQ,EAAE,eAAe,GAAG,SAAS,CAAC;IACtC,OAAO,EAAE,qBAAqB,GAAG,SAAS,CAAC;IAC3C,SAAS,EAAE,uBAAuB,GAAG,SAAS,CAAC;IAC/C,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,GAAG,SAAS,CAAC;IAE1D,QAAQ,CAAC,SAAS,2BAAkC;IAE9D,WAAW,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;yCAdzB,uBAAuB;2CAAvB,uBAAuB;CAiBnC;AAED,qBAgBa,sBAAsB;yCAAtB,sBAAsB;0CAAtB,sBAAsB,+CAtWtB,uBAAuB,SA0EvB,8BAA8B,SAyC9B,gCAAgC,SAgNhC,uBAAuB,yCAnUvB,uBAAuB,SA0EvB,8BAA8B,SAyC9B,gCAAgC,SAgNhC,uBAAuB;0CAmCvB,sBAAsB;CAAG"}

545
packages/tach-typography/dist/angular/angular/index.js vendored Normal file
View File

@@ -0,0 +1,545 @@
import { 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, } 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;
className;
ellipsis;
nzProps;
hostProps;
preserveStyle;
tachClick = new EventEmitter();
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", className: "className", ellipsis: "ellipsis", nzProps: "nzProps", hostProps: "hostProps", preserveStyle: "preserveStyle" }, outputs: { tachClick: "tachClick" }, 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-content />
</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-content />
</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-content />
</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-content />
</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-content />
</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-content />
</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-content />
</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: 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,
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-content />
</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-content />
</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-content />
</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-content />
</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-content />
</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-content />
</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-content />
</span>
</ng-container>
`,
}]
}], propDecorators: { hostTag: [{
type: Input,
args: ["as"]
}], variant: [{
type: Input
}], color: [{
type: Input
}], weight: [{
type: Input
}], clickable: [{
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

1
packages/tach-typography/dist/angular/angular/index.js.map vendored Normal file
View File

File diff suppressed because one or more lines are too long

2
packages/tach-typography/dist/angular/angular/public-api.d.ts vendored Normal file
View File

@@ -0,0 +1,2 @@
export * from "./index";
//# sourceMappingURL=public-api.d.ts.map

1
packages/tach-typography/dist/angular/angular/public-api.d.ts.map vendored Normal file
View File

@@ -0,0 +1 @@
{"version":3,"file":"public-api.d.ts","sourceRoot":"","sources":["../../../src/angular/public-api.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC"}

2
packages/tach-typography/dist/angular/angular/public-api.js vendored Normal file
View File

@@ -0,0 +1,2 @@
export * from "./index";
//# sourceMappingURL=public-api.js.map

1
packages/tach-typography/dist/angular/angular/public-api.js.map vendored Normal file
View File

@@ -0,0 +1 @@
{"version":3,"file":"public-api.js","sourceRoot":"","sources":["../../../src/angular/public-api.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC"}

4
packages/tach-typography/dist/angular/core/classnames.d.ts vendored Normal file
View File

@@ -0,0 +1,4 @@
import type { TypographyClassOptions } from "./types";
export declare const tachTypographyClassName: ({ variant, color, weight, clickable, className, }?: TypographyClassOptions) => string;
export declare const tachTypographyClassList: (options?: TypographyClassOptions) => string[];
//# sourceMappingURL=classnames.d.ts.map

1
packages/tach-typography/dist/angular/core/classnames.d.ts.map vendored Normal file
View File

@@ -0,0 +1 @@
{"version":3,"file":"classnames.d.ts","sourceRoot":"","sources":["../../../src/core/classnames.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAOtD,eAAO,MAAM,uBAAuB,GAAI,oDAMrC,sBAA2B,KAAG,MAShC,CAAC;AAEF,eAAO,MAAM,uBAAuB,GAAI,UAAS,sBAA2B,KAAG,MAAM,EAIpF,CAAC"}

11
packages/tach-typography/dist/angular/core/classnames.js vendored Normal file
View File

@@ -0,0 +1,11 @@
const BASE_CLASS = "tach-typography";
const join = (...parts) => parts.filter(Boolean).join(" ");
export const tachTypographyClassName = ({ variant = "Body", color = "primary", weight = "normal", clickable = false, className, } = {}) => {
return join(BASE_CLASS, `${BASE_CLASS}--${variant}`, `${BASE_CLASS}--color-${color}`, weight === "bold" && `${BASE_CLASS}--bold`, clickable && `${BASE_CLASS}--pointer`, className);
};
export const tachTypographyClassList = (options = {}) => {
return tachTypographyClassName(options)
.split(" ")
.filter(Boolean);
};
//# sourceMappingURL=classnames.js.map

1
packages/tach-typography/dist/angular/core/classnames.js.map vendored Normal file
View File

@@ -0,0 +1 @@
{"version":3,"file":"classnames.js","sourceRoot":"","sources":["../../../src/core/classnames.ts"],"names":[],"mappings":"AAEA,MAAM,UAAU,GAAG,iBAAiB,CAAC;AAErC,MAAM,IAAI,GAAG,CAAC,GAAG,KAA+C,EAAU,EAAE,CAC1E,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAElC,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,EACtC,OAAO,GAAG,MAAM,EAChB,KAAK,GAAG,SAAS,EACjB,MAAM,GAAG,QAAQ,EACjB,SAAS,GAAG,KAAK,EACjB,SAAS,MACiB,EAAE,EAAU,EAAE;IACxC,OAAO,IAAI,CACT,UAAU,EACV,GAAG,UAAU,KAAK,OAAO,EAAE,EAC3B,GAAG,UAAU,WAAW,KAAK,EAAE,EAC/B,MAAM,KAAK,MAAM,IAAI,GAAG,UAAU,QAAQ,EAC1C,SAAS,IAAI,GAAG,UAAU,WAAW,EACrC,SAAS,CACV,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,UAAkC,EAAE,EAAY,EAAE;IACxF,OAAO,uBAAuB,CAAC,OAAO,CAAC;SACpC,KAAK,CAAC,GAAG,CAAC;SACV,MAAM,CAAC,OAAO,CAAC,CAAC;AACrB,CAAC,CAAC"}

5
packages/tach-typography/dist/angular/core/ellipsis.d.ts vendored Normal file
View File

@@ -0,0 +1,5 @@
import type { EllipsisOptions } from "./types";
type StyleRecord = Record<string, string | number>;
export declare const tachTypographyEllipsisStyle: (ellipsis?: EllipsisOptions) => StyleRecord | undefined;
export {};
//# sourceMappingURL=ellipsis.d.ts.map

1
packages/tach-typography/dist/angular/core/ellipsis.d.ts.map vendored Normal file
View File

@@ -0,0 +1 @@
{"version":3,"file":"ellipsis.d.ts","sourceRoot":"","sources":["../../../src/core/ellipsis.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE/C,KAAK,WAAW,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC;AAEnD,eAAO,MAAM,2BAA2B,GACtC,WAAW,eAAe,KACzB,WAAW,GAAG,SAchB,CAAC"}

14
packages/tach-typography/dist/angular/core/ellipsis.js vendored Normal file
View File

@@ -0,0 +1,14 @@
export const tachTypographyEllipsisStyle = (ellipsis) => {
if (!ellipsis) {
return undefined;
}
const rows = typeof ellipsis === "object" ? ellipsis.rows ?? 1 : 1;
return {
overflow: "hidden",
textOverflow: "ellipsis",
display: "-webkit-box",
WebkitBoxOrient: "vertical",
WebkitLineClamp: rows,
};
};
//# sourceMappingURL=ellipsis.js.map

1
packages/tach-typography/dist/angular/core/ellipsis.js.map vendored Normal file
View File

@@ -0,0 +1 @@
{"version":3,"file":"ellipsis.js","sourceRoot":"","sources":["../../../src/core/ellipsis.ts"],"names":[],"mappings":"AAIA,MAAM,CAAC,MAAM,2BAA2B,GAAG,CACzC,QAA0B,EACD,EAAE;IAC3B,IAAI,CAAC,QAAQ,EAAE,CAAC;QACd,OAAO,SAAS,CAAC;IACnB,CAAC;IAED,MAAM,IAAI,GAAG,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAEnE,OAAO;QACL,QAAQ,EAAE,QAAQ;QAClB,YAAY,EAAE,UAAU;QACxB,OAAO,EAAE,aAAa;QACtB,eAAe,EAAE,UAAU;QAC3B,eAAe,EAAE,IAAI;KACtB,CAAC;AACJ,CAAC,CAAC"}

4
packages/tach-typography/dist/angular/core/index.d.ts vendored Normal file
View File

@@ -0,0 +1,4 @@
export * from "./types";
export * from "./classnames";
export * from "./ellipsis";
//# sourceMappingURL=index.d.ts.map

1
packages/tach-typography/dist/angular/core/index.d.ts.map vendored Normal file
View File

@@ -0,0 +1 @@
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/core/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC"}

4
packages/tach-typography/dist/angular/core/index.js vendored Normal file
View File

@@ -0,0 +1,4 @@
export * from "./types";
export * from "./classnames";
export * from "./ellipsis";
//# sourceMappingURL=index.js.map

1
packages/tach-typography/dist/angular/core/index.js.map vendored Normal file
View File

@@ -0,0 +1 @@
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/core/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC"}

19
packages/tach-typography/dist/angular/core/types.d.ts vendored Normal file
View File

@@ -0,0 +1,19 @@
export declare const TYPOGRAPHY_VARIANTS: readonly ["LargeTitle", "Title1", "Title2", "Title3", "Headline", "Body", "Inputs", "Subheadline", "FootnoteUnderline", "Footnote", "Caption", "Caption2", "AccentH1", "AccentH2", "AccentSubttl", "AccentSubttl2", "AccentCaption", "AccentCaption2", "AccentRegularM", "AccentRegularS", "AccentLargeTtl", "AppMediumBody", "AppMediumSubtext", "AppMediumSubtextUnderline"];
export declare const TYPOGRAPHY_COLORS: readonly ["primary", "secondary", "tertiary", "quaternary", "link", "white", "dark", "alert", "malahit", "attantion"];
export type TypographyVariant = (typeof TYPOGRAPHY_VARIANTS)[number];
export type TypographyColor = (typeof TYPOGRAPHY_COLORS)[number];
export type TypographyWeight = "normal" | "bold";
export interface TypographyClassOptions {
variant?: TypographyVariant;
color?: TypographyColor;
weight?: TypographyWeight;
clickable?: boolean;
className?: string | undefined;
}
export type EllipsisOptions = boolean | {
rows?: number;
};
export interface TypographyRenderOptions extends TypographyClassOptions {
ellipsis?: EllipsisOptions;
}
//# sourceMappingURL=types.d.ts.map

1
packages/tach-typography/dist/angular/core/types.d.ts.map vendored Normal file
View File

@@ -0,0 +1 @@
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/core/types.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,mBAAmB,gXAyBtB,CAAC;AAEX,eAAO,MAAM,iBAAiB,uHAWpB,CAAC;AAEX,MAAM,MAAM,iBAAiB,GAAG,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,CAAC,CAAC;AACrE,MAAM,MAAM,eAAe,GAAG,CAAC,OAAO,iBAAiB,CAAC,CAAC,MAAM,CAAC,CAAC;AACjE,MAAM,MAAM,gBAAgB,GAAG,QAAQ,GAAG,MAAM,CAAC;AAEjD,MAAM,WAAW,sBAAsB;IACrC,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAChC;AAED,MAAM,MAAM,eAAe,GACvB,OAAO,GACP;IACE,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEN,MAAM,WAAW,uBAAwB,SAAQ,sBAAsB;IACrE,QAAQ,CAAC,EAAE,eAAe,CAAC;CAC5B"}

39
packages/tach-typography/dist/angular/core/types.js vendored Normal file
View File

@@ -0,0 +1,39 @@
export const TYPOGRAPHY_VARIANTS = [
"LargeTitle",
"Title1",
"Title2",
"Title3",
"Headline",
"Body",
"Inputs",
"Subheadline",
"FootnoteUnderline",
"Footnote",
"Caption",
"Caption2",
"AccentH1",
"AccentH2",
"AccentSubttl",
"AccentSubttl2",
"AccentCaption",
"AccentCaption2",
"AccentRegularM",
"AccentRegularS",
"AccentLargeTtl",
"AppMediumBody",
"AppMediumSubtext",
"AppMediumSubtextUnderline",
];
export const TYPOGRAPHY_COLORS = [
"primary",
"secondary",
"tertiary",
"quaternary",
"link",
"white",
"dark",
"alert",
"malahit",
"attantion",
];
//# sourceMappingURL=types.js.map

1
packages/tach-typography/dist/angular/core/types.js.map vendored Normal file
View File

@@ -0,0 +1 @@
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/core/types.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,mBAAmB,GAAG;IACjC,YAAY;IACZ,QAAQ;IACR,QAAQ;IACR,QAAQ;IACR,UAAU;IACV,MAAM;IACN,QAAQ;IACR,aAAa;IACb,mBAAmB;IACnB,UAAU;IACV,SAAS;IACT,UAAU;IACV,UAAU;IACV,UAAU;IACV,cAAc;IACd,eAAe;IACf,eAAe;IACf,gBAAgB;IAChB,gBAAgB;IAChB,gBAAgB;IAChB,gBAAgB;IAChB,eAAe;IACf,kBAAkB;IAClB,2BAA2B;CACnB,CAAC;AAEX,MAAM,CAAC,MAAM,iBAAiB,GAAG;IAC/B,SAAS;IACT,WAAW;IACX,UAAU;IACV,YAAY;IACZ,MAAM;IACN,OAAO;IACP,MAAM;IACN,OAAO;IACP,SAAS;IACT,WAAW;CACH,CAAC"}

204
packages/tach-typography/dist/angular/index.cjs vendored
View File

@@ -1,204 +0,0 @@
'use strict';
var core = require('@angular/core');
var typography = require('ng-zorro-antd/typography');
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __knownSymbol = (name, symbol) => (symbol = Symbol[name]) ? symbol : /* @__PURE__ */ Symbol.for("Symbol." + name);
var __typeError = (msg) => {
throw TypeError(msg);
};
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
var __decoratorStart = (base) => [, , , __create(null)];
var __decoratorStrings = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
var __expectFn = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError("Function expected") : fn;
var __decoratorContext = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError("Already initialized") : fns.push(__expectFn(fn || null)) });
var __decoratorMetadata = (array, target) => __defNormalProp(target, __knownSymbol("metadata"), array[3]);
var __runInitializers = (array, flags, self, value) => {
for (var i = 0, fns = array[flags >> 1], n = fns && fns.length; i < n; i++) flags & 1 ? fns[i].call(self) : value = fns[i].call(self, value);
return value;
};
var __decorateElement = (array, flags, name, decorators, target, extra) => {
var fn, it, done, ctx, access, k = flags & 7, s = !!(flags & 8), p = !!(flags & 16);
var j = k > 3 ? array.length + 1 : k ? s ? 1 : 2 : 0, key = __decoratorStrings[k + 5];
var initializers = k > 3 && (array[j - 1] = []), extraInitializers = array[j] || (array[j] = []);
var desc = k && (!p && !s && (target = target.prototype), k < 5 && (k > 3 || !p) && __getOwnPropDesc(k < 4 ? target : { get [name]() {
return __privateGet(this, extra);
}, set [name](x) {
return __privateSet(this, extra, x);
} }, name));
k ? p && k < 4 && __name(extra, (k > 2 ? "set " : k > 1 ? "get " : "") + name) : __name(target, name);
for (var i = decorators.length - 1; i >= 0; i--) {
ctx = __decoratorContext(k, name, done = {}, array[3], extraInitializers);
if (k) {
ctx.static = s, ctx.private = p, access = ctx.access = { has: p ? (x) => __privateIn(target, x) : (x) => name in x };
if (k ^ 3) access.get = p ? (x) => (k ^ 1 ? __privateGet : __privateMethod)(x, target, k ^ 4 ? extra : desc.get) : (x) => x[name];
if (k > 2) access.set = p ? (x, y) => __privateSet(x, target, y, k ^ 4 ? extra : desc.set) : (x, y) => x[name] = y;
}
it = (0, decorators[i])(k ? k < 4 ? p ? extra : desc[key] : k > 4 ? void 0 : { get: desc.get, set: desc.set } : target, ctx), done._ = 1;
if (k ^ 4 || it === void 0) __expectFn(it) && (k > 4 ? initializers.unshift(it) : k ? p ? extra = it : desc[key] = it : target = it);
else if (typeof it !== "object" || it === null) __typeError("Object expected");
else __expectFn(fn = it.get) && (desc.get = fn), __expectFn(fn = it.set) && (desc.set = fn), __expectFn(fn = it.init) && initializers.unshift(fn);
}
return k || __decoratorMetadata(array, target), desc && __defProp(target, name, desc), p ? k ^ 4 ? extra : desc : target;
};
var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
var __privateIn = (member, obj) => Object(obj) !== obj ? __typeError('Cannot use the "in" operator on this value') : member.has(obj);
var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
// src/core/classnames.ts
var BASE_CLASS = "tach-typography";
var join = (...parts) => parts.filter(Boolean).join(" ");
var tachTypographyClassName = ({
variant = "Body",
color = "primary",
weight = "normal",
clickable = false,
className
} = {}) => {
return join(
BASE_CLASS,
`${BASE_CLASS}--${variant}`,
`${BASE_CLASS}--color-${color}`,
weight === "bold" && `${BASE_CLASS}--bold`,
clickable && `${BASE_CLASS}--pointer`,
className
);
};
var tachTypographyClassList = (options = {}) => {
return tachTypographyClassName(options).split(" ").filter(Boolean);
};
// src/core/ellipsis.ts
var tachTypographyEllipsisStyle = (ellipsis) => {
if (!ellipsis) {
return void 0;
}
const rows = typeof ellipsis === "object" ? ellipsis.rows ?? 1 : 1;
return {
overflow: "hidden",
textOverflow: "ellipsis",
display: "-webkit-box",
WebkitBoxOrient: "vertical",
WebkitLineClamp: rows
};
};
// src/angular/index.ts
var camelToKebab = (value) => value.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
var toCssProperty = (styleKey) => {
if (styleKey.startsWith("Webkit")) {
return `-webkit-${camelToKebab(styleKey.slice(6))}`;
}
return camelToKebab(styleKey);
};
var tachAngularTypographyClassName = (options = {}) => {
return tachTypographyClassName(options);
};
var tachAngularTypographyClassList = (options = {}) => {
return tachTypographyClassList(options);
};
var tachAngularTypographyStyles = (ellipsis, preserveStyle = {}) => {
const ellipsisStyle = tachTypographyEllipsisStyle(ellipsis);
if (!ellipsisStyle) {
return preserveStyle;
}
return {
...ellipsisStyle,
...preserveStyle
};
};
var _tachTypographyEllipsis_dec, _tachTypographyClassName_dec, _tachTypographyClickable_dec, _tachTypographyWeight_dec, _tachTypographyColor_dec, _tachTypographyVariant_dec, _tachTypography_dec, _TachTypographyDirective_decorators, _init;
_TachTypographyDirective_decorators = [core.Directive({
selector: "[tachTypography]",
standalone: true
})], _tachTypography_dec = [core.Input()], _tachTypographyVariant_dec = [core.Input()], _tachTypographyColor_dec = [core.Input()], _tachTypographyWeight_dec = [core.Input()], _tachTypographyClickable_dec = [core.Input()], _tachTypographyClassName_dec = [core.Input()], _tachTypographyEllipsis_dec = [core.Input()];
exports.TachTypographyDirective = class TachTypographyDirective {
constructor(elementRef, renderer) {
this.elementRef = elementRef;
this.renderer = renderer;
__publicField(this, "tachTypography", __runInitializers(_init, 8, this)), __runInitializers(_init, 11, this);
__publicField(this, "tachTypographyVariant", __runInitializers(_init, 12, this, "Body")), __runInitializers(_init, 15, this);
__publicField(this, "tachTypographyColor", __runInitializers(_init, 16, this, "primary")), __runInitializers(_init, 19, this);
__publicField(this, "tachTypographyWeight", __runInitializers(_init, 20, this, "normal")), __runInitializers(_init, 23, this);
__publicField(this, "tachTypographyClickable", __runInitializers(_init, 24, this, false)), __runInitializers(_init, 27, this);
__publicField(this, "tachTypographyClassName", __runInitializers(_init, 28, this)), __runInitializers(_init, 31, this);
__publicField(this, "tachTypographyEllipsis", __runInitializers(_init, 32, this)), __runInitializers(_init, 35, this);
__publicField(this, "appliedClasses", /* @__PURE__ */ new Set());
__publicField(this, "appliedStyleProperties", /* @__PURE__ */ new Set());
}
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);
}
}
};
_init = __decoratorStart();
__decorateElement(_init, 5, "tachTypography", _tachTypography_dec, exports.TachTypographyDirective);
__decorateElement(_init, 5, "tachTypographyVariant", _tachTypographyVariant_dec, exports.TachTypographyDirective);
__decorateElement(_init, 5, "tachTypographyColor", _tachTypographyColor_dec, exports.TachTypographyDirective);
__decorateElement(_init, 5, "tachTypographyWeight", _tachTypographyWeight_dec, exports.TachTypographyDirective);
__decorateElement(_init, 5, "tachTypographyClickable", _tachTypographyClickable_dec, exports.TachTypographyDirective);
__decorateElement(_init, 5, "tachTypographyClassName", _tachTypographyClassName_dec, exports.TachTypographyDirective);
__decorateElement(_init, 5, "tachTypographyEllipsis", _tachTypographyEllipsis_dec, exports.TachTypographyDirective);
exports.TachTypographyDirective = __decorateElement(_init, 0, "TachTypographyDirective", _TachTypographyDirective_decorators, exports.TachTypographyDirective);
__runInitializers(_init, 1, exports.TachTypographyDirective);
var _TachTypographyNzModule_decorators, _init2;
_TachTypographyNzModule_decorators = [core.NgModule({
imports: [typography.NzTypographyModule, exports.TachTypographyDirective],
exports: [typography.NzTypographyModule, exports.TachTypographyDirective]
})];
exports.TachTypographyNzModule = class TachTypographyNzModule {
};
_init2 = __decoratorStart();
exports.TachTypographyNzModule = __decorateElement(_init2, 0, "TachTypographyNzModule", _TachTypographyNzModule_decorators, exports.TachTypographyNzModule);
__runInitializers(_init2, 1, exports.TachTypographyNzModule);
exports.tachAngularTypographyClassList = tachAngularTypographyClassList;
exports.tachAngularTypographyClassName = tachAngularTypographyClassName;
exports.tachAngularTypographyStyles = tachAngularTypographyStyles;
//# sourceMappingURL=index.cjs.map
//# sourceMappingURL=index.cjs.map

1
packages/tach-typography/dist/angular/index.cjs.map vendored
View File

File diff suppressed because one or more lines are too long

31
packages/tach-typography/dist/angular/index.d.cts vendored
View File

@@ -1,31 +0,0 @@
import { OnChanges, ElementRef, Renderer2, SimpleChanges } from '@angular/core';
import { T as TypographyClassOptions, d as TypographyRenderOptions, e as TypographyVariant, c as TypographyColor, f as TypographyWeight, E as EllipsisOptions } from '../types-CQyFuLqp.cjs';
type AngularTypographyClassInput = TypographyClassOptions;
interface AngularTypographyRenderOptions extends TypographyRenderOptions {
preserveStyle?: Record<string, string | number>;
}
declare const tachAngularTypographyClassName: (options?: AngularTypographyClassInput) => string;
declare const tachAngularTypographyClassList: (options?: AngularTypographyClassInput) => string[];
declare const tachAngularTypographyStyles: (ellipsis?: EllipsisOptions, preserveStyle?: Record<string, string | number>) => Record<string, string | number>;
declare class TachTypographyDirective implements OnChanges {
private readonly elementRef;
private readonly renderer;
tachTypography: TypographyVariant | "" | undefined;
tachTypographyVariant: TypographyVariant;
tachTypographyColor: TypographyColor;
tachTypographyWeight: TypographyWeight;
tachTypographyClickable: boolean;
tachTypographyClassName: string | undefined;
tachTypographyEllipsis: EllipsisOptions | undefined;
private readonly appliedClasses;
private readonly appliedStyleProperties;
constructor(elementRef: ElementRef<HTMLElement>, renderer: Renderer2);
ngOnChanges(_changes: SimpleChanges): void;
private syncClasses;
private syncEllipsisStyles;
}
declare class TachTypographyNzModule {
}
export { type AngularTypographyClassInput, type AngularTypographyRenderOptions, TachTypographyDirective, TachTypographyNzModule, tachAngularTypographyClassList, tachAngularTypographyClassName, tachAngularTypographyStyles };

32
packages/tach-typography/dist/angular/index.d.ts vendored
View File

@@ -1,31 +1 @@
import { OnChanges, ElementRef, Renderer2, SimpleChanges } from '@angular/core';
import { T as TypographyClassOptions, d as TypographyRenderOptions, e as TypographyVariant, c as TypographyColor, f as TypographyWeight, E as EllipsisOptions } from '../types-CQyFuLqp.js';
type AngularTypographyClassInput = TypographyClassOptions;
interface AngularTypographyRenderOptions extends TypographyRenderOptions {
preserveStyle?: Record<string, string | number>;
}
declare const tachAngularTypographyClassName: (options?: AngularTypographyClassInput) => string;
declare const tachAngularTypographyClassList: (options?: AngularTypographyClassInput) => string[];
declare const tachAngularTypographyStyles: (ellipsis?: EllipsisOptions, preserveStyle?: Record<string, string | number>) => Record<string, string | number>;
declare class TachTypographyDirective implements OnChanges {
private readonly elementRef;
private readonly renderer;
tachTypography: TypographyVariant | "" | undefined;
tachTypographyVariant: TypographyVariant;
tachTypographyColor: TypographyColor;
tachTypographyWeight: TypographyWeight;
tachTypographyClickable: boolean;
tachTypographyClassName: string | undefined;
tachTypographyEllipsis: EllipsisOptions | undefined;
private readonly appliedClasses;
private readonly appliedStyleProperties;
constructor(elementRef: ElementRef<HTMLElement>, renderer: Renderer2);
ngOnChanges(_changes: SimpleChanges): void;
private syncClasses;
private syncEllipsisStyles;
}
declare class TachTypographyNzModule {
}
export { type AngularTypographyClassInput, type AngularTypographyRenderOptions, TachTypographyDirective, TachTypographyNzModule, tachAngularTypographyClassList, tachAngularTypographyClassName, tachAngularTypographyStyles };
export * from "./angular/index";

201
packages/tach-typography/dist/angular/index.js vendored
View File

@@ -1,200 +1 @@
import { Directive, Input, NgModule } from '@angular/core';
import { NzTypographyModule } from 'ng-zorro-antd/typography';
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __knownSymbol = (name, symbol) => (symbol = Symbol[name]) ? symbol : /* @__PURE__ */ Symbol.for("Symbol." + name);
var __typeError = (msg) => {
throw TypeError(msg);
};
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
var __decoratorStart = (base) => [, , , __create(null)];
var __decoratorStrings = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
var __expectFn = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError("Function expected") : fn;
var __decoratorContext = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError("Already initialized") : fns.push(__expectFn(fn || null)) });
var __decoratorMetadata = (array, target) => __defNormalProp(target, __knownSymbol("metadata"), array[3]);
var __runInitializers = (array, flags, self, value) => {
for (var i = 0, fns = array[flags >> 1], n = fns && fns.length; i < n; i++) flags & 1 ? fns[i].call(self) : value = fns[i].call(self, value);
return value;
};
var __decorateElement = (array, flags, name, decorators, target, extra) => {
var fn, it, done, ctx, access, k = flags & 7, s = !!(flags & 8), p = !!(flags & 16);
var j = k > 3 ? array.length + 1 : k ? s ? 1 : 2 : 0, key = __decoratorStrings[k + 5];
var initializers = k > 3 && (array[j - 1] = []), extraInitializers = array[j] || (array[j] = []);
var desc = k && (!p && !s && (target = target.prototype), k < 5 && (k > 3 || !p) && __getOwnPropDesc(k < 4 ? target : { get [name]() {
return __privateGet(this, extra);
}, set [name](x) {
return __privateSet(this, extra, x);
} }, name));
k ? p && k < 4 && __name(extra, (k > 2 ? "set " : k > 1 ? "get " : "") + name) : __name(target, name);
for (var i = decorators.length - 1; i >= 0; i--) {
ctx = __decoratorContext(k, name, done = {}, array[3], extraInitializers);
if (k) {
ctx.static = s, ctx.private = p, access = ctx.access = { has: p ? (x) => __privateIn(target, x) : (x) => name in x };
if (k ^ 3) access.get = p ? (x) => (k ^ 1 ? __privateGet : __privateMethod)(x, target, k ^ 4 ? extra : desc.get) : (x) => x[name];
if (k > 2) access.set = p ? (x, y) => __privateSet(x, target, y, k ^ 4 ? extra : desc.set) : (x, y) => x[name] = y;
}
it = (0, decorators[i])(k ? k < 4 ? p ? extra : desc[key] : k > 4 ? void 0 : { get: desc.get, set: desc.set } : target, ctx), done._ = 1;
if (k ^ 4 || it === void 0) __expectFn(it) && (k > 4 ? initializers.unshift(it) : k ? p ? extra = it : desc[key] = it : target = it);
else if (typeof it !== "object" || it === null) __typeError("Object expected");
else __expectFn(fn = it.get) && (desc.get = fn), __expectFn(fn = it.set) && (desc.set = fn), __expectFn(fn = it.init) && initializers.unshift(fn);
}
return k || __decoratorMetadata(array, target), desc && __defProp(target, name, desc), p ? k ^ 4 ? extra : desc : target;
};
var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
var __privateIn = (member, obj) => Object(obj) !== obj ? __typeError('Cannot use the "in" operator on this value') : member.has(obj);
var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
// src/core/classnames.ts
var BASE_CLASS = "tach-typography";
var join = (...parts) => parts.filter(Boolean).join(" ");
var tachTypographyClassName = ({
variant = "Body",
color = "primary",
weight = "normal",
clickable = false,
className
} = {}) => {
return join(
BASE_CLASS,
`${BASE_CLASS}--${variant}`,
`${BASE_CLASS}--color-${color}`,
weight === "bold" && `${BASE_CLASS}--bold`,
clickable && `${BASE_CLASS}--pointer`,
className
);
};
var tachTypographyClassList = (options = {}) => {
return tachTypographyClassName(options).split(" ").filter(Boolean);
};
// src/core/ellipsis.ts
var tachTypographyEllipsisStyle = (ellipsis) => {
if (!ellipsis) {
return void 0;
}
const rows = typeof ellipsis === "object" ? ellipsis.rows ?? 1 : 1;
return {
overflow: "hidden",
textOverflow: "ellipsis",
display: "-webkit-box",
WebkitBoxOrient: "vertical",
WebkitLineClamp: rows
};
};
// src/angular/index.ts
var camelToKebab = (value) => value.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
var toCssProperty = (styleKey) => {
if (styleKey.startsWith("Webkit")) {
return `-webkit-${camelToKebab(styleKey.slice(6))}`;
}
return camelToKebab(styleKey);
};
var tachAngularTypographyClassName = (options = {}) => {
return tachTypographyClassName(options);
};
var tachAngularTypographyClassList = (options = {}) => {
return tachTypographyClassList(options);
};
var tachAngularTypographyStyles = (ellipsis, preserveStyle = {}) => {
const ellipsisStyle = tachTypographyEllipsisStyle(ellipsis);
if (!ellipsisStyle) {
return preserveStyle;
}
return {
...ellipsisStyle,
...preserveStyle
};
};
var _tachTypographyEllipsis_dec, _tachTypographyClassName_dec, _tachTypographyClickable_dec, _tachTypographyWeight_dec, _tachTypographyColor_dec, _tachTypographyVariant_dec, _tachTypography_dec, _TachTypographyDirective_decorators, _init;
_TachTypographyDirective_decorators = [Directive({
selector: "[tachTypography]",
standalone: true
})], _tachTypography_dec = [Input()], _tachTypographyVariant_dec = [Input()], _tachTypographyColor_dec = [Input()], _tachTypographyWeight_dec = [Input()], _tachTypographyClickable_dec = [Input()], _tachTypographyClassName_dec = [Input()], _tachTypographyEllipsis_dec = [Input()];
var TachTypographyDirective = class {
constructor(elementRef, renderer) {
this.elementRef = elementRef;
this.renderer = renderer;
__publicField(this, "tachTypography", __runInitializers(_init, 8, this)), __runInitializers(_init, 11, this);
__publicField(this, "tachTypographyVariant", __runInitializers(_init, 12, this, "Body")), __runInitializers(_init, 15, this);
__publicField(this, "tachTypographyColor", __runInitializers(_init, 16, this, "primary")), __runInitializers(_init, 19, this);
__publicField(this, "tachTypographyWeight", __runInitializers(_init, 20, this, "normal")), __runInitializers(_init, 23, this);
__publicField(this, "tachTypographyClickable", __runInitializers(_init, 24, this, false)), __runInitializers(_init, 27, this);
__publicField(this, "tachTypographyClassName", __runInitializers(_init, 28, this)), __runInitializers(_init, 31, this);
__publicField(this, "tachTypographyEllipsis", __runInitializers(_init, 32, this)), __runInitializers(_init, 35, this);
__publicField(this, "appliedClasses", /* @__PURE__ */ new Set());
__publicField(this, "appliedStyleProperties", /* @__PURE__ */ new Set());
}
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);
}
}
};
_init = __decoratorStart();
__decorateElement(_init, 5, "tachTypography", _tachTypography_dec, TachTypographyDirective);
__decorateElement(_init, 5, "tachTypographyVariant", _tachTypographyVariant_dec, TachTypographyDirective);
__decorateElement(_init, 5, "tachTypographyColor", _tachTypographyColor_dec, TachTypographyDirective);
__decorateElement(_init, 5, "tachTypographyWeight", _tachTypographyWeight_dec, TachTypographyDirective);
__decorateElement(_init, 5, "tachTypographyClickable", _tachTypographyClickable_dec, TachTypographyDirective);
__decorateElement(_init, 5, "tachTypographyClassName", _tachTypographyClassName_dec, TachTypographyDirective);
__decorateElement(_init, 5, "tachTypographyEllipsis", _tachTypographyEllipsis_dec, TachTypographyDirective);
TachTypographyDirective = __decorateElement(_init, 0, "TachTypographyDirective", _TachTypographyDirective_decorators, TachTypographyDirective);
__runInitializers(_init, 1, TachTypographyDirective);
var _TachTypographyNzModule_decorators, _init2;
_TachTypographyNzModule_decorators = [NgModule({
imports: [NzTypographyModule, TachTypographyDirective],
exports: [NzTypographyModule, TachTypographyDirective]
})];
var TachTypographyNzModule = class {
};
_init2 = __decoratorStart();
TachTypographyNzModule = __decorateElement(_init2, 0, "TachTypographyNzModule", _TachTypographyNzModule_decorators, TachTypographyNzModule);
__runInitializers(_init2, 1, TachTypographyNzModule);
export { TachTypographyDirective, TachTypographyNzModule, tachAngularTypographyClassList, tachAngularTypographyClassName, tachAngularTypographyStyles };
//# sourceMappingURL=index.js.map
//# sourceMappingURL=index.js.map
export * from "./angular/index.js";

1
packages/tach-typography/dist/angular/index.js.map vendored
View File

File diff suppressed because one or more lines are too long

13
packages/tach-typography/package.json
View File

@@ -1,6 +1,6 @@
{
"name": "@hublib-web/tach-typography",
"version": "0.1.0",
"version": "0.2.0",
"description": "Cross-framework typography package for React and Angular",
"license": "MIT",
"type": "module",
@@ -46,14 +46,14 @@
},
"./angular": {
"types": "./dist/angular/index.d.ts",
"import": "./dist/angular/index.js",
"require": "./dist/angular/index.cjs"
"import": "./dist/angular/index.js"
},
"./styles.css": "./dist/styles.css",
"./styles/typography-vars.scss": "./styles/typography-vars.scss"
},
"scripts": {
"build": "yarn clean && tsup && node ./scripts/copy-styles.mjs",
"build": "yarn clean && tsup && yarn build:angular && node ./scripts/copy-styles.mjs",
"build:angular": "ngc -p tsconfig.angular.json && node ./scripts/fix-angular-entry.mjs",
"clean": "rm -rf dist",
"typecheck": "tsc -p tsconfig.json --noEmit",
"test": "vitest run",
@@ -61,6 +61,9 @@
"storybook": "storybook dev -p 6006",
"storybook:build": "storybook build"
},
"dependencies": {
"tslib": "^2.8.1"
},
"peerDependencies": {
"@angular/animations": ">=17.0.0",
"@angular/common": ">=17.0.0",
@@ -112,6 +115,8 @@
"devDependencies": {
"@angular/animations": "^20.3.17",
"@angular/common": "^20.3.17",
"@angular/compiler": "^20.3.17",
"@angular/compiler-cli": "^20.3.17",
"@angular/core": "^20.3.17",
"@angular/forms": "^20.3.17",
"@angular/platform-browser": "^20.3.17",

12
packages/tach-typography/scripts/fix-angular-entry.mjs Normal file
View File

@@ -0,0 +1,12 @@
import { access, writeFile } from "node:fs/promises";
import path from "node:path";
const distAngularDir = path.resolve("dist/angular");
await access(path.join(distAngularDir, "angular/index.js"));
await access(path.join(distAngularDir, "angular/index.d.ts"));
await writeFile(
path.join(distAngularDir, "index.js"),
'export * from "./angular/index.js";\n',
);
await writeFile(path.join(distAngularDir, "index.d.ts"), 'export * from "./angular/index";\n');

319
packages/tach-typography/src/angular/index.ts
View File

@@ -1,6 +1,19 @@
import { NgModule } from "@angular/core";
import { Directive, ElementRef, Input, OnChanges, Renderer2, SimpleChanges } from "@angular/core";
import { NzTypographyModule } from "ng-zorro-antd/typography";
import { NgStyle, NgSwitch, NgSwitchCase, NgSwitchDefault } from "@angular/common";
import {
ChangeDetectionStrategy,
Component,
Directive,
ElementRef,
EventEmitter,
inject,
Input,
NgModule,
OnChanges,
Output,
Renderer2,
SimpleChanges,
} from "@angular/core";
import { NzTypographyComponent, NzTypographyModule } from "ng-zorro-antd/typography";
import {
tachTypographyClassList,
@@ -20,6 +33,18 @@ export interface AngularTypographyRenderOptions extends TypographyRenderOptions
preserveStyle?: Record<string, string | number>;
}
export type TachTypographyHostTag = "span" | "p" | "a" | "h1" | "h2" | "h3" | "h4";
type NonFunctionNonEmitterKeys<T> = {
[K in keyof T]-?: T[K] extends (...args: never[]) => unknown
? never
: T[K] extends EventEmitter<unknown>
? never
: K;
}[keyof T];
type NzTypographyInputKey = Extract<NonFunctionNonEmitterKeys<NzTypographyComponent>, `nz${string}`>;
export type TachTypographyNzProps = Partial<Pick<NzTypographyComponent, NzTypographyInputKey>>;
export type TachTypographyHostProps = Record<string, unknown>;
const camelToKebab = (value: string): string =>
value.replace(/[A-Z]/g, match => `-${match.toLowerCase()}`);
@@ -133,8 +158,292 @@ export class TachTypographyDirective implements OnChanges {
}
}
@Directive({
selector: "[tachTypographyNzProps]",
standalone: true,
})
export class TachTypographyNzPropsDirective implements OnChanges {
@Input() tachTypographyNzProps: TachTypographyNzProps | null | undefined;
private readonly appliedNzKeys = new Set<string>();
private readonly nzTypography = inject(NzTypographyComponent, { self: true, optional: true });
ngOnChanges(): void {
if (!this.nzTypography) {
return;
}
const nzTypography = this.nzTypography as unknown as Record<string, unknown>;
const nextProps = this.tachTypographyNzProps ?? {};
const nextKeys = new Set<string>();
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);
}
}
}
@Directive({
selector: "[tachTypographyHostProps]",
standalone: true,
})
export class TachTypographyHostPropsDirective implements OnChanges {
@Input() tachTypographyHostProps: TachTypographyHostProps | null | undefined;
private readonly appliedHostProps = new Map<string, "attr" | "prop">();
constructor(
private readonly elementRef: ElementRef<HTMLElement>,
private readonly renderer: Renderer2,
) {}
ngOnChanges(): void {
const nextProps = this.tachTypographyHostProps ?? {};
const nextAppliedProps = new Map<string, "attr" | "prop">();
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);
}
}
private shouldApplyAsAttribute(key: string, value: unknown): boolean {
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;
}
private hasPropertyOnElement(key: string): boolean {
return key in this.elementRef.nativeElement;
}
}
@Component({
selector: "tach-typography",
standalone: true,
imports: [
NzTypographyModule,
TachTypographyDirective,
TachTypographyNzPropsDirective,
TachTypographyHostPropsDirective,
NgSwitch,
NgSwitchCase,
NgSwitchDefault,
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-content />
</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-content />
</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-content />
</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-content />
</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-content />
</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-content />
</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-content />
</span>
</ng-container>
`,
})
export class TachTypographyComponent {
@Input("as") hostTag: TachTypographyHostTag = "span";
@Input() variant: TypographyVariant = "Body";
@Input() color: TypographyColor = "primary";
@Input() weight: TypographyWeight = "normal";
@Input() clickable = false;
@Input() className: string | undefined;
@Input() ellipsis: EllipsisOptions | undefined;
@Input() nzProps: TachTypographyNzProps | undefined;
@Input() hostProps: TachTypographyHostProps | undefined;
@Input() preserveStyle: Record<string, string | number> | undefined;
@Output() readonly tachClick = new EventEmitter<MouseEvent>();
handleClick(event: MouseEvent): void {
this.tachClick.emit(event);
}
}
@NgModule({
imports: [NzTypographyModule, TachTypographyDirective],
exports: [NzTypographyModule, TachTypographyDirective],
imports: [
NzTypographyModule,
TachTypographyDirective,
TachTypographyNzPropsDirective,
TachTypographyHostPropsDirective,
TachTypographyComponent,
],
exports: [
NzTypographyModule,
TachTypographyDirective,
TachTypographyNzPropsDirective,
TachTypographyHostPropsDirective,
TachTypographyComponent,
],
})
export class TachTypographyNzModule {}

1
packages/tach-typography/src/angular/public-api.ts Normal file
View File

@@ -0,0 +1 @@
export * from "./index";

20
packages/tach-typography/tsconfig.angular.json Normal file
View File

@@ -0,0 +1,20 @@
{
"extends": "../../tsconfig.base.json",
"compilerOptions": {
"rootDir": "src",
"outDir": "dist/angular",
"types": ["node"],
"module": "ES2022",
"target": "ES2022",
"declaration": true,
"declarationMap": true,
"sourceMap": true,
"importHelpers": true
},
"angularCompilerOptions": {
"compilationMode": "partial"
},
"files": ["src/angular/public-api.ts"],
"include": ["src/angular/**/*.ts", "src/core/**/*.ts"],
"exclude": ["dist", "src/**/*.test.ts", "src/react", "src/stories"]
}

1
packages/tach-typography/tsup.config.ts
View File

@@ -4,7 +4,6 @@ export default defineConfig({
entry: {
"core/index": "src/core/index.ts",
"react/index": "src/react/index.tsx",
"angular/index": "src/angular/index.ts",
},
format: ["esm", "cjs"],
dts: true,