@nectary/components 0.8.0

package/table/index.js

@@ -0,0 +1,18 @@
+import { defineCustomElement } from '../utils';
+const templateHTML = '<style>:host{display:table;font:var(--sinch-font-body)}</style><slot></slot>';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-table', class extends HTMLElement {
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow({
+      mode: 'production' === 'development' ? 'open' : 'closed'
+    });
+    shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+
+  connectedCallback() {
+    this.setAttribute('role', 'table');
+  }
+
+});

package/table-body/index.d.ts

@@ -0,0 +1,13 @@
+import type { TSinchElementReact } from '../types';
+export declare type TSinchTableBodyElement = HTMLElement;
+export declare type TSinchTableBodyReact = TSinchElementReact<TSinchTableBodyElement>;
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-table-body': TSinchTableBodyReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-table-body': TSinchTableBodyElement;
+    }
+}

package/table-body/index.js

@@ -0,0 +1,18 @@
+import { defineCustomElement } from '../utils';
+const templateHTML = '<style>:host{display:table-row-group}</style><slot></slot>';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-table-body', class extends HTMLElement {
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow({
+      mode: 'production' === 'development' ? 'open' : 'closed'
+    });
+    shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+
+  connectedCallback() {
+    this.setAttribute('role', 'rowgroup');
+  }
+
+});

package/table-cell/index.d.ts

@@ -0,0 +1,20 @@
+import type { TSinchElementReact } from '../types';
+declare const alignValues: readonly ["start", "center", "end"];
+export declare type TAlignType = typeof alignValues[number];
+export declare type TSinchTableCellElement = HTMLElement & {
+    align: TAlignType;
+};
+export declare type TSinchTableCellReact = TSinchElementReact<TSinchTableCellElement> & {
+    align?: TAlignType;
+};
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-table-cell': TSinchTableCellReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-table-cell': TSinchTableCellElement;
+    }
+}
+export {};

package/table-cell/index.js

@@ -0,0 +1,27 @@
+import { defineCustomElement, getLiteralAttribute, updateLiteralAttribute } from '../utils';
+const templateHTML = '<style>:host{display:table-cell;vertical-align:top;border-bottom:1px solid var(--sinch-color-snow-600)}#wrapper{display:flex;flex-direction:column;justify-content:center;min-height:48px;box-sizing:border-box;padding:8px 4px}:host(:first-child) #wrapper{padding-left:8px}:host(:last-child) #wrapper{padding-right:8px}:host([align=end]) #wrapper{text-align:end;align-items:flex-end}:host([align=center]) #wrapper{text-align:center;align-items:center}</style><div id="wrapper"><slot></slot></div>';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+const alignValues = ['start', 'center', 'end'];
+defineCustomElement('sinch-table-cell', class extends HTMLElement {
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow({
+      mode: 'production' === 'development' ? 'open' : 'closed'
+    });
+    shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+
+  connectedCallback() {
+    this.setAttribute('role', 'cell');
+  }
+
+  set align(value) {
+    updateLiteralAttribute(this, alignValues, 'align', value);
+  }
+
+  get align() {
+    return getLiteralAttribute(this, alignValues, 'align', 'start');
+  }
+
+});

package/table-head/index.d.ts

@@ -0,0 +1,13 @@
+import type { TSinchElementReact } from '../types';
+export declare type TSinchTableHeadElement = HTMLElement;
+export declare type TSinchTableHeadReact = TSinchElementReact<TSinchTableHeadElement>;
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-table-head': TSinchTableHeadReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-table-head': TSinchTableHeadElement;
+    }
+}

package/table-head/index.js

@@ -0,0 +1,18 @@
+import { defineCustomElement } from '../utils';
+const templateHTML = '<style>:host{display:table-header-group}</style><slot></slot>';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-table-head', class extends HTMLElement {
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow({
+      mode: 'production' === 'development' ? 'open' : 'closed'
+    });
+    shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+
+  connectedCallback() {
+    this.setAttribute('role', 'rowgroup');
+  }
+
+});

