45 lines
1.3 KiB
TypeScript
45 lines
1.3 KiB
TypeScript
import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
|
|
import { MatButtonModule } from '@angular/material/button';
|
|
import { MatIcon } from '@angular/material/icon';
|
|
import { MatMenuModule } from '@angular/material/menu';
|
|
import { LocaleStore } from './language.service';
|
|
|
|
@Component({
|
|
selector: 'lib-language-selector',
|
|
standalone: true,
|
|
imports: [MatButtonModule, MatIcon, MatMenuModule],
|
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
template: `
|
|
<button
|
|
mat-icon-button
|
|
[matMenuTriggerFor]="languageMenu"
|
|
class="action-button"
|
|
aria-label="Select language"
|
|
>
|
|
<mat-icon>translate</mat-icon>
|
|
</button>
|
|
<mat-menu #languageMenu="matMenu">
|
|
<button mat-menu-item (click)="languageService.setLocale('en')">
|
|
<span>English</span>
|
|
</button>
|
|
<button mat-menu-item (click)="languageService.setLocale('sl')">
|
|
<span>Slovenian</span>
|
|
</button>
|
|
</mat-menu>
|
|
`,
|
|
styles: [
|
|
`
|
|
.action-button {
|
|
border-radius: 50%;
|
|
transition: background-color 0.2s ease;
|
|
}
|
|
.action-button:hover {
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|
}
|
|
`,
|
|
],
|
|
})
|
|
export class LanguageSelectorComponent {
|
|
protected languageService = inject(LocaleStore);
|
|
}
|