@ptcwebops/ptcw-design 6.4.27-beta → 6.4.29-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/event-podcast-slider-example.cjs.entry.js +1 -1
- package/dist/cjs/featured-events-slider-example.cjs.entry.js +1 -1
- package/dist/cjs/featured-list.cjs.entry.js +1 -1
- package/dist/cjs/homepage-jumbotron.cjs.entry.js +1 -1
- package/dist/cjs/icon-asset_17.cjs.entry.js +1660 -0
- package/dist/cjs/innovator-toggle-container.cjs.entry.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/ptc-bio-card.cjs.entry.js +1 -1
- package/dist/cjs/ptc-blue-pill-announcement-bar.cjs.entry.js +19 -0
- package/dist/cjs/ptc-case-studies-slider.cjs.entry.js +1 -1
- package/dist/cjs/ptc-close-icon_2.cjs.entry.js +11 -4
- 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-icon-card-slider-example.cjs.entry.js +1 -1
- package/dist/cjs/ptc-icon-component.cjs.entry.js +1 -1
- package/dist/cjs/ptc-jumbotron.cjs.entry.js +1 -1
- package/dist/cjs/ptc-overlay.cjs.entry.js +1 -1
- package/dist/cjs/ptc-podcast-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-search-field.cjs.entry.js +95 -0
- package/dist/cjs/ptc-store-card-list.cjs.entry.js +110 -0
- package/dist/cjs/ptc-store-card.cjs.entry.js +24 -0
- package/dist/cjs/ptc-subnav-v2.cjs.entry.js +2 -1
- 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 +1 -1
- package/dist/cjs/ptcw-design.cjs.js +1 -1
- package/dist/cjs/storefront-enhanced-product-list-alt-example.cjs.entry.js +1 -1
- package/dist/cjs/storefront-enhanced-product-list-example.cjs.entry.js +1 -1
- package/dist/collection/collection-manifest.json +3 -0
- package/dist/collection/components/innovator-toggle-container/innovator-toggle-container.css +4 -0
- package/dist/collection/components/organism-bundles/bundle-featured-list/featured-list.css +4 -0
- package/dist/collection/components/organism-bundles/event-podcast-slider-example/event-podcast-slider-example.css +16 -11
- package/dist/collection/components/organism-bundles/featured-events-slider-example/featured-events-slider-example.css +16 -11
- package/dist/collection/components/organism-bundles/homepage-jumbotron/homepage-jumbotron.css +16 -11
- package/dist/collection/components/organism-bundles/ptc-icon-card-slider-example/ptc-icon-card-slider-example.css +16 -11
- package/dist/collection/components/organism-bundles/storefront-enhanced-product-list-example/storefront-enhanced-product-list-example.css +16 -11
- package/dist/collection/components/ptc-bio-card/ptc-bio-card.css +4 -0
- package/dist/collection/components/ptc-blue-pill-announcement-bar/ptc-blue-pill-announcement-bar.css +93 -0
- package/dist/collection/components/ptc-blue-pill-announcement-bar/ptc-blue-pill-announcement-bar.js +18 -0
- package/dist/collection/components/ptc-case-studies-slider/ptc-case-studies-slider.css +20 -11
- package/dist/collection/components/ptc-featured-list/ptc-featured-list.css +4 -0
- package/dist/collection/components/ptc-filter-level-theater/ptc-filter-level-theater.css +4 -0
- package/dist/collection/components/ptc-icon-component/ptc-icon-component.css +16 -11
- package/dist/collection/components/ptc-jumbotron/ptc-jumbotron.css +4 -0
- package/dist/collection/components/ptc-modal/ptc-modal.css +10 -0
- package/dist/collection/components/ptc-modal/ptc-modal.js +46 -3
- package/dist/collection/components/ptc-overlay/ptc-overlay.css +4 -0
- package/dist/collection/components/ptc-overlay/ptc-overlay.js +1 -1
- package/dist/collection/components/ptc-podcast-card/ptc-podcast-card.css +4 -0
- package/dist/collection/components/ptc-product-card/ptc-product-card.css +18 -0
- package/dist/collection/components/ptc-product-category/ptc-product-category.css +4 -0
- package/dist/collection/components/ptc-product-highlight-card/ptc-product-highlight-card.css +4 -0
- package/dist/collection/components/ptc-readmore-char/ptc-readmore-char.css +4 -0
- package/dist/collection/components/ptc-readmore-v3/ptc-readmore-v3.css +4 -0
- package/dist/collection/components/ptc-seo-title/ptc-seo-title.js +3 -3
- package/dist/collection/components/ptc-store-card/ptc-store-card.css +100 -0
- package/dist/collection/components/ptc-store-card/ptc-store-card.js +25 -0
- package/dist/collection/components/ptc-store-card-list/ptc-store-card-list.css +1167 -0
- package/dist/collection/components/ptc-store-card-list/ptc-store-card-list.js +108 -0
- package/dist/collection/components/ptc-subnav-v2/ptc-subnav-v2.js +2 -1
- package/dist/collection/components/ptc-tooltip-v2/ptc-tooltip-v2.css +4 -0
- package/dist/collection/components/ptc-value-led-speed-bump/ptc-value-led-speed-bump.css +4 -0
- package/dist/collection/components/ptc-white-paper/ptc-white-paper.css +4 -0
- package/dist/collection/stories/BluePillAnnouncementBar.stories.js +19 -0
- package/dist/collection/stories/organisms/ptc/E Store Build Product/preview.stories.js +13 -2
- package/dist/collection/stories/organisms/ptc/E Store Creo Extension/preview.stories.js +798 -0
- package/dist/custom-elements/index.d.ts +18 -0
- package/dist/custom-elements/index.js +179 -31
- package/dist/esm/blog-detail-content_2.entry.js +1 -1
- package/dist/esm/blog-detail-layout.entry.js +1 -1
- package/dist/esm/blogs-search-section.entry.js +1 -1
- package/dist/esm/event-podcast-slider-example.entry.js +1 -1
- package/dist/esm/featured-events-slider-example.entry.js +1 -1
- package/dist/esm/featured-list.entry.js +1 -1
- package/dist/esm/homepage-jumbotron.entry.js +2 -2
- package/dist/esm/homepage-toggled-content.entry.js +1 -1
- package/dist/esm/icon-asset_17.entry.js +1640 -0
- package/dist/esm/innovator-toggle-container.entry.js +2 -2
- package/dist/esm/{interfaces-4caedd26.js → interfaces-7c0243be.js} +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/most-popular-news.entry.js +1 -1
- package/dist/esm/my-component.entry.js +1 -1
- package/dist/esm/ptc-accordion-item.entry.js +1 -1
- package/dist/esm/ptc-background-video.entry.js +1 -1
- package/dist/esm/ptc-bio-card.entry.js +1 -1
- package/dist/esm/ptc-blue-pill-announcement-bar.entry.js +15 -0
- package/dist/esm/ptc-case-studies-slider.entry.js +1 -1
- package/dist/esm/ptc-close-icon_2.entry.js +11 -4
- package/dist/esm/ptc-collapse-list.entry.js +1 -1
- 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_4.entry.js +1 -1
- package/dist/esm/ptc-homepage-image-feature.entry.js +1 -1
- package/dist/esm/ptc-homepage-video-background.entry.js +1 -1
- package/dist/esm/ptc-icon-card-slider-example.entry.js +1 -1
- package/dist/esm/ptc-icon-card.entry.js +1 -1
- package/dist/esm/ptc-icon-component.entry.js +1 -1
- package/dist/esm/ptc-img.entry.js +1 -1
- package/dist/esm/ptc-jumbotron.entry.js +1 -1
- package/dist/esm/ptc-link.entry.js +1 -1
- package/dist/esm/ptc-media-card.entry.js +1 -1
- package/dist/esm/ptc-overlay.entry.js +1 -1
- package/dist/esm/ptc-podcast-card.entry.js +1 -1
- package/dist/esm/ptc-pricing-packaging-table.entry.js +1 -1
- package/dist/esm/ptc-pricing-tabs.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-search-field.entry.js +91 -0
- package/dist/esm/ptc-social-icons-footer.entry.js +1 -1
- package/dist/esm/ptc-store-card-list.entry.js +106 -0
- package/dist/esm/ptc-store-card.entry.js +20 -0
- package/dist/esm/ptc-subnav-v2.entry.js +2 -1
- 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 +1 -1
- package/dist/esm/ptcw-design.js +1 -1
- package/dist/esm/storefront-enhanced-product-list-alt-example.entry.js +1 -1
- package/dist/esm/storefront-enhanced-product-list-example.entry.js +1 -1
- package/dist/esm/{utils-bdd0cc16.js → utils-a64ba942.js} +1 -1
- package/dist/ptcw-design/p-045c468a.entry.js +1 -0
- package/dist/ptcw-design/{p-2efd18d8.entry.js → p-0824f503.entry.js} +1 -1
- package/dist/ptcw-design/{p-41cec14d.entry.js → p-0dac6766.entry.js} +1 -1
- package/dist/ptcw-design/{p-784c16ce.entry.js → p-1149e673.entry.js} +1 -1
- package/dist/ptcw-design/{p-cf41ac32.entry.js → p-1b1fd60d.entry.js} +1 -1
- package/dist/ptcw-design/{p-4619f5a6.entry.js → p-1e4d0bb7.entry.js} +1 -1
- package/dist/ptcw-design/{p-138b2434.entry.js → p-20dfd7bd.entry.js} +1 -1
- package/dist/ptcw-design/{p-c7e948b2.js → p-22cf00e7.js} +1 -1
- package/dist/ptcw-design/{p-4c4a64bb.entry.js → p-27cd474f.entry.js} +1 -1
- package/dist/ptcw-design/p-2e1c6701.entry.js +1 -0
- package/dist/ptcw-design/{p-a318a793.entry.js → p-2fa5814b.entry.js} +1 -1
- package/dist/ptcw-design/{p-b154bbdb.entry.js → p-3596ce5a.entry.js} +1 -1
- package/dist/ptcw-design/p-4e8c1ba6.entry.js +1 -0
- package/dist/ptcw-design/p-4fd2afc0.entry.js +1 -0
- package/dist/ptcw-design/p-5aed43be.entry.js +1 -0
- package/dist/ptcw-design/p-63da8f22.entry.js +1 -0
- package/dist/ptcw-design/{p-a668ad65.entry.js → p-6481e853.entry.js} +1 -1
- package/dist/ptcw-design/{p-2f7b6437.entry.js → p-681d26ef.entry.js} +1 -1
- package/dist/ptcw-design/{p-20f04b2a.entry.js → p-6cfb5642.entry.js} +1 -1
- package/dist/ptcw-design/{p-9df3c31f.entry.js → p-7398874a.entry.js} +1 -1
- package/dist/ptcw-design/{p-7777753a.entry.js → p-7524411a.entry.js} +1 -1
- package/dist/ptcw-design/{p-3fbcfe0f.entry.js → p-769954c9.entry.js} +1 -1
- package/dist/ptcw-design/{p-c137315d.entry.js → p-828edda6.entry.js} +1 -1
- package/dist/ptcw-design/{p-850e6e8c.entry.js → p-83632220.entry.js} +1 -1
- package/dist/ptcw-design/{p-87215e3a.entry.js → p-87a9a028.entry.js} +1 -1
- package/dist/ptcw-design/p-8ffdd794.entry.js +1 -0
- package/dist/ptcw-design/p-93b75e12.entry.js +1 -0
- package/dist/ptcw-design/{p-a81833cd.entry.js → p-9461c4eb.entry.js} +1 -1
- package/dist/ptcw-design/{p-804dac0c.entry.js → p-a31f22a1.entry.js} +1 -1
- package/dist/ptcw-design/p-af46854e.entry.js +1 -0
- package/dist/ptcw-design/{p-e076d2ba.entry.js → p-b0fb4c93.entry.js} +1 -1
- package/dist/ptcw-design/p-b880fb62.entry.js +1 -0
- package/dist/ptcw-design/{p-d3c11c68.entry.js → p-b9966f20.entry.js} +1 -1
- package/dist/ptcw-design/{p-75c8fceb.entry.js → p-bdb2e42c.entry.js} +1 -1
- package/dist/ptcw-design/{p-3ef5c51f.entry.js → p-bdbf2c61.entry.js} +1 -1
- package/dist/ptcw-design/{p-d0013567.entry.js → p-ce39cff2.entry.js} +1 -1
- package/dist/ptcw-design/{p-0aa52a96.entry.js → p-d4dcba82.entry.js} +1 -1
- package/dist/ptcw-design/p-da4b7e23.entry.js +1 -0
- package/dist/ptcw-design/{p-83dabf2e.entry.js → p-e2da8109.entry.js} +1 -1
- package/dist/ptcw-design/p-e50a5a46.entry.js +1 -0
- package/dist/ptcw-design/p-e69a0445.entry.js +1 -0
- package/dist/ptcw-design/p-e9f834fa.entry.js +1 -0
- package/dist/ptcw-design/p-eabf87be.entry.js +1 -0
- package/dist/ptcw-design/{p-562a3e36.entry.js → p-ed49544c.entry.js} +1 -1
- package/dist/ptcw-design/{p-e65cbdb9.entry.js → p-edaf241d.entry.js} +1 -1
- package/dist/ptcw-design/{p-711bcdad.js → p-ee1183b2.js} +1 -1
- package/dist/ptcw-design/{p-5b00a563.entry.js → p-fa045097.entry.js} +1 -1
- package/dist/ptcw-design/{p-b2fcbbd8.entry.js → p-fb0f4459.entry.js} +1 -1
- package/dist/ptcw-design/p-fe445a4a.entry.js +1 -0
- package/dist/ptcw-design/ptcw-design.css +1 -1
- package/dist/ptcw-design/ptcw-design.esm.js +1 -1
- package/dist/types/components/ptc-blue-pill-announcement-bar/ptc-blue-pill-announcement-bar.d.ts +3 -0
- package/dist/types/components/ptc-modal/ptc-modal.d.ts +8 -0
- package/dist/types/components/ptc-overlay/ptc-overlay.d.ts +1 -1
- package/dist/types/components/ptc-store-card/ptc-store-card.d.ts +6 -0
- package/dist/types/components/ptc-store-card-list/ptc-store-card-list.d.ts +18 -0
- package/dist/types/components.d.ts +119 -62
- package/package.json +101 -101
- package/readme.md +23 -23
- package/dist/cjs/icon-asset_2.cjs.entry.js +0 -154
- package/dist/cjs/list-item.cjs.entry.js +0 -52
- package/dist/cjs/ptc-back-to-top.cjs.entry.js +0 -100
- package/dist/cjs/ptc-breadcrumb.cjs.entry.js +0 -63
- package/dist/cjs/ptc-button.cjs.entry.js +0 -117
- package/dist/cjs/ptc-para.cjs.entry.js +0 -139
- package/dist/cjs/ptc-picture.cjs.entry.js +0 -185
- package/dist/cjs/ptc-product-card.cjs.entry.js +0 -61
- package/dist/cjs/ptc-product-category.cjs.entry.js +0 -20
- package/dist/cjs/ptc-product-dropdown.cjs.entry.js +0 -80
- package/dist/cjs/ptc-product-highlight-card.cjs.entry.js +0 -28
- package/dist/cjs/ptc-product-list.cjs.entry.js +0 -172
- package/dist/cjs/ptc-product-sidebar.cjs.entry.js +0 -178
- package/dist/cjs/ptc-readmore.cjs.entry.js +0 -186
- package/dist/cjs/ptc-spacer.cjs.entry.js +0 -38
- package/dist/cjs/ptc-title.cjs.entry.js +0 -161
- package/dist/cjs/ptc-tooltip.cjs.entry.js +0 -113
- package/dist/esm/icon-asset_2.entry.js +0 -149
- package/dist/esm/list-item.entry.js +0 -48
- package/dist/esm/ptc-back-to-top.entry.js +0 -96
- package/dist/esm/ptc-breadcrumb.entry.js +0 -59
- package/dist/esm/ptc-button.entry.js +0 -113
- package/dist/esm/ptc-para.entry.js +0 -135
- package/dist/esm/ptc-picture.entry.js +0 -181
- package/dist/esm/ptc-product-card.entry.js +0 -57
- package/dist/esm/ptc-product-category.entry.js +0 -16
- package/dist/esm/ptc-product-dropdown.entry.js +0 -76
- package/dist/esm/ptc-product-highlight-card.entry.js +0 -24
- package/dist/esm/ptc-product-list.entry.js +0 -168
- package/dist/esm/ptc-product-sidebar.entry.js +0 -174
- package/dist/esm/ptc-readmore.entry.js +0 -182
- package/dist/esm/ptc-spacer.entry.js +0 -34
- package/dist/esm/ptc-title.entry.js +0 -157
- package/dist/esm/ptc-tooltip.entry.js +0 -109
- package/dist/ptcw-design/p-03a1e1a5.entry.js +0 -1
- package/dist/ptcw-design/p-068b64a1.entry.js +0 -1
- package/dist/ptcw-design/p-183ba1ca.entry.js +0 -1
- package/dist/ptcw-design/p-1acd3617.entry.js +0 -1
- package/dist/ptcw-design/p-1b3394a7.entry.js +0 -1
- package/dist/ptcw-design/p-2e288e60.entry.js +0 -1
- package/dist/ptcw-design/p-2f82de8f.entry.js +0 -1
- package/dist/ptcw-design/p-36d6e662.entry.js +0 -1
- package/dist/ptcw-design/p-3ed57ccf.entry.js +0 -1
- package/dist/ptcw-design/p-4313edfb.entry.js +0 -1
- package/dist/ptcw-design/p-47aa1583.entry.js +0 -1
- package/dist/ptcw-design/p-561a622f.entry.js +0 -1
- package/dist/ptcw-design/p-5d6f17e3.entry.js +0 -1
- package/dist/ptcw-design/p-674c828e.entry.js +0 -1
- package/dist/ptcw-design/p-709cc1f0.entry.js +0 -1
- package/dist/ptcw-design/p-7226670f.entry.js +0 -1
- package/dist/ptcw-design/p-73293d32.entry.js +0 -1
- package/dist/ptcw-design/p-89da867f.entry.js +0 -1
- package/dist/ptcw-design/p-8efaac1b.entry.js +0 -1
- package/dist/ptcw-design/p-a3ef1660.entry.js +0 -1
- package/dist/ptcw-design/p-b07df607.entry.js +0 -1
- package/dist/ptcw-design/p-b227c7f7.entry.js +0 -1
- package/dist/ptcw-design/p-c9762c88.entry.js +0 -1
- package/dist/ptcw-design/p-ce8480e3.entry.js +0 -1
- package/dist/ptcw-design/p-d428ba40.entry.js +0 -1
- package/dist/ptcw-design/p-e00c5964.entry.js +0 -1
- package/dist/ptcw-design/p-e1373325.entry.js +0 -1
- package/dist/ptcw-design/p-ec22d0b8.entry.js +0 -1
|
@@ -1,172 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
const index = require('./index-63ddc79c.js');
|
|
6
|
-
|
|
7
|
-
const ptcProductListCss = "h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{word-break:break-word;hyphens:manual;-webkit-hyphens:manual;-moz-hyphens:manual;-ms-hyphens:manual}@supports (hyphenate-limit-chars: 12 3 3){h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;hyphenate-limit-chars:12 3 3;hyphenate-limit-lines:2;hyphenate-limit-last:always;hyphenate-limit-zone:6%;-webkit-hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;-webkit-hyphenate-limit-chars:12 3 3;-webkit-hyphenate-limit-lines:2;-moz-hyphens:auto;-moz-hyphenate-limit-chars:12 3 3;-moz-hyphenate-limit-lines:2;-ms-hyphens:auto;-ms-hyphenate-limit-chars:12 3 3;-ms-hyphenate-limit-lines:2}}:host{display:block;padding-bottom:52px}@media only screen and (min-width: 992px){:host{padding-bottom:102px}}:host .no-result-wrap{display:none}:host .no-result-wrap.show{display:block}:host .no-result-wrap .no-result{display:flex;justify-content:center;align-items:center;min-height:160px;padding:20px;text-align:center}";
|
|
8
|
-
|
|
9
|
-
const PtcProductList = class {
|
|
10
|
-
constructor(hostRef) {
|
|
11
|
-
index.registerInstance(this, hostRef);
|
|
12
|
-
this.clearCtaClicked = index.createEvent(this, "clearCtaClicked", 7);
|
|
13
|
-
this.emptyTitle = undefined;
|
|
14
|
-
this.emptySubTitle = undefined;
|
|
15
|
-
this.clearButtonLabel = undefined;
|
|
16
|
-
}
|
|
17
|
-
handleSearchResult(event) {
|
|
18
|
-
const { sender, searchTerm } = event.detail;
|
|
19
|
-
if (sender) {
|
|
20
|
-
this.sortCards(searchTerm);
|
|
21
|
-
}
|
|
22
|
-
}
|
|
23
|
-
handleMultipleSearchResult(event) {
|
|
24
|
-
const { sender, selectedOptions } = event.detail;
|
|
25
|
-
if (sender) {
|
|
26
|
-
this.sortMultipleCards(selectedOptions);
|
|
27
|
-
}
|
|
28
|
-
}
|
|
29
|
-
handleEmptyResult(event) {
|
|
30
|
-
const { sender, searchTerm } = event.detail;
|
|
31
|
-
if (sender) {
|
|
32
|
-
this.noresultSection.classList.add("show");
|
|
33
|
-
this.sortCards(searchTerm);
|
|
34
|
-
}
|
|
35
|
-
}
|
|
36
|
-
sortMultipleCards(searchItems) {
|
|
37
|
-
const categoryList = Array.from(this.hostElement.querySelectorAll("ptc-product-category"));
|
|
38
|
-
categoryList.forEach((category) => {
|
|
39
|
-
const categoryTitle = category.getAttribute("category-title");
|
|
40
|
-
const productList = Array.from(category.querySelectorAll("ptc-product-card"));
|
|
41
|
-
if (searchItems.length > 0) {
|
|
42
|
-
const shouldDisplayCategory = searchItems.some((searchItem) => categoryTitle && categoryTitle.includes(searchItem));
|
|
43
|
-
category.style.display = shouldDisplayCategory
|
|
44
|
-
? "block"
|
|
45
|
-
: "none";
|
|
46
|
-
if (shouldDisplayCategory) {
|
|
47
|
-
productList.forEach((product) => {
|
|
48
|
-
product.style.display = "block";
|
|
49
|
-
});
|
|
50
|
-
}
|
|
51
|
-
else {
|
|
52
|
-
productList.forEach((product) => {
|
|
53
|
-
const productTitle = product.getAttribute("card-title");
|
|
54
|
-
const shouldDisplayProduct = searchItems.some((searchItem) => productTitle &&
|
|
55
|
-
productTitle.includes(searchItem));
|
|
56
|
-
product.style.display = shouldDisplayProduct
|
|
57
|
-
? "block"
|
|
58
|
-
: "none";
|
|
59
|
-
});
|
|
60
|
-
}
|
|
61
|
-
}
|
|
62
|
-
else {
|
|
63
|
-
category.style.display = "block";
|
|
64
|
-
productList.forEach((product) => {
|
|
65
|
-
product.style.display = "block";
|
|
66
|
-
});
|
|
67
|
-
}
|
|
68
|
-
});
|
|
69
|
-
}
|
|
70
|
-
// Sorting the
|
|
71
|
-
sortCards(searchItem) {
|
|
72
|
-
const categoryList = this.hostElement.querySelectorAll("ptc-product-category");
|
|
73
|
-
categoryList.forEach((category) => {
|
|
74
|
-
const categoryTitle = category.getAttribute("category-title");
|
|
75
|
-
const productList = category.querySelectorAll("ptc-product-card");
|
|
76
|
-
category.style.display = "none";
|
|
77
|
-
if (searchItem === "") {
|
|
78
|
-
category.style.display = "block";
|
|
79
|
-
productList.forEach((product) => {
|
|
80
|
-
product.style.display = "block";
|
|
81
|
-
});
|
|
82
|
-
this.noresultSection.classList.remove("show");
|
|
83
|
-
}
|
|
84
|
-
else {
|
|
85
|
-
const searchItemLowerCase = searchItem; //
|
|
86
|
-
if (searchItemLowerCase === categoryTitle) {
|
|
87
|
-
category.style.display = "block";
|
|
88
|
-
productList.forEach((product) => {
|
|
89
|
-
product.style.display = "block";
|
|
90
|
-
});
|
|
91
|
-
}
|
|
92
|
-
else {
|
|
93
|
-
productList.forEach((product) => {
|
|
94
|
-
const productTitle = product.getAttribute("card-title");
|
|
95
|
-
product.style.display = "none";
|
|
96
|
-
if (searchItemLowerCase === productTitle) {
|
|
97
|
-
product.style.display = "block";
|
|
98
|
-
category.style.display = "block";
|
|
99
|
-
}
|
|
100
|
-
});
|
|
101
|
-
}
|
|
102
|
-
}
|
|
103
|
-
});
|
|
104
|
-
}
|
|
105
|
-
componentDidLoad() {
|
|
106
|
-
// ptcLogger.log('Component loaded!');
|
|
107
|
-
// ptcLogger.info('Component loaded!');
|
|
108
|
-
// ptcLogger.warn('Component loaded!');
|
|
109
|
-
// ptcLogger.error('Component loaded!');
|
|
110
|
-
this.addIds();
|
|
111
|
-
this.noresultSection = this.hostElement.shadowRoot.querySelector(".no-result-wrap");
|
|
112
|
-
this.productList = this.hostElement.shadowRoot.querySelector(".product-list");
|
|
113
|
-
const productCards = this.hostElement.querySelectorAll("ptc-product-category ptc-product-card");
|
|
114
|
-
productCards.forEach((card) => {
|
|
115
|
-
const toggleBtn = card.shadowRoot.querySelector(".toggle-btn");
|
|
116
|
-
if (toggleBtn) {
|
|
117
|
-
const handleToggle = () => {
|
|
118
|
-
if (card.classList.contains("has-opened")) {
|
|
119
|
-
card.classList.remove("has-opened");
|
|
120
|
-
}
|
|
121
|
-
else {
|
|
122
|
-
card.classList.add("has-opened");
|
|
123
|
-
}
|
|
124
|
-
this.hideAllCards(card);
|
|
125
|
-
};
|
|
126
|
-
toggleBtn.addEventListener("click", handleToggle);
|
|
127
|
-
toggleBtn.addEventListener("keydown", (event) => {
|
|
128
|
-
if (event.key === "Enter") {
|
|
129
|
-
handleToggle();
|
|
130
|
-
}
|
|
131
|
-
});
|
|
132
|
-
}
|
|
133
|
-
});
|
|
134
|
-
}
|
|
135
|
-
hideAllCards(selectedCard) {
|
|
136
|
-
const productCards = this.hostElement.querySelectorAll("ptc-product-category ptc-product-card");
|
|
137
|
-
productCards.forEach((card) => {
|
|
138
|
-
if (selectedCard != card) {
|
|
139
|
-
card.classList.remove("has-opened");
|
|
140
|
-
}
|
|
141
|
-
});
|
|
142
|
-
}
|
|
143
|
-
handleClick(event) {
|
|
144
|
-
this.clearCtaClicked.emit({
|
|
145
|
-
sender: this,
|
|
146
|
-
event: event,
|
|
147
|
-
});
|
|
148
|
-
}
|
|
149
|
-
// Adding id to the category and product cards
|
|
150
|
-
addIds() {
|
|
151
|
-
const categoryList = this.hostElement.querySelectorAll("ptc-product-category");
|
|
152
|
-
categoryList.forEach((category) => {
|
|
153
|
-
const categoryTitle = category.getAttribute("category-title");
|
|
154
|
-
category.setAttribute("id", categoryTitle);
|
|
155
|
-
const productList = category.querySelectorAll("ptc-product-card");
|
|
156
|
-
productList.forEach((product) => {
|
|
157
|
-
const productTitle = product.getAttribute("card-title");
|
|
158
|
-
product.setAttribute("id", productTitle);
|
|
159
|
-
});
|
|
160
|
-
});
|
|
161
|
-
}
|
|
162
|
-
render() {
|
|
163
|
-
return (index.h(index.Host, null, index.h("div", { class: "product-list" }, index.h("slot", null)), index.h("div", { class: "no-result-wrap" }, index.h("div", { class: "no-result" }, index.h("div", null, index.h("ptc-title", { type: "h3", "title-margin": "margin-flush", upperline: "no-upperline", "title-size": "large" }, this.emptyTitle || "No Results Found"), index.h("ptc-para", { "font-size": "x-small" }, this.emptySubTitle ||
|
|
164
|
-
"Try changing or removing some of your filters"), index.h("ptc-button", { type: "link", color: "ptc-quaternary", target: "_blank", onClick: (e) => {
|
|
165
|
-
this.handleClick(e);
|
|
166
|
-
} }, this.clearButtonLabel || "Clear Filters"))))));
|
|
167
|
-
}
|
|
168
|
-
get hostElement() { return index.getElement(this); }
|
|
169
|
-
};
|
|
170
|
-
PtcProductList.style = ptcProductListCss;
|
|
171
|
-
|
|
172
|
-
exports.ptc_product_list = PtcProductList;
|
|
@@ -1,178 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
const index = require('./index-63ddc79c.js');
|
|
6
|
-
|
|
7
|
-
const ptcProductSidebarCss = "h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{word-break:break-word;hyphens:manual;-webkit-hyphens:manual;-moz-hyphens:manual;-ms-hyphens:manual}@supports (hyphenate-limit-chars: 12 3 3){h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;hyphenate-limit-chars:12 3 3;hyphenate-limit-lines:2;hyphenate-limit-last:always;hyphenate-limit-zone:6%;-webkit-hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;-webkit-hyphenate-limit-chars:12 3 3;-webkit-hyphenate-limit-lines:2;-moz-hyphens:auto;-moz-hyphenate-limit-chars:12 3 3;-moz-hyphenate-limit-lines:2;-ms-hyphens:auto;-ms-hyphenate-limit-chars:12 3 3;-ms-hyphenate-limit-lines:2}}:host{display:block;position:relative}:host .hide{display:none !important}:host .white-box{padding:12px;background-color:var(--color-white);border-radius:var(--ptc-border-radius-standard)}:host .sort-wrap{display:block}@media only screen and (min-width: 768px){:host .sort-wrap{display:flex;justify-content:space-between}}@media only screen and (min-width: 992px){:host .sort-wrap{display:block}}:host .filter-result-wrap label{font-size:var(--ptc-font-size-xx-small);font-weight:600}@media only screen and (min-width: 992px){:host .filter-result-wrap label{font-size:var(--ptc-font-size-x-small)}}:host .filter-result-wrap .result-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}@media only screen and (min-width: 992px){:host .filter-result-wrap .result-header{margin-bottom:26px}}:host .filter-result-wrap .result-header .clear-cta{cursor:pointer;display:none;color:var(--color-gray-07);font-size:var(--ptc-font-size-x-small);text-decoration:underline}:host .filter-result-wrap .result-header .clear-cta:focus-visible{border-radius:var(--ptc-border-radius-standard);outline:5px solid var(--keyboard-nav-outline)}:host .filter-result-wrap .result-header .clear-cta.show{display:block}:host .filter-result-wrap .typeahead-input{box-sizing:border-box;margin-bottom:14px;width:100%;margin-right:0}@media only screen and (min-width: 768px){:host .filter-result-wrap .typeahead-input{margin-right:40px}}@media only screen and (min-width: 992px){:host .filter-result-wrap .typeahead-input{margin-right:0}}:host .filter-result-wrap .typeahead-input .input-wrap{position:relative}:host .filter-result-wrap .typeahead-input .input-wrap svg{position:absolute;left:8px;top:8px}:host .filter-result-wrap .typeahead-input .input-wrap input{margin-top:4px;padding:8px 8px 8px 34px;display:block;width:100%;box-sizing:border-box;border:1px solid var(--color-gray-03);font-size:14px}:host .filter-result-wrap .typeahead-input .input-wrap input:focus-visible{border-radius:var(--ptc-border-radius-standard);outline:5px solid var(--keyboard-nav-outline)}:host .filter-result-wrap .typeahead-input .suggestion-wrap{position:relative;width:100%}:host .filter-result-wrap .typeahead-input .suggestion-wrap .suggestions{border:1px solid var(--color-gray-03);box-shadow:0px 2px 4px rgba(35, 43, 45, 0.3);background-color:var(--color-white);position:absolute;z-index:105;top:0;margin:0;width:100%;box-sizing:border-box;padding:0;max-height:400px;overflow-y:auto}:host .filter-result-wrap .typeahead-input .suggestion-wrap .suggestions::-webkit-scrollbar{width:5px}:host .filter-result-wrap .typeahead-input .suggestion-wrap .suggestions::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0, 0, 0, 0.3)}:host .filter-result-wrap .typeahead-input .suggestion-wrap .suggestions::-webkit-scrollbar-thumb{background-color:var(--color-gray-05);outline:1px solid var(--color-gray-05)}:host .filter-result-wrap .typeahead-input .suggestion-wrap .suggestions li{list-style:none;padding:10px 16px;cursor:pointer;display:block;font-size:14px}:host .filter-result-wrap .typeahead-input .suggestion-wrap .suggestions li:focus-visible{border-radius:var(--ptc-border-radius-standard);outline:5px solid var(--keyboard-nav-outline)}:host .filter-result-wrap .typeahead-input .suggestion-wrap .suggestions li:first-child{padding-top:20px}:host .filter-result-wrap .typeahead-input .suggestion-wrap .suggestions li:last-child{padding-bottom:20px}:host .filter-result-wrap .dropdwon-filter{margin-bottom:10px;width:100%}:host .product-list-wrap{display:none}@media only screen and (min-width: 992px){:host .product-list-wrap{display:block}}:host .product-list-wrap .category-list{display:block;padding:12px 4px;font-size:var(--ptc-font-size-x-small)}:host .product-list-wrap .category-list ptc-para{padding-bottom:4px;display:block}:host .product-list-wrap .category-list ul{padding-left:20px;margin:0}";
|
|
8
|
-
|
|
9
|
-
const PtcProductSidebar = class {
|
|
10
|
-
constructor(hostRef) {
|
|
11
|
-
index.registerInstance(this, hostRef);
|
|
12
|
-
this.selectedResult = index.createEvent(this, "selectedResult", 7);
|
|
13
|
-
this.clearsearch = index.createEvent(this, "clearsearch", 7);
|
|
14
|
-
this.inputChanged = index.createEvent(this, "inputChanged", 7);
|
|
15
|
-
this.emptyResult = index.createEvent(this, "emptyResult", 7);
|
|
16
|
-
this.searchTerm = "";
|
|
17
|
-
this.suggestions = [];
|
|
18
|
-
this.filterResults = "Filter Results";
|
|
19
|
-
this.filterText = "Filter";
|
|
20
|
-
this.clearText = "Clear";
|
|
21
|
-
this.technologyText = "Technology";
|
|
22
|
-
this.jumpToProduct = "Jump to Product";
|
|
23
|
-
this.selectTechnology = "Select a technology";
|
|
24
|
-
this.suggestionList = [];
|
|
25
|
-
}
|
|
26
|
-
componentWillLoad() {
|
|
27
|
-
this.getDomData();
|
|
28
|
-
}
|
|
29
|
-
componentDidLoad() {
|
|
30
|
-
this.productListWrap = this.hostElement.shadowRoot.querySelector(".product-list-wrap");
|
|
31
|
-
this.clearBtn = this.hostElement.shadowRoot.querySelector(".clear-cta");
|
|
32
|
-
this.inputBox = this.hostElement.shadowRoot.querySelector("#searchBox");
|
|
33
|
-
}
|
|
34
|
-
// Getting category title and products list
|
|
35
|
-
getDomData() {
|
|
36
|
-
const categoryList = document.querySelectorAll("ptc-product-category");
|
|
37
|
-
categoryList.forEach((category) => {
|
|
38
|
-
let categoryTitle = category.getAttribute("category-title");
|
|
39
|
-
let categoryObject = { categoryName: categoryTitle, products: [] };
|
|
40
|
-
this.suggestionList.push(categoryObject);
|
|
41
|
-
let productList = category.querySelectorAll("ptc-product-card");
|
|
42
|
-
productList.forEach((product) => {
|
|
43
|
-
let productTitle = product.getAttribute("card-title");
|
|
44
|
-
categoryObject.products.push(productTitle);
|
|
45
|
-
});
|
|
46
|
-
});
|
|
47
|
-
}
|
|
48
|
-
handleInputChange(event) {
|
|
49
|
-
const inputElement = event.target;
|
|
50
|
-
this.searchTerm = inputElement.value.toLocaleLowerCase();
|
|
51
|
-
this.clearBtn.classList.add("show");
|
|
52
|
-
this.getSuggestions();
|
|
53
|
-
this.inputChanged.emit({
|
|
54
|
-
sender: this,
|
|
55
|
-
event: event,
|
|
56
|
-
});
|
|
57
|
-
}
|
|
58
|
-
getSuggestions() {
|
|
59
|
-
const searchTerm = this.searchTerm.toLowerCase();
|
|
60
|
-
const suggestions = this.suggestionList.reduce((acc, item) => {
|
|
61
|
-
if (item.categoryName.toLowerCase().includes(searchTerm)) {
|
|
62
|
-
acc.push(item.categoryName); // Include the category if it matches the search term
|
|
63
|
-
}
|
|
64
|
-
const matchedProducts = item.products.filter((product) => product.toLowerCase().includes(searchTerm));
|
|
65
|
-
if (matchedProducts.length > 0) {
|
|
66
|
-
acc.push(...matchedProducts); // Include the matching products
|
|
67
|
-
}
|
|
68
|
-
return acc;
|
|
69
|
-
}, []);
|
|
70
|
-
this.suggestions = suggestions;
|
|
71
|
-
}
|
|
72
|
-
handleSelectSuggestion(suggestion, event) {
|
|
73
|
-
this.searchTerm = suggestion;
|
|
74
|
-
this.productListWrap.classList.add("hide");
|
|
75
|
-
this.selectedResult.emit({
|
|
76
|
-
sender: this,
|
|
77
|
-
event: event,
|
|
78
|
-
searchTerm: this.searchTerm,
|
|
79
|
-
});
|
|
80
|
-
}
|
|
81
|
-
handleKeyUp(e) {
|
|
82
|
-
const inputElement = e.target;
|
|
83
|
-
this.searchTerm = inputElement.value.toLocaleLowerCase();
|
|
84
|
-
if (e.keyCode === 13 && this.suggestions.length == 0) {
|
|
85
|
-
this.emptyResult.emit({
|
|
86
|
-
sender: this,
|
|
87
|
-
event: e,
|
|
88
|
-
});
|
|
89
|
-
}
|
|
90
|
-
else if (e.key === "Escape") {
|
|
91
|
-
this.clearSearch(e);
|
|
92
|
-
this.inputBox.focus();
|
|
93
|
-
}
|
|
94
|
-
}
|
|
95
|
-
handleKeyDownClearCta(e) {
|
|
96
|
-
if (e.key === "Enter") {
|
|
97
|
-
this.clearSearch(e);
|
|
98
|
-
}
|
|
99
|
-
}
|
|
100
|
-
clearSearch(event) {
|
|
101
|
-
let input = this.hostElement.shadowRoot.querySelector("input");
|
|
102
|
-
this.productListWrap.classList.remove("hide");
|
|
103
|
-
this.clearBtn.classList.remove("show");
|
|
104
|
-
if (input) {
|
|
105
|
-
input.value = "";
|
|
106
|
-
}
|
|
107
|
-
this.suggestions = [];
|
|
108
|
-
this.clearsearch.emit({
|
|
109
|
-
sender: this,
|
|
110
|
-
event: event,
|
|
111
|
-
searchTerm: input.value,
|
|
112
|
-
});
|
|
113
|
-
}
|
|
114
|
-
handleDropdownTouched(event) {
|
|
115
|
-
const { sender, isOpen } = event.detail;
|
|
116
|
-
if (sender) {
|
|
117
|
-
if (isOpen) {
|
|
118
|
-
let input = this.hostElement.shadowRoot.querySelector("input");
|
|
119
|
-
if (input) {
|
|
120
|
-
input.value = "";
|
|
121
|
-
}
|
|
122
|
-
}
|
|
123
|
-
}
|
|
124
|
-
}
|
|
125
|
-
handleClick() {
|
|
126
|
-
this.suggestions = [];
|
|
127
|
-
}
|
|
128
|
-
handleclearCtaClicked(eve) {
|
|
129
|
-
const { sender, event } = eve.detail;
|
|
130
|
-
if (sender) {
|
|
131
|
-
this.clearSearch(event);
|
|
132
|
-
}
|
|
133
|
-
}
|
|
134
|
-
handleSelectedValues(event) {
|
|
135
|
-
const { sender, selectedOptions } = event.detail;
|
|
136
|
-
if (sender) {
|
|
137
|
-
if (selectedOptions.length > 0) {
|
|
138
|
-
this.clearBtn.classList.add("show");
|
|
139
|
-
this.productListWrap.classList.add("hide");
|
|
140
|
-
}
|
|
141
|
-
else {
|
|
142
|
-
this.clearBtn.classList.remove("show");
|
|
143
|
-
this.productListWrap.classList.remove("hide");
|
|
144
|
-
}
|
|
145
|
-
}
|
|
146
|
-
}
|
|
147
|
-
handleSuggestionKeyDown(e, index, suggestion) {
|
|
148
|
-
var _a;
|
|
149
|
-
const listItems = (_a = e.currentTarget.parentElement) === null || _a === void 0 ? void 0 : _a.querySelectorAll("li");
|
|
150
|
-
if (!listItems)
|
|
151
|
-
return;
|
|
152
|
-
if (e.key === "Enter") {
|
|
153
|
-
this.handleSelectSuggestion(suggestion, e);
|
|
154
|
-
this.suggestions = [];
|
|
155
|
-
}
|
|
156
|
-
else if (e.key === "Tab") {
|
|
157
|
-
e.preventDefault();
|
|
158
|
-
const isShift = e.shiftKey;
|
|
159
|
-
const nextIndex = isShift
|
|
160
|
-
? (index - 1 + listItems.length) % listItems.length
|
|
161
|
-
: (index + 1) % listItems.length;
|
|
162
|
-
listItems[nextIndex].focus();
|
|
163
|
-
}
|
|
164
|
-
else if (e.key === "Escape") {
|
|
165
|
-
this.clearSearch(e);
|
|
166
|
-
this.inputBox.focus();
|
|
167
|
-
}
|
|
168
|
-
}
|
|
169
|
-
render() {
|
|
170
|
-
return (index.h(index.Host, { class: "search-box" }, index.h("div", { class: "filter-result-wrap white-box" }, index.h("div", { class: "result-header" }, index.h("ptc-title", { type: "h3", "title-margin": "margin-flush", upperline: "no-upperline", "title-size": "medium", "title-height": "densest" }, this.filterResults), index.h("span", { class: "clear-cta", onClick: (e) => this.clearSearch(e), tabIndex: 0, onKeyDown: (e) => {
|
|
171
|
-
this.handleKeyDownClearCta(e);
|
|
172
|
-
} }, this.clearText)), index.h("div", { class: "sort-wrap" }, index.h("div", { class: "typeahead-input" }, index.h("label", { htmlFor: "searchBox" }, this.filterText), index.h("div", { class: "input-wrap" }, index.h("svg", { width: "19", height: "18", viewBox: "0 0 19 18", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M0.208984 0V1.2375L6.95898 7.65V14.2875L11.5715 17.8875V7.65L18.209 1.35V0H0.208984Z", fill: "#323B42" })), index.h("input", { type: "text", value: this.searchTerm, onInput: (event) => this.handleInputChange(event), onKeyUp: (e) => this.handleKeyUp(e), id: "searchBox" })), this.suggestions.length > 0 && (index.h("div", { class: "suggestion-wrap" }, index.h("ul", { class: "suggestions" }, this.suggestions.map((suggestion, index$1) => (index.h("li", { onClick: (e) => this.handleSelectSuggestion(suggestion, e), tabIndex: 0, onKeyDown: (e) => this.handleSuggestionKeyDown(e, index$1, suggestion) }, suggestion))))))), index.h("div", { class: "dropdwon-filter" }, index.h("label", { htmlFor: "tech-dropdown" }, this.technologyText), index.h("ptc-product-dropdown", { placeholder: this.selectTechnology, id: "tech-dropdown" }, this.suggestionList.map((item) => (index.h("span", null, item.categoryName))))))), index.h("ptc-spacer", { size: "large" }), index.h("ptc-spacer", { size: "large" }), index.h("div", { class: "product-list-wrap white-box" }, index.h("ptc-title", { type: "h3", "title-margin": "margin-flush", upperline: "no-upperline", "title-size": "medium", "title-height": "densest" }, this.jumpToProduct), this.suggestionList.map((item) => (index.h("div", { class: "category-list" }, index.h("ptc-para", { "font-size": "x-small", "font-weight": "w-7", "para-line-h": "line-height-densest", "para-margin": "margin-flush" }, index.h("list-item", { "list-type": "list-underline", "link-href": "#" + item.categoryName }, index.h("ptc-tooltip", { "text-display": "inline", "text-lines": "4", "z-index": "z-2", description: item.categoryName, position: "bottom" }))), index.h("div", { class: "product-list" }, index.h("ul", null, item.products.map((product) => (index.h("list-item", { "list-type": "list-underline", "link-href": "#" + product }, product)))))))))));
|
|
173
|
-
}
|
|
174
|
-
get hostElement() { return index.getElement(this); }
|
|
175
|
-
};
|
|
176
|
-
PtcProductSidebar.style = ptcProductSidebarCss;
|
|
177
|
-
|
|
178
|
-
exports.ptc_product_sidebar = PtcProductSidebar;
|
|
@@ -1,186 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
const index = require('./index-63ddc79c.js');
|
|
6
|
-
|
|
7
|
-
const ptcReadmoreCss = "h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{word-break:break-word;hyphens:manual;-webkit-hyphens:manual;-moz-hyphens:manual;-ms-hyphens:manual}@supports (hyphenate-limit-chars: 12 3 3){h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;hyphenate-limit-chars:12 3 3;hyphenate-limit-lines:2;hyphenate-limit-last:always;hyphenate-limit-zone:6%;-webkit-hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;-webkit-hyphenate-limit-chars:12 3 3;-webkit-hyphenate-limit-lines:2;-moz-hyphens:auto;-moz-hyphenate-limit-chars:12 3 3;-moz-hyphenate-limit-lines:2;-ms-hyphens:auto;-ms-hyphenate-limit-chars:12 3 3;-ms-hyphenate-limit-lines:2}}:host{display:block}.box input{opacity:0;position:absolute;pointer-events:none}.box .read-more-text{display:-webkit-box;-webkit-box-orient:vertical;margin:0;overflow:hidden;word-wrap:break-word}.box .line1{-webkit-line-clamp:1}.box .line2{-webkit-line-clamp:2}.box .line3{-webkit-line-clamp:3}.box .line4{-webkit-line-clamp:4}.box .line5{-webkit-line-clamp:5}.box .line10{-webkit-line-clamp:10}.box input~label{display:block;position:relative;cursor:pointer;right:0;margin-top:var(--ptc-element-spacing-02);font-weight:var(--ptc-font-weight-bold);font-size:var(--ptc-font-size-x-small);line-height:var(--ptc-line-height-densest);text-decoration-line:underline;color:var(--color-hyperlink);text-align:right;margin-right:var(--ptc-element-spacing-07)}.box input~label.left{text-align:left}.box input~label.right{text-align:right}.box input~label.center{text-align:center;margin-right:0}.box label:focus-visible{outline:none}.box label:focus-visible span{border-radius:var(--ptc-border-radius-standard);outline:5px solid var(--keyboard-nav-outline)}.box .z-auto{z-index:auto}.box .z-1{z-index:1}.box .z-2{z-index:2}.box .z-3{z-index:3}.box .z-999{z-index:999}.box input:checked+.read-more-text{-webkit-line-clamp:unset !important}.box .read-more-text:not(.truncated)~label{display:none}.box .show-less-cta{display:block !important}:host .box.add-icon .read-more-cta-label span{display:inline-block;position:relative;padding-right:var(--ptc-element-spacing-03)}:host .box.add-icon .read-more-cta-label span::after{content:\"\";background-image:url(\"data:image/svg+xml,%3Csvg viewBox='0 0 10 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%2300890B' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E\");width:10px;height:7px;background-size:cover;position:absolute;right:-5px;bottom:7px}:host .box.add-icon .read-more-cta-label.show-less-cta span::after{transform:rotate(180deg)}:host .box.blue .read-more-cta-label{color:var(--color-hyperlink)}:host .box.gray .read-more-cta-label{color:var(--color-gray-10)}:host .box.green .read-more-cta-label{color:var(--color-green-07)}:host .box.initial .read-more-cta-label{color:initial}:host .box.small .read-more-cta-label{font-size:var(--ptc-font-size-x-small);line-height:var(--ptc-line-height-densest)}:host .box.medium .read-more-cta-label{font-size:var(--ptc-font-size-small);line-height:var(--ptc-line-height-p)}:host .box.large .read-more-cta-label{font-size:var(--ptc-font-size-large);line-height:var(--ptc-line-height-p)}:host .box.large.add-icon .read-more-cta-label span{padding-right:var(--ptc-element-spacing-04)}:host .box.large.add-icon .read-more-cta-label span::after{width:15px;height:10px}";
|
|
8
|
-
|
|
9
|
-
const PtcReadmore = class {
|
|
10
|
-
constructor(hostRef) {
|
|
11
|
-
index.registerInstance(this, hostRef);
|
|
12
|
-
this.readmoreToggle = index.createEvent(this, "readmoreToggle", 7);
|
|
13
|
-
/**
|
|
14
|
-
* Handle keyboard interactions
|
|
15
|
-
*/
|
|
16
|
-
this.handleKeyDown = (event) => {
|
|
17
|
-
if (event.key !== "Enter")
|
|
18
|
-
return;
|
|
19
|
-
const checkBoxEl = this.el.shadowRoot.querySelector("#expanded");
|
|
20
|
-
const cta = this.el.shadowRoot.querySelector(".read-more-cta-label");
|
|
21
|
-
if (!checkBoxEl || !cta)
|
|
22
|
-
return;
|
|
23
|
-
checkBoxEl.checked = !checkBoxEl.checked;
|
|
24
|
-
const isExpanded = checkBoxEl.checked;
|
|
25
|
-
cta.innerHTML = `<span>${isExpanded ? this.lessText || "" : this.moreText || ""}</span>`;
|
|
26
|
-
cta.classList.toggle("show-less-cta", isExpanded);
|
|
27
|
-
if (isExpanded) {
|
|
28
|
-
// Focus on the first element with tabindex="-1" within 'ptc-readmore'
|
|
29
|
-
const firstTabIndexMinusOne = this.el.querySelector('[tabindex="-1"]');
|
|
30
|
-
firstTabIndexMinusOne === null || firstTabIndexMinusOne === void 0 ? void 0 : firstTabIndexMinusOne.focus();
|
|
31
|
-
}
|
|
32
|
-
else {
|
|
33
|
-
cta.focus();
|
|
34
|
-
const readMoreText = this.el.shadowRoot.querySelector(".read-more-text");
|
|
35
|
-
readMoreText === null || readMoreText === void 0 ? void 0 : readMoreText.classList.add("truncated");
|
|
36
|
-
}
|
|
37
|
-
this.setTabIndex();
|
|
38
|
-
// if lessText content is not present then add tabindex=-1 to the more/less label
|
|
39
|
-
if (cta.textContent == "") {
|
|
40
|
-
cta.setAttribute("tabindex", "-1");
|
|
41
|
-
}
|
|
42
|
-
};
|
|
43
|
-
this.moreText = "read more";
|
|
44
|
-
this.lessText = undefined;
|
|
45
|
-
this.readMorePosition = "right";
|
|
46
|
-
this.display = "inline";
|
|
47
|
-
this.visibleLines = "line2";
|
|
48
|
-
this.visibleLinesCustom = undefined;
|
|
49
|
-
this.zIndex = "z-auto";
|
|
50
|
-
this.checked = false;
|
|
51
|
-
this.size = "small";
|
|
52
|
-
this.isIcon = false;
|
|
53
|
-
this.color = "blue";
|
|
54
|
-
this.isContentSlotted = false;
|
|
55
|
-
}
|
|
56
|
-
async updateReadmoreStatus() {
|
|
57
|
-
setTimeout(() => {
|
|
58
|
-
this.addBtnTruncated();
|
|
59
|
-
}, 100);
|
|
60
|
-
}
|
|
61
|
-
addBtnTruncated() {
|
|
62
|
-
const appRoot = this.el.shadowRoot;
|
|
63
|
-
const ps = appRoot.querySelectorAll(".read-more-text");
|
|
64
|
-
ps.forEach((p) => {
|
|
65
|
-
// if (this.visibleCharacters){
|
|
66
|
-
// const truncatedText = p.textContent.slice(0, this.visibleCharacters);
|
|
67
|
-
// p.textContent = truncatedText;
|
|
68
|
-
// }
|
|
69
|
-
p.classList[p.scrollHeight > p.clientHeight ? "add" : "remove"]("truncated");
|
|
70
|
-
});
|
|
71
|
-
}
|
|
72
|
-
// Created this function to initialize the truncate function on specific elements like tabs
|
|
73
|
-
enableAddTruncatedClass(element) {
|
|
74
|
-
const allTabHeaders = document.querySelectorAll(element);
|
|
75
|
-
for (const element of Array.from(allTabHeaders)) {
|
|
76
|
-
let tabHeader = element;
|
|
77
|
-
if (tabHeader) {
|
|
78
|
-
tabHeader.addEventListener("click", () => {
|
|
79
|
-
setTimeout(() => {
|
|
80
|
-
this.addBtnTruncated();
|
|
81
|
-
}, 100);
|
|
82
|
-
});
|
|
83
|
-
}
|
|
84
|
-
}
|
|
85
|
-
}
|
|
86
|
-
componentDidLoad() {
|
|
87
|
-
this.addBtnTruncated();
|
|
88
|
-
document.addEventListener("readystatechange", () => {
|
|
89
|
-
if (document.readyState === "complete") {
|
|
90
|
-
this.addBtnTruncated();
|
|
91
|
-
}
|
|
92
|
-
});
|
|
93
|
-
this.enableAddTruncatedClass("tab-header");
|
|
94
|
-
this.enableAddTruncatedClass("ptc-ellipsis-dropdown");
|
|
95
|
-
this.enableAddTruncatedClass("ptc-product-card");
|
|
96
|
-
// added code for tabnavigation
|
|
97
|
-
setTimeout(() => {
|
|
98
|
-
this.setTabIndex();
|
|
99
|
-
}, 400);
|
|
100
|
-
}
|
|
101
|
-
setTabIndex() {
|
|
102
|
-
var _a, _b, _c;
|
|
103
|
-
//debugger
|
|
104
|
-
let links;
|
|
105
|
-
if (!this.isContentSlotted) {
|
|
106
|
-
links = (_a = this.el) === null || _a === void 0 ? void 0 : _a.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
|
|
107
|
-
}
|
|
108
|
-
else {
|
|
109
|
-
let slot = (_b = this.el) === null || _b === void 0 ? void 0 : _b.querySelector("slot").assignedNodes();
|
|
110
|
-
links =
|
|
111
|
-
slot[0] instanceof HTMLElement
|
|
112
|
-
? slot[0].querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])')
|
|
113
|
-
: null;
|
|
114
|
-
}
|
|
115
|
-
let bottom = 999999;
|
|
116
|
-
let rects = (_c = this.el.shadowRoot
|
|
117
|
-
.querySelector(".read-more-text")) === null || _c === void 0 ? void 0 : _c.getClientRects();
|
|
118
|
-
if (rects && rects.length > 0) {
|
|
119
|
-
bottom = rects[0].bottom;
|
|
120
|
-
}
|
|
121
|
-
if (links) {
|
|
122
|
-
links.forEach((link) => {
|
|
123
|
-
let linkRects = link.getClientRects();
|
|
124
|
-
if (linkRects && linkRects.length > 0) {
|
|
125
|
-
if (linkRects[0].top < bottom) {
|
|
126
|
-
link.setAttribute("tabindex", "0");
|
|
127
|
-
}
|
|
128
|
-
else {
|
|
129
|
-
link.setAttribute("tabindex", "-1");
|
|
130
|
-
}
|
|
131
|
-
}
|
|
132
|
-
});
|
|
133
|
-
}
|
|
134
|
-
}
|
|
135
|
-
// click event handler
|
|
136
|
-
handleClick(event) {
|
|
137
|
-
var _a;
|
|
138
|
-
let links = (_a = this.el) === null || _a === void 0 ? void 0 : _a.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
|
|
139
|
-
this.addBtnTruncated();
|
|
140
|
-
// check if the input box is checked
|
|
141
|
-
this.checked = event.target.checked;
|
|
142
|
-
// Getting cta element
|
|
143
|
-
const cta = this.el.shadowRoot.querySelector(".read-more-cta-label");
|
|
144
|
-
// Updating the cta text
|
|
145
|
-
this.checked
|
|
146
|
-
? (cta.innerHTML = `<span> ${this.lessText ? this.lessText : ""} </span>`)
|
|
147
|
-
: (cta.innerHTML = `<span> ${this.moreText ? this.moreText : ""}</span>`);
|
|
148
|
-
this.checked
|
|
149
|
-
? cta.classList.add("show-less-cta")
|
|
150
|
-
: cta.classList.remove("show-less-cta");
|
|
151
|
-
// Emit the state change event
|
|
152
|
-
this.readmoreToggle.emit({
|
|
153
|
-
event: event,
|
|
154
|
-
sender: this.el,
|
|
155
|
-
isExpanded: this.checked,
|
|
156
|
-
});
|
|
157
|
-
if (links) {
|
|
158
|
-
if (this.checked) {
|
|
159
|
-
links.forEach((link) => {
|
|
160
|
-
link.setAttribute("tabindex", "0");
|
|
161
|
-
});
|
|
162
|
-
}
|
|
163
|
-
else {
|
|
164
|
-
this.setTabIndex();
|
|
165
|
-
}
|
|
166
|
-
}
|
|
167
|
-
}
|
|
168
|
-
render() {
|
|
169
|
-
const classMap = this.getCssClassMap();
|
|
170
|
-
return (index.h(index.Host, { class: this.display }, index.h("div", { class: classMap }, index.h("input", { type: "checkbox", id: "expanded", onClick: (e) => this.handleClick(e), tabIndex: -1 }), !!this.visibleLines || !!this.visibleLinesCustom ? (index.h("p", { class: `read-more-text ${this.visibleLines}`, style: {
|
|
171
|
-
WebkitLineClamp: `${this.visibleLinesCustom}`,
|
|
172
|
-
} }, index.h("slot", null))) : null, index.h("label", { onKeyDown: this.handleKeyDown, htmlFor: "expanded", role: "button", class: `${this.zIndex + " " + this.readMorePosition} read-more-cta-label mf-listen`, tabIndex: 0 }, index.h("span", null, this.moreText)))));
|
|
173
|
-
}
|
|
174
|
-
getCssClassMap() {
|
|
175
|
-
return {
|
|
176
|
-
["box"]: true,
|
|
177
|
-
[this.color]: true,
|
|
178
|
-
[this.size]: true,
|
|
179
|
-
["add-icon"]: this.isIcon,
|
|
180
|
-
};
|
|
181
|
-
}
|
|
182
|
-
get el() { return index.getElement(this); }
|
|
183
|
-
};
|
|
184
|
-
PtcReadmore.style = ptcReadmoreCss;
|
|
185
|
-
|
|
186
|
-
exports.ptc_readmore = PtcReadmore;
|
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
const index = require('./index-63ddc79c.js');
|
|
6
|
-
|
|
7
|
-
const ptcSpacerCss = ":host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;position:relative;display:block;width:12px;min-width:12px;height:12px}@media (min-width: 36em){:host{width:16px;min-width:16px;height:16px}}:host(.ptc-spacer-horizontal){display:inline-block;height:100% !important}:host(.ptc-spacer-horizontal.xx-small){width:4px;min-width:4px;height:100%}@media (min-width: 36em){:host(.ptc-spacer-horizontal.xx-small){width:4px;min-width:4px}}:host(.ptc-spacer-horizontal.x-small){width:4px;min-width:4px;height:100%}@media (min-width: 36em){:host(.ptc-spacer-horizontal.x-small){width:8px;min-width:8px}}:host(.ptc-spacer-horizontal.small){width:8px;min-width:8px;height:100%}@media (min-width: 36em){:host(.ptc-spacer-horizontal.small){width:12px;min-width:12px}}:host(.ptc-spacer-horizontal.medium){height:100%}:host(.ptc-spacer-horizontal.large){width:16px;min-width:16px;height:100%}@media (min-width: 36em){:host(.ptc-spacer-horizontal.large){width:20px;min-width:20px}}:host(.ptc-spacer-horizontal.x-large){width:20px;min-width:20px;height:100%}@media (min-width: 36em){:host(.ptc-spacer-horizontal.x-large){width:28px;min-width:28px}}:host(.ptc-spacer-horizontal.xx-large){width:28px;min-width:28px;height:100%}@media (min-width: 36em){:host(.ptc-spacer-horizontal.xx-large){width:36px;min-width:36px}}:host(.ptc-spacer-horizontal.xxx-large){width:36px;min-width:36px;height:100%}@media (min-width: 36em){:host(.ptc-spacer-horizontal.xxx-large){width:48px;min-width:48px}}:host(.ptc-spacer-horizontal.xxxx-large){width:48px;min-width:48px;height:100%}@media (min-width: 36em){:host(.ptc-spacer-horizontal.xxxx-large){width:72px;min-width:72px}}:host(.ptc-spacer-vertical.xx-small){width:100%;height:4px;min-height:4px}:host(.ptc-spacer-vertical.x-small){width:100%;height:4px;min-height:4px}@media (min-width: 36em){:host(.ptc-spacer-vertical.x-small){height:8px;min-height:8px}}:host(.ptc-spacer-vertical.small){width:100%;height:8px;min-height:8px}@media (min-width: 36em){:host(.ptc-spacer-vertical.small){height:12px;min-height:12px}}:host(.ptc-spacer-vertical.medium){width:100%}:host(.ptc-spacer-vertical.large){width:100%;height:16px;min-height:16px}@media (min-width: 36em){:host(.ptc-spacer-vertical.large){height:20px;min-height:20px}}:host(.ptc-spacer-vertical.x-large){width:100%;height:20px;min-height:20px}@media (min-width: 36em){:host(.ptc-spacer-vertical.x-large){height:28px;min-height:28px}}:host(.ptc-spacer-vertical.xx-large){width:100%;height:28px;min-height:28px}@media (min-width: 36em){:host(.ptc-spacer-vertical.xx-large){height:36px;min-height:36px}}:host(.ptc-spacer-vertical.xxx-large){width:100%;height:36px;min-height:36px}@media (min-width: 36em){:host(.ptc-spacer-vertical.xxx-large){height:48px;min-height:48px}}:host(.ptc-spacer-vertical.xxxx-large){width:100%;height:48px;min-height:48px}@media (min-width: 36em){:host(.ptc-spacer-vertical.xxxx-large){height:72px;min-height:72px}}:host(.ptc-spacer-vertical.space-144){width:100%;height:144px;min-height:144px}:host(.ptc-spacer-vertical.space-120){width:100%;height:120px;min-height:120px}:host(.ptc-spacer-vertical.space-128){width:100%;height:128px;min-height:128px}:host(.ptc-spacer-xx-small){display:none}@media (max-width: 22.5em){:host(.ptc-spacer-xx-small){display:block}}:host(.ptc-spacer-x-small){display:none}@media (max-width: 35.99em){:host(.ptc-spacer-x-small){display:block}}:host(.ptc-spacer-small){display:none}@media (min-width: 36em){:host(.ptc-spacer-small){display:block}}:host(.ptc-spacer-medium){display:none}@media (min-width: 48em){:host(.ptc-spacer-medium){display:block}}:host(.ptc-spacer-large){display:none}@media (min-width: 62em){:host(.ptc-spacer-large){display:block}}:host(.ptc-spacer-x-large){display:none}@media (min-width: 64.0625em){:host(.ptc-spacer-x-large){display:block}}:host(.ptc-spacer-xx-large){display:none}@media (min-width: 75em){:host(.ptc-spacer-xx-large){display:block}}:host(.ptc-spacer-xxx-large){display:none}@media (min-width: 90em){:host(.ptc-spacer-xxx-large){display:block}}";
|
|
8
|
-
|
|
9
|
-
const PtcSpacer = class {
|
|
10
|
-
constructor(hostRef) {
|
|
11
|
-
index.registerInstance(this, hostRef);
|
|
12
|
-
this.breakpoint = "";
|
|
13
|
-
this.size = "medium";
|
|
14
|
-
this.direction = "vertical";
|
|
15
|
-
}
|
|
16
|
-
render() {
|
|
17
|
-
const classMap = this.getCssClassMap();
|
|
18
|
-
return index.h(index.Host, { class: classMap });
|
|
19
|
-
}
|
|
20
|
-
getCssClassMap() {
|
|
21
|
-
return {
|
|
22
|
-
[this.size]: true,
|
|
23
|
-
["ptc-spacer-horizontal"]: this.direction === "horizontal",
|
|
24
|
-
["ptc-spacer-vertical"]: this.direction === "vertical",
|
|
25
|
-
["ptc-spacer-xx-small"]: this.breakpoint === "xx-small",
|
|
26
|
-
["ptc-spacer-x-small"]: this.breakpoint === "x-small",
|
|
27
|
-
["ptc-spacer-small"]: this.breakpoint === "small",
|
|
28
|
-
["ptc-spacer-medium"]: this.breakpoint === "medium",
|
|
29
|
-
["ptc-spacer-large"]: this.breakpoint === "large",
|
|
30
|
-
["ptc-spacer-x-large"]: this.breakpoint === "x-large",
|
|
31
|
-
["ptc-spacer-xx-large"]: this.breakpoint === "xx-large",
|
|
32
|
-
["ptc-spacer-xxx-large"]: this.breakpoint === "xxx-large",
|
|
33
|
-
};
|
|
34
|
-
}
|
|
35
|
-
};
|
|
36
|
-
PtcSpacer.style = ptcSpacerCss;
|
|
37
|
-
|
|
38
|
-
exports.ptc_spacer = PtcSpacer;
|