@nectary/components 0.8.1 → 0.9.0

package/icon/arrow-back-ios/index.d.ts

@@ -0,0 +1,11 @@
+import type { TSinchIconElement, TSinchIconReact } from '../types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-icon-arrow-back-ios': TSinchIconReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-icon-arrow-back-ios': TSinchIconElement;
+    }
+}

package/icon/arrow-back-ios/index.js

@@ -0,0 +1,4 @@
+import { defineCustomElement } from '../../utils';
+import { createIconClass } from '../create-icon-class';
+const templateHTML = '<svg viewBox="0 0 24 24"><path d="M16.62 2.99a1.25 1.25 0 0 0-1.77 0L6.54 11.3a.996.996 0 0 0 0 1.41l8.31 8.31c.49.49 1.28.49 1.77 0s.49-1.28 0-1.77L9.38 12l7.25-7.25c.48-.48.48-1.28-.01-1.76Z"/></svg>';
+defineCustomElement('sinch-icon-arrow-back-ios', createIconClass(templateHTML));

package/icon/arrow-forward-ios/index.d.ts

@@ -0,0 +1,11 @@
+import type { TSinchIconElement, TSinchIconReact } from '../types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-icon-arrow-forward-ios': TSinchIconReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-icon-arrow-forward-ios': TSinchIconElement;
+    }
+}

package/icon/arrow-forward-ios/index.js

@@ -0,0 +1,4 @@
+import { defineCustomElement } from '../../utils';
+import { createIconClass } from '../create-icon-class';
+const templateHTML = '<svg viewBox="0 0 24 24"><path d="M7.38 21.01c.49.49 1.28.49 1.77 0l8.31-8.31a.996.996 0 0 0 0-1.41L9.15 2.98a1.25 1.25 0 0 0-1.77 0 1.25 1.25 0 0 0 0 1.77L14.62 12l-7.25 7.25c-.48.48-.48 1.28.01 1.76Z"/></svg>';
+defineCustomElement('sinch-icon-arrow-forward-ios', createIconClass(templateHTML));

package/icon/chevron-left/index.d.ts

@@ -0,0 +1,11 @@
+import type { TSinchIconElement, TSinchIconReact } from '../types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-icon-chevron-left': TSinchIconReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-icon-chevron-left': TSinchIconElement;
+    }
+}

package/icon/chevron-left/index.js

@@ -0,0 +1,4 @@
+import { defineCustomElement } from '../../utils';
+import { createIconClass } from '../create-icon-class';
+const templateHTML = '<svg viewBox="0 0 24 24"><path d="M14.71 6.71a.996.996 0 0 0-1.41 0L8.71 11.3a.996.996 0 0 0 0 1.41l4.59 4.59a.996.996 0 1 0 1.41-1.41L10.83 12l3.88-3.88c.39-.39.38-1.03 0-1.41Z"/></svg>';
+defineCustomElement('sinch-icon-chevron-left', createIconClass(templateHTML));

package/icon/chevron-right/index.d.ts

@@ -0,0 +1,11 @@
+import type { TSinchIconElement, TSinchIconReact } from '../types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-icon-chevron-right': TSinchIconReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-icon-chevron-right': TSinchIconElement;
+    }
+}

package/icon/chevron-right/index.js

@@ -0,0 +1,4 @@
+import { defineCustomElement } from '../../utils';
+import { createIconClass } from '../create-icon-class';
+const templateHTML = '<svg viewBox="0 0 24 24"><path d="M9.29 6.71a.996.996 0 0 0 0 1.41L13.17 12l-3.88 3.88a.996.996 0 1 0 1.41 1.41l4.59-4.59a.996.996 0 0 0 0-1.41L10.7 6.7c-.38-.38-1.02-.38-1.41.01Z"/></svg>';
+defineCustomElement('sinch-icon-chevron-right', createIconClass(templateHTML));

package/icon/expand-less/index.d.ts

@@ -0,0 +1,11 @@
+import type { TSinchIconElement, TSinchIconReact } from '../types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-icon-expand-less': TSinchIconReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-icon-expand-less': TSinchIconElement;
+    }
+}

package/icon/expand-less/index.js

