1import{LitElement,html,css}from"@hh/global.js";class HHArticleGallery extends LitElement{static get properties(){return{imagesArray:{type:Array}}}constructor(){super(),this.imagesArray=[],this.mobileSizesArray=this.dataset.mobileSizes.split(","),this.desktopSizesArray=this.dataset.desktopSizes.split(",")}connectedCallback(){super.connectedCallback(),this.updateComplete.then(()=>{this._initGallery()})}_initGallery(){lightGallery(this.shadowRoot.querySelector("#lightgallery"),{selector:".gallery-image",licenseKey:"8c0d8844-e85f-4081-8628-67a19224bbd7"})}render(){return html` 2 <div id="lightgallery" class="gallery-images-container"> 3 ${this.imagesArray.map((image,index)=>html` 4 <div class="gallery-image gallery-image--mobile-${this.mobileSizesArray[index]} gallery-image--desktop-${this.desktopSizesArray[index]}" data-src="${image}"> 5 <img src="${image}" /> 6 </div> 7 `)} 8 </div> 9 `}static styles=css` 10 .gallery-images-container { 11 display: flex; 12 flex-wrap: wrap; 13 padding-top: 1rem; 14 margin-left: -1rem; 15 } 16 @media screen and (min-width: 990px) { 17 .gallery-images-container { 18 padding-top: 1.5rem; 19 margin-left: -1.5rem; 20 } 21 } 22 .gallery-image--mobile-25 { 23 max-width: calc(25% - 1rem); 24 width: calc(25% - 1rem); 25 } 26 .gallery-image--mobile-33 { 27 max-width: calc(33.333% - 1rem); 28 width: calc(33.333% - 1rem); 29 } 30 .gallery-image--mobile-50 { 31 max-width: calc(50% - 1rem); 32 width: calc(50% - 1rem); 33 } 34 .gallery-image--mobile-100 { 35 max-width: 100%; 36 width: 100%; 37 } 38 @media screen and (min-width: 990px) { 39 .gallery-image--desktop-25 { 40 max-width: calc(25% - 1.5rem); 41 width: calc(25% - 1.5rem); 42 } 43 .gallery-image--desktop-33 { 44 max-width: calc(33.333% - 1.5rem); 45 width: calc(33.333% - 1.5rem); 46 } 47 .gallery-image--desktop-50 { 48 max-width: calc(50% - 1.5rem); 49 width: calc(50% - 1.5rem); 50 } 51 .gallery-image--desktop-100 { 52 max-width: 100%; 53 width: 100%; 54 } 55 } 56 .gallery-image { 57 padding-left: 1rem; 58 padding-bottom: 1rem; 59 } 60 .gallery-image img { 61 display: block; 62 width: 100%; 63 max-width: 100%; 64 height: 100%; 65 object-fit: cover; 66 object-position: center center; 67 cursor: pointer; 68 } 69 @media screen and (min-width: 990px) { 70 .gallery-image { 71 padding-left: 1.5rem; 72 padding-bottom: 1.5rem; 73 } 74 } 75 `}customElements.define("hh-article-gallery",HHArticleGallery); 76//# sourceMappingURL=/cdn/shop/t/725/assets/component-article-gallery.js.map?v=139409306913628048901776706983
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.