@geotrekce/geotrek-rando-widget 0.3.4 → 0.3.6

package/dist/esm-es5/grw-app.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["grwAppCss","GrwApp","this","largeViewSize","handlePopStateBind","handlePopState","bind","prototype","onTrekCardPress","event","parentTrek","state","parentTrekId","currentTrekSteps","currentTrekId","currentTrek","detail","showTrek","showTrekMap","url","URL","window","location","toString","searchParams","set","history","pushState","onWindowResize","handleView","onCenterOnMap","isLargeView","watchPropHandler","dispatchEvent","Event","componentWillLoad","trekParam","get","replaceState","isInitialHistoryWithTrek","Number","componentDidLoad","_this","onChange","trekNetworkError","urlRedirect","delete","onTrekDetailsClose","addEventListener","appElement","getBoundingClientRect","width","showTreksMap","handleFilters","showFilters","handleBackButton","back","handleShowMap","handleEraseFilters","filters","forEach","filter","property","currentFilter","selected","selectedActivitiesFilters","selectedThemesFilters","selectedLocationFilters","currentTreks","handleFiltersAndSearch","resetFilter","emit","handleOkFilters","disconnectedCallback","reset","removeEventListener","handleSelectedSegment","selectedSegment","handleSegment","segment","some","length","render","h","Host","style","colorPrimaryApp","colorOnPrimary","colorSurface","colorOnSurface","colorSurfaceVariant","colorOnSurfaceVariant","colorPrimaryContainer","colorOnPrimaryContainer","colorSecondaryContainer","colorOnSecondaryContainer","colorBackground","colorSurfaceContainerHigh","colorSurfaceContainerLow","fabBackgroundColor","fabColor","appWidth","appHeight","class","treks","api","languages","inBbox","cities","districts","structures","themes","portals","routes","practices","onClick","translate","language","concat","display","position","visibility","zIndex","weather","center","zoom","nameLayer","urlLayer","attributionLayer","colorTrekLine","colorSensitiveArea","colorPoiIcon","useGradient","showDetails","showRoute","showList","showMap","treksWithinBounds","trek","erase","ok","activities","filterName","practice","filterType","filterNameProperty","difficulty","duration","elevation","accessibility"],"sources":["src/components/grw-app/grw-app.scss?tag=grw-app","src/components/grw-app/grw-app.tsx"],"sourcesContent":[".material-symbols {\n  font-family: 'Material Symbols Outlined';\n}\n\n.material-symbols-outlined {\n  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48;\n}\n\ngrw-app {\n  display: block;\n  position: relative;\n  width: var(--app-width);\n  height: var(--app-height);\n  font-family: 'Roboto';\n  color: var(--color-on-surface);\n  overflow: hidden;\n  line-height: initial;\n  max-width: 100vw;\n  max-height: 100vh;\n}\n\n.app-container {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n}\n\n.header-container,\n.large-view-header-container {\n  background-color: var(--color-background);\n  box-shadow: var(--elevation-2);\n  height: 64px;\n  .arrow-back-container {\n    display: flex;\n    align-items: center;\n    height: 100%;\n    margin: 0px 16px;\n    .arrow-back-icon {\n      cursor: pointer;\n      -webkit-tap-highlight-color: transparent;\n      color: var(--color-on-surface);\n      border: none;\n      background-color: var(--color-background);\n      border-radius: 50%;\n      height: 48px;\n      width: 48px;\n      padding: 0px;\n      text-align: left;\n    }\n  }\n}\n\n.options-container {\n  height: 100%;\n  position: absolute;\n  width: 100%;\n  z-index: 1100;\n  top: 0px;\n}\n\n.handle-search-filters-container {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin: 0px 16px;\n  height: 64px;\n\n  .handle-search-container {\n    width: calc(50% + 48px);\n    max-width: 220px;\n  }\n\n  .handle-filters-button {\n    margin-left: 16px;\n    user-select: none;\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: center;\n    border: none;\n    background-color: var(--color-background);\n    color: var(--color-on-surface);\n    padding: 12px 24px;\n    border-radius: 20px;\n    box-sizing: border-box;\n    position: relative;\n    gap: 8px;\n    white-space: nowrap;\n    line-height: 20px;\n    letter-spacing: 0.10000000149011612px;\n    font-size: 14px;\n    font-weight: 500;\n    box-shadow: var(--elevation-1);\n    transition: box-shadow 0.2s ease-in-out 0s;\n    span {\n      font-size: 18px;\n    }\n  }\n}\n\n.large-view-header-container {\n  .handle-search-filters-container {\n    justify-content: flex-start;\n  }\n}\n\n.filters-container {\n  background-color: var(--color-background);\n  position: relative;\n  width: 100%;\n  height: 100%;\n  z-index: 1100;\n  .segmented-buttons-container {\n    display: flex;\n    justify-content: center;\n    width: calc(100% - 32px);\n    height: 40px;\n    margin: 16px;\n    border: 1px solid var(--color-outline);\n    border-radius: 20px;\n    line-height: 20px;\n    .segment {\n      cursor: pointer;\n      user-select: none;\n      font-size: 14px;\n      font-weight: 500;\n      -webkit-tap-highlight-color: transparent;\n      color: var(--color-on-surface-variant);\n      background-color: transparent;\n      border-radius: 0px;\n      min-width: 40px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 100%;\n      height: 100%;\n      &:first-child {\n        border-top-left-radius: 20px;\n        border-bottom-left-radius: 20px;\n      }\n      &:not(:last-child) {\n        border-right: 1px solid var(--color-outline);\n      }\n      &:last-child {\n        border-top-right-radius: 20px;\n        border-bottom-right-radius: 20px;\n      }\n    }\n    .selected-segment {\n      color: var(--color-on-secondary-container);\n      background-color: var(--color-secondary-container);\n    }\n  }\n}\n\n.filters-segment-container {\n  overflow-y: scroll;\n  padding-bottom: 32px;\n  max-height: calc(100% - 64px - 32px);\n}\n\n.back-filters-container {\n  background-color: rgba(0, 0, 0, 0.5);\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  z-index: 1099;\n}\n\n.divider {\n  margin: 16px;\n  border-top: 1px solid var(--color-outline);\n}\n\n.init-loader-container,\n.loader-container,\n.large-view-loader-container {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 100%;\n  background-color: var(--color-background);\n  .loader {\n    width: 48px;\n    height: 48px;\n    border: 5px solid var(--color-primary-container);\n    border-bottom-color: var(--color-on-primary-container);\n    border-radius: 50%;\n    display: inline-block;\n    box-sizing: border-box;\n    animation: rotation 1s linear infinite;\n  }\n\n  @keyframes rotation {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n}\n\n.content-container {\n  position: relative;\n  display: flex;\n  height: calc(100% - 64px);\n  background-color: var(--color-background);\n}\n\n.content-treks {\n  height: calc(100% - 64px);\n}\n\n.content-trek {\n  height: 100%;\n}\n\n.app-treks-list-container,\n.app-trek-detail-container,\n.large-view-app-treks-list-container,\n.large-view-app-trek-detail-container {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n}\n\n.app-map-container,\n.large-view-app-map-container {\n  width: 100%;\n  height: 100%;\n}\n\n.map-visibility-button-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  position: absolute;\n  bottom: 24px;\n  z-index: 4;\n  .map-visibility-button {\n    cursor: pointer;\n    user-select: none;\n    -webkit-tap-highlight-color: transparent;\n    flex-direction: row;\n    align-items: center;\n    justify-content: center;\n    border: none;\n    text-decoration: none;\n    padding: 16px;\n    background-color: var(--color-primary-container);\n    color: var(--color-on-primary-container);\n    box-shadow: var(--elevation-1);\n    border-radius: 12px;\n    height: 56px;\n    font-size: 16px;\n    width: unset;\n    &:hover {\n      box-shadow: var(--elevation-4);\n    }\n    span {\n      font-size: 24px;\n      margin-right: 8px;\n      color: var(--color-on-primary-container);\n    }\n  }\n}\n\n.init-loader-container,\n.loader-container {\n  width: 100%;\n}\n\n.app-treks-list-container,\n.app-trek-detail-container {\n  width: 100%;\n}\n\ngrw-treks-list {\n  max-height: calc(100vh - 64px);\n}\n\ngrw-trek-detail {\n  max-height: calc(100vh - 64px - 48px);\n}\n\n.app-map-container {\n  width: 100%;\n  position: absolute;\n}\n\n.large-view-loader-container {\n  width: 50%;\n}\n\n.large-view-app-treks-list-container,\n.large-view-app-trek-detail-container {\n  width: 50%;\n}\n\n.large-view-app-map-container {\n  position: relative;\n  width: 50%;\n}\n\n.filters-options-container {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  height: 64px;\n  margin: 0px 16px;\n  .filters-options-buttons-container {\n    display: flex;\n    .filter-option-button {\n      cursor: pointer;\n      user-select: none;\n      font-size: 14px;\n      font-weight: 500;\n      margin: 8px 0px 0px 8px;\n      padding: 8px 16px;\n      height: 32px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      box-shadow: var(--elevation-0);\n      border: none;\n      -webkit-tap-highlight-color: transparent;\n      line-height: 20px;\n      color: var(--color-primary);\n      background-color: transparent;\n    }\n  }\n}\n\n.segment-container {\n  margin-bottom: 64px;\n}\n\n.filter-container {\n  &:not(:last-child) {\n    &::after {\n      content: '';\n      display: block;\n      margin: 16px;\n      border-top: 1px solid var(--color-outline);\n    }\n  }\n}\n","import { Component, Host, h, Listen, State, Prop, Element, Watch, Event, EventEmitter } from '@stencil/core';\nimport { translate } from 'i18n/i18n';\nimport state, { onChange, reset } from 'store/store';\nimport { filters, handleFiltersAndSearch } from 'utils/utils';\n\n@Component({\n  tag: 'grw-app',\n  styleUrls: ['grw-app.scss'],\n  shadow: false,\n})\nexport class GrwApp {\n  @Element() appElement: HTMLElement;\n  @Event() resetFilter: EventEmitter;\n  @State() showTrek = false;\n  @State() showTreksMap = false;\n  @State() showTrekMap = false;\n  @State() showFilters = false;\n  @State() isLargeView = false;\n  @State() selectedSegment = 'selectedActivitiesFilters';\n  @State() currentTrekId: number;\n  @Prop() appWidth: string = '100%';\n  @Prop() appHeight: string = '100vh';\n  @Prop() api: string;\n  @Prop() languages = 'fr';\n  @Prop() inBbox: string;\n  @Prop() cities: string;\n  @Prop() districts: string;\n  @Prop() structures: string;\n  @Prop() themes: string;\n  @Prop() portals: string;\n  @Prop() routes: string;\n  @Prop() practices: string;\n  @Prop() center: string;\n  @Prop() zoom: number;\n  @Prop() nameLayer: string;\n  @Prop() urlLayer: string;\n  @Prop() attributionLayer: string;\n  @Prop() weather = false;\n\n  @Prop() colorPrimaryApp = '#6750a4';\n  @Prop() colorOnPrimary = '#ffffff';\n  @Prop() colorSurface = '#1c1b1f';\n  @Prop() colorOnSurface = '#49454e';\n  @Prop() colorSurfaceVariant = '#fef7ff';\n  @Prop() colorOnSurfaceVariant = '#1c1b1f';\n  @Prop() colorPrimaryContainer = '#eaddff';\n  @Prop() colorOnPrimaryContainer = '#21005e';\n  @Prop() colorSecondaryContainer = '#e8def8';\n  @Prop() colorOnSecondaryContainer = '#1d192b';\n  @Prop() colorBackground = '#fef7ff';\n  @Prop() colorSurfaceContainerHigh = '#ece6f0';\n  @Prop() colorSurfaceContainerLow = '#f7f2fa';\n  @Prop() fabBackgroundColor = '#eaddff';\n  @Prop() fabColor = '#21005d';\n\n  @Prop() colorTrekLine = '#6b0030';\n  @Prop() colorSensitiveArea = '#4974a5';\n  @Prop() colorPoiIcon = '#974c6e';\n  @Prop() useGradient = false;\n\n  largeViewSize = 1024;\n  handlePopStateBind: (event: any) => void = this.handlePopState.bind(this);\n\n  @Listen('trekCardPress', { target: 'window' })\n  onTrekCardPress(event: CustomEvent<number>) {\n    const parentTrek = state.parentTrekId ? state.parentTrekId : state.currentTrekSteps ? this.currentTrekId : null;\n    state.currentTrek = null;\n    this.currentTrekId = event.detail;\n    this.showTrek = true;\n    this.showTrekMap = false;\n    const url = new URL(window.location.toString());\n    url.searchParams.set('trek', this.currentTrekId.toString());\n    if (state.currentTrekSteps) {\n      url.searchParams.set('parentTrek', parentTrek.toString());\n    }\n    window.history.pushState({}, '', url);\n  }\n\n  @Listen('resize', { target: 'window' })\n  onWindowResize() {\n    this.handleView();\n  }\n\n  @Listen('centerOnMap', { target: 'window' })\n  onCenterOnMap() {\n    if (!this.isLargeView) {\n      this.showTrekMap = true;\n    }\n  }\n\n  @Watch('isLargeView')\n  watchPropHandler() {\n    window.dispatchEvent(new window.Event('resize'));\n  }\n\n  componentWillLoad() {\n    const url = new URL(window.location.toString());\n    const trekParam = url.searchParams.get('trek');\n    const parentTrekId = url.searchParams.get('parentTrek');\n    if (trekParam) {\n      window.history.replaceState({ isInitialHistoryWithTrek: true }, '', url);\n      state.parentTrekId = parentTrekId ? Number(parentTrekId) : null;\n      this.currentTrekId = Number(trekParam);\n      this.showTrek = !this.showTrek;\n    }\n  }\n\n  componentDidLoad() {\n    onChange('trekNetworkError', () => {\n      if (state.trekNetworkError) {\n        const urlRedirect = new URL(window.location.toString());\n        urlRedirect.searchParams.delete('trek');\n        urlRedirect.searchParams.delete('parentTrek');\n        window.history.replaceState({}, '', urlRedirect);\n        this.onTrekDetailsClose();\n      }\n    });\n    window.addEventListener('popstate', this.handlePopStateBind, false);\n    this.handleView();\n  }\n\n  onTrekDetailsClose() {\n    state.currentTrek = null;\n    state.currentTrekSteps = null;\n    state.parentTrekId = null;\n    this.currentTrekId = null;\n    this.showTrek = !this.showTrek;\n  }\n\n  handleView() {\n    this.isLargeView = this.appElement.getBoundingClientRect().width >= this.largeViewSize;\n    this.showTreksMap = this.isLargeView;\n    this.showTrekMap = this.isLargeView;\n  }\n\n  handleFilters() {\n    this.showFilters = !this.showFilters;\n  }\n\n  handleBackButton() {\n    if (window.history.state && window.history.state.isInitialHistoryWithTrek) {\n      this.onTrekDetailsClose();\n      const url = new URL(window.location.toString());\n      url.searchParams.delete('trek');\n      window.history.pushState({}, '', url);\n    } else {\n      window.history.back();\n    }\n  }\n\n  handlePopState() {\n    const url = new URL(window.location.toString());\n    const trekParam = Number(url.searchParams.get('trek'));\n    if (trekParam && this.currentTrekId !== trekParam) {\n      state.currentTrek = null;\n      this.currentTrekId = trekParam;\n      this.showTrek = true;\n    } else if (!trekParam) {\n      this.onTrekDetailsClose();\n    }\n  }\n\n  handleShowMap() {\n    if (this.currentTrekId) {\n      this.showTrekMap = !this.showTrekMap;\n    } else {\n      this.showTreksMap = !this.showTreksMap;\n    }\n  }\n\n  handleEraseFilters() {\n    filters.forEach(filter => {\n      state[filter.property].forEach(currentFilter => (currentFilter.selected = false));\n    });\n    state.selectedActivitiesFilters = 0;\n    state.selectedThemesFilters = 0;\n    state.selectedLocationFilters = 0;\n    state.currentTreks = handleFiltersAndSearch();\n    this.resetFilter.emit();\n  }\n\n  handleOkFilters() {\n    this.handleFilters();\n  }\n\n  disconnectedCallback() {\n    reset();\n    window.removeEventListener('popstate', this.handlePopStateBind);\n  }\n\n  handleSelectedSegment(selectedSegment) {\n    this.selectedSegment = selectedSegment;\n  }\n\n  handleSegment(segment) {\n    return filters.filter(filter => filter.segment === segment).some(filter => state[filter.property] && state[filter.property].length > 0);\n  }\n\n  render() {\n    return (\n      <Host\n        style={{\n          '--color-primary-app': this.colorPrimaryApp,\n          '--color-on-primary': this.colorOnPrimary,\n          '--color-surface': this.colorSurface,\n          '--color-on-surface': this.colorOnSurface,\n          '--color-surface-variant': this.colorSurfaceVariant,\n          '--color-on-surface-variant': this.colorOnSurfaceVariant,\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          '--color-surface-container-high': this.colorSurfaceContainerHigh,\n          '--color-surface-container-low': this.colorSurfaceContainerLow,\n          '--fab-background-color': this.fabBackgroundColor,\n          '--fab-color': this.fabColor,\n          '--app-width': this.appWidth,\n          '--app-height': this.appHeight,\n        }}\n      >\n        {!state.currentTreks && !state.currentTrek && (\n          <div class=\"init-loader-container\">\n            <span class=\"loader\"></span>\n          </div>\n        )}\n        {!this.showTrek && !state.treks && (\n          <grw-treks-provider\n            api={this.api}\n            languages={this.languages}\n            in-bbox={this.inBbox}\n            cities={this.cities}\n            districts={this.districts}\n            structures={this.structures}\n            themes={this.themes}\n            portals={this.portals}\n            routes={this.routes}\n            practices={this.practices}\n          ></grw-treks-provider>\n        )}\n        {this.showTrek && this.currentTrekId && !state.currentTrek && (\n          <grw-trek-provider api={this.api} languages={this.languages} trek-id={this.currentTrekId}></grw-trek-provider>\n        )}\n        {(state.currentTreks || state.currentTrek) && (\n          <div class=\"app-container\">\n            <div class={this.isLargeView ? 'large-view-header-container' : 'header-container'}>\n              {!this.showTrek ? (\n                <div class=\"handle-search-filters-container\">\n                  <div class=\"handle-search-container\">\n                    <grw-search></grw-search>\n                  </div>\n                  <div class=\"handle-filters-container\">\n                    <button onClick={() => this.handleFilters()} class=\"handle-filters-button\">\n                      <span class=\"material-symbols material-symbols-outlined margin-right-icon\">filter_list</span>\n                      {translate[state.language].filter}\n                    </button>\n                  </div>\n                </div>\n              ) : (\n                <div class=\"arrow-back-container\">\n                  <button onClick={() => this.handleBackButton()} class=\"arrow-back-icon\">\n                    <span class=\"material-symbols material-symbols-outlined\">arrow_back</span>\n                  </button>\n                </div>\n              )}\n            </div>\n\n            <div class={`content-container ${this.showTrek ? 'content-trek' : 'content-treks'}`}>\n              <div\n                class={this.isLargeView ? 'large-view-app-treks-list-container' : 'app-treks-list-container'}\n                style={{ display: this.showTrek ? 'none' : 'flex', position: this.showTrek ? 'absolute' : 'relative' }}\n              >\n                <grw-treks-list\n                  reset-store-on-disconnected=\"false\"\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-treks-list>\n              </div>\n              {this.showTrek && !state.currentTrek && (\n                <div class={this.isLargeView ? 'large-view-loader-container' : 'loader-container'}>\n                  <span class=\"loader\"></span>\n                </div>\n              )}\n              {state.currentTrek && (\n                <div class={this.isLargeView ? 'large-view-app-trek-detail-container' : 'app-trek-detail-container'}>\n                  <grw-trek-detail\n                    style={{\n                      visibility: (!this.showTrekMap && this.showTrek) || this.isLargeView ? 'visible' : 'hidden',\n                      zIndex: !this.showTrekMap ? '1' : '0',\n                    }}\n                    reset-store-on-disconnected=\"false\"\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-surface-container-low={this.colorSurfaceContainerLow}\n                    color-background={this.colorBackground}\n                    weather={this.weather}\n                    is-large-view={this.isLargeView}\n                  ></grw-trek-detail>\n                </div>\n              )}\n              <grw-map\n                reset-store-on-disconnected=\"false\"\n                class={this.isLargeView ? 'large-view-app-map-container' : 'app-map-container'}\n                style={{\n                  visibility: (this.showTreksMap && !this.showTrek) || (this.showTrekMap && this.showTrek) || this.isLargeView ? 'visible' : 'hidden',\n                  zIndex: this.showTrekMap ? '1' : '0',\n                }}\n                center={this.center}\n                zoom={this.zoom}\n                name-layer={this.nameLayer}\n                url-layer={this.urlLayer}\n                attribution-layer={this.attributionLayer}\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-background={this.colorBackground}\n                color-trek-line={this.colorTrekLine}\n                color-sensitive-area={this.colorSensitiveArea}\n                color-poi-icon={this.colorPoiIcon}\n                is-large-view={this.isLargeView}\n                use-gradient={this.useGradient}\n              ></grw-map>\n            </div>\n            {(!this.showTrek || (this.showTrek && state.currentTrek)) && (\n              <div class=\"map-visibility-button-container\">\n                <button onClick={() => this.handleShowMap()} class=\"map-visibility-button\" style={{ display: this.isLargeView ? 'none' : 'flex' }}>\n                  <span class=\"material-symbols material-symbols-outlined\">{this.showTrek ? (this.showTrekMap ? 'summarize' : 'map') : this.showTreksMap ? 'list' : 'map'}</span>\n                  {this.showTrek\n                    ? this.showTrekMap\n                      ? translate[state.language].showDetails\n                      : translate[state.language].showRoute\n                    : this.showTreksMap\n                    ? translate[state.language].showList\n                    : translate[state.language].showMap}\n                </button>\n              </div>\n            )}\n          </div>\n        )}\n        {!this.showTrek && this.showFilters && (\n          <div class=\"options-container\">\n            <div class=\"filters-container\">\n              <div class=\"filters-options-container\">\n                {state.treksWithinBounds && (\n                  <div class=\"current-treks-within-bounds-length\">{`${state.treksWithinBounds.length} ${\n                    state.treksWithinBounds.length > 1 ? translate[state.language].treks : translate[state.language].trek\n                  }`}</div>\n                )}\n                <div class=\"filters-options-buttons-container\">\n                  <button class=\"filter-option-button\" onClick={() => this.handleEraseFilters()}>\n                    {translate[state.language].erase}\n                  </button>\n                  <button class=\"filter-option-button\" onClick={() => this.handleOkFilters()}>\n                    {translate[state.language].ok}\n                  </button>\n                </div>\n              </div>\n              <div class=\"segmented-buttons-container\">\n                {this.handleSegment('selectedActivitiesFilters') && (\n                  <label\n                    class={`segment${this.selectedSegment === 'selectedActivitiesFilters' ? ' selected-segment' : ''}`}\n                    onClick={() => this.handleSelectedSegment('selectedActivitiesFilters')}\n                  >\n                    {translate[state.language].activities} {state.selectedActivitiesFilters !== 0 && `(${state.selectedActivitiesFilters})`}\n                  </label>\n                )}\n                {this.handleSegment('selectedThemesFilters') && (\n                  <label\n                    class={`segment${this.selectedSegment === 'selectedThemesFilters' ? ' selected-segment' : ''}`}\n                    onClick={() => this.handleSelectedSegment('selectedThemesFilters')}\n                  >\n                    {translate[state.language].themes} {state.selectedThemesFilters !== 0 && `(${state.selectedThemesFilters})`}\n                  </label>\n                )}\n                {this.handleSegment('selectedLocationFilters') && (\n                  <label\n                    class={`segment${this.selectedSegment === 'selectedLocationFilters' ? ' selected-segment' : ''}`}\n                    onClick={() => this.handleSelectedSegment('selectedLocationFilters')}\n                  >\n                    {translate[state.language].location} {state.selectedLocationFilters !== 0 && `(${state.selectedLocationFilters})`}\n                  </label>\n                )}\n              </div>\n              <div class=\"filters-segment-container\">\n                {this.selectedSegment === 'selectedActivitiesFilters' && (\n                  <div class=\"segment-container\">\n                    {state['practices'].length > 0 && (\n                      <div class=\"filter-container\">\n                        <grw-filter\n                          filterName={translate[state.language].practice}\n                          filterType=\"practices\"\n                          filterNameProperty=\"name\"\n                          segment=\"selectedActivitiesFilters\"\n                        ></grw-filter>\n                      </div>\n                    )}\n                    {state['difficulties'].length > 0 && (\n                      <div class=\"filter-container\">\n                        <grw-filter\n                          filterName={translate[state.language].difficulty}\n                          filterType=\"difficulties\"\n                          filterNameProperty=\"label\"\n                          segment=\"selectedActivitiesFilters\"\n                        ></grw-filter>\n                      </div>\n                    )}\n                    {state['durations'].length > 0 && (\n                      <div class=\"filter-container\">\n                        <grw-filter\n                          filterName={translate[state.language].duration}\n                          filterType=\"durations\"\n                          filterNameProperty=\"name\"\n                          segment=\"selectedActivitiesFilters\"\n                        ></grw-filter>\n                      </div>\n                    )}\n                    {state['lengths'].length > 0 && (\n                      <div class=\"filter-container\">\n                        <grw-filter filterName={translate[state.language].length} filterType=\"lengths\" filterNameProperty=\"name\" segment=\"selectedActivitiesFilters\"></grw-filter>\n                      </div>\n                    )}\n                    {state['elevations'].length > 0 && (\n                      <div class=\"filter-container\">\n                        <grw-filter\n                          filterName={translate[state.language].elevation}\n                          filterType=\"elevations\"\n                          filterNameProperty=\"name\"\n                          segment=\"selectedActivitiesFilters\"\n                        ></grw-filter>\n                      </div>\n                    )}\n                    {state['routes'].length > 0 && (\n                      <div class=\"filter-container\">\n                        <grw-filter filterName={translate[state.language].routes} filterType=\"routes\" filterNameProperty=\"route\" segment=\"selectedActivitiesFilters\"></grw-filter>\n                      </div>\n                    )}\n                    {state['accessibilities'].length > 0 && (\n                      <div class=\"filter-container\">\n                        <grw-filter\n                          filterName={translate[state.language].accessibility}\n                          filterType=\"accessibilities\"\n                          filterNameProperty=\"name\"\n                          segment=\"selectedActivitiesFilters\"\n                        ></grw-filter>\n                      </div>\n                    )}\n                    {state['labels'].length > 0 && (\n                      <div class=\"filter-container\">\n                        <grw-filter\n                          filterName={translate[state.language].activities}\n                          filterType=\"labels\"\n                          filterNameProperty=\"name\"\n                          segment=\"selectedActivitiesFilters\"\n                        ></grw-filter>\n                      </div>\n                    )}\n                  </div>\n                )}\n                {this.selectedSegment === 'selectedThemesFilters' && (\n                  <div class=\"segment-container\">\n                    {state['themes'].length > 0 && (\n                      <div class=\"filter-container\">\n                        <grw-filter filterName={translate[state.language].themes} filterType=\"themes\" filterNameProperty=\"label\" segment=\"selectedThemesFilters\"></grw-filter>\n                      </div>\n                    )}\n                  </div>\n                )}\n                {this.selectedSegment === 'selectedLocationFilters' && (\n                  <div class=\"segment-container\">\n                    {state['districts'].length > 0 && (\n                      <div class=\"filter-container\">\n                        <grw-filter\n                          filterName={translate[state.language].districts}\n                          filterType=\"districts\"\n                          filterNameProperty=\"name\"\n                          segment=\"selectedLocationFilters\"\n                        ></grw-filter>\n                      </div>\n                    )}\n                    {state['cities'].length > 0 && (\n                      <div class=\"filter-container\">\n                        <grw-filter filterName={translate[state.language].cities} filterType=\"cities\" filterNameProperty=\"name\" segment=\"selectedLocationFilters\"></grw-filter>\n                      </div>\n                    )}\n                  </div>\n                )}\n              </div>\n            </div>\n            <div onClick={() => this.handleFilters()} class=\"back-filters-container\"></div>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"kSAAA,IAAMA,UAAY,mhQ,ICULC,OAAM,W,0FAkDjBC,KAAAC,cAAgB,KAChBD,KAAAE,mBAA2CF,KAAKG,eAAeC,KAAKJ,M,cAhDhD,M,kBACI,M,iBACD,M,iBACA,M,iBACA,M,qBACI,4B,2CAEA,O,eACC,Q,kCAER,K,mUAcF,M,qBAEQ,U,oBACD,U,kBACF,U,oBACE,U,yBACK,U,2BACE,U,2BACA,U,6BACE,U,6BACA,U,+BACE,U,qBACV,U,+BACU,U,8BACD,U,wBACN,U,cACV,U,mBAEK,U,wBACK,U,kBACN,U,iBACD,K,CAMtBD,EAAAM,UAAAC,gBAAA,SAAgBC,GACd,IAAMC,EAAaC,MAAMC,aAAeD,MAAMC,aAAeD,MAAME,iBAAmBX,KAAKY,cAAgB,KAC3GH,MAAMI,YAAc,KACpBb,KAAKY,cAAgBL,EAAMO,OAC3Bd,KAAKe,SAAW,KAChBf,KAAKgB,YAAc,MACnB,IAAMC,EAAM,IAAIC,IAAIC,OAAOC,SAASC,YACpCJ,EAAIK,aAAaC,IAAI,OAAQvB,KAAKY,cAAcS,YAChD,GAAIZ,MAAME,iBAAkB,CAC1BM,EAAIK,aAAaC,IAAI,aAAcf,EAAWa,W,CAEhDF,OAAOK,QAAQC,UAAU,GAAI,GAAIR,E,EAInClB,EAAAM,UAAAqB,eAAA,WACE1B,KAAK2B,Y,EAIP5B,EAAAM,UAAAuB,cAAA,WACE,IAAK5B,KAAK6B,YAAa,CACrB7B,KAAKgB,YAAc,I,GAKvBjB,EAAAM,UAAAyB,iBAAA,WACEX,OAAOY,cAAc,IAAIZ,OAAOa,MAAM,U,EAGxCjC,EAAAM,UAAA4B,kBAAA,WACE,IAAMhB,EAAM,IAAIC,IAAIC,OAAOC,SAASC,YACpC,IAAMa,EAAYjB,EAAIK,aAAaa,IAAI,QACvC,IAAMzB,EAAeO,EAAIK,aAAaa,IAAI,cAC1C,GAAID,EAAW,CACbf,OAAOK,QAAQY,aAAa,CAAEC,yBAA0B,MAAQ,GAAIpB,GACpER,MAAMC,aAAeA,EAAe4B,OAAO5B,GAAgB,KAC3DV,KAAKY,cAAgB0B,OAAOJ,GAC5BlC,KAAKe,UAAYf,KAAKe,Q,GAI1BhB,EAAAM,UAAAkC,iBAAA,eAAAC,EAAAxC,KACEyC,SAAS,oBAAoB,WAC3B,GAAIhC,MAAMiC,iBAAkB,CAC1B,IAAMC,EAAc,IAAIzB,IAAIC,OAAOC,SAASC,YAC5CsB,EAAYrB,aAAasB,OAAO,QAChCD,EAAYrB,aAAasB,OAAO,cAChCzB,OAAOK,QAAQY,aAAa,GAAI,GAAIO,GACpCH,EAAKK,oB,KAGT1B,OAAO2B,iBAAiB,WAAY9C,KAAKE,mBAAoB,OAC7DF,KAAK2B,Y,EAGP5B,EAAAM,UAAAwC,mBAAA,WACEpC,MAAMI,YAAc,KACpBJ,MAAME,iBAAmB,KACzBF,MAAMC,aAAe,KACrBV,KAAKY,cAAgB,KACrBZ,KAAKe,UAAYf,KAAKe,Q,EAGxBhB,EAAAM,UAAAsB,WAAA,WACE3B,KAAK6B,YAAc7B,KAAK+C,WAAWC,wBAAwBC,OAASjD,KAAKC,cACzED,KAAKkD,aAAelD,KAAK6B,YACzB7B,KAAKgB,YAAchB,KAAK6B,W,EAG1B9B,EAAAM,UAAA8C,cAAA,WACEnD,KAAKoD,aAAepD,KAAKoD,W,EAG3BrD,EAAAM,UAAAgD,iBAAA,WACE,GAAIlC,OAAOK,QAAQf,OAASU,OAAOK,QAAQf,MAAM4B,yBAA0B,CACzErC,KAAK6C,qBACL,IAAM5B,EAAM,IAAIC,IAAIC,OAAOC,SAASC,YACpCJ,EAAIK,aAAasB,OAAO,QACxBzB,OAAOK,QAAQC,UAAU,GAAI,GAAIR,E,KAC5B,CACLE,OAAOK,QAAQ8B,M,GAInBvD,EAAAM,UAAAF,eAAA,WACE,IAAMc,EAAM,IAAIC,IAAIC,OAAOC,SAASC,YACpC,IAAMa,EAAYI,OAAOrB,EAAIK,aAAaa,IAAI,SAC9C,GAAID,GAAalC,KAAKY,gBAAkBsB,EAAW,CACjDzB,MAAMI,YAAc,KACpBb,KAAKY,cAAgBsB,EACrBlC,KAAKe,SAAW,I,MACX,IAAKmB,EAAW,CACrBlC,KAAK6C,oB,GAIT9C,EAAAM,UAAAkD,cAAA,WACE,GAAIvD,KAAKY,cAAe,CACtBZ,KAAKgB,aAAehB,KAAKgB,W,KACpB,CACLhB,KAAKkD,cAAgBlD,KAAKkD,Y,GAI9BnD,EAAAM,UAAAmD,mBAAA,WACEC,QAAQC,SAAQ,SAAAC,GACdlD,MAAMkD,EAAOC,UAAUF,SAAQ,SAAAG,GAAa,OAAKA,EAAcC,SAAW,KAA9B,G,IAE9CrD,MAAMsD,0BAA4B,EAClCtD,MAAMuD,sBAAwB,EAC9BvD,MAAMwD,wBAA0B,EAChCxD,MAAMyD,aAAeC,yBACrBnE,KAAKoE,YAAYC,M,EAGnBtE,EAAAM,UAAAiE,gBAAA,WACEtE,KAAKmD,e,EAGPpD,EAAAM,UAAAkE,qBAAA,WACEC,QACArD,OAAOsD,oBAAoB,WAAYzE,KAAKE,mB,EAG9CH,EAAAM,UAAAqE,sBAAA,SAAsBC,GACpB3E,KAAK2E,gBAAkBA,C,EAGzB5E,EAAAM,UAAAuE,cAAA,SAAcC,GACZ,OAAOpB,QAAQE,QAAO,SAAAA,GAAU,OAAAA,EAAOkB,UAAYA,CAAnB,IAA4BC,MAAK,SAAAnB,GAAU,OAAAlD,MAAMkD,EAAOC,WAAanD,MAAMkD,EAAOC,UAAUmB,OAAS,CAA1D,G,EAG7EhF,EAAAM,UAAA2E,OAAA,eAAAxC,EAAAxC,KACE,OACEiF,EAACC,KAAI,CACHC,MAAO,CACL,sBAAuBnF,KAAKoF,gBAC5B,qBAAsBpF,KAAKqF,eAC3B,kBAAmBrF,KAAKsF,aACxB,qBAAsBtF,KAAKuF,eAC3B,0BAA2BvF,KAAKwF,oBAChC,6BAA8BxF,KAAKyF,sBACnC,4BAA6BzF,KAAK0F,sBAClC,+BAAgC1F,KAAK2F,wBACrC,8BAA+B3F,KAAK4F,wBACpC,iCAAkC5F,KAAK6F,0BACvC,qBAAsB7F,KAAK8F,gBAC3B,iCAAkC9F,KAAK+F,0BACvC,gCAAiC/F,KAAKgG,yBACtC,yBAA0BhG,KAAKiG,mBAC/B,cAAejG,KAAKkG,SACpB,cAAelG,KAAKmG,SACpB,eAAgBnG,KAAKoG,aAGrB3F,MAAMyD,eAAiBzD,MAAMI,aAC7BoE,EAAA,OAAKoB,MAAM,yBACTpB,EAAA,QAAMoB,MAAM,aAGdrG,KAAKe,WAAaN,MAAM6F,OACxBrB,EAAA,sBACEsB,IAAKvG,KAAKuG,IACVC,UAAWxG,KAAKwG,UAAS,UAChBxG,KAAKyG,OACdC,OAAQ1G,KAAK0G,OACbC,UAAW3G,KAAK2G,UAChBC,WAAY5G,KAAK4G,WACjBC,OAAQ7G,KAAK6G,OACbC,QAAS9G,KAAK8G,QACdC,OAAQ/G,KAAK+G,OACbC,UAAWhH,KAAKgH,YAGnBhH,KAAKe,UAAYf,KAAKY,gBAAkBH,MAAMI,aAC7CoE,EAAA,qBAAmBsB,IAAKvG,KAAKuG,IAAKC,UAAWxG,KAAKwG,UAAS,UAAWxG,KAAKY,iBAE3EH,MAAMyD,cAAgBzD,MAAMI,cAC5BoE,EAAA,OAAKoB,MAAM,iBACTpB,EAAA,OAAKoB,MAAOrG,KAAK6B,YAAc,8BAAgC,qBAC3D7B,KAAKe,SACLkE,EAAA,OAAKoB,MAAM,mCACTpB,EAAA,OAAKoB,MAAM,2BACTpB,EAAA,oBAEFA,EAAA,OAAKoB,MAAM,4BACTpB,EAAA,UAAQgC,QAAS,WAAM,OAAAzE,EAAKW,eAAL,EAAsBkD,MAAM,yBACjDpB,EAAA,QAAMoB,MAAM,gEAA8D,eACzEa,UAAUzG,MAAM0G,UAAUxD,UAKjCsB,EAAA,OAAKoB,MAAM,wBACTpB,EAAA,UAAQgC,QAAS,WAAM,OAAAzE,EAAKa,kBAAL,EAAyBgD,MAAM,mBACpDpB,EAAA,QAAMoB,MAAM,8CAA4C,iBAMhEpB,EAAA,OAAKoB,MAAO,qBAAAe,OAAqBpH,KAAKe,SAAW,eAAiB,kBAChEkE,EAAA,OACEoB,MAAOrG,KAAK6B,YAAc,sCAAwC,2BAClEsD,MAAO,CAAEkC,QAASrH,KAAKe,SAAW,OAAS,OAAQuG,SAAUtH,KAAKe,SAAW,WAAa,aAE1FkE,EAAA,gDAC8B,QAAO,gBACpBjF,KAAK6B,YAAW,oBACZ7B,KAAKoF,gBAAe,mBACrBpF,KAAKuF,eAAc,4BACVvF,KAAK4F,wBAAuB,+BACzB5F,KAAK6F,0BAAyB,8BAC/B7F,KAAKgG,4BAGrChG,KAAKe,WAAaN,MAAMI,aACvBoE,EAAA,OAAKoB,MAAOrG,KAAK6B,YAAc,8BAAgC,oBAC7DoD,EAAA,QAAMoB,MAAM,YAGf5F,MAAMI,aACLoE,EAAA,OAAKoB,MAAOrG,KAAK6B,YAAc,uCAAyC,6BACtEoD,EAAA,mBACEE,MAAO,CACLoC,YAAcvH,KAAKgB,aAAehB,KAAKe,UAAaf,KAAK6B,YAAc,UAAY,SACnF2F,QAASxH,KAAKgB,YAAc,IAAM,KACnC,8BAC2B,QAAO,oBAChBhB,KAAKoF,gBAAe,mBACrBpF,KAAKuF,eAAc,0BACZvF,KAAK0F,sBAAqB,6BACvB1F,KAAK2F,wBAAuB,4BAC7B3F,KAAK4F,wBAAuB,+BACzB5F,KAAK6F,0BAAyB,8BAC/B7F,KAAKgG,yBAAwB,mBACxChG,KAAK8F,gBACvB2B,QAASzH,KAAKyH,QAAO,gBACNzH,KAAK6B,eAI1BoD,EAAA,yCAC8B,QAC5BoB,MAAOrG,KAAK6B,YAAc,+BAAiC,oBAC3DsD,MAAO,CACLoC,WAAavH,KAAKkD,eAAiBlD,KAAKe,UAAcf,KAAKgB,aAAehB,KAAKe,UAAaf,KAAK6B,YAAc,UAAY,SAC3H2F,OAAQxH,KAAKgB,YAAc,IAAM,KAEnC0G,OAAQ1H,KAAK0H,OACbC,KAAM3H,KAAK2H,KAAI,aACH3H,KAAK4H,UAAS,YACf5H,KAAK6H,SAAQ,oBACL7H,KAAK8H,iBAAgB,oBACrB9H,KAAKoF,gBAAe,mBACrBpF,KAAKuF,eAAc,0BACZvF,KAAK0F,sBAAqB,6BACvB1F,KAAK2F,wBAAuB,mBACtC3F,KAAK8F,gBAAe,kBACrB9F,KAAK+H,cAAa,uBACb/H,KAAKgI,mBAAkB,iBAC7BhI,KAAKiI,aAAY,gBAClBjI,KAAK6B,YAAW,eACjB7B,KAAKkI,iBAGpBlI,KAAKe,UAAaf,KAAKe,UAAYN,MAAMI,cAC1CoE,EAAA,OAAKoB,MAAM,mCACTpB,EAAA,UAAQgC,QAAS,WAAM,OAAAzE,EAAKe,eAAL,EAAsB8C,MAAM,wBAAwBlB,MAAO,CAAEkC,QAASrH,KAAK6B,YAAc,OAAS,SACvHoD,EAAA,QAAMoB,MAAM,8CAA8CrG,KAAKe,SAAYf,KAAKgB,YAAc,YAAc,MAAShB,KAAKkD,aAAe,OAAS,OACjJlD,KAAKe,SACFf,KAAKgB,YACHkG,UAAUzG,MAAM0G,UAAUgB,YAC1BjB,UAAUzG,MAAM0G,UAAUiB,UAC5BpI,KAAKkD,aACLgE,UAAUzG,MAAM0G,UAAUkB,SAC1BnB,UAAUzG,MAAM0G,UAAUmB,YAMtCtI,KAAKe,UAAYf,KAAKoD,aACtB6B,EAAA,OAAKoB,MAAM,qBACTpB,EAAA,OAAKoB,MAAM,qBACTpB,EAAA,OAAKoB,MAAM,6BACR5F,MAAM8H,mBACLtD,EAAA,OAAKoB,MAAM,sCAAsC,GAAAe,OAAG3G,MAAM8H,kBAAkBxD,OAAM,KAAAqC,OAChF3G,MAAM8H,kBAAkBxD,OAAS,EAAImC,UAAUzG,MAAM0G,UAAUb,MAAQY,UAAUzG,MAAM0G,UAAUqB,OAGrGvD,EAAA,OAAKoB,MAAM,qCACTpB,EAAA,UAAQoB,MAAM,uBAAuBY,QAAS,WAAM,OAAAzE,EAAKgB,oBAAL,GACjD0D,UAAUzG,MAAM0G,UAAUsB,OAE7BxD,EAAA,UAAQoB,MAAM,uBAAuBY,QAAS,WAAM,OAAAzE,EAAK8B,iBAAL,GACjD4C,UAAUzG,MAAM0G,UAAUuB,MAIjCzD,EAAA,OAAKoB,MAAM,+BACRrG,KAAK4E,cAAc,8BAClBK,EAAA,SACEoB,MAAO,UAAAe,OAAUpH,KAAK2E,kBAAoB,4BAA8B,oBAAsB,IAC9FsC,QAAS,WAAM,OAAAzE,EAAKkC,sBAAsB,4BAA3B,GAEdwC,UAAUzG,MAAM0G,UAAUwB,WAAU,IAAGlI,MAAMsD,4BAA8B,GAAK,IAAAqD,OAAI3G,MAAMsD,0BAAyB,MAGvH/D,KAAK4E,cAAc,0BAClBK,EAAA,SACEoB,MAAO,UAAAe,OAAUpH,KAAK2E,kBAAoB,wBAA0B,oBAAsB,IAC1FsC,QAAS,WAAM,OAAAzE,EAAKkC,sBAAsB,wBAA3B,GAEdwC,UAAUzG,MAAM0G,UAAUN,OAAM,IAAGpG,MAAMuD,wBAA0B,GAAK,IAAAoD,OAAI3G,MAAMuD,sBAAqB,MAG3GhE,KAAK4E,cAAc,4BAClBK,EAAA,SACEoB,MAAO,UAAAe,OAAUpH,KAAK2E,kBAAoB,0BAA4B,oBAAsB,IAC5FsC,QAAS,WAAM,OAAAzE,EAAKkC,sBAAsB,0BAA3B,GAEdwC,UAAUzG,MAAM0G,UAAU/F,SAAQ,IAAGX,MAAMwD,0BAA4B,GAAK,IAAAmD,OAAI3G,MAAMwD,wBAAuB,OAIpHgB,EAAA,OAAKoB,MAAM,6BACRrG,KAAK2E,kBAAoB,6BACxBM,EAAA,OAAKoB,MAAM,qBACR5F,MAAM,aAAasE,OAAS,GAC3BE,EAAA,OAAKoB,MAAM,oBACTpB,EAAA,cACE2D,WAAY1B,UAAUzG,MAAM0G,UAAU0B,SACtCC,WAAW,YACXC,mBAAmB,OACnBlE,QAAQ,+BAIbpE,MAAM,gBAAgBsE,OAAS,GAC9BE,EAAA,OAAKoB,MAAM,oBACTpB,EAAA,cACE2D,WAAY1B,UAAUzG,MAAM0G,UAAU6B,WACtCF,WAAW,eACXC,mBAAmB,QACnBlE,QAAQ,+BAIbpE,MAAM,aAAasE,OAAS,GAC3BE,EAAA,OAAKoB,MAAM,oBACTpB,EAAA,cACE2D,WAAY1B,UAAUzG,MAAM0G,UAAU8B,SACtCH,WAAW,YACXC,mBAAmB,OACnBlE,QAAQ,+BAIbpE,MAAM,WAAWsE,OAAS,GACzBE,EAAA,OAAKoB,MAAM,oBACTpB,EAAA,cAAY2D,WAAY1B,UAAUzG,MAAM0G,UAAUpC,OAAQ+D,WAAW,UAAUC,mBAAmB,OAAOlE,QAAQ,+BAGpHpE,MAAM,cAAcsE,OAAS,GAC5BE,EAAA,OAAKoB,MAAM,oBACTpB,EAAA,cACE2D,WAAY1B,UAAUzG,MAAM0G,UAAU+B,UACtCJ,WAAW,aACXC,mBAAmB,OACnBlE,QAAQ,+BAIbpE,MAAM,UAAUsE,OAAS,GACxBE,EAAA,OAAKoB,MAAM,oBACTpB,EAAA,cAAY2D,WAAY1B,UAAUzG,MAAM0G,UAAUJ,OAAQ+B,WAAW,SAASC,mBAAmB,QAAQlE,QAAQ,+BAGpHpE,MAAM,mBAAmBsE,OAAS,GACjCE,EAAA,OAAKoB,MAAM,oBACTpB,EAAA,cACE2D,WAAY1B,UAAUzG,MAAM0G,UAAUgC,cACtCL,WAAW,kBACXC,mBAAmB,OACnBlE,QAAQ,+BAIbpE,MAAM,UAAUsE,OAAS,GACxBE,EAAA,OAAKoB,MAAM,oBACTpB,EAAA,cACE2D,WAAY1B,UAAUzG,MAAM0G,UAAUwB,WACtCG,WAAW,SACXC,mBAAmB,OACnBlE,QAAQ,gCAMjB7E,KAAK2E,kBAAoB,yBACxBM,EAAA,OAAKoB,MAAM,qBACR5F,MAAM,UAAUsE,OAAS,GACxBE,EAAA,OAAKoB,MAAM,oBACTpB,EAAA,cAAY2D,WAAY1B,UAAUzG,MAAM0G,UAAUN,OAAQiC,WAAW,SAASC,mBAAmB,QAAQlE,QAAQ,4BAKxH7E,KAAK2E,kBAAoB,2BACxBM,EAAA,OAAKoB,MAAM,qBACR5F,MAAM,aAAasE,OAAS,GAC3BE,EAAA,OAAKoB,MAAM,oBACTpB,EAAA,cACE2D,WAAY1B,UAAUzG,MAAM0G,UAAUR,UACtCmC,WAAW,YACXC,mBAAmB,OACnBlE,QAAQ,6BAIbpE,MAAM,UAAUsE,OAAS,GACxBE,EAAA,OAAKoB,MAAM,oBACTpB,EAAA,cAAY2D,WAAY1B,UAAUzG,MAAM0G,UAAUT,OAAQoC,WAAW,SAASC,mBAAmB,OAAOlE,QAAQ,gCAO5HI,EAAA,OAAKgC,QAAS,WAAM,OAAAzE,EAAKW,eAAL,EAAsBkD,MAAM,4B,0QAvezC,G"}
+{"version":3,"names":["grwAppCss","GrwApp","this","largeViewSize","handlePopStateBind","handlePopState","bind","prototype","onTrekCardPress","event","parentTrek","state","parentTrekId","currentTrekSteps","currentTrekId","currentTrek","detail","showTrek","showTrekMap","url","URL","window","location","toString","searchParams","set","history","pushState","onParentTrekPress","delete","onWindowResize","handleView","onCenterOnMap","isLargeView","watchPropHandler","dispatchEvent","Event","componentWillLoad","trekParam","get","replaceState","isInitialHistoryWithTrek","Number","componentDidLoad","_this","onChange","trekNetworkError","urlRedirect","onTrekDetailsClose","addEventListener","appElement","getBoundingClientRect","width","showTreksMap","handleFilters","showFilters","handleBackButton","back","handleShowMap","disconnectedCallback","reset","removeEventListener","render","h","Host","style","colorPrimaryApp","colorOnPrimary","colorSurface","colorOnSurface","colorSurfaceVariant","colorOnSurfaceVariant","colorPrimaryContainer","colorOnPrimaryContainer","colorSecondaryContainer","colorOnSecondaryContainer","colorBackground","colorSurfaceContainerHigh","colorSurfaceContainerLow","fabBackgroundColor","fabColor","appWidth","appHeight","currentTreks","class","treks","api","languages","inBbox","cities","districts","structures","themes","portals","routes","practices","onClick","translate","language","filter","concat","display","position","visibility","zIndex","weather","center","zoom","nameLayer","urlLayer","attributionLayer","colorTrekLine","colorSensitiveArea","colorPoiIcon","useGradient","showDetails","showRoute","showList","showMap"],"sources":["src/components/grw-app/grw-app.scss?tag=grw-app","src/components/grw-app/grw-app.tsx"],"sourcesContent":[".material-symbols {\n  font-family: 'Material Symbols Outlined';\n}\n\n.material-symbols-outlined {\n  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48;\n}\n\ngrw-app {\n  display: block;\n  position: relative;\n  width: var(--app-width);\n  height: var(--app-height);\n  font-family: 'Roboto';\n  color: var(--color-on-surface);\n  overflow: hidden;\n  line-height: initial;\n  max-width: 100dvw;\n  max-height: 100dvh;\n}\n\n.app-container {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n}\n\n.header-container,\n.large-view-header-container {\n  background-color: var(--color-background);\n  box-shadow: var(--elevation-2);\n  height: 64px;\n  .arrow-back-container {\n    display: flex;\n    align-items: center;\n    height: 100%;\n    margin: 0px 16px;\n    .arrow-back-icon {\n      cursor: pointer;\n      -webkit-tap-highlight-color: transparent;\n      color: var(--color-on-surface);\n      border: none;\n      background-color: var(--color-background);\n      border-radius: 50%;\n      height: 48px;\n      width: 48px;\n      padding: 0px;\n      text-align: left;\n    }\n  }\n}\n\n.handle-search-filters-container {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin: 0px 16px;\n  height: 64px;\n\n  .handle-search-container {\n    width: calc(50% + 48px);\n    max-width: 220px;\n  }\n\n  .handle-filters-button {\n    margin-left: 16px;\n    user-select: none;\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: center;\n    border: none;\n    background-color: var(--color-background);\n    color: var(--color-on-surface);\n    padding: 12px 24px;\n    border-radius: 20px;\n    box-sizing: border-box;\n    position: relative;\n    gap: 8px;\n    white-space: nowrap;\n    line-height: 20px;\n    letter-spacing: 0.10000000149011612px;\n    font-size: 14px;\n    font-weight: 500;\n    box-shadow: var(--elevation-1);\n    transition: box-shadow 0.2s ease-in-out 0s;\n    span {\n      font-size: 18px;\n    }\n  }\n}\n\n.large-view-header-container {\n  .handle-search-filters-container {\n    justify-content: flex-start;\n  }\n}\n\n.init-loader-container,\n.loader-container,\n.large-view-loader-container {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 100%;\n  background-color: var(--color-background);\n  .loader {\n    width: 48px;\n    height: 48px;\n    border: 5px solid var(--color-primary-container);\n    border-bottom-color: var(--color-on-primary-container);\n    border-radius: 50%;\n    display: inline-block;\n    box-sizing: border-box;\n    animation: rotation 1s linear infinite;\n  }\n\n  @keyframes rotation {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n}\n\n.content-container {\n  position: relative;\n  display: flex;\n  height: calc(100% - 64px);\n  background-color: var(--color-background);\n}\n\n.content-treks {\n  height: calc(100% - 64px);\n}\n\n.content-trek {\n  height: 100%;\n}\n\n.app-treks-list-container,\n.app-trek-detail-container,\n.large-view-app-treks-list-container,\n.large-view-app-trek-detail-container {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n}\n\n.app-map-container,\n.large-view-app-map-container {\n  width: 100%;\n  height: 100%;\n}\n\n.map-visibility-button-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  position: absolute;\n  bottom: 24px;\n  z-index: 4;\n  .map-visibility-button {\n    cursor: pointer;\n    user-select: none;\n    -webkit-tap-highlight-color: transparent;\n    flex-direction: row;\n    align-items: center;\n    justify-content: center;\n    border: none;\n    text-decoration: none;\n    padding: 16px;\n    background-color: var(--color-primary-container);\n    color: var(--color-on-primary-container);\n    box-shadow: var(--elevation-1);\n    border-radius: 12px;\n    height: 56px;\n    font-size: 16px;\n    width: unset;\n    &:hover {\n      box-shadow: var(--elevation-4);\n    }\n    span {\n      font-size: 24px;\n      margin-right: 8px;\n      color: var(--color-on-primary-container);\n    }\n  }\n}\n\n.init-loader-container,\n.loader-container {\n  width: 100%;\n}\n\n.app-treks-list-container,\n.app-trek-detail-container {\n  width: 100%;\n}\n\ngrw-treks-list {\n  max-height: calc(100vh - 64px);\n}\n\ngrw-trek-detail {\n  max-height: calc(100vh - 64px - 48px);\n}\n\n.app-map-container {\n  width: 100%;\n  position: absolute;\n}\n\n.large-view-loader-container {\n  width: 50%;\n}\n\n.large-view-app-treks-list-container,\n.large-view-app-trek-detail-container {\n  width: 50%;\n}\n\n.large-view-app-map-container {\n  position: relative;\n  width: 50%;\n}\n","import { Component, Host, h, Listen, State, Prop, Element, Watch } from '@stencil/core';\nimport { translate } from 'i18n/i18n';\nimport state, { onChange, reset } from 'store/store';\n\n@Component({\n  tag: 'grw-app',\n  styleUrls: ['grw-app.scss'],\n  shadow: false,\n})\nexport class GrwApp {\n  @Element() appElement: HTMLElement;\n  @State() showTrek = false;\n  @State() showTreksMap = false;\n  @State() showTrekMap = false;\n  @State() showFilters = false;\n  @State() isLargeView = false;\n  @State() currentTrekId: number;\n  @Prop() appWidth: string = '100%';\n  @Prop() appHeight: string = '100vh';\n  @Prop() api: string;\n  @Prop() languages = 'fr';\n  @Prop() inBbox: string;\n  @Prop() cities: string;\n  @Prop() districts: string;\n  @Prop() structures: string;\n  @Prop() themes: string;\n  @Prop() portals: string;\n  @Prop() routes: string;\n  @Prop() practices: string;\n  @Prop() center: string;\n  @Prop() zoom: number;\n  @Prop() nameLayer: string;\n  @Prop() urlLayer: string;\n  @Prop() attributionLayer: string;\n  @Prop() weather = false;\n\n  @Prop() colorPrimaryApp = '#6750a4';\n  @Prop() colorOnPrimary = '#ffffff';\n  @Prop() colorSurface = '#1c1b1f';\n  @Prop() colorOnSurface = '#49454e';\n  @Prop() colorSurfaceVariant = '#fef7ff';\n  @Prop() colorOnSurfaceVariant = '#1c1b1f';\n  @Prop() colorPrimaryContainer = '#eaddff';\n  @Prop() colorOnPrimaryContainer = '#21005e';\n  @Prop() colorSecondaryContainer = '#e8def8';\n  @Prop() colorOnSecondaryContainer = '#1d192b';\n  @Prop() colorBackground = '#fef7ff';\n  @Prop() colorSurfaceContainerHigh = '#ece6f0';\n  @Prop() colorSurfaceContainerLow = '#f7f2fa';\n  @Prop() fabBackgroundColor = '#eaddff';\n  @Prop() fabColor = '#21005d';\n\n  @Prop() colorTrekLine = '#6b0030';\n  @Prop() colorSensitiveArea = '#4974a5';\n  @Prop() colorPoiIcon = '#974c6e';\n  @Prop() useGradient = false;\n\n  largeViewSize = 1024;\n  handlePopStateBind: (event: any) => void = this.handlePopState.bind(this);\n\n  @Listen('trekCardPress', { target: 'window' })\n  onTrekCardPress(event: CustomEvent<number>) {\n    const parentTrek = state.parentTrekId ? state.parentTrekId : state.currentTrekSteps ? this.currentTrekId : null;\n    state.currentTrek = null;\n    this.currentTrekId = event.detail;\n    this.showTrek = true;\n    this.showTrekMap = false;\n    const url = new URL(window.location.toString());\n    url.searchParams.set('trek', this.currentTrekId.toString());\n    if (state.currentTrekSteps) {\n      url.searchParams.set('parentTrek', parentTrek.toString());\n    }\n    window.history.pushState({}, '', url);\n  }\n\n  @Listen('parentTrekPress', { target: 'window' })\n  onParentTrekPress(event: CustomEvent<number>) {\n    state.currentTrek = null;\n    this.currentTrekId = event.detail;\n    this.showTrek = true;\n    this.showTrekMap = false;\n    const url = new URL(window.location.toString());\n    url.searchParams.set('trek', this.currentTrekId.toString());\n    url.searchParams.delete('parentTrek');\n    window.history.pushState({}, '', url);\n  }\n\n  @Listen('resize', { target: 'window' })\n  onWindowResize() {\n    this.handleView();\n  }\n\n  @Listen('centerOnMap', { target: 'window' })\n  onCenterOnMap() {\n    if (!this.isLargeView) {\n      this.showTrekMap = true;\n    }\n  }\n\n  @Watch('isLargeView')\n  watchPropHandler() {\n    window.dispatchEvent(new window.Event('resize'));\n  }\n\n  componentWillLoad() {\n    const url = new URL(window.location.toString());\n    const trekParam = url.searchParams.get('trek');\n    const parentTrekId = url.searchParams.get('parentTrek');\n    if (trekParam) {\n      window.history.replaceState({ isInitialHistoryWithTrek: true }, '', url);\n      state.parentTrekId = parentTrekId ? Number(parentTrekId) : null;\n      this.currentTrekId = Number(trekParam);\n      this.showTrek = !this.showTrek;\n    }\n  }\n\n  componentDidLoad() {\n    onChange('trekNetworkError', () => {\n      if (state.trekNetworkError) {\n        const urlRedirect = new URL(window.location.toString());\n        urlRedirect.searchParams.delete('trek');\n        urlRedirect.searchParams.delete('parentTrek');\n        window.history.replaceState({}, '', urlRedirect);\n        this.onTrekDetailsClose();\n      }\n    });\n    window.addEventListener('popstate', this.handlePopStateBind, false);\n    this.handleView();\n  }\n\n  onTrekDetailsClose() {\n    state.currentTrek = null;\n    state.currentTrekSteps = null;\n    state.parentTrekId = null;\n    this.currentTrekId = null;\n    this.showTrek = !this.showTrek;\n  }\n\n  handleView() {\n    this.isLargeView = this.appElement.getBoundingClientRect().width >= this.largeViewSize;\n    this.showTreksMap = this.isLargeView;\n    this.showTrekMap = this.isLargeView;\n  }\n\n  handleFilters() {\n    this.showFilters = !this.showFilters;\n  }\n\n  handleBackButton() {\n    if (window.history.state && window.history.state.isInitialHistoryWithTrek) {\n      this.onTrekDetailsClose();\n      const url = new URL(window.location.toString());\n      url.searchParams.delete('trek');\n      window.history.pushState({}, '', url);\n    } else {\n      window.history.back();\n    }\n  }\n\n  handlePopState() {\n    const url = new URL(window.location.toString());\n    const trekParam = Number(url.searchParams.get('trek'));\n    if (trekParam && this.currentTrekId !== trekParam) {\n      state.currentTrek = null;\n      this.currentTrekId = trekParam;\n      this.showTrek = true;\n    } else if (!trekParam) {\n      this.onTrekDetailsClose();\n    }\n  }\n\n  handleShowMap() {\n    if (this.currentTrekId) {\n      this.showTrekMap = !this.showTrekMap;\n    } else {\n      this.showTreksMap = !this.showTreksMap;\n    }\n  }\n\n  disconnectedCallback() {\n    reset();\n    window.removeEventListener('popstate', this.handlePopStateBind);\n  }\n\n  render() {\n    return (\n      <Host\n        style={{\n          '--color-primary-app': this.colorPrimaryApp,\n          '--color-on-primary': this.colorOnPrimary,\n          '--color-surface': this.colorSurface,\n          '--color-on-surface': this.colorOnSurface,\n          '--color-surface-variant': this.colorSurfaceVariant,\n          '--color-on-surface-variant': this.colorOnSurfaceVariant,\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          '--color-surface-container-high': this.colorSurfaceContainerHigh,\n          '--color-surface-container-low': this.colorSurfaceContainerLow,\n          '--fab-background-color': this.fabBackgroundColor,\n          '--fab-color': this.fabColor,\n          '--app-width': this.appWidth,\n          '--app-height': this.appHeight,\n        }}\n      >\n        {!state.currentTreks && !state.currentTrek && (\n          <div class=\"init-loader-container\">\n            <span class=\"loader\"></span>\n          </div>\n        )}\n        {!this.showTrek && !state.treks && (\n          <grw-treks-provider\n            api={this.api}\n            languages={this.languages}\n            in-bbox={this.inBbox}\n            cities={this.cities}\n            districts={this.districts}\n            structures={this.structures}\n            themes={this.themes}\n            portals={this.portals}\n            routes={this.routes}\n            practices={this.practices}\n          ></grw-treks-provider>\n        )}\n        {this.showTrek && this.currentTrekId && !state.currentTrek && (\n          <grw-trek-provider api={this.api} languages={this.languages} trek-id={this.currentTrekId}></grw-trek-provider>\n        )}\n        {(state.currentTreks || state.currentTrek) && (\n          <div class=\"app-container\">\n            <div class={this.isLargeView ? 'large-view-header-container' : 'header-container'}>\n              {!this.showTrek ? (\n                <div class=\"handle-search-filters-container\">\n                  <div class=\"handle-search-container\">\n                    <grw-search></grw-search>\n                  </div>\n                  <div class=\"handle-filters-container\">\n                    <button onClick={() => this.handleFilters()} class=\"handle-filters-button\">\n                      {/* @ts-ignore */}\n                      <span translate={false} class=\"material-symbols material-symbols-outlined margin-right-icon\">\n                        filter_list\n                      </span>\n                      {translate[state.language].filter}\n                    </button>\n                  </div>\n                </div>\n              ) : (\n                <div class=\"arrow-back-container\">\n                  <button onClick={() => this.handleBackButton()} class=\"arrow-back-icon\">\n                    {/* @ts-ignore */}\n                    <span translate={false} class=\"material-symbols material-symbols-outlined\">\n                      arrow_back\n                    </span>\n                  </button>\n                </div>\n              )}\n            </div>\n\n            <div class={`content-container ${this.showTrek ? 'content-trek' : 'content-treks'}`}>\n              <div\n                class={this.isLargeView ? 'large-view-app-treks-list-container' : 'app-treks-list-container'}\n                style={{ display: this.showTrek ? 'none' : 'flex', position: this.showTrek ? 'absolute' : 'relative' }}\n              >\n                <grw-treks-list\n                  reset-store-on-disconnected=\"false\"\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-treks-list>\n              </div>\n              {this.showTrek && !state.currentTrek && (\n                <div class={this.isLargeView ? 'large-view-loader-container' : 'loader-container'}>\n                  <span class=\"loader\"></span>\n                </div>\n              )}\n              {state.currentTrek && (\n                <div class={this.isLargeView ? 'large-view-app-trek-detail-container' : 'app-trek-detail-container'}>\n                  <grw-trek-detail\n                    style={{\n                      visibility: (!this.showTrekMap && this.showTrek) || this.isLargeView ? 'visible' : 'hidden',\n                      zIndex: !this.showTrekMap ? '1' : '0',\n                    }}\n                    reset-store-on-disconnected=\"false\"\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-surface-container-low={this.colorSurfaceContainerLow}\n                    color-background={this.colorBackground}\n                    weather={this.weather}\n                    is-large-view={this.isLargeView}\n                  ></grw-trek-detail>\n                </div>\n              )}\n              <grw-map\n                reset-store-on-disconnected=\"false\"\n                class={this.isLargeView ? 'large-view-app-map-container' : 'app-map-container'}\n                style={{\n                  visibility: (this.showTreksMap && !this.showTrek) || (this.showTrekMap && this.showTrek) || this.isLargeView ? 'visible' : 'hidden',\n                  zIndex: this.showTrekMap ? '1' : '0',\n                }}\n                center={this.center}\n                zoom={this.zoom}\n                name-layer={this.nameLayer}\n                url-layer={this.urlLayer}\n                attribution-layer={this.attributionLayer}\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-background={this.colorBackground}\n                color-trek-line={this.colorTrekLine}\n                color-sensitive-area={this.colorSensitiveArea}\n                color-poi-icon={this.colorPoiIcon}\n                is-large-view={this.isLargeView}\n                use-gradient={this.useGradient}\n              ></grw-map>\n            </div>\n            {(!this.showTrek || (this.showTrek && state.currentTrek)) && (\n              <div class=\"map-visibility-button-container\">\n                <button onClick={() => this.handleShowMap()} class=\"map-visibility-button\" style={{ display: this.isLargeView ? 'none' : 'flex' }}>\n                  {/* @ts-ignore */}\n                  <span translate={false} class=\"material-symbols material-symbols-outlined\">\n                    {this.showTrek ? (this.showTrekMap ? 'summarize' : 'map') : this.showTreksMap ? 'list' : 'map'}\n                  </span>\n                  {this.showTrek\n                    ? this.showTrekMap\n                      ? translate[state.language].showDetails\n                      : translate[state.language].showRoute\n                    : this.showTreksMap\n                    ? translate[state.language].showList\n                    : translate[state.language].showMap}\n                </button>\n              </div>\n            )}\n          </div>\n        )}\n        {!this.showTrek && this.showFilters && <grw-filters handleFilters={() => this.handleFilters()}></grw-filters>}\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/esm-es5/grw-filter.entry.js

@@ -0,0 +1,2 @@
+var __spreadArray=this&&this.__spreadArray||function(e,t,r){if(r||arguments.length===2)for(var n=0,i=t.length,o;n<i;n++){if(o||!(n in t)){if(!o)o=Array.prototype.slice.call(t,0,n);o[n]=t[n]}}return e.concat(o||Array.prototype.slice.call(t))};import{r as registerInstance,f as forceUpdate,h,H as Host}from"./index-3bfebaa2.js";import{s as state}from"./store-890ce35c.js";import{f as filters,h as handleFiltersAndSearch}from"./utils-ffae4b0b.js";var grwFilterCss='.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"}.filter-name{margin-left:8px;color:var(--color-on-surface);line-height:32px;letter-spacing:0px;font-size:24px;font-weight:400}.filter-button-container{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:16px}.filter-button-container .filter-button,.filter-button-container .selected-filter-button{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-size:14px;font-weight:500;margin:8px 0px 0px 8px;padding:8px 16px;height:32px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-webkit-box-shadow:var(--elevation-1);box-shadow:var(--elevation-1);border:1px solid var(--color-outline);border-radius:8px;-webkit-tap-highlight-color:transparent;line-height:20px;-webkit-transition:-webkit-box-shadow 0.2s ease-in-out 0s;transition:-webkit-box-shadow 0.2s ease-in-out 0s;transition:box-shadow 0.2s ease-in-out 0s;transition:box-shadow 0.2s ease-in-out 0s, -webkit-box-shadow 0.2s ease-in-out 0s;min-width:100px;white-space:nowrap}.filter-button-container .filter-button:hover,.filter-button-container .selected-filter-button:hover{-webkit-box-shadow:var(--elevation-2);box-shadow:var(--elevation-2)}.filter-button-container .filter-button{color:var(--color-on-surface-variant);background-color:transparent}.filter-button-container .selected-filter-button{color:var(--color-on-secondary-container);background-color:var(--color-secondary-container)}.filter-button-container .selected-filter-button span{font-size:24px;margin-right:8px;color:var(--color-on-secondary-container)}';var GrwFilter=function(){function e(e){registerInstance(this,e);this.filterType=undefined;this.filterName=undefined;this.filterNameProperty=undefined;this.segment=undefined}e.prototype.onResetFilter=function(){this.resetFilter()};e.prototype.handleFilter=function(e,t){var r=this;var n=__spreadArray([],state[this.filterType],true);n.find((function(e){return e.id===t.id})).selected=!n.find((function(e){return e.id===t.id})).selected;state[this.filterType]=n;state[this.segment]=0;filters.filter((function(e){return e.segment===r.segment})).forEach((function(e){state[r.segment]+=state[e.property].filter((function(e){return e.selected})).length}));state.currentTreks=handleFiltersAndSearch()};e.prototype.resetFilter=function(){forceUpdate(this.filterRef)};e.prototype.render=function(){var e=this;return h(Host,{ref:function(t){return e.filterRef=t}},h("div",{class:"filter-name display-large"},this.filterName),h("div",{class:"filter-button-container"},state[this.filterType].map((function(t){return h("button",{onClick:function(r){return e.handleFilter(r,t)},class:t.selected?"selected-filter-button":"filter-button"},t.selected&&h("span",{translate:false,class:"material-symbols material-symbols-outlined"},"check"),t[e.filterNameProperty])}))))};return e}();GrwFilter.style=grwFilterCss;export{GrwFilter as grw_filter};
+//# sourceMappingURL=grw-filter.entry.js.map

package/dist/esm-es5/grw-filter.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["grwFilterCss","GrwFilter","prototype","onResetFilter","this","resetFilter","handleFilter","_event","filterToHandle","_this","filterFromState","__spreadArray","state","filterType","find","currentFilter","id","selected","segment","filters","filter","forEach","property","length","currentTreks","handleFiltersAndSearch","forceUpdate","filterRef","render","h","Host","ref","el","class","filterName","map","onClick","event","translate","filterNameProperty"],"sources":["src/components/grw-filter/grw-filter.scss?tag=grw-filter&encapsulation=shadow","src/components/grw-filter/grw-filter.tsx"],"sourcesContent":[".material-symbols {\n  font-family: 'Material Symbols Outlined';\n}\n\n.material-symbols-outlined {\n  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48;\n}\n\n:host {\n  font-family: 'Roboto';\n}\n\n.filter-name {\n  margin-left: 8px;\n  color: var(--color-on-surface);\n  line-height: 32px;\n  letter-spacing: 0px;\n  font-size: 24px;\n  font-weight: 400;\n}\n.filter-button-container {\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  margin-right: 16px;\n  .filter-button,\n  .selected-filter-button {\n    cursor: pointer;\n    user-select: none;\n    font-size: 14px;\n    font-weight: 500;\n    margin: 8px 0px 0px 8px;\n    padding: 8px 16px;\n    height: 32px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-shadow: var(--elevation-1);\n    border: 1px solid var(--color-outline);\n    border-radius: 8px;\n    -webkit-tap-highlight-color: transparent;\n    line-height: 20px;\n    transition: box-shadow 0.2s ease-in-out 0s;\n    min-width: 100px;\n    white-space: nowrap;\n    &:hover {\n      box-shadow: var(--elevation-2);\n    }\n  }\n  .filter-button {\n    color: var(--color-on-surface-variant);\n    background-color: transparent;\n  }\n  .selected-filter-button {\n    color: var(--color-on-secondary-container);\n    background-color: var(--color-secondary-container);\n    span {\n      font-size: 24px;\n      margin-right: 8px;\n      color: var(--color-on-secondary-container);\n    }\n  }\n}\n","import { Component, Host, h, Prop, Listen, forceUpdate } from '@stencil/core';\nimport state from 'store/store';\nimport { filters, handleFiltersAndSearch } from 'utils/utils';\n\n@Component({\n  tag: 'grw-filter',\n  styleUrl: 'grw-filter.scss',\n  shadow: true,\n})\nexport class GrwFilter {\n  filterRef: HTMLElement;\n  @Prop() filterType: string;\n  @Prop() filterName: string;\n  @Prop() filterNameProperty: string;\n  @Prop() segment: string;\n  @Listen('resetFilter', { target: 'window' })\n  onResetFilter() {\n    this.resetFilter();\n  }\n\n  handleFilter(_event: MouseEvent, filterToHandle: any) {\n    const filterFromState = [...state[this.filterType]];\n    filterFromState.find(currentFilter => currentFilter.id === filterToHandle.id).selected = !filterFromState.find(currentFilter => currentFilter.id === filterToHandle.id)\n      .selected;\n    state[this.filterType] = filterFromState;\n\n    state[this.segment] = 0;\n    filters\n      .filter(filter => filter.segment === this.segment)\n      .forEach(filter => {\n        state[this.segment] += state[filter.property].filter(filter => filter.selected).length;\n      });\n\n    state.currentTreks = handleFiltersAndSearch();\n  }\n\n  resetFilter() {\n    forceUpdate(this.filterRef);\n  }\n\n  render() {\n    return (\n      <Host ref={el => (this.filterRef = el)}>\n        <div class=\"filter-name display-large\">{this.filterName}</div>\n        <div class=\"filter-button-container\">\n          {state[this.filterType].map(currentFilter => (\n            <button onClick={event => this.handleFilter(event, currentFilter)} class={currentFilter.selected ? 'selected-filter-button' : 'filter-button'}>\n              {/* @ts-ignore */}\n              {currentFilter.selected && <span translate={false} class=\"material-symbols material-symbols-outlined\">check</span>}\n              {currentFilter[this.filterNameProperty]}\n            </button>\n          ))}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"4bAAA,IAAMA,aAAe,kzD,ICSRC,UAAS,W,oJAOpBA,EAAAC,UAAAC,cAAA,WACEC,KAAKC,a,EAGPJ,EAAAC,UAAAI,aAAA,SAAaC,EAAoBC,GAAjC,IAAAC,EAAAL,KACE,IAAMM,EAAeC,cAAA,GAAOC,MAAMR,KAAKS,YAAW,MAClDH,EAAgBI,MAAK,SAAAC,GAAiB,OAAAA,EAAcC,KAAOR,EAAeQ,EAApC,IAAwCC,UAAYP,EAAgBI,MAAK,SAAAC,GAAiB,OAAAA,EAAcC,KAAOR,EAAeQ,EAApC,IAC7HC,SACHL,MAAMR,KAAKS,YAAcH,EAEzBE,MAAMR,KAAKc,SAAW,EACtBC,QACGC,QAAO,SAAAA,GAAU,OAAAA,EAAOF,UAAYT,EAAKS,OAAxB,IACjBG,SAAQ,SAAAD,GACPR,MAAMH,EAAKS,UAAYN,MAAMQ,EAAOE,UAAUF,QAAO,SAAAA,GAAU,OAAAA,EAAOH,QAAP,IAAiBM,M,IAGpFX,MAAMY,aAAeC,wB,EAGvBxB,EAAAC,UAAAG,YAAA,WACEqB,YAAYtB,KAAKuB,U,EAGnB1B,EAAAC,UAAA0B,OAAA,eAAAnB,EAAAL,KACE,OACEyB,EAACC,KAAI,CAACC,IAAK,SAAAC,GAAE,OAAKvB,EAAKkB,UAAYK,CAAtB,GACXH,EAAA,OAAKI,MAAM,6BAA6B7B,KAAK8B,YAC7CL,EAAA,OAAKI,MAAM,2BACRrB,MAAMR,KAAKS,YAAYsB,KAAI,SAAApB,GAAa,OACvCc,EAAA,UAAQO,QAAS,SAAAC,GAAS,OAAA5B,EAAKH,aAAa+B,EAAOtB,EAAzB,EAAyCkB,MAAOlB,EAAcE,SAAW,yBAA2B,iBAE3HF,EAAcE,UAAYY,EAAA,QAAMS,UAAW,MAAOL,MAAM,8CAA4C,SACpGlB,EAAcN,EAAK8B,oBAJiB,K,WApC7B,G"}