5.0.28

CHANGELOG.md

@@ -1,3 +1,11 @@
+# 5.0.28 (2023-11-15)
+
+### Features
+
+- **Fancybox** Added additional CSS variables to control transition durations ([523](https://github.com/fancyapps/ui/issues/523))
+- **Carousel** The navigation plugin reuses existing DOM elements
+- Improved TypeScript support
+
 # 5.0.27 (2023-11-09)
 
 ### Bug Fixes

dist/carousel/carousel.autoplay.esm.d.ts

@@ -0,0 +1 @@
+export * from "../../types/Carousel/plugins/Autoplay/Autoplay";

dist/carousel/carousel.thumbs.esm.d.ts

@@ -0,0 +1 @@
+export * from "../../types/Carousel/plugins/Thumbs/Thumbs";

dist/panzoom/panzoom.pins.esm.d.ts

@@ -0,0 +1 @@
+export * from "../../types/Panzoom/plugins/Pins/Pins";

dist/panzoom/panzoom.pins.esm.js

@@ -1 +1 @@
-const t=(e,...s)=>{const n=s.length;for(let r=0;r<n;r++){const n=s[r]||{};Object.entries(n).forEach((([s,n])=>{const r=Array.isArray(n)?[]:{};var i;e[s]||Object.assign(e,{[s]:r}),"object"==typeof(i=n)&&null!==i&&i.constructor===Object&&"[object Object]"===Object.prototype.toString.call(i)?Object.assign(e[s],t(r,n)):Array.isArray(n)?Object.assign(e,{[s]:[...n]}):Object.assign(e,{[s]:n})}))}return e},e=function(t,e){return t.split(".").reduce(((t,e)=>"object"==typeof t?t[e]:void 0),e)};class s{constructor(t={}){Object.defineProperty(this,"options",{enumerable:!0,configurable:!0,writable:!0,value:t}),Object.defineProperty(this,"events",{enumerable:!0,configurable:!0,writable:!0,value:new Map}),this.setOptions(t);for(const t of Object.getOwnPropertyNames(Object.getPrototypeOf(this)))t.startsWith("on")&&"function"==typeof this[t]&&(this[t]=this[t].bind(this))}setOptions(e){this.options=e?t({},this.constructor.defaults,e):{};for(const[t,e]of Object.entries(this.option("on")||{}))this.on(t,e)}option(t,...s){let n=e(t,this.options);return n&&"function"==typeof n&&(n=n.call(this,this,...s)),n}optionFor(t,s,n,...r){let i=e(s,t);var o;"string"!=typeof(o=i)||isNaN(o)||isNaN(parseFloat(o))||(i=parseFloat(i)),"true"===i&&(i=!0),"false"===i&&(i=!1),i&&"function"==typeof i&&(i=i.call(this,this,t,...r));let a=e(s,this.options);return a&&"function"==typeof a?i=a.call(this,this,t,...r,i):void 0===i&&(i=a),void 0===i?n:i}cn(t){const e=this.options.classes;return e&&e[t]||""}localize(t,e=[]){t=String(t).replace(/\{\{(\w+).?(\w+)?\}\}/g,((t,e,s)=>{let n="";return s?n=this.option(`${e[0]+e.toLowerCase().substring(1)}.l10n.${s}`):e&&(n=this.option(`l10n.${e}`)),n||(n=t),n}));for(let s=0;s<e.length;s++)t=t.split(e[s][0]).join(e[s][1]);return t=t.replace(/\{\{(.*?)\}\}/g,((t,e)=>e))}on(t,e){let s=[];"string"==typeof t?s=t.split(" "):Array.isArray(t)&&(s=t),this.events||(this.events=new Map),s.forEach((t=>{let s=this.events.get(t);s||(this.events.set(t,[]),s=[]),s.includes(e)||s.push(e),this.events.set(t,s)}))}off(t,e){let s=[];"string"==typeof t?s=t.split(" "):Array.isArray(t)&&(s=t),s.forEach((t=>{const s=this.events.get(t);if(Array.isArray(s)){const t=s.indexOf(e);t>-1&&s.splice(t,1)}}))}emit(t,...e){[...this.events.get(t)||[]].forEach((t=>t(this,...e))),"*"!==t&&this.emit("*",t,...e)}}Object.defineProperty(s,"version",{enumerable:!0,configurable:!0,writable:!0,value:"5.0.27"}),Object.defineProperty(s,"defaults",{enumerable:!0,configurable:!0,writable:!0,value:{}});class n extends s{constructor(t,e){super(e),Object.defineProperty(this,"instance",{enumerable:!0,configurable:!0,writable:!0,value:t})}attach(){}detach(){}}class r extends n{constructor(){super(...arguments),Object.defineProperty(this,"container",{enumerable:!0,configurable:!0,writable:!0,value:null}),Object.defineProperty(this,"pins",{enumerable:!0,configurable:!0,writable:!0,value:[]})}onTransform(t){for(const s of this.pins){if(!((e=s)&&null!==e&&e instanceof Element&&"nodeType"in e))continue;const{fitWidth:n,fitHeight:r,fullWidth:i,fullHeight:o}=t.contentRect,a=s.dataset.x||"",l=s.dataset.y||"";let c=0,f=0;c=a.includes("%")?n*(parseFloat(a)/100):parseFloat(a)/i*n,c-=.5*n,f=l.includes("%")?r*(parseFloat(l)/100):parseFloat(l)/o*r,f-=.5*r;const h=new DOMPoint(c,f).matrixTransform(t.getMatrix());s.style.transform=`translate3d(${h.x||0}px, ${h.y||0}px, 0)`}var e}attach(){const t=this.instance;this.pins=Array.from(t.container.querySelectorAll("[data-panzoom-pin]")),this.pins.length&&(t.container.classList.add("has-pins"),t.on(["afterTransform","refresh"],this.onTransform))}detach(){const t=this.instance;this.pins=[],t.container.classList.remove("has-pins"),t.off(["afterTransform","refresh"],this.onTransform)}}Object.defineProperty(r,"defaults",{enumerable:!0,configurable:!0,writable:!0,value:{}});export{r as Pins};
+const t=(e,...s)=>{const n=s.length;for(let r=0;r<n;r++){const n=s[r]||{};Object.entries(n).forEach((([s,n])=>{const r=Array.isArray(n)?[]:{};var i;e[s]||Object.assign(e,{[s]:r}),"object"==typeof(i=n)&&null!==i&&i.constructor===Object&&"[object Object]"===Object.prototype.toString.call(i)?Object.assign(e[s],t(r,n)):Array.isArray(n)?Object.assign(e,{[s]:[...n]}):Object.assign(e,{[s]:n})}))}return e},e=function(t,e){return t.split(".").reduce(((t,e)=>"object"==typeof t?t[e]:void 0),e)};class s{constructor(t={}){Object.defineProperty(this,"options",{enumerable:!0,configurable:!0,writable:!0,value:t}),Object.defineProperty(this,"events",{enumerable:!0,configurable:!0,writable:!0,value:new Map}),this.setOptions(t);for(const t of Object.getOwnPropertyNames(Object.getPrototypeOf(this)))t.startsWith("on")&&"function"==typeof this[t]&&(this[t]=this[t].bind(this))}setOptions(e){this.options=e?t({},this.constructor.defaults,e):{};for(const[t,e]of Object.entries(this.option("on")||{}))this.on(t,e)}option(t,...s){let n=e(t,this.options);return n&&"function"==typeof n&&(n=n.call(this,this,...s)),n}optionFor(t,s,n,...r){let i=e(s,t);var o;"string"!=typeof(o=i)||isNaN(o)||isNaN(parseFloat(o))||(i=parseFloat(i)),"true"===i&&(i=!0),"false"===i&&(i=!1),i&&"function"==typeof i&&(i=i.call(this,this,t,...r));let a=e(s,this.options);return a&&"function"==typeof a?i=a.call(this,this,t,...r,i):void 0===i&&(i=a),void 0===i?n:i}cn(t){const e=this.options.classes;return e&&e[t]||""}localize(t,e=[]){t=String(t).replace(/\{\{(\w+).?(\w+)?\}\}/g,((t,e,s)=>{let n="";return s?n=this.option(`${e[0]+e.toLowerCase().substring(1)}.l10n.${s}`):e&&(n=this.option(`l10n.${e}`)),n||(n=t),n}));for(let s=0;s<e.length;s++)t=t.split(e[s][0]).join(e[s][1]);return t=t.replace(/\{\{(.*?)\}\}/g,((t,e)=>e))}on(t,e){let s=[];"string"==typeof t?s=t.split(" "):Array.isArray(t)&&(s=t),this.events||(this.events=new Map),s.forEach((t=>{let s=this.events.get(t);s||(this.events.set(t,[]),s=[]),s.includes(e)||s.push(e),this.events.set(t,s)}))}off(t,e){let s=[];"string"==typeof t?s=t.split(" "):Array.isArray(t)&&(s=t),s.forEach((t=>{const s=this.events.get(t);if(Array.isArray(s)){const t=s.indexOf(e);t>-1&&s.splice(t,1)}}))}emit(t,...e){[...this.events.get(t)||[]].forEach((t=>t(this,...e))),"*"!==t&&this.emit("*",t,...e)}}Object.defineProperty(s,"version",{enumerable:!0,configurable:!0,writable:!0,value:"5.0.28"}),Object.defineProperty(s,"defaults",{enumerable:!0,configurable:!0,writable:!0,value:{}});class n extends s{constructor(t,e){super(e),Object.defineProperty(this,"instance",{enumerable:!0,configurable:!0,writable:!0,value:t})}attach(){}detach(){}}class r extends n{constructor(){super(...arguments),Object.defineProperty(this,"container",{enumerable:!0,configurable:!0,writable:!0,value:null}),Object.defineProperty(this,"pins",{enumerable:!0,configurable:!0,writable:!0,value:[]})}onTransform(t){for(const s of this.pins){if(!((e=s)&&null!==e&&e instanceof Element&&"nodeType"in e))continue;const{fitWidth:n,fitHeight:r,fullWidth:i,fullHeight:o}=t.contentRect,a=s.dataset.x||"",l=s.dataset.y||"";let c=0,f=0;c=a.includes("%")?n*(parseFloat(a)/100):parseFloat(a)/i*n,c-=.5*n,f=l.includes("%")?r*(parseFloat(l)/100):parseFloat(l)/o*r,f-=.5*r;const h=new DOMPoint(c,f).matrixTransform(t.getMatrix());s.style.transform=`translate3d(${h.x||0}px, ${h.y||0}px, 0)`}var e}attach(){const t=this.instance;this.pins=Array.from(t.container.querySelectorAll("[data-panzoom-pin]")),this.pins.length&&(t.container.classList.add("has-pins"),t.on(["afterTransform","refresh"],this.onTransform))}detach(){const t=this.instance;this.pins=[],t.container.classList.remove("has-pins"),t.off(["afterTransform","refresh"],this.onTransform)}}Object.defineProperty(r,"defaults",{enumerable:!0,configurable:!0,writable:!0,value:{}});export{r as Pins};

dist/panzoom/panzoom.pins.umd.js

@@ -1 +1 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).window=t.window||{})}(this,(function(t){"use strict";const e=(t,...s)=>{const n=s.length;for(let i=0;i<n;i++){const n=s[i]||{};Object.entries(n).forEach((([s,n])=>{const i=Array.isArray(n)?[]:{};var r;t[s]||Object.assign(t,{[s]:i}),"object"==typeof(r=n)&&null!==r&&r.constructor===Object&&"[object Object]"===Object.prototype.toString.call(r)?Object.assign(t[s],e(i,n)):Array.isArray(n)?Object.assign(t,{[s]:[...n]}):Object.assign(t,{[s]:n})}))}return t},s=function(t,e){return t.split(".").reduce(((t,e)=>"object"==typeof t?t[e]:void 0),e)};class n{constructor(t={}){Object.defineProperty(this,"options",{enumerable:!0,configurable:!0,writable:!0,value:t}),Object.defineProperty(this,"events",{enumerable:!0,configurable:!0,writable:!0,value:new Map}),this.setOptions(t);for(const t of Object.getOwnPropertyNames(Object.getPrototypeOf(this)))t.startsWith("on")&&"function"==typeof this[t]&&(this[t]=this[t].bind(this))}setOptions(t){this.options=t?e({},this.constructor.defaults,t):{};for(const[t,e]of Object.entries(this.option("on")||{}))this.on(t,e)}option(t,...e){let n=s(t,this.options);return n&&"function"==typeof n&&(n=n.call(this,this,...e)),n}optionFor(t,e,n,...i){let r=s(e,t);var o;"string"!=typeof(o=r)||isNaN(o)||isNaN(parseFloat(o))||(r=parseFloat(r)),"true"===r&&(r=!0),"false"===r&&(r=!1),r&&"function"==typeof r&&(r=r.call(this,this,t,...i));let a=s(e,this.options);return a&&"function"==typeof a?r=a.call(this,this,t,...i,r):void 0===r&&(r=a),void 0===r?n:r}cn(t){const e=this.options.classes;return e&&e[t]||""}localize(t,e=[]){t=String(t).replace(/\{\{(\w+).?(\w+)?\}\}/g,((t,e,s)=>{let n="";return s?n=this.option(`${e[0]+e.toLowerCase().substring(1)}.l10n.${s}`):e&&(n=this.option(`l10n.${e}`)),n||(n=t),n}));for(let s=0;s<e.length;s++)t=t.split(e[s][0]).join(e[s][1]);return t=t.replace(/\{\{(.*?)\}\}/g,((t,e)=>e))}on(t,e){let s=[];"string"==typeof t?s=t.split(" "):Array.isArray(t)&&(s=t),this.events||(this.events=new Map),s.forEach((t=>{let s=this.events.get(t);s||(this.events.set(t,[]),s=[]),s.includes(e)||s.push(e),this.events.set(t,s)}))}off(t,e){let s=[];"string"==typeof t?s=t.split(" "):Array.isArray(t)&&(s=t),s.forEach((t=>{const s=this.events.get(t);if(Array.isArray(s)){const t=s.indexOf(e);t>-1&&s.splice(t,1)}}))}emit(t,...e){[...this.events.get(t)||[]].forEach((t=>t(this,...e))),"*"!==t&&this.emit("*",t,...e)}}Object.defineProperty(n,"version",{enumerable:!0,configurable:!0,writable:!0,value:"5.0.27"}),Object.defineProperty(n,"defaults",{enumerable:!0,configurable:!0,writable:!0,value:{}});class i extends n{constructor(t,e){super(e),Object.defineProperty(this,"instance",{enumerable:!0,configurable:!0,writable:!0,value:t})}attach(){}detach(){}}class r extends i{constructor(){super(...arguments),Object.defineProperty(this,"container",{enumerable:!0,configurable:!0,writable:!0,value:null}),Object.defineProperty(this,"pins",{enumerable:!0,configurable:!0,writable:!0,value:[]})}onTransform(t){for(const s of this.pins){if(!((e=s)&&null!==e&&e instanceof Element&&"nodeType"in e))continue;const{fitWidth:n,fitHeight:i,fullWidth:r,fullHeight:o}=t.contentRect,a=s.dataset.x||"",l=s.dataset.y||"";let c=0,f=0;c=a.includes("%")?n*(parseFloat(a)/100):parseFloat(a)/r*n,c-=.5*n,f=l.includes("%")?i*(parseFloat(l)/100):parseFloat(l)/o*i,f-=.5*i;const p=new DOMPoint(c,f).matrixTransform(t.getMatrix());s.style.transform=`translate3d(${p.x||0}px, ${p.y||0}px, 0)`}var e}attach(){const t=this.instance;this.pins=Array.from(t.container.querySelectorAll("[data-panzoom-pin]")),this.pins.length&&(t.container.classList.add("has-pins"),t.on(["afterTransform","refresh"],this.onTransform))}detach(){const t=this.instance;this.pins=[],t.container.classList.remove("has-pins"),t.off(["afterTransform","refresh"],this.onTransform)}}Object.defineProperty(r,"defaults",{enumerable:!0,configurable:!0,writable:!0,value:{}}),t.Pins=r}));
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).window=t.window||{})}(this,(function(t){"use strict";const e=(t,...s)=>{const n=s.length;for(let i=0;i<n;i++){const n=s[i]||{};Object.entries(n).forEach((([s,n])=>{const i=Array.isArray(n)?[]:{};var r;t[s]||Object.assign(t,{[s]:i}),"object"==typeof(r=n)&&null!==r&&r.constructor===Object&&"[object Object]"===Object.prototype.toString.call(r)?Object.assign(t[s],e(i,n)):Array.isArray(n)?Object.assign(t,{[s]:[...n]}):Object.assign(t,{[s]:n})}))}return t},s=function(t,e){return t.split(".").reduce(((t,e)=>"object"==typeof t?t[e]:void 0),e)};class n{constructor(t={}){Object.defineProperty(this,"options",{enumerable:!0,configurable:!0,writable:!0,value:t}),Object.defineProperty(this,"events",{enumerable:!0,configurable:!0,writable:!0,value:new Map}),this.setOptions(t);for(const t of Object.getOwnPropertyNames(Object.getPrototypeOf(this)))t.startsWith("on")&&"function"==typeof this[t]&&(this[t]=this[t].bind(this))}setOptions(t){this.options=t?e({},this.constructor.defaults,t):{};for(const[t,e]of Object.entries(this.option("on")||{}))this.on(t,e)}option(t,...e){let n=s(t,this.options);return n&&"function"==typeof n&&(n=n.call(this,this,...e)),n}optionFor(t,e,n,...i){let r=s(e,t);var o;"string"!=typeof(o=r)||isNaN(o)||isNaN(parseFloat(o))||(r=parseFloat(r)),"true"===r&&(r=!0),"false"===r&&(r=!1),r&&"function"==typeof r&&(r=r.call(this,this,t,...i));let a=s(e,this.options);return a&&"function"==typeof a?r=a.call(this,this,t,...i,r):void 0===r&&(r=a),void 0===r?n:r}cn(t){const e=this.options.classes;return e&&e[t]||""}localize(t,e=[]){t=String(t).replace(/\{\{(\w+).?(\w+)?\}\}/g,((t,e,s)=>{let n="";return s?n=this.option(`${e[0]+e.toLowerCase().substring(1)}.l10n.${s}`):e&&(n=this.option(`l10n.${e}`)),n||(n=t),n}));for(let s=0;s<e.length;s++)t=t.split(e[s][0]).join(e[s][1]);return t=t.replace(/\{\{(.*?)\}\}/g,((t,e)=>e))}on(t,e){let s=[];"string"==typeof t?s=t.split(" "):Array.isArray(t)&&(s=t),this.events||(this.events=new Map),s.forEach((t=>{let s=this.events.get(t);s||(this.events.set(t,[]),s=[]),s.includes(e)||s.push(e),this.events.set(t,s)}))}off(t,e){let s=[];"string"==typeof t?s=t.split(" "):Array.isArray(t)&&(s=t),s.forEach((t=>{const s=this.events.get(t);if(Array.isArray(s)){const t=s.indexOf(e);t>-1&&s.splice(t,1)}}))}emit(t,...e){[...this.events.get(t)||[]].forEach((t=>t(this,...e))),"*"!==t&&this.emit("*",t,...e)}}Object.defineProperty(n,"version",{enumerable:!0,configurable:!0,writable:!0,value:"5.0.28"}),Object.defineProperty(n,"defaults",{enumerable:!0,configurable:!0,writable:!0,value:{}});class i extends n{constructor(t,e){super(e),Object.defineProperty(this,"instance",{enumerable:!0,configurable:!0,writable:!0,value:t})}attach(){}detach(){}}class r extends i{constructor(){super(...arguments),Object.defineProperty(this,"container",{enumerable:!0,configurable:!0,writable:!0,value:null}),Object.defineProperty(this,"pins",{enumerable:!0,configurable:!0,writable:!0,value:[]})}onTransform(t){for(const s of this.pins){if(!((e=s)&&null!==e&&e instanceof Element&&"nodeType"in e))continue;const{fitWidth:n,fitHeight:i,fullWidth:r,fullHeight:o}=t.contentRect,a=s.dataset.x||"",l=s.dataset.y||"";let c=0,f=0;c=a.includes("%")?n*(parseFloat(a)/100):parseFloat(a)/r*n,c-=.5*n,f=l.includes("%")?i*(parseFloat(l)/100):parseFloat(l)/o*i,f-=.5*i;const p=new DOMPoint(c,f).matrixTransform(t.getMatrix());s.style.transform=`translate3d(${p.x||0}px, ${p.y||0}px, 0)`}var e}attach(){const t=this.instance;this.pins=Array.from(t.container.querySelectorAll("[data-panzoom-pin]")),this.pins.length&&(t.container.classList.add("has-pins"),t.on(["afterTransform","refresh"],this.onTransform))}detach(){const t=this.instance;this.pins=[],t.container.classList.remove("has-pins"),t.off(["afterTransform","refresh"],this.onTransform)}}Object.defineProperty(r,"defaults",{enumerable:!0,configurable:!0,writable:!0,value:{}}),t.Pins=r}));

