@junte/ui
Version:
Quality Angular UI components kit
77 lines • 11.7 kB
JavaScript
import { __decorate, __metadata } from "tslib";
import { ChangeDetectorRef, Component, ContentChild, HostBinding, TemplateRef } from '@angular/core';
import { NGXLogger } from 'ngx-logger';
import { ContentApi } from '../../../core/decorators/api';
import { UI } from '../../../core/enums/ui';
import { MenuComponent } from '../../../navigation/menu/menu.component';
var AppHeaderComponent = /** @class */ (function () {
function AppHeaderComponent(logger, cd) {
this.logger = logger;
this.cd = cd;
this.host = 'jnt-app-header-host';
this.ui = UI;
this.reference = { popover: null };
}
AppHeaderComponent.prototype.hide = function () {
this.logger.debug('hide header dropdown');
if (!!this.reference.popover) {
this.reference.popover.hide();
this.reference.popover = null;
}
};
AppHeaderComponent.ctorParameters = function () { return [
{ type: NGXLogger },
{ type: ChangeDetectorRef }
]; };
__decorate([
HostBinding('attr.host'),
__metadata("design:type", Object)
], AppHeaderComponent.prototype, "host", void 0);
__decorate([
ContentApi({
selector: '#headerLogoTemplate',
description: 'Logo template'
}),
ContentChild('headerLogoTemplate'),
__metadata("design:type", TemplateRef)
], AppHeaderComponent.prototype, "headerLogoTemplate", void 0);
__decorate([
ContentApi({
selector: '#headerContentTemplate',
description: 'Header content template'
}),
ContentChild('headerContentTemplate'),
__metadata("design:type", TemplateRef)
], AppHeaderComponent.prototype, "contentTemplate", void 0);
__decorate([
ContentChild('headerTopMenu'),
__metadata("design:type", MenuComponent)
], AppHeaderComponent.prototype, "menu", void 0);
__decorate([
ContentApi({
selector: '#headerUserbarTemplate',
description: 'Userbar template'
}),
ContentChild('headerUserbarTemplate'),
__metadata("design:type", TemplateRef)
], AppHeaderComponent.prototype, "headerUserbarTemplate", void 0);
__decorate([
ContentApi({
selector: '#headerActionsTemplate',
description: 'Actions template'
}),
ContentChild('headerActionsTemplate'),
__metadata("design:type", TemplateRef)
], AppHeaderComponent.prototype, "headerActionsTemplate", void 0);
AppHeaderComponent = __decorate([
Component({
selector: 'jnt-app-header',
template: "<ng-template #menuTemplate let-menu=\"menu\" let-orientation=\"orientation\" let-spacing=\"spacing\">\n <div child-of=\"jnt-app-header-host\" data-menu *ngIf=\"!!menu\">\n <jnt-menu child-of=\"jnt-app-header-host\" [orientation]=\"orientation\"\n [spacing]=\"spacing\"\n (selected)=\"hide()\">\n <jnt-menu-item child-of=\"jnt-app-header-host\" *ngFor=\"let item of menu.items\"\n [title]=\"item.title\"\n [icon]=\"item.icon\"\n [loading]=\"item.loading\"\n [matching]=\"item.matching\"\n [target]=\"item.target\"\n [disabled]=\"item.disabled\"\n [link]=\"item.link\">\n <jnt-badge child-of=\"jnt-app-header-host\" *ngFor=\"let badge of item.badges\"\n [value]=\"badge.value\"\n [text]=\"badge.text\"\n [position]=\"ui.position.inline\"\n [color]=\"badge.color\"></jnt-badge>\n </jnt-menu-item>\n </jnt-menu>\n </div>\n</ng-template>\n\n<ng-container *jntMinFor=\"ui.breakpoint.desktop\">\n <div child-of=\"jnt-app-header-host\" data-logo data-desktop *ngIf=\"headerLogoTemplate\">\n <ng-container *ngTemplateOutlet=\"headerLogoTemplate\"></ng-container>\n </div>\n\n <ng-container *ngTemplateOutlet=\"menuTemplate;\n context: {menu: menu, orientation: ui.orientation.horizontal, spacing: ui.gutter.normal}\">\n </ng-container>\n\n <jnt-stack child-of=\"jnt-app-header-host\" data-actions\n [orientation]=\"ui.orientation.horizontal\"\n [gutter]=\"ui.gutter.small\"\n [align]=\"ui.align.stretch\">\n <div child-of=\"jnt-app-header-host\" data-content *ngIf=\"contentTemplate\">\n <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n </div>\n <ng-container *ngTemplateOutlet=\"headerActionsTemplate\"></ng-container>\n <ng-container *ngTemplateOutlet=\"headerUserbarTemplate\"></ng-container>\n </jnt-stack>\n</ng-container>\n\n<ng-container *jntMaxFor=\"ui.breakpoint.tablet\">\n <div child-of=\"jnt-app-header-host\" data-logo data-tablet *ngIf=\"headerLogoTemplate\">\n <ng-container *ngTemplateOutlet=\"headerLogoTemplate\"></ng-container>\n </div>\n <jnt-stack child-of=\"jnt-app-header-host\" data-actions\n [orientation]=\"ui.orientation.horizontal\"\n [gutter]=\"ui.gutter.small\"\n [align]=\"ui.align.stretch\">\n <ng-container *ngTemplateOutlet=\"headerActionsTemplate\"></ng-container>\n <jnt-button child-of=\"jnt-app-header-host\" data-burger\n *ngIf=\"!!headerUserbarTemplate || !!contentTemplate || !!menu\"\n [icon]=\"!!reference.popover ? ui.icons.cancel : ui.icons.menu\"\n [outline]=\"ui.outline.transparent\"\n [jntPopover]=\"{\n contentTemplate: dropdownTemplate,\n trigger: ui.trigger.click,\n placement: ui.placement.fixed\n }\"\n (attached)=\"reference.popover = $event; cd.detectChanges()\"\n (removed)=\"reference.popover = null; cd.detectChanges()\">\n </jnt-button>\n <ng-template #dropdownTemplate>\n <jnt-stack child-of=\"jnt-app-header-host\" [align]=\"ui.align.stretch\" [gutter]=\"ui.gutter.small\">\n <ng-container *ngIf=\"!!headerUserbarTemplate\">\n <ng-container *ngTemplateOutlet=\"headerUserbarTemplate;\n context: {hide: this.hide.bind(this)}\">\n </ng-container>\n <hr child-of=\"jnt-app-header-host\" *ngIf=\"!!menu || !!contentTemplate\" />\n </ng-container>\n <ng-container *ngTemplateOutlet=\"menuTemplate;\n context: {menu: menu, orientation: ui.orientation.vertical, spacing: ui.gutter.small}\">\n </ng-container>\n <div child-of=\"jnt-app-header-host\" data-content *ngIf=\"!!contentTemplate\">\n <ng-container *ngTemplateOutlet=\"contentTemplate;\n context: {hide: this.hide.bind(this)}\">\n </ng-container>\n </div>\n </jnt-stack>\n </ng-template>\n </jnt-stack>\n</ng-container>"
}),
__metadata("design:paramtypes", [NGXLogger,
ChangeDetectorRef])
], AppHeaderComponent);
return AppHeaderComponent;
}());
export { AppHeaderComponent };
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXBwLWhlYWRlci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9AanVudGUvdWkvIiwic291cmNlcyI6WyJsaWIvbGF5b3V0L2FwcC9oZWFkZXIvYXBwLWhlYWRlci5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLFdBQVcsRUFBRSxXQUFXLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDckcsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLFlBQVksQ0FBQztBQUN2QyxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0sOEJBQThCLENBQUM7QUFDMUQsT0FBTyxFQUFFLEVBQUUsRUFBRSxNQUFNLHdCQUF3QixDQUFDO0FBQzVDLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSx5Q0FBeUMsQ0FBQztBQU94RTtJQXVDRSw0QkFBb0IsTUFBaUIsRUFDbEIsRUFBcUI7UUFEcEIsV0FBTSxHQUFOLE1BQU0sQ0FBVztRQUNsQixPQUFFLEdBQUYsRUFBRSxDQUFtQjtRQXRDTCxTQUFJLEdBQUcscUJBQXFCLENBQUM7UUFFaEUsT0FBRSxHQUFHLEVBQUUsQ0FBQztRQUVSLGNBQVMsR0FBaUMsRUFBQyxPQUFPLEVBQUUsSUFBSSxFQUFDLENBQUM7SUFtQzFELENBQUM7SUFFRCxpQ0FBSSxHQUFKO1FBQ0UsSUFBSSxDQUFDLE1BQU0sQ0FBQyxLQUFLLENBQUMsc0JBQXNCLENBQUMsQ0FBQztRQUMxQyxJQUFJLENBQUMsQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDLE9BQU8sRUFBRTtZQUM1QixJQUFJLENBQUMsU0FBUyxDQUFDLE9BQU8sQ0FBQyxJQUFJLEVBQUUsQ0FBQztZQUM5QixJQUFJLENBQUMsU0FBUyxDQUFDLE9BQU8sR0FBRyxJQUFJLENBQUM7U0FDL0I7SUFDSCxDQUFDOztnQkFWMkIsU0FBUztnQkFDZCxpQkFBaUI7O0lBdENkO1FBQXpCLFdBQVcsQ0FBQyxXQUFXLENBQUM7O29EQUF1QztJQVdoRTtRQUxDLFVBQVUsQ0FBQztZQUNWLFFBQVEsRUFBRSxxQkFBcUI7WUFDL0IsV0FBVyxFQUFFLGVBQWU7U0FDN0IsQ0FBQztRQUNELFlBQVksQ0FBQyxvQkFBb0IsQ0FBQztrQ0FDZixXQUFXO2tFQUFNO0lBT3JDO1FBTEMsVUFBVSxDQUFDO1lBQ1YsUUFBUSxFQUFFLHdCQUF3QjtZQUNsQyxXQUFXLEVBQUUseUJBQXlCO1NBQ3ZDLENBQUM7UUFDRCxZQUFZLENBQUMsdUJBQXVCLENBQUM7a0NBQ3JCLFdBQVc7K0RBQU07SUFHbEM7UUFEQyxZQUFZLENBQUMsZUFBZSxDQUFDO2tDQUN4QixhQUFhO29EQUFDO0lBT3BCO1FBTEMsVUFBVSxDQUFDO1lBQ1YsUUFBUSxFQUFFLHdCQUF3QjtZQUNsQyxXQUFXLEVBQUUsa0JBQWtCO1NBQ2hDLENBQUM7UUFDRCxZQUFZLENBQUMsdUJBQXVCLENBQUM7a0NBQ2YsV0FBVztxRUFBTTtJQU94QztRQUxDLFVBQVUsQ0FBQztZQUNWLFFBQVEsRUFBRSx3QkFBd0I7WUFDbEMsV0FBVyxFQUFFLGtCQUFrQjtTQUNoQyxDQUFDO1FBQ0QsWUFBWSxDQUFDLHVCQUF1QixDQUFDO2tDQUNmLFdBQVc7cUVBQU07SUFyQzdCLGtCQUFrQjtRQUo5QixTQUFTLENBQUM7WUFDVCxRQUFRLEVBQUUsZ0JBQWdCO1lBQzFCLG1vSUFBNkM7U0FDOUMsQ0FBQzt5Q0F3QzRCLFNBQVM7WUFDZCxpQkFBaUI7T0F4QzdCLGtCQUFrQixDQWtEOUI7SUFBRCx5QkFBQztDQUFBLEFBbERELElBa0RDO1NBbERZLGtCQUFrQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENoYW5nZURldGVjdG9yUmVmLCBDb21wb25lbnQsIENvbnRlbnRDaGlsZCwgSG9zdEJpbmRpbmcsIFRlbXBsYXRlUmVmIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBOR1hMb2dnZXIgfSBmcm9tICduZ3gtbG9nZ2VyJztcbmltcG9ydCB7IENvbnRlbnRBcGkgfSBmcm9tICcuLi8uLi8uLi9jb3JlL2RlY29yYXRvcnMvYXBpJztcbmltcG9ydCB7IFVJIH0gZnJvbSAnLi4vLi4vLi4vY29yZS9lbnVtcy91aSc7XG5pbXBvcnQgeyBNZW51Q29tcG9uZW50IH0gZnJvbSAnLi4vLi4vLi4vbmF2aWdhdGlvbi9tZW51L21lbnUuY29tcG9uZW50JztcbmltcG9ydCB7IFBvcG92ZXJJbnN0YW5jZSB9IGZyb20gJy4uLy4uLy4uL292ZXJsYXlzL3BvcG92ZXIvcG9wb3Zlci5zZXJ2aWNlJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnam50LWFwcC1oZWFkZXInLFxuICB0ZW1wbGF0ZVVybDogJy4vYXBwLWhlYWRlci5lbmNhcHN1bGF0ZWQuaHRtbCdcbn0pXG5leHBvcnQgY2xhc3MgQXBwSGVhZGVyQ29tcG9uZW50IHtcblxuICBASG9zdEJpbmRpbmcoJ2F0dHIuaG9zdCcpIHJlYWRvbmx5IGhvc3QgPSAnam50LWFwcC1oZWFkZXItaG9zdCc7XG5cbiAgdWkgPSBVSTtcblxuICByZWZlcmVuY2U6IHsgcG9wb3ZlcjogUG9wb3Zlckluc3RhbmNlIH0gPSB7cG9wb3ZlcjogbnVsbH07XG5cbiAgQENvbnRlbnRBcGkoe1xuICAgIHNlbGVjdG9yOiAnI2hlYWRlckxvZ29UZW1wbGF0ZScsXG4gICAgZGVzY3JpcHRpb246ICdMb2dvIHRlbXBsYXRlJ1xuICB9KVxuICBAQ29udGVudENoaWxkKCdoZWFkZXJMb2dvVGVtcGxhdGUnKVxuICBoZWFkZXJMb2dvVGVtcGxhdGU6IFRlbXBsYXRlUmVmPGFueT47XG5cbiAgQENvbnRlbnRBcGkoe1xuICAgIHNlbGVjdG9yOiAnI2hlYWRlckNvbnRlbnRUZW1wbGF0ZScsXG4gICAgZGVzY3JpcHRpb246ICdIZWFkZXIgY29udGVudCB0ZW1wbGF0ZSdcbiAgfSlcbiAgQENvbnRlbnRDaGlsZCgnaGVhZGVyQ29udGVudFRlbXBsYXRlJylcbiAgY29udGVudFRlbXBsYXRlOiBUZW1wbGF0ZVJlZjxhbnk+O1xuXG4gIEBDb250ZW50Q2hpbGQoJ2hlYWRlclRvcE1lbnUnKVxuICBtZW51OiBNZW51Q29tcG9uZW50O1xuXG4gIEBDb250ZW50QXBpKHtcbiAgICBzZWxlY3RvcjogJyNoZWFkZXJVc2VyYmFyVGVtcGxhdGUnLFxuICAgIGRlc2NyaXB0aW9uOiAnVXNlcmJhciB0ZW1wbGF0ZSdcbiAgfSlcbiAgQENvbnRlbnRDaGlsZCgnaGVhZGVyVXNlcmJhclRlbXBsYXRlJylcbiAgaGVhZGVyVXNlcmJhclRlbXBsYXRlOiBUZW1wbGF0ZVJlZjxhbnk+O1xuXG4gIEBDb250ZW50QXBpKHtcbiAgICBzZWxlY3RvcjogJyNoZWFkZXJBY3Rpb25zVGVtcGxhdGUnLFxuICAgIGRlc2NyaXB0aW9uOiAnQWN0aW9ucyB0ZW1wbGF0ZSdcbiAgfSlcbiAgQENvbnRlbnRDaGlsZCgnaGVhZGVyQWN0aW9uc1RlbXBsYXRlJylcbiAgaGVhZGVyQWN0aW9uc1RlbXBsYXRlOiBUZW1wbGF0ZVJlZjxhbnk+O1xuXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgbG9nZ2VyOiBOR1hMb2dnZXIsXG4gICAgICAgICAgICAgIHB1YmxpYyBjZDogQ2hhbmdlRGV0ZWN0b3JSZWYpIHtcbiAgfVxuXG4gIGhpZGUoKSB7XG4gICAgdGhpcy5sb2dnZXIuZGVidWcoJ2hpZGUgaGVhZGVyIGRyb3Bkb3duJyk7XG4gICAgaWYgKCEhdGhpcy5yZWZlcmVuY2UucG9wb3Zlcikge1xuICAgICAgdGhpcy5yZWZlcmVuY2UucG9wb3Zlci5oaWRlKCk7XG4gICAgICB0aGlzLnJlZmVyZW5jZS5wb3BvdmVyID0gbnVsbDtcbiAgICB9XG4gIH1cbn1cbiJdfQ==