@nectary/components 4.11.1 → 4.12.0

package/select-button/index.js

@@ -1,11 +1,14 @@
-import '../text';
-import '../icon';
-import { defineCustomElement, getAttribute, getBooleanAttribute, getLiteralAttribute, getReactEventHandler, isAttrTrue, NectaryElement, setClass, subscribeContext, updateAttribute, updateBooleanAttribute, updateLiteralAttribute, Context, isAttrEqual } from '../utils';
-import { DEFAULT_SIZE, sizeValues } from '../utils/size';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0;cursor:pointer}:host([disabled]){cursor:initial}#wrapper{position:relative;display:flex;flex-direction:row;align-items:center;gap:8px;box-sizing:border-box;width:100%;height:var(--sinch-local-size);padding:0 8px 0 12px;background-color:var(--sinch-comp-select-button-color-default-background-initial);border-radius:var(--sinch-local-shape-radius);--sinch-local-size:var(--sinch-comp-select-button-size-container-m);--sinch-global-size-icon:var(--sinch-comp-select-button-size-icon-m);--sinch-local-shape-radius:var(--sinch-comp-select-button-shape-radius-size-m);--sinch-global-color-icon:var(--sinch-comp-select-button-color-default-icon-initial)}:host([data-size="l"])>#wrapper{--sinch-local-size:var(--sinch-comp-select-button-size-container-l);--sinch-global-size-icon:var(--sinch-comp-select-button-size-icon-l);--sinch-local-shape-radius:var(--sinch-comp-select-button-shape-radius-size-l)}:host([data-size="m"])>#wrapper{--sinch-local-size:var(--sinch-comp-select-button-size-container-m);--sinch-global-size-icon:var(--sinch-comp-select-button-size-icon-m);--sinch-local-shape-radius:var(--sinch-comp-select-button-shape-radius-size-m)}:host([data-size="s"])>#wrapper{--sinch-local-size:var(--sinch-comp-select-button-size-container-s);--sinch-global-size-icon:var(--sinch-comp-select-button-size-icon-s);--sinch-local-shape-radius:var(--sinch-comp-select-button-shape-radius-size-s)}:host([data-size="l"]) #wrapper{padding:0 12px}:host([data-size="m"]) #wrapper{padding:0 8px 0 12px}:host([data-size="s"]) #wrapper{padding:0 4px 0 12px}:host([disabled]) #wrapper{--sinch-global-color-icon:var(--sinch-comp-select-button-color-disabled-icon-initial)}#text{flex:1;min-width:0;--sinch-comp-text-font:var(--sinch-comp-select-button-font-input);--sinch-global-color-text:var(--sinch-comp-select-button-color-default-text-initial)}#text:empty{display:none}#placeholder{display:none;flex:1;min-width:0;--sinch-comp-text-font:var(--sinch-comp-select-button-font-placeholder);--sinch-global-color-text:var(--sinch-comp-select-button-color-default-placeholder-initial)}#text:empty+#placeholder{display:block}#border{position:absolute;border:1px solid var(--sinch-comp-select-button-color-default-border-initial);border-radius:var(--sinch-local-shape-radius);inset:0;pointer-events:none}:host(:focus-visible) #border{border-color:var(--sinch-comp-select-button-color-default-border-focus);border-width:2px}:host([invalid]) #border{border-color:var(--sinch-comp-select-button-color-invalid-border-initial)}:host([disabled]) #border{border-color:var(--sinch-comp-select-button-color-disabled-border-initial)}:host([disabled]) #text{--sinch-global-color-text:var(--sinch-comp-select-button-color-disabled-text-initial)}:host([disabled]) #placeholder{--sinch-global-color-text:var(--sinch-comp-select-button-color-disabled-placeholder-initial)}#left{display:flex;flex-direction:row;align-self:stretch;align-items:center;gap:4px;margin-left:-4px}#left.empty{display:none}#dropdown-icon{margin-left:-4px}</style><div id="wrapper" inert><div id="border"></div><div id="left"><slot name="left"></slot></div><slot name="icon"></slot><sinch-text id="text" type="m" ellipsis></sinch-text><sinch-text id="placeholder" type="m" ellipsis></sinch-text><sinch-icon icons-version="2" name="fa-chevron-down" id="dropdown-icon"></sinch-icon></div>';
-const template = document.createElement('template');
+import "../text/index.js";
+import "../icon/index.js";
+import { Context, subscribeContext } from "../utils/context.js";
+import { isAttrEqual, updateAttribute, isAttrTrue, updateBooleanAttribute, getAttribute, getBooleanAttribute, updateLiteralAttribute, getLiteralAttribute, setClass } from "../utils/dom.js";
+import { defineCustomElement, NectaryElement } from "../utils/element.js";
+import { getReactEventHandler } from "../utils/get-react-event-handler.js";
+import { sizeValues, DEFAULT_SIZE } from "../utils/size.js";
+const templateHTML = '<style>\n  :host {\n    display: inline-block;\n    vertical-align: middle;\n    outline: none;\n    cursor: pointer;\n  }\n\n  :host([disabled]) {\n    cursor: initial;\n  }\n\n  #wrapper {\n    position: relative;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: 8px;\n    box-sizing: border-box;\n    width: 100%;\n    height: var(--sinch-local-size);\n    padding: 0 8px 0 12px;\n    background-color:\n      var(\n        --sinch-comp-select-button-color-default-background-initial\n      );\n    border-radius: var(--sinch-local-shape-radius);\n\n    --sinch-local-size: var(--sinch-comp-select-button-size-container-m);\n    --sinch-global-size-icon: var(--sinch-comp-select-button-size-icon-m);\n    --sinch-local-shape-radius:\n      var(\n        --sinch-comp-select-button-shape-radius-size-m\n      );\n    --sinch-global-color-icon:\n      var(\n        --sinch-comp-select-button-color-default-icon-initial\n      );\n  }\n\n  :host([data-size="l"]) > #wrapper {\n    --sinch-local-size: var(--sinch-comp-select-button-size-container-l);\n    --sinch-global-size-icon: var(--sinch-comp-select-button-size-icon-l);\n    --sinch-local-shape-radius:\n      var(\n        --sinch-comp-select-button-shape-radius-size-l\n      );\n  }\n\n  :host([data-size="m"]) > #wrapper {\n    --sinch-local-size: var(--sinch-comp-select-button-size-container-m);\n    --sinch-global-size-icon: var(--sinch-comp-select-button-size-icon-m);\n    --sinch-local-shape-radius:\n      var(\n        --sinch-comp-select-button-shape-radius-size-m\n      );\n  }\n\n  :host([data-size="s"]) > #wrapper {\n    --sinch-local-size: var(--sinch-comp-select-button-size-container-s);\n    --sinch-global-size-icon: var(--sinch-comp-select-button-size-icon-s);\n    --sinch-local-shape-radius:\n      var(\n        --sinch-comp-select-button-shape-radius-size-s\n      );\n  }\n\n  :host([data-size="l"]) #wrapper {\n    padding: 0 12px;\n  }\n\n  :host([data-size="m"]) #wrapper {\n    padding: 0 8px 0 12px;\n  }\n\n  :host([data-size="s"]) #wrapper {\n    padding: 0 4px 0 12px;\n  }\n\n  :host([disabled]) #wrapper {\n    --sinch-global-color-icon:\n      var(\n        --sinch-comp-select-button-color-disabled-icon-initial\n      );\n  }\n\n  #text {\n    flex: 1;\n    min-width: 0;\n\n    --sinch-comp-text-font: var(--sinch-comp-select-button-font-input);\n    --sinch-global-color-text:\n      var(\n        --sinch-comp-select-button-color-default-text-initial\n      );\n  }\n\n  #text:empty {\n    display: none;\n  }\n\n  #placeholder {\n    display: none;\n    flex: 1;\n    min-width: 0;\n\n    --sinch-comp-text-font: var(--sinch-comp-select-button-font-placeholder);\n    --sinch-global-color-text:\n      var(\n        --sinch-comp-select-button-color-default-placeholder-initial\n      );\n  }\n\n  #text:empty + #placeholder {\n    display: block;\n  }\n\n  #border {\n    position: absolute;\n    border:\n      1px solid\n      var(--sinch-comp-select-button-color-default-border-initial);\n    border-radius: var(--sinch-local-shape-radius);\n    inset: 0;\n    pointer-events: none;\n  }\n\n  :host(:focus-visible) #border {\n    border-color: var(--sinch-comp-select-button-color-default-border-focus);\n    border-width: 2px;\n  }\n\n  :host([invalid]) #border {\n    border-color: var(--sinch-comp-select-button-color-invalid-border-initial);\n  }\n\n  :host([disabled]) #border {\n    border-color: var(--sinch-comp-select-button-color-disabled-border-initial);\n  }\n\n  :host([disabled]) #text {\n    --sinch-global-color-text:\n      var(\n        --sinch-comp-select-button-color-disabled-text-initial\n      );\n  }\n\n  /* stylelint-disable-next-line no-descending-specificity */\n  :host([disabled]) #placeholder {\n    --sinch-global-color-text:\n      var(\n        --sinch-comp-select-button-color-disabled-placeholder-initial\n      );\n  }\n\n  #left {\n    display: flex;\n    flex-direction: row;\n    align-self: stretch;\n    align-items: center;\n    gap: 4px;\n    margin-left: -4px;\n  }\n\n  #left.empty {\n    display: none;\n  }\n\n  #dropdown-icon {\n    margin-left: -4px;\n  }\n</style>\n\n<div id="wrapper" inert>\n  <div id="border"></div>\n  <div id="left">\n    <slot name="left"></slot>\n  </div>\n  <slot name="icon"></slot>\n  <sinch-text id="text" type="m" ellipsis></sinch-text>\n  <sinch-text id="placeholder" type="m" ellipsis></sinch-text>\n  <sinch-icon icons-version="2" name="fa-chevron-down" id="dropdown-icon"></sinch-icon>\n</div>\n';
+const template = document.createElement("template");
 template.innerHTML = templateHTML;
