@nectary/components 2.8.4 → 2.8.6

package/dialog/index.js

@@ -3,7 +3,7 @@ import '../icon';
 import '../stop-events';
 import '../title';
 import { defineCustomElement, getAttribute, getBooleanAttribute, getRect, isAttrTrue, updateAttribute, getReactEventHandler, NectaryElement, updateBooleanAttribute, setClass, isTargetEqual, isAttrEqual } from '../utils';
-const templateHTML = '<style>:host{display:contents;--sinch-comp-dialog-max-width:512px;--sinch-comp-dialog-max-height:90vh}#dialog{position:fixed;left:0;right:0;margin:auto;display:flex;flex-direction:column;padding:24px 0;max-width:var(--sinch-comp-dialog-max-width);max-height:var(--sinch-comp-dialog-max-height);border-radius:var(--sinch-comp-dialog-shape-radius);box-sizing:border-box;contain:content;background-color:var(--sinch-comp-dialog-color-default-background-initial);border:none;box-shadow:var(--sinch-comp-dialog-shadow);outline:0}#dialog:not([open]){display:none}dialog::backdrop{background-color:#000;opacity:.55}#header{display:flex;flex-direction:row;align-items:flex-start;margin-bottom:12px;padding:0 24px;gap:8px;--sinch-global-size-icon:24px;--sinch-global-color-icon:var(--sinch-comp-dialog-color-default-icon-initial)}#caption{--sinch-global-color-text:var(--sinch-comp-dialog-color-default-title-initial);--sinch-comp-title-font:var(--sinch-comp-dialog-font-title)}#content{min-height:0;overflow:auto;padding:4px 24px}#action{display:flex;flex-direction:row;justify-content:flex-end;gap:16px;margin-top:20px;padding:0 24px}#action.empty{display:none}#close{position:relative;left:4px;top:-4px;margin-left:auto}</style><dialog id="dialog"><div id="header"><slot id="icon" name="icon"></slot><sinch-title id="caption" type="m" level="3"></sinch-title><sinch-icon-button id="close" size="s"><sinch-icon id="icon-close" slot="icon" name="close"></sinch-icon></sinch-icon-button></div><div id="content"><sinch-stop-events events="close"><slot name="content"></slot></sinch-stop-events></div><div id="action"><sinch-stop-events events="close"><slot name="buttons"></slot></sinch-stop-events></div></dialog>';
+const templateHTML = '<style>:host{display:contents;--sinch-comp-dialog-max-width:512px;--sinch-comp-dialog-max-height:90vh;--sinch-comp-dialog-width:fit-content}#dialog{position:fixed;left:0;right:0;margin:auto;display:flex;flex-direction:column;padding:24px 0;width:var(--sinch-comp-dialog-width);max-width:var(--sinch-comp-dialog-max-width);max-height:var(--sinch-comp-dialog-max-height);border-radius:var(--sinch-comp-dialog-shape-radius);box-sizing:border-box;contain:content;background-color:var(--sinch-comp-dialog-color-default-background-initial);border:none;box-shadow:var(--sinch-comp-dialog-shadow);outline:0}#dialog:not([open]){display:none}dialog::backdrop{background-color:#000;opacity:.55}#header{display:flex;flex-direction:row;align-items:flex-start;margin-bottom:12px;padding:0 24px;gap:8px;--sinch-global-size-icon:24px;--sinch-global-color-icon:var(--sinch-comp-dialog-color-default-icon-initial)}#caption{--sinch-global-color-text:var(--sinch-comp-dialog-color-default-title-initial);--sinch-comp-title-font:var(--sinch-comp-dialog-font-title)}#content{min-height:0;overflow:auto;padding:4px 24px}#action{display:flex;flex-direction:row;justify-content:flex-end;gap:16px;margin-top:20px;padding:0 24px}#action.empty{display:none}#close{position:relative;left:4px;top:-4px;margin-left:auto}</style><dialog id="dialog"><div id="header"><slot id="icon" name="icon"></slot><sinch-title id="caption" type="m" level="3"></sinch-title><sinch-icon-button id="close" size="s"><sinch-icon id="icon-close" slot="icon" name="close"></sinch-icon></sinch-icon-button></div><div id="content"><sinch-stop-events events="close"><slot name="content"></slot></sinch-stop-events></div><div id="action"><sinch-stop-events events="close"><slot name="buttons"></slot></sinch-stop-events></div></dialog>';
 import { disableScroll, enableScroll } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;

package/field/index.js

@@ -1,5 +1,5 @@
 import { defineCustomElement, getAttribute, getBooleanAttribute, getFirstSlotElement, isAttrEqual, isAttrTrue, NectaryElement, setClass, updateAttribute, updateBooleanAttribute } from '../utils';
