@nectary/components 0.15.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 (7) hide show
  1. package/dialog/index.d.ts +4 -2
  2. package/dialog/index.js +78 -66
  3. package/dropdown/index.js +62 -82
  4. package/dropdown-option/index.js +1 -1
  5. package/input/index.js +26 -3
  6. package/package.json +3 -2
  7. package/textarea/index.js +26 -3
package/dialog/index.d.ts CHANGED
@@ -1,13 +1,15 @@
1
+ import '../icon-button';
1
2
  import '../icon/close';
2
3
  import type { TRect, TSinchElementReact } from '../types';
3
4
  import type { SyntheticEvent } from 'react';
4
5
  declare type TSinchDialogElement = HTMLElement & {
5
- title: string;
6
+ caption: string;
6
7
  readonly dialogRect: TRect;
7
8
  readonly closeButtonRect: TRect;
8
9
  };
9
10
  declare type TSinchDialogReact = TSinchElementReact<TSinchDialogElement> & {
10
- title: string;
11
+ open: boolean;
12
+ caption: string;
11
13
  'aria-label': string;
12
14
  onClose: (event: SyntheticEvent<TSinchDialogElement, CustomEvent<void>>) => void;
13
15
  };
package/dialog/index.js CHANGED
@@ -1,15 +1,21 @@
1
1
  import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
2
2
  import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
3
3
 
4
- var _$main, _$closeButton, _$backDrop, _$title, _$prevActiveElement, _focusIn, _onCloseByMouse, _onCloseByEsc, _onClose, _onCloseReactHandler;
4
+ var _$dialog, _$closeButton, _$caption, _isConected, _onCancel, _onCloseClick, _onBackdropClick, _onCloseReactHandler, _dispatchCloseEvent, _setOpen;
5
+
6
+ function _classPrivateMethodInitSpec(obj, privateSet) { _checkPrivateRedeclaration(obj, privateSet); privateSet.add(obj); }
5
7
 
6
8
  function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
7
9
 
8
10
  function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
9
11
 
10
- import { defineCustomElement, getAttribute, getRect, updateAttribute } from '../utils';
12
+ function _classPrivateMethodGet(receiver, privateSet, fn) { if (!privateSet.has(receiver)) { throw new TypeError("attempted to get private field on non-instance"); } return fn; }
13
+
14
+ import dialogPolyfill from 'dialog-polyfill';
15
+ import { defineCustomElement, getAttribute, getBooleanAttribute, getRect, isAttrTrue, updateAttribute } from '../utils';
16
+ import '../icon-button';
11
17
  import '../icon/close';
12
- const templateHTML = '<style>:host{outline:0}#wrapper{position:fixed;top:0;left:0;height:100vh;width:100vw;color:var(--sinch-color-text-default);font:var(--sinch-font-body);z-index:2147483647}#backdrop{background-color:#000;position:absolute;left:0;top:0;opacity:.55;width:100%;height:100%}#main{display:flex;flex-direction:column;position:relative;left:50%;top:50%;transform:translateX(-50%) translateY(-50%);padding:24px;width:100%;max-width:512px;border-radius:4px;box-sizing:border-box;background-color:var(--sinch-color-snow-100)}#header{display:flex;flex-direction:row;justify-content:space-between;align-content:center;margin-bottom:16px}#title{font:var(--sinch-font-title-3);color:var(--sinch-color-text-default)}#content-wrapper{max-height:50vh;overflow-y:auto}#close{all:initial;cursor:pointer;--sinch-size-icon:24px}#buttons{display:flex;flex-direction:row;justify-content:flex-end;gap:16px;margin-top:24px}</style><div id="wrapper"><div id="backdrop"></div><div id="main"><div id="header"><span id="title"></span> <button id="close"><sinch-icon-close></sinch-icon-close></button></div><div id="content-wrapper"><slot name="content"></slot></div><div id="buttons"><slot name="buttons"></slot></div></div></div>';
18
+ const templateHTML = '<style>dialog{position:absolute;left:0;right:0;margin:auto;display:flex;flex-direction:column;padding:24px;width:100%;max-width:512px;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%)}dialog:not([open]){display:none}dialog+.backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#000;opacity:.55}dialog::backdrop{background-color:#000;opacity:.55}._dialog_overlay{position:fixed;top:0;right:0;bottom:0;left:0}dialog.fixed{position:fixed;top:50%;transform:translate(0,-50%)}#header{display:flex;flex-direction:row;justify-content:space-between;align-content:center;margin-bottom:16px}#caption{font:var(--sinch-font-title-3);color:var(--sinch-color-text-default)}#content-wrapper{max-height:50vh;overflow-y:auto}#close{all:initial;cursor:pointer;--sinch-size-icon:24px}#buttons{display:flex;flex-direction:row;justify-content:flex-end;gap:16px;margin-top:24px}</style><dialog><div id="header"><span id="caption"></span> <button id="close"><sinch-icon-close></sinch-icon-close></button></div><div id="content-wrapper"><slot name="content"></slot></div><div id="buttons"><slot name="buttons"></slot></div></dialog>';
13
19
  const template = document.createElement('template');
