@blackbaud/skyux
Version:
SKY UX built on Angular 2
71 lines • 3.59 kB
JavaScript
import { Component, EventEmitter, Input, Output, ViewChild, ViewChildren } from '@angular/core';
import { SkyMediaQueryService } from '../../media-queries';
import { SkyTileDashboardColumnComponent } from '../tile-dashboard-column';
import { SkyTileDashboardService } from './tile-dashboard.service';
var SkyTileDashboardComponent = (function () {
function SkyTileDashboardComponent(
// HACK: This is public so it can be accessed via a unit test due to breaking changes
// in RC5. https://github.com/angular/angular/issues/10854
dashboardService, mediaQuery) {
var _this = this;
this.dashboardService = dashboardService;
this.mediaQuery = mediaQuery;
this.configChange = new EventEmitter();
this.configSet = false;
this.viewReady = false;
dashboardService.configChange.subscribe(function (config) {
_this.configChange.emit(config);
});
}
Object.defineProperty(SkyTileDashboardComponent.prototype, "config", {
get: function () {
return this._config;
},
set: function (value) {
if (value && !this.configSet) {
this._config = value;
this.configSet = true;
this.checkReady();
}
},
enumerable: true,
configurable: true
});
SkyTileDashboardComponent.prototype.ngAfterViewInit = function () {
this.viewReady = true;
this.checkReady();
};
SkyTileDashboardComponent.prototype.ngOnDestroy = function () {
this.dashboardService.destroy();
};
SkyTileDashboardComponent.prototype.checkReady = function () {
var _this = this;
if (this.viewReady && this.config) {
setTimeout(function () {
_this.dashboardService.init(_this.config, _this.columns, _this.singleColumn);
}, 0);
}
};
return SkyTileDashboardComponent;
}());
export { SkyTileDashboardComponent };
SkyTileDashboardComponent.decorators = [
{ type: Component, args: [{
selector: 'sky-tile-dashboard',
styles: [":host{display:flex;padding:0 10px}.sky-tile-dashboard-layout-multi{display:block}.sky-tile-dashboard-layout-single{display:none}@media (max-width: 991px){:host{display:block;padding:0}.sky-tile-dashboard-layout-multi{display:none}.sky-tile-dashboard-layout-single{display:block}:host /deep/ .sky-tile-dashboard-column{padding:0}}@media (max-width: 767px){:host /deep/ .sky-tile{margin:0}}\n"],
template: "<sky-tile-dashboard-column\n *ngFor=\"let column of config?.layout?.multiColumn\"\n class=\"sky-tile-dashboard-layout-multi\"\n [ngStyle]=\"{\n 'flex-basis': (100 / config?.layout?.multiColumn.length) + '%'\n }\"\n>\n</sky-tile-dashboard-column>\n<sky-tile-dashboard-column class=\"sky-tile-dashboard-layout-single\" #singleColumn>\n</sky-tile-dashboard-column>\n<ng-content></ng-content>\n",
providers: [SkyTileDashboardService]
},] },
];
/** @nocollapse */
SkyTileDashboardComponent.ctorParameters = function () { return [
{ type: SkyTileDashboardService, },
{ type: SkyMediaQueryService, },
]; };
SkyTileDashboardComponent.propDecorators = {
'config': [{ type: Input },],
'configChange': [{ type: Output },],
'columns': [{ type: ViewChildren, args: [SkyTileDashboardColumnComponent,] },],
'singleColumn': [{ type: ViewChild, args: ['singleColumn', { read: SkyTileDashboardColumnComponent },] },],
};
//# sourceMappingURL=tile-dashboard.component.js.map