@@ -0,0 +1,4 @@
+import { defineCustomElement } from '../../utils';
+import { createIconClass } from '../create-icon-class';
+const templateHTML = '<svg viewBox="0 0 24 24"><path d="M11.29 8.71 6.7 13.3a.996.996 0 1 0 1.41 1.41L12 10.83l3.88 3.88a.996.996 0 1 0 1.41-1.41L12.7 8.71a.996.996 0 0 0-1.41 0Z"/></svg>';
+defineCustomElement('sinch-icon-expand-less', createIconClass(templateHTML));

package/icon/expand-more/index.d.ts

@@ -0,0 +1,11 @@
+import type { TSinchIconElement, TSinchIconReact } from '../types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-icon-expand-more': TSinchIconReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-icon-expand-more': TSinchIconElement;
+    }
+}

package/icon/expand-more/index.js

@@ -0,0 +1,4 @@
+import { defineCustomElement } from '../../utils';
+import { createIconClass } from '../create-icon-class';
+const templateHTML = '<svg viewBox="0 0 24 24"><path d="M15.88 9.29 12 13.17 8.12 9.29a.996.996 0 1 0-1.41 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59a.996.996 0 0 0 0-1.41c-.39-.38-1.03-.39-1.42 0Z"/></svg>';
+defineCustomElement('sinch-icon-expand-more', createIconClass(templateHTML));

package/icon/keyboard-arrow-down/index.d.ts

@@ -0,0 +1,11 @@
+import type { TSinchIconElement, TSinchIconReact } from '../types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-icon-keyboard-arrow-down': TSinchIconReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-icon-keyboard-arrow-down': TSinchIconElement;
+    }
+}

package/icon/keyboard-arrow-down/index.js

@@ -0,0 +1,4 @@
+import { defineCustomElement } from '../../utils';
+import { createIconClass } from '../create-icon-class';
+const templateHTML = '<svg viewBox="0 0 24 24"><path d="M8.12 9.29 12 13.17l3.88-3.88a.996.996 0 1 1 1.41 1.41l-4.59 4.59a.996.996 0 0 1-1.41 0L6.7 10.7a.996.996 0 0 1 0-1.41c.39-.38 1.03-.39 1.42 0Z"/></svg>';
+defineCustomElement('sinch-icon-keyboard-arrow-down', createIconClass(templateHTML));

package/icon/keyboard-arrow-left/index.d.ts

@@ -0,0 +1,11 @@
+import type { TSinchIconElement, TSinchIconReact } from '../types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-icon-keyboard-arrow-left': TSinchIconReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-icon-keyboard-arrow-left': TSinchIconElement;
+    }
+}

package/icon/keyboard-arrow-left/index.js

@@ -0,0 +1,4 @@
+import { defineCustomElement } from '../../utils';
+import { createIconClass } from '../create-icon-class';
+const templateHTML = '<svg viewBox="0 0 24 24"><path d="M14.71 15.88 10.83 12l3.88-3.88a.996.996 0 1 0-1.41-1.41L8.71 11.3a.996.996 0 0 0 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0 .38-.39.39-1.03 0-1.42Z"/></svg>';
+defineCustomElement('sinch-icon-keyboard-arrow-left', createIconClass(templateHTML));

package/icon/keyboard-arrow-right/index.d.ts

@@ -0,0 +1,11 @@
+import type { TSinchIconElement, TSinchIconReact } from '../types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-icon-keyboard-arrow-right': TSinchIconReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-icon-keyboard-arrow-right': TSinchIconElement;
+    }
+}

package/icon/keyboard-arrow-right/index.js

@@ -0,0 +1,4 @@
+import { defineCustomElement } from '../../utils';
+import { createIconClass } from '../create-icon-class';
+const templateHTML = '<svg viewBox="0 0 24 24"><path d="M9.29 15.88 13.17 12 9.29 8.12a.996.996 0 1 1 1.41-1.41l4.59 4.59c.39.39.39 1.02 0 1.41L10.7 17.3a.996.996 0 0 1-1.41 0c-.38-.39-.39-1.03 0-1.42Z"/></svg>';
+defineCustomElement('sinch-icon-keyboard-arrow-right', createIconClass(templateHTML));

package/icon/keyboard-arrow-up/index.d.ts

@@ -0,0 +1,11 @@
+import type { TSinchIconElement, TSinchIconReact } from '../types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-icon-keyboard-arrow-up': TSinchIconReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-icon-keyboard-arrow-up': TSinchIconElement;
+    }
+}

package/icon/keyboard-arrow-up/index.js

