@eui/components 18.0.0-rc.34 → 18.0.0-rc.35

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.
Files changed (21) hide show
  1. package/docs/components/EuiAppComponent.html +13 -1
  2. package/docs/components/EuiAppHeaderComponent.html +13 -1
  3. package/docs/components/EuiAppSidebarComponent.html +13 -1
  4. package/docs/components/EuiAppTopMessageComponent.html +13 -1
  5. package/docs/dependencies.html +1 -1
  6. package/docs/js/search/search_index.js +2 -2
  7. package/esm2022/layout/eui-app/eui-app-header/header.component.mjs +11 -6
  8. package/esm2022/layout/eui-app/eui-app-sidebar/sidebar.component.mjs +10 -5
  9. package/esm2022/layout/eui-app/eui-app-top-message/top-message.component.mjs +12 -7
  10. package/esm2022/layout/eui-app/eui-app.component.mjs +10 -6
  11. package/fesm2022/eui-components-layout.mjs +34 -18
  12. package/fesm2022/eui-components-layout.mjs.map +1 -1
  13. package/layout/eui-app/eui-app-header/header.component.d.ts +2 -1
  14. package/layout/eui-app/eui-app-header/header.component.d.ts.map +1 -1
  15. package/layout/eui-app/eui-app-sidebar/sidebar.component.d.ts +3 -2
  16. package/layout/eui-app/eui-app-sidebar/sidebar.component.d.ts.map +1 -1
  17. package/layout/eui-app/eui-app-top-message/top-message.component.d.ts +2 -1
  18. package/layout/eui-app/eui-app-top-message/top-message.component.d.ts.map +1 -1
  19. package/layout/eui-app/eui-app.component.d.ts +2 -1
  20. package/layout/eui-app/eui-app.component.d.ts.map +1 -1
  21. package/package.json +3 -3
package/fesm2022/eui-components-layout.mjs CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as i1$1 from '@angular/common';
2
- import { CommonModule, NgFor, NgIf, NgForOf, AsyncPipe, NgTemplateOutlet, isPlatformBrowser } from '@angular/common';
2
+ import { DOCUMENT, CommonModule, NgFor, NgIf, NgForOf, AsyncPipe, NgTemplateOutlet, isPlatformBrowser } from '@angular/common';
3
3
  import * as i0 from '@angular/core';
4
- import { Component, ChangeDetectionStrategy, ViewEncapsulation, Optional, HostBinding, HostListener, EventEmitter, booleanAttribute, Input, Output, ContentChildren, forwardRef, NgModule, Inject, ContentChild, Host, PLATFORM_ID, Directive, ViewChild } from '@angular/core';
4
+ import { Component, ChangeDetectionStrategy, ViewEncapsulation, Optional, Inject, HostBinding, HostListener, EventEmitter, booleanAttribute, Input, Output, ContentChildren, forwardRef, NgModule, ContentChild, Host, PLATFORM_ID, Directive, ViewChild } from '@angular/core';
5
5
  import * as i1$2 from '@angular/router';
6
6
  import { RouterModule, RouterLink } from '@angular/router';
7
7
  import { Subscription, Subject, fromEvent, startWith } from 'rxjs';
@@ -55,8 +55,9 @@ import * as i4$4 from '@eui/components/eui-badge';
55
55
  import { EuiBadgeModule } from '@eui/components/eui-badge';
56
56
 
57
57
  class EuiAppSidebarComponent {
58
- constructor(asService) {
58
+ constructor(asService, document) {
59
59
  this.asService = asService;
60
+ this.document = document;
60
61
  this.string = 'eui-app-sidebar';
61
62
  this.subscriptions = [];
62
63
  }
@@ -83,9 +84,9 @@ class EuiAppSidebarComponent {
83
84
  ...this.asService.state,
84
85
  hasSidebar: false,
85
86
  });
86
- CssUtils.removeSidebarCssVars();
87
+ CssUtils.removeSidebarCssVars(this.document);
87
88
  }
