@nectary/components 4.12.0 → 4.12.1

package/toast-manager/types.d.ts

@@ -1,4 +1,4 @@
-import type { NectaryComponentReactByType, NectaryComponentVanillaByType, TRect, NectaryComponentReact, NectaryComponentVanilla } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType, TRect } from '../types';
 export type TSinchToastManagerOrigin = 'top-right' | 'bottom-right';
 export type TSinchToastManagerProps = {
     origin?: TSinchToastManagerOrigin;
@@ -14,23 +14,3 @@ export type TSinchToastManager = {
 };
 export type TSinchToastManagerElement = NectaryComponentVanillaByType<TSinchToastManager>;
 export type TSinchToastManagerReact = NectaryComponentReactByType<TSinchToastManager>;
-declare global {
-    interface NectaryComponentMap {
-        'sinch-toast-manager': TSinchToastManager;
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-toast-manager': NectaryComponentVanilla<'sinch-toast-manager'>;
-    }
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-toast-manager': NectaryComponentReact<'sinch-toast-manager'>;
-        }
-    }
-}
-declare module 'react' {
-    namespace JSX {
-        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
-            'sinch-toast-manager': NectaryComponentReact<'sinch-toast-manager'>;
-        }
-    }
-}

package/toast-manager/types.js

@@ -1 +1 @@
-
+export {};

package/toast-manager/utils.js

@@ -1,4 +1 @@
-const originValues = ["bottom-right", "top-right"];
-export {
-  originValues
-};
+export const originValues = ['bottom-right', 'top-right'];

package/toggle/index.d.ts

@@ -1,5 +1,6 @@
 import { NectaryElement } from '../utils';
-export * from './types';
+import type { TSinchToggle } from './types';
+import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
 export declare class Toggle extends NectaryElement {
     #private;
     constructor();
@@ -19,3 +20,23 @@ export declare class Toggle extends NectaryElement {
     get text(): string | null;
     get focusable(): boolean;
 }
+declare global {
+    interface NectaryComponentMap {
+        'sinch-toggle': TSinchToggle;
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-toggle': NectaryComponentVanilla<'sinch-toggle'>;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-toggle': NectaryComponentReact<'sinch-toggle'>;
+        }
+    }
+}
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
+            'sinch-toggle': NectaryComponentReact<'sinch-toggle'>;
+        }
+    }
+}

package/toggle/index.js

