@geotrekce/geotrek-rando-widget 0.2.14 → 0.2.16

package/dist/collection/components/grw-poi-detail/grw-poi-detail.css

@@ -515,13 +515,27 @@ button.swiper-pagination-bullet {
   border-radius: 12px;
   background-color: var(--color-surface-container-low);
   color: var(--color-on-surface);
-  --swiper-navigation-size: 32px;
-  --swiper-navigation-color: var(--color-primary-app);
+  --swiper-navigation-size: 24px;
+  --swiper-navigation-color: var(--color-on-primary-container);
+  --swiper-pagination-color: var(--color-primary-container);
   --swiper-pagination-bullet-size: 12px;
 }
 :host a {
   color: var(--color-primary-app);
 }
+:host .swiper-button-prev,
+:host .swiper-button-next {
+  background-color: var(--color-primary-container);
+  padding: 4px;
+  width: 32px;
+  height: 32px;
+  border-radius: 32px;
+  box-shadow: var(--elevation-1);
+}
+:host .swiper-button-prev:hover,
+:host .swiper-button-next:hover {
+  box-shadow: var(--elevation-2);
+}
 
 .poi-type-img-container {
   position: relative;

package/dist/collection/components/grw-search/grw-search.css

@@ -1,3 +1,7 @@
+.material-symbols {
+  font-family: "Material Symbols Outlined";
+}
+
 .material-symbols-outlined {
   font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 48;
 }
@@ -8,7 +12,6 @@
   align-items: center;
 }
 :host span {
-  font-family: "Material Symbols Outlined";
   font-size: 24px;
   position: absolute;
   left: 32px;

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

@@ -7,7 +7,7 @@ export class GrwSearch {
     state.currentTreks = handleFiltersAndSearch();
   }
   render() {
-    return (h(Host, null, h("span", { class: "material-symbols-outlined" }, "search"), h("input", { onInput: e => this.onSearchChange(e), class: "search-input", type: "search", placeholder: "Rechercher", value: state.searchValue })));
+    return (h(Host, null, h("span", { class: "material-symbols material-symbols-outlined" }, "search"), h("input", { onInput: e => this.onSearchChange(e), class: "search-input", type: "search", placeholder: "Rechercher", value: state.searchValue })));
   }
   static get is() { return "grw-search"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/grw-search/grw-search.js.map

@@ -1 +1 @@
-{"version":3,"file":"grw-search.js","sourceRoot":"","sources":["../../../src/components/grw-search/grw-search.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,KAAK,MAAM,aAAa,CAAC;AAChC,OAAO,EAAE,sBAAsB,EAAE,MAAM,aAAa,CAAC;AAOrD,MAAM,OAAO,SAAS;EACpB,cAAc,CAAC,KAAiB;IAC9B,KAAK,CAAC,WAAW,GAAI,KAAK,CAAC,MAAc,CAAC,KAAK,CAAC;IAChD,KAAK,CAAC,YAAY,GAAG,sBAAsB,EAAE,CAAC;EAChD,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,YAAM,KAAK,EAAC,2BAA2B,aAAc;MACrD,aAAO,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,KAAK,EAAC,cAAc,EAAC,IAAI,EAAC,QAAQ,EAAC,WAAW,EAAC,YAAY,EAAC,KAAK,EAAE,KAAK,CAAC,WAAW,GAAU,CACtI,CACR,CAAC;EACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h } from '@stencil/core';\nimport state from 'store/store';\nimport { handleFiltersAndSearch } from 'utils/utils';\n\n@Component({\n  tag: 'grw-search',\n  styleUrl: 'grw-search.scss',\n  shadow: true,\n})\nexport class GrwSearch {\n  onSearchChange(event: InputEvent) {\n    state.searchValue = (event.target as any).value;\n    state.currentTreks = handleFiltersAndSearch();\n  }\n\n  render() {\n    return (\n      <Host>\n        <span class=\"material-symbols-outlined\">search</span>\n        <input onInput={e => this.onSearchChange(e)} class=\"search-input\" type=\"search\" placeholder=\"Rechercher\" value={state.searchValue}></input>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"grw-search.js","sourceRoot":"","sources":["../../../src/components/grw-search/grw-search.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,KAAK,MAAM,aAAa,CAAC;AAChC,OAAO,EAAE,sBAAsB,EAAE,MAAM,aAAa,CAAC;AAOrD,MAAM,OAAO,SAAS;EACpB,cAAc,CAAC,KAAiB;IAC9B,KAAK,CAAC,WAAW,GAAI,KAAK,CAAC,MAAc,CAAC,KAAK,CAAC;IAChD,KAAK,CAAC,YAAY,GAAG,sBAAsB,EAAE,CAAC;EAChD,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,YAAM,KAAK,EAAC,4CAA4C,aAAc;MACtE,aAAO,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,KAAK,EAAC,cAAc,EAAC,IAAI,EAAC,QAAQ,EAAC,WAAW,EAAC,YAAY,EAAC,KAAK,EAAE,KAAK,CAAC,WAAW,GAAU,CACtI,CACR,CAAC;EACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h } from '@stencil/core';\nimport state from 'store/store';\nimport { handleFiltersAndSearch } from 'utils/utils';\n\n@Component({\n  tag: 'grw-search',\n  styleUrl: 'grw-search.scss',\n  shadow: true,\n})\nexport class GrwSearch {\n  onSearchChange(event: InputEvent) {\n    state.searchValue = (event.target as any).value;\n    state.currentTreks = handleFiltersAndSearch();\n  }\n\n  render() {\n    return (\n      <Host>\n        <span class=\"material-symbols material-symbols-outlined\">search</span>\n        <input onInput={e => this.onSearchChange(e)} class=\"search-input\" type=\"search\" placeholder=\"Rechercher\" value={state.searchValue}></input>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1,3 +1,7 @@
+.material-symbols {
+  font-family: "Material Symbols Outlined";
+}
+
 .material-symbols-outlined {
   font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 48;
 }
@@ -7,7 +11,6 @@
   align-items: center;
 }
 :host span {
-  font-family: "Material Symbols Outlined";
   font-size: 18px;
 }
 :host #language-select {

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

@@ -8,7 +8,7 @@ export class GrwSelectLanguage {
     state.language = event.target.value;
   }
   render() {
-    return (h(Host, null, h("span", { class: "material-symbols-outlined margin-right-icon" }, "translate"), 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()))))));
+    return (h(Host, null, h("span", { class: "material-symbols material-symbols-outlined margin-right-icon" }, "translate"), 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"; }

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

@@ -1 +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,YAAM,KAAK,EAAC,6CAA6C,gBAAiB;MAC1E,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,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        <span class=\"material-symbols-outlined margin-right-icon\">translate</span>\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      </Host>\n    );\n  }\n}\n"]}
+{"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,YAAM,KAAK,EAAC,8DAA8D,gBAAiB;MAC3F,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,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        <span class=\"material-symbols material-symbols-outlined margin-right-icon\">translate</span>\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      </Host>\n    );\n  }\n}\n"]}

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

@@ -1,3 +1,7 @@
+.material-symbols {
+  font-family: "Material Symbols Outlined";
+}
+
 .material-symbols-outlined {
   font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 48;
 }
@@ -102,7 +106,6 @@
 .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 {
-  font-family: "Material Symbols Outlined";
   font-size: 24px;
   width: 24px;
   height: auto;

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

@@ -53,7 +53,7 @@ export class GrwTrekCard {
         '--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 :
+      _c.label), h("div", { class: "icon-label duration" }, h("span", { class: "material-symbols material-symbols-outlined" }, "timelapse"), formatDuration(this.currentTrek.duration))), h("div", { class: "row" }, h("div", { class: "icon-label length" }, h("span", { class: "material-symbols material-symbols-outlined" }, "open_in_full"), formatLength(this.currentTrek.length_2d)), h("div", { class: "icon-label ascent" }, h("span", { class: "material-symbols 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))))))));
   }

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 } 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"]}
+{"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 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 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 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"]}

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

@@ -511,15 +511,35 @@ button.swiper-pagination-bullet {
   width: calc(100% - 64px);
 }
 
+.material-symbols {
+  font-family: "Material Symbols Outlined";
+}
+
 .material-symbols-outlined {
   font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 48;
 }
 
-grw-trek-detail {
-  --swiper-navigation-size: 32px;
-  --swiper-navigation-color: var(--color-primary-app);
-  --swiper-pagination-color: var(--color-primary-app);
+:host {
+  --swiper-navigation-size: 24px;
+  --swiper-navigation-color: var(--color-on-primary-container);
+  --swiper-pagination-color: var(--color-primary-container);
   --swiper-pagination-bullet-size: 12px;
+}
+:host .swiper-button-prev,
+:host .swiper-button-next {
+  background-color: var(--color-primary-container);
+  padding: 4px;
+  width: 32px;
+  height: 32px;
+  border-radius: 32px;
+  box-shadow: var(--elevation-1);
+}
+:host .swiper-button-prev:hover,
+:host .swiper-button-next:hover {
+  box-shadow: var(--elevation-2);
+}
+
+grw-trek-detail {
   overflow: hidden;
 }
 
@@ -676,7 +696,6 @@ grw-trek-detail {
 }
 .trek-detail-container .sub-container .icons-labels-container .row .icon-label img,
 .trek-detail-container .sub-container .icons-labels-container .row .icon-label span {
-  font-family: "Material Symbols Outlined";
   font-size: 24px;
   width: 24px;
   height: auto;
@@ -876,7 +895,6 @@ grw-trek-detail {
   border-radius: 12px;
 }
 .current-advice-container span {
-  font-family: "Material Symbols Outlined";
   font-size: 24px;
   width: 26px;
   margin-right: 8px;

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

@@ -263,9 +263,9 @@ export class GrwTrekDetail {
       } }, this.currentTrek && (h("div", { class: "trek-options" }, h("a", { onClick: () => this.handleScrollTo(this.presentationRef), class: `presentation trek-option${this.options.presentation.indicator ? ' selected-trek-option' : ''}` }, translate[state.language].options.presentation), this.options.description.visible && (h("a", { onClick: () => this.handleScrollTo(this.descriptionRef), class: `description trek-option${this.options.description.indicator ? ' selected-trek-option' : ''}` }, translate[state.language].options.description)), this.options.recommendations.visible && (h("a", { onClick: () => this.handleScrollTo(this.recommendationRef), class: `recommendations trek-option${this.options.recommendations.indicator ? ' selected-trek-option' : ''}` }, translate[state.language].options.recommendations)), this.options.sensitiveArea.visible && (h("a", { onClick: () => this.handleScrollTo(this.sensitiveAreaRef), class: `sensitive-areas trek-option${this.options.sensitiveArea.indicator ? ' selected-trek-option' : ''}` }, translate[state.language].options.environmentalSensitiveAreas)), this.options.informationPlaces.visible && (h("a", { onClick: () => this.handleScrollTo(this.informationDeskRef), class: `information-places trek-option${this.options.informationPlaces.indicator ? ' selected-trek-option' : ''}` }, translate[state.language].options.informationPlaces)), this.options.pois.visible && (h("a", { onClick: () => this.handleScrollTo(this.poiRef), class: `pois trek-option${this.options.pois.indicator ? ' selected-trek-option' : ''}` }, translate[state.language].options.pois)), h("span", { class: "indicator-selected-trek-option", style: { transform: `translateX(${this.handleIndicatorSelectedTrekOption()})` } }))), this.currentTrek && (h("div", { class: "trek-detail-container", ref: el => (this.trekDetailContainerRef = el) }, h("div", { class: "images-container", ref: el => (this.presentationRef = el) }, h("div", { class: "swiper swiper-images", ref: el => (this.swiperImagesRef = el) }, h("div", { class: "swiper-wrapper" }, this.currentTrek.attachments
       .filter(attachment => attachment.type === 'image')
       .map(attachment => (h("div", { class: "swiper-slide" }, h("img", { class: "image", src: attachment.url, loading: "lazy", onClick: () => this.handleFullscreen() }))))), h("div", { class: "swiper-pagination", ref: el => (this.paginationElImagesRef = el) }), h("div", { class: "swiper-button-prev", ref: el => (this.prevElImagesRef = el) }), h("div", { class: "swiper-button-next", ref: el => (this.nextElImagesRef = el) }))), h("div", { class: "name" }, this.currentTrek.name), this.themes.length > 0 && (h("div", { class: "themes-container" }, this.themes.map(theme => (h("div", { class: "theme" }, theme.label))))), h("div", { class: "sub-container" }, h("div", { class: "icons-labels-container" }, h("div", { class: "row" }, h("div", { class: "icon-label difficulty" }, ((_a = this.difficulty) === null || _a === void 0 ? void 0 : _a.pictogram) && h("img", { src: this.difficulty.pictogram }), (_b = this.difficulty) === null || _b === void 0 ? void 0 :
-      _b.label), h("div", { class: "icon-label duration" }, h("span", { class: "material-symbols-outlined" }, "timelapse"), formatDuration((_c = this.currentTrek) === null || _c === void 0 ? void 0 : _c.duration)), 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: "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: "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)))), h("div", { class: "divider" }), h("div", { class: "downloads-container" }, h("div", { class: "download-title" }, translate[state.language].downloads), h("div", { class: "links-container" }, h("a", { href: `${this.currentTrek.gpx}` }, h("span", { class: "material-symbols-outlined" }, "download"), "GPX"), h("a", { href: `${this.currentTrek.kml}` }, h("span", { class: "material-symbols-outlined" }, "download"), "KML"), h("a", { href: `${this.currentTrek.pdf}` }, h("span", { class: "material-symbols-outlined" }, "download"), "PDF"))), h("div", { class: "divider" }), this.currentTrek.description_teaser && h("div", { class: "description-teaser", innerHTML: this.currentTrek.description_teaser }), this.currentTrek.ambiance && h("div", { class: "ambiance", innerHTML: this.currentTrek.ambiance }), h("div", { class: "divider" }), this.currentTrek.description && (h("div", { class: "description-container", ref: el => (this.descriptionRef = el) }, h("div", { class: "description-title" }, translate[state.language].description), h("div", { class: "description", innerHTML: this.currentTrek.description }))), this.currentTrek.departure && (h("div", { class: "departure-container" }, h("div", { class: "departure-title" }, translate[state.language].departure, " :\u00A0"), h("div", { innerHTML: this.currentTrek.departure }))), this.currentTrek.arrival && (h("div", { class: "arrival-container" }, h("div", { class: "arrival-title" }, translate[state.language].arrival, " :\u00A0"), h("div", { innerHTML: this.currentTrek.arrival }))), this.currentTrek.cities && (h("div", { class: "cities-container" }, h("div", { class: "cities-title" }, translate[state.language].cities, " :\u00A0"), h("div", { innerHTML: this.cities.join(', ') }))), this.weather && this.currentTrek.departure_city && (h("div", { class: "weather-container" }, h("iframe", { height: "150", frameborder: "0", src: `https://meteofrance.com/widget/prevision/${this.currentTrek.departure_city}0#${this.colorPrimaryApp}` }))), this.currentTrek.access && (h("div", null, h("div", { class: "divider" }), h("div", { class: "access-container" }, h("div", { class: "access-title" }, translate[state.language].roadAccess), h("div", { class: "access", innerHTML: this.currentTrek.access })))), this.currentTrek.public_transport && (h("div", null, h("div", { class: "divider" }), h("div", { class: "public-transport-container" }, h("div", { class: "public-transport-title" }, translate[state.language].transport), h("div", { class: "public-transport", innerHTML: this.currentTrek.public_transport })))), (this.currentTrek.advice || this.labels.length > 0) && (h("div", null, h("div", { class: "divider" }), h("div", { class: "advice-container", ref: el => (this.recommendationRef = el) }, h("div", { class: "advice-title" }, translate[state.language].recommendations), this.currentTrek.advice && (h("div", { class: "current-advice-container" }, h("span", { class: "material-symbols-outlined" }, "warning"), h("div", { class: "advice", innerHTML: this.currentTrek.advice }))), this.labels.map(label => (h("div", { class: "label-container" }, h("div", { class: "label-sub-container" }, label.pictogram && h("img", { src: label.pictogram }), h("div", { class: "label-name", innerHTML: label.name })), h("div", { class: "label-advice", innerHTML: label.advice }))))))), this.currentTrek.advised_parking && (h("div", null, h("div", { class: "divider" }), h("div", { class: "advised-parking-container", ref: el => (this.parkingRef = el) }, h("div", { class: "advised-parking-title" }, translate[state.language].recommendedParking), h("div", { class: "advised-parking", innerHTML: this.currentTrek.advised_parking })))), this.currentTrek.gear && (h("div", null, h("div", { class: "divider" }), h("div", { class: "gear-container" }, h("div", { class: "gear-title" }, translate[state.language].equipments), h("div", { class: "gear", innerHTML: this.currentTrek.gear })))), state.currentSensitiveAreas && state.currentSensitiveAreas.length > 0 && (h("div", null, h("div", { class: "divider" }), h("div", { class: "sensitive-areas-container", ref: el => (this.sensitiveAreaRef = el) }, h("div", { class: "sensitive-areas-title" }, translate[state.language].environmentalSensitiveAreas), state.currentSensitiveAreas.map(sensitiveArea => (h("grw-sensitive-area-detail", { sensitiveArea: sensitiveArea })))))), state.currentInformationDesks &&
+      _b.label), h("div", { class: "icon-label duration" }, h("span", { class: "material-symbols material-symbols-outlined" }, "timelapse"), formatDuration((_c = this.currentTrek) === null || _c === void 0 ? void 0 : _c.duration)), 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: "row" }, h("div", { class: "icon-label length" }, h("span", { class: "material-symbols material-symbols-outlined" }, "open_in_full"), formatLength(this.currentTrek.length_2d)), h("div", { class: "icon-label ascent" }, h("span", { class: "material-symbols material-symbols-outlined" }, "moving"), formatAscent(this.currentTrek.ascent)), 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)))), h("div", { class: "divider" }), h("div", { class: "downloads-container" }, h("div", { class: "download-title" }, translate[state.language].downloads), h("div", { class: "links-container" }, h("a", { href: `${this.currentTrek.gpx}` }, h("span", { class: "material-symbols material-symbols-outlined" }, "download"), "GPX"), h("a", { href: `${this.currentTrek.kml}` }, h("span", { class: "material-symbols material-symbols-outlined" }, "download"), "KML"), h("a", { href: `${this.currentTrek.pdf}` }, h("span", { class: "material-symbols material-symbols-outlined" }, "download"), "PDF"))), h("div", { class: "divider" }), this.currentTrek.description_teaser && h("div", { class: "description-teaser", innerHTML: this.currentTrek.description_teaser }), this.currentTrek.ambiance && h("div", { class: "ambiance", innerHTML: this.currentTrek.ambiance }), h("div", { class: "divider" }), this.currentTrek.description && (h("div", { class: "description-container", ref: el => (this.descriptionRef = el) }, h("div", { class: "description-title" }, translate[state.language].description), h("div", { class: "description", innerHTML: this.currentTrek.description }))), this.currentTrek.departure && (h("div", { class: "departure-container" }, h("div", { class: "departure-title" }, translate[state.language].departure, " :\u00A0"), h("div", { innerHTML: this.currentTrek.departure }))), this.currentTrek.arrival && (h("div", { class: "arrival-container" }, h("div", { class: "arrival-title" }, translate[state.language].arrival, " :\u00A0"), h("div", { innerHTML: this.currentTrek.arrival }))), this.currentTrek.cities && this.currentTrek.cities.length > 0 && (h("div", { class: "cities-container" }, h("div", { class: "cities-title" }, translate[state.language].cities, " :\u00A0"), h("div", { innerHTML: this.cities.join(', ') }))), this.weather && this.currentTrek.departure_city && (h("div", { class: "weather-container" }, h("iframe", { height: "150", frameborder: "0", src: `https://meteofrance.com/widget/prevision/${this.currentTrek.departure_city}0#${this.colorPrimaryApp}` }))), this.currentTrek.access && (h("div", null, h("div", { class: "divider" }), h("div", { class: "access-container" }, h("div", { class: "access-title" }, translate[state.language].roadAccess), h("div", { class: "access", innerHTML: this.currentTrek.access })))), this.currentTrek.public_transport && (h("div", null, h("div", { class: "divider" }), h("div", { class: "public-transport-container" }, h("div", { class: "public-transport-title" }, translate[state.language].transport), h("div", { class: "public-transport", innerHTML: this.currentTrek.public_transport })))), (this.currentTrek.advice || this.labels.length > 0) && (h("div", null, h("div", { class: "divider" }), h("div", { class: "advice-container", ref: el => (this.recommendationRef = el) }, h("div", { class: "advice-title" }, translate[state.language].recommendations), this.currentTrek.advice && (h("div", { class: "current-advice-container" }, h("span", { class: "material-symbols material-symbols-outlined" }, "warning"), h("div", { class: "advice", innerHTML: this.currentTrek.advice }))), this.labels.map(label => (h("div", { class: "label-container" }, h("div", { class: "label-sub-container" }, label.pictogram && h("img", { src: label.pictogram }), h("div", { class: "label-name", innerHTML: label.name })), h("div", { class: "label-advice", innerHTML: label.advice }))))))), this.currentTrek.advised_parking && (h("div", null, h("div", { class: "divider" }), h("div", { class: "advised-parking-container", ref: el => (this.parkingRef = el) }, h("div", { class: "advised-parking-title" }, translate[state.language].recommendedParking), h("div", { class: "advised-parking", innerHTML: this.currentTrek.advised_parking })))), this.currentTrek.gear && (h("div", null, h("div", { class: "divider" }), h("div", { class: "gear-container" }, h("div", { class: "gear-title" }, translate[state.language].equipments), h("div", { class: "gear", innerHTML: this.currentTrek.gear })))), state.currentSensitiveAreas && state.currentSensitiveAreas.length > 0 && (h("div", null, h("div", { class: "divider" }), h("div", { class: "sensitive-areas-container", ref: el => (this.sensitiveAreaRef = el) }, h("div", { class: "sensitive-areas-title" }, translate[state.language].environmentalSensitiveAreas), state.currentSensitiveAreas.map(sensitiveArea => (h("grw-sensitive-area-detail", { sensitiveArea: sensitiveArea })))))), state.currentInformationDesks &&
       state.currentInformationDesks.filter(currentInformationDesks => this.currentTrek.information_desks.includes(currentInformationDesks.id)).length > 0 && (h("div", null, h("div", { class: "divider" }), h("div", { class: "information-desks-container", ref: el => (this.informationDeskRef = el) }, h("div", { class: "information-desks-title" }, translate[state.language].informationPlaces), h("div", { class: "swiper swiper-information-desks", ref: el => (this.swiperInformationDesksRef = el) }, h("div", { class: "swiper-wrapper" }, state.currentInformationDesks
       .filter(currentInformationDesks => this.currentTrek.information_desks.includes(currentInformationDesks.id))
       .map(informationDesk => (h("div", { class: "swiper-slide" }, h("grw-information-desk-detail", { informationDesk: informationDesk }))))))))), (this.currentTrek.disabled_infrastructure ||