ngx-ellipsis-tool
Version:
Angular directive that automatically detects when text is truncated with ellipsis (...) and shows a tooltip with the full text — only when needed!
48 lines • 5.31 kB
JavaScript
import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
import { CommonModule } from '@angular/common';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
export class TooltipComponent {
constructor() {
this.text = '';
this.top = 0;
this.left = 0;
this.customClass = '';
}
get formattedText() {
return this.text.replace(/\n/g, '<br>');
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TooltipComponent, isStandalone: true, selector: "app-tooltip", inputs: { text: "text", top: "top", left: "left", customClass: "customClass" }, ngImport: i0, template: `
<div
class="custom-tooltip"
[ngClass]="customClass"
[style.top.px]="top"
[style.left.px]="left"
>
<span [innerHTML]="formattedText"></span>
</div>
`, isInline: true, styles: [".custom-tooltip{background:#333;color:#fff;padding:4px 8px;border-radius:4px;font-size:12px;position:absolute;white-space:pre-line;z-index:10000;pointer-events:none;box-shadow:0 2px 8px #0000004d;transform:translateY(-100%);max-width:300px;word-wrap:break-word}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TooltipComponent, decorators: [{
type: Component,
args: [{ selector: 'app-tooltip', standalone: true, imports: [CommonModule], template: `
<div
class="custom-tooltip"
[ngClass]="customClass"
[style.top.px]="top"
[style.left.px]="left"
>
<span [innerHTML]="formattedText"></span>
</div>
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".custom-tooltip{background:#333;color:#fff;padding:4px 8px;border-radius:4px;font-size:12px;position:absolute;white-space:pre-line;z-index:10000;pointer-events:none;box-shadow:0 2px 8px #0000004d;transform:translateY(-100%);max-width:300px;word-wrap:break-word}\n"] }]
}], propDecorators: { text: [{
type: Input
}], top: [{
type: Input
}], left: [{
type: Input
}], customClass: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY3VzdG9tLXRvb2x0aXAuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LWVsbGlwc2lzLXRvb2wvc3JjL2xpYi9jdXN0b20tdG9vbHRpcC9jdXN0b20tdG9vbHRpcC5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsdUJBQXVCLEVBQWUsTUFBTSxlQUFlLENBQUM7QUFDdkYsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDOzs7QUFtQy9DLE1BQU0sT0FBTyxnQkFBZ0I7SUFqQzdCO1FBa0NXLFNBQUksR0FBRyxFQUFFLENBQUM7UUFDVixRQUFHLEdBQUcsQ0FBQyxDQUFDO1FBQ1IsU0FBSSxHQUFHLENBQUMsQ0FBQztRQUNULGdCQUFXLEdBQUcsRUFBRSxDQUFDO0tBSzNCO0lBSEMsSUFBSSxhQUFhO1FBQ2YsT0FBTyxJQUFJLENBQUMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxLQUFLLEVBQUUsTUFBTSxDQUFDLENBQUM7SUFDMUMsQ0FBQzsrR0FSVSxnQkFBZ0I7bUdBQWhCLGdCQUFnQix1SkE3QmpCOzs7Ozs7Ozs7R0FTVCxnVkFWUyxZQUFZOzs0RkE4QlgsZ0JBQWdCO2tCQWpDNUIsU0FBUzsrQkFDRSxhQUFhLGNBQ1gsSUFBSSxXQUNQLENBQUMsWUFBWSxDQUFDLFlBQ2I7Ozs7Ozs7OztHQVNULG1CQWtCZ0IsdUJBQXVCLENBQUMsTUFBTTs4QkFHdEMsSUFBSTtzQkFBWixLQUFLO2dCQUNHLEdBQUc7c0JBQVgsS0FBSztnQkFDRyxJQUFJO3NCQUFaLEtBQUs7Z0JBQ0csV0FBVztzQkFBbkIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgSW5wdXQsIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBIb3N0QmluZGluZyB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnYXBwLXRvb2x0aXAnLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbQ29tbW9uTW9kdWxlXSxcbiAgdGVtcGxhdGU6IGBcbiAgICA8ZGl2XG4gICAgICBjbGFzcz1cImN1c3RvbS10b29sdGlwXCJcbiAgICAgIFtuZ0NsYXNzXT1cImN1c3RvbUNsYXNzXCJcbiAgICAgIFtzdHlsZS50b3AucHhdPVwidG9wXCJcbiAgICAgIFtzdHlsZS5sZWZ0LnB4XT1cImxlZnRcIlxuICAgID5cbiAgICAgIDxzcGFuIFtpbm5lckhUTUxdPVwiZm9ybWF0dGVkVGV4dFwiPjwvc3Bhbj5cbiAgICA8L2Rpdj5cbiAgYCxcbiAgc3R5bGVzOiBbYFxuICAgIC5jdXN0b20tdG9vbHRpcCB7XG4gICAgICBiYWNrZ3JvdW5kOiAjMzMzO1xuICAgICAgY29sb3I6ICNmZmY7XG4gICAgICBwYWRkaW5nOiA0cHggOHB4O1xuICAgICAgYm9yZGVyLXJhZGl1czogNHB4O1xuICAgICAgZm9udC1zaXplOiAxMnB4O1xuICAgICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgICAgd2hpdGUtc3BhY2U6IHByZS1saW5lO1xuICAgICAgei1pbmRleDogMTAwMDA7XG4gICAgICBwb2ludGVyLWV2ZW50czogbm9uZTtcbiAgICAgIGJveC1zaGFkb3c6IDAgMnB4IDhweCByZ2JhKDAsIDAsIDAsIDAuMyk7XG4gICAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoLTEwMCUpO1xuICAgICAgbWF4LXdpZHRoOiAzMDBweDtcbiAgICAgIHdvcmQtd3JhcDogYnJlYWstd29yZDtcbiAgICB9XG4gIGBdLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaFxufSlcbmV4cG9ydCBjbGFzcyBUb29sdGlwQ29tcG9uZW50IHtcbiAgQElucHV0KCkgdGV4dCA9ICcnO1xuICBASW5wdXQoKSB0b3AgPSAwO1xuICBASW5wdXQoKSBsZWZ0ID0gMDtcbiAgQElucHV0KCkgY3VzdG9tQ2xhc3MgPSAnJztcblxuICBnZXQgZm9ybWF0dGVkVGV4dCgpOiBzdHJpbmcge1xuICAgIHJldHVybiB0aGlzLnRleHQucmVwbGFjZSgvXFxuL2csICc8YnI+Jyk7XG4gIH1cbn1cbiJdfQ==