@junte/ui
Version:
Quality Angular UI components kit
76 lines • 11.4 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';
let AppHeaderComponent = class AppHeaderComponent {
constructor(logger, cd) {
this.logger = logger;
this.cd = cd;
this.host = 'jnt-app-header-host';
this.ui = UI;
this.reference = { popover: null };
}
hide() {
this.logger.debug('hide header dropdown');
if (!!this.reference.popover) {
this.reference.popover.hide();
this.reference.popover = null;
}
}
};
AppHeaderComponent.ctorParameters = () => [
{ 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);
export { AppHeaderComponent };
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXBwLWhlYWRlci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9AanVudGUvdWkvIiwic291cmNlcyI6WyJsaWIvbGF5b3V0L2FwcC9oZWFkZXIvYXBwLWhlYWRlci5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLFdBQVcsRUFBRSxXQUFXLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDckcsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLFlBQVksQ0FBQztBQUN2QyxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0sOEJBQThCLENBQUM7QUFDMUQsT0FBTyxFQUFFLEVBQUUsRUFBRSxNQUFNLHdCQUF3QixDQUFDO0FBQzVDLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSx5Q0FBeUMsQ0FBQztBQU94RSxJQUFhLGtCQUFrQixHQUEvQixNQUFhLGtCQUFrQjtJQXVDN0IsWUFBb0IsTUFBaUIsRUFDbEIsRUFBcUI7UUFEcEIsV0FBTSxHQUFOLE1BQU0sQ0FBVztRQUNsQixPQUFFLEdBQUYsRUFBRSxDQUFtQjtRQXRDTCxTQUFJLEdBQUcscUJBQXFCLENBQUM7UUFFaEUsT0FBRSxHQUFHLEVBQUUsQ0FBQztRQUVSLGNBQVMsR0FBaUMsRUFBQyxPQUFPLEVBQUUsSUFBSSxFQUFDLENBQUM7SUFtQzFELENBQUM7SUFFRCxJQUFJO1FBQ0YsSUFBSSxDQUFDLE1BQU0sQ0FBQyxLQUFLLENBQUMsc0JBQXNCLENBQUMsQ0FBQztRQUMxQyxJQUFJLENBQUMsQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDLE9BQU8sRUFBRTtZQUM1QixJQUFJLENBQUMsU0FBUyxDQUFDLE9BQU8sQ0FBQyxJQUFJLEVBQUUsQ0FBQztZQUM5QixJQUFJLENBQUMsU0FBUyxDQUFDLE9BQU8sR0FBRyxJQUFJLENBQUM7U0FDL0I7SUFDSCxDQUFDO0NBQ0YsQ0FBQTs7WUFYNkIsU0FBUztZQUNkLGlCQUFpQjs7QUF0Q2Q7SUFBekIsV0FBVyxDQUFDLFdBQVcsQ0FBQzs7Z0RBQXVDO0FBV2hFO0lBTEMsVUFBVSxDQUFDO1FBQ1YsUUFBUSxFQUFFLHFCQUFxQjtRQUMvQixXQUFXLEVBQUUsZUFBZTtLQUM3QixDQUFDO0lBQ0QsWUFBWSxDQUFDLG9CQUFvQixDQUFDOzhCQUNmLFdBQVc7OERBQU07QUFPckM7SUFMQyxVQUFVLENBQUM7UUFDVixRQUFRLEVBQUUsd0JBQXdCO1FBQ2xDLFdBQVcsRUFBRSx5QkFBeUI7S0FDdkMsQ0FBQztJQUNELFlBQVksQ0FBQyx1QkFBdUIsQ0FBQzs4QkFDckIsV0FBVzsyREFBTTtBQUdsQztJQURDLFlBQVksQ0FBQyxlQUFlLENBQUM7OEJBQ3hCLGFBQWE7Z0RBQUM7QUFPcEI7SUFMQyxVQUFVLENBQUM7UUFDVixRQUFRLEVBQUUsd0JBQXdCO1FBQ2xDLFdBQVcsRUFBRSxrQkFBa0I7S0FDaEMsQ0FBQztJQUNELFlBQVksQ0FBQyx1QkFBdUIsQ0FBQzs4QkFDZixXQUFXO2lFQUFNO0FBT3hDO0lBTEMsVUFBVSxDQUFDO1FBQ1YsUUFBUSxFQUFFLHdCQUF3QjtRQUNsQyxXQUFXLEVBQUUsa0JBQWtCO0tBQ2hDLENBQUM7SUFDRCxZQUFZLENBQUMsdUJBQXVCLENBQUM7OEJBQ2YsV0FBVztpRUFBTTtBQXJDN0Isa0JBQWtCO0lBSjlCLFNBQVMsQ0FBQztRQUNULFFBQVEsRUFBRSxnQkFBZ0I7UUFDMUIsbW9JQUE2QztLQUM5QyxDQUFDO3FDQXdDNEIsU0FBUztRQUNkLGlCQUFpQjtHQXhDN0Isa0JBQWtCLENBa0Q5QjtTQWxEWSxrQkFBa0IiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDaGFuZ2VEZXRlY3RvclJlZiwgQ29tcG9uZW50LCBDb250ZW50Q2hpbGQsIEhvc3RCaW5kaW5nLCBUZW1wbGF0ZVJlZiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgTkdYTG9nZ2VyIH0gZnJvbSAnbmd4LWxvZ2dlcic7XG5pbXBvcnQgeyBDb250ZW50QXBpIH0gZnJvbSAnLi4vLi4vLi4vY29yZS9kZWNvcmF0b3JzL2FwaSc7XG5pbXBvcnQgeyBVSSB9IGZyb20gJy4uLy4uLy4uL2NvcmUvZW51bXMvdWknO1xuaW1wb3J0IHsgTWVudUNvbXBvbmVudCB9IGZyb20gJy4uLy4uLy4uL25hdmlnYXRpb24vbWVudS9tZW51LmNvbXBvbmVudCc7XG5pbXBvcnQgeyBQb3BvdmVySW5zdGFuY2UgfSBmcm9tICcuLi8uLi8uLi9vdmVybGF5cy9wb3BvdmVyL3BvcG92ZXIuc2VydmljZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2pudC1hcHAtaGVhZGVyJyxcbiAgdGVtcGxhdGVVcmw6ICcuL2FwcC1oZWFkZXIuZW5jYXBzdWxhdGVkLmh0bWwnXG59KVxuZXhwb3J0IGNsYXNzIEFwcEhlYWRlckNvbXBvbmVudCB7XG5cbiAgQEhvc3RCaW5kaW5nKCdhdHRyLmhvc3QnKSByZWFkb25seSBob3N0ID0gJ2pudC1hcHAtaGVhZGVyLWhvc3QnO1xuXG4gIHVpID0gVUk7XG5cbiAgcmVmZXJlbmNlOiB7IHBvcG92ZXI6IFBvcG92ZXJJbnN0YW5jZSB9ID0ge3BvcG92ZXI6IG51bGx9O1xuXG4gIEBDb250ZW50QXBpKHtcbiAgICBzZWxlY3RvcjogJyNoZWFkZXJMb2dvVGVtcGxhdGUnLFxuICAgIGRlc2NyaXB0aW9uOiAnTG9nbyB0ZW1wbGF0ZSdcbiAgfSlcbiAgQENvbnRlbnRDaGlsZCgnaGVhZGVyTG9nb1RlbXBsYXRlJylcbiAgaGVhZGVyTG9nb1RlbXBsYXRlOiBUZW1wbGF0ZVJlZjxhbnk+O1xuXG4gIEBDb250ZW50QXBpKHtcbiAgICBzZWxlY3RvcjogJyNoZWFkZXJDb250ZW50VGVtcGxhdGUnLFxuICAgIGRlc2NyaXB0aW9uOiAnSGVhZGVyIGNvbnRlbnQgdGVtcGxhdGUnXG4gIH0pXG4gIEBDb250ZW50Q2hpbGQoJ2hlYWRlckNvbnRlbnRUZW1wbGF0ZScpXG4gIGNvbnRlbnRUZW1wbGF0ZTogVGVtcGxhdGVSZWY8YW55PjtcblxuICBAQ29udGVudENoaWxkKCdoZWFkZXJUb3BNZW51JylcbiAgbWVudTogTWVudUNvbXBvbmVudDtcblxuICBAQ29udGVudEFwaSh7XG4gICAgc2VsZWN0b3I6ICcjaGVhZGVyVXNlcmJhclRlbXBsYXRlJyxcbiAgICBkZXNjcmlwdGlvbjogJ1VzZXJiYXIgdGVtcGxhdGUnXG4gIH0pXG4gIEBDb250ZW50Q2hpbGQoJ2hlYWRlclVzZXJiYXJUZW1wbGF0ZScpXG4gIGhlYWRlclVzZXJiYXJUZW1wbGF0ZTogVGVtcGxhdGVSZWY8YW55PjtcblxuICBAQ29udGVudEFwaSh7XG4gICAgc2VsZWN0b3I6ICcjaGVhZGVyQWN0aW9uc1RlbXBsYXRlJyxcbiAgICBkZXNjcmlwdGlvbjogJ0FjdGlvbnMgdGVtcGxhdGUnXG4gIH0pXG4gIEBDb250ZW50Q2hpbGQoJ2hlYWRlckFjdGlvbnNUZW1wbGF0ZScpXG4gIGhlYWRlckFjdGlvbnNUZW1wbGF0ZTogVGVtcGxhdGVSZWY8YW55PjtcblxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIGxvZ2dlcjogTkdYTG9nZ2VyLFxuICAgICAgICAgICAgICBwdWJsaWMgY2Q6IENoYW5nZURldGVjdG9yUmVmKSB7XG4gIH1cblxuICBoaWRlKCkge1xuICAgIHRoaXMubG9nZ2VyLmRlYnVnKCdoaWRlIGhlYWRlciBkcm9wZG93bicpO1xuICAgIGlmICghIXRoaXMucmVmZXJlbmNlLnBvcG92ZXIpIHtcbiAgICAgIHRoaXMucmVmZXJlbmNlLnBvcG92ZXIuaGlkZSgpO1xuICAgICAgdGhpcy5yZWZlcmVuY2UucG9wb3ZlciA9IG51bGw7XG4gICAgfVxuICB9XG59XG4iXX0=