@nectary/components 4.12.0 → 4.12.1

package/select-button/index.js

@@ -1,14 +1,11 @@
-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");
+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');
 template.innerHTML = templateHTML;
-class SelectButton extends NectaryElement {
+export class SelectButton extends NectaryElement {
   #$text;
   #$placeholder;
   #$leftSlot;
@@ -20,31 +17,47 @@ 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();
   }
@@ -54,142 +67,137 @@ 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") === true) {
+  #onContextSize = e => {
+    if (this.hasAttribute('size')) {
       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);
-export {
-  SelectButton
-};
+defineCustomElement('sinch-select-button', SelectButton);

package/select-button/types.d.ts

@@ -1,4 +1,4 @@
-import type { NectaryComponentReactByType, NectaryComponentVanillaByType, NectaryComponentReact, NectaryComponentVanilla } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
 import type { TSinchSize } from '../utils/size';
 export type TSinchSelectButtonProps = {
     /** Text */
@@ -53,27 +53,3 @@ 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/index.d.ts

@@ -2,7 +2,8 @@ import '../input';
 import '../icon';
 import '../text';
 import { NectaryElement } from '../utils';
-export * from './types';
+import type { TSinchSelectMenu } from './types';
+import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
 export declare class SelectMenu extends NectaryElement {
     #private;
     static formAssociated: boolean;
@@ -32,3 +33,23 @@ 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'>;
+        }
+    }
+}