mealz-components 2.2.0 → 2.3.0

package/dist/store-locator/store-locator.css

@@ -1 +1 @@
-.mealz-store-locator{display:block;height:100%}.mealz-store-locator .mealz-wrapper{height:100%;display:flex}.mealz-store-locator .mealz-pos-selection{display:flex;width:320px;padding:40px var(--spacing-padding-16-px, 16px);flex-direction:column;align-items:stretch;gap:var(--spacing-padding-16-px, 16px);flex-shrink:0;background:var(--mealz-ds-color-neutral-white, #FFFFFF);box-shadow:2px 0 16px #00000026;z-index:1}.mealz-store-locator .mealz-pos-selection #mealz-store-locator-form{display:flex;flex-direction:column;gap:8px}.mealz-store-locator .mealz-pos-selection .mealz-title{color:var(--mealz-ds-color-neutral-black, #0F191F);font-size:28px;font-weight:700;line-height:120%}.mealz-store-locator .mealz-pos-selection .mealz-title .mealz-back-button{display:none}.mealz-store-locator .mealz-pos-selection .mealz-address-input-container{display:flex;gap:8px;height:40px;position:relative}.mealz-store-locator .mealz-pos-selection .mealz-address-input-container .mealz-address-input{padding-left:8px}.mealz-store-locator .mealz-pos-selection .mealz-address-input-container .mealz-locate-button+.mealz-address-input{padding-left:40px}.mealz-store-locator .mealz-pos-selection .mealz-address-input-container .mealz-address-input{flex:1;border:1px solid var(--mealz-ds-color-neutral-200, #D9DDE1);border-radius:4px;font-size:14px}.mealz-store-locator .mealz-pos-selection .mealz-address-input-container .mealz-locate-button{position:absolute;background:unset;border:unset;padding:0;top:8px;left:8px;width:24px;height:24px}.mealz-store-locator .mealz-pos-selection .mealz-address-input-container .mealz-locate-button img{cursor:pointer;width:24px;height:24px}.mealz-store-locator .mealz-pos-selection #mealz-pos-list{flex-direction:column;align-items:flex-start;gap:var(--spacing-padding-12-px, 12px);align-self:stretch;overflow:auto}.mealz-store-locator .mealz-pos-list__visible,.mealz-store-locator .mealz-pos-list__hidden{display:flex}.mealz-store-locator .mealz-pos-selection .mealz-pos-loader{flex:1;width:100%;display:flex;justify-content:center;align-items:center}.mealz-store-locator .mealz-pos-selection .mealz-pos-loader .mealz-ds-loader{margin:16px;display:flex;width:72px;height:72px;background-position-x:36px;background-size:36px 36px}.mealz-store-locator .mealz-pos-selection .mealz-no-pos-found{margin-bottom:16px;width:100%;flex:1;display:flex;justify-content:center;align-items:center;flex-direction:column}.mealz-store-locator .mealz-ds-dropdown:after{right:12px;top:17px}.mealz-store-locator .mealz-pos-item{display:flex;flex-direction:column;padding:8px;align-items:flex-start;gap:16px;align-self:stretch;border-radius:8px;border:1px solid var(--mealz-ds-color-neutral-200, #D9DDE1)}.mealz-store-locator .mealz-pos-item .mealz-top{display:flex;align-items:flex-start;gap:8px;align-self:stretch}.mealz-store-locator .mealz-pos-item .mealz-top img{width:40px;height:40px;flex-shrink:0}.mealz-store-locator .mealz-pos-item .mealz-top .mealz-name{color:var(--mealz-ds-color-neutral-black, #0F191F);font-size:14px;font-weight:700;line-height:150%}.mealz-store-locator .mealz-pos-item .mealz-top .mealz-address{color:var(--mealz-ds-color-neutral-500, #8C96A2);font-size:12px;font-weight:600;line-height:150%}.mealz-store-locator .mealz-pos-item .mealz-bottom{display:flex;justify-content:flex-end;width:100%}.mealz-store-locator .mealz-pos-item .mealz-bottom .mealz-select-pos-button{border-radius:1000px}.mealz-store-locator #mealz-mobile-buttons-wrapper{display:none}.mealz-store-locator #mealz-map{width:100%;min-height:100%;z-index:0;position:absolute;top:0}.mealz-store-locator #mealz-map .mealz-pos-item{border:none;padding:0}.mealz-store-locator #mealz-map .leaflet-marker-pane .mealz-marker-icon{border-radius:50%;overflow:hidden;object-fit:cover;border:4px solid var(--mealz-ds-color-neutral-white, #FFFFFF);box-sizing:content-box}@media (max-width: 768px){.mealz-store-locator .mealz-wrapper{position:absolute;flex-direction:column;top:0;left:0;right:0;bottom:0}.mealz-store-locator .mealz-pos-selection{width:100%;padding:0;gap:0}.mealz-store-locator .mealz-pos-selection #mealz-store-locator-form{padding:24px 16px}.mealz-store-locator .mealz-pos-selection .mealz-title{position:relative;min-height:56px;font-size:16px;display:flex;align-items:center;justify-content:center;border-bottom:solid 1px var(--mealz-ds-color-neutral-200, #D9DDE1)}.mealz-store-locator .mealz-pos-selection .mealz-title .mealz-back-button{position:absolute;display:flex;transform:rotate(180deg);top:12px;left:8px;width:32px;height:32px}.mealz-store-locator .mealz-pos-selection .mealz-address-input-container input{width:calc(100% - 44px)}.mealz-store-locator .mealz-pos-selection .mealz-address-input-container button{width:36px}.mealz-store-locator .mealz-pos-selection .mealz-suppliers-selection-container{width:calc(100% - 32px);margin:8px 16px 24px}.mealz-store-locator .mealz-pos-selection #mealz-pos-list{padding:0 16px 12px;align-items:center}.mealz-store-locator .mealz-pos-list__visible{display:flex}.mealz-store-locator .mealz-pos-list__hidden{display:none}.mealz-store-locator .mealz-pos-selection__height{height:100%}.mealz-store-locator .mealz-pos-selection .mealz-pos-loader{position:absolute;height:100%}.mealz-store-locator .mealz-suppliers-list-wrapper__not-mobile{display:none}.mealz-store-locator .mealz-suppliers-list-wrapper__mobile{display:block}.mealz-store-locator .mealz-suppliers-list-wrapper__mobile .mealz-suppliers-list{position:relative;z-index:1;width:calc(100% - 32px);margin:-16px 16px 8px}.mealz-store-locator .mealz-suppliers-list-wrapper__mobile .mealz-suppliers-list .mealz-suppliers-list__supplier{padding:8px 16px}.mealz-store-locator #mealz-mobile-buttons-wrapper{width:100%;display:flex;justify-content:center;padding:12px 0}.mealz-store-locator #mealz-mobile-buttons-wrapper button{border-radius:1000px}.mealz-store-locator .mealz-mobile-buttons-wrapper__see-list{z-index:1;bottom:40px;position:absolute}.mealz-store-locator .mealz-mobile-buttons-wrapper__see-map{margin-top:auto}.mealz-store-locator #mealz-map{min-height:unset;position:absolute;bottom:0;top:0}}
+.mealz-store-locator{height:100%;display:flex}.mealz-store-locator .mealz-store-locator__pos-selection{display:flex;width:320px;padding:40px var(--spacing-padding-16-px, 16px);flex-direction:column;align-items:stretch;gap:var(--spacing-padding-16-px, 16px);flex-shrink:0;background:var(--mealz-ds-color-neutral-white, #ffffff);box-shadow:2px 0 16px #00000026;z-index:1}.mealz-store-locator .mealz-store-locator__pos-selection .mealz-store-locator__title{color:var(--mealz-ds-color-neutral-black, #0f191f);font-size:28px;font-weight:700;line-height:120%}.mealz-store-locator .mealz-store-locator__pos-selection .mealz-store-locator__go-back-button{border-radius:100%;height:40px;width:40px;display:flex;justify-content:center;align-items:center}.mealz-store-locator .mealz-store-locator__pos-selection .mealz-store-locator__go-back-button img{width:15px;height:15px}.mealz-store-locator .mealz-store-locator__pos-selection #mealz-store-locator__store-locator-form{display:flex;flex-direction:column;gap:8px}.mealz-store-locator .mealz-store-locator__pos-selection #mealz-store-locator__store-locator-form .mealz-store-locator__address-input-container{display:flex;gap:8px;height:40px;position:relative}.mealz-store-locator .mealz-store-locator__pos-selection #mealz-store-locator__store-locator-form .mealz-store-locator__address-input-container .mealz-store-locator__locate-button{position:absolute;background:unset;border:unset;padding:0;top:8px;left:8px;width:24px;height:24px}.mealz-store-locator .mealz-store-locator__pos-selection #mealz-store-locator__store-locator-form .mealz-store-locator__address-input-container .mealz-store-locator__locate-button .mealz-store-locator__geolocation-icon{cursor:pointer;width:24px;height:24px}.mealz-store-locator .mealz-store-locator__pos-selection #mealz-store-locator__store-locator-form .mealz-store-locator__address-input-container .mealz-store-locator__locate-button+.mealz-store-locator__address-input{padding-left:40px}.mealz-store-locator .mealz-store-locator__pos-selection #mealz-store-locator__store-locator-form .mealz-store-locator__address-input-container .mealz-store-locator__address-input{padding-left:8px;flex:1;border:1px solid var(--mealz-ds-color-neutral-200, #D9DDE1);border-radius:4px;font-size:14px}.mealz-store-locator .mealz-store-locator__pos-selection #mealz-store-locator__store-locator-form .mealz-store-locator__select-supplier{display:flex}.mealz-store-locator .mealz-store-locator__pos-selection #mealz-store-locator__store-locator-form .mealz-store-locator__select-supplier .mealz-store-locator__select-supplier-select{flex:1;padding:10px;max-width:initial}.mealz-store-locator .mealz-store-locator__pos-selection .mealz-store-locator__pos-loader{flex:1;width:100%;display:flex;justify-content:center;align-items:center}.mealz-store-locator .mealz-store-locator__pos-selection .mealz-store-locator__pos-loader .mealz-ds-loader{margin:16px;display:flex;width:72px;height:72px;background-position-x:36px;background-size:36px 36px}.mealz-store-locator .mealz-store-locator__pos-selection #mealz-store-locator__pos-list{flex-direction:column;align-items:flex-start;gap:var(--spacing-padding-12-px, 12px);align-self:stretch;overflow:auto}.mealz-store-locator .mealz-store-locator__pos-selection .mealz-store-locator__pos-list__visible,.mealz-store-locator .mealz-store-locator__pos-selection .mealz-store-locator__pos-list__hidden{display:flex}.mealz-store-locator .mealz-store-locator__pos-selection .mealz-store-locator__no-pos-found{margin-bottom:16px;width:100%;flex:1;display:flex;justify-content:center;align-items:center;flex-direction:column}.mealz-store-locator #mealz-store-locator__view-swapper-button{display:none}.mealz-store-locator .mealz-store-locator__pos-item{display:flex;flex-direction:column;padding:8px;align-items:flex-start;gap:16px;align-self:stretch;border-radius:8px;border:1px solid var(--mealz-ds-color-neutral-200, #eff1f3)}.mealz-store-locator .mealz-store-locator__pos-item .mealz-store-locator__pos-data{display:flex;align-items:flex-start;gap:8px;align-self:stretch}.mealz-store-locator .mealz-store-locator__pos-item .mealz-store-locator__pos-data .mealz-store-locator__pos-picture{width:40px;height:40px;flex-shrink:0}.mealz-store-locator .mealz-store-locator__pos-item .mealz-store-locator__pos-data .mealz-store-locator__pos-name{color:var(--mealz-ds-color-neutral-black, #0f191f);font-size:14px;font-weight:700;line-height:150%}.mealz-store-locator .mealz-store-locator__pos-item .mealz-store-locator__pos-data .mealz-store-locator__pos-address{color:var(--mealz-ds-color-neutral-500, #8c96a2);font-size:12px;font-weight:600;line-height:150%}.mealz-store-locator .mealz-store-locator__pos-item .mealz-store-locator__pos-cta{display:flex;justify-content:flex-end;width:100%}.mealz-store-locator .mealz-store-locator__pos-item .mealz-store-locator__pos-cta .mealz-select-pos-button{border-radius:1000px}.mealz-store-locator #mealz-store-locator__map{z-index:0;flex:1 1 0;min-height:400px;width:100%}.mealz-store-locator #mealz-store-locator__map .mealz-store-locator__pos-item{border:none;padding:0}.mealz-store-locator #mealz-store-locator__map .leaflet-marker-pane .mealz-marker-icon{border-radius:50%;overflow:hidden;object-fit:cover;border:4px solid var(--mealz-ds-color-neutral-white, #FFFFFF);box-sizing:content-box}@media (max-width: 768px){.mealz-store-locator{position:absolute;flex-direction:column;top:0;right:0;bottom:0;left:0}.mealz-store-locator .mealz-store-locator__pos-selection{width:100%;padding:0;gap:0}.mealz-store-locator .mealz-store-locator__pos-selection .mealz-store-locator__go-back-button{position:absolute;z-index:1;top:12px;left:8px;width:32px;height:32px}.mealz-store-locator .mealz-store-locator__pos-selection .mealz-store-locator__title{position:relative;min-height:56px;font-size:16px;display:flex;align-items:center;justify-content:center;border-bottom:solid 1px var(--mealz-ds-color-neutral-200, #eff1f3)}.mealz-store-locator .mealz-store-locator__pos-selection #mealz-store-locator__store-locator-form{padding:24px 16px}.mealz-store-locator .mealz-store-locator__pos-selection #mealz-store-locator__store-locator-form .mealz-store-locator__address-input-container .mealz-store-locator__address-input{width:calc(100% - 44px)}.mealz-store-locator .mealz-store-locator__pos-selection #mealz-store-locator__store-locator-form .mealz-store-locator__address-input-container .mealz-store-locator__search-address-button{width:36px}.mealz-store-locator .mealz-store-locator__pos-selection #mealz-store-locator__pos-list{padding:0 16px 12px;align-items:center}.mealz-store-locator .mealz-store-locator__pos-selection #mealz-store-locator__pos-list.mealz-store-locator__pos-list__visible{display:flex}.mealz-store-locator .mealz-store-locator__pos-selection #mealz-store-locator__pos-list.mealz-store-locator__pos-list__hidden{display:none}.mealz-store-locator .mealz-store-locator__pos-selection .mealz-store-locator__pos-loader{position:absolute;height:100%}.mealz-store-locator .mealz-store-locator__pos-selection.mealz-store-locator__pos-selection__height{height:100%}.mealz-store-locator #mealz-store-locator__view-swapper-button{width:100%;display:flex;justify-content:center;padding:12px 0}.mealz-store-locator #mealz-store-locator__view-swapper-button.mealz-store-locator__see-list-button{z-index:1;bottom:40px;position:absolute}.mealz-store-locator #mealz-store-locator__view-swapper-button.mealz-store-locator__see-map-button{box-shadow:-2px 0 18px #00000026;margin-top:auto}}

package/dist/store-locator/store-locator.min.js

@@ -0,0 +1,97 @@
+import{N as u,k as a}from"../assets/no-shadow-element-Dz9jgDtr.js";import{t as m}from"../assets/custom-element-BhZVzxrc.js";import{n as c}from"../assets/property-Bx8Yvr4_.js";import{r as _}from"../assets/state-C5zM4-Pq.js";import{e as p}from"../assets/query-BApjzB0v.js";import{a as h}from"../assets/mealz-sdk-E_fNZM-c.js";class g{get extId(){return this.attributes["ext-id"]}}var b=Object.defineProperty,f=Object.getOwnPropertyDescriptor,l=(t,e,s,i)=>{for(var o=i>1?void 0:i?f(e,s):e,n=t.length-1,d;n>=0;n--)(d=t[n])&&(o=(i?d(e,s,o):d(o))||o);return i&&o&&b(e,s,o),o};let r=class extends u{constructor(){var t,e,s,i,o,n;super(),this.selectedRadius=50,this.getByAddress=(e=(t=h)==null?void 0:t.pos)==null?void 0:e.getByAddress,this.getByCoordinates=(i=(s=h)==null?void 0:s.pos)==null?void 0:i.getByCoordinates,this.getAffiliateSuppliers=(n=(o=h)==null?void 0:o.supplier)==null?void 0:n.getAffiliateSuppliers,this._posList=[],this._suppliers=[],this._markers=[],this._searchingPos=!1,this._searchSubmitted=!1,this._selectedSuppliers=[],this._showPosList=!1,this._posSelected=!1,this.subscriptions=[],this.styleURL=new URL("/store-locator.css",import.meta.url)}get show(){return this._show}set show(t){this._show=t,this._show&&(this._posSelected=!1,this.initialSearch(),this._map&&this.ensureMapSize())}set geolocationCoordinates(t){var e,s;this._geolocationCoordinates=t,(e=t==null?void 0:t.coords)!=null&&e.latitude&&((s=t==null?void 0:t.coords)!=null&&s.longitude)&&this.setGeolocation()}get geolocationCoordinates(){return this._geolocationCoordinates}_nameOfStore(t){return`${t.supplier.attributes.name} - ${t.attributes.name}`}connectedCallback(){super.connectedCallback(),this.initLeaflet(),this.initEvents(),this.initResizeObserver()}disconnectedCallback(){this.subscriptions.forEach(t=>t.unsubscribe()),this._resizeObserver&&this._resizeObserver.disconnect(),super.disconnectedCallback(),this._leafletCss.remove(),this._miamDs.remove(),this._leafletJs.remove()}firstUpdated(){this._posSelected=!1,this.loadMap(),this.geolocationTimeout(),this.listenFormSubmit(),this._map&&this.ensureMapSize()}render(){if(this.show)return this.posSelectionTemplate()}posSelectionTemplate(){return a`
+      <div class="mealz-store-locator mealz-ds-body">
+        <div class="mealz-store-locator__pos-selection">
+          <button
+              class="mealz-store-locator__go-back-button mealz-ds-button square"
+              @click=${()=>this.dispatchShow(!1)}>
+              <img src="https://storage.googleapis.com/assets.miam.tech/generic/icons/ArrowLeft_dark.svg" alt="Retour"
+                   aria-hidden="true">
+            </button>
+          <div class="mealz-store-locator__title">
+            <span>Sélectionner un magasin</span>
+          </div>
+          <form id="mealz-store-locator__store-locator-form">
+            <div class="mealz-store-locator__address-input-container">
+              ${this.geolocationButtonTemplate()}
+              <input required class="mealz-store-locator__address-input" type="text" name="address"
+                     placeholder="Votre code postal ou ville">
+              <button type="submit"
+              class="mealz-ds-button primary mealz-store-locator__search-address-button">
+              OK
+              </button>
+            </div>
+          </form>
+          ${this.posListTemplate()}
+          ${this._posList.length>0?a`
+              <div id="mealz-store-locator__view-swapper-button"
+                   class="${this._showPosList?"mealz-store-locator__see-map-button":"mealz-store-locator__see-list-button"}">
+                <button @click=${()=>this.togglePosList(this._showPosList)}
+                        class="mealz-ds-button primary hide-pos-button">
+                  ${this.getButtonLabel()}
+                </button>
+              </div>`:""}
+        </div>
+        ${this.posMapTemplate()}
+      </div>
+    `}geolocationButtonTemplate(){var e,s,i,o;let t;if(this.geolocationCoordinates===void 0)t=a`
+          <div class="mealz-ds-loader"></div>`;else if((s=(e=this.geolocationCoordinates)==null?void 0:e.coords)!=null&&s.longitude&&((o=(i=this.geolocationCoordinates)==null?void 0:i.coords)!=null&&o.latitude))t=a`<img title="Votre position" class="mealz-store-locator__geolocation-icon"
+                                src="https://storage.googleapis.com/assets.miam.tech/generic/icons/locate-primary.svg"
+                                alt="Geolocaliser"/>`;else return a``;return a`
+        <button type="button" ?disabled=${this.geolocationCoordinates===void 0}
+                class="mealz-store-locator__locate-button mealz-ds-button square ghost locate-button"
+                @click=${this.setGeolocation}>
+            ${t}
+        </button>
+    `}posMapTemplate(){return a`
+      <div id="mealz-store-locator__map"></div>
+    `}posListTemplate(){if(this._searchingPos)return a`
+        <div class="mealz-store-locator__pos-loader">
+          <div class="mealz-ds-loader"></div>
+        </div>
+      `;if(this._posList.length<1&&this._searchSubmitted)return a`
+        <div class="mealz-store-locator__no-pos-found">
+          <b>Aucun magasin trouvé à proximité.</b>
+          <span>Essayez une autre adresse.</span>
+        </div>
+      `;if(this._posList.length<1)return;const t=document.querySelector(".mealz-store-locator__pos-selection");return t&&t.classList.toggle("mealz-store-locator__pos-selection__height",this._showPosList),a`
+      <div id="mealz-store-locator__pos-list"
+           class="${this._showPosList?"mealz-store-locator__pos-list__visible":"mealz-store-locator__pos-list__hidden"}">
+        ${this._posList.map(e=>a`
+            <div class="mealz-store-locator__pos-item">
+              <div class="mealz-store-locator__pos-data">
+                <img class="mealz-store-locator__pos-picture" src="${e.supplier.attributes.logo}"
+                     alt="${e.supplier.attributes.name}"/>
+                <div>
+                  <div class="mealz-store-locator__pos-name">${this._nameOfStore(e)}</div>
+                  <div class="mealz-store-locator__pos-address">${e.attributes.address}</div>
+                </div>
+              </div>
+              <div class="mealz-store-locator__pos-cta">
+                <button @click=${()=>this.dispatchPos(e)}
+                        class="mealz-ds-button primary small mealz-select-pos-button"
+                        ?disabled=${this._posSelected}>
+                  ${this._posSelected?a`
+                      <div class="mealz-ds-loader"></div>`:"Sélectionner"}
+                </button>
+              </div>
+            </div>
+          `)}
+      </div>
+    `}addAddressMarker(){if(!this._map||!this._userLocation)return;this._userLocationMarker&&(this._map.removeLayer(this._userLocationMarker),this._userLocationMarker=void 0);const t=getComputedStyle(document.documentElement).getPropertyValue("--mealz-ds-color-primary").trim()||"#24748F";this._userLocationMarker=window.L.circleMarker([this._userLocation.latitude,this._userLocation.longitude],{stroke:!1,fillOpacity:1,fill:!0,color:t,className:"mealz-store-locator__address-marker"}).addTo(this._map)}getButtonLabel(){if(this._showPosList)return"Voir la carte";const t=this._posList.length;return t===1?"Voir le magasin":`Voir les ${t} magasins`}dispatchShow(t){const e={detail:{show:t},bubbles:!0,composed:!0};this.dispatchEvent(new CustomEvent("showChange",e))}initLeaflet(){this._leafletCss=document.createElement("link"),this._leafletCss.setAttribute("rel","stylesheet"),this._leafletCss.setAttribute("href","https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"),this._leafletCss.setAttribute("integrity","sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="),this._leafletCss.setAttribute("crossorigin",""),this._leafletJs=document.createElement("script"),this._leafletJs.setAttribute("src","https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"),this._leafletJs.setAttribute("integrity","sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="),this._leafletJs.setAttribute("crossorigin",""),this._miamDs=document.createElement("link"),this._miamDs.setAttribute("rel","stylesheet"),this._miamDs.setAttribute("href","https://unpkg.com/mealz-ds@2.0.0/mealz-ds.min.css"),document.head.appendChild(this._miamDs),document.head.appendChild(this._leafletCss),document.head.appendChild(this._leafletJs)}waitForLeaflet(t){let i=50;console.debug("[Map] Checking for window.L");const o=setInterval(()=>{window.L!==void 0||i===0?(clearInterval(o),window.L!==void 0?(console.debug("[Map] window.L is defined"),t(!0)):(console.error("[Map] Failed to load Leaflet after",5e3,"ms"),t(!1))):i--},100)}loadMap(){this.waitForLeaflet(t=>{t&&(this._map&&(this._map.off(),this._map.remove()),this.setNewLocation(),window.L.tileLayer("https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png",{maxZoom:19,attribution:"Map tiles by Carto, under CC BY 3.0. Data by OpenStreetMap, under ODbL."}).addTo(this._map))})}initEvents(){this._filterEvent=new CustomEvent("filterChange",{detail:{supplierName:""},bubbles:!0,composed:!0})}initResizeObserver(){this._resizeObserver=new ResizeObserver(()=>{this._map&&this._map.invalidateSize()})}ensureMapSize(){!this._map||!this._mapElement||requestAnimationFrame(()=>{this._map&&this._mapElement.offsetWidth>0&&this._mapElement.offsetHeight>0?this._map.invalidateSize():requestAnimationFrame(()=>{this._map&&this._map.invalidateSize()})})}initialSearch(){var t,e,s,i;this.setSupplier(),!this._prevAddress&&((e=(t=this.geolocationCoordinates)==null?void 0:t.coords)!=null&&e.latitude)&&((i=(s=this.geolocationCoordinates)==null?void 0:s.coords)!=null&&i.longitude)?this.getPosByCoordinates():this.setAddress(!0)}setAddress(t=!1){var e;!t&&(!this._addressInput.value||this._addressInput.value.length<3||this._searchingPos)||!t&&this._prevAddress===this._addressInput.value+", France"||(this._prevAddress=(e=this._addressInput)!=null&&e.value?this._addressInput.value+", France":"Paris, France",this._searchingPos=!0,this.requestUpdate(),this.subscriptions.push(this.getByAddress(this._prevAddress,this.selectedRadius,this._selectedSuppliers).subscribe(s=>{this._userLocation=s["current-coordinates"],this.addAddressMarker(),this.setPosList(s),this.setNewLocation(),this.dispatchSearch(this._prevAddress,s.data.length),this._searchingPos=!1,this._searchSubmitted=!0,this.togglePosList(!1),this.requestUpdate()})))}setGeolocation(){this._prevAddress="",this.getPosByCoordinates()}getPosByCoordinates(){this._searchingPos=!0,this.requestUpdate(),this.subscriptions.push(this.getByCoordinates(this.geolocationCoordinates.coords.latitude,this.geolocationCoordinates.coords.longitude,this.selectedRadius,this._selectedSuppliers).subscribe(t=>{this._addressInput.value="",this._userLocation=t["current-coordinates"],this.addAddressMarker(),this.setPosList(t),this._searchingPos=!1,this.setNewLocation(),this._searchSubmitted=!0,this.togglePosList(!1),this.requestUpdate()}))}setPosList(t){this._posList=t.data.map(e=>{const s=Object.assign(new g,e);return s.supplier=t.included.find(i=>i.id===s.relationships.supplier.data.id),s}).sort((e,s)=>e.attributes.name.includes("onoprix")?-1:s.attributes.name.includes("onoprix")?1:0)}setNewLocation(){var e;const t=document.getElementById("mealz-store-locator__map");t&&(this._map?(this._markers.forEach(s=>{this._map.removeLayer(s)}),this._markers=[],this._map.panTo(this.getCoordinates())):(this._map=(e=window.L)==null?void 0:e.map(t).setView(this.getCoordinates(),13),this._resizeObserver&&this._resizeObserver.observe(t),this.ensureMapSize()),this.addMarkers())}getCoordinates(){var t,e;return(t=this._userLocation)!=null&&t.latitude&&((e=this._userLocation)!=null&&e.longitude)?[Number(this._userLocation.latitude),Number(this._userLocation.longitude)]:this._posList.length>0?[Number(this._posList[0].attributes.latitude),Number(this._posList[0].attributes.longitude)]:[48.866667,2.333333]}addMarkers(){this._posList.length>0&&this._posList.forEach((t,e)=>{this._markers.push(window.L.marker([t.attributes.latitude,t.attributes.longitude],{icon:this.buildIcon(t.supplier)}).addTo(this._map));const s=window.L.popup({content:`
+            <div class="mealz-store-locator__pos-item">
+              <div class="mealz-store-locator__pos-data">
+                <img class="mealz-store-locator__pos-picture" src="${t.supplier.attributes.logo}"
+                     alt="${t.supplier.attributes.name}"/>
+                <div>
+                  <div class="mealz-store-locator__pos-name">${this._nameOfStore(t)}</div>
+                  <div class="mealz-store-locator__pos-address">${t.attributes.address}</div>
+                </div>
+              </div>
+              <div class="mealz-store-locator__pos-cta">
+                <button id="mealz-select"
+                        class="mealz-ds-button primary small mealz-select-pos-button">
+                  Sélectionner
+                </button>
+              </div>
+            </div>
+          `});this._markers[e].bindPopup(s).on("popupopen",i=>{var n,d;const o=(n=i.target.getPopup())==null?void 0:n.getElement();(d=o==null?void 0:o.querySelector("#mealz-select"))==null||d.addEventListener("click",()=>{this.dispatchPos(t)})})})}buildIcon(t){return window.L.icon({iconUrl:t.attributes.logo||"https://cdn-icons-png.flaticon.com/512/3515/3515146.png",shadowUrl:"https://storage.googleapis.com/assets.miam.tech/mealz-components/store-locator/marker.svg",iconSize:[24,24],shadowSize:[44,53],iconAnchor:[16,43],shadowAnchor:[22,45],popupAnchor:[0,-55],className:"mealz-marker-icon"})}togglePosList(t){this._showPosList=!t;const e=document.getElementById("mealz-store-locator__pos-list"),s={bubbles:!0,composed:!0};e&&(t?(e.style.display="none",this.dispatchEvent(new CustomEvent("mapSelected",s))):(e.style.display="flex",this.dispatchEvent(new CustomEvent("listSelected",s))),this.requestUpdate())}geolocationTimeout(){setTimeout(()=>{this.geolocationCoordinates===void 0&&(this.geolocationCoordinates={})},2e4)}listenFormSubmit(){document.getElementById("mealz-store-locator__store-locator-form").addEventListener("submit",e=>{e.preventDefault(),this.setAddress()})}setSupplier(){const t=localStorage.getItem("_miam/selectedSupplierId");t&&(this._selectedSuppliers=[t])}dispatchPos(t){this._posSelected=!0,this.requestUpdate();const e={detail:{posId:t.id,posExtId:t.extId,supplierId:t.supplier.id,supplierName:t.supplier.attributes.name,posName:this._nameOfStore(t)},bubbles:!0,composed:!0};this.dispatchEvent(new CustomEvent("posIdChange",e))}resetPosSelection(){this._posSelected&&(this._posSelected=!1,this.requestUpdate())}dispatchSearch(t,e){const s={detail:{searchTerm:t,storesFoundCount:e},bubbles:!0,composed:!0};this.dispatchEvent(new CustomEvent("searchChange",s))}};l([c({type:Number})],r.prototype,"selectedRadius",2);l([c()],r.prototype,"getByAddress",2);l([c()],r.prototype,"getByCoordinates",2);l([c()],r.prototype,"getAffiliateSuppliers",2);l([c({type:Boolean})],r.prototype,"show",1);l([c({attribute:!1})],r.prototype,"geolocationCoordinates",1);l([_()],r.prototype,"_geolocationCoordinates",2);l([p("input")],r.prototype,"_addressInput",2);l([p("#mealz-store-locator__map")],r.prototype,"_mapElement",2);r=l([m("mealz-store-locator")],r);customElements.get("mealz-store-locator")||customElements.define("mealz-store-locator",r);

package/dist/store-locator-drawer/store-locator-drawer.min.js

@@ -1,43 +1,10 @@
-import{N as c,k as r}from"../assets/no-shadow-element-D4NOg0uW.js";import{t as m}from"../assets/custom-element-BhZVzxrc.js";import{r as u}from"../assets/state-b8IyfZUU.js";import{m as o}from"../assets/mealz-sdk-E_fNZM-c.js";import{s as g}from"../assets/skipWhile-B_4e7jSH.js";import{s as b}from"../assets/switchMap-BYsewftM.js";import{m as v}from"../assets/map-D6X2syNu.js";import"../assets/property-BXNy7Yd-.js";import"../assets/OperatorSubscriber-B37s2U6v.js";import"../assets/innerFrom-D8hyVDmo.js";var z=Object.defineProperty,S=Object.getOwnPropertyDescriptor,h=(e,s,n,i)=>{for(var t=i>1?void 0:i?S(s,n):s,a=e.length-1,l;a>=0;a--)(l=e[a])&&(t=(i?l(s,n,t):l(t))||t);return i&&t&&z(s,n,t),t};let d=class extends c{constructor(){super(),this.step=1,this.modalConfirmed=!1,this.steps=[{img:"https://storage.googleapis.com/assets.miam.tech/generic/images/8.7/noSupplierOnboardingStep1.png",title:"Les recettes sont commandables en ligne !",content:r`<span class="mealz-no-supplier-onboarding__bold">Commandez</span>
-                    dès à présent les ingrédients de vos recettes en cliquant sur le bouton
-                    <span class="mealz-no-supplier-onboarding__bold">“Mes courses”</span>`},{img:"https://storage.googleapis.com/assets.miam.tech/generic/images/8.7/noSupplierOnboardingStep2.png",title:"Choisissez votre drive",content:"Sélectionnez un magasin parmi les enseignes participantes et disponibles proches de vous"},{img:"https://storage.googleapis.com/assets.miam.tech/generic/images/8.7/noSupplierOnboardingStep3.png",title:"Une recette, des produits",content:"Ajoutez les produits de votre choix dans votre panier et ajustez les quantités."},{img:"https://storage.googleapis.com/assets.miam.tech/generic/images/8.7/noSupplierOnboardingStep4.png",title:"Commande en 1 clic",content:"Accédez à votre panier et passez votre commande dans le magasin sélectionné."}],this.analyticsPath="/onboarding",this.styleURL=new URL("./no-supplier-onboarding/no-supplier-onboarding.css",this.getBaseURL())}connectedCallback(){super.connectedCallback(),this.pageview(),this.listenToModalCloseEvent()}render(){const{img:e,title:s,content:n}=this.steps[this.step-1];return r`
-      <div class="mealz-no-supplier-onboarding">
-        <div class="mealz-no-supplier-onboarding__body">
-          <div class="mealz-no-supplier-onboarding__content step${this.step}">
-            <span class="mealz-no-supplier-onboarding__title mealz-ds-text size-xl weight-xl">
-              ${s}
-            </span>
-            <span class="mealz-no-supplier-onboarding__text mealz-ds-text size-s weight-m">
-              ${n}
-            </span>
-            <img class="mealz-no-supplier-onboarding__img" src="${e}">
-          </div>
-          <div class="mealz-no-supplier-onboarding__track">
-            ${this.renderStepIndicators()}
-          </div>
-          <button class="mealz-ds-button primary mealz-no-supplier-onboarding__confirm" @click="${this.onConfirm}">
-            <span class="mealz-ds-text">Je choisis mon magasin ou mon drive</span>
-          </button>
-        </div>
-        ${this.renderNavigationButtons()}
-      </div>
-    `}renderStepIndicators(){return this.steps.map((e,s)=>r`
-      <img class="${this.step===s+1?"active":""}"
-        src="https://storage.googleapis.com/assets.miam.tech/generic/icons/8.7/BulletPoint.svg" alt="step ${s+1}">
-    `)}renderNavigationButtons(){return r`
-      <button @click="${this.previousStep}"
-        class="mealz-no-supplier-onboarding__previous mealz-ds-button primary ghost square ${this.step===1?"hidden":""}">
-        <img src="https://storage.googleapis.com/assets.miam.tech/generic/icons/ArrowLeft_dark.svg" alt="previous step">
-      </button>
-      <button @click="${this.nextStep}"
-        class="mealz-no-supplier-onboarding__next mealz-ds-button primary ghost square${this.step===this.steps.length?"hidden":""}">
-        <img src="https://storage.googleapis.com/assets.miam.tech/generic/icons/ArrowLeft_dark.svg" alt="next step">
-      </button>
-    `}previousStep(){this.step=Math.max(this.step-1,1)}nextStep(){this.step=Math.min(this.step+1,this.steps.length)}onConfirm(){this.modalConfirmed=!0,this.sendConfirmEvent(),this.dispatchEvent(new CustomEvent("onboardingConfirmed",{bubbles:!0,composed:!0}))}listenToModalCloseEvent(){document.querySelector("mealz-modal").addEventListener("modalClosed",()=>{this.modalConfirmed||this.sendCloseEvent(),sessionStorage.setItem("_miam/noSupplier/onboarding","was-closed")})}pageview(){o.analytics.sendEvent("pageview",this.analyticsPath,{})}sendConfirmEvent(){o.analytics.sendEvent("onboarding.action",this.analyticsPath,{steps_completed:this.step.toString()})}sendCloseEvent(){o.analytics.sendEvent("onboarding.close",this.analyticsPath,{steps_completed:this.step.toString()})}};h([u()],d.prototype,"step",2);d=h([m("mealz-no-supplier-onboarding")],d);customElements.get("mealz-no-supplier-onboarding")||customElements.define("mealz-no-supplier-onboarding",d);var _=Object.getOwnPropertyDescriptor,f=(e,s,n,i)=>{for(var t=i>1?void 0:i?_(s,n):s,a=e.length-1,l;a>=0;a--)(l=e[a])&&(t=l(t)||t);return t};let p=class extends c{constructor(){super(...arguments),this.analyticsPath="/locator",this.subscriptions=[]}connectedCallback(){super.connectedCallback(),this.pageview(),this.listenToCloseEvent(),this.listenToUserCoordinates()}disconnectedCallback(){super.disconnectedCallback(),this.subscriptions.forEach(e=>e.unsubscribe())}render(){return this.shouldDisplayOnboarding()&&this.displayOnboardingModal(),r`
+import{N as c,k as i}from"../assets/no-shadow-element-Dz9jgDtr.js";import{t as p}from"../assets/custom-element-BhZVzxrc.js";import{m as s}from"../assets/mealz-sdk-E_fNZM-c.js";import{s as h}from"../assets/skipWhile-BzDgmir5.js";import{s as u}from"../assets/switchMap-6Z80ObHE.js";import{m}from"../assets/map-DHslluWD.js";import{f as w}from"../assets/filter-DQ4vwAGj.js";import"../assets/OperatorSubscriber-DF1TYu__.js";import"../assets/innerFrom-FMZwm2mb.js";var S=Object.getOwnPropertyDescriptor,b=(e,t,o,l)=>{for(var r=l>1?void 0:l?S(t,o):t,a=e.length-1,d;a>=0;a--)(d=e[a])&&(r=d(r)||r);return r};let n=class extends c{constructor(){super(...arguments),this.analyticsPath="/locator",this.subscriptions=[]}connectedCallback(){super.connectedCallback(),this.listenToDrawerViewSwapper(),this.listenToCloseEvent(),this.listenToUserCoordinates()}disconnectedCallback(){super.disconnectedCallback(),this.subscriptions.forEach(e=>e.unsubscribe())}render(){return i`
+      <!-- NEED TO SET REAL VALUE TO .SHOW CONTINUE HERE -->
       <mealz-store-locator
         .show="${!0}"
         .geolocationCoordinates="${this.hostCoordinates}"
         @posIdChange=${e=>this.changePosAndSupplier(e)}
         @searchChange=${e=>this.sendSearchEvent(e)}
+        @showChange=${()=>this.navigateBack()}
       ></mealz-store-locator>
-    `}listenToUserCoordinates(){var e,s;(s=(e=window.mealzInternal)==null?void 0:e.user)!=null&&s.userCoordinates$&&this.subscriptions.push(window.mealzInternal.user.userCoordinates$.subscribe(n=>{this.hostCoordinates=n,this.requestUpdate()}))}shouldDisplayOnboarding(){const e=sessionStorage.getItem("_miam/noSupplier/onboarding")==="was-closed",s=document.querySelector("mealz-drawer-view-swapper");return!e&&!!(s!=null&&s.displayStoreLocator$.value)}displayOnboardingModal(){const e=document.createElement("mealz-modal");e.titleSlot=r`<span class="mealz-no-supplier-onboarding__badge mealz-ds-badge size-l">NOUVEAU !</span>`,e.contentSlot=r`<mealz-no-supplier-onboarding></mealz-no-supplier-onboarding>`,document.body.appendChild(e)}changePosAndSupplier(e){const s=o.pos.currentPos().value;if((s==null?void 0:s.id)===e.detail.posId){this.closeStoreLocator();return}this.selectedPosId=e.detail.posId,this.selectedSupplierName=e.detail.supplierName,this.changePos()}changePos(){this.selectedPosId&&this.subscriptions.push(o.pos.loadPos(this.selectedPosId).pipe(g(e=>!e||e.id!==this.selectedPosId),b(e=>(this.sendSelectedEvent(e),o.pos.basketLoadedForNewPos())),v(()=>(o.storeLocator.newStoreSelected(),this.closeStoreLocator()))).subscribe())}listenToCloseEvent(){const e=document.querySelector("mealz-drawer");e&&e.addEventListener("drawerClosed",()=>{this.closeStoreLocator(),this.sendCloseEvent()})}closeStoreLocator(){const e=document.querySelector("mealz-drawer-view-swapper");e&&e.displayStoreLocator$.next(!1)}isHidden(){return this.classList.contains("hidden")}pageview(){this.isHidden()||o.analytics.sendEvent("pageview",this.analyticsPath,{})}sendSelectedEvent(e){this.isHidden()||o.analytics.sendEvent("locator.select",this.analyticsPath,{pos_name:e.attributes.name,pos_id:e.id,supplier_name:this.selectedSupplierName})}sendSearchEvent(e){this.isHidden()||o.analytics.sendEvent("locator.search",this.analyticsPath,{search_term:e.detail.searchTerm,stores_found_count:e.detail.storesFoundCount.toString()})}sendCloseEvent(){this.isHidden()||o.analytics.sendEvent("locator.close",this.analyticsPath,{})}};p=f([m("mealz-store-locator-drawer")],p);customElements.get("mealz-store-locator-drawer")||customElements.define("mealz-store-locator-drawer",p);
+    `}listenToUserCoordinates(){var e,t;(t=(e=window.mealzInternal)==null?void 0:e.user)!=null&&t.userCoordinates$&&this.subscriptions.push(window.mealzInternal.user.userCoordinates$.subscribe(o=>{this.hostCoordinates=o,this.requestUpdate()}))}shouldDisplayOnboarding(){const e=sessionStorage.getItem("_miam/noSupplier/onboarding")==="was-closed",t=document.querySelector("mealz-drawer-view-swapper");return!e&&!!(t!=null&&t.displayStoreLocator$.value)}displayOnboardingModal(){const e=document.createElement("mealz-modal");e.titleSlot=i`<span class="mealz-no-supplier-onboarding__badge mealz-ds-badge size-l">NOUVEAU !</span>`,e.contentSlot=i`<mealz-no-supplier-onboarding></mealz-no-supplier-onboarding>`,document.body.appendChild(e)}changePosAndSupplier(e){const t=s.pos.currentPos().value;if((t==null?void 0:t.id)===e.detail.posId){this.closeStoreLocator();return}this.selectedPosId=e.detail.posId,localStorage.setItem("_miam/noSupplier/posId",this.selectedPosId),this.selectedSupplierName=e.detail.supplierName,this.changePos()}changePos(){this.selectedPosId&&this.subscriptions.push(s.pos.loadPos(this.selectedPosId).pipe(h(e=>!e||e.id!==this.selectedPosId),u(e=>(this.sendSelectedEvent(e),s.pos.basketLoadedForNewPos())),m(()=>(s.storeLocator.newStoreSelected(),this.closeStoreLocator()))).subscribe())}listenToCloseEvent(){const e=document.querySelector("mealz-drawer");e&&e.addEventListener("drawerClosed",()=>{this.closeStoreLocator(),this.sendCloseEvent()})}navigateBack(){var e,t,o;(o=(t=(e=s)==null?void 0:e.noSupplier)==null?void 0:t.displaySupplierSelector$)==null||o.next(!0),this.closeStoreLocator()}closeStoreLocator(){const e=document.querySelector("mealz-drawer-view-swapper");e&&e.displayStoreLocator$.next(!1);const t=this.querySelector("mealz-store-locator");t==null||t.resetPosSelection()}listenToDrawerViewSwapper(){const e=document.querySelector("mealz-drawer-view-swapper");e&&this.subscriptions.push(e.displayStoreLocator$.pipe(w(t=>t)).subscribe(()=>this.pageview()))}isHidden(){return this.classList.contains("hidden")}pageview(){this.isHidden()||s.analytics.sendEvent("pageview",this.analyticsPath,{})}sendSelectedEvent(e){this.isHidden()||s.analytics.sendEvent("locator.select",this.analyticsPath,{pos_name:e.attributes.name,pos_id:e.id,supplier_name:this.selectedSupplierName})}sendSearchEvent(e){this.isHidden()||s.analytics.sendEvent("locator.search",this.analyticsPath,{search_term:e.detail.searchTerm,stores_found_count:e.detail.storesFoundCount.toString()})}sendCloseEvent(){this.isHidden()||s.analytics.sendEvent("locator.close",this.analyticsPath,{})}};n=b([p("mealz-store-locator-drawer")],n);customElements.get("mealz-store-locator-drawer")||customElements.define("mealz-store-locator-drawer",n);

package/dist/store-locator.css

@@ -0,0 +1,290 @@
+.mealz-store-locator {
+  height: 100%;
+  display: flex;
+
+  .mealz-store-locator__pos-selection {
+    display: flex;
+    width: 320px;
+    padding: 40px var(--spacing-padding-16-px, 16px);
+    flex-direction: column;
+    align-items: stretch;
+    gap: var(--spacing-padding-16-px, 16px);
+    flex-shrink: 0;
+    background: var(--mealz-ds-color-neutral-white, #ffffff);
+    box-shadow: 2px 0px 16px 0px rgba(0, 0, 0, 0.15);
+    z-index: 1;
+
+    .mealz-store-locator__title {
+      color: var(--mealz-ds-color-neutral-black, #0f191f);
+      font-size: 28px;
+      font-weight: 700;
+      line-height: 120%;
+    }
+
+    .mealz-store-locator__go-back-button {
+      border-radius: 100%;
+      height: 40px;
+      width: 40px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      img {
+        width: 15px;
+        height: 15px;
+      }
+    }
+
+    #mealz-store-locator__store-locator-form {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+
+      .mealz-store-locator__address-input-container {
+        display: flex;
+        gap: 8px;
+        height: 40px;
+        position: relative;
+
+        .mealz-store-locator__locate-button {
+          position: absolute;
+          background: unset;
+          border: unset;
+          padding: 0;
+          top: 8px;
+          left: 8px;
+          width: 24px;
+          height: 24px;
+
+          .mealz-store-locator__geolocation-icon {
+            cursor: pointer;
+            width: 24px;
+            height: 24px;
+          }
+        }
+
+        .mealz-store-locator__locate-button
+          + .mealz-store-locator__address-input {
+          padding-left: 40px;
+        }
+
+        .mealz-store-locator__address-input {
+          padding-left: 8px;
+          flex: 1;
+          border: 1px solid var(--mealz-ds-color-neutral-200, #D9DDE1);
+          border-radius: 4px;
+          font-size: 14px;
+        }
+      }
+
+      .mealz-store-locator__select-supplier {
+        display: flex;
+
+        .mealz-store-locator__select-supplier-select {
+          flex: 1;
+          padding: 10px;
+          max-width: initial;
+        }
+      }
+    }
+
+    .mealz-store-locator__pos-loader {
+      flex: 1;
+      width: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .mealz-store-locator__pos-loader .mealz-ds-loader {
+      margin: 16px;
+      display: flex;
+      width: 72px;
+      height: 72px;
+      background-position-x: 36px;
+      background-size: 36px 36px;
+    }
+
+    #mealz-store-locator__pos-list {
+      flex-direction: column;
+      align-items: flex-start;
+      gap: var(--spacing-padding-12-px, 12px);
+      align-self: stretch;
+      overflow: auto;
+    }
+
+    .mealz-store-locator__pos-list__visible,
+    .mealz-store-locator__pos-list__hidden {
+      display: flex;
+    }
+
+    .mealz-store-locator__no-pos-found {
+      margin-bottom: 16px;
+      width: 100%;
+      flex: 1;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-direction: column;
+    }
+  }
+
+  #mealz-store-locator__view-swapper-button {
+    display: none;
+  }
+
+  .mealz-store-locator__pos-item {
+    display: flex;
+    flex-direction: column;
+    padding: 8px;
+    align-items: flex-start;
+    gap: 16px;
+    align-self: stretch;
+    border-radius: 8px;
+    border: 1px solid var(--mealz-ds-color-neutral-200, #eff1f3);
+
+    .mealz-store-locator__pos-data {
+      display: flex;
+      align-items: flex-start;
+      gap: 8px;
+      align-self: stretch;
+
+      .mealz-store-locator__pos-picture {
+        width: 40px;
+        height: 40px;
+        flex-shrink: 0;
+      }
+
+      .mealz-store-locator__pos-name {
+        color: var(--mealz-ds-color-neutral-black, #0f191f);
+        font-size: 14px;
+        font-weight: 700;
+        line-height: 150%;
+      }
+
+      .mealz-store-locator__pos-address {
+        color: var(--mealz-ds-color-neutral-500, #8c96a2);
+        font-size: 12px;
+        font-weight: 600;
+        line-height: 150%;
+      }
+    }
+
+    .mealz-store-locator__pos-cta {
+      display: flex;
+      justify-content: flex-end;
+      width: 100%;
+
+      .mealz-select-pos-button {
+        border-radius: 1000px;
+      }
+    }
+  }
+
+  #mealz-store-locator__map {
+    z-index: 0;
+    flex: 1 1 0;
+    min-height: 400px;
+    width: 100%;
+
+    .mealz-store-locator__pos-item {
+      border: none;
+      padding: 0;
+    }
+
+    .leaflet-marker-pane .mealz-marker-icon {
+      border-radius: 50%;
+      overflow: hidden;
+      object-fit: cover;
+      border: 4px solid var(--mealz-ds-color-neutral-white, #FFFFFF);
+      box-sizing: content-box;
+    }
+  }
+}
+
+@media (max-width: 768px) {
+  .mealz-store-locator {
+    position: absolute;
+    flex-direction: column;
+    inset: 0;
+
+    .mealz-store-locator__pos-selection {
+      width: 100%;
+      padding: 0;
+      gap: 0;
+
+      .mealz-store-locator__go-back-button {
+        position: absolute;
+        z-index: 1;
+        top: 12px;
+        left: 8px;
+        width: 32px;
+        height: 32px;
+      }
+
+      .mealz-store-locator__title {
+        position: relative;
+        min-height: 56px;
+        font-size: 16px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-bottom: solid 1px var(--mealz-ds-color-neutral-200, #eff1f3);
+      }
+
+      #mealz-store-locator__store-locator-form {
+        padding: 24px 16px;
+
+        .mealz-store-locator__address-input-container {
+          .mealz-store-locator__address-input {
+            width: calc(100% - 44px);
+          }
+
+          .mealz-store-locator__search-address-button {
+            width: 36px;
+          }
+        }
+      }
+
+      #mealz-store-locator__pos-list {
+        padding: 0 16px 12px;
+        align-items: center;
+
+        &.mealz-store-locator__pos-list__visible {
+          display: flex;
+        }
+
+        &.mealz-store-locator__pos-list__hidden {
+          display: none;
+        }
+      }
+
+      .mealz-store-locator__pos-loader {
+        position: absolute;
+        height: 100%;
+      }
+
+      &.mealz-store-locator__pos-selection__height {
+        height: 100%;
+      }
+    }
+
+    #mealz-store-locator__view-swapper-button {
+      width: 100%;
+      display: flex;
+      justify-content: center;
+      padding: 12px 0;
+
+      &.mealz-store-locator__see-list-button {
+        z-index: 1;
+        bottom: 40px;
+        position: absolute;
+      }
+
+      &.mealz-store-locator__see-map-button {
+        box-shadow: -2px 0 18px 0 rgba(0, 0, 0, 0.15);
+        margin-top: auto;
+      }
+    }
+  }
+}

package/dist/supplier-selector/supplier-selector.css

@@ -0,0 +1 @@
+.mealz-supplier-selector .mealz-supplier-selector__onboarding-container{padding:24px;background-color:var(--mealz-ds-color-primary-100, #e4eaec)}.mealz-supplier-selector .mealz-supplier-selector__onboarding-container .mealz-supplier-selector__onboarding-title{margin:0 0 8px}.mealz-supplier-selector .mealz-supplier-selector__onboarding-container .mealz-supplier-selector__onboarding-steps{overflow-y:scroll;margin-top:16px;display:flex}.mealz-supplier-selector .mealz-supplier-selector__onboarding-container .mealz-supplier-selector__onboarding-steps>*:not(:last-child){margin-right:16px}.mealz-supplier-selector .mealz-supplier-selector__onboarding-container .mealz-supplier-selector__onboarding-steps .mealz-supplier-selector__card{background-color:var(--mealz-ds-color-neutral-white, #fff);display:flex;align-items:center;padding:16px;border-radius:12px}.mealz-supplier-selector .mealz-supplier-selector__onboarding-container .mealz-supplier-selector__onboarding-steps .mealz-supplier-selector__card .mealz-supplier-selector__instructions{flex:1 1 0;margin-right:24px}.mealz-supplier-selector .mealz-supplier-selector__onboarding-container .mealz-supplier-selector__onboarding-steps .mealz-supplier-selector__card .mealz-supplier-selector__instructions .mealz-supplier-selector__step-counter{display:flex;justify-content:center;align-items:center;margin-bottom:8px;height:32px;width:32px;border-radius:50%;background-color:var(--mealz-ds-color-primary, #24748F);color:var(--mealz-ds-color-neutral-white, #fff)}.mealz-supplier-selector .mealz-supplier-selector__onboarding-container .mealz-supplier-selector__onboarding-steps .mealz-supplier-selector__card .mealz-supplier-selector__onboarding-step-image{flex:1 1 0}.mealz-supplier-selector .mealz-supplier-selector__suppliers-container{padding:24px}.mealz-supplier-selector .mealz-supplier-selector__suppliers-container .mealz-supplier-selector__supplier-list{display:grid;grid-template-columns:repeat(3,minmax(150px,1fr));margin:0 -6px -6px}.mealz-supplier-selector .mealz-supplier-selector__suppliers-container .mealz-supplier-selector__supplier-list .mealz-supplier-selector__supplier-button-card{border-radius:8px;background:none;border:none;padding:0;margin:6px;cursor:pointer;position:relative;overflow:hidden}.mealz-supplier-selector .mealz-supplier-selector__suppliers-container .mealz-supplier-selector__supplier-list .mealz-supplier-selector__supplier-button-card .mealz-supplier-selector__supplier-logo{display:block;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);max-width:65%;max-height:100%;width:auto;height:auto;object-fit:contain}.mealz-supplier-selector .mealz-supplier-selector__suppliers-container .mealz-supplier-selector__supplier-list .mealz-supplier-selector__supplier-button-card .mealz-supplier-selector__supplier-bg{display:block}@media (max-width: 575px){.mealz-supplier-selector .mealz-supplier-selector__suppliers-container .mealz-supplier-selector__supplier-list{grid-template-columns:repeat(2,minmax(150px,1fr))}}@media (max-width: 375px){.mealz-supplier-selector .mealz-supplier-selector__suppliers-container .mealz-supplier-selector__supplier-list{grid-template-columns:repeat(1,minmax(150px,1fr))}}

package/dist/supplier-selector/supplier-selector.min.js

@@ -0,0 +1,53 @@
+import{N as p,k as l}from"../assets/no-shadow-element-Dz9jgDtr.js";import{t as c}from"../assets/custom-element-BhZVzxrc.js";import{w as u}from"../assets/mealz-sdk-E_fNZM-c.js";import{f as d}from"../assets/filter-DQ4vwAGj.js";import"../assets/OperatorSubscriber-DF1TYu__.js";var m=Object.getOwnPropertyDescriptor,g=(e,s,t,r)=>{for(var i=r>1?void 0:r?m(s,t):s,a=e.length-1,n;a>=0;a--)(n=e[a])&&(i=n(i)||i);return i};let o=class extends p{constructor(){super(),this.onboardingSteps=[{title:"Choisissez une recette",image:"https://storage.googleapis.com/assets.miam.tech/generic/images/9.1/onboardingRecipe.png"},{title:"Sélectionnez votre magasin",image:"https://storage.googleapis.com/assets.miam.tech/generic/images/9.1/onboardingDrive.png"},{title:"Commandez vos ingrédients",image:"https://storage.googleapis.com/assets.miam.tech/generic/images/9.1/onboardingIngredients.png"}],this.subscriptions=[],this.supplierList=[],this.analyticsPath="/supplier-selector",this.styleURL=new URL("/supplier-selector.css",import.meta.url)}connectedCallback(){super.connectedCallback(),u().then(()=>this.loadAvailableSuppliers()).catch(e=>{console.warn("[MealzSupplierSelector] MealzInternal SDK not available, suppliers will not be loaded.",e)}),this.listenToDrawerViewSwapper(),this.listenToCloseEvent()}disconnectedCallback(){super.disconnectedCallback(),this.subscriptions.forEach(e=>e.unsubscribe())}loadAvailableSuppliers(){var r;const e=window.mealz,s=(r=e==null?void 0:e.supplier)==null?void 0:r.getAffiliateSuppliers;if(!s){console.warn("[MealzSupplierSelector] mealz.supplier.getAffiliateSuppliers is not available.");return}const t=s();if(!t||typeof t.subscribe!="function"){console.warn("[MealzSupplierSelector] getAffiliateSuppliers did not return a subscribable observable.");return}this.subscriptions.push(t.subscribe(i=>{this.supplierList=i,this.requestUpdate()}))}selectSupplier(e){localStorage.setItem("_miam/selectedSupplierId",e.id),this.sendSelectSupplierEvent(e);const s=this.closest("mealz-drawer-view-swapper"),t=document.querySelector("mealz-store-locator");s&&(s.displayStoreLocator$.next(!0),window.mealzInternal.noSupplier.displaySupplierSelector$.next(!1),t&&(t.show=!0))}listenToDrawerViewSwapper(){const e=document.querySelector("mealz-drawer-view-swapper");e&&this.subscriptions.push(e.displaySupplierSelector$.pipe(d(s=>s)).subscribe(()=>this.pageview()))}listenToCloseEvent(){const e=document.querySelector("mealz-drawer");e&&e.addEventListener("drawerClosed",()=>{this.sendCloseEvent()})}render(){return l`
+      <div class="mealz-supplier-selector">
+        ${this.renderOnboarding()}
+        ${this.renderSuppliers()}
+      </div>
+    `}renderOnboarding(){return l`
+      <div class="mealz-supplier-selector__onboarding-container">
+        <h3 class="mealz-supplier-selector__onboarding-title mealz-ds-text weight-xl">
+          ✨ Nouveau ! Faites vos courses en un clic avec Marmiton.
+        </h3>
+        <span class="mealz-supplier-selector__onboarding-text mealz-ds-text">
+          Choisissez une recette, sélectionnez votre magasin, on s'occupe du reste !<br/>
+          Vos ingrédients sont ajoutés automatiquement dans votre panier, prêt à être commandés.
+        </span>
+        <div class="mealz-supplier-selector__onboarding-steps">
+          ${this.onboardingSteps.map((e,s)=>l`
+            <div class="mealz-supplier-selector__card">
+              <div class="mealz-supplier-selector__instructions">
+                <div class="mealz-supplier-selector__step-counter">
+                  <span class="mealz-ds-text weight-l">${s+1}</span>
+                </div>
+                <span class="mealz-supplier-selector__onboarding-step-text mealz-ds-text weight-xl">${e.title}</span>
+              </div>
+              <img class="mealz-supplier-selector__onboarding-step-image" src="${e.image}" alt="${e.title}"
+                   aria-hidden="true">
+            </div>
+          `)}
+        </div>
+      </div>
+    `}renderSuppliers(){return l`
+      <div class="mealz-supplier-selector__suppliers-container">
+        <h3 class="mealz-supplier-selector__onboarding-title mealz-ds-text weight-xl">
+          Pour commencer, sélectionnez votre enseigne.
+        </h3>
+        <div class="mealz-supplier-selector__supplier-list">
+          ${this.supplierList.map(e=>l`
+            <button class="mealz-supplier-selector__supplier-button-card"
+                    @click="${()=>this.selectSupplier(e)}">
+                <img
+                class="mealz-supplier-selector__supplier-bg"
+                src="https://storage.googleapis.com/assets.miam.tech/generic/images/9.1/retailer-bg-${e.id}.png"
+                alt="${e.name} background"
+                aria-hidden="true">
+                <img
+                class="mealz-supplier-selector__supplier-logo"
+                src="https://storage.googleapis.com/assets.miam.tech/generic/images/9.1/retailer-${e.id}.svg"
+                alt="${e.name}"
+                aria-hidden="true">
+            </button>
+          `)}
+        </div>
+      </div>
+    `}pageview(){window.mealzInternal.analytics.sendEvent("pageview",this.analyticsPath,{})}sendSelectSupplierEvent(e){window.mealzInternal.analytics.sendEvent("supplier-selector.select",this.analyticsPath,{supplier_id:e.id})}sendCloseEvent(){window.mealzInternal.analytics.sendEvent("supplier-selector.close",this.analyticsPath,{})}};o=g([c("mealz-supplier-selector")],o);customElements.get("mealz-supplier-selector")||customElements.define("mealz-supplier-selector",o);