@ppg_pl/tinting 0.0.5 → 0.0.7

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.
Files changed (60) hide show
  1. package/dist/cjs/{index-0a139db0.js → index-b6962659.js} +51 -4
  2. package/dist/cjs/index-b6962659.js.map +1 -0
  3. package/dist/cjs/loader.cjs.js +2 -2
  4. package/dist/cjs/modal-header_9.cjs.entry.js +127 -28
  5. package/dist/cjs/modal-header_9.cjs.entry.js.map +1 -1
  6. package/dist/cjs/tinting.cjs.js +2 -2
  7. package/dist/collection/components/colorinfo/index.js +135 -1
  8. package/dist/collection/components/colorinfo/index.js.map +1 -1
  9. package/dist/collection/components/component/index.js +64 -1
  10. package/dist/collection/components/component/index.js.map +1 -1
  11. package/dist/collection/components/modal/index.css +176 -1
  12. package/dist/collection/components/modal/index.js +50 -2
  13. package/dist/collection/components/modal/index.js.map +1 -1
  14. package/dist/collection/components/slider/index.css +24 -6
  15. package/dist/collection/components/slider/index.js +32 -21
  16. package/dist/collection/components/slider/index.js.map +1 -1
  17. package/dist/collection/types.js.map +1 -1
  18. package/dist/components/index10.js +11 -4
  19. package/dist/components/index10.js.map +1 -1
  20. package/dist/components/index8.js +80 -2
  21. package/dist/components/index8.js.map +1 -1
  22. package/dist/components/index9.js +34 -23
  23. package/dist/components/index9.js.map +1 -1
  24. package/dist/components/my-component.js +13 -2
  25. package/dist/components/my-component.js.map +1 -1
  26. package/dist/esm/{index-f3be6531.js → index-cb79645d.js} +51 -4
  27. package/dist/esm/index-cb79645d.js.map +1 -0
  28. package/dist/esm/loader.js +3 -3
  29. package/dist/esm/modal-header_9.entry.js +127 -28
  30. package/dist/esm/modal-header_9.entry.js.map +1 -1
  31. package/dist/esm/tinting.js +3 -3
  32. package/dist/tinting/p-4ec5261b.entry.js +15 -0
  33. package/dist/tinting/p-4ec5261b.entry.js.map +1 -0
  34. package/dist/tinting/p-5b9dc044.js +3 -0
  35. package/dist/tinting/p-5b9dc044.js.map +1 -0
  36. package/dist/tinting/tinting.esm.js +1 -1
  37. package/dist/tinting/tinting.esm.js.map +1 -1
  38. package/dist/types/components/colorinfo/index.d.ts +17 -1
  39. package/dist/types/components/component/index.d.ts +8 -0
  40. package/dist/types/components/modal/index.d.ts +6 -1
  41. package/dist/types/components.d.ts +16 -2
  42. package/dist/types/types.d.ts +4 -0
  43. package/package.json +3 -2
  44. package/www/build/p-4ec5261b.entry.js +15 -0
  45. package/www/build/p-4ec5261b.entry.js.map +1 -0
  46. package/www/build/p-5b9dc044.js +3 -0
  47. package/www/build/p-5b9dc044.js.map +1 -0
  48. package/www/build/tinting.esm.js +1 -1
  49. package/www/build/tinting.esm.js.map +1 -1
  50. package/www/index.html +76 -12
  51. package/dist/cjs/index-0a139db0.js.map +0 -1
  52. package/dist/esm/index-f3be6531.js.map +0 -1
  53. package/dist/tinting/p-398633de.entry.js +0 -15
  54. package/dist/tinting/p-398633de.entry.js.map +0 -1
  55. package/dist/tinting/p-b135c76f.js +0 -3
  56. package/dist/tinting/p-b135c76f.js.map +0 -1
  57. package/www/build/p-398633de.entry.js +0 -15
  58. package/www/build/p-398633de.entry.js.map +0 -1
  59. package/www/build/p-b135c76f.js +0 -3
  60. package/www/build/p-b135c76f.js.map +0 -1
