@ptcwebops/ptcw-design 0.4.6 → 0.4.8

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 (196) hide show
  1. package/LICENSE +21 -21
  2. package/dist/cjs/{icon-asset_4.cjs.entry.js → icon-asset_8.cjs.entry.js} +299 -220
  3. package/dist/cjs/{interfaces-0ecd8027.js → interfaces-574e6df7.js} +9 -9
  4. package/dist/cjs/loader.cjs.js +1 -1
  5. package/dist/cjs/lottie-player.cjs.entry.js +354 -354
  6. package/dist/cjs/my-component.cjs.entry.js +13 -13
  7. package/dist/cjs/ptc-breadcrumb.cjs.entry.js +12 -12
  8. package/dist/cjs/ptc-button.cjs.entry.js +65 -65
  9. package/dist/cjs/ptc-card-bottom.cjs.entry.js +31 -31
  10. package/dist/cjs/ptc-card-content.cjs.entry.js +31 -31
  11. package/dist/cjs/ptc-card-plm.cjs.entry.js +16 -16
  12. package/dist/cjs/ptc-card.cjs.entry.js +68 -68
  13. package/dist/cjs/ptc-countdown.cjs.entry.js +8 -8
  14. package/dist/cjs/ptc-date.cjs.entry.js +48 -48
  15. package/dist/cjs/ptc-footer.cjs.entry.js +8 -8
  16. package/dist/cjs/ptc-form.cjs.entry.js +104 -104
  17. package/dist/cjs/ptc-hero.cjs.entry.js +18 -18
  18. package/dist/cjs/ptc-img_2.cjs.entry.js +169 -169
  19. package/dist/cjs/ptc-input.cjs.entry.js +20 -20
  20. package/dist/cjs/ptc-link.cjs.entry.js +42 -42
  21. package/dist/cjs/ptc-list.cjs.entry.js +20 -20
  22. package/dist/cjs/ptc-lottie.cjs.entry.js +12 -12
  23. package/dist/cjs/ptc-modal.cjs.entry.js +103 -103
  24. package/dist/cjs/ptc-nav-item.cjs.entry.js +83 -83
  25. package/dist/cjs/ptc-nav.cjs.entry.js +8 -8
  26. package/dist/cjs/ptc-para.cjs.entry.js +39 -39
  27. package/dist/cjs/ptc-picture.cjs.entry.js +158 -158
  28. package/dist/cjs/ptc-responsive-wrapper.cjs.entry.js +54 -54
  29. package/dist/cjs/ptc-select.cjs.entry.js +24 -24
  30. package/dist/cjs/ptc-social-share.cjs.entry.js +64 -64
  31. package/dist/cjs/ptc-spacer.cjs.entry.js +35 -35
  32. package/dist/cjs/ptc-span.cjs.entry.js +23 -23
  33. package/dist/cjs/ptc-title.cjs.entry.js +44 -44
  34. package/dist/cjs/ptcw-design.cjs.js +1 -1
  35. package/dist/collection/collection-manifest.json +3 -0
  36. package/dist/collection/components/icon-asset/icon-asset.css +4 -4
  37. package/dist/collection/components/icon-asset/icon-asset.js +199 -178
  38. package/dist/collection/components/icon-asset/media/brands.svg +1381 -1381
  39. package/dist/collection/components/icon-asset/media/designer.svg +316 -316
  40. package/dist/collection/components/icon-asset/media/regular.svg +463 -463
  41. package/dist/collection/components/icon-asset/media/solid.svg +3013 -3013
  42. package/dist/collection/components/icon-asset/media/svg-with-js.min.css +4 -4
  43. package/dist/collection/components/list-item/list-item.css +31 -0
  44. package/dist/collection/components/list-item/list-item.js +103 -84
  45. package/dist/collection/components/my-component/my-component.css +3 -3
  46. package/dist/collection/components/my-component/my-component.js +73 -73
  47. package/dist/collection/components/ptc-announcement/ptc-announcement.js +170 -170
  48. package/dist/collection/components/ptc-breadcrumb/ptc-breadcrumb.js +21 -21
  49. package/dist/collection/components/ptc-button/ptc-button.js +293 -293
  50. package/dist/collection/components/ptc-card/ptc-card.js +282 -282
  51. package/dist/collection/components/ptc-card-bottom/ptc-card-bottom.js +105 -105
  52. package/dist/collection/components/ptc-card-content/ptc-card-content.js +105 -105
  53. package/dist/collection/components/ptc-card-plm/ptc-card-plm.js +97 -97
  54. package/dist/collection/components/ptc-countdown/ptc-countdown.js +15 -15
  55. package/dist/collection/components/ptc-date/ptc-date.js +201 -201
  56. package/dist/collection/components/ptc-footer/ptc-footer.js +25 -25
  57. package/dist/collection/components/ptc-form/ptc-form.js +118 -118
  58. package/dist/collection/components/ptc-form/validation/FormValidation.js +4234 -4234
  59. package/dist/collection/components/ptc-hero/ptc-hero.js +67 -67
  60. package/dist/collection/components/ptc-img/ptc-img.js +314 -314
  61. package/dist/collection/components/ptc-input/ptc-input.js +133 -133
  62. package/dist/collection/components/ptc-link/ptc-link.js +198 -198
  63. package/dist/collection/components/ptc-list/ptc-list.js +63 -63
  64. package/dist/collection/components/ptc-lottie/ptc-lottie.css +5 -5
  65. package/dist/collection/components/ptc-lottie/ptc-lottie.js +58 -58
  66. package/dist/collection/components/ptc-minimized-footer/ptc-minimized-footer.css +44 -0
  67. package/dist/collection/components/ptc-minimized-footer/ptc-minimized-footer.js +17 -0
  68. package/dist/collection/components/ptc-minimized-header/ptc-minimized-header.css +77 -0
  69. package/dist/collection/components/ptc-minimized-header/ptc-minimized-header.js +80 -0
  70. package/dist/collection/components/ptc-mobile-select/ptc-mobile-select.css +1 -0
  71. package/dist/collection/components/ptc-mobile-select/ptc-mobile-select.js +221 -220
  72. package/dist/collection/components/ptc-modal/ptc-modal.js +252 -252
  73. package/dist/collection/components/ptc-nav/ptc-nav.js +21 -21
  74. package/dist/collection/components/ptc-nav-item/ptc-nav-item.js +252 -252
  75. package/dist/collection/components/ptc-overlay/ptc-overlay.js +99 -99
  76. package/dist/collection/components/ptc-para/ptc-para.js +157 -157
  77. package/dist/collection/components/ptc-picture/ptc-picture.js +428 -428
  78. package/dist/collection/components/ptc-previous-url/ptc-previous-url.css +29 -0
  79. package/dist/collection/components/ptc-previous-url/ptc-previous-url.js +54 -0
  80. package/dist/collection/components/ptc-responsive-wrapper/ptc-responsive-wrapper.css +3 -3
  81. package/dist/collection/components/ptc-responsive-wrapper/ptc-responsive-wrapper.js +62 -62
  82. package/dist/collection/components/ptc-select/ptc-select.js +105 -105
  83. package/dist/collection/components/ptc-social-share/ptc-social-share.js +206 -206
  84. package/dist/collection/components/ptc-spacer/ptc-spacer.css +322 -322
  85. package/dist/collection/components/ptc-spacer/ptc-spacer.js +99 -99
  86. package/dist/collection/components/ptc-span/ptc-span.js +89 -89
  87. package/dist/collection/components/ptc-svg-btn/ptc-svg-btn.css +22 -0
  88. package/dist/collection/components/ptc-svg-btn/ptc-svg-btn.js +71 -69
  89. package/dist/collection/components/ptc-title/ptc-title.js +231 -231
  90. package/dist/collection/index.js +1 -1
  91. package/dist/collection/media/svg-imgs/Back-arrow.svg +11 -0
  92. package/dist/collection/media/svg-imgs/close.svg +10 -10
  93. package/dist/collection/media/svg-imgs/slider-arrow-left.svg +18 -18
  94. package/dist/collection/media/svg-imgs/slider-arrow-right.svg +18 -18
  95. package/dist/collection/utils/interfaces.js +11 -11
  96. package/dist/collection/utils/utils.js +3 -3
  97. package/dist/custom-elements/index.d.ts +18 -0
  98. package/dist/custom-elements/index.js +2058 -1993
  99. package/dist/esm/{icon-asset_4.entry.js → icon-asset_8.entry.js} +296 -221
  100. package/dist/esm/{interfaces-c1c73092.js → interfaces-7c0243be.js} +9 -9
  101. package/dist/esm/loader.js +1 -1
  102. package/dist/esm/lottie-player.entry.js +354 -354
  103. package/dist/esm/my-component.entry.js +13 -13
  104. package/dist/esm/polyfills/core-js.js +0 -0
  105. package/dist/esm/polyfills/dom.js +0 -0
  106. package/dist/esm/polyfills/es5-html-element.js +0 -0
  107. package/dist/esm/polyfills/index.js +0 -0
  108. package/dist/esm/polyfills/system.js +0 -0
  109. package/dist/esm/ptc-breadcrumb.entry.js +12 -12
  110. package/dist/esm/ptc-button.entry.js +65 -65
  111. package/dist/esm/ptc-card-bottom.entry.js +31 -31
  112. package/dist/esm/ptc-card-content.entry.js +31 -31
  113. package/dist/esm/ptc-card-plm.entry.js +16 -16
  114. package/dist/esm/ptc-card.entry.js +68 -68
  115. package/dist/esm/ptc-countdown.entry.js +8 -8
  116. package/dist/esm/ptc-date.entry.js +48 -48
  117. package/dist/esm/ptc-footer.entry.js +8 -8
  118. package/dist/esm/ptc-form.entry.js +104 -104
  119. package/dist/esm/ptc-hero.entry.js +18 -18
  120. package/dist/esm/ptc-img_2.entry.js +169 -169
  121. package/dist/esm/ptc-input.entry.js +20 -20
  122. package/dist/esm/ptc-link.entry.js +42 -42
  123. package/dist/esm/ptc-list.entry.js +20 -20
  124. package/dist/esm/ptc-lottie.entry.js +12 -12
  125. package/dist/esm/ptc-modal.entry.js +103 -103
  126. package/dist/esm/ptc-nav-item.entry.js +83 -83
  127. package/dist/esm/ptc-nav.entry.js +8 -8
  128. package/dist/esm/ptc-para.entry.js +39 -39
  129. package/dist/esm/ptc-picture.entry.js +158 -158
  130. package/dist/esm/ptc-responsive-wrapper.entry.js +54 -54
  131. package/dist/esm/ptc-select.entry.js +24 -24
  132. package/dist/esm/ptc-social-share.entry.js +64 -64
  133. package/dist/esm/ptc-spacer.entry.js +35 -35
  134. package/dist/esm/ptc-span.entry.js +23 -23
  135. package/dist/esm/ptc-title.entry.js +44 -44
  136. package/dist/esm/ptcw-design.js +1 -1
  137. package/dist/ptcw-design/media/brands.svg +1381 -1381
  138. package/dist/ptcw-design/media/designer.svg +316 -316
  139. package/dist/ptcw-design/media/regular.svg +463 -463
  140. package/dist/ptcw-design/media/solid.svg +3013 -3013
  141. package/dist/ptcw-design/media/svg-with-js.min.css +4 -4
  142. package/dist/ptcw-design/{p-1e39bc14.entry.js → p-894e8c85.entry.js} +1 -1
  143. package/dist/ptcw-design/p-c2f4cf52.entry.js +7 -0
  144. package/dist/ptcw-design/{p-27538cac.entry.js → p-f2f1c015.entry.js} +1 -1
  145. package/dist/ptcw-design/ptcw-design.css +1 -1
  146. package/dist/ptcw-design/ptcw-design.esm.js +1 -1
  147. package/dist/ptcw-design/validation/FormValidation.js +4234 -4234
  148. package/dist/types/components/icon-asset/icon-asset.d.ts +36 -32
  149. package/dist/types/components/list-item/list-item.d.ts +8 -7
  150. package/dist/types/components/my-component/my-component.d.ts +16 -16
  151. package/dist/types/components/ptc-announcement/ptc-announcement.d.ts +35 -35
  152. package/dist/types/components/ptc-breadcrumb/ptc-breadcrumb.d.ts +4 -4
  153. package/dist/types/components/ptc-button/ptc-button.d.ts +56 -56
  154. package/dist/types/components/ptc-card/ptc-card.d.ts +50 -50
  155. package/dist/types/components/ptc-card-bottom/ptc-card-bottom.d.ts +15 -15
  156. package/dist/types/components/ptc-card-content/ptc-card-content.d.ts +15 -15
  157. package/dist/types/components/ptc-card-plm/ptc-card-plm.d.ts +8 -8
  158. package/dist/types/components/ptc-countdown/ptc-countdown.d.ts +3 -3
  159. package/dist/types/components/ptc-date/ptc-date.d.ts +41 -41
  160. package/dist/types/components/ptc-footer/ptc-footer.d.ts +3 -3
  161. package/dist/types/components/ptc-form/ptc-form.d.ts +11 -11
  162. package/dist/types/components/ptc-hero/ptc-hero.d.ts +12 -12
  163. package/dist/types/components/ptc-img/ptc-img.d.ts +51 -51
  164. package/dist/types/components/ptc-input/ptc-input.d.ts +19 -19
  165. package/dist/types/components/ptc-link/ptc-link.d.ts +36 -36
  166. package/dist/types/components/ptc-list/ptc-list.d.ts +6 -6
  167. package/dist/types/components/ptc-lottie/ptc-lottie.d.ts +12 -12
  168. package/dist/types/components/ptc-minimized-footer/ptc-minimized-footer.d.ts +3 -0
  169. package/dist/types/components/ptc-minimized-header/ptc-minimized-header.d.ts +6 -0
  170. package/dist/types/components/ptc-mobile-select/ptc-mobile-select.d.ts +40 -40
  171. package/dist/types/components/ptc-modal/ptc-modal.d.ts +46 -46
  172. package/dist/types/components/ptc-nav/ptc-nav.d.ts +3 -3
  173. package/dist/types/components/ptc-nav-item/ptc-nav-item.d.ts +53 -53
  174. package/dist/types/components/ptc-overlay/ptc-overlay.d.ts +20 -20
  175. package/dist/types/components/ptc-para/ptc-para.d.ts +28 -28
  176. package/dist/types/components/ptc-picture/ptc-picture.d.ts +82 -82
  177. package/dist/types/components/ptc-previous-url/ptc-previous-url.d.ts +5 -0
  178. package/dist/types/components/ptc-responsive-wrapper/ptc-responsive-wrapper.d.ts +8 -8
  179. package/dist/types/components/ptc-select/ptc-select.d.ts +9 -9
  180. package/dist/types/components/ptc-social-share/ptc-social-share.d.ts +25 -25
  181. package/dist/types/components/ptc-spacer/ptc-spacer.d.ts +16 -16
  182. package/dist/types/components/ptc-span/ptc-span.d.ts +16 -16
  183. package/dist/types/components/ptc-svg-btn/ptc-svg-btn.d.ts +12 -12
  184. package/dist/types/components/ptc-title/ptc-title.d.ts +41 -41
  185. package/dist/types/components.d.ts +85 -26
  186. package/dist/types/global.d.ts +1072 -1072
  187. package/dist/types/index.d.ts +1 -1
  188. package/dist/types/utils/interfaces.d.ts +14 -14
  189. package/dist/types/utils/utils.d.ts +1 -1
  190. package/package.json +58 -58
  191. package/readme.md +11 -11
  192. package/dist/cjs/list-item.cjs.entry.js +0 -29
  193. package/dist/esm/list-item.entry.js +0 -25
  194. package/dist/ptcw-design/p-439c9e49.entry.js +0 -7
  195. package/dist/ptcw-design/p-80c03571.entry.js +0 -1
  196. /package/dist/ptcw-design/{p-50e52c88.js → p-ee1183b2.js} +0 -0
