@ptcwebops/ptcw-design 6.3.9 → 6.3.10-beta

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 (185) hide show
  1. package/dist/cjs/{component-35540bfb.js → component-6a178a16.js} +2643 -832
  2. package/dist/cjs/event-jumbotron-example.cjs.entry.js +3 -36
  3. package/dist/cjs/featured-list.cjs.entry.js +1 -1
  4. package/dist/cjs/innovator-toggle-container.cjs.entry.js +1 -1
  5. package/dist/cjs/loader.cjs.js +1 -1
  6. package/dist/cjs/modal-form-example.cjs.entry.js +94 -0
  7. package/dist/cjs/ptc-bio-card.cjs.entry.js +1 -1
  8. package/dist/cjs/ptc-card_2.cjs.entry.js +4 -3
  9. package/dist/cjs/ptc-case-studies-slider.cjs.entry.js +1 -1
  10. package/dist/cjs/ptc-close-icon_2.cjs.entry.js +28 -27
  11. package/dist/cjs/ptc-countdown.cjs.entry.js +18 -20
  12. package/dist/cjs/ptc-data-lookup.cjs.entry.js +1 -2
  13. package/dist/cjs/ptc-featured-list.cjs.entry.js +1 -1
  14. package/dist/cjs/ptc-filter-level-theater.cjs.entry.js +1 -1
  15. package/dist/cjs/{ptc-form-checkbox_2.cjs.entry.js → ptc-form-checkbox_4.cjs.entry.js} +789 -5
  16. package/dist/cjs/ptc-jumbotron.cjs.entry.js +2 -3
  17. package/dist/cjs/ptc-mobile-select.cjs.entry.js +10 -1
  18. package/dist/cjs/ptc-office-locations.cjs.entry.js +3 -13
  19. package/dist/cjs/ptc-para.cjs.entry.js +1 -1
  20. package/dist/cjs/ptc-podcast-card.cjs.entry.js +1 -1
  21. package/dist/cjs/ptc-previous-url.cjs.entry.js +10 -2
  22. package/dist/cjs/ptc-product-card.cjs.entry.js +1 -1
  23. package/dist/cjs/ptc-product-category.cjs.entry.js +1 -1
  24. package/dist/cjs/ptc-product-highlight-card.cjs.entry.js +1 -1
  25. package/dist/cjs/ptc-readmore-char.cjs.entry.js +1 -1
  26. package/dist/cjs/ptc-readmore-v3.cjs.entry.js +1 -1
  27. package/dist/cjs/ptc-tooltip-v2.cjs.entry.js +1 -1
  28. package/dist/cjs/ptc-value-led-layout.cjs.entry.js +1 -3
  29. package/dist/cjs/ptc-value-led-speed-bump.cjs.entry.js +1 -1
  30. package/dist/cjs/ptc-white-paper.cjs.entry.js +10 -10
  31. package/dist/cjs/ptcw-design.cjs.js +1 -1
  32. package/dist/collection/collection-manifest.json +1 -1
  33. package/dist/collection/components/icon-asset/media/designer-v6.0.6.svg +30 -2
  34. package/dist/collection/components/innovator-toggle-container/innovator-toggle-container.css +6 -6
  35. package/dist/collection/components/organism-bundles/bundle-featured-list/featured-list.css +3 -3
  36. package/dist/collection/components/organism-bundles/event-jumbotron-example/event-jumbotron-example.css +4 -8
  37. package/dist/collection/components/organism-bundles/event-jumbotron-example/event-jumbotron-example.js +2 -35
  38. package/dist/collection/components/organism-bundles/form/modal-from-example/modal-form-example.css +26 -0
  39. package/dist/collection/components/organism-bundles/form/modal-from-example/modal-form-example.js +99 -0
  40. package/dist/collection/components/ptc-bio-card/ptc-bio-card.css +6 -6
  41. package/dist/collection/components/ptc-case-studies-slider/ptc-case-studies-slider.css +6 -6
  42. package/dist/collection/components/ptc-countdown/ptc-countdown.css +1 -1
  43. package/dist/collection/components/ptc-countdown/ptc-countdown.js +17 -19
  44. package/dist/collection/components/ptc-featured-list/ptc-featured-list.css +6 -6
  45. package/dist/collection/components/ptc-filter-level-theater/ptc-filter-level-theater.css +6 -6
  46. package/dist/collection/components/ptc-jumbotron/ptc-jumbotron.css +6 -24
  47. package/dist/collection/components/ptc-jumbotron/ptc-jumbotron.js +1 -20
  48. package/dist/collection/components/ptc-mobile-select/ptc-mobile-select.js +11 -2
  49. package/dist/collection/components/ptc-modal/ptc-modal.css +8 -4
  50. package/dist/collection/components/ptc-modal/ptc-modal.js +47 -28
  51. package/dist/collection/components/ptc-office-locations/ptc-office-locations.js +4 -15
  52. package/dist/collection/components/ptc-para/ptc-para.css +3 -0
  53. package/dist/collection/components/ptc-para/ptc-para.js +2 -2
  54. package/dist/collection/components/ptc-podcast-card/ptc-podcast-card.css +6 -6
  55. package/dist/collection/components/ptc-preloader-section/ptc-preloader-section.js +4 -3
  56. package/dist/collection/components/ptc-previous-url/ptc-previous-url.css +16 -0
  57. package/dist/collection/components/ptc-previous-url/ptc-previous-url.js +27 -1
  58. package/dist/collection/components/ptc-product-card/ptc-product-card.css +6 -6
  59. package/dist/collection/components/ptc-product-category/ptc-product-category.css +6 -6
  60. package/dist/collection/components/ptc-product-highlight-card/ptc-product-highlight-card.css +6 -6
  61. package/dist/collection/components/ptc-readmore-char/ptc-readmore-char.css +6 -6
  62. package/dist/collection/components/ptc-readmore-v3/ptc-readmore-v3.css +6 -6
  63. package/dist/collection/components/ptc-textfield/ptc-textfield.js +1 -1
  64. package/dist/collection/components/ptc-tooltip-v2/ptc-tooltip-v2.css +6 -6
  65. package/dist/collection/components/ptc-value-led-layout/ptc-value-led-layout.js +1 -3
  66. package/dist/collection/components/ptc-value-led-speed-bump/ptc-value-led-speed-bump.css +6 -6
  67. package/dist/collection/components/ptc-white-paper/ptc-white-paper.css +6 -6
  68. package/dist/collection/components/ptc-white-paper/ptc-white-paper.js +9 -9
  69. package/dist/collection/stories/BackgroundImage.stories.js +42 -20
  70. package/dist/collection/stories/MobileSelect.stories.js +21 -11
  71. package/dist/collection/stories/organisms/eSupport/CaseTracker/preview.stories.js +45 -0
  72. package/dist/collection/stories/organisms/eSupport/SupportArticle/preview.stories.js +47 -0
  73. package/dist/collection/stories/organisms/eSupport/SupportPage/preview.stories.js +157 -0
  74. package/dist/custom-elements/index.d.ts +6 -6
  75. package/dist/custom-elements/index.js +200 -213
  76. package/dist/esm/{component-8c53e377.js → component-80f298b4.js} +2592 -793
  77. package/dist/esm/event-jumbotron-example.entry.js +3 -36
  78. package/dist/esm/featured-list.entry.js +1 -1
  79. package/dist/esm/innovator-toggle-container.entry.js +1 -1
  80. package/dist/esm/loader.js +1 -1
  81. package/dist/esm/modal-form-example.entry.js +90 -0
  82. package/dist/esm/ptc-bio-card.entry.js +1 -1
  83. package/dist/esm/ptc-card_2.entry.js +4 -3
  84. package/dist/esm/ptc-case-studies-slider.entry.js +1 -1
  85. package/dist/esm/ptc-close-icon_2.entry.js +28 -27
  86. package/dist/esm/ptc-countdown.entry.js +18 -20
  87. package/dist/esm/ptc-data-lookup.entry.js +1 -2
  88. package/dist/esm/ptc-featured-list.entry.js +1 -1
  89. package/dist/esm/ptc-filter-level-theater.entry.js +1 -1
  90. package/dist/esm/{ptc-form-checkbox_2.entry.js → ptc-form-checkbox_4.entry.js} +786 -4
  91. package/dist/esm/ptc-jumbotron.entry.js +2 -3
  92. package/dist/esm/ptc-mobile-select.entry.js +10 -1
  93. package/dist/esm/ptc-office-locations.entry.js +3 -13
  94. package/dist/esm/ptc-para.entry.js +1 -1
  95. package/dist/esm/ptc-podcast-card.entry.js +1 -1
  96. package/dist/esm/ptc-previous-url.entry.js +10 -2
  97. package/dist/esm/ptc-product-card.entry.js +1 -1
  98. package/dist/esm/ptc-product-category.entry.js +1 -1
  99. package/dist/esm/ptc-product-highlight-card.entry.js +1 -1
  100. package/dist/esm/ptc-readmore-char.entry.js +1 -1
  101. package/dist/esm/ptc-readmore-v3.entry.js +1 -1
  102. package/dist/esm/ptc-tooltip-v2.entry.js +1 -1
  103. package/dist/esm/ptc-value-led-layout.entry.js +1 -3
  104. package/dist/esm/ptc-value-led-speed-bump.entry.js +1 -1
  105. package/dist/esm/ptc-white-paper.entry.js +11 -11
  106. package/dist/esm/ptcw-design.js +1 -1
  107. package/dist/ptcw-design/media/designer-v6.0.6.svg +30 -2
  108. package/dist/ptcw-design/p-072a76d3.entry.js +1 -0
  109. package/dist/ptcw-design/{p-7fb155da.entry.js → p-072aa896.entry.js} +1 -1
  110. package/dist/ptcw-design/{p-a791c53a.entry.js → p-0b515839.entry.js} +1 -1
  111. package/dist/ptcw-design/p-0d223232.entry.js +1 -0
  112. package/dist/ptcw-design/{p-75988f52.entry.js → p-0de4cd11.entry.js} +1 -1
  113. package/dist/ptcw-design/{p-9f194554.entry.js → p-21aa746d.entry.js} +1 -1
  114. package/dist/ptcw-design/p-291072b4.entry.js +1 -0
  115. package/dist/ptcw-design/p-32f64f48.entry.js +1 -0
  116. package/dist/ptcw-design/{p-d089dc37.entry.js → p-3dd0ded9.entry.js} +1 -1
  117. package/dist/ptcw-design/p-3f68e2f2.entry.js +1 -0
  118. package/dist/ptcw-design/p-42992202.entry.js +1 -0
  119. package/dist/ptcw-design/{p-4d8f6f46.entry.js → p-445329ed.entry.js} +1 -1
  120. package/dist/ptcw-design/p-52e6613f.entry.js +1 -0
  121. package/dist/ptcw-design/p-672a349f.js +336 -0
  122. package/dist/ptcw-design/p-67c248ec.entry.js +1 -0
  123. package/dist/ptcw-design/p-72825cf6.entry.js +1 -0
  124. package/dist/ptcw-design/p-75390f63.entry.js +1 -0
  125. package/dist/ptcw-design/p-799afee5.entry.js +1 -0
  126. package/dist/ptcw-design/{p-6aa9ed95.entry.js → p-867a808f.entry.js} +1 -1
  127. package/dist/ptcw-design/p-94f99d2d.entry.js +1 -0
  128. package/dist/ptcw-design/p-9501995f.entry.js +1 -0
  129. package/dist/ptcw-design/p-baff4d44.entry.js +1 -0
  130. package/dist/ptcw-design/p-bd6af63e.entry.js +1 -0
  131. package/dist/ptcw-design/p-d0581b07.entry.js +68 -0
  132. package/dist/ptcw-design/{p-18ac526f.entry.js → p-d73cc053.entry.js} +1 -1
  133. package/dist/ptcw-design/p-de960790.entry.js +1 -0
  134. package/dist/ptcw-design/p-e6a272d9.entry.js +1 -0
  135. package/dist/ptcw-design/p-f4eb6d0a.entry.js +1 -0
  136. package/dist/ptcw-design/p-fe40421e.entry.js +1 -0
  137. package/dist/ptcw-design/ptcw-design.css +2 -2
  138. package/dist/ptcw-design/ptcw-design.esm.js +1 -1
  139. package/dist/types/components/organism-bundles/event-jumbotron-example/event-jumbotron-example.d.ts +0 -2
  140. package/dist/types/components/organism-bundles/form/modal-from-example/modal-form-example.d.ts +25 -0
  141. package/dist/types/components/ptc-jumbotron/ptc-jumbotron.d.ts +0 -1
  142. package/dist/types/components/ptc-mobile-select/ptc-mobile-select.d.ts +1 -1
  143. package/dist/types/components/ptc-modal/ptc-modal.d.ts +3 -1
  144. package/dist/types/components/ptc-office-locations/ptc-office-locations.d.ts +0 -1
  145. package/dist/types/components/ptc-para/ptc-para.d.ts +1 -1
  146. package/dist/types/components/ptc-previous-url/ptc-previous-url.d.ts +2 -0
  147. package/dist/types/components/ptc-white-paper/ptc-white-paper.d.ts +1 -0
  148. package/dist/types/components.d.ts +23 -21
  149. package/package.json +1 -1
  150. package/readme.md +5 -1
  151. package/dist/cjs/component-1b8ad4d2.js +0 -1819
  152. package/dist/cjs/ptc-icon-card-slider-example.cjs.entry.js +0 -82
  153. package/dist/cjs/ptc-multi-select_2.cjs.entry.js +0 -672
  154. package/dist/cjs/validation-messages-33a4f26b.js +0 -126
  155. package/dist/collection/components/organism-bundles/ptc-icon-card-slider-example/ptc-icon-card-slider-example.css +0 -1143
  156. package/dist/collection/components/organism-bundles/ptc-icon-card-slider-example/ptc-icon-card-slider-example.js +0 -77
  157. package/dist/esm/component-9beac35b.js +0 -1802
  158. package/dist/esm/ptc-icon-card-slider-example.entry.js +0 -78
  159. package/dist/esm/ptc-multi-select_2.entry.js +0 -667
  160. package/dist/esm/validation-messages-adbb6518.js +0 -124
  161. package/dist/ptcw-design/p-00e21489.entry.js +0 -1
  162. package/dist/ptcw-design/p-15758793.entry.js +0 -1
  163. package/dist/ptcw-design/p-18a5a338.js +0 -1
  164. package/dist/ptcw-design/p-2aa19c11.entry.js +0 -1
  165. package/dist/ptcw-design/p-2b32297b.entry.js +0 -1
  166. package/dist/ptcw-design/p-2cb2de0f.entry.js +0 -1
  167. package/dist/ptcw-design/p-38b782e8.entry.js +0 -1
  168. package/dist/ptcw-design/p-51a45b13.entry.js +0 -1
  169. package/dist/ptcw-design/p-593b8eff.entry.js +0 -1
  170. package/dist/ptcw-design/p-5dae4f30.entry.js +0 -1
  171. package/dist/ptcw-design/p-73a853fc.entry.js +0 -1
  172. package/dist/ptcw-design/p-752bba1c.entry.js +0 -1
  173. package/dist/ptcw-design/p-98426799.js +0 -203
  174. package/dist/ptcw-design/p-98844b50.js +0 -134
  175. package/dist/ptcw-design/p-a58698ca.entry.js +0 -1
  176. package/dist/ptcw-design/p-ab3d2934.entry.js +0 -1
  177. package/dist/ptcw-design/p-acdd9a1d.entry.js +0 -1
  178. package/dist/ptcw-design/p-ad821a01.entry.js +0 -1
  179. package/dist/ptcw-design/p-bab5bb88.entry.js +0 -1
  180. package/dist/ptcw-design/p-c8f68292.entry.js +0 -1
  181. package/dist/ptcw-design/p-d66debb3.entry.js +0 -1
  182. package/dist/ptcw-design/p-dd02e4d6.entry.js +0 -68
  183. package/dist/ptcw-design/p-e5369c4d.entry.js +0 -1
  184. package/dist/ptcw-design/p-f9256e3d.entry.js +0 -1
  185. package/dist/types/components/organism-bundles/ptc-icon-card-slider-example/ptc-icon-card-slider-example.d.ts +0 -10
