@ptcwebops/ptcw-design 0.5.5 → 0.5.6

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 (251) hide show
  1. package/LICENSE +21 -21
  2. package/dist/cjs/dropdown-item.cjs.entry.js +21 -0
  3. package/dist/cjs/icon-asset.cjs.entry.js +53 -53
  4. package/dist/cjs/{interfaces-574e6df7.js → interfaces-0ecd8027.js} +9 -9
  5. package/dist/cjs/list-item.cjs.entry.js +19 -19
  6. package/dist/cjs/loader.cjs.js +1 -1
  7. package/dist/cjs/lottie-player.cjs.entry.js +354 -354
  8. package/dist/cjs/my-component.cjs.entry.js +13 -13
  9. package/dist/cjs/ptc-announcement_2.cjs.entry.js +112 -112
  10. package/dist/cjs/ptc-breadcrumb.cjs.entry.js +12 -12
  11. package/dist/cjs/ptc-button.cjs.entry.js +65 -65
  12. package/dist/cjs/ptc-card-bottom.cjs.entry.js +31 -31
  13. package/dist/cjs/ptc-card-content.cjs.entry.js +31 -31
  14. package/dist/cjs/ptc-card-plm.cjs.entry.js +16 -16
  15. package/dist/cjs/ptc-card.cjs.entry.js +68 -68
  16. package/dist/cjs/ptc-checkbox.cjs.entry.js +25 -25
  17. package/dist/cjs/ptc-container.cjs.entry.js +33 -20
  18. package/dist/cjs/ptc-date.cjs.entry.js +48 -48
  19. package/dist/cjs/ptc-ellipsis-dropdown.cjs.entry.js +34 -0
  20. package/dist/cjs/ptc-filter-tag.cjs.entry.js +29 -29
  21. package/dist/cjs/ptc-hero-footer-cta.cjs.entry.js +8 -8
  22. package/dist/cjs/ptc-hero.cjs.entry.js +18 -18
  23. package/dist/cjs/ptc-icon-list.cjs.entry.js +32 -32
  24. package/dist/cjs/ptc-img_2.cjs.entry.js +169 -169
  25. package/dist/cjs/ptc-link.cjs.entry.js +42 -42
  26. package/dist/cjs/ptc-list.cjs.entry.js +23 -23
  27. package/dist/cjs/ptc-lottie.cjs.entry.js +12 -12
  28. package/dist/cjs/ptc-minimized-footer.cjs.entry.js +8 -8
  29. package/dist/cjs/ptc-minimized-header.cjs.entry.js +11 -11
  30. package/dist/cjs/ptc-mobile-select.cjs.entry.js +69 -69
  31. package/dist/cjs/ptc-modal.cjs.entry.js +106 -106
  32. package/dist/cjs/ptc-nav-item.cjs.entry.js +83 -83
  33. package/dist/cjs/ptc-nav.cjs.entry.js +8 -8
  34. package/dist/cjs/ptc-para.cjs.entry.js +39 -39
  35. package/dist/cjs/ptc-picture.cjs.entry.js +169 -169
  36. package/dist/cjs/ptc-previous-url.cjs.entry.js +8 -8
  37. package/dist/cjs/ptc-pricing-block.cjs.entry.js +15 -15
  38. package/dist/cjs/ptc-quote.cjs.entry.js +25 -25
  39. package/dist/cjs/ptc-responsive-wrapper.cjs.entry.js +54 -54
  40. package/dist/cjs/ptc-shopping-cart.cjs.entry.js +29 -18
  41. package/dist/cjs/ptc-social-share.cjs.entry.js +64 -64
  42. package/dist/cjs/ptc-spacer.cjs.entry.js +35 -35
  43. package/dist/cjs/ptc-span.cjs.entry.js +23 -23
  44. package/dist/cjs/ptc-tab-list.cjs.entry.js +117 -78
  45. package/dist/cjs/ptc-title.cjs.entry.js +48 -48
  46. package/dist/cjs/ptc-two-column-media.cjs.entry.js +14 -14
  47. package/dist/cjs/ptcw-design.cjs.js +1 -1
  48. package/dist/cjs/tab-content.cjs.entry.js +26 -26
  49. package/dist/cjs/tab-header.cjs.entry.js +44 -44
  50. package/dist/collection/collection-manifest.json +2 -0
  51. package/dist/collection/components/dropdown-item/dropdown-item.css +25 -0
  52. package/dist/collection/components/dropdown-item/dropdown-item.js +56 -0
  53. package/dist/collection/components/icon-asset/icon-asset.css +4 -4
  54. package/dist/collection/components/icon-asset/icon-asset.js +199 -199
  55. package/dist/collection/components/icon-asset/media/brands.svg +1381 -1381
  56. package/dist/collection/components/icon-asset/media/designer.svg +327 -327
  57. package/dist/collection/components/icon-asset/media/regular.svg +463 -463
  58. package/dist/collection/components/icon-asset/media/solid.svg +3013 -3013
  59. package/dist/collection/components/icon-asset/media/svg-with-js.min.css +4 -4
  60. package/dist/collection/components/list-item/list-item.js +103 -103
  61. package/dist/collection/components/my-component/my-component.css +3 -3
  62. package/dist/collection/components/my-component/my-component.js +73 -73
  63. package/dist/collection/components/ptc-announcement/ptc-announcement.js +210 -210
  64. package/dist/collection/components/ptc-breadcrumb/ptc-breadcrumb.js +21 -21
  65. package/dist/collection/components/ptc-button/ptc-button.js +293 -293
  66. package/dist/collection/components/ptc-card/ptc-card.js +282 -282
  67. package/dist/collection/components/ptc-card-bottom/ptc-card-bottom.js +105 -105
  68. package/dist/collection/components/ptc-card-content/ptc-card-content.js +105 -105
  69. package/dist/collection/components/ptc-card-plm/ptc-card-plm.js +97 -97
  70. package/dist/collection/components/ptc-checkbox/ptc-checkbox.js +76 -76
  71. package/dist/collection/components/ptc-container/ptc-container.css +29 -6
  72. package/dist/collection/components/ptc-container/ptc-container.js +98 -49
  73. package/dist/collection/components/ptc-date/ptc-date.js +201 -201
  74. package/dist/collection/components/ptc-ellipsis-dropdown/ptc-ellipsis-dropdown.css +39 -0
  75. package/dist/collection/components/ptc-ellipsis-dropdown/ptc-ellipsis-dropdown.js +77 -0
  76. package/dist/collection/components/ptc-filter-tag/ptc-filter-tag.js +96 -96
  77. package/dist/collection/components/ptc-hero/ptc-hero.js +67 -67
  78. package/dist/collection/components/ptc-hero-footer-cta/ptc-hero-footer-cta.js +77 -77
  79. package/dist/collection/components/ptc-icon-list/ptc-icon-list.js +145 -145
  80. package/dist/collection/components/ptc-img/ptc-img.js +314 -314
  81. package/dist/collection/components/ptc-link/ptc-link.js +198 -198
  82. package/dist/collection/components/ptc-list/ptc-list.js +68 -68
  83. package/dist/collection/components/ptc-lottie/ptc-lottie.css +5 -5
  84. package/dist/collection/components/ptc-lottie/ptc-lottie.js +58 -58
  85. package/dist/collection/components/ptc-minimized-footer/ptc-minimized-footer.js +17 -17
  86. package/dist/collection/components/ptc-minimized-header/ptc-minimized-header.js +80 -80
  87. package/dist/collection/components/ptc-mobile-select/ptc-mobile-select.js +221 -221
  88. package/dist/collection/components/ptc-modal/ptc-modal.js +255 -255
  89. package/dist/collection/components/ptc-nav/ptc-nav.js +21 -21
  90. package/dist/collection/components/ptc-nav-item/ptc-nav-item.js +252 -252
  91. package/dist/collection/components/ptc-overlay/ptc-overlay.js +99 -99
  92. package/dist/collection/components/ptc-para/ptc-para.js +157 -157
  93. package/dist/collection/components/ptc-picture/ptc-picture.js +474 -474
  94. package/dist/collection/components/ptc-previous-url/ptc-previous-url.js +54 -54
  95. package/dist/collection/components/ptc-pricing-block/ptc-pricing-block.css +11 -11
  96. package/dist/collection/components/ptc-pricing-block/ptc-pricing-block.js +25 -25
  97. package/dist/collection/components/ptc-quote/ptc-quote.js +154 -154
  98. package/dist/collection/components/ptc-responsive-wrapper/ptc-responsive-wrapper.css +3 -3
  99. package/dist/collection/components/ptc-responsive-wrapper/ptc-responsive-wrapper.js +62 -62
  100. package/dist/collection/components/ptc-shopping-cart/ptc-shopping-cart.css +7 -0
  101. package/dist/collection/components/ptc-shopping-cart/ptc-shopping-cart.js +69 -41
  102. package/dist/collection/components/ptc-social-share/ptc-social-share.js +206 -206
  103. package/dist/collection/components/ptc-spacer/ptc-spacer.css +322 -322
  104. package/dist/collection/components/ptc-spacer/ptc-spacer.js +99 -99
  105. package/dist/collection/components/ptc-span/ptc-span.js +89 -89
  106. package/dist/collection/components/ptc-svg-btn/ptc-svg-btn.js +71 -71
  107. package/dist/collection/components/ptc-tab-list/ptc-tab-list.css +28 -2
  108. package/dist/collection/components/ptc-tab-list/ptc-tab-list.js +140 -91
  109. package/dist/collection/components/ptc-title/ptc-title.js +236 -236
  110. package/dist/collection/components/ptc-two-column-media/ptc-two-column-media.js +40 -40
  111. package/dist/collection/components/tab-content/tab-content.js +74 -74
  112. package/dist/collection/components/tab-header/tab-header.css +1 -0
  113. package/dist/collection/components/tab-header/tab-header.js +107 -107
  114. package/dist/collection/index.js +1 -1
  115. package/dist/collection/media/svg-imgs/Back-arrow.svg +11 -11
  116. package/dist/collection/media/svg-imgs/close.svg +10 -10
  117. package/dist/collection/media/svg-imgs/{ptc-shopping-cart.svg → ptc-shopping-cart-black.svg} +3 -3
  118. package/dist/collection/media/svg-imgs/ptc-shopping-cart-white.svg +3 -0
  119. package/dist/collection/media/svg-imgs/slider-arrow-left.svg +18 -18
  120. package/dist/collection/media/svg-imgs/slider-arrow-right.svg +18 -18
  121. package/dist/collection/utils/interfaces.js +11 -11
  122. package/dist/collection/utils/utils.js +3 -3
  123. package/dist/custom-elements/index.d.ts +12 -0
  124. package/dist/custom-elements/index.js +2354 -2243
  125. package/dist/esm/dropdown-item.entry.js +17 -0
  126. package/dist/esm/icon-asset.entry.js +53 -53
  127. package/dist/esm/{interfaces-7c0243be.js → interfaces-c1c73092.js} +9 -9
  128. package/dist/esm/list-item.entry.js +19 -19
  129. package/dist/esm/loader.js +1 -1
  130. package/dist/esm/lottie-player.entry.js +354 -354
  131. package/dist/esm/my-component.entry.js +13 -13
  132. package/dist/esm/polyfills/core-js.js +0 -0
  133. package/dist/esm/polyfills/dom.js +0 -0
  134. package/dist/esm/polyfills/es5-html-element.js +0 -0
  135. package/dist/esm/polyfills/index.js +0 -0
  136. package/dist/esm/polyfills/system.js +0 -0
  137. package/dist/esm/ptc-announcement_2.entry.js +112 -112
  138. package/dist/esm/ptc-breadcrumb.entry.js +12 -12
  139. package/dist/esm/ptc-button.entry.js +65 -65
  140. package/dist/esm/ptc-card-bottom.entry.js +31 -31
  141. package/dist/esm/ptc-card-content.entry.js +31 -31
  142. package/dist/esm/ptc-card-plm.entry.js +16 -16
  143. package/dist/esm/ptc-card.entry.js +68 -68
  144. package/dist/esm/ptc-checkbox.entry.js +25 -25
  145. package/dist/esm/ptc-container.entry.js +33 -20
  146. package/dist/esm/ptc-date.entry.js +48 -48
  147. package/dist/esm/ptc-ellipsis-dropdown.entry.js +30 -0
  148. package/dist/esm/ptc-filter-tag.entry.js +29 -29
  149. package/dist/esm/ptc-hero-footer-cta.entry.js +8 -8
  150. package/dist/esm/ptc-hero.entry.js +18 -18
  151. package/dist/esm/ptc-icon-list.entry.js +32 -32
  152. package/dist/esm/ptc-img_2.entry.js +169 -169
  153. package/dist/esm/ptc-link.entry.js +42 -42
  154. package/dist/esm/ptc-list.entry.js +23 -23
  155. package/dist/esm/ptc-lottie.entry.js +12 -12
  156. package/dist/esm/ptc-minimized-footer.entry.js +8 -8
  157. package/dist/esm/ptc-minimized-header.entry.js +11 -11
  158. package/dist/esm/ptc-mobile-select.entry.js +69 -69
  159. package/dist/esm/ptc-modal.entry.js +106 -106
  160. package/dist/esm/ptc-nav-item.entry.js +83 -83
  161. package/dist/esm/ptc-nav.entry.js +8 -8
  162. package/dist/esm/ptc-para.entry.js +39 -39
  163. package/dist/esm/ptc-picture.entry.js +169 -169
  164. package/dist/esm/ptc-previous-url.entry.js +8 -8
  165. package/dist/esm/ptc-pricing-block.entry.js +15 -15
  166. package/dist/esm/ptc-quote.entry.js +25 -25
  167. package/dist/esm/ptc-responsive-wrapper.entry.js +54 -54
  168. package/dist/esm/ptc-shopping-cart.entry.js +29 -18
  169. package/dist/esm/ptc-social-share.entry.js +64 -64
  170. package/dist/esm/ptc-spacer.entry.js +35 -35
  171. package/dist/esm/ptc-span.entry.js +23 -23
  172. package/dist/esm/ptc-tab-list.entry.js +118 -79
  173. package/dist/esm/ptc-title.entry.js +48 -48
  174. package/dist/esm/ptc-two-column-media.entry.js +14 -14
  175. package/dist/esm/ptcw-design.js +1 -1
  176. package/dist/esm/tab-content.entry.js +26 -26
  177. package/dist/esm/tab-header.entry.js +44 -44
  178. package/dist/ptcw-design/media/brands.svg +1381 -1381
  179. package/dist/ptcw-design/media/designer.svg +327 -327
  180. package/dist/ptcw-design/media/regular.svg +463 -463
  181. package/dist/ptcw-design/media/solid.svg +3013 -3013
  182. package/dist/ptcw-design/media/svg-with-js.min.css +4 -4
  183. package/dist/ptcw-design/{p-64d01929.entry.js → p-1cfc77eb.entry.js} +1 -1
  184. package/dist/ptcw-design/{p-009537ea.entry.js → p-3a41081a.entry.js} +1 -1
  185. package/dist/ptcw-design/p-412ca190.entry.js +1 -0
  186. package/dist/ptcw-design/p-49d34cb8.entry.js +1 -0
  187. package/dist/ptcw-design/p-72e6a3f1.entry.js +1 -0
  188. package/dist/ptcw-design/p-8ea08e1d.entry.js +1 -0
  189. package/dist/ptcw-design/{p-4db41d90.entry.js → p-c3e79e54.entry.js} +1 -1
  190. package/dist/ptcw-design/p-c5bfb13d.entry.js +1 -0
  191. package/dist/ptcw-design/p-c69933fe.entry.js +1 -0
  192. package/dist/ptcw-design/ptcw-design.css +1 -1
  193. package/dist/ptcw-design/ptcw-design.esm.js +1 -1
  194. package/dist/types/components/dropdown-item/dropdown-item.d.ts +5 -0
  195. package/dist/types/components/icon-asset/icon-asset.d.ts +36 -36
  196. package/dist/types/components/list-item/list-item.d.ts +8 -8
  197. package/dist/types/components/my-component/my-component.d.ts +16 -16
  198. package/dist/types/components/ptc-announcement/ptc-announcement.d.ts +43 -43
  199. package/dist/types/components/ptc-breadcrumb/ptc-breadcrumb.d.ts +4 -4
  200. package/dist/types/components/ptc-button/ptc-button.d.ts +56 -56
  201. package/dist/types/components/ptc-card/ptc-card.d.ts +50 -50
  202. package/dist/types/components/ptc-card-bottom/ptc-card-bottom.d.ts +15 -15
  203. package/dist/types/components/ptc-card-content/ptc-card-content.d.ts +15 -15
  204. package/dist/types/components/ptc-card-plm/ptc-card-plm.d.ts +8 -8
  205. package/dist/types/components/ptc-checkbox/ptc-checkbox.d.ts +9 -9
  206. package/dist/types/components/ptc-container/ptc-container.d.ts +11 -8
  207. package/dist/types/components/ptc-date/ptc-date.d.ts +41 -41
  208. package/dist/types/components/ptc-ellipsis-dropdown/ptc-ellipsis-dropdown.d.ts +10 -0
  209. package/dist/types/components/ptc-filter-tag/ptc-filter-tag.d.ts +16 -16
  210. package/dist/types/components/ptc-hero/ptc-hero.d.ts +12 -12
  211. package/dist/types/components/ptc-hero-footer-cta/ptc-hero-footer-cta.d.ts +6 -6
  212. package/dist/types/components/ptc-icon-list/ptc-icon-list.d.ts +21 -21
  213. package/dist/types/components/ptc-img/ptc-img.d.ts +51 -51
  214. package/dist/types/components/ptc-link/ptc-link.d.ts +36 -36
  215. package/dist/types/components/ptc-list/ptc-list.d.ts +6 -6
  216. package/dist/types/components/ptc-lottie/ptc-lottie.d.ts +12 -12
  217. package/dist/types/components/ptc-minimized-footer/ptc-minimized-footer.d.ts +3 -3
  218. package/dist/types/components/ptc-minimized-header/ptc-minimized-header.d.ts +6 -6
  219. package/dist/types/components/ptc-mobile-select/ptc-mobile-select.d.ts +40 -40
  220. package/dist/types/components/ptc-modal/ptc-modal.d.ts +46 -46
  221. package/dist/types/components/ptc-nav/ptc-nav.d.ts +3 -3
  222. package/dist/types/components/ptc-nav-item/ptc-nav-item.d.ts +53 -53
  223. package/dist/types/components/ptc-overlay/ptc-overlay.d.ts +20 -20
  224. package/dist/types/components/ptc-para/ptc-para.d.ts +28 -28
  225. package/dist/types/components/ptc-picture/ptc-picture.d.ts +93 -93
  226. package/dist/types/components/ptc-previous-url/ptc-previous-url.d.ts +5 -5
  227. package/dist/types/components/ptc-pricing-block/ptc-pricing-block.d.ts +4 -4
  228. package/dist/types/components/ptc-quote/ptc-quote.d.ts +29 -29
  229. package/dist/types/components/ptc-responsive-wrapper/ptc-responsive-wrapper.d.ts +8 -8
  230. package/dist/types/components/ptc-shopping-cart/ptc-shopping-cart.d.ts +6 -5
  231. package/dist/types/components/ptc-social-share/ptc-social-share.d.ts +25 -25
  232. package/dist/types/components/ptc-spacer/ptc-spacer.d.ts +16 -16
  233. package/dist/types/components/ptc-span/ptc-span.d.ts +16 -16
  234. package/dist/types/components/ptc-svg-btn/ptc-svg-btn.d.ts +12 -12
  235. package/dist/types/components/ptc-tab-list/ptc-tab-list.d.ts +14 -12
  236. package/dist/types/components/ptc-title/ptc-title.d.ts +41 -41
  237. package/dist/types/components/ptc-two-column-media/ptc-two-column-media.d.ts +9 -9
  238. package/dist/types/components/tab-content/tab-content.d.ts +12 -12
  239. package/dist/types/components/tab-header/tab-header.d.ts +13 -13
  240. package/dist/types/components.d.ts +63 -24
  241. package/dist/types/global.d.ts +1072 -1072
  242. package/dist/types/index.d.ts +1 -1
  243. package/dist/types/utils/interfaces.d.ts +28 -28
  244. package/dist/types/utils/utils.d.ts +1 -1
  245. package/package.json +59 -59
  246. package/readme.md +11 -11
  247. package/dist/ptcw-design/p-4f6c0f75.entry.js +0 -1
  248. package/dist/ptcw-design/p-7d156444.entry.js +0 -1
  249. package/dist/ptcw-design/p-d3c6d843.entry.js +0 -1
  250. package/dist/ptcw-design/p-dc89ceb2.entry.js +0 -1
  251. /package/dist/ptcw-design/{p-ee1183b2.js → p-50e52c88.js} +0 -0
