@ppg_pl/pallete 0.0.4 → 0.0.6

package/dist/collection/components/my-component/my-component.js

@@ -0,0 +1,133 @@
+import Helmet from '@stencil/helmet';
+import { h } from '@stencil/core';
+export class MyModalBundle {
+  constructor() {
+    this.shop = undefined;
+    this.product = undefined;
+    this.show = false;
+    this.readyToClose = false;
+  }
+  async open() {
+    this.show = true;
+  }
+  setReadyToCloseHandler(value) {
+    this.readyToClose = value.detail.observable;
+  }
+  closeModalHandler() {
+    this.show = false;
+    this.readyToClose = false;
+  }
+  render() {
+    let content = null;
+    if (this.show) {
+      content = [h("my-backdrop", null), h("my-modal", { shop: this.shop, product: this.product })];
+    }
+    return (h("div", { onClick: () => {
+        if (this.readyToClose) {
+          this.closeModalHandler();
+        }
+      } }, h(Helmet, null, h("script", null, `(function (w, d, s, l, i) {
+        w[l] = w[l] || [];
+        w[l].push({ 'gtm.start': new Date().getTime(), 'event': 'gtm.js' });
+        var f = d.getElementsByTagName(s)[0],
+          j = d.createElement(s),
+          dl = l != 'dataLayer' ? '&l=' + l : '';
+        j.async = true;
+        j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
+        f.parentNode.insertBefore(j, f);
+      })(window, document, 'script', 'dataLayer', 'GTM-PMTKHDX');`)), h("div", { class: "pallete-wrapper" }, content), h("noscript", null, h("iframe", { src: "https://www.googletagmanager.com/ns.html?id=GTM-PMTKHDX", height: "0", width: "0", style: { display: 'none', visibility: 'hidden' } }))));
+  }
+  static get is() { return "my-component"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["my-component.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["my-component.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "shop": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "shop",
+        "reflect": false
+      },
+      "product": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "product",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "show": {},
+      "readyToClose": {}
+    };
+  }
+  static get methods() {
+    return {
+      "open": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "modalEl"; }
+  static get listeners() {
+    return [{
+        "name": "readyToCLose",
+        "method": "setReadyToCloseHandler",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "close",
+        "method": "closeModalHandler",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
+}
+//# sourceMappingURL=my-component.js.map

package/dist/collection/components/my-component/my-component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"my-component.js","sourceRoot":"","sources":["../../../src/components/my-component/my-component.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOnF,MAAM,OAAO,aAAa;;;;gBAKR,KAAK;wBACG,KAAK;;EAG7B,KAAK,CAAC,IAAI;IACR,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;EACnB,CAAC;EAGD,sBAAsB,CAAC,KAAkB;IACvC,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,MAAM,CAAC,UAAU,CAAC;EAC9C,CAAC;EAGD,iBAAiB;IACf,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;IAClB,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;EAC5B,CAAC;EAED,MAAM;IACJ,IAAI,OAAO,GAAG,IAAI,CAAC;IACnB,IAAI,IAAI,CAAC,IAAI,EAAE;MACb,OAAO,GAAG,CAAC,sBAA2B,EAAE,gBAAU,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,GAAa,CAAC,CAAC;KACxG;IACD,OAAO,CACL,WACE,OAAO,EAAE,GAAG,EAAE;QACZ,IAAI,IAAI,CAAC,YAAY,EAAE;UACrB,IAAI,CAAC,iBAAiB,EAAE,CAAC;SAC1B;MACH,CAAC;MAED,EAAC,MAAM;QACL,kBACG;;;;;;;;;kEASqD,CAC/C,CACF;MACT,WAAK,KAAK,EAAC,iBAAiB,IAAE,OAAO,CAAO;MAC5C;QACE,cAAQ,GAAG,EAAC,yDAAyD,EAAC,MAAM,EAAC,GAAG,EAAC,KAAK,EAAC,GAAG,EAAC,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAW,CAC7I,CACP,CACP,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import Helmet from '@stencil/helmet';\nimport { Component, Prop, Method, Element, State, Listen, h } from '@stencil/core';\n\n@Component({\n  tag: 'my-component',\n  styleUrl: 'my-component.scss',\n  scoped: true,\n})\nexport class MyModalBundle {\n  @Element() modalEl: HTMLElement;\n\n  @Prop() shop: string;\n  @Prop() product: string;\n  @State() show = false;\n  @State() readyToClose = false;\n\n  @Method()\n  async open() {\n    this.show = true;\n  }\n\n  @Listen('readyToCLose')\n  setReadyToCloseHandler(value: CustomEvent) {\n    this.readyToClose = value.detail.observable;\n  }\n\n  @Listen('close')\n  closeModalHandler() {\n    this.show = false;\n    this.readyToClose = false;\n  }\n\n  render() {\n    let content = null;\n    if (this.show) {\n      content = [<my-backdrop></my-backdrop>, <my-modal shop={this.shop} product={this.product}></my-modal>];\n    }\n    return (\n      <div\n        onClick={() => {\n          if (this.readyToClose) {\n            this.closeModalHandler();\n          }\n        }}\n      >\n        <Helmet>\n          <script>\n            {`(function (w, d, s, l, i) {\n        w[l] = w[l] || [];\n        w[l].push({ 'gtm.start': new Date().getTime(), 'event': 'gtm.js' });\n        var f = d.getElementsByTagName(s)[0],\n          j = d.createElement(s),\n          dl = l != 'dataLayer' ? '&l=' + l : '';\n        j.async = true;\n        j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;\n        f.parentNode.insertBefore(j, f);\n      })(window, document, 'script', 'dataLayer', 'GTM-PMTKHDX');`}\n          </script>\n        </Helmet>\n        <div class=\"pallete-wrapper\">{content}</div>\n        <noscript>\n          <iframe src=\"https://www.googletagmanager.com/ns.html?id=GTM-PMTKHDX\" height=\"0\" width=\"0\" style={{ display: 'none', visibility: 'hidden' }}></iframe>\n        </noscript>\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/my-loader/my-loader.css

@@ -0,0 +1,85 @@
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100px;
+  overflow: hidden;
+}
+
+.item {
+  width: 20px;
+  height: 20px;
+  margin: 3px;
+  list-style-type: none;
+  transition: 0.5s all ease;
+}
+
+.item:nth-child(1) {
+  animation: right-1 1s infinite alternate;
+  background-color: #b8cf40;
+  animation-delay: 20ms;
+}
+@keyframes right-1 {
+  0% {
+    transform: translateY(-18px);
+  }
+  100% {
+    transform: translateY(18px);
+  }
+}
+
+.item:nth-child(2) {
+  animation: right-2 1s infinite alternate;
+  background-color: #ee4b5e;
+  animation-delay: 40ms;
+}
+@keyframes right-2 {
+  0% {
+    transform: translateY(-21px);
+  }
+  100% {
+    transform: translateY(21px);
+  }
+}
+
+.item:nth-child(3) {
+  animation: right-3 1s infinite alternate;
+  background-color: #ea0f47;
+  animation-delay: 60ms;
+}
+@keyframes right-3 {
+  0% {
+    transform: translateY(-24px);
+  }
+  100% {
+    transform: translateY(24px);
+  }
+}
+
+.item:nth-child(4) {
+  animation: right-4 1s infinite alternate;
+  background-color: #d42840;
+  animation-delay: 80ms;
+}
+@keyframes right-4 {
+  0% {
+    transform: translateY(-27px);
+  }
+  100% {
+    transform: translateY(27px);
+  }
+}
+
+.item:nth-child(5) {
+  animation: right-5 1s infinite alternate;
+  background-color: #8b2850;
+  animation-delay: 100ms;
+}
+@keyframes right-5 {
+  0% {
+    transform: translateY(-30px);
+  }
+  100% {
+    transform: translateY(30px);
+  }
+}

package/dist/collection/components/my-loader/my-loader.js

@@ -0,0 +1,19 @@
+import { h } from '@stencil/core';
+export class MyLoader {
+  render() {
+    return (h("div", { class: "container" }, h("div", { class: "item" }), h("div", { class: "item" }), h("div", { class: "item" }), h("div", { class: "item" }), h("div", { class: "item" })));
+  }
+  static get is() { return "my-loader"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["my-loader.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["my-loader.css"]
+    };
+  }
+}
+//# sourceMappingURL=my-loader.js.map

package/dist/collection/components/my-loader/my-loader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"my-loader.js","sourceRoot":"","sources":["../../../src/components/my-loader/my-loader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAO7C,MAAM,OAAO,QAAQ;EACnB,MAAM;IACJ,OAAO,CACL,WAAK,KAAK,EAAC,WAAW;MACpB,WAAK,KAAK,EAAC,MAAM,GAAO;MACxB,WAAK,KAAK,EAAC,MAAM,GAAO;MACxB,WAAK,KAAK,EAAC,MAAM,GAAO;MACxB,WAAK,KAAK,EAAC,MAAM,GAAO;MACxB,WAAK,KAAK,EAAC,MAAM,GAAO,CACpB,CACP,CAAC;EACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, h } from '@stencil/core';\n\n@Component({\n  tag: 'my-loader',\n  styleUrl: 'my-loader.scss',\n  scoped: true,\n})\nexport class MyLoader {\n  render() {\n    return (\n      <div class=\"container\">\n        <div class=\"item\"></div>\n        <div class=\"item\"></div>\n        <div class=\"item\"></div>\n        <div class=\"item\"></div>\n        <div class=\"item\"></div>\n      </div>\n    );\n  }\n}\n"]}