favesalon-embed 0.0.4 → 0.1.0

package/{cjs/index-d5de0b9d.js → dist/cjs/index-e6bea8f5.js}

@@ -806,6 +806,11 @@ const addHydratedFlag = (elm) => elm.classList.add('hydrated')
 const parsePropertyValue = (propValue, propType) => {
     // ensure this value is of the correct prop type
     if (propValue != null && !isComplexType(propValue)) {
+        if (propType & 4 /* Boolean */) {
+            // per the HTML spec, any string value means it is a boolean true value
+            // but we'll cheat here and say that the string "false" is the boolean false
+            return propValue === 'false' ? false : propValue === '' || !!propValue;
+        }
         if (propType & 2 /* Number */) {
             // force it to be a number
             return parseFloat(propValue);
@@ -1127,6 +1132,10 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
     // Fallback appLoad event
     endBootstrap();
 };
+const getAssetPath = (path) => {
+    const assetUrl = new URL(path, plt.$resourcesUrl$);
+    return assetUrl.origin !== win.location.origin ? assetUrl.href : assetUrl.pathname;
+};
 const hostRefs = new WeakMap();
 const getHostRef = (ref) => hostRefs.get(ref);
 const registerInstance = (lazyInstance, hostRef) => hostRefs.set((hostRef.$lazyInstance$ = lazyInstance), hostRef);
@@ -1214,6 +1223,7 @@ const nextTick = /*@__PURE__*/ (cb) => promiseResolve().then(cb);
 const writeTask = /*@__PURE__*/ queueTask(queueDomWrites, true);
 
 exports.bootstrapLazy = bootstrapLazy;
+exports.getAssetPath = getAssetPath;
 exports.h = h;
 exports.promiseResolve = promiseResolve;
 exports.registerInstance = registerInstance;

package/dist/cjs/loader.cjs.js

@@ -0,0 +1,22 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-e6bea8f5.js');
+require('./global-9073d10e.js');
+
+/*
+ Stencil Client Patch Esm v2.9.0 | MIT Licensed | https://stenciljs.com
+ */
+const patchEsm = () => {
+    return index.promiseResolve();
+};
+
+const defineCustomElements = (win, options) => {
+  if (typeof window === 'undefined') return Promise.resolve();
+  return patchEsm().then(() => {
+  return index.bootstrapLazy([["salon-latest-reviews.cjs",[[0,"salon-latest-reviews",{"salonId":[2,"salon-id"],"primaryColor":[1,"primary-color"],"salonReviews":[32],"isLoading":[32],"fetchData":[64]}]]],["salon-lookbook.cjs",[[0,"salon-lookbook",{"salonId":[2,"salon-id"],"isLoading":[32],"isLoadingMore":[32],"hideLoadMore":[32],"currentPage":[32],"totalLookbooks":[32],"salonCategories":[32],"salonLookbooks":[32],"sortBy":[32],"filterBy":[32],"isLayoutSetup":[32],"fetchData":[64],"fetchLookbooks":[64],"onChangeFiltering":[64],"onChangeSorting":[64],"onLoadMore":[64],"fetchCategories":[64]}]]],["salon-reviews.cjs",[[0,"salon-reviews",{"salonId":[2,"salon-id"],"primaryColor":[1,"primary-color"],"salonInfo":[32],"stats":[32],"totalReviews":[32],"allReviews":[32],"isLoading":[32],"isSorting":[32],"isFiltering":[32],"isLoadingMore":[32],"canLoadMore":[32],"page":[32],"filterBy":[32],"sortBy":[32]}]]],["style-detail.cjs",[[0,"style-detail",{"salonId":[2,"salon-id"],"salonLookbook":[1,"salon-lookbook"],"lookbookInfo":[32],"isModalOpen":[32],"currentMediaIdx":[32],"currentMedia":[32],"albumMedias":[32],"similarStyles":[32],"totalComments":[32],"lookbookComments":[32],"isLayoutSetup":[32],"fetchData":[64]}]]],["salon-booking.cjs",[[0,"salon-booking",{"salonId":[2,"salon-id"],"buttonClass":[1,"button-class"],"buttonText":[1,"button-text"],"primaryColor":[1,"primary-color"]}]]],["salon-booking-modal.cjs",[[0,"salon-booking-modal",{"salonId":[2,"salon-id"],"primaryColor":[1,"primary-color"],"redirectUrl":[1,"redirect-url"],"isModalOpen":[32]}]]],["salon-gift-card.cjs",[[0,"salon-gift-card",{"salonId":[2,"salon-id"],"buttonClass":[1,"button-class"],"buttonText":[1,"button-text"],"primaryColor":[1,"primary-color"]}]]],["salon-gift-card-modal.cjs",[[0,"salon-gift-card-modal",{"salonId":[2,"salon-id"],"primaryColor":[1,"primary-color"],"isModalOpen":[32]}]]],["salon-ranking.cjs",[[0,"salon-ranking",{"ranking":[2],"height":[2],"width":[2]}]]],["salon-services.cjs",[[0,"salon-services",{"salonId":[2,"salon-id"],"buttonClass":[1,"button-class"],"salonServices":[32],"isLoading":[32],"fetchData":[64]}]]],["salon-stylists.cjs",[[0,"salon-stylists",{"salonId":[2,"salon-id"],"salonStylists":[32],"totalStylists":[32],"page":[32],"isLoading":[32],"isLoadingMore":[32],"canLoadMore":[32],"fetchData":[64],"onLoadMore":[64]}]]],["user-avatar.cjs",[[0,"user-avatar",{"size":[2],"name":[1],"nameStyle":[16],"shortName":[1,"short-name"],"avatar":[1]}]]],["google-map_5.cjs",[[0,"salon-info",{"salonId":[2,"salon-id"],"salonInfo":[32],"fetchData":[64]}],[0,"salon-locations",{"salonId":[2,"salon-id"],"salonInfo":[1,"salon-info"],"isLoading":[4,"is-loading"],"withBorder":[4,"with-border"],"salonInfoState":[32]}],[0,"salon-latest-styles",{"salonId":[2,"salon-id"],"isLoading":[4,"is-loading"],"withBorder":[4,"with-border"],"isLoadingState":[32],"latestStyles":[32],"fetchData":[64]}],[0,"salon-schedules",{"salonId":[2,"salon-id"],"salonInfo":[1,"salon-info"],"isLoading":[4,"is-loading"],"withBorder":[4,"with-border"],"salonInfoState":[32]}],[0,"google-map",{"locationName":[1,"location-name"],"locationAddress":[1,"location-address"]}]]]], options);
+  });
+};
+
+exports.defineCustomElements = defineCustomElements;

package/{cjs → dist/cjs}/salon-booking-modal.cjs.entry.js

@@ -2,15 +2,15 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-d5de0b9d.js');
-const colors = require('./colors-7f354880.js');
+const index = require('./index-e6bea8f5.js');
+const colors = require('./colors-38421769.js');
 
-const indexCss = ".salon-modal.salon-modal--booking:before{display:none}.salon-modal.salon-modal--booking .salon-modal--inner,.salon-modal.salon-modal--booking .salon-modal--content{max-width:none;width:100%;height:100%}.salon-modal.salon-modal--booking .salon-modal--close{width:48px;height:48px;right:10px;top:12px}@media (min-width: 576px){.salon-modal.salon-modal--booking .salon-modal--close{right:16px}}@media (min-width: 768px){.salon-modal.salon-modal--booking .salon-modal--close{right:24px}}@media (min-width: 1200px){.salon-modal.salon-modal--booking .salon-modal--close{right:50%;margin-right:-585px}}";
+const indexCss = ".salon-modal.salon-modal--booking:before{display:none}.salon-modal.salon-modal--booking .salon-modal--inner,.salon-modal.salon-modal--booking .salon-modal--content{max-width:none;width:100%;height:100%}.salon-modal.salon-modal--booking .salon-modal--close{background-color:#EFEFEF;width:40px;height:40px;right:16px;top:16px;-moz-border-radius:50px;-webkit-border-radius:50px;border-radius:50px}@media (min-width: 768px){.salon-modal.salon-modal--booking .salon-modal--close{right:20px;top:20px}}";
 
 let SalonBookingModal = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    this.primaryColor = colors.Colors.Coral03;
+    this.primaryColor = colors.Colors.Primary;
     this.redirectUrl = window.btoa(window.location.href);
     this.isModalOpen = true;
   }
@@ -21,7 +21,7 @@ let SalonBookingModal = class {
   }
   render() {
     const primaryColor = this.primaryColor.split('#')[1] || 'd47b99';
-    return (index.h("div", { class: "salon-booking--modal" }, this.isModalOpen && (index.h("div", { class: "salon-modal salon-modal--booking" }, index.h("div", { class: "salon-modal--backdrop", onClick: () => this.closeModal() }), index.h("div", { class: "salon-modal--close", onClick: () => this.closeModal() }), index.h("div", { class: "salon-modal--inner" }, index.h("div", { class: "salon-modal--content" }, index.h("iframe", { height: "100%", width: "100%", style: { border: 'none', display: 'block', height: '100%' }, src: `https://www.favesalon.com/r/booking?salonId=${this.salonId}&primaryColor=${primaryColor}&redirectUrl=${this.redirectUrl}` })))))));
+    return (index.h("div", { class: "salon-booking--modal" }, this.isModalOpen && (index.h("div", { class: "salon-modal salon-modal--booking" }, index.h("div", { class: "salon-modal--backdrop", onClick: () => this.closeModal() }), index.h("div", { class: "salon-modal--close", onClick: () => this.closeModal() }), index.h("div", { class: "salon-modal--inner" }, index.h("div", { class: "salon-modal--content" }, index.h("iframe", { height: "100%", width: "100%", style: { border: 'none', display: 'block', height: '100%' }, src: `https://www.favesalon.com/r/booking?salonId=${this.salonId}&primaryColor=${primaryColor}&closeAble=false` })))))));
   }
 };
 SalonBookingModal.style = indexCss;

