@nectary/components 0.25.0 → 0.26.0

package/segmented-icon-control-option/index.js

@@ -0,0 +1,103 @@
+import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
+
+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:block;outline:0}#wrapper{position:relative;width:56px;height:32px;padding:3px 16px;box-sizing:border-box;border:1px solid var(--sinch-color-snow-600);border-left-width:0;border-right-width:0;color:var(--sinch-color-stormy-500);background-color:var(--sinch-color-snow-100);--sinch-color-icon:var(--sinch-color-stormy-500);--sinch-size-icon:24px}#wrapper:hover{background-color:var(--sinch-color-snow-500)}:host(:first-child) #wrapper{border-left-width:1px;border-top-left-radius:4px;border-bottom-left-radius:4px}:host(:last-child) #wrapper{border-right-width:1px;border-top-right-radius:4px;border-bottom-right-radius:4px}:host([checked]:not([checked=false])) #wrapper{border-color:var(--sinch-color-stormy-500)}:host([checked]:not([checked=false]):not(:first-child)) #wrapper::before{content:"";width:1px;background-color:var(--sinch-color-stormy-500);position:absolute;left:-1px;top:-1px;bottom:-1px}:host([checked]:not([checked=false]):not(:last-child)) #wrapper::after{content:"";width:1px;background-color:var(--sinch-color-stormy-500);position:absolute;right:0;top:-1px;bottom:-1px}#button{all:initial;position:absolute;left:0;top:0;box-sizing:border-box;width:100%;height:100%;cursor:pointer;z-index:1}#button:focus::before{content:"";position:absolute;left:-4px;right:-3px;top:-4px;bottom:-4px;border:2px solid var(--sinch-color-aqua-400)}#button:disabled{cursor:unset}:host(:first-child) #button:focus::before{left:-4px;border-top-left-radius:6px;border-bottom-left-radius:6px}:host(:last-child) #button:focus::before{right:-4px;border-top-right-radius:6px;border-bottom-right-radius:6px}:host([disabled]:not([disabled=false])) #wrapper{background-color:var(--sinch-color-snow-100);color:var(--sinch-color-stormy-100);--sinch-color-icon:var(--sinch-color-stormy-100)}::slotted(*){display:block}</style><div id="wrapper"><slot name="icon"></slot><button id="button"></button></div>';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+
+var _onClick = new WeakMap();
+
+class SinchSegmentedIconControlOption extends NectaryElement {
+  constructor() {
+    super();
+
+    _classPrivateFieldInitSpec(this, _onClick, {
+      writable: true,
+      value: e => {
+        e.stopPropagation();
+        this.dispatchEvent(new CustomEvent('change', {
+          bubbles: true,
+          detail: {
+            value: this.value,
+            isChecked: !this.checked
+          }
+        }));
+      }
+    });
+
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+    this.$button = shadowRoot.querySelector('#button');
+  }
+
+  connectedCallback() {
+    this.setAttribute('role', 'tab');
+    this.$button.addEventListener('click', _classPrivateFieldGet(this, _onClick));
+  }
+
+  disconnectedCallback() {
+    this.$button.removeEventListener('click', _classPrivateFieldGet(this, _onClick));
+  }
+
+  static get observedAttributes() {
+    return ['checked', 'disabled', 'value'];
+  }
+
+  set checked(isChecked) {
+    updateBooleanAttribute(this, 'checked', isChecked);
+  }
+
+  get checked() {
+    return getBooleanAttribute(this, 'checked');
+  }
+
+  set value(value) {
+    updateAttribute(this, 'value', value);
+  }
+
+  get value() {
+    return getAttribute(this, 'value', '');
+  }
+
+  set disabled(isDisabled) {
+    updateBooleanAttribute(this, 'disabled', isDisabled);
+  }
+
+  get disabled() {
+    return getBooleanAttribute(this, 'disabled');
+  }
+
+  attributeChangedCallback(name, _, newVal) {
+    switch (name) {
+      case 'checked':
+        {
+          updateAttribute(this, 'aria-selected', isAttrTrue(newVal));
+          break;
+        }
+
+      case 'disabled':
+        {
+          this.$button.disabled = isAttrTrue(newVal);
+          break;
+        }
+    }
+  }
+
+  focus() {
+    this.$button.focus();
+  }
+
+  blur() {
+    this.$button.blur();
+  }
+
+}
+
+defineCustomElement('sinch-segmented-icon-control-option', SinchSegmentedIconControlOption);
+export const isSegmentedIconControlOptionElement = element => {
+  return element instanceof SinchSegmentedIconControlOption;
+};