@ptcwebops/ptcw-design 1.6.0 → 1.6.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (79) hide show
  1. package/dist/cjs/bundle-jumbotron-example.cjs.entry.js +50 -0
  2. package/dist/cjs/{bundle-jumbotron-example_14.cjs.entry.js → icon-asset_16.cjs.entry.js} +406 -401
  3. package/dist/cjs/interfaces-574e6df7.js +15 -0
  4. package/dist/cjs/loader.cjs.js +1 -1
  5. package/dist/cjs/max-width-container_3.cjs.entry.js +237 -0
  6. package/dist/cjs/ptc-card.cjs.entry.js +1 -1
  7. package/dist/cjs/ptc-jumbotron.cjs.entry.js +135 -0
  8. package/dist/cjs/ptc-pricing-tabs.cjs.entry.js +1 -1
  9. package/dist/cjs/ptc-slit-card.cjs.entry.js +1 -1
  10. package/dist/cjs/ptcw-design.cjs.js +1 -1
  11. package/dist/collection/components/ptc-card/ptc-card.css +28 -179
  12. package/dist/collection/components/ptc-jumbotron/ptc-jumbotron.css +4 -0
  13. package/dist/collection/components/ptc-pricing-tabs/ptc-pricing-tabs.css +4 -0
  14. package/dist/collection/components/ptc-product-card/ptc-product-card.css +1 -1
  15. package/dist/collection/components/ptc-product-card/ptc-product-card.js +1 -19
  16. package/dist/collection/components/ptc-product-dropdown/ptc-product-dropdown.css +2 -6
  17. package/dist/collection/components/ptc-product-dropdown/ptc-product-dropdown.js +1 -1
  18. package/dist/collection/components/ptc-product-sidebar/ptc-product-sidebar.css +2 -2
  19. package/dist/collection/components/ptc-slit-card/ptc-slit-card.css +3 -0
  20. package/dist/collection/stories/Button.stories.js +43 -0
  21. package/dist/collection/stories/MaxWidthContainer.stories.js +32 -0
  22. package/dist/collection/stories/Title.stories.js +115 -0
  23. package/dist/collection/stories/assets/code-brackets.svg +1 -0
  24. package/dist/collection/stories/assets/colors.svg +1 -0
  25. package/dist/collection/stories/assets/comments.svg +1 -0
  26. package/dist/collection/stories/assets/direction.svg +1 -0
  27. package/dist/collection/stories/assets/flow.svg +1 -0
  28. package/dist/collection/stories/assets/plugin.svg +1 -0
  29. package/dist/collection/stories/assets/repo.svg +1 -0
  30. package/dist/collection/stories/assets/stackalt.svg +1 -0
  31. package/dist/custom-elements/index.js +9 -10
  32. package/dist/esm/bundle-jumbotron-example.entry.js +46 -0
  33. package/dist/esm/{bundle-jumbotron-example_14.entry.js → icon-asset_16.entry.js} +399 -396
  34. package/dist/esm/interfaces-7c0243be.js +12 -0
  35. package/dist/esm/loader.js +1 -1
  36. package/dist/esm/max-width-container_3.entry.js +231 -0
  37. package/dist/esm/ptc-card.entry.js +1 -1
  38. package/dist/esm/ptc-jumbotron.entry.js +131 -0
  39. package/dist/esm/ptc-pricing-tabs.entry.js +1 -1
  40. package/dist/esm/ptc-slit-card.entry.js +1 -1
  41. package/dist/esm/ptcw-design.js +1 -1
  42. package/dist/ptcw-design/p-00b3984e.entry.js +1 -0
  43. package/dist/ptcw-design/p-4e551e25.entry.js +1 -0
  44. package/dist/ptcw-design/p-73ea7065.entry.js +1 -0
  45. package/dist/ptcw-design/{p-2404b2db.entry.js → p-9e23fa0e.entry.js} +1 -1
  46. package/dist/ptcw-design/p-b8debc73.entry.js +1 -0
  47. package/dist/ptcw-design/p-e8c46d2e.entry.js +1 -0
  48. package/dist/ptcw-design/p-eba1521a.entry.js +1 -0
  49. package/dist/ptcw-design/p-ee1183b2.js +1 -0
  50. package/dist/ptcw-design/ptcw-design.css +1 -1
  51. package/dist/ptcw-design/ptcw-design.esm.js +1 -1
  52. package/dist/types/components/ptc-product-card/ptc-product-card.d.ts +0 -2
  53. package/dist/types/components.d.ts +0 -5
  54. package/package.json +15 -3
  55. package/readme.md +1 -1
  56. package/dist/cjs/ptc-back-to-top.cjs.entry.js +0 -46
  57. package/dist/cjs/ptc-product-card.cjs.entry.js +0 -33
  58. package/dist/cjs/ptc-product-category.cjs.entry.js +0 -21
  59. package/dist/cjs/ptc-product-dropdown.cjs.entry.js +0 -80
  60. package/dist/cjs/ptc-product-highlight-card.cjs.entry.js +0 -23
  61. package/dist/cjs/ptc-product-list.cjs.entry.js +0 -128
  62. package/dist/cjs/ptc-product-sidebar.cjs.entry.js +0 -130
  63. package/dist/esm/ptc-back-to-top.entry.js +0 -42
  64. package/dist/esm/ptc-product-card.entry.js +0 -29
  65. package/dist/esm/ptc-product-category.entry.js +0 -17
  66. package/dist/esm/ptc-product-dropdown.entry.js +0 -76
  67. package/dist/esm/ptc-product-highlight-card.entry.js +0 -19
  68. package/dist/esm/ptc-product-list.entry.js +0 -124
  69. package/dist/esm/ptc-product-sidebar.entry.js +0 -126
  70. package/dist/ptcw-design/p-046b0224.entry.js +0 -1
  71. package/dist/ptcw-design/p-19ec063d.entry.js +0 -1
  72. package/dist/ptcw-design/p-43e72cf0.entry.js +0 -1
  73. package/dist/ptcw-design/p-49dc9b68.entry.js +0 -1
  74. package/dist/ptcw-design/p-65513c45.entry.js +0 -1
  75. package/dist/ptcw-design/p-798c2328.entry.js +0 -1
  76. package/dist/ptcw-design/p-8148b960.entry.js +0 -1
  77. package/dist/ptcw-design/p-ac5dfbd0.entry.js +0 -1
  78. package/dist/ptcw-design/p-e341cb46.entry.js +0 -1
  79. package/dist/ptcw-design/p-ff1585a9.entry.js +0 -1
@@ -3,49 +3,7 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  const index = require('./index-88135a6b.js');
6
-
7
- const bundleJumbotronExampleCss = ":host{display:block}";
8
-
9
- const BundleJumbotronExample = class {
10
- constructor(hostRef) {
11
- index.registerInstance(this, hostRef);
12
- this.jumbotron = 'light';
13
- this.isIframe = false;
14
- }
15
- render() {
16
- let $pngSrc;
17
- let $gifSrc;
18
- let $bgVideoSrc;
19
- let $bgSrc;
20
- let $popupVideo;
21
- //replace dummy data
22
- if (this.jumbotron === 'light' || this.jumbotron === 'dark') {
23
- $bgSrc =
24
- 'https://images.unsplash.com/photo-1675285972028-45dc2add07be?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2Nzc3ODk2NTE&ixlib=rb-4.0.3&q=80';
25
- }
26
- else if (this.jumbotron === 'dark-video' || this.jumbotron === 'light-video') {
27
- //$bgVideoSrc = "https://www.ptc.com/-/media/Videos/wind-turbine.mp4";
28
- // if is iframe use src from iframe
29
- $bgVideoSrc = 'https://player.vimeo.com/video/749261406?h=5e6a60ffc5&muted=1&autoplay=1&loop=1&transparent=0&background=1&app_id=122963%22&controls=0';
30
- }
31
- else if (this.jumbotron === 'png') {
32
- $pngSrc =
33
- 'https://images.unsplash.com/photo-1676883343977-5f8ecc36856c?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NzgyMjcxNDU&ixlib=rb-4.0.3&q=80&w=400';
34
- }
35
- else if (this.jumbotron === 'gif') {
36
- $gifSrc = 'https://media.giphy.com/media/TDQkojbHj3wTS/giphy.gif';
37
- }
38
- //Optional: set $popupVideo
39
- //$popupVideo = "https://www.youtube.com/embed/w0mJCtK9sDY";
40
- return (index.h(index.Host, null, index.h("ptc-jumbotron", Object.assign({ "jumbotron-type": this.jumbotron }, (!!$pngSrc && { pngSrc: $pngSrc }), (!!$gifSrc && { gifSrc: $gifSrc }), (!!$bgVideoSrc && { bgVideoSrc: $bgVideoSrc }), (!!$bgSrc && { bgSrc: $bgSrc }), (!!$popupVideo ), { "sub-title": "totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo." // bind sub title data (multi-line)
41
- ,
42
- "is-iframe": this.isIframe }), index.h("ptc-breadcrumb", Object.assign({ slot: "breadcrumb" }, (this.jumbotron === 'dark' || this.jumbotron == 'dark-video' ? { color: 'white' } : { color: 'primary-gray' }), (this.jumbotron === 'text' ? { position: 'center' } : {})), index.h("list-item", Object.assign({ "list-type": "breadcrumb", "link-href": "https://www.ptc.com/contact-us" }, (this.jumbotron === 'dark' || this.jumbotron == 'dark-video' ? { color: 'light-gray' } : { color: 'primary-gray' })), "PLM Video Hub"), index.h("list-item", Object.assign({ "list-type": "breadcrumb" }, (this.jumbotron === 'dark' || this.jumbotron == 'dark-video' ? { color: 'light-gray' } : { color: 'primary-gray' })), "Current Page")), index.h("ptc-title", { slot: "main-title", type: "h1", upperline: "no-upperline", "title-size": "xxxx-large", "title-height": "densest", "title-weight": "w-8", "title-margin": "margin-flush", "text-align": "left" // if type=text, text-align=center, otherwise left
43
- ,
44
- "title-color": "gray" //if dark, dark-video then "gray-1"
45
- }, index.h("ptc-tooltip", { "text-lines": "3", description: "Sed ut perspiciatis unde omnis iste natus", position: "right" })), index.h("ptc-button", { slot: "j-cta", type: "link", color: "ptc-primary", "link-href": "https://www.ptc.com", target: "_blank" }, "Lorem ipsum dolor sit amet"), index.h("ptc-button", { slot: "j-cta", type: "link", color: "ptc-secondary", "link-href": "https://www.ptc.com", target: "_blank" }, "Lorem ipsum"))));
46
- }
47
- };
48
- BundleJumbotronExample.style = bundleJumbotronExampleCss;
6
+ const interfaces = require('./interfaces-574e6df7.js');
49
7
 