@@ -82,26 +82,26 @@ a:focus-visible {
82
82
  border-radius: var(--ptc-border-radius-standard);
83
83
  }
84
84
 
85
- .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a), .light-links a.light-link, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a), .background-grey-10 a.light-link, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a), .background-plm-grey a.light-link {
85
+ .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a), .light-links a.light-link, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a), .background-grey-10 a.light-link, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a), .background-plm-grey a.light-link {
86
86
  color: var(--color-blue-04);
87
87
  margin: -2px;
88
88
  border: 2px solid transparent;
89
89
  }
90
- .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited, .light-links a.light-link:visited, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited, .background-grey-10 a.light-link:visited, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited, .background-plm-grey a.light-link:visited {
90
+ .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):visited, .light-links a.light-link:visited, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):visited, .background-grey-10 a.light-link:visited, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):visited, .background-plm-grey a.light-link:visited {
91
91
  color: var(--color-blue-06);
92
92
  }
93
- .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):active, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:active, .light-links a.light-link:active, .light-links a.light-link:visited:active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:active, .background-grey-10 a.light-link:active, .background-grey-10 a.light-link:visited:active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:active, .background-plm-grey a.light-link:active, .background-plm-grey a.light-link:visited:active {
93
+ .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):active, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):visited:active, .light-links a.light-link:active, .light-links a.light-link:visited:active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):visited:active, .background-grey-10 a.light-link:active, .background-grey-10 a.light-link:visited:active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):visited:active, .background-plm-grey a.light-link:active, .background-plm-grey a.light-link:visited:active {
94
94
  transition: none;
95
95
  color: var(--color-blue-07);
96
96
  }
