@pro6pp/infer-js 0.0.2-beta.4 → 0.0.2-beta.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/README.md +54 -65
  2. package/dist/index.d.mts +41 -3
  3. package/dist/index.d.ts +41 -3
  4. package/dist/index.global.js +84 -32
  5. package/dist/index.js +5 -51
  6. package/dist/index.mjs +5 -51
  7. package/package.json +2 -2
package/README.md CHANGED
@@ -5,7 +5,7 @@ A library that adds address autocompletion to any HTML input field.
5
5
 
6
6
  ## Installation
7
7
 
8
- ### Option 1: CDN
8
+ #### Option 1: CDN
9
9
 
10
10
  Add this script to your HTML file. It exposes a global `Pro6PP` variable.
11
11
 
@@ -13,7 +13,7 @@ Add this script to your HTML file. It exposes a global `Pro6PP` variable.
13
13
  <script src="https://unpkg.com/@pro6pp/infer-js"></script>
14
14
  ```
15
15
 
16
- ### Option 2: NPM
16
+ #### Option 2: NPM
17
17
 
18
18
  If you are using a build tool like Webpack or Vite, but not a framework like React.
19
19
 
@@ -25,104 +25,93 @@ npm install @pro6pp/infer-js
25
25
 
26
26
  ## Usage
27
27
 
28
- ### Option 1: CDN
28
+ #### Option 1: CDN
29
29
 
30
30
  1. Add the script to your page.
31
31
  2. Create an input field.
32
32
  3. Attach the core logic to that input using `Pro6PP.attach()`.
33
33
 
34
34
  ```html
35
- <!DOCTYPE html>
36
- <html lang="en">
37
- <head>
38
- <meta charset="UTF-8" />
39
- <title>Address Autocomplete</title>
40
- </head>
41
- <body>
42
- <label>Address:</label>
43
- <script src="https://unpkg.com/@pro6pp/infer-js"></script>
44
- <script>
45
- Pro6PP.attach('#my-address-input', {
46
- authKey: 'YOUR_AUTH_KEY',
47
- country: 'NL',
48
- onSelect: function (result) {
49
- console.log('Selected Address:', result);
50
- },
51
- });
52
- </script>
53
- </body>
54
- </html>
35
+ <label>Address:</label>
36
+ <input id="address-input" type="text" />
37
+
38
+ <!-- Inject the CDN -->
39
+ <script src="https://unpkg.com/@pro6pp/infer-js"></script>
40
+ <script>
41
+ Pro6PP.attach('#address-input', {
42
+ authKey: 'YOUR_AUTH_KEY',
43
+ country: 'NL',
44
+ onSelect: function (result) {
45
+ console.log('Selected Address:', result);
46
+ },
47
+ });
48
+ </script>
55
49
  ```
56
50
 
57
- ### Option 2: NPM
51
+ #### Option 2: NPM
58
52
 
59
53
  1. Create an input field.
60
54
  2. Import the `attach` function.
61
55
  3. Initialize the autocomplete on the input.
62
56
 
63
57
  ```html
64
- <label for="address-input">Address</label>
65
- <input id="address-input" name="address" type="text" placeholder="Type address..." />
58
+ <input id="address-input" name="address" />
66
59
  ```
67
60
 
68
61
  ```javascript
69
62
  import { attach } from '@pro6pp/infer-js';
70
- import '@pro6pp/infer-js/dist/style.css';
71
63
 
72
- const inputElement = document.querySelector('input[name="address"]');
64
+ const inputElement = document.getElementById('address-input');
73
65
 
74
66
  attach(inputElement, {
75
67
  authKey: 'YOUR_AUTH_KEY',
76
68
  country: 'NL',
77
69
  onSelect: (result) => {
78
- console.log(result);
70
+ console.log('Selected Address:', result);
79
71
  },
80
72
  });
81
73
  ```
82
74
 
75
+ ## API Configuration
76
+
77
+ | Prop | Description | Default |
78
+ | :-------------- | :------------------------------------------------------------ | :--------------------------- |
79
+ | `authKey` | **(Required)** Your Pro6PP Authorization Key. | - |
80
+ | `country` | **(Required)** The country to search in (`'NL'` or `'DE'`). | - |
81
+ | `debounceMs` | Delay in milliseconds before the API search. Minimum of 50ms. | `150` |
82
+ | `style` | Styling theme. Use `'none'` to disable default CSS. | `'default'` |
83
+ | `placeholder` | Custom placeholder text for the input field. | - |
84
+ | `inputClass` | Additional CSS classes to add to the input element. | - |
85
+ | `noResultsText` | Text to display when no suggestions are found. | `'No results found'` |
86
+ | `limit` | Maximum number of suggestions to request. | `1000` |
87
+ | `apiUrl` | Base URL for the Pro6PP API. | `'https://api.pro6pp.nl/v2'` |
88
+ | `fetcher` | Custom fetch implementation for requests. | `window.fetch` |
89
+ | `onSelect` | Callback fired when a result is selected. | - |
90
+ | `onStateChange` | Callback fired whenever the internal state updates. | - |
91
+
83
92
  ## Styling
84
93
 
85
- By default, the SDK injects a small CSS block to make the dropdown look decent. If you want to control the styling with your own CSS, set `style: 'none'` in the config:
94
+ By default, the SDK injects the necessary CSS for the dropdown. If you want to control the styling with your own styles, set `style: 'none'` in the config:
86
95
 
87
96
  ```js
88
97
  attach(inputElement, {
89
- authKey: 'YOUR_AUTH_KEY',
98
+ authKey: '...',
90
99
  country: 'NL',
91
100
  style: 'none', // disables default styles
92
- // ...
93
101
  });