50
8
  const iconAssetCss = ".svg-inline--fa.sc-icon-asset,svg.sc-icon-asset:not(:root).svg-inline--fa{overflow:visible}.svg-inline--fa.sc-icon-asset{display:inline-block;font-size:inherit;height:1em;vertical-align:-.125em}.svg-inline--fa.fa-lg.sc-icon-asset{vertical-align:-.225em}.svg-inline--fa.fa-w-1.sc-icon-asset{width:.0625em}.svg-inline--fa.fa-w-2.sc-icon-asset{width:.125em}.svg-inline--fa.fa-w-3.sc-icon-asset{width:.1875em}.svg-inline--fa.fa-w-4.sc-icon-asset{width:.25em}.svg-inline--fa.fa-w-5.sc-icon-asset{width:.3125em}.svg-inline--fa.fa-w-6.sc-icon-asset{width:.375em}.svg-inline--fa.fa-w-7.sc-icon-asset{width:.4375em}.svg-inline--fa.fa-w-8.sc-icon-asset{width:.5em}.svg-inline--fa.fa-w-9.sc-icon-asset{width:.5625em}.svg-inline--fa.fa-w-10.sc-icon-asset{width:.625em}.svg-inline--fa.fa-w-11.sc-icon-asset{width:.6875em}.svg-inline--fa.fa-w-12.sc-icon-asset{width:.75em}.svg-inline--fa.fa-w-13.sc-icon-asset{width:.8125em}.svg-inline--fa.fa-w-14.sc-icon-asset{width:.875em}.svg-inline--fa.fa-w-15.sc-icon-asset{width:.9375em}.svg-inline--fa.fa-w-16.sc-icon-asset{width:1em}.svg-inline--fa.fa-w-17.sc-icon-asset{width:1.0625em}.svg-inline--fa.fa-w-18.sc-icon-asset{width:1.125em}.svg-inline--fa.fa-w-19.sc-icon-asset{width:1.1875em}.svg-inline--fa.fa-w-20.sc-icon-asset{width:1.25em}.svg-inline--fa.fa-pull-left.sc-icon-asset{margin-right:.3em;width:auto}.svg-inline--fa.fa-pull-right.sc-icon-asset{margin-left:.3em;width:auto}.svg-inline--fa.fa-border.sc-icon-asset{height:1.5em}.svg-inline--fa.fa-li.sc-icon-asset{width:2em}.svg-inline--fa.fa-fw.sc-icon-asset{width:1.25em}.fa-layers.sc-icon-asset svg.svg-inline--fa.sc-icon-asset{bottom:0;left:0;margin:auto;position:absolute;right:0;top:0}.fa-layers.sc-icon-asset{display:inline-block;height:1em;position:relative;text-align:center;vertical-align:-.125em;width:1em}.fa-layers.sc-icon-asset svg.svg-inline--fa.sc-icon-asset{-webkit-transform-origin:center center;transform-origin:center center}.fa-layers-counter.sc-icon-asset,.fa-layers-text.sc-icon-asset{display:inline-block;position:absolute;text-align:center}.fa-layers-text.sc-icon-asset{left:50%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);-webkit-transform-origin:center center;transform-origin:center center}.fa-layers-counter.sc-icon-asset{background-color:#ff253a;border-radius:1em;-webkit-box-sizing:border-box;box-sizing:border-box;color:#fff;height:1.5em;line-height:1;max-width:5em;min-width:1.5em;overflow:hidden;padding:.25em;right:0;text-overflow:ellipsis;top:0;-webkit-transform:scale(.25);transform:scale(.25);-webkit-transform-origin:top right;transform-origin:top right}.fa-layers-bottom-right.sc-icon-asset{bottom:0;right:0;top:auto;-webkit-transform:scale(.25);transform:scale(.25);-webkit-transform-origin:bottom right;transform-origin:bottom right}.fa-layers-bottom-left.sc-icon-asset{bottom:0;left:0;right:auto;top:auto;-webkit-transform:scale(.25);transform:scale(.25);-webkit-transform-origin:bottom left;transform-origin:bottom left}.fa-layers-top-right.sc-icon-asset{right:0;top:0;-webkit-transform:scale(.25);transform:scale(.25);-webkit-transform-origin:top right;transform-origin:top right}.fa-layers-top-left.sc-icon-asset{left:0;right:auto;top:0;-webkit-transform:scale(.25);transform:scale(.25);-webkit-transform-origin:top left;transform-origin:top left}.fa-lg.sc-icon-asset{font-size:1.33333em;line-height:.75em;vertical-align:-.0667em}.fa-xs.sc-icon-asset{font-size:.75em}.fa-sm.sc-icon-asset{font-size:.875em}.fa-1x.sc-icon-asset{font-size:1em}.fa-2x.sc-icon-asset{font-size:2em}.fa-3x.sc-icon-asset{font-size:3em}.fa-4x.sc-icon-asset{font-size:4em}.fa-5x.sc-icon-asset{font-size:5em}.fa-6x.sc-icon-asset{font-size:6em}.fa-7x.sc-icon-asset{font-size:7em}.fa-8x.sc-icon-asset{font-size:8em}.fa-9x.sc-icon-asset{font-size:9em}.fa-10x.sc-icon-asset{font-size:10em}.fa-fw.sc-icon-asset{text-align:center;width:1.25em}.fa-ul.sc-icon-asset{list-style-type:none;margin-left:2.5em;padding-left:0}.fa-ul.sc-icon-asset>li.sc-icon-asset{position:relative}.fa-li.sc-icon-asset{left:-2em;position:absolute;text-align:center;width:2em;line-height:inherit}.fa-border.sc-icon-asset{border:.08em solid #eee;border-radius:.1em;padding:.2em .25em .15em}.fa-pull-left.sc-icon-asset{float:left}.fa-pull-right.sc-icon-asset{float:right}.fa.fa-pull-left.sc-icon-asset,.fab.fa-pull-left.sc-icon-asset,.fal.fa-pull-left.sc-icon-asset,.far.fa-pull-left.sc-icon-asset,.fas.fa-pull-left.sc-icon-asset{margin-right:.3em}.fa.fa-pull-right.sc-icon-asset,.fab.fa-pull-right.sc-icon-asset,.fal.fa-pull-right.sc-icon-asset,.far.fa-pull-right.sc-icon-asset,.fas.fa-pull-right.sc-icon-asset{margin-left:.3em}.fa-spin.sc-icon-asset{-webkit-animation:fa-spin 2s linear infinite;animation:fa-spin 2s linear infinite}.fa-pulse.sc-icon-asset{-webkit-animation:fa-spin 1s steps(8) infinite;animation:fa-spin 1s steps(8) infinite}@-webkit-keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.fa-rotate-90.sc-icon-asset{-ms-filter:\"progid:DXImageTransform.Microsoft.BasicImage(rotation=1)\";-webkit-transform:rotate(90deg);transform:rotate(90deg)}.fa-rotate-180.sc-icon-asset{-ms-filter:\"progid:DXImageTransform.Microsoft.BasicImage(rotation=2)\";-webkit-transform:rotate(180deg);transform:rotate(180deg)}.fa-rotate-270.sc-icon-asset{-ms-filter:\"progid:DXImageTransform.Microsoft.BasicImage(rotation=3)\";-webkit-transform:rotate(270deg);transform:rotate(270deg)}.fa-flip-horizontal.sc-icon-asset{-ms-filter:\"progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)\";-webkit-transform:scaleX(-1);transform:scaleX(-1)}.fa-flip-vertical.sc-icon-asset{-webkit-transform:scaleY(-1);transform:scaleY(-1)}.fa-flip-both.sc-icon-asset,.fa-flip-horizontal.fa-flip-vertical.sc-icon-asset,.fa-flip-vertical.sc-icon-asset{-ms-filter:\"progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)\"}.fa-flip-both.sc-icon-asset,.fa-flip-horizontal.fa-flip-vertical.sc-icon-asset{-webkit-transform:scale(-1);transform:scale(-1)}.sc-icon-asset:root .fa-flip-both.sc-icon-asset,.sc-icon-asset:root .fa-flip-horizontal.sc-icon-asset,.sc-icon-asset:root .fa-flip-vertical.sc-icon-asset,.sc-icon-asset:root .fa-rotate-90.sc-icon-asset,.sc-icon-asset:root .fa-rotate-180.sc-icon-asset,.sc-icon-asset:root .fa-rotate-270.sc-icon-asset{-webkit-filter:none;filter:none}.fa-stack.sc-icon-asset{display:inline-block;height:2em;position:relative;width:2.5em}.fa-stack-1x.sc-icon-asset,.fa-stack-2x.sc-icon-asset{bottom:0;left:0;margin:auto;position:absolute;right:0;top:0}.svg-inline--fa.fa-stack-1x.sc-icon-asset{height:1em;width:1.25em}.svg-inline--fa.fa-stack-2x.sc-icon-asset{height:2em;width:2.5em}.fa-inverse.sc-icon-asset{color:#fff}.sr-only.sc-icon-asset{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.sr-only-focusable.sc-icon-asset:active,.sr-only-focusable.sc-icon-asset:focus{clip:auto;height:auto;margin:0;overflow:visible;position:static;width:auto}.svg-inline--fa.sc-icon-asset .fa-primary.sc-icon-asset{fill:var(--fa-primary-color,currentColor);opacity:1;opacity:var(--fa-primary-opacity,1)}.svg-inline--fa.sc-icon-asset .fa-secondary.sc-icon-asset{fill:var(--fa-secondary-color,currentColor)}.svg-inline--fa.sc-icon-asset .fa-secondary.sc-icon-asset,.svg-inline--fa.fa-swap-opacity.sc-icon-asset .fa-primary.sc-icon-asset{opacity:.4;opacity:var(--fa-secondary-opacity,.4)}.svg-inline--fa.fa-swap-opacity.sc-icon-asset .fa-secondary.sc-icon-asset{opacity:1;opacity:var(--fa-primary-opacity,1)}.svg-inline--fa.sc-icon-asset mask.sc-icon-asset .fa-primary.sc-icon-asset,.svg-inline--fa.sc-icon-asset mask.sc-icon-asset .fa-secondary.sc-icon-asset{fill:#000}.fad.fa-inverse.sc-icon-asset{color:#fff}icon-asset.sc-icon-asset{vertical-align:middle}svg.sc-icon-asset{transition:all var(--ptc-transition-medium) var(--ptc-ease-inout)}svg.micro.sc-icon-asset{width:calc(var(--ptc-font-size-x-small) / 2);height:calc(var(--ptc-font-size-x-small) / 2)}svg.xxx-small.sc-icon-asset{width:var(--ptc-font-size-xxx-small);height:var(--ptc-font-size-xxx-small)}svg.xx-small.sc-icon-asset{width:var(--ptc-font-size-xx-small);height:var(--ptc-font-size-xx-small)}svg.x-small.sc-icon-asset{width:var(--ptc-font-size-x-small);height:var(--ptc-font-size-x-small)}svg.small.sc-icon-asset{width:var(--ptc-font-size-small);height:var(--ptc-font-size-small)}svg.medium.sc-icon-asset{width:var(--ptc-font-size-medium);height:var(--ptc-font-size-medium)}svg.large.sc-icon-asset{width:var(--ptc-font-size-large);height:var(--ptc-font-size-large)}svg.x-large.sc-icon-asset{width:var(--ptc-font-size-x-large);height:var(--ptc-font-size-x-large)}svg.xx-large.sc-icon-asset{width:var(--ptc-font-size-xx-large);height:var(--ptc-font-size-xx-large)}svg.xxx-large.sc-icon-asset{width:var(--ptc-font-size-xxx-large);height:var(--ptc-font-size-xxx-large)}svg.xxxx-large.sc-icon-asset{width:var(--ptc-font-size-xxxx-large);height:var(--ptc-font-size-xxxx-large)}svg.white.sc-icon-asset{fill:var(--color-white)}svg.white.sc-icon-asset use[href$=\"#minus\"].sc-icon-asset,svg.white.sc-icon-asset use[href$=\"#plus\"].sc-icon-asset,svg.white.sc-icon-asset use[href$=\"#checkmark\"].sc-icon-asset{stroke:var(--color-white)}svg.black.sc-icon-asset{fill:var(--color-black)}svg.black.sc-icon-asset use[href$=\"#minus\"].sc-icon-asset,svg.black.sc-icon-asset use[href$=\"#plus\"].sc-icon-asset,svg.black.sc-icon-asset use[href$=\"#checkmark\"].sc-icon-asset{stroke:var(--color-black)}svg.ptc-green.sc-icon-asset{fill:var(--color-green-07)}svg.ptc-green.sc-icon-asset use[href$=\"#minus\"].sc-icon-asset,svg.ptc-green.sc-icon-asset use[href$=\"#plus\"].sc-icon-asset,svg.ptc-green.sc-icon-asset use[href$=\"#checkmark\"].sc-icon-asset{stroke:var(--color-green-07)}svg.gray.sc-icon-asset{fill:var(--color-gray-06)}svg.gray.sc-icon-asset use[href$=\"#minus\"].sc-icon-asset,svg.gray.sc-icon-asset use[href$=\"#plus\"].sc-icon-asset,svg.gray.sc-icon-asset use[href$=\"#checkmark\"].sc-icon-asset{stroke:var(--color-gray-06)}svg.light-gray.sc-icon-asset{fill:var(--color-gray-05)}svg.light-gray.sc-icon-asset use[href$=\"#minus\"].sc-icon-asset,svg.light-gray.sc-icon-asset use[href$=\"#plus\"].sc-icon-asset,svg.light-gray.sc-icon-asset use[href$=\"#checkmark\"].sc-icon-asset{stroke:var(--color-gray-05)}svg.primary-gray.sc-icon-asset{fill:var(--color-gray-10)}svg.inherit.sc-icon-asset{fill:inherit}svg.inherit.sc-icon-asset use[href$=\"#minus\"].sc-icon-asset,svg.inherit.sc-icon-asset use[href$=\"#plus\"].sc-icon-asset,svg.inherit.sc-icon-asset use[href$=\"#checkmark\"].sc-icon-asset{stroke:inherit}";
