/**
 * @license
 * Copyright Endlessjs. All Rights Reserved.
 * Licensed under the MIT License. See License.txt in the project root for license information.
 */
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
var __param = (this && this.__param) || function (paramIndex, decorator) {
    return function (target, key) { decorator(target, key, paramIndex); }
};
import { Component, ElementRef, HostBinding, HostListener, Input, Renderer2, ViewChild, ViewContainerRef, Inject, PLATFORM_ID, } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';
import { BehaviorSubject } from 'rxjs';
import { filter, takeWhile } from 'rxjs/operators';
import { convertToBoolProperty } from '../helpers';
import { ElThemeService } from '../../services/theme.service';
import { ElSpinnerService } from '../../services/spinner.service';
import { ElLayoutDirectionService } from '../../services/direction.service';
import { ElRestoreScrollTopHelper } from './restore-scroll-top.service';
import { ElLayoutScrollService } from '../../services/scroll.service';
import { ElLayoutRulerService } from '../../services/ruler.service';
import { EL_WINDOW, EL_DOCUMENT } from '../../theme.options';
import { ElOverlayContainerAdapter } from '../cdk/adapter/overlay-container-adapter';
/**
 * Layout container component.
 * When using with Endlessjs 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
 * <el-layout>
 *  <el-layout-header></el-layout-header>
 *  <el-layout-footer></el-layout-footer>
 *  <el-layout-column></el-layout-column>
 *  <el-sidebar></el-sidebar>
 * </el-layout>
 * ```
 * ### Installation
 *
 * Import `ElLayoutModule.forRoot()` to your app module.
 * ```ts
 * @NgModule({
 *   imports: [
 *     // ...
 *     ElLayoutModule.forRoot(),
 *   ],
 * })
 * export class AppModule { }
 * ```
 * and `ElLayoutModule` to your feature module where the component should be shown:
 * ```ts
 * @NgModule({
 *   imports: [
 *     // ...
 *     ElLayoutModule,
 *   ],
 * })
 * export class PageModule { }
 * ```
 * ### Usage
 * By default the layout fills up the whole view-port.
 * The window scrollbars are disabled on the body and moved inside of the el-layout, so that the scrollbars
 * won't mess with the fixed el-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 el-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
 * <el-layout center>
 *   <el-layout-header>Awesome Company</el-layout-header>
 *
 *   <el-layout-column>
 *     Hello World!
 *   </el-layout-column>
 *
 *   <el-layout-footer>Contact us</el-layout-footer>
 * </el-layout>
 * ```
 *
 * @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-max-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:
 */
