@akveo/nga-theme
Version:
@akveo/nga-theme
336 lines • 12.4 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, HostBinding, Input } from '@angular/core';
import { convertToBoolProperty } from '../helpers';
import { NgaSidebarService } from './sidebar.service';
/**
* Sidebar header container.
*
* Placeholder which contains a sidebar header content,
* placed at the very top of the sidebar outside of the scroll area.
*/
var NgaSidebarHeaderComponent = (function () {
function NgaSidebarHeaderComponent() {
}
return NgaSidebarHeaderComponent;
}());
NgaSidebarHeaderComponent = __decorate([
Component({
selector: 'nga-sidebar-header',
template: "\n <ng-content></ng-content>\n ",
})
], NgaSidebarHeaderComponent);
export { NgaSidebarHeaderComponent };
/**
* Sidebar content container.
*
* Placeholder which contains a sidebar main content.
*/
var NgaSidebarContentComponent = (function () {
function NgaSidebarContentComponent() {
}
return NgaSidebarContentComponent;
}());
NgaSidebarContentComponent = __decorate([
Component({
selector: 'nga-sidebar-content',
template: "\n <ng-content></ng-content>\n ",
})
], NgaSidebarContentComponent);
export { NgaSidebarContentComponent };
/**
* Sidebar footer container.
*
* Placeholder which contains a sidebar footer content,
* placed at the very bottom of the sidebar outside of the scroll area.
*/
var NgaSidebarFooterComponent = (function () {
function NgaSidebarFooterComponent() {
}
return NgaSidebarFooterComponent;
}());
NgaSidebarFooterComponent = __decorate([
Component({
selector: 'nga-sidebar-footer',
template: "\n <ng-content></ng-content>\n ",
})
], NgaSidebarFooterComponent);
export { NgaSidebarFooterComponent };
/**
* Main sidebar component.
*
* Sidebar can be place on the left or right side of the layout, can be fixed (shown above the content)
* or can push the layout when opened.
*
* @styles Available component styles
*
* $nga-sidebar-foreground: $nga-foreground-inverse !default;
* $nga-sidebar-background: $nga-background-inverse !default;
* $nga-sidebar-height: 100vh !default;
* $nga-sidebar-width: 12rem !default;
* $nga-sidebar-width-compact: 4rem !default;
* $nga-sidebar-padding: $nga-padding !default;
* $nga-sidebar-header-height: 3.5rem !default;
* $nga-sidebar-footer-height: 3.5rem !default;
*
* @example Min sidebar example
*
* ```
* <nga-sidebar><nga-sidebar-content>Sidebar content</nga-sidebar-content></nga-sidebar>
* ```
*
* @example Fixed sidebar
*
* Example of fixed sidebar located on the left side, initially collapsed.
*
* ```
* <nga-sidebar left fixed state="collapsed">
* <nga-sidebar-header>Header</nga-sidebar-header>
* <nga-sidebar-content>
* Menu or another component here
* </nga-sidebar-content>
* <nga-sidebar-footer>
* Footer components here
* </nga-sidebar-footer>
* </nga-sidebar>
* ```
*/
var NgaSidebarComponent = NgaSidebarComponent_1 = (function () {
function NgaSidebarComponent(sidebarService) {
this.sidebarService = sidebarService;
this.fixedValue = false;
this.rightValue = false;
this.leftValue = false;
}
Object.defineProperty(NgaSidebarComponent.prototype, "expanded", {
// TODO: rename stateValue to state (take a look to the card component)
get: function () {
return this.stateValue === NgaSidebarComponent_1.STATE_EXPANDED;
},
enumerable: true,
configurable: true
});
Object.defineProperty(NgaSidebarComponent.prototype, "collapsed", {
get: function () {
return this.stateValue === NgaSidebarComponent_1.STATE_COLLAPSED;
},
enumerable: true,
configurable: true
});
Object.defineProperty(NgaSidebarComponent.prototype, "compacted", {
get: function () {
return this.stateValue === NgaSidebarComponent_1.STATE_COMPACTED;
},
enumerable: true,
configurable: true
});
Object.defineProperty(NgaSidebarComponent.prototype, "right", {
/**
* Places sidebar on the left side
* @type {boolean}
*/
set: function (val) {
this.rightValue = convertToBoolProperty(val);
},
enumerable: true,
configurable: true
});
Object.defineProperty(NgaSidebarComponent.prototype, "left", {
/**
* Places sidebar on the right side
* @type {boolean}
*/
set: function (val) {
this.leftValue = convertToBoolProperty(val);
},
enumerable: true,
configurable: true
});
Object.defineProperty(NgaSidebarComponent.prototype, "fixed", {
/**
* Makes sidebar fixed (shown above the layout content)
* @type {boolean}
*/
set: function (val) {
this.fixedValue = convertToBoolProperty(val);
},
enumerable: true,
configurable: true
});
Object.defineProperty(NgaSidebarComponent.prototype, "state", {
/**
* Initial sidebar state, `expanded`|`collapsed`|`compacted`
* @type {string}
*/
set: function (val) {
this.stateValue = val;
},
enumerable: true,
configurable: true
});
NgaSidebarComponent.prototype.ngOnInit = function () {
var _this = this;
this.toggleSubscription = this.sidebarService.onToggle()
.subscribe(function (data) {
if (!_this.tag || _this.tag === data.tag) {
_this.toggle(data.compact);
}
});
this.expandSubscription = this.sidebarService.onExpand()
.subscribe(function (data) {
if (!_this.tag || _this.tag === data.tag) {
_this.expand();
}
});
this.collapseSubscription = this.sidebarService.onCollapse()
.subscribe(function (data) {
if (!_this.tag || _this.tag === data.tag) {
_this.collapse();
}
});
};
NgaSidebarComponent.prototype.ngOnDestroy = function () {
this.toggleSubscription.unsubscribe();
this.expandSubscription.unsubscribe();
this.collapseSubscription.unsubscribe();
};
/**
* Some Static method
* // TODO: remove this
*
* @param {string} test
* @param {any} anotherOne
* @returns {number}
*/
NgaSidebarComponent.someTestMethod = function (test, anotherOne) {
return 1;
};
/**
* Returns some value
* // TODO: remove this
*
* @returns number
*/
NgaSidebarComponent.prototype.returnSomeValue = function () {
return 1;
};
/**
* Collapses the sidebar
*/
NgaSidebarComponent.prototype.collapse = function () {
this.state = NgaSidebarComponent_1.STATE_COLLAPSED;
};
/**
* Expands the sidebar
*/
NgaSidebarComponent.prototype.expand = function () {
this.state = NgaSidebarComponent_1.STATE_EXPANDED;
};
/**
* Compacts the sidebar (minimizes)
*/
NgaSidebarComponent.prototype.compact = function () {
this.state = NgaSidebarComponent_1.STATE_COMPACTED;
};
/**
* Toggles sidebar state (expanded|collapsed|compacted)
* @param {boolean} compact If true, then sidebar state will be changed between expanded & compacted,
* otherwise - between expanded & collapsed. False by default.
*
* @example Toggle sidebar state
*
* ```
* this.sidebar.toggle(true);
* ```
*/
NgaSidebarComponent.prototype.toggle = function (compact) {
if (compact === void 0) { compact = false; }
var closedStates = [NgaSidebarComponent_1.STATE_COMPACTED, NgaSidebarComponent_1.STATE_COLLAPSED];
if (compact) {
this.state = closedStates.indexOf(this.stateValue) >= 0 ?
NgaSidebarComponent_1.STATE_EXPANDED : NgaSidebarComponent_1.STATE_COMPACTED;
}
else {
this.state = closedStates.indexOf(this.stateValue) >= 0 ?
NgaSidebarComponent_1.STATE_EXPANDED : NgaSidebarComponent_1.STATE_COLLAPSED;
}
};
return NgaSidebarComponent;
}());
NgaSidebarComponent.STATE_EXPANDED = 'expanded';
NgaSidebarComponent.STATE_COLLAPSED = 'collapsed';
NgaSidebarComponent.STATE_COMPACTED = 'compacted';
__decorate([
HostBinding('class.fixed'),
__metadata("design:type", Boolean)
], NgaSidebarComponent.prototype, "fixedValue", void 0);
__decorate([
HostBinding('class.right'),
__metadata("design:type", Boolean)
], NgaSidebarComponent.prototype, "rightValue", void 0);
__decorate([
HostBinding('class.left'),
__metadata("design:type", Boolean)
], NgaSidebarComponent.prototype, "leftValue", void 0);
__decorate([
HostBinding('class.expanded'),
__metadata("design:type", Object),
__metadata("design:paramtypes", [])
], NgaSidebarComponent.prototype, "expanded", null);
__decorate([
HostBinding('class.collapsed'),
__metadata("design:type", Object),
__metadata("design:paramtypes", [])
], NgaSidebarComponent.prototype, "collapsed", null);
__decorate([
HostBinding('class.compacted'),
__metadata("design:type", Object),
__metadata("design:paramtypes", [])
], NgaSidebarComponent.prototype, "compacted", null);
__decorate([
Input(),
__metadata("design:type", Boolean),
__metadata("design:paramtypes", [Boolean])
], NgaSidebarComponent.prototype, "right", null);
__decorate([
Input(),
__metadata("design:type", Boolean),
__metadata("design:paramtypes", [Boolean])
], NgaSidebarComponent.prototype, "left", null);
__decorate([
Input(),
__metadata("design:type", Boolean),
__metadata("design:paramtypes", [Boolean])
], NgaSidebarComponent.prototype, "fixed", null);
__decorate([
Input(),
__metadata("design:type", String),
__metadata("design:paramtypes", [String])
], NgaSidebarComponent.prototype, "state", null);
__decorate([
Input(),
__metadata("design:type", String)
], NgaSidebarComponent.prototype, "tag", void 0);
NgaSidebarComponent = NgaSidebarComponent_1 = __decorate([
Component({
selector: 'nga-sidebar',
styles: [":host{display:flex;flex-direction:column;overflow:hidden;transition:width 0.2s;z-index:1;order:0}:host>.scrollable{transition:width 0.2s}:host.right{order:4;margin-right:0;margin-left:auto}:host.fixed{position:absolute;top:0;bottom:0;left:0}:host.fixed.right{right:0}:host>.scrollable{overflow-y:auto}:host /deep/ nga-sidebar-footer{margin-top:auto;display:block}:host /deep/ nga-sidebar-header{display:block} "],
template: "\n <div class=\"scrollable\">\n <ng-content select=\"nga-sidebar-header\"></ng-content>\n <div class=\"main-container\">\n <ng-content></ng-content>\n </div>\n <ng-content select=\"nga-sidebar-footer\"></ng-content>\n </div>\n ",
}),
__metadata("design:paramtypes", [NgaSidebarService])
], NgaSidebarComponent);
export { NgaSidebarComponent };
var NgaSidebarComponent_1;
//# sourceMappingURL=sidebar.component.js.map