@googlemaps/extended-component-library - npm Package Compare versions

Comparing version 0.6.4 to 0.6.5

lib/base/constants.d.ts

@@ -7,4 +7,4 @@ /**
 /** Package version of this component library. */
-export declare const LIBRARY_VERSION = "0.6.4";
+export declare const LIBRARY_VERSION = "0.6.5";
 /** Identifier of where this component library is sourced from. */
-export declare const ATTRIBUTION_SOURCE_ID = "NPM";
+export declare const ATTRIBUTION_SOURCE_ID = "GIT";

lib/base/constants.js

@@ -7,5 +7,5 @@ /**
 /** Package version of this component library. */
-export const LIBRARY_VERSION = '0.6.4'; // x-release-please-version
+export const LIBRARY_VERSION = '0.6.5'; // x-release-please-version
 /** Identifier of where this component library is sourced from. */
 export const ATTRIBUTION_SOURCE_ID = 'NPM';
 //# sourceMappingURL=constants.js.map

lib/place_building_blocks/place_data_provider/place_data_provider.d.ts

@@ -10,3 +10,3 @@ /**
 import type { Place, PlaceResult } from '../../utils/googlemaps_types.js';
-import { PlaceConsumerRegistration } from '../place_data_consumer.js';
+import { type PlaceConsumerRegistration } from '../place_data_consumer.js';
 /**
@@ -13,0 +13,0 @@ * Provides place data to child components as context.

lib/place_building_blocks/place_field_boolean/place_field_boolean.d.ts

@@ -59,3 +59,3 @@ /**
     private valueToRender?;
-    private updateTimer?;
+    private readonly poll;
     private asyncRenderComplete?;
@@ -76,3 +76,2 @@ protected render(): import("lit-html").TemplateResult<1>;
     private updateValueToRender;
-    private cancelPolledUpdates;
     private resetAsyncRenderPromise;
@@ -79,0 +78,0 @@ }

lib/place_building_blocks/place_field_boolean/place_field_boolean.js

@@ -12,2 +12,3 @@ /**
 import { hasDataForOpeningCalculations } from '../../utils/place_utils.js';
+import { Poll } from '../../utils/poll.js';
 import { PlaceDataConsumer } from '../place_data_consumer.js';
@@ -127,2 +128,6 @@ const PLACE_BOOLEAN_FIELDS_SYNC_ACCESS = [
 let PlaceFieldBoolean = class PlaceFieldBoolean extends PlaceDataConsumer {
+    constructor() {
+        super(...arguments);
+        this.poll = new Poll();
+    }
     render() {
@@ -174,9 +179,7 @@ return html `${choose(this.valueToRender, [
         if (changedProperties.has('field')) {
-            this.cancelPolledUpdates();
+            this.poll.stop();
             if (this.field) {
                 const pollingInterval = FIELD_TO_POLLING_INTERVAL_MS[toPlaceBooleanField(this.field)];
                 if (pollingInterval) {
-                    this.updateTimer = setInterval(() => {
-                        this.requestUpdate();
-                    }, pollingInterval);
+                    this.poll.start(() => void this.requestUpdate(), pollingInterval);
                 }
@@ -188,3 +191,3 @@ }
         super.disconnectedCallback();
-        this.cancelPolledUpdates();
+        this.poll.stop();
         this.resetAsyncRenderPromise();
@@ -220,8 +223,2 @@ }
     }
-    cancelPolledUpdates() {
-        if (this.updateTimer) {
-            clearInterval(this.updateTimer);
-            this.updateTimer = undefined;
-        }
-    }
     resetAsyncRenderPromise() {
@@ -228,0 +225,0 @@ this.asyncRenderComplete?.resolve();

lib/place_building_blocks/place_opening_hours/place_opening_hours.d.ts

@@ -40,3 +40,3 @@ /**
     private expanded;
-    private updateTimer?;
+    private readonly poll;
     protected readonly fontLoader: WebFontController;
@@ -50,5 +50,4 @@ disconnectedCallback(): void;
     protected placeHasData(place: Place): boolean;
-    private cancelPolledUpdates;
     private getOpenSummaryContent;
     private getClosedSummaryContent;
 }

lib/place_building_blocks/place_opening_hours/place_opening_hours.js

@@ -15,2 +15,3 @@ /**
 import { formatTimeWithWeekdayMaybe, getUpcomingCloseTime, getUpcomingOpenTime, isSoon, NextCloseTimeStatus, NextOpenTimeStatus } from '../../utils/opening_hours.js';
+import { Poll } from '../../utils/poll.js';
 import { PlaceDataConsumer } from '../place_data_consumer.js';
@@ -42,2 +43,3 @@ const POLLING_INTERVAL_MS = 60 * 1000;
         this.expanded = false;
+        this.poll = new Poll();
         this.fontLoader = new WebFontController(this, [WebFont.MATERIAL_SYMBOLS_OUTLINED]);
@@ -48,3 +50,3 @@ this.getMsg = LocalizationController.buildLocalizer(this);
         super.disconnectedCallback();
-        this.cancelPolledUpdates();
+        this.poll.stop();
     }
@@ -54,7 +56,5 @@ willUpdate(changedProperties) {
         // Set up polled updates.
-        this.cancelPolledUpdates();
+        this.poll.stop();
         if (this.getPlace()) {
-            this.updateTimer = setInterval(() => {
-                this.requestUpdate();
-            }, POLLING_INTERVAL_MS);
+            this.poll.start(() => void this.requestUpdate(), POLLING_INTERVAL_MS);
         }
@@ -130,8 +130,2 @@ }
     }
-    cancelPolledUpdates() {
-        if (this.updateTimer) {
-            clearInterval(this.updateTimer);
-            this.updateTimer = undefined;
-        }
-    }
     getOpenSummaryContent(place) {
@@ -138,0 +132,0 @@ const { status, closePoint, closeDate } = getUpcomingCloseTime(place);

lib/place_picker/place_picker.js

@@ -240,7 +240,7 @@ /**
         // tslint:disable-next-line:enforce-name-casing
-        const { Place: OrigPlace } = await APILoader.importLibrary('places', this);
-        // A Find Place request containing only the Place ID field incurs no charge:
-        // https://developers.google.com/maps/documentation/places/web-service/usage-and-billing#find-place-id-only.
-        const findRequest = {
-            query,
+        const { Place: OrigPlace } = (await APILoader.importLibrary('places', this));
+        // A TextSearch request containing only the Place ID field incurs no charge:
+        // https://developers.google.com/maps/documentation/places/web-service/usage-and-billing#id-textsearch.
+        const searchRequest = {
+            textQuery: query,
             fields: ['id'],
@@ -251,8 +251,13 @@ locationBias: this.autocomplete.value?.getBounds(),
         try {
-            ({ places } = await OrigPlace.findPlaceFromQuery(findRequest));
+            ({ places } = await OrigPlace.searchByText(searchRequest));
         }
         catch (error) {
-            if (isNotAvailableError(error, 'findPlaceFromQuery()')) {
-                // `Place.findPlaceFromQuery()` isn't available in GA; use
+            if (isNotAvailableError(error, 'searchByText()')) {
+                // `Place.searchByText()` isn't available in GA; use
                 // `PlacesService.findPlaceFromQuery()` as a fallback.
+                const findRequest = {
+                    query,
+                    fields: ['id'],
+                    locationBias: this.autocomplete.value?.getBounds(),
+                };
                 const results = await this.searchWithFindPlaceFromQuery(findRequest);
@@ -259,0 +264,0 @@ places = [];

lib/store_locator/store_locator_styles.js

@@ -150,3 +150,15 @@ /**
   }
+
+  .search-pin {
+    width: 25px;
+    height: 25px;
+    position: relative;
+    top: 15px;
+  }
+
+  .search-pin > circle {
+    fill: #3367D6;
+    fill-opacity: 50%;
+  }
 `;
 //# sourceMappingURL=store_locator_styles.js.map

lib/store_locator/store_locator.js

@@ -14,3 +14,3 @@ /**
 import '../place_building_blocks/place_directions_button/place_directions_button.js';
-import { html, nothing, render, svg } from 'lit';
+import { html, nothing } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
@@ -410,18 +410,10 @@ import { classMap } from 'lit/directives/class-map.js';
         if (this.isIntermediateOrBetter() && this.searchLocation?.location) {
-            const styleMarker = (el) => {
-                if (!el)
-                    return;
-                const div = document.createElement('div');
-                const circle = svg `<circle cx="50" cy="50" r="50" fill="#3367D6" fill-opacity="50%"></circle>`;
-                const markerContent = html `<svg viewbox="0 0 100 100" style="width: 25px; height: 25px; position: relative; top: 15px;">${circle}</svg>`;
-                render(markerContent, div);
-                el.content = div.firstElementChild;
-            };
-            // clang-format off
-            return html `<gmp-advanced-marker
-                      .position=${this.searchLocation.location}
-                      ${ref(styleMarker)}
-                      title="${this.getMsg('LOCATOR_SEARCH_LOCATION_MARKER_TITLE')}">
-                  </gmp-advanced-marker>`;
-            // clang-format on
+            return html `
+          <gmp-advanced-marker
+              .position=${this.searchLocation.location}
+              title="${this.getMsg('LOCATOR_SEARCH_LOCATION_MARKER_TITLE')}">
+            <svg viewbox="0 0 100 100" class="search-pin">
+              <circle cx="50" cy="50" r="50"></circle>
+            </svg>
+          </gmp-advanced-marker>`;
         }
@@ -428,0 +420,0 @@ return nothing;

lib/utils/googlemaps_types.d.ts

@@ -26,2 +26,8 @@ /**
 };
+/** Search by text request. */
+export declare interface SearchByTextRequest {
+    textQuery: string;
+    fields: string[];
+    locationBias?: google.maps.LatLngBounds;
+}
 /** Updated Place class with new attribution schema. */
