@ppg_pl/pallete 0.0.7 → 2.0.0

package/dist/components/my-colorinfo2.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, getAssetPath } from '@stencil/core/internal/client';
 import { s as setDataLayer } from './gtmUtils.js';
-import { d as defineCustomElement$1 } from './index2.js';
+import { A as APIURL, a as accessToken, d as defineCustomElement$1 } from './index2.js';
 
 const MyColorInfo = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -29,13 +29,14 @@ const MyColorInfo = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.closeImage = 'close.png';
   }
   render() {
-    var _a, _b, _c, _d, _e, _f, _g;
+    var _a, _b, _c, _d, _e, _f;
+    console.log('current', this.currentColor);
     return (h("div", { class: `boxes__box-content ${this.currentColor.textWhite ? 'boxes__box-content__white' : ''}`, style: {
         background: this.currentColor.hex,
         maxWidth: `${this.infoBoxWidth && this.infoBoxWidth - 4}px`,
       } }, this.isMobile && h("img", { class: 'closebtn', onClick: this.onCloseButtonClick, src: getAssetPath(`./assets/${this.closeImage}`), alt: "closebtn" }), h("div", { class: "boxes__box-content__info", style: {
         maxWidth: this.isMobile ? `${this.infoBoxWidth && this.infoBoxWidth - 35}px` : ``,
-      } }, !this.isMobile && h("img", { class: 'closebtn', onClick: this.onCloseButtonClick, src: getAssetPath(`./assets/${this.closeImage}`), alt: "closebtn" }), !this.isMobile && h("h2", null, this.currentColor.name), !this.isMobile && h("h4", null, this.currentColor.number), !this.isMobile && h("div", { class: "divider" }), h("div", { class: "boxes__box-content__info__value" }, h("div", { class: "boxes__box-content__info__value-image" }, ((_a = this.currentColor) === null || _a === void 0 ? void 0 : _a.image.data) && h("img", { src: `${(_e = (_d = (_c = (_b = this.currentColor) === null || _b === void 0 ? void 0 : _b.image) === null || _c === void 0 ? void 0 : _c.data) === null || _d === void 0 ? void 0 : _d.attributes) === null || _e === void 0 ? void 0 : _e.formats.thumbnail.url}`, alt: "color-image" })), h("div", { class: "boxes__box-content__info__value-product" }, h("div", null, !this.isMobile && h("p", null, "Produkt:"), this.isMobile && h("h2", null, this.currentColor.name), " ", h("p", null, this.product)), this.isMobile && h("div", { class: 'divider' }), this.currentColor && this.currentColor.links.find((link) => { var _a, _b, _c; return ((_c = (_b = (_a = link === null || link === void 0 ? void 0 : link.shop) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.attributes) === null || _c === void 0 ? void 0 : _c.name) === this.shop; }) && (h("a", { onClick: this.goToProduct, class: `${this.currentColor.buttonInverse ? 'inverse' : ''}`, target: "_blank", href: (_f = this === null || this === void 0 ? void 0 : this.currentColor.links.find((link) => { var _a, _b, _c; return ((_c = (_b = (_a = link === null || link === void 0 ? void 0 : link.shop) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.attributes) === null || _c === void 0 ? void 0 : _c.name) === this.shop; })) === null || _f === void 0 ? void 0 : _f.path }, "przejd\u017A do produktu"))))), h("div", { class: "boxes__box-content__slider" }, h("my-slider", { color: this.currentColor.name, shop: this.shop, product: this.product, slides: (_g = this.data) === null || _g === void 0 ? void 0 : _g.images.data }), ' ')));
+      } }, !this.isMobile && h("img", { class: 'closebtn', onClick: this.onCloseButtonClick, src: getAssetPath(`./assets/${this.closeImage}`), alt: "closebtn" }), !this.isMobile && h("h2", null, this.currentColor.name), !this.isMobile && h("h4", null, this.currentColor.number), !this.isMobile && h("div", { class: "divider" }), h("div", { class: "boxes__box-content__info__value" }, h("div", { class: "boxes__box-content__info__value-image" }, ((_a = this.currentColor) === null || _a === void 0 ? void 0 : _a.image) && h("img", { src: `${APIURL}/assets/${this.currentColor.image}?access_token=${accessToken}`, alt: "color-image" })), h("div", { class: "boxes__box-content__info__value-product" }, h("div", null, !this.isMobile && h("p", null, "Produkt:"), this.isMobile && h("h2", null, (_b = this.currentColor) === null || _b === void 0 ? void 0 : _b.name), " ", h("p", null, this.product)), this.isMobile && h("div", { class: 'divider' }), this.currentColor && ((_c = this.currentColor.links) === null || _c === void 0 ? void 0 : _c.find((link) => (link === null || link === void 0 ? void 0 : link.shop) === this.shop)) && (h("a", { onClick: this.goToProduct, class: `${this.currentColor.buttonInverse ? 'inverse' : ''}`, target: "_blank", href: (_e = (_d = this === null || this === void 0 ? void 0 : this.currentColor.links) === null || _d === void 0 ? void 0 : _d.find((link) => (link === null || link === void 0 ? void 0 : link.shop) === this.shop)) === null || _e === void 0 ? void 0 : _e.path }, "przejd\u017A do produktu"))))), h("div", { class: "boxes__box-content__slider" }, h("my-slider", { color: this.currentColor.name, shop: this.shop, product: this.product, slides: (_f = this.data) === null || _f === void 0 ? void 0 : _f.images }), ' ')));
   }
 }, [0, "my-colorinfo", {
     "currentColor": [16],

package/dist/components/my-colorinfo2.js.map

@@ -1 +1 @@
-{"file":"my-colorinfo2.js","mappings":"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","names":[],"sources":["./src/components/my-colorinfo/my-colorinfo.tsx"],"sourcesContent":["import { Component, Prop, h, getAssetPath, Event, EventEmitter } from '@stencil/core';\nimport { setDataLayer } from '../../gtmUtils';\nimport { Color, Link, Product } from '../../types';\n@Component({\n  tag: 'my-colorinfo',\n})\nexport class MyColorInfo {\n  @Prop() currentColor: Color;\n  @Prop() shop: string;\n  @Prop() product: string;\n  @Prop() data: Product | null = null;\n  @Prop() isMobile: boolean = false;\n  @Prop() infoBoxWidth: number | null;\n  @Prop() closeImage = 'close.png';\n\n  @Event() closeInfoBox: EventEmitter;\n\n  goToProduct = () => {\n    this.currentColor &&\n      setDataLayer({\n        event: 'GoToProduct',\n        shop: this.shop,\n        product: this.product,\n        color: this.currentColor?.name,\n      });\n  };\n\n  onCloseButtonClick = () => {\n    this.closeInfoBox.emit();\n  };\n\n  render() {\n    return (\n      <div\n        class={`boxes__box-content ${this.currentColor.textWhite ? 'boxes__box-content__white' : ''}`}\n        style={{\n          background: this.currentColor.hex,\n          maxWidth: `${this.infoBoxWidth && this.infoBoxWidth - 4}px`,\n        }}\n      >\n        {this.isMobile && <img class={'closebtn'} onClick={this.onCloseButtonClick} src={getAssetPath(`./assets/${this.closeImage}`)} alt=\"closebtn\" />}\n        <div\n          class=\"boxes__box-content__info\"\n          style={{\n            maxWidth: this.isMobile ? `${this.infoBoxWidth && this.infoBoxWidth - 35}px` : ``,\n          }}\n        >\n          {!this.isMobile && <img class={'closebtn'} onClick={this.onCloseButtonClick} src={getAssetPath(`./assets/${this.closeImage}`)} alt=\"closebtn\" />}\n          {!this.isMobile && <h2>{this.currentColor.name}</h2>}\n          {!this.isMobile && <h4>{this.currentColor.number}</h4>}\n          {!this.isMobile && <div class=\"divider\"></div>}\n          <div class=\"boxes__box-content__info__value\">\n            <div class=\"boxes__box-content__info__value-image\">\n              {this.currentColor?.image.data! && <img src={`${this.currentColor?.image?.data?.attributes?.formats.thumbnail.url}`} alt=\"color-image\" />}\n            </div>\n            <div class=\"boxes__box-content__info__value-product\">\n              <div>\n                {!this.isMobile && <p>Produkt:</p>}\n                {this.isMobile && <h2>{this.currentColor.name}</h2>} <p>{this.product}</p>\n              </div>\n\n              {this.isMobile && <div class={'divider'}></div>}\n              {this.currentColor && this.currentColor.links.find((link: Link) => link?.shop?.data?.attributes?.name === this.shop) && (\n                <a\n                  onClick={this.goToProduct}\n                  class={`${this.currentColor.buttonInverse ? 'inverse' : ''}`}\n                  target=\"_blank\"\n                  href={this?.currentColor.links.find((link: Link) => link?.shop?.data?.attributes?.name === this.shop)?.path}\n                >\n                  przejdź do produktu\n                </a>\n              )}\n            </div>\n          </div>\n        </div>\n        <div class=\"boxes__box-content__slider\">\n          <my-slider color={this.currentColor.name} shop={this.shop} product={this.product} slides={this.data?.images.data}></my-slider>{' '}\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"my-colorinfo2.js","mappings":"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","names":[],"sources":["./src/components/my-colorinfo/my-colorinfo.tsx"],"sourcesContent":["import { Component, Prop, h, getAssetPath, Event, EventEmitter } from '@stencil/core';\nimport { setDataLayer } from '../../gtmUtils';\nimport { Color, Link, Product } from '../../types';\nimport { APIURL, accessToken } from '../api';\n@Component({\n  tag: 'my-colorinfo',\n})\nexport class MyColorInfo {\n  @Prop() currentColor: Color;\n  @Prop() shop: string;\n  @Prop() product: string;\n  @Prop() data: Product | null = null;\n  @Prop() isMobile: boolean = false;\n  @Prop() infoBoxWidth: number | null;\n  @Prop() closeImage = 'close.png';\n\n  @Event() closeInfoBox: EventEmitter;\n\n  goToProduct = () => {\n    this.currentColor &&\n      setDataLayer({\n        event: 'GoToProduct',\n        shop: this.shop,\n        product: this.product,\n        color: this.currentColor?.name,\n      });\n  };\n\n  onCloseButtonClick = () => {\n    this.closeInfoBox.emit();\n  };\n\n  render() {\n    console.log('current', this.currentColor);\n    return (\n      <div\n        class={`boxes__box-content ${this.currentColor.textWhite ? 'boxes__box-content__white' : ''}`}\n        style={{\n          background: this.currentColor.hex,\n          maxWidth: `${this.infoBoxWidth && this.infoBoxWidth - 4}px`,\n        }}\n      >\n        {this.isMobile && <img class={'closebtn'} onClick={this.onCloseButtonClick} src={getAssetPath(`./assets/${this.closeImage}`)} alt=\"closebtn\" />}\n        <div\n          class=\"boxes__box-content__info\"\n          style={{\n            maxWidth: this.isMobile ? `${this.infoBoxWidth && this.infoBoxWidth - 35}px` : ``,\n          }}\n        >\n          {!this.isMobile && <img class={'closebtn'} onClick={this.onCloseButtonClick} src={getAssetPath(`./assets/${this.closeImage}`)} alt=\"closebtn\" />}\n          {!this.isMobile && <h2>{this.currentColor.name}</h2>}\n          {!this.isMobile && <h4>{this.currentColor.number}</h4>}\n          {!this.isMobile && <div class=\"divider\"></div>}\n          <div class=\"boxes__box-content__info__value\">\n            <div class=\"boxes__box-content__info__value-image\">\n              {this.currentColor?.image! && <img src={`${APIURL}/assets/${this.currentColor.image}?access_token=${accessToken}`} alt=\"color-image\" />}\n            </div>\n            <div class=\"boxes__box-content__info__value-product\">\n              <div>\n                {!this.isMobile && <p>Produkt:</p>}\n                {this.isMobile && <h2>{this.currentColor?.name}</h2>} <p>{this.product}</p>\n              </div>\n\n              {this.isMobile && <div class={'divider'}></div>}\n              {this.currentColor && this.currentColor.links?.find((link: Link) => link?.shop === this.shop) && (\n                <a\n                  onClick={this.goToProduct}\n                  class={`${this.currentColor.buttonInverse ? 'inverse' : ''}`}\n                  target=\"_blank\"\n                  href={this?.currentColor.links?.find((link: Link) => link?.shop === this.shop)?.path}\n                >\n                  przejdź do produktu\n                </a>\n              )}\n            </div>\n          </div>\n        </div>\n        <div class=\"boxes__box-content__slider\">\n          <my-slider color={this.currentColor.name} shop={this.shop} product={this.product} slides={this.data?.images}></my-slider>{' '}\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/my-loader2.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 
-const myLoaderCss = ".container.sc-my-loader{display:flex;justify-content:center;align-items:center;height:100px;overflow:hidden}.item.sc-my-loader{width:20px;height:20px;margin:3px;list-style-type:none;transition:0.5s all ease}.item.sc-my-loader: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.sc-my-loader: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.sc-my-loader: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.sc-my-loader: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.sc-my-loader: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)}}";
+const myLoaderCss = ".container.sc-my-loader{display:flex;justify-content:center;align-items:center;height:190px;overflow:hidden}.item.sc-my-loader{width:20px;height:20px;margin:3px;list-style-type:none;transition:0.5s all ease}.item.sc-my-loader: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.sc-my-loader: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.sc-my-loader: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.sc-my-loader: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.sc-my-loader: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)}}";
 
 const MyLoader = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/my-loader2.js.map

@@ -1 +1 @@
-{"file":"my-loader2.js","mappings":";;AAAA,MAAM,WAAW,GAAG,+rCAA+rC;;MCOtsC,QAAQ;;;;;EACnB,MAAM;IACJ,QACE,WAAK,KAAK,EAAC,WAAW,IACpB,WAAK,KAAK,EAAC,MAAM,GAAO,EACxB,WAAK,KAAK,EAAC,MAAM,GAAO,EACxB,WAAK,KAAK,EAAC,MAAM,GAAO,EACxB,WAAK,KAAK,EAAC,MAAM,GAAO,EACxB,WAAK,KAAK,EAAC,MAAM,GAAO,CACpB,EACN;GACH;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/my-loader/my-loader.scss?tag=my-loader&encapsulation=scoped","./src/components/my-loader/my-loader.tsx"],"sourcesContent":["$color: #b8cf40, #ee4b5e, #ea0f47, #d42840, #8b2850;\n\n@mixin anim($i) {\n  $y: ($i + 5) * 3;\n\n  @keyframes right-#{$i} {\n    0% {\n      transform: translateY(#{-$y}px);\n    }\n    100% {\n      transform: translateY(#{$y}px);\n    }\n  }\n}\n\n.container {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 100px;\n  overflow: hidden;\n}\n\n.item {\n  width: 20px;\n  height: 20px;\n  margin: 3px;\n  list-style-type: none;\n  transition: 0.5s all ease;\n}\n\n@for $i from 1 through 5 {\n  .item:nth-child(#{$i}) {\n    @include anim($i);\n    animation: right-#{$i} 1s infinite alternate;\n    background-color: nth($color, $i);\n    animation-delay: 20ms * $i;\n  }\n}\n","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"],"version":3}
+{"file":"my-loader2.js","mappings":";;AAAA,MAAM,WAAW,GAAG,+rCAA+rC;;MCOtsC,QAAQ;;;;;EACnB,MAAM;IACJ,QACE,WAAK,KAAK,EAAC,WAAW,IACpB,WAAK,KAAK,EAAC,MAAM,GAAO,EACxB,WAAK,KAAK,EAAC,MAAM,GAAO,EACxB,WAAK,KAAK,EAAC,MAAM,GAAO,EACxB,WAAK,KAAK,EAAC,MAAM,GAAO,EACxB,WAAK,KAAK,EAAC,MAAM,GAAO,CACpB,EACN;GACH;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/my-loader/my-loader.scss?tag=my-loader&encapsulation=scoped","./src/components/my-loader/my-loader.tsx"],"sourcesContent":["$color: #b8cf40, #ee4b5e, #ea0f47, #d42840, #8b2850;\n\n@mixin anim($i) {\n  $y: ($i + 5) * 3;\n\n  @keyframes right-#{$i} {\n    0% {\n      transform: translateY(#{-$y}px);\n    }\n    100% {\n      transform: translateY(#{$y}px);\n    }\n  }\n}\n\n.container {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 190px;\n  overflow: hidden;\n}\n\n.item {\n  width: 20px;\n  height: 20px;\n  margin: 3px;\n  list-style-type: none;\n  transition: 0.5s all ease;\n}\n\n@for $i from 1 through 5 {\n  .item:nth-child(#{$i}) {\n    @include anim($i);\n    animation: right-#{$i} 1s infinite alternate;\n    background-color: nth($color, $i);\n    animation-delay: 20ms * $i;\n  }\n}\n","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"],"version":3}