@@ -3,182 +3,182 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  const index = require('./index-3adcf9f4.js');
6
- const interfaces = require('./interfaces-0ecd8027.js');
6
+ const interfaces = require('./interfaces-574e6df7.js');
7
7
 
8
8
  const ptcImgCss = ".smart-bg{width:100%;height:100%;background-size:cover;background-repeat:no-repeat;background-position:50% 50%}.smart-img{position:absolute;display:block;width:100%;height:100%;top:0;left:0;background-size:cover;background-repeat:no-repeat;background-position:50% 50%}.radius-sm{border-radius:var(--ptc-border-radius-small)}.radius-md{border-radius:var(--ptc-border-radius-medium)}.radius-lg{border-radius:var(--ptc-border-radius-large)}.lazy-bg{background-image:none !important;background-color:var(--color-primary-lightgrey)}@media (max-width: 767px){.hidden-xs{display:none !important}}@media (min-width: 768px) and (max-width: 991px){.hidden-sm{display:none !important}}@media (min-width: 992px) and (max-width: 1199px){.hidden-md{display:none !important}}@media (min-width: 1200px){.hidden-lg{display:none !important}}";
9
9
 
10
- let PtcImg = class {
11
- constructor(hostRef) {
12
- index.registerInstance(this, hostRef);
13
- /**
14
- * Image size for smallest screen
15
- * <=767px
16
- */
17
- this.sizeXs = '510x340';
18
- /**
19
- * Image size for small screen
20
- * >=768px and <=991px
21
- */
22
- this.sizeSm = '1240x496';
23
- /**
24
- * Image size for medium screen
25
- * >=992px and <=1199px
26
- */
27
- this.sizeMd = '1366x500';
28
- /**
29
- * Image solution for large screen
30
- * >=1200px
31
- */
32
- this.sizeLg = '1920x1080';
33
- /**
34
- * Image type
35
- */
36
- this.imageType = 'smart-bg';
37
- /**
38
- * Image border shape
39
- */
40
- this.borderRadius = '';
41
- /**
42
- * Lazy loading option
43
- */
44
- this.loadMode = 'lazy-bg';
45
- }
46
- /**
47
- * Image Z Index
48
- */
49
- // @Prop() imageZIndex: 'z-index-auto' | 'z-index-n-2' | 'z-index-n-1' | 'z-index-p-1' | 'z-index-p-2' = 'z-index-auto';
50
- WindowResize() {
51
- this.setResponsiveBg();
52
- }
53
- render() {
54
- const classMap = this.getCssClassMap();
55
- return (index.h(index.Host, null, index.h("div", { class: classMap, "data-xs": `${this.imgUrl}:${this.sizeXs}`, "data-sm": `${this.imgUrl}:${this.sizeSm}`, "data-md": `${this.imgUrl}:${this.sizeMd}`, "data-lg": `${this.imgUrl}:${this.sizeLg}` }, this.imageType == 'smart-bg' ? index.h("slot", null) : null)));
56
- }
57
- componentDidLoad() {
58
- this.addIntersectionObserver();
59
- this.setResponsiveBg();
60
- }
61
- componentWillUpdate() {
62
- // console.log('componentWillUpdate!');
63
- this.addIntersectionObserver();
64
- this.setResponsiveBg();
65
- }
66
- //responsive image
67
- setResponsiveBg() {
68
- // Define local variables
69
- let backgrounds = (this.el || document).querySelectorAll(interfaces.ResponsiveBgVariables.selector), el, elData, currentBreakpoint = this.getCurrentBreakPoints();
70
- // console.log('current breakpoint: ' + currentBreakpoint);
71
- // Loop through all target elements
72
- for (var i = 0, len = backgrounds.length; i < len; i++) {
73
- // Set current variables
74
- el = backgrounds[i];
75
- elData = el.getAttribute('data-' + currentBreakpoint);
76
- // If the data attribute exists, set the background
77
- if (elData !== null) {
78
- el.style.backgroundImage = "url('" + elData + "')";
79
- }
80
- else {
81
- if (typeof console == 'object') {
82
- console.warn('Data attribute: data-' + currentBreakpoint + ' not found on element:\n\n' + el.outerHTML + '\n\n\n');
83
- }
84
- }
85
- }
86
- }
87
- //lazy loading
88
- addIntersectionObserver() {
89
- if (!this.imgUrl) {
90
- console.log('no image!');
91
- return;
92
- }
93
- if ('IntersectionObserver' in window) {
94
- let lazyLoadBgs = (this.el || document).querySelectorAll('.lazy-bg');
95
- let bgObserver = new IntersectionObserver(entries => {
96
- entries.forEach(entry => {
97
- if (entry.isIntersecting) {
98
- const image = entry.target;
99
- image.classList.remove('lazy-bg');
100
- // console.log('loaded');
101
- bgObserver.unobserve(image);
102
- }
103
- });
104
- });
105
- lazyLoadBgs.forEach(image => {
106
- bgObserver.observe(image);
107
- });
108
- }
109
- }
110
- getCssClassMap() {
111
- return {
112
- [this.imageType]: true,
113
- 'ptc-img': true,
114
- [this.borderRadius]: true,
115
- [this.loadMode]: true,
116
- // [this.imageZIndex] : true
117
- };
118
- }
119
- getCurrentBreakPoints() {
120
- // Define local variables
121
- let doc = window.document, temp = doc.createElement('div'), env;
122
- // Append test node
123
- doc.body.appendChild(temp);
124
- // Loop through breakpoints
125
- for (let i = interfaces.ResponsiveBgVariables.envs.length - 1; i >= 0; i--) {
126
- env = interfaces.ResponsiveBgVariables.envs[i];
127
- // Add classes
128
- temp.className = 'hidden-' + env;
129
- // Found breakpoint
130
- if (temp.offsetParent === null) {
131
- // Remove our test node
132
- doc.body.removeChild(temp);
133
- console.log('remove test node');
134
- // Return current breakpoint
135
- return env;
136
- }
137
- }
138
- // Breakpoint not found, try fallback
139
- doc.body.removeChild(temp);
140
- return this.getFallbackBreakpoint();
141
- }
142
- getFallbackBreakpoint() {
143
- if (window.matchMedia('(min-width: 992px)').matches) {
144
- return 'lg';
145
- }
146
- else if (window.matchMedia('(min-width: 768px)').matches) {
147
- return 'md';
148
- }
149
- else if (window.matchMedia('(min-width: 576px)').matches) {
150
- return 'sm';
151
- }
152
- else {
153
- return 'xs';
154
- }
155
- }
156
- get el() { return index.getElement(this); }
157
- };
10
+ let PtcImg = class {
11
+ constructor(hostRef) {
12
+ index.registerInstance(this, hostRef);
13
+ /**
14
+ * Image size for smallest screen
15
+ * <=767px
16
+ */
17
+ this.sizeXs = '510x340';
18
+ /**
19
+ * Image size for small screen
20
+ * >=768px and <=991px
21
+ */
22
+ this.sizeSm = '1240x496';
23
+ /**
24
+ * Image size for medium screen
25
+ * >=992px and <=1199px
26
+ */
27
+ this.sizeMd = '1366x500';
28
+ /**
29
+ * Image solution for large screen
30
+ * >=1200px
31
+ */
32
+ this.sizeLg = '1920x1080';
33
+ /**
34
+ * Image type
35
+ */
36
+ this.imageType = 'smart-bg';
37
+ /**
38
+ * Image border shape
39
+ */
40
+ this.borderRadius = '';
41
+ /**
42
+ * Lazy loading option
43
+ */
44
+ this.loadMode = 'lazy-bg';
45
+ }
46
+ /**
47
+ * Image Z Index
48
+ */
49
+ // @Prop() imageZIndex: 'z-index-auto' | 'z-index-n-2' | 'z-index-n-1' | 'z-index-p-1' | 'z-index-p-2' = 'z-index-auto';
50
+ WindowResize() {
51
+ this.setResponsiveBg();
52
+ }
53
+ render() {
54
+ const classMap = this.getCssClassMap();
55
+ return (index.h(index.Host, null, index.h("div", { class: classMap, "data-xs": `${this.imgUrl}:${this.sizeXs}`, "data-sm": `${this.imgUrl}:${this.sizeSm}`, "data-md": `${this.imgUrl}:${this.sizeMd}`, "data-lg": `${this.imgUrl}:${this.sizeLg}` }, this.imageType == 'smart-bg' ? index.h("slot", null) : null)));
56
+ }
57
+ componentDidLoad() {
58
+ this.addIntersectionObserver();
59
+ this.setResponsiveBg();
60
+ }
61
+ componentWillUpdate() {
62
+ // console.log('componentWillUpdate!');
63
+ this.addIntersectionObserver();
64
+ this.setResponsiveBg();
65
+ }
66
+ //responsive image
67
+ setResponsiveBg() {
68
+ // Define local variables
69
+ let backgrounds = (this.el || document).querySelectorAll(interfaces.ResponsiveBgVariables.selector), el, elData, currentBreakpoint = this.getCurrentBreakPoints();
70
+ // console.log('current breakpoint: ' + currentBreakpoint);
71
+ // Loop through all target elements
72
+ for (var i = 0, len = backgrounds.length; i < len; i++) {
73
+ // Set current variables
74
+ el = backgrounds[i];
75
+ elData = el.getAttribute('data-' + currentBreakpoint);
76
+ // If the data attribute exists, set the background
77
+ if (elData !== null) {
78
+ el.style.backgroundImage = "url('" + elData + "')";
79
+ }
80
+ else {
81
+ if (typeof console == 'object') {
82
+ console.warn('Data attribute: data-' + currentBreakpoint + ' not found on element:\n\n' + el.outerHTML + '\n\n\n');
83
+ }
84
+ }
85
+ }
86
+ }
87
+ //lazy loading
88
+ addIntersectionObserver() {
89
+ if (!this.imgUrl) {
90
+ console.log('no image!');
91
+ return;
92
+ }
93
+ if ('IntersectionObserver' in window) {
94
+ let lazyLoadBgs = (this.el || document).querySelectorAll('.lazy-bg');
95
+ let bgObserver = new IntersectionObserver(entries => {
96
+ entries.forEach(entry => {
97
+ if (entry.isIntersecting) {
98
+ const image = entry.target;
99
+ image.classList.remove('lazy-bg');
100
+ // console.log('loaded');
101
+ bgObserver.unobserve(image);
102
+ }
103
+ });
104
+ });
105
+ lazyLoadBgs.forEach(image => {
106
+ bgObserver.observe(image);
107
+ });
108
+ }
109
+ }
110
+ getCssClassMap() {
111
+ return {
112
+ [this.imageType]: true,
113
+ 'ptc-img': true,
114
+ [this.borderRadius]: true,
115
+ [this.loadMode]: true,
116
+ // [this.imageZIndex] : true
117
+ };
118
+ }
119
+ getCurrentBreakPoints() {
120
+ // Define local variables
121
+ let doc = window.document, temp = doc.createElement('div'), env;
122
+ // Append test node
123
+ doc.body.appendChild(temp);
124
+ // Loop through breakpoints
125
+ for (let i = interfaces.ResponsiveBgVariables.envs.length - 1; i >= 0; i--) {
126
+ env = interfaces.ResponsiveBgVariables.envs[i];
127
+ // Add classes
128
+ temp.className = 'hidden-' + env;
129
+ // Found breakpoint
130
+ if (temp.offsetParent === null) {
131
+ // Remove our test node
132
+ doc.body.removeChild(temp);
133
+ console.log('remove test node');
134
+ // Return current breakpoint
135
+ return env;
136
+ }
137
+ }
138
+ // Breakpoint not found, try fallback
139
+ doc.body.removeChild(temp);
140
+ return this.getFallbackBreakpoint();
141
+ }
142
+ getFallbackBreakpoint() {
143
+ if (window.matchMedia('(min-width: 992px)').matches) {
144
+ return 'lg';
145
+ }
146
+ else if (window.matchMedia('(min-width: 768px)').matches) {
147
+ return 'md';
148
+ }
149
+ else if (window.matchMedia('(min-width: 576px)').matches) {
150
+ return 'sm';
151
+ }
152
+ else {
153
+ return 'xs';
154
+ }
155
+ }
156
+ get el() { return index.getElement(this); }
157
+ };
158
158
  PtcImg.style = ptcImgCss;