94
102
  ```
95
103
 
96
- HTML created by the SDK:
97
-
98
- ```html
99
- <div class="pro6pp-autocomplete-wrapper">
100
- <input ... />
101
- <ul class="pro6pp-results">
102
- <li class="pro6pp-item">Suggestion 1</li>
103
- <li class="pro6pp-item pro6pp-selected">Suggestion 2</li>
104
- </ul>
105
- </div>
106
- ```
107
-
108
- You can target these classes in your CSS:
109
-
110
- ```css
111
- .pro6pp-results {
112
- background: white;
113
- border: 1px solid #ccc;
114
- list-style: none;
115
- padding: 0;
116
- margin: 0;
117
- }
118
-
119
- .pro6pp-item {
120
- padding: 8px;
121
- cursor: pointer;
122
- }
123
-
124
- .pro6pp-item:hover,
125
- .pro6pp-item.pro6pp-selected {
126
- background: #f0f0f0;
127
- }
128
- ```
104
+ You can then target the following classes in your CSS:
105
+
106
+ | Class | Description |
107
+ | :----------------------- | :-------------------------------------------------------- |
108
+ | `.pro6pp-wrapper` | The container element wrapping the input and dropdown. |
109
+ | `.pro6pp-input` | The input element itself. |
110
+ | `.pro6pp-loader` | The loading spinner shown during API requests. |
111
+ | `.pro6pp-dropdown` | The `<ul>` list containing the suggestions. |
112
+ | `.pro6pp-item` | A single suggestion item (`<li>`). |
113
+ | `.pro6pp-item--active` | The currently highlighted item (for keyboard navigation). |
114
+ | `.pro6pp-item__label` | The main text/label of a suggestion. |
115
+ | `.pro6pp-item__subtitle` | The secondary text (e.g., city or result count). |
116
+ | `.pro6pp-item__chevron` | The icon indicating a folder/expandable result. |
117
+ | `.pro6pp-no-results` | The message shown when no suggestions are found. |
package/dist/index.d.mts CHANGED
@@ -1,20 +1,58 @@
1
1
  import { InferConfig } from '@pro6pp/infer-core';
2
2
 
3
+ /**
4
+ * Configuration options for the JS Infer SDK.
5
+ */
3
6
  interface InferJSConfig extends InferConfig {
7
+ /**
8
+ * The styling theme to apply.
9
+ * - `default`: Injects the standard Pro6PP CSS theme.
10
+ * - `none`: No styles are applied, allowing for custom CSS.
11
+ * @default 'default'
12
+ */
4
13
  style?: 'default' | 'none';
14
+ /**
15
+ * Custom placeholder text for the input field.
16
+ */
17
+ placeholder?: string;
18
+ /**
19
+ * Additional CSS classes to add to the input element.
20
+ */
21
+ inputClass?: string;
22
+ /**
23
+ * The text to display when no suggestions are found.
24
+ * @default 'No results found'
25
+ */
26
+ noResultsText?: string;
5
27
  }
28
+ /**
29
+ * The JS implementation of the Pro6PP Infer SDK.
30
+ * This class manages the DOM elements, event listeners, and rendering for the autocomplete UI.
31
+ */
6
32
  declare class InferJS {
7
33
  private core;
8
34
  private input;
9
35
  private list;
10
36
  private wrapper;
37
+ private loader;
11
38
  private useDefaultStyles;
12
- constructor(target: string | HTMLInputElement, config: InferJSConfig);
39
+ private noResultsText;
40
+ /**
41
+ * Initializes the Infer logic on a target element.
42
+ * @param target Either a CSS selector string or a direct HTMLElement.
43
+ * @param config Configuration options for the API and UI.
44
+ */
45
+ constructor(target: string | HTMLElement, config: InferJSConfig);
13
46
  private injectStyles;
14
- private setupDOM;
15
47
  private bindEvents;
16
48
  private render;
17
49
  }
18
- declare function attach(target: string | HTMLInputElement, config: InferJSConfig): InferJS;
50
+ /**
51
+ * A helper to initialize the Pro6PP Infer SDK on a target element.
52
+ * @param target A CSS selector string or HTMLElement.
53
+ * @param config Configuration for the SDK.
54
+ * @returns An instance of InferJS.
55
+ */
56
+ declare function attach(target: string | HTMLElement, config: InferJSConfig): InferJS;
19
57
 
20
58
  export { InferJS, type InferJSConfig, attach };
package/dist/index.d.ts CHANGED
@@ -1,20 +1,58 @@
1
1
  import { InferConfig } from '@pro6pp/infer-core';
2
2
 
3
+ /**
4
+ * Configuration options for the JS Infer SDK.
5
+ */
3
6
  interface InferJSConfig extends InferConfig {
7
+ /**
8
+ * The styling theme to apply.
9
+ * - `default`: Injects the standard Pro6PP CSS theme.
10
+ * - `none`: No styles are applied, allowing for custom CSS.
11
+ * @default 'default'
12
+ */
4
13
  style?: 'default' | 'none';
14
+ /**
15
+ * Custom placeholder text for the input field.
16
+ */
17
+ placeholder?: string;
18
+ /**
19
+ * Additional CSS classes to add to the input element.
20
+ */
21
+ inputClass?: string;
22
+ /**
23
+ * The text to display when no suggestions are found.
24
+ * @default 'No results found'
25
+ */
26
+ noResultsText?: string;
5
27
  }
28
+ /**
29
+ * The JS implementation of the Pro6PP Infer SDK.
30
+ * This class manages the DOM elements, event listeners, and rendering for the autocomplete UI.
31
+ */
6
32
  declare class InferJS {
7
33
  private core;
8
34
  private input;
9
35
  private list;
10
36
  private wrapper;
37
+ private loader;
11
38
  private useDefaultStyles;
12
- constructor(target: string | HTMLInputElement, config: InferJSConfig);
39
+ private noResultsText;
40
+ /**
41
+ * Initializes the Infer logic on a target element.
42
+ * @param target Either a CSS selector string or a direct HTMLElement.
43
+ * @param config Configuration options for the API and UI.
44
+ */
45
+ constructor(target: string | HTMLElement, config: InferJSConfig);
13
46
  private injectStyles;
14
- private setupDOM;
15
47
  private bindEvents;
16
48
  private render;
17
49
  }
18
- declare function attach(target: string | HTMLInputElement, config: InferJSConfig): InferJS;
50
+ /**
51
+ * A helper to initialize the Pro6PP Infer SDK on a target element.
52
+ * @param target A CSS selector string or HTMLElement.
53
+ * @param config Configuration for the SDK.
54
+ * @returns An instance of InferJS.
55
+ */
56
+ declare function attach(target: string | HTMLElement, config: InferJSConfig): InferJS;
19
57
 
20
58
  export { InferJS, type InferJSConfig, attach };
package/dist/index.global.js CHANGED
@@ -1,51 +1,103 @@
1
- "use strict";var Pro6PP=(()=>{var u=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var S=Object.prototype.hasOwnProperty;var y=(r,t)=>{for(var e in t)u(r,e,{get:t[e],enumerable:!0})},v=(r,t,e,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of m(t))!S.call(r,n)&&n!==e&&u(r,n,{get:()=>t[n],enumerable:!(s=g(t,n))||s.enumerable});return r};var I=r=>v(u({},"__esModule",{value:!0}),r);var C={};y(C,{InferJS:()=>p,attach:()=>x});var h={API_URL:"https://api.pro6pp.nl/v2",LIMIT:1e3,DEBOUNCE_MS:300},d={DIGITS_1_3:/^[0-9]{1,3}$/},f={query:"",stage:null,cities:[],streets:[],suggestions:[],isValid:!1,isError:!1,isLoading:!1,selectedSuggestionIndex:-1},l=class{constructor(t){this.abortController=null;this.country=t.country,this.authKey=t.authKey,this.apiUrl=t.apiUrl||h.API_URL,this.limit=t.limit||h.LIMIT,this.fetcher=t.fetcher||((e,s)=>fetch(e,s)),this.onStateChange=t.onStateChange||(()=>{}),this.onSelect=t.onSelect||(()=>{}),this.state={...f},this.debouncedFetch=this.debounce(e=>this.executeFetch(e),h.DEBOUNCE_MS)}handleInput(t){this.updateState({query:t,isValid:!1,isLoading:!!t.trim(),selectedSuggestionIndex:-1}),this.state.stage==="final"&&this.onSelect(null),this.debouncedFetch(t)}handleKeyDown(t){let e=t.target;if(!e)return;let s=this.state.cities.length+this.state.streets.length+this.state.suggestions.length;if(s>0){if(t.key==="ArrowDown"){t.preventDefault();let i=this.state.selectedSuggestionIndex+1;i>=s&&(i=0),this.updateState({selectedSuggestionIndex:i});return}if(t.key==="ArrowUp"){t.preventDefault();let i=this.state.selectedSuggestionIndex-1;i<0&&(i=s-1),this.updateState({selectedSuggestionIndex:i});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 n=e.value;if(t.key===" "&&this.shouldAutoInsertComma(n)){t.preventDefault();let i=`${n.trim()}, `;this.updateQueryAndFetch(i)}}selectItem(t){let e=typeof t=="string"?t:t.label,s=typeof t!="string"?t.value:void 0,n=typeof t!="string"?t.subtitle:null;if(this.state.stage==="final"){this.finishSelection(e,s);return}this.processSelection(e,n)}shouldAutoInsertComma(t){if(!t.includes(",")&&d.DIGITS_1_3.test(t.trim()))return!0;if(this.state.stage==="house_number"){let s=this.getCurrentFragment(t);return d.DIGITS_1_3.test(s)}return!1}finishSelection(t,e){this.updateState({query:t,suggestions:[],cities:[],streets:[],isValid:!0}),this.onSelect(e||t)}processSelection(t,e){let{stage:s,query:n}=this.state,i=n;if(e&&(s==="city"||s==="street"||s==="mixed")){if(s==="city")i=`${e}, ${t}, `;else{let c=this.getQueryPrefix(n);i=c?`${c} ${t}, ${e}, `:`${t}, ${e}, `}this.updateQueryAndFetch(i);return}if(s==="direct"||s==="addition"){this.finishSelection(t);return}!n.includes(",")&&(s==="city"||s==="street"||s==="house_number_first")?i=`${t}, `:(i=this.replaceLastSegment(n,t),s!=="house_number"&&(i+=", ")),this.updateQueryAndFetch(i)}executeFetch(t){let e=(t||"").toString();if(!e.trim()){this.abortController?.abort(),this.resetState();return}this.updateState({isError:!1}),this.abortController&&this.abortController.abort(),this.abortController=new AbortController;let s=new URL(`${this.apiUrl}/infer/${this.country.toLowerCase()}`),n={authKey:this.authKey,query:e,limit:this.limit.toString()};s.search=new URLSearchParams(n).toString(),this.fetcher(s.toString(),{signal:this.abortController.signal}).then(i=>{if(!i.ok)throw new Error("Network error");return i.json()}).then(i=>this.mapResponseToState(i)).catch(i=>{i.name!=="AbortError"&&this.updateState({isError:!0,isLoading:!1})})}mapResponseToState(t){let e={stage:t.stage,isLoading:!1};t.stage==="mixed"?(e.cities=t.cities||[],e.streets=t.streets||[],e.suggestions=[]):(e.suggestions=t.suggestions||[],e.cities=[],e.streets=[]),e.isValid=t.stage==="final",this.updateState(e)}updateQueryAndFetch(t){this.updateState({query:t,suggestions:[],cities:[],streets:[]}),this.handleInput(t)}replaceLastSegment(t,e){let s=t.lastIndexOf(",");return s===-1?e:`${t.slice(0,s+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({...f,query:this.state.query})}updateState(t){this.state={...this.state,...t},this.onStateChange(this.state)}debounce(t,e){let s;return(...n)=>{s&&clearTimeout(s),s=setTimeout(()=>t.apply(this,n),e)}}};var b=`
1
+ "use strict";var Pro6PP=(()=>{var f=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var I=Object.prototype.hasOwnProperty;var C=(p,e)=>{for(var t in e)f(p,t,{get:e[t],enumerable:!0})},E=(p,e,t,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of x(e))!I.call(p,i)&&i!==t&&f(p,i,{get:()=>e[i],enumerable:!(n=v(e,i))||n.enumerable});return p};var w=p=>E(f({},"__esModule",{value:!0}),p);var L={};C(L,{InferJS:()=>h,attach:()=>T});var d={API_URL:"https://api.pro6pp.nl/v2",LIMIT:1e3,DEBOUNCE_MS:150,MIN_DEBOUNCE_MS:50},y={DIGITS_1_3:/^[0-9]{1,3}$/},b={query:"",stage:null,cities:[],streets:[],suggestions:[],isValid:!1,isError:!1,isLoading:!1,selectedSuggestionIndex:-1},c=class{constructor(e){this.abortController=null;this.isSelecting=!1;this.country=e.country,this.authKey=e.authKey,this.apiUrl=e.apiUrl||d.API_URL,this.limit=e.limit||d.LIMIT,this.fetcher=e.fetcher||((i,s)=>fetch(i,s)),this.onStateChange=e.onStateChange||(()=>{}),this.onSelect=e.onSelect||(()=>{}),this.state={...b};let t=e.debounceMs!==void 0?e.debounceMs:d.DEBOUNCE_MS,n=Math.max(t,d.MIN_DEBOUNCE_MS);this.debouncedFetch=this.debounce(i=>this.executeFetch(i),n)}handleInput(e){if(this.isSelecting){this.isSelecting=!1;return}let t=this.state.stage==="final"&&e!==this.state.query;this.updateState({query:e,isValid:!1,isLoading:!!e.trim(),selectedSuggestionIndex:-1}),t&&this.onSelect(null),this.debouncedFetch(e)}handleKeyDown(e){let t=e.target;if(!t)return;let n=this.state.cities.length+this.state.streets.length+this.state.suggestions.length;if(n>0){if(e.key==="ArrowDown"){e.preventDefault();let s=this.state.selectedSuggestionIndex+1;s>=n&&(s=0),this.updateState({selectedSuggestionIndex:s});return}if(e.key==="ArrowUp"){e.preventDefault();let s=this.state.selectedSuggestionIndex-1;s<0&&(s=n-1),this.updateState({selectedSuggestionIndex:s});return}if(e.key==="Enter"&&this.state.selectedSuggestionIndex>=0){e.preventDefault();let l=[...this.state.cities,...this.state.streets,...this.state.suggestions][this.state.selectedSuggestionIndex];l&&(this.selectItem(l),this.updateState({selectedSuggestionIndex:-1}));return}}let i=t.value;if(e.key===" "&&this.shouldAutoInsertComma(i)){e.preventDefault();let s=`${i.trim()}, `;this.updateQueryAndFetch(s)}}selectItem(e){this.debouncedFetch.cancel(),this.abortController&&this.abortController.abort();let t=typeof e=="string"?e:e.label,n=t;typeof e!="string"&&typeof e.value=="string"&&(n=e.value);let i=typeof e!="string"&&typeof e.value=="object"?e.value:void 0,s=!!i&&Object.keys(i).length>0;if(this.isSelecting=!0,this.state.stage==="final"||s){let r=t;if(i&&Object.keys(i).length>0){let{street:o,street_number:u,house_number:m,city:a}=i,S=u||m;o&&S&&a&&(r=`${o} ${S}, ${a}`)}this.finishSelection(r,i);return}let l=typeof e!="string"?e.subtitle:null;this.processSelection(n,l)}shouldAutoInsertComma(e){if(!e.includes(",")&&y.DIGITS_1_3.test(e.trim()))return!0;if(this.state.stage==="house_number"){let n=this.getCurrentFragment(e);return y.DIGITS_1_3.test(n)}return!1}finishSelection(e,t){this.updateState({query:e,suggestions:[],cities:[],streets:[],isValid:!0,stage:"final"}),this.onSelect(t||e),setTimeout(()=>{this.isSelecting=!1},0)}processSelection(e,t){let{stage:n,query:i}=this.state,s=i;if(t&&(n==="city"||n==="street"||n==="mixed")){if(n==="city")s=`${t}, ${e}, `;else{let u=this.getQueryPrefix(i);s=u?`${u} ${e}, ${t}, `:`${e}, ${t}, `}this.updateQueryAndFetch(s);return}if(n==="direct"||n==="addition"){this.finishSelection(e);return}!i.includes(",")&&(n==="city"||n==="street"||n==="house_number_first")?s=`${e}, `:(s=this.replaceLastSegment(i,e),n!=="house_number"&&(s+=", ")),this.updateQueryAndFetch(s)}executeFetch(e){let t=(e||"").toString();if(!t.trim()){this.abortController?.abort(),this.resetState();return}this.updateState({isError:!1}),this.abortController&&this.abortController.abort(),this.abortController=new AbortController;let n=new URL(`${this.apiUrl}/infer/${this.country.toLowerCase()}`),i={authKey:this.authKey,query:t,limit:this.limit.toString()};n.search=new URLSearchParams(i).toString(),this.fetcher(n.toString(),{signal:this.abortController.signal}).then(s=>{if(!s.ok)throw new Error("Network error");return s.json()}).then(s=>this.mapResponseToState(s)).catch(s=>{s.name!=="AbortError"&&this.updateState({isError:!0,isLoading:!1})})}mapResponseToState(e){let t={stage:e.stage,isLoading:!1},n=!1,i=null,s=e.suggestions||[],l=[],r=new Set;for(let o of s){let u=`${o.label}|${o.subtitle||""}|${JSON.stringify(o.value||{})}`;r.has(u)||(r.add(u),l.push(o))}if(e.stage==="mixed"?(t.cities=e.cities||[],t.streets=e.streets||[],t.suggestions=[]):(t.suggestions=l,t.cities=[],t.streets=[],e.stage==="final"&&l.length===1&&(n=!0,i=l[0])),t.isValid=e.stage==="final",n&&i){t.query=i.label,t.suggestions=[],t.cities=[],t.streets=[],t.isValid=!0,this.updateState(t);let o=typeof i.value=="object"?i.value:i.label;this.onSelect(o)}else this.updateState(t)}updateQueryAndFetch(e){this.updateState({query:e,suggestions:[],cities:[],streets:[]}),this.updateState({isLoading:!0,isValid:!1}),this.debouncedFetch(e),setTimeout(()=>{this.isSelecting=!1},0)}replaceLastSegment(e,t){let n=e.lastIndexOf(",");return n===-1?t:`${e.slice(0,n+1)} ${t}`.trim()}getQueryPrefix(e){let t=e.lastIndexOf(",");return t===-1?"":e.slice(0,t+1).trimEnd()}getCurrentFragment(e){return(e.split(",").slice(-1)[0]??"").trim()}resetState(){this.updateState({...b,query:this.state.query})}updateState(e){this.state={...this.state,...e},this.onStateChange(this.state)}debounce(e,t){let n,i=(...s)=>{n&&clearTimeout(n),n=setTimeout(()=>e.apply(this,s),t)};return i.cancel=()=>{n&&(clearTimeout(n),n=void 0)},i}};var g=`
2
2
  .pro6pp-wrapper {
3
3
  position: relative;
4
- display: block;
4
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
5
+ box-sizing: border-box;
5
6
  width: 100%;
6
7
  }