-export class SelectButton extends NectaryElement {
+class SelectButton extends NectaryElement {
   #$text;
   #$placeholder;
   #$leftSlot;
@@ -17,47 +20,31 @@ export class SelectButton extends NectaryElement {
     super();
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-    this.#$text = shadowRoot.querySelector('#text');
-    this.#$placeholder = shadowRoot.querySelector('#placeholder');
+    this.#$text = shadowRoot.querySelector("#text");
+    this.#$placeholder = shadowRoot.querySelector("#placeholder");
     this.#$leftSlot = shadowRoot.querySelector('slot[name="left"]');
-    this.#$leftWrapper = shadowRoot.querySelector('#left');
-    this.#$wrapper = shadowRoot.querySelector('#wrapper');
-    this.#sizeContext = new Context(this.#$wrapper, 'size');
+    this.#$leftWrapper = shadowRoot.querySelector("#left");
+    this.#$wrapper = shadowRoot.querySelector("#wrapper");
+    this.#sizeContext = new Context(this.#$wrapper, "size");
   }
   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.#onButtonClick, {
-      signal
-    });
-    this.addEventListener('focus', this.#onButtonFocus, {
-      signal
-    });
-    this.addEventListener('blur', this.#onButtonBlur, {
-      signal
-    });
-    this.addEventListener('keydown', this.#onButtonKeydown, {
-      signal
-    });
-    this.addEventListener('-click', this.#onClickReactHandler, {
-      signal
-    });
-    this.addEventListener('-focus', this.#onFocusReactHandler, {
-      signal
-    });
-    this.addEventListener('-blur', this.#onBlurReactHandler, {
-      signal
-    });
-    this.#$leftSlot.addEventListener('slotchange', this.#onLeftSlotChange, {
+    this.addEventListener("click", this.#onButtonClick, { signal });
+    this.addEventListener("focus", this.#onButtonFocus, { signal });
+    this.addEventListener("blur", this.#onButtonBlur, { signal });
+    this.addEventListener("keydown", this.#onButtonKeydown, { signal });
+    this.addEventListener("-click", this.#onClickReactHandler, { signal });
+    this.addEventListener("-focus", this.#onFocusReactHandler, { signal });
+    this.addEventListener("-blur", this.#onBlurReactHandler, { signal });
+    this.#$leftSlot.addEventListener("slotchange", this.#onLeftSlotChange, {
       signal
     });
     this.#sizeContext.listen(this.#controller.signal);
-    subscribeContext(this, 'size', this.#onContextSize, signal);
+    subscribeContext(this, "size", this.#onContextSize, signal);
     this.#onLeftSlotChange();
     this.#onSizeUpdate();
   }
@@ -67,137 +54,142 @@ export class SelectButton extends NectaryElement {
     this.#controller = null;
   }
   static get observedAttributes() {
-    return ['text', 'placeholder', 'invalid', 'disabled', 'size', 'data-size'];
+    return [
+      "text",
+      "placeholder",
+      "invalid",
+      "disabled",
+      "size",
+      "data-size"
+    ];
   }
   attributeChangedCallback(name, oldVal, newVal) {
     if (isAttrEqual(oldVal, newVal)) {
       return;
     }
     switch (name) {
-      case 'text':
-        {
-          this.#$text.textContent = newVal;
-          break;
-        }
-      case 'placeholder':
-        {
-          this.#$placeholder.textContent = newVal;
-          break;
-        }
-      case 'invalid':
-        {
-          const isInvalid = isAttrTrue(newVal);
-          this.ariaInvalid = isInvalid.toString();
-          updateBooleanAttribute(this, 'invalid', isInvalid);
-          break;
-        }
-      case 'disabled':
-        {
-          const isDisabled = isAttrTrue(newVal);
-          this.ariaDisabled = isDisabled.toString();
-          updateBooleanAttribute(this, 'disabled', isDisabled);
-          break;
-        }
-      case 'size':
-        {
-          updateAttribute(this, 'data-size', newVal);
-          break;
-        }
-      case 'data-size':
-        {
-          this.#onSizeUpdate();
-          break;
-        }
+      case "text": {
+        this.#$text.textContent = newVal;
+        break;
+      }
+      case "placeholder": {
+        this.#$placeholder.textContent = newVal;
+        break;
+      }
+      case "invalid": {
+        const isInvalid = isAttrTrue(newVal);
+        this.ariaInvalid = isInvalid.toString();
+        updateBooleanAttribute(this, "invalid", isInvalid);
+        break;
+      }
+      case "disabled": {
+        const isDisabled = isAttrTrue(newVal);
+        this.ariaDisabled = isDisabled.toString();
+        updateBooleanAttribute(this, "disabled", isDisabled);
+        break;
+      }
+      case "size": {
+        updateAttribute(this, "data-size", newVal);
+        break;
+      }
+      case "data-size": {
+        this.#onSizeUpdate();
+        break;
+      }
     }
   }
   set text(value) {
-    updateAttribute(this, 'text', value);
+    updateAttribute(this, "text", value);
   }
   get text() {
-    return getAttribute(this, 'text', '');
+    return getAttribute(this, "text", "");
   }
   set placeholder(value) {
-    updateAttribute(this, 'placeholder', value);
+    updateAttribute(this, "placeholder", value);
   }
   get placeholder() {
-    return getAttribute(this, 'placeholder');
+    return getAttribute(this, "placeholder");
   }
   set invalid(isInvalid) {
-    updateBooleanAttribute(this, 'invalid', isInvalid);
+    updateBooleanAttribute(this, "invalid", isInvalid);
   }
   get invalid() {
-    return getBooleanAttribute(this, 'invalid');
+    return getBooleanAttribute(this, "invalid");
   }
   set disabled(isDisabled) {
-    updateBooleanAttribute(this, 'disabled', isDisabled);
+    updateBooleanAttribute(this, "disabled", isDisabled);
   }
   get disabled() {
-    return getBooleanAttribute(this, 'disabled');
+    return getBooleanAttribute(this, "disabled");
   }
   set size(size) {
-    updateLiteralAttribute(this, sizeValues, 'size', size);
+    updateLiteralAttribute(this, sizeValues, "size", size);
   }
   get size() {
-    return getLiteralAttribute(this, sizeValues, 'size', DEFAULT_SIZE);
+    return getLiteralAttribute(this, sizeValues, "size", DEFAULT_SIZE);
   }
   get focusable() {
     return true;
   }
-  #onContextSize = e => {
-    if (this.hasAttribute('size')) {
+  #onContextSize = (e) => {
+    if (this.hasAttribute("size") === true) {
       return;
     }
     switch (e.detail) {
-      case 'l':
-        {
-          this.setAttribute('data-size', 'm');
-          break;
-        }
-      default:
-        {
-          this.setAttribute('data-size', 's');
-        }
+      case "l": {
+        this.setAttribute("data-size", "m");
+        break;
+      }
+      default: {
+        this.setAttribute("data-size", "s");
+      }
     }
   };
   #onSizeUpdate() {
     if (!this.isDomConnected) {
       return;
     }
-    const size = this.getAttribute('data-size') ?? DEFAULT_SIZE;
+    const size = this.getAttribute("data-size") ?? DEFAULT_SIZE;
     this.#sizeContext.dispatch(size);
   }
   #onLeftSlotChange = () => {
-    setClass(this.#$leftWrapper, 'empty', this.#$leftSlot.assignedElements().length === 0);
+    setClass(
+      this.#$leftWrapper,
+      "empty",
+      this.#$leftSlot.assignedElements().length === 0
+    );
   };
   #onButtonFocus = () => {
-    this.dispatchEvent(new CustomEvent('-focus'));
+    this.dispatchEvent(new CustomEvent("-focus"));
   };
   #onButtonBlur = () => {
-    this.dispatchEvent(new CustomEvent('-blur'));
+    this.dispatchEvent(new CustomEvent("-blur"));
   };
-  #onButtonKeydown = e => {
+  #onButtonKeydown = (e) => {
     switch (e.code) {
-      case 'Space':
-      case 'Enter':
-        {
-          e.preventDefault();
-          this.click();
-        }
+      case "Space":
+      case "Enter": {
+        e.preventDefault();
+        this.click();
+      }
     }
   };
   #onButtonClick = () => {
     if (!this.disabled) {
-      this.dispatchEvent(new CustomEvent('-click'));
+      this.dispatchEvent(new CustomEvent("-click"));
     }
   };
-  #onClickReactHandler = e => {
-    getReactEventHandler(this, 'on-click')?.(e);
+  #onClickReactHandler = (e) => {
+    getReactEventHandler(this, "on-click")?.(e);
   };
   #onFocusReactHandler = () => {
