@nectary/components 0.24.0 → 0.26.0

package/tabs-option/index.js

@@ -1,27 +1,26 @@
 import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
 
-var _onInput;
+var _onClick;
 
 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"); } }
 
 import { defineCustomElement, getAttribute, getBooleanAttribute, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}:host()>*{pointer-events:none}#wrapper{display:flex;flex-direction:row;align-items:center;gap:12px;position:relative;width:100%;height:42px;padding:8px 20px;box-sizing:border-box;box-shadow:0 1px 0 0 var(--sinch-color-stormy-100);color:var(--sinch-color-stormy-500);--sinch-color-icon:var(--sinch-color-stormy-500);--sinch-size-icon:16px}#content{font:var(--sinch-font-title-s);flex-shrink:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host([checked]) #wrapper{box-shadow:0 2px 0 0 var(--sinch-color-stormy-500)}input{all:initial;position:absolute;left:0;top:0;box-sizing:border-box;width:100%;height:100%;cursor:pointer}:host([disabled]:not([disabled=false])) #wrapper{color:var(--sinch-color-stormy-100);--sinch-color-icon:var(--sinch-color-stormy-100)}input:disabled{cursor:unset}</style><div id="wrapper"><slot name="icon"></slot><label for="input" id="content" aria-hidden="true"></label> <input id="input" type="radio" aria-hidden="true"/></div>';
+const templateHTML = '<style>:host{display:block;outline:0}:host()>*{pointer-events:none}#wrapper{display:flex;flex-direction:row;align-items:center;gap:12px;position:relative;width:100%;height:42px;padding:8px 20px;box-sizing:border-box;box-shadow:0 1px 0 0 var(--sinch-color-stormy-100);color:var(--sinch-color-stormy-500);background-color:var(--sinch-color-snow-100);--sinch-color-icon:var(--sinch-color-stormy-500);--sinch-size-icon:16px}#content{font:var(--sinch-font-title-s);flex-shrink:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host([checked]:not([checked=false])) #wrapper{box-shadow:0 2px 0 0 var(--sinch-color-stormy-500)}#button{all:initial;position:absolute;left:0;top:0;box-sizing:border-box;width:100%;height:100%;cursor:pointer}#button:disabled{cursor:unset}:host([disabled]:not([disabled=false])) #wrapper{color:var(--sinch-color-stormy-100);--sinch-color-icon:var(--sinch-color-stormy-100)}</style><div id="wrapper"><slot name="icon"></slot><label for="input" id="content"></label> <button id="button" type="radio"/></div>';
 export const isTabsOptionElement = element => {
   return element instanceof Element && element.tagName === 'SINCH-TABS-OPTION';
 };
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-tabs-option', (_onInput = new WeakMap(), class extends NectaryElement {
+defineCustomElement('sinch-tabs-option', (_onClick = new WeakMap(), class extends NectaryElement {
   constructor() {
     super();
 
-    _classPrivateFieldInitSpec(this, _onInput, {
+    _classPrivateFieldInitSpec(this, _onClick, {
       writable: true,
       value: e => {
         e.stopPropagation();
-        this.$input.checked = false;
         this.dispatchEvent(new CustomEvent('change', {
           bubbles: true,
           detail: this.value
@@ -31,17 +30,17 @@ defineCustomElement('sinch-tabs-option', (_onInput = new WeakMap(), class extend
 
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-    this.$input = shadowRoot.querySelector('input');
+    this.$button = shadowRoot.querySelector('#button');
     this.$label = shadowRoot.querySelector('#content');
   }
 
   connectedCallback() {
     this.setAttribute('role', 'tab');
-    this.$input.addEventListener('input', _classPrivateFieldGet(this, _onInput));
+    this.$button.addEventListener('click', _classPrivateFieldGet(this, _onClick));
   }
 
   disconnectedCallback() {
-    this.$input.removeEventListener('input', _classPrivateFieldGet(this, _onInput));
+    this.$button.removeEventListener('click', _classPrivateFieldGet(this, _onClick));
   }
 
   static get observedAttributes() {
@@ -90,39 +89,24 @@ defineCustomElement('sinch-tabs-option', (_onInput = new WeakMap(), class extend
 
       case 'checked':
         {
-          const isChecked = isAttrTrue(newVal);
-          this.$input.checked = isChecked;
-
-          if (isChecked) {
-            this.scrollIntoView?.({
-              block: 'nearest'
-            });
-          }
-
           updateAttribute(this, 'aria-selected', isAttrTrue(newVal));
           break;
         }
 
       case 'disabled':
         {
-          this.$input.disabled = isAttrTrue(newVal);
-          break;
-        }
-
-      case 'value':
-        {
-          this.$input.value = newVal ?? '';
+          this.$button.disabled = isAttrTrue(newVal);
           break;
         }
     }
   }
 
   focus() {
-    this.$input.focus();
+    this.$button.focus();
   }
 
   blur() {
-    this.$input.blur();
+    this.$button.blur();
   }
 
 }));