@@ -1,30 +1,32 @@
-import { isAttrEqual, updateBooleanAttribute, isAttrTrue, updateExplicitBooleanAttribute, getBooleanAttribute, updateAttribute, getAttribute } from "../utils/dom.js";
-import { defineCustomElement, NectaryElement } from "../utils/element.js";
-import { getReactEventHandler } from "../utils/get-react-event-handler.js";
-const templateHTML = '<style>\n:host {\n  display: inline-block;\n  vertical-align: middle;\n  outline: none;\n}\n\n#wrapper {\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n  width: 100%;\n  height: var(--sinch-local-size);\n  cursor: pointer;\n  user-select: none;\n\n  --sinch-local-size: 20px;\n}\n\n:host([small]) #wrapper {\n  --sinch-local-size: 16px;\n}\n\n:host([disabled]) #wrapper {\n  cursor: initial;\n}\n\n#knob-container {\n  position: relative;\n  width: 40px;\n  height: var(--sinch-local-size);\n  border-radius: calc(var(--sinch-local-size) * 0.5);\n  background-color: var(--sinch-comp-toggle-color-default-background-initial);\n  pointer-events: none;\n  transition: background-color 0.15s ease-in-out;\n}\n\n:host([small]) #knob-container {\n  width: 32px;\n  height: var(--sinch-local-size);\n}\n\n:host([checked]) #knob-container {\n  background-color: var(--sinch-comp-toggle-color-checked-background-initial);\n}\n\n:host([disabled]) #knob-container {\n  background-color: var(--sinch-comp-toggle-color-disabled-background-initial);\n}\n\n:host([checked][disabled]) #knob-container {\n  background-color: var(--sinch-comp-toggle-color-checked-disabled-background-initial);\n}\n\n#knob {\n  position: relative;\n  width: 16px;\n  height: 16px;\n  left: 2px;\n  top: 2px;\n  border-radius: 50%;\n  background-color: var(--sinch-comp-toggle-color-default-knob-background-initial);\n  box-shadow: var(--sinch-comp-toggle-shadow-knob-default);\n  transform: translateX(0);\n  transition: transform 0.15s ease-in-out;\n  will-change: transform;\n}\n\n:host([small]) #knob {\n  width: 12px;\n  height: 12px;\n}\n\n:host([disabled]) #knob-container > #knob {\n  box-shadow: var(--sinch-comp-toggle-shadow-knob-disabled);\n}\n\n:host([checked]) #knob-container > #knob {\n  transform: translateX(20px);\n}\n\n:host([small][checked]) #knob-container > #knob {\n  transform: translateX(16px);\n}\n\n/* Knob on-off labels */\n#knob::before,\n#knob::after {\n  font: var(--sinch-comp-toggle-font-size-m-inside-text);\n  color: var(--sinch-comp-toggle-color-default-text-inside-initial);\n  text-transform: uppercase;\n  position: absolute;\n  top: 0;\n  padding: 0 1px;\n  opacity: 0;\n  transition: opacity 0.15s ease-in-out;\n  user-select: none;\n}\n\n#knob::before {\n  content: "on";\n  right: 100%;\n}\n\n#knob::after {\n  content: "off";\n  left: 100%;\n}\n\n:host([labeled]:not([small]):not([checked])) #knob::after {\n  opacity: 1;\n}\n\n:host([labeled]:not([small])[checked]) #knob::before {\n  opacity: 1;\n}\n\n@media (prefers-reduced-motion) {\n  #knob-container,\n  #knob,\n  #knob::before,\n  #knob::after {\n    transition: none;\n  }\n}\n\n#outline {\n  display: none;\n  position: absolute;\n  left: -3px;\n  top: -3px;\n  right: -3px;\n  bottom: -3px;\n  border: 2px solid var(--sinch-comp-toggle-color-default-outline-focus);\n  border-radius: 17px;\n  pointer-events: none;\n}\n\n:host(:focus-visible) #outline {\n  display: block;\n}\n\n#label {\n  flex: 1;\n  min-width: 0;\n  align-self: center;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  font: var(--sinch-comp-toggle-font-size-m-label);\n  color: var(--sinch-comp-toggle-color-default-label-initial);\n}\n\n#label:empty {\n  display: none;\n}\n\n:host([small]) #label {\n  font: var(--sinch-comp-toggle-font-size-s-label);\n}\n\n:host([disabled]) #label {\n  color: var(--sinch-comp-toggle-color-disabled-label-initial);\n}\n</style>\n\n<div id="wrapper">\n  <div id="knob-container">\n    <div id="outline"></div>\n    <div id="knob"></div>\n  </div>\n  <span id="label"></span>\n</div>\n';
-const template = document.createElement("template");
+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;gap:8px;width:100%;height:var(--sinch-local-size);cursor:pointer;user-select:none;--sinch-local-size:20px}:host([small]) #wrapper{--sinch-local-size:16px}:host([disabled]) #wrapper{cursor:initial}#knob-container{position:relative;width:40px;height:var(--sinch-local-size);border-radius:calc(var(--sinch-local-size) * .5);background-color:var(--sinch-comp-toggle-color-default-background-initial);pointer-events:none;transition:background-color .15s ease-in-out}:host([small]) #knob-container{width:32px;height:var(--sinch-local-size)}: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;width:16px;height:16px;left:2px;top:2px;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 .15s 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;position:absolute;top:0;padding:0 1px;opacity:0;transition:opacity .15s ease-in-out;user-select:none}#knob::before{content:"on";right:100%}#knob::after{content:"off";left:100%}:host([labeled]:not([small]):not([checked])) #knob::after{opacity:1}:host([labeled]:not([small])[checked]) #knob::before{opacity:1}@media (prefers-reduced-motion){#knob,#knob-container,#knob::after,#knob::before{transition:none}}#outline{display:none;position:absolute;left:-3px;top:-3px;right:-3px;bottom:-3px;border:2px solid var(--sinch-comp-toggle-color-default-outline-focus);border-radius:17px;pointer-events:none}:host(:focus-visible) #outline{display:block}#label{flex:1;min-width:0;align-self:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:var(--sinch-comp-toggle-font-size-m-label);color:var(--sinch-comp-toggle-color-default-label-initial)}#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)}</style><div id="wrapper"><div id="knob-container"><div id="outline"></div><div id="knob"></div></div><span id="label"></span></div>';
+const template = document.createElement('template');
 template.innerHTML = templateHTML;
