guachos-user-panel
Version:
This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 9.1.9.
157 lines (151 loc) • 17.9 kB
JavaScript
import * as i0 from '@angular/core';
import { EventEmitter, Component, ViewChild, Output, Input, NgModule } from '@angular/core';
import * as i1 from '@angular/material/menu';
import { MatMenuModule } from '@angular/material/menu';
import * as i2 from '@angular/material/button';
import { MatButtonModule } from '@angular/material/button';
import * as i3 from '@angular/material/divider';
import { MatDividerModule } from '@angular/material/divider';
import * as i4 from '@angular/material/icon';
import { MatIconModule } from '@angular/material/icon';
import * as i5 from '@angular/flex-layout/flex';
import * as i6 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i7 from '@angular/flex-layout/extended';
import * as i8 from '@ngx-translate/core';
import { TranslateModule } from '@ngx-translate/core';
import { FlexLayoutModule } from '@angular/flex-layout';
class GuachosUserPanelComponent {
constructor(cdRef) {
this.cdRef = cdRef;
this.onEditProfile = new EventEmitter();
this.onLogout = new EventEmitter();
this.onLogoutAlternative = new EventEmitter();
this.onCustomButtonClick = new EventEmitter();
this._apiUrl = '';
this._imagePath = null;
this._loggedInUser = '';
this._options = {
showProfile: true,
showSecondaryLogout: true
};
}
set customButtons(value) {
this._customButtons = value;
}
get customButtons() {
return this._customButtons;
}
set options(value) {
this._options = value;
}
get options() {
return this._options;
}
set loggedInUser(value) {
this._loggedInUser = value;
}
get loggedInUser() {
return this._loggedInUser;
}
set apiUrl(value) {
this._apiUrl = value;
}
get apiUrl() {
return this._apiUrl;
}
set imagePath(value) {
this._imagePath = value;
}
get imagePath() {
return this._imagePath;
}
ngAfterViewInit() {
this.primaryColor = getComputedStyle(this.primary.nativeElement).color;
this.cdRef.detectChanges();
}
ngOnInit() {
}
editProfile() {
this.onEditProfile.emit(true);
}
logout() {
this.onLogout.emit(true);
}
logoutSecondarySession() {
this.onLogoutAlternative.emit(true);
}
clickCustomButton(button) {
this.onCustomButtonClick.emit(button);
}
}
GuachosUserPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: GuachosUserPanelComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
GuachosUserPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.1", type: GuachosUserPanelComponent, selector: "guachos-user-panel", inputs: { customButtons: "customButtons", options: "options", loggedInUser: "loggedInUser", apiUrl: "apiUrl", imagePath: "imagePath" }, outputs: { onEditProfile: "onEditProfile", onLogout: "onLogout", onLogoutAlternative: "onLogoutAlternative", onCustomButtonClick: "onCustomButtonClick" }, viewQueries: [{ propertyName: "primary", first: true, predicate: ["primary"], descendants: true }], ngImport: i0, template: "<div fxLayout=\"row\" fxLayoutAlign=\"end center\">\r\n <div #primary class=\"mat-button mat-primary\" style=\"display:none\"></div>\r\n <mat-menu #menu=\"matMenu\" class=\"my-mega-menu\">\r\n <div fxLayout=\"column\" fxLayoutAlign=\"center center\">\r\n <div class=\"large-default-avatar cursor-pointer\" fxLayout=\"row\" fxLayoutAlign=\"center center\"\r\n [ngStyle]=\"{'background-color': primaryColor}\"\r\n *ngIf=\"(!loggedInUser && ((!imagePath && !loggedInUser.image) || (imagePath && !loggedInUser[imagePath]))\r\n || (loggedInUser && ((!imagePath && !loggedInUser.image) || (imagePath && !loggedInUser[imagePath]))))\">\r\n <span style=\"text-transform: uppercase;\">{{loggedInUser.name[0]}}</span>\r\n </div>\r\n <img class=\"large-default-avatar cursor-pointer\"\r\n *ngIf=\"loggedInUser && ((!imagePath && loggedInUser.image) || (imagePath && loggedInUser[imagePath]))\"\r\n src=\"{{apiUrl+ (imagePath? loggedInUser[imagePath] :loggedInUser.image)}}\" alt=\"user\"\r\n onerror=\"onerror=null;src='assets/images/users/profile2.png';\">\r\n\r\n <div fxLayout=\"column\" fxLayoutAlign=\"center center\" class=\"cursor-pointer mt-3\">\r\n <span class=\"mat-body-2\">{{loggedInUser ? loggedInUser.name + ' ' + (loggedInUser.lastName || '') : ''}}</span>\r\n <span class=\"color-grey-800 mat-caption\">{{loggedInUser ? loggedInUser.username : ''}}</span>\r\n </div>\r\n\r\n <button mat-stroked-button style=\"border-radius: 2px;\" class=\"my-3\" *ngIf=\"options.showProfile\"\r\n (click)=\"editProfile()\">\r\n {{\"Gestiona tu perfil\" | translate}}\r\n </button>\r\n\r\n <div style=\"width: 100%;\">\r\n <mat-divider></mat-divider>\r\n </div>\r\n\r\n <div style=\"width: 100%;\" *ngFor=\"let item of customButtons\">\r\n <button mat-button (click)=\"clickCustomButton(item)\" style=\"width: 100%;\">\r\n <mat-icon [ngStyle]=\"{'color': primaryColor}\" style=\"margin-right: 8px;\">{{item.icon}}</mat-icon>\r\n <span [ngStyle]=\"{'color': primaryColor}\">{{item.name}}</span>\r\n </button>\r\n <mat-divider></mat-divider>\r\n </div>\r\n\r\n <button mat-stroked-button *ngIf=\"options.showSecondaryLogout\" (click)=\"logoutSecondarySession()\" class=\"my-3\">\r\n {{\"Cerrar la sesi\u00F3n alternativa\" | translate}}\r\n </button>\r\n\r\n <button mat-stroked-button (click)=\"logout()\" class=\"my-3\">\r\n {{\"Cerrar la sesi\u00F3n\" | translate}}\r\n </button>\r\n </div>\r\n </mat-menu>\r\n\r\n <div fxLayout=\"row\" class=\"py-1\" fxLayoutAlign=\"start center\">\r\n <div class=\"small-default-avatar cursor-pointer\" fxLayout=\"row\" fxLayoutAlign=\"center center\"\r\n [ngStyle]=\"{'color': primaryColor, 'background-color': 'white'}\"\r\n *ngIf=\"(!loggedInUser && ((!imagePath && !loggedInUser.image) || (imagePath && !loggedInUser[imagePath])) || (loggedInUser && ((!imagePath && !loggedInUser.image) || (imagePath && !loggedInUser[imagePath]))))\"\r\n [matMenuTriggerFor]=\"menu\">\r\n <span style=\"text-transform: uppercase;\">{{loggedInUser.name[0]}}</span>\r\n </div>\r\n <img class=\"ImageAvatar cursor-pointer\"\r\n *ngIf=\"loggedInUser && ((!imagePath && loggedInUser.image) || (imagePath && loggedInUser[imagePath]))\"\r\n [matMenuTriggerFor]=\"menu\" src=\"{{apiUrl+ (imagePath? loggedInUser[imagePath] :loggedInUser.image)}}\"\r\n alt=\"user\" onerror=\"onerror=null;src='../../../assets/images/users/profile2.png';\">\r\n </div>\r\n\r\n</div>\r\n", styles: [".m-3{margin:16px}.my-3{margin-top:16px;margin-bottom:16px}.mb-3{margin-bottom:16px}.mt-3{margin-top:16px}.mx-3{margin-left:16px;margin-right:16px}.ml-3{margin-left:16px}.mr-3{margin-right:16px}.p-3{padding:16px}.py-3{padding-top:16px;padding-bottom:16px}.pb-3{padding-bottom:16px}.pt-3{padding-top:16px}.px-3{padding-left:16px;padding-right:16px}.pl-3{padding-left:16px}.pr-3{padding-right:16px}.my-mega-menu{width:400px!important;max-width:400px!important;margin-top:16px}.large-default-avatar{color:#fff;width:100px;height:100px;border-radius:50%;text-align:center}.large-default-avatar span{font-size:60px}.small-default-avatar{color:#fff;width:32px;height:32px;border-radius:50%;text-align:center}.small-default-avatar span{font-size:20px}\n"], components: [{ type: i1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i3.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i5.DefaultLayoutDirective, selector: " [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md], [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md], [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm], [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i5.DefaultLayoutAlignDirective, selector: " [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md], [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md], [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm], [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i7.DefaultStyleDirective, selector: " [ngStyle], [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl], [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl], [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }], pipes: { "translate": i8.TranslatePipe } });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: GuachosUserPanelComponent, decorators: [{
type: Component,
args: [{ selector: 'guachos-user-panel', template: "<div fxLayout=\"row\" fxLayoutAlign=\"end center\">\r\n <div #primary class=\"mat-button mat-primary\" style=\"display:none\"></div>\r\n <mat-menu #menu=\"matMenu\" class=\"my-mega-menu\">\r\n <div fxLayout=\"column\" fxLayoutAlign=\"center center\">\r\n <div class=\"large-default-avatar cursor-pointer\" fxLayout=\"row\" fxLayoutAlign=\"center center\"\r\n [ngStyle]=\"{'background-color': primaryColor}\"\r\n *ngIf=\"(!loggedInUser && ((!imagePath && !loggedInUser.image) || (imagePath && !loggedInUser[imagePath]))\r\n || (loggedInUser && ((!imagePath && !loggedInUser.image) || (imagePath && !loggedInUser[imagePath]))))\">\r\n <span style=\"text-transform: uppercase;\">{{loggedInUser.name[0]}}</span>\r\n </div>\r\n <img class=\"large-default-avatar cursor-pointer\"\r\n *ngIf=\"loggedInUser && ((!imagePath && loggedInUser.image) || (imagePath && loggedInUser[imagePath]))\"\r\n src=\"{{apiUrl+ (imagePath? loggedInUser[imagePath] :loggedInUser.image)}}\" alt=\"user\"\r\n onerror=\"onerror=null;src='assets/images/users/profile2.png';\">\r\n\r\n <div fxLayout=\"column\" fxLayoutAlign=\"center center\" class=\"cursor-pointer mt-3\">\r\n <span class=\"mat-body-2\">{{loggedInUser ? loggedInUser.name + ' ' + (loggedInUser.lastName || '') : ''}}</span>\r\n <span class=\"color-grey-800 mat-caption\">{{loggedInUser ? loggedInUser.username : ''}}</span>\r\n </div>\r\n\r\n <button mat-stroked-button style=\"border-radius: 2px;\" class=\"my-3\" *ngIf=\"options.showProfile\"\r\n (click)=\"editProfile()\">\r\n {{\"Gestiona tu perfil\" | translate}}\r\n </button>\r\n\r\n <div style=\"width: 100%;\">\r\n <mat-divider></mat-divider>\r\n </div>\r\n\r\n <div style=\"width: 100%;\" *ngFor=\"let item of customButtons\">\r\n <button mat-button (click)=\"clickCustomButton(item)\" style=\"width: 100%;\">\r\n <mat-icon [ngStyle]=\"{'color': primaryColor}\" style=\"margin-right: 8px;\">{{item.icon}}</mat-icon>\r\n <span [ngStyle]=\"{'color': primaryColor}\">{{item.name}}</span>\r\n </button>\r\n <mat-divider></mat-divider>\r\n </div>\r\n\r\n <button mat-stroked-button *ngIf=\"options.showSecondaryLogout\" (click)=\"logoutSecondarySession()\" class=\"my-3\">\r\n {{\"Cerrar la sesi\u00F3n alternativa\" | translate}}\r\n </button>\r\n\r\n <button mat-stroked-button (click)=\"logout()\" class=\"my-3\">\r\n {{\"Cerrar la sesi\u00F3n\" | translate}}\r\n </button>\r\n </div>\r\n </mat-menu>\r\n\r\n <div fxLayout=\"row\" class=\"py-1\" fxLayoutAlign=\"start center\">\r\n <div class=\"small-default-avatar cursor-pointer\" fxLayout=\"row\" fxLayoutAlign=\"center center\"\r\n [ngStyle]=\"{'color': primaryColor, 'background-color': 'white'}\"\r\n *ngIf=\"(!loggedInUser && ((!imagePath && !loggedInUser.image) || (imagePath && !loggedInUser[imagePath])) || (loggedInUser && ((!imagePath && !loggedInUser.image) || (imagePath && !loggedInUser[imagePath]))))\"\r\n [matMenuTriggerFor]=\"menu\">\r\n <span style=\"text-transform: uppercase;\">{{loggedInUser.name[0]}}</span>\r\n </div>\r\n <img class=\"ImageAvatar cursor-pointer\"\r\n *ngIf=\"loggedInUser && ((!imagePath && loggedInUser.image) || (imagePath && loggedInUser[imagePath]))\"\r\n [matMenuTriggerFor]=\"menu\" src=\"{{apiUrl+ (imagePath? loggedInUser[imagePath] :loggedInUser.image)}}\"\r\n alt=\"user\" onerror=\"onerror=null;src='../../../assets/images/users/profile2.png';\">\r\n </div>\r\n\r\n</div>\r\n", styles: [".m-3{margin:16px}.my-3{margin-top:16px;margin-bottom:16px}.mb-3{margin-bottom:16px}.mt-3{margin-top:16px}.mx-3{margin-left:16px;margin-right:16px}.ml-3{margin-left:16px}.mr-3{margin-right:16px}.p-3{padding:16px}.py-3{padding-top:16px;padding-bottom:16px}.pb-3{padding-bottom:16px}.pt-3{padding-top:16px}.px-3{padding-left:16px;padding-right:16px}.pl-3{padding-left:16px}.pr-3{padding-right:16px}.my-mega-menu{width:400px!important;max-width:400px!important;margin-top:16px}.large-default-avatar{color:#fff;width:100px;height:100px;border-radius:50%;text-align:center}.large-default-avatar span{font-size:60px}.small-default-avatar{color:#fff;width:32px;height:32px;border-radius:50%;text-align:center}.small-default-avatar span{font-size:20px}\n"] }]
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { primary: [{
type: ViewChild,
args: ['primary']
}], onEditProfile: [{
type: Output
}], onLogout: [{
type: Output
}], onLogoutAlternative: [{
type: Output
}], onCustomButtonClick: [{
type: Output
}], customButtons: [{
type: Input
}], options: [{
type: Input
}], loggedInUser: [{
type: Input
}], apiUrl: [{
type: Input
}], imagePath: [{
type: Input
}] } });
class GuachosUserPanelModule {
}
GuachosUserPanelModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: GuachosUserPanelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
GuachosUserPanelModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: GuachosUserPanelModule, declarations: [GuachosUserPanelComponent], imports: [CommonModule,
FlexLayoutModule,
MatDividerModule,
MatMenuModule,
MatIconModule,
MatButtonModule,
TranslateModule], exports: [GuachosUserPanelComponent] });
GuachosUserPanelModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: GuachosUserPanelModule, imports: [[
CommonModule,
FlexLayoutModule,
MatDividerModule,
MatMenuModule,
MatIconModule,
MatButtonModule,
TranslateModule
]] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: GuachosUserPanelModule, decorators: [{
type: NgModule,
args: [{
declarations: [GuachosUserPanelComponent],
imports: [
CommonModule,
FlexLayoutModule,
MatDividerModule,
MatMenuModule,
MatIconModule,
MatButtonModule,
TranslateModule
],
exports: [GuachosUserPanelComponent]
}]
}] });
/*
* Public API Surface of guachos-user-panel
*/
/**
* Generated bundle index. Do not edit.
*/
export { GuachosUserPanelComponent, GuachosUserPanelModule };
//# sourceMappingURL=guachos-user-panel.mjs.map