@ptcwebops/ptcw-design 0.4.6 → 0.4.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -21
- package/dist/cjs/{icon-asset_4.cjs.entry.js → icon-asset_8.cjs.entry.js} +298 -219
- package/dist/cjs/{interfaces-0ecd8027.js → interfaces-574e6df7.js} +9 -9
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/lottie-player.cjs.entry.js +354 -354
- package/dist/cjs/my-component.cjs.entry.js +13 -13
- package/dist/cjs/ptc-breadcrumb.cjs.entry.js +12 -12
- package/dist/cjs/ptc-button.cjs.entry.js +65 -65
- package/dist/cjs/ptc-card-bottom.cjs.entry.js +31 -31
- package/dist/cjs/ptc-card-content.cjs.entry.js +31 -31
- package/dist/cjs/ptc-card-plm.cjs.entry.js +16 -16
- package/dist/cjs/ptc-card.cjs.entry.js +68 -68
- package/dist/cjs/ptc-countdown.cjs.entry.js +8 -8
- package/dist/cjs/ptc-date.cjs.entry.js +48 -48
- package/dist/cjs/ptc-footer.cjs.entry.js +8 -8
- package/dist/cjs/ptc-form.cjs.entry.js +104 -104
- package/dist/cjs/ptc-hero.cjs.entry.js +18 -18
- package/dist/cjs/ptc-img_2.cjs.entry.js +169 -169
- package/dist/cjs/ptc-input.cjs.entry.js +20 -20
- package/dist/cjs/ptc-link.cjs.entry.js +42 -42
- package/dist/cjs/ptc-list.cjs.entry.js +20 -20
- package/dist/cjs/ptc-lottie.cjs.entry.js +12 -12
- package/dist/cjs/ptc-modal.cjs.entry.js +103 -103
- package/dist/cjs/ptc-nav-item.cjs.entry.js +83 -83
- package/dist/cjs/ptc-nav.cjs.entry.js +8 -8
- package/dist/cjs/ptc-para.cjs.entry.js +39 -39
- package/dist/cjs/ptc-picture.cjs.entry.js +158 -158
- package/dist/cjs/ptc-responsive-wrapper.cjs.entry.js +54 -54
- package/dist/cjs/ptc-select.cjs.entry.js +24 -24
- package/dist/cjs/ptc-social-share.cjs.entry.js +64 -64
- package/dist/cjs/ptc-spacer.cjs.entry.js +35 -35
- package/dist/cjs/ptc-span.cjs.entry.js +23 -23
- package/dist/cjs/ptc-title.cjs.entry.js +44 -44
- package/dist/cjs/ptcw-design.cjs.js +1 -1
- package/dist/collection/collection-manifest.json +3 -0
- package/dist/collection/components/icon-asset/icon-asset.css +4 -4
- package/dist/collection/components/icon-asset/icon-asset.js +178 -178
- package/dist/collection/components/icon-asset/media/brands.svg +1381 -1381
- package/dist/collection/components/icon-asset/media/designer.svg +316 -316
- package/dist/collection/components/icon-asset/media/regular.svg +463 -463
- package/dist/collection/components/icon-asset/media/solid.svg +3013 -3013
- package/dist/collection/components/icon-asset/media/svg-with-js.min.css +4 -4
- package/dist/collection/components/list-item/list-item.css +31 -0
- package/dist/collection/components/list-item/list-item.js +103 -84
- package/dist/collection/components/my-component/my-component.css +3 -3
- package/dist/collection/components/my-component/my-component.js +73 -73
- package/dist/collection/components/ptc-announcement/ptc-announcement.js +170 -170
- package/dist/collection/components/ptc-breadcrumb/ptc-breadcrumb.js +21 -21
- package/dist/collection/components/ptc-button/ptc-button.js +293 -293
- package/dist/collection/components/ptc-card/ptc-card.js +282 -282
- package/dist/collection/components/ptc-card-bottom/ptc-card-bottom.js +105 -105
- package/dist/collection/components/ptc-card-content/ptc-card-content.js +105 -105
- package/dist/collection/components/ptc-card-plm/ptc-card-plm.js +97 -97
- package/dist/collection/components/ptc-countdown/ptc-countdown.js +15 -15
- package/dist/collection/components/ptc-date/ptc-date.js +201 -201
- package/dist/collection/components/ptc-footer/ptc-footer.js +25 -25
- package/dist/collection/components/ptc-form/ptc-form.js +118 -118
- package/dist/collection/components/ptc-form/validation/FormValidation.js +4234 -4234
- package/dist/collection/components/ptc-hero/ptc-hero.js +67 -67
- package/dist/collection/components/ptc-img/ptc-img.js +314 -314
- package/dist/collection/components/ptc-input/ptc-input.js +133 -133
- package/dist/collection/components/ptc-link/ptc-link.js +198 -198
- package/dist/collection/components/ptc-list/ptc-list.js +63 -63
- package/dist/collection/components/ptc-lottie/ptc-lottie.css +5 -5
- package/dist/collection/components/ptc-lottie/ptc-lottie.js +58 -58
- package/dist/collection/components/ptc-minimized-footer/ptc-minimized-footer.css +44 -0
- package/dist/collection/components/ptc-minimized-footer/ptc-minimized-footer.js +17 -0
- package/dist/collection/components/ptc-minimized-header/ptc-minimized-header.css +77 -0
- package/dist/collection/components/ptc-minimized-header/ptc-minimized-header.js +80 -0
- package/dist/collection/components/ptc-mobile-select/ptc-mobile-select.js +220 -220
- package/dist/collection/components/ptc-modal/ptc-modal.js +252 -252
- package/dist/collection/components/ptc-nav/ptc-nav.js +21 -21
- package/dist/collection/components/ptc-nav-item/ptc-nav-item.js +252 -252
- package/dist/collection/components/ptc-overlay/ptc-overlay.js +99 -99
- package/dist/collection/components/ptc-para/ptc-para.js +157 -157
- package/dist/collection/components/ptc-picture/ptc-picture.js +428 -428
- package/dist/collection/components/ptc-previous-url/ptc-previous-url.css +24 -0
- package/dist/collection/components/ptc-previous-url/ptc-previous-url.js +54 -0
- package/dist/collection/components/ptc-responsive-wrapper/ptc-responsive-wrapper.css +3 -3
- package/dist/collection/components/ptc-responsive-wrapper/ptc-responsive-wrapper.js +62 -62
- package/dist/collection/components/ptc-select/ptc-select.js +105 -105
- package/dist/collection/components/ptc-social-share/ptc-social-share.js +206 -206
- package/dist/collection/components/ptc-spacer/ptc-spacer.css +322 -322
- package/dist/collection/components/ptc-spacer/ptc-spacer.js +99 -99
- package/dist/collection/components/ptc-span/ptc-span.js +89 -89
- package/dist/collection/components/ptc-svg-btn/ptc-svg-btn.css +16 -0
- package/dist/collection/components/ptc-svg-btn/ptc-svg-btn.js +71 -69
- package/dist/collection/components/ptc-title/ptc-title.js +231 -231
- package/dist/collection/index.js +1 -1
- package/dist/collection/media/svg-imgs/Back-arrow.svg +11 -0
- package/dist/collection/media/svg-imgs/close.svg +10 -10
- package/dist/collection/media/svg-imgs/slider-arrow-left.svg +18 -18
- package/dist/collection/media/svg-imgs/slider-arrow-right.svg +18 -18
- package/dist/collection/utils/interfaces.js +11 -11
- package/dist/collection/utils/utils.js +3 -3
- package/dist/custom-elements/index.d.ts +18 -0
- package/dist/custom-elements/index.js +2056 -1991
- package/dist/esm/{icon-asset_4.entry.js → icon-asset_8.entry.js} +295 -220
- package/dist/esm/{interfaces-c1c73092.js → interfaces-7c0243be.js} +9 -9
- package/dist/esm/loader.js +1 -1
- package/dist/esm/lottie-player.entry.js +354 -354
- package/dist/esm/my-component.entry.js +13 -13
- package/dist/esm/polyfills/core-js.js +0 -0
- package/dist/esm/polyfills/dom.js +0 -0
- package/dist/esm/polyfills/es5-html-element.js +0 -0
- package/dist/esm/polyfills/index.js +0 -0
- package/dist/esm/polyfills/system.js +0 -0
- package/dist/esm/ptc-breadcrumb.entry.js +12 -12
- package/dist/esm/ptc-button.entry.js +65 -65
- package/dist/esm/ptc-card-bottom.entry.js +31 -31
- package/dist/esm/ptc-card-content.entry.js +31 -31
- package/dist/esm/ptc-card-plm.entry.js +16 -16
- package/dist/esm/ptc-card.entry.js +68 -68
- package/dist/esm/ptc-countdown.entry.js +8 -8
- package/dist/esm/ptc-date.entry.js +48 -48
- package/dist/esm/ptc-footer.entry.js +8 -8
- package/dist/esm/ptc-form.entry.js +104 -104
- package/dist/esm/ptc-hero.entry.js +18 -18
- package/dist/esm/ptc-img_2.entry.js +169 -169
- package/dist/esm/ptc-input.entry.js +20 -20
- package/dist/esm/ptc-link.entry.js +42 -42
- package/dist/esm/ptc-list.entry.js +20 -20
- package/dist/esm/ptc-lottie.entry.js +12 -12
- package/dist/esm/ptc-modal.entry.js +103 -103
- package/dist/esm/ptc-nav-item.entry.js +83 -83
- package/dist/esm/ptc-nav.entry.js +8 -8
- package/dist/esm/ptc-para.entry.js +39 -39
- package/dist/esm/ptc-picture.entry.js +158 -158
- package/dist/esm/ptc-responsive-wrapper.entry.js +54 -54
- package/dist/esm/ptc-select.entry.js +24 -24
- package/dist/esm/ptc-social-share.entry.js +64 -64
- package/dist/esm/ptc-spacer.entry.js +35 -35
- package/dist/esm/ptc-span.entry.js +23 -23
- package/dist/esm/ptc-title.entry.js +44 -44
- package/dist/esm/ptcw-design.js +1 -1
- package/dist/ptcw-design/media/brands.svg +1381 -1381
- package/dist/ptcw-design/media/designer.svg +316 -316
- package/dist/ptcw-design/media/regular.svg +463 -463
- package/dist/ptcw-design/media/solid.svg +3013 -3013
- package/dist/ptcw-design/media/svg-with-js.min.css +4 -4
- package/dist/ptcw-design/{p-1e39bc14.entry.js → p-894e8c85.entry.js} +1 -1
- package/dist/ptcw-design/{p-439c9e49.entry.js → p-e87c04ae.entry.js} +2 -2
- package/dist/ptcw-design/{p-27538cac.entry.js → p-f2f1c015.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/ptcw-design/validation/FormValidation.js +4234 -4234
- package/dist/types/components/icon-asset/icon-asset.d.ts +32 -32
- package/dist/types/components/list-item/list-item.d.ts +8 -7
- package/dist/types/components/my-component/my-component.d.ts +16 -16
- package/dist/types/components/ptc-announcement/ptc-announcement.d.ts +35 -35
- package/dist/types/components/ptc-breadcrumb/ptc-breadcrumb.d.ts +4 -4
- package/dist/types/components/ptc-button/ptc-button.d.ts +56 -56
- package/dist/types/components/ptc-card/ptc-card.d.ts +50 -50
- package/dist/types/components/ptc-card-bottom/ptc-card-bottom.d.ts +15 -15
- package/dist/types/components/ptc-card-content/ptc-card-content.d.ts +15 -15
- package/dist/types/components/ptc-card-plm/ptc-card-plm.d.ts +8 -8
- package/dist/types/components/ptc-countdown/ptc-countdown.d.ts +3 -3
- package/dist/types/components/ptc-date/ptc-date.d.ts +41 -41
- package/dist/types/components/ptc-footer/ptc-footer.d.ts +3 -3
- package/dist/types/components/ptc-form/ptc-form.d.ts +11 -11
- package/dist/types/components/ptc-hero/ptc-hero.d.ts +12 -12
- package/dist/types/components/ptc-img/ptc-img.d.ts +51 -51
- package/dist/types/components/ptc-input/ptc-input.d.ts +19 -19
- package/dist/types/components/ptc-link/ptc-link.d.ts +36 -36
- package/dist/types/components/ptc-list/ptc-list.d.ts +6 -6
- package/dist/types/components/ptc-lottie/ptc-lottie.d.ts +12 -12
- package/dist/types/components/ptc-minimized-footer/ptc-minimized-footer.d.ts +3 -0
- package/dist/types/components/ptc-minimized-header/ptc-minimized-header.d.ts +6 -0
- package/dist/types/components/ptc-mobile-select/ptc-mobile-select.d.ts +40 -40
- package/dist/types/components/ptc-modal/ptc-modal.d.ts +46 -46
- package/dist/types/components/ptc-nav/ptc-nav.d.ts +3 -3
- package/dist/types/components/ptc-nav-item/ptc-nav-item.d.ts +53 -53
- package/dist/types/components/ptc-overlay/ptc-overlay.d.ts +20 -20
- package/dist/types/components/ptc-para/ptc-para.d.ts +28 -28
- package/dist/types/components/ptc-picture/ptc-picture.d.ts +82 -82
- package/dist/types/components/ptc-previous-url/ptc-previous-url.d.ts +5 -0
- package/dist/types/components/ptc-responsive-wrapper/ptc-responsive-wrapper.d.ts +8 -8
- package/dist/types/components/ptc-select/ptc-select.d.ts +9 -9
- package/dist/types/components/ptc-social-share/ptc-social-share.d.ts +25 -25
- package/dist/types/components/ptc-spacer/ptc-spacer.d.ts +16 -16
- package/dist/types/components/ptc-span/ptc-span.d.ts +16 -16
- package/dist/types/components/ptc-svg-btn/ptc-svg-btn.d.ts +12 -12
- package/dist/types/components/ptc-title/ptc-title.d.ts +41 -41
- package/dist/types/components.d.ts +77 -26
- package/dist/types/global.d.ts +1072 -1072
- package/dist/types/index.d.ts +1 -1
- package/dist/types/utils/interfaces.d.ts +14 -14
- package/dist/types/utils/utils.d.ts +1 -1
- package/package.json +58 -58
- package/readme.md +11 -11
- package/dist/cjs/list-item.cjs.entry.js +0 -29
- package/dist/esm/list-item.entry.js +0 -25
- package/dist/ptcw-design/p-80c03571.entry.js +0 -1
- /package/dist/ptcw-design/{p-50e52c88.js → p-ee1183b2.js} +0 -0
|
@@ -3,182 +3,182 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
const index = require('./index-3adcf9f4.js');
|
|
6
|
-
const interfaces = require('./interfaces-
|
|
6
|
+
const interfaces = require('./interfaces-574e6df7.js');
|
|
7
7
|
|
|
8
8
|
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-sm{border-radius:var(--ptc-border-radius-small)}.radius-md{border-radius:var(--ptc-border-radius-medium)}.radius-lg{border-radius:var(--ptc-border-radius-large)}.lazy-bg{background-image:none !important;background-color:var(--color-primary-lightgrey)}@media (max-width: 767px){.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 (min-width: 1200px){.hidden-lg{display:none !important}}";
|
|
9
9
|
|
|
10
|
-
let PtcImg = class {
|
|
11
|
-
constructor(hostRef) {
|
|
12
|
-
index.registerInstance(this, hostRef);
|
|
13
|
-
/**
|
|
14
|
-
* Image size for smallest screen
|
|
15
|
-
* <=767px
|
|
16
|
-
*/
|
|
17
|
-
this.sizeXs = '510x340';
|
|
18
|
-
/**
|
|
19
|
-
* Image size for small screen
|
|
20
|
-
* >=768px and <=991px
|
|
21
|
-
*/
|
|
22
|
-
this.sizeSm = '1240x496';
|
|
23
|
-
/**
|
|
24
|
-
* Image size for medium screen
|
|
25
|
-
* >=992px and <=1199px
|
|
26
|
-
*/
|
|
27
|
-
this.sizeMd = '1366x500';
|
|
28
|
-
/**
|
|
29
|
-
* Image solution for large screen
|
|
30
|
-
* >=1200px
|
|
31
|
-
*/
|
|
32
|
-
this.sizeLg = '1920x1080';
|
|
33
|
-
/**
|
|
34
|
-
* Image type
|
|
35
|
-
*/
|
|
36
|
-
this.imageType = 'smart-bg';
|
|
37
|
-
/**
|
|
38
|
-
* Image border shape
|
|
39
|
-
*/
|
|
40
|
-
this.borderRadius = '';
|
|
41
|
-
/**
|
|
42
|
-
* Lazy loading option
|
|
43
|
-
*/
|
|
44
|
-
this.loadMode = 'lazy-bg';
|
|
45
|
-
}
|
|
46
|
-
/**
|
|
47
|
-
* Image Z Index
|
|
48
|
-
*/
|
|
49
|
-
// @Prop() imageZIndex: 'z-index-auto' | 'z-index-n-2' | 'z-index-n-1' | 'z-index-p-1' | 'z-index-p-2' = 'z-index-auto';
|
|
50
|
-
WindowResize() {
|
|
51
|
-
this.setResponsiveBg();
|
|
52
|
-
}
|
|
53
|
-
render() {
|
|
54
|
-
const classMap = this.getCssClassMap();
|
|
55
|
-
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)));
|
|
56
|
-
}
|
|
57
|
-
componentDidLoad() {
|
|
58
|
-
this.addIntersectionObserver();
|
|
59
|
-
this.setResponsiveBg();
|
|
60
|
-
}
|
|
61
|
-
componentWillUpdate() {
|
|
62
|
-
// console.log('componentWillUpdate!');
|
|
63
|
-
this.addIntersectionObserver();
|
|
64
|
-
this.setResponsiveBg();
|
|
65
|
-
}
|
|
66
|
-
//responsive image
|
|
67
|
-
setResponsiveBg() {
|
|
68
|
-
// Define local variables
|
|
69
|
-
let backgrounds = (this.el || document).querySelectorAll(interfaces.ResponsiveBgVariables.selector), el, elData, currentBreakpoint = this.getCurrentBreakPoints();
|
|
70
|
-
// console.log('current breakpoint: ' + currentBreakpoint);
|
|
71
|
-
// Loop through all target elements
|
|
72
|
-
for (var i = 0, len = backgrounds.length; i < len; i++) {
|
|
73
|
-
// Set current variables
|
|
74
|
-
el = backgrounds[i];
|
|
75
|
-
elData = el.getAttribute('data-' + currentBreakpoint);
|
|
76
|
-
// If the data attribute exists, set the background
|
|
77
|
-
if (elData !== null) {
|
|
78
|
-
el.style.backgroundImage = "url('" + elData + "')";
|
|
79
|
-
}
|
|
80
|
-
else {
|
|
81
|
-
if (typeof console == 'object') {
|
|
82
|
-
console.warn('Data attribute: data-' + currentBreakpoint + ' not found on element:\n\n' + el.outerHTML + '\n\n\n');
|
|
83
|
-
}
|
|
84
|
-
}
|
|
85
|
-
}
|
|
86
|
-
}
|
|
87
|
-
//lazy loading
|
|
88
|
-
addIntersectionObserver() {
|
|
89
|
-
if (!this.imgUrl) {
|
|
90
|
-
console.log('no image!');
|
|
91
|
-
return;
|
|
92
|
-
}
|
|
93
|
-
if ('IntersectionObserver' in window) {
|
|
94
|
-
let lazyLoadBgs = (this.el || document).querySelectorAll('.lazy-bg');
|
|
95
|
-
let bgObserver = new IntersectionObserver(entries => {
|
|
96
|
-
entries.forEach(entry => {
|
|
97
|
-
if (entry.isIntersecting) {
|
|
98
|
-
const image = entry.target;
|
|
99
|
-
image.classList.remove('lazy-bg');
|
|
100
|
-
// console.log('loaded');
|
|
101
|
-
bgObserver.unobserve(image);
|
|
102
|
-
}
|
|
103
|
-
});
|
|
104
|
-
});
|
|
105
|
-
lazyLoadBgs.forEach(image => {
|
|
106
|
-
bgObserver.observe(image);
|
|
107
|
-
});
|
|
108
|
-
}
|
|
109
|
-
}
|
|
110
|
-
getCssClassMap() {
|
|
111
|
-
return {
|
|
112
|
-
[this.imageType]: true,
|
|
113
|
-
'ptc-img': true,
|
|
114
|
-
[this.borderRadius]: true,
|
|
115
|
-
[this.loadMode]: true,
|
|
116
|
-
// [this.imageZIndex] : true
|
|
117
|
-
};
|
|
118
|
-
}
|
|
119
|
-
getCurrentBreakPoints() {
|
|
120
|
-
// Define local variables
|
|
121
|
-
let doc = window.document, temp = doc.createElement('div'), env;
|
|
122
|
-
// Append test node
|
|
123
|
-
doc.body.appendChild(temp);
|
|
124
|
-
// Loop through breakpoints
|
|
125
|
-
for (let i = interfaces.ResponsiveBgVariables.envs.length - 1; i >= 0; i--) {
|
|
126
|
-
env = interfaces.ResponsiveBgVariables.envs[i];
|
|
127
|
-
// Add classes
|
|
128
|
-
temp.className = 'hidden-' + env;
|
|
129
|
-
// Found breakpoint
|
|
130
|
-
if (temp.offsetParent === null) {
|
|
131
|
-
// Remove our test node
|
|
132
|
-
doc.body.removeChild(temp);
|
|
133
|
-
console.log('remove test node');
|
|
134
|
-
// Return current breakpoint
|
|
135
|
-
return env;
|
|
136
|
-
}
|
|
137
|
-
}
|
|
138
|
-
// Breakpoint not found, try fallback
|
|
139
|
-
doc.body.removeChild(temp);
|
|
140
|
-
return this.getFallbackBreakpoint();
|
|
141
|
-
}
|
|
142
|
-
getFallbackBreakpoint() {
|
|
143
|
-
if (window.matchMedia('(min-width: 992px)').matches) {
|
|
144
|
-
return 'lg';
|
|
145
|
-
}
|
|
146
|
-
else if (window.matchMedia('(min-width: 768px)').matches) {
|
|
147
|
-
return 'md';
|
|
148
|
-
}
|
|
149
|
-
else if (window.matchMedia('(min-width: 576px)').matches) {
|
|
150
|
-
return 'sm';
|
|
151
|
-
}
|
|
152
|
-
else {
|
|
153
|
-
return 'xs';
|
|
154
|
-
}
|
|
155
|
-
}
|
|
156
|
-
get el() { return index.getElement(this); }
|
|
157
|
-
};
|
|
10
|
+
let PtcImg = class {
|
|
11
|
+
constructor(hostRef) {
|
|
12
|
+
index.registerInstance(this, hostRef);
|
|
13
|
+
/**
|
|
14
|
+
* Image size for smallest screen
|
|
15
|
+
* <=767px
|
|
16
|
+
*/
|
|
17
|
+
this.sizeXs = '510x340';
|
|
18
|
+
/**
|
|
19
|
+
* Image size for small screen
|
|
20
|
+
* >=768px and <=991px
|
|
21
|
+
*/
|
|
22
|
+
this.sizeSm = '1240x496';
|
|
23
|
+
/**
|
|
24
|
+
* Image size for medium screen
|
|
25
|
+
* >=992px and <=1199px
|
|
26
|
+
*/
|
|
27
|
+
this.sizeMd = '1366x500';
|
|
28
|
+
/**
|
|
29
|
+
* Image solution for large screen
|
|
30
|
+
* >=1200px
|
|
31
|
+
*/
|
|
32
|
+
this.sizeLg = '1920x1080';
|
|
33
|
+
/**
|
|
34
|
+
* Image type
|
|
35
|
+
*/
|
|
36
|
+
this.imageType = 'smart-bg';
|
|
37
|
+
/**
|
|
38
|
+
* Image border shape
|
|
39
|
+
*/
|
|
40
|
+
this.borderRadius = '';
|
|
41
|
+
/**
|
|
42
|
+
* Lazy loading option
|
|
43
|
+
*/
|
|
44
|
+
this.loadMode = 'lazy-bg';
|
|
45
|
+
}
|
|
46
|
+
/**
|
|
47
|
+
* Image Z Index
|
|
48
|
+
*/
|
|
49
|
+
// @Prop() imageZIndex: 'z-index-auto' | 'z-index-n-2' | 'z-index-n-1' | 'z-index-p-1' | 'z-index-p-2' = 'z-index-auto';
|
|
50
|
+
WindowResize() {
|
|
51
|
+
this.setResponsiveBg();
|
|
52
|
+
}
|
|
53
|
+
render() {
|
|
54
|
+
const classMap = this.getCssClassMap();
|
|
55
|
+
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)));
|
|
56
|
+
}
|
|
57
|
+
componentDidLoad() {
|
|
58
|
+
this.addIntersectionObserver();
|
|
59
|
+
this.setResponsiveBg();
|
|
60
|
+
}
|
|
61
|
+
componentWillUpdate() {
|
|
62
|
+
// console.log('componentWillUpdate!');
|
|
63
|
+
this.addIntersectionObserver();
|
|
64
|
+
this.setResponsiveBg();
|
|
65
|
+
}
|
|
66
|
+
//responsive image
|
|
67
|
+
setResponsiveBg() {
|
|
68
|
+
// Define local variables
|
|
69
|
+
let backgrounds = (this.el || document).querySelectorAll(interfaces.ResponsiveBgVariables.selector), el, elData, currentBreakpoint = this.getCurrentBreakPoints();
|
|
70
|
+
// console.log('current breakpoint: ' + currentBreakpoint);
|
|
71
|
+
// Loop through all target elements
|
|
72
|
+
for (var i = 0, len = backgrounds.length; i < len; i++) {
|
|
73
|
+
// Set current variables
|
|
74
|
+
el = backgrounds[i];
|
|
75
|
+
elData = el.getAttribute('data-' + currentBreakpoint);
|
|
76
|
+
// If the data attribute exists, set the background
|
|
77
|
+
if (elData !== null) {
|
|
78
|
+
el.style.backgroundImage = "url('" + elData + "')";
|
|
79
|
+
}
|
|
80
|
+
else {
|
|
81
|
+
if (typeof console == 'object') {
|
|
82
|
+
console.warn('Data attribute: data-' + currentBreakpoint + ' not found on element:\n\n' + el.outerHTML + '\n\n\n');
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
//lazy loading
|
|
88
|
+
addIntersectionObserver() {
|
|
89
|
+
if (!this.imgUrl) {
|
|
90
|
+
console.log('no image!');
|
|
91
|
+
return;
|
|
92
|
+
}
|
|
93
|
+
if ('IntersectionObserver' in window) {
|
|
94
|
+
let lazyLoadBgs = (this.el || document).querySelectorAll('.lazy-bg');
|
|
95
|
+
let bgObserver = new IntersectionObserver(entries => {
|
|
96
|
+
entries.forEach(entry => {
|
|
97
|
+
if (entry.isIntersecting) {
|
|
98
|
+
const image = entry.target;
|
|
99
|
+
image.classList.remove('lazy-bg');
|
|
100
|
+
// console.log('loaded');
|
|
101
|
+
bgObserver.unobserve(image);
|
|
102
|
+
}
|
|
103
|
+
});
|
|
104
|
+
});
|
|
105
|
+
lazyLoadBgs.forEach(image => {
|
|
106
|
+
bgObserver.observe(image);
|
|
107
|
+
});
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
getCssClassMap() {
|
|
111
|
+
return {
|
|
112
|
+
[this.imageType]: true,
|
|
113
|
+
'ptc-img': true,
|
|
114
|
+
[this.borderRadius]: true,
|
|
115
|
+
[this.loadMode]: true,
|
|
116
|
+
// [this.imageZIndex] : true
|
|
117
|
+
};
|
|
118
|
+
}
|
|
119
|
+
getCurrentBreakPoints() {
|
|
120
|
+
// Define local variables
|
|
121
|
+
let doc = window.document, temp = doc.createElement('div'), env;
|
|
122
|
+
// Append test node
|
|
123
|
+
doc.body.appendChild(temp);
|
|
124
|
+
// Loop through breakpoints
|
|
125
|
+
for (let i = interfaces.ResponsiveBgVariables.envs.length - 1; i >= 0; i--) {
|
|
126
|
+
env = interfaces.ResponsiveBgVariables.envs[i];
|
|
127
|
+
// Add classes
|
|
128
|
+
temp.className = 'hidden-' + env;
|
|
129
|
+
// Found breakpoint
|
|
130
|
+
if (temp.offsetParent === null) {
|
|
131
|
+
// Remove our test node
|
|
132
|
+
doc.body.removeChild(temp);
|
|
133
|
+
console.log('remove test node');
|
|
134
|
+
// Return current breakpoint
|
|
135
|
+
return env;
|
|
136
|
+
}
|
|
137
|
+
}
|
|
138
|
+
// Breakpoint not found, try fallback
|
|
139
|
+
doc.body.removeChild(temp);
|
|
140
|
+
return this.getFallbackBreakpoint();
|
|
141
|
+
}
|
|
142
|
+
getFallbackBreakpoint() {
|
|
143
|
+
if (window.matchMedia('(min-width: 992px)').matches) {
|
|
144
|
+
return 'lg';
|
|
145
|
+
}
|
|
146
|
+
else if (window.matchMedia('(min-width: 768px)').matches) {
|
|
147
|
+
return 'md';
|
|
148
|
+
}
|
|
149
|
+
else if (window.matchMedia('(min-width: 576px)').matches) {
|
|
150
|
+
return 'sm';
|
|
151
|
+
}
|
|
152
|
+
else {
|
|
153
|
+
return 'xs';
|
|
154
|
+
}
|
|
155
|
+
}
|
|
156
|
+
get el() { return index.getElement(this); }
|
|
157
|
+
};
|
|
158
158
|
PtcImg.style = ptcImgCss;
|
|
159
159
|
|
|
160
160
|
const ptcOverlayCss = ":host{display:block;position:absolute;top:0;left:0;width:100%;height:100%}:host(.blue){background:linear-gradient(180deg, rgba(25, 123, 192, 0.2) 0%, #197BC0 100%)}:host(.red){background:linear-gradient(180deg, rgba(209, 44, 58, 0.2) 0%, #D12C3A 100%)}:host(.orange){background:linear-gradient(180deg, rgba(195, 119, 41, 0.2) 0%, #C37729 100%)}:host(.green){background:linear-gradient(180deg, rgba(0, 137, 11, 0.2) 0%, #00890B 100%)}:host(.black-1){background:linear-gradient(270deg, rgba(32, 38, 42, 0.32) 33.33%, #20262A 100%)}:host(.black-2){background:linear-gradient(180deg, rgba(32, 38, 42, 0) 0%, #20262A 100%)}@media screen and (min-width: 768px){:host(.black-1){background:linear-gradient(270deg, rgba(32, 38, 42, 0) 33.33%, #20262A 100%)}:host(.black-2){background:linear-gradient(180deg, rgba(32, 38, 42, 0) 0%, #20262A 100%)}}:host(.black-3){background:linear-gradient(180deg, #20262A 0%, rgba(32, 38, 42, 0.55) 100%)}:host(.slate-grey){background:linear-gradient(180deg, rgba(97, 116, 128, 0.2) 0%, #617480 100%)}:host(.radius-sm){border-radius:var(--ptc-border-radius-small)}:host(.radius-md){border-radius:var(--ptc-border-radius-medium)}:host(.radius-lg){border-radius:var(--ptc-border-radius-large)}:host(.radius-x-lg){border-radius:var(--ptc-border-radius-x-large)}:host(.z-index-auto){z-index:auto}:host(.z-index-n-1){z-index:-1}:host(.z-index-n-2){z-index:-2}:host(.z-index-p-1){z-index:1}:host(.z-index-p-2){z-index:2}";
|
|
161
161
|
|
|
162
|
-
let PtcOverlay = class {
|
|
163
|
-
constructor(hostRef) {
|
|
164
|
-
index.registerInstance(this, hostRef);
|
|
165
|
-
/**
|
|
166
|
-
* Overlay z-index
|
|
167
|
-
*/
|
|
168
|
-
this.overlayZIndex = 'z-index-auto';
|
|
169
|
-
}
|
|
170
|
-
render() {
|
|
171
|
-
const classMap = this.getCssClassMap();
|
|
172
|
-
return index.h(index.Host, { class: classMap });
|
|
173
|
-
}
|
|
174
|
-
getCssClassMap() {
|
|
175
|
-
return {
|
|
176
|
-
[this.filterColor]: !!this.filterColor ? true : false,
|
|
177
|
-
[this.borderRadius]: !!this.borderRadius ? true : false,
|
|
178
|
-
[this.overlayZIndex]: true
|
|
179
|
-
};
|
|
180
|
-
}
|
|
181
|
-
};
|
|
162
|
+
let PtcOverlay = class {
|
|
163
|
+
constructor(hostRef) {
|
|
164
|
+
index.registerInstance(this, hostRef);
|
|
165
|
+
/**
|
|
166
|
+
* Overlay z-index
|
|
167
|
+
*/
|
|
168
|
+
this.overlayZIndex = 'z-index-auto';
|
|
169
|
+
}
|
|
170
|
+
render() {
|
|
171
|
+
const classMap = this.getCssClassMap();
|
|
172
|
+
return index.h(index.Host, { class: classMap });
|
|
173
|
+
}
|
|
174
|
+
getCssClassMap() {
|
|
175
|
+
return {
|
|
176
|
+
[this.filterColor]: !!this.filterColor ? true : false,
|
|
177
|
+
[this.borderRadius]: !!this.borderRadius ? true : false,
|
|
178
|
+
[this.overlayZIndex]: true
|
|
179
|
+
};
|
|
180
|
+
}
|
|
181
|
+
};
|
|
182
182
|
PtcOverlay.style = ptcOverlayCss;
|
|
183
183
|
|
|
184
184
|
exports.ptc_img = PtcImg;
|
|
@@ -6,26 +6,26 @@ const index = require('./index-3adcf9f4.js');
|
|
|
6
6
|
|
|
7
7
|
const ptcInputCss = ".sc-ptc-input-h{display:block}.form-group.sc-ptc-input{position:relative}.ptc-input.sc-ptc-input{width:-webkit-fill-available;width:-moz-available;width:stretch;display:block;padding:6px 12px;border:none;border-bottom:1px solid #3b4550;padding-left:20px;box-shadow:1px 1px 25px 0 rgba(0, 0, 0, 0.16);border-top-left-radius:5px;border-top-right-radius:5px;border-bottom-left-radius:0;border-bottom-right-radius:0;font-size:16px;color:#707070;padding-top:14px;background:#fff}.floating-label.sc-ptc-input{position:absolute;left:0;bottom:0;transform:translate(20px, -10px);font-family:Raleway;font-size:16px;font-weight:500;line-height:1.07;text-align:left;transition:all 0.4s ease-in-out}.focused.sc-ptc-input+.floating-label.sc-ptc-input{font-size:10px;font-weight:700;line-height:1.5;transform:translate(20px, -24px)}";
|
|
8
8
|
|
|
9
|
-
let PtcInput = class {
|
|
10
|
-
constructor(hostRef) {
|
|
11
|
-
index.registerInstance(this, hostRef);
|
|
12
|
-
this.blurEvent = index.createEvent(this, "blurEvent", 7);
|
|
13
|
-
this.focusEvent = index.createEvent(this, "focusEvent", 7);
|
|
14
|
-
this.focused = false;
|
|
15
|
-
this.onBlur = () => {
|
|
16
|
-
this.blurEvent.emit();
|
|
17
|
-
this.focused = false;
|
|
18
|
-
};
|
|
19
|
-
this.onFocus = () => {
|
|
20
|
-
this.focusEvent.emit();
|
|
21
|
-
this.focused = true;
|
|
22
|
-
};
|
|
23
|
-
}
|
|
24
|
-
render() {
|
|
25
|
-
const focusState = this.focused ? ' focused' : '';
|
|
26
|
-
return (index.h("div", { class: "form-group" }, index.h("input", { type: this.type, id: this.inputId, class: `ptc-input form-control${focusState}`, "data-eloqua-name": this.dataEloquaName, name: this.inputName, onBlur: this.onBlur, onFocus: this.onFocus }), index.h("label", { htmlFor: this.inputId, class: "floating-label" }, index.h("slot", null))));
|
|
27
|
-
}
|
|
28
|
-
};
|
|
9
|
+
let PtcInput = class {
|
|
10
|
+
constructor(hostRef) {
|
|
11
|
+
index.registerInstance(this, hostRef);
|
|
12
|
+
this.blurEvent = index.createEvent(this, "blurEvent", 7);
|
|
13
|
+
this.focusEvent = index.createEvent(this, "focusEvent", 7);
|
|
14
|
+
this.focused = false;
|
|
15
|
+
this.onBlur = () => {
|
|
16
|
+
this.blurEvent.emit();
|
|
17
|
+
this.focused = false;
|
|
18
|
+
};
|
|
19
|
+
this.onFocus = () => {
|
|
20
|
+
this.focusEvent.emit();
|
|
21
|
+
this.focused = true;
|
|
22
|
+
};
|
|
23
|
+
}
|
|
24
|
+
render() {
|
|
25
|
+
const focusState = this.focused ? ' focused' : '';
|
|
26
|
+
return (index.h("div", { class: "form-group" }, index.h("input", { type: this.type, id: this.inputId, class: `ptc-input form-control${focusState}`, "data-eloqua-name": this.dataEloquaName, name: this.inputName, onBlur: this.onBlur, onFocus: this.onFocus }), index.h("label", { htmlFor: this.inputId, class: "floating-label" }, index.h("slot", null))));
|
|
27
|
+
}
|
|
28
|
+
};
|
|
29
29
|
PtcInput.style = ptcInputCss;
|
|
30
30
|
|
|
31
31
|
exports.ptc_input = PtcInput;
|
|
@@ -6,48 +6,48 @@ const index = require('./index-3adcf9f4.js');
|
|
|
6
6
|
|
|
7
7
|
const ptcLinkCss = ":host{display:block}.disabled{pointer-events:none;cursor:default;text-decoration:none}.ptc-link{display:inline-block;color:var(--color-primary-uigrey);font-weight:var(--ptc-font-weight-black);position:relative;line-height:var(--ptc-line-height-normal);outline:none;text-decoration:none}.simple::after{content:\"\";position:absolute;width:100%;left:0px;bottom:2px;transition:opacity var(--ptc-transition-fast) var(--ptc-standard-ease);border-bottom:2px solid var(--color-primary-green);opacity:0}.simple:hover.simple::after{opacity:1}.arrow{margin-right:var(--ptc-element-spacing-01)}.arrow::after{position:absolute;display:block;content:\"\";width:var(--ptc-element-spacing-06);border-bottom:2px solid var(--color-primary-green);bottom:1px;transition:width var(--ptc-transition-fast) var(--ptc-standard-ease)}.arrow:hover.arrow::after{width:100%}.uppercase{text-transform:uppercase}.small{font-size:var(--ptc-font-size-small)}.medium{font-size:var(--ptc-font-size-medium)}.large{font-size:var(--ptc-font-size-large)}.ptc-link.arrow icon-asset{position:absolute;right:-25px;transition:transform var(--ptc-transition-fast) var(--ptc-standard-ease)}.ptc-link.arrow icon-asset svg{fill:var(--color-primary-green) !important}.ptc-link.arrow-plm icon-asset{position:absolute;right:-6.75px;transform:translate(100%, 8%)}.ptc-link.arrow-plm svg{fill:#3DAB49 !important}.ptc-link:hover.arrow icon-asset{transform:translateX(var(--ptc-element-spacing-04))}.nav-title:focus,.nav-title-link:focus,.primary-nav-link:focus,.secondary-nav-link:focus,.footer-nav-link:focus,.copyright-link:focus{outline:3px solid var(--color-blue-07);outline-offset:2px}.nav-title{box-sizing:border-box;color:var(--color-white);display:inline-block;font-size:15px;font-stretch:100%;font-weight:var(--ptc-font-weight-extrabold);letter-spacing:0.15px;line-height:25.05px;list-style:none;margin-bottom:10px;text-align:left}.primary-nav-link{background-color:transparent;box-sizing:border-box;color:#f3f3f4;display:inline-block;font-size:15px;font-stretch:100%;font-weight:var(--ptc-font-weight-extrabold);letter-spacing:0.3px;line-height:25.95px;list-style:none;margin:var(--ptc-element-spacing-01) var(--ptc-element-spacing-03);padding:var(--ptc-element-spacing-02) var(--ptc-element-spacing-05);padding-bottom:7px;position:relative;text-decoration:none;transition:background-color var(--ptc-transition-medium) var(--ptc-decelerated-ease)}.primary-nav-link:hover{border-radius:4px;background-color:#20262a;text-decoration:none;outline:none}.nav-title-link{background-color:transparent;box-sizing:border-box;color:var(--color-white);font-size:var(--ptc-font-size-x-small);font-stretch:100%;font-weight:var(--ptc-font-weight-extrabold);line-height:15px;list-style:none;text-align:left;text-decoration-color:var(--color-white);text-decoration:none;transition:border-color var(--ptc-transition-medium) var(--ptc-decelerated-ease);border-bottom:1.5px solid transparent;display:inline-block}.nav-title-link:hover{color:var(--color-white);border-bottom:1.5px solid var(--color-secondary-turtlegreen)}.secondary-nav-link{display:inline-block;background-color:transparent;box-sizing:border-box;color:var(--color-white);font-size:var(--ptc-font-size-x-small);font-stretch:100%;font-style:normal;font-weight:var(--ptc-font-weight-semibold);letter-spacing:0.12px;line-height:14.4px;list-style:none;margin-bottom:12px;text-align:left;text-decoration:none;transition:border-color var(--ptc-transition-medium) var(--ptc-decelerated-ease);border-bottom:1.5px solid transparent;white-space:nowrap}.secondary-nav-link:hover{color:var(--color-white);border-bottom:1.5px solid #74c34d;border-radius:0;text-decoration:none}.footer-nav-link{color:var(--color-white);transition:border var(--ptc-transition-medium) var(--ptc-standard-ease), color var(--ptc-transition-medium) var(--ptc-standard-ease);border-bottom:1px solid transparent;outline:none;text-decoration:none;font-weight:var(--ptc-font-weight-semibold);line-height:1.73;letter-spacing:1.13px;text-align:left;font-size:15px}.footer-nav-link:hover{outline:none;text-decoration:none;border-bottom:0.1rem solid var(--color-secondary-turtlegreen);color:var(--color-secondary-turtlegreen)}.copyright-link{color:var(--color-white);font-size:13px;font-weight:var(--ptc-font-weight-normal);line-height:2;display:inline-block}.arrow-plm{color:var(--color-white);font-weight:var(--ptc-font-weight-extrabold);line-height:var(--ptc-line-height-19);text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:transparent;text-underline-offset:2px;transition:text-decoration-color var(--ptc-transition-medium) var(--ptc-acceletated-ease)}.arrow-plm:hover{text-decoration-color:#3DAB49}";
|
|
8
8
|
|
|
9
|
-
let PtcLink = class {
|
|
10
|
-
constructor(hostRef) {
|
|
11
|
-
index.registerInstance(this, hostRef);
|
|
12
|
-
/**
|
|
13
|
-
* Disabled link
|
|
14
|
-
*/
|
|
15
|
-
this.disabled = false;
|
|
16
|
-
/**
|
|
17
|
-
* Rxternal link
|
|
18
|
-
* */
|
|
19
|
-
this.external = false;
|
|
20
|
-
/**
|
|
21
|
-
* Target
|
|
22
|
-
*/
|
|
23
|
-
this.target = '_self';
|
|
24
|
-
/**
|
|
25
|
-
* Theme
|
|
26
|
-
*/
|
|
27
|
-
this.theme = 'simple';
|
|
28
|
-
/**
|
|
29
|
-
* Uppercase
|
|
30
|
-
*/
|
|
31
|
-
this.uppercase = false;
|
|
32
|
-
/**
|
|
33
|
-
* Font Size
|
|
34
|
-
*/
|
|
35
|
-
this.fontSize = 'medium';
|
|
36
|
-
}
|
|
37
|
-
render() {
|
|
38
|
-
const classMap = this.getCssClassMap();
|
|
39
|
-
return (index.h(index.Host, null, index.h("a", { class: classMap, href: this.href, target: this.external ? '_blank' : this.target, title: this.linkTitle }, this.theme == 'arrow' ? index.h("icon-asset", { type: "solid", size: "small", name: "arrow-right" }) : '', this.theme == 'arrow-plm' ? index.h("icon-asset", { type: "ptc", size: "x-small", name: "button-arrow-right" }) : '', index.h("slot", null))));
|
|
40
|
-
}
|
|
41
|
-
getCssClassMap() {
|
|
42
|
-
return {
|
|
43
|
-
['ptc-link']: true,
|
|
44
|
-
[this.theme]: true,
|
|
45
|
-
['uppercase']: this.uppercase,
|
|
46
|
-
['disabled']: this.disabled,
|
|
47
|
-
[this.fontSize]: true,
|
|
48
|
-
};
|
|
49
|
-
}
|
|
50
|
-
};
|
|
9
|
+
let PtcLink = class {
|
|
10
|
+
constructor(hostRef) {
|
|
11
|
+
index.registerInstance(this, hostRef);
|
|
12
|
+
/**
|
|
13
|
+
* Disabled link
|
|
14
|
+
*/
|
|
15
|
+
this.disabled = false;
|
|
16
|
+
/**
|
|
17
|
+
* Rxternal link
|
|
18
|
+
* */
|
|
19
|
+
this.external = false;
|
|
20
|
+
/**
|
|
21
|
+
* Target
|
|
22
|
+
*/
|
|
23
|
+
this.target = '_self';
|
|
24
|
+
/**
|
|
25
|
+
* Theme
|
|
26
|
+
*/
|
|
27
|
+
this.theme = 'simple';
|
|
28
|
+
/**
|
|
29
|
+
* Uppercase
|
|
30
|
+
*/
|
|
31
|
+
this.uppercase = false;
|
|
32
|
+
/**
|
|
33
|
+
* Font Size
|
|
34
|
+
*/
|
|
35
|
+
this.fontSize = 'medium';
|
|
36
|
+
}
|
|
37
|
+
render() {
|
|
38
|
+
const classMap = this.getCssClassMap();
|
|
39
|
+
return (index.h(index.Host, null, index.h("a", { class: classMap, href: this.href, target: this.external ? '_blank' : this.target, title: this.linkTitle }, this.theme == 'arrow' ? index.h("icon-asset", { type: "solid", size: "small", name: "arrow-right" }) : '', this.theme == 'arrow-plm' ? index.h("icon-asset", { type: "ptc", size: "x-small", name: "button-arrow-right" }) : '', index.h("slot", null))));
|
|
40
|
+
}
|
|
41
|
+
getCssClassMap() {
|
|
42
|
+
return {
|
|
43
|
+
['ptc-link']: true,
|
|
44
|
+
[this.theme]: true,
|
|
45
|
+
['uppercase']: this.uppercase,
|
|
46
|
+
['disabled']: this.disabled,
|
|
47
|
+
[this.fontSize]: true,
|
|
48
|
+
};
|
|
49
|
+
}
|
|
50
|
+
};
|
|
51
51
|
PtcLink.style = ptcLinkCss;
|
|
52
52
|
|
|
53
53
|
exports.ptc_link = PtcLink;
|
|
@@ -6,26 +6,26 @@ const index = require('./index-3adcf9f4.js');
|
|
|
6
6
|
|
|
7
7
|
const ptcListCss = ".sc-ptc-list-h{display:block}.list-primary.sc-ptc-list-h li.sc-ptc-list{font-size:var(--ptc-font-size-medium);line-height:var(--ptc-line-height-normal);letter-spacing:var(--ptc-letter-spacing-normal);list-style:none}.list-primary.sc-ptc-list-h li.sc-ptc-list:not(:last-child){margin-bottom:0.625rem}.list-primary.sc-ptc-list-h li.sc-ptc-list a.sc-ptc-list{color:var(--color-white);outline:none;text-decoration:none;font-family:Rajdhani;font-size:var(--ptc-font-size-medium);font-weight:var(--ptc-font-weight-bold);line-height:var(--ptc-line-height-normal);text-transform:uppercase;letter-spacing:var(--ptc-letter-spacing-normal)}.list-primary.sc-ptc-list-h li.sc-ptc-list a.sc-ptc-list:hover{color:var(--color-white);border-bottom:1.5px solid var(--color-primary-green)}";
|
|
8
8
|
|
|
9
|
-
let PtcList = class {
|
|
10
|
-
constructor(hostRef) {
|
|
11
|
-
index.registerInstance(this, hostRef);
|
|
12
|
-
}
|
|
13
|
-
render() {
|
|
14
|
-
const classMap = this.getCssClassMap();
|
|
15
|
-
const listItems = this.listItems;
|
|
16
|
-
if (!listItems || listItems.length === 0) {
|
|
17
|
-
return null;
|
|
18
|
-
}
|
|
19
|
-
return (index.h(index.Host, { class: classMap }, index.h("ul", null, listItems.map(listItem => {
|
|
20
|
-
index.h("li", null, "$", listItem);
|
|
21
|
-
}))));
|
|
22
|
-
}
|
|
23
|
-
getCssClassMap() {
|
|
24
|
-
return {
|
|
25
|
-
[this.listType]: this.listItems ? true : false,
|
|
26
|
-
};
|
|
27
|
-
}
|
|
28
|
-
};
|
|
9
|
+
let PtcList = class {
|
|
10
|
+
constructor(hostRef) {
|
|
11
|
+
index.registerInstance(this, hostRef);
|
|
12
|
+
}
|
|
13
|
+
render() {
|
|
14
|
+
const classMap = this.getCssClassMap();
|
|
15
|
+
const listItems = this.listItems;
|
|
16
|
+
if (!listItems || listItems.length === 0) {
|
|
17
|
+
return null;
|
|
18
|
+
}
|
|
19
|
+
return (index.h(index.Host, { class: classMap }, index.h("ul", null, listItems.map(listItem => {
|
|
20
|
+
index.h("li", null, "$", listItem);
|
|
21
|
+
}))));
|
|
22
|
+
}
|
|
23
|
+
getCssClassMap() {
|
|
24
|
+
return {
|
|
25
|
+
[this.listType]: this.listItems ? true : false,
|
|
26
|
+
};
|
|
27
|
+
}
|
|
28
|
+
};
|
|
29
29
|
PtcList.style = ptcListCss;
|
|
30
30
|
|
|
31
31
|
exports.ptc_list = PtcList;
|
|
@@ -6,18 +6,18 @@ const index = require('./index-3adcf9f4.js');
|
|
|
6
6
|
|
|
7
7
|
const ptcLottieCss = ":host{display:block;width:100%;height:auto}";
|
|
8
8
|
|
|
9
|
-
let PtcLottie = class {
|
|
10
|
-
constructor(hostRef) {
|
|
11
|
-
index.registerInstance(this, hostRef);
|
|
12
|
-
/**
|
|
13
|
-
* Animation speed
|
|
14
|
-
*/
|
|
15
|
-
this.speed = 1;
|
|
16
|
-
}
|
|
17
|
-
render() {
|
|
18
|
-
return (index.h("lottie-player", { autoplay: true, loop: true, src: this.jsonSrc, speed: this.speed }));
|
|
19
|
-
}
|
|
20
|
-
};
|
|
9
|
+
let PtcLottie = class {
|
|
10
|
+
constructor(hostRef) {
|
|
11
|
+
index.registerInstance(this, hostRef);
|
|
12
|
+
/**
|
|
13
|
+
* Animation speed
|
|
14
|
+
*/
|
|
15
|
+
this.speed = 1;
|
|
16
|
+
}
|
|
17
|
+
render() {
|
|
18
|
+
return (index.h("lottie-player", { autoplay: true, loop: true, src: this.jsonSrc, speed: this.speed }));
|
|
19
|
+
}
|
|
20
|
+
};
|
|
21
21
|
PtcLottie.style = ptcLottieCss;
|
|
22
22
|
|
|
23
23
|
exports.ptc_lottie = PtcLottie;
|