159
159
 
160
160
  const ptcOverlayCss = ":host{display:block;position:absolute;top:0;left:0;width:100%;height:100%}:host(.blue){background:linear-gradient(180deg, rgba(25, 123, 192, 0.2) 0%, #197BC0 100%)}:host(.red){background:linear-gradient(180deg, rgba(209, 44, 58, 0.2) 0%, #D12C3A 100%)}:host(.orange){background:linear-gradient(180deg, rgba(195, 119, 41, 0.2) 0%, #C37729 100%)}:host(.green){background:linear-gradient(180deg, rgba(0, 137, 11, 0.2) 0%, #00890B 100%)}:host(.black-1){background:linear-gradient(270deg, rgba(32, 38, 42, 0.32) 33.33%, #20262A 100%)}:host(.black-2){background:linear-gradient(180deg, rgba(32, 38, 42, 0) 0%, #20262A 100%)}@media screen and (min-width: 768px){:host(.black-1){background:linear-gradient(270deg, rgba(32, 38, 42, 0) 33.33%, #20262A 100%)}:host(.black-2){background:linear-gradient(180deg, rgba(32, 38, 42, 0) 0%, #20262A 100%)}}:host(.black-3){background:linear-gradient(180deg, #20262A 0%, rgba(32, 38, 42, 0.55) 100%)}:host(.slate-grey){background:linear-gradient(180deg, rgba(97, 116, 128, 0.2) 0%, #617480 100%)}:host(.radius-sm){border-radius:var(--ptc-border-radius-small)}:host(.radius-md){border-radius:var(--ptc-border-radius-medium)}:host(.radius-lg){border-radius:var(--ptc-border-radius-large)}:host(.radius-x-lg){border-radius:var(--ptc-border-radius-x-large)}:host(.z-index-auto){z-index:auto}:host(.z-index-n-1){z-index:-1}:host(.z-index-n-2){z-index:-2}:host(.z-index-p-1){z-index:1}:host(.z-index-p-2){z-index:2}";
