@nectary/components 5.6.1 → 5.6.3

package/bundle.js

@@ -3427,7 +3427,7 @@ const getPopOrientation$1 = (orientation) => {
   }
   return orientation;
 };
-const templateHTML$Q = '<style>:host{display:contents}#content-wrapper{padding-bottom:8px;filter:drop-shadow(var(--sinch-comp-tooltip-shadow))}:host([orientation=left]) #content-wrapper{padding-bottom:0;padding-right:8px}:host([orientation=right]) #content-wrapper{padding-bottom:0;padding-left:8px}:host([orientation^=bottom]) #content-wrapper{padding-bottom:0;padding-top:8px}#content{position:relative;display:block;max-width:300px;padding:2px 6px;box-sizing:border-box;background-color:var(--sinch-local-color-background);border-radius:var(--sinch-comp-tooltip-shape-radius);pointer-events:none;opacity:0;--sinch-local-color-background:var(--sinch-comp-tooltip-color-background);--sinch-global-color-text:var(--sinch-comp-tooltip-color-text)}#text{word-break:break-word;pointer-events:none;--sinch-comp-text-font:var(--sinch-comp-tooltip-font-body)}#tip{position:absolute;left:50%;top:100%;transform:translateX(-50%) rotate(0);transform-origin:top center;fill:var(--sinch-local-color-background);pointer-events:none}#tip.hidden{display:none}:host([orientation=left]) #tip{transform:translateX(-50%) rotate(270deg);top:50%;left:100%}:host([orientation=right]) #tip{transform:translateX(-50%) rotate(90deg);top:50%;left:0}:host([orientation^=bottom]) #tip{transform:translateX(-50%) rotate(180deg);top:0}:host([text-align=right]) #text{--sinch-comp-text-align:right}:host([text-align=center]) #text{--sinch-comp-text-align:center}:host([text-align=left]) #text{--sinch-comp-text-align:left}</style><sinch-pop id="pop" allow-scroll hide-outside-viewport><slot id="target" slot="target"></slot><div id="content-wrapper" slot="content"><div id="content"><sinch-text id="text" type="s"></sinch-text><svg id="tip" width="8" height="4" aria-hidden="true"><path d="m4 4 4-4h-8l4 4Z"/></svg></div></div></sinch-pop>';
+const templateHTML$Q = '<style>:host{display:contents}#content-wrapper{padding-bottom:8px;filter:drop-shadow(var(--sinch-comp-tooltip-shadow))}:host([orientation=left]) #content-wrapper{padding-bottom:0;padding-right:8px}:host([orientation=right]) #content-wrapper{padding-bottom:0;padding-left:8px}:host([orientation^=bottom]) #content-wrapper{padding-bottom:0;padding-top:8px}#content{position:relative;display:block;max-width:300px;padding:2px 6px;box-sizing:border-box;background-color:var(--sinch-local-color-background);border-radius:var(--sinch-comp-tooltip-shape-radius);pointer-events:none;opacity:0;--sinch-local-color-background:var(--sinch-comp-tooltip-color-background);--sinch-global-color-text:var(--sinch-comp-tooltip-color-text)}#text{word-break:break-word;pointer-events:none;--sinch-comp-text-font:var(--sinch-comp-tooltip-font-body)}#tip{position:absolute;left:50%;top:100%;transform:translateX(-50%) rotate(0);transform-origin:top center;fill:var(--sinch-local-color-background);pointer-events:none}#tip.hidden{display:none}:host([orientation=left]) #tip{transform:translateX(-50%) rotate(270deg);top:50%;left:100%}:host([orientation=right]) #tip{transform:translateX(-50%) rotate(90deg);top:50%;left:0}:host([orientation^=bottom]) #tip{transform:translateX(-50%) rotate(180deg);top:0}:host([text-align=right]) #text{--sinch-comp-text-align:right}:host([text-align=center]) #text{--sinch-comp-text-align:center}:host([text-align=left]) #text{--sinch-comp-text-align:left}</style><sinch-pop id="pop" allow-scroll><slot id="target" slot="target"></slot><div id="content-wrapper" slot="content"><div id="content"><sinch-text id="text" type="s"></sinch-text><svg id="tip" width="8" height="4" aria-hidden="true"><path d="m4 4 4-4h-8l4 4Z"/></svg></div></div></sinch-pop>';
 const TIP_SIZE$1 = 8;
 const SHOW_DELAY_SLOW = 1e3;
 const SHOW_DELAY_FAST = 250;
