@nectary/components 4.12.0 → 4.12.1

package/checkbox/index.js

@@ -1,12 +1,10 @@
-import "../rich-text/index.js";
-import { getBooleanAttribute, isAttrEqual, updateBooleanAttribute, isAttrTrue, updateExplicitBooleanAttribute, updateAttribute, getAttribute } from "../utils/dom.js";
-import { defineCustomElement, NectaryElement } from "../utils/element.js";
-import { getReactEventHandler } from "../utils/get-react-event-handler.js";
-import { setFormValue } from "../utils/form.js";
-const templateHTML = '<style>\n  :host {\n    display: inline-block;\n    vertical-align: middle;\n    outline: none;\n  }\n\n  #wrapper {\n    display: flex;\n    flex-direction: row;\n    box-sizing: border-box;\n    width: 100%;\n    min-height: 24px;\n\n    --sinch-local-color-background:\n      var(\n        --sinch-comp-checkbox-color-default-background-initial\n      );\n    --sinch-local-color-background-hover:\n      var(\n        --sinch-comp-checkbox-color-default-background-hover\n      );\n    --sinch-local-color-background-active:\n      var(\n        --sinch-comp-checkbox-color-default-background-active\n      );\n    --sinch-local-color-border:\n      var(\n        --sinch-comp-checkbox-color-default-border-initial\n      );\n    --sinch-local-color-border-hover:\n      var(\n        --sinch-comp-checkbox-color-default-border-hover\n      );\n    --sinch-local-color-border-active:\n      var(\n        --sinch-comp-checkbox-color-default-border-active\n      );\n    --sinch-local-color-text:\n      var(\n        --sinch-comp-checkbox-color-default-text-initial\n      );\n  }\n\n  /* Invalid */\n  :host([invalid]) > #wrapper {\n    --sinch-local-color-background:\n      var(\n        --sinch-comp-checkbox-color-invalid-background-initial\n      );\n    --sinch-local-color-background-hover:\n      var(\n        --sinch-comp-checkbox-color-invalid-background-hover\n      );\n    --sinch-local-color-background-active:\n      var(\n        --sinch-comp-checkbox-color-invalid-background-active\n      );\n    --sinch-local-color-border:\n      var(\n        --sinch-comp-checkbox-color-invalid-border-initial\n      );\n    --sinch-local-color-border-hover:\n      var(\n        --sinch-comp-checkbox-color-invalid-border-hover\n      );\n    --sinch-local-color-border-active:\n      var(\n        --sinch-comp-checkbox-color-invalid-border-active\n      );\n    --sinch-local-color-text:\n      var(\n        --sinch-comp-checkbox-color-invalid-text-initial\n      );\n  }\n\n  /* Checked */\n  :host([checked]) > #wrapper {\n    --sinch-local-color-background:\n      var(\n        --sinch-comp-checkbox-color-checked-background-initial\n      );\n    --sinch-local-color-background-hover:\n      var(\n        --sinch-comp-checkbox-color-checked-background-hover\n      );\n    --sinch-local-color-background-active:\n      var(\n        --sinch-comp-checkbox-color-checked-background-active\n      );\n    --sinch-local-color-border:\n      var(\n        --sinch-comp-checkbox-color-checked-border-initial\n      );\n    --sinch-local-color-border-hover:\n      var(\n        --sinch-comp-checkbox-color-checked-border-hover\n      );\n    --sinch-local-color-border-active:\n      var(\n        --sinch-comp-checkbox-color-checked-border-active\n      );\n  }\n\n  /* Disabled */\n  :host([disabled]) > #wrapper {\n    --sinch-local-color-background:\n      var(\n        --sinch-comp-checkbox-color-disabled-background-initial\n      );\n    --sinch-local-color-border:\n      var(\n        --sinch-comp-checkbox-color-disabled-border-initial\n      );\n    --sinch-local-color-text:\n      var(\n        --sinch-comp-checkbox-color-disabled-text-initial\n      );\n  }\n\n  /* Checked Disabled */\n  :host([disabled][checked]) > #wrapper {\n    --sinch-local-color-background:\n      var(\n        --sinch-comp-checkbox-color-checked-disabled-background-initial\n      );\n    --sinch-local-color-border:\n      var(\n        --sinch-comp-checkbox-color-checked-disabled-border-initial\n      );\n  }\n\n  /* Checked Invalid */\n\n  /* Invalid Disabled */\n\n  /* Checked Invalid Disabled */\n\n  #checkbox {\n    width: 18px;\n    height: 18px;\n    cursor: pointer;\n  }\n\n  :host([disabled]) #checkbox {\n    cursor: initial;\n  }\n\n  #icon-container {\n    position: relative;\n    width: 18px;\n    height: 18px;\n    align-self: flex-start;\n    margin-top: 3px;\n  }\n\n  /* Outline */\n  #checkbox::before {\n    content: "";\n    position: absolute;\n    inset: -3px;\n    border: 2px solid var(--sinch-comp-checkbox-color-default-outline-focus);\n    border-radius: calc(var(--sinch-comp-checkbox-shape-radius) + 3px);\n    transition: opacity 0.1s linear;\n    opacity: 0;\n    box-sizing: border-box;\n    pointer-events: none;\n  }\n\n  :host(:focus-visible) #checkbox::before {\n    opacity: 1;\n  }\n\n  /* Border / Background */\n  #checkbox::after {\n    content: "";\n    position: absolute;\n    width: 18px;\n    height: 18px;\n    inset: 0;\n    margin: auto;\n    background-color: var(--sinch-local-color-background);\n    border: 1px solid var(--sinch-local-color-border);\n    border-radius: var(--sinch-comp-checkbox-shape-radius);\n    transition: background-color 0.1s linear;\n    box-sizing: border-box;\n    pointer-events: none;\n  }\n\n  :host(:hover:not([disabled])) #checkbox::after {\n    background-color: var(--sinch-local-color-background-hover);\n    border-color: var(--sinch-local-color-border-hover);\n  }\n\n  :host(:active:not([disabled])) #checkbox::after {\n    background-color: var(--sinch-local-color-background-active);\n    border-color: var(--sinch-local-color-border-active);\n  }\n\n  #icon-checkmark,\n  #icon-indeterminate {\n    position: absolute;\n    left: 1px;\n    top: 1px;\n    width: 16px;\n    height: 16px;\n    transition: opacity 0.1s linear;\n    opacity: 0;\n    pointer-events: none;\n    fill: var(--sinch-sys-color-surface-primary-default);\n  }\n\n  :host(:not([indeterminate])[checked]) #icon-checkmark {\n    opacity: 1;\n  }\n\n  :host([indeterminate][checked]) #icon-indeterminate {\n    opacity: 1;\n  }\n\n  @media (prefers-reduced-motion) {\n    #icon-checkmark,\n    #icon-indeterminate,\n    #checkbox::before,\n    #checkbox::after {\n      transition: none;\n    }\n  }\n\n  #label {\n    flex: 1;\n    align-self: center;\n    padding-left: 8px;\n    font: var(--sinch-comp-checkbox-font-label);\n    cursor: pointer;\n\n    --sinch-global-color-text: var(--sinch-local-color-text);\n  }\n\n  :host(:not([text])) #label,\n  :host([text=""]) #label {\n    display: none;\n  }\n\n  :host([disabled]) #label {\n    cursor: initial;\n  }\n\n</style>\n\n<div id="wrapper" >\n  <div id="icon-container">\n    <div id="checkbox"></div>\n    <svg id="icon-checkmark" viewBox="0 0 24 24" aria-hidden="true">\n      <path\n        d="M9 16.17 5.53 12.7a.996.996 0 1 0-1.41 1.41l4.18 4.18c.39.39 1.02.39 1.41 0L20.29 7.71a.996.996 0 1 0-1.41-1.41L9 16.17Z"\n      />\n    </svg>\n    <svg id="icon-indeterminate" viewBox="0 0 24 24" aria-hidden="true">\n      <path\n        d="M18 13H6c-.55 0-1-.45-1-1s.45-1 1-1h12c.55 0 1 .45 1 1s-.45 1-1 1Z"\n      />\n    </svg>\n  </div>\n  <sinch-rich-text id="label"></sinch-rich-text>\n</div>\n';
-const template = document.createElement("template");
+import '../rich-text';
+import { defineCustomElement, getAttribute, getBooleanAttribute, getReactEventHandler, isAttrEqual, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute } from '../utils';
+import { setFormValue } from '../utils/form';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{display:flex;flex-direction:row;box-sizing:border-box;width:100%;min-height:24px;--sinch-local-color-background:var(--sinch-comp-checkbox-color-default-background-initial);--sinch-local-color-background-hover:var(--sinch-comp-checkbox-color-default-background-hover);--sinch-local-color-background-active:var(--sinch-comp-checkbox-color-default-background-active);--sinch-local-color-border:var(--sinch-comp-checkbox-color-default-border-initial);--sinch-local-color-border-hover:var(--sinch-comp-checkbox-color-default-border-hover);--sinch-local-color-border-active:var(--sinch-comp-checkbox-color-default-border-active);--sinch-local-color-text:var(--sinch-comp-checkbox-color-default-text-initial)}:host([invalid])>#wrapper{--sinch-local-color-background:var(--sinch-comp-checkbox-color-invalid-background-initial);--sinch-local-color-background-hover:var(--sinch-comp-checkbox-color-invalid-background-hover);--sinch-local-color-background-active:var(--sinch-comp-checkbox-color-invalid-background-active);--sinch-local-color-border:var(--sinch-comp-checkbox-color-invalid-border-initial);--sinch-local-color-border-hover:var(--sinch-comp-checkbox-color-invalid-border-hover);--sinch-local-color-border-active:var(--sinch-comp-checkbox-color-invalid-border-active);--sinch-local-color-text:var(--sinch-comp-checkbox-color-invalid-text-initial)}:host([checked])>#wrapper{--sinch-local-color-background:var(--sinch-comp-checkbox-color-checked-background-initial);--sinch-local-color-background-hover:var(--sinch-comp-checkbox-color-checked-background-hover);--sinch-local-color-background-active:var(--sinch-comp-checkbox-color-checked-background-active);--sinch-local-color-border:var(--sinch-comp-checkbox-color-checked-border-initial);--sinch-local-color-border-hover:var(--sinch-comp-checkbox-color-checked-border-hover);--sinch-local-color-border-active:var(--sinch-comp-checkbox-color-checked-border-active)}:host([disabled])>#wrapper{--sinch-local-color-background:var(--sinch-comp-checkbox-color-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-checkbox-color-disabled-border-initial);--sinch-local-color-text:var(--sinch-comp-checkbox-color-disabled-text-initial)}:host([disabled][checked])>#wrapper{--sinch-local-color-background:var(--sinch-comp-checkbox-color-checked-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-checkbox-color-checked-disabled-border-initial)}#checkbox{width:18px;height:18px;cursor:pointer}:host([disabled]) #checkbox{cursor:initial}#icon-container{position:relative;width:18px;height:18px;align-self:flex-start;margin-top:3px}#checkbox::before{content:"";position:absolute;inset:-3px;border:2px solid var(--sinch-comp-checkbox-color-default-outline-focus);border-radius:calc(var(--sinch-comp-checkbox-shape-radius) + 3px);transition:opacity .1s linear;opacity:0;box-sizing:border-box;pointer-events:none}:host(:focus-visible) #checkbox::before{opacity:1}#checkbox::after{content:"";position:absolute;width:18px;height:18px;inset:0;margin:auto;background-color:var(--sinch-local-color-background);border:1px solid var(--sinch-local-color-border);border-radius:var(--sinch-comp-checkbox-shape-radius);transition:background-color .1s linear;box-sizing:border-box;pointer-events:none}:host(:hover:not([disabled])) #checkbox::after{background-color:var(--sinch-local-color-background-hover);border-color:var(--sinch-local-color-border-hover)}:host(:active:not([disabled])) #checkbox::after{background-color:var(--sinch-local-color-background-active);border-color:var(--sinch-local-color-border-active)}#icon-checkmark,#icon-indeterminate{position:absolute;left:1px;top:1px;width:16px;height:16px;transition:opacity .1s linear;opacity:0;pointer-events:none;fill:var(--sinch-sys-color-surface-primary-default)}:host(:not([indeterminate])[checked]) #icon-checkmark{opacity:1}:host([indeterminate][checked]) #icon-indeterminate{opacity:1}@media (prefers-reduced-motion){#checkbox::after,#checkbox::before,#icon-checkmark,#icon-indeterminate{transition:none}}#label{flex:1;align-self:center;padding-left:8px;font:var(--sinch-comp-checkbox-font-label);cursor:pointer;--sinch-global-color-text:var(--sinch-local-color-text)}:host(:not([text])) #label,:host([text=""]) #label{display:none}:host([disabled]) #label{cursor:initial}</style><div id="wrapper"><div id="icon-container"><div id="checkbox"></div><svg id="icon-checkmark" viewBox="0 0 24 24" aria-hidden="true"><path d="M9 16.17 5.53 12.7a.996.996 0 1 0-1.41 1.41l4.18 4.18c.39.39 1.02.39 1.41 0L20.29 7.71a.996.996 0 1 0-1.41-1.41L9 16.17Z"/></svg><svg id="icon-indeterminate" viewBox="0 0 24 24" aria-hidden="true"><path d="M18 13H6c-.55 0-1-.45-1-1s.45-1 1-1h12c.55 0 1 .45 1 1s-.45 1-1 1Z"/></svg></div><sinch-rich-text id="label"></sinch-rich-text></div>';
+const template = document.createElement('template');
 template.innerHTML = templateHTML;
