@ppg_pl/pallete 2.0.10 → 2.0.11
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.
- package/dist/cjs/my-backdrop_8.cjs.entry.js +7 -4
- package/dist/cjs/my-backdrop_8.cjs.entry.js.map +1 -1
- package/dist/collection/components/my-colorinfo/my-colorinfo.js +7 -4
- package/dist/collection/components/my-colorinfo/my-colorinfo.js.map +1 -1
- package/dist/components/my-colorinfo2.js +7 -4
- package/dist/components/my-colorinfo2.js.map +1 -1
- package/dist/esm/my-backdrop_8.entry.js +7 -4
- package/dist/esm/my-backdrop_8.entry.js.map +1 -1
- package/dist/pallete/p-31c2e093.entry.js +2 -0
- package/dist/pallete/p-31c2e093.entry.js.map +1 -0
- package/dist/pallete/pallete.esm.js +1 -1
- package/dist/types/components/my-colorinfo/my-colorinfo.d.ts +1 -1
- package/package.json +1 -1
- package/www/build/p-31c2e093.entry.js +2 -0
- package/www/build/p-31c2e093.entry.js.map +1 -0
- package/www/build/pallete.esm.js +1 -1
- package/dist/pallete/p-a7ce8105.entry.js +0 -2
- package/dist/pallete/p-a7ce8105.entry.js.map +0 -1
- package/www/build/p-a7ce8105.entry.js +0 -2
- package/www/build/p-a7ce8105.entry.js.map +0 -1
|
@@ -6,7 +6,6 @@ export class MyColorInfo {
|
|
|
6
6
|
this.goToProduct = (e) => {
|
|
7
7
|
var _a;
|
|
8
8
|
e.preventDefault();
|
|
9
|
-
this.closeModalHandler();
|
|
10
9
|
this.currentColor &&
|
|
11
10
|
setDataLayer({
|
|
12
11
|
event: 'GoToProduct',
|
|
@@ -14,6 +13,8 @@ export class MyColorInfo {
|
|
|
14
13
|
product: this.product,
|
|
15
14
|
color: (_a = this.currentColor) === null || _a === void 0 ? void 0 : _a.name,
|
|
16
15
|
});
|
|
16
|
+
this.getHref();
|
|
17
|
+
this.closeModalHandler();
|
|
17
18
|
};
|
|
18
19
|
this.onCloseButtonClick = () => {
|
|
19
20
|
this.closeInfoBox.emit();
|
|
@@ -29,10 +30,12 @@ export class MyColorInfo {
|
|
|
29
30
|
};
|
|
30
31
|
this.getHref = () => {
|
|
31
32
|
var _a, _b, _c, _d;
|
|
33
|
+
let link;
|
|
32
34
|
if (this.baselink) {
|
|
33
|
-
|
|
35
|
+
link = `${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}`;
|
|
34
36
|
}
|
|
35
|
-
|
|
37
|
+
link = (_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;
|
|
38
|
+
window.open(link, '_self');
|
|
36
39
|
};
|
|
37
40
|
this.capitalizeFirstLetter = (string) => {
|
|
38
41
|
return string.charAt(0).toUpperCase() + string.slice(1).toLocaleLowerCase();
|
|
@@ -56,7 +59,7 @@ export class MyColorInfo {
|
|
|
56
59
|
maxWidth: `${this.infoBoxWidth && this.infoBoxWidth - 4}px`,
|
|
57
60
|
} }, this.isMobile && h("img", { class: 'closebtn', onClick: this.onCloseButtonClick, src: getAssetPath(`./assets/${this.closeImage}`), alt: "closebtn" }), h("div", { class: "boxes__box-content__info", style: {
|
|
58
61
|
maxWidth: this.isMobile ? `${this.infoBoxWidth && this.infoBoxWidth - 35}px` : ``,
|
|
59
|
-
} }, !this.isMobile && h("img", { class: 'closebtn', onClick: this.onCloseButtonClick, src: getAssetPath(`./assets/${this.closeImage}`), alt: "closebtn" }), !this.isMobile && h("h2", null, this.capitalizeFirstLetter(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 && ((_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("
|
|
62
|
+
} }, !this.isMobile && h("img", { class: 'closebtn', onClick: this.onCloseButtonClick, src: getAssetPath(`./assets/${this.closeImage}`), alt: "closebtn" }), !this.isMobile && h("h2", null, this.capitalizeFirstLetter(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 && ((_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("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())));
|
|
60
63
|
}
|
|
61
64
|
static get is() { return "my-colorinfo"; }
|
|
62
65
|
static get properties() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"my-colorinfo.js","sourceRoot":"","sources":["../../../src/components/my-colorinfo/my-colorinfo.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,YAAY,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AACtF,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;
|
|
1
|
+
{"version":3,"file":"my-colorinfo.js","sourceRoot":"","sources":["../../../src/components/my-colorinfo/my-colorinfo.tsx"],"names":[],"mappings":"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","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\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\n @Event() closeInfoBox: EventEmitter;\n\n @Event() close: EventEmitter;\n closeModalHandler() {\n this.close.emit();\n }\n\n goToProduct = (e: MouseEvent) => {\n e.preventDefault();\n this.currentColor &&\n setDataLayer({\n event: 'GoToProduct',\n shop: this.shop,\n product: this.product,\n color: this.currentColor?.name,\n });\n this.getHref();\n this.closeModalHandler();\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 getHref = () => {\n let link;\n if (this.baselink) {\n link = `${this.baselink}/${this?.currentColor.links?.find((link: Link) => link?.shop === this.shop)?.path}`;\n }\n link = this?.currentColor.links?.find((link: Link) => link?.shop === this.shop)?.path;\n\n window.open(link, '_self');\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 {!this.isMobile && <h2>{this.capitalizeFirstLetter(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 && this.currentColor.links?.find((link: Link) => link?.shop === this.shop) && (\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"]}
|
|
@@ -11,7 +11,6 @@ const MyColorInfo = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
|
11
11
|
this.goToProduct = (e) => {
|
|
12
12
|
var _a;
|
|
13
13
|
e.preventDefault();
|
|
14
|
-
this.closeModalHandler();
|
|
15
14
|
this.currentColor &&
|
|
16
15
|
setDataLayer({
|
|
17
16
|
event: 'GoToProduct',
|
|
@@ -19,6 +18,8 @@ const MyColorInfo = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
|
19
18
|
product: this.product,
|
|
20
19
|
color: (_a = this.currentColor) === null || _a === void 0 ? void 0 : _a.name,
|
|
21
20
|
});
|
|
21
|
+
this.getHref();
|
|
22
|
+
this.closeModalHandler();
|
|
22
23
|
};
|
|
23
24
|
this.onCloseButtonClick = () => {
|
|
24
25
|
this.closeInfoBox.emit();
|
|
@@ -34,10 +35,12 @@ const MyColorInfo = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
|
34
35
|
};
|
|
35
36
|
this.getHref = () => {
|
|
36
37
|
var _a, _b, _c, _d;
|
|
38
|
+
let link;
|
|
37
39
|
if (this.baselink) {
|
|
38
|
-
|
|
40
|
+
link = `${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}`;
|
|
39
41
|
}
|
|
40
|
-
|
|
42
|
+
link = (_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;
|
|
43
|
+
window.open(link, '_self');
|
|
41
44
|
};
|
|
42
45
|
this.capitalizeFirstLetter = (string) => {
|
|
43
46
|
return string.charAt(0).toUpperCase() + string.slice(1).toLocaleLowerCase();
|
|
@@ -61,7 +64,7 @@ const MyColorInfo = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
|
61
64
|
maxWidth: `${this.infoBoxWidth && this.infoBoxWidth - 4}px`,
|
|
62
65
|
} }, this.isMobile && h("img", { class: 'closebtn', onClick: this.onCloseButtonClick, src: getAssetPath(`./assets/${this.closeImage}`), alt: "closebtn" }), h("div", { class: "boxes__box-content__info", style: {
|
|
63
66
|
maxWidth: this.isMobile ? `${this.infoBoxWidth && this.infoBoxWidth - 35}px` : ``,
|
|
64
|
-
} }, !this.isMobile && h("img", { class: 'closebtn', onClick: this.onCloseButtonClick, src: getAssetPath(`./assets/${this.closeImage}`), alt: "closebtn" }), !this.isMobile && h("h2", null, this.capitalizeFirstLetter(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 && ((_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("
|
|
67
|
+
} }, !this.isMobile && h("img", { class: 'closebtn', onClick: this.onCloseButtonClick, src: getAssetPath(`./assets/${this.closeImage}`), alt: "closebtn" }), !this.isMobile && h("h2", null, this.capitalizeFirstLetter(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 && ((_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("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())));
|
|
65
68
|
}
|
|
66
69
|
}, [0, "my-colorinfo", {
|
|
67
70
|
"currentColor": [16],
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"my-colorinfo2.js","mappings":";;;;
|
|
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';\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\n @Event() closeInfoBox: EventEmitter;\n\n @Event() close: EventEmitter;\n closeModalHandler() {\n this.close.emit();\n }\n\n goToProduct = (e: MouseEvent) => {\n e.preventDefault();\n this.currentColor &&\n setDataLayer({\n event: 'GoToProduct',\n shop: this.shop,\n product: this.product,\n color: this.currentColor?.name,\n });\n this.getHref();\n this.closeModalHandler();\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 getHref = () => {\n let link;\n if (this.baselink) {\n link = `${this.baselink}/${this?.currentColor.links?.find((link: Link) => link?.shop === this.shop)?.path}`;\n }\n link = this?.currentColor.links?.find((link: Link) => link?.shop === this.shop)?.path;\n\n window.open(link, '_self');\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 {!this.isMobile && <h2>{this.capitalizeFirstLetter(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 && this.currentColor.links?.find((link: Link) => link?.shop === this.shop) && (\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}
|
|
@@ -96,7 +96,6 @@ const MyColorInfo = class {
|
|
|
96
96
|
this.goToProduct = (e) => {
|
|
97
97
|
var _a;
|
|
98
98
|
e.preventDefault();
|
|
99
|
-
this.closeModalHandler();
|
|
100
99
|
this.currentColor &&
|
|
101
100
|
setDataLayer({
|
|
102
101
|
event: 'GoToProduct',
|
|
@@ -104,6 +103,8 @@ const MyColorInfo = class {
|
|
|
104
103
|
product: this.product,
|
|
105
104
|
color: (_a = this.currentColor) === null || _a === void 0 ? void 0 : _a.name,
|
|
106
105
|
});
|
|
106
|
+
this.getHref();
|
|
107
|
+
this.closeModalHandler();
|
|
107
108
|
};
|
|
108
109
|
this.onCloseButtonClick = () => {
|
|
109
110
|
this.closeInfoBox.emit();
|
|
@@ -119,10 +120,12 @@ const MyColorInfo = class {
|
|
|
119
120
|
};
|
|
120
121
|
this.getHref = () => {
|
|
121
122
|
var _a, _b, _c, _d;
|
|
123
|
+
let link;
|
|
122
124
|
if (this.baselink) {
|
|
123
|
-
|
|
125
|
+
link = `${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}`;
|
|
124
126
|
}
|
|
125
|
-
|
|
127
|
+
link = (_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;
|
|
128
|
+
window.open(link, '_self');
|
|
126
129
|
};
|
|
127
130
|
this.capitalizeFirstLetter = (string) => {
|
|
128
131
|
return string.charAt(0).toUpperCase() + string.slice(1).toLocaleLowerCase();
|
|
@@ -146,7 +149,7 @@ const MyColorInfo = class {
|
|
|
146
149
|
maxWidth: `${this.infoBoxWidth && this.infoBoxWidth - 4}px`,
|
|
147
150
|
} }, this.isMobile && h("img", { class: 'closebtn', onClick: this.onCloseButtonClick, src: getAssetPath(`./assets/${this.closeImage}`), alt: "closebtn" }), h("div", { class: "boxes__box-content__info", style: {
|
|
148
151
|
maxWidth: this.isMobile ? `${this.infoBoxWidth && this.infoBoxWidth - 35}px` : ``,
|
|
149
|
-
} }, !this.isMobile && h("img", { class: 'closebtn', onClick: this.onCloseButtonClick, src: getAssetPath(`./assets/${this.closeImage}`), alt: "closebtn" }), !this.isMobile && h("h2", null, this.capitalizeFirstLetter(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 && ((_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("
|
|
152
|
+
} }, !this.isMobile && h("img", { class: 'closebtn', onClick: this.onCloseButtonClick, src: getAssetPath(`./assets/${this.closeImage}`), alt: "closebtn" }), !this.isMobile && h("h2", null, this.capitalizeFirstLetter(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 && ((_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("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())));
|
|
150
153
|
}
|
|
151
154
|
};
|
|
152
155
|
|