@nectary/components 0.38.0 → 0.40.0

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 (148) hide show
  1. package/accordion/index.js +47 -84
  2. package/accordion/types.d.ts +1 -0
  3. package/accordion-item/index.js +26 -53
  4. package/action-menu/index.d.ts +0 -1
  5. package/action-menu/index.js +179 -223
  6. package/action-menu/types.d.ts +8 -18
  7. package/action-menu-option/index.d.ts +1 -0
  8. package/action-menu-option/index.js +51 -62
  9. package/action-menu-option/types.d.ts +9 -0
  10. package/action-menu-option/utils.d.ts +2 -0
  11. package/action-menu-option/utils.js +3 -0
  12. package/alert/index.js +6 -20
  13. package/avatar/index.js +12 -31
  14. package/avatar-badge/index.js +8 -22
  15. package/avatar-status/index.js +1 -1
  16. package/button/index.js +42 -92
  17. package/card/index.d.ts +2 -0
  18. package/card/index.js +24 -87
  19. package/chat-avatar/index.js +8 -22
  20. package/chat-block/index.js +29 -69
  21. package/chat-bubble/index.js +6 -20
  22. package/checkbox/index.js +55 -107
  23. package/chip/index.d.ts +13 -0
  24. package/chip/index.js +137 -0
  25. package/chip/types.d.ts +38 -0
  26. package/color-menu/index.d.ts +13 -0
  27. package/color-menu/index.js +464 -0
  28. package/color-menu/types.d.ts +37 -0
  29. package/color-swatch/index.d.ts +13 -0
  30. package/color-swatch/index.js +59 -0
  31. package/color-swatch/types.d.ts +12 -0
  32. package/colors.json +57 -49
  33. package/date-picker/index.js +196 -287
  34. package/date-picker/types.d.ts +25 -1
  35. package/dialog/index.d.ts +1 -0
  36. package/dialog/index.js +72 -143
  37. package/dropdown-checkbox-option/index.js +6 -20
  38. package/dropdown-radio-option/index.js +6 -20
  39. package/field/index.js +25 -63
  40. package/file-drop/index.js +123 -200
  41. package/file-picker/index.d.ts +0 -1
  42. package/file-picker/index.js +55 -108
  43. package/file-status/index.js +15 -39
  44. package/help-tooltip/index.js +1 -1
  45. package/horizontal-stepper/index.js +33 -59
  46. package/horizontal-stepper-item/index.js +13 -37
  47. package/icon-button/index.js +39 -84
  48. package/icons-channel/notify/index.d.ts +11 -0
  49. package/icons-channel/notify/index.js +4 -0
  50. package/illustrations/create-illustration-class.js +1 -1
  51. package/inline-alert/index.js +30 -82
  52. package/input/index.js +113 -222
  53. package/link/index.js +46 -96
  54. package/list-item/index.js +1 -1
  55. package/package.json +12 -14
  56. package/pagination/index.js +109 -163
  57. package/pagination/types.d.ts +1 -0
  58. package/popover/index.js +224 -294
  59. package/progress/index.js +9 -28
  60. package/radio/index.js +103 -169
  61. package/radio/types.d.ts +1 -0
  62. package/radio-option/index.js +24 -48
  63. package/segment/index.js +50 -131
  64. package/segment-collapse/index.js +24 -49
  65. package/segment-collapse/types.d.ts +1 -0
  66. package/segmented-control/index.js +36 -73
  67. package/segmented-control/types.d.ts +1 -0
  68. package/segmented-control-option/index.js +41 -87
  69. package/segmented-icon-control/index.js +47 -84
  70. package/segmented-icon-control/types.d.ts +1 -0
  71. package/segmented-icon-control-option/index.js +38 -79
  72. package/select-button/index.d.ts +13 -0
  73. package/select-button/index.js +153 -0
  74. package/select-button/types.d.ts +43 -0
  75. package/select-menu/index.d.ts +11 -0
  76. package/select-menu/index.js +346 -0
  77. package/select-menu/types.d.ts +29 -0
  78. package/{dropdown-text-option → select-menu-option}/index.d.ts +5 -7
  79. package/select-menu-option/index.js +76 -0
  80. package/{select-option → select-menu-option}/types.d.ts +8 -9
  81. package/stop-events/index.js +7 -20
  82. package/table-head-cell/index.js +7 -21
  83. package/tabs/index.js +103 -165
  84. package/tabs/types.d.ts +1 -0
  85. package/tabs-option/index.js +20 -44
  86. package/tag/index.d.ts +1 -1
  87. package/tag/index.js +42 -36
  88. package/tag/types.d.ts +13 -7
  89. package/textarea/index.js +92 -167
  90. package/theme.css +80 -49
  91. package/tile-control/index.js +55 -96
  92. package/tile-control-option/index.js +40 -86
  93. package/time-picker/index.js +224 -368
  94. package/time-picker/types.d.ts +5 -1
  95. package/title/index.js +6 -20
  96. package/toast/index.d.ts +17 -0
  97. package/toast/index.js +115 -0
  98. package/toast/types.d.ts +28 -0
  99. package/toast/utils.d.ts +5 -0
  100. package/toast/utils.js +6 -0
  101. package/toast-manager/index.d.ts +17 -0
  102. package/toast-manager/index.js +195 -0
  103. package/toast-manager/types.d.ts +7 -0
  104. package/toggle/index.js +55 -108
  105. package/toggle/types.d.ts +1 -0
  106. package/types.d.ts +7 -0
  107. package/utils/colors.d.ts +10 -0
  108. package/utils/colors.js +121 -0
  109. package/{utils.d.ts → utils/index.d.ts} +18 -9
  110. package/{utils.js → utils/index.js} +118 -39
  111. package/vertical-stepper/index.js +29 -50
  112. package/vertical-stepper-item/index.js +13 -37
  113. package/card-button/index.d.ts +0 -11
  114. package/card-button/index.js +0 -77
  115. package/card-button/types.d.ts +0 -12
  116. package/card-link/index.d.ts +0 -12
  117. package/card-link/index.js +0 -115
  118. package/card-link/types.d.ts +0 -14
  119. package/dropdown/index.d.ts +0 -12
  120. package/dropdown/index.js +0 -415
  121. package/dropdown/types.d.ts +0 -30
  122. package/dropdown-text-option/index.js +0 -104
  123. package/dropdown-text-option/types.d.ts +0 -16
  124. package/search/index.d.ts +0 -14
  125. package/search/index.js +0 -523
  126. package/search/types.d.ts +0 -25
  127. package/search-option/index.d.ts +0 -11
  128. package/search-option/index.js +0 -55
  129. package/search-option/types.d.ts +0 -9
  130. package/select/index.d.ts +0 -13
  131. package/select/index.js +0 -316
  132. package/select/types.d.ts +0 -53
  133. package/select-option/index.d.ts +0 -11
  134. package/select-option/index.js +0 -8
  135. package/tag/utils.d.ts +0 -2
  136. package/tag/utils.js +0 -1
  137. package/tag-close/index.d.ts +0 -12
  138. package/tag-close/index.js +0 -38
  139. package/tag-close/types.d.ts +0 -3
  140. package/tag-close/types.js +0 -1
  141. /package/{card-button → chip}/types.js +0 -0
  142. /package/{card-link → color-menu}/types.js +0 -0
  143. /package/{dropdown-text-option → color-swatch}/types.js +0 -0
  144. /package/{dropdown → select-button}/types.js +0 -0
  145. /package/{search → select-menu}/types.js +0 -0
  146. /package/{search-option → select-menu-option}/types.js +0 -0
  147. /package/{select → toast}/types.js +0 -0
  148. /package/{select-option → toast-manager}/types.js +0 -0