-class Checkbox extends NectaryElement {
+export class Checkbox extends NectaryElement {
   #$label;
   #controller = null;
   #internals;
@@ -16,21 +14,25 @@ class Checkbox extends NectaryElement {
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
     this.#internals = this.attachInternals();
-    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.#internals.role = "checkbox";
+    const {
+      signal
+    } = this.#controller;
+    const options = {
+      signal
+    };
+    this.setAttribute('role', 'checkbox');
+    this.#internals.role = 'checkbox';
     this.tabIndex = 0;
-    this.addEventListener("click", this.#onClick, 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.addEventListener('click', this.#onClick, 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);
   }
   disconnectedCallback() {
     this.#controller.abort();
@@ -41,102 +43,100 @@ class Checkbox extends NectaryElement {
   }
   formResetCallback() {
     this.checked = false;
-    setFormValue(this.#internals, "");
+    setFormValue(this.#internals, '');
   }
   formStateRestoreCallback(state) {
-    if (this.#internals.form === null || getBooleanAttribute(this.#internals.form, "data-form-state-restore") === false) {
+    if (this.#internals.form === null || getBooleanAttribute(this.#internals.form, 'data-form-state-restore') === false) {
       return;
     }
     if (state !== null) {
-      const value = typeof state === "string" ? state : state.get(this.name);
-      this.checked = (value?.toString() ?? "").length > 0;
+      const value = typeof state === 'string' ? state : state.get(this.name);
+      this.checked = (value?.toString() ?? '').length > 0;
       setFormValue(this.#internals, this.#getFormValue());
     }
   }
   #getFormValue() {
-    return this.checked ? this.value.length > 0 ? this.value : "on" : "";
+    return this.checked ? this.value.length > 0 ? this.value : 'on' : '';
   }
   static get observedAttributes() {
-    return [
-      "checked",
-      "disabled",
-      "text",
-      "invalid",
-      "indeterminate"
-    ];
+    return ['checked', 'disabled', 'text', 'invalid', 'indeterminate'];
   }
   attributeChangedCallback(name, oldVal, newVal) {
     if (isAttrEqual(oldVal, newVal)) {
       return;
     }
     switch (name) {
-      case "text": {
-        updateAttribute(this.#$label, "text", newVal);
-        break;
-      }
-      case "checked": {
-        const isChecked = isAttrTrue(newVal);
-        updateExplicitBooleanAttribute(this, "aria-checked", isChecked);
-        updateBooleanAttribute(this, "checked", isChecked);
-        this.#internals.ariaChecked = isChecked.toString();
-        setFormValue(this.#internals, this.#getFormValue());
-        break;
-      }
-      case "disabled": {
-        const isDisabled = isAttrTrue(newVal);
-        updateExplicitBooleanAttribute(this, "aria-disabled", isDisabled);
-        this.#internals.ariaDisabled = isDisabled.toString();
-        updateBooleanAttribute(this, "disabled", isDisabled);
-        break;
-      }
-      case "invalid":
-      case "indeterminate": {
-        updateBooleanAttribute(this, name, isAttrTrue(newVal));
-        break;
-      }
+      case 'text':
+        {
+          updateAttribute(this.#$label, 'text', newVal);
+          break;
+        }
+      case 'checked':
+        {
+          const isChecked = isAttrTrue(newVal);
+          updateExplicitBooleanAttribute(this, 'aria-checked', isChecked);
+          updateBooleanAttribute(this, 'checked', isChecked);
+          this.#internals.ariaChecked = isChecked.toString();
+          setFormValue(this.#internals, this.#getFormValue());
+          break;
+        }
+      case 'disabled':
+        {
+          const isDisabled = isAttrTrue(newVal);
+          updateExplicitBooleanAttribute(this, 'aria-disabled', isDisabled);
+          this.#internals.ariaDisabled = isDisabled.toString();
+          updateBooleanAttribute(this, 'disabled', isDisabled);
+          break;
+        }
+      case 'invalid':
+      case 'indeterminate':
+        {
+          updateBooleanAttribute(this, name, isAttrTrue(newVal));
+          break;
+        }
     }
   }
   set name(value) {
-    updateAttribute(this, "name", value);
+    updateAttribute(this, 'name', value);
   }
   get name() {
-    return getAttribute(this, "name", "");
+    return getAttribute(this, 'name', '');
   }
   set value(value) {
-    updateAttribute(this, "value", value);
+    updateAttribute(this, 'value', value);
   }
   get value() {
-    return getAttribute(this, "value", "");
+    return getAttribute(this, 'value', '');
   }
   set checked(isChecked) {
-    updateBooleanAttribute(this, "checked", isChecked);
+    updateBooleanAttribute(this, 'checked', isChecked);
   }
   get checked() {
-    return getBooleanAttribute(this, "checked");
+    return getBooleanAttribute(this, 'checked');
   }
   set indeterminate(isIndeterminate) {
-    updateBooleanAttribute(this, "indeterminate", isIndeterminate);
+    updateBooleanAttribute(this, 'indeterminate', isIndeterminate);
   }
   get indeterminate() {
-    return getBooleanAttribute(this, "indeterminate");
+    return getBooleanAttribute(this, 'indeterminate');
   }
   set disabled(isDisabled) {
-    updateBooleanAttribute(this, "disabled", isDisabled);
+    updateBooleanAttribute(this, 'disabled', isDisabled);
   }
   get disabled() {
-    return getBooleanAttribute(this, "disabled");
+    return getBooleanAttribute(this, 'disabled');
   }
   set invalid(isInvalid) {
-    updateBooleanAttribute(this, "invalid", isInvalid);
+    updateBooleanAttribute(this, 'invalid', isInvalid);
   }
   get invalid() {
-    return getBooleanAttribute(this, "invalid");
+    return getBooleanAttribute(this, 'invalid');
   }
   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;
@@ -145,31 +145,24 @@ class Checkbox extends NectaryElement {
     if (this.disabled) {
       return;
     }
-    this.dispatchEvent(
-      new CustomEvent("-change", { detail: !this.checked })
-    );
+    this.dispatchEvent(new CustomEvent('-change', {
+      detail: !this.checked
+    }));
   };
   #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-checkbox", Checkbox);
-export {
-  Checkbox
-};
+defineCustomElement('sinch-checkbox', Checkbox);

package/checkbox/types.d.ts

@@ -1,4 +1,4 @@
-import type { NectaryComponentReactByType, NectaryComponentVanillaByType, NectaryComponentReact, NectaryComponentVanilla } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
 export type TSinchCheckboxProps = {
     /** Identification for uncontrolled form submissions */
     name?: string;
@@ -63,23 +63,3 @@ export type TSinchCheckbox = {
 };
 export type TSinchCheckboxElement = NectaryComponentVanillaByType<TSinchCheckbox>;
 export type TSinchCheckboxReact = NectaryComponentReactByType<TSinchCheckbox>;
-declare global {
-    interface NectaryComponentMap {
-        'sinch-checkbox': TSinchCheckbox;
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-checkbox': NectaryComponentVanilla<'sinch-checkbox'>;
-    }
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-checkbox': NectaryComponentReact<'sinch-checkbox'>;
-        }
-    }
-}
-declare module 'react' {
-    namespace JSX {
-        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
-            'sinch-checkbox': NectaryComponentReact<'sinch-checkbox'>;
-        }
-    }
-}

package/checkbox/types.js

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

package/chip/colors.js

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

package/chip/index.d.ts

@@ -1,7 +1,8 @@
 import '../text';
 import '../icon';
 import { NectaryElement } from '../utils';
-export * from './types';
+import type { TSinchChip } from './types';
+import type { NectaryComponentVanilla, NectaryComponentReact } from '../types';
 export declare class Chip extends NectaryElement {
     #private;
     constructor();
@@ -17,3 +18,23 @@ export declare class Chip extends NectaryElement {
     set small(isSmall: boolean);
     get focusable(): boolean;
 }
+declare global {
+    interface NectaryComponentMap {
+        'sinch-chip': TSinchChip;
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-chip': NectaryComponentVanilla<'sinch-chip'>;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-chip': NectaryComponentReact<'sinch-chip'>;
+        }
+    }
+}
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
+            'sinch-chip': NectaryComponentReact<'sinch-chip'>;
+        }
+    }
+}

package/chip/index.js

@@ -1,13 +1,11 @@
-import "../text/index.js";
-import "../icon/index.js";
-import { isAttrEqual, updateBooleanAttribute, isAttrTrue, getAttribute, updateAttribute, getBooleanAttribute } from "../utils/dom.js";
-import { defineCustomElement, NectaryElement } from "../utils/element.js";
-import { getReactEventHandler } from "../utils/get-react-event-handler.js";
-import { getChipColorBg, getChipColorFg } from "./utils.js";
-const templateHTML = '<style>\n  :host {\n    display: inline-block;\n    vertical-align: middle;\n    outline: none;\n    cursor: pointer;\n  }\n\n  #button {\n    all: initial;\n    position: relative;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: 4px;\n    width: 100%;\n    height: var(--sinch-comp-chip-size-container-m);\n    padding: 0 5px 0 9px;\n    border-radius: var(--sinch-comp-chip-shape-radius);\n    background-color:\n      var(\n        --sinch-comp-chip-color-neutral-default-background-initial\n      );\n    box-sizing: border-box;\n\n    --sinch-global-color-text:\n      var(\n        --sinch-comp-chip-color-neutral-default-foreground-initial\n      );\n    --sinch-global-color-icon:\n      var(\n        --sinch-comp-chip-color-neutral-default-foreground-initial\n      );\n    --sinch-global-size-icon: var(--sinch-comp-chip-size-icon-m);\n  }\n\n  :host(:focus-visible) > #button::after {\n    content: "";\n    position: absolute;\n    inset: -4px;\n    border-radius: calc(var(--sinch-comp-chip-shape-radius) + 4px);\n    border: 2px solid var(--sinch-comp-chip-color-outiline-focus);\n    pointer-events: none;\n  }\n\n  #text {\n    flex: 1;\n\n    --sinch-comp-text-font: var(--sinch-comp-chip-font-size-m-label);\n  }\n\n  :host([small]) #button {\n    height: var(--sinch-comp-chip-size-container-s);\n    padding: 0 3px 0 7px;\n\n    --sinch-global-size-icon: var(--sinch-comp-chip-size-icon-s);\n  }\n\n  :host([small]) #text {\n    --sinch-comp-text-font: var(--sinch-comp-chip-font-size-s-label);\n  }\n\n  ::slotted([slot="icon"]) {\n    margin-left: -4px;\n  }\n</style>\n\n<div id="button" inert>\n  <slot name="icon"></slot>\n  <sinch-text id="text" type="xs" ellipsis></sinch-text>\n  <slot name="right-icon">\n    <sinch-icon icons-version="2" name="circle-cross" id="icon-close"></sinch-icon>\n  </slot>\n</div>\n';
-const template = document.createElement("template");
+import '../text';
+import '../icon';
+import { defineCustomElement, getBooleanAttribute, getAttribute, updateBooleanAttribute, updateAttribute, NectaryElement, getReactEventHandler, isAttrTrue, isAttrEqual } from '../utils';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0;cursor:pointer}#button{all:initial;position:relative;display:flex;flex-direction:row;align-items:center;gap:4px;width:100%;height:var(--sinch-comp-chip-size-container-m);padding:0 5px 0 9px;border-radius:var(--sinch-comp-chip-shape-radius);background-color:var(--sinch-comp-chip-color-neutral-default-background-initial);box-sizing:border-box;--sinch-global-color-text:var(--sinch-comp-chip-color-neutral-default-foreground-initial);--sinch-global-color-icon:var(--sinch-comp-chip-color-neutral-default-foreground-initial);--sinch-global-size-icon:var(--sinch-comp-chip-size-icon-m)}:host(:focus-visible)>#button::after{content:"";position:absolute;inset:-4px;border-radius:calc(var(--sinch-comp-chip-shape-radius) + 4px);border:2px solid var(--sinch-comp-chip-color-outiline-focus);pointer-events:none}#text{flex:1;--sinch-comp-text-font:var(--sinch-comp-chip-font-size-m-label)}:host([small]) #button{height:var(--sinch-comp-chip-size-container-s);padding:0 3px 0 7px;--sinch-global-size-icon:var(--sinch-comp-chip-size-icon-s)}:host([small]) #text{--sinch-comp-text-font:var(--sinch-comp-chip-font-size-s-label)}::slotted([slot=icon]){margin-left:-4px}</style><div id="button" inert><slot name="icon"></slot><sinch-text id="text" type="xs" ellipsis></sinch-text><slot name="right-icon"><sinch-icon icons-version="2" name="circle-cross" id="icon-close"></sinch-icon></slot></div>';
+import { getChipColorBg, getChipColorFg } from './utils';
+const template = document.createElement('template');
 template.innerHTML = templateHTML;
-class Chip extends NectaryElement {
+export class Chip extends NectaryElement {
   #$text;
   #$button;
   #controller = null;
@@ -15,22 +13,38 @@ class Chip extends NectaryElement {
     super();
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-    this.#$button = shadowRoot.querySelector("#button");
-    this.#$text = shadowRoot.querySelector("#text");
+    this.#$button = shadowRoot.querySelector('#button');
+    this.#$text = shadowRoot.querySelector('#text');
   }
   connectedCallback() {
     super.connectedCallback();
     this.#controller = new AbortController();
-    const { signal } = this.#controller;
-    this.setAttribute("role", "button");
+    const {
+      signal
+    } = this.#controller;
+    this.setAttribute('role', 'button');
     this.tabIndex = 0;
-    this.addEventListener("click", this.#onClick, { signal });
-    this.addEventListener("focus", this.#onFocus, { signal });
-    this.addEventListener("blur", this.#onBlur, { signal });
-    this.addEventListener("keydown", this.#onKeydown, { signal });
-    this.addEventListener("-click", this.#onClickReactHandler, { signal });
-    this.addEventListener("-focus", this.#onFocusReactHandler, { signal });
-    this.addEventListener("-blur", this.#onBlurReactHandler, { signal });
+    this.addEventListener('click', this.#onClick, {
+      signal
+    });
+    this.addEventListener('focus', this.#onFocus, {
+      signal
+    });
+    this.addEventListener('blur', this.#onBlur, {
+      signal
+    });
+    this.addEventListener('keydown', this.#onKeydown, {
+      signal
+    });
+    this.addEventListener('-click', this.#onClickReactHandler, {
+      signal
+    });
+    this.addEventListener('-focus', this.#onFocusReactHandler, {
+      signal
+    });
+    this.addEventListener('-blur', this.#onBlurReactHandler, {
+      signal
+    });
     this.#updateColor();
   }
   disconnectedCallback() {
@@ -39,44 +53,47 @@ class Chip extends NectaryElement {
     this.#controller = null;
   }
   static get observedAttributes() {
-    return ["text", "color", "small"];
+    return ['text', 'color', 'small'];
   }
   attributeChangedCallback(name, oldVal, newVal) {
     if (isAttrEqual(oldVal, newVal)) {
       return;
     }
     switch (name) {
-      case "color": {
-        this.#updateColor();
-        break;
-      }
-      case "text": {
-        this.#$text.textContent = newVal;
-        break;
-      }
-      case "small": {
-        updateBooleanAttribute(this, name, isAttrTrue(newVal));
-        break;
-      }
+      case 'color':
+        {
+          this.#updateColor();
+          break;
+        }
+      case 'text':
+        {
+          this.#$text.textContent = newVal;
+          break;
+        }
+      case 'small':
+        {
+          updateBooleanAttribute(this, name, isAttrTrue(newVal));
+          break;
+        }
     }
   }
   get color() {
-    return getAttribute(this, "color");
+    return getAttribute(this, 'color');
   }
   set color(value) {
-    updateAttribute(this, "color", value);
+    updateAttribute(this, 'color', value);
   }
   get text() {
-    return getAttribute(this, "text", "");
+    return getAttribute(this, 'text', '');
   }
   set text(value) {
-    updateAttribute(this, "text", value);
+    updateAttribute(this, 'text', value);
   }
   get small() {
-    return getBooleanAttribute(this, "small");
+    return getBooleanAttribute(this, 'small');
   }
   set small(isSmall) {
-    updateBooleanAttribute(this, "small", isSmall);
+    updateBooleanAttribute(this, 'small', isSmall);
   }
   #updateColor() {
     if (!this.isDomConnected) {
@@ -86,47 +103,43 @@ class Chip extends NectaryElement {
     if (colorName !== null && colorName.length > 0) {
       const bg = getChipColorBg(colorName);
       const fg = getChipColorFg(colorName);
-      this.#$button.style.setProperty("background-color", bg);
-      this.#$button.style.setProperty("--sinch-global-color-text", fg);
-      this.#$button.style.setProperty("--sinch-global-color-icon", fg);
+      this.#$button.style.setProperty('background-color', bg);
+      this.#$button.style.setProperty('--sinch-global-color-text', fg);
+      this.#$button.style.setProperty('--sinch-global-color-icon', fg);
     } else {
-      this.#$button.style.removeProperty("background-color");
-      this.#$button.style.removeProperty("--sinch-global-color-text");
-      this.#$button.style.removeProperty("--sinch-global-color-icon");
+      this.#$button.style.removeProperty('background-color');
+      this.#$button.style.removeProperty('--sinch-global-color-text');
+      this.#$button.style.removeProperty('--sinch-global-color-icon');
     }
   }
   get focusable() {
     return true;
   }
-  #onKeydown = (e) => {
+  #onKeydown = e => {
     switch (e.code) {
-      case "Space": {
-        this.click();
-      }
+      case 'Space':
+        {
+          this.click();
+        }
     }
   };
   #onClick = () => {
-    this.dispatchEvent(
-      new CustomEvent("-click")
-    );
+    this.dispatchEvent(new CustomEvent('-click'));
   };
   #onFocus = () => {
-    this.dispatchEvent(new CustomEvent("-focus"));
+    this.dispatchEvent(new CustomEvent('-focus'));
   };
   #onBlur = () => {
-    this.dispatchEvent(new CustomEvent("-blur"));
+    this.dispatchEvent(new CustomEvent('-blur'));
   };
   #onFocusReactHandler = () => {
-    getReactEventHandler(this, "on-focus")?.();
+    getReactEventHandler(this, 'on-focus')?.();
   };
   #onBlurReactHandler = () => {
-    getReactEventHandler(this, "on-blur")?.();
+    getReactEventHandler(this, 'on-blur')?.();
   };
-  #onClickReactHandler = (e) => {
-    getReactEventHandler(this, "on-click")?.(e);
+  #onClickReactHandler = e => {
+    getReactEventHandler(this, 'on-click')?.(e);
   };
 }
-defineCustomElement("sinch-chip", Chip);
-export {
-  Chip
-};
+defineCustomElement('sinch-chip', Chip);

package/chip/types.d.ts

@@ -1,5 +1,5 @@
 import type { TSinchChipColor } from './colors';
-import type { NectaryComponentReactByType, NectaryComponentVanillaByType, NectaryComponentReact, NectaryComponentVanilla } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
 export type { TSinchChipColor };
 export type TSinchChipProps = {
     /** Text */
@@ -40,23 +40,3 @@ export type TSinchChip = {
 };
 export type TSinchChipElement = NectaryComponentVanillaByType<TSinchChip>;
 export type TSinchChipReact = NectaryComponentReactByType<TSinchChip>;
-declare global {
-    interface NectaryComponentMap {
-        'sinch-chip': TSinchChip;
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-chip': NectaryComponentVanilla<'sinch-chip'>;
-    }
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-chip': NectaryComponentReact<'sinch-chip'>;
-        }
-    }
-}
-declare module 'react' {
-    namespace JSX {
-        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
-            'sinch-chip': NectaryComponentReact<'sinch-chip'>;
-        }
-    }
-}

