favesalon-embed 0.0.4 → 0.1.0

package/{collection → dist/collection}/components/salon-lookbook/index.css

@@ -1,7 +1,3 @@
-.salon-loobooks--grid-item {
-  float: left;
-  max-width: 150px;
-}
 @media (max-width: 768px) {
   salon-lookbook .view-header {
     display: block !important;
@@ -14,8 +10,3 @@
     display: none !important;
   }
 }
-@media (min-width: 768px) {
-  .salon-loobooks--grid-item {
-    max-width: 200px;
-  }
-}

package/{collection → dist/collection}/components/salon-lookbook/index.js

@@ -49,19 +49,13 @@ export class SalonLookbook {
         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: {
@@ -113,7 +107,7 @@ export class SalonLookbook {
       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;
       }
@@ -153,10 +147,10 @@ export class SalonLookbook {
   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);
   }
@@ -205,25 +199,31 @@ export class SalonLookbook {
         h("div", { class: "view-content" },
           this.renderHeader(),
           this.salonLookbooks.length > 0 && (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 (h("div", { class: "salon-lookbook salon-loobooks--grid-item", onClick: () => this.onClickLookbook(style) },
               h("div", { class: "card", style: {
                   background: 'none',
                   border: 'none',
-                  maxWidth: '200px',
+                  // maxWidth: '200px',
                 } },
                 h("div", { class: "salon-lookbook--image", style: {
                     borderRadius: '8px',
                     overflow: 'hidden',
                     minHeight: '80px',
-                    background: Colors.Gray06,
+                    background: Colors.Gray01,
                   } },
-                  h("img", { src: fullImageUrlThumb, alt: caption })),
+                  h("img", { src: imageThumbMedium, alt: caption, style: { maxWidth: '100%' } })),
                 owner && (h("div", { class: "card-body", style: { paddingLeft: '0' } },
-                  h("user-avatar", { name: owner.name, shortName: `${(owner.firstName || '').charAt(0)}${(owner.lastName || '').charAt(0)}`, avatar: owner.avatar }))))));
+                  h("user-avatar", { name: owner.fullName, shortName: `${(owner.firstName || '').charAt(0)}${(owner.lastName || '').charAt(0)}`, avatar: owner.avatar }))))));
           })))),
         this.salonLookbooks.length > 0 && !this.hideLoadMore && (h("div", { class: "view-footer", style: { paddingTop: '16px', textAlign: 'center' } },
-          h("button", { type: "button", class: "btn btn-light", onClick: () => this.onLoadMore() }, this.isLoadingMore ? 'Loading' : 'Load more'))))));
+          h("button", { type: "button", class: "btn btn-light btn-lg", onClick: () => this.onLoadMore(), style: {
+              background: Colors.White,
+              border: `1px solid ${Colors.Gray02}`,
+              borderRadius: '4px',
+              paddingLeft: '24px',
+              paddingRight: '24px',
+            } }, this.isLoadingMore ? 'Loading' : 'Load more'))))));
   }
   static get is() { return "salon-lookbook"; }
   static get originalStyleUrls() { return {

package/{collection → dist/collection}/components/salon-ranking/index.js

@@ -8,30 +8,30 @@ export class SalonRanking {
   getRankingData(ranking) {
     if (ranking === 5) {
       return {
-        color: Colors.Danger,
+        color: Colors.Primary,
         text: 'Viral',
       };
     }
     if (ranking === 4) {
       return {
-        color: Colors.Pink03,
+        color: Colors.Orange03,
         text: 'Advancing',
       };
     }
     if (ranking === 3) {
       return {
-        color: Colors.Orange03,
+        color: Colors.Lilac03,
         text: 'Progressing',
       };
     }
     if (ranking === 2) {
       return {
-        color: Colors.DarkBlue03,
+        color: Colors.Blue03,
         text: 'Building',
       };
     }
     return {
-      color: Colors.Gray01,
+      color: Colors.Gray05,
       text: 'Starting',
     };
   }

package/dist/collection/components/salon-reviews/index.js

@@ -0,0 +1,286 @@
+import { Component, Prop, h, State } from '@stencil/core';
+import dayjs from 'dayjs';
+import { Colors } from '../../constants/colors';
+import { shortDateYearFormat } from '../../types/common';
+import HttpService from '../../services/services';
+const pageLimited = 10;
+const sortOptions = [{
+    value: 'newest',
+    label: 'Newest first',
+  }, {
+    value: 'oldest',
+    label: 'Oldest first',
+  }, {
+    value: 'rating_desc',
+    label: 'High rating first',
+  }, {
+    value: 'rating_asc',
+    label: 'Low rating first',
+  }];
+export class SalonReviews {
+  constructor() {
+    this.primaryColor = Colors.Primary;
+    this.stats = {};
+    this.totalReviews = 0;
+    this.allReviews = [];
+    this.page = 1;
+    this.filterBy = [];
+    this.sortBy = sortOptions[0].value;
+  }
+  componentWillLoad() {
+    this.fetchData();
+  }
+  fetchData() {
+    this.isLoading = true;
+    try {
+      HttpService().fetchSalonReviews(this.salonId, {
+        page: 1,
+        sort: this.sortBy,
+        limit: pageLimited,
+      }).then(response => {
+        const { total, stats, data: allReviews } = response;
+        this.stats = stats;
+        this.totalReviews = total;
+        this.allReviews = allReviews;
+        this.canLoadMore = total > pageLimited;
+      });
+    }
+    catch (e) { }
+    this.isLoading = false;
+  }
+  onLoadMore() {
+    this.isLoadingMore = true;
+    try {
+      HttpService().fetchSalonReviews(this.salonId, {
+        page: this.page + 1,
+        sort: this.sortBy,
+        limit: pageLimited,
+      }).then(response => {
+        const { total, data: allReviews } = response;
+        this.page = this.page + 1;
+        this.totalReviews = total;
+        this.allReviews = this.allReviews.concat(allReviews);
+        this.canLoadMore = (allReviews || []).length === pageLimited;
+      });
+    }
+    catch (e) { }
+    this.isLoadingMore = false;
+  }
+  onChangeFilter(filterBy) {
+    this.isFiltering = true;
+    try {
+      HttpService().fetchSalonReviews(this.salonId, Object.assign({ page: 1, sort: this.sortBy, limit: pageLimited }, filterBy.length > 0 ? { avg_point: filterBy } : {})).then(response => {
+        const { total, data: allReviews } = response;
+        this.page = 1;
+        this.totalReviews = total;
+        this.allReviews = allReviews;
+        this.canLoadMore = (allReviews || []).length === pageLimited;
+      });
+    }
+    catch (e) { }
+    this.isFiltering = false;
+  }
+  onChangeSorting(sortBy) {
+    this.isSorting = true;
+    try {
+      HttpService().fetchSalonReviews(this.salonId, Object.assign({ page: 1, sort: sortBy, limit: pageLimited }, this.filterBy.length > 0 ? { avg_point: this.filterBy } : {})).then(response => {
+        const { total, data: allReviews } = response;
+        this.page = 1;
+        this.totalReviews = total;
+        this.allReviews = allReviews;
+        this.canLoadMore = (allReviews || []).length === pageLimited;
+      });
+    }
+    catch (e) { }
+    this.isSorting = false;
+  }
+  render() {
+    const ratingTexts = ['', 'Poor', 'Sufficient', 'Average', 'Well', 'Very good'];
+    return (h("div", { class: "view view--salon-reviews" },
+      h("div", { class: "salon-reviews--filters" },
+        h("div", { class: "salon-reviews--score" },
+          h("div", { class: "salon-review--rating", style: { display: 'flex', flexDirection: 'row' } }, [1, 2, 3, 4, 5].map(score => {
+            return (h("i", { class: score <= this.stats.reviewPoint ? 'ri-heart-fill' : 'ri-heart-line', style: Object.assign({ fontSize: '32px', marginRight: '4px' }, score <= this.stats.reviewPoint ? { color: this.primaryColor } : { color: Colors.Gray04 }) }));
+          })),
+          h("div", { class: "salon-review--rating--date", style: {
+              display: 'flex',
+              flexDirection: 'row',
+              alignItems: 'center',
+              marginTop: '-8px',
+            } },
+            h("span", { style: { fontSize: '24px' } },
+              this.stats.reviewPoint,
+              "/5"),
+            " ",
+            h("span", { style: { color: Colors.Gray04, marginLeft: '8px' } },
+              "(",
+              this.stats.totalReviews,
+              " reviews)"))),
+        h("div", { class: "salon-reviews--filters--options", style: { marginTop: '24px' } },
+          h("div", { style: {
+              background: Colors.Gray01,
+              display: 'flex',
+              alignItems: 'center',
+              borderRadius: '4px',
+              padding: '16px',
+            } },
+            h("div", null,
+              h("input", { type: "checkbox", checked: this.filterBy.length === 0, onChange: () => {
+                  this.filterBy = [];
+                  this.onChangeFilter([]);
+                } }),
+              " ",
+              h("span", { style: { marginLeft: '4px' } }, "All reviews")),
+            [5, 4, 3, 2, 1].map(score => {
+              const isChecked = this.filterBy.indexOf(score) > -1;
+              return (h("div", { key: `salon-reviews--filters-score--${score}`, style: { display: 'flex', alignItems: 'center', marginLeft: '16px' } },
+                h("input", { type: "checkbox", checked: isChecked, onChange: () => {
+                    const newFilter = isChecked ? this.filterBy.filter(fs => fs !== score) : this.filterBy.concat([score]);
+                    this.filterBy = newFilter;
+                    this.onChangeFilter(newFilter);
+                  } }),
+                " ",
+                h("span", { style: { display: 'flex', alignItems: 'center', marginLeft: '4px' } },
+                  score,
+                  " ",
+                  h("i", { class: "ri-heart-line", style: {
+                      fontSize: '16px',
+                      marginLeft: '4px',
+                      marginRight: '4px',
+                      lineHeight: '1',
+                    } }),
+                  " ",
+                  h("span", { style: { color: Colors.Gray04, fontSize: '12px' } },
+                    "(",
+                    this.stats[String(score)] || 0,
+                    ")"))));
+            })))),
+      h("div", { class: "salon-reviews--list-header", style: {
+          display: 'flex',
+          flexDirection: 'row',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          marginTop: '24px',
+        } },
+        h("div", { class: "view--salon-reviews--counter" },
+          this.totalReviews,
+          " ",
+          this.totalReviews === 1 ? `review` : `reviews`),
+        h("div", { style: { display: 'flex', alignItems: 'center' } },
+          h("label", { style: { marginRight: '8px', color: Colors.Gray04 } }, "Sort by"),
+          h("select", { class: "search-filter--select", "place-holder": "Most popular", disabled: this.isLoading, onChange: (evt) => {
+              this.sortBy = evt.target.value;
+              this.onChangeSorting(evt.target.value);
+            }, style: {
+              display: 'flex',
+              alignItems: 'center',
+              backgroundColor: Colors.Gray01,
+              borderColor: Colors.Gray01,
+              borderRadius: '4px',
+              height: '40px',
+              width: '130px',
+            } }, sortOptions.map(sortOption => (h("option", { value: sortOption.value, selected: sortOption.value === this.sortBy, key: `search-filter--select-option--${sortOption.value}` }, sortOption.label)))))),
+      h("div", { class: "salon-reviews--list-content", style: { marginTop: '24px' } }, this.allReviews.map((review, idx) => {
+        const user = review.user || {};
+        return (h("div", { class: "salon-review", key: `salon-review--${idx}`, style: {
+            borderBottom: `1px solid ${Colors.Gray02}`,
+            marginBottom: '24px',
+            paddingBottom: '24px',
+          } },
+          h("div", { class: "salon-review--user", style: { marginBottom: '16px', overflow: 'hidden' } },
+            h("user-avatar", { size: 48, avatar: user.avatar, name: h("span", { style: { fontSize: '18px', fontWeight: '600', color: Colors.TextColor } }, (user.firstName || user.lastName) ? `${user.firstName || ''} ${user.lastName || ''}` : ''), shortName: `${(user.firstName || '').charAt(0)}${(user.lastName || '').charAt(0)}`, nameStyle: { fontWeight: 'bold' } })),
+          h("div", { class: "salon-review--rating", style: { display: 'flex', flexDirection: 'row', marginBottom: '4px' } },
+            [1, 2, 3, 4, 5].map(score => (h("i", { key: `salon-review--rating--item--score--${score}`, class: score <= review.point ? 'ri-heart-fill' : 'ri-heart-line', style: {
+                color: score <= review.point ? this.primaryColor : Colors.Gray04,
+                fontSize: '16px',
+                marginRight: '4px',
+              } }))),
+            review.createdDate && (h("div", { class: "salon-review--rating--date", style: { fontSize: '14px', color: Colors.Gray04, marginLeft: '16px', position: 'relative', top: '2px' } }, dayjs(review.createdDate).format(shortDateYearFormat)))),
+          h("div", { class: "salon-review--rating-text", style: { fontSize: '16px', fontWeight: '600' } }, ratingTexts[review.point]),
+          (review.title || review.description) && (h("div", { class: "salon-review--detail", style: { marginTop: '16px' } },
+            h("div", { class: "salon-review--title", style: { fontSize: '18px', fontWeight: 'bold' }, innerHTML: review.title }),
+            h("div", { class: "salon-review--description", style: { fontSize: '16px' }, innerHTML: review.description }))),
+          review.photos.length > 0 && (h("div", { style: {
+              display: 'flex',
+              flexDirection: 'row',
+              overflowX: 'auto',
+            } }, review.photos.map(fileObj => (h("div", { key: `upload-file--${fileObj.id}`, class: "review--photo", style: {
+              position: 'relative',
+              cursor: 'pointer',
+              marginTop: '16px',
+              marginRight: '12px',
+            } },
+            h("img", { width: 72, src: fileObj.imageUrlThumb, style: { display: 'block' } }))))))));
+      })),
+      h("div", { class: "salon-reviews--list-footer", style: {
+          textAlign: 'center',
+          paddingTop: '16px',
+          paddingBottom: '16px',
+        } },
+        h("button", { class: "btn btn-light btn-lg", style: {
+            background: Colors.White,
+            border: `1px solid ${Colors.Gray02}`,
+            borderRadius: '4px',
+            paddingLeft: '24px',
+            paddingRight: '24px',
+          }, onClick: () => this.onLoadMore() }, "Load more"))));
+  }
+  static get is() { return "salon-reviews"; }
+  static get originalStyleUrls() { return {
+    "$": ["index.less"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["index.css"]
+  }; }
+  static get properties() { return {
+    "salonId": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "salon-id",
+      "reflect": false
+    },
+    "primaryColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "primary-color",
+      "reflect": false,
+      "defaultValue": "Colors.Primary"
+    }
+  }; }
+  static get states() { return {
+    "salonInfo": {},
+    "stats": {},
+    "totalReviews": {},
+    "allReviews": {},
+    "isLoading": {},
+    "isSorting": {},
+    "isFiltering": {},
+    "isLoadingMore": {},
+    "canLoadMore": {},
+    "page": {},
+    "filterBy": {},
+    "sortBy": {}
+  }; }
+}

package/dist/collection/components/salon-schedules/index.css

@@ -0,0 +1,15 @@
+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;
+  }
+}