package/table-head-cell/index.d.ts

@@ -0,0 +1,24 @@
+import type { TSinchElementReact } from '../types';
+declare const alignValues: readonly ["start", "center", "end"];
+export declare type TAlignType = typeof alignValues[number];
+export declare type TSinchTableHeaderCellElement = HTMLElement & {
+    text: string | null;
+    align: TAlignType;
+    fit: boolean;
+};
+export declare type TSinchTableHeaderCellReact = TSinchElementReact<TSinchTableHeaderCellElement> & {
+    text?: string;
+    fit?: boolean;
+    align?: TAlignType;
+};
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-table-head-cell': TSinchTableHeaderCellReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-table-head-cell': TSinchTableHeaderCellElement;
+    }
+}
+export {};

package/table-head-cell/index.js

@@ -0,0 +1,74 @@
+import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
+import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
+
+var _$text;
+
+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, getLiteralAttribute, updateAttribute, updateBooleanAttribute, updateLiteralAttribute } from '../utils';
+const templateHTML = '<style>:host{display:table-cell;border-bottom:1px solid var(--sinch-color-stormy-200);height:48px;vertical-align:middle;padding:0 6px;--sinch-color-icon:var(--sinch-color-stormy-200)}:host(:first-child){padding-left:8px}:host(:last-child){padding-right:8px}#wrapper{width:100%;height:100%;box-sizing:border-box;font:var(--sinch-font-title-4);color:var(--sinch-color-stormy-200);display:flex;align-items:center;gap:4px;position:relative}#text{flex-shrink:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host([align=center])>#wrapper{justify-content:center}:host([align=end]) #text{margin-left:auto}:host(:is([text=""],:not([text])))>#wrapper{display:none}:host([fit]:not([fit=false])){width:1px}::slotted(sinch-help-tooltip){position:relative;z-index:1}</style><slot name="checkbox"></slot><div id="wrapper"><span id="text"></span><slot name="tooltip"></slot><slot name="sort"></slot></div>';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+const alignValues = ['start', 'center', 'end'];
+defineCustomElement('sinch-table-head-cell', (_$text = new WeakMap(), class extends HTMLElement {
+  constructor() {
+    super();
+
+    _classPrivateFieldInitSpec(this, _$text, {
+      writable: true,
+      value: void 0
+    });
+
+    const shadowRoot = this.attachShadow({
+      mode: 'production' === 'development' ? 'open' : 'closed'
+    });
+    shadowRoot.appendChild(template.content.cloneNode(true));
+
+    _classPrivateFieldSet(this, _$text, shadowRoot.querySelector('#text'));
+  }
+
+  connectedCallback() {
+    this.setAttribute('role', 'columnheader');
+  }
+
+  static get observedAttributes() {
+    return ['text'];
+  }
+
+  attributeChangedCallback(name, oldVal, newVal) {
+    switch (name) {
+      case 'text':
+        {
+          _classPrivateFieldGet(this, _$text).textContent = newVal;
+          break;
+        }
+    }
+  }
+
+  set text(value) {
+    updateAttribute(this, 'text', value);
+  }
+
+  get text() {
+    return getAttribute(this, 'text', null);
+  }
+
+  set align(value) {
+    updateLiteralAttribute(this, alignValues, 'align', value);
+  }
+
+  get align() {
+    return getLiteralAttribute(this, alignValues, 'align', 'start');
+  }
+
+  set fit(isFit) {
+    updateBooleanAttribute(this, 'fit', isFit);
+  }
+
+  get fit() {
+    return getBooleanAttribute(this, 'fit');
+  }
+
+}));

package/table-head-sort/index.d.ts

