Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 | 1x 370x 370x 370x 370x 370x 370x 370x 370x 370x 13x | /**
* Copyright (c) Siemens 2016 - 2025
* SPDX-License-Identifier: MIT
*/
import { NgClass } from '@angular/common';
import {
booleanAttribute,
ChangeDetectionStrategy,
Component,
computed,
input,
output
} from '@angular/core';
import { addIcons, elementLeft2, elementRight2, SiIconComponent } from '@siemens/element-ng/icon';
export type Direction = 'left' | 'right';
@Component({
selector: 'si-calendar-direction-button',
imports: [NgClass, SiIconComponent],
template: `<button
role="button"
type="button"
class="btn btn-circle btn-sm btn-tertiary"
[ngClass]="buttonClass()"
[disabled]="disabled() || null"
[attr.aria-label]="ariaLabel()"
(click)="onClick()"
>
<si-icon class="icon flip-rtl" [icon]="icon()" />
</button>`,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class SiCalendarDirectionButtonComponent {
readonly ariaLabel = input.required<string>();
/** @defaultValue false */
readonly disabled = input(false, { transform: booleanAttribute });
readonly direction = input<Direction>();
/**
* Emit on button click.
*/
readonly clicked = output();
protected readonly icon = computed(() =>
this.direction() === 'left' ? this.icons.elementLeft2 : this.icons.elementRight2
);
protected readonly buttonClass = computed(() =>
this.direction() === 'left' ? 'previous-button' : 'next-button'
);
protected readonly icons = addIcons({ elementLeft2, elementRight2 });
protected onClick(): void {
this.clicked.emit();
}
}
|