97
- .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):hover, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:hover, .light-links a.light-link:hover, .light-links a.light-link:visited:hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:hover, .background-grey-10 a.light-link:hover, .background-grey-10 a.light-link:visited:hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:hover, .background-plm-grey a.light-link:hover, .background-plm-grey a.light-link:visited:hover {
97
+ .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):hover, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):visited:hover, .light-links a.light-link:hover, .light-links a.light-link:visited:hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):visited:hover, .background-grey-10 a.light-link:hover, .background-grey-10 a.light-link:visited:hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):visited:hover, .background-plm-grey a.light-link:hover, .background-plm-grey a.light-link:visited:hover {
98
98
  color: var(--color-blue-05);
99
99
  }
100
- .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a).disabled, .light-links a.light-link.disabled, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a).disabled, .background-grey-10 a.light-link.disabled, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a).disabled, .background-plm-grey a.light-link.disabled {
100
+ .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a).disabled, .light-links a.light-link.disabled, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a).disabled, .background-grey-10 a.light-link.disabled, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a).disabled, .background-plm-grey a.light-link.disabled {
101
101
  color: var(--color-gray-04) !important;
102
102
  cursor: not-allowed;
103
103
  }
104
- .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):focus-visible, .light-links a.light-link:focus-visible, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):focus-visible, .background-grey-10 a.light-link:focus-visible, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):focus-visible, .background-plm-grey a.light-link:focus-visible {
104
+ .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):focus-visible, .light-links a.light-link:focus-visible, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):focus-visible, .background-grey-10 a.light-link:focus-visible, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):focus-visible, .background-plm-grey a.light-link:focus-visible {
105
105
  border-radius: var(--ptc-border-radius-standard);
106
106
  border: 2px solid white;
107
107
  outline: 5px solid var(--keyboard-nav-outline);
@@ -129,9 +129,7 @@ export class PtcValueLedLayout {
129
129
  getSidebarList() {
130
130
  const sidebarList = document.querySelectorAll('.vl-content-item');
131
131
  sidebarList.forEach(listItem => {
132
- var _a, _b, _c, _d;
133
- //let itemTitle = listItem.getAttribute('comp-title');
134
- let itemTitle = ((_b = (_a = listItem.querySelector('ptc-title h2')) === null || _a === void 0 ? void 0 : _a.textContent) === null || _b === void 0 ? void 0 : _b.trim()) || ((_d = (_c = listItem.querySelector('ptc-title h1')) === null || _c === void 0 ? void 0 : _c.textContent) === null || _d === void 0 ? void 0 : _d.trim());
132
+ let itemTitle = listItem.getAttribute('comp-title');
135
133
  let itemRef = listItem.getAttribute('id');
136
134
  let vlItem = { title: itemTitle, ref: itemRef };
137
135
  this.sidebarData.push(vlItem);
@@ -82,26 +82,26 @@ a:focus-visible {
82
82
  border-radius: var(--ptc-border-radius-standard);
83
83
  }
84
84
 
85
- .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a), .light-links a.light-link, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a), .background-grey-10 a.light-link, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a), .background-plm-grey a.light-link {
85
+ .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a), .light-links a.light-link, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a), .background-grey-10 a.light-link, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a), .background-plm-grey a.light-link {
86
86
  color: var(--color-blue-04);
87
87
  margin: -2px;
88
88
  border: 2px solid transparent;
89
89
  }