7
-
8
+ .pro6pp-wrapper * {
9
+ box-sizing: border-box;
10
+ }
11
+ .pro6pp-input {
12
+ width: 100%;
13
+ padding: 10px 12px;
14
+ border: 1px solid #e0e0e0;
15
+ border-radius: 4px;
16
+ font-size: 16px;
17
+ line-height: 1.5;
18
+ transition: border-color 0.2s, box-shadow 0.2s;
19
+ }
20
+ .pro6pp-input:focus {
21
+ outline: none;
22
+ border-color: #3b82f6;
23
+ box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
24
+ }
8
25
  .pro6pp-dropdown {
9
26
  position: absolute;
10
27
  top: 100%;
11
28
  left: 0;
12
29
  right: 0;
13
- z-index: 10000;
14
- background-color: #ffffff;
15
- border: 1px solid #e2e8f0;
16
- border-radius: 0 0 4px 4px;
17
- box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
18
- list-style: none;
19
- margin: 0;
20
- padding: 0;
21
- max-height: 250px;
30
+ z-index: 9999;
31
+ margin-top: 4px;
32
+ background: white;
33
+ border: 1px solid #e0e0e0;
34
+ border-radius: 4px;
35
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
36
+ max-height: 300px;
22
37
  overflow-y: auto;
38
+ list-style: none !important;
39
+ padding: 0 !important;
40
+ margin: 0 !important;
23
41
  }
