@tilde-nlp/ngx-translate 9.0.22 → 9.0.23
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -5526,11 +5526,11 @@ class TldLangListComponent {
|
|
|
5526
5526
|
});
|
|
5527
5527
|
}
|
|
5528
5528
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: TldLangListComponent, deps: [{ token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
|
|
5529
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.1", type: TldLangListComponent, isStandalone: false, selector: "tld-lang-list", inputs: { disabled: "disabled", pxPerLanguage: "pxPerLanguage", languages: "languages", testId: "testId", selected: "selected", maxDisplayedLanguages: "maxDisplayedLanguages", showDomainsWithLanguageName: "showDomainsWithLanguageName" }, outputs: { onLanguageChange: "onLanguageChange", onDomainChange: "onDomainChange" }, viewQueries: [{ propertyName: "wrapper", first: true, predicate: ["wrapper"], descendants: true }, { propertyName: "menu", first: true, predicate: MatMenu, descendants: true }, { propertyName: "openCloseButton", first: true, predicate: OpenCloseButtonComponent, descendants: true }], ngImport: i0, template: "<div fxLayout=\"row\" class=\"tld-lang-list-wrapper\" fxLayoutAlign=\"start center\">\r\n <div fxLayout=\"row\" fxLayoutAlign=\"center center\" role=\"list\" class=\"tld-lang-list\"\r\n [ngClass]=\"{'single-element-list': visibleLanguageList.length === 1}\">\r\n <ng-container *ngIf=\"visibleLanguageList.length>1 else singleLanguageList\">\r\n <div role=\"listitem\" *ngFor=\"let language of visibleLanguageList\" class=\"tld-language-list-element\"\r\n [ngClass]=\"{'active accent-color' : isActive(language)}\">\r\n <ng-template [ngTemplateOutlet]=\"languageButton\" [ngTemplateOutletContext]=\"{ language: language }\">\r\n </ng-template>\r\n </div>\r\n <ng-template *ngIf=\"menuLanguageList.length>0\" [ngTemplateOutlet]=\"menuDropDown\" [ngTemplateOutletContext]=\"{ isIcon: true}\"></ng-template>\r\n </ng-container>\r\n </div>\r\n <ng-content></ng-content>\r\n <mat-menu #languageMenu=\"matMenu\" fxLayout=\"column\" class=\"language-menu\">\r\n <ng-container *ngFor=\"let language of menuLanguageList\">\r\n <ng-template [ngTemplateOutlet]=\"languageButton\" [ngTemplateOutletContext]=\"{ language: language }\"></ng-template>\r\n </ng-container>\r\n </mat-menu>\r\n</div>\r\n\r\n<!-- Template for one visible language with menu languages. -->\r\n<ng-template #singleLanguageList>\r\n <ng-container *ngIf=\" menuLanguageList.length > 0 else UnclickableLanguage\">\r\n <ng-template [ngTemplateOutlet]=\"menuDropDown\" [ngTemplateOutletContext]=\"{ isIcon: false}\"></ng-template>\r\n </ng-container>\r\n</ng-template>\r\n<!-- ------------------------ -->\r\n\r\n<!-- Template if only one language is in list and no menu languages. This language needs no cursor or click events.-->\r\n<ng-template #UnclickableLanguage>\r\n <button color=\"primary\" [attr.aria-label]=\"firstVisible.code | languageTranslate\" *ngIf=\"firstVisible\" class=\"language-title no-highlight no-action\">\r\n <ng-template [ngTemplateOutlet]=\"languageNameWithDomain\" [ngTemplateOutletContext]=\"{ language: firstVisible}\"></ng-template>\r\n </button>\r\n</ng-template>\r\n<!-- ------------------------ -->\r\n\r\n<!-- templates for language names and other small repeated parts of this component-->\r\n<ng-template #menuDropDown let-isIcon=\"isIcon\">\r\n <lib-open-close-button [isIcon]=\"isIcon\" [ngClass]=\"{'language-title no-highlight' : !isIcon}\" [disabled]=\"disabled\"\r\n #state=\"matMenuTrigger\" (menuOpened)=\"onMenuOpen()\" [matMenuTriggerFor]=\"languageMenu\" [isOpened]=\"state.menuOpen\"\r\n [ariaLabelCode]=\"menuTriggerAriaCode\">\r\n <ng-template *ngIf=\"!isIcon\" [ngTemplateOutlet]=\"languageNameWithDomain\"\r\n [ngTemplateOutletContext]=\"{ language: firstVisible }\">\r\n </ng-template>\r\n </lib-open-close-button>\r\n</ng-template>\r\n\r\n<ng-template #languageButton let-language=\"language\">\r\n <button fxLayoutAlign=\"start center\" [ngClass]=\"{'active accent-color' : isActive(language)}\" mat-menu-item\r\n *ngIf=\"language\" class=\"language-title\" (click)=\"selectLanguage(language)\" [disabled]=\"disabled\"\r\n [attr.aria-label]=\"language.code | languageTranslate\">\r\n <span>{{ language.code | languageTranslate }}</span> \r\n <span class=\"domain\" *ngIf=\"language.showDomain\"> ({{language.domain | translateDomain}})</span>\r\n </button>\r\n</ng-template>\r\n\r\n<ng-template #languageNameWithDomain let-language=\"language\">\r\n <span>{{ language.code | languageTranslate }}</span>\r\n <span fxHide.lt-sm *ngIf=\"language.showDomain\">\r\n <span> (</span>\r\n <span class=\"domain\">{{language.domain | translateDomain}}</span>\r\n <span>)</span>\r\n </span>\r\n</ng-template>\r\n<!-- ------------------------ -->", styles: [".tld-lang-list-wrapper{max-width:100%}.tld-lang-list-wrapper .tld-language-list-element{padding:0 12px}.tld-lang-list:not(.single-element-list) .active .language-title:after{position:absolute;bottom
|
|
5529
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.1", type: TldLangListComponent, isStandalone: false, selector: "tld-lang-list", inputs: { disabled: "disabled", pxPerLanguage: "pxPerLanguage", languages: "languages", testId: "testId", selected: "selected", maxDisplayedLanguages: "maxDisplayedLanguages", showDomainsWithLanguageName: "showDomainsWithLanguageName" }, outputs: { onLanguageChange: "onLanguageChange", onDomainChange: "onDomainChange" }, viewQueries: [{ propertyName: "wrapper", first: true, predicate: ["wrapper"], descendants: true }, { propertyName: "menu", first: true, predicate: MatMenu, descendants: true }, { propertyName: "openCloseButton", first: true, predicate: OpenCloseButtonComponent, descendants: true }], ngImport: i0, template: "<div fxLayout=\"row\" class=\"tld-lang-list-wrapper\" fxLayoutAlign=\"start center\">\r\n <div fxLayout=\"row\" fxLayoutAlign=\"center center\" role=\"list\" class=\"tld-lang-list\"\r\n [ngClass]=\"{'single-element-list': visibleLanguageList.length === 1}\">\r\n <ng-container *ngIf=\"visibleLanguageList.length>1 else singleLanguageList\">\r\n <div role=\"listitem\" *ngFor=\"let language of visibleLanguageList\" class=\"tld-language-list-element\"\r\n [ngClass]=\"{'active accent-color' : isActive(language)}\">\r\n <ng-template [ngTemplateOutlet]=\"languageButton\" [ngTemplateOutletContext]=\"{ language: language }\">\r\n </ng-template>\r\n </div>\r\n <ng-template *ngIf=\"menuLanguageList.length>0\" [ngTemplateOutlet]=\"menuDropDown\" [ngTemplateOutletContext]=\"{ isIcon: true}\"></ng-template>\r\n </ng-container>\r\n </div>\r\n <ng-content></ng-content>\r\n <mat-menu #languageMenu=\"matMenu\" fxLayout=\"column\" class=\"language-menu\">\r\n <ng-container *ngFor=\"let language of menuLanguageList\">\r\n <ng-template [ngTemplateOutlet]=\"languageButton\" [ngTemplateOutletContext]=\"{ language: language }\"></ng-template>\r\n </ng-container>\r\n </mat-menu>\r\n</div>\r\n\r\n<!-- Template for one visible language with menu languages. -->\r\n<ng-template #singleLanguageList>\r\n <ng-container *ngIf=\" menuLanguageList.length > 0 else UnclickableLanguage\">\r\n <ng-template [ngTemplateOutlet]=\"menuDropDown\" [ngTemplateOutletContext]=\"{ isIcon: false}\"></ng-template>\r\n </ng-container>\r\n</ng-template>\r\n<!-- ------------------------ -->\r\n\r\n<!-- Template if only one language is in list and no menu languages. This language needs no cursor or click events.-->\r\n<ng-template #UnclickableLanguage>\r\n <button color=\"primary\" [attr.aria-label]=\"firstVisible.code | languageTranslate\" *ngIf=\"firstVisible\" class=\"language-title no-highlight no-action\">\r\n <ng-template [ngTemplateOutlet]=\"languageNameWithDomain\" [ngTemplateOutletContext]=\"{ language: firstVisible}\"></ng-template>\r\n </button>\r\n</ng-template>\r\n<!-- ------------------------ -->\r\n\r\n<!-- templates for language names and other small repeated parts of this component-->\r\n<ng-template #menuDropDown let-isIcon=\"isIcon\">\r\n <lib-open-close-button [isIcon]=\"isIcon\" [ngClass]=\"{'language-title no-highlight' : !isIcon}\" [disabled]=\"disabled\"\r\n #state=\"matMenuTrigger\" (menuOpened)=\"onMenuOpen()\" [matMenuTriggerFor]=\"languageMenu\" [isOpened]=\"state.menuOpen\"\r\n [ariaLabelCode]=\"menuTriggerAriaCode\">\r\n <ng-template *ngIf=\"!isIcon\" [ngTemplateOutlet]=\"languageNameWithDomain\"\r\n [ngTemplateOutletContext]=\"{ language: firstVisible }\">\r\n </ng-template>\r\n </lib-open-close-button>\r\n</ng-template>\r\n\r\n<ng-template #languageButton let-language=\"language\">\r\n <button fxLayoutAlign=\"start center\" [ngClass]=\"{'active accent-color' : isActive(language)}\" mat-menu-item\r\n *ngIf=\"language\" class=\"language-title\" (click)=\"selectLanguage(language)\" [disabled]=\"disabled\"\r\n [attr.aria-label]=\"language.code | languageTranslate\">\r\n <span>{{ language.code | languageTranslate }}</span> \r\n <span class=\"domain\" *ngIf=\"language.showDomain\"> ({{language.domain | translateDomain}})</span>\r\n </button>\r\n</ng-template>\r\n\r\n<ng-template #languageNameWithDomain let-language=\"language\">\r\n <span>{{ language.code | languageTranslate }}</span>\r\n <span fxHide.lt-sm *ngIf=\"language.showDomain\">\r\n <span> (</span>\r\n <span class=\"domain\">{{language.domain | translateDomain}}</span>\r\n <span>)</span>\r\n </span>\r\n</ng-template>\r\n<!-- ------------------------ -->", styles: [".tld-lang-list-wrapper{max-width:100%}.tld-lang-list-wrapper .tld-language-list-element{padding:0 12px}.tld-lang-list:not(.single-element-list) .active .language-title:after{position:absolute;bottom:5px;left:50%;transform:translate(-50%);content:\"\";display:block;width:16px;height:2px}.tld-language-list-element.active .span-block{display:block}.tld-language-list-element.active .domain{display:inline-block;max-width:90px;overflow-x:hidden;text-overflow:ellipsis}.language-title{cursor:pointer;font-size:16px;font-weight:500;position:relative;background-color:transparent;border:none;font-family:Inter,sans-serif}.language-title.no-highlight.no-action{cursor:default}:host ::ng-deep .open-close-button-content span{max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5.OpenCloseButtonComponent, selector: "lib-open-close-button", inputs: ["disableFocusOnAction", "disabled", "isIcon", "ariaLabelCode", "isOpened"] }, { kind: "directive", type: i3.DefaultLayoutDirective, selector: " [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md], [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md], [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm], [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i3.DefaultLayoutAlignDirective, selector: " [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md], [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md], [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm], [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i5$1.DefaultShowHideDirective, selector: " [fxShow], [fxShow.print], [fxShow.xs], [fxShow.sm], [fxShow.md], [fxShow.lg], [fxShow.xl], [fxShow.lt-sm], [fxShow.lt-md], [fxShow.lt-lg], [fxShow.lt-xl], [fxShow.gt-xs], [fxShow.gt-sm], [fxShow.gt-md], [fxShow.gt-lg], [fxHide], [fxHide.print], [fxHide.xs], [fxHide.sm], [fxHide.md], [fxHide.lg], [fxHide.xl], [fxHide.lt-sm], [fxHide.lt-md], [fxHide.lt-lg], [fxHide.lt-xl], [fxHide.gt-xs], [fxHide.gt-sm], [fxHide.gt-md], [fxHide.gt-lg]", inputs: ["fxShow", "fxShow.print", "fxShow.xs", "fxShow.sm", "fxShow.md", "fxShow.lg", "fxShow.xl", "fxShow.lt-sm", "fxShow.lt-md", "fxShow.lt-lg", "fxShow.lt-xl", "fxShow.gt-xs", "fxShow.gt-sm", "fxShow.gt-md", "fxShow.gt-lg", "fxHide", "fxHide.print", "fxHide.xs", "fxHide.sm", "fxHide.md", "fxHide.lg", "fxHide.xl", "fxHide.lt-sm", "fxHide.lt-md", "fxHide.lt-lg", "fxHide.lt-xl", "fxHide.gt-xs", "fxHide.gt-sm", "fxHide.gt-md", "fxHide.gt-lg"] }, { kind: "directive", type: i5$1.DefaultClassDirective, selector: " [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl], [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl], [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "component", type: i6.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i6.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "pipe", type: i5.LanguageTranslatePipe, name: "languageTranslate" }, { kind: "pipe", type: TranslateDomainPipe, name: "translateDomain" }] });
|
|
5530
5530
|
}
|
|
5531
5531
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: TldLangListComponent, decorators: [{
|
|
5532
5532
|
type: Component,
|
|
5533
|
-
args: [{ selector: 'tld-lang-list', standalone: false, template: "<div fxLayout=\"row\" class=\"tld-lang-list-wrapper\" fxLayoutAlign=\"start center\">\r\n <div fxLayout=\"row\" fxLayoutAlign=\"center center\" role=\"list\" class=\"tld-lang-list\"\r\n [ngClass]=\"{'single-element-list': visibleLanguageList.length === 1}\">\r\n <ng-container *ngIf=\"visibleLanguageList.length>1 else singleLanguageList\">\r\n <div role=\"listitem\" *ngFor=\"let language of visibleLanguageList\" class=\"tld-language-list-element\"\r\n [ngClass]=\"{'active accent-color' : isActive(language)}\">\r\n <ng-template [ngTemplateOutlet]=\"languageButton\" [ngTemplateOutletContext]=\"{ language: language }\">\r\n </ng-template>\r\n </div>\r\n <ng-template *ngIf=\"menuLanguageList.length>0\" [ngTemplateOutlet]=\"menuDropDown\" [ngTemplateOutletContext]=\"{ isIcon: true}\"></ng-template>\r\n </ng-container>\r\n </div>\r\n <ng-content></ng-content>\r\n <mat-menu #languageMenu=\"matMenu\" fxLayout=\"column\" class=\"language-menu\">\r\n <ng-container *ngFor=\"let language of menuLanguageList\">\r\n <ng-template [ngTemplateOutlet]=\"languageButton\" [ngTemplateOutletContext]=\"{ language: language }\"></ng-template>\r\n </ng-container>\r\n </mat-menu>\r\n</div>\r\n\r\n<!-- Template for one visible language with menu languages. -->\r\n<ng-template #singleLanguageList>\r\n <ng-container *ngIf=\" menuLanguageList.length > 0 else UnclickableLanguage\">\r\n <ng-template [ngTemplateOutlet]=\"menuDropDown\" [ngTemplateOutletContext]=\"{ isIcon: false}\"></ng-template>\r\n </ng-container>\r\n</ng-template>\r\n<!-- ------------------------ -->\r\n\r\n<!-- Template if only one language is in list and no menu languages. This language needs no cursor or click events.-->\r\n<ng-template #UnclickableLanguage>\r\n <button color=\"primary\" [attr.aria-label]=\"firstVisible.code | languageTranslate\" *ngIf=\"firstVisible\" class=\"language-title no-highlight no-action\">\r\n <ng-template [ngTemplateOutlet]=\"languageNameWithDomain\" [ngTemplateOutletContext]=\"{ language: firstVisible}\"></ng-template>\r\n </button>\r\n</ng-template>\r\n<!-- ------------------------ -->\r\n\r\n<!-- templates for language names and other small repeated parts of this component-->\r\n<ng-template #menuDropDown let-isIcon=\"isIcon\">\r\n <lib-open-close-button [isIcon]=\"isIcon\" [ngClass]=\"{'language-title no-highlight' : !isIcon}\" [disabled]=\"disabled\"\r\n #state=\"matMenuTrigger\" (menuOpened)=\"onMenuOpen()\" [matMenuTriggerFor]=\"languageMenu\" [isOpened]=\"state.menuOpen\"\r\n [ariaLabelCode]=\"menuTriggerAriaCode\">\r\n <ng-template *ngIf=\"!isIcon\" [ngTemplateOutlet]=\"languageNameWithDomain\"\r\n [ngTemplateOutletContext]=\"{ language: firstVisible }\">\r\n </ng-template>\r\n </lib-open-close-button>\r\n</ng-template>\r\n\r\n<ng-template #languageButton let-language=\"language\">\r\n <button fxLayoutAlign=\"start center\" [ngClass]=\"{'active accent-color' : isActive(language)}\" mat-menu-item\r\n *ngIf=\"language\" class=\"language-title\" (click)=\"selectLanguage(language)\" [disabled]=\"disabled\"\r\n [attr.aria-label]=\"language.code | languageTranslate\">\r\n <span>{{ language.code | languageTranslate }}</span> \r\n <span class=\"domain\" *ngIf=\"language.showDomain\"> ({{language.domain | translateDomain}})</span>\r\n </button>\r\n</ng-template>\r\n\r\n<ng-template #languageNameWithDomain let-language=\"language\">\r\n <span>{{ language.code | languageTranslate }}</span>\r\n <span fxHide.lt-sm *ngIf=\"language.showDomain\">\r\n <span> (</span>\r\n <span class=\"domain\">{{language.domain | translateDomain}}</span>\r\n <span>)</span>\r\n </span>\r\n</ng-template>\r\n<!-- ------------------------ -->", styles: [".tld-lang-list-wrapper{max-width:100%}.tld-lang-list-wrapper .tld-language-list-element{padding:0 12px}.tld-lang-list:not(.single-element-list) .active .language-title:after{position:absolute;bottom
|
|
5533
|
+
args: [{ selector: 'tld-lang-list', standalone: false, template: "<div fxLayout=\"row\" class=\"tld-lang-list-wrapper\" fxLayoutAlign=\"start center\">\r\n <div fxLayout=\"row\" fxLayoutAlign=\"center center\" role=\"list\" class=\"tld-lang-list\"\r\n [ngClass]=\"{'single-element-list': visibleLanguageList.length === 1}\">\r\n <ng-container *ngIf=\"visibleLanguageList.length>1 else singleLanguageList\">\r\n <div role=\"listitem\" *ngFor=\"let language of visibleLanguageList\" class=\"tld-language-list-element\"\r\n [ngClass]=\"{'active accent-color' : isActive(language)}\">\r\n <ng-template [ngTemplateOutlet]=\"languageButton\" [ngTemplateOutletContext]=\"{ language: language }\">\r\n </ng-template>\r\n </div>\r\n <ng-template *ngIf=\"menuLanguageList.length>0\" [ngTemplateOutlet]=\"menuDropDown\" [ngTemplateOutletContext]=\"{ isIcon: true}\"></ng-template>\r\n </ng-container>\r\n </div>\r\n <ng-content></ng-content>\r\n <mat-menu #languageMenu=\"matMenu\" fxLayout=\"column\" class=\"language-menu\">\r\n <ng-container *ngFor=\"let language of menuLanguageList\">\r\n <ng-template [ngTemplateOutlet]=\"languageButton\" [ngTemplateOutletContext]=\"{ language: language }\"></ng-template>\r\n </ng-container>\r\n </mat-menu>\r\n</div>\r\n\r\n<!-- Template for one visible language with menu languages. -->\r\n<ng-template #singleLanguageList>\r\n <ng-container *ngIf=\" menuLanguageList.length > 0 else UnclickableLanguage\">\r\n <ng-template [ngTemplateOutlet]=\"menuDropDown\" [ngTemplateOutletContext]=\"{ isIcon: false}\"></ng-template>\r\n </ng-container>\r\n</ng-template>\r\n<!-- ------------------------ -->\r\n\r\n<!-- Template if only one language is in list and no menu languages. This language needs no cursor or click events.-->\r\n<ng-template #UnclickableLanguage>\r\n <button color=\"primary\" [attr.aria-label]=\"firstVisible.code | languageTranslate\" *ngIf=\"firstVisible\" class=\"language-title no-highlight no-action\">\r\n <ng-template [ngTemplateOutlet]=\"languageNameWithDomain\" [ngTemplateOutletContext]=\"{ language: firstVisible}\"></ng-template>\r\n </button>\r\n</ng-template>\r\n<!-- ------------------------ -->\r\n\r\n<!-- templates for language names and other small repeated parts of this component-->\r\n<ng-template #menuDropDown let-isIcon=\"isIcon\">\r\n <lib-open-close-button [isIcon]=\"isIcon\" [ngClass]=\"{'language-title no-highlight' : !isIcon}\" [disabled]=\"disabled\"\r\n #state=\"matMenuTrigger\" (menuOpened)=\"onMenuOpen()\" [matMenuTriggerFor]=\"languageMenu\" [isOpened]=\"state.menuOpen\"\r\n [ariaLabelCode]=\"menuTriggerAriaCode\">\r\n <ng-template *ngIf=\"!isIcon\" [ngTemplateOutlet]=\"languageNameWithDomain\"\r\n [ngTemplateOutletContext]=\"{ language: firstVisible }\">\r\n </ng-template>\r\n </lib-open-close-button>\r\n</ng-template>\r\n\r\n<ng-template #languageButton let-language=\"language\">\r\n <button fxLayoutAlign=\"start center\" [ngClass]=\"{'active accent-color' : isActive(language)}\" mat-menu-item\r\n *ngIf=\"language\" class=\"language-title\" (click)=\"selectLanguage(language)\" [disabled]=\"disabled\"\r\n [attr.aria-label]=\"language.code | languageTranslate\">\r\n <span>{{ language.code | languageTranslate }}</span> \r\n <span class=\"domain\" *ngIf=\"language.showDomain\"> ({{language.domain | translateDomain}})</span>\r\n </button>\r\n</ng-template>\r\n\r\n<ng-template #languageNameWithDomain let-language=\"language\">\r\n <span>{{ language.code | languageTranslate }}</span>\r\n <span fxHide.lt-sm *ngIf=\"language.showDomain\">\r\n <span> (</span>\r\n <span class=\"domain\">{{language.domain | translateDomain}}</span>\r\n <span>)</span>\r\n </span>\r\n</ng-template>\r\n<!-- ------------------------ -->", styles: [".tld-lang-list-wrapper{max-width:100%}.tld-lang-list-wrapper .tld-language-list-element{padding:0 12px}.tld-lang-list:not(.single-element-list) .active .language-title:after{position:absolute;bottom:5px;left:50%;transform:translate(-50%);content:\"\";display:block;width:16px;height:2px}.tld-language-list-element.active .span-block{display:block}.tld-language-list-element.active .domain{display:inline-block;max-width:90px;overflow-x:hidden;text-overflow:ellipsis}.language-title{cursor:pointer;font-size:16px;font-weight:500;position:relative;background-color:transparent;border:none;font-family:Inter,sans-serif}.language-title.no-highlight.no-action{cursor:default}:host ::ng-deep .open-close-button-content span{max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"] }]
|
|
5534
5534
|
}], ctorParameters: () => [{ type: i1.TranslateService }], propDecorators: { wrapper: [{
|
|
5535
5535
|
type: ViewChild,
|
|
5536
5536
|
args: ["wrapper"]
|