@eui/ecl 18.2.0 → 18.2.1-snapshot-1727953374536
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/docs/components/EclFileItemComponent.html +86 -0
- package/docs/components/EclInpageNavigationComponent.html +1 -1
- package/docs/components/EclInpageNavigationItemComponent.html +69 -0
- package/docs/components/EclSiteHeaderLoginComponent.html +1 -1
- package/docs/dependencies.html +2 -2
- package/docs/js/search/search_index.js +2 -2
- package/esm2022/lib/components/ecl-date-picker/ecl-date-picker.directive.mjs +12 -11
- package/esm2022/lib/components/ecl-file/ecl-file-item/ecl-file-item.component.mjs +6 -2
- package/esm2022/lib/components/ecl-inpage-navigation/ecl-inpage-navigation-item.component.mjs +6 -2
- package/esm2022/lib/components/ecl-inpage-navigation/ecl-inpage-navigation.component.mjs +3 -3
- package/esm2022/lib/components/ecl-site-header/login/ecl-site-header-login.component.mjs +3 -3
- package/fesm2022/eui-ecl.mjs +25 -16
- package/fesm2022/eui-ecl.mjs.map +1 -1
- package/lib/components/ecl-date-picker/ecl-date-picker.directive.d.ts +2 -1
- package/lib/components/ecl-date-picker/ecl-date-picker.directive.d.ts.map +1 -1
- package/lib/components/ecl-file/ecl-file-item/ecl-file-item.component.d.ts +1 -0
- package/lib/components/ecl-file/ecl-file-item/ecl-file-item.component.d.ts.map +1 -1
- package/lib/components/ecl-inpage-navigation/ecl-inpage-navigation-item.component.d.ts +1 -0
- package/lib/components/ecl-inpage-navigation/ecl-inpage-navigation-item.component.d.ts.map +1 -1
- package/package.json +2 -2
package/fesm2022/eui-ecl.mjs
CHANGED
|
@@ -4,7 +4,7 @@ import * as i1$1 from '@angular/common';
|
|
|
4
4
|
import { DOCUMENT, CommonModule, isPlatformBrowser, formatDate } from '@angular/common';
|
|
5
5
|
import * as i1$2 from '@ngx-translate/core';
|
|
6
6
|
import { TranslateModule } from '@ngx-translate/core';
|
|
7
|
-
import { ReplaySubject, Subject, takeUntil, map, switchMap, of, distinctUntilChanged, fromEvent, debounceTime, delay, interval
|
|
7
|
+
import { ReplaySubject, Subject, takeUntil, map, switchMap, of, distinctUntilChanged, fromEvent, debounceTime, delay, interval } from 'rxjs';
|
|
8
8
|
import * as i1 from '@eui/core';
|
|
9
9
|
import { GLOBAL_CONFIG_TOKEN } from '@eui/core';
|
|
10
10
|
import { takeUntil as takeUntil$1, mergeWith } from 'rxjs/operators';
|
|
@@ -2174,11 +2174,11 @@ class EclSiteHeaderLoginComponent extends ECLBaseDirective {
|
|
|
2174
2174
|
}
|
|
2175
2175
|
}
|
|
2176
2176
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: EclSiteHeaderLoginComponent, deps: [{ token: EclSiteHeaderAreaDataService }, { token: EclRtlService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2177
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.1", type: EclSiteHeaderLoginComponent, selector: "ecl-site-header-login", inputs: { isLoggedIn: ["isLoggedIn", "isLoggedIn", booleanAttribute] }, outputs: { login: "login", loginBoxToggle: "loginBoxToggle" }, host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "loginLinkElement", first: true, predicate: ["loginLink"], descendants: true, read: ElementRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (isLoggedIn) {\n <a\n #loginLink\n href=\"#\"\n class=\"ecl-button ecl-button--tertiary ecl-site-header__login-toggle\"\n aria-controls=\"login-box-id\"\n [attr.aria-expanded]=\"isLoginBoxActive\"\n (click)=\"onLoginBoxToggle($event)\">\n <ecl-icon icon=\"logged-in\" size=\"s\" class=\"ecl-site-header__icon\"></ecl-icon>\n {{ 'ecl.site-header.LOGGED-IN' | translate }}\n <ecl-icon icon=\"corner-arrow\" size=\"xs\" class=\"ecl-site-header__login-arrow\"></ecl-icon>\n </a>\n <div\n [style]=\"{'--ecl-login-arrow-position': loginArrowPosition}\"\n class=\"{{ getLoginBoxCssClasses() }}\">\n <ng-content></ng-content>\n </div>\n} @else {\n <a\n href=\"#\"\n class=\"ecl-button ecl-button--tertiary ecl-site-header__login-toggle\"\n [attr.aria-expanded]=\"isLoginBoxActive\"\n (click)=\"onLoginClick($event)\">\n <ecl-icon icon=\"log-in\" size=\"s\" class=\"ecl-site-header__icon\"></ecl-icon>\n {{ 'ecl.site-header.LOGIN' | translate }}\n </a>\n}\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
|
|
2177
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.1", type: EclSiteHeaderLoginComponent, selector: "ecl-site-header-login", inputs: { isLoggedIn: ["isLoggedIn", "isLoggedIn", booleanAttribute] }, outputs: { login: "login", loginBoxToggle: "loginBoxToggle" }, host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "loginLinkElement", first: true, predicate: ["loginLink"], descendants: true, read: ElementRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (isLoggedIn) {\n <a\n #loginLink\n href=\"#\"\n class=\"ecl-button ecl-button--tertiary ecl-site-header__login-toggle\"\n aria-controls=\"login-box-id\"\n [attr.aria-expanded]=\"isLoginBoxActive\"\n (click)=\"onLoginBoxToggle($event)\">\n <ecl-icon icon=\"logged-in\" size=\"s\" class=\"ecl-site-header__icon\"></ecl-icon>\n {{ 'ecl.site-header.LOGGED-IN' | translate }}\n <ecl-icon icon=\"corner-arrow\" size=\"xs\" class=\"ecl-site-header__login-arrow\"></ecl-icon>\n </a>\n <div\n id=\"login-box-id\"\n [style]=\"{'--ecl-login-arrow-position': loginArrowPosition}\"\n class=\"{{ getLoginBoxCssClasses() }}\">\n <ng-content></ng-content>\n </div>\n} @else {\n <a\n href=\"#\"\n class=\"ecl-button ecl-button--tertiary ecl-site-header__login-toggle\"\n [attr.aria-expanded]=\"isLoginBoxActive\"\n (click)=\"onLoginClick($event)\">\n <ecl-icon icon=\"log-in\" size=\"s\" class=\"ecl-site-header__icon\"></ecl-icon>\n {{ 'ecl.site-header.LOGIN' | translate }}\n </a>\n}\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
|
|
2178
2178
|
}
|
|
2179
2179
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: EclSiteHeaderLoginComponent, decorators: [{
|
|
2180
2180
|
type: Component,
|
|
2181
|
-
args: [{ selector: 'ecl-site-header-login', template: "@if (isLoggedIn) {\n <a\n #loginLink\n href=\"#\"\n class=\"ecl-button ecl-button--tertiary ecl-site-header__login-toggle\"\n aria-controls=\"login-box-id\"\n [attr.aria-expanded]=\"isLoginBoxActive\"\n (click)=\"onLoginBoxToggle($event)\">\n <ecl-icon icon=\"logged-in\" size=\"s\" class=\"ecl-site-header__icon\"></ecl-icon>\n {{ 'ecl.site-header.LOGGED-IN' | translate }}\n <ecl-icon icon=\"corner-arrow\" size=\"xs\" class=\"ecl-site-header__login-arrow\"></ecl-icon>\n </a>\n <div\n [style]=\"{'--ecl-login-arrow-position': loginArrowPosition}\"\n class=\"{{ getLoginBoxCssClasses() }}\">\n <ng-content></ng-content>\n </div>\n} @else {\n <a\n href=\"#\"\n class=\"ecl-button ecl-button--tertiary ecl-site-header__login-toggle\"\n [attr.aria-expanded]=\"isLoginBoxActive\"\n (click)=\"onLoginClick($event)\">\n <ecl-icon icon=\"log-in\" size=\"s\" class=\"ecl-site-header__icon\"></ecl-icon>\n {{ 'ecl.site-header.LOGIN' | translate }}\n </a>\n}\n", styles: [":host{display:block}\n"] }]
|
|
2181
|
+
args: [{ selector: 'ecl-site-header-login', template: "@if (isLoggedIn) {\n <a\n #loginLink\n href=\"#\"\n class=\"ecl-button ecl-button--tertiary ecl-site-header__login-toggle\"\n aria-controls=\"login-box-id\"\n [attr.aria-expanded]=\"isLoginBoxActive\"\n (click)=\"onLoginBoxToggle($event)\">\n <ecl-icon icon=\"logged-in\" size=\"s\" class=\"ecl-site-header__icon\"></ecl-icon>\n {{ 'ecl.site-header.LOGGED-IN' | translate }}\n <ecl-icon icon=\"corner-arrow\" size=\"xs\" class=\"ecl-site-header__login-arrow\"></ecl-icon>\n </a>\n <div\n id=\"login-box-id\"\n [style]=\"{'--ecl-login-arrow-position': loginArrowPosition}\"\n class=\"{{ getLoginBoxCssClasses() }}\">\n <ng-content></ng-content>\n </div>\n} @else {\n <a\n href=\"#\"\n class=\"ecl-button ecl-button--tertiary ecl-site-header__login-toggle\"\n [attr.aria-expanded]=\"isLoginBoxActive\"\n (click)=\"onLoginClick($event)\">\n <ecl-icon icon=\"log-in\" size=\"s\" class=\"ecl-site-header__icon\"></ecl-icon>\n {{ 'ecl.site-header.LOGIN' | translate }}\n </a>\n}\n", styles: [":host{display:block}\n"] }]
|
|
2182
2182
|
}], ctorParameters: () => [{ type: EclSiteHeaderAreaDataService }, { type: EclRtlService }], propDecorators: { isLoggedIn: [{
|
|
2183
2183
|
type: Input,
|
|
2184
2184
|
args: [{ transform: booleanAttribute }]
|
|
@@ -7769,7 +7769,6 @@ class EclDatePickerDirective extends ECLBaseDirective {
|
|
|
7769
7769
|
this.type = 'text';
|
|
7770
7770
|
this.datePicked = new EventEmitter();
|
|
7771
7771
|
this.isDisabled = null;
|
|
7772
|
-
this.pickerInitialized$ = new BehaviorSubject(false);
|
|
7773
7772
|
this.destroy$ = new Subject();
|
|
7774
7773
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
7775
7774
|
this.onChange = noop$1;
|
|
@@ -7803,16 +7802,10 @@ class EclDatePickerDirective extends ECLBaseDirective {
|
|
|
7803
7802
|
}
|
|
7804
7803
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
7805
7804
|
writeValue(value) {
|
|
7805
|
+
this.value = value;
|
|
7806
7806
|
if (this.picker) {
|
|
7807
7807
|
this.picker.setDate(value);
|
|
7808
7808
|
}
|
|
7809
|
-
else {
|
|
7810
|
-
this.pickerInitialized$.pipe(first(() => this.picker !== undefined)).subscribe((isInitialized) => {
|
|
7811
|
-
if (isInitialized && this.picker) {
|
|
7812
|
-
this.picker.setDate(value);
|
|
7813
|
-
}
|
|
7814
|
-
});
|
|
7815
|
-
}
|
|
7816
7809
|
}
|
|
7817
7810
|
setDisabledState(isDisabled) {
|
|
7818
7811
|
this.isDisabled = isDisabled || null;
|
|
@@ -7873,7 +7866,7 @@ class EclDatePickerDirective extends ECLBaseDirective {
|
|
|
7873
7866
|
}
|
|
7874
7867
|
},
|
|
7875
7868
|
});
|
|
7876
|
-
this.
|
|
7869
|
+
this.picker.setDate(this.value);
|
|
7877
7870
|
}
|
|
7878
7871
|
catch (error) {
|
|
7879
7872
|
console.error('Error importing Pikaday', error);
|
|
@@ -7882,6 +7875,8 @@ class EclDatePickerDirective extends ECLBaseDirective {
|
|
|
7882
7875
|
handlei18nEvents() {
|
|
7883
7876
|
this.translateService.onLangChange.pipe(takeUntil(this.destroy$))
|
|
7884
7877
|
.subscribe((langChangeEvent) => {
|
|
7878
|
+
this.value = this.picker.getDate();
|
|
7879
|
+
this.destroyPikaday();
|
|
7885
7880
|
this.initPikaday().then();
|
|
7886
7881
|
});
|
|
7887
7882
|
}
|
|
@@ -7918,6 +7913,12 @@ class EclDatePickerDirective extends ECLBaseDirective {
|
|
|
7918
7913
|
eclIconComponent.instance.baseDirective.class = 'ecl-datepicker__icon';
|
|
7919
7914
|
return eclIconComponent.location.nativeElement;
|
|
7920
7915
|
}
|
|
7916
|
+
destroyPikaday() {
|
|
7917
|
+
if (this.picker) {
|
|
7918
|
+
this.picker.destroy();
|
|
7919
|
+
this.picker = undefined;
|
|
7920
|
+
}
|
|
7921
|
+
}
|
|
7921
7922
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: EclDatePickerDirective, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i1$2.TranslateService }, { token: EclLanguageService }, { token: i0.Renderer2 }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
7922
7923
|
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.1", type: EclDatePickerDirective, selector: "input[eclDatePicker]", inputs: { yearRange: "yearRange", format: "format" }, outputs: { datePicked: "datePicked" }, host: { listeners: { "click": "onClick()", "blur": "onBlur()" }, properties: { "attr.type": "this.type", "class": "this.cssClasses", "attr.disabled": "this.isDisabled" } }, providers: [ECL_DATE_PICKER_VALUE_ACCESSOR], usesInheritance: true, ngImport: i0 }); }
|
|
7923
7924
|
}
|
|
@@ -8939,12 +8940,13 @@ class EclFileItemComponent extends ECLBaseDirective {
|
|
|
8939
8940
|
super();
|
|
8940
8941
|
this.eclFileComponent = eclFileComponent;
|
|
8941
8942
|
this.isDescription = false;
|
|
8943
|
+
this.role = 'listitem';
|
|
8942
8944
|
}
|
|
8943
8945
|
get isThumbnail() {
|
|
8944
8946
|
return this.eclFileComponent && this.eclFileComponent.isThumbnail;
|
|
8945
8947
|
}
|
|
8946
8948
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: EclFileItemComponent, deps: [{ token: EclFileComponent }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8947
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.1", type: EclFileItemComponent, selector: "ecl-file-item", inputs: { isDescription: ["isDescription", "isDescription", booleanAttribute], eclTitle: "eclTitle", titleId: "titleId", meta: "meta", label: "label", langDetail: "langDetail" }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: "@if (isDescription) {\n <ng-content></ng-content>\n} @else {\n <div class=\"ecl-file__translation-info\">\n <div class=\"ecl-file__translation-title\" [id]=\"titleId\" [attr.lang]=\"langDetail\">{{ eclTitle }}</div>\n <div class=\"ecl-file__translation-meta\">{{ meta }}</div>\n </div>\n <ng-content select=\"[eclFileTranslationDownload]\"></ng-content>\n}\n" }); }
|
|
8949
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.1", type: EclFileItemComponent, selector: "ecl-file-item", inputs: { isDescription: ["isDescription", "isDescription", booleanAttribute], eclTitle: "eclTitle", titleId: "titleId", meta: "meta", label: "label", langDetail: "langDetail" }, host: { properties: { "class": "this.cssClasses", "attr.role": "this.role" } }, usesInheritance: true, ngImport: i0, template: "@if (isDescription) {\n <ng-content></ng-content>\n} @else {\n <div class=\"ecl-file__translation-info\">\n <div class=\"ecl-file__translation-title\" [id]=\"titleId\" [attr.lang]=\"langDetail\">{{ eclTitle }}</div>\n <div class=\"ecl-file__translation-meta\">{{ meta }}</div>\n </div>\n <ng-content select=\"[eclFileTranslationDownload]\"></ng-content>\n}\n" }); }
|
|
8948
8950
|
}
|
|
8949
8951
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: EclFileItemComponent, decorators: [{
|
|
8950
8952
|
type: Component,
|
|
@@ -8965,6 +8967,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImpor
|
|
|
8965
8967
|
}], cssClasses: [{
|
|
8966
8968
|
type: HostBinding,
|
|
8967
8969
|
args: ['class']
|
|
8970
|
+
}], role: [{
|
|
8971
|
+
type: HostBinding,
|
|
8972
|
+
args: ['attr.role']
|
|
8968
8973
|
}] } });
|
|
8969
8974
|
|
|
8970
8975
|
class EclFileItemsToggleEvent extends EclBaseEvent {
|
|
@@ -9848,6 +9853,7 @@ class EclInpageNavigationItemComponent extends ECLBaseDirective {
|
|
|
9848
9853
|
constructor() {
|
|
9849
9854
|
super(...arguments);
|
|
9850
9855
|
this.cmpClass = true;
|
|
9856
|
+
this.role = 'listitem';
|
|
9851
9857
|
this.itemClick = new EventEmitter();
|
|
9852
9858
|
this.itemArrowUp = new EventEmitter();
|
|
9853
9859
|
this.itemArrowDown = new EventEmitter();
|
|
@@ -9876,7 +9882,7 @@ class EclInpageNavigationItemComponent extends ECLBaseDirective {
|
|
|
9876
9882
|
this.link.onFocus();
|
|
9877
9883
|
}
|
|
9878
9884
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: EclInpageNavigationItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
9879
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.1", type: EclInpageNavigationItemComponent, selector: "ecl-inpage-navigation-item", inputs: { label: "label", sectionId: "sectionId", isActive: "isActive" }, outputs: { itemClick: "itemClick", itemArrowUp: "itemArrowUp", itemArrowDown: "itemArrowDown", itemTab: "itemTab" }, host: { properties: { "class.ecl-inpage-navigation__item": "this.cmpClass", "class.ecl-inpage-navigation__item--active": "this.isActive" } }, viewQueries: [{ propertyName: "link", first: true, predicate: EclLinkDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<a eclLink (click)=\"onItemClick($event)\" href=\"#\" class=\"ecl-inpage-navigation__link\"\n (keydown.arrowUp)=\"onArrowUp($event)\" (keydown.arrowDown)=\"onArrowDown($event)\"\n (keydown.tab)=\"onTab($event)\">\n {{ label }}\n</a>\n", styles: [":host{display:list-item}\n"], dependencies: [{ kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["isInverted", "isIconOnly", "isNoVisited", "variant"] }] }); }
|
|
9885
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.1", type: EclInpageNavigationItemComponent, selector: "ecl-inpage-navigation-item", inputs: { label: "label", sectionId: "sectionId", isActive: "isActive" }, outputs: { itemClick: "itemClick", itemArrowUp: "itemArrowUp", itemArrowDown: "itemArrowDown", itemTab: "itemTab" }, host: { properties: { "class.ecl-inpage-navigation__item": "this.cmpClass", "attr.role": "this.role", "class.ecl-inpage-navigation__item--active": "this.isActive" } }, viewQueries: [{ propertyName: "link", first: true, predicate: EclLinkDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<a eclLink (click)=\"onItemClick($event)\" href=\"#\" class=\"ecl-inpage-navigation__link\"\n (keydown.arrowUp)=\"onArrowUp($event)\" (keydown.arrowDown)=\"onArrowDown($event)\"\n (keydown.tab)=\"onTab($event)\">\n {{ label }}\n</a>\n", styles: [":host{display:list-item}\n"], dependencies: [{ kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["isInverted", "isIconOnly", "isNoVisited", "variant"] }] }); }
|
|
9880
9886
|
}
|
|
9881
9887
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: EclInpageNavigationItemComponent, decorators: [{
|
|
9882
9888
|
type: Component,
|
|
@@ -9884,6 +9890,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImpor
|
|
|
9884
9890
|
}], propDecorators: { cmpClass: [{
|
|
9885
9891
|
type: HostBinding,
|
|
9886
9892
|
args: ['class.ecl-inpage-navigation__item']
|
|
9893
|
+
}], role: [{
|
|
9894
|
+
type: HostBinding,
|
|
9895
|
+
args: ['attr.role']
|
|
9887
9896
|
}], label: [{
|
|
9888
9897
|
type: Input
|
|
9889
9898
|
}], sectionId: [{
|
|
@@ -10200,11 +10209,11 @@ class EclInpageNavigationComponent extends ECLBaseDirective {
|
|
|
10200
10209
|
});
|
|
10201
10210
|
}
|
|
10202
10211
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: EclInpageNavigationComponent, deps: [{ token: i0.ElementRef }, { token: EclRtlService }, { token: EclThemeService }, { token: i0.IterableDiffers }, { token: i2.ScrollDispatcher }, { token: i0.NgZone }, { token: i1$4.BreakpointObserver }, { token: i2.ViewportRuler }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10203
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.1", type: EclInpageNavigationComponent, selector: "ecl-inpage-navigation", inputs: { eclTitle: "eclTitle", marginTop: "marginTop", marginBottom: "marginBottom" }, outputs: { sectionEnter: "sectionEnter" }, queries: [{ propertyName: "eclNavigationLinkItems", predicate: EclInpageNavigationItemComponent }], viewQueries: [{ propertyName: "togglerButton", first: true, predicate: ["togglerButton"], descendants: true }, { propertyName: "listContainer", first: true, predicate: ["listContainer"], descendants: true }, { propertyName: "navTittle", first: true, predicate: ["navTittle"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ecl-sticky-container [marginTop]=\"marginTop\" [marginBottom]=\"marginBottom\">\n <nav\n aria-labelledby=\"ecl-inpage-navigation-default\"\n class=\"ecl-inpage-navigation\"\n [class.ecl-inpage-navigation--visible]=\"hasActiveSection\"\n [class.ecl-inpage-navigation--rtl]=\"isRtl\">\n <div #navTittle id=\"ecl-inpage-navigation-default\" class=\"ecl-inpage-navigation__title\">\n {{ eclTitle || 'ecl.inpage-navigation.PAGE-CONTENTS' | translate }}\n </div>\n <div class=\"ecl-inpage-navigation__body\">\n <div class=\"ecl-inpage-navigation__trigger-wrapper\">\n <button\n #togglerButton\n id=\"ecl-inpage-navigation-default-trigger\"\n type=\"button\"\n class=\"ecl-inpage-navigation__trigger\"\n aria-controls=\"ecl-inpage-navigation-list\"\n [attr.aria-expanded]=\"isButtonExpanded\"\n (click)=\"onExpandButtonClick()\"\n (keydown)=\"onExpandButtonKeydown($event)\">\n <span class=\"ecl-inpage-navigation__trigger-current\">\n {{ currentNavigationLinkItem?.label }}\n </span>\n <ecl-icon icon=\"corner-arrow\" [size]=\"sizeIcon\" transform=\"rotate-180\"\n class=\"ecl-inpage-navigation__trigger-icon\" title=\"Show full page table of contents\"> </ecl-icon>\n </button>\n </div>\n <ul\n #listContainer\n id=\"ecl-inpage-navigation-default-list\"\n class=\"ecl-inpage-navigation__list\"\n [class.ecl-inpage-navigation__list--visible]=\"isButtonExpanded\"\n [style.max-height.px]=\"listMaxHeight\"\n [attr.aria-expanded]=\"isButtonExpanded\"
|
|
10212
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.1", type: EclInpageNavigationComponent, selector: "ecl-inpage-navigation", inputs: { eclTitle: "eclTitle", marginTop: "marginTop", marginBottom: "marginBottom" }, outputs: { sectionEnter: "sectionEnter" }, queries: [{ propertyName: "eclNavigationLinkItems", predicate: EclInpageNavigationItemComponent }], viewQueries: [{ propertyName: "togglerButton", first: true, predicate: ["togglerButton"], descendants: true }, { propertyName: "listContainer", first: true, predicate: ["listContainer"], descendants: true }, { propertyName: "navTittle", first: true, predicate: ["navTittle"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ecl-sticky-container [marginTop]=\"marginTop\" [marginBottom]=\"marginBottom\">\n <nav\n aria-labelledby=\"ecl-inpage-navigation-default\"\n class=\"ecl-inpage-navigation\"\n [class.ecl-inpage-navigation--visible]=\"hasActiveSection\"\n [class.ecl-inpage-navigation--rtl]=\"isRtl\">\n <div #navTittle id=\"ecl-inpage-navigation-default\" class=\"ecl-inpage-navigation__title\">\n {{ eclTitle || 'ecl.inpage-navigation.PAGE-CONTENTS' | translate }}\n </div>\n <div class=\"ecl-inpage-navigation__body\">\n <div class=\"ecl-inpage-navigation__trigger-wrapper\">\n <button\n #togglerButton\n id=\"ecl-inpage-navigation-default-trigger\"\n type=\"button\"\n class=\"ecl-inpage-navigation__trigger\"\n aria-controls=\"ecl-inpage-navigation-list\"\n [attr.aria-expanded]=\"isButtonExpanded\"\n (click)=\"onExpandButtonClick()\"\n (keydown)=\"onExpandButtonKeydown($event)\">\n <span class=\"ecl-inpage-navigation__trigger-current\">\n {{ currentNavigationLinkItem?.label }}\n </span>\n <ecl-icon icon=\"corner-arrow\" [size]=\"sizeIcon\" transform=\"rotate-180\"\n class=\"ecl-inpage-navigation__trigger-icon\" title=\"Show full page table of contents\"> </ecl-icon>\n </button>\n </div>\n <ul\n #listContainer\n id=\"ecl-inpage-navigation-default-list\"\n class=\"ecl-inpage-navigation__list\"\n [class.ecl-inpage-navigation__list--visible]=\"isButtonExpanded\"\n [style.max-height.px]=\"listMaxHeight\"\n [attr.aria-expanded]=\"isButtonExpanded\">\n <ng-content></ng-content>\n </ul>\n </div>\n </nav>\n</ecl-sticky-container>\n", styles: ["@media (min-width: 996px){.ecl-inpage-navigation__list{display:block!important}}\n"], dependencies: [{ kind: "component", type: EclStickyContainerComponent, selector: "ecl-sticky-container", inputs: ["isEnabled", "marginTop", "marginBottom"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
|
|
10204
10213
|
}
|
|
10205
10214
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: EclInpageNavigationComponent, decorators: [{
|
|
10206
10215
|
type: Component,
|
|
10207
|
-
args: [{ selector: 'ecl-inpage-navigation', template: "<ecl-sticky-container [marginTop]=\"marginTop\" [marginBottom]=\"marginBottom\">\n <nav\n aria-labelledby=\"ecl-inpage-navigation-default\"\n class=\"ecl-inpage-navigation\"\n [class.ecl-inpage-navigation--visible]=\"hasActiveSection\"\n [class.ecl-inpage-navigation--rtl]=\"isRtl\">\n <div #navTittle id=\"ecl-inpage-navigation-default\" class=\"ecl-inpage-navigation__title\">\n {{ eclTitle || 'ecl.inpage-navigation.PAGE-CONTENTS' | translate }}\n </div>\n <div class=\"ecl-inpage-navigation__body\">\n <div class=\"ecl-inpage-navigation__trigger-wrapper\">\n <button\n #togglerButton\n id=\"ecl-inpage-navigation-default-trigger\"\n type=\"button\"\n class=\"ecl-inpage-navigation__trigger\"\n aria-controls=\"ecl-inpage-navigation-list\"\n [attr.aria-expanded]=\"isButtonExpanded\"\n (click)=\"onExpandButtonClick()\"\n (keydown)=\"onExpandButtonKeydown($event)\">\n <span class=\"ecl-inpage-navigation__trigger-current\">\n {{ currentNavigationLinkItem?.label }}\n </span>\n <ecl-icon icon=\"corner-arrow\" [size]=\"sizeIcon\" transform=\"rotate-180\"\n class=\"ecl-inpage-navigation__trigger-icon\" title=\"Show full page table of contents\"> </ecl-icon>\n </button>\n </div>\n <ul\n #listContainer\n id=\"ecl-inpage-navigation-default-list\"\n class=\"ecl-inpage-navigation__list\"\n [class.ecl-inpage-navigation__list--visible]=\"isButtonExpanded\"\n [style.max-height.px]=\"listMaxHeight\"\n [attr.aria-expanded]=\"isButtonExpanded\"
|
|
10216
|
+
args: [{ selector: 'ecl-inpage-navigation', template: "<ecl-sticky-container [marginTop]=\"marginTop\" [marginBottom]=\"marginBottom\">\n <nav\n aria-labelledby=\"ecl-inpage-navigation-default\"\n class=\"ecl-inpage-navigation\"\n [class.ecl-inpage-navigation--visible]=\"hasActiveSection\"\n [class.ecl-inpage-navigation--rtl]=\"isRtl\">\n <div #navTittle id=\"ecl-inpage-navigation-default\" class=\"ecl-inpage-navigation__title\">\n {{ eclTitle || 'ecl.inpage-navigation.PAGE-CONTENTS' | translate }}\n </div>\n <div class=\"ecl-inpage-navigation__body\">\n <div class=\"ecl-inpage-navigation__trigger-wrapper\">\n <button\n #togglerButton\n id=\"ecl-inpage-navigation-default-trigger\"\n type=\"button\"\n class=\"ecl-inpage-navigation__trigger\"\n aria-controls=\"ecl-inpage-navigation-list\"\n [attr.aria-expanded]=\"isButtonExpanded\"\n (click)=\"onExpandButtonClick()\"\n (keydown)=\"onExpandButtonKeydown($event)\">\n <span class=\"ecl-inpage-navigation__trigger-current\">\n {{ currentNavigationLinkItem?.label }}\n </span>\n <ecl-icon icon=\"corner-arrow\" [size]=\"sizeIcon\" transform=\"rotate-180\"\n class=\"ecl-inpage-navigation__trigger-icon\" title=\"Show full page table of contents\"> </ecl-icon>\n </button>\n </div>\n <ul\n #listContainer\n id=\"ecl-inpage-navigation-default-list\"\n class=\"ecl-inpage-navigation__list\"\n [class.ecl-inpage-navigation__list--visible]=\"isButtonExpanded\"\n [style.max-height.px]=\"listMaxHeight\"\n [attr.aria-expanded]=\"isButtonExpanded\">\n <ng-content></ng-content>\n </ul>\n </div>\n </nav>\n</ecl-sticky-container>\n", styles: ["@media (min-width: 996px){.ecl-inpage-navigation__list{display:block!important}}\n"] }]
|
|
10208
10217
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: EclRtlService }, { type: EclThemeService }, { type: i0.IterableDiffers }, { type: i2.ScrollDispatcher }, { type: i0.NgZone }, { type: i1$4.BreakpointObserver }, { type: i2.ViewportRuler }], propDecorators: { eclTitle: [{
|
|
10209
10218
|
type: Input
|
|
10210
10219
|
}], marginTop: [{
|