package/{cjs → dist/cjs}/salon-booking.cjs.entry.js

@@ -2,20 +2,19 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-d5de0b9d.js');
-const index$1 = require('./index-95daad08.js');
-const index$2 = require('./index-48ac68d0.js');
-const colors = require('./colors-7f354880.js');
+const index = require('./index-e6bea8f5.js');
+const index$1 = require('./index-7f190886.js');
+const colors = require('./colors-38421769.js');
 require('./_commonjsHelpers-5cfcba41.js');
 
-const indexCss = ".salon-modal.salon-modal--booking:before{display:none}.salon-modal.salon-modal--booking .salon-modal--inner,.salon-modal.salon-modal--booking .salon-modal--content{max-width:none;width:100%;height:100%}.salon-modal.salon-modal--booking .salon-modal--close{width:48px;height:48px;right:10px;top:12px}@media (min-width: 576px){.salon-modal.salon-modal--booking .salon-modal--close{right:16px}}@media (min-width: 768px){.salon-modal.salon-modal--booking .salon-modal--close{right:24px}}@media (min-width: 1200px){.salon-modal.salon-modal--booking .salon-modal--close{right:50%;margin-right:-585px}}";
+const indexCss = ".salon-modal.salon-modal--booking:before{display:none}.salon-modal.salon-modal--booking .salon-modal--inner,.salon-modal.salon-modal--booking .salon-modal--content{max-width:none;width:100%;height:100%}.salon-modal.salon-modal--booking .salon-modal--close{background-color:#EFEFEF;width:40px;height:40px;right:16px;top:16px;-moz-border-radius:50px;-webkit-border-radius:50px;border-radius:50px}@media (min-width: 768px){.salon-modal.salon-modal--booking .salon-modal--close{right:20px;top:20px}}";
 
 let SalonBooking = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.buttonClass = '';
     this.buttonText = 'Book now';
