@ppg_pl/pallete 2.0.12 → 2.0.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,7 +1,7 @@
1
1
  import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
2
2
  import { s as setDataLayer, A as APIURL, a as accessToken } from './index2.js';
3
3
 
4
- const myColorboxCss = ".pallete-wrapper *{font-family:\"Galatea\", sans-serif}.my-color-box{width:125px;height:125px;display:block;margin-bottom:5px;cursor:pointer;display:flex;flex-direction:column;justify-content:flex-end;position:relative}@media (max-width: 1024px){.my-color-box{width:80px;height:80px}}.my-color-box .color-name{width:100%;background-color:#fff;padding:15px 0px 10px;border-top-left-radius:15px;border-top-right-radius:15px;opacity:0;transition:0.3s opacity ease-in-out;font-size:10px;color:#232323;text-transform:lowercase}.my-color-box.active .color-name{opacity:1}.my-color-box.categoryactive{width:120px;height:115px}.my-color-box.categoryactive .color-name{opacity:1}@media (max-width: 1024px){.my-color-box.categoryactive{width:72px;height:72px}}.my-color-box:hover .color-name{opacity:1}";
4
+ const myColorboxCss = ".pallete-wrapper *{font-family:\"Galatea\", sans-serif}.my-color-box{width:125px;height:125px;display:block;margin-bottom:5px;cursor:pointer;display:flex;flex-direction:column;justify-content:flex-end;position:relative}@media (max-width: 1024px){.my-color-box{width:65px;height:65px}}.my-color-box .color-name{width:100%;background-color:#fff;padding:15px 0px 10px;border-top-left-radius:15px;border-top-right-radius:15px;opacity:0;transition:0.3s opacity ease-in-out;font-size:10px;color:#232323;text-transform:lowercase}.my-color-box.active .color-name{opacity:1}.my-color-box.categoryactive{width:120px;height:115px}.my-color-box.categoryactive .color-name{opacity:1}@media (max-width: 1024px){.my-color-box.categoryactive{width:72px;height:72px}}.my-color-box:hover .color-name{opacity:1}";
5
5
 
6
6
  const MyColorBox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
