@ppg_pl/tinting 0.0.5 → 0.0.7

package/dist/components/index8.js

@@ -8,7 +8,10 @@ const MyColorInfo = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     super();
     this.__registerHost();
     this.onCurrentColor = createEvent(this, "onCurrentColor", 7);
+    this.addToBasket = createEvent(this, "addToBasket", 7);
     this.closeInfoBox = createEvent(this, "closeInfoBox", 7);
+    this.loadingTimeout = null;
+    this.successTimeout = null;
     this.goToProduct = () => {
       var _a;
       this.onCurrentColor.emit(this.currentColor);
@@ -24,6 +27,13 @@ const MyColorInfo = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.onCloseButtonClick = () => {
       this.closeInfoBox.emit();
     };
+    this.getHref = () => {
+      var _a, _b, _c, _d;
+      if (this.baselink) {
+        return `${this.baselink}/${(_b = (_a = this === null || this === void 0 ? void 0 : this.currentColor.links) === null || _a === void 0 ? void 0 : _a.find((link) => (link === null || link === void 0 ? void 0 : link.shop) === this.shop)) === null || _b === void 0 ? void 0 : _b.path}`;
+      }
+      return (_d = (_c = this === null || this === void 0 ? void 0 : this.currentColor.links) === null || _c === void 0 ? void 0 : _c.find((link) => (link === null || link === void 0 ? void 0 : link.shop) === this.shop)) === null || _d === void 0 ? void 0 : _d.path;
+    };
     this.renderSliderOrImage = () => {
       var _a;
       if (this.currentColor.imageInsteadHex) {
@@ -36,32 +46,100 @@ const MyColorInfo = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.capitalizeFirstLetter = (string) => {
       return string.charAt(0).toUpperCase() + string.slice(1).toLocaleLowerCase();
     };
+    this.isVeryLightBackground = () => {
+      var _a, _b;
+      if (this.currentColor.imageInsteadHex)
+        return true;
+      const hex = (_b = (_a = this.currentColor.hex) === null || _a === void 0 ? void 0 : _a.replace('#', '')) !== null && _b !== void 0 ? _b : '';
+      if (hex.length !== 6 && hex.length !== 3)
+        return false;
+      const r = parseInt(hex.length === 3 ? hex[0] + hex[0] : hex.slice(0, 2), 16) / 255;
+      const g = parseInt(hex.length === 3 ? hex[1] + hex[1] : hex.slice(2, 4), 16) / 255;
+      const b = parseInt(hex.length === 3 ? hex[2] + hex[2] : hex.slice(4, 6), 16) / 255;
+      const luminance = 0.299 * r + 0.587 * g + 0.114 * b;
+      return luminance > 0.96;
+    };
+    this.getButtonClass = () => {
+      if (this.currentColor.imageInsteadHex)
+        return 'brown';
+      return this.isVeryLightBackground() ? 'inverse' : '';
+    };
+    this.handleAddToBasket = () => {
+      var _a;
+      if (!((_a = this.availableTesters) === null || _a === void 0 ? void 0 : _a.id_product_attribute))
+        return;
+      if (this.basketStatus !== 'idle')
+        return;
+      this.clearBasketTimeouts();
+      this.basketStatus = 'loading';
+      this.addToBasket.emit({
+        id: this.availableTesters.id_product_attribute,
+      });
+      this.loadingTimeout = setTimeout(() => {
+        this.basketStatus = 'success';
+        this.successTimeout = setTimeout(() => {
+          this.basketStatus = 'idle';
+        }, 2500);
+      }, 900);
+    };
     this.currentColor = undefined;
     this.shop = undefined;
     this.product = undefined;
     this.baselink = undefined;
+    this.availableTesters = undefined;
+    this.price = undefined;
     this.data = null;
     this.isMobile = false;
     this.infoBoxWidth = undefined;
     this.closeImage = 'close.png';
+    this.basketStatus = 'idle';
+  }
+  onColorChange(newColor, oldColor) {
+    if ((newColor === null || newColor === void 0 ? void 0 : newColor.name) === (oldColor === null || oldColor === void 0 ? void 0 : oldColor.name))
+      return;
+    this.resetBasketStatus();
+  }
+  disconnectedCallback() {
+    this.clearBasketTimeouts();
+  }
+  clearBasketTimeouts() {
+    if (this.loadingTimeout) {
+      clearTimeout(this.loadingTimeout);
+      this.loadingTimeout = null;
+    }
+    if (this.successTimeout) {
+      clearTimeout(this.successTimeout);
+      this.successTimeout = null;
+    }
+  }
+  resetBasketStatus() {
+    this.clearBasketTimeouts();
+    this.basketStatus = 'idle';
   }
   render() {
+    var _a;
     return (h("div", { class: `boxes__box-content ${this.currentColor.textWhite ? 'boxes__box-content__white' : ''}`, style: {
         background: this.currentColor.imageInsteadHex ? 'white' : 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" }), h("h2", null, this.currentColor.name), !this.isMobile && h("h4", null, this.currentColor.number), h("div", { class: "boxes__box-content__info__value" }, h("div", { class: "boxes__box-content__info__value-product" }, this.isMobile && h("div", { class: 'divider' }), this.currentColor && (h("button", { onClick: this.goToProduct, class: `button ${this.currentColor.imageInsteadHex ? 'brown' : this.currentColor.buttonInverse ? 'inverse' : ''}` }, "wybierz kolor"))))), h("div", { class: "boxes__box-content__slider" }, this.renderSliderOrImage())));
+      } }, !this.isMobile && h("img", { class: 'closebtn', onClick: this.onCloseButtonClick, src: getAssetPath(`./assets/${this.closeImage}`), alt: "closebtn" }), h("h2", null, this.currentColor.name), !this.isMobile && h("h4", null, this.currentColor.number), h("div", { class: "boxes__box-content__info__value" }, h("div", { class: "divider" }), h("div", { class: "boxes__box-content__info__tester" }, h("div", { class: "divider" }), h("div", { class: "tester-text" }, h("h2", null, "Zamow tester"), h("p", null, "Sprawdz go na swojej scianie.")), h("div", { class: "tester-buy" }, h("div", { class: "price" }, this.price ? `${this.price} zl` : ''), this.isMobile && h("div", { class: 'divider' }), this.basketStatus !== 'success' && (h("button", { class: `button fit ${this.getButtonClass()} ${!this.availableTesters ? 'disabled' : ''} ${this.basketStatus === 'loading' ? 'is-loading' : ''}`, onClick: this.handleAddToBasket, disabled: !this.availableTesters || this.basketStatus === 'loading' }, h("span", { class: "button-content" }, h("span", { class: "shape-icon", "aria-hidden": "true" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "15", height: "16", viewBox: "0 0 15 16" }, h("path", { class: "shape-icon__path", transform: "translate(0.0867462 0)", d: "M13.246571 12.763281L11.931726 4.961875C11.801879 4.1936703 11.13567 3.6319427 10.35657 3.63375L9.7429771 3.63375L9.7429771 3.1025C9.7429771 1.3890365 8.35394 0 6.6404767 0C4.9270134 0 3.537977 1.3890365 3.537977 3.1025L3.537977 3.63375L2.9217269 3.63375C2.1426277 3.6319427 1.4764187 4.1936703 1.3465706 4.961875L0.034383144 12.763281C-0.086738147 13.483807 0.11555123 14.221112 0.58740741 14.778946C1.0592636 15.336781 1.7528107 15.658594 2.4834456 15.658594L10.797508 15.658594C11.528143 15.658594 12.22169 15.336781 12.693546 14.778946C13.165402 14.221112 13.367692 13.483807 13.246571 12.763281L13.246571 12.763281ZM4.3348517 3.0892186C4.3348517 1.8158572 5.3671155 0.78359371 6.6404767 0.78359371C7.9138384 0.78359371 8.9461021 1.8158572 8.9461021 3.0892186L8.9461021 3.6204686L4.3348517 3.6204686L4.3348517 3.0892186ZM12.08579 14.264063C11.765244 14.643165 11.293964 14.86172 10.797508 14.86172L2.4834456 14.86172C1.9871488 14.862442 1.5158025 14.644215 1.195269 14.265309C0.87473541 13.886404 0.73765546 13.385406 0.82063317 12.896093L2.1248519 5.092031C2.1891608 4.703371 2.5278175 4.4200282 2.9217269 4.4252396L3.5353208 4.4252396L3.5353208 5.5834374C3.5353208 5.8034883 3.7137072 5.9818749 3.9337583 5.9818749C4.1538091 5.9818749 4.3321958 5.8034883 4.3321958 5.5834374L4.3321958 4.4252396L8.9461021 4.4252396L8.9461021 5.5834374C8.9461021 5.8034883 9.1244888 5.9818749 9.3445396 5.9818749C9.5645905 5.9818749 9.7429771 5.8034883 9.7429771 5.5834374L9.7429771 4.4252396L10.359227 4.4252396C10.753137 4.4200282 11.091793 4.703371 11.156102 5.092031L12.46032 12.896093C12.542204 13.384947 12.40527 13.885097 12.08579 14.264063L12.08579 14.264063Z" }))), !this.availableTesters ? 'Tester obecnie niedostepny' : 'Dodaj do koszyka'), this.basketStatus === 'loading' && (h("span", { class: "spinner", "aria-hidden": "true" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 24 24" }, h("path", { d: "M12 2 A10 10 0 1 1 2 12", fill: "none", stroke: "currentColor", "stroke-width": "2.5", "stroke-linecap": "round" })))))), this.basketStatus === 'success' && (h("div", { class: `basket-status basket-status--success ${this.getButtonClass()}`, role: "status", "aria-live": "polite" }, h("span", { class: "check-icon", "aria-hidden": "true" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24" }, h("path", { d: "M5 12.5l4.5 4.5L19 7.5", fill: "none", stroke: "currentColor", "stroke-width": "2.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("span", null, h("strong", null, "Dodano"), " do koszyka"))))), h("div", { class: "boxes__box-content__info__value-product" }, this.currentColor && ((_a = this.currentColor.links) === null || _a === void 0 ? void 0 : _a.find((link) => (link === null || link === void 0 ? void 0 : link.shop) === this.shop)) && (h("a", { onClick: this.goToProduct, href: this.getHref(), class: `button ${this.getButtonClass()}` }, "wybierz kolor"))))), h("div", { class: "boxes__box-content__slider" }, this.renderSliderOrImage())));
   }
+  static get watchers() { return {
+    "currentColor": ["onColorChange"]
+  }; }
 }, [0, "my-colorinfo", {
     "currentColor": [16],
     "shop": [1],
     "product": [1],
     "baselink": [1],
+    "availableTesters": [16],
+    "price": [2],
     "data": [16],
     "isMobile": [4, "is-mobile"],
     "infoBoxWidth": [2, "info-box-width"],
-    "closeImage": [1, "close-image"]
+    "closeImage": [1, "close-image"],
+    "basketStatus": [32]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {

package/dist/components/index8.js.map

@@ -1 +1 @@
-{"file":"index8.js","mappings":"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","names":[],"sources":["./src/components/colorinfo/index.tsx"],"sourcesContent":["import { Component, Prop, h, getAssetPath, Event, EventEmitter } from '@stencil/core';\nimport { setDataLayer } from '../../gtmUtils';\nimport { Color, Product } from '../../types';\nimport { APIURL, accessToken } from '../api';\n\n@Component({\n  tag: 'my-colorinfo',\n})\nexport class MyColorInfo {\n  @Prop() currentColor: Color;\n  @Prop() shop: string;\n  @Prop() product: string;\n  @Prop() baselink: string;\n  @Prop() data: Product | null = null;\n  @Prop() isMobile: boolean = false;\n  @Prop() infoBoxWidth: number | null;\n  @Prop() closeImage = 'close.png';\n  @Event({ bubbles: true, composed: true }) onCurrentColor: EventEmitter<Color>;\n\n  @Event() closeInfoBox: EventEmitter;\n\n  goToProduct = () => {\n    this.onCurrentColor.emit(this.currentColor);\n    this.currentColor &&\n      setDataLayer({\n        event: 'GoToProduct',\n        shop: this.shop,\n        product: this.product,\n        color: this.currentColor?.name,\n      });\n\n    this.closeInfoBox.emit();\n  };\n\n  onCloseButtonClick = () => {\n    this.closeInfoBox.emit();\n  };\n\n  renderSliderOrImage = () => {\n    if (this.currentColor.imageInsteadHex) {\n      return <img class={'color-big-image'} src={`${APIURL}/assets/${this.currentColor.bigImage}?access_token=${accessToken}`} alt=\"color-image\" />;\n    } else {\n      return <my-slider color={this.currentColor.name} shop={this.shop} product={this.product} slides={this.data?.images}></my-slider>;\n    }\n  };\n\n  capitalizeFirstLetter = (string: string) => {\n    return string.charAt(0).toUpperCase() + string.slice(1).toLocaleLowerCase();\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.imageInsteadHex ? 'white' : 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          <h2>{this.currentColor.name}</h2>\n          {!this.isMobile && <h4>{this.currentColor.number}</h4>}\n\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 && (\n                <button onClick={this.goToProduct} class={`button ${this.currentColor.imageInsteadHex ? 'brown' : this.currentColor.buttonInverse ? 'inverse' : ''}`}>\n                  wybierz kolor\n                </button>\n              )}\n            </div>\n          </div>\n        </div>\n        <div class=\"boxes__box-content__slider\">{this.renderSliderOrImage()}</div>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"index8.js","mappings":"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","names":[],"sources":["./src/components/colorinfo/index.tsx"],"sourcesContent":["import { Component, Prop, State, Watch, h, getAssetPath, Event, EventEmitter } from '@stencil/core';\nimport { setDataLayer } from '../../gtmUtils';\nimport { AvailableTester, Color, Link, Product } from '../../types';\nimport { APIURL, accessToken } from '../api';\n\n@Component({\n  tag: 'my-colorinfo',\n})\nexport class MyColorInfo {\n  @Prop() currentColor: Color;\n  @Prop() shop: string;\n  @Prop() product: string;\n  @Prop() baselink: string;\n  @Prop() availableTesters: AvailableTester | null;\n  @Prop() price: number | null;\n  @Prop() data: Product | null = null;\n  @Prop() isMobile: boolean = false;\n  @Prop() infoBoxWidth: number | null;\n  @Prop() closeImage = 'close.png';\n  @State() basketStatus: 'idle' | 'loading' | 'success' = 'idle';\n  private loadingTimeout: ReturnType<typeof setTimeout> | null = null;\n  private successTimeout: ReturnType<typeof setTimeout> | null = null;\n  @Event({ bubbles: true, composed: true }) onCurrentColor: EventEmitter<Color>;\n  @Event({ bubbles: true, composed: true }) addToBasket: EventEmitter<{ id: number }>;\n\n  @Event() closeInfoBox: EventEmitter;\n\n  @Watch('currentColor')\n  onColorChange(newColor: Color, oldColor: Color) {\n    if (newColor?.name === oldColor?.name) return;\n    this.resetBasketStatus();\n  }\n\n  disconnectedCallback() {\n    this.clearBasketTimeouts();\n  }\n\n  private clearBasketTimeouts() {\n    if (this.loadingTimeout) {\n      clearTimeout(this.loadingTimeout);\n      this.loadingTimeout = null;\n    }\n\n    if (this.successTimeout) {\n      clearTimeout(this.successTimeout);\n      this.successTimeout = null;\n    }\n  }\n\n  private resetBasketStatus() {\n    this.clearBasketTimeouts();\n    this.basketStatus = 'idle';\n  }\n\n  goToProduct = () => {\n    this.onCurrentColor.emit(this.currentColor);\n    this.currentColor &&\n      setDataLayer({\n        event: 'GoToProduct',\n        shop: this.shop,\n        product: this.product,\n        color: this.currentColor?.name,\n      });\n\n    this.closeInfoBox.emit();\n  };\n\n  onCloseButtonClick = () => {\n    this.closeInfoBox.emit();\n  };\n\n  getHref = () => {\n    if (this.baselink) {\n      return `${this.baselink}/${this?.currentColor.links?.find((link: Link) => link?.shop === this.shop)?.path}`;\n    }\n    return this?.currentColor.links?.find((link: Link) => link?.shop === this.shop)?.path;\n  };\n\n  renderSliderOrImage = () => {\n    if (this.currentColor.imageInsteadHex) {\n      return <img class={'color-big-image'} src={`${APIURL}/assets/${this.currentColor.bigImage}?access_token=${accessToken}`} alt=\"color-image\" />;\n    } else {\n      return <my-slider color={this.currentColor.name} shop={this.shop} product={this.product} slides={this.data?.images}></my-slider>;\n    }\n  };\n\n  capitalizeFirstLetter = (string: string) => {\n    return string.charAt(0).toUpperCase() + string.slice(1).toLocaleLowerCase();\n  };\n\n  isVeryLightBackground = (): boolean => {\n    if (this.currentColor.imageInsteadHex) return true;\n    const hex = this.currentColor.hex?.replace('#', '') ?? '';\n    if (hex.length !== 6 && hex.length !== 3) return false;\n    const r = parseInt(hex.length === 3 ? hex[0] + hex[0] : hex.slice(0, 2), 16) / 255;\n    const g = parseInt(hex.length === 3 ? hex[1] + hex[1] : hex.slice(2, 4), 16) / 255;\n    const b = parseInt(hex.length === 3 ? hex[2] + hex[2] : hex.slice(4, 6), 16) / 255;\n    const luminance = 0.299 * r + 0.587 * g + 0.114 * b;\n    return luminance > 0.96;\n  };\n\n  getButtonClass = () => {\n    if (this.currentColor.imageInsteadHex) return 'brown';\n    return this.isVeryLightBackground() ? 'inverse' : '';\n  };\n\n  handleAddToBasket = () => {\n    if (!this.availableTesters?.id_product_attribute) return;\n    if (this.basketStatus !== 'idle') return;\n\n    this.clearBasketTimeouts();\n    this.basketStatus = 'loading';\n    this.addToBasket.emit({\n      id: this.availableTesters.id_product_attribute,\n    });\n\n    this.loadingTimeout = setTimeout(() => {\n      this.basketStatus = 'success';\n      this.successTimeout = setTimeout(() => {\n        this.basketStatus = 'idle';\n      }, 2500);\n    }, 900);\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.imageInsteadHex ? 'white' : 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          <h2>{this.currentColor.name}</h2>\n          {!this.isMobile && <h4>{this.currentColor.number}</h4>}\n\n          <div class=\"boxes__box-content__info__value\">\n            <div class=\"divider\"></div>\n            <div class=\"boxes__box-content__info__tester\">\n              <div class=\"divider\"></div>\n              <div class=\"tester-text\">\n                <h2>Zamow tester</h2>\n                <p>Sprawdz go na swojej scianie.</p>\n              </div>\n              <div class=\"tester-buy\">\n                <div class=\"price\">{this.price ? `${this.price} zl` : ''}</div>\n                {this.isMobile && <div class={'divider'}></div>}\n                {this.basketStatus !== 'success' && (\n                  <button\n                    class={`button fit ${this.getButtonClass()} ${!this.availableTesters ? 'disabled' : ''} ${\n                      this.basketStatus === 'loading' ? 'is-loading' : ''\n                    }`}\n                    onClick={this.handleAddToBasket}\n                    disabled={!this.availableTesters || this.basketStatus === 'loading'}\n                  >\n                    <span class=\"button-content\">\n                      <span class=\"shape-icon\" aria-hidden=\"true\">\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"15\" height=\"16\" viewBox=\"0 0 15 16\">\n                          <path\n                            class=\"shape-icon__path\"\n                            transform=\"translate(0.0867462 0)\"\n                            d=\"M13.246571 12.763281L11.931726 4.961875C11.801879 4.1936703 11.13567 3.6319427 10.35657 3.63375L9.7429771 3.63375L9.7429771 3.1025C9.7429771 1.3890365 8.35394 0 6.6404767 0C4.9270134 0 3.537977 1.3890365 3.537977 3.1025L3.537977 3.63375L2.9217269 3.63375C2.1426277 3.6319427 1.4764187 4.1936703 1.3465706 4.961875L0.034383144 12.763281C-0.086738147 13.483807 0.11555123 14.221112 0.58740741 14.778946C1.0592636 15.336781 1.7528107 15.658594 2.4834456 15.658594L10.797508 15.658594C11.528143 15.658594 12.22169 15.336781 12.693546 14.778946C13.165402 14.221112 13.367692 13.483807 13.246571 12.763281L13.246571 12.763281ZM4.3348517 3.0892186C4.3348517 1.8158572 5.3671155 0.78359371 6.6404767 0.78359371C7.9138384 0.78359371 8.9461021 1.8158572 8.9461021 3.0892186L8.9461021 3.6204686L4.3348517 3.6204686L4.3348517 3.0892186ZM12.08579 14.264063C11.765244 14.643165 11.293964 14.86172 10.797508 14.86172L2.4834456 14.86172C1.9871488 14.862442 1.5158025 14.644215 1.195269 14.265309C0.87473541 13.886404 0.73765546 13.385406 0.82063317 12.896093L2.1248519 5.092031C2.1891608 4.703371 2.5278175 4.4200282 2.9217269 4.4252396L3.5353208 4.4252396L3.5353208 5.5834374C3.5353208 5.8034883 3.7137072 5.9818749 3.9337583 5.9818749C4.1538091 5.9818749 4.3321958 5.8034883 4.3321958 5.5834374L4.3321958 4.4252396L8.9461021 4.4252396L8.9461021 5.5834374C8.9461021 5.8034883 9.1244888 5.9818749 9.3445396 5.9818749C9.5645905 5.9818749 9.7429771 5.8034883 9.7429771 5.5834374L9.7429771 4.4252396L10.359227 4.4252396C10.753137 4.4200282 11.091793 4.703371 11.156102 5.092031L12.46032 12.896093C12.542204 13.384947 12.40527 13.885097 12.08579 14.264063L12.08579 14.264063Z\"\n                          />\n                        </svg>\n                      </span>\n                      {!this.availableTesters ? 'Tester obecnie niedostepny' : 'Dodaj do koszyka'}\n                    </span>\n                    {this.basketStatus === 'loading' && (\n                      <span class=\"spinner\" aria-hidden=\"true\">\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\">\n                          <path d=\"M12 2 A10 10 0 1 1 2 12\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" />\n                        </svg>\n                      </span>\n                    )}\n                  </button>\n                )}\n                {this.basketStatus === 'success' && (\n                  <div class={`basket-status basket-status--success ${this.getButtonClass()}`} role=\"status\" aria-live=\"polite\">\n                    <span class=\"check-icon\" aria-hidden=\"true\">\n                      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\n                        <path d=\"M5 12.5l4.5 4.5L19 7.5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                      </svg>\n                    </span>\n                    <span>\n                      <strong>Dodano</strong> do koszyka\n                    </span>\n                  </div>\n                )}\n              </div>\n            </div>\n            <div class=\"boxes__box-content__info__value-product\">\n              {this.currentColor && this.currentColor.links?.find((link: Link) => link?.shop === this.shop) && (\n                <a onClick={this.goToProduct} href={this.getHref()} class={`button ${this.getButtonClass()}`}>\n                  wybierz kolor\n                </a>\n              )}\n            </div>\n          </div>\n        </div>\n        <div class=\"boxes__box-content__slider\">{this.renderSliderOrImage()}</div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/index9.js

@@ -5223,12 +5223,13 @@ function Controller({
   });
 }
 
-const indexCss = "@font-face{font-family:swiper-icons;src:url('data:application/font-woff;charset=utf-8;base64, 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');font-weight:400;font-style:normal}:root{--swiper-theme-color:#007aff}.swiper{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;box-sizing:content-box}.swiper-android .swiper-slide,.swiper-wrapper{transform:translate3d(0px,0,0)}.swiper-pointer-events{touch-action:pan-y}.swiper-pointer-events.swiper-vertical{touch-action:pan-x}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-backface-hidden .swiper-slide{transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-3d,.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-cube-shadow,.swiper-3d .swiper-slide,.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top,.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-3d .swiper-slide-shadow{background:rgba(0,0,0,.15)}.swiper-3d .swiper-slide-shadow-left{background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-right{background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-top{background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-bottom{background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-horizontal.swiper-css-mode>.swiper-wrapper{scroll-snap-type:x mandatory}.swiper-vertical.swiper-css-mode>.swiper-wrapper{scroll-snap-type:y mandatory}.swiper-centered>.swiper-wrapper::before{content:'';flex-shrink:0;order:9999}.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-centered-offset-before)}.swiper-centered.swiper-horizontal>.swiper-wrapper::before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-centered-offset-before)}.swiper-centered.swiper-vertical>.swiper-wrapper::before{width:100%;min-width:1px;height:var(--swiper-centered-offset-after)}.swiper-centered>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center;scroll-snap-stop:always}.swiper-virtual .swiper-slide{-webkit-backface-visibility:hidden;transform:translateZ(0)}.swiper-virtual.swiper-css-mode .swiper-wrapper::after{content:'';position:absolute;left:0;top:0;pointer-events:none}.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after{height:1px;width:var(--swiper-virtual-size)}.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after{width:1px;height:var(--swiper-virtual-size)}:root{--swiper-navigation-size:44px}.swiper-button-next,.swiper-button-prev{position:absolute;top:50%;width:calc(var(--swiper-navigation-size)/ 44 * 27);height:var(--swiper-navigation-size);margin-top:calc(0px - (var(--swiper-navigation-size)/ 2));z-index:10;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--swiper-navigation-color,var(--swiper-theme-color))}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.swiper-button-next.swiper-button-hidden,.swiper-button-prev.swiper-button-hidden{opacity:0;cursor:auto;pointer-events:none}.swiper-navigation-disabled .swiper-button-next,.swiper-navigation-disabled .swiper-button-prev{display:none!important}.swiper-button-next:after,.swiper-button-prev:after{font-family:swiper-icons;font-size:var(--swiper-navigation-size);text-transform:none!important;letter-spacing:0;font-variant:initial;line-height:1}.swiper-button-prev,.swiper-rtl .swiper-button-next{left:10px;right:auto}.swiper-button-prev:after,.swiper-rtl .swiper-button-next:after{content:'prev'}.swiper-button-next,.swiper-rtl .swiper-button-prev{right:10px;left:auto}.swiper-button-next:after,.swiper-rtl .swiper-button-prev:after{content:'next'}.swiper-button-lock{display:none}.swiper-pagination{position:absolute;text-align:center;transition:.3s opacity;transform:translate3d(0,0,0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-pagination-disabled>.swiper-pagination,.swiper-pagination.swiper-pagination-disabled{display:none!important}.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:10px;left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transform:scale(.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{transform:scale(.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{transform:scale(.33)}.swiper-pagination-bullet{width:var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,8px));height:var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,8px));display:inline-block;border-radius:50%;background:var(--swiper-pagination-bullet-inactive-color,#000);opacity:var(--swiper-pagination-bullet-inactive-opacity, .2)}button.swiper-pagination-bullet{border:none;margin:0;padding:0;box-shadow:none;-webkit-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet:only-child{display:none!important}.swiper-pagination-bullet-active{opacity:var(--swiper-pagination-bullet-opacity, 1);background:var(--swiper-pagination-color,var(--swiper-theme-color))}.swiper-pagination-vertical.swiper-pagination-bullets,.swiper-vertical>.swiper-pagination-bullets{right:10px;top:50%;transform:translate3d(0px,-50%,0)}.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:var(--swiper-pagination-bullet-vertical-gap,6px) 0;display:block}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;transform:translateY(-50%);width:8px}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;transition:.2s transform,.2s top}.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 var(--swiper-pagination-bullet-horizontal-gap,4px)}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;transform:translateX(-50%);white-space:nowrap}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s left}.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s right}.swiper-pagination-progressbar{background:rgba(0,0,0,.25);position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color,var(--swiper-theme-color));position:absolute;left:0;top:0;width:100%;height:100%;transform:scale(0);transform-origin:left top}.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{transform-origin:right top}.swiper-horizontal>.swiper-pagination-progressbar,.swiper-pagination-progressbar.swiper-pagination-horizontal,.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite{width:100%;height:4px;left:0;top:0}.swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-vertical,.swiper-vertical>.swiper-pagination-progressbar{width:4px;height:100%;left:0;top:0}.swiper-pagination-lock{display:none}.swiper-scrollbar{border-radius:10px;position:relative;-ms-touch-action:none;background:rgba(0,0,0,.1)}.swiper-scrollbar-disabled>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-disabled{display:none!important}.swiper-horizontal>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-horizontal{position:absolute;left:1%;bottom:3px;z-index:50;height:5px;width:98%}.swiper-scrollbar.swiper-scrollbar-vertical,.swiper-vertical>.swiper-scrollbar{position:absolute;right:3px;top:1%;z-index:50;width:5px;height:98%}.swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:rgba(0,0,0,.5);border-radius:10px;left:0;top:0}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-scrollbar-lock{display:none}.swiper-zoom-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center;text-align:center}.swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg{max-width:100%;max-height:100%;object-fit:contain}.swiper-slide-zoomed{cursor:move}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;transform-origin:50%;box-sizing:border-box;border:4px solid var(--swiper-preloader-color,var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader,.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader{animation:swiper-preloader-spin 1s infinite linear}.swiper-lazy-preloader-white{--swiper-preloader-color:#fff}.swiper-lazy-preloader-black{--swiper-preloader-color:#000}@keyframes swiper-preloader-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.swiper .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}.swiper-free-mode>.swiper-wrapper{transition-timing-function:ease-out;margin:0 auto}.swiper-grid>.swiper-wrapper{flex-wrap:wrap}.swiper-grid-column>.swiper-wrapper{flex-wrap:wrap;flex-direction:column}.swiper-fade.swiper-free-mode .swiper-slide{transition-timing-function:ease-out}.swiper-fade .swiper-slide{pointer-events:none;transition-property:opacity}.swiper-fade .swiper-slide .swiper-slide{pointer-events:none}.swiper-fade .swiper-slide-active,.swiper-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-cube{overflow:visible}.swiper-cube .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1;visibility:hidden;transform-origin:0 0;width:100%;height:100%}.swiper-cube .swiper-slide .swiper-slide{pointer-events:none}.swiper-cube.swiper-rtl .swiper-slide{transform-origin:100% 0}.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-next,.swiper-cube .swiper-slide-next+.swiper-slide,.swiper-cube .swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-cube .swiper-slide-shadow-bottom,.swiper-cube .swiper-slide-shadow-left,.swiper-cube .swiper-slide-shadow-right,.swiper-cube .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0px;width:100%;height:100%;opacity:.6;z-index:0}.swiper-cube .swiper-cube-shadow:before{content:'';background:#000;position:absolute;left:0;top:0;bottom:0;right:0;filter:blur(50px)}.swiper-flip{overflow:visible}.swiper-flip .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1}.swiper-flip .swiper-slide .swiper-slide{pointer-events:none}.swiper-flip .swiper-slide-active,.swiper-flip .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-flip .swiper-slide-shadow-bottom,.swiper-flip .swiper-slide-shadow-left,.swiper-flip .swiper-slide-shadow-right,.swiper-flip .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-creative .swiper-slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden;transition-property:transform,opacity,height}.swiper-cards{overflow:visible}.swiper-cards .swiper-slide{transform-origin:center bottom;-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden}@import url(\"https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap\"); .tinting-wrapper *{font-family:\"Poppins\", sans-serif}.slider-wrapper{width:100%;position:relative;height:100%;display:flex;max-width:1100px;flex-direction:row;align-items:center;justify-content:space-between}@media (max-width: 1024px){.slider-wrapper{height:220px}}.slider-wrapper .swiper{margin:0}.slider-wrapper .swiper-slide img{display:block;width:100%;height:100%;object-fit:cover}.slider-wrapper .mySwiper2{height:100%;width:80%;position:relative}@media (max-width: 1024px){.slider-wrapper .mySwiper2{width:100%}}.slider-wrapper .mySwiper2 .swiper-button-prev,.slider-wrapper .mySwiper2 .swiper-button-next{z-index:20;position:absolute;bottom:15px;width:23px;top:inherit;height:23px;background-color:#fff}.slider-wrapper .mySwiper2 .swiper-button-prev::after,.slider-wrapper .mySwiper2 .swiper-button-next::after{font-size:11px;color:#232323;font-weight:bold}.slider-wrapper .mySwiper2 .swiper-button-prev{right:40px;left:initial}.slider-wrapper .mySwiper{width:20%;height:100%;box-sizing:border-box}@media (max-width: 1024px){.slider-wrapper .mySwiper{display:none}}.slider-wrapper .mySwiper .swiper-slide{height:100%;cursor:pointer}.slider-wrapper .mySwiper .swiper-slide-thumb-active{opacity:1}";
+const indexCss = "@font-face{font-family:swiper-icons;src:url('data:application/font-woff;charset=utf-8;base64, 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');font-weight:400;font-style:normal}:root{--swiper-theme-color:#007aff}.swiper{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;box-sizing:content-box}.swiper-android .swiper-slide,.swiper-wrapper{transform:translate3d(0px,0,0)}.swiper-pointer-events{touch-action:pan-y}.swiper-pointer-events.swiper-vertical{touch-action:pan-x}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-backface-hidden .swiper-slide{transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-3d,.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-cube-shadow,.swiper-3d .swiper-slide,.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top,.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-3d .swiper-slide-shadow{background:rgba(0,0,0,.15)}.swiper-3d .swiper-slide-shadow-left{background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-right{background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-top{background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-bottom{background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-horizontal.swiper-css-mode>.swiper-wrapper{scroll-snap-type:x mandatory}.swiper-vertical.swiper-css-mode>.swiper-wrapper{scroll-snap-type:y mandatory}.swiper-centered>.swiper-wrapper::before{content:'';flex-shrink:0;order:9999}.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-centered-offset-before)}.swiper-centered.swiper-horizontal>.swiper-wrapper::before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-centered-offset-before)}.swiper-centered.swiper-vertical>.swiper-wrapper::before{width:100%;min-width:1px;height:var(--swiper-centered-offset-after)}.swiper-centered>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center;scroll-snap-stop:always}.swiper-virtual .swiper-slide{-webkit-backface-visibility:hidden;transform:translateZ(0)}.swiper-virtual.swiper-css-mode .swiper-wrapper::after{content:'';position:absolute;left:0;top:0;pointer-events:none}.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after{height:1px;width:var(--swiper-virtual-size)}.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after{width:1px;height:var(--swiper-virtual-size)}:root{--swiper-navigation-size:44px}.swiper-button-next,.swiper-button-prev{position:absolute;top:50%;width:calc(var(--swiper-navigation-size)/ 44 * 27);height:var(--swiper-navigation-size);margin-top:calc(0px - (var(--swiper-navigation-size)/ 2));z-index:10;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--swiper-navigation-color,var(--swiper-theme-color))}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.swiper-button-next.swiper-button-hidden,.swiper-button-prev.swiper-button-hidden{opacity:0;cursor:auto;pointer-events:none}.swiper-navigation-disabled .swiper-button-next,.swiper-navigation-disabled .swiper-button-prev{display:none!important}.swiper-button-next:after,.swiper-button-prev:after{font-family:swiper-icons;font-size:var(--swiper-navigation-size);text-transform:none!important;letter-spacing:0;font-variant:initial;line-height:1}.swiper-button-prev,.swiper-rtl .swiper-button-next{left:10px;right:auto}.swiper-button-prev:after,.swiper-rtl .swiper-button-next:after{content:'prev'}.swiper-button-next,.swiper-rtl .swiper-button-prev{right:10px;left:auto}.swiper-button-next:after,.swiper-rtl .swiper-button-prev:after{content:'next'}.swiper-button-lock{display:none}.swiper-pagination{position:absolute;text-align:center;transition:.3s opacity;transform:translate3d(0,0,0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-pagination-disabled>.swiper-pagination,.swiper-pagination.swiper-pagination-disabled{display:none!important}.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:10px;left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transform:scale(.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{transform:scale(.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{transform:scale(.33)}.swiper-pagination-bullet{width:var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,8px));height:var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,8px));display:inline-block;border-radius:50%;background:var(--swiper-pagination-bullet-inactive-color,#000);opacity:var(--swiper-pagination-bullet-inactive-opacity, .2)}button.swiper-pagination-bullet{border:none;margin:0;padding:0;box-shadow:none;-webkit-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet:only-child{display:none!important}.swiper-pagination-bullet-active{opacity:var(--swiper-pagination-bullet-opacity, 1);background:var(--swiper-pagination-color,var(--swiper-theme-color))}.swiper-pagination-vertical.swiper-pagination-bullets,.swiper-vertical>.swiper-pagination-bullets{right:10px;top:50%;transform:translate3d(0px,-50%,0)}.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:var(--swiper-pagination-bullet-vertical-gap,6px) 0;display:block}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;transform:translateY(-50%);width:8px}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;transition:.2s transform,.2s top}.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 var(--swiper-pagination-bullet-horizontal-gap,4px)}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;transform:translateX(-50%);white-space:nowrap}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s left}.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s right}.swiper-pagination-progressbar{background:rgba(0,0,0,.25);position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color,var(--swiper-theme-color));position:absolute;left:0;top:0;width:100%;height:100%;transform:scale(0);transform-origin:left top}.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{transform-origin:right top}.swiper-horizontal>.swiper-pagination-progressbar,.swiper-pagination-progressbar.swiper-pagination-horizontal,.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite{width:100%;height:4px;left:0;top:0}.swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-vertical,.swiper-vertical>.swiper-pagination-progressbar{width:4px;height:100%;left:0;top:0}.swiper-pagination-lock{display:none}.swiper-scrollbar{border-radius:10px;position:relative;-ms-touch-action:none;background:rgba(0,0,0,.1)}.swiper-scrollbar-disabled>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-disabled{display:none!important}.swiper-horizontal>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-horizontal{position:absolute;left:1%;bottom:3px;z-index:50;height:5px;width:98%}.swiper-scrollbar.swiper-scrollbar-vertical,.swiper-vertical>.swiper-scrollbar{position:absolute;right:3px;top:1%;z-index:50;width:5px;height:98%}.swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:rgba(0,0,0,.5);border-radius:10px;left:0;top:0}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-scrollbar-lock{display:none}.swiper-zoom-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center;text-align:center}.swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg{max-width:100%;max-height:100%;object-fit:contain}.swiper-slide-zoomed{cursor:move}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;transform-origin:50%;box-sizing:border-box;border:4px solid var(--swiper-preloader-color,var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader,.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader{animation:swiper-preloader-spin 1s infinite linear}.swiper-lazy-preloader-white{--swiper-preloader-color:#fff}.swiper-lazy-preloader-black{--swiper-preloader-color:#000}@keyframes swiper-preloader-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.swiper .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}.swiper-free-mode>.swiper-wrapper{transition-timing-function:ease-out;margin:0 auto}.swiper-grid>.swiper-wrapper{flex-wrap:wrap}.swiper-grid-column>.swiper-wrapper{flex-wrap:wrap;flex-direction:column}.swiper-fade.swiper-free-mode .swiper-slide{transition-timing-function:ease-out}.swiper-fade .swiper-slide{pointer-events:none;transition-property:opacity}.swiper-fade .swiper-slide .swiper-slide{pointer-events:none}.swiper-fade .swiper-slide-active,.swiper-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-cube{overflow:visible}.swiper-cube .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1;visibility:hidden;transform-origin:0 0;width:100%;height:100%}.swiper-cube .swiper-slide .swiper-slide{pointer-events:none}.swiper-cube.swiper-rtl .swiper-slide{transform-origin:100% 0}.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-next,.swiper-cube .swiper-slide-next+.swiper-slide,.swiper-cube .swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-cube .swiper-slide-shadow-bottom,.swiper-cube .swiper-slide-shadow-left,.swiper-cube .swiper-slide-shadow-right,.swiper-cube .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0px;width:100%;height:100%;opacity:.6;z-index:0}.swiper-cube .swiper-cube-shadow:before{content:'';background:#000;position:absolute;left:0;top:0;bottom:0;right:0;filter:blur(50px)}.swiper-flip{overflow:visible}.swiper-flip .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1}.swiper-flip .swiper-slide .swiper-slide{pointer-events:none}.swiper-flip .swiper-slide-active,.swiper-flip .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-flip .swiper-slide-shadow-bottom,.swiper-flip .swiper-slide-shadow-left,.swiper-flip .swiper-slide-shadow-right,.swiper-flip .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-creative .swiper-slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden;transition-property:transform,opacity,height}.swiper-cards{overflow:visible}.swiper-cards .swiper-slide{transform-origin:center bottom;-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden}@import url(\"https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap\"); .tinting-wrapper *{font-family:\"Poppins\", sans-serif}:host{--swiper-theme-color:#007aff;--swiper-navigation-size:44px}.slider-wrapper{width:100%;position:relative;height:100%;display:flex;max-width:1100px;flex-direction:row;align-items:center;justify-content:space-between}@media (max-width: 1024px){.slider-wrapper{height:220px}}.slider-wrapper .swiper{margin:0}.slider-wrapper .swiper-slide img{display:block;width:100%;height:100%;object-fit:cover}.slider-wrapper .mySwiper2{height:100%;width:100%;position:relative}@media (max-width: 1024px){.slider-wrapper .mySwiper2{width:100%}}.slider-wrapper .mySwiper2 .swiper-button-prev,.slider-wrapper .mySwiper2 .swiper-button-next{z-index:20;position:absolute;bottom:15px;width:23px;top:inherit;height:23px;background-color:#fff}.slider-wrapper .mySwiper2 .swiper-button-prev::after,.slider-wrapper .mySwiper2 .swiper-button-next::after{content:\"\" !important;font-family:initial !important;font-size:0 !important;width:8px;height:8px;border-right:2px solid #232323;border-bottom:2px solid #232323;display:block}.slider-wrapper .mySwiper2 .swiper-button-next{right:45%}.slider-wrapper .mySwiper2 .swiper-button-next::after{transform:rotate(-45deg)}.slider-wrapper .mySwiper2 .swiper-button-prev{left:45%}.slider-wrapper .mySwiper2 .swiper-button-prev::after{transform:rotate(135deg)}.slider-wrapper .mySwiper{width:20%;height:100%;box-sizing:border-box}@media (max-width: 1024px){.slider-wrapper .mySwiper{display:none}}.slider-wrapper .mySwiper .swiper-slide{height:100%;cursor:pointer}.slider-wrapper .mySwiper .swiper-slide-thumb-active{opacity:1}";
 
 const JcSwiper = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement$1 {
   constructor() {
     super();
     this.__registerHost();
+    this.__attachShadow();
     this.colorInteraction = () => {
       setDataLayer({
         event: 'ColorInteraction',
@@ -5243,45 +5244,55 @@ const JcSwiper = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement$1 {
     this.color = undefined;
   }
   initSwiper() {
-    this.thumbs = new Swiper('.mySwiper', {
+    const root = this.modalEl.shadowRoot;
+    if (!root)
+      return;
+    const thumbsEl = root.querySelector('.mySwiper');
+    const sliderEl = root.querySelector('.mySwiper2');
+    const nextEl = root.querySelector('.swiper-button-next');
+    const prevEl = root.querySelector('.swiper-button-prev');
+    if (thumbsEl) {
+      this.thumbs = new Swiper(thumbsEl, {
+        modules: [Navigation, Controller],
+        slideToClickedSlide: true,
+        loop: true,
+        freeMode: true,
+        spaceBetween: 5,
+        slidesPerView: 3,
+        direction: 'vertical',
+        touchRatio: 0.2,
+      });
+    }
+    if (!sliderEl)
+      return;
+    this.swiper2 = new Swiper(sliderEl, {
       modules: [Navigation, Controller],
+      navigation: nextEl && prevEl ? { nextEl, prevEl } : undefined,
       slideToClickedSlide: true,
       loop: true,
       freeMode: true,
-      spaceBetween: 5,
-      slidesPerView: 3,
-      direction: 'vertical',
-      touchRatio: 0.2,
-    });
-    this.swiper2 = new Swiper('.mySwiper2', {
-      modules: [Navigation, Controller],
-      navigation: {
-        nextEl: '.swiper-button-next',
-        prevEl: '.swiper-button-prev',
-      },
-      loop: true,
-      loopedSlides: 3,
+      slidesPerView: 1,
     });
-    this.swiper2.controller.control = this.thumbs;
-    this.thumbs.controller.control = this.swiper2;
+    if (this.swiper2) {
+      this.swiper2.controller.control = this.swiper2;
+    }
   }
   componentDidLoad() {
     this.initSwiper();
   }
   update() {
-    this.thumbs.update();
-    this.swiper2.update();
+    var _a, _b;
+    (_a = this.thumbs) === null || _a === void 0 ? void 0 : _a.update();
+    (_b = this.swiper2) === null || _b === void 0 ? void 0 : _b.update();
   }
   render() {
     return (h("div", { class: "slider-wrapper" }, h("div", { class: "swiper mySwiper2" }, h("div", { class: "swiper-wrapper" }, this.slides &&
       this.slides.length > 0 &&
-      this.slides.map((slide) => (h("div", { key: slide.id, class: "swiper-slide" }, h("img", { src: `${APIURL}/assets/${slide.directus_files_id}?access_token=${accessToken}`, alt: "room_image" }))))), this.slides && this.slides.length >= 2 && (h("div", null, h("div", { onClick: this.colorInteraction, class: "swiper-button-next" }), h("div", { onClick: this.colorInteraction, class: "swiper-button-prev" })))), h("div", { class: "swiper mySwiper" }, h("div", { class: "swiper-wrapper" }, this.slides &&
-      this.slides.length > 0 &&
-      this.slides.map((slide) => (h("div", { key: slide.id, class: "swiper-slide" }, h("img", { src: `${APIURL}/assets/${slide.directus_files_id}?access_token=${accessToken}`, alt: "room_image" }))))))));
+      this.slides.map((slide) => (h("div", { key: slide.id, class: "swiper-slide" }, h("img", { src: `${APIURL}/assets/${slide.directus_files_id}?access_token=${accessToken}`, alt: "room_image" }))))), this.slides && this.slides.length >= 2 && (h("div", null, h("div", { onClick: this.colorInteraction, class: "swiper-button-next" }), h("div", { onClick: this.colorInteraction, class: "swiper-button-prev" }))))));
   }
   get modalEl() { return this; }
   static get style() { return indexCss; }
-}, [0, "my-slider", {
+}, [1, "my-slider", {
     "slides": [16],
     "shop": [1],
     "product": [1],