@eui/components 19.2.3-snapshot-1747408180222 → 19.2.3-snapshot-1747669129286

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 (32) hide show
  1. package/docs/components/EuiAppComponent.html +1 -1
  2. package/docs/components/EuiDatepickerComponent.html +3 -173
  3. package/docs/dependencies.html +2 -2
  4. package/docs/js/menu-wc.js +24 -18
  5. package/docs/js/menu-wc_es5.js +1 -1
  6. package/docs/js/search/search_index.js +2 -2
  7. package/docs/modules/EuiTableModule.html +6 -0
  8. package/docs/modules/EuiTableV2Module.html +6 -0
  9. package/eui-breadcrumb/item/breadcrumb-item.component.d.ts.map +1 -1
  10. package/eui-date-range-selector/eui-date-range-selector.component.d.ts +1 -1
  11. package/eui-date-range-selector/eui-date-range-selector.component.d.ts.map +1 -1
  12. package/eui-date-range-selector/eui-time-range-picker/eui-time-range-picker.component.d.ts.map +1 -1
  13. package/eui-datepicker/eui-datepicker.component.d.ts +12 -25
  14. package/eui-datepicker/eui-datepicker.component.d.ts.map +1 -1
  15. package/eui-table/eui-table.module.d.ts +2 -1
  16. package/eui-table/eui-table.module.d.ts.map +1 -1
  17. package/eui-table-v2/eui-table-v2.module.d.ts +2 -1
  18. package/eui-table-v2/eui-table-v2.module.d.ts.map +1 -1
  19. package/fesm2022/eui-components-eui-breadcrumb.mjs +2 -2
  20. package/fesm2022/eui-components-eui-breadcrumb.mjs.map +1 -1
  21. package/fesm2022/eui-components-eui-date-range-selector.mjs +3 -3
  22. package/fesm2022/eui-components-eui-date-range-selector.mjs.map +1 -1
  23. package/fesm2022/eui-components-eui-datepicker.mjs +28 -47
  24. package/fesm2022/eui-components-eui-datepicker.mjs.map +1 -1
  25. package/fesm2022/eui-components-eui-table-v2.mjs +6 -2
  26. package/fesm2022/eui-components-eui-table-v2.mjs.map +1 -1
  27. package/fesm2022/eui-components-eui-table.mjs +6 -2
  28. package/fesm2022/eui-components-eui-table.mjs.map +1 -1
  29. package/fesm2022/eui-components-layout.mjs +8 -6
  30. package/fesm2022/eui-components-layout.mjs.map +1 -1
  31. package/layout/eui-app/eui-app-sidebar/sidebar-menu/sidebar-menu.component.d.ts.map +1 -1
  32. package/package.json +3 -3
@@ -484,10 +484,12 @@ class EuiAppSidebarMenuComponent {
484
484
  this.subs = new Subscription();
485
485
  }
486
486
  ngOnInit() {
487
- this.asService.setState({
488
- ...this.asService.state,
489
- sidebarLinks: this.items,
490
- });
487
+ if (this.items) {
488
+ this.asService.setState({
489
+ ...this.asService.state,
490
+ sidebarLinks: this.items,
491
+ });
492
+ }
491
493
  // subscribe to state changes
492
494
  this.subs.add(this.asService.getState('combinedLinks').subscribe((links) => (this.items = links)));
493
495
  }
@@ -1643,7 +1645,7 @@ class EuiAppComponent {
1643
1645
  this.destroy$.unsubscribe();
1644
1646
  }
