@covet-pics/covet-pics-widget 0.178.3 → 0.178.5
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/covet-pics-checkbox_9.cjs.entry.js +1 -1
- package/dist/cjs/covet-pics-gallery-grid_8.cjs.entry.js +23 -28
- package/dist/cjs/covet-pics-highlighted-hotspots_2.cjs.entry.js +55 -55
- package/dist/cjs/covet-pics-star-rating.cjs.entry.js +2 -2
- package/dist/cjs/covet-pics-widget.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/slider-ersCIE3g.js +33 -0
- package/dist/collection/components/covet-pics-highlighted/covet-pics-highlighted-hotspots.css +6 -5
- package/dist/collection/components/covet-pics-highlighted/covet-pics-highlighted-hotspots.js +14 -11
- package/dist/collection/components/covet-pics-highlighted/covet-pics-highlighted-page.css +24 -35
- package/dist/collection/components/covet-pics-highlighted/covet-pics-highlighted-page.js +39 -42
- package/dist/collection/components/covet-pics-highlighted/covet-pics-highlighted.css +14 -2
- package/dist/collection/components/covet-pics-highlighted/covet-pics-highlighted.js +28 -27
- package/dist/collection/components/covet-pics-highlighted/test/test-data.js +69 -0
- package/dist/collection/components/covet-pics-star-rating/covet-pics-star-rating.js +2 -2
- package/dist/collection/utils/slider.js +15 -0
- package/dist/covet-pics-widget/covet-pics-widget.esm.js +1 -1
- package/dist/covet-pics-widget/p-1944a03b.entry.js +4 -0
- package/dist/covet-pics-widget/{p-058819df.entry.js → p-695d132f.entry.js} +1 -1
- package/dist/covet-pics-widget/p-BC5P_RWt.js +4 -0
- package/dist/covet-pics-widget/{p-78af2ec7.entry.js → p-dd94fc6b.entry.js} +5 -5
- package/dist/covet-pics-widget/{p-2a1a5547.entry.js → p-ee6c9484.entry.js} +1 -1
- package/dist/esm/covet-pics-checkbox_9.entry.js +1 -1
- package/dist/esm/covet-pics-gallery-grid_8.entry.js +23 -28
- package/dist/esm/covet-pics-highlighted-hotspots_2.entry.js +55 -55
- package/dist/esm/covet-pics-star-rating.entry.js +2 -2
- package/dist/esm/covet-pics-widget.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/slider-BC5P_RWt.js +30 -0
- package/dist/types/components/covet-pics-highlighted/covet-pics-highlighted-hotspots.d.ts +1 -1
- package/dist/types/components/covet-pics-highlighted/covet-pics-highlighted-page.d.ts +0 -1
- package/dist/types/components/covet-pics-highlighted/covet-pics-highlighted.d.ts +1 -2
- package/dist/types/components/covet-pics-highlighted/test/test-data.d.ts +54 -2
- package/dist/types/utils/slider.d.ts +1 -0
- package/package.json +1 -1
- package/dist/cjs/slider-Yd_vzJhP.js +0 -17
- package/dist/covet-pics-widget/p-965f3aca.entry.js +0 -4
- package/dist/covet-pics-widget/p-DaNqPZdj.js +0 -4
- package/dist/esm/slider-DaNqPZdj.js +0 -15
|
@@ -12,7 +12,7 @@ var storeUtils = require('./storeUtils-hM8egDhh.js');
|
|
|
12
12
|
var funcComponents = require('./funcComponents-BpB42VvA.js');
|
|
13
13
|
var index$1 = require('./index-BMdsVEom.js');
|
|
14
14
|
var popupFuncComponents = require('./popupFuncComponents-C-BjCf1Q.js');
|
|
15
|
-
var slider = require('./slider-
|
|
15
|
+
var slider = require('./slider-ersCIE3g.js');
|
|
16
16
|
var a11y = require('./a11y-BaxqETeA.js');
|
|
17
17
|
var navigation = require('./navigation-CvIgF3Cf.js');
|
|
18
18
|
require('./redux-toolkit.modern-w9CXZaGb.js');
|
|
@@ -5216,7 +5216,7 @@ const CovetPicsGallerySliderMarquee = class {
|
|
|
5216
5216
|
};
|
|
5217
5217
|
CovetPicsGallerySliderMarquee.style = covetPicsGallerySliderMarqueeCss();
|
|
5218
5218
|
|
|
5219
|
-
const covetPicsHighlightedCss = () => ` :root { --swiper-theme-color: #007aff; } :host { position: relative; display: block; margin-left: auto; margin-right: auto; z-index: 1; } .swiper { margin-left: auto; margin-right: auto; position: relative; overflow: hidden; list-style: none; padding: 0; z-index: 1; display: block; } .swiper-vertical > .swiper-wrapper { flex-direction: column; } .swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; display: flex; transition-property: transform; transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial); box-sizing: content-box; } .swiper-android .swiper-slide, .swiper-ios .swiper-slide, .swiper-wrapper { transform: translate3d(0px, 0, 0); } .swiper-horizontal { touch-action: pan-y; } .swiper-vertical { touch-action: pan-x; } .swiper-slide { flex-shrink: 0; width: 100%; height: 100%; position: relative; transition-property: transform; display: block; } .swiper-slide-invisible-blank { visibility: hidden; } .swiper-autoheight, .swiper-autoheight .swiper-slide { height: auto; } .swiper-autoheight .swiper-wrapper { align-items: flex-start; transition-property: transform, height; } .swiper-backface-hidden .swiper-slide { transform: translateZ(0); backface-visibility: hidden; } .swiper-3d.swiper-css-mode .swiper-wrapper { perspective: 1200px; } .swiper-3d .swiper-wrapper { transform-style: preserve-3d; } .swiper-3d { perspective: 1200px; .swiper-slide, .swiper-cube-shadow { transform-style: preserve-3d; } } .swiper-css-mode { > .swiper-wrapper { overflow: auto; scrollbar-width: none; -ms-overflow-style: none; &::-webkit-scrollbar { display: none; } } > .swiper-wrapper > .swiper-slide { scroll-snap-align: start start; } &.swiper-horizontal { > .swiper-wrapper { scroll-snap-type: x mandatory; } > .swiper-wrapper > .swiper-slide:first-child { margin-inline-start: var(--swiper-slides-offset-before); scroll-margin-inline-start: var(--swiper-slides-offset-before); } > .swiper-wrapper > .swiper-slide:last-child { margin-inline-end: var(--swiper-slides-offset-after); } } &.swiper-vertical { > .swiper-wrapper { scroll-snap-type: y mandatory; } > .swiper-wrapper > .swiper-slide:first-child { margin-block-start: var(--swiper-slides-offset-before); scroll-margin-block-start: var(--swiper-slides-offset-before); } > .swiper-wrapper > .swiper-slide:last-child { margin-block-end: var(--swiper-slides-offset-after); } } &.swiper-free-mode { > .swiper-wrapper { scroll-snap-type: none; } > .swiper-wrapper > .swiper-slide { scroll-snap-align: none; } } &.swiper-centered { > .swiper-wrapper::before { content: ""; flex-shrink: 0; order: 9999; } > .swiper-wrapper > .swiper-slide { scroll-snap-align: center center; scroll-snap-stop: always; } } &.swiper-centered.swiper-horizontal { > .swiper-wrapper > .swiper-slide:first-child { margin-inline-start: var(--swiper-centered-offset-before); } > .swiper-wrapper::before { height: 100%; min-height: 1px; width: var(--swiper-centered-offset-after); } } &.swiper-centered.swiper-vertical { > .swiper-wrapper > .swiper-slide:first-child { margin-block-start: var(--swiper-centered-offset-before); } > .swiper-wrapper::before { width: 100%; min-width: 1px; height: var(--swiper-centered-offset-after); } } } .swiper-3d { .swiper-slide-shadow, .swiper-slide-shadow-left, .swiper-slide-shadow-right, .swiper-slide-shadow-top, .swiper-slide-shadow-bottom, .swiper-slide-shadow, .swiper-slide-shadow-left, .swiper-slide-shadow-right, .swiper-slide-shadow-top, .swiper-slide-shadow-bottom { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10; } .swiper-slide-shadow { background: rgba(0, 0, 0, 0.15); } .swiper-slide-shadow-left { background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-slide-shadow-right { background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-slide-shadow-top { background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-slide-shadow-bottom { background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } } .swiper-lazy-preloader { width: 42px; height: 42px; position: absolute; left: 50%; top: 50%; margin-left: -21px; margin-top: -21px; z-index: 10; transform-origin: 50%; box-sizing: border-box; border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color)); border-radius: 50%; border-top-color: transparent; } .swiper:not(.swiper-watch-progress), .swiper-watch-progress .swiper-slide-visible { .swiper-lazy-preloader { animation: swiper-preloader-spin 1s infinite linear; } } .swiper-lazy-preloader-white { --swiper-preloader-color: #fff; } .swiper-lazy-preloader-black { --swiper-preloader-color: #000; } @keyframes swiper-preloader-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } :root { --swiper-navigation-size: 44px; } .swiper-button-prev, .swiper-button-next { position: absolute; width: var(--swiper-navigation-size); height: var(--swiper-navigation-size); z-index: 10; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--swiper-navigation-color, var(--swiper-theme-color)); &.swiper-button-disabled { opacity: 0.35; cursor: auto; pointer-events: none; } &.swiper-button-hidden { opacity: 0; cursor: auto; pointer-events: none; } .swiper-navigation-disabled & { display: none !important; } ::slotted(svg), svg { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; transform-origin: center; fill: currentColor; pointer-events: none; } } .swiper-button-lock { display: none; } .swiper-button-prev, .swiper-button-next { top: var(--swiper-navigation-top-offset, 50%); margin-top: calc(0px - var(--swiper-navigation-size) / 2); } .swiper-button-prev { left: var(--swiper-navigation-sides-offset, 4px); right: auto; ::slotted(.swiper-navigation-icon), .swiper-navigation-icon { transform: rotate(180deg); } } .swiper-button-next { right: var(--swiper-navigation-sides-offset, 4px); left: auto; } .swiper-horizontal { .swiper-button-prev, .swiper-button-next, ~ .swiper-button-prev, ~ .swiper-button-next { top: var(--swiper-navigation-top-offset, 50%); margin-top: calc(0px - var(--swiper-navigation-size) / 2); margin-left: 0; } .swiper-button-prev, & ~ .swiper-button-prev, &.swiper-rtl .swiper-button-next, &.swiper-rtl ~ .swiper-button-next { left: var(--swiper-navigation-sides-offset, 4px); right: auto; } .swiper-button-next, & ~ .swiper-button-next, &.swiper-rtl .swiper-button-prev, &.swiper-rtl ~ .swiper-button-prev { right: var(--swiper-navigation-sides-offset, 4px); left: auto; } .swiper-button-prev, & ~ .swiper-button-prev, &.swiper-rtl .swiper-button-next, &.swiper-rtl ~ .swiper-button-next { ::slotted(.swiper-navigation-icon), .swiper-navigation-icon { transform: rotate(180deg); } } &.swiper-rtl .swiper-button-prev, &.swiper-rtl ~ .swiper-button-prev { ::slotted(.swiper-navigation-icon), .swiper-navigation-icon { transform: rotate(0deg); } } } .swiper-vertical { .swiper-button-prev, .swiper-button-next, ~ .swiper-button-prev, ~ .swiper-button-next { left: var(--swiper-navigation-top-offset, 50%); right: auto; margin-left: calc(0px - var(--swiper-navigation-size) / 2); margin-top: 0; } .swiper-button-prev, ~ .swiper-button-prev { top: var(--swiper-navigation-sides-offset, 4px); bottom: auto; ::slotted(.swiper-navigation-icon), .swiper-navigation-icon { transform: rotate(-90deg); } } .swiper-button-next, ~ .swiper-button-next { bottom: var(--swiper-navigation-sides-offset, 4px); top: auto; ::slotted(.swiper-navigation-icon), .swiper-navigation-icon { transform: rotate(90deg); } } } :root { } .swiper-pagination { position: absolute; text-align: center; transition: 300ms opacity; transform: translate3d(0, 0, 0); z-index: 10; &.swiper-pagination-hidden { opacity: 0; } .swiper-pagination-disabled > &, &.swiper-pagination-disabled { display: none !important; } } .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal { bottom: var(--swiper-pagination-bottom, 8px); top: var(--swiper-pagination-top, auto); left: 0; width: 100%; } .swiper-pagination-bullets-dynamic { overflow: hidden; font-size: 0; .swiper-pagination-bullet { transform: scale(0.33); position: relative; } .swiper-pagination-bullet-active { transform: scale(1); } .swiper-pagination-bullet-active-main { transform: scale(1); } .swiper-pagination-bullet-active-prev { transform: scale(0.66); } .swiper-pagination-bullet-active-prev-prev { transform: scale(0.33); } .swiper-pagination-bullet-active-next { transform: scale(0.66); } .swiper-pagination-bullet-active-next-next { transform: scale(0.33); } } .swiper-pagination-bullet { width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px)); height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px)); display: inline-block; border-radius: var(--swiper-pagination-bullet-border-radius, 50%); background: var(--swiper-pagination-bullet-inactive-color, #000); opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2); button& { border: none; margin: 0; padding: 0; box-shadow: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .swiper-pagination-clickable & { cursor: pointer; } &:only-child { display: none !important; } } .swiper-pagination-bullet-active { opacity: var(--swiper-pagination-bullet-opacity, 1); background: var(--swiper-pagination-color, var(--swiper-theme-color)); } .swiper-vertical > .swiper-pagination-bullets, .swiper-pagination-vertical.swiper-pagination-bullets { right: var(--swiper-pagination-right, 8px); left: var(--swiper-pagination-left, auto); top: 50%; transform: translate3d(0px, -50%, 0); .swiper-pagination-bullet { margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0; display: block; } &.swiper-pagination-bullets-dynamic { top: 50%; transform: translateY(-50%); width: 8px; .swiper-pagination-bullet { display: inline-block; transition: 200ms transform, 200ms top; } } } .swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-horizontal.swiper-pagination-bullets { .swiper-pagination-bullet { margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px); } &.swiper-pagination-bullets-dynamic { left: 50%; transform: translateX(-50%); white-space: nowrap; .swiper-pagination-bullet { transition: 200ms transform, 200ms left; } } } .swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transition: 200ms transform, 200ms right; } .swiper-pagination-fraction { color: var(--swiper-pagination-fraction-color, inherit); } .swiper-pagination-progressbar { background: var(--swiper-pagination-progressbar-bg-color, rgba(0, 0, 0, 0.25)); position: absolute; .swiper-pagination-progressbar-fill { background: var(--swiper-pagination-color, var(--swiper-theme-color)); position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform: scale(0); transform-origin: left top; } .swiper-rtl & .swiper-pagination-progressbar-fill { transform-origin: right top; } .swiper-horizontal > &, &.swiper-pagination-horizontal, .swiper-vertical > &.swiper-pagination-progressbar-opposite, &.swiper-pagination-vertical.swiper-pagination-progressbar-opposite { width: 100%; height: var(--swiper-pagination-progressbar-size, 4px); left: 0; top: 0; } .swiper-vertical > &, &.swiper-pagination-vertical, .swiper-horizontal > &.swiper-pagination-progressbar-opposite, &.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite { width: var(--swiper-pagination-progressbar-size, 4px); height: 100%; left: 0; top: 0; } } .swiper-pagination-lock { display: none; } .swiper-fade { &.swiper-free-mode { .swiper-slide { transition-timing-function: ease-out; } } .swiper-slide { pointer-events: none; transition-property: opacity; .swiper-slide { pointer-events: none; } } .swiper-slide-active { pointer-events: auto; & .swiper-slide-active { pointer-events: auto; } } } .slider-control { display: flex; justify-content: center; align-items: center; width: 35px; height: 35px; flex: none; border-radius: 50%; border: none; position: absolute; top: 50%; transform: translateY(-50%); padding: 0; overflow: hidden; transition: all 0.6s ease; cursor: pointer; } .slider-control:hover, .slider-control:focus, .slider-control:active { outline: none !important; } .slider-control.next { left: 16px; } @media only screen and (max-width: 799.98px) { .slider-control.next.main { left: 32px; } } .slider-control.prev { right: 16px; } @media only screen and (max-width: 799.98px) { .slider-control.prev.main { right: 32px; } } .slider-control.small { width: 13px; height: 8px; position: relative; transform: none; padding: 0; background-color: transparent; left: 0; right: 0; transform-origin: 50% 50%; } .slider-control.small:focus { background-color: transparent; opacity: 1; } .slider-control.small:hover, .slider-control.small:active, .slider-control.small.active { background-color: transparent; opacity: 0.5; } .slider-control.main { z-index: 5; background-color: #101010; will-change: transform; transform-origin: 50% 50%; } .slider-control.main .icon-arrow { position: absolute; width: 14px; height: 12px; } .slider-control.main .icon-arrow path { fill: white; } @media only screen and (max-width: 799.98px) { .slider-control.main .icon-arrow { width: 14px; height: 10px; } } .slider-control.main.main-spotlight { top: 30%; } @media only screen and (max-width: 799.98px) { .slider-control.main.main-spotlight { top: auto; } } .slider-control.main:focus { background-color: #101010; transform: translateY(-50%) scale(1); } .slider-control.main:hover, .slider-control.main:active, .slider-control.main.active { background-color: #101010; transform: translateY(-50%) scale(0.95); } .slider-control.main:disabled { display: none; visibility: hidden; } @media only screen and (max-width: 799.98px) { .slider-control.main { top: auto; bottom: 0; transform: translateY(-10px); background-color: transparent; } .slider-control.main:focus { background-color: transparent; opacity: 1; transform: translateY(-10px) scale(1); } .slider-control.main:hover, .slider-control.main:active, .slider-control.main.active { background-color: transparent; transform: translateY(-10px) scale(1); opacity: 0.5; } .slider-control.main:disabled { opacity: 0.5; background-color: transparent; transform: translateY(-10px) scale(1); cursor: auto; } .slider-control.main .icon-arrow path { fill: var(--covet-pics-highlighted-primary-color); } } .slider-control.layout-3 { width: 40px; height: 40px; border-radius: 0; background-color: transparent; box-shadow: none; position: relative; top: 0; left: 0; transform: none; } .slider-control.layout-3 .icon-arrow { width: 100%; height: 100%; } .slider-control.layout-3:hover, .slider-control.layout-3:active, .slider-control.layout-3.active { opacity: 0.5; } .slider-control.layout-4 { width: 48px; height: 48px; border-radius: 0; background-color: transparent; box-shadow: none; } covet-pics-highlighted { box-sizing: border-box; display: block; width: 100%; position: relative; overflow: hidden; } covet-pics-highlighted.row { display: grid; grid-template-columns: repeat(3, calc(33.3333333333% - var(--covet-pics-highlighted-padding-px) * 2 / 3)); padding: var(--covet-pics-highlighted-padding-px); grid-gap: var(--covet-pics-highlighted-padding-px); } @media only screen and (max-width: 799.98px) { covet-pics-highlighted.row { padding: 0; grid-gap: 0; grid-template-columns: repeat(1, 100%); } } covet-pics-highlighted.slider { height: 100vh; height: calc(var(--covet-pics-highlighted-window-height, 1vh) * 100); padding: var(--covet-pics-highlighted-padding); } @media only screen and (max-width: 799.98px) { covet-pics-highlighted.slider { padding: 0; } } covet-pics-highlighted.spotlight { height: 115vh; height: calc(var(--covet-pics-highlighted-window-height, 1vh) * 115); padding: var(--covet-pics-highlighted-padding); } @media only screen and (max-width: 799.98px) { covet-pics-highlighted.spotlight { padding: 0; height: 100vh; height: calc(var(--covet-pics-highlighted-window-height, 1vh) * 100); } } covet-pics-highlighted h1, covet-pics-highlighted h2, covet-pics-highlighted h3, covet-pics-highlighted h4, covet-pics-highlighted h5, covet-pics-highlighted h6, covet-pics-highlighted p { margin-top: 0; margin-bottom: 16px; color: var(--covet-pics-highlighted-primary-color); } covet-pics-highlighted p { margin-top: 0; margin-bottom: 8px; color: var(--covet-pics-highlighted-secondary-color); } covet-pics-highlighted .main-slider { width: 100%; overflow: hidden; position: relative; height: 100%; } covet-pics-highlighted .main-slider .page { position: absolute; width: 100%; height: 100%; left: 0; top: 0; } covet-pics-highlighted .main-slider .slide-noactive { opacity: 0; transform: translateY(-100%); pointer-events: none; } covet-pics-highlighted .main-slider .slide-active { opacity: 1; } covet-pics-highlighted .main-slider .slide-active .thumbnail .img-cover, covet-pics-highlighted .main-slider .slide-active .thumbnail .img-contain { transform: scale(1); } covet-pics-highlighted .main-slider .slide-active .thumbnail .thumbnail-carousel .swiper-slide .img-cover, covet-pics-highlighted .main-slider .slide-active .thumbnail .thumbnail-carousel .swiper-slide .img-contain { transform: scale(1); } covet-pics-highlighted .main-slider .leave { opacity: 0; transition: opacity 0.6s ease; } covet-pics-highlighted .main-slider .leave.fast { transition: opacity 0.3s ease; } covet-pics-highlighted .main-slider .leave-to { transform: translateY(-100%); } covet-pics-highlighted .main-slider .before-enter { opacity: 0; transition: none; transform: none; z-index: 3; } covet-pics-highlighted .main-slider .before-enter .thumbnail .img-cover, covet-pics-highlighted .main-slider .before-enter .thumbnail .img-contain { transform: scale(1.2); } covet-pics-highlighted .main-slider .before-enter .thumbnail .thumbnail-carousel .swiper-slide .img-cover, covet-pics-highlighted .main-slider .before-enter .thumbnail .thumbnail-carousel .swiper-slide .img-contain { transform: scale(1); } covet-pics-highlighted .main-slider .before-enter .thumbnail .thumbnail-carousel .swiper-slide.swiper-slide-active .img-cover, covet-pics-highlighted .main-slider .before-enter .thumbnail .thumbnail-carousel .swiper-slide.swiper-slide-active .img-contain { transform: scale(1.2); } covet-pics-highlighted .main-slider .enter { opacity: 1; transform: none; transition: opacity 0.6s ease; z-index: 3; } covet-pics-highlighted .main-slider .enter .thumbnail .img-cover, covet-pics-highlighted .main-slider .enter .thumbnail .img-contain { transition: transform 0.6s ease; transform: scale(1); } covet-pics-highlighted .main-slider .enter .thumbnail .thumbnail-carousel .swiper-slide.swiper-slide-active .img-cover, covet-pics-highlighted .main-slider .enter .thumbnail .thumbnail-carousel .swiper-slide.swiper-slide-active .img-contain { transition: transform 0.6s ease; transform: scale(1); } covet-pics-highlighted .main-slider .enter.fast { transition: opacity 0.3s ease; } covet-pics-highlighted .main-slider .enter.fast .thumbnail .img-cover, covet-pics-highlighted .main-slider .enter.fast .thumbnail .img-contain { transition: transform 0.3s ease; } covet-pics-highlighted .main-slider .enter.fast .thumbnail .thumbnail-carousel .swiper-slide.swiper-slide-active .img-cover, covet-pics-highlighted .main-slider .enter.fast .thumbnail .thumbnail-carousel .swiper-slide.swiper-slide-active .img-contain { transition: transform 0.3s ease; transform: scale(1); } covet-pics-highlighted .img-wrap { display: flex; } covet-pics-highlighted .img-cover { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; transform-origin: center center; } covet-pics-highlighted .img-contain { -o-object-position: 50% 50%; object-position: 50% 50%; width: 100%; -o-object-fit: cover; object-fit: cover; height: 100%; -o-object-fit: contain; object-fit: contain; } covet-pics-highlighted .icon-arrow { position: absolute; width: 100%; height: 100%; top: 50%; left: 50%; transform: translate(-50%, -50%); transform-origin: center center; } covet-pics-highlighted .icon-arrow path { fill: var(--covet-pics-highlighted-primary-color); } covet-pics-highlighted .icon-arrow.rotate { transform: translate(-50%, -50%) rotate(180deg); } covet-pics-highlighted .page-pagination { position: absolute; left: 50%; top: 60%; transform: translate(-50%, 242px); font-size: 14px; color: var(--covet-pics-highlighted-primary-color); line-height: 18px; letter-spacing: 0.5px; z-index: 10; } @media only screen and (max-width: 799.98px) { covet-pics-highlighted .page-pagination { top: auto; bottom: 0; transform: translate(-50%, -18px); } } @keyframes pulsate { 0% { opacity: 1; } 50% { opacity: 0.3; } 100% { opacity: 1; } }`;
|
|
5219
|
+
const covetPicsHighlightedCss = () => ` :root { --swiper-theme-color: #007aff; } :host { position: relative; display: block; margin-left: auto; margin-right: auto; z-index: 1; } .swiper { margin-left: auto; margin-right: auto; position: relative; overflow: hidden; list-style: none; padding: 0; z-index: 1; display: block; } .swiper-vertical > .swiper-wrapper { flex-direction: column; } .swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; display: flex; transition-property: transform; transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial); box-sizing: content-box; } .swiper-android .swiper-slide, .swiper-ios .swiper-slide, .swiper-wrapper { transform: translate3d(0px, 0, 0); } .swiper-horizontal { touch-action: pan-y; } .swiper-vertical { touch-action: pan-x; } .swiper-slide { flex-shrink: 0; width: 100%; height: 100%; position: relative; transition-property: transform; display: block; } .swiper-slide-invisible-blank { visibility: hidden; } .swiper-autoheight, .swiper-autoheight .swiper-slide { height: auto; } .swiper-autoheight .swiper-wrapper { align-items: flex-start; transition-property: transform, height; } .swiper-backface-hidden .swiper-slide { transform: translateZ(0); backface-visibility: hidden; } .swiper-3d.swiper-css-mode .swiper-wrapper { perspective: 1200px; } .swiper-3d .swiper-wrapper { transform-style: preserve-3d; } .swiper-3d { perspective: 1200px; .swiper-slide, .swiper-cube-shadow { transform-style: preserve-3d; } } .swiper-css-mode { > .swiper-wrapper { overflow: auto; scrollbar-width: none; -ms-overflow-style: none; &::-webkit-scrollbar { display: none; } } > .swiper-wrapper > .swiper-slide { scroll-snap-align: start start; } &.swiper-horizontal { > .swiper-wrapper { scroll-snap-type: x mandatory; } > .swiper-wrapper > .swiper-slide:first-child { margin-inline-start: var(--swiper-slides-offset-before); scroll-margin-inline-start: var(--swiper-slides-offset-before); } > .swiper-wrapper > .swiper-slide:last-child { margin-inline-end: var(--swiper-slides-offset-after); } } &.swiper-vertical { > .swiper-wrapper { scroll-snap-type: y mandatory; } > .swiper-wrapper > .swiper-slide:first-child { margin-block-start: var(--swiper-slides-offset-before); scroll-margin-block-start: var(--swiper-slides-offset-before); } > .swiper-wrapper > .swiper-slide:last-child { margin-block-end: var(--swiper-slides-offset-after); } } &.swiper-free-mode { > .swiper-wrapper { scroll-snap-type: none; } > .swiper-wrapper > .swiper-slide { scroll-snap-align: none; } } &.swiper-centered { > .swiper-wrapper::before { content: ""; flex-shrink: 0; order: 9999; } > .swiper-wrapper > .swiper-slide { scroll-snap-align: center center; scroll-snap-stop: always; } } &.swiper-centered.swiper-horizontal { > .swiper-wrapper > .swiper-slide:first-child { margin-inline-start: var(--swiper-centered-offset-before); } > .swiper-wrapper::before { height: 100%; min-height: 1px; width: var(--swiper-centered-offset-after); } } &.swiper-centered.swiper-vertical { > .swiper-wrapper > .swiper-slide:first-child { margin-block-start: var(--swiper-centered-offset-before); } > .swiper-wrapper::before { width: 100%; min-width: 1px; height: var(--swiper-centered-offset-after); } } } .swiper-3d { .swiper-slide-shadow, .swiper-slide-shadow-left, .swiper-slide-shadow-right, .swiper-slide-shadow-top, .swiper-slide-shadow-bottom, .swiper-slide-shadow, .swiper-slide-shadow-left, .swiper-slide-shadow-right, .swiper-slide-shadow-top, .swiper-slide-shadow-bottom { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10; } .swiper-slide-shadow { background: rgba(0, 0, 0, 0.15); } .swiper-slide-shadow-left { background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-slide-shadow-right { background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-slide-shadow-top { background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-slide-shadow-bottom { background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } } .swiper-lazy-preloader { width: 42px; height: 42px; position: absolute; left: 50%; top: 50%; margin-left: -21px; margin-top: -21px; z-index: 10; transform-origin: 50%; box-sizing: border-box; border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color)); border-radius: 50%; border-top-color: transparent; } .swiper:not(.swiper-watch-progress), .swiper-watch-progress .swiper-slide-visible { .swiper-lazy-preloader { animation: swiper-preloader-spin 1s infinite linear; } } .swiper-lazy-preloader-white { --swiper-preloader-color: #fff; } .swiper-lazy-preloader-black { --swiper-preloader-color: #000; } @keyframes swiper-preloader-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } :root { --swiper-navigation-size: 44px; } .swiper-button-prev, .swiper-button-next { position: absolute; width: var(--swiper-navigation-size); height: var(--swiper-navigation-size); z-index: 10; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--swiper-navigation-color, var(--swiper-theme-color)); &.swiper-button-disabled { opacity: 0.35; cursor: auto; pointer-events: none; } &.swiper-button-hidden { opacity: 0; cursor: auto; pointer-events: none; } .swiper-navigation-disabled & { display: none !important; } ::slotted(svg), svg { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; transform-origin: center; fill: currentColor; pointer-events: none; } } .swiper-button-lock { display: none; } .swiper-button-prev, .swiper-button-next { top: var(--swiper-navigation-top-offset, 50%); margin-top: calc(0px - var(--swiper-navigation-size) / 2); } .swiper-button-prev { left: var(--swiper-navigation-sides-offset, 4px); right: auto; ::slotted(.swiper-navigation-icon), .swiper-navigation-icon { transform: rotate(180deg); } } .swiper-button-next { right: var(--swiper-navigation-sides-offset, 4px); left: auto; } .swiper-horizontal { .swiper-button-prev, .swiper-button-next, ~ .swiper-button-prev, ~ .swiper-button-next { top: var(--swiper-navigation-top-offset, 50%); margin-top: calc(0px - var(--swiper-navigation-size) / 2); margin-left: 0; } .swiper-button-prev, & ~ .swiper-button-prev, &.swiper-rtl .swiper-button-next, &.swiper-rtl ~ .swiper-button-next { left: var(--swiper-navigation-sides-offset, 4px); right: auto; } .swiper-button-next, & ~ .swiper-button-next, &.swiper-rtl .swiper-button-prev, &.swiper-rtl ~ .swiper-button-prev { right: var(--swiper-navigation-sides-offset, 4px); left: auto; } .swiper-button-prev, & ~ .swiper-button-prev, &.swiper-rtl .swiper-button-next, &.swiper-rtl ~ .swiper-button-next { ::slotted(.swiper-navigation-icon), .swiper-navigation-icon { transform: rotate(180deg); } } &.swiper-rtl .swiper-button-prev, &.swiper-rtl ~ .swiper-button-prev { ::slotted(.swiper-navigation-icon), .swiper-navigation-icon { transform: rotate(0deg); } } } .swiper-vertical { .swiper-button-prev, .swiper-button-next, ~ .swiper-button-prev, ~ .swiper-button-next { left: var(--swiper-navigation-top-offset, 50%); right: auto; margin-left: calc(0px - var(--swiper-navigation-size) / 2); margin-top: 0; } .swiper-button-prev, ~ .swiper-button-prev { top: var(--swiper-navigation-sides-offset, 4px); bottom: auto; ::slotted(.swiper-navigation-icon), .swiper-navigation-icon { transform: rotate(-90deg); } } .swiper-button-next, ~ .swiper-button-next { bottom: var(--swiper-navigation-sides-offset, 4px); top: auto; ::slotted(.swiper-navigation-icon), .swiper-navigation-icon { transform: rotate(90deg); } } } :root { } .swiper-pagination { position: absolute; text-align: center; transition: 300ms opacity; transform: translate3d(0, 0, 0); z-index: 10; &.swiper-pagination-hidden { opacity: 0; } .swiper-pagination-disabled > &, &.swiper-pagination-disabled { display: none !important; } } .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal { bottom: var(--swiper-pagination-bottom, 8px); top: var(--swiper-pagination-top, auto); left: 0; width: 100%; } .swiper-pagination-bullets-dynamic { overflow: hidden; font-size: 0; .swiper-pagination-bullet { transform: scale(0.33); position: relative; } .swiper-pagination-bullet-active { transform: scale(1); } .swiper-pagination-bullet-active-main { transform: scale(1); } .swiper-pagination-bullet-active-prev { transform: scale(0.66); } .swiper-pagination-bullet-active-prev-prev { transform: scale(0.33); } .swiper-pagination-bullet-active-next { transform: scale(0.66); } .swiper-pagination-bullet-active-next-next { transform: scale(0.33); } } .swiper-pagination-bullet { width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px)); height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px)); display: inline-block; border-radius: var(--swiper-pagination-bullet-border-radius, 50%); background: var(--swiper-pagination-bullet-inactive-color, #000); opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2); button& { border: none; margin: 0; padding: 0; box-shadow: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .swiper-pagination-clickable & { cursor: pointer; } &:only-child { display: none !important; } } .swiper-pagination-bullet-active { opacity: var(--swiper-pagination-bullet-opacity, 1); background: var(--swiper-pagination-color, var(--swiper-theme-color)); } .swiper-vertical > .swiper-pagination-bullets, .swiper-pagination-vertical.swiper-pagination-bullets { right: var(--swiper-pagination-right, 8px); left: var(--swiper-pagination-left, auto); top: 50%; transform: translate3d(0px, -50%, 0); .swiper-pagination-bullet { margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0; display: block; } &.swiper-pagination-bullets-dynamic { top: 50%; transform: translateY(-50%); width: 8px; .swiper-pagination-bullet { display: inline-block; transition: 200ms transform, 200ms top; } } } .swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-horizontal.swiper-pagination-bullets { .swiper-pagination-bullet { margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px); } &.swiper-pagination-bullets-dynamic { left: 50%; transform: translateX(-50%); white-space: nowrap; .swiper-pagination-bullet { transition: 200ms transform, 200ms left; } } } .swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transition: 200ms transform, 200ms right; } .swiper-pagination-fraction { color: var(--swiper-pagination-fraction-color, inherit); } .swiper-pagination-progressbar { background: var(--swiper-pagination-progressbar-bg-color, rgba(0, 0, 0, 0.25)); position: absolute; .swiper-pagination-progressbar-fill { background: var(--swiper-pagination-color, var(--swiper-theme-color)); position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform: scale(0); transform-origin: left top; } .swiper-rtl & .swiper-pagination-progressbar-fill { transform-origin: right top; } .swiper-horizontal > &, &.swiper-pagination-horizontal, .swiper-vertical > &.swiper-pagination-progressbar-opposite, &.swiper-pagination-vertical.swiper-pagination-progressbar-opposite { width: 100%; height: var(--swiper-pagination-progressbar-size, 4px); left: 0; top: 0; } .swiper-vertical > &, &.swiper-pagination-vertical, .swiper-horizontal > &.swiper-pagination-progressbar-opposite, &.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite { width: var(--swiper-pagination-progressbar-size, 4px); height: 100%; left: 0; top: 0; } } .swiper-pagination-lock { display: none; } .swiper-fade { &.swiper-free-mode { .swiper-slide { transition-timing-function: ease-out; } } .swiper-slide { pointer-events: none; transition-property: opacity; .swiper-slide { pointer-events: none; } } .swiper-slide-active { pointer-events: auto; & .swiper-slide-active { pointer-events: auto; } } } .slider-control { display: flex; justify-content: center; align-items: center; width: 35px; height: 35px; flex: none; border-radius: 50%; border: none; position: absolute; top: 50%; transform: translateY(-50%); padding: 0; overflow: hidden; transition: all 0.6s ease; cursor: pointer; } .slider-control:hover, .slider-control:focus, .slider-control:active { outline: none !important; } .slider-control.next { left: 16px; } @media only screen and (max-width: 799.98px) { .slider-control.next.main { left: 32px; } } .slider-control.prev { right: 16px; } @media only screen and (max-width: 799.98px) { .slider-control.prev.main { right: 32px; } } .slider-control.small { width: 13px; height: 8px; position: relative; transform: none; padding: 0; background-color: transparent; left: 0; right: 0; transform-origin: 50% 50%; } .slider-control.small:focus { background-color: transparent; opacity: 1; } .slider-control.small:hover, .slider-control.small:active, .slider-control.small.active { background-color: transparent; opacity: 0.5; } .slider-control.main { z-index: 5; background-color: #101010; will-change: transform; transform-origin: 50% 50%; } .slider-control.main .icon-arrow { position: absolute; width: 14px; height: 12px; } .slider-control.main .icon-arrow path { fill: white; } @media only screen and (max-width: 799.98px) { .slider-control.main .icon-arrow { width: 14px; height: 10px; } } .slider-control.main.main-spotlight { top: 30%; } @media only screen and (max-width: 799.98px) { .slider-control.main.main-spotlight { top: auto; } } .slider-control.main:focus { background-color: #101010; transform: translateY(-50%) scale(1); } .slider-control.main:hover, .slider-control.main:active, .slider-control.main.active { background-color: #101010; transform: translateY(-50%) scale(0.95); } .slider-control.main:disabled { opacity: 0.5; cursor: auto; transform: translateY(-50%) scale(1); } @media only screen and (max-width: 799.98px) { .slider-control.main { top: auto; bottom: 0; transform: translateY(-10px); background-color: transparent; } .slider-control.main:focus { background-color: transparent; opacity: 1; transform: translateY(-10px) scale(1); } .slider-control.main:hover, .slider-control.main:active, .slider-control.main.active { background-color: transparent; transform: translateY(-10px) scale(1); opacity: 0.5; } .slider-control.main:disabled { opacity: 0.5; background-color: transparent; transform: translateY(-10px) scale(1); cursor: auto; } .slider-control.main .icon-arrow path { fill: var(--covet-pics-highlighted-primary-color); } } .slider-control.layout-3 { width: 40px; height: 40px; border-radius: 0; background-color: transparent; box-shadow: none; position: relative; top: 0; left: 0; transform: none; } .slider-control.layout-3 .icon-arrow { width: 100%; height: 100%; } .slider-control.layout-3:hover, .slider-control.layout-3:active, .slider-control.layout-3.active { opacity: 0.5; } .slider-control.layout-4 { width: 48px; height: 48px; border-radius: 0; background-color: transparent; box-shadow: none; } covet-pics-highlighted { box-sizing: border-box; display: block; width: 100%; position: relative; overflow: hidden; } covet-pics-highlighted.row { display: grid; grid-template-columns: repeat(3, calc(33.3333333333% - var(--covet-pics-highlighted-padding-px) * 2 / 3)); padding: var(--covet-pics-highlighted-padding-px); grid-gap: var(--covet-pics-highlighted-padding-px); } @media only screen and (max-width: 799.98px) { covet-pics-highlighted.row { padding: 0; grid-gap: 0; grid-template-columns: repeat(1, 100%); } } covet-pics-highlighted.slider { height: 100vh; height: calc(var(--covet-pics-highlighted-window-height, 1vh) * 100); padding: var(--covet-pics-highlighted-padding); } @media only screen and (max-width: 799.98px) { covet-pics-highlighted.slider { padding: 0; } } covet-pics-highlighted.spotlight { height: 115vh; height: calc(var(--covet-pics-highlighted-window-height, 1vh) * 115); padding: var(--covet-pics-highlighted-padding); } @media only screen and (max-width: 799.98px) { covet-pics-highlighted.spotlight { padding: 0; height: 100vh; height: calc(var(--covet-pics-highlighted-window-height, 1vh) * 100); } } covet-pics-highlighted h1, covet-pics-highlighted h2, covet-pics-highlighted h3, covet-pics-highlighted h4, covet-pics-highlighted h5, covet-pics-highlighted h6, covet-pics-highlighted p { margin-top: 0; margin-bottom: 16px; color: var(--covet-pics-highlighted-primary-color); } covet-pics-highlighted p { margin-top: 0; margin-bottom: 8px; color: var(--covet-pics-highlighted-secondary-color); } covet-pics-highlighted .main-slider { width: 100%; overflow: hidden; position: relative; height: 100%; } covet-pics-highlighted .main-slider .page { position: absolute; width: 100%; height: 100%; left: 0; top: 0; } covet-pics-highlighted .main-slider .slide-noactive { opacity: 0; transform: translateY(-100%); pointer-events: none; } covet-pics-highlighted .main-slider .slide-active { opacity: 1; } covet-pics-highlighted .main-slider .slide-active .thumbnail .img-cover, covet-pics-highlighted .main-slider .slide-active .thumbnail .img-contain { transform: scale(1); } covet-pics-highlighted .main-slider .slide-active .thumbnail .thumbnail-carousel .swiper-slide .img-cover, covet-pics-highlighted .main-slider .slide-active .thumbnail .thumbnail-carousel .swiper-slide .img-contain { transform: scale(1); } covet-pics-highlighted .main-slider .leave { opacity: 0; transition: opacity 0.6s ease; } covet-pics-highlighted .main-slider .leave.fast { transition: opacity 0.3s ease; } covet-pics-highlighted .main-slider .leave-to { transform: translateY(-100%); } covet-pics-highlighted .main-slider .before-enter { opacity: 0; transition: none; transform: none; z-index: 3; } covet-pics-highlighted .main-slider .before-enter .thumbnail .img-cover, covet-pics-highlighted .main-slider .before-enter .thumbnail .img-contain { transform: scale(1.2); } covet-pics-highlighted .main-slider .before-enter .thumbnail .thumbnail-carousel .swiper-slide .img-cover, covet-pics-highlighted .main-slider .before-enter .thumbnail .thumbnail-carousel .swiper-slide .img-contain { transform: scale(1); } covet-pics-highlighted .main-slider .before-enter .thumbnail .thumbnail-carousel .swiper-slide.swiper-slide-active .img-cover, covet-pics-highlighted .main-slider .before-enter .thumbnail .thumbnail-carousel .swiper-slide.swiper-slide-active .img-contain { transform: scale(1.2); } covet-pics-highlighted .main-slider .enter { opacity: 1; transform: none; transition: opacity 0.6s ease; z-index: 3; } covet-pics-highlighted .main-slider .enter .thumbnail .img-cover, covet-pics-highlighted .main-slider .enter .thumbnail .img-contain { transition: transform 0.6s ease; transform: scale(1); } covet-pics-highlighted .main-slider .enter .thumbnail .thumbnail-carousel .swiper-slide.swiper-slide-active .img-cover, covet-pics-highlighted .main-slider .enter .thumbnail .thumbnail-carousel .swiper-slide.swiper-slide-active .img-contain { transition: transform 0.6s ease; transform: scale(1); } covet-pics-highlighted .main-slider .enter.fast { transition: opacity 0.3s ease; } covet-pics-highlighted .main-slider .enter.fast .thumbnail .img-cover, covet-pics-highlighted .main-slider .enter.fast .thumbnail .img-contain { transition: transform 0.3s ease; } covet-pics-highlighted .main-slider .enter.fast .thumbnail .thumbnail-carousel .swiper-slide.swiper-slide-active .img-cover, covet-pics-highlighted .main-slider .enter.fast .thumbnail .thumbnail-carousel .swiper-slide.swiper-slide-active .img-contain { transition: transform 0.3s ease; transform: scale(1); } covet-pics-highlighted .img-wrap { display: flex; } covet-pics-highlighted .img-cover { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; transform-origin: center center; } covet-pics-highlighted .img-contain { -o-object-position: 50% 50%; object-position: 50% 50%; width: 100%; -o-object-fit: cover; object-fit: cover; height: 100%; -o-object-fit: contain; object-fit: contain; } covet-pics-highlighted .icon-arrow { position: absolute; width: 100%; height: 100%; top: 50%; left: 50%; transform: translate(-50%, -50%); transform-origin: center center; } covet-pics-highlighted .icon-arrow path { fill: var(--covet-pics-highlighted-primary-color); } covet-pics-highlighted .icon-arrow.rotate { transform: translate(-50%, -50%) rotate(180deg); } covet-pics-highlighted .page-pagination { position: absolute; left: 50%; top: 60%; transform: translate(-50%, 242px); font-size: 14px; color: var(--covet-pics-highlighted-primary-color); line-height: 18px; letter-spacing: 0.5px; z-index: 10; } @media only screen and (max-width: 799.98px) { covet-pics-highlighted .page-pagination { top: auto; bottom: 0; transform: translate(-50%, -18px); } } covet-pics-highlighted .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } @keyframes pulsate { 0% { opacity: 1; } 50% { opacity: 0.3; } 100% { opacity: 1; } }`;
|
|
5220
5220
|
|
|
5221
5221
|
const CovetPicsHighlighted = class {
|
|
5222
5222
|
constructor(hostRef) {
|
|
@@ -5240,23 +5240,27 @@ const CovetPicsHighlighted = class {
|
|
|
5240
5240
|
this.mainSliderChangeSlide = (event, direction) => {
|
|
5241
5241
|
event.preventDefault();
|
|
5242
5242
|
event.stopPropagation();
|
|
5243
|
-
|
|
5244
|
-
|
|
5245
|
-
|
|
5246
|
-
if (direction === "next" && this.mainSliderIndex
|
|
5247
|
-
this.mainSliderIndex
|
|
5248
|
-
|
|
5249
|
-
|
|
5250
|
-
if (direction === "prev" && this.mainSliderIndex > 0) {
|
|
5251
|
-
this.mainSliderIndex--;
|
|
5252
|
-
return this.mainSliderAnimatingSlides.push(this.mainSliderIndex);
|
|
5253
|
-
}
|
|
5254
|
-
return this.mainSliderIndex;
|
|
5243
|
+
// A11Y "aria-disabled" does not block click, so prevent navigation go out slides limits.
|
|
5244
|
+
if (direction === "prev" && this.mainSliderIndex <= 0)
|
|
5245
|
+
return this.mainSliderIndex;
|
|
5246
|
+
if (direction === "next" && this.mainSliderIndex >= this.numberOfPages - 1)
|
|
5247
|
+
return this.mainSliderIndex;
|
|
5248
|
+
this.mainSliderIndex += direction === "next" ? 1 : -1;
|
|
5249
|
+
return this.mainSliderAnimatingSlides.push(this.mainSliderIndex);
|
|
5255
5250
|
};
|
|
5256
5251
|
}
|
|
5257
5252
|
handleItemLoaded() {
|
|
5258
5253
|
this.checkIsGalleryLoaded();
|
|
5259
5254
|
}
|
|
5255
|
+
handleKeydown(e) {
|
|
5256
|
+
if (this.layout !== "slider" && this.layout !== "spotlight")
|
|
5257
|
+
return true;
|
|
5258
|
+
if (e.key === "ArrowRight")
|
|
5259
|
+
this.mainSliderChangeSlide(e, "next");
|
|
5260
|
+
if (e.key === "ArrowLeft")
|
|
5261
|
+
this.mainSliderChangeSlide(e, "prev");
|
|
5262
|
+
return true;
|
|
5263
|
+
}
|
|
5260
5264
|
componentWillLoad() {
|
|
5261
5265
|
this.initStore();
|
|
5262
5266
|
this.pageSliderId = `covet-pics-highlighted-page-slider-${utils$1.getRandomId(16)}`;
|
|
@@ -5266,9 +5270,6 @@ const CovetPicsHighlighted = class {
|
|
|
5266
5270
|
this.initMainSlider();
|
|
5267
5271
|
this.checkIsGalleryLoaded();
|
|
5268
5272
|
}
|
|
5269
|
-
componentDidRender() {
|
|
5270
|
-
document.onkeydown = (e) => this.onSliderClickHandler(e);
|
|
5271
|
-
}
|
|
5272
5273
|
disconnectedCallback() {
|
|
5273
5274
|
this.unsubscribe();
|
|
5274
5275
|
}
|
|
@@ -5308,13 +5309,6 @@ const CovetPicsHighlighted = class {
|
|
|
5308
5309
|
? index.h("svg", { class: "icon-arrow", viewBox: "0 0 13 8", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, index.h("path", { d: "M3.89 7.778V6.364L1.98 4.455h10.957v-1H1.848l2.041-2.04V0L0 3.89l3.89 3.888z", "fill-rule": "nonzero" }))
|
|
5309
5310
|
: index.h("svg", { class: "icon-arrow rotate", viewBox: "0 0 13 8", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, index.h("path", { d: "M3.89 7.778V6.364L1.98 4.455h10.957v-1H1.848l2.041-2.04V0L0 3.89l3.89 3.888z", "fill-rule": "nonzero" }));
|
|
5310
5311
|
}
|
|
5311
|
-
onSliderClickHandler(e) {
|
|
5312
|
-
if (e.keyCode === 39)
|
|
5313
|
-
this.mainSliderChangeSlide(e, "next");
|
|
5314
|
-
if (e.keyCode === 37)
|
|
5315
|
-
this.mainSliderChangeSlide(e, "prev");
|
|
5316
|
-
return true;
|
|
5317
|
-
}
|
|
5318
5312
|
initMainSlider() {
|
|
5319
5313
|
const slides = Array.from(this.el.querySelectorAll(".main-slider .page"));
|
|
5320
5314
|
if (slides.length === 0)
|
|
@@ -5410,7 +5404,7 @@ const CovetPicsHighlighted = class {
|
|
|
5410
5404
|
return `page ${index + 1} of ${itemsLength} pages, with thumbnail img preview ${sideLabel} in page slider layout`;
|
|
5411
5405
|
}
|
|
5412
5406
|
renderSlider() {
|
|
5413
|
-
return (index.h("section", { id: this.pageSliderId, class: `main-slider ${this.layout}`, role: "
|
|
5407
|
+
return (index.h("section", { id: this.pageSliderId, class: `main-slider ${this.layout}`, role: "group", "aria-label": "Page slider" }, index.h("button", { "aria-disabled": this.mainSliderIndex === 0 ? "true" : "false", onClick: (e) => this.mainSliderChangeSlide(e, "prev"), class: `slider-control main next ${this.layout === "spotlight" ? "main-spotlight" : ""}`, "aria-label": "Previous page", "aria-controls": this.pageSliderId, type: "button" }, this.renderControlIcon("next")), this.items.map((item, index$1) => index.h("covet-pics-highlighted-page", { class: `${this.layout} slide-noactive`, thumbnailUrl: item.data_type === "image" ? item.images.high_resolution : null, thumbnailAlt: this.thumbnailAltTag(item.data_type, item.alt_tag, item.caption, index$1, this.items.length, item.created_time), ariaLabel: this.pageAriaLabel(item, index$1, this.items.length, this.layout, !this.isDesktopScreen), thumbnailLayout: item.data_type, thumbnailCarouselImages: item.data_type === "carousel" ? item.carousel_media : null, videoUrl: item.video ? item.video : null, videoPoster: item.cover_images && item.cover_images.high_resolution ? item.cover_images.high_resolution : null, productLinks: item.links, productBaseImgAlt: `page ${index$1 + 1}/${this.items.length}`, isMobile: !this.isDesktopScreen, pageIndex: index$1, mainSliderIndex: this.mainSliderIndex, caption: item.caption, "user-name": item.username, "created-time": item.created_time, rating: item.rating !== null ? item.rating : 0, "page-id": item.id, appStore: this.appStore, tabindex: index$1 === this.mainSliderIndex ? 0 : -1, inert: index$1 !== this.mainSliderIndex })), index.h("button", { "aria-disabled": this.mainSliderIndex === this.numberOfPages - 1 ? "true" : "false", onClick: (e) => this.mainSliderChangeSlide(e, "next"), class: `slider-control main prev ${this.layout === "spotlight" ? "main-spotlight" : ""}`, "aria-label": "Next page", "aria-controls": this.pageSliderId, type: "button" }, this.renderControlIcon("prev"))));
|
|
5414
5408
|
}
|
|
5415
5409
|
renderVertical() {
|
|
5416
5410
|
return (this.items.map((item, index$1) => index.h("covet-pics-highlighted-page", { class: this.layout, thumbnailUrl: item.data_type === "image" ? item.images.high_resolution : null, thumbnailAlt: this.thumbnailAltTag(item.data_type, item.alt_tag, item.caption, index$1, this.items.length, item.created_time), ariaLabel: this.pageAriaLabel(item, index$1, this.items.length, this.layout, !this.isDesktopScreen), thumbnailLayout: item.data_type, thumbnailCarouselImages: item.data_type === "carousel" ? item.carousel_media : null, videoUrl: item.video ? item.video : null, videoPoster: item.cover_images && item.cover_images.high_resolution ? item.cover_images.high_resolution : null, productLinks: item.links, productBaseImgAlt: `page ${index$1 + 1}/${this.items.length}`, isMobile: !this.isDesktopScreen, reverseClass: index$1 % 2 !== 0 && this.isDesktopScreen && this.layout === "zigzag" ? "reverse" : "", caption: item.caption, "user-name": item.username, "created-time": item.created_time, rating: item.rating !== null ? item.rating : 0, "item-type": item.data_type, "page-id": item.id, appStore: this.appStore })));
|
|
@@ -5471,10 +5465,11 @@ const CovetPicsHighlighted = class {
|
|
|
5471
5465
|
return Promise.all([hide, show]);
|
|
5472
5466
|
}
|
|
5473
5467
|
render() {
|
|
5474
|
-
const
|
|
5475
|
-
|
|
5476
|
-
|
|
5477
|
-
|
|
5468
|
+
const isCarousel = this.layout === "slider" || this.layout === "spotlight";
|
|
5469
|
+
const showStatus = isCarousel && this.items && this.items.length > 1;
|
|
5470
|
+
const paginationVisible = this.layout === "spotlight" || (this.layout === "slider" && !this.isDesktopScreen);
|
|
5471
|
+
return (index.h(index.Host, { key: '79e47a7664fa0dcbae5a846ee419480444dba4be', class: this.layout, style: this.setCSSVariables(), onClick: (e) => !this.isDesktopScreen && this.layout === "row" ? this.isClickOutsideHotspot(e) : null, role: isCarousel ? "region" : "list", "aria-label": isCarousel ? `Page gallery, ${this.items.length} posts` : "Page gallery", "aria-roledescription": isCarousel ? "carousel" : undefined }, this.renderMainLayout(), showStatus &&
|
|
5472
|
+
index.h("span", { key: 'f291172c75d247fe87c094dff63538b44a2d8e49', class: paginationVisible ? "page-pagination" : "sr-only", role: "status", "aria-label": !paginationVisible ? `Page ${this.mainSliderIndex + 1} of ${this.items.length}` : undefined }, `${this.mainSliderIndex + 1}/${this.items.length}`)));
|
|
5478
5473
|
}
|
|
5479
5474
|
get el() { return index.getElement(this); }
|
|
5480
5475
|
};
|