lightgallery 2.9.0 → 3.0.0-beta.2

package/{scss → dist/scss}/transitions/_lg-zoom-out.scss

@@ -3,6 +3,12 @@
 .lg-css3 {
     &.lg-zoom-out {
         .lg-item {
+            // The crossfade IS the effect here, so it runs for the
+            // whole slide instead of the short default swap. Declared on
+            // the item: --lg-speed is published on .lg-inner, so only its
+            // descendants can resolve it.
+            --lg-opacity-speed: var(--lg-speed, 400ms);
+
             opacity: 0;
 
             &.lg-prev-slide {

package/{index.d.ts → dist/types/index.d.ts}

@@ -1,4 +1,8 @@
-import { LightGallerySettings } from './lg-settings';
-import { LightGallery } from './lightgallery';
-declare function lightGallery(el: HTMLElement, options?: LightGallerySettings): LightGallery;
-export default lightGallery;
+import { LightGallerySettings } from './lg-settings';
+import { LightGallery } from './lightgallery';
+declare function lightGallery(el: HTMLElement, options?: LightGallerySettings): LightGallery;
+declare namespace lightGallery {
+    var setLicenseKey: typeof import("@lightgallery/headless").setLicenseKey;
+}
+export default lightGallery;
+export type { LgIconName, LgIcons } from './lg-icons';

package/{lg-events.d.ts → dist/types/lg-events.d.ts}

@@ -1,300 +1,300 @@
-import { LightGallery } from './lightgallery';
-import { VideoSource } from './plugins/video/types';
-/**
- * List of lightGallery events
- * All events should be documented here
- * Below interfaces are used to build the website documentations
- * */
-export declare const lGEvents: {
-    [key: string]: string;
-};
-/**
- * Fired only once when lightGallery is initialized
- * @name lgInit
- * @method onInit
- * @example
- *   const lg = document.getElementById('custom-events-demo');
- *   // Perform any action on lightGallery initialization.
- *   // Init event returns the plugin instance that can be used to call any lightGalley public method
- *   let pluginInstance = null;
- *   lg.addEventListener('lgInit', (event) => {
- *      pluginInstance = event.detail.instance;
- *   });
- *   lightGallery(lg);
- * @see <a href="/docs/methods">Methods<a>
- */
-export interface InitDetail {
-    /**
-     * lightGallery plugin instance
-     */
-    instance: LightGallery;
-}
-/**
- * Fired when the slide content has been inserted into it's slide container.
- * @name lgAfterAppendSlide
- * @method onAfterAppendSlide
- */
-export interface AfterAppendSlideEventDetail {
-    /**
-     * Index of the slide
-     */
-    index: number;
-}
-/**
- * Fired immediately before opening the gallery
- * @name lgBeforeOpen
- * @method onBeforeOpen
- */
-export interface BeforeOpenDetail {
-}
-/**
- * Fired immediately after opening the gallery
- * @name lgAfterOpen
- * @method onAfterOpen
- */
-export interface AfterOpenDetail {
-}
-/**
- * Fired once the media inside the slide has been completely loaded .
- * @name lgSlideItemLoad
- * @method onSlideItemLoad
- */
-export interface SlideItemLoadDetail {
-    /**
-     * Index of the slide
-     */
-    index: number;
-    /**
-     * For the first slide, lightGallery adds some delay for displaying the loaded slide item.
-     * This delay is required for the transition effect when the slide item is displayed
-     * Respect the delay when you use this event
-     */
-    delay: number;
-    isFirstSlide: boolean;
-}
-/**
- * Fired immediately before each slide transition.
- * @name lgBeforeSlide
- * @method onBeforeSlide
- * @example
- *   const lg = document.getElementById('custom-events-demo');
- *   // Perform any action before each slide transition
- *   lg.addEventListener('lgBeforeSlide', (event) => {
- *       const { index, prevIndex } = event.detail;
- *       alert(index, prevIndex);
- *   });
- *   lightGallery(lg);
- */
-export interface BeforeSlideDetail {
-    /**
-     * Index of the previous slide
-     */
-    prevIndex: number;
-    /**
-     * Index of the slide
-     */
-    index: number;
-    /**
-     * true if slide function called via touch event or mouse drag
-     */
-    fromTouch: boolean;
-    /**
-     * true if slide function called via thumbnail click
-     */
-    fromThumb: boolean;
-}
-/**
- * Fired immediately after each slide transition.
- * @name lgAfterSlide
- * @method onAfterSlide
- */
-export interface AfterSlideDetail {
-    /**
-     * Index of the previous slide
-     */
-    prevIndex: number;
-    /**
-     * Index of the slide
-     */
-    index: number;
-    /**
-     * true if slide function called via touch event or mouse drag
-     */
-    fromTouch: boolean;
-    /**
-     * true if slide function called via thumbnail click
-     */
-    fromThumb: boolean;
-}
-/**
- * Fired when the video poster is clicked.
- * @name lgPosterClick
- * @method onPosterClick
- */
-export interface PosterClickDetail {
-}
-/**
- * Fired when the drag event to move to different slide starts.
- * @name lgDragStart
- * @method onDragStart
- */
-export interface DragStartDetail {
-}
-/**
- * Fired periodically during the drag operation.
- * @name lgDragMove
- * @method onDragMove
- */
-export interface DragMoveDetail {
-}
-/**
- * Fired when the user has finished the drag operation
- * @name lgDragEnd
- * @method onDragEnd
- */
-export interface DragEndDetail {
-}
-/**
- * Fired immediately before the start of the close process.
- * @name lgBeforeClose
- * @method onBeforeClose
- */
-export interface BeforeCloseDetail {
-}
-/**
- * Fired immediately once lightGallery is closed.
- * @name lgAfterClose
- * @method onAfterClose
- */
-export interface AfterCloseDetail {
-    /**
-     * lightGallery plugin instance
-     */
-    instance: LightGallery;
-}
-/**
- * Fired immediately before each "next" slide transition
- * @name lgBeforeNextSlide
- * @method onBeforeNextSlide
- */
-export interface BeforeNextSlideDetail {
-    /**
-     * Index of the slide
-     */
-    index: number;
-    /**
-     * true if slide function called via touch event or mouse drag
-     */
-    fromTouch: boolean;
-}
-/**
- * Fired immediately before each "prev" slide transition
- * @name lgBeforePrevSlide
- * @method onBeforePrevSlide
- */
-export interface BeforePrevSlideDetail {
-    /**
-     * Index of the slide
-     */
-    index: number;
-    /**
-     * true if slide function called via touch event or mouse drag
-     */
-    fromTouch: boolean;
-}
-/**
- * Fired when the sub-html content (ex : title/ description) has been appended into the slide.
- * @name lgAfterAppendSubHtml
- * @method onAfterAppendSubHtml
- */
-export interface AfterAppendSubHtmlDetail {
-    /**
-     * Index of the slide
-     */
-    index: number;
-}
-/**
- * Fired when the lightGallery container has been resized.
- * @name lgContainerResize
- * @method onContainerResize
- */
-export interface ContainerResizeDetail {
-    /**
-     * Index of the slide
-     */
-    index: number;
-}
-/**
- * Fired when lightGallery detects video slide
- * @name lgHasVideo
- * @method onHasVideo
- */
-export interface HasVideoDetail {
-    /**
-     * Index of the slide,
-     */
-    index: number;
-    /**
-     * Video source
-     */
-    src: string;
-    /**
-     * HTML5 video source if available
-     * <p>
-       HTML5 video source = source: {
-            src: string;
-            type: string;
-        }[];
-        attributes: HTMLVideoElement;
-     * </p>
-     */
-    html5Video: VideoSource;
-    /**
-     * True if video has poster
-     */
-    hasPoster: boolean;
-}
-/**
- * Fired when the image is rotated in anticlockwise direction
- * @name lgRotateLeft
- * @method onRotateLeft
- */
-export interface RotateLeftDetail {
-    /**
-     * Index of the slide
-     */
-    index: number;
-}
-/**
- * Fired when the image is rotated in clockwise direction
- * @name lgRotateRight
- * @method onRotateRight
- */
-export interface RotateRightDetail {
-    /**
-     * Index of the slide
-     */
-    index: number;
-}
-/**
- * Fired when the image is flipped horizontally
- * @name lgFlipHorizontal
- * @method onFlipHorizontal
- */
-export interface FlipHorizontalDetail {
-    /**
-     * Index of the slide
-     */
-    index: number;
-}
-/**
- * Fired when the image is flipped vertically
- * @name lgFlipVertical
- * @method onFlipVertical
- */
-export interface FlipVerticalDetail {
-    /**
-     * Index of the slide
-     */
-    index: number;
-}
+import { LightGallery } from './lightgallery';
+import { VideoSource } from './plugins/video/types';
+/**
+ * List of lightGallery events
+ * All events should be documented here
+ * Below interfaces are used to build the website documentations
+ * */
+export declare const lGEvents: {
+    [key: string]: string;
+};
+/**
+ * Fired only once when lightGallery is initialized
+ * @name lgInit
+ * @method onInit
+ * @example
+ *   const lg = document.getElementById('custom-events-demo');
+ *   // Perform any action on lightGallery initialization.
+ *   // Init event returns the plugin instance that can be used to call any lightGalley public method
+ *   let pluginInstance = null;
+ *   lg.addEventListener('lgInit', (event) => {
+ *      pluginInstance = event.detail.instance;
+ *   });
+ *   lightGallery(lg);
+ * @see <a href="/docs/methods/">Methods</a>
+ */
+export interface InitDetail {
+    /**
+     * lightGallery plugin instance
+     */
+    instance: LightGallery;
+}
+/**
+ * Fired when the slide content has been inserted into it's slide container.
+ * @name lgAfterAppendSlide
+ * @method onAfterAppendSlide
+ */
+export interface AfterAppendSlideEventDetail {
+    /**
+     * Index of the slide
+     */
+    index: number;
+}
+/**
+ * Fired immediately before opening the gallery
+ * @name lgBeforeOpen
+ * @method onBeforeOpen
+ */
+export interface BeforeOpenDetail {
+}
+/**
+ * Fired immediately after opening the gallery
+ * @name lgAfterOpen
+ * @method onAfterOpen
+ */
+export interface AfterOpenDetail {
+}
+/**
+ * Fired once the media inside the slide has been completely loaded .
+ * @name lgSlideItemLoad
+ * @method onSlideItemLoad
+ */
+export interface SlideItemLoadDetail {
+    /**
+     * Index of the slide
+     */
+    index: number;
+    /**
+     * For the first slide, lightGallery adds some delay for displaying the loaded slide item.
+     * This delay is required for the transition effect when the slide item is displayed
+     * Respect the delay when you use this event
+     */
+    delay: number;
+    isFirstSlide: boolean;
+}
+/**
+ * Fired immediately before each slide transition.
+ * @name lgBeforeSlide
+ * @method onBeforeSlide
+ * @example
+ *   const lg = document.getElementById('custom-events-demo');
+ *   // Perform any action before each slide transition
+ *   lg.addEventListener('lgBeforeSlide', (event) => {
+ *       const { index, prevIndex } = event.detail;
+ *       alert(index, prevIndex);
+ *   });
+ *   lightGallery(lg);
+ */
+export interface BeforeSlideDetail {
+    /**
+     * Index of the previous slide
+     */
+    prevIndex: number;
+    /**
+     * Index of the slide
+     */
+    index: number;
+    /**
+     * true if slide function called via touch event or mouse drag
+     */
+    fromTouch: boolean;
+    /**
+     * true if slide function called via thumbnail click
+     */
+    fromThumb: boolean;
+}
+/**
+ * Fired immediately after each slide transition.
+ * @name lgAfterSlide
+ * @method onAfterSlide
+ */
+export interface AfterSlideDetail {
+    /**
+     * Index of the previous slide
+     */
+    prevIndex: number;
+    /**
+     * Index of the slide
+     */
+    index: number;
+    /**
+     * true if slide function called via touch event or mouse drag
+     */
+    fromTouch: boolean;
+    /**
+     * true if slide function called via thumbnail click
+     */
+    fromThumb: boolean;
+}
+/**
+ * Fired when the video poster is clicked.
+ * @name lgPosterClick
+ * @method onPosterClick
+ */
+export interface PosterClickDetail {
+}
+/**
+ * Fired when the drag event to move to different slide starts.
+ * @name lgDragStart
+ * @method onDragStart
+ */
+export interface DragStartDetail {
+}
+/**
+ * Fired periodically during the drag operation.
+ * @name lgDragMove
+ * @method onDragMove
+ */
+export interface DragMoveDetail {
+}
+/**
+ * Fired when the user has finished the drag operation
+ * @name lgDragEnd
+ * @method onDragEnd
+ */
+export interface DragEndDetail {
+}
+/**
+ * Fired immediately before the start of the close process.
+ * @name lgBeforeClose
+ * @method onBeforeClose
+ */
+export interface BeforeCloseDetail {
+}
+/**
+ * Fired immediately once lightGallery is closed.
+ * @name lgAfterClose
+ * @method onAfterClose
+ */
+export interface AfterCloseDetail {
+    /**
+     * lightGallery plugin instance
+     */
+    instance: LightGallery;
+}
+/**
+ * Fired immediately before each "next" slide transition
+ * @name lgBeforeNextSlide
+ * @method onBeforeNextSlide
+ */
+export interface BeforeNextSlideDetail {
+    /**
+     * Index of the slide
+     */
+    index: number;
+    /**
+     * true if slide function called via touch event or mouse drag
+     */
+    fromTouch: boolean;
+}
+/**
+ * Fired immediately before each "prev" slide transition
+ * @name lgBeforePrevSlide
+ * @method onBeforePrevSlide
+ */
+export interface BeforePrevSlideDetail {
+    /**
+     * Index of the slide
+     */
+    index: number;
+    /**
+     * true if slide function called via touch event or mouse drag
+     */
+    fromTouch: boolean;
+}
+/**
+ * Fired when the sub-html content (ex : title/ description) has been appended into the slide.
+ * @name lgAfterAppendSubHtml
+ * @method onAfterAppendSubHtml
+ */
+export interface AfterAppendSubHtmlDetail {
+    /**
+     * Index of the slide
+     */
+    index: number;
+}
+/**
+ * Fired when the lightGallery container has been resized.
+ * @name lgContainerResize
+ * @method onContainerResize
+ */
+export interface ContainerResizeDetail {
+    /**
+     * Index of the slide
+     */
+    index: number;
+}
+/**
+ * Fired when lightGallery detects video slide
+ * @name lgHasVideo
+ * @method onHasVideo
+ */
+export interface HasVideoDetail {
+    /**
+     * Index of the slide,
+     */
+    index: number;
+    /**
+     * Video source
+     */
+    src: string;
+    /**
+     * HTML5 video source if available
+     * <p>
+       HTML5 video source = source: {
+            src: string;
+            type: string;
+        }[];
+        attributes: HTMLVideoElement;
+     * </p>
+     */
+    html5Video: VideoSource;
+    /**
+     * True if video has poster
+     */
+    hasPoster: boolean;
+}
+/**
+ * Fired when the image is rotated in anticlockwise direction
+ * @name lgRotateLeft
+ * @method onRotateLeft
+ */
+export interface RotateLeftDetail {
+    /**
+     * Index of the slide
+     */
+    index: number;
+}
+/**
+ * Fired when the image is rotated in clockwise direction
+ * @name lgRotateRight
+ * @method onRotateRight
+ */
+export interface RotateRightDetail {
+    /**
+     * Index of the slide
+     */
+    index: number;
+}
+/**
+ * Fired when the image is flipped horizontally
+ * @name lgFlipHorizontal
+ * @method onFlipHorizontal
+ */
+export interface FlipHorizontalDetail {
+    /**
+     * Index of the slide
+     */
+    index: number;
+}
+/**
+ * Fired when the image is flipped vertically
+ * @name lgFlipVertical
+ * @method onFlipVertical
+ */
+export interface FlipVerticalDetail {
+    /**
+     * Index of the slide
+     */
+    index: number;
+}

package/dist/types/lg-icons.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Icon injection: the gallery's icons are inline SVG strings, built-in
+ * defaults (registered by the core and by each plugin, so a plugin's
+ * icons ship in its own bundle) merged under the consumer's
+ * `settings.icons` overrides. One generic pass over the built structure,
+ * every icon button (core and plugins alike) is an empty classed element
+ * by the end of `buildStructure`, so a name→selector table covers them
+ * all without touching the individual templates.
+ *
+ * State-pair buttons (maximize/minimize, autoplay play/pause, fullscreen
+ * enter/exit) render BOTH icons of the pair; state classes (`lg-inline`,
+ * `lg-show-autoplay`, `lg-fullscreen-on`) toggle their visibility in
+ * CSS. A consumer override applies only when it answers every name of a
+ * pair, a half-provided pair keeps the defaults so no state ends up
+ * iconless.
+ */
+import type { LgIconName } from '@lightgallery/headless';
+export type { LgIconName };
+/** SVG markup per icon; omitted names keep the built-in glyph. */
+export type LgIcons = Partial<Record<LgIconName, string>>;
+/**
+ * Inject the gallery's icons into the built structure: per target, the
+ * consumer's overrides apply when they answer every name (pairs must be
+ * complete), else the registered defaults render. Elements keep their
+ * classes and listeners, the icons are prepended children.
+ */
+export declare function applyCustomIcons(container: HTMLElement, defaults: LgIcons, overrides: LgIcons | undefined): void;

package/{lg-plugin.d.ts → dist/types/lg-plugin.d.ts}

@@ -1,7 +1,7 @@
-import { LgQuery } from './lgQuery';
-import { LightGallery } from './lightgallery';
-export declare class LgPlugin {
-    core: LightGallery;
-    $LG: LgQuery;
-    constructor(core: LightGallery, $LG: LgQuery);
-}
+import { LgQuery } from './lgQuery';
+import { LightGallery } from './lightgallery';
+export declare class LgPlugin {
+    core: LightGallery;
+    $LG: LgQuery;
+    constructor(core: LightGallery, $LG: LgQuery);
+}