favesalon-embed 1.0.1 → 1.0.2

package/dist/cjs/chat-button.cjs.entry.js

@@ -1,118 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-47c2a5f6.js');
-const services = require('./services-125c82d8.js');
-const relativeTime = require('./relativeTime-3721080d.js');
-require('./_commonjsHelpers-5cfcba41.js');
-require('./colors-38421769.js');
-
-const indexCss = "chat-button{display:inline-block;position:relative}.chat-button--indicator{cursor:pointer;position:absolute;inset:0}.chat-button--counter{background-color:rgb(240, 90, 97);border:1px solid rgb(255, 255, 255);position:absolute;right:-6px;bottom:12px;height:8px;width:8px;-moz-border-radius:8px;-webkit-border-radius:8px;border-radius:8px}.chat-box{background-color:#fff;display:flex;flex-direction:column;position:fixed;inset:0px;z-index:20000}.chat-box--header{display:flex;justify-content:space-between;padding:16px;position:relative}.chat-box--header-title{color:#fff;font-size:20px;font-weight:600;line-height:1;display:flex;align-items:center;justify-content:space-between;margin:0}.chat-message{overflow:hidden;clear:both;min-width:240px}.chat-message--meta{display:flex}.chat-message--message{background-color:#F1F1F1;padding:8px 12px;position:relative;float:left;margin-top:6px;-moz-border-radius:0 10px 10px 10px;-webkit-border-radius:0 10px 10px 10px;border-radius:0 10px 10px 10px}.chat-conversation--time{clear:both;color:#999;font-size:75%;padding-top:2px}.chat-message.is-owner .chat-message--content{margin-left:12px}.chat-message.is-guest .chat-message--meta{flex-direction:row-reverse}.chat-message.is-guest .chat-message--message{background-color:#EFF7FF;float:right;margin-right:12px;text-align:right;-moz-border-radius:10px 0 10px 10px;-webkit-border-radius:10px 0 10px 10px;border-radius:10px 0 10px 10px}@media (min-width: 768px){.chat-box{border:1px solid #fff;left:unset;top:unset;right:1px;bottom:0px;height:420px;max-height:90vh;width:600px;-moz-border-radius:8px 8px 0px 0px;-webkit-border-radius:8px 8px 0px 0px;border-radius:8px 8px 0px 0px;-moz-box-shadow:rgba(0, 0, 0, 0.1) 0px 0px 24px;-webkit-box-shadow:rgba(0, 0, 0, 0.1) 0px 0px 24px;box-shadow:rgba(0, 0, 0, 0.1) 0px 0px 24px}.chat-box--header{-moz-border-radius:8px 8px 0px 0px;-webkit-border-radius:8px 8px 0px 0px;border-radius:8px 8px 0px 0px}}";
-
-services.dayjs_min.extend(relativeTime.relativeTime);
-const ChatButton = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.onSubmitMessage = async () => {
-      try {
-        const elNewMessage = document.getElementById('chat-form--input');
-        await services.HttpService().sendChatMessage({
-          message: elNewMessage.value,
-          senderId: this.senderInfo.id,
-          chatRoomId: this.chatRoom.uid,
-        });
-        elNewMessage.value = '';
-      }
-      catch (error) { }
-    };
-    this.markMessagesAsRead = async () => {
-      try {
-        const unreadMessages = (this.chatMessages || []).filter(message => {
-          return Boolean(message.unRead) && message.senderId !== this.senderInfo.id;
-        });
-        if (unreadMessages.length > 0) {
-          await services.HttpService().markMessagesAsRead(this.chatRoom.uid, unreadMessages);
-        }
-      }
-      catch (e) { }
-    };
-    this.scrollToLastMessage = () => {
-      const targetElement = document.getElementById('chat--last-message');
-      targetElement && targetElement.scrollIntoView();
-    };
-    this.renderMessage = (chatMessage) => {
-      const { message, senderId, timestamp } = chatMessage;
-      const isOwner = this.senderInfo.id === senderId;
-      return (index.h("div", { class: `chat-message ${isOwner ? 'is-owner' : 'is-guest'}` }, index.h("div", { class: "chat-message--meta" }, index.h("user-avatar", { size: 40, shortName: String(((isOwner ? this.senderInfo : this.receiverInfo) || {}).fullName || '').charAt(0), avatar: ((isOwner ? this.senderInfo : this.receiverInfo) || {}).avatar }), index.h("div", { class: "chat-message--content" }, index.h("div", { class: "chat-message--message" }, message), timestamp && (index.h("div", { class: "chat-conversation--time" }, services.dayjs_min(timestamp).format('HH:mm')))))));
-    };
-    this.renderMessages = () => {
-      const isEmpty = (this.chatMessages || []).length === 0;
-      return (index.h("div", { class: "chat-messages" }, !isEmpty && this.chatMessages.map(this.renderMessage), isEmpty && (index.h("div", { style: { paddingTop: '48px', textAlign: 'center' } }, index.h("i", { class: "ri-bubble-chart-line", style: { fontSize: '48px' } }), index.h("div", { style: { color: 'rgba(0, 0, 0, 0.45)', marginTop: '8px' } }, "Enter a message on below to get starting"))), index.h("div", { id: "chat--last-message" })));
-    };
-    this.primaryColor = undefined;
-    this.accessToken = undefined;
-    this.senderId = undefined;
-    this.receiverId = undefined;
-    this.senderInfo = {};
-    this.receiverInfo = {};
-    this.chatRoom = undefined;
-    this.chatMessages = undefined;
-    this.isChatExpanded = undefined;
-  }
-  componentWillLoad() {
-    this.fetchData();
-  }
-  componentDidLoad() {
-    this.scrollToLastMessage();
-    this.markMessagesAsRead();
-  }
-  componentWillUpdate() {
-    this.scrollToLastMessage();
-  }
-  async fetchData() {
-    try {
-      this.chatRoom = await services.HttpService().createChatRoom(this.receiverId, this.accessToken);
-      if (this.chatRoom) {
-        services.HttpService().fetchChatMessages(this.chatRoom.uid, (messages) => this.chatMessages = messages);
-        this.senderInfo = this.chatRoom.members.find(user => user.id === Number(this.senderId));
-        this.receiverInfo = this.chatRoom.members.find(user => user.id === Number(this.receiverId));
-      }
-    }
-    catch (e) { }
-  }
-  renderForm() {
-    return (index.h("div", { style: { display: 'flex', height: '100%' } }, index.h("input", { id: "chat-form--input", type: "text", class: "form-control", placeholder: "Enter a message...", style: { border: 'none' }, onKeyPress: (evt) => {
-        if (evt.key === 'Enter') {
-          evt.preventDefault();
-          this.onSubmitMessage();
-        }
-      } }), index.h("button", { type: "button", class: "btn btn-link", style: {
-        textDecoration: 'none',
-        display: 'flex',
-        height: '100%',
-        alignItems: 'center',
-      }, onClick: () => this.onSubmitMessage() }, index.h("i", { class: "ri-send-plane-2-line", style: { color: '#111', fontSize: '24px', lineHeight: '1' } }))));
-  }
-  render() {
-    const unreadMessages = (this.chatMessages || []).filter(message => {
-      return Boolean(message.unRead) && message.senderId !== this.senderInfo.id;
-    });
-    return (index.h("div", null, index.h("div", { class: "chat-button--indicator", onClick: () => this.isChatExpanded = true }, unreadMessages.length > 0 && index.h("span", { class: "chat-button--counter" })), index.h("div", { class: "chat-box", style: this.isChatExpanded ? {} : { display: 'none' } }, index.h("div", { class: "chat-box--header", style: {
-        backgroundColor: this.primaryColor || '#f05a61',
-      } }, index.h("h3", { class: "chat-box--header-title" }, "Chat"), index.h("div", { class: "salon-modal--close", onClick: () => this.isChatExpanded = false, style: { position: 'static' } })), index.h("div", { style: {
-        flexShrink: '1',
-        flexGrow: '1',
-        overflowY: 'auto',
-        padding: '16px',
-      } }, this.renderMessages()), index.h("div", { style: {
-        height: '50px',
-        minHeight: '50px',
-        paddingTop: '1',
-        borderTop: '1px solid rgb(245, 245, 245)',
-      } }, this.renderForm()))));
-  }
-};
-ChatButton.style = indexCss;
-
-exports.chat_button = ChatButton;

