design-angular-kit
Version:
Un toolkit Angular conforme alle linee guida di design per i servizi web della PA
50 lines • 11.3 kB
JavaScript
import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
import { map, startWith } from 'rxjs';
import { TranslateModule } from '@ngx-translate/core';
import { AsyncPipe } from '@angular/common';
import { ItDropdownModule } from '../../core/dropdown/dropdown.module';
import * as i0 from "@angular/core";
import * as i1 from "@ngx-translate/core";
import * as i2 from "../../core/dropdown/dropdown/dropdown.component";
import * as i3 from "../../core/dropdown/dropdown-item/dropdown-item.component";
export class ItLanguageSwitcherComponent {
constructor(translateService) {
this.translateService = translateService;
/**
* Dropdown mode
*/
this.mode = 'link';
this.currentLang$ = this.translateService.onLangChange.pipe(startWith({ lang: translateService.currentLang }), map(event => this.availableLanguages?.find(l => l.code === event.lang)));
}
ngOnInit() {
if (!this.availableLanguages) {
this.availableLanguages = this.translateService.getLangs().map(lang => ({
code: lang,
label: lang,
...(lang === 'it' && { label: 'ITA' }),
...(lang === 'en' && { label: 'ENG' }),
}));
}
else {
this.translateService.addLangs(this.availableLanguages.map(l => l.code)); // Adds custom languages
}
}
/**
* Change the current language
* @param lang the language code
*/
changeLanguage(lang) {
this.translateService.use(lang);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItLanguageSwitcherComponent, deps: [{ token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItLanguageSwitcherComponent, isStandalone: true, selector: "it-language-switcher", inputs: { availableLanguages: "availableLanguages", mode: "mode" }, ngImport: i0, template: "<it-dropdown [mode]=\"mode\">\n <ng-container button>\n <span class=\"visually-hidden\">{{ 'it.utils.selected' | translate: { lang: (currentLang$ | async)?.label } }}</span>\n <span>{{ (currentLang$ | async)?.label || ('it.utils.select-language' | translate) }}</span>\n </ng-container>\n\n @if (availableLanguages) {\n <ng-container list>\n @for (lang of availableLanguages; track lang.code) {\n <it-dropdown-item (click)=\"changeLanguage(lang.code)\" [active]=\"lang.code === (currentLang$ | async)?.code\">\n {{ lang.label }}\n @if (lang.code === (currentLang$ | async)?.code) {\n <span class=\"visually-hidden\">\n {{ 'it.utils.selected' | translate }}\n </span>\n }\n </it-dropdown-item>\n }\n </ng-container>\n }\n</it-dropdown>\n", dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ItDropdownModule }, { kind: "component", type: i2.ItDropdownComponent, selector: "it-dropdown", inputs: ["mode", "color", "direction", "fullWidth", "megamenu", "dark"], outputs: ["showEvent", "shownEvent", "hideEvent", "hiddenEvent"], exportAs: ["itDropdown"] }, { kind: "component", type: i3.ItDropdownItemComponent, selector: "it-dropdown-item", inputs: ["divider", "active", "large", "iconName", "iconPosition", "mode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItLanguageSwitcherComponent, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'it-language-switcher', changeDetection: ChangeDetectionStrategy.OnPush, imports: [AsyncPipe, TranslateModule, ItDropdownModule], template: "<it-dropdown [mode]=\"mode\">\n <ng-container button>\n <span class=\"visually-hidden\">{{ 'it.utils.selected' | translate: { lang: (currentLang$ | async)?.label } }}</span>\n <span>{{ (currentLang$ | async)?.label || ('it.utils.select-language' | translate) }}</span>\n </ng-container>\n\n @if (availableLanguages) {\n <ng-container list>\n @for (lang of availableLanguages; track lang.code) {\n <it-dropdown-item (click)=\"changeLanguage(lang.code)\" [active]=\"lang.code === (currentLang$ | async)?.code\">\n {{ lang.label }}\n @if (lang.code === (currentLang$ | async)?.code) {\n <span class=\"visually-hidden\">\n {{ 'it.utils.selected' | translate }}\n </span>\n }\n </it-dropdown-item>\n }\n </ng-container>\n }\n</it-dropdown>\n" }]
}], ctorParameters: () => [{ type: i1.TranslateService }], propDecorators: { availableLanguages: [{
type: Input
}], mode: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibGFuZ3VhZ2Utc3dpdGNoZXIuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvZGVzaWduLWFuZ3VsYXIta2l0L3NyYy9saWIvY29tcG9uZW50cy91dGlscy9sYW5ndWFnZS1zd2l0Y2hlci9sYW5ndWFnZS1zd2l0Y2hlci5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9kZXNpZ24tYW5ndWxhci1raXQvc3JjL2xpYi9jb21wb25lbnRzL3V0aWxzL2xhbmd1YWdlLXN3aXRjaGVyL2xhbmd1YWdlLXN3aXRjaGVyLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFVLE1BQU0sZUFBZSxDQUFDO0FBQ2xGLE9BQU8sRUFBRSxHQUFHLEVBQWMsU0FBUyxFQUFFLE1BQU0sTUFBTSxDQUFDO0FBQ2xELE9BQU8sRUFBRSxlQUFlLEVBQW9CLE1BQU0scUJBQXFCLENBQUM7QUFFeEUsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQzVDLE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLHFDQUFxQyxDQUFDOzs7OztBQVN2RSxNQUFNLE9BQU8sMkJBQTJCO0lBY3RDLFlBQTZCLGdCQUFrQztRQUFsQyxxQkFBZ0IsR0FBaEIsZ0JBQWdCLENBQWtCO1FBUC9EOztXQUVHO1FBQ00sU0FBSSxHQUE4QixNQUFNLENBQUM7UUFLaEQsSUFBSSxDQUFDLFlBQVksR0FBRyxJQUFJLENBQUMsZ0JBQWdCLENBQUMsWUFBWSxDQUFDLElBQUksQ0FDekQsU0FBUyxDQUFDLEVBQUUsSUFBSSxFQUFFLGdCQUFnQixDQUFDLFdBQVcsRUFBRSxDQUFDLEVBQ2pELEdBQUcsQ0FBQyxLQUFLLENBQUMsRUFBRSxDQUFDLElBQUksQ0FBQyxrQkFBa0IsRUFBRSxJQUFJLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxDQUFDLENBQUMsSUFBSSxLQUFLLEtBQUssQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUN4RSxDQUFDO0lBQ0osQ0FBQztJQUVELFFBQVE7UUFDTixJQUFJLENBQUMsSUFBSSxDQUFDLGtCQUFrQixFQUFFLENBQUM7WUFDN0IsSUFBSSxDQUFDLGtCQUFrQixHQUFHLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxRQUFRLEVBQUUsQ0FBQyxHQUFHLENBQUMsSUFBSSxDQUFDLEVBQUUsQ0FBQyxDQUFDO2dCQUN0RSxJQUFJLEVBQUUsSUFBSTtnQkFDVixLQUFLLEVBQUUsSUFBSTtnQkFDWCxHQUFHLENBQUMsSUFBSSxLQUFLLElBQUksSUFBSSxFQUFFLEtBQUssRUFBRSxLQUFLLEVBQUUsQ0FBQztnQkFDdEMsR0FBRyxDQUFDLElBQUksS0FBSyxJQUFJLElBQUksRUFBRSxLQUFLLEVBQUUsS0FBSyxFQUFFLENBQUM7YUFDdkMsQ0FBQyxDQUFDLENBQUM7UUFDTixDQUFDO2FBQU0sQ0FBQztZQUNOLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLGtCQUFrQixDQUFDLEdBQUcsQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFDLENBQUMsd0JBQXdCO1FBQ3BHLENBQUM7SUFDSCxDQUFDO0lBRUQ7OztPQUdHO0lBQ0ksY0FBYyxDQUFDLElBQVk7UUFDaEMsSUFBSSxDQUFDLGdCQUFnQixDQUFDLEdBQUcsQ0FBQyxJQUFJLENBQUMsQ0FBQztJQUNsQyxDQUFDOzhHQXhDVSwyQkFBMkI7a0dBQTNCLDJCQUEyQixvSkNkeEMsdzBCQXFCQSx1Q0RUWSxTQUFTLDZDQUFFLGVBQWUsMkZBQUUsZ0JBQWdCOzsyRkFFM0MsMkJBQTJCO2tCQVB2QyxTQUFTO2lDQUNJLElBQUksWUFDTixzQkFBc0IsbUJBRWYsdUJBQXVCLENBQUMsTUFBTSxXQUN0QyxDQUFDLFNBQVMsRUFBRSxlQUFlLEVBQUUsZ0JBQWdCLENBQUM7cUZBTzlDLGtCQUFrQjtzQkFBMUIsS0FBSztnQkFLRyxJQUFJO3NCQUFaLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgQ29tcG9uZW50LCBJbnB1dCwgT25Jbml0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBtYXAsIE9ic2VydmFibGUsIHN0YXJ0V2l0aCB9IGZyb20gJ3J4anMnO1xuaW1wb3J0IHsgVHJhbnNsYXRlTW9kdWxlLCBUcmFuc2xhdGVTZXJ2aWNlIH0gZnJvbSAnQG5neC10cmFuc2xhdGUvY29yZSc7XG5pbXBvcnQgeyBBdmFpbGFibGVMYW5ndWFnZSB9IGZyb20gJy4uLy4uLy4uL2ludGVyZmFjZXMvdXRpbHMnO1xuaW1wb3J0IHsgQXN5bmNQaXBlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7IEl0RHJvcGRvd25Nb2R1bGUgfSBmcm9tICcuLi8uLi9jb3JlL2Ryb3Bkb3duL2Ryb3Bkb3duLm1vZHVsZSc7XG5cbkBDb21wb25lbnQoe1xuICBzdGFuZGFsb25lOiB0cnVlLFxuICBzZWxlY3RvcjogJ2l0LWxhbmd1YWdlLXN3aXRjaGVyJyxcbiAgdGVtcGxhdGVVcmw6ICcuL2xhbmd1YWdlLXN3aXRjaGVyLmNvbXBvbmVudC5odG1sJyxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG4gIGltcG9ydHM6IFtBc3luY1BpcGUsIFRyYW5zbGF0ZU1vZHVsZSwgSXREcm9wZG93bk1vZHVsZV0sXG59KVxuZXhwb3J0IGNsYXNzIEl0TGFuZ3VhZ2VTd2l0Y2hlckNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XG4gIC8qKlxuICAgKiBUaGUgYXZhaWxhYmxlIGxhbmd1YWdlc1xuICAgKiBAZGVmYXVsdCBUaGUgbGFuZ3VhZ2VzIGF2YWlsYWJsZSB0aHJvdWdoIFRyYW5zbGF0ZVNlcnZpY2UgKG5neC10cmFuc2xhdGUpXG4gICAqL1xuICBASW5wdXQoKSBhdmFpbGFibGVMYW5ndWFnZXM6IEFycmF5PEF2YWlsYWJsZUxhbmd1YWdlPiB8IHVuZGVmaW5lZDtcblxuICAvKipcbiAgICogRHJvcGRvd24gbW9kZVxuICAgKi9cbiAgQElucHV0KCkgbW9kZTogJ2J1dHRvbicgfCAnbGluaycgfCAnbmF2JyA9ICdsaW5rJztcblxuICBwcm90ZWN0ZWQgY3VycmVudExhbmckOiBPYnNlcnZhYmxlPEF2YWlsYWJsZUxhbmd1YWdlIHwgdW5kZWZpbmVkPjtcblxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIHJlYWRvbmx5IHRyYW5zbGF0ZVNlcnZpY2U6IFRyYW5zbGF0ZVNlcnZpY2UpIHtcbiAgICB0aGlzLmN1cnJlbnRMYW5nJCA9IHRoaXMudHJhbnNsYXRlU2VydmljZS5vbkxhbmdDaGFuZ2UucGlwZShcbiAgICAgIHN0YXJ0V2l0aCh7IGxhbmc6IHRyYW5zbGF0ZVNlcnZpY2UuY3VycmVudExhbmcgfSksXG4gICAgICBtYXAoZXZlbnQgPT4gdGhpcy5hdmFpbGFibGVMYW5ndWFnZXM/LmZpbmQobCA9PiBsLmNvZGUgPT09IGV2ZW50LmxhbmcpKVxuICAgICk7XG4gIH1cblxuICBuZ09uSW5pdCgpOiB2b2lkIHtcbiAgICBpZiAoIXRoaXMuYXZhaWxhYmxlTGFuZ3VhZ2VzKSB7XG4gICAgICB0aGlzLmF2YWlsYWJsZUxhbmd1YWdlcyA9IHRoaXMudHJhbnNsYXRlU2VydmljZS5nZXRMYW5ncygpLm1hcChsYW5nID0+ICh7XG4gICAgICAgIGNvZGU6IGxhbmcsXG4gICAgICAgIGxhYmVsOiBsYW5nLFxuICAgICAgICAuLi4obGFuZyA9PT0gJ2l0JyAmJiB7IGxhYmVsOiAnSVRBJyB9KSxcbiAgICAgICAgLi4uKGxhbmcgPT09ICdlbicgJiYgeyBsYWJlbDogJ0VORycgfSksXG4gICAgICB9KSk7XG4gICAgfSBlbHNlIHtcbiAgICAgIHRoaXMudHJhbnNsYXRlU2VydmljZS5hZGRMYW5ncyh0aGlzLmF2YWlsYWJsZUxhbmd1YWdlcy5tYXAobCA9PiBsLmNvZGUpKTsgLy8gQWRkcyBjdXN0b20gbGFuZ3VhZ2VzXG4gICAgfVxuICB9XG5cbiAgLyoqXG4gICAqIENoYW5nZSB0aGUgY3VycmVudCBsYW5ndWFnZVxuICAgKiBAcGFyYW0gbGFuZyB0aGUgbGFuZ3VhZ2UgY29kZVxuICAgKi9cbiAgcHVibGljIGNoYW5nZUxhbmd1YWdlKGxhbmc6IHN0cmluZyk6IHZvaWQge1xuICAgIHRoaXMudHJhbnNsYXRlU2VydmljZS51c2UobGFuZyk7XG4gIH1cbn1cbiIsIjxpdC1kcm9wZG93biBbbW9kZV09XCJtb2RlXCI+XG4gIDxuZy1jb250YWluZXIgYnV0dG9uPlxuICAgIDxzcGFuIGNsYXNzPVwidmlzdWFsbHktaGlkZGVuXCI+e3sgJ2l0LnV0aWxzLnNlbGVjdGVkJyB8IHRyYW5zbGF0ZTogeyBsYW5nOiAoY3VycmVudExhbmckIHwgYXN5bmMpPy5sYWJlbCB9IH19PC9zcGFuPlxuICAgIDxzcGFuPnt7IChjdXJyZW50TGFuZyQgfCBhc3luYyk/LmxhYmVsIHx8ICgnaXQudXRpbHMuc2VsZWN0LWxhbmd1YWdlJyB8IHRyYW5zbGF0ZSkgfX08L3NwYW4+XG4gIDwvbmctY29udGFpbmVyPlxuXG4gIEBpZiAoYXZhaWxhYmxlTGFuZ3VhZ2VzKSB7XG4gICAgPG5nLWNvbnRhaW5lciBsaXN0PlxuICAgICAgQGZvciAobGFuZyBvZiBhdmFpbGFibGVMYW5ndWFnZXM7IHRyYWNrIGxhbmcuY29kZSkge1xuICAgICAgICA8aXQtZHJvcGRvd24taXRlbSAoY2xpY2spPVwiY2hhbmdlTGFuZ3VhZ2UobGFuZy5jb2RlKVwiIFthY3RpdmVdPVwibGFuZy5jb2RlID09PSAoY3VycmVudExhbmckIHwgYXN5bmMpPy5jb2RlXCI+XG4gICAgICAgICAge3sgbGFuZy5sYWJlbCB9fVxuICAgICAgICAgIEBpZiAobGFuZy5jb2RlID09PSAoY3VycmVudExhbmckIHwgYXN5bmMpPy5jb2RlKSB7XG4gICAgICAgICAgICA8c3BhbiBjbGFzcz1cInZpc3VhbGx5LWhpZGRlblwiPlxuICAgICAgICAgICAgICB7eyAnaXQudXRpbHMuc2VsZWN0ZWQnIHwgdHJhbnNsYXRlIH19XG4gICAgICAgICAgICA8L3NwYW4+XG4gICAgICAgICAgfVxuICAgICAgICA8L2l0LWRyb3Bkb3duLWl0ZW0+XG4gICAgICB9XG4gICAgPC9uZy1jb250YWluZXI+XG4gIH1cbjwvaXQtZHJvcGRvd24+XG4iXX0=