mirror of
https://github.com/bitwarden/browser
synced 2025-12-06 00:13:28 +00:00
43 lines
1.1 KiB
TypeScript
43 lines
1.1 KiB
TypeScript
import { booleanAttribute, 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-text-main"],
|
|
h2: ["!tw-text-2xl", "tw-text-main"],
|
|
h3: ["!tw-text-xl", "tw-text-main"],
|
|
h4: ["!tw-text-lg", "tw-text-main"],
|
|
h5: ["!tw-text-base", "tw-text-main"],
|
|
h6: ["!tw-text-sm", "tw-text-main"],
|
|
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-1.5"],
|
|
h6: ["tw-mb-1.5"],
|
|
body1: [],
|
|
body2: [],
|
|
helper: [],
|
|
};
|
|
|
|
@Directive({
|
|
selector: "[bitTypography]",
|
|
})
|
|
export class TypographyDirective {
|
|
readonly bitTypography = input.required<TypographyType>();
|
|
|
|
readonly noMargin = input(false, { transform: booleanAttribute });
|
|
|
|
@HostBinding("class") get classList() {
|
|
return styles[this.bitTypography()].concat(
|
|
!this.noMargin() ? margins[this.bitTypography()] : [],
|
|
);
|
|
}
|
|
}
|