@geotrekce/geotrek-rando-widget 0.0.1

package/dist/collection/stories/App.js

@@ -0,0 +1,9 @@
+export const createApp = ({ api, portals, appName, colorPrimary, colorPrimaryTint }) => {
+  const app = document.createElement('grw-app');
+  app.setAttribute('api', api);
+  app.setAttribute('portals', portals);
+  app.setAttribute('app-name', appName);
+  app.setAttribute('color-primary', colorPrimary);
+  app.setAttribute('color-primary-tint', colorPrimaryTint);
+  return app;
+};

package/dist/collection/stories/App.stories.js

@@ -0,0 +1,21 @@
+import { createApp } from './App';
+
+export default {
+  title: 'Geotrek Rando Widget',
+  argTypes: {},
+};
+
+const Template = ({ label, ...args }) => {
+  return createApp({ label, ...args });
+};
+
+export const App = Template.bind({});
+
+App.args = {
+  api: 'https://randoadmin.parc-haut-jura.fr/api/v2/',
+  portals: '',
+  appName: 'Geotrek Rando Widget',
+  colorPrimary: '#6b0030',
+  colorPrimaryTint: '#d2b2c0',
+};
+App.storyName = 'App';

package/dist/collection/stories/TrekCard.js

@@ -0,0 +1,7 @@
+export const createTrekCard = ({ api, trekId }) => {
+  const trek = document.createElement('grw-trek-provider');
+  trek.setAttribute('api', api);
+  trek.setAttribute('trek-id', trekId);
+  trek.appendChild(document.createElement('grw-trek-card'));
+  return trek;
+};

package/dist/collection/stories/TrekCard.stories.js

@@ -0,0 +1,18 @@
+import { createTrekCard } from './TrekCard';
+
+export default {
+  title: 'Geotrek Rando Widget',
+  argTypes: {},
+};
+
+const Template = ({ label, ...args }) => {
+  return createTrekCard({ label, ...args });
+};
+
+export const TrekCard = Template.bind({});
+
+TrekCard.args = {
+  api: 'https://randoadmin.parc-haut-jura.fr/api/v2/',
+  trekId: 242872,
+};
+TrekCard.storyName = 'Trek card';

package/dist/collection/stories/TrekDetail.js

@@ -0,0 +1,7 @@
+export const createTrekDetail = ({ api, trekId }) => {
+  const trek = document.createElement('grw-trek-provider');
+  trek.setAttribute('api', api);
+  trek.setAttribute('trek-id', trekId);
+  trek.appendChild(document.createElement('grw-trek-detail'));
+  return trek;
+};

package/dist/collection/stories/TrekDetail.stories.js

@@ -0,0 +1,18 @@
+import { createTrekDetail } from './TrekDetail';
+
+export default {
+  title: 'Geotrek Rando Widget',
+  argTypes: {},
+};
+
+const Template = ({ label, ...args }) => {
+  return createTrekDetail({ label, ...args });
+};
+
+export const TrekDetail = Template.bind({});
+
+TrekDetail.args = {
+  api: 'https://randoadmin.parc-haut-jura.fr/api/v2/',
+  trekId: 242872,
+};
+TrekDetail.storyName = 'Trek detail';

package/dist/collection/stories/TrekMap.js

@@ -0,0 +1,11 @@
+export const createTrekMap = ({ api, trekId, trekLineColor, departureIconColor, arrivalIconColor }) => {
+  const trek = document.createElement('grw-trek-provider');
+  trek.setAttribute('api', api);
+  trek.setAttribute('trek-id', trekId);
+  const trekMap = document.createElement('grw-map');
+  trekMap.setAttribute('trek-line-color', trekLineColor);
+  trekMap.setAttribute('departure-icon-color', departureIconColor);
+  trekMap.setAttribute('arrival-icon-color', arrivalIconColor);
+  trek.appendChild(trekMap);
+  return trek;
+};

package/dist/collection/stories/TrekMap.stories.js

@@ -0,0 +1,21 @@
+import { createTrekMap } from './TrekMap';
+
+export default {
+  title: 'Geotrek Rando Widget',
+  argTypes: {},
+};
+
+const Template = ({ label, ...args }) => {
+  return createTrekMap({ label, ...args });
+};
+
+export const TrekMap = Template.bind({});
+
+TrekMap.args = {
+  api: 'https://randoadmin.parc-haut-jura.fr/api/v2/',
+  trekId: 242872,
+  trekLineColor: '#6b0030',
+  departureIconColor: '#006b3b',
+  arrivalIconColor: '#85003b',
+};
+TrekMap.storyName = 'Trek map';

