@junte/ui
Version:
Quality Angular UI components kit
69 lines • 8.48 kB
JavaScript
import { __decorate, __metadata } from "tslib";
import { ChangeDetectorRef, Component, ContentChild, HostBinding, Input, TemplateRef } from '@angular/core';
import { NGXLogger } from 'ngx-logger';
import { ContentApi, MethodApi } from '../../../../core/decorators/api';
import { UI } from '../../../../core/enums/ui';
import { BreakpointService } from '../../../responsive/breakpoint.service';
let AppHeaderUserbarComponent = class AppHeaderUserbarComponent {
constructor(breakpoint, logger, cd) {
this.breakpoint = breakpoint;
this.logger = logger;
this.cd = cd;
this.host = 'jnt-app-header-userbar-host';
this.ui = UI;
this.reference = { popover: null };
}
hide() {
this.logger.debug('hide userbar dropdown');
if (!!this.reference.popover) {
this.reference.popover.hide();
this.reference.popover = null;
}
}
};
AppHeaderUserbarComponent.ctorParameters = () => [
{ type: BreakpointService },
{ type: NGXLogger },
{ type: ChangeDetectorRef }
];
__decorate([
HostBinding('attr.host'),
__metadata("design:type", Object)
], AppHeaderUserbarComponent.prototype, "host", void 0);
__decorate([
ContentApi({
selector: '#userbarAvatarTemplate',
description: 'Userbar avatar template'
}),
ContentChild('userbarAvatarTemplate'),
__metadata("design:type", TemplateRef)
], AppHeaderUserbarComponent.prototype, "userbarAvatarTemplate", void 0);
__decorate([
ContentApi({
selector: '#userbarMenuTemplate',
description: 'Userbar menu template'
}),
ContentChild('userbarMenuTemplate'),
__metadata("design:type", TemplateRef)
], AppHeaderUserbarComponent.prototype, "userbarMenuTemplate", void 0);
__decorate([
Input(),
__metadata("design:type", Object)
], AppHeaderUserbarComponent.prototype, "context", void 0);
__decorate([
MethodApi({ description: 'Hide userbar dropdown' }),
__metadata("design:type", Function),
__metadata("design:paramtypes", []),
__metadata("design:returntype", void 0)
], AppHeaderUserbarComponent.prototype, "hide", null);
AppHeaderUserbarComponent = __decorate([
Component({
selector: 'jnt-app-header-userbar',
template: "<ng-template #content>\n <jnt-stack child-of=\"jnt-app-header-userbar-host\" [orientation]=\"ui.orientation.horizontal\"\n [align]=\"ui.align.center\">\n <ng-container *ngTemplateOutlet=\"userbarAvatarTemplate;context: {opened: !!reference.popover}\"></ng-container>\n <ng-content></ng-content>\n </jnt-stack>\n</ng-template>\n\n<ng-container *jntMinFor=\"ui.breakpoint.desktop\">\n <jnt-stack child-of=\"jnt-app-header-userbar-host\" data-user\n [jntPopover]=\"{\n contentTemplate: userMenuDropdownTemplate,\n trigger: ui.trigger.hover,\n placement: ui.placement.fixed,\n position: ui.position.rightBottom,\n padding: ui.gutter.small,\n minWidth: '200px',\n context: 'app-header-userbar-menu'\n }\"\n (attached)=\"reference.popover = $event; cd.detectChanges()\"\n (removed)=\"reference.popover = null; cd.detectChanges()\"\n [orientation]=\"ui.orientation.horizontal\"\n [align]=\"ui.align.center\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </jnt-stack>\n\n <ng-template #userMenuDropdownTemplate>\n <div child-of=\"jnt-app-header-userbar-host\" data-content>\n <ng-container *ngTemplateOutlet=\"userbarMenuTemplate;context: {hide: hide.bind(this)}\"></ng-container>\n </div>\n </ng-template>\n</ng-container>\n\n<ng-container *jntMaxFor=\"ui.breakpoint.tablet\">\n <jnt-stack child-of=\"jnt-app-header-userbar-host\" [align]=\"ui.align.stretch\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n <ng-container *ngTemplateOutlet=\"userbarMenuTemplate;context: {hide: context?.header.hide}\"></ng-container>\n </jnt-stack>\n</ng-container>"
}),
__metadata("design:paramtypes", [BreakpointService,
NGXLogger,
ChangeDetectorRef])
], AppHeaderUserbarComponent);
export { AppHeaderUserbarComponent };
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXBwLWhlYWRlci11c2VyYmFyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL0BqdW50ZS91aS8iLCJzb3VyY2VzIjpbImxpYi9sYXlvdXQvYXBwL2hlYWRlci91c2VyYmFyL2FwcC1oZWFkZXItdXNlcmJhci5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLFdBQVcsRUFBRSxLQUFLLEVBQUUsV0FBVyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQzVHLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxZQUFZLENBQUM7QUFDdkMsT0FBTyxFQUFFLFVBQVUsRUFBRSxTQUFTLEVBQUUsTUFBTSxpQ0FBaUMsQ0FBQztBQUN4RSxPQUFPLEVBQUUsRUFBRSxFQUFFLE1BQU0sMkJBQTJCLENBQUM7QUFFL0MsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sd0NBQXdDLENBQUM7QUFNM0UsSUFBYSx5QkFBeUIsR0FBdEMsTUFBYSx5QkFBeUI7SUF5QnBDLFlBQW1CLFVBQTZCLEVBQzVCLE1BQWlCLEVBQ2xCLEVBQXFCO1FBRnJCLGVBQVUsR0FBVixVQUFVLENBQW1CO1FBQzVCLFdBQU0sR0FBTixNQUFNLENBQVc7UUFDbEIsT0FBRSxHQUFGLEVBQUUsQ0FBbUI7UUF6QkwsU0FBSSxHQUFHLDZCQUE2QixDQUFDO1FBRXhFLE9BQUUsR0FBRyxFQUFFLENBQUM7UUFFUixjQUFTLEdBQWlDLEVBQUMsT0FBTyxFQUFFLElBQUksRUFBQyxDQUFDO0lBc0IxRCxDQUFDO0lBR0QsSUFBSTtRQUNGLElBQUksQ0FBQyxNQUFNLENBQUMsS0FBSyxDQUFDLHVCQUF1QixDQUFDLENBQUM7UUFDM0MsSUFBSSxDQUFDLENBQUMsSUFBSSxDQUFDLFNBQVMsQ0FBQyxPQUFPLEVBQUU7WUFDNUIsSUFBSSxDQUFDLFNBQVMsQ0FBQyxPQUFPLENBQUMsSUFBSSxFQUFFLENBQUM7WUFDOUIsSUFBSSxDQUFDLFNBQVMsQ0FBQyxPQUFPLEdBQUcsSUFBSSxDQUFDO1NBQy9CO0lBQ0gsQ0FBQztDQUVGLENBQUE7O1lBZGdDLGlCQUFpQjtZQUNwQixTQUFTO1lBQ2QsaUJBQWlCOztBQXpCZDtJQUF6QixXQUFXLENBQUMsV0FBVyxDQUFDOzt1REFBK0M7QUFXeEU7SUFMQyxVQUFVLENBQUM7UUFDVixRQUFRLEVBQUUsd0JBQXdCO1FBQ2xDLFdBQVcsRUFBRSx5QkFBeUI7S0FDdkMsQ0FBQztJQUNELFlBQVksQ0FBQyx1QkFBdUIsQ0FBQzs4QkFDZixXQUFXO3dFQUFNO0FBT3hDO0lBTEMsVUFBVSxDQUFDO1FBQ1YsUUFBUSxFQUFFLHNCQUFzQjtRQUNoQyxXQUFXLEVBQUUsdUJBQXVCO0tBQ3JDLENBQUM7SUFDRCxZQUFZLENBQUMscUJBQXFCLENBQUM7OEJBQ2YsV0FBVztzRUFBTTtBQUd0QztJQURDLEtBQUssRUFBRTs7MERBQ2dDO0FBUXhDO0lBREMsU0FBUyxDQUFDLEVBQUMsV0FBVyxFQUFFLHVCQUF1QixFQUFDLENBQUM7Ozs7cURBT2pEO0FBckNVLHlCQUF5QjtJQUpyQyxTQUFTLENBQUM7UUFDVCxRQUFRLEVBQUUsd0JBQXdCO1FBQ2xDLDh3REFBcUQ7S0FDdEQsQ0FBQztxQ0EwQitCLGlCQUFpQjtRQUNwQixTQUFTO1FBQ2QsaUJBQWlCO0dBM0I3Qix5QkFBeUIsQ0F1Q3JDO1NBdkNZLHlCQUF5QiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENoYW5nZURldGVjdG9yUmVmLCBDb21wb25lbnQsIENvbnRlbnRDaGlsZCwgSG9zdEJpbmRpbmcsIElucHV0LCBUZW1wbGF0ZVJlZiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgTkdYTG9nZ2VyIH0gZnJvbSAnbmd4LWxvZ2dlcic7XG5pbXBvcnQgeyBDb250ZW50QXBpLCBNZXRob2RBcGkgfSBmcm9tICcuLi8uLi8uLi8uLi9jb3JlL2RlY29yYXRvcnMvYXBpJztcbmltcG9ydCB7IFVJIH0gZnJvbSAnLi4vLi4vLi4vLi4vY29yZS9lbnVtcy91aSc7XG5pbXBvcnQgeyBQb3BvdmVySW5zdGFuY2UgfSBmcm9tICcuLi8uLi8uLi8uLi9vdmVybGF5cy9wb3BvdmVyL3BvcG92ZXIuc2VydmljZSc7XG5pbXBvcnQgeyBCcmVha3BvaW50U2VydmljZSB9IGZyb20gJy4uLy4uLy4uL3Jlc3BvbnNpdmUvYnJlYWtwb2ludC5zZXJ2aWNlJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnam50LWFwcC1oZWFkZXItdXNlcmJhcicsXG4gIHRlbXBsYXRlVXJsOiAnLi9hcHAtaGVhZGVyLXVzZXJiYXIuZW5jYXBzdWxhdGVkLmh0bWwnXG59KVxuZXhwb3J0IGNsYXNzIEFwcEhlYWRlclVzZXJiYXJDb21wb25lbnQge1xuXG4gIEBIb3N0QmluZGluZygnYXR0ci5ob3N0JykgcmVhZG9ubHkgaG9zdCA9ICdqbnQtYXBwLWhlYWRlci11c2VyYmFyLWhvc3QnO1xuXG4gIHVpID0gVUk7XG5cbiAgcmVmZXJlbmNlOiB7IHBvcG92ZXI6IFBvcG92ZXJJbnN0YW5jZSB9ID0ge3BvcG92ZXI6IG51bGx9O1xuXG4gIEBDb250ZW50QXBpKHtcbiAgICBzZWxlY3RvcjogJyN1c2VyYmFyQXZhdGFyVGVtcGxhdGUnLFxuICAgIGRlc2NyaXB0aW9uOiAnVXNlcmJhciBhdmF0YXIgdGVtcGxhdGUnXG4gIH0pXG4gIEBDb250ZW50Q2hpbGQoJ3VzZXJiYXJBdmF0YXJUZW1wbGF0ZScpXG4gIHVzZXJiYXJBdmF0YXJUZW1wbGF0ZTogVGVtcGxhdGVSZWY8YW55PjtcblxuICBAQ29udGVudEFwaSh7XG4gICAgc2VsZWN0b3I6ICcjdXNlcmJhck1lbnVUZW1wbGF0ZScsXG4gICAgZGVzY3JpcHRpb246ICdVc2VyYmFyIG1lbnUgdGVtcGxhdGUnXG4gIH0pXG4gIEBDb250ZW50Q2hpbGQoJ3VzZXJiYXJNZW51VGVtcGxhdGUnKVxuICB1c2VyYmFyTWVudVRlbXBsYXRlOiBUZW1wbGF0ZVJlZjxhbnk+O1xuXG4gIEBJbnB1dCgpXG4gIGNvbnRleHQ6IHsgaGVhZGVyOiB7IGhpZGU6IEZ1bmN0aW9uIH0gfTtcblxuICBjb25zdHJ1Y3RvcihwdWJsaWMgYnJlYWtwb2ludDogQnJlYWtwb2ludFNlcnZpY2UsXG4gICAgICAgICAgICAgIHByaXZhdGUgbG9nZ2VyOiBOR1hMb2dnZXIsXG4gICAgICAgICAgICAgIHB1YmxpYyBjZDogQ2hhbmdlRGV0ZWN0b3JSZWYpIHtcbiAgfVxuXG4gIEBNZXRob2RBcGkoe2Rlc2NyaXB0aW9uOiAnSGlkZSB1c2VyYmFyIGRyb3Bkb3duJ30pXG4gIGhpZGUoKSB7XG4gICAgdGhpcy5sb2dnZXIuZGVidWcoJ2hpZGUgdXNlcmJhciBkcm9wZG93bicpO1xuICAgIGlmICghIXRoaXMucmVmZXJlbmNlLnBvcG92ZXIpIHtcbiAgICAgIHRoaXMucmVmZXJlbmNlLnBvcG92ZXIuaGlkZSgpO1xuICAgICAgdGhpcy5yZWZlcmVuY2UucG9wb3ZlciA9IG51bGw7XG4gICAgfVxuICB9XG5cbn1cbiJdfQ==