@duyvu-fsdev/ng-tooltip-directive/esm2022/lib/ng-tooltip.component.mjs

Tooltip directive designed for Angular and Ionic/Angular applications.

import { Component, Input } from "@angular/core";
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
export class TooltipComponent {
    position = "bottom";
    top;
    left;
    visible = false;
    text = "";
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: TooltipComponent, selector: "ng-tooltip", inputs: { position: "position", top: "top", left: "left", visible: "visible", text: "text" }, ngImport: i0, template: "<div\n  class=\"app-tooltip tooltip-container {{ position }}\"\n  [ngStyle]=\"{\n    top: top,\n    left: left,\n    visibility: visible ? 'visible' : 'hidden'\n  }\"\n>\n  <div class=\"tooltip-arrow\"></div>\n  <div class=\"tooltip-content\">{{ text }}</div>\n</div>\n", styles: [".app-tooltip{--background-color: var(--tooltip-background, #26292c);--color: var(--tooltip-color, #f4f5f8);--max-width: var(--tooltip-max-width, fit-content);--height: var(--tooltip-height, fit-content);--border-radius: var(--tooltip-border-radius, 4px);--padding: var(--tooltip-padding, 6px 8px)}.app-tooltip *{box-sizing:border-box}.tooltip-container{position:fixed;background-color:var(--background-color);color:var(--color);padding:var(--padding);border-radius:var(--border-radius);z-index:1000;max-width:var(--max-width);height:var(--height)}.tooltip-container .tooltip-content{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.tooltip-container .tooltip-arrow{position:absolute;width:0;height:0}.tooltip-container.top{transform:translate(-50%,-100%)}.tooltip-container.top .tooltip-arrow{bottom:-5px;left:50%;transform:translate(-50%);border-width:5px 5px 0;border-style:solid;border-color:var(--background-color) transparent transparent transparent}.tooltip-container.bottom{transform:translate(-50%)}.tooltip-container.bottom .tooltip-arrow{top:-5px;left:50%;transform:translate(-50%);border-width:0 5px 5px;border-style:solid;border-color:transparent transparent var(--background-color) transparent}.tooltip-container.left{transform:translate(-100%,-50%)}.tooltip-container.left .tooltip-arrow{top:50%;right:-5px;transform:translateY(-50%);border-width:5px 0 5px 5px;border-style:solid;border-color:transparent transparent transparent var(--background-color)}.tooltip-container.right{transform:translateY(-50%)}.tooltip-container.right .tooltip-arrow{top:50%;left:-5px;transform:translateY(-50%);border-width:5px 5px 5px 0;border-style:solid;border-color:transparent var(--background-color) transparent transparent}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: TooltipComponent, decorators: [{
            type: Component,
            args: [{ selector: "ng-tooltip", template: "<div\n  class=\"app-tooltip tooltip-container {{ position }}\"\n  [ngStyle]=\"{\n    top: top,\n    left: left,\n    visibility: visible ? 'visible' : 'hidden'\n  }\"\n>\n  <div class=\"tooltip-arrow\"></div>\n  <div class=\"tooltip-content\">{{ text }}</div>\n</div>\n", styles: [".app-tooltip{--background-color: var(--tooltip-background, #26292c);--color: var(--tooltip-color, #f4f5f8);--max-width: var(--tooltip-max-width, fit-content);--height: var(--tooltip-height, fit-content);--border-radius: var(--tooltip-border-radius, 4px);--padding: var(--tooltip-padding, 6px 8px)}.app-tooltip *{box-sizing:border-box}.tooltip-container{position:fixed;background-color:var(--background-color);color:var(--color);padding:var(--padding);border-radius:var(--border-radius);z-index:1000;max-width:var(--max-width);height:var(--height)}.tooltip-container .tooltip-content{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.tooltip-container .tooltip-arrow{position:absolute;width:0;height:0}.tooltip-container.top{transform:translate(-50%,-100%)}.tooltip-container.top .tooltip-arrow{bottom:-5px;left:50%;transform:translate(-50%);border-width:5px 5px 0;border-style:solid;border-color:var(--background-color) transparent transparent transparent}.tooltip-container.bottom{transform:translate(-50%)}.tooltip-container.bottom .tooltip-arrow{top:-5px;left:50%;transform:translate(-50%);border-width:0 5px 5px;border-style:solid;border-color:transparent transparent var(--background-color) transparent}.tooltip-container.left{transform:translate(-100%,-50%)}.tooltip-container.left .tooltip-arrow{top:50%;right:-5px;transform:translateY(-50%);border-width:5px 0 5px 5px;border-style:solid;border-color:transparent transparent transparent var(--background-color)}.tooltip-container.right{transform:translateY(-50%)}.tooltip-container.right .tooltip-arrow{top:50%;left:-5px;transform:translateY(-50%);border-width:5px 5px 5px 0;border-style:solid;border-color:transparent var(--background-color) transparent transparent}\n"] }]
        }], propDecorators: { position: [{
                type: Input
            }], top: [{
                type: Input
            }], left: [{
                type: Input
            }], visible: [{
                type: Input
            }], text: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmctdG9vbHRpcC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy9uZy10b29sdGlwLWRpcmVjdGl2ZS9zcmMvbGliL25nLXRvb2x0aXAuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vcHJvamVjdHMvbmctdG9vbHRpcC1kaXJlY3RpdmUvc3JjL2xpYi9uZy10b29sdGlwLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLE1BQU0sZUFBZSxDQUFDOzs7QUFRakQsTUFBTSxPQUFPLGdCQUFnQjtJQUNsQixRQUFRLEdBQWEsUUFBUSxDQUFDO0lBQzlCLEdBQUcsQ0FBVTtJQUNiLElBQUksQ0FBVTtJQUNkLE9BQU8sR0FBWSxLQUFLLENBQUM7SUFDekIsSUFBSSxHQUFXLEVBQUUsQ0FBQzt3R0FMaEIsZ0JBQWdCOzRGQUFoQixnQkFBZ0IsZ0pDUjdCLCtRQVdBOzs0RkRIYSxnQkFBZ0I7a0JBTDVCLFNBQVM7K0JBQ0UsWUFBWTs4QkFLYixRQUFRO3NCQUFoQixLQUFLO2dCQUNHLEdBQUc7c0JBQVgsS0FBSztnQkFDRyxJQUFJO3NCQUFaLEtBQUs7Z0JBQ0csT0FBTztzQkFBZixLQUFLO2dCQUNHLElBQUk7c0JBQVosS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgSW5wdXQgfSBmcm9tIFwiQGFuZ3VsYXIvY29yZVwiO1xyXG5pbXBvcnQgeyBQb3NpdGlvbiB9IGZyb20gXCIuL25nLXRvb2x0aXAubW9kZWxcIjtcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiBcIm5nLXRvb2x0aXBcIixcclxuICB0ZW1wbGF0ZVVybDogXCIuL25nLXRvb2x0aXAuY29tcG9uZW50Lmh0bWxcIixcclxuICBzdHlsZVVybHM6IFtcIi4vbmctdG9vbHRpcC5zY3NzXCJdLFxyXG59KVxyXG5leHBvcnQgY2xhc3MgVG9vbHRpcENvbXBvbmVudCB7XHJcbiAgQElucHV0KCkgcG9zaXRpb246IFBvc2l0aW9uID0gXCJib3R0b21cIjtcclxuICBASW5wdXQoKSB0b3AhOiBzdHJpbmc7XHJcbiAgQElucHV0KCkgbGVmdCE6IHN0cmluZztcclxuICBASW5wdXQoKSB2aXNpYmxlOiBib29sZWFuID0gZmFsc2U7XHJcbiAgQElucHV0KCkgdGV4dDogc3RyaW5nID0gXCJcIjtcclxufVxyXG4iLCI8ZGl2XG4gIGNsYXNzPVwiYXBwLXRvb2x0aXAgdG9vbHRpcC1jb250YWluZXIge3sgcG9zaXRpb24gfX1cIlxuICBbbmdTdHlsZV09XCJ7XG4gICAgdG9wOiB0b3AsXG4gICAgbGVmdDogbGVmdCxcbiAgICB2aXNpYmlsaXR5OiB2aXNpYmxlID8gJ3Zpc2libGUnIDogJ2hpZGRlbidcbiAgfVwiXG4+XG4gIDxkaXYgY2xhc3M9XCJ0b29sdGlwLWFycm93XCI+PC9kaXY+XG4gIDxkaXYgY2xhc3M9XCJ0b29sdGlwLWNvbnRlbnRcIj57eyB0ZXh0IH19PC9kaXY+XG48L2Rpdj5cbiJdfQ==