package/dist/collection/stories/TreksList.js

@@ -0,0 +1,6 @@
+export const createTreksList = ({ api }) => {
+  const treks = document.createElement('grw-treks-provider');
+  treks.setAttribute('api', api);
+  treks.appendChild(document.createElement('grw-treks-list'));
+  return treks;
+};

package/dist/collection/stories/TreksList.stories.js

@@ -0,0 +1,17 @@
+import { createTreksList } from './TreksList';
+
+export default {
+  title: 'Geotrek Rando Widget',
+  argTypes: {},
+};
+
+const Template = ({ label, ...args }) => {
+  return createTreksList({ label, ...args });
+};
+
+export const TreksList = Template.bind({});
+
+TreksList.args = {
+  api: 'https://randoadmin.parc-haut-jura.fr/api/v2/',
+};
+TreksList.storyName = 'Treks list';

package/dist/collection/stories/TreksMap.js

@@ -0,0 +1,7 @@
+export const createTreksMap = ({ api }) => {
+  const treks = document.createElement('grw-treks-provider');
+  treks.setAttribute('api', api);
+  const treksMap = document.createElement('grw-map');
+  treks.appendChild(treksMap);
+  return treks;
+};

package/dist/collection/stories/TreksMap.stories.js

@@ -0,0 +1,17 @@
+import { createTreksMap } from './TreksMap';
+
+export default {
+  title: 'Geotrek Rando Widget',
+  argTypes: {},
+};
+
+const Template = ({ label, ...args }) => {
+  return createTreksMap({ label, ...args });
+};
+
+export const TreksMap = Template.bind({});
+
+TreksMap.args = {
+  api: 'https://randoadmin.parc-haut-jura.fr/api/v2/',
+};
+TreksMap.storyName = 'Treks map';

package/dist/collection/types/types.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/utils/utils.js

@@ -0,0 +1,19 @@
+export function formatDuration(duration) {
+  let formattedDuration;
+  if (duration < 24) {
+    formattedDuration = `${Math.floor(duration)}h`;
+    if (duration % 1 > 0) {
+      formattedDuration += `${Math.round(60 * (duration % 1))}min`;
+    }
+  }
+  else {
+    formattedDuration = `${duration / 24}j`;
+  }
+  return formattedDuration;
+}
+export function formatLength(length) {
+  return `${Math.round(length / 1000)} km`;
+}
+export function formatAscent(ascent) {
+  return `${ascent} m`;
+}

