|
Readonly
tooltip
|
Type : unknown
|
Default value : computed(() => {
const attendance = this.attendance();
if (!attendance) {
return $localize`No attendance information`;
}
if (attendance.remarks) {
return attendance.status.label + ": " + attendance.remarks;
}
return attendance.status.label;
})
|
|
|
import {
Component,
ChangeDetectionStrategy,
computed,
input,
} from "@angular/core";
import { AttendanceItem } from "../../model/attendance-item";
import { MatTooltipModule } from "@angular/material/tooltip";
@Component({
changeDetection: ChangeDetectionStrategy.OnPush,
selector: "app-attendance-day-block",
templateUrl: "./attendance-day-block.component.html",
styleUrls: ["./attendance-day-block.component.scss"],
imports: [MatTooltipModule],
})
export class AttendanceDayBlockComponent {
attendance = input<AttendanceItem>();
readonly tooltip = computed(() => {
const attendance = this.attendance();
if (!attendance) {
return $localize`No attendance information`;
}
if (attendance.remarks) {
return attendance.status.label + ": " + attendance.remarks;
}
return attendance.status.label;
});
}
<div
class="day-cell"
[class.has-remark]="attendance()?.remarks"
[style.backgroundColor]="attendance()?.status?.color"
[matTooltipShowDelay]="200"
[matTooltip]="tooltip()"
matTooltipPosition="above"
>
{{ attendance()?.status?.shortName || "-" }}
</div>
@use "variables/colors";
@use "functions/gradient-helpers";
.day-cell {
padding: 0.28em;
line-height: 1em;
width: 1ch;
}
.has-remark {
background-image: gradient-helpers.top-right-triangle(
colors.$muted-background
);
}
Legend
Html element with directive