package/dist/cjs/colors-38421769.js

@@ -1,69 +0,0 @@
-'use strict';
-
-const Colors = {
-  TextColor: '#141414',
-  Black: '#000000',
-  White: '#ffffff',
-  Primary: '#F05A61',
-  Secondary: '#001529',
-  Black01: '#262626',
-  Black02: '#1f1f1f',
-  Black03: '#141414',
-  Gray01: '#F5F5F5',
-  Gray02: '#EFEFEF',
-  Gray03: '#DBDBDB',
-  Gray04: '#999999',
-  Gray05: '#666666',
-  Red01: '#FEEFEF',
-  Red02: '#F9BDC0',
-  Red03: '#F05A61',
-  Red04: '#C0484E',
-  Red05: '#90363A',
-  Orange01: '#FFF4F0',
-  Orange02: '#FFD1C3',
-  Orange03: '#FF8D69',
-  Orange04: '#CC7154',
-  Orange05: '#99553F',
-  Yellow01: '#FDFBF4',
-  Yellow02: '#F8EDD3',
-  Yellow03: '#EED291',
-  Yellow04: '#BEA874',
-  Yellow05: '#8F7E57',
-  Lilac01: '#F3F0F4',
-  Lilac02: '#CFC1D4',
-  Lilac03: '#886594',
-  Lilac04: '#6D5176',
-  Lilac05: '#523D59',
-  Blue01: '#EAECEE',
-  Blue02: '#AAB1BD',
-  Blue03: '#2B3C59',
-  Blue04: '#223047',
-  Blue05: '#1A2435',
-  Green01: '#ECF7ED',
-  Green02: '#B2E1B9',
-  Green03: '#3FB34F',
-  Green04: '#328F3F',
-  Green05: '#266B2F',
-  Success01: '#EEF9E8',
-  Success02: '#BAE7A3',
-  Success03: '#52C41A',
-  Success04: '#429D15',
-  Success05: '#317610',
-  Error01: '#FFEDED',
-  Error02: '#FFB8B9',
-  Error03: '#FF4D4F',
-  Error04: '#CC3E3F',
-  Error05: '#992E2F',
-  Warning01: '#FFF7E8',
-  Warning02: '#FDDEA1',
-  Warning03: '#FAAD14',
-  Warning04: '#C88A10',
-  Warning05: '#96680C',
-  Info01: '#E8F4FF',
-  Info02: '#A3D3FF',
-  Info03: '#1890FF',
-  Info04: '#1373CC',
-  Info05: '#0E5699',
-};
-
-exports.Colors = Colors;