dist/panzoom/panzoom.toolbar.esm.d.ts

@@ -0,0 +1 @@
+export * from "../../types/Panzoom/plugins/Toolbar/Toolbar";

package.json

@@ -1,10 +1,12 @@
 {
   "name": "@fancyapps/ui",
-  "version": "5.0.27",
+  "version": "5.0.28",
   "description": "Robust JavaScript UI Component Library",
   "files": [
     "dist",
+    "l10n",
     "types",
+    "CHANGELOG.md",
     "LICENSE.md",
     "README.md"
   ],

types/Carousel/Carousel.d.ts

@@ -3,6 +3,7 @@ import { Panzoom } from "../Panzoom/Panzoom";
 import { PluginsType, CarouselEventsType, slideType, pageType, userSlideType } from "./types";
 import { OptionsType } from "./options";
 import { States } from "./consts";
+export type * from "./plugins/index";
 export declare class Carousel extends Component<OptionsType, CarouselEventsType> {
     static Panzoom: typeof Panzoom;
     static defaults: Partial<OptionsType>;
@@ -104,6 +105,7 @@ export declare class Carousel extends Component<OptionsType, CarouselEventsType>
     private onSlideTo;
     private onChange;
     private onRefresh;
+    private onScroll;
     private onResize;
     private onBeforeTransform;
     private onEndAnimation;
@@ -134,6 +136,10 @@ export declare class Carousel extends Component<OptionsType, CarouselEventsType>
      * Stop transition effect
      */
     clearTransitions(): void;
+    /**
+     * Create the slide(s) and add by the specified index
+     */
+    addSlide(index: number, what: userSlideType | Array<userSlideType>): void;
     /**
      * Create slide(s) and prepend to the beginning of the carousel
      */
@@ -153,7 +159,7 @@ export declare class Carousel extends Component<OptionsType, CarouselEventsType>
     /**
      * Get the progress of the active or selected page relative to the "center"
      */
-    getProgress(index?: number, raw?: boolean): number;
+    getProgress(index?: number, raw?: boolean, ignoreInfinite?: boolean): number;
     /**
      * Set the height of the viewport to match the maximum height of the slides on the current page
      */

types/Carousel/options.d.ts

@@ -38,7 +38,7 @@ export interface ComponentOptionsType {
     /**
      * The name of the transition animation when changing Carousel pages
      */
-    transition: "crossfade" | "fade" | "slide" | "classic" | string | false;
+    transition: "crossfade" | "fade" | "slide" | "classic" | string | false | ((any?: any) => "crossfade" | "fade" | "slide" | "classic");
     /**
      * Number of pages to preload before/after the active page
      */
@@ -70,15 +70,15 @@ export interface ComponentOptionsType {
     /**
      * If true, the Carousel will fill the free space if `infinite: false`
      */
-    fill: boolean;
+    fill: boolean | ((any?: any) => boolean);
     /**
      * If true, the Carousel will settle at any position after a swipe
      */
-    dragFree: boolean;
+    dragFree: boolean | ((any?: any) => boolean);
     /**
      * If true, the Carousel will adjust its height to the height of the currently active slide(s)
      */
-    adaptiveHeight: boolean;
+    adaptiveHeight: boolean | ((any?: any) => boolean);
     /**
      * Change direction of Carousel
      */
@@ -103,11 +103,6 @@ export interface ComponentOptionsType {
      * Optional event listeners
      */
     on?: Partial<Events>;
-    Autoplay?: any;
-    Dots?: any;
-    Navigation?: any;
-    Sync?: any;
-    Thumbs?: any;
 }
 export declare const defaultOptions: ComponentOptionsType;
 export type OptionsType = PluginsOptionsType & ComponentOptionsType;

types/Carousel/plugins/Autoplay/Autoplay.d.ts

@@ -18,7 +18,7 @@ export type AutoplayOptionsType = {
     /**
      * Change where progress bar is appended
      */
-    progressParentEl: HTMLElement | null | (() => HTMLElement | null);
+    progressParentEl: HTMLElement | null | ((any: any) => HTMLElement | null);
     /**
      * If element should be created to display the autoplay progress
      */

types/Carousel/plugins/Navigation/Navigation.d.ts

@@ -30,8 +30,9 @@ export declare class Navigation extends Plugin<Carousel, NavigationOptionsType,
     container: HTMLElement | null;
     prev: HTMLElement | null;
     next: HTMLElement | null;
+    private isDom;
     private onRefresh;
-    private createButton;
+    private addBtn;
     private build;
     cleanup(): void;
     attach(): void;

types/Carousel/plugins/Thumbs/Thumbs.d.ts

@@ -1,4 +1,5 @@
 import { Plugin } from "../../../shared/Base/Plugin";
+import { OptionsType as PanzoomOptionsType } from "../../../Panzoom/options";
 import type { Carousel } from "../../Carousel";
 import { OptionsType as CarouselOptionsType } from "../../options";
 export type ThumbsOptionsType = {
@@ -6,6 +7,10 @@ export type ThumbsOptionsType = {
      * Customize carousel options
      */
     Carousel?: Partial<CarouselOptionsType>;
+    /**
+     * Customize panzoom options
+     */
+    Panzoom?: Partial<PanzoomOptionsType>;
     /**
      * Class names for DOM elements
      */
@@ -63,36 +68,32 @@ export declare enum States {
 export declare class Thumbs extends Plugin<Carousel, ThumbsOptionsType, "ready" | "createSlide"> {
     static defaults: ThumbsOptionsType;
     type: "modern" | "classic";
+    get isModern(): boolean;
     container: HTMLElement | null;
     track: HTMLElement | null;
     private carousel;
-    private panzoom;
     private thumbWidth;
     private thumbClipWidth;
     private thumbHeight;
     private thumbGap;
     private thumbExtraGap;
-    private shouldCenter;
     state: States;
-    private formatThumb;
-    private getSlides;
     private onInitSlide;
     private onInitSlides;
-    private onRefreshM;
-    private onChangeM;
-    private onClickModern;
-    private onTransformM;
-    private buildClassic;
-    private buildModern;
-    private updateModern;
-    private refreshModern;
-    private centerModern;
-    private lazyLoadModern;
-    private resizeModernSlide;
-    private getModernThumbPos;
+    private onChange;
+    private onRefresh;
     isDisabled(): Boolean;
+    private getThumb;
+    private addSlide;
+    private getSlides;
+    private resizeModernSlide;
+    private updateProps;
     build(): void;
-    cleanup(): void;
+    private onClick;
+    private getShift;
+    private setProps;
+    private shiftModern;
+    private cleanup;
     attach(): void;
     detach(): void;
 }

types/Carousel/plugins/index.d.ts

@@ -1,2 +1,5 @@
 import { PluginsType } from "../types";
-export declare const Plugins: PluginsType;
+export type * from "./Dots/Dots";
+export type * from "./Navigation/Navigation";
+export type * from "./Sync/Sync";
+export declare const CarouselPlugins: PluginsType;

types/Carousel/types.d.ts

@@ -37,7 +37,11 @@ export type CarouselEventsType = ComponentEventsType
  */
  | "initLayout"
 /**
- * A slide object is created
+ * Priority event when the slide object is created
+ */
+ | "beforeInitSlide"
+/**
+ * The slide object is created
  */
  | "initSlide"
 /**

types/Fancybox/Fancybox.d.ts

@@ -2,6 +2,7 @@ import { OptionsType } from "./options";
 import { EventsType, PluginsType } from "./types";
 import { States, SlideStates } from "./consts";
 import { Component } from "../shared/Base/Component";
+export type * from "./plugins/index";
 import { Carousel } from "../Carousel/Carousel";
 import { slideType, userSlideType } from "../Carousel/types";
 declare module "../Carousel/types" {
@@ -194,11 +195,11 @@ export declare class Fancybox extends Component<OptionsType, EventsType> {
     /**
      * Start Fancybox using the previously assigned selector
      */
-    static fromSelector(selector: string): void;
+    static fromSelector(selector: string, options?: Partial<OptionsType>): void;
     /**
      * Start Fancybox using the previously assigned selector for the given container
      */
-    static fromSelector(container: HTMLElement | null, selector: string): void;
+    static fromSelector(container: HTMLElement | null, selector: string, options?: Partial<OptionsType>): void;
     /**
      * Start Fancybox using HTML elements
      */

types/Fancybox/options.d.ts

@@ -22,15 +22,15 @@ export interface ComponentOptionsType {
     /**
      * Should backdrop and UI elements fade in/out on start/close
      */
-    animated: boolean;
+    animated: boolean | ((instance: Fancybox) => boolean);
     /**
      * Set focus on first focusable element after displaying content
      */
-    autoFocus: boolean;
+    autoFocus: boolean | ((instance: Fancybox) => boolean);
     /**
      * The action to perform when the user clicks on the backdrop
      */
-    backdropClick: ClickAction | ((any?: any) => ClickAction | void);
+    backdropClick: ClickAction | ((instance: Fancybox) => ClickAction | void);
     /**
      * Change caption per slide
      */
@@ -54,11 +54,11 @@ export interface ComponentOptionsType {
     /**
      * The action to perform when the user clicks on the content
      */
-    contentClick: ClickAction | ((any?: any) => ClickAction | void);
+    contentClick: ClickAction | ((instance: Fancybox) => ClickAction | void);
     /**
      * The action to take when the user double-clicks on the content
      */
-    contentDblClick: ClickAction | ((any?: any) => ClickAction | void);
+    contentDblClick: ClickAction | ((instance: Fancybox) => ClickAction | void);
     /**
      * Default content type
      */
@@ -70,7 +70,7 @@ export interface ComponentOptionsType {
     /**
      * Enable drag-to-close gesture - drag content up/down to close instance
      */
-    dragToClose: boolean;
+    dragToClose: boolean | ((instance: Fancybox) => boolean);
     /**
      * If Fancybox should start in full-scren mode
      */
@@ -93,7 +93,7 @@ export interface ComponentOptionsType {
      * Class name to be applied to the content to hide it.
      * Note: If you disable image zoom, this class name will be used to run the image hide animation.
      */
-    hideClass: string | false;
+    hideClass: string | false | ((instance: Fancybox) => string | false);
     /**
      * If browser scrollbar should be hidden
      */
@@ -139,7 +139,7 @@ export interface ComponentOptionsType {
      * Class name to be applied to the content to reveal it.
      * Note: If you disable image zoom, this class name will be used to run the image reveal animation.
      */
-    showClass: string | false;
+    showClass: string | false | ((instance: Fancybox) => string | false);
     /**
      * Index of active slide on the start
      */
@@ -166,12 +166,6 @@ export interface ComponentOptionsType {
     event?: MouseEvent | undefined;
     triggerEl?: HTMLElement | null;
     delegate?: HTMLElement | null;
-    Hash?: any;
-    Html?: any;
-    Images?: any;
-    Slideshow?: any;
-    Thumbs?: any;
-    Toolbar?: any;
 }
 export declare const defaultOptions: ComponentOptionsType;
 export type OptionsType = PluginsOptionsType & ComponentOptionsType;

types/Fancybox/plugins/Html/Html.d.ts

@@ -50,11 +50,11 @@ export type HtmlOptionsType = {
      * https://developers.google.com/youtube/player_parameters#Parameters
      */
     youtube: {
-        controls: 0 | 1;
-        enablejsapi: 0 | 1;
-        nocookie: 0 | 1;
-        rel: 0 | 1;
-        fs: 0 | 1;
+        controls?: 0 | 1;
+        enablejsapi?: 0 | 1;
+        nocookie?: 0 | 1;
+        rel?: 0 | 1;
+        fs?: 0 | 1;
     };
 };
 declare module "../../../Fancybox/options" {
@@ -62,7 +62,6 @@ declare module "../../../Fancybox/options" {
         Html?: Boolean | Partial<HtmlOptionsType>;
     }
 }
-export declare const defaultOptions: HtmlOptionsType;
 export declare const contentTypes: readonly ["image", "html", "ajax", "inline", "clone", "iframe", "map", "pdf", "html5video", "youtube", "vimeo"];
 type contentType = (typeof contentTypes)[number];
 declare module "../../../Carousel/types" {
@@ -84,7 +83,7 @@ declare module "../../../Carousel/types" {
 }
 export declare class Html extends Plugin<Fancybox, HtmlOptionsType, ""> {
     static defaults: HtmlOptionsType;
-    private onInitSlide;
+    private onBeforeInitSlide;
     private onCreateSlide;
     private onClearContent;
     private onSelectSlide;

types/Fancybox/plugins/Images/Images.d.ts

@@ -30,13 +30,14 @@ export type OptionsType = {
      */
     zoomOpacity: "auto" | boolean;
 };
-export declare const defaultOptions: OptionsType;
 declare module "../../../Carousel/types" {
     interface slideType {
         panzoom?: Panzoom;
         imageEl?: HTMLImageElement | HTMLPictureElement;
         srcset?: string;
         sizes?: string;
+        media?: string;
+        sources?: string;
     }
 }
 declare module "../../../Fancybox/options" {

types/Fancybox/plugins/Slideshow/Slideshow.d.ts

@@ -1,7 +1,7 @@
 import { Plugin } from "../../../shared/Base/Plugin";
 import type { AutoplayOptionsType } from "../../../Carousel/plugins/Autoplay/Autoplay";
 import { Fancybox } from "../../Fancybox";
-export type OptionsType = {
+type OptionsType = {
     /**
      * Custom options for Carousel Autoplay plugin instance, see relevant documentation for more information
      */
@@ -23,7 +23,6 @@ export type OptionsType = {
      */
     timeout: number;
 };
-export declare const defaultOptions: OptionsType;
 export type SlideshowOptionsType = Partial<OptionsType>;
 declare module "../../../Fancybox/options" {
     interface PluginsOptionsType {
@@ -40,3 +39,4 @@ export declare class Slideshow extends Plugin<Fancybox, SlideshowOptionsType, ""
     attach(): void;
     detach(): void;
 }
+export {};

types/Fancybox/plugins/Thumbs/Thumbs.d.ts

@@ -1,7 +1,7 @@
 import { Plugin } from "../../../shared/Base/Plugin";
 import { ThumbsOptionsType as CarouselThumbsOptionsType } from "../../../Carousel/plugins/Thumbs/Thumbs";
 import { Fancybox } from "../../Fancybox";
-export type OptionsType = CarouselThumbsOptionsType & {
+type OptionsType = CarouselThumbsOptionsType & {
     /**
      *  Keyboard shortcut to toggle thumbnail container
      */
@@ -15,7 +15,6 @@ export type OptionsType = CarouselThumbsOptionsType & {
      */
     showOnStart: boolean;
 };
-export declare const defaultOptions: OptionsType;
 export type ThumbsOptionsType = Partial<OptionsType>;
 declare module "../../../Fancybox/options" {
     interface PluginsOptionsType {
@@ -28,6 +27,8 @@ export declare class Thumbs extends Plugin<Fancybox, ThumbsOptionsType, ""> {
     private hidden;
     get isEnabled(): boolean;
     get isHidden(): boolean;
+    private onClick;
+    private onCreateSlide;
     private onInit;
     private onResize;
     private onKeydown;
@@ -38,3 +39,4 @@ export declare class Thumbs extends Plugin<Fancybox, ThumbsOptionsType, ""> {
     attach(): void;
     detach(): void;
 }
+export {};

types/Fancybox/plugins/Toolbar/Toolbar.d.ts

@@ -39,7 +39,7 @@ export type ToolbarItemType = {
 export type ToolbarItemsType = Record<keyof typeof ToolbarItems | string, ToolbarItemType>;
 export type ToolbarItemKey = keyof PanzoomButtonsType | keyof ToolbarItemsType;
 export type ToolbarPosition = "left" | "middle" | "right";
-export type OptionsType = {
+type OptionsType = {
     /**
      * If absolutely position container;
      * "auto" - absolutely positioned if there is no item in the "middle" column
@@ -60,9 +60,8 @@ export type OptionsType = {
     /**
      * Change where toolbar container is appended
      */
-    parentEl: HTMLElement | null | (() => HTMLElement | null);
+    parentEl: HTMLElement | null | ((toolbar: Toolbar) => HTMLElement | null);
 };
-export declare const defaultOptions: OptionsType;
 export type ToolbarOptionsType = Partial<OptionsType>;
 declare module "../../../Fancybox/options" {
     interface PluginsOptionsType {
@@ -84,3 +83,4 @@ export declare class Toolbar extends Plugin<Fancybox, ToolbarOptionsType, ""> {
     attach(): void;
     detach(): void;
 }
+export {};

types/Fancybox/plugins/index.d.ts

@@ -1,2 +1,8 @@
 import { PluginsType } from "../types";
-export declare const Plugins: PluginsType;
+export type * from "./Hash/Hash";
+export type * from "./Images/Images";
+export type * from "./Html/Html";
+export type * from "./Slideshow/Slideshow";
+export type * from "./Thumbs/Thumbs";
+export type * from "./Toolbar/Toolbar";
+export declare const FancyboxPlugins: PluginsType;

types/Panzoom/Panzoom.d.ts

@@ -2,6 +2,7 @@ import { Component } from "../shared/Base/Component";
 import { PluginsType, EventsType, Bounds, MatrixValues, ZoomOptions } from "./types";
 import { States } from "./consts";
 import { OptionsType } from "./options";
+export type * from "./plugins/index";
 export declare class Panzoom extends Component<OptionsType, EventsType> {
     static defaults: Partial<OptionsType>;
     static Plugins: PluginsType;
@@ -11,7 +12,6 @@ export declare class Panzoom extends Component<OptionsType, EventsType> {
     private clickTimer;
     private rAF;
     private isTicking;
-    private friction;
     private ignoreBounds;
     private isBouncingX;
     private isBouncingY;
@@ -20,6 +20,7 @@ export declare class Panzoom extends Component<OptionsType, EventsType> {
     private pwt;
     private cwd;
     private pmme;
+    private friction;
     /**
      * Current state of the instance
      */
@@ -100,6 +101,7 @@ export declare class Panzoom extends Component<OptionsType, EventsType> {
      * Axis that is currently locked
      */
     lockedAxis: false | "x" | "y";
+    get fits(): boolean;
     /**
      * True if the user is on a touch device
      */
@@ -203,6 +205,7 @@ export declare class Panzoom extends Component<OptionsType, EventsType> {
      * Calculate dimensions of contents and container
      */
     updateMetrics(silently?: boolean): void;
+    calculateBounds(): Bounds;
     /**
      * Get information about current content boundaries
      */

types/Panzoom/options.d.ts

@@ -167,8 +167,6 @@ export interface ComponentOptionsType {
      * Optional event listeners
      */
     on?: Partial<Events>;
-    Pins?: any;
-    Toolbar?: any;
 }
 export declare const defaultOptions: ComponentOptionsType;
 export type OptionsType = PluginsOptionsType & ComponentOptionsType;

types/Panzoom/plugins/Pins/Pins.d.ts

@@ -0,0 +1,18 @@
+import { Panzoom } from "../../../Panzoom/Panzoom";
+import { Plugin } from "../../../shared/Base/Plugin";
+declare module "../../../Panzoom/options" {
+    interface PluginsOptionsType {
+        Pins?: Boolean;
+    }
+}
+type PinsOptionsType = {};
+type PinsEventsType = "";
+export declare class Pins extends Plugin<Panzoom, PinsOptionsType, PinsEventsType> {
+    static defaults: {};
+    container: HTMLElement | null;
+    pins: Array<HTMLElement>;
+    onTransform(instance: Panzoom): void;
+    attach(): void;
+    detach(): void;
+}
+export {};

types/Panzoom/plugins/Toolbar/Toolbar.d.ts

@@ -0,0 +1,31 @@
+import { Plugin } from "../../../shared/Base/Plugin";
+import { Panzoom } from "../../Panzoom";
+import { PanzoomButtons } from "../../../shared/buttons";
+export type ToolbarItemType = {
+    icon: string;
+    action?: string;
+    change?: Record<string, number | boolean>;
+    click?: (instance: Panzoom) => void;
+    title?: string;
+};
+export type ToolbarOptionsType = {
+    display: Array<keyof typeof PanzoomButtons>;
+    items: Record<string, ToolbarItemType>;
+    svgAttr: Record<string, string>;
+};
+declare module "../../../Panzoom/options" {
+    interface PluginsOptionsType {
+        Toolbar?: Boolean | Partial<ToolbarOptionsType>;
+    }
+}
+type ToolbarEventsType = "";
+export declare class Toolbar extends Plugin<Panzoom, ToolbarOptionsType, ToolbarEventsType> {
+    static defaults: ToolbarOptionsType;
+    container: HTMLElement | null;
+    addItem(key: string): void;
+    createContainer(): void;
+    removeContainer(): void;
+    attach(): void;
+    detach(): void;
+}
+export {};

types/Panzoom/plugins/index.d.ts

@@ -1,2 +1,2 @@
 import { PluginsType } from "../types";
-export declare const Plugins: PluginsType;
+export declare const PanzoomPlugins: PluginsType;

types/l10n/Carousel/en.d.ts

@@ -1,5 +0,0 @@
-export declare const en: {
-    NEXT: string;
-    PREV: string;
-    GOTO: string;
-};

types/l10n/Fancybox/en.d.ts

@@ -1,34 +0,0 @@
-export declare const en: {
-    CLOSE: string;
-    NEXT: string;
-    PREV: string;
-    MODAL: string;
-    ERROR: string;
-    IMAGE_ERROR: string;
-    ELEMENT_NOT_FOUND: string;
-    AJAX_NOT_FOUND: string;
-    AJAX_FORBIDDEN: string;
-    IFRAME_ERROR: string;
-    TOGGLE_ZOOM: string;
-    TOGGLE_THUMBS: string;
-    TOGGLE_SLIDESHOW: string;
-    TOGGLE_FULLSCREEN: string;
-    DOWNLOAD: string;
-    PANUP: string;
-    PANDOWN: string;
-    PANLEFT: string;
-    PANRIGHT: string;
-    ZOOMIN: string;
-    ZOOMOUT: string;
-    TOGGLEZOOM: string;
-    TOGGLE1TO1: string;
-    ITERATEZOOM: string;
-    ROTATECCW: string;
-    ROTATECW: string;
-    FLIPX: string;
-    FLIPY: string;
-    FITX: string;
-    FITY: string;
-    RESET: string;
-    TOGGLEFS: string;
-};

types/l10n/Panzoom/en.d.ts

@@ -1,19 +0,0 @@
-export declare const en: {
-    PANUP: string;
-    PANDOWN: string;
-    PANLEFT: string;
-    PANRIGHT: string;
-    ZOOMIN: string;
-    ZOOMOUT: string;
-    TOGGLEZOOM: string;
-    TOGGLE1TO1: string;
-    ITERATEZOOM: string;
-    ROTATECCW: string;
-    ROTATECW: string;
-    FLIPX: string;
-    FLIPY: string;
-    FITX: string;
-    FITY: string;
-    RESET: string;
-    TOGGLEFS: string;
-};

types/shared/utils/getDimensions.d.ts

@@ -6,10 +6,3 @@ export declare const getFullWidth: (elem: HTMLImageElement | SVGSVGElement | HTM
  * Get actual height of the element, regardless of how much of content is currently visible
  */
 export declare const getFullHeight: (elem: HTMLImageElement | SVGSVGElement | HTMLElement) => number;
-/**
- * Calculate bounding size to fit dimensions while preserving aspect ratio
- */
-export declare const calculateAspectRatioFit: (srcWidth: number, srcHeight: number, maxWidth: number, maxHeight: number) => {
-    width: number;
-    height: number;
-};

types/shared/utils/toggleClass.d.ts

@@ -1 +1 @@
-export declare const toggleClass: (el: HTMLElement, classes?: string, condition?: boolean) => void;
+export declare const toggleClass: (el: HTMLElement | null, classes?: string, condition?: boolean) => void;