-class Toggle extends NectaryElement {
+export class Toggle extends NectaryElement {
   #$label;
   #controller = null;
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-    this.#$label = shadowRoot.querySelector("#label");
+    this.#$label = shadowRoot.querySelector('#label');
   }
   connectedCallback() {
     this.#controller = new AbortController();
-    const { signal } = this.#controller;
-    const options = { signal };
-    this.setAttribute("role", "checkbox");
-    this.addEventListener("click", this.#onClick, options);
-    this.addEventListener("keydown", this.#onKeydown, options);
-    this.addEventListener("focus", this.#onFocus, options);
-    this.addEventListener("blur", this.#onBlur, options);
-    this.addEventListener("-change", this.#onChangeReactHandler, options);
-    this.addEventListener("-focus", this.#onFocusReactHandler, options);
-    this.addEventListener("-blur", this.#onBlurReactHandler, options);
+    const {
+      signal
+    } = this.#controller;
+    const options = {
+      signal
+    };
+    this.setAttribute('role', 'checkbox');
+    this.addEventListener('click', this.#onClick, options);
+    this.addEventListener('keydown', this.#onKeydown, options);
+    this.addEventListener('focus', this.#onFocus, options);
+    this.addEventListener('blur', this.#onBlur, options);
+    this.addEventListener('-change', this.#onChangeReactHandler, options);
+    this.addEventListener('-focus', this.#onFocusReactHandler, options);
+    this.addEventListener('-blur', this.#onBlurReactHandler, options);
     this.#updateTabIndex();
   }
   disconnectedCallback() {
@@ -32,72 +34,70 @@ class Toggle extends NectaryElement {
     this.#controller = null;
   }
   static get observedAttributes() {
-    return [
-      "checked",
-      "disabled",
-      "text",
-      "labeled",
-      "small"
-    ];
+    return ['checked', 'disabled', 'text', 'labeled', 'small'];
   }
   attributeChangedCallback(name, oldVal, newVal) {
     if (isAttrEqual(oldVal, newVal)) {
       return;
     }
     switch (name) {
-      case "text": {
-        this.#$label.textContent = newVal;
-        break;
-      }
-      case "checked": {
-        const isChecked = isAttrTrue(newVal);
-        updateExplicitBooleanAttribute(this, "aria-checked", isChecked);
-        updateBooleanAttribute(this, name, isChecked);
-        break;
-      }
-      case "disabled": {
-        const isDisabled = isAttrTrue(newVal);
-        this.#updateTabIndex();
-        updateExplicitBooleanAttribute(this, "aria-disabled", isDisabled);
-        updateBooleanAttribute(this, name, isDisabled);
-        break;
-      }
-      case "small":
-      case "labeled": {
-        updateBooleanAttribute(this, name, isAttrTrue(newVal));
-        break;
-      }
+      case 'text':
+        {
+          this.#$label.textContent = newVal;
+          break;
+        }
+      case 'checked':
+        {
+          const isChecked = isAttrTrue(newVal);
+          updateExplicitBooleanAttribute(this, 'aria-checked', isChecked);
+          updateBooleanAttribute(this, name, isChecked);
+          break;
+        }
+      case 'disabled':
+        {
+          const isDisabled = isAttrTrue(newVal);
+          this.#updateTabIndex();
+          updateExplicitBooleanAttribute(this, 'aria-disabled', isDisabled);
+          updateBooleanAttribute(this, name, isDisabled);
+          break;
+        }
+      case 'small':
+      case 'labeled':
+        {
+          updateBooleanAttribute(this, name, isAttrTrue(newVal));
+          break;
+        }
     }
   }
   set checked(isChecked) {
-    updateBooleanAttribute(this, "checked", isChecked);
+    updateBooleanAttribute(this, 'checked', isChecked);
   }
   get checked() {
-    return getBooleanAttribute(this, "checked");
+    return getBooleanAttribute(this, 'checked');
   }
   set small(isSmall) {
-    updateBooleanAttribute(this, "small", isSmall);
+    updateBooleanAttribute(this, 'small', isSmall);
   }
   get small() {
-    return getBooleanAttribute(this, "small");
+    return getBooleanAttribute(this, 'small');
   }
   set labeled(isLabeled) {
-    updateBooleanAttribute(this, "labeled", isLabeled);
+    updateBooleanAttribute(this, 'labeled', isLabeled);
   }
   get labeled() {
-    return getBooleanAttribute(this, "labeled");
+    return getBooleanAttribute(this, 'labeled');
   }
   set disabled(isDisabled) {
-    updateBooleanAttribute(this, "disabled", isDisabled);
+    updateBooleanAttribute(this, 'disabled', isDisabled);
   }
   get disabled() {
-    return getBooleanAttribute(this, "disabled");
+    return getBooleanAttribute(this, 'disabled');
   }
   set text(value) {
-    updateAttribute(this, "text", value);
+    updateAttribute(this, 'text', value);
   }
   get text() {
-    return getAttribute(this, "text");
+    return getAttribute(this, 'text');
   }
   get focusable() {
     return true;
@@ -106,43 +106,37 @@ class Toggle extends NectaryElement {
     if (this.disabled) {
       return;
     }
-    this.dispatchEvent(
-      new CustomEvent("-change", { detail: !this.checked })
-    );
+    this.dispatchEvent(new CustomEvent('-change', {
+      detail: !this.checked
+    }));
   };
-  #onKeydown = (e) => {
+  #onKeydown = e => {
     switch (e.code) {
-      case "Space":
-      case "Enter": {
-        e.preventDefault();
-        this.click();
-      }
+      case 'Space':
+      case 'Enter':
+        {
+          e.preventDefault();
+          this.click();
+        }
     }
   };
   #updateTabIndex() {
     this.tabIndex = this.disabled ? -1 : 0;
   }
   #onFocus = () => {
-    this.dispatchEvent(
-      new CustomEvent("-focus")
-    );
+    this.dispatchEvent(new CustomEvent('-focus'));
   };
   #onBlur = () => {
-    this.dispatchEvent(
-      new CustomEvent("-blur")
-    );
+    this.dispatchEvent(new CustomEvent('-blur'));
   };
-  #onChangeReactHandler = (e) => {
-    getReactEventHandler(this, "on-change")?.(e);
+  #onChangeReactHandler = e => {
+    getReactEventHandler(this, 'on-change')?.(e);
   };
-  #onFocusReactHandler = (e) => {
-    getReactEventHandler(this, "on-focus")?.(e);
+  #onFocusReactHandler = e => {
+    getReactEventHandler(this, 'on-focus')?.(e);
   };
-  #onBlurReactHandler = (e) => {
-    getReactEventHandler(this, "on-blur")?.(e);
+  #onBlurReactHandler = e => {
+    getReactEventHandler(this, 'on-blur')?.(e);
   };
 }
-defineCustomElement("sinch-toggle", Toggle);
-export {
-  Toggle
-};
+defineCustomElement('sinch-toggle', Toggle);

package/toggle/types.d.ts

@@ -1,4 +1,4 @@
-import type { NectaryComponentReactByType, NectaryComponentVanillaByType, NectaryComponentReact, NectaryComponentVanilla } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
 export type TSinchToggleProps = {
     checked?: boolean;
     small?: boolean;
@@ -34,23 +34,3 @@ export type TSinchToggle = {
 };
 export type TSinchToggleElement = NectaryComponentVanillaByType<TSinchToggle>;
 export type TSinchToggleReact = NectaryComponentReactByType<TSinchToggle>;
-declare global {
-    interface NectaryComponentMap {
-        'sinch-toggle': TSinchToggle;
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-toggle': NectaryComponentVanilla<'sinch-toggle'>;
-    }
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-toggle': NectaryComponentReact<'sinch-toggle'>;
-        }
-    }
-}
-declare module 'react' {
-    namespace JSX {
-        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
-            'sinch-toggle': NectaryComponentReact<'sinch-toggle'>;
-        }
-    }
-}

package/toggle/types.js

@@ -1 +1 @@
-
+export {};

package/tooltip/index.d.ts

@@ -1,9 +1,8 @@
 import '../text';
 import '../pop';
 import { NectaryElement } from '../utils';
-import type { TSinchTooltipOrientation, TSinchTooltipTextAlign, TSinchTooltipType } from './types';
-import type { TRect } from '../types';
-export * from './types';
+import type { TSinchTooltipOrientation, TSinchTooltipTextAlign, TSinchTooltipType, TSinchTooltip } from './types';
+import type { NectaryComponentReact, NectaryComponentVanilla, TRect } from '../types';
 export declare class Tooltip extends NectaryElement {
     #private;
     constructor();
@@ -22,3 +21,23 @@ export declare class Tooltip extends NectaryElement {
     get footprintRect(): TRect;
     get tooltipRect(): TRect;
 }
+declare global {
+    interface NectaryComponentMap {
+        'sinch-tooltip': TSinchTooltip;
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-tooltip': NectaryComponentVanilla<'sinch-tooltip'>;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-tooltip': NectaryComponentReact<'sinch-tooltip'>;
+        }
+    }
+}
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
+            'sinch-tooltip': NectaryComponentReact<'sinch-tooltip'>;
+        }
+    }
+}