@ptcwebops/ptcw-design 6.2.6 → 6.2.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/{component-5b5b6a98.js → component-1b8ad4d2.js} +1 -1
- package/dist/cjs/{component-06dda623.js → component-35540bfb.js} +1 -1
- package/dist/cjs/event-jumbotron-example.cjs.entry.js +127 -0
- package/dist/cjs/icon-asset.cjs.entry.js +65 -0
- package/dist/cjs/list-item.cjs.entry.js +48 -0
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/ptc-breadcrumb.cjs.entry.js +47 -0
- package/dist/cjs/ptc-button.cjs.entry.js +84 -0
- package/dist/cjs/ptc-card-bottom_2.cjs.entry.js +132 -0
- package/dist/cjs/ptc-card-content.cjs.entry.js +68 -0
- package/dist/cjs/ptc-close-icon_2.cjs.entry.js +211 -0
- package/dist/cjs/ptc-data-lookup.cjs.entry.js +2 -2
- package/dist/cjs/ptc-form-checkbox_2.cjs.entry.js +1 -1
- package/dist/cjs/ptc-img.cjs.entry.js +133 -0
- package/dist/cjs/ptc-link.cjs.entry.js +95 -0
- package/dist/cjs/ptc-multi-select_2.cjs.entry.js +2 -2
- package/dist/cjs/ptc-overlay.cjs.entry.js +34 -0
- package/dist/cjs/ptc-para.cjs.entry.js +127 -0
- package/dist/cjs/ptc-scroll-button.cjs.entry.js +81 -0
- package/dist/cjs/ptc-spacer.cjs.entry.js +38 -0
- package/dist/cjs/ptc-title.cjs.entry.js +152 -0
- package/dist/cjs/ptcw-design.cjs.js +1 -1
- package/dist/custom-elements/index.js +1 -1
- package/dist/esm/blog-detail-content_2.entry.js +1 -1
- package/dist/esm/blog-detail-layout.entry.js +1 -1
- package/dist/esm/blogs-search-section.entry.js +1 -1
- package/dist/esm/{component-274da230.js → component-8c53e377.js} +1 -1
- package/dist/esm/{component-341e4eaa.js → component-9beac35b.js} +1 -1
- package/dist/esm/event-jumbotron-example.entry.js +123 -0
- package/dist/esm/homepage-jumbotron.entry.js +1 -1
- package/dist/esm/homepage-toggled-content.entry.js +1 -1
- package/dist/esm/icon-asset.entry.js +61 -0
- package/dist/esm/list-item.entry.js +44 -0
- package/dist/esm/loader.js +1 -1
- package/dist/esm/most-popular-news.entry.js +1 -1
- package/dist/esm/my-component.entry.js +1 -1
- package/dist/esm/ptc-accordion-item.entry.js +1 -1
- package/dist/esm/ptc-background-video.entry.js +1 -1
- package/dist/esm/ptc-breadcrumb.entry.js +43 -0
- package/dist/esm/ptc-button.entry.js +80 -0
- package/dist/esm/ptc-card-bottom_2.entry.js +127 -0
- package/dist/esm/ptc-card-content.entry.js +64 -0
- package/dist/esm/ptc-close-icon_2.entry.js +206 -0
- package/dist/esm/ptc-collapse-list.entry.js +1 -1
- package/dist/esm/ptc-data-lookup.entry.js +2 -2
- package/dist/esm/ptc-form-checkbox_2.entry.js +2 -2
- package/dist/esm/ptc-homepage-image-feature.entry.js +1 -1
- package/dist/esm/ptc-homepage-video-background.entry.js +1 -1
- package/dist/esm/ptc-img.entry.js +129 -0
- package/dist/esm/ptc-link.entry.js +91 -0
- package/dist/esm/ptc-media-card.entry.js +1 -1
- package/dist/esm/ptc-multi-select_2.entry.js +3 -3
- package/dist/esm/ptc-overlay.entry.js +30 -0
- package/dist/esm/ptc-para.entry.js +123 -0
- package/dist/esm/ptc-pricing-packaging-table.entry.js +1 -1
- package/dist/esm/ptc-pricing-tabs.entry.js +1 -1
- package/dist/esm/ptc-scroll-button.entry.js +77 -0
- package/dist/esm/ptc-spacer.entry.js +34 -0
- package/dist/esm/ptc-title.entry.js +148 -0
- package/dist/esm/ptcw-design.js +1 -1
- package/dist/esm/{utils-b7c6422e.js → utils-1bbe0c30.js} +1 -1
- package/dist/ptcw-design/p-0c69ea52.entry.js +1 -0
- package/dist/ptcw-design/p-25a25451.entry.js +1 -0
- package/dist/ptcw-design/{p-f05fec22.entry.js → p-2a672c0e.entry.js} +1 -1
- package/dist/ptcw-design/{p-e38ed0e3.entry.js → p-2ac7e3ce.entry.js} +1 -1
- package/dist/ptcw-design/p-2e19248b.entry.js +1 -0
- package/dist/ptcw-design/{p-29639cd4.entry.js → p-4036055e.entry.js} +1 -1
- package/dist/ptcw-design/p-453aee98.entry.js +1 -0
- package/dist/ptcw-design/{p-760507e1.entry.js → p-4fc9c83b.entry.js} +1 -1
- package/dist/ptcw-design/{p-df8526a2.entry.js → p-53f49500.entry.js} +1 -1
- package/dist/ptcw-design/{p-14e53256.entry.js → p-5602ffb4.entry.js} +1 -1
- package/dist/ptcw-design/{p-4c096997.entry.js → p-56a4c6d4.entry.js} +1 -1
- package/dist/ptcw-design/p-5d885144.entry.js +1 -0
- package/dist/ptcw-design/{p-1ca8a5bf.entry.js → p-5dae4f30.entry.js} +1 -1
- package/dist/ptcw-design/{p-999d1c9f.entry.js → p-65f19054.entry.js} +1 -1
- package/dist/ptcw-design/{p-2335d57c.entry.js → p-717d3a75.entry.js} +1 -1
- package/dist/ptcw-design/{p-419e260c.entry.js → p-74b323d6.entry.js} +1 -1
- package/dist/ptcw-design/p-7793babb.entry.js +1 -0
- package/dist/ptcw-design/{p-34610052.entry.js → p-873c711b.entry.js} +1 -1
- package/dist/ptcw-design/p-8b3ebdff.entry.js +1 -0
- package/dist/ptcw-design/{p-eab1042e.entry.js → p-942850e0.entry.js} +1 -1
- package/dist/ptcw-design/{p-be533f0d.js → p-98844b50.js} +1 -1
- package/dist/ptcw-design/{p-52b82ac5.entry.js → p-990bcbc4.entry.js} +1 -1
- package/dist/ptcw-design/p-9e9ae28c.entry.js +1 -0
- package/dist/ptcw-design/{p-841b807d.js → p-ad87bdab.js} +1 -1
- package/dist/ptcw-design/p-b35ad9ee.entry.js +1 -0
- package/dist/ptcw-design/p-b3bbd17d.entry.js +1 -0
- package/dist/ptcw-design/{p-34b270c1.entry.js → p-b4564411.entry.js} +1 -1
- package/dist/ptcw-design/p-b6e5379a.entry.js +1 -0
- package/dist/ptcw-design/p-b8ee8699.entry.js +1 -0
- package/dist/ptcw-design/{p-103ec637.entry.js → p-dee4bb6c.entry.js} +1 -1
- package/dist/ptcw-design/{p-7e7ebf0a.entry.js → p-deebd138.entry.js} +1 -1
- package/dist/ptcw-design/p-e90fbbad.entry.js +1 -0
- package/dist/ptcw-design/{p-cffebefe.entry.js → p-f07e64f2.entry.js} +1 -1
- package/dist/ptcw-design/p-f65adb71.entry.js +1 -0
- package/dist/ptcw-design/p-fcad5568.entry.js +1 -0
- package/dist/ptcw-design/ptcw-design.css +1 -1
- package/dist/ptcw-design/ptcw-design.esm.js +1 -1
- package/package.json +1 -1
- package/readme.md +1 -1
- package/dist/cjs/event-jumbotron-example_16.cjs.entry.js +0 -1315
- package/dist/cjs/ptc-card-bottom.cjs.entry.js +0 -46
- package/dist/esm/event-jumbotron-example_16.entry.js +0 -1296
- package/dist/esm/ptc-card-bottom.entry.js +0 -42
- package/dist/ptcw-design/p-a2d9831c.entry.js +0 -1
- package/dist/ptcw-design/p-f317864a.entry.js +0 -1
- /package/dist/ptcw-design/{p-c1513c3f.js → p-98426799.js} +0 -0
|
@@ -0,0 +1,127 @@
|
|
|
1
|
+
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-c83db688.js';
|
|
2
|
+
|
|
3
|
+
const ptcCardBottomCss = "h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{word-break:break-word;hyphens:manual;-webkit-hyphens:manual;-moz-hyphens:manual;-ms-hyphens:manual}@supports (hyphenate-limit-chars: 12 3 3){h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;hyphenate-limit-chars:12 3 3;hyphenate-limit-lines:2;hyphenate-limit-last:always;hyphenate-limit-zone:6%;-webkit-hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;-webkit-hyphenate-limit-chars:12 3 3;-webkit-hyphenate-limit-lines:2;-moz-hyphens:auto;-moz-hyphenate-limit-chars:12 3 3;-moz-hyphenate-limit-lines:2;-ms-hyphens:auto;-ms-hyphenate-limit-chars:12 3 3;-ms-hyphenate-limit-lines:2}}:host{display:block}:host ::slotted([slot=seo-content]){display:none}:host(.card-tall) .ptc-card-bottom-wrapper,:host(.card-wide) .ptc-card-bottom-wrapper{position:absolute;bottom:0;left:0;padding:0 var(--ptc-element-spacing-07) var(--ptc-element-spacing-07) var(--ptc-element-spacing-06);z-index:2}:host(.card-2up) .ptc-card-bottom-wrapper{position:absolute;bottom:0;left:0;padding:0px 24px 24px 16px}:host(.card-playlist){flex:72% 2 1;align-self:center}:host(.mouse-hover-card-bottom) .ptc-card-bottom-wrapper{z-index:5;cursor:pointer}:host(.extra-tall){position:absolute;top:0;left:0}:host(.extra-tall) .ptc-card-bottom-wrapper{position:relative;top:0px;left:0px;bottom:0px;right:0px;display:flex;flex-direction:column;align-items:center;width:calc(100% - 64px);padding:var(--ptc-layout-spacing-05) var(--ptc-element-spacing-07);padding-bottom:calc(var(--ptc-layout-spacing-03) + var(--ptc-layout-spacing-05));z-index:2}@media only screen and (min-width: 768px){:host(.extra-tall) .ptc-card-bottom-wrapper{padding-bottom:var(--ptc-layout-spacing-05)}}@media only screen and (min-width: 992px){:host(.extra-tall) .ptc-card-bottom-wrapper{padding-top:var(--ptc-layout-spacing-05)}}@media only screen and (min-width: 1200px){:host(.extra-tall) .ptc-card-bottom-wrapper{padding-top:calc(var(--ptc-layout-spacing-04) + var(--ptc-layout-spacing-05))}}@media only screen and (min-width: 1440px){:host(.extra-tall) .ptc-card-bottom-wrapper{padding-top:calc(var(--ptc-layout-spacing-05) * 2)}}:host(.color-outlined) .ptc-card-bottom-wrapper{position:absolute;top:50%;transform:translateY(-50%);display:flex;justify-content:center;flex-direction:column;align-items:center;width:calc(100% - 80px);height:100%;padding:0px var(--ptc-element-spacing-08)}:host(.most-popular){padding:0 16px 14px 16px}@media only screen and (min-width: 768px){:host(.card-2up) .ptc-card-bottom-wrapper{padding:0 32px 32px 24px}}@media only screen and (min-width: 1200px){:host(.card-video-intro){flex:20% 2 1;justify-content:flex-end}:host(.card-video-intro) .ptc-card-bottom-wrapper{display:flex;justify-content:flex-end}}@media only screen and (min-width: 1440px){:host(.card-2up) .ptc-card-bottom-wrapper{width:70%}}@media only screen and (min-width: 1980px){:host(.card-2up) .ptc-card-bottom-wrapper{width:60%}}";
|
|
4
|
+
|
|
5
|
+
const PtcCardBottom = class {
|
|
6
|
+
constructor(hostRef) {
|
|
7
|
+
registerInstance(this, hostRef);
|
|
8
|
+
this.hoverEvent = createEvent(this, "hoverEvent", 7);
|
|
9
|
+
this.leaveEvent = createEvent(this, "leaveEvent", 7);
|
|
10
|
+
this.cardType = undefined;
|
|
11
|
+
this.styles = undefined;
|
|
12
|
+
}
|
|
13
|
+
hoverEventHandler() {
|
|
14
|
+
this.hoverEvent.emit();
|
|
15
|
+
//if statement: the card type that doesn't need a hover event
|
|
16
|
+
if (!this.el.classList.contains('card-video') && !this.el.classList.contains('card-playlist') && !this.el.classList.contains('extra-tall')) {
|
|
17
|
+
this.el.previousElementSibling.classList.add('mouse-hover');
|
|
18
|
+
this.el.classList.add('mouse-hover-card-bottom');
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
leaveEventHandler() {
|
|
22
|
+
this.hoverEvent.emit();
|
|
23
|
+
//if statement: the card type that doesn't need a hover event
|
|
24
|
+
if (!this.el.classList.contains('card-video') && !this.el.classList.contains('card-playlist') && !this.el.classList.contains('extra-tall')) {
|
|
25
|
+
this.el.previousElementSibling.classList.remove('mouse-hover');
|
|
26
|
+
this.el.classList.remove('mouse-hover-card-bottom');
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
render() {
|
|
30
|
+
const classMap = this.getCssClassMap();
|
|
31
|
+
return (h(Host, { part: "card-bottom", class: classMap, onMouseEnter: this.hoverEventHandler.bind(this), onMouseLeave: this.leaveEventHandler.bind(this) }, this.styles && h("style", null, this.styles), h("slot", { name: "slot-content" }), h("div", { class: "ptc-card-bottom-wrapper" }, h("slot", null))));
|
|
32
|
+
}
|
|
33
|
+
getCssClassMap() {
|
|
34
|
+
return {
|
|
35
|
+
[this.cardType]: this.cardType ? true : false,
|
|
36
|
+
};
|
|
37
|
+
}
|
|
38
|
+
get el() { return getElement(this); }
|
|
39
|
+
};
|
|
40
|
+
PtcCardBottom.style = ptcCardBottomCss;
|
|
41
|
+
|
|
42
|
+
const ptcCardWrapperCss = "h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{word-break:break-word;hyphens:manual;-webkit-hyphens:manual;-moz-hyphens:manual;-ms-hyphens:manual}@supports (hyphenate-limit-chars: 12 3 3){h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;hyphenate-limit-chars:12 3 3;hyphenate-limit-lines:2;hyphenate-limit-last:always;hyphenate-limit-zone:6%;-webkit-hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;-webkit-hyphenate-limit-chars:12 3 3;-webkit-hyphenate-limit-lines:2;-moz-hyphens:auto;-moz-hyphenate-limit-chars:12 3 3;-moz-hyphenate-limit-lines:2;-ms-hyphens:auto;-ms-hyphenate-limit-chars:12 3 3;-ms-hyphenate-limit-lines:2}}:host{display:block}:host(.card-tall),:host(.card-wide),:host(.card-video),:host(.card-playlist),:host(.card-2up){position:relative}:host(.card-tall) a,:host(.card-wide) a,:host(.card-video) a,:host(.card-playlist) a,:host(.card-2up) a{text-decoration:none !important}:host(.card-tall) a:hover,:host(.card-wide) a:hover,:host(.card-video) a:hover,:host(.card-playlist) a:hover,:host(.card-2up) a:hover{text-decoration:none}:host(.card-tall) a:focus,:host(.card-wide) a:focus,:host(.card-video) a:focus,:host(.card-playlist) a:focus,:host(.card-2up) a:focus{outline:none;text-decoration:none}:host(.card-tall) a:focus-visible,:host(.card-wide) a:focus-visible,:host(.card-video) a:focus-visible,:host(.card-playlist) a:focus-visible,:host(.card-2up) a:focus-visible{outline:none;text-decoration:none}:host(.card-tall) a:focus-visible::before,:host(.card-wide) a:focus-visible::before,:host(.card-video) a:focus-visible::before,:host(.card-playlist) a:focus-visible::before,:host(.card-2up) a:focus-visible::before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;z-index:2;border-radius:var(--ptc-border-radius-large);outline:5px solid var(--keyboard-nav-outline)}:host(.card-tall) a.focus-state-dark-background:focus-visible::before,:host(.card-wide) a.focus-state-dark-background:focus-visible::before,:host(.card-video) a.focus-state-dark-background:focus-visible::before,:host(.card-playlist) a.focus-state-dark-background:focus-visible::before,:host(.card-2up) a.focus-state-dark-background:focus-visible::before{border:2px solid white}:host(.card-playlist) div:not(.tracker-div),:host(.card-playlist) a{display:flex;text-decoration:none;outline:none}:host(.card-playlist) div:not(.tracker-div):hover,:host(.card-playlist) a:hover{text-decoration:none;outline:none}:host(.card-video-intro){border-bottom-left-radius:var(--ptc-border-radius-large);border-bottom-right-radius:var(--ptc-border-radius-large)}:host(.card-video-intro) div:not(.tracker-div){display:block}:host(.card-video-shadow){box-shadow:var(--ptc-shadow-x-small)}:host(.extra-tall){position:relative}:host(.extra-tall) a{position:relative;display:block;width:100%;height:100%;inset:0px}:host(.extra-tall) a::after{content:\"\";position:absolute;width:100%;height:100%;background:rgba(0, 0, 0, 0);bottom:0;left:0;border-radius:var(--ptc-border-radius-large);transition:background var(--ptc-transition-medium) var(--ptc-ease-inout)}:host(.color-outlined){position:relative;border-radius:var(--ptc-border-radius-large)}:host(.card-video-p){padding:var(--ptc-element-spacing-05);padding-bottom:var(--ptc-element-spacing-06)}:host(.card-m-right){margin-right:var(--ptc-element-spacing-02)}:host(.card-m-left){margin-left:var(--ptc-element-spacing-02)}:host(.extraT-overlay) a::after{background:rgba(0, 0, 0, 0.6)}@media only screen and (min-width: 768px){:host(.card-m-right){margin-right:var(--ptc-element-spacing-03)}:host(.card-m-left){margin-left:var(--ptc-element-spacing-03)}}@media only screen and (min-width: 992px){:host(.card-m-right){margin-right:var(--ptc-element-spacing-04)}:host(.card-m-left){margin-left:var(--ptc-element-spacing-04)}}@media only screen and (min-width: 1200px){:host(.card-video-intro) div:not(.tracker-div){display:flex}}:host(.result-box){width:505px;border:1px solid #6A6A6A;padding-top:56px;padding-bottom:56px;border-radius:var(--ptc-border-radius-large)}:host(.result-box) div:not(.tracker-div){display:flex;justify-content:center;align-items:center;flex-direction:column}:host(.simple-card){border-radius:var(--ptc-border-radius-standard);background-color:var(--color-white);box-shadow:var(--ptc-shadow-small);padding:var(--ptc-layout-spacing-03)}:host(.simple-card) a{text-decoration:none}:host(.simple-card) a:hover{text-decoration:none}:host(.most-popular){position:relative;margin:12px;background-color:var(--color-white)}:host(.most-popular) a{text-decoration:none}:host(.most-popular) a:hover{text-decoration:none}:host(.most-popular) a:focus-visible{box-shadow:0 0 0 5px var(--keyboard-nav-outline);border-radius:var(--ptc-border-radius-standard) !important;display:block;outline:none}";
|
|
43
|
+
|
|
44
|
+
const PtcCardPlm = class {
|
|
45
|
+
constructor(hostRef) {
|
|
46
|
+
registerInstance(this, hostRef);
|
|
47
|
+
this.hoverEvent = createEvent(this, "hoverEvent", 7);
|
|
48
|
+
this.leaveEvent = createEvent(this, "leaveEvent", 7);
|
|
49
|
+
this.squareHeightChanged = createEvent(this, "squareHeightChanged", 7);
|
|
50
|
+
this.cardType = undefined;
|
|
51
|
+
this.cardLink = undefined;
|
|
52
|
+
this.linkTitle = undefined;
|
|
53
|
+
this.linkTarget = '_self';
|
|
54
|
+
this.isLoading = false;
|
|
55
|
+
this.trackerId = undefined;
|
|
56
|
+
this.styles = undefined;
|
|
57
|
+
this.darkFocusState = false;
|
|
58
|
+
}
|
|
59
|
+
handleResize() {
|
|
60
|
+
this.checkScreenSize();
|
|
61
|
+
this.emitHeight();
|
|
62
|
+
}
|
|
63
|
+
hoverEventHandler() {
|
|
64
|
+
if (this.el.classList.contains('extra-tall')) {
|
|
65
|
+
this.hoverEvent.emit();
|
|
66
|
+
this.el.classList.add('extraT-overlay');
|
|
67
|
+
}
|
|
68
|
+
if (this.el.classList.contains('color-outlined')) {
|
|
69
|
+
this.hoverEvent.emit();
|
|
70
|
+
const cardOverlay = this.el.querySelector('ptc-overlay');
|
|
71
|
+
cardOverlay.setOverlay('black-5');
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
leaveEventHandler() {
|
|
75
|
+
if (this.el.classList.contains('extra-tall')) {
|
|
76
|
+
this.hoverEvent.emit();
|
|
77
|
+
this.el.classList.remove('extraT-overlay');
|
|
78
|
+
}
|
|
79
|
+
if (this.el.classList.contains('color-outlined')) {
|
|
80
|
+
this.hoverEvent.emit();
|
|
81
|
+
const cardOverlay = this.el.querySelector('ptc-overlay');
|
|
82
|
+
cardOverlay.setOverlay('black-4');
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
componentDidLoad() {
|
|
86
|
+
this.checkScreenSize();
|
|
87
|
+
this.emitHeight();
|
|
88
|
+
}
|
|
89
|
+
render() {
|
|
90
|
+
const classMap = this.getCssClassMap();
|
|
91
|
+
const Tag = !!this.cardLink ? 'a' : 'div';
|
|
92
|
+
return (h(Host, Object.assign({ class: classMap }, (!this.isLoading ? { onMouseEnter: this.hoverEventHandler.bind(this) } : {}), (!this.isLoading ? { onMouseLeave: this.leaveEventHandler.bind(this) } : {})), this.styles && h("style", null, this.styles), h("div", { class: "tracker-div mf-listen", id: this.trackerId }, h(Tag, Object.assign({ class: `mf-listen ${this.darkFocusState ? "focus-state-dark-background" : ""}` }, (!!this.cardLink && this.cardType !== "simple-card" ? { tabindex: '0' } : { tabindex: '-1' }), (!!this.cardLink && !this.isLoading ? { href: this.cardLink } : {}), (!!this.linkTarget && !!this.cardLink && !this.isLoading ? { target: this.linkTarget } : {}), (!!this.cardLink && !this.isLoading ? { title: this.linkTitle ? this.linkTitle : this.cardLink } : {})), h("slot", null)))));
|
|
93
|
+
}
|
|
94
|
+
getCssClassMap() {
|
|
95
|
+
return {
|
|
96
|
+
[this.cardType]: this.cardType ? true : false,
|
|
97
|
+
};
|
|
98
|
+
}
|
|
99
|
+
emitHeight() {
|
|
100
|
+
const height = this.el.offsetHeight;
|
|
101
|
+
this.squareHeightChanged.emit(height);
|
|
102
|
+
}
|
|
103
|
+
getBtmContentHeight() {
|
|
104
|
+
const bottomContent = this.el.querySelector('ptc-card-bottom');
|
|
105
|
+
return bottomContent.offsetHeight;
|
|
106
|
+
}
|
|
107
|
+
checkScreenSize() {
|
|
108
|
+
if (this.cardType === 'extra-tall') {
|
|
109
|
+
if (window.innerWidth < 768) {
|
|
110
|
+
const cardContent = this.el.querySelector('ptc-card-content');
|
|
111
|
+
if (cardContent) {
|
|
112
|
+
cardContent.setHeight(this.getBtmContentHeight());
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
else {
|
|
116
|
+
const cardContent = this.el.querySelector('ptc-card-content');
|
|
117
|
+
if (cardContent) {
|
|
118
|
+
cardContent.removeInlineHeight();
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
get el() { return getElement(this); }
|
|
124
|
+
};
|
|
125
|
+
PtcCardPlm.style = ptcCardWrapperCss;
|
|
126
|
+
|
|
127
|
+
export { PtcCardBottom as ptc_card_bottom, PtcCardPlm as ptc_card_wrapper };
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-c83db688.js';
|
|
2
|
+
|
|
3
|
+
const ptcCardContentCss = "h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{word-break:break-word;hyphens:manual;-webkit-hyphens:manual;-moz-hyphens:manual;-ms-hyphens:manual}@supports (hyphenate-limit-chars: 12 3 3){h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;hyphenate-limit-chars:12 3 3;hyphenate-limit-lines:2;hyphenate-limit-last:always;hyphenate-limit-zone:6%;-webkit-hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;-webkit-hyphenate-limit-chars:12 3 3;-webkit-hyphenate-limit-lines:2;-moz-hyphens:auto;-moz-hyphenate-limit-chars:12 3 3;-moz-hyphenate-limit-lines:2;-ms-hyphens:auto;-ms-hyphenate-limit-chars:12 3 3;-ms-hyphenate-limit-lines:2}}:host{display:block;height:100%}:host ::slotted([slot=seo-content]){display:none}:host(.speed-bump){border:1px solid var(--color-gray-08);border-radius:var(--ptc-border-radius-large);padding:var(--ptc-element-spacing-06) 28px var(--ptc-element-spacing-06) 28px;text-align:center}:host(.speed-bump-2){border:1px solid var(--color-gray-08);border-radius:var(--ptc-border-radius-large);padding:var(--ptc-element-spacing-07) var(--ptc-element-spacing-05);text-align:center}@media only screen and (min-width: 768px){:host(.speed-bump){text-align:left}}@media only screen and (min-width: 768px){:host(.speed-bump-2){text-align:left}}:host(.card-tall) .ptc-card-content-wrapper,:host(.card-video) .ptc-card-content-wrapper,:host(.card-wide) .ptc-card-content-wrapper,:host(.card-playlist) .ptc-card-content-wrapper{border-radius:var(--ptc-border-radius-large);position:relative}:host(.card-tall) .ptc-card-content-wrapper::before,:host(.card-video) .ptc-card-content-wrapper::before,:host(.card-wide) .ptc-card-content-wrapper::before,:host(.card-playlist) .ptc-card-content-wrapper::before{content:\"\";position:absolute;width:100%;height:100%;border-radius:var(--ptc-border-radius-large);top:0;left:0;background:transparent;z-index:1;box-shadow:var(--ptc-shadow-x-small);transition:background var(--ptc-transition-medium) var(--ptc-ease-inout)}:host(.card-tall) .ptc-card-content-wrapper::after,:host(.card-video) .ptc-card-content-wrapper::after,:host(.card-wide) .ptc-card-content-wrapper::after,:host(.card-playlist) .ptc-card-content-wrapper::after{content:url(\"data:image/svg+xml,%3Csvg width='54' height='56' viewBox='0 0 54 56' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23filter0_d_126_10476)'%3E%3Cpath d='M42 20L12 36V4L42 20Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d_126_10476' x='0' y='0' width='54' height='56' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dy='8'/%3E%3CfeGaussianBlur stdDeviation='6'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_126_10476'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow_126_10476' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E%0A\");position:absolute;opacity:0;top:52.5%;left:50%;transform:translate(-50%, -50%);z-index:2;transition:opacity var(--ptc-transition-medium) var(--ptc-ease-inout)}:host(.extra-tall) .ptc-card-content-wrapper{border-radius:var(--ptc-border-radius-large);position:relative;box-shadow:0px 4px 4px rgba(0, 0, 0, 0.12)}:host(.card-2up) .ptc-card-content-wrapper{border-radius:var(--ptc-border-radius-large);position:relative}:host(.card-2up) .ptc-card-content-wrapper::before{content:\"\";position:absolute;width:100%;height:100%;border-radius:var(--ptc-border-radius-large);top:0;left:0;background:transparent;z-index:1;box-shadow:var(--ptc-shadow-x-small);transition:background var(--ptc-transition-medium) var(--ptc-ease-inout)}:host(.card-2up) .ptc-card-content-wrapper::after{content:\"\";position:absolute;opacity:0;top:52.5%;left:50%;transform:translate(-50%, -50%);z-index:2;transition:opacity var(--ptc-transition-medium) var(--ptc-ease-inout)}:host(.card-playlist) .ptc-card-content-wrapper{width:112px;height:112px}:host(.card-playlist) .ptc-card-content-wrapper::before{width:112px;height:112px}:host(.card-playlist) .ptc-card-content-wrapper::after{content:url(\"data:image/svg+xml,%3Csvg width='46' height='48' viewBox='0 0 46 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23filter0_d_126_10337)'%3E%3Cpath d='M34 16L12 28V4L34 16Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d_126_10337' x='0' y='0' width='46' height='48' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dy='8'/%3E%3CfeGaussianBlur stdDeviation='6'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_126_10337'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow_126_10337' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E%0A\");width:40px;height:30px;top:50%}:host(.thumbnail-video-preview) .ptc-card-content-wrapper{cursor:pointer;position:relative}:host(.thumbnail-video-preview) .ptc-card-content-wrapper::before{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;background:transparent;z-index:1;box-shadow:var(--ptc-shadow-x-small);transition:background var(--ptc-transition-medium) var(--ptc-ease-inout)}:host(.thumbnail-video-preview) .ptc-card-content-wrapper::after{content:url(\"data:image/svg+xml,%3Csvg width='54' height='56' viewBox='0 0 54 56' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23filter0_d_126_10476)'%3E%3Cpath d='M42 20L12 36V4L42 20Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d_126_10476' x='0' y='0' width='54' height='56' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dy='8'/%3E%3CfeGaussianBlur stdDeviation='6'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_126_10476'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow_126_10476' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E%0A\");position:absolute;opacity:1;top:60%;left:50%;transform:translate(-50%, -50%);z-index:2;transition:opacity var(--ptc-transition-medium) var(--ptc-ease-inout)}:host(.card-video) .ptc-card-content-wrapper::after{top:59.5%}:host(.mouse-hover) .ptc-card-content-wrapper::before{background:rgba(0, 0, 0, 0.6)}:host(.mouse-hover) .ptc-card-content-wrapper::after{opacity:1}:host(.card-tall) .ptc-card-content-wrapper::before,:host(.card-wide) .ptc-card-content-wrapper::before,:host(.card-2up) .ptc-card-content-wrapper::before{height:100%}:host(.card-playlist){flex:1 2 0%;margin-right:var(--ptc-element-spacing-04)}@media only screen and (min-width: 768px){:host(.card-playlist){margin-right:var(--ptc-element-spacing-03)}}@media only screen and (min-width: 992px){:host(.card-playlist) .ptc-card-content-wrapper{width:88px;height:88px}:host(.card-playlist) .ptc-card-content-wrapper::before{width:88px;height:88px}}@media only screen and (min-width: 768px){:host(.card-playlist) .ptc-card-content-wrapper{width:112px;height:112px}:host(.card-playlist) .ptc-card-content-wrapper::before{width:112px;height:112px}}@media screen and (min-width: 1981px){:host(.card-playlist){margin-right:var(--ptc-element-spacing-04)}}@media only screen and (min-width: 1200px){:host(.card-video-intro){flex:80% 8 1}}:host(.card-video) .ptc-card-content-wrapper{padding-bottom:56.25%}:host(.card-video) .ptc-card-content-wrapper ::slotted(*){position:absolute;width:100%;height:100%;top:0;left:0}:host(.card-tall) .ptc-card-content-wrapper{height:322px}:host(.card-tall) .ptc-card-content-wrapper ::slotted(*){height:322px}:host(.card-wide) .ptc-card-content-wrapper{height:268px}:host(.card-wide) .ptc-card-content-wrapper ::slotted(*){height:268px}:host(.card-2up) .ptc-card-content-wrapper{height:322px}:host(.card-2up) .ptc-card-content-wrapper ::slotted(*){height:322px}:host(.extra-tall) .ptc-card-content-wrapper{height:auto}:host(.extra-tall) .ptc-card-content-wrapper ::slotted(*){height:auto}:host(.color-outlined){border-radius:var(--ptc-border-radius-large);box-shadow:0px 4px 4px rgba(0, 0, 0, 0.12)}:host(.color-outlined) .ptc-card-content-wrapper{height:235px}:host(.color-outlined) .ptc-card-content-wrapper ::slotted(*){height:235px}@media only screen and (min-width: 480px){:host(.extra-tall) .ptc-card-content-wrapper{height:435px}:host(.extra-tall) .ptc-card-content-wrapper ::slotted(*){height:435px}}@media only screen and (min-width: 768px){:host(.card-tall) .ptc-card-content-wrapper{height:325px}:host(.card-tall) .ptc-card-content-wrapper ::slotted(*){height:325px}:host(.card-wide) .ptc-card-content-wrapper{height:268px}:host(.card-wide) .ptc-card-content-wrapper ::slotted(*){height:268px}:host(.card-2up) .ptc-card-content-wrapper{height:268px}:host(.card-2up) .ptc-card-content-wrapper ::slotted(*){height:268px}:host(.extra-tall) .ptc-card-content-wrapper{height:507px}:host(.extra-tall) .ptc-card-content-wrapper ::slotted(*){height:507px}}@media only screen and (min-width: 992px){:host(.card-tall) .ptc-card-content-wrapper{height:380px}:host(.card-tall) .ptc-card-content-wrapper ::slotted(*){height:380px}}@media only screen and (min-width: 1200px){:host(.extra-tall) .ptc-card-content-wrapper{height:663px}:host(.extra-tall) .ptc-card-content-wrapper ::slotted(*){height:663px}}@media only screen and (min-width: 1980px){:host(.card-tall) .ptc-card-content-wrapper{height:546px}:host(.card-tall) .ptc-card-content-wrapper ::slotted(*){height:546px}:host(.card-wide) .ptc-card-content-wrapper{height:376px}:host(.card-wide) .ptc-card-content-wrapper ::slotted(*){height:376px}:host(.card-2up) .ptc-card-content-wrapper{height:376px}:host(.card-2up) .ptc-card-content-wrapper ::slotted(*){height:376px}}:host(.o-red){border:2px solid var(--color-red-07)}:host(.o-green){border:2px solid var(--color-green-07)}:host(.o-slate-grey){border:2px solid var(--color-gray-07)}:host(.o-orange){border:2px solid var(--color-orange-07)}:host(.o-blue){border:2px solid var(--color-blue-07)}";
|
|
4
|
+
|
|
5
|
+
const PtcCardContent = class {
|
|
6
|
+
constructor(hostRef) {
|
|
7
|
+
registerInstance(this, hostRef);
|
|
8
|
+
this.hoverEvent = createEvent(this, "hoverEvent", 7);
|
|
9
|
+
this.leaveEvent = createEvent(this, "leaveEvent", 7);
|
|
10
|
+
this.cardType = undefined;
|
|
11
|
+
this.outlineColor = undefined;
|
|
12
|
+
this.styles = undefined;
|
|
13
|
+
this.isLoading = false;
|
|
14
|
+
}
|
|
15
|
+
hoverEventHandler() {
|
|
16
|
+
if (!this.el.classList.contains('speed-bump') &&
|
|
17
|
+
!this.el.classList.contains('card-video-intro') &&
|
|
18
|
+
!this.el.classList.contains('card-dynamic') &&
|
|
19
|
+
!this.el.classList.contains('extra-tall')) {
|
|
20
|
+
this.hoverEvent.emit();
|
|
21
|
+
this.el.classList.add('mouse-hover');
|
|
22
|
+
if (!this.el.classList.contains('card-video') && !this.el.classList.contains('card-playlist') && this.el.nextElementSibling) {
|
|
23
|
+
this.el.nextElementSibling.classList.add('mouse-hover-card-bottom');
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
leaveEventHandler() {
|
|
28
|
+
if (!this.el.classList.contains('speed-bump') &&
|
|
29
|
+
!this.el.classList.contains('card-video-intro') &&
|
|
30
|
+
!this.el.classList.contains('card-dynamic') &&
|
|
31
|
+
!this.el.classList.contains('extra-tall')) {
|
|
32
|
+
this.hoverEvent.emit();
|
|
33
|
+
this.el.classList.remove('mouse-hover');
|
|
34
|
+
if (!this.el.classList.contains('card-video') && !this.el.classList.contains('card-playlist') && this.el.nextElementSibling) {
|
|
35
|
+
this.el.nextElementSibling.classList.remove('mouse-hover-card-bottom');
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
async setHeight(height) {
|
|
40
|
+
this.el.style.height = height + 'px';
|
|
41
|
+
const image = this.el.querySelector('ptc-picture');
|
|
42
|
+
image.style.height = height + 'px';
|
|
43
|
+
}
|
|
44
|
+
async removeInlineHeight() {
|
|
45
|
+
this.el.style.removeProperty('height');
|
|
46
|
+
const image = this.el.querySelector('ptc-picture');
|
|
47
|
+
if (image)
|
|
48
|
+
image.style.removeProperty('height');
|
|
49
|
+
}
|
|
50
|
+
render() {
|
|
51
|
+
const classMap = this.getCssClassMap();
|
|
52
|
+
return (h(Host, Object.assign({ part: "card-content", class: classMap }, (!this.isLoading ? { onMouseEnter: this.hoverEventHandler.bind(this) } : {}), (!this.isLoading ? { onMouseLeave: this.leaveEventHandler.bind(this) } : {})), this.styles && h("style", null, this.styles), h("slot", { name: "slot-content" }), h("div", { class: "ptc-card-content-wrapper" }, h("slot", null))));
|
|
53
|
+
}
|
|
54
|
+
getCssClassMap() {
|
|
55
|
+
return {
|
|
56
|
+
[this.cardType]: !!this.cardType ? true : false,
|
|
57
|
+
[this.outlineColor]: !!this.outlineColor ? true : false,
|
|
58
|
+
};
|
|
59
|
+
}
|
|
60
|
+
get el() { return getElement(this); }
|
|
61
|
+
};
|
|
62
|
+
PtcCardContent.style = ptcCardContentCss;
|
|
63
|
+
|
|
64
|
+
export { PtcCardContent as ptc_card_content };
|
|
@@ -0,0 +1,206 @@
|
|
|
1
|
+
import { r as registerInstance, h, H as Host, c as createEvent, g as getElement } from './index-c83db688.js';
|
|
2
|
+
|
|
3
|
+
const ptcCloseIconCss = "h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{word-break:break-word;hyphens:manual;-webkit-hyphens:manual;-moz-hyphens:manual;-ms-hyphens:manual}@supports (hyphenate-limit-chars: 12 3 3){h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;hyphenate-limit-chars:12 3 3;hyphenate-limit-lines:2;hyphenate-limit-last:always;hyphenate-limit-zone:6%;-webkit-hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;-webkit-hyphenate-limit-chars:12 3 3;-webkit-hyphenate-limit-lines:2;-moz-hyphens:auto;-moz-hyphenate-limit-chars:12 3 3;-moz-hyphenate-limit-lines:2;-ms-hyphens:auto;-ms-hyphenate-limit-chars:12 3 3;-ms-hyphenate-limit-lines:2}}:host{display:inline-block}:host:focus-visible{border-radius:var(--ptc-border-radius-standard);outline:5px solid var(--keyboard-nav-outline)}:host .close-icon{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border:5px solid transparent;box-sizing:border-box;border-radius:var(--ptc-border-radius-standard);cursor:pointer}:host .close-icon svg{padding:7px;border:1px solid transparent;border-radius:var(--ptc-border-radius-standard);background-color:transparent;transition:border-color var(--ptc-transition-medium) var(--ptc-ease-inout)}:host .close-icon svg:focus-visible{border-radius:var(--ptc-border-radius-standard);outline:5px solid var(--keyboard-nav-outline)}:host .close-icon:hover svg{border-color:var(--color-gray-12)}:host .close-icon:active svg{transition-duration:0ms;background-color:var(--color-gray-02);border:1px solid var(--color-gray-12)}";
|
|
4
|
+
|
|
5
|
+
const PtcCloseIcon = class {
|
|
6
|
+
constructor(hostRef) {
|
|
7
|
+
registerInstance(this, hostRef);
|
|
8
|
+
}
|
|
9
|
+
render() {
|
|
10
|
+
return (h(Host, null, h("div", { class: 'close-icon mf-listen', "tab-index": "0" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", tabindex: 0 }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M7.00089 8.4151L12.5876 14.0018L14.0018 12.5876L8.4151 7.00089L14.0018 1.41421L12.5876 0L7.00089 5.58667L1.41421 0L0 1.41421L5.58667 7.00089L0 12.5876L1.41421 14.0018L7.00089 8.4151Z", fill: "#20262A" })))));
|
|
11
|
+
}
|
|
12
|
+
};
|
|
13
|
+
PtcCloseIcon.style = ptcCloseIconCss;
|
|
14
|
+
|
|
15
|
+
const ptcModalCss = "h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{word-break:break-word;hyphens:manual;-webkit-hyphens:manual;-moz-hyphens:manual;-ms-hyphens:manual}@supports (hyphenate-limit-chars: 12 3 3){h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;hyphenate-limit-chars:12 3 3;hyphenate-limit-lines:2;hyphenate-limit-last:always;hyphenate-limit-zone:6%;-webkit-hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;-webkit-hyphenate-limit-chars:12 3 3;-webkit-hyphenate-limit-lines:2;-moz-hyphens:auto;-moz-hyphenate-limit-chars:12 3 3;-moz-hyphenate-limit-lines:2;-ms-hyphens:auto;-ms-hyphenate-limit-chars:12 3 3;-ms-hyphenate-limit-lines:2}}:host{display:block}.wrapper{position:absolute;width:100vw;height:100%;top:0;left:0;z-index:500001;display:none}.wrapper.fixed{position:fixed}.wrapper .modal-popup{margin:7.5rem auto 1rem;background-color:var(--color-white);box-shadow:var(--ptc-shadow-large);max-width:22.5625rem;width:80%;display:flex;flex-direction:column;align-items:flex-end;align-content:flex-end;z-index:50020;transform:translateY(-100%)}@media only screen and (min-width: 992px){.wrapper .modal-popup{max-width:29.125rem}}.wrapper .modal-popup.md{max-width:44.125rem}.wrapper .modal-popup.lg{max-width:56.25rem}.wrapper .modal-popup.xl{max-width:64.0625rem}.wrapper .modal-popup.max{width:calc(100% - 4rem);max-width:75rem;height:80vh;margin:auto;overflow:hidden}.wrapper .modal-popup.max .close{margin:var(--ptc-element-spacing-02)}.wrapper .modal-popup.max .modal-body iframe{height:100%}.wrapper .modal-popup.sm-modal{width:341px;max-width:341px}@media only screen and (max-width: 360px){.wrapper .modal-popup.sm-modal{max-width:100%;width:100%}}@media only screen and (min-width: 360px) and (max-width: 479.55px){.wrapper .modal-popup.sm-modal{max-width:360px;width:360px}}@media only screen and (min-width: 480px){.wrapper .modal-popup.sm-modal.modal-with-content{width:371px;max-width:371px}}@media only screen and (min-width: 360px) and (max-width: 479.55px){.wrapper .modal-popup.sm-modal.modal-with-content{max-width:360px;width:360px}}.wrapper .modal-popup .modal-body{width:100%}.wrapper .modal-popup .modal-body iframe{opacity:0;overflow:hidden;width:100%;border:0;transition:opacity var(--ptc-ease-inout) var(--ptc-transition-medium)}.wrapper .modal-popup .modal-body iframe.ready{opacity:1}.wrapper .modal-popup .modal-body.frame{overflow:hidden;overflow-y:hidden;overflow-x:hidden}.wrapper .modal-popup .modal-body.html{overflow:hidden}.wrapper .modal-popup.frame .modal-body{display:flex;flex:1;height:100%}.wrapper .modal-popup .close{margin-right:2px;margin-top:2px}.wrapper .modal-popup.shadow-scroller{max-height:calc(100vh - 220px)}@media only screen and (min-width: 992px){.wrapper .modal-popup.shadow-scroller{max-height:756px}}.wrapper .modal-popup.shadow-scroller .modal-header{transition:box-shadow ease-in-out 250ms;position:relative;min-height:57px;border-bottom:1px solid var(--color-gray-02);width:100%}.wrapper .modal-popup.shadow-scroller .modal-header .close{position:absolute;top:8px;right:8px;margin:0}.wrapper .modal-popup.shadow-scroller .modal-body{min-height:200px;overflow-x:hidden}.wrapper .modal-popup.shadow-scroller .modal-footer{transition:box-shadow ease-in-out 250ms;width:100%;min-height:60px;border-top:1px solid var(--color-gray-02);padding-top:1rem}.wrapper .modal-popup.shadow-scroller.scroll-top .modal-header{box-shadow:0px 4px 12px rgba(0, 0, 0, 0.12)}.wrapper .modal-popup.shadow-scroller.scroll-bottom .modal-footer{box-shadow:0px -8px 12px rgba(0, 0, 0, 0.12)}.wrapper.show{display:flex;align-items:flex-start}.wrapper.show .modal-popup{transform:translateY(0)}.wrapper.show .modal-popup.rounded{border-radius:var(--ptc-border-radius-standard)}.overlay{width:100vw;height:100vh;position:fixed;top:0;left:0;z-index:50010;display:block;background-color:rgba(0, 0, 0, 0.6)}:host(.standard) .modal-popup{border-radius:var(--ptc-border-radius-standard)}:host(.large) .modal-popup{border-radius:var(--ptc-border-radius-large)}:host(.pill) .modal-popup{border-radius:var(--ptc-border-radius-pill)}:host(.circle) .modal-popup{border-radius:var(--ptc-border-radius-circle)}:host(.enclose-modal) .modal-popup{max-height:calc(100vh - 180px)}:host(.enclose-modal) .modal-popup:not(.frame) .modal-body{overflow-y:auto}:host(.bio-modal) .wrapper.show{align-items:flex-start}@media only screen and (min-width: 768px){:host(.bio-modal) .wrapper.show{align-items:center}}:host(.bio-modal) .modal-popup{padding:30px 15px 30px 0;max-width:1200px;margin:20px auto 0 auto;max-height:calc(100vh - 180px);width:90%;height:100%}:host(.bio-modal) .modal-popup .modal-body{height:100%}@media only screen and (min-width: 768px){:host(.bio-modal) .modal-popup .modal-body{height:auto}}@media (max-height: 450px){:host(.bio-modal) .modal-popup .modal-body{height:100%}}@media only screen and (min-width: 768px){:host(.bio-modal) .modal-popup{max-height:none;width:80%;margin-top:0px;height:auto}}@media only screen and (min-width: 1440px){:host(.bio-modal) .modal-popup{max-width:1400px}}@media (max-height: 450px){:host(.bio-modal) .modal-popup{max-height:calc(100vh - 180px);height:100%}}:host(.bio-modal) .close{position:absolute;margin:0;right:8px;top:8px}:host(.bio-modal) .close svg .cls-1,:host(.bio-modal) .close svg .cls-2{fill:none;stroke-width:2px}:host(.bio-modal) .close svg .cls-1{stroke:#1c2439;stroke-linecap:square}:host(.bio-modal) .close svg .cls-2{stroke:#74c34d}:host(.bio-modal) .close svg path{transition:all ease-in-out 250ms}:host(.bio-modal) .close svg .cls-1:nth-child(1){transform:translate(175.5px, 135.5px)}:host(.bio-modal) .close svg .cls-1:nth-child(2){transform:translate(175.5px, 174.985px)}:host(.bio-modal) .close svg .cls-1:nth-child(3){transform:translate(215.5px, 141.393px)}:host(.bio-modal) .close svg .cls-1:nth-child(4){transform:translate(175.5px, 135.5px)}:host(.bio-modal) .close:hover svg .cls-1:nth-child(1){transform:translate(175.5px, 162px)}:host(.bio-modal) .close:hover svg .cls-1:nth-child(2){transform:translate(149px, 174.985px)}:host(.bio-modal) .close:hover svg .cls-1:nth-child(3){transform:translate(215.5px, 174px)}:host(.bio-modal) .close:hover svg .cls-1:nth-child(4){transform:translate(152.5px, 135.5px)}:host(.no-container) .wrapper .modal-popup.xl{max-width:80rem !important;background:transparent;box-shadow:none}:host(.no-container) .wrapper .modal-popup .close{display:none}:host(.video-modal) .modal-popup{margin:auto}@media (max-height: 768px){:host(.video-modal) .modal-popup.xl{max-width:56rem}}@media (max-height: 600px){:host(.video-modal) .modal-popup.xl{max-width:44rem}}@media (max-height: 500px){:host(.video-modal) .modal-popup.xl{max-width:35rem}}@media (max-height: 400px){:host(.video-modal) .modal-popup.xl{max-width:26rem}}:host(.event-listing) .wrapper .modal-popup{max-width:unset;width:calc(100% - 48px);top:50%;left:50%;transform:translate(-50%, -50%) !important;margin:0px;position:absolute}";
|
|
16
|
+
|
|
17
|
+
const PtcModal = class {
|
|
18
|
+
constructor(hostRef) {
|
|
19
|
+
registerInstance(this, hostRef);
|
|
20
|
+
this.closed = createEvent(this, "closed", 7);
|
|
21
|
+
this.opened = createEvent(this, "opened", 7);
|
|
22
|
+
this.iframeUrl = undefined;
|
|
23
|
+
this.size = 'sm';
|
|
24
|
+
this.customClass = undefined;
|
|
25
|
+
this.show = false;
|
|
26
|
+
this.overlay = true;
|
|
27
|
+
this.fixed = false;
|
|
28
|
+
this.keepInViewport = false;
|
|
29
|
+
this.closeOnBlur = false;
|
|
30
|
+
this.rounded = false;
|
|
31
|
+
this.hideContainer = false;
|
|
32
|
+
this.showHeaderFooter = false;
|
|
33
|
+
this.overlayHeight = undefined;
|
|
34
|
+
this.borderRadius = 'standard';
|
|
35
|
+
this.isBioModal = false;
|
|
36
|
+
this.styles = undefined;
|
|
37
|
+
this.modalType = 'default-modal';
|
|
38
|
+
this.bodyOverflowSetting = undefined;
|
|
39
|
+
}
|
|
40
|
+
fireOnClosed(modal) {
|
|
41
|
+
this.closed.emit(modal);
|
|
42
|
+
document.activeElement.blur();
|
|
43
|
+
}
|
|
44
|
+
fireOnOpened(modal) {
|
|
45
|
+
this.opened.emit(modal);
|
|
46
|
+
setTimeout(() => {
|
|
47
|
+
const wrapperEle = this.el.shadowRoot.querySelector('.wrapper');
|
|
48
|
+
wrapperEle && wrapperEle.focus();
|
|
49
|
+
}, 100);
|
|
50
|
+
}
|
|
51
|
+
componentWillLoad() {
|
|
52
|
+
let body = document.querySelector('body');
|
|
53
|
+
this.bodyOverflowSetting = {
|
|
54
|
+
//overflow: body.style['overflow'],
|
|
55
|
+
overflowY: body.style['overflowY'],
|
|
56
|
+
overflowX: body.style['overflowX'],
|
|
57
|
+
};
|
|
58
|
+
}
|
|
59
|
+
componentWillRender() {
|
|
60
|
+
let body = document.querySelector('body');
|
|
61
|
+
if (body) {
|
|
62
|
+
if (this.show) {
|
|
63
|
+
//body.style['overflow'] = 'hidden';
|
|
64
|
+
if (this.fixed) {
|
|
65
|
+
body.style['overflowY'] = 'hidden';
|
|
66
|
+
body.style['overflowX'] = 'hidden';
|
|
67
|
+
}
|
|
68
|
+
else {
|
|
69
|
+
body.style['overflowY'] = 'scroll';
|
|
70
|
+
body.style['overflowX'] = 'hidden';
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
else {
|
|
74
|
+
//body.style['overflow'] = this.bodyOverflowSetting.overflow;
|
|
75
|
+
body.style['overflowY'] = this.bodyOverflowSetting.overflowY;
|
|
76
|
+
body.style['overflowX'] = this.bodyOverflowSetting.overflowX;
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
componentDidLoad() {
|
|
81
|
+
if (this.show) {
|
|
82
|
+
this.fireOnOpened(this);
|
|
83
|
+
}
|
|
84
|
+
if (this.showHeaderFooter) {
|
|
85
|
+
this.handleScroll();
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
componentDidUpdate() {
|
|
89
|
+
if (this.show) {
|
|
90
|
+
this.fireOnOpened(this);
|
|
91
|
+
}
|
|
92
|
+
else {
|
|
93
|
+
this.fireOnClosed(this);
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
resizeIframe(e) {
|
|
97
|
+
let iFrame = e.target;
|
|
98
|
+
setTimeout(() => {
|
|
99
|
+
try {
|
|
100
|
+
if (iFrame.contentDocument) {
|
|
101
|
+
iFrame.height = `${iFrame.contentDocument.body.scrollHeight}px`;
|
|
102
|
+
}
|
|
103
|
+
else {
|
|
104
|
+
iFrame.height = '616px'; //default
|
|
105
|
+
iFrame.removeAttribute('scrolling');
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
catch (error) {
|
|
109
|
+
console.log(error);
|
|
110
|
+
iFrame.height = '616px'; //default
|
|
111
|
+
iFrame.removeAttribute('scrolling');
|
|
112
|
+
}
|
|
113
|
+
iFrame.classList.add('ready');
|
|
114
|
+
}, 50);
|
|
115
|
+
}
|
|
116
|
+
handleScroll() {
|
|
117
|
+
let modal = this.el.shadowRoot.querySelector('.shadow-scroller');
|
|
118
|
+
if (modal) {
|
|
119
|
+
let body = modal.querySelector('.modal-body');
|
|
120
|
+
var height = body.clientHeight;
|
|
121
|
+
var scrollHeight = body.scrollHeight;
|
|
122
|
+
var scrollTop = body.scrollTop;
|
|
123
|
+
var offset = body.offsetHeight;
|
|
124
|
+
if (height < scrollHeight) { //has scrollbar
|
|
125
|
+
if (scrollTop > 0) { //can scroll up
|
|
126
|
+
modal.classList.add('scroll-top');
|
|
127
|
+
}
|
|
128
|
+
else {
|
|
129
|
+
modal.classList.remove('scroll-top');
|
|
130
|
+
}
|
|
131
|
+
if (offset + scrollTop < scrollHeight) { //can scroll down
|
|
132
|
+
modal.classList.add('scroll-bottom');
|
|
133
|
+
}
|
|
134
|
+
else {
|
|
135
|
+
modal.classList.remove('scroll-bottom');
|
|
136
|
+
}
|
|
137
|
+
}
|
|
138
|
+
}
|
|
139
|
+
}
|
|
140
|
+
close() {
|
|
141
|
+
this.show = false;
|
|
142
|
+
}
|
|
143
|
+
render() {
|
|
144
|
+
let content;
|
|
145
|
+
let overlay;
|
|
146
|
+
let type = this.iframeUrl ? 'frame' : 'html';
|
|
147
|
+
let closebtn = (h("div", { class: "close", id: "modal-close" }, h("ptc-close-icon", { onClick: (e) => { e.preventDefault(); this.close(); }, onKeyPress: (e) => { e.preventDefault(); this.close(); } })));
|
|
148
|
+
if (this.iframeUrl) {
|
|
149
|
+
content = (h("iframe", { src: this.iframeUrl, frameBorder: 0, allowFullScreen: false, height: "100%", width: "100%", scrolling: "no", onLoad: this.resizeIframe }));
|
|
150
|
+
}
|
|
151
|
+
else {
|
|
152
|
+
if (this.showHeaderFooter) {
|
|
153
|
+
content = (h("slot", { name: "body" }));
|
|
154
|
+
}
|
|
155
|
+
else {
|
|
156
|
+
content = (h("slot", null));
|
|
157
|
+
}
|
|
158
|
+
}
|
|
159
|
+
if (this.overlay) {
|
|
160
|
+
if (this.closeOnBlur) {
|
|
161
|
+
overlay = h("div", { class: "overlay", onClick: (_) => this.close() });
|
|
162
|
+
}
|
|
163
|
+
else {
|
|
164
|
+
overlay = h("div", { class: "overlay" });
|
|
165
|
+
}
|
|
166
|
+
}
|
|
167
|
+
return (h(Host, { class: this.getCssClassMap() }, this.styles && h("style", null, this.styles), h("div", { class: `wrapper ${this.show ? "show" : "hide"} ${this.fixed ? 'fixed' : ''} ` }, overlay, h("div", { class: `modal-popup ${this.customClass ? this.customClass : ''} ${this.size} ${type} ${this.rounded ? 'rounded' : ''} ${this.showHeaderFooter ? 'shadow-scroller' : ''} ` }, this.showHeaderFooter ? [
|
|
168
|
+
h("div", { class: "modal-header" }, h("slot", { name: "header" }), closebtn),
|
|
169
|
+
h("div", { class: "modal-body", onScroll: () => this.handleScroll() }, content),
|
|
170
|
+
h("div", { class: "modal-footer" }, h("slot", { name: "footer" }))
|
|
171
|
+
] : [
|
|
172
|
+
closebtn,
|
|
173
|
+
h("div", { class: "modal-body" }, content)
|
|
174
|
+
]))));
|
|
175
|
+
}
|
|
176
|
+
getCssClassMap() {
|
|
177
|
+
return {
|
|
178
|
+
["no-container"]: this.hideContainer,
|
|
179
|
+
["bio-modal"]: this.isBioModal,
|
|
180
|
+
["enclose-modal"]: !this.isBioModal && this.keepInViewport,
|
|
181
|
+
[this.borderRadius]: true,
|
|
182
|
+
[this.modalType]: true
|
|
183
|
+
};
|
|
184
|
+
}
|
|
185
|
+
async showModal() {
|
|
186
|
+
this.show = true;
|
|
187
|
+
}
|
|
188
|
+
async hideModal() {
|
|
189
|
+
this.show = false;
|
|
190
|
+
}
|
|
191
|
+
async toggleModal() {
|
|
192
|
+
this.show = !this.show;
|
|
193
|
+
}
|
|
194
|
+
async reloadIframe() {
|
|
195
|
+
if (this.iframeUrl) {
|
|
196
|
+
let iframe = this.el.shadowRoot.querySelector('iframe');
|
|
197
|
+
if (iframe) {
|
|
198
|
+
iframe.src = iframe.src;
|
|
199
|
+
}
|
|
200
|
+
}
|
|
201
|
+
}
|
|
202
|
+
get el() { return getElement(this); }
|
|
203
|
+
};
|
|
204
|
+
PtcModal.style = ptcModalCss;
|
|
205
|
+
|
|
206
|
+
export { PtcCloseIcon as ptc_close_icon, PtcModal as ptc_modal };
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-c83db688.js';
|
|
2
|
-
import { d as debounce, M as MapDOM,
|
|
2
|
+
import { d as debounce, M as MapDOM, g as generateUUID } from './utils-1bbe0c30.js';
|
|
3
3
|
|
|
4
4
|
const info = `<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 13 13">
|
|
5
5
|
<defs>
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { r as registerInstance, h, g as getElement } from './index-c83db688.js';
|
|
2
|
-
import { M as MDCSelect } from './component-
|
|
3
|
-
import './component-
|
|
2
|
+
import { M as MDCSelect } from './component-8c53e377.js';
|
|
3
|
+
import './component-9beac35b.js';
|
|
4
4
|
|
|
5
5
|
// Define the ElqLib class
|
|
6
6
|
class ElqLib {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-c83db688.js';
|
|
2
2
|
import { V as ValidationMessages } from './validation-messages-adbb6518.js';
|
|
3
|
-
import { h as getLanguageFromURL } from './utils-
|
|
4
|
-
import { _ as __extends, a as __assign, M as MDCFoundation, n as getCorrectEventName, h as MDCRipple, o as applyPassive, m as matches, i as MDCRippleFoundation, f as __values, e as MDCComponent, k as MDCLineRipple, j as MDCFloatingLabel, l as MDCNotchedOutline } from './component-
|
|
3
|
+
import { h as getLanguageFromURL } from './utils-1bbe0c30.js';
|
|
4
|
+
import { _ as __extends, a as __assign, M as MDCFoundation, n as getCorrectEventName, h as MDCRipple, o as applyPassive, m as matches, i as MDCRippleFoundation, f as __values, e as MDCComponent, k as MDCLineRipple, j as MDCFloatingLabel, l as MDCNotchedOutline } from './component-9beac35b.js';
|
|
5
5
|
import { c as createCommonjsModule } from './_commonjsHelpers-9943807e.js';
|
|
6
6
|
|
|
7
7
|
/**
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { r as registerInstance, h, H as Host, g as getElement } from './index-c83db688.js';
|
|
2
|
-
import { o as observeInView } from './utils-
|
|
2
|
+
import { o as observeInView } from './utils-1bbe0c30.js';
|
|
3
3
|
|
|
4
4
|
const ptcHomepageImageFeatureCss = "h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{word-break:break-word;hyphens:manual;-webkit-hyphens:manual;-moz-hyphens:manual;-ms-hyphens:manual}@supports (hyphenate-limit-chars: 12 3 3){h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;hyphenate-limit-chars:12 3 3;hyphenate-limit-lines:2;hyphenate-limit-last:always;hyphenate-limit-zone:6%;-webkit-hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;-webkit-hyphenate-limit-chars:12 3 3;-webkit-hyphenate-limit-lines:2;-moz-hyphens:auto;-moz-hyphenate-limit-chars:12 3 3;-moz-hyphenate-limit-lines:2;-ms-hyphens:auto;-ms-hyphenate-limit-chars:12 3 3;-ms-hyphenate-limit-lines:2}}:host{display:block}@media only screen and (min-width: 992px){:host{display:flex}}:host .img-wrap{height:400px;width:100%}@media only screen and (min-width: 992px){:host .img-wrap{height:683px;width:65%}}:host .img-wrap.in-view{animation:fadeIn 750ms ease}:host .card-wrap{display:block;z-index:1}@media only screen and (min-width: 992px){:host .card-wrap{margin-top:64px;width:35%}}:host .card-wrap.in-view .card{animation:fadeInUp 750ms ease}:host .card{padding:28px 24px;background-color:var(--color-white);border-radius:var(--ptc-border-radius-standard);box-shadow:var(--ptc-shadow-large);box-sizing:border-box;max-width:540px;margin:-96px 16px 0 16px}@media only screen and (min-width: 992px){:host .card{padding:64px;margin:0 0 0 -120px;width:calc(100% + 120px);max-width:fit-content}}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes fadeInUp{from{transform:translate3d(0, 30%, 0)}to{transform:translate3d(0, 0, 0)}}::slotted(.cta-wrap){display:flex;grid-row-gap:16px;grid-column-gap:24px;flex-wrap:wrap;margin-top:32px}::slotted(.card-title-wrap){margin-bottom:16px}";
|
|
5
5
|
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { r as registerInstance, h, H as Host, g as getElement } from './index-c83db688.js';
|
|
2
|
-
import { o as observeInView } from './utils-
|
|
2
|
+
import { o as observeInView } from './utils-1bbe0c30.js';
|
|
3
3
|
|
|
4
4
|
const ptcHomepageVideoBackgroundCss = "h1,\nh2,\nh3,\nh4,\nh5,\nh6,\np,\nul,\nli,\nptc-subnav,\nptc-tab-list,\nptc-link, ptc-square-card,\n.hyphenate-text, ptc-footer {\n word-break: break-word;\n hyphens: manual;\n -webkit-hyphens: manual;\n -moz-hyphens: manual;\n -ms-hyphens: manual;\n}\n@supports (hyphenate-limit-chars: 12 3 3) {\n h1,\nh2,\nh3,\nh4,\nh5,\nh6,\np,\nul,\nli,\nptc-subnav,\nptc-tab-list,\nptc-link, ptc-square-card,\n.hyphenate-text, ptc-footer {\n hyphens: auto;\n -webkit-hyphenate-limit-before: 3;\n /* For Safari */\n -webkit-hyphenate-limit-after: 3;\n /* For Safari */\n hyphenate-limit-chars: 12 3 3;\n hyphenate-limit-lines: 2;\n hyphenate-limit-last: always;\n hyphenate-limit-zone: 6%;\n -webkit-hyphens: auto;\n -webkit-hyphenate-limit-before: 3;\n -webkit-hyphenate-limit-after: 3;\n -webkit-hyphenate-limit-chars: 12 3 3;\n -webkit-hyphenate-limit-lines: 2;\n -moz-hyphens: auto;\n -moz-hyphenate-limit-chars: 12 3 3;\n -moz-hyphenate-limit-lines: 2;\n -ms-hyphens: auto;\n -ms-hyphenate-limit-chars: 12 3 3;\n -ms-hyphenate-limit-lines: 2;\n }\n}\n\n:host {\n display: block;\n position: relative;\n overflow: hidden;\n}\n\na {\n text-decoration: none !important;\n color: inherit !important;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\np,\nul,\nli,\nptc-subnav,\nptc-tab-list,\nptc-link, ptc-square-card,\n.hyphenate-text, ptc-footer {\n word-break: break-word;\n hyphens: manual;\n -webkit-hyphens: manual;\n -moz-hyphens: manual;\n -ms-hyphens: manual;\n}\n@supports (hyphenate-limit-chars: 12 3 3) {\n h1,\nh2,\nh3,\nh4,\nh5,\nh6,\np,\nul,\nli,\nptc-subnav,\nptc-tab-list,\nptc-link, ptc-square-card,\n.hyphenate-text, ptc-footer {\n hyphens: auto;\n -webkit-hyphenate-limit-before: 3;\n /* For Safari */\n -webkit-hyphenate-limit-after: 3;\n /* For Safari */\n hyphenate-limit-chars: 12 3 3;\n hyphenate-limit-lines: 2;\n hyphenate-limit-last: always;\n hyphenate-limit-zone: 6%;\n -webkit-hyphens: auto;\n -webkit-hyphenate-limit-before: 3;\n -webkit-hyphenate-limit-after: 3;\n -webkit-hyphenate-limit-chars: 12 3 3;\n -webkit-hyphenate-limit-lines: 2;\n -moz-hyphens: auto;\n -moz-hyphenate-limit-chars: 12 3 3;\n -moz-hyphenate-limit-lines: 2;\n -ms-hyphens: auto;\n -ms-hyphenate-limit-chars: 12 3 3;\n -ms-hyphenate-limit-lines: 2;\n }\n}\n\n.ptc-container {\n padding-right: 24px;\n padding-left: 24px;\n margin-right: auto;\n margin-left: auto;\n}\n\n@media only screen and (min-width: 1200px) {\n .ptc-container {\n padding-left: 0;\n padding-right: 0;\n max-width: 1136px;\n }\n}\n@media only screen and (min-width: 1440px) {\n .ptc-container {\n padding-left: 0;\n padding-right: 0;\n max-width: 1200px;\n }\n}\n.ptc-container-lg {\n padding-right: 15px;\n padding-left: 15px;\n margin-right: auto;\n margin-left: auto;\n}\n\n@media only screen and (min-width: 480px) {\n .ptc-container-lg {\n padding-left: var(--ptc-layout-spacing-03);\n padding-right: var(--ptc-layout-spacing-03);\n }\n}\n@media only screen and (min-width: 768px) {\n .ptc-container-lg {\n padding-left: var(--ptc-layout-spacing-04);\n padding-right: var(--ptc-layout-spacing-04);\n }\n}\n@media only screen and (min-width: 992px) {\n .ptc-container-lg {\n padding-left: var(--ptc-element-spacing-08);\n padding-right: var(--ptc-element-spacing-08);\n }\n}\n@media only screen and (min-width: 1980px) {\n .ptc-container-lg {\n padding-left: 0;\n padding-right: 0;\n max-width: 1900px;\n }\n}\n.ptc-container-fluid {\n width: 100%;\n}\n\n.primary-content-wrapper {\n max-width: 720px;\n padding: 120px 0;\n}\n@media only screen and (min-width: 992px) {\n .primary-content-wrapper {\n padding: 160px 0;\n }\n}\n@media only screen and (min-width: 1440px) {\n .primary-content-wrapper {\n padding: 160px 0;\n }\n}\n\n.bg-video {\n width: 100%;\n}\n\n.ptc-container {\n position: relative;\n z-index: 20;\n min-height: 587px;\n}\n\n.card-links {\n margin: 0;\n padding-bottom: 72px;\n}\n@media only screen and (min-width: 992px) {\n .card-links {\n padding-bottom: 88px;\n }\n}\n.card-links .secondary-content-wrapper {\n margin: 0;\n max-width: 720px;\n}\n.card-links .card-section {\n display: flex;\n position: relative;\n flex-wrap: nowrap;\n flex-shrink: 0;\n margin: 20px -24px 0;\n white-space: nowrap;\n -ms-overflow-style: none;\n scrollbar-width: none;\n transition: box-shadow var(--ptc-transition-medium) var(--ptc-ease-out);\n}\n.card-links .card-section::-webkit-scrollbar {\n display: none;\n}\n.card-links .card-section .card-link {\n cursor: pointer;\n display: inline-flex;\n position: relative;\n overflow: hidden;\n text-decoration: none;\n z-index: 7;\n align-items: center;\n gap: 16px;\n flex: 0 0 224px;\n align-self: stretch;\n border-radius: 4px 4px 0px 0px;\n border-bottom: 2px solid var(--color-blue-07);\n background: transparent;\n backdrop-filter: blur(12px);\n padding: 24px;\n word-wrap: normal;\n color: var(--color-white);\n font-family: var(--ptc-font-latin);\n font-size: var(--ptc-font-size-small);\n font-style: var(--ptc-font-style-normal);\n font-weight: var(--ptc-font-weight-bold);\n line-height: var(--ptc-line-height-p);\n margin: 0 12px;\n}\n.card-links .card-section .card-link:first-child {\n margin-left: 24px;\n}\n.card-links .card-section .card-link:last-child {\n margin-right: 24px;\n}\n.card-links .card-section .card-link icon-asset {\n z-index: 10;\n}\n.card-links .card-section .card-link .link-text {\n display: block;\n inline-size: 190px;\n white-space: break-spaces;\n z-index: 10;\n font-size: var(--ptc-font-size-small);\n}\n@media only screen and (min-width: 992px) {\n .card-links .card-section .card-link .link-text {\n font-size: var(--ptc-font-size-medium);\n }\n}\n.card-links .card-section .card-link .bgb,\n.card-links .card-section .card-link .bgh,\n.card-links .card-section .card-link .bgp {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n z-index: 8;\n opacity: 0;\n}\n.card-links .card-section .card-link .link-cover {\n cursor: pointer;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n z-index: 11;\n width: 99%;\n height: 99%;\n border-radius: var(--ptc-border-radius-standard);\n border: 2px solid transparent;\n}\n.card-links .card-section .card-link .bgb,\n.card-links .card-section .card-link .bgh {\n transition: opacity var(--ptc-transition-medium) var(--ptc-ease-out);\n backdrop-filter: blur(6px);\n -webkit-backdrop-filter: blur(6px);\n}\n.card-links .card-section .card-link .bgb {\n background: linear-gradient(85deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.07) 100.13%);\n opacity: 1;\n}\n.card-links .card-section .card-link .bgh {\n background: linear-gradient(85deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.17) 100.13%);\n}\n.card-links .card-section .card-link .bgp {\n background: linear-gradient(85deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.12) 100.13%);\n}\n.card-links .card-section .card-link:hover .bgb,\n.card-links .card-section .card-link:hover .bgp {\n opacity: 0;\n}\n.card-links .card-section .card-link:hover .bgh {\n opacity: 1;\n}\n.card-links .card-section .card-link:active .bgb,\n.card-links .card-section .card-link:active .bgh, .card-links .card-section .card-link.active .bgb,\n.card-links .card-section .card-link.active .bgh {\n display: none;\n opacity: 0;\n}\n.card-links .card-section .card-link:active .bgp, .card-links .card-section .card-link.active .bgp {\n opacity: 1;\n}\n.card-links .card-section .card-link:focus-visible, .card-links .card-section .card-link:focus, .card-links .card-section .card-link:focus-within {\n border-radius: var(--ptc-border-radius-standard);\n outline: 5px solid var(--keyboard-nav-outline);\n border-bottom-color: white;\n}\n.card-links .card-section .card-link:focus-visible .link-cover, .card-links .card-section .card-link:focus .link-cover, .card-links .card-section .card-link:focus-within .link-cover {\n border-color: white;\n}\n.card-links .card-section:before {\n position: absolute;\n width: 32px;\n background: linear-gradient(85deg, rgba(255, 255, 255, 0) 0%, white 100.13%);\n top: 16px;\n right: 0;\n bottom: 0;\n z-index: 12;\n}\n.card-links .card-section.scroll-st {\n box-shadow: inset 2px 0px 0px rgba(255, 255, 255, 0.3);\n}\n.card-links .card-section.scroll-ed {\n box-shadow: inset -2px 0px 0px rgba(255, 255, 255, 0.3);\n}\n.card-links .card-section.scroll-ed.scroll-st {\n box-shadow: inset 2px 0px 0px rgba(255, 255, 255, 0.3), inset -2px 0px 0px rgba(255, 255, 255, 0.3);\n}\n@media only screen and (min-width: 1200px) {\n .card-links .card-section {\n margin: 20px 0 0;\n align-items: flex-start;\n justify-content: flex-start;\n align-content: flex-start;\n }\n .card-links .card-section.scroll-st, .card-links .card-section.scroll-ed, .card-links .card-section.scroll-ed.scroll-st {\n box-shadow: unset;\n }\n .card-links .card-section .card-link {\n flex: unset;\n }\n .card-links .card-section .card-link:first-child {\n margin-left: 0;\n }\n .card-links .card-section .card-link:last-child {\n margin-right: 0;\n }\n}\n@media only screen and (min-width: 1440px) {\n .card-links .card-section {\n margin: 20px 0 0;\n }\n}\n\n.card-section {\n overflow-x: visible;\n overflow-y: visible;\n animation-duration: 0ms;\n animation-delay: 1000ms;\n animation-fill-mode: forwards;\n}\n@media only screen and (min-width: 1200px) {\n .card-section {\n overflow-x: visible;\n }\n}\n.card-section .card-link {\n animation-duration: 750ms;\n animation-delay: 0ms;\n animation-fill-mode: forwards;\n opacity: 0;\n transform: translate3d(0, 30%, 0);\n}\n.card-section .card-link.card-link-1 {\n animation-delay: 0ms;\n}\n.card-section .card-link.card-link-2 {\n animation-delay: 250ms;\n}\n.card-section .card-link.card-link-3 {\n animation-delay: 500ms;\n}\n.card-section .card-link.card-link-4 {\n animation-delay: 750ms;\n}\n.card-section.in-view {\n animation-name: fadeUpInContainer;\n}\n@media only screen and (min-width: 1200px) {\n .card-section.in-view {\n overflow: visible !important;\n }\n}\n.card-section.in-view .card-link {\n animation-name: fadeUpIn;\n}\n\n@keyframes fadeUpIn {\n 0% {\n opacity: 0;\n transform: translate3d(0, 30%, 0);\n }\n 100% {\n opacity: 1;\n transform: translateZ(0);\n }\n}\n@keyframes fadeUpInContainer {\n 0% {\n overflow: visible;\n overflow-y: visible;\n overflow-x: visible;\n @media only screen and (min-width: 1200px) {\n overflow-x: visible;\n }\n }\n 100% {\n overflow: inherit;\n overflow-y: hidden;\n overflow-x: scroll;\n @media only screen and (min-width: 1200px) {\n overflow-x: hidden;\n }\n }\n}";
|
|
5
5
|
|