favesalon-embed 0.1.0 → 1.0.0

package/dist/collection/components/google-map/index.js

@@ -1,6 +1,10 @@
-import { Component, getAssetPath, h, Prop } from '@stencil/core';
+import { getAssetPath, h } from '@stencil/core';
 import { Colors } from '../../constants/colors';
 export class GoogleMap {
+  constructor() {
+    this.locationName = undefined;
+    this.locationAddress = undefined;
+  }
   render() {
     const mapPlaceholder = getAssetPath('./assets/map--placeholder.jpeg');
     return (h("div", { style: {
@@ -12,75 +16,75 @@ export class GoogleMap {
         borderRadius: '8px',
         position: 'relative',
         height: '296px',
-      } },
-      h("div", { style: {
-          position: 'absolute',
-          left: '50%',
-          top: '50%',
-          transform: 'translate(-50%, -50%)',
-        } },
-        h("a", { target: "_blank", rel: "noopener noreferrer", href: `https://www.google.com/maps/search/?api=1&query=${this.locationAddress}`, style: {
-            backgroundColor: Colors.Red01,
-            border: `1px solid ${Colors.Red02}`,
-            borderRadius: '4px',
-            color: Colors.TextColor,
-            padding: '12px',
-            display: 'flex',
-            flexWrap: 'wrap',
-            height: 'auto',
-            width: 'auto',
-            whiteSpace: 'normal',
-            textAlign: 'left',
-            maxWidth: '320px',
-            textDecoration: 'none',
-          } },
-          this.locationName && h("span", { style: { fontSize: '16px', marginBottom: '4px' } }, this.locationName),
-          this.locationAddress && h("span", { style: { fontSize: '12px' } }, this.locationAddress)),
-        h("div", { style: { marginTop: '8px', textAlign: 'center' } },
-          h("i", { class: "ri-map-pin-fill", style: { fontSize: '24px' } })))));
+      } }, h("div", { style: {
+        position: 'absolute',
+        left: '50%',
+        top: '50%',
+        transform: 'translate(-50%, -50%)',
+      } }, h("a", { target: "_blank", rel: "noopener noreferrer", href: `https://www.google.com/maps/search/?api=1&query=${this.locationAddress}`, style: {
+        backgroundColor: Colors.Red01,
+        border: `1px solid ${Colors.Red02}`,
+        borderRadius: '4px',
+        color: Colors.TextColor,
+        padding: '12px',
+        display: 'flex',
+        flexWrap: 'wrap',
+        height: 'auto',
+        width: 'auto',
+        whiteSpace: 'normal',
+        textAlign: 'left',
+        maxWidth: '320px',
+        textDecoration: 'none',
+      } }, this.locationName && h("span", { style: { fontSize: '16px', marginBottom: '4px' } }, this.locationName), this.locationAddress && h("span", { style: { fontSize: '12px' } }, this.locationAddress)), h("div", { style: { marginTop: '8px', textAlign: 'center' } }, h("i", { class: "ri-map-pin-fill", style: { fontSize: '24px' } })))));
   }
   static get is() { return "google-map"; }
-  static get originalStyleUrls() { return {
-    "$": ["index.less"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["index.css"]
-  }; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["index.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["index.css"]
+    };
+  }
   static get assetsDirs() { return ["assets"]; }
-  static get properties() { return {
-    "locationName": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
+  static get properties() {
+    return {
+      "locationName": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "location-name",
+        "reflect": false
       },
-      "attribute": "location-name",
-      "reflect": false
-    },
-    "locationAddress": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "location-address",
-      "reflect": false
-    }
-  }; }
+      "locationAddress": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "location-address",
+        "reflect": false
+      }
+    };
+  }
 }

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

@@ -1,22 +1,27 @@
 .salon-modal.salon-modal--booking:before {
   display: none;
 }
+
 .salon-modal.salon-modal--booking .salon-modal--inner,
 .salon-modal.salon-modal--booking .salon-modal--content {
   max-width: none;
   width: 100%;
   height: 100%;
 }
+
 .salon-modal.salon-modal--booking .salon-modal--close {
   background-color: #EFEFEF;
   width: 40px;
   height: 40px;
   right: 16px;
   top: 16px;
+
   -moz-border-radius: 50px;
   -webkit-border-radius: 50px;
   border-radius: 50px;
 }
