@nectary/components 0.39.0 → 0.40.0

package/textarea/index.js

@@ -1,166 +1,43 @@
-import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
-import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
-
-var _$input, _cursorPos, _isPendingDk, _onCompositionStart, _onSelectionChange, _onInput, _onInputFocus, _onInputBlur, _onChangeReactHandler, _onFocusReactHandler, _onBlurReactHandler;
-
-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, getIntegerAttribute, getReactEventHandler, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute } from '../utils';
 const templateHTML = '<style>:host{display:inline-block;vertical-align:middle}#input{all:initial;display:block;border:1px solid var(--sinch-color-stormy-200);box-sizing:border-box;border-radius:var(--sinch-shape-radius-s);width:100%;padding:8px 12px;font:var(--sinch-font-body);color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-100);resize:none}#input::placeholder{font:var(--sinch-font-body);color:var(--sinch-color-text-muted);opacity:1}#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([resizable]:not([resizable=false])) #input{resize:vertical}:host([invalid]:not([invalid=false])) #input:enabled{border-color:var(--sinch-color-text-invalid)}</style><textarea id="input"></textarea>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-textarea', (_$input = new WeakMap(), _cursorPos = new WeakMap(), _isPendingDk = new WeakMap(), _onCompositionStart = new WeakMap(), _onSelectionChange = new WeakMap(), _onInput = new WeakMap(), _onInputFocus = new WeakMap(), _onInputBlur = new WeakMap(), _onChangeReactHandler = new WeakMap(), _onFocusReactHandler = new WeakMap(), _onBlurReactHandler = new WeakMap(), class extends NectaryElement {
+defineCustomElement('sinch-textarea', class extends NectaryElement {
+  #$input;
+  #cursorPos = null;
+  #isPendingDk = false;
+
   constructor() {
     super();
-
-    _classPrivateFieldInitSpec(this, _$input, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _cursorPos, {
-      writable: true,
-      value: null
-    });
-
-    _classPrivateFieldInitSpec(this, _isPendingDk, {
-      writable: true,
-      value: false
-    });
-
-    _classPrivateFieldInitSpec(this, _onCompositionStart, {
-      writable: true,
-      value: () => {
-        _classPrivateFieldSet(this, _isPendingDk, true);
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onSelectionChange, {
-      writable: true,
-      value: () => {
-        _classPrivateFieldSet(this, _cursorPos, _classPrivateFieldGet(this, _$input).selectionEnd);
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onInput, {
-      writable: true,
-      value: e => {
-        e.stopPropagation();
-
-        const nextValue = _classPrivateFieldGet(this, _$input).value;
-
-        const prevValue = this.value;
-
-        if (prevValue !== nextValue) {
-          const nextCursorPos = _classPrivateFieldGet(this, _$input).selectionEnd;
-
-          if (!_classPrivateFieldGet(this, _isPendingDk)) {
-            _classPrivateFieldGet(this, _$input).value = prevValue;
-
-            const prevCursorPos = _classPrivateFieldGet(this, _cursorPos);
-
-            const isPrevCursorEnd = prevCursorPos === null || prevCursorPos === prevValue.length;
-
-            if (!isPrevCursorEnd) {
-              _classPrivateFieldGet(this, _$input).setSelectionRange(prevCursorPos, prevCursorPos);
-            }
-          }
-
-          _classPrivateFieldSet(this, _isPendingDk, false);
-
-          _classPrivateFieldSet(this, _cursorPos, nextCursorPos);
-
-          this.dispatchEvent(new CustomEvent('change', {
-            detail: nextValue,
-            bubbles: true
-          }));
-          this.dispatchEvent(new CustomEvent('-change', {
-            detail: nextValue
-          }));
-        }
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onInputFocus, {
-      writable: true,
-      value: () => {
-        this.dispatchEvent(new CustomEvent('-focus'));
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onInputBlur, {
-      writable: true,
-      value: () => {
-        this.dispatchEvent(new CustomEvent('-blur'));
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onChangeReactHandler, {
-      writable: true,
-      value: e => {
-        getReactEventHandler(this, 'on-change')?.(e);
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onFocusReactHandler, {
-      writable: true,
-      value: () => {
-        getReactEventHandler(this, 'on-focus')?.();
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onBlurReactHandler, {
-      writable: true,
-      value: () => {
-        getReactEventHandler(this, 'on-blur')?.();
-      }
-    });
-
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-
-    _classPrivateFieldSet(this, _$input, shadowRoot.querySelector('#input'));
+    this.#$input = shadowRoot.querySelector('#input');
   }
 
   connectedCallback() {
     this.setAttribute('role', 'textbox');
     this.setAttribute('aria-multiline', 'true');
-
-    _classPrivateFieldGet(this, _$input).addEventListener('input', _classPrivateFieldGet(this, _onInput));
-
-    _classPrivateFieldGet(this, _$input).addEventListener('compositionstart', _classPrivateFieldGet(this, _onCompositionStart));
-
-    _classPrivateFieldGet(this, _$input).addEventListener('mousedown', _classPrivateFieldGet(this, _onSelectionChange));
-
-    _classPrivateFieldGet(this, _$input).addEventListener('keydown', _classPrivateFieldGet(this, _onSelectionChange));
-
-    _classPrivateFieldGet(this, _$input).addEventListener('focus', _classPrivateFieldGet(this, _onInputFocus));
-
-    _classPrivateFieldGet(this, _$input).addEventListener('blur', _classPrivateFieldGet(this, _onInputBlur));
-
-    this.addEventListener('-change', _classPrivateFieldGet(this, _onChangeReactHandler));
-    this.addEventListener('-focus', _classPrivateFieldGet(this, _onFocusReactHandler));
-    this.addEventListener('-blur', _classPrivateFieldGet(this, _onBlurReactHandler));
+    this.#$input.addEventListener('input', this.#onInput);
+    this.#$input.addEventListener('compositionstart', this.#onCompositionStart);
+    this.#$input.addEventListener('mousedown', this.#onSelectionChange);
+    this.#$input.addEventListener('keydown', this.#onSelectionChange);
+    this.#$input.addEventListener('focus', this.#onInputFocus);
+    this.#$input.addEventListener('blur', this.#onInputBlur);
+    this.addEventListener('-change', this.#onChangeReactHandler);
+    this.addEventListener('-focus', this.#onFocusReactHandler);
+    this.addEventListener('-blur', this.#onBlurReactHandler);
   }
 
   disconnectedCallback() {
-    _classPrivateFieldGet(this, _$input).removeEventListener('input', _classPrivateFieldGet(this, _onInput));
-
-    _classPrivateFieldGet(this, _$input).removeEventListener('compositionstart', _classPrivateFieldGet(this, _onCompositionStart));
-
-    _classPrivateFieldGet(this, _$input).removeEventListener('mousedown', _classPrivateFieldGet(this, _onSelectionChange));
-
-    _classPrivateFieldGet(this, _$input).removeEventListener('keydown', _classPrivateFieldGet(this, _onSelectionChange));
-
-    _classPrivateFieldGet(this, _$input).removeEventListener('focus', _classPrivateFieldGet(this, _onInputFocus));
-
-    _classPrivateFieldGet(this, _$input).removeEventListener('blur', _classPrivateFieldGet(this, _onInputBlur));
-
-    this.removeEventListener('-change', _classPrivateFieldGet(this, _onChangeReactHandler));
-    this.removeEventListener('-focus', _classPrivateFieldGet(this, _onFocusReactHandler));
-    this.removeEventListener('-blur', _classPrivateFieldGet(this, _onBlurReactHandler));
+    this.#$input.removeEventListener('input', this.#onInput);
+    this.#$input.removeEventListener('compositionstart', this.#onCompositionStart);
+    this.#$input.removeEventListener('mousedown', this.#onSelectionChange);
+    this.#$input.removeEventListener('keydown', this.#onSelectionChange);
+    this.#$input.removeEventListener('focus', this.#onInputFocus);
+    this.#$input.removeEventListener('blur', this.#onInputBlur);
+    this.removeEventListener('-change', this.#onChangeReactHandler);
+    this.removeEventListener('-focus', this.#onFocusReactHandler);
+    this.removeEventListener('-blur', this.#onBlurReactHandler);
   }
 
   static get observedAttributes() {
@@ -176,17 +53,15 @@ defineCustomElement('sinch-textarea', (_$input = new WeakMap(), _cursorPos = new
       case 'value':
         {
           const nextVal = newVal ?? '';
-
-          const prevVal = _classPrivateFieldGet(this, _$input).value;
+          const prevVal = this.#$input.value;
 
           if (nextVal !== prevVal) {
-            const prevCursorPos = _classPrivateFieldGet(this, _$input).selectionEnd;
-
+            const prevCursorPos = this.#$input.selectionEnd;
             const isPrevCursorEnd = prevCursorPos === prevVal.length;
-            _classPrivateFieldGet(this, _$input).value = nextVal;
+            this.#$input.value = nextVal;
 
             if (!isPrevCursorEnd) {
-              _classPrivateFieldGet(this, _$input).setSelectionRange(_classPrivateFieldGet(this, _cursorPos), _classPrivateFieldGet(this, _cursorPos));
+              this.#$input.setSelectionRange(this.#cursorPos, this.#cursorPos);
             }
           }
 
@@ -195,7 +70,7 @@ defineCustomElement('sinch-textarea', (_$input = new WeakMap(), _cursorPos = new
 
       case 'placeholder':
         {
-          _classPrivateFieldGet(this, _$input).placeholder = newVal ?? '';
+          this.#$input.placeholder = newVal ?? '';
           updateAttribute(this, 'aria-placeholder', newVal);
           break;
         }
@@ -209,14 +84,14 @@ defineCustomElement('sinch-textarea', (_$input = new WeakMap(), _cursorPos = new
       case 'disabled':
         {
           const isDisabled = isAttrTrue(newVal);
-          _classPrivateFieldGet(this, _$input).disabled = isDisabled;
+          this.#$input.disabled = isDisabled;
           updateBooleanAttribute(this, 'disabled', isDisabled);
           break;
         }
 
       case 'rows':
         {
-          updateAttribute(_classPrivateFieldGet(this, _$input), 'rows', newVal);
+          updateAttribute(this.#$input, 'rows', newVal);
           break;
         }
     }
@@ -239,7 +114,7 @@ defineCustomElement('sinch-textarea', (_$input = new WeakMap(), _cursorPos = new
   }
 
   get placeholder() {
-    return getAttribute(this, 'placeholder', null);
+    return getAttribute(this, 'placeholder');
   }
 
   set invalid(value) {
@@ -275,35 +150,85 @@ defineCustomElement('sinch-textarea', (_$input = new WeakMap(), _cursorPos = new
   }
 
   get selectionStart() {
-    return _classPrivateFieldGet(this, _$input).selectionStart;
+    return this.#$input.selectionStart;
   }
 
   set selectionStart(value) {
-    _classPrivateFieldGet(this, _$input).selectionStart = value;
+    this.#$input.selectionStart = value;
   }
 
   get selectionEnd() {
-    return _classPrivateFieldGet(this, _$input).selectionEnd;
+    return this.#$input.selectionEnd;
   }
 
   set selectionEnd(value) {
-    _classPrivateFieldGet(this, _$input).selectionEnd = value;
+    this.#$input.selectionEnd = value;
   }
 
   get selectionDirection() {
-    return _classPrivateFieldGet(this, _$input).selectionDirection;
+    return this.#$input.selectionDirection;
   }
 
   set selectionDirection(value) {
-    _classPrivateFieldGet(this, _$input).selectionDirection = value;
+    this.#$input.selectionDirection = value;
   }
 
   focus() {
-    _classPrivateFieldGet(this, _$input).focus();
+    this.#$input.focus();
   }
 
   blur() {
-    _classPrivateFieldGet(this, _$input).blur();
-  }
+    this.#$input.blur();
+  }
+
+  #onCompositionStart = () => {
+    this.#isPendingDk = true;
+  };
+  #onSelectionChange = () => {
+    this.#cursorPos = this.#$input.selectionEnd;
+  };
+  #onInput = e => {
+    e.stopPropagation();
+    const nextValue = this.#$input.value;
+    const prevValue = this.value;
+
+    if (prevValue !== nextValue) {
+      const nextCursorPos = this.#$input.selectionEnd;
+
+      if (!this.#isPendingDk) {
+        this.#$input.value = prevValue;
+        const prevCursorPos = this.#cursorPos;
+        const isPrevCursorEnd = prevCursorPos === null || prevCursorPos === prevValue.length;
+
+        if (!isPrevCursorEnd) {
+          this.#$input.setSelectionRange(prevCursorPos, prevCursorPos);
+        }
+      }
 
-}));
+      this.#isPendingDk = false;
+      this.#cursorPos = nextCursorPos;
+      this.dispatchEvent(new CustomEvent('change', {
+        detail: nextValue,
+        bubbles: true
+      }));
+      this.dispatchEvent(new CustomEvent('-change', {
+        detail: nextValue
+      }));
+    }
+  };
+  #onInputFocus = () => {
+    this.dispatchEvent(new CustomEvent('-focus'));
+  };
+  #onInputBlur = () => {
+    this.dispatchEvent(new CustomEvent('-blur'));
+  };
+  #onChangeReactHandler = e => {
+    getReactEventHandler(this, 'on-change')?.(e);
+  };
+  #onFocusReactHandler = () => {
+    getReactEventHandler(this, 'on-focus')?.();
+  };
+  #onBlurReactHandler = () => {
+    getReactEventHandler(this, 'on-blur')?.();
+  };
+});

package/theme.css

@@ -7,63 +7,56 @@
   --sinch-color-honey-600: #FFAA00;
   --sinch-color-honey-500: #FFBE3C;
   --sinch-color-honey-400: #FFCC66;
-  --sinch-color-honey-300: #FFDD99;
-  --sinch-color-honey-200: #FFEECC;
+  --sinch-color-honey-300: #FFDF9E;
+  --sinch-color-honey-200: #FCECCB;
   --sinch-color-honey-100: #FFF7E6;
   --sinch-color-tropical-700: #003D3D;
   --sinch-color-tropical-600: #005757;
   --sinch-color-tropical-500: #007171;
-  --sinch-color-tropical-400: #338D8D;
+  --sinch-color-tropical-400: #059688;
   --sinch-color-tropical-300: #66AAAA;
-  --sinch-color-tropical-200: #99C6C6;
-  --sinch-color-tropical-100: #CCE3E3;
+  --sinch-color-tropical-200: #A7D5C2;
+  --sinch-color-tropical-100: #DCEDE1;
   --sinch-color-tropical-50: #E5F1F1;
-  --sinch-color-stormy-600: #061927;
-  --sinch-color-stormy-500: #0A273D;
-  --sinch-color-stormy-400: #3B5264;
-  --sinch-color-stormy-300: #677784;
-  --sinch-color-stormy-200: #7F8F99;
-  --sinch-color-stormy-100: #9CA8B0;
-  --sinch-color-snow-800: #C6CDD2;
-  --sinch-color-snow-700: #D4DADD;
-  --sinch-color-snow-600: #E3E6E8;
-  --sinch-color-snow-500: #F1F3F4;
+  --sinch-color-stormy-700: #000000;
+  --sinch-color-stormy-600: #171717;
+  --sinch-color-stormy-500: #242424;
+  --sinch-color-stormy-400: #595959;
+  --sinch-color-stormy-300: #767676;
+  --sinch-color-stormy-200: #8C8C8C;
+  --sinch-color-stormy-100: #A6A6A6;
+  --sinch-color-ocean-700: #1B3E65;
+  --sinch-color-ocean-600: #1686CB;
+  --sinch-color-ocean-500: #3AA7EA;
+  --sinch-color-ocean-400: #6EBBEE;
+  --sinch-color-ocean-300: #A1D5F5;
+  --sinch-color-ocean-200: #C8E6F9;
+  --sinch-color-ocean-100: #DEF2FF;
+  --sinch-color-ocean-50: #F3FAFE;
+  --sinch-color-snow-700: #CCCCCC;
+  --sinch-color-snow-600: #D9D9D9;
+  --sinch-color-snow-500: #E0E0E0;
+  --sinch-color-snow-400: #F2F2F2;
+  --sinch-color-snow-200: #F8F8F8;
   --sinch-color-snow-100: #FFFFFF;
-  --sinch-color-raspberry-700: #881125;
-  --sinch-color-raspberry-600: #B61631;
-  --sinch-color-raspberry-500: #E31C3D;
-  --sinch-color-raspberry-400: #E94964;
-  --sinch-color-raspberry-300: #EE778B;
-  --sinch-color-raspberry-200: #F4A4B1;
-  --sinch-color-raspberry-100: #F9D2D8;
-  --sinch-color-raspberry-50: #FCE8EB;
-  --sinch-color-text-default: #0A273D;
-  --sinch-color-text-inverted: #FFFFFF;
-  --sinch-color-text-muted: #677784;
-  --sinch-color-text-link: #007171;
-  --sinch-color-text-invalid: #E31C3D;
-  --sinch-color-error-800: #57000E;
-  --sinch-color-error-500: #E31C3D;
-  --sinch-color-error-200: #FCD7D4;
-  --sinch-color-success-700: #005419;
-  --sinch-color-success-500: #2E8540;
-  --sinch-color-success-200: #D7F1D8;
-  --sinch-color-informative-700: #003B7E;
-  --sinch-color-informative-500: #2071CE;
-  --sinch-color-informative-200: #D5E5F8;
-  --sinch-color-warning-700: #9C2E00;
-  --sinch-color-warning-500: #F35B1C;
-  --sinch-color-warning-200: #FFE8D6;
+  --sinch-color-raspberry-700: #882024;
+  --sinch-color-raspberry-600: #D13D42;
+  --sinch-color-raspberry-500: #EF5858;
+  --sinch-color-raspberry-400: #F38686;
+  --sinch-color-raspberry-300: #FFB8B8;
+  --sinch-color-raspberry-200: #FBD5D5;
+  --sinch-color-raspberry-100: #FFE8E4;
+  --sinch-color-raspberry-50: #FFF6F5;
   --sinch-color-night-400: #3247E9;
   --sinch-color-night-200: #D1D6FA;
-  --sinch-color-aqua-400: #3DAED8;
-  --sinch-color-aqua-200: #AADBEE;
+  --sinch-color-aqua-400: #3AA7EA;
+  --sinch-color-aqua-200: #A1D5F5;
   --sinch-color-grass-400: #39B93D;
   --sinch-color-grass-200: #B4E4B5;
   --sinch-color-dirt-400: #828282;
   --sinch-color-dirt-200: #E0DDDC;
-  --sinch-color-berry-400: #F95252;
-  --sinch-color-berry-200: #FCA7A7;
+  --sinch-color-berry-400: #EF5858;
+  --sinch-color-berry-200: #FFB8B8;
   --sinch-color-candy-400: #E467C3;
   --sinch-color-candy-200: #F6CBEA;
   --sinch-color-mud-400: #8B6559;
@@ -72,13 +65,51 @@
   --sinch-color-orange-200: #FFD4B3;
   --sinch-color-bolt-400: #FFBE3C;
   --sinch-color-bolt-200: #FFE6B3;
-  --sinch-color-background-grey: #FAFAFA;
-  --sinch-color-background-green: #DCEDE1;
-  --sinch-color-background-blue: #DEF2FF;
-  --sinch-color-background-yellow: #FCECCB;
-  --sinch-color-background-white: #FFFFFF;
+  --sinch-color-violet-400: #9E67E4;
+  --sinch-color-violet-200: #DECBF6;
+  --sinch-color-error-700: #882024;
+  --sinch-color-error-500: #D13D42;
+  --sinch-color-error-200: #FBD5D5;
+  --sinch-color-success-700: #275D33;
+  --sinch-color-success-500: #46A65A;
+  --sinch-color-success-200: #D7F1D8;
+  --sinch-color-informative-700: #003B7E;
+  --sinch-color-informative-500: #2071CE;
+  --sinch-color-informative-200: #D5E5F8;
+  --sinch-color-warning-700: #9C2E00;
+  --sinch-color-warning-500: #F35B1C;
+  --sinch-color-warning-200: #FFE8D6;
+  --sinch-color-skin-tone-10: #FFCC4D;
+  --sinch-color-skin-tone-20: #F7DECE;
+  --sinch-color-skin-tone-30: #F3D2A2;
+  --sinch-color-skin-tone-40: #D4AB88;
+  --sinch-color-skin-tone-50: #AF7E57;
+  --sinch-color-skin-tone-60: #7C533E;
   --sinch-color-transparent: transparent;
 
+  /* Contextual */
+  --sinch-color-bg-primary-light: var(--sinch-color-snow-100);
+  --sinch-color-bg-primary-contrast: var(--sinch-color-snow-200);
+  --sinch-color-bg-comp-green: var(--sinch-color-tropical-100);
+  --sinch-color-bg-comp-blue: var(--sinch-color-ocean-100);
+  --sinch-color-bg-comp-yellow: var(--sinch-color-honey-200);
+  --sinch-color-bg-comp-red: var(--sinch-color-raspberry-100);
+  --sinch-color-text-default: var(--sinch-color-stormy-700);
+  --sinch-color-text-inverted: var(--sinch-color-snow-100);
+  --sinch-color-text-muted: var(--sinch-color-stormy-300);
+  --sinch-color-text-disabled: var(--sinch-color-stormy-100);
+  --sinch-color-text-link: var(--sinch-color-tropical-500);
+  --sinch-color-text-link-disabled: var(--sinch-color-tropical-100);
+  --sinch-color-text-invalid: var(--sinch-color-raspberry-600);
+  --sinch-color-text-invalid-disabled: var(--sinch-color-raspberry-100);
+  --sinch-color-border-default: var(--sinch-color-snow-700);
+  --sinch-color-border-light: var(--sinch-color-snow-500);
+  --sinch-color-border-dark: var(--sinch-color-stormy-100);
+  --sinch-color-border-active: var(--sinch-color-stormy-500);
+  --sinch-color-border-disabled: var(--sinch-color-snow-400);
+  --sinch-color-border-focus: var(--sinch-color-ocean-500);
+  --sinch-color-border-invalid: var(--sinch-color-raspberry-600);
+
   /* Typography */
   --sinch-font-family: "Gilroy", "Arial", "sans-serif";
   --sinch-font-weight-emphasized: 600;