51
9
 
@@ -119,107 +77,44 @@ const ListItem = class {
119
77
  };
120
78
  ListItem.style = listItemCss;
121
79
 
122
- const maxWidthContainerCss = ":host{display:block}:host(.left){margin:auto auto auto 0}:host(.right){margin:auto 0 auto auto}:host(.center){margin:0 auto}";
80
+ const ptcBackToTopCss = ":host{display:block}:host .back-to-top-button{position:fixed;bottom:140px;right:24px;width:64px;height:58px;border:1px solid var(--color-gray-10);border-radius:var(--ptc-border-radius-standard);background-color:var(--color-white);color:var(--color-gray-10);font-size:12px;font-weight:var(--ptc-font-weight-semibold);outline:none;cursor:pointer;transition:opacity 0.3s ease-in-out;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:var(--ptc-shadow-small)}:host .back-to-top-button:hover{opacity:1}:host .arrow{margin-bottom:5px}";
123
81
 
124
- const MaxWidthContainer = class {
82
+ const PtcBackToTop = class {
125
83
  constructor(hostRef) {
126
84
  index.registerInstance(this, hostRef);
127
- this.maxWidth = undefined;
128
- this.breakpoint = 768;
129
- this.contentAlign = 'center';
130
- this.styles = undefined;
85
+ this.handleScroll = () => {
86
+ const scrollY = window.pageYOffset || document.documentElement.scrollTop;
87
+ this.showButton = scrollY > window.innerHeight * 1;
88
+ };
89
+ this.showButton = false;
131
90
  }
132
91
  componentDidLoad() {
133
- this.handleResize();
134
- window.addEventListener('resize', this.handleResize.bind(this));
92
+ window.addEventListener('scroll', this.handleScroll);
135
93
  }
136
94
  disconnectedCallback() {
137
- window.removeEventListener('resize', this.handleResize);
138
- }
139
- render() {
140
- const classMap = this.getCssClassMap();
141
- return (index.h(index.Host, { class: classMap }, this.styles && index.h("style", null, this.styles), index.h("slot", null)));
95
+ window.removeEventListener('scroll', this.handleScroll);
142
96
  }
143
- getCssClassMap() {
144
- return {
145
- [this.contentAlign]: true,
146
- };
97
+ handleClick() {
98
+ this.scrollToTop();
147
99
  }
148
- handleResize() {
149
- // const selectedContainer = this.el.querySelector('.max-width-container');
150
- if (this.el) {
151
- if (window.innerWidth >= this.breakpoint) {
152
- this.el.style.maxWidth = `${this.maxWidth}px`;
153
- }
154
- else {
155
- this.el.style.maxWidth = 'initial';
156
- }
100
+ scrollToTop() {
101
+ if ('scrollBehavior' in document.documentElement.style) {
102
+ // Smooth scrolling is supported
103
+ window.scrollTo({
104
+ top: 0,
105
+ behavior: 'smooth',
106
+ });
107
+ }
108
+ else {
109
+ // Fallback for browsers that do not support smooth scrolling
110
+ window.scrollTo(0, 0);
157
111
  }
158
- }
159
- get el() { return index.getElement(this); }
160
- };
161
- MaxWidthContainer.style = maxWidthContainerCss;
162
-
163
- const ptcBackgroundVideoCss = ":host{display:block;position:relative}:host video{position:absolute;top:0px;left:0px;right:0;width:100%;height:100%;overflow:hidden;pointer-events:none;z-index:-100;object-fit:cover}:host .video-overlay{z-index:1;display:block;position:absolute;width:100%;height:100%;top:0;left:0;opacity:0.8;background-image:linear-gradient(270deg, rgba(30, 38, 38, 0) 26%, #1e2626)}:host(.legacy){display:block;position:absolute;top:0px;left:0px;right:0;width:100%;height:100%;overflow:hidden;pointer-events:none;z-index:-100}:host(.legacy) video{object-fit:cover;position:absolute;top:0px;left:0px;right:0;width:100%;height:100%;overflow:hidden}:host .iframe-wrapper{position:absolute;top:0px;left:0px;right:0;width:100%;height:100%;overflow:hidden;pointer-events:none;z-index:-100}:host .iframe-wrapper .background-video-embed{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:100%;height:100%}:host .iframe-wrapper .player .vp-video-wrapper .vp-telecine-cover video{object-fit:cover}:host .play-button{position:absolute;top:1.5rem;right:1.5rem;width:34px;height:34px;z-index:99}@media (min-width: 768px){:host .play-button{top:unset;bottom:3.75rem;right:2rem}}";
164
-
165
- const PtcBackgroundVideo = class {
166
- constructor(hostRef) {
167
- index.registerInstance(this, hostRef);
168
- this.videoSrc = undefined;
169
- this.posterSrc = undefined;
170
- this.overlay = true;
171
- this.playButtonTitle = undefined;
172
- this.pauseButtonTitle = undefined;
173
- this.paused = undefined;
174
- this.type = 'default';
175
- this.isIframe = false;
176
- }
177
- // componentDidLoad() {
178
- // if(this.isIframe){
179
- // const iframe:HTMLIFrameElement = this.el.shadowRoot.querySelector('iframe');
180
- // const iframeDoc = iframe.contentDocument
181
- // const iframeVideo = iframeDoc.querySelector('video');
182
- // console.log("iframe ele: " + iframeDoc.querySelectorAll('video'));
183
- // iframeVideo.style.objectFit = 'cover';
184
- // }
185
- // }
186
- // @Method()
187
- // async toggleVideo() {
188
- // // show a prompt
189
- // this.paused = !this.paused;
190
- // let video = this.el.shadowRoot.querySelector('video') as HTMLVideoElement;
191
- // if (video) {
192
- // if (this.paused) {
193
- // video.pause();
194
- // } else {
195
- // video.play().catch(z => console.error(z));
196
- // }
197
- // }
198
- // console.log('Hello, I am a publish method from ptc-background-video!');
199
- // }
200
- componentWillLoad() {
201
- this.paused = false;
202
112
  }
203
113
  render() {
204
- const videoContent = this.isIframe ? (index.h("div", { class: "iframe-wrapper" }, index.h("iframe", { id: "jumbotron-iframe", src: this.videoSrc, frameborder: 0, allow: "autoplay", allowFullScreen: true, class: "background-video-embed" }))) : (index.h("video", { src: this.videoSrc, poster: this.posterSrc, autoplay: true, loop: true, muted: true, playsinline: true }));
205
- return (index.h(index.Host, { class: this.type }, videoContent, !!this.videoSrc && this.playButtonTitle && (index.h("div", { class: "play-button" }, this.paused && (index.h("ptc-tooltip", { class: "play-btn", mode: "wrapper", description: this.playButtonTitle, position: "bottom-right", styles: ".wrapper-content.sc-ptc-tooltip .tooltip.sc-ptc-tooltip{min-width:unset!important;}" }, index.h("ptc-button", { type: "button", color: "icon-toggle", onClick: e => this.toggleVideoPlay(e), styles: "button.icon-toggle { padding :0px 8px; }" }, index.h("icon-asset", { name: "play", size: "small", type: "ptc", color: "black" })))), !this.paused && !!this.pauseButtonTitle && (index.h("ptc-tooltip", { class: "pause-btn", mode: "wrapper", description: this.pauseButtonTitle, position: "bottom-right", styles: ".wrapper-content.sc-ptc-tooltip .tooltip.sc-ptc-tooltip{min-width:unset!important;}" }, index.h("ptc-button", { type: "button", color: "icon-toggle", onClick: e => this.toggleVideoPlay(e) }, index.h("icon-asset", { name: "pause", size: "small", type: "ptc", color: "black" })))))), this.overlay ? index.h("div", { class: "video-overlay" }) : '', this.type == 'default' ? index.h("slot", null) : ''));
206
- }
207
- toggleVideoPlay(e) {
208
- e.preventDefault();
209
- this.paused = !this.paused;
210
- let video = this.el.shadowRoot.querySelector('video');
211
- if (video) {
212
- if (this.paused) {
213
- video.pause();
214
- }
215
- else {
216
- video.play().catch(z => console.error(z));
217
- }
218
- }
114
+ return (index.h(index.Host, null, this.showButton && (index.h("button", { class: 'back-to-top-button', title: "Back to Top" }, index.h("span", { class: 'arrow' }, index.h("svg", { width: "18", height: "12", viewBox: "0 0 18 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M15.5248 11.625L8.9998 5.1L2.4748 11.625L0.112305 9.2625L8.9998 0.375L17.8873 9.2625L15.5248 11.625Z", fill: "#323B42" }))), index.h("span", { class: 'text' }, "Back to Top")))));
219
115
  }
220
- get el() { return index.getElement(this); }
221
116
  };
222
- PtcBackgroundVideo.style = ptcBackgroundVideoCss;
117
+ PtcBackToTop.style = ptcBackToTopCss;
223
118
 
224
119
  const ptcBreadcrumbCss = ":host{display:block;margin-top:var(--ptc-element-spacing-05)}::slotted(*){transform:translate(-2px, -2px)}:host(.left){display:flex;justify-content:flex-start;align-items:flex-end}:host(.center){display:flex;justify-content:center}:host(.right){display:flex;justify-content:flex-end}:host(.remove-top-margin){margin-top:0px !important}";
225
120
 
@@ -283,270 +178,6 @@ const PtcButton = class {
283
178
  };
284
179
  PtcButton.style = ptcButtonCss;
285
180
 
286
- let ResponsiveBgVariables = {
287
- envs: ['xs', 'sm', 'md', 'lg'],
288
- selector: '.ptc-img',
289
- interval: 250
290
- };
291
- let ResponsivePictureVariables = {
292
- envs: ['xs', 'sm', 'md', 'lg'],
293
- selector: '.ptc-picture',
294
- interval: 250
295
- };
296
-
297
- const ptcImgCss = ".smart-bg{width:100%;height:100%;background-size:cover;background-repeat:no-repeat;background-position:50% 50%}.smart-img{position:absolute;display:block;width:100%;height:100%;top:0;left:0;background-size:cover;background-repeat:no-repeat;background-position:50% 50%}.radius-standard{border-radius:var(--ptc-border-radius-standard)}.radius-standard-top{border-top-left-radius:var(--ptc-border-radius-standard);border-top-right-radius:var(--ptc-border-radius-standard)}.radius-large{border-radius:var(--ptc-border-radius-large)}.radius-large-top{border-top-left-radius:var(--ptc-border-radius-large);border-top-right-radius:var(--ptc-border-radius-large)}.lazy-bg{background-image:none !important;background-color:var(--color-gray-03)}@media only screen and (min-width: 768px){.hidden-xs{display:none !important}}@media (min-width: 768px) and (max-width: 991px){.hidden-sm{display:none !important}}@media (min-width: 992px) and (max-width: 1199px){.hidden-md{display:none !important}}@media only screen and (min-width: 768px){.hidden-lg{display:none !important}}";
298
-
299
- const PtcImg = class {
300
- constructor(hostRef) {
301
- index.registerInstance(this, hostRef);
302
- this.sizeXs = '510x340';
303
- this.sizeSm = '1240x496';
304
- this.sizeMd = '1366x500';
305
- this.sizeLg = '1920x1080';
306
- this.imgUrl = undefined;
307
- this.imageType = 'smart-bg';
308
- this.borderRadius = '';
309
- this.loadMode = 'lazy-bg';
310
- this.styles = undefined;
311
- }
312
- /**
313
- * Image Z Index
314
- */
315
- // @Prop() imageZIndex: 'z-index-auto' | 'z-index-n-2' | 'z-index-n-1' | 'z-index-p-1' | 'z-index-p-2' = 'z-index-auto';
316
- WindowResize() {
317
- this.setResponsiveBg();
318
- }
319
- render() {
320
- const classMap = this.getCssClassMap();
321
- return (index.h(index.Host, null, this.styles && index.h("style", null, this.styles), index.h("div", { class: classMap, "data-xs": `${this.imgUrl}:${this.sizeXs}`, "data-sm": `${this.imgUrl}:${this.sizeSm}`, "data-md": `${this.imgUrl}:${this.sizeMd}`, "data-lg": `${this.imgUrl}:${this.sizeLg}` }, this.imageType == 'smart-bg' ? index.h("slot", null) : null)));
322
- }
323
- componentDidLoad() {
324
- this.addIntersectionObserver();
325
- this.setResponsiveBg();
326
- }
327
- componentWillUpdate() {
328
- this.addIntersectionObserver();
329
- this.setResponsiveBg();
330
- }
331
- //responsive image
332
- setResponsiveBg() {
333
- // Define local variables
334
- let backgrounds = (this.el || document).querySelectorAll(ResponsiveBgVariables.selector), el, elData, currentBreakpoint = this.getCurrentBreakPoints();
335
- // Loop through all target elements
336
- for (var i = 0, len = backgrounds.length; i < len; i++) {
337
- // Set current variables
338
- el = backgrounds[i];
339
- elData = el.getAttribute('data-' + currentBreakpoint);
340
- // If the data attribute exists, set the background
341
- if (elData !== null) {
342
- el.style.backgroundImage = "url('" + elData + "')";
343
- }
344
- else {
345
- if (typeof console == 'object') {
346
- console.warn('Data attribute: data-' + currentBreakpoint + ' not found on element:\n\n' + el.outerHTML + '\n\n\n');
347
- }
348
- }
349
- }
350
- }
351
- //lazy loading
352
- addIntersectionObserver() {
353
- if (!this.imgUrl) {
354
- console.log('no image!');
355
- return;
356
- }
357
- if ('IntersectionObserver' in window) {
358
- let lazyLoadBgs = (this.el || document).querySelectorAll('.lazy-bg');
359
- let bgObserver = new IntersectionObserver(entries => {
360
- entries.forEach(entry => {
361
- if (entry.isIntersecting) {
362
- const image = entry.target;
363
- image.classList.remove('lazy-bg');
364
- bgObserver.unobserve(image);
365
- }
366
- });
367
- });
368
- lazyLoadBgs.forEach(image => {
369
- bgObserver.observe(image);
370
- });
371
- }
372
- }
373
- getCssClassMap() {
374
- return {
375
- [this.imageType]: true,
376
- 'ptc-img': true,
377
- [this.borderRadius]: true,
378
- [this.loadMode]: true,
379
- // [this.imageZIndex] : true
380
- };
381
- }
382
- getCurrentBreakPoints() {
383
- // Define local variables
384
- let doc = window.document, temp = doc.createElement('div'), env;
385
- // Append test node
386
- doc.body.appendChild(temp);
387
- // Loop through breakpoints
388
- for (let i = ResponsiveBgVariables.envs.length - 1; i >= 0; i--) {
389
- env = ResponsiveBgVariables.envs[i];
390
- // Add classes
391
- temp.className = 'hidden-' + env;
392
- // Found breakpoint
393
- if (temp.offsetParent === null) {
394
- // Remove our test node
395
- doc.body.removeChild(temp);
396
- // Return current breakpoint
397
- return env;
398
- }
399
- }
400
- // Breakpoint not found, try fallback
401
- doc.body.removeChild(temp);
402
- return this.getFallbackBreakpoint();
403
- }
404
- getFallbackBreakpoint() {
405
- if (window.matchMedia('(min-width: 992px)').matches) {
406
- return 'lg';
407
- }
408
- else if (window.matchMedia('(min-width: 768px)').matches) {
409
- return 'md';
410
- }
411
- else if (window.matchMedia('(min-width: 576px)').matches) {
412
- return 'sm';
413
- }
414
- else {
415
- return 'xs';
416
- }
417
- }
418
- get el() { return index.getElement(this); }
419
- };
420
- PtcImg.style = ptcImgCss;
421
-
422
- const ptcJumbotronCss = ".ptc-container{padding-right:24px;padding-left:24px;margin-right:auto;margin-left:auto}@media only screen and (min-width: 1200px){.ptc-container{padding-left:0;padding-right:0;max-width:1136px}}@media only screen and (min-width: 1440px){.ptc-container{padding-left:0;padding-right:0;max-width:1200px}}.ptc-container-lg{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}@media only screen and (min-width: 480px){.ptc-container-lg{padding-left:var(--ptc-layout-spacing-03);padding-right:var(--ptc-layout-spacing-03)}}@media only screen and (min-width: 768px){.ptc-container-lg{padding-left:var(--ptc-layout-spacing-04);padding-right:var(--ptc-layout-spacing-04)}}@media only screen and (min-width: 992px){.ptc-container-lg{padding-left:var(--ptc-element-spacing-08);padding-right:var(--ptc-element-spacing-08)}}@media only screen and (min-width: 1980px){.ptc-container-lg{padding-left:0;padding-right:0;max-width:1900px}}.ptc-container-fluid{width:100%}.u-para-sm{font-size:var(--ptc-font-size-small) !important}.u-para-md{font-size:var(--ptc-font-size-medium) !important}.u-para-lg{font-size:var(--ptc-font-size-large) !important}.u-para-xl{font-size:var(--ptc-font-size-x-large) !important}.u-para-xxl{font-size:var(--ptc-font-size-xx-large) !important}.u-para-xxxl{font-size:var(--ptc-font-size-xxx-large) !important}@media only screen and (min-width: 768px){.u-para-sm{font-size:calc(var(--ptc-font-size-small) + 0.05vw) !important}.u-para-md{font-size:calc(var(--ptc-font-size-medium) + 0.05vw) !important}.u-para-lg{font-size:calc(var(--ptc-font-size-large) + 0.05vw) !important}.u-para-xl{font-size:calc(var(--ptc-font-size-x-large) + 0.05vw) !important}.u-para-xxl{font-size:calc(var(--ptc-font-size-xx-large) + 0.05vw) !important}.u-para-xxxl{font-size:calc(var(--ptc-font-size-xxx-large) + 0.05vw) !important}}@media only screen and (min-width: 992px){.u-para-sm{font-size:calc(var(--ptc-font-size-small) + 0.1vw) !important}.u-para-md{font-size:calc(var(--ptc-font-size-medium) + 0.1vw) !important}.u-para-lg{font-size:calc(var(--ptc-font-size-large) + 0.1vw) !important}.u-para-xl{font-size:calc(var(--ptc-font-size-x-large) + 0.1vw) !important}.u-para-xxl{font-size:calc(var(--ptc-font-size-xx-large) + 0.1vw) !important}.u-para-xxxl{font-size:calc(var(--ptc-font-size-xxx-large) + 0.1vw) !important}}@media only screen and (min-width: 1200px){.u-para-sm{font-size:calc(var(--ptc-font-size-small) + 0.15vw) !important}.u-para-md{font-size:calc(var(--ptc-font-size-medium) + 0.15vw) !important}.u-para-lg{font-size:calc(var(--ptc-font-size-large) + 0.15vw) !important}.u-para-xl{font-size:calc(var(--ptc-font-size-x-large) + 0.15vw) !important}.u-para-xxl{font-size:calc(var(--ptc-font-size-xx-large) + 0.15vw) !important}.u-para-xxxl{font-size:calc(var(--ptc-font-size-xxx-large) + 0.15vw) !important}}@media only screen and (min-width: 1440px){.u-para-sm{font-size:calc(var(--ptc-font-size-small) + 0.2vw) !important}.u-para-md{font-size:calc(var(--ptc-font-size-medium) + 0.2vw) !important}.u-para-lg{font-size:calc(var(--ptc-font-size-large) + 0.2vw) !important}.u-para-xl{font-size:calc(var(--ptc-font-size-x-large) + 0.2vw) !important}.u-para-xxl{font-size:calc(var(--ptc-font-size-xx-large) + 0.2vw) !important}.u-para-xxxl{font-size:calc(var(--ptc-font-size-xxx-large) + 0.2vw) !important}}@media only screen and (min-width: 1600px){.u-para-sm{font-size:calc(var(--ptc-font-size-small) + 0.25vw) !important}.u-para-md{font-size:calc(var(--ptc-font-size-medium) + 0.25vw) !important}.u-para-lg{font-size:calc(var(--ptc-font-size-large) + 0.25vw) !important}.u-para-xl{font-size:calc(var(--ptc-font-size-x-large) + 0.25vw) !important}.u-para-xxl{font-size:calc(var(--ptc-font-size-xx-large) + 0.25vw) !important}.u-para-xxxl{font-size:calc(var(--ptc-font-size-xxx-large) + 0.25vw) !important}}@media only screen and (min-width: 1980px){.u-para-sm{font-size:calc(var(--ptc-font-size-small) + 0.3vw) !important}.u-para-md{font-size:calc(var(--ptc-font-size-medium) + 0.3vw) !important}.u-para-lg{font-size:calc(var(--ptc-font-size-large) + 0.3vw) !important}.u-para-xl{font-size:calc(var(--ptc-font-size-x-large) + 0.3vw) !important}.u-para-xxl{font-size:calc(var(--ptc-font-size-xx-large) + 0.3vw) !important}.u-para-xxxl{font-size:calc(var(--ptc-font-size-xxx-large) + 0.3vw) !important}}@media only screen and (min-width: 2600px){.u-para-sm{font-size:calc(var(--ptc-font-size-small) + 0.35vw) !important}.u-para-md{font-size:calc(var(--ptc-font-size-medium) + 0.35vw) !important}.u-para-lg{font-size:calc(var(--ptc-font-size-large) + 0.35vw) !important}.u-para-xl{font-size:calc(var(--ptc-font-size-x-large) + 0.35vw) !important}.u-para-xxl{font-size:calc(var(--ptc-font-size-xx-large) + 0.35vw) !important}.u-para-xxxl{font-size:calc(var(--ptc-font-size-xxx-large) + 0.35vw) !important}}.u-para-body{font-size:var(--ptc-font-size-medium) !important}.u-color-white{color:var(--color-white) !important}.u-uppercase{text-transform:uppercase !important}.u-margin-flush{margin:0 !important}.u-marginTop-flush{margin-top:0 !important}.u-marginLeft-flush{margin-left:0 !important}.u-marginRight-flush{margin-right:0 !important}.u-marginBottom-flush{margin-bottom:0 !important}.u-padding-flush{padding:0 !important}.u-paddingTop-flush{padding-top:0 !important}.u-paddingLeft-flush{padding-left:0 !important}.u-paddingRight-flush{padding-right:0 !important}.u-paddingBottom-flush{padding-bottom:0 !important}.u-margin-xs{margin:var(--ptc-element-spacing-01) !important}.u-marginTop-xs{margin-top:var(--ptc-element-spacing-01) !important}.u-marginLeft-xs{margin-left:var(--ptc-element-spacing-01) !important}.u-marginRight-xs{margin-right:var(--ptc-element-spacing-01) !important}.u-marginBottom-xs{margin-bottom:var(--ptc-element-spacing-01) !important}.u-margin-sm{margin:var(--ptc-element-spacing-02) !important}.u-marginTop-sm{margin-top:var(--ptc-element-spacing-02) !important}.u-marginLeft-sm{margin-left:var(--ptc-element-spacing-02) !important}.u-marginRight-sm{margin-right:var(--ptc-element-spacing-02) !important}.u-marginBottom-sm{margin-bottom:var(--ptc-element-spacing-02) !important}.u-margin-md{margin:var(--ptc-element-spacing-03) !important}.u-marginTop-md{margin-top:var(--ptc-element-spacing-03) !important}.u-marginLeft-md{margin-left:var(--ptc-element-spacing-03) !important}.u-marginRight-md{margin-right:var(--ptc-element-spacing-03) !important}.u-marginBottom-md{margin-bottom:var(--ptc-element-spacing-03) !important}.u-margin-lg{margin:var(--ptc-element-spacing-04) !important}.u-marginTop-lg{margin-top:var(--ptc-element-spacing-04) !important}.u-marginLeft-lg{margin-left:var(--ptc-element-spacing-04) !important}.u-marginRight-lg{margin-right:var(--ptc-element-spacing-04) !important}.u-marginBottom-lg{margin-bottom:var(--ptc-element-spacing-04) !important}.u-margin-xl{margin:var(--ptc-element-spacing-05) !important}.u-marginTop-xl{margin-top:var(--ptc-element-spacing-05) !important}.u-marginLeft-xl{margin-left:var(--ptc-element-spacing-05) !important}.u-marginRight-xl{margin-right:var(--ptc-element-spacing-05) !important}.u-marginBottom-xl{margin-bottom:var(--ptc-element-spacing-05) !important}.u-margin-xxl{margin:var(--ptc-element-spacing-06) !important}.u-marginTop-xxl{margin-top:var(--ptc-element-spacing-06) !important}.u-marginLeft-xxl{margin-left:var(--ptc-element-spacing-06) !important}.u-marginRight-xxl{margin-right:var(--ptc-element-spacing-06) !important}.u-marginBottom-xxl{margin-bottom:var(--ptc-element-spacing-06) !important}.u-margin-xxxl{margin:var(--ptc-element-spacing-07) !important}.u-marginTop-xxxl{margin-top:var(--ptc-element-spacing-07) !important}.u-marginLeft-xxxl{margin-left:var(--ptc-element-spacing-07) !important}.u-marginRight-xxxl{margin-right:var(--ptc-element-spacing-07) !important}.u-marginBottom-xxxl{margin-bottom:var(--ptc-element-spacing-07) !important}.u-margin-4xl{margin:var(--ptc-element-spacing-08) !important}.u-marginTop-4xl{margin-top:var(--ptc-element-spacing-08) !important}.u-marginLeft-4xl{margin-left:var(--ptc-element-spacing-08) !important}.u-marginRight-4xl{margin-right:var(--ptc-element-spacing-08) !important}.u-marginBottom-4xl{margin-bottom:var(--ptc-element-spacing-08) !important}.u-textAlign-ctr{text-align:center !important}.u-textAlign-right{text-align:right !important}.u-textAlign-left{text-align:left !important}.u-textWhite{color:var(--color-white) !important}.u-textGreen1{color:var(--color-green-07) !important}.u-textGreen2{color:var(--color-green-06) !important}.u-text-nowrap{white-space:nowrap}.u-text-bold{font-weight:var(--ptc-font-weight-bold)}.u-text-thin{font-weight:var(--ptc-font-weight-thin)}.u-textStyle-normal{font-style:normal !important}.u-no-scroll{overflow:hidden}.u-background-white{background-color:var(--color-white)}.u-background-reset{background-color:transparent !important}.u-white-overylay{background:rgba(242, 242, 242, 0.9)}.u-cursor-pointer{cursor:pointer}.u-clear{clear:both}.u-border-radius-standard{border-radius:var(--ptc-border-radius-standard)}.u-border-radius-large{border-radius:var(--ptc-border-radius-large)}.u-border-radius-pill{border-radius:var(--ptc-border-radius-pill)}.u-border-radius-circle{border-radius:var(--ptc-border-radius-circle)}@media only screen and (min-width: 768px){.u-hero-width{width:525px}.u-margin-center{margin:0 auto}.u-justify-self-end{justify-self:flex-end}}.u-hero-pushup{transform:translateY(-120px)}@media only screen and (min-width: 768px){.u-hero-pushup{transform:translateY(-144px)}}@media only screen and (min-width: 768px){.grid-order-1-md{order:1}.grid-order-2-md{order:2}.grid-order-3-md{order:3}}@media only screen and (min-width: 992px){.grid-order-1-lg{order:1}.grid-order-2-lg{order:2}.grid-order-3-lg{order:3}}.standard-list{list-style:none;margin-left:0;margin-bottom:20px;padding:0}.is-spaced-between{justify-content:space-between}.grid-large-col-gap-md{column-gap:0}@media only screen and (min-width: 992px){.grid-large-col-gap-md{column-gap:3rem}}.grid-large-col-gap-sm{column-gap:0}@media only screen and (min-width: 768px){.grid-large-col-gap-sm{column-gap:3rem}}.grid-x-large-col-gap-md{column-gap:0}@media only screen and (min-width: 992px){.grid-x-large-col-gap-md{column-gap:4rem}}.grid-x-large-col-gap-sm{column-gap:0}@media only screen and (min-width: 768px){.grid-x-large-col-gap-sm{column-gap:4rem}}.grid-medium-col-gap-md{column-gap:0}@media only screen and (min-width: 992px){.grid-medium-col-gap-md{column-gap:2rem}}.grid-medium-col-gap-sm{column-gap:0}@media only screen and (min-width: 768px){.grid-medium-col-gap-sm{column-gap:2rem}}.is-float-left{float:left}.is-float-right{float:right}.is-mobile{display:block}.is-desktop{display:none}@media only screen and (min-width: 992px){.is-mobile{display:none}.is-desktop{display:block}}.ptc-section{padding-top:2rem;padding-bottom:2rem}@media only screen and (min-width: 992px){.ptc-section{padding-top:3rem;padding-bottom:3rem}}.ptc-section-standard{padding-top:3rem;padding-bottom:3rem}.ptc-section-half{padding-top:1.5rem;padding-bottom:1.5rem}.u-flex{display:flex}@media only screen and (min-width: 480px){.u-flex-xs{display:flex}}@media only screen and (min-width: 768px){.u-flex-sm{display:flex}}@media only screen and (min-width: 992px){.u-flex-md{display:flex}}@media only screen and (min-width: 1200px){.u-flex-lg{display:flex}}@media only screen and (min-width: 1440px){.u-flex-xl{display:flex}}@media only screen and (min-width: 1600px){.u-flex-xxl{display:flex}}@media only screen and (min-width: 1980px){.u-flex-2k{display:flex}}@media only screen and (min-width: 2600px){.u-flex-4k{display:flex}}.u-align-center{margin:auto;align-self:center}.u-align-left{margin-right:auto;align-self:center}.u-align-right{margin-left:auto;align-self:center}.u-align-x-center{margin-right:auto;margin-left:auto}.u-align-x-left{margin-right:auto}.u-align-x-right{margin-left:auto}.u-align-y-center{align-self:center}.u-align-y-top{align-self:flex-start}.u-align-y-bottom{align-self:flex-end}.is-flex-column{flex-direction:column}.flex-align-items{align-items:flex-end}.flex-align-items-center{align-items:center}.u-flex-nowrap{flex-wrap:nowrap}.u-flex-wrap{flex-wrap:wrap}.u-align-self-start{align-self:start}.u-align-self-center{align-self:center}.u-align-self-stretch{align-self:stretch}.u-justify-self-start{justify-self:start}.u-justify-self-center{justify-self:center}.u-justify-self-stretch{justify-self:stretch}.u-flex-justify-center{justify-content:center}.embed-responsive{position:relative;display:block;height:0;padding:0;overflow:hidden}.embed-responsive-16by9{padding-bottom:56.25%}.embed-responsive .embed-responsive-item,.embed-responsive embed,.embed-responsive iframe,.embed-responsive object,.embed-responsive video{position:absolute;top:0;bottom:0;left:0;width:100%;height:100%;border:0}.fef-two-column-two-media .has-col-gap-lg{grid-column-gap:var(--spacing-md)}@media only screen and (min-width: 992px){.fef-two-column-two-media .has-col-gap-lg{grid-column-gap:var(--spacing-lg)}}.fef-two-column-two-media .is-col-6-md{padding-bottom:3rem}.fef-two-column-two-media .is-col-6-md:last-child{padding-bottom:0rem}@media only screen and (min-width: 768px){.fef-two-column-two-media .is-col-6-md{padding-bottom:0rem}}@media only screen and (min-width: 768px){.is-grid.grid-large-col-gap-xs-0{row-gap:0}}.max-content{max-width:90%;margin:auto}@media only screen and (min-width: 480px){.max-content{max-width:80%}}.product-tab ptc-title h3{font-size:20px !important;font-weight:900}@media only screen and (min-width: 1200px){.product-tab ptc-title h3{font-size:15px !important;font-weight:800}}.product-tab .is-grid{grid-column-gap:20px;grid-row-gap:12px}ptc-bio-card .bio-modal-open-content{color:var(--color-gray-10);font-size:var(--ptc-font-size-small);line-height:var(--ptc-line-height-denser)}ptc-bio-card .bio-modal-open-content h3{letter-spacing:0.08rem;margin-bottom:2px;font-size:var(--ptc-font-size-small)}ptc-bio-card .bio-modal-open-content ul{margin-top:0}ptc-bio-card .bio-modal-open-content ul li{line-height:var(--ptc-line-height-p)}ptc-bio-card .bio-modal-open-content ul li a{text-decoration:none;color:var(--color-green-06);transition:color 0.3s ease}ptc-bio-card .bio-modal-open-content ul li a:hover{color:var(--color-gray-10);transition:color 0.3s ease}ptc-bio-card .bio-modal-open-content .btn-blackgrey{background-color:var(--color-gray-10);display:inline-block;border-style:solid;border-width:1px;white-space:normal;position:relative;text-decoration:none;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;cursor:pointer;padding:14px 20px;border:2px solid var(--color-gray-08);border-radius:var(--ptc-border-radius-standard);color:var(--color-white);font-weight:700}ptc-bio-card .bio-modal-open-content .btn-blackgrey:hover{background-color:var(--color-gray-09);border-color:var(--color-gray-08)}ptc-bio-card .bio-modal-open-content .btn-blackgrey svg{display:none}ptc-bio-card .bio-modal-open-content hr{margin-top:20px;margin-bottom:20px;border:0;border-top:1px solid #eee}.u-justify-space-between{justify-content:space-between}ptc-nav-submenu .dropdown-content{display:none}ptc-nav-submenu .dropdown-content.open{padding-top:5px;padding-bottom:5px;display:block}ptc-nav-submenu.short-dropdown .dropdown-content.open{padding:var(--ptc-layout-spacing-04)}@media only screen and (min-width: 1200px){ptc-nav-submenu.short-dropdown .dropdown-content.open{padding:var(--ptc-layout-spacing-03) var(--ptc-layout-spacing-04)}}.all-product-banner{padding:50px 0 44px 0px}@media only screen and (min-width: 992px){.all-product-banner{padding:50px 0 72px 0px;display:flex;min-height:300px;justify-content:center;align-items:center}}:host{display:block}.parent{display:grid;grid-template-columns:1fr;grid-template-rows:auto 1fr;grid-column-gap:0px;grid-row-gap:0px;position:unset;z-index:999}.div1{grid-area:1/1/2/2;min-height:300px}.div1.hidden{display:none}.mobile-media-image{display:flex;justify-content:center;align-items:center}@media only screen and (min-width: 992px){.mobile-media-image{display:none}}.gif-bg{background-color:#F3F3F3}.gif-bg img{width:100%;height:auto}@media only screen and (min-width: 768px){.gif-bg img{width:auto}}.video-ratio{position:relative;overflow:hidden;height:0;padding-bottom:100%}@media screen and (min-width: 550px){.video-ratio{padding-bottom:56.25%}}@media only screen and (min-width: 768px){.video-ratio{padding-bottom:56.25%}}@media only screen and (min-width: 992px){.video-ratio{padding-bottom:59.37%;max-height:500px}}@media only screen and (min-width: 1200px){.video-ratio{padding-bottom:min(578px, 46.67%)}}@media only screen and (min-width: 1440px){.video-ratio{padding-bottom:min(578px, 39.67%)}}.div2{grid-area:2/1/3/2;position:relative}.bg-overlay{position:absolute;width:100%;height:100%;top:0;left:0}.content-layout{display:flex;flex-direction:column}@media only screen and (min-width: 992px){.content-layout{flex-direction:row}}.gap-adjustment{gap:var(--ptc-element-spacing-07);margin-bottom:var(--ptc-element-spacing-07)}.text-adjustment{justify-content:flex-start}@media only screen and (min-width: 992px){.text-adjustment{justify-content:center}}.desktop-media-image{width:40%;display:none}@media only screen and (min-width: 992px){.desktop-media-image{display:block}}.desk-gif-adjustment{z-index:3;display:none;justify-content:center;align-items:center}@media only screen and (min-width: 992px){.desk-gif-adjustment{display:flex}}.desk-gif-adjustment img{width:100%}@media only screen and (min-width: 992px){.parent{grid-template-columns:1fr;grid-template-rows:1fr;grid-column-gap:0px;grid-row-gap:0px;min-height:500px;position:relative}.div1{grid-area:1/1/2/2;min-height:unset}.div2{grid-area:1/1/2/2;align-self:center;position:unset}}";
423
-
424
- const PtcJumbotron = class {
425
- constructor(hostRef) {
426
- index.registerInstance(this, hostRef);
427
- this.jumbotronType = 'light';
428
- this.hasPopupVideo = false;
429
- this.mainTitle = 'Lorem Ipsum Dolor Sit Amet Consectetur';
430
- this.subTitle = 'Lorem Ipsum Dolor Sit Amet Consectetur Adipiscing Lorem Ipsum Dolor Sit Amet Consectetur Adipisci Lorem Ipsum Dolor Sit Amet';
431
- this.pngSrc = undefined;
432
- this.gifSrc = undefined;
433
- this.bgVideoSrc = undefined;
434
- this.bgSrc = undefined;
435
- this.isIframe = false;
436
- this.playButtonTitle = undefined;
437
- this.pauseButtonTitle = undefined;
438
- this.contentBackground = undefined;
439
- this.contentColor = undefined;
440
- this.textAlign = 'left';
441
- this.isMobile = undefined;
442
- }
443
- handleResize() {
444
- this.getContentBackground();
445
- this.adjustJumbotronHeight();
446
- }
447
- connectedCallback() {
448
- this.getContentBackground();
449
- }
450
- componentDidLoad() {
451
- // if (!!this.popupVideo) {
452
- // const selectedBtn = this.el.shadowRoot.querySelector('#j-modal-btn');
453
- // const PtcModal: HTMLPtcModalElement = this.el.shadowRoot.querySelector('#j-modal');
454
- // if (selectedBtn && PtcModal) {
455
- // selectedBtn.addEventListener('click', function () {
456
- // PtcModal.show = true;
457
- // });
458
- // const iframe = PtcModal.shadowRoot.querySelector('iframe');
459
- // console.log('iframe')
460
- // console.log(iframe);
461
- // const iframeDoc= iframe.contentDocument
462
- // //const shadowVideo = shadowIframe.querySelector('document')
463
- // console.log('video: ')
464
- // console.log(iframeDoc)
465
- // }
466
- // }
467
- this.adjustJumbotronHeight();
468
- }
469
- render() {
470
- console.log('render');
471
- const classMap = this.getCssClassMap();
472
- let mediaElement;
473
- switch (this.jumbotronType) {
474
- case 'png':
475
- mediaElement = (index.h("div", { class: "mobile-media-image" }, index.h("ptc-picture", { src: this.pngSrc })));
476
- break;
477
- case 'gif':
478
- mediaElement = (index.h("div", { class: "mobile-media-image gif-bg" }, index.h("img", { src: this.gifSrc })));
479
- break;
480
- case 'dark-video':
481
- case 'light-video':
482
- mediaElement = (index.h("ptc-background-video", { class: "video-ratio", overlay: false, "video-src": this.bgVideoSrc, isIframe: this.isIframe, "play-button-title": this.playButtonTitle, "pause-button-title": this.pauseButtonTitle }));
483
- break;
484
- default:
485
- mediaElement = index.h("ptc-img", { "img-url": this.bgSrc, styles: ".smart-bg{background-position:right !important;}" });
486
- }
487
- return (index.h(index.Host, { class: classMap }, index.h("div", { class: "parent" }, index.h("div", { class: `div1 image-container ${this.jumbotronType === 'text' ? 'hidden' : ''}` }, mediaElement), index.h("div", { class: "div2 content-container" }, index.h("div", { class: "bg-overlay", style: { background: this.contentBackground } }), index.h("div", { class: "ptc-container content-layout" }, index.h("max-width-container", { "max-width": "578", breakpoint: 992, "content-align": this.jumbotronType === 'text' ? 'center' : this.textAlign, styles: ":host{z-index: 999}" }, index.h("slot", { name: "breadcrumb" }), index.h("ptc-spacer", { breakpoint: "small", size: "small" }), index.h("ptc-spacer", { breakpoint: "x-small", size: "medium" }), index.h("slot", { name: "main-title" }), index.h("ptc-spacer", { breakpoint: "small", size: "small" }), index.h("ptc-spacer", { breakpoint: "x-small", size: "medium" }), index.h("ptc-para", { "font-size": this.jumbotronType === 'text' && this.isMobile ? 'x-small' : 'small', "font-weight": this.jumbotronType === 'text' && this.isMobile ? 'w-7' : 'w-4', "para-margin": "margin-bottom-6", "para-color": "white", "para-line-h": "line-height-p", "para-align": this.jumbotronType === 'text' ? 'center' : 'left' }, index.h("ptc-tooltip", { "text-lines": "8", description: this.subTitle, position: "right", styles: `.ellipsis-by-line-boxing{color: ${this.contentColor};}` })), index.h("div", { class: `u-flex u-flex-wrap gap-adjustment${this.jumbotronType === 'text' ? ' text-adjustment' : ''}` }, index.h("slot", { name: "j-cta" }))), this.hasPopupVideo ? index.h("slot", { name: "video" }) : null, this.jumbotronType === 'png' ? (index.h("div", { class: "desktop-media-image" }, index.h("ptc-picture", { "is-full-width": true, src: this.pngSrc }))) : null, this.jumbotronType === 'gif' ? (index.h("div", { class: "desktop-media-image desk-gif-adjustment" }, index.h("img", { src: this.gifSrc }))) : null)))));
488
- }
489
- getCssClassMap() {
490
- return {
491
- // [this.imageZIndex] : true
492
- };
493
- }
494
- getContentBackground() {
495
- if (window.innerWidth < 992) {
496
- switch (this.jumbotronType) {
497
- case 'light':
498
- case 'light-video':
499
- this.contentBackground = '#F3F3F3';
500
- this.contentColor = 'var(--color-gray-10)';
501
- break;
502
- case 'dark':
503
- case 'dark-video':
504
- this.contentBackground = 'var(--color-gray-09)';
505
- this.contentColor = 'var(--color-gray-01)';
506
- break;
507
- default:
508
- this.contentBackground = 'transparent';
509
- this.contentColor = 'var(--color-gray-10)';
510
- }
511
- this.isMobile = true;
512
- }
513
- else {
514
- switch (this.jumbotronType) {
515
- case 'light':
516
- case 'light-video':
517
- this.contentBackground = 'linear-gradient(90.19deg, rgba(255, 255, 255, 0.9) 62.55%, rgba(228, 231, 233, 0) 99.86%)';
518
- this.contentColor = 'var(--color-gray-10)';
519
- break;
520
- case 'dark':
521
- case 'dark-video':
522
- this.contentBackground = 'linear-gradient(90deg, rgba(0, 0, 0, 0.63) 52.42%, rgba(40, 47, 53, 0) 100%)';
523
- this.contentColor = 'var(--color-gray-01)';
524
- break;
525
- case 'gif':
526
- this.contentBackground = '#F3F3F3';
527
- this.contentColor = 'var(--color-gray-10)';
528
- break;
529
- default:
530
- this.contentBackground = 'transparent';
531
- this.contentColor = 'var(--color-gray-10)';
532
- }
533
- this.isMobile = false;
534
- }
535
- }
536
- adjustJumbotronHeight() {
537
- const contentContainerH = this.el.shadowRoot.querySelector('.content-container').clientHeight;
538
- const videoEle = !!this.el.shadowRoot.querySelector('.video-ratio') ? this.el.shadowRoot.querySelector('.video-ratio') : null;
539
- if (contentContainerH < 500 && videoEle && !this.isMobile) {
540
- videoEle.style.paddingBottom = '500px';
541
- }
542
- else {
543
- !!videoEle ? (videoEle.style.paddingBottom = '') : null;
544
- }
545
- }
546
- get el() { return index.getElement(this); }
547
- };
548
- PtcJumbotron.style = ptcJumbotronCss;
549
-
550
181
  const ptcParaCss = ":host{position:relative;z-index:1}:host(.white){color:var(--color-white)}:host(.z-1){z-index:1}:host(.z-2){z-index:2}:host(.z-3){z-index:3}:host(.z-99){z-index:99}:host(.z-999){z-index:999}:host(.z-auto){z-index:auto}p.default{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;}p.main{text-shadow:0 3px 6px var(--color-white);line-height:var(--ptc-line-height-dense);color:var(--color-gray-10)}p.primary-grey{color:var(--color-gray-10)}p.gray-darker{color:var(--color-gray-11)}p.white{color:var(--color-white)}p.xxx-small{font-size:var(--ptc-font-size-xxx-small)}p.xx-small{font-size:var(--ptc-font-size-xx-small)}p.x-small{font-size:var(--ptc-font-size-x-small)}p.small{font-size:var(--ptc-font-size-small)}p.medium{font-size:var(--ptc-font-size-medium)}p.large{font-size:var(--ptc-font-size-large)}p.x-large{font-size:var(--ptc-font-size-x-large)}p.xx-large{font-size:var(--ptc-font-size-xx-large)}p.xxx-large{font-size:var(--ptc-font-size-xxx-large)}p.xxxx-large{font-size:var(--ptc-font-size-xxxx-large)}p.w-3{font-weight:var(--ptc-font-weight-thin)}p.w-4{font-weight:var(--ptc-font-weight-regular)}p.w-5{font-weight:var(--ptc-font-weight-medium)}p.w-6{font-weight:var(--ptc-font-weight-semibold)}p.w-7{font-weight:var(--ptc-font-weight-bold)}p.w-8{font-weight:var(--ptc-font-weight-extrabold)}p.w-9{font-weight:var(--ptc-font-weight-black)}p.margin-flush{margin-top:0;margin-bottom:0}p.margin-top-1{margin-top:var(--ptc-element-spacing-01);margin-bottom:0}p.margin-top-2{margin-top:var(--ptc-element-spacing-02);margin-bottom:0}p.margin-top-3{margin-top:var(--ptc-element-spacing-03);margin-bottom:0}p.margin-top-4{margin-top:var(--ptc-element-spacing-04);margin-bottom:0}p.margin-top-5{margin-top:var(--ptc-element-spacing-05);margin-bottom:0}p.margin-top-6{margin-top:var(--ptc-element-spacing-06);margin-bottom:0}p.margin-bottom-1{margin-bottom:var(--ptc-element-spacing-01);margin-top:0}p.margin-bottom-2{margin-bottom:var(--ptc-element-spacing-02);margin-top:0}p.margin-bottom-3{margin-bottom:var(--ptc-element-spacing-03);margin-top:0}p.margin-bottom-4{margin-bottom:var(--ptc-element-spacing-04);margin-top:0}p.margin-bottom-5{margin-bottom:var(--ptc-element-spacing-05);margin-top:0}p.margin-bottom-6{margin-bottom:var(--ptc-element-spacing-06);margin-top:0}p.margin-1{margin-top:var(--ptc-element-spacing-01);margin-bottom:var(--ptc-element-spacing-01)}p.margin-2{margin-top:var(--ptc-element-spacing-02);margin-bottom:var(--ptc-element-spacing-02)}p.margin-3{margin-top:var(--ptc-element-spacing-03);margin-bottom:var(--ptc-element-spacing-03)}p.margin-4{margin-top:var(--ptc-element-spacing-04);margin-bottom:var(--ptc-element-spacing-04)}p.margin-5{margin-top:var(--ptc-element-spacing-05);margin-bottom:var(--ptc-element-spacing-05)}p.margin-6{margin-top:var(--ptc-element-spacing-06);margin-bottom:var(--ptc-element-spacing-06)}p.line-height-densest{line-height:var(--ptc-line-height-densest)}p.line-height-denser{line-height:var(--ptc-line-height-denser)}p.line-height-p{line-height:var(--ptc-line-height-p)}p.line-height-dense{line-height:var(--ptc-line-height-dense)}p.line-height-normal{line-height:var(--ptc-line-height-normal)}p.line-height-loose{line-height:var(--ptc-line-height-loose)}p.line-height-looser{line-height:var(--ptc-line-height-looser)}p.left{text-align:left}p.right{text-align:right}p.center{text-align:center}p.justify{text-align:justify}p.announcement{text-transform:uppercase;font-size:var(--ptc-font-size-small);color:var(--color-gray-07);line-height:var(--ptc-line-height-looser);letter-spacing:var(--ptc-letter-spacing-loose)}p.ellipsis-boxing{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;overflow-wrap:break-word}";
551
182
 
552
183
  const PtcPara = class {
@@ -699,8 +330,8 @@ const PtcPicture = class {
699
330
  // Append test node
700
331
  doc.body.appendChild(temp);
701
332
  // Loop through breakpoints
702
- for (let i = ResponsivePictureVariables.envs.length - 1; i >= 0; i--) {
703
- env = ResponsivePictureVariables.envs[i];
333
+ for (let i = interfaces.ResponsivePictureVariables.envs.length - 1; i >= 0; i--) {
334
+ env = interfaces.ResponsivePictureVariables.envs[i];
704
335
  // Add classes
705
336
  temp.className = 'hidden-' + env;
706
337
  // Found breakpoint
@@ -748,6 +379,378 @@ const PtcPicture = class {
748
379
  };
749
380
  PtcPicture.style = ptcPictureCss;
750
381
 
382
+ const ptcProductCardCss = ":host{display:block;background-color:var(--color-white);padding-top:var(--ptc-layout-spacing-03);border-radius:var(--ptc-border-radius-standard);margin-bottom:var(--ptc-layout-spacing-03)}:host .card-wrap{display:flex;align-items:center}:host .card-wrap ptc-picture{display:none}@media only screen and (min-width: 768px){:host .card-wrap ptc-picture{display:block;margin-left:var(--ptc-element-spacing-06);min-width:38px;max-width:38px}}:host .card-wrap .content{padding:0 32px 24px 32px}@media only screen and (min-width: 768px){:host .card-wrap .content{padding:0 44px 24px 44px}}@media only screen and (min-width: 1200px){:host .card-wrap .content{display:flex;align-items:center}}:host .card-wrap .content .cta-wrap{margin-left:0;margin-top:24px}@media only screen and (min-width: 1200px){:host .card-wrap .content .cta-wrap{margin-top:0px;margin-left:44px}}:host .toggle-btn{padding:16px;text-align:center;border-top:1px solid var(--color-gray-04);display:block;cursor:pointer}:host .toggle-btn svg{margin-right:var(--ptc-element-spacing-03);vertical-align:middle;margin-top:-2px}:host .product-highlights-container{padding:0px 20px 16px 20px}";
383
+
384
+ const PtcProductCard = class {
385
+ constructor(hostRef) {
386
+ index.registerInstance(this, hostRef);
387
+ this.cardTitle = undefined;
388
+ this.cardImage = undefined;
389
+ this.cardImageAltText = undefined;
390
+ this.cardDescription = undefined;
391
+ this.cardCtaText = undefined;
392
+ this.toggleCtaTitle = undefined;
393
+ this.isOpen = false;
394
+ this.isSlotEmpty = undefined;
395
+ }
396
+ togglePanel() {
397
+ this.isOpen = !this.isOpen;
398
+ }
399
+ render() {
400
+ return (index.h(index.Host, null, index.h("div", { class: "card-wrap" }, index.h("ptc-picture", { alt: "image-test", src: this.cardImage, "display-image": "inline-block", width: '38' }), index.h("div", { class: "content" }, index.h("div", null, index.h("ptc-title", { type: 'h3', upperline: "no-upperline", "title-size": "medium", "title-weight": "w-8", "title-height": "densest", "title-margin": 'margin-flush' }, index.h("ptc-tooltip", { "text-display": "block", "text-lines": "3", "z-index": "z-999", description: this.cardTitle, position: "bottom", width: 'full-width' })), index.h("ptc-para", { "font-size": "x-small", "para-margin": "margin-flush", "para-line-h": "line-height-densest", "para-z-index": "z-auto" }, index.h("ptc-tooltip", { "text-display": "block", "text-lines": "16", "z-index": "z-999", description: this.cardDescription, position: "bottom", width: 'full-width' }))), index.h("div", { class: 'cta-wrap' }, index.h("slot", { name: "cta" })))), this.toggleCtaTitle &&
401
+ index.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() }, index.h("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("rect", { width: "18", height: "18", rx: "4", fill: "#00890B" }), this.isOpen ? (index.h("g", { "clip-path": "url(#clip0_187_1609)" }, index.h("path", { d: "M4.86328 7.98779V10.0128H14.382V7.98779H4.86328Z", fill: "white" }))) : (index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M9.953 4.23535H8.04712V8.04712H4.23535V9.953H8.04712V13.7648H9.953V9.953H13.7648V8.04712H9.953V4.23535Z", fill: "white" })), index.h("defs", null, index.h("clipPath", { id: "clip0_187_1609" }, index.h("rect", { width: "9.53", height: "9", fill: "white", transform: "translate(4.16328 4.23535)" })))), index.h("span", null, this.toggleCtaTitle)), this.isOpen && (index.h("div", { class: 'product-highlights-container' }, index.h("slot", null)))));
402
+ }
403
+ get hostElement() { return index.getElement(this); }
404
+ };
405
+ PtcProductCard.style = ptcProductCardCss;
406
+
407
+ const ptcProductCategoryCss = ":host{display:block;padding-bottom:var(--ptc-layout-spacing-03)}";
408
+
409
+ const PtcProductCategory = class {
410
+ constructor(hostRef) {
411
+ index.registerInstance(this, hostRef);
412
+ this.categoryTitle = undefined;
413
+ this.categoryDescription = undefined;
414
+ }
415
+ render() {
416
+ return (index.h(index.Host, null, index.h("ptc-title", { type: "h2", upperline: "no-upperline", "title-margin": "margin-flush", "title-size": "xx-large" }, index.h("ptc-tooltip", { "text-display": "inline", "text-lines": "4", "z-index": "z-999", description: this.categoryTitle, position: "bottom", width: 'full-width' })), index.h("ptc-spacer", { size: "x-small" }), index.h("ptc-spacer", { size: "x-small", breakpoint: "x-small" }), index.h("ptc-para", { "para-margin": "margin-flush", "font-size": "small", "para-line-h": "line-height-p", "font-weight": "w-5", "para-z-index": "z-auto" }, index.h("ptc-tooltip", { "text-display": "block", "text-lines": "9", "z-index": "z-999", description: this.categoryDescription, position: "bottom", width: 'full-width' })), index.h("ptc-spacer", { size: "large" }), index.h("slot", null)));
417
+ }
418
+ };
419
+ PtcProductCategory.style = ptcProductCategoryCss;
420
+
421
+ const ptcProductDropdownCss = ":host{display:block;margin-top:4px;background-color:var(--color-white)}:host .hidden{display:none}:host .dropdown{position:relative;display:inline-block;width:100%;font-size:16px}:host .dropdown .dropdown-toggle{padding:0.5rem;border:1px solid var(--color-gray-03);background-color:var(--color-white);cursor:pointer;display:flex;align-items:center;justify-content:space-between;min-height:34px;box-sizing:border-box}:host .dropdown .dropdown-toggle .dropdown-placeholder{font-size:14px;color:var(--color-gray-07)}:host .caret{display:inline-block;vertical-align:middle}:host .dropdown-menu{position:absolute;top:100%;left:0;min-width:10rem;border:1px solid var(--color-gray-03);background-color:var(--color-white);box-shadow:0px 2px 4px rgba(35, 43, 45, 0.3);z-index:105;max-height:400px;overflow-y:auto}:host .dropdown-menu::-webkit-scrollbar{width:5px}:host .dropdown-menu::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0, 0, 0, 0.3)}:host .dropdown-menu::-webkit-scrollbar-thumb{background-color:var(--color-gray-05);outline:1px solid var(--color-gray-05)}:host .checkbox-label{display:flex;align-items:flex-start;padding:6px 16px;cursor:pointer;font-size:14px}:host .checkbox-label:first-child{padding-top:20px}:host .checkbox-label:last-child{padding-bottom:20px}:host .checkbox-label input[type=checkbox]{min-width:20px;margin-right:8px;width:20px;height:20px;margin-top:0}";
422
+
423
+ const PtcProductDropdown = class {
424
+ constructor(hostRef) {
425
+ index.registerInstance(this, hostRef);
426
+ this.selectedValues = index.createEvent(this, "selectedValues", 7);
427
+ this.dropdownTouched = index.createEvent(this, "dropdownTouched", 7);
428
+ this.internalOptions = undefined;
429
+ this.newOptions = undefined;
430
+ this.selectedOptions = [];
431
+ this.placeholder = undefined;
432
+ this.isOpen = false;
433
+ }
434
+ parseOptions() {
435
+ let options = Array.from(this.hostElement.querySelectorAll('span'));
436
+ if (options) {
437
+ this.internalOptions = options.map((option) => {
438
+ return option.textContent;
439
+ });
440
+ }
441
+ }
442
+ toggleDropdown() {
443
+ this.isOpen = !this.isOpen;
444
+ this.dropdownTouched.emit({
445
+ 'sender': this,
446
+ 'isOpen': this.isOpen
447
+ });
448
+ }
449
+ handleSearchResult(event) {
450
+ const { sender, searchTerm } = event.detail;
451
+ if (sender) {
452
+ if (searchTerm === "") {
453
+ this.selectedOptions = [];
454
+ this.isOpen = false;
455
+ }
456
+ }
457
+ }
458
+ handleinputChanged(event) {
459
+ const { sender } = event.detail;
460
+ if (sender) {
461
+ this.selectedOptions = [];
462
+ this.isOpen = false;
463
+ }
464
+ }
465
+ handleCheckboxChange(option) {
466
+ const index = this.selectedOptions.indexOf(option);
467
+ if (index > -1) {
468
+ this.selectedOptions.splice(index, 1);
469
+ //console.log(this.selectedOptions);
470
+ this.selectedValues.emit({
471
+ 'sender': this,
472
+ 'selectedOptions': this.selectedOptions
473
+ });
474
+ }
475
+ else {
476
+ this.selectedOptions.push(option);
477
+ //console.log(this.selectedOptions);
478
+ this.selectedValues.emit({
479
+ 'sender': this,
480
+ 'selectedOptions': this.selectedOptions
481
+ });
482
+ }
483
+ }
484
+ componentWillLoad() {
485
+ this.parseOptions();
486
+ }
487
+ render() {
488
+ return (index.h(index.Host, null, index.h("div", { class: "dropdown" }, index.h("div", { class: "dropdown-toggle", onClick: () => this.toggleDropdown() }, index.h("span", { class: "dropdown-placeholder" }, this.placeholder), index.h("span", { class: "caret" }, index.h("svg", { width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.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 && (index.h("div", { class: "dropdown-menu" }, this.internalOptions.map((option) => (index.h("label", { class: "checkbox-label" }, index.h("input", { type: "checkbox", checked: this.selectedOptions.includes(option), onChange: () => this.handleCheckboxChange(option) }), option)))))), index.h("div", { class: "hidden" }, index.h("slot", null))));
489
+ }
490
+ get hostElement() { return index.getElement(this); }
491
+ };
492
+ PtcProductDropdown.style = ptcProductDropdownCss;
493
+
494
+ const ptcProductHighlightCardCss = ":host{max-width:300px;display:block;padding:18px 10px 12px 10px;border:1px solid var(--color-gray-04);border-radius:var(--ptc-border-radius-standard);margin:auto}:host ptc-picture{min-height:100px}";
495
+
496
+ const PtcProductHighlightCard = class {
497
+ constructor(hostRef) {
498
+ index.registerInstance(this, hostRef);
499
+ this.cardTitle = undefined;
500
+ this.cardImage = undefined;
501
+ this.cardImageAltText = undefined;
502
+ this.cardDescription = undefined;
503
+ }
504
+ render() {
505
+ return (index.h(index.Host, null, index.h("ptc-title", { type: 'h4', upperline: "no-upperline", "title-margin": "margin-flush", "title-size": "small", "text-align": 'center' }, index.h("ptc-tooltip", { "text-display": "block", "text-lines": "2", "z-index": "z-999", description: this.cardTitle, position: "bottom", width: 'full-width' })), index.h("ptc-picture", { alt: "image-test", src: this.cardImage, "image-alignment": "center", width: "69", "display-image": "inline-block", styles: "img{margin: 12px auto 18px auto}" }), index.h("ptc-para", { "font-size": "x-small", "para-margin": "margin-flush", "para-line-h": "line-height-densest", "para-align": 'left', "para-z-index": "z-auto" }, index.h("ptc-tooltip", { "text-display": "block", "text-lines": "3", "z-index": "z-999", description: this.cardDescription, position: "bottom", width: 'full-width' }))));
506
+ }
507
+ };
508
+ PtcProductHighlightCard.style = ptcProductHighlightCardCss;
509
+
510
+ const ptcProductListCss = ":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}";
511
+
512
+ const PtcProductList = class {
513
+ constructor(hostRef) {
514
+ index.registerInstance(this, hostRef);
515
+ this.clearCtaClicked = index.createEvent(this, "clearCtaClicked", 7);
516
+ }
517
+ handleSearchResult(event) {
518
+ const { sender, searchTerm } = event.detail;
519
+ if (sender) {
520
+ this.sortCards(searchTerm);
521
+ }
522
+ }
523
+ handleMultipleSearchResult(event) {
524
+ const { sender, selectedOptions } = event.detail;
525
+ if (sender) {
526
+ this.sortMultipleCards(selectedOptions);
527
+ }
528
+ }
529
+ handleEmptyResult(event) {
530
+ const { sender, searchTerm } = event.detail;
531
+ if (sender) {
532
+ this.noresultSection.classList.add('show');
533
+ this.sortCards(searchTerm);
534
+ }
535
+ }
536
+ sortMultipleCards(searchItems) {
537
+ const categoryList = Array.from(this.hostElement.querySelectorAll('ptc-product-category'));
538
+ categoryList.forEach((category) => {
539
+ const categoryTitle = category.getAttribute('category-title');
540
+ const productList = Array.from(category.querySelectorAll('ptc-product-card'));
541
+ if (searchItems.length > 0) {
542
+ const shouldDisplayCategory = searchItems.some(searchItem => categoryTitle && categoryTitle.includes(searchItem));
543
+ category.style.display = shouldDisplayCategory ? 'block' : 'none';
544
+ if (shouldDisplayCategory) {
545
+ productList.forEach(product => {
546
+ product.style.display = 'block';
547
+ });
548
+ }
549
+ else {
550
+ productList.forEach(product => {
551
+ const productTitle = product.getAttribute('card-title');
552
+ const shouldDisplayProduct = searchItems.some(searchItem => productTitle && productTitle.includes(searchItem));
553
+ product.style.display = shouldDisplayProduct ? 'block' : 'none';
554
+ });
555
+ }
556
+ }
557
+ else {
558
+ category.style.display = 'block';
559
+ productList.forEach(product => {
560
+ product.style.display = 'block';
561
+ });
562
+ }
563
+ });
564
+ }
565
+ // Sorting the
566
+ sortCards(searchItem) {
567
+ const categoryList = this.hostElement.querySelectorAll('ptc-product-category');
568
+ categoryList.forEach((category) => {
569
+ const categoryTitle = category.getAttribute('category-title');
570
+ const productList = category.querySelectorAll('ptc-product-card');
571
+ category.style.display = 'none';
572
+ if (searchItem === '') {
573
+ category.style.display = 'block';
574
+ productList.forEach(product => {
575
+ product.style.display = 'block';
576
+ });
577
+ this.noresultSection.classList.remove('show');
578
+ }
579
+ else {
580
+ const searchItemLowerCase = searchItem; //
581
+ if (searchItemLowerCase === categoryTitle) {
582
+ category.style.display = 'block';
583
+ productList.forEach(product => {
584
+ product.style.display = 'block';
585
+ });
586
+ }
587
+ else {
588
+ productList.forEach(product => {
589
+ const productTitle = product.getAttribute('card-title');
590
+ product.style.display = 'none';
591
+ if (searchItemLowerCase === productTitle) {
592
+ product.style.display = 'block';
593
+ category.style.display = 'block';
594
+ }
595
+ });
596
+ }
597
+ }
598
+ });
599
+ }
600
+ componentDidLoad() {
601
+ this.addIds();
602
+ this.noresultSection = this.hostElement.shadowRoot.querySelector('.no-result-wrap');
603
+ this.productList = this.hostElement.shadowRoot.querySelector('.product-list');
604
+ }
605
+ handleClick(event) {
606
+ this.clearCtaClicked.emit({
607
+ 'sender': this,
608
+ 'event': event,
609
+ });
610
+ }
611
+ // Adding id to the category and product cards
612
+ addIds() {
613
+ const categoryList = this.hostElement.querySelectorAll('ptc-product-category');
614
+ categoryList.forEach((category) => {
615
+ const categoryTitle = category.getAttribute('category-title');
616
+ category.setAttribute('id', categoryTitle);
617
+ const productList = category.querySelectorAll('ptc-product-card');
618
+ productList.forEach(product => {
619
+ const productTitle = product.getAttribute('card-title');
620
+ product.setAttribute('id', productTitle);
621
+ });
622
+ });
623
+ }
624
+ render() {
625
+ 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" }, "No Results Found"), index.h("ptc-para", { "font-size": "x-small" }, "Try changing or removing some of your filters"), index.h("ptc-button", { type: "link", color: "ptc-quaternary", target: "_blank", onClick: (e) => { this.handleClick(e); } }, "Clear Filters"))))));
626
+ }
627
+ get hostElement() { return index.getElement(this); }
628
+ };
629
+ PtcProductList.style = ptcProductListCss;
630
+
631
+ const ptcProductSidebarCss = ":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-x-small);font-weight:600}: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.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 .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: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}";
632
+
633
+ const PtcProductSidebar = class {
634
+ constructor(hostRef) {
635
+ index.registerInstance(this, hostRef);
636
+ this.selectedResult = index.createEvent(this, "selectedResult", 7);
637
+ this.clearsearch = index.createEvent(this, "clearsearch", 7);
638
+ this.inputChanged = index.createEvent(this, "inputChanged", 7);
639
+ this.emptyResult = index.createEvent(this, "emptyResult", 7);
640
+ this.searchTerm = '';
641
+ this.suggestions = [];
642
+ this.suggestionList = [];
643
+ }
644
+ componentWillLoad() {
645
+ this.getDomData();
646
+ }
647
+ componentDidLoad() {
648
+ this.productListWrap = this.hostElement.shadowRoot.querySelector('.product-list-wrap');
649
+ this.clearBtn = this.hostElement.shadowRoot.querySelector('.clear-cta');
650
+ }
651
+ // Getting category title and products list
652
+ getDomData() {
653
+ const categoryList = document.querySelectorAll('ptc-product-category');
654
+ categoryList.forEach(category => {
655
+ let categoryTitle = category.getAttribute('category-title');
656
+ let categoryObject = { categoryName: categoryTitle, products: [] };
657
+ this.suggestionList.push(categoryObject);
658
+ let productList = category.querySelectorAll('ptc-product-card');
659
+ productList.forEach(product => {
660
+ let productTitle = product.getAttribute('card-title');
661
+ categoryObject.products.push(productTitle);
662
+ });
663
+ });
664
+ }
665
+ handleInputChange(event) {
666
+ const inputElement = event.target;
667
+ this.searchTerm = inputElement.value.toLocaleLowerCase();
668
+ this.productListWrap.classList.add('hide');
669
+ this.clearBtn.classList.add('show');
670
+ this.getSuggestions();
671
+ this.inputChanged.emit({
672
+ 'sender': this,
673
+ 'event': event,
674
+ });
675
+ }
676
+ getSuggestions() {
677
+ const searchTerm = this.searchTerm.toLowerCase();
678
+ const suggestions = this.suggestionList.reduce((acc, item) => {
679
+ if (item.categoryName.toLowerCase().includes(searchTerm)) {
680
+ acc.push(item.categoryName); // Include the category if it matches the search term
681
+ }
682
+ const matchedProducts = item.products.filter((product) => product.toLowerCase().includes(searchTerm));
683
+ if (matchedProducts.length > 0) {
684
+ acc.push(...matchedProducts); // Include the matching products
685
+ }
686
+ return acc;
687
+ }, []);
688
+ this.suggestions = suggestions;
689
+ }
690
+ handleSelectSuggestion(suggestion, event) {
691
+ this.searchTerm = suggestion;
692
+ //this.serachInput.setAttribute('value', this.searchTerm);
693
+ this.selectedResult.emit({
694
+ 'sender': this,
695
+ 'event': event,
696
+ 'searchTerm': this.searchTerm
697
+ });
698
+ }
699
+ handleKeyUp(e) {
700
+ const inputElement = e.target;
701
+ this.searchTerm = inputElement.value.toLocaleLowerCase();
702
+ if (e.keyCode === 13 && this.suggestions.length == 0) {
703
+ console.log('Enter key pressed');
704
+ this.emptyResult.emit({
705
+ 'sender': this,
706
+ 'event': e,
707
+ });
708
+ }
709
+ }
710
+ clearSearch(event) {
711
+ let input = this.hostElement.shadowRoot.querySelector('input');
712
+ this.productListWrap.classList.remove('hide');
713
+ this.clearBtn.classList.remove('show');
714
+ if (input) {
715
+ input.value = "";
716
+ }
717
+ this.suggestions = [];
718
+ this.clearsearch.emit({
719
+ 'sender': this,
720
+ 'event': event,
721
+ 'searchTerm': input.value
722
+ });
723
+ }
724
+ handleDropdownTouched(event) {
725
+ const { sender, isOpen } = event.detail;
726
+ if (sender) {
727
+ this.productListWrap.classList.add('hide');
728
+ this.clearBtn.classList.add('show');
729
+ if (isOpen) {
730
+ let input = this.hostElement.shadowRoot.querySelector('input');
731
+ if (input) {
732
+ input.value = "";
733
+ }
734
+ }
735
+ }
736
+ }
737
+ handleClick() {
738
+ this.suggestions = [];
739
+ }
740
+ handleclearCtaClicked(event) {
741
+ const { sender, event: mouseEvent, } = event.detail;
742
+ if (sender) {
743
+ this.clearSearch(mouseEvent);
744
+ }
745
+ }
746
+ render() {
747
+ 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" }, "Filter Result"), index.h("span", { class: "clear-cta", onClick: (e) => this.clearSearch(e) }, "Clear")), index.h("div", { class: "sort-wrap" }, index.h("div", { class: "typeahead-input" }, index.h("label", { htmlFor: "searchBox" }, "Filter"), 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 &&
748
+ index.h("div", { class: "suggestion-wrap" }, index.h("ul", { class: "suggestions" }, this.suggestions.map((suggestion) => (index.h("li", { onClick: (e) => this.handleSelectSuggestion(suggestion, e) }, suggestion)))))), index.h("div", { class: "dropdwon-filter" }, index.h("label", { htmlFor: "tech-dropdown" }, "Technology"), index.h("ptc-product-dropdown", { placeholder: "Select a technology", id: "tech-dropdown" }, this.suggestionList.map((item) => (index.h("span", null, item.categoryName))))))), 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" }, "Jump to Product"), 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 }, item.categoryName)), 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)))))))))));
749
+ }
750
+ get hostElement() { return index.getElement(this); }
751
+ };
752
+ PtcProductSidebar.style = ptcProductSidebarCss;
753
+
751
754
  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}}";
752
755
 
753
756
  const PtcSpacer = class {
@@ -949,17 +952,19 @@ const PtcTooltip = class {
949
952
  };
950
953
  PtcTooltip.style = ptcTooltipCss;
951
954
 
952
- exports.bundle_jumbotron_example = BundleJumbotronExample;
953
955
  exports.icon_asset = IconAsset;
954
956
  exports.list_item = ListItem;
955
- exports.max_width_container = MaxWidthContainer;
956
- exports.ptc_background_video = PtcBackgroundVideo;
957
+ exports.ptc_back_to_top = PtcBackToTop;
957
958
  exports.ptc_breadcrumb = PtcBreadcrumb;
958
959
  exports.ptc_button = PtcButton;
959
- exports.ptc_img = PtcImg;
960
- exports.ptc_jumbotron = PtcJumbotron;
961
960
  exports.ptc_para = PtcPara;
962
961
  exports.ptc_picture = PtcPicture;
962
+ exports.ptc_product_card = PtcProductCard;
963
+ exports.ptc_product_category = PtcProductCategory;
964
+ exports.ptc_product_dropdown = PtcProductDropdown;
965
+ exports.ptc_product_highlight_card = PtcProductHighlightCard;
966
+ exports.ptc_product_list = PtcProductList;
967
+ exports.ptc_product_sidebar = PtcProductSidebar;
963
968
  exports.ptc_spacer = PtcSpacer;
964
969
  exports.ptc_title = PtcTitle;
965
970
  exports.ptc_tooltip = PtcTooltip;