@ptcwebops/ptcw-design 6.3.22-beta → 6.3.22
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-1b8ad4d2.js +1819 -0
- package/dist/cjs/{component-4dd13907.js → component-35540bfb.js} +1494 -3305
- package/dist/cjs/featured-list.cjs.entry.js +1 -1
- package/dist/cjs/global-92142fb4.js +28 -0
- package/dist/cjs/innovator-toggle-container.cjs.entry.js +1 -1
- package/dist/cjs/jumbotron-sub-menu.cjs.entry.js +1 -1
- package/dist/cjs/list-item.cjs.entry.js +1 -1
- package/dist/cjs/loader.cjs.js +2 -1
- package/dist/cjs/ptc-back-to-top.cjs.entry.js +16 -1
- package/dist/cjs/ptc-bio-card.cjs.entry.js +20 -5
- package/dist/cjs/ptc-card_2.cjs.entry.js +10 -5
- package/dist/cjs/ptc-case-studies-slider.cjs.entry.js +2 -6
- package/dist/cjs/ptc-close-icon_2.cjs.entry.js +32 -17
- package/dist/cjs/ptc-data-lookup.cjs.entry.js +2 -1
- package/dist/cjs/ptc-dynamic-card.cjs.entry.js +1 -1
- package/dist/cjs/ptc-enhanced-product-listing-card.cjs.entry.js +1 -1
- package/dist/cjs/ptc-featured-list.cjs.entry.js +1 -1
- package/dist/cjs/ptc-filter-dropdown_4.cjs.entry.js +40 -9
- package/dist/cjs/ptc-filter-level-theater.cjs.entry.js +18 -3
- package/dist/cjs/{ptc-form-checkbox_4.cjs.entry.js → ptc-form-checkbox_2.cjs.entry.js} +5 -787
- package/dist/cjs/ptc-icon-list.cjs.entry.js +1 -1
- package/dist/cjs/ptc-info-tile.cjs.entry.js +2 -1
- package/dist/cjs/ptc-jumbotron.cjs.entry.js +1 -1
- package/dist/cjs/ptc-multi-select_2.cjs.entry.js +670 -0
- package/dist/cjs/ptc-nav-skip-to-content.cjs.entry.js +28 -3
- 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 +2 -10
- package/dist/cjs/ptc-pricing-packaging-table.cjs.entry.js +9 -11
- package/dist/cjs/ptc-pricing-tabs.cjs.entry.js +1 -1
- package/dist/cjs/ptc-product-card.cjs.entry.js +2 -2
- package/dist/cjs/ptc-product-category.cjs.entry.js +1 -1
- package/dist/cjs/ptc-product-dropdown.cjs.entry.js +2 -2
- package/dist/cjs/ptc-product-highlight-card.cjs.entry.js +1 -1
- package/dist/cjs/ptc-product-list.cjs.entry.js +11 -1
- package/dist/cjs/ptc-product-sidebar.cjs.entry.js +38 -6
- package/dist/cjs/ptc-quote.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-related-card-rail.cjs.entry.js +90 -32
- package/dist/cjs/ptc-theater-video-modal.cjs.entry.js +42 -8
- package/dist/cjs/ptc-tooltip-v2.cjs.entry.js +1 -1
- package/dist/cjs/ptc-value-led-speed-bump.cjs.entry.js +1 -1
- package/dist/cjs/ptc-white-paper.cjs.entry.js +6 -10
- package/dist/cjs/ptcw-design.cjs.js +2 -1
- package/dist/cjs/tab-header.cjs.entry.js +1 -1
- package/dist/cjs/validation-messages-33a4f26b.js +126 -0
- package/dist/collection/collection-manifest.json +2 -2
- package/dist/collection/components/icon-asset/media/designer-v6.0.6.svg +2 -30
- package/dist/collection/components/innovator-toggle-container/innovator-toggle-container.css +6 -6
- package/dist/collection/components/jumbotron-sub-menu/jumbotron-sub-menu.css +1 -0
- package/dist/collection/components/list-item/list-item.css +4 -0
- package/dist/collection/components/organism-bundles/bundle-featured-list/featured-list.css +3 -3
- package/dist/collection/components/ptc-back-to-top/ptc-back-to-top.css +4 -0
- package/dist/collection/components/ptc-back-to-top/ptc-back-to-top.js +15 -0
- package/dist/collection/components/ptc-bio-card/ptc-bio-card.css +10 -6
- package/dist/collection/components/ptc-bio-card/ptc-bio-card.js +19 -4
- package/dist/collection/components/ptc-case-studies-slider/ptc-case-studies-slider.css +6 -6
- package/dist/collection/components/ptc-case-studies-slider/ptc-case-studies-slider.js +1 -5
- package/dist/collection/components/ptc-container/ptc-container.js +2 -2
- package/dist/collection/components/ptc-dynamic-card/ptc-dynamic-card.css +1 -1
- package/dist/collection/components/ptc-enhanced-product-listing-card/ptc-enhanced-product-listing-card.css +16 -0
- package/dist/collection/components/ptc-featured-list/ptc-featured-list.css +6 -6
- package/dist/collection/components/ptc-filter-dropdown/ptc-filter-dropdown.css +12 -0
- package/dist/collection/components/ptc-filter-dropdown/ptc-filter-dropdown.js +29 -3
- package/dist/collection/components/ptc-filter-level-theater/ptc-filter-level-theater.css +34 -13
- package/dist/collection/components/ptc-filter-level-theater/ptc-filter-level-theater.js +17 -2
- package/dist/collection/components/ptc-icon-list/ptc-icon-list.css +3 -0
- package/dist/collection/components/ptc-info-tile/ptc-info-tile.js +20 -1
- package/dist/collection/components/ptc-jumbotron/ptc-jumbotron.css +6 -6
- package/dist/collection/components/ptc-modal/ptc-modal.css +0 -4
- package/dist/collection/components/ptc-modal/ptc-modal.js +50 -18
- package/dist/collection/components/ptc-nav-skip-to-content/ptc-nav-skip-to-content.css +7 -0
- package/dist/collection/components/ptc-nav-skip-to-content/ptc-nav-skip-to-content.js +78 -2
- package/dist/collection/components/ptc-para/ptc-para.css +0 -3
- 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.css +419 -0
- package/dist/collection/components/ptc-preloader-section/ptc-preloader-section.js +9 -4
- package/dist/collection/components/ptc-previous-url/ptc-previous-url.css +0 -16
- package/dist/collection/components/ptc-previous-url/ptc-previous-url.js +1 -27
- package/dist/collection/components/ptc-pricing-packaging-table/ptc-pricing-packaging-table.js +9 -11
- package/dist/collection/components/ptc-pricing-tabs/ptc-pricing-tabs.js +1 -1
- package/dist/collection/components/ptc-product-card/ptc-product-card.css +10 -6
- package/dist/collection/components/ptc-product-card/ptc-product-card.js +1 -1
- package/dist/collection/components/ptc-product-category/ptc-product-category.css +6 -6
- package/dist/collection/components/ptc-product-dropdown/ptc-product-dropdown.css +8 -0
- package/dist/collection/components/ptc-product-dropdown/ptc-product-dropdown.js +1 -1
- package/dist/collection/components/ptc-product-highlight-card/ptc-product-highlight-card.css +6 -6
- package/dist/collection/components/ptc-product-list/ptc-product-list.js +11 -1
- package/dist/collection/components/ptc-product-sidebar/ptc-product-sidebar.css +12 -0
- package/dist/collection/components/ptc-product-sidebar/ptc-product-sidebar.js +37 -5
- package/dist/collection/components/ptc-quote/ptc-quote.js +1 -1
- 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-related-card-rail/ptc-related-card-rail.css +1 -2
- package/dist/collection/components/ptc-related-card-rail/ptc-related-card-rail.js +113 -33
- package/dist/collection/components/ptc-textfield/ptc-textfield.js +19 -19
- package/dist/collection/components/ptc-theater-video/ptc-theater-video.css +6 -0
- package/dist/collection/components/ptc-theater-video/ptc-theater-video.js +1 -1
- package/dist/collection/components/ptc-theater-video-modal/ptc-theater-video-modal.css +15 -0
- package/dist/collection/components/ptc-theater-video-modal/ptc-theater-video-modal.js +67 -9
- package/dist/collection/components/ptc-theater-video-playlist/ptc-theater-video-playlist.js +8 -3
- package/dist/collection/components/ptc-tooltip-v2/ptc-tooltip-v2.css +6 -6
- 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 +5 -9
- package/dist/collection/components/tab-header/tab-header.js +1 -1
- package/dist/collection/global/global.js +3 -0
- package/dist/collection/stories/Card.stories.js +3 -148
- package/dist/collection/stories/Jumbotron.stories.js +727 -0
- package/dist/collection/stories/Link.stories.js +25 -13
- package/dist/collection/stories/Paragraph.stories.js +18 -10
- package/dist/collection/stories/Select.stories.js +5 -8
- package/dist/collection/stories/Textfield.stories.js +71 -28
- package/dist/collection/stories/Title.stories.js +28 -16
- package/dist/collection/utils/fef-logger.js +23 -0
- package/dist/custom-elements/index.d.ts +0 -6
- package/dist/custom-elements/index.js +424 -251
- package/dist/esm/{component-9c921cc6.js → component-8c53e377.js} +1482 -3281
- package/dist/esm/component-9beac35b.js +1802 -0
- package/dist/esm/featured-list.entry.js +1 -1
- package/dist/esm/global-c58db4a9.js +26 -0
- package/dist/esm/innovator-toggle-container.entry.js +1 -1
- package/dist/esm/jumbotron-sub-menu.entry.js +1 -1
- package/dist/esm/list-item.entry.js +1 -1
- package/dist/esm/loader.js +2 -1
- package/dist/esm/ptc-back-to-top.entry.js +16 -1
- package/dist/esm/ptc-bio-card.entry.js +20 -5
- package/dist/esm/ptc-card_2.entry.js +10 -5
- package/dist/esm/ptc-case-studies-slider.entry.js +2 -6
- package/dist/esm/ptc-close-icon_2.entry.js +32 -17
- package/dist/esm/ptc-data-lookup.entry.js +2 -1
- package/dist/esm/ptc-dynamic-card.entry.js +1 -1
- package/dist/esm/ptc-enhanced-product-listing-card.entry.js +1 -1
- package/dist/esm/ptc-featured-list.entry.js +1 -1
- package/dist/esm/ptc-filter-dropdown_4.entry.js +40 -9
- package/dist/esm/ptc-filter-level-theater.entry.js +18 -3
- package/dist/esm/{ptc-form-checkbox_4.entry.js → ptc-form-checkbox_2.entry.js} +4 -784
- package/dist/esm/ptc-icon-list.entry.js +1 -1
- package/dist/esm/ptc-info-tile.entry.js +2 -1
- package/dist/esm/ptc-jumbotron.entry.js +1 -1
- package/dist/esm/ptc-multi-select_2.entry.js +665 -0
- package/dist/esm/ptc-nav-skip-to-content.entry.js +28 -3
- 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 +2 -10
- package/dist/esm/ptc-pricing-packaging-table.entry.js +9 -11
- package/dist/esm/ptc-pricing-tabs.entry.js +1 -1
- package/dist/esm/ptc-product-card.entry.js +2 -2
- package/dist/esm/ptc-product-category.entry.js +1 -1
- package/dist/esm/ptc-product-dropdown.entry.js +2 -2
- package/dist/esm/ptc-product-highlight-card.entry.js +1 -1
- package/dist/esm/ptc-product-list.entry.js +11 -1
- package/dist/esm/ptc-product-sidebar.entry.js +38 -6
- package/dist/esm/ptc-quote.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-related-card-rail.entry.js +90 -32
- package/dist/esm/ptc-theater-video-modal.entry.js +43 -9
- package/dist/esm/ptc-tooltip-v2.entry.js +1 -1
- package/dist/esm/ptc-value-led-speed-bump.entry.js +1 -1
- package/dist/esm/ptc-white-paper.entry.js +6 -10
- package/dist/esm/ptcw-design.js +2 -1
- package/dist/esm/tab-header.entry.js +1 -1
- package/dist/esm/validation-messages-adbb6518.js +124 -0
- package/dist/ptcw-design/media/designer-v6.0.6.svg +2 -30
- package/dist/ptcw-design/p-00e21489.entry.js +1 -0
- package/dist/ptcw-design/p-02822616.entry.js +1 -0
- package/dist/ptcw-design/p-05c29cc2.entry.js +1 -0
- package/dist/ptcw-design/{p-f867ebe6.entry.js → p-0ddf2a09.entry.js} +1 -1
- package/dist/ptcw-design/p-13e338a5.entry.js +1 -0
- package/dist/ptcw-design/p-1454ba84.entry.js +1 -0
- package/dist/ptcw-design/p-18851303.entry.js +1 -0
- package/dist/ptcw-design/p-18a5a338.js +1 -0
- package/dist/ptcw-design/{p-d73cc053.entry.js → p-18ac526f.entry.js} +1 -1
- package/dist/ptcw-design/p-1feb2812.entry.js +1 -0
- package/dist/ptcw-design/{p-2cc7e2a8.entry.js → p-24776ca2.entry.js} +1 -1
- package/dist/ptcw-design/p-352e87c0.entry.js +1 -0
- package/dist/ptcw-design/p-38e5e590.entry.js +1 -0
- package/dist/ptcw-design/p-4737a0f6.entry.js +1 -0
- package/dist/ptcw-design/p-4ca956c1.entry.js +1 -0
- package/dist/ptcw-design/p-593b8eff.entry.js +1 -0
- package/dist/ptcw-design/p-66ecd7b9.entry.js +1 -0
- package/dist/ptcw-design/{p-48c5eab8.entry.js → p-68ed2afe.entry.js} +1 -1
- package/dist/ptcw-design/p-73a853fc.entry.js +1 -0
- package/dist/ptcw-design/{p-0529caaa.entry.js → p-752bba1c.entry.js} +1 -1
- package/dist/ptcw-design/p-75431fa1.entry.js +1 -0
- package/dist/ptcw-design/{p-b570e9a5.entry.js → p-757954b2.entry.js} +1 -1
- package/dist/ptcw-design/p-98426799.js +203 -0
- package/dist/ptcw-design/p-98844b50.js +134 -0
- package/dist/ptcw-design/p-a2c7df64.entry.js +1 -0
- package/dist/ptcw-design/p-a36f147a.js +1 -0
- package/dist/ptcw-design/p-a58698ca.entry.js +1 -0
- package/dist/ptcw-design/{p-0b515839.entry.js → p-a791c53a.entry.js} +1 -1
- package/dist/ptcw-design/p-acdd9a1d.entry.js +1 -0
- package/dist/ptcw-design/p-ad821a01.entry.js +1 -0
- package/dist/ptcw-design/p-b6255525.entry.js +1 -0
- package/dist/ptcw-design/p-b7fa9f2c.entry.js +1 -0
- package/dist/ptcw-design/p-b963ec8c.entry.js +68 -0
- package/dist/ptcw-design/p-bb9a879f.entry.js +1 -0
- package/dist/ptcw-design/p-bf84ecc0.entry.js +1 -0
- package/dist/ptcw-design/p-c82eaf9d.entry.js +1 -0
- package/dist/ptcw-design/p-cad4b517.entry.js +1 -0
- package/dist/ptcw-design/{p-3dd0ded9.entry.js → p-d089dc37.entry.js} +1 -1
- package/dist/ptcw-design/p-d6845e91.entry.js +1 -0
- package/dist/ptcw-design/p-db1dcce0.entry.js +1 -0
- package/dist/ptcw-design/p-ddb898c7.entry.js +1 -0
- package/dist/ptcw-design/{p-7793babb.entry.js → p-e3b1af2b.entry.js} +1 -1
- package/dist/ptcw-design/p-e6619d63.entry.js +1 -0
- package/dist/ptcw-design/p-f9256e3d.entry.js +1 -0
- package/dist/ptcw-design/p-fbd9c8fc.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/ptc-bio-card/ptc-bio-card.d.ts +1 -1
- package/dist/types/components/ptc-container/ptc-container.d.ts +1 -1
- package/dist/types/components/ptc-filter-dropdown/ptc-filter-dropdown.d.ts +2 -1
- package/dist/types/components/ptc-info-tile/ptc-info-tile.d.ts +1 -0
- package/dist/types/components/ptc-modal/ptc-modal.d.ts +2 -2
- package/dist/types/components/ptc-nav-skip-to-content/ptc-nav-skip-to-content.d.ts +6 -0
- package/dist/types/components/ptc-para/ptc-para.d.ts +1 -1
- package/dist/types/components/ptc-previous-url/ptc-previous-url.d.ts +0 -2
- package/dist/types/components/ptc-product-list/ptc-product-list.d.ts +1 -1
- package/dist/types/components/ptc-product-sidebar/ptc-product-sidebar.d.ts +6 -3
- package/dist/types/components/ptc-related-card-rail/ptc-related-card-rail.d.ts +12 -5
- package/dist/types/components/ptc-textfield/ptc-textfield.d.ts +54 -0
- package/dist/types/components/ptc-theater-video-modal/ptc-theater-video-modal.d.ts +6 -1
- package/dist/types/components/ptc-theater-video-playlist/ptc-theater-video-playlist.d.ts +1 -1
- package/dist/types/components.d.ts +132 -22
- package/dist/types/global/global.d.ts +4 -0
- package/dist/types/utils/fef-logger.d.ts +10 -0
- package/package.json +6 -2
- package/readme.md +1 -5
- package/dist/cjs/modal-form-example.cjs.entry.js +0 -94
- package/dist/collection/components/organism-bundles/form/modal-from-example/modal-form-example.css +0 -26
- package/dist/collection/components/organism-bundles/form/modal-from-example/modal-form-example.js +0 -99
- package/dist/collection/stories/organisms/eSupport/CaseTracker/preview.stories.js +0 -45
- package/dist/collection/stories/organisms/eSupport/SupportArticle/preview.stories.js +0 -47
- package/dist/collection/stories/organisms/eSupport/SupportPage/preview.stories.js +0 -157
- package/dist/esm/modal-form-example.entry.js +0 -90
- package/dist/ptcw-design/p-072a76d3.entry.js +0 -1
- package/dist/ptcw-design/p-0d223232.entry.js +0 -1
- package/dist/ptcw-design/p-0de4cd11.entry.js +0 -1
- package/dist/ptcw-design/p-21aa746d.entry.js +0 -1
- package/dist/ptcw-design/p-282b7d4e.entry.js +0 -1
- package/dist/ptcw-design/p-32f64f48.entry.js +0 -1
- package/dist/ptcw-design/p-3dac861d.entry.js +0 -1
- package/dist/ptcw-design/p-3ee2a531.entry.js +0 -1
- package/dist/ptcw-design/p-445329ed.entry.js +0 -1
- package/dist/ptcw-design/p-4b192f5e.entry.js +0 -1
- package/dist/ptcw-design/p-4f93c631.entry.js +0 -1
- package/dist/ptcw-design/p-5311c6e1.entry.js +0 -1
- package/dist/ptcw-design/p-58e91cb8.entry.js +0 -1
- package/dist/ptcw-design/p-5db7f70b.entry.js +0 -1
- package/dist/ptcw-design/p-67c248ec.entry.js +0 -1
- package/dist/ptcw-design/p-71fbb799.entry.js +0 -1
- package/dist/ptcw-design/p-75390f63.entry.js +0 -1
- package/dist/ptcw-design/p-799afee5.entry.js +0 -1
- package/dist/ptcw-design/p-7bdf1e64.entry.js +0 -1
- package/dist/ptcw-design/p-8038bf31.entry.js +0 -1
- package/dist/ptcw-design/p-9501995f.entry.js +0 -1
- package/dist/ptcw-design/p-97b9f41b.entry.js +0 -1
- package/dist/ptcw-design/p-99ee8a0e.entry.js +0 -1
- package/dist/ptcw-design/p-9d612f1f.entry.js +0 -1
- package/dist/ptcw-design/p-a89b986a.entry.js +0 -68
- package/dist/ptcw-design/p-b50f71dd.entry.js +0 -1
- package/dist/ptcw-design/p-baff4d44.entry.js +0 -1
- package/dist/ptcw-design/p-bcab66bf.js +0 -336
- package/dist/ptcw-design/p-c788f16f.entry.js +0 -1
- package/dist/ptcw-design/p-de960790.entry.js +0 -1
- package/dist/ptcw-design/p-e6a272d9.entry.js +0 -1
- package/dist/ptcw-design/p-f1734520.entry.js +0 -1
- package/dist/ptcw-design/p-fe40421e.entry.js +0 -1
- package/dist/types/components/organism-bundles/form/modal-from-example/modal-form-example.d.ts +0 -25
|
@@ -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, .
|
|
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 {
|
|
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, .
|
|
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 {
|
|
91
91
|
color: var(--color-blue-06);
|
|
92
92
|
}
|
|
93
|
-
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .
|
|
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 {
|
|
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, .
|
|
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 {
|
|
98
98
|
color: var(--color-blue-05);
|
|
99
99
|
}
|
|
100
|
-
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .
|
|
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 {
|
|
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, .
|
|
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 {
|
|
105
105
|
border-radius: var(--ptc-border-radius-standard);
|
|
106
106
|
border: 2px solid white;
|
|
107
107
|
outline: 5px solid var(--keyboard-nav-outline);
|
|
@@ -223,6 +223,10 @@ a:focus-visible {
|
|
|
223
223
|
display: block;
|
|
224
224
|
cursor: pointer;
|
|
225
225
|
}
|
|
226
|
+
:host .toggle-btn:focus-visible {
|
|
227
|
+
border-radius: var(--ptc-border-radius-standard);
|
|
228
|
+
outline: 5px solid var(--keyboard-nav-outline);
|
|
229
|
+
}
|
|
226
230
|
:host .toggle-btn svg {
|
|
227
231
|
margin-right: var(--ptc-element-spacing-03);
|
|
228
232
|
vertical-align: middle;
|
|
@@ -45,7 +45,7 @@ export class PtcProductCard {
|
|
|
45
45
|
render() {
|
|
46
46
|
return (h(Host, null, h("div", { class: "card-wrap" }, this.cardImage &&
|
|
47
47
|
h("ptc-picture", { alt: "image-test", src: this.cardImage, "display-image": "inline-block", width: '38' }), h("div", { class: "content" }, h("div", null, h("slot", { name: "title" }), h("ptc-spacer", { size: "x-small" }), h("ptc-spacer", { size: "xx-small", breakpoint: "x-small" }), h("div", null, h("slot", { name: "content" }))), h("div", { class: 'cta-wrap' }, h("slot", { name: "cta" })))), this.toggleCtaTitle &&
|
|
48
|
-
h("ptc-para", { class: "toggle-btn", "font-size": "small", "para-margin": "margin-flush", "para-line-h": "line-height-p", "para-z-index": "z-auto", onClick: () => this.togglePanel() }, h("span", { class: 'toggleText' }, this.toggleCtaTitle)), h("div", { class: 'product-highlights-container' }, h("slot", null))));
|
|
48
|
+
h("ptc-para", { class: "toggle-btn mf-listen", "font-size": "small", "para-margin": "margin-flush", "para-line-h": "line-height-p", "para-z-index": "z-auto", onClick: () => this.togglePanel(), tabIndex: 0 }, h("span", { class: 'toggleText' }, this.toggleCtaTitle)), h("div", { class: 'product-highlights-container' }, h("slot", null))));
|
|
49
49
|
}
|
|
50
50
|
static get is() { return "ptc-product-card"; }
|
|
51
51
|
static get encapsulation() { return "shadow"; }
|
|
@@ -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, .
|
|
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 {
|
|
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, .
|
|
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 {
|
|
91
91
|
color: var(--color-blue-06);
|
|
92
92
|
}
|
|
93
|
-
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .
|
|
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 {
|
|
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, .
|
|
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 {
|
|
98
98
|
color: var(--color-blue-05);
|
|
99
99
|
}
|
|
100
|
-
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .
|
|
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 {
|
|
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, .
|
|
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 {
|
|
105
105
|
border-radius: var(--ptc-border-radius-standard);
|
|
106
106
|
border: 2px solid white;
|
|
107
107
|
outline: 5px solid var(--keyboard-nav-outline);
|
|
@@ -79,6 +79,10 @@ ptc-link, ptc-square-card,
|
|
|
79
79
|
min-height: 34px;
|
|
80
80
|
box-sizing: border-box;
|
|
81
81
|
}
|
|
82
|
+
:host .dropdown .dropdown-toggle:focus-visible {
|
|
83
|
+
border-radius: var(--ptc-border-radius-standard);
|
|
84
|
+
outline: 5px solid var(--keyboard-nav-outline);
|
|
85
|
+
}
|
|
82
86
|
:host .dropdown .dropdown-toggle .dropdown-placeholder {
|
|
83
87
|
font-size: 14px;
|
|
84
88
|
color: var(--color-gray-07);
|
|
@@ -130,4 +134,8 @@ ptc-link, ptc-square-card,
|
|
|
130
134
|
width: 20px;
|
|
131
135
|
height: 20px;
|
|
132
136
|
margin-top: 0;
|
|
137
|
+
}
|
|
138
|
+
:host .checkbox-label input[type=checkbox]:focus-visible {
|
|
139
|
+
border-radius: var(--ptc-border-radius-standard);
|
|
140
|
+
outline: 5px solid var(--keyboard-nav-outline);
|
|
133
141
|
}
|
|
@@ -59,7 +59,7 @@ export class PtcProductDropdown {
|
|
|
59
59
|
this.parseOptions();
|
|
60
60
|
}
|
|
61
61
|
render() {
|
|
62
|
-
return (h(Host, null, h("div", { class: "dropdown" }, h("div", { class: "dropdown-toggle", onClick: () => this.toggleDropdown() }, h("span", { class: "dropdown-placeholder" }, this.placeholder), h("span", { class: "caret" }, h("svg", { width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M1.86537 0.917969L6.14614 4.56922L10.4269 0.917969L11.9769 2.23997L6.14614 7.21323L0.31543 2.23997L1.86537 0.917969Z", fill: "#323B42" })))), this.isOpen && (h("div", { class: "dropdown-menu" }, this.internalOptions.map((option) => (h("label", { class: "checkbox-label" }, h("input", { type: "checkbox", checked: this.selectedOptions.includes(option), onChange: () => this.handleCheckboxChange(option) }), option)))))), h("div", { class: "hidden" }, h("slot", null))));
|
|
62
|
+
return (h(Host, null, h("div", { class: "dropdown" }, h("div", { class: "dropdown-toggle", onClick: () => this.toggleDropdown(), onKeyDown: (e) => { e.key === 'Enter' ? this.toggleDropdown() : null; }, tabIndex: 0 }, h("span", { class: "dropdown-placeholder" }, this.placeholder), h("span", { class: "caret" }, h("svg", { width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M1.86537 0.917969L6.14614 4.56922L10.4269 0.917969L11.9769 2.23997L6.14614 7.21323L0.31543 2.23997L1.86537 0.917969Z", fill: "#323B42" })))), this.isOpen && (h("div", { class: "dropdown-menu" }, this.internalOptions.map((option) => (h("label", { class: "checkbox-label" }, h("input", { type: "checkbox", checked: this.selectedOptions.includes(option), onChange: () => this.handleCheckboxChange(option) }), option)))))), h("div", { class: "hidden" }, h("slot", null))));
|
|
63
63
|
}
|
|
64
64
|
static get is() { return "ptc-product-dropdown"; }
|
|
65
65
|
static get encapsulation() { return "shadow"; }
|
package/dist/collection/components/ptc-product-highlight-card/ptc-product-highlight-card.css
CHANGED
|
@@ -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, .
|
|
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 {
|
|
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, .
|
|
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 {
|
|
91
91
|
color: var(--color-blue-06);
|
|
92
92
|
}
|
|
93
|
-
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .
|
|
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 {
|
|
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, .
|
|
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 {
|
|
98
98
|
color: var(--color-blue-05);
|
|
99
99
|
}
|
|
100
|
-
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .
|
|
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 {
|
|
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, .
|
|
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 {
|
|
105
105
|
border-radius: var(--ptc-border-radius-standard);
|
|
106
106
|
border: 2px solid white;
|
|
107
107
|
outline: 5px solid var(--keyboard-nav-outline);
|
|
@@ -89,6 +89,10 @@ export class PtcProductList {
|
|
|
89
89
|
});
|
|
90
90
|
}
|
|
91
91
|
componentDidLoad() {
|
|
92
|
+
// ptcLogger.log('Component loaded!');
|
|
93
|
+
// ptcLogger.info('Component loaded!');
|
|
94
|
+
// ptcLogger.warn('Component loaded!');
|
|
95
|
+
// ptcLogger.error('Component loaded!');
|
|
92
96
|
this.addIds();
|
|
93
97
|
this.noresultSection = this.hostElement.shadowRoot.querySelector('.no-result-wrap');
|
|
94
98
|
this.productList = this.hostElement.shadowRoot.querySelector('.product-list');
|
|
@@ -96,7 +100,7 @@ export class PtcProductList {
|
|
|
96
100
|
productCards.forEach(card => {
|
|
97
101
|
const toggleBtn = (card.shadowRoot).querySelector('.toggle-btn');
|
|
98
102
|
if (toggleBtn) {
|
|
99
|
-
|
|
103
|
+
const handleToggle = () => {
|
|
100
104
|
if (card.classList.contains('has-opened')) {
|
|
101
105
|
card.classList.remove('has-opened');
|
|
102
106
|
}
|
|
@@ -104,6 +108,12 @@ export class PtcProductList {
|
|
|
104
108
|
card.classList.add('has-opened');
|
|
105
109
|
}
|
|
106
110
|
this.hideAllCards(card);
|
|
111
|
+
};
|
|
112
|
+
toggleBtn.addEventListener('click', handleToggle);
|
|
113
|
+
toggleBtn.addEventListener('keydown', (event) => {
|
|
114
|
+
if (event.key === 'Enter') {
|
|
115
|
+
handleToggle();
|
|
116
|
+
}
|
|
107
117
|
});
|
|
108
118
|
}
|
|
109
119
|
});
|
|
@@ -107,6 +107,10 @@ ptc-link, ptc-square-card,
|
|
|
107
107
|
font-size: var(--ptc-font-size-x-small);
|
|
108
108
|
text-decoration: underline;
|
|
109
109
|
}
|
|
110
|
+
:host .filter-result-wrap .result-header .clear-cta:focus-visible {
|
|
111
|
+
border-radius: var(--ptc-border-radius-standard);
|
|
112
|
+
outline: 5px solid var(--keyboard-nav-outline);
|
|
113
|
+
}
|
|
110
114
|
:host .filter-result-wrap .result-header .clear-cta.show {
|
|
111
115
|
display: block;
|
|
112
116
|
}
|
|
@@ -143,6 +147,10 @@ ptc-link, ptc-square-card,
|
|
|
143
147
|
border: 1px solid var(--color-gray-03);
|
|
144
148
|
font-size: 14px;
|
|
145
149
|
}
|
|
150
|
+
:host .filter-result-wrap .typeahead-input .input-wrap input:focus-visible {
|
|
151
|
+
border-radius: var(--ptc-border-radius-standard);
|
|
152
|
+
outline: 5px solid var(--keyboard-nav-outline);
|
|
153
|
+
}
|
|
146
154
|
:host .filter-result-wrap .typeahead-input .suggestion-wrap {
|
|
147
155
|
position: relative;
|
|
148
156
|
width: 100%;
|
|
@@ -178,6 +186,10 @@ ptc-link, ptc-square-card,
|
|
|
178
186
|
display: block;
|
|
179
187
|
font-size: 14px;
|
|
180
188
|
}
|
|
189
|
+
:host .filter-result-wrap .typeahead-input .suggestion-wrap .suggestions li:focus-visible {
|
|
190
|
+
border-radius: var(--ptc-border-radius-standard);
|
|
191
|
+
outline: 5px solid var(--keyboard-nav-outline);
|
|
192
|
+
}
|
|
181
193
|
:host .filter-result-wrap .typeahead-input .suggestion-wrap .suggestions li:first-child {
|
|
182
194
|
padding-top: 20px;
|
|
183
195
|
}
|
|
@@ -17,6 +17,7 @@ export class PtcProductSidebar {
|
|
|
17
17
|
componentDidLoad() {
|
|
18
18
|
this.productListWrap = this.hostElement.shadowRoot.querySelector('.product-list-wrap');
|
|
19
19
|
this.clearBtn = this.hostElement.shadowRoot.querySelector('.clear-cta');
|
|
20
|
+
this.inputBox = this.hostElement.shadowRoot.querySelector('#searchBox');
|
|
20
21
|
}
|
|
21
22
|
// Getting category title and products list
|
|
22
23
|
getDomData() {
|
|
@@ -74,6 +75,15 @@ export class PtcProductSidebar {
|
|
|
74
75
|
'event': e,
|
|
75
76
|
});
|
|
76
77
|
}
|
|
78
|
+
else if (e.key === 'Escape') {
|
|
79
|
+
this.clearSearch(e);
|
|
80
|
+
this.inputBox.focus();
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
handleKeyDownClearCta(e) {
|
|
84
|
+
if (e.key === 'Enter') {
|
|
85
|
+
this.clearSearch(e);
|
|
86
|
+
}
|
|
77
87
|
}
|
|
78
88
|
clearSearch(event) {
|
|
79
89
|
let input = this.hostElement.shadowRoot.querySelector('input');
|
|
@@ -103,10 +113,10 @@ export class PtcProductSidebar {
|
|
|
103
113
|
handleClick() {
|
|
104
114
|
this.suggestions = [];
|
|
105
115
|
}
|
|
106
|
-
handleclearCtaClicked(
|
|
107
|
-
const { sender, event
|
|
116
|
+
handleclearCtaClicked(eve) {
|
|
117
|
+
const { sender, event } = eve.detail;
|
|
108
118
|
if (sender) {
|
|
109
|
-
this.clearSearch(
|
|
119
|
+
this.clearSearch(event);
|
|
110
120
|
}
|
|
111
121
|
}
|
|
112
122
|
handleSelectedValues(event) {
|
|
@@ -122,9 +132,31 @@ export class PtcProductSidebar {
|
|
|
122
132
|
}
|
|
123
133
|
}
|
|
124
134
|
}
|
|
135
|
+
handleSuggestionKeyDown(e, index, suggestion) {
|
|
136
|
+
var _a;
|
|
137
|
+
const listItems = (_a = e.currentTarget.parentElement) === null || _a === void 0 ? void 0 : _a.querySelectorAll('li');
|
|
138
|
+
if (!listItems)
|
|
139
|
+
return;
|
|
140
|
+
if (e.key === 'Enter') {
|
|
141
|
+
this.handleSelectSuggestion(suggestion, e);
|
|
142
|
+
this.suggestions = [];
|
|
143
|
+
}
|
|
144
|
+
else if (e.key === 'Tab') {
|
|
145
|
+
e.preventDefault();
|
|
146
|
+
const isShift = e.shiftKey;
|
|
147
|
+
const nextIndex = isShift
|
|
148
|
+
? (index - 1 + listItems.length) % listItems.length
|
|
149
|
+
: (index + 1) % listItems.length;
|
|
150
|
+
listItems[nextIndex].focus();
|
|
151
|
+
}
|
|
152
|
+
else if (e.key === 'Escape') {
|
|
153
|
+
this.clearSearch(e);
|
|
154
|
+
this.inputBox.focus();
|
|
155
|
+
}
|
|
156
|
+
}
|
|
125
157
|
render() {
|
|
126
|
-
return (h(Host, { class: 'search-box' }, h("div", { class: "filter-result-wrap white-box" }, h("div", { class: "result-header" }, h("ptc-title", { type: "h3", "title-margin": "margin-flush", upperline: "no-upperline", "title-size": "medium", "title-height": "densest" }, this.filterResults), h("span", { class: "clear-cta", onClick: (e) => this.clearSearch(e) }, this.clearText)), h("div", { class: "sort-wrap" }, h("div", { class: "typeahead-input" }, h("label", { htmlFor: "searchBox" }, this.filterText), h("div", { class: "input-wrap" }, h("svg", { width: "19", height: "18", viewBox: "0 0 19 18", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M0.208984 0V1.2375L6.95898 7.65V14.2875L11.5715 17.8875V7.65L18.209 1.35V0H0.208984Z", fill: "#323B42" })), h("input", { type: "text", value: this.searchTerm, onInput: (event) => this.handleInputChange(event), onKeyUp: (e) => this.handleKeyUp(e), id: 'searchBox' })), this.suggestions.length > 0 &&
|
|
127
|
-
h("div", { class: "suggestion-wrap" }, h("ul", { class: "suggestions" }, this.suggestions.map((suggestion) => (h("li", { onClick: (e) => this.handleSelectSuggestion(suggestion, e) }, suggestion)))))), h("div", { class: "dropdwon-filter" }, h("label", { htmlFor: "tech-dropdown" }, this.technologyText), h("ptc-product-dropdown", { placeholder: this.selectTechnology, id: "tech-dropdown" }, this.suggestionList.map((item) => (h("span", null, item.categoryName))))))), h("ptc-spacer", { size: "large" }), h("ptc-spacer", { size: "large" }), h("div", { class: "product-list-wrap white-box" }, h("ptc-title", { type: "h3", "title-margin": "margin-flush", upperline: "no-upperline", "title-size": "medium", "title-height": "densest" }, this.jumpToProduct), this.suggestionList.map((item) => (h("div", { class: "category-list" }, h("ptc-para", { "font-size": 'x-small', "font-weight": 'w-7', "para-line-h": "line-height-densest", "para-margin": 'margin-flush' }, h("list-item", { "list-type": "list-underline", "link-href": '#' + item.categoryName }, h("ptc-tooltip", { "text-display": "inline", "text-lines": "4", "z-index": "z-2", description: item.categoryName, position: "bottom" }))), h("div", { class: "product-list" }, h("ul", null, item.products.map((product) => (h("list-item", { "list-type": "list-underline", "link-href": '#' + product }, product)))))))))));
|
|
158
|
+
return (h(Host, { class: 'search-box' }, h("div", { class: "filter-result-wrap white-box" }, h("div", { class: "result-header" }, h("ptc-title", { type: "h3", "title-margin": "margin-flush", upperline: "no-upperline", "title-size": "medium", "title-height": "densest" }, this.filterResults), h("span", { class: "clear-cta", onClick: (e) => this.clearSearch(e), tabIndex: 0, onKeyDown: (e) => { this.handleKeyDownClearCta(e); } }, this.clearText)), h("div", { class: "sort-wrap" }, h("div", { class: "typeahead-input" }, h("label", { htmlFor: "searchBox" }, this.filterText), h("div", { class: "input-wrap" }, h("svg", { width: "19", height: "18", viewBox: "0 0 19 18", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M0.208984 0V1.2375L6.95898 7.65V14.2875L11.5715 17.8875V7.65L18.209 1.35V0H0.208984Z", fill: "#323B42" })), h("input", { type: "text", value: this.searchTerm, onInput: (event) => this.handleInputChange(event), onKeyUp: (e) => this.handleKeyUp(e), id: 'searchBox' })), this.suggestions.length > 0 &&
|
|
159
|
+
h("div", { class: "suggestion-wrap" }, h("ul", { class: "suggestions" }, this.suggestions.map((suggestion, index) => (h("li", { onClick: (e) => this.handleSelectSuggestion(suggestion, e), tabIndex: 0, onKeyDown: (e) => this.handleSuggestionKeyDown(e, index, suggestion) }, suggestion)))))), h("div", { class: "dropdwon-filter" }, h("label", { htmlFor: "tech-dropdown" }, this.technologyText), h("ptc-product-dropdown", { placeholder: this.selectTechnology, id: "tech-dropdown" }, this.suggestionList.map((item) => (h("span", null, item.categoryName))))))), h("ptc-spacer", { size: "large" }), h("ptc-spacer", { size: "large" }), h("div", { class: "product-list-wrap white-box" }, h("ptc-title", { type: "h3", "title-margin": "margin-flush", upperline: "no-upperline", "title-size": "medium", "title-height": "densest" }, this.jumpToProduct), this.suggestionList.map((item) => (h("div", { class: "category-list" }, h("ptc-para", { "font-size": 'x-small', "font-weight": 'w-7', "para-line-h": "line-height-densest", "para-margin": 'margin-flush' }, h("list-item", { "list-type": "list-underline", "link-href": '#' + item.categoryName }, h("ptc-tooltip", { "text-display": "inline", "text-lines": "4", "z-index": "z-2", description: item.categoryName, position: "bottom" }))), h("div", { class: "product-list" }, h("ul", null, item.products.map((product) => (h("list-item", { "list-type": "list-underline", "link-href": '#' + product }, product)))))))))));
|
|
128
160
|
}
|
|
129
161
|
static get is() { return "ptc-product-sidebar"; }
|
|
130
162
|
static get encapsulation() { return "shadow"; }
|
|
@@ -15,7 +15,7 @@ export class PtcQuote {
|
|
|
15
15
|
}
|
|
16
16
|
render() {
|
|
17
17
|
const classMap = this.getCssClassMap();
|
|
18
|
-
return (h(Host, { class: classMap }, this.imgSrc ? (h("div", { class: "quote-media" }, this.imgSrc ? h("img", { src: this.imgSrc, alt: this.imgTitle ? this.imgTitle : 'quote Image' }) : null, this.imgTitle ? this.getImageTitle() : null)) : null, h("div", { class: "quote-content" }, this.quoteType == 'image-quote' ? h("div", { class: 'quotemarks', innerHTML: QuotationMark }) : null, h("blockquote", null, this.quoteType == 'value-led-quote' &&
|
|
18
|
+
return (h(Host, { class: classMap }, this.imgSrc ? (h("div", { class: "quote-media" }, this.imgSrc ? h("img", { src: this.imgSrc, alt: this.imgTitle ? this.imgTitle : 'quote Image' }) : null, this.imgTitle ? this.getImageTitle() : null)) : null, h("div", { class: "quote-content" }, this.quoteType == 'image-quote' ? h("div", { class: 'quotemarks', innerHTML: QuotationMark }) : null, h("blockquote", null, this.quoteType == 'value-led-quote' && this.quoteImage &&
|
|
19
19
|
h("ptc-picture", { alt: "quote", src: this.quoteImage }), h("p", null, h("slot", null)), h("span", { class: "quote-name" }, this.quoteName ? this.quoteName : null), this.ctaText && this.ctaUrl ? (h("ptc-button", { type: "link", color: "ptc-secondary", "link-href": this.ctaUrl }, this.ctaText)) : null))));
|
|
20
20
|
}
|
|
21
21
|
getCssClassMap() {
|
|
@@ -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, .
|
|
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 {
|
|
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, .
|
|
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 {
|
|
91
91
|
color: var(--color-blue-06);
|
|
92
92
|
}
|
|
93
|
-
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .
|
|
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 {
|
|
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, .
|
|
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 {
|
|
98
98
|
color: var(--color-blue-05);
|
|
99
99
|
}
|
|
100
|
-
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .
|
|
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 {
|
|
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, .
|
|
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 {
|
|
105
105
|
border-radius: var(--ptc-border-radius-standard);
|
|
106
106
|
border: 2px solid white;
|
|
107
107
|
outline: 5px solid var(--keyboard-nav-outline);
|
|
@@ -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, .
|
|
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 {
|
|
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, .
|
|
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 {
|
|
91
91
|
color: var(--color-blue-06);
|
|
92
92
|
}
|
|
93
|
-
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .
|
|
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 {
|
|
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, .
|
|
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 {
|
|
98
98
|
color: var(--color-blue-05);
|
|
99
99
|
}
|
|
100
|
-
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .
|
|
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 {
|
|
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, .
|
|
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 {
|
|
105
105
|
border-radius: var(--ptc-border-radius-standard);
|
|
106
106
|
border: 2px solid white;
|
|
107
107
|
outline: 5px solid var(--keyboard-nav-outline);
|