lightgallery/lightgallery.umd.js.map

lightGallery is a feature-rich, modular JavaScript gallery plugin for building beautiful image and video galleries for the web and the mobile

{"version":3,"file":"lightgallery.umd.js","sources":["../src/lg-events.ts","../src/lg-settings.ts","../src/lgQuery.ts","../src/lg-utils.ts","../src/lightgallery.ts","../src/index.ts"],"sourcesContent":["import { LightGallery } from './lightgallery';\nimport { VideoSource } from './plugins/video/types';\n\n/**\n * List of lightGallery events\n * All events should be documented here\n * Below interfaces are used to build the website documentations\n * */\nexport const lGEvents: {\n    [key: string]: string;\n} = {\n    afterAppendSlide: 'lgAfterAppendSlide',\n    init: 'lgInit',\n    hasVideo: 'lgHasVideo',\n    containerResize: 'lgContainerResize',\n    updateSlides: 'lgUpdateSlides',\n    afterAppendSubHtml: 'lgAfterAppendSubHtml',\n    beforeOpen: 'lgBeforeOpen',\n    afterOpen: 'lgAfterOpen',\n    slideItemLoad: 'lgSlideItemLoad',\n    beforeSlide: 'lgBeforeSlide',\n    afterSlide: 'lgAfterSlide',\n    posterClick: 'lgPosterClick',\n    dragStart: 'lgDragStart',\n    dragMove: 'lgDragMove',\n    dragEnd: 'lgDragEnd',\n    beforeNextSlide: 'lgBeforeNextSlide',\n    beforePrevSlide: 'lgBeforePrevSlide',\n    beforeClose: 'lgBeforeClose',\n    afterClose: 'lgAfterClose',\n    rotateLeft: 'lgRotateLeft',\n    rotateRight: 'lgRotateRight',\n    flipHorizontal: 'lgFlipHorizontal',\n    flipVertical: 'lgFlipVertical',\n    autoplay: 'lgAutoplay',\n    autoplayStart: 'lgAutoplayStart',\n    autoplayStop: 'lgAutoplayStop',\n};\n\n// Follow the below format for the event documentation\n// @method is the method name when event is used with Angular/React components\n\n/**\n * Fired only once when lightGallery is initialized\n * @name lgInit\n * @method onInit\n * @example\n *   const lg = document.getElementById('custom-events-demo');\n *   // Perform any action on lightGallery initialization.\n *   // Init event returns the plugin instance that can be used to call any lightGalley public method\n *   let pluginInstance = null;\n *   lg.addEventListener('lgInit', (event) => {\n *      pluginInstance = event.detail.instance;\n *   });\n *   lightGallery(lg);\n * @see <a href=\"/docs/methods\">Methods<a>\n */\nexport interface InitDetail {\n    /**\n     * lightGallery plugin instance\n     */\n    instance: LightGallery;\n}\n\n/**\n * Fired when the slide content has been inserted into it's slide container.\n * @name lgAfterAppendSlide\n * @method onAfterAppendSlide\n */\nexport interface AfterAppendSlideEventDetail {\n    /**\n     * Index of the slide\n     */\n    index: number;\n}\n\n/**\n * Fired immediately before opening the gallery\n * @name lgBeforeOpen\n * @method onBeforeOpen\n */\nexport interface BeforeOpenDetail {}\n\n/**\n * Fired immediately after opening the gallery\n * @name lgAfterOpen\n * @method onAfterOpen\n */\nexport interface AfterOpenDetail {}\n\n/**\n * Fired once the media inside the slide has been completely loaded .\n * @name lgSlideItemLoad\n * @method onSlideItemLoad\n */\nexport interface SlideItemLoadDetail {\n    /**\n     * Index of the slide\n     */\n    index: number;\n    /**\n     * For the first slide, lightGallery adds some delay for displaying the loaded slide item.\n     * This delay is required for the transition effect when the slide item is displayed\n     * Respect the delay when you use this event\n     */\n    delay: number;\n\n    // Will be true for the first slide\n    isFirstSlide: boolean;\n}\n\n/**\n * Fired immediately before each slide transition.\n * @name lgBeforeSlide\n * @method onBeforeSlide\n * @example\n *   const lg = document.getElementById('custom-events-demo');\n *   // Perform any action before each slide transition\n *   lg.addEventListener('lgBeforeSlide', (event) => {\n *       const { index, prevIndex } = event.detail;\n *       alert(index, prevIndex);\n *   });\n *   lightGallery(lg);\n */\nexport interface BeforeSlideDetail {\n    /**\n     * Index of the previous slide\n     */\n    prevIndex: number;\n    /**\n     * Index of the slide\n     */\n    index: number;\n    /**\n     * true if slide function called via touch event or mouse drag\n     */\n    fromTouch: boolean;\n    /**\n     * true if slide function called via thumbnail click\n     */\n    fromThumb: boolean;\n}\n\n/**\n * Fired immediately after each slide transition.\n * @name lgAfterSlide\n * @method onAfterSlide\n */\nexport interface AfterSlideDetail {\n    /**\n     * Index of the previous slide\n     */\n    prevIndex: number;\n    /**\n     * Index of the slide\n     */\n    index: number;\n    /**\n     * true if slide function called via touch event or mouse drag\n     */\n    fromTouch: boolean;\n    /**\n     * true if slide function called via thumbnail click\n     */\n    fromThumb: boolean;\n}\n\n/**\n * Fired when the video poster is clicked.\n * @name lgPosterClick\n * @method onPosterClick\n */\nexport interface PosterClickDetail {}\n\n/**\n * Fired when the drag event to move to different slide starts.\n * @name lgDragStart\n * @method onDragStart\n */\nexport interface DragStartDetail {}\n\n/**\n * Fired periodically during the drag operation.\n * @name lgDragMove\n * @method onDragMove\n */\nexport interface DragMoveDetail {}\n\n/**\n * Fired when the user has finished the drag operation\n * @name lgDragEnd\n * @method onDragEnd\n */\nexport interface DragEndDetail {}\n\n/**\n * Fired immediately before the start of the close process.\n * @name lgBeforeClose\n * @method onBeforeClose\n */\nexport interface BeforeCloseDetail {}\n\n/**\n * Fired immediately once lightGallery is closed.\n * @name lgAfterClose\n * @method onAfterClose\n */\nexport interface AfterCloseDetail {\n    /**\n     * lightGallery plugin instance\n     */\n    instance: LightGallery;\n}\n\n/**\n * Fired immediately before each \"next\" slide transition\n * @name lgBeforeNextSlide\n * @method onBeforeNextSlide\n */\nexport interface BeforeNextSlideDetail {\n    /**\n     * Index of the slide\n     */\n    index: number;\n    /**\n     * true if slide function called via touch event or mouse drag\n     */\n    fromTouch: boolean;\n}\n\n/**\n * Fired immediately before each \"prev\" slide transition\n * @name lgBeforePrevSlide\n * @method onBeforePrevSlide\n */\nexport interface BeforePrevSlideDetail {\n    /**\n     * Index of the slide\n     */\n    index: number;\n    /**\n     * true if slide function called via touch event or mouse drag\n     */\n    fromTouch: boolean;\n}\n\n/**\n * Fired when the sub-html content (ex : title/ description) has been appended into the slide.\n * @name lgAfterAppendSubHtml\n * @method onAfterAppendSubHtml\n */\nexport interface AfterAppendSubHtmlDetail {\n    /**\n     * Index of the slide\n     */\n    index: number;\n}\n\n/**\n * Fired when the lightGallery container has been resized.\n * @name lgContainerResize\n * @method onContainerResize\n */\nexport interface ContainerResizeDetail {\n    /**\n     * Index of the slide\n     */\n    index: number;\n}\n\n/**\n * Fired when lightGallery detects video slide\n * @name lgHasVideo\n * @method onHasVideo\n */\nexport interface HasVideoDetail {\n    /**\n     * Index of the slide,\n     */\n    index: number;\n    /**\n     * Video source\n     */\n    src: string;\n    /**\n     * HTML5 video source if available\n     * <p>\n       HTML5 video source = source: {\n            src: string;\n            type: string;\n        }[];\n        attributes: HTMLVideoElement;\n     * </p>\n     */\n    html5Video: VideoSource;\n    /**\n     * True if video has poster\n     */\n    hasPoster: boolean;\n}\n\n/**\n * Fired when the image is rotated in anticlockwise direction\n * @name lgRotateLeft\n * @method onRotateLeft\n */\nexport interface RotateLeftDetail {\n    /**\n     * Index of the slide\n     */\n    index: number;\n}\n\n/**\n * Fired when the image is rotated in clockwise direction\n * @name lgRotateRight\n * @method onRotateRight\n */\nexport interface RotateRightDetail {\n    /**\n     * Index of the slide\n     */\n    index: number;\n}\n\n/**\n * Fired when the image is flipped horizontally\n * @name lgFlipHorizontal\n * @method onFlipHorizontal\n */\nexport interface FlipHorizontalDetail {\n    /**\n     * Index of the slide\n     */\n    index: number;\n}\n\n/**\n * Fired when the image is flipped vertically\n * @name lgFlipVertical\n * @method onFlipVertical\n */\nexport interface FlipVerticalDetail {\n    /**\n     * Index of the slide\n     */\n    index: number;\n}\n","import { GalleryItem } from './lg-utils';\nimport { LgQuery } from './lgQuery';\nimport { LightGallery } from './lightgallery';\nimport { AutoplaySettings } from './plugins/autoplay/lg-autoplay-settings';\nimport { CommentSettings } from './plugins/comment/lg-comment-settings';\nimport { FullscreenSettings } from './plugins/fullscreen/lg-fullscreen-settings';\nimport { HashSettings } from './plugins/hash/lg-hash-settings';\nimport { PagerSettings } from './plugins/pager/lg-pager-settings';\nimport { RotateSettings } from './plugins/rotate/lg-rotate-settings';\nimport { ShareSettings } from './plugins/share/lg-share-settings';\nimport { ThumbnailsSettings } from './plugins/thumbnail/lg-thumbnail-settings';\nimport { VideoSettings } from './plugins/video/lg-video-settings';\nimport { ZoomSettings } from './plugins/zoom/lg-zoom-settings';\n\ntype LightGalleryCoreMobileSettings = Exclude<\n    LightGalleryCoreSettings,\n    'mobileSettings'\n>;\n\n// @todo use separate mobile settings for plugins\nexport interface MobileSettings\n    extends LightGalleryCoreMobileSettings,\n        Partial<ZoomSettings>,\n        Partial<ThumbnailsSettings>,\n        Partial<VideoSettings>,\n        Partial<AutoplaySettings>,\n        Partial<CommentSettings>,\n        Partial<FullscreenSettings>,\n        Partial<HashSettings>,\n        Partial<PagerSettings>,\n        Partial<RotateSettings>,\n        Partial<ShareSettings> {}\n\nexport interface LightGalleryCoreStrings {\n    closeGallery: string;\n    toggleMaximize: string;\n    previousSlide: string;\n    nextSlide: string;\n    download: string;\n    playVideo: string;\n}\n\nexport type LightGalleryAllSettings = LightGalleryCoreSettings &\n    ZoomSettings &\n    ThumbnailsSettings &\n    VideoSettings &\n    AutoplaySettings &\n    CommentSettings &\n    FullscreenSettings &\n    HashSettings &\n    PagerSettings &\n    RotateSettings &\n    ShareSettings;\n\nexport type LightGallerySettings = Partial<LightGalleryAllSettings>;\n\nexport interface LightGalleryCoreSettings {\n    /**\n     * Type of transition between images.\n     */\n    mode:\n        | 'lg-slide'\n        | 'lg-fade'\n        | 'lg-zoom-in'\n        | 'lg-zoom-in-big'\n        | 'lg-zoom-out'\n        | 'lg-zoom-out-big'\n        | 'lg-zoom-out-in'\n        | 'lg-zoom-in-out'\n        | 'lg-soft-zoom'\n        | 'lg-scale-up'\n        | 'lg-slide-circular'\n        | 'lg-slide-circular-vertical'\n        | 'lg-slide-vertical'\n        | 'lg-slide-vertical-growth'\n        | 'lg-slide-skew-only'\n        | 'lg-slide-skew-only-rev'\n        | 'lg-slide-skew-only-y'\n        | 'lg-slide-skew-only-y-rev'\n        | 'lg-slide-skew'\n        | 'lg-slide-skew-rev'\n        | 'lg-slide-skew-cross'\n        | 'lg-slide-skew-cross-rev'\n        | 'lg-slide-skew-ver'\n        | 'lg-slide-skew-ver-rev'\n        | 'lg-slide-skew-ver-cross'\n        | 'lg-slide-skew-ver-cross-rev'\n        | 'lg-lollipop'\n        | 'lg-lollipop-rev'\n        | 'lg-rotate'\n        | 'lg-rotate-rev'\n        | 'lg-tube';\n\n    /**\n     * Slide animation CSS easing property\n     */\n    easing: string;\n\n    /**\n     *Transition duration (in ms).\n     */\n    speed: number;\n\n    /**\n     * If you are using lightGallery for commercial projects, you need to purchase a commercial license\n     * to get the license key. For projects that are compatible with GPLv3 license,\n     * please contact us for getting a license key at <a href=\"mailto:contact@lightgalleryjs.com\">contact@lightgalleryjs.com</a>.\n     * If you want to test lightGallery before purchasing a commercial license, you can\n     * use `0000-0000-000-0000` as a temporary license key\n     */\n\n    licenseKey: string;\n\n    /**\n     * Height of the gallery.\n     * example '100%' , '300px'\n     */\n    height: string;\n\n    /**\n     * Width of the gallery.\n     * example '100%' , '300px'\n     */\n    width: string;\n\n    /**\n     * Add custom class for gallery container\n     * This can be used to set different style for different galleries\n     */\n    addClass: string;\n\n    /**\n     * Start animation class for the gallery.\n     * @description\n     * <ul>\n     * <li>startClass will be empty zoomFromOrigin is true.</li>\n     * <li>This can be used to change the starting effect when the image is loaded</li>\n     * <li>This is also applied when navigating to new slides</li>\n     * </ul>\n     */\n    startClass: string;\n\n    /**\n     * Enable zoom from origin effect.\n     * @description You need to know the original image size upfront and provide it via data-lg-size attribute as <code> data-lg-size=\"1920-1280</code>\"\n     *\n     * If you don't know, the size of a few images in the list, you can skip the data-lg-size attribute for the particular slides,\n     * lightGallery will show the default animation if data-lg-size is not available\n     *\n     * If you are using responsive images,\n     * you can pass a comma separated list of sizes combined with a max-width (up to what size the particular image should be used)\n     *\n     * example -\n     * <code> data-lg-size=\"240-160-375, 400-267-480, 1600-1067\"\n     * data-responsive=\"img-240.jpg 375, img-400.jpg 480\"\n     * data-src=\"img-1600.jpg\" </code>\n     *\n     * In the above example, upto 375 width img.240.jpg and lg-size 240-160 will be used.\n     * Similarly, upto 480 pixel width size 400-267 and img-400.jpg will be used\n     * And above 480, lg-size 1600-1067 and img-1600.jpg will be used\n     *\n     * <ul>\n     * <li>At the moment, zoomFromOrigin options is supported only for image slides.</li>\n     * <li>Will be false if dynamic option is enabled or galleryID found in the URL.</li>\n     * <li>startClass will be empty if zoomFromOrigin is true to avoid css conflicts.</li>\n     * </ul>\n     */\n    zoomFromOrigin: boolean;\n\n    /**\n     * Zoom from image animation duration\n     */\n    startAnimationDuration: number;\n\n    /**\n     * Backdrop transition duration.\n     * Note - Do not change the value of backdrop via css.\n     */\n    backdropDuration: number;\n\n    /**\n     * Configure where the gallery should be appended.\n     * Useful to create inline galleries and more\n     * It is an empty string in the default settings and later assigned to document.body to avoid accessing document for SSR\n     */\n    container: HTMLElement | '';\n\n    /**\n     * Delay for hiding gallery controls in ms.\n     * Pass <code>0</code> if you don't want to hide the controls\n     */\n    hideBarsDelay: number;\n\n    /**\n     * Delay in hiding controls for the first time when gallery is opened\n     */\n    showBarsAfter: number;\n\n    /**\n     * Delay slide transitions.\n     * @description This is useful if you want to do any action in the current slide before moving to next slide.\n     * <section>\n     * For example, fading out the captions before going to next slide.\n     * <code>.lg-slide-progress</code> class name is added to the current slide immediately after calling the slide method.\n     * But transition begins only after the delay\n     * </section>\n     */\n    slideDelay: number;\n\n    /**\n     * Support legacy browsers\n     * @description Currently this is used only for adding support to srcset attribute via picturefill library\n     * If true lightGallery will show warning message to include picturefill library\n     */\n    supportLegacyBrowser: boolean;\n\n    /**\n     * If true, toolbar, captions and thumbnails will not overlap with media element\n     * This will not effect thumbnails if animateThumb is false\n     * Also, toggle thumbnails button is not displayed if allowMediaOverlap is false\n     * <section>\n     * Note - Changing the position of the media on every slide transition creates a flickering effect.\n     * Therefore, the height of the caption is calculated dynamically, only once based on the first slide caption.\n     * </section>\n     * <section>\n     * if you have dynamic captions for each media,\n     * you can provide an appropriate height for the captions via allowMediaOverlap option\n     * </section>\n     */\n    allowMediaOverlap: boolean;\n\n    /**\n     * Video max size.\n     * @description This can be over-written by passing specific size via data-lg-size attribute\n     * Recommended video resolution and & aspect ratios <a href=\"https://support.google.com/youtube/answer/6375112\">https://support.google.com/youtube/answer/6375112</a>\n     */\n    videoMaxSize: string;\n\n    /**\n     * Automatically load poster image for YouTube videos\n     */\n    loadYouTubePoster: boolean;\n\n    /**\n     * Height of the caption for calculating allowMediaOverlap positions\n     * Note - this is only used to find the position of media item if allowMediaOverlap is true.\n     * Not for setting height of the captions\n     * Set 0 if you want to calculate the height of captions dynamically\n     */\n    defaultCaptionHeight: number;\n\n    /**\n     * aria-labelledby attribute fot gallery\n     */\n    ariaLabelledby: string;\n\n    /**\n     * aria-describedby attribute for gallery\n     */\n    ariaDescribedby: string;\n\n    /**\n     * Hide scrollbar when gallery is opened\n     * @version V2.5.0\n     */\n    hideScrollbar: boolean;\n\n    /**\n     * Reset to previous scrollPosition when lightGallery is closed\n     * @description By default, lightGallery doesn't hide the scrollbar for a smooth opening transition.\n     * If a user changes the scroll position, lightGallery resets it to the previous value\n     * @version V2.5.0\n     */\n    resetScrollPosition: boolean;\n\n    /**\n     * If false user won't be abel to close the gallery at all\n     * This is useful for creating inline galleries.\n     */\n    closable: boolean;\n\n    /**\n     * allows vertical drag/swipe to close gallery\n     * <code>false</code> if option <code>closable</code> is <code>false</code>\n     */\n    swipeToClose: boolean;\n    /**\n     * allows clicks on black area to close gallery.\n     */\n    closeOnTap: boolean;\n\n    /**\n     * If false, close button won't be displayed.\n     * Useful for creating inline galleries.\n     */\n    showCloseIcon: boolean;\n\n    /**\n     * Show maximize icon.\n     * Useful for creating inline galleries.\n     */\n    showMaximizeIcon: boolean;\n\n    /**\n     * If false, will disable the ability to loop back to the beginning of the gallery from the last slide.\n     */\n    loop: boolean;\n\n    /**\n     * Whether the LightGallery could be closed by pressing the \"Esc\" key.\n     */\n    escKey: boolean;\n\n    /**\n     * Enable keyboard navigation\n     */\n    keyPress: boolean;\n\n    /**\n     * Trap focus within the lightGallery\n     * @version V2.5.0\n     */\n    trapFocus: boolean;\n\n    /**\n     * If false, prev/next buttons will not be displayed.\n     */\n    controls: boolean;\n\n    /**\n     * Enable slideEnd animation\n     */\n    slideEndAnimation: boolean;\n\n    /**\n     * If true, prev/next button will be hidden on first/last image.\n     * @description Note - this option will be ignored if <code>loop</code> or <code>slideEndAnimation</code> is set to true\n     */\n    hideControlOnEnd: boolean;\n\n    /**\n     * ability to navigate to next/prev slides on mousewheel\n     */\n    mousewheel: boolean;\n\n    /**\n     * Option to get captions from alt or title tags.\n     */\n    getCaptionFromTitleOrAlt: boolean;\n\n    /**\n     * control where the sub-html should be appended.\n     * If you choose '.lg-outer', you are responsible for placing the div at the right position.\n     * '.lg-outer' is useful if you want show custom HTML outside the normal gallery\n     */\n    appendSubHtmlTo: '.lg-sub-html' | '.lg-item' | '.lg-outer';\n\n    /**\n     * Set to true if the selector in \"data-sub-html\" should use the current item as its origin.\n     */\n    subHtmlSelectorRelative: boolean;\n\n    /**\n     * number of preload slides\n     * @description will exicute only after the current slide is fully loaded.\n     * for example, if you click on 4th image and if preload = 1 then 3rd slide and 5th\n     * slide will be loaded in the background after the 4th slide is fully loaded..\n     * if preload is 2 then 2nd 3rd 5th 6th slides will be preloaded.\n     */\n    preload: number;\n\n    /**\n     * Control how many slide items should be kept in dom at a time\n     * @description To improve performance by reducing number of gallery items in the dom,\n     * lightGallery keeps only the lowest possible number of slides in the dom at a time.\n     * This has a minimum value of 3\n     */\n    numberOfSlideItemsInDom: number;\n\n    /**\n     * Custom selector property instead of direct children.\n     * @description Based on your markup structure, you can specify custom selectors to fetch media data for the gallery\n     * Pass \"this\" to select same element\n     * You can also pass HTMLCollection directly\n     * Example - '.my-selector' | '#my-selector' | this | document.querySelectorAll('.my-selector')\n     */\n    selector: string | HTMLCollection[];\n\n    /**\n     * By default selector element relative to the current gallery.\n     * Instead of that you can tell lightGallery to select element relative to another element.\n     * Example - '.my-selector-container' | '#my-selector-container'\n     * In the code this become selector =  document.querySelector(this.s.selectWithin ).querySelectorAll(this.s.selector);\n     */\n    selectWithin: string;\n\n    /**\n     * Custom html for next control\n     */\n    nextHtml: string;\n\n    /**\n     * Custom html for prev control\n     */\n    prevHtml: string;\n\n    /**\n     * specify which slide should load initially\n     */\n    index: number;\n\n    /**\n     * Set width for iframe.\n     */\n    iframeWidth: string;\n\n    /**\n     * Set height for iframe.\n     */\n    iframeHeight: string;\n\n    /**\n     * Set max width for iframe.\n     */\n    iframeMaxWidth: string;\n\n    /**\n     * Set max height for iframe.\n     */\n    iframeMaxHeight: string;\n\n    /**\n     * Enable download button.\n     * @description By default download url will be taken from data-src/href attribute but it supports only for modern browsers.\n     * If you want you can provide another url for download via data-download-url.\n     * pass false in data-download-url if you want to hide download button for the particular slide.\n     */\n    download: boolean;\n\n    /**\n     * Whether to show total number of images and index number of currently displayed image.\n     */\n    counter: boolean;\n\n    /**\n     * Where the counter should be appended\n     */\n    appendCounterTo: string;\n\n    /**\n     * By setting the swipeThreshold (in px) you can set how far the user must swipe for the next/prev image.\n     */\n    swipeThreshold: number;\n\n    /**\n     * Enables swipe support for touch devices\n     */\n    enableSwipe: boolean;\n\n    /**\n     * Enables desktop mouse drag support\n     */\n    enableDrag: boolean;\n\n    /**\n     * LightGallery can be instantiated and launched programmatically by setting this option to true and populating dynamicEl option (see below) with the definitions of images.\n     */\n    dynamic: boolean;\n\n    /**\n     * An array of objects (src, iframe, subHtml, thumb, poster, responsive, srcset sizes) representing gallery elements.\n     */\n    dynamicEl: GalleryItem[];\n\n    /**\n     * Fetch custom properties from the selector\n     * @description this is useful for plugin development\n     * By default lightGallery fetches and store all the props selectors to\n     * reduce frequent dom interaction for fetching props every time.\n     *\n     * If you need any addition data to be fetched and stored in the galleryItems variable,\n     * you can do this just by passing the prop names via extraProps\n     * @example\n     * HTML:\n     * <div id=\"lightGallery\">\n     *     <a href=\"a.jpg\" data-custom-prop=\"abc\"><img src=\"thumb.jpg\" /></a>\n     *     <a href=\"a.jpg\" data-custom-prop=\"xyz\"><img src=\"thumb.jpg\" /></a>\n     * </div>\n     * JS:\n     * lightGallery(document.getElementById('lightGallery'), {\n     *     extraProps: ['customProp']\n     * })\n     * // Note - If you are using dynamic mode, you can pass any custom prop in the galleryItem\n     * lightGallery(document.getElementById('lightGallery'), {\n     *     dynamic: true,\n     *     dynamicEl: [{\n     *         src: 'img/img1.jpg',\n     *         customProp:'abc',\n     *     }]\n     * })\n     *\n     */\n    extraProps: string[];\n\n    /**\n     * Option to fetch different thumbnail image other than first image\n     * @description If you want to use external image for thumbnail,\n     * add the path of that image inside \"data-\" attribute\n     * and set value of this option to the name of your custom attribute.\n     *\n     * @example\n     * <div id=\"lightGallery\">\n     *     <a href=\"a.jpg\" data-external-thumb-image=\"images/externalThumb.jpg\" ><img src=\"thumb.jpg\" /></a>\n     * </div>\n     *\n     * lightGallery(document.getElementById('lightGallery'), {\n     *     exThumbImage: 'data-external-thumb-image'\n     * })\n     */\n    exThumbImage: string;\n\n    /**\n     * Function to detect mobile devices\n     */\n    isMobile?: () => boolean;\n\n    /**\n     * Separate settings for mobile devices\n     * @description Note - this is applied only at the time of loading\n     * by default controls and close buttons are disabled on mobile devices.\n     * use this options if you want to enable them or change any other settings for mobile devices\n     * Note - mobileSettings does not merge default values, You need to provide all mobileSettings including default values\n     */\n    mobileSettings: Partial<MobileSettings>;\n\n    /**\n     * Aria label strings for lightGallery core modules.\n     * @description This can be useful if you want to localize the lightGallery strings to other languages.\n     * Use your own service to translate the strings and pass it via settings.strings\n     * You can find dedicated strings option for all lightGallery modules in their respective documentation.\n     */\n    strings: LightGalleryCoreStrings;\n\n    plugins: (new (instance: LightGallery, $LG: LgQuery) => any)[];\n}\n\nexport const lightGalleryCoreSettings: LightGalleryCoreSettings = {\n    mode: 'lg-slide',\n    easing: 'ease',\n    speed: 400,\n    licenseKey: '0000-0000-000-0000',\n    height: '100%',\n    width: '100%',\n    addClass: '',\n    startClass: 'lg-start-zoom',\n    backdropDuration: 300,\n    container: '',\n    startAnimationDuration: 400,\n    zoomFromOrigin: true,\n    hideBarsDelay: 0,\n    showBarsAfter: 10000,\n    slideDelay: 0,\n    supportLegacyBrowser: true,\n    allowMediaOverlap: false,\n    videoMaxSize: '1280-720',\n    loadYouTubePoster: true,\n    defaultCaptionHeight: 0,\n    ariaLabelledby: '',\n    ariaDescribedby: '',\n    resetScrollPosition: true,\n    hideScrollbar: false,\n    closable: true,\n    swipeToClose: true,\n    closeOnTap: true,\n    showCloseIcon: true,\n    showMaximizeIcon: false,\n    loop: true,\n    escKey: true,\n    keyPress: true,\n    trapFocus: true,\n    controls: true,\n    slideEndAnimation: true,\n    hideControlOnEnd: false,\n    mousewheel: false,\n    getCaptionFromTitleOrAlt: true,\n    appendSubHtmlTo: '.lg-sub-html',\n    subHtmlSelectorRelative: false,\n    preload: 2,\n    numberOfSlideItemsInDom: 10,\n    selector: '',\n    selectWithin: '',\n    nextHtml: '',\n    prevHtml: '',\n    index: 0,\n    iframeWidth: '100%',\n    iframeHeight: '100%',\n    iframeMaxWidth: '100%',\n    iframeMaxHeight: '100%',\n    download: true,\n    counter: true,\n    appendCounterTo: '.lg-toolbar',\n    swipeThreshold: 50,\n    enableSwipe: true,\n    enableDrag: true,\n    dynamic: false,\n    dynamicEl: [],\n    extraProps: [],\n    exThumbImage: '',\n    isMobile: undefined,\n    mobileSettings: {\n        controls: false,\n        showCloseIcon: false,\n        download: false,\n    } as MobileSettings,\n    plugins: [],\n    strings: {\n        closeGallery: 'Close gallery',\n        toggleMaximize: 'Toggle maximize',\n        previousSlide: 'Previous slide',\n        nextSlide: 'Next slide',\n        download: 'Download',\n        playVideo: 'Play video',\n    } as LightGalleryCoreStrings,\n};\n","interface Offset {\n    left: number;\n    top: number;\n}\n\nfunction initLgPolyfills() {\n    (function () {\n        if (typeof window.CustomEvent === 'function') return false;\n\n        function CustomEvent(event: string, params: any) {\n            params = params || {\n                bubbles: false,\n                cancelable: false,\n                detail: null,\n            };\n            const evt = document.createEvent('CustomEvent');\n            evt.initCustomEvent(\n                event,\n                params.bubbles,\n                params.cancelable,\n                params.detail,\n            );\n            return evt;\n        }\n\n        window.CustomEvent = CustomEvent as any;\n    })();\n    (function () {\n        if (!Element.prototype.matches) {\n            Element.prototype.matches =\n                (Element.prototype as any).msMatchesSelector ||\n                Element.prototype.webkitMatchesSelector;\n        }\n    })();\n}\n\nexport type LgQuery = (selector: any) => lgQuery;\nexport class lgQuery {\n    static eventListeners: { [key: string]: any[] } = {};\n    static generateUUID(): string {\n        return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(\n            /[xy]/g,\n            function (c) {\n                const r = (Math.random() * 16) | 0,\n                    v = c == 'x' ? r : (r & 0x3) | 0x8;\n                return v.toString(16);\n            },\n        );\n    }\n\n    private selector: any;\n    private firstElement: any;\n    private cssVenderPrefixes: string[] = [\n        'TransitionDuration',\n        'TransitionTimingFunction',\n        'Transform',\n        'Transition',\n    ];\n    constructor(selector: string | Element) {\n        this.selector = this._getSelector(selector);\n        this.firstElement = this._getFirstEl();\n        return this;\n    }\n\n    private _getSelector(\n        selector: string | Element,\n        context: Element | Document = document,\n    ): Element | null | NodeListOf<Element> {\n        if (typeof selector !== 'string') {\n            return selector;\n        }\n        context = context || document;\n        const fl = selector.substring(0, 1);\n        if (fl === '#') {\n            return context.querySelector(selector);\n        } else {\n            return context.querySelectorAll(selector);\n        }\n    }\n\n    private _each(\n        func: (\n            elements: Element | NodeListOf<Element> | null,\n            index: number,\n        ) => void,\n    ): this {\n        if (!this.selector) {\n            return this;\n        }\n        if (this.selector.length !== undefined) {\n            [].forEach.call(this.selector, func);\n        } else {\n            func(this.selector, 0);\n        }\n        return this;\n    }\n\n    private _setCssVendorPrefix(\n        el: any,\n        cssProperty: string,\n        value?: string | number,\n    ): void {\n        // prettier-ignore\n        const property = cssProperty.replace(/-([a-z])/gi, function (\n            s,\n            group1,\n        ) {\n            return group1.toUpperCase();\n        });\n        if (this.cssVenderPrefixes.indexOf(property) !== -1) {\n            el.style[\n                property.charAt(0).toLowerCase() + property.slice(1)\n            ] = value;\n            el.style['webkit' + property] = value;\n            el.style['moz' + property] = value;\n            el.style['ms' + property] = value;\n            el.style['o' + property] = value;\n        } else {\n            el.style[property] = value;\n        }\n    }\n\n    private _getFirstEl() {\n        if (this.selector && this.selector.length !== undefined) {\n            return this.selector[0];\n        } else {\n            return this.selector;\n        }\n    }\n\n    private isEventMatched(event: string, eventName: string): boolean {\n        const eventNamespace = eventName.split('.');\n        return event\n            .split('.')\n            .filter((e) => e)\n            .every((e) => {\n                return eventNamespace.indexOf(e) !== -1;\n            });\n    }\n\n    attr(attr: string): string;\n    attr(attr: string, value: string | number | boolean): this;\n    attr(attr: string, value?: string | number | boolean): string | this {\n        if (value === undefined) {\n            if (!this.firstElement) {\n                return '';\n            }\n            return this.firstElement.getAttribute(attr);\n        }\n        this._each((el: any) => {\n            el.setAttribute(attr, value);\n        });\n        return this;\n    }\n\n    find(selector: any): lgQuery {\n        return $LG(this._getSelector(selector, this.selector));\n    }\n\n    first(): lgQuery {\n        if (this.selector && this.selector.length !== undefined) {\n            return $LG(this.selector[0]);\n        } else {\n            return $LG(this.selector);\n        }\n    }\n\n    eq(index: number): lgQuery {\n        return $LG(this.selector[index]);\n    }\n\n    parent(): lgQuery {\n        return $LG(this.selector.parentElement);\n    }\n\n    get(): HTMLElement {\n        return this._getFirstEl();\n    }\n\n    removeAttr(attributes: string): this {\n        const attrs = attributes.split(' ');\n        this._each((el: any) => {\n            attrs.forEach((attr: string) => el.removeAttribute(attr));\n        });\n        return this;\n    }\n\n    wrap(className: string): this {\n        if (!this.firstElement) {\n            return this;\n        }\n        const wrapper = document.createElement('div');\n        wrapper.className = className;\n        this.firstElement.parentNode.insertBefore(wrapper, this.firstElement);\n        this.firstElement.parentNode.removeChild(this.firstElement);\n        wrapper.appendChild(this.firstElement);\n        return this;\n    }\n\n    addClass(classNames = ''): this {\n        this._each((el: any) => {\n            // IE doesn't support multiple arguments\n            classNames.split(' ').forEach((className) => {\n                if (className) {\n                    el.classList.add(className);\n                }\n            });\n        });\n        return this;\n    }\n\n    removeClass(classNames: string): this {\n        this._each((el: any) => {\n            // IE doesn't support multiple arguments\n            classNames.split(' ').forEach((className) => {\n                if (className) {\n                    el.classList.remove(className);\n                }\n            });\n        });\n        return this;\n    }\n\n    hasClass(className: string): boolean {\n        if (!this.firstElement) {\n            return false;\n        }\n        return this.firstElement.classList.contains(className);\n    }\n    hasAttribute(attribute: string): boolean {\n        if (!this.firstElement) {\n            return false;\n        }\n        return this.firstElement.hasAttribute(attribute);\n    }\n    toggleClass(className: string): this {\n        if (!this.firstElement) {\n            return this;\n        }\n        if (this.hasClass(className)) {\n            this.removeClass(className);\n        } else {\n            this.addClass(className);\n        }\n        return this;\n    }\n\n    css(property: string, value?: string | number): this {\n        this._each((el: any) => {\n            this._setCssVendorPrefix(el, property, value);\n        });\n        return this;\n    }\n    // Need to pass separate namespaces for separate elements\n    on(events: string, listener: (e: any) => void): this {\n        if (!this.selector) {\n            return this;\n        }\n        events.split(' ').forEach((event: string) => {\n            if (!Array.isArray(lgQuery.eventListeners[event])) {\n                lgQuery.eventListeners[event] = [];\n            }\n            lgQuery.eventListeners[event].push(listener);\n            this.selector.addEventListener(event.split('.')[0], listener);\n        });\n\n        return this;\n    }\n    // @todo - test this\n    once(event: string, listener: (e: any) => void): this {\n        this.on(event, () => {\n            this.off(event);\n            listener(event);\n        });\n        return this;\n    }\n    off(event: string): this {\n        if (!this.selector) {\n            return this;\n        }\n        Object.keys(lgQuery.eventListeners).forEach((eventName) => {\n            if (this.isEventMatched(event, eventName)) {\n                lgQuery.eventListeners[eventName].forEach((listener) => {\n                    this.selector.removeEventListener(\n                        eventName.split('.')[0],\n                        listener,\n                    );\n                });\n                lgQuery.eventListeners[eventName] = [];\n            }\n        });\n\n        return this;\n    }\n    trigger<Detail>(event: string, detail?: Detail): this {\n        if (!this.firstElement) {\n            return this;\n        }\n\n        const customEvent = new CustomEvent(event.split('.')[0], {\n            detail: detail || null,\n        });\n        this.firstElement.dispatchEvent(customEvent);\n        return this;\n    }\n\n    // Does not support IE\n    load(url: string): this {\n        fetch(url)\n            .then((res) => res.text())\n            .then((html) => {\n                this.selector.innerHTML = html;\n            });\n        return this;\n    }\n\n    html(): string;\n    html(html: string): this;\n    html(html?: string): string | this {\n        if (html === undefined) {\n            if (!this.firstElement) {\n                return '';\n            }\n            return this.firstElement.innerHTML;\n        }\n        this._each((el: any) => {\n            el.innerHTML = html;\n        });\n        return this;\n    }\n    append(html: string | HTMLElement): this {\n        this._each((el: any) => {\n            if (typeof html === 'string') {\n                el.insertAdjacentHTML('beforeend', html);\n            } else {\n                el.appendChild(html);\n            }\n        });\n        return this;\n    }\n    prepend(html: string): this {\n        this._each((el: any) => {\n            el.insertAdjacentHTML('afterbegin', html);\n        });\n        return this;\n    }\n    remove(): this {\n        this._each((el: any) => {\n            el.parentNode.removeChild(el);\n        });\n        return this;\n    }\n    empty(): this {\n        this._each((el: any) => {\n            el.innerHTML = '';\n        });\n        return this;\n    }\n    // Supports only window\n    scrollTop(): number;\n    scrollTop(scrollTop: number): this;\n    scrollTop(scrollTop?: number): number | this {\n        if (scrollTop !== undefined) {\n            document.body.scrollTop = scrollTop;\n            document.documentElement.scrollTop = scrollTop;\n            return this;\n        } else {\n            return (\n                window.pageYOffset ||\n                document.documentElement.scrollTop ||\n                document.body.scrollTop ||\n                0\n            );\n        }\n    }\n    // Supports only window\n    scrollLeft(): number;\n    scrollLeft(scrollLeft?: number): this;\n    scrollLeft(scrollLeft?: number): number | this {\n        if (scrollLeft !== undefined) {\n            document.body.scrollLeft = scrollLeft;\n            document.documentElement.scrollLeft = scrollLeft;\n            return this;\n        } else {\n            return (\n                window.pageXOffset ||\n                document.documentElement.scrollLeft ||\n                document.body.scrollLeft ||\n                0\n            );\n        }\n    }\n    offset(): Offset {\n        if (!this.firstElement) {\n            return {\n                left: 0,\n                top: 0,\n            };\n        }\n        const rect = this.firstElement.getBoundingClientRect();\n        const bodyMarginLeft = $LG('body').style().marginLeft;\n\n        // Minus body margin - https://stackoverflow.com/questions/30711548/is-getboundingclientrect-left-returning-a-wrong-value\n        return {\n            left: rect.left - parseFloat(bodyMarginLeft) + this.scrollLeft(),\n            top: rect.top + this.scrollTop(),\n        };\n    }\n    style(): CSSStyleDeclaration {\n        if (!this.firstElement) {\n            return {} as CSSStyleDeclaration;\n        }\n        return (\n            this.firstElement.currentStyle ||\n            window.getComputedStyle(this.firstElement)\n        );\n    }\n    // Width without padding and border even if box-sizing is used.\n    width(): number {\n        const style = this.style();\n        return (\n            this.firstElement.clientWidth -\n            parseFloat(style.paddingLeft) -\n            parseFloat(style.paddingRight)\n        );\n    }\n    // Height without padding and border even if box-sizing is used.\n    height(): number {\n        const style = this.style();\n        return (\n            this.firstElement.clientHeight -\n            parseFloat(style.paddingTop) -\n            parseFloat(style.paddingBottom)\n        );\n    }\n}\n\nexport function $LG(selector: any): lgQuery {\n    initLgPolyfills();\n    return new lgQuery(selector);\n}\n","import { $LG, lgQuery } from './lgQuery';\nimport { VideoSource } from './plugins/video/types';\nimport { VideoInfo } from './types';\n\nexport interface ImageSize {\n    width: number;\n    height: number;\n}\n\nexport interface ImageSources {\n    media?: string;\n    srcset: string;\n    sizes?: string;\n    type?: string;\n}\n\nexport interface GalleryItem {\n    /**\n     * url of the media\n     * @data-attr data-src\n     */\n    src?: string;\n\n    /**\n     * Source attributes for the <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source#attributes\">picture</a> element\n     * @data-attr data-sources\n     */\n    sources?: ImageSources[];\n\n    /**\n     * Thumbnail url\n     * @description By default lightGallery uses the image inside gallery selector as thumbnail.\n     * But, If you want to use external image for thumbnail,\n     * pass the thumbnail url via any data attribute and\n     * pass the attribute name via exThumbImage option\n     * @example\n     * <div id=\"lightGallery\">\n     *     <a href=\"a.jpg\" data-external-thumb-image=\"images/externalThumb.jpg\" ><img src=\"thumb.jpg\" /></a>\n     * </div>\n     *\n     * lightGallery(document.getElementById('lightGallery'), {\n     *     exThumbImage: 'data-external-thumb-image'\n     * })\n     * @data-attr data-*\n     */\n    thumb?: string;\n\n    /**\n     * alt attribute for the image\n     * @data-attr alt\n     */\n    alt?: string;\n\n    /**\n     * Title attribute for the video\n     * @data-attr title\n     */\n    title?: string;\n\n    /**\n     * Title for iframe\n     * @data-attr data-iframe-title\n     */\n    iframeTitle?: string;\n\n    /**\n     * Caption for the slide\n     * @description You can either pass the HTML markup or the ID or class name of the element which contains the captions\n     * @data-attr data-sub-html\n     */\n    subHtml?: string;\n\n    /**\n     * url of the file which contain the sub html.\n     * @description Note - Does not support Internet Explorer browser\n     * @data-attr data-sub-html-url\n     */\n    subHtmlUrl?: string;\n\n    /**\n     * Video source\n     * @data-attr data-video\n     */\n    video?: VideoSource;\n\n    /**\n     * Poster url\n     * @data-attr data-poster\n     */\n    poster?: string;\n\n    /**\n     * Custom slide name to use in the url when hash plugin is enabled\n     * @data-attr data-slide-name\n     */\n    slideName?: string;\n\n    /**\n     * List of images and viewport's max width separated by comma.\n     * @description Ex?: img/1-375.jpg 375, img/1-480.jpg 480, img/1-757.jpg 757.\n     * @data-attr data-responsive\n     */\n    responsive?: string;\n\n    /**\n     * srcset attribute values for the main image\n     * @data-attr data-srcset\n     */\n    srcset?: string;\n\n    /**\n     * srcset sizes attribute for the main image\n     * @data-attr data-sizes\n     */\n    sizes?: string;\n\n    /**\n     * Set true is you want to open your url in an iframe\n     * @data-attr data-iframe\n     */\n    iframe?: boolean;\n\n    /**\n     * Download url for your image/video.\n     * @description Pass false if you want to disable the download button.\n     * @data-attr data-download-url\n     */\n    downloadUrl?: string | boolean;\n\n    /**\n     * Name of the file after it is downloaded.\n     * @description The HTML value of the download attribute.\n     * There are no restrictions on allowed values, and the browser will automatically\n     * detect the correct file extension and add it to the file (.img, .pdf, .txt, .html, etc.).\n     * <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-download\">More info</a>\n     * @data-attr data-download\n     */\n    download?: string | boolean;\n\n    /**\n     * Actual size of the image in px.\n     * @description This is used in zoom plugin to see the actual size of the image when double taped on the image.\n     * @data-attr data-width\n     */\n    width?: string;\n\n    /**\n     * Facebook share URL.\n     * @description Specify only if you want to provide separate share URL for the specific slide. By default, current browser URL is taken.\n     * @data-attr data-facebook-share-url\n     */\n    facebookShareUrl?: string;\n\n    /**\n     * Tweet text\n     * @data-attr data-tweet-text\n     */\n    tweetText?: string;\n\n    /**\n     * Twitter share URL.\n     * @description Specify only if you want to provide separate share URL for the specific slide. By default, current browser URL will be taken.\n     * @data-attr data-twitter-share-url\n     */\n    twitterShareUrl?: string;\n\n    /**\n     * Pinterest share URL.\n     * @description Specify only if you want to provide separate share URL for the specific slide. By default, current browser URL will be taken.\n     * Note?: Pinterest requires absolute URL\n     * @data-attr data-pinterest-share-url\n     */\n    pinterestShareUrl?: string;\n\n    /**\n     * Description for Pinterest post.\n     * @data-attr data-pinterest-text\n     */\n    pinterestText?: string;\n\n    /**\n     * Facebook comments body html\n     * @description Please refer <a href=\"https://developers.facebook.com/docs/plugins/comments/#comments-plugin\">facebook official documentation</a> for generating the HTML markup\n     * @example\n     * <div\n     *      class=\"fb-comments\"\n     *      data-href=\"https://www.lightgalleryjs.com/demos/comment-box/#facebook-comments-demo\"\n     *      data-width=\"400\"\n     *      data-numposts=\"5\">\n     * </div>\n     * @data-attr data-fb-html\n     */\n    fbHtml?: string;\n\n    /**\n     * Disqus page identifier\n     * @description Please refer official <a href=\"https://help.disqus.com/en/articles/1717084-javascript-configuration-variables\">disqus documentation</a> for more info\n     * @data-attr data-disqus-identifier\n     */\n    disqusIdentifier?: string;\n\n    /**\n     * Disqus page url\n     * @description Please refer official <a href=\"https://help.disqus.com/en/articles/1717084-javascript-configuration-variables\">disqus documentation</a> for more info\n     * @data-attr data-disqus-url\n     */\n    disqusUrl?: string;\n\n    __slideVideoInfo?: VideoInfo;\n    [key: string]: any;\n}\n\nconst defaultDynamicOptions = [\n    'src',\n    'sources',\n    'subHtml',\n    'subHtmlUrl',\n    'html',\n    'video',\n    'poster',\n    'slideName',\n    'responsive',\n    'srcset',\n    'sizes',\n    'iframe',\n    'downloadUrl',\n    'download',\n    'width',\n    'facebookShareUrl',\n    'tweetText',\n    'iframeTitle',\n    'twitterShareUrl',\n    'pinterestShareUrl',\n    'pinterestText',\n    'fbHtml',\n    'disqusIdentifier',\n    'disqusUrl',\n];\n\n// Convert html data-attribute to camalcase\nexport function convertToData(attr: string): string {\n    // FInd a way for lgsize\n    if (attr === 'href') {\n        return 'src';\n    }\n    attr = attr.replace('data-', '');\n    attr = attr.charAt(0).toLowerCase() + attr.slice(1);\n    attr = attr.replace(/-([a-z])/g, (g) => g[1].toUpperCase());\n\n    return attr;\n}\n\nconst utils = {\n    /**\n     * get possible width and height from the lgSize attribute. Used for ZoomFromOrigin option\n     */\n    getSize(\n        el: HTMLElement,\n        container: lgQuery,\n        spacing = 0,\n        defaultLgSize?: string,\n    ): ImageSize | undefined {\n        const LGel = $LG(el);\n        let lgSize = LGel.attr('data-lg-size') || defaultLgSize;\n\n        if (!lgSize) {\n            return;\n        }\n\n        const isResponsiveSizes = lgSize.split(',');\n        // if at-least two viewport sizes are available\n        if (isResponsiveSizes[1]) {\n            const wWidth = window.innerWidth;\n            for (let i = 0; i < isResponsiveSizes.length; i++) {\n                const size = isResponsiveSiz