@fluid-topics/ft-tooltip 1.3.48 → 1.3.50

package/build/ft-tooltip.d.ts

@@ -1,10 +1,12 @@
 import { PropertyValues } from "lit";
-import { ElementDefinitionsMap, FtLitElement } from "@fluid-topics/ft-wc-utils";
+import { ElementDefinitionsMap } from "@fluid-topics/ft-wc-utils";
 import { FtTooltipProperties, Position } from "./ft-tooltip.properties";
-export declare class FtTooltip extends FtLitElement implements FtTooltipProperties {
+import { I18nAttributeValue } from "@fluid-topics/ft-i18n/build/decorators/i18nAttribute";
+import { FtLitElementWithI18n } from "@fluid-topics/ft-i18n";
+export declare class FtTooltip extends FtLitElementWithI18n implements FtTooltipProperties {
     static elementDefinitions: ElementDefinitionsMap;
     static styles: import("lit").CSSResult;
-    text: string;
+    text?: I18nAttributeValue;
     manual: boolean;
     inline: boolean;
     delay: number;

package/build/ft-tooltip.js

@@ -6,14 +6,15 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { html } from "lit";
 import { property, query, queryAssignedNodes, state } from "lit/decorators.js";
-import { Debouncer, designSystemVariables, eventPathContainsMatchingElement, FtLitElement, jsonProperty, numberProperty } from "@fluid-topics/ft-wc-utils";
-import { FtTypography } from "@fluid-topics/ft-typography";
+import { Debouncer, designSystemVariables, eventPathContainsMatchingElement, jsonProperty, numberProperty } from "@fluid-topics/ft-wc-utils";
+import { FtTypography, FtTypographyVariants } from "@fluid-topics/ft-typography";
 import { styles } from "./ft-tooltip.styles";
 import { computeOffsetPosition } from "@fluid-topics/ft-wc-utils/build/floating";
-class FtTooltip extends FtLitElement {
+import { i18nAttribute } from "@fluid-topics/ft-i18n/build/decorators/i18nAttribute";
+import { FtLitElementWithI18n } from "@fluid-topics/ft-i18n";
+class FtTooltip extends FtLitElementWithI18n {
     constructor() {
         super(...arguments);
-        this.text = "";
         this.manual = false;
         this.inline = false;
         this.delay = 500;
@@ -60,6 +61,7 @@ class FtTooltip extends FtLitElement {
         return this.validPositions.has(this.position) ? this.position : "bottom";
     }
     render() {
+        var _a, _b;
         return html `
             <div part="container"
                  class="ft-tooltip--container ${this.inline ? "ft-tooltip--inline" : ""}">
@@ -69,7 +71,9 @@ class FtTooltip extends FtLitElement {
                      ?hidden=${!this.visible}>
                     <div part="tooltip-content" class="ft-tooltip--content">
                         <slot name="text"></slot>
-                        <ft-typography variant="caption" ?hidden=${!this.text}>${this.text}</ft-typography>
+                        <ft-typography variant="${FtTypographyVariants.caption}" ?hidden=${!((_a = this.text) === null || _a === void 0 ? void 0 : _a.message)}>
+                            ${(_b = this.text) === null || _b === void 0 ? void 0 : _b.message}
+                        </ft-typography>
                     </div>
                 </div>
             </div>
@@ -139,7 +143,7 @@ class FtTooltip extends FtLitElement {
         const manualCurrentValue = this.manual;
         this.manual = true;
         const currentText = this.text;
-        this.text = text;
+        this.text = { message: text };
         await this.show(duration);
         this.text = currentText;
         this.manual = manualCurrentValue;
@@ -211,7 +215,7 @@ FtTooltip.elementDefinitions = {
 };
 FtTooltip.styles = styles;
 __decorate([
-    property()
+    i18nAttribute()
 ], FtTooltip.prototype, "text", void 0);
 __decorate([
     property({ type: Boolean })