/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
import { AfterViewInit, ElementRef, OnDestroy, Renderer2, ViewContainerRef } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import { NbBooleanInput } from '../helpers';
import { NbThemeService } from '../../services/theme.service';
import { NbSpinnerService } from '../../services/spinner.service';
import { NbLayoutDirectionService } from '../../services/direction.service';
import { NbRestoreScrollTopHelper } from './restore-scroll-top.service';
import { NbScrollPosition, NbLayoutScrollService } from '../../services/scroll.service';
import { NbLayoutDimensions, NbLayoutRulerService } from '../../services/ruler.service';
import { NbOverlayContainerAdapter } from '../cdk/adapter/overlay-container-adapter';
import * as i0 from "@angular/core";
/**
* Layout container component.
* When using with Nebular Theme System it is required that all child components should be placed inside.
*
* Basic example of two column layout with header:
*
* @stacked-example(Showcase, layout/layout-showcase.component)
*
* Can contain the following components inside:
*
* ```html
*
*
*
*
*
*
* ```
* ### Installation
*
* Import `NbLayoutModule` to your app module.
* ```ts
* @NgModule({
* imports: [
* // ...
* NbLayoutModule,
* ],
* })
* export class AppModule { }
* ```
* ### Usage
* By default the layout fills up the whole view-port.
* The window scrollbars are disabled on the body and moved inside of the nb-layout, so that the scrollbars
* won't mess with the fixed nb-header.
*
* The child components are projected into a flexible layout structure allowing to adjust the layout behavior
* based on the settings provided.
*
* The layout content (columns) becomes centered when the window width is more than
* the value specified in the theme variable `layout-content-width`.
*
* The layout also contains the area on the very top (the first child of the nb-layout), which could be used
* to dynamically append some components like modals or spinners/loaders
* so that they are located on top of the elements hierarchy.
* More details are under the `ThemeService` section.
*
* The layout component is also responsible for changing application themes.
* It listens to the `themeChange` event and change a theme CSS class appended to body.
* Based on the class appended, specific CSS-theme is applied to the application.
* More details of the Theme System could be found here [Enabling Theme System](#/docs/concepts/theme-system)
*
* A simple layout with footer:
*
* @stacked-example(Layout With Footer, layout/layout-w-footer.component)
*
* It is possible to ask the layout to center the columns (notice: we added a `center` attribute
* to the layout:
*
* ```html
*
* Awesome Company
*
*
* Hello World!
*
*
* Contact us
*
* ```
*
* @styles
*
* layout-background-color:
* layout-text-color:
* layout-text-font-family:
* layout-text-font-size:
* layout-text-font-weight:
* layout-text-line-height:
* layout-min-height:
* layout-content-width:
* layout-window-mode-min-width:
* layout-window-mode-background-color:
* layout-window-mode-padding-top:
* layout-window-shadow:
* layout-padding:
* layout-medium-padding:
* layout-small-padding:
* layout-scrollbar-background-color:
* layout-scrollbar-color:
* layout-scrollbar-width:
*/
export declare class NbLayoutComponent implements AfterViewInit, OnDestroy {
protected themeService: NbThemeService;
protected spinnerService: NbSpinnerService;
protected elementRef: ElementRef;
protected renderer: Renderer2;
protected window: any;
protected document: any;
protected platformId: Object;
protected layoutDirectionService: NbLayoutDirectionService;
protected scrollService: NbLayoutScrollService;
protected rulerService: NbLayoutRulerService;
protected scrollTop: NbRestoreScrollTopHelper;
protected overlayContainer: NbOverlayContainerAdapter;
protected scrollBlockClass: string;
protected isScrollBlocked: boolean;
protected scrollableContainerOverflowOldValue: string;
protected layoutPaddingOldValue: {
left: string;
right: string;
};
centerValue: boolean;
restoreScrollTopValue: boolean;
windowModeValue: boolean;
withScrollValue: boolean;
withSubheader: boolean;
/**
* Defines whether the layout columns will be centered after some width
* @param {boolean} val
*/
set center(val: boolean);
static ngAcceptInputType_center: NbBooleanInput;
/**
* Defines whether the layout enters a 'window' mode, when the layout content (including sidebars and fixed header)
* becomes centered by width with a margin from the top of the screen, like a floating window.
* Automatically enables `withScroll` mode, as in the window mode scroll must be inside the layout and cannot be on
* window. (TODO: check this)
* @param {boolean} val
*/
set windowMode(val: boolean);
static ngAcceptInputType_windowMode: NbBooleanInput;
/**
* Defines whether to move the scrollbars to layout or leave it at the body level.
* Automatically set to true when `windowMode` is enabled.
* @param {boolean} val
*/
set withScroll(val: boolean);
static ngAcceptInputType_withScroll: NbBooleanInput;
/**
* Restores scroll to the top of the page after navigation
* @param {boolean} val
*/
set restoreScrollTop(val: boolean);
static ngAcceptInputType_restoreScrollTop: NbBooleanInput;
veryTopRef: ViewContainerRef;
scrollableContainerRef: ElementRef;
layoutContainerRef: ElementRef;
protected afterViewInit$: BehaviorSubject;
private destroy$;
constructor(themeService: NbThemeService, spinnerService: NbSpinnerService, elementRef: ElementRef, renderer: Renderer2, window: any, document: any, platformId: Object, layoutDirectionService: NbLayoutDirectionService, scrollService: NbLayoutScrollService, rulerService: NbLayoutRulerService, scrollTop: NbRestoreScrollTopHelper, overlayContainer: NbOverlayContainerAdapter);
ngAfterViewInit(): void;
ngOnDestroy(): void;
onScroll($event: any): void;
onResize(event: any): void;
/**
* Returns scroll and client height/width
*
* Depending on the current scroll mode (`withScroll=true`) returns sizes from the body element
* or from the `.scrollable-container`
* @returns {NbLayoutDimensions}
*/
getDimensions(): NbLayoutDimensions;
/**
* Returns scroll position of current scroll container.
*
* If `withScroll` = true, returns scroll position of the `.scrollable-container` element,
* otherwise - of the scrollable element of the window (which may be different depending of a browser)
*
* @returns {NbScrollPosition}
*/
getScrollPosition(): NbScrollPosition;
protected registerAsOverlayContainer(): void;
protected unregisterAsOverlayContainer(): void;
private scroll;
protected blockScroll(): void;
private enableScroll;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵcmp: i0.ɵɵComponentDeclaration;
}
/**
* A container component which determines a content position inside of the layout.
* The layout could contain unlimited columns (not including the sidebars).
*
* By default the columns are ordered from the left to the right,
* but it's also possible to overwrite this behavior by setting a `left` attribute to the column,
* moving it to the very first position:
*
* @stacked-example(Column Left, layout/layout-column-left.component)
*/
export declare class NbLayoutColumnComponent {
leftValue: boolean;
startValue: boolean;
/**
* Move the column to the very left position in the layout.
* @param {boolean} val
*/
set left(val: boolean);
static ngAcceptInputType_left: NbBooleanInput;
/**
* Make column first in the layout.
* @param {boolean} val
*/
set start(val: boolean);
static ngAcceptInputType_start: NbBooleanInput;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵcmp: i0.ɵɵComponentDeclaration;
}
/**
* Page header component.
* Located on top of the page above the layout columns and sidebars.
* Could be made `fixed` by setting the corresponding property. In the fixed mode the header becomes
* sticky to the top of the nb-layout (to of the page). Here's an example:
*
* @stacked-example(Fixed Header, layout/layout-fixed-header.component)
*
* In a pair with sidebar it is possible to setup a configuration when header is placed on a side of the sidebar
* and not on top of it. To achieve this simply put a `subheader` property to the header like this:
* ```html
*
* ```
* @stacked-example(Subheader, layout/layout-sidebar-subheader.component)
* Note that in such configuration sidebar shadow is removed and header cannot be make `fixed`.
*
* Same way you can put both `fixed` and `clipped` headers adding creating a sub-header for your app:
*
* @stacked-example(Subheader, layout/layout-subheader.component)
*
* @styles
*
* header-background-color:
* header-text-color:
* header-text-font-family:
* header-text-font-size:
* header-text-font-weight:
* header-text-line-height:
* header-height:
* header-padding:
* header-shadow:
*/
export declare class NbLayoutHeaderComponent {
private layout;
fixedValue: boolean;
subheaderValue: boolean;
constructor(layout: NbLayoutComponent);
/**
* Makes the header sticky to the top of the nb-layout.
* @param {boolean} val
*/
set fixed(val: boolean);
static ngAcceptInputType_fixed: NbBooleanInput;
/**
* Places header on a side of the sidebar, and not above.
* Disables fixed mode for this header and remove a shadow from the sidebar.
* @param {boolean} val
*/
set subheader(val: boolean);
static ngAcceptInputType_subheader: NbBooleanInput;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵcmp: i0.ɵɵComponentDeclaration;
}
/**
* Page footer.
* Located under the nb-layout content (specifically, under the columns).
* Could be made `fixed`, becoming sticky to the bottom of the view port (window).
*
* @styles
*
* footer-background-color:
* footer-text-color:
* footer-text-font-family:
* footer-text-font-size:
* footer-text-font-weight:
* footer-text-line-height:
* footer-text-highlight-color:
* footer-height:
* footer-padding:
* footer-divider-color:
* footer-divider-style:
* footer-divider-width:
* footer-shadow:
*/
export declare class NbLayoutFooterComponent {
fixedValue: boolean;
/**
* Makes the footer sticky to the bottom of the window.
* @param {boolean} val
*/
set fixed(val: boolean);
static ngAcceptInputType_fixed: NbBooleanInput;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵcmp: i0.ɵɵComponentDeclaration;
}