@ptcwebops/ptcw-design 1.3.3 → 1.3.4
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/bundle-jumbotron-example_16.cjs.entry.js +1159 -0
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/ptc-card-content.cjs.entry.js +68 -0
- package/dist/cjs/ptc-card.cjs.entry.js +1 -1
- package/dist/cjs/ptc-dynamic-card.cjs.entry.js +58 -0
- package/dist/cjs/ptc-nav-card.cjs.entry.js +1 -1
- package/dist/cjs/ptc-overlay.cjs.entry.js +34 -0
- package/dist/cjs/ptc-search-field.cjs.entry.js +1 -1
- package/dist/cjs/ptcw-design.cjs.js +1 -1
- package/dist/cjs/sequential-bundle-example.cjs.entry.js +112 -0
- package/dist/collection/components/organism-bundles/bundle-jumbotron-example/bundle-jumbotron-example.js +3 -2
- package/dist/collection/components/ptc-background-video/ptc-background-video.css +23 -0
- package/dist/collection/components/ptc-background-video/ptc-background-video.js +13 -7
- package/dist/collection/components/ptc-card/ptc-card.css +1 -1
- package/dist/collection/components/ptc-nav-card/ptc-nav-card.css +1 -1
- package/dist/collection/components/ptc-search-field/ptc-search-field.css +0 -1
- package/dist/collection/components/ptc-title/ptc-title.css +3 -0
- package/dist/collection/components/ptc-title/ptc-title.js +2 -2
- package/dist/custom-elements/index.js +20 -13
- package/dist/esm/bundle-example.entry.js +1 -1
- package/dist/esm/bundle-jumbotron-example_16.entry.js +1140 -0
- package/dist/esm/dropdown-item.entry.js +1 -1
- package/dist/esm/dynamic-box-bundle.entry.js +1 -1
- package/dist/esm/{index-4afc9d28.js → index-8e63c32d.js} +1 -1
- package/dist/esm/loader.js +3 -3
- package/dist/esm/lottie-player.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-accordion.entry.js +1 -1
- package/dist/esm/ptc-announcement.entry.js +1 -1
- package/dist/esm/ptc-bio-card.entry.js +1 -1
- package/dist/esm/ptc-card-bottom_3.entry.js +1 -1
- package/dist/esm/ptc-card-content.entry.js +64 -0
- package/dist/esm/ptc-card.entry.js +2 -2
- package/dist/esm/ptc-checkbox.entry.js +1 -1
- package/dist/esm/ptc-collapse-list.entry.js +1 -1
- package/dist/esm/ptc-container.entry.js +1 -1
- package/dist/esm/ptc-date.entry.js +1 -1
- package/dist/esm/ptc-dropdown.entry.js +1 -1
- package/dist/esm/ptc-dynamic-card.entry.js +54 -0
- package/dist/esm/ptc-ellipsis-dropdown.entry.js +1 -1
- package/dist/esm/ptc-filter-tag.entry.js +1 -1
- package/dist/esm/ptc-hero-footer-cta.entry.js +1 -1
- package/dist/esm/ptc-hero.entry.js +1 -1
- package/dist/esm/ptc-icon-list.entry.js +1 -1
- package/dist/esm/ptc-icon-minimize.entry.js +1 -1
- package/dist/esm/ptc-link.entry.js +1 -1
- package/dist/esm/ptc-list.entry.js +1 -1
- package/dist/esm/ptc-lottie.entry.js +1 -1
- package/dist/esm/ptc-media-card.entry.js +1 -1
- package/dist/esm/ptc-minimized-footer.entry.js +1 -1
- package/dist/esm/ptc-minimized-header.entry.js +1 -1
- package/dist/esm/ptc-mobile-select.entry.js +1 -1
- package/dist/esm/ptc-nav-card.entry.js +2 -2
- package/dist/esm/ptc-nav-link.entry.js +1 -1
- package/dist/esm/ptc-nav-slider.entry.js +1 -1
- package/dist/esm/ptc-nav-submenu.entry.js +1 -1
- package/dist/esm/ptc-overlay.entry.js +30 -0
- package/dist/esm/ptc-pagenation.entry.js +1 -1
- package/dist/esm/ptc-previous-url.entry.js +1 -1
- package/dist/esm/ptc-pricing-block.entry.js +1 -1
- package/dist/esm/ptc-pricing-tabs.entry.js +1 -1
- package/dist/esm/ptc-quote.entry.js +1 -1
- package/dist/esm/ptc-readmore.entry.js +1 -1
- package/dist/esm/ptc-responsive-wrapper.entry.js +1 -1
- package/dist/esm/ptc-search-field.entry.js +2 -2
- package/dist/esm/ptc-shopping-cart.entry.js +1 -1
- package/dist/esm/ptc-social-share.entry.js +1 -1
- package/dist/esm/ptc-span.entry.js +1 -1
- package/dist/esm/ptc-sticky-icons.entry.js +1 -1
- package/dist/esm/ptc-sticky-section.entry.js +1 -1
- package/dist/esm/ptc-subnav-card.entry.js +1 -1
- package/dist/esm/ptc-subnav.entry.js +1 -1
- package/dist/esm/ptc-tab-list.entry.js +1 -1
- package/dist/esm/ptc-tab.entry.js +1 -1
- package/dist/esm/ptc-tabs.entry.js +1 -1
- package/dist/esm/ptc-text-copy-with-background.entry.js +1 -1
- package/dist/esm/ptc-two-column-media.entry.js +1 -1
- package/dist/esm/ptcw-design.js +3 -3
- package/dist/esm/sequential-bundle-example.entry.js +108 -0
- package/dist/esm/sequential-bundle.entry.js +1 -1
- package/dist/esm/tab-content.entry.js +1 -1
- package/dist/esm/tab-header.entry.js +1 -1
- package/dist/ptcw-design/{p-3bc3c801.entry.js → p-00c9ae79.entry.js} +1 -1
- package/dist/ptcw-design/{p-c5975914.entry.js → p-0f8784e9.entry.js} +1 -1
- package/dist/ptcw-design/{p-94c33d5d.entry.js → p-1199de26.entry.js} +1 -1
- package/dist/ptcw-design/{p-c326164f.entry.js → p-12780f09.entry.js} +1 -1
- package/dist/ptcw-design/{p-dc109608.entry.js → p-13a1d14b.entry.js} +1 -1
- package/dist/ptcw-design/{p-4bbebfce.entry.js → p-190a7c24.entry.js} +1 -1
- package/dist/ptcw-design/{p-255ab790.entry.js → p-20787719.entry.js} +1 -1
- package/dist/ptcw-design/{p-9805a542.entry.js → p-2181c8c7.entry.js} +1 -1
- package/dist/ptcw-design/{p-fbf6f66c.entry.js → p-2318d652.entry.js} +1 -1
- package/dist/ptcw-design/{p-4947eb0a.entry.js → p-250b3ea1.entry.js} +1 -1
- package/dist/ptcw-design/p-2a82b4f4.entry.js +1 -0
- package/dist/ptcw-design/{p-c0b1c34c.entry.js → p-2ae39c65.entry.js} +1 -1
- package/dist/ptcw-design/p-2d111396.entry.js +1 -0
- package/dist/ptcw-design/{p-e0a8242e.entry.js → p-32efd536.entry.js} +1 -1
- package/dist/ptcw-design/{p-10555016.entry.js → p-366528df.entry.js} +1 -1
- package/dist/ptcw-design/{p-42424ba0.entry.js → p-3bb54c51.entry.js} +1 -1
- package/dist/ptcw-design/{p-08f40716.entry.js → p-462567d1.entry.js} +1 -1
- package/dist/ptcw-design/p-46afd828.entry.js +1 -0
- package/dist/ptcw-design/{p-00b2c937.entry.js → p-4983e571.entry.js} +1 -1
- package/dist/ptcw-design/p-4c0a350d.entry.js +1 -0
- package/dist/ptcw-design/{p-3f2b9cad.entry.js → p-4f540f7c.entry.js} +1 -1
- package/dist/ptcw-design/{p-b73ea53a.entry.js → p-55d298f5.entry.js} +1 -1
- package/dist/ptcw-design/{p-c83efab5.entry.js → p-574680c3.entry.js} +1 -1
- package/dist/ptcw-design/{p-deed8ef6.entry.js → p-59058faa.entry.js} +1 -1
- package/dist/ptcw-design/{p-d7e11aad.entry.js → p-5e08dc82.entry.js} +1 -1
- package/dist/ptcw-design/{p-9dd25c18.js → p-63c06667.js} +1 -1
- package/dist/ptcw-design/{p-4132db6b.entry.js → p-6872e11b.entry.js} +1 -1
- package/dist/ptcw-design/{p-91db9d8a.entry.js → p-6e8222ce.entry.js} +1 -1
- package/dist/ptcw-design/p-718d6ae8.entry.js +1 -0
- package/dist/ptcw-design/{p-07059441.entry.js → p-8030db10.entry.js} +1 -1
- package/dist/ptcw-design/{p-6acd380a.entry.js → p-8a1c2577.entry.js} +1 -1
- package/dist/ptcw-design/{p-a76bf4d6.entry.js → p-8a6acf0d.entry.js} +1 -1
- package/dist/ptcw-design/{p-09a6b0a7.entry.js → p-8c6b069b.entry.js} +1 -1
- package/dist/ptcw-design/{p-51ee36a7.entry.js → p-938f3078.entry.js} +1 -1
- package/dist/ptcw-design/{p-bec9b5bf.entry.js → p-98b11018.entry.js} +1 -1
- package/dist/ptcw-design/{p-c17514f5.entry.js → p-9cb33f7d.entry.js} +1 -1
- package/dist/ptcw-design/{p-c9342bd2.entry.js → p-a24ecd75.entry.js} +1 -1
- package/dist/ptcw-design/{p-b5064c43.entry.js → p-a7b20fe7.entry.js} +1 -1
- package/dist/ptcw-design/{p-f4ce7f16.entry.js → p-a9eaabae.entry.js} +1 -1
- package/dist/ptcw-design/{p-e60eb5aa.entry.js → p-ac872890.entry.js} +1 -1
- package/dist/ptcw-design/p-af3d5be7.entry.js +1 -0
- package/dist/ptcw-design/{p-b2d0228f.entry.js → p-af975d78.entry.js} +1 -1
- package/dist/ptcw-design/{p-2ac4eb02.entry.js → p-b922e3a5.entry.js} +1 -1
- package/dist/ptcw-design/{p-9bbfeec6.entry.js → p-c3b7c168.entry.js} +1 -1
- package/dist/ptcw-design/{p-e282af3d.entry.js → p-c7bd4d99.entry.js} +1 -1
- package/dist/ptcw-design/{p-3f88508e.entry.js → p-ca6d7814.entry.js} +1 -1
- package/dist/ptcw-design/{p-c1d75020.entry.js → p-cd6b8c27.entry.js} +1 -1
- package/dist/ptcw-design/{p-372a6bb1.entry.js → p-cdff68d4.entry.js} +1 -1
- package/dist/ptcw-design/{p-6ab6a1e2.entry.js → p-d43ff8d4.entry.js} +1 -1
- package/dist/ptcw-design/{p-08f17ab6.entry.js → p-d49d8875.entry.js} +1 -1
- package/dist/ptcw-design/{p-048f4b08.entry.js → p-d716bd70.entry.js} +1 -1
- package/dist/ptcw-design/{p-6a0b0d0e.entry.js → p-d7d6eff1.entry.js} +1 -1
- package/dist/ptcw-design/{p-cff0b2b0.entry.js → p-dd6501a8.entry.js} +1 -1
- package/dist/ptcw-design/p-de90a288.entry.js +1 -0
- package/dist/ptcw-design/{p-cb7b03fb.entry.js → p-ea19d8f6.entry.js} +1 -1
- package/dist/ptcw-design/{p-1a6d9c21.entry.js → p-ed0c7f10.entry.js} +1 -1
- package/dist/ptcw-design/{p-effa1f41.entry.js → p-eed3687b.entry.js} +1 -1
- package/dist/ptcw-design/{p-384d24fd.entry.js → p-f24c57cf.entry.js} +1 -1
- package/dist/ptcw-design/{p-4a1d0d07.entry.js → p-f4923de6.entry.js} +1 -1
- package/dist/ptcw-design/{p-588eb1d3.entry.js → p-f958e8c7.entry.js} +1 -1
- package/dist/ptcw-design/{p-77d3b816.entry.js → p-fa58bf5f.entry.js} +1 -1
- package/dist/ptcw-design/p-fe1ff7d2.entry.js +1 -0
- package/dist/ptcw-design/ptcw-design.esm.js +1 -1
- package/dist/types/components/ptc-background-video/ptc-background-video.d.ts +10 -9
- package/dist/types/components/ptc-title/ptc-title.d.ts +1 -1
- package/dist/types/components.d.ts +4 -4
- package/package.json +1 -1
- package/readme.md +1 -1
- package/dist/cjs/bundle-jumbotron-example.cjs.entry.js +0 -46
- package/dist/cjs/icon-asset.cjs.entry.js +0 -53
- package/dist/cjs/interfaces-0ecd8027.js +0 -15
- package/dist/cjs/list-item.cjs.entry.js +0 -33
- package/dist/cjs/max-width-container_6.cjs.entry.js +0 -532
- package/dist/cjs/ptc-breadcrumb_2.cjs.entry.js +0 -142
- package/dist/cjs/ptc-button_8.cjs.entry.js +0 -528
- package/dist/cjs/ptc-tooltip.cjs.entry.js +0 -93
- package/dist/esm/bundle-jumbotron-example.entry.js +0 -42
- package/dist/esm/icon-asset.entry.js +0 -49
- package/dist/esm/interfaces-c1c73092.js +0 -12
- package/dist/esm/list-item.entry.js +0 -29
- package/dist/esm/max-width-container_6.entry.js +0 -523
- package/dist/esm/ptc-breadcrumb_2.entry.js +0 -137
- package/dist/esm/ptc-button_8.entry.js +0 -517
- package/dist/esm/ptc-tooltip.entry.js +0 -89
- package/dist/ptcw-design/p-0eeebc10.entry.js +0 -1
- package/dist/ptcw-design/p-36a3f48e.entry.js +0 -1
- package/dist/ptcw-design/p-380b3ef3.entry.js +0 -1
- package/dist/ptcw-design/p-50e52c88.js +0 -1
- package/dist/ptcw-design/p-54f905b1.entry.js +0 -1
- package/dist/ptcw-design/p-7650e042.entry.js +0 -1
- package/dist/ptcw-design/p-8c37ee88.entry.js +0 -1
- package/dist/ptcw-design/p-91dc58c5.entry.js +0 -1
- package/dist/ptcw-design/p-d91ff88e.entry.js +0 -1
- package/dist/ptcw-design/p-e19dbf90.entry.js +0 -1
- package/dist/ptcw-design/p-f64bcaea.entry.js +0 -1
|
@@ -1,532 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
const index = require('./index-88135a6b.js');
|
|
6
|
-
const interfaces = require('./interfaces-0ecd8027.js');
|
|
7
|
-
|
|
8
|
-
const maxWidthContainerCss = ":host{display:block}:host(.left){margin:auto auto auto 0}:host(.right){margin:auto 0 auto auto}:host(.center){margin:0 auto}";
|
|
9
|
-
|
|
10
|
-
const MaxWidthContainer = class {
|
|
11
|
-
constructor(hostRef) {
|
|
12
|
-
index.registerInstance(this, hostRef);
|
|
13
|
-
this.maxWidth = undefined;
|
|
14
|
-
this.breakpoint = 768;
|
|
15
|
-
this.contentAlign = 'center';
|
|
16
|
-
}
|
|
17
|
-
componentDidLoad() {
|
|
18
|
-
this.handleResize();
|
|
19
|
-
window.addEventListener('resize', this.handleResize.bind(this));
|
|
20
|
-
}
|
|
21
|
-
disconnectedCallback() {
|
|
22
|
-
window.removeEventListener('resize', this.handleResize);
|
|
23
|
-
}
|
|
24
|
-
render() {
|
|
25
|
-
const classMap = this.getCssClassMap();
|
|
26
|
-
return (index.h(index.Host, { class: classMap }, index.h("slot", null)));
|
|
27
|
-
}
|
|
28
|
-
getCssClassMap() {
|
|
29
|
-
return {
|
|
30
|
-
[this.contentAlign]: true,
|
|
31
|
-
};
|
|
32
|
-
}
|
|
33
|
-
handleResize() {
|
|
34
|
-
// const selectedContainer = this.el.querySelector('.max-width-container');
|
|
35
|
-
if (this.el) {
|
|
36
|
-
if (window.innerWidth >= this.breakpoint) {
|
|
37
|
-
this.el.style.maxWidth = `${this.maxWidth}px`;
|
|
38
|
-
}
|
|
39
|
-
else {
|
|
40
|
-
this.el.style.maxWidth = 'initial';
|
|
41
|
-
}
|
|
42
|
-
}
|
|
43
|
-
}
|
|
44
|
-
get el() { return index.getElement(this); }
|
|
45
|
-
};
|
|
46
|
-
MaxWidthContainer.style = maxWidthContainerCss;
|
|
47
|
-
|
|
48
|
-
const ptcBackgroundVideoCss = ":host{display:block;position:relative}:host video{position:absolute;top:0px;left:0px;right:0;width:100%;height:100%;overflow:hidden;pointer-events:none;z-index:-100;object-fit:cover}:host .video-overlay{z-index:1;display:block;position:absolute;width:100%;height:100%;top:0;left:0;opacity:0.8;background-image:linear-gradient(270deg, rgba(30, 38, 38, 0) 26%, #1e2626)}:host(.legacy){display:block;position:absolute;top:0px;left:0px;right:0;width:100%;height:100%;overflow:hidden;pointer-events:none;z-index:-100}:host(.legacy) video{object-fit:cover;position:absolute;top:0px;left:0px;right:0;width:100%;height:100%;overflow:hidden}";
|
|
49
|
-
|
|
50
|
-
const PtcBackgroundVideo = class {
|
|
51
|
-
constructor(hostRef) {
|
|
52
|
-
index.registerInstance(this, hostRef);
|
|
53
|
-
this.videoSrc = undefined;
|
|
54
|
-
this.posterSrc = undefined;
|
|
55
|
-
this.overlay = true;
|
|
56
|
-
this.type = 'default';
|
|
57
|
-
this.isIframe = false;
|
|
58
|
-
}
|
|
59
|
-
render() {
|
|
60
|
-
const videoConten = this.isIframe ? (index.h("iframe", { src: this.videoSrc, frameborder: 0, width: "100%", allow: "autoplay; fullscreen; picture-in-picture", class: "elementor-background-video-embed" })) : (index.h("video", { src: this.videoSrc, poster: this.posterSrc, autoplay: true, loop: true, muted: true, playsinline: true }));
|
|
61
|
-
return (index.h(index.Host, { class: this.type }, videoConten, this.overlay
|
|
62
|
-
? index.h("div", { class: "video-overlay" })
|
|
63
|
-
: "", this.type == 'default'
|
|
64
|
-
? index.h("slot", null)
|
|
65
|
-
: ""));
|
|
66
|
-
}
|
|
67
|
-
};
|
|
68
|
-
PtcBackgroundVideo.style = ptcBackgroundVideoCss;
|
|
69
|
-
|
|
70
|
-
const ptcImgCss = ".smart-bg{width:100%;height:100%;background-size:cover;background-repeat:no-repeat;background-position:50% 50%}.smart-img{position:absolute;display:block;width:100%;height:100%;top:0;left:0;background-size:cover;background-repeat:no-repeat;background-position:50% 50%}.radius-standard{border-radius:var(--ptc-border-radius-standard)}.radius-large{border-radius:var(--ptc-border-radius-large)}.lazy-bg{background-image:none !important;background-color:var(--color-gray-03)}@media only screen and (min-width: 768px){.hidden-xs{display:none !important}}@media (min-width: 768px) and (max-width: 991px){.hidden-sm{display:none !important}}@media (min-width: 992px) and (max-width: 1199px){.hidden-md{display:none !important}}@media only screen and (min-width: 768px){.hidden-lg{display:none !important}}";
|
|
71
|
-
|
|
72
|
-
const PtcImg = class {
|
|
73
|
-
constructor(hostRef) {
|
|
74
|
-
index.registerInstance(this, hostRef);
|
|
75
|
-
this.sizeXs = '510x340';
|
|
76
|
-
this.sizeSm = '1240x496';
|
|
77
|
-
this.sizeMd = '1366x500';
|
|
78
|
-
this.sizeLg = '1920x1080';
|
|
79
|
-
this.imgUrl = undefined;
|
|
80
|
-
this.imageType = 'smart-bg';
|
|
81
|
-
this.borderRadius = '';
|
|
82
|
-
this.loadMode = 'lazy-bg';
|
|
83
|
-
}
|
|
84
|
-
/**
|
|
85
|
-
* Image Z Index
|
|
86
|
-
*/
|
|
87
|
-
// @Prop() imageZIndex: 'z-index-auto' | 'z-index-n-2' | 'z-index-n-1' | 'z-index-p-1' | 'z-index-p-2' = 'z-index-auto';
|
|
88
|
-
WindowResize() {
|
|
89
|
-
this.setResponsiveBg();
|
|
90
|
-
}
|
|
91
|
-
render() {
|
|
92
|
-
const classMap = this.getCssClassMap();
|
|
93
|
-
return (index.h(index.Host, null, index.h("div", { class: classMap, "data-xs": `${this.imgUrl}:${this.sizeXs}`, "data-sm": `${this.imgUrl}:${this.sizeSm}`, "data-md": `${this.imgUrl}:${this.sizeMd}`, "data-lg": `${this.imgUrl}:${this.sizeLg}` }, this.imageType == 'smart-bg' ? index.h("slot", null) : null)));
|
|
94
|
-
}
|
|
95
|
-
componentDidLoad() {
|
|
96
|
-
this.addIntersectionObserver();
|
|
97
|
-
this.setResponsiveBg();
|
|
98
|
-
}
|
|
99
|
-
componentWillUpdate() {
|
|
100
|
-
this.addIntersectionObserver();
|
|
101
|
-
this.setResponsiveBg();
|
|
102
|
-
}
|
|
103
|
-
//responsive image
|
|
104
|
-
setResponsiveBg() {
|
|
105
|
-
// Define local variables
|
|
106
|
-
let backgrounds = (this.el || document).querySelectorAll(interfaces.ResponsiveBgVariables.selector), el, elData, currentBreakpoint = this.getCurrentBreakPoints();
|
|
107
|
-
// Loop through all target elements
|
|
108
|
-
for (var i = 0, len = backgrounds.length; i < len; i++) {
|
|
109
|
-
// Set current variables
|
|
110
|
-
el = backgrounds[i];
|
|
111
|
-
elData = el.getAttribute('data-' + currentBreakpoint);
|
|
112
|
-
// If the data attribute exists, set the background
|
|
113
|
-
if (elData !== null) {
|
|
114
|
-
el.style.backgroundImage = "url('" + elData + "')";
|
|
115
|
-
}
|
|
116
|
-
else {
|
|
117
|
-
if (typeof console == 'object') {
|
|
118
|
-
console.warn('Data attribute: data-' + currentBreakpoint + ' not found on element:\n\n' + el.outerHTML + '\n\n\n');
|
|
119
|
-
}
|
|
120
|
-
}
|
|
121
|
-
}
|
|
122
|
-
}
|
|
123
|
-
//lazy loading
|
|
124
|
-
addIntersectionObserver() {
|
|
125
|
-
if (!this.imgUrl) {
|
|
126
|
-
console.log('no image!');
|
|
127
|
-
return;
|
|
128
|
-
}
|
|
129
|
-
if ('IntersectionObserver' in window) {
|
|
130
|
-
let lazyLoadBgs = (this.el || document).querySelectorAll('.lazy-bg');
|
|
131
|
-
let bgObserver = new IntersectionObserver(entries => {
|
|
132
|
-
entries.forEach(entry => {
|
|
133
|
-
if (entry.isIntersecting) {
|
|
134
|
-
const image = entry.target;
|
|
135
|
-
image.classList.remove('lazy-bg');
|
|
136
|
-
bgObserver.unobserve(image);
|
|
137
|
-
}
|
|
138
|
-
});
|
|
139
|
-
});
|
|
140
|
-
lazyLoadBgs.forEach(image => {
|
|
141
|
-
bgObserver.observe(image);
|
|
142
|
-
});
|
|
143
|
-
}
|
|
144
|
-
}
|
|
145
|
-
getCssClassMap() {
|
|
146
|
-
return {
|
|
147
|
-
[this.imageType]: true,
|
|
148
|
-
'ptc-img': true,
|
|
149
|
-
[this.borderRadius]: true,
|
|
150
|
-
[this.loadMode]: true,
|
|
151
|
-
// [this.imageZIndex] : true
|
|
152
|
-
};
|
|
153
|
-
}
|
|
154
|
-
getCurrentBreakPoints() {
|
|
155
|
-
// Define local variables
|
|
156
|
-
let doc = window.document, temp = doc.createElement('div'), env;
|
|
157
|
-
// Append test node
|
|
158
|
-
doc.body.appendChild(temp);
|
|
159
|
-
// Loop through breakpoints
|
|
160
|
-
for (let i = interfaces.ResponsiveBgVariables.envs.length - 1; i >= 0; i--) {
|
|
161
|
-
env = interfaces.ResponsiveBgVariables.envs[i];
|
|
162
|
-
// Add classes
|
|
163
|
-
temp.className = 'hidden-' + env;
|
|
164
|
-
// Found breakpoint
|
|
165
|
-
if (temp.offsetParent === null) {
|
|
166
|
-
// Remove our test node
|
|
167
|
-
doc.body.removeChild(temp);
|
|
168
|
-
// Return current breakpoint
|
|
169
|
-
return env;
|
|
170
|
-
}
|
|
171
|
-
}
|
|
172
|
-
// Breakpoint not found, try fallback
|
|
173
|
-
doc.body.removeChild(temp);
|
|
174
|
-
return this.getFallbackBreakpoint();
|
|
175
|
-
}
|
|
176
|
-
getFallbackBreakpoint() {
|
|
177
|
-
if (window.matchMedia('(min-width: 992px)').matches) {
|
|
178
|
-
return 'lg';
|
|
179
|
-
}
|
|
180
|
-
else if (window.matchMedia('(min-width: 768px)').matches) {
|
|
181
|
-
return 'md';
|
|
182
|
-
}
|
|
183
|
-
else if (window.matchMedia('(min-width: 576px)').matches) {
|
|
184
|
-
return 'sm';
|
|
185
|
-
}
|
|
186
|
-
else {
|
|
187
|
-
return 'xs';
|
|
188
|
-
}
|
|
189
|
-
}
|
|
190
|
-
get el() { return index.getElement(this); }
|
|
191
|
-
};
|
|
192
|
-
PtcImg.style = ptcImgCss;
|
|
193
|
-
|
|
194
|
-
const ptcModalCss = ":host{display:block}.wrapper{position:absolute;width:100vw;height:100%;top:0;left:0;z-index:3000;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:3020;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 .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}.wrapper .modal-popup .modal-body.html{overflow:hidden}.wrapper .modal-popup .close{margin-right:var(--ptc-element-spacing-03);margin-top:var(--ptc-element-spacing-03)}.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:var(--spacing-md);right:var(--spacing-md);margin:0}.wrapper .modal-popup.shadow-scroller .modal-body{min-height:200px;overflow-x:hidden;overflow-y:auto}.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:3010;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(.bio-modal) .modal-popup{padding:30px 15px 30px 0;max-width:1200px}@media only screen and (min-width: 1440px){:host(.bio-modal) .modal-popup{max-width:1400px}}:host(.bio-modal) .close{position:absolute;margin:0;right:15px;top:30px}: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)}";
|
|
195
|
-
|
|
196
|
-
const PtcModal = class {
|
|
197
|
-
constructor(hostRef) {
|
|
198
|
-
index.registerInstance(this, hostRef);
|
|
199
|
-
this.closed = index.createEvent(this, "closed", 7);
|
|
200
|
-
this.opened = index.createEvent(this, "opened", 7);
|
|
201
|
-
this.iframeUrl = undefined;
|
|
202
|
-
this.size = 'sm';
|
|
203
|
-
this.show = false;
|
|
204
|
-
this.overlay = true;
|
|
205
|
-
this.fixed = false;
|
|
206
|
-
this.closeOnBlur = false;
|
|
207
|
-
this.rounded = false;
|
|
208
|
-
this.showHeaderFooter = false;
|
|
209
|
-
this.overlayHeight = undefined;
|
|
210
|
-
this.borderRadius = 'standard | large | pill | circle';
|
|
211
|
-
this.isBioModal = false;
|
|
212
|
-
this.bodyOverflowSetting = undefined;
|
|
213
|
-
}
|
|
214
|
-
fireOnClosed(modal) {
|
|
215
|
-
this.closed.emit(modal);
|
|
216
|
-
}
|
|
217
|
-
fireOnOpened(modal) {
|
|
218
|
-
this.opened.emit(modal);
|
|
219
|
-
}
|
|
220
|
-
componentWillLoad() {
|
|
221
|
-
let body = document.querySelector('body');
|
|
222
|
-
this.bodyOverflowSetting = {
|
|
223
|
-
//overflow: body.style['overflow'],
|
|
224
|
-
overflowY: body.style['overflowY'],
|
|
225
|
-
overflowX: body.style['overflowX'],
|
|
226
|
-
};
|
|
227
|
-
}
|
|
228
|
-
componentWillRender() {
|
|
229
|
-
let body = document.querySelector('body');
|
|
230
|
-
if (body) {
|
|
231
|
-
if (this.show) {
|
|
232
|
-
//body.style['overflow'] = 'hidden';
|
|
233
|
-
body.style['overflowY'] = 'scroll';
|
|
234
|
-
body.style['overflowX'] = 'hidden';
|
|
235
|
-
}
|
|
236
|
-
else {
|
|
237
|
-
//body.style['overflow'] = this.bodyOverflowSetting.overflow;
|
|
238
|
-
body.style['overflowY'] = this.bodyOverflowSetting.overflowY;
|
|
239
|
-
body.style['overflowX'] = this.bodyOverflowSetting.overflowX;
|
|
240
|
-
}
|
|
241
|
-
}
|
|
242
|
-
}
|
|
243
|
-
componentDidLoad() {
|
|
244
|
-
if (this.show) {
|
|
245
|
-
this.fireOnOpened(this);
|
|
246
|
-
}
|
|
247
|
-
if (this.showHeaderFooter) {
|
|
248
|
-
this.handleScroll();
|
|
249
|
-
}
|
|
250
|
-
}
|
|
251
|
-
componentDidUpdate() {
|
|
252
|
-
if (this.show) {
|
|
253
|
-
this.fireOnOpened(this);
|
|
254
|
-
}
|
|
255
|
-
else {
|
|
256
|
-
this.fireOnClosed(this);
|
|
257
|
-
}
|
|
258
|
-
}
|
|
259
|
-
resizeIframe(e) {
|
|
260
|
-
let iFrame = e.target;
|
|
261
|
-
setTimeout(() => {
|
|
262
|
-
try {
|
|
263
|
-
if (iFrame.contentDocument) {
|
|
264
|
-
iFrame.height = `${iFrame.contentDocument.body.scrollHeight}px`;
|
|
265
|
-
}
|
|
266
|
-
else {
|
|
267
|
-
iFrame.height = '616px'; //default
|
|
268
|
-
iFrame.removeAttribute('scrolling');
|
|
269
|
-
}
|
|
270
|
-
}
|
|
271
|
-
catch (error) {
|
|
272
|
-
console.log(error);
|
|
273
|
-
iFrame.height = '616px'; //default
|
|
274
|
-
iFrame.removeAttribute('scrolling');
|
|
275
|
-
}
|
|
276
|
-
iFrame.classList.add('ready');
|
|
277
|
-
}, 50);
|
|
278
|
-
}
|
|
279
|
-
handleScroll() {
|
|
280
|
-
let modal = this.el.shadowRoot.querySelector('.shadow-scroller');
|
|
281
|
-
if (modal) {
|
|
282
|
-
let body = modal.querySelector('.modal-body');
|
|
283
|
-
var height = body.clientHeight;
|
|
284
|
-
var scrollHeight = body.scrollHeight;
|
|
285
|
-
var scrollTop = body.scrollTop;
|
|
286
|
-
var offset = body.offsetHeight;
|
|
287
|
-
if (height < scrollHeight) { //has scrollbar
|
|
288
|
-
if (scrollTop > 0) { //can scroll up
|
|
289
|
-
modal.classList.add('scroll-top');
|
|
290
|
-
}
|
|
291
|
-
else {
|
|
292
|
-
modal.classList.remove('scroll-top');
|
|
293
|
-
}
|
|
294
|
-
if (offset + scrollTop < scrollHeight) { //can scroll down
|
|
295
|
-
modal.classList.add('scroll-bottom');
|
|
296
|
-
}
|
|
297
|
-
else {
|
|
298
|
-
modal.classList.remove('scroll-bottom');
|
|
299
|
-
}
|
|
300
|
-
}
|
|
301
|
-
}
|
|
302
|
-
}
|
|
303
|
-
close() {
|
|
304
|
-
this.show = false;
|
|
305
|
-
}
|
|
306
|
-
render() {
|
|
307
|
-
let content;
|
|
308
|
-
let overlay;
|
|
309
|
-
let type = this.iframeUrl ? 'frame' : 'html';
|
|
310
|
-
let closebtn = (index.h("div", { class: "close" }, index.h("a", { href: "#", onClick: (e) => { e.preventDefault(); this.close(); } }, this.isBioModal
|
|
311
|
-
?
|
|
312
|
-
index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "42", height: "41.485", viewBox: "0 0 42 41.485" }, index.h("g", { "data-name": "Group 1042", transform: "rotate(180 108.25 87.993)" }, index.h("path", { d: "M0 0v39.486", class: "cls-1", "data-name": "Line 446" }), index.h("path", { d: "M0 0h40", class: "cls-1", "data-name": "Line 447" }), index.h("path", { d: "M0 33.592V0", class: "cls-1", "data-name": "Line 448" }), index.h("path", { d: "M23.994 0H0", class: "cls-1", "data-name": "Line 449" }), index.h("path", { d: "M0 0l17.596 17.596", class: "cls-2", "data-name": "Line 450", transform: "translate(187.229 147.226)" }), index.h("path", { d: "M0 7.198L7.199 0", class: "cls-2", "data-name": "Line 451", transform: "translate(197.55 147.312)" }), index.h("path", { d: "M0 7.2L7.2 0", class: "cls-2", "data-name": "Path 114", transform: "translate(187.313 157.549)" })))
|
|
313
|
-
:
|
|
314
|
-
index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 14 14", fill: "none" }, index.h("path", { d: "M1 1L13 13", stroke: "black" }), index.h("path", { d: "M13 1L1 13", stroke: "black" })))));
|
|
315
|
-
if (this.iframeUrl) {
|
|
316
|
-
content = (index.h("iframe", { src: this.iframeUrl, frameBorder: 0, allowFullScreen: false, height: "100%", width: "100%", scrolling: "no", onLoad: this.resizeIframe }));
|
|
317
|
-
}
|
|
318
|
-
else {
|
|
319
|
-
if (this.showHeaderFooter) {
|
|
320
|
-
content = (index.h("slot", { name: "body" }));
|
|
321
|
-
}
|
|
322
|
-
else {
|
|
323
|
-
content = (index.h("slot", null));
|
|
324
|
-
}
|
|
325
|
-
}
|
|
326
|
-
if (this.overlay) {
|
|
327
|
-
if (this.closeOnBlur) {
|
|
328
|
-
overlay = index.h("div", { class: "overlay", onClick: (_) => this.close() });
|
|
329
|
-
}
|
|
330
|
-
else {
|
|
331
|
-
overlay = index.h("div", { class: "overlay" });
|
|
332
|
-
}
|
|
333
|
-
}
|
|
334
|
-
return (index.h(index.Host, { class: `${this.isBioModal ? "bio-modal" : ""} ${this.borderRadius}` }, index.h("div", { class: `wrapper ${this.show ? "show" : "hide"} ${this.fixed ? 'fixed' : ''} ` }, overlay, index.h("div", { class: `modal-popup ${this.size} ${type} ${this.rounded ? 'rounded' : ''} ${this.showHeaderFooter ? 'shadow-scroller' : ''} ` }, this.showHeaderFooter ? [
|
|
335
|
-
index.h("div", { class: "modal-header" }, index.h("slot", { name: "header" }), closebtn),
|
|
336
|
-
index.h("div", { class: "modal-body", onScroll: () => this.handleScroll() }, content),
|
|
337
|
-
index.h("div", { class: "modal-footer" }, index.h("slot", { name: "footer" }))
|
|
338
|
-
] : [
|
|
339
|
-
closebtn,
|
|
340
|
-
index.h("div", { class: "modal-body" }, content)
|
|
341
|
-
]))));
|
|
342
|
-
}
|
|
343
|
-
get el() { return index.getElement(this); }
|
|
344
|
-
};
|
|
345
|
-
PtcModal.style = ptcModalCss;
|
|
346
|
-
|
|
347
|
-
const closeSvg = `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 42 41.485">
|
|
348
|
-
<g id="Group_1042" data-name="Group 1042" transform="rotate(180 108.25 87.993)">
|
|
349
|
-
<path id="Line_446" d="M0 0v39.486" class="cls-1" data-name="Line 446"></path>
|
|
350
|
-
<path id="Line_447" d="M0 0h40" class="cls-1" data-name="Line 447"></path>
|
|
351
|
-
<path id="Line_448" d="M0 33.592V0" class="cls-1" data-name="Line 448"></path>
|
|
352
|
-
<path id="Line_449" d="M23.994 0H0" class="cls-1" data-name="Line 449"></path>
|
|
353
|
-
<path id="Line_450" d="M0 0l17.596 17.596" class="cls-2" data-name="Line 450" transform="translate(187.229 147.226)"></path>
|
|
354
|
-
<path id="Line_451" d="M0 7.198L7.199 0" class="cls-2" data-name="Line 451" transform="translate(197.55 147.312)"></path>
|
|
355
|
-
<path id="Path_114" d="M0 7.2L7.2 0" class="cls-2" data-name="Path 114" transform="translate(187.313 157.549)"></path>
|
|
356
|
-
</g>
|
|
357
|
-
</svg>`;
|
|
358
|
-
|
|
359
|
-
const arrowSvgLeft = `<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
360
|
-
<g filter="url(#filter0_d_494_37)">
|
|
361
|
-
<circle cx="24" cy="22" r="20" fill="white"/>
|
|
362
|
-
<path d="M23.1444 16L23.1444 20.5762L31 20.5762L31 23.4239L23.1444 23.4239L23.1444 28L17 21.9669L23.1444 16Z" class="arrow"/>
|
|
363
|
-
</g>
|
|
364
|
-
<defs>
|
|
365
|
-
<filter id="filter0_d_494_37" x="0" y="0" width="48" height="48" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
|
366
|
-
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
|
367
|
-
<feColorMatrix 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"/>
|
|
368
|
-
<feOffset dy="2"/>
|
|
369
|
-
<feGaussianBlur stdDeviation="2"/>
|
|
370
|
-
<feComposite in2="hardAlpha" operator="out"/>
|
|
371
|
-
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
|
|
372
|
-
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_494_37"/>
|
|
373
|
-
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_494_37" result="shape"/>
|
|
374
|
-
</filter>
|
|
375
|
-
</defs>
|
|
376
|
-
</svg>
|
|
377
|
-
`;
|
|
378
|
-
|
|
379
|
-
const arrowSvgRight = `<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
380
|
-
<g filter="url(#filter0_d_494_34)">
|
|
381
|
-
<circle cx="24" cy="22" r="20" fill="white"/>
|
|
382
|
-
<path d="M24.8556 16L24.8556 20.5762L17 20.5762L17 23.4239L24.8556 23.4239L24.8556 28L31 21.9669L24.8556 16Z" class="arrow"/>
|
|
383
|
-
</g>
|
|
384
|
-
<defs>
|
|
385
|
-
<filter id="filter0_d_494_34" x="0" y="0" width="48" height="48" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
|
386
|
-
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
|
387
|
-
<feColorMatrix 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"/>
|
|
388
|
-
<feOffset dy="2"/>
|
|
389
|
-
<feGaussianBlur stdDeviation="2"/>
|
|
390
|
-
<feComposite in2="hardAlpha" operator="out"/>
|
|
391
|
-
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
|
|
392
|
-
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_494_34"/>
|
|
393
|
-
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_494_34" result="shape"/>
|
|
394
|
-
</filter>
|
|
395
|
-
</defs>
|
|
396
|
-
</svg>
|
|
397
|
-
`;
|
|
398
|
-
|
|
399
|
-
const backarrow = `<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 311 512">
|
|
400
|
-
<defs>
|
|
401
|
-
<style>
|
|
402
|
-
.cls-1 {
|
|
403
|
-
fill: #fff;
|
|
404
|
-
fill-rule: evenodd;
|
|
405
|
-
}
|
|
406
|
-
</style>
|
|
407
|
-
</defs>
|
|
408
|
-
<path class="cls-1" d="M251.762,512L311,452.638,114.774,256,311,59.362,251.762,0,0,252.29Z"/>
|
|
409
|
-
</svg>
|
|
410
|
-
`;
|
|
411
|
-
|
|
412
|
-
const play = `<svg width="84" height="84" viewBox="0 0 84 84" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
413
|
-
<g filter="url(#filter0_d_241_171)">
|
|
414
|
-
<circle cx="42" cy="38" r="36" fill="#1F2024"/>
|
|
415
|
-
<circle cx="42" cy="38" r="35" stroke="#33A13C" stroke-width="2"/>
|
|
416
|
-
</g>
|
|
417
|
-
<path d="M58 38L34 51.8564L34 24.1436L58 38Z" fill="white"/>
|
|
418
|
-
<defs>
|
|
419
|
-
<filter id="filter0_d_241_171" x="0" y="0" width="84" height="84" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
|
420
|
-
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
|
421
|
-
<feColorMatrix 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"/>
|
|
422
|
-
<feMorphology radius="2" operator="dilate" in="SourceAlpha" result="effect1_dropShadow_241_171"/>
|
|
423
|
-
<feOffset dy="4"/>
|
|
424
|
-
<feGaussianBlur stdDeviation="2"/>
|
|
425
|
-
<feComposite in2="hardAlpha" operator="out"/>
|
|
426
|
-
<feColorMatrix type="matrix" values="0 0 0 0 0.231373 0 0 0 0 0.270588 0 0 0 0 0.313726 0 0 0 0.1 0"/>
|
|
427
|
-
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_241_171"/>
|
|
428
|
-
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_241_171" result="shape"/>
|
|
429
|
-
</filter>
|
|
430
|
-
</defs>
|
|
431
|
-
</svg>
|
|
432
|
-
`;
|
|
433
|
-
|
|
434
|
-
const ptcSvgBtnCss = ":host{cursor:pointer}:host(.block){display:block}:host(.inline){display:inline}:host(.inline-block){display:inline-block}:host(.flex){display:flex}:host(:focus-visible){outline:none}:host(.backarrow){margin:8px 8px 0px -2px}:focus-visible{outline:none}.svg-close svg .cls-1,.svg-close svg .cls-2{fill:none;stroke-width:2px}.svg-close svg .cls-1{stroke:var(--color-gray-10);stroke-linecap:square}.svg-close svg .cls-2{stroke:var(--color-gray-10)}.svg-close svg path{transition:all var(--ptc-transition-medium) var(--ptc-ease-inout)}.svg-close svg .cls-1:first-child{-webkit-transform:translate(175.5px, 135.5px);-ms-transform:translate(175.5px, 135.5px);transform:translate(175.5px, 135.5px)}.svg-close svg .cls-1:nth-child(2){-webkit-transform:translate(175.5px, 174.985px);-ms-transform:translate(175.5px, 174.985px);transform:translate(175.5px, 174.985px)}.svg-close svg .cls-1:nth-child(3){-webkit-transform:translate(215.5px, 141.393px);-ms-transform:translate(215.5px, 141.393px);transform:translate(215.5px, 141.393px)}.svg-close svg .cls-1:nth-child(4){-webkit-transform:translate(175.5px, 135.5px);-ms-transform:translate(175.5px, 135.5px);transform:translate(175.5px, 135.5px)}.svg-close:hover svg .cls-1:first-child{-webkit-transform:translate(175.5px, 162px);-ms-transform:translate(175.5px, 162px);transform:translate(175.5px, 162px)}.svg-close:hover svg .cls-1:nth-child(2){-webkit-transform:translate(149px, 174.985px);-ms-transform:translate(149px, 174.985px);transform:translate(149px, 174.985px)}.svg-close:hover svg .cls-1:nth-child(3){-webkit-transform:translate(215.5px, 174px);-ms-transform:translate(215.5px, 174px);transform:translate(215.5px, 174px)}.svg-close:hover svg .cls-1:nth-child(4){-webkit-transform:translate(152.5px, 135.5px);-ms-transform:translate(152.5px, 135.5px);transform:translate(152.5px, 135.5px)}.svg-close.svg-close-white .cls-1{stroke:var(--color-white)}.slider-left,.slider-right{transition:all var(--ptc-transition-medium) var(--ptc-ease-inout)}.slider-left svg .arrow,.slider-right svg .arrow{fill:var(--color-gray-10)}.slider-left:hover svg .arrow,.slider-right:hover svg .arrow{fill:var(--color-green-06)}.back-arrow{display:inline-block;fill:none;stroke-width:30px;stroke:var(--color-gray-10);stroke-linecap:square;height:10px;width:20px;position:relative;top:1px;text-align:center}@media only screen and (max-width: 1024px) and (min-width: 576px){:host(.back-arrow){margin:8px 8px 16px -2px}}";
|
|
435
|
-
|
|
436
|
-
const PtcSvgBtn = class {
|
|
437
|
-
constructor(hostRef) {
|
|
438
|
-
index.registerInstance(this, hostRef);
|
|
439
|
-
this.svgName = 'close';
|
|
440
|
-
this.display = 'block';
|
|
441
|
-
this.zIndex = undefined;
|
|
442
|
-
this.styles = undefined;
|
|
443
|
-
}
|
|
444
|
-
render() {
|
|
445
|
-
const classMap = this.getCssClassMap();
|
|
446
|
-
return (index.h(index.Host, Object.assign({ class: classMap }, (this.zIndex !== undefined ? { style: { zIndex: this.zIndex } } : null)), this.styles && index.h("style", null, this.styles), !!this.svgName && this.svgName === 'close' ? index.h("div", { class: "svg-close", innerHTML: closeSvg }) : null, !!this.svgName && this.svgName === 'slider-left' ? index.h("div", { class: "slider-left", innerHTML: arrowSvgLeft }) : null, !!this.svgName && this.svgName === 'slider-right' ? index.h("div", { class: "slider-right", innerHTML: arrowSvgRight }) : null, !!this.svgName && this.svgName === 'back-arrow' ? index.h("div", { class: "back-arrow", innerHTML: backarrow }) : null, !!this.svgName && this.svgName === 'play' ? index.h("div", { class: "play", innerHTML: play }) : null));
|
|
447
|
-
}
|
|
448
|
-
getCssClassMap() {
|
|
449
|
-
return {
|
|
450
|
-
[this.display]: true,
|
|
451
|
-
};
|
|
452
|
-
}
|
|
453
|
-
};
|
|
454
|
-
PtcSvgBtn.style = ptcSvgBtnCss;
|
|
455
|
-
|
|
456
|
-
const ptcTitleCss = "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}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:4px}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}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-xxxx-large);line-height:var(--ptc-line-height-densest);font-weight:var(--ptc-font-weight-extrabold);letter-spacing:0px;color:var(--color-gray-10)}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)}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.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.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 screen and (min-width: 769px){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.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.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.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}";
|
|
457
|
-
|
|
458
|
-
const PtcTitle = class {
|
|
459
|
-
constructor(hostRef) {
|
|
460
|
-
index.registerInstance(this, hostRef);
|
|
461
|
-
this.isPlmHub = false;
|
|
462
|
-
this.type = 'h2';
|
|
463
|
-
this.textAlign = undefined;
|
|
464
|
-
this.upperline = 'dotted';
|
|
465
|
-
this.titleShadow = undefined;
|
|
466
|
-
this.titleColor = 'gray';
|
|
467
|
-
this.titleMargin = undefined;
|
|
468
|
-
this.titleWeight = undefined;
|
|
469
|
-
this.titleSize = undefined;
|
|
470
|
-
this.titleHeight = 'paragraph';
|
|
471
|
-
this.styles = undefined;
|
|
472
|
-
this.ellipsisLineCutoff = undefined;
|
|
473
|
-
this.titleDisplay = 'inline-block';
|
|
474
|
-
}
|
|
475
|
-
render() {
|
|
476
|
-
const classMap = this.getCssClassMap();
|
|
477
|
-
const cutOff = this.getLineCuttoff();
|
|
478
|
-
let TagType;
|
|
479
|
-
switch (this.type) {
|
|
480
|
-
case 'h1':
|
|
481
|
-
TagType = 'h1';
|
|
482
|
-
break;
|
|
483
|
-
case 'h3':
|
|
484
|
-
TagType = 'h3';
|
|
485
|
-
break;
|
|
486
|
-
case 'h4':
|
|
487
|
-
TagType = 'h4';
|
|
488
|
-
break;
|
|
489
|
-
case 'h5':
|
|
490
|
-
TagType = 'h5';
|
|
491
|
-
break;
|
|
492
|
-
case 'h6':
|
|
493
|
-
TagType = 'h6';
|
|
494
|
-
break;
|
|
495
|
-
default:
|
|
496
|
-
TagType = 'h2';
|
|
497
|
-
}
|
|
498
|
-
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)))));
|
|
499
|
-
}
|
|
500
|
-
getCssClassMap() {
|
|
501
|
-
return {
|
|
502
|
-
[this.textAlign]: !!this.textAlign ? true : false,
|
|
503
|
-
[this.upperline]: true,
|
|
504
|
-
[this.isPlmHub ? 'is-plm-hub' : 'is-standard']: true,
|
|
505
|
-
[this.titleMargin]: !!this.titleMargin ? true : false,
|
|
506
|
-
[this.titleShadow]: !!this.titleShadow ? true : false,
|
|
507
|
-
[this.titleWeight]: !!this.titleWeight ? true : false,
|
|
508
|
-
[this.titleSize]: !!this.titleSize ? true : false,
|
|
509
|
-
[this.titleHeight]: !!this.titleHeight ? true : false,
|
|
510
|
-
[this.titleColor]: !!this.titleColor ? true : false,
|
|
511
|
-
['ellipsis-boxing']: this.ellipsisLineCutoff && this.ellipsisLineCutoff > 0,
|
|
512
|
-
[this.titleDisplay]: !!this.titleDisplay ? true : false,
|
|
513
|
-
};
|
|
514
|
-
}
|
|
515
|
-
getLineCuttoff() {
|
|
516
|
-
let result;
|
|
517
|
-
if (this.ellipsisLineCutoff && this.ellipsisLineCutoff > 0) {
|
|
518
|
-
result = {
|
|
519
|
-
['-webkit-line-clamp']: `${this.ellipsisLineCutoff}`,
|
|
520
|
-
};
|
|
521
|
-
}
|
|
522
|
-
return result;
|
|
523
|
-
}
|
|
524
|
-
};
|
|
525
|
-
PtcTitle.style = ptcTitleCss;
|
|
526
|
-
|
|
527
|
-
exports.max_width_container = MaxWidthContainer;
|
|
528
|
-
exports.ptc_background_video = PtcBackgroundVideo;
|
|
529
|
-
exports.ptc_img = PtcImg;
|
|
530
|
-
exports.ptc_modal = PtcModal;
|
|
531
|
-
exports.ptc_svg_btn = PtcSvgBtn;
|
|
532
|
-
exports.ptc_title = PtcTitle;
|