7
7
  constructor() {
@@ -1 +1 @@
1
- {"file":"my-colorbox2.js","mappings":";;;AAAA,MAAM,aAAa,GAAG,0xBAA0xB;;MCSnyB,UAAU;;;;IAWrB,eAAU,GAAG;MACX,IAAI,CAAC,YAAY,GAAG,UAAU,CAAC;QAC7B,YAAY,CAAC;UACX,KAAK,EAAE,YAAY;UACnB,IAAI,EAAE,IAAI,CAAC,IAAI;UACf,OAAO,EAAE,IAAI,CAAC,OAAO;UACrB,KAAK,EAAE,IAAI,CAAC,IAAI;SACjB,CAAC,CAAC;OACJ,EAAE,IAAI,CAAC,CAAC;KACV,CAAC;IAEF,iBAAY,GAAG;MACb,IAAI,IAAI,CAAC,YAAY;QAAE,YAAY,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;MACvD,IAAI,CAAC,YAAY,GAAG,SAAS,CAAC;KAC/B,CAAC;IAEF,gBAAW,GAAG,CAAC,KAAa;MAC1B,MAAM,GAAG,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,EAAE,CAAC;MACnD,MAAM,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,EAAE,CAAC;MACrD,MAAM,IAAI,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,EAAE,CAAC;MACpD,OAAO,OAAO,GAAG,IAAI,KAAK,IAAI,IAAI,GAAG,CAAC;KACvC,CAAC;;;;;;;;;EAEF,MAAM;;IACJ,QACE,WACE,YAAY,EAAE,MAAM,IAAI,CAAC,UAAU,EAAE,EACrC,YAAY,EAAE,MAAM,IAAI,CAAC,YAAY,EAAE,EACvC,KAAK,EAAE,gBAAgB,IAAI,CAAC,QAAQ,GAAG,QAAQ,GAAG,EAAE,IAAI,IAAI,CAAC,gBAAgB,GAAG,gBAAgB,GAAG,EAAE,EAAE,EACvG,KAAK,EAAE;QACL,cAAc,EAAE,CAAA,MAAA,IAAI,CAAC,iBAAiB,0CAAE,iBAAiB,IAAG,OAAO,GAAG,EAAE;QACxE,eAAe,EAAE,CAAA,MAAA,IAAI,CAAC,iBAAiB,0CAAE,iBAAiB,IAAG,OAAO,MAAM,WAAW,IAAI,CAAC,iBAAiB,CAAC,QAAQ,iBAAiB,WAAW,GAAG,GAAG,EAAE;QACxJ,UAAU,EAAE,CAAA,MAAA,IAAI,CAAC,iBAAiB,0CAAE,iBAAiB,IAAG,IAAI,CAAC,iBAAiB,CAAC,QAAQ,GAAG,IAAI,CAAC,KAAK;QACpG,MAAM,EAAE,IAAI,CAAC,gBAAgB,GAAG,aAAa,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,GAAG,EAAE;OACjF,IAED,WAAK,KAAK,EAAC,YAAY,IAAE,IAAI,CAAC,IAAI,CAAO,CACrC,EACN;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/my-colorbox/my-colorbox.scss?tag=my-colorbox","./src/components/my-colorbox/my-colorbox.tsx"],"sourcesContent":["@import '../../global/app.scss';\n\n.my-color-box {\n width: 125px;\n height: 125px;\n display: block;\n margin-bottom: 5px;\n cursor: pointer;\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n position: relative;\n\n @media (max-width: $medium) {\n width: 80px;\n height: 80px;\n }\n .color-name {\n width: 100%;\n background-color: $white;\n padding: 15px 0px 10px;\n border-top-left-radius: 15px;\n border-top-right-radius: 15px;\n opacity: 0;\n transition: 0.3s opacity ease-in-out;\n font-size: 10px;\n color: $black;\n text-transform: lowercase;\n }\n &.active {\n .color-name {\n opacity: 1;\n }\n }\n\n &.categoryactive {\n width: 120px;\n height: 115px;\n .color-name {\n opacity: 1;\n }\n\n @media (max-width: $medium) {\n width: 72px;\n height: 72px;\n }\n }\n &:hover {\n .color-name {\n opacity: 1;\n }\n }\n}\n","import { Component, Prop, h } from '@stencil/core';\nimport { setDataLayer } from '../../gtmUtils';\nimport { ColorBoxyIsImageInsteadHex } from '../../types';\nimport { APIURL, accessToken } from '../api';\n\n@Component({\n tag: 'my-colorbox',\n styleUrl: 'my-colorbox.scss',\n})\nexport class MyColorBox {\n private checkTimeout: ReturnType<typeof setTimeout> | undefined;\n\n @Prop() color: string;\n @Prop() name: string;\n @Prop() shop: string;\n @Prop() product: string;\n @Prop() isActive?: boolean;\n @Prop() isCategoryActive?: boolean;\n @Prop() isImageInsteadHex?: ColorBoxyIsImageInsteadHex;\n\n colorCheck = () => {\n this.checkTimeout = setTimeout(() => {\n setDataLayer({\n event: 'ColorCheck',\n shop: this.shop,\n product: this.product,\n color: this.name,\n });\n }, 2000);\n };\n\n colorUnCheck = () => {\n if (this.checkTimeout) clearTimeout(this.checkTimeout);\n this.checkTimeout = undefined;\n };\n\n darkenColor = (color: string) => {\n const red = parseInt(color[1] + color[2], 16) - 20;\n const green = parseInt(color[3] + color[4], 16) - 20;\n const blue = parseInt(color[5] + color[6], 16) - 20;\n return `rgb(${red},${green},${blue})`;\n };\n\n render() {\n return (\n <div\n onMouseEnter={() => this.colorCheck()}\n onMouseLeave={() => this.colorUnCheck()}\n class={`my-color-box ${this.isActive ? 'active' : ''} ${this.isCategoryActive ? 'categoryactive' : ''}`}\n style={{\n backgroundSize: this.isImageInsteadHex?.isImageInsteadHex ? 'cover' : '',\n backgroundImage: this.isImageInsteadHex?.isImageInsteadHex ? `url(${APIURL}/assets/${this.isImageInsteadHex.bigImage}?access_token=${accessToken})` : '',\n background: this.isImageInsteadHex?.isImageInsteadHex ? this.isImageInsteadHex.bigImage : this.color,\n border: this.isCategoryActive ? `5px solid ${this.darkenColor(this.color)}` : '',\n }}\n >\n <div class=\"color-name\">{this.name}</div>\n </div>\n );\n }\n}\n"],"version":3}
1
+ {"file":"my-colorbox2.js","mappings":";;;AAAA,MAAM,aAAa,GAAG,0xBAA0xB;;MCSnyB,UAAU;;;;IAWrB,eAAU,GAAG;MACX,IAAI,CAAC,YAAY,GAAG,UAAU,CAAC;QAC7B,YAAY,CAAC;UACX,KAAK,EAAE,YAAY;UACnB,IAAI,EAAE,IAAI,CAAC,IAAI;UACf,OAAO,EAAE,IAAI,CAAC,OAAO;UACrB,KAAK,EAAE,IAAI,CAAC,IAAI;SACjB,CAAC,CAAC;OACJ,EAAE,IAAI,CAAC,CAAC;KACV,CAAC;IAEF,iBAAY,GAAG;MACb,IAAI,IAAI,CAAC,YAAY;QAAE,YAAY,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;MACvD,IAAI,CAAC,YAAY,GAAG,SAAS,CAAC;KAC/B,CAAC;IAEF,gBAAW,GAAG,CAAC,KAAa;MAC1B,MAAM,GAAG,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,EAAE,CAAC;MACnD,MAAM,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,EAAE,CAAC;MACrD,MAAM,IAAI,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,EAAE,CAAC;MACpD,OAAO,OAAO,GAAG,IAAI,KAAK,IAAI,IAAI,GAAG,CAAC;KACvC,CAAC;;;;;;;;;EAEF,MAAM;;IACJ,QACE,WACE,YAAY,EAAE,MAAM,IAAI,CAAC,UAAU,EAAE,EACrC,YAAY,EAAE,MAAM,IAAI,CAAC,YAAY,EAAE,EACvC,KAAK,EAAE,gBAAgB,IAAI,CAAC,QAAQ,GAAG,QAAQ,GAAG,EAAE,IAAI,IAAI,CAAC,gBAAgB,GAAG,gBAAgB,GAAG,EAAE,EAAE,EACvG,KAAK,EAAE;QACL,cAAc,EAAE,CAAA,MAAA,IAAI,CAAC,iBAAiB,0CAAE,iBAAiB,IAAG,OAAO,GAAG,EAAE;QACxE,eAAe,EAAE,CAAA,MAAA,IAAI,CAAC,iBAAiB,0CAAE,iBAAiB,IAAG,OAAO,MAAM,WAAW,IAAI,CAAC,iBAAiB,CAAC,QAAQ,iBAAiB,WAAW,GAAG,GAAG,EAAE;QACxJ,UAAU,EAAE,CAAA,MAAA,IAAI,CAAC,iBAAiB,0CAAE,iBAAiB,IAAG,IAAI,CAAC,iBAAiB,CAAC,QAAQ,GAAG,IAAI,CAAC,KAAK;QACpG,MAAM,EAAE,IAAI,CAAC,gBAAgB,GAAG,aAAa,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,GAAG,EAAE;OACjF,IAED,WAAK,KAAK,EAAC,YAAY,IAAE,IAAI,CAAC,IAAI,CAAO,CACrC,EACN;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/my-colorbox/my-colorbox.scss?tag=my-colorbox","./src/components/my-colorbox/my-colorbox.tsx"],"sourcesContent":["@import '../../global/app.scss';\n\n.my-color-box {\n width: 125px;\n height: 125px;\n display: block;\n margin-bottom: 5px;\n cursor: pointer;\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n position: relative;\n\n @media (max-width: $medium) {\n width: 65px;\n height: 65px;\n }\n .color-name {\n width: 100%;\n background-color: $white;\n padding: 15px 0px 10px;\n border-top-left-radius: 15px;\n border-top-right-radius: 15px;\n opacity: 0;\n transition: 0.3s opacity ease-in-out;\n font-size: 10px;\n color: $black;\n text-transform: lowercase;\n }\n &.active {\n .color-name {\n opacity: 1;\n }\n }\n\n &.categoryactive {\n width: 120px;\n height: 115px;\n .color-name {\n opacity: 1;\n }\n\n @media (max-width: $medium) {\n width: 72px;\n height: 72px;\n }\n }\n &:hover {\n .color-name {\n opacity: 1;\n }\n }\n}\n","import { Component, Prop, h } from '@stencil/core';\nimport { setDataLayer } from '../../gtmUtils';\nimport { ColorBoxyIsImageInsteadHex } from '../../types';\nimport { APIURL, accessToken } from '../api';\n\n@Component({\n tag: 'my-colorbox',\n styleUrl: 'my-colorbox.scss',\n})\nexport class MyColorBox {\n private checkTimeout: ReturnType<typeof setTimeout> | undefined;\n\n @Prop() color: string;\n @Prop() name: string;\n @Prop() shop: string;\n @Prop() product: string;\n @Prop() isActive?: boolean;\n @Prop() isCategoryActive?: boolean;\n @Prop() isImageInsteadHex?: ColorBoxyIsImageInsteadHex;\n\n colorCheck = () => {\n this.checkTimeout = setTimeout(() => {\n setDataLayer({\n event: 'ColorCheck',\n shop: this.shop,\n product: this.product,\n color: this.name,\n });\n }, 2000);\n };\n\n colorUnCheck = () => {\n if (this.checkTimeout) clearTimeout(this.checkTimeout);\n this.checkTimeout = undefined;\n };\n\n darkenColor = (color: string) => {\n const red = parseInt(color[1] + color[2], 16) - 20;\n const green = parseInt(color[3] + color[4], 16) - 20;\n const blue = parseInt(color[5] + color[6], 16) - 20;\n return `rgb(${red},${green},${blue})`;\n };\n\n render() {\n return (\n <div\n onMouseEnter={() => this.colorCheck()}\n onMouseLeave={() => this.colorUnCheck()}\n class={`my-color-box ${this.isActive ? 'active' : ''} ${this.isCategoryActive ? 'categoryactive' : ''}`}\n style={{\n backgroundSize: this.isImageInsteadHex?.isImageInsteadHex ? 'cover' : '',\n backgroundImage: this.isImageInsteadHex?.isImageInsteadHex ? `url(${APIURL}/assets/${this.isImageInsteadHex.bigImage}?access_token=${accessToken})` : '',\n background: this.isImageInsteadHex?.isImageInsteadHex ? this.isImageInsteadHex.bigImage : this.color,\n border: this.isCategoryActive ? `5px solid ${this.darkenColor(this.color)}` : '',\n }}\n >\n <div class=\"color-name\">{this.name}</div>\n </div>\n );\n }\n}\n"],"version":3}
@@ -2372,7 +2372,7 @@ const MyModal = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement$1 {
2372
2372
  this.close = createEvent(this, "close", 7);
2373
2373
  this.readyToCLose = createEvent(this, "readyToCLose", 7);
2374
2374
  this.boxDesktopWidth = 130;
2375
- this.boxMobileWidth = 85;
2375
+ this.boxMobileWidth = 70;
2376
2376
  this.desktopPadding = 75;
2377
2377
  this.mobilePadding = 35;
2378
2378
  this.mediumBreakpoint = 1024;