97214c3a90
# Conflicts: # src/app/pages/cart/cart.component.ts # src/app/pages/category/category.component.html # src/app/pages/category/category.component.ts # src/app/pages/item-detail/item-detail.component.html # src/app/pages/item-detail/item-detail.component.ts # src/app/pages/legal/company-details/en/company-details-en.component.html # src/app/pages/legal/company-details/hy/company-details-hy.component.html # src/app/pages/legal/company-details/ru/company-details-ru.component.html # src/app/pages/legal/public-offer/en/public-offer-en.component.html # src/app/pages/legal/public-offer/ru/public-offer-ru.component.html # src/app/pages/search/search.component.ts # src/app/services/api.service.ts
49 lines
2.3 KiB
HTML
49 lines
2.3 KiB
HTML
<div class="language-selector" role="listbox">
|
|
<button class="language-button" (click)="toggleDropdown()" (keydown)="onKeyDown($event)" aria-haspopup="listbox" [attr.aria-expanded]="dropdownOpen">
|
|
<img [src]="languageService.getCurrentLanguage()?.flagSvg"
|
|
[alt]="languageService.getCurrentLanguage()?.name"
|
|
class="language-flag">
|
|
<span class="language-code">{{ languageService.getCurrentLanguage()?.code?.toUpperCase() }}</span>
|
|
<svg class="dropdown-arrow" [class.rotated]="dropdownOpen" width="12" height="12" viewBox="0 0 12 12" fill="none">
|
|
<path d="M2.5 4.5L6 8L9.5 4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
</button>
|
|
|
|
<div class="language-dropdown" [class.open]="dropdownOpen">
|
|
@for (lang of languageService.languages; track lang.code) {
|
|
<button
|
|
class="language-option"
|
|
role="option"
|
|
[attr.aria-selected]="languageService.currentLanguage() === lang.code"
|
|
[class.active]="languageService.currentLanguage() === lang.code"
|
|
[class.disabled]="!lang.enabled"
|
|
[disabled]="!lang.enabled"
|
|
(click)="selectLanguage(lang)">
|
|
<img [src]="lang.flagSvg" [alt]="lang.name" class="option-flag">
|
|
<span class="option-name">{{ lang.name }}</span>
|
|
</button>
|
|
}
|
|
</div>
|
|
|
|
<button class="currency-button" (click)="toggleCurrency()">
|
|
<span class="currency-symbol">{{ languageService.getCurrentCurrency()?.symbol }}</span>
|
|
<span class="currency-code">{{ languageService.currentCurrency() }}</span>
|
|
<svg class="dropdown-arrow" [class.rotated]="currencyOpen" width="12" height="12" viewBox="0 0 12 12" fill="none">
|
|
<path d="M2.5 4.5L6 8L9.5 4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
</button>
|
|
|
|
<div class="currency-dropdown" [class.open]="currencyOpen">
|
|
@for (cur of languageService.currencies; track cur.code) {
|
|
<button
|
|
class="currency-option"
|
|
[class.active]="languageService.currentCurrency() === cur.code"
|
|
(click)="selectCurrency(cur)">
|
|
<span class="cur-symbol">{{ cur.symbol }}</span>
|
|
<span class="cur-name">{{ cur.name }}</span>
|
|
<span class="cur-code">{{ cur.code }}</span>
|
|
</button>
|
|
}
|
|
</div>
|
|
</div>
|