@tilde-nlp/ngx-common 4.1.2 → 4.1.4
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.
- package/esm2022/lib/filter-bar/filter-bar.component.mjs +36 -4
- package/esm2022/lib/filter-bar/models/filter-bar-filter-search.model.mjs +2 -0
- package/esm2022/lib/filter-bar/models/filter-bar-filter-single-selection.model.mjs +2 -0
- package/esm2022/lib/filter-bar/models/filter-bar-filter.model.mjs +1 -1
- package/esm2022/lib/status-display/models/status-display-config.model.mjs +1 -1
- package/esm2022/lib/terminology/components/terminology-panel/terminology-panel.component.mjs +7 -4
- package/esm2022/lib/terminology/terminology.component.mjs +6 -3
- package/fesm2022/tilde-nlp-ngx-common.mjs +46 -8
- package/fesm2022/tilde-nlp-ngx-common.mjs.map +1 -1
- package/lib/filter-bar/filter-bar.component.d.ts +6 -1
- package/lib/filter-bar/models/filter-bar-filter-search.model.d.ts +9 -0
- package/lib/filter-bar/models/filter-bar-filter-single-selection.model.d.ts +13 -0
- package/lib/filter-bar/models/filter-bar-filter.model.d.ts +14 -1
- package/lib/status-display/models/status-display-config.model.d.ts +1 -1
- package/lib/terminology/components/terminology-panel/terminology-panel.component.d.ts +2 -1
- package/lib/terminology/terminology.component.d.ts +2 -1
- package/package.json +1 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Injectable, EventEmitter, Component, Output, Input, ViewChild, NgModule, Optional, Inject, Pipe, Directive, HostListener, HostBinding, ElementRef, ContentChildren, ContentChild } from '@angular/core';
|
|
2
|
+
import { Injectable, EventEmitter, Component, Output, Input, ViewChild, NgModule, Optional, Inject, Pipe, Directive, HostListener, HostBinding, ElementRef, ViewChildren, ContentChildren, ContentChild } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/material/icon';
|
|
4
4
|
import { MatIconModule } from '@angular/material/icon';
|
|
5
5
|
import * as i2 from '@angular/platform-browser';
|
|
@@ -1972,6 +1972,35 @@ class FilterBarComponent {
|
|
|
1972
1972
|
ngOnDestroy() {
|
|
1973
1973
|
this.formChangesSubscription.unsubscribe();
|
|
1974
1974
|
}
|
|
1975
|
+
focusOptionSearchInput(filter, select, index) {
|
|
1976
|
+
if (!filter.search?.placeholder) {
|
|
1977
|
+
return;
|
|
1978
|
+
}
|
|
1979
|
+
setTimeout(() => {
|
|
1980
|
+
this.optionSearchInputs.find((_item, i) => i === index)?.nativeElement.focus();
|
|
1981
|
+
}, 300);
|
|
1982
|
+
if (filter.maxPanelWidth === '' && filter.search.placeholder) {
|
|
1983
|
+
this.setMaxPanelWidth(filter, select);
|
|
1984
|
+
}
|
|
1985
|
+
}
|
|
1986
|
+
filterOptions(event, filter) {
|
|
1987
|
+
const target = event.target;
|
|
1988
|
+
this.settings.filters?.map((item) => {
|
|
1989
|
+
if (item.fieldName === filter.fieldName && item.search) {
|
|
1990
|
+
item.search.filteredValues = filter.values.filter((value) => (item.translated ? value.key : this.translate.instant(value.key)).toLowerCase().includes(target.value));
|
|
1991
|
+
}
|
|
1992
|
+
});
|
|
1993
|
+
}
|
|
1994
|
+
setMaxPanelWidth(filter, select) {
|
|
1995
|
+
const openedMenuOptionWidth = document.querySelector('.filter-option')?.clientWidth;
|
|
1996
|
+
const filterObj = this.settings.filters?.find((item) => item.fieldName === filter.fieldName);
|
|
1997
|
+
filterObj.maxPanelWidth = openedMenuOptionWidth;
|
|
1998
|
+
// select should be rerendered to get maxPanelWith applied
|
|
1999
|
+
select.toggle();
|
|
2000
|
+
setTimeout(() => {
|
|
2001
|
+
select.toggle();
|
|
2002
|
+
});
|
|
2003
|
+
}
|
|
1975
2004
|
emitFilters() {
|
|
1976
2005
|
this.filterBarChange.next(this.filters);
|
|
1977
2006
|
}
|
|
@@ -2016,14 +2045,17 @@ class FilterBarComponent {
|
|
|
2016
2045
|
});
|
|
2017
2046
|
}
|
|
2018
2047
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterBarComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$2.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2019
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FilterBarComponent, selector: "tld-filter-bar", inputs: { settings: "settings", filterRowVisible: "filterRowVisible" }, outputs: { filterBarChange: "filterBarChange" }, host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "filterWrapper", first: true, predicate: ["filterWrapper"], descendants: true }], ngImport: i0, template: "<div class=\"filter-row\" *ngIf=\"filterRowVisible\">\r\n <div fxLayout=\"row\" class=\"filter-wrapper\" #filterWrapper [formGroup]=\"form\">\r\n <mat-form-field fxFlex *ngIf=\"showSearch && !filterOverflow || activeFilterIndex === searchIndex\" class=\"filter-bar-search-input\">\r\n <span matPrefix class=\"material-icons-outlined\">\r\n {{prefixIcon}}\r\n </span>\r\n <span matSuffix class=\"material-icons-outlined\" *ngIf=\"showSuffixIcon\" [matTooltip]=\"searchTooltip | translate\">\r\n {{suffixIcon}}\r\n </span>\r\n <input class=\"search-input\" matInput [placeholder]=\"searchTitle | translate\"\r\n [formControlName]=\"inputFormControlName\">\r\n </mat-form-field>\r\n <ng-container [formGroup]=\"filterFormGroup\">\r\n\r\n <mat-form-field [ngClass]=\"{'hidden': filterOverflow && activeFilterIndex !== i, 'engine-filter': !filterOverflow}\" *ngFor=\"let filter of settings?.filters; let i = index\">\r\n <mat-label>{{filter.title | translate}}</mat-label>\r\n <mat-select multiple [formControlName]=\"filter.fieldName\">\r\n <ng-container *ngIf=\"filter.values.length\">\r\n <ng-container *ngIf=\"filter.translated; else sortedValuesByProperty\">\r\n <mat-option *ngFor=\"let value of filter.values | sortAlphabetically:'key'\" [value]=\"value\">\r\n {{ value.key | titlecase }}\r\n </mat-option>\r\n </ng-container>\r\n \r\n <ng-template #sortedValuesByProperty>\r\n <mat-option *ngFor=\"let value of filter.values | sortTranslationsByProperty:'key':'value'\" [value]=\"value\">\r\n {{value.key | translate : {default: value.value | titlecase } }}\r\n </mat-option>\r\n </ng-template>\r\n </ng-container>\r\n </mat-select>\r\n </mat-form-field>\r\n </ng-container>\r\n </div>\r\n <button mat-icon-button (click)=\"switchLeft()\" *ngIf=\"filterOverflow\">\r\n <span class=\"material-icons-outlined\">\r\n arrow_back_ios\r\n </span>\r\n </button>\r\n <button mat-icon-button *ngIf=\"filterOverflow\" (click)=\"switchRight()\">\r\n <span class=\"material-icons-outlined\">\r\n arrow_forward_ios\r\n </span>\r\n </button>\r\n</div>\r\n<mat-chip-listbox>\r\n <div *ngFor=\"let filter of settings?.filters\">\r\n <mat-chip-option *ngFor=\"let filterValue of filterFormGroupValue[filter.fieldName]; let ix=index\"\r\n (removed)=\"removeFilter(filter.fieldName, ix)\" class=\"text-s\">\r\n <button matChipRemove>\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n <span class=\"chip-filter-title\">{{filter.title | translate}}:</span>\r\n <span class=\"chip-value semi-bold\"> {{(filter.translated ? filterValue.key : filterValue.key | translate : {default: filterValue.value}) | titlecase\r\n }}</span>\r\n </mat-chip-option>\r\n </div>\r\n</mat-chip-listbox>\r\n", styles: [":host{display:inline-block}.filter-row{display:flex;background-color:var(--base-95);min-height:40px;min-width:100%;border-radius:.5rem;padding:1.25rem 1.25rem 0;max-width:100%;align-items:baseline;margin-bottom:.5rem}.search-input{background-color:unset;border:none}.engine-filter{margin-left:1rem}.filter-bar-search-input{width:100%}.filter-bar-search-input::ng-deep .material-icons-outlined{vertical-align:bottom}.material-icons-outlined{color:var(--base-40)}.filter-wrapper{max-width:100%;overflow-x:hidden;overflow-y:hidden;display:flex;flex:1}.mat-mdc-chip.mat-mdc-standard-chip{background-color:var(--base-95);padding-left:.5em;padding-right:.75em;border:.5px solid var(--base-70)}.mat-mdc-chip.mat-mdc-standard-chip span{display:inline-block}.mat-mdc-chip.mat-mdc-standard-chip .chip-filter-title+.chip-value{margin-left:.25rem}.chip-filter-title{margin-left:.5em}.hidden{display:none}:host ::ng-deep .mat-mdc-form-field-focus-overlay,:host ::ng-deep .mdc-text-field--filled:not(.mdc-text-field--disabled){background-color:var(--base-95)}:host ::ng-deep .mat-mdc-chip-graphic{display:none}:host ::ng-deep .mat-mdc-chip-remove{color:var(--base-40)!important}\n"], dependencies: [{ kind: "directive", type: i2$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i2$3.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: i2$3.DefaultFlexDirective, selector: " [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md], [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md], [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm], [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i6.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: i7.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i8.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i4$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i12.MatChipListbox, selector: "mat-chip-listbox", inputs: ["tabIndex", "multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i12.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["color", "disabled", "disableRipple", "tabIndex", "selectable", "selected"], outputs: ["selectionChange"] }, { kind: "directive", type: i12.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: i2$2.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: SortTranslationsByPropertyPipe, name: "sortTranslationsByProperty" }, { kind: "pipe", type: SortAlphabeticallyPipe, name: "sortAlphabetically" }] }); }
|
|
2048
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FilterBarComponent, selector: "tld-filter-bar", inputs: { settings: "settings", filterRowVisible: "filterRowVisible" }, outputs: { filterBarChange: "filterBarChange" }, host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "filterWrapper", first: true, predicate: ["filterWrapper"], descendants: true }, { propertyName: "optionSearchInputs", predicate: ["optionSearchInput"], descendants: true }], ngImport: i0, template: "<div class=\"filter-row\" *ngIf=\"filterRowVisible\">\r\n <div fxLayout=\"row\" class=\"filter-wrapper\" #filterWrapper [formGroup]=\"form\">\r\n <mat-form-field fxFlex *ngIf=\"showSearch && !filterOverflow || activeFilterIndex === searchIndex\" class=\"filter-bar-search-input\">\r\n <span matPrefix class=\"material-icons-outlined\">\r\n {{prefixIcon}}\r\n </span>\r\n <span matSuffix class=\"material-icons-outlined\" *ngIf=\"showSuffixIcon\" [matTooltip]=\"searchTooltip | translate\">\r\n {{suffixIcon}}\r\n </span>\r\n <input class=\"search-input\" matInput [placeholder]=\"searchTitle | translate\"\r\n [formControlName]=\"inputFormControlName\">\r\n </mat-form-field>\r\n <ng-container [formGroup]=\"filterFormGroup\">\r\n\r\n <mat-form-field [ngClass]=\"{'hidden': filterOverflow && activeFilterIndex !== i, 'engine-filter': !filterOverflow}\" *ngFor=\"let filter of settings?.filters; let i = index\">\r\n <mat-label>{{filter.title | translate}}</mat-label>\r\n <mat-select #select multiple [panelWidth]=\"filter?.maxPanelWidth ?? 'auto'\" [formControlName]=\"filter.fieldName\" (openedChange)=\"$event === true ? focusOptionSearchInput(filter, select, i) : null\">\r\n <ng-container *ngIf=\"filter?.search?.placeholder\">\r\n <input #optionSearchInput class=\"option-search-input\" type=\"text\" [placeholder]=\"filter.search?.placeholder ?? '' | translate\" (keyup)=\"filterOptions($event, filter)\" (keydown)=\"$event.stopPropagation()\">\r\n </ng-container>\r\n \r\n <ng-container *ngIf=\"filter.values.length\">\r\n <ng-container *ngIf=\"filter.translated; else sortedValuesByProperty\">\r\n <mat-option class=\"filter-option\" *ngFor=\"let value of (filter.search?.filteredValues ?? filter.values) | sortAlphabetically:'key'\" [disabled]=\"filter.singleSelection?.selected && filter.singleSelection?.value !== value.value\" [value]=\"value\">\r\n {{ filter.disableTitleCase ? value.key : (value.key | titlecase) }}\r\n </mat-option>\r\n </ng-container>\r\n \r\n <ng-template #sortedValuesByProperty>\r\n <mat-option class=\"filter-option\" *ngFor=\"let value of (filter.search?.filteredValues ?? filter.values) | sortTranslationsByProperty:'key':'value'\" [disabled]=\"filter.singleSelection?.selected && filter.singleSelection?.value !== value.value\" [value]=\"value\">\r\n <ng-container *ngIf=\"!filter.disableTitleCase; else defaultCase\">\r\n {{ value.key | translate : { default: value.value | titlecase } }}\r\n </ng-container>\r\n\r\n <ng-template #defaultCase>\r\n {{ value.key | translate : { default: value.value } }} \r\n </ng-template>\r\n </mat-option>\r\n </ng-template>\r\n </ng-container>\r\n </mat-select>\r\n </mat-form-field>\r\n </ng-container>\r\n </div>\r\n <button mat-icon-button (click)=\"switchLeft()\" *ngIf=\"filterOverflow\">\r\n <span class=\"material-icons-outlined\">\r\n arrow_back_ios\r\n </span>\r\n </button>\r\n <button mat-icon-button *ngIf=\"filterOverflow\" (click)=\"switchRight()\">\r\n <span class=\"material-icons-outlined\">\r\n arrow_forward_ios\r\n </span>\r\n </button>\r\n</div>\r\n<mat-chip-listbox>\r\n <div *ngFor=\"let filter of settings?.filters\">\r\n <mat-chip-option *ngFor=\"let filterValue of filterFormGroupValue[filter.fieldName]; let ix=index\"\r\n (removed)=\"removeFilter(filter.fieldName, ix)\" class=\"text-s\">\r\n <button matChipRemove>\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n <span class=\"chip-filter-title\">{{filter.title | translate}}:</span>\r\n <span class=\"chip-value semi-bold\"> {{(filter.translated ? filterValue.key : filterValue.key | translate : {default: filterValue.value}) | titlecase\r\n }}</span>\r\n </mat-chip-option>\r\n </div>\r\n</mat-chip-listbox>\r\n", styles: [":host{display:inline-block}.filter-row{display:flex;background-color:var(--base-95);min-height:40px;min-width:100%;border-radius:.5rem;padding:1.25rem 1.25rem 0;max-width:100%;align-items:baseline;margin-bottom:.5rem}.option-search-input{padding:1rem;width:100%}.search-input{background-color:unset;border:none}.engine-filter{margin-left:1rem}.filter-bar-search-input{width:100%}.filter-bar-search-input::ng-deep .material-icons-outlined{vertical-align:bottom}.material-icons-outlined{color:var(--base-40)}.filter-wrapper{max-width:100%;overflow-x:hidden;overflow-y:hidden;display:flex;flex:1}.mat-mdc-chip.mat-mdc-standard-chip{background-color:var(--base-95);padding-left:.5em;padding-right:.75em;border:.5px solid var(--base-70)}.mat-mdc-chip.mat-mdc-standard-chip span{display:inline-block}.mat-mdc-chip.mat-mdc-standard-chip .chip-filter-title+.chip-value{margin-left:.25rem}.chip-filter-title{margin-left:.5em}.hidden{display:none}:host ::ng-deep .mat-mdc-form-field-focus-overlay,:host ::ng-deep .mdc-text-field--filled:not(.mdc-text-field--disabled){background-color:var(--base-95)}:host ::ng-deep .mat-mdc-chip-graphic{display:none}:host ::ng-deep .mat-mdc-chip-remove{color:var(--base-40)!important}\n"], dependencies: [{ kind: "directive", type: i2$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i2$3.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: i2$3.DefaultFlexDirective, selector: " [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md], [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md], [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm], [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i6.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: i7.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i8.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i4$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i12.MatChipListbox, selector: "mat-chip-listbox", inputs: ["tabIndex", "multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i12.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["color", "disabled", "disableRipple", "tabIndex", "selectable", "selected"], outputs: ["selectionChange"] }, { kind: "directive", type: i12.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: i2$2.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: SortTranslationsByPropertyPipe, name: "sortTranslationsByProperty" }, { kind: "pipe", type: SortAlphabeticallyPipe, name: "sortAlphabetically" }] }); }
|
|
2020
2049
|
}
|
|
2021
2050
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterBarComponent, decorators: [{
|
|
2022
2051
|
type: Component,
|
|
2023
|
-
args: [{ selector: 'tld-filter-bar', template: "<div class=\"filter-row\" *ngIf=\"filterRowVisible\">\r\n <div fxLayout=\"row\" class=\"filter-wrapper\" #filterWrapper [formGroup]=\"form\">\r\n <mat-form-field fxFlex *ngIf=\"showSearch && !filterOverflow || activeFilterIndex === searchIndex\" class=\"filter-bar-search-input\">\r\n <span matPrefix class=\"material-icons-outlined\">\r\n {{prefixIcon}}\r\n </span>\r\n <span matSuffix class=\"material-icons-outlined\" *ngIf=\"showSuffixIcon\" [matTooltip]=\"searchTooltip | translate\">\r\n {{suffixIcon}}\r\n </span>\r\n <input class=\"search-input\" matInput [placeholder]=\"searchTitle | translate\"\r\n [formControlName]=\"inputFormControlName\">\r\n </mat-form-field>\r\n <ng-container [formGroup]=\"filterFormGroup\">\r\n\r\n <mat-form-field [ngClass]=\"{'hidden': filterOverflow && activeFilterIndex !== i, 'engine-filter': !filterOverflow}\" *ngFor=\"let filter of settings?.filters; let i = index\">\r\n <mat-label>{{filter.title | translate}}</mat-label>\r\n <mat-select multiple [formControlName]=\"filter.fieldName\">\r\n <ng-container *ngIf=\"filter.values.length\">\r\n <ng-container *ngIf=\"filter.translated; else sortedValuesByProperty\">\r\n <mat-option *ngFor=\"let value of filter.values | sortAlphabetically:'key'\" [value]=\"value\">\r\n {{ value.key | titlecase }}\r\n </mat-option>\r\n </ng-container>\r\n \r\n <ng-template #sortedValuesByProperty>\r\n <mat-option *ngFor=\"let value of filter.values | sortTranslationsByProperty:'key':'value'\" [value]=\"value\">\r\n {{value.key | translate : {default: value.value | titlecase } }}\r\n </mat-option>\r\n </ng-template>\r\n </ng-container>\r\n </mat-select>\r\n </mat-form-field>\r\n </ng-container>\r\n </div>\r\n <button mat-icon-button (click)=\"switchLeft()\" *ngIf=\"filterOverflow\">\r\n <span class=\"material-icons-outlined\">\r\n arrow_back_ios\r\n </span>\r\n </button>\r\n <button mat-icon-button *ngIf=\"filterOverflow\" (click)=\"switchRight()\">\r\n <span class=\"material-icons-outlined\">\r\n arrow_forward_ios\r\n </span>\r\n </button>\r\n</div>\r\n<mat-chip-listbox>\r\n <div *ngFor=\"let filter of settings?.filters\">\r\n <mat-chip-option *ngFor=\"let filterValue of filterFormGroupValue[filter.fieldName]; let ix=index\"\r\n (removed)=\"removeFilter(filter.fieldName, ix)\" class=\"text-s\">\r\n <button matChipRemove>\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n <span class=\"chip-filter-title\">{{filter.title | translate}}:</span>\r\n <span class=\"chip-value semi-bold\"> {{(filter.translated ? filterValue.key : filterValue.key | translate : {default: filterValue.value}) | titlecase\r\n }}</span>\r\n </mat-chip-option>\r\n </div>\r\n</mat-chip-listbox>\r\n", styles: [":host{display:inline-block}.filter-row{display:flex;background-color:var(--base-95);min-height:40px;min-width:100%;border-radius:.5rem;padding:1.25rem 1.25rem 0;max-width:100%;align-items:baseline;margin-bottom:.5rem}.search-input{background-color:unset;border:none}.engine-filter{margin-left:1rem}.filter-bar-search-input{width:100%}.filter-bar-search-input::ng-deep .material-icons-outlined{vertical-align:bottom}.material-icons-outlined{color:var(--base-40)}.filter-wrapper{max-width:100%;overflow-x:hidden;overflow-y:hidden;display:flex;flex:1}.mat-mdc-chip.mat-mdc-standard-chip{background-color:var(--base-95);padding-left:.5em;padding-right:.75em;border:.5px solid var(--base-70)}.mat-mdc-chip.mat-mdc-standard-chip span{display:inline-block}.mat-mdc-chip.mat-mdc-standard-chip .chip-filter-title+.chip-value{margin-left:.25rem}.chip-filter-title{margin-left:.5em}.hidden{display:none}:host ::ng-deep .mat-mdc-form-field-focus-overlay,:host ::ng-deep .mdc-text-field--filled:not(.mdc-text-field--disabled){background-color:var(--base-95)}:host ::ng-deep .mat-mdc-chip-graphic{display:none}:host ::ng-deep .mat-mdc-chip-remove{color:var(--base-40)!important}\n"] }]
|
|
2052
|
+
args: [{ selector: 'tld-filter-bar', template: "<div class=\"filter-row\" *ngIf=\"filterRowVisible\">\r\n <div fxLayout=\"row\" class=\"filter-wrapper\" #filterWrapper [formGroup]=\"form\">\r\n <mat-form-field fxFlex *ngIf=\"showSearch && !filterOverflow || activeFilterIndex === searchIndex\" class=\"filter-bar-search-input\">\r\n <span matPrefix class=\"material-icons-outlined\">\r\n {{prefixIcon}}\r\n </span>\r\n <span matSuffix class=\"material-icons-outlined\" *ngIf=\"showSuffixIcon\" [matTooltip]=\"searchTooltip | translate\">\r\n {{suffixIcon}}\r\n </span>\r\n <input class=\"search-input\" matInput [placeholder]=\"searchTitle | translate\"\r\n [formControlName]=\"inputFormControlName\">\r\n </mat-form-field>\r\n <ng-container [formGroup]=\"filterFormGroup\">\r\n\r\n <mat-form-field [ngClass]=\"{'hidden': filterOverflow && activeFilterIndex !== i, 'engine-filter': !filterOverflow}\" *ngFor=\"let filter of settings?.filters; let i = index\">\r\n <mat-label>{{filter.title | translate}}</mat-label>\r\n <mat-select #select multiple [panelWidth]=\"filter?.maxPanelWidth ?? 'auto'\" [formControlName]=\"filter.fieldName\" (openedChange)=\"$event === true ? focusOptionSearchInput(filter, select, i) : null\">\r\n <ng-container *ngIf=\"filter?.search?.placeholder\">\r\n <input #optionSearchInput class=\"option-search-input\" type=\"text\" [placeholder]=\"filter.search?.placeholder ?? '' | translate\" (keyup)=\"filterOptions($event, filter)\" (keydown)=\"$event.stopPropagation()\">\r\n </ng-container>\r\n \r\n <ng-container *ngIf=\"filter.values.length\">\r\n <ng-container *ngIf=\"filter.translated; else sortedValuesByProperty\">\r\n <mat-option class=\"filter-option\" *ngFor=\"let value of (filter.search?.filteredValues ?? filter.values) | sortAlphabetically:'key'\" [disabled]=\"filter.singleSelection?.selected && filter.singleSelection?.value !== value.value\" [value]=\"value\">\r\n {{ filter.disableTitleCase ? value.key : (value.key | titlecase) }}\r\n </mat-option>\r\n </ng-container>\r\n \r\n <ng-template #sortedValuesByProperty>\r\n <mat-option class=\"filter-option\" *ngFor=\"let value of (filter.search?.filteredValues ?? filter.values) | sortTranslationsByProperty:'key':'value'\" [disabled]=\"filter.singleSelection?.selected && filter.singleSelection?.value !== value.value\" [value]=\"value\">\r\n <ng-container *ngIf=\"!filter.disableTitleCase; else defaultCase\">\r\n {{ value.key | translate : { default: value.value | titlecase } }}\r\n </ng-container>\r\n\r\n <ng-template #defaultCase>\r\n {{ value.key | translate : { default: value.value } }} \r\n </ng-template>\r\n </mat-option>\r\n </ng-template>\r\n </ng-container>\r\n </mat-select>\r\n </mat-form-field>\r\n </ng-container>\r\n </div>\r\n <button mat-icon-button (click)=\"switchLeft()\" *ngIf=\"filterOverflow\">\r\n <span class=\"material-icons-outlined\">\r\n arrow_back_ios\r\n </span>\r\n </button>\r\n <button mat-icon-button *ngIf=\"filterOverflow\" (click)=\"switchRight()\">\r\n <span class=\"material-icons-outlined\">\r\n arrow_forward_ios\r\n </span>\r\n </button>\r\n</div>\r\n<mat-chip-listbox>\r\n <div *ngFor=\"let filter of settings?.filters\">\r\n <mat-chip-option *ngFor=\"let filterValue of filterFormGroupValue[filter.fieldName]; let ix=index\"\r\n (removed)=\"removeFilter(filter.fieldName, ix)\" class=\"text-s\">\r\n <button matChipRemove>\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n <span class=\"chip-filter-title\">{{filter.title | translate}}:</span>\r\n <span class=\"chip-value semi-bold\"> {{(filter.translated ? filterValue.key : filterValue.key | translate : {default: filterValue.value}) | titlecase\r\n }}</span>\r\n </mat-chip-option>\r\n </div>\r\n</mat-chip-listbox>\r\n", styles: [":host{display:inline-block}.filter-row{display:flex;background-color:var(--base-95);min-height:40px;min-width:100%;border-radius:.5rem;padding:1.25rem 1.25rem 0;max-width:100%;align-items:baseline;margin-bottom:.5rem}.option-search-input{padding:1rem;width:100%}.search-input{background-color:unset;border:none}.engine-filter{margin-left:1rem}.filter-bar-search-input{width:100%}.filter-bar-search-input::ng-deep .material-icons-outlined{vertical-align:bottom}.material-icons-outlined{color:var(--base-40)}.filter-wrapper{max-width:100%;overflow-x:hidden;overflow-y:hidden;display:flex;flex:1}.mat-mdc-chip.mat-mdc-standard-chip{background-color:var(--base-95);padding-left:.5em;padding-right:.75em;border:.5px solid var(--base-70)}.mat-mdc-chip.mat-mdc-standard-chip span{display:inline-block}.mat-mdc-chip.mat-mdc-standard-chip .chip-filter-title+.chip-value{margin-left:.25rem}.chip-filter-title{margin-left:.5em}.hidden{display:none}:host ::ng-deep .mat-mdc-form-field-focus-overlay,:host ::ng-deep .mdc-text-field--filled:not(.mdc-text-field--disabled){background-color:var(--base-95)}:host ::ng-deep .mat-mdc-chip-graphic{display:none}:host ::ng-deep .mat-mdc-chip-remove{color:var(--base-40)!important}\n"] }]
|
|
2024
2053
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$2.TranslateService }]; }, propDecorators: { filterWrapper: [{
|
|
2025
2054
|
type: ViewChild,
|
|
2026
2055
|
args: ["filterWrapper"]
|
|
2056
|
+
}], optionSearchInputs: [{
|
|
2057
|
+
type: ViewChildren,
|
|
2058
|
+
args: ['optionSearchInput']
|
|
2027
2059
|
}], onResize: [{
|
|
2028
2060
|
type: HostListener,
|
|
2029
2061
|
args: ['window:resize', []]
|
|
@@ -3464,7 +3496,7 @@ class TerminologyPanelComponent {
|
|
|
3464
3496
|
this.readerLocalizationKey = "TERM_COLLECTIONS.READER.";
|
|
3465
3497
|
}
|
|
3466
3498
|
ngOnInit() {
|
|
3467
|
-
this.initializeData(this.system.sourceLanguageCode, this.system.targetLanguageCode, this.system.systemId,
|
|
3499
|
+
this.initializeData(this.system.sourceLanguageCode, this.system.targetLanguageCode, this.system.systemId, this.setSelectedFromLocalStorage);
|
|
3468
3500
|
}
|
|
3469
3501
|
selectGlossary(collection) {
|
|
3470
3502
|
this.glossarySelectEvent.emit(collection);
|
|
@@ -3478,14 +3510,17 @@ class TerminologyPanelComponent {
|
|
|
3478
3510
|
}
|
|
3479
3511
|
}
|
|
3480
3512
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TerminologyPanelComponent, deps: [{ token: TerminologyService }, { token: TerminologyConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3481
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TerminologyPanelComponent, selector: "lib-terminology-panel", inputs: { system: "system", selectedCollection: "selectedCollection" }, outputs: { glossarySelectEvent: "glossarySelectEvent" }, ngImport: i0, template: "<section class=\"tld-collection-list-wrapper\">\r\n <ng-container *ngIf=\"hasAnyCollections || canCreateCollections; else emptyView\">\r\n <lib-terminology-collection-list (glossarySelectEvent)=\"selectGlossary($event)\" [system]=\"system\" [selectedCollection]=\"selectedCollection\"></lib-terminology-collection-list>\r\n\r\n <footer *ngIf=\"hasEditPermissions\" class=\"tld-collection-list-footer\" fxLayout=\"row\" fxLayoutAlign=\"start center\" fxLayoutGap=\"1rem\">\r\n <lib-terminology-create-collection [sourceLanguageCode]=\"sourceLanguageCode\" [targetLanguageCode]=\"targetLanguageCode\"></lib-terminology-create-collection>\r\n \r\n <a *ngIf=\"defaultGlossaryManagementLink\" [attr.href]=\"defaultGlossaryManagementLink\" class=\"default-glossary-management text-m\" target=\"_blank\">\r\n {{ \"TERM_COLLECTIONS.DEFAULT_GLOSSARY_MANAGEMENT\" | translate }}\r\n </a>\r\n </footer>\r\n </ng-container>\r\n <ng-template #emptyView>\r\n <section class=\"term-reader-wrapper\" fxLayout=\"column\" fxLayoutGap=\"16px\">\r\n <div>\r\n <h1 class=\"text-l-semi-bold\">{{ readerLocalizationKey + \"TITLE\" | translate }}</h1>\r\n <p class=\"text-xl-semi-bold glossary-unavailable\">{{ readerLocalizationKey + \"UNAVAILABLE\" | translate }}</p>\r\n <p [innerHtml]=\"readerLocalizationKey + 'TEXT' | translate\"></p>\r\n\r\n <p class=\"text-s-semi-bold hint-title\">{{ readerLocalizationKey + \"WHAT_IS_GLOSSARY_TITLE\" | translate }}</p>\r\n <p class=\"text-s\">{{ readerLocalizationKey + \"WHAT_IS_GLOSSARY_DESC\" | translate }}</p>\r\n \r\n <p class=\"text-s-semi-bold hint-title\">{{ readerLocalizationKey + \"BENEFITS_TITLE\" | translate }}</p>\r\n <p class=\"text-s\">{{ readerLocalizationKey + \"BENEFITS_DESC\" | translate }}</p
|
|
3513
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TerminologyPanelComponent, selector: "lib-terminology-panel", inputs: { system: "system", setSelectedFromLocalStorage: "setSelectedFromLocalStorage", selectedCollection: "selectedCollection" }, outputs: { glossarySelectEvent: "glossarySelectEvent" }, ngImport: i0, template: "<section class=\"tld-collection-list-wrapper\">\r\n <ng-container *ngIf=\"hasAnyCollections || canCreateCollections; else emptyView\">\r\n <lib-terminology-collection-list (glossarySelectEvent)=\"selectGlossary($event)\" [system]=\"system\" [selectedCollection]=\"selectedCollection\"></lib-terminology-collection-list>\r\n\r\n <footer *ngIf=\"hasEditPermissions\" class=\"tld-collection-list-footer\" fxLayout=\"row\" fxLayoutAlign=\"start center\" fxLayoutGap=\"1rem\">\r\n <lib-terminology-create-collection [sourceLanguageCode]=\"sourceLanguageCode\" [targetLanguageCode]=\"targetLanguageCode\"></lib-terminology-create-collection>\r\n \r\n <a *ngIf=\"defaultGlossaryManagementLink\" [attr.href]=\"defaultGlossaryManagementLink\" class=\"default-glossary-management text-m\" target=\"_blank\">\r\n {{ \"TERM_COLLECTIONS.DEFAULT_GLOSSARY_MANAGEMENT\" | translate }}\r\n </a>\r\n </footer>\r\n </ng-container>\r\n <ng-template #emptyView>\r\n <section class=\"term-reader-wrapper\" fxLayout=\"column\" fxLayoutGap=\"16px\">\r\n <div>\r\n <h1 class=\"text-l-semi-bold\">{{ readerLocalizationKey + \"TITLE\" | translate }}</h1>\r\n <p class=\"text-xl-semi-bold glossary-unavailable\">{{ readerLocalizationKey + \"UNAVAILABLE\" | translate }}</p>\r\n <p [innerHtml]=\"readerLocalizationKey + 'TEXT' | translate\"></p>\r\n\r\n <!-- Will be uncommented with new menu implementation -->\r\n\r\n <!-- <p class=\"text-s-semi-bold hint-title\">{{ readerLocalizationKey + \"WHAT_IS_GLOSSARY_TITLE\" | translate }}</p>\r\n <p class=\"text-s\">{{ readerLocalizationKey + \"WHAT_IS_GLOSSARY_DESC\" | translate }}</p>\r\n \r\n <p class=\"text-s-semi-bold hint-title\">{{ readerLocalizationKey + \"BENEFITS_TITLE\" | translate }}</p>\r\n <p class=\"text-s\">{{ readerLocalizationKey + \"BENEFITS_DESC\" | translate }}</p> -->\r\n </div>\r\n </section>\r\n </ng-template>\r\n</section>\r\n", styles: [".tld-collection-list-footer{margin-top:1rem;padding:0 .75em 1em}.default-glossary-management{display:block;color:var(--base-30)}.term-reader-wrapper{margin:1em}.glossary-unavailable{font-weight:500;font-style:italic}.hint-title{margin-bottom:0}\n"], dependencies: [{ kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$3.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: i2$3.DefaultLayoutGapDirective, selector: " [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md], [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md], [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm], [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i2$3.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: "component", type: TerminologyCreateCollectionComponent, selector: "lib-terminology-create-collection", inputs: ["sourceLanguageCode", "targetLanguageCode"], outputs: ["collectionCreated"] }, { kind: "component", type: TerminologyCollectionListComponent, selector: "lib-terminology-collection-list", inputs: ["system", "selectedCollection"], outputs: ["glossarySelectEvent"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
|
|
3482
3514
|
}
|
|
3483
3515
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TerminologyPanelComponent, decorators: [{
|
|
3484
3516
|
type: Component,
|
|
3485
|
-
args: [{ selector: "lib-terminology-panel", template: "<section class=\"tld-collection-list-wrapper\">\r\n <ng-container *ngIf=\"hasAnyCollections || canCreateCollections; else emptyView\">\r\n <lib-terminology-collection-list (glossarySelectEvent)=\"selectGlossary($event)\" [system]=\"system\" [selectedCollection]=\"selectedCollection\"></lib-terminology-collection-list>\r\n\r\n <footer *ngIf=\"hasEditPermissions\" class=\"tld-collection-list-footer\" fxLayout=\"row\" fxLayoutAlign=\"start center\" fxLayoutGap=\"1rem\">\r\n <lib-terminology-create-collection [sourceLanguageCode]=\"sourceLanguageCode\" [targetLanguageCode]=\"targetLanguageCode\"></lib-terminology-create-collection>\r\n \r\n <a *ngIf=\"defaultGlossaryManagementLink\" [attr.href]=\"defaultGlossaryManagementLink\" class=\"default-glossary-management text-m\" target=\"_blank\">\r\n {{ \"TERM_COLLECTIONS.DEFAULT_GLOSSARY_MANAGEMENT\" | translate }}\r\n </a>\r\n </footer>\r\n </ng-container>\r\n <ng-template #emptyView>\r\n <section class=\"term-reader-wrapper\" fxLayout=\"column\" fxLayoutGap=\"16px\">\r\n <div>\r\n <h1 class=\"text-l-semi-bold\">{{ readerLocalizationKey + \"TITLE\" | translate }}</h1>\r\n <p class=\"text-xl-semi-bold glossary-unavailable\">{{ readerLocalizationKey + \"UNAVAILABLE\" | translate }}</p>\r\n <p [innerHtml]=\"readerLocalizationKey + 'TEXT' | translate\"></p>\r\n\r\n <p class=\"text-s-semi-bold hint-title\">{{ readerLocalizationKey + \"WHAT_IS_GLOSSARY_TITLE\" | translate }}</p>\r\n <p class=\"text-s\">{{ readerLocalizationKey + \"WHAT_IS_GLOSSARY_DESC\" | translate }}</p>\r\n \r\n <p class=\"text-s-semi-bold hint-title\">{{ readerLocalizationKey + \"BENEFITS_TITLE\" | translate }}</p>\r\n <p class=\"text-s\">{{ readerLocalizationKey + \"BENEFITS_DESC\" | translate }}</p
|
|
3517
|
+
args: [{ selector: "lib-terminology-panel", template: "<section class=\"tld-collection-list-wrapper\">\r\n <ng-container *ngIf=\"hasAnyCollections || canCreateCollections; else emptyView\">\r\n <lib-terminology-collection-list (glossarySelectEvent)=\"selectGlossary($event)\" [system]=\"system\" [selectedCollection]=\"selectedCollection\"></lib-terminology-collection-list>\r\n\r\n <footer *ngIf=\"hasEditPermissions\" class=\"tld-collection-list-footer\" fxLayout=\"row\" fxLayoutAlign=\"start center\" fxLayoutGap=\"1rem\">\r\n <lib-terminology-create-collection [sourceLanguageCode]=\"sourceLanguageCode\" [targetLanguageCode]=\"targetLanguageCode\"></lib-terminology-create-collection>\r\n \r\n <a *ngIf=\"defaultGlossaryManagementLink\" [attr.href]=\"defaultGlossaryManagementLink\" class=\"default-glossary-management text-m\" target=\"_blank\">\r\n {{ \"TERM_COLLECTIONS.DEFAULT_GLOSSARY_MANAGEMENT\" | translate }}\r\n </a>\r\n </footer>\r\n </ng-container>\r\n <ng-template #emptyView>\r\n <section class=\"term-reader-wrapper\" fxLayout=\"column\" fxLayoutGap=\"16px\">\r\n <div>\r\n <h1 class=\"text-l-semi-bold\">{{ readerLocalizationKey + \"TITLE\" | translate }}</h1>\r\n <p class=\"text-xl-semi-bold glossary-unavailable\">{{ readerLocalizationKey + \"UNAVAILABLE\" | translate }}</p>\r\n <p [innerHtml]=\"readerLocalizationKey + 'TEXT' | translate\"></p>\r\n\r\n <!-- Will be uncommented with new menu implementation -->\r\n\r\n <!-- <p class=\"text-s-semi-bold hint-title\">{{ readerLocalizationKey + \"WHAT_IS_GLOSSARY_TITLE\" | translate }}</p>\r\n <p class=\"text-s\">{{ readerLocalizationKey + \"WHAT_IS_GLOSSARY_DESC\" | translate }}</p>\r\n \r\n <p class=\"text-s-semi-bold hint-title\">{{ readerLocalizationKey + \"BENEFITS_TITLE\" | translate }}</p>\r\n <p class=\"text-s\">{{ readerLocalizationKey + \"BENEFITS_DESC\" | translate }}</p> -->\r\n </div>\r\n </section>\r\n </ng-template>\r\n</section>\r\n", styles: [".tld-collection-list-footer{margin-top:1rem;padding:0 .75em 1em}.default-glossary-management{display:block;color:var(--base-30)}.term-reader-wrapper{margin:1em}.glossary-unavailable{font-weight:500;font-style:italic}.hint-title{margin-bottom:0}\n"] }]
|
|
3486
3518
|
}], ctorParameters: function () { return [{ type: TerminologyService }, { type: TerminologyConfigService }]; }, propDecorators: { system: [{
|
|
3487
3519
|
type: Input,
|
|
3488
3520
|
args: [{ required: true }]
|
|
3521
|
+
}], setSelectedFromLocalStorage: [{
|
|
3522
|
+
type: Input,
|
|
3523
|
+
args: [{ required: true }]
|
|
3489
3524
|
}], selectedCollection: [{
|
|
3490
3525
|
type: Input
|
|
3491
3526
|
}], glossarySelectEvent: [{
|
|
@@ -3520,6 +3555,7 @@ class TerminologyComponent {
|
|
|
3520
3555
|
this.terminologyService = terminologyService;
|
|
3521
3556
|
this.iconService = iconService;
|
|
3522
3557
|
this.storeSelectedInLocalStorage = true;
|
|
3558
|
+
this.setSelectedFromLocalStorage = true;
|
|
3523
3559
|
this.showMenuIconOnMobile = true;
|
|
3524
3560
|
this.glossarySelectEvent = new EventEmitter();
|
|
3525
3561
|
this.menuToggleEvent = new EventEmitter();
|
|
@@ -3612,11 +3648,11 @@ class TerminologyComponent {
|
|
|
3612
3648
|
});
|
|
3613
3649
|
}
|
|
3614
3650
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TerminologyComponent, deps: [{ token: TerminologyService }, { token: IconService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3615
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TerminologyComponent, selector: "lib-terminology", inputs: { selectedCollectionId: "selectedCollectionId", system: "system", disabled: "disabled", storeSelectedInLocalStorage: "storeSelectedInLocalStorage", showMenuIconOnMobile: "showMenuIconOnMobile" }, outputs: { glossarySelectEvent: "glossarySelectEvent", menuToggleEvent: "menuToggleEvent" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"glossary-menu\" fxLayoutAlign=\"center center\" [ngClass.lt-sm]=\"'tld-term-collection-wrapper-mobile'\" fxLayoutGap=\"8px\">\r\n <span class=\"glossary-label\" fxHide.lt-md>\r\n {{ \"TERM_COLLECTIONS.GLOSSARY\" | translate }}\r\n </span>\r\n\r\n <lib-open-close-button\r\n *ngIf=\"!showMenuIconOnMobile; else defaultLayout\"\r\n class=\"tld-collection-menu-button\"\r\n #state=\"matMenuTrigger\"\r\n [isOpened]=\"state.menuOpen\"\r\n (menuOpened)=\"openMenu()\"\r\n (menuClosed)=\"closeMenu()\"\r\n [matMenuTriggerFor]=\"menu\"\r\n [attr.aria-label]=\"'TERM_COLLECTIONS.ARIA_LABELS.OTHER_COLLECTIONS' | translate\"\r\n [matTooltip]=\"selected?.mtCollection?.name ?? selected?.termCollection?.name ?? ''\"\r\n [disabled]=\"disabled\"\r\n >\r\n <span class=\"selected-collection\">\r\n {{ selected?.mtCollection?.name ?? selected?.termCollection?.name ?? (\"TERM_COLLECTIONS.SELECTED_NONE\" | translate) }}\r\n </span>\r\n <mat-spinner *ngIf=\"selected?.isImporting\" class=\"selected-col-spinner\" color=\"accent\" diameter=\"16\"></mat-spinner>\r\n </lib-open-close-button>\r\n\r\n <ng-template #defaultLayout>\r\n <lib-open-close-button\r\n fxHide.lt-sm\r\n class=\"tld-collection-menu-button\"\r\n #state=\"matMenuTrigger\"\r\n [isOpened]=\"state.menuOpen\"\r\n (menuOpened)=\"openMenu()\"\r\n (menuClosed)=\"closeMenu()\"\r\n [matMenuTriggerFor]=\"menu\"\r\n [attr.aria-label]=\"'TERM_COLLECTIONS.ARIA_LABELS.OTHER_COLLECTIONS' | translate\"\r\n [matTooltip]=\"selected?.mtCollection?.name ?? selected?.termCollection?.name ?? ''\"\r\n [disabled]=\"disabled\"\r\n >\r\n <span class=\"selected-collection\">\r\n {{ selected?.mtCollection?.name ?? selected?.termCollection?.name ?? (\"TERM_COLLECTIONS.SELECTED_NONE\" | translate) }}\r\n </span>\r\n <mat-spinner *ngIf=\"selected?.isImporting\" class=\"selected-col-spinner\" color=\"accent\" diameter=\"16\"></mat-spinner>\r\n </lib-open-close-button>\r\n\r\n <button (menuOpened)=\"openMenu()\" (menuClosed)=\"closeMenu()\" mat-icon-button fxHide.gt-xs #state=\"matMenuTrigger\" [matMenuTriggerFor]=\"menu\">\r\n <mat-icon svgIcon=\"collections_menu\" [attr.color]=\"selected ? 'accent' : ''\"></mat-icon>\r\n </button>\r\n </ng-template>\r\n</div>\r\n\r\n<mat-menu #menu=\"matMenu\" class=\"tld-collection-menu\">\r\n <tld-close-button fxHide.gt-xs></tld-close-button>\r\n <div class=\"tld-term-collection\" (click)=\"$event.stopPropagation()\" (keydown)=\"$event.stopPropagation()\">\r\n <lib-terminology-panel (glossarySelectEvent)=\"selectGlossary($event)\" [system]=\"system\" [selectedCollection]=\"selected\"></lib-terminology-panel>\r\n </div>\r\n</mat-menu>\r\n", styles: [":host ::ng-deep .mdc-circular-progress__circle-clipper,:host ::ng-deep .mdc-circular-progress__indeterminate-circle-graphic{width:100%!important}.selected-col-spinner{margin-left:5px}.tld-collection-menu-button .selected-collection{overflow:hidden;text-overflow:ellipsis;max-width:140px;display:inline-block;white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: OpenCloseButtonComponent, selector: "lib-open-close-button", inputs: ["disableFocusOnAction", "disabled", "isIcon", "ariaLabelCode", "isOpened"] }, { kind: "directive", type: i2$3.DefaultLayoutGapDirective, selector: " [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md], [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md], [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm], [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i2$3.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: i6.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: i6.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: CloseButtonComponent, selector: "tld-close-button", inputs: ["ariaCode", "disabled", "tooltip"], outputs: ["tldClick"] }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i2$5.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i6$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "directive", type: i6$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i2$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: TerminologyPanelComponent, selector: "lib-terminology-panel", inputs: ["system", "selectedCollection"], outputs: ["glossarySelectEvent"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
|
|
3651
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TerminologyComponent, selector: "lib-terminology", inputs: { selectedCollectionId: "selectedCollectionId", system: "system", disabled: "disabled", storeSelectedInLocalStorage: "storeSelectedInLocalStorage", setSelectedFromLocalStorage: "setSelectedFromLocalStorage", showMenuIconOnMobile: "showMenuIconOnMobile" }, outputs: { glossarySelectEvent: "glossarySelectEvent", menuToggleEvent: "menuToggleEvent" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"glossary-menu\" fxLayoutAlign=\"center center\" [ngClass.lt-sm]=\"'tld-term-collection-wrapper-mobile'\" fxLayoutGap=\"8px\">\r\n <span class=\"glossary-label\" fxHide.lt-md>\r\n {{ \"TERM_COLLECTIONS.GLOSSARY\" | translate }}\r\n </span>\r\n\r\n <lib-open-close-button\r\n *ngIf=\"!showMenuIconOnMobile; else defaultLayout\"\r\n class=\"tld-collection-menu-button\"\r\n #state=\"matMenuTrigger\"\r\n [isOpened]=\"state.menuOpen\"\r\n (menuOpened)=\"openMenu()\"\r\n (menuClosed)=\"closeMenu()\"\r\n [matMenuTriggerFor]=\"menu\"\r\n [attr.aria-label]=\"'TERM_COLLECTIONS.ARIA_LABELS.OTHER_COLLECTIONS' | translate\"\r\n [matTooltip]=\"selected?.mtCollection?.name ?? selected?.termCollection?.name ?? ''\"\r\n [disabled]=\"disabled\"\r\n >\r\n <span class=\"selected-collection\">\r\n {{ selected?.mtCollection?.name ?? selected?.termCollection?.name ?? (\"TERM_COLLECTIONS.SELECTED_NONE\" | translate) }}\r\n </span>\r\n <mat-spinner *ngIf=\"selected?.isImporting\" class=\"selected-col-spinner\" color=\"accent\" diameter=\"16\"></mat-spinner>\r\n </lib-open-close-button>\r\n\r\n <ng-template #defaultLayout>\r\n <lib-open-close-button\r\n fxHide.lt-sm\r\n class=\"tld-collection-menu-button\"\r\n #state=\"matMenuTrigger\"\r\n [isOpened]=\"state.menuOpen\"\r\n (menuOpened)=\"openMenu()\"\r\n (menuClosed)=\"closeMenu()\"\r\n [matMenuTriggerFor]=\"menu\"\r\n [attr.aria-label]=\"'TERM_COLLECTIONS.ARIA_LABELS.OTHER_COLLECTIONS' | translate\"\r\n [matTooltip]=\"selected?.mtCollection?.name ?? selected?.termCollection?.name ?? ''\"\r\n [disabled]=\"disabled\"\r\n >\r\n <span class=\"selected-collection\">\r\n {{ selected?.mtCollection?.name ?? selected?.termCollection?.name ?? (\"TERM_COLLECTIONS.SELECTED_NONE\" | translate) }}\r\n </span>\r\n <mat-spinner *ngIf=\"selected?.isImporting\" class=\"selected-col-spinner\" color=\"accent\" diameter=\"16\"></mat-spinner>\r\n </lib-open-close-button>\r\n\r\n <button (menuOpened)=\"openMenu()\" (menuClosed)=\"closeMenu()\" mat-icon-button fxHide.gt-xs #state=\"matMenuTrigger\" [matMenuTriggerFor]=\"menu\">\r\n <mat-icon svgIcon=\"collections_menu\" [attr.color]=\"selected ? 'accent' : ''\"></mat-icon>\r\n </button>\r\n </ng-template>\r\n</div>\r\n\r\n<mat-menu #menu=\"matMenu\" class=\"tld-collection-menu\">\r\n <tld-close-button fxHide.gt-xs></tld-close-button>\r\n <div class=\"tld-term-collection\" (click)=\"$event.stopPropagation()\" (keydown)=\"$event.stopPropagation()\">\r\n <lib-terminology-panel (glossarySelectEvent)=\"selectGlossary($event)\" [system]=\"system\" [selectedCollection]=\"selected\" [setSelectedFromLocalStorage]=\"setSelectedFromLocalStorage\"></lib-terminology-panel>\r\n </div>\r\n</mat-menu>\r\n", styles: [":host ::ng-deep .mdc-circular-progress__circle-clipper,:host ::ng-deep .mdc-circular-progress__indeterminate-circle-graphic{width:100%!important}.selected-col-spinner{margin-left:5px}.tld-collection-menu-button .selected-collection{overflow:hidden;text-overflow:ellipsis;max-width:140px;display:inline-block;white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: OpenCloseButtonComponent, selector: "lib-open-close-button", inputs: ["disableFocusOnAction", "disabled", "isIcon", "ariaLabelCode", "isOpened"] }, { kind: "directive", type: i2$3.DefaultLayoutGapDirective, selector: " [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md], [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md], [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm], [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i2$3.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: i6.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: i6.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: CloseButtonComponent, selector: "tld-close-button", inputs: ["ariaCode", "disabled", "tooltip"], outputs: ["tldClick"] }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i2$5.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i6$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "directive", type: i6$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i2$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: TerminologyPanelComponent, selector: "lib-terminology-panel", inputs: ["system", "setSelectedFromLocalStorage", "selectedCollection"], outputs: ["glossarySelectEvent"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
|
|
3616
3652
|
}
|
|
3617
3653
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TerminologyComponent, decorators: [{
|
|
3618
3654
|
type: Component,
|
|
3619
|
-
args: [{ selector: 'lib-terminology', template: "<div class=\"glossary-menu\" fxLayoutAlign=\"center center\" [ngClass.lt-sm]=\"'tld-term-collection-wrapper-mobile'\" fxLayoutGap=\"8px\">\r\n <span class=\"glossary-label\" fxHide.lt-md>\r\n {{ \"TERM_COLLECTIONS.GLOSSARY\" | translate }}\r\n </span>\r\n\r\n <lib-open-close-button\r\n *ngIf=\"!showMenuIconOnMobile; else defaultLayout\"\r\n class=\"tld-collection-menu-button\"\r\n #state=\"matMenuTrigger\"\r\n [isOpened]=\"state.menuOpen\"\r\n (menuOpened)=\"openMenu()\"\r\n (menuClosed)=\"closeMenu()\"\r\n [matMenuTriggerFor]=\"menu\"\r\n [attr.aria-label]=\"'TERM_COLLECTIONS.ARIA_LABELS.OTHER_COLLECTIONS' | translate\"\r\n [matTooltip]=\"selected?.mtCollection?.name ?? selected?.termCollection?.name ?? ''\"\r\n [disabled]=\"disabled\"\r\n >\r\n <span class=\"selected-collection\">\r\n {{ selected?.mtCollection?.name ?? selected?.termCollection?.name ?? (\"TERM_COLLECTIONS.SELECTED_NONE\" | translate) }}\r\n </span>\r\n <mat-spinner *ngIf=\"selected?.isImporting\" class=\"selected-col-spinner\" color=\"accent\" diameter=\"16\"></mat-spinner>\r\n </lib-open-close-button>\r\n\r\n <ng-template #defaultLayout>\r\n <lib-open-close-button\r\n fxHide.lt-sm\r\n class=\"tld-collection-menu-button\"\r\n #state=\"matMenuTrigger\"\r\n [isOpened]=\"state.menuOpen\"\r\n (menuOpened)=\"openMenu()\"\r\n (menuClosed)=\"closeMenu()\"\r\n [matMenuTriggerFor]=\"menu\"\r\n [attr.aria-label]=\"'TERM_COLLECTIONS.ARIA_LABELS.OTHER_COLLECTIONS' | translate\"\r\n [matTooltip]=\"selected?.mtCollection?.name ?? selected?.termCollection?.name ?? ''\"\r\n [disabled]=\"disabled\"\r\n >\r\n <span class=\"selected-collection\">\r\n {{ selected?.mtCollection?.name ?? selected?.termCollection?.name ?? (\"TERM_COLLECTIONS.SELECTED_NONE\" | translate) }}\r\n </span>\r\n <mat-spinner *ngIf=\"selected?.isImporting\" class=\"selected-col-spinner\" color=\"accent\" diameter=\"16\"></mat-spinner>\r\n </lib-open-close-button>\r\n\r\n <button (menuOpened)=\"openMenu()\" (menuClosed)=\"closeMenu()\" mat-icon-button fxHide.gt-xs #state=\"matMenuTrigger\" [matMenuTriggerFor]=\"menu\">\r\n <mat-icon svgIcon=\"collections_menu\" [attr.color]=\"selected ? 'accent' : ''\"></mat-icon>\r\n </button>\r\n </ng-template>\r\n</div>\r\n\r\n<mat-menu #menu=\"matMenu\" class=\"tld-collection-menu\">\r\n <tld-close-button fxHide.gt-xs></tld-close-button>\r\n <div class=\"tld-term-collection\" (click)=\"$event.stopPropagation()\" (keydown)=\"$event.stopPropagation()\">\r\n <lib-terminology-panel (glossarySelectEvent)=\"selectGlossary($event)\" [system]=\"system\" [selectedCollection]=\"selected\"></lib-terminology-panel>\r\n </div>\r\n</mat-menu>\r\n", styles: [":host ::ng-deep .mdc-circular-progress__circle-clipper,:host ::ng-deep .mdc-circular-progress__indeterminate-circle-graphic{width:100%!important}.selected-col-spinner{margin-left:5px}.tld-collection-menu-button .selected-collection{overflow:hidden;text-overflow:ellipsis;max-width:140px;display:inline-block;white-space:nowrap}\n"] }]
|
|
3655
|
+
args: [{ selector: 'lib-terminology', template: "<div class=\"glossary-menu\" fxLayoutAlign=\"center center\" [ngClass.lt-sm]=\"'tld-term-collection-wrapper-mobile'\" fxLayoutGap=\"8px\">\r\n <span class=\"glossary-label\" fxHide.lt-md>\r\n {{ \"TERM_COLLECTIONS.GLOSSARY\" | translate }}\r\n </span>\r\n\r\n <lib-open-close-button\r\n *ngIf=\"!showMenuIconOnMobile; else defaultLayout\"\r\n class=\"tld-collection-menu-button\"\r\n #state=\"matMenuTrigger\"\r\n [isOpened]=\"state.menuOpen\"\r\n (menuOpened)=\"openMenu()\"\r\n (menuClosed)=\"closeMenu()\"\r\n [matMenuTriggerFor]=\"menu\"\r\n [attr.aria-label]=\"'TERM_COLLECTIONS.ARIA_LABELS.OTHER_COLLECTIONS' | translate\"\r\n [matTooltip]=\"selected?.mtCollection?.name ?? selected?.termCollection?.name ?? ''\"\r\n [disabled]=\"disabled\"\r\n >\r\n <span class=\"selected-collection\">\r\n {{ selected?.mtCollection?.name ?? selected?.termCollection?.name ?? (\"TERM_COLLECTIONS.SELECTED_NONE\" | translate) }}\r\n </span>\r\n <mat-spinner *ngIf=\"selected?.isImporting\" class=\"selected-col-spinner\" color=\"accent\" diameter=\"16\"></mat-spinner>\r\n </lib-open-close-button>\r\n\r\n <ng-template #defaultLayout>\r\n <lib-open-close-button\r\n fxHide.lt-sm\r\n class=\"tld-collection-menu-button\"\r\n #state=\"matMenuTrigger\"\r\n [isOpened]=\"state.menuOpen\"\r\n (menuOpened)=\"openMenu()\"\r\n (menuClosed)=\"closeMenu()\"\r\n [matMenuTriggerFor]=\"menu\"\r\n [attr.aria-label]=\"'TERM_COLLECTIONS.ARIA_LABELS.OTHER_COLLECTIONS' | translate\"\r\n [matTooltip]=\"selected?.mtCollection?.name ?? selected?.termCollection?.name ?? ''\"\r\n [disabled]=\"disabled\"\r\n >\r\n <span class=\"selected-collection\">\r\n {{ selected?.mtCollection?.name ?? selected?.termCollection?.name ?? (\"TERM_COLLECTIONS.SELECTED_NONE\" | translate) }}\r\n </span>\r\n <mat-spinner *ngIf=\"selected?.isImporting\" class=\"selected-col-spinner\" color=\"accent\" diameter=\"16\"></mat-spinner>\r\n </lib-open-close-button>\r\n\r\n <button (menuOpened)=\"openMenu()\" (menuClosed)=\"closeMenu()\" mat-icon-button fxHide.gt-xs #state=\"matMenuTrigger\" [matMenuTriggerFor]=\"menu\">\r\n <mat-icon svgIcon=\"collections_menu\" [attr.color]=\"selected ? 'accent' : ''\"></mat-icon>\r\n </button>\r\n </ng-template>\r\n</div>\r\n\r\n<mat-menu #menu=\"matMenu\" class=\"tld-collection-menu\">\r\n <tld-close-button fxHide.gt-xs></tld-close-button>\r\n <div class=\"tld-term-collection\" (click)=\"$event.stopPropagation()\" (keydown)=\"$event.stopPropagation()\">\r\n <lib-terminology-panel (glossarySelectEvent)=\"selectGlossary($event)\" [system]=\"system\" [selectedCollection]=\"selected\" [setSelectedFromLocalStorage]=\"setSelectedFromLocalStorage\"></lib-terminology-panel>\r\n </div>\r\n</mat-menu>\r\n", styles: [":host ::ng-deep .mdc-circular-progress__circle-clipper,:host ::ng-deep .mdc-circular-progress__indeterminate-circle-graphic{width:100%!important}.selected-col-spinner{margin-left:5px}.tld-collection-menu-button .selected-collection{overflow:hidden;text-overflow:ellipsis;max-width:140px;display:inline-block;white-space:nowrap}\n"] }]
|
|
3620
3656
|
}], ctorParameters: function () { return [{ type: TerminologyService }, { type: IconService }]; }, propDecorators: { selectedCollectionId: [{
|
|
3621
3657
|
type: Input
|
|
3622
3658
|
}], system: [{
|
|
@@ -3626,6 +3662,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
3626
3662
|
type: Input
|
|
3627
3663
|
}], storeSelectedInLocalStorage: [{
|
|
3628
3664
|
type: Input
|
|
3665
|
+
}], setSelectedFromLocalStorage: [{
|
|
3666
|
+
type: Input
|
|
3629
3667
|
}], showMenuIconOnMobile: [{
|
|
3630
3668
|
type: Input
|
|
3631
3669
|
}], glossarySelectEvent: [{
|