161
161
 
162
- let PtcOverlay = class {
163
- constructor(hostRef) {
164
- index.registerInstance(this, hostRef);
165
- /**
166
- * Overlay z-index
167
- */
168
- this.overlayZIndex = 'z-index-auto';
169
- }
170
- render() {
171
- const classMap = this.getCssClassMap();
172
- return index.h(index.Host, { class: classMap });
173
- }
174
- getCssClassMap() {
175
- return {
176
- [this.filterColor]: !!this.filterColor ? true : false,
177
- [this.borderRadius]: !!this.borderRadius ? true : false,
178
- [this.overlayZIndex]: true
179
- };
180
- }
181
- };
162
+ let PtcOverlay = class {
163
+ constructor(hostRef) {
164
+ index.registerInstance(this, hostRef);
165
+ /**
166
+ * Overlay z-index
167
+ */
168
+ this.overlayZIndex = 'z-index-auto';
169
+ }
170
+ render() {
171
+ const classMap = this.getCssClassMap();
172
+ return index.h(index.Host, { class: classMap });
173
+ }
174
+ getCssClassMap() {
175
+ return {
176
+ [this.filterColor]: !!this.filterColor ? true : false,
177
+ [this.borderRadius]: !!this.borderRadius ? true : false,
178
+ [this.overlayZIndex]: true
179
+ };
180
+ }
181
+ };
182
182
  PtcOverlay.style = ptcOverlayCss;
