@junte/ui
Version:
Quality Angular UI components kit
60 lines • 9.65 kB
JavaScript
import { __decorate, __metadata } from "tslib";
import { ChangeDetectorRef, Component, ContentChild, HostBinding, TemplateRef } from '@angular/core';
import { NGXLogger } from 'ngx-logger';
import { UI } from '../../../core/enums/ui';
import { MenuComponent } from '../../../navigation/menu/menu.component';
var LpHeaderComponent = /** @class */ (function () {
function LpHeaderComponent(logger, cd) {
this.logger = logger;
this.cd = cd;
this.host = 'jnt-lp-header-host';
this.ui = UI;
this.reference = { popover: null };
}
LpHeaderComponent.prototype.hide = function () {
this.logger.debug('hide header dropdown');
if (!!this.reference.popover) {
this.reference.popover.hide();
this.reference.popover = null;
}
};
LpHeaderComponent.ctorParameters = function () { return [
{ type: NGXLogger },
{ type: ChangeDetectorRef }
]; };
__decorate([
HostBinding('attr.host'),
__metadata("design:type", Object)
], LpHeaderComponent.prototype, "host", void 0);
__decorate([
ContentChild('headerLogoTemplate'),
__metadata("design:type", TemplateRef)
], LpHeaderComponent.prototype, "headerLogoTemplate", void 0);
__decorate([
ContentChild('contentTemplate'),
__metadata("design:type", TemplateRef)
], LpHeaderComponent.prototype, "contentTemplate", void 0);
__decorate([
ContentChild(MenuComponent),
__metadata("design:type", MenuComponent)
], LpHeaderComponent.prototype, "menu", void 0);
__decorate([
ContentChild('headerUserbarTemplate'),
__metadata("design:type", TemplateRef)
], LpHeaderComponent.prototype, "headerUserbarTemplate", void 0);
__decorate([
ContentChild('headerActionsTemplate'),
__metadata("design:type", TemplateRef)
], LpHeaderComponent.prototype, "headerActionsTemplate", void 0);
LpHeaderComponent = __decorate([
Component({
selector: 'jnt-lp-header',
template: "<ng-template #menuTemplate let-menu=\"menu\" let-orientation=\"orientation\" let-spacing=\"spacing\">\n <div child-of=\"jnt-lp-header-host\" data-menu *ngIf=\"!!menu\">\n <jnt-menu child-of=\"jnt-lp-header-host\" [orientation]=\"orientation\"\n [spacing]=\"spacing\">\n <jnt-menu-item child-of=\"jnt-lp-header-host\" *ngFor=\"let item of menu.items\"\n [title]=\"item.title\"\n [icon]=\"item.icon\"\n [matching]=\"item.matching\"\n [target]=\"item.target\"\n [link]=\"item.link\"\n [disabled]=\"item.disabled\">\n </jnt-menu-item>\n </jnt-menu>\n </div>\n</ng-template>\n\n<ng-container *jntMinFor=\"ui.breakpoint.desktop\">\n <jnt-container child-of=\"jnt-lp-header-host\" data-container data-desktop>\n <div child-of=\"jnt-lp-header-host\" data-logo *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-lp-header-host\" *ngIf=\"!!contentTemplate || !!headerActionsTemplate || !!headerUserbarTemplate\"\n data-actions\n [orientation]=\"ui.orientation.horizontal\"\n [gutter]=\"ui.gutter.small\"\n [align]=\"ui.align.stretch\">\n <div child-of=\"jnt-lp-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 </jnt-container>\n</ng-container>\n\n<ng-container *jntMaxFor=\"ui.breakpoint.tablet\">\n <jnt-container child-of=\"jnt-lp-header-host\" data-container data-tablet>\n <div child-of=\"jnt-lp-header-host\" data-logo *ngIf=\"headerLogoTemplate\">\n <ng-container *ngTemplateOutlet=\"headerLogoTemplate\"></ng-container>\n </div>\n <jnt-stack child-of=\"jnt-lp-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-lp-header-host\" data-burger\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 }\"\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-lp-header-host\" [align]=\"ui.align.stretch\">\n <ng-container *ngTemplateOutlet=\"headerUserbarTemplate;\n context: {hide: this.hide.bind(this)}\">\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-lp-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 </jnt-container>\n</ng-container>"
}),
__metadata("design:paramtypes", [NGXLogger,
ChangeDetectorRef])
], LpHeaderComponent);
return LpHeaderComponent;
}());
export { LpHeaderComponent };
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibHAtaGVhZGVyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL0BqdW50ZS91aS8iLCJzb3VyY2VzIjpbImxpYi9sYXlvdXQvbHAvaGVhZGVyL2xwLWhlYWRlci5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLFdBQVcsRUFBRSxXQUFXLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDckcsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLFlBQVksQ0FBQztBQUN2QyxPQUFPLEVBQUUsRUFBRSxFQUFFLE1BQU0sd0JBQXdCLENBQUM7QUFDNUMsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLHlDQUF5QyxDQUFDO0FBT3hFO0lBdUJFLDJCQUFvQixNQUFpQixFQUNsQixFQUFxQjtRQURwQixXQUFNLEdBQU4sTUFBTSxDQUFXO1FBQ2xCLE9BQUUsR0FBRixFQUFFLENBQW1CO1FBdEJMLFNBQUksR0FBRyxvQkFBb0IsQ0FBQztRQUUvRCxPQUFFLEdBQUcsRUFBRSxDQUFDO1FBRVIsY0FBUyxHQUFpQyxFQUFDLE9BQU8sRUFBRSxJQUFJLEVBQUMsQ0FBQztJQW1CMUQsQ0FBQztJQUVELGdDQUFJLEdBQUo7UUFDRSxJQUFJLENBQUMsTUFBTSxDQUFDLEtBQUssQ0FBQyxzQkFBc0IsQ0FBQyxDQUFDO1FBQzFDLElBQUksQ0FBQyxDQUFDLElBQUksQ0FBQyxTQUFTLENBQUMsT0FBTyxFQUFFO1lBQzVCLElBQUksQ0FBQyxTQUFTLENBQUMsT0FBTyxDQUFDLElBQUksRUFBRSxDQUFDO1lBQzlCLElBQUksQ0FBQyxTQUFTLENBQUMsT0FBTyxHQUFHLElBQUksQ0FBQztTQUMvQjtJQUNILENBQUM7O2dCQVYyQixTQUFTO2dCQUNkLGlCQUFpQjs7SUF0QmQ7UUFBekIsV0FBVyxDQUFDLFdBQVcsQ0FBQzs7bURBQXNDO0lBTy9EO1FBREMsWUFBWSxDQUFDLG9CQUFvQixDQUFDO2tDQUNmLFdBQVc7aUVBQU07SUFHckM7UUFEQyxZQUFZLENBQUMsaUJBQWlCLENBQUM7a0NBQ2YsV0FBVzs4REFBTTtJQUdsQztRQURDLFlBQVksQ0FBQyxhQUFhLENBQUM7a0NBQ3RCLGFBQWE7bURBQUM7SUFHcEI7UUFEQyxZQUFZLENBQUMsdUJBQXVCLENBQUM7a0NBQ2YsV0FBVztvRUFBTTtJQUd4QztRQURDLFlBQVksQ0FBQyx1QkFBdUIsQ0FBQztrQ0FDZixXQUFXO29FQUFNO0lBckI3QixpQkFBaUI7UUFKN0IsU0FBUyxDQUFDO1lBQ1QsUUFBUSxFQUFFLGVBQWU7WUFDekIsaXlIQUE0QztTQUM3QyxDQUFDO3lDQXdCNEIsU0FBUztZQUNkLGlCQUFpQjtPQXhCN0IsaUJBQWlCLENBa0M3QjtJQUFELHdCQUFDO0NBQUEsQUFsQ0QsSUFrQ0M7U0FsQ1ksaUJBQWlCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ2hhbmdlRGV0ZWN0b3JSZWYsIENvbXBvbmVudCwgQ29udGVudENoaWxkLCBIb3N0QmluZGluZywgVGVtcGxhdGVSZWYgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IE5HWExvZ2dlciB9IGZyb20gJ25neC1sb2dnZXInO1xuaW1wb3J0IHsgVUkgfSBmcm9tICcuLi8uLi8uLi9jb3JlL2VudW1zL3VpJztcbmltcG9ydCB7IE1lbnVDb21wb25lbnQgfSBmcm9tICcuLi8uLi8uLi9uYXZpZ2F0aW9uL21lbnUvbWVudS5jb21wb25lbnQnO1xuaW1wb3J0IHsgUG9wb3Zlckluc3RhbmNlIH0gZnJvbSAnLi4vLi4vLi4vb3ZlcmxheXMvcG9wb3Zlci9wb3BvdmVyLnNlcnZpY2UnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdqbnQtbHAtaGVhZGVyJyxcbiAgdGVtcGxhdGVVcmw6ICcuL2xwLWhlYWRlci5lbmNhcHN1bGF0ZWQuaHRtbCdcbn0pXG5leHBvcnQgY2xhc3MgTHBIZWFkZXJDb21wb25lbnQge1xuXG4gIEBIb3N0QmluZGluZygnYXR0ci5ob3N0JykgcmVhZG9ubHkgaG9zdCA9ICdqbnQtbHAtaGVhZGVyLWhvc3QnO1xuXG4gIHVpID0gVUk7XG5cbiAgcmVmZXJlbmNlOiB7IHBvcG92ZXI6IFBvcG92ZXJJbnN0YW5jZSB9ID0ge3BvcG92ZXI6IG51bGx9O1xuXG4gIEBDb250ZW50Q2hpbGQoJ2hlYWRlckxvZ29UZW1wbGF0ZScpXG4gIGhlYWRlckxvZ29UZW1wbGF0ZTogVGVtcGxhdGVSZWY8YW55PjtcblxuICBAQ29udGVudENoaWxkKCdjb250ZW50VGVtcGxhdGUnKVxuICBjb250ZW50VGVtcGxhdGU6IFRlbXBsYXRlUmVmPGFueT47XG5cbiAgQENvbnRlbnRDaGlsZChNZW51Q29tcG9uZW50KVxuICBtZW51OiBNZW51Q29tcG9uZW50O1xuXG4gIEBDb250ZW50Q2hpbGQoJ2hlYWRlclVzZXJiYXJUZW1wbGF0ZScpXG4gIGhlYWRlclVzZXJiYXJUZW1wbGF0ZTogVGVtcGxhdGVSZWY8YW55PjtcblxuICBAQ29udGVudENoaWxkKCdoZWFkZXJBY3Rpb25zVGVtcGxhdGUnKVxuICBoZWFkZXJBY3Rpb25zVGVtcGxhdGU6IFRlbXBsYXRlUmVmPGFueT47XG5cbiAgY29uc3RydWN0b3IocHJpdmF0ZSBsb2dnZXI6IE5HWExvZ2dlcixcbiAgICAgICAgICAgICAgcHVibGljIGNkOiBDaGFuZ2VEZXRlY3RvclJlZikge1xuICB9XG5cbiAgaGlkZSgpIHtcbiAgICB0aGlzLmxvZ2dlci5kZWJ1ZygnaGlkZSBoZWFkZXIgZHJvcGRvd24nKTtcbiAgICBpZiAoISF0aGlzLnJlZmVyZW5jZS5wb3BvdmVyKSB7XG4gICAgICB0aGlzLnJlZmVyZW5jZS5wb3BvdmVyLmhpZGUoKTtcbiAgICAgIHRoaXMucmVmZXJlbmNlLnBvcG92ZXIgPSBudWxsO1xuICAgIH1cbiAgfVxufVxuIl19