@seniorsistemas/angular-components 19.0.8 → 19.0.9-bugfix-sds-497-72a92030

package/esm2022/tooltip/lib/tooltip/tooltip.component.mjs

@@ -1,18 +1,24 @@
-import { Component } from '@angular/core';
+import { NgClass } from '@angular/common';
+import { Component, input } from '@angular/core';
 import * as i0 from "@angular/core";
-import * as i1 from "@angular/common";
+/**
+ * @description Componente de apresentação do tooltip. Utilizado internamente pela diretiva `TooltipDirective`.
+ * O posicionamento é gerenciado pelo CDK Overlay via `TooltipDirective`.
+ */
 export class TooltipComponent {
-    tooltip = '';
-    position = 'top';
-    left = 0;
-    top = 0;
-    visible = false;
-    escape = false;
+    /** @description Texto ou HTML a ser exibido no tooltip. */
+    tooltip = input('');
+    /** @description Posição do tooltip — usada para renderizar a seta no lado correto. */
+    position = input('top');
+    /** @description Controla a visibilidade (opacidade) do tooltip via transição CSS. */
+    visible = input(false);
+    /** @description Quando `true`, o conteúdo é renderizado como texto puro (escapa HTML). */
+    escape = input(false);
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TooltipComponent, selector: "ng-component", ngImport: i0, template: "<div\n    id=\"tooltip\"\n    class=\"tooltip\"\n    [ngClass]=\"['tooltip--' + position]\"\n    [class.tooltip--visible]=\"visible\"\n    [ngStyle]=\"{\n        left: left + 'px',\n        top: top + 'px',\n    }\"\n>\n    @if (escape) {\n        <span class=\"tooltip__content\">\n            {{ tooltip }}\n        </span>\n    } @else {\n        <span\n            class=\"tooltip__content\"\n            [innerHTML]=\"tooltip\"\n        >\n        </span>\n    }\n</div>\n", styles: [".tooltip{background-color:#000;border-radius:2px;color:#fff;font-family:Open Sans,sans-serif;font-size:14px;font-weight:400;line-height:21px;opacity:0;padding:8px;position:fixed;transform:translate(-50%);text-align:center;max-width:220px;word-wrap:break-word;z-index:99999;position:absolute}.tooltip--visible{opacity:1;transition:opacity .3s}.tooltip:before{content:\"\";height:0;position:absolute;width:0}.tooltip--bottom{margin-top:5px;transform:translate(-50%)}.tooltip--bottom:before{border:5px solid transparent;border-bottom:5px solid black;left:calc(50% - 5px);top:-10px}.tooltip--top{margin-bottom:5px;transform:translate(-50%,-100%)}.tooltip--top:before{border:5px solid transparent;border-top:5px solid black;left:calc(50% - 5px);bottom:-10px}.tooltip--left{margin-right:28px;transform:translate(calc(-100% - 7px),-50%)}.tooltip--left:before{border:5px solid transparent;border-left:5px solid black;right:-10px;bottom:calc(50% - 5px)}.tooltip--right{margin-left:7px;transform:translateY(-50%)}.tooltip--right:before{border:5px solid transparent;border-right:5px solid black;left:-10px;bottom:calc(50% - 5px)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TooltipComponent, isStandalone: true, selector: "s-tooltip", inputs: { tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, escape: { classPropertyName: "escape", publicName: "escape", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n    class=\"tooltip relative max-w-[220px] break-words rounded-xsmall bg-grayscale-100 p-2 text-center font-open-sans text-sm font-normal leading-normal text-grayscale-0 transition-opacity duration-300\"\n    [class.opacity-0]=\"!visible()\"\n    [class.opacity-100]=\"visible()\"\n    [class.tooltip--visible]=\"visible()\"\n    [ngClass]=\"'tooltip--' + position()\"\n>\n    @if (escape()) {\n        <span class=\"tooltip__content\">\n            {{ tooltip() }}\n        </span>\n    } @else {\n        <span\n            class=\"tooltip__content\"\n            [innerHTML]=\"tooltip()\"\n        >\n        </span>\n    }\n</div>\n\n", styles: [".tooltip--top:before,.tooltip--bottom:before,.tooltip--left:before,.tooltip--right:before{content:\"\";height:0;position:absolute;width:0}.tooltip--bottom:before{border:5px solid transparent;border-bottom:5px solid #0E1119;left:calc(50% - 5px);top:-10px}.tooltip--top:before{border:5px solid transparent;border-top:5px solid #0E1119;left:calc(50% - 5px);bottom:-10px}.tooltip--left:before{border:5px solid transparent;border-left:5px solid #0E1119;right:-10px;bottom:calc(50% - 5px)}.tooltip--right:before{border:5px solid transparent;border-right:5px solid #0E1119;left:-10px;bottom:calc(50% - 5px)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TooltipComponent, decorators: [{
             type: Component,
-            args: [{ template: "<div\n    id=\"tooltip\"\n    class=\"tooltip\"\n    [ngClass]=\"['tooltip--' + position]\"\n    [class.tooltip--visible]=\"visible\"\n    [ngStyle]=\"{\n        left: left + 'px',\n        top: top + 'px',\n    }\"\n>\n    @if (escape) {\n        <span class=\"tooltip__content\">\n            {{ tooltip }}\n        </span>\n    } @else {\n        <span\n            class=\"tooltip__content\"\n            [innerHTML]=\"tooltip\"\n        >\n        </span>\n    }\n</div>\n", styles: [".tooltip{background-color:#000;border-radius:2px;color:#fff;font-family:Open Sans,sans-serif;font-size:14px;font-weight:400;line-height:21px;opacity:0;padding:8px;position:fixed;transform:translate(-50%);text-align:center;max-width:220px;word-wrap:break-word;z-index:99999;position:absolute}.tooltip--visible{opacity:1;transition:opacity .3s}.tooltip:before{content:\"\";height:0;position:absolute;width:0}.tooltip--bottom{margin-top:5px;transform:translate(-50%)}.tooltip--bottom:before{border:5px solid transparent;border-bottom:5px solid black;left:calc(50% - 5px);top:-10px}.tooltip--top{margin-bottom:5px;transform:translate(-50%,-100%)}.tooltip--top:before{border:5px solid transparent;border-top:5px solid black;left:calc(50% - 5px);bottom:-10px}.tooltip--left{margin-right:28px;transform:translate(calc(-100% - 7px),-50%)}.tooltip--left:before{border:5px solid transparent;border-left:5px solid black;right:-10px;bottom:calc(50% - 5px)}.tooltip--right{margin-left:7px;transform:translateY(-50%)}.tooltip--right:before{border:5px solid transparent;border-right:5px solid black;left:-10px;bottom:calc(50% - 5px)}\n"] }]
+            args: [{ selector: 's-tooltip', standalone: true, imports: [NgClass], template: "<div\n    class=\"tooltip relative max-w-[220px] break-words rounded-xsmall bg-grayscale-100 p-2 text-center font-open-sans text-sm font-normal leading-normal text-grayscale-0 transition-opacity duration-300\"\n    [class.opacity-0]=\"!visible()\"\n    [class.opacity-100]=\"visible()\"\n    [class.tooltip--visible]=\"visible()\"\n    [ngClass]=\"'tooltip--' + position()\"\n>\n    @if (escape()) {\n        <span class=\"tooltip__content\">\n            {{ tooltip() }}\n        </span>\n    } @else {\n        <span\n            class=\"tooltip__content\"\n            [innerHTML]=\"tooltip()\"\n        >\n        </span>\n    }\n</div>\n\n", styles: [".tooltip--top:before,.tooltip--bottom:before,.tooltip--left:before,.tooltip--right:before{content:\"\";height:0;position:absolute;width:0}.tooltip--bottom:before{border:5px solid transparent;border-bottom:5px solid #0E1119;left:calc(50% - 5px);top:-10px}.tooltip--top:before{border:5px solid transparent;border-top:5px solid #0E1119;left:calc(50% - 5px);bottom:-10px}.tooltip--left:before{border:5px solid transparent;border-left:5px solid #0E1119;right:-10px;bottom:calc(50% - 5px)}.tooltip--right:before{border:5px solid transparent;border-right:5px solid #0E1119;left:-10px;bottom:calc(50% - 5px)}\n"] }]
         }] });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidG9vbHRpcC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9hbmd1bGFyLWNvbXBvbmVudHMvdG9vbHRpcC9zcmMvbGliL3Rvb2x0aXAvdG9vbHRpcC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9hbmd1bGFyLWNvbXBvbmVudHMvdG9vbHRpcC9zcmMvbGliL3Rvb2x0aXAvdG9vbHRpcC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFVLE1BQU0sZUFBZSxDQUFDOzs7QUFRbEQsTUFBTSxPQUFPLGdCQUFnQjtJQUNsQixPQUFPLEdBQUcsRUFBRSxDQUFDO0lBQ2IsUUFBUSxHQUFxQixLQUFLLENBQUM7SUFDbkMsSUFBSSxHQUFHLENBQUMsQ0FBQztJQUNULEdBQUcsR0FBRyxDQUFDLENBQUM7SUFDUixPQUFPLEdBQUcsS0FBSyxDQUFDO0lBQ2hCLE1BQU0sR0FBRyxLQUFLLENBQUM7d0dBTmIsZ0JBQWdCOzRGQUFoQixnQkFBZ0Isb0RDUjdCLCtkQXNCQTs7NEZEZGEsZ0JBQWdCO2tCQUo1QixTQUFTIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBzaWduYWwgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuaW1wb3J0IHsgVG9vbHRpcFBvc2l0aW9ucyB9IGZyb20gJy4vbW9kZWxzL3Rvb2x0aXAtcG9zaXRpb24nO1xuXG5AQ29tcG9uZW50KHtcbiAgICB0ZW1wbGF0ZVVybDogJy4vdG9vbHRpcC5jb21wb25lbnQuaHRtbCcsXG4gICAgc3R5bGVVcmxzOiBbJy4vdG9vbHRpcC5jb21wb25lbnQuc2NzcyddLFxufSlcbmV4cG9ydCBjbGFzcyBUb29sdGlwQ29tcG9uZW50IHtcbiAgICBwdWJsaWMgdG9vbHRpcCA9ICcnO1xuICAgIHB1YmxpYyBwb3NpdGlvbjogVG9vbHRpcFBvc2l0aW9ucyA9ICd0b3AnO1xuICAgIHB1YmxpYyBsZWZ0ID0gMDtcbiAgICBwdWJsaWMgdG9wID0gMDtcbiAgICBwdWJsaWMgdmlzaWJsZSA9IGZhbHNlO1xuICAgIHB1YmxpYyBlc2NhcGUgPSBmYWxzZTtcbn1cbiIsIjxkaXZcbiAgICBpZD1cInRvb2x0aXBcIlxuICAgIGNsYXNzPVwidG9vbHRpcFwiXG4gICAgW25nQ2xhc3NdPVwiWyd0b29sdGlwLS0nICsgcG9zaXRpb25dXCJcbiAgICBbY2xhc3MudG9vbHRpcC0tdmlzaWJsZV09XCJ2aXNpYmxlXCJcbiAgICBbbmdTdHlsZV09XCJ7XG4gICAgICAgIGxlZnQ6IGxlZnQgKyAncHgnLFxuICAgICAgICB0b3A6IHRvcCArICdweCcsXG4gICAgfVwiXG4+XG4gICAgQGlmIChlc2NhcGUpIHtcbiAgICAgICAgPHNwYW4gY2xhc3M9XCJ0b29sdGlwX19jb250ZW50XCI+XG4gICAgICAgICAgICB7eyB0b29sdGlwIH19XG4gICAgICAgIDwvc3Bhbj5cbiAgICB9IEBlbHNlIHtcbiAgICAgICAgPHNwYW5cbiAgICAgICAgICAgIGNsYXNzPVwidG9vbHRpcF9fY29udGVudFwiXG4gICAgICAgICAgICBbaW5uZXJIVE1MXT1cInRvb2x0aXBcIlxuICAgICAgICA+XG4gICAgICAgIDwvc3Bhbj5cbiAgICB9XG48L2Rpdj5cbiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidG9vbHRpcC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9hbmd1bGFyLWNvbXBvbmVudHMvdG9vbHRpcC9zcmMvbGliL3Rvb2x0aXAvdG9vbHRpcC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9hbmd1bGFyLWNvbXBvbmVudHMvdG9vbHRpcC9zcmMvbGliL3Rvb2x0aXAvdG9vbHRpcC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsT0FBTyxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDMUMsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7O0FBSWpEOzs7R0FHRztBQVFILE1BQU0sT0FBTyxnQkFBZ0I7SUFDekIsMkRBQTJEO0lBQzNDLE9BQU8sR0FBRyxLQUFLLENBQVMsRUFBRSxDQUFDLENBQUM7SUFFNUMsc0ZBQXNGO0lBQ3RFLFFBQVEsR0FBRyxLQUFLLENBQW1CLEtBQUssQ0FBQyxDQUFDO0lBRTFELHFGQUFxRjtJQUNyRSxPQUFPLEdBQUcsS0FBSyxDQUFVLEtBQUssQ0FBQyxDQUFDO0lBRWhELDBGQUEwRjtJQUMxRSxNQUFNLEdBQUcsS0FBSyxDQUFVLEtBQUssQ0FBQyxDQUFDO3dHQVh0QyxnQkFBZ0I7NEZBQWhCLGdCQUFnQix5a0JDaEI3Qixzb0JBb0JBLG9wQkROYyxPQUFPOzs0RkFFUixnQkFBZ0I7a0JBUDVCLFNBQVM7K0JBQ0ksV0FBVyxjQUdULElBQUksV0FDUCxDQUFDLE9BQU8sQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IE5nQ2xhc3MgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHsgQ29tcG9uZW50LCBpbnB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5pbXBvcnQgeyBUb29sdGlwUG9zaXRpb25zIH0gZnJvbSAnLi9tb2RlbHMvdG9vbHRpcC1wb3NpdGlvbic7XG5cbi8qKlxuICogQGRlc2NyaXB0aW9uIENvbXBvbmVudGUgZGUgYXByZXNlbnRhw6fDo28gZG8gdG9vbHRpcC4gVXRpbGl6YWRvIGludGVybmFtZW50ZSBwZWxhIGRpcmV0aXZhIGBUb29sdGlwRGlyZWN0aXZlYC5cbiAqIE8gcG9zaWNpb25hbWVudG8gw6kgZ2VyZW5jaWFkbyBwZWxvIENESyBPdmVybGF5IHZpYSBgVG9vbHRpcERpcmVjdGl2ZWAuXG4gKi9cbkBDb21wb25lbnQoe1xuICAgIHNlbGVjdG9yOiAncy10b29sdGlwJyxcbiAgICB0ZW1wbGF0ZVVybDogJy4vdG9vbHRpcC5jb21wb25lbnQuaHRtbCcsXG4gICAgc3R5bGVVcmxzOiBbJy4vdG9vbHRpcC5jb21wb25lbnQuc2NzcyddLFxuICAgIHN0YW5kYWxvbmU6IHRydWUsXG4gICAgaW1wb3J0czogW05nQ2xhc3NdLFxufSlcbmV4cG9ydCBjbGFzcyBUb29sdGlwQ29tcG9uZW50IHtcbiAgICAvKiogQGRlc2NyaXB0aW9uIFRleHRvIG91IEhUTUwgYSBzZXIgZXhpYmlkbyBubyB0b29sdGlwLiAqL1xuICAgIHB1YmxpYyByZWFkb25seSB0b29sdGlwID0gaW5wdXQ8c3RyaW5nPignJyk7XG5cbiAgICAvKiogQGRlc2NyaXB0aW9uIFBvc2nDp8OjbyBkbyB0b29sdGlwIOKAlCB1c2FkYSBwYXJhIHJlbmRlcml6YXIgYSBzZXRhIG5vIGxhZG8gY29ycmV0by4gKi9cbiAgICBwdWJsaWMgcmVhZG9ubHkgcG9zaXRpb24gPSBpbnB1dDxUb29sdGlwUG9zaXRpb25zPigndG9wJyk7XG5cbiAgICAvKiogQGRlc2NyaXB0aW9uIENvbnRyb2xhIGEgdmlzaWJpbGlkYWRlIChvcGFjaWRhZGUpIGRvIHRvb2x0aXAgdmlhIHRyYW5zacOnw6NvIENTUy4gKi9cbiAgICBwdWJsaWMgcmVhZG9ubHkgdmlzaWJsZSA9IGlucHV0PGJvb2xlYW4+KGZhbHNlKTtcblxuICAgIC8qKiBAZGVzY3JpcHRpb24gUXVhbmRvIGB0cnVlYCwgbyBjb250ZcO6ZG8gw6kgcmVuZGVyaXphZG8gY29tbyB0ZXh0byBwdXJvIChlc2NhcGEgSFRNTCkuICovXG4gICAgcHVibGljIHJlYWRvbmx5IGVzY2FwZSA9IGlucHV0PGJvb2xlYW4+KGZhbHNlKTtcbn1cblxuIiwiPGRpdlxuICAgIGNsYXNzPVwidG9vbHRpcCByZWxhdGl2ZSBtYXgtdy1bMjIwcHhdIGJyZWFrLXdvcmRzIHJvdW5kZWQteHNtYWxsIGJnLWdyYXlzY2FsZS0xMDAgcC0yIHRleHQtY2VudGVyIGZvbnQtb3Blbi1zYW5zIHRleHQtc20gZm9udC1ub3JtYWwgbGVhZGluZy1ub3JtYWwgdGV4dC1ncmF5c2NhbGUtMCB0cmFuc2l0aW9uLW9wYWNpdHkgZHVyYXRpb24tMzAwXCJcbiAgICBbY2xhc3Mub3BhY2l0eS0wXT1cIiF2aXNpYmxlKClcIlxuICAgIFtjbGFzcy5vcGFjaXR5LTEwMF09XCJ2aXNpYmxlKClcIlxuICAgIFtjbGFzcy50b29sdGlwLS12aXNpYmxlXT1cInZpc2libGUoKVwiXG4gICAgW25nQ2xhc3NdPVwiJ3Rvb2x0aXAtLScgKyBwb3NpdGlvbigpXCJcbj5cbiAgICBAaWYgKGVzY2FwZSgpKSB7XG4gICAgICAgIDxzcGFuIGNsYXNzPVwidG9vbHRpcF9fY29udGVudFwiPlxuICAgICAgICAgICAge3sgdG9vbHRpcCgpIH19XG4gICAgICAgIDwvc3Bhbj5cbiAgICB9IEBlbHNlIHtcbiAgICAgICAgPHNwYW5cbiAgICAgICAgICAgIGNsYXNzPVwidG9vbHRpcF9fY29udGVudFwiXG4gICAgICAgICAgICBbaW5uZXJIVE1MXT1cInRvb2x0aXAoKVwiXG4gICAgICAgID5cbiAgICAgICAgPC9zcGFuPlxuICAgIH1cbjwvZGl2PlxuXG4iXX0=