@nectary/components 5.6.6 → 5.7.0

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><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"><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;
@@ -3497,7 +3497,8 @@ class Tooltip extends NectaryElement {
       "type",
       "aria-label",
       "aria-description",
-      "show-outside-viewport"
+      "show-outside-viewport",
+      "allow-scroll"
     ];
   }
   attributeChangedCallback(name, _, newVal) {
@@ -3544,6 +3545,11 @@ class Tooltip extends NectaryElement {
           updateBooleanAttribute(this.#$pop, "disable-backdrop-close", false);
           this.#tooltipState.hide();
         }
+        break;
+      }
+      case "allow-scroll": {
+        updateAttribute(this.#$pop, "allow-scroll", newVal);
+        break;
       }
     }
   }
@@ -3650,6 +3656,10 @@ class Tooltip extends NectaryElement {
   }
   #updateTipOrientation = () => {
     const orient = this.orientation;
+    if (!("footprintRect" in this.#$pop)) {
+      requestAnimationFrame(this.#updateTipOrientation);
+      return;
+    }
     const targetRect = this.#$pop.footprintRect;
     const contentRect = this.#$content.getBoundingClientRect();
     const diffX = targetRect.x - contentRect.x;
@@ -5289,9 +5299,12 @@ class Input extends NectaryElement {
       "value",
       "placeholder",
       "mask",
+      "max",
+      "min",
       "invalid",
       "disabled",
       "size",
+      "step",
       "autocomplete",
       "autofocus",
       "data-size",
@@ -5389,7 +5402,10 @@ class Input extends NectaryElement {
       }
       case "autocomplete":
       case "maxlength":
-      case "required": {
+      case "required":
+      case "max":
+      case "min":
+      case "step": {
         updateAttribute(this.#$input, name, newVal);
         break;
       }
@@ -6581,6 +6597,7 @@ class Field extends NectaryElement {
     this.shouldShowTopSection();
     this.#$label.addEventListener("click", this.#onLabelClick, options);
     this.#$tooltipSlot.addEventListener("slotchange", this.#onTooltipSlotChange, options);
+    this.#$inputSlot.addEventListener("slotchange", this.#onInputSlotChange, options);
   }
   disconnectedCallback() {
     this.#controller.abort();
@@ -6664,6 +6681,13 @@ class Field extends NectaryElement {
   #onTooltipSlotChange = () => {
     setClass(this.#$tooltipWrapper, "empty", this.#$tooltipSlot.assignedElements().length === 0);
   };
+  #onInputSlotChange = () => {
+    const inputElement = getFirstSlotElement(this.#$inputSlot);
+    const labelText = this.#$label.textContent;
+    if (inputElement !== null && labelText != null && labelText.length > 0) {
+      inputElement.setAttribute("aria-label", "label");
+    }
+  };
 }
 defineCustomElement("sinch-field", Field);
 const doFilesSatisfySize$1 = (files, size) => {

package/field/index.js

@@ -34,6 +34,7 @@ class Field extends NectaryElement {
     this.shouldShowTopSection();
     this.#$label.addEventListener("click", this.#onLabelClick, options);
     this.#$tooltipSlot.addEventListener("slotchange", this.#onTooltipSlotChange, options);
+    this.#$inputSlot.addEventListener("slotchange", this.#onInputSlotChange, options);
   }
   disconnectedCallback() {
     this.#controller.abort();
@@ -117,6 +118,13 @@ class Field extends NectaryElement {
   #onTooltipSlotChange = () => {
     setClass(this.#$tooltipWrapper, "empty", this.#$tooltipSlot.assignedElements().length === 0);
   };
+  #onInputSlotChange = () => {
+    const inputElement = getFirstSlotElement(this.#$inputSlot);
+    const labelText = this.#$label.textContent;
+    if (inputElement !== null && labelText != null && labelText.length > 0) {
+      inputElement.setAttribute("aria-label", "label");
+    }
+  };
 }
 defineCustomElement("sinch-field", Field);
 export {

package/input/index.js

@@ -133,9 +133,12 @@ class Input extends NectaryElement {
       "value",
       "placeholder",
       "mask",
+      "max",
+      "min",
       "invalid",
       "disabled",
       "size",
+      "step",
       "autocomplete",
       "autofocus",
       "data-size",
@@ -233,7 +236,10 @@ class Input extends NectaryElement {
       }
       case "autocomplete":
       case "maxlength":
-      case "required": {
+      case "required":
+      case "max":
+      case "min":
+      case "step": {
         updateAttribute(this.#$input, name, newVal);
         break;
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nectary/components",
-  "version": "5.6.6",
+  "version": "5.7.0",
   "files": [
     "**/*/*.css",
     "**/*/*.json",

package/tooltip/index.js

@@ -6,7 +6,7 @@ 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><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"><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;
@@ -76,7 +76,8 @@ class Tooltip extends NectaryElement {
       "type",
       "aria-label",
       "aria-description",
-      "show-outside-viewport"
+      "show-outside-viewport",
+      "allow-scroll"
     ];
   }
   attributeChangedCallback(name, _, newVal) {
@@ -123,6 +124,11 @@ class Tooltip extends NectaryElement {
           updateBooleanAttribute(this.#$pop, "disable-backdrop-close", false);
           this.#tooltipState.hide();
         }
+        break;
+      }
+      case "allow-scroll": {
+        updateAttribute(this.#$pop, "allow-scroll", newVal);
+        break;
       }
     }
   }
@@ -229,6 +235,10 @@ class Tooltip extends NectaryElement {
   }
   #updateTipOrientation = () => {
     const orient = this.orientation;
+    if (!("footprintRect" in this.#$pop)) {
+      requestAnimationFrame(this.#updateTipOrientation);
+      return;
+    }
     const targetRect = this.#$pop.footprintRect;
     const contentRect = this.#$content.getBoundingClientRect();
     const diffX = targetRect.x - contentRect.x;

package/tooltip/types.d.ts

@@ -15,6 +15,11 @@ export type TSinchTooltipProps = {
     'show-outside-viewport'?: boolean;
     readonly footprintRect?: TRect;
     readonly tooltipRect?: TRect;
+    /**
+     * Whether or not the tooltip allows scrolling, blocks by default, setting it
+     * to true can have unexpected behavior in dialogs
+     */
+    'allow-scroll'?: boolean;
 };
 export type TSinchTooltipEvents = {
     /** Show event handler */