@ptcwebops/ptcw-design 2.2.4 → 2.2.6
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/loader.cjs.js +1 -1
- package/dist/cjs/ptc-related-card-rail.cjs.entry.js +160 -0
- package/dist/cjs/ptc-square-card.cjs.entry.js +1 -1
- package/dist/cjs/ptcw-design.cjs.js +1 -1
- package/dist/collection/collection-manifest.json +1 -0
- package/dist/collection/components/icon-asset/media/designer.svg +7 -0
- package/dist/collection/components/ptc-related-card-rail/ptc-related-card-rail.css +137 -0
- package/dist/collection/components/ptc-related-card-rail/ptc-related-card-rail.js +190 -0
- package/dist/collection/components/ptc-square-card/ptc-square-card.css +2 -0
- package/dist/custom-elements/index.d.ts +6 -0
- package/dist/custom-elements/index.js +159 -2
- package/dist/esm/loader.js +1 -1
- package/dist/esm/ptc-related-card-rail.entry.js +156 -0
- package/dist/esm/ptc-square-card.entry.js +1 -1
- package/dist/esm/ptcw-design.js +1 -1
- package/dist/ptcw-design/media/designer.svg +7 -0
- package/dist/ptcw-design/p-689f0741.entry.js +1 -0
- package/dist/ptcw-design/{p-6392bd90.entry.js → p-9e3b390e.entry.js} +1 -1
- package/dist/ptcw-design/ptcw-design.esm.js +1 -1
- package/dist/types/components/ptc-related-card-rail/ptc-related-card-rail.d.ts +30 -0
- package/dist/types/components.d.ts +21 -0
- package/package.json +1 -1
- package/readme.md +1 -1
|
@@ -0,0 +1,137 @@
|
|
|
1
|
+
:host {
|
|
2
|
+
display: block;
|
|
3
|
+
/* 480px */
|
|
4
|
+
/* 768px */
|
|
5
|
+
/* 992px */
|
|
6
|
+
/* 1200px */
|
|
7
|
+
/* 1400px */
|
|
8
|
+
/* 1980px */
|
|
9
|
+
/* 2600px */
|
|
10
|
+
}
|
|
11
|
+
:host .card-rail-container {
|
|
12
|
+
position: fixed;
|
|
13
|
+
bottom: 132px;
|
|
14
|
+
left: 24px;
|
|
15
|
+
width: calc(100vw - 48px);
|
|
16
|
+
background: white;
|
|
17
|
+
border-radius: var(--ptc-border-radius-standard);
|
|
18
|
+
box-shadow: var(--ptc-shadow-small);
|
|
19
|
+
box-sizing: border-box;
|
|
20
|
+
z-index: 50;
|
|
21
|
+
}
|
|
22
|
+
:host .card-rail-header {
|
|
23
|
+
display: flex;
|
|
24
|
+
justify-content: space-between;
|
|
25
|
+
border-bottom: var(--color-gray-02) solid 1px;
|
|
26
|
+
}
|
|
27
|
+
:host .card-rail-heading {
|
|
28
|
+
margin: 12px 0 12px 16px;
|
|
29
|
+
}
|
|
30
|
+
:host .card-rail-close {
|
|
31
|
+
padding: 15px;
|
|
32
|
+
}
|
|
33
|
+
:host .card-rail-content {
|
|
34
|
+
display: flex;
|
|
35
|
+
align-items: center;
|
|
36
|
+
}
|
|
37
|
+
:host .card-rail-content icon-asset {
|
|
38
|
+
position: absolute;
|
|
39
|
+
z-index: 55px;
|
|
40
|
+
padding: 13px;
|
|
41
|
+
/* Hit area */
|
|
42
|
+
}
|
|
43
|
+
:host .card-rail-content icon-asset#left-arrow {
|
|
44
|
+
left: 3px;
|
|
45
|
+
/* [Expected(16) - HitAreaPadding(13)] */
|
|
46
|
+
}
|
|
47
|
+
:host .card-rail-content icon-asset#right-arrow {
|
|
48
|
+
right: 3px;
|
|
49
|
+
}
|
|
50
|
+
:host .card-rail-content .content-container {
|
|
51
|
+
margin: 24px 50px 24px 50px;
|
|
52
|
+
/* [ArrowLeft(16) + ArrowWidth(18) + ArrowRight(16)] = 50 */
|
|
53
|
+
display: flex;
|
|
54
|
+
overflow-x: hidden;
|
|
55
|
+
-ms-overflow-style: none;
|
|
56
|
+
/* IE and Edge */
|
|
57
|
+
scrollbar-width: none;
|
|
58
|
+
/* Firefox */
|
|
59
|
+
/* Hide scrollbar for Chrome, Safari and Opera */
|
|
60
|
+
}
|
|
61
|
+
:host .card-rail-content .content-container::-webkit-scrollbar {
|
|
62
|
+
display: none;
|
|
63
|
+
}
|
|
64
|
+
:host .card-rail-content .content-container .content {
|
|
65
|
+
width: 100%;
|
|
66
|
+
flex: 1 0 100%;
|
|
67
|
+
display: flex;
|
|
68
|
+
}
|
|
69
|
+
:host .card-rail-content .content-container .content:hover {
|
|
70
|
+
cursor: pointer;
|
|
71
|
+
}
|
|
72
|
+
:host .card-rail-content .content-container .content .content-image {
|
|
73
|
+
width: 130px;
|
|
74
|
+
height: 73px;
|
|
75
|
+
text-align: center;
|
|
76
|
+
}
|
|
77
|
+
:host .card-rail-content .content-container .content .content-image img {
|
|
78
|
+
width: 100%;
|
|
79
|
+
height: 100%;
|
|
80
|
+
object-fit: cover;
|
|
81
|
+
}
|
|
82
|
+
:host .card-rail-content .content-container .content .content-text {
|
|
83
|
+
flex: 1;
|
|
84
|
+
padding-left: 12px;
|
|
85
|
+
}
|
|
86
|
+
@media only screen and (min-width: 768px) {
|
|
87
|
+
:host .card-rail-container .card-rail-content icon-asset#left-arrow {
|
|
88
|
+
left: 11px;
|
|
89
|
+
}
|
|
90
|
+
:host .card-rail-container .card-rail-content icon-asset#right-arrow {
|
|
91
|
+
right: 11px;
|
|
92
|
+
}
|
|
93
|
+
:host .card-rail-container .card-rail-content .content-container {
|
|
94
|
+
margin: 24px 66px 24px 66px;
|
|
95
|
+
/* [ArrowLeft(24) + ArrowWidth(18) + ArrowRight(24)] = 66 */
|
|
96
|
+
}
|
|
97
|
+
:host .card-rail-container .card-rail-content .content-container .content {
|
|
98
|
+
flex: 1 0 50%;
|
|
99
|
+
}
|
|
100
|
+
:host .card-rail-container .card-rail-content .content-container .content .content-text {
|
|
101
|
+
padding-right: 16px;
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
@media only screen and (min-width: 992px) {
|
|
105
|
+
:host .card-rail-container .card-rail-content icon-asset#left-arrow {
|
|
106
|
+
left: 19px;
|
|
107
|
+
/* [Expected(32) - HitAreaPadding(13)] */
|
|
108
|
+
}
|
|
109
|
+
:host .card-rail-container .card-rail-content icon-asset#right-arrow {
|
|
110
|
+
right: 19px;
|
|
111
|
+
}
|
|
112
|
+
:host .card-rail-container .card-rail-content .content-container {
|
|
113
|
+
margin: 24px 82px 24px 82px;
|
|
114
|
+
/* [ArrowLeft(32) + ArrowWidth(18) + ArrowRight(32)] = 82 */
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
@media only screen and (min-width: 1200px) {
|
|
118
|
+
:host .card-rail-container {
|
|
119
|
+
left: 134px;
|
|
120
|
+
width: calc(100vw - 268px);
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
@media only screen and (min-width: 1440px) {
|
|
124
|
+
:host .card-rail-container {
|
|
125
|
+
left: 32px;
|
|
126
|
+
width: 932px;
|
|
127
|
+
}
|
|
128
|
+
}
|
|
129
|
+
@media only screen and (min-width: 1600px) {
|
|
130
|
+
:host .card-rail-container {
|
|
131
|
+
left: 32px;
|
|
132
|
+
width: 1328px;
|
|
133
|
+
}
|
|
134
|
+
:host .card-rail-container .card-rail-content .content-container .content {
|
|
135
|
+
flex: 1 0 33.33%;
|
|
136
|
+
}
|
|
137
|
+
}
|
|
@@ -0,0 +1,190 @@
|
|
|
1
|
+
import { Host, h } from '@stencil/core';
|
|
2
|
+
export class PtcRelatedCardRail {
|
|
3
|
+
constructor() {
|
|
4
|
+
this.setScreenBasedProps = () => {
|
|
5
|
+
let windowWidth = window.innerWidth;
|
|
6
|
+
let props = {
|
|
7
|
+
contentContainerMargin: undefined,
|
|
8
|
+
contentCards: undefined,
|
|
9
|
+
parahFontSize: undefined
|
|
10
|
+
};
|
|
11
|
+
if (windowWidth >= 2600) {
|
|
12
|
+
props.contentCards = 3;
|
|
13
|
+
props.parahFontSize = 'xx-small';
|
|
14
|
+
}
|
|
15
|
+
else if (windowWidth >= 1980) {
|
|
16
|
+
props.contentCards = 3;
|
|
17
|
+
props.parahFontSize = 'xx-small';
|
|
18
|
+
}
|
|
19
|
+
else if (windowWidth >= 1440) {
|
|
20
|
+
props.contentCards = 2;
|
|
21
|
+
props.parahFontSize = 'xx-small';
|
|
22
|
+
}
|
|
23
|
+
else if (windowWidth >= 1200) {
|
|
24
|
+
props.contentCards = 2;
|
|
25
|
+
props.parahFontSize = 'xx-small';
|
|
26
|
+
}
|
|
27
|
+
else if (windowWidth >= 992) {
|
|
28
|
+
props.contentCards = 2;
|
|
29
|
+
props.parahFontSize = 'xx-small';
|
|
30
|
+
}
|
|
31
|
+
else if (windowWidth >= 768) {
|
|
32
|
+
props.contentCards = 2;
|
|
33
|
+
props.parahFontSize = 'xxx-small';
|
|
34
|
+
}
|
|
35
|
+
else {
|
|
36
|
+
props.contentCards = 1;
|
|
37
|
+
props.parahFontSize = 'xxx-small';
|
|
38
|
+
}
|
|
39
|
+
this.screenBasedProps = Object.assign({}, props);
|
|
40
|
+
};
|
|
41
|
+
this.handlePrevClick = () => {
|
|
42
|
+
var _a, _b;
|
|
43
|
+
let contentContainer = (_a = this.el) === null || _a === void 0 ? void 0 : _a.shadowRoot.querySelector('.content-container');
|
|
44
|
+
let contentContainerMarginLeftString = window.getComputedStyle(contentContainer).marginLeft;
|
|
45
|
+
let contentContainerMarginLeft = Number(contentContainerMarginLeftString.substring(0, contentContainerMarginLeftString.length - 2));
|
|
46
|
+
let contentCards = (_b = this.el) === null || _b === void 0 ? void 0 : _b.shadowRoot.querySelectorAll('.content');
|
|
47
|
+
if (this.cardInView > 0) {
|
|
48
|
+
this.cardInView -= 1;
|
|
49
|
+
const content = contentCards[this.cardInView];
|
|
50
|
+
contentContainer.scrollTo({
|
|
51
|
+
left: content.offsetLeft - contentContainerMarginLeft,
|
|
52
|
+
behavior: "smooth"
|
|
53
|
+
});
|
|
54
|
+
}
|
|
55
|
+
};
|
|
56
|
+
this.handleNextClick = () => {
|
|
57
|
+
var _a, _b;
|
|
58
|
+
let contentContainer = (_a = this.el) === null || _a === void 0 ? void 0 : _a.shadowRoot.querySelector('.content-container');
|
|
59
|
+
let contentContainerMarginLeftString = window.getComputedStyle(contentContainer).marginLeft;
|
|
60
|
+
let contentContainerMarginLeft = Number(contentContainerMarginLeftString.substring(0, contentContainerMarginLeftString.length - 2));
|
|
61
|
+
let contentCards = (_b = this.el) === null || _b === void 0 ? void 0 : _b.shadowRoot.querySelectorAll('.content');
|
|
62
|
+
if (this.cardInView < (contentCards.length - this.screenBasedProps.contentCards)) {
|
|
63
|
+
this.cardInView += 1;
|
|
64
|
+
const content = contentCards[this.cardInView];
|
|
65
|
+
contentContainer.scrollTo({
|
|
66
|
+
left: content.offsetLeft - contentContainerMarginLeft,
|
|
67
|
+
behavior: "smooth"
|
|
68
|
+
});
|
|
69
|
+
}
|
|
70
|
+
};
|
|
71
|
+
this.handleOnScrollBehaviour = () => {
|
|
72
|
+
if (!this.closed) {
|
|
73
|
+
let windowHeight = window.innerHeight || (document.documentElement || document.body).clientHeight;
|
|
74
|
+
let documentHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.offsetHeight, document.body.clientHeight, document.documentElement.clientHeight);
|
|
75
|
+
let scrollTop = window.scrollY || (document.documentElement || document.body).scrollTop;
|
|
76
|
+
let trackLength = documentHeight - windowHeight;
|
|
77
|
+
let percentageSrolled = Math.floor(scrollTop / trackLength * 100);
|
|
78
|
+
if (percentageSrolled >= 50) {
|
|
79
|
+
this.el.style.display = 'block';
|
|
80
|
+
}
|
|
81
|
+
else {
|
|
82
|
+
this.el.style.display = 'none';
|
|
83
|
+
}
|
|
84
|
+
let cardRailContainer = this.el.shadowRoot.querySelector('.card-rail-container');
|
|
85
|
+
let pageFooter = document.querySelector(this.footerQuerySelector);
|
|
86
|
+
if (pageFooter) {
|
|
87
|
+
let pageFooterTop = pageFooter.getBoundingClientRect().top;
|
|
88
|
+
let windowBottom = window.innerHeight;
|
|
89
|
+
if (pageFooterTop <= windowBottom) {
|
|
90
|
+
let newBottom = 132 + (windowBottom - pageFooterTop);
|
|
91
|
+
cardRailContainer.style.bottom = `${newBottom}px`;
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
};
|
|
96
|
+
this.handleOnResizeBehaviour = () => {
|
|
97
|
+
var _a, _b;
|
|
98
|
+
this.setScreenBasedProps();
|
|
99
|
+
let contentContainer = (_a = this.el) === null || _a === void 0 ? void 0 : _a.shadowRoot.querySelector('.content-container');
|
|
100
|
+
let contentContainerMarginLeftString = window.getComputedStyle(contentContainer).marginLeft;
|
|
101
|
+
let contentContainerMarginLeft = Number(contentContainerMarginLeftString.substring(0, contentContainerMarginLeftString.length - 2));
|
|
102
|
+
let contentCards = (_b = this.el) === null || _b === void 0 ? void 0 : _b.shadowRoot.querySelectorAll('.content');
|
|
103
|
+
contentContainer.scrollTo({
|
|
104
|
+
left: contentCards[0].offsetLeft - contentContainerMarginLeft,
|
|
105
|
+
});
|
|
106
|
+
this.cardInView = 0;
|
|
107
|
+
};
|
|
108
|
+
this.footerQuerySelector = undefined;
|
|
109
|
+
this.closed = false;
|
|
110
|
+
this.cardInView = 0;
|
|
111
|
+
this.data = [];
|
|
112
|
+
this.screenBasedProps = {
|
|
113
|
+
contentContainerMargin: undefined,
|
|
114
|
+
contentCards: undefined,
|
|
115
|
+
parahFontSize: undefined
|
|
116
|
+
};
|
|
117
|
+
}
|
|
118
|
+
componentWillLoad() {
|
|
119
|
+
const relatedCards = this.el.querySelectorAll('[slot^="related-card-"]');
|
|
120
|
+
for (let ind in relatedCards) {
|
|
121
|
+
let card = relatedCards[ind];
|
|
122
|
+
if (card.tagName === 'DIV') {
|
|
123
|
+
let cardData = {
|
|
124
|
+
image: undefined,
|
|
125
|
+
text: undefined,
|
|
126
|
+
href: undefined
|
|
127
|
+
};
|
|
128
|
+
let cardImage = card.querySelector('img');
|
|
129
|
+
let cardLink = card.querySelector('a');
|
|
130
|
+
cardData.image = cardImage.getAttribute('src');
|
|
131
|
+
cardData.text = cardLink.innerHTML;
|
|
132
|
+
cardData.href = cardLink.getAttribute('href');
|
|
133
|
+
this.data.push(cardData);
|
|
134
|
+
card.remove();
|
|
135
|
+
}
|
|
136
|
+
}
|
|
137
|
+
this.handleOnScrollBehaviour();
|
|
138
|
+
}
|
|
139
|
+
componentDidLoad() {
|
|
140
|
+
this.setScreenBasedProps();
|
|
141
|
+
window.addEventListener('scroll', this.handleOnScrollBehaviour);
|
|
142
|
+
window.addEventListener('resize', this.handleOnResizeBehaviour);
|
|
143
|
+
}
|
|
144
|
+
render() {
|
|
145
|
+
return (this.closed ? null :
|
|
146
|
+
h(Host, null, h("div", { class: "card-rail-container" }, h("div", { class: "card-rail-header" }, h("div", { class: "card-rail-heading" }, h("ptc-para", { "ellipsis-line-cutoff": "0", "font-size": "x-small", "font-weight": "w-7", "para-align": "left", "para-color": "primary-grey", "para-line-h": "line-height-normal", "para-margin": "margin-flush", "para-style": "", "para-z-index": "z-1", styles: "" }, "Read More Case Studies")), h("div", { class: "card-rail-close", onClick: () => { this.closed = true; } }, h("icon-asset", { type: "ptc", size: "xx-small", name: "times", color: "gray" }))), h("div", { class: "card-rail-content" }, h("icon-asset", { id: "left-arrow", type: "ptc", size: "small", name: "previous_button_arrow", color: "gray", onClick: this.handlePrevClick }), h("icon-asset", { id: "right-arrow", type: "ptc", size: "small", name: "next_button_arrow", color: "gray", onClick: this.handleNextClick }), h("div", { class: "content-container" }, this.data.map(item => h("div", { class: "content", onClick: () => { window.open(item.href); } }, h("div", { class: "content-image" }, h("img", { alt: "", src: item.image })), h("div", { class: "content-text" }, h("ptc-para", { "ellipsis-line-cutoff": "3", "font-size": this.screenBasedProps.parahFontSize, "font-weight": "w-6", "para-align": "left", "para-color": "primary-grey", "para-line-h": "line-height-p", "para-margin": "margin-flush", "para-style": "", "para-z-index": "z-1", styles: "" }, item.text)))))))));
|
|
147
|
+
}
|
|
148
|
+
static get is() { return "ptc-related-card-rail"; }
|
|
149
|
+
static get encapsulation() { return "shadow"; }
|
|
150
|
+
static get originalStyleUrls() {
|
|
151
|
+
return {
|
|
152
|
+
"$": ["ptc-related-card-rail.scss"]
|
|
153
|
+
};
|
|
154
|
+
}
|
|
155
|
+
static get styleUrls() {
|
|
156
|
+
return {
|
|
157
|
+
"$": ["ptc-related-card-rail.css"]
|
|
158
|
+
};
|
|
159
|
+
}
|
|
160
|
+
static get properties() {
|
|
161
|
+
return {
|
|
162
|
+
"footerQuerySelector": {
|
|
163
|
+
"type": "string",
|
|
164
|
+
"mutable": false,
|
|
165
|
+
"complexType": {
|
|
166
|
+
"original": "string",
|
|
167
|
+
"resolved": "string",
|
|
168
|
+
"references": {}
|
|
169
|
+
},
|
|
170
|
+
"required": false,
|
|
171
|
+
"optional": false,
|
|
172
|
+
"docs": {
|
|
173
|
+
"tags": [],
|
|
174
|
+
"text": "Query selector of page footer above which the related card rail will unstick"
|
|
175
|
+
},
|
|
176
|
+
"attribute": "footer-query-selector",
|
|
177
|
+
"reflect": false
|
|
178
|
+
}
|
|
179
|
+
};
|
|
180
|
+
}
|
|
181
|
+
static get states() {
|
|
182
|
+
return {
|
|
183
|
+
"closed": {},
|
|
184
|
+
"cardInView": {},
|
|
185
|
+
"data": {},
|
|
186
|
+
"screenBasedProps": {}
|
|
187
|
+
};
|
|
188
|
+
}
|
|
189
|
+
static get elementRef() { return "el"; }
|
|
190
|
+
}
|
|
@@ -39,6 +39,7 @@
|
|
|
39
39
|
line-height: var(--ptc-line-height-denser);
|
|
40
40
|
font-size: var(--ptc-font-size-xx-large);
|
|
41
41
|
font-weight: var(--ptc-font-weight-semibold);
|
|
42
|
+
color: var(--color-gray-10);
|
|
42
43
|
vertical-align: middle;
|
|
43
44
|
overflow: hidden;
|
|
44
45
|
text-overflow: ellipsis;
|
|
@@ -50,6 +51,7 @@
|
|
|
50
51
|
line-height: var(--ptc-line-height-densest);
|
|
51
52
|
font-size: var(--ptc-font-size-x-small);
|
|
52
53
|
font-weight: var(--ptc-font-weight-semibold);
|
|
54
|
+
color: var(--color-gray-10);
|
|
53
55
|
}
|
|
54
56
|
:host slot[name=before-icon] {
|
|
55
57
|
display: -webkit-box;
|
|
@@ -464,6 +464,12 @@ export const PtcReadmoreChar: {
|
|
|
464
464
|
new (): PtcReadmoreChar;
|
|
465
465
|
};
|
|
466
466
|
|
|
467
|
+
interface PtcRelatedCardRail extends Components.PtcRelatedCardRail, HTMLElement {}
|
|
468
|
+
export const PtcRelatedCardRail: {
|
|
469
|
+
prototype: PtcRelatedCardRail;
|
|
470
|
+
new (): PtcRelatedCardRail;
|
|
471
|
+
};
|
|
472
|
+
|
|
467
473
|
interface PtcResponsiveWrapper extends Components.PtcResponsiveWrapper, HTMLElement {}
|
|
468
474
|
export const PtcResponsiveWrapper: {
|
|
469
475
|
prototype: PtcResponsiveWrapper;
|
|
@@ -28280,6 +28280,161 @@ const PtcReadmoreChar$1 = class extends HTMLElement$1 {
|
|
|
28280
28280
|
static get style() { return ptcReadmoreCharCss; }
|
|
28281
28281
|
};
|
|
28282
28282
|
|
|
28283
|
+
const ptcRelatedCardRailCss = ":host{display:block;}:host .card-rail-container{position:fixed;bottom:132px;left:24px;width:calc(100vw - 48px);background:white;border-radius:var(--ptc-border-radius-standard);box-shadow:var(--ptc-shadow-small);box-sizing:border-box;z-index:50}:host .card-rail-header{display:flex;justify-content:space-between;border-bottom:var(--color-gray-02) solid 1px}:host .card-rail-heading{margin:12px 0 12px 16px}:host .card-rail-close{padding:15px}:host .card-rail-content{display:flex;align-items:center}:host .card-rail-content icon-asset{position:absolute;z-index:55px;padding:13px;}:host .card-rail-content icon-asset#left-arrow{left:3px;}:host .card-rail-content icon-asset#right-arrow{right:3px}:host .card-rail-content .content-container{margin:24px 50px 24px 50px;display:flex;overflow-x:hidden;-ms-overflow-style:none;scrollbar-width:none;}:host .card-rail-content .content-container::-webkit-scrollbar{display:none}:host .card-rail-content .content-container .content{width:100%;flex:1 0 100%;display:flex}:host .card-rail-content .content-container .content:hover{cursor:pointer}:host .card-rail-content .content-container .content .content-image{width:130px;height:73px;text-align:center}:host .card-rail-content .content-container .content .content-image img{width:100%;height:100%;object-fit:cover}:host .card-rail-content .content-container .content .content-text{flex:1;padding-left:12px}@media only screen and (min-width: 768px){:host .card-rail-container .card-rail-content icon-asset#left-arrow{left:11px}:host .card-rail-container .card-rail-content icon-asset#right-arrow{right:11px}:host .card-rail-container .card-rail-content .content-container{margin:24px 66px 24px 66px;}:host .card-rail-container .card-rail-content .content-container .content{flex:1 0 50%}:host .card-rail-container .card-rail-content .content-container .content .content-text{padding-right:16px}}@media only screen and (min-width: 992px){:host .card-rail-container .card-rail-content icon-asset#left-arrow{left:19px;}:host .card-rail-container .card-rail-content icon-asset#right-arrow{right:19px}:host .card-rail-container .card-rail-content .content-container{margin:24px 82px 24px 82px;}}@media only screen and (min-width: 1200px){:host .card-rail-container{left:134px;width:calc(100vw - 268px)}}@media only screen and (min-width: 1440px){:host .card-rail-container{left:32px;width:932px}}@media only screen and (min-width: 1600px){:host .card-rail-container{left:32px;width:1328px}:host .card-rail-container .card-rail-content .content-container .content{flex:1 0 33.33%}}";
|
|
28284
|
+
|
|
28285
|
+
const PtcRelatedCardRail$1 = class extends HTMLElement$1 {
|
|
28286
|
+
constructor() {
|
|
28287
|
+
super();
|
|
28288
|
+
this.__registerHost();
|
|
28289
|
+
this.__attachShadow();
|
|
28290
|
+
this.setScreenBasedProps = () => {
|
|
28291
|
+
let windowWidth = window.innerWidth;
|
|
28292
|
+
let props = {
|
|
28293
|
+
contentContainerMargin: undefined,
|
|
28294
|
+
contentCards: undefined,
|
|
28295
|
+
parahFontSize: undefined
|
|
28296
|
+
};
|
|
28297
|
+
if (windowWidth >= 2600) {
|
|
28298
|
+
props.contentCards = 3;
|
|
28299
|
+
props.parahFontSize = 'xx-small';
|
|
28300
|
+
}
|
|
28301
|
+
else if (windowWidth >= 1980) {
|
|
28302
|
+
props.contentCards = 3;
|
|
28303
|
+
props.parahFontSize = 'xx-small';
|
|
28304
|
+
}
|
|
28305
|
+
else if (windowWidth >= 1440) {
|
|
28306
|
+
props.contentCards = 2;
|
|
28307
|
+
props.parahFontSize = 'xx-small';
|
|
28308
|
+
}
|
|
28309
|
+
else if (windowWidth >= 1200) {
|
|
28310
|
+
props.contentCards = 2;
|
|
28311
|
+
props.parahFontSize = 'xx-small';
|
|
28312
|
+
}
|
|
28313
|
+
else if (windowWidth >= 992) {
|
|
28314
|
+
props.contentCards = 2;
|
|
28315
|
+
props.parahFontSize = 'xx-small';
|
|
28316
|
+
}
|
|
28317
|
+
else if (windowWidth >= 768) {
|
|
28318
|
+
props.contentCards = 2;
|
|
28319
|
+
props.parahFontSize = 'xxx-small';
|
|
28320
|
+
}
|
|
28321
|
+
else {
|
|
28322
|
+
props.contentCards = 1;
|
|
28323
|
+
props.parahFontSize = 'xxx-small';
|
|
28324
|
+
}
|
|
28325
|
+
this.screenBasedProps = Object.assign({}, props);
|
|
28326
|
+
};
|
|
28327
|
+
this.handlePrevClick = () => {
|
|
28328
|
+
var _a, _b;
|
|
28329
|
+
let contentContainer = (_a = this.el) === null || _a === void 0 ? void 0 : _a.shadowRoot.querySelector('.content-container');
|
|
28330
|
+
let contentContainerMarginLeftString = window.getComputedStyle(contentContainer).marginLeft;
|
|
28331
|
+
let contentContainerMarginLeft = Number(contentContainerMarginLeftString.substring(0, contentContainerMarginLeftString.length - 2));
|
|
28332
|
+
let contentCards = (_b = this.el) === null || _b === void 0 ? void 0 : _b.shadowRoot.querySelectorAll('.content');
|
|
28333
|
+
if (this.cardInView > 0) {
|
|
28334
|
+
this.cardInView -= 1;
|
|
28335
|
+
const content = contentCards[this.cardInView];
|
|
28336
|
+
contentContainer.scrollTo({
|
|
28337
|
+
left: content.offsetLeft - contentContainerMarginLeft,
|
|
28338
|
+
behavior: "smooth"
|
|
28339
|
+
});
|
|
28340
|
+
}
|
|
28341
|
+
};
|
|
28342
|
+
this.handleNextClick = () => {
|
|
28343
|
+
var _a, _b;
|
|
28344
|
+
let contentContainer = (_a = this.el) === null || _a === void 0 ? void 0 : _a.shadowRoot.querySelector('.content-container');
|
|
28345
|
+
let contentContainerMarginLeftString = window.getComputedStyle(contentContainer).marginLeft;
|
|
28346
|
+
let contentContainerMarginLeft = Number(contentContainerMarginLeftString.substring(0, contentContainerMarginLeftString.length - 2));
|
|
28347
|
+
let contentCards = (_b = this.el) === null || _b === void 0 ? void 0 : _b.shadowRoot.querySelectorAll('.content');
|
|
28348
|
+
if (this.cardInView < (contentCards.length - this.screenBasedProps.contentCards)) {
|
|
28349
|
+
this.cardInView += 1;
|
|
28350
|
+
const content = contentCards[this.cardInView];
|
|
28351
|
+
contentContainer.scrollTo({
|
|
28352
|
+
left: content.offsetLeft - contentContainerMarginLeft,
|
|
28353
|
+
behavior: "smooth"
|
|
28354
|
+
});
|
|
28355
|
+
}
|
|
28356
|
+
};
|
|
28357
|
+
this.handleOnScrollBehaviour = () => {
|
|
28358
|
+
if (!this.closed) {
|
|
28359
|
+
let windowHeight = window.innerHeight || (document.documentElement || document.body).clientHeight;
|
|
28360
|
+
let documentHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.offsetHeight, document.body.clientHeight, document.documentElement.clientHeight);
|
|
28361
|
+
let scrollTop = window.scrollY || (document.documentElement || document.body).scrollTop;
|
|
28362
|
+
let trackLength = documentHeight - windowHeight;
|
|
28363
|
+
let percentageSrolled = Math.floor(scrollTop / trackLength * 100);
|
|
28364
|
+
if (percentageSrolled >= 50) {
|
|
28365
|
+
this.el.style.display = 'block';
|
|
28366
|
+
}
|
|
28367
|
+
else {
|
|
28368
|
+
this.el.style.display = 'none';
|
|
28369
|
+
}
|
|
28370
|
+
let cardRailContainer = this.el.shadowRoot.querySelector('.card-rail-container');
|
|
28371
|
+
let pageFooter = document.querySelector(this.footerQuerySelector);
|
|
28372
|
+
if (pageFooter) {
|
|
28373
|
+
let pageFooterTop = pageFooter.getBoundingClientRect().top;
|
|
28374
|
+
let windowBottom = window.innerHeight;
|
|
28375
|
+
if (pageFooterTop <= windowBottom) {
|
|
28376
|
+
let newBottom = 132 + (windowBottom - pageFooterTop);
|
|
28377
|
+
cardRailContainer.style.bottom = `${newBottom}px`;
|
|
28378
|
+
}
|
|
28379
|
+
}
|
|
28380
|
+
}
|
|
28381
|
+
};
|
|
28382
|
+
this.handleOnResizeBehaviour = () => {
|
|
28383
|
+
var _a, _b;
|
|
28384
|
+
this.setScreenBasedProps();
|
|
28385
|
+
let contentContainer = (_a = this.el) === null || _a === void 0 ? void 0 : _a.shadowRoot.querySelector('.content-container');
|
|
28386
|
+
let contentContainerMarginLeftString = window.getComputedStyle(contentContainer).marginLeft;
|
|
28387
|
+
let contentContainerMarginLeft = Number(contentContainerMarginLeftString.substring(0, contentContainerMarginLeftString.length - 2));
|
|
28388
|
+
let contentCards = (_b = this.el) === null || _b === void 0 ? void 0 : _b.shadowRoot.querySelectorAll('.content');
|
|
28389
|
+
contentContainer.scrollTo({
|
|
28390
|
+
left: contentCards[0].offsetLeft - contentContainerMarginLeft,
|
|
28391
|
+
});
|
|
28392
|
+
this.cardInView = 0;
|
|
28393
|
+
};
|
|
28394
|
+
this.footerQuerySelector = undefined;
|
|
28395
|
+
this.closed = false;
|
|
28396
|
+
this.cardInView = 0;
|
|
28397
|
+
this.data = [];
|
|
28398
|
+
this.screenBasedProps = {
|
|
28399
|
+
contentContainerMargin: undefined,
|
|
28400
|
+
contentCards: undefined,
|
|
28401
|
+
parahFontSize: undefined
|
|
28402
|
+
};
|
|
28403
|
+
}
|
|
28404
|
+
componentWillLoad() {
|
|
28405
|
+
const relatedCards = this.el.querySelectorAll('[slot^="related-card-"]');
|
|
28406
|
+
for (let ind in relatedCards) {
|
|
28407
|
+
let card = relatedCards[ind];
|
|
28408
|
+
if (card.tagName === 'DIV') {
|
|
28409
|
+
let cardData = {
|
|
28410
|
+
image: undefined,
|
|
28411
|
+
text: undefined,
|
|
28412
|
+
href: undefined
|
|
28413
|
+
};
|
|
28414
|
+
let cardImage = card.querySelector('img');
|
|
28415
|
+
let cardLink = card.querySelector('a');
|
|
28416
|
+
cardData.image = cardImage.getAttribute('src');
|
|
28417
|
+
cardData.text = cardLink.innerHTML;
|
|
28418
|
+
cardData.href = cardLink.getAttribute('href');
|
|
28419
|
+
this.data.push(cardData);
|
|
28420
|
+
card.remove();
|
|
28421
|
+
}
|
|
28422
|
+
}
|
|
28423
|
+
this.handleOnScrollBehaviour();
|
|
28424
|
+
}
|
|
28425
|
+
componentDidLoad() {
|
|
28426
|
+
this.setScreenBasedProps();
|
|
28427
|
+
window.addEventListener('scroll', this.handleOnScrollBehaviour);
|
|
28428
|
+
window.addEventListener('resize', this.handleOnResizeBehaviour);
|
|
28429
|
+
}
|
|
28430
|
+
render() {
|
|
28431
|
+
return (this.closed ? null :
|
|
28432
|
+
h$1(Host, null, h$1("div", { class: "card-rail-container" }, h$1("div", { class: "card-rail-header" }, h$1("div", { class: "card-rail-heading" }, h$1("ptc-para", { "ellipsis-line-cutoff": "0", "font-size": "x-small", "font-weight": "w-7", "para-align": "left", "para-color": "primary-grey", "para-line-h": "line-height-normal", "para-margin": "margin-flush", "para-style": "", "para-z-index": "z-1", styles: "" }, "Read More Case Studies")), h$1("div", { class: "card-rail-close", onClick: () => { this.closed = true; } }, h$1("icon-asset", { type: "ptc", size: "xx-small", name: "times", color: "gray" }))), h$1("div", { class: "card-rail-content" }, h$1("icon-asset", { id: "left-arrow", type: "ptc", size: "small", name: "previous_button_arrow", color: "gray", onClick: this.handlePrevClick }), h$1("icon-asset", { id: "right-arrow", type: "ptc", size: "small", name: "next_button_arrow", color: "gray", onClick: this.handleNextClick }), h$1("div", { class: "content-container" }, this.data.map(item => h$1("div", { class: "content", onClick: () => { window.open(item.href); } }, h$1("div", { class: "content-image" }, h$1("img", { alt: "", src: item.image })), h$1("div", { class: "content-text" }, h$1("ptc-para", { "ellipsis-line-cutoff": "3", "font-size": this.screenBasedProps.parahFontSize, "font-weight": "w-6", "para-align": "left", "para-color": "primary-grey", "para-line-h": "line-height-p", "para-margin": "margin-flush", "para-style": "", "para-z-index": "z-1", styles: "" }, item.text)))))))));
|
|
28433
|
+
}
|
|
28434
|
+
get el() { return this; }
|
|
28435
|
+
static get style() { return ptcRelatedCardRailCss; }
|
|
28436
|
+
};
|
|
28437
|
+
|
|
28283
28438
|
const ptcResponsiveWrapperCss = ":host{display:block}";
|
|
28284
28439
|
|
|
28285
28440
|
const PtcResponsiveWrapper$1 = class extends HTMLElement$1 {
|
|
@@ -28664,7 +28819,7 @@ const PtcSpan$1 = class extends HTMLElement$1 {
|
|
|
28664
28819
|
static get style() { return ptcSpanCss; }
|
|
28665
28820
|
};
|
|
28666
28821
|
|
|
28667
|
-
const ptcSquareCardCss = ":host{display:block;background-color:transparent}:host .card-border{height:auto;width:200px}@media only screen and (min-width: 480px){:host .card-border{height:200px}}:host .square-padding{margin:var(--ptc-element-spacing-02)}@media only screen and (min-width: 480px){:host .square-padding{margin:var(--ptc-element-spacing-03) var(--ptc-element-spacing-01)}}@media screen and (min-width: 512px){:host .square-padding{margin:var(--ptc-element-spacing-03)}}:host .card-layout{display:flex;flex-direction:column;justify-content:center;align-items:center}:host .icon{display:inline;vertical-align:middle}:host .number{display:inline-block;line-height:var(--ptc-line-height-denser);font-size:var(--ptc-font-size-xx-large);font-weight:var(--ptc-font-weight-semibold);vertical-align:middle;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:160px}:host slot[name=before-icon],:host slot[name=after-icon]{text-align:center;line-height:var(--ptc-line-height-densest);font-size:var(--ptc-font-size-x-small);font-weight:var(--ptc-font-weight-semibold)}:host slot[name=before-icon]{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;text-overflow:ellipsis}:host slot[name=after-icon]{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;overflow:hidden;text-overflow:ellipsis}";
|
|
28822
|
+
const ptcSquareCardCss = ":host{display:block;background-color:transparent}:host .card-border{height:auto;width:200px}@media only screen and (min-width: 480px){:host .card-border{height:200px}}:host .square-padding{margin:var(--ptc-element-spacing-02)}@media only screen and (min-width: 480px){:host .square-padding{margin:var(--ptc-element-spacing-03) var(--ptc-element-spacing-01)}}@media screen and (min-width: 512px){:host .square-padding{margin:var(--ptc-element-spacing-03)}}:host .card-layout{display:flex;flex-direction:column;justify-content:center;align-items:center}:host .icon{display:inline;vertical-align:middle}:host .number{display:inline-block;line-height:var(--ptc-line-height-denser);font-size:var(--ptc-font-size-xx-large);font-weight:var(--ptc-font-weight-semibold);color:var(--color-gray-10);vertical-align:middle;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:160px}:host slot[name=before-icon],:host slot[name=after-icon]{text-align:center;line-height:var(--ptc-line-height-densest);font-size:var(--ptc-font-size-x-small);font-weight:var(--ptc-font-weight-semibold);color:var(--color-gray-10)}:host slot[name=before-icon]{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;text-overflow:ellipsis}:host slot[name=after-icon]{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;overflow:hidden;text-overflow:ellipsis}";
|
|
28668
28823
|
|
|
28669
28824
|
const PtcSquareCard$1 = class extends HTMLElement$1 {
|
|
28670
28825
|
constructor() {
|
|
@@ -29816,6 +29971,7 @@ const PtcProgressBar = /*@__PURE__*/proxyCustomElement(PtcProgressBar$1, [1,"ptc
|
|
|
29816
29971
|
const PtcQuote = /*@__PURE__*/proxyCustomElement(PtcQuote$1, [1,"ptc-quote",{"quoteType":[1025,"quote-type"],"quoteName":[1025,"quote-name"],"ctaText":[1,"cta-text"],"ctaUrl":[1,"cta-url"],"imgSrc":[1,"img-src"],"imgTitle":[1,"img-title"]}]);
|
|
29817
29972
|
const PtcReadmore = /*@__PURE__*/proxyCustomElement(PtcReadmore$1, [1,"ptc-readmore",{"moreText":[1025,"more-text"],"lessText":[1025,"less-text"],"readMorePosition":[1,"read-more-position"],"display":[1],"visibleLines":[1,"visible-lines"],"visibleLinesCustom":[2,"visible-lines-custom"],"zIndex":[1,"z-index"],"checked":[1028],"size":[1],"isIcon":[4,"is-icon"],"color":[1]},[[9,"resize","addBtnTruncated"]]]);
|
|
29818
29973
|
const PtcReadmoreChar = /*@__PURE__*/proxyCustomElement(PtcReadmoreChar$1, [1,"ptc-readmore-char",{"maxCharacters":[2,"max-characters"],"description":[1],"readMoreText":[1,"read-more-text"],"readLessText":[1,"read-less-text"],"expanded":[32]}]);
|
|
29974
|
+
const PtcRelatedCardRail = /*@__PURE__*/proxyCustomElement(PtcRelatedCardRail$1, [1,"ptc-related-card-rail",{"footerQuerySelector":[1,"footer-query-selector"],"closed":[32],"cardInView":[32],"data":[32],"screenBasedProps":[32]}]);
|
|
29819
29975
|
const PtcResponsiveWrapper = /*@__PURE__*/proxyCustomElement(PtcResponsiveWrapper$1, [1,"ptc-responsive-wrapper"]);
|
|
29820
29976
|
const PtcSearchField = /*@__PURE__*/proxyCustomElement(PtcSearchField$1, [1,"ptc-search-field",{"textValue":[1,"text-value"],"placeholderLabel":[1,"placeholder-label"],"darkTheme":[4,"dark-theme"],"elevation":[1],"enableClear":[4,"enable-clear"],"styles":[1]}]);
|
|
29821
29977
|
const PtcShoppingCart = /*@__PURE__*/proxyCustomElement(PtcShoppingCart$1, [1,"ptc-shopping-cart",{"cartCount":[1,"cart-count"],"color":[1]}]);
|
|
@@ -29924,6 +30080,7 @@ const defineCustomElements = (opts) => {
|
|
|
29924
30080
|
PtcQuote,
|
|
29925
30081
|
PtcReadmore,
|
|
29926
30082
|
PtcReadmoreChar,
|
|
30083
|
+
PtcRelatedCardRail,
|
|
29927
30084
|
PtcResponsiveWrapper,
|
|
29928
30085
|
PtcSearchField,
|
|
29929
30086
|
PtcShoppingCart,
|
|
@@ -29959,4 +30116,4 @@ const defineCustomElements = (opts) => {
|
|
|
29959
30116
|
}
|
|
29960
30117
|
};
|
|
29961
30118
|
|
|
29962
|
-
export { AuthorListingExample, BundleExample, BundleJumbotronExample, DropdownItem, DynamicBoxBundle, FeaturedList, FlTabContent, FlTabHeader, FlTabImage, IconAsset, InnovatorToggleContainer, ListItem, LottiePlayer, MaxWidthContainer, MyComponent, PtcAccordion, PtcAccordionItem, PtcAnnouncement, PtcBackToTop, PtcBackgroundVideo, PtcBioCard, PtcBreadcrumb, PtcButton, PtcCard, PtcCardBottom, PtcCardContent, PtcCardWrapper, PtcCaseStudiesSlider, PtcCheckbox, PtcCollapseList, PtcContainer, PtcDate, PtcDropdown, PtcDynamicCard, PtcEllipsisDropdown, PtcFeaturedList, PtcFilterTag, PtcHero, PtcHeroFooterCta, PtcIconComponent, PtcIconList, PtcIconMinimize, PtcImageDownloadStrip, PtcImg, PtcJumbotron, PtcLink, PtcList, PtcLottie, PtcMediaCard, PtcMinimizedNav, PtcMobileSelect, PtcModal, PtcNavCard, PtcNavLink, PtcNavPills, PtcNavSlider, PtcNavSubmenu, PtcNews, PtcOverlay, PtcPagenation, PtcPara, PtcPicture, PtcPreviousUrl, PtcPricingAddOnCard, PtcPricingAddOnSection, PtcPricingBlock, PtcPricingTable, PtcPricingTabs, PtcProductCard, PtcProductCategory, PtcProductDropdown, PtcProductHighlightCard, PtcProductList, PtcProductSidebar, PtcProgressBar, PtcQuote, PtcReadmore, PtcReadmoreChar, PtcResponsiveWrapper, PtcSearchField, PtcShoppingCart, PtcSkeleton, PtcSlitCard, PtcSocialShare, PtcSpacer, PtcSpan, PtcSquareCard, PtcStickyIcons, PtcStickySection, PtcStickyTitle, PtcSubnav, PtcSubnavCard, PtcSvgBtn, PtcTab, PtcTabList, PtcTabs, PtcTextCopyWithBackground, PtcTitle, PtcTooltip, PtcTwoColumnMedia, PtcValuePropCard, SequentialBundle, SequentialBundleExample, TabContent, TabHeader, defineCustomElements };
|
|
30119
|
+
export { AuthorListingExample, BundleExample, BundleJumbotronExample, DropdownItem, DynamicBoxBundle, FeaturedList, FlTabContent, FlTabHeader, FlTabImage, IconAsset, InnovatorToggleContainer, ListItem, LottiePlayer, MaxWidthContainer, MyComponent, PtcAccordion, PtcAccordionItem, PtcAnnouncement, PtcBackToTop, PtcBackgroundVideo, PtcBioCard, PtcBreadcrumb, PtcButton, PtcCard, PtcCardBottom, PtcCardContent, PtcCardWrapper, PtcCaseStudiesSlider, PtcCheckbox, PtcCollapseList, PtcContainer, PtcDate, PtcDropdown, PtcDynamicCard, PtcEllipsisDropdown, PtcFeaturedList, PtcFilterTag, PtcHero, PtcHeroFooterCta, PtcIconComponent, PtcIconList, PtcIconMinimize, PtcImageDownloadStrip, PtcImg, PtcJumbotron, PtcLink, PtcList, PtcLottie, PtcMediaCard, PtcMinimizedNav, PtcMobileSelect, PtcModal, PtcNavCard, PtcNavLink, PtcNavPills, PtcNavSlider, PtcNavSubmenu, PtcNews, PtcOverlay, PtcPagenation, PtcPara, PtcPicture, PtcPreviousUrl, PtcPricingAddOnCard, PtcPricingAddOnSection, PtcPricingBlock, PtcPricingTable, PtcPricingTabs, PtcProductCard, PtcProductCategory, PtcProductDropdown, PtcProductHighlightCard, PtcProductList, PtcProductSidebar, PtcProgressBar, PtcQuote, PtcReadmore, PtcReadmoreChar, PtcRelatedCardRail, PtcResponsiveWrapper, PtcSearchField, PtcShoppingCart, PtcSkeleton, PtcSlitCard, PtcSocialShare, PtcSpacer, PtcSpan, PtcSquareCard, PtcStickyIcons, PtcStickySection, PtcStickyTitle, PtcSubnav, PtcSubnavCard, PtcSvgBtn, PtcTab, PtcTabList, PtcTabs, PtcTextCopyWithBackground, PtcTitle, PtcTooltip, PtcTwoColumnMedia, PtcValuePropCard, SequentialBundle, SequentialBundleExample, TabContent, TabHeader, defineCustomElements };
|