90
- .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited, .light-links a.light-link:visited, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited, .background-grey-10 a.light-link:visited, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited, .background-plm-grey a.light-link:visited {
90
+ .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):visited, .light-links a.light-link:visited, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):visited, .background-grey-10 a.light-link:visited, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):visited, .background-plm-grey a.light-link:visited {
91
91
  color: var(--color-blue-06);
92
92
  }
93
- .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):active, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:active, .light-links a.light-link:active, .light-links a.light-link:visited:active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:active, .background-grey-10 a.light-link:active, .background-grey-10 a.light-link:visited:active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:active, .background-plm-grey a.light-link:active, .background-plm-grey a.light-link:visited:active {
93
+ .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):active, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):visited:active, .light-links a.light-link:active, .light-links a.light-link:visited:active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):visited:active, .background-grey-10 a.light-link:active, .background-grey-10 a.light-link:visited:active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):visited:active, .background-plm-grey a.light-link:active, .background-plm-grey a.light-link:visited:active {
94
94
  transition: none;
95
95
  color: var(--color-blue-07);
96
96
  }
97
- .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):hover, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:hover, .light-links a.light-link:hover, .light-links a.light-link:visited:hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:hover, .background-grey-10 a.light-link:hover, .background-grey-10 a.light-link:visited:hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:hover, .background-plm-grey a.light-link:hover, .background-plm-grey a.light-link:visited:hover {
97
+ .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):hover, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):visited:hover, .light-links a.light-link:hover, .light-links a.light-link:visited:hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):visited:hover, .background-grey-10 a.light-link:hover, .background-grey-10 a.light-link:visited:hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):visited:hover, .background-plm-grey a.light-link:hover, .background-plm-grey a.light-link:visited:hover {
98
98
  color: var(--color-blue-05);
99
99
  }
100
- .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a).disabled, .light-links a.light-link.disabled, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a).disabled, .background-grey-10 a.light-link.disabled, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a).disabled, .background-plm-grey a.light-link.disabled {
100
+ .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a).disabled, .light-links a.light-link.disabled, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a).disabled, .background-grey-10 a.light-link.disabled, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a).disabled, .background-plm-grey a.light-link.disabled {
101
101
  color: var(--color-gray-04) !important;
102
102
  cursor: not-allowed;
103
103
  }
104
- .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):focus-visible, .light-links a.light-link:focus-visible, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):focus-visible, .background-grey-10 a.light-link:focus-visible, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):focus-visible, .background-plm-grey a.light-link:focus-visible {
104
+ .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):focus-visible, .light-links a.light-link:focus-visible, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):focus-visible, .background-grey-10 a.light-link:focus-visible, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):focus-visible, .background-plm-grey a.light-link:focus-visible {
105
105
  border-radius: var(--ptc-border-radius-standard);
106
106
  border: 2px solid white;
107
107
  outline: 5px solid var(--keyboard-nav-outline);
@@ -5659,26 +5659,26 @@ a:focus-visible {
5659
5659
  border-radius: var(--ptc-border-radius-standard);
5660
5660
  }
5661
5661
 
5662
- .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a), .light-links a.light-link, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a), .background-grey-10 a.light-link, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a), .background-plm-grey a.light-link {
5662
+ .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a), .light-links a.light-link, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a), .background-grey-10 a.light-link, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a), .background-plm-grey a.light-link {
5663
5663
  color: var(--color-blue-04);
5664
5664
  margin: -2px;
5665
5665
  border: 2px solid transparent;
5666
5666
  }
5667
- .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited, .light-links a.light-link:visited, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited, .background-grey-10 a.light-link:visited, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited, .background-plm-grey a.light-link:visited {
5667
+ .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):visited, .light-links a.light-link:visited, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):visited, .background-grey-10 a.light-link:visited, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):visited, .background-plm-grey a.light-link:visited {
5668
5668
  color: var(--color-blue-06);
5669
5669
  }
5670
- .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):active, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:active, .light-links a.light-link:active, .light-links a.light-link:visited:active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:active, .background-grey-10 a.light-link:active, .background-grey-10 a.light-link:visited:active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:active, .background-plm-grey a.light-link:active, .background-plm-grey a.light-link:visited:active {
5670
+ .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):active, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):visited:active, .light-links a.light-link:active, .light-links a.light-link:visited:active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):visited:active, .background-grey-10 a.light-link:active, .background-grey-10 a.light-link:visited:active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):visited:active, .background-plm-grey a.light-link:active, .background-plm-grey a.light-link:visited:active {
5671
5671
  transition: none;
5672
5672
  color: var(--color-blue-07);
5673
5673
  }
