favesalon-embed 0.1.0 → 1.0.0

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

@@ -1,10 +1,16 @@
-import { Component, Prop, h, Method, State } from '@stencil/core';
+import { h } from '@stencil/core';
 import { Colors } from '../../constants/colors';
 import HttpService from '../../services/services';
 const pageLimit = 20;
 export class SalonStylists {
   constructor() {
+    this.salonId = undefined;
+    this.salonStylists = undefined;
+    this.totalStylists = undefined;
     this.page = 1;
+    this.isLoading = undefined;
+    this.isLoadingMore = undefined;
+    this.canLoadMore = undefined;
   }
   componentWillLoad() {
     this.fetchData();
@@ -37,147 +43,142 @@ export class SalonStylists {
   }
   render() {
     if (this.isLoading) {
-      return (h("div", null,
-        h("div", { class: "view--salon-stylists" }, [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map((fakeId, index) => (h("div", { class: "salon-stylist" },
-          h("div", { class: "card", style: {
-              background: 'none',
-              border: 'none',
-              overflow: 'hidden',
-            } },
-            h("div", { class: "salon-stylist--avatar", style: {
-                backgroundColor: Colors.Gray01,
-                backgroundRepeat: 'no-repeat',
-                backgroundPosition: 'center top',
-                backgroundSize: 'cover',
-                border: `1px solid ${Colors.Gray01}`,
-                borderRadius: '8px',
-                position: 'relative',
-                display: 'flex',
-                width: '100%',
-                alignItems: 'center',
-                justifyContent: 'center',
-              } }),
-            h("div", { class: "card-body" },
-              h("div", { key: `stylist--${fakeId}--${index}`, style: {
-                  backgroundColor: Colors.Gray01,
-                  height: '16px',
-                  width: '120px',
-                  margin: 'auto',
-                } })))))))));
+      return (h("div", null, h("div", { class: "view--salon-stylists" }, [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map((fakeId, index) => (h("div", { class: "salon-stylist" }, h("div", { class: "card", style: {
+          background: 'none',
+          border: 'none',
+          overflow: 'hidden',
+        } }, h("div", { class: "salon-stylist--avatar", style: {
+          backgroundColor: Colors.Gray01,
+          backgroundRepeat: 'no-repeat',
+          backgroundPosition: 'center top',
+          backgroundSize: 'cover',
+          border: `1px solid ${Colors.Gray01}`,
+          borderRadius: '8px',
+          position: 'relative',
+          display: 'flex',
+          width: '100%',
+          alignItems: 'center',
+          justifyContent: 'center',
+        } }), h("div", { class: "card-body" }, h("div", { key: `stylist--${fakeId}--${index}`, style: {
+          backgroundColor: Colors.Gray01,
+          height: '16px',
+          width: '120px',
+          margin: 'auto',
+        } })))))))));
     }
-    return (h("div", null,
-      h("div", { class: "view--salon-stylists" }, (this.salonStylists || []).map(stylist => (h("div", { class: "salon-stylist" },
-        h("div", { class: "card", style: {
-            background: 'none',
-            border: 'none',
-            overflow: 'hidden',
-          } },
-          h("div", { class: "salon-stylist--avatar", style: {
-              backgroundImage: `url("${stylist.avatar}")`,
-              backgroundColor: Colors.Gray01,
-              backgroundRepeat: 'no-repeat',
-              backgroundPosition: 'center top',
-              backgroundSize: 'cover',
-              border: `1px solid ${Colors.Gray01}`,
-              borderRadius: '8px',
-              position: 'relative',
-              display: 'flex',
-              width: '100%',
-              alignItems: 'center',
-              justifyContent: 'center',
-            } }, !stylist.avatar && (h("span", { style: {
-              fontSize: '32px',
-              fontWeight: 'bold',
-              textTransform: 'uppercase',
-            } },
-            (stylist.firstName || '').charAt(0),
-            " ",
-            (stylist.lastName || '').charAt(0)))),
-          h("div", { class: "card-body" },
-            h("div", { style: {
-                fontSize: '18px',
-                fontWeight: '600',
-                textAlign: 'center',
-              } }, stylist.fullName))))))),
-      this.canLoadMore && (h("div", { class: "view-footer", style: {
-          textAlign: 'center',
-          paddingTop: '32px',
-          paddingBottom: '16px',
-        } },
-        h("button", { type: "button", class: "btn btn-lg", disabled: this.isLoadingMore, style: {
-            background: Colors.White,
-            border: `1px solid ${Colors.Gray02}`,
-            borderRadius: '4px',
-            paddingLeft: '24px',
-            paddingRight: '24px',
-          }, onClick: () => this.onLoadMore() }, "Load more")))));
+    return (h("div", null, h("div", { class: "view--salon-stylists" }, (this.salonStylists || []).map(stylist => (h("div", { class: "salon-stylist" }, h("div", { class: "card", style: {
+        background: 'none',
+        border: 'none',
+        overflow: 'hidden',
+      } }, h("div", { class: "salon-stylist--avatar", style: {
+        backgroundImage: `url("${stylist.avatar}")`,
+        backgroundColor: Colors.Gray01,
+        backgroundRepeat: 'no-repeat',
+        backgroundPosition: 'center top',
+        backgroundSize: 'cover',
+        border: `1px solid ${Colors.Gray01}`,
+        borderRadius: '8px',
+        position: 'relative',
+        display: 'flex',
+        width: '100%',
+        alignItems: 'center',
+        justifyContent: 'center',
+      } }, !stylist.avatar && (h("span", { style: {
+        fontSize: '32px',
+        fontWeight: 'bold',
+        textTransform: 'uppercase',
+      } }, (stylist.firstName || '').charAt(0), " ", (stylist.lastName || '').charAt(0)))), h("div", { class: "card-body" }, h("div", { style: {
+        fontSize: '18px',
+        fontWeight: '600',
+        textAlign: 'center',
+      } }, stylist.fullName))))))), this.canLoadMore && (h("div", { class: "view-footer", style: {
+        textAlign: 'center',
+        paddingTop: '32px',
+        paddingBottom: '16px',
+      } }, h("button", { type: "button", class: "btn btn-lg", disabled: this.isLoadingMore, 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-stylists"; }
-  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
-    }
-  }; }
-  static get states() { return {
-    "salonStylists": {},
-    "totalStylists": {},
-    "page": {},
-    "isLoading": {},
-    "isLoadingMore": {},
-    "canLoadMore": {}
-  }; }
-  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>"
-      },
-      "docs": {
-        "text": "",
-        "tags": []
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "salon-id",
+        "reflect": false
       }
-    },
-    "onLoadMore": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
+    };
+  }
+  static get states() {
+    return {
+      "salonStylists": {},
+      "totalStylists": {},
+      "page": {},
+      "isLoading": {},
+      "isLoadingMore": {},
+      "canLoadMore": {}
+    };
+  }
+  static get methods() {
+    return {
+      "fetchData": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
         },
-        "return": "Promise<void>"
+        "docs": {
+          "text": "",
+          "tags": []
+        }
       },
-      "docs": {
-        "text": "",
-        "tags": []
+      "onLoadMore": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
       }
-    }
-  }; }
+    };
+  }
 }

