@pro6pp/infer-core 0.0.2-beta.14 → 0.0.2-beta.15
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/index.cjs +12 -29
- package/dist/index.d.cts +20 -2
- package/dist/index.d.ts +20 -2
- package/dist/index.global.js +12 -29
- package/dist/index.js +12 -29
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";var g=Object.defineProperty;var
|
|
1
|
+
"use strict";var g=Object.defineProperty;var _=Object.getOwnPropertyDescriptor;var T=Object.getOwnPropertyNames;var L=Object.prototype.hasOwnProperty;var w=(n,t,e)=>t in n?g(n,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):n[t]=e;var A=(n,t)=>{for(var e in t)g(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&&g(n,r,{get:()=>t[r],enumerable:!(i=_(t,r))||i.enumerable});return n};var R=n=>E(g({},"__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 f={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,"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||f.LIMIT,this.currentLimit=this.baseLimit;let e=t.maxRetries!==void 0?t.maxRetries:f.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:f.DEBOUNCE_MS,r=Math.max(i,f.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:`${f.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);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;
|
|
@@ -130,15 +130,23 @@
|
|
|
130
130
|
}
|
|
131
131
|
|
|
132
132
|
.pro6pp-item__label {
|
|
133
|
-
font-weight:
|
|
133
|
+
font-weight: 400;
|
|
134
134
|
flex-shrink: 1;
|
|
135
135
|
overflow: hidden;
|
|
136
136
|
text-overflow: ellipsis;
|
|
137
137
|
white-space: nowrap;
|
|
138
138
|
}
|
|
139
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
|
+
|
|
140
149
|
.pro6pp-item__subtitle {
|
|
141
|
-
font-size: 13px;
|
|
142
150
|
color: #6b7280;
|
|
143
151
|
flex-shrink: 0;
|
|
144
152
|
}
|
|
@@ -158,20 +166,6 @@
|
|
|
158
166
|
text-align: center;
|
|
159
167
|
}
|
|
160
168
|
|
|
161
|
-
.pro6pp-load-more {
|
|
162
|
-
width: 100%;
|
|
163
|
-
padding: 14px;
|
|
164
|
-
background: #f9fafb;
|
|
165
|
-
border: none;
|
|
166
|
-
border-top: 1px solid #e0e0e0;
|
|
167
|
-
color: #3b82f6;
|
|
168
|
-
font-size: 14px;
|
|
169
|
-
font-weight: 600;
|
|
170
|
-
cursor: pointer;
|
|
171
|
-
flex-shrink: 0;
|
|
172
|
-
touch-action: manipulation;
|
|
173
|
-
}
|
|
174
|
-
|
|
175
169
|
.pro6pp-loader-item {
|
|
176
170
|
padding: 10px 12px;
|
|
177
171
|
color: #6b7280;
|
|
@@ -202,20 +196,9 @@
|
|
|
202
196
|
padding: 10px 12px;
|
|
203
197
|
font-size: 14px;
|
|
204
198
|
}
|
|
205
|
-
.pro6pp-item__subtitle {
|
|
206
|
-
font-size: 12px;
|
|
207
|
-
}
|
|
208
|
-
.pro6pp-load-more {
|
|
209
|
-
padding: 12px;
|
|
210
|
-
font-size: 13px;
|
|
211
|
-
}
|
|
212
|
-
}
|
|
213
|
-
|
|
214
|
-
.pro6pp-load-more:active {
|
|
215
|
-
background-color: #f3f4f6;
|
|
216
199
|
}
|
|
217
200
|
|
|
218
201
|
@keyframes pro6pp-spin {
|
|
219
202
|
to { transform: rotate(360deg); }
|
|
220
203
|
}
|
|
221
|
-
`;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
|
@@ -209,6 +209,12 @@ declare class InferCore {
|
|
|
209
209
|
private executeFetch;
|
|
210
210
|
private retry;
|
|
211
211
|
private mapResponseToState;
|
|
212
|
+
/**
|
|
213
|
+
* Reformats a suggestion's label based on the user's input order.
|
|
214
|
+
* If the suggestion has a structured value object, we reorder the label
|
|
215
|
+
* to match how the user typed the components.
|
|
216
|
+
*/
|
|
217
|
+
private reformatSuggestionLabel;
|
|
212
218
|
private updateQueryAndFetch;
|
|
213
219
|
private replaceLastSegment;
|
|
214
220
|
private getQueryPrefix;
|
|
@@ -220,9 +226,21 @@ declare class InferCore {
|
|
|
220
226
|
|
|
221
227
|
/**
|
|
222
228
|
* Splits text into matched and unmatched segments based on a fuzzy query sequence.
|
|
229
|
+
* Consecutive matched characters are merged into single segments for cleaner rendering.
|
|
223
230
|
*/
|
|
224
231
|
declare function getHighlightSegments(text: string, query: string): HighlightSegment[];
|
|
225
232
|
|
|
226
|
-
|
|
233
|
+
/**
|
|
234
|
+
* Formats a label for display based on the user's input order.
|
|
235
|
+
* Components the user typed appear first (in their order),
|
|
236
|
+
* followed by components they didn't type (new info from API).
|
|
237
|
+
*
|
|
238
|
+
* @param query The user's current query string
|
|
239
|
+
* @param value The structured address value from the API
|
|
240
|
+
* @returns A formatted label string
|
|
241
|
+
*/
|
|
242
|
+
declare function formatLabelByInputOrder(query: string, value: AddressValue): string;
|
|
243
|
+
|
|
244
|
+
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";
|
|
227
245
|
|
|
228
|
-
export { type AddressValue, type CountryCode, DEFAULT_STYLES, type Fetcher, type HighlightSegment, INITIAL_STATE, type InferConfig, InferCore, type InferResult, type InferState, type Stage, getHighlightSegments };
|
|
246
|
+
export { type AddressValue, type CountryCode, DEFAULT_STYLES, type Fetcher, type HighlightSegment, INITIAL_STATE, type InferConfig, InferCore, type InferResult, type InferState, type Stage, formatLabelByInputOrder, getHighlightSegments };
|
package/dist/index.d.ts
CHANGED
|
@@ -209,6 +209,12 @@ declare class InferCore {
|
|
|
209
209
|
private executeFetch;
|
|
210
210
|
private retry;
|
|
211
211
|
private mapResponseToState;
|
|
212
|
+
/**
|
|
213
|
+
* Reformats a suggestion's label based on the user's input order.
|
|
214
|
+
* If the suggestion has a structured value object, we reorder the label
|
|
215
|
+
* to match how the user typed the components.
|
|
216
|
+
*/
|
|
217
|
+
private reformatSuggestionLabel;
|
|
212
218
|
private updateQueryAndFetch;
|
|
213
219
|
private replaceLastSegment;
|
|
214
220
|
private getQueryPrefix;
|
|
@@ -220,9 +226,21 @@ declare class InferCore {
|
|
|
220
226
|
|
|
221
227
|
/**
|
|
222
228
|
* Splits text into matched and unmatched segments based on a fuzzy query sequence.
|
|
229
|
+
* Consecutive matched characters are merged into single segments for cleaner rendering.
|
|
223
230
|
*/
|
|
224
231
|
declare function getHighlightSegments(text: string, query: string): HighlightSegment[];
|
|
225
232
|
|
|
226
|
-
|
|
233
|
+
/**
|
|
234
|
+
* Formats a label for display based on the user's input order.
|
|
235
|
+
* Components the user typed appear first (in their order),
|
|
236
|
+
* followed by components they didn't type (new info from API).
|
|
237
|
+
*
|
|
238
|
+
* @param query The user's current query string
|
|
239
|
+
* @param value The structured address value from the API
|
|
240
|
+
* @returns A formatted label string
|
|
241
|
+
*/
|
|
242
|
+
declare function formatLabelByInputOrder(query: string, value: AddressValue): string;
|
|
243
|
+
|
|
244
|
+
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";
|
|
227
245
|
|
|
228
|
-
export { type AddressValue, type CountryCode, DEFAULT_STYLES, type Fetcher, type HighlightSegment, INITIAL_STATE, type InferConfig, InferCore, type InferResult, type InferState, type Stage, getHighlightSegments };
|
|
246
|
+
export { type AddressValue, type CountryCode, DEFAULT_STYLES, type Fetcher, type HighlightSegment, INITIAL_STATE, type InferConfig, InferCore, type InferResult, type InferState, type Stage, formatLabelByInputOrder, getHighlightSegments };
|
package/dist/index.global.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";var Pro6PPCore=(()=>{var g=Object.defineProperty;var
|
|
1
|
+
"use strict";var Pro6PPCore=(()=>{var g=Object.defineProperty;var _=Object.getOwnPropertyDescriptor;var T=Object.getOwnPropertyNames;var L=Object.prototype.hasOwnProperty;var w=(n,t,e)=>t in n?g(n,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):n[t]=e;var A=(n,t)=>{for(var e in t)g(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&&g(n,r,{get:()=>t[r],enumerable:!(i=_(t,r))||i.enumerable});return n};var R=n=>E(g({},"__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 f={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,"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||f.LIMIT,this.currentLimit=this.baseLimit;let e=t.maxRetries!==void 0?t.maxRetries:f.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:f.DEBOUNCE_MS,r=Math.max(i,f.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:`${f.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);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;
|
|
@@ -130,15 +130,23 @@
|
|
|
130
130
|
}
|
|
131
131
|
|
|
132
132
|
.pro6pp-item__label {
|
|
133
|
-
font-weight:
|
|
133
|
+
font-weight: 400;
|
|
134
134
|
flex-shrink: 1;
|
|
135
135
|
overflow: hidden;
|
|
136
136
|
text-overflow: ellipsis;
|
|
137
137
|
white-space: nowrap;
|
|
138
138
|
}
|
|
139
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
|
+
|
|
140
149
|
.pro6pp-item__subtitle {
|
|
141
|
-
font-size: 13px;
|
|
142
150
|
color: #6b7280;
|
|
143
151
|
flex-shrink: 0;
|
|
144
152
|
}
|
|
@@ -158,20 +166,6 @@
|
|
|
158
166
|
text-align: center;
|
|
159
167
|
}
|
|
160
168
|
|
|
161
|
-
.pro6pp-load-more {
|
|
162
|
-
width: 100%;
|
|
163
|
-
padding: 14px;
|
|
164
|
-
background: #f9fafb;
|
|
165
|
-
border: none;
|
|
166
|
-
border-top: 1px solid #e0e0e0;
|
|
167
|
-
color: #3b82f6;
|
|
168
|
-
font-size: 14px;
|
|
169
|
-
font-weight: 600;
|
|
170
|
-
cursor: pointer;
|
|
171
|
-
flex-shrink: 0;
|
|
172
|
-
touch-action: manipulation;
|
|
173
|
-
}
|
|
174
|
-
|
|
175
169
|
.pro6pp-loader-item {
|
|
176
170
|
padding: 10px 12px;
|
|
177
171
|
color: #6b7280;
|
|
@@ -202,20 +196,9 @@
|
|
|
202
196
|
padding: 10px 12px;
|
|
203
197
|
font-size: 14px;
|
|
204
198
|
}
|
|
205
|
-
.pro6pp-item__subtitle {
|
|
206
|
-
font-size: 12px;
|
|
207
|
-
}
|
|
208
|
-
.pro6pp-load-more {
|
|
209
|
-
padding: 12px;
|
|
210
|
-
font-size: 13px;
|
|
211
|
-
}
|
|
212
|
-
}
|
|
213
|
-
|
|
214
|
-
.pro6pp-load-more:active {
|
|
215
|
-
background-color: #f3f4f6;
|
|
216
199
|
}
|
|
217
200
|
|
|
218
201
|
@keyframes pro6pp-spin {
|
|
219
202
|
to { transform: rotate(360deg); }
|
|
220
203
|
}
|
|
221
|
-
`;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 f={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,"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||f.LIMIT,this.currentLimit=this.baseLimit;let e=t.maxRetries!==void 0?t.maxRetries:f.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:f.DEBOUNCE_MS,s=Math.max(i,f.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 g=h?` ${h}`:"",v=d?`${d}, `:"";p=`${c} ${a}${g}, ${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 g=h[1];e.startsWith(g)&&(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:`${f.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);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;
|
|
@@ -130,15 +130,23 @@ var S=Object.defineProperty;var y=(a,t,e)=>t in a?S(a,t,{enumerable:!0,configura
|
|
|
130
130
|
}
|
|
131
131
|
|
|
132
132
|
.pro6pp-item__label {
|
|
133
|
-
font-weight:
|
|
133
|
+
font-weight: 400;
|
|
134
134
|
flex-shrink: 1;
|
|
135
135
|
overflow: hidden;
|
|
136
136
|
text-overflow: ellipsis;
|
|
137
137
|
white-space: nowrap;
|
|
138
138
|
}
|
|
139
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
|
+
|
|
140
149
|
.pro6pp-item__subtitle {
|
|
141
|
-
font-size: 13px;
|
|
142
150
|
color: #6b7280;
|
|
143
151
|
flex-shrink: 0;
|
|
144
152
|
}
|
|
@@ -158,20 +166,6 @@ var S=Object.defineProperty;var y=(a,t,e)=>t in a?S(a,t,{enumerable:!0,configura
|
|
|
158
166
|
text-align: center;
|
|
159
167
|
}
|
|
160
168
|
|
|
161
|
-
.pro6pp-load-more {
|
|
162
|
-
width: 100%;
|
|
163
|
-
padding: 14px;
|
|
164
|
-
background: #f9fafb;
|
|
165
|
-
border: none;
|
|
166
|
-
border-top: 1px solid #e0e0e0;
|
|
167
|
-
color: #3b82f6;
|
|
168
|
-
font-size: 14px;
|
|
169
|
-
font-weight: 600;
|
|
170
|
-
cursor: pointer;
|
|
171
|
-
flex-shrink: 0;
|
|
172
|
-
touch-action: manipulation;
|
|
173
|
-
}
|
|
174
|
-
|
|
175
169
|
.pro6pp-loader-item {
|
|
176
170
|
padding: 10px 12px;
|
|
177
171
|
color: #6b7280;
|
|
@@ -202,20 +196,9 @@ var S=Object.defineProperty;var y=(a,t,e)=>t in a?S(a,t,{enumerable:!0,configura
|
|
|
202
196
|
padding: 10px 12px;
|
|
203
197
|
font-size: 14px;
|
|
204
198
|
}
|
|
205
|
-
.pro6pp-item__subtitle {
|
|
206
|
-
font-size: 12px;
|
|
207
|
-
}
|
|
208
|
-
.pro6pp-load-more {
|
|
209
|
-
padding: 12px;
|
|
210
|
-
font-size: 13px;
|
|
211
|
-
}
|
|
212
|
-
}
|
|
213
|
-
|
|
214
|
-
.pro6pp-load-more:active {
|
|
215
|
-
background-color: #f3f4f6;
|
|
216
199
|
}
|
|
217
200
|
|
|
218
201
|
@keyframes pro6pp-spin {
|
|
219
202
|
to { transform: rotate(360deg); }
|
|
220
203
|
}
|
|
221
|
-
`;export{
|
|
204
|
+
`;export{A as DEFAULT_STYLES,y as INITIAL_STATE,S as InferCore,m as formatLabelByInputOrder,k as getHighlightSegments};
|
package/package.json
CHANGED