let ElLayoutComponent = class ElLayoutComponent {
    constructor(themeService, spinnerService, elementRef, renderer, window, document, platformId, layoutDirectionService, scrollService, rulerService, scrollTop, overlayContainer) {
        this.themeService = themeService;
        this.spinnerService = spinnerService;
        this.elementRef = elementRef;
        this.renderer = renderer;
        this.window = window;
        this.document = document;
        this.platformId = platformId;
        this.layoutDirectionService = layoutDirectionService;
        this.scrollService = scrollService;
        this.rulerService = rulerService;
        this.scrollTop = scrollTop;
        this.overlayContainer = overlayContainer;
        this.scrollBlockClass = 'el-global-scrollblock';
        this.isScrollBlocked = false;
        this.centerValue = false;
        this.restoreScrollTopValue = true;
        this.windowModeValue = false;
        this.withScrollValue = false;
        this.withSubheader = false;
        this.afterViewInit$ = new BehaviorSubject(null);
        this.alive = true;
        this.registerAsOverlayContainer();
        this.themeService.onThemeChange()
            .pipe(takeWhile(() => this.alive))
            .subscribe((theme) => {
            const body = this.document.getElementsByTagName('body')[0];
            if (theme.previous) {
                this.renderer.removeClass(body, `el-theme-${theme.previous}`);
            }
            this.renderer.addClass(body, `el-theme-${theme.name}`);
        });
        this.themeService.onAppendLayoutClass()
            .pipe(takeWhile(() => this.alive))
            .subscribe((className) => {
            this.renderer.addClass(this.elementRef.nativeElement, className);
        });
        this.themeService.onRemoveLayoutClass()
            .pipe(takeWhile(() => this.alive))
            .subscribe((className) => {
            this.renderer.removeClass(this.elementRef.nativeElement, className);
        });
        this.spinnerService.registerLoader(new Promise((resolve, reject) => {
            this.afterViewInit$
                .pipe(takeWhile(() => this.alive))
                .subscribe((_) => resolve());
        }));
        this.spinnerService.load();
        this.rulerService.onGetDimensions()
            .pipe(takeWhile(() => this.alive))
            .subscribe(({ listener }) => {
            listener.next(this.getDimensions());
            listener.complete();
        });
        this.scrollService.onGetPosition()
            .pipe(takeWhile(() => this.alive))
            .subscribe(({ listener }) => {
            listener.next(this.getScrollPosition());
            listener.complete();
        });
        this.scrollTop
            .shouldRestore()
            .pipe(filter(() => this.restoreScrollTopValue), takeWhile(() => this.alive))
            .subscribe(() => {
            this.scroll(0, 0);
        });
        this.scrollService
            .onScrollableChange()
            .pipe(filter(() => this.withScrollValue))
            .subscribe((scrollable) => {
            /**
             * In case when Endlessjs Layout custom scroll `withScroll` mode is enabled
             * we need to disable default CDK scroll blocker (@link ElBlockScrollStrategyAdapter) on HTML element
             * so that it won't add additional positioning.
             */
            if (scrollable) {
                this.enableScroll();
            }
            else {
                this.blockScroll();
            }
        });
        if (isPlatformBrowser(this.platformId)) {
            // trigger first time so that after the change we have the initial value
            this.themeService.changeWindowWidth(this.window.innerWidth);
        }
    }
    /**
     * Defines whether the layout columns will be centered after some width
     * @param {boolean} val
     */
    set center(val) {
        this.centerValue = convertToBoolProperty(val);
    }
    /**
     * 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) {
        this.windowModeValue = convertToBoolProperty(val);
        this.withScroll = this.windowModeValue;
    }
    /**
     * 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) {
        this.withScrollValue = convertToBoolProperty(val);
        // TODO: is this the best way of doing it? as we don't have access to body from theme styles
        // TODO: add e2e test
        const body = this.document.getElementsByTagName('body')[0];
        if (this.withScrollValue) {
            this.renderer.setStyle(body, 'overflow', 'hidden');
        }
        else {
            this.renderer.setStyle(body, 'overflow', 'initial');
        }
    }
    /**
     * Restores scroll to the top of the page after navigation
     * @param {boolean} val
     */
    set restoreScrollTop(val) {
        this.restoreScrollTopValue = convertToBoolProperty(val);
    }
    ngAfterViewInit() {
        this.layoutDirectionService.onDirectionChange()
            .pipe(takeWhile(() => this.alive))
            .subscribe(direction => this.document.dir = direction);
        this.scrollService.onManualScroll()
            .pipe(takeWhile(() => this.alive))
            .subscribe(({ x, y }) => this.scroll(x, y));
        this.afterViewInit$.next(true);
    }
    ngOnDestroy() {
        this.alive = false;
        this.unregisterAsOverlayContainer();
    }
    onScroll($event) {
        this.scrollService.fireScrollChange($event);
    }
    onResize(event) {
        this.themeService.changeWindowWidth(event.target.innerWidth);
    }
    /**
     * 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 {ElLayoutDimensions}
     */
    getDimensions() {
        let clientWidth, clientHeight, scrollWidth, scrollHeight = 0;
        if (this.withScrollValue) {
            const container = this.scrollableContainerRef.nativeElement;
            clientWidth = container.clientWidth;
            clientHeight = container.clientHeight;
            scrollWidth = container.scrollWidth;
            scrollHeight = container.scrollHeight;
        }
        else {
            const { documentElement, body } = this.document;
            clientWidth = documentElement.clientWidth || body.clientWidth;
            clientHeight = documentElement.clientHeight || body.clientHeight;
            scrollWidth = documentElement.scrollWidth || body.scrollWidth;
            scrollHeight = documentElement.scrollHeight || body.scrollHeight;
        }
        return {
            clientWidth,
            clientHeight,
            scrollWidth,
            scrollHeight,
        };
    }
    /**
     * 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 {ElScrollPosition}
     */
    getScrollPosition() {
        if (!isPlatformBrowser(this.platformId)) {
            return { x: 0, y: 0 };
        }
        if (this.withScrollValue) {
            const container = this.scrollableContainerRef.nativeElement;
            return { x: container.scrollLeft, y: container.scrollTop };
        }
        const documentRect = this.document.documentElement.getBoundingClientRect();
        const x = -documentRect.left || this.document.body.scrollLeft || this.window.scrollX ||
            this.document.documentElement.scrollLeft || 0;
        const y = -documentRect.top || this.document.body.scrollTop || this.window.scrollY ||
            this.document.documentElement.scrollTop || 0;
        return { x, y };
    }
    registerAsOverlayContainer() {
        if (this.overlayContainer.setContainer) {
            this.overlayContainer.setContainer(this.elementRef.nativeElement);
        }
    }
    unregisterAsOverlayContainer() {
        if (this.overlayContainer.clearContainer) {
            this.overlayContainer.clearContainer();
        }
    }
    scroll(x = null, y = null) {
        const { x: currentX, y: currentY } = this.getScrollPosition();
        x = x == null ? currentX : x;
        y = y == null ? currentY : y;
        if (!isPlatformBrowser(this.platformId)) {
            return;
        }
        if (this.withScrollValue) {
            const scrollable = this.scrollableContainerRef.nativeElement;
            if (scrollable.scrollTo) {
                scrollable.scrollTo(x, y);
            }
            else {
                scrollable.scrollLeft = x;
                scrollable.scrollTop = y;
            }
        }
        else {
            this.window.scrollTo(x, y);
        }
    }
    // TODO: Extract into block scroll strategy
    blockScroll() {
        if (this.isScrollBlocked) {
            return;
        }
        this.isScrollBlocked = true;
        this.renderer.addClass(this.document.documentElement, this.scrollBlockClass);
        const scrollableContainerElement = this.scrollableContainerRef.nativeElement;
        const layoutElement = this.layoutContainerRef.nativeElement;
        const layoutWithScrollWidth = layoutElement.clientWidth;
        this.scrollableContainerOverflowOldValue = scrollableContainerElement.style.overflow;
        scrollableContainerElement.style.overflow = 'hidden';
        const layoutWithoutScrollWidth = layoutElement.clientWidth;
        const scrollWidth = layoutWithoutScrollWidth - layoutWithScrollWidth;
        if (!scrollWidth) {
            return;
        }
        this.layoutPaddingOldValue = {
            left: layoutElement.style.paddingLeft,
            right: layoutElement.style.paddingRight,
        };
        if (this.layoutDirectionService.isLtr()) {
            layoutElement.style.paddingRight = `${scrollWidth}px`;
        }
        else {
            layoutElement.style.paddingLeft = `${scrollWidth}px`;
        }
    }
    enableScroll() {
        if (this.isScrollBlocked) {
            this.isScrollBlocked = false;
            this.renderer.removeClass(this.document.documentElement, this.scrollBlockClass);
            this.scrollableContainerRef.nativeElement.style.overflow = this.scrollableContainerOverflowOldValue;
            if (this.layoutPaddingOldValue) {
                const layoutElement = this.layoutContainerRef.nativeElement;
                layoutElement.style.paddingLeft = this.layoutPaddingOldValue.left;
                layoutElement.style.paddingRight = this.layoutPaddingOldValue.right;
                this.layoutPaddingOldValue = null;
            }
        }
    }
};
__decorate([
    HostBinding('class.window-mode'),
    __metadata("design:type", Boolean)
], ElLayoutComponent.prototype, "windowModeValue", void 0);
__decorate([
    HostBinding('class.with-scroll'),
    __metadata("design:type", Boolean)
], ElLayoutComponent.prototype, "withScrollValue", void 0);
__decorate([
    HostBinding('class.with-subheader'),
    __metadata("design:type", Boolean)
], ElLayoutComponent.prototype, "withSubheader", void 0);
__decorate([
    Input(),
    __metadata("design:type", Boolean),
    __metadata("design:paramtypes", [Boolean])
], ElLayoutComponent.prototype, "center", null);
__decorate([
    Input(),
    __metadata("design:type", Boolean),
    __metadata("design:paramtypes", [Boolean])
], ElLayoutComponent.prototype, "windowMode", null);
__decorate([
    Input(),
    __metadata("design:type", Boolean),
    __metadata("design:paramtypes", [Boolean])
], ElLayoutComponent.prototype, "withScroll", null);
__decorate([
    Input(),
    __metadata("design:type", Boolean),
    __metadata("design:paramtypes", [Boolean])
], ElLayoutComponent.prototype, "restoreScrollTop", null);
__decorate([
    ViewChild('layoutTopDynamicArea', { read: ViewContainerRef, static: false }),
    __metadata("design:type", ViewContainerRef)
], ElLayoutComponent.prototype, "veryTopRef", void 0);
__decorate([
    ViewChild('scrollableContainer', { read: ElementRef, static: false }),
    __metadata("design:type", ElementRef)
], ElLayoutComponent.prototype, "scrollableContainerRef", void 0);
__decorate([
    ViewChild('layoutContainer', { read: ElementRef, static: false }),
    __metadata("design:type", ElementRef)
], ElLayoutComponent.prototype, "layoutContainerRef", void 0);
__decorate([
    HostListener('window:scroll', ['$event']),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [Object]),
    __metadata("design:returntype", void 0)
], ElLayoutComponent.prototype, "onScroll", null);
__decorate([
    HostListener('window:resize', ['$event']),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [Object]),
    __metadata("design:returntype", void 0)
], ElLayoutComponent.prototype, "onResize", null);
ElLayoutComponent = __decorate([
    Component({
        selector: 'el-layout',
        template: `
    <div class="scrollable-container" #scrollableContainer (scroll)="onScroll($event)">
      <div class="layout" #layoutContainer>
        <ng-content select="el-layout-header:not([subheader])"></ng-content>
        <div class="layout-container">
          <ng-content select="el-sidebar"></ng-content>
          <div class="content" [class.center]="centerValue">
            <ng-content select="el-layout-header[subheader]"></ng-content>
            <div class="columns">
              <ng-content select="el-layout-column"></ng-content>
            </div>
            <ng-content select="el-layout-footer"></ng-content>
          </div>
        </div>
      </div>
    </div>
  `,
        styles: [":host{-webkit-font-smoothing:antialiased}[dir=ltr] :host{text-align:left}[dir=rtl] :host{text-align:right}:host .layout{display:flex;flex-direction:column}:host ::ng-deep el-layout-header{display:block}:host ::ng-deep el-layout-header nav{align-items:center;justify-content:flex-start;display:flex}:host ::ng-deep el-layout-header.fixed{position:fixed;top:0;left:0;right:0;z-index:1040}:host .layout-container{display:flex;flex:1;-ms-flex:1 1 auto;flex-direction:row}[dir=ltr] :host .layout-container ::ng-deep el-sidebar.left{order:0}[dir=rtl] :host .layout-container ::ng-deep el-sidebar.left{order:2}[dir=ltr] :host .layout-container ::ng-deep el-sidebar.right{order:2}[dir=rtl] :host .layout-container ::ng-deep el-sidebar.right{order:0}:host .layout-container ::ng-deep el-sidebar.end{order:2}:host .layout-container ::ng-deep el-sidebar .fixed{position:fixed;width:100%;overflow-y:auto;height:100%}:host .layout-container .content{display:flex;flex:1;-ms-flex:1 1 auto;flex-direction:column;min-width:0}:host .layout-container .content.center{max-width:100%;position:relative;margin-left:auto;margin-right:auto}:host .layout-container .content .columns{display:flex;flex:1;-ms-flex:1 1 auto;flex-direction:row;width:100%}:host .layout-container .content .columns ::ng-deep el-layout-column{order:1;flex:1 0;min-width:0}[dir=ltr] :host .layout-container .content .columns ::ng-deep el-layout-column.left{order:0}[dir=rtl] :host .layout-container .content .columns ::ng-deep el-layout-column.left{order:2}:host .layout-container .content .columns ::ng-deep el-layout-column.start{order:0}:host .layout-container .content ::ng-deep el-layout-footer{display:block;margin-top:auto}:host .layout-container .content ::ng-deep el-layout-footer nav{justify-content:center;display:flex}\n"]
    }),
    __param(4, Inject(EL_WINDOW)),
    __param(5, Inject(EL_DOCUMENT)),
    __param(6, Inject(PLATFORM_ID)),
    __metadata("design:paramtypes", [ElThemeService,
        ElSpinnerService,
        ElementRef,
        Renderer2, Object, Object, Object,
        ElLayoutDirectionService,
        ElLayoutScrollService,
        ElLayoutRulerService,
        ElRestoreScrollTopHelper,
        ElOverlayContainerAdapter])
], ElLayoutComponent);
export { ElLayoutComponent };
/**
 * 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)
 */