@@ -3479,6 +3479,7 @@ class Tooltip extends NectaryElement {
     this.addEventListener("-show", this.#onShowReactHandler, options);
     this.addEventListener("-hide", this.#onHideReactHandler, options);
     updateAttribute(this.#$pop, "orientation", getPopOrientation$1(this.orientation));
+    updateBooleanAttribute(this.#$pop, "hide-outside-viewport", !this.showOutsideViewport);
     this.#updateText();
   }
   disconnectedCallback() {
@@ -3495,7 +3496,8 @@ class Tooltip extends NectaryElement {
       "text-align",
       "type",
       "aria-label",
-      "aria-description"
+      "aria-description",
+      "show-outside-viewport"
     ];
   }
   attributeChangedCallback(name, _, newVal) {
@@ -3527,6 +3529,10 @@ class Tooltip extends NectaryElement {
         updateAttribute(this.#$pop, name, newVal);
         break;
       }
+      case "show-outside-viewport": {
+        updateBooleanAttribute(this.#$pop, "hide-outside-viewport", !this.showOutsideViewport);
+        break;
+      }
       case "is-opened": {
         this.#tooltipState.updateOptions({
           isOpened: this.isOpenedControlled
@@ -3545,6 +3551,9 @@ class Tooltip extends NectaryElement {
     const isOpenedAttr = getAttribute(this, "is-opened");
     return isOpenedAttr === null ? void 0 : isOpenedAttr !== "false";
   }
+  get showOutsideViewport() {
+    return getBooleanAttribute(this, "show-outside-viewport");
+  }
   get text() {
     return getAttribute(this, "text", "");
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nectary/components",
-  "version": "5.6.1",
+  "version": "5.6.3",
   "files": [
     "**/*/*.css",
     "**/*/*.json",
@@ -24,7 +24,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.22.15",
-    "@nectary/assets": "3.2.1"
+    "@nectary/assets": "3.3.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.22.15",
@@ -40,6 +40,6 @@
     "vite": "^7.0.6"
   },
   "peerDependencies": {
-    "@nectary/theme-base": "1.6.0"
+    "@nectary/theme-base": "1.7.0"
   }
 }

package/tooltip/index.d.ts

@@ -12,6 +12,7 @@ export declare class Tooltip extends NectaryElement {
     static get observedAttributes(): string[];
     attributeChangedCallback(name: string, _: string | null, newVal: string | null): void;
     get isOpenedControlled(): boolean | undefined;
+    get showOutsideViewport(): boolean;
     get text(): string;
     set text(value: string);
     get orientation(): TSinchTooltipOrientation;

package/tooltip/index.js

@@ -1,12 +1,12 @@
 import "../text/index.js";
 import "../pop/index.js";
-import { shouldReduceMotion, updateAttribute, updateBooleanAttribute, getAttribute, getLiteralAttribute, updateLiteralAttribute, setClass } from "../utils/dom.js";
+import { shouldReduceMotion, updateAttribute, updateBooleanAttribute, getAttribute, getBooleanAttribute, getLiteralAttribute, updateLiteralAttribute, setClass } from "../utils/dom.js";
 import { defineCustomElement, NectaryElement } from "../utils/element.js";
 import { rectOverlap } from "../utils/rect.js";
 import { getReactEventHandler } from "../utils/get-react-event-handler.js";
 import { TooltipState } from "./tooltip-state.js";
 import { getPopOrientation, orientationValues, textAlignValues, typeValues } from "./utils.js";
-const templateHTML = '<style>:host{display:contents}#content-wrapper{padding-bottom:8px;filter:drop-shadow(var(--sinch-comp-tooltip-shadow))}:host([orientation=left]) #content-wrapper{padding-bottom:0;padding-right:8px}:host([orientation=right]) #content-wrapper{padding-bottom:0;padding-left:8px}:host([orientation^=bottom]) #content-wrapper{padding-bottom:0;padding-top:8px}#content{position:relative;display:block;max-width:300px;padding:2px 6px;box-sizing:border-box;background-color:var(--sinch-local-color-background);border-radius:var(--sinch-comp-tooltip-shape-radius);pointer-events:none;opacity:0;--sinch-local-color-background:var(--sinch-comp-tooltip-color-background);--sinch-global-color-text:var(--sinch-comp-tooltip-color-text)}#text{word-break:break-word;pointer-events:none;--sinch-comp-text-font:var(--sinch-comp-tooltip-font-body)}#tip{position:absolute;left:50%;top:100%;transform:translateX(-50%) rotate(0);transform-origin:top center;fill:var(--sinch-local-color-background);pointer-events:none}#tip.hidden{display:none}:host([orientation=left]) #tip{transform:translateX(-50%) rotate(270deg);top:50%;left:100%}:host([orientation=right]) #tip{transform:translateX(-50%) rotate(90deg);top:50%;left:0}:host([orientation^=bottom]) #tip{transform:translateX(-50%) rotate(180deg);top:0}:host([text-align=right]) #text{--sinch-comp-text-align:right}:host([text-align=center]) #text{--sinch-comp-text-align:center}:host([text-align=left]) #text{--sinch-comp-text-align:left}</style><sinch-pop id="pop" allow-scroll hide-outside-viewport><slot id="target" slot="target"></slot><div id="content-wrapper" slot="content"><div id="content"><sinch-text id="text" type="s"></sinch-text><svg id="tip" width="8" height="4" aria-hidden="true"><path d="m4 4 4-4h-8l4 4Z"/></svg></div></div></sinch-pop>';
+const templateHTML = '<style>:host{display:contents}#content-wrapper{padding-bottom:8px;filter:drop-shadow(var(--sinch-comp-tooltip-shadow))}:host([orientation=left]) #content-wrapper{padding-bottom:0;padding-right:8px}:host([orientation=right]) #content-wrapper{padding-bottom:0;padding-left:8px}:host([orientation^=bottom]) #content-wrapper{padding-bottom:0;padding-top:8px}#content{position:relative;display:block;max-width:300px;padding:2px 6px;box-sizing:border-box;background-color:var(--sinch-local-color-background);border-radius:var(--sinch-comp-tooltip-shape-radius);pointer-events:none;opacity:0;--sinch-local-color-background:var(--sinch-comp-tooltip-color-background);--sinch-global-color-text:var(--sinch-comp-tooltip-color-text)}#text{word-break:break-word;pointer-events:none;--sinch-comp-text-font:var(--sinch-comp-tooltip-font-body)}#tip{position:absolute;left:50%;top:100%;transform:translateX(-50%) rotate(0);transform-origin:top center;fill:var(--sinch-local-color-background);pointer-events:none}#tip.hidden{display:none}:host([orientation=left]) #tip{transform:translateX(-50%) rotate(270deg);top:50%;left:100%}:host([orientation=right]) #tip{transform:translateX(-50%) rotate(90deg);top:50%;left:0}:host([orientation^=bottom]) #tip{transform:translateX(-50%) rotate(180deg);top:0}:host([text-align=right]) #text{--sinch-comp-text-align:right}:host([text-align=center]) #text{--sinch-comp-text-align:center}:host([text-align=left]) #text{--sinch-comp-text-align:left}</style><sinch-pop id="pop" allow-scroll><slot id="target" slot="target"></slot><div id="content-wrapper" slot="content"><div id="content"><sinch-text id="text" type="s"></sinch-text><svg id="tip" width="8" height="4" aria-hidden="true"><path d="m4 4 4-4h-8l4 4Z"/></svg></div></div></sinch-pop>';
 const TIP_SIZE = 8;
 const SHOW_DELAY_SLOW = 1e3;
 const SHOW_DELAY_FAST = 250;
@@ -58,6 +58,7 @@ class Tooltip extends NectaryElement {
     this.addEventListener("-show", this.#onShowReactHandler, options);
     this.addEventListener("-hide", this.#onHideReactHandler, options);
     updateAttribute(this.#$pop, "orientation", getPopOrientation(this.orientation));
+    updateBooleanAttribute(this.#$pop, "hide-outside-viewport", !this.showOutsideViewport);
     this.#updateText();
   }
   disconnectedCallback() {
@@ -74,7 +75,8 @@ class Tooltip extends NectaryElement {
       "text-align",
       "type",
       "aria-label",
-      "aria-description"
+      "aria-description",
+      "show-outside-viewport"
     ];
   }
   attributeChangedCallback(name, _, newVal) {
@@ -106,6 +108,10 @@ class Tooltip extends NectaryElement {
         updateAttribute(this.#$pop, name, newVal);
         break;
       }
+      case "show-outside-viewport": {
+        updateBooleanAttribute(this.#$pop, "hide-outside-viewport", !this.showOutsideViewport);
+        break;
+      }
       case "is-opened": {
         this.#tooltipState.updateOptions({
           isOpened: this.isOpenedControlled
@@ -124,6 +130,9 @@ class Tooltip extends NectaryElement {
     const isOpenedAttr = getAttribute(this, "is-opened");
     return isOpenedAttr === null ? void 0 : isOpenedAttr !== "false";
   }
+  get showOutsideViewport() {
+    return getBooleanAttribute(this, "show-outside-viewport");
+  }
   get text() {
     return getAttribute(this, "text", "");
   }

package/tooltip/types.d.ts

@@ -12,6 +12,7 @@ export type TSinchTooltipProps = {
     type?: TSinchTooltipType;
     /** Text Align */
     'text-align'?: TSinchTooltipTextAlign;
+    'show-outside-viewport'?: boolean;
     readonly footprintRect?: TRect;
     readonly tooltipRect?: TRect;
 };