@geotrekce/geotrek-rando-widget 0.3.6 → 0.4.0

package/dist/collection/components/grw-touristic-content-detail/grw-touristic-content-detail.js

@@ -0,0 +1,244 @@
+import { Build, Host, getAssetPath, h } from '@stencil/core';
+import { translate } from 'i18n/i18n';
+import state from 'store/store';
+import Swiper, { FreeMode, Keyboard, Mousewheel, Navigation, Pagination } from 'swiper';
+export class GrwTouristicContentDetail {
+  constructor() {
+    this.displayFullscreen = false;
+    this.colorPrimaryApp = '#6b0030';
+    this.colorOnSurface = '#49454e';
+    this.colorPrimaryContainer = '#eaddff';
+    this.colorOnPrimaryContainer = '#21005e';
+    this.colorSecondaryContainer = '#e8def8';
+    this.colorOnSecondaryContainer = '#1d192b';
+    this.colorSurfaceContainerLow = '#f7f2fa';
+    this.colorBackground = '#fef7ff';
+    this.isLargeView = false;
+  }
+  componentDidLoad() {
+    if (this.swiperImagesRef) {
+      this.swiperImages = new Swiper(this.swiperImagesRef, {
+        modules: [Navigation, Pagination, Keyboard, FreeMode, Mousewheel],
+        navigation: {
+          prevEl: this.prevElImagesRef,
+          nextEl: this.nextElImagesRef,
+        },
+        pagination: { el: this.paginationElImagesRef },
+        allowTouchMove: false,
+        keyboard: false,
+      });
+      this.swiperImagesRef.onfullscreenchange = () => {
+        this.displayFullscreen = !this.displayFullscreen;
+        this.displayFullscreen ? this.swiperImages.keyboard.enable() : this.swiperImages.keyboard.disable();
+      };
+    }
+  }
+  handleFullscreen() {
+    if (state.currentTouristicContent.attachments && state.currentTouristicContent.attachments[0] && state.currentTouristicContent.attachments[0].url) {
+      this.swiperImagesRef.requestFullscreen();
+    }
+  }
+  render() {
+    const defaultImageSrc = getAssetPath(`${Build.isDev ? '/' : ''}assets/default-image.svg`);
+    const touristicContentCategory = state.touristicContentCategories &&
+      state.currentTouristicContent &&
+      state.touristicContentCategories.find(touristicContentCategory => touristicContentCategory.id === state.currentTouristicContent.category);
+    const cities = state.currentTouristicContent && state.currentTouristicContent.cities.map(currentCity => { var _a; return (_a = state.cities.find(city => city.id === currentCity)) === null || _a === void 0 ? void 0 : _a.name; });
+    return (h(Host, { style: {
+        '--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,
+        '--detail-bottom-space-height': this.isLargeView ? '8px' : '104px',
+      } }, state.currentTouristicContent && (h("div", { class: "touristic-content-detail-container", ref: el => (this.touristicContentDetailContainerRef = 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" }, state.currentTouristicContent.attachments.length > 0 ? (state.currentTouristicContent.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-slide" }, h("img", { class: "default-poi-img", src: defaultImageSrc, loading: "lazy" })))), 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: "touristic-content-category-container" }, h("img", { src: touristicContentCategory.pictogram }), h("div", { class: "touristic-content-category-name" }, touristicContentCategory.label)), h("div", { class: "name" }, state.currentTouristicContent.name), h("div", { class: "divider" }), h("div", { class: "downloads-container" }, h("div", { class: "download-title" }, translate[state.language].download), h("div", { class: "links-container" }, h("a", { href: `${state.currentTouristicContent.pdf}` }, h("span", { translate: false, class: "material-symbols material-symbols-outlined" }, "download"), "PDF"))), state.currentTouristicContent.description_teaser && (h("div", null, h("div", { class: "divider" }), h("div", { class: "description-teaser", innerHTML: state.currentTouristicContent.description_teaser }))), h("div", { class: "divider" }), state.currentTouristicContent.practical_info && (h("div", { class: "description-container", ref: el => (this.descriptionRef = el) }, h("div", { class: "description-title" }, translate[state.language].description), h("div", { class: "description", innerHTML: state.currentTouristicContent.description }))), cities && cities.length > 0 && (h("div", { class: "cities-container" }, h("div", { class: "cities-title" }, translate[state.language].city, " :\u00A0"), h("div", { innerHTML: cities.join(', ') }))), state.currentTouristicContent.practical_info && (h("div", null, h("div", { class: "divider" }), h("div", { class: "useful-information-container" }, h("div", { class: "useful-information-title" }, translate[state.language].usefulInformation, " :\u00A0"), h("div", { innerHTML: state.currentTouristicContent.practical_info })))), (state.currentTouristicContent.contact || state.currentTouristicContent.email || state.currentTouristicContent.website) && (h("div", null, h("div", { class: "divider" }), h("div", { class: "contact-container" }, h("div", { class: "contact-title" }, translate[state.language].contact, " :\u00A0"), state.currentTouristicContent.contact && h("div", { innerHTML: state.currentTouristicContent.contact }), state.currentTouristicContent.email && (h("div", { class: "email-container" }, h("div", null, translate[state.language].email, " :\u00A0"), h("div", { innerHTML: state.currentTouristicContent.email }))), state.currentTouristicContent.website && (h("div", { class: "website-container" }, h("div", null, translate[state.language].website, " :\u00A0"), h("div", { innerHTML: state.currentTouristicContent.website })))))), h("div", { class: "detail-bottom-space" })))));
+  }
+  static get is() { return "grw-touristic-content-detail"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["grw-touristic-content-detail.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["grw-touristic-content-detail.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "colorPrimaryApp": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "color-primary-app",
+        "reflect": false,
+        "defaultValue": "'#6b0030'"
+      },
+      "colorOnSurface": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "color-on-surface",
+        "reflect": false,
+        "defaultValue": "'#49454e'"
+      },
+      "colorPrimaryContainer": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "color-primary-container",
+        "reflect": false,
+        "defaultValue": "'#eaddff'"
+      },
+      "colorOnPrimaryContainer": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "color-on-primary-container",
+        "reflect": false,
+        "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'"
+      },
+      "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'"
+      },
+      "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'"
+      },
+      "isLargeView": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "is-large-view",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "displayFullscreen": {}
+    };
+  }
+}
+//# sourceMappingURL=grw-touristic-content-detail.js.map