@@ -35,2 +41,11 @@ export declare type Place = Omit<google.maps.places.Place, 'photos' | 'reviews' | 'fetchFields'> & {
 };
+/** Places library. */
+export declare interface PlacesLibrary extends Omit<google.maps.PlacesLibrary, 'Place'> {
+    Place: {
+        new (options: google.maps.places.PlaceOptions): Place;
+        searchByText: (request: SearchByTextRequest) => Promise<{
+            places: Place[];
+        }>;
+    };
+}
 /** google.maps.marker.AdvancedMarkerElement. */
@@ -37,0 +52,0 @@ export type AdvancedMarkerElement = google.maps.marker.AdvancedMarkerElement;

package.json

 {
   "name": "@googlemaps/extended-component-library",
-  "version": "0.6.4",
+  "version": "0.6.5",
   "description": "Web Components for building rich experiences with the Google Maps JavaScript API.",
@@ -5,0 +5,0 @@ "license": "Apache-2.0",

README.md

@@ -40,3 +40,3 @@ # Extended Component Library
 
-The components in this library make use of Google Maps Platform APIs. To start, you'll need to [sign up for Google Maps Platform and create an API key](https://console.cloud.google.com/google/maps-apis/start?utm_source=npm&utm_medium=documentation&utm_campaign=&utm_content=web_components). Then, place an API Loader element somewhere in the root of your app's HTML, specifying your API key:
+The components in this library make use of Google Maps Platform APIs. To start, you'll need to [sign up for Google Maps Platform and create an API key](https://console.cloud.google.com/google/maps-apis/start?utm_source=github&utm_medium=documentation&utm_campaign=&utm_content=web_components). Then, place an API Loader element somewhere in the root of your app's HTML, specifying your API key:
 
@@ -80,3 +80,3 @@ ```html
 <gmp-map id="my-map" center="33.15,-96.20" zoom="10" map-id="DEMO_MAP_ID">
-  <gmp-advanced-marker class="pannable" position="33.15,-96.20"></gmp-advanced-marker>
+  <gmp-advanced-marker class="pannable" gmp-clickable position="33.15,-96.20"></gmp-advanced-marker>
   <!-- Some more markers ... -->
@@ -108,8 +108,8 @@ </gmp-map>
 
-Map and marker components can be used with the Extended Component Library, or on their own. See the [guide](https://developers.google.com/maps/documentation/web-components/overview?utm_source=npm&utm_medium=documentation&utm_campaign=&utm_content=web_components) for more information on Web Components in the Maps JS SDK.
+Map and marker components can be used with the Extended Component Library, or on their own. See the [guide](https://developers.google.com/maps/documentation/web-components/overview?utm_source=github&utm_medium=documentation&utm_campaign=&utm_content=web_components) for more information on Web Components in the Maps JS SDK.
 
 | Component               | Description                                    |
 | ----------------------- | ---------------------------------------------- |
-| [`<gmp-map>`](https://developers.google.com/maps/documentation/javascript/reference/map?utm_source=npm&utm_medium=documentation&utm_campaign=&utm_content=web_components#MapElement)             | The map component displays a map on a webpage, and can wrap other map-related components such as markers inside the map component in HTML. |
-| [`<gmp-advanced-marker>`](https://developers.google.com/maps/documentation/javascript/reference/advanced-markers?utm_source=npm&utm_medium=documentation&utm_campaign=&utm_content=web_components#AdvancedMarkerElement) | The marker component displays a pin on the map at specified coordinates. |
+| [`<gmp-map>`](https://developers.google.com/maps/documentation/javascript/reference/map?utm_source=github&utm_medium=documentation&utm_campaign=&utm_content=web_components#MapElement)             | The map component displays a map on a webpage, and can wrap other map-related components such as markers inside the map component in HTML. |
+| [`<gmp-advanced-marker>`](https://developers.google.com/maps/documentation/javascript/reference/advanced-markers?utm_source=github&utm_medium=documentation&utm_campaign=&utm_content=web_components#AdvancedMarkerElement) | The marker component displays a pin on the map at specified coordinates. |
 
@@ -171,3 +171,3 @@ ## Inventory of components
 
-This library uses Google Maps Platform services, and any use of Google Maps Platform is subject to the [Terms of Service](https://cloud.google.com/maps-platform/terms?utm_source=npm&utm_medium=documentation&utm_campaign=&utm_content=web_components).
+This library uses Google Maps Platform services, and any use of Google Maps Platform is subject to the [Terms of Service](https://cloud.google.com/maps-platform/terms?utm_source=github&utm_medium=documentation&utm_campaign=&utm_content=web_components).
 
@@ -182,8 +182,8 @@ For clarity, this library, and each underlying component, is not a Google Maps Platform Core Service.
 
-This library is offered via an open source license. It is not governed by the Google Maps Platform [Technical Support Services Guidelines](https://cloud.google.com/maps-platform/terms/tssg?utm_source=npm&utm_medium=documentation&utm_campaign=&utm_content=web_components), the [SLA](https://cloud.google.com/maps-platform/terms/sla?utm_source=npm&utm_medium=documentation&utm_campaign=&utm_content=web_components), or the [Deprecation Policy](https://cloud.google.com/maps-platform/terms?utm_source=npm&utm_medium=documentation&utm_campaign=&utm_content=web_components) (however, any Google Maps Platform services used by the library remain subject to the Google Maps Platform Terms of Service).
+This library is offered via an open source license. It is not governed by the Google Maps Platform [Technical Support Services Guidelines](https://cloud.google.com/maps-platform/terms/tssg?utm_source=github&utm_medium=documentation&utm_campaign=&utm_content=web_components), the [SLA](https://cloud.google.com/maps-platform/terms/sla?utm_source=github&utm_medium=documentation&utm_campaign=&utm_content=web_components), or the [Deprecation Policy](https://cloud.google.com/maps-platform/terms?utm_source=github&utm_medium=documentation&utm_campaign=&utm_content=web_components) (however, any Google Maps Platform services used by the library remain subject to the Google Maps Platform Terms of Service).
 
 This library adheres to [semantic versioning](https://semver.org/) to indicate when backwards-incompatible changes are introduced. Accordingly, while the library is in version 0.x, backwards-incompatible changes may be introduced at any time. 
 
-If you find a bug, or have a feature request, please file an issue on GitHub. If you would like to get answers to technical questions from other Google Maps Platform developers, ask through one of our [developer community channels](https://developers.google.com/maps/developer-community?utm_source=npm&utm_medium=documentation&utm_campaign=&utm_content=web_components). If you'd like to contribute, please check the [Contributing guide](https://github.com/googlemaps/extended-component-library/blob/main/CONTRIBUTING.md) in the GitHub repository.
+If you find a bug, or have a feature request, please file an issue on GitHub. If you would like to get answers to technical questions from other Google Maps Platform developers, ask through one of our [developer community channels](https://developers.google.com/maps/developer-community?utm_source=github&utm_medium=documentation&utm_campaign=&utm_content=web_components). If you'd like to contribute, please check the [Contributing guide](https://github.com/googlemaps/extended-component-library/blob/main/CONTRIBUTING.md) in the GitHub repository.
 
 

No alert changes

Improved metrics

Total package byte prevSize

1239730

increased by0.22%

Number of package files

207

increased by1.47%

Lines of code

12809

increased by0.63%

No dependency changes