2023-01-10 15:59:13 +01:00
|
|
|
import { coerceBooleanProperty } from "@angular/cdk/coercion";
|
2022-09-27 11:25:53 +02:00
|
|
|
import { Input, HostBinding, Component } from "@angular/core";
|
2022-03-08 11:50:34 +01:00
|
|
|
|
2022-12-19 23:14:29 +01:00
|
|
|
import { ButtonLikeAbstraction, ButtonType } from "../shared/button-like.abstraction";
|
2022-10-10 16:04:29 +02:00
|
|
|
|
2022-12-19 23:14:29 +01:00
|
|
|
const focusRing = [
|
|
|
|
"focus-visible:tw-ring",
|
|
|
|
"focus-visible:tw-ring-offset-2",
|
|
|
|
"focus-visible:tw-ring-primary-700",
|
|
|
|
"focus-visible:tw-z-10",
|
|
|
|
];
|
2022-03-08 11:50:34 +01:00
|
|
|
|
2022-12-19 23:14:29 +01:00
|
|
|
const buttonStyles: Record<ButtonType, string[]> = {
|
2022-03-08 11:50:34 +01:00
|
|
|
primary: [
|
|
|
|
"tw-border-primary-500",
|
|
|
|
"tw-bg-primary-500",
|
|
|
|
"!tw-text-contrast",
|
|
|
|
"hover:tw-bg-primary-700",
|
|
|
|
"hover:tw-border-primary-700",
|
2024-03-28 17:50:28 +01:00
|
|
|
"disabled:tw-bg-[--button-disabled-primary-bg]",
|
|
|
|
"disabled:tw-border-[--button-disabled-primary-bg]",
|
|
|
|
"disabled:!tw-text-[--button-disabled-primary-text]",
|
2022-09-13 16:20:07 +02:00
|
|
|
"disabled:tw-bg-clip-padding",
|
2023-01-24 17:22:10 +01:00
|
|
|
"disabled:tw-cursor-not-allowed",
|
2022-12-19 23:14:29 +01:00
|
|
|
...focusRing,
|
2022-06-02 11:16:59 +02:00
|
|
|
],
|
2022-03-08 11:50:34 +01:00
|
|
|
secondary: [
|
|
|
|
"tw-bg-transparent",
|
|
|
|
"tw-border-text-muted",
|
|
|
|
"!tw-text-muted",
|
2022-11-29 23:22:23 +01:00
|
|
|
"hover:tw-bg-text-muted",
|
|
|
|
"hover:tw-border-text-muted",
|
2022-03-11 21:00:24 +01:00
|
|
|
"hover:!tw-text-contrast",
|
2024-03-28 17:50:28 +01:00
|
|
|
"disabled:tw-bg-[--button-disabled-secondary-bg]",
|
|
|
|
"disabled:tw-border-[--button-disabled-secondary-border]",
|
|
|
|
"disabled:!tw-text-[--button-disabled-secondary-text]",
|
2023-01-24 17:22:10 +01:00
|
|
|
"disabled:tw-cursor-not-allowed",
|
2022-12-19 23:14:29 +01:00
|
|
|
...focusRing,
|
2022-06-02 11:16:59 +02:00
|
|
|
],
|
2022-03-08 11:50:34 +01:00
|
|
|
danger: [
|
|
|
|
"tw-bg-transparent",
|
|
|
|
"tw-border-danger-500",
|
|
|
|
"!tw-text-danger",
|
|
|
|
"hover:tw-bg-danger-500",
|
|
|
|
"hover:tw-border-danger-500",
|
2022-03-11 21:00:24 +01:00
|
|
|
"hover:!tw-text-contrast",
|
2022-09-13 16:20:07 +02:00
|
|
|
"disabled:tw-bg-transparent",
|
|
|
|
"disabled:tw-border-danger-500/60",
|
|
|
|
"disabled:!tw-text-danger/60",
|
2023-01-24 17:22:10 +01:00
|
|
|
"disabled:tw-cursor-not-allowed",
|
2022-12-19 23:14:29 +01:00
|
|
|
...focusRing,
|
2022-06-02 11:16:59 +02:00
|
|
|
],
|
2022-12-19 23:14:29 +01:00
|
|
|
unstyled: [],
|
2022-03-08 11:50:34 +01:00
|
|
|
};
|
|
|
|
|
2022-09-27 11:25:53 +02:00
|
|
|
@Component({
|
2022-06-02 11:16:59 +02:00
|
|
|
selector: "button[bitButton], a[bitButton]",
|
2022-09-27 11:25:53 +02:00
|
|
|
templateUrl: "button.component.html",
|
2022-10-10 16:04:29 +02:00
|
|
|
providers: [{ provide: ButtonLikeAbstraction, useExisting: ButtonComponent }],
|
2022-03-08 11:50:34 +01:00
|
|
|
})
|
2022-10-10 16:04:29 +02:00
|
|
|
export class ButtonComponent implements ButtonLikeAbstraction {
|
2022-06-02 11:16:59 +02:00
|
|
|
@HostBinding("class") get classList() {
|
2022-03-08 11:50:34 +01:00
|
|
|
return [
|
|
|
|
"tw-font-semibold",
|
|
|
|
"tw-py-1.5",
|
|
|
|
"tw-px-3",
|
2024-03-28 17:50:28 +01:00
|
|
|
"tw-rounded-[--button-border-radius]",
|
2022-03-08 11:50:34 +01:00
|
|
|
"tw-transition",
|
2024-03-28 17:50:28 +01:00
|
|
|
"!tw-border-[length:--button-border-width]",
|
2022-03-08 11:50:34 +01:00
|
|
|
"tw-border-solid",
|
|
|
|
"tw-text-center",
|
|
|
|
"hover:tw-no-underline",
|
|
|
|
"focus:tw-outline-none",
|
2022-06-02 11:16:59 +02:00
|
|
|
]
|
2023-01-10 15:59:13 +01:00
|
|
|
.concat(this.block ? ["tw-w-full", "tw-block"] : ["tw-inline-block"])
|
2022-08-11 03:35:08 +02:00
|
|
|
.concat(buttonStyles[this.buttonType ?? "secondary"]);
|
2022-03-08 11:50:34 +01:00
|
|
|
}
|
2022-06-02 11:16:59 +02:00
|
|
|
|
2022-09-27 11:25:53 +02:00
|
|
|
@HostBinding("attr.disabled")
|
|
|
|
get disabledAttr() {
|
|
|
|
const disabled = this.disabled != null && this.disabled !== false;
|
|
|
|
return disabled || this.loading ? true : null;
|
|
|
|
}
|
|
|
|
|
2022-12-19 23:14:29 +01:00
|
|
|
@Input() buttonType: ButtonType;
|
2023-01-10 15:59:13 +01:00
|
|
|
|
|
|
|
private _block = false;
|
|
|
|
|
|
|
|
@Input()
|
|
|
|
get block(): boolean {
|
|
|
|
return this._block;
|
|
|
|
}
|
|
|
|
|
|
|
|
set block(value: boolean | "") {
|
|
|
|
this._block = coerceBooleanProperty(value);
|
|
|
|
}
|
2022-11-28 14:04:41 +01:00
|
|
|
|
2022-09-27 11:25:53 +02:00
|
|
|
@Input() loading = false;
|
2022-11-28 14:04:41 +01:00
|
|
|
|
2022-09-27 11:25:53 +02:00
|
|
|
@Input() disabled = false;
|
2022-11-28 14:04:41 +01:00
|
|
|
|
2022-12-19 23:14:29 +01:00
|
|
|
setButtonType(value: "primary" | "secondary" | "danger" | "unstyled") {
|
|
|
|
this.buttonType = value;
|
2022-11-28 14:04:41 +01:00
|
|
|
}
|
2022-03-08 11:50:34 +01:00
|
|
|
}
|