package/dist/cjs/favesalon-embed.cjs.js

@@ -1,24 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-47c2a5f6.js');
-require('./global-9073d10e.js');
-
-/*
- Stencil Client Patch Browser v2.22.3 | MIT Licensed | https://stenciljs.com
- */
-const patchBrowser = () => {
-    const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('favesalon-embed.cjs.js', document.baseURI).href));
-    const opts = {};
-    if (importMeta !== '') {
-        opts.resourcesUrl = new URL('.', importMeta).href;
-    }
-    return index.promiseResolve(opts);
-};
-
-patchBrowser().then(options => {
-  return index.bootstrapLazy([["chat-button.cjs",[[0,"chat-button",{"primaryColor":[1,"primary-color"],"accessToken":[1,"access-token"],"senderId":[1,"sender-id"],"receiverId":[1,"receiver-id"],"senderInfo":[32],"receiverInfo":[32],"chatRoom":[32],"chatMessages":[32],"isChatExpanded":[32],"fetchData":[64]}]]],["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]}]]],["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"]}]]],["user-avatar.cjs",[[0,"user-avatar",{"size":[2],"name":[1],"nameStyle":[16],"shortName":[1,"short-name"],"avatar":[1]}]]]], options);
-});
-
-exports.setNonce = index.setNonce;

package/dist/cjs/google-map_5.cjs.entry.js

@@ -1,310 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-47c2a5f6.js');
-const colors = require('./colors-38421769.js');
-const services = require('./services-125c82d8.js');
-const utils = require('./utils-c5a33b3c.js');
-require('./_commonjsHelpers-5cfcba41.js');
-
-const indexCss$4 = "google-map{display:block;width:100%;height:100%}";
-
-const GoogleMap = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.locationName = undefined;
-    this.locationAddress = undefined;
-  }
-  render() {
-    const mapPlaceholder = index.getAssetPath('./assets/map--placeholder.jpeg');
-    return (index.h("div", { style: {
-        backgroundImage: `url("${mapPlaceholder}")`,
-        backgroundColor: colors.Colors.Gray01,
-        backgroundPosition: 'center center',
-        backgroundRepeat: 'no-repeat',
-        backgroundSize: 'cover',
-        borderRadius: '8px',
-        position: 'relative',
-        height: '296px',
-      } }, index.h("div", { style: {
-        position: 'absolute',
-        left: '50%',
-        top: '50%',
-        transform: 'translate(-50%, -50%)',
-      } }, index.h("a", { target: "_blank", rel: "noopener noreferrer", href: `https://www.google.com/maps/search/?api=1&query=${this.locationAddress}`, style: {
-        backgroundColor: colors.Colors.Red01,
-        border: `1px solid ${colors.Colors.Red02}`,
-        borderRadius: '4px',
-        color: colors.Colors.TextColor,
-        padding: '12px',
-        display: 'flex',
-        flexWrap: 'wrap',
-        height: 'auto',
-        width: 'auto',
-        whiteSpace: 'normal',
-        textAlign: 'left',
-        maxWidth: '320px',
-        textDecoration: 'none',
-      } }, this.locationName && index.h("span", { style: { fontSize: '16px', marginBottom: '4px' } }, this.locationName), this.locationAddress && index.h("span", { style: { fontSize: '12px' } }, this.locationAddress)), index.h("div", { style: { marginTop: '8px', textAlign: 'center' } }, index.h("i", { class: "ri-map-pin-fill", style: { fontSize: '24px' } })))));
-  }
-  static get assetsDirs() { return ["assets"]; }
-};
-GoogleMap.style = indexCss$4;
-
-const indexCss$3 = "";
-
-const SalonInfo = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.salonId = undefined;
-    this.salonInfo = undefined;
-  }
-  componentWillLoad() {
-    this.fetchData();
-  }
-  async fetchData() {
-    try {
-      this.salonInfo = await services.HttpService().fetchSalonInfo(this.salonId);
-    }
-    catch (e) { }
-  }
-  render() {
-    return (index.h("div", { class: "salon-info" }, index.h("div", { class: "container" }, index.h("div", { class: "salon-info--schedules", style: { marginBottom: '24px' } }, index.h("salon-schedules", { "with-border": true, "is-loading": !this.salonInfo, "salon-id": 49989, "salon-info": JSON.stringify(this.salonInfo) })), index.h("div", { class: "row" }, index.h("div", { class: "col-md-5", style: { marginBottom: '24px' } }, index.h("salon-locations", { "with-border": true, "is-loading": !this.salonInfo, "salon-id": 49989, "salon-info": JSON.stringify(this.salonInfo) })), index.h("div", { class: "col-md-7", style: { marginBottom: '24px' } }, index.h("salon-latest-styles", { "with-border": true, "is-loading": !this.salonInfo, "salon-id": 49989, "salon-info": JSON.stringify(this.salonInfo) }))))));
-  }
-};
-SalonInfo.style = indexCss$3;
-
-const indexCss$2 = "salon-latest-styles .view--salon-styles--item{width:120px;height:120px}@media (min-width: 1024px){salon-latest-styles .view--salon-styles--item{width:200px;height:200px}}";
-
-const SalonLatestStyles = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.salonId = undefined;
-    this.isLoading = undefined;
-    this.withBorder = undefined;
-    this.isLoadingState = undefined;
-    this.latestStyles = undefined;
-  }
-  componentDidLoad() {
-    this.fetchData();
-  }
-  async fetchData() {
-    this.isLoadingState = true;
-    try {
-      const promises = [
-        services.HttpService().fetchSalonLatestStyles(this.salonId, { limit: 6 })
-          .then(salonStyles => this.latestStyles = salonStyles),
-      ];
-      return Promise.all(promises)
-        .then(() => this.isLoadingState = false)
-        .catch(() => this.isLoadingState = false);
-    }
-    catch (e) { }
-  }
-  onClickLookbook(style) {
-    const elLookbookModal = document.createElement('div');
-    elLookbookModal.innerHTML = `
-      <style-detail
-        salon-id=${this.salonId}
-        salon-lookbook='${JSON.stringify(style)}'
-      ></style-detail>
-    `;
-    document.body.appendChild(elLookbookModal);
-  }
-  render() {
-    if (this.isLoading || this.isLoadingState) {
-      return (index.h("div", { class: "view view--salon-styles" }, index.h("div", { class: "view-content", style: this.withBorder ? { border: `1px solid ${colors.Colors.Gray02}`, borderRadius: '4px' } : { padding: '0px' } }, index.h("div", { style: {
-          backgroundColor: colors.Colors.Gray02,
-          height: '20px',
-          width: '120px',
-        } }), index.h("div", { style: { marginTop: '24px' } }, index.h("div", { style: {
-          overflow: 'hidden',
-          marginLeft: '-16px',
-          marginBottom: '-16px',
-        } }, [1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((fakeId, idx) => (index.h("div", { key: `style-listing--item-${fakeId}-${idx}`, style: {
-          float: 'left',
-          paddingLeft: '16px',
-          marginBottom: '16px',
-        } }, index.h("div", { style: {
-          backgroundColor: colors.Colors.Gray01,
-          borderRadius: '8px',
-          width: '120px',
-          height: '120px',
-          overflow: 'hidden',
-          position: 'relative',
-          cursor: 'pointer',
-        } })))))))));
-    }
-    return (index.h("div", { class: "view view--salon-styles" }, index.h("div", { class: "view-content", style: this.withBorder ? { border: `1px solid ${colors.Colors.Gray02}`, borderRadius: '4px' } : { padding: '0px' } }, index.h("div", { style: { fontSize: '18px', fontWeight: 'bold' } }, "Photos"), index.h("div", { style: {
-        overflow: 'hidden',
-        marginLeft: '-16px',
-        marginBottom: '-16px',
-        marginTop: '16px',
-      } }, (this.latestStyles || []).map((faveStyle, idx) => {
-      const { imageThumb, albumMedias } = faveStyle;
-      const firstMedia = albumMedias.length > 0 ? albumMedias[0] : null;
-      const isVideo = firstMedia ? services.isVideoMedia(firstMedia) : false;
-      return (index.h("div", { key: `style-listing--item-${faveStyle.id}-${idx}`, style: {
-          float: 'left',
-          paddingLeft: '16px',
-          marginBottom: '16px',
-        } }, index.h("div", { class: "view--salon-styles--item", style: Object.assign({ backgroundColor: colors.Colors.Gray01, borderRadius: '8px', overflow: 'hidden', position: 'relative', cursor: 'pointer' }, !isVideo && firstMedia ? {
-          backgroundImage: `url("${firstMedia.imageThumb || firstMedia.imageThumbMedium}")`,
-          backgroundRepeat: 'no-repeat',
-          backgroundPosition: 'center center',
-          backgroundSize: 'cover',
-        } : {}), onClick: () => this.onClickLookbook(faveStyle) }, isVideo && firstMedia && (index.h("div", null, index.h("video", { muted: true, width: "100%", height: "100%", poster: imageThumb }, index.h("source", { src: firstMedia.mediaUrl, type: "video/mp4" })), index.h("i", { class: "ri-play-circle-fill", style: {
-          fontSize: '48px',
-          color: colors.Colors.TextColor,
-          position: 'absolute',
-          left: '50%',
-          top: '50%',
-          transform: 'translate(-50%, -50%)',
-        } }))))));
-    })))));
-  }
-};
-SalonLatestStyles.style = indexCss$2;
-
-const indexCss$1 = "@media (min-width: 768px){salon-locations .salon-contact--links{overflow:hidden;margin-left:-32px}salon-locations .salon-contact--links-item{float:left;display:flex;flex-direction:row;align-items:center;font-size:16px;min-width:300px;padding-left:32px}salon-locations .salon-contact--links-item:nth-child(2n+1){clear:left}salon-locations .salon-contact--links-item+.salon-contact--links-item{margin-top:8px}}";
-
-const SalonLocations = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.salonId = undefined;
-    this.salonInfo = undefined;
-    this.isLoading = undefined;
-    this.withBorder = undefined;
-    this.salonInfoState = undefined;
-  }
-  componentWillLoad() {
-    if (this.salonInfo) {
-      this.salonInfoState = JSON.parse(this.salonInfo);
-    }
-    else {
-      this.fetchData();
-    }
-  }
-  fetchData() {
-    try {
-      services.HttpService().fetchSalonInfo(this.salonId)
-        .then(salonInfo => this.salonInfoState = salonInfo);
-    }
-    catch (e) { }
-  }
-  render() {
-    if (this.isLoading) {
-      return (index.h("div", { class: "view view--salon-locations" }, index.h("div", { class: "view-content", style: this.withBorder ? { border: `1px solid ${colors.Colors.Gray02}`, borderRadius: '4px' } : { padding: '0px' } }, index.h("div", { style: {
-          backgroundColor: colors.Colors.Gray02,
-          height: '20px',
-          width: '120px',
-        } }), index.h("div", { style: { marginTop: '24px' } }, index.h("div", { style: {
-          backgroundColor: colors.Colors.Gray01,
-          height: '16px',
-          width: '50%',
-        } }), index.h("div", { style: {
-          backgroundColor: colors.Colors.Gray01,
-          height: '16px',
-          width: '50%',
-          marginTop: '8px',
-        } }), index.h("div", { style: {
-          backgroundColor: colors.Colors.Gray01,
-          height: '192px',
-          width: '100%',
-          marginTop: '24px',
-        } })))));
-    }
-    const { businessPhone, businessName, website, email, } = this.salonInfoState || {};
-    const websiteUrl = utils.formatWebsiteUrl(website);
-    const fullAddress = utils.formatFullAddress(this.salonInfoState);
-    return (index.h("div", { class: "view view--salon-locations" }, index.h("div", { class: "view-content", style: this.withBorder ? { border: `1px solid ${colors.Colors.Gray02}`, borderRadius: '4px' } : { padding: '0px' } }, index.h("div", { style: { fontSize: '18px', fontWeight: 'bold' } }, "Contact"), index.h("div", { class: "salon-contact--links", style: { marginTop: '16px' } }, businessPhone && (index.h("div", { class: "salon-contact--links-item" }, index.h("i", { class: "ri-phone-line", style: { color: colors.Colors.Gray04, fontSize: '18px', marginRight: '6px' } }), " ", index.h("a", { href: `tel:${businessPhone}`, style: { color: colors.Colors.TextColor, textDecoration: 'none' } }, businessPhone))), websiteUrl && (index.h("div", { class: "salon-contact--links-item" }, index.h("i", { class: "ri-links-line", style: { color: colors.Colors.Gray04, fontSize: '18px', marginRight: '6px' } }), " ", index.h("a", { target: websiteUrl && websiteUrl.indexOf(window.location.hostname) === -1 ? '_blank' : undefined, href: websiteUrl, style: { color: colors.Colors.TextColor, textDecoration: 'none' } }, websiteUrl))), email && (index.h("div", { class: "salon-contact--links-item" }, index.h("i", { class: "ri-mail-line", style: { color: colors.Colors.Gray04, fontSize: '18px', marginRight: '6px' } }), " ", index.h("a", { href: `mailto:${email}`, style: { color: colors.Colors.TextColor, textDecoration: 'none' } }, email)))), index.h("div", { class: "view--salon-info--map", style: { marginTop: '24px' } }, index.h("google-map", { "location-name": businessName, "location-address": fullAddress })))));
-  }
-};
-SalonLocations.style = indexCss$1;
-
-const indexCss = "salon-schedules .salon-schedules--day{display:flex;flex-direction:row;min-width:240px}@media (min-width: 768px){salon-schedules .salon-schedules--dates{overflow:hidden;margin-left:-32px}salon-schedules .salon-schedules--day{float:left;padding-left:32px}}";
-
-const SalonSchedules = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.salonId = undefined;
-    this.salonInfo = undefined;
-    this.isLoading = undefined;
-    this.withBorder = undefined;
-    this.salonInfoState = undefined;
-  }
-  componentWillLoad() {
-    if (this.salonInfo) {
-      this.salonInfoState = JSON.parse(this.salonInfo);
-    }
-    else {
-      this.fetchData();
-    }
-  }
-  fetchData() {
-    try {
-      services.HttpService().fetchSalonInfo(this.salonId)
-        .then(salonInfo => this.salonInfoState = salonInfo);
-    }
-    catch (e) { }
-  }
-  renderBusinessHour(businessHour) {
-    if (businessHour.status === services.BusinessHourStatus.ByAppointment) {
-      return 'By Appointment';
-    }
-    if (businessHour.status === services.BusinessHourStatus.Close) {
-      return 'Close';
-    }
-    return `${businessHour.openTime} - ${businessHour.closeTime}`;
-  }
-  render() {
-    if (this.isLoading) {
-      return (index.h("div", { class: "view view--salon-contact" }, index.h("div", { class: "view-content", style: this.withBorder ? { border: `1px solid ${colors.Colors.Gray02}`, borderRadius: '4px' } : { padding: '0px' } }, index.h("div", { style: {
-          backgroundColor: colors.Colors.Gray02,
-          height: '20px',
-          width: '120px',
-        } }), index.h("div", { style: { marginTop: '24px' } }, index.h("div", { style: {
-          backgroundColor: colors.Colors.Gray01,
-          height: '16px',
-          width: '30%',
-        } }), index.h("div", { style: {
-          backgroundColor: colors.Colors.Gray01,
-          height: '16px',
-          width: '40%',
-          marginTop: '8px',
-        } }), index.h("div", { style: {
-          backgroundColor: colors.Colors.Gray01,
-          height: '16px',
-          width: '75%',
-          marginTop: '12px',
-        } }), index.h("div", { style: {
-          backgroundColor: colors.Colors.Gray01,
-          height: '16px',
-          width: '75%',
-          marginTop: '8px',
-        } })), index.h("div", { style: { marginTop: '24px' } }, index.h("div", { style: {
-          overflow: 'hidden',
-          marginLeft: '-16px',
-          marginBottom: '-16px',
-        } }, [1, 2, 3, 4, 5, 6, 7].map((fakeId, idx) => (index.h("div", { key: `style-listing--item-${fakeId}-${idx}`, style: {
-          float: 'left',
-          paddingLeft: '16px',
-          marginBottom: '16px',
-        } }, index.h("div", { style: {
-          backgroundColor: colors.Colors.Gray01,
-          width: '120px',
-          height: '20px',
-        } })))))))));
-    }
-    const { about, businessHours, } = (this.salonInfoState || {});
-    return (index.h("div", { class: "view view--salon-contact" }, index.h("div", { class: "view-content", style: this.withBorder ? { border: `1px solid ${colors.Colors.Gray02}`, borderRadius: '4px' } : { padding: '0px' } }, index.h("div", { style: { fontSize: '18px', fontWeight: 'bold' } }, "About"), about && (index.h("div", { class: "salon-contact--info--desc", style: { fontSize: '16px', marginTop: '16px' }, innerHTML: about })), businessHours && businessHours.length > 0 && (index.h("div", { class: "salon-schedules", style: { marginTop: '24px' } }, index.h("div", { class: "salon-schedules--title", style: { fontSize: '16px', fontWeight: 'bold' } }, "Working hours"), index.h("div", { class: "salon-schedules--dates" }, index.h("div", { class: "salon-schedules--day", style: { marginTop: '8px' } }, index.h("div", { class: "salon-schedules--day-name", style: { fontWeight: 'bold', minWidth: '40px' } }, "Mon"), index.h("div", { class: "salon-schedules--day-time" }, this.renderBusinessHour(businessHours[0]))), index.h("div", { class: "salon-schedules--day", style: { marginTop: '8px' } }, index.h("div", { class: "salon-schedules--day-name", style: { fontWeight: 'bold', minWidth: '40px' } }, "Tue"), index.h("div", { class: "salon-schedules--day-time" }, this.renderBusinessHour(businessHours[1]))), index.h("div", { class: "salon-schedules--day", style: { marginTop: '8px' } }, index.h("div", { class: "salon-schedules--day-name", style: { fontWeight: 'bold', minWidth: '40px' } }, "Wed"), index.h("div", { class: "salon-schedules--day-time" }, this.renderBusinessHour(businessHours[2]))), index.h("div", { class: "salon-schedules--day", style: { marginTop: '8px' } }, index.h("div", { class: "salon-schedules--day-name", style: { fontWeight: 'bold', minWidth: '40px' } }, "Thur"), index.h("div", { class: "salon-schedules--day-time" }, this.renderBusinessHour(businessHours[3]))), index.h("div", { class: "salon-schedules--day", style: { marginTop: '8px' } }, index.h("div", { class: "salon-schedules--day-name", style: { fontWeight: 'bold', minWidth: '40px' } }, "Fri"), index.h("div", { class: "salon-schedules--day-time" }, this.renderBusinessHour(businessHours[4]))), index.h("div", { class: "salon-schedules--day", style: { marginTop: '8px' } }, index.h("div", { class: "salon-schedules--day-name", style: { fontWeight: 'bold', minWidth: '40px' } }, "Sat"), index.h("div", { class: "salon-schedules--day-time" }, this.renderBusinessHour(businessHours[5]))), index.h("div", { class: "salon-schedules--day", style: { marginTop: '8px' } }, index.h("div", { class: "salon-schedules--day-name", style: { fontWeight: 'bold', minWidth: '40px' } }, "Sun"), index.h("div", { class: "salon-schedules--day-time" }, this.renderBusinessHour(businessHours[6])))))))));
-  }
-};
-SalonSchedules.style = indexCss;
-
-exports.google_map = GoogleMap;
-exports.salon_info = SalonInfo;
-exports.salon_latest_styles = SalonLatestStyles;
-exports.salon_locations = SalonLocations;
-exports.salon_schedules = SalonSchedules;