mirror of
https://github.com/bitwarden/browser.git
synced 2024-10-09 05:57:40 +02:00
09169cac71
* [CL-254] Rename 500 colors to 600 to prep for UI redesign --------- Co-authored-by: Will Martin <contact@willmartian.com>
55 lines
1.3 KiB
TypeScript
55 lines
1.3 KiB
TypeScript
import { Component, EventEmitter, Input, Output } from "@angular/core";
|
|
|
|
@Component({
|
|
selector: "selectable-avatar",
|
|
template: `<span
|
|
[title]="title"
|
|
(click)="onFire()"
|
|
(keyup.enter)="onFire()"
|
|
tabindex="0"
|
|
[ngClass]="classList"
|
|
>
|
|
<bit-avatar
|
|
appStopClick
|
|
[text]="text"
|
|
size="xlarge"
|
|
[text]="text"
|
|
[color]="color"
|
|
[border]="false"
|
|
[id]="id"
|
|
[border]="border"
|
|
[title]="title"
|
|
>
|
|
</bit-avatar>
|
|
</span>`,
|
|
})
|
|
export class SelectableAvatarComponent {
|
|
@Input() id: string;
|
|
@Input() text: string;
|
|
@Input() title: string;
|
|
@Input() color: string;
|
|
@Input() border = false;
|
|
@Input() selected = false;
|
|
@Output() select = new EventEmitter<string>();
|
|
|
|
onFire() {
|
|
this.select.emit(this.color);
|
|
}
|
|
|
|
get classList() {
|
|
return ["tw-rounded-full tw-inline-block"]
|
|
.concat(["tw-cursor-pointer", "tw-outline", "tw-outline-solid", "tw-outline-offset-1"])
|
|
.concat(
|
|
this.selected
|
|
? ["tw-outline-[3px]", "tw-outline-primary-600"]
|
|
: [
|
|
"tw-outline-0",
|
|
"hover:tw-outline-1",
|
|
"hover:tw-outline-primary-300",
|
|
"focus:tw-outline-2",
|
|
"focus:tw-outline-primary-600",
|
|
],
|
|
);
|
|
}
|
|
}
|