@@ -0,0 +1,25 @@
+import '../icon/north';
+import '../icon/south';
+import type { TSinchElementReact } from '../types';
+import type { FocusEvent, SyntheticEvent } from 'react';
+export declare type TSinchTableHeaderSortElement = HTMLElement & {
+    value: boolean;
+    focus(): void;
+    blur(): void;
+};
+export declare type TSinchTableHeaderSortReact = TSinchElementReact<TSinchTableHeaderSortElement> & {
+    value: boolean;
+    onChange: (e: SyntheticEvent<TSinchTableHeaderSortElement, CustomEvent<boolean>>) => void;
+    onFocus?: (e: FocusEvent<TSinchTableHeaderSortElement>) => void;
+    onBlur?: (e: FocusEvent<TSinchTableHeaderSortElement>) => void;
+};
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-table-head-sort': TSinchTableHeaderSortReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-table-head-sort': TSinchTableHeaderSortElement;
+    }
+}

package/table-head-sort/index.js

@@ -0,0 +1,92 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
+import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
+
+var _$input;
+
+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 '../icon/north';
+import '../icon/south';
+import { defineCustomElement, getBooleanAttribute, isAttrTrue, updateBooleanAttribute } from '../utils';
+const templateHTML = '<style>:host{display:contents}input{all:initial;position:absolute;width:100%;height:100%;box-sizing:border-box;cursor:pointer}#up{display:none}#down{display:block}:host([value]:not([value=false])) #up{display:block}:host([value]:not([value=false])) #down{display:none}</style><sinch-icon-north id="up" size="16"></sinch-icon-north><sinch-icon-south id="down" size="16"></sinch-icon-south><input type="checkbox"/>';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-table-head-sort', (_$input = new WeakMap(), class extends HTMLElement {
+  constructor() {
+    super();
+
+    _classPrivateFieldInitSpec(this, _$input, {
+      writable: true,
+      value: void 0
+    });
+
+    _defineProperty(this, 'onCheckboxInput', e => {
+      e.stopPropagation();
+
+      const isChecked = _classPrivateFieldGet(this, _$input).checked;
+
+      _classPrivateFieldGet(this, _$input).checked = this.value;
+      this.dispatchEvent(new CustomEvent('change', {
+        detail: isChecked,
+        bubbles: true
+      }));
+    });
+
+    const shadowRoot = this.attachShadow({
+      mode: 'production' === 'development' ? 'open' : 'closed'
+    });
+    shadowRoot.appendChild(template.content.cloneNode(true));
+
+    _classPrivateFieldSet(this, _$input, shadowRoot.querySelector('input'));
+  }
+
+  connectedCallback() {
+    _classPrivateFieldGet(this, _$input).addEventListener('input', this.onCheckboxInput);
+  }
+
+  disconnectedCallback() {
+    _classPrivateFieldGet(this, _$input).removeEventListener('input', this.onCheckboxInput);
+  }
+
+  get type() {
+    return 'text';
+  }
+
+  get nodeName() {
+    return 'input';
+  }
+
+  static get observedAttributes() {
+    return ['value'];
+  }
+
+  attributeChangedCallback(name, _, newVal) {
+    switch (name) {
+      case 'value':
+        {
+          _classPrivateFieldGet(this, _$input).checked = isAttrTrue(newVal);
+          break;
+        }
+    }
+  }
+
+  set value(isChecked) {
+    updateBooleanAttribute(this, 'value', isChecked);
+  }
+
+  get value() {
+    return getBooleanAttribute(this, 'value');
+  }
+
+  focus() {
+    _classPrivateFieldGet(this, _$input).focus();
+  }
+
+  blur() {
+    _classPrivateFieldGet(this, _$input).blur();
+  }
+
+}));

package/table-row/index.d.ts

