@nectary/components 0.9.0 → 0.10.0

package/radio/index.js

@@ -1,73 +1,43 @@
 import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
 import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
 
-var _$slot, _onOptionKeyDown, _onSlotChange, _onOptionChange;
+var _$slot, _onOptionKeyDown, _onSlotChange, _onOptionChange, _onValueChange, _dispatchChangeEvent, _getFirstOption, _getLastOption, _getNextOption, _getPrevOption, _getEnabledRadioElements;
+
+function _classPrivateMethodInitSpec(obj, privateSet) { _checkPrivateRedeclaration(obj, privateSet); privateSet.add(obj); }
 
 function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
 
 function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
 
+function _classPrivateMethodGet(receiver, privateSet, fn) { if (!privateSet.has(receiver)) { throw new TypeError("attempted to get private field on non-instance"); } return fn; }
+
 import { isRadioOptionElement } from '../radio-option';
 import { defineCustomElement, getAttribute, updateAttribute } from '../utils';
 const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:column;gap:8px;box-sizing:border-box;width:100%}</style><div id="wrapper"><slot></slot></div>';
 
-const getEnabledRadioElements = $slot => {
-  return $slot.assignedElements().filter(opt => isRadioOptionElement(opt) && opt.disabled !== true);
-};
-
 const findSelectedOption = elements => {
   return elements.find(el => el.checked) ?? null;
 };
 