183
183
 
184
184
  exports.ptc_img = PtcImg;
@@ -6,26 +6,26 @@ const index = require('./index-3adcf9f4.js');
6
6
 
7
7
  const ptcInputCss = ".sc-ptc-input-h{display:block}.form-group.sc-ptc-input{position:relative}.ptc-input.sc-ptc-input{width:-webkit-fill-available;width:-moz-available;width:stretch;display:block;padding:6px 12px;border:none;border-bottom:1px solid #3b4550;padding-left:20px;box-shadow:1px 1px 25px 0 rgba(0, 0, 0, 0.16);border-top-left-radius:5px;border-top-right-radius:5px;border-bottom-left-radius:0;border-bottom-right-radius:0;font-size:16px;color:#707070;padding-top:14px;background:#fff}.floating-label.sc-ptc-input{position:absolute;left:0;bottom:0;transform:translate(20px, -10px);font-family:Raleway;font-size:16px;font-weight:500;line-height:1.07;text-align:left;transition:all 0.4s ease-in-out}.focused.sc-ptc-input+.floating-label.sc-ptc-input{font-size:10px;font-weight:700;line-height:1.5;transform:translate(20px, -24px)}";
8
8
 
9
- let PtcInput = class {
10
- constructor(hostRef) {
11
- index.registerInstance(this, hostRef);
12
- this.blurEvent = index.createEvent(this, "blurEvent", 7);
13
- this.focusEvent = index.createEvent(this, "focusEvent", 7);
14
- this.focused = false;
15
- this.onBlur = () => {
16
- this.blurEvent.emit();
17
- this.focused = false;
18
- };
19
- this.onFocus = () => {
20
- this.focusEvent.emit();
21
- this.focused = true;
22
- };
23
- }
24
- render() {
25
- const focusState = this.focused ? ' focused' : '';
26
- return (index.h("div", { class: "form-group" }, index.h("input", { type: this.type, id: this.inputId, class: `ptc-input form-control${focusState}`, "data-eloqua-name": this.dataEloquaName, name: this.inputName, onBlur: this.onBlur, onFocus: this.onFocus }), index.h("label", { htmlFor: this.inputId, class: "floating-label" }, index.h("slot", null))));
27
- }
28
- };
9
+ let PtcInput = class {
10
+ constructor(hostRef) {
11
+ index.registerInstance(this, hostRef);
12
+ this.blurEvent = index.createEvent(this, "blurEvent", 7);
13
+ this.focusEvent = index.createEvent(this, "focusEvent", 7);
14
+ this.focused = false;
15
+ this.onBlur = () => {
16
+ this.blurEvent.emit();
17
+ this.focused = false;
18
+ };
19
+ this.onFocus = () => {
20
+ this.focusEvent.emit();
21
+ this.focused = true;
22
+ };
23
+ }
24
+ render() {
25
+ const focusState = this.focused ? ' focused' : '';
26
+ return (index.h("div", { class: "form-group" }, index.h("input", { type: this.type, id: this.inputId, class: `ptc-input form-control${focusState}`, "data-eloqua-name": this.dataEloquaName, name: this.inputName, onBlur: this.onBlur, onFocus: this.onFocus }), index.h("label", { htmlFor: this.inputId, class: "floating-label" }, index.h("slot", null))));
27
+ }
28
+ };
29
29
  PtcInput.style = ptcInputCss;