-    getReactEventHandler(this, 'on-focus')?.();
+    getReactEventHandler(this, "on-focus")?.();
   };
   #onBlurReactHandler = () => {
-    getReactEventHandler(this, 'on-blur')?.();
+    getReactEventHandler(this, "on-blur")?.();
   };
 }
-defineCustomElement('sinch-select-button', SelectButton);
+defineCustomElement("sinch-select-button", SelectButton);
+export {
+  SelectButton
+};

package/select-button/types.d.ts

@@ -1,4 +1,4 @@
-import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType, NectaryComponentReact, NectaryComponentVanilla } from '../types';
 import type { TSinchSize } from '../utils/size';
 export type TSinchSelectButtonProps = {
     /** Text */
@@ -53,3 +53,27 @@ export type TSinchSelectButton = {
 };
 export type TSinchSelectButtonElement = NectaryComponentVanillaByType<TSinchSelectButton>;
 export type TSinchSelectButtonReact = NectaryComponentReactByType<TSinchSelectButton>;
+declare global {
+    interface NectaryComponentMap {
+        'sinch-select-button': {
+            props: TSinchSelectButtonProps;
+            events: TSinchSelectButtonEvents;
+            style: TSinchSelectButtonStyle;
+        };
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-select-button': NectaryComponentVanilla<'sinch-select-button'>;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-select-button': NectaryComponentReact<'sinch-select-button'>;
+        }
+    }
+}
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
+            'sinch-select-button': NectaryComponentReact<'sinch-select-button'>;
+        }
+    }
+}