5674
- .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):hover, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:hover, .light-links a.light-link:hover, .light-links a.light-link:visited:hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:hover, .background-grey-10 a.light-link:hover, .background-grey-10 a.light-link:visited:hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:hover, .background-plm-grey a.light-link:hover, .background-plm-grey a.light-link:visited:hover {
5674
+ .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):hover, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):visited:hover, .light-links a.light-link:hover, .light-links a.light-link:visited:hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):visited:hover, .background-grey-10 a.light-link:hover, .background-grey-10 a.light-link:visited:hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):visited:hover, .background-plm-grey a.light-link:hover, .background-plm-grey a.light-link:visited:hover {
5675
5675
  color: var(--color-blue-05);
5676
5676
  }
5677
- .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a).disabled, .light-links a.light-link.disabled, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a).disabled, .background-grey-10 a.light-link.disabled, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a).disabled, .background-plm-grey a.light-link.disabled {
5677
+ .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a).disabled, .light-links a.light-link.disabled, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a).disabled, .background-grey-10 a.light-link.disabled, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a).disabled, .background-plm-grey a.light-link.disabled {
5678
5678
  color: var(--color-gray-04) !important;
5679
5679
  cursor: not-allowed;
5680
5680
  }
5681
- .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):focus-visible, .light-links a.light-link:focus-visible, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):focus-visible, .background-grey-10 a.light-link:focus-visible, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):focus-visible, .background-plm-grey a.light-link:focus-visible {
5681
+ .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):focus-visible, .light-links a.light-link:focus-visible, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):focus-visible, .background-grey-10 a.light-link:focus-visible, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):focus-visible, .background-plm-grey a.light-link:focus-visible {
5682
5682
  border-radius: var(--ptc-border-radius-standard);
5683
5683
  border: 2px solid white;
5684
5684
  outline: 5px solid var(--keyboard-nav-outline);
@@ -33,12 +33,6 @@ export class PtcWhitePaper {
33
33
  modalForm.setAttribute("show", "true");
34
34
  setTimeout(() => {
35
35
  window.scrollTo(0, 0);
36
- console.log('modal form close icon');
37
- const closeIcon = modalForm.shadowRoot.querySelector('ptc-close-icon').shadowRoot.querySelector('.close-icon');
38
- if (closeIcon) {
39
- closeIcon.tabIndex = 0;
40
- closeIcon.focus();
41
- }
42
36
  }, 200);
43
37
  }
44
38
  }
@@ -90,9 +84,14 @@ export class PtcWhitePaper {
90
84
  }
91
85
  renderContent(item, index) {
92
86
  const components = Object.values(item);
93
- return (h("div", { class: "content-wrapper", key: index }, components.map((comp, i) => (h("div", { key: i }, (comp.heading && comp.heading.trim() !== '') ? (this.currentPage == 1
94
- ? (h("ptc-title", { type: "h1", upperline: comp.isStyledHeading ? 'dotted' : 'no-upperline', "title-height": "densest", "title-margin": "margin-flush" }, comp.heading, h("ptc-spacer", { size: "large" })))
95
- : (h("ptc-title", { type: "h2", upperline: comp.isStyledHeading ? 'dotted' : 'no-upperline', "title-height": "densest", "title-margin": "margin-flush" }, comp.heading, h("ptc-spacer", { size: "large" })))) : "", (comp.subHeading && comp.subHeading.trim() !== '') ? (h("div", { class: "sub-heading rich-content-text-editor", innerHTML: comp.subHeading })) : '', comp.componentType === 'two-column-with-text-media' && this.renderTwoColumnText(comp, i), comp.componentType === 'fullspan-media' && this.renderfullspanMedia(comp, i), comp.componentType === 'fullspan-text' && this.renderFullspanText(comp, i))))));
87
+ return (h("div", { class: "content-wrapper", key: index }, components.map((comp, i) => {
88
+ var _a, _b;
89
+ let heading = this.el.querySelector(`[slot="heading-page${this.currentPage}-comp${i + 1}"]`);
90
+ let subHeading = this.el.querySelector(`[slot="subheading-page${this.currentPage}-comp${i + 1}"]`);
91
+ return h("div", { key: i }, (heading && heading.innerText && ((_a = heading.innerText) === null || _a === void 0 ? void 0 : _a.trim()) !== '') ? (this.currentPage == 1
92
+ ? (h("ptc-title", { type: "h1", upperline: comp.isStyledHeading ? 'dotted' : 'no-upperline', "title-height": "densest", "title-margin": "margin-flush" }, h("slot", { name: `heading-page${this.currentPage}-comp${i + 1}` }), h("ptc-spacer", { size: "large" })))
93
+ : (h("ptc-title", { type: "h2", upperline: comp.isStyledHeading ? 'dotted' : 'no-upperline', "title-height": "densest", "title-margin": "margin-flush" }, h("slot", { name: `heading-page${this.currentPage}-comp${i + 1}` }), h("ptc-spacer", { size: "large" })))) : "", (subHeading && subHeading.innerText && ((_b = subHeading.innerText) === null || _b === void 0 ? void 0 : _b.trim()) !== '') ? (h("div", { class: "sub-heading rich-content-text-editor" }, h("slot", { name: `subheading-page${this.currentPage}-comp${i + 1}` }))) : '', comp.componentType === 'two-column-with-text-media' && this.renderTwoColumnText(comp, i), comp.componentType === 'fullspan-media' && this.renderfullspanMedia(comp, i), comp.componentType === 'fullspan-text' && this.renderFullspanText(comp, i));
94
+ })));
96
95
  }
97
96
  renderTwoColumnText(comp, index) {
98
97
  return (h("div", null, comp.leftColumnContent && (h("div", { class: "is-grid has-col-gap-xl has-row-gap-sm wp-component", key: index }, h("div", { class: "is-col-6-md" }, h("div", { class: "left-content", innerHTML: comp.leftColumnContent })), h("div", { class: "is-col-6-md" }, h("div", { class: "right-content", innerHTML: comp.rightColumnContent }))))));
@@ -224,6 +223,7 @@ export class PtcWhitePaper {
224
223
  }
225
224
  }];
226
225
  }
