@ptcwebops/ptcw-design 6.3.49-beta → 6.3.51-beta
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/ptc-button.cjs.entry.js +87 -0
- package/dist/cjs/ptc-card_2.cjs.entry.js +1 -1
- package/dist/cjs/ptc-para.cjs.entry.js +127 -0
- package/dist/cjs/ptc-picture.cjs.entry.js +162 -0
- package/dist/cjs/ptc-spacer.cjs.entry.js +38 -0
- package/dist/cjs/ptc-sticky-icons.cjs.entry.js +9 -0
- package/dist/cjs/ptc-text-copy-with-background.cjs.entry.js +7 -0
- package/dist/cjs/ptc-title.cjs.entry.js +152 -0
- package/dist/cjs/ptcw-design.cjs.js +1 -1
- package/dist/collection/components/ptc-preloader-section/ptc-preloader-section.js +1 -1
- package/dist/collection/components/ptc-sticky-icons/ptc-sticky-icons.js +9 -0
- package/dist/collection/components/ptc-text-copy-with-background/ptc-text-copy-with-background.js +7 -0
- package/dist/custom-elements/index.js +17 -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/homepage-jumbotron.entry.js +1 -1
- package/dist/esm/homepage-toggled-content.entry.js +1 -1
- package/dist/esm/{interfaces-7c0243be.js → interfaces-4caedd26.js} +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/most-popular-news.entry.js +1 -1
- package/dist/esm/my-component.entry.js +1 -1
- package/dist/esm/ptc-accordion-item.entry.js +1 -1
- package/dist/esm/ptc-background-video.entry.js +1 -1
- package/dist/esm/ptc-button.entry.js +83 -0
- package/dist/esm/ptc-card_2.entry.js +1 -1
- package/dist/esm/ptc-collapse-list.entry.js +1 -1
- package/dist/esm/ptc-form-checkbox_4.entry.js +1 -1
- package/dist/esm/ptc-homepage-image-feature.entry.js +1 -1
- package/dist/esm/ptc-homepage-video-background.entry.js +1 -1
- package/dist/esm/ptc-icon-card.entry.js +1 -1
- package/dist/esm/ptc-img.entry.js +1 -1
- package/dist/esm/ptc-link.entry.js +1 -1
- package/dist/esm/ptc-media-card.entry.js +1 -1
- package/dist/esm/ptc-para.entry.js +123 -0
- package/dist/esm/ptc-picture.entry.js +158 -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-social-icons-footer.entry.js +1 -1
- package/dist/esm/ptc-spacer.entry.js +34 -0
- package/dist/esm/ptc-sticky-icons.entry.js +9 -0
- package/dist/esm/ptc-text-copy-with-background.entry.js +8 -1
- package/dist/esm/ptc-title.entry.js +148 -0
- package/dist/esm/ptcw-design.js +1 -1
- package/dist/esm/{utils-7c68b88a.js → utils-2f12c081.js} +1 -1
- package/dist/ptcw-design/p-077839d5.entry.js +1 -0
- package/dist/ptcw-design/p-0c69ea52.entry.js +1 -0
- package/dist/ptcw-design/{p-dffcfa42.entry.js → p-14b7693f.entry.js} +1 -1
- package/dist/ptcw-design/{p-30bfb2f9.entry.js → p-1eb40265.entry.js} +1 -1
- package/dist/ptcw-design/{p-673cfd2e.entry.js → p-257267e3.entry.js} +1 -1
- package/dist/ptcw-design/{p-4056c365.entry.js → p-297a14cb.entry.js} +1 -1
- package/dist/ptcw-design/p-2cc7e2a8.entry.js +1 -0
- package/dist/ptcw-design/{p-5ca42138.entry.js → p-3ed4a7ed.entry.js} +1 -1
- package/dist/ptcw-design/{p-16d47ac5.entry.js → p-45b1f3fc.entry.js} +1 -1
- package/dist/ptcw-design/{p-81e65926.entry.js → p-4702c233.entry.js} +1 -1
- package/dist/ptcw-design/{p-531caca4.entry.js → p-4ca956c1.entry.js} +1 -1
- package/dist/ptcw-design/{p-55e344bc.entry.js → p-52e17d34.entry.js} +1 -1
- package/dist/ptcw-design/{p-ee1183b2.js → p-711bcdad.js} +1 -1
- package/dist/ptcw-design/{p-e813ea2b.entry.js → p-76dab076.entry.js} +1 -1
- package/dist/ptcw-design/{p-826c17e8.js → p-80122e26.js} +1 -1
- package/dist/ptcw-design/{p-d68f97a0.entry.js → p-85bdb2d5.entry.js} +1 -1
- package/dist/ptcw-design/{p-a5ad0eff.entry.js → p-8c121480.entry.js} +1 -1
- package/dist/ptcw-design/{p-5bd8b4be.entry.js → p-8cea8943.entry.js} +1 -1
- package/dist/ptcw-design/{p-757e3edb.entry.js → p-8e42a22d.entry.js} +1 -1
- package/dist/ptcw-design/{p-0252726c.entry.js → p-901c31b3.entry.js} +1 -1
- package/dist/ptcw-design/{p-2ba1ef9d.entry.js → p-9dbcfcee.entry.js} +1 -1
- package/dist/ptcw-design/{p-24a6eefa.entry.js → p-a5fc048f.entry.js} +1 -1
- package/dist/ptcw-design/p-a8872ce3.entry.js +1 -0
- package/dist/ptcw-design/{p-50770cc0.entry.js → p-b647f7a1.entry.js} +1 -1
- package/dist/ptcw-design/{p-80588c84.entry.js → p-d51438de.entry.js} +1 -1
- package/dist/ptcw-design/p-e3867512.entry.js +1 -0
- package/dist/ptcw-design/p-e4eb925f.entry.js +1 -0
- package/dist/ptcw-design/p-e8c275a1.entry.js +1 -0
- package/dist/ptcw-design/{p-2f6a25fe.entry.js → p-e9c5e74e.entry.js} +1 -1
- package/dist/ptcw-design/{p-37c4f168.entry.js → p-f1734520.entry.js} +1 -1
- package/dist/ptcw-design/ptcw-design.css +1 -1
- package/dist/ptcw-design/ptcw-design.esm.js +1 -1
- package/dist/types/components/ptc-text-copy-with-background/ptc-text-copy-with-background.d.ts +2 -0
- package/package.json +1 -1
- package/readme.md +1 -1
- package/dist/cjs/ptc-button_5.cjs.entry.js +0 -540
- package/dist/esm/ptc-button_5.entry.js +0 -532
- package/dist/ptcw-design/p-0e5932f0.entry.js +0 -1
- package/dist/ptcw-design/p-84f8a32d.entry.js +0 -1
- package/dist/ptcw-design/p-fe907670.entry.js +0 -1
|
@@ -0,0 +1,162 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
const index = require('./index-63ddc79c.js');
|
|
6
|
+
const interfaces = require('./interfaces-574e6df7.js');
|
|
7
|
+
|
|
8
|
+
const ptcPictureCss = "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;overflow:hidden}:host .inline{display:inline}:host .inline-block{display:inline-block}:host .block{display:block}:host(.relative){position:relative}:host(.static){position:static}:host(.absoltue){position:absolute}img{max-width:100%}.cover{object-fit:cover}.fill{object-fit:fill}.contain{object-fit:contain}.scale-down{object-fit:scale-down}.none{object-fit:none}.initial{object-fit:initial}.inherit{object-fit:inherit}.radius-standard{border-radius:var(--ptc-border-radius-standard)}.radius-large{border-radius:var(--ptc-border-radius-large)}.radius-pill{border-radius:var(--ptc-border-radius-pill)}.radius-circle{border-radius:var(--ptc-border-radius-circle)}.is-full-height{height:100%}.is-full-width{width:100%}:host(.left){text-align:left}:host(.right){text-align:right}:host(.center){text-align:center}";
|
|
9
|
+
|
|
10
|
+
const PtcPicture = class {
|
|
11
|
+
constructor(hostRef) {
|
|
12
|
+
index.registerInstance(this, hostRef);
|
|
13
|
+
this.src = undefined;
|
|
14
|
+
this.alt = 'image';
|
|
15
|
+
this.sizeXs = '510x340';
|
|
16
|
+
this.sizeSm = '1240x496';
|
|
17
|
+
this.sizeMd = '1366x500';
|
|
18
|
+
this.sizeLg = '1920x1080';
|
|
19
|
+
this.disableResize = false;
|
|
20
|
+
this.oldSrc = undefined;
|
|
21
|
+
this.imagePosition = 'static';
|
|
22
|
+
this.borderRadius = undefined;
|
|
23
|
+
this.height = undefined;
|
|
24
|
+
this.width = undefined;
|
|
25
|
+
this.objectFit = 'cover';
|
|
26
|
+
this.isFullHeight = false;
|
|
27
|
+
this.isFullWidth = false;
|
|
28
|
+
this.styles = undefined;
|
|
29
|
+
this.imageAlignment = 'left';
|
|
30
|
+
this.maxWidth = undefined;
|
|
31
|
+
this.displayImage = 'block';
|
|
32
|
+
}
|
|
33
|
+
WindowResize() {
|
|
34
|
+
this.addIntersectionObserver();
|
|
35
|
+
}
|
|
36
|
+
componentWillLoad() {
|
|
37
|
+
if (this.disableResize) {
|
|
38
|
+
this.sizeXs = undefined;
|
|
39
|
+
this.sizeSm = undefined;
|
|
40
|
+
this.sizeMd = undefined;
|
|
41
|
+
this.sizeLg = undefined;
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
componentDidLoad() {
|
|
45
|
+
this.addIntersectionObserver();
|
|
46
|
+
}
|
|
47
|
+
componentWillUpdate() {
|
|
48
|
+
if (this.src !== this.oldSrc) {
|
|
49
|
+
this.addIntersectionObserver();
|
|
50
|
+
}
|
|
51
|
+
this.oldSrc = this.src;
|
|
52
|
+
}
|
|
53
|
+
//lazy-loading
|
|
54
|
+
addIntersectionObserver() {
|
|
55
|
+
if (!this.src) {
|
|
56
|
+
return;
|
|
57
|
+
}
|
|
58
|
+
if ('IntersectionObserver' in window) {
|
|
59
|
+
let lazyLoadImages = new IntersectionObserver(entries => {
|
|
60
|
+
entries.forEach(entry => {
|
|
61
|
+
if (entry.isIntersecting) {
|
|
62
|
+
const image = this.el.shadowRoot.querySelector('img');
|
|
63
|
+
image.src = this.setResponsiveBg();
|
|
64
|
+
lazyLoadImages.unobserve(image);
|
|
65
|
+
}
|
|
66
|
+
});
|
|
67
|
+
});
|
|
68
|
+
let tempImg = this.el.shadowRoot.querySelector('img');
|
|
69
|
+
if (tempImg) {
|
|
70
|
+
lazyLoadImages.observe(tempImg);
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
else {
|
|
74
|
+
// fall back to setTimeout for Safari and IE
|
|
75
|
+
setTimeout(() => {
|
|
76
|
+
const image = this.el.shadowRoot.querySelector('img');
|
|
77
|
+
image.src = this.setResponsiveBg();
|
|
78
|
+
image.onload = () => {
|
|
79
|
+
image.removeAttribute('data-src');
|
|
80
|
+
};
|
|
81
|
+
}, 5000);
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
//responsive image
|
|
85
|
+
setResponsiveBg() {
|
|
86
|
+
// Define local variables
|
|
87
|
+
let backgrounds = (this.el.shadowRoot || document).querySelectorAll('img'), el, elData, currentBreakpoint = this.getCurrentBreakPoints();
|
|
88
|
+
for (var i = 0, len = backgrounds.length; i < len; i++) {
|
|
89
|
+
// Set current variables
|
|
90
|
+
el = backgrounds[i];
|
|
91
|
+
elData = el.getAttribute('data-' + currentBreakpoint);
|
|
92
|
+
if (elData !== null) {
|
|
93
|
+
return elData;
|
|
94
|
+
}
|
|
95
|
+
else {
|
|
96
|
+
if (typeof console == 'object') {
|
|
97
|
+
console.warn('Data attribute: data-' + currentBreakpoint + ' not found on element:\n\n' + el.outerHTML + '\n\n\n');
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
render() {
|
|
103
|
+
const classMap = this.getCssClassMap();
|
|
104
|
+
const classMapHost = this.getCssClassMapHost();
|
|
105
|
+
return (index.h(index.Host, { class: classMapHost }, this.styles && index.h("style", null, this.styles), index.h("img", Object.assign({ class: classMap, "data-xs": !!this.sizeXs ? `${this.src}` : `${this.src}`, "data-sm": !!this.sizeSm ? `${this.src}` : `${this.src}`, "data-md": !!this.sizeMd ? `${this.src}` : `${this.src}`, "data-lg": !!this.sizeLg ? `${this.src}` : `${this.src}` }, (!!this.width ? { width: this.width } : {}), (!!this.height ? { height: this.height } : {}), { alt: this.alt, style: Object.assign({}, (!!this.maxWidth ? { maxWidth: this.maxWidth + 'px' } : {})) })), index.h("slot", null)));
|
|
106
|
+
}
|
|
107
|
+
getCurrentBreakPoints() {
|
|
108
|
+
// Define local variables
|
|
109
|
+
let doc = window.document, temp = doc.createElement('div'), env;
|
|
110
|
+
// Append test node
|
|
111
|
+
doc.body.appendChild(temp);
|
|
112
|
+
// Loop through breakpoints
|
|
113
|
+
for (let i = interfaces.ResponsivePictureVariables.envs.length - 1; i >= 0; i--) {
|
|
114
|
+
env = interfaces.ResponsivePictureVariables.envs[i];
|
|
115
|
+
// Add classes
|
|
116
|
+
temp.className = 'hidden-' + env;
|
|
117
|
+
// Found breakpoint
|
|
118
|
+
if (temp.offsetParent === null) {
|
|
119
|
+
// Remove our test node
|
|
120
|
+
doc.body.removeChild(temp);
|
|
121
|
+
// Return current breakpoint
|
|
122
|
+
return env;
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
// Breakpoint not found, try fallback
|
|
126
|
+
doc.body.removeChild(temp);
|
|
127
|
+
return this.getFallbackBreakpoint();
|
|
128
|
+
}
|
|
129
|
+
getFallbackBreakpoint() {
|
|
130
|
+
if (window.matchMedia('(min-width: 992px)').matches) {
|
|
131
|
+
return 'lg';
|
|
132
|
+
}
|
|
133
|
+
else if (window.matchMedia('(min-width: 768px)').matches) {
|
|
134
|
+
return 'md';
|
|
135
|
+
}
|
|
136
|
+
else if (window.matchMedia('(min-width: 576px)').matches) {
|
|
137
|
+
return 'sm';
|
|
138
|
+
}
|
|
139
|
+
else {
|
|
140
|
+
return 'xs';
|
|
141
|
+
}
|
|
142
|
+
}
|
|
143
|
+
getCssClassMap() {
|
|
144
|
+
return {
|
|
145
|
+
[this.borderRadius]: this.borderRadius ? true : false,
|
|
146
|
+
[this.objectFit]: true,
|
|
147
|
+
[this.isFullHeight ? 'is-full-height' : 'is-normal-height']: true,
|
|
148
|
+
[this.isFullWidth ? 'is-full-width' : 'is-normal-width']: true,
|
|
149
|
+
[this.displayImage]: true
|
|
150
|
+
};
|
|
151
|
+
}
|
|
152
|
+
getCssClassMapHost() {
|
|
153
|
+
return {
|
|
154
|
+
[this.imagePosition]: true,
|
|
155
|
+
[this.imageAlignment]: true,
|
|
156
|
+
};
|
|
157
|
+
}
|
|
158
|
+
get el() { return index.getElement(this); }
|
|
159
|
+
};
|
|
160
|
+
PtcPicture.style = ptcPictureCss;
|
|
161
|
+
|
|
162
|
+
exports.ptc_picture = PtcPicture;
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
const index = require('./index-63ddc79c.js');
|
|
6
|
+
|
|
7
|
+
const ptcSpacerCss = ":host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;position:relative;display:block;width:12px;min-width:12px;height:12px}@media (min-width: 36em){:host{width:16px;min-width:16px;height:16px}}:host(.ptc-spacer-horizontal){display:inline-block;height:100% !important}:host(.ptc-spacer-horizontal.xx-small){width:4px;min-width:4px;height:100%}@media (min-width: 36em){:host(.ptc-spacer-horizontal.xx-small){width:4px;min-width:4px}}:host(.ptc-spacer-horizontal.x-small){width:4px;min-width:4px;height:100%}@media (min-width: 36em){:host(.ptc-spacer-horizontal.x-small){width:8px;min-width:8px}}:host(.ptc-spacer-horizontal.small){width:8px;min-width:8px;height:100%}@media (min-width: 36em){:host(.ptc-spacer-horizontal.small){width:12px;min-width:12px}}:host(.ptc-spacer-horizontal.medium){height:100%}:host(.ptc-spacer-horizontal.large){width:16px;min-width:16px;height:100%}@media (min-width: 36em){:host(.ptc-spacer-horizontal.large){width:20px;min-width:20px}}:host(.ptc-spacer-horizontal.x-large){width:20px;min-width:20px;height:100%}@media (min-width: 36em){:host(.ptc-spacer-horizontal.x-large){width:28px;min-width:28px}}:host(.ptc-spacer-horizontal.xx-large){width:28px;min-width:28px;height:100%}@media (min-width: 36em){:host(.ptc-spacer-horizontal.xx-large){width:36px;min-width:36px}}:host(.ptc-spacer-horizontal.xxx-large){width:36px;min-width:36px;height:100%}@media (min-width: 36em){:host(.ptc-spacer-horizontal.xxx-large){width:48px;min-width:48px}}:host(.ptc-spacer-horizontal.xxxx-large){width:48px;min-width:48px;height:100%}@media (min-width: 36em){:host(.ptc-spacer-horizontal.xxxx-large){width:72px;min-width:72px}}:host(.ptc-spacer-vertical.xx-small){width:100%;height:4px;min-height:4px}:host(.ptc-spacer-vertical.x-small){width:100%;height:4px;min-height:4px}@media (min-width: 36em){:host(.ptc-spacer-vertical.x-small){height:8px;min-height:8px}}:host(.ptc-spacer-vertical.small){width:100%;height:8px;min-height:8px}@media (min-width: 36em){:host(.ptc-spacer-vertical.small){height:12px;min-height:12px}}:host(.ptc-spacer-vertical.medium){width:100%}:host(.ptc-spacer-vertical.large){width:100%;height:16px;min-height:16px}@media (min-width: 36em){:host(.ptc-spacer-vertical.large){height:20px;min-height:20px}}:host(.ptc-spacer-vertical.x-large){width:100%;height:20px;min-height:20px}@media (min-width: 36em){:host(.ptc-spacer-vertical.x-large){height:28px;min-height:28px}}:host(.ptc-spacer-vertical.xx-large){width:100%;height:28px;min-height:28px}@media (min-width: 36em){:host(.ptc-spacer-vertical.xx-large){height:36px;min-height:36px}}:host(.ptc-spacer-vertical.xxx-large){width:100%;height:36px;min-height:36px}@media (min-width: 36em){:host(.ptc-spacer-vertical.xxx-large){height:48px;min-height:48px}}:host(.ptc-spacer-vertical.xxxx-large){width:100%;height:48px;min-height:48px}@media (min-width: 36em){:host(.ptc-spacer-vertical.xxxx-large){height:72px;min-height:72px}}:host(.ptc-spacer-vertical.space-144){width:100%;height:144px;min-height:144px}:host(.ptc-spacer-vertical.space-120){width:100%;height:120px;min-height:120px}:host(.ptc-spacer-vertical.space-128){width:100%;height:128px;min-height:128px}:host(.ptc-spacer-xx-small){display:none}@media (max-width: 22.5em){:host(.ptc-spacer-xx-small){display:block}}:host(.ptc-spacer-x-small){display:none}@media (max-width: 35.99em){:host(.ptc-spacer-x-small){display:block}}:host(.ptc-spacer-small){display:none}@media (min-width: 36em){:host(.ptc-spacer-small){display:block}}:host(.ptc-spacer-medium){display:none}@media (min-width: 48em){:host(.ptc-spacer-medium){display:block}}:host(.ptc-spacer-large){display:none}@media (min-width: 62em){:host(.ptc-spacer-large){display:block}}:host(.ptc-spacer-x-large){display:none}@media (min-width: 64.0625em){:host(.ptc-spacer-x-large){display:block}}:host(.ptc-spacer-xx-large){display:none}@media (min-width: 75em){:host(.ptc-spacer-xx-large){display:block}}:host(.ptc-spacer-xxx-large){display:none}@media (min-width: 90em){:host(.ptc-spacer-xxx-large){display:block}}";
|
|
8
|
+
|
|
9
|
+
const PtcSpacer = class {
|
|
10
|
+
constructor(hostRef) {
|
|
11
|
+
index.registerInstance(this, hostRef);
|
|
12
|
+
this.breakpoint = '';
|
|
13
|
+
this.size = 'medium';
|
|
14
|
+
this.direction = 'vertical';
|
|
15
|
+
}
|
|
16
|
+
render() {
|
|
17
|
+
const classMap = this.getCssClassMap();
|
|
18
|
+
return (index.h(index.Host, { class: classMap }));
|
|
19
|
+
}
|
|
20
|
+
getCssClassMap() {
|
|
21
|
+
return {
|
|
22
|
+
[this.size]: true,
|
|
23
|
+
['ptc-spacer-horizontal']: this.direction === 'horizontal',
|
|
24
|
+
['ptc-spacer-vertical']: this.direction === 'vertical',
|
|
25
|
+
['ptc-spacer-xx-small']: this.breakpoint === 'xx-small',
|
|
26
|
+
['ptc-spacer-x-small']: this.breakpoint === 'x-small',
|
|
27
|
+
['ptc-spacer-small']: this.breakpoint === 'small',
|
|
28
|
+
['ptc-spacer-medium']: this.breakpoint === 'medium',
|
|
29
|
+
['ptc-spacer-large']: this.breakpoint === 'large',
|
|
30
|
+
['ptc-spacer-x-large']: this.breakpoint === 'x-large',
|
|
31
|
+
['ptc-spacer-xx-large']: this.breakpoint === 'xx-large',
|
|
32
|
+
['ptc-spacer-xxx-large']: this.breakpoint === 'xxx-large',
|
|
33
|
+
};
|
|
34
|
+
}
|
|
35
|
+
};
|
|
36
|
+
PtcSpacer.style = ptcSpacerCss;
|
|
37
|
+
|
|
38
|
+
exports.ptc_spacer = PtcSpacer;
|
|
@@ -21,6 +21,7 @@ const PtcStickyIcons = class {
|
|
|
21
21
|
}
|
|
22
22
|
setHostLocation() {
|
|
23
23
|
let width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
|
|
24
|
+
const detailSection = document.querySelector(".cs-detail-section");
|
|
24
25
|
let currEle = this.el;
|
|
25
26
|
// get the element
|
|
26
27
|
const element = document.querySelector("ptc-sticky-icons");
|
|
@@ -29,6 +30,14 @@ const PtcStickyIcons = class {
|
|
|
29
30
|
if (width < 992) {
|
|
30
31
|
currEle.parentElement.appendChild(currEle);
|
|
31
32
|
currEle.parentElement.style.paddingRight = "0px";
|
|
33
|
+
// Code for case study page only
|
|
34
|
+
// Moving sticky icon in the last ptc-section div
|
|
35
|
+
if (detailSection) {
|
|
36
|
+
const lastSection = detailSection.querySelectorAll('.content-section section.ptc-section').length ? detailSection.querySelectorAll('section.ptc-section')[detailSection.querySelectorAll('section.ptc-section').length - 1] : null;
|
|
37
|
+
if (lastSection && !lastSection.contains(element)) {
|
|
38
|
+
lastSection.appendChild(currEle);
|
|
39
|
+
}
|
|
40
|
+
}
|
|
32
41
|
}
|
|
33
42
|
else {
|
|
34
43
|
currEle.parentElement.prepend(currEle);
|
|
@@ -19,6 +19,12 @@ const PtcTextCopyWithBackground = class {
|
|
|
19
19
|
this.disableLightLinks = false;
|
|
20
20
|
this.styles = undefined;
|
|
21
21
|
}
|
|
22
|
+
componentDidLoad() {
|
|
23
|
+
var _a;
|
|
24
|
+
if (this.hostEle.getAttribute('type') === 'hero-footer-cta') {
|
|
25
|
+
(_a = this.hostEle.parentElement) === null || _a === void 0 ? void 0 : _a.classList.add('text-copy-footer-cta');
|
|
26
|
+
}
|
|
27
|
+
}
|
|
22
28
|
render() {
|
|
23
29
|
const classMap = this.getCssClassMap();
|
|
24
30
|
const slitFill = this.getSlitFillColor();
|
|
@@ -50,6 +56,7 @@ const PtcTextCopyWithBackground = class {
|
|
|
50
56
|
['bg-image-absent']: !this.backgroundImage && this.type == "text-copy-with-background"
|
|
51
57
|
};
|
|
52
58
|
}
|
|
59
|
+
get hostEle() { return index.getElement(this); }
|
|
53
60
|
};
|
|
54
61
|
PtcTextCopyWithBackground.style = ptcTextCopyWithBackgroundCss;
|
|
55
62
|
|
|
@@ -0,0 +1,152 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
const index = require('./index-63ddc79c.js');
|
|
6
|
+
const utils = require('./utils-b63aef52.js');
|
|
7
|
+
|
|
8
|
+
const ptcTitleCss = "h1.sc-ptc-title,h2.sc-ptc-title,h3.sc-ptc-title,h4.sc-ptc-title,h5.sc-ptc-title,h6.sc-ptc-title,p.sc-ptc-title,ul.sc-ptc-title,li.sc-ptc-title,ptc-subnav.sc-ptc-title,ptc-tab-list.sc-ptc-title,ptc-link.sc-ptc-title,ptc-square-card.sc-ptc-title,.hyphenate-text.sc-ptc-title,ptc-footer.sc-ptc-title{word-break:break-word;hyphens:manual;-webkit-hyphens:manual;-moz-hyphens:manual;-ms-hyphens:manual}@supports (hyphenate-limit-chars: 12 3 3){h1.sc-ptc-title,h2.sc-ptc-title,h3.sc-ptc-title,h4.sc-ptc-title,h5.sc-ptc-title,h6.sc-ptc-title,p.sc-ptc-title,ul.sc-ptc-title,li.sc-ptc-title,ptc-subnav.sc-ptc-title,ptc-tab-list.sc-ptc-title,ptc-link.sc-ptc-title,ptc-square-card.sc-ptc-title,.hyphenate-text.sc-ptc-title,ptc-footer.sc-ptc-title{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}}div.center.sc-ptc-title{text-align:center}div.center.dotted.sc-ptc-title h1.sc-ptc-title::before,div.center.dotted.sc-ptc-title h2.sc-ptc-title::before,div.center.dotted.sc-ptc-title h3.sc-ptc-title::before,div.center.dotted.sc-ptc-title h4.sc-ptc-title::before,div.center.dotted.sc-ptc-title h5.sc-ptc-title::before,div.center.dotted.sc-ptc-title h6.sc-ptc-title::before{left:50%;transform:translateX(-50%)}div.left.sc-ptc-title{text-align:left;width:100%}div.left.dotted.sc-ptc-title h1.sc-ptc-title::before,div.left.dotted.sc-ptc-title h2.sc-ptc-title::before,div.left.dotted.sc-ptc-title h3.sc-ptc-title::before,div.left.dotted.sc-ptc-title h4.sc-ptc-title::before,div.left.dotted.sc-ptc-title h5.sc-ptc-title::before,div.left.dotted.sc-ptc-title h6.sc-ptc-title::before{left:0%}div.right.sc-ptc-title{text-align:right}div.right.dotted.sc-ptc-title h1.sc-ptc-title::before,div.right.dotted.sc-ptc-title h2.sc-ptc-title::before,div.right.dotted.sc-ptc-title h3.sc-ptc-title::before,div.right.dotted.sc-ptc-title h4.sc-ptc-title::before,div.right.dotted.sc-ptc-title h5.sc-ptc-title::before,div.right.dotted.sc-ptc-title h6.sc-ptc-title::before{right:0%}div.inherit.sc-ptc-title{text-align:inherit}div.dotted.sc-ptc-title h1.sc-ptc-title::before,div.dotted.sc-ptc-title h2.sc-ptc-title::before,div.dotted.sc-ptc-title h3.sc-ptc-title::before,div.dotted.sc-ptc-title h4.sc-ptc-title::before,div.dotted.sc-ptc-title h5.sc-ptc-title::before,div.dotted.sc-ptc-title h6.sc-ptc-title::before{content:\"\";position:absolute;top:-6px;width:30%;display:block;border-top:3px dashed var(--color-green-07)}div.solid.sc-ptc-title h1.sc-ptc-title,div.solid.sc-ptc-title h2.sc-ptc-title,div.solid.sc-ptc-title h3.sc-ptc-title,div.solid.sc-ptc-title h4.sc-ptc-title,div.solid.sc-ptc-title h5.sc-ptc-title,div.solid.sc-ptc-title h6.sc-ptc-title{padding-top:12px}div.solid.sc-ptc-title h1.sc-ptc-title::before,div.solid.sc-ptc-title h2.sc-ptc-title::before,div.solid.sc-ptc-title h3.sc-ptc-title::before,div.solid.sc-ptc-title h4.sc-ptc-title::before,div.solid.sc-ptc-title h5.sc-ptc-title::before,div.solid.sc-ptc-title h6.sc-ptc-title::before{content:\"\";position:absolute;width:100%;height:0.7px;background-color:var(--color-gray-03);opacity:0.9;left:0px;top:0}div.solid.sc-ptc-title h1.sc-ptc-title::after,div.solid.sc-ptc-title h2.sc-ptc-title::after,div.solid.sc-ptc-title h3.sc-ptc-title::after,div.solid.sc-ptc-title h4.sc-ptc-title::after,div.solid.sc-ptc-title h5.sc-ptc-title::after,div.solid.sc-ptc-title h6.sc-ptc-title::after{content:\"\";position:absolute;width:56px;height:2px;background-color:var(--color-green-07);top:-2px;left:0px}div.is-standard.sc-ptc-title h1.sc-ptc-title,div.is-standard.sc-ptc-title h2.sc-ptc-title,div.is-standard.sc-ptc-title h3.sc-ptc-title,div.is-standard.sc-ptc-title h4.sc-ptc-title,div.is-standard.sc-ptc-title h5.sc-ptc-title,div.is-standard.sc-ptc-title h6.sc-ptc-title{display:inline-block;position:relative}div.is-standard.sc-ptc-title h1.sc-ptc-title{font-size:var(--ptc-font-size-xxx-large);line-height:var(--ptc-line-height-densest);font-weight:var(--ptc-font-weight-extrabold);letter-spacing:0px;color:var(--color-gray-10)}@media only screen and (min-width: 768px){div.is-standard.sc-ptc-title h1.sc-ptc-title{font-size:var(--ptc-font-size-xxxx-large)}}div.is-standard.sc-ptc-title h2.sc-ptc-title{font-size:var(--ptc-font-size-x-large);line-height:var(--ptc-line-height-densest);font-weight:var(--ptc-font-weight-extrabold);color:var(--color-gray-10)}@media only screen and (min-width: 768px){div.is-standard.sc-ptc-title h2.sc-ptc-title{font-size:var(--ptc-font-size-xx-large)}}div.is-plm-hub.sc-ptc-title h1.sc-ptc-title,div.is-plm-hub.sc-ptc-title h2.sc-ptc-title,div.is-plm-hub.sc-ptc-title h3.sc-ptc-title,div.is-plm-hub.sc-ptc-title h4.sc-ptc-title,div.is-plm-hub.sc-ptc-title h5.sc-ptc-title,div.is-plm-hub.sc-ptc-title h6.sc-ptc-title{display:inline-block;position:relative;margin-block-start:0em;margin-block-end:0em;margin-inline-start:0px;margin-inline-end:0px;color:var(--color-white) !important}div.margin-flush.sc-ptc-title{margin-top:0;margin-bottom:0}div.margin-flush.sc-ptc-title h1.sc-ptc-title,div.margin-flush.sc-ptc-title h2.sc-ptc-title,div.margin-flush.sc-ptc-title h3.sc-ptc-title,div.margin-flush.sc-ptc-title h4.sc-ptc-title,div.margin-flush.sc-ptc-title h5.sc-ptc-title{margin-top:0;margin-bottom:0}div.margin-top-2.sc-ptc-title{margin-top:var(--ptc-element-spacing-02);margin-bottom:0}div.margin-top-3.sc-ptc-title{margin-top:var(--ptc-element-spacing-03);margin-bottom:0}div.margin-top-4.sc-ptc-title{margin-top:var(--ptc-element-spacing-04);margin-bottom:0}div.margin-top-5.sc-ptc-title{margin-top:var(--ptc-element-spacing-05);margin-bottom:0}div.margin-top-6.sc-ptc-title{margin-top:var(--ptc-element-spacing-06);margin-bottom:0}div.margin-bottom-2.sc-ptc-title{margin-bottom:var(--ptc-element-spacing-02);margin-top:0}div.margin-bottom-3.sc-ptc-title{margin-bottom:var(--ptc-element-spacing-03);margin-top:0}div.margin-bottom-4.sc-ptc-title{margin-bottom:var(--ptc-element-spacing-04);margin-top:0}div.margin-bottom-5.sc-ptc-title{margin-bottom:var(--ptc-element-spacing-05);margin-top:0}div.margin-bottom-6.sc-ptc-title{margin-bottom:var(--ptc-element-spacing-06);margin-top:0}div.margin-2.sc-ptc-title{margin-top:var(--ptc-element-spacing-02);margin-bottom:var(--ptc-element-spacing-02)}div.margin-3.sc-ptc-title{margin-top:var(--ptc-element-spacing-03);margin-bottom:var(--ptc-element-spacing-03)}div.margin-4.sc-ptc-title{margin-top:var(--ptc-element-spacing-04);margin-bottom:var(--ptc-element-spacing-04)}div.margin-5.sc-ptc-title{margin-top:var(--ptc-element-spacing-05);margin-bottom:var(--ptc-element-spacing-05)}div.margin-5.sc-ptc-title h4.sc-ptc-title{margin-top:0;margin-bottom:0}div.margin-6.sc-ptc-title{margin-top:var(--ptc-element-spacing-06);margin-bottom:var(--ptc-element-spacing-06)}div.margin-9.sc-ptc-title{margin-top:var(--ptc-element-spacing-09);margin-bottom:var(--ptc-element-spacing-09)}div.green.sc-ptc-title h1.sc-ptc-title,div.green.sc-ptc-title h2.sc-ptc-title,div.green.sc-ptc-title h3.sc-ptc-title,div.green.sc-ptc-title h4.sc-ptc-title,div.green.sc-ptc-title h5.sc-ptc-title,div.green.sc-ptc-title h6.sc-ptc-title{text-shadow:0px 0px var(--ptc-element-spacing-03) var(--color-green-07)}div.blue.sc-ptc-title h1.sc-ptc-title,div.blue.sc-ptc-title h2.sc-ptc-title,div.blue.sc-ptc-title h3.sc-ptc-title,div.blue.sc-ptc-title h4.sc-ptc-title,div.blue.sc-ptc-title h5.sc-ptc-title,div.blue.sc-ptc-title h6.sc-ptc-title{text-shadow:0px 0px var(--ptc-element-spacing-03) var(--color-blue-07)}div.red.sc-ptc-title h1.sc-ptc-title,div.red.sc-ptc-title h2.sc-ptc-title,div.red.sc-ptc-title h3.sc-ptc-title,div.red.sc-ptc-title h4.sc-ptc-title,div.red.sc-ptc-title h5.sc-ptc-title,div.red.sc-ptc-title h6.sc-ptc-title{text-shadow:0px 0px var(--ptc-element-spacing-03) var(--color-red-07)}div.orange.sc-ptc-title h1.sc-ptc-title,div.orange.sc-ptc-title h2.sc-ptc-title,div.orange.sc-ptc-title h3.sc-ptc-title,div.orange.sc-ptc-title h4.sc-ptc-title,div.orange.sc-ptc-title h5.sc-ptc-title,div.orange.sc-ptc-title h6.sc-ptc-title{text-shadow:0px 0px var(--ptc-element-spacing-03) var(--color-orange-07)}div.slate-grey.sc-ptc-title h1.sc-ptc-title,div.slate-grey.sc-ptc-title h2.sc-ptc-title,div.slate-grey.sc-ptc-title h3.sc-ptc-title,div.slate-grey.sc-ptc-title h4.sc-ptc-title,div.slate-grey.sc-ptc-title h5.sc-ptc-title,div.slate-grey.sc-ptc-title h6.sc-ptc-title{text-shadow:0px 0px var(--ptc-element-spacing-03) var(--color-gray-07)}div.w-3.sc-ptc-title h1.sc-ptc-title,div.w-3.sc-ptc-title h2.sc-ptc-title,div.w-3.sc-ptc-title h3.sc-ptc-title,div.w-3.sc-ptc-title h4.sc-ptc-title,div.w-3.sc-ptc-title h5.sc-ptc-title,div.w-3.sc-ptc-title h6.sc-ptc-title{font-weight:var(--ptc-font-weight-thin)}div.w-4.sc-ptc-title h1.sc-ptc-title,div.w-4.sc-ptc-title h2.sc-ptc-title,div.w-4.sc-ptc-title h3.sc-ptc-title,div.w-4.sc-ptc-title h4.sc-ptc-title,div.w-4.sc-ptc-title h5.sc-ptc-title,div.w-4.sc-ptc-title h6.sc-ptc-title{font-weight:var(--ptc-font-weight-regular)}div.w-5.sc-ptc-title h1.sc-ptc-title,div.w-5.sc-ptc-title h2.sc-ptc-title,div.w-5.sc-ptc-title h3.sc-ptc-title,div.w-5.sc-ptc-title h4.sc-ptc-title,div.w-5.sc-ptc-title h5.sc-ptc-title,div.w-5.sc-ptc-title h6.sc-ptc-title{font-weight:var(--ptc-font-weight-medium)}div.w-6.sc-ptc-title h1.sc-ptc-title,div.w-6.sc-ptc-title h2.sc-ptc-title,div.w-6.sc-ptc-title h3.sc-ptc-title,div.w-6.sc-ptc-title h4.sc-ptc-title,div.w-6.sc-ptc-title h5.sc-ptc-title,div.w-6.sc-ptc-title h6.sc-ptc-title{font-weight:var(--ptc-font-weight-semibold)}div.w-7.sc-ptc-title h1.sc-ptc-title,div.w-7.sc-ptc-title h2.sc-ptc-title,div.w-7.sc-ptc-title h3.sc-ptc-title,div.w-7.sc-ptc-title h4.sc-ptc-title,div.w-7.sc-ptc-title h5.sc-ptc-title,div.w-7.sc-ptc-title h6.sc-ptc-title{font-weight:var(--ptc-font-weight-bold)}div.w-8.sc-ptc-title h1.sc-ptc-title,div.w-8.sc-ptc-title h2.sc-ptc-title,div.w-8.sc-ptc-title h3.sc-ptc-title,div.w-8.sc-ptc-title h4.sc-ptc-title,div.w-8.sc-ptc-title h5.sc-ptc-title,div.w-8.sc-ptc-title h6.sc-ptc-title{font-weight:var(--ptc-font-weight-extrabold)}div.w-9.sc-ptc-title h1.sc-ptc-title,div.w-9.sc-ptc-title h2.sc-ptc-title,div.w-9.sc-ptc-title h3.sc-ptc-title,div.w-9.sc-ptc-title h4.sc-ptc-title,div.w-9.sc-ptc-title h5.sc-ptc-title,div.w-9.sc-ptc-title h6.sc-ptc-title{font-weight:var(--ptc-font-weight-black)}div.xx-small.sc-ptc-title h1.sc-ptc-title,div.xx-small.sc-ptc-title h2.sc-ptc-title,div.xx-small.sc-ptc-title h3.sc-ptc-title,div.xx-small.sc-ptc-title h4.sc-ptc-title,div.xx-small.sc-ptc-title h5.sc-ptc-title,div.xx-small.sc-ptc-title h6.sc-ptc-title{font-size:var(--ptc-font-size-xx-small)}div.x-small.sc-ptc-title h1.sc-ptc-title,div.x-small.sc-ptc-title h2.sc-ptc-title,div.x-small.sc-ptc-title h3.sc-ptc-title,div.x-small.sc-ptc-title h4.sc-ptc-title,div.x-small.sc-ptc-title h5.sc-ptc-title,div.x-small.sc-ptc-title h6.sc-ptc-title{font-size:var(--ptc-font-size-x-small)}div.small.sc-ptc-title h1.sc-ptc-title,div.small.sc-ptc-title h2.sc-ptc-title,div.small.sc-ptc-title h3.sc-ptc-title,div.small.sc-ptc-title h4.sc-ptc-title,div.small.sc-ptc-title h5.sc-ptc-title,div.small.sc-ptc-title h6.sc-ptc-title{font-size:var(--ptc-font-size-small)}div.medium.sc-ptc-title h1.sc-ptc-title,div.medium.sc-ptc-title h2.sc-ptc-title,div.medium.sc-ptc-title h3.sc-ptc-title,div.medium.sc-ptc-title h4.sc-ptc-title,div.medium.sc-ptc-title h5.sc-ptc-title,div.medium.sc-ptc-title h6.sc-ptc-title{font-size:var(--ptc-font-size-medium)}div.large.sc-ptc-title h1.sc-ptc-title,div.large.sc-ptc-title h2.sc-ptc-title,div.large.sc-ptc-title h3.sc-ptc-title,div.large.sc-ptc-title h4.sc-ptc-title,div.large.sc-ptc-title h5.sc-ptc-title,div.large.sc-ptc-title h6.sc-ptc-title{font-size:var(--ptc-font-size-large)}div.large.sc-ptc-title h3.sc-ptc-title{font-size:var(--ptc-font-size-medium)}@media only screen and (min-width: 768px){div.large.sc-ptc-title h3.sc-ptc-title{font-size:var(--ptc-font-size-large)}}div.x-large.sc-ptc-title h1.sc-ptc-title,div.x-large.sc-ptc-title h2.sc-ptc-title,div.x-large.sc-ptc-title h3.sc-ptc-title,div.x-large.sc-ptc-title h4.sc-ptc-title,div.x-large.sc-ptc-title h5.sc-ptc-title,div.x-large.sc-ptc-title h6.sc-ptc-title{font-size:var(--ptc-font-size-x-large)}div.xx-large.sc-ptc-title h1.sc-ptc-title,div.xx-large.sc-ptc-title h2.sc-ptc-title,div.xx-large.sc-ptc-title h3.sc-ptc-title,div.xx-large.sc-ptc-title h4.sc-ptc-title{font-size:var(--ptc-font-size-x-large)}@media only screen and (min-width: 768px){div.xx-large.sc-ptc-title h1.sc-ptc-title,div.xx-large.sc-ptc-title h2.sc-ptc-title,div.xx-large.sc-ptc-title h3.sc-ptc-title,div.xx-large.sc-ptc-title h4.sc-ptc-title{font-size:var(--ptc-font-size-xx-large)}}div.xxx-large.sc-ptc-title h1.sc-ptc-title,div.xxx-large.sc-ptc-title h2.sc-ptc-title,div.xxx-large.sc-ptc-title h3.sc-ptc-title,div.xxx-large.sc-ptc-title h4.sc-ptc-title,div.xxx-large.sc-ptc-title h5.sc-ptc-title,div.xxx-large.sc-ptc-title h6.sc-ptc-title{font-size:var(--ptc-font-size-xx-large)}@media only screen and (min-width: 768px){div.xxx-large.sc-ptc-title h1.sc-ptc-title,div.xxx-large.sc-ptc-title h2.sc-ptc-title,div.xxx-large.sc-ptc-title h3.sc-ptc-title,div.xxx-large.sc-ptc-title h4.sc-ptc-title,div.xxx-large.sc-ptc-title h5.sc-ptc-title,div.xxx-large.sc-ptc-title h6.sc-ptc-title{font-size:var(--ptc-font-size-xxx-large)}}div.xxxx-large.sc-ptc-title h1.sc-ptc-title,div.xxxx-large.sc-ptc-title h2.sc-ptc-title,div.xxxx-large.sc-ptc-title h3.sc-ptc-title,div.xxxx-large.sc-ptc-title h4.sc-ptc-title,div.xxxx-large.sc-ptc-title h5.sc-ptc-title,div.xxxx-large.sc-ptc-title h6.sc-ptc-title{font-size:var(--ptc-font-size-xxx-large)}@media only screen and (min-width: 768px){div.xxxx-large.sc-ptc-title h1.sc-ptc-title,div.xxxx-large.sc-ptc-title h2.sc-ptc-title,div.xxxx-large.sc-ptc-title h3.sc-ptc-title,div.xxxx-large.sc-ptc-title h4.sc-ptc-title,div.xxxx-large.sc-ptc-title h5.sc-ptc-title,div.xxxx-large.sc-ptc-title h6.sc-ptc-title{font-size:var(--ptc-font-size-xxxx-large)}}div.xx-large-allbp.sc-ptc-title h1.sc-ptc-title,div.xx-large-allbp.sc-ptc-title h2.sc-ptc-title,div.xx-large-allbp.sc-ptc-title h3.sc-ptc-title,div.xx-large-allbp.sc-ptc-title h4.sc-ptc-title,div.xx-large-allbp.sc-ptc-title h5.sc-ptc-title,div.xx-large-allbp.sc-ptc-title h6.sc-ptc-title{font-size:var(--ptc-font-size-xx-large)}div.xxxx-large-allbp.sc-ptc-title h1.sc-ptc-title,div.xxxx-large-allbp.sc-ptc-title h2.sc-ptc-title,div.xxxx-large-allbp.sc-ptc-title h3.sc-ptc-title,div.xxxx-large-allbp.sc-ptc-title h4.sc-ptc-title,div.xxxx-large-allbp.sc-ptc-title h5.sc-ptc-title,div.xxxx-large-allbp.sc-ptc-title h6.sc-ptc-title{font-size:var(--ptc-font-size-xxxx-large)}div.xxxx-large-desktop.sc-ptc-title h1.sc-ptc-title,div.xxxx-large-desktop.sc-ptc-title h2.sc-ptc-title,div.xxxx-large-desktop.sc-ptc-title h3.sc-ptc-title,div.xxxx-large-desktop.sc-ptc-title h4.sc-ptc-title,div.xxxx-large-desktop.sc-ptc-title h5.sc-ptc-title,div.xxxx-large-desktop.sc-ptc-title h6.sc-ptc-title{font-size:var(--ptc-font-size-xxx-large)}@media only screen and (min-width: 992px){div.xxxx-large-desktop.sc-ptc-title h1.sc-ptc-title,div.xxxx-large-desktop.sc-ptc-title h2.sc-ptc-title,div.xxxx-large-desktop.sc-ptc-title h3.sc-ptc-title,div.xxxx-large-desktop.sc-ptc-title h4.sc-ptc-title,div.xxxx-large-desktop.sc-ptc-title h5.sc-ptc-title,div.xxxx-large-desktop.sc-ptc-title h6.sc-ptc-title{font-size:var(--ptc-font-size-xxxx-large)}}div.xxxx-large-store.sc-ptc-title h1.sc-ptc-title,div.xxxx-large-store.sc-ptc-title h2.sc-ptc-title,div.xxxx-large-store.sc-ptc-title h3.sc-ptc-title,div.xxxx-large-store.sc-ptc-title h4.sc-ptc-title,div.xxxx-large-store.sc-ptc-title h5.sc-ptc-title,div.xxxx-large-store.sc-ptc-title h6.sc-ptc-title{font-size:var(--ptc-font-size-xxx-large)}@media only screen and (min-width: 992px){div.xxxx-large-store.sc-ptc-title h1.sc-ptc-title,div.xxxx-large-store.sc-ptc-title h2.sc-ptc-title,div.xxxx-large-store.sc-ptc-title h3.sc-ptc-title,div.xxxx-large-store.sc-ptc-title h4.sc-ptc-title,div.xxxx-large-store.sc-ptc-title h5.sc-ptc-title,div.xxxx-large-store.sc-ptc-title h6.sc-ptc-title{font-size:var(--ptc-font-size-xxxx-large)}}div.densest.sc-ptc-title h1.sc-ptc-title,div.densest.sc-ptc-title h2.sc-ptc-title,div.densest.sc-ptc-title h3.sc-ptc-title,div.densest.sc-ptc-title h4.sc-ptc-title,div.densest.sc-ptc-title h5.sc-ptc-title,div.densest.sc-ptc-title h6.sc-ptc-title{line-height:var(--ptc-line-height-densest)}div.denser.sc-ptc-title h1.sc-ptc-title,div.denser.sc-ptc-title h2.sc-ptc-title,div.denser.sc-ptc-title h3.sc-ptc-title,div.denser.sc-ptc-title h4.sc-ptc-title,div.denser.sc-ptc-title h5.sc-ptc-title,div.denser.sc-ptc-title h6.sc-ptc-title{line-height:var(--ptc-line-height-denser)}div.dense.sc-ptc-title h1.sc-ptc-title,div.dense.sc-ptc-title h2.sc-ptc-title,div.dense.sc-ptc-title h3.sc-ptc-title,div.dense.sc-ptc-title h4.sc-ptc-title,div.dense.sc-ptc-title h5.sc-ptc-title,div.dense.sc-ptc-title h6.sc-ptc-title{line-height:var(--ptc-line-height-dense)}div.normal.sc-ptc-title h1.sc-ptc-title,div.normal.sc-ptc-title h2.sc-ptc-title,div.normal.sc-ptc-title h3.sc-ptc-title,div.normal.sc-ptc-title h4.sc-ptc-title,div.normal.sc-ptc-title h5.sc-ptc-title,div.normal.sc-ptc-title h6.sc-ptc-title{line-height:var(--ptc-line-height-normal)}div.loose.sc-ptc-title h1.sc-ptc-title,div.loose.sc-ptc-title h2.sc-ptc-title,div.loose.sc-ptc-title h3.sc-ptc-title,div.loose.sc-ptc-title h4.sc-ptc-title,div.loose.sc-ptc-title h5.sc-ptc-title,div.loose.sc-ptc-title h6.sc-ptc-title{line-height:var(--ptc-line-height-loose)}div.looser.sc-ptc-title h1.sc-ptc-title,div.looser.sc-ptc-title h2.sc-ptc-title,div.looser.sc-ptc-title h3.sc-ptc-title,div.looser.sc-ptc-title h4.sc-ptc-title,div.looser.sc-ptc-title h5.sc-ptc-title,div.looser.sc-ptc-title h6.sc-ptc-title{line-height:var(--ptc-line-height-looser)}div.paragraph.sc-ptc-title h1.sc-ptc-title,div.paragraph.sc-ptc-title h2.sc-ptc-title,div.paragraph.sc-ptc-title h3.sc-ptc-title,div.paragraph.sc-ptc-title h4.sc-ptc-title,div.paragraph.sc-ptc-title h5.sc-ptc-title,div.paragraph.sc-ptc-title h6.sc-ptc-title{line-height:var(--ptc-line-height-paragraph)}div.black.sc-ptc-title h1.sc-ptc-title,div.black.sc-ptc-title h2.sc-ptc-title,div.black.sc-ptc-title h3.sc-ptc-title,div.black.sc-ptc-title h4.sc-ptc-title,div.black.sc-ptc-title h5.sc-ptc-title,div.black.sc-ptc-title h6.sc-ptc-title{color:var(--color-black)}div.white.sc-ptc-title h1.sc-ptc-title,div.white.sc-ptc-title h2.sc-ptc-title,div.white.sc-ptc-title h3.sc-ptc-title,div.white.sc-ptc-title h4.sc-ptc-title,div.white.sc-ptc-title h5.sc-ptc-title,div.white.sc-ptc-title h6.sc-ptc-title{color:var(--color-white)}div.gray-1.sc-ptc-title h1.sc-ptc-title,div.gray-1.sc-ptc-title h2.sc-ptc-title,div.gray-1.sc-ptc-title h3.sc-ptc-title,div.gray-1.sc-ptc-title h4.sc-ptc-title,div.gray-1.sc-ptc-title h5.sc-ptc-title,div.gray-1.sc-ptc-title h6.sc-ptc-title{color:var(--color-gray-01)}div.gray.sc-ptc-title h1.sc-ptc-title,div.gray.sc-ptc-title h2.sc-ptc-title,div.gray.sc-ptc-title h3.sc-ptc-title,div.gray.sc-ptc-title h4.sc-ptc-title,div.gray.sc-ptc-title h5.sc-ptc-title,div.gray.sc-ptc-title h6.sc-ptc-title{color:var(--color-gray-10)}div.gray-darker.sc-ptc-title h1.sc-ptc-title,div.gray-darker.sc-ptc-title h2.sc-ptc-title,div.gray-darker.sc-ptc-title h3.sc-ptc-title,div.gray-darker.sc-ptc-title h4.sc-ptc-title,div.gray-darker.sc-ptc-title h5.sc-ptc-title,div.gray-darker.sc-ptc-title h6.sc-ptc-title{color:var(--color-gray-11)}div.ellipsis-boxing.sc-ptc-title h1.sc-ptc-title,div.ellipsis-boxing.sc-ptc-title h2.sc-ptc-title,div.ellipsis-boxing.sc-ptc-title h3.sc-ptc-title,div.ellipsis-boxing.sc-ptc-title h4.sc-ptc-title,div.ellipsis-boxing.sc-ptc-title h5.sc-ptc-title,div.ellipsis-boxing.sc-ptc-title h6.sc-ptc-title{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;overflow-wrap:break-word;padding-bottom:0}div.block.sc-ptc-title h1.sc-ptc-title,div.block.sc-ptc-title h2.sc-ptc-title,div.block.sc-ptc-title h3.sc-ptc-title,div.block.sc-ptc-title h4.sc-ptc-title,div.block.sc-ptc-title h5.sc-ptc-title,div.block.sc-ptc-title h6.sc-ptc-title{display:block}.line-clamp-title.sc-ptc-title{display:-webkit-box !important;-webkit-box-orient:vertical;overflow:hidden}.sc-ptc-title-h{display:block}.sc-ptc-title-h div.sc-ptc-title{position:relative}";
|
|
9
|
+
|
|
10
|
+
const PtcTitle = class {
|
|
11
|
+
constructor(hostRef) {
|
|
12
|
+
index.registerInstance(this, hostRef);
|
|
13
|
+
this.isPlmHub = false;
|
|
14
|
+
this.type = 'h2';
|
|
15
|
+
this.textAlign = undefined;
|
|
16
|
+
this.upperline = 'dotted';
|
|
17
|
+
this.titleShadow = undefined;
|
|
18
|
+
this.titleColor = 'gray';
|
|
19
|
+
this.titleMargin = undefined;
|
|
20
|
+
this.titleWeight = undefined;
|
|
21
|
+
this.titleSize = undefined;
|
|
22
|
+
this.titleHeight = 'densest';
|
|
23
|
+
this.styles = undefined;
|
|
24
|
+
this.ellipsisLineCutoff = undefined;
|
|
25
|
+
this.titleDisplay = 'inline-block';
|
|
26
|
+
this.seoCompatibilityMode = false;
|
|
27
|
+
this.tooltipZIndex = 'auto';
|
|
28
|
+
this.tooltipPosition = 'bottom';
|
|
29
|
+
this.tooltipTheme = 'standard';
|
|
30
|
+
this.enableTooltip = false;
|
|
31
|
+
this.maxChars = undefined;
|
|
32
|
+
this.maxLines = undefined;
|
|
33
|
+
this.hideTooltipOnMobile = false;
|
|
34
|
+
this.ismob = undefined;
|
|
35
|
+
this.tooltipWidth = 'default';
|
|
36
|
+
}
|
|
37
|
+
// Tooltip Properties ends
|
|
38
|
+
componentDidLoad() {
|
|
39
|
+
if (this.hideTooltipOnMobile) {
|
|
40
|
+
this.el.classList.add('hide-tooltip-on-mobile');
|
|
41
|
+
}
|
|
42
|
+
this.el.addEventListener('mouseenter', () => this.toggleTitleTooltip(true));
|
|
43
|
+
this.el.addEventListener('mouseleave', () => this.toggleTitleTooltip(false));
|
|
44
|
+
}
|
|
45
|
+
render() {
|
|
46
|
+
if (this.seoCompatibilityMode) {
|
|
47
|
+
return this.seoCompRender();
|
|
48
|
+
}
|
|
49
|
+
else {
|
|
50
|
+
return this.standardRender();
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
getSortedText(content) {
|
|
54
|
+
if (!this.enableTooltip)
|
|
55
|
+
return;
|
|
56
|
+
const trimmedContent = content.trim();
|
|
57
|
+
const shouldTruncate = (trimmedContent.length > this.maxChars) && !this.maxLines;
|
|
58
|
+
return shouldTruncate ? trimmedContent.slice(0, this.maxChars) + '...' : trimmedContent;
|
|
59
|
+
}
|
|
60
|
+
toggleTitleTooltip(show) {
|
|
61
|
+
var _a;
|
|
62
|
+
const tooltipClass = 'tooltip-box';
|
|
63
|
+
const existingTooltip = this.el.querySelector(`.${tooltipClass}`);
|
|
64
|
+
const text = this.el.querySelectorAll('.line-clamp-title');
|
|
65
|
+
let maxLinesShowCheck = false;
|
|
66
|
+
if (text) {
|
|
67
|
+
text.forEach(t => {
|
|
68
|
+
maxLinesShowCheck = t.scrollHeight > t.clientHeight;
|
|
69
|
+
});
|
|
70
|
+
}
|
|
71
|
+
const ifCharExceeds = this.tooltipText && (this.tooltipText.length > this.maxChars) && !this.maxLines;
|
|
72
|
+
const ifLinesExceeds = this.maxLines && maxLinesShowCheck;
|
|
73
|
+
if (show && this.enableTooltip) {
|
|
74
|
+
if ((!existingTooltip && ifCharExceeds) || (!existingTooltip && ifLinesExceeds)) {
|
|
75
|
+
const tooltipMarkup = document.createElement('div');
|
|
76
|
+
tooltipMarkup.className = tooltipClass;
|
|
77
|
+
tooltipMarkup.innerText = this.tooltipText;
|
|
78
|
+
tooltipMarkup.style.zIndex = String(this.tooltipZIndex); // Ensures zIndex is a string
|
|
79
|
+
tooltipMarkup.classList.add(this.tooltipPosition, this.tooltipTheme, this.tooltipWidth);
|
|
80
|
+
if (this.hideTooltipOnMobile) {
|
|
81
|
+
tooltipMarkup.classList.add('hide-tooltip-mobile');
|
|
82
|
+
}
|
|
83
|
+
(_a = this.el.querySelector('div')) === null || _a === void 0 ? void 0 : _a.appendChild(tooltipMarkup);
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
else {
|
|
87
|
+
existingTooltip === null || existingTooltip === void 0 ? void 0 : existingTooltip.remove();
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
seoCompRender() {
|
|
91
|
+
const classMap = this.getCssClassMap();
|
|
92
|
+
const cutOff = this.getLineCuttoff();
|
|
93
|
+
const [TagType, firstChild] = utils.getSeoTagType(this.el, this.type);
|
|
94
|
+
let html = firstChild && firstChild.innerHTML;
|
|
95
|
+
// added for tooltip
|
|
96
|
+
this.tooltipText = html.trim();
|
|
97
|
+
let eleText = firstChild && firstChild.innerText;
|
|
98
|
+
html = (this.enableTooltip) ? this.getSortedText(eleText) : html;
|
|
99
|
+
if (this.el == firstChild) {
|
|
100
|
+
this.el.innerHTML = '';
|
|
101
|
+
}
|
|
102
|
+
return (index.h(index.Host, null, this.styles && index.h("style", null, this.styles), index.h("div", { class: classMap }, index.h(TagType, { innerHTML: html, style: cutOff, class: this.maxLines && this.maxLines > 0 ? 'line-clamp-title' : '' }))));
|
|
103
|
+
}
|
|
104
|
+
standardRender() {
|
|
105
|
+
const classMap = this.getCssClassMap();
|
|
106
|
+
const cutOff = this.getLineCuttoff();
|
|
107
|
+
let TagType;
|
|
108
|
+
switch (this.type) {
|
|
109
|
+
case 'h1':
|
|
110
|
+
TagType = 'h1';
|
|
111
|
+
break;
|
|
112
|
+
case 'h3':
|
|
113
|
+
TagType = 'h3';
|
|
114
|
+
break;
|
|
115
|
+
case 'h4':
|
|
116
|
+
TagType = 'h4';
|
|
117
|
+
break;
|
|
118
|
+
case 'h5':
|
|
119
|
+
TagType = 'h5';
|
|
120
|
+
break;
|
|
121
|
+
case 'h6':
|
|
122
|
+
TagType = 'h6';
|
|
123
|
+
break;
|
|
124
|
+
default:
|
|
125
|
+
TagType = 'h2';
|
|
126
|
+
}
|
|
127
|
+
return (index.h(index.Host, null, this.styles && index.h("style", null, this.styles), index.h("div", { class: classMap }, index.h(TagType, { style: cutOff }, index.h("slot", null)))));
|
|
128
|
+
}
|
|
129
|
+
getCssClassMap() {
|
|
130
|
+
return {
|
|
131
|
+
[this.textAlign]: !!this.textAlign ? true : false,
|
|
132
|
+
[this.upperline]: true,
|
|
133
|
+
[this.isPlmHub ? 'is-plm-hub' : 'is-standard']: true,
|
|
134
|
+
[this.titleMargin]: !!this.titleMargin ? true : false,
|
|
135
|
+
[this.titleShadow]: !!this.titleShadow ? true : false,
|
|
136
|
+
[this.titleWeight]: !!this.titleWeight ? true : false,
|
|
137
|
+
[this.titleSize]: !!this.titleSize ? true : false,
|
|
138
|
+
[this.titleHeight]: !!this.titleHeight ? true : false,
|
|
139
|
+
[this.titleColor]: !!this.titleColor ? true : false,
|
|
140
|
+
['ellipsis-boxing']: this.ellipsisLineCutoff && this.ellipsisLineCutoff > 0,
|
|
141
|
+
[this.titleDisplay]: !!this.titleDisplay ? true : false,
|
|
142
|
+
};
|
|
143
|
+
}
|
|
144
|
+
getLineCuttoff() {
|
|
145
|
+
const lineClamp = this.ellipsisLineCutoff > 0 ? this.ellipsisLineCutoff : this.maxLines;
|
|
146
|
+
return lineClamp > 0 ? { '-webkit-line-clamp': `${lineClamp}` } : {};
|
|
147
|
+
}
|
|
148
|
+
get el() { return index.getElement(this); }
|
|
149
|
+
};
|
|
150
|
+
PtcTitle.style = ptcTitleCss;
|
|
151
|
+
|
|
152
|
+
exports.ptc_title = PtcTitle;
|