@nectary/components 0.16.0 → 0.16.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/input/index.js +26 -3
  2. package/package.json +1 -1
  3. package/textarea/index.js +26 -3
package/input/index.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
2
2
  import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
3
3
 
4
- var _$input, _$label, _$optionalText, _$additionalText, _$invalidText, _selectionStart, _selectionEnd, _onInput;
4
+ var _$input, _$label, _$optionalText, _$additionalText, _$invalidText, _selectionStart, _selectionEnd, _isPendingDk, _onKeydown, _onInput;
5
5
 
6
6
  function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
7
7
 
@@ -12,7 +12,7 @@ const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;ou
12
12
  const inputTypes = ['text', 'password'];
13
13
  const template = document.createElement('template');
14
14
  template.innerHTML = templateHTML;
15
- 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 {
15
+ 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(), _onKeydown = new WeakMap(), _onInput = new WeakMap(), class extends HTMLElement {
16
16
  constructor() {
17
17
  super();
18
18
 
@@ -51,6 +51,20 @@ defineCustomElement('sinch-input', (_$input = new WeakMap(), _$label = new WeakM
51
51
  value: null
52
52
  });
53
53
 
54
+ _classPrivateFieldInitSpec(this, _isPendingDk, {
55
+ writable: true,
56
+ value: false
57
+ });
58
+
59
+ _classPrivateFieldInitSpec(this, _onKeydown, {
60
+ writable: true,
61
+ value: e => {
62
+ if (e.key === 'Dead') {
63
+ _classPrivateFieldSet(this, _isPendingDk, true);
64
+ }
65
+ }
66
+ });
67
+
54
68
  _classPrivateFieldInitSpec(this, _onInput, {
55
69
  writable: true,
56
70
  value: e => {
@@ -70,7 +84,12 @@ defineCustomElement('sinch-input', (_$input = new WeakMap(), _$label = new WeakM
70
84
  const prevSelectionEnd = _classPrivateFieldGet(this, _selectionEnd);
71
85
 
72
86
  const isPrevCursorEnd = prevSelectionStart === prevSelectionEnd && prevSelectionStart === prevValue.length;
73
- _classPrivateFieldGet(this, _$input).value = prevValue;
87
+
88
+ if (!_classPrivateFieldGet(this, _isPendingDk)) {
89
+ _classPrivateFieldGet(this, _$input).value = prevValue;
90
+ }
91
+
92
+ _classPrivateFieldSet(this, _isPendingDk, false);
74
93
 
75
94
  if (!isPrevCursorEnd) {
76
95
  _classPrivateFieldGet(this, _$input).setSelectionRange(prevSelectionStart, prevSelectionEnd);
@@ -109,10 +128,14 @@ defineCustomElement('sinch-input', (_$input = new WeakMap(), _$label = new WeakM
109
128
  this.setAttribute('role', 'textbox');
110
129
 
111
130
  _classPrivateFieldGet(this, _$input).addEventListener('input', _classPrivateFieldGet(this, _onInput));
131
+
132
+ _classPrivateFieldGet(this, _$input).addEventListener('keydown', _classPrivateFieldGet(this, _onKeydown));
112
133
  }
113
134
 
114
135
  disconnectedCallback() {
115
136
  _classPrivateFieldGet(this, _$input).removeEventListener('input', _classPrivateFieldGet(this, _onInput));
137
+
138
+ _classPrivateFieldGet(this, _$input).removeEventListener('keydown', _classPrivateFieldGet(this, _onKeydown));
116
139
  }
117
140
 
118
141
  static get observedAttributes() {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nectary/components",
3
- "version": "0.16.0",
3
+ "version": "0.16.1",
4
4
  "files": [
5
5
  "theme.css",
6
6
  "**/*/*.js",
package/textarea/index.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
2
2
  import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
3
3
 
4
- var _$input, _$label, _$optionalText, _$additionalText, _$invalidText, _selectionStart, _selectionEnd, _onInput;
4
+ var _$input, _$label, _$optionalText, _$additionalText, _$invalidText, _selectionStart, _selectionEnd, _isPendingDk, _onKeydown, _onInput;
5
5
 
6
6
  function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
7
7
 
@@ -11,7 +11,7 @@ import { defineCustomElement, getAttribute, getBooleanAttribute, isAttrTrue, upd
11
11
  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>';
12
12
  const template = document.createElement('template');
13
13
  template.innerHTML = templateHTML;
14
- 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 {
14
+ 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(), _onKeydown = new WeakMap(), _onInput = new WeakMap(), class extends HTMLElement {
15
15
  constructor() {
16
16
  super();
17
17
 
@@ -50,6 +50,20 @@ defineCustomElement('sinch-textarea', (_$input = new WeakMap(), _$label = new We
50
50
  value: null
51
51
  });
52
52
 
53
+ _classPrivateFieldInitSpec(this, _isPendingDk, {
54
+ writable: true,
55
+ value: false
56
+ });
57
+
58
+ _classPrivateFieldInitSpec(this, _onKeydown, {
59
+ writable: true,
60
+ value: e => {
61
+ if (e.key === 'Dead') {
62
+ _classPrivateFieldSet(this, _isPendingDk, true);
63
+ }
64
+ }
65
+ });
66
+
53
67
  _classPrivateFieldInitSpec(this, _onInput, {
54
68
  writable: true,
55
69
  value: e => {
@@ -69,7 +83,12 @@ defineCustomElement('sinch-textarea', (_$input = new WeakMap(), _$label = new We
69
83
  const prevSelectionEnd = _classPrivateFieldGet(this, _selectionEnd);
70
84
 
71
85
  const isPrevCursorEnd = prevSelectionStart === prevSelectionEnd && prevSelectionStart === prevValue.length;
72
- _classPrivateFieldGet(this, _$input).value = prevValue;
86
+
87
+ if (!_classPrivateFieldGet(this, _isPendingDk)) {
88
+ _classPrivateFieldGet(this, _$input).value = prevValue;
89
+ }
90
+
91
+ _classPrivateFieldSet(this, _isPendingDk, false);
73
92
 
74
93
  if (!isPrevCursorEnd) {
75
94
  _classPrivateFieldGet(this, _$input).setSelectionRange(prevSelectionStart, prevSelectionEnd);
@@ -109,10 +128,14 @@ defineCustomElement('sinch-textarea', (_$input = new WeakMap(), _$label = new We
109
128
  this.setAttribute('aria-multiline', 'true');
110
129
 
111
130
  _classPrivateFieldGet(this, _$input).addEventListener('input', _classPrivateFieldGet(this, _onInput));
131
+
132
+ _classPrivateFieldGet(this, _$input).addEventListener('keydown', _classPrivateFieldGet(this, _onKeydown));
112
133
  }
113
134
 
114
135
  disconnectedCallback() {
115
136
  _classPrivateFieldGet(this, _$input).removeEventListener('input', _classPrivateFieldGet(this, _onInput));
137
+
138
+ _classPrivateFieldGet(this, _$input).removeEventListener('keydown', _classPrivateFieldGet(this, _onKeydown));
116
139
  }
117
140
 
118
141
  static get observedAttributes() {