@@ -0,0 +1,4 @@
+import { defineCustomElement } from '../../utils';
+import { createIconClass } from '../create-icon-class';
+const templateHTML = '<svg viewBox="0 0 24 24"><path d="M8.12 14.71 12 10.83l3.88 3.88a.996.996 0 1 0 1.41-1.41L12.7 8.71a.996.996 0 0 0-1.41 0L6.7 13.3a.996.996 0 0 0 0 1.41c.39.38 1.03.39 1.42 0Z"/></svg>';
+defineCustomElement('sinch-icon-keyboard-arrow-up', createIconClass(templateHTML));

package/index.d.ts

@@ -19,6 +19,16 @@ import './tag-close';
 import './textarea';
 import './toggle';
 import './tooltip';
+import './icon/keyboard-arrow-down';
+import './icon/keyboard-arrow-left';
+import './icon/keyboard-arrow-right';
+import './icon/keyboard-arrow-up';
+import './icon/chevron-left';
+import './icon/chevron-right';
+import './icon/expand-less';
+import './icon/expand-more';
+import './icon/arrow-back-ios';
+import './icon/arrow-forward-ios';
 import './icon/cancel';
 import './icon/close';
 import './icon/east';
@@ -33,6 +43,7 @@ import './icon/south';
 import './icon/south-east';
 import './icon/south-west';
 import './icon/west';
+import './pagination';
 import './table';
 import './table-cell';
 import './table-head';

package/index.js

@@ -19,6 +19,16 @@ import './tag-close';
 import './textarea';
 import './toggle';
 import './tooltip';
+import './icon/keyboard-arrow-down';
+import './icon/keyboard-arrow-left';
+import './icon/keyboard-arrow-right';
+import './icon/keyboard-arrow-up';
+import './icon/chevron-left';
+import './icon/chevron-right';
+import './icon/expand-less';
+import './icon/expand-more';
+import './icon/arrow-back-ios';
+import './icon/arrow-forward-ios';
 import './icon/cancel';
 import './icon/close';
 import './icon/east';
@@ -33,6 +43,7 @@ import './icon/south';
 import './icon/south-east';
 import './icon/south-west';
 import './icon/west';
+import './pagination';
 import './table';
 import './table-cell';
 import './table-head';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nectary/components",
-  "version": "0.8.1",
+  "version": "0.9.0",
   "files": [
     "theme.css",
     "**/*/*.js",

package/pagination/index.d.ts

@@ -0,0 +1,27 @@
+import '../icon/keyboard-arrow-left';
+import '../icon/keyboard-arrow-right';
+import type { TSinchElementReact } from '../types';
+import type { FocusEvent, SyntheticEvent } from 'react';
+export declare type TSinchPaginationElement = HTMLElement & {
+    value: number;
+    max: number;
+    focus(): void;
+    blur(): void;
+};
+export declare type TSinchPaginationReact = TSinchElementReact<TSinchPaginationElement> & {
+    value: number;
+    max: number;
+    onChange: (event: SyntheticEvent<TSinchPaginationElement, CustomEvent<number>>) => void;
+    onFocus?: (e: FocusEvent<TSinchPaginationElement>) => void;
+    onBlur?: (e: FocusEvent<TSinchPaginationElement>) => void;
+};
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-pagination': TSinchPaginationReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-pagination': TSinchPaginationElement;
+    }
+}

package/pagination/index.js