24
-
25
42
  .pro6pp-item {
26
- padding: 10px 12px;
43
+ padding: 10px 16px;
27
44
  cursor: pointer;
28
- border-bottom: 1px solid #f1f5f9;
29
- font-family: inherit;
45
+ display: flex;
46
+ flex-direction: row;
47
+ align-items: center;
48
+ color: #000000;
30
49
  font-size: 14px;
31
- line-height: 1.4;
32
- color: #1e293b;
33
- transition: background-color 0.15s ease;
50
+ line-height: 1.2;
51
+ white-space: nowrap;
52
+ overflow: hidden;
34
53
  }
35
-
36
- .pro6pp-item:last-child {
37
- border-bottom: none;
38
- }
39
-
40
54
  .pro6pp-item:hover, .pro6pp-item--active {
41
- background-color: #f8fafc;
42
- color: #0f172a;
55
+ background-color: #f5f5f5;
56
+ }
57
+ .pro6pp-item__label {
58
+ font-weight: 500;
59
+ flex-shrink: 0;
43
60
  }
44
-
45
61
  .pro6pp-item__subtitle {
46
- display: block;
47
- font-size: 0.85em;
48
- color: #64748b;
49
- margin-top: 2px;
62
+ font-size: 14px;
63
+ color: #404040;
64
+ overflow: hidden;
65
+ text-overflow: ellipsis;
66
+ flex-shrink: 1;
67
+ }
68
+ .pro6pp-item__chevron {
69
+ margin-left: auto;
70
+ display: flex;
71
+ align-items: center;
72
+ color: #a3a3a3;
73
+ padding-left: 8px;
74
+ }
75
+ .pro6pp-no-results {
76
+ padding: 12px;
77
+ color: #555555;
78
+ font-size: 14px;
79
+ text-align: center;
80
+ user-select: none;
81
+ pointer-events: none;
82
+ }
83
+ .pro6pp-loader {
84
+ position: absolute;
85
+ right: 12px;
86
+ top: 50%;
87
+ transform: translateY(-50%);
88
+ width: 16px;
89
+ height: 16px;
90
+ border: 2px solid #e0e0e0;
91
+ border-top-color: #404040;
92
+ border-radius: 50%;
93
+ animation: pro6pp-spin 0.6s linear infinite;
94
+ pointer-events: none;
95
+ }
96
+ @keyframes pro6pp-spin {
97
+ to { transform: translateY(-50%) rotate(360deg); }
50
98
  }