package/dist/collection/components/salon-schedules/index.js

@@ -0,0 +1,189 @@
+import { Component, Prop, h, State } from '@stencil/core';
+import { BusinessHourStatus } from '../../types/salon';
+import HttpService from '../../services/services';
+import { Colors } from '../../constants/colors';
+export class SalonSchedules {
+  componentWillLoad() {
+    if (this.salonInfo) {
+      this.salonInfoState = JSON.parse(this.salonInfo);
+    }
+    else {
+      this.fetchData();
+    }
+  }
+  fetchData() {
+    try {
+      HttpService().fetchSalonInfo(this.salonId)
+        .then(salonInfo => this.salonInfoState = salonInfo);
+    }
+    catch (e) { }
+  }
+  renderBusinessHour(businessHour) {
+    if (businessHour.status === BusinessHourStatus.ByAppointment) {
+      return 'By Appointment';
+    }
+    if (businessHour.status === BusinessHourStatus.Close) {
+      return 'Close';
+    }
+    return `${businessHour.openTime} - ${businessHour.closeTime}`;
+  }
+  render() {
+    if (this.isLoading) {
+      return (h("div", { class: "view view--salon-contact" },
+        h("div", { class: "view-content", style: this.withBorder ? { border: `1px solid ${Colors.Gray02}`, borderRadius: '4px' } : { padding: '0px' } },
+          h("div", { style: {
+              backgroundColor: Colors.Gray02,
+              height: '20px',
+              width: '120px',
+            } }),
+          h("div", { style: { marginTop: '24px' } },
+            h("div", { style: {
+                backgroundColor: Colors.Gray01,
+                height: '16px',
+                width: '30%',
+              } }),
+            h("div", { style: {
+                backgroundColor: Colors.Gray01,
+                height: '16px',
+                width: '40%',
+                marginTop: '8px',
+              } }),
+            h("div", { style: {
+                backgroundColor: Colors.Gray01,
+                height: '16px',
+                width: '75%',
+                marginTop: '12px',
+              } }),
+            h("div", { style: {
+                backgroundColor: Colors.Gray01,
+                height: '16px',
+                width: '75%',
+                marginTop: '8px',
+              } })),
+          h("div", { style: { marginTop: '24px' } },
+            h("div", { style: {
+                overflow: 'hidden',
+                marginLeft: '-16px',
+                marginBottom: '-16px',
+              } }, [1, 2, 3, 4, 5, 6, 7].map((fakeId, idx) => (h("div", { key: `style-listing--item-${fakeId}-${idx}`, style: {
+                float: 'left',
+                paddingLeft: '16px',
+                marginBottom: '16px',
+              } },
+              h("div", { style: {
+                  backgroundColor: Colors.Gray01,
+                  width: '120px',
+                  height: '20px',
+                } })))))))));
+    }
+    const { about, businessHours, } = (this.salonInfoState || {});
+    return (h("div", { class: "view view--salon-contact" },
+      h("div", { class: "view-content", style: this.withBorder ? { border: `1px solid ${Colors.Gray02}`, borderRadius: '4px' } : { padding: '0px' } },
+        h("div", { style: { fontSize: '18px', fontWeight: 'bold' } }, "About"),
+        about && (h("div", { class: "salon-contact--info--desc", style: { fontSize: '16px', marginTop: '16px' }, innerHTML: about })),
+        businessHours && businessHours.length > 0 && (h("div", { class: "salon-schedules", style: { marginTop: '24px' } },
+          h("div", { class: "salon-schedules--title", style: { fontSize: '16px', fontWeight: 'bold' } }, "Working hours"),
+          h("div", { class: "salon-schedules--dates" },
+            h("div", { class: "salon-schedules--day", style: { marginTop: '8px' } },
+              h("div", { class: "salon-schedules--day-name", style: { fontWeight: 'bold', minWidth: '40px' } }, "Mon"),
+              h("div", { class: "salon-schedules--day-time" }, this.renderBusinessHour(businessHours[0]))),
+            h("div", { class: "salon-schedules--day", style: { marginTop: '8px' } },
+              h("div", { class: "salon-schedules--day-name", style: { fontWeight: 'bold', minWidth: '40px' } }, "Tue"),
+              h("div", { class: "salon-schedules--day-time" }, this.renderBusinessHour(businessHours[1]))),
+            h("div", { class: "salon-schedules--day", style: { marginTop: '8px' } },
+              h("div", { class: "salon-schedules--day-name", style: { fontWeight: 'bold', minWidth: '40px' } }, "Wed"),
+              h("div", { class: "salon-schedules--day-time" }, this.renderBusinessHour(businessHours[2]))),
+            h("div", { class: "salon-schedules--day", style: { marginTop: '8px' } },
+              h("div", { class: "salon-schedules--day-name", style: { fontWeight: 'bold', minWidth: '40px' } }, "Thur"),
+              h("div", { class: "salon-schedules--day-time" }, this.renderBusinessHour(businessHours[3]))),
+            h("div", { class: "salon-schedules--day", style: { marginTop: '8px' } },
+              h("div", { class: "salon-schedules--day-name", style: { fontWeight: 'bold', minWidth: '40px' } }, "Fri"),
+              h("div", { class: "salon-schedules--day-time" }, this.renderBusinessHour(businessHours[4]))),
+            h("div", { class: "salon-schedules--day", style: { marginTop: '8px' } },
+              h("div", { class: "salon-schedules--day-name", style: { fontWeight: 'bold', minWidth: '40px' } }, "Sat"),
+              h("div", { class: "salon-schedules--day-time" }, this.renderBusinessHour(businessHours[5]))),
+            h("div", { class: "salon-schedules--day", style: { marginTop: '8px' } },
+              h("div", { class: "salon-schedules--day-name", style: { fontWeight: 'bold', minWidth: '40px' } }, "Sun"),
+              h("div", { class: "salon-schedules--day-time" }, this.renderBusinessHour(businessHours[6])))))))));
+  }
+  static get is() { return "salon-schedules"; }
+  static get originalStyleUrls() { return {
+    "$": ["index.less"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["index.css"]
+  }; }
+  static get properties() { return {
+    "salonId": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "salon-id",
+      "reflect": false
+    },
+    "salonInfo": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "salon-info",
+      "reflect": false
+    },
+    "isLoading": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "is-loading",
+      "reflect": false
+    },
+    "withBorder": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "with-border",
+      "reflect": false
+    }
+  }; }
+  static get states() { return {
+    "salonInfoState": {}
+  }; }
+}