55 lines
1.3 KiB
TypeScript
55 lines
1.3 KiB
TypeScript
import { Input, HostBinding, Directive } from "@angular/core";
|
|
|
|
export type LinkType = "primary" | "secondary" | "contrast";
|
|
|
|
const linkStyles: Record<LinkType, string[]> = {
|
|
primary: [
|
|
"!tw-text-primary-500",
|
|
"hover:!tw-text-primary-500",
|
|
"focus-visible:tw-ring-primary-700",
|
|
"disabled:!tw-text-primary-500/60",
|
|
],
|
|
secondary: [
|
|
"!tw-text-main",
|
|
"hover:!tw-text-main",
|
|
"focus-visible:tw-ring-primary-700",
|
|
"disabled:!tw-text-muted/60",
|
|
],
|
|
contrast: [
|
|
"!tw-text-contrast",
|
|
"hover:!tw-text-contrast",
|
|
"focus-visible:tw-ring-text-contrast",
|
|
"disabled:!tw-text-contrast/60",
|
|
],
|
|
};
|
|
|
|
@Directive({
|
|
selector: "button[bitLink], a[bitLink]",
|
|
})
|
|
export class LinkDirective {
|
|
@HostBinding("class") get classList() {
|
|
return [
|
|
"tw-font-semibold",
|
|
"tw-py-0.5",
|
|
"tw-px-0",
|
|
"tw-bg-transparent",
|
|
"tw-border-0",
|
|
"tw-border-none",
|
|
"tw-rounded",
|
|
"tw-transition",
|
|
"hover:tw-underline",
|
|
"hover:tw-decoration-1",
|
|
"focus-visible:tw-outline-none",
|
|
"focus-visible:tw-underline",
|
|
"focus-visible:tw-decoration-1",
|
|
"focus-visible:tw-ring-2",
|
|
"focus-visible:tw-z-10",
|
|
"disabled:tw-no-underline",
|
|
"disabled:tw-cursor-not-allowed",
|
|
].concat(linkStyles[this.linkType] ?? []);
|
|
}
|
|
|
|
@Input()
|
|
linkType: LinkType = "primary";
|
|
}
|