@ppg_pl/pallete 2.0.9 → 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 +13 -4
- package/dist/cjs/my-backdrop_8.cjs.entry.js.map +1 -1
- package/dist/collection/components/my-colorinfo/my-colorinfo.js +27 -4
- package/dist/collection/components/my-colorinfo/my-colorinfo.js.map +1 -1
- package/dist/components/my-colorinfo2.js +13 -4
- package/dist/components/my-colorinfo2.js.map +1 -1
- package/dist/esm/my-backdrop_8.entry.js +13 -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 +4 -2
- package/dist/types/components.d.ts +1 -0
- 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-1be10cd8.entry.js +0 -2
- package/dist/pallete/p-1be10cd8.entry.js.map +0 -1
- package/www/build/p-1be10cd8.entry.js +0 -2
- package/www/build/p-1be10cd8.entry.js.map +0 -1
|
@@ -3,8 +3,9 @@ import { setDataLayer } from '../../gtmUtils';
|
|
|
3
3
|
import { APIURL, accessToken } from '../api';
|
|
4
4
|
export class MyColorInfo {
|
|
5
5
|
constructor() {
|
|
6
|
-
this.goToProduct = () => {
|
|
6
|
+
this.goToProduct = (e) => {
|
|
7
7
|
var _a;
|
|
8
|
+
e.preventDefault();
|
|
8
9
|
this.currentColor &&
|
|
9
10
|
setDataLayer({
|
|
10
11
|
event: 'GoToProduct',
|
|
@@ -12,6 +13,8 @@ export class MyColorInfo {
|
|
|
12
13
|
product: this.product,
|
|
13
14
|
color: (_a = this.currentColor) === null || _a === void 0 ? void 0 : _a.name,
|
|
14
15
|
});
|
|
16
|
+
this.getHref();
|
|
17
|
+
this.closeModalHandler();
|
|
15
18
|
};
|
|
16
19
|
this.onCloseButtonClick = () => {
|
|
17
20
|
this.closeInfoBox.emit();
|
|
@@ -27,10 +30,12 @@ export class MyColorInfo {
|
|
|
27
30
|
};
|
|
28
31
|
this.getHref = () => {
|
|
29
32
|
var _a, _b, _c, _d;
|
|
33
|
+
let link;
|
|
30
34
|
if (this.baselink) {
|
|
31
|
-
|
|
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}`;
|
|
32
36
|
}
|
|
33
|
-
|
|
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');
|
|
34
39
|
};
|
|
35
40
|
this.capitalizeFirstLetter = (string) => {
|
|
36
41
|
return string.charAt(0).toUpperCase() + string.slice(1).toLocaleLowerCase();
|
|
@@ -44,6 +49,9 @@ export class MyColorInfo {
|
|
|
44
49
|
this.infoBoxWidth = undefined;
|
|
45
50
|
this.closeImage = 'close.png';
|
|
46
51
|
}
|
|
52
|
+
closeModalHandler() {
|
|
53
|
+
this.close.emit();
|
|
54
|
+
}
|
|
47
55
|
render() {
|
|
48
56
|
var _a;
|
|
49
57
|
return (h("div", { class: `boxes__box-content ${this.currentColor.textWhite ? 'boxes__box-content__white' : ''}`, style: {
|
|
@@ -51,7 +59,7 @@ export class MyColorInfo {
|
|
|
51
59
|
maxWidth: `${this.infoBoxWidth && this.infoBoxWidth - 4}px`,
|
|
52
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: {
|
|
53
61
|
maxWidth: this.isMobile ? `${this.infoBoxWidth && this.infoBoxWidth - 35}px` : ``,
|
|
54
|
-
} }, !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())));
|
|
55
63
|
}
|
|
56
64
|
static get is() { return "my-colorinfo"; }
|
|
57
65
|
static get properties() {
|
|
@@ -219,6 +227,21 @@ export class MyColorInfo {
|
|
|
219
227
|
"resolved": "any",
|
|
220
228
|
"references": {}
|
|
221
229
|
}
|
|
230
|
+
}, {
|
|
231
|
+
"method": "close",
|
|
232
|
+
"name": "close",
|
|
233
|
+
"bubbles": true,
|
|
234
|
+
"cancelable": true,
|
|
235
|
+
"composed": true,
|
|
236
|
+
"docs": {
|
|
237
|
+
"tags": [],
|
|
238
|
+
"text": ""
|
|
239
|
+
},
|
|
240
|
+
"complexType": {
|
|
241
|
+
"original": "any",
|
|
242
|
+
"resolved": "any",
|
|
243
|
+
"references": {}
|
|
244
|
+
}
|
|
222
245
|
}];
|
|
223
246
|
}
|
|
224
247
|
}
|
|
@@ -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"]}
|
|
@@ -7,8 +7,10 @@ const MyColorInfo = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
|
7
7
|
super();
|
|
8
8
|
this.__registerHost();
|
|
9
9
|
this.closeInfoBox = createEvent(this, "closeInfoBox", 7);
|
|
10
|
-
this.
|
|
10
|
+
this.close = createEvent(this, "close", 7);
|
|
11
|
+
this.goToProduct = (e) => {
|
|
11
12
|
var _a;
|
|
13
|
+
e.preventDefault();
|
|
12
14
|
this.currentColor &&
|
|
13
15
|
setDataLayer({
|
|
14
16
|
event: 'GoToProduct',
|
|
@@ -16,6 +18,8 @@ const MyColorInfo = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
|
16
18
|
product: this.product,
|
|
17
19
|
color: (_a = this.currentColor) === null || _a === void 0 ? void 0 : _a.name,
|
|
18
20
|
});
|
|
21
|
+
this.getHref();
|
|
22
|
+
this.closeModalHandler();
|
|
19
23
|
};
|
|
20
24
|
this.onCloseButtonClick = () => {
|
|
21
25
|
this.closeInfoBox.emit();
|
|
@@ -31,10 +35,12 @@ const MyColorInfo = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
|
31
35
|
};
|
|
32
36
|
this.getHref = () => {
|
|
33
37
|
var _a, _b, _c, _d;
|
|
38
|
+
let link;
|
|
34
39
|
if (this.baselink) {
|
|
35
|
-
|
|
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}`;
|
|
36
41
|
}
|
|
37
|
-
|
|
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');
|
|
38
44
|
};
|
|
39
45
|
this.capitalizeFirstLetter = (string) => {
|
|
40
46
|
return string.charAt(0).toUpperCase() + string.slice(1).toLocaleLowerCase();
|
|
@@ -48,6 +54,9 @@ const MyColorInfo = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
|
48
54
|
this.infoBoxWidth = undefined;
|
|
49
55
|
this.closeImage = 'close.png';
|
|
50
56
|
}
|
|
57
|
+
closeModalHandler() {
|
|
58
|
+
this.close.emit();
|
|
59
|
+
}
|
|
51
60
|
render() {
|
|
52
61
|
var _a;
|
|
53
62
|
return (h("div", { class: `boxes__box-content ${this.currentColor.textWhite ? 'boxes__box-content__white' : ''}`, style: {
|
|
@@ -55,7 +64,7 @@ const MyColorInfo = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
|
55
64
|
maxWidth: `${this.infoBoxWidth && this.infoBoxWidth - 4}px`,
|
|
56
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: {
|
|
57
66
|
maxWidth: this.isMobile ? `${this.infoBoxWidth && this.infoBoxWidth - 35}px` : ``,
|
|
58
|
-
} }, !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())));
|
|
59
68
|
}
|
|
60
69
|
}, [0, "my-colorinfo", {
|
|
61
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}
|
|
@@ -92,8 +92,10 @@ const MyColorInfo = class {
|
|
|
92
92
|
constructor(hostRef) {
|
|
93
93
|
registerInstance(this, hostRef);
|
|
94
94
|
this.closeInfoBox = createEvent(this, "closeInfoBox", 7);
|
|
95
|
-
this.
|
|
95
|
+
this.close = createEvent(this, "close", 7);
|
|
96
|
+
this.goToProduct = (e) => {
|
|
96
97
|
var _a;
|
|
98
|
+
e.preventDefault();
|
|
97
99
|
this.currentColor &&
|
|
98
100
|
setDataLayer({
|
|
99
101
|
event: 'GoToProduct',
|
|
@@ -101,6 +103,8 @@ const MyColorInfo = class {
|
|
|
101
103
|
product: this.product,
|
|
102
104
|
color: (_a = this.currentColor) === null || _a === void 0 ? void 0 : _a.name,
|
|
103
105
|
});
|
|
106
|
+
this.getHref();
|
|
107
|
+
this.closeModalHandler();
|
|
104
108
|
};
|
|
105
109
|
this.onCloseButtonClick = () => {
|
|
106
110
|
this.closeInfoBox.emit();
|
|
@@ -116,10 +120,12 @@ const MyColorInfo = class {
|
|
|
116
120
|
};
|
|
117
121
|
this.getHref = () => {
|
|
118
122
|
var _a, _b, _c, _d;
|
|
123
|
+
let link;
|
|
119
124
|
if (this.baselink) {
|
|
120
|
-
|
|
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}`;
|
|
121
126
|
}
|
|
122
|
-
|
|
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');
|
|
123
129
|
};
|
|
124
130
|
this.capitalizeFirstLetter = (string) => {
|
|
125
131
|
return string.charAt(0).toUpperCase() + string.slice(1).toLocaleLowerCase();
|
|
@@ -133,6 +139,9 @@ const MyColorInfo = class {
|
|
|
133
139
|
this.infoBoxWidth = undefined;
|
|
134
140
|
this.closeImage = 'close.png';
|
|
135
141
|
}
|
|
142
|
+
closeModalHandler() {
|
|
143
|
+
this.close.emit();
|
|
144
|
+
}
|
|
136
145
|
render() {
|
|
137
146
|
var _a;
|
|
138
147
|
return (h("div", { class: `boxes__box-content ${this.currentColor.textWhite ? 'boxes__box-content__white' : ''}`, style: {
|
|
@@ -140,7 +149,7 @@ const MyColorInfo = class {
|
|
|
140
149
|
maxWidth: `${this.infoBoxWidth && this.infoBoxWidth - 4}px`,
|
|
141
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: {
|
|
142
151
|
maxWidth: this.isMobile ? `${this.infoBoxWidth && this.infoBoxWidth - 35}px` : ``,
|
|
143
|
-
} }, !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())));
|
|
144
153
|
}
|
|
145
154
|
};
|
|
146
155
|
|