88
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: EuiAppSidebarComponent, deps: [{ token: i1.EuiAppShellService, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
89
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: EuiAppSidebarComponent, deps: [{ token: i1.EuiAppShellService, optional: true }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
89
90
  static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0", type: EuiAppSidebarComponent, selector: "eui-app-sidebar", host: { listeners: { "body:click": "close()" }, properties: { "class": "this.string" } }, ngImport: i0, template: "<aside class=\"eui-app-sidebar-content\">\n <ng-content select=\"eui-app-sidebar-header-user-profile\"></ng-content>\n <ng-content select=\"eui-app-sidebar-header\"></ng-content>\n <ng-content select=\"eui-app-sidebar-body\"></ng-content>\n <ng-content select=\"eui-app-sidebar-footer\"></ng-content>\n <ng-content select=\"eui-app-sidebar-drawer\"></ng-content>\n</aside>\n", styles: [".eui-app-sidebar{background-color:var(--eui-c-bg);height:100%;left:0;position:fixed;top:calc(var(--eui-app-header-height) + var(--eui-app-toolbar-height) + var(--eui-app-top-message-height));transition:top .1s ease,width .1s ease-in,margin-left .1s ease-in;width:var(--eui-app-sidebar-width);box-shadow:var(--eui-sh-10)}.eui-app.ff.sidebar--close:not(.sidebar--hover) .eui-app-sidebar{width:calc(var(--eui-app-sidebar-width-close-active) + 16px)}.modal-open .eui-app-sidebar{z-index:auto}.eui-app-sidebar-content{border-right:1px solid var(--eui-c-neutral-bg-light);background-color:#f9f9f9;box-shadow:0 8px 10px #b7c0cebf;display:flex;flex-direction:column;height:100%;max-height:calc(100% - (var(--eui-app-header-height) + var(--eui-app-toolbar-height) + var(--eui-app-top-message-height)));overflow:hidden;position:relative}.eui-app-sidebar-header{align-items:center;background-color:var(--eui-c-neutral-bg-light);border-bottom:1px solid var(--eui-c-neutral-bg-light);display:flex;width:100%}.eui-app-sidebar-body{display:flex;height:100%;max-height:calc(100% - (var(--eui-app-sidebar-header-height) + var(--eui-app-sidebar-footer-height)));overflow-x:hidden;overflow-y:scroll}.eui-app-sidebar-body::-webkit-scrollbar{display:inherit;height:8px;width:8px;background-color:var(--eui-c-neutral-bg-light)}.eui-app-sidebar-body::-webkit-scrollbar-thumb{background-color:var(--eui-c-neutral-lightest);border-radius:5rem}.eui-app-sidebar-body::-webkit-scrollbar-thumb:hover{background-color:var(--eui-c-neutral-lighter)}.eui-app-sidebar-body::-webkit-scrollbar-track{background-color:var(--eui-c-neutral-bg-light);border-radius:0}.sidebar--close:not(.sidebar--hover) .eui-app-sidebar-body{max-height:100%}.eui-app-sidebar-footer{align-items:center;display:flex;flex:0 0 auto;justify-content:center;padding:var(--eui-s-xs)}.eui-app-sidebar-menu{display:flex;height:100%;width:100%}@media screen and (max-width: 767px){.eui-app-sidebar{z-index:var(--eui-zi-sidebar)}.eui-app-sidebar-body{max-height:100%}.sidebar--close .eui-app-sidebar{box-shadow:none!important;margin-left:calc(var(--eui-app-sidebar-width-active) * -1)}.sidebar--open .eui-app-sidebar{display:initial;margin-left:0;width:75%}}@media screen and (min-width: 768px) and (max-width: 995px){.eui-app-sidebar{z-index:var(--eui-zi-sidebar)}.eui-app-sidebar-body{max-height:100%}.sidebar--close .eui-app-sidebar{box-shadow:none!important;margin-left:calc(var(--eui-app-sidebar-width-active) * -1)}.sidebar--open .eui-app-sidebar{display:initial;margin-left:0;width:50%}.sidebar--hidden.sidebar--open .eui-app-sidebar{box-shadow:var(--eui-sh-4);width:var(--eui-app-sidebar-width-active)}}@media screen and (min-width: 996px){.sidebar--hover .eui-app-sidebar{z-index:var(--eui-zi-sidebar)}.sidebar--close:not(.sidebar--hover) .eui-app-sidebar{width:var(--eui-app-sidebar-width-close)}.sidebar--close:not(.sidebar--hover) .eui-app-sidebar-header{display:none}.sidebar--close:not(.sidebar--hover) .eui-app-sidebar-footer{text-indent:-9999px}.sidebar--hidden.sidebar--close .eui-app-sidebar{margin-left:calc(var(--eui-app-sidebar-width-active) * -1)}.sidebar--hidden.sidebar--open .eui-app-sidebar{box-shadow:var(--eui-sh-4);display:initial;margin-left:0;width:var(--eui-app-sidebar-width-active);z-index:var(--eui-zi-sidebar)}}.eui-app-sidebar-drawer{display:none}.eui-app.sidebar--open.md .eui-app-sidebar-drawer,.eui-app.sidebar--open.xs .eui-app-sidebar-drawer,.eui-app.sidebar--open.sm .eui-app-sidebar-drawer{display:flex;height:100%;position:fixed;top:100vh;transition:top .25s ease-in-out}.eui-app.sidebar--open.md .eui-app-sidebar-drawer-content,.eui-app.sidebar--open.xs .eui-app-sidebar-drawer-content,.eui-app.sidebar--open.sm .eui-app-sidebar-drawer-content{background:var(--eui-c-bg);border-top:1px solid var(--eui-c-neutral-lightest);height:calc(100% - var(--eui-app-sidebar-header-user-profile));overflow-y:auto;padding:var(--eui-s-s);width:100%}.eui-app.sidebar--open.md .eui-app-sidebar-drawer-content::-webkit-scrollbar,.eui-app.sidebar--open.xs .eui-app-sidebar-drawer-content::-webkit-scrollbar,.eui-app.sidebar--open.sm .eui-app-sidebar-drawer-content::-webkit-scrollbar{display:inherit;height:8px;width:8px;background-color:var(--eui-c-neutral-bg-light)}.eui-app.sidebar--open.md .eui-app-sidebar-drawer-content::-webkit-scrollbar-thumb,.eui-app.sidebar--open.xs .eui-app-sidebar-drawer-content::-webkit-scrollbar-thumb,.eui-app.sidebar--open.sm .eui-app-sidebar-drawer-content::-webkit-scrollbar-thumb{background-color:var(--eui-c-neutral-lightest);border-radius:5rem}.eui-app.sidebar--open.md .eui-app-sidebar-drawer-content::-webkit-scrollbar-thumb:hover,.eui-app.sidebar--open.xs .eui-app-sidebar-drawer-content::-webkit-scrollbar-thumb:hover,.eui-app.sidebar--open.sm .eui-app-sidebar-drawer-content::-webkit-scrollbar-thumb:hover{background-color:var(--eui-c-neutral-lighter)}.eui-app.sidebar--open.md .eui-app-sidebar-drawer-content::-webkit-scrollbar-track,.eui-app.sidebar--open.xs .eui-app-sidebar-drawer-content::-webkit-scrollbar-track,.eui-app.sidebar--open.sm .eui-app-sidebar-drawer-content::-webkit-scrollbar-track{background-color:var(--eui-c-neutral-bg-light);border-radius:0}.eui-app.sidebar--open.md .eui-app-sidebar-drawer--expanded,.eui-app.sidebar--open.xs .eui-app-sidebar-drawer--expanded,.eui-app.sidebar--open.sm .eui-app-sidebar-drawer--expanded{top:var(--eui-app-sidebar-header-user-profile);position:absolute;width:100%}.eui-app.sidebar--close.md .eui-app-sidebar-drawer,.eui-app.sidebar--close.xs .eui-app-sidebar-drawer,.eui-app.sidebar--close.sm .eui-app-sidebar-drawer{position:fixed;top:100vh}@media screen and (max-width: 767px){.eui-app-sidebar-drawer,.eui-app-sidebar-drawer--expanded{width:75%}}@media screen and (min-width: 768px) and (max-width: 995px){.eui-app-sidebar-drawer,.eui-app-sidebar-drawer--expanded{width:50%}}\n"], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
90
91
  }
91
92
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: EuiAppSidebarComponent, decorators: [{
@@ -93,6 +94,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImpor
93
94
  args: [{ selector: 'eui-app-sidebar', changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, template: "<aside class=\"eui-app-sidebar-content\">\n <ng-content select=\"eui-app-sidebar-header-user-profile\"></ng-content>\n <ng-content select=\"eui-app-sidebar-header\"></ng-content>\n <ng-content select=\"eui-app-sidebar-body\"></ng-content>\n <ng-content select=\"eui-app-sidebar-footer\"></ng-content>\n <ng-content select=\"eui-app-sidebar-drawer\"></ng-content>\n</aside>\n", styles: [".eui-app-sidebar{background-color:var(--eui-c-bg);height:100%;left:0;position:fixed;top:calc(var(--eui-app-header-height) + var(--eui-app-toolbar-height) + var(--eui-app-top-message-height));transition:top .1s ease,width .1s ease-in,margin-left .1s ease-in;width:var(--eui-app-sidebar-width);box-shadow:var(--eui-sh-10)}.eui-app.ff.sidebar--close:not(.sidebar--hover) .eui-app-sidebar{width:calc(var(--eui-app-sidebar-width-close-active) + 16px)}.modal-open .eui-app-sidebar{z-index:auto}.eui-app-sidebar-content{border-right:1px solid var(--eui-c-neutral-bg-light);background-color:#f9f9f9;box-shadow:0 8px 10px #b7c0cebf;display:flex;flex-direction:column;height:100%;max-height:calc(100% - (var(--eui-app-header-height) + var(--eui-app-toolbar-height) + var(--eui-app-top-message-height)));overflow:hidden;position:relative}.eui-app-sidebar-header{align-items:center;background-color:var(--eui-c-neutral-bg-light);border-bottom:1px solid var(--eui-c-neutral-bg-light);display:flex;width:100%}.eui-app-sidebar-body{display:flex;height:100%;max-height:calc(100% - (var(--eui-app-sidebar-header-height) + var(--eui-app-sidebar-footer-height)));overflow-x:hidden;overflow-y:scroll}.eui-app-sidebar-body::-webkit-scrollbar{display:inherit;height:8px;width:8px;background-color:var(--eui-c-neutral-bg-light)}.eui-app-sidebar-body::-webkit-scrollbar-thumb{background-color:var(--eui-c-neutral-lightest);border-radius:5rem}.eui-app-sidebar-body::-webkit-scrollbar-thumb:hover{background-color:var(--eui-c-neutral-lighter)}.eui-app-sidebar-body::-webkit-scrollbar-track{background-color:var(--eui-c-neutral-bg-light);border-radius:0}.sidebar--close:not(.sidebar--hover) .eui-app-sidebar-body{max-height:100%}.eui-app-sidebar-footer{align-items:center;display:flex;flex:0 0 auto;justify-content:center;padding:var(--eui-s-xs)}.eui-app-sidebar-menu{display:flex;height:100%;width:100%}@media screen and (max-width: 767px){.eui-app-sidebar{z-index:var(--eui-zi-sidebar)}.eui-app-sidebar-body{max-height:100%}.sidebar--close .eui-app-sidebar{box-shadow:none!important;margin-left:calc(var(--eui-app-sidebar-width-active) * -1)}.sidebar--open .eui-app-sidebar{display:initial;margin-left:0;width:75%}}@media screen and (min-width: 768px) and (max-width: 995px){.eui-app-sidebar{z-index:var(--eui-zi-sidebar)}.eui-app-sidebar-body{max-height:100%}.sidebar--close .eui-app-sidebar{box-shadow:none!important;margin-left:calc(var(--eui-app-sidebar-width-active) * -1)}.sidebar--open .eui-app-sidebar{display:initial;margin-left:0;width:50%}.sidebar--hidden.sidebar--open .eui-app-sidebar{box-shadow:var(--eui-sh-4);width:var(--eui-app-sidebar-width-active)}}@media screen and (min-width: 996px){.sidebar--hover .eui-app-sidebar{z-index:var(--eui-zi-sidebar)}.sidebar--close:not(.sidebar--hover) .eui-app-sidebar{width:var(--eui-app-sidebar-width-close)}.sidebar--close:not(.sidebar--hover) .eui-app-sidebar-header{display:none}.sidebar--close:not(.sidebar--hover) .eui-app-sidebar-footer{text-indent:-9999px}.sidebar--hidden.sidebar--close .eui-app-sidebar{margin-left:calc(var(--eui-app-sidebar-width-active) * -1)}.sidebar--hidden.sidebar--open .eui-app-sidebar{box-shadow:var(--eui-sh-4);display:initial;margin-left:0;width:var(--eui-app-sidebar-width-active);z-index:var(--eui-zi-sidebar)}}.eui-app-sidebar-drawer{display:none}.eui-app.sidebar--open.md .eui-app-sidebar-drawer,.eui-app.sidebar--open.xs .eui-app-sidebar-drawer,.eui-app.sidebar--open.sm .eui-app-sidebar-drawer{display:flex;height:100%;position:fixed;top:100vh;transition:top .25s ease-in-out}.eui-app.sidebar--open.md .eui-app-sidebar-drawer-content,.eui-app.sidebar--open.xs .eui-app-sidebar-drawer-content,.eui-app.sidebar--open.sm .eui-app-sidebar-drawer-content{background:var(--eui-c-bg);border-top:1px solid var(--eui-c-neutral-lightest);height:calc(100% - var(--eui-app-sidebar-header-user-profile));overflow-y:auto;padding:var(--eui-s-s);width:100%}.eui-app.sidebar--open.md .eui-app-sidebar-drawer-content::-webkit-scrollbar,.eui-app.sidebar--open.xs .eui-app-sidebar-drawer-content::-webkit-scrollbar,.eui-app.sidebar--open.sm .eui-app-sidebar-drawer-content::-webkit-scrollbar{display:inherit;height:8px;width:8px;background-color:var(--eui-c-neutral-bg-light)}.eui-app.sidebar--open.md .eui-app-sidebar-drawer-content::-webkit-scrollbar-thumb,.eui-app.sidebar--open.xs .eui-app-sidebar-drawer-content::-webkit-scrollbar-thumb,.eui-app.sidebar--open.sm .eui-app-sidebar-drawer-content::-webkit-scrollbar-thumb{background-color:var(--eui-c-neutral-lightest);border-radius:5rem}.eui-app.sidebar--open.md .eui-app-sidebar-drawer-content::-webkit-scrollbar-thumb:hover,.eui-app.sidebar--open.xs .eui-app-sidebar-drawer-content::-webkit-scrollbar-thumb:hover,.eui-app.sidebar--open.sm .eui-app-sidebar-drawer-content::-webkit-scrollbar-thumb:hover{background-color:var(--eui-c-neutral-lighter)}.eui-app.sidebar--open.md .eui-app-sidebar-drawer-content::-webkit-scrollbar-track,.eui-app.sidebar--open.xs .eui-app-sidebar-drawer-content::-webkit-scrollbar-track,.eui-app.sidebar--open.sm .eui-app-sidebar-drawer-content::-webkit-scrollbar-track{background-color:var(--eui-c-neutral-bg-light);border-radius:0}.eui-app.sidebar--open.md .eui-app-sidebar-drawer--expanded,.eui-app.sidebar--open.xs .eui-app-sidebar-drawer--expanded,.eui-app.sidebar--open.sm .eui-app-sidebar-drawer--expanded{top:var(--eui-app-sidebar-header-user-profile);position:absolute;width:100%}.eui-app.sidebar--close.md .eui-app-sidebar-drawer,.eui-app.sidebar--close.xs .eui-app-sidebar-drawer,.eui-app.sidebar--close.sm .eui-app-sidebar-drawer{position:fixed;top:100vh}@media screen and (max-width: 767px){.eui-app-sidebar-drawer,.eui-app-sidebar-drawer--expanded{width:75%}}@media screen and (min-width: 768px) and (max-width: 995px){.eui-app-sidebar-drawer,.eui-app-sidebar-drawer--expanded{width:50%}}\n"] }]
94
95
  }], ctorParameters: () => [{ type: i1.EuiAppShellService, decorators: [{
95
96
  type: Optional
97
+ }] }, { type: Document, decorators: [{
98
+ type: Inject,
99
+ args: [DOCUMENT]
96
100
  }] }], propDecorators: { string: [{
97
101
  type: HostBinding,
98
102
  args: ['class']
@@ -1210,11 +1214,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImpor
1210
1214
  }] });
1211
1215
 
1212
1216
  class EuiAppComponent {
1213
- constructor(asService, euiGrowlService, cdRef, platformId) {
1217
+ constructor(asService, euiGrowlService, cdRef, platformId, document) {
1214
1218
  this.asService = asService;
1215
1219
  this.euiGrowlService = euiGrowlService;
1216
1220
  this.cdRef = cdRef;
1217
1221
  this.platformId = platformId;
1222
+ this.document = document;
1218
1223
  this.cssClasses = 'eui-app';
1219
1224
  this.appSubTitle = '';
1220
1225
  this.themeClass = '';
@@ -1230,7 +1235,7 @@ class EuiAppComponent {
1230
1235
  }
1231
1236
  ngOnInit() {
1232
1237
  this.isViewLoaded = false;
1233
- CssUtils.initCssVars();
1238
+ CssUtils.initCssVars(this.document);
1234
1239
  if (isPlatformBrowser(this.platformId)) {
1235
1240
  const browserAgent = window.navigator.userAgent.toLowerCase();
1236
1241
  this.asService.setState({
@@ -1264,7 +1269,7 @@ class EuiAppComponent {
1264
1269
  windowHeight: window.innerHeight,
1265
1270
  windowWidth: window.innerWidth,
1266
1271
  });
1267
- CssUtils.setAppViewportCssVars();
1272
+ CssUtils.setAppViewportCssVars(this.platformId);
1268
1273
  });
1269
1274
  }
1270
1275
  ngOnChanges(changes) {
@@ -1285,7 +1290,7 @@ class EuiAppComponent {
1285
1290
  this.destroy$.next(true);
1286
1291
  this.destroy$.unsubscribe();
1287
1292
  }
1288
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: EuiAppComponent, deps: [{ token: i1.EuiAppShellService }, { token: i1.EuiGrowlService }, { token: i0.ChangeDetectorRef }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component }); }
1293
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: EuiAppComponent, deps: [{ token: i1.EuiAppShellService }, { token: i1.EuiGrowlService }, { token: i0.ChangeDetectorRef }, { token: PLATFORM_ID }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
1289
1294
  static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0", type: EuiAppComponent, selector: "eui-app", inputs: { appSubTitle: "appSubTitle", themeClass: "themeClass", isSidebarOpen: ["isSidebarOpen", "isSidebarOpen", booleanAttribute], isShrinkHeaderActive: ["isShrinkHeaderActive", "isShrinkHeaderActive", booleanAttribute], isSidebarHidden: ["isSidebarHidden", "isSidebarHidden", booleanAttribute] }, host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "appSidebar", first: true, predicate: i0.forwardRef(() => EuiAppSidebarComponent), descendants: true }, { propertyName: "customPageWrapper", first: true, predicate: i0.forwardRef(() => EuiAppPageWrapperDirective), descendants: true }, { propertyName: "appToolbar", first: true, predicate: i0.forwardRef(() => EuiAppToolbarComponent), descendants: true }], usesOnChanges: true, ngImport: i0, template: "<eui-dimmer [isDimmerActive]=\"(asService.state$ | async).isDimmerActive\"></eui-dimmer>\n\n<ng-content select=\"eui-app-sidebar\"></ng-content>\n<ng-container *ngIf=\"!appSidebar && (asService.state$ | async).menuLinks.length !== 0 && (asService.state$ | async).hasHeader && (asService.breakpoints$ | async).isMobile\">\n <eui-app-sidebar>\n <eui-app-sidebar-body>\n <eui-app-sidebar-menu [items]=\"(asService.state$ | async).menuLinks\" [hasIcons]=\"true\"></eui-app-sidebar-menu>\n </eui-app-sidebar-body>\n </eui-app-sidebar>\n</ng-container>\n\n<div class=\"eui-app-main\" *ngIf=\"isViewLoaded\">\n <ng-content select=\"eui-app-top-message\"></ng-content>\n\n <ng-content select=\"eui-app-header\"></ng-content>\n\n <ng-container\n *ngIf=\"!appToolbar && (asService.state$ | async).hasHeader && (asService.breakpoints$ | async).isMobile; else elseBlockToolbar\">\n <eui-app-toolbar>\n <eui-toolbar></eui-toolbar>\n </eui-app-toolbar>\n </ng-container>\n\n <ng-template #elseBlockToolbar>\n <ng-content select=\"eui-app-toolbar\"></ng-content>\n </ng-template>\n\n <ng-content select=\"eui-app-breadcrumb\"></ng-content>\n\n <div class=\"eui-app-main-content\" role=\"main\">\n <ng-content select=\"eui-app-page-wrapper\"></ng-content>\n <ng-container *ngIf=\"hasNoPageWrapper\">\n <router-outlet></router-outlet>\n </ng-container>\n </div>\n\n <ng-content select=\"eui-app-footer\"></ng-content>\n</div>\n\n<eui-growl\n [value]=\"euiGrowlService.growlMessages\"\n [sticky]=\"euiGrowlService.isGrowlSticky\"\n [closeAllSticky]=\"euiGrowlService.isCloseAllSticky\"\n [life]=\"euiGrowlService.growlLife\"\n [position]=\"euiGrowlService.growlPosition\"\n (clicked)=\"euiGrowlService.growlCallback ? euiGrowlService.growlCallback(): null\"></eui-growl>\n\n<eui-block-document [isBlocked]=\"(asService.state$ | async).isBlockDocumentActive\"></eui-block-document>\n", styles: [".eui-app{display:flex;overflow:hidden}@media screen and (max-width: 767px){.eui-app.sidebar--open:before{background:#0000004d;bottom:0;content:\"\";position:fixed;right:0;top:calc(var(--eui-app-header-height) + var(--eui-app-toolbar-height) + var(--eui-app-top-message-height));transition:all .1s ease;width:100vw;z-index:980}}@media screen and (min-width: 768px) and (max-width: 995px){.eui-app.sidebar--open:before{background:#0000004d;bottom:0;content:\"\";position:fixed;right:0;top:calc(var(--eui-app-header-height) + var(--eui-app-toolbar-height) + var(--eui-app-top-message-height));transition:all .1s ease;width:100vw;z-index:980}}@media screen and (min-width: 996px){.sidebar--hidden.eui-app.sidebar--open:before{background:#0000004d;bottom:0;content:\"\";position:fixed;right:0;top:calc(var(--eui-app-header-height) + var(--eui-app-toolbar-height) + var(--eui-app-top-message-height));transition:all .1s ease;width:100vw;z-index:980}}.eui-app-main{min-height:100vh;background:var(--eui-c-bg);width:calc(100% - var(--eui-app-sidebar-width));margin-left:var(--eui-app-sidebar-width);transition:top .1s ease,width .1s ease-in,margin-left .1s ease-in-out;display:flex;flex-direction:column}@media screen and (max-width: 767px){.eui-app-main{margin-left:0;width:100%}}@media screen and (min-width: 768px) and (max-width: 995px){.eui-app-main{margin-left:0;width:100%}}@media screen and (min-width: 996px){.sidebar--close .eui-app-main{margin-left:var(--eui-app-sidebar-width-close);width:calc(100% - var(--eui-app-sidebar-width-close))}.sidebar--hidden.sidebar--close .eui-app-main,.sidebar--hidden.sidebar--open .eui-app-main{margin-left:0;width:100%}}.eui-app-main-content{flex-grow:1;margin-top:calc(var(--eui-app-header-height) + var(--eui-app-toolbar-height) + var(--eui-app-top-message-height) - var(--eui-app-breadcrumb-height));position:relative}eui-app-page-wrapper{display:flex;width:100%}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: EuiAppToolbarComponent, selector: "eui-app-toolbar", inputs: ["euiSecondary"] }, { kind: "component", type: EuiToolbarComponent, selector: "eui-toolbar", inputs: ["euiSecondary", "euiPrimary"] }, { kind: "component", type: EuiAppSidebarComponent, selector: "eui-app-sidebar" }, { kind: "component", type: EuiAppSidebarBodyComponent, selector: "eui-app-sidebar-body" }, { kind: "component", type: EuiAppSidebarMenuComponent, selector: "eui-app-sidebar-menu", inputs: ["hasFilter", "hasIcons", "hasTooltip", "expandAllItems", "isCollapsed", "hasCollapsedInitials", "isFlat", "hasScrollToItem", "hasBoldRootLevel", "items"], outputs: ["sidebarItemClick"] }, { kind: "component", type: i9$1.EuiBlockDocumentComponent, selector: "eui-block-document", inputs: ["isBlocked", "ariaLabel"] }, { kind: "component", type: i10.EuiGrowlComponent, selector: "eui-growl", inputs: ["e2eAttr", "sticky", "life", "value", "closeAllSticky", "position"], outputs: ["growlClick"] }, { kind: "component", type: i11.EuiDimmerComponent, selector: "eui-dimmer", inputs: ["isDimmerActive", "e2eAttr"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None }); }
1290
1295
  }
1291
1296
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: EuiAppComponent, decorators: [{
@@ -1294,6 +1299,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImpor
1294
1299
  }], ctorParameters: () => [{ type: i1.EuiAppShellService }, { type: i1.EuiGrowlService }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
1295
1300
  type: Inject,
1296
1301
  args: [PLATFORM_ID]
1302
+ }] }, { type: Document, decorators: [{
1303
+ type: Inject,
1304
+ args: [DOCUMENT]
1297
1305
  }] }], propDecorators: { cssClasses: [{
1298
1306
  type: HostBinding,
1299
1307
  args: ['class']
@@ -1340,11 +1348,12 @@ class EuiAppHeaderComponent {
1340
1348
  set isShrinkHeaderActive(value) {
1341
1349
  this._isShrinkHeaderActive = coerceBooleanProperty(value);
1342
1350
  }
1343
- constructor(asService, zone, viewportRuler, scrollDispatcher) {
1351
+ constructor(asService, zone, viewportRuler, scrollDispatcher, document) {
1344
1352
  this.asService = asService;
1345
1353
  this.zone = zone;
1346
1354
  this.viewportRuler = viewportRuler;
1347
1355
  this.scrollDispatcher = scrollDispatcher;
1356
+ this.document = document;
1348
1357
  this.role = 'banner';
1349
1358
  this._isShrinkHeaderActive = false;
1350
1359
  this.isHeaderShrinked = false;
@@ -1361,7 +1370,7 @@ class EuiAppHeaderComponent {
1361
1370
  .subscribe(() => {
1362
1371
  // read the top scroll position of the viewport
1363
1372
  const topScrollPos = this.viewportRuler.getViewportScrollPosition().top;
1364
- CssUtils.setHeaderShrinkCssVar(topScrollPos > 0);
1373
+ CssUtils.setHeaderShrinkCssVar(topScrollPos > 0, this.document);
1365
1374
  // change the shrinkHeader value only if it's different from the current one
1366
1375
  if (topScrollPos > 0 !== this.isHeaderShrinked) {
1367
1376
  // we need to run this inside angular zone to trigger change detection in CSS
@@ -1382,13 +1391,16 @@ class EuiAppHeaderComponent {
1382
1391
  getCssClasses() {
1383
1392
  return ['eui-app-header', this.isHeaderShrinked ? 'eui-app-header--shrinked' : ''].join(' ');
1384
1393
  }
1385
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: EuiAppHeaderComponent, deps: [{ token: i1.EuiAppShellService }, { token: i0.NgZone }, { token: i2$4.ViewportRuler }, { token: i2$4.ScrollDispatcher }], target: i0.ɵɵFactoryTarget.Component }); }
1394
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: EuiAppHeaderComponent, deps: [{ token: i1.EuiAppShellService }, { token: i0.NgZone }, { token: i2$4.ViewportRuler }, { token: i2$4.ScrollDispatcher }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
1386
1395
  static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0", type: EuiAppHeaderComponent, selector: "eui-app-header", inputs: { isShrinkHeaderActive: "isShrinkHeaderActive" }, host: { properties: { "class": "this.cssClasses", "attr.role": "this.role" } }, ngImport: i0, template: "<eui-sidebar-toggle\n *ngIf=\"(asService.state$ | async).hasSidebar && (asService.state$ | async).hasHeader && !(asService.state$ | async).hasToolbar\"\n class=\"eui-app-header__sidebar-toggle\"\n iconSvgFillColor=\"primary\">\n</eui-sidebar-toggle>\n\n<ng-content select=\"eui-header\"></ng-content>\n", styles: [".eui-app-header{align-items:center;background-color:var(--eui-c-white);display:flex;flex-direction:row;height:var(--eui-app-header-height);position:fixed;right:0;top:var(--eui-app-top-message-height);width:100%;z-index:var(--eui-zi-header);transition:visibility .1s ease}.eui-app-header--shrinked{visibility:hidden}.eui-app-header__sidebar-toggle{padding-left:var(--eui-s-xs);padding-top:var(--eui-s-m)}@media screen and (max-width: 767px){.eui-app-header{visibility:hidden}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: EuiSidebarToggleComponent, selector: "eui-sidebar-toggle", inputs: ["e2eAttr", "iconSvgFillColor"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
1387
1396
  }
1388
1397
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: EuiAppHeaderComponent, decorators: [{
1389
1398
  type: Component,
1390
1399
  args: [{ selector: 'eui-app-header', changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, template: "<eui-sidebar-toggle\n *ngIf=\"(asService.state$ | async).hasSidebar && (asService.state$ | async).hasHeader && !(asService.state$ | async).hasToolbar\"\n class=\"eui-app-header__sidebar-toggle\"\n iconSvgFillColor=\"primary\">\n</eui-sidebar-toggle>\n\n<ng-content select=\"eui-header\"></ng-content>\n", styles: [".eui-app-header{align-items:center;background-color:var(--eui-c-white);display:flex;flex-direction:row;height:var(--eui-app-header-height);position:fixed;right:0;top:var(--eui-app-top-message-height);width:100%;z-index:var(--eui-zi-header);transition:visibility .1s ease}.eui-app-header--shrinked{visibility:hidden}.eui-app-header__sidebar-toggle{padding-left:var(--eui-s-xs);padding-top:var(--eui-s-m)}@media screen and (max-width: 767px){.eui-app-header{visibility:hidden}}\n"] }]
1391
- }], ctorParameters: () => [{ type: i1.EuiAppShellService }, { type: i0.NgZone }, { type: i2$4.ViewportRuler }, { type: i2$4.ScrollDispatcher }], propDecorators: { cssClasses: [{
1400
+ }], ctorParameters: () => [{ type: i1.EuiAppShellService }, { type: i0.NgZone }, { type: i2$4.ViewportRuler }, { type: i2$4.ScrollDispatcher }, { type: Document, decorators: [{
1401
+ type: Inject,
1402
+ args: [DOCUMENT]
1403
+ }] }], propDecorators: { cssClasses: [{
1392
1404
  type: HostBinding,
1393
1405
  args: ['class']
1394
1406
  }], role: [{
@@ -1501,12 +1513,13 @@ class EuiAppTopMessageComponent {
1501
1513
  get isVisible() {
1502
1514
  return this._isVisible;
1503
1515
  }
1504
- constructor(asService, elRef, cd, obs, baseStatesDirective) {
1516
+ constructor(asService, elRef, cd, obs, baseStatesDirective, document) {
1505
1517
  this.asService = asService;
1506
1518
  this.elRef = elRef;
1507
1519
  this.cd = cd;
1508
1520
  this.obs = obs;
1509
1521
  this.baseStatesDirective = baseStatesDirective;
1522
+ this.document = document;
1510
1523
  this.role = 'banner';
1511
1524
  this.isCloseable = false;
1512
1525
  this.hasCustomContent = false;
@@ -1525,12 +1538,12 @@ class EuiAppTopMessageComponent {
1525
1538
  ...this.asService.state,
1526
1539
  hasTopMessage: false,
1527
1540
  });
1528
- CssUtils.activateTopMessageCssVars(0);
1541
+ CssUtils.activateTopMessageCssVars(0, this.document);
1529
1542
  this.appTopMessageChanges.unsubscribe();
1530
1543
  }
1531
1544
  onCloseClick() {
1532
1545
  this.isVisible = false;
1533
- CssUtils.activateTopMessageCssVars(0);
1546
+ CssUtils.activateTopMessageCssVars(0, this.document);
1534
1547
  this.topMessageClose.emit();
1535
1548
  }
1536
1549
  _calculateHeight() {
@@ -1540,7 +1553,7 @@ class EuiAppTopMessageComponent {
1540
1553
  this.cd.reattach();
1541
1554
  this.cd.detectChanges();
1542
1555
  }
1543
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: EuiAppTopMessageComponent, deps: [{ token: i1.EuiAppShellService }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i2$5.ContentObserver }, { token: i3$1.BaseStatesDirective }], target: i0.ɵɵFactoryTarget.Component }); }
1556
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: EuiAppTopMessageComponent, deps: [{ token: i1.EuiAppShellService }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i2$5.ContentObserver }, { token: i3$1.BaseStatesDirective }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
1544
1557
  static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0", type: EuiAppTopMessageComponent, selector: "eui-app-top-message", inputs: { isCloseable: ["isCloseable", "isCloseable", booleanAttribute], hasCustomContent: ["hasCustomContent", "hasCustomContent", booleanAttribute], isVisible: "isVisible" }, outputs: { topMessageClose: "topMessageClose" }, host: { properties: { "class": "this.cssClasses", "attr.role": "this.role" } }, viewQueries: [{ propertyName: "appTopMessage", first: true, predicate: ["appTopMessage"], descendants: true }], hostDirectives: [{ directive: i3$1.BaseStatesDirective, inputs: ["euiPrimary", "euiPrimary", "euiInfo", "euiInfo", "euiWarning", "euiWarning", "euiSuccess", "euiSuccess", "euiDanger", "euiDanger", "euiAccent", "euiAccent", "euiVariant", "euiVariant"] }], ngImport: i0, template: "<div class=\"eui-app-top-message__wrapper\" #appTopMessage>\n <div class=\"eui-app-top-message__content\">\n <ng-content></ng-content>\n </div>\n <eui-icon-button *ngIf=\"isCloseable\"\n icon=\"close:outline\"\n (buttonClick)=\"onCloseClick()\"\n ariaLabel=\"Close top message\"\n fillColor=\"white\"\n euiRounded\n class=\"eui-app-top-message__close\"/>\n</div>\n", styles: [".eui-app-top-message{padding:var(--eui-s-xs) var(--eui-s-s);position:fixed;width:100%;right:0;top:0;z-index:var(--eui-zi-top-message);background-color:var(--eui-c-danger-dark);color:var(--eui-c-danger-contrast)}.eui-app-top-message__wrapper{display:flex;flex-direction:row;align-items:center;width:100%}.eui-app-top-message__content{display:flex;flex-direction:column;width:100%}.eui-app-top-message__close{margin-left:auto}.eui-app-top-message--primary{background-color:var(--eui-c-primary)}.eui-app-top-message--primary .eui-app-top-message__close .eui-icon-button__button:hover{background-color:var(--eui-c-primary-light)}.eui-app-top-message--info{background-color:var(--eui-c-info)}.eui-app-top-message--info .eui-app-top-message__close .eui-icon-button__button:hover{background-color:var(--eui-c-info-light)}.eui-app-top-message--success{background-color:var(--eui-c-success-dark)}.eui-app-top-message--success .eui-app-top-message__close .eui-icon-button__button:hover{background-color:var(--eui-c-success)}.eui-app-top-message--warning{background-color:var(--eui-c-warning)}.eui-app-top-message--warning .eui-app-top-message__close .eui-icon-button__button:hover{background-color:var(--eui-c-warning-light)}.eui-app-top-message--danger{background-color:var(--eui-c-danger-dark)}.eui-app-top-message--danger .eui-app-top-message__close .eui-icon-button__button:hover{background-color:var(--eui-c-danger)}.eui-app-top-message--hidden{display:none}.eui-app-top-message--custom{padding:0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4$1.EuiIconButtonComponent, selector: "eui-icon-button", inputs: ["icon", "fillColor", "size", "ariaLabel", "tabindex", "hasNoPadding", "hasFocusHoverColor", "hasFocusHoverBg", "euiRounded", "euiDisabled"], outputs: ["buttonClick"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
1545
1558
  }
1546
1559
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: EuiAppTopMessageComponent, decorators: [{
@@ -1559,7 +1572,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImpor
1559
1572
  ],
1560
1573
  },
1561
1574
  ], template: "<div class=\"eui-app-top-message__wrapper\" #appTopMessage>\n <div class=\"eui-app-top-message__content\">\n <ng-content></ng-content>\n </div>\n <eui-icon-button *ngIf=\"isCloseable\"\n icon=\"close:outline\"\n (buttonClick)=\"onCloseClick()\"\n ariaLabel=\"Close top message\"\n fillColor=\"white\"\n euiRounded\n class=\"eui-app-top-message__close\"/>\n</div>\n", styles: [".eui-app-top-message{padding:var(--eui-s-xs) var(--eui-s-s);position:fixed;width:100%;right:0;top:0;z-index:var(--eui-zi-top-message);background-color:var(--eui-c-danger-dark);color:var(--eui-c-danger-contrast)}.eui-app-top-message__wrapper{display:flex;flex-direction:row;align-items:center;width:100%}.eui-app-top-message__content{display:flex;flex-direction:column;width:100%}.eui-app-top-message__close{margin-left:auto}.eui-app-top-message--primary{background-color:var(--eui-c-primary)}.eui-app-top-message--primary .eui-app-top-message__close .eui-icon-button__button:hover{background-color:var(--eui-c-primary-light)}.eui-app-top-message--info{background-color:var(--eui-c-info)}.eui-app-top-message--info .eui-app-top-message__close .eui-icon-button__button:hover{background-color:var(--eui-c-info-light)}.eui-app-top-message--success{background-color:var(--eui-c-success-dark)}.eui-app-top-message--success .eui-app-top-message__close .eui-icon-button__button:hover{background-color:var(--eui-c-success)}.eui-app-top-message--warning{background-color:var(--eui-c-warning)}.eui-app-top-message--warning .eui-app-top-message__close .eui-icon-button__button:hover{background-color:var(--eui-c-warning-light)}.eui-app-top-message--danger{background-color:var(--eui-c-danger-dark)}.eui-app-top-message--danger .eui-app-top-message__close .eui-icon-button__button:hover{background-color:var(--eui-c-danger)}.eui-app-top-message--hidden{display:none}.eui-app-top-message--custom{padding:0}\n"] }]
1562
- }], ctorParameters: () => [{ type: i1.EuiAppShellService }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i2$5.ContentObserver }, { type: i3$1.BaseStatesDirective }], propDecorators: { cssClasses: [{
1575
+ }], ctorParameters: () => [{ type: i1.EuiAppShellService }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i2$5.ContentObserver }, { type: i3$1.BaseStatesDirective }, { type: Document, decorators: [{
1576
+ type: Inject,
1577
+ args: [DOCUMENT]
1578
+ }] }], propDecorators: { cssClasses: [{
1563
1579
  type: HostBinding,
1564
1580
  args: ['class']
1565
1581
  }], role: [{