@ptcwebops/ptcw-design 0.7.4 → 0.7.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 (282) hide show
  1. package/LICENSE +21 -21
  2. package/dist/cjs/dropdown-item.cjs.entry.js +10 -10
  3. package/dist/cjs/icon-asset.cjs.entry.js +54 -54
  4. package/dist/cjs/list-item.cjs.entry.js +19 -19
  5. package/dist/cjs/loader.cjs.js +1 -1
  6. package/dist/cjs/lottie-player.cjs.entry.js +354 -354
  7. package/dist/cjs/my-component.cjs.entry.js +12 -12
  8. package/dist/cjs/ptc-accordion-item.cjs.entry.js +97 -97
  9. package/dist/cjs/ptc-accordion.cjs.entry.js +38 -38
  10. package/dist/cjs/ptc-announcement.cjs.entry.js +63 -38
  11. package/dist/cjs/ptc-breadcrumb.cjs.entry.js +12 -12
  12. package/dist/cjs/ptc-button.cjs.entry.js +65 -65
  13. package/dist/cjs/ptc-card-bottom.cjs.entry.js +31 -31
  14. package/dist/cjs/ptc-card-content.cjs.entry.js +35 -35
  15. package/dist/cjs/ptc-card-plm.cjs.entry.js +16 -16
  16. package/dist/cjs/ptc-card_6.cjs.entry.js +535 -535
  17. package/dist/cjs/ptc-checkbox.cjs.entry.js +31 -31
  18. package/dist/cjs/ptc-collapse-list.cjs.entry.js +335 -335
  19. package/dist/cjs/ptc-container.cjs.entry.js +35 -35
  20. package/dist/cjs/ptc-dropdown.cjs.entry.js +64 -64
  21. package/dist/cjs/ptc-dynamic-card.cjs.entry.js +40 -40
  22. package/dist/cjs/ptc-ellipsis-dropdown.cjs.entry.js +37 -37
  23. package/dist/cjs/ptc-filter-tag.cjs.entry.js +56 -56
  24. package/dist/cjs/ptc-hero-footer-cta.cjs.entry.js +8 -8
  25. package/dist/cjs/ptc-hero.cjs.entry.js +18 -18
  26. package/dist/cjs/ptc-icon-list.cjs.entry.js +32 -32
  27. package/dist/cjs/ptc-icon-minimize.cjs.entry.js +35 -35
  28. package/dist/cjs/ptc-link.cjs.entry.js +42 -42
  29. package/dist/cjs/ptc-list.cjs.entry.js +50 -50
  30. package/dist/cjs/ptc-lottie.cjs.entry.js +12 -12
  31. package/dist/cjs/ptc-minimized-footer.cjs.entry.js +8 -8
  32. package/dist/cjs/ptc-minimized-header.cjs.entry.js +11 -11
  33. package/dist/cjs/ptc-mobile-select.cjs.entry.js +69 -69
  34. package/dist/cjs/ptc-modal.cjs.entry.js +155 -155
  35. package/dist/cjs/ptc-nav-item.cjs.entry.js +83 -83
  36. package/dist/cjs/ptc-nav.cjs.entry.js +8 -8
  37. package/dist/cjs/ptc-overlay.cjs.entry.js +20 -20
  38. package/dist/cjs/ptc-pagenation.cjs.entry.js +105 -105
  39. package/dist/cjs/ptc-previous-url.cjs.entry.js +8 -8
  40. package/dist/cjs/ptc-pricing-block.cjs.entry.js +15 -15
  41. package/dist/cjs/ptc-quote.cjs.entry.js +25 -25
  42. package/dist/cjs/ptc-readmore_2.cjs.entry.js +118 -0
  43. package/dist/cjs/ptc-responsive-wrapper.cjs.entry.js +54 -54
  44. package/dist/cjs/ptc-shopping-cart.cjs.entry.js +49 -49
  45. package/dist/cjs/ptc-social-share.cjs.entry.js +64 -64
  46. package/dist/cjs/ptc-span.cjs.entry.js +23 -23
  47. package/dist/cjs/ptc-svg-btn.cjs.entry.js +75 -75
  48. package/dist/cjs/ptc-tab-list.cjs.entry.js +122 -122
  49. package/dist/cjs/ptc-text-copy-with-background.cjs.entry.js +24 -24
  50. package/dist/cjs/ptc-title.cjs.entry.js +74 -74
  51. package/dist/cjs/ptc-two-column-media.cjs.entry.js +14 -14
  52. package/dist/cjs/ptcw-design.cjs.js +1 -1
  53. package/dist/cjs/tab-content.cjs.entry.js +26 -26
  54. package/dist/cjs/tab-header.cjs.entry.js +43 -43
  55. package/dist/cjs/{utils-2ac2a528.js → utils-5245e89c.js} +79 -79
  56. package/dist/collection/collection-manifest.json +2 -0
  57. package/dist/collection/components/dropdown-item/dropdown-item.js +56 -56
  58. package/dist/collection/components/icon-asset/icon-asset.css +4 -4
  59. package/dist/collection/components/icon-asset/icon-asset.js +217 -217
  60. package/dist/collection/components/icon-asset/media/brands.svg +1381 -1381
  61. package/dist/collection/components/icon-asset/media/designer.svg +379 -368
  62. package/dist/collection/components/icon-asset/media/regular.svg +463 -463
  63. package/dist/collection/components/icon-asset/media/solid.svg +3013 -3013
  64. package/dist/collection/components/icon-asset/media/svg-with-js.min.css +4 -4
  65. package/dist/collection/components/list-item/list-item.js +103 -103
  66. package/dist/collection/components/my-component/my-component.css +3 -3
  67. package/dist/collection/components/my-component/my-component.js +73 -73
  68. package/dist/collection/components/ptc-accordion/ptc-accordion-item/ptc-accordion-item.js +296 -296
  69. package/dist/collection/components/ptc-accordion/ptc-accordion.js +74 -74
  70. package/dist/collection/components/ptc-announcement/ptc-announcement.css +86 -80
  71. package/dist/collection/components/ptc-announcement/ptc-announcement.js +249 -210
  72. package/dist/collection/components/ptc-breadcrumb/ptc-breadcrumb.js +21 -21
  73. package/dist/collection/components/ptc-button/ptc-button.js +293 -293
  74. package/dist/collection/components/ptc-card/ptc-card.css +137 -69
  75. package/dist/collection/components/ptc-card/ptc-card.js +342 -342
  76. package/dist/collection/components/ptc-card-bottom/ptc-card-bottom.js +105 -105
  77. package/dist/collection/components/ptc-card-content/ptc-card-content.js +109 -109
  78. package/dist/collection/components/ptc-card-plm/ptc-card-plm.js +97 -97
  79. package/dist/collection/components/ptc-checkbox/ptc-checkbox.js +114 -114
  80. package/dist/collection/components/ptc-collapse-list/ptc-collapse-list.js +557 -557
  81. package/dist/collection/components/ptc-container/ptc-container.js +119 -119
  82. package/dist/collection/components/ptc-date/ptc-date.js +201 -201
  83. package/dist/collection/components/ptc-dropdown/ptc-dropdown.js +157 -157
  84. package/dist/collection/components/ptc-dynamic-card/ptc-dynamic-card.js +156 -156
  85. package/dist/collection/components/ptc-ellipsis-dropdown/ptc-ellipsis-dropdown.js +115 -115
  86. package/dist/collection/components/ptc-filter-tag/ptc-filter-tag.js +105 -105
  87. package/dist/collection/components/ptc-hero/ptc-hero.js +67 -67
  88. package/dist/collection/components/ptc-hero-footer-cta/ptc-hero-footer-cta.js +77 -77
  89. package/dist/collection/components/ptc-icon-list/ptc-icon-list.js +145 -145
  90. package/dist/collection/components/ptc-icon-minimize/ptc-icon-minimize.js +86 -86
  91. package/dist/collection/components/ptc-img/ptc-img.js +313 -313
  92. package/dist/collection/components/ptc-link/ptc-link.js +198 -198
  93. package/dist/collection/components/ptc-list/ptc-list.js +95 -95
  94. package/dist/collection/components/ptc-lottie/ptc-lottie.css +5 -5
  95. package/dist/collection/components/ptc-lottie/ptc-lottie.js +58 -58
  96. package/dist/collection/components/ptc-minimized-footer/ptc-minimized-footer.js +17 -17
  97. package/dist/collection/components/ptc-minimized-header/ptc-minimized-header.js +80 -80
  98. package/dist/collection/components/ptc-mobile-select/ptc-mobile-select.js +221 -221
  99. package/dist/collection/components/ptc-modal/ptc-modal.js +359 -359
  100. package/dist/collection/components/ptc-nav/ptc-nav.js +21 -21
  101. package/dist/collection/components/ptc-nav-item/ptc-nav-item.js +252 -252
  102. package/dist/collection/components/ptc-overlay/ptc-overlay.js +99 -99
  103. package/dist/collection/components/ptc-pagenation/ptc-pagenation.css +10 -2
  104. package/dist/collection/components/ptc-pagenation/ptc-pagenation.js +317 -317
  105. package/dist/collection/components/ptc-para/ptc-para.js +195 -195
  106. package/dist/collection/components/ptc-picture/ptc-picture.js +473 -473
  107. package/dist/collection/components/ptc-previous-url/ptc-previous-url.js +54 -54
  108. package/dist/collection/components/ptc-pricing-block/ptc-pricing-block.js +45 -45
  109. package/dist/collection/components/ptc-quote/ptc-quote.js +154 -154
  110. package/dist/collection/components/ptc-readmore/ptc-readmore.css +66 -0
  111. package/dist/collection/components/ptc-readmore/ptc-readmore.js +139 -0
  112. package/dist/collection/components/ptc-responsive-wrapper/ptc-responsive-wrapper.css +3 -3
  113. package/dist/collection/components/ptc-responsive-wrapper/ptc-responsive-wrapper.js +62 -62
  114. package/dist/collection/components/ptc-shopping-cart/ptc-shopping-cart.js +91 -91
  115. package/dist/collection/components/ptc-social-share/ptc-social-share.js +206 -206
  116. package/dist/collection/components/ptc-spacer/ptc-spacer.css +322 -322
  117. package/dist/collection/components/ptc-spacer/ptc-spacer.js +99 -99
  118. package/dist/collection/components/ptc-span/ptc-span.js +89 -89
  119. package/dist/collection/components/ptc-svg-btn/ptc-svg-btn.js +71 -71
  120. package/dist/collection/components/ptc-tab-list/ptc-tab-list.js +149 -149
  121. package/dist/collection/components/ptc-text-copy-with-background/ptc-text-copy-with-background.js +129 -129
  122. package/dist/collection/components/ptc-title/ptc-title.css +1 -1
  123. package/dist/collection/components/ptc-title/ptc-title.js +297 -297
  124. package/dist/collection/components/ptc-tooltip/ptc-tooltip.css +112 -0
  125. package/dist/collection/components/ptc-tooltip/ptc-tooltip.js +180 -0
  126. package/dist/collection/components/ptc-two-column-media/ptc-two-column-media.js +40 -40
  127. package/dist/collection/components/tab-content/tab-content.js +74 -74
  128. package/dist/collection/components/tab-header/tab-header.js +106 -106
  129. package/dist/collection/index.js +1 -1
  130. package/dist/collection/media/svg-imgs/Back-arrow.svg +11 -11
  131. package/dist/collection/media/svg-imgs/close.svg +10 -10
  132. package/dist/collection/media/svg-imgs/ptc-shopping-cart-black.svg +3 -3
  133. package/dist/collection/media/svg-imgs/ptc-shopping-cart-white.svg +3 -3
  134. package/dist/collection/media/svg-imgs/slider-arrow-left.svg +18 -18
  135. package/dist/collection/media/svg-imgs/slider-arrow-right.svg +18 -18
  136. package/dist/collection/media/svg-imgs/union.svg +3 -3
  137. package/dist/collection/utils/component.js +3 -3
  138. package/dist/collection/utils/interfaces.js +11 -11
  139. package/dist/collection/utils/utils.js +81 -81
  140. package/dist/custom-elements/index.d.ts +12 -0
  141. package/dist/custom-elements/index.js +3522 -3379
  142. package/dist/esm/dropdown-item.entry.js +10 -10
  143. package/dist/esm/icon-asset.entry.js +54 -54
  144. package/dist/esm/list-item.entry.js +19 -19
  145. package/dist/esm/loader.js +1 -1
  146. package/dist/esm/lottie-player.entry.js +354 -354
  147. package/dist/esm/my-component.entry.js +12 -12
  148. package/dist/esm/polyfills/core-js.js +0 -0
  149. package/dist/esm/polyfills/dom.js +0 -0
  150. package/dist/esm/polyfills/es5-html-element.js +0 -0
  151. package/dist/esm/polyfills/index.js +0 -0
  152. package/dist/esm/polyfills/system.js +0 -0
  153. package/dist/esm/ptc-accordion-item.entry.js +97 -97
  154. package/dist/esm/ptc-accordion.entry.js +38 -38
  155. package/dist/esm/ptc-announcement.entry.js +63 -38
  156. package/dist/esm/ptc-breadcrumb.entry.js +12 -12
  157. package/dist/esm/ptc-button.entry.js +65 -65
  158. package/dist/esm/ptc-card-bottom.entry.js +31 -31
  159. package/dist/esm/ptc-card-content.entry.js +35 -35
  160. package/dist/esm/ptc-card-plm.entry.js +16 -16
  161. package/dist/esm/ptc-card_6.entry.js +535 -535
  162. package/dist/esm/ptc-checkbox.entry.js +31 -31
  163. package/dist/esm/ptc-collapse-list.entry.js +335 -335
  164. package/dist/esm/ptc-container.entry.js +35 -35
  165. package/dist/esm/ptc-dropdown.entry.js +64 -64
  166. package/dist/esm/ptc-dynamic-card.entry.js +40 -40
  167. package/dist/esm/ptc-ellipsis-dropdown.entry.js +37 -37
  168. package/dist/esm/ptc-filter-tag.entry.js +56 -56
  169. package/dist/esm/ptc-hero-footer-cta.entry.js +8 -8
  170. package/dist/esm/ptc-hero.entry.js +18 -18
  171. package/dist/esm/ptc-icon-list.entry.js +32 -32
  172. package/dist/esm/ptc-icon-minimize.entry.js +35 -35
  173. package/dist/esm/ptc-link.entry.js +42 -42
  174. package/dist/esm/ptc-list.entry.js +50 -50
  175. package/dist/esm/ptc-lottie.entry.js +12 -12
  176. package/dist/esm/ptc-minimized-footer.entry.js +8 -8
  177. package/dist/esm/ptc-minimized-header.entry.js +11 -11
  178. package/dist/esm/ptc-mobile-select.entry.js +69 -69
  179. package/dist/esm/ptc-modal.entry.js +155 -155
  180. package/dist/esm/ptc-nav-item.entry.js +83 -83
  181. package/dist/esm/ptc-nav.entry.js +8 -8
  182. package/dist/esm/ptc-overlay.entry.js +20 -20
  183. package/dist/esm/ptc-pagenation.entry.js +105 -105
  184. package/dist/esm/ptc-previous-url.entry.js +8 -8
  185. package/dist/esm/ptc-pricing-block.entry.js +15 -15
  186. package/dist/esm/ptc-quote.entry.js +25 -25
  187. package/dist/esm/ptc-readmore_2.entry.js +113 -0
  188. package/dist/esm/ptc-responsive-wrapper.entry.js +54 -54
  189. package/dist/esm/ptc-shopping-cart.entry.js +49 -49
  190. package/dist/esm/ptc-social-share.entry.js +64 -64
  191. package/dist/esm/ptc-span.entry.js +23 -23
  192. package/dist/esm/ptc-svg-btn.entry.js +75 -75
  193. package/dist/esm/ptc-tab-list.entry.js +122 -122
  194. package/dist/esm/ptc-text-copy-with-background.entry.js +24 -24
  195. package/dist/esm/ptc-title.entry.js +74 -74
  196. package/dist/esm/ptc-two-column-media.entry.js +14 -14
  197. package/dist/esm/ptcw-design.js +1 -1
  198. package/dist/esm/tab-content.entry.js +26 -26
  199. package/dist/esm/tab-header.entry.js +43 -43
  200. package/dist/esm/{utils-2dbb41dc.js → utils-646cc62f.js} +79 -79
  201. package/dist/ptcw-design/media/brands.svg +1381 -1381
  202. package/dist/ptcw-design/media/designer.svg +379 -368
  203. package/dist/ptcw-design/media/regular.svg +463 -463
  204. package/dist/ptcw-design/media/solid.svg +3013 -3013
  205. package/dist/ptcw-design/media/svg-with-js.min.css +4 -4
  206. package/dist/ptcw-design/p-1743d0ef.entry.js +1 -0
  207. package/dist/ptcw-design/{p-10f6d8ae.entry.js → p-2de688ba.entry.js} +1 -1
  208. package/dist/ptcw-design/p-2f6ecdf8.entry.js +1 -0
  209. package/dist/ptcw-design/p-3b87cd6f.entry.js +1 -0
  210. package/dist/ptcw-design/p-493b2571.entry.js +1 -0
  211. package/dist/ptcw-design/{p-bb4485e3.entry.js → p-87f9430f.entry.js} +1 -1
  212. package/dist/ptcw-design/p-8e2e81c8.entry.js +1 -0
  213. package/dist/ptcw-design/ptcw-design.esm.js +1 -1
  214. package/dist/types/components/dropdown-item/dropdown-item.d.ts +5 -5
  215. package/dist/types/components/icon-asset/icon-asset.d.ts +40 -40
  216. package/dist/types/components/list-item/list-item.d.ts +8 -8
  217. package/dist/types/components/my-component/my-component.d.ts +16 -16
  218. package/dist/types/components/ptc-accordion/ptc-accordion-item/ptc-accordion-item.d.ts +59 -59
  219. package/dist/types/components/ptc-accordion/ptc-accordion.d.ts +13 -13
  220. package/dist/types/components/ptc-announcement/ptc-announcement.d.ts +51 -43
  221. package/dist/types/components/ptc-breadcrumb/ptc-breadcrumb.d.ts +4 -4
  222. package/dist/types/components/ptc-button/ptc-button.d.ts +56 -56
  223. package/dist/types/components/ptc-card/ptc-card.d.ts +62 -62
  224. package/dist/types/components/ptc-card-bottom/ptc-card-bottom.d.ts +15 -15
  225. package/dist/types/components/ptc-card-content/ptc-card-content.d.ts +15 -15
  226. package/dist/types/components/ptc-card-plm/ptc-card-plm.d.ts +8 -8
  227. package/dist/types/components/ptc-checkbox/ptc-checkbox.d.ts +11 -11
  228. package/dist/types/components/ptc-collapse-list/ptc-collapse-list.d.ts +56 -56
  229. package/dist/types/components/ptc-container/ptc-container.d.ts +12 -12
  230. package/dist/types/components/ptc-date/ptc-date.d.ts +41 -41
  231. package/dist/types/components/ptc-dropdown/ptc-dropdown.d.ts +19 -19
  232. package/dist/types/components/ptc-dynamic-card/ptc-dynamic-card.d.ts +16 -16
  233. package/dist/types/components/ptc-ellipsis-dropdown/ptc-ellipsis-dropdown.d.ts +12 -12
  234. package/dist/types/components/ptc-filter-tag/ptc-filter-tag.d.ts +17 -17
  235. package/dist/types/components/ptc-hero/ptc-hero.d.ts +12 -12
  236. package/dist/types/components/ptc-hero-footer-cta/ptc-hero-footer-cta.d.ts +6 -6
  237. package/dist/types/components/ptc-icon-list/ptc-icon-list.d.ts +21 -21
  238. package/dist/types/components/ptc-icon-minimize/ptc-icon-minimize.d.ts +9 -9
  239. package/dist/types/components/ptc-img/ptc-img.d.ts +51 -51
  240. package/dist/types/components/ptc-link/ptc-link.d.ts +36 -36
  241. package/dist/types/components/ptc-list/ptc-list.d.ts +8 -8
  242. package/dist/types/components/ptc-lottie/ptc-lottie.d.ts +12 -12
  243. package/dist/types/components/ptc-minimized-footer/ptc-minimized-footer.d.ts +3 -3
  244. package/dist/types/components/ptc-minimized-header/ptc-minimized-header.d.ts +6 -6
  245. package/dist/types/components/ptc-mobile-select/ptc-mobile-select.d.ts +40 -40
  246. package/dist/types/components/ptc-modal/ptc-modal.d.ts +59 -59
  247. package/dist/types/components/ptc-nav/ptc-nav.d.ts +3 -3
  248. package/dist/types/components/ptc-nav-item/ptc-nav-item.d.ts +53 -53
  249. package/dist/types/components/ptc-overlay/ptc-overlay.d.ts +20 -20
  250. package/dist/types/components/ptc-pagenation/ptc-pagenation.d.ts +27 -27
  251. package/dist/types/components/ptc-para/ptc-para.d.ts +34 -34
  252. package/dist/types/components/ptc-picture/ptc-picture.d.ts +93 -93
  253. package/dist/types/components/ptc-previous-url/ptc-previous-url.d.ts +5 -5
  254. package/dist/types/components/ptc-pricing-block/ptc-pricing-block.d.ts +5 -5
  255. package/dist/types/components/ptc-quote/ptc-quote.d.ts +29 -29
  256. package/dist/types/components/ptc-readmore/ptc-readmore.d.ts +27 -0
  257. package/dist/types/components/ptc-responsive-wrapper/ptc-responsive-wrapper.d.ts +8 -8
  258. package/dist/types/components/ptc-shopping-cart/ptc-shopping-cart.d.ts +6 -6
  259. package/dist/types/components/ptc-social-share/ptc-social-share.d.ts +25 -25
  260. package/dist/types/components/ptc-spacer/ptc-spacer.d.ts +16 -16
  261. package/dist/types/components/ptc-span/ptc-span.d.ts +16 -16
  262. package/dist/types/components/ptc-svg-btn/ptc-svg-btn.d.ts +12 -12
  263. package/dist/types/components/ptc-tab-list/ptc-tab-list.d.ts +15 -15
  264. package/dist/types/components/ptc-text-copy-with-background/ptc-text-copy-with-background.d.ts +25 -25
  265. package/dist/types/components/ptc-title/ptc-title.d.ts +50 -50
  266. package/dist/types/components/ptc-tooltip/ptc-tooltip.d.ts +34 -0
  267. package/dist/types/components/ptc-two-column-media/ptc-two-column-media.d.ts +9 -9
  268. package/dist/types/components/tab-content/tab-content.d.ts +12 -12
  269. package/dist/types/components/tab-header/tab-header.d.ts +13 -13
  270. package/dist/types/components.d.ts +144 -38
  271. package/dist/types/global.d.ts +1072 -1072
  272. package/dist/types/index.d.ts +1 -1
  273. package/dist/types/utils/component.d.ts +1 -1
  274. package/dist/types/utils/interfaces.d.ts +31 -31
  275. package/dist/types/utils/utils.d.ts +4 -4
  276. package/package.json +60 -59
  277. package/readme.md +11 -11
  278. package/dist/ptcw-design/p-21a381bd.entry.js +0 -1
  279. package/dist/ptcw-design/p-7f044112.entry.js +0 -1
  280. package/dist/ptcw-design/p-b1bfc20f.entry.js +0 -1
  281. package/dist/ptcw-design/p-c26e343e.entry.js +0 -1
  282. /package/dist/ptcw-design/{p-5e98555a.js → p-e121ff2a.js} +0 -0
