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

Comparing version 0.4.0 to 0.4.1

lib/base/constants.d.ts

@@ -7,4 +7,4 @@ /**
 /** Package version of this component library. */
-export declare const LIBRARY_VERSION = "0.4.0";
+export declare const LIBRARY_VERSION = "0.4.1";
 /** Identifier of where this component library is sourced from. */
 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.4.0'; // x-release-please-version
+export const LIBRARY_VERSION = '0.4.1'; // 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_photo_gallery/place_photo_gallery.js

@@ -19,2 +19,4 @@ /**
 import { PlaceDataConsumer } from '../place_data_consumer.js';
+/** Spacing for margins and paddings based on baseline font size. */
+const SPACING_BASE = css `calc(${GMPX_FONT_SIZE_BASE} * 0.5)`;
 /**
@@ -50,4 +52,6 @@ * Formats a `google.maps.places.Photo` object for display based on tile size.
 }
-/** Spacing for margins and paddings based on baseline font size. */
-const SPACING_BASE = css `calc(${GMPX_FONT_SIZE_BASE} * 0.5)`;
+function stopEscapePropagation(event) {
+    if (event.key === 'Escape')
+        event.stopPropagation();
+}
 /**
@@ -87,5 +91,2 @@ * Component that displays photos of this place as tiles, with a lightbox view
                     break;
-                case 'Escape':
-                    this.closeLightbox();
-                    break;
                 default:
@@ -167,6 +168,10 @@ }
         // clang-format on
+        // Note on the <dialog>'s keydown listener: Prevent escape keydowns from
+        // propagating beyond the lightbox so that they don't cause things like
+        // closing an overlay layout. The <dialog> will close automatically on
+        // escape, so we don't have to worry about catching the event ourselves.
         return html `
       <div class="container">
         <div>${map(photos.slice(0, this.maxTiles), renderTileButton)}</div>
-        <dialog class="lightbox">
+        <dialog class="lightbox" @keydown=${stopEscapePropagation}>
           <div class="backdrop" @click=${this.closeLightbox}></div>
@@ -173,0 +178,0 @@ <img

lib/route_building_blocks/route_marker/README.md

@@ -7,2 +7,4 @@ [Extended Component Library](../../../README.md) » [Route Building Blocks](../README.md)
 
+> This component is designed to work with a Route Data Provider; please see [Route Building Blocks](../README.md) for more information.
+
 ## Importing
@@ -9,0 +11,0 @@

lib/route_building_blocks/route_polyline/README.md

@@ -7,2 +7,4 @@ [Extended Component Library](../../../README.md) » [Route Building Blocks](../README.md)
 
+> This component is designed to work with a Route Data Provider; please see [Route Building Blocks](../README.md) for more information.
+
 ## Importing
@@ -9,0 +11,0 @@

lib/route_building_blocks/route_polyline/route_polyline.d.ts

@@ -57,3 +57,3 @@ /**
     disconnectedCallback(): void;
-    protected updated(changedProperties: PropertyValues<this>): Promise<void>;
+    protected updated(changedProperties: PropertyValues<this>): void;
     /**
@@ -66,2 +66,3 @@ * Returns the `LatLngBounds` of the polyline that should be included in the
     private setInnerPolylineOptions;
+    private updatePath;
 }
@@ -68,0 +69,0 @@ declare global {

lib/route_building_blocks/route_polyline/route_polyline.js

@@ -73,13 +73,9 @@ /**
     }
-    async updated(changedProperties) {
+    updated(changedProperties) {
         if (POLYLINE_OPTIONS_PROPS.some((prop) => changedProperties.has(prop))) {
-            await this.setInnerPolylineOptions();
+            this.setInnerPolylineOptions();
         }
         if (changedProperties.has('route') ||
             changedProperties.has('contextRoute')) {
-            const route = this.getRoute();
-            const polyline = await this.innerPolylinePromise;
-            // TODO(b/291675716) Concatenate higher-quality paths from directions
-            // steps, instead of using overview_path
-            polyline.setPath(route?.overview_path ?? []);
+            this.updatePath();
         }
@@ -90,3 +86,3 @@ if (changedProperties.has('fitInViewport') ||
                     changedProperties.has('contextRoute')))) {
-            await this.mapController.viewportManager?.updateViewport();
+            this.mapController.viewportManager?.updateViewport();
         }
@@ -115,2 +111,15 @@ }
     }
+    async updatePath() {
+        let path = [];
+        const route = this.getRoute();
+        if (route) {
+            for (const leg of route.legs) {
+                for (const step of leg.steps) {
+                    path = path.concat(step.path);
+                }
+            }
+        }
+        const polyline = await this.innerPolylinePromise;
+        polyline.setPath(path);
+    }
 };
@@ -117,0 +126,0 @@ __decorate([

lib/route_overview/README.md

@@ -41,2 +41,3 @@ [Extended Component Library](../../README.md)
 | `travel-mode`          | `travelMode`         | `Lowercase<google.maps.TravelMode>`  | The travel mode of the directions request.                                                                                                                  | `'driving'` | ✅         |
+| `no-pin`               | `noPin`              | `boolean`                            | Hides the red pin displayed at the destination.                                                                                                             | `false`     | ✅         |
 
@@ -43,0 +44,0 @@ ## Events

lib/route_overview/route_overview.d.ts

@@ -66,2 +66,6 @@ /**
     travelMode: Lowercase<google.maps.TravelMode>;
+    /**
+     * Hides the red pin displayed at the destination.
+     */
+    noPin: boolean;
     private static numConstructed;