package/chip/types.js

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

package/chip/utils.js

@@ -1,10 +1,6 @@
-const getChipColorBg = (id) => {
+export const getChipColorBg = id => {
   return `var(--sinch-comp-chip-color-${id}-default-background-initial)`;
 };
-const getChipColorFg = (id) => {
+export const getChipColorFg = id => {
   return `var(--sinch-comp-chip-color-${id}-default-foreground-initial)`;
-};
-export {
-  getChipColorBg,
-  getChipColorFg
-};
+};

package/code-tag/index.d.ts

@@ -1,5 +1,6 @@
 import { NectaryElement } from '../utils';
-export * from './types';
+import type { TSinchCodeTag } from './types';
+import type { NectaryComponentVanilla, NectaryComponentReact } from '../types';
 export declare class CodeTag extends NectaryElement {
     #private;
     constructor();
@@ -8,3 +9,23 @@ export declare class CodeTag extends NectaryElement {
     get text(): string;
     set text(value: string);
 }
+declare global {
+    interface NectaryComponentMap {
+        'sinch-code-tag': TSinchCodeTag;
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-code-tag': NectaryComponentVanilla<'sinch-code-tag'>;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-code-tag': NectaryComponentReact<'sinch-code-tag'>;
+        }
+    }
+}
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
+            'sinch-code-tag': NectaryComponentReact<'sinch-code-tag'>;
+        }
+    }
+}