package/www/index.html CHANGED
@@ -1,28 +1,92 @@
1
- <!doctype html><html dir="ltr" lang="pl"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Color Selector</title> <style type="text/css" media="screen, print">@font-face {
1
+ <!doctype html><html dir="ltr" lang="pl"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Color Selector Tinting</title> <style type="text/css" media="screen, print">@font-face {
2
2
  font-family: 'Galatea';
3
- src: url(./assets/fonts/Galatea-Regular.woff2) format('woff2'), url(./assets/fonts/Galatea-Regular.woff) format('woff'),
4
- url(./assets/fonts/Galatea-Regular.ttf) format('truetype'), url(./assets/fonts/Galatea-Regular.eot) format('embedded-opentype');
3
+ src:
4
+ url(./assets/fonts/Galatea-Regular.woff2) format('woff2'),
5
+ url(./assets/fonts/Galatea-Regular.woff) format('woff'),
6
+ url(./assets/fonts/Galatea-Regular.ttf) format('truetype'),
7
+ url(./assets/fonts/Galatea-Regular.eot) format('embedded-opentype');
5
8
  font-weight: 400;
6
9
  font-style: normal;
7
- }</style> <script type="module" src="/build/tinting.esm.js" data-stencil data-resources-url="/build/" data-stencil-namespace="tinting"></script> <script nomodule="" src="/build/tinting.js" data-stencil></script> </head> <body> <!-- shop="DEKORAL" product="Dekoral Łazienka & Kuchnia" --> <my-component class="modal_tinting"></my-component> <label for="shop">Shop</label> <input name="shop" type="text" title="Shop"> <label for="product">Product</label> <input name="product" type="text" title="Product"> <label for="baselink">Base link</label> <input name="baselink" type="text" title="baselink"> <label for="colorname">Color name</label> <input name="colorname" type="text" title="colorname"> <button>open modal</button> <script>
8
- const btn = document.querySelector('button');
10
+ }
11
+
12
+ #jsonInput {
13
+ width: 100%;
14
+ font-family: monospace;
15
+ }
16
+
17
+ #jsonStatus {
18
+ margin: 6px 0;
19
+ color: #666;
20
+ }</style> <script type="module" src="/build/tinting.esm.js" data-stencil data-resources-url="/build/" data-stencil-namespace="tinting"></script> <script nomodule="" src="/build/tinting.js" data-stencil></script> </head> <body> <!-- shop="DEKORAL" product="Dekoral Łazienka & Kuchnia" --> <my-component class="modal_tinting" price="5.99"></my-component> <label for="shop">Shop</label> <input name="shop" type="text" title="Shop"> <label for="product">Product</label> <input name="product" type="text" title="Product"> <label for="baselink">Base link</label> <input name="baselink" type="text" title="baselink"> <label for="colorname">Color name</label> <input name="colorname" type="text" title="colorname"> <label for="jsonInput">JSON Input (available_testers)</label> <textarea id="jsonInput" rows="8">[
21
+ { "id_product_attribute": 213, "color_name": "ecru" }
22
+ ]
23
+ </textarea> <div id="jsonStatus"></div> <button id="applyJson" type="button">Apply JSON</button> <button id="openModal" type="button">open modal</button> <script>
24
+ const openModalBtn = document.getElementById('openModal');
9
25
  const modal = document.querySelector('.modal_tinting');
26
+
10
27
  const shop = document.querySelector('input[name="shop"]');
11
28
  const product = document.querySelector('input[name="product"]');
12
29
  const baselink = document.querySelector('input[name="baselink"]');
13
30
  const colorname = document.querySelector('input[name="colorname"]');
14
31
 
15
- btn.addEventListener('click', () => {
32
+ const jsonInput = document.getElementById('jsonInput');
33
+ const jsonStatus = document.getElementById('jsonStatus');
34
+ const applyJson = document.getElementById('applyJson');
35
+
36
+ let parsedJson = [];
37
+
38
+ // live JSON validation
39
+ jsonInput.addEventListener('input', () => {
40
+ try {
41
+ parsedJson = JSON.parse(jsonInput.value);
42
+ jsonStatus.textContent = '✅ JSON valid';
43
+ jsonStatus.style.color = 'green';
44
+ } catch (e) {
45
+ jsonStatus.textContent = '❌ Invalid JSON';
46
+ jsonStatus.style.color = 'red';
47
+ }
48
+ });
49
+
50
+ // apply JSON to component (bez otwierania modala)
51
+ applyJson.addEventListener('click', () => {
52
+ try {
53
+ parsedJson = JSON.parse(jsonInput.value);
54
+ modal.setAttribute('available_testers', JSON.stringify(parsedJson));
55
+ alert('JSON applied!');
56
+ } catch {
57
+ alert('Invalid JSON — fix it first');
58
+ }
59
+ });
60
+
61
+ // open modal with form data
62
+ openModalBtn.addEventListener('click', () => {
16
63
  if (!shop.value && !product.value) {
17
64
  alert('Podaj shop i product');
18
- } else {
19
- modal.setAttribute('shop', shop.value); //shop.value / VIVERTO
20
- modal.setAttribute('product', product.value); //product.value / Dekoral Łazienka & Kuchnia
21
- modal.setAttribute('baselink', baselink.value); //baseLink.value / https://www.dekoral.pl/produkty/dekoracje/dekoracje-do-lazienki-i-kuchni
65
+ return;
66
+ }
22
67
 
23
- modal.setAttribute('colorname', colorname.value); //colorName.value / 1201
24
- modal.open();
68
+ try {
69
+ parsedJson = JSON.parse(jsonInput.value);
70
+ jsonStatus.textContent = '✅ JSON valid';
71
+ jsonStatus.style.color = 'green';
72
+ } catch {
73
+ alert('Invalid JSON — popraw tablicę available_testers');
74
+ return;
25
75
  }
76
+
77
+ modal.setAttribute('shop', shop.value);
78
+ modal.setAttribute('product', product.value);
79
+ modal.setAttribute('baselink', baselink.value);
80
+ modal.setAttribute('colorname', colorname.value);
81
+ modal.setAttribute('available_testers', JSON.stringify(parsedJson));
82
+
83
+ modal.open();
84
+ });
85
+
86
+ jsonInput.dispatchEvent(new Event('input'));
87
+
88
+ modal.addEventListener('addToBasket', e => {
89
+ console.log('Dodaj tester do koszyka:', e.detail.id);
26
90
  });
27
91
 
28
92
  modal.addEventListener('onSelectedColor', e => {