30
30
 
31
31
  exports.ptc_input = PtcInput;
@@ -6,48 +6,48 @@ const index = require('./index-3adcf9f4.js');
6
6
 
7
7
  const ptcLinkCss = ":host{display:block}.disabled{pointer-events:none;cursor:default;text-decoration:none}.ptc-link{display:inline-block;color:var(--color-primary-uigrey);font-weight:var(--ptc-font-weight-black);position:relative;line-height:var(--ptc-line-height-normal);outline:none;text-decoration:none}.simple::after{content:\"\";position:absolute;width:100%;left:0px;bottom:2px;transition:opacity var(--ptc-transition-fast) var(--ptc-standard-ease);border-bottom:2px solid var(--color-primary-green);opacity:0}.simple:hover.simple::after{opacity:1}.arrow{margin-right:var(--ptc-element-spacing-01)}.arrow::after{position:absolute;display:block;content:\"\";width:var(--ptc-element-spacing-06);border-bottom:2px solid var(--color-primary-green);bottom:1px;transition:width var(--ptc-transition-fast) var(--ptc-standard-ease)}.arrow:hover.arrow::after{width:100%}.uppercase{text-transform:uppercase}.small{font-size:var(--ptc-font-size-small)}.medium{font-size:var(--ptc-font-size-medium)}.large{font-size:var(--ptc-font-size-large)}.ptc-link.arrow icon-asset{position:absolute;right:-25px;transition:transform var(--ptc-transition-fast) var(--ptc-standard-ease)}.ptc-link.arrow icon-asset svg{fill:var(--color-primary-green) !important}.ptc-link.arrow-plm icon-asset{position:absolute;right:-6.75px;transform:translate(100%, 8%)}.ptc-link.arrow-plm svg{fill:#3DAB49 !important}.ptc-link:hover.arrow icon-asset{transform:translateX(var(--ptc-element-spacing-04))}.nav-title:focus,.nav-title-link:focus,.primary-nav-link:focus,.secondary-nav-link:focus,.footer-nav-link:focus,.copyright-link:focus{outline:3px solid var(--color-blue-07);outline-offset:2px}.nav-title{box-sizing:border-box;color:var(--color-white);display:inline-block;font-size:15px;font-stretch:100%;font-weight:var(--ptc-font-weight-extrabold);letter-spacing:0.15px;line-height:25.05px;list-style:none;margin-bottom:10px;text-align:left}.primary-nav-link{background-color:transparent;box-sizing:border-box;color:#f3f3f4;display:inline-block;font-size:15px;font-stretch:100%;font-weight:var(--ptc-font-weight-extrabold);letter-spacing:0.3px;line-height:25.95px;list-style:none;margin:var(--ptc-element-spacing-01) var(--ptc-element-spacing-03);padding:var(--ptc-element-spacing-02) var(--ptc-element-spacing-05);padding-bottom:7px;position:relative;text-decoration:none;transition:background-color var(--ptc-transition-medium) var(--ptc-decelerated-ease)}.primary-nav-link:hover{border-radius:4px;background-color:#20262a;text-decoration:none;outline:none}.nav-title-link{background-color:transparent;box-sizing:border-box;color:var(--color-white);font-size:var(--ptc-font-size-x-small);font-stretch:100%;font-weight:var(--ptc-font-weight-extrabold);line-height:15px;list-style:none;text-align:left;text-decoration-color:var(--color-white);text-decoration:none;transition:border-color var(--ptc-transition-medium) var(--ptc-decelerated-ease);border-bottom:1.5px solid transparent;display:inline-block}.nav-title-link:hover{color:var(--color-white);border-bottom:1.5px solid var(--color-secondary-turtlegreen)}.secondary-nav-link{display:inline-block;background-color:transparent;box-sizing:border-box;color:var(--color-white);font-size:var(--ptc-font-size-x-small);font-stretch:100%;font-style:normal;font-weight:var(--ptc-font-weight-semibold);letter-spacing:0.12px;line-height:14.4px;list-style:none;margin-bottom:12px;text-align:left;text-decoration:none;transition:border-color var(--ptc-transition-medium) var(--ptc-decelerated-ease);border-bottom:1.5px solid transparent;white-space:nowrap}.secondary-nav-link:hover{color:var(--color-white);border-bottom:1.5px solid #74c34d;border-radius:0;text-decoration:none}.footer-nav-link{color:var(--color-white);transition:border var(--ptc-transition-medium) var(--ptc-standard-ease), color var(--ptc-transition-medium) var(--ptc-standard-ease);border-bottom:1px solid transparent;outline:none;text-decoration:none;font-weight:var(--ptc-font-weight-semibold);line-height:1.73;letter-spacing:1.13px;text-align:left;font-size:15px}.footer-nav-link:hover{outline:none;text-decoration:none;border-bottom:0.1rem solid var(--color-secondary-turtlegreen);color:var(--color-secondary-turtlegreen)}.copyright-link{color:var(--color-white);font-size:13px;font-weight:var(--ptc-font-weight-normal);line-height:2;display:inline-block}.arrow-plm{color:var(--color-white);font-weight:var(--ptc-font-weight-extrabold);line-height:var(--ptc-line-height-19);text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:transparent;text-underline-offset:2px;transition:text-decoration-color var(--ptc-transition-medium) var(--ptc-acceletated-ease)}.arrow-plm:hover{text-decoration-color:#3DAB49}";
