@nectary/components 5.37.8 → 5.38.0

package/bundle.js

@@ -8028,13 +8028,14 @@ class EmojiPicker extends NectaryElement {
   }
 }
 defineCustomElement("sinch-emoji-picker", EmojiPicker);
-const templateHTML$M = '<style>:host{display:block}#wrapper{display:flex;flex-direction:column;width:100%}#bottom,#top{display:flex;align-items:baseline}#top{height:24px;margin-bottom:2px}#top.empty{display:none}#additional,#invalid,#label,#optional{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#label{font:var(--sinch-comp-field-font-label);color:var(--sinch-comp-field-color-default-label-initial)}#optional{flex:1;font:var(--sinch-comp-field-font-optional);color:var(--sinch-comp-field-color-default-optional-initial);text-align:right}#additional{flex:1;text-align:right;font:var(--sinch-comp-field-font-additional);color:var(--sinch-comp-field-color-default-additional-initial);line-height:20px;margin-top:2px}#additional:empty{display:none}#invalid{font:var(--sinch-comp-field-font-invalid);color:var(--sinch-comp-field-color-invalid-text-initial);line-height:20px;margin-top:2px}#invalid:empty{display:none}#tooltip{align-self:center;margin:0 8px;display:flex}#tooltip.empty{display:none}:host([disabled]) #label{color:var(--sinch-comp-field-color-disabled-label-initial)}:host([disabled]) #additional{color:var(--sinch-comp-field-color-disabled-additional-initial)}:host([disabled]) #optional{color:var(--sinch-comp-field-color-disabled-optional-initial)}</style><div id="wrapper"><div id="top"><label id="label" for="input"></label><div id="tooltip"><slot name="tooltip"></slot></div><span id="optional"></span></div><slot name="input"></slot><div id="bottom"><div id="invalid"></div><div id="additional"></div></div></div>';
+const templateHTML$M = '<style>:host{display:block}#wrapper{display:flex;flex-direction:column;width:100%}#bottom,#top{display:flex;align-items:baseline}#top{height:24px;margin-bottom:2px}#top.empty{display:none}#additional,#invalid,#label,#optional{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#label{font:var(--sinch-comp-field-font-label);color:var(--sinch-comp-field-color-default-label-initial)}#optional{flex:1;font:var(--sinch-comp-field-font-optional);color:var(--sinch-comp-field-color-default-optional-initial);text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#optional:empty{display:none}#additional{flex:1;text-align:right;font:var(--sinch-comp-field-font-additional);color:var(--sinch-comp-field-color-default-additional-initial);line-height:20px;margin-top:2px}#additional:empty{display:none}#invalid{font:var(--sinch-comp-field-font-invalid);color:var(--sinch-comp-field-color-invalid-text-initial);line-height:20px;margin-top:2px}#invalid:empty{display:none}#tooltip{align-self:center;margin:0 8px;display:flex}#tooltip.empty{display:none}:host([disabled]) #label{color:var(--sinch-comp-field-color-disabled-label-initial)}:host([disabled]) #additional{color:var(--sinch-comp-field-color-disabled-additional-initial)}:host([disabled]) #optional{color:var(--sinch-comp-field-color-disabled-optional-initial)}</style><div id="wrapper"><div id="top"><label id="label" for="input"></label><div id="tooltip"><slot name="tooltip"></slot></div><sinch-tooltip id="optional-tooltip" allow-scroll><span id="optional"></span></sinch-tooltip></div><slot name="input"></slot><div id="bottom"><div id="invalid"></div><div id="additional"></div></div></div>';
 const template$M = document.createElement("template");
 template$M.innerHTML = templateHTML$M;
 class Field extends NectaryElement {
   topSection;
   #$label;
   #$optionalText;
+  #$optionalTooltip;
   #$additionalText;
   #$invalidText;
   #$inputSlot;
@@ -8048,6 +8049,7 @@ class Field extends NectaryElement {
     this.topSection = shadowRoot.querySelector("#top");
     this.#$label = shadowRoot.querySelector("#label");
     this.#$optionalText = shadowRoot.querySelector("#optional");
+    this.#$optionalTooltip = shadowRoot.querySelector("#optional-tooltip");
     this.#$additionalText = shadowRoot.querySelector("#additional");
     this.#$invalidText = shadowRoot.querySelector("#invalid");
     this.#$inputSlot = shadowRoot.querySelector('slot[name="input"]');
@@ -8071,6 +8073,7 @@ class Field extends NectaryElement {
     return [
       "label",
       "optionaltext",
+      "optionaltooltip",
       "additionaltext",
       "invalidtext",
       "disabled"
@@ -8091,6 +8094,10 @@ class Field extends NectaryElement {
         this.#$optionalText.textContent = newVal;
         break;
       }
+      case "optionaltooltip": {
+        updateAttribute(this.#$optionalTooltip, "text", newVal);
+        break;
+      }
       case "additionaltext": {
         this.#$additionalText.textContent = newVal;
         break;
@@ -8121,6 +8128,12 @@ class Field extends NectaryElement {
   get optionalText() {
     return getAttribute(this, "optionaltext");
   }
+  set optionalTooltip(value) {
+    updateAttribute(this, "optionaltooltip", value);
+  }
+  get optionalTooltip() {
+    return getAttribute(this, "optionaltooltip");
+  }
   set additionalText(value) {
     updateAttribute(this, "additionaltext", value);
   }

package/field/index.d.ts

@@ -1,3 +1,4 @@
+import '../tooltip';
 import { NectaryElement } from '../utils';
 export * from './types';
 export declare class Field extends NectaryElement {
@@ -13,6 +14,8 @@ export declare class Field extends NectaryElement {
     get label(): string | null;
     set optionalText(value: string | null);
     get optionalText(): string | null;
+    set optionalTooltip(value: string | null);
+    get optionalTooltip(): string | null;
     set additionalText(value: string | null);
     get additionalText(): string | null;
     set invalidText(value: string | null);

package/field/index.js

@@ -1,13 +1,15 @@
+import "../tooltip/index.js";
 import { getAttribute, setClass, isAttrEqual, updateBooleanAttribute, isAttrTrue, updateAttribute, getBooleanAttribute } from "../utils/dom.js";
 import { defineCustomElement, NectaryElement } from "../utils/element.js";
 import { getFirstSlotElement } from "../utils/slot.js";
-const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:column;width:100%}#bottom,#top{display:flex;align-items:baseline}#top{height:24px;margin-bottom:2px}#top.empty{display:none}#additional,#invalid,#label,#optional{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#label{font:var(--sinch-comp-field-font-label);color:var(--sinch-comp-field-color-default-label-initial)}#optional{flex:1;font:var(--sinch-comp-field-font-optional);color:var(--sinch-comp-field-color-default-optional-initial);text-align:right}#additional{flex:1;text-align:right;font:var(--sinch-comp-field-font-additional);color:var(--sinch-comp-field-color-default-additional-initial);line-height:20px;margin-top:2px}#additional:empty{display:none}#invalid{font:var(--sinch-comp-field-font-invalid);color:var(--sinch-comp-field-color-invalid-text-initial);line-height:20px;margin-top:2px}#invalid:empty{display:none}#tooltip{align-self:center;margin:0 8px;display:flex}#tooltip.empty{display:none}:host([disabled]) #label{color:var(--sinch-comp-field-color-disabled-label-initial)}:host([disabled]) #additional{color:var(--sinch-comp-field-color-disabled-additional-initial)}:host([disabled]) #optional{color:var(--sinch-comp-field-color-disabled-optional-initial)}</style><div id="wrapper"><div id="top"><label id="label" for="input"></label><div id="tooltip"><slot name="tooltip"></slot></div><span id="optional"></span></div><slot name="input"></slot><div id="bottom"><div id="invalid"></div><div id="additional"></div></div></div>';
+const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:column;width:100%}#bottom,#top{display:flex;align-items:baseline}#top{height:24px;margin-bottom:2px}#top.empty{display:none}#additional,#invalid,#label,#optional{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#label{font:var(--sinch-comp-field-font-label);color:var(--sinch-comp-field-color-default-label-initial)}#optional{flex:1;font:var(--sinch-comp-field-font-optional);color:var(--sinch-comp-field-color-default-optional-initial);text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#optional:empty{display:none}#additional{flex:1;text-align:right;font:var(--sinch-comp-field-font-additional);color:var(--sinch-comp-field-color-default-additional-initial);line-height:20px;margin-top:2px}#additional:empty{display:none}#invalid{font:var(--sinch-comp-field-font-invalid);color:var(--sinch-comp-field-color-invalid-text-initial);line-height:20px;margin-top:2px}#invalid:empty{display:none}#tooltip{align-self:center;margin:0 8px;display:flex}#tooltip.empty{display:none}:host([disabled]) #label{color:var(--sinch-comp-field-color-disabled-label-initial)}:host([disabled]) #additional{color:var(--sinch-comp-field-color-disabled-additional-initial)}:host([disabled]) #optional{color:var(--sinch-comp-field-color-disabled-optional-initial)}</style><div id="wrapper"><div id="top"><label id="label" for="input"></label><div id="tooltip"><slot name="tooltip"></slot></div><sinch-tooltip id="optional-tooltip" allow-scroll><span id="optional"></span></sinch-tooltip></div><slot name="input"></slot><div id="bottom"><div id="invalid"></div><div id="additional"></div></div></div>';
 const template = document.createElement("template");
 template.innerHTML = templateHTML;
 class Field extends NectaryElement {
   topSection;
   #$label;
   #$optionalText;
+  #$optionalTooltip;
   #$additionalText;
   #$invalidText;
   #$inputSlot;
@@ -21,6 +23,7 @@ class Field extends NectaryElement {
     this.topSection = shadowRoot.querySelector("#top");
     this.#$label = shadowRoot.querySelector("#label");
     this.#$optionalText = shadowRoot.querySelector("#optional");
+    this.#$optionalTooltip = shadowRoot.querySelector("#optional-tooltip");
     this.#$additionalText = shadowRoot.querySelector("#additional");
     this.#$invalidText = shadowRoot.querySelector("#invalid");
     this.#$inputSlot = shadowRoot.querySelector('slot[name="input"]');
@@ -44,6 +47,7 @@ class Field extends NectaryElement {
     return [
       "label",
       "optionaltext",
+      "optionaltooltip",
       "additionaltext",
       "invalidtext",
       "disabled"
@@ -64,6 +68,10 @@ class Field extends NectaryElement {
         this.#$optionalText.textContent = newVal;
         break;
       }
+      case "optionaltooltip": {
+        updateAttribute(this.#$optionalTooltip, "text", newVal);
+        break;
+      }
       case "additionaltext": {
         this.#$additionalText.textContent = newVal;
         break;
@@ -94,6 +102,12 @@ class Field extends NectaryElement {
   get optionalText() {
     return getAttribute(this, "optionaltext");
   }
+  set optionalTooltip(value) {
+    updateAttribute(this, "optionaltooltip", value);
+  }
+  get optionalTooltip() {
+    return getAttribute(this, "optionaltooltip");
+  }
   set additionalText(value) {
     updateAttribute(this, "additionaltext", value);
   }

package/field/types.d.ts

@@ -4,6 +4,8 @@ export type TSinchFieldProps = {
     label?: string;
     /** Optional text */
     optionalText?: string;
+    /** Tooltip text for optional text */
+    optionalTooltip?: string;
     /** Additional text */
     additionalText?: string;
     /** Invalid text, controls the overall invalid state of the text field */

package/package.json

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