lct-components
Version:
LCT basic components
34 lines • 6.86 kB
JavaScript
import { Component, ViewChild } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
export class TooltipComponent {
constructor(renderer) {
this.renderer = renderer;
this.message = 'insert text Tooltip';
this.secondaryMessage = '';
this.classes = 'top primary';
this.marginBottom = '';
}
ngOnInit() {
}
ngAfterViewInit() {
var _a;
if (this.marginBottom && this.classes.includes('top')) {
this.renderer.setStyle((_a = this.tooltipContainer) === null || _a === void 0 ? void 0 : _a.nativeElement, 'bottom', this.marginBottom);
}
}
}
TooltipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: TooltipComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
TooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: TooltipComponent, selector: "lct-tooltip", viewQueries: [{ propertyName: "tooltipContainer", first: true, predicate: ["tooltipContainer"], descendants: true }], ngImport: i0, template: "<!--<div class=\"tooltip\">-->\n<div #tooltipContainer class=\"tooltipLCT\" [ngClass]=\"classes\">\n <span class=\"tooltipLCTText\" [ngClass]=\"classes\">\n {{message}}\n <span *ngIf=\"secondaryMessage\"><br>{{secondaryMessage}}</span>\n </span>\n</div>\n", styles: [".tooltipLCT{position:relative;display:inline-block}.tooltipLCT.top{display:flex;flex-direction:column-reverse;align-items:center;bottom:25px}.tooltipLCT.right{display:inline-flex;align-items:center;vertical-align:middle}.tooltipLCT.left{display:block}.tooltipLCT .tooltipLCTText{width:max-content;color:#fff;text-align:center;border-radius:6px;padding:10px;position:absolute;z-index:1000}.tooltipLCT .tooltipLCTText.primary{background-color:#2649b6}.tooltipLCT .tooltipLCTText.secondary{background-color:#8cba37}.tooltipLCT .tooltipLCTText.tertiary{background-color:#c60e4c}.tooltipLCT .tooltipLCTText.top.primary:after{bottom:-10px;left:48%;border-color:#2649B6 transparent transparent transparent}.tooltipLCT .tooltipLCTText.top.secondary:after{bottom:-10px;left:48%;border-color:#8CBA37 transparent transparent transparent}.tooltipLCT .tooltipLCTText.top.tertiary:after{bottom:-10px;left:48%;border-color:#C60E4C transparent transparent transparent}.tooltipLCT .tooltipLCTText.right{left:5px}.tooltipLCT .tooltipLCTText.right.primary:after{top:50%;right:100%;border-color:transparent #2649B6 transparent transparent}.tooltipLCT .tooltipLCTText.right.secondary:after{top:50%;right:100%;border-color:transparent #8CBA37 transparent transparent}.tooltipLCT .tooltipLCTText.right.tertiary:after{top:50%;right:100%;border-color:transparent #C60E4C transparent transparent}.tooltipLCT .tooltipLCTText.left{right:105%;bottom:-8px}.tooltipLCT .tooltipLCTText.left:after{display:block;width:14px;height:14px;transform:rotate(45deg);right:-7px;top:50%;border-width:0;border-style:none}.tooltipLCT .tooltipLCTText.left.primary:after{background:#2649B6}.tooltipLCT .tooltipLCTText.left.secondary:after{background:#8CBA37}.tooltipLCT .tooltipLCTText.left.tertiary:after{background:#C60E4C}.tooltipLCT .tooltipLCTText:after{content:\"\";position:absolute;margin-top:-5px;border-width:5px;border-style:solid}\n"], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: TooltipComponent, decorators: [{
type: Component,
args: [{
selector: 'lct-tooltip',
templateUrl: './tooltip.component.html',
styleUrls: ['./tooltip.component.scss']
}]
}], ctorParameters: function () { return [{ type: i0.Renderer2 }]; }, propDecorators: { tooltipContainer: [{
type: ViewChild,
args: ['tooltipContainer']
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidG9vbHRpcC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9sY3QtY29tcG9uZW50cy9zcmMvbGliL3Rvb2x0aXAvdG9vbHRpcC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9sY3QtY29tcG9uZW50cy9zcmMvbGliL3Rvb2x0aXAvdG9vbHRpcC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQWdCLFNBQVMsRUFBcUQsU0FBUyxFQUFDLE1BQU0sZUFBZSxDQUFDOzs7QUFPckgsTUFBTSxPQUFPLGdCQUFnQjtJQVEzQixZQUFvQixRQUFtQjtRQUFuQixhQUFRLEdBQVIsUUFBUSxDQUFXO1FBTnZDLFlBQU8sR0FBVyxxQkFBcUIsQ0FBQztRQUN4QyxxQkFBZ0IsR0FBVyxFQUFFLENBQUM7UUFDOUIsWUFBTyxHQUFXLGFBQWEsQ0FBQztRQUNoQyxpQkFBWSxHQUFXLEVBQUUsQ0FBQztJQUdpQixDQUFDO0lBRTVDLFFBQVE7SUFDUixDQUFDO0lBQ0QsZUFBZTs7UUFDWixJQUFJLElBQUksQ0FBQyxZQUFZLElBQUksSUFBSSxDQUFDLE9BQU8sQ0FBQyxRQUFRLENBQUMsS0FBSyxDQUFDLEVBQUU7WUFDckQsSUFBSSxDQUFDLFFBQVEsQ0FBQyxRQUFRLENBQUMsTUFBQSxJQUFJLENBQUMsZ0JBQWdCLDBDQUFFLGFBQWEsRUFBRSxRQUFRLEVBQUUsSUFBSSxDQUFDLFlBQVksQ0FBQyxDQUFDO1NBQzNGO0lBQ0gsQ0FBQzs7NkdBaEJTLGdCQUFnQjtpR0FBaEIsZ0JBQWdCLHlLQ1A3Qix5UUFPQTsyRkRBYSxnQkFBZ0I7a0JBTDVCLFNBQVM7bUJBQUM7b0JBQ1QsUUFBUSxFQUFFLGFBQWE7b0JBQ3ZCLFdBQVcsRUFBRSwwQkFBMEI7b0JBQ3ZDLFNBQVMsRUFBRSxDQUFDLDBCQUEwQixDQUFDO2lCQUN4QztnR0FPZ0MsZ0JBQWdCO3NCQUE5QyxTQUFTO3VCQUFDLGtCQUFrQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7QWZ0ZXJWaWV3SW5pdCwgQ29tcG9uZW50LCBFbGVtZW50UmVmLCBJbnB1dCwgT25Jbml0LCBSZW5kZXJlcjIsIFRlbXBsYXRlUmVmLCBWaWV3Q2hpbGR9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdsY3QtdG9vbHRpcCcsXG4gIHRlbXBsYXRlVXJsOiAnLi90b29sdGlwLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vdG9vbHRpcC5jb21wb25lbnQuc2NzcyddXG59KVxuZXhwb3J0IGNsYXNzIFRvb2x0aXBDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQsIEFmdGVyVmlld0luaXR7XG5cbiAgbWVzc2FnZTogc3RyaW5nID0gJ2luc2VydCB0ZXh0IFRvb2x0aXAnO1xuICBzZWNvbmRhcnlNZXNzYWdlOiBzdHJpbmcgPSAnJztcbiAgY2xhc3Nlczogc3RyaW5nID0gJ3RvcCBwcmltYXJ5JztcbiAgbWFyZ2luQm90dG9tOiBzdHJpbmcgPSAnJztcbiAgQFZpZXdDaGlsZCgndG9vbHRpcENvbnRhaW5lcicpIHRvb2x0aXBDb250YWluZXI6IEVsZW1lbnRSZWYgfCB1bmRlZmluZWQ7XG5cbiAgY29uc3RydWN0b3IocHJpdmF0ZSByZW5kZXJlcjogUmVuZGVyZXIyKSB7IH1cblxuICBuZ09uSW5pdCgpOiB2b2lkIHtcbiAgfVxuICBuZ0FmdGVyVmlld0luaXQoKSB7XG4gICAgIGlmICh0aGlzLm1hcmdpbkJvdHRvbSAmJiB0aGlzLmNsYXNzZXMuaW5jbHVkZXMoJ3RvcCcpKSB7XG4gICAgICAgdGhpcy5yZW5kZXJlci5zZXRTdHlsZSh0aGlzLnRvb2x0aXBDb250YWluZXI/Lm5hdGl2ZUVsZW1lbnQsICdib3R0b20nLCB0aGlzLm1hcmdpbkJvdHRvbSk7XG4gICAgIH1cbiAgIH1cblxufVxuIiwiPCEtLTxkaXYgY2xhc3M9XCJ0b29sdGlwXCI+LS0+XG48ZGl2ICN0b29sdGlwQ29udGFpbmVyIGNsYXNzPVwidG9vbHRpcExDVFwiIFtuZ0NsYXNzXT1cImNsYXNzZXNcIj5cbiAgPHNwYW4gY2xhc3M9XCJ0b29sdGlwTENUVGV4dFwiIFtuZ0NsYXNzXT1cImNsYXNzZXNcIj5cbiAgICB7e21lc3NhZ2V9fVxuICAgIDxzcGFuICpuZ0lmPVwic2Vjb25kYXJ5TWVzc2FnZVwiPjxicj57e3NlY29uZGFyeU1lc3NhZ2V9fTwvc3Bhbj5cbiAgPC9zcGFuPlxuPC9kaXY+XG4iXX0=