let ElLayoutColumnComponent = class ElLayoutColumnComponent {
    /**
     * Move the column to the very left position in the layout.
     * @param {boolean} val
     */
    set left(val) {
        this.leftValue = convertToBoolProperty(val);
        this.startValue = false;
    }
    /**
     * Make column first in the layout.
     * @param {boolean} val
     */
    set start(val) {
        this.startValue = convertToBoolProperty(val);
        this.leftValue = false;
    }
};
__decorate([
    HostBinding('class.left'),
    __metadata("design:type", Boolean)
], ElLayoutColumnComponent.prototype, "leftValue", void 0);
__decorate([
    HostBinding('class.start'),
    __metadata("design:type", Boolean)
], ElLayoutColumnComponent.prototype, "startValue", void 0);
__decorate([
    Input(),
    __metadata("design:type", Boolean),
    __metadata("design:paramtypes", [Boolean])
], ElLayoutColumnComponent.prototype, "left", null);
__decorate([
    Input(),
    __metadata("design:type", Boolean),
    __metadata("design:paramtypes", [Boolean])
], ElLayoutColumnComponent.prototype, "start", null);
ElLayoutColumnComponent = __decorate([
    Component({
        selector: 'el-layout-column',
        template: `
    <ng-content></ng-content>
  `
    })
], ElLayoutColumnComponent);
export { ElLayoutColumnComponent };
/**
 * 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 el-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
 * <el-layout-header subheader></el-layout-header>
 * ```
 * @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:
 */
