cfc-ds
Version:
Design System do Conselho Federal de Contabilidade baseado no govbr-ds
37 lines • 6.53 kB
JavaScript
import { Component, HostListener, Input } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
export class TooltipComponent {
el;
renderer;
tooltipText = '';
type = 'info';
isVisible = false;
constructor(el, renderer) {
this.el = el;
this.renderer = renderer;
}
onMouseEnter() {
this.isVisible = true;
}
onMouseLeave() {
this.isVisible = false;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TooltipComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TooltipComponent, selector: "cfc-tooltip", inputs: { tooltipText: "tooltipText", type: "type" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, ngImport: i0, template: "<span class=\"tooltip-container\">\r\n <ng-content></ng-content>\r\n <div class=\"tooltip\" [class]=\"type\" *ngIf=\"isVisible\">\r\n <div class=\"tooltip-arrow\"></div>\r\n {{ tooltipText }}\r\n </div>\r\n</span>", styles: [".tooltip-wrapper{position:relative;display:inline-block}.tooltip-container{position:relative;display:inline-block;z-index:1000}.tooltip{position:absolute;padding:10px;border-radius:5px;bottom:100%;left:50%;transform:translate(-50%);white-space:nowrap;opacity:1;transition:opacity .3s;color:#fff;margin-bottom:8px}.tooltip-arrow{position:absolute;width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid;bottom:-8px;left:50%;transform:translate(-50%);margin-left:10px}.tooltip.success{background-color:#168821}.tooltip.success .tooltip-arrow{border-top-color:#168821}.tooltip.error{background-color:#e52207}.tooltip.error .tooltip-arrow{border-top-color:#e52207}.tooltip.info{background-color:#1351b4}.tooltip.info .tooltip-arrow{border-top-color:#1351b4}.tooltip.warning{background-color:#ffcd07;color:#333}.tooltip.warning .tooltip-arrow{border-top-color:#ffcd07}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TooltipComponent, decorators: [{
type: Component,
args: [{ selector: 'cfc-tooltip', template: "<span class=\"tooltip-container\">\r\n <ng-content></ng-content>\r\n <div class=\"tooltip\" [class]=\"type\" *ngIf=\"isVisible\">\r\n <div class=\"tooltip-arrow\"></div>\r\n {{ tooltipText }}\r\n </div>\r\n</span>", styles: [".tooltip-wrapper{position:relative;display:inline-block}.tooltip-container{position:relative;display:inline-block;z-index:1000}.tooltip{position:absolute;padding:10px;border-radius:5px;bottom:100%;left:50%;transform:translate(-50%);white-space:nowrap;opacity:1;transition:opacity .3s;color:#fff;margin-bottom:8px}.tooltip-arrow{position:absolute;width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid;bottom:-8px;left:50%;transform:translate(-50%);margin-left:10px}.tooltip.success{background-color:#168821}.tooltip.success .tooltip-arrow{border-top-color:#168821}.tooltip.error{background-color:#e52207}.tooltip.error .tooltip-arrow{border-top-color:#e52207}.tooltip.info{background-color:#1351b4}.tooltip.info .tooltip-arrow{border-top-color:#1351b4}.tooltip.warning{background-color:#ffcd07;color:#333}.tooltip.warning .tooltip-arrow{border-top-color:#ffcd07}\n"] }]
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { tooltipText: [{
type: Input
}], type: [{
type: Input
}], onMouseEnter: [{
type: HostListener,
args: ['mouseenter']
}], onMouseLeave: [{
type: HostListener,
args: ['mouseleave']
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidG9vbHRpcC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jZmMtZHMvc3JjL2xpYi9jb21wb25lbnRzL3Rvb2x0aXAvdG9vbHRpcC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jZmMtZHMvc3JjL2xpYi9jb21wb25lbnRzL3Rvb2x0aXAvdG9vbHRpcC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFjLFlBQVksRUFBRSxLQUFLLEVBQWEsTUFBTSxlQUFlLENBQUM7OztBQU90RixNQUFNLE9BQU8sZ0JBQWdCO0lBTVA7SUFBd0I7SUFMbkMsV0FBVyxHQUFXLEVBQUUsQ0FBQztJQUN6QixJQUFJLEdBQTZDLE1BQU0sQ0FBQztJQUNqRSxTQUFTLEdBQVksS0FBSyxDQUFDO0lBRzNCLFlBQW9CLEVBQWMsRUFBVSxRQUFtQjtRQUEzQyxPQUFFLEdBQUYsRUFBRSxDQUFZO1FBQVUsYUFBUSxHQUFSLFFBQVEsQ0FBVztJQUFHLENBQUM7SUFFdkMsWUFBWTtRQUN0QyxJQUFJLENBQUMsU0FBUyxHQUFHLElBQUksQ0FBQztJQUN4QixDQUFDO0lBRTJCLFlBQVk7UUFDdEMsSUFBSSxDQUFDLFNBQVMsR0FBRyxLQUFLLENBQUM7SUFDekIsQ0FBQzt3R0FkVSxnQkFBZ0I7NEZBQWhCLGdCQUFnQixrTUNQN0IsOE9BTU87OzRGRENNLGdCQUFnQjtrQkFMNUIsU0FBUzsrQkFDRSxhQUFhO3VHQUtkLFdBQVc7c0JBQW5CLEtBQUs7Z0JBQ0csSUFBSTtzQkFBWixLQUFLO2dCQU1zQixZQUFZO3NCQUF2QyxZQUFZO3VCQUFDLFlBQVk7Z0JBSUUsWUFBWTtzQkFBdkMsWUFBWTt1QkFBQyxZQUFZIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBFbGVtZW50UmVmLCBIb3N0TGlzdGVuZXIsIElucHV0LCBSZW5kZXJlcjIgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAnY2ZjLXRvb2x0aXAnLFxyXG4gIHRlbXBsYXRlVXJsOiAnLi90b29sdGlwLmNvbXBvbmVudC5odG1sJyxcclxuICBzdHlsZVVybDogJy4vdG9vbHRpcC5jb21wb25lbnQuc2NzcydcclxufSlcclxuZXhwb3J0IGNsYXNzIFRvb2x0aXBDb21wb25lbnQge1xyXG4gIEBJbnB1dCgpIHRvb2x0aXBUZXh0OiBzdHJpbmcgPSAnJztcclxuICBASW5wdXQoKSB0eXBlOiAnc3VjY2VzcycgfCAnZXJyb3InIHwgJ2luZm8nIHwgJ3dhcm5pbmcnID0gJ2luZm8nO1xyXG4gIGlzVmlzaWJsZTogYm9vbGVhbiA9IGZhbHNlO1xyXG5cclxuXHJcbiAgY29uc3RydWN0b3IocHJpdmF0ZSBlbDogRWxlbWVudFJlZiwgcHJpdmF0ZSByZW5kZXJlcjogUmVuZGVyZXIyKSB7fVxyXG5cclxuICBASG9zdExpc3RlbmVyKCdtb3VzZWVudGVyJykgb25Nb3VzZUVudGVyKCkge1xyXG4gICAgdGhpcy5pc1Zpc2libGUgPSB0cnVlO1xyXG4gIH1cclxuXHJcbiAgQEhvc3RMaXN0ZW5lcignbW91c2VsZWF2ZScpIG9uTW91c2VMZWF2ZSgpIHtcclxuICAgIHRoaXMuaXNWaXNpYmxlID0gZmFsc2U7XHJcbiAgfVxyXG59XHJcbiIsIjxzcGFuIGNsYXNzPVwidG9vbHRpcC1jb250YWluZXJcIj5cclxuICAgIDxuZy1jb250ZW50PjwvbmctY29udGVudD5cclxuICAgIDxkaXYgY2xhc3M9XCJ0b29sdGlwXCIgW2NsYXNzXT1cInR5cGVcIiAqbmdJZj1cImlzVmlzaWJsZVwiPlxyXG4gICAgICAgIDxkaXYgY2xhc3M9XCJ0b29sdGlwLWFycm93XCI+PC9kaXY+XHJcbiAgICAgICAge3sgdG9vbHRpcFRleHQgfX1cclxuICAgIDwvZGl2PlxyXG48L3NwYW4+Il19