14
20
  template.innerHTML = templateHTML;
15
21
 
@@ -23,84 +29,65 @@ const getReactEventHandler = ($element, handlerName) => {
23
29
  return null;
24
30
  };
25
31
 
26
- defineCustomElement('sinch-dialog', (_$main = new WeakMap(), _$closeButton = new WeakMap(), _$backDrop = new WeakMap(), _$title = new WeakMap(), _$prevActiveElement = new WeakMap(), _focusIn = new WeakMap(), _onCloseByMouse = new WeakMap(), _onCloseByEsc = new WeakMap(), _onClose = new WeakMap(), _onCloseReactHandler = new WeakMap(), class extends HTMLElement {
32
+ defineCustomElement('sinch-dialog', (_$dialog = new WeakMap(), _$closeButton = new WeakMap(), _$caption = new WeakMap(), _isConected = new WeakMap(), _onCancel = new WeakMap(), _onCloseClick = new WeakMap(), _onBackdropClick = new WeakMap(), _onCloseReactHandler = new WeakMap(), _dispatchCloseEvent = new WeakSet(), _setOpen = new WeakSet(), class extends HTMLElement {
27
33
  constructor() {
28
34
  super();
29
35
 
30
- _classPrivateFieldInitSpec(this, _$main, {
31
- writable: true,
32
- value: void 0
33
- });
36
+ _classPrivateMethodInitSpec(this, _setOpen);
34
37
 
35
- _classPrivateFieldInitSpec(this, _$closeButton, {
38
+ _classPrivateMethodInitSpec(this, _dispatchCloseEvent);
39
+
40
+ _classPrivateFieldInitSpec(this, _$dialog, {
36
41
  writable: true,
37
42
  value: void 0
38
43
  });
39
44
 
40
- _classPrivateFieldInitSpec(this, _$backDrop, {
45
+ _classPrivateFieldInitSpec(this, _$closeButton, {
41
46
  writable: true,
42
47
  value: void 0
43
48
  });
44
49
 
45
- _classPrivateFieldInitSpec(this, _$title, {
50
+ _classPrivateFieldInitSpec(this, _$caption, {
46
51
  writable: true,
47
52
  value: void 0
48
53
  });
49
54
 
50
- _classPrivateFieldInitSpec(this, _$prevActiveElement, {
55
+ _classPrivateFieldInitSpec(this, _isConected, {
51
56
  writable: true,
52
- value: null
57
+ value: false
53
58
  });
54
59
 
55
- _classPrivateFieldInitSpec(this, _focusIn, {
60
+ _classPrivateFieldInitSpec(this, _onCancel, {
56
61
  writable: true,
57
62
  value: e => {
58
- if (e.target === this) {
59
- return;
60
- }
63
+ e.preventDefault();
61
64
 
62
- if (!this.contains(e.target)) {
63
- _classPrivateFieldGet(this, _$closeButton).focus();
64
- }
65
+ _classPrivateMethodGet(this, _dispatchCloseEvent, _dispatchCloseEvent2).call(this);
65
66
  }
66
67
  });
67
68
 
68
- _classPrivateFieldInitSpec(this, _onCloseByMouse, {
69
+ _classPrivateFieldInitSpec(this, _onCloseClick, {
69
70
  writable: true,
70
71
  value: e => {
71
72
  e.stopPropagation();
72
73
 
73
- _classPrivateFieldGet(this, _onClose).call(this);
74
+ _classPrivateMethodGet(this, _dispatchCloseEvent, _dispatchCloseEvent2).call(this);
74
75
  }
75
76
  });
76
77
 
77
- _classPrivateFieldInitSpec(this, _onCloseByEsc, {
78
+ _classPrivateFieldInitSpec(this, _onBackdropClick, {
78
79
  writable: true,
79
80
  value: e => {
80
- switch (e.key) {
81
- case 'Escape':
82
- {
83
- e.preventDefault();
84
- e.stopPropagation();
85
-
86
- _classPrivateFieldGet(this, _onClose).call(this);
81
+ e.stopPropagation();
82
+ const rect = this.dialogRect;
83
+ const isInside = e.x >= rect.x && e.x < rect.x + rect.width && e.y >= rect.y && e.y < rect.y + rect.height;
87
84
 
88
- break;
89
- }
85
+ if (!isInside) {
86
+ _classPrivateMethodGet(this, _dispatchCloseEvent, _dispatchCloseEvent2).call(this);
90
87
  }
91
88
  }
92
89
  });
93
90
 
94
- _classPrivateFieldInitSpec(this, _onClose, {
95
- writable: true,
96
- value: () => {
97
- _classPrivateFieldGet(this, _$prevActiveElement)?.focus();
98
- this.dispatchEvent(new CustomEvent('close', {
99
- bubbles: true
100
- }));
101
- }
102
- });
103
-
104
91
  _classPrivateFieldInitSpec(this, _onCloseReactHandler, {
105
92
  writable: true,
106
93
  value: () => {
@@ -114,69 +101,94 @@ defineCustomElement('sinch-dialog', (_$main = new WeakMap(), _$closeButton = new
114
101
  });
115
102
  shadowRoot.appendChild(template.content.cloneNode(true));
116
103
 
117
- _classPrivateFieldSet(this, _$main, shadowRoot.querySelector('#main'));
104
+ _classPrivateFieldSet(this, _$dialog, shadowRoot.querySelector('dialog'));
118
105
 
119
106
  _classPrivateFieldSet(this, _$closeButton, shadowRoot.querySelector('#close'));
120
107
 
121
- _classPrivateFieldSet(this, _$backDrop, shadowRoot.querySelector('#backdrop'));
108
+ _classPrivateFieldSet(this, _$caption, shadowRoot.querySelector('#caption'));
122
109
 
123
- _classPrivateFieldSet(this, _$title, shadowRoot.querySelector('#title'));
110
+ dialogPolyfill.registerDialog(_classPrivateFieldGet(this, _$dialog));
124
111
  }
125
112
 
126
113
  static get observedAttributes() {
127
- return ['title'];
114
+ return ['caption', 'open'];
128
115
  }
129
116
 
130
117
  attributeChangedCallback(name, _, newVal) {
131
118
  switch (name) {
132
- case 'title':
119
+ case 'caption':
120
+ {
121
+ _classPrivateFieldGet(this, _$caption).textContent = newVal;
122
+ break;
123
+ }
124
+
125
+ case 'open':
133
126
  {
134
- _classPrivateFieldGet(this, _$title).textContent = newVal;
127
+ if (_classPrivateFieldGet(this, _isConected)) {
128
+ _classPrivateMethodGet(this, _setOpen, _setOpen2).call(this, isAttrTrue(newVal));
129
+ }
130
+
135
131
  break;
136
132
  }
137
133
  }
138
134
  }
139
135
 
140
- set title(title) {
141
- updateAttribute(this, 'title', title);
136
+ set caption(caption) {
137
+ updateAttribute(this, 'caption', caption);
142
138
  }
143
139
 
144
- get title() {
145
- return getAttribute(this, 'title', '');
140
+ get caption() {
141
+ return getAttribute(this, 'caption', '');
146
142
  }
147
143
 
148
144
  connectedCallback() {
149
145
  this.setAttribute('role', 'dialog');
150
146
 
151
- _classPrivateFieldSet(this, _$prevActiveElement, document.activeElement);
147
+ _classPrivateFieldGet(this, _$closeButton).addEventListener('click', _classPrivateFieldGet(this, _onCloseClick));
152
148
 
153
- _classPrivateFieldGet(this, _$closeButton).addEventListener('click', _classPrivateFieldGet(this, _onCloseByMouse));
149
+ this.addEventListener('close', _classPrivateFieldGet(this, _onCloseReactHandler));
150
+ this.addEventListener('click', _classPrivateFieldGet(this, _onBackdropClick));
154
151
 
155
- _classPrivateFieldGet(this, _$backDrop).addEventListener('click', _classPrivateFieldGet(this, _onCloseByMouse));
152
+ _classPrivateFieldGet(this, _$dialog).addEventListener('cancel', _classPrivateFieldGet(this, _onCancel));
156
153
 
157
- this.addEventListener('keydown', _classPrivateFieldGet(this, _onCloseByEsc));
158
- this.addEventListener('close', _classPrivateFieldGet(this, _onCloseReactHandler));
159
- document.addEventListener('focusin', _classPrivateFieldGet(this, _focusIn));
154
+ _classPrivateFieldSet(this, _isConected, true);
155
+
156
+ if (getBooleanAttribute(this, 'open')) {
157
+ _classPrivateMethodGet(this, _setOpen, _setOpen2).call(this, true);
158
+ }
160
159
  }
161
160
 
162
161
  disconnectedCallback() {
163
- _classPrivateFieldSet(this, _$prevActiveElement, null);
162
+ _classPrivateFieldGet(this, _$closeButton).removeEventListener('click', _classPrivateFieldGet(this, _onCloseClick));
164
163
 
165
- _classPrivateFieldGet(this, _$closeButton).removeEventListener('click', _classPrivateFieldGet(this, _onCloseByMouse));
164
+ this.removeEventListener('close', _classPrivateFieldGet(this, _onCloseReactHandler));
165
+ this.removeEventListener('click', _classPrivateFieldGet(this, _onBackdropClick));
166
166
 
167
- _classPrivateFieldGet(this, _$backDrop).removeEventListener('click', _classPrivateFieldGet(this, _onCloseByMouse));
167
+ _classPrivateFieldGet(this, _$dialog).removeEventListener('cancel', _classPrivateFieldGet(this, _onCancel));
168
168
 
169
- this.removeEventListener('keydown', _classPrivateFieldGet(this, _onCloseByEsc));
170
- this.removeEventListener('close', _classPrivateFieldGet(this, _onCloseReactHandler));
171
- document.removeEventListener('focusin', _classPrivateFieldGet(this, _focusIn));
169
+ _classPrivateFieldSet(this, _isConected, false);
172
170
  }
173
171
 
174
172
  get dialogRect() {
175
- return getRect(_classPrivateFieldGet(this, _$main));
173
+ return getRect(_classPrivateFieldGet(this, _$dialog));
176
174
  }
177
175
 
178
176
  get closeButtonRect() {
179
177
  return getRect(_classPrivateFieldGet(this, _$closeButton));
180
178
  }
181
179
 
182
- }));
180
+ }));
181
+
182
+ function _dispatchCloseEvent2() {
183
+ this.dispatchEvent(new CustomEvent('close', {
184
+ bubbles: true
185
+ }));
186
+ }
187
+
188
+ function _setOpen2(isOpen) {
189
+ if (isOpen) {
190
+ _classPrivateFieldGet(this, _$dialog).showModal();
191
+ } else {
192
+ _classPrivateFieldGet(this, _$dialog).close();
193
+ }
194
+ }
package/dropdown/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 _$button, _$optionSlot, _$listbox, _$targetElement, _$targetSlot, _onTargetFocusin, _onButtonClick, _onListboxClick, _onListboxKeyPress, _onListboxKeyDown, _onOptionSlotChange, _onTargetSlotChange, _onListboxBlur, _onExpand, _onCollapse, _onValueChange, _getFirstOption, _getLastOption, _getNextOption, _getPrevOption, _selectOption, _getOptionWithValue, _getOptionElements, _getEnabledOptionElements, _dispatchChangeEvent, _focusTargetElement;
4
+ var _$button, _$optionSlot, _$listbox, _onButtonClick, _onListboxClick, _onListboxKeyPress, _onListboxKeyDown, _onOptionSlotChange, _setOpen, _onExpand, _onCollapse, _onValueChange, _getFirstOption, _getLastOption, _getNextOption, _getPrevOption, _selectOption, _getOptionWithValue, _getOptionElements, _getEnabledOptionElements, _dispatchChangeEvent;
5
5
 
6
6
  function _classPrivateMethodInitSpec(obj, privateSet) { _checkPrivateRedeclaration(obj, privateSet); privateSet.add(obj); }
7
7
 
@@ -13,9 +13,9 @@ function _classPrivateMethodGet(receiver, privateSet, fn) { if (!privateSet.has(
13
13
 
14
14
  import { isDropdownOptionElement } from '../dropdown-option';
15
15
  import { attrValueToPixels, defineCustomElement, getAttribute, getBooleanAttribute, getIntegerAttribute, getLiteralAttribute, getRect, updateAttribute, updateBooleanAttribute, updateIntegerAttribute, updateLiteralAttribute } from '../utils';
16
- const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{position:relative;width:100%;box-sizing:border-box}#listbox{display:none;position:absolute;z-index:1;top:0;left:0;width:100%;height:100%;box-sizing:border-box;outline:0}#listbox-body{position:absolute;left:0;top:calc(100% + 8px);min-width:100%;width:max-content;box-sizing:border-box;font:var(--sinch-font-body);color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-100);box-shadow:1px 2px 4px rgb(0 0 0 / 15%);overflow-y:auto;contain:content}:host([orientation=bottom-left]) #listbox-body{left:unset;right:0}:host([orientation=top-right]) #listbox-body{top:-8px;transform:translateY(-100%)}:host([orientation=top-left]) #listbox-body{top:-8px;transform:translateY(-100%);left:unset;right:0}#button[aria-expanded=true]~#listbox{display:block}::slotted(*){display:block}</style><div id="wrapper"><div id="button" aria-haspopup="listbox" aria-expanded="false"><slot name="target"></slot></div><div id="listbox" tabindex="-1"><div id="listbox-body"><slot name="option"></slot></div></div></div>';
16
+ const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{position:relative;width:100%;box-sizing:border-box}dialog{outline:0;border:none;font:var(--sinch-font-body);color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-100);box-shadow:1px 2px 4px rgb(0 0 0 / 15%);overflow-y:auto;contain:content;padding:0;border-radius:4px;cursor:pointer}dialog::backdrop{background-color:transparent}dialog+.backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background-color:transparent}dialog.fixed{position:fixed;top:50%;transform:translate(0,-50%)}._dialog_overlay{position:fixed;top:0;right:0;bottom:0;left:0}::slotted(*){display:block}</style><div id="wrapper"><div id="button" aria-haspopup="listbox" aria-expanded="false"><slot name="target"></slot></div><dialog id="listbox" tabindex="-1"><slot name="option"></slot></dialog></div>';
17
17
  const orientationValues = ['top-left', 'top-right', 'bottom-left', 'bottom-right'];
18
- const ITEM_HEIGHT = 36;
18
+ const ITEM_HEIGHT = 40;
19
19
 
20
20
  const findSelectedOption = elements => {
21
21
  for (const el of elements) {
@@ -29,12 +29,10 @@ const findSelectedOption = elements => {
29
29
 
30
30
  const template = document.createElement('template');
31
31
  template.innerHTML = templateHTML;
32
- defineCustomElement('sinch-dropdown', (_$button = new WeakMap(), _$optionSlot = new WeakMap(), _$listbox = new WeakMap(), _$targetElement = new WeakMap(), _$targetSlot = new WeakMap(), _onTargetFocusin = new WeakMap(), _onButtonClick = new WeakMap(), _onListboxClick = new WeakMap(), _onListboxKeyPress = new WeakMap(), _onListboxKeyDown = new WeakMap(), _onOptionSlotChange = new WeakMap(), _onTargetSlotChange = new WeakMap(), _onListboxBlur = new WeakMap(), _onExpand = new WeakSet(), _onCollapse = new WeakSet(), _onValueChange = new WeakSet(), _getFirstOption = new WeakSet(), _getLastOption = new WeakSet(), _getNextOption = new WeakSet(), _getPrevOption = new WeakSet(), _selectOption = new WeakSet(), _getOptionWithValue = new WeakSet(), _getOptionElements = new WeakSet(), _getEnabledOptionElements = new WeakSet(), _dispatchChangeEvent = new WeakSet(), _focusTargetElement = new WeakSet(), class extends HTMLElement {
32
+ defineCustomElement('sinch-dropdown', (_$button = new WeakMap(), _$optionSlot = new WeakMap(), _$listbox = new WeakMap(), _onButtonClick = new WeakMap(), _onListboxClick = new WeakMap(), _onListboxKeyPress = new WeakMap(), _onListboxKeyDown = new WeakMap(), _onOptionSlotChange = new WeakMap(), _setOpen = new WeakSet(), _onExpand = new WeakSet(), _onCollapse = new WeakSet(), _onValueChange = new WeakSet(), _getFirstOption = new WeakSet(), _getLastOption = new WeakSet(), _getNextOption = new WeakSet(), _getPrevOption = new WeakSet(), _selectOption = new WeakSet(), _getOptionWithValue = new WeakSet(), _getOptionElements = new WeakSet(), _getEnabledOptionElements = new WeakSet(), _dispatchChangeEvent = new WeakSet(), class extends HTMLElement {
33
33
  constructor() {
34
34
  super();
35
35
 
36
- _classPrivateMethodInitSpec(this, _focusTargetElement);
37
-
38
36
  _classPrivateMethodInitSpec(this, _dispatchChangeEvent);
39
37
 
40
38
  _classPrivateMethodInitSpec(this, _getEnabledOptionElements);
@@ -59,6 +57,8 @@ defineCustomElement('sinch-dropdown', (_$button = new WeakMap(), _$optionSlot =
59
57
 
60
58
  _classPrivateMethodInitSpec(this, _onExpand);
61
59
 
60
+ _classPrivateMethodInitSpec(this, _setOpen);
61
+
62
62
  _classPrivateFieldInitSpec(this, _$button, {
63
63
  writable: true,
64
64
  value: void 0
@@ -74,23 +74,6 @@ defineCustomElement('sinch-dropdown', (_$button = new WeakMap(), _$optionSlot =
74
74
  value: void 0
75
75
  });
76
76
 
77
- _classPrivateFieldInitSpec(this, _$targetElement, {
78
- writable: true,
79
- value: null
80
- });
81
-
82
- _classPrivateFieldInitSpec(this, _$targetSlot, {
83
- writable: true,
84
- value: void 0
85
- });
86
-
87
- _classPrivateFieldInitSpec(this, _onTargetFocusin, {
88
- writable: true,
89
- value: e => {
90
- _classPrivateFieldSet(this, _$targetElement, e.target);
91
- }
92
- });
93
-
94
77
  _classPrivateFieldInitSpec(this, _onButtonClick, {
95
78
  writable: true,
96
79
  value: e => {
@@ -117,8 +100,6 @@ defineCustomElement('sinch-dropdown', (_$button = new WeakMap(), _$optionSlot =
117
100
  }
118
101
 
119
102
  _classPrivateMethodGet(this, _onCollapse, _onCollapse2).call(this);
120
-
121
- _classPrivateMethodGet(this, _focusTargetElement, _focusTargetElement2).call(this);
122
103
  }
123
104
  });
124
105
 
@@ -135,8 +116,6 @@ defineCustomElement('sinch-dropdown', (_$button = new WeakMap(), _$optionSlot =
135
116
 
136
117
  _classPrivateMethodGet(this, _onCollapse, _onCollapse2).call(this);
137
118
 
138
- _classPrivateMethodGet(this, _focusTargetElement, _focusTargetElement2).call(this);
139
-
140
119
  break;
141
120
  }
142
121
  }
@@ -173,8 +152,6 @@ defineCustomElement('sinch-dropdown', (_$button = new WeakMap(), _$optionSlot =
173
152
 
174
153
  _classPrivateMethodGet(this, _onCollapse, _onCollapse2).call(this);
175
154
 
176
- _classPrivateMethodGet(this, _focusTargetElement, _focusTargetElement2).call(this);
177
-
178
155
  break;
179
156
  }
180
157
  }
@@ -190,22 +167,6 @@ defineCustomElement('sinch-dropdown', (_$button = new WeakMap(), _$optionSlot =
190
167
  }
191
168
  });
192
169
 
193
- _classPrivateFieldInitSpec(this, _onTargetSlotChange, {
194
- writable: true,
195
- value: () => {
196
- _classPrivateFieldSet(this, _$targetElement, null);
197
- }
198
- });
199
-
200
- _classPrivateFieldInitSpec(this, _onListboxBlur, {
201
- writable: true,
202
- value: e => {
203
- e.stopPropagation();
204
-
205
- _classPrivateMethodGet(this, _onCollapse, _onCollapse2).call(this);
206
- }
207
- });
208
-
209
170
  const shadowRoot = this.attachShadow({
210
171
  mode: 'closed',
211
172
  delegatesFocus: true
@@ -217,8 +178,6 @@ defineCustomElement('sinch-dropdown', (_$button = new WeakMap(), _$optionSlot =
217
178
  _classPrivateFieldSet(this, _$listbox, shadowRoot.querySelector('#listbox'));
218
179
 
219
180
  _classPrivateFieldSet(this, _$optionSlot, shadowRoot.querySelector('slot[name="option"]'));
220
-
221
- _classPrivateFieldSet(this, _$targetSlot, shadowRoot.querySelector('slot[name="target"]'));
222
181
  }
223
182
 
224
183
  connectedCallback() {
@@ -226,10 +185,6 @@ defineCustomElement('sinch-dropdown', (_$button = new WeakMap(), _$optionSlot =
226
185
 
227
186
  _classPrivateFieldGet(this, _$button).addEventListener('click', _classPrivateFieldGet(this, _onButtonClick));
228
187
 
229
- _classPrivateFieldGet(this, _$button).addEventListener('focusin', _classPrivateFieldGet(this, _onTargetFocusin));
230
-
231
- _classPrivateFieldGet(this, _$listbox).addEventListener('blur', _classPrivateFieldGet(this, _onListboxBlur));
232
-
233
188
  _classPrivateFieldGet(this, _$listbox).addEventListener('click', _classPrivateFieldGet(this, _onListboxClick));
234
189
 
235
190
  _classPrivateFieldGet(this, _$listbox).addEventListener('keydown', _classPrivateFieldGet(this, _onListboxKeyDown));
@@ -237,17 +192,11 @@ defineCustomElement('sinch-dropdown', (_$button = new WeakMap(), _$optionSlot =
237
192
  _classPrivateFieldGet(this, _$listbox).addEventListener('keypress', _classPrivateFieldGet(this, _onListboxKeyPress));
238
193
 
239
194
  _classPrivateFieldGet(this, _$optionSlot).addEventListener('slotchange', _classPrivateFieldGet(this, _onOptionSlotChange));
240
-
241
- _classPrivateFieldGet(this, _$targetSlot).addEventListener('slotchange', _classPrivateFieldGet(this, _onTargetSlotChange));
242
195
  }
243
196
 
244
197
  disconnectedCallback() {
245
198
  _classPrivateFieldGet(this, _$button).removeEventListener('click', _classPrivateFieldGet(this, _onButtonClick));
246
199
 
247
- _classPrivateFieldGet(this, _$button).removeEventListener('focusin', _classPrivateFieldGet(this, _onTargetFocusin));
248
-
249
- _classPrivateFieldGet(this, _$listbox).removeEventListener('blur', _classPrivateFieldGet(this, _onListboxBlur));
250
-
251
200
  _classPrivateFieldGet(this, _$listbox).removeEventListener('click', _classPrivateFieldGet(this, _onListboxClick));
252
201
 
253
202
  _classPrivateFieldGet(this, _$listbox).removeEventListener('keydown', _classPrivateFieldGet(this, _onListboxKeyDown));
@@ -255,8 +204,6 @@ defineCustomElement('sinch-dropdown', (_$button = new WeakMap(), _$optionSlot =
255
204
  _classPrivateFieldGet(this, _$listbox).removeEventListener('keypress', _classPrivateFieldGet(this, _onListboxKeyPress));
256
205
 
257
206
  _classPrivateFieldGet(this, _$optionSlot).removeEventListener('slotchange', _classPrivateFieldGet(this, _onOptionSlotChange));
258
-
259
- _classPrivateFieldGet(this, _$targetSlot).removeEventListener('slotchange', _classPrivateFieldGet(this, _onTargetSlotChange));
260
207
  }
261
208
 
262
209
  static get observedAttributes() {
@@ -300,7 +247,7 @@ defineCustomElement('sinch-dropdown', (_$button = new WeakMap(), _$optionSlot =
300
247
  }
301
248
 
302
249
  get dropdownRect() {
303
- return getRect(_classPrivateFieldGet(this, _$listbox).firstElementChild);
250
+ return getRect(_classPrivateFieldGet(this, _$listbox));
304
251
  }
305
252
 
306
253
  attributeChangedCallback(name, oldVal, newVal) {
@@ -314,39 +261,80 @@ defineCustomElement('sinch-dropdown', (_$button = new WeakMap(), _$optionSlot =
314
261
 
315
262
  case 'maxvisibleitems':
316
263
  {
317
- const $list = _classPrivateFieldGet(this, _$listbox).firstElementChild;
264
+ const $list = _classPrivateFieldGet(this, _$listbox);
265
+
266
+ if (newVal === '0') {
267
+ $list.style.maxHeight = 'unset';
268
+ } else {
269
+ $list.style.maxHeight = attrValueToPixels(newVal, {
270
+ min: 2,
271
+ multiplier: ITEM_HEIGHT
272
+ });
273
+ }
318
274
 
319
- $list.style.maxHeight = attrValueToPixels(newVal, {
320
- min: 2,
321
- multiplier: ITEM_HEIGHT
322
- });
323
275
  break;
324
276
  }
325
277
  }
326
278
  }
327
279
 
328
- focus() {
329
- _classPrivateMethodGet(this, _focusTargetElement, _focusTargetElement2).call(this);
330
- }
331
-
332
- blur() {
333
- _classPrivateFieldGet(this, _$button).blur();
280
+ focus() {}
334
281
 
335
- _classPrivateFieldGet(this, _$listbox).blur();
336
- }
282
+ blur() {}
337
283
 
338
284
  }));
339
285
 
286
+ function _setOpen2(isOpen) {
287
+ if (isOpen) {
288
+ _classPrivateFieldGet(this, _$listbox).showModal();
289
+ } else {
290
+ _classPrivateFieldGet(this, _$listbox).close();
291
+ }
292
+ }
293
+
340
294
  function _onExpand2() {
341
295
  _classPrivateFieldGet(this, _$button).setAttribute('aria-expanded', 'true');
342
296
 
343
- _classPrivateFieldGet(this, _$listbox).focus();
297
+ _classPrivateMethodGet(this, _setOpen, _setOpen2).call(this, true);
298
+
299
+ const buttonRect = _classPrivateFieldGet(this, _$button).getBoundingClientRect();
300
+
301
+ const modalRect = _classPrivateFieldGet(this, _$listbox).getBoundingClientRect();
302
+
303
+ const width = Math.max(modalRect.width, buttonRect.width);
304
+ const widthDiff = Math.max(buttonRect.width - modalRect.width, 0);
305
+ let leftOffset = 0;
306
+ let topOffset = 0;
307
+ const orient = this.orientation;
308
+
309
+ if (orient === 'bottom-right' || orient === 'top-right') {
310
+ leftOffset = Math.min(modalRect.x, Math.max(-modalRect.x, buttonRect.x - modalRect.x + widthDiff * 0.5));
311
+ }
312
+
313
+ if (orient === 'bottom-left' || orient === 'top-left') {
314
+ leftOffset = Math.min(modalRect.x, Math.max(-modalRect.x, buttonRect.x + buttonRect.width - modalRect.x - modalRect.width - widthDiff * 0.5));
315
+ }
316
+
317
+ if (orient === 'bottom-left' || orient === 'bottom-right') {
318
+ topOffset = Math.min(modalRect.y, Math.max(-modalRect.y, buttonRect.y + buttonRect.height - modalRect.y + 8));
319
+ }
320
+
321
+ if (orient === 'top-left' || orient === 'top-right') {
322
+ topOffset = Math.min(modalRect.y, Math.max(-modalRect.y, buttonRect.y - modalRect.y - modalRect.height - 8));
323
+ }
324
+
325
+ _classPrivateFieldGet(this, _$listbox).style.transform = `translateX(${leftOffset}px) translateY(${topOffset}px)`;
326
+ _classPrivateFieldGet(this, _$listbox).style.width = `${width}px`;
344
327
 
345
328
  _classPrivateMethodGet(this, _selectOption, _selectOption2).call(this, _classPrivateMethodGet(this, _getOptionWithValue, _getOptionWithValue2).call(this, this.value) ?? _classPrivateMethodGet(this, _getFirstOption, _getFirstOption2).call(this));
346
329
  }
347
330
 
348
331
  function _onCollapse2() {
349
332
  _classPrivateFieldGet(this, _$button).setAttribute('aria-expanded', 'false');
333
+
334
+ _classPrivateMethodGet(this, _setOpen, _setOpen2).call(this, false);
335
+
336
+ _classPrivateFieldGet(this, _$listbox).style.transform = `initial`;
337
+ _classPrivateFieldGet(this, _$listbox).style.width = `max-content`;
350
338
  }
351
339
 
352
340
  function _onValueChange2(value) {
@@ -440,12 +428,4 @@ function _dispatchChangeEvent2($opt) {
440
428
  bubbles: true
441
429
  }));
442
430
  }
443
- }
444
-
445
- function _focusTargetElement2() {
446
- const el = _classPrivateFieldGet(this, _$targetElement);
447
-
448
- _classPrivateFieldSet(this, _$targetElement, null);
449
-
450
- el?.focus();
451
431
  }
package/dropdown-option/index.js CHANGED
@@ -6,7 +6,7 @@ function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedec
6
6
  function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
7
7
 
8
8
  import { defineCustomElement, getAttribute, getBooleanAttribute, isAttrTrue, updateAttribute, updateBooleanAttribute } from '../utils';
9
- const templateHTML = '<style>:host{display:block}*{pointer-events:none}#wrapper{display:flex;position:relative;box-sizing:border-box;height:40px;padding:6px 12px;width:100%;align-items:center;gap:12px;--sinch-size-icon:24px}#content{flex-shrink:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host(:hover)>#wrapper,:host([data-selected])>#wrapper{background-color:var(--sinch-color-snow-500)}:host([checked])>#wrapper{padding-right:36px}:host([checked])>#wrapper::after{content:"";position:absolute;top:10px;right:11px;width:18px;height:14px;background-image:url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cpath d=\'M6 11.17 1.83 7 .41 8.41 6 14 18 2 16.59.59 6 11.17Z\' fill=\'%230A273D\'/%3E%3C/svg%3E");background-size:cover;background-repeat:no-repeat}:host([disabled]:not([disabled=false]))>#wrapper{color:var(--sinch-color-stormy-100);--sinch-color-icon:var(--sinch-color-stormy-100)}</style><div id="wrapper"><slot name="icon"></slot><span id="content"></span></div>';
9
+ const templateHTML = '<style>:host{display:block}*{pointer-events:none}#wrapper{display:flex;position:relative;box-sizing:border-box;height:40px;padding:6px 12px;width:100%;align-items:center;gap:12px;--sinch-size-icon:24px}#content{flex-shrink:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host(:hover)>#wrapper,:host([data-selected])>#wrapper{background-color:var(--sinch-color-snow-500)}:host([checked])>#wrapper{padding-right:36px}:host([checked])>#wrapper::after{content:"";position:absolute;top:12px;right:11px;width:18px;height:14px;background-image:url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cpath d=\'M6 11.17 1.83 7 .41 8.41 6 14 18 2 16.59.59 6 11.17Z\' fill=\'%230A273D\'/%3E%3C/svg%3E");background-size:cover;background-repeat:no-repeat}:host([disabled]:not([disabled=false]))>#wrapper{color:var(--sinch-color-stormy-100);--sinch-color-icon:var(--sinch-color-stormy-100)}</style><div id="wrapper"><slot name="icon"></slot><span id="content"></span></div>';
10
10
  const template = document.createElement('template');
11
11
  template.innerHTML = templateHTML;
12
12
 
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.15.0",
3
+ "version": "0.16.1",
4
4
  "files": [
5
5
  "theme.css",
6
6
  "**/*/*.js",
@@ -17,7 +17,8 @@
17
17
  "postbuild": "tsc"
18
18
  },
19
19
  "dependencies": {
20
- "@babel/runtime": "^7.17.0"
20
+ "@babel/runtime": "^7.17.0",
21
+ "dialog-polyfill": "^0.5.6"
21
22
  },
22
23
  "devDependencies": {
23
24
  "@babel/cli": "^7.17.0",
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() {