package/search/index.js DELETED
@@ -1,523 +0,0 @@
1
- import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
2
- import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
3
-
4
- var _$label, _$input, _selectionStart, _selectionEnd, _$optionSlot, _$listbox, _$clear, _isPendingDk, _sh, _onCompositionStart, _onInput, _onValueChange, _onClearMouseDown, _onClear, _onInputFocus, _onInputBlur, _onListboxClick, _onListboxKeyUp, _onListboxKeyDown, _onOptionSlotChange, _onExpand, _onCollapse, _getFirstOption, _getLastOption, _getNextOption, _getPrevOption, _selectOption, _findSelectedOption;
5
-
6
- function _classPrivateMethodInitSpec(obj, privateSet) { _checkPrivateRedeclaration(obj, privateSet); privateSet.add(obj); }
7
-
8
- function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
9
-
10
- function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
11
-
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 { attrValueToPixels, defineCustomElement, getAttribute, getBooleanAttribute, getIntegerAttribute, getRect, NectaryElement, updateAttribute, updateBooleanAttribute, updateIntegerAttribute } from '../utils';
15
- const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{position:relative;width:100%;box-sizing:border-box;--sinch-size-icon:24px}#label{display:none;font:var(--sinch-font-title-s);color:var(--sinch-color-text-default);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%;height:24px;margin-bottom:2px}#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%;height:48px;padding:0 44px;padding-right:12px;font:var(--sinch-font-body);color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-100)}#input::placeholder{font:var(--sinch-font-body);color:var(--sinch-color-text-muted);opacity:1}#input:focus{border-color:var(--sinch-color-stormy-600)}#icon-search{position:absolute;left:12px;top:12px;pointer-events:none;--sinch-color-icon:var(--sinch-color-stormy-500)}#clear{position:absolute;right:8px;top:8px;display:none;--sinch-color-icon:red}#clear:focus{--sinch-color-icon:var(--sinch-color-stormy-500)}:host([value]:not([value=""])) #clear{display:flex}:host([value]:not([value=""])) #input{padding-right:44px}#listbox{display:none;position:absolute;z-index:1;left:0;top:calc(100% + 8px);width:100%;box-sizing:border-box;font:var(--sinch-font-body);color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-100);box-shadow:var(--sinch-elevation-level-2);overflow-y:auto}:host([aria-expanded=true]) #listbox{display:block}:host([label]:not([label=""])) #label{display:block}</style><label id="label" for="input"></label><div id="wrapper"><input id="input" type="text"/><sinch-icon-search id="icon-search"></sinch-icon-search><sinch-icon-button id="clear" small><sinch-icon-close id="icon-close" slot="icon"></sinch-icon-close></sinch-icon-button><div id="listbox"><slot name="option"></slot></div></div>';
16
- import '../icons/search';
17
- import '../icons/close';
18
- import '../icon-button';
19
- const ITEM_HEIGHT = 40;
20
- const template = document.createElement('template');
21
- template.innerHTML = templateHTML;
22
- defineCustomElement('sinch-search', (_$label = new WeakMap(), _$input = new WeakMap(), _selectionStart = new WeakMap(), _selectionEnd = new WeakMap(), _$optionSlot = new WeakMap(), _$listbox = new WeakMap(), _$clear = new WeakMap(), _isPendingDk = new WeakMap(), _sh = new WeakMap(), _onCompositionStart = new WeakMap(), _onInput = new WeakMap(), _onValueChange = new WeakSet(), _onClearMouseDown = new WeakMap(), _onClear = new WeakMap(), _onInputFocus = new WeakMap(), _onInputBlur = new WeakMap(), _onListboxClick = new WeakMap(), _onListboxKeyUp = new WeakMap(), _onListboxKeyDown = new WeakMap(), _onOptionSlotChange = new WeakMap(), _onExpand = new WeakSet(), _onCollapse = new WeakSet(), _getFirstOption = new WeakSet(), _getLastOption = new WeakSet(), _getNextOption = new WeakSet(), _getPrevOption = new WeakSet(), _selectOption = new WeakSet(), _findSelectedOption = new WeakSet(), class extends NectaryElement {
23
- constructor() {
24
- super();
25
-
26
- _classPrivateMethodInitSpec(this, _findSelectedOption);
27
-
28
- _classPrivateMethodInitSpec(this, _selectOption);
29
-
30
- _classPrivateMethodInitSpec(this, _getPrevOption);
31
-
32
- _classPrivateMethodInitSpec(this, _getNextOption);
33
-
34
- _classPrivateMethodInitSpec(this, _getLastOption);
35
-
36
- _classPrivateMethodInitSpec(this, _getFirstOption);
37
-
38
- _classPrivateMethodInitSpec(this, _onCollapse);
39
-
40
- _classPrivateMethodInitSpec(this, _onExpand);
41
-
42
- _classPrivateMethodInitSpec(this, _onValueChange);
43
-
44
- _classPrivateFieldInitSpec(this, _$label, {
45
- writable: true,
46
- value: void 0
47
- });
48
-
49
- _classPrivateFieldInitSpec(this, _$input, {
50
- writable: true,
51
- value: void 0
52
- });
53
-
54
- _classPrivateFieldInitSpec(this, _selectionStart, {
55
- writable: true,
56
- value: null
57
- });
58
-
59
- _classPrivateFieldInitSpec(this, _selectionEnd, {
60
- writable: true,
61
- value: null
62
- });
63
-
64
- _classPrivateFieldInitSpec(this, _$optionSlot, {
65
- writable: true,
66
- value: void 0
67
- });
68
-
69
- _classPrivateFieldInitSpec(this, _$listbox, {
70
- writable: true,
71
- value: void 0
72
- });
73
-
74
- _classPrivateFieldInitSpec(this, _$clear, {
75
- writable: true,
76
- value: void 0
77
- });
78
-
79
- _classPrivateFieldInitSpec(this, _isPendingDk, {
80
- writable: true,
81
- value: false
82
- });
83
-
84
- _classPrivateFieldInitSpec(this, _sh, {
85
- writable: true,
86
- value: void 0
87
- });
88
-
89
- _classPrivateFieldInitSpec(this, _onCompositionStart, {
90
- writable: true,
91
- value: () => {
92
- _classPrivateFieldSet(this, _isPendingDk, true);
93
- }
94
- });
95
-
96
- _classPrivateFieldInitSpec(this, _onInput, {
97
- writable: true,
98
- value: e => {
99
- e.stopPropagation();
100
-
101
- _classPrivateMethodGet(this, _onValueChange, _onValueChange2).call(this, _classPrivateFieldGet(this, _$input).value, true);
102
- }
103
- });
104
-
105
- _classPrivateFieldInitSpec(this, _onClearMouseDown, {
106
- writable: true,
107
- value: e => {
108
- e.preventDefault();
109
- }
110
- });
111
-
112
- _classPrivateFieldInitSpec(this, _onClear, {
113
- writable: true,
114
- value: e => {
115
- e.stopPropagation();
116
-
117
- _classPrivateMethodGet(this, _onValueChange, _onValueChange2).call(this, '');
118
-
119
- _classPrivateFieldGet(this, _$input).focus();
120
- }
121
- });
122
-
123
- _classPrivateFieldInitSpec(this, _onInputFocus, {
124
- writable: true,
125
- value: () => {
126
- _classPrivateMethodGet(this, _onExpand, _onExpand2).call(this);
127
- }
128
- });
129
-
130
- _classPrivateFieldInitSpec(this, _onInputBlur, {
131
- writable: true,
132
- value: () => {
133
- _classPrivateMethodGet(this, _onCollapse, _onCollapse2).call(this);
134
- }
135
- });
136
-
137
- _classPrivateFieldInitSpec(this, _onListboxClick, {
138
- writable: true,
139
- value: e => {
140
- e.stopPropagation();
141
- const $elem = e.target;
142
-
143
- _classPrivateMethodGet(this, _onValueChange, _onValueChange2).call(this, $elem.text);
144
-
145
- _classPrivateMethodGet(this, _onCollapse, _onCollapse2).call(this);
146
- }
147
- });
148
-
149
- _classPrivateFieldInitSpec(this, _onListboxKeyUp, {
150
- writable: true,
151
- value: e => {
152
- switch (e.code) {
153
- case 'Enter':
154
- {
155
- e.preventDefault();
156
-
157
- const $opt = _classPrivateMethodGet(this, _findSelectedOption, _findSelectedOption2).call(this);
158
-
159
- if ($opt != null) {
160
- _classPrivateMethodGet(this, _onValueChange, _onValueChange2).call(this, $opt.text);
161
- }
162
-
163
- _classPrivateMethodGet(this, _onCollapse, _onCollapse2).call(this);
164
-
165
- break;
166
- }
167
- }
168
- }
169
- });
170
-
171
- _classPrivateFieldInitSpec(this, _onListboxKeyDown, {
172
- writable: true,
173
- value: e => {
174
- switch (e.code) {
175
- case 'ArrowUp':
176
- {
177
- e.preventDefault();
178
- e.stopPropagation();
179
-
180
- _classPrivateMethodGet(this, _selectOption, _selectOption2).call(this, _classPrivateMethodGet(this, _getPrevOption, _getPrevOption2).call(this));
181
-
182
- break;
183
- }
184
-
185
- case 'ArrowDown':
186
- {
187
- e.preventDefault();
188
- e.stopPropagation();
189
-
190
- _classPrivateMethodGet(this, _selectOption, _selectOption2).call(this, _classPrivateMethodGet(this, _getNextOption, _getNextOption2).call(this));
191
-
192
- break;
193
- }
194
-
195
- case 'Escape':
196
- {
197
- e.preventDefault();
198
-
199
- _classPrivateMethodGet(this, _onCollapse, _onCollapse2).call(this);
200
-
201
- break;
202
- }
203
- }
204
- }
205
- });
206
-
207
- _classPrivateFieldInitSpec(this, _onOptionSlotChange, {
208
- writable: true,
209
- value: () => {
210
- const $opts = _classPrivateFieldGet(this, _$optionSlot).assignedElements();
211
-
212
- if ($opts.length === 0) {
213
- return _classPrivateMethodGet(this, _onCollapse, _onCollapse2).call(this);
214
- }
215
-
216
- _classPrivateMethodGet(this, _onExpand, _onExpand2).call(this);
217
- }
218
- });
219
-
220
- const shadowRoot = this.attachShadow();
221
- shadowRoot.appendChild(template.content.cloneNode(true));
222
-
223
- _classPrivateFieldSet(this, _sh, shadowRoot);
224
-
225
- _classPrivateFieldSet(this, _$input, shadowRoot.querySelector('#input'));
226
-
227
- _classPrivateFieldSet(this, _$label, shadowRoot.querySelector('#label'));
228
-
229
- _classPrivateFieldSet(this, _$listbox, shadowRoot.querySelector('#listbox'));
230
-
231
- _classPrivateFieldSet(this, _$optionSlot, shadowRoot.querySelector('slot[name="option"]'));
232
-
233
- _classPrivateFieldSet(this, _$clear, shadowRoot.querySelector('#clear'));
234
- }
235
-
236
- connectedCallback() {
237
- this.setAttribute('role', 'listbox');
238
- this.setAttribute('autocomplete', 'off');
239
- this.setAttribute('aria-expanded', 'false');
240
-
241
- _classPrivateFieldGet(this, _$input).addEventListener('input', _classPrivateFieldGet(this, _onInput));
242
-
243
- _classPrivateFieldGet(this, _$input).addEventListener('compositionstart', _classPrivateFieldGet(this, _onCompositionStart));
244
-
245
- _classPrivateFieldGet(this, _$input).addEventListener('focus', _classPrivateFieldGet(this, _onInputFocus));
246
-
247
- _classPrivateFieldGet(this, _$input).addEventListener('blur', _classPrivateFieldGet(this, _onInputBlur));
248
-
249
- _classPrivateFieldGet(this, _$input).addEventListener('keydown', _classPrivateFieldGet(this, _onListboxKeyDown));
250
-
251
- _classPrivateFieldGet(this, _$input).addEventListener('keyup', _classPrivateFieldGet(this, _onListboxKeyUp));
252
-
253
- _classPrivateFieldGet(this, _$listbox).addEventListener('mousedown', _classPrivateFieldGet(this, _onListboxClick));
254
-
255
- _classPrivateFieldGet(this, _$optionSlot).addEventListener('slotchange', _classPrivateFieldGet(this, _onOptionSlotChange));
256
-
257
- _classPrivateFieldGet(this, _$clear).addEventListener('mousedown', _classPrivateFieldGet(this, _onClearMouseDown));
258
-
259
- _classPrivateFieldGet(this, _$clear).addEventListener('click', _classPrivateFieldGet(this, _onClear));
260
- }
261
-
262
- disconnectedCallback() {
263
- _classPrivateFieldGet(this, _$input).removeEventListener('input', _classPrivateFieldGet(this, _onInput));
264
-
265
- _classPrivateFieldGet(this, _$input).removeEventListener('compositionstart', _classPrivateFieldGet(this, _onCompositionStart));
266
-
267
- _classPrivateFieldGet(this, _$input).removeEventListener('focus', _classPrivateFieldGet(this, _onInputFocus));
268
-
269
- _classPrivateFieldGet(this, _$input).removeEventListener('blur', _classPrivateFieldGet(this, _onInputBlur));
270
-
271
- _classPrivateFieldGet(this, _$input).removeEventListener('keydown', _classPrivateFieldGet(this, _onListboxKeyDown));
272
-
273
- _classPrivateFieldGet(this, _$input).removeEventListener('keyup', _classPrivateFieldGet(this, _onListboxKeyUp));
274
-
275
- _classPrivateFieldGet(this, _$listbox).removeEventListener('mousedown', _classPrivateFieldGet(this, _onListboxClick));
276
-
277
- _classPrivateFieldGet(this, _$optionSlot).removeEventListener('slotchange', _classPrivateFieldGet(this, _onOptionSlotChange));
278
-
279
- _classPrivateFieldGet(this, _$clear).removeEventListener('mousedown', _classPrivateFieldGet(this, _onClearMouseDown));
280
-
281
- _classPrivateFieldGet(this, _$clear).removeEventListener('click', _classPrivateFieldGet(this, _onClear));
282
- }
283
-
284
- static get observedAttributes() {
285
- return ['label', 'value', 'placeholder', 'maxvisibleitems', 'clear-aria-label'];
286
- }
287
-
288
- get type() {
289
- return 'text';
290
- }
291
-
292
- get nodeName() {
293
- return 'input';
294
- }
295
-
296
- set value(value) {
297
- updateAttribute(this, 'value', value);
298
- }
299
-
300
- get value() {
301
- return getAttribute(this, 'value', '');
302
- }
303
-
304
- set placeholder(value) {
305
- updateAttribute(this, 'placeholder', value);
306
- }
307
-
308
- get placeholder() {
309
- return getAttribute(this, 'placeholder', null);
310
- }
311
-
312
- set label(value) {
313
- updateAttribute(this, 'label', value);
314
- }
315
-
316
- get label() {
317
- return getAttribute(this, 'label', null);
318
- }
319
-
320
- set maxVisibleItems(value) {
321
- updateIntegerAttribute(this, 'maxvisibleitems', value);
322
- }
323
-
324
- get maxVisibleItems() {
325
- return getIntegerAttribute(this, 'maxvisibleitems', null);
326
- }
327
-
328
- get dropdownRect() {
329
- return getRect(_classPrivateFieldGet(this, _$listbox));
330
- }
331
-
332
- get selectionStart() {
333
- return _classPrivateFieldGet(this, _$input).selectionStart;
334
- }
335
-
336
- set selectionStart(value) {
337
- _classPrivateFieldGet(this, _$input).selectionStart = value;
338
- }
339
-
340
- get selectionEnd() {
341
- return _classPrivateFieldGet(this, _$input).selectionEnd;
342
- }
343
-
344
- set selectionEnd(value) {
345
- _classPrivateFieldGet(this, _$input).selectionEnd = value;
346
- }
347
-
348
- get selectionDirection() {
349
- return _classPrivateFieldGet(this, _$input).selectionDirection;
350
- }
351
-
352
- set selectionDirection(value) {
353
- _classPrivateFieldGet(this, _$input).selectionDirection = value;
354
- }
355
-
356
- attributeChangedCallback(name, oldVal, newVal) {
357
- switch (name) {
358
- case 'value':
359
- {
360
- const nextVal = newVal ?? '';
361
-
362
- if (nextVal !== _classPrivateFieldGet(this, _$input).value) {
363
- _classPrivateFieldGet(this, _$input).value = nextVal;
364
- const isNextCursorEnd = _classPrivateFieldGet(this, _selectionStart) === null || _classPrivateFieldGet(this, _selectionStart) === nextVal.length;
365
-
366
- if (!isNextCursorEnd) {
367
- _classPrivateFieldGet(this, _$input).setSelectionRange(_classPrivateFieldGet(this, _selectionStart), _classPrivateFieldGet(this, _selectionEnd));
368
- }
369
- }
370
-
371
- break;
372
- }
373
-
374
- case 'label':
375
- {
376
- _classPrivateFieldGet(this, _$label).textContent = newVal;
377
- break;
378
- }
379
-
380
- case 'placeholder':
381
- {
382
- _classPrivateFieldGet(this, _$input).placeholder = newVal ?? '';
383
- updateAttribute(this, 'aria-placeholder', newVal);
384
- break;
385
- }
386
-
387
- case 'maxvisibleitems':
388
- {
389
- _classPrivateFieldGet(this, _$listbox).style.maxHeight = attrValueToPixels(newVal, {
390
- min: 2,
391
- multiplier: ITEM_HEIGHT
392
- });
393
- break;
394
- }
395
-
396
- case 'clear-aria-label':
397
- {
398
- updateAttribute(_classPrivateFieldGet(this, _$clear), 'aria-label', newVal);
399
- }
400
- }
401
- }
402
-
403
- focus() {
404
- _classPrivateFieldGet(this, _$input).focus();
405
- }
406
-
407
- blur() {
408
- _classPrivateFieldGet(this, _$input).blur();
409
- }
410
-
411
- }));
412
-
413
- function _onValueChange2(nextValue) {
414
- let preserveCursorPosition = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
415
- const prevValue = this.value;
416
-
417
- if (prevValue !== nextValue) {
418
- const nextSelectionStart = preserveCursorPosition ? _classPrivateFieldGet(this, _$input).selectionStart : nextValue.length;
419
- const nextSelectionEnd = preserveCursorPosition ? _classPrivateFieldGet(this, _$input).selectionEnd : nextValue.length;
420
-
421
- const prevSelectionStart = _classPrivateFieldGet(this, _selectionStart);
422
-
423
- const prevSelectionEnd = _classPrivateFieldGet(this, _selectionEnd);
424
-
425
- const isPrevCursorEnd = prevSelectionStart === prevSelectionEnd && prevSelectionStart === prevValue.length;
426
-
427
- if (!_classPrivateFieldGet(this, _isPendingDk)) {
428
- _classPrivateFieldGet(this, _$input).value = prevValue;
429
- }
430
-
431
- _classPrivateFieldSet(this, _isPendingDk, false);
432
-
433
- if (!isPrevCursorEnd) {
434
- _classPrivateFieldGet(this, _$input).setSelectionRange(prevSelectionStart, prevSelectionEnd);
435
- }
436
-
437
- _classPrivateFieldSet(this, _selectionStart, nextSelectionStart);
438
-
439
- _classPrivateFieldSet(this, _selectionEnd, nextSelectionEnd);
440
-
441
- this.dispatchEvent(new CustomEvent('change', {
442
- detail: nextValue,
443
- bubbles: true
444
- }));
445
- }
446
- }
447
-
448
- function _onExpand2() {
449
- const isOpen = getBooleanAttribute(this, 'aria-expanded');
450
-
451
- const $opts = _classPrivateFieldGet(this, _$optionSlot).assignedElements();
452
-
453
- if (!isOpen && $opts.length > 0 && _classPrivateFieldGet(this, _sh).activeElement === _classPrivateFieldGet(this, _$input)) {
454
- const opt = _classPrivateMethodGet(this, _getFirstOption, _getFirstOption2).call(this);
455
-
456
- _classPrivateMethodGet(this, _selectOption, _selectOption2).call(this, opt);
457
-
458
- this.setAttribute('aria-expanded', 'true');
459
- }
460
- }
461
-
462
- function _onCollapse2() {
463
- this.setAttribute('aria-expanded', 'false');
464
- }
465
-
466
- function _getFirstOption2() {
467
- return _classPrivateFieldGet(this, _$optionSlot).assignedElements()[0] ?? null;
468
- }
469
-
470
- function _getLastOption2() {
471
- return _classPrivateFieldGet(this, _$optionSlot).assignedElements().reverse()[0] ?? null;
472
- }
473
-
474
- function _getNextOption2() {
475
- const $options = _classPrivateFieldGet(this, _$optionSlot).assignedElements();
476
-
477
- const $selectedOption = _classPrivateMethodGet(this, _findSelectedOption, _findSelectedOption2).call(this);
478
-
479
- const currentIndex = $selectedOption !== null ? $options.indexOf($selectedOption) : -1;
480
-
481
- if (currentIndex < 0) {
482
- return _classPrivateMethodGet(this, _getFirstOption, _getFirstOption2).call(this);
483
- }
484
-
485
- return $options[(currentIndex + 1) % $options.length];
486
- }
487
-
488
- function _getPrevOption2() {
489
- const $options = _classPrivateFieldGet(this, _$optionSlot).assignedElements();
490
-
491
- const $selectedOption = _classPrivateMethodGet(this, _findSelectedOption, _findSelectedOption2).call(this);
492
-
493
- const currentIndex = $selectedOption !== null ? $options.indexOf($selectedOption) : -1;
494
-
495
- if (currentIndex < 0) {
496
- return _classPrivateMethodGet(this, _getLastOption, _getLastOption2).call(this);
497
- }
498
-
499
- return $options[(currentIndex - 1 + $options.length) % $options.length];
500
- }
501
-
502
- function _selectOption2($option) {
503
- for (const $op of _classPrivateFieldGet(this, _$optionSlot).assignedElements()) {
504
- const isSelected = $op === $option;
505
- updateBooleanAttribute($op, 'data-selected', isSelected);
506
-
507
- if (isSelected) {
508
- $op.scrollIntoView?.({
509
- block: 'nearest'
510
- });
511
- }
512
- }
513
- }
514
-
515
- function _findSelectedOption2() {
516
- for (const $option of _classPrivateFieldGet(this, _$optionSlot).assignedElements()) {
517
- if (getBooleanAttribute($option, 'data-selected')) {
518
- return $option;
519
- }
520
- }
521
-
522
- return null;
523
- }
package/search/types.d.ts DELETED
@@ -1,25 +0,0 @@
1
- import type { TRect, TSinchElementReact } from '../types';
2
- import type { SyntheticEvent } from 'react';
3
- export declare type TSinchSearchElement = HTMLElement & {
4
- value: string;
5
- label: string | null;
6
- placeholder: string | null;
7
- maxVisibleItems: number | null;
8
- selectionStart: HTMLInputElement['selectionStart'];
9
- selectionEnd: HTMLInputElement['selectionEnd'];
10
- selectionDirection: HTMLInputElement['selectionDirection'];
11
- readonly dropdownRect: TRect;
12
- setAttribute(name: 'value', value: string): void;
13
- setAttribute(name: 'label', value: string): void;
14
- setAttribute(name: 'placeholder', value: string): void;
15
- setAttribute(name: 'maxvisibleitems', value: string): void;
16
- };
17
- export declare type TSinchSearchReact = TSinchElementReact<TSinchSearchElement> & {
18
- value: string;
19
- label?: string;
20
- placeholder?: string;
21
- maxVisibleItems?: number;
22
- 'aria-label': string;
23
- 'clear-aria-label': string;
24
- onChange: (e: SyntheticEvent<TSinchSearchElement, CustomEvent<string>>) => void;
25
- };
@@ -1,11 +0,0 @@
1
- import type { TSinchSearchOptionElement, TSinchSearchOptionReact } from './types';
2
- declare global {
3
- namespace JSX {
4
- interface IntrinsicElements {
5
- 'sinch-search-option': TSinchSearchOptionReact;
6
- }
7
- }
8
- interface HTMLElementTagNameMap {
9
- 'sinch-search-option': TSinchSearchOptionElement;
10
- }
11
- }
@@ -1,55 +0,0 @@
1
- import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
2
- import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
3
-
4
- var _$content;
5
-
6
- function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
7
-
8
- function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
9
-
10
- import { defineCustomElement, getAttribute, NectaryElement, updateAttribute } from '../utils';
11
- const templateHTML = '<style>:host{display:block}#wrapper{display:block;box-sizing:border-box;line-height:40px;padding:0 12px;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host(:hover)>#wrapper,:host([data-selected])>#wrapper{background-color:var(--sinch-color-snow-500)}</style><div id="wrapper"></div>';
12
- const template = document.createElement('template');
13
- template.innerHTML = templateHTML;
14
- defineCustomElement('sinch-search-option', (_$content = new WeakMap(), class extends NectaryElement {
15
- constructor() {
16
- super();
17
-
18
- _classPrivateFieldInitSpec(this, _$content, {
19
- writable: true,
20
- value: void 0
21
- });
22
-
23
- const shadowRoot = this.attachShadow();
24
- shadowRoot.appendChild(template.content.cloneNode(true));
25
-
26
- _classPrivateFieldSet(this, _$content, shadowRoot.querySelector('#wrapper'));
27
- }
28
-
29
- connectedCallback() {
30
- this.setAttribute('role', 'option');
31
- }
32
-
33
- static get observedAttributes() {
34
- return ['text'];
35
- }
36
-
37
- attributeChangedCallback(name, oldVal, newVal) {
38
- switch (name) {
39
- case 'text':
40
- {
41
- _classPrivateFieldGet(this, _$content).textContent = newVal;
42
- break;
43
- }
44
- }
45
- }
46
-
47
- set text(value) {
48
- updateAttribute(this, 'text', value);
49
- }
50
-
51
- get text() {
52
- return getAttribute(this, 'text', '');
53
- }
54
-
55
- }));
@@ -1,9 +0,0 @@
1
- import type { TSinchElementReact } from '../types';
2
- export declare type TSinchSearchOptionElement = HTMLElement & {
3
- text: string;
4
- setAttribute(name: 'text', value: string): void;
5
- };
6
- export declare type TSinchSearchOptionReact = TSinchElementReact<TSinchSearchOptionElement> & {
7
- text: string;
8
- 'aria-label': string;
9
- };
package/select/index.d.ts DELETED
@@ -1,13 +0,0 @@
1
- import '../dropdown';
2
- import '../icons/keyboard-arrow-down';
3
- import type { TSinchSelectElement, TSinchSelectReact } from './types';
4
- declare global {
5
- namespace JSX {
6
- interface IntrinsicElements {
7
- 'sinch-select': TSinchSelectReact;
8
- }
9
- }
10
- interface HTMLElementTagNameMap {
11
- 'sinch-select': TSinchSelectElement;
12
- }
13
- }