@junte/ui
Version:
Quality Angular UI components kit
59 lines • 9.41 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';
let LpHeaderComponent = class LpHeaderComponent {
constructor(logger, cd) {
this.logger = logger;
this.cd = cd;
this.host = 'jnt-lp-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;
}
}
};
LpHeaderComponent.ctorParameters = () => [
{ 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);
export { LpHeaderComponent };
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibHAtaGVhZGVyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL0BqdW50ZS91aS8iLCJzb3VyY2VzIjpbImxpYi9sYXlvdXQvbHAvaGVhZGVyL2xwLWhlYWRlci5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLFdBQVcsRUFBRSxXQUFXLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDckcsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLFlBQVksQ0FBQztBQUN2QyxPQUFPLEVBQUUsRUFBRSxFQUFFLE1BQU0sd0JBQXdCLENBQUM7QUFDNUMsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLHlDQUF5QyxDQUFDO0FBT3hFLElBQWEsaUJBQWlCLEdBQTlCLE1BQWEsaUJBQWlCO0lBdUI1QixZQUFvQixNQUFpQixFQUNsQixFQUFxQjtRQURwQixXQUFNLEdBQU4sTUFBTSxDQUFXO1FBQ2xCLE9BQUUsR0FBRixFQUFFLENBQW1CO1FBdEJMLFNBQUksR0FBRyxvQkFBb0IsQ0FBQztRQUUvRCxPQUFFLEdBQUcsRUFBRSxDQUFDO1FBRVIsY0FBUyxHQUFpQyxFQUFDLE9BQU8sRUFBRSxJQUFJLEVBQUMsQ0FBQztJQW1CMUQsQ0FBQztJQUVELElBQUk7UUFDRixJQUFJLENBQUMsTUFBTSxDQUFDLEtBQUssQ0FBQyxzQkFBc0IsQ0FBQyxDQUFDO1FBQzFDLElBQUksQ0FBQyxDQUFDLElBQUksQ0FBQyxTQUFTLENBQUMsT0FBTyxFQUFFO1lBQzVCLElBQUksQ0FBQyxTQUFTLENBQUMsT0FBTyxDQUFDLElBQUksRUFBRSxDQUFDO1lBQzlCLElBQUksQ0FBQyxTQUFTLENBQUMsT0FBTyxHQUFHLElBQUksQ0FBQztTQUMvQjtJQUNILENBQUM7Q0FDRixDQUFBOztZQVg2QixTQUFTO1lBQ2QsaUJBQWlCOztBQXRCZDtJQUF6QixXQUFXLENBQUMsV0FBVyxDQUFDOzsrQ0FBc0M7QUFPL0Q7SUFEQyxZQUFZLENBQUMsb0JBQW9CLENBQUM7OEJBQ2YsV0FBVzs2REFBTTtBQUdyQztJQURDLFlBQVksQ0FBQyxpQkFBaUIsQ0FBQzs4QkFDZixXQUFXOzBEQUFNO0FBR2xDO0lBREMsWUFBWSxDQUFDLGFBQWEsQ0FBQzs4QkFDdEIsYUFBYTsrQ0FBQztBQUdwQjtJQURDLFlBQVksQ0FBQyx1QkFBdUIsQ0FBQzs4QkFDZixXQUFXO2dFQUFNO0FBR3hDO0lBREMsWUFBWSxDQUFDLHVCQUF1QixDQUFDOzhCQUNmLFdBQVc7Z0VBQU07QUFyQjdCLGlCQUFpQjtJQUo3QixTQUFTLENBQUM7UUFDVCxRQUFRLEVBQUUsZUFBZTtRQUN6QixpeUhBQTRDO0tBQzdDLENBQUM7cUNBd0I0QixTQUFTO1FBQ2QsaUJBQWlCO0dBeEI3QixpQkFBaUIsQ0FrQzdCO1NBbENZLGlCQUFpQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENoYW5nZURldGVjdG9yUmVmLCBDb21wb25lbnQsIENvbnRlbnRDaGlsZCwgSG9zdEJpbmRpbmcsIFRlbXBsYXRlUmVmIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBOR1hMb2dnZXIgfSBmcm9tICduZ3gtbG9nZ2VyJztcbmltcG9ydCB7IFVJIH0gZnJvbSAnLi4vLi4vLi4vY29yZS9lbnVtcy91aSc7XG5pbXBvcnQgeyBNZW51Q29tcG9uZW50IH0gZnJvbSAnLi4vLi4vLi4vbmF2aWdhdGlvbi9tZW51L21lbnUuY29tcG9uZW50JztcbmltcG9ydCB7IFBvcG92ZXJJbnN0YW5jZSB9IGZyb20gJy4uLy4uLy4uL292ZXJsYXlzL3BvcG92ZXIvcG9wb3Zlci5zZXJ2aWNlJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnam50LWxwLWhlYWRlcicsXG4gIHRlbXBsYXRlVXJsOiAnLi9scC1oZWFkZXIuZW5jYXBzdWxhdGVkLmh0bWwnXG59KVxuZXhwb3J0IGNsYXNzIExwSGVhZGVyQ29tcG9uZW50IHtcblxuICBASG9zdEJpbmRpbmcoJ2F0dHIuaG9zdCcpIHJlYWRvbmx5IGhvc3QgPSAnam50LWxwLWhlYWRlci1ob3N0JztcblxuICB1aSA9IFVJO1xuXG4gIHJlZmVyZW5jZTogeyBwb3BvdmVyOiBQb3BvdmVySW5zdGFuY2UgfSA9IHtwb3BvdmVyOiBudWxsfTtcblxuICBAQ29udGVudENoaWxkKCdoZWFkZXJMb2dvVGVtcGxhdGUnKVxuICBoZWFkZXJMb2dvVGVtcGxhdGU6IFRlbXBsYXRlUmVmPGFueT47XG5cbiAgQENvbnRlbnRDaGlsZCgnY29udGVudFRlbXBsYXRlJylcbiAgY29udGVudFRlbXBsYXRlOiBUZW1wbGF0ZVJlZjxhbnk+O1xuXG4gIEBDb250ZW50Q2hpbGQoTWVudUNvbXBvbmVudClcbiAgbWVudTogTWVudUNvbXBvbmVudDtcblxuICBAQ29udGVudENoaWxkKCdoZWFkZXJVc2VyYmFyVGVtcGxhdGUnKVxuICBoZWFkZXJVc2VyYmFyVGVtcGxhdGU6IFRlbXBsYXRlUmVmPGFueT47XG5cbiAgQENvbnRlbnRDaGlsZCgnaGVhZGVyQWN0aW9uc1RlbXBsYXRlJylcbiAgaGVhZGVyQWN0aW9uc1RlbXBsYXRlOiBUZW1wbGF0ZVJlZjxhbnk+O1xuXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgbG9nZ2VyOiBOR1hMb2dnZXIsXG4gICAgICAgICAgICAgIHB1YmxpYyBjZDogQ2hhbmdlRGV0ZWN0b3JSZWYpIHtcbiAgfVxuXG4gIGhpZGUoKSB7XG4gICAgdGhpcy5sb2dnZXIuZGVidWcoJ2hpZGUgaGVhZGVyIGRyb3Bkb3duJyk7XG4gICAgaWYgKCEhdGhpcy5yZWZlcmVuY2UucG9wb3Zlcikge1xuICAgICAgdGhpcy5yZWZlcmVuY2UucG9wb3Zlci5oaWRlKCk7XG4gICAgICB0aGlzLnJlZmVyZW5jZS5wb3BvdmVyID0gbnVsbDtcbiAgICB9XG4gIH1cbn1cbiJdfQ==