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

Comparing version 0.1.4 to 0.2.0

lib/api_loader/api_loader.d.ts

@@ -38,2 +38,8 @@ /**
     /**
+     * An alias for the `key` property. React developers should use this prop to
+     * set the API key.
+     */
+    set apiKey(key: string | undefined);
+    get apiKey(): string | undefined;
+    /**
      * Maps JS customers can configure HTTP Referrer Restrictions in the Cloud
@@ -52,2 +58,5 @@ * Console to limit which URLs are allowed to use a particular API Key. This
      *
+     * React developers are encouraged to use the `apiKey` property instead,
+     * as `key` is a reserved word.
+     *
      * You can learn more about API keys in the Google Maps Platform
@@ -54,0 +63,0 @@ * [documentation](https://developers.google.com/maps/documentation/javascript/get-api-key?utm_source=github&utm_medium=documentation&utm_campaign=&utm_content=web_components).

lib/api_loader/api_loader.js

@@ -66,2 +66,12 @@ /**
     }
+    /**
+     * An alias for the `key` property. React developers should use this prop to
+     * set the API key.
+     */
+    set apiKey(key) {
+        this.key = key;
+    }
+    get apiKey() {
+        return this.key;
+    }
     async connectedCallback() {
@@ -68,0 +78,0 @@ super.connectedCallback();

lib/api_loader/README.md

@@ -30,10 +30,11 @@ [Extended Component Library](../../README.md)
 
-| Attribute              | Property             | Property type         | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | Default  | Reflects? |
-| ---------------------- | -------------------- | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------- | --------- |
-| `auth-referrer-policy` | `authReferrerPolicy` | `string \| undefined` | Maps JS customers can configure HTTP Referrer Restrictions in the Cloud Console to limit which URLs are allowed to use a particular API Key. This parameter can limit the amount of data sent to Google Maps when evaluating HTTP Referrer Restrictions. Please see the [documentation](https://developers.google.com/maps/documentation/javascript/dynamic-loading?utm_source=npm&utm_medium=documentation&utm_campaign=&utm_content=web_components#optional_parameters) for more information.                                         |          | ✅         |
-| `key`                  | `key`                | `string \| undefined` | (Required) A valid Google Maps Platform API key. If you don't have one already [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).<br/><br/>You can learn more about API keys in the Google Maps Platform [documentation](https://developers.google.com/maps/documentation/javascript/get-api-key?utm_source=npm&utm_medium=documentation&utm_campaign=&utm_content=web_components). |          | ✅         |
-| `language`             | `language`           | `string \| undefined` | The language code; defaults to the user's preferred language setting as specified in the browser when displaying textual information. Read [more on localization](https://developers.google.com/maps/documentation/javascript/localization?utm_source=npm&utm_medium=documentation&utm_campaign=&utm_content=web_components).                                                                                                                                                                                                           |          | ✅         |
-| `region`               | `region`             | `string \| undefined` | The region code to use. This alters the map's behavior based on a given country or territory. Read [more on region codes](https://developers.google.com/maps/documentation/javascript/localization?utm_source=npm&utm_medium=documentation&utm_campaign=&utm_content=web_components#Region).                                                                                                                                                                                                                                            |          | ✅         |
-| `solution-channel`     | `solutionChannel`    | `string \| undefined` | To understand usage and ways to improve our solutions, Google includes the `solution_channel` query parameter in API calls to gather information about code usage. You may opt out at any time by setting this attribute to an empty string. Read more in the [documentation](https://developers.google.com/maps/reporting-and-monitoring/reporting?utm_source=npm&utm_medium=documentation&utm_campaign=&utm_content=web_components#solutions-usage).                                                                                  |          | ✅         |
-| `version`              | `version`            | `string`              | The release channel or version numbers. See the [documentation](https://developers.google.com/maps/documentation/javascript/versions?utm_source=npm&utm_medium=documentation&utm_campaign=&utm_content=web_components) for more information.                                                                                                                                                                                                                                                                                            | `'beta'` | ✅         |
+| Attribute              | Property             | Property type         | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | Default  | Reflects? |
+| ---------------------- | -------------------- | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------- | --------- |
+|                        | `apiKey`             | `string\|undefined`   | An alias for the `key` property. React developers should use this prop to set the API key.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |          | ❌         |
+| `auth-referrer-policy` | `authReferrerPolicy` | `string \| undefined` | Maps JS customers can configure HTTP Referrer Restrictions in the Cloud Console to limit which URLs are allowed to use a particular API Key. This parameter can limit the amount of data sent to Google Maps when evaluating HTTP Referrer Restrictions. Please see the [documentation](https://developers.google.com/maps/documentation/javascript/dynamic-loading?utm_source=npm&utm_medium=documentation&utm_campaign=&utm_content=web_components#optional_parameters) for more information.                                                                                                                                                     |          | ✅         |
+| `key`                  | `key`                | `string \| undefined` | (Required) A valid Google Maps Platform API key. If you don't have one already [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).<br/><br/>React developers are encouraged to use the `apiKey` property instead, as `key` is a reserved word.<br/><br/>You can learn more about API keys in the Google Maps Platform [documentation](https://developers.google.com/maps/documentation/javascript/get-api-key?utm_source=npm&utm_medium=documentation&utm_campaign=&utm_content=web_components). |          | ✅         |
+| `language`             | `language`           | `string \| undefined` | The language code; defaults to the user's preferred language setting as specified in the browser when displaying textual information. Read [more on localization](https://developers.google.com/maps/documentation/javascript/localization?utm_source=npm&utm_medium=documentation&utm_campaign=&utm_content=web_components).                                                                                                                                                                                                                                                                                                                       |          | ✅         |
+| `region`               | `region`             | `string \| undefined` | The region code to use. This alters the map's behavior based on a given country or territory. Read [more on region codes](https://developers.google.com/maps/documentation/javascript/localization?utm_source=npm&utm_medium=documentation&utm_campaign=&utm_content=web_components#Region).                                                                                                                                                                                                                                                                                                                                                        |          | ✅         |
+| `solution-channel`     | `solutionChannel`    | `string \| undefined` | To understand usage and ways to improve our solutions, Google includes the `solution_channel` query parameter in API calls to gather information about code usage. You may opt out at any time by setting this attribute to an empty string. Read more in the [documentation](https://developers.google.com/maps/reporting-and-monitoring/reporting?utm_source=npm&utm_medium=documentation&utm_campaign=&utm_content=web_components#solutions-usage).                                                                                                                                                                                              |          | ✅         |
+| `version`              | `version`            | `string`              | The release channel or version numbers. See the [documentation](https://developers.google.com/maps/documentation/javascript/versions?utm_source=npm&utm_medium=documentation&utm_campaign=&utm_content=web_components) for more information.                                                                                                                                                                                                                                                                                                                                                                                                        | `'beta'` | ✅         |
 
@@ -40,0 +41,0 @@ ## Methods

lib/base/base_component.d.ts

@@ -28,11 +28,2 @@ /**
     protected readonly logger: LoggingController;
-    /** @ignore A provider for localized string literals. */
-    private readonly localizer;
-    /**
-     * @ignore Returns a localized string literal with the specified ID.
-     *
-     * @param args If the value keyed by that ID is a string function, provide
-     * one or more input strings as function arguments.
-     */
-    protected getMsg: <T extends keyof import("./strings.js").StringLiterals>(id: T, ...args: Parameters<Exclude<import("./strings.js").StringLiterals[T], string>>) => string;
 }

lib/base/base_component.js

@@ -21,3 +21,2 @@ /**
 import { LitElement } from 'lit';
-import { LocalizationController } from './localization_controller.js';
 import { LoggingController } from './logging_controller.js';
@@ -32,13 +31,4 @@ /**
         this.logger = new LoggingController(this);
-        /** @ignore A provider for localized string literals. */
-        this.localizer = new LocalizationController(this);
-        /**
-         * @ignore Returns a localized string literal with the specified ID.
-         *
-         * @param args If the value keyed by that ID is a string function, provide
-         * one or more input strings as function arguments.
-         */
-        this.getMsg = this.localizer.getStringLiteral.bind(this.localizer);
     }
 }
 //# sourceMappingURL=base_component.js.map

lib/base/constants.d.ts

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

lib/base/constants.js

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

lib/base/localization_controller.d.ts

@@ -23,7 +23,11 @@ /**
 /**
- * Controller that provides localized string literals (`en-US` by default) for
- * use in components of this library.
+ * Controller that provides localized string literals (`en-US` by default)
+ * for use in components of this library.
  */
 export declare class LocalizationController implements ReactiveController {
+    private readonly host;
+    private static readonly connectedComponents;
+    private static translatedStringLiterals;
     constructor(host: ReactiveControllerHost & LitElement);
+    hostConnected(): void;
     hostDisconnected(): void;
@@ -37,2 +41,19 @@ /**
     getStringLiteral<T extends keyof StringLiterals>(id: T, ...args: Parameters<Exclude<StringLiterals[T], string>>): string;
+    /**
+     * Sets one or many localized string literals in the new locale then
+     * requests an update for all currently connected components.
+     */
+    static setStringLiterals(stringLiterals: Partial<StringLiterals>): void;
+    /**
+     * Builds instance of localizer controller to be used for getting string
+     * literal messages.
+     */
+    static buildLocalizer(baseComponent: LitElement): <T extends keyof StringLiterals>(id: T, ...args: Parameters<Exclude<StringLiterals[T], string>>) => string;
+    /**
+     * Resets Localization Controller state by clearing its connected components
+     * and translated string literals. This method should be invoked for testing
+     * purposes only.
+     * @ignore
+     */
+    static reset(): void;
 }

lib/base/localization_controller.js

@@ -22,10 +22,16 @@ /**
 /**
- * Controller that provides localized string literals (`en-US` by default) for
- * use in components of this library.
+ * Controller that provides localized string literals (`en-US` by default)
+ * for use in components of this library.
  */
 export class LocalizationController {
     constructor(host) {
+        this.host = host;
         host.addController(this);
     }
-    hostDisconnected() { }
+    hostConnected() {
+        LocalizationController.connectedComponents.add(this.host);
+    }
+    hostDisconnected() {
+        LocalizationController.connectedComponents.delete(this.host);
+    }
     /**
@@ -38,6 +44,40 @@ * Returns a localized string literal with the specified ID.
     getStringLiteral(id, ...args) {
-        const literal = STRING_LITERALS_EN_US[id];
+        const literal = LocalizationController.translatedStringLiterals[id] ??
+            STRING_LITERALS_EN_US[id];
         return (typeof literal === 'string') ? literal : literal(...args);
     }
+    /**
+     * Sets one or many localized string literals in the new locale then
+     * requests an update for all currently connected components.
+     */
+    static setStringLiterals(stringLiterals) {
+        for (const key of Object.keys(stringLiterals)) {
+            LocalizationController.translatedStringLiterals[key] =
+                stringLiterals[key];
+        }
+        for (const component of LocalizationController.connectedComponents) {
+            component.requestUpdate();
+        }
+    }
+    /**
+     * Builds instance of localizer controller to be used for getting string
+     * literal messages.
+     */
+    static buildLocalizer(baseComponent) {
+        const localizer = new LocalizationController(baseComponent);
+        return localizer.getStringLiteral.bind(localizer);
+    }
+    /**
+     * Resets Localization Controller state by clearing its connected components
+     * and translated string literals. This method should be invoked for testing
+     * purposes only.
+     * @ignore
+     */
+    static reset() {
+        LocalizationController.connectedComponents.clear();
+        LocalizationController.translatedStringLiterals = {};
+    }
 }
+LocalizationController.connectedComponents = new Set();
+LocalizationController.translatedStringLiterals = {};
 //# sourceMappingURL=localization_controller.js.map

lib/base/strings.d.ts

@@ -28,3 +28,3 @@ /**
  */
-export declare interface StringLiterals {
+export declare interface StringLiterals extends Record<string, string | StringFunction> {
     PLACE_CLEAR_ARIA_LABEL: string;
@@ -64,4 +64,2 @@ PLACE_CLOSED: string;
 /** String literals in the `en-US` locale. */
-export declare const STRING_LITERALS_EN_US: StringLiterals & {
-    [key: string]: string | StringFunction;
-};
+export declare const STRING_LITERALS_EN_US: StringLiterals;

lib/place_building_blocks/place_data_consumer.d.ts

@@ -42,6 +42,6 @@ /**
 /**
- * Base class for components which render Place data provided elsewhere; i.e
+ * Base class for components which render Place data provided elsewhere; i.e.
  * Place Representation Building Blocks.
  *
- * This class implements functionality to retreive a `Place` or `PlaceResult`
+ * This class implements functionality to retrieve a `Place` or `PlaceResult`
  * via context from a parent `<gmpx-place-data-provider>` component.
@@ -48,0 +48,0 @@ */

lib/place_building_blocks/place_data_consumer.js

@@ -33,6 +33,6 @@ /**
 /**
- * Base class for components which render Place data provided elsewhere; i.e
+ * Base class for components which render Place data provided elsewhere; i.e.
  * Place Representation Building Blocks.
  *
- * This class implements functionality to retreive a `Place` or `PlaceResult`
+ * This class implements functionality to retrieve a `Place` or `PlaceResult`
  * via context from a parent `<gmpx-place-data-provider>` component.
@@ -39,0 +39,0 @@ */

lib/place_building_blocks/place_data_provider/place_data_provider.d.ts

@@ -44,3 +44,3 @@ /**
  * @event {RequestErrorEvent} gmpx-requesterror - Indicates an error condition
- * in an underlying Google Maps JavaScript API call.
+ * in an underlying Google Maps JavaScript API call. (React: onRequestError)
  */
@@ -47,0 +47,0 @@ export declare class PlaceDataProvider extends BaseComponent {

lib/place_building_blocks/place_data_provider/place_data_provider.js

@@ -59,3 +59,3 @@ /**
  * @event {RequestErrorEvent} gmpx-requesterror - Indicates an error condition
- * in an underlying Google Maps JavaScript API call.
+ * in an underlying Google Maps JavaScript API call. (React: onRequestError)
  */
@@ -62,0 +62,0 @@ let PlaceDataProvider = PlaceDataProvider_1 = class PlaceDataProvider extends BaseComponent {

lib/place_building_blocks/place_data_provider/README.md

@@ -49,5 +49,5 @@ [Extended Component Library](../../../README.md) » [Place Building Blocks](../README.md)
 
-| Name                | Type                | Description                                                                    |
-| ------------------- | ------------------- | ------------------------------------------------------------------------------ |
-| `gmpx-requesterror` | `RequestErrorEvent` | Indicates an error condition in an underlying Google Maps JavaScript API call. |
+| Name                | React Prop       | Type                | Description                                                                    |
+| ------------------- | ---------------- | ------------------- | ------------------------------------------------------------------------------ |
+| `gmpx-requesterror` | `onRequestError` | `RequestErrorEvent` | Indicates an error condition in an underlying Google Maps JavaScript API call. |
 
@@ -54,0 +54,0 @@

lib/place_building_blocks/place_distance_label/place_distance_label.js

@@ -43,3 +43,3 @@ /**
  *
- * @returns A `google.maps.Place` object that is identified by exactly one of
+ * @return A `google.maps.Place` object that is identified by exactly one of
  *     Place ID, location, or query, with preference in that order.
@@ -46,0 +46,0 @@ */

lib/place_building_blocks/place_field_text/place_field_text.d.ts

@@ -64,2 +64,3 @@ /**
     field?: TextField;
+    protected readonly getMsg: <T extends keyof import("../../base/strings.js").StringLiterals>(id: T, ...args: Parameters<Exclude<import("../../base/strings.js").StringLiterals[T], string>>) => string;
     protected render(): import("lit-html").TemplateResult<1>;
@@ -77,3 +78,3 @@ /** @ignore */
      * @param placeTypes - A list of place types
-     * @returns The first allowed place type in the list, formatted for display,
+     * @return The first allowed place type in the list, formatted for display,
      *     or null if there is no allowed type.
@@ -80,0 +81,0 @@ */

lib/place_building_blocks/place_field_text/place_field_text.js

@@ -23,2 +23,3 @@ /**
 import { customElement, property } from 'lit/decorators.js';
+import { LocalizationController } from '../../base/localization_controller.js';
 import { PlaceDataConsumer } from '../place_data_consumer.js';
@@ -209,2 +210,6 @@ /**
 let PlaceFieldText = class PlaceFieldText extends PlaceDataConsumer {
+    constructor() {
+        super(...arguments);
+        this.getMsg = LocalizationController.buildLocalizer(this);
+    }
     render() {
@@ -279,3 +284,3 @@ return html `<span>${this.getDisplayText()}</span>`;
      * @param placeTypes - A list of place types
-     * @returns The first allowed place type in the list, formatted for display,
+     * @return The first allowed place type in the list, formatted for display,
      *     or null if there is no allowed type.
@@ -282,0 +287,0 @@ */

lib/place_building_blocks/place_opening_hours/place_opening_hours.d.ts

@@ -54,2 +54,3 @@ /**
     protected willUpdate(changedProperties: PropertyValues<this>): void;
+    protected readonly getMsg: <T extends keyof import("../../base/strings.js").StringLiterals>(id: T, ...args: Parameters<Exclude<import("../../base/strings.js").StringLiterals[T], string>>) => string;
     protected render(): import("lit-html").TemplateResult<1> | typeof nothing;
@@ -56,0 +57,0 @@ /** @ignore */

lib/place_building_blocks/place_opening_hours/place_opening_hours.js

@@ -26,2 +26,3 @@ /**
 import { map } from 'lit/directives/map.js';
+import { LocalizationController } from '../../base/localization_controller.js';
 import { WebFont, WebFontController } from '../../base/web_font_controller.js';
@@ -51,2 +52,3 @@ import { formatTimeWithWeekdayMaybe, getUpcomingCloseTime, getUpcomingOpenTime, isSoon, NextCloseTimeStatus, NextOpenTimeStatus } from '../../utils/opening_hours.js';
         this.fontLoader = new WebFontController(this, [WebFont.MATERIAL_SYMBOLS_OUTLINED]);
+        this.getMsg = LocalizationController.buildLocalizer(this);
     }
@@ -53,0 +55,0 @@ disconnectedCallback() {

lib/place_building_blocks/place_photo_gallery/place_photo_gallery.d.ts

@@ -60,2 +60,3 @@ /**
     disconnectedCallback(): void;
+    protected readonly getMsg: <T extends keyof import("../../base/strings.js").StringLiterals>(id: T, ...args: Parameters<Exclude<import("../../base/strings.js").StringLiterals[T], string>>) => string;
     protected render(): import("lit-html").TemplateResult<1>;
@@ -62,0 +63,0 @@ protected updated(): void;

lib/place_building_blocks/place_photo_gallery/place_photo_gallery.js

@@ -29,2 +29,3 @@ /**
 import { FocusController } from '../../base/focus_controller.js';
+import { LocalizationController } from '../../base/localization_controller.js';
 import { WebFont, WebFontController } from '../../base/web_font_controller.js';
@@ -105,2 +106,3 @@ import { renderAttribution } from '../../utils/place_utils.js';
         };
+        this.getMsg = LocalizationController.buildLocalizer(this);
     }
@@ -107,0 +109,0 @@ connectedCallback() {

lib/place_building_blocks/place_rating/place_rating.d.ts

@@ -39,2 +39,3 @@ /**
     condensed: boolean;
+    protected readonly getMsg: <T extends keyof import("../../base/strings.js").StringLiterals>(id: T, ...args: Parameters<Exclude<import("../../base/strings.js").StringLiterals[T], string>>) => string;
     protected render(): import("lit-html").TemplateResult<1> | undefined;
@@ -41,0 +42,0 @@ /** @ignore */

lib/place_building_blocks/place_rating/place_rating.js

@@ -26,2 +26,3 @@ /**
 import { GMPX_RATING_COLOR, GMPX_RATING_COLOR_EMPTY } from '../../base/common_styles.js';
+import { LocalizationController } from '../../base/localization_controller.js';
 import { PlaceDataConsumer } from '../place_data_consumer.js';
@@ -68,2 +69,3 @@ const MIN_RATING = 1;
         this.condensed = false;
+        this.getMsg = LocalizationController.buildLocalizer(this);
     }
@@ -70,0 +72,0 @@ render() {

lib/place_building_blocks/place_reviews/place_reviews.d.ts

@@ -43,2 +43,3 @@ /**
     protected readonly fontLoader: WebFontController;
+    protected readonly getMsg: <T extends keyof import("../../base/strings.js").StringLiterals>(id: T, ...args: Parameters<Exclude<import("../../base/strings.js").StringLiterals[T], string>>) => string;
     protected render(): import("lit-html").TemplateResult<1> | undefined;
@@ -45,0 +46,0 @@ /** @ignore */

lib/place_building_blocks/place_reviews/place_reviews.js

@@ -26,2 +26,3 @@ /**
 import { getTypeScaleSizeFromPx, GMPX_BORDER_SEPARATOR, GMPX_COLOR_ON_SURFACE, GMPX_COLOR_ON_SURFACE_VARIANT, GMPX_FONT_BODY, GMPX_FONT_CAPTION, GMPX_FONT_TITLE_MEDIUM, GMPX_RATING_COLOR, GMPX_RATING_COLOR_EMPTY } from '../../base/common_styles.js';
+import { LocalizationController } from '../../base/localization_controller.js';
 import { WebFont, WebFontController } from '../../base/web_font_controller.js';
@@ -56,2 +57,3 @@ import { PlaceDataConsumer } from '../place_data_consumer.js';
         this.fontLoader = new WebFontController(this, [WebFont.GOOGLE_SANS_TEXT]);
+        this.getMsg = LocalizationController.buildLocalizer(this);
     }
@@ -58,0 +60,0 @@ render() {

lib/place_overview/place_overview.d.ts

@@ -62,3 +62,3 @@ /**
  * The easiest way to use this component is to start with a Place ID, which can
- * be retreived from various Google Maps APIs or [looked up
+ * be retrieved from various Google Maps APIs or [looked up
  * directly](https://developers.google.com/maps/documentation/javascript/examples/places-placeid-finder?utm_source=github&utm_medium=documentation&utm_campaign=&utm_content=web_components).
@@ -79,3 +79,3 @@ *
  * @event {RequestErrorEvent} gmpx-requesterror - Indicates an error condition
- * in an underlying Google Maps JavaScript API call.
+ * in an underlying Google Maps JavaScript API call. (React: onRequestError)
  *
@@ -158,2 +158,3 @@ * @cssproperty [--gmpx-color-surface] - Background color.
     protected willUpdate(changedProperties: PropertyValues<this>): void;
+    protected readonly getMsg: <T extends keyof import("../base/strings.js").StringLiterals>(id: T, ...args: Parameters<Exclude<import("../base/strings.js").StringLiterals[T], string>>) => string;
     protected render(): import("lit-html").TemplateResult<1>;
@@ -160,0 +161,0 @@ private getDisplayNameClass;

lib/place_overview/place_overview.js

@@ -41,2 +41,3 @@ /**
 import { RequestErrorEvent } from '../base/events.js';
+import { LocalizationController } from '../base/localization_controller.js';
 import { SlotValidationController } from '../base/slot_validation_controller.js';
@@ -74,3 +75,3 @@ import { WebFont, WebFontController } from '../base/web_font_controller.js';
  * The easiest way to use this component is to start with a Place ID, which can
- * be retreived from various Google Maps APIs or [looked up
+ * be retrieved from various Google Maps APIs or [looked up
  * directly](https://developers.google.com/maps/documentation/javascript/examples/places-placeid-finder?utm_source=npm&utm_medium=documentation&utm_campaign=&utm_content=web_components).
@@ -91,3 +92,3 @@ *
  * @event {RequestErrorEvent} gmpx-requesterror - Indicates an error condition
- * in an underlying Google Maps JavaScript API call.
+ * in an underlying Google Maps JavaScript API call. (React: onRequestError)
  *
@@ -149,2 +150,3 @@ * @cssproperty [--gmpx-color-surface] - Background color.
         this.slotValidator = new SlotValidationController(this, this.logger, ['action']);
+        this.getMsg = LocalizationController.buildLocalizer(this);
         this.renderHeaderSuffixContent = () => choose(this.size, [
@@ -151,0 +153,0 @@ ['small', () => html `<slot name="action"></slot>`],

lib/place_overview/README.md

@@ -20,3 +20,3 @@ [Extended Component Library](../../README.md)
 The easiest way to use this component is to start with a Place ID, which can
-be retreived from various Google Maps APIs or [looked up
+be retrieved from various Google Maps APIs or [looked up
 directly](https://developers.google.com/maps/documentation/javascript/examples/places-placeid-finder?utm_source=npm&utm_medium=documentation&utm_campaign=&utm_content=web_components).
@@ -67,5 +67,5 @@
 
-| Name                | Type                | Description                                                                    |
-| ------------------- | ------------------- | ------------------------------------------------------------------------------ |
-| `gmpx-requesterror` | `RequestErrorEvent` | Indicates an error condition in an underlying Google Maps JavaScript API call. |
+| Name                | React Prop       | Type                | Description                                                                    |
+| ------------------- | ---------------- | ------------------- | ------------------------------------------------------------------------------ |
+| `gmpx-requesterror` | `onRequestError` | `RequestErrorEvent` | Indicates an error condition in an underlying Google Maps JavaScript API call. |
 
@@ -72,0 +72,0 @@ ## Styling

lib/place_picker/place_picker.d.ts

@@ -44,4 +44,5 @@ /**
  * after selection, or when no Place result is found based on the input query.
+ * (React: onPlaceChange)
  * @event {RequestErrorEvent} gmpx-requesterror - Indicates an error condition
- * in an underlying Google Maps JavaScript API call.
+ * in an underlying Google Maps JavaScript API call. (React: onRequestError)
  *
@@ -130,2 +131,3 @@ * @cssproperty [--gmpx-color-surface] - Background color of the input.
     protected willUpdate(changedProperties: PropertyValues): void;
+    protected readonly getMsg: <T extends keyof import("../base/strings.js").StringLiterals>(id: T, ...args: Parameters<Exclude<import("../base/strings.js").StringLiterals[T], string>>) => string;
     protected render(): import("lit-html").TemplateResult<1>;
@@ -132,0 +134,0 @@ protected firstUpdated(): void;

lib/place_picker/place_picker.js

@@ -28,2 +28,3 @@ /**
 import { FocusController } from '../base/focus_controller.js';
+import { LocalizationController } from '../base/localization_controller.js';
 import { WebFont, WebFontController } from '../base/web_font_controller.js';
@@ -82,4 +83,5 @@ import { LAT_LNG_LITERAL_ATTRIBUTE_CONVERTER, STRING_ARRAY_ATTRIBUTE_CONVERTER } from '../utils/attribute_converters.js';
  * after selection, or when no Place result is found based on the input query.
+ * (React: onPlaceChange)
  * @event {RequestErrorEvent} gmpx-requesterror - Indicates an error condition
- * in an underlying Google Maps JavaScript API call.
+ * in an underlying Google Maps JavaScript API call. (React: onRequestError)
  *
@@ -109,2 +111,3 @@ * @cssproperty [--gmpx-color-surface] - Background color of the input.
         this.autocomplete = new Deferred();
+        this.getMsg = LocalizationController.buildLocalizer(this);
     }
@@ -111,0 +114,0 @@ /**

lib/place_picker/README.md

@@ -55,6 +55,6 @@ [Extended Component Library](../../README.md)
 
-| Name                | Type                | Description                                                                                                                                                                                         |
-| ------------------- | ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `gmpx-placechange`  | `Event`             | This event is fired when a Place object is made available for a Place the user has selected, when user clears the input after selection, or when no Place result is found based on the input query. |
-| `gmpx-requesterror` | `RequestErrorEvent` | Indicates an error condition in an underlying Google Maps JavaScript API call.                                                                                                                      |
+| Name                | React Prop       | Type                | Description                                                                                                                                                                                         |
+| ------------------- | ---------------- | ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `gmpx-placechange`  | `onPlaceChange`  | `Event`             | This event is fired when a Place object is made available for a Place the user has selected, when user clears the input after selection, or when no Place result is found based on the input query. |
+| `gmpx-requesterror` | `onRequestError` | `RequestErrorEvent` | Indicates an error condition in an underlying Google Maps JavaScript API call.                                                                                                                      |
 
@@ -61,0 +61,0 @@ ## Styling

lib/utils/deep_element_access.d.ts

@@ -27,3 +27,3 @@ /**
  *
- * @returns The active element, or `<body>` or null if there is none.
+ * @return The active element, or `<body>` or null if there is none.
  */
@@ -36,3 +36,3 @@ export declare function getDeepActiveElement(): Element | null;
  * @param otherNode - A node that might be the descendant.
- * @returns true if otherNode is a light or shadow descendant of rootNode.
+ * @return true if otherNode is a light or shadow descendant of rootNode.
  */
@@ -39,0 +39,0 @@ export declare function deepContains(rootNode: Node | null | undefined, otherNode: Node | null | undefined): boolean;

lib/utils/deep_element_access.js

@@ -27,3 +27,3 @@ /**
  *
- * @returns The active element, or `<body>` or null if there is none.
+ * @return The active element, or `<body>` or null if there is none.
  */
@@ -45,3 +45,3 @@ export function getDeepActiveElement() {
  * @param otherNode - A node that might be the descendant.
- * @returns true if otherNode is a light or shadow descendant of rootNode.
+ * @return true if otherNode is a light or shadow descendant of rootNode.
  */
@@ -48,0 +48,0 @@ export function deepContains(rootNode, otherNode) {

lib/utils/opening_hours.js

@@ -78,3 +78,3 @@ /**
 /**
- * From all occurences of "Sunday at 00:00" in the Place's timezone, return
+ * From all occurrences of "Sunday at 00:00" in the Place's timezone, return
  * the most recent one prior to `now`.
@@ -81,0 +81,0 @@ */

package.json

 {
   "name": "@googlemaps/extended-component-library",
-  "version": "0.1.4",
+  "version": "0.2.0",
   "description": "Web Components for building rich experiences with the Google Maps JavaScript API.",
@@ -18,5 +18,8 @@ "license": "Apache-2.0",
     "build": "wireit",
+    "build:react": "wireit",
     "build:ts": "wireit",
     "build:package": "wireit",
     "build:bundle": "wireit",
+    "example": "wireit",
+    "e2e": "wireit",
     "test": "wireit"
@@ -49,3 +52,5 @@ },
     "./place_picker.js": "./lib/place_picker/place_picker.js",
-    "./split_layout.js": "./lib/split_layout/split_layout.js"
+    "./split_layout.js": "./lib/split_layout/split_layout.js",
+    "./react": "./lib/react/index.js",
+    "./utils/localize.js": "./lib/utils/localize.js"
   },
@@ -57,4 +62,5 @@ "unpkg": "dist/index.min.js",
   "dependencies": {
+    "@lit-labs/context": "^0.3.1",
+    "@lit-labs/react": "^1.2.0",
     "lit": "^2.3.0",
-    "@lit-labs/context": "^0.3.1",
     "tslib": "^2.4.0"
@@ -64,2 +70,3 @@ },
     "@custom-elements-manifest/analyzer": "^0.6.8",
+    "@playwright/test": "^1.35.1",
     "@rollup/plugin-node-resolve": "^15.0.1",
@@ -70,2 +77,3 @@ "@rollup/plugin-replace": "^5.0.2",
     "@types/jasmine": "^4.0.3",
+    "@types/react": "^18.2.6",
     "@web/test-runner": "^0.15.0",
@@ -75,2 +83,3 @@ "@web/test-runner-playwright": "^0.9.0",
     "markdown-table": "^3.0.3",
+    "playwright": "^1.35.1",
     "rollup": "^3.15.0",
@@ -107,3 +116,5 @@ "rollup-plugin-summary": "^2.0.0",
       "output": [
-        "**/README.md"
+        "README.md",
+        "src/**/README.md",
+        "!src/react/README.md"
       ]
@@ -116,4 +127,20 @@ },
     },
+    "build:react": {
+      "command": "node build/make_react.js",
+      "dependencies": [
+        "cem"
+      ],
+      "files": [
+        "build/make_react.js",
+        "custom-elements.json"
+      ],
+      "output": [
+        "src/react/index.ts"
+      ]
+    },
     "build:ts": {
-      "command": "tsc --pretty --rootDir \"src\" --outDir \"lib\"",
+      "command": "tsc",
+      "dependencies": [
+        "build:react"
+      ],
       "files": [
@@ -157,2 +184,20 @@ "tsconfig.json",
     },
+    "example": {
+      "command": "sh build/start_example.sh",
+      "dependencies": [
+        "build:package"
+      ]
+    },
+    "e2e": {
+      "command": "playwright test --config ./e2e/playwright.config.js",
+      "dependencies": [
+        "build:package"
+      ],
+      "files": [
+        "playwright.config.js",
+        "e2e/**/*",
+        "examples/**/*",
+        "lib/**/*"
+      ]
+    },
     "test": {
@@ -159,0 +204,0 @@ "command": "wtr",

README.md

@@ -100,2 +100,4 @@ # Extended Component Library
 
+**React support**: the Extended Component Library ships with native React components for easy integration. Please see [React Support](src/react/README.md) to get started.
+
 ## Components available with Maps JS SDK
@@ -147,2 +149,14 @@
 
+## Localization
+
+Your application can override the set of string literals used in the Extended Component Library with the `setStringLiterals()` utility function:
+
+```js
+import {setStringLiterals} from '@googlemaps/extended-component-library/utils/localize.js';
+
+setStringLiterals({'PLACE_CLOSED': 'Cerrado'});
+```
+
+Refer to `/src/base/strings.ts` for the full list of available terms.
+
 ## Terms of Service
@@ -149,0 +163,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Unidentified License

License

(Experimental) Something that seems like a license was found, but its contents could not be matched with a known license.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Unidentified License

License

(Experimental) Something that seems like a license was found, but its contents could not be matched with a known license.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

990939

increased by4.08%

Number of package files

155

increased by4.73%

Lines of code

10979

increased by3.34%

Number of lines in readme file

179

increased by8.48%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dependency count

4

increased by33.33%

Dev dependency count

18

increased by20%

Dependency changes

• + Added@lit-labs/react@^1.2.0

• + Added@lit-labs/react@1.2.1(transitive)