@nectary/components 2.2.1 → 2.2.3

package/toggle/index.js

@@ -1,4 +1,4 @@
-import { defineCustomElement, getAttribute, getBooleanAttribute, getReactEventHandler, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute } from '../utils';
+import { defineCustomElement, getAttribute, getBooleanAttribute, getReactEventHandler, isAttrEqual, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute } from '../utils';
 const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{position:relative;display:flex;flex-direction:row;align-items:center;box-sizing:border-box;width:100%;height:var(--sinch-local-size);--sinch-local-size:24px}:host([small]) #wrapper{--sinch-local-size:22px}#input{all:initial;display:block;position:absolute;left:0;top:2px;width:40px;height:20px;cursor:pointer;pointer-events:initial}:host([disabled]) #input{cursor:initial}:host(:focus-visible) #input::after{position:absolute;content:"";left:-4px;top:-4px;right:-4px;bottom:-4px;border:2px solid var(--sinch-comp-toggle-color-default-outline-focus);border-radius:18px;pointer-events:none}:host([small]) #input{width:32px;height:16px;top:3px}#knob-container{position:relative;box-sizing:border-box;width:40px;height:20px;border-radius:10px;pointer-events:none;padding:2px;background-color:var(--sinch-comp-toggle-color-default-background-initial);overflow:hidden}:host([small]) #knob-container{width:32px;height:16px;border-radius:8px}:host([checked]) #knob-container{background-color:var(--sinch-comp-toggle-color-checked-background-initial)}:host([disabled]) #knob-container{background-color:var(--sinch-comp-toggle-color-disabled-background-initial)}:host([checked][disabled]) #knob-container{background-color:var(--sinch-comp-toggle-color-checked-disabled-background-initial)}#knob{position:relative;box-sizing:border-box;width:16px;height:16px;border-radius:50%;background-color:var(--sinch-comp-toggle-color-default-knob-background-initial);box-shadow:var(--sinch-comp-toggle-shadow-knob-default);transform:translateX(0);transition:transform .1s ease-in-out;will-change:transform}:host([small]) #knob{width:12px;height:12px}:host([disabled]) #knob-container>#knob{box-shadow:var(--sinch-comp-toggle-shadow-knob-disabled)}:host([checked]) #knob-container>#knob{transform:translateX(20px)}:host([small][checked]) #knob-container>#knob{transform:translateX(16px)}#knob::after,#knob::before{font:var(--sinch-comp-toggle-font-size-m-inside-text);color:var(--sinch-comp-toggle-color-default-text-inside-initial);text-transform:uppercase;font-size:8px;line-height:16px;display:none;position:absolute;top:0;padding:0 3px}#knob::before{content:"on";right:100%}#knob::after{content:"off";left:100%}:host([labeled]:not([small])) #knob::after,:host([labeled]:not([small])) #knob::before{display:block}@media (prefers-reduced-motion){#knob{transition:none}}#label{flex:1;align-self:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-left:8px;font:var(--sinch-comp-toggle-font-size-m-label);color:var(--sinch-comp-toggle-color-default-label-initial);cursor:pointer}#label:empty{display:none}:host([small]) #label{font:var(--sinch-comp-toggle-font-size-s-label)}:host([disabled]) #label{color:var(--sinch-comp-toggle-color-disabled-label-initial);cursor:initial}</style><div id="wrapper"><div id="input"></div><div id="knob-container"><div id="knob"></div></div><span id="label"></span></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
@@ -36,7 +36,7 @@ defineCustomElement('sinch-toggle', class extends NectaryElement {
     return ['checked', 'disabled', 'text', 'labeled', 'small'];
   }
   attributeChangedCallback(name, oldVal, newVal) {
-    if (oldVal === newVal) {
+    if (isAttrEqual(oldVal, newVal)) {
       return;
     }
     switch (name) {

package/tooltip/index.js

@@ -57,8 +57,8 @@ defineCustomElement('sinch-tooltip', class extends NectaryElement {
     this.#updateText();
   }
   disconnectedCallback() {
-    this.#tooltipState.destroy();
     super.disconnectedCallback();
+    this.#tooltipState.destroy();
     this.#controller.abort();
     this.#controller = null;
   }

package/utils/dom.d.ts

@@ -30,4 +30,5 @@ export declare const getCssVar: (element: Element, variableName: string) => stri
 export declare const getCssVars: (element: Element, variableNames: string[]) => (string | null)[];
 export declare const cloneNode: (el: Element, deep: boolean) => Element;
 export declare const shouldReduceMotion: () => boolean;
+export declare const isAttrEqual: (oldVal: string | null, newVal: string | null) => boolean;
 export {};

package/utils/dom.js

@@ -2,7 +2,7 @@ export const updateExplicitBooleanAttribute = ($element, attrName, attrValue) =>
   $element.setAttribute(attrName, attrValue === true ? 'true' : 'false');
 };
 export const isAttrTrue = attrValue => {
-  return attrValue === '' || attrValue !== 'false' && attrValue !== null;
+  return attrValue !== null && attrValue !== 'false';
 };
 export const getBooleanAttribute = ($element, attrName) => {
   return isAttrTrue($element.getAttribute(attrName));
@@ -148,4 +148,7 @@ export const cloneNode = (el, deep) => {
   }
   return el.cloneNode(deep);
 };
-export const shouldReduceMotion = () => window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+export const shouldReduceMotion = () => window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+export const isAttrEqual = (oldVal, newVal) => {
+  return oldVal === newVal || newVal === null && oldVal === 'false' || newVal === '' && oldVal === 'true';
+};

package/vertical-stepper/index.js

@@ -21,10 +21,7 @@ defineCustomElement('sinch-vertical-stepper', class extends NectaryElement {
   static get observedAttributes() {
     return ['index'];
   }
-  attributeChangedCallback(name, oldVal, newVal) {
-    if (oldVal === newVal) {
-      return;
-    }
+  attributeChangedCallback(name) {
     switch (name) {
       case 'index':
         {

package/vertical-stepper-item/index.js

@@ -22,9 +22,6 @@ defineCustomElement('sinch-vertical-stepper-item', class extends NectaryElement
     return ['label', 'description', 'data-index'];
   }
   attributeChangedCallback(name, oldVal, newVal) {
-    if (oldVal === newVal) {
-      return;
-    }
     switch (name) {
       case 'label':
         {