1645
1647
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: EuiAppComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1646
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.9", type: EuiAppComponent, isStandalone: true, 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\" />\n\n<ng-content select=\"eui-app-sidebar\" />\n@if (!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\" />\n </eui-app-sidebar-body>\n </eui-app-sidebar>\n}\n@if (isViewLoaded) {\n<div class=\"eui-app-main\">\n <ng-content select=\"eui-app-top-message\"></ng-content>\n\n <ng-content select=\"eui-app-header\"></ng-content>\n\n @if (!appToolbar && (asService.state$ | async).hasHeader && (asService.breakpoints$ | async).isMobile) {\n <eui-app-toolbar>\n <eui-toolbar>\n <eui-toolbar-items>\n <eui-toolbar-item>\n <ng-content select=\"eui-user-profile\"/>\n </eui-toolbar-item>\n </eui-toolbar-items> \n </eui-toolbar>\n </eui-app-toolbar>\n } @else {\n <ng-content select=\"eui-app-toolbar\"></ng-content>\n }\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 @if (hasNoPageWrapper) {\n <router-outlet></router-outlet>\n }\n </div>\n\n <ng-content select=\"eui-app-footer\"></ng-content>\n</div>\n}\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 (growlClick)=\"euiGrowlService.growlCallback ? euiGrowlService.growlCallback(): null\" />\n\n<eui-block-document [isBlocked]=\"(asService.state$ | async).isBlockDocumentActive\" />\n", styles: [".eui-app{display:flex;overflow:hidden}.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-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}eui-app-page-wrapper{display:flex;width:100%}@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}}@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%}}\n"], dependencies: [{ kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { 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", "hasTooltipOnExpanded", "expandAllItems", "isCollapsed", "hasCollapsedInitials", "isFlat", "hasScrollToItem", "hasBoldRootLevel", "items"], outputs: ["sidebarItemClick", "sidebarItemToggle"] }, { kind: "component", type: EuiAppToolbarComponent, selector: "eui-app-toolbar", inputs: ["euiSecondary"] }, { kind: "component", type: EuiToolbarComponent, selector: "eui-toolbar", inputs: ["euiSecondary", "euiPrimary"] }, { kind: "component", type: EuiToolbarItemsComponent, selector: "eui-toolbar-items", inputs: ["euiEnd", "euiPositionRight"] }, { kind: "component", type: EuiToolbarItemComponent, selector: "eui-toolbar-item" }, { kind: "component", type: i8.EuiGrowlComponent, selector: "eui-growl", inputs: ["e2eAttr", "sticky", "life", "value", "closeAllSticky", "position"], outputs: ["growlClick"] }, { kind: "component", type: i9.EuiDimmerComponent, selector: "eui-dimmer", inputs: ["isDimmerActive", "e2eAttr"] }, { kind: "component", type: i10.EuiBlockDocumentComponent, selector: "eui-block-document", inputs: ["isBlocked", "ariaLabel"] }], encapsulation: i0.ViewEncapsulation.None }); }
1648
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.9", type: EuiAppComponent, isStandalone: true, 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\" />\n\n<ng-content select=\"eui-app-sidebar\" />\n@if (!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 [hasIcons]=\"true\" />\n </eui-app-sidebar-body>\n </eui-app-sidebar>\n}\n@if (isViewLoaded) {\n<div class=\"eui-app-main\">\n <ng-content select=\"eui-app-top-message\"></ng-content>\n\n <ng-content select=\"eui-app-header\"></ng-content>\n\n @if (!appToolbar && (asService.state$ | async).hasHeader && (asService.breakpoints$ | async).isMobile) {\n <eui-app-toolbar>\n <eui-toolbar>\n <eui-toolbar-items>\n <eui-toolbar-item>\n <ng-content select=\"eui-user-profile\"/>\n </eui-toolbar-item>\n </eui-toolbar-items> \n </eui-toolbar>\n </eui-app-toolbar>\n } @else {\n <ng-content select=\"eui-app-toolbar\"></ng-content>\n }\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 @if (hasNoPageWrapper) {\n <router-outlet></router-outlet>\n }\n </div>\n\n <ng-content select=\"eui-app-footer\"></ng-content>\n</div>\n}\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 (growlClick)=\"euiGrowlService.growlCallback ? euiGrowlService.growlCallback(): null\" />\n\n<eui-block-document [isBlocked]=\"(asService.state$ | async).isBlockDocumentActive\" />\n", styles: [".eui-app{display:flex;overflow:hidden}.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-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}eui-app-page-wrapper{display:flex;width:100%}@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}}@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%}}\n"], dependencies: [{ kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { 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", "hasTooltipOnExpanded", "expandAllItems", "isCollapsed", "hasCollapsedInitials", "isFlat", "hasScrollToItem", "hasBoldRootLevel", "items"], outputs: ["sidebarItemClick", "sidebarItemToggle"] }, { kind: "component", type: EuiAppToolbarComponent, selector: "eui-app-toolbar", inputs: ["euiSecondary"] }, { kind: "component", type: EuiToolbarComponent, selector: "eui-toolbar", inputs: ["euiSecondary", "euiPrimary"] }, { kind: "component", type: EuiToolbarItemsComponent, selector: "eui-toolbar-items", inputs: ["euiEnd", "euiPositionRight"] }, { kind: "component", type: EuiToolbarItemComponent, selector: "eui-toolbar-item" }, { kind: "component", type: i8.EuiGrowlComponent, selector: "eui-growl", inputs: ["e2eAttr", "sticky", "life", "value", "closeAllSticky", "position"], outputs: ["growlClick"] }, { kind: "component", type: i9.EuiDimmerComponent, selector: "eui-dimmer", inputs: ["isDimmerActive", "e2eAttr"] }, { kind: "component", type: i10.EuiBlockDocumentComponent, selector: "eui-block-document", inputs: ["isBlocked", "ariaLabel"] }], encapsulation: i0.ViewEncapsulation.None }); }
1647
1649
  }
1648
1650
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: EuiAppComponent, decorators: [{
1649
1651
  type: Component,
@@ -1657,7 +1659,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImpor
1657
1659
  ...EUI_GROWL,
1658
1660
  ...EUI_DIMMER,
1659
1661
  ...EUI_BLOCK_DOCUMENT,
1660
- ], template: "<eui-dimmer [isDimmerActive]=\"(asService.state$ | async).isDimmerActive\" />\n\n<ng-content select=\"eui-app-sidebar\" />\n@if (!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\" />\n </eui-app-sidebar-body>\n </eui-app-sidebar>\n}\n@if (isViewLoaded) {\n<div class=\"eui-app-main\">\n <ng-content select=\"eui-app-top-message\"></ng-content>\n\n <ng-content select=\"eui-app-header\"></ng-content>\n\n @if (!appToolbar && (asService.state$ | async).hasHeader && (asService.breakpoints$ | async).isMobile) {\n <eui-app-toolbar>\n <eui-toolbar>\n <eui-toolbar-items>\n <eui-toolbar-item>\n <ng-content select=\"eui-user-profile\"/>\n </eui-toolbar-item>\n </eui-toolbar-items> \n </eui-toolbar>\n </eui-app-toolbar>\n } @else {\n <ng-content select=\"eui-app-toolbar\"></ng-content>\n }\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 @if (hasNoPageWrapper) {\n <router-outlet></router-outlet>\n }\n </div>\n\n <ng-content select=\"eui-app-footer\"></ng-content>\n</div>\n}\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 (growlClick)=\"euiGrowlService.growlCallback ? euiGrowlService.growlCallback(): null\" />\n\n<eui-block-document [isBlocked]=\"(asService.state$ | async).isBlockDocumentActive\" />\n", styles: [".eui-app{display:flex;overflow:hidden}.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-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}eui-app-page-wrapper{display:flex;width:100%}@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}}@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%}}\n"] }]
1662
+ ], template: "<eui-dimmer [isDimmerActive]=\"(asService.state$ | async).isDimmerActive\" />\n\n<ng-content select=\"eui-app-sidebar\" />\n@if (!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 [hasIcons]=\"true\" />\n </eui-app-sidebar-body>\n </eui-app-sidebar>\n}\n@if (isViewLoaded) {\n<div class=\"eui-app-main\">\n <ng-content select=\"eui-app-top-message\"></ng-content>\n\n <ng-content select=\"eui-app-header\"></ng-content>\n\n @if (!appToolbar && (asService.state$ | async).hasHeader && (asService.breakpoints$ | async).isMobile) {\n <eui-app-toolbar>\n <eui-toolbar>\n <eui-toolbar-items>\n <eui-toolbar-item>\n <ng-content select=\"eui-user-profile\"/>\n </eui-toolbar-item>\n </eui-toolbar-items> \n </eui-toolbar>\n </eui-app-toolbar>\n } @else {\n <ng-content select=\"eui-app-toolbar\"></ng-content>\n }\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 @if (hasNoPageWrapper) {\n <router-outlet></router-outlet>\n }\n </div>\n\n <ng-content select=\"eui-app-footer\"></ng-content>\n</div>\n}\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 (growlClick)=\"euiGrowlService.growlCallback ? euiGrowlService.growlCallback(): null\" />\n\n<eui-block-document [isBlocked]=\"(asService.state$ | async).isBlockDocumentActive\" />\n", styles: [".eui-app{display:flex;overflow:hidden}.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-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}eui-app-page-wrapper{display:flex;width:100%}@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}}@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%}}\n"] }]
1661
1663
  }], propDecorators: { cssClasses: [{
1662
1664
  type: HostBinding,
1663
1665
  args: ['class']