@@ -0,0 +1,224 @@
+import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
+import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
+
+var _$left, _$right, _$buttons, _$wrapper, _onValueChange, _onButtonClick, _clamp, _dispatchChangeEvent;
+
+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 '../icon/keyboard-arrow-left';
+import '../icon/keyboard-arrow-right';
+import { defineCustomElement, updateAttribute, getIntegerAttribute } from '../utils';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{display:flex;justify-content:center;gap:8px;width:100%;box-sizing:border-box}button{all:initial;width:28px;height:28px;box-sizing:border-box;cursor:pointer;text-align:center;contain:strict;--sinch-color-icon:var(--sinch-color-stormy-500)}button:disabled{--sinch-color-icon:var(--sinch-color-stormy-100);cursor:initial}button>*{pointer-events:none}.page{border-radius:50%;font:var(--sinch-font-body);color:var(--sinch-color-stormy-500)}.page.dots>span{display:none}.page.dots::after{content:"..."}.page.active{font:var(--sinch-font-emphasized-body);background-color:var(--sinch-color-snow-600);pointer-events:none;cursor:initial}.page.hidden{display:none}</style><div id="wrapper"><button id="left"><sinch-icon-keyboard-arrow-left></sinch-icon-keyboard-arrow-left></button> <button class="page"><span>1</span></button> <button class="page active"><span>2</span></button> <button class="page"><span>3</span></button> <button class="page"><span>4</span></button> <button class="page"><span>5</span></button> <button class="page dots"><span>6</span></button> <button class="page"><span>20</span></button> <button id="right"><sinch-icon-keyboard-arrow-right></sinch-icon-keyboard-arrow-right></button></div>';
+const NUM_BUTTONS = 7;
+const MIDDLE_BTN_INDEX = Math.floor(NUM_BUTTONS / 2);
+const FIRST_BTN_INDEX = 0;
+const LAST_BTN_INDEX = NUM_BUTTONS - 1;
+const DOTS_LEFT_INDEX = 1;
+const DOTS_RIGHT_INDEX = LAST_BTN_INDEX - 1;
+
+const setClass = (elem, name, isSet) => {
+  isSet ? elem.classList.add(name) : elem.classList.remove(name);
+};
+
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-pagination', (_$left = new WeakMap(), _$right = new WeakMap(), _$buttons = new WeakMap(), _$wrapper = new WeakMap(), _onValueChange = new WeakSet(), _onButtonClick = new WeakMap(), _clamp = new WeakSet(), _dispatchChangeEvent = new WeakSet(), class extends HTMLElement {
+  constructor() {
+    super();
+
+    _classPrivateMethodInitSpec(this, _dispatchChangeEvent);
+
+    _classPrivateMethodInitSpec(this, _clamp);
+
+    _classPrivateMethodInitSpec(this, _onValueChange);
+
+    _classPrivateFieldInitSpec(this, _$left, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$right, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$buttons, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$wrapper, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _onButtonClick, {
+      writable: true,
+      value: e => {
+        e.stopPropagation();
+        const value = getIntegerAttribute(this, 'value', 0) - 1;
+        const max = Math.max(0, getIntegerAttribute(this, 'max', 0));
+
+        if (e.target === _classPrivateFieldGet(this, _$left)) {
+          return _classPrivateMethodGet(this, _dispatchChangeEvent, _dispatchChangeEvent2).call(this, value - 1);
+        }
+
+        if (e.target === _classPrivateFieldGet(this, _$right)) {
+          return _classPrivateMethodGet(this, _dispatchChangeEvent, _dispatchChangeEvent2).call(this, value + 1);
+        }
+
+        const btnIndex = Array.prototype.indexOf.call(_classPrivateFieldGet(this, _$wrapper).children, e.target) - 1;
+
+        if (btnIndex >= 0 && btnIndex < _classPrivateFieldGet(this, _$buttons).length) {
+          if (btnIndex === FIRST_BTN_INDEX) {
+            return _classPrivateMethodGet(this, _dispatchChangeEvent, _dispatchChangeEvent2).call(this, 0);
+          }
+
+          if (btnIndex === _classPrivateFieldGet(this, _$buttons).length - 1) {
+            return _classPrivateMethodGet(this, _dispatchChangeEvent, _dispatchChangeEvent2).call(this, max - 1);
+          }
+
+          if (btnIndex === DOTS_LEFT_INDEX && max > NUM_BUTTONS && value > MIDDLE_BTN_INDEX) {
+            return _classPrivateMethodGet(this, _dispatchChangeEvent, _dispatchChangeEvent2).call(this, Math.floor(value / 2));
+          }
+
+          if (btnIndex === DOTS_RIGHT_INDEX && max > NUM_BUTTONS && value <= max - DOTS_RIGHT_INDEX) {
+            return _classPrivateMethodGet(this, _dispatchChangeEvent, _dispatchChangeEvent2).call(this, Math.floor((max - value) / 2 + value));
+          }
+
+          return _classPrivateMethodGet(this, _dispatchChangeEvent, _dispatchChangeEvent2).call(this, btnIndex + Math.min(Math.max(0, value - MIDDLE_BTN_INDEX), Math.max(0, max - NUM_BUTTONS)));
+        }
+      }
+    });
+
+    const shadowRoot = this.attachShadow({
+      mode: 'production' === 'development' ? 'open' : 'closed',
+      delegatesFocus: true
+    });
+    shadowRoot.appendChild(template.content.cloneNode(true));
+
+    _classPrivateFieldSet(this, _$left, shadowRoot.querySelector('#left'));
+
+    _classPrivateFieldSet(this, _$right, shadowRoot.querySelector('#right'));
+
+    _classPrivateFieldSet(this, _$buttons, shadowRoot.querySelectorAll('.page'));
+
+    _classPrivateFieldSet(this, _$wrapper, shadowRoot.querySelector('#wrapper'));
+  }
+
+  connectedCallback() {
+    _classPrivateMethodGet(this, _onValueChange, _onValueChange2).call(this);
+
+    _classPrivateFieldGet(this, _$wrapper).addEventListener('click', _classPrivateFieldGet(this, _onButtonClick));
+  }
+
+  disconnectedCallback() {
+    _classPrivateFieldGet(this, _$wrapper).removeEventListener('click', _classPrivateFieldGet(this, _onButtonClick));
+  }
+
+  static get observedAttributes() {
+    return ['max', 'value'];
+  }
+
+  attributeChangedCallback(name, _) {
+    switch (name) {
+      case 'value':
+        {
+          _classPrivateMethodGet(this, _onValueChange, _onValueChange2).call(this);
+
+          break;
+        }
+
+      case 'max':
+        {
+          _classPrivateMethodGet(this, _onValueChange, _onValueChange2).call(this);
+
+          break;
+        }
+    }
+  }
+
+  get nodeName() {
+    return 'select';
+  }
+
+  set value(val) {
+    updateAttribute(this, 'value', val);
+  }
+
+  get value() {
+    return getIntegerAttribute(this, 'value', 0);
+  }
+
+  set max(val) {
+    updateAttribute(this, 'max', val);
+  }
+
+  get max() {
+    return getIntegerAttribute(this, 'value', 0);
+  }
+
+  focus() {
+    _classPrivateFieldGet(this, _$left).focus();
+  }
+
+  blur() {
+    _classPrivateFieldGet(this, _$left).blur();
+
+    _classPrivateFieldGet(this, _$right).blur();
+
+    _classPrivateFieldGet(this, _$buttons).forEach($b => $b.blur());
+  }
+
+}));
+
+function _onValueChange2() {
+  const value = getIntegerAttribute(this, 'value', 0) - 1;
+  const max = Math.max(0, getIntegerAttribute(this, 'max', 0));
+  const valueOffset = Math.min(Math.max(0, value - MIDDLE_BTN_INDEX), Math.max(0, max - NUM_BUTTONS));
+
+  for (let i = 0; i < _classPrivateFieldGet(this, _$buttons).length; i++) {
+    const $b = _classPrivateFieldGet(this, _$buttons)[i];
+
+    if (value < 3) {
+      setClass($b, 'active', value === i);
+    } else if (value >= max - MIDDLE_BTN_INDEX) {
+      setClass($b, 'active', i + valueOffset === value);
+    } else {
+      setClass($b, 'active', i === MIDDLE_BTN_INDEX);
+    }
+
+    if (max > NUM_BUTTONS) {
+      setClass($b, 'dots', i === DOTS_LEFT_INDEX && value > MIDDLE_BTN_INDEX || i === DOTS_RIGHT_INDEX && value <= max - DOTS_RIGHT_INDEX);
+    }
+
+    setClass($b, 'hidden', i >= max);
+    const btnText = $b.firstElementChild;
+
+    if (btnText != null) {
+      btnText.textContent = i === FIRST_BTN_INDEX ? '1' : i === LAST_BTN_INDEX ? String(max) : String(i + 1 + valueOffset);
+    }
+  }
+
+  const isValueBad = value < 0 || value >= max;
+  _classPrivateFieldGet(this, _$left).disabled = isValueBad || value === 0;
+  _classPrivateFieldGet(this, _$right).disabled = isValueBad || value === max - 1;
+}
+
+function _clamp2(value, max) {
+  return Math.max(0, Math.min(max - 1, value));
+}
+
+function _dispatchChangeEvent2(value) {
+  const max = getIntegerAttribute(this, 'max', 0);
+  this.dispatchEvent(new CustomEvent('change', {
+    detail: _classPrivateMethodGet(this, _clamp, _clamp2).call(this, value, max) + 1,
+    bubbles: true
+  }));
+}