@geotrekce/geotrek-rando-widget 0.0.21 → 0.2.1

package/dist/collection/components/grw-select-language/grw-select-language.js

@@ -0,0 +1,26 @@
+import { Host, h } from '@stencil/core';
+import state from 'store/store';
+export class GrwSelectLanguage {
+  handleSelect(event) {
+    state.treks = null;
+    state.currentTreks = null;
+    state.currentTrek = null;
+    state.language = event.target.value;
+  }
+  render() {
+    return (h(Host, null, h("slot", null, h("select", { onInput: event => this.handleSelect(event), name: "languages", id: "language-select" }, state.languages.map(language => (h("option", { selected: language === state.language, value: language.toLocaleLowerCase() }, language.toLocaleUpperCase())))))));
+  }
+  static get is() { return "grw-select-language"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["grw-select-language.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["grw-select-language.css"]
+    };
+  }
+}
+//# sourceMappingURL=grw-select-language.js.map

package/dist/collection/components/grw-select-language/grw-select-language.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grw-select-language.js","sourceRoot":"","sources":["../../../src/components/grw-select-language/grw-select-language.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,KAAK,MAAM,aAAa,CAAC;AAOhC,MAAM,OAAO,iBAAiB;EAC5B,YAAY,CAAC,KAAK;IAChB,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC;IACnB,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC;IAC1B,KAAK,CAAC,WAAW,GAAG,IAAI,CAAC;IACzB,KAAK,CAAC,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;EACtC,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH;QACE,cAAQ,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,EAAE,IAAI,EAAC,WAAW,EAAC,EAAE,EAAC,iBAAiB,IACtF,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC,CAC/B,cAAQ,QAAQ,EAAE,QAAQ,KAAK,KAAK,CAAC,QAAQ,EAAE,KAAK,EAAE,QAAQ,CAAC,iBAAiB,EAAE,IAC/E,QAAQ,CAAC,iBAAiB,EAAE,CACtB,CACV,CAAC,CACK,CACJ,CACF,CACR,CAAC;EACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h } from '@stencil/core';\nimport state from 'store/store';\n\n@Component({\n  tag: 'grw-select-language',\n  styleUrl: 'grw-select-language.scss',\n  shadow: true,\n})\nexport class GrwSelectLanguage {\n  handleSelect(event) {\n    state.treks = null;\n    state.currentTreks = null;\n    state.currentTrek = null;\n    state.language = event.target.value;\n  }\n\n  render() {\n    return (\n      <Host>\n        <slot>\n          <select onInput={event => this.handleSelect(event)} name=\"languages\" id=\"language-select\">\n            {state.languages.map(language => (\n              <option selected={language === state.language} value={language.toLocaleLowerCase()}>\n                {language.toLocaleUpperCase()}\n              </option>\n            ))}\n          </select>\n        </slot>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/grw-sensitive-area-detail/grw-sensitive-area-detail.css

@@ -1,20 +1,23 @@
+@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0");
 :host {
   display: flex;
   flex-direction: column;
+  color: var(--color-on-surface);
 }
 :host a {
-  color: var(--color-primary);
+  color: var(--color-primary-app);
 }
 
 .sensitive-area-title {
-  color: var(--color-primary);
-  font-size: 24px;
+  font-size: 22px;
+  line-height: 28px;
   padding: 12px 0px;
-  font-weight: bold;
+  font-weight: 400;
 }
 
 .sensitive-area-description {
   font-size: 16px;
+  line-height: 24px;
 }
 
 .sensitive-area-period-container .sensitive-area-period-title,
@@ -26,8 +29,8 @@
 .sensitive-area-contact-container .sensitive-area-period-title,
 .sensitive-area-contact-container .sensitive-area-practice-title,
 .sensitive-area-contact-container .sensitive-area-contact-title {
-  color: var(--color-primary);
-  font-size: 24px;
+  font-size: 16px;
+  line-height: 24px;
   padding: 12px 0px;
 }
 .sensitive-area-period-container .sensitive-area-period-values,
@@ -37,4 +40,5 @@
 .sensitive-area-contact-container .sensitive-area-period-values,
 .sensitive-area-contact-container .sensitive-area-practice-values {
   display: flex;
+  flex-wrap: wrap;
 }

package/dist/collection/components/grw-trek-card/grw-trek-card.css

@@ -1,33 +1,40 @@
+@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0");
 .trek-card-container,
 .trek-card-large-view-container {
-  font-family: "Roboto";
-  border-radius: 8px;
-  box-shadow: 4px 8px 24px rgba(0, 0, 0, 0.25);
   cursor: pointer;
+  font-family: "Roboto";
+  border-radius: 12px;
+  box-shadow: var(--elevation-1);
+  background-color: var(--color-surface-container-low);
 }
 .trek-card-container .image,
 .trek-card-large-view-container .image {
   object-fit: cover;
+  border-top-left-radius: 12px;
+  border-top-right-radius: 12px;
 }
 .trek-card-container .sub-container,
 .trek-card-large-view-container .sub-container {
   display: flex;
   flex-direction: column;
   justify-content: center;
-  padding: 12px;
+  padding: 8px 16px;
 }
 .trek-card-container .sub-container .name,
 .trek-card-large-view-container .sub-container .name {
-  color: var(--color-primary);
-  font-size: 24px;
-  font-weight: bold;
+  color: var(--color-on-surface);
+  font-size: 22px;
+  line-height: 28px;
+  font-weight: 400;
   margin-bottom: 8px;
 }
 .trek-card-container .sub-container .departure,
 .trek-card-large-view-container .sub-container .departure {
-  color: rgba(0, 0, 0, 0.7);
+  color: var(--color-on-surface);
   font-size: 16px;
-  margin: 4px 0px;
+  line-height: 24px;
+  font-weight: 500;
+  margin-bottom: 4px;
 }
 .trek-card-container .sub-container .themes-container,
 .trek-card-large-view-container .sub-container .themes-container {
@@ -38,11 +45,23 @@
 }
 .trek-card-container .sub-container .themes-container .theme,
 .trek-card-large-view-container .sub-container .themes-container .theme {
-  background-color: var(--color-primary-tint);
-  color: #ffffff;
+  background-color: var(--color-secondary-container);
+  color: var(--color-on-secondary-container);
   border-radius: 8px;
-  padding: 8px;
+  padding: 8px 16px;
   margin: 0px 8px 8px 0px;
+  box-shadow: var(--elevation-0);
+  border: 1px solid var(--color-outline);
+  height: 32px;
+  gap: 8px;
+  box-sizing: border-box;
+  text-align: start;
+  vertical-align: middle;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  position: relative;
 }
 .trek-card-container .sub-container .icons-labels-container,
 .trek-card-large-view-container .sub-container .icons-labels-container {
@@ -50,6 +69,10 @@
   justify-content: flex-start;
   align-items: center;
   flex-wrap: wrap;
+  color: var(--color-on-surface);
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 500;
 }
 .trek-card-container .sub-container .icons-labels-container .row,
 .trek-card-large-view-container .sub-container .icons-labels-container .row {
@@ -73,26 +96,27 @@
   margin: 0px 4px;
 }
 .trek-card-container .sub-container .icons-labels-container .row .icon-label img,
-.trek-card-large-view-container .sub-container .icons-labels-container .row .icon-label img {
+.trek-card-container .sub-container .icons-labels-container .row .icon-label span,
+.trek-card-large-view-container .sub-container .icons-labels-container .row .icon-label img,
+.trek-card-large-view-container .sub-container .icons-labels-container .row .icon-label span {
   width: 24px;
   height: auto;
   margin-right: 8px;
 }
 .trek-card-container .sub-container .icons-labels-container .row .practice img,
 .trek-card-large-view-container .sub-container .icons-labels-container .row .practice img {
-  background-color: var(--color-primary);
+  background-color: var(--color-primary-app);
 }
 
 .trek-card-container {
   width: 350px;
-  height: auto;
 }
 .trek-card-container .image {
   width: 100%;
+  max-height: 200px;
 }
 
 .trek-card-large-view-container {
-  height: auto;
   display: flex;
   flex-direction: row;
 }

package/dist/collection/components/grw-trek-card/grw-trek-card.js

@@ -1,4 +1,4 @@
-import { Host, h, getAssetPath } from '@stencil/core';
+import { Host, h } from '@stencil/core';
 import state, { onChange, reset } from 'store/store';
 import { formatDuration, formatLength, formatAscent } from 'utils/utils';
 export class GrwTrekCard {
@@ -10,8 +10,11 @@ export class GrwTrekCard {
     this.themes = undefined;
     this.departureCity = undefined;
     this.trek = undefined;
-    this.colorPrimary = '#6b0030';
-    this.colorPrimaryTint = '#974c6e';
+    this.colorPrimaryApp = '#6b0030';
+    this.colorOnSurface = '#49454e';
+    this.colorSecondaryContainer = '#e8def8';
+    this.colorOnSecondaryContainer = '#1d192b';
+    this.colorSurfaceContainerLow = '#f7f2fa';
     this.isLargeView = false;
     this.resetStoreOnDisconnected = true;
   }
@@ -42,11 +45,15 @@ export class GrwTrekCard {
   }
   render() {
     var _a, _b, _c, _d, _e, _f, _g;
-    const durationImageSrc = getAssetPath(`assets/duration.svg`);
-    const lengthImageSrc = getAssetPath(`assets/length.svg`);
-    const ascentImageSrc = getAssetPath(`assets/ascent.svg`);
-    return (h(Host, { onClick: () => this.trekCardPress.emit(this.currentTrek.id), style: { 'width': this.isLargeView ? '100%' : 'auto', '--color-primary': this.colorPrimary, '--color-primary-tint': this.colorPrimaryTint } }, this.currentTrek && (h("div", { class: this.isLargeView ? 'trek-card-large-view-container' : 'trek-card-container' }, this.currentTrek.attachments && this.currentTrek.attachments[0] && this.currentTrek.attachments[0].thumbnail && (h("img", { class: "image", src: `${this.currentTrek.attachments[0].thumbnail}`, loading: "lazy" })), h("div", { class: "sub-container" }, this.departureCity && h("div", { class: "departure" }, this.departureCity.name), h("div", { class: "name" }, (_a = this.currentTrek) === null || _a === void 0 ? void 0 : _a.name), h("div", { class: "themes-container" }, this.themes.map(theme => (h("div", { class: "theme" }, theme.label)))), h("div", { class: "icons-labels-container" }, h("div", { class: "row" }, h("div", { class: "icon-label difficulty" }, ((_b = this.difficulty) === null || _b === void 0 ? void 0 : _b.pictogram) && h("img", { src: this.difficulty.pictogram }), (_c = this.difficulty) === null || _c === void 0 ? void 0 :
-      _c.label), h("div", { class: "icon-label duration" }, h("img", { src: durationImageSrc }), formatDuration(this.currentTrek.duration))), h("div", { class: "row" }, h("div", { class: "icon-label length" }, h("img", { src: lengthImageSrc }), formatLength(this.currentTrek.length_2d)), h("div", { class: "icon-label ascent" }, h("img", { src: ascentImageSrc }), formatAscent(this.currentTrek.ascent))), h("div", { class: "row" }, h("div", { class: "icon-label route" }, ((_d = this.route) === null || _d === void 0 ? void 0 : _d.pictogram) && h("img", { src: this.route.pictogram }), (_e = this.route) === null || _e === void 0 ? void 0 :
+    return (h(Host, { style: {
+        'width': this.isLargeView ? '100%' : 'auto',
+        '--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.currentTrek && (h("div", { class: this.isLargeView ? 'trek-card-large-view-container' : 'trek-card-container', onClick: () => this.trekCardPress.emit(this.currentTrek.id) }, this.currentTrek.attachments.filter(attachment => attachment.type === 'image').length > 0 && (h("img", { class: "image", src: `${this.currentTrek.attachments.filter(attachment => attachment.type === 'image')[0].thumbnail}`, loading: "lazy" })), h("div", { class: "sub-container" }, this.departureCity && h("div", { class: "departure" }, this.departureCity.name), h("div", { class: "name" }, (_a = this.currentTrek) === null || _a === void 0 ? void 0 : _a.name), h("div", { class: "themes-container" }, this.themes.map(theme => (h("div", { class: "theme" }, theme.label)))), h("div", { class: "icons-labels-container" }, h("div", { class: "row" }, h("div", { class: "icon-label difficulty" }, ((_b = this.difficulty) === null || _b === void 0 ? void 0 : _b.pictogram) && h("img", { src: this.difficulty.pictogram }), (_c = this.difficulty) === null || _c === void 0 ? void 0 :
+      _c.label), h("div", { class: "icon-label duration" }, h("span", { class: "material-symbols-outlined" }, "timelapse"), formatDuration(this.currentTrek.duration))), h("div", { class: "row" }, h("div", { class: "icon-label length" }, h("span", { class: "material-symbols-outlined" }, "open_in_full"), formatLength(this.currentTrek.length_2d)), h("div", { class: "icon-label ascent" }, h("span", { class: "material-symbols-outlined" }, "moving"), formatAscent(this.currentTrek.ascent))), h("div", { class: "row" }, h("div", { class: "icon-label route" }, ((_d = this.route) === null || _d === void 0 ? void 0 : _d.pictogram) && h("img", { src: this.route.pictogram }), (_e = this.route) === null || _e === void 0 ? void 0 :
       _e.route), h("div", { class: "icon-label practice" }, ((_f = this.practice) === null || _f === void 0 ? void 0 : _f.pictogram) && h("img", { src: this.practice.pictogram }), (_g = this.practice) === null || _g === void 0 ? void 0 :
       _g.name))))))));
   }
@@ -69,7 +76,7 @@ export class GrwTrekCard {
         "mutable": false,
         "complexType": {
           "original": "Trek",
-          "resolved": "{ id: number; name: string; attachments: Attachments; description?: string; description_teaser: string; difficulty: number; route: number; practice: number; themes: number[]; duration: number; length_2d: number; ascent: number; departure: string; departure_city: string; arrival?: string; altimetric_profile?: string; geometry?: LineString; departure_geom?: Position; gpx?: string; kml?: string; pdf?: string; parking_location?: Position; ambiance?: string; access?: string; public_transport?: string; advice?: string; advised_parking?: string; gear?: string; labels?: number[]; points_reference?: MultiPoint; source?: number[]; structure?: number; disabled_infrastructure?: string; accessibilities?: number[]; accessibility_level?: number; accessibility_slope?: string; accessibility_width?: string; accessibility_signage?: string; accessibility_covering?: string; accessibility_exposure?: string; accessibility_advice?: string; }",
+          "resolved": "{ id: number; name: string; attachments: Attachments; description?: string; description_teaser: string; difficulty: number; route: number; practice: number; themes: number[]; duration: number; length_2d: number; ascent: number; departure: string; departure_city: string; arrival?: string; geometry?: LineString; departure_geom?: Position; gpx?: string; kml?: string; pdf?: string; parking_location?: Position; ambiance?: string; access?: string; public_transport?: string; advice?: string; advised_parking?: string; gear?: string; labels?: number[]; points_reference?: MultiPoint; source?: number[]; structure?: number; disabled_infrastructure?: string; accessibilities?: number[]; accessibility_level?: number; accessibility_slope?: string; accessibility_width?: string; accessibility_signage?: string; accessibility_covering?: string; accessibility_exposure?: string; accessibility_advice?: string; cities?: string[]; information_desks?: number[]; }",
           "references": {
             "Trek": {
               "location": "import",
@@ -84,7 +91,7 @@ export class GrwTrekCard {
           "text": ""
         }
       },
-      "colorPrimary": {
+      "colorPrimaryApp": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -98,11 +105,11 @@ export class GrwTrekCard {
           "tags": [],
           "text": ""
         },
-        "attribute": "color-primary",
+        "attribute": "color-primary-app",
         "reflect": false,
         "defaultValue": "'#6b0030'"
       },
-      "colorPrimaryTint": {
+      "colorOnSurface": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -116,9 +123,63 @@ export class GrwTrekCard {
           "tags": [],
           "text": ""
         },
-        "attribute": "color-primary-tint",
+        "attribute": "color-on-surface",
         "reflect": false,
-        "defaultValue": "'#974c6e'"
+        "defaultValue": "'#49454e'"
+      },
+      "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'"
+      },
+      "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'"
       },
       "isLargeView": {
         "type": "boolean",

package/dist/collection/components/grw-trek-card/grw-trek-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"grw-trek-card.js","sourceRoot":"","sources":["../../../src/components/grw-trek-card/grw-trek-card.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter, State, getAssetPath } from '@stencil/core';\nimport state, { onChange, reset } from 'store/store';\nimport { City, Difficulty, Practice, Route, Themes, Trek } from 'types/types';\nimport { formatDuration, formatLength, formatAscent } from 'utils/utils';\n\n@Component({\n  tag: 'grw-trek-card',\n  styleUrl: 'grw-trek-card.scss',\n  shadow: true,\n})\nexport class GrwTrekCard {\n  @Event() trekCardPress: EventEmitter<number>;\n  @State() currentTrek: Trek;\n  @State() difficulty: Difficulty;\n  @State() route: Route;\n  @State() practice: Practice;\n  @State() themes: Themes;\n  @State() departureCity: City;\n  @Prop() trek: Trek;\n  @Prop() colorPrimary = '#6b0030';\n  @Prop() colorPrimaryTint = '#974c6e';\n  @Prop() isLargeView = false;\n  @Prop() resetStoreOnDisconnected = true;\n\n  connectedCallback() {\n    this.currentTrek = this.trek ? this.trek : state.currentTrek;\n    if (this.currentTrek) {\n      this.difficulty = state.difficulties.find(difficulty => difficulty.id === this.currentTrek.difficulty);\n      this.route = state.routes.find(route => route.id === this.currentTrek.route);\n      this.practice = state.practices.find(practice => practice.id === this.currentTrek.practice);\n      this.themes = state.themes.filter(theme => this.currentTrek.themes.includes(theme.id));\n      this.departureCity = state.cities.find(city => city.id === this.currentTrek.departure_city);\n    }\n    onChange('currentTrek', () => {\n      this.currentTrek = this.trek ? this.trek : state.currentTrek;\n      if (this.currentTrek) {\n        this.difficulty = state.difficulties.find(difficulty => difficulty.id === this.currentTrek.difficulty);\n        this.route = state.routes.find(route => route.id === this.currentTrek.route);\n        this.practice = state.practices.find(practice => practice.id === this.currentTrek.practice);\n        this.themes = state.themes.filter(theme => this.currentTrek.themes.includes(theme.id));\n        this.departureCity = state.cities.find(city => city.id === this.currentTrek.departure_city);\n      }\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.resetStoreOnDisconnected) {\n      reset();\n    }\n  }\n\n  render() {\n    const durationImageSrc = getAssetPath(`assets/duration.svg`);\n    const lengthImageSrc = getAssetPath(`assets/length.svg`);\n    const ascentImageSrc = getAssetPath(`assets/ascent.svg`);\n    return (\n      <Host\n        onClick={() => this.trekCardPress.emit(this.currentTrek.id)}\n        style={{ 'width': this.isLargeView ? '100%' : 'auto', '--color-primary': this.colorPrimary, '--color-primary-tint': this.colorPrimaryTint }}\n      >\n        {this.currentTrek && (\n          <div class={this.isLargeView ? 'trek-card-large-view-container' : 'trek-card-container'}>\n            {this.currentTrek.attachments && this.currentTrek.attachments[0] && this.currentTrek.attachments[0].thumbnail && (\n              <img class=\"image\" src={`${this.currentTrek.attachments[0].thumbnail}`} loading=\"lazy\" />\n            )}\n            <div class=\"sub-container\">\n              {this.departureCity && <div class=\"departure\">{this.departureCity.name}</div>}\n              <div class=\"name\">{this.currentTrek?.name}</div>\n              <div class=\"themes-container\">\n                {this.themes.map(theme => (\n                  <div class=\"theme\">{theme.label}</div>\n                ))}\n              </div>\n              <div class=\"icons-labels-container\">\n                <div class=\"row\">\n                  <div class=\"icon-label difficulty\">\n                    {this.difficulty?.pictogram && <img src={this.difficulty.pictogram} />}\n                    {this.difficulty?.label}\n                  </div>\n                  <div class=\"icon-label duration\">\n                    <img src={durationImageSrc} />\n                    {formatDuration(this.currentTrek.duration)}\n                  </div>\n                </div>\n                <div class=\"row\">\n                  <div class=\"icon-label length\">\n                    <img src={lengthImageSrc} />\n                    {formatLength(this.currentTrek.length_2d)}\n                  </div>\n                  <div class=\"icon-label ascent\">\n                    <img src={ascentImageSrc} />\n                    {formatAscent(this.currentTrek.ascent)}\n                  </div>\n                </div>\n                <div class=\"row\">\n                  <div class=\"icon-label route\">\n                    {this.route?.pictogram && <img src={this.route.pictogram} />}\n                    {this.route?.route}\n                  </div>\n                  <div class=\"icon-label practice\">\n                    {this.practice?.pictogram && <img src={this.practice.pictogram} />}\n                    {this.practice?.name}\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"grw-trek-card.js","sourceRoot":"","sources":["../../../src/components/grw-trek-card/grw-trek-card.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter, State } from '@stencil/core';\nimport state, { onChange, reset } from 'store/store';\nimport { City, Difficulty, Practice, Route, Themes, Trek } from 'types/types';\nimport { formatDuration, formatLength, formatAscent } from 'utils/utils';\n\n@Component({\n  tag: 'grw-trek-card',\n  styleUrl: 'grw-trek-card.scss',\n  shadow: true,\n})\nexport class GrwTrekCard {\n  @Event() trekCardPress: EventEmitter<number>;\n  @State() currentTrek: Trek;\n  @State() difficulty: Difficulty;\n  @State() route: Route;\n  @State() practice: Practice;\n  @State() themes: Themes;\n  @State() departureCity: City;\n  @Prop() trek: Trek;\n  @Prop() colorPrimaryApp = '#6b0030';\n  @Prop() colorOnSurface = '#49454e';\n  @Prop() colorSecondaryContainer = '#e8def8';\n  @Prop() colorOnSecondaryContainer = '#1d192b';\n  @Prop() colorSurfaceContainerLow = '#f7f2fa';\n  @Prop() isLargeView = false;\n  @Prop() resetStoreOnDisconnected = true;\n\n  connectedCallback() {\n    this.currentTrek = this.trek ? this.trek : state.currentTrek;\n    if (this.currentTrek) {\n      this.difficulty = state.difficulties.find(difficulty => difficulty.id === this.currentTrek.difficulty);\n      this.route = state.routes.find(route => route.id === this.currentTrek.route);\n      this.practice = state.practices.find(practice => practice.id === this.currentTrek.practice);\n      this.themes = state.themes.filter(theme => this.currentTrek.themes.includes(theme.id));\n      this.departureCity = state.cities.find(city => city.id === this.currentTrek.departure_city);\n    }\n    onChange('currentTrek', () => {\n      this.currentTrek = this.trek ? this.trek : state.currentTrek;\n      if (this.currentTrek) {\n        this.difficulty = state.difficulties.find(difficulty => difficulty.id === this.currentTrek.difficulty);\n        this.route = state.routes.find(route => route.id === this.currentTrek.route);\n        this.practice = state.practices.find(practice => practice.id === this.currentTrek.practice);\n        this.themes = state.themes.filter(theme => this.currentTrek.themes.includes(theme.id));\n        this.departureCity = state.cities.find(city => city.id === this.currentTrek.departure_city);\n      }\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.resetStoreOnDisconnected) {\n      reset();\n    }\n  }\n\n  render() {\n    return (\n      <Host\n        style={{\n          'width': this.isLargeView ? '100%' : 'auto',\n          '--color-primary-app': this.colorPrimaryApp,\n          '--color-on-surface': this.colorOnSurface,\n          '--color-secondary-container': this.colorSecondaryContainer,\n          '--color-on-secondary-container': this.colorOnSecondaryContainer,\n          '--color-surface-container-low': this.colorSurfaceContainerLow,\n        }}\n      >\n        {this.currentTrek && (\n          <div class={this.isLargeView ? 'trek-card-large-view-container' : 'trek-card-container'} onClick={() => this.trekCardPress.emit(this.currentTrek.id)}>\n            {this.currentTrek.attachments.filter(attachment => attachment.type === 'image').length > 0 && (\n              <img class=\"image\" src={`${this.currentTrek.attachments.filter(attachment => attachment.type === 'image')[0].thumbnail}`} loading=\"lazy\" />\n            )}\n            <div class=\"sub-container\">\n              {this.departureCity && <div class=\"departure\">{this.departureCity.name}</div>}\n              <div class=\"name\">{this.currentTrek?.name}</div>\n              <div class=\"themes-container\">\n                {this.themes.map(theme => (\n                  <div class=\"theme\">{theme.label}</div>\n                ))}\n              </div>\n              <div class=\"icons-labels-container\">\n                <div class=\"row\">\n                  <div class=\"icon-label difficulty\">\n                    {this.difficulty?.pictogram && <img src={this.difficulty.pictogram} />}\n                    {this.difficulty?.label}\n                  </div>\n                  <div class=\"icon-label duration\">\n                    <span class=\"material-symbols-outlined\">timelapse</span>\n                    {formatDuration(this.currentTrek.duration)}\n                  </div>\n                </div>\n                <div class=\"row\">\n                  <div class=\"icon-label length\">\n                    <span class=\"material-symbols-outlined\">open_in_full</span>\n                    {formatLength(this.currentTrek.length_2d)}\n                  </div>\n                  <div class=\"icon-label ascent\">\n                    <span class=\"material-symbols-outlined\">moving</span>\n                    {formatAscent(this.currentTrek.ascent)}\n                  </div>\n                </div>\n                <div class=\"row\">\n                  <div class=\"icon-label route\">\n                    {this.route?.pictogram && <img src={this.route.pictogram} />}\n                    {this.route?.route}\n                  </div>\n                  <div class=\"icon-label practice\">\n                    {this.practice?.pictogram && <img src={this.practice.pictogram} />}\n                    {this.practice?.name}\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}