@@ -1,255 +1,255 @@
1
- import { Component, Element, Host, Prop, State, h, Event } from '@stencil/core';
2
- export class PtcModal {
3
- constructor() {
4
- /**
5
- * Sets if popup should close if click on outside
6
- */
7
- this.size = 'sm';
8
- /**
9
- * Set whether or not to display modal
10
- */
11
- this.show = false;
12
- /**
13
- * Sets if popup should overlay
14
- */
15
- this.overlay = true;
16
- /**
17
- * Sets if popup should close if click on outside
18
- */
19
- this.closeOnBlur = false;
20
- }
21
- fireOnClosed(modal) {
22
- this.closed.emit(modal);
23
- }
24
- fireOnOpened(modal) {
25
- this.opened.emit(modal);
26
- }
27
- componentWillLoad() {
28
- let body = document.querySelector('body');
29
- this.bodyOverflowSetting = {
30
- //overflow: body.style['overflow'],
31
- overflowY: body.style['overflowY'],
32
- overflowX: body.style['overflowX'],
33
- };
34
- }
35
- componentWillRender() {
36
- let body = document.querySelector('body');
37
- if (body) {
38
- if (this.show) {
39
- //body.style['overflow'] = 'hidden';
40
- body.style['overflowY'] = 'scroll';
41
- body.style['overflowX'] = 'hidden';
42
- }
43
- else {
44
- //body.style['overflow'] = this.bodyOverflowSetting.overflow;
45
- body.style['overflowY'] = this.bodyOverflowSetting.overflowY;
46
- body.style['overflowX'] = this.bodyOverflowSetting.overflowX;
47
- }
48
- }
49
- }
50
- componentDidLoad() {
51
- if (this.show) {
52
- this.fireOnOpened(this);
53
- }
54
- }
55
- componentDidUpdate() {
56
- if (this.show) {
57
- this.fireOnOpened(this);
58
- }
59
- else {
60
- this.fireOnClosed(this);
61
- }
62
- }
63
- resizeIframe(e) {
64
- let iFrame = e.target;
65
- setTimeout(() => {
66
- try {
67
- iFrame.height = `${iFrame.contentDocument.body.scrollHeight}px`;
68
- }
69
- catch (error) {
70
- console.log(error);
71
- iFrame.height = '616px'; //default
72
- iFrame.removeAttribute('scrolling');
73
- }
74
- iFrame.classList.add('ready');
75
- }, 50);
76
- }
77
- close() {
78
- this.show = false;
79
- }
80
- render() {
81
- let content;
82
- let overlay;
83
- let type = this.iframeUrl ? 'frame' : 'html';
84
- if (this.iframeUrl) {
85
- content = (h("iframe", { src: this.iframeUrl, frameBorder: 0, allowFullScreen: false, height: "100%", width: "100%", scrolling: "no", onLoad: this.resizeIframe }));
86
- }
87
- else {
88
- content = (h("slot", null));
89
- }
90
- if (this.overlay) {
91
- if (this.closeOnBlur) {
92
- overlay = h("div", { class: "overlay", onClick: (_) => this.close() });
93
- }
94
- else {
95
- overlay = h("div", { class: "overlay" });
96
- }
97
- }
98
- return (h(Host, null,
99
- h("div", { class: `wrapper ${this.show ? "show" : "hide"}` },
100
- overlay,
101
- h("div", { class: `modal-popup ${this.size} ${type}` },
102
- h("div", { class: "close" },
103
- h("a", { href: "#", onClick: (e) => {
104
- e.preventDefault();
105
- this.close();
106
- } },
107
- h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 14 14", fill: "none" },
108
- h("path", { d: "M1 1L13 13", stroke: "black" }),
109
- h("path", { d: "M13 1L1 13", stroke: "black" })))),
110
- h("div", { class: "modal-body" }, content)))));
111
- }
112
- static get is() { return "ptc-modal"; }
113
- static get encapsulation() { return "shadow"; }
114
- static get originalStyleUrls() { return {
115
- "$": ["ptc-modal.scss"]
116
- }; }
117
- static get styleUrls() { return {
118
- "$": ["ptc-modal.css"]
119
- }; }
120
- static get properties() { return {
121
- "iframeUrl": {
122
- "type": "string",
123
- "mutable": true,
124
- "complexType": {
125
- "original": "string",
126
- "resolved": "string",
127
- "references": {}
128
- },
129
- "required": false,
130
- "optional": false,
131
- "docs": {
132
- "tags": [],
133
- "text": "Set url for content iframe to load if false will load slot element"
134
- },
135
- "attribute": "iframe-url",
136
- "reflect": false
137
- },
138
- "size": {
139
- "type": "string",
140
- "mutable": true,
141
- "complexType": {
142
- "original": "'sm' | 'md' | 'lg' | 'xl'",
143
- "resolved": "\"lg\" | \"md\" | \"sm\" | \"xl\"",
144
- "references": {}
145
- },
146
- "required": false,
147
- "optional": true,
148
- "docs": {
149
- "tags": [],
150
- "text": "Sets if popup should close if click on outside"
151
- },
152
- "attribute": "size",
153
- "reflect": false,
154
- "defaultValue": "'sm'"
155
- },
156
- "show": {
157
- "type": "boolean",
158
- "mutable": true,
159
- "complexType": {
160
- "original": "boolean",
161
- "resolved": "boolean",
162
- "references": {}
163
- },
164
- "required": false,
165
- "optional": true,
166
- "docs": {
167
- "tags": [],
168
- "text": "Set whether or not to display modal"
169
- },
170
- "attribute": "show",
171
- "reflect": false,
172
- "defaultValue": "false"
173
- },
174
- "overlay": {
175
- "type": "boolean",
176
- "mutable": true,
177
- "complexType": {
178
- "original": "boolean",
179
- "resolved": "boolean",
180
- "references": {}
181
- },
182
- "required": false,
183
- "optional": true,
184
- "docs": {
185
- "tags": [],
186
- "text": "Sets if popup should overlay"
187
- },
188
- "attribute": "overlay",
189
- "reflect": false,
190
- "defaultValue": "true"
191
- },
192
- "closeOnBlur": {
193
- "type": "boolean",
194
- "mutable": true,
195
- "complexType": {
196
- "original": "boolean",
197
- "resolved": "boolean",
198
- "references": {}
199
- },
200
- "required": false,
201
- "optional": true,
202
- "docs": {
203
- "tags": [],
204
- "text": "Sets if popup should close if click on outside"
205
- },
206
- "attribute": "close-on-blur",
207
- "reflect": false,
208
- "defaultValue": "false"
209
- }
210
- }; }
211
- static get states() { return {
212
- "overlayHeight": {},
213
- "bodyOverflowSetting": {}
214
- }; }
215
- static get events() { return [{
216
- "method": "closed",
217
- "name": "closed",
218
- "bubbles": true,
219
- "cancelable": true,
220
- "composed": true,
221
- "docs": {
222
- "tags": [],
223
- "text": "Event for modal popup closed"
224
- },
225
- "complexType": {
226
- "original": "PtcModal",
227
- "resolved": "PtcModal",
228
- "references": {
229
- "PtcModal": {
230
- "location": "global"
231
- }
232
- }
233
- }
234
- }, {
235
- "method": "opened",
236
- "name": "opened",
237
- "bubbles": true,
238
- "cancelable": true,
239
- "composed": true,
240
- "docs": {
241
- "tags": [],
242
- "text": "Event for modal popup opened"
243
- },
244
- "complexType": {
245
- "original": "PtcModal",
246
- "resolved": "PtcModal",
247
- "references": {
248
- "PtcModal": {
249
- "location": "global"
250
- }
251
- }
252
- }
253
- }]; }
254
- static get elementRef() { return "el"; }
255
- }
1
+ import { Component, Element, Host, Prop, State, h, Event } from '@stencil/core';
2
+ export class PtcModal {
3
+ constructor() {
4
+ /**
5
+ * Sets if popup should close if click on outside
6
+ */
7
+ this.size = 'sm';
8
+ /**
9
+ * Set whether or not to display modal
10
+ */
11
+ this.show = false;
12
+ /**
13
+ * Sets if popup should overlay
14
+ */
15
+ this.overlay = true;
16
+ /**
17
+ * Sets if popup should close if click on outside
18
+ */
19
+ this.closeOnBlur = false;
20
+ }
21
+ fireOnClosed(modal) {
22
+ this.closed.emit(modal);
23
+ }
24
+ fireOnOpened(modal) {
25
+ this.opened.emit(modal);
26
+ }
27
+ componentWillLoad() {
28
+ let body = document.querySelector('body');
29
+ this.bodyOverflowSetting = {
30
+ //overflow: body.style['overflow'],
31
+ overflowY: body.style['overflowY'],
32
+ overflowX: body.style['overflowX'],
33
+ };
34
+ }
35
+ componentWillRender() {
36
+ let body = document.querySelector('body');
37
+ if (body) {
38
+ if (this.show) {
39
+ //body.style['overflow'] = 'hidden';
40
+ body.style['overflowY'] = 'scroll';
41
+ body.style['overflowX'] = 'hidden';
42
+ }
43
+ else {
44
+ //body.style['overflow'] = this.bodyOverflowSetting.overflow;
45
+ body.style['overflowY'] = this.bodyOverflowSetting.overflowY;
46
+ body.style['overflowX'] = this.bodyOverflowSetting.overflowX;
47
+ }
48
+ }
49
+ }
50
+ componentDidLoad() {
51
+ if (this.show) {
52
+ this.fireOnOpened(this);
53
+ }
54
+ }
55
+ componentDidUpdate() {
56
+ if (this.show) {
57
+ this.fireOnOpened(this);
58
+ }
59
+ else {
60
+ this.fireOnClosed(this);
61
+ }
62
+ }
63
+ resizeIframe(e) {
64
+ let iFrame = e.target;
65
+ setTimeout(() => {
66
+ try {
67
+ iFrame.height = `${iFrame.contentDocument.body.scrollHeight}px`;
68
+ }
69
+ catch (error) {
70
+ console.log(error);
71
+ iFrame.height = '616px'; //default
72
+ iFrame.removeAttribute('scrolling');
73
+ }
74
+ iFrame.classList.add('ready');
75
+ }, 50);
76
+ }
77
+ close() {
78
+ this.show = false;
79
+ }
80
+ render() {
81
+ let content;
82
+ let overlay;
83
+ let type = this.iframeUrl ? 'frame' : 'html';
84
+ if (this.iframeUrl) {
85
+ content = (h("iframe", { src: this.iframeUrl, frameBorder: 0, allowFullScreen: false, height: "100%", width: "100%", scrolling: "no", onLoad: this.resizeIframe }));
86
+ }
87
+ else {
88
+ content = (h("slot", null));
89
+ }
90
+ if (this.overlay) {
91
+ if (this.closeOnBlur) {
92
+ overlay = h("div", { class: "overlay", onClick: (_) => this.close() });
93
+ }
94
+ else {
95
+ overlay = h("div", { class: "overlay" });
96
+ }
97
+ }
98
+ return (h(Host, null,
99
+ h("div", { class: `wrapper ${this.show ? "show" : "hide"}` },
100
+ overlay,
101
+ h("div", { class: `modal-popup ${this.size} ${type}` },
102
+ h("div", { class: "close" },
103
+ h("a", { href: "#", onClick: (e) => {
104
+ e.preventDefault();
105
+ this.close();
106
+ } },
107
+ h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 14 14", fill: "none" },
108
+ h("path", { d: "M1 1L13 13", stroke: "black" }),
109
+ h("path", { d: "M13 1L1 13", stroke: "black" })))),
110
+ h("div", { class: "modal-body" }, content)))));
111
+ }
112
+ static get is() { return "ptc-modal"; }
113
+ static get encapsulation() { return "shadow"; }
114
+ static get originalStyleUrls() { return {
115
+ "$": ["ptc-modal.scss"]
116
+ }; }
117
+ static get styleUrls() { return {
118
+ "$": ["ptc-modal.css"]
119
+ }; }
120
+ static get properties() { return {
121
+ "iframeUrl": {
122
+ "type": "string",
123
+ "mutable": true,
124
+ "complexType": {
125
+ "original": "string",
126
+ "resolved": "string",
127
+ "references": {}
128
+ },
129
+ "required": false,
130
+ "optional": false,
131
+ "docs": {
132
+ "tags": [],
133
+ "text": "Set url for content iframe to load if false will load slot element"
134
+ },
135
+ "attribute": "iframe-url",
136
+ "reflect": false
137
+ },
138
+ "size": {
139
+ "type": "string",
140
+ "mutable": true,
141
+ "complexType": {
142
+ "original": "'sm' | 'md' | 'lg' | 'xl'",
143
+ "resolved": "\"lg\" | \"md\" | \"sm\" | \"xl\"",
144
+ "references": {}
145
+ },
146
+ "required": false,
147
+ "optional": true,
148
+ "docs": {
149
+ "tags": [],
150
+ "text": "Sets if popup should close if click on outside"
151
+ },
152
+ "attribute": "size",
153
+ "reflect": false,
154
+ "defaultValue": "'sm'"
155
+ },
156
+ "show": {
157
+ "type": "boolean",
158
+ "mutable": true,
159
+ "complexType": {
160
+ "original": "boolean",
161
+ "resolved": "boolean",
162
+ "references": {}
163
+ },
164
+ "required": false,
165
+ "optional": true,
166
+ "docs": {
167
+ "tags": [],
168
+ "text": "Set whether or not to display modal"
169
+ },
170
+ "attribute": "show",
171
+ "reflect": false,
172
+ "defaultValue": "false"
173
+ },
174
+ "overlay": {
175
+ "type": "boolean",
176
+ "mutable": true,
177
+ "complexType": {
178
+ "original": "boolean",
179
+ "resolved": "boolean",
180
+ "references": {}
181
+ },
182
+ "required": false,
183
+ "optional": true,
184
+ "docs": {
185
+ "tags": [],
186
+ "text": "Sets if popup should overlay"
187
+ },
188
+ "attribute": "overlay",
189
+ "reflect": false,
190
+ "defaultValue": "true"
191
+ },
192
+ "closeOnBlur": {
193
+ "type": "boolean",
194
+ "mutable": true,
195
+ "complexType": {
196
+ "original": "boolean",
197
+ "resolved": "boolean",
198
+ "references": {}
199
+ },
200
+ "required": false,
201
+ "optional": true,
202
+ "docs": {
203
+ "tags": [],
204
+ "text": "Sets if popup should close if click on outside"
205
+ },
206
+ "attribute": "close-on-blur",
207
+ "reflect": false,
208
+ "defaultValue": "false"
209
+ }
210
+ }; }
211
+ static get states() { return {
212
+ "overlayHeight": {},
213
+ "bodyOverflowSetting": {}
214
+ }; }
215
+ static get events() { return [{
216
+ "method": "closed",
217
+ "name": "closed",
218
+ "bubbles": true,
219
+ "cancelable": true,
220
+ "composed": true,
221
+ "docs": {
222
+ "tags": [],
223
+ "text": "Event for modal popup closed"
224
+ },
225
+ "complexType": {
226
+ "original": "PtcModal",
227
+ "resolved": "PtcModal",
228
+ "references": {
229
+ "PtcModal": {
230
+ "location": "global"
231
+ }
232
+ }
233
+ }
234
+ }, {
235
+ "method": "opened",
236
+ "name": "opened",
237
+ "bubbles": true,
238
+ "cancelable": true,
239
+ "composed": true,
240
+ "docs": {
241
+ "tags": [],
242
+ "text": "Event for modal popup opened"
243
+ },
244
+ "complexType": {
245
+ "original": "PtcModal",
246
+ "resolved": "PtcModal",
247
+ "references": {
248
+ "PtcModal": {
249
+ "location": "global"
250
+ }
251
+ }
252
+ }
253
+ }]; }
254
+ static get elementRef() { return "el"; }
255
+ }
@@ -1,21 +1,21 @@
1
- import { Component, Host, h } from '@stencil/core';
2
- export class PtcNav {
3
- render() {
4
- return (h(Host, null,
5
- h("nav", { class: "nav-style" },
6
- h("div", { class: "primary-nav", part: "primary-nav-part" },
7
- h("slot", { name: "primary-nav-content" })),
8
- h("div", { class: "secondary-nav", part: "secondary-nav-part" },
9
- h("slot", { name: "secondary-nav-content" })),
10
- h("div", { class: "language-nav", part: "language-nav-part" },
11
- h("slot", { name: "language-nav-content" })))));
12
- }
13
- static get is() { return "ptc-nav"; }
14
- static get encapsulation() { return "shadow"; }
15
- static get originalStyleUrls() { return {
16
- "$": ["ptc-nav.scss"]
17
- }; }
18
- static get styleUrls() { return {
19
- "$": ["ptc-nav.css"]
20
- }; }
21
- }
1
+ import { Component, Host, h } from '@stencil/core';
2
+ export class PtcNav {
3
+ render() {
4
+ return (h(Host, null,
5
+ h("nav", { class: "nav-style" },
6
+ h("div", { class: "primary-nav", part: "primary-nav-part" },
7
+ h("slot", { name: "primary-nav-content" })),
8
+ h("div", { class: "secondary-nav", part: "secondary-nav-part" },
9
+ h("slot", { name: "secondary-nav-content" })),
10
+ h("div", { class: "language-nav", part: "language-nav-part" },
11
+ h("slot", { name: "language-nav-content" })))));
12
+ }
13
+ static get is() { return "ptc-nav"; }
14
+ static get encapsulation() { return "shadow"; }
15
+ static get originalStyleUrls() { return {
16
+ "$": ["ptc-nav.scss"]
17
+ }; }
18
+ static get styleUrls() { return {
19
+ "$": ["ptc-nav.css"]
20
+ }; }
21
+ }