@pro6pp/infer-core 0.0.2-beta.9 → 0.1.0-beta.18
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/README.md +1 -1
- package/dist/index.cjs +60 -36
- package/dist/index.d.cts +34 -3
- package/dist/index.d.ts +34 -3
- package/dist/index.global.js +60 -36
- package/dist/index.js +60 -36
- package/dist/styles.css +203 -0
- package/package.json +6 -3
package/README.md
CHANGED
|
@@ -40,7 +40,7 @@ const core = new InferCore({
|
|
|
40
40
|
authKey: 'YOUR_AUTH_KEY',
|
|
41
41
|
country: 'NL',
|
|
42
42
|
onStateChange: (state) => {
|
|
43
|
-
// suggestions, isLoading, isValid, selectedSuggestionIndex, etc.
|
|
43
|
+
// suggestions, isLoading, isValid, value, selectedSuggestionIndex, etc.
|
|
44
44
|
console.log('Current State:', state);
|
|
45
45
|
},
|
|
46
46
|
onSelect: (result) => {
|
package/dist/index.cjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var f=Object.defineProperty;var _=Object.getOwnPropertyDescriptor;var T=Object.getOwnPropertyNames;var L=Object.prototype.hasOwnProperty;var w=(n,t,e)=>t in n?f(n,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):n[t]=e;var A=(n,t)=>{for(var e in t)f(n,e,{get:t[e],enumerable:!0})},E=(n,t,e,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of T(t))!L.call(n,r)&&r!==e&&f(n,r,{get:()=>t[r],enumerable:!(i=_(t,r))||i.enumerable});return n};var R=n=>E(f({},"__esModule",{value:!0}),n);var l=(n,t,e)=>w(n,typeof t!="symbol"?t+"":t,e);var U={};A(U,{DEFAULT_STYLES:()=>I,INITIAL_STATE:()=>y,InferCore:()=>S,formatLabelByInputOrder:()=>m,getHighlightSegments:()=>D});module.exports=R(U);function v(n){return n.toLowerCase().trim()}function $(n){return n.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")}function F(n,t){let e=v(n),i=v(t);if(i.includes(" "))return e.indexOf(i);let s=new RegExp(`(?:^|[,\\s])${$(i)}(?:$|[,\\s])`,"g").exec(e);if(s){let o=s.index,p=e[o];return p===","||p===" "?o+1:o}return-1}function M(n,t){let e=[],i=[];t.street&&i.push({value:t.street,type:"street"}),t.city&&i.push({value:t.city,type:"city"}),t.postcode&&i.push({value:t.postcode,type:"postcode"}),t.street_number!==void 0&&t.street_number!==null&&i.push({value:String(t.street_number),type:"street_number"}),t.addition&&i.push({value:t.addition,type:"addition"});for(let r of i){let s=F(n,r.value);s!==-1&&e.push({type:r.type,value:r.value,position:s})}return e.sort((r,s)=>r.position-s.position),e}function m(n,t){if(!t||!n)return"";let e=M(n,t),i=new Set(e.map(o=>o.type)),r=[];for(let o of e)r.push(o.value);let s=["street","street_number","addition","postcode","city"];for(let o of s){if(i.has(o))continue;let p;switch(o){case"street":p=t.street;break;case"city":p=t.city;break;case"street_number":p=t.street_number!==void 0?String(t.street_number):void 0;break;case"postcode":p=t.postcode;break;case"addition":p=t.addition;break}p&&r.push(p)}return r.join(", ")}var g={API_URL:"https://api.pro6pp.nl/v2",LIMIT:20,DEBOUNCE_MS:150,MIN_DEBOUNCE_MS:50,MAX_RETRIES:0},x={DIGITS_1_3:/^[0-9]{1,3}$/,STREET_NUMBER_PREFIX:/^(\d+)\s*,\s*$/},y={query:"",stage:null,cities:[],streets:[],suggestions:[],isValid:!1,value:null,isError:!1,isLoading:!1,hasMore:!1,selectedSuggestionIndex:-1},S=class{constructor(t){l(this,"country");l(this,"authKey");l(this,"explicitApiUrl");l(this,"baseLimit");l(this,"currentLimit");l(this,"maxRetries");l(this,"language");l(this,"fetcher");l(this,"onStateChange");l(this,"onSelect");l(this,"state");l(this,"abortController",null);l(this,"debouncedFetch");this.country=t.country,this.authKey=t.authKey,this.explicitApiUrl=t.apiUrl,this.baseLimit=t.limit||g.LIMIT,this.currentLimit=this.baseLimit,this.language=t.language;let e=t.maxRetries!==void 0?t.maxRetries:g.MAX_RETRIES;this.maxRetries=Math.max(0,Math.min(e,10)),this.fetcher=t.fetcher||((s,o)=>fetch(s,o)),this.onStateChange=t.onStateChange||(()=>{}),this.onSelect=t.onSelect||(()=>{}),this.state={...y};let i=t.debounceMs!==void 0?t.debounceMs:g.DEBOUNCE_MS,r=Math.max(i,g.MIN_DEBOUNCE_MS);this.debouncedFetch=this.debounce(s=>this.executeFetch(s),r)}handleInput(t){this.currentLimit=this.baseLimit;let e=this.state.stage==="final"&&t!==this.state.query;this.updateState({query:t,isValid:!1,value:null,isLoading:!!t.trim(),selectedSuggestionIndex:-1,hasMore:!1,stage:e?null:this.state.stage}),e&&this.onSelect(null),this.debouncedFetch(t)}loadMore(){this.state.isLoading||(this.currentLimit+=this.baseLimit,this.updateState({isLoading:!0}),this.executeFetch(this.state.query))}handleKeyDown(t){let e=t.target;if(!e)return;let i=this.state.cities.length+this.state.streets.length+this.state.suggestions.length;if(i>0){if(t.key==="ArrowDown"){t.preventDefault();let s=this.state.selectedSuggestionIndex+1;s>=i&&(s=0),this.updateState({selectedSuggestionIndex:s});return}if(t.key==="ArrowUp"){t.preventDefault();let s=this.state.selectedSuggestionIndex-1;s<0&&(s=i-1),this.updateState({selectedSuggestionIndex:s});return}if(t.key==="Enter"&&this.state.selectedSuggestionIndex>=0){t.preventDefault();let o=[...this.state.cities,...this.state.streets,...this.state.suggestions][this.state.selectedSuggestionIndex];o&&(this.selectItem(o),this.updateState({selectedSuggestionIndex:-1}));return}}let r=e.value;if(t.key===" "&&this.shouldAutoInsertComma(r)){t.preventDefault();let s=`${r.trim()}, `;this.updateQueryAndFetch(s)}}selectItem(t){this.debouncedFetch.cancel(),this.abortController&&this.abortController.abort();let e=typeof t=="string"?t:t.label,i=e;typeof t!="string"&&typeof t.value=="string"&&(i=t.value);let r=typeof t!="string"&&typeof t.value=="object"?t.value:void 0,s=!!r&&Object.keys(r).length>0;if(this.state.stage==="final"||s){let p=e;if(r&&Object.keys(r).length>0){let{street:c,street_number:a,postcode:d,city:u,addition:h}=r;if(c&&a&&u){let b=h?` ${h}`:"",C=d?`${d}, `:"";p=`${c}, ${a}${b}, ${C}${u}`}}return this.finishSelection(p,r),!0}let o=typeof t!="string"?t.subtitle:null;return this.processSelection(i,o),!1}shouldAutoInsertComma(t){if(!t.includes(",")&&x.DIGITS_1_3.test(t.trim()))return!0;if(this.state.stage==="street_number"){let i=this.getCurrentFragment(t);return x.DIGITS_1_3.test(i)}return!1}finishSelection(t,e){this.updateState({query:t,suggestions:[],cities:[],streets:[],isValid:!0,value:e||null,stage:"final",hasMore:!1}),this.onSelect(e||t)}processSelection(t,e){let{stage:i,query:r}=this.state,s=r;if(e&&(i==="city"||i==="street"||i==="mixed")){if(i==="city")s=`${e}, ${t}, `;else{let a=this.getQueryPrefix(r),d=!a||!a.includes(e),u=a;if(a&&e){let h=a.match(x.STREET_NUMBER_PREFIX);if(h){let b=h[1];e.startsWith(b)&&(u="")}}d?s=u?`${u} ${t}, ${e}, `:`${t}, ${e}, `:s=u?`${u} ${t}, `:`${t}, `}this.updateQueryAndFetch(s);return}if(i==="direct"||i==="addition"){this.finishSelection(t);return}!r.includes(",")&&(i==="city"||i==="street"||i==="street_number_first")?s=`${t}, `:(s=this.replaceLastSegment(r,t),i!=="street_number"&&(s+=", ")),this.updateQueryAndFetch(s)}executeFetch(t,e=0){let i=(t||"").toString();if(!i.trim()){this.abortController?.abort(),this.resetState();return}e===0&&(this.updateState({isError:!1}),this.abortController&&this.abortController.abort(),this.abortController=new AbortController);let r=this.abortController?.signal,s=this.explicitApiUrl?this.explicitApiUrl:`${g.API_URL}/infer/${this.country.toLowerCase()}`,o=new URLSearchParams({query:i,limit:this.currentLimit.toString()});this.explicitApiUrl&&o.append("country",this.country.toLowerCase()),this.authKey&&o.set("authKey",this.authKey),this.language&&o.set("language",this.language);let p=s.includes("?")?"&":"?",c=`${s}${p}${o.toString()}`;this.fetcher(c,{signal:r}).then(a=>{if(!a.ok){if(e<this.maxRetries&&(a.status>=500||a.status===429))return this.retry(t,e,r);throw new Error("Network error")}return a.json()}).then(a=>{a&&this.mapResponseToState(a)}).catch(a=>{if(a.name!=="AbortError"){if(e<this.maxRetries)return this.retry(t,e,r);this.updateState({isError:!0,isLoading:!1})}})}retry(t,e,i){if(i?.aborted)return;let r=Math.pow(2,e)*200;setTimeout(()=>{i?.aborted||this.executeFetch(t,e+1)},r)}mapResponseToState(t){let e={stage:t.stage,isLoading:!1},i=t.suggestions||[],r=[],s=new Set;for(let p of i){let c=`${p.label}|${p.subtitle||""}|${JSON.stringify(p.value||{})}`;if(!s.has(c)){s.add(c);let a=this.reformatSuggestionLabel(p);r.push(a)}}let o=r.length+(t.cities?.length||0)+(t.streets?.length||0);e.hasMore=o>=this.currentLimit,t.stage==="mixed"?(e.cities=t.cities||[],e.streets=t.streets||[],e.cities?.length===0&&e.streets?.length===0?e.suggestions=r:e.suggestions=[]):(e.suggestions=r,e.cities=[],e.streets=[]),e.isValid=t.stage==="final",this.updateState(e),e.isValid&&r.length===1&&this.selectItem(r[0])}reformatSuggestionLabel(t){if(!t.value||typeof t.value=="string")return t;let e=t.value;if(!e.street||!e.city)return t;let i=m(this.state.query,e);return i?{...t,label:i}:t}updateQueryAndFetch(t){this.updateState({query:t,suggestions:[],cities:[],streets:[],isValid:!1,value:null,isLoading:!0,hasMore:!1}),this.debouncedFetch(t)}replaceLastSegment(t,e){let i=t.lastIndexOf(",");return i===-1?e:`${t.slice(0,i+1)} ${e}`.trim()}getQueryPrefix(t){let e=t.lastIndexOf(",");return e===-1?"":t.slice(0,e+1).trimEnd()}getCurrentFragment(t){return(t.split(",").slice(-1)[0]??"").trim()}resetState(){this.updateState({...y,query:this.state.query})}updateState(t){this.state={...this.state,...t},this.onStateChange(this.state)}debounce(t,e){let i,r=(...s)=>{i&&clearTimeout(i),i=setTimeout(()=>t.apply(this,s),e)};return r.cancel=()=>{i&&(clearTimeout(i),i=void 0)},r}};function k(n){if(n.length===0)return n;let t=[];for(let e of n){let i=t[t.length-1];i&&i.match===e.match?i.text+=e.text:t.push({text:e.text,match:e.match})}return t}function D(n,t){if(!t||!n)return[{text:n,match:!1}];let e=[],i=n.toLowerCase(),r=t.toLowerCase(),s=0,o=0;for(let a=0;a<n.length;a++){if(!(s<t.length&&i[a]===r[s]))continue;a>o&&e.push({text:n.slice(o,a),match:!1}),e.push({text:n[a],match:!0}),s++,o=a+1}return o<n.length&&e.push({text:n.slice(o),match:!1}),s===t.length?k(e):[{text:n,match:!1}]}var I=`
|
|
2
2
|
.pro6pp-wrapper {
|
|
3
3
|
position: relative;
|
|
4
4
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
|
@@ -20,6 +20,12 @@
|
|
|
20
20
|
appearance: none;
|
|
21
21
|
transition: border-color 0.2s, box-shadow 0.2s;
|
|
22
22
|
}
|
|
23
|
+
|
|
24
|
+
.pro6pp-input::placeholder {
|
|
25
|
+
font-size: 16px;
|
|
26
|
+
color: #a3a3a3;
|
|
27
|
+
}
|
|
28
|
+
|
|
23
29
|
.pro6pp-input:focus {
|
|
24
30
|
outline: none;
|
|
25
31
|
border-color: #3b82f6;
|
|
@@ -42,8 +48,8 @@
|
|
|
42
48
|
.pro6pp-clear-button {
|
|
43
49
|
background: none;
|
|
44
50
|
border: none;
|
|
45
|
-
width:
|
|
46
|
-
height:
|
|
51
|
+
width: 32px;
|
|
52
|
+
height: 32px;
|
|
47
53
|
cursor: pointer;
|
|
48
54
|
color: #a3a3a3;
|
|
49
55
|
display: flex;
|
|
@@ -65,17 +71,6 @@
|
|
|
65
71
|
background-color: #f3f4f6;
|
|
66
72
|
}
|
|
67
73
|
|
|
68
|
-
.pro6pp-loader {
|
|
69
|
-
width: 20px;
|
|
70
|
-
height: 20px;
|
|
71
|
-
margin: 0 8px;
|
|
72
|
-
border: 2px solid #e0e0e0;
|
|
73
|
-
border-top-color: #6b7280;
|
|
74
|
-
border-radius: 50%;
|
|
75
|
-
animation: pro6pp-spin 0.6s linear infinite;
|
|
76
|
-
flex-shrink: 0;
|
|
77
|
-
}
|
|
78
|
-
|
|
79
74
|
.pro6pp-dropdown {
|
|
80
75
|
position: absolute;
|
|
81
76
|
top: 100%;
|
|
@@ -88,7 +83,7 @@
|
|
|
88
83
|
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
|
89
84
|
z-index: 9999;
|
|
90
85
|
padding: 0;
|
|
91
|
-
max-height:
|
|
86
|
+
max-height: 280px;
|
|
92
87
|
overflow-y: auto;
|
|
93
88
|
display: flex;
|
|
94
89
|
flex-direction: column;
|
|
@@ -96,7 +91,7 @@
|
|
|
96
91
|
|
|
97
92
|
@media (max-height: 500px) {
|
|
98
93
|
.pro6pp-dropdown {
|
|
99
|
-
max-height:
|
|
94
|
+
max-height: 180px;
|
|
100
95
|
}
|
|
101
96
|
}
|
|
102
97
|
|
|
@@ -112,7 +107,8 @@
|
|
|
112
107
|
cursor: pointer;
|
|
113
108
|
display: flex;
|
|
114
109
|
align-items: center;
|
|
115
|
-
font-size:
|
|
110
|
+
font-size: 15px;
|
|
111
|
+
line-height: 1.4;
|
|
116
112
|
color: #374151;
|
|
117
113
|
border-bottom: 1px solid #f3f4f6;
|
|
118
114
|
transition: background-color 0.1s;
|
|
@@ -134,19 +130,33 @@
|
|
|
134
130
|
}
|
|
135
131
|
|
|
136
132
|
.pro6pp-item__label {
|
|
137
|
-
font-weight:
|
|
138
|
-
flex-shrink:
|
|
133
|
+
font-weight: 400;
|
|
134
|
+
flex-shrink: 1;
|
|
135
|
+
overflow: hidden;
|
|
136
|
+
text-overflow: ellipsis;
|
|
137
|
+
white-space: nowrap;
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
.pro6pp-item__label--match {
|
|
141
|
+
font-weight: 520;
|
|
139
142
|
}
|
|
143
|
+
|
|
144
|
+
.pro6pp-item__label--unmatched {
|
|
145
|
+
font-weight: 400;
|
|
146
|
+
color: #4b5563;
|
|
147
|
+
}
|
|
148
|
+
|
|
140
149
|
.pro6pp-item__subtitle {
|
|
141
|
-
font-size: 14px;
|
|
142
150
|
color: #6b7280;
|
|
143
|
-
flex-
|
|
151
|
+
flex-shrink: 0;
|
|
144
152
|
}
|
|
153
|
+
|
|
145
154
|
.pro6pp-item__chevron {
|
|
146
155
|
color: #d1d5db;
|
|
147
156
|
display: flex;
|
|
148
157
|
align-items: center;
|
|
149
158
|
margin-left: auto;
|
|
159
|
+
padding-left: 8px;
|
|
150
160
|
}
|
|
151
161
|
|
|
152
162
|
.pro6pp-no-results {
|
|
@@ -156,25 +166,39 @@
|
|
|
156
166
|
text-align: center;
|
|
157
167
|
}
|
|
158
168
|
|
|
159
|
-
.pro6pp-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
flex-shrink: 0;
|
|
170
|
-
touch-action: manipulation;
|
|
169
|
+
.pro6pp-loader-item {
|
|
170
|
+
padding: 10px 12px;
|
|
171
|
+
color: #6b7280;
|
|
172
|
+
font-size: 0.875rem;
|
|
173
|
+
display: flex;
|
|
174
|
+
align-items: center;
|
|
175
|
+
justify-content: center;
|
|
176
|
+
gap: 8px;
|
|
177
|
+
background-color: #f9fafb;
|
|
178
|
+
border-top: 1px solid #f3f4f6;
|
|
171
179
|
}
|
|
172
180
|
|
|
173
|
-
.pro6pp-
|
|
174
|
-
|
|
181
|
+
.pro6pp-mini-spinner {
|
|
182
|
+
width: 14px;
|
|
183
|
+
height: 14px;
|
|
184
|
+
border: 2px solid #e5e7eb;
|
|
185
|
+
border-top-color: #6b7280;
|
|
186
|
+
border-radius: 50%;
|
|
187
|
+
animation: pro6pp-spin 0.6s linear infinite;
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
@media (max-width: 640px) {
|
|
191
|
+
.pro6pp-input {
|
|
192
|
+
font-size: 16px;
|
|
193
|
+
padding: 10px 12px;
|
|
194
|
+
}
|
|
195
|
+
.pro6pp-item {
|
|
196
|
+
padding: 10px 12px;
|
|
197
|
+
font-size: 14px;
|
|
198
|
+
}
|
|
175
199
|
}
|
|
176
200
|
|
|
177
201
|
@keyframes pro6pp-spin {
|
|
178
202
|
to { transform: rotate(360deg); }
|
|
179
203
|
}
|
|
180
|
-
`;0&&(module.exports={DEFAULT_STYLES,INITIAL_STATE,InferCore,getHighlightSegments});
|
|
204
|
+
`;0&&(module.exports={DEFAULT_STYLES,INITIAL_STATE,InferCore,formatLabelByInputOrder,getHighlightSegments});
|
package/dist/index.d.cts
CHANGED
|
@@ -1,7 +1,11 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Supported ISO 3166-1 alpha-2 country codes.
|
|
3
3
|
*/
|
|
4
|
-
type CountryCode = 'NL' | 'DE';
|
|
4
|
+
type CountryCode = 'NL' | 'DE' | 'BE' | 'AT' | 'DK' | 'CH' | 'LU' | 'FR' | (string & {});
|
|
5
|
+
/**
|
|
6
|
+
* Supported language codes for address labels.
|
|
7
|
+
*/
|
|
8
|
+
type LanguageCode = 'nl' | 'fr' | 'de' | (string & {});
|
|
5
9
|
/**
|
|
6
10
|
* The current step in the address inference process.
|
|
7
11
|
* - `empty`: No input yet.
|
|
@@ -64,6 +68,8 @@ interface InferState {
|
|
|
64
68
|
suggestions: InferResult[];
|
|
65
69
|
/** Flag indicating if the current selection is a complete, valid address. */
|
|
66
70
|
isValid: boolean;
|
|
71
|
+
/** The complete address object if valid, otherwise null. */
|
|
72
|
+
value: AddressValue | null;
|
|
67
73
|
/** Flag indicating if the last API request failed. */
|
|
68
74
|
isError: boolean;
|
|
69
75
|
/** Flag indicating if a network request is currently in progress. */
|
|
@@ -122,6 +128,12 @@ interface InferConfig {
|
|
|
122
128
|
* @default 0
|
|
123
129
|
*/
|
|
124
130
|
maxRetries?: number;
|
|
131
|
+
/**
|
|
132
|
+
* Language code for response labels.
|
|
133
|
+
* Affects the language of returned address labels.
|
|
134
|
+
* Only applicable for BE country code.
|
|
135
|
+
*/
|
|
136
|
+
language?: LanguageCode;
|
|
125
137
|
/**
|
|
126
138
|
* Callback triggered whenever the internal state (suggestions, loading status, etc.) updates.
|
|
127
139
|
*/
|
|
@@ -156,6 +168,7 @@ declare class InferCore {
|
|
|
156
168
|
private baseLimit;
|
|
157
169
|
private currentLimit;
|
|
158
170
|
private maxRetries;
|
|
171
|
+
private language?;
|
|
159
172
|
private fetcher;
|
|
160
173
|
private onStateChange;
|
|
161
174
|
private onSelect;
|
|
@@ -207,6 +220,12 @@ declare class InferCore {
|
|
|
207
220
|
private executeFetch;
|
|
208
221
|
private retry;
|
|
209
222
|
private mapResponseToState;
|
|
223
|
+
/**
|
|
224
|
+
* Reformats a suggestion's label based on the user's input order.
|
|
225
|
+
* If the suggestion has a structured value object, we reorder the label
|
|
226
|
+
* to match how the user typed the components.
|
|
227
|
+
*/
|
|
228
|
+
private reformatSuggestionLabel;
|
|
210
229
|
private updateQueryAndFetch;
|
|
211
230
|
private replaceLastSegment;
|
|
212
231
|
private getQueryPrefix;
|
|
@@ -218,9 +237,21 @@ declare class InferCore {
|
|
|
218
237
|
|
|
219
238
|
/**
|
|
220
239
|
* Splits text into matched and unmatched segments based on a fuzzy query sequence.
|
|
240
|
+
* Consecutive matched characters are merged into single segments for cleaner rendering.
|
|
221
241
|
*/
|
|
222
242
|
declare function getHighlightSegments(text: string, query: string): HighlightSegment[];
|
|
223
243
|
|
|
224
|
-
|
|
244
|
+
/**
|
|
245
|
+
* Formats a label for display based on the user's input order.
|
|
246
|
+
* Components the user typed appear first (in their order),
|
|
247
|
+
* followed by components they didn't type (new info from API).
|
|
248
|
+
*
|
|
249
|
+
* @param query The user's current query string
|
|
250
|
+
* @param value The structured address value from the API
|
|
251
|
+
* @returns A formatted label string
|
|
252
|
+
*/
|
|
253
|
+
declare function formatLabelByInputOrder(query: string, value: AddressValue): string;
|
|
254
|
+
|
|
255
|
+
declare const DEFAULT_STYLES = "\n .pro6pp-wrapper {\n position: relative;\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n box-sizing: border-box;\n width: 100%;\n -webkit-tap-highlight-color: transparent;\n }\n .pro6pp-wrapper * {\n box-sizing: border-box;\n }\n .pro6pp-input {\n width: 100%;\n padding: 12px 14px;\n padding-right: 48px;\n border: 1px solid #e0e0e0;\n border-radius: 8px;\n font-size: 16px;\n line-height: 1.5;\n appearance: none;\n transition: border-color 0.2s, box-shadow 0.2s;\n }\n\n .pro6pp-input::placeholder {\n font-size: 16px;\n color: #a3a3a3;\n }\n\n .pro6pp-input:focus {\n outline: none;\n border-color: #3b82f6;\n box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);\n }\n\n .pro6pp-input-addons {\n position: absolute;\n right: 4px;\n top: 0;\n bottom: 0;\n display: flex;\n align-items: center;\n pointer-events: none;\n }\n .pro6pp-input-addons > * {\n pointer-events: auto;\n }\n\n .pro6pp-clear-button {\n background: none;\n border: none;\n width: 32px;\n height: 32px;\n cursor: pointer;\n color: #a3a3a3;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n transition: color 0.2s, background-color 0.2s;\n touch-action: manipulation;\n }\n\n @media (hover: hover) {\n .pro6pp-clear-button:hover {\n color: #1f2937;\n background-color: #f3f4f6;\n }\n }\n\n .pro6pp-clear-button:active {\n background-color: #f3f4f6;\n }\n\n .pro6pp-dropdown {\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n margin-top: 4px;\n background: #ffffff;\n border: 1px solid #e5e7eb;\n border-radius: 6px;\n box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n z-index: 9999;\n padding: 0;\n max-height: 280px;\n overflow-y: auto;\n display: flex;\n flex-direction: column;\n }\n\n @media (max-height: 500px) {\n .pro6pp-dropdown {\n max-height: 180px;\n }\n }\n\n .pro6pp-list {\n list-style: none;\n margin: 0;\n padding: 0;\n width: 100%;\n }\n\n .pro6pp-item {\n padding: 12px 14px;\n cursor: pointer;\n display: flex;\n align-items: center;\n font-size: 15px;\n line-height: 1.4;\n color: #374151;\n border-bottom: 1px solid #f3f4f6;\n transition: background-color 0.1s;\n flex-shrink: 0;\n }\n\n .pro6pp-item:last-child {\n border-bottom: none;\n }\n\n @media (hover: hover) {\n .pro6pp-item:hover, .pro6pp-item--active {\n background-color: #f9fafb;\n }\n }\n\n .pro6pp-item:active {\n background-color: #f3f4f6;\n }\n\n .pro6pp-item__label {\n font-weight: 400;\n flex-shrink: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .pro6pp-item__label--match {\n font-weight: 520;\n }\n\n .pro6pp-item__label--unmatched {\n font-weight: 400;\n color: #4b5563;\n }\n\n .pro6pp-item__subtitle {\n color: #6b7280;\n flex-shrink: 0;\n }\n\n .pro6pp-item__chevron {\n color: #d1d5db;\n display: flex;\n align-items: center;\n margin-left: auto;\n padding-left: 8px;\n }\n\n .pro6pp-no-results {\n padding: 24px 16px;\n color: #6b7280;\n font-size: 15px;\n text-align: center;\n }\n\n .pro6pp-loader-item {\n padding: 10px 12px;\n color: #6b7280;\n font-size: 0.875rem;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n background-color: #f9fafb;\n border-top: 1px solid #f3f4f6;\n }\n\n .pro6pp-mini-spinner {\n width: 14px;\n height: 14px;\n border: 2px solid #e5e7eb;\n border-top-color: #6b7280;\n border-radius: 50%;\n animation: pro6pp-spin 0.6s linear infinite;\n }\n\n @media (max-width: 640px) {\n .pro6pp-input {\n font-size: 16px;\n padding: 10px 12px;\n }\n .pro6pp-item {\n padding: 10px 12px;\n font-size: 14px;\n }\n }\n\n @keyframes pro6pp-spin {\n to { transform: rotate(360deg); }\n }\n";
|
|
225
256
|
|
|
226
|
-
export { type AddressValue, type CountryCode, DEFAULT_STYLES, type Fetcher, type HighlightSegment, INITIAL_STATE, type InferConfig, InferCore, type InferResult, type InferState, type Stage, getHighlightSegments };
|
|
257
|
+
export { type AddressValue, type CountryCode, DEFAULT_STYLES, type Fetcher, type HighlightSegment, INITIAL_STATE, type InferConfig, InferCore, type InferResult, type InferState, type LanguageCode, type Stage, formatLabelByInputOrder, getHighlightSegments };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,7 +1,11 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Supported ISO 3166-1 alpha-2 country codes.
|
|
3
3
|
*/
|
|
4
|
-
type CountryCode = 'NL' | 'DE';
|
|
4
|
+
type CountryCode = 'NL' | 'DE' | 'BE' | 'AT' | 'DK' | 'CH' | 'LU' | 'FR' | (string & {});
|
|
5
|
+
/**
|
|
6
|
+
* Supported language codes for address labels.
|
|
7
|
+
*/
|
|
8
|
+
type LanguageCode = 'nl' | 'fr' | 'de' | (string & {});
|
|
5
9
|
/**
|
|
6
10
|
* The current step in the address inference process.
|
|
7
11
|
* - `empty`: No input yet.
|
|
@@ -64,6 +68,8 @@ interface InferState {
|
|
|
64
68
|
suggestions: InferResult[];
|
|
65
69
|
/** Flag indicating if the current selection is a complete, valid address. */
|
|
66
70
|
isValid: boolean;
|
|
71
|
+
/** The complete address object if valid, otherwise null. */
|
|
72
|
+
value: AddressValue | null;
|
|
67
73
|
/** Flag indicating if the last API request failed. */
|
|
68
74
|
isError: boolean;
|
|
69
75
|
/** Flag indicating if a network request is currently in progress. */
|
|
@@ -122,6 +128,12 @@ interface InferConfig {
|
|
|
122
128
|
* @default 0
|
|
123
129
|
*/
|
|
124
130
|
maxRetries?: number;
|
|
131
|
+
/**
|
|
132
|
+
* Language code for response labels.
|
|
133
|
+
* Affects the language of returned address labels.
|
|
134
|
+
* Only applicable for BE country code.
|
|
135
|
+
*/
|
|
136
|
+
language?: LanguageCode;
|
|
125
137
|
/**
|
|
126
138
|
* Callback triggered whenever the internal state (suggestions, loading status, etc.) updates.
|
|
127
139
|
*/
|
|
@@ -156,6 +168,7 @@ declare class InferCore {
|
|
|
156
168
|
private baseLimit;
|
|
157
169
|
private currentLimit;
|
|
158
170
|
private maxRetries;
|
|
171
|
+
private language?;
|
|
159
172
|
private fetcher;
|
|
160
173
|
private onStateChange;
|
|
161
174
|
private onSelect;
|
|
@@ -207,6 +220,12 @@ declare class InferCore {
|
|
|
207
220
|
private executeFetch;
|
|
208
221
|
private retry;
|
|
209
222
|
private mapResponseToState;
|
|
223
|
+
/**
|
|
224
|
+
* Reformats a suggestion's label based on the user's input order.
|
|
225
|
+
* If the suggestion has a structured value object, we reorder the label
|
|
226
|
+
* to match how the user typed the components.
|
|
227
|
+
*/
|
|
228
|
+
private reformatSuggestionLabel;
|
|
210
229
|
private updateQueryAndFetch;
|
|
211
230
|
private replaceLastSegment;
|
|
212
231
|
private getQueryPrefix;
|
|
@@ -218,9 +237,21 @@ declare class InferCore {
|
|
|
218
237
|
|
|
219
238
|
/**
|
|
220
239
|
* Splits text into matched and unmatched segments based on a fuzzy query sequence.
|
|
240
|
+
* Consecutive matched characters are merged into single segments for cleaner rendering.
|
|
221
241
|
*/
|
|
222
242
|
declare function getHighlightSegments(text: string, query: string): HighlightSegment[];
|
|
223
243
|
|
|
224
|
-
|
|
244
|
+
/**
|
|
245
|
+
* Formats a label for display based on the user's input order.
|
|
246
|
+
* Components the user typed appear first (in their order),
|
|
247
|
+
* followed by components they didn't type (new info from API).
|
|
248
|
+
*
|
|
249
|
+
* @param query The user's current query string
|
|
250
|
+
* @param value The structured address value from the API
|
|
251
|
+
* @returns A formatted label string
|
|
252
|
+
*/
|
|
253
|
+
declare function formatLabelByInputOrder(query: string, value: AddressValue): string;
|
|
254
|
+
|
|
255
|
+
declare const DEFAULT_STYLES = "\n .pro6pp-wrapper {\n position: relative;\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n box-sizing: border-box;\n width: 100%;\n -webkit-tap-highlight-color: transparent;\n }\n .pro6pp-wrapper * {\n box-sizing: border-box;\n }\n .pro6pp-input {\n width: 100%;\n padding: 12px 14px;\n padding-right: 48px;\n border: 1px solid #e0e0e0;\n border-radius: 8px;\n font-size: 16px;\n line-height: 1.5;\n appearance: none;\n transition: border-color 0.2s, box-shadow 0.2s;\n }\n\n .pro6pp-input::placeholder {\n font-size: 16px;\n color: #a3a3a3;\n }\n\n .pro6pp-input:focus {\n outline: none;\n border-color: #3b82f6;\n box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);\n }\n\n .pro6pp-input-addons {\n position: absolute;\n right: 4px;\n top: 0;\n bottom: 0;\n display: flex;\n align-items: center;\n pointer-events: none;\n }\n .pro6pp-input-addons > * {\n pointer-events: auto;\n }\n\n .pro6pp-clear-button {\n background: none;\n border: none;\n width: 32px;\n height: 32px;\n cursor: pointer;\n color: #a3a3a3;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n transition: color 0.2s, background-color 0.2s;\n touch-action: manipulation;\n }\n\n @media (hover: hover) {\n .pro6pp-clear-button:hover {\n color: #1f2937;\n background-color: #f3f4f6;\n }\n }\n\n .pro6pp-clear-button:active {\n background-color: #f3f4f6;\n }\n\n .pro6pp-dropdown {\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n margin-top: 4px;\n background: #ffffff;\n border: 1px solid #e5e7eb;\n border-radius: 6px;\n box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n z-index: 9999;\n padding: 0;\n max-height: 280px;\n overflow-y: auto;\n display: flex;\n flex-direction: column;\n }\n\n @media (max-height: 500px) {\n .pro6pp-dropdown {\n max-height: 180px;\n }\n }\n\n .pro6pp-list {\n list-style: none;\n margin: 0;\n padding: 0;\n width: 100%;\n }\n\n .pro6pp-item {\n padding: 12px 14px;\n cursor: pointer;\n display: flex;\n align-items: center;\n font-size: 15px;\n line-height: 1.4;\n color: #374151;\n border-bottom: 1px solid #f3f4f6;\n transition: background-color 0.1s;\n flex-shrink: 0;\n }\n\n .pro6pp-item:last-child {\n border-bottom: none;\n }\n\n @media (hover: hover) {\n .pro6pp-item:hover, .pro6pp-item--active {\n background-color: #f9fafb;\n }\n }\n\n .pro6pp-item:active {\n background-color: #f3f4f6;\n }\n\n .pro6pp-item__label {\n font-weight: 400;\n flex-shrink: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .pro6pp-item__label--match {\n font-weight: 520;\n }\n\n .pro6pp-item__label--unmatched {\n font-weight: 400;\n color: #4b5563;\n }\n\n .pro6pp-item__subtitle {\n color: #6b7280;\n flex-shrink: 0;\n }\n\n .pro6pp-item__chevron {\n color: #d1d5db;\n display: flex;\n align-items: center;\n margin-left: auto;\n padding-left: 8px;\n }\n\n .pro6pp-no-results {\n padding: 24px 16px;\n color: #6b7280;\n font-size: 15px;\n text-align: center;\n }\n\n .pro6pp-loader-item {\n padding: 10px 12px;\n color: #6b7280;\n font-size: 0.875rem;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n background-color: #f9fafb;\n border-top: 1px solid #f3f4f6;\n }\n\n .pro6pp-mini-spinner {\n width: 14px;\n height: 14px;\n border: 2px solid #e5e7eb;\n border-top-color: #6b7280;\n border-radius: 50%;\n animation: pro6pp-spin 0.6s linear infinite;\n }\n\n @media (max-width: 640px) {\n .pro6pp-input {\n font-size: 16px;\n padding: 10px 12px;\n }\n .pro6pp-item {\n padding: 10px 12px;\n font-size: 14px;\n }\n }\n\n @keyframes pro6pp-spin {\n to { transform: rotate(360deg); }\n }\n";
|
|
225
256
|
|
|
226
|
-
export { type AddressValue, type CountryCode, DEFAULT_STYLES, type Fetcher, type HighlightSegment, INITIAL_STATE, type InferConfig, InferCore, type InferResult, type InferState, type Stage, getHighlightSegments };
|
|
257
|
+
export { type AddressValue, type CountryCode, DEFAULT_STYLES, type Fetcher, type HighlightSegment, INITIAL_STATE, type InferConfig, InferCore, type InferResult, type InferState, type LanguageCode, type Stage, formatLabelByInputOrder, getHighlightSegments };
|
package/dist/index.global.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";var Pro6PPCore=(()=>{var
|
|
1
|
+
"use strict";var Pro6PPCore=(()=>{var f=Object.defineProperty;var _=Object.getOwnPropertyDescriptor;var T=Object.getOwnPropertyNames;var L=Object.prototype.hasOwnProperty;var w=(n,t,e)=>t in n?f(n,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):n[t]=e;var A=(n,t)=>{for(var e in t)f(n,e,{get:t[e],enumerable:!0})},E=(n,t,e,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of T(t))!L.call(n,r)&&r!==e&&f(n,r,{get:()=>t[r],enumerable:!(i=_(t,r))||i.enumerable});return n};var R=n=>E(f({},"__esModule",{value:!0}),n);var l=(n,t,e)=>w(n,typeof t!="symbol"?t+"":t,e);var U={};A(U,{DEFAULT_STYLES:()=>I,INITIAL_STATE:()=>y,InferCore:()=>S,formatLabelByInputOrder:()=>m,getHighlightSegments:()=>D});function v(n){return n.toLowerCase().trim()}function $(n){return n.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")}function F(n,t){let e=v(n),i=v(t);if(i.includes(" "))return e.indexOf(i);let s=new RegExp(`(?:^|[,\\s])${$(i)}(?:$|[,\\s])`,"g").exec(e);if(s){let o=s.index,p=e[o];return p===","||p===" "?o+1:o}return-1}function M(n,t){let e=[],i=[];t.street&&i.push({value:t.street,type:"street"}),t.city&&i.push({value:t.city,type:"city"}),t.postcode&&i.push({value:t.postcode,type:"postcode"}),t.street_number!==void 0&&t.street_number!==null&&i.push({value:String(t.street_number),type:"street_number"}),t.addition&&i.push({value:t.addition,type:"addition"});for(let r of i){let s=F(n,r.value);s!==-1&&e.push({type:r.type,value:r.value,position:s})}return e.sort((r,s)=>r.position-s.position),e}function m(n,t){if(!t||!n)return"";let e=M(n,t),i=new Set(e.map(o=>o.type)),r=[];for(let o of e)r.push(o.value);let s=["street","street_number","addition","postcode","city"];for(let o of s){if(i.has(o))continue;let p;switch(o){case"street":p=t.street;break;case"city":p=t.city;break;case"street_number":p=t.street_number!==void 0?String(t.street_number):void 0;break;case"postcode":p=t.postcode;break;case"addition":p=t.addition;break}p&&r.push(p)}return r.join(", ")}var g={API_URL:"https://api.pro6pp.nl/v2",LIMIT:20,DEBOUNCE_MS:150,MIN_DEBOUNCE_MS:50,MAX_RETRIES:0},x={DIGITS_1_3:/^[0-9]{1,3}$/,STREET_NUMBER_PREFIX:/^(\d+)\s*,\s*$/},y={query:"",stage:null,cities:[],streets:[],suggestions:[],isValid:!1,value:null,isError:!1,isLoading:!1,hasMore:!1,selectedSuggestionIndex:-1},S=class{constructor(t){l(this,"country");l(this,"authKey");l(this,"explicitApiUrl");l(this,"baseLimit");l(this,"currentLimit");l(this,"maxRetries");l(this,"language");l(this,"fetcher");l(this,"onStateChange");l(this,"onSelect");l(this,"state");l(this,"abortController",null);l(this,"debouncedFetch");this.country=t.country,this.authKey=t.authKey,this.explicitApiUrl=t.apiUrl,this.baseLimit=t.limit||g.LIMIT,this.currentLimit=this.baseLimit,this.language=t.language;let e=t.maxRetries!==void 0?t.maxRetries:g.MAX_RETRIES;this.maxRetries=Math.max(0,Math.min(e,10)),this.fetcher=t.fetcher||((s,o)=>fetch(s,o)),this.onStateChange=t.onStateChange||(()=>{}),this.onSelect=t.onSelect||(()=>{}),this.state={...y};let i=t.debounceMs!==void 0?t.debounceMs:g.DEBOUNCE_MS,r=Math.max(i,g.MIN_DEBOUNCE_MS);this.debouncedFetch=this.debounce(s=>this.executeFetch(s),r)}handleInput(t){this.currentLimit=this.baseLimit;let e=this.state.stage==="final"&&t!==this.state.query;this.updateState({query:t,isValid:!1,value:null,isLoading:!!t.trim(),selectedSuggestionIndex:-1,hasMore:!1,stage:e?null:this.state.stage}),e&&this.onSelect(null),this.debouncedFetch(t)}loadMore(){this.state.isLoading||(this.currentLimit+=this.baseLimit,this.updateState({isLoading:!0}),this.executeFetch(this.state.query))}handleKeyDown(t){let e=t.target;if(!e)return;let i=this.state.cities.length+this.state.streets.length+this.state.suggestions.length;if(i>0){if(t.key==="ArrowDown"){t.preventDefault();let s=this.state.selectedSuggestionIndex+1;s>=i&&(s=0),this.updateState({selectedSuggestionIndex:s});return}if(t.key==="ArrowUp"){t.preventDefault();let s=this.state.selectedSuggestionIndex-1;s<0&&(s=i-1),this.updateState({selectedSuggestionIndex:s});return}if(t.key==="Enter"&&this.state.selectedSuggestionIndex>=0){t.preventDefault();let o=[...this.state.cities,...this.state.streets,...this.state.suggestions][this.state.selectedSuggestionIndex];o&&(this.selectItem(o),this.updateState({selectedSuggestionIndex:-1}));return}}let r=e.value;if(t.key===" "&&this.shouldAutoInsertComma(r)){t.preventDefault();let s=`${r.trim()}, `;this.updateQueryAndFetch(s)}}selectItem(t){this.debouncedFetch.cancel(),this.abortController&&this.abortController.abort();let e=typeof t=="string"?t:t.label,i=e;typeof t!="string"&&typeof t.value=="string"&&(i=t.value);let r=typeof t!="string"&&typeof t.value=="object"?t.value:void 0,s=!!r&&Object.keys(r).length>0;if(this.state.stage==="final"||s){let p=e;if(r&&Object.keys(r).length>0){let{street:c,street_number:a,postcode:d,city:u,addition:h}=r;if(c&&a&&u){let b=h?` ${h}`:"",C=d?`${d}, `:"";p=`${c}, ${a}${b}, ${C}${u}`}}return this.finishSelection(p,r),!0}let o=typeof t!="string"?t.subtitle:null;return this.processSelection(i,o),!1}shouldAutoInsertComma(t){if(!t.includes(",")&&x.DIGITS_1_3.test(t.trim()))return!0;if(this.state.stage==="street_number"){let i=this.getCurrentFragment(t);return x.DIGITS_1_3.test(i)}return!1}finishSelection(t,e){this.updateState({query:t,suggestions:[],cities:[],streets:[],isValid:!0,value:e||null,stage:"final",hasMore:!1}),this.onSelect(e||t)}processSelection(t,e){let{stage:i,query:r}=this.state,s=r;if(e&&(i==="city"||i==="street"||i==="mixed")){if(i==="city")s=`${e}, ${t}, `;else{let a=this.getQueryPrefix(r),d=!a||!a.includes(e),u=a;if(a&&e){let h=a.match(x.STREET_NUMBER_PREFIX);if(h){let b=h[1];e.startsWith(b)&&(u="")}}d?s=u?`${u} ${t}, ${e}, `:`${t}, ${e}, `:s=u?`${u} ${t}, `:`${t}, `}this.updateQueryAndFetch(s);return}if(i==="direct"||i==="addition"){this.finishSelection(t);return}!r.includes(",")&&(i==="city"||i==="street"||i==="street_number_first")?s=`${t}, `:(s=this.replaceLastSegment(r,t),i!=="street_number"&&(s+=", ")),this.updateQueryAndFetch(s)}executeFetch(t,e=0){let i=(t||"").toString();if(!i.trim()){this.abortController?.abort(),this.resetState();return}e===0&&(this.updateState({isError:!1}),this.abortController&&this.abortController.abort(),this.abortController=new AbortController);let r=this.abortController?.signal,s=this.explicitApiUrl?this.explicitApiUrl:`${g.API_URL}/infer/${this.country.toLowerCase()}`,o=new URLSearchParams({query:i,limit:this.currentLimit.toString()});this.explicitApiUrl&&o.append("country",this.country.toLowerCase()),this.authKey&&o.set("authKey",this.authKey),this.language&&o.set("language",this.language);let p=s.includes("?")?"&":"?",c=`${s}${p}${o.toString()}`;this.fetcher(c,{signal:r}).then(a=>{if(!a.ok){if(e<this.maxRetries&&(a.status>=500||a.status===429))return this.retry(t,e,r);throw new Error("Network error")}return a.json()}).then(a=>{a&&this.mapResponseToState(a)}).catch(a=>{if(a.name!=="AbortError"){if(e<this.maxRetries)return this.retry(t,e,r);this.updateState({isError:!0,isLoading:!1})}})}retry(t,e,i){if(i?.aborted)return;let r=Math.pow(2,e)*200;setTimeout(()=>{i?.aborted||this.executeFetch(t,e+1)},r)}mapResponseToState(t){let e={stage:t.stage,isLoading:!1},i=t.suggestions||[],r=[],s=new Set;for(let p of i){let c=`${p.label}|${p.subtitle||""}|${JSON.stringify(p.value||{})}`;if(!s.has(c)){s.add(c);let a=this.reformatSuggestionLabel(p);r.push(a)}}let o=r.length+(t.cities?.length||0)+(t.streets?.length||0);e.hasMore=o>=this.currentLimit,t.stage==="mixed"?(e.cities=t.cities||[],e.streets=t.streets||[],e.cities?.length===0&&e.streets?.length===0?e.suggestions=r:e.suggestions=[]):(e.suggestions=r,e.cities=[],e.streets=[]),e.isValid=t.stage==="final",this.updateState(e),e.isValid&&r.length===1&&this.selectItem(r[0])}reformatSuggestionLabel(t){if(!t.value||typeof t.value=="string")return t;let e=t.value;if(!e.street||!e.city)return t;let i=m(this.state.query,e);return i?{...t,label:i}:t}updateQueryAndFetch(t){this.updateState({query:t,suggestions:[],cities:[],streets:[],isValid:!1,value:null,isLoading:!0,hasMore:!1}),this.debouncedFetch(t)}replaceLastSegment(t,e){let i=t.lastIndexOf(",");return i===-1?e:`${t.slice(0,i+1)} ${e}`.trim()}getQueryPrefix(t){let e=t.lastIndexOf(",");return e===-1?"":t.slice(0,e+1).trimEnd()}getCurrentFragment(t){return(t.split(",").slice(-1)[0]??"").trim()}resetState(){this.updateState({...y,query:this.state.query})}updateState(t){this.state={...this.state,...t},this.onStateChange(this.state)}debounce(t,e){let i,r=(...s)=>{i&&clearTimeout(i),i=setTimeout(()=>t.apply(this,s),e)};return r.cancel=()=>{i&&(clearTimeout(i),i=void 0)},r}};function k(n){if(n.length===0)return n;let t=[];for(let e of n){let i=t[t.length-1];i&&i.match===e.match?i.text+=e.text:t.push({text:e.text,match:e.match})}return t}function D(n,t){if(!t||!n)return[{text:n,match:!1}];let e=[],i=n.toLowerCase(),r=t.toLowerCase(),s=0,o=0;for(let a=0;a<n.length;a++){if(!(s<t.length&&i[a]===r[s]))continue;a>o&&e.push({text:n.slice(o,a),match:!1}),e.push({text:n[a],match:!0}),s++,o=a+1}return o<n.length&&e.push({text:n.slice(o),match:!1}),s===t.length?k(e):[{text:n,match:!1}]}var I=`
|
|
2
2
|
.pro6pp-wrapper {
|
|
3
3
|
position: relative;
|
|
4
4
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
|
@@ -20,6 +20,12 @@
|
|
|
20
20
|
appearance: none;
|
|
21
21
|
transition: border-color 0.2s, box-shadow 0.2s;
|
|
22
22
|
}
|
|
23
|
+
|
|
24
|
+
.pro6pp-input::placeholder {
|
|
25
|
+
font-size: 16px;
|
|
26
|
+
color: #a3a3a3;
|
|
27
|
+
}
|
|
28
|
+
|
|
23
29
|
.pro6pp-input:focus {
|
|
24
30
|
outline: none;
|
|
25
31
|
border-color: #3b82f6;
|
|
@@ -42,8 +48,8 @@
|
|
|
42
48
|
.pro6pp-clear-button {
|
|
43
49
|
background: none;
|
|
44
50
|
border: none;
|
|
45
|
-
width:
|
|
46
|
-
height:
|
|
51
|
+
width: 32px;
|
|
52
|
+
height: 32px;
|
|
47
53
|
cursor: pointer;
|
|
48
54
|
color: #a3a3a3;
|
|
49
55
|
display: flex;
|
|
@@ -65,17 +71,6 @@
|
|
|
65
71
|
background-color: #f3f4f6;
|
|
66
72
|
}
|
|
67
73
|
|
|
68
|
-
.pro6pp-loader {
|
|
69
|
-
width: 20px;
|
|
70
|
-
height: 20px;
|
|
71
|
-
margin: 0 8px;
|
|
72
|
-
border: 2px solid #e0e0e0;
|
|
73
|
-
border-top-color: #6b7280;
|
|
74
|
-
border-radius: 50%;
|
|
75
|
-
animation: pro6pp-spin 0.6s linear infinite;
|
|
76
|
-
flex-shrink: 0;
|
|
77
|
-
}
|
|
78
|
-
|
|
79
74
|
.pro6pp-dropdown {
|
|
80
75
|
position: absolute;
|
|
81
76
|
top: 100%;
|
|
@@ -88,7 +83,7 @@
|
|
|
88
83
|
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
|
89
84
|
z-index: 9999;
|
|
90
85
|
padding: 0;
|
|
91
|
-
max-height:
|
|
86
|
+
max-height: 280px;
|
|
92
87
|
overflow-y: auto;
|
|
93
88
|
display: flex;
|
|
94
89
|
flex-direction: column;
|
|
@@ -96,7 +91,7 @@
|
|
|
96
91
|
|
|
97
92
|
@media (max-height: 500px) {
|
|
98
93
|
.pro6pp-dropdown {
|
|
99
|
-
max-height:
|
|
94
|
+
max-height: 180px;
|
|
100
95
|
}
|
|
101
96
|
}
|
|
102
97
|
|
|
@@ -112,7 +107,8 @@
|
|
|
112
107
|
cursor: pointer;
|
|
113
108
|
display: flex;
|
|
114
109
|
align-items: center;
|
|
115
|
-
font-size:
|
|
110
|
+
font-size: 15px;
|
|
111
|
+
line-height: 1.4;
|
|
116
112
|
color: #374151;
|
|
117
113
|
border-bottom: 1px solid #f3f4f6;
|
|
118
114
|
transition: background-color 0.1s;
|
|
@@ -134,19 +130,33 @@
|
|
|
134
130
|
}
|
|
135
131
|
|
|
136
132
|
.pro6pp-item__label {
|
|
137
|
-
font-weight:
|
|
138
|
-
flex-shrink:
|
|
133
|
+
font-weight: 400;
|
|
134
|
+
flex-shrink: 1;
|
|
135
|
+
overflow: hidden;
|
|
136
|
+
text-overflow: ellipsis;
|
|
137
|
+
white-space: nowrap;
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
.pro6pp-item__label--match {
|
|
141
|
+
font-weight: 520;
|
|
139
142
|
}
|
|
143
|
+
|
|
144
|
+
.pro6pp-item__label--unmatched {
|
|
145
|
+
font-weight: 400;
|
|
146
|
+
color: #4b5563;
|
|
147
|
+
}
|
|
148
|
+
|
|
140
149
|
.pro6pp-item__subtitle {
|
|
141
|
-
font-size: 14px;
|
|
142
150
|
color: #6b7280;
|
|
143
|
-
flex-
|
|
151
|
+
flex-shrink: 0;
|
|
144
152
|
}
|
|
153
|
+
|
|
145
154
|
.pro6pp-item__chevron {
|
|
146
155
|
color: #d1d5db;
|
|
147
156
|
display: flex;
|
|
148
157
|
align-items: center;
|
|
149
158
|
margin-left: auto;
|
|
159
|
+
padding-left: 8px;
|
|
150
160
|
}
|
|
151
161
|
|
|
152
162
|
.pro6pp-no-results {
|
|
@@ -156,25 +166,39 @@
|
|
|
156
166
|
text-align: center;
|
|
157
167
|
}
|
|
158
168
|
|
|
159
|
-
.pro6pp-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
flex-shrink: 0;
|
|
170
|
-
touch-action: manipulation;
|
|
169
|
+
.pro6pp-loader-item {
|
|
170
|
+
padding: 10px 12px;
|
|
171
|
+
color: #6b7280;
|
|
172
|
+
font-size: 0.875rem;
|
|
173
|
+
display: flex;
|
|
174
|
+
align-items: center;
|
|
175
|
+
justify-content: center;
|
|
176
|
+
gap: 8px;
|
|
177
|
+
background-color: #f9fafb;
|
|
178
|
+
border-top: 1px solid #f3f4f6;
|
|
171
179
|
}
|
|
172
180
|
|
|
173
|
-
.pro6pp-
|
|
174
|
-
|
|
181
|
+
.pro6pp-mini-spinner {
|
|
182
|
+
width: 14px;
|
|
183
|
+
height: 14px;
|
|
184
|
+
border: 2px solid #e5e7eb;
|
|
185
|
+
border-top-color: #6b7280;
|
|
186
|
+
border-radius: 50%;
|
|
187
|
+
animation: pro6pp-spin 0.6s linear infinite;
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
@media (max-width: 640px) {
|
|
191
|
+
.pro6pp-input {
|
|
192
|
+
font-size: 16px;
|
|
193
|
+
padding: 10px 12px;
|
|
194
|
+
}
|
|
195
|
+
.pro6pp-item {
|
|
196
|
+
padding: 10px 12px;
|
|
197
|
+
font-size: 14px;
|
|
198
|
+
}
|
|
175
199
|
}
|
|
176
200
|
|
|
177
201
|
@keyframes pro6pp-spin {
|
|
178
202
|
to { transform: rotate(360deg); }
|
|
179
203
|
}
|
|
180
|
-
`;return
|
|
204
|
+
`;return R(U);})();
|
package/dist/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var
|
|
1
|
+
var I=Object.defineProperty;var C=(n,t,e)=>t in n?I(n,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):n[t]=e;var l=(n,t,e)=>C(n,typeof t!="symbol"?t+"":t,e);function x(n){return n.toLowerCase().trim()}function _(n){return n.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")}function T(n,t){let e=x(n),i=x(t);if(i.includes(" "))return e.indexOf(i);let r=new RegExp(`(?:^|[,\\s])${_(i)}(?:$|[,\\s])`,"g").exec(e);if(r){let o=r.index,p=e[o];return p===","||p===" "?o+1:o}return-1}function L(n,t){let e=[],i=[];t.street&&i.push({value:t.street,type:"street"}),t.city&&i.push({value:t.city,type:"city"}),t.postcode&&i.push({value:t.postcode,type:"postcode"}),t.street_number!==void 0&&t.street_number!==null&&i.push({value:String(t.street_number),type:"street_number"}),t.addition&&i.push({value:t.addition,type:"addition"});for(let s of i){let r=T(n,s.value);r!==-1&&e.push({type:s.type,value:s.value,position:r})}return e.sort((s,r)=>s.position-r.position),e}function m(n,t){if(!t||!n)return"";let e=L(n,t),i=new Set(e.map(o=>o.type)),s=[];for(let o of e)s.push(o.value);let r=["street","street_number","addition","postcode","city"];for(let o of r){if(i.has(o))continue;let p;switch(o){case"street":p=t.street;break;case"city":p=t.city;break;case"street_number":p=t.street_number!==void 0?String(t.street_number):void 0;break;case"postcode":p=t.postcode;break;case"addition":p=t.addition;break}p&&s.push(p)}return s.join(", ")}var g={API_URL:"https://api.pro6pp.nl/v2",LIMIT:20,DEBOUNCE_MS:150,MIN_DEBOUNCE_MS:50,MAX_RETRIES:0},b={DIGITS_1_3:/^[0-9]{1,3}$/,STREET_NUMBER_PREFIX:/^(\d+)\s*,\s*$/},y={query:"",stage:null,cities:[],streets:[],suggestions:[],isValid:!1,value:null,isError:!1,isLoading:!1,hasMore:!1,selectedSuggestionIndex:-1},S=class{constructor(t){l(this,"country");l(this,"authKey");l(this,"explicitApiUrl");l(this,"baseLimit");l(this,"currentLimit");l(this,"maxRetries");l(this,"language");l(this,"fetcher");l(this,"onStateChange");l(this,"onSelect");l(this,"state");l(this,"abortController",null);l(this,"debouncedFetch");this.country=t.country,this.authKey=t.authKey,this.explicitApiUrl=t.apiUrl,this.baseLimit=t.limit||g.LIMIT,this.currentLimit=this.baseLimit,this.language=t.language;let e=t.maxRetries!==void 0?t.maxRetries:g.MAX_RETRIES;this.maxRetries=Math.max(0,Math.min(e,10)),this.fetcher=t.fetcher||((r,o)=>fetch(r,o)),this.onStateChange=t.onStateChange||(()=>{}),this.onSelect=t.onSelect||(()=>{}),this.state={...y};let i=t.debounceMs!==void 0?t.debounceMs:g.DEBOUNCE_MS,s=Math.max(i,g.MIN_DEBOUNCE_MS);this.debouncedFetch=this.debounce(r=>this.executeFetch(r),s)}handleInput(t){this.currentLimit=this.baseLimit;let e=this.state.stage==="final"&&t!==this.state.query;this.updateState({query:t,isValid:!1,value:null,isLoading:!!t.trim(),selectedSuggestionIndex:-1,hasMore:!1,stage:e?null:this.state.stage}),e&&this.onSelect(null),this.debouncedFetch(t)}loadMore(){this.state.isLoading||(this.currentLimit+=this.baseLimit,this.updateState({isLoading:!0}),this.executeFetch(this.state.query))}handleKeyDown(t){let e=t.target;if(!e)return;let i=this.state.cities.length+this.state.streets.length+this.state.suggestions.length;if(i>0){if(t.key==="ArrowDown"){t.preventDefault();let r=this.state.selectedSuggestionIndex+1;r>=i&&(r=0),this.updateState({selectedSuggestionIndex:r});return}if(t.key==="ArrowUp"){t.preventDefault();let r=this.state.selectedSuggestionIndex-1;r<0&&(r=i-1),this.updateState({selectedSuggestionIndex:r});return}if(t.key==="Enter"&&this.state.selectedSuggestionIndex>=0){t.preventDefault();let o=[...this.state.cities,...this.state.streets,...this.state.suggestions][this.state.selectedSuggestionIndex];o&&(this.selectItem(o),this.updateState({selectedSuggestionIndex:-1}));return}}let s=e.value;if(t.key===" "&&this.shouldAutoInsertComma(s)){t.preventDefault();let r=`${s.trim()}, `;this.updateQueryAndFetch(r)}}selectItem(t){this.debouncedFetch.cancel(),this.abortController&&this.abortController.abort();let e=typeof t=="string"?t:t.label,i=e;typeof t!="string"&&typeof t.value=="string"&&(i=t.value);let s=typeof t!="string"&&typeof t.value=="object"?t.value:void 0,r=!!s&&Object.keys(s).length>0;if(this.state.stage==="final"||r){let p=e;if(s&&Object.keys(s).length>0){let{street:c,street_number:a,postcode:d,city:u,addition:h}=s;if(c&&a&&u){let f=h?` ${h}`:"",v=d?`${d}, `:"";p=`${c}, ${a}${f}, ${v}${u}`}}return this.finishSelection(p,s),!0}let o=typeof t!="string"?t.subtitle:null;return this.processSelection(i,o),!1}shouldAutoInsertComma(t){if(!t.includes(",")&&b.DIGITS_1_3.test(t.trim()))return!0;if(this.state.stage==="street_number"){let i=this.getCurrentFragment(t);return b.DIGITS_1_3.test(i)}return!1}finishSelection(t,e){this.updateState({query:t,suggestions:[],cities:[],streets:[],isValid:!0,value:e||null,stage:"final",hasMore:!1}),this.onSelect(e||t)}processSelection(t,e){let{stage:i,query:s}=this.state,r=s;if(e&&(i==="city"||i==="street"||i==="mixed")){if(i==="city")r=`${e}, ${t}, `;else{let a=this.getQueryPrefix(s),d=!a||!a.includes(e),u=a;if(a&&e){let h=a.match(b.STREET_NUMBER_PREFIX);if(h){let f=h[1];e.startsWith(f)&&(u="")}}d?r=u?`${u} ${t}, ${e}, `:`${t}, ${e}, `:r=u?`${u} ${t}, `:`${t}, `}this.updateQueryAndFetch(r);return}if(i==="direct"||i==="addition"){this.finishSelection(t);return}!s.includes(",")&&(i==="city"||i==="street"||i==="street_number_first")?r=`${t}, `:(r=this.replaceLastSegment(s,t),i!=="street_number"&&(r+=", ")),this.updateQueryAndFetch(r)}executeFetch(t,e=0){let i=(t||"").toString();if(!i.trim()){this.abortController?.abort(),this.resetState();return}e===0&&(this.updateState({isError:!1}),this.abortController&&this.abortController.abort(),this.abortController=new AbortController);let s=this.abortController?.signal,r=this.explicitApiUrl?this.explicitApiUrl:`${g.API_URL}/infer/${this.country.toLowerCase()}`,o=new URLSearchParams({query:i,limit:this.currentLimit.toString()});this.explicitApiUrl&&o.append("country",this.country.toLowerCase()),this.authKey&&o.set("authKey",this.authKey),this.language&&o.set("language",this.language);let p=r.includes("?")?"&":"?",c=`${r}${p}${o.toString()}`;this.fetcher(c,{signal:s}).then(a=>{if(!a.ok){if(e<this.maxRetries&&(a.status>=500||a.status===429))return this.retry(t,e,s);throw new Error("Network error")}return a.json()}).then(a=>{a&&this.mapResponseToState(a)}).catch(a=>{if(a.name!=="AbortError"){if(e<this.maxRetries)return this.retry(t,e,s);this.updateState({isError:!0,isLoading:!1})}})}retry(t,e,i){if(i?.aborted)return;let s=Math.pow(2,e)*200;setTimeout(()=>{i?.aborted||this.executeFetch(t,e+1)},s)}mapResponseToState(t){let e={stage:t.stage,isLoading:!1},i=t.suggestions||[],s=[],r=new Set;for(let p of i){let c=`${p.label}|${p.subtitle||""}|${JSON.stringify(p.value||{})}`;if(!r.has(c)){r.add(c);let a=this.reformatSuggestionLabel(p);s.push(a)}}let o=s.length+(t.cities?.length||0)+(t.streets?.length||0);e.hasMore=o>=this.currentLimit,t.stage==="mixed"?(e.cities=t.cities||[],e.streets=t.streets||[],e.cities?.length===0&&e.streets?.length===0?e.suggestions=s:e.suggestions=[]):(e.suggestions=s,e.cities=[],e.streets=[]),e.isValid=t.stage==="final",this.updateState(e),e.isValid&&s.length===1&&this.selectItem(s[0])}reformatSuggestionLabel(t){if(!t.value||typeof t.value=="string")return t;let e=t.value;if(!e.street||!e.city)return t;let i=m(this.state.query,e);return i?{...t,label:i}:t}updateQueryAndFetch(t){this.updateState({query:t,suggestions:[],cities:[],streets:[],isValid:!1,value:null,isLoading:!0,hasMore:!1}),this.debouncedFetch(t)}replaceLastSegment(t,e){let i=t.lastIndexOf(",");return i===-1?e:`${t.slice(0,i+1)} ${e}`.trim()}getQueryPrefix(t){let e=t.lastIndexOf(",");return e===-1?"":t.slice(0,e+1).trimEnd()}getCurrentFragment(t){return(t.split(",").slice(-1)[0]??"").trim()}resetState(){this.updateState({...y,query:this.state.query})}updateState(t){this.state={...this.state,...t},this.onStateChange(this.state)}debounce(t,e){let i,s=(...r)=>{i&&clearTimeout(i),i=setTimeout(()=>t.apply(this,r),e)};return s.cancel=()=>{i&&(clearTimeout(i),i=void 0)},s}};function w(n){if(n.length===0)return n;let t=[];for(let e of n){let i=t[t.length-1];i&&i.match===e.match?i.text+=e.text:t.push({text:e.text,match:e.match})}return t}function k(n,t){if(!t||!n)return[{text:n,match:!1}];let e=[],i=n.toLowerCase(),s=t.toLowerCase(),r=0,o=0;for(let a=0;a<n.length;a++){if(!(r<t.length&&i[a]===s[r]))continue;a>o&&e.push({text:n.slice(o,a),match:!1}),e.push({text:n[a],match:!0}),r++,o=a+1}return o<n.length&&e.push({text:n.slice(o),match:!1}),r===t.length?w(e):[{text:n,match:!1}]}var A=`
|
|
2
2
|
.pro6pp-wrapper {
|
|
3
3
|
position: relative;
|
|
4
4
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
|
@@ -20,6 +20,12 @@ var m=Object.defineProperty;var b=(a,t,e)=>t in a?m(a,t,{enumerable:!0,configura
|
|
|
20
20
|
appearance: none;
|
|
21
21
|
transition: border-color 0.2s, box-shadow 0.2s;
|
|
22
22
|
}
|
|
23
|
+
|
|
24
|
+
.pro6pp-input::placeholder {
|
|
25
|
+
font-size: 16px;
|
|
26
|
+
color: #a3a3a3;
|
|
27
|
+
}
|
|
28
|
+
|
|
23
29
|
.pro6pp-input:focus {
|
|
24
30
|
outline: none;
|
|
25
31
|
border-color: #3b82f6;
|
|
@@ -42,8 +48,8 @@ var m=Object.defineProperty;var b=(a,t,e)=>t in a?m(a,t,{enumerable:!0,configura
|
|
|
42
48
|
.pro6pp-clear-button {
|
|
43
49
|
background: none;
|
|
44
50
|
border: none;
|
|
45
|
-
width:
|
|
46
|
-
height:
|
|
51
|
+
width: 32px;
|
|
52
|
+
height: 32px;
|
|
47
53
|
cursor: pointer;
|
|
48
54
|
color: #a3a3a3;
|
|
49
55
|
display: flex;
|
|
@@ -65,17 +71,6 @@ var m=Object.defineProperty;var b=(a,t,e)=>t in a?m(a,t,{enumerable:!0,configura
|
|
|
65
71
|
background-color: #f3f4f6;
|
|
66
72
|
}
|
|
67
73
|
|
|
68
|
-
.pro6pp-loader {
|
|
69
|
-
width: 20px;
|
|
70
|
-
height: 20px;
|
|
71
|
-
margin: 0 8px;
|
|
72
|
-
border: 2px solid #e0e0e0;
|
|
73
|
-
border-top-color: #6b7280;
|
|
74
|
-
border-radius: 50%;
|
|
75
|
-
animation: pro6pp-spin 0.6s linear infinite;
|
|
76
|
-
flex-shrink: 0;
|
|
77
|
-
}
|
|
78
|
-
|
|
79
74
|
.pro6pp-dropdown {
|
|
80
75
|
position: absolute;
|
|
81
76
|
top: 100%;
|
|
@@ -88,7 +83,7 @@ var m=Object.defineProperty;var b=(a,t,e)=>t in a?m(a,t,{enumerable:!0,configura
|
|
|
88
83
|
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
|
89
84
|
z-index: 9999;
|
|
90
85
|
padding: 0;
|
|
91
|
-
max-height:
|
|
86
|
+
max-height: 280px;
|
|
92
87
|
overflow-y: auto;
|
|
93
88
|
display: flex;
|
|
94
89
|
flex-direction: column;
|
|
@@ -96,7 +91,7 @@ var m=Object.defineProperty;var b=(a,t,e)=>t in a?m(a,t,{enumerable:!0,configura
|
|
|
96
91
|
|
|
97
92
|
@media (max-height: 500px) {
|
|
98
93
|
.pro6pp-dropdown {
|
|
99
|
-
max-height:
|
|
94
|
+
max-height: 180px;
|
|
100
95
|
}
|
|
101
96
|
}
|
|
102
97
|
|
|
@@ -112,7 +107,8 @@ var m=Object.defineProperty;var b=(a,t,e)=>t in a?m(a,t,{enumerable:!0,configura
|
|
|
112
107
|
cursor: pointer;
|
|
113
108
|
display: flex;
|
|
114
109
|
align-items: center;
|
|
115
|
-
font-size:
|
|
110
|
+
font-size: 15px;
|
|
111
|
+
line-height: 1.4;
|
|
116
112
|
color: #374151;
|
|
117
113
|
border-bottom: 1px solid #f3f4f6;
|
|
118
114
|
transition: background-color 0.1s;
|
|
@@ -134,19 +130,33 @@ var m=Object.defineProperty;var b=(a,t,e)=>t in a?m(a,t,{enumerable:!0,configura
|
|
|
134
130
|
}
|
|
135
131
|
|
|
136
132
|
.pro6pp-item__label {
|
|
137
|
-
font-weight:
|
|
138
|
-
flex-shrink:
|
|
133
|
+
font-weight: 400;
|
|
134
|
+
flex-shrink: 1;
|
|
135
|
+
overflow: hidden;
|
|
136
|
+
text-overflow: ellipsis;
|
|
137
|
+
white-space: nowrap;
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
.pro6pp-item__label--match {
|
|
141
|
+
font-weight: 520;
|
|
139
142
|
}
|
|
143
|
+
|
|
144
|
+
.pro6pp-item__label--unmatched {
|
|
145
|
+
font-weight: 400;
|
|
146
|
+
color: #4b5563;
|
|
147
|
+
}
|
|
148
|
+
|
|
140
149
|
.pro6pp-item__subtitle {
|
|
141
|
-
font-size: 14px;
|
|
142
150
|
color: #6b7280;
|
|
143
|
-
flex-
|
|
151
|
+
flex-shrink: 0;
|
|
144
152
|
}
|
|
153
|
+
|
|
145
154
|
.pro6pp-item__chevron {
|
|
146
155
|
color: #d1d5db;
|
|
147
156
|
display: flex;
|
|
148
157
|
align-items: center;
|
|
149
158
|
margin-left: auto;
|
|
159
|
+
padding-left: 8px;
|
|
150
160
|
}
|
|
151
161
|
|
|
152
162
|
.pro6pp-no-results {
|
|
@@ -156,25 +166,39 @@ var m=Object.defineProperty;var b=(a,t,e)=>t in a?m(a,t,{enumerable:!0,configura
|
|
|
156
166
|
text-align: center;
|
|
157
167
|
}
|
|
158
168
|
|
|
159
|
-
.pro6pp-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
flex-shrink: 0;
|
|
170
|
-
touch-action: manipulation;
|
|
169
|
+
.pro6pp-loader-item {
|
|
170
|
+
padding: 10px 12px;
|
|
171
|
+
color: #6b7280;
|
|
172
|
+
font-size: 0.875rem;
|
|
173
|
+
display: flex;
|
|
174
|
+
align-items: center;
|
|
175
|
+
justify-content: center;
|
|
176
|
+
gap: 8px;
|
|
177
|
+
background-color: #f9fafb;
|
|
178
|
+
border-top: 1px solid #f3f4f6;
|
|
171
179
|
}
|
|
172
180
|
|
|
173
|
-
.pro6pp-
|
|
174
|
-
|
|
181
|
+
.pro6pp-mini-spinner {
|
|
182
|
+
width: 14px;
|
|
183
|
+
height: 14px;
|
|
184
|
+
border: 2px solid #e5e7eb;
|
|
185
|
+
border-top-color: #6b7280;
|
|
186
|
+
border-radius: 50%;
|
|
187
|
+
animation: pro6pp-spin 0.6s linear infinite;
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
@media (max-width: 640px) {
|
|
191
|
+
.pro6pp-input {
|
|
192
|
+
font-size: 16px;
|
|
193
|
+
padding: 10px 12px;
|
|
194
|
+
}
|
|
195
|
+
.pro6pp-item {
|
|
196
|
+
padding: 10px 12px;
|
|
197
|
+
font-size: 14px;
|
|
198
|
+
}
|
|
175
199
|
}
|
|
176
200
|
|
|
177
201
|
@keyframes pro6pp-spin {
|
|
178
202
|
to { transform: rotate(360deg); }
|
|
179
203
|
}
|
|
180
|
-
`;export{
|
|
204
|
+
`;export{A as DEFAULT_STYLES,y as INITIAL_STATE,S as InferCore,m as formatLabelByInputOrder,k as getHighlightSegments};
|
package/dist/styles.css
ADDED
|
@@ -0,0 +1,203 @@
|
|
|
1
|
+
/* Pro6PP Infer SDK - Default Styles */
|
|
2
|
+
.pro6pp-wrapper {
|
|
3
|
+
position: relative;
|
|
4
|
+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
|
5
|
+
box-sizing: border-box;
|
|
6
|
+
width: 100%;
|
|
7
|
+
-webkit-tap-highlight-color: transparent;
|
|
8
|
+
}
|
|
9
|
+
.pro6pp-wrapper * {
|
|
10
|
+
box-sizing: border-box;
|
|
11
|
+
}
|
|
12
|
+
.pro6pp-input {
|
|
13
|
+
width: 100%;
|
|
14
|
+
padding: 12px 14px;
|
|
15
|
+
padding-right: 48px;
|
|
16
|
+
border: 1px solid #e0e0e0;
|
|
17
|
+
border-radius: 8px;
|
|
18
|
+
font-size: 16px;
|
|
19
|
+
line-height: 1.5;
|
|
20
|
+
appearance: none;
|
|
21
|
+
transition: border-color 0.2s, box-shadow 0.2s;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.pro6pp-input::placeholder {
|
|
25
|
+
font-size: 16px;
|
|
26
|
+
color: #a3a3a3;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.pro6pp-input:focus {
|
|
30
|
+
outline: none;
|
|
31
|
+
border-color: #3b82f6;
|
|
32
|
+
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.pro6pp-input-addons {
|
|
36
|
+
position: absolute;
|
|
37
|
+
right: 4px;
|
|
38
|
+
top: 0;
|
|
39
|
+
bottom: 0;
|
|
40
|
+
display: flex;
|
|
41
|
+
align-items: center;
|
|
42
|
+
pointer-events: none;
|
|
43
|
+
}
|
|
44
|
+
.pro6pp-input-addons > * {
|
|
45
|
+
pointer-events: auto;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.pro6pp-clear-button {
|
|
49
|
+
background: none;
|
|
50
|
+
border: none;
|
|
51
|
+
width: 32px;
|
|
52
|
+
height: 32px;
|
|
53
|
+
cursor: pointer;
|
|
54
|
+
color: #a3a3a3;
|
|
55
|
+
display: flex;
|
|
56
|
+
align-items: center;
|
|
57
|
+
justify-content: center;
|
|
58
|
+
border-radius: 50%;
|
|
59
|
+
transition: color 0.2s, background-color 0.2s;
|
|
60
|
+
touch-action: manipulation;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
@media (hover: hover) {
|
|
64
|
+
.pro6pp-clear-button:hover {
|
|
65
|
+
color: #1f2937;
|
|
66
|
+
background-color: #f3f4f6;
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.pro6pp-clear-button:active {
|
|
71
|
+
background-color: #f3f4f6;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.pro6pp-dropdown {
|
|
75
|
+
position: absolute;
|
|
76
|
+
top: 100%;
|
|
77
|
+
left: 0;
|
|
78
|
+
right: 0;
|
|
79
|
+
margin-top: 4px;
|
|
80
|
+
background: #ffffff;
|
|
81
|
+
border: 1px solid #e5e7eb;
|
|
82
|
+
border-radius: 6px;
|
|
83
|
+
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
|
84
|
+
z-index: 9999;
|
|
85
|
+
padding: 0;
|
|
86
|
+
max-height: 280px;
|
|
87
|
+
overflow-y: auto;
|
|
88
|
+
display: flex;
|
|
89
|
+
flex-direction: column;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
@media (max-height: 500px) {
|
|
93
|
+
.pro6pp-dropdown {
|
|
94
|
+
max-height: 180px;
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
.pro6pp-list {
|
|
99
|
+
list-style: none;
|
|
100
|
+
margin: 0;
|
|
101
|
+
padding: 0;
|
|
102
|
+
width: 100%;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.pro6pp-item {
|
|
106
|
+
padding: 12px 14px;
|
|
107
|
+
cursor: pointer;
|
|
108
|
+
display: flex;
|
|
109
|
+
align-items: center;
|
|
110
|
+
font-size: 15px;
|
|
111
|
+
line-height: 1.4;
|
|
112
|
+
color: #374151;
|
|
113
|
+
border-bottom: 1px solid #f3f4f6;
|
|
114
|
+
transition: background-color 0.1s;
|
|
115
|
+
flex-shrink: 0;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
.pro6pp-item:last-child {
|
|
119
|
+
border-bottom: none;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
@media (hover: hover) {
|
|
123
|
+
.pro6pp-item:hover, .pro6pp-item--active {
|
|
124
|
+
background-color: #f9fafb;
|
|
125
|
+
}
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
.pro6pp-item:active {
|
|
129
|
+
background-color: #f3f4f6;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
.pro6pp-item__label {
|
|
133
|
+
font-weight: 400;
|
|
134
|
+
flex-shrink: 1;
|
|
135
|
+
overflow: hidden;
|
|
136
|
+
text-overflow: ellipsis;
|
|
137
|
+
white-space: nowrap;
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
.pro6pp-item__label--match {
|
|
141
|
+
font-weight: 520;
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
.pro6pp-item__label--unmatched {
|
|
145
|
+
font-weight: 400;
|
|
146
|
+
color: #4b5563;
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
.pro6pp-item__subtitle {
|
|
150
|
+
color: #6b7280;
|
|
151
|
+
flex-shrink: 0;
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
.pro6pp-item__chevron {
|
|
155
|
+
color: #d1d5db;
|
|
156
|
+
display: flex;
|
|
157
|
+
align-items: center;
|
|
158
|
+
margin-left: auto;
|
|
159
|
+
padding-left: 8px;
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
.pro6pp-no-results {
|
|
163
|
+
padding: 24px 16px;
|
|
164
|
+
color: #6b7280;
|
|
165
|
+
font-size: 15px;
|
|
166
|
+
text-align: center;
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
.pro6pp-loader-item {
|
|
170
|
+
padding: 10px 12px;
|
|
171
|
+
color: #6b7280;
|
|
172
|
+
font-size: 0.875rem;
|
|
173
|
+
display: flex;
|
|
174
|
+
align-items: center;
|
|
175
|
+
justify-content: center;
|
|
176
|
+
gap: 8px;
|
|
177
|
+
background-color: #f9fafb;
|
|
178
|
+
border-top: 1px solid #f3f4f6;
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
.pro6pp-mini-spinner {
|
|
182
|
+
width: 14px;
|
|
183
|
+
height: 14px;
|
|
184
|
+
border: 2px solid #e5e7eb;
|
|
185
|
+
border-top-color: #6b7280;
|
|
186
|
+
border-radius: 50%;
|
|
187
|
+
animation: pro6pp-spin 0.6s linear infinite;
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
@media (max-width: 640px) {
|
|
191
|
+
.pro6pp-input {
|
|
192
|
+
font-size: 16px;
|
|
193
|
+
padding: 10px 12px;
|
|
194
|
+
}
|
|
195
|
+
.pro6pp-item {
|
|
196
|
+
padding: 10px 12px;
|
|
197
|
+
font-size: 14px;
|
|
198
|
+
}
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
@keyframes pro6pp-spin {
|
|
202
|
+
to { transform: rotate(360deg); }
|
|
203
|
+
}
|
package/package.json
CHANGED
|
@@ -21,8 +21,10 @@
|
|
|
21
21
|
"bugs": {
|
|
22
22
|
"url": "https://github.com/pro6pp/infer-sdk/issues"
|
|
23
23
|
},
|
|
24
|
-
"sideEffects":
|
|
25
|
-
|
|
24
|
+
"sideEffects": [
|
|
25
|
+
"*.css"
|
|
26
|
+
],
|
|
27
|
+
"version": "0.1.0-beta.18",
|
|
26
28
|
"main": "./dist/index.cjs",
|
|
27
29
|
"module": "./dist/index.js",
|
|
28
30
|
"types": "./dist/index.d.ts",
|
|
@@ -34,7 +36,8 @@
|
|
|
34
36
|
"script": "./dist/index.global.js",
|
|
35
37
|
"import": "./dist/index.js",
|
|
36
38
|
"require": "./dist/index.cjs"
|
|
37
|
-
}
|
|
39
|
+
},
|
|
40
|
+
"./styles.css": "./dist/styles.css"
|
|
38
41
|
},
|
|
39
42
|
"files": [
|
|
40
43
|
"dist",
|