@ptcwebops/ptcw-design 0.4.6 → 0.4.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 (194) hide show
  1. package/LICENSE +21 -21
  2. package/dist/cjs/{icon-asset_4.cjs.entry.js → icon-asset_8.cjs.entry.js} +298 -219
  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 +178 -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.js +220 -220
  71. package/dist/collection/components/ptc-modal/ptc-modal.js +252 -252
  72. package/dist/collection/components/ptc-nav/ptc-nav.js +21 -21
  73. package/dist/collection/components/ptc-nav-item/ptc-nav-item.js +252 -252
  74. package/dist/collection/components/ptc-overlay/ptc-overlay.js +99 -99
  75. package/dist/collection/components/ptc-para/ptc-para.js +157 -157
  76. package/dist/collection/components/ptc-picture/ptc-picture.js +428 -428
  77. package/dist/collection/components/ptc-previous-url/ptc-previous-url.css +24 -0
  78. package/dist/collection/components/ptc-previous-url/ptc-previous-url.js +54 -0
  79. package/dist/collection/components/ptc-responsive-wrapper/ptc-responsive-wrapper.css +3 -3
  80. package/dist/collection/components/ptc-responsive-wrapper/ptc-responsive-wrapper.js +62 -62
  81. package/dist/collection/components/ptc-select/ptc-select.js +105 -105
  82. package/dist/collection/components/ptc-social-share/ptc-social-share.js +206 -206
  83. package/dist/collection/components/ptc-spacer/ptc-spacer.css +322 -322
  84. package/dist/collection/components/ptc-spacer/ptc-spacer.js +99 -99
  85. package/dist/collection/components/ptc-span/ptc-span.js +89 -89
  86. package/dist/collection/components/ptc-svg-btn/ptc-svg-btn.css +16 -0
  87. package/dist/collection/components/ptc-svg-btn/ptc-svg-btn.js +71 -69
  88. package/dist/collection/components/ptc-title/ptc-title.js +231 -231
  89. package/dist/collection/index.js +1 -1
  90. package/dist/collection/media/svg-imgs/Back-arrow.svg +11 -0
  91. package/dist/collection/media/svg-imgs/close.svg +10 -10
  92. package/dist/collection/media/svg-imgs/slider-arrow-left.svg +18 -18
  93. package/dist/collection/media/svg-imgs/slider-arrow-right.svg +18 -18
  94. package/dist/collection/utils/interfaces.js +11 -11
  95. package/dist/collection/utils/utils.js +3 -3
  96. package/dist/custom-elements/index.d.ts +18 -0
  97. package/dist/custom-elements/index.js +2056 -1991
  98. package/dist/esm/{icon-asset_4.entry.js → icon-asset_8.entry.js} +295 -220
  99. package/dist/esm/{interfaces-c1c73092.js → interfaces-7c0243be.js} +9 -9
  100. package/dist/esm/loader.js +1 -1
  101. package/dist/esm/lottie-player.entry.js +354 -354
  102. package/dist/esm/my-component.entry.js +13 -13
  103. package/dist/esm/polyfills/core-js.js +0 -0
  104. package/dist/esm/polyfills/dom.js +0 -0
  105. package/dist/esm/polyfills/es5-html-element.js +0 -0
  106. package/dist/esm/polyfills/index.js +0 -0
  107. package/dist/esm/polyfills/system.js +0 -0
  108. package/dist/esm/ptc-breadcrumb.entry.js +12 -12
  109. package/dist/esm/ptc-button.entry.js +65 -65
  110. package/dist/esm/ptc-card-bottom.entry.js +31 -31
  111. package/dist/esm/ptc-card-content.entry.js +31 -31
  112. package/dist/esm/ptc-card-plm.entry.js +16 -16
  113. package/dist/esm/ptc-card.entry.js +68 -68
  114. package/dist/esm/ptc-countdown.entry.js +8 -8
  115. package/dist/esm/ptc-date.entry.js +48 -48
  116. package/dist/esm/ptc-footer.entry.js +8 -8
  117. package/dist/esm/ptc-form.entry.js +104 -104
  118. package/dist/esm/ptc-hero.entry.js +18 -18
  119. package/dist/esm/ptc-img_2.entry.js +169 -169
  120. package/dist/esm/ptc-input.entry.js +20 -20
  121. package/dist/esm/ptc-link.entry.js +42 -42
  122. package/dist/esm/ptc-list.entry.js +20 -20
  123. package/dist/esm/ptc-lottie.entry.js +12 -12
  124. package/dist/esm/ptc-modal.entry.js +103 -103
  125. package/dist/esm/ptc-nav-item.entry.js +83 -83
  126. package/dist/esm/ptc-nav.entry.js +8 -8
  127. package/dist/esm/ptc-para.entry.js +39 -39
  128. package/dist/esm/ptc-picture.entry.js +158 -158
  129. package/dist/esm/ptc-responsive-wrapper.entry.js +54 -54
  130. package/dist/esm/ptc-select.entry.js +24 -24
  131. package/dist/esm/ptc-social-share.entry.js +64 -64
  132. package/dist/esm/ptc-spacer.entry.js +35 -35
  133. package/dist/esm/ptc-span.entry.js +23 -23
  134. package/dist/esm/ptc-title.entry.js +44 -44
  135. package/dist/esm/ptcw-design.js +1 -1
  136. package/dist/ptcw-design/media/brands.svg +1381 -1381
  137. package/dist/ptcw-design/media/designer.svg +316 -316
  138. package/dist/ptcw-design/media/regular.svg +463 -463
  139. package/dist/ptcw-design/media/solid.svg +3013 -3013
  140. package/dist/ptcw-design/media/svg-with-js.min.css +4 -4
  141. package/dist/ptcw-design/{p-1e39bc14.entry.js → p-894e8c85.entry.js} +1 -1
  142. package/dist/ptcw-design/{p-439c9e49.entry.js → p-e87c04ae.entry.js} +2 -2
  143. package/dist/ptcw-design/{p-27538cac.entry.js → p-f2f1c015.entry.js} +1 -1
  144. package/dist/ptcw-design/ptcw-design.css +1 -1
  145. package/dist/ptcw-design/ptcw-design.esm.js +1 -1
  146. package/dist/ptcw-design/validation/FormValidation.js +4234 -4234
  147. package/dist/types/components/icon-asset/icon-asset.d.ts +32 -32
  148. package/dist/types/components/list-item/list-item.d.ts +8 -7
  149. package/dist/types/components/my-component/my-component.d.ts +16 -16
  150. package/dist/types/components/ptc-announcement/ptc-announcement.d.ts +35 -35
  151. package/dist/types/components/ptc-breadcrumb/ptc-breadcrumb.d.ts +4 -4
  152. package/dist/types/components/ptc-button/ptc-button.d.ts +56 -56
  153. package/dist/types/components/ptc-card/ptc-card.d.ts +50 -50
  154. package/dist/types/components/ptc-card-bottom/ptc-card-bottom.d.ts +15 -15
  155. package/dist/types/components/ptc-card-content/ptc-card-content.d.ts +15 -15
  156. package/dist/types/components/ptc-card-plm/ptc-card-plm.d.ts +8 -8
  157. package/dist/types/components/ptc-countdown/ptc-countdown.d.ts +3 -3
  158. package/dist/types/components/ptc-date/ptc-date.d.ts +41 -41
  159. package/dist/types/components/ptc-footer/ptc-footer.d.ts +3 -3
  160. package/dist/types/components/ptc-form/ptc-form.d.ts +11 -11
  161. package/dist/types/components/ptc-hero/ptc-hero.d.ts +12 -12
  162. package/dist/types/components/ptc-img/ptc-img.d.ts +51 -51
  163. package/dist/types/components/ptc-input/ptc-input.d.ts +19 -19
  164. package/dist/types/components/ptc-link/ptc-link.d.ts +36 -36
  165. package/dist/types/components/ptc-list/ptc-list.d.ts +6 -6
  166. package/dist/types/components/ptc-lottie/ptc-lottie.d.ts +12 -12
  167. package/dist/types/components/ptc-minimized-footer/ptc-minimized-footer.d.ts +3 -0
  168. package/dist/types/components/ptc-minimized-header/ptc-minimized-header.d.ts +6 -0
  169. package/dist/types/components/ptc-mobile-select/ptc-mobile-select.d.ts +40 -40
  170. package/dist/types/components/ptc-modal/ptc-modal.d.ts +46 -46
  171. package/dist/types/components/ptc-nav/ptc-nav.d.ts +3 -3
  172. package/dist/types/components/ptc-nav-item/ptc-nav-item.d.ts +53 -53
  173. package/dist/types/components/ptc-overlay/ptc-overlay.d.ts +20 -20
  174. package/dist/types/components/ptc-para/ptc-para.d.ts +28 -28
  175. package/dist/types/components/ptc-picture/ptc-picture.d.ts +82 -82
  176. package/dist/types/components/ptc-previous-url/ptc-previous-url.d.ts +5 -0
  177. package/dist/types/components/ptc-responsive-wrapper/ptc-responsive-wrapper.d.ts +8 -8
  178. package/dist/types/components/ptc-select/ptc-select.d.ts +9 -9
  179. package/dist/types/components/ptc-social-share/ptc-social-share.d.ts +25 -25
  180. package/dist/types/components/ptc-spacer/ptc-spacer.d.ts +16 -16
  181. package/dist/types/components/ptc-span/ptc-span.d.ts +16 -16
  182. package/dist/types/components/ptc-svg-btn/ptc-svg-btn.d.ts +12 -12
  183. package/dist/types/components/ptc-title/ptc-title.d.ts +41 -41
  184. package/dist/types/components.d.ts +77 -26
  185. package/dist/types/global.d.ts +1072 -1072
  186. package/dist/types/index.d.ts +1 -1
  187. package/dist/types/utils/interfaces.d.ts +14 -14
  188. package/dist/types/utils/utils.d.ts +1 -1
  189. package/package.json +58 -58
  190. package/readme.md +11 -11
  191. package/dist/cjs/list-item.cjs.entry.js +0 -29
  192. package/dist/esm/list-item.entry.js +0 -25
  193. package/dist/ptcw-design/p-80c03571.entry.js +0 -1
  194. /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;