@ptcwebops/ptcw-design 6.2.20 → 6.2.21
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/event-jumbotron-example_15.cjs.entry.js +5 -3
- package/dist/cjs/event-podcast-slider-example.cjs.entry.js +34 -50
- package/dist/cjs/featured-list.cjs.entry.js +1 -1
- package/dist/cjs/innovator-toggle-container.cjs.entry.js +1 -1
- package/dist/cjs/ptc-bio-card.cjs.entry.js +1 -1
- package/dist/cjs/ptc-card_2.cjs.entry.js +6 -1
- package/dist/cjs/ptc-case-studies-slider.cjs.entry.js +1 -1
- package/dist/cjs/ptc-featured-list.cjs.entry.js +1 -1
- package/dist/cjs/ptc-filter-level-theater.cjs.entry.js +1 -1
- package/dist/cjs/ptc-icon-component.cjs.entry.js +39 -2
- package/dist/cjs/ptc-jumbotron.cjs.entry.js +1 -1
- package/dist/cjs/ptc-podcast-card.cjs.entry.js +1 -1
- package/dist/cjs/ptc-product-card.cjs.entry.js +1 -1
- package/dist/cjs/ptc-product-category.cjs.entry.js +1 -1
- package/dist/cjs/ptc-product-highlight-card.cjs.entry.js +1 -1
- package/dist/cjs/ptc-readmore-char.cjs.entry.js +1 -1
- package/dist/cjs/ptc-readmore-v3.cjs.entry.js +1 -1
- package/dist/cjs/ptc-tooltip-v2.cjs.entry.js +1 -1
- package/dist/cjs/ptc-value-led-speed-bump.cjs.entry.js +1 -1
- package/dist/cjs/ptc-white-paper.cjs.entry.js +1 -1
- package/dist/collection/components/innovator-toggle-container/innovator-toggle-container.css +12 -5
- package/dist/collection/components/organism-bundles/bundle-featured-list/featured-list.css +9 -2
- package/dist/collection/components/organism-bundles/event-jumbotron-example/event-jumbotron-example.css +25 -3
- package/dist/collection/components/organism-bundles/event-jumbotron-example/event-jumbotron-example.js +3 -1
- package/dist/collection/components/organism-bundles/event-podcast-slider-example/event-podcast-slider-example.js +34 -50
- package/dist/collection/components/ptc-bio-card/ptc-bio-card.css +12 -5
- package/dist/collection/components/ptc-case-studies-slider/ptc-case-studies-slider.css +12 -5
- package/dist/collection/components/ptc-featured-list/ptc-featured-list.css +12 -5
- package/dist/collection/components/ptc-filter-level-theater/ptc-filter-level-theater.css +12 -5
- package/dist/collection/components/ptc-icon-component/ptc-icon-component.css +12 -0
- package/dist/collection/components/ptc-icon-component/ptc-icon-component.js +38 -1
- package/dist/collection/components/ptc-jumbotron/ptc-jumbotron.css +12 -5
- package/dist/collection/components/ptc-modal/ptc-modal.css +13 -2
- package/dist/collection/components/ptc-podcast-card/ptc-podcast-card.css +12 -5
- package/dist/collection/components/ptc-preloader-section/ptc-preloader-section.css +68 -0
- package/dist/collection/components/ptc-preloader-section/ptc-preloader-section.js +5 -0
- package/dist/collection/components/ptc-product-card/ptc-product-card.css +12 -5
- package/dist/collection/components/ptc-product-category/ptc-product-category.css +12 -5
- package/dist/collection/components/ptc-product-highlight-card/ptc-product-highlight-card.css +12 -5
- package/dist/collection/components/ptc-readmore-char/ptc-readmore-char.css +12 -5
- package/dist/collection/components/ptc-readmore-v3/ptc-readmore-v3.css +12 -5
- package/dist/collection/components/ptc-tooltip-v2/ptc-tooltip-v2.css +12 -5
- package/dist/collection/components/ptc-value-led-speed-bump/ptc-value-led-speed-bump.css +12 -5
- package/dist/collection/components/ptc-white-paper/ptc-white-paper.css +12 -5
- package/dist/custom-elements/index.js +100 -72
- package/dist/esm/event-jumbotron-example_15.entry.js +5 -3
- package/dist/esm/event-podcast-slider-example.entry.js +34 -50
- package/dist/esm/featured-list.entry.js +1 -1
- package/dist/esm/innovator-toggle-container.entry.js +1 -1
- package/dist/esm/ptc-bio-card.entry.js +1 -1
- package/dist/esm/ptc-card_2.entry.js +6 -1
- package/dist/esm/ptc-case-studies-slider.entry.js +1 -1
- package/dist/esm/ptc-featured-list.entry.js +1 -1
- package/dist/esm/ptc-filter-level-theater.entry.js +1 -1
- package/dist/esm/ptc-icon-component.entry.js +39 -2
- package/dist/esm/ptc-jumbotron.entry.js +1 -1
- package/dist/esm/ptc-podcast-card.entry.js +1 -1
- package/dist/esm/ptc-product-card.entry.js +1 -1
- package/dist/esm/ptc-product-category.entry.js +1 -1
- package/dist/esm/ptc-product-highlight-card.entry.js +1 -1
- package/dist/esm/ptc-readmore-char.entry.js +1 -1
- package/dist/esm/ptc-readmore-v3.entry.js +1 -1
- package/dist/esm/ptc-tooltip-v2.entry.js +1 -1
- package/dist/esm/ptc-value-led-speed-bump.entry.js +1 -1
- package/dist/esm/ptc-white-paper.entry.js +1 -1
- package/dist/ptcw-design/p-0cf5bc9e.entry.js +1 -0
- package/dist/ptcw-design/{p-1cff585f.entry.js → p-12e61bb5.entry.js} +1 -1
- package/dist/ptcw-design/p-17c3f01a.entry.js +1 -0
- package/dist/ptcw-design/p-1a0bf166.entry.js +1 -0
- package/dist/ptcw-design/{p-a3a04f4e.entry.js → p-25178331.entry.js} +1 -1
- package/dist/ptcw-design/p-2f7ea1a6.entry.js +1 -0
- package/dist/ptcw-design/p-398d2ca5.entry.js +1 -0
- package/dist/ptcw-design/p-426715a4.entry.js +1 -0
- package/dist/ptcw-design/{p-dc488936.entry.js → p-58bb25e6.entry.js} +1 -1
- package/dist/ptcw-design/p-5feaea80.entry.js +1 -0
- package/dist/ptcw-design/p-759f6457.entry.js +1 -0
- package/dist/ptcw-design/{p-d3e5b65c.entry.js → p-815848f6.entry.js} +1 -1
- package/dist/ptcw-design/p-885b3428.entry.js +1 -0
- package/dist/ptcw-design/p-a114198f.entry.js +1 -0
- package/dist/ptcw-design/{p-7eda2750.entry.js → p-a8f30586.entry.js} +1 -1
- package/dist/ptcw-design/{p-fce2bd81.entry.js → p-b59f30d5.entry.js} +1 -1
- package/dist/ptcw-design/p-dc54b2b0.entry.js +1 -0
- package/dist/ptcw-design/p-e4b034b9.entry.js +1 -0
- package/dist/ptcw-design/{p-48183365.entry.js → p-e9cb2483.entry.js} +1 -1
- package/dist/ptcw-design/p-fd8f2c86.entry.js +1 -0
- package/dist/ptcw-design/ptcw-design.css +1 -1
- package/dist/ptcw-design/ptcw-design.esm.js +1 -1
- package/dist/types/components/ptc-icon-component/ptc-icon-component.d.ts +5 -0
- package/package.json +1 -1
- package/readme.md +1 -1
- package/dist/ptcw-design/p-1022ad8b.entry.js +0 -1
- package/dist/ptcw-design/p-10623bac.entry.js +0 -1
- package/dist/ptcw-design/p-136a91bf.entry.js +0 -1
- package/dist/ptcw-design/p-1b7087e7.entry.js +0 -1
- package/dist/ptcw-design/p-3f71553e.entry.js +0 -1
- package/dist/ptcw-design/p-583608d9.entry.js +0 -1
- package/dist/ptcw-design/p-85c29073.entry.js +0 -1
- package/dist/ptcw-design/p-876aec1e.entry.js +0 -1
- package/dist/ptcw-design/p-8daf00ae.entry.js +0 -1
- package/dist/ptcw-design/p-d734b373.entry.js +0 -1
- package/dist/ptcw-design/p-dd73c4d1.entry.js +0 -1
- package/dist/ptcw-design/p-e9a7475b.entry.js +0 -1
- package/dist/ptcw-design/p-eb85c019.entry.js +0 -1
|
@@ -2,62 +2,46 @@ import { Host, h } from '@stencil/core';
|
|
|
2
2
|
import Swiper, { Navigation, Pagination, Scrollbar, Mousewheel } from 'swiper';
|
|
3
3
|
export class EventPodcastSliderExample {
|
|
4
4
|
componentDidLoad() {
|
|
5
|
-
const swiperContainer = this.el.querySelector('.swiper-container');
|
|
6
|
-
const slides = swiperContainer.querySelectorAll('.swiper-slide');
|
|
5
|
+
//const swiperContainer = this.el.querySelector('.swiper-container');
|
|
6
|
+
//const slides = swiperContainer.querySelectorAll('.swiper-slide');
|
|
7
7
|
// Define a desktop breakpoint
|
|
8
|
-
const isDesktop = window.matchMedia('(min-width: 992px)').matches;
|
|
8
|
+
//const isDesktop = window.matchMedia('(min-width: 992px)').matches;
|
|
9
9
|
setTimeout(() => {
|
|
10
10
|
let list = this.el.querySelector('.event-slider-cards');
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
11
|
+
this.listSwp = new Swiper(list, {
|
|
12
|
+
// Customize options here
|
|
13
|
+
modules: [Navigation, Pagination, Scrollbar, Mousewheel],
|
|
14
|
+
slidesPerView: 'auto',
|
|
15
|
+
spaceBetween: 24,
|
|
16
|
+
//centeredSlides: true,
|
|
17
|
+
centeredSlidesBounds: true,
|
|
18
|
+
initialSlide: 0,
|
|
19
|
+
centerInsufficientSlides: false,
|
|
20
|
+
freeMode: true,
|
|
21
|
+
scrollbar: {
|
|
22
|
+
el: this.swiperPaginationRef,
|
|
23
|
+
draggable: true,
|
|
24
|
+
},
|
|
25
|
+
navigation: {
|
|
26
|
+
nextEl: this.swiperButtonNextRef,
|
|
27
|
+
prevEl: this.swiperButtonPrevRef,
|
|
28
|
+
},
|
|
29
|
+
mousewheel: {
|
|
30
|
+
forceToAxis: true,
|
|
31
|
+
sensitivity: 100,
|
|
32
|
+
},
|
|
33
|
+
breakpoints: {
|
|
34
|
+
992: {
|
|
35
|
+
slidesPerView: 4,
|
|
25
36
|
},
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
prevEl: this.swiperButtonPrevRef,
|
|
37
|
+
1200: {
|
|
38
|
+
spaceBetween: 32,
|
|
29
39
|
},
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
sensitivity: 100,
|
|
40
|
+
1400: {
|
|
41
|
+
spaceBetween: 40,
|
|
33
42
|
},
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
slidesPerView: 4,
|
|
37
|
-
},
|
|
38
|
-
1200: {
|
|
39
|
-
spaceBetween: 32,
|
|
40
|
-
},
|
|
41
|
-
1400: {
|
|
42
|
-
spaceBetween: 40,
|
|
43
|
-
},
|
|
44
|
-
},
|
|
45
|
-
});
|
|
46
|
-
}
|
|
47
|
-
else {
|
|
48
|
-
const nextBtn = this.el.querySelector('.swiper-button-next');
|
|
49
|
-
const prevBtn = this.el.querySelector('.swiper-button-prev');
|
|
50
|
-
const scrollbar = this.el.querySelector('.swiper-scrollbar');
|
|
51
|
-
if (nextBtn) {
|
|
52
|
-
nextBtn.setAttribute('style', 'display: none;');
|
|
53
|
-
}
|
|
54
|
-
if (prevBtn) {
|
|
55
|
-
prevBtn.setAttribute('style', 'display: none;');
|
|
56
|
-
}
|
|
57
|
-
if (scrollbar) {
|
|
58
|
-
scrollbar.setAttribute('style', 'display: none;');
|
|
59
|
-
}
|
|
60
|
-
}
|
|
43
|
+
},
|
|
44
|
+
});
|
|
61
45
|
}, 100);
|
|
62
46
|
}
|
|
63
47
|
render() {
|
|
@@ -82,20 +82,20 @@ a:focus-visible {
|
|
|
82
82
|
border-radius: var(--ptc-border-radius-standard);
|
|
83
83
|
}
|
|
84
84
|
|
|
85
|
-
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a), .light-links a.light-link, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a), .background-grey-10 a.light-link, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a), .background-plm-grey a.light-link {
|
|
85
|
+
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a), .light-links a.light-link, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a), .background-grey-10 a.light-link, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a), .background-plm-grey a.light-link {
|
|
86
86
|
color: var(--color-blue-04);
|
|
87
87
|
}
|
|
88
|
-
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited, .light-links a.light-link:visited, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited, .background-grey-10 a.light-link:visited, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited, .background-plm-grey a.light-link:visited {
|
|
88
|
+
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited, .light-links a.light-link:visited, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited, .background-grey-10 a.light-link:visited, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited, .background-plm-grey a.light-link:visited {
|
|
89
89
|
color: var(--color-blue-06);
|
|
90
90
|
}
|
|
91
|
-
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):active, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited:active, .light-links a.light-link:active, .light-links a.light-link:visited:active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited:active, .background-grey-10 a.light-link:active, .background-grey-10 a.light-link:visited:active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited:active, .background-plm-grey a.light-link:active, .background-plm-grey a.light-link:visited:active {
|
|
91
|
+
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):active, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:active, .light-links a.light-link:active, .light-links a.light-link:visited:active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:active, .background-grey-10 a.light-link:active, .background-grey-10 a.light-link:visited:active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:active, .background-plm-grey a.light-link:active, .background-plm-grey a.light-link:visited:active {
|
|
92
92
|
transition: none;
|
|
93
93
|
color: var(--color-blue-07);
|
|
94
94
|
}
|
|
95
|
-
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):hover, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited:hover, .light-links a.light-link:hover, .light-links a.light-link:visited:hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited:hover, .background-grey-10 a.light-link:hover, .background-grey-10 a.light-link:visited:hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited:hover, .background-plm-grey a.light-link:hover, .background-plm-grey a.light-link:visited:hover {
|
|
95
|
+
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):hover, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:hover, .light-links a.light-link:hover, .light-links a.light-link:visited:hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:hover, .background-grey-10 a.light-link:hover, .background-grey-10 a.light-link:visited:hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:hover, .background-plm-grey a.light-link:hover, .background-plm-grey a.light-link:visited:hover {
|
|
96
96
|
color: var(--color-blue-05);
|
|
97
97
|
}
|
|
98
|
-
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a).disabled, .light-links a.light-link.disabled, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a).disabled, .background-grey-10 a.light-link.disabled, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a).disabled, .background-plm-grey a.light-link.disabled {
|
|
98
|
+
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a).disabled, .light-links a.light-link.disabled, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a).disabled, .background-grey-10 a.light-link.disabled, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a).disabled, .background-plm-grey a.light-link.disabled {
|
|
99
99
|
color: var(--color-gray-04) !important;
|
|
100
100
|
cursor: not-allowed;
|
|
101
101
|
}
|
|
@@ -144,6 +144,13 @@ a:focus-visible {
|
|
|
144
144
|
color: var(--color-green-06);
|
|
145
145
|
}
|
|
146
146
|
|
|
147
|
+
.vjs-social-share-links a {
|
|
148
|
+
color: var(--color-white);
|
|
149
|
+
}
|
|
150
|
+
.vjs-social-share-links a:hover {
|
|
151
|
+
color: var(--color-white);
|
|
152
|
+
}
|
|
153
|
+
|
|
147
154
|
:host {
|
|
148
155
|
display: block;
|
|
149
156
|
color: var(--color-gray-10);
|
|
@@ -781,20 +781,20 @@ a:focus-visible {
|
|
|
781
781
|
border-radius: var(--ptc-border-radius-standard);
|
|
782
782
|
}
|
|
783
783
|
|
|
784
|
-
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a), .light-links a.light-link, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a), .background-grey-10 a.light-link, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a), .background-plm-grey a.light-link {
|
|
784
|
+
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a), .light-links a.light-link, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a), .background-grey-10 a.light-link, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a), .background-plm-grey a.light-link {
|
|
785
785
|
color: var(--color-blue-04);
|
|
786
786
|
}
|
|
787
|
-
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited, .light-links a.light-link:visited, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited, .background-grey-10 a.light-link:visited, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited, .background-plm-grey a.light-link:visited {
|
|
787
|
+
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited, .light-links a.light-link:visited, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited, .background-grey-10 a.light-link:visited, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited, .background-plm-grey a.light-link:visited {
|
|
788
788
|
color: var(--color-blue-06);
|
|
789
789
|
}
|
|
790
|
-
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):active, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited:active, .light-links a.light-link:active, .light-links a.light-link:visited:active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited:active, .background-grey-10 a.light-link:active, .background-grey-10 a.light-link:visited:active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited:active, .background-plm-grey a.light-link:active, .background-plm-grey a.light-link:visited:active {
|
|
790
|
+
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):active, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:active, .light-links a.light-link:active, .light-links a.light-link:visited:active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:active, .background-grey-10 a.light-link:active, .background-grey-10 a.light-link:visited:active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:active, .background-plm-grey a.light-link:active, .background-plm-grey a.light-link:visited:active {
|
|
791
791
|
transition: none;
|
|
792
792
|
color: var(--color-blue-07);
|
|
793
793
|
}
|
|
794
|
-
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):hover, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited:hover, .light-links a.light-link:hover, .light-links a.light-link:visited:hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited:hover, .background-grey-10 a.light-link:hover, .background-grey-10 a.light-link:visited:hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited:hover, .background-plm-grey a.light-link:hover, .background-plm-grey a.light-link:visited:hover {
|
|
794
|
+
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):hover, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:hover, .light-links a.light-link:hover, .light-links a.light-link:visited:hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:hover, .background-grey-10 a.light-link:hover, .background-grey-10 a.light-link:visited:hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:hover, .background-plm-grey a.light-link:hover, .background-plm-grey a.light-link:visited:hover {
|
|
795
795
|
color: var(--color-blue-05);
|
|
796
796
|
}
|
|
797
|
-
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a).disabled, .light-links a.light-link.disabled, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a).disabled, .background-grey-10 a.light-link.disabled, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a).disabled, .background-plm-grey a.light-link.disabled {
|
|
797
|
+
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a).disabled, .light-links a.light-link.disabled, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a).disabled, .background-grey-10 a.light-link.disabled, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a).disabled, .background-plm-grey a.light-link.disabled {
|
|
798
798
|
color: var(--color-gray-04) !important;
|
|
799
799
|
cursor: not-allowed;
|
|
800
800
|
}
|
|
@@ -843,6 +843,13 @@ a:focus-visible {
|
|
|
843
843
|
color: var(--color-green-06);
|
|
844
844
|
}
|
|
845
845
|
|
|
846
|
+
.vjs-social-share-links a {
|
|
847
|
+
color: var(--color-white);
|
|
848
|
+
}
|
|
849
|
+
.vjs-social-share-links a:hover {
|
|
850
|
+
color: var(--color-white);
|
|
851
|
+
}
|
|
852
|
+
|
|
846
853
|
:host {
|
|
847
854
|
display: block;
|
|
848
855
|
overflow: hidden;
|
|
@@ -82,20 +82,20 @@ a:focus-visible {
|
|
|
82
82
|
border-radius: var(--ptc-border-radius-standard);
|
|
83
83
|
}
|
|
84
84
|
|
|
85
|
-
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a), .light-links a.light-link, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a), .background-grey-10 a.light-link, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a), .background-plm-grey a.light-link {
|
|
85
|
+
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a), .light-links a.light-link, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a), .background-grey-10 a.light-link, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a), .background-plm-grey a.light-link {
|
|
86
86
|
color: var(--color-blue-04);
|
|
87
87
|
}
|
|
88
|
-
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited, .light-links a.light-link:visited, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited, .background-grey-10 a.light-link:visited, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited, .background-plm-grey a.light-link:visited {
|
|
88
|
+
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited, .light-links a.light-link:visited, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited, .background-grey-10 a.light-link:visited, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited, .background-plm-grey a.light-link:visited {
|
|
89
89
|
color: var(--color-blue-06);
|
|
90
90
|
}
|
|
91
|
-
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):active, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited:active, .light-links a.light-link:active, .light-links a.light-link:visited:active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited:active, .background-grey-10 a.light-link:active, .background-grey-10 a.light-link:visited:active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited:active, .background-plm-grey a.light-link:active, .background-plm-grey a.light-link:visited:active {
|
|
91
|
+
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):active, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:active, .light-links a.light-link:active, .light-links a.light-link:visited:active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:active, .background-grey-10 a.light-link:active, .background-grey-10 a.light-link:visited:active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:active, .background-plm-grey a.light-link:active, .background-plm-grey a.light-link:visited:active {
|
|
92
92
|
transition: none;
|
|
93
93
|
color: var(--color-blue-07);
|
|
94
94
|
}
|
|
95
|
-
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):hover, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited:hover, .light-links a.light-link:hover, .light-links a.light-link:visited:hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited:hover, .background-grey-10 a.light-link:hover, .background-grey-10 a.light-link:visited:hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited:hover, .background-plm-grey a.light-link:hover, .background-plm-grey a.light-link:visited:hover {
|
|
95
|
+
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):hover, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:hover, .light-links a.light-link:hover, .light-links a.light-link:visited:hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:hover, .background-grey-10 a.light-link:hover, .background-grey-10 a.light-link:visited:hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:hover, .background-plm-grey a.light-link:hover, .background-plm-grey a.light-link:visited:hover {
|
|
96
96
|
color: var(--color-blue-05);
|
|
97
97
|
}
|
|
98
|
-
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a).disabled, .light-links a.light-link.disabled, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a).disabled, .background-grey-10 a.light-link.disabled, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a).disabled, .background-plm-grey a.light-link.disabled {
|
|
98
|
+
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a).disabled, .light-links a.light-link.disabled, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a).disabled, .background-grey-10 a.light-link.disabled, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a).disabled, .background-plm-grey a.light-link.disabled {
|
|
99
99
|
color: var(--color-gray-04) !important;
|
|
100
100
|
cursor: not-allowed;
|
|
101
101
|
}
|
|
@@ -144,6 +144,13 @@ a:focus-visible {
|
|
|
144
144
|
color: var(--color-green-06);
|
|
145
145
|
}
|
|
146
146
|
|
|
147
|
+
.vjs-social-share-links a {
|
|
148
|
+
color: var(--color-white);
|
|
149
|
+
}
|
|
150
|
+
.vjs-social-share-links a:hover {
|
|
151
|
+
color: var(--color-white);
|
|
152
|
+
}
|
|
153
|
+
|
|
147
154
|
:host {
|
|
148
155
|
display: block;
|
|
149
156
|
box-sizing: border-box;
|
|
@@ -139,20 +139,20 @@ a:focus-visible {
|
|
|
139
139
|
border-radius: var(--ptc-border-radius-standard);
|
|
140
140
|
}
|
|
141
141
|
|
|
142
|
-
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a), .light-links a.light-link, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a), .background-grey-10 a.light-link, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a), .background-plm-grey a.light-link {
|
|
142
|
+
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a), .light-links a.light-link, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a), .background-grey-10 a.light-link, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a), .background-plm-grey a.light-link {
|
|
143
143
|
color: var(--color-blue-04);
|
|
144
144
|
}
|
|
145
|
-
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited, .light-links a.light-link:visited, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited, .background-grey-10 a.light-link:visited, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited, .background-plm-grey a.light-link:visited {
|
|
145
|
+
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited, .light-links a.light-link:visited, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited, .background-grey-10 a.light-link:visited, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited, .background-plm-grey a.light-link:visited {
|
|
146
146
|
color: var(--color-blue-06);
|
|
147
147
|
}
|
|
148
|
-
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):active, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited:active, .light-links a.light-link:active, .light-links a.light-link:visited:active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited:active, .background-grey-10 a.light-link:active, .background-grey-10 a.light-link:visited:active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited:active, .background-plm-grey a.light-link:active, .background-plm-grey a.light-link:visited:active {
|
|
148
|
+
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):active, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:active, .light-links a.light-link:active, .light-links a.light-link:visited:active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:active, .background-grey-10 a.light-link:active, .background-grey-10 a.light-link:visited:active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:active, .background-plm-grey a.light-link:active, .background-plm-grey a.light-link:visited:active {
|
|
149
149
|
transition: none;
|
|
150
150
|
color: var(--color-blue-07);
|
|
151
151
|
}
|
|
152
|
-
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):hover, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited:hover, .light-links a.light-link:hover, .light-links a.light-link:visited:hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited:hover, .background-grey-10 a.light-link:hover, .background-grey-10 a.light-link:visited:hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited:hover, .background-plm-grey a.light-link:hover, .background-plm-grey a.light-link:visited:hover {
|
|
152
|
+
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):hover, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:hover, .light-links a.light-link:hover, .light-links a.light-link:visited:hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:hover, .background-grey-10 a.light-link:hover, .background-grey-10 a.light-link:visited:hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:hover, .background-plm-grey a.light-link:hover, .background-plm-grey a.light-link:visited:hover {
|
|
153
153
|
color: var(--color-blue-05);
|
|
154
154
|
}
|
|
155
|
-
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a).disabled, .light-links a.light-link.disabled, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a).disabled, .background-grey-10 a.light-link.disabled, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a).disabled, .background-plm-grey a.light-link.disabled {
|
|
155
|
+
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a).disabled, .light-links a.light-link.disabled, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a).disabled, .background-grey-10 a.light-link.disabled, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a).disabled, .background-plm-grey a.light-link.disabled {
|
|
156
156
|
color: var(--color-gray-04) !important;
|
|
157
157
|
cursor: not-allowed;
|
|
158
158
|
}
|
|
@@ -201,6 +201,13 @@ a:focus-visible {
|
|
|
201
201
|
color: var(--color-green-06);
|
|
202
202
|
}
|
|
203
203
|
|
|
204
|
+
.vjs-social-share-links a {
|
|
205
|
+
color: var(--color-white);
|
|
206
|
+
}
|
|
207
|
+
.vjs-social-share-links a:hover {
|
|
208
|
+
color: var(--color-white);
|
|
209
|
+
}
|
|
210
|
+
|
|
204
211
|
:host {
|
|
205
212
|
display: block;
|
|
206
213
|
position: relative;
|
|
@@ -875,12 +875,20 @@ ptc-link, ptc-square-card,
|
|
|
875
875
|
width: 44px;
|
|
876
876
|
height: 44px;
|
|
877
877
|
}
|
|
878
|
+
:host .swiper-container .swiper-button-next:focus-visible {
|
|
879
|
+
border-radius: var(--ptc-border-radius-standard);
|
|
880
|
+
outline: 5px solid var(--keyboard-nav-outline);
|
|
881
|
+
}
|
|
878
882
|
:host .swiper-container .swiper-button-prev {
|
|
879
883
|
left: 0;
|
|
880
884
|
top: 84px;
|
|
881
885
|
height: 44px;
|
|
882
886
|
width: 44px;
|
|
883
887
|
}
|
|
888
|
+
:host .swiper-container .swiper-button-prev:focus-visible {
|
|
889
|
+
border-radius: var(--ptc-border-radius-standard);
|
|
890
|
+
outline: 5px solid var(--keyboard-nav-outline);
|
|
891
|
+
}
|
|
884
892
|
:host .ptc-link {
|
|
885
893
|
font-size: var(--ptc-font-size-small);
|
|
886
894
|
font-weight: var(--ptc-font-weight-extrabold);
|
|
@@ -895,6 +903,10 @@ ptc-link, ptc-square-card,
|
|
|
895
903
|
:host .ptc-link:hover {
|
|
896
904
|
color: var(--color-green-06);
|
|
897
905
|
}
|
|
906
|
+
:host .ptc-link:focus-visible {
|
|
907
|
+
border-radius: var(--ptc-border-radius-standard);
|
|
908
|
+
outline: 5px solid var(--keyboard-nav-outline);
|
|
909
|
+
}
|
|
898
910
|
:host .ptc-link:visited {
|
|
899
911
|
color: var(--color-gray-10);
|
|
900
912
|
}
|
|
@@ -15,11 +15,13 @@ export class PtcIconComponent {
|
|
|
15
15
|
this.renderSlides();
|
|
16
16
|
setTimeout(() => {
|
|
17
17
|
this.initSlider();
|
|
18
|
+
this.setUpTabIndex();
|
|
18
19
|
}, 200);
|
|
19
20
|
}
|
|
20
21
|
componentDidUpdate() {
|
|
21
22
|
setTimeout(() => {
|
|
22
23
|
this.initSlider();
|
|
24
|
+
this.setUpTabIndex();
|
|
23
25
|
}, 200);
|
|
24
26
|
}
|
|
25
27
|
renderSlides() {
|
|
@@ -29,6 +31,7 @@ export class PtcIconComponent {
|
|
|
29
31
|
slidesList.forEach((node) => {
|
|
30
32
|
const slideElement = document.createElement('div');
|
|
31
33
|
slideElement.classList.add('swiper-slide');
|
|
34
|
+
slideElement.querySelectorAll("a").forEach(item => item.tabIndex = -1);
|
|
32
35
|
let cloneNode = node.cloneNode(true);
|
|
33
36
|
slideElement.appendChild(cloneNode);
|
|
34
37
|
swiperWrapper.appendChild(slideElement);
|
|
@@ -53,6 +56,10 @@ export class PtcIconComponent {
|
|
|
53
56
|
nextEl: this.swiperButtonNextRef,
|
|
54
57
|
prevEl: this.swiperButtonPrevRef,
|
|
55
58
|
},
|
|
59
|
+
// keyboard: {
|
|
60
|
+
// enabled: true,
|
|
61
|
+
// onlyInViewport: true
|
|
62
|
+
// }
|
|
56
63
|
});
|
|
57
64
|
}
|
|
58
65
|
}
|
|
@@ -71,8 +78,38 @@ export class PtcIconComponent {
|
|
|
71
78
|
this.iconSwiper = null;
|
|
72
79
|
}
|
|
73
80
|
}
|
|
81
|
+
onNextBtnClick(e) {
|
|
82
|
+
let btn = e.currentTarget;
|
|
83
|
+
e.preventDefault();
|
|
84
|
+
if (btn && !btn.classList.contains('disabled')) {
|
|
85
|
+
this.iconSwiper.slideNext();
|
|
86
|
+
this.setUpTabIndex();
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
onPrevBtnClick(e) {
|
|
90
|
+
let btn = e.currentTarget;
|
|
91
|
+
e.preventDefault();
|
|
92
|
+
if (btn && !btn.classList.contains('disabled')) {
|
|
93
|
+
this.iconSwiper.slidePrev();
|
|
94
|
+
this.setUpTabIndex();
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
onPrevBtnKeydown(e) {
|
|
98
|
+
if (e.key === "Enter") {
|
|
99
|
+
this.onPrevBtnClick(e);
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
onNextBtnKeydown(e) {
|
|
103
|
+
if (e.key === "Enter") {
|
|
104
|
+
this.onNextBtnClick(e);
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
setUpTabIndex() {
|
|
108
|
+
this.iconSwiper.slides.forEach(i => i.querySelectorAll("a").forEach(item => item.tabIndex = -1));
|
|
109
|
+
this.iconSwiper.slides[this.iconSwiper.activeIndex].querySelectorAll("a").forEach(item => item.tabIndex = 0);
|
|
110
|
+
}
|
|
74
111
|
render() {
|
|
75
|
-
return (h(Host, { class: this.isMobile ? 'mobileView' : 'desktopView' }, h("div", { class: "icon-component-row" }, h("slot", null)), h("div", { class: "swiper-container", ref: el => this.swiperWrapperRef = el }, h("div", { class: "swiper-
|
|
112
|
+
return (h(Host, { class: this.isMobile ? 'mobileView' : 'desktopView' }, h("div", { class: "icon-component-row" }, h("slot", null)), h("div", { class: "swiper-container", ref: el => this.swiperWrapperRef = el }, h("div", { class: "swiper-button-prev", ref: el => this.swiperButtonPrevRef = el, tabindex: 0, onClick: (e) => this.onPrevBtnClick(e), onKeyDown: (e) => this.onPrevBtnKeydown(e) }, h("svg", { width: "20", height: "20", viewBox: "0 0 14 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M13.25 2.75L6 10L13.25 17.25L10.625 19.875L0.749999 10L10.625 0.125L13.25 2.75Z", fill: "#323B42" }))), h("div", { class: "swiper-button-next", ref: el => this.swiperButtonNextRef = el, tabindex: 0, onClick: (e) => this.onNextBtnClick(e), onKeyDown: (e) => this.onNextBtnKeydown(e) }, h("svg", { width: "20", height: "20", viewBox: "0 0 14 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M0.75 17.25L8 10L0.75 2.75L3.375 0.125L13.25 10L3.375 19.875L0.75 17.25Z", fill: "#323B42" }))), h("div", { class: "swiper-wrapper" }), h("div", { class: "swiper-pagination", ref: el => this.swiperPaginationRef = el }))));
|
|
76
113
|
}
|
|
77
114
|
static get is() { return "ptc-icon-component"; }
|
|
78
115
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1178,20 +1178,20 @@ a:focus-visible {
|
|
|
1178
1178
|
border-radius: var(--ptc-border-radius-standard);
|
|
1179
1179
|
}
|
|
1180
1180
|
|
|
1181
|
-
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a), .light-links a.light-link, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a), .background-grey-10 a.light-link, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a), .background-plm-grey a.light-link {
|
|
1181
|
+
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a), .light-links a.light-link, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a), .background-grey-10 a.light-link, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a), .background-plm-grey a.light-link {
|
|
1182
1182
|
color: var(--color-blue-04);
|
|
1183
1183
|
}
|
|
1184
|
-
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited, .light-links a.light-link:visited, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited, .background-grey-10 a.light-link:visited, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited, .background-plm-grey a.light-link:visited {
|
|
1184
|
+
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited, .light-links a.light-link:visited, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited, .background-grey-10 a.light-link:visited, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited, .background-plm-grey a.light-link:visited {
|
|
1185
1185
|
color: var(--color-blue-06);
|
|
1186
1186
|
}
|
|
1187
|
-
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):active, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited:active, .light-links a.light-link:active, .light-links a.light-link:visited:active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited:active, .background-grey-10 a.light-link:active, .background-grey-10 a.light-link:visited:active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited:active, .background-plm-grey a.light-link:active, .background-plm-grey a.light-link:visited:active {
|
|
1187
|
+
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):active, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:active, .light-links a.light-link:active, .light-links a.light-link:visited:active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:active, .background-grey-10 a.light-link:active, .background-grey-10 a.light-link:visited:active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:active, .background-plm-grey a.light-link:active, .background-plm-grey a.light-link:visited:active {
|
|
1188
1188
|
transition: none;
|
|
1189
1189
|
color: var(--color-blue-07);
|
|
1190
1190
|
}
|
|
1191
|
-
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):hover, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited:hover, .light-links a.light-link:hover, .light-links a.light-link:visited:hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited:hover, .background-grey-10 a.light-link:hover, .background-grey-10 a.light-link:visited:hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited:hover, .background-plm-grey a.light-link:hover, .background-plm-grey a.light-link:visited:hover {
|
|
1191
|
+
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):hover, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:hover, .light-links a.light-link:hover, .light-links a.light-link:visited:hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:hover, .background-grey-10 a.light-link:hover, .background-grey-10 a.light-link:visited:hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:hover, .background-plm-grey a.light-link:hover, .background-plm-grey a.light-link:visited:hover {
|
|
1192
1192
|
color: var(--color-blue-05);
|
|
1193
1193
|
}
|
|
1194
|
-
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a).disabled, .light-links a.light-link.disabled, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a).disabled, .background-grey-10 a.light-link.disabled, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a).disabled, .background-plm-grey a.light-link.disabled {
|
|
1194
|
+
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a).disabled, .light-links a.light-link.disabled, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a).disabled, .background-grey-10 a.light-link.disabled, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a).disabled, .background-plm-grey a.light-link.disabled {
|
|
1195
1195
|
color: var(--color-gray-04) !important;
|
|
1196
1196
|
cursor: not-allowed;
|
|
1197
1197
|
}
|
|
@@ -1240,6 +1240,13 @@ a:focus-visible {
|
|
|
1240
1240
|
color: var(--color-green-06);
|
|
1241
1241
|
}
|
|
1242
1242
|
|
|
1243
|
+
.vjs-social-share-links a {
|
|
1244
|
+
color: var(--color-white);
|
|
1245
|
+
}
|
|
1246
|
+
.vjs-social-share-links a:hover {
|
|
1247
|
+
color: var(--color-white);
|
|
1248
|
+
}
|
|
1249
|
+
|
|
1243
1250
|
:host {
|
|
1244
1251
|
display: block;
|
|
1245
1252
|
}
|
|
@@ -425,6 +425,8 @@ ptc-link, ptc-square-card,
|
|
|
425
425
|
transform: translateY(-100%);
|
|
426
426
|
border-radius: var(--ptc-border-radius-standard) var(--ptc-border-radius-standard) 0px 0px;
|
|
427
427
|
align-items: center;
|
|
428
|
+
padding: var(--ptc-element-spacing-06);
|
|
429
|
+
box-sizing: border-box;
|
|
428
430
|
}
|
|
429
431
|
:host .wrapper .event-list-header::before {
|
|
430
432
|
content: "";
|
|
@@ -436,10 +438,19 @@ ptc-link, ptc-square-card,
|
|
|
436
438
|
background: linear-gradient(0deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.7) 100%);
|
|
437
439
|
z-index: 1;
|
|
438
440
|
}
|
|
441
|
+
:host .wrapper .event-list-header + .close {
|
|
442
|
+
margin-top: 0px;
|
|
443
|
+
margin-right: 0px;
|
|
444
|
+
width: 40px;
|
|
445
|
+
height: 40px;
|
|
446
|
+
display: flex;
|
|
447
|
+
justify-content: center;
|
|
448
|
+
align-items: center;
|
|
449
|
+
}
|
|
439
450
|
:host .wrapper .event-list-header .text-wrapper {
|
|
440
451
|
display: flex;
|
|
441
|
-
|
|
442
|
-
gap: 0.5em;
|
|
452
|
+
flex-wrap: wrap;
|
|
453
|
+
column-gap: 0.5em;
|
|
443
454
|
}
|
|
444
455
|
:host .wrapper .event-list-header .text-wrapper span {
|
|
445
456
|
display: inline-block;
|
|
@@ -5602,20 +5602,20 @@ a:focus-visible {
|
|
|
5602
5602
|
border-radius: var(--ptc-border-radius-standard);
|
|
5603
5603
|
}
|
|
5604
5604
|
|
|
5605
|
-
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a), .light-links a.light-link, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a), .background-grey-10 a.light-link, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a), .background-plm-grey a.light-link {
|
|
5605
|
+
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a), .light-links a.light-link, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a), .background-grey-10 a.light-link, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a), .background-plm-grey a.light-link {
|
|
5606
5606
|
color: var(--color-blue-04);
|
|
5607
5607
|
}
|
|
5608
|
-
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited, .light-links a.light-link:visited, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited, .background-grey-10 a.light-link:visited, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited, .background-plm-grey a.light-link:visited {
|
|
5608
|
+
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited, .light-links a.light-link:visited, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited, .background-grey-10 a.light-link:visited, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited, .background-plm-grey a.light-link:visited {
|
|
5609
5609
|
color: var(--color-blue-06);
|
|
5610
5610
|
}
|
|
5611
|
-
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):active, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited:active, .light-links a.light-link:active, .light-links a.light-link:visited:active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited:active, .background-grey-10 a.light-link:active, .background-grey-10 a.light-link:visited:active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited:active, .background-plm-grey a.light-link:active, .background-plm-grey a.light-link:visited:active {
|
|
5611
|
+
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):active, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:active, .light-links a.light-link:active, .light-links a.light-link:visited:active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:active, .background-grey-10 a.light-link:active, .background-grey-10 a.light-link:visited:active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:active, .background-plm-grey a.light-link:active, .background-plm-grey a.light-link:visited:active {
|
|
5612
5612
|
transition: none;
|
|
5613
5613
|
color: var(--color-blue-07);
|
|
5614
5614
|
}
|
|
5615
|
-
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):hover, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited:hover, .light-links a.light-link:hover, .light-links a.light-link:visited:hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited:hover, .background-grey-10 a.light-link:hover, .background-grey-10 a.light-link:visited:hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited:hover, .background-plm-grey a.light-link:hover, .background-plm-grey a.light-link:visited:hover {
|
|
5615
|
+
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):hover, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:hover, .light-links a.light-link:hover, .light-links a.light-link:visited:hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:hover, .background-grey-10 a.light-link:hover, .background-grey-10 a.light-link:visited:hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:hover, .background-plm-grey a.light-link:hover, .background-plm-grey a.light-link:visited:hover {
|
|
5616
5616
|
color: var(--color-blue-05);
|
|
5617
5617
|
}
|
|
5618
|
-
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a).disabled, .light-links a.light-link.disabled, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a).disabled, .background-grey-10 a.light-link.disabled, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a).disabled, .background-plm-grey a.light-link.disabled {
|
|
5618
|
+
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a).disabled, .light-links a.light-link.disabled, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a).disabled, .background-grey-10 a.light-link.disabled, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a).disabled, .background-plm-grey a.light-link.disabled {
|
|
5619
5619
|
color: var(--color-gray-04) !important;
|
|
5620
5620
|
cursor: not-allowed;
|
|
5621
5621
|
}
|
|
@@ -5664,6 +5664,13 @@ a:focus-visible {
|
|
|
5664
5664
|
color: var(--color-green-06);
|
|
5665
5665
|
}
|
|
5666
5666
|
|
|
5667
|
+
.vjs-social-share-links a {
|
|
5668
|
+
color: var(--color-white);
|
|
5669
|
+
}
|
|
5670
|
+
.vjs-social-share-links a:hover {
|
|
5671
|
+
color: var(--color-white);
|
|
5672
|
+
}
|
|
5673
|
+
|
|
5667
5674
|
:host {
|
|
5668
5675
|
display: block;
|
|
5669
5676
|
padding: 2rem 0;
|
|
@@ -246,6 +246,11 @@ ptc-link, ptc-square-card,
|
|
|
246
246
|
.skeleton-block.medium {
|
|
247
247
|
width: 50%;
|
|
248
248
|
}
|
|
249
|
+
@media only screen and (min-width: 992px) {
|
|
250
|
+
.skeleton-block.medium-md {
|
|
251
|
+
width: 50%;
|
|
252
|
+
}
|
|
253
|
+
}
|
|
249
254
|
.skeleton-block.short {
|
|
250
255
|
width: 30%;
|
|
251
256
|
}
|
|
@@ -2683,6 +2688,69 @@ ptc-link, ptc-square-card,
|
|
|
2683
2688
|
}
|
|
2684
2689
|
}
|
|
2685
2690
|
|
|
2691
|
+
.news-skeleton-preloader .thick-on-mobile {
|
|
2692
|
+
height: 94px;
|
|
2693
|
+
}
|
|
2694
|
+
@media only screen and (min-width: 768px) {
|
|
2695
|
+
.news-skeleton-preloader .thick-on-mobile {
|
|
2696
|
+
height: 48px;
|
|
2697
|
+
}
|
|
2698
|
+
}
|
|
2699
|
+
.news-skeleton-preloader .big-block {
|
|
2700
|
+
height: 700px;
|
|
2701
|
+
}
|
|
2702
|
+
@media only screen and (min-width: 992px) {
|
|
2703
|
+
.news-skeleton-preloader .big-block {
|
|
2704
|
+
height: 547px;
|
|
2705
|
+
}
|
|
2706
|
+
}
|
|
2707
|
+
.news-skeleton-preloader .card-block {
|
|
2708
|
+
height: 500px;
|
|
2709
|
+
}
|
|
2710
|
+
.news-skeleton-preloader .big-card-block {
|
|
2711
|
+
height: calc(100% - 8px);
|
|
2712
|
+
display: none;
|
|
2713
|
+
}
|
|
2714
|
+
@media only screen and (min-width: 992px) {
|
|
2715
|
+
.news-skeleton-preloader .big-card-block {
|
|
2716
|
+
display: block;
|
|
2717
|
+
}
|
|
2718
|
+
}
|
|
2719
|
+
|
|
2720
|
+
.resource-center-skeleton-preloader .skeleton-jumbotron {
|
|
2721
|
+
background-color: var(--color-gray-02);
|
|
2722
|
+
padding-top: 24px;
|
|
2723
|
+
padding-bottom: 24px;
|
|
2724
|
+
margin-bottom: 24px;
|
|
2725
|
+
}
|
|
2726
|
+
@media only screen and (min-width: 992px) {
|
|
2727
|
+
.resource-center-skeleton-preloader .skeleton-jumbotron {
|
|
2728
|
+
background-color: var(--color-gray-01);
|
|
2729
|
+
padding-top: 106px;
|
|
2730
|
+
padding-bottom: 106px;
|
|
2731
|
+
}
|
|
2732
|
+
}
|
|
2733
|
+
@media only screen and (min-width: 768px) {
|
|
2734
|
+
.resource-center-skeleton-preloader .skeleton-jumbotron {
|
|
2735
|
+
margin-bottom: 48px;
|
|
2736
|
+
}
|
|
2737
|
+
}
|
|
2738
|
+
.resource-center-skeleton-preloader .jumbo-image-mobile {
|
|
2739
|
+
display: block;
|
|
2740
|
+
background-color: var(--color-gray-01);
|
|
2741
|
+
height: 300px;
|
|
2742
|
+
}
|
|
2743
|
+
@media only screen and (min-width: 992px) {
|
|
2744
|
+
.resource-center-skeleton-preloader .jumbo-image-mobile {
|
|
2745
|
+
display: none;
|
|
2746
|
+
}
|
|
2747
|
+
}
|
|
2748
|
+
.resource-center-skeleton-preloader .card-block {
|
|
2749
|
+
width: 100%;
|
|
2750
|
+
height: 347px;
|
|
2751
|
+
margin: 0;
|
|
2752
|
+
}
|
|
2753
|
+
|
|
2686
2754
|
@keyframes pulse {
|
|
2687
2755
|
0% {
|
|
2688
2756
|
opacity: 0.5;
|
|
@@ -78,6 +78,11 @@ export class PtcPreloaderSection {
|
|
|
78
78
|
case 'ppc-skeleton': {
|
|
79
79
|
return (h("div", { class: "preloader-wrapper" }, h("div", { class: "ppc-skeleton-preloader" }, h("div", { class: "ptc-container " }, h("div", { class: "dots-loader" })))));
|
|
80
80
|
}
|
|
81
|
+
case 'news': {
|
|
82
|
+
return (h("div", { class: "preloader-wrapper" }, h("div", { class: "news-skeleton-preloader" }, h("div", { class: "ptc-container ptc-section-standard" }, h("ptc-spacer", { breakpoint: "large", size: "medium" }), h("div", { class: "is-grid has-row-gap-md" }, h("div", { class: "is-col-6-lg skeleton-block thick thick-on-mobile" }), h("div", { class: "is-col-6-lg skeleton-block thick medium-md right" })), h("ptc-spacer", { size: "xxx-large" }), h("ptc-spacer", { size: "medium" }), h("div", { class: "skeleton-block narrow thick center" }), h("ptc-spacer", { size: "medium" }), h("div", { class: "skeleton-block short thin center" }), h("ptc-spacer", { size: "medium" }), h("div", { class: "skeleton-block big-block" }), h("ptc-spacer", { size: "xxx-large" }), h("div", { class: "skeleton-block bold medium" }), h("ptc-spacer", { size: "medium" }), h("div", { class: "is-grid has-row-gap-md has-col-gap-lg" }, h("div", { class: "is-col-8-lg" }, h("div", { class: "is-grid has-col-gap-lg" }, h("div", { class: "is-col-6-md skeleton-block card-block" }), h("div", { class: "is-col-6-md skeleton-block card-block" }), h("div", { class: "is-col-6-md skeleton-block card-block" }), h("div", { class: "is-col-6-md skeleton-block card-block" }))), h("div", { class: "is-col-4-lg skeleton-block big-card-block" })), h("ptc-spacer", { size: "medium" }), h("div", { class: "skeleton-block cta thick center" }), h("ptc-spacer", { size: "xxx-large" }), h("div", { class: "skeleton-block bold medium" }), h("ptc-spacer", { size: "medium" }), h("div", { class: "is-grid has-row-gap-md has-col-gap-lg" }, h("div", { class: "is-col-8-lg" }, h("div", { class: "is-grid has-col-gap-lg" }, h("div", { class: "is-col-6-md skeleton-block card-block" }), h("div", { class: "is-col-6-md skeleton-block card-block" }), h("div", { class: "is-col-6-md skeleton-block card-block" }), h("div", { class: "is-col-6-md skeleton-block card-block" }))), h("div", { class: "is-col-4-lg skeleton-block big-card-block" })), h("ptc-spacer", { size: "medium" }), h("div", { class: "skeleton-block cta thick center" })))));
|
|
83
|
+
}
|
|
84
|
+
case 'resource-center':
|
|
85
|
+
return (h("div", { class: "preloader-wrapper resource-center-skeleton-preloader" }, h("div", { class: "skeleton jumbo-image-mobile" }), h("div", { class: "skeleton-jumbotron" }, h("div", { class: "ptc-container" }, h("div", { class: "is-grid has-no-row-gap has-col-gap-lg" }, h("div", { class: "is-col-12 is-col-8-lg" }, h("div", { class: "sekleton" }, h("div", { class: "skeleton-block thin short" }), h("div", { class: "skeleton-block thick" }), h("div", { class: "skeleton-block thick" }), h("ptc-spacer", { breakpoint: "small", size: "large" }), h("ptc-spacer", { breakpoint: "x-small", size: "x-large" }), h("div", { class: "skeleton-block thin" }), h("div", { class: "skeleton-block thin medium" }), h("ptc-spacer", { breakpoint: "small", size: "large" }), h("ptc-spacer", { breakpoint: "x-small", size: "x-large" }), h("div", { class: "cta-wrap" }, h("div", { class: "skeleton-block cta" }), h("div", { class: "skeleton-block cta" }))))))), h("div", { class: 'ptc-container' }, h("div", { class: "is-grid desktop-cards" }, h("div", { class: "is-col-12-xs is-col-3-lg" }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-block thin medium" }), h("div", { class: "skeleton-block bold long" }), h("div", { class: "skeleton-block bold" }), h("div", { class: "skeleton-block bold" }), h("div", { class: "skeleton-block bold" }))), h("div", { class: "is-col-12-xs is-col-9-lg" }, h("div", { class: "is-grid" }, Array.from({ length: 15 }).map(() => (h("div", { class: "is-col-6-sm is-col-4-xl skeleton-block card-block" })))))))));
|
|
81
86
|
default:
|
|
82
87
|
return (h("div", { class: "ptc-section-standard preload-min-height" }, h("div", { class: "ptc-container" }, h("max-width-container", { "max-width": "960", breakpoint: 1200 }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-header" }, h("div", { class: "skeleton-block bold" }), h("div", { class: "skeleton-block wide bold" }), h("ptc-spacer", { breakpoint: "small", size: "large" }), h("ptc-spacer", { breakpoint: "x-small", size: "x-large" }), h("div", { class: "skeleton-block medium" }), h("div", { class: "skeleton-block narrow" }), h("div", { class: "skeleton-block short" })), h("div", { class: "skeleton-image" }), h("div", { class: "skeleton-text" }, h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block long" }), h("div", { class: "skeleton-block narrow" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block medium" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block long" }), h("div", { class: "skeleton-block medium" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block long" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block medium" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block wide" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block short bold" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block wide" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block medium" })))))));
|
|
83
88
|
}
|