46 lines
1.2 KiB
TypeScript
46 lines
1.2 KiB
TypeScript
import { coerceBooleanProperty } from "@angular/cdk/coercion";
|
|
import { Directive, HostBinding, Input } from "@angular/core";
|
|
|
|
type TypographyType = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "body1" | "body2" | "helper";
|
|
|
|
const styles: Record<TypographyType, string[]> = {
|
|
h1: ["tw-text-3xl", "tw-font-semibold"],
|
|
h2: ["tw-text-2xl", "tw-font-semibold"],
|
|
h3: ["tw-text-xl", "tw-font-semibold"],
|
|
h4: ["tw-text-lg", "tw-font-semibold"],
|
|
h5: ["tw-text-base", "tw-font-semibold"],
|
|
h6: ["tw-text-sm", "tw-font-semibold"],
|
|
body1: ["tw-text-base"],
|
|
body2: ["tw-text-sm"],
|
|
helper: ["tw-text-xs"],
|
|
};
|
|
|
|
const margins: Record<TypographyType, string[]> = {
|
|
h1: ["tw-mb-2"],
|
|
h2: ["tw-mb-2"],
|
|
h3: ["tw-mb-2"],
|
|
h4: ["tw-mb-2"],
|
|
h5: ["tw-mb-2"],
|
|
h6: ["tw-mb-2"],
|
|
body1: [],
|
|
body2: [],
|
|
helper: [],
|
|
};
|
|
|
|
@Directive({
|
|
selector: "[bitTypography]",
|
|
})
|
|
export class TypographyDirective {
|
|
@Input("bitTypography") bitTypography: TypographyType;
|
|
|
|
private _margin = true;
|
|
@Input()
|
|
set noMargin(value: boolean | "") {
|
|
this._margin = !coerceBooleanProperty(value);
|
|
}
|
|
|
|
@HostBinding("class") get classList() {
|
|
return styles[this.bitTypography].concat(this._margin ? margins[this.bitTypography] : []);
|
|
}
|
|
}
|