package/dist/collection/components/grw-touristic-content-detail/grw-touristic-content-detail.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grw-touristic-content-detail.js","sourceRoot":"","sources":["../../../src/components/grw-touristic-content-detail/grw-touristic-content-detail.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Build, Component, Host, Prop, State, getAssetPath, h } from '@stencil/core';\nimport { translate } from 'i18n/i18n';\nimport state from 'store/store';\nimport Swiper, { FreeMode, Keyboard, Mousewheel, Navigation, Pagination } from 'swiper';\n\n@Component({\n  tag: 'grw-touristic-content-detail',\n  styleUrl: 'grw-touristic-content-detail.scss',\n  shadow: true,\n})\nexport class GrwTouristicContentDetail {\n  swiperImages?: Swiper;\n  swiperImagesRef?: HTMLDivElement;\n  prevElImagesRef?: HTMLDivElement;\n  nextElImagesRef?: HTMLDivElement;\n  paginationElImagesRef?: HTMLDivElement;\n  presentationRef?: HTMLDivElement;\n\n  @State() displayFullscreen = false;\n  @Prop() colorPrimaryApp = '#6b0030';\n  @Prop() colorOnSurface = '#49454e';\n  @Prop() colorPrimaryContainer = '#eaddff';\n  @Prop() colorOnPrimaryContainer = '#21005e';\n  @Prop() colorSecondaryContainer = '#e8def8';\n  @Prop() colorOnSecondaryContainer = '#1d192b';\n  @Prop() colorSurfaceContainerLow = '#f7f2fa';\n  @Prop() colorBackground = '#fef7ff';\n  @Prop() isLargeView = false;\n\n  descriptionRef?: HTMLDivElement;\n  touristicContentDetailContainerRef?: HTMLElement;\n\n  componentDidLoad() {\n    if (this.swiperImagesRef) {\n      this.swiperImages = new Swiper(this.swiperImagesRef, {\n        modules: [Navigation, Pagination, Keyboard, FreeMode, Mousewheel],\n        navigation: {\n          prevEl: this.prevElImagesRef,\n          nextEl: this.nextElImagesRef,\n        },\n        pagination: { el: this.paginationElImagesRef },\n        allowTouchMove: false,\n        keyboard: false,\n      });\n      this.swiperImagesRef.onfullscreenchange = () => {\n        this.displayFullscreen = !this.displayFullscreen;\n        this.displayFullscreen ? this.swiperImages.keyboard.enable() : this.swiperImages.keyboard.disable();\n      };\n    }\n  }\n\n  handleFullscreen() {\n    if (state.currentTouristicContent.attachments && state.currentTouristicContent.attachments[0] && state.currentTouristicContent.attachments[0].url) {\n      this.swiperImagesRef.requestFullscreen();\n    }\n  }\n\n  render() {\n    const defaultImageSrc = getAssetPath(`${Build.isDev ? '/' : ''}assets/default-image.svg`);\n    const touristicContentCategory =\n      state.touristicContentCategories &&\n      state.currentTouristicContent &&\n      state.touristicContentCategories.find(touristicContentCategory => touristicContentCategory.id === state.currentTouristicContent.category);\n    const cities = state.currentTouristicContent && state.currentTouristicContent.cities.map(currentCity => state.cities.find(city => city.id === currentCity)?.name);\n    return (\n      <Host\n        style={{\n          '--color-primary-app': this.colorPrimaryApp,\n          '--color-on-surface': this.colorOnSurface,\n          '--color-primary-container': this.colorPrimaryContainer,\n          '--color-on-primary-container': this.colorOnPrimaryContainer,\n          '--color-secondary-container': this.colorSecondaryContainer,\n          '--color-on-secondary-container': this.colorOnSecondaryContainer,\n          '--color-background': this.colorBackground,\n          '--detail-bottom-space-height': this.isLargeView ? '8px' : '104px',\n        }}\n      >\n        {state.currentTouristicContent && (\n          <div class=\"touristic-content-detail-container\" ref={el => (this.touristicContentDetailContainerRef = el)}>\n            <div class=\"images-container\" ref={el => (this.presentationRef = el)}>\n              <div class=\"swiper swiper-images\" ref={el => (this.swiperImagesRef = el)}>\n                <div class=\"swiper-wrapper\">\n                  {state.currentTouristicContent.attachments.length > 0 ? (\n                    state.currentTouristicContent.attachments\n                      .filter(attachment => attachment.type === 'image')\n                      .map(attachment => (\n                        <div class=\"swiper-slide\">\n                          <img class=\"image\" src={attachment.url} loading=\"lazy\" onClick={() => this.handleFullscreen()} />\n                        </div>\n                      ))\n                  ) : (\n                    <div class=\"swiper-slide\">\n                      <img class=\"default-poi-img\" src={defaultImageSrc} loading=\"lazy\" />\n                    </div>\n                  )}\n                </div>\n                <div class=\"swiper-pagination\" ref={el => (this.paginationElImagesRef = el)}></div>\n                <div class=\"swiper-button-prev\" ref={el => (this.prevElImagesRef = el)}></div>\n                <div class=\"swiper-button-next\" ref={el => (this.nextElImagesRef = el)}></div>\n              </div>\n            </div>\n            <div class=\"touristic-content-category-container\">\n              <img src={touristicContentCategory.pictogram} />\n              <div class=\"touristic-content-category-name\">{touristicContentCategory.label}</div>\n            </div>\n            <div class=\"name\">{state.currentTouristicContent.name}</div>\n            <div class=\"divider\"></div>\n            <div class=\"downloads-container\">\n              <div class=\"download-title\">{translate[state.language].download}</div>\n              <div class=\"links-container\">\n                <a href={`${state.currentTouristicContent.pdf}`}>\n                  {/* @ts-ignore */}\n                  <span translate={false} class=\"material-symbols material-symbols-outlined\">\n                    download\n                  </span>\n                  PDF\n                </a>\n              </div>\n            </div>\n            {state.currentTouristicContent.description_teaser && (\n              <div>\n                <div class=\"divider\"></div>\n                <div class=\"description-teaser\" innerHTML={state.currentTouristicContent.description_teaser}></div>\n              </div>\n            )}\n            <div class=\"divider\"></div>\n            {state.currentTouristicContent.practical_info && (\n              <div class=\"description-container\" ref={el => (this.descriptionRef = el)}>\n                <div class=\"description-title\">{translate[state.language].description}</div>\n                <div class=\"description\" innerHTML={state.currentTouristicContent.description}></div>\n              </div>\n            )}\n            {cities && cities.length > 0 && (\n              <div class=\"cities-container\">\n                <div class=\"cities-title\">{translate[state.language].city} :&nbsp;</div>\n                <div innerHTML={cities.join(', ')}></div>\n              </div>\n            )}\n            {state.currentTouristicContent.practical_info && (\n              <div>\n                <div class=\"divider\"></div>\n                <div class=\"useful-information-container\">\n                  <div class=\"useful-information-title\">{translate[state.language].usefulInformation} :&nbsp;</div>\n                  <div innerHTML={state.currentTouristicContent.practical_info}></div>\n                </div>\n              </div>\n            )}\n            {(state.currentTouristicContent.contact || state.currentTouristicContent.email || state.currentTouristicContent.website) && (\n              <div>\n                <div class=\"divider\"></div>\n\n                <div class=\"contact-container\">\n                  <div class=\"contact-title\">{translate[state.language].contact} :&nbsp;</div>\n                  {state.currentTouristicContent.contact && <div innerHTML={state.currentTouristicContent.contact}></div>}\n                  {state.currentTouristicContent.email && (\n                    <div class=\"email-container\">\n                      <div>{translate[state.language].email} :&nbsp;</div>\n                      <div innerHTML={state.currentTouristicContent.email}></div>\n                    </div>\n                  )}\n                  {state.currentTouristicContent.website && (\n                    <div class=\"website-container\">\n                      <div>{translate[state.language].website} :&nbsp;</div>\n                      <div innerHTML={state.currentTouristicContent.website}></div>\n                    </div>\n                  )}\n                </div>\n              </div>\n            )}\n            <div class=\"detail-bottom-space\"></div>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/grw-touristic-contents-list/grw-touristic-contents-list.css

@@ -0,0 +1,43 @@
+.material-symbols {
+  font-family: "Material Symbols Outlined";
+}
+
+.material-symbols-outlined {
+  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 48;
+}
+
+:host {
+  font-family: "Roboto";
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+  width: 100%;
+}
+
+grw-touristic-content-card {
+  width: 100% !important;
+  margin: 0px 8px 8px 8px;
+}
+
+.list-bottom-space {
+  min-height: 104px;
+  height: 104px;
+  width: 100%;
+}
+
+.current-touristic-contents-within-bounds-length {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 16px;
+  color: var(--color-on-surface);
+  font-size: 22px;
+  line-height: 28px;
+  font-weight: 400;
+}
+
+.touristic-contents-list-container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+}

package/dist/collection/components/grw-touristic-contents-list/grw-touristic-contents-list.js

@@ -0,0 +1,220 @@
+import { Host, h } from '@stencil/core';
+import { translate } from 'i18n/i18n';
+import state, { onChange, reset } from 'store/store';
+export class GrwTouristicContentsList {
+  constructor() {
+    this.step = 10;
+    this.shouldAddInfiniteScrollEvent = true;
+    this.handleInfiniteScrollBind = this.handleInfiniteScroll.bind(this);
+    this.touristicContentsToDisplay = [];
+    this.colorPrimaryApp = '#6b0030';
+    this.colorOnSurface = '#49454e';
+    this.colorSecondaryContainer = '#e8def8';
+    this.colorOnSecondaryContainer = '#1d192b';
+    this.colorSurfaceContainerLow = '#f7f2fa';
+    this.isLargeView = false;
+    this.resetStoreOnDisconnected = true;
+  }
+  connectedCallback() {
+    this.handleInfiniteScrollEvent(true);
+    if (state.currentTouristicContents) {
+      this.touristicContentsToDisplay = [...state.currentTouristicContents.slice(0, this.step)];
+    }
+    onChange('currentTouristicContents', () => {
+      this.handleInfiniteScrollEvent(true);
+      this.element.scroll({ top: 0 });
+      if (state.currentTouristicContents) {
+        this.touristicContentsToDisplay = [...state.currentTouristicContents.slice(0, this.step)];
+      }
+    });
+    onChange('touristicContentsWithinBounds', () => {
+      this.handleInfiniteScrollEvent(true);
+      this.element.scroll({ top: 0 });
+      if (state.touristicContentsWithinBounds) {
+        this.touristicContentsToDisplay = [...state.touristicContentsWithinBounds.slice(0, this.step)];
+      }
+    });
+  }
+  handleInfiniteScroll(event) {
+    if (event.composedPath()[0].scrollTop + event.composedPath()[0].scrollHeight / 2 >= event.composedPath()[0].scrollHeight) {
+      if (this.touristicContentsToDisplay.length < state.touristicContentsWithinBounds.length) {
+        this.touristicContentsToDisplay = state.touristicContentsWithinBounds.slice(0, this.touristicContentsToDisplay.length + this.step >= state.touristicContentsWithinBounds.length
+          ? state.touristicContentsWithinBounds.length
+          : this.touristicContentsToDisplay.length + this.step);
+      }
+      else {
+        this.handleInfiniteScrollEvent(false);
+      }
+    }
+  }
+  handleInfiniteScrollEvent(shouldAddInfiniteScrollEvent) {
+    if (shouldAddInfiniteScrollEvent) {
+      if (this.shouldAddInfiniteScrollEvent) {
+        this.element.addEventListener('scroll', this.handleInfiniteScrollBind);
+        this.shouldAddInfiniteScrollEvent = !shouldAddInfiniteScrollEvent;
+      }
+    }
+    else {
+      this.element.removeEventListener('scroll', this.handleInfiniteScrollBind);
+      this.shouldAddInfiniteScrollEvent = !shouldAddInfiniteScrollEvent;
+    }
+  }
+  disconnectedCallback() {
+    if (this.resetStoreOnDisconnected) {
+      reset();
+    }
+    this.handleInfiniteScrollEvent(false);
+  }
+  render() {
+    return (h(Host, { style: { '--color-primary-app': this.colorPrimaryApp } }, state.touristicContentsWithinBounds && (h("div", { class: "current-touristic-contents-within-bounds-length" }, `${state.touristicContentsWithinBounds.length} ${state.touristicContentsWithinBounds.length > 1 ? translate[state.language].home.touristicContents : translate[state.language].home.touristicContent}`)), h("div", { class: "touristic-contents-list-container" }, this.touristicContentsToDisplay.map(touristicContent => (h("grw-touristic-content-card", { "reset-store-on-disconnected": "false", key: `touristic-content-${touristicContent.id}`, touristicContent: touristicContent, "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.isLargeView && h("div", { class: "list-bottom-space" })));
+  }
+  static get is() { return "grw-touristic-contents-list"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["grw-touristic-contents-list.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["grw-touristic-contents-list.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "colorPrimaryApp": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "color-primary-app",
+        "reflect": false,
+        "defaultValue": "'#6b0030'"
+      },
+      "colorOnSurface": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "color-on-surface",
+        "reflect": false,
+        "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",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "is-large-view",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "resetStoreOnDisconnected": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "reset-store-on-disconnected",
+        "reflect": false,
+        "defaultValue": "true"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "touristicContentsToDisplay": {}
+    };
+  }
+  static get elementRef() { return "element"; }
+}
+//# sourceMappingURL=grw-touristic-contents-list.js.map

package/dist/collection/components/grw-touristic-contents-list/grw-touristic-contents-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grw-touristic-contents-list.js","sourceRoot":"","sources":["../../../src/components/grw-touristic-contents-list/grw-touristic-contents-list.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Element, State, Prop } from '@stencil/core';\nimport { translate } from 'i18n/i18n';\nimport state, { onChange, reset } from 'store/store';\nimport { TouristicContents } from 'types/types';\n\n@Component({\n  tag: 'grw-touristic-contents-list',\n  styleUrl: 'grw-touristic-contents-list.scss',\n  shadow: true,\n})\nexport class GrwTouristicContentsList {\n  @Element() element: HTMLElement;\n  @State() touristicContentsToDisplay: TouristicContents = [];\n\n  @Prop() colorPrimaryApp = '#6b0030';\n  @Prop() colorOnSurface = '#49454e';\n  @Prop() colorSecondaryContainer = '#e8def8';\n  @Prop() colorOnSecondaryContainer = '#1d192b';\n  @Prop() colorSurfaceContainerLow = '#f7f2fa';\n\n  @Prop() isLargeView = false;\n  @Prop() resetStoreOnDisconnected = true;\n  step = 10;\n  shouldAddInfiniteScrollEvent = true;\n\n  handleInfiniteScrollBind: (event: any) => void = this.handleInfiniteScroll.bind(this);\n\n  connectedCallback() {\n    this.handleInfiniteScrollEvent(true);\n    if (state.currentTouristicContents) {\n      this.touristicContentsToDisplay = [...state.currentTouristicContents.slice(0, this.step)];\n    }\n    onChange('currentTouristicContents', () => {\n      this.handleInfiniteScrollEvent(true);\n      this.element.scroll({ top: 0 });\n      if (state.currentTouristicContents) {\n        this.touristicContentsToDisplay = [...state.currentTouristicContents.slice(0, this.step)];\n      }\n    });\n    onChange('touristicContentsWithinBounds', () => {\n      this.handleInfiniteScrollEvent(true);\n      this.element.scroll({ top: 0 });\n      if (state.touristicContentsWithinBounds) {\n        this.touristicContentsToDisplay = [...state.touristicContentsWithinBounds.slice(0, this.step)];\n      }\n    });\n  }\n\n  handleInfiniteScroll(event: any) {\n    if (event.composedPath()[0].scrollTop + event.composedPath()[0].scrollHeight / 2 >= event.composedPath()[0].scrollHeight) {\n      if (this.touristicContentsToDisplay.length < state.touristicContentsWithinBounds.length) {\n        this.touristicContentsToDisplay = state.touristicContentsWithinBounds.slice(\n          0,\n          this.touristicContentsToDisplay.length + this.step >= state.touristicContentsWithinBounds.length\n            ? state.touristicContentsWithinBounds.length\n            : this.touristicContentsToDisplay.length + this.step,\n        );\n      } else {\n        this.handleInfiniteScrollEvent(false);\n      }\n    }\n  }\n\n  handleInfiniteScrollEvent(shouldAddInfiniteScrollEvent: boolean) {\n    if (shouldAddInfiniteScrollEvent) {\n      if (this.shouldAddInfiniteScrollEvent) {\n        this.element.addEventListener('scroll', this.handleInfiniteScrollBind);\n        this.shouldAddInfiniteScrollEvent = !shouldAddInfiniteScrollEvent;\n      }\n    } else {\n      this.element.removeEventListener('scroll', this.handleInfiniteScrollBind);\n      this.shouldAddInfiniteScrollEvent = !shouldAddInfiniteScrollEvent;\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.resetStoreOnDisconnected) {\n      reset();\n    }\n    this.handleInfiniteScrollEvent(false);\n  }\n\n  render() {\n    return (\n      <Host style={{ '--color-primary-app': this.colorPrimaryApp }}>\n        {state.touristicContentsWithinBounds && (\n          <div class=\"current-touristic-contents-within-bounds-length\">{`${state.touristicContentsWithinBounds.length} ${\n            state.touristicContentsWithinBounds.length > 1 ? translate[state.language].home.touristicContents : translate[state.language].home.touristicContent\n          }`}</div>\n        )}\n        <div class=\"touristic-contents-list-container\">\n          {this.touristicContentsToDisplay.map(touristicContent => (\n            <grw-touristic-content-card\n              reset-store-on-disconnected=\"false\"\n              key={`touristic-content-${touristicContent.id}`}\n              touristicContent={touristicContent}\n              is-large-view={this.isLargeView}\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            ></grw-touristic-content-card>\n          ))}\n        </div>\n        {!this.isLargeView && <div class=\"list-bottom-space\"></div>}\n      </Host>\n    );\n  }\n}\n"]}