-const getFirstOption = $slot => {
-  for (const $option of $slot.assignedElements()) {
-    if (isRadioOptionElement($option) && $option.disabled !== true) {
-      return $option;
-    }
-  }
-
-  return null;
-};
-
-const getLastOption = $slot => {
-  for (const $option of $slot.assignedElements().reverse()) {
-    if (isRadioOptionElement($option) && $option.disabled !== true) {
-      return $option;
-    }
-  }
-
-  return null;
-};
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-radio', (_$slot = new WeakMap(), _onOptionKeyDown = new WeakMap(), _onSlotChange = new WeakMap(), _onOptionChange = new WeakMap(), _onValueChange = new WeakSet(), _dispatchChangeEvent = new WeakSet(), _getFirstOption = new WeakSet(), _getLastOption = new WeakSet(), _getNextOption = new WeakSet(), _getPrevOption = new WeakSet(), _getEnabledRadioElements = new WeakSet(), class extends HTMLElement {
+  constructor() {
+    super();
 
-const getNextOption = $slot => {
-  const $options = getEnabledRadioElements($slot);
-  const $selectedOption = findSelectedOption($options);
-  const currentIndex = $selectedOption !== null ? $options.indexOf($selectedOption) : -1;
+    _classPrivateMethodInitSpec(this, _getEnabledRadioElements);
 
-  if (currentIndex < 0) {
-    return getFirstOption($slot);
-  }
+    _classPrivateMethodInitSpec(this, _getPrevOption);
 
-  return $options[(currentIndex + 1) % $options.length];
-};
+    _classPrivateMethodInitSpec(this, _getNextOption);
 
-const getPrevOption = $slot => {
-  const $options = getEnabledRadioElements($slot);
-  const $selectedOption = findSelectedOption($options);
-  const currentIndex = $selectedOption !== null ? $options.indexOf($selectedOption) : -1;
+    _classPrivateMethodInitSpec(this, _getLastOption);
 
-  if (currentIndex < 0) {
-    return getLastOption($slot);
-  }
+    _classPrivateMethodInitSpec(this, _getFirstOption);
 
-  return $options[(currentIndex - 1 + $options.length) % $options.length];
-};
+    _classPrivateMethodInitSpec(this, _dispatchChangeEvent);
 
-const template = document.createElement('template');
-template.innerHTML = templateHTML;
-defineCustomElement('sinch-radio', (_$slot = new WeakMap(), _onOptionKeyDown = new WeakMap(), _onSlotChange = new WeakMap(), _onOptionChange = new WeakMap(), class extends HTMLElement {
-  constructor() {
-    super();
+    _classPrivateMethodInitSpec(this, _onValueChange);
 
     _classPrivateFieldInitSpec(this, _$slot, {
       writable: true,
@@ -82,11 +52,13 @@ defineCustomElement('sinch-radio', (_$slot = new WeakMap(), _onOptionKeyDown = n
           case 'ArrowLeft':
             {
               e.preventDefault();
-              const $option = getPrevOption(_classPrivateFieldGet(this, _$slot));
+
+              const $option = _classPrivateMethodGet(this, _getPrevOption, _getPrevOption2).call(this);
 
               if ($option !== null) {
                 $option.focus();
-                this.dispatchChangeEvent($option.value);
+
+                _classPrivateMethodGet(this, _dispatchChangeEvent, _dispatchChangeEvent2).call(this, $option.value);
               }
 
               break;
@@ -96,11 +68,13 @@ defineCustomElement('sinch-radio', (_$slot = new WeakMap(), _onOptionKeyDown = n
           case 'ArrowRight':
             {
               e.preventDefault();
-              const $option = getNextOption(_classPrivateFieldGet(this, _$slot));
+
+              const $option = _classPrivateMethodGet(this, _getNextOption, _getNextOption2).call(this);
 
               if ($option !== null) {
                 $option.focus();
-                this.dispatchChangeEvent($option.value);
+
+                _classPrivateMethodGet(this, _dispatchChangeEvent, _dispatchChangeEvent2).call(this, $option.value);
               }
 
               break;
@@ -112,7 +86,7 @@ defineCustomElement('sinch-radio', (_$slot = new WeakMap(), _onOptionKeyDown = n
     _classPrivateFieldInitSpec(this, _onSlotChange, {
       writable: true,
       value: () => {
-        this.onValueChange(this.value);
+        _classPrivateMethodGet(this, _onValueChange, _onValueChange2).call(this, this.value);
       }
     });
 
@@ -120,12 +94,13 @@ defineCustomElement('sinch-radio', (_$slot = new WeakMap(), _onOptionKeyDown = n
       writable: true,
       value: e => {
         e.stopPropagation();
-        this.dispatchChangeEvent(e.detail);
+
+        _classPrivateMethodGet(this, _dispatchChangeEvent, _dispatchChangeEvent2).call(this, e.detail);
       }
     });
 
     const shadowRoot = this.attachShadow({
-      mode: 'production' === 'development' ? 'open' : 'closed',
+      mode: 'closed',
       delegatesFocus: true
     });
     shadowRoot.appendChild(template.content.cloneNode(true));
@@ -137,16 +112,16 @@ defineCustomElement('sinch-radio', (_$slot = new WeakMap(), _onOptionKeyDown = n
     _classPrivateFieldGet(this, _$slot).addEventListener('slotchange', _classPrivateFieldGet(this, _onSlotChange));
   }
 
-  static get observedAttributes() {
-    return ['value'];
+  connectedCallback() {
+    this.setAttribute('role', 'radiogroup');
   }
 
-  get type() {
-    return 'text';
+  static get observedAttributes() {
+    return ['value'];
   }
 
   get nodeName() {
-    return 'input';
+    return 'select';
   }
 
   set value(value) {
@@ -161,25 +136,76 @@ defineCustomElement('sinch-radio', (_$slot = new WeakMap(), _onOptionKeyDown = n
     switch (name) {
       case 'value':
         {
-          this.onValueChange(newVal ?? '');
+          _classPrivateMethodGet(this, _onValueChange, _onValueChange2).call(this, newVal ?? '');
+
           break;
         }
     }
   }
 
-  onValueChange(value) {
-    for (const $option of _classPrivateFieldGet(this, _$slot).assignedElements()) {
-      if (isRadioOptionElement($option)) {
-        $option.checked = $option.disabled !== true && $option.value === value;
-      }
+}));
+
+function _onValueChange2(value) {
+  for (const $option of _classPrivateFieldGet(this, _$slot).assignedElements()) {
+    if (isRadioOptionElement($option)) {
+      $option.checked = $option.disabled !== true && $option.value === value;
     }
   }
+}
+
+function _dispatchChangeEvent2(value) {
+  this.dispatchEvent(new CustomEvent('change', {
+    detail: value,
+    bubbles: true
+  }));
+}
 
-  dispatchChangeEvent(value) {
-    this.dispatchEvent(new CustomEvent('change', {
-      detail: value,
-      bubbles: true
-    }));
+function _getFirstOption2() {
+  for (const $option of _classPrivateFieldGet(this, _$slot).assignedElements()) {
+    if (isRadioOptionElement($option) && $option.disabled !== true) {
+      return $option;
+    }
+  }
+
+  return null;
+}
+
+function _getLastOption2() {
+  for (const $option of _classPrivateFieldGet(this, _$slot).assignedElements().reverse()) {
+    if (isRadioOptionElement($option) && $option.disabled !== true) {
+      return $option;
+    }
   }
 
-}));
+  return null;
+}
+
+function _getNextOption2() {
+  const $options = _classPrivateMethodGet(this, _getEnabledRadioElements, _getEnabledRadioElements2).call(this);
+
+  const $selectedOption = findSelectedOption($options);
+  const currentIndex = $selectedOption !== null ? $options.indexOf($selectedOption) : -1;
+
+  if (currentIndex < 0) {
+    return _classPrivateMethodGet(this, _getFirstOption, _getFirstOption2).call(this);
+  }
+
+  return $options[(currentIndex + 1) % $options.length];
+}
+
+function _getPrevOption2() {
+  const $options = _classPrivateMethodGet(this, _getEnabledRadioElements, _getEnabledRadioElements2).call(this);
+
+  const $selectedOption = findSelectedOption($options);
+  const currentIndex = $selectedOption !== null ? $options.indexOf($selectedOption) : -1;
+
+  if (currentIndex < 0) {
+    return _classPrivateMethodGet(this, _getLastOption, _getLastOption2).call(this);
+  }
+
+  return $options[(currentIndex - 1 + $options.length) % $options.length];
+}
+
+function _getEnabledRadioElements2() {
+  return _classPrivateFieldGet(this, _$slot).assignedElements().filter(opt => isRadioOptionElement(opt) && opt.disabled !== true);
+}

package/radio-option/index.d.ts

@@ -13,6 +13,7 @@ export declare type TSinchRadioOptionReact = TSinchElementReact<TSinchRadioOptio
     value: string;
     disabled?: boolean;
     text: string;
+    'aria-label': string;
     onFocus?: (e: FocusEvent<TSinchRadioOptionElement>) => void;
     onBlur?: (e: FocusEvent<TSinchRadioOptionElement>) => void;
 };

package/radio-option/index.js

@@ -41,7 +41,7 @@ defineCustomElement('sinch-radio-option', (_$input = new WeakMap(), _$label = ne
     });
 
     const shadowRoot = this.attachShadow({
-      mode: 'production' === 'development' ? 'open' : 'closed',
+      mode: 'closed',
       delegatesFocus: true
     });
     shadowRoot.appendChild(template.content.cloneNode(true));
@@ -52,6 +52,8 @@ defineCustomElement('sinch-radio-option', (_$input = new WeakMap(), _$label = ne
   }
 
   connectedCallback() {
+    this.setAttribute('role', 'radio');
+
     _classPrivateFieldGet(this, _$input).addEventListener('input', _classPrivateFieldGet(this, _onInput));
   }
 
@@ -106,6 +108,7 @@ defineCustomElement('sinch-radio-option', (_$input = new WeakMap(), _$label = ne
       case 'checked':
         {
           _classPrivateFieldGet(this, _$input).checked = isAttrTrue(newVal);
+          updateAttribute(this, 'aria-checked', isAttrTrue(newVal));
           break;
         }
 

package/select/index.d.ts

@@ -1,4 +1,5 @@
-import type { TSinchElementReact } from '../types';
+import '../select-option';
+import type { TRect, TSinchElementReact } from '../types';
 import type { FocusEvent, SyntheticEvent } from 'react';
 export declare type TSinchSelectElement = HTMLElement & {
     value: string;
@@ -9,6 +10,7 @@ export declare type TSinchSelectElement = HTMLElement & {
     additionalText: string | null;
     disabled: boolean;
     maxVisibleItems: number | null;
+    readonly dropdownRect: TRect;
     focus(): void;
     blur(): void;
 };
@@ -21,6 +23,7 @@ export declare type TSinchSelectReact = TSinchElementReact<TSinchSelectElement>
     additionalText?: string;
     disabled?: boolean;
     maxVisibleItems?: number;
+    'aria-label': string;
     onChange: (e: SyntheticEvent<TSinchSelectElement, CustomEvent<string>>) => void;
     onFocus?: (e: FocusEvent<TSinchSelectElement>) => void;
     onBlur?: (e: FocusEvent<TSinchSelectElement>) => void;