51
- `,p=class{constructor(t,e){let s=typeof t=="string"?document.querySelector(t):t;if(!s||!(s instanceof HTMLInputElement))throw new Error("InferJS: Target element not found or is not an input.");this.input=s,this.useDefaultStyles=e.style!=="none",this.useDefaultStyles&&this.injectStyles(),this.core=new l({...e,onStateChange:n=>this.render(n),onSelect:n=>{typeof n=="string"?this.input.value=n:n&&typeof n=="object"&&(this.input.value=this.core.state.query),e.onSelect&&e.onSelect(n)}}),this.setupDOM(),this.bindEvents()}injectStyles(){let t="pro6pp-infer-styles";if(!document.getElementById(t)){let e=document.createElement("style");e.id=t,e.textContent=b,document.head.appendChild(e)}}setupDOM(){this.wrapper=document.createElement("div"),this.wrapper.className="pro6pp-wrapper",this.input.parentNode?.insertBefore(this.wrapper,this.input),this.wrapper.appendChild(this.input),this.list=document.createElement("ul"),this.list.className="pro6pp-dropdown",this.list.style.display="none",this.wrapper.appendChild(this.list)}bindEvents(){this.input.addEventListener("input",t=>{let e=t.target.value;this.core.handleInput(e)}),this.input.addEventListener("keydown",t=>{this.core.handleKeyDown(t)}),document.addEventListener("click",t=>{this.wrapper.contains(t.target)||(this.list.style.display="none")})}render(t){this.input.value!==t.query&&(this.input.value=t.query),this.list.innerHTML="";let e=[...t.cities.map(s=>({item:s,type:"city"})),...t.streets.map(s=>({item:s,type:"street"})),...t.suggestions.map(s=>({item:s,type:"suggestion"}))];if(e.length===0){this.list.style.display="none";return}this.list.style.display="block",e.forEach(({item:s},n)=>{let i=document.createElement("li");i.className="pro6pp-item",n===t.selectedSuggestionIndex&&i.classList.add("pro6pp-item--active"),i.setAttribute("role","option");let o=document.createElement("span");if(o.className="pro6pp-item__label",o.textContent=s.label,i.appendChild(o),s.subtitle){let a=document.createElement("span");a.className="pro6pp-item__subtitle",a.textContent=s.subtitle,i.appendChild(a)}i.onclick=a=>{a.stopPropagation(),this.core.selectItem(s)},this.list.appendChild(i)})}};function x(r,t){return new p(r,t)}return I(C);})();
99
+ `;var h=class{constructor(e,t){let n=typeof e=="string"?document.querySelector(e):e;if(!n)throw new Error("InferJS: Target element not found.");if(this.noResultsText=t.noResultsText||"No results found",this.useDefaultStyles=t.style!=="none",this.useDefaultStyles&&this.injectStyles(),this.wrapper=document.createElement("div"),this.wrapper.className="pro6pp-wrapper",n instanceof HTMLInputElement?(this.input=n,this.input.parentNode?.insertBefore(this.wrapper,this.input),this.wrapper.appendChild(this.input)):(n.appendChild(this.wrapper),this.input=document.createElement("input"),this.input.type="text",t.placeholder&&(this.input.placeholder=t.placeholder),this.wrapper.appendChild(this.input)),this.useDefaultStyles&&this.input.classList.add("pro6pp-input"),t.inputClass){let i=t.inputClass.split(" ");this.input.classList.add(...i)}this.loader=document.createElement("div"),this.loader.className="pro6pp-loader",this.loader.style.display="none",this.wrapper.appendChild(this.loader),this.list=document.createElement("ul"),this.list.className="pro6pp-dropdown",this.list.style.display="none",this.list.setAttribute("role","listbox"),this.wrapper.appendChild(this.list),this.core=new c({...t,onStateChange:i=>this.render(i),onSelect:i=>{typeof i=="string"?this.input.value=i:i&&typeof i=="object"&&(this.input.value=this.core.state.query),t.onSelect&&t.onSelect(i)}}),this.bindEvents()}injectStyles(){let e="pro6pp-styles";if(!document.getElementById(e)){let t=document.createElement("style");t.id=e,t.textContent=g,document.head.appendChild(t)}}bindEvents(){this.input.addEventListener("input",e=>{let t=e.target.value;this.core.handleInput(t)}),this.input.addEventListener("keydown",e=>{this.core.handleKeyDown(e)}),document.addEventListener("click",e=>{this.wrapper.contains(e.target)||(this.list.style.display="none")}),this.input.addEventListener("focus",()=>{this.list.children.length>0&&(this.list.style.display="block")})}render(e){this.input.value!==e.query&&(this.input.value=e.query),this.loader.style.display=e.isLoading?"block":"none",this.list.innerHTML="";let t=[...e.cities.map(s=>({item:s,type:"city"})),...e.streets.map(s=>({item:s,type:"street"})),...e.suggestions.map(s=>({item:s,type:"suggestion"}))],n=t.length>0,i=!e.isLoading&&!e.isError&&e.query.length>0&&!n&&!e.isValid;if(!n&&!i){this.list.style.display="none";return}if(this.list.style.display="block",i){let s=document.createElement("li");s.className="pro6pp-no-results",s.textContent=this.noResultsText,this.list.appendChild(s);return}t.forEach(({item:s},l)=>{let r=document.createElement("li");r.className="pro6pp-item",l===e.selectedSuggestionIndex&&r.classList.add("pro6pp-item--active"),r.setAttribute("role","option"),r.setAttribute("aria-selected",l===e.selectedSuggestionIndex?"true":"false");let o=document.createElement("span");o.className="pro6pp-item__label",o.textContent=s.label,r.appendChild(o);let u=s.subtitle||s.count;if(u){let a=document.createElement("span");a.className="pro6pp-item__subtitle",a.textContent=`, ${u}`,r.appendChild(a)}if(s.value===void 0||s.value===null){let a=document.createElement("div");a.className="pro6pp-item__chevron",a.innerHTML=`
100
+ <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
101
+ <polyline points="9 18 15 12 9 6"></polyline>
102
+ </svg>
103
+ `,r.appendChild(a)}r.onmousedown=a=>a.preventDefault(),r.onclick=a=>{a.stopPropagation(),this.core.selectItem(s),e.isValid||this.input.focus()},this.list.appendChild(r)})}};function T(p,e){return new h(p,e)}return w(L);})();
package/dist/index.js CHANGED
@@ -1,51 +1,5 @@
1
- "use strict";var a=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var h=Object.prototype.hasOwnProperty;var f=(p,e)=>{for(var t in e)a(p,t,{get:e[t],enumerable:!0})},m=(p,e,t,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let n of u(e))!h.call(p,n)&&n!==t&&a(p,n,{get:()=>e[n],enumerable:!(i=c(e,n))||i.enumerable});return p};var y=p=>m(a({},"__esModule",{value:!0}),p);var v={};f(v,{InferJS:()=>r,attach:()=>g});module.exports=y(v);var d=require("@pro6pp/infer-core"),b=`
2
- .pro6pp-wrapper {
3
- position: relative;
4
- display: block;
5
- width: 100%;
6
- }
7
-
8
- .pro6pp-dropdown {
9
- position: absolute;
10
- top: 100%;
11
- left: 0;
12
- right: 0;
13
- z-index: 10000;
14
- background-color: #ffffff;
15
- border: 1px solid #e2e8f0;
16
- border-radius: 0 0 4px 4px;
17
- box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
18
- list-style: none;
19
- margin: 0;
20
- padding: 0;
21
- max-height: 250px;
22
- overflow-y: auto;
23
- }
24
-
25
- .pro6pp-item {
26
- padding: 10px 12px;
27
- cursor: pointer;
28
- border-bottom: 1px solid #f1f5f9;
29
- font-family: inherit;
30
- font-size: 14px;
31
- line-height: 1.4;
32
- color: #1e293b;
33
- transition: background-color 0.15s ease;
34
- }
35
-
36
- .pro6pp-item:last-child {
37
- border-bottom: none;
38
- }
39
-
40
- .pro6pp-item:hover, .pro6pp-item--active {
41
- background-color: #f8fafc;
42
- color: #0f172a;
43
- }
44
-
45
- .pro6pp-item__subtitle {
46
- display: block;
47
- font-size: 0.85em;
48
- color: #64748b;
49
- margin-top: 2px;
50
- }
51
- `,r=class{constructor(e,t){let i=typeof e=="string"?document.querySelector(e):e;if(!i||!(i instanceof HTMLInputElement))throw new Error("InferJS: Target element not found or is not an input.");this.input=i,this.useDefaultStyles=t.style!=="none",this.useDefaultStyles&&this.injectStyles(),this.core=new d.InferCore({...t,onStateChange:n=>this.render(n),onSelect:n=>{typeof n=="string"?this.input.value=n:n&&typeof n=="object"&&(this.input.value=this.core.state.query),t.onSelect&&t.onSelect(n)}}),this.setupDOM(),this.bindEvents()}injectStyles(){let e="pro6pp-infer-styles";if(!document.getElementById(e)){let t=document.createElement("style");t.id=e,t.textContent=b,document.head.appendChild(t)}}setupDOM(){this.wrapper=document.createElement("div"),this.wrapper.className="pro6pp-wrapper",this.input.parentNode?.insertBefore(this.wrapper,this.input),this.wrapper.appendChild(this.input),this.list=document.createElement("ul"),this.list.className="pro6pp-dropdown",this.list.style.display="none",this.wrapper.appendChild(this.list)}bindEvents(){this.input.addEventListener("input",e=>{let t=e.target.value;this.core.handleInput(t)}),this.input.addEventListener("keydown",e=>{this.core.handleKeyDown(e)}),document.addEventListener("click",e=>{this.wrapper.contains(e.target)||(this.list.style.display="none")})}render(e){this.input.value!==e.query&&(this.input.value=e.query),this.list.innerHTML="";let t=[...e.cities.map(i=>({item:i,type:"city"})),...e.streets.map(i=>({item:i,type:"street"})),...e.suggestions.map(i=>({item:i,type:"suggestion"}))];if(t.length===0){this.list.style.display="none";return}this.list.style.display="block",t.forEach(({item:i},n)=>{let s=document.createElement("li");s.className="pro6pp-item",n===e.selectedSuggestionIndex&&s.classList.add("pro6pp-item--active"),s.setAttribute("role","option");let l=document.createElement("span");if(l.className="pro6pp-item__label",l.textContent=i.label,s.appendChild(l),i.subtitle){let o=document.createElement("span");o.className="pro6pp-item__subtitle",o.textContent=i.subtitle,s.appendChild(o)}s.onclick=o=>{o.stopPropagation(),this.core.selectItem(i)},this.list.appendChild(s)})}};function g(p,e){return new r(p,e)}0&&(module.exports={InferJS,attach});
1
+ "use strict";var u=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var y=Object.prototype.hasOwnProperty;var v=(l,e)=>{for(var t in e)u(l,t,{get:e[t],enumerable:!0})},E=(l,e,t,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let s of f(e))!y.call(l,s)&&s!==t&&u(l,s,{get:()=>e[s],enumerable:!(r=m(e,s))||r.enumerable});return l};var C=l=>E(u({},"__esModule",{value:!0}),l);var w={};v(w,{InferJS:()=>o,attach:()=>g});module.exports=C(w);var a=require("@pro6pp/infer-core"),o=class{constructor(e,t){let r=typeof e=="string"?document.querySelector(e):e;if(!r)throw new Error("InferJS: Target element not found.");if(this.noResultsText=t.noResultsText||"No results found",this.useDefaultStyles=t.style!=="none",this.useDefaultStyles&&this.injectStyles(),this.wrapper=document.createElement("div"),this.wrapper.className="pro6pp-wrapper",r instanceof HTMLInputElement?(this.input=r,this.input.parentNode?.insertBefore(this.wrapper,this.input),this.wrapper.appendChild(this.input)):(r.appendChild(this.wrapper),this.input=document.createElement("input"),this.input.type="text",t.placeholder&&(this.input.placeholder=t.placeholder),this.wrapper.appendChild(this.input)),this.useDefaultStyles&&this.input.classList.add("pro6pp-input"),t.inputClass){let s=t.inputClass.split(" ");this.input.classList.add(...s)}this.loader=document.createElement("div"),this.loader.className="pro6pp-loader",this.loader.style.display="none",this.wrapper.appendChild(this.loader),this.list=document.createElement("ul"),this.list.className="pro6pp-dropdown",this.list.style.display="none",this.list.setAttribute("role","listbox"),this.wrapper.appendChild(this.list),this.core=new a.InferCore({...t,onStateChange:s=>this.render(s),onSelect:s=>{typeof s=="string"?this.input.value=s:s&&typeof s=="object"&&(this.input.value=this.core.state.query),t.onSelect&&t.onSelect(s)}}),this.bindEvents()}injectStyles(){let e="pro6pp-styles";if(!document.getElementById(e)){let t=document.createElement("style");t.id=e,t.textContent=a.DEFAULT_STYLES,document.head.appendChild(t)}}bindEvents(){this.input.addEventListener("input",e=>{let t=e.target.value;this.core.handleInput(t)}),this.input.addEventListener("keydown",e=>{this.core.handleKeyDown(e)}),document.addEventListener("click",e=>{this.wrapper.contains(e.target)||(this.list.style.display="none")}),this.input.addEventListener("focus",()=>{this.list.children.length>0&&(this.list.style.display="block")})}render(e){this.input.value!==e.query&&(this.input.value=e.query),this.loader.style.display=e.isLoading?"block":"none",this.list.innerHTML="";let t=[...e.cities.map(i=>({item:i,type:"city"})),...e.streets.map(i=>({item:i,type:"street"})),...e.suggestions.map(i=>({item:i,type:"suggestion"}))],r=t.length>0,s=!e.isLoading&&!e.isError&&e.query.length>0&&!r&&!e.isValid;if(!r&&!s){this.list.style.display="none";return}if(this.list.style.display="block",s){let i=document.createElement("li");i.className="pro6pp-no-results",i.textContent=this.noResultsText,this.list.appendChild(i);return}t.forEach(({item:i},h)=>{let p=document.createElement("li");p.className="pro6pp-item",h===e.selectedSuggestionIndex&&p.classList.add("pro6pp-item--active"),p.setAttribute("role","option"),p.setAttribute("aria-selected",h===e.selectedSuggestionIndex?"true":"false");let d=document.createElement("span");d.className="pro6pp-item__label",d.textContent=i.label,p.appendChild(d);let c=i.subtitle||i.count;if(c){let n=document.createElement("span");n.className="pro6pp-item__subtitle",n.textContent=`, ${c}`,p.appendChild(n)}if(i.value===void 0||i.value===null){let n=document.createElement("div");n.className="pro6pp-item__chevron",n.innerHTML=`
2
+ <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
3
+ <polyline points="9 18 15 12 9 6"></polyline>
4
+ </svg>
5
+ `,p.appendChild(n)}p.onmousedown=n=>n.preventDefault(),p.onclick=n=>{n.stopPropagation(),this.core.selectItem(i),e.isValid||this.input.focus()},this.list.appendChild(p)})}};function g(l,e){return new o(l,e)}0&&(module.exports={InferJS,attach});
package/dist/index.mjs CHANGED
@@ -1,51 +1,5 @@
1
- import{InferCore as a}from"@pro6pp/infer-core";var d=`
2
- .pro6pp-wrapper {
3
- position: relative;
4
- display: block;
5
- width: 100%;
6
- }
7
-
8
- .pro6pp-dropdown {
9
- position: absolute;
10
- top: 100%;
11
- left: 0;
12
- right: 0;
13
- z-index: 10000;
14
- background-color: #ffffff;
15
- border: 1px solid #e2e8f0;
16
- border-radius: 0 0 4px 4px;
17
- box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
18
- list-style: none;
19
- margin: 0;
20
- padding: 0;
21
- max-height: 250px;
22
- overflow-y: auto;
23
- }
24
-
25
- .pro6pp-item {
26
- padding: 10px 12px;
27
- cursor: pointer;
28
- border-bottom: 1px solid #f1f5f9;
29
- font-family: inherit;
30
- font-size: 14px;
31
- line-height: 1.4;
32
- color: #1e293b;
33
- transition: background-color 0.15s ease;
34
- }
35
-
36
- .pro6pp-item:last-child {
37
- border-bottom: none;
38
- }
39
-
40
- .pro6pp-item:hover, .pro6pp-item--active {
41
- background-color: #f8fafc;
42
- color: #0f172a;
43
- }
44
-
45
- .pro6pp-item__subtitle {
46
- display: block;
47
- font-size: 0.85em;
48
- color: #64748b;
49
- margin-top: 2px;
50
- }
51
- `,r=class{constructor(e,i){let t=typeof e=="string"?document.querySelector(e):e;if(!t||!(t instanceof HTMLInputElement))throw new Error("InferJS: Target element not found or is not an input.");this.input=t,this.useDefaultStyles=i.style!=="none",this.useDefaultStyles&&this.injectStyles(),this.core=new a({...i,onStateChange:n=>this.render(n),onSelect:n=>{typeof n=="string"?this.input.value=n:n&&typeof n=="object"&&(this.input.value=this.core.state.query),i.onSelect&&i.onSelect(n)}}),this.setupDOM(),this.bindEvents()}injectStyles(){let e="pro6pp-infer-styles";if(!document.getElementById(e)){let i=document.createElement("style");i.id=e,i.textContent=d,document.head.appendChild(i)}}setupDOM(){this.wrapper=document.createElement("div"),this.wrapper.className="pro6pp-wrapper",this.input.parentNode?.insertBefore(this.wrapper,this.input),this.wrapper.appendChild(this.input),this.list=document.createElement("ul"),this.list.className="pro6pp-dropdown",this.list.style.display="none",this.wrapper.appendChild(this.list)}bindEvents(){this.input.addEventListener("input",e=>{let i=e.target.value;this.core.handleInput(i)}),this.input.addEventListener("keydown",e=>{this.core.handleKeyDown(e)}),document.addEventListener("click",e=>{this.wrapper.contains(e.target)||(this.list.style.display="none")})}render(e){this.input.value!==e.query&&(this.input.value=e.query),this.list.innerHTML="";let i=[...e.cities.map(t=>({item:t,type:"city"})),...e.streets.map(t=>({item:t,type:"street"})),...e.suggestions.map(t=>({item:t,type:"suggestion"}))];if(i.length===0){this.list.style.display="none";return}this.list.style.display="block",i.forEach(({item:t},n)=>{let p=document.createElement("li");p.className="pro6pp-item",n===e.selectedSuggestionIndex&&p.classList.add("pro6pp-item--active"),p.setAttribute("role","option");let o=document.createElement("span");if(o.className="pro6pp-item__label",o.textContent=t.label,p.appendChild(o),t.subtitle){let s=document.createElement("span");s.className="pro6pp-item__subtitle",s.textContent=t.subtitle,p.appendChild(s)}p.onclick=s=>{s.stopPropagation(),this.core.selectItem(t)},this.list.appendChild(p)})}};function f(l,e){return new r(l,e)}export{r as InferJS,f as attach};
1
+ import{InferCore as h,DEFAULT_STYLES as c}from"@pro6pp/infer-core";var o=class{constructor(e,t){let r=typeof e=="string"?document.querySelector(e):e;if(!r)throw new Error("InferJS: Target element not found.");if(this.noResultsText=t.noResultsText||"No results found",this.useDefaultStyles=t.style!=="none",this.useDefaultStyles&&this.injectStyles(),this.wrapper=document.createElement("div"),this.wrapper.className="pro6pp-wrapper",r instanceof HTMLInputElement?(this.input=r,this.input.parentNode?.insertBefore(this.wrapper,this.input),this.wrapper.appendChild(this.input)):(r.appendChild(this.wrapper),this.input=document.createElement("input"),this.input.type="text",t.placeholder&&(this.input.placeholder=t.placeholder),this.wrapper.appendChild(this.input)),this.useDefaultStyles&&this.input.classList.add("pro6pp-input"),t.inputClass){let i=t.inputClass.split(" ");this.input.classList.add(...i)}this.loader=document.createElement("div"),this.loader.className="pro6pp-loader",this.loader.style.display="none",this.wrapper.appendChild(this.loader),this.list=document.createElement("ul"),this.list.className="pro6pp-dropdown",this.list.style.display="none",this.list.setAttribute("role","listbox"),this.wrapper.appendChild(this.list),this.core=new h({...t,onStateChange:i=>this.render(i),onSelect:i=>{typeof i=="string"?this.input.value=i:i&&typeof i=="object"&&(this.input.value=this.core.state.query),t.onSelect&&t.onSelect(i)}}),this.bindEvents()}injectStyles(){let e="pro6pp-styles";if(!document.getElementById(e)){let t=document.createElement("style");t.id=e,t.textContent=c,document.head.appendChild(t)}}bindEvents(){this.input.addEventListener("input",e=>{let t=e.target.value;this.core.handleInput(t)}),this.input.addEventListener("keydown",e=>{this.core.handleKeyDown(e)}),document.addEventListener("click",e=>{this.wrapper.contains(e.target)||(this.list.style.display="none")}),this.input.addEventListener("focus",()=>{this.list.children.length>0&&(this.list.style.display="block")})}render(e){this.input.value!==e.query&&(this.input.value=e.query),this.loader.style.display=e.isLoading?"block":"none",this.list.innerHTML="";let t=[...e.cities.map(s=>({item:s,type:"city"})),...e.streets.map(s=>({item:s,type:"street"})),...e.suggestions.map(s=>({item:s,type:"suggestion"}))],r=t.length>0,i=!e.isLoading&&!e.isError&&e.query.length>0&&!r&&!e.isValid;if(!r&&!i){this.list.style.display="none";return}if(this.list.style.display="block",i){let s=document.createElement("li");s.className="pro6pp-no-results",s.textContent=this.noResultsText,this.list.appendChild(s);return}t.forEach(({item:s},d)=>{let l=document.createElement("li");l.className="pro6pp-item",d===e.selectedSuggestionIndex&&l.classList.add("pro6pp-item--active"),l.setAttribute("role","option"),l.setAttribute("aria-selected",d===e.selectedSuggestionIndex?"true":"false");let p=document.createElement("span");p.className="pro6pp-item__label",p.textContent=s.label,l.appendChild(p);let u=s.subtitle||s.count;if(u){let n=document.createElement("span");n.className="pro6pp-item__subtitle",n.textContent=`, ${u}`,l.appendChild(n)}if(s.value===void 0||s.value===null){let n=document.createElement("div");n.className="pro6pp-item__chevron",n.innerHTML=`
2
+ <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
3
+ <polyline points="9 18 15 12 9 6"></polyline>
4
+ </svg>
5
+ `,l.appendChild(n)}l.onmousedown=n=>n.preventDefault(),l.onclick=n=>{n.stopPropagation(),this.core.selectItem(s),e.isValid||this.input.focus()},this.list.appendChild(l)})}};function E(a,e){return new o(a,e)}export{o as InferJS,E as attach};
package/package.json CHANGED
@@ -18,7 +18,7 @@
18
18
  "sideEffects": [
19
19
  "*.css"
20
20
  ],
21
- "version": "0.0.2-beta.4",
21
+ "version": "0.0.2-beta.6",
22
22
  "main": "./dist/index.js",
23
23
  "module": "./dist/index.mjs",
24
24
  "types": "./dist/index.d.ts",
@@ -43,7 +43,7 @@
43
43
  "test:coverage": "vitest run --coverage"
44
44
  },
45
45
  "dependencies": {
46
- "@pro6pp/infer-core": "0.0.2-beta.4"
46
+ "@pro6pp/infer-core": "0.0.2-beta.6"
47
47
  },
48
48
  "devDependencies": {
49
49
  "@testing-library/dom": "^10.4.1",