@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.
- package/dist/cjs/{component-35540bfb.js → component-6a178a16.js} +2643 -832
- package/dist/cjs/event-jumbotron-example.cjs.entry.js +3 -36
- package/dist/cjs/featured-list.cjs.entry.js +1 -1
- package/dist/cjs/innovator-toggle-container.cjs.entry.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/modal-form-example.cjs.entry.js +94 -0
- package/dist/cjs/ptc-bio-card.cjs.entry.js +1 -1
- package/dist/cjs/ptc-card_2.cjs.entry.js +4 -3
- package/dist/cjs/ptc-case-studies-slider.cjs.entry.js +1 -1
- package/dist/cjs/ptc-close-icon_2.cjs.entry.js +28 -27
- package/dist/cjs/ptc-countdown.cjs.entry.js +18 -20
- package/dist/cjs/ptc-data-lookup.cjs.entry.js +1 -2
- package/dist/cjs/ptc-featured-list.cjs.entry.js +1 -1
- package/dist/cjs/ptc-filter-level-theater.cjs.entry.js +1 -1
- package/dist/cjs/{ptc-form-checkbox_2.cjs.entry.js → ptc-form-checkbox_4.cjs.entry.js} +789 -5
- package/dist/cjs/ptc-jumbotron.cjs.entry.js +2 -3
- package/dist/cjs/ptc-mobile-select.cjs.entry.js +10 -1
- package/dist/cjs/ptc-office-locations.cjs.entry.js +3 -13
- package/dist/cjs/ptc-para.cjs.entry.js +1 -1
- package/dist/cjs/ptc-podcast-card.cjs.entry.js +1 -1
- package/dist/cjs/ptc-previous-url.cjs.entry.js +10 -2
- package/dist/cjs/ptc-product-card.cjs.entry.js +1 -1
- package/dist/cjs/ptc-product-category.cjs.entry.js +1 -1
- package/dist/cjs/ptc-product-highlight-card.cjs.entry.js +1 -1
- package/dist/cjs/ptc-readmore-char.cjs.entry.js +1 -1
- package/dist/cjs/ptc-readmore-v3.cjs.entry.js +1 -1
- package/dist/cjs/ptc-tooltip-v2.cjs.entry.js +1 -1
- package/dist/cjs/ptc-value-led-layout.cjs.entry.js +1 -3
- package/dist/cjs/ptc-value-led-speed-bump.cjs.entry.js +1 -1
- package/dist/cjs/ptc-white-paper.cjs.entry.js +10 -10
- package/dist/cjs/ptcw-design.cjs.js +1 -1
- package/dist/collection/collection-manifest.json +1 -1
- package/dist/collection/components/icon-asset/media/designer-v6.0.6.svg +30 -2
- package/dist/collection/components/innovator-toggle-container/innovator-toggle-container.css +6 -6
- package/dist/collection/components/organism-bundles/bundle-featured-list/featured-list.css +3 -3
- package/dist/collection/components/organism-bundles/event-jumbotron-example/event-jumbotron-example.css +4 -8
- package/dist/collection/components/organism-bundles/event-jumbotron-example/event-jumbotron-example.js +2 -35
- package/dist/collection/components/organism-bundles/form/modal-from-example/modal-form-example.css +26 -0
- package/dist/collection/components/organism-bundles/form/modal-from-example/modal-form-example.js +99 -0
- package/dist/collection/components/ptc-bio-card/ptc-bio-card.css +6 -6
- package/dist/collection/components/ptc-case-studies-slider/ptc-case-studies-slider.css +6 -6
- package/dist/collection/components/ptc-countdown/ptc-countdown.css +1 -1
- package/dist/collection/components/ptc-countdown/ptc-countdown.js +17 -19
- package/dist/collection/components/ptc-featured-list/ptc-featured-list.css +6 -6
- package/dist/collection/components/ptc-filter-level-theater/ptc-filter-level-theater.css +6 -6
- package/dist/collection/components/ptc-jumbotron/ptc-jumbotron.css +6 -24
- package/dist/collection/components/ptc-jumbotron/ptc-jumbotron.js +1 -20
- package/dist/collection/components/ptc-mobile-select/ptc-mobile-select.js +11 -2
- package/dist/collection/components/ptc-modal/ptc-modal.css +8 -4
- package/dist/collection/components/ptc-modal/ptc-modal.js +47 -28
- package/dist/collection/components/ptc-office-locations/ptc-office-locations.js +4 -15
- package/dist/collection/components/ptc-para/ptc-para.css +3 -0
- package/dist/collection/components/ptc-para/ptc-para.js +2 -2
- package/dist/collection/components/ptc-podcast-card/ptc-podcast-card.css +6 -6
- package/dist/collection/components/ptc-preloader-section/ptc-preloader-section.js +4 -3
- package/dist/collection/components/ptc-previous-url/ptc-previous-url.css +16 -0
- package/dist/collection/components/ptc-previous-url/ptc-previous-url.js +27 -1
- package/dist/collection/components/ptc-product-card/ptc-product-card.css +6 -6
- package/dist/collection/components/ptc-product-category/ptc-product-category.css +6 -6
- package/dist/collection/components/ptc-product-highlight-card/ptc-product-highlight-card.css +6 -6
- package/dist/collection/components/ptc-readmore-char/ptc-readmore-char.css +6 -6
- package/dist/collection/components/ptc-readmore-v3/ptc-readmore-v3.css +6 -6
- package/dist/collection/components/ptc-textfield/ptc-textfield.js +1 -1
- package/dist/collection/components/ptc-tooltip-v2/ptc-tooltip-v2.css +6 -6
- package/dist/collection/components/ptc-value-led-layout/ptc-value-led-layout.js +1 -3
- package/dist/collection/components/ptc-value-led-speed-bump/ptc-value-led-speed-bump.css +6 -6
- package/dist/collection/components/ptc-white-paper/ptc-white-paper.css +6 -6
- package/dist/collection/components/ptc-white-paper/ptc-white-paper.js +9 -9
- package/dist/collection/stories/BackgroundImage.stories.js +42 -20
- package/dist/collection/stories/MobileSelect.stories.js +21 -11
- package/dist/collection/stories/organisms/eSupport/CaseTracker/preview.stories.js +45 -0
- package/dist/collection/stories/organisms/eSupport/SupportArticle/preview.stories.js +47 -0
- package/dist/collection/stories/organisms/eSupport/SupportPage/preview.stories.js +157 -0
- package/dist/custom-elements/index.d.ts +6 -6
- package/dist/custom-elements/index.js +200 -213
- package/dist/esm/{component-8c53e377.js → component-80f298b4.js} +2592 -793
- package/dist/esm/event-jumbotron-example.entry.js +3 -36
- package/dist/esm/featured-list.entry.js +1 -1
- package/dist/esm/innovator-toggle-container.entry.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/modal-form-example.entry.js +90 -0
- package/dist/esm/ptc-bio-card.entry.js +1 -1
- package/dist/esm/ptc-card_2.entry.js +4 -3
- package/dist/esm/ptc-case-studies-slider.entry.js +1 -1
- package/dist/esm/ptc-close-icon_2.entry.js +28 -27
- package/dist/esm/ptc-countdown.entry.js +18 -20
- package/dist/esm/ptc-data-lookup.entry.js +1 -2
- package/dist/esm/ptc-featured-list.entry.js +1 -1
- package/dist/esm/ptc-filter-level-theater.entry.js +1 -1
- package/dist/esm/{ptc-form-checkbox_2.entry.js → ptc-form-checkbox_4.entry.js} +786 -4
- package/dist/esm/ptc-jumbotron.entry.js +2 -3
- package/dist/esm/ptc-mobile-select.entry.js +10 -1
- package/dist/esm/ptc-office-locations.entry.js +3 -13
- package/dist/esm/ptc-para.entry.js +1 -1
- package/dist/esm/ptc-podcast-card.entry.js +1 -1
- package/dist/esm/ptc-previous-url.entry.js +10 -2
- package/dist/esm/ptc-product-card.entry.js +1 -1
- package/dist/esm/ptc-product-category.entry.js +1 -1
- package/dist/esm/ptc-product-highlight-card.entry.js +1 -1
- package/dist/esm/ptc-readmore-char.entry.js +1 -1
- package/dist/esm/ptc-readmore-v3.entry.js +1 -1
- package/dist/esm/ptc-tooltip-v2.entry.js +1 -1
- package/dist/esm/ptc-value-led-layout.entry.js +1 -3
- package/dist/esm/ptc-value-led-speed-bump.entry.js +1 -1
- package/dist/esm/ptc-white-paper.entry.js +11 -11
- package/dist/esm/ptcw-design.js +1 -1
- package/dist/ptcw-design/media/designer-v6.0.6.svg +30 -2
- package/dist/ptcw-design/p-072a76d3.entry.js +1 -0
- package/dist/ptcw-design/{p-7fb155da.entry.js → p-072aa896.entry.js} +1 -1
- package/dist/ptcw-design/{p-a791c53a.entry.js → p-0b515839.entry.js} +1 -1
- package/dist/ptcw-design/p-0d223232.entry.js +1 -0
- package/dist/ptcw-design/{p-75988f52.entry.js → p-0de4cd11.entry.js} +1 -1
- package/dist/ptcw-design/{p-9f194554.entry.js → p-21aa746d.entry.js} +1 -1
- package/dist/ptcw-design/p-291072b4.entry.js +1 -0
- package/dist/ptcw-design/p-32f64f48.entry.js +1 -0
- package/dist/ptcw-design/{p-d089dc37.entry.js → p-3dd0ded9.entry.js} +1 -1
- package/dist/ptcw-design/p-3f68e2f2.entry.js +1 -0
- package/dist/ptcw-design/p-42992202.entry.js +1 -0
- package/dist/ptcw-design/{p-4d8f6f46.entry.js → p-445329ed.entry.js} +1 -1
- package/dist/ptcw-design/p-52e6613f.entry.js +1 -0
- package/dist/ptcw-design/p-672a349f.js +336 -0
- package/dist/ptcw-design/p-67c248ec.entry.js +1 -0
- package/dist/ptcw-design/p-72825cf6.entry.js +1 -0
- package/dist/ptcw-design/p-75390f63.entry.js +1 -0
- package/dist/ptcw-design/p-799afee5.entry.js +1 -0
- package/dist/ptcw-design/{p-6aa9ed95.entry.js → p-867a808f.entry.js} +1 -1
- package/dist/ptcw-design/p-94f99d2d.entry.js +1 -0
- package/dist/ptcw-design/p-9501995f.entry.js +1 -0
- package/dist/ptcw-design/p-baff4d44.entry.js +1 -0
- package/dist/ptcw-design/p-bd6af63e.entry.js +1 -0
- package/dist/ptcw-design/p-d0581b07.entry.js +68 -0
- package/dist/ptcw-design/{p-18ac526f.entry.js → p-d73cc053.entry.js} +1 -1
- package/dist/ptcw-design/p-de960790.entry.js +1 -0
- package/dist/ptcw-design/p-e6a272d9.entry.js +1 -0
- package/dist/ptcw-design/p-f4eb6d0a.entry.js +1 -0
- package/dist/ptcw-design/p-fe40421e.entry.js +1 -0
- package/dist/ptcw-design/ptcw-design.css +2 -2
- package/dist/ptcw-design/ptcw-design.esm.js +1 -1
- package/dist/types/components/organism-bundles/event-jumbotron-example/event-jumbotron-example.d.ts +0 -2
- package/dist/types/components/organism-bundles/form/modal-from-example/modal-form-example.d.ts +25 -0
- package/dist/types/components/ptc-jumbotron/ptc-jumbotron.d.ts +0 -1
- package/dist/types/components/ptc-mobile-select/ptc-mobile-select.d.ts +1 -1
- package/dist/types/components/ptc-modal/ptc-modal.d.ts +3 -1
- package/dist/types/components/ptc-office-locations/ptc-office-locations.d.ts +0 -1
- package/dist/types/components/ptc-para/ptc-para.d.ts +1 -1
- package/dist/types/components/ptc-previous-url/ptc-previous-url.d.ts +2 -0
- package/dist/types/components/ptc-white-paper/ptc-white-paper.d.ts +1 -0
- package/dist/types/components.d.ts +23 -21
- package/package.json +1 -1
- package/readme.md +5 -1
- package/dist/cjs/component-1b8ad4d2.js +0 -1819
- package/dist/cjs/ptc-icon-card-slider-example.cjs.entry.js +0 -82
- package/dist/cjs/ptc-multi-select_2.cjs.entry.js +0 -672
- package/dist/cjs/validation-messages-33a4f26b.js +0 -126
- package/dist/collection/components/organism-bundles/ptc-icon-card-slider-example/ptc-icon-card-slider-example.css +0 -1143
- package/dist/collection/components/organism-bundles/ptc-icon-card-slider-example/ptc-icon-card-slider-example.js +0 -77
- package/dist/esm/component-9beac35b.js +0 -1802
- package/dist/esm/ptc-icon-card-slider-example.entry.js +0 -78
- package/dist/esm/ptc-multi-select_2.entry.js +0 -667
- package/dist/esm/validation-messages-adbb6518.js +0 -124
- package/dist/ptcw-design/p-00e21489.entry.js +0 -1
- package/dist/ptcw-design/p-15758793.entry.js +0 -1
- package/dist/ptcw-design/p-18a5a338.js +0 -1
- package/dist/ptcw-design/p-2aa19c11.entry.js +0 -1
- package/dist/ptcw-design/p-2b32297b.entry.js +0 -1
- package/dist/ptcw-design/p-2cb2de0f.entry.js +0 -1
- package/dist/ptcw-design/p-38b782e8.entry.js +0 -1
- package/dist/ptcw-design/p-51a45b13.entry.js +0 -1
- package/dist/ptcw-design/p-593b8eff.entry.js +0 -1
- package/dist/ptcw-design/p-5dae4f30.entry.js +0 -1
- package/dist/ptcw-design/p-73a853fc.entry.js +0 -1
- package/dist/ptcw-design/p-752bba1c.entry.js +0 -1
- package/dist/ptcw-design/p-98426799.js +0 -203
- package/dist/ptcw-design/p-98844b50.js +0 -134
- package/dist/ptcw-design/p-a58698ca.entry.js +0 -1
- package/dist/ptcw-design/p-ab3d2934.entry.js +0 -1
- package/dist/ptcw-design/p-acdd9a1d.entry.js +0 -1
- package/dist/ptcw-design/p-ad821a01.entry.js +0 -1
- package/dist/ptcw-design/p-bab5bb88.entry.js +0 -1
- package/dist/ptcw-design/p-c8f68292.entry.js +0 -1
- package/dist/ptcw-design/p-d66debb3.entry.js +0 -1
- package/dist/ptcw-design/p-dd02e4d6.entry.js +0 -68
- package/dist/ptcw-design/p-e5369c4d.entry.js +0 -1
- package/dist/ptcw-design/p-f9256e3d.entry.js +0 -1
- 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
|
-
|
|
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) =>
|
|
94
|
-
|
|
95
|
-
|
|
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:
|
|
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
|
-
|
|
22
|
-
|
|
23
|
-
|
|
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
|
-
|
|
30
|
+
sizeLg: {
|
|
37
31
|
control: 'text',
|
|
38
|
-
description: '
|
|
39
|
-
defaultValue: { summary: '
|
|
40
|
-
}
|
|
32
|
+
description: 'Image solution for large screen >=1200px',
|
|
33
|
+
defaultValue: { summary: '1920x1080' }
|
|
34
|
+
},
|
|
35
|
+
sizeMd: {
|
|
36
|
+
control: 'text',
|
|
37
|
+
description: 'Image size for medium screen >=992px and <=1199px',
|
|
38
|
+
defaultValue: { summary: '1366x500' }
|
|
39
|
+
},
|
|
40
|
+
sizeSm: {
|
|
41
|
+
control: 'text',
|
|
42
|
+
description: 'Image size for small screen >=768px and <=991px',
|
|
43
|
+
defaultValue: { summary: '1240x496' }
|
|
44
|
+
},
|
|
45
|
+
sizeXs: {
|
|
46
|
+
control: 'text',
|
|
47
|
+
description: 'Image size for smallest screen <=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:
|
|
75
|
+
imgUrl: "http://s7d1.scene7.com/is/image/ptcinc/cs-boeing-planes-runway",
|
|
58
76
|
loadMode: 'lazy-bg',
|
|
59
|
-
|
|
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
|
-
|
|
40
|
-
|
|
41
|
-
|
|
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 `<
|
|
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
|
-
|
|
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:
|
|
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;
|