8
8
 
9
- let PtcLink = class {
10
- constructor(hostRef) {
11
- index.registerInstance(this, hostRef);
12
- /**
13
- * Disabled link
14
- */
15
- this.disabled = false;
16
- /**
17
- * Rxternal link
18
- * */
19
- this.external = false;
20
- /**
21
- * Target
22
- */
23
- this.target = '_self';
24
- /**
25
- * Theme
26
- */
27
- this.theme = 'simple';
28
- /**
29
- * Uppercase
30
- */
31
- this.uppercase = false;
32
- /**
33
- * Font Size
34
- */
35
- this.fontSize = 'medium';
36
- }
37
- render() {
38
- const classMap = this.getCssClassMap();
39
- return (index.h(index.Host, null, index.h("a", { class: classMap, href: this.href, target: this.external ? '_blank' : this.target, title: this.linkTitle }, this.theme == 'arrow' ? index.h("icon-asset", { type: "solid", size: "small", name: "arrow-right" }) : '', this.theme == 'arrow-plm' ? index.h("icon-asset", { type: "ptc", size: "x-small", name: "button-arrow-right" }) : '', index.h("slot", null))));
40
- }
41
- getCssClassMap() {
42
- return {
43
- ['ptc-link']: true,
44
- [this.theme]: true,
45
- ['uppercase']: this.uppercase,
46
- ['disabled']: this.disabled,
47
- [this.fontSize]: true,
48
- };
49
- }
50
- };
9
+ let PtcLink = class {
10
+ constructor(hostRef) {
11
+ index.registerInstance(this, hostRef);
12
+ /**
13
+ * Disabled link
14
+ */
15
+ this.disabled = false;
16
+ /**
17
+ * Rxternal link
18
+ * */
19
+ this.external = false;
20
+ /**
21
+ * Target
22
+ */
23
+ this.target = '_self';
24
+ /**
25
+ * Theme
26
+ */
27
+ this.theme = 'simple';
28
+ /**
29
+ * Uppercase
30
+ */
31
+ this.uppercase = false;
32
+ /**
33
+ * Font Size
34
+ */
35
+ this.fontSize = 'medium';
36
+ }
37
+ render() {
38
+ const classMap = this.getCssClassMap();
39
+ return (index.h(index.Host, null, index.h("a", { class: classMap, href: this.href, target: this.external ? '_blank' : this.target, title: this.linkTitle }, this.theme == 'arrow' ? index.h("icon-asset", { type: "solid", size: "small", name: "arrow-right" }) : '', this.theme == 'arrow-plm' ? index.h("icon-asset", { type: "ptc", size: "x-small", name: "button-arrow-right" }) : '', index.h("slot", null))));
40
+ }
41
+ getCssClassMap() {
42
+ return {
43
+ ['ptc-link']: true,
44
+ [this.theme]: true,
45
+ ['uppercase']: this.uppercase,
46
+ ['disabled']: this.disabled,
47
+ [this.fontSize]: true,
48
+ };
49
+ }
50
+ };
51
51
  PtcLink.style = ptcLinkCss;
