@lucasferreiralsf/angular-frontend-library
Version:
This is a set of custom angular components to easy the development of any Subway frontend project.
153 lines • 13.9 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
import { Component, ViewChild, ViewContainerRef, Input, } from '@angular/core';
import { Overlay, CdkOverlayOrigin, OverlayConfig } from '@angular/cdk/overlay';
import { TemplatePortalDirective } from '@angular/cdk/portal';
import { trigger, transition, useAnimation } from '@angular/animations';
import { fadeInUp, fadeOut } from 'ng-animate';
import { PopoverService } from './popover.service';
export class PopoverComponent {
/**
* @param {?} overlay
* @param {?} viewContainerRef
* @param {?} popoverService
*/
constructor(overlay, viewContainerRef, popoverService) {
this.overlay = overlay;
this.viewContainerRef = viewContainerRef;
this.popoverService = popoverService;
this.positions = [
{
originX: 'start',
originY: 'top',
overlayX: 'center',
overlayY: 'bottom'
}
];
}
/**
* @return {?}
*/
ngAfterViewInit() {
this.strategy = this.overlay
.position()
.flexibleConnectedTo(this.popoverOrigin.elementRef)
.withPositions(this.positions)
.withTransformOriginOn('#action-dropdown-button');
this.config = new OverlayConfig({
positionStrategy: this.strategy,
hasBackdrop: true,
backdropClass: 'cdk-overlay-transparent-backdrop'
});
this.overlayRef = this.overlay.create(this.config);
}
/**
* @return {?}
*/
openPopover() {
this.overlayRef.backdropClick().subscribe((/**
* @return {?}
*/
() => {
this.overlayRef.detach();
}));
this.popoverService.emitirCloseEvent.subscribe((/**
* @return {?}
*/
() => {
this.overlayRef.detach();
}));
this.overlayRef.attach(this.popoverContentTemplate);
}
/**
* @param {?} event
* @return {?}
*/
clickActionButton(event) {
this.popoverService.buttonClickEmit(event.toLowerCase(), this.elementId);
this.popoverService.closeDropdown();
}
}
PopoverComponent.decorators = [
{ type: Component, args: [{
selector: 'sb-popover',
template: "<button\r\n mat-icon-button\r\n type=\"button\"\r\n id=\"action-dropdown-button\"\r\n cdk-overlay-origin\r\n (click)=\"openPopover()\"\r\n>\r\n <mat-icon>delete</mat-icon>\r\n</button>\r\n<ng-template cdk-portal #popoverContentTemplate=\"cdkPortal\">\r\n <div\r\n @flipInOut\r\n fxLayout=\"column\"\r\n fxLayoutAlign=\"space-between\"\r\n class=\"div-container-popover mat-elevation-z4 arrowBox\"\r\n >\r\n <div fxLayout>\r\n <div class=\"mat-body\">{{ popoverTitle }}</div>\r\n </div>\r\n <div fxLayout class=\"p-10\">\r\n <div class=\"mat-caption\">{{ popoverDescription }}</div>\r\n </div>\r\n <div fxLayout fxLayoutAlign=\"flex-end\" fxLayoutGap=\"5px\">\r\n <button\r\n mat-flat-button\r\n class=\"button-popover\"\r\n (click)=\"clickActionButton('canceldelete')\"\r\n >\r\n Cancelar\r\n </button>\r\n <button\r\n mat-flat-button\r\n color=\"primary\"\r\n class=\"button-popover\"\r\n (click)=\"clickActionButton('confirmdelete')\"\r\n >\r\n Confirmar\r\n </button>\r\n </div>\r\n </div>\r\n</ng-template>\r\n",
animations: [
trigger('flipInOut', [
transition('void => *', useAnimation(fadeInUp, {
params: { timing: 0.3, delay: 0, a: '10px', b: '0' }
})),
transition('* => void', useAnimation(fadeOut, {
params: { timing: 0.3, delay: 0 }
}))
])
],
styles: [".button-popover{font-size:.7em;height:20px;line-height:20px;padding:0}.mat-body{font-weight:500}.arrowBox{min-width:200px;min-height:30px;background-color:#fff;border-radius:5px;position:relative;padding:10px;font-family:Roboto,sans-serif;font-size:14px;line-height:22px;text-align:center;margin:0 0 7px 30px}.arrowBox:after{content:' ';width:0;height:0;border-top:10px solid #fff;border-left:10px solid transparent;border-bottom:10px solid transparent;border-right:10px solid #fff;border-radius:0 30%;position:absolute;left:50%;top:100%;margin:-10px 0 0 -5px;-webkit-transform:rotate(135deg);transform:rotate(135deg);box-shadow:3px -4px 5px -1px rgba(0,0,0,.26)}#player{z-index:-1;position:relative;top:-16px;left:114px}#inner{-webkit-transform:rotate(45deg);transform:rotate(45deg);background-color:#fff;width:20px;height:20px;top:2px;left:-9px;position:relative;border-radius:6px}#outer{position:absolute;width:16px;height:25px;overflow:hidden;-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}"]
}] }
];
/** @nocollapse */
PopoverComponent.ctorParameters = () => [
{ type: Overlay },
{ type: ViewContainerRef },
{ type: PopoverService }
];
PopoverComponent.propDecorators = {
popoverTitle: [{ type: Input }],
popoverDescription: [{ type: Input }],
elementId: [{ type: Input }],
popoverOrigin: [{ type: ViewChild, args: [CdkOverlayOrigin,] }],
popoverContentTemplate: [{ type: ViewChild, args: ['popoverContentTemplate',] }]
};
if (false) {
/**
* @type {?}
* @private
*/
PopoverComponent.prototype.strategy;
/**
* @type {?}
* @private
*/
PopoverComponent.prototype.config;
/**
* @type {?}
* @private
*/
PopoverComponent.prototype.overlayRef;
/** @type {?} */
PopoverComponent.prototype.popoverTitle;
/** @type {?} */
PopoverComponent.prototype.popoverDescription;
/** @type {?} */
PopoverComponent.prototype.elementId;
/**
* @type {?}
* @private
*/
PopoverComponent.prototype.popoverOrigin;
/**
* @type {?}
* @private
*/
PopoverComponent.prototype.popoverContentTemplate;
/**
* @type {?}
* @private
*/
PopoverComponent.prototype.positions;
/**
* @type {?}
* @private
*/
PopoverComponent.prototype.overlay;
/** @type {?} */
PopoverComponent.prototype.viewContainerRef;
/**
* @type {?}
* @private
*/
PopoverComponent.prototype.popoverService;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicG9wb3Zlci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9AbHVjYXNmZXJyZWlyYWxzZi9hbmd1bGFyLWZyb250ZW5kLWxpYnJhcnkvIiwic291cmNlcyI6WyJsaWIvZGF0YS10YWJsZS9wb3BvdmVyL3BvcG92ZXIuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7QUFBQSxPQUFPLEVBQ0wsU0FBUyxFQUNULFNBQVMsRUFDVCxnQkFBZ0IsRUFDaEIsS0FBSyxHQUVOLE1BQU0sZUFBZSxDQUFDO0FBRXZCLE9BQU8sRUFDTCxPQUFPLEVBQ1AsZ0JBQWdCLEVBQ2hCLGFBQWEsRUFHZCxNQUFNLHNCQUFzQixDQUFDO0FBQzlCLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxNQUFNLHFCQUFxQixDQUFDO0FBQzlELE9BQU8sRUFBRSxPQUFPLEVBQUUsVUFBVSxFQUFFLFlBQVksRUFBRSxNQUFNLHFCQUFxQixDQUFDO0FBQ3hFLE9BQU8sRUFBRSxRQUFRLEVBQUUsT0FBTyxFQUFFLE1BQU0sWUFBWSxDQUFDO0FBQy9DLE9BQU8sRUFBRSxjQUFjLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQztBQXVCbkQsTUFBTSxPQUFPLGdCQUFnQjs7Ozs7O0lBcUIzQixZQUNVLE9BQWdCLEVBQ2pCLGdCQUFrQyxFQUNqQyxjQUE4QjtRQUY5QixZQUFPLEdBQVAsT0FBTyxDQUFTO1FBQ2pCLHFCQUFnQixHQUFoQixnQkFBZ0IsQ0FBa0I7UUFDakMsbUJBQWMsR0FBZCxjQUFjLENBQWdCO1FBWmhDLGNBQVMsR0FBd0I7WUFDdkM7Z0JBQ0UsT0FBTyxFQUFFLE9BQU87Z0JBQ2hCLE9BQU8sRUFBRSxLQUFLO2dCQUNkLFFBQVEsRUFBRSxRQUFRO2dCQUNsQixRQUFRLEVBQUUsUUFBUTthQUNuQjtTQUNGLENBQUM7SUFNQyxDQUFDOzs7O0lBRUosZUFBZTtRQUNiLElBQUksQ0FBQyxRQUFRLEdBQUcsSUFBSSxDQUFDLE9BQU87YUFDekIsUUFBUSxFQUFFO2FBQ1YsbUJBQW1CLENBQUMsSUFBSSxDQUFDLGFBQWEsQ0FBQyxVQUFVLENBQUM7YUFDbEQsYUFBYSxDQUFDLElBQUksQ0FBQyxTQUFTLENBQUM7YUFDN0IscUJBQXFCLENBQUMseUJBQXlCLENBQUMsQ0FBQztRQUVwRCxJQUFJLENBQUMsTUFBTSxHQUFHLElBQUksYUFBYSxDQUFDO1lBQzlCLGdCQUFnQixFQUFFLElBQUksQ0FBQyxRQUFRO1lBQy9CLFdBQVcsRUFBRSxJQUFJO1lBQ2pCLGFBQWEsRUFBRSxrQ0FBa0M7U0FDbEQsQ0FBQyxDQUFDO1FBQ0gsSUFBSSxDQUFDLFVBQVUsR0FBRyxJQUFJLENBQUMsT0FBTyxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLENBQUM7SUFDckQsQ0FBQzs7OztJQUVELFdBQVc7UUFDVCxJQUFJLENBQUMsVUFBVSxDQUFDLGFBQWEsRUFBRSxDQUFDLFNBQVM7OztRQUFDLEdBQUcsRUFBRTtZQUM3QyxJQUFJLENBQUMsVUFBVSxDQUFDLE1BQU0sRUFBRSxDQUFDO1FBQzNCLENBQUMsRUFBQyxDQUFDO1FBRUgsSUFBSSxDQUFDLGNBQWMsQ0FBQyxnQkFBZ0IsQ0FBQyxTQUFTOzs7UUFBQyxHQUFHLEVBQUU7WUFDbEQsSUFBSSxDQUFDLFVBQVUsQ0FBQyxNQUFNLEVBQUUsQ0FBQztRQUMzQixDQUFDLEVBQUMsQ0FBQztRQUNILElBQUksQ0FBQyxVQUFVLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxzQkFBc0IsQ0FBQyxDQUFDO0lBQ3RELENBQUM7Ozs7O0lBRUQsaUJBQWlCLENBQUMsS0FBSztRQUNyQixJQUFJLENBQUMsY0FBYyxDQUFDLGVBQWUsQ0FBQyxLQUFLLENBQUMsV0FBVyxFQUFFLEVBQUUsSUFBSSxDQUFDLFNBQVMsQ0FBQyxDQUFDO1FBQ3pFLElBQUksQ0FBQyxjQUFjLENBQUMsYUFBYSxFQUFFLENBQUM7SUFDdEMsQ0FBQzs7O1lBN0VGLFNBQVMsU0FBQztnQkFDVCxRQUFRLEVBQUUsWUFBWTtnQkFDdEIsZ3BDQUF1QztnQkFFdkMsVUFBVSxFQUFFO29CQUNWLE9BQU8sQ0FBQyxXQUFXLEVBQUU7d0JBQ25CLFVBQVUsQ0FDUixXQUFXLEVBQ1gsWUFBWSxDQUFDLFFBQVEsRUFBRTs0QkFDckIsTUFBTSxFQUFFLEVBQUUsTUFBTSxFQUFFLEdBQUcsRUFBRSxLQUFLLEVBQUUsQ0FBQyxFQUFFLENBQUMsRUFBRSxNQUFNLEVBQUUsQ0FBQyxFQUFFLEdBQUcsRUFBRTt5QkFDckQsQ0FBQyxDQUNIO3dCQUNELFVBQVUsQ0FDUixXQUFXLEVBQ1gsWUFBWSxDQUFDLE9BQU8sRUFBRTs0QkFDcEIsTUFBTSxFQUFFLEVBQUUsTUFBTSxFQUFFLEdBQUcsRUFBRSxLQUFLLEVBQUUsQ0FBQyxFQUFFO3lCQUNsQyxDQUFDLENBQ0g7cUJBQ0YsQ0FBQztpQkFDSDs7YUFDRjs7OztZQS9CQyxPQUFPO1lBTlAsZ0JBQWdCO1lBZVQsY0FBYzs7OzJCQTRCcEIsS0FBSztpQ0FDTCxLQUFLO3dCQUNMLEtBQUs7NEJBQ0wsU0FBUyxTQUFDLGdCQUFnQjtxQ0FDMUIsU0FBUyxTQUFDLHdCQUF3Qjs7Ozs7OztJQVJuQyxvQ0FBc0I7Ozs7O0lBQ3RCLGtDQUE4Qjs7Ozs7SUFDOUIsc0NBQStCOztJQUUvQix3Q0FBOEI7O0lBQzlCLDhDQUFvQzs7SUFDcEMscUNBQTJCOzs7OztJQUMzQix5Q0FBcUU7Ozs7O0lBQ3JFLGtEQUN3RDs7Ozs7SUFFeEQscUNBT0U7Ozs7O0lBR0EsbUNBQXdCOztJQUN4Qiw0Q0FBeUM7Ozs7O0lBQ3pDLDBDQUFzQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XHJcbiAgQ29tcG9uZW50LFxyXG4gIFZpZXdDaGlsZCxcclxuICBWaWV3Q29udGFpbmVyUmVmLFxyXG4gIElucHV0LFxyXG4gIEFmdGVyVmlld0luaXQsXHJcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcblxyXG5pbXBvcnQge1xyXG4gIE92ZXJsYXksXHJcbiAgQ2RrT3ZlcmxheU9yaWdpbixcclxuICBPdmVybGF5Q29uZmlnLFxyXG4gIENvbm5lY3RlZFBvc2l0aW9uLFxyXG4gIE92ZXJsYXlSZWZcclxufSBmcm9tICdAYW5ndWxhci9jZGsvb3ZlcmxheSc7XHJcbmltcG9ydCB7IFRlbXBsYXRlUG9ydGFsRGlyZWN0aXZlIH0gZnJvbSAnQGFuZ3VsYXIvY2RrL3BvcnRhbCc7XHJcbmltcG9ydCB7IHRyaWdnZXIsIHRyYW5zaXRpb24sIHVzZUFuaW1hdGlvbiB9IGZyb20gJ0Bhbmd1bGFyL2FuaW1hdGlvbnMnO1xyXG5pbXBvcnQgeyBmYWRlSW5VcCwgZmFkZU91dCB9IGZyb20gJ25nLWFuaW1hdGUnO1xyXG5pbXBvcnQgeyBQb3BvdmVyU2VydmljZSB9IGZyb20gJy4vcG9wb3Zlci5zZXJ2aWNlJztcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAnc2ItcG9wb3ZlcicsXHJcbiAgdGVtcGxhdGVVcmw6ICcuL3BvcG92ZXIuY29tcG9uZW50Lmh0bWwnLFxyXG4gIHN0eWxlVXJsczogWycuL3BvcG92ZXIuY29tcG9uZW50LnNjc3MnXSxcclxuICBhbmltYXRpb25zOiBbXHJcbiAgICB0cmlnZ2VyKCdmbGlwSW5PdXQnLCBbXHJcbiAgICAgIHRyYW5zaXRpb24oXHJcbiAgICAgICAgJ3ZvaWQgPT4gKicsXHJcbiAgICAgICAgdXNlQW5pbWF0aW9uKGZhZGVJblVwLCB7XHJcbiAgICAgICAgICBwYXJhbXM6IHsgdGltaW5nOiAwLjMsIGRlbGF5OiAwLCBhOiAnMTBweCcsIGI6ICcwJyB9XHJcbiAgICAgICAgfSlcclxuICAgICAgKSxcclxuICAgICAgdHJhbnNpdGlvbihcclxuICAgICAgICAnKiA9PiB2b2lkJyxcclxuICAgICAgICB1c2VBbmltYXRpb24oZmFkZU91dCwge1xyXG4gICAgICAgICAgcGFyYW1zOiB7IHRpbWluZzogMC4zLCBkZWxheTogMCB9XHJcbiAgICAgICAgfSlcclxuICAgICAgKVxyXG4gICAgXSlcclxuICBdXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBQb3BvdmVyQ29tcG9uZW50IGltcGxlbWVudHMgQWZ0ZXJWaWV3SW5pdCB7XHJcbiAgcHJpdmF0ZSBzdHJhdGVneTogYW55O1xyXG4gIHByaXZhdGUgY29uZmlnOiBPdmVybGF5Q29uZmlnO1xyXG4gIHByaXZhdGUgb3ZlcmxheVJlZjogT3ZlcmxheVJlZjtcclxuXHJcbiAgQElucHV0KCkgcG9wb3ZlclRpdGxlOiBzdHJpbmc7XHJcbiAgQElucHV0KCkgcG9wb3ZlckRlc2NyaXB0aW9uOiBzdHJpbmc7XHJcbiAgQElucHV0KCkgZWxlbWVudElkOiBzdHJpbmc7XHJcbiAgQFZpZXdDaGlsZChDZGtPdmVybGF5T3JpZ2luKSBwcml2YXRlIHBvcG92ZXJPcmlnaW46IENka092ZXJsYXlPcmlnaW47XHJcbiAgQFZpZXdDaGlsZCgncG9wb3ZlckNvbnRlbnRUZW1wbGF0ZScpXHJcbiAgcHJpdmF0ZSBwb3BvdmVyQ29udGVudFRlbXBsYXRlOiBUZW1wbGF0ZVBvcnRhbERpcmVjdGl2ZTtcclxuXHJcbiAgcHJpdmF0ZSBwb3NpdGlvbnM6IENvbm5lY3RlZFBvc2l0aW9uW10gPSBbXHJcbiAgICB7XHJcbiAgICAgIG9yaWdpblg6ICdzdGFydCcsXHJcbiAgICAgIG9yaWdpblk6ICd0b3AnLFxyXG4gICAgICBvdmVybGF5WDogJ2NlbnRlcicsXHJcbiAgICAgIG92ZXJsYXlZOiAnYm90dG9tJ1xyXG4gICAgfVxyXG4gIF07XHJcblxyXG4gIGNvbnN0cnVjdG9yKFxyXG4gICAgcHJpdmF0ZSBvdmVybGF5OiBPdmVybGF5LFxyXG4gICAgcHVibGljIHZpZXdDb250YWluZXJSZWY6IFZpZXdDb250YWluZXJSZWYsXHJcbiAgICBwcml2YXRlIHBvcG92ZXJTZXJ2aWNlOiBQb3BvdmVyU2VydmljZVxyXG4gICkge31cclxuXHJcbiAgbmdBZnRlclZpZXdJbml0KCk6IHZvaWQge1xyXG4gICAgdGhpcy5zdHJhdGVneSA9IHRoaXMub3ZlcmxheVxyXG4gICAgICAucG9zaXRpb24oKVxyXG4gICAgICAuZmxleGlibGVDb25uZWN0ZWRUbyh0aGlzLnBvcG92ZXJPcmlnaW4uZWxlbWVudFJlZilcclxuICAgICAgLndpdGhQb3NpdGlvbnModGhpcy5wb3NpdGlvbnMpXHJcbiAgICAgIC53aXRoVHJhbnNmb3JtT3JpZ2luT24oJyNhY3Rpb24tZHJvcGRvd24tYnV0dG9uJyk7XHJcblxyXG4gICAgdGhpcy5jb25maWcgPSBuZXcgT3ZlcmxheUNvbmZpZyh7XHJcbiAgICAgIHBvc2l0aW9uU3RyYXRlZ3k6IHRoaXMuc3RyYXRlZ3ksXHJcbiAgICAgIGhhc0JhY2tkcm9wOiB0cnVlLFxyXG4gICAgICBiYWNrZHJvcENsYXNzOiAnY2RrLW92ZXJsYXktdHJhbnNwYXJlbnQtYmFja2Ryb3AnXHJcbiAgICB9KTtcclxuICAgIHRoaXMub3ZlcmxheVJlZiA9IHRoaXMub3ZlcmxheS5jcmVhdGUodGhpcy5jb25maWcpO1xyXG4gIH1cclxuXHJcbiAgb3BlblBvcG92ZXIoKSB7XHJcbiAgICB0aGlzLm92ZXJsYXlSZWYuYmFja2Ryb3BDbGljaygpLnN1YnNjcmliZSgoKSA9PiB7XHJcbiAgICAgIHRoaXMub3ZlcmxheVJlZi5kZXRhY2goKTtcclxuICAgIH0pO1xyXG5cclxuICAgIHRoaXMucG9wb3ZlclNlcnZpY2UuZW1pdGlyQ2xvc2VFdmVudC5zdWJzY3JpYmUoKCkgPT4ge1xyXG4gICAgICB0aGlzLm92ZXJsYXlSZWYuZGV0YWNoKCk7XHJcbiAgICB9KTtcclxuICAgIHRoaXMub3ZlcmxheVJlZi5hdHRhY2godGhpcy5wb3BvdmVyQ29udGVudFRlbXBsYXRlKTtcclxuICB9XHJcblxyXG4gIGNsaWNrQWN0aW9uQnV0dG9uKGV2ZW50KSB7XHJcbiAgICB0aGlzLnBvcG92ZXJTZXJ2aWNlLmJ1dHRvbkNsaWNrRW1pdChldmVudC50b0xvd2VyQ2FzZSgpLCB0aGlzLmVsZW1lbnRJZCk7XHJcbiAgICB0aGlzLnBvcG92ZXJTZXJ2aWNlLmNsb3NlRHJvcGRvd24oKTtcclxuICB9XHJcblxyXG5cclxufVxyXG4iXX0=