5.0.21

CHANGELOG.md

@@ -1,3 +1,18 @@
+# 5.0.21 (2023-08-08)
+
+### Features
+
+- **Fancybox** Allow Caption to be an Element ([531](https://github.com/fancyapps/ui/issues/531))
+- **Carousel** `appendSlide()` supports a custom element ([531](https://github.com/fancyapps/ui/issues/537))
+- **Panzoom** Zoom in on the current display area centered around the axis ([519](https://github.com/fancyapps/ui/issues/519))
+
+### Bug Fixes
+
+- **Fancybox** Videos wrong size when scrolling through carousel ([535](https://github.com/fancyapps/ui/issues/535))
+- **Fancybox** Classic mode thumbnails are refreshed repeatedly ([540](https://github.com/fancyapps/ui/issues/540))
+- **Fancybox** Carousel swipe doesn't work with links ([524](https://github.com/fancyapps/ui/issues/524))
+- **Fancybox** Focus outline for thumbnails after using keyboard
+
 # 5.0.20 (2023-07-04)
 
 ### Features

dist/carousel/carousel.thumbs.css

@@ -1 +1 @@
-.f-carousel__thumbs{--f-thumb-width: 96px;--f-thumb-height: 72px;--f-thumb-outline: 0;--f-thumb-outline-color: #5eb0ef;--f-thumb-opacity: 1;--f-thumb-hover-opacity: 1;--f-thumb-selected-opacity: 1;--f-thumb-border-radius: 2px;--f-thumb-offset: 0px;--f-button-next-pos: 0;--f-button-prev-pos: 0}.f-carousel__thumbs.is-classic{--f-thumb-gap: 8px;--f-thumb-opacity: 0.5;--f-thumb-hover-opacity: 1;--f-thumb-selected-opacity: 1}.f-carousel__thumbs.is-modern{--f-thumb-gap: 4px;--f-thumb-extra-gap: 20px;--f-thumb-clip-width: 46px}.f-thumbs{position:relative;flex:0 0 auto;margin:0;overflow:hidden;-webkit-tap-highlight-color:rgba(0,0,0,0);user-select:none;perspective:1000px;transform:translateZ(0)}.f-thumbs .f-spinner{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:2px;background-image:linear-gradient(#ebeff2, #e2e8f0);z-index:-1}.f-thumbs .f-spinner svg{display:none}.f-thumbs.is-vertical{height:100%}.f-thumbs__viewport{width:100%;height:auto;overflow:hidden}.f-thumbs__track{display:flex;will-change:transform}.f-thumbs__slide{position:relative;flex:0 0 auto;box-sizing:content-box;display:flex;align-items:center;justify-content:center;padding:0;margin:0;width:var(--f-thumb-width);min-width:var(--f-thumb-width);height:var(--f-thumb-height);overflow:visible;cursor:pointer}.f-thumbs__slide.is-loading img{opacity:0}.is-classic .f-thumbs__viewport{height:100%}.is-modern .f-thumbs__track{width:max-content}.is-modern .f-thumbs__track::before{content:"";position:absolute;top:0;bottom:0;left:calc(var(--left, 0)*1px);width:calc(100% - var(--width, 0)*1px);cursor:pointer}.is-modern .f-thumbs__slide{--clip-path: inset( 0 calc( (var(--f-thumb-width, 0) - var(--f-thumb-clip-width, 0)) * 0.5 * (1 - var(--progress, 0)) ) round var(--f-thumb-border-radius, 0) );transform:translate3d(calc(var(--shift, 0) * -1px), 0, 0);transition:none;pointer-events:none}.is-modern .f-thumbs__slide:focus-within:not(.is-selected){filter:drop-shadow(-1px 0px 0px var(--f-thumb-outline-color)) drop-shadow(2px 0px 0px var(--f-thumb-outline-color)) drop-shadow(0px -1px 0px var(--f-thumb-outline-color)) drop-shadow(0px 2px 0px var(--f-thumb-outline-color))}.is-modern .f-thumbs__slide>*{clip-path:var(--clip-path)}.is-modern.in-touch .f-thumbs__slide{filter:none}.is-modern.is-resting .f-thumbs__slide{transition:all .33s ease}.is-modern.is-resting .f-thumbs__slide>*{transition:all .33s ease}.f-thumbs__slide__button{appearance:none;width:100%;height:100%;margin:0;padding:0;border:0;position:relative;border-radius:var(--f-thumb-border-radius);overflow:hidden;background:rgba(0,0,0,0);outline:none;cursor:pointer;pointer-events:auto;touch-action:manipulation;opacity:var(--f-thumb-opacity);transition:opacity .2s ease}.f-thumbs__slide__button:hover{opacity:var(--f-thumb-hover-opacity)}.f-thumbs__slide__button:focus:not(:focus-visible){outline:none}.f-thumbs__slide__button:focus-visible{outline:none;opacity:var(--f-thumb-selected-opacity)}.is-nav-selected .f-thumbs__slide__button{opacity:var(--f-thumb-selected-opacity)}.is-nav-selected .f-thumbs__slide__button::after{content:"";position:absolute;top:0;left:0;right:0;height:auto;bottom:0;border:var(--f-thumb-outline, 0) solid var(--f-thumb-outline-color, transparent);border-radius:var(--f-thumb-border-radius);animation:f-fadeIn .2s ease-out;z-index:10}.f-thumbs__slide__img{position:absolute;overflow:hidden;top:0;right:0;bottom:0;left:0;width:100%;height:100%;padding:var(--f-thumb-offset);box-sizing:border-box;pointer-events:none;object-fit:cover}.f-thumbs.is-horizontal .f-thumbs__track{margin:0 auto;padding:8px 0 12px 0}.f-thumbs.is-horizontal .f-thumbs__slide{margin:0 var(--f-thumb-gap) 0 0}.f-thumbs.is-vertical .f-thumbs__track{flex-wrap:wrap;margin:auto 0;padding:0 8px}.f-thumbs.is-vertical .f-thumbs__slide{margin:0 0 var(--f-thumb-gap) 0}
+.f-carousel__thumbs{--f-thumb-width: 96px;--f-thumb-height: 72px;--f-thumb-outline: 0;--f-thumb-outline-color: #5eb0ef;--f-thumb-opacity: 1;--f-thumb-hover-opacity: 1;--f-thumb-selected-opacity: 1;--f-thumb-border-radius: 2px;--f-thumb-offset: 0px;--f-button-next-pos: 0;--f-button-prev-pos: 0}.f-carousel__thumbs.is-classic{--f-thumb-gap: 8px;--f-thumb-opacity: 0.5;--f-thumb-hover-opacity: 1;--f-thumb-selected-opacity: 1}.f-carousel__thumbs.is-modern{--f-thumb-gap: 4px;--f-thumb-extra-gap: 20px;--f-thumb-clip-width: 46px}.f-thumbs{position:relative;flex:0 0 auto;margin:0;overflow:hidden;-webkit-tap-highlight-color:rgba(0,0,0,0);user-select:none;perspective:1000px;transform:translateZ(0)}.f-thumbs .f-spinner{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:2px;background-image:linear-gradient(#ebeff2, #e2e8f0);z-index:-1}.f-thumbs .f-spinner svg{display:none}.f-thumbs.is-vertical{height:100%}.f-thumbs__viewport{width:100%;height:auto;overflow:hidden}.f-thumbs__track{display:flex;will-change:transform}.f-thumbs__slide{position:relative;flex:0 0 auto;box-sizing:content-box;display:flex;align-items:center;justify-content:center;padding:0;margin:0;width:var(--f-thumb-width);min-width:var(--f-thumb-width);height:var(--f-thumb-height);overflow:visible;cursor:pointer}.f-thumbs__slide.is-loading img{opacity:0}.is-classic .f-thumbs__viewport{height:100%}.is-modern .f-thumbs__track{width:max-content}.is-modern .f-thumbs__track::before{content:"";position:absolute;top:0;bottom:0;left:calc(var(--left, 0)*1px);width:calc(100% - var(--width, 0)*1px);cursor:pointer}.is-modern .f-thumbs__slide{--clip-path: inset( 0 calc( (var(--f-thumb-width, 0) - var(--f-thumb-clip-width, 0)) * 0.5 * (1 - var(--progress, 0)) ) round var(--f-thumb-border-radius, 0) );transform:translate3d(calc(var(--shift, 0) * -1px), 0, 0);transition:none;pointer-events:none}.is-modern .f-thumbs__slide>*{clip-path:var(--clip-path)}.is-modern:not(.is-using-mouse) .f-thumbs__slide:focus-within{filter:drop-shadow(-1px 0px 0px var(--f-thumb-outline-color)) drop-shadow(2px 0px 0px var(--f-thumb-outline-color)) drop-shadow(0px -1px 0px var(--f-thumb-outline-color)) drop-shadow(0px 2px 0px var(--f-thumb-outline-color))}.is-modern.in-touch .f-thumbs__slide{filter:none}.is-modern.is-resting .f-thumbs__slide{transition:all .33s ease}.is-modern.is-resting .f-thumbs__slide>*{transition:all .33s ease}.f-thumbs__slide__button{appearance:none;width:100%;height:100%;margin:0;padding:0;border:0;position:relative;border-radius:var(--f-thumb-border-radius);overflow:hidden;background:rgba(0,0,0,0);outline:none;cursor:pointer;pointer-events:auto;touch-action:manipulation;opacity:var(--f-thumb-opacity);transition:opacity .2s ease}.f-thumbs__slide__button:hover{opacity:var(--f-thumb-hover-opacity)}.f-thumbs__slide__button:focus:not(:focus-visible){outline:none}.f-thumbs__slide__button:focus-visible{outline:none;opacity:var(--f-thumb-selected-opacity)}.is-nav-selected .f-thumbs__slide__button{opacity:var(--f-thumb-selected-opacity)}.is-nav-selected .f-thumbs__slide__button::after{content:"";position:absolute;top:0;left:0;right:0;height:auto;bottom:0;border:var(--f-thumb-outline, 0) solid var(--f-thumb-outline-color, transparent);border-radius:var(--f-thumb-border-radius);animation:f-fadeIn .2s ease-out;z-index:10}.f-thumbs__slide__img{position:absolute;overflow:hidden;top:0;right:0;bottom:0;left:0;width:100%;height:100%;padding:var(--f-thumb-offset);box-sizing:border-box;pointer-events:none;object-fit:cover}.f-thumbs.is-horizontal .f-thumbs__track{margin:0 auto;padding:8px 0 12px 0}.f-thumbs.is-horizontal .f-thumbs__slide{margin:0 var(--f-thumb-gap) 0 0}.f-thumbs.is-vertical .f-thumbs__track{flex-wrap:wrap;margin:auto 0;padding:0 8px}.f-thumbs.is-vertical .f-thumbs__slide{margin:0 0 var(--f-thumb-gap) 0}

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.20"}),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 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",this.onTransform))}detach(){const t=this.instance;this.pins=[],t.container.classList.remove("has-pins"),t.off("afterTransform",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.21"}),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 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",this.onTransform))}detach(){const t=this.instance;this.pins=[],t.container.classList.remove("has-pins"),t.off("afterTransform",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 o;t[s]||Object.assign(t,{[s]:i}),"object"==typeof(o=n)&&null!==o&&o.constructor===Object&&"[object Object]"===Object.prototype.toString.call(o)?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 o=s(e,t);var r;"string"!=typeof(r=o)||isNaN(r)||isNaN(parseFloat(r))||(o=parseFloat(o)),"true"===o&&(o=!0),"false"===o&&(o=!1),o&&"function"==typeof o&&(o=o.call(this,this,t,...i));let a=s(e,this.options);return a&&"function"==typeof a?o=a.call(this,this,t,...i,o):void 0===o&&(o=a),void 0===o?n:o}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.20"}),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 o 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:o,fullHeight:r}=t.contentRect,a=s.dataset.x||"",l=s.dataset.y||"";let c=0,f=0;c=a.includes("%")?n*(parseFloat(a)/100):parseFloat(a)/o*n,c-=.5*n,f=l.includes("%")?i*(parseFloat(l)/100):parseFloat(l)/r*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",this.onTransform))}detach(){const t=this.instance;this.pins=[],t.container.classList.remove("has-pins"),t.off("afterTransform",this.onTransform)}}Object.defineProperty(o,"defaults",{enumerable:!0,configurable:!0,writable:!0,value:{}}),t.Pins=o}));
+!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 o;t[s]||Object.assign(t,{[s]:i}),"object"==typeof(o=n)&&null!==o&&o.constructor===Object&&"[object Object]"===Object.prototype.toString.call(o)?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 o=s(e,t);var r;"string"!=typeof(r=o)||isNaN(r)||isNaN(parseFloat(r))||(o=parseFloat(o)),"true"===o&&(o=!0),"false"===o&&(o=!1),o&&"function"==typeof o&&(o=o.call(this,this,t,...i));let a=s(e,this.options);return a&&"function"==typeof a?o=a.call(this,this,t,...i,o):void 0===o&&(o=a),void 0===o?n:o}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.21"}),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 o 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:o,fullHeight:r}=t.contentRect,a=s.dataset.x||"",l=s.dataset.y||"";let c=0,f=0;c=a.includes("%")?n*(parseFloat(a)/100):parseFloat(a)/o*n,c-=.5*n,f=l.includes("%")?i*(parseFloat(l)/100):parseFloat(l)/r*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",this.onTransform))}detach(){const t=this.instance;this.pins=[],t.container.classList.remove("has-pins"),t.off("afterTransform",this.onTransform)}}Object.defineProperty(o,"defaults",{enumerable:!0,configurable:!0,writable:!0,value:{}}),t.Pins=o}));

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fancyapps/ui",
-  "version": "5.0.20",
+  "version": "5.0.21",
   "description": "Robust JavaScript UI Component Library",
   "files": [
     "dist",