package/select-button/types.js

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

package/select-menu/global/index.d.ts

@@ -0,0 +1 @@
+export * from '../types';

package/select-menu/global/index.js

@@ -0,0 +1,2 @@
+import { defineCustomElement } from "../../utils/element.js";
+defineCustomElement("sinch-select-menu");

package/select-menu/index.d.ts

@@ -2,8 +2,7 @@ import '../input';
 import '../icon';
 import '../text';
 import { NectaryElement } from '../utils';
-import type { TSinchSelectMenu } from './types';
-import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
+export * from './types';
 export declare class SelectMenu extends NectaryElement {
     #private;
     static formAssociated: boolean;
@@ -33,23 +32,3 @@ export declare class SelectMenu extends NectaryElement {
     get 'search-value'(): string;
     get focusable(): boolean;
 }
-declare global {
-    interface NectaryComponentMap {
-        'sinch-select-menu': TSinchSelectMenu;
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-select-menu': NectaryComponentVanilla<'sinch-select-menu'>;
-    }
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-select-menu': NectaryComponentReact<'sinch-select-menu'>;
-        }
-    }
-}
-declare module 'react' {
-    namespace JSX {
-        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
-            'sinch-select-menu': NectaryComponentReact<'sinch-select-menu'>;
-        }
-    }
-}