-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}#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}#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 template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-field', class extends NectaryElement {
@@ -15,6 +15,7 @@ defineCustomElement('sinch-field', class extends NectaryElement {
     super();
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
+    this.topSection = shadowRoot.querySelector('#top');
     this.#$label = shadowRoot.querySelector('#label');
     this.#$optionalText = shadowRoot.querySelector('#optional');
     this.#$additionalText = shadowRoot.querySelector('#additional');
@@ -31,6 +32,7 @@ defineCustomElement('sinch-field', class extends NectaryElement {
     const options = {
       signal
     };
+    this.shouldShowTopSection();
     this.#$label.addEventListener('click', this.#onLabelClick, options);
     this.#$tooltipSlot.addEventListener('slotchange', this.#onTooltipSlotChange, options);
   }
@@ -41,6 +43,11 @@ defineCustomElement('sinch-field', class extends NectaryElement {
   static get observedAttributes() {
     return ['label', 'optionaltext', 'additionaltext', 'invalidtext', 'disabled'];
   }
+  shouldShowTopSection() {
+    const label = getAttribute(this, 'label');
+    const optionaltext = getAttribute(this, 'optionaltext');
+    setClass(this.topSection, 'empty', label === null && optionaltext === null);
+  }
   attributeChangedCallback(name, oldVal, newVal) {
     switch (name) {
       case 'label':
@@ -72,12 +79,13 @@ defineCustomElement('sinch-field', class extends NectaryElement {
           break;
         }
     }
+    this.shouldShowTopSection();
   }
   set label(value) {
     updateAttribute(this, 'label', value);
   }
   get label() {
-    return getAttribute(this, 'label', '');
+    return getAttribute(this, 'label');
   }
   set optionalText(value) {
     updateAttribute(this, 'optionaltext', value);

package/field/types.d.ts

@@ -1,7 +1,7 @@
 import type { TSinchElementReact } from '../types';
 export type TSinchFieldElement = HTMLElement & {
     /** Label */
-    label: string;
+    label: string | null;
     /** Optional text */
     optionalText: string | null;
     /** Additional text */
@@ -23,7 +23,7 @@ export type TSinchFieldElement = HTMLElement & {
 };
 export type TSinchFieldReact = TSinchElementReact<TSinchFieldElement> & {
     /** Label that shows in UI */
-    label: string;
+    label?: string;
     /** Optional text */
     optionalText?: string;
     /** Additional text */

package/input/index.js

@@ -79,7 +79,7 @@ defineCustomElement('sinch-input', class extends NectaryElement {
     this.#controller = null;
   }
   static get observedAttributes() {
-    return ['type', 'value', 'placeholder', 'mask', 'invalid', 'disabled', 'size', 'autocomplete', 'data-size', 'aria-label'];
+    return ['type', 'value', 'placeholder', 'mask', 'invalid', 'disabled', 'size', 'autocomplete', 'autofocus', 'data-size', 'aria-label'];
   }
   attributeChangedCallback(name, oldVal, newVal) {
     switch (name) {
@@ -150,6 +150,16 @@ defineCustomElement('sinch-input', class extends NectaryElement {
           updateBooleanAttribute(this, name, isDisabled);
           break;
         }
+      case 'autofocus':
+        {
+          if (isAttrEqual(oldVal, newVal)) {
+            return;
+          }
+          const isAutofocus = isAttrTrue(newVal);
+          this.#$input.autofocus = isAutofocus;
+          updateBooleanAttribute(this, name, isAutofocus);
+          break;
+        }
       case 'size':
         {
           updateAttribute(this, 'data-size', newVal);
@@ -208,6 +218,12 @@ defineCustomElement('sinch-input', class extends NectaryElement {
   get disabled() {
     return getBooleanAttribute(this, 'disabled');
   }
+  set autofocus(isAutofocus) {
+    updateBooleanAttribute(this, 'autofocus', isAutofocus);
+  }
+  get autofocus() {
+    return getBooleanAttribute(this, 'autofocus');
+  }
   set size(size) {
     updateLiteralAttribute(this, sizeValues, 'size', size);
   }

package/input/types.d.ts

@@ -20,6 +20,8 @@ export type TSinchInputElement = HTMLElement & {
     invalid: boolean;
     /** Disabled */
     disabled: boolean;
+    /** Whether the input should be autocofused */
+    autofocus: boolean;
     /** Size, `m` by default */
     size: TSinchSize;
     selectionStart: number | null;
@@ -46,6 +48,8 @@ export type TSinchInputElement = HTMLElement & {
     setAttribute(name: 'invalid', value: ''): void;
     /** Disabled */
     setAttribute(name: 'disabled', value: ''): void;
+    /** Autofocus */
+    setAttribute(name: 'autofocus', value: ''): void;
     /** Size, `m` by default */
     setAttribute(name: 'size', value: TSinchSize): void;
 };
@@ -66,6 +70,8 @@ export type TSinchInputReact = TSinchElementReact<TSinchInputElement> & {
     invalid?: boolean;
     /** Disabled */
     disabled?: boolean;
+    /** Autofocus */
+    autofocus?: boolean;
     /** Size, `m` by default */
     size?: TSinchSize;
     /** Change value handler */

package/package.json

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

package/utils/debounce.js

@@ -18,5 +18,5 @@ const createDebounce = (delayFn, cancelFn) => cb => {
     }
   };
 };
-export const debounceTimeout = ms => createDebounce(cb => global.setTimeout(cb, ms), global.clearTimeout);
-export const debounceAnimationFrame = createDebounce(global.requestAnimationFrame, global.cancelAnimationFrame);
+export const debounceTimeout = ms => createDebounce(cb => globalThis.setTimeout(cb, ms), globalThis.clearTimeout);
+export const debounceAnimationFrame = createDebounce(globalThis.requestAnimationFrame, globalThis.cancelAnimationFrame);

package/utils/throttle.js

@@ -17,4 +17,4 @@ const createThrottle = (delayFn, cancelFn) => cb => {
     }
   };
 };
-export const throttleAnimationFrame = createThrottle(global.requestAnimationFrame, global.cancelAnimationFrame);
+export const throttleAnimationFrame = createThrottle(globalThis.requestAnimationFrame, globalThis.cancelAnimationFrame);