@akveo/nga-theme
Version:
@akveo/nga-theme
225 lines • 11.1 kB
JavaScript
/**
* @license
* Copyright Akveo. 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);
};
import { Component, ComponentFactoryResolver, ElementRef, HostBinding, HostListener, Input, Renderer2, ViewChild, ViewContainerRef, } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import 'rxjs/add/operator/toPromise';
import 'rxjs/add/operator/filter';
import { convertToBoolProperty } from '../helpers';
import { NgaThemeService } from '../../services/theme.service';
import { NgaSpinnerService } from '../../services/spinner.service';
/**
* Component intended to be used within the `<nga-layout>` component.
* It adds styles for a preset column section.
*/
var NgaLayoutColumnComponent = (function () {
function NgaLayoutColumnComponent() {
}
Object.defineProperty(NgaLayoutColumnComponent.prototype, "left", {
set: function (val) {
this.leftValue = convertToBoolProperty(val);
},
enumerable: true,
configurable: true
});
return NgaLayoutColumnComponent;
}());
__decorate([
HostBinding('class.left'),
__metadata("design:type", Boolean)
], NgaLayoutColumnComponent.prototype, "leftValue", void 0);
__decorate([
Input(),
__metadata("design:type", Boolean),
__metadata("design:paramtypes", [Boolean])
], NgaLayoutColumnComponent.prototype, "left", null);
NgaLayoutColumnComponent = __decorate([
Component({
selector: 'nga-layout-column',
template: "\n <ng-content></ng-content>\n ",
})
], NgaLayoutColumnComponent);
export { NgaLayoutColumnComponent };
/**
* Component intended to be used within the `<nga-layout>` component.
* It adds styles for a preset header section.
*/
var NgaLayoutHeaderComponent = (function () {
function NgaLayoutHeaderComponent() {
}
Object.defineProperty(NgaLayoutHeaderComponent.prototype, "fixed", {
set: function (val) {
this.fixedValue = convertToBoolProperty(val);
},
enumerable: true,
configurable: true
});
return NgaLayoutHeaderComponent;
}());
__decorate([
HostBinding('class.fixed'),
__metadata("design:type", Boolean)
], NgaLayoutHeaderComponent.prototype, "fixedValue", void 0);
__decorate([
Input(),
__metadata("design:type", Boolean),
__metadata("design:paramtypes", [Boolean])
], NgaLayoutHeaderComponent.prototype, "fixed", null);
NgaLayoutHeaderComponent = __decorate([
Component({
selector: 'nga-layout-header',
template: "\n <nav [class.fixed]=\"fixedValue\">\n <ng-content></ng-content>\n </nav>\n ",
})
], NgaLayoutHeaderComponent);
export { NgaLayoutHeaderComponent };
/**
* Component intended to be used within the `<nga-layout>` component.
* It adds styles for a preset footer section.
*/
var NgaLayoutFooterComponent = (function () {
function NgaLayoutFooterComponent() {
}
Object.defineProperty(NgaLayoutFooterComponent.prototype, "fixed", {
set: function (val) {
this.fixedValue = convertToBoolProperty(val);
},
enumerable: true,
configurable: true
});
return NgaLayoutFooterComponent;
}());
__decorate([
HostBinding('class.fixed'),
__metadata("design:type", Boolean)
], NgaLayoutFooterComponent.prototype, "fixedValue", void 0);
__decorate([
Input(),
__metadata("design:type", Boolean),
__metadata("design:paramtypes", [Boolean])
], NgaLayoutFooterComponent.prototype, "fixed", null);
NgaLayoutFooterComponent = __decorate([
Component({
selector: 'nga-layout-footer',
template: "\n <nav [class.fixed]=\"fixedValue\">\n <ng-content></ng-content>\n </nav>\n ",
})
], NgaLayoutFooterComponent);
export { NgaLayoutFooterComponent };
/**
* A basic content container component
*
* While this component can be used alone, it also provides a number
* of child components for common layout sections, including:
* - nga-sidebar
* - nga-layout-column
* - nga-layout-content
* - nga-layout-header
* - nga-layout-footer
*/
var NgaLayoutComponent = (function () {
function NgaLayoutComponent(themeService, spinnerService, componentFactoryResolver, elementRef, renderer) {
var _this = this;
this.themeService = themeService;
this.spinnerService = spinnerService;
this.componentFactoryResolver = componentFactoryResolver;
this.elementRef = elementRef;
this.renderer = renderer;
// TODO: can we remove this?
this.centerValue = false;
this.afterViewInit$ = new BehaviorSubject(null);
this.themeSubscription = this.themeService.onThemeChange().subscribe(function (theme) {
if (theme.previous) {
_this.renderer.removeClass(_this.elementRef.nativeElement, "nga-theme-" + theme.previous);
}
_this.renderer.addClass(_this.elementRef.nativeElement, "nga-theme-" + theme.name);
});
this.appendClassSubscription = this.themeService.onAppendLayoutClass().subscribe(function (className) {
_this.renderer.addClass(_this.elementRef.nativeElement, className);
});
this.removeClassSubscription = this.themeService.onRemoveLayoutClass().subscribe(function (className) {
_this.renderer.removeClass(_this.elementRef.nativeElement, className);
});
this.spinnerService.registerLoader(new Promise(function (resolve, reject) {
_this.afterViewInit$.subscribe(function (_) { return resolve(); });
}));
this.spinnerService.load();
// trigger first time so that after the change we have the initial value
this.themeService.changeWindowWidth(window.innerWidth);
}
Object.defineProperty(NgaLayoutComponent.prototype, "center", {
set: function (val) {
this.centerValue = convertToBoolProperty(val);
},
enumerable: true,
configurable: true
});
NgaLayoutComponent.prototype.ngAfterViewInit = function () {
var _this = this;
this.appendSubscription = this.themeService.onAppendToTop()
.subscribe(function (data) {
var componentFactory = _this.componentFactoryResolver.resolveComponentFactory(data.component);
var componentRef = _this.veryTopRef.createComponent(componentFactory);
data.listener.next(componentRef);
});
this.clearSubscription = this.themeService.onClearLayoutTop()
.subscribe(function (data) {
_this.veryTopRef.clear();
data.listener.next(true);
});
this.afterViewInit$.next(true);
};
NgaLayoutComponent.prototype.ngOnDestroy = function () {
this.themeSubscription.unsubscribe();
this.appendClassSubscription.unsubscribe();
this.removeClassSubscription.unsubscribe();
this.appendSubscription.unsubscribe();
this.clearSubscription.unsubscribe();
};
NgaLayoutComponent.prototype.onResize = function (event) {
this.themeService.changeWindowWidth(event.target.innerWidth);
};
return NgaLayoutComponent;
}());
__decorate([
HostBinding('class.center'),
__metadata("design:type", Boolean)
], NgaLayoutComponent.prototype, "centerValue", void 0);
__decorate([
Input(),
__metadata("design:type", Boolean),
__metadata("design:paramtypes", [Boolean])
], NgaLayoutComponent.prototype, "center", null);
__decorate([
ViewChild('layoutTopDynamicArea', { read: ViewContainerRef }),
__metadata("design:type", ViewContainerRef)
], NgaLayoutComponent.prototype, "veryTopRef", void 0);
__decorate([
HostListener('window:resize', ['$event']),
__metadata("design:type", Function),
__metadata("design:paramtypes", [Object]),
__metadata("design:returntype", void 0)
], NgaLayoutComponent.prototype, "onResize", null);
NgaLayoutComponent = __decorate([
Component({
selector: 'nga-layout',
styles: [":host{-webkit-font-smoothing:antialiased}:host .layout{display:flex;flex-direction:column}:host /deep/ nga-layout-header{display:block}:host /deep/ nga-layout-header nav{align-items:center;display:flex}:host /deep/ nga-layout-header.fixed{position:fixed;left:0;right:0;z-index:100}:host .layout-container{flex:1;display:flex;flex-direction:row}:host .layout-container /deep/ nga-sidebar{order:0}:host .layout-container /deep/ nga-sidebar.right{order:2}:host .layout-container /deep/ nga-sidebar .fixed{position:fixed;width:100%;overflow-y:auto;height:100%}:host .layout-container .content{display:flex;flex:1;flex-direction:column}:host .layout-container .content.center{max-width:100%;position:relative;margin-left:auto;margin-right:auto}:host .layout-container .content .columns{display:flex;flex-direction:row;flex:1}:host .layout-container .content .columns /deep/ nga-layout-column{order:2;flex:1 0}:host .layout-container .content .columns /deep/ nga-layout-column.left{order:1}:host .layout-container .content /deep/ nga-layout-footer{display:block;margin-top:auto}:host .layout-container .content /deep/ nga-layout-footer nav{justify-content:center;display:flex} "],
template: "\n <ng-template #layoutTopDynamicArea></ng-template>\n <div class=\"layout\">\n <ng-content select=\"nga-layout-header\"></ng-content>\n <div class=\"layout-container\">\n <ng-content select=\"nga-sidebar\"></ng-content>\n <ng-content select=\"nga-sidebar[left]\"></ng-content>\n <div class=\"content\" [class.center]=\"centerValue\">\n <div class=\"columns\">\n <ng-content select=\"nga-layout-column\"></ng-content>\n </div>\n <ng-content select=\"nga-layout-footer\"></ng-content>\n </div>\n <ng-content select=\"nga-sidebar[right]\"></ng-content>\n </div>\n </div>\n ",
}),
__metadata("design:paramtypes", [NgaThemeService,
NgaSpinnerService,
ComponentFactoryResolver,
ElementRef,
Renderer2])
], NgaLayoutComponent);
export { NgaLayoutComponent };
//# sourceMappingURL=layout.component.js.map