@geotrekce/geotrek-rando-widget 0.0.21 → 0.2.0

package/dist/collection/components/grw-app/grw-app.js

@@ -1,4 +1,5 @@
-import { Host, h, getAssetPath } from '@stencil/core';
+import { Host, h } from '@stencil/core';
+import { translate } from 'i18n/i18n';
 import state, { onChange, reset } from 'store/store';
 export class GrwApp {
   constructor() {
@@ -11,7 +12,7 @@ export class GrwApp {
     this.isLargeView = false;
     this.currentTrekId = undefined;
     this.api = undefined;
-    this.language = 'fr';
+    this.languages = 'fr';
     this.inBbox = undefined;
     this.cities = undefined;
     this.districts = undefined;
@@ -24,20 +25,34 @@ export class GrwApp {
     this.center = undefined;
     this.zoom = undefined;
     this.attribution = undefined;
-    this.colorPrimary = '#6b0030';
-    this.colorPrimaryShade = '#4a0021';
-    this.colorPrimaryTint = '#974c6e';
+    this.linkName = 'GEOTREK';
+    this.linkTarget = 'https://geotrek.fr';
+    this.weather = false;
+    this.colorPrimaryApp = '#6750a4';
+    this.colorOnPrimary = '#ffffff';
+    this.colorSurface = '#1c1b1f';
+    this.colorOnSurface = '#49454e';
+    this.colorSurfaceVariant = '#fef7ff';
+    this.colorOnSurfaceVariant = '#1c1b1f';
+    this.colorPrimaryContainer = '#eaddff';
+    this.colorOnPrimaryContainer = '#21005e';
+    this.colorSecondaryContainer = '#e8def8';
+    this.colorOnSecondaryContainer = '#1d192b';
+    this.colorBackground = '#fef7ff';
+    this.colorSurfaceContainerHigh = '#ece6f0';
+    this.colorSurfaceContainerLow = '#f7f2fa';
+    this.fabBackgroundColor = '#eaddff';
+    this.fabColor = '#21005d';
     this.colorTrekLine = '#6b0030';
     this.colorDepartureIcon = '#006b3b';
     this.colorArrivalIcon = '#85003b';
     this.colorSensitiveArea = '#4974a5';
     this.colorPoiIcon = '#974c6e';
-    this.linkName = 'GEOTREK';
-    this.linkTarget = 'https://geotrek.fr';
   }
   onTrekCardPress(event) {
     this.currentTrekId = event.detail;
     this.showTrek = !this.showTrek;
+    this.showTrekMap = false;
     const url = new URL(window.location.toString());
     url.searchParams.set('trek', this.currentTrekId.toString());
     window.history.pushState({}, '', url);
@@ -45,6 +60,11 @@ export class GrwApp {
   onWindowResize() {
     this.handleView();
   }
+  onCenterOnMap() {
+    if (!this.isLargeView) {
+      this.showTrekMap = true;
+    }
+  }
   watchPropHandler() {
     window.dispatchEvent(new window.Event('resize'));
   }
@@ -83,7 +103,7 @@ export class GrwApp {
     this.showFilters = !this.showFilters;
   }
   handleBackButton() {
-    if (window.history.state.isInitialHistoryWithTrek) {
+    if (window.history.state && window.history.state.isInitialHistoryWithTrek) {
       this.onTrekDetailsClose();
       const url = new URL(window.location.toString());
       url.searchParams.delete('trek');
@@ -95,12 +115,12 @@ export class GrwApp {
   }
   handlePopState() {
     const url = new URL(window.location.toString());
-    const trekParam = url.searchParams.get('trek');
-    if (trekParam) {
-      this.currentTrekId = Number(trekParam);
-      this.showTrek = !this.showTrek;
+    const trekParam = Number(url.searchParams.get('trek'));
+    if (trekParam && this.currentTrekId !== trekParam) {
+      this.currentTrekId = trekParam;
+      this.showTrek = true;
     }
-    else {
+    else if (!trekParam) {
       this.onTrekDetailsClose();
     }
   }
@@ -117,11 +137,34 @@ export class GrwApp {
     window.removeEventListener('popstate', this.handlePopStateBind);
   }
   render() {
-    const arrowBackImageSrc = getAssetPath(`assets/arrow-back.svg`);
-    return (h(Host, { style: { '--color-primary': this.colorPrimary, '--color-primary-tint': this.colorPrimaryTint, '--color-primary-shade': this.colorPrimaryShade } }, !state.currentTreks && !state.currentTrek && (h("div", { class: "init-loader-container" }, h("span", { class: "loader" }))), !this.showTrek && !state.treks && (h("grw-treks-provider", { api: this.api, language: this.language, "in-bbox": this.inBbox, cities: this.cities, districts: this.districts, structures: this.structures, themes: this.themes, portals: this.portals, routes: this.routes, practices: this.practices })), this.showTrek && this.currentTrekId && h("grw-trek-provider", { api: this.api, language: this.language, "trek-id": this.currentTrekId }), (state.currentTreks || state.currentTrek) && (h("div", { class: "app-container" }, h("div", { class: this.isLargeView ? 'large-view-header-container' : 'header-container' }, this.showTrek ? (h("div", { onClick: () => this.handleBackButton(), class: "arrow-back-icon" }, h("img", { src: arrowBackImageSrc }))) : (h("div", { class: "handle-filters-container" }, h("div", { onClick: () => this.handleFilters(), class: "handle-filters-button" }, "FILTRER"), state.treksWithinBounds && (h("div", { class: "current-treks-within-bounds-length" }, `${state.treksWithinBounds.length} randonnée${state.treksWithinBounds.length > 1 ? 's' : ''}`)))), !this.showTrek && this.showFilters && (h("div", { class: "options-container" }, h("div", { class: "filters-container" }, h("div", { onClick: () => this.handleFilters(), class: "close-filters-button" }, "X"), h("div", null, h("grw-filter", { filterName: "Pratique", filterType: "practices", filterNameProperty: "name" })), h("div", { class: "filter-margin-top" }, h("grw-filter", { filterName: "Difficult\u00E9", filterType: "difficulties", filterNameProperty: "label" })), h("div", { class: "filter-margin-top" }, h("grw-filter", { filterName: "Dur\u00E9e", filterType: "durations", filterNameProperty: "name" }))), h("div", { onClick: () => this.handleFilters(), class: "back-filters-container" }))), this.linkName && (h("div", { class: "attribution-container" }, h("a", { target: "_blank", href: this.linkTarget }, this.linkName)))), h("div", { class: "content-container" }, h("div", { class: this.isLargeView ? 'large-view-app-treks-list-container' : 'app-treks-list-container', style: { display: this.showTrek ? 'none' : 'flex', position: this.showTrek ? 'absolute' : 'relative' } }, h("grw-treks-list", { "reset-store-on-disconnected": "false", "is-large-view": this.isLargeView, "color-primary": this.colorPrimary, "color-primary-tint": this.colorPrimaryTint })), this.showTrek && !state.currentTrek && (h("div", { class: this.isLargeView ? 'large-view-loader-container' : 'loader-container' }, h("span", { class: "loader" }))), state.currentTrek && (h("div", { class: this.isLargeView ? 'large-view-app-trek-detail-container' : 'app-trek-detail-container' }, h("grw-trek-detail", { "reset-store-on-disconnected": "false", "color-primary": this.colorPrimary, "color-primary-shade": this.colorPrimaryShade, "color-primary-tint": this.colorPrimaryTint }))), h("grw-map", { "reset-store-on-disconnected": "false", class: this.isLargeView ? 'large-view-app-map-container' : 'app-map-container', style: { visibility: (this.showTreksMap && !this.showTrek) || (this.showTrekMap && this.showTrek) ? 'visible' : 'hidden' }, "url-layer": this.urlLayer, center: this.center, zoom: this.zoom, attribution: this.attribution, "color-primary": this.colorPrimary, "color-primary-tint": this.colorPrimaryTint, "color-trek-line": this.colorTrekLine, "color-departure-icon": this.colorDepartureIcon, "color-arrival-icon": this.colorArrivalIcon, "color-sensitive-area": this.colorSensitiveArea, "color-poi-icon": this.colorPoiIcon })), h("div", { class: "map-visibility-button", style: { display: this.isLargeView ? 'none' : 'flex' } }, h("div", { onClick: () => this.handleShowMap() }, this.showTrek ? (this.showTrekMap ? 'Voir la fiche' : 'Voir la carte') : this.showTreksMap ? 'Voir la liste' : 'Voir la carte'))))));
+    return (h(Host, { style: {
+        '--color-primary-app': this.colorPrimaryApp,
+        '--color-on-primary': this.colorOnPrimary,
+        '--color-surface': this.colorSurface,
+        '--color-on-surface': this.colorOnSurface,
+        '--color-surface-variant': this.colorSurfaceVariant,
+        '--color-on-surface-variant': this.colorOnSurfaceVariant,
+        '--color-primary-container': this.colorPrimaryContainer,
+        '--color-on-primary-container': this.colorOnPrimaryContainer,
+        '--color-secondary-container': this.colorSecondaryContainer,
+        '--color-on-secondary-container': this.colorOnSecondaryContainer,
+        '--color-background': this.colorBackground,
+        '--color-surface-container-high': this.colorSurfaceContainerHigh,
+        '--color-surface-container-low': this.colorSurfaceContainerLow,
+        '--fab-background-color': this.fabBackgroundColor,
+        '--fab-color': this.fabColor,
+      } }, !state.currentTreks && !state.currentTrek && (h("div", { class: "init-loader-container" }, h("span", { class: "loader" }))), !this.showTrek && !state.treks && (h("grw-treks-provider", { api: this.api, languages: this.languages, "in-bbox": this.inBbox, cities: this.cities, districts: this.districts, structures: this.structures, themes: this.themes, portals: this.portals, routes: this.routes, practices: this.practices })), this.showTrek && this.currentTrekId && !state.currentTrek && (h("grw-trek-provider", { api: this.api, languages: this.languages, "trek-id": this.currentTrekId })), (state.currentTreks || state.currentTrek) && (h("div", { class: "app-container" }, h("div", { class: this.isLargeView ? 'large-view-header-container' : 'header-container' }, h("div", { class: "header-top" }, h("div", { class: "header-left-container" }, this.showTrek ? (h("button", { onClick: () => this.handleBackButton(), class: "arrow-back-icon" }, h("span", { class: "material-symbols-outlined" }, "arrow_back"))) : (h("div", { class: "attribution-container" }, h("a", { target: "_blank", href: this.linkTarget }, this.linkName)))), h("div", { class: "header-right-container" }, h("span", { class: "material-symbols-outlined margin-right-icon" }, "translate"), state.languages.length > 1 && h("grw-select-language", null))), !this.showTrek && (h("div", { class: "handle-filters-container" }, state.treksWithinBounds && (h("div", { class: "current-treks-within-bounds-length" }, `${state.treksWithinBounds.length} ${state.treksWithinBounds.length > 1 ? translate[state.language].treks : translate[state.language].trek}`)), h("button", { onClick: () => this.handleFilters(), class: "handle-filters-button" }, h("span", { class: "material-symbols-outlined margin-right-icon" }, "filter_list"), translate[state.language].filter)))), h("div", { class: `content-container ${this.showTrek ? 'content-trek' : 'content-treks'}` }, h("div", { class: this.isLargeView ? 'large-view-app-treks-list-container' : 'app-treks-list-container', style: { display: this.showTrek ? 'none' : 'flex', position: this.showTrek ? 'absolute' : 'relative' } }, h("grw-treks-list", { "reset-store-on-disconnected": "false", "is-large-view": this.isLargeView, "color-primary-app": this.colorPrimaryApp, "color-on-surface": this.colorOnSurface, "color-secondary-container": this.colorSecondaryContainer, "color-on-secondary-container": this.colorOnSecondaryContainer, "color-surface-container-low": this.colorSurfaceContainerLow })), this.showTrek && !state.currentTrek && (h("div", { class: this.isLargeView ? 'large-view-loader-container' : 'loader-container' }, h("span", { class: "loader" }))), state.currentTrek && (h("div", { class: this.isLargeView ? 'large-view-app-trek-detail-container' : 'app-trek-detail-container' }, h("grw-trek-detail", { "reset-store-on-disconnected": "false", "color-primary-app": this.colorPrimaryApp, "color-on-surface": this.colorOnSurface, "color-primary-container": this.colorPrimaryContainer, "color-on-primary-container": this.colorOnPrimaryContainer, "color-secondary-container": this.colorSecondaryContainer, "color-on-secondary-container": this.colorOnSecondaryContainer, "color-background": this.colorBackground, weather: this.weather, style: { zIndex: this.showTrekMap ? '0' : '1' }, "is-large-view": this.isLargeView }))), h("grw-map", { "reset-store-on-disconnected": "false", class: this.isLargeView ? 'large-view-app-map-container' : 'app-map-container', style: {
+        visibility: (this.showTreksMap && !this.showTrek) || (this.showTrekMap && this.showTrek) || this.isLargeView ? 'visible' : 'hidden',
+        zIndex: this.showTrekMap ? '1' : '0',
+      }, "url-layer": this.urlLayer, center: this.center, zoom: this.zoom, attribution: this.attribution, "color-primary-app": this.colorPrimaryApp, "color-on-surface": this.colorOnSurface, "color-primary-container": this.colorPrimaryContainer, "color-on-primary-container": this.colorOnPrimaryContainer, "color-background": this.colorBackground, "color-trek-line": this.colorTrekLine, "color-departure-icon": this.colorDepartureIcon, "color-arrival-icon": this.colorArrivalIcon, "color-sensitive-area": this.colorSensitiveArea, "color-poi-icon": this.colorPoiIcon, "is-large-view": this.isLargeView })), (!this.showTrek || (this.showTrek && state.currentTrek)) && (h("div", { class: "map-visibility-button-container" }, h("button", { onClick: () => this.handleShowMap(), class: "map-visibility-button", style: { display: this.isLargeView ? 'none' : 'flex' } }, h("span", { class: "material-symbols-outlined" }, this.showTrek ? (this.showTrekMap ? 'summarize' : 'map') : this.showTreksMap ? 'list' : 'map'), this.showTrek
+      ? this.showTrekMap
+        ? translate[state.language].showDetails
+        : translate[state.language].showRoute
+      : this.showTreksMap
+        ? translate[state.language].showList
+        : translate[state.language].showMap))))), !this.showTrek && this.showFilters && (h("div", { class: "options-container" }, h("div", { class: "filters-container" }, h("grw-filter", { filterName: translate[state.language].practice, filterType: "practices", filterNameProperty: "name" }), h("div", { class: "divider" }), h("grw-filter", { filterName: translate[state.language].difficulty, filterType: "difficulties", filterNameProperty: "label" }), h("div", { class: "divider" }), h("grw-filter", { filterName: translate[state.language].duration, filterType: "durations", filterNameProperty: "name" })), h("div", { onClick: () => this.handleFilters(), class: "back-filters-container" })))));
   }
   static get is() { return "grw-app"; }
-  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
       "$": ["grw-app.scss"]
@@ -151,7 +194,7 @@ export class GrwApp {
         "attribute": "api",
         "reflect": false
       },
-      "language": {
+      "languages": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -165,7 +208,7 @@ export class GrwApp {
           "tags": [],
           "text": ""
         },
-        "attribute": "language",
+        "attribute": "languages",
         "reflect": false,
         "defaultValue": "'fr'"
       },
@@ -373,7 +416,7 @@ export class GrwApp {
         "attribute": "attribution",
         "reflect": false
       },
-      "colorPrimary": {
+      "linkName": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -387,11 +430,11 @@ export class GrwApp {
           "tags": [],
           "text": ""
         },
-        "attribute": "color-primary",
+        "attribute": "link-name",
         "reflect": false,
-        "defaultValue": "'#6b0030'"
+        "defaultValue": "'GEOTREK'"
       },
-      "colorPrimaryShade": {
+      "linkTarget": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -405,11 +448,29 @@ export class GrwApp {
           "tags": [],
           "text": ""
         },
-        "attribute": "color-primary-shade",
+        "attribute": "link-target",
+        "reflect": false,
+        "defaultValue": "'https://geotrek.fr'"
+      },
+      "weather": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "weather",
         "reflect": false,
-        "defaultValue": "'#4a0021'"
+        "defaultValue": "false"
       },
-      "colorPrimaryTint": {
+      "colorPrimaryApp": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -423,11 +484,11 @@ export class GrwApp {
           "tags": [],
           "text": ""
         },
-        "attribute": "color-primary-tint",
+        "attribute": "color-primary-app",
         "reflect": false,
-        "defaultValue": "'#974c6e'"
+        "defaultValue": "'#6750a4'"
       },
-      "colorTrekLine": {
+      "colorOnPrimary": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -441,11 +502,11 @@ export class GrwApp {
           "tags": [],
           "text": ""
         },
-        "attribute": "color-trek-line",
+        "attribute": "color-on-primary",
         "reflect": false,
-        "defaultValue": "'#6b0030'"
+        "defaultValue": "'#ffffff'"
       },
-      "colorDepartureIcon": {
+      "colorSurface": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -459,11 +520,11 @@ export class GrwApp {
           "tags": [],
           "text": ""
         },
-        "attribute": "color-departure-icon",
+        "attribute": "color-surface",
         "reflect": false,
-        "defaultValue": "'#006b3b'"
+        "defaultValue": "'#1c1b1f'"
       },
-      "colorArrivalIcon": {
+      "colorOnSurface": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -477,11 +538,11 @@ export class GrwApp {
           "tags": [],
           "text": ""
         },
-        "attribute": "color-arrival-icon",
+        "attribute": "color-on-surface",
         "reflect": false,
-        "defaultValue": "'#85003b'"
+        "defaultValue": "'#49454e'"
       },
-      "colorSensitiveArea": {
+      "colorSurfaceVariant": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -495,11 +556,11 @@ export class GrwApp {
           "tags": [],
           "text": ""
         },
-        "attribute": "color-sensitive-area",
+        "attribute": "color-surface-variant",
         "reflect": false,
-        "defaultValue": "'#4974a5'"
+        "defaultValue": "'#fef7ff'"
       },
-      "colorPoiIcon": {
+      "colorOnSurfaceVariant": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -513,11 +574,11 @@ export class GrwApp {
           "tags": [],
           "text": ""
         },
-        "attribute": "color-poi-icon",
+        "attribute": "color-on-surface-variant",
         "reflect": false,
-        "defaultValue": "'#974c6e'"
+        "defaultValue": "'#1c1b1f'"
       },
-      "linkName": {
+      "colorPrimaryContainer": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -531,11 +592,11 @@ export class GrwApp {
           "tags": [],
           "text": ""
         },
-        "attribute": "link-name",
+        "attribute": "color-primary-container",
         "reflect": false,
-        "defaultValue": "'GEOTREK'"
+        "defaultValue": "'#eaddff'"
       },
-      "linkTarget": {
+      "colorOnPrimaryContainer": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -549,9 +610,225 @@ export class GrwApp {
           "tags": [],
           "text": ""
         },
-        "attribute": "link-target",
+        "attribute": "color-on-primary-container",
         "reflect": false,
-        "defaultValue": "'https://geotrek.fr'"
+        "defaultValue": "'#21005e'"
+      },
+      "colorSecondaryContainer": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "color-secondary-container",
+        "reflect": false,
+        "defaultValue": "'#e8def8'"
+      },
+      "colorOnSecondaryContainer": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "color-on-secondary-container",
+        "reflect": false,
+        "defaultValue": "'#1d192b'"
+      },
+      "colorBackground": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "color-background",
+        "reflect": false,
+        "defaultValue": "'#fef7ff'"
+      },
+      "colorSurfaceContainerHigh": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "color-surface-container-high",
+        "reflect": false,
+        "defaultValue": "'#ece6f0'"
+      },
+      "colorSurfaceContainerLow": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "color-surface-container-low",
+        "reflect": false,
+        "defaultValue": "'#f7f2fa'"
+      },
+      "fabBackgroundColor": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "fab-background-color",
+        "reflect": false,
+        "defaultValue": "'#eaddff'"
+      },
+      "fabColor": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "fab-color",
+        "reflect": false,
+        "defaultValue": "'#21005d'"
+      },
+      "colorTrekLine": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "color-trek-line",
+        "reflect": false,
+        "defaultValue": "'#6b0030'"
+      },
+      "colorDepartureIcon": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "color-departure-icon",
+        "reflect": false,
+        "defaultValue": "'#006b3b'"
+      },
+      "colorArrivalIcon": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "color-arrival-icon",
+        "reflect": false,
+        "defaultValue": "'#85003b'"
+      },
+      "colorSensitiveArea": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "color-sensitive-area",
+        "reflect": false,
+        "defaultValue": "'#4974a5'"
+      },
+      "colorPoiIcon": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "color-poi-icon",
+        "reflect": false,
+        "defaultValue": "'#974c6e'"
       }
     };
   }
@@ -576,7 +853,7 @@ export class GrwApp {
     return [{
         "name": "trekCardPress",
         "method": "onTrekCardPress",
-        "target": undefined,
+        "target": "window",
         "capture": false,
         "passive": false
       }, {
@@ -585,6 +862,12 @@ export class GrwApp {
         "target": "window",
         "capture": false,
         "passive": true
+      }, {
+        "name": "centerOnMap",
+        "method": "onCenterOnMap",
+        "target": "window",
+        "capture": false,
+        "passive": false
       }];
   }
 }