package/dist/components/grw-app.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface GrwApp extends Components.GrwApp, HTMLElement {}
+export const GrwApp: {
+  prototype: GrwApp;
+  new (): GrwApp;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/grw-app.js

@@ -0,0 +1,98 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { s as state } from './store.js';
+import { d as defineCustomElement$7 } from './grw-map2.js';
+import { d as defineCustomElement$6 } from './grw-trek-card2.js';
+import { d as defineCustomElement$5 } from './grw-trek-detail2.js';
+import { d as defineCustomElement$4 } from './grw-trek-provider2.js';
+import { d as defineCustomElement$3 } from './grw-treks-list2.js';
+import { d as defineCustomElement$2 } from './grw-treks-provider2.js';
+
+const arrowBackImage = `<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><polyline points="244 400 100 256 244 112" style="fill:none;stroke:#ffffff;stroke-linecap:round;stroke-linejoin:round;stroke-width:48px"/><line x1="120" y1="256" x2="412" y2="256" style="fill:none;stroke:#ffffff;stroke-linecap:round;stroke-linejoin:round;stroke-width:48px"/></svg>`;
+
+const grwAppCss = ".header-container{display:flex;align-items:center;background-color:var(--color-primary);height:64px}.header-container .title{color:#ffffff;font-size:24px;margin-left:24px}.header-container .arrow-back-icon{width:48px;height:auto;margin-left:24px}.header-container .arrow-back-icon svg{cursor:pointer;width:48px;height:auto}.loader-container{position:absolute;display:flex;justify-content:center;align-items:center;width:100vw;height:100%}.loader-container .loader{width:48px;height:48px;border:5px solid var(--color-primary-tint);border-bottom-color:var(--color-primary);border-radius:50%;display:inline-block;box-sizing:border-box;animation:rotation 1s linear infinite}@keyframes rotation{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.content-container{display:flex;height:calc(100vh - 64px)}.app-treks-list-container,.app-trek-detail-container{width:100vw;height:100%}.app-map-container{position:absolute;width:100vw;height:calc(100vh - 64px)}.map-visibility-button{cursor:pointer;display:flex;justify-content:center;align-items:center;position:absolute;bottom:24px;width:100%;z-index:400;user-select:none}.map-visibility-button div{background-color:var(--color-primary);color:#ffffff;padding:12px;border-radius:24px;width:120px;text-align:center}@media (min-width: 664px){.map-visibility-button{display:none}.header-container .title{font-size:32px}.loader-container{position:relative;width:50vw}.app-treks-list-container,.app-trek-detail-container{width:50vw;height:100%}.app-map-container{position:relative;width:50vw;height:100%}}";
+
+const GrwApp$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.appName = 'Geotrek Rando Widget';
+    this.colorPrimary = '#6b0030';
+    this.colorPrimaryTint = '#d2b2c0';
+  }
+  onTrekCardPress(event) {
+    this.currentTrekId = event.detail;
+    this.showTrek = !this.showTrek;
+  }
+  onWindowResize(event) {
+    this.showMap = !(event.composedPath()[0].innerWidth < 664);
+  }
+  onTrekDetailsClose() {
+    this.currentTrekId = null;
+    this.showTrek = !this.showTrek;
+  }
+  componentWillLoad() {
+    this.showMap = !(window.innerWidth < 664);
+  }
+  render() {
+    return (h(Host, { style: { '--color-primary': this.colorPrimary, '--color-primary-tint': this.colorPrimaryTint } }, h("grw-treks-provider", { api: this.api, portals: this.portals }, h("div", { class: "header-container" }, this.showTrek ? h("div", { onClick: () => this.onTrekDetailsClose(), class: "arrow-back-icon", innerHTML: arrowBackImage }) : h("div", { class: "title" }, this.appName)), h("div", { class: "content-container" }, h("div", { class: "app-treks-list-container", style: { visibility: this.showTrek ? 'hidden' : 'visible', position: this.showTrek ? 'absolute' : 'relative' } }, h("grw-treks-list", null)), this.showTrek && !state.currentTrek && (h("div", { class: "loader-container" }, h("span", { class: "loader" }))), this.showTrek && this.currentTrekId && (h("grw-trek-provider", { api: state.api, "trek-id": this.currentTrekId }, state.currentTrek && (h("div", { class: "app-trek-detail-container" }, h("grw-trek-detail", null))))), h("div", { class: "app-map-container", style: { visibility: this.showMap ? 'visible' : 'hidden' } }, h("grw-map", null))), h("div", { class: "map-visibility-button" }, h("div", { onClick: () => (this.showMap = !this.showMap) }, this.showMap ? (this.showTrek ? 'Voir la fiche' : 'Voir la liste') : 'Voir la carte')))));
+  }
+  static get style() { return grwAppCss; }
+}, [1, "grw-app", {
+    "api": [1],
+    "portals": [1],
+    "appName": [1, "app-name"],
+    "colorPrimary": [1, "color-primary"],
+    "colorPrimaryTint": [1, "color-primary-tint"],
+    "showTrek": [32],
+    "showMap": [32],
+    "currentTrekId": [32]
+  }, [[0, "trekCardPress", "onTrekCardPress"], [9, "resize", "onWindowResize"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["grw-app", "grw-map", "grw-trek-card", "grw-trek-detail", "grw-trek-provider", "grw-treks-list", "grw-treks-provider"];
+  components.forEach(tagName => { switch (tagName) {
+    case "grw-app":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, GrwApp$1);
+      }
+      break;
+    case "grw-map":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$7();
+      }
+      break;
+    case "grw-trek-card":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "grw-trek-detail":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "grw-trek-provider":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "grw-treks-list":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "grw-treks-provider":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const GrwApp = GrwApp$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { GrwApp, defineCustomElement };

package/dist/components/grw-map.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface GrwMap extends Components.GrwMap, HTMLElement {}
+export const GrwMap: {
+  prototype: GrwMap;
+  new (): GrwMap;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/grw-map.js

@@ -0,0 +1,6 @@
+import { G as GrwMap$1, d as defineCustomElement$1 } from './grw-map2.js';
+
+const GrwMap = GrwMap$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { GrwMap, defineCustomElement };