@orangelogic/orange-dam-content-browser-sdk 2.1.42 → 2.1.44-pr61281.8

package/build/OrangeDAMContentBrowserSDK.min.js

@@ -216,7 +216,7 @@
     left: 50%;
     transform: translate(-50%, -50%);
   }
-`,Cn=(0,wt.forwardRef)(((e,t)=>{var n;let{disabled:r,loadable:o,image:i,resizer:a,cropper:s,rotation:l,selectedProxy:c,onCropComplete:u,onLoadingChange:d}=e;const[h,p]=(0,wt.useState)(!0),[f,m]=(0,wt.useState)({x:0,y:0}),[g,v]=(0,wt.useState)(1),[b,y]=(0,wt.useState)(null!==(n=null===i||void 0===i?void 0:i.url)&&void 0!==n?n:""),x=(0,wt.useRef)(null);(0,wt.useEffect)((()=>{const{url:e,originalUrl:t,extension:n}=i,{width:r,height:s}=a,l=Se((async()=>{if(o){var a,l;d(!0);const{width:o,height:c}=_n(i.width,i.height,r,s),{url:u}=await((e,t,n,r,o)=>{const i=new Image;return i.src=e,i.crossOrigin="anonymous",new Promise((a=>{i.onload=()=>{const s=document.createElement("canvas");if(t>r||n>o){const e=r/t,i=o/n,a=Math.min(e,i);s.width=t*a,s.height=n*a}else s.width=t,s.height=n;const l=s.getContext("2d");l?(l.drawImage(i,0,0,s.width,s.height),a({url:s.toDataURL("image/jpeg"),width:s.width,height:s.height})):a({url:e,width:t,height:n})},i.onerror=()=>{a({url:e,width:t,height:n})}}))})(e,o,c,null!==(a=null===(l=x.current)||void 0===l?void 0:l.clientWidth)&&void 0!==a?a:window.innerWidth,Ut.uS);y("gif"===n?t:u),d(!1)}else y(e)}),300,{leading:!0});l()}),[i,o,d,a,c]);const w=(0,wt.useCallback)((async()=>b),[b]),k=(0,wt.useCallback)((async()=>{const{width:e,height:t,x:n,y:r,unit:a}=s,l={x:n,y:r,width:e,height:t};if(l.x=n/100*i.width,l.y=r/100*i.height,o){if(d(!0),a===on.Nf.AspectRatio){const{width:n,height:r}=_n(i.width,i.height,e,t);l.width=n/g,l.height=r/g}const n=await((e,t)=>{const n=new Image;return n.src=e.url,n.crossOrigin="anonymous",new Promise((r=>{n.onload=()=>{const o=document.createElement("canvas");o.width=t.width,o.height=t.height;const i=o.getContext("2d");i?(i.drawImage(n,-t.x,-t.y,e.width,e.height),r(o.toDataURL("image/jpeg"))):r(e.url)},n.onerror=()=>{r(e.url)}}))})({url:i.url,width:i.width,height:i.height},l);return d(!1),n}return Promise.resolve(i.url)}),[s,i.width,i.height,i.url,o,d,g]),S=(0,wt.useCallback)((async()=>{if(o){d(!0);const e=await((e,t)=>{const n=new Image;return n.src=e.url,n.crossOrigin="anonymous",new Promise((r=>{n.onload=()=>{const{width:o,height:i}=sn(e.width,e.height,t),a=document.createElement("canvas");a.width=o,a.height=i;const s=a.getContext("2d");s?(s.fillStyle="white",s.fillRect(0,0,o,i),s.translate(o/2,i/2),s.rotate(t*Math.PI/180),s.drawImage(n,-e.width/2,-e.height/2,e.width,e.height),s.rotate(-t*Math.PI/180),s.translate(-o/2,-i/2),r(a.toDataURL("image/jpeg"))):r(e.url)},n.onerror=()=>{r(e.url)}}))})({url:i.url,width:i.width,height:i.height},l);return d(!1),e}return Promise.resolve(i.url)}),[i.height,i.url,i.width,o,d,l]);(0,wt.useImperativeHandle)(t,(()=>({applyResize:w,applyCrop:k,applyRotation:S,setZoom:v})));const _=(0,wt.useCallback)((()=>{m({x:0,y:0}),v(1)}),[]),E=(0,wt.useCallback)((e=>{r||m(e)}),[r]),C=(0,wt.useCallback)((()=>{p(!1)}),[]);(0,wt.useEffect)((()=>{_()}),[r,_]);const A=(0,wt.useMemo)((()=>{const e=x.current;if(!e||h)return"contain";return a.width/a.height>(e.clientHeight?e.clientWidth/e.clientHeight:0)?"horizontal-cover":"vertical-cover"}),[h,a]);return(0,Vt.jsxs)(En,{ref:x,style:{height:`${Ut.uS}px`},children:[o&&(0,Vt.jsx)(Sn,{image:b,crop:f,zoom:g,aspect:s.width/s.height,rotation:l,objectFit:A,onCropChange:E,onCropComplete:u,onMediaLoaded:C,onZoomChange:v,zoomWithScroll:s.unit===on.Nf.AspectRatio,style:{containerStyle:{cursor:r?"default":"move",pointerEvents:r?"none":"auto"},cropAreaStyle:{display:r?"none":"block"},mediaStyle:{opacity:h?0:1}}}),h&&(0,Vt.jsxs)("div",{className:"loading",children:[(0,Vt.jsx)("cx-skeleton",{className:"loading__skeleton"}),(0,Vt.jsx)("cx-spinner",{className:"loading__spinner"})]})]})}));var An=n(7032);const Tn=function(e,t,n){var r=(n="function"==typeof n?n:void 0)?n(e,t):void 0;return void 0===r?(0,An.A)(e,t,void 0,n):!!r},On=Ft.Ay.div`
+`,Cn=(0,wt.forwardRef)(((e,t)=>{var n;let{disabled:r,loadable:o,image:i,resizer:a,cropper:s,rotation:l,selectedProxy:c,onCropComplete:u,onLoadingChange:d}=e;const[h,p]=(0,wt.useState)(!0),[f,m]=(0,wt.useState)({x:0,y:0}),[g,v]=(0,wt.useState)(1),[b,y]=(0,wt.useState)(null!==(n=null===i||void 0===i?void 0:i.url)&&void 0!==n?n:""),x=(0,wt.useRef)(null),[w,k]=(0,wt.useState)({width:0,height:0});(0,wt.useEffect)((()=>{const{url:e,originalUrl:t,extension:n}=i,{width:r,height:s}=a,l=Se((async()=>{if(o){var a,l;d(!0);const{width:o,height:c}=_n(i.width,i.height,r,s),{url:u}=await((e,t,n,r,o)=>{const i=new Image;return i.src=e,i.crossOrigin="anonymous",new Promise((a=>{i.onload=()=>{const s=document.createElement("canvas");if(t>r||n>o){const e=r/t,i=o/n,a=Math.min(e,i);a>0?(s.width=t*a,s.height=n*a):(s.width=t,s.height=n)}else s.width=t,s.height=n;const l=s.getContext("2d");l?(l.drawImage(i,0,0,s.width,s.height),a({url:s.toDataURL("image/jpeg"),width:s.width,height:s.height})):a({url:e,width:t,height:n})},i.onerror=()=>{a({url:e,width:t,height:n})}}))})(e,o,c,null!==(a=null===(l=x.current)||void 0===l?void 0:l.clientWidth)&&void 0!==a?a:window.innerWidth,Ut.uS);y("gif"===n?t:u),d(!1)}else y(e)}),300,{leading:!0});l()}),[i,o,d,a,c]),(0,wt.useEffect)((()=>{const e=x.current;if(!e)return;const t=new ResizeObserver((e=>{for(const t of e){const{width:e,height:n}=t.contentRect;k({width:e,height:n})}}));return t.observe(e),()=>{t.disconnect()}}),[]);const S=(0,wt.useCallback)((async()=>b),[b]),_=(0,wt.useCallback)((async()=>{const{width:e,height:t,x:n,y:r,unit:a}=s,l={x:n,y:r,width:e,height:t};if(l.x=n/100*i.width,l.y=r/100*i.height,o){if(d(!0),a===on.Nf.AspectRatio){const{width:n,height:r}=_n(i.width,i.height,e,t);l.width=n/g,l.height=r/g}const n=await((e,t)=>{const n=new Image;return n.src=e.url,n.crossOrigin="anonymous",new Promise((r=>{n.onload=()=>{const o=document.createElement("canvas");o.width=t.width,o.height=t.height;const i=o.getContext("2d");i?(i.drawImage(n,-t.x,-t.y,e.width,e.height),r(o.toDataURL("image/jpeg"))):r(e.url)},n.onerror=()=>{r(e.url)}}))})({url:i.url,width:i.width,height:i.height},l);return d(!1),n}return Promise.resolve(i.url)}),[s,i.width,i.height,i.url,o,d,g]),E=(0,wt.useCallback)((async()=>{if(o){d(!0);const e=await((e,t)=>{const n=new Image;return n.src=e.url,n.crossOrigin="anonymous",new Promise((r=>{n.onload=()=>{const{width:o,height:i}=sn(e.width,e.height,t),a=document.createElement("canvas");a.width=o,a.height=i;const s=a.getContext("2d");s?(s.fillStyle="white",s.fillRect(0,0,o,i),s.translate(o/2,i/2),s.rotate(t*Math.PI/180),s.drawImage(n,-e.width/2,-e.height/2,e.width,e.height),s.rotate(-t*Math.PI/180),s.translate(-o/2,-i/2),r(a.toDataURL("image/jpeg"))):r(e.url)},n.onerror=()=>{r(e.url)}}))})({url:i.url,width:i.width,height:i.height},l);return d(!1),e}return Promise.resolve(i.url)}),[i.height,i.url,i.width,o,d,l]);(0,wt.useImperativeHandle)(t,(()=>({applyResize:S,applyCrop:_,applyRotation:E,setZoom:v})));const C=(0,wt.useCallback)((()=>{m({x:0,y:0}),v(1)}),[]),A=(0,wt.useCallback)((e=>{r||m(e)}),[r]),T=(0,wt.useCallback)((()=>{p(!1)}),[]);(0,wt.useEffect)((()=>{C()}),[r,C]);const O=(0,wt.useMemo)((()=>{if(!x.current||h)return"contain";const e=a.width/a.height,t=w.height||Ut.uS;return e>w.width/t?"horizontal-cover":"vertical-cover"}),[h,a,w]);return(0,Vt.jsxs)(En,{ref:x,style:{height:`${Ut.uS}px`},children:[o&&(0,Vt.jsx)(Sn,{image:b,crop:f,zoom:g,aspect:s.width/s.height,rotation:l,objectFit:O,onCropChange:A,onCropComplete:u,onMediaLoaded:T,onZoomChange:v,zoomWithScroll:s.unit===on.Nf.AspectRatio,style:{containerStyle:{cursor:r?"default":"move",pointerEvents:r?"none":"auto"},cropAreaStyle:{display:r?"none":"block"},mediaStyle:{opacity:h?0:1}}}),h&&(0,Vt.jsxs)("div",{className:"loading",children:[(0,Vt.jsx)("cx-skeleton",{className:"loading__skeleton"}),(0,Vt.jsx)("cx-spinner",{className:"loading__spinner"})]})]})}));var An=n(7032);const Tn=function(e,t,n){var r=(n="function"==typeof n?n:void 0)?n(e,t):void 0;return void 0===r?(0,An.A)(e,t,void 0,n):!!r},On=Ft.Ay.div`
   .details__summary__icon {
     width: var(--cx-font-size-3x-large);
     height: var(--cx-font-size-3x-large);