let ElLayoutHeaderComponent = class ElLayoutHeaderComponent {
    constructor(layout) {
        this.layout = layout;
    }
    /**
     * Makes the header sticky to the top of the el-layout.
     * @param {boolean} val
     */
    set fixed(val) {
        this.fixedValue = convertToBoolProperty(val);
    }
    /**
     * 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) {
        this.subheaderValue = convertToBoolProperty(val);
        this.fixedValue = false;
        this.layout.withSubheader = this.subheaderValue;
    }
};
__decorate([
    HostBinding('class.fixed'),
    __metadata("design:type", Boolean)
], ElLayoutHeaderComponent.prototype, "fixedValue", void 0);
__decorate([
    HostBinding('class.subheader'),
    __metadata("design:type", Boolean)
], ElLayoutHeaderComponent.prototype, "subheaderValue", void 0);
__decorate([
    Input(),
    __metadata("design:type", Boolean),
    __metadata("design:paramtypes", [Boolean])
], ElLayoutHeaderComponent.prototype, "fixed", null);
__decorate([
    Input(),
    __metadata("design:type", Boolean),
    __metadata("design:paramtypes", [Boolean])
], ElLayoutHeaderComponent.prototype, "subheader", null);
ElLayoutHeaderComponent = __decorate([
    Component({
        selector: 'el-layout-header',
        template: `
    <nav [class.fixed]="fixedValue">
      <ng-content></ng-content>
    </nav>
  `
    }),
    __metadata("design:paramtypes", [ElLayoutComponent])
], ElLayoutHeaderComponent);
export { ElLayoutHeaderComponent };
/**
 * Page footer.
 * Located under the el-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:
 */
let ElLayoutFooterComponent = class ElLayoutFooterComponent {
    /**
     * Makes the footer sticky to the bottom of the window.
     * @param {boolean} val
     */
    set fixed(val) {
        this.fixedValue = convertToBoolProperty(val);
    }
};
__decorate([
    HostBinding('class.fixed'),
    __metadata("design:type", Boolean)
], ElLayoutFooterComponent.prototype, "fixedValue", void 0);
__decorate([
    Input(),
    __metadata("design:type", Boolean),
    __metadata("design:paramtypes", [Boolean])
], ElLayoutFooterComponent.prototype, "fixed", null);
ElLayoutFooterComponent = __decorate([
    Component({
        selector: 'el-layout-footer',
        template: `
    <nav [class.fixed]="fixedValue">
      <ng-content></ng-content>
    </nav>
  `
    })
], ElLayoutFooterComponent);
export { ElLayoutFooterComponent };
//# sourceMappingURL=layout.component.js.map