@@ -0,0 +1,17 @@
+import type { TSinchElementReact } from '../types';
+export declare type TSinchTableRowElement = HTMLElement & {
+    sticky: boolean;
+};
+export declare type TSinchTableRowReact = TSinchElementReact<TSinchTableRowElement> & {
+    sticky?: boolean;
+};
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-table-row': TSinchTableRowReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-table-row': TSinchTableRowElement;
+    }
+}

package/table-row/index.js

@@ -0,0 +1,26 @@
+import { defineCustomElement, getBooleanAttribute, updateBooleanAttribute } from '../utils';
+const templateHTML = '<style>:host{display:table-row}:host([sticky]) ::slotted(sinch-table-head-cell){position:sticky;top:0;z-index:1;background-color:var(--sinch-color-snow-100)}</style><slot></slot>';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-table-row', class extends HTMLElement {
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow({
+      mode: 'production' === 'development' ? 'open' : 'closed'
+    });
+    shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+
+  connectedCallback() {
+    this.setAttribute('role', 'row');
+  }
+
+  set sticky(isSticky) {
+    updateBooleanAttribute(this, 'sticky', isSticky);
+  }
+
+  get sticky() {
+    return getBooleanAttribute(this, 'sticky');
+  }
+
+});

package/tabs/index.d.ts

@@ -0,0 +1,19 @@
+import type { TSinchElementReact } from '../types';
+import type { SyntheticEvent } from 'react';
+export declare type TSinchTabsElement = HTMLElement & {
+    value: string;
+};
+export declare type TSinchTabsReact = TSinchElementReact<TSinchTabsElement> & {
+    value: string;
+    onChange: (event: SyntheticEvent<TSinchTabsElement, CustomEvent<string>>) => void;
+};
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-tabs': TSinchTabsReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-tabs': TSinchTabsElement;
+    }
+}

package/tabs/index.js