package/dist/collection/components/style-detail/index.css

@@ -1,6 +1,7 @@
 .salon-modal.salon-modal--lookbook-detail .salon-modal--close {
   display: none !important;
 }
+
 .salon-modal.salon-modal--lookbook-detail .salon-modal--content {
   background-color: #fff;
   position: fixed;
@@ -13,12 +14,15 @@
   z-index: 1000;
   overflow-y: auto;
 }
+
 .salon-modal.salon-modal--lookbook-detail .style-detail--slides--image {
   height: 240px !important;
 }
+
 .salon-modal.salon-modal--lookbook-detail .style-detail--slides--thumbnails {
   text-align: center;
 }
+
 .salon-modal.salon-modal--lookbook-detail .style-detail--slides--thumbnail {
   display: inline-block;
   margin-top: 12px;
@@ -26,6 +30,7 @@
   height: 40px;
   width: 60px;
 }
+
 .salon-modal.salon-modal--lookbook-detail .style-detail--slides--button {
   border: none;
   position: absolute;
@@ -33,28 +38,37 @@
   z-index: 20;
   height: 40px;
   width: 40px;
+
   -moz-border-radius: 50px;
   -webkit-border-radius: 50px;
   border-radius: 50px;
+
   -moz-transform: translate(0, -50%);
   -webkit-transform: translate(0, -50%);
   transform: translate(0, -50%);
 }
+
 .salon-modal.salon-modal--lookbook-detail .style-detail--slides--prev {
   left: 24px;
 }
+
 .salon-modal.salon-modal--lookbook-detail .style-detail--slides--next {
   right: 24px;
 }
+
+
 @media (min-width: 768px) {
   .salon-modal.salon-modal--lookbook-detail .style-detail--slides--image {
     height: 360px !important;
   }
 }
+
+
 @media (min-width: 992px) {
   .salon-modal.salon-modal--lookbook-detail .style-detail--slides--image {
     height: 480px !important;
   }
+
   .salon-modal.salon-modal--lookbook-detail .style-detail--slides--thumbnail {
     height: 56px;
     width: 72px;