226
+ static get elementRef() { return "el"; }
227
227
  static get watchers() {
228
228
  return [{
229
229
  "propName": "items",
@@ -6,21 +6,15 @@ export default {
6
6
  argTypes: {
7
7
  borderRadius: {
8
8
  control: 'select',
9
+ options: ["", "radius-lg", "radius-standard", "radius-sm"],
9
10
  description: 'Image border shape',
10
- defaultValue: { summary: "'' means no border" },
11
- options: [
12
- '',
13
- 'radius-large',
14
- 'radius-large-top',
15
- 'radius-standard',
16
- 'radius-standard-top'
17
- ]
11
+ defaultValue: { summary: '' }
18
12
  },
19
13
  imageType: {
20
14
  control: 'select',
21
- description: 'Image type, "smart-bg needs to use with content inside the <ptc-img> tag"',
22
- defaultValue: { summary: 'smart-bg' },
23
- options: [ 'smart-bg', 'smart-img' ]
15
+ options: ["smart-bg", "smart-img"],
16
+ description: 'Image type',
17
+ defaultValue: { summary: 'smart-bg' }
24
18
  },
25
19
  imgUrl: {
26
20
  control: 'text',
@@ -29,15 +23,35 @@ export default {
29
23
  },
30
24
  loadMode: {
31
25
  control: 'select',
26
+ options: ["eager-bg", "lazy-bg"],
32
27
  description: 'Lazy loading option',
33
- defaultValue: { summary: 'lazy-bg' },
34
- options: [ 'eager-bg', 'lazy-bg' ]
28
+ defaultValue: { summary: 'lazy-bg' }
35
29
  },
36
- styles: {
30
+ sizeLg: {
37
31
  control: 'text',
38
- description: '(optional) Injected CSS styles',
39
- defaultValue: { summary: 'undefined' }
40
- }
32
+ description: 'Image solution for large screen &gt;=1200px',
33
+ defaultValue: { summary: '1920x1080' }
34
+ },
35
+ sizeMd: {
36
+ control: 'text',
37
+ description: 'Image size for medium screen &gt;=992px and &lt;=1199px',
38
+ defaultValue: { summary: '1366x500' }
39
+ },
40
+ sizeSm: {
41
+ control: 'text',
42
+ description: 'Image size for small screen &gt;=768px and &lt;=991px',
43
+ defaultValue: { summary: '1240x496' }
44
+ },
45
+ sizeXs: {
46
+ control: 'text',
47
+ description: 'Image size for smallest screen &lt;=767px',
48
+ defaultValue: { summary: '510x340' }
49
+ },
50
+ // styles: {
51
+ // control: '',
52
+ // description: '(optional) Injected CSS styles',
53
+ // defaultValue: { summary: 'undefined' }
54
+ // }
41
55
  }
42
56
  };
43
57
 
@@ -46,15 +60,23 @@ const Template = args => { return html `<ptc-img
46
60
  image-type=${args.imageType}
47
61
  img-url=${args.imgUrl}
48
62
  load-mode=${args.loadMode}
63
+ size-lg=${args.sizeLg}
64
+ size-md=${args.sizeMd}
65
+ size-sm=${args.sizeSm}
66
+ size-xs=${args.sizeXs}
49
67
  styles=${args.styles}
50
68
  ></ptc-img>`;}
51
69
 
52
70
  export const Example = Template.bind({});
53
71
 
54
72
  Example.args = {
55
- borderRadius: '',
73
+ borderRadius: 'radius-standard',
56
74
  imageType: 'smart-img',
57
- imgUrl: 'https://ptc-p-001.sitecorecontenthub.cloud/api/public/content/3c9d7c7c7ca74dd483c4d7ca554ecc38?v=ece57c52',
75
+ imgUrl: "http://s7d1.scene7.com/is/image/ptcinc/cs-boeing-planes-runway",
58
76
  loadMode: 'lazy-bg',
59
- styles: 'undefined'
77
+ sizeLg: '1920x1080',
78
+ sizeMd: '1366x500',
79
+ sizeSm: '1240x496',
80
+ sizeXs: '510x340',
81
+ // styles: 'undefined'
60
82
  }
@@ -1,4 +1,3 @@
1
- import { ParameterName } from '@storybook/addon-designs/esm/addon';
2
1
  import { html } from 'lit';
3
2
 
4
3
  export default {
@@ -35,16 +34,15 @@ export default {
35
34
  description: 'Trigger Name (Mandatory)',
36
35
  defaultValue: { summary: 'undefined' }
37
36
  },
38
- wheelData: {
39
- control: 'array',
40
- description: "This component is used with <footer-nav> in the back-end solution. If you want to test it, please inject the data through Javascript. Becuase StencilJS doesn't automatically parse string attributes into arrays, developers need to handle the parsing themselves.",
41
- defaultValue: { summary: '["test1", "test2", "test3"]' }
42
- }
43
- },
37
+ // wheelData: {
38
+ // control: 'object',
39
+ // description: "Wheel Data (Mandatory) eg: data: [{ id: '1', value: '附近' }],",
40
+ // defaultValue: { summary: 'undefined' }
41
+ // }
42
+ }
44
43
  };
45
44
 
46
- const Template = args => { return html `<ptc-para>This component is optimized for mobile screens. Please use the viewport addon in the "Example", and switch to a small device like a cell phone for correct display.</ptc-para>
47
- <div class="demo-with-bgcolor">
45
+ const Template = args => { return html `<div class="demo-with-bgcolor">
48
46
  <ptc-mobile-select class="js-mobile-select-1"
49
47
  cancel-btn-text=${args.cancelBtnText}
50
48
  ensure-btn-text=${args.ensureBtnText}
@@ -52,9 +50,21 @@ const Template = args => { return html `<ptc-para>This component is optimized fo
52
50
  selected-id=${args.selectedId}
53
51
  selected-text=${args.selectedText}
54
52
  trigger-name=${args.triggerName}
55
- .wheelData=${args.wheelData}
53
+ wheel-data=${args.wheelData}
56
54
  ></ptc-mobile-select>
57
55
  </div>
56
+
57
+ <script>
58
+ const ptcSelect = document.querySelector('.js-mobile-select-1');
59
+ ptcSelect.wheelData = [
60
+ { id: 'https://www.ptc.com/en', value: 'English'},
61
+ { id: 'https://www.ptc.com/cn', value: '中文 (简体)'},
62
+ { id: 'https://www.ptc.com/tw', value: '中文 (繁體)'},
63
+ { id: 'https://www.ptc.com/fr', value: 'Français'},
64
+ { id: 'https://www.ptc.com/de', value: 'Deutsch'},
65
+ { id: 'https://www.ptc.com/it', value: 'Italiano'},
66
+ ];
67
+ </script>
58
68
  `;}
59
69
 
60
70
  export const Example = Template.bind({});
@@ -66,5 +76,5 @@ Example.args = {
66
76
  selectedId: 'en',
67
77
  selectedText: 'English',
68
78
  triggerName: 'lang-ddl',
69
- wheelData: [{id: "https://www.ptc.com/en", value: "English"}, {id: "https://www.ptc.com/fr", value: "Français"}, {id:"https://www.ptc.com/cn", value:"中文 (简体)"}]
79
+ // wheelData: 'undefined'
70
80
  }
@@ -0,0 +1,45 @@
1
+ import { html } from 'lit';
2
+
3
+ export default {
4
+ title: 'Organisms/E-Support Organisms/Case Tracker'
5
+
6
+ }
7
+ const CaseTracker = args => {
8
+ return html `
9
+
10
+ <ptc-spacer></ptc-spacer>
11
+ <ptc-spacer></ptc-spacer>
12
+ <ptc-spacer></ptc-spacer>
13
+ <div class="ptc-container is-grid">
14
+ <div class="is-col-12 is-col-6-md">
15
+ <ptc-title upperline="none">Case Tracker - Authorized Use Only</ptc-title>
16
+ <ptc-spacer></ptc-spacer>
17
+ <ptc-spacer></ptc-spacer>
18
+ <ptc-para>If you want to use this application on behalf of a customer use this search from to lookup the customer record. When you have found the customer hit the Next > button</ptc-para>
19
+ <ptc-textfield field-id="contact-email" label-text="Customer Name" type="text" ptc-data-eloqua-name="C_EmailAddress" field-name="email"></ptc-textfield>
20
+ <ptc-textfield field-id="contact-email" label-text="Customer Number" type="text" ptc-data-eloqua-name="C_EmailAddress" field-name="email"></ptc-textfield>
21
+ <ptc-button color="ptc-quaternary" disabled="false" link-href="https://www.ptc.com" link-title="PTC" rel="undefined" tab-nav="0" target="_self" text-align="undefined" type="button">Search</ptc-button>
22
+ <ptc-button color="ptc-quaternary" disabled="false" link-href="https://www.ptc.com" link-title="PTC" rel="undefined" tab-nav="0" target="_self" text-align="undefined" type="button">Next</ptc-button>
23
+ </div>
24
+ <div class="is-col-12 is-col-2-md">
25
+
26
+ </div>
27
+ <div class="is-col-12 is-col-3-md">
28
+ <ptc-spacer></ptc-spacer>
29
+ <ptc-spacer></ptc-spacer>
30
+ <ptc-spacer></ptc-spacer>
31
+ <ptc-spacer></ptc-spacer>
32
+ <div style="border: solid; padding: 5px;">
33
+ <ptc-title upperline="none" type="h3">search tips</ptc-title>
34
+ <ul>
35
+ <li>You can use this search form to use this application on behalf of a customer.</li>
36
+ <li>You can use this search form to use this application on behalf of a customer.</li>
37
+ </ul>
38
+ </div>
39
+ </div>
40
+
41
+
42
+ </div>
43
+ `;}
44
+
45
+ export const Preview = CaseTracker.bind();
@@ -0,0 +1,47 @@
1
+ import { html } from 'lit';
2
+
3
+ export default {
4
+ title: 'Organisms/E-Support Organisms/Support Article'
5
+
6
+ }
7
+ const ArticlePage = args => {
8
+ return html `
9
+
10
+ <div class="ptc-container">
11
+
12
+ <ptc-title upperline="" type="h4" title-color="grey">How to run Apache, Tomcat, Windchill Directory Server </ptc-title>
13
+ <ptc-para>Modified: 23-Nov-2023 | LastSeen: 17-Jun-2024
14
+ <ptc-dropdown label="Available in:" listitems="" theme="support">
15
+ <item selected="" label="English"></item>
16
+ <item label="English"></item>
17
+ <item label="English"></item>
18
+
19
+ </ptc-dropdown>
20
+
21
+ </ptc-para>
22
+
23
+ <div style="background-color: rgb(238, 238, 238);; padding:2px">
24
+ <ptc-title type="h5" upperline="">Public</ptc-title>
25
+ <ptc-para >
26
+ Created by Steven Jin and improved by Mi Yeon Grace Jin, Amit Deshpande, Hideyuki Akiyama, Lily Liu, Arshad Imam, Luis Barbosa, Feng Xiang Cliff Tian, Swapnil Deshmukh, Kellan Chen, Teresa Man, Chao Max Wang, Saurabh Ghewande, Mahesh Lomate, Aditya Chaure, Tsutomu Seki, Salesforce Data Manipulation User, Steven Jin, Shirley Yang
27
+ Customer Views: 24559 | Useful Ratings (Customers): 118 | Useful Ratings (PTC): 45 | Cases Solved: 154
28
+ </ptc-para>
29
+
30
+ </div>
31
+ <ptc-spacer></ptc-spacer>
32
+ <ptc-spacer></ptc-spacer>
33
+ <div>
34
+ <ptc-title upperline="" type="h4">Description</ptc-title>
35
+ <hr style="color:green">
36
+ <ptc-para>
37
+ <ul>
38
+ <li>How to run Apache HTTP Server, Tomcat, WindchillDS and, Windchill as a Windows service</li>
39
+ <li>How to run Apache HTTP Server, Tomcat, WindchillDS and, Windchill as a Windows service</li>
40
+ <li>How to run Apache HTTP Server, Tomcat, WindchillDS and, Windchill as a Windows service</li>
41
+ </ul>
42
+ </ptc-para>
43
+ </div>
44
+ </div>
45
+ `;}
46
+
47
+ export const Preview = ArticlePage.bind();
@@ -0,0 +1,157 @@
1
+ import { html } from 'lit';
2
+
3
+ export default {
4
+ title: 'Organisms/E-Support Organisms/Support Page'
5
+
6
+ }
7
+ const SupportPage = args => {
8
+ return html `
9
+
10
+ <ptc-spacer></ptc-spacer>
11
+ <ptc-spacer></ptc-spacer>
12
+ <ptc-spacer></ptc-spacer>
13
+ <ptc-spacer></ptc-spacer>
14
+ <div class="ptc-container is-grid has-col-gap green-container">
15
+ <div class="is-col-12 is-col-7-md search-container">
16
+
17
+ <ptc-spacer></ptc-spacer>
18
+ <ptc-spacer></ptc-spacer>
19
+ <ptc-spacer></ptc-spacer>
20
+ <ptc-title type="h2" text-align="center" title-size="x-large" title-color="white" upperline="no-upperline" title-display="inline-block" title-shadow="" title-height="densest" title-margin="margin-3" title-weight="w-8" is-plm-hub="false">
21
+ Search the Knowledge Base
22
+ </ptc-title>
23
+ <ptc-search-field placeholder-label="Search Technical Support Documentation and Articles" ></ptc-search-field>
24
+ </div>
25
+ <div class="is-col-12 is-col-5-md form-section">
26
+ <ptc-title upperline="none">Popular Tasks</ptc-title>
27
+ <!-- <ul> -->
28
+ <ptc-link>Product Pages</ptc-link>
29
+ <ptc-link>Product Pages</ptc-link>
30
+ <ptc-link>Product Pages</ptc-link>
31
+ <ptc-link>Product Pages</ptc-link>
32
+
33
+ </div>
34
+ </div>
35
+
36
+ <ptc-spacer></ptc-spacer>
37
+ <ptc-spacer></ptc-spacer>
38
+
39
+ <div class="ptc-container is-grid has-col-gap link-container ">
40
+ <div class="is-col-1"></div>
41
+ <div class="is-col-2 links"><ptc-link>Support</ptc-link>
42
+ <button class="btn" role="button" >
43
+ <span class="arrow">
44
+ <icon-asset slot="icon" type="solid" size="large" name="arrow-down" color="ptc-green"></icon-asset>
45
+ </span>
46
+ </button>
47
+ </div>
48
+ <div class="is-col-2 llinks"><ptc-link>Manage and monitor software</ptc-link>
49
+ <button class="btn" role="button" >
50
+ <span class="arrow">
51
+ <icon-asset slot="icon" type="solid" size="large" name="arrow-down" color="ptc-green"></icon-asset>
52
+ </span>
53
+ </button>
54
+ </div>
55
+ <div class="is-col-2 llinks"><ptc-link>Learn</ptc-link>
56
+ <button class="btn" role="button" >
57
+ <span class="arrow">
58
+ <icon-asset slot="icon" type="solid" size="large" name="arrow-down" color="ptc-green"></icon-asset>
59
+ </span>
60
+ </button>
61
+ </div>
62
+ <div class="is-col-2 llinks"><ptc-link>Service and Expertise</ptc-link>
63
+ <button class="btn" role="button" >
64
+ <span class="arrow">
65
+ <icon-asset slot="icon" type="solid" size="large" name="arrow-down" color="ptc-green"></icon-asset>
66
+ </span>
67
+ </button>
68
+ </div>
69
+ <div class="is-col-2 llinks"><ptc-link>PTC Partner Network</ptc-link>
70
+ <button class="btn" role="button" >
71
+ <span class="arrow">
72
+ <icon-asset slot="icon" type="solid" size="large" name="arrow-down" color="ptc-green"></icon-asset>
73
+ </span>
74
+ </button>
75
+ </div>
76
+ <div class="is-col-1 links"></div>
77
+ </div>
78
+ <style>
79
+
80
+
81
+ .btn {
82
+ display: none;
83
+ padding: 10px;
84
+ font-size: 16px;
85
+ font-weight: 500;
86
+ border: none;
87
+ background-color: transparent;
88
+ cursor: pointer;
89
+ align-items: center;
90
+ span {
91
+ margin-right: 8px;
92
+ align-items: center;
93
+ }
94
+
95
+
96
+
97
+ }
98
+
99
+ .llinks:hover .btn {
100
+ display: block;
101
+
102
+
103
+ }
104
+
105
+ .links:hover .btn {
106
+ display: flex;
107
+ }
108
+ .green-container {
109
+ background-color:#b3dda4 ;
110
+ padding: 10px;
111
+ .search-container{
112
+ background-color: #00890B;
113
+ padding:10px;
114
+ align-items: center;
115
+ }
116
+ .form-section {
117
+ background-color: white;
118
+ padding: 10px;
119
+
120
+ ptc-link {
121
+ padding: 5px;
122
+ }
123
+ }
124
+ }
125
+ .links {
126
+ align-content: center;
127
+ text-align: center;
128
+ padding-bottom: 16px;
129
+ align-items: center;
130
+ display: flex;
131
+ flex-direction: column;
132
+ align-items: center;
133
+ justify-content: space-between;
134
+ }
135
+
136
+ .llinks {
137
+ align-content: center;
138
+ text-align: center;
139
+ padding-bottom: 16px;
140
+ border-left: solid 2px #b3dda4;
141
+ padding: 10px;
142
+ display: flex;
143
+ flex-direction: column;
144
+ align-items: center;
145
+ justify-content: space-between;
146
+
147
+ }
148
+ .link-container {
149
+ border-bottom: solid 2px #b3dda4;
150
+ /* margin: 15px; */
151
+ }
152
+
153
+
154
+ </style>
155
+ `;}
156
+
157
+ export const Preview = SupportPage.bind();
@@ -164,6 +164,12 @@ export const MaxWidthContainer: {
164
164
  new (): MaxWidthContainer;
165
165
  };
166
166
 
167
+ interface ModalFormExample extends Components.ModalFormExample, HTMLElement {}
168
+ export const ModalFormExample: {
169
+ prototype: ModalFormExample;
170
+ new (): ModalFormExample;
171
+ };
172
+
167
173
  interface MostPopularNews extends Components.MostPopularNews, HTMLElement {}
168
174
  export const MostPopularNews: {
169
175
  prototype: MostPopularNews;
@@ -428,12 +434,6 @@ export const PtcIconCard: {
428
434
  new (): PtcIconCard;
429
435
  };
430
436
 
431
- interface PtcIconCardSliderExample extends Components.PtcIconCardSliderExample, HTMLElement {}
432
- export const PtcIconCardSliderExample: {
433
- prototype: PtcIconCardSliderExample;
434
- new (): PtcIconCardSliderExample;
435
- };
436
-
437
437
  interface PtcIconComponent extends Components.PtcIconComponent, HTMLElement {}
438
438
  export const PtcIconComponent: {
439
439
  prototype: PtcIconComponent;