@@ -0,0 +1,181 @@
+import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
+import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
+
+var _$slot, _onOptionKeyDown, _onSlotChange, _onOptionChange;
+
+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 { isTabsOptionElement } from '../tabs-option';
+import { defineCustomElement, getAttribute, updateAttribute } from '../utils';
+const templateHTML = '<style>:host{display:block;outline:0}#wrapper{display:flex;flex-direction:row;height:60px;width:100%;box-sizing:border-box;overflow-x:auto}</style><div id="wrapper"><slot></slot></div>';
+
+const getEnabledRadioElements = $slot => {
+  return $slot.assignedElements().filter(opt => isTabsOptionElement(opt) && opt.disabled !== true);
+};
+
+const findSelectedOption = elements => {
+  return elements.find(el => el.checked) ?? null;
+};
+
+const getFirstOption = $slot => {
+  for (const $option of $slot.assignedElements()) {
+    if (isTabsOptionElement($option) && $option.disabled !== true) {
+      return $option;
+    }
+  }
+
+  return null;
+};
+
+const getLastOption = $slot => {
+  for (const $option of $slot.assignedElements().reverse()) {
+    if (isTabsOptionElement($option) && $option.disabled !== true) {
+      return $option;
+    }
+  }
+
+  return null;
+};
+
+const getNextOption = $slot => {
+  const $options = getEnabledRadioElements($slot);
+  const $selectedOption = findSelectedOption($options);
+  const currentIndex = $selectedOption !== null ? $options.indexOf($selectedOption) : -1;
+
+  if (currentIndex < 0) {
+    return getFirstOption($slot);
+  }
+
+  return $options[(currentIndex + 1) % $options.length];
+};
+
+const getPrevOption = $slot => {
+  const $options = getEnabledRadioElements($slot);
+  const $selectedOption = findSelectedOption($options);
+  const currentIndex = $selectedOption !== null ? $options.indexOf($selectedOption) : -1;
+
+  if (currentIndex < 0) {
+    return getLastOption($slot);
+  }
+
+  return $options[(currentIndex - 1 + $options.length) % $options.length];
+};
+
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-tabs', (_$slot = new WeakMap(), _onOptionKeyDown = new WeakMap(), _onSlotChange = new WeakMap(), _onOptionChange = new WeakMap(), class extends HTMLElement {
+  constructor() {
+    super();
+
+    _classPrivateFieldInitSpec(this, _$slot, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _onOptionKeyDown, {
+      writable: true,
+      value: e => {
+        switch (e.code) {
+          case 'ArrowUp':
+          case 'ArrowLeft':
+            {
+              e.preventDefault();
+              const $option = getPrevOption(_classPrivateFieldGet(this, _$slot));
+
+              if ($option !== null) {
+                $option.focus();
+                this.dispatchChangeEvent($option.value);
+              }
+
+              break;
+            }
+
+          case 'ArrowDown':
+          case 'ArrowRight':
+            {
+              e.preventDefault();
+              const $option = getNextOption(_classPrivateFieldGet(this, _$slot));
+
+              if ($option !== null) {
+                $option.focus();
+                this.dispatchChangeEvent($option.value);
+              }
+
+              break;
+            }
+        }
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onSlotChange, {
+      writable: true,
+      value: () => {
+        this.onValueChange(this.value);
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onOptionChange, {
+      writable: true,
+      value: e => {
+        e.stopPropagation();
+        this.dispatchChangeEvent(e.detail);
+      }
+    });
+
+    const shadowRoot = this.attachShadow({
+      mode: 'production' === 'development' ? 'open' : 'closed',
+      delegatesFocus: true
+    });
+    shadowRoot.appendChild(template.content.cloneNode(true));
+    shadowRoot.addEventListener('keydown', _classPrivateFieldGet(this, _onOptionKeyDown));
+    shadowRoot.addEventListener('change', _classPrivateFieldGet(this, _onOptionChange));
+
+    _classPrivateFieldSet(this, _$slot, shadowRoot.querySelector('slot'));
+
+    _classPrivateFieldGet(this, _$slot).addEventListener('slotchange', _classPrivateFieldGet(this, _onSlotChange));
+  }
+
+  static get observedAttributes() {
+    return ['value'];
+  }
+
+  get nodeName() {
+    return 'select';
+  }
+
+  set value(value) {
+    updateAttribute(this, 'value', value);
+  }
+
+  get value() {
+    return getAttribute(this, 'value', '');
+  }
+
+  attributeChangedCallback(name, oldVal, newVal) {
+    switch (name) {
+      case 'value':
+        {
+          this.onValueChange(newVal ?? '');
+          break;
+        }
+    }
+  }
+
+  onValueChange(value) {
+    for (const $option of _classPrivateFieldGet(this, _$slot).assignedElements()) {
+      if (isTabsOptionElement($option)) {
+        $option.checked = $option.disabled !== true && $option.value === value;
+      }
+    }
+  }
+
+  dispatchChangeEvent(value) {
+    this.dispatchEvent(new CustomEvent('change', {
+      detail: value,
+      bubbles: true
+    }));
+  }
+
+}));

package/tabs-option/index.d.ts

@@ -0,0 +1,28 @@
+import type { TSinchElementReact } from '../types';
+import type { FocusEvent } from 'react';
+export declare const isTabsOptionElement: (element: EventTarget | Element | null) => element is TSinchTabsOptionElement;
+export declare type TSinchTabsOptionElement = HTMLElement & {
+    value: string;
+    disabled: boolean;
+    checked: boolean;
+    text: string;
+    focus(): void;
+    blur(): void;
+};
+export declare type TSinchTabsOptionReact = TSinchElementReact<TSinchTabsOptionElement> & {
+    value: string;
+    disabled?: boolean;
+    text: string;
+    onFocus?: (e: FocusEvent<TSinchTabsOptionElement>) => void;
+    onBlur?: (e: FocusEvent<TSinchTabsOptionElement>) => void;
+};
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-tabs-option': TSinchTabsOptionReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-tabs-option': TSinchTabsOptionElement;
+    }
+}