@mapbox/search-js-web - npm Package Compare versions

Comparing version 1.0.0-beta.16 to 1.0.0-beta.17

dist/components/MapboxSearchBox.d.ts

@@ -214,2 +214,12 @@ import { SearchBoxOptions, SearchBoxRetrieveResponse, SearchBoxSuggestion, SearchBoxSuggestionResponse } from '@mapbox/search-js-core';
     /**
+     * The input element's placeholder text. The default value may be localized if {@link SearchBoxOptions#language} is set.
+     *
+     * @name placeholder
+     * @instance
+     * @memberof MapboxSearchBox
+     * @type {string}
+     */
+    get placeholder(): string;
+    set placeholder(text: string);
+    /**
      * A callback providing the opportunity to validate and/or manipulate the input text before it triggers a search, for example by using a regular expression.
@@ -228,2 +238,27 @@ * If a truthy string value is returned, it will be passed into the underlying search API. If `null`, `undefined` or empty string is returned, no search request will be performed.
     interceptSearch: (val: string) => string;
+    /** @section {Map settings} */
+    /**
+     * A [mapbox-gl](https://github.com/mapbox/mapbox-gl-js) instance to use when creating [Markers](https://docs.mapbox.com/mapbox-gl-js/api/#marker). Required if {@link MapboxSearchBox#marker} is `true`.
+     *
+     * @name mapboxgl
+     * @instance
+     * @memberof MapboxSearchBox
+     */
+    mapboxgl: typeof mapboxgl;
+    /**
+     * If `true`, a [Marker](https://docs.mapbox.com/mapbox-gl-js/api/#marker) will be added to the map at the location of the user-selected result using a default set of Marker options.  If the value is an object, the marker will be constructed using these options. If `false`, no marker will be added to the map. Requires that {@link MapboxSearchBox#mapboxgl} also be set.
+     *
+     * @name marker
+     * @instance
+     * @memberof MapboxSearchBox
+     * @type {boolean | mapboxgl.MarkerOptions}
+     * @example
+     * ```typescript
+     * search.marker = {
+     *   color: 'red',
+     *   draggable: true
+     * };
+     * ```
+     */
+    marker: boolean | mapboxgl.MarkerOptions;
     connectedCallback(): void;
@@ -237,2 +272,6 @@ disconnectedCallback(): void;
     focus(): void;
+    /**
+     * Sets the input text and triggers a search programmatically
+     */
+    search(text: string): void;
     /** @section {Map binding} */
@@ -239,0 +278,0 @@ /**

dist/components/MapboxSearchListbox.d.ts

@@ -42,2 +42,3 @@ import { SearchBoxSuggestion, AddressAutofillSuggestion, GeocodingFeature } from '@mapbox/search-js-core';
     autofillHost?: MapboxAddressAutofill | AddressAutofillInstance;
+    dataSeed: string;
     get input(): HTMLInputElement | null;
@@ -44,0 +45,0 @@ set input(newInput: HTMLInputElement | null);

dist/constants.d.ts

@@ -6,1 +6,2 @@ export declare const STATIC_BASE_URL_SATELLITE: string;
 export declare const LISTBOX_SUGGESTION_TEMPLATE: HTMLTemplateElement;
+export declare const SEARCHBOX_TEMPLATE: HTMLTemplateElement;

dist/theme.d.ts

@@ -230,2 +230,6 @@ /**
     addressMarker?: string;
+    /**
+     * Icon for Search Box input.
+     */
+    search?: string;
 }
@@ -232,0 +236,0 @@ /**

dist/utils/aria/index.d.ts

@@ -13,4 +13,4 @@ import { AddressAutofillSuggestion, GeocodingFeature, SearchBoxSuggestion } from '@mapbox/search-js-core';
  */
-export declare const createAriaLiveElement: () => HTMLDivElement;
-export declare const setLiveRegionMessage: (message: string) => void;
+export declare const createAriaLiveElement: (seed: string) => HTMLDivElement;
+export declare const setLiveRegionMessage: (message: string, seed: string) => void;
 /**
@@ -17,0 +17,0 @@ * Adds special parameters to form input to avoid password managers from trigger it's autocompletion on our field.

package.json

 {
   "name": "@mapbox/search-js-web",
-  "version": "1.0.0-beta.16",
+  "version": "1.0.0-beta.17",
   "description": "Search web component with form autocomplete.",
@@ -23,6 +23,7 @@ "main": "dist/index.js",
     "@floating-ui/dom": "^0.5.2",
-    "@mapbox/search-js-core": "^1.0.0-beta.16",
+    "@mapbox/search-js-core": "^1.0.0-beta.17",
     "@mapbox/sphericalmercator": "^1.2.0",
     "focus-trap": "^6.7.3",
-    "no-scroll": "^2.1.1"
+    "no-scroll": "^2.1.1",
+    "subtag": "^0.5.0"
   },
@@ -77,5 +78,5 @@ "peerDependencies": {
       "path": "dist/mapboxsearch.js",
-      "limit": "35 kB"
+      "limit": "36 kB"
     }
   ]
 }

web/index.ts

@@ -142,3 +142,3 @@ import mapboxgl from 'mapbox-gl';
     element.theme = THEMES[selectEl.value];
-    minimap.theme = THEMES[selectEl.value];
+    minimap && (minimap.theme = THEMES[selectEl.value]);
   });
@@ -189,2 +189,3 @@ }
     element.bindMap(map);
+    element.mapboxgl = mapboxgl;
 
@@ -203,2 +204,5 @@ element.addEventListener('input', (e) => {
     clonedElement.accessToken = ACCESS_TOKEN;
+    clonedElement.options.language = 'pt';
+    clonedElement.mapboxgl = mapboxgl;
+    clonedElement.marker = { color: 'red' };
 
@@ -209,3 +213,9 @@ map.addControl(clonedElement);
     });
+
+    // clonedElement.search('99 green st');
   }
+
+  // const searchbox = new MapboxSearchBox();
+  // searchbox.accessToken = ACCESS_TOKEN;
+  // map.addControl(searchbox);
 }

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

3265095

increased by2.97%

Number of package files

76

increased by1.33%

Lines of code

13837

increased by3.98%

Worsened metrics

Dependency count

7

increased by16.67%

Dependency changes

• + Addedsubtag@^0.5.0

• + Addedsubtag@0.5.0(transitive)

• Updated@mapbox/search-js-core@^1.0.0-beta.17