@getflip/swirl-components 0.406.0 → 0.407.0

package/dist/collection/components/swirl-tooltip/swirl-tooltip.js

@@ -7,6 +7,7 @@ export class SwirlTooltip {
         this.active = true;
         this.delay = 200;
         this.intent = "default";
+        this.maxWidth = "17.5rem";
         this.position = "top";
         this.positioning = "absolute";
         this.trigger = ["focus", "hover"];
@@ -135,7 +136,7 @@ export class SwirlTooltip {
             "tooltip--active": this.active,
             "tooltip--visible": this.visible,
         });
-        return (h(Host, { key: 'e418f075955973796c17ba8994cfb63284b99d13', onKeydown: this.onKeydown }, h("span", { key: '410ac8bc16773617287b73b4676682b4e887eeb3', class: className }, h("span", { key: 'e111062966a91142006124131819095cd3e41e69', class: "tooltip__reference", "aria-describedby": "tooltip", onFocusout: this.onFocusOut, onClick: this.hide, onFocusin: this.onFocusIn }, h("slot", { key: 'fc43ad1b5a655a0512157a6cc6c9877c592caa1c' })), h("span", { key: '360545df93f2ea5b655166769d1a3d95c8dca299', class: "tooltip__popper", ref: (el) => (this.popperEl = el), style: {
+        return (h(Host, { key: '96bfe5772085b0355180e0a5529ee02826958de1', onKeydown: this.onKeydown }, h("span", { key: 'b3a26fc2aabd2446a460e3e57e869d3c53e94df1', class: className }, h("span", { key: '16e9df7f2d679688ef70811871a96a7f2f0de121', class: "tooltip__reference", "aria-describedby": "tooltip", onFocusout: this.onFocusOut, onClick: this.hide, onFocusin: this.onFocusIn }, h("slot", { key: 'e8f975020ccf67878b639fe9f81d8db972b105ed' })), h("span", { key: '308db04b1ee01609715fd9402525ff800c400ce1', class: "tooltip__popper", ref: (el) => (this.popperEl = el), style: {
                 top: Boolean(this.actualPosition)
                     ? `${this.actualPosition?.y}px`
                     : "",
@@ -143,7 +144,8 @@ export class SwirlTooltip {
                     ? `${this.actualPosition?.x}px`
                     : "",
                 position: this.positioning,
-            } }, this.visible && (h("span", { key: 'b4af0145c86950a1a863f73d63f77000bd98f95a', class: "tooltip__bubble", id: "tooltip", part: "tooltip__bubble", role: "tooltip" }, h("span", { key: '84a35eb842594411f9deac1c47b04034bdd64362', class: "tooltip__content", innerHTML: this.content }))), h("span", { key: 'c6796dee53c0fd6d1fbc2a39d6495f91360671fc', class: "tooltip__arrow", ref: (el) => (this.arrowElement = el), style: {
+                maxWidth: this.maxWidth,
+            } }, this.visible && (h("span", { key: 'aac57d3834798bb48566e23911c810237342d18c', class: "tooltip__bubble", id: "tooltip", part: "tooltip__bubble", role: "tooltip" }, h("span", { key: 'ac370eaeca8aa321ee1785f557bf0bb0db2103bb', class: "tooltip__content", innerHTML: this.content }))), h("span", { key: 'c60fb13d7681cd5de23d9d8ccfc17068f9201468', class: "tooltip__arrow", ref: (el) => (this.arrowElement = el), style: {
                 ...this.arrowStyles,
                 visibility: this.visible ? "visible" : "hidden",
             } })))));
@@ -247,6 +249,26 @@ export class SwirlTooltip {
                 "reflect": false,
                 "defaultValue": "\"default\""
             },
+            "maxWidth": {
+                "type": "string",
+                "attribute": "max-width",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"17.5rem\""
+            },
             "position": {
                 "type": "string",
                 "attribute": "position",

package/dist/collection/components/swirl-tooltip/swirl-tooltip.stories.js

@@ -29,6 +29,6 @@ const Template = (args) => {
 };
 export const SwirlTooltip = Template.bind({});
 SwirlTooltip.args = {
-    content: `Tooltip`,
+    content: `Lorem ipsum dolor sit amet, contetur sadipscing.`,
     position: "top",
 };