@nectary/components 0.16.0 → 0.17.0

package/icon-button/index.d.ts

@@ -2,12 +2,14 @@ import type { TSinchElementReact } from '../types';
 import type { FocusEvent, MouseEvent } from 'react';
 export declare type TSinchIconButtonElement = HTMLElement & {
     disabled: boolean;
+    small: boolean;
     focus(): void;
     blur(): void;
 };
 export declare type TSinchIconButtonReact = TSinchElementReact<TSinchIconButtonElement> & {
     'aria-label': string;
     disabled?: boolean;
+    small?: boolean;
     onClick: (e: MouseEvent<TSinchIconButtonElement>) => void;
     onFocus?: (e: FocusEvent<TSinchIconButtonElement>) => void;
     onBlur?: (e: FocusEvent<TSinchIconButtonElement>) => void;

package/icon-button/index.js

@@ -8,7 +8,7 @@ function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedec
 function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
 
 import { defineCustomElement, getBooleanAttribute, isAttrTrue, updateBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}button{all:initial;display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:48px;height:48px;border-radius:4px;background-color:transparent;box-shadow:0 0 0 1px transparent inset;cursor:pointer;--sinch-size-icon:24px;--sinch-color-icon:var(--sinch-color-stormy-500)}button:focus{box-shadow:0 0 0 1px var(--sinch-color-stormy-500) inset}button:hover{background-color:var(--sinch-color-snow-500)}button:active{background-color:var(--sinch-color-snow-600)}button:disabled{background-color:transparent;cursor:initial;--sinch-color-spinner-bg:var(--sinch-color-snow-200);--sinch-color-spinner-fg:var(--sinch-color-stormy-200);--sinch-color-icon:var(--sinch-color-stormy-100)}button>*{pointer-events:none}</style><button><slot name="icon"></slot></button>';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}button{all:initial;display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:48px;height:48px;border-radius:4px;background-color:transparent;box-shadow:0 0 0 1px transparent inset;cursor:pointer;--sinch-size-icon:24px;--sinch-color-icon:var(--sinch-color-stormy-500)}button:focus{box-shadow:0 0 0 1px var(--sinch-color-stormy-500) inset}button:hover{background-color:var(--sinch-color-snow-500)}button:active{background-color:var(--sinch-color-snow-600)}button:disabled{background-color:transparent;cursor:initial;--sinch-color-spinner-bg:var(--sinch-color-snow-200);--sinch-color-spinner-fg:var(--sinch-color-stormy-200);--sinch-color-icon:var(--sinch-color-stormy-100)}:host([small]:not([small=false]))>button{width:32px;height:32px}button>*{pointer-events:none}</style><button><slot name="icon"></slot></button>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-icon-button', (_$button = new WeakMap(), class extends HTMLElement {
@@ -55,6 +55,14 @@ defineCustomElement('sinch-icon-button', (_$button = new WeakMap(), class extend
     return getBooleanAttribute(this, 'disabled');
   }
 
+  set small(isSmall) {
+    updateBooleanAttribute(this, 'small', isSmall);
+  }
+
+  get small() {
+    return getBooleanAttribute(this, 'small');
+  }
+
   focus() {
     _classPrivateFieldGet(this, _$button).focus();
   }

package/index.d.ts

@@ -136,3 +136,5 @@ import './grid-item';
 import './icon-button';
 import './search';
 import './search-option';
+import './segment';
+import './segment-collapse';

package/index.js

@@ -135,4 +135,6 @@ import './grid';
 import './grid-item';
 import './icon-button';
 import './search';
-import './search-option';
+import './search-option';
+import './segment';
+import './segment-collapse';

package/input/index.js

@@ -1,7 +1,7 @@
 import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
 import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
 
-var _$input, _$label, _$optionalText, _$additionalText, _$invalidText, _selectionStart, _selectionEnd, _onInput;
+var _$input, _$label, _$optionalText, _$additionalText, _$invalidText, _selectionStart, _selectionEnd, _isPendingDk, _onCompositionStart, _onInput;
 
 function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
 
@@ -12,7 +12,7 @@ const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;ou
 const inputTypes = ['text', 'password'];
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-input', (_$input = new WeakMap(), _$label = new WeakMap(), _$optionalText = new WeakMap(), _$additionalText = new WeakMap(), _$invalidText = new WeakMap(), _selectionStart = new WeakMap(), _selectionEnd = new WeakMap(), _onInput = new WeakMap(), class extends HTMLElement {
+defineCustomElement('sinch-input', (_$input = new WeakMap(), _$label = new WeakMap(), _$optionalText = new WeakMap(), _$additionalText = new WeakMap(), _$invalidText = new WeakMap(), _selectionStart = new WeakMap(), _selectionEnd = new WeakMap(), _isPendingDk = new WeakMap(), _onCompositionStart = new WeakMap(), _onInput = new WeakMap(), class extends HTMLElement {
   constructor() {
     super();
 
@@ -51,6 +51,18 @@ defineCustomElement('sinch-input', (_$input = new WeakMap(), _$label = new WeakM
       value: null
     });
 
+    _classPrivateFieldInitSpec(this, _isPendingDk, {
+      writable: true,
+      value: false
+    });
+
+    _classPrivateFieldInitSpec(this, _onCompositionStart, {
+      writable: true,
+      value: () => {
+        _classPrivateFieldSet(this, _isPendingDk, true);
+      }
+    });
+
     _classPrivateFieldInitSpec(this, _onInput, {
       writable: true,
       value: e => {
@@ -70,7 +82,12 @@ defineCustomElement('sinch-input', (_$input = new WeakMap(), _$label = new WeakM
           const prevSelectionEnd = _classPrivateFieldGet(this, _selectionEnd);
 
           const isPrevCursorEnd = prevSelectionStart === prevSelectionEnd && prevSelectionStart === prevValue.length;
-          _classPrivateFieldGet(this, _$input).value = prevValue;
+
+          if (!_classPrivateFieldGet(this, _isPendingDk)) {
+            _classPrivateFieldGet(this, _$input).value = prevValue;
+          }
+
+          _classPrivateFieldSet(this, _isPendingDk, false);
 
           if (!isPrevCursorEnd) {
             _classPrivateFieldGet(this, _$input).setSelectionRange(prevSelectionStart, prevSelectionEnd);
@@ -109,10 +126,14 @@ defineCustomElement('sinch-input', (_$input = new WeakMap(), _$label = new WeakM
     this.setAttribute('role', 'textbox');
 
     _classPrivateFieldGet(this, _$input).addEventListener('input', _classPrivateFieldGet(this, _onInput));
+
+    _classPrivateFieldGet(this, _$input).addEventListener('compositionstart', _classPrivateFieldGet(this, _onCompositionStart));
   }
 
   disconnectedCallback() {
     _classPrivateFieldGet(this, _$input).removeEventListener('input', _classPrivateFieldGet(this, _onInput));
+
+    _classPrivateFieldGet(this, _$input).removeEventListener('compositionstart', _classPrivateFieldGet(this, _onCompositionStart));
   }
 
   static get observedAttributes() {

package/package.json

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

package/segment/index.d.ts

@@ -0,0 +1,20 @@
+import type { TSinchElementReact } from '../types';
+declare type TSinchSegmentElement = HTMLElement & {
+    caption: string;
+    collapsed: boolean;
+};
+declare type TSinchSegmentReact = TSinchElementReact<TSinchSegmentElement> & {
+    caption: string;
+    collapsed?: boolean;
+};
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-segment': TSinchSegmentReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-segment': TSinchSegmentElement;
+    }
+}
+export {};

package/segment/index.js

@@ -0,0 +1,62 @@
+import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
+import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
+
+var _$caption;
+
+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, updateAttribute, updateBooleanAttribute } from '../utils';
+const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:column;width:100%;border-radius:4px;box-sizing:border-box;background-color:var(--sinch-color-snow-100);color:var(--sinch-color-text-default);font:var(--sinch-font-body);border:none;box-shadow:1px 2px 8px rgb(0 0 0 / 10%)}#header{position:relative;display:flex;flex-direction:row;align-items:center;gap:16px;height:32px;padding:24px 32px 16px;--sinch-size-icon:32px}#caption{font:var(--sinch-font-title-2);color:var(--sinch-color-text-default);flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}#content-wrapper{padding:0 32px}#action{display:flex;flex-direction:row;justify-content:flex-end;gap:16px;padding:16px 32px 24px}#info{position:relative;display:flex;flex-direction:row;align-items:center;gap:16px;z-index:1}:host([collapsed]:not([collapsed=false])) :is(#content-wrapper,#action){display:none}:host([collapsed]:not([collapsed=false])) #header{padding-bottom:24px}</style><div id="wrapper"><div id="header"><slot name="icon"></slot><span id="caption"></span><div id="info"><slot name="info"></slot></div><slot name="collapse"></slot></div><div id="content-wrapper"><slot name="content"></slot></div><div id="action"><slot name="action"></slot></div></div>';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-segment', (_$caption = new WeakMap(), class extends HTMLElement {
+  constructor() {
+    super();
+
+    _classPrivateFieldInitSpec(this, _$caption, {
+      writable: true,
+      value: void 0
+    });
+
+    const shadowRoot = this.attachShadow({
+      mode: 'closed',
+      delegatesFocus: true
+    });
+    shadowRoot.appendChild(template.content.cloneNode(true));
+
+    _classPrivateFieldSet(this, _$caption, shadowRoot.querySelector('#caption'));
+  }
+
+  static get observedAttributes() {
+    return ['caption'];
+  }
+
+  attributeChangedCallback(name, _, newVal) {
+    switch (name) {
+      case 'caption':
+        {
+          _classPrivateFieldGet(this, _$caption).textContent = newVal;
+          break;
+        }
+    }
+  }
+
+  set caption(caption) {
+    updateAttribute(this, 'caption', caption);
+  }
+
+  get caption() {
+    return getAttribute(this, 'caption', '');
+  }
+
+  set collapsed(isChecked) {
+    updateBooleanAttribute(this, 'collapsed', isChecked);
+  }
+
+  get collapsed() {
+    return getBooleanAttribute(this, 'collapsed');
+  }
+
+}));

package/segment-collapse/index.d.ts

@@ -0,0 +1,26 @@
+import '../icon/expand-less';
+import '../icon/expand-more';
+import type { TSinchElementReact } from '../types';
+import type { FocusEvent, SyntheticEvent } from 'react';
+export declare type TSinchSegmentExpandElement = HTMLElement & {
+    value: boolean;
+    focus(): void;
+    blur(): void;
+};
+export declare type TSinchSegmentExpandReact = TSinchElementReact<TSinchSegmentExpandElement> & {
+    value: boolean;
+    'aria-label': string;
+    onChange: (e: SyntheticEvent<TSinchSegmentExpandElement, CustomEvent<boolean>>) => void;
+    onFocus?: (e: FocusEvent<TSinchSegmentExpandElement>) => void;
+    onBlur?: (e: FocusEvent<TSinchSegmentExpandElement>) => void;
+};
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-segment-collapse': TSinchSegmentExpandReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-segment-collapse': TSinchSegmentExpandElement;
+    }
+}

package/segment-collapse/index.js

@@ -0,0 +1,94 @@
+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/expand-less';
+import '../icon/expand-more';
+import { defineCustomElement, getBooleanAttribute, isAttrTrue, updateBooleanAttribute } from '../utils';
+const templateHTML = '<style>:host{display:contents;--sinch-size-icon:32px}input{all:initial;position:absolute;left:0;top:0;width:100%;height:100%;box-sizing:border-box;cursor:pointer}input:focus~sinch-icon-expand-less,input:focus~sinch-icon-expand-more{border-radius:4px;box-shadow:0 0 0 1px var(--sinch-color-stormy-500) inset}#up{display:block}#down{display:none}:host([value]:not([value=false])) #up{display:none}:host([value]:not([value=false])) #down{display:block}</style><input type="checkbox"/><sinch-icon-expand-less id="up"></sinch-icon-expand-less><sinch-icon-expand-more id="down"></sinch-icon-expand-more>';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-segment-collapse', (_$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: 'closed'
+    });
+    shadowRoot.appendChild(template.content.cloneNode(true));
+
+    _classPrivateFieldSet(this, _$input, shadowRoot.querySelector('input'));
+  }
+
+  connectedCallback() {
+    this.setAttribute('role', 'checkbox');
+
+    _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/textarea/index.js

@@ -1,7 +1,7 @@
 import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
 import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
 
-var _$input, _$label, _$optionalText, _$additionalText, _$invalidText, _selectionStart, _selectionEnd, _onInput;
+var _$input, _$label, _$optionalText, _$additionalText, _$invalidText, _selectionStart, _selectionEnd, _isPendingDk, _onCompositionStart, _onInput;
 
 function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
 
@@ -11,7 +11,7 @@ import { defineCustomElement, getAttribute, getBooleanAttribute, isAttrTrue, upd
 const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0;--sinch-color-icon:var(--sinch-color-stormy-500)}#wrapper{width:100%;box-sizing:border-box}#input{all:initial;border:1px solid var(--sinch-color-stormy-200);box-sizing:border-box;border-radius:4px;width:100%;min-height:86px;margin:2px 0;padding:8px 12px;font:var(--sinch-font-body);color:var(--sinch-color-text-default);caret-color:var(--sinch-caret-color,auto);resize:vertical}#input::placeholder{font:var(--sinch-font-body);color:var(--sinch-color-text-muted)}#input:disabled{border-color:var(--sinch-color-snow-500);color:var(--sinch-color-stormy-100)}#input:disabled::placeholder{color:var(--sinch-color-snow-500)}#input:focus{border-color:var(--sinch-color-stormy-600)}:host([invalidtext]:not([invalidtext=""])) #input:not(:disabled){border-color:var(--sinch-color-text-invalid)}#bottom,#top{display:flex;align-items:baseline}#top{height:24px}#bottom{height:20px}#additional,#invalid,#label,#optional{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#label{font:var(--sinch-font-title-4);color:var(--sinch-color-text-default)}#optional{flex:1;text-align:right;font:var(--sinch-font-small-text);color:var(--sinch-color-text-muted)}#additional{flex:1;text-align:right;font:var(--sinch-font-extra-small-text);color:var(--sinch-color-text-muted)}#invalid{font:var(--sinch-font-extra-small-text);color:var(--sinch-color-text-invalid)}::slotted(sinch-help-tooltip){align-self:center;margin:0 8px}:host([disabled]:not([disabled=false])) :is(#label,#additional,#optional,#invalid){color:var(--sinch-color-stormy-100)}:host([disabled]:not([disabled=false])){--sinch-color-icon:var(--sinch-color-stormy-100)}</style><div id="wrapper"><div id="top"><label id="label" for="input"></label><slot name="tooltip"></slot><span id="optional"></span></div><textarea id="input" rows="3"></textarea><div id="bottom"><span id="invalid"></span> <span id="additional"></span></div></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-textarea', (_$input = new WeakMap(), _$label = new WeakMap(), _$optionalText = new WeakMap(), _$additionalText = new WeakMap(), _$invalidText = new WeakMap(), _selectionStart = new WeakMap(), _selectionEnd = new WeakMap(), _onInput = new WeakMap(), class extends HTMLElement {
+defineCustomElement('sinch-textarea', (_$input = new WeakMap(), _$label = new WeakMap(), _$optionalText = new WeakMap(), _$additionalText = new WeakMap(), _$invalidText = new WeakMap(), _selectionStart = new WeakMap(), _selectionEnd = new WeakMap(), _isPendingDk = new WeakMap(), _onCompositionStart = new WeakMap(), _onInput = new WeakMap(), class extends HTMLElement {
   constructor() {
     super();
 
@@ -50,6 +50,18 @@ defineCustomElement('sinch-textarea', (_$input = new WeakMap(), _$label = new We
       value: null
     });
 
+    _classPrivateFieldInitSpec(this, _isPendingDk, {
+      writable: true,
+      value: false
+    });
+
+    _classPrivateFieldInitSpec(this, _onCompositionStart, {
+      writable: true,
+      value: () => {
+        _classPrivateFieldSet(this, _isPendingDk, true);
+      }
+    });
+
     _classPrivateFieldInitSpec(this, _onInput, {
       writable: true,
       value: e => {
@@ -69,7 +81,12 @@ defineCustomElement('sinch-textarea', (_$input = new WeakMap(), _$label = new We
           const prevSelectionEnd = _classPrivateFieldGet(this, _selectionEnd);
 
           const isPrevCursorEnd = prevSelectionStart === prevSelectionEnd && prevSelectionStart === prevValue.length;
-          _classPrivateFieldGet(this, _$input).value = prevValue;
+
+          if (!_classPrivateFieldGet(this, _isPendingDk)) {
+            _classPrivateFieldGet(this, _$input).value = prevValue;
+          }
+
+          _classPrivateFieldSet(this, _isPendingDk, false);
 
           if (!isPrevCursorEnd) {
             _classPrivateFieldGet(this, _$input).setSelectionRange(prevSelectionStart, prevSelectionEnd);
@@ -109,10 +126,14 @@ defineCustomElement('sinch-textarea', (_$input = new WeakMap(), _$label = new We
     this.setAttribute('aria-multiline', 'true');
 
     _classPrivateFieldGet(this, _$input).addEventListener('input', _classPrivateFieldGet(this, _onInput));
+
+    _classPrivateFieldGet(this, _$input).addEventListener('compositionstart', _classPrivateFieldGet(this, _onCompositionStart));
   }
 
   disconnectedCallback() {
     _classPrivateFieldGet(this, _$input).removeEventListener('input', _classPrivateFieldGet(this, _onInput));
+
+    _classPrivateFieldGet(this, _$input).removeEventListener('compositionstart', _classPrivateFieldGet(this, _onCompositionStart));
   }
 
   static get observedAttributes() {