+
+
 @media (min-width: 768px) {
   .salon-modal.salon-modal--booking .salon-modal--close {
     right: 20px;

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

@@ -1,9 +1,10 @@
-import { Component, Prop, h } from '@stencil/core';
+import { h } from '@stencil/core';
 import Color from 'color';
 import { css } from 'glamor';
 import { Colors } from '../../constants/colors';
 export class SalonBooking {
   constructor() {
+    this.salonId = undefined;
     this.buttonClass = '';
     this.buttonText = 'Book now';
     this.primaryColor = Colors.Primary;
@@ -34,88 +35,92 @@ export class SalonBooking {
         },
       });
     }
-    return (h("div", { class: "salon-booking" },
-      h("div", { class: "salon-booking--button" },
-        h("button", Object.assign({ type: "button", class: buttonClass, onClick: () => this.openModal() }, buttonStyle), this.buttonText))));
+    return (h("div", { class: "salon-booking" }, h("div", { class: "salon-booking--button" }, h("button", Object.assign({ type: "button", class: buttonClass, onClick: () => this.openModal() }, buttonStyle), this.buttonText))));
   }
   static get is() { return "salon-booking"; }
-  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": "''"
-    },
-    "buttonText": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "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": "button-text",
-      "reflect": false,
-      "defaultValue": "'Book now'"
-    },
-    "primaryColor": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "buttonClass": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "button-class",
+        "reflect": false,
+        "defaultValue": "''"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "buttonText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "button-text",
+        "reflect": false,
+        "defaultValue": "'Book now'"
       },
-      "attribute": "primary-color",
-      "reflect": false,
-      "defaultValue": "Colors.Primary"
-    }
-  }; }
+      "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"
+      }
+    };
+  }
 }

package/dist/collection/components/salon-booking/salon-booking-modal.js

@@ -1,7 +1,8 @@
-import { Component, Prop, h, State } from '@stencil/core';
+import { h } from '@stencil/core';
 import { Colors } from '../../constants/colors';
 export class SalonBookingModal {
   constructor() {
+    this.salonId = undefined;
     this.primaryColor = Colors.Primary;
     this.redirectUrl = window.btoa(window.location.href);
     this.isModalOpen = true;
@@ -13,76 +14,79 @@ export class SalonBookingModal {
   }
   render() {
     const primaryColor = this.primaryColor.split('#')[1] || 'd47b99';
-    return (h("div", { class: "salon-booking--modal" }, this.isModalOpen && (h("div", { class: "salon-modal salon-modal--booking" },
-      h("div", { class: "salon-modal--backdrop", onClick: () => this.closeModal() }),
-      h("div", { class: "salon-modal--close", onClick: () => this.closeModal() }),
-      h("div", { class: "salon-modal--inner" },
-        h("div", { class: "salon-modal--content" },
-          h("iframe", { height: "100%", width: "100%", style: { border: 'none', display: 'block', height: '100%' }, src: `https://www.favesalon.com/r/booking?salonId=${this.salonId}&primaryColor=${primaryColor}&closeAble=false` })))))));
+    return (h("div", { class: "salon-booking--modal" }, this.isModalOpen && (h("div", { class: "salon-modal salon-modal--booking" }, h("div", { class: "salon-modal--backdrop", onClick: () => this.closeModal() }), h("div", { class: "salon-modal--close", onClick: () => this.closeModal() }), h("div", { class: "salon-modal--inner" }, h("div", { class: "salon-modal--content" }, h("iframe", { height: "100%", width: "100%", style: { border: 'none', display: 'block', height: '100%' }, src: `https://www.favesalon.com/r/booking?salonId=${this.salonId}&primaryColor=${primaryColor}&closeAble=false` })))))));
   }
   static get is() { return "salon-booking-modal"; }
-  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"
-    },
-    "redirectUrl": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+  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
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "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"
       },
-      "attribute": "redirect-url",
-      "reflect": false,
-      "defaultValue": "window.btoa(window.location.href)"
-    }
-  }; }
-  static get states() { return {
-    "isModalOpen": {}
-  }; }
+      "redirectUrl": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "redirect-url",
+        "reflect": false,
+        "defaultValue": "window.btoa(window.location.href)"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "isModalOpen": {}
+    };
+  }
 }

package/dist/collection/components/salon-gift-card/index.css

@@ -1,25 +1,30 @@
 .salon-modal.salon-modal--gift-card:before {
   display: none;
 }
+
 .salon-modal.salon-modal--gift-card .salon-modal--inner,
 .salon-modal.salon-modal--gift-card .salon-modal--content {
   max-width: none;
   width: 100%;
   height: 100%;
 }
+
 .salon-modal.salon-modal--gift-card .salon-modal--close {
   background-color: #EFEFEF;
   width: 40px;
   height: 40px;
   right: 16px;
   top: 16px;
+
   -moz-border-radius: 50px;
   -webkit-border-radius: 50px;
   border-radius: 50px;
 }
+
+
 @media (min-width: 768px) {
   .salon-modal.salon-modal--gift-card .salon-modal--close {
     right: 20px;
     top: 20px;
   }
-}
+}