52
52
 
53
53
  exports.ptc_link = PtcLink;
@@ -6,26 +6,26 @@ const index = require('./index-3adcf9f4.js');
6
6
 
7
7
  const ptcListCss = ".sc-ptc-list-h{display:block}.list-primary.sc-ptc-list-h li.sc-ptc-list{font-size:var(--ptc-font-size-medium);line-height:var(--ptc-line-height-normal);letter-spacing:var(--ptc-letter-spacing-normal);list-style:none}.list-primary.sc-ptc-list-h li.sc-ptc-list:not(:last-child){margin-bottom:0.625rem}.list-primary.sc-ptc-list-h li.sc-ptc-list a.sc-ptc-list{color:var(--color-white);outline:none;text-decoration:none;font-family:Rajdhani;font-size:var(--ptc-font-size-medium);font-weight:var(--ptc-font-weight-bold);line-height:var(--ptc-line-height-normal);text-transform:uppercase;letter-spacing:var(--ptc-letter-spacing-normal)}.list-primary.sc-ptc-list-h li.sc-ptc-list a.sc-ptc-list:hover{color:var(--color-white);border-bottom:1.5px solid var(--color-primary-green)}";
8
8
 
9
- let PtcList = class {
10
- constructor(hostRef) {
11
- index.registerInstance(this, hostRef);
12
- }
13
- render() {
14
- const classMap = this.getCssClassMap();
15
- const listItems = this.listItems;
16
- if (!listItems || listItems.length === 0) {
17
- return null;
18
- }
19
- return (index.h(index.Host, { class: classMap }, index.h("ul", null, listItems.map(listItem => {
20
- index.h("li", null, "$", listItem);
21
- }))));
22
- }
23
- getCssClassMap() {
24
- return {
25
- [this.listType]: this.listItems ? true : false,
26
- };
27
- }
28
- };
9
+ let PtcList = class {
10
+ constructor(hostRef) {
11
+ index.registerInstance(this, hostRef);
12
+ }
13
+ render() {
14
+ const classMap = this.getCssClassMap();
15
+ const listItems = this.listItems;
16
+ if (!listItems || listItems.length === 0) {
17
+ return null;
18
+ }
19
+ return (index.h(index.Host, { class: classMap }, index.h("ul", null, listItems.map(listItem => {
20
+ index.h("li", null, "$", listItem);
21
+ }))));
22
+ }
23
+ getCssClassMap() {
24
+ return {
25
+ [this.listType]: this.listItems ? true : false,
26
+ };
27
+ }
28
+ };
29
29
  PtcList.style = ptcListCss;
30
30
 
31
31
  exports.ptc_list = PtcList;
@@ -6,18 +6,18 @@ const index = require('./index-3adcf9f4.js');
6
6
 
7
7
  const ptcLottieCss = ":host{display:block;width:100%;height:auto}";
8
8
 
9
- let PtcLottie = class {
10
- constructor(hostRef) {
11
- index.registerInstance(this, hostRef);
12
- /**
13
- * Animation speed
14
- */
15
- this.speed = 1;
16
- }
17
- render() {
18
- return (index.h("lottie-player", { autoplay: true, loop: true, src: this.jsonSrc, speed: this.speed }));
19
- }
20
- };
9
+ let PtcLottie = class {
10
+ constructor(hostRef) {
11
+ index.registerInstance(this, hostRef);
12
+ /**
13
+ * Animation speed
14
+ */
15
+ this.speed = 1;
16
+ }
17
+ render() {
18
+ return (index.h("lottie-player", { autoplay: true, loop: true, src: this.jsonSrc, speed: this.speed }));
19
+ }
20
+ };
21
21
  PtcLottie.style = ptcLottieCss;
22
22
 
23
23
  exports.ptc_lottie = PtcLottie;