truly-ui
Version:
Web Components for Desktop Applications.
28 lines • 6.19 kB
JavaScript
import { Input, Component } from '@angular/core';
import { OverlayAnimation } from '../core/directives/overlay-animation';
import * as i0 from "@angular/core";
export class TlToolTip {
getClassByPlacement() {
if (this.options.placement.includes('left')) {
return 'left';
}
if (this.options.placement.includes('right')) {
return 'right';
}
if (this.options.placement.includes('top')) {
return 'top';
}
if (this.options.placement.includes('bottom')) {
return 'bottom';
}
}
}
/** @nocollapse */ TlToolTip.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TlToolTip, deps: [], target: i0.ɵɵFactoryTarget.Component });
/** @nocollapse */ TlToolTip.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TlToolTip, selector: "tl-tooltip", inputs: { options: "options" }, ngImport: i0, template: "<div class=\"tooltip-text\"\n [style.width]=\"options?.width\"\n [style.color]=\"options?.fontColor\"\n [style.background]=\"options?.color\">\n <span>{{ options?.text }}</span>\n <div [style.border-color]=\"options?.color\"\n [class]=\"'arrow ' + getClassByPlacement()\"></div>\n</div>\n\n", styles: [".tooltip-text{padding:5px;color:#fff;display:inline-block;z-index:1;border-radius:3px;width:180px;height:initial;text-align:center;margin:5px;word-wrap:break-word;background-color:#242525;font-size:1em!important;font-family:Lato,Segoe UI,Helvetica}.tooltip-text .arrow{position:absolute;box-sizing:border-box;height:10px;width:10px;border-style:solid;border-color:#242525;border-width:0px 6px 6px 0px}.tooltip-text .left{right:0!important;transform:rotate(-45deg)!important;top:calc(50% - 5px)!important}.tooltip-text .right{transform:rotate(135deg);top:calc(50% - 5px);left:0}.tooltip-text .bottom{transform:rotate(-135deg);top:0;left:calc(50% - 5px)}.tooltip-text .top{transform:rotate(45deg);left:calc(50% - 5px)}\n"], animations: [OverlayAnimation] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TlToolTip, decorators: [{
type: Component,
args: [{ selector: 'tl-tooltip', animations: [OverlayAnimation], template: "<div class=\"tooltip-text\"\n [style.width]=\"options?.width\"\n [style.color]=\"options?.fontColor\"\n [style.background]=\"options?.color\">\n <span>{{ options?.text }}</span>\n <div [style.border-color]=\"options?.color\"\n [class]=\"'arrow ' + getClassByPlacement()\"></div>\n</div>\n\n", styles: [".tooltip-text{padding:5px;color:#fff;display:inline-block;z-index:1;border-radius:3px;width:180px;height:initial;text-align:center;margin:5px;word-wrap:break-word;background-color:#242525;font-size:1em!important;font-family:Lato,Segoe UI,Helvetica}.tooltip-text .arrow{position:absolute;box-sizing:border-box;height:10px;width:10px;border-style:solid;border-color:#242525;border-width:0px 6px 6px 0px}.tooltip-text .left{right:0!important;transform:rotate(-45deg)!important;top:calc(50% - 5px)!important}.tooltip-text .right{transform:rotate(135deg);top:calc(50% - 5px);left:0}.tooltip-text .bottom{transform:rotate(-135deg);top:0;left:calc(50% - 5px)}.tooltip-text .top{transform:rotate(45deg);left:calc(50% - 5px)}\n"] }]
}], propDecorators: { options: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidG9vbHRpcC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL3RydWx5LXVpL3NyYy9jb21wb25lbnRzL3Rvb2x0aXAvdG9vbHRpcC50cyIsIi4uLy4uLy4uLy4uL3Byb2plY3RzL3RydWx5LXVpL3NyYy9jb21wb25lbnRzL3Rvb2x0aXAvdG9vbHRpcC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBb0IsS0FBSyxFQUFFLFNBQVMsRUFBeUIsTUFBTSxlQUFlLENBQUM7QUFFMUYsT0FBTyxFQUFFLGdCQUFnQixFQUFFLE1BQU0sc0NBQXNDLENBQUM7O0FBUXhFLE1BQU0sT0FBTyxTQUFTO0lBSXBCLG1CQUFtQjtRQUNqQixJQUFLLElBQUksQ0FBQyxPQUFPLENBQUMsU0FBUyxDQUFDLFFBQVEsQ0FBRSxNQUFNLENBQUUsRUFBRztZQUMvQyxPQUFPLE1BQU0sQ0FBQztTQUNmO1FBQ0QsSUFBSyxJQUFJLENBQUMsT0FBTyxDQUFDLFNBQVMsQ0FBQyxRQUFRLENBQUUsT0FBTyxDQUFFLEVBQUc7WUFDaEQsT0FBTyxPQUFPLENBQUM7U0FDaEI7UUFDRCxJQUFLLElBQUksQ0FBQyxPQUFPLENBQUMsU0FBUyxDQUFDLFFBQVEsQ0FBRSxLQUFLLENBQUUsRUFBRztZQUM5QyxPQUFPLEtBQUssQ0FBQztTQUNkO1FBQ0QsSUFBSyxJQUFJLENBQUMsT0FBTyxDQUFDLFNBQVMsQ0FBQyxRQUFRLENBQUUsUUFBUSxDQUFFLEVBQUc7WUFDakQsT0FBTyxRQUFRLENBQUM7U0FDakI7SUFDSCxDQUFDOzswSEFqQlUsU0FBUzs4R0FBVCxTQUFTLGtGQ1Z0Qix3VEFTQSwwdUJERGMsQ0FBRSxnQkFBZ0IsQ0FBRTs0RkFFckIsU0FBUztrQkFOckIsU0FBUzsrQkFDRSxZQUFZLGNBR1YsQ0FBRSxnQkFBZ0IsQ0FBRTs4QkFJdkIsT0FBTztzQkFBZixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQWZ0ZXJDb250ZW50SW5pdCwgSW5wdXQsIENvbXBvbmVudCwgRWxlbWVudFJlZiwgVmlld0NoaWxkIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBUb29sdGlwT3B0aW9ucyB9IGZyb20gJy4vdG9vbHRpcE9wdGlvbnMnO1xuaW1wb3J0IHsgT3ZlcmxheUFuaW1hdGlvbiB9IGZyb20gJy4uL2NvcmUvZGlyZWN0aXZlcy9vdmVybGF5LWFuaW1hdGlvbic7XG5cbkBDb21wb25lbnQoIHtcbiAgc2VsZWN0b3I6ICd0bC10b29sdGlwJyxcbiAgdGVtcGxhdGVVcmw6ICcuL3Rvb2x0aXAuaHRtbCcsXG4gIHN0eWxlVXJsczogWyAnLi90b29sdGlwLnNjc3MnIF0sXG4gIGFuaW1hdGlvbnM6IFsgT3ZlcmxheUFuaW1hdGlvbiBdLFxufSApXG5leHBvcnQgY2xhc3MgVGxUb29sVGlwIHtcblxuICBASW5wdXQoKSBvcHRpb25zOiBUb29sdGlwT3B0aW9ucztcblxuICBnZXRDbGFzc0J5UGxhY2VtZW50KCkge1xuICAgIGlmICggdGhpcy5vcHRpb25zLnBsYWNlbWVudC5pbmNsdWRlcyggJ2xlZnQnICkgKSB7XG4gICAgICByZXR1cm4gJ2xlZnQnO1xuICAgIH1cbiAgICBpZiAoIHRoaXMub3B0aW9ucy5wbGFjZW1lbnQuaW5jbHVkZXMoICdyaWdodCcgKSApIHtcbiAgICAgIHJldHVybiAncmlnaHQnO1xuICAgIH1cbiAgICBpZiAoIHRoaXMub3B0aW9ucy5wbGFjZW1lbnQuaW5jbHVkZXMoICd0b3AnICkgKSB7XG4gICAgICByZXR1cm4gJ3RvcCc7XG4gICAgfVxuICAgIGlmICggdGhpcy5vcHRpb25zLnBsYWNlbWVudC5pbmNsdWRlcyggJ2JvdHRvbScgKSApIHtcbiAgICAgIHJldHVybiAnYm90dG9tJztcbiAgICB9XG4gIH1cbn1cbiIsIjxkaXYgY2xhc3M9XCJ0b29sdGlwLXRleHRcIlxuICAgICBbc3R5bGUud2lkdGhdPVwib3B0aW9ucz8ud2lkdGhcIlxuICAgICBbc3R5bGUuY29sb3JdPVwib3B0aW9ucz8uZm9udENvbG9yXCJcbiAgICAgW3N0eWxlLmJhY2tncm91bmRdPVwib3B0aW9ucz8uY29sb3JcIj5cbiAgPHNwYW4+e3sgb3B0aW9ucz8udGV4dCB9fTwvc3Bhbj5cbiAgPGRpdiBbc3R5bGUuYm9yZGVyLWNvbG9yXT1cIm9wdGlvbnM/LmNvbG9yXCJcbiAgICAgICBbY2xhc3NdPVwiJ2Fycm93ICcgKyBnZXRDbGFzc0J5UGxhY2VtZW50KClcIj48L2Rpdj5cbjwvZGl2PlxuXG4iXX0=