@indice/ng-components
Version:
Indice common components for Angular v12
31 lines • 7.96 kB
JavaScript
import { Component, Inject } from '@angular/core';
import { APP_LANGUAGES } from '../../tokens';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "../../directives/click-outside.directive";
export class LanguageSelectionComponent {
constructor(langsService) {
this.langsService = langsService;
this.menuExpanded = false;
}
ngOnInit() {
}
selectLang(option) {
if (this.langsService?.setSelected) {
this.langsService.setSelected(option.value);
}
}
onClickOutside($event) {
this.menuExpanded = false;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: LanguageSelectionComponent, deps: [{ token: APP_LANGUAGES }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", type: LanguageSelectionComponent, selector: "lib-language-selection", ngImport: i0, template: "<div class=\"relative\" (clickOutside)=\"onClickOutside($event)\">\r\n <button class=\"langs-button\" (click)=\"menuExpanded = !menuExpanded\">\r\n <i class=\"text-xs mr-1 ms-Icon ms-Icon--Globe\"></i>\r\n <ng-container *ngFor=\"let lang of langsService?.options | async\">\r\n <span *ngIf=\"lang.value === langsService?.selected\">{{lang.text}}</span>\r\n </ng-container>\r\n </button>\r\n\r\n <div\r\n [class]=\"menuExpanded ? 'langs-menu-expanded':'langs-menu-collapsed'\" role=\"menu\" aria-orientation=\"vertical\" aria-labelledby=\"menu-button\" tabindex=\"-1\">\r\n <div class=\"py-1\" role=\"none\">\r\n <ng-container *ngFor=\"let lang of langsService?.options | async\">\r\n <a (click)=\"selectLang(lang)\" *ngIf=\"lang.value != langsService?.selected\" class=\"nav-link-profile\" role=\"menuitem\" tabindex=\"-1\" id=\"menu-item-0\">\r\n <i class=\"text-xs mr-1 ms-Icon ms-Icon--GlobeFavorite\"></i>\r\n {{lang.description}}\r\n </a>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: LanguageSelectionComponent, decorators: [{
type: Component,
args: [{ selector: 'lib-language-selection', template: "<div class=\"relative\" (clickOutside)=\"onClickOutside($event)\">\r\n <button class=\"langs-button\" (click)=\"menuExpanded = !menuExpanded\">\r\n <i class=\"text-xs mr-1 ms-Icon ms-Icon--Globe\"></i>\r\n <ng-container *ngFor=\"let lang of langsService?.options | async\">\r\n <span *ngIf=\"lang.value === langsService?.selected\">{{lang.text}}</span>\r\n </ng-container>\r\n </button>\r\n\r\n <div\r\n [class]=\"menuExpanded ? 'langs-menu-expanded':'langs-menu-collapsed'\" role=\"menu\" aria-orientation=\"vertical\" aria-labelledby=\"menu-button\" tabindex=\"-1\">\r\n <div class=\"py-1\" role=\"none\">\r\n <ng-container *ngFor=\"let lang of langsService?.options | async\">\r\n <a (click)=\"selectLang(lang)\" *ngIf=\"lang.value != langsService?.selected\" class=\"nav-link-profile\" role=\"menuitem\" tabindex=\"-1\" id=\"menu-item-0\">\r\n <i class=\"text-xs mr-1 ms-Icon ms-Icon--GlobeFavorite\"></i>\r\n {{lang.description}}\r\n </a>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</div>\r\n" }]
}], ctorParameters: () => [{ type: undefined, decorators: [{
type: Inject,
args: [APP_LANGUAGES]
}] }] });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibGFuZ3VhZ2Utc2VsZWN0aW9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25nLWNvbXBvbmVudHMvc3JjL2xpYi9jb250cm9scy9sYW5ndWFnZS1zZWxlY3Rpb24vbGFuZ3VhZ2Utc2VsZWN0aW9uLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25nLWNvbXBvbmVudHMvc3JjL2xpYi9jb250cm9scy9sYW5ndWFnZS1zZWxlY3Rpb24vbGFuZ3VhZ2Utc2VsZWN0aW9uLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUNBLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxFQUFVLE1BQU0sZUFBZSxDQUFDO0FBQzFELE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxjQUFjLENBQUM7Ozs7QUFPN0MsTUFBTSxPQUFPLDBCQUEwQjtJQUdyQyxZQUEwQyxZQUE4QztRQUE5QyxpQkFBWSxHQUFaLFlBQVksQ0FBa0M7UUFEakYsaUJBQVksR0FBRyxLQUFLLENBQUM7SUFDZ0UsQ0FBQztJQUU3RixRQUFRO0lBQ1IsQ0FBQztJQUVNLFVBQVUsQ0FBQyxNQUFrQjtRQUNsQyxJQUFJLElBQUksQ0FBQyxZQUFZLEVBQUUsV0FBVyxFQUFFLENBQUM7WUFDbkMsSUFBSSxDQUFDLFlBQVksQ0FBQyxXQUFXLENBQUMsTUFBTSxDQUFDLEtBQUssQ0FBQyxDQUFDO1FBQzlDLENBQUM7SUFDSCxDQUFDO0lBRU0sY0FBYyxDQUFDLE1BQVc7UUFDL0IsSUFBSSxDQUFDLFlBQVksR0FBRyxLQUFLLENBQUM7SUFDNUIsQ0FBQzs4R0FoQlUsMEJBQTBCLGtCQUdqQixhQUFhO2tHQUh0QiwwQkFBMEIsOERDVHZDLDhpQ0FvQkE7OzJGRFhhLDBCQUEwQjtrQkFKdEMsU0FBUzsrQkFDRSx3QkFBd0I7OzBCQU1yQixNQUFNOzJCQUFDLGFBQWEiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBNZW51T3B0aW9uIH0gZnJvbSAnLi8uLi8uLi90eXBlcyc7XHJcbmltcG9ydCB7IENvbXBvbmVudCwgSW5qZWN0LCBPbkluaXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgQVBQX0xBTkdVQUdFUyB9IGZyb20gJy4uLy4uL3Rva2Vucyc7XHJcbmltcG9ydCB7IElBcHBMYW5ndWFnZXNTZXJ2aWNlIH0gZnJvbSAnLi4vLi4vdHlwZXMnO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICdsaWItbGFuZ3VhZ2Utc2VsZWN0aW9uJyxcclxuICB0ZW1wbGF0ZVVybDogJy4vbGFuZ3VhZ2Utc2VsZWN0aW9uLmNvbXBvbmVudC5odG1sJ1xyXG59KVxyXG5leHBvcnQgY2xhc3MgTGFuZ3VhZ2VTZWxlY3Rpb25Db21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xyXG5cclxuICBwdWJsaWMgbWVudUV4cGFuZGVkID0gZmFsc2U7XHJcbiAgY29uc3RydWN0b3IoQEluamVjdChBUFBfTEFOR1VBR0VTKSBwdWJsaWMgbGFuZ3NTZXJ2aWNlOiBJQXBwTGFuZ3VhZ2VzU2VydmljZSB8IHVuZGVmaW5lZCkgeyB9XHJcblxyXG4gIG5nT25Jbml0KCk6IHZvaWQge1xyXG4gIH1cclxuXHJcbiAgcHVibGljIHNlbGVjdExhbmcob3B0aW9uOiBNZW51T3B0aW9uKTogdm9pZCB7XHJcbiAgICBpZiAodGhpcy5sYW5nc1NlcnZpY2U/LnNldFNlbGVjdGVkKSB7XHJcbiAgICAgIHRoaXMubGFuZ3NTZXJ2aWNlLnNldFNlbGVjdGVkKG9wdGlvbi52YWx1ZSk7XHJcbiAgICB9XHJcbiAgfVxyXG5cclxuICBwdWJsaWMgb25DbGlja091dHNpZGUoJGV2ZW50OiBhbnkpOiB2b2lkIHtcclxuICAgIHRoaXMubWVudUV4cGFuZGVkID0gZmFsc2U7XHJcbiAgfVxyXG59XHJcbiIsIjxkaXYgY2xhc3M9XCJyZWxhdGl2ZVwiIChjbGlja091dHNpZGUpPVwib25DbGlja091dHNpZGUoJGV2ZW50KVwiPlxyXG4gIDxidXR0b24gY2xhc3M9XCJsYW5ncy1idXR0b25cIiAoY2xpY2spPVwibWVudUV4cGFuZGVkID0gIW1lbnVFeHBhbmRlZFwiPlxyXG4gICAgPGkgY2xhc3M9XCJ0ZXh0LXhzIG1yLTEgbXMtSWNvbiBtcy1JY29uLS1HbG9iZVwiPjwvaT5cclxuICAgIDxuZy1jb250YWluZXIgKm5nRm9yPVwibGV0IGxhbmcgb2YgbGFuZ3NTZXJ2aWNlPy5vcHRpb25zIHwgYXN5bmNcIj5cclxuICAgICAgPHNwYW4gKm5nSWY9XCJsYW5nLnZhbHVlID09PSBsYW5nc1NlcnZpY2U/LnNlbGVjdGVkXCI+e3tsYW5nLnRleHR9fTwvc3Bhbj5cclxuICAgIDwvbmctY29udGFpbmVyPlxyXG4gIDwvYnV0dG9uPlxyXG5cclxuICA8ZGl2XHJcbiAgICBbY2xhc3NdPVwibWVudUV4cGFuZGVkID8gJ2xhbmdzLW1lbnUtZXhwYW5kZWQnOidsYW5ncy1tZW51LWNvbGxhcHNlZCdcIiByb2xlPVwibWVudVwiIGFyaWEtb3JpZW50YXRpb249XCJ2ZXJ0aWNhbFwiIGFyaWEtbGFiZWxsZWRieT1cIm1lbnUtYnV0dG9uXCIgdGFiaW5kZXg9XCItMVwiPlxyXG4gICAgPGRpdiBjbGFzcz1cInB5LTFcIiByb2xlPVwibm9uZVwiPlxyXG4gICAgICA8bmctY29udGFpbmVyICpuZ0Zvcj1cImxldCBsYW5nIG9mIGxhbmdzU2VydmljZT8ub3B0aW9ucyB8IGFzeW5jXCI+XHJcbiAgICAgICAgPGEgKGNsaWNrKT1cInNlbGVjdExhbmcobGFuZylcIiAqbmdJZj1cImxhbmcudmFsdWUgIT0gbGFuZ3NTZXJ2aWNlPy5zZWxlY3RlZFwiIGNsYXNzPVwibmF2LWxpbmstcHJvZmlsZVwiIHJvbGU9XCJtZW51aXRlbVwiIHRhYmluZGV4PVwiLTFcIiBpZD1cIm1lbnUtaXRlbS0wXCI+XHJcbiAgICAgICAgICA8aSBjbGFzcz1cInRleHQteHMgbXItMSBtcy1JY29uIG1zLUljb24tLUdsb2JlRmF2b3JpdGVcIj48L2k+XHJcbiAgICAgICAgICB7e2xhbmcuZGVzY3JpcHRpb259fVxyXG4gICAgICAgIDwvYT5cclxuICAgICAgPC9uZy1jb250YWluZXI+XHJcbiAgICA8L2Rpdj5cclxuICA8L2Rpdj5cclxuPC9kaXY+XHJcbiJdfQ==