-    this.primaryColor = colors.Colors.Coral03;
+    this.primaryColor = colors.Colors.Primary;
   }
   openModal() {
     const elBookingModal = document.createElement('div');
@@ -33,7 +32,7 @@ let SalonBooking = class {
     if (!this.buttonClass) {
       const primaryColor = index$1.color(this.primaryColor);
       const primaryColorHover = primaryColor.darken(0.05);
-      buttonStyle = index$2.lib.css({
+      buttonStyle = index$1.lib.css({
         backgroundColor: this.primaryColor,
         borderColor: this.primaryColor,
         color: primaryColor.isLight() ? colors.Colors.Black01 : colors.Colors.White,

package/dist/cjs/salon-gift-card-modal.cjs.entry.js

@@ -0,0 +1,28 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-e6bea8f5.js');
+const colors = require('./colors-38421769.js');
+
+const indexCss = ".salon-modal.salon-modal--gift-card:before{display:none}.salon-modal.salon-modal--gift-card .salon-modal--inner,.salon-modal.salon-modal--gift-card .salon-modal--content{max-width:none;width:100%;height:100%}.salon-modal.salon-modal--gift-card .salon-modal--close{background-color:#EFEFEF;width:40px;height:40px;right:16px;top:16px;-moz-border-radius:50px;-webkit-border-radius:50px;border-radius:50px}@media (min-width: 768px){.salon-modal.salon-modal--gift-card .salon-modal--close{right:20px;top:20px}}";
+
+let SalonGiftCardModal = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.primaryColor = colors.Colors.Primary;
+    this.isModalOpen = true;
+  }
+  closeModal() {
+    this.isModalOpen = false;
+    const el = document.querySelector('salon-gift-card-modal');
+    el.remove();
+  }
+  render() {
+    const primaryColor = this.primaryColor.split('#')[1] || 'd47b99';
+    return (index.h("div", { class: "salon-gift-card--modal" }, this.isModalOpen && (index.h("div", { class: "salon-modal salon-modal--gift-card" }, index.h("div", { class: "salon-modal--backdrop", onClick: () => this.closeModal() }), index.h("div", { class: "salon-modal--close", onClick: () => this.closeModal() }), index.h("div", { class: "salon-modal--inner" }, index.h("div", { class: "salon-modal--content" }, index.h("iframe", { height: "100%", width: "100%", style: { border: 'none', display: 'block', height: '100%' }, src: `https://www.favesalon.com/r/buy-gift-card?salonId=${this.salonId}&primaryColor=${primaryColor}&closeAble=false` })))))));
+  }
+};
+SalonGiftCardModal.style = indexCss;
+
+exports.salon_gift_card_modal = SalonGiftCardModal;

package/{cjs → dist/cjs}/salon-gift-card.cjs.entry.js

@@ -2,26 +2,26 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-d5de0b9d.js');
-const index$1 = require('./index-95daad08.js');
-const index$2 = require('./index-48ac68d0.js');
-const colors = require('./colors-7f354880.js');
+const index = require('./index-e6bea8f5.js');
+const index$1 = require('./index-7f190886.js');
+const colors = require('./colors-38421769.js');
 require('./_commonjsHelpers-5cfcba41.js');
 
-const indexCss = ".salon-modal.salon-modal--gift-card .salon-modal--title{margin:0}.salon-modal.salon-modal--gift-card .salon-modal--close{width:40px;height:40px;right:16px;top:16px}.salon-modal.salon-modal--gift-card .salon-modal--header{height:72px;padding:16px}.salon-modal.salon-modal--gift-card .salon-modal--inner{height:90vh}.salon-modal.salon-modal--gift-card .salon-modal--content{height:90vh;padding:0 16px;overflow-y:auto}";
+const indexCss = ".salon-modal.salon-modal--gift-card:before{display:none}.salon-modal.salon-modal--gift-card .salon-modal--inner,.salon-modal.salon-modal--gift-card .salon-modal--content{max-width:none;width:100%;height:100%}.salon-modal.salon-modal--gift-card .salon-modal--close{background-color:#EFEFEF;width:40px;height:40px;right:16px;top:16px;-moz-border-radius:50px;-webkit-border-radius:50px;border-radius:50px}@media (min-width: 768px){.salon-modal.salon-modal--gift-card .salon-modal--close{right:20px;top:20px}}";
 
 let SalonGiftCard = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.buttonClass = '';
     this.buttonText = 'Buy Gift card';
-    this.primaryColor = colors.Colors.Coral03;
+    this.primaryColor = colors.Colors.Primary;
   }
   openModal() {
     const elBookingModal = document.createElement('div');
     elBookingModal.innerHTML = `
       <salon-gift-card-modal
         salon-id=${this.salonId}
+        primary-color=${this.primaryColor}
       ></salon-gift-card-modal>
     `;
     document.body.appendChild(elBookingModal);
@@ -32,7 +32,7 @@ let SalonGiftCard = class {
     if (!this.buttonClass) {
       const primaryColor = index$1.color(this.primaryColor);
       const primaryColorHover = primaryColor.darken(0.05);
-      buttonStyle = index$2.lib.css({
+      buttonStyle = index$1.lib.css({
         backgroundColor: this.primaryColor,
         borderColor: this.primaryColor,
         color: primaryColor.isLight() ? colors.Colors.Black01 : colors.Colors.White,

package/dist/cjs/salon-latest-reviews.cjs.entry.js

@@ -0,0 +1,95 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-e6bea8f5.js');
+const services = require('./services-eee8f251.js');
+const colors = require('./colors-38421769.js');
+const utils = require('./utils-c5a33b3c.js');
+require('./_commonjsHelpers-5cfcba41.js');
+
+const indexCss = ".salon-latest-reviews .salon-review{min-width:280px}@media (min-width: 768px){.salon-latest-reviews .salon-review{min-width:300px}}";
+
+let SalonLatestReviews = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.primaryColor = colors.Colors.Primary;
+    this.salonReviews = [];
+  }
+  componentWillLoad() {
+    this.fetchData();
+  }
+  async fetchData() {
+    this.isLoading = true;
+    try {
+      const { data: allReviews } = await services.HttpService().fetchSalonReviews(this.salonId, { limit: 5 });
+      this.salonReviews = [...allReviews];
+    }
+    catch (e) { }
+    this.isLoading = false;
+  }
+  render() {
+    if (this.isLoading) {
+      return (index.h("div", { class: "salon-latest-reviews", style: { overflow: 'hidden' } }, index.h("div", { style: { display: 'flex', whiteSpace: 'nowrap' } }, [1, 2, 3, 4, 5].map((fakeId, index$1) => {
+        return (index.h("div", { key: `salon-latest-review--${fakeId}`, class: "salon-review", style: Object.assign({ border: `1px solid ${colors.Colors.Gray02}`, background: colors.Colors.White, borderRadius: '8px', overflow: 'hidden' }, index$1 > 0 ? { marginLeft: '16px' } : {}) }, index.h("div", { class: "card", style: { border: 'none' } }, index.h("div", { class: "card-body" }, index.h("div", { class: "salon-review--user", style: { marginBottom: '16px', overflow: 'hidden' } }, index.h("div", { style: {
+            backgroundColor: colors.Colors.Gray02,
+            borderRadius: '50px',
+            height: '48px',
+            width: '48px',
+            float: 'left',
+          } }), index.h("div", { style: {
+            backgroundColor: colors.Colors.Gray01,
+            height: '16px',
+            width: '120px',
+            marginLeft: '16px',
+            marginTop: '14px',
+            float: 'left',
+          } })), index.h("div", { class: "salon-review--rating", style: { display: 'flex', flexDirection: 'row', marginBottom: '4px' } }, [1, 2, 3, 4, 5].map(() => (index.h("div", { style: {
+            backgroundColor: colors.Colors.Gray01,
+            height: '20px',
+            width: '20px',
+            marginRight: '8px',
+            float: 'left',
+          } })))), index.h("div", { class: "salon-review--rating-text", style: { fontSize: '16px', fontWeight: 'bold', marginTop: '16px' } }, index.h("div", { style: {
+            backgroundColor: colors.Colors.Gray01,
+            height: '16px',
+            width: '132px',
+          } })), index.h("div", { class: "salon-review--detail", style: { marginTop: '8px' } }, index.h("div", { class: "salon-review--description", style: {
+            fontSize: '16px',
+            lineHeight: '26px',
+            overflow: 'hidden',
+          } }, index.h("div", { style: {
+            backgroundColor: colors.Colors.Gray01,
+            height: '16px',
+            width: '240px',
+            float: 'left',
+          } })))))));
+      }))));
+    }
+    const ratingTexts = utils.getRatingText();
+    return (index.h("div", { class: "salon-latest-reviews", style: { overflowX: 'auto' } }, index.h("div", { style: { display: 'flex', whiteSpace: 'nowrap' } }, (this.salonReviews || []).map((review, index$1) => {
+      const { user } = review;
+      return (index.h("div", { class: "salon-review", style: Object.assign({ border: `1px solid ${colors.Colors.Gray02}`, background: colors.Colors.White, borderRadius: '8px', overflow: 'hidden' }, index$1 > 0 ? { marginLeft: '16px' } : {}) }, index.h("div", { class: "card", style: { border: 'none' } }, index.h("div", { class: "card-body" }, index.h("div", { class: "salon-review--user", style: { marginBottom: '16px' } }, index.h("user-avatar", { size: 48, name: index.h("div", { style: { fontSize: '18px', fontWeight: '600' } }, user.fullName), shortName: `${(user.firstName || '').charAt(0)}${(user.lastName || '').charAt(0)}`, avatar: user.avatar, nameStyle: { fontWeight: 'bold' } })), index.h("div", { class: "salon-review--rating", style: { display: 'flex', flexDirection: 'row', marginBottom: '4px' } }, [1, 2, 3, 4, 5].map(score => (index.h("i", { class: score <= review.point ? 'ri-heart-fill' : 'ri-heart-line', style: Object.assign({ fontSize: '16px', marginRight: '4px' }, score <= review.point ? { color: this.primaryColor } : { color: colors.Colors.Gray04 }) }))), index.h("div", { class: "salon-review--rating--date", style: { fontSize: '14px', color: colors.Colors.Gray04, marginLeft: '16px', position: 'relative', top: '2px' } }, services.dayjs_min(review.createdDate).format(services.shortDateYearFormat))), index.h("div", { class: "salon-review--rating-text", style: { fontSize: '16px', fontWeight: 'bold' } }, ratingTexts[review.point]), (review.title || review.description) && (index.h("div", { class: "salon-review--detail", style: { marginTop: '16px' } }, index.h("div", { class: "salon-review--description", style: {
+          fontSize: '16px',
+          lineHeight: '26px',
+          overflow: 'hidden',
+          maxHeight: review.photos.length > 0 ? '52px' : '104px',
+        } }, review.title || review.description))), review.photos.length > 0 && (index.h("div", { style: {
+          display: 'flex',
+          flexDirection: 'row',
+          overflowX: 'auto',
+        } }, review.photos.map(photo => (index.h("div", { style: {
+          border: '1px solid #d9d9d9',
+          position: 'relative',
+          cursor: 'pointer',
+          borderRadius: '2px',
+          height: '66px',
+          marginTop: '12px',
+          marginRight: '12px',
+        } }, index.h("img", { alt: "", src: photo.imageUrlThumb, height: "64", style: { width: 'auto' } }))))))))));
+    }))));
+  }
+};
+SalonLatestReviews.style = indexCss;
+
+exports.salon_latest_reviews = SalonLatestReviews;

package/{cjs/salon-lookbook_2.cjs.entry.js → dist/cjs/salon-lookbook.cjs.entry.js}

@@ -2,12 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-d5de0b9d.js');
-const colors = require('./colors-7f354880.js');
-const services = require('./services-f1102d4a.js');
+const index = require('./index-e6bea8f5.js');
+const colors = require('./colors-38421769.js');
+const services = require('./services-eee8f251.js');
 require('./_commonjsHelpers-5cfcba41.js');
 
-const indexCss$1 = ".salon-loobooks--grid-item{float:left;max-width:150px}@media (max-width: 768px){salon-lookbook .view-header{display:block !important}salon-lookbook .salon-loobook--serch-result{margin-bottom:16px}salon-lookbook .salon-loobook--filter-wrapper>label,salon-lookbook .salon-loobook--sort-wrapper>label{display:none !important}}@media (min-width: 768px){.salon-loobooks--grid-item{max-width:200px}}";
+const indexCss = "@media (max-width: 768px){salon-lookbook .view-header{display:block !important}salon-lookbook .salon-loobook--serch-result{margin-bottom:16px}salon-lookbook .salon-loobook--filter-wrapper>label,salon-lookbook .salon-loobook--sort-wrapper>label{display:none !important}}";
 
 const lookbookSortOptions = [{
     value: 'like',
@@ -58,19 +58,13 @@ let SalonLookbook = class {
         var masonry = new Macy({
           container: '#salon-loobooks--grid',
           useContainerForBreakpoints: true,
-          margin: 12,
-          columns: 7,
+          margin: 16,
+          columns: 5,
           breakAt: {
-            1200: {
-              margin: 16,
-              columns: 6,
-            },
-            992: {
-              margin: 16,
-              columns: 5,
+            1024: {
+              columns: 4,
             },
             768: {
-              margin: 16,
               columns: 3,
             },
             576: {
@@ -122,7 +116,7 @@ let SalonLookbook = class {
       this.salonLookbooks = [];
       this.hideLoadMore = true;
       this.filterBy = filterBy;
-      await this.fetchLookbooks(Object.assign({ page: this.currentPage, sort: this.sortBy }, this.filterBy !== 'all' ? { services: [this.filterBy] } : {}));
+      await this.fetchLookbooks(Object.assign({ page: this.currentPage, sort: this.sortBy }, this.filterBy !== 'all' ? { services: [Number(this.filterBy)] } : {}));
       if (window.masonry) {
         this.isLayoutSetup = false;
       }
@@ -162,10 +156,10 @@ let SalonLookbook = class {
   onClickLookbook(style) {
     const elLookbookModal = document.createElement('div');
     elLookbookModal.innerHTML = `
-      <salon-lookbook-modal
+      <style-detail
         salon-id=${this.salonId}
         salon-lookbook='${JSON.stringify(style)}'
-      ></salon-lookbook-modal>
+      ></style-detail>
     `;
     document.body.appendChild(elLookbookModal);
   }
@@ -199,54 +193,26 @@ let SalonLookbook = class {
   }
   render() {
     return (index.h("div", { class: "salon-loobooks" }, index.h("div", null, index.h("div", { class: "view-content" }, this.renderHeader(), this.salonLookbooks.length > 0 && (index.h("div", { class: "salon-loobooks--grid", id: "salon-loobooks--grid" }, this.salonLookbooks.map(style => {
-      const { caption, fullImageUrlThumb, owner } = style;
+      const { caption, imageThumbMedium, owner } = style;
       return (index.h("div", { class: "salon-lookbook salon-loobooks--grid-item", onClick: () => this.onClickLookbook(style) }, index.h("div", { class: "card", style: {
           background: 'none',
           border: 'none',
-          maxWidth: '200px',
+          // maxWidth: '200px',
         } }, index.h("div", { class: "salon-lookbook--image", style: {
           borderRadius: '8px',
           overflow: 'hidden',
           minHeight: '80px',
-          background: colors.Colors.Gray06,
-        } }, index.h("img", { src: fullImageUrlThumb, alt: caption })), owner && (index.h("div", { class: "card-body", style: { paddingLeft: '0' } }, index.h("user-avatar", { name: owner.name, shortName: `${(owner.firstName || '').charAt(0)}${(owner.lastName || '').charAt(0)}`, avatar: owner.avatar }))))));
-    })))), this.salonLookbooks.length > 0 && !this.hideLoadMore && (index.h("div", { class: "view-footer", style: { paddingTop: '16px', textAlign: 'center' } }, index.h("button", { type: "button", class: "btn btn-light", onClick: () => this.onLoadMore() }, this.isLoadingMore ? 'Loading' : 'Load more'))))));
-  }
-};
-SalonLookbook.style = indexCss$1;
-
-const indexCss = "";
-
-let UserAvatar = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.size = 24;
-  }
-  render() {
-    return (index.h("div", { style: { display: "flex", alignItems: "center" } }, this.avatar && (index.h("div", { style: {
-        backgroundImage: `url("${this.avatar}")`,
-        backgroundColor: colors.Colors.Gray06,
-        backgroundPosition: 'center center',
-        backgroundSize: 'cover',
-        borderRadius: '50%',
-        height: `${this.size}px`,
-        width: `${this.size}px`,
-        minWidth: `${this.size}px`,
-      } })), !this.avatar && (index.h("div", { style: {
-        backgroundColor: colors.Colors.Gray06,
-        backgroundPosition: 'center center',
-        backgroundSize: 'cover',
-        borderRadius: '50%',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        height: `${this.size}px`,
-        width: `${this.size}px`,
-        minWidth: `${this.size}px`,
-      } }, this.shortName)), index.h("div", { style: Object.assign({ flexShrink: '1', flexGrow: '1', marginLeft: '12px', overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis' }, this.nameStyle) }, this.name)));
+          background: colors.Colors.Gray01,
+        } }, index.h("img", { src: imageThumbMedium, alt: caption, style: { maxWidth: '100%' } })), owner && (index.h("div", { class: "card-body", style: { paddingLeft: '0' } }, index.h("user-avatar", { name: owner.fullName, shortName: `${(owner.firstName || '').charAt(0)}${(owner.lastName || '').charAt(0)}`, avatar: owner.avatar }))))));
+    })))), this.salonLookbooks.length > 0 && !this.hideLoadMore && (index.h("div", { class: "view-footer", style: { paddingTop: '16px', textAlign: 'center' } }, index.h("button", { type: "button", class: "btn btn-light btn-lg", onClick: () => this.onLoadMore(), style: {
+        background: colors.Colors.White,
+        border: `1px solid ${colors.Colors.Gray02}`,
+        borderRadius: '4px',
+        paddingLeft: '24px',
+        paddingRight: '24px',
+      } }, this.isLoadingMore ? 'Loading' : 'Load more'))))));
   }
 };
-UserAvatar.style = indexCss;
+SalonLookbook.style = indexCss;
 
 exports.salon_lookbook = SalonLookbook;
-exports.user_avatar = UserAvatar;

package/{cjs → dist/cjs}/salon-ranking.cjs.entry.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-d5de0b9d.js');
-const colors = require('./colors-7f354880.js');
+const index = require('./index-e6bea8f5.js');
+const colors = require('./colors-38421769.js');
 
 const indexCss = "salon-ranking{display:block}";
 
@@ -16,30 +16,30 @@ let SalonRanking = class {
   getRankingData(ranking) {
     if (ranking === 5) {
       return {
-        color: colors.Colors.Danger,
+        color: colors.Colors.Primary,
         text: 'Viral',
       };
     }
     if (ranking === 4) {
       return {
-        color: colors.Colors.Pink03,
+        color: colors.Colors.Orange03,
         text: 'Advancing',
       };
     }
     if (ranking === 3) {
       return {
-        color: colors.Colors.Orange03,
+        color: colors.Colors.Lilac03,
         text: 'Progressing',
       };
     }
     if (ranking === 2) {
       return {
-        color: colors.Colors.DarkBlue03,
+        color: colors.Colors.Blue03,
         text: 'Building',
       };
     }
     return {
-      color: colors.Colors.Gray01,
+      color: colors.Colors.Gray05,
       text: 'Starting',
     };
   }