@@ -68,0 +72,0 @@ private readonly zIndex;

lib/route_overview/route_overview.js

@@ -13,2 +13,3 @@ /**
 import { customElement, property } from 'lit/decorators.js';
+import { when } from 'lit/directives/when.js';
 import { BaseComponent } from '../base/base_component.js';
@@ -37,2 +38,6 @@ import { LAT_LNG_LITERAL_ATTRIBUTE_CONVERTER } from '../utils/attribute_converters.js';
         this.travelMode = 'driving';
+        /**
+         * Hides the red pin displayed at the destination.
+         */
+        this.noPin = false;
         this.zIndex = 10 * RouteOverview_1.numConstructed++;
@@ -83,7 +88,8 @@ }
         </gmpx-route-marker>
-        <gmpx-route-marker
-            waypoint="destination"
-            .title=${this.destinationAddress ?? ''}
-            .zIndex=${this.zIndex + 2}>
-        </gmpx-route-marker>
+        ${when(!this.noPin, () => html `
+          <gmpx-route-marker
+              waypoint="destination"
+              .title=${this.destinationAddress ?? ''}
+              .zIndex=${this.zIndex + 2}>
+          </gmpx-route-marker>`)}
       </gmpx-route-data-provider>
@@ -135,2 +141,6 @@ `;
 ], RouteOverview.prototype, "travelMode", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'no-pin', reflect: true }),
+    __metadata("design:type", Object)
+], RouteOverview.prototype, "noPin", void 0);
 RouteOverview = RouteOverview_1 = __decorate([
@@ -137,0 +147,0 @@ customElement('gmpx-route-overview'),

lib/utils/googlemaps_types.d.ts

@@ -38,8 +38,10 @@ /**
 export declare type LatLng = google.maps.LatLng;
+/** google.maps.LatLngBounds */
+export declare type LatLngBounds = google.maps.LatLngBounds;
+/** google.maps.LatLngBoundsLiteral */
+export declare type LatLngBoundsLiteral = google.maps.LatLngBoundsLiteral;
 /** google.maps.LatLngLiteral */
 export declare type LatLngLiteral = google.maps.LatLngLiteral;
 /** google.maps.MapElement */
-export declare type MapElement = HTMLElement & {
-    innerMap: google.maps.Map;
-};
+export declare type MapElement = google.maps.MapElement;
 /** google.maps.places.PlaceResult */
@@ -46,0 +48,0 @@ export declare type PlaceResult = google.maps.places.PlaceResult;

package.json

 {
   "name": "@googlemaps/extended-component-library",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "Web Components for building rich experiences with the Google Maps JavaScript API.",
@@ -5,0 +5,0 @@ "license": "Apache-2.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

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

Improved metrics

Total package byte prevSize

1046366

increased by0.33%

Lines of code

10759

increased by0.31%

No dependency changes