@smileid/web-components 11.3.0 → 11.4.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.
- package/dist/esm/DocumentCaptureScreens-wvJcTVkA.js +4147 -0
- package/dist/esm/DocumentCaptureScreens-wvJcTVkA.js.map +1 -0
- package/dist/esm/{EndUserConsent-BgKCCMMn.js → EndUserConsent-BXvS7t8z.js} +4 -4
- package/dist/esm/{EndUserConsent-BgKCCMMn.js.map → EndUserConsent-BXvS7t8z.js.map} +1 -1
- package/dist/esm/Navigation-BRFmg7s1.js +138 -0
- package/dist/esm/Navigation-BRFmg7s1.js.map +1 -0
- package/dist/esm/{SelfieCaptureScreens-DKd0f7K8.js → SelfieCaptureScreens-BkJBfzHv.js} +2651 -3086
- package/dist/esm/SelfieCaptureScreens-BkJBfzHv.js.map +1 -0
- package/dist/esm/{TotpConsent-BQm8j4-u.js → TotpConsent-Cn2DkVza.js} +2 -2
- package/dist/esm/{TotpConsent-BQm8j4-u.js.map → TotpConsent-Cn2DkVza.js.map} +1 -1
- package/dist/esm/combobox.js +14 -16
- package/dist/esm/combobox.js.map +1 -1
- package/dist/esm/document.js +1 -1
- package/dist/esm/end-user-consent.js +1 -1
- package/dist/esm/{index-Cjzs1eA_.js → index-DBUdxnp9.js} +91 -91
- package/dist/esm/{index-Cjzs1eA_.js.map → index-DBUdxnp9.js.map} +1 -1
- package/dist/esm/localisation.js +1 -1
- package/dist/esm/main.js +6 -6
- package/dist/esm/navigation.js +1 -1
- package/dist/esm/package-Dax8ezDK.js +565 -0
- package/dist/esm/package-Dax8ezDK.js.map +1 -0
- package/dist/esm/selfie.js +1 -1
- package/dist/esm/smart-camera-web.js +16 -11
- package/dist/esm/smart-camera-web.js.map +1 -1
- package/dist/esm/{styles-BOEZtbuc.js → styles-BTEClL7R.js} +2 -2
- package/dist/esm/{styles-BOEZtbuc.js.map → styles-BTEClL7R.js.map} +1 -1
- package/dist/esm/totp-consent.js +1 -1
- package/dist/smart-camera-web.js +446 -179
- package/dist/smart-camera-web.js.map +1 -1
- package/dist/types/main.d.ts +183 -33
- package/lib/components/combobox/src/Combobox.js +14 -12
- package/lib/components/document/src/DocumentCaptureScreens.js +15 -5
- package/lib/components/document/src/assets/icons/guidelines/greenbook/good.svg +77 -0
- package/lib/components/document/src/assets/icons/guidelines/greenbook/not-blurry.svg +84 -0
- package/lib/components/document/src/assets/icons/guidelines/greenbook/not-cropped.svg +83 -0
- package/lib/components/document/src/assets/icons/guidelines/greenbook/not-reflective.svg +89 -0
- package/lib/components/document/src/assets/icons/guidelines/id-card/good.svg +87 -0
- package/lib/components/document/src/assets/icons/guidelines/id-card/not-blurry.svg +100 -0
- package/lib/components/document/src/assets/icons/guidelines/id-card/not-cropped.svg +93 -0
- package/lib/components/document/src/assets/icons/guidelines/id-card/not-reflective.svg +98 -0
- package/lib/components/document/src/assets/icons/guidelines/passport/good.svg +91 -0
- package/lib/components/document/src/assets/icons/guidelines/passport/not-blurry.svg +109 -0
- package/lib/components/document/src/assets/icons/guidelines/passport/not-cropped.svg +102 -0
- package/lib/components/document/src/assets/icons/guidelines/passport/not-reflective.svg +207 -0
- package/lib/components/document/src/assets/lottie/taking photo of ID FLIP 2D.lottie +0 -0
- package/lib/components/document/src/assets/lottie/taking photo of ID.lottie +0 -0
- package/lib/components/document/src/assets/lottie/taking photo of green book passport.lottie +0 -0
- package/lib/components/document/src/assets/lottie/taking photo of passport 2.lottie +0 -0
- package/lib/components/document/src/document-capture-instructions/DocumentCaptureInstructions.stories.js +123 -12
- package/lib/components/document/src/document-capture-instructions/DocumentCaptureInstructions.tsx +808 -0
- package/lib/components/document/src/document-capture-instructions/index.js +1 -0
- package/lib/components/navigation/src/Navigation.js +57 -56
- package/lib/components/navigation/src/Navigation.stories.js +7 -0
- package/lib/components/selfie/src/smartselfie-capture/SmartSelfieCapture.tsx +3 -15
- package/lib/components/selfie/src/smartselfie-capture/components/CameraPreview.tsx +6 -10
- package/lib/components/selfie/src/smartselfie-capture/components/CaptureControls.tsx +7 -1
- package/lib/components/selfie/src/smartselfie-capture/hooks/useFaceCapture.ts +33 -19
- package/lib/components/selfie/src/smartselfie-capture/utils/alertMessages.ts +0 -1
- package/lib/components/selfie/src/smartselfie-capture/utils/mediapipeManager.ts +127 -30
- package/lib/components/signature-pad/package-lock.json +24 -19
- package/lib/components/signature-pad/package.json +1 -1
- package/lib/components/smart-camera-web/src/SmartCameraWeb.js +7 -1
- package/lib/styles/src/styles.js +1 -1
- package/package.json +5 -3
- package/dist/README.md +0 -15
- package/dist/components/README.md +0 -14
- package/dist/components/document/src/README.md +0 -111
- package/dist/components/document/src/document-capture/README.md +0 -90
- package/dist/components/document/src/document-capture-instructions/README.md +0 -56
- package/dist/components/document/src/document-capture-review/README.md +0 -79
- package/dist/components/selfie/README.md +0 -225
- package/dist/components/smart-camera-web/src/README.md +0 -206
- package/dist/domain/camera/src/README.md +0 -38
- package/dist/domain/file-upload/README.md +0 -35
- package/dist/esm/DocumentCaptureScreens-N-0o7eE5.js +0 -1580
- package/dist/esm/DocumentCaptureScreens-N-0o7eE5.js.map +0 -1
- package/dist/esm/Navigation-DOFYqTZt.js +0 -144
- package/dist/esm/Navigation-DOFYqTZt.js.map +0 -1
- package/dist/esm/SelfieCaptureScreens-DKd0f7K8.js.map +0 -1
- package/dist/esm/package-KQ2l43v1.js +0 -90
- package/dist/esm/package-KQ2l43v1.js.map +0 -1
- package/dist/package-lock.json +0 -4948
- package/dist/package.json +0 -59
- package/dist/smart-camera-web.js.gz +0 -0
- package/dist/src/components/combobox/src/index.js +0 -425
- package/dist/src/components/combobox/src/index.js.map +0 -7
- package/dist/src/components/document/src/index.js +0 -1423
- package/dist/src/components/document/src/index.js.map +0 -7
- package/dist/src/components/end-user-consent/src/index.js +0 -1586
- package/dist/src/components/end-user-consent/src/index.js.map +0 -7
- package/dist/src/components/selfie/src/index.js +0 -1221
- package/dist/src/components/selfie/src/index.js.map +0 -7
- package/dist/src/components/signature-pad/src/index.js +0 -796
- package/dist/src/components/signature-pad/src/index.js.map +0 -7
- package/dist/src/components/smart-camera-web/src/SmartCameraWeb.js +0 -2754
- package/dist/src/components/smart-camera-web/src/SmartCameraWeb.js.map +0 -7
- package/dist/src/components/totp-consent/src/index.js +0 -1305
- package/dist/src/components/totp-consent/src/index.js.map +0 -7
- package/dist/src/index.js.map +0 -7
- package/dist/styles/README.md +0 -3
- package/dist/types/locale.d.ts +0 -19
package/dist/package.json
DELETED
|
@@ -1,59 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "@smileid/web-components",
|
|
3
|
-
"version": "11.3.0",
|
|
4
|
-
"private": "true",
|
|
5
|
-
"main": "index.js",
|
|
6
|
-
"exports": {
|
|
7
|
-
".": "./index.js",
|
|
8
|
-
"./combobox": "./src/components/combobox/src/index.js",
|
|
9
|
-
"./document-capture": "./src/components/document/src/index.js",
|
|
10
|
-
"./end-user-consent": "./src/components/end-user-consent/src/index.js",
|
|
11
|
-
"./navigation": "./src/components/navigation/src/index.js",
|
|
12
|
-
"./selfie-capture": "./src/components/selfie/src/index.js",
|
|
13
|
-
"./signature-pad": "./src/components/signature-pad/src/index.js",
|
|
14
|
-
"./totp-consent": "./src/components/totp-consent/src/index.js",
|
|
15
|
-
"./smart-camera-web": "./src/components/smart-camera-web/src/SmartCameraWeb.js"
|
|
16
|
-
},
|
|
17
|
-
"files": [
|
|
18
|
-
"./src/components/",
|
|
19
|
-
"./src/domain/",
|
|
20
|
-
"./src/styles/",
|
|
21
|
-
"./README.md",
|
|
22
|
-
"index.js",
|
|
23
|
-
"package.json"
|
|
24
|
-
],
|
|
25
|
-
"scripts": {
|
|
26
|
-
"build": "cross-env NODE_ENV=production node esbuild.js",
|
|
27
|
-
"build:dev": "cross-env NODE_ENV=development node esbuild.js",
|
|
28
|
-
"clean": "rm -rf build dist",
|
|
29
|
-
"prepublishOnly": "npm run build",
|
|
30
|
-
"lint:fix": "eslint . --ext .js --fix",
|
|
31
|
-
"lint:html": "npx prettier --write $(git ls-files '*.html')",
|
|
32
|
-
"lint": "eslint . --ext .js",
|
|
33
|
-
"start": "npm run build && npx serve -p 8000 dist",
|
|
34
|
-
"test": "npx cypress run"
|
|
35
|
-
},
|
|
36
|
-
"description": "A collection of Web Components used by SmileID",
|
|
37
|
-
"keywords": [
|
|
38
|
-
"Web Components"
|
|
39
|
-
],
|
|
40
|
-
"type": "module",
|
|
41
|
-
"author": "SmileID <support@usesmileid.com> (https://usesmileid.com)",
|
|
42
|
-
"dependencies": {
|
|
43
|
-
"signature_pad": "^5.0.2",
|
|
44
|
-
"validate.js": "^0.13.1"
|
|
45
|
-
},
|
|
46
|
-
"devDependencies": {
|
|
47
|
-
"cross-env": "^7.0.3",
|
|
48
|
-
"cypress": "^13.15.0",
|
|
49
|
-
"esbuild": "^0.24.0",
|
|
50
|
-
"eslint": "^8.57.0",
|
|
51
|
-
"eslint-config-airbnb-base": "^15.0.0",
|
|
52
|
-
"eslint-config-prettier": "^9.1.0",
|
|
53
|
-
"eslint-plugin-cypress": "^3.3.0",
|
|
54
|
-
"eslint-plugin-import": "^2.29.1",
|
|
55
|
-
"eslint-plugin-jest": "^28.8.3",
|
|
56
|
-
"eslint-plugin-prettier": "^5.2.1",
|
|
57
|
-
"prettier": "^3.3.3"
|
|
58
|
-
}
|
|
59
|
-
}
|
|
Binary file
|
|
@@ -1,425 +0,0 @@
|
|
|
1
|
-
(() => {
|
|
2
|
-
function b(o) {
|
|
3
|
-
let t = [...Array(30)].map(() => Math.random().toString(36)[3]).join('');
|
|
4
|
-
return ''.concat(o, '-').concat(t);
|
|
5
|
-
}
|
|
6
|
-
function f(o) {
|
|
7
|
-
let t = o.getBoundingClientRect();
|
|
8
|
-
return (
|
|
9
|
-
t.top >= 0 &&
|
|
10
|
-
t.left >= 0 &&
|
|
11
|
-
t.bottom <=
|
|
12
|
-
(window.innerHeight || document.documentElement.clientHeight) &&
|
|
13
|
-
t.right <= (window.innerWidth || document.documentElement.clientWidth)
|
|
14
|
-
);
|
|
15
|
-
}
|
|
16
|
-
function x(o) {
|
|
17
|
-
return o && o.clientHeight < o.scrollHeight;
|
|
18
|
-
}
|
|
19
|
-
function E(o, t) {
|
|
20
|
-
let { offsetHeight: e, offsetTop: i } = o,
|
|
21
|
-
{ offsetHeight: s, scrollTop: n } = t,
|
|
22
|
-
r = i < n,
|
|
23
|
-
c = i + e > n + s;
|
|
24
|
-
r ? t.scrollTo(0, i) : c && t.scrollTo(0, i - s + e);
|
|
25
|
-
}
|
|
26
|
-
var a = class extends HTMLElement {
|
|
27
|
-
constructor() {
|
|
28
|
-
(super(), (this.handleRoaming = this.handleRoaming.bind(this)));
|
|
29
|
-
}
|
|
30
|
-
connectedCallback() {
|
|
31
|
-
((this.trigger = this.querySelector('smileid-combobox-trigger')),
|
|
32
|
-
document.addEventListener('click', this.handleRoaming),
|
|
33
|
-
this.addEventListener('focusout', this.handleRoaming),
|
|
34
|
-
this.addEventListener('blur', this.handleRoaming));
|
|
35
|
-
}
|
|
36
|
-
disconnectedCallback() {
|
|
37
|
-
(document.removeEventListener('click', this.handleRoaming),
|
|
38
|
-
this.removeEventListener('focusout', this.handleRoaming),
|
|
39
|
-
this.removeEventListener('blur', this.handleRoaming));
|
|
40
|
-
}
|
|
41
|
-
handleRoaming(t) {
|
|
42
|
-
let e = t.relatedTarget || t.target;
|
|
43
|
-
this.contains(e) ||
|
|
44
|
-
(this.trigger.getAttribute('expanded') === 'true' &&
|
|
45
|
-
this.trigger.setAttribute('expanded', 'false'));
|
|
46
|
-
}
|
|
47
|
-
},
|
|
48
|
-
l = class extends HTMLElement {
|
|
49
|
-
constructor() {
|
|
50
|
-
(super(),
|
|
51
|
-
(this.handleKeyUp = this.handleKeyUp.bind(this)),
|
|
52
|
-
(this.handleKeyDown = this.handleKeyDown.bind(this)),
|
|
53
|
-
(this.handleSelection = this.handleSelection.bind(this)),
|
|
54
|
-
(this.toggleExpansionState = this.toggleExpansionState.bind(this)));
|
|
55
|
-
}
|
|
56
|
-
get type() {
|
|
57
|
-
return this.getAttribute('type') || 'text';
|
|
58
|
-
}
|
|
59
|
-
get label() {
|
|
60
|
-
return this.getAttribute('label') || '';
|
|
61
|
-
}
|
|
62
|
-
get value() {
|
|
63
|
-
return this.getAttribute('value') || '';
|
|
64
|
-
}
|
|
65
|
-
get disabled() {
|
|
66
|
-
return this.hasAttribute('disabled');
|
|
67
|
-
}
|
|
68
|
-
connectedCallback() {
|
|
69
|
-
if (!this.label)
|
|
70
|
-
throw new Error('<combobox-trigger>: a label attribute is required');
|
|
71
|
-
((this.innerHTML = ''.concat(
|
|
72
|
-
this.type === 'text'
|
|
73
|
-
? '\n <div>\n <input '
|
|
74
|
-
.concat(this.value ? 'value="'.concat(this.value, '" ') : '')
|
|
75
|
-
.concat(
|
|
76
|
-
this.disabled ? ' disabled ' : '',
|
|
77
|
-
'type="text" placeholder="',
|
|
78
|
-
)
|
|
79
|
-
.concat(this.label, '" />\n <button ')
|
|
80
|
-
.concat(
|
|
81
|
-
this.disabled ? 'disabled ' : '',
|
|
82
|
-
"tabindex='-1' type='button'>\n <span class=\"visually-hidden\">Toggle</span>\n </button>\n </div>\n ",
|
|
83
|
-
)
|
|
84
|
-
: '<button '
|
|
85
|
-
.concat(this.disabled ? 'disabled ' : '', 'type="button">')
|
|
86
|
-
.concat(this.value || this.label, '</button>'),
|
|
87
|
-
)),
|
|
88
|
-
this.setAttribute('expanded', !1),
|
|
89
|
-
(this.inputTrigger = this.querySelector('input')),
|
|
90
|
-
(this.buttonTrigger = this.querySelector('button')),
|
|
91
|
-
this.buttonTrigger.setAttribute('aria-expanded', !1),
|
|
92
|
-
this.buttonTrigger.setAttribute('role', 'combobox'),
|
|
93
|
-
this.buttonTrigger.addEventListener('keydown', this.handleKeyDown),
|
|
94
|
-
this.buttonTrigger.addEventListener(
|
|
95
|
-
'click',
|
|
96
|
-
this.toggleExpansionState,
|
|
97
|
-
),
|
|
98
|
-
this.inputTrigger &&
|
|
99
|
-
(this.inputTrigger.setAttribute('aria-expanded', !1),
|
|
100
|
-
this.inputTrigger.setAttribute('role', 'combobox'),
|
|
101
|
-
this.inputTrigger.addEventListener('keydown', this.handleKeyDown),
|
|
102
|
-
this.inputTrigger.addEventListener('keyup', this.handleKeyUp),
|
|
103
|
-
this.inputTrigger.addEventListener('change', (t) =>
|
|
104
|
-
t.stopPropagation(),
|
|
105
|
-
)),
|
|
106
|
-
(this.listbox = this.parentElement.querySelector(
|
|
107
|
-
'smileid-combobox-listbox',
|
|
108
|
-
)),
|
|
109
|
-
(this.options = Array.from(
|
|
110
|
-
this.parentElement.querySelectorAll('smileid-combobox-option'),
|
|
111
|
-
)),
|
|
112
|
-
this.options.forEach((t) => {
|
|
113
|
-
t.addEventListener('combobox.option.select', this.handleSelection);
|
|
114
|
-
}));
|
|
115
|
-
}
|
|
116
|
-
disconnectedCallback() {
|
|
117
|
-
(this.buttonTrigger.removeEventListener('keydown', this.handleKeyDown),
|
|
118
|
-
this.buttonTrigger.removeEventListener(
|
|
119
|
-
'click',
|
|
120
|
-
this.toggleExpansionState,
|
|
121
|
-
),
|
|
122
|
-
this.inputTrigger &&
|
|
123
|
-
(this.inputTrigger.removeEventListener(
|
|
124
|
-
'keydown',
|
|
125
|
-
this.handleKeyDown,
|
|
126
|
-
),
|
|
127
|
-
this.inputTrigger.removeEventListener('keyup', this.handleKeyUp),
|
|
128
|
-
this.inputTrigger.removeEventListener('change', (t) =>
|
|
129
|
-
t.stopPropagation(),
|
|
130
|
-
)),
|
|
131
|
-
this.options &&
|
|
132
|
-
this.options.forEach((t) => {
|
|
133
|
-
t.removeEventListener(
|
|
134
|
-
'combobox.option.select',
|
|
135
|
-
this.handleSelection,
|
|
136
|
-
);
|
|
137
|
-
}));
|
|
138
|
-
}
|
|
139
|
-
handleKeyDown(t) {
|
|
140
|
-
if (t.ctrlKey || t.shiftKey) return;
|
|
141
|
-
let { key: e } = t;
|
|
142
|
-
switch (e) {
|
|
143
|
-
case 'Enter':
|
|
144
|
-
case 'Space':
|
|
145
|
-
case ' ':
|
|
146
|
-
if (this.getAttribute('expanded') === 'true')
|
|
147
|
-
if (this.inputTrigger && (e === 'Space' || e === ' '))
|
|
148
|
-
this.resetListbox();
|
|
149
|
-
else {
|
|
150
|
-
t.preventDefault();
|
|
151
|
-
let i = this.buttonTrigger.getAttribute(
|
|
152
|
-
'aria-activedescendant',
|
|
153
|
-
);
|
|
154
|
-
i && document.getElementById(i).click();
|
|
155
|
-
}
|
|
156
|
-
else (t.preventDefault(), this.toggleExpansionState());
|
|
157
|
-
break;
|
|
158
|
-
case 'Esc':
|
|
159
|
-
case 'Escape':
|
|
160
|
-
(t.preventDefault(),
|
|
161
|
-
this.getAttribute('expanded') === 'true' &&
|
|
162
|
-
this.toggleExpansionState());
|
|
163
|
-
break;
|
|
164
|
-
case 'Down':
|
|
165
|
-
case 'ArrowDown':
|
|
166
|
-
(t.preventDefault(),
|
|
167
|
-
this.getAttribute('expanded') !== 'true'
|
|
168
|
-
? (this.toggleExpansionState(), this.focusListbox('First'))
|
|
169
|
-
: this.focusListbox('Down'));
|
|
170
|
-
break;
|
|
171
|
-
case 'Up':
|
|
172
|
-
case 'ArrowUp':
|
|
173
|
-
(t.preventDefault(),
|
|
174
|
-
this.getAttribute('expanded') !== 'true'
|
|
175
|
-
? (this.toggleExpansionState(), this.focusListbox('Last'))
|
|
176
|
-
: this.focusListbox('Up'));
|
|
177
|
-
break;
|
|
178
|
-
case 'Left':
|
|
179
|
-
case 'ArrowLeft':
|
|
180
|
-
case 'Right':
|
|
181
|
-
case 'ArrowRight':
|
|
182
|
-
case 'Home':
|
|
183
|
-
case 'End':
|
|
184
|
-
this.resetListbox();
|
|
185
|
-
break;
|
|
186
|
-
case 'Tab':
|
|
187
|
-
break;
|
|
188
|
-
default:
|
|
189
|
-
break;
|
|
190
|
-
}
|
|
191
|
-
}
|
|
192
|
-
handleKeyUp(t) {
|
|
193
|
-
let { key: e } = t,
|
|
194
|
-
i = (s) => s.length === 1 && s.match(/\S| /);
|
|
195
|
-
((t.key === 'Escape' || t.key === 'Esc') &&
|
|
196
|
-
(t.preventDefault(),
|
|
197
|
-
this.getAttribute('expanded') === 'true'
|
|
198
|
-
? this.toggleExpansionState()
|
|
199
|
-
: this.inputTrigger &&
|
|
200
|
-
((this.inputTrigger.value = ''),
|
|
201
|
-
this.listbox.dispatchEvent(
|
|
202
|
-
new CustomEvent('combobox.listbox.filter', { detail: '' }),
|
|
203
|
-
))),
|
|
204
|
-
(i(e) || e === 'Backspace') &&
|
|
205
|
-
(this.resetListbox(), this.filterListbox(t.target.value)));
|
|
206
|
-
}
|
|
207
|
-
toggleExpansionState() {
|
|
208
|
-
let t = this.getAttribute('expanded') === 'true';
|
|
209
|
-
(this.setAttribute('expanded', !t),
|
|
210
|
-
this.buttonTrigger.setAttribute('aria-expanded', !t),
|
|
211
|
-
this.inputTrigger &&
|
|
212
|
-
this.inputTrigger.setAttribute('aria-expanded', !t));
|
|
213
|
-
}
|
|
214
|
-
handleSelection(t) {
|
|
215
|
-
(this.inputTrigger
|
|
216
|
-
? (this.inputTrigger.value = t.detail.label)
|
|
217
|
-
: (this.buttonTrigger.textContent = t.detail.label),
|
|
218
|
-
this.toggleExpansionState(),
|
|
219
|
-
this.parentElement.dispatchEvent(
|
|
220
|
-
new CustomEvent('combobox.change', {
|
|
221
|
-
detail: { value: t.detail.value },
|
|
222
|
-
}),
|
|
223
|
-
));
|
|
224
|
-
}
|
|
225
|
-
filterListbox(t) {
|
|
226
|
-
(this.getAttribute('expanded') !== 'true' &&
|
|
227
|
-
this.toggleExpansionState(),
|
|
228
|
-
this.listbox.dispatchEvent(
|
|
229
|
-
new CustomEvent('combobox.listbox.filter', { detail: t }),
|
|
230
|
-
));
|
|
231
|
-
}
|
|
232
|
-
focusListbox(t) {
|
|
233
|
-
(this.resetListbox(),
|
|
234
|
-
this.listbox.dispatchEvent(
|
|
235
|
-
new CustomEvent('combobox.listbox.focus', {
|
|
236
|
-
detail: { direction: t },
|
|
237
|
-
}),
|
|
238
|
-
));
|
|
239
|
-
}
|
|
240
|
-
resetListbox() {
|
|
241
|
-
this.listbox.dispatchEvent(new CustomEvent('combobox.listbox.reset'));
|
|
242
|
-
}
|
|
243
|
-
},
|
|
244
|
-
h = class extends HTMLElement {
|
|
245
|
-
constructor() {
|
|
246
|
-
(super(),
|
|
247
|
-
(this.handleFilter = this.handleFilter.bind(this)),
|
|
248
|
-
(this.handleFocus = this.handleFocus.bind(this)),
|
|
249
|
-
(this.handleReset = this.handleReset.bind(this)),
|
|
250
|
-
(this.handleOptionSelection = this.handleOptionSelection.bind(this)));
|
|
251
|
-
}
|
|
252
|
-
get emptyLabel() {
|
|
253
|
-
return this.getAttribute('empty-label');
|
|
254
|
-
}
|
|
255
|
-
get emptyState() {
|
|
256
|
-
return '\n <p id=\'empty-state\' style="text-align: center;">\n '.concat(
|
|
257
|
-
this.emptyLabel || 'No items',
|
|
258
|
-
'\n </p>\n ',
|
|
259
|
-
);
|
|
260
|
-
}
|
|
261
|
-
connectedCallback() {
|
|
262
|
-
(this.setAttribute('role', 'listbox'),
|
|
263
|
-
this.setAttribute('id', b('listbox')),
|
|
264
|
-
this.addEventListener('combobox.listbox.filter', this.handleFilter),
|
|
265
|
-
this.addEventListener('combobox.listbox.focus', this.handleFocus),
|
|
266
|
-
this.addEventListener('combobox.listbox.reset', this.handleReset),
|
|
267
|
-
(this.triggers = Array.from(
|
|
268
|
-
this.parentElement.querySelectorAll(
|
|
269
|
-
'smileid-combobox-trigger input, smileid-combobox-trigger button',
|
|
270
|
-
),
|
|
271
|
-
)),
|
|
272
|
-
this.triggers.forEach((t) =>
|
|
273
|
-
t.setAttribute('aria-controls', this.getAttribute('id')),
|
|
274
|
-
),
|
|
275
|
-
(this.optionNodes = Array.from(
|
|
276
|
-
this.querySelectorAll('smileid-combobox-option'),
|
|
277
|
-
)),
|
|
278
|
-
(this.selectedNode =
|
|
279
|
-
this.optionNodes.find(
|
|
280
|
-
(t) =>
|
|
281
|
-
!t.hasAttribute('hidden') && t.hasAttribute('aria-selected'),
|
|
282
|
-
) || this.optionNodes.filter((t) => !t.hasAttribute('hidden'))[0]),
|
|
283
|
-
this.selectedNode.setAttribute('tabindex', '0'),
|
|
284
|
-
this.optionNodes.forEach((t) => {
|
|
285
|
-
t.addEventListener(
|
|
286
|
-
'combobox.option.select',
|
|
287
|
-
this.handleOptionSelection,
|
|
288
|
-
);
|
|
289
|
-
}),
|
|
290
|
-
this.optionNodes.length === 0 && (this.innerHTML = this.emptyState));
|
|
291
|
-
}
|
|
292
|
-
disconnectedCallback() {
|
|
293
|
-
(this.removeEventListener('combobox.listbox.filter', this.handleFilter),
|
|
294
|
-
this.removeEventListener('combobox.listbox.focus', this.handleFocus),
|
|
295
|
-
this.removeEventListener('combobox.listbox.reset', this.handleReset),
|
|
296
|
-
this.optionNodes.forEach((t) => {
|
|
297
|
-
t.removeEventListener(
|
|
298
|
-
'combobox.option.select',
|
|
299
|
-
this.handleOptionSelection,
|
|
300
|
-
);
|
|
301
|
-
}));
|
|
302
|
-
}
|
|
303
|
-
static get observedAttributes() {
|
|
304
|
-
return ['search-term'];
|
|
305
|
-
}
|
|
306
|
-
attributeChangedCallback(t, e, i) {
|
|
307
|
-
switch (t) {
|
|
308
|
-
case 'search-term':
|
|
309
|
-
e && !i
|
|
310
|
-
? this.optionNodes.forEach((s) => {
|
|
311
|
-
s.removeAttribute('hidden');
|
|
312
|
-
})
|
|
313
|
-
: i && this.filterNodes(i);
|
|
314
|
-
break;
|
|
315
|
-
default:
|
|
316
|
-
break;
|
|
317
|
-
}
|
|
318
|
-
}
|
|
319
|
-
filterNodes(t) {
|
|
320
|
-
this.optionNodes.forEach((s) => {
|
|
321
|
-
let n = s.getAttribute('value').toLowerCase(),
|
|
322
|
-
r = s.getAttribute('label').toLowerCase();
|
|
323
|
-
n.includes(t.toLowerCase()) || r.includes(t.toLowerCase())
|
|
324
|
-
? s.removeAttribute('hidden')
|
|
325
|
-
: s.setAttribute('hidden', !0);
|
|
326
|
-
});
|
|
327
|
-
let e = this.optionNodes.find((s) => !s.hasAttribute('hidden')),
|
|
328
|
-
i = this.querySelector('#empty-state');
|
|
329
|
-
!e && !i
|
|
330
|
-
? this.insertAdjacentHTML('afterbegin', this.emptyState)
|
|
331
|
-
: e && i && this.removeChild(i);
|
|
332
|
-
}
|
|
333
|
-
handleFilter(t) {
|
|
334
|
-
let e = t.detail;
|
|
335
|
-
this.setAttribute('search-term', e);
|
|
336
|
-
}
|
|
337
|
-
handleFocus(t) {
|
|
338
|
-
this.setSelected(t.detail.direction);
|
|
339
|
-
}
|
|
340
|
-
handleReset() {
|
|
341
|
-
this.optionNodes.forEach((t) => t.setAttribute('tabindex', '-1'));
|
|
342
|
-
}
|
|
343
|
-
handleOptionSelection(t) {
|
|
344
|
-
this.triggers.filter((i) => i.tagName === 'INPUT')[0] &&
|
|
345
|
-
this.setAttribute('search-term', t.detail.label);
|
|
346
|
-
}
|
|
347
|
-
setSelected(t) {
|
|
348
|
-
let e = this.optionNodes.filter((r) => !r.hasAttribute('hidden'));
|
|
349
|
-
this.selectedNode.setAttribute('tabindex', '0');
|
|
350
|
-
let i = e.findIndex((r) => r === this.selectedNode),
|
|
351
|
-
s = e.length - 1,
|
|
352
|
-
n;
|
|
353
|
-
switch (t) {
|
|
354
|
-
case 'First':
|
|
355
|
-
n = 0;
|
|
356
|
-
break;
|
|
357
|
-
case 'Last':
|
|
358
|
-
n = s;
|
|
359
|
-
break;
|
|
360
|
-
case 'Up':
|
|
361
|
-
i === 0 ? (n = s) : (n = i - 1);
|
|
362
|
-
break;
|
|
363
|
-
default:
|
|
364
|
-
i === s ? (n = 0) : (n = i + 1);
|
|
365
|
-
break;
|
|
366
|
-
}
|
|
367
|
-
i !== n && this.swapSelected(this.selectedNode, e[n]);
|
|
368
|
-
}
|
|
369
|
-
swapSelected(t, e) {
|
|
370
|
-
(t.setAttribute('tabindex', '-1'),
|
|
371
|
-
e.setAttribute('tabindex', '0'),
|
|
372
|
-
(this.selectedNode = e),
|
|
373
|
-
x(this) && E(this.selectedNode, this),
|
|
374
|
-
f(e) || e.scrollIntoView({ behavior: 'smooth', block: 'nearest' }),
|
|
375
|
-
this.triggers.forEach((i) =>
|
|
376
|
-
i.setAttribute('aria-activedescendant', e.id),
|
|
377
|
-
));
|
|
378
|
-
}
|
|
379
|
-
},
|
|
380
|
-
d = class extends HTMLElement {
|
|
381
|
-
connectedCallback() {
|
|
382
|
-
(this.setAttribute('role', 'option'),
|
|
383
|
-
this.setAttribute('tabindex', '-1'),
|
|
384
|
-
this.setAttribute('id', b('option')),
|
|
385
|
-
(this.options = Array.from(
|
|
386
|
-
this.parentElement.querySelectorAll('smileid-combobox-option'),
|
|
387
|
-
)),
|
|
388
|
-
this.addEventListener('click', this.select));
|
|
389
|
-
}
|
|
390
|
-
disconnectedCallback() {
|
|
391
|
-
this.removeEventListener('click', this.select);
|
|
392
|
-
}
|
|
393
|
-
get value() {
|
|
394
|
-
return this.getAttribute('value');
|
|
395
|
-
}
|
|
396
|
-
get label() {
|
|
397
|
-
return this.getAttribute('label');
|
|
398
|
-
}
|
|
399
|
-
select() {
|
|
400
|
-
let t = this.options.find((e) => e.getAttribute('aria-selected'));
|
|
401
|
-
(t && t.removeAttribute('aria-selected'),
|
|
402
|
-
this.setAttribute('aria-selected', !0),
|
|
403
|
-
this.dispatchEvent(
|
|
404
|
-
new CustomEvent('combobox.option.select', {
|
|
405
|
-
detail: {
|
|
406
|
-
id: this.getAttribute('id'),
|
|
407
|
-
label: this.label,
|
|
408
|
-
value: this.value,
|
|
409
|
-
},
|
|
410
|
-
}),
|
|
411
|
-
));
|
|
412
|
-
}
|
|
413
|
-
},
|
|
414
|
-
u = a,
|
|
415
|
-
g = l,
|
|
416
|
-
p = h,
|
|
417
|
-
m = d;
|
|
418
|
-
'customElements' in window &&
|
|
419
|
-
!window.customElements.get('smileid-combobox') &&
|
|
420
|
-
(window.customElements.define('smileid-combobox', u),
|
|
421
|
-
window.customElements.define('smileid-combobox-trigger', g),
|
|
422
|
-
window.customElements.define('smileid-combobox-listbox', p),
|
|
423
|
-
window.customElements.define('smileid-combobox-option', m));
|
|
424
|
-
})();
|
|
425
|
-
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../../src/components/combobox/src/Combobox.js"],
|
|
4
|
-
"sourcesContent": ["function generateId(prefix) {\n const id = [...Array(30)].map(() => Math.random().toString(36)[3]).join('');\n return `${prefix}-${id}`;\n}\n\n// check if element is visible in browser view port\nfunction isElementInView(element) {\n const bounding = element.getBoundingClientRect();\n\n return (\n bounding.top >= 0 &&\n bounding.left >= 0 &&\n bounding.bottom <=\n (window.innerHeight || document.documentElement.clientHeight) &&\n bounding.right <=\n (window.innerWidth || document.documentElement.clientWidth)\n );\n}\n\n// check if an element is currently scrollable\nfunction isScrollable(element) {\n return element && element.clientHeight < element.scrollHeight;\n}\n\n// ensure a given child element is within the parent's visible scroll area\n// if the child is not visible, scroll the parent\nfunction maintainScrollVisibility(activeElement, scrollParent) {\n const { offsetHeight, offsetTop } = activeElement;\n const { offsetHeight: parentOffsetHeight, scrollTop } = scrollParent;\n\n const isAbove = offsetTop < scrollTop;\n const isBelow = offsetTop + offsetHeight > scrollTop + parentOffsetHeight;\n\n if (isAbove) {\n scrollParent.scrollTo(0, offsetTop);\n } else if (isBelow) {\n scrollParent.scrollTo(0, offsetTop - parentOffsetHeight + offsetHeight);\n }\n}\n\nclass ComboboxRoot extends HTMLElement {\n constructor() {\n super();\n\n this.handleRoaming = this.handleRoaming.bind(this);\n }\n\n connectedCallback() {\n this.trigger = this.querySelector('smileid-combobox-trigger');\n\n document.addEventListener('click', this.handleRoaming);\n this.addEventListener('focusout', this.handleRoaming);\n this.addEventListener('blur', this.handleRoaming);\n }\n\n disconnectedCallback() {\n document.removeEventListener('click', this.handleRoaming);\n this.removeEventListener('focusout', this.handleRoaming);\n this.removeEventListener('blur', this.handleRoaming);\n }\n\n handleRoaming(event) {\n const target = event.relatedTarget || event.target;\n if (this.contains(target)) {\n return;\n }\n\n if (this.trigger.getAttribute('expanded') === 'true') {\n this.trigger.setAttribute('expanded', 'false');\n }\n }\n}\n\nclass ComboboxTrigger extends HTMLElement {\n constructor() {\n super();\n\n this.handleKeyUp = this.handleKeyUp.bind(this);\n this.handleKeyDown = this.handleKeyDown.bind(this);\n this.handleSelection = this.handleSelection.bind(this);\n\n this.toggleExpansionState = this.toggleExpansionState.bind(this);\n }\n\n get type() {\n return this.getAttribute('type') || 'text';\n }\n\n get label() {\n return this.getAttribute('label') || '';\n }\n\n get value() {\n return this.getAttribute('value') || '';\n }\n\n get disabled() {\n return this.hasAttribute('disabled');\n }\n\n connectedCallback() {\n if (!this.label) {\n throw new Error('<combobox-trigger>: a label attribute is required');\n }\n\n this.innerHTML = `${\n this.type === 'text'\n ? `\n <div>\n <input ${this.value ? `value=\"${this.value}\" ` : ''}${\n this.disabled ? ' disabled ' : ''\n }type=\"text\" placeholder=\"${this.label}\" />\n <button ${this.disabled ? 'disabled ' : ''}tabindex='-1' type='button'>\n <span class=\"visually-hidden\">Toggle</span>\n </button>\n </div>\n `\n : `<button ${this.disabled ? 'disabled ' : ''}type=\"button\">${\n this.value || this.label\n }</button>`\n }`;\n\n this.setAttribute('expanded', false);\n\n this.inputTrigger = this.querySelector('input');\n this.buttonTrigger = this.querySelector('button');\n\n this.buttonTrigger.setAttribute('aria-expanded', false);\n this.buttonTrigger.setAttribute('role', 'combobox');\n\n this.buttonTrigger.addEventListener('keydown', this.handleKeyDown);\n this.buttonTrigger.addEventListener('click', this.toggleExpansionState);\n\n if (this.inputTrigger) {\n this.inputTrigger.setAttribute('aria-expanded', false);\n this.inputTrigger.setAttribute('role', 'combobox');\n\n this.inputTrigger.addEventListener('keydown', this.handleKeyDown);\n this.inputTrigger.addEventListener('keyup', this.handleKeyUp);\n this.inputTrigger.addEventListener('change', (e) => e.stopPropagation());\n }\n\n this.listbox = this.parentElement.querySelector('smileid-combobox-listbox');\n\n this.options = Array.from(\n this.parentElement.querySelectorAll('smileid-combobox-option'),\n );\n this.options.forEach((node) => {\n node.addEventListener('combobox.option.select', this.handleSelection);\n });\n }\n\n disconnectedCallback() {\n this.buttonTrigger.removeEventListener('keydown', this.handleKeyDown);\n this.buttonTrigger.removeEventListener('click', this.toggleExpansionState);\n\n if (this.inputTrigger) {\n this.inputTrigger.removeEventListener('keydown', this.handleKeyDown);\n this.inputTrigger.removeEventListener('keyup', this.handleKeyUp);\n this.inputTrigger.removeEventListener('change', (e) =>\n e.stopPropagation(),\n );\n }\n\n if (this.options) {\n this.options.forEach((node) => {\n node.removeEventListener(\n 'combobox.option.select',\n this.handleSelection,\n );\n });\n }\n }\n\n handleKeyDown(event) {\n if (event.ctrlKey || event.shiftKey) {\n return;\n }\n\n const { key } = event;\n\n switch (key) {\n case 'Enter':\n case 'Space':\n case ' ':\n if (this.getAttribute('expanded') === 'true') {\n if (this.inputTrigger && (key === 'Space' || key === ' ')) {\n this.resetListbox();\n } else {\n event.preventDefault();\n const selectedOption = this.buttonTrigger.getAttribute(\n 'aria-activedescendant',\n );\n if (selectedOption) {\n document.getElementById(selectedOption).click();\n }\n }\n } else {\n event.preventDefault();\n this.toggleExpansionState();\n }\n break;\n case 'Esc':\n case 'Escape':\n event.preventDefault();\n if (this.getAttribute('expanded') === 'true') {\n this.toggleExpansionState();\n }\n break;\n case 'Down':\n case 'ArrowDown':\n event.preventDefault();\n if (this.getAttribute('expanded') !== 'true') {\n this.toggleExpansionState();\n this.focusListbox('First');\n } else {\n this.focusListbox('Down');\n }\n break;\n case 'Up':\n case 'ArrowUp':\n event.preventDefault();\n if (this.getAttribute('expanded') !== 'true') {\n this.toggleExpansionState();\n this.focusListbox('Last');\n } else {\n this.focusListbox('Up');\n }\n break;\n case 'Left':\n case 'ArrowLeft':\n case 'Right':\n case 'ArrowRight':\n case 'Home':\n case 'End':\n this.resetListbox();\n break;\n case 'Tab':\n break;\n default:\n break;\n }\n }\n\n handleKeyUp(event) {\n const { key } = event;\n\n const isPrintableCharacter = (str) => str.length === 1 && str.match(/\\S| /);\n\n if (event.key === 'Escape' || event.key === 'Esc') {\n event.preventDefault();\n if (this.getAttribute('expanded') === 'true') {\n this.toggleExpansionState();\n } else if (this.inputTrigger) {\n this.inputTrigger.value = '';\n\n this.listbox.dispatchEvent(\n new CustomEvent('combobox.listbox.filter', { detail: '' }),\n );\n }\n }\n\n if (isPrintableCharacter(key) || key === 'Backspace') {\n this.resetListbox();\n this.filterListbox(event.target.value);\n }\n }\n\n toggleExpansionState() {\n const listboxIsExpanded = this.getAttribute('expanded') === 'true';\n this.setAttribute('expanded', !listboxIsExpanded);\n this.buttonTrigger.setAttribute('aria-expanded', !listboxIsExpanded);\n if (this.inputTrigger) {\n this.inputTrigger.setAttribute('aria-expanded', !listboxIsExpanded);\n }\n }\n\n handleSelection(event) {\n if (this.inputTrigger) {\n this.inputTrigger.value = event.detail.label;\n } else {\n this.buttonTrigger.textContent = event.detail.label;\n }\n\n this.toggleExpansionState();\n this.parentElement.dispatchEvent(\n new CustomEvent('combobox.change', {\n detail: {\n value: event.detail.value,\n },\n }),\n );\n }\n\n filterListbox(value) {\n if (this.getAttribute('expanded') !== 'true') {\n this.toggleExpansionState();\n }\n\n this.listbox.dispatchEvent(\n new CustomEvent('combobox.listbox.filter', { detail: value }),\n );\n }\n\n focusListbox(direction) {\n this.resetListbox();\n this.listbox.dispatchEvent(\n new CustomEvent('combobox.listbox.focus', {\n detail: {\n direction,\n },\n }),\n );\n }\n\n resetListbox() {\n this.listbox.dispatchEvent(new CustomEvent('combobox.listbox.reset'));\n }\n}\n\nclass ComboboxListbox extends HTMLElement {\n constructor() {\n super();\n\n this.handleFilter = this.handleFilter.bind(this);\n this.handleFocus = this.handleFocus.bind(this);\n this.handleReset = this.handleReset.bind(this);\n\n this.handleOptionSelection = this.handleOptionSelection.bind(this);\n }\n\n get emptyLabel() {\n return this.getAttribute('empty-label');\n }\n\n get emptyState() {\n return `\n <p id='empty-state' style=\"text-align: center;\">\n ${this.emptyLabel || 'No items'}\n </p>\n `;\n }\n\n connectedCallback() {\n this.setAttribute('role', 'listbox');\n this.setAttribute('id', generateId('listbox'));\n\n this.addEventListener('combobox.listbox.filter', this.handleFilter);\n this.addEventListener('combobox.listbox.focus', this.handleFocus);\n this.addEventListener('combobox.listbox.reset', this.handleReset);\n\n this.triggers = Array.from(\n this.parentElement.querySelectorAll(\n 'smileid-combobox-trigger input, smileid-combobox-trigger button',\n ),\n );\n this.triggers.forEach((node) =>\n node.setAttribute('aria-controls', this.getAttribute('id')),\n );\n\n this.optionNodes = Array.from(\n this.querySelectorAll('smileid-combobox-option'),\n );\n this.selectedNode =\n this.optionNodes.find(\n (node) =>\n !node.hasAttribute('hidden') && node.hasAttribute('aria-selected'),\n ) || this.optionNodes.filter((node) => !node.hasAttribute('hidden'))[0];\n this.selectedNode.setAttribute('tabindex', '0');\n\n this.optionNodes.forEach((node) => {\n node.addEventListener(\n 'combobox.option.select',\n this.handleOptionSelection,\n );\n });\n\n if (this.optionNodes.length === 0) {\n this.innerHTML = this.emptyState;\n }\n }\n\n disconnectedCallback() {\n this.removeEventListener('combobox.listbox.filter', this.handleFilter);\n this.removeEventListener('combobox.listbox.focus', this.handleFocus);\n this.removeEventListener('combobox.listbox.reset', this.handleReset);\n this.optionNodes.forEach((node) => {\n node.removeEventListener(\n 'combobox.option.select',\n this.handleOptionSelection,\n );\n });\n }\n\n static get observedAttributes() {\n return ['search-term'];\n }\n\n attributeChangedCallback(name, oldValue, newValue) {\n switch (name) {\n case 'search-term':\n if (oldValue && !newValue) {\n this.optionNodes.forEach((node) => {\n node.removeAttribute('hidden');\n });\n } else if (newValue) {\n this.filterNodes(newValue);\n }\n break;\n default:\n break;\n }\n }\n\n filterNodes(searchTerm) {\n this.optionNodes.forEach((node) => {\n const value = node.getAttribute('value').toLowerCase();\n const label = node.getAttribute('label').toLowerCase();\n\n const containsSearchTerm =\n value.includes(searchTerm.toLowerCase()) ||\n label.includes(searchTerm.toLowerCase());\n\n if (containsSearchTerm) {\n node.removeAttribute('hidden');\n } else {\n node.setAttribute('hidden', true);\n }\n });\n\n const optionsVisible = this.optionNodes.find(\n (node) => !node.hasAttribute('hidden'),\n );\n const emptyState = this.querySelector('#empty-state');\n\n if (!optionsVisible && !emptyState) {\n this.insertAdjacentHTML('afterbegin', this.emptyState);\n } else if (optionsVisible && emptyState) {\n this.removeChild(emptyState);\n }\n }\n\n handleFilter(event) {\n const searchTerm = event.detail;\n this.setAttribute('search-term', searchTerm);\n }\n\n handleFocus(event) {\n this.setSelected(event.detail.direction);\n }\n\n handleReset() {\n this.optionNodes.forEach((node) => node.setAttribute('tabindex', '-1'));\n }\n\n handleOptionSelection(event) {\n const inputTrigger = this.triggers.filter(\n (node) => node.tagName === 'INPUT',\n )[0];\n\n if (inputTrigger) {\n this.setAttribute('search-term', event.detail.label);\n }\n }\n\n setSelected(direction) {\n const visibleOptions = this.optionNodes.filter(\n (node) => !node.hasAttribute('hidden'),\n );\n this.selectedNode.setAttribute('tabindex', '0');\n const currentIndex = visibleOptions.findIndex(\n (node) => node === this.selectedNode,\n );\n const lastIndex = visibleOptions.length - 1;\n\n let nextIndex;\n switch (direction) {\n case 'First':\n nextIndex = 0;\n break;\n case 'Last':\n nextIndex = lastIndex;\n break;\n case 'Up':\n if (currentIndex === 0) {\n nextIndex = lastIndex;\n } else {\n nextIndex = currentIndex - 1;\n }\n break;\n default:\n if (currentIndex === lastIndex) {\n nextIndex = 0;\n } else {\n nextIndex = currentIndex + 1;\n }\n break;\n }\n\n if (currentIndex !== nextIndex) {\n this.swapSelected(this.selectedNode, visibleOptions[nextIndex]);\n }\n }\n\n swapSelected(currentNode, newNode) {\n currentNode.setAttribute('tabindex', '-1');\n newNode.setAttribute('tabindex', '0');\n\n this.selectedNode = newNode;\n\n // ACTION: ensure the new option is in view\n if (isScrollable(this)) {\n maintainScrollVisibility(this.selectedNode, this);\n }\n\n // ACTION: scroll into view if node is not visible\n if (!isElementInView(newNode)) {\n newNode.scrollIntoView({ behavior: 'smooth', block: 'nearest' });\n }\n\n this.triggers.forEach((node) =>\n node.setAttribute('aria-activedescendant', newNode.id),\n );\n }\n}\n\nclass ComboboxOption extends HTMLElement {\n connectedCallback() {\n this.setAttribute('role', 'option');\n this.setAttribute('tabindex', '-1');\n this.setAttribute('id', generateId('option'));\n\n this.options = Array.from(\n this.parentElement.querySelectorAll('smileid-combobox-option'),\n );\n this.addEventListener('click', this.select);\n }\n\n disconnectedCallback() {\n this.removeEventListener('click', this.select);\n }\n\n get value() {\n return this.getAttribute('value');\n }\n\n get label() {\n return this.getAttribute('label');\n }\n\n select() {\n const selectedOption = this.options.find((node) =>\n node.getAttribute('aria-selected'),\n );\n\n if (selectedOption) {\n selectedOption.removeAttribute('aria-selected');\n }\n\n this.setAttribute('aria-selected', true);\n\n this.dispatchEvent(\n new CustomEvent('combobox.option.select', {\n detail: {\n id: this.getAttribute('id'),\n label: this.label,\n value: this.value,\n },\n }),\n );\n }\n}\n\nconst Root = ComboboxRoot;\nconst Trigger = ComboboxTrigger;\nconst List = ComboboxListbox;\nconst Option = ComboboxOption;\n\nif (\n 'customElements' in window &&\n !window.customElements.get('smileid-combobox')\n) {\n window.customElements.define('smileid-combobox', Root);\n window.customElements.define('smileid-combobox-trigger', Trigger);\n window.customElements.define('smileid-combobox-listbox', List);\n window.customElements.define('smileid-combobox-option', Option);\n}\n\nexport { Root, Trigger, List, Option };\n"],
|
|
5
|
-
"mappings": "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",
|
|
6
|
-
"names": ["generateId", "prefix", "id", "isElementInView", "element", "bounding", "isScrollable", "maintainScrollVisibility", "activeElement", "scrollParent", "offsetHeight", "offsetTop", "parentOffsetHeight", "scrollTop", "isAbove", "isBelow", "ComboboxRoot", "event", "target", "ComboboxTrigger", "e", "node", "key", "selectedOption", "isPrintableCharacter", "str", "listboxIsExpanded", "value", "direction", "ComboboxListbox", "name", "oldValue", "newValue", "searchTerm", "label", "optionsVisible", "emptyState", "visibleOptions", "currentIndex", "lastIndex", "nextIndex", "currentNode", "newNode", "ComboboxOption", "Root", "Trigger", "List", "Option"]
|
|
7
|
-
}
|