42 lines
996 B
TypeScript
42 lines
996 B
TypeScript
import { Component, input, model, output } from '@angular/core';
|
|
|
|
@Component({
|
|
selector: 'switch',
|
|
imports: [],
|
|
templateUrl: './switch.html',
|
|
styleUrl: './switch.scss',
|
|
host: {
|
|
role: 'switch',
|
|
tabindex: '0',
|
|
'[attr.aria-checked]': 'isActive()',
|
|
'[class.active]': 'isActive()',
|
|
'[class.reduce-motion]': 'reduceMotion()',
|
|
'(click)': 'onClick()',
|
|
'(keydown.enter)': 'onClick()',
|
|
'(keydown.space)': 'onSpaceDown($event)',
|
|
},
|
|
})
|
|
export class Switch {
|
|
isActive = model<boolean>(false);
|
|
reduceMotion = input<boolean>(
|
|
typeof window !== 'undefined'
|
|
? window.matchMedia('(prefers-reduced-motion: reduce)').matches
|
|
: false,
|
|
);
|
|
toggle = output<boolean>();
|
|
|
|
onClick(): void {
|
|
this.isActive.update((value) => !value);
|
|
this.onToggle();
|
|
}
|
|
|
|
onSpaceDown(event: Event): void {
|
|
event.preventDefault(); // 스페이스바 스크롤 방지
|
|
this.onClick();
|
|
}
|
|
|
|
onToggle(): void {
|
|
this.toggle.emit(this.isActive());
|
|
}
|
|
}
|