@@ -1,206 +1,206 @@
1
- import { Component, Host, h, Prop, Element, State } from '@stencil/core';
2
- export class PtcSocialShare {
3
- constructor() {
4
- this.display = 'inline-block';
5
- this.shareType = 'twitter';
6
- /**
7
- * Optional - source for linkedin
8
- */
9
- this.source = '';
10
- /**
11
- * Email recipient.
12
- * If you want to use mail share, you need to use this property
13
- */
14
- this.recipient = '';
15
- /**
16
- * is hover or not
17
- */
18
- this.isHover = false;
19
- }
20
- render() {
21
- const classMap = this.getCssClassMap();
22
- return (h(Host, { class: classMap },
23
- h("div", { onClick: () => this.share(), onMouseEnter: () => this.hoverToggle(), onMouseLeave: () => this.hoverToggle() },
24
- this.shareType == 'mail' ? h("icon-asset", Object.assign({ type: "ptc", size: "large", name: "plm-mail" }, (this.isHover ? { color: 'gray' } : { color: 'white' }))) : null,
25
- this.shareType == 'linkedin' ? h("icon-asset", Object.assign({ type: "ptc", size: "large", name: "plm-linkedin" }, (this.isHover ? { color: 'gray' } : { color: 'white' }))) : null,
26
- this.shareType == 'twitter' ? h("icon-asset", Object.assign({ type: "ptc", size: "large", name: "plm-twitter" }, (this.isHover ? { color: 'gray' } : { color: 'white' }))) : null,
27
- this.shareType == 'facebook' ? h("icon-asset", Object.assign({ type: "ptc", size: "large", name: "plm-fb" }, (this.isHover ? { color: 'gray' } : { color: 'white' }))) : null,
28
- this.shareType == 'share-api' ? h("icon-asset", Object.assign({ type: "solid", size: "large", name: "share-square" }, (this.isHover ? { color: 'gray' } : { color: 'white' }))) : null)));
29
- }
30
- getCssClassMap() {
31
- return {
32
- ['ptc-social-share']: true,
33
- [this.display]: true,
34
- };
35
- }
36
- hoverToggle() {
37
- this.isHover = !this.isHover;
38
- }
39
- share() {
40
- if (this.shareType == 'twitter') {
41
- window.open(`https://twitter.com/share?text=${this.text}&url=${this.url}`);
42
- }
43
- if (this.shareType == 'facebook') {
44
- window.open(`https://www.facebook.com/sharer/sharer.php?u=${this.url}`);
45
- }
46
- if (this.shareType == 'linkedin') {
47
- window.open(`https://www.linkedin.com/shareArticle?mini=true&url=${this.url}&title=${this.shareTitle}&summary=${this.text}&source=${this.source}`);
48
- }
49
- if (this.shareType == 'mail') {
50
- window.open(`mailto:${this.recipient}?subject=${this.text}&body=${this.url}`);
51
- }
52
- if (this.shareType == 'share-api') {
53
- if (navigator.share) {
54
- navigator
55
- .share({
56
- title: this.shareTitle,
57
- text: this.text,
58
- url: this.url,
59
- })
60
- .then(() => console.log('Successful share'))
61
- .catch(error => console.log('Error sharing', error));
62
- }
63
- else {
64
- // fallback to sharing to twitter
65
- window.open(`http://twitter.com/share?text=${this.text}&url=${this.url}`);
66
- }
67
- }
68
- }
69
- static get is() { return "ptc-social-share"; }
70
- static get encapsulation() { return "shadow"; }
71
- static get originalStyleUrls() { return {
72
- "$": ["ptc-social-share.scss"]
73
- }; }
74
- static get styleUrls() { return {
75
- "$": ["ptc-social-share.css"]
76
- }; }
77
- static get properties() { return {
78
- "display": {
79
- "type": "string",
80
- "mutable": false,
81
- "complexType": {
82
- "original": "'inline-block' | 'block' | 'inline' | 'flex'",
83
- "resolved": "\"block\" | \"flex\" | \"inline\" | \"inline-block\"",
84
- "references": {}
85
- },
86
- "required": false,
87
- "optional": true,
88
- "docs": {
89
- "tags": [],
90
- "text": ""
91
- },
92
- "attribute": "display",
93
- "reflect": false,
94
- "defaultValue": "'inline-block'"
95
- },
96
- "shareType": {
97
- "type": "string",
98
- "mutable": false,
99
- "complexType": {
100
- "original": "'mail' | 'twitter' | 'linkedin' | 'facebook' | 'share-api'",
101
- "resolved": "\"facebook\" | \"linkedin\" | \"mail\" | \"share-api\" | \"twitter\"",
102
- "references": {}
103
- },
104
- "required": false,
105
- "optional": true,
106
- "docs": {
107
- "tags": [],
108
- "text": ""
109
- },
110
- "attribute": "share-type",
111
- "reflect": false,
112
- "defaultValue": "'twitter'"
113
- },
114
- "shareTitle": {
115
- "type": "string",
116
- "mutable": false,
117
- "complexType": {
118
- "original": "string",
119
- "resolved": "string",
120
- "references": {}
121
- },
122
- "required": false,
123
- "optional": false,
124
- "docs": {
125
- "tags": [],
126
- "text": ""
127
- },
128
- "attribute": "share-title",
129
- "reflect": false
130
- },
131
- "text": {
132
- "type": "string",
133
- "mutable": false,
134
- "complexType": {
135
- "original": "string",
136
- "resolved": "string",
137
- "references": {}
138
- },
139
- "required": false,
140
- "optional": false,
141
- "docs": {
142
- "tags": [],
143
- "text": ""
144
- },
145
- "attribute": "text",
146
- "reflect": false
147
- },
148
- "url": {
149
- "type": "string",
150
- "mutable": false,
151
- "complexType": {
152
- "original": "string",
153
- "resolved": "string",
154
- "references": {}
155
- },
156
- "required": false,
157
- "optional": false,
158
- "docs": {
159
- "tags": [],
160
- "text": ""
161
- },
162
- "attribute": "url",
163
- "reflect": false
164
- },
165
- "source": {
166
- "type": "string",
167
- "mutable": false,
168
- "complexType": {
169
- "original": "string",
170
- "resolved": "string",
171
- "references": {}
172
- },
173
- "required": false,
174
- "optional": true,
175
- "docs": {
176
- "tags": [],
177
- "text": "Optional - source for linkedin"
178
- },
179
- "attribute": "source",
180
- "reflect": false,
181
- "defaultValue": "''"
182
- },
183
- "recipient": {
184
- "type": "string",
185
- "mutable": false,
186
- "complexType": {
187
- "original": "string",
188
- "resolved": "string",
189
- "references": {}
190
- },
191
- "required": false,
192
- "optional": true,
193
- "docs": {
194
- "tags": [],
195
- "text": "Email recipient.\nIf you want to use mail share, you need to use this property"
196
- },
197
- "attribute": "recipient",
198
- "reflect": false,
199
- "defaultValue": "''"
200
- }
201
- }; }
202
- static get states() { return {
203
- "isHover": {}
204
- }; }
205
- static get elementRef() { return "el"; }
206
- }
1
+ import { Component, Host, h, Prop, Element, State } from '@stencil/core';
2
+ export class PtcSocialShare {
3
+ constructor() {
4
+ this.display = 'inline-block';
5
+ this.shareType = 'twitter';
6
+ /**
7
+ * Optional - source for linkedin
8
+ */
9
+ this.source = '';
10
+ /**
11
+ * Email recipient.
12
+ * If you want to use mail share, you need to use this property
13
+ */
14
+ this.recipient = '';
15
+ /**
16
+ * is hover or not
17
+ */
18
+ this.isHover = false;
19
+ }
20
+ render() {
21
+ const classMap = this.getCssClassMap();
22
+ return (h(Host, { class: classMap },
23
+ h("div", { onClick: () => this.share(), onMouseEnter: () => this.hoverToggle(), onMouseLeave: () => this.hoverToggle() },
24
+ this.shareType == 'mail' ? h("icon-asset", Object.assign({ type: "ptc", size: "large", name: "plm-mail" }, (this.isHover ? { color: 'gray' } : { color: 'white' }))) : null,
25
+ this.shareType == 'linkedin' ? h("icon-asset", Object.assign({ type: "ptc", size: "large", name: "plm-linkedin" }, (this.isHover ? { color: 'gray' } : { color: 'white' }))) : null,
26
+ this.shareType == 'twitter' ? h("icon-asset", Object.assign({ type: "ptc", size: "large", name: "plm-twitter" }, (this.isHover ? { color: 'gray' } : { color: 'white' }))) : null,
27
+ this.shareType == 'facebook' ? h("icon-asset", Object.assign({ type: "ptc", size: "large", name: "plm-fb" }, (this.isHover ? { color: 'gray' } : { color: 'white' }))) : null,
28
+ this.shareType == 'share-api' ? h("icon-asset", Object.assign({ type: "solid", size: "large", name: "share-square" }, (this.isHover ? { color: 'gray' } : { color: 'white' }))) : null)));
29
+ }
30
+ getCssClassMap() {
31
+ return {
32
+ ['ptc-social-share']: true,
33
+ [this.display]: true,
34
+ };
35
+ }
36
+ hoverToggle() {
37
+ this.isHover = !this.isHover;
38
+ }
39
+ share() {
40
+ if (this.shareType == 'twitter') {
41
+ window.open(`https://twitter.com/share?text=${this.text}&url=${this.url}`);
42
+ }
43
+ if (this.shareType == 'facebook') {
44
+ window.open(`https://www.facebook.com/sharer/sharer.php?u=${this.url}`);
45
+ }
46
+ if (this.shareType == 'linkedin') {
47
+ window.open(`https://www.linkedin.com/shareArticle?mini=true&url=${this.url}&title=${this.shareTitle}&summary=${this.text}&source=${this.source}`);
48
+ }
49
+ if (this.shareType == 'mail') {
50
+ window.open(`mailto:${this.recipient}?subject=${this.text}&body=${this.url}`);
51
+ }
52
+ if (this.shareType == 'share-api') {
53
+ if (navigator.share) {
54
+ navigator
55
+ .share({
56
+ title: this.shareTitle,
57
+ text: this.text,
58
+ url: this.url,
59
+ })
60
+ .then(() => console.log('Successful share'))
61
+ .catch(error => console.log('Error sharing', error));
62
+ }
63
+ else {
64
+ // fallback to sharing to twitter
65
+ window.open(`http://twitter.com/share?text=${this.text}&url=${this.url}`);
66
+ }
67
+ }
68
+ }
69
+ static get is() { return "ptc-social-share"; }
70
+ static get encapsulation() { return "shadow"; }
71
+ static get originalStyleUrls() { return {
72
+ "$": ["ptc-social-share.scss"]
73
+ }; }
74
+ static get styleUrls() { return {
75
+ "$": ["ptc-social-share.css"]
76
+ }; }
77
+ static get properties() { return {
78
+ "display": {
79
+ "type": "string",
80
+ "mutable": false,
81
+ "complexType": {
82
+ "original": "'inline-block' | 'block' | 'inline' | 'flex'",
83
+ "resolved": "\"block\" | \"flex\" | \"inline\" | \"inline-block\"",
84
+ "references": {}
85
+ },
86
+ "required": false,
87
+ "optional": true,
88
+ "docs": {
89
+ "tags": [],
90
+ "text": ""
91
+ },
92
+ "attribute": "display",
93
+ "reflect": false,
94
+ "defaultValue": "'inline-block'"
95
+ },
96
+ "shareType": {
97
+ "type": "string",
98
+ "mutable": false,
99
+ "complexType": {
100
+ "original": "'mail' | 'twitter' | 'linkedin' | 'facebook' | 'share-api'",
101
+ "resolved": "\"facebook\" | \"linkedin\" | \"mail\" | \"share-api\" | \"twitter\"",
102
+ "references": {}
103
+ },
104
+ "required": false,
105
+ "optional": true,
106
+ "docs": {
107
+ "tags": [],
108
+ "text": ""
109
+ },
110
+ "attribute": "share-type",
111
+ "reflect": false,
112
+ "defaultValue": "'twitter'"
113
+ },
114
+ "shareTitle": {
115
+ "type": "string",
116
+ "mutable": false,
117
+ "complexType": {
118
+ "original": "string",
119
+ "resolved": "string",
120
+ "references": {}
121
+ },
122
+ "required": false,
123
+ "optional": false,
124
+ "docs": {
125
+ "tags": [],
126
+ "text": ""
127
+ },
128
+ "attribute": "share-title",
129
+ "reflect": false
130
+ },
131
+ "text": {
132
+ "type": "string",
133
+ "mutable": false,
134
+ "complexType": {
135
+ "original": "string",
136
+ "resolved": "string",
137
+ "references": {}
138
+ },
139
+ "required": false,
140
+ "optional": false,
141
+ "docs": {
142
+ "tags": [],
143
+ "text": ""
144
+ },
145
+ "attribute": "text",
146
+ "reflect": false
147
+ },
148
+ "url": {
149
+ "type": "string",
150
+ "mutable": false,
151
+ "complexType": {
152
+ "original": "string",
153
+ "resolved": "string",
154
+ "references": {}
155
+ },
156
+ "required": false,
157
+ "optional": false,
158
+ "docs": {
159
+ "tags": [],
160
+ "text": ""
161
+ },
162
+ "attribute": "url",
163
+ "reflect": false
164
+ },
165
+ "source": {
166
+ "type": "string",
167
+ "mutable": false,
168
+ "complexType": {
169
+ "original": "string",
170
+ "resolved": "string",
171
+ "references": {}
172
+ },
173
+ "required": false,
174
+ "optional": true,
175
+ "docs": {
176
+ "tags": [],
177
+ "text": "Optional - source for linkedin"
178
+ },
179
+ "attribute": "source",
180
+ "reflect": false,
181
+ "defaultValue": "''"
182
+ },
183
+ "recipient": {
184
+ "type": "string",
185
+ "mutable": false,
186
+ "complexType": {
187
+ "original": "string",
188
+ "resolved": "string",
189
+ "references": {}
190
+ },
191
+ "required": false,
192
+ "optional": true,
193
+ "docs": {
194
+ "tags": [],
195
+ "text": "Email recipient.\r\nIf you want to use mail share, you need to use this property"
196
+ },
197
+ "attribute": "recipient",
198
+ "reflect": false,
199
+ "defaultValue": "''"
200
+ }
201
+ }; }
202
+ static get states() { return {
203
+ "isHover": {}
204
+ }; }
205
+ static get elementRef() { return "el"; }
206
+ }