favesalon-embed 0.1.0 → 1.0.0

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

@@ -1,8 +1,15 @@
-import { Component, Prop, h, State } from '@stencil/core';
+import { h } from '@stencil/core';
 import { BusinessHourStatus } from '../../types/salon';
 import HttpService from '../../services/services';
 import { Colors } from '../../constants/colors';
 export class SalonSchedules {
+  constructor() {
+    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);
@@ -29,161 +36,132 @@ export class SalonSchedules {
   }
   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',
-                } })))))))));
+      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])))))))));
+    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": ""
+  static get originalStyleUrls() {
+    return {
+      "$": ["index.css"]
+    };
+  }
+  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
       },
-      "attribute": "is-loading",
-      "reflect": false
-    },
-    "withBorder": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "salonInfo": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "salon-info",
+        "reflect": false
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "isLoading": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "is-loading",
+        "reflect": false
       },
-      "attribute": "with-border",
-      "reflect": false
-    }
-  }; }
-  static get states() { return {
-    "salonInfoState": {}
-  }; }
+      "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": {}
+    };
+  }
 }

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

@@ -0,0 +1 @@
+

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

@@ -1,10 +1,13 @@
-import { Component, Prop, h, Method, State } from '@stencil/core';
+import { h } from '@stencil/core';
 import sortBy from 'lodash/sortBy';
 import { Colors } from '../../constants/colors';
 import HttpService from '../../services/services';
 export class SalonServices {
   constructor() {
+    this.salonId = undefined;
     this.buttonClass = 'btn btn-light';
+    this.salonServices = undefined;
+    this.isLoading = undefined;
   }
   componentWillLoad() {
     this.fetchData();
@@ -21,136 +24,123 @@ export class SalonServices {
   }
   render() {
     if (this.isLoading) {
-      return (h("div", { class: "salon-services--container" },
-        h("div", { class: "view view--salon-services--header", style: { border: `1px solid ${Colors.Gray01}` } },
-          h("div", { class: "view-content", style: { overflowX: 'auto' } },
-            h("div", { style: { whiteSpace: 'nowrap', overflow: 'hidden' } }, [1, 2, 3, 4, 5, 6].map((fakeId, index) => (h("div", { key: `service-group--${fakeId}--${index}`, style: {
-                backgroundColor: Colors.Gray02,
-                float: 'left',
-                marginRight: '12px',
-                height: '30px',
-                width: '120px',
-              } })))))),
-        [1, 2, 3, 4, 5, 6].map((fakeId, index) => {
-          return (h("div", { id: `service-group--${fakeId}`, style: { marginTop: '32px' } },
-            h("div", { key: `service-group--${fakeId}--${index}`, style: {
-                backgroundColor: Colors.Gray03,
-                height: '20px',
-                width: '120px',
-              } }),
-            h("div", { class: "view view--salon-service-type", style: { border: `1px solid ${Colors.Gray01}`, marginTop: '12px' } },
-              h("div", { class: "view-content" }, [1, 2, 3].map((fakeGroupId, fakeGroupIndex) => (h("div", { key: `service-group--${fakeId}--service-${fakeGroupId}--${fakeGroupIndex}`, class: "salon-service" },
-                h("div", { class: "salon-service--name", style: Object.assign({}, fakeGroupIndex > 0 ? {
-                    marginTop: '12px',
-                    paddingTop: '12px',
-                    borderTop: `1px solid ${Colors.Gray01}`,
-                  } : {}) },
-                  h("div", { key: `service-group--${fakeId}--${index}`, style: {
-                      backgroundColor: Colors.Gray01,
-                      height: '16px',
-                      width: '120px',
-                    } })),
-                h("div", { style: { marginTop: '4px' } },
-                  h("div", { style: {
-                      backgroundColor: Colors.Gray01,
-                      height: '16px',
-                      width: '240px',
-                    } })))))))));
-        })));
-    }
-    return (h("div", { class: "salon-services--container" },
-      h("div", { class: "view view--salon-services--header", style: { border: `1px solid ${Colors.Gray02}` } },
-        h("div", { class: "view-content", style: { overflowX: 'auto' } },
-          h("div", { style: { whiteSpace: 'nowrap' } }, sortBy(this.salonServices || [], (['order', 'name'])).map((serviceGroup, index) => (h("a", { href: `#service-group--${serviceGroup.id}` },
-            h("button", { type: "button", class: this.buttonClass, style: index > 0 ? { marginLeft: '12px' } : {} }, serviceGroup.name))))))),
-      sortBy(this.salonServices || [], (['order', 'name'])).map(serviceGroup => {
-        const hasMultipleCates = (serviceGroup.data || []).length > 1;
-        return (h("div", { id: `service-group--${serviceGroup.id}`, style: { marginTop: '32px' } },
-          h("h3", { style: { fontSize: '24px', marginBottom: '12px' } }, serviceGroup.name),
-          h("div", { class: "view view--salon-service-type", style: { border: `1px solid ${Colors.Gray02}` } },
-            h("div", { class: "view-content" }, (serviceGroup.data || []).map((subGroup, subGroupIndex) => (h("div", { class: "salon-service-category" },
-              hasMultipleCates && (h("h4", { style: Object.assign({ fontSize: '20px', marginBottom: '12px', paddingBottom: '12px', borderBottom: `1px solid ${Colors.Gray02}` }, subGroupIndex > 0 ? { marginTop: '32px' } : {}) }, subGroup.name)),
-              (subGroup.data || []).map((service, serviceIndex) => (h("div", { class: "salon-service" },
-                h("div", { class: "salon-service--name", style: Object.assign({ fontSize: '16px', fontWeight: '500' }, serviceIndex > 0 ? {
-                    marginTop: '12px',
-                    paddingTop: '12px',
-                    borderTop: `1px solid ${Colors.Gray01}`,
-                  } : {}) }, service.name),
-                (!service.hideDuration || !service.hidePrice) && (h("div", { style: {
-                    display: 'block',
-                    marginTop: '4px',
-                    fontSize: '90%',
-                    color: Colors.Gray05,
-                  } }, [
-                  !service.hideDuration ? `${service.duration} mins` : '',
-                  !service.hidePrice ? `$${service.price}` : '',
-                ].filter(field => !!field).join(' · ')))))))))))));
+      return (h("div", { class: "salon-services--container" }, h("div", { class: "view view--salon-services--header", style: { border: `1px solid ${Colors.Gray01}` } }, h("div", { class: "view-content", style: { overflowX: 'auto' } }, h("div", { style: { whiteSpace: 'nowrap', overflow: 'hidden' } }, [1, 2, 3, 4, 5, 6].map((fakeId, index) => (h("div", { key: `service-group--${fakeId}--${index}`, style: {
+          backgroundColor: Colors.Gray02,
+          float: 'left',
+          marginRight: '12px',
+          height: '30px',
+          width: '120px',
+        } })))))), [1, 2, 3, 4, 5, 6].map((fakeId, index) => {
+        return (h("div", { id: `service-group--${fakeId}`, style: { marginTop: '32px' } }, h("div", { key: `service-group--${fakeId}--${index}`, style: {
+            backgroundColor: Colors.Gray03,
+            height: '20px',
+            width: '120px',
+          } }), h("div", { class: "view view--salon-service-type", style: { border: `1px solid ${Colors.Gray01}`, marginTop: '12px' } }, h("div", { class: "view-content" }, [1, 2, 3].map((fakeGroupId, fakeGroupIndex) => (h("div", { key: `service-group--${fakeId}--service-${fakeGroupId}--${fakeGroupIndex}`, class: "salon-service" }, h("div", { class: "salon-service--name", style: Object.assign({}, fakeGroupIndex > 0 ? {
+            marginTop: '12px',
+            paddingTop: '12px',
+            borderTop: `1px solid ${Colors.Gray01}`,
+          } : {}) }, h("div", { key: `service-group--${fakeId}--${index}`, style: {
+            backgroundColor: Colors.Gray01,
+            height: '16px',
+            width: '120px',
+          } })), h("div", { style: { marginTop: '4px' } }, h("div", { style: {
+            backgroundColor: Colors.Gray01,
+            height: '16px',
+            width: '240px',
+          } })))))))));
       })));
+    }
+    return (h("div", { class: "salon-services--container" }, h("div", { class: "view view--salon-services--header", style: { border: `1px solid ${Colors.Gray02}` } }, h("div", { class: "view-content", style: { overflowX: 'auto' } }, h("div", { style: { whiteSpace: 'nowrap' } }, sortBy(this.salonServices || [], (['order', 'name'])).map((serviceGroup, index) => (h("a", { href: `#service-group--${serviceGroup.id}` }, h("button", { type: "button", class: this.buttonClass, style: index > 0 ? { marginLeft: '12px' } : {} }, serviceGroup.name))))))), sortBy(this.salonServices || [], (['order', 'name'])).map(serviceGroup => {
+      const hasMultipleCates = (serviceGroup.data || []).length > 1;
+      return (h("div", { id: `service-group--${serviceGroup.id}`, style: { marginTop: '32px' } }, h("h3", { style: { fontSize: '24px', marginBottom: '12px' } }, serviceGroup.name), h("div", { class: "view view--salon-service-type", style: { border: `1px solid ${Colors.Gray02}` } }, h("div", { class: "view-content" }, (serviceGroup.data || []).map((subGroup, subGroupIndex) => (h("div", { class: "salon-service-category" }, hasMultipleCates && (h("h4", { style: Object.assign({ fontSize: '20px', marginBottom: '12px', paddingBottom: '12px', borderBottom: `1px solid ${Colors.Gray02}` }, subGroupIndex > 0 ? { marginTop: '32px' } : {}) }, subGroup.name)), (subGroup.data || []).map((service, serviceIndex) => (h("div", { class: "salon-service" }, h("div", { class: "salon-service--name", style: Object.assign({ fontSize: '16px', fontWeight: '500' }, serviceIndex > 0 ? {
+          marginTop: '12px',
+          paddingTop: '12px',
+          borderTop: `1px solid ${Colors.Gray01}`,
+        } : {}) }, service.name), (!service.hideDuration || !service.hidePrice) && (h("div", { style: {
+          display: 'block',
+          marginTop: '4px',
+          fontSize: '90%',
+          color: Colors.Gray05,
+        } }, [
+        !service.hideDuration ? `${service.duration} mins` : '',
+        !service.hidePrice ? `$${service.price}` : '',
+      ].filter(field => !!field).join(' · ')))))))))))));
+    })));
   }
   static get is() { return "salon-services"; }
-  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
-    },
-    "buttonClass": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "button-class",
-      "reflect": false,
-      "defaultValue": "'btn btn-light'"
-    }
-  }; }
-  static get states() { return {
-    "salonServices": {},
-    "isLoading": {}
-  }; }
-  static get methods() { return {
-    "fetchData": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
+  static get originalStyleUrls() {
+    return {
+      "$": ["index.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["index.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "salonId": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
         },
-        "return": "Promise<void>"
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "salon-id",
+        "reflect": false
       },
-      "docs": {
-        "text": "",
-        "tags": []
+      "buttonClass": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "button-class",
+        "reflect": false,
+        "defaultValue": "'btn btn-light'"
       }
-    }
-  }; }
+    };
+  }
+  static get states() {
+    return {
+      "salonServices": {},
+      "isLoading": {}
+    };
+  }
+  static get methods() {
+    return {
+      "fetchData": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
+  }
 }

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

@@ -3,32 +3,40 @@
   margin-left: -12px;
   margin-top: -12px;
 }
+
 .view--salon-stylists .salon-stylist {
   float: left;
   padding-left: 12px;
   padding-top: 12px;
   width: 50%;
 }
+
 .view--salon-stylists .salon-stylist--avatar {
   height: 180px;
 }
+
+
 @media (min-width: 576px) {
   .view--salon-stylists .salon-stylist {
     width: 33.33%;
     max-width: 240px;
   }
 }
+
+
 @media (min-width: 768px) {
   .view--salon-stylists {
     margin-left: -24px;
     margin-top: -24px;
   }
+
   .view--salon-stylists .salon-stylist {
     padding-left: 24px;
     padding-top: 24px;
     width: 264px;
     max-width: none;
   }
+
   .view--salon-stylists .salon-stylist--avatar {
     height: 240px;
   }