@orangelogic/orange-dam-content-browser-sdk 2.1.38-2-2-0.70 → 2.1.38
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -187,7 +187,7 @@
|
|
|
187
187
|
display: none;
|
|
188
188
|
}
|
|
189
189
|
}
|
|
190
|
-
`,Jt=e=>{let{itemKey:t,type:n,loading:r,selected:o,all:i,rest:a,mappedDisplayNames:s,collections:l,partialSyncCheckbox:c}=e;const u=(0,wt.useRef)(null);return(0,wt.useEffect)((()=>{const e=u.current;if(!e)return;const n=Object.keys(a).some((e=>l.includes(`${t}>>${e}`)));o||n?n&&(e.indeterminate=!0):(e.previouslySelected=!1,e.indeterminate=!1)}),[o,l,a,t]),(0,Vt.jsxs)("cx-tree-item",{ref:u,"data-value":t,"data-type":n,readonly:r,selected:o,"partial-sync-checkboxes":c,children:[s[t]," ",!!i&&`(${i})`,Object.entries(a).map((e=>{let[o,i]=e;return(0,Vt.jsxs)("cx-tree-item",{"data-value":`${t}>>${o}`,"data-type":n,readonly:r,selected:l.includes(`${t}>>${o}`),children:[s[`${t}>>${o}`]," (",i,")"]},o)}))]})},en=e=>{let{values:t,type:n,displayName:r,collections:o,loading:i=!1}=e;const[a,s]=(0,wt.useState)(1),l=(0,wt.useMemo)((()=>t.reduce(((e,t)=>{let{value:n,count:r}=t;const[o,i]=n.split(">>");return e[o]&&"object"===typeof e[o]||(e[o]?e[o]={all:e[o]}:e[o]={}),i&&(e[o][i]=r),e[o].all=(e[o].all||0)+r,e}),{})),[t]),c=(0,wt.useMemo)((()=>t.reduce(((e,t)=>{let{value:n,displayValue:r}=t;return e[n]=r,e}),{})),[t]),u=(0,wt.useMemo)((()=>Object.keys(l).length>20*a),[l,a]);return 0===t.length?null:(0,Vt.jsxs)("cx-details",{open:!0,className:"filter-details",children:[(0,Vt.jsxs)("cx-space",{slot:"summary","align-items":"center",spacing:"x-small",wrap:"nowrap",children:[(0,Vt.jsx)("span",{children:r}),i&&(0,Vt.jsx)("cx-spinner",{})]}),(0,Vt.jsx)("cx-space",{direction:"vertical",children:(0,Vt.jsxs)("cx-tree",{selection:"multiple","label-select-single":!0,"data-facet":n,children:[Object.entries(l).slice(0,20*a).map((e=>{let[t,r]=e;if("object"===typeof r){const e=o.includes(t),{all:a,...s}=r,l=Object.values(s).reduce(((e,t)=>e+t),0);return(0,Vt.jsx)(Jt,{itemKey:t,type:n,loading:i,selected:e,all:a,rest:s,mappedDisplayNames:c,collections:o,partialSyncCheckbox:l<a||void 0},t)}return(0,Vt.jsxs)("cx-tree-item",{"data-value":t,"data-type":n,readonly:i,selected:o.includes(t),children:[c[t]," (",r,")"]},t)})),u&&(0,Vt.jsx)(qt,{loadMore:()=>s((e=>e+1)),isLoading:i,disabled:i})]})})]})},tn=e=>{let{allowSorting:t,availableFacets:n,currentCount:r,loading:o,facets:i,isMobile:a,isSeeThrough:s,searchValue:l,selectedFacets:c,sortDirection:u,sortOrder:d,sortOrders:h,totalCount:p,view:f,onSearchChange:m,onSettingChange:g}=e;const[v,b]=(0,wt.useState)(!1),[y,x]=(0,wt.useState)({type:void 0,value:void 0}),w=(0,wt.useRef)(null),k=(0,wt.useRef)(null),S=(0,wt.useRef)(null),_=(0,wt.useRef)(null);(0,wt.useEffect)((()=>{Promise.all([customElements.whenDefined("cx-input"),customElements.whenDefined("cx-checkbox"),customElements.whenDefined("cx-dropdown")]).then((()=>b(!0)))}),[]),(0,wt.useEffect)((()=>{const e=e=>{const t=e.target.value;l!==t&&m(t)},t=w.current;return null===t||void 0===t||t.addEventListener("cx-change",e),()=>{null===t||void 0===t||t.removeEventListener("cx-change",e)}}),[v,l,m]),(0,wt.useEffect)((()=>{const e=e=>{const t=e.detail.item.value;"see-thru"===t?g("isSeeThrough",!s):g("view",null!==t&&void 0!==t?t:Xt.gf.Medium)},t=S.current;return null===t||void 0===t||t.addEventListener("cx-select",e),()=>{null===t||void 0===t||t.removeEventListener("cx-select",e)}}),[v,s,g]),(0,wt.useEffect)((()=>{const e=e=>{const t=e.target,n=t.dataset.type,r=t.dataset.value;if(!r||!n)return;const o={...c};o[n]&&(o[n]=o[n].filter((e=>e!==r))),g("filter",o)},t=e=>{const t=e.target.dataset.facet;if(!t)return;x({type:"filter",value:t});const n=e.detail.selection.reduce(((e,t)=>{const n=t.dataset.type,r=t.dataset.value;return r&&n?(e[n]||(e[n]=[]),e[n].push(r),e):e}),{...c,[t]:[]});g("filter",n)},n=e=>{const t=e.detail.item.dataset.type,n=e.detail.item.value;n&&("sort-direction"===t?(x({type:"sortDirection",value:n}),g("sortDirection",n)):"sort-order"===t&&(x({type:"sortOrder",value:n}),g("sortOrder",n)))},r=k.current,o=_.current;return null===r||void 0===r||r.addEventListener("cx-selection-change",t),null===r||void 0===r||r.addEventListener("cx-remove",e),null===o||void 0===o||o.addEventListener("cx-select",n),()=>{null===r||void 0===r||r.removeEventListener("cx-selection-change",t),null===r||void 0===r||r.removeEventListener("cx-remove",e),null===o||void 0===o||o.removeEventListener("cx-select",n)}}),[v,c,g]);const E=(0,wt.useMemo)((()=>Zt.find((e=>e.value===f))),[f]),C=(0,wt.useMemo)((()=>Object.values(c).reduce(((e,t)=>e+t.length),0)),[c]),A=(0,wt.useMemo)((()=>{var e;return null!==(e=null===i||void 0===i?void 0:i.reduce(((e,t)=>{const n=t.values.reduce(((e,t)=>{let{value:n,displayValue:r}=t;return e[n]=r,e}),{});return{...e,[t.facetDetails.facetFieldName]:n}}),{}))&&void 0!==e?e:{}}),[i]),T=(0,wt.useCallback)((()=>(0,Vt.jsxs)("cx-details",{"data-cy":"applied-filters",open:!0,className:("filter-details "+(0===C?"filter-details--empty":"")).trim(),children:[(0,Vt.jsxs)("cx-space",{slot:"summary","align-items":"center",spacing:"x-small",wrap:"nowrap",children:[(0,Vt.jsxs)("span",{children:["Applied filters"," ",C>0?` (${C})`:""]}),o&&"filter"===y.type&&(0,Vt.jsx)("cx-spinner",{})]}),(0,Vt.jsx)("cx-space",{direction:"horizontal",spacing:"small",children:Object.entries(c).map((e=>{let[t,n]=e;return n&&0!==n.length?n.map((e=>(0,Vt.jsxs)("cx-tag",{removable:!0,"data-value":e,"data-type":t,size:"small",children:[A[t][e],(0,Vt.jsx)("cx-icon",{slot:"suffix",name:"close"})]},e))):null}))}),C>0&&(0,Vt.jsxs)("cx-button",{variant:"text",className:"clear-all-button",onClick:()=>{g("filter",{mediaTypes:[],visibilityClasses:[],statuses:[],extensions:[]})},children:["Clear all",(0,Vt.jsx)("cx-icon",{slot:"prefix",name:"clear",label:"Clear"})]})]})),[C,o,A,y.type,g,c]);return(0,Vt.jsxs)(Yt,{children:[(0,Vt.jsxs)("cx-space",{"align-items":"center",spacing:"x-small",wrap:"nowrap",style:{flex:1},children:[(0,Vt.jsx)("cx-input",{ref:w,value:l,placeholder:"Search...",clearable:!0,className:"search-input",children:(0,Vt.jsx)("cx-icon",{name:"search",slot:"prefix",className:"icon--large"})}),(0,Vt.jsxs)("cx-dropdown",{ref:k,children:[(0,Vt.jsx)("div",{slot:"trigger",children:(0,Vt.jsx)("cx-tooltip",{content:"Filter",children:(0,Vt.jsx)("cx-icon-button",{name:"filter_alt",label:"Filter",outline:!0,"data-cy":"filter-button",children:C>0&&(0,Vt.jsx)("cx-badge",{slot:"badge",pill:!0,size:"small",children:C})})})}),T(),n.length>0&&(0,Vt.jsx)("cx-space",{direction:"vertical",className:"filter-details",children:n.map((e=>{const t=null===i||void 0===i?void 0:i.find((t=>t.facetDetails.facetFieldName===e.facetFieldName));return t?(0,Vt.jsx)(en,{values:t.values,displayName:t.facetDetails.displayName,type:t.facetDetails.facetFieldName,collections:c[t.facetDetails.facetFieldName]||[]},t.facetDetails.facetFieldName):null}))})]})]}),(0,Vt.jsxs)("cx-space",{"align-items":"center",spacing:"x-small",wrap:"nowrap",style:{marginLeft:"auto"},children:[(0,Vt.jsx)("cx-line-clamp",{lines:1,children:(0,Vt.jsxs)("cx-typography",{variant:"body3",children:[r," of ",p]})}),(0,Vt.jsxs)("cx-dropdown",{ref:S,"auto-width-factor":.6,"stay-open-on-select":!0,placement:"bottom-end",skidding:a?40:0,children:[(0,Vt.jsx)("div",{slot:"trigger",children:(0,Vt.jsx)("cx-tooltip",{content:"View",children:(0,Vt.jsx)("cx-icon-button",{name:"dashboard",label:"View",outline:!0,"data-cy":"view-button"})})}),(0,Vt.jsxs)("cx-menu",{children:[(0,Vt.jsx)("cx-menu-label",{children:"View"}),(0,Vt.jsxs)("cx-menu-item",{class:E?"selected":"",children:["Grid (",null===E||void 0===E?void 0:E.label,")",(0,Vt.jsx)("cx-menu",{slot:"submenu",children:Zt.map((e=>(0,Vt.jsxs)("cx-menu-item",{value:e.value.toString(),class:e.value===f?"selected":"",children:[e.label,(0,Vt.jsx)("cx-icon",{slot:"prefix",name:f===e.value?"check":""})]},e.value)))}),(0,Vt.jsx)("cx-icon",{slot:"prefix",name:"grid_view"})]}),(0,Vt.jsx)("cx-divider",{}),(0,Vt.jsxs)("cx-menu-item",{value:"see-thru",className:"menu-item--switch",children:[(0,Vt.jsx)("cx-line-clamp",{lines:1,children:"See-thru"}),(0,Vt.jsx)("cx-switch",{checked:s,onClick:e=>e.preventDefault()})]})]})]}),(0,Vt.jsxs)("cx-dropdown",{ref:_,"auto-width-factor":.5,"stay-open-on-select":!0,children:[(0,Vt.jsx)("div",{slot:"trigger",children:(0,Vt.jsx)("cx-tooltip",{content:"Sort",children:(0,Vt.jsx)("cx-icon-button",{name:"sort",label:"Sort",outline:!0,"data-cy":"sort-button"})})}),(0,Vt.jsxs)("cx-menu",{children:[(h?Gt.map((e=>{var t,n;const r=null===(t=h[d])||void 0===t||null===(n=t.find((t=>t.sortDirection.toLowerCase()===e.value.toLowerCase())))||void 0===n?void 0:n.sortDirectionDisplayName;return{...e,label:null!==r&&void 0!==r?r:e.value}})):Gt).map((e=>(0,Vt.jsxs)("cx-menu-item",{"data-type":"sort-direction",disabled:!t,value:e.value,class:t&&u===e.value?"selected":"",children:[e.label.replace(/\b\w/g,(e=>e.toUpperCase())),o&&"sortDirection"===y.type&&y.value===e.value?(0,Vt.jsx)("cx-spinner",{slot:"prefix"}):(0,Vt.jsx)(e.icon,{})]},e.value))),(0,Vt.jsx)("cx-divider",{}),Object.keys(null!==h&&void 0!==h?h:{}).map((e=>(0,Vt.jsxs)("cx-menu-item",{"data-type":"sort-order",value:e,class:d===e?"selected":"",children:[e.replace(/\b\w/g,(e=>e.toUpperCase())),o&&"sortOrder"===y.type&&y.value===e?(0,Vt.jsx)("cx-spinner",{slot:"prefix"}):(0,Vt.jsx)("cx-icon",{slot:"prefix",name:d===e?"check":""})]},e)))]})]})]})]})};var nn=n(7840),rn=n(8743);const on=(e,t)=>{const n=(e,t)=>0===t?e:n(t,e%t),r=Math.round(e),o=Math.round(t),i=n(r,o);return{width:r/i,height:o/i}},an=(e,t,n)=>{const r=n*Math.PI/180;if(n%90===0)return{width:n%180===0?e:t,height:n%180===0?t:e};const o=Math.abs(Math.cos(r)),i=Math.abs(Math.sin(r)),a=e*o+t*i,s=e*i+t*o;return{width:Math.round(a),height:Math.round(s)}};var sn=function(e,t){return sn=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])},sn(e,t)};function ln(e,t){if("function"!==typeof t&&null!==t)throw new TypeError("Class extends value "+String(t)+" is not a constructor or null");function n(){this.constructor=e}sn(e,t),e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)}var cn=function(){return cn=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var o in t=arguments[n])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e},cn.apply(this,arguments)};Object.create;Object.create;"function"===typeof SuppressedError&&SuppressedError;var un=n(1185),dn=n.n(un);function hn(e,t,n,r,o){void 0===o&&(o=0);var i=yn(t.width,t.height,o),a=i.width,s=i.height;return{x:pn(e.x,a,n.width,r),y:pn(e.y,s,n.height,r)}}function pn(e,t,n,r){var o=t*r/2-n/2;return xn(e,-o,o)}function fn(e,t){return Math.sqrt(Math.pow(e.y-t.y,2)+Math.pow(e.x-t.x,2))}function mn(e,t){return 180*Math.atan2(t.y-e.y,t.x-e.x)/Math.PI}function gn(e,t){return Math.min(e,Math.max(0,t))}function vn(e,t){return t}function bn(e,t){return{x:(t.x+e.x)/2,y:(t.y+e.y)/2}}function yn(e,t,n){var r=n*Math.PI/180;return{width:Math.abs(Math.cos(r)*e)+Math.abs(Math.sin(r)*t),height:Math.abs(Math.sin(r)*e)+Math.abs(Math.cos(r)*t)}}function xn(e,t,n){return Math.min(Math.max(e,t),n)}function wn(){for(var e=[],t=0;t<arguments.length;t++)e[t]=arguments[t];return e.filter((function(e){return"string"===typeof e&&e.length>0})).join(" ").trim()}var kn=function(e){function t(){var n=null!==e&&e.apply(this,arguments)||this;return n.cropperRef=wt.createRef(),n.imageRef=wt.createRef(),n.videoRef=wt.createRef(),n.containerPosition={x:0,y:0},n.containerRef=null,n.styleRef=null,n.containerRect=null,n.mediaSize={width:0,height:0,naturalWidth:0,naturalHeight:0},n.dragStartPosition={x:0,y:0},n.dragStartCrop={x:0,y:0},n.gestureZoomStart=0,n.gestureRotationStart=0,n.isTouching=!1,n.lastPinchDistance=0,n.lastPinchRotation=0,n.rafDragTimeout=null,n.rafPinchTimeout=null,n.wheelTimer=null,n.currentDoc="undefined"!==typeof document?document:null,n.currentWindow="undefined"!==typeof window?window:null,n.resizeObserver=null,n.state={cropSize:null,hasWheelJustStarted:!1,mediaObjectFit:void 0},n.initResizeObserver=function(){if("undefined"!==typeof window.ResizeObserver&&n.containerRef){var e=!0;n.resizeObserver=new window.ResizeObserver((function(t){e?e=!1:n.computeSizes()})),n.resizeObserver.observe(n.containerRef)}},n.preventZoomSafari=function(e){return e.preventDefault()},n.cleanEvents=function(){n.currentDoc&&(n.currentDoc.removeEventListener("mousemove",n.onMouseMove),n.currentDoc.removeEventListener("mouseup",n.onDragStopped),n.currentDoc.removeEventListener("touchmove",n.onTouchMove),n.currentDoc.removeEventListener("touchend",n.onDragStopped),n.currentDoc.removeEventListener("gesturemove",n.onGestureMove),n.currentDoc.removeEventListener("gestureend",n.onGestureEnd),n.currentDoc.removeEventListener("scroll",n.onScroll))},n.clearScrollEvent=function(){n.containerRef&&n.containerRef.removeEventListener("wheel",n.onWheel),n.wheelTimer&&clearTimeout(n.wheelTimer)},n.onMediaLoad=function(){var e=n.computeSizes();e&&(n.emitCropData(),n.setInitialCrop(e)),n.props.onMediaLoaded&&n.props.onMediaLoaded(n.mediaSize)},n.setInitialCrop=function(e){if(n.props.initialCroppedAreaPercentages){var t=function(e,t,n,r,o,i){var a=yn(t.width,t.height,n),s=xn(r.width/a.width*(100/e.width),o,i);return{crop:{x:s*a.width/2-r.width/2-a.width*s*(e.x/100),y:s*a.height/2-r.height/2-a.height*s*(e.y/100)},zoom:s}}(n.props.initialCroppedAreaPercentages,n.mediaSize,n.props.rotation,e,n.props.minZoom,n.props.maxZoom),r=t.crop,o=t.zoom;n.props.onCropChange(r),n.props.onZoomChange&&n.props.onZoomChange(o)}else if(n.props.initialCroppedAreaPixels){var i=function(e,t,n,r,o,i){void 0===n&&(n=0);var a=yn(t.naturalWidth,t.naturalHeight,n),s=xn(function(e,t,n){var r=function(e){return e.width>e.height?e.width/e.naturalWidth:e.height/e.naturalHeight}(t);return n.height>n.width?n.height/(e.height*r):n.width/(e.width*r)}(e,t,r),o,i),l=r.height>r.width?r.height/e.height:r.width/e.width;return{crop:{x:((a.width-e.width)/2-e.x)*l,y:((a.height-e.height)/2-e.y)*l},zoom:s}}(n.props.initialCroppedAreaPixels,n.mediaSize,n.props.rotation,e,n.props.minZoom,n.props.maxZoom);r=i.crop,o=i.zoom;n.props.onCropChange(r),n.props.onZoomChange&&n.props.onZoomChange(o)}},n.computeSizes=function(){var e,t,r,o,i,a,s=n.imageRef.current||n.videoRef.current;if(s&&n.containerRef){n.containerRect=n.containerRef.getBoundingClientRect(),n.saveContainerPosition();var l=n.containerRect.width/n.containerRect.height,c=(null===(e=n.imageRef.current)||void 0===e?void 0:e.naturalWidth)||(null===(t=n.videoRef.current)||void 0===t?void 0:t.videoWidth)||0,u=(null===(r=n.imageRef.current)||void 0===r?void 0:r.naturalHeight)||(null===(o=n.videoRef.current)||void 0===o?void 0:o.videoHeight)||0,d=c/u,h=void 0;if(s.offsetWidth<c||s.offsetHeight<u)switch(n.state.mediaObjectFit){default:case"contain":h=l>d?{width:n.containerRect.height*d,height:n.containerRect.height}:{width:n.containerRect.width,height:n.containerRect.width/d};break;case"horizontal-cover":h={width:n.containerRect.width,height:n.containerRect.width/d};break;case"vertical-cover":h={width:n.containerRect.height*d,height:n.containerRect.height}}else h={width:s.offsetWidth,height:s.offsetHeight};n.mediaSize=cn(cn({},h),{naturalWidth:c,naturalHeight:u}),n.props.setMediaSize&&n.props.setMediaSize(n.mediaSize);var p=n.props.cropSize?n.props.cropSize:function(e,t,n,r,o,i){void 0===i&&(i=0);var a=yn(e,t,i),s=a.width,l=a.height,c=Math.min(s,n),u=Math.min(l,r);return c>u*o?{width:u*o,height:u}:{width:c,height:c/o}}(n.mediaSize.width,n.mediaSize.height,n.containerRect.width,n.containerRect.height,n.props.aspect,n.props.rotation);return(null===(i=n.state.cropSize)||void 0===i?void 0:i.height)===p.height&&(null===(a=n.state.cropSize)||void 0===a?void 0:a.width)===p.width||n.props.onCropSizeChange&&n.props.onCropSizeChange(p),n.setState({cropSize:p},n.recomputeCropPosition),n.props.setCropSize&&n.props.setCropSize(p),p}},n.saveContainerPosition=function(){if(n.containerRef){var e=n.containerRef.getBoundingClientRect();n.containerPosition={x:e.left,y:e.top}}},n.onMouseDown=function(e){n.currentDoc&&(e.preventDefault(),n.currentDoc.addEventListener("mousemove",n.onMouseMove),n.currentDoc.addEventListener("mouseup",n.onDragStopped),n.saveContainerPosition(),n.onDragStart(t.getMousePoint(e)))},n.onMouseMove=function(e){return n.onDrag(t.getMousePoint(e))},n.onScroll=function(e){n.currentDoc&&(e.preventDefault(),n.saveContainerPosition())},n.onTouchStart=function(e){n.currentDoc&&(n.isTouching=!0,n.props.onTouchRequest&&!n.props.onTouchRequest(e)||(n.currentDoc.addEventListener("touchmove",n.onTouchMove,{passive:!1}),n.currentDoc.addEventListener("touchend",n.onDragStopped),n.saveContainerPosition(),2===e.touches.length?n.onPinchStart(e):1===e.touches.length&&n.onDragStart(t.getTouchPoint(e.touches[0]))))},n.onTouchMove=function(e){e.preventDefault(),2===e.touches.length?n.onPinchMove(e):1===e.touches.length&&n.onDrag(t.getTouchPoint(e.touches[0]))},n.onGestureStart=function(e){n.currentDoc&&(e.preventDefault(),n.currentDoc.addEventListener("gesturechange",n.onGestureMove),n.currentDoc.addEventListener("gestureend",n.onGestureEnd),n.gestureZoomStart=n.props.zoom,n.gestureRotationStart=n.props.rotation)},n.onGestureMove=function(e){if(e.preventDefault(),!n.isTouching){var r=t.getMousePoint(e),o=n.gestureZoomStart-1+e.scale;if(n.setNewZoom(o,r,{shouldUpdatePosition:!0}),n.props.onRotationChange){var i=n.gestureRotationStart+e.rotation;n.props.onRotationChange(i)}}},n.onGestureEnd=function(e){n.cleanEvents()},n.onDragStart=function(e){var t,r,o=e.x,i=e.y;n.dragStartPosition={x:o,y:i},n.dragStartCrop=cn({},n.props.crop),null===(r=(t=n.props).onInteractionStart)||void 0===r||r.call(t)},n.onDrag=function(e){var t=e.x,r=e.y;n.currentWindow&&(n.rafDragTimeout&&n.currentWindow.cancelAnimationFrame(n.rafDragTimeout),n.rafDragTimeout=n.currentWindow.requestAnimationFrame((function(){if(n.state.cropSize&&void 0!==t&&void 0!==r){var e=t-n.dragStartPosition.x,o=r-n.dragStartPosition.y,i={x:n.dragStartCrop.x+e,y:n.dragStartCrop.y+o},a=n.props.restrictPosition?hn(i,n.mediaSize,n.state.cropSize,n.props.zoom,n.props.rotation):i;n.props.onCropChange(a)}})))},n.onDragStopped=function(){var e,t;n.isTouching=!1,n.cleanEvents(),n.emitCropData(),null===(t=(e=n.props).onInteractionEnd)||void 0===t||t.call(e)},n.onWheel=function(e){if(n.currentWindow&&(!n.props.onWheelRequest||n.props.onWheelRequest(e))){e.preventDefault();var r=t.getMousePoint(e),o=dn()(e).pixelY,i=n.props.zoom-o*n.props.zoomSpeed/200;n.setNewZoom(i,r,{shouldUpdatePosition:!0}),n.state.hasWheelJustStarted||n.setState({hasWheelJustStarted:!0},(function(){var e,t;return null===(t=(e=n.props).onInteractionStart)||void 0===t?void 0:t.call(e)})),n.wheelTimer&&clearTimeout(n.wheelTimer),n.wheelTimer=n.currentWindow.setTimeout((function(){return n.setState({hasWheelJustStarted:!1},(function(){var e,t;return null===(t=(e=n.props).onInteractionEnd)||void 0===t?void 0:t.call(e)}))}),250)}},n.getPointOnContainer=function(e,t){var r=e.x,o=e.y;if(!n.containerRect)throw new Error("The Cropper is not mounted");return{x:n.containerRect.width/2-(r-t.x),y:n.containerRect.height/2-(o-t.y)}},n.getPointOnMedia=function(e){var t=e.x,r=e.y,o=n.props,i=o.crop,a=o.zoom;return{x:(t+i.x)/a,y:(r+i.y)/a}},n.setNewZoom=function(e,t,r){var o=(void 0===r?{}:r).shouldUpdatePosition,i=void 0===o||o;if(n.state.cropSize&&n.props.onZoomChange){var a=xn(e,n.props.minZoom,n.props.maxZoom);if(i){var s=n.getPointOnContainer(t,n.containerPosition),l=n.getPointOnMedia(s),c={x:l.x*a-s.x,y:l.y*a-s.y},u=n.props.restrictPosition?hn(c,n.mediaSize,n.state.cropSize,a,n.props.rotation):c;n.props.onCropChange(u)}n.props.onZoomChange(a)}},n.getCropData=function(){return n.state.cropSize?function(e,t,n,r,o,i,a){void 0===i&&(i=0),void 0===a&&(a=!0);var s=a?gn:vn,l=yn(t.width,t.height,i),c=yn(t.naturalWidth,t.naturalHeight,i),u={x:s(100,((l.width-n.width/o)/2-e.x/o)/l.width*100),y:s(100,((l.height-n.height/o)/2-e.y/o)/l.height*100),width:s(100,n.width/l.width*100/o),height:s(100,n.height/l.height*100/o)},d=Math.round(s(c.width,u.width*c.width/100)),h=Math.round(s(c.height,u.height*c.height/100)),p=c.width>=c.height*r?{width:Math.round(h*r),height:h}:{width:d,height:Math.round(d/r)};return{croppedAreaPercentages:u,croppedAreaPixels:cn(cn({},p),{x:Math.round(s(c.width-p.width,u.x*c.width/100)),y:Math.round(s(c.height-p.height,u.y*c.height/100))})}}(n.props.restrictPosition?hn(n.props.crop,n.mediaSize,n.state.cropSize,n.props.zoom,n.props.rotation):n.props.crop,n.mediaSize,n.state.cropSize,n.getAspect(),n.props.zoom,n.props.rotation,n.props.restrictPosition):null},n.emitCropData=function(){var e=n.getCropData();if(e){var t=e.croppedAreaPercentages,r=e.croppedAreaPixels;n.props.onCropComplete&&n.props.onCropComplete(t,r),n.props.onCropAreaChange&&n.props.onCropAreaChange(t,r)}},n.emitCropAreaChange=function(){var e=n.getCropData();if(e){var t=e.croppedAreaPercentages,r=e.croppedAreaPixels;n.props.onCropAreaChange&&n.props.onCropAreaChange(t,r)}},n.recomputeCropPosition=function(){if(n.state.cropSize){var e=n.props.restrictPosition?hn(n.props.crop,n.mediaSize,n.state.cropSize,n.props.zoom,n.props.rotation):n.props.crop;n.props.onCropChange(e),n.emitCropData()}},n.onKeyDown=function(e){var t,r,o=n.props,i=o.crop,a=o.onCropChange,s=o.keyboardStep,l=o.zoom,c=o.rotation,u=s;if(n.state.cropSize){e.shiftKey&&(u*=.2);var d=cn({},i);switch(e.key){case"ArrowUp":d.y-=u,e.preventDefault();break;case"ArrowDown":d.y+=u,e.preventDefault();break;case"ArrowLeft":d.x-=u,e.preventDefault();break;case"ArrowRight":d.x+=u,e.preventDefault();break;default:return}n.props.restrictPosition&&(d=hn(d,n.mediaSize,n.state.cropSize,l,c)),e.repeat||null===(r=(t=n.props).onInteractionStart)||void 0===r||r.call(t),a(d)}},n.onKeyUp=function(e){var t,r;switch(e.key){case"ArrowUp":case"ArrowDown":case"ArrowLeft":case"ArrowRight":e.preventDefault();break;default:return}n.emitCropData(),null===(r=(t=n.props).onInteractionEnd)||void 0===r||r.call(t)},n}return ln(t,e),t.prototype.componentDidMount=function(){this.currentDoc&&this.currentWindow&&(this.containerRef&&(this.containerRef.ownerDocument&&(this.currentDoc=this.containerRef.ownerDocument),this.currentDoc.defaultView&&(this.currentWindow=this.currentDoc.defaultView),this.initResizeObserver(),"undefined"===typeof window.ResizeObserver&&this.currentWindow.addEventListener("resize",this.computeSizes),this.props.zoomWithScroll&&this.containerRef.addEventListener("wheel",this.onWheel,{passive:!1}),this.containerRef.addEventListener("gesturestart",this.onGestureStart)),this.currentDoc.addEventListener("scroll",this.onScroll),this.props.disableAutomaticStylesInjection||(this.styleRef=this.currentDoc.createElement("style"),this.styleRef.setAttribute("type","text/css"),this.props.nonce&&this.styleRef.setAttribute("nonce",this.props.nonce),this.styleRef.innerHTML=".reactEasyCrop_Container {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n overflow: hidden;\n user-select: none;\n touch-action: none;\n cursor: move;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.reactEasyCrop_Image,\n.reactEasyCrop_Video {\n will-change: transform; /* this improves performances and prevent painting issues on iOS Chrome */\n}\n\n.reactEasyCrop_Contain {\n max-width: 100%;\n max-height: 100%;\n margin: auto;\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n}\n.reactEasyCrop_Cover_Horizontal {\n width: 100%;\n height: auto;\n}\n.reactEasyCrop_Cover_Vertical {\n width: auto;\n height: 100%;\n}\n\n.reactEasyCrop_CropArea {\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n border: 1px solid rgba(255, 255, 255, 0.5);\n box-sizing: border-box;\n box-shadow: 0 0 0 9999em;\n color: rgba(0, 0, 0, 0.5);\n overflow: hidden;\n}\n\n.reactEasyCrop_CropAreaRound {\n border-radius: 50%;\n}\n\n.reactEasyCrop_CropAreaGrid::before {\n content: ' ';\n box-sizing: border-box;\n position: absolute;\n border: 1px solid rgba(255, 255, 255, 0.5);\n top: 0;\n bottom: 0;\n left: 33.33%;\n right: 33.33%;\n border-top: 0;\n border-bottom: 0;\n}\n\n.reactEasyCrop_CropAreaGrid::after {\n content: ' ';\n box-sizing: border-box;\n position: absolute;\n border: 1px solid rgba(255, 255, 255, 0.5);\n top: 33.33%;\n bottom: 33.33%;\n left: 0;\n right: 0;\n border-left: 0;\n border-right: 0;\n}\n",this.currentDoc.head.appendChild(this.styleRef)),this.imageRef.current&&this.imageRef.current.complete&&this.onMediaLoad(),this.props.setImageRef&&this.props.setImageRef(this.imageRef),this.props.setVideoRef&&this.props.setVideoRef(this.videoRef),this.props.setCropperRef&&this.props.setCropperRef(this.cropperRef))},t.prototype.componentWillUnmount=function(){var e,t;this.currentDoc&&this.currentWindow&&("undefined"===typeof window.ResizeObserver&&this.currentWindow.removeEventListener("resize",this.computeSizes),null===(e=this.resizeObserver)||void 0===e||e.disconnect(),this.containerRef&&this.containerRef.removeEventListener("gesturestart",this.preventZoomSafari),this.styleRef&&(null===(t=this.styleRef.parentNode)||void 0===t||t.removeChild(this.styleRef)),this.cleanEvents(),this.props.zoomWithScroll&&this.clearScrollEvent())},t.prototype.componentDidUpdate=function(e){var t,n,r,o,i,a,s,l,c;e.rotation!==this.props.rotation?(this.computeSizes(),this.recomputeCropPosition()):e.aspect!==this.props.aspect||e.objectFit!==this.props.objectFit?this.computeSizes():e.zoom!==this.props.zoom?this.recomputeCropPosition():(null===(t=e.cropSize)||void 0===t?void 0:t.height)!==(null===(n=this.props.cropSize)||void 0===n?void 0:n.height)||(null===(r=e.cropSize)||void 0===r?void 0:r.width)!==(null===(o=this.props.cropSize)||void 0===o?void 0:o.width)?this.computeSizes():(null===(i=e.crop)||void 0===i?void 0:i.x)===(null===(a=this.props.crop)||void 0===a?void 0:a.x)&&(null===(s=e.crop)||void 0===s?void 0:s.y)===(null===(l=this.props.crop)||void 0===l?void 0:l.y)||this.emitCropAreaChange(),e.zoomWithScroll!==this.props.zoomWithScroll&&this.containerRef&&(this.props.zoomWithScroll?this.containerRef.addEventListener("wheel",this.onWheel,{passive:!1}):this.clearScrollEvent()),e.video!==this.props.video&&(null===(c=this.videoRef.current)||void 0===c||c.load());var u=this.getObjectFit();u!==this.state.mediaObjectFit&&this.setState({mediaObjectFit:u},this.computeSizes)},t.prototype.getAspect=function(){var e=this.props,t=e.cropSize,n=e.aspect;return t?t.width/t.height:n},t.prototype.getObjectFit=function(){var e,t,n,r;if("cover"===this.props.objectFit){if((this.imageRef.current||this.videoRef.current)&&this.containerRef){this.containerRect=this.containerRef.getBoundingClientRect();var o=this.containerRect.width/this.containerRect.height;return((null===(e=this.imageRef.current)||void 0===e?void 0:e.naturalWidth)||(null===(t=this.videoRef.current)||void 0===t?void 0:t.videoWidth)||0)/((null===(n=this.imageRef.current)||void 0===n?void 0:n.naturalHeight)||(null===(r=this.videoRef.current)||void 0===r?void 0:r.videoHeight)||0)<o?"horizontal-cover":"vertical-cover"}return"horizontal-cover"}return this.props.objectFit},t.prototype.onPinchStart=function(e){var n=t.getTouchPoint(e.touches[0]),r=t.getTouchPoint(e.touches[1]);this.lastPinchDistance=fn(n,r),this.lastPinchRotation=mn(n,r),this.onDragStart(bn(n,r))},t.prototype.onPinchMove=function(e){var n=this;if(this.currentDoc&&this.currentWindow){var r=t.getTouchPoint(e.touches[0]),o=t.getTouchPoint(e.touches[1]),i=bn(r,o);this.onDrag(i),this.rafPinchTimeout&&this.currentWindow.cancelAnimationFrame(this.rafPinchTimeout),this.rafPinchTimeout=this.currentWindow.requestAnimationFrame((function(){var e=fn(r,o),t=n.props.zoom*(e/n.lastPinchDistance);n.setNewZoom(t,i,{shouldUpdatePosition:!1}),n.lastPinchDistance=e;var a=mn(r,o),s=n.props.rotation+(a-n.lastPinchRotation);n.props.onRotationChange&&n.props.onRotationChange(s),n.lastPinchRotation=a}))}},t.prototype.render=function(){var e,t=this,n=this.props,r=n.image,o=n.video,i=n.mediaProps,a=n.cropperProps,s=n.transform,l=n.crop,c=l.x,u=l.y,d=n.rotation,h=n.zoom,p=n.cropShape,f=n.showGrid,m=n.style,g=m.containerStyle,v=m.cropAreaStyle,b=m.mediaStyle,y=n.classes,x=y.containerClassName,w=y.cropAreaClassName,k=y.mediaClassName,S=null!==(e=this.state.mediaObjectFit)&&void 0!==e?e:this.getObjectFit();return wt.createElement("div",{onMouseDown:this.onMouseDown,onTouchStart:this.onTouchStart,ref:function(e){return t.containerRef=e},"data-testid":"container",style:g,className:wn("reactEasyCrop_Container",x)},r?wt.createElement("img",cn({alt:"",className:wn("reactEasyCrop_Image","contain"===S&&"reactEasyCrop_Contain","horizontal-cover"===S&&"reactEasyCrop_Cover_Horizontal","vertical-cover"===S&&"reactEasyCrop_Cover_Vertical",k)},i,{src:r,ref:this.imageRef,style:cn(cn({},b),{transform:s||"translate(".concat(c,"px, ").concat(u,"px) rotate(").concat(d,"deg) scale(").concat(h,")")}),onLoad:this.onMediaLoad})):o&&wt.createElement("video",cn({autoPlay:!0,playsInline:!0,loop:!0,muted:!0,className:wn("reactEasyCrop_Video","contain"===S&&"reactEasyCrop_Contain","horizontal-cover"===S&&"reactEasyCrop_Cover_Horizontal","vertical-cover"===S&&"reactEasyCrop_Cover_Vertical",k)},i,{ref:this.videoRef,onLoadedMetadata:this.onMediaLoad,style:cn(cn({},b),{transform:s||"translate(".concat(c,"px, ").concat(u,"px) rotate(").concat(d,"deg) scale(").concat(h,")")}),controls:!1}),(Array.isArray(o)?o:[{src:o}]).map((function(e){return wt.createElement("source",cn({key:e.src},e))}))),this.state.cropSize&&wt.createElement("div",cn({ref:this.cropperRef,style:cn(cn({},v),{width:this.state.cropSize.width,height:this.state.cropSize.height}),tabIndex:0,onKeyDown:this.onKeyDown,onKeyUp:this.onKeyUp,"data-testid":"cropper",className:wn("reactEasyCrop_CropArea","round"===p&&"reactEasyCrop_CropAreaRound",f&&"reactEasyCrop_CropAreaGrid",w)},a)))},t.defaultProps={zoom:1,rotation:0,aspect:4/3,maxZoom:3,minZoom:1,cropShape:"rect",objectFit:"contain",showGrid:!0,style:{},classes:{},mediaProps:{},cropperProps:{},zoomSpeed:1,restrictPosition:!0,zoomWithScroll:!0,keyboardStep:1},t.getMousePoint=function(e){return{x:Number(e.clientX),y:Number(e.clientY)}},t.getTouchPoint=function(e){return{x:Number(e.clientX),y:Number(e.clientY)}},t}(wt.Component);const Sn=(e,t,n,r)=>{const o=n/r;let i=e,a=t;return e/t>o?i=Math.round(a*o):a=Math.round(i/o),{width:i,height:a}},_n=Ft.Ay.div`
|
|
190
|
+
`,Jt=e=>{let{itemKey:t,type:n,loading:r,selected:o,all:i,rest:a,mappedDisplayNames:s,collections:l,partialSyncCheckbox:c}=e;const u=(0,wt.useRef)(null);return(0,wt.useEffect)((()=>{const e=u.current;if(!e)return;const n=Object.keys(a).some((e=>l.includes(`${t}>>${e}`)));o||n?n&&(e.indeterminate=!0):(e.previouslySelected=!1,e.indeterminate=!1)}),[o,l,a,t]),(0,Vt.jsxs)("cx-tree-item",{ref:u,"data-value":t,"data-type":n,readonly:r,selected:o,"partial-sync-checkboxes":c,children:[s[t]," ",!!i&&`(${i})`,Object.entries(a).map((e=>{let[o,i]=e;return(0,Vt.jsxs)("cx-tree-item",{"data-value":`${t}>>${o}`,"data-type":n,readonly:r,selected:l.includes(`${t}>>${o}`),children:[s[`${t}>>${o}`]," (",i,")"]},o)}))]})},en=e=>{let{values:t,type:n,displayName:r,collections:o,loading:i=!1}=e;const[a,s]=(0,wt.useState)(1),l=(0,wt.useMemo)((()=>t.reduce(((e,t)=>{let{value:n,count:r}=t;const[o,i]=n.split(">>");return e[o]&&"object"===typeof e[o]||(e[o]?e[o]={all:e[o]}:e[o]={}),i&&(e[o][i]=r),e[o].all=(e[o].all||0)+r,e}),{})),[t]),c=(0,wt.useMemo)((()=>t.reduce(((e,t)=>{let{value:n,displayValue:r}=t;return e[n]=r,e}),{})),[t]),u=(0,wt.useMemo)((()=>Object.keys(l).length>20*a),[l,a]);return 0===t.length?null:(0,Vt.jsxs)("cx-details",{open:!0,className:"filter-details",children:[(0,Vt.jsxs)("cx-space",{slot:"summary","align-items":"center",spacing:"x-small",wrap:"nowrap",children:[(0,Vt.jsx)("span",{children:r}),i&&(0,Vt.jsx)("cx-spinner",{})]}),(0,Vt.jsx)("cx-space",{direction:"vertical",children:(0,Vt.jsxs)("cx-tree",{selection:"multiple","label-select-single":!0,"data-facet":n,children:[Object.entries(l).slice(0,20*a).map((e=>{let[t,r]=e;if("object"===typeof r){const e=o.includes(t),{all:a,...s}=r,l=Object.values(s).reduce(((e,t)=>e+t),0);return(0,Vt.jsx)(Jt,{itemKey:t,type:n,loading:i,selected:e,all:a,rest:s,mappedDisplayNames:c,collections:o,partialSyncCheckbox:l<a||void 0},t)}return(0,Vt.jsxs)("cx-tree-item",{"data-value":t,"data-type":n,readonly:i,selected:o.includes(t),children:[c[t]," (",r,")"]},t)})),u&&(0,Vt.jsx)(qt,{loadMore:()=>s((e=>e+1)),isLoading:i,disabled:i})]})})]})},tn=e=>{let{allowSorting:t,availableFacets:n,currentCount:r,loading:o,facets:i,isMobile:a,isSeeThrough:s,searchValue:l,selectedFacets:c,sortDirection:u,sortOrder:d,sortOrders:h,totalCount:p,view:f,onSearchChange:m,onSettingChange:g}=e;const[v,b]=(0,wt.useState)(!1),[y,x]=(0,wt.useState)({type:void 0,value:void 0}),w=(0,wt.useRef)(null),k=(0,wt.useRef)(null),S=(0,wt.useRef)(null),_=(0,wt.useRef)(null);(0,wt.useEffect)((()=>{Promise.all([customElements.whenDefined("cx-input"),customElements.whenDefined("cx-checkbox"),customElements.whenDefined("cx-dropdown")]).then((()=>b(!0)))}),[]),(0,wt.useEffect)((()=>{const e=e=>{const t=e.target.value;l!==t&&m(t)},t=w.current;return null===t||void 0===t||t.addEventListener("cx-change",e),()=>{null===t||void 0===t||t.removeEventListener("cx-change",e)}}),[v,l,m]),(0,wt.useEffect)((()=>{const e=e=>{const t=e.detail.item.value;"see-thru"===t?g("isSeeThrough",!s):g("view",null!==t&&void 0!==t?t:Xt.gf.Medium)},t=S.current;return null===t||void 0===t||t.addEventListener("cx-select",e),()=>{null===t||void 0===t||t.removeEventListener("cx-select",e)}}),[v,s,g]),(0,wt.useEffect)((()=>{const e=e=>{const t=e.target,n=t.dataset.type,r=t.dataset.value;if(!r||!n)return;const o={...c};o[n]&&(o[n]=o[n].filter((e=>e!==r))),g("filter",o)},t=e=>{const t=e.target.dataset.facet;if(!t)return;x({type:"filter",value:t});const n=e.detail.selection.reduce(((e,t)=>{const n=t.dataset.type,r=t.dataset.value;return r&&n?(e[n]||(e[n]=[]),e[n].push(r),e):e}),{...c,[t]:[]});g("filter",n)},n=e=>{const t=e.detail.item.dataset.type,n=e.detail.item.value;n&&("sort-direction"===t?(x({type:"sortDirection",value:n}),g("sortDirection",n)):"sort-order"===t&&(x({type:"sortOrder",value:n}),g("sortOrder",n)))},r=k.current,o=_.current;return null===r||void 0===r||r.addEventListener("cx-selection-change",t),null===r||void 0===r||r.addEventListener("cx-remove",e),null===o||void 0===o||o.addEventListener("cx-select",n),()=>{null===r||void 0===r||r.removeEventListener("cx-selection-change",t),null===r||void 0===r||r.removeEventListener("cx-remove",e),null===o||void 0===o||o.removeEventListener("cx-select",n)}}),[v,c,g]);const E=(0,wt.useMemo)((()=>Zt.find((e=>e.value===f))),[f]),C=(0,wt.useMemo)((()=>Object.values(c).reduce(((e,t)=>e+t.length),0)),[c]),A=(0,wt.useMemo)((()=>{var e;return null!==(e=null===i||void 0===i?void 0:i.reduce(((e,t)=>{const n=t.values.reduce(((e,t)=>{let{value:n,displayValue:r}=t;return e[n]=r,e}),{});return{...e,[t.facetDetails.facetFieldName]:n}}),{}))&&void 0!==e?e:{}}),[i]),T=(0,wt.useCallback)((()=>(0,Vt.jsxs)("cx-details",{"data-cy":"applied-filters",open:!0,className:("filter-details "+(0===C?"filter-details--empty":"")).trim(),children:[(0,Vt.jsxs)("cx-space",{slot:"summary","align-items":"center",spacing:"x-small",wrap:"nowrap",children:[(0,Vt.jsxs)("span",{children:["Applied filters"," ",C>0?` (${C})`:""]}),o&&"filter"===y.type&&(0,Vt.jsx)("cx-spinner",{})]}),(0,Vt.jsx)("cx-space",{direction:"horizontal",spacing:"small",children:Object.entries(c).map((e=>{let[t,n]=e;return n&&0!==n.length?n.filter((e=>A[t][e])).map((e=>(0,Vt.jsxs)("cx-tag",{removable:!0,"data-value":e,"data-type":t,size:"small",children:[A[t][e],(0,Vt.jsx)("cx-icon",{slot:"suffix",name:"close"})]},e))):null}))}),C>0&&(0,Vt.jsxs)("cx-button",{variant:"text",className:"clear-all-button",onClick:()=>{g("filter",{mediaTypes:[],visibilityClasses:[],statuses:[],extensions:[]})},children:["Clear all",(0,Vt.jsx)("cx-icon",{slot:"prefix",name:"clear",label:"Clear"})]})]})),[C,o,A,y.type,g,c]);return(0,Vt.jsxs)(Yt,{children:[(0,Vt.jsxs)("cx-space",{"align-items":"center",spacing:"x-small",wrap:"nowrap",style:{flex:1},children:[(0,Vt.jsx)("cx-input",{ref:w,value:l,placeholder:"Search...",clearable:!0,className:"search-input",children:(0,Vt.jsx)("cx-icon",{name:"search",slot:"prefix",className:"icon--large"})}),(0,Vt.jsxs)("cx-dropdown",{ref:k,children:[(0,Vt.jsx)("div",{slot:"trigger",children:(0,Vt.jsx)("cx-tooltip",{content:"Filter",children:(0,Vt.jsx)("cx-icon-button",{name:"filter_alt",label:"Filter",outline:!0,"data-cy":"filter-button",children:C>0&&(0,Vt.jsx)("cx-badge",{slot:"badge",pill:!0,size:"small",children:C})})})}),T(),n.length>0&&(0,Vt.jsx)("cx-space",{direction:"vertical",className:"filter-details",children:n.map((e=>{const t=null===i||void 0===i?void 0:i.find((t=>t.facetDetails.facetFieldName===e.facetFieldName));return t?(0,Vt.jsx)(en,{values:t.values,displayName:t.facetDetails.displayName,type:t.facetDetails.facetFieldName,collections:c[t.facetDetails.facetFieldName]||[]},t.facetDetails.facetFieldName):null}))})]})]}),(0,Vt.jsxs)("cx-space",{"align-items":"center",spacing:"x-small",wrap:"nowrap",style:{marginLeft:"auto"},children:[(0,Vt.jsx)("cx-line-clamp",{lines:1,children:(0,Vt.jsxs)("cx-typography",{variant:"body3",children:[r," of ",p]})}),(0,Vt.jsxs)("cx-dropdown",{ref:S,"auto-width-factor":.6,"stay-open-on-select":!0,placement:"bottom-end",skidding:a?40:0,children:[(0,Vt.jsx)("div",{slot:"trigger",children:(0,Vt.jsx)("cx-tooltip",{content:"View",children:(0,Vt.jsx)("cx-icon-button",{name:"dashboard",label:"View",outline:!0,"data-cy":"view-button"})})}),(0,Vt.jsxs)("cx-menu",{children:[(0,Vt.jsx)("cx-menu-label",{children:"View"}),(0,Vt.jsxs)("cx-menu-item",{class:E?"selected":"",children:["Grid (",null===E||void 0===E?void 0:E.label,")",(0,Vt.jsx)("cx-menu",{slot:"submenu",children:Zt.map((e=>(0,Vt.jsxs)("cx-menu-item",{value:e.value.toString(),class:e.value===f?"selected":"",children:[e.label,(0,Vt.jsx)("cx-icon",{slot:"prefix",name:f===e.value?"check":""})]},e.value)))}),(0,Vt.jsx)("cx-icon",{slot:"prefix",name:"grid_view"})]}),(0,Vt.jsx)("cx-divider",{}),(0,Vt.jsxs)("cx-menu-item",{value:"see-thru",className:"menu-item--switch",children:[(0,Vt.jsx)("cx-line-clamp",{lines:1,children:"See-thru"}),(0,Vt.jsx)("cx-switch",{checked:s,onClick:e=>e.preventDefault()})]})]})]}),(0,Vt.jsxs)("cx-dropdown",{ref:_,"auto-width-factor":.5,"stay-open-on-select":!0,children:[(0,Vt.jsx)("div",{slot:"trigger",children:(0,Vt.jsx)("cx-tooltip",{content:"Sort",children:(0,Vt.jsx)("cx-icon-button",{name:"sort",label:"Sort",outline:!0,"data-cy":"sort-button"})})}),(0,Vt.jsxs)("cx-menu",{children:[(h?Gt.map((e=>{var t,n;const r=null===(t=h[d])||void 0===t||null===(n=t.find((t=>t.sortDirection.toLowerCase()===e.value.toLowerCase())))||void 0===n?void 0:n.sortDirectionDisplayName;return{...e,label:null!==r&&void 0!==r?r:e.value}})):Gt).map((e=>(0,Vt.jsxs)("cx-menu-item",{"data-type":"sort-direction",disabled:!t,value:e.value,class:t&&u===e.value?"selected":"",children:[e.label.replace(/\b\w/g,(e=>e.toUpperCase())),o&&"sortDirection"===y.type&&y.value===e.value?(0,Vt.jsx)("cx-spinner",{slot:"prefix"}):(0,Vt.jsx)(e.icon,{})]},e.value))),(0,Vt.jsx)("cx-divider",{}),Object.keys(null!==h&&void 0!==h?h:{}).map((e=>(0,Vt.jsxs)("cx-menu-item",{"data-type":"sort-order",value:e,class:d===e?"selected":"",children:[e.replace(/\b\w/g,(e=>e.toUpperCase())),o&&"sortOrder"===y.type&&y.value===e?(0,Vt.jsx)("cx-spinner",{slot:"prefix"}):(0,Vt.jsx)("cx-icon",{slot:"prefix",name:d===e?"check":""})]},e)))]})]})]})]})};var nn=n(7840),rn=n(8743);const on=(e,t)=>{const n=(e,t)=>0===t?e:n(t,e%t),r=Math.round(e),o=Math.round(t),i=n(r,o);return{width:r/i,height:o/i}},an=(e,t,n)=>{const r=n*Math.PI/180;if(n%90===0)return{width:n%180===0?e:t,height:n%180===0?t:e};const o=Math.abs(Math.cos(r)),i=Math.abs(Math.sin(r)),a=e*o+t*i,s=e*i+t*o;return{width:Math.round(a),height:Math.round(s)}};var sn=function(e,t){return sn=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])},sn(e,t)};function ln(e,t){if("function"!==typeof t&&null!==t)throw new TypeError("Class extends value "+String(t)+" is not a constructor or null");function n(){this.constructor=e}sn(e,t),e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)}var cn=function(){return cn=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var o in t=arguments[n])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e},cn.apply(this,arguments)};Object.create;Object.create;"function"===typeof SuppressedError&&SuppressedError;var un=n(1185),dn=n.n(un);function hn(e,t,n,r,o){void 0===o&&(o=0);var i=yn(t.width,t.height,o),a=i.width,s=i.height;return{x:pn(e.x,a,n.width,r),y:pn(e.y,s,n.height,r)}}function pn(e,t,n,r){var o=t*r/2-n/2;return xn(e,-o,o)}function fn(e,t){return Math.sqrt(Math.pow(e.y-t.y,2)+Math.pow(e.x-t.x,2))}function mn(e,t){return 180*Math.atan2(t.y-e.y,t.x-e.x)/Math.PI}function gn(e,t){return Math.min(e,Math.max(0,t))}function vn(e,t){return t}function bn(e,t){return{x:(t.x+e.x)/2,y:(t.y+e.y)/2}}function yn(e,t,n){var r=n*Math.PI/180;return{width:Math.abs(Math.cos(r)*e)+Math.abs(Math.sin(r)*t),height:Math.abs(Math.sin(r)*e)+Math.abs(Math.cos(r)*t)}}function xn(e,t,n){return Math.min(Math.max(e,t),n)}function wn(){for(var e=[],t=0;t<arguments.length;t++)e[t]=arguments[t];return e.filter((function(e){return"string"===typeof e&&e.length>0})).join(" ").trim()}var kn=function(e){function t(){var n=null!==e&&e.apply(this,arguments)||this;return n.cropperRef=wt.createRef(),n.imageRef=wt.createRef(),n.videoRef=wt.createRef(),n.containerPosition={x:0,y:0},n.containerRef=null,n.styleRef=null,n.containerRect=null,n.mediaSize={width:0,height:0,naturalWidth:0,naturalHeight:0},n.dragStartPosition={x:0,y:0},n.dragStartCrop={x:0,y:0},n.gestureZoomStart=0,n.gestureRotationStart=0,n.isTouching=!1,n.lastPinchDistance=0,n.lastPinchRotation=0,n.rafDragTimeout=null,n.rafPinchTimeout=null,n.wheelTimer=null,n.currentDoc="undefined"!==typeof document?document:null,n.currentWindow="undefined"!==typeof window?window:null,n.resizeObserver=null,n.state={cropSize:null,hasWheelJustStarted:!1,mediaObjectFit:void 0},n.initResizeObserver=function(){if("undefined"!==typeof window.ResizeObserver&&n.containerRef){var e=!0;n.resizeObserver=new window.ResizeObserver((function(t){e?e=!1:n.computeSizes()})),n.resizeObserver.observe(n.containerRef)}},n.preventZoomSafari=function(e){return e.preventDefault()},n.cleanEvents=function(){n.currentDoc&&(n.currentDoc.removeEventListener("mousemove",n.onMouseMove),n.currentDoc.removeEventListener("mouseup",n.onDragStopped),n.currentDoc.removeEventListener("touchmove",n.onTouchMove),n.currentDoc.removeEventListener("touchend",n.onDragStopped),n.currentDoc.removeEventListener("gesturemove",n.onGestureMove),n.currentDoc.removeEventListener("gestureend",n.onGestureEnd),n.currentDoc.removeEventListener("scroll",n.onScroll))},n.clearScrollEvent=function(){n.containerRef&&n.containerRef.removeEventListener("wheel",n.onWheel),n.wheelTimer&&clearTimeout(n.wheelTimer)},n.onMediaLoad=function(){var e=n.computeSizes();e&&(n.emitCropData(),n.setInitialCrop(e)),n.props.onMediaLoaded&&n.props.onMediaLoaded(n.mediaSize)},n.setInitialCrop=function(e){if(n.props.initialCroppedAreaPercentages){var t=function(e,t,n,r,o,i){var a=yn(t.width,t.height,n),s=xn(r.width/a.width*(100/e.width),o,i);return{crop:{x:s*a.width/2-r.width/2-a.width*s*(e.x/100),y:s*a.height/2-r.height/2-a.height*s*(e.y/100)},zoom:s}}(n.props.initialCroppedAreaPercentages,n.mediaSize,n.props.rotation,e,n.props.minZoom,n.props.maxZoom),r=t.crop,o=t.zoom;n.props.onCropChange(r),n.props.onZoomChange&&n.props.onZoomChange(o)}else if(n.props.initialCroppedAreaPixels){var i=function(e,t,n,r,o,i){void 0===n&&(n=0);var a=yn(t.naturalWidth,t.naturalHeight,n),s=xn(function(e,t,n){var r=function(e){return e.width>e.height?e.width/e.naturalWidth:e.height/e.naturalHeight}(t);return n.height>n.width?n.height/(e.height*r):n.width/(e.width*r)}(e,t,r),o,i),l=r.height>r.width?r.height/e.height:r.width/e.width;return{crop:{x:((a.width-e.width)/2-e.x)*l,y:((a.height-e.height)/2-e.y)*l},zoom:s}}(n.props.initialCroppedAreaPixels,n.mediaSize,n.props.rotation,e,n.props.minZoom,n.props.maxZoom);r=i.crop,o=i.zoom;n.props.onCropChange(r),n.props.onZoomChange&&n.props.onZoomChange(o)}},n.computeSizes=function(){var e,t,r,o,i,a,s=n.imageRef.current||n.videoRef.current;if(s&&n.containerRef){n.containerRect=n.containerRef.getBoundingClientRect(),n.saveContainerPosition();var l=n.containerRect.width/n.containerRect.height,c=(null===(e=n.imageRef.current)||void 0===e?void 0:e.naturalWidth)||(null===(t=n.videoRef.current)||void 0===t?void 0:t.videoWidth)||0,u=(null===(r=n.imageRef.current)||void 0===r?void 0:r.naturalHeight)||(null===(o=n.videoRef.current)||void 0===o?void 0:o.videoHeight)||0,d=c/u,h=void 0;if(s.offsetWidth<c||s.offsetHeight<u)switch(n.state.mediaObjectFit){default:case"contain":h=l>d?{width:n.containerRect.height*d,height:n.containerRect.height}:{width:n.containerRect.width,height:n.containerRect.width/d};break;case"horizontal-cover":h={width:n.containerRect.width,height:n.containerRect.width/d};break;case"vertical-cover":h={width:n.containerRect.height*d,height:n.containerRect.height}}else h={width:s.offsetWidth,height:s.offsetHeight};n.mediaSize=cn(cn({},h),{naturalWidth:c,naturalHeight:u}),n.props.setMediaSize&&n.props.setMediaSize(n.mediaSize);var p=n.props.cropSize?n.props.cropSize:function(e,t,n,r,o,i){void 0===i&&(i=0);var a=yn(e,t,i),s=a.width,l=a.height,c=Math.min(s,n),u=Math.min(l,r);return c>u*o?{width:u*o,height:u}:{width:c,height:c/o}}(n.mediaSize.width,n.mediaSize.height,n.containerRect.width,n.containerRect.height,n.props.aspect,n.props.rotation);return(null===(i=n.state.cropSize)||void 0===i?void 0:i.height)===p.height&&(null===(a=n.state.cropSize)||void 0===a?void 0:a.width)===p.width||n.props.onCropSizeChange&&n.props.onCropSizeChange(p),n.setState({cropSize:p},n.recomputeCropPosition),n.props.setCropSize&&n.props.setCropSize(p),p}},n.saveContainerPosition=function(){if(n.containerRef){var e=n.containerRef.getBoundingClientRect();n.containerPosition={x:e.left,y:e.top}}},n.onMouseDown=function(e){n.currentDoc&&(e.preventDefault(),n.currentDoc.addEventListener("mousemove",n.onMouseMove),n.currentDoc.addEventListener("mouseup",n.onDragStopped),n.saveContainerPosition(),n.onDragStart(t.getMousePoint(e)))},n.onMouseMove=function(e){return n.onDrag(t.getMousePoint(e))},n.onScroll=function(e){n.currentDoc&&(e.preventDefault(),n.saveContainerPosition())},n.onTouchStart=function(e){n.currentDoc&&(n.isTouching=!0,n.props.onTouchRequest&&!n.props.onTouchRequest(e)||(n.currentDoc.addEventListener("touchmove",n.onTouchMove,{passive:!1}),n.currentDoc.addEventListener("touchend",n.onDragStopped),n.saveContainerPosition(),2===e.touches.length?n.onPinchStart(e):1===e.touches.length&&n.onDragStart(t.getTouchPoint(e.touches[0]))))},n.onTouchMove=function(e){e.preventDefault(),2===e.touches.length?n.onPinchMove(e):1===e.touches.length&&n.onDrag(t.getTouchPoint(e.touches[0]))},n.onGestureStart=function(e){n.currentDoc&&(e.preventDefault(),n.currentDoc.addEventListener("gesturechange",n.onGestureMove),n.currentDoc.addEventListener("gestureend",n.onGestureEnd),n.gestureZoomStart=n.props.zoom,n.gestureRotationStart=n.props.rotation)},n.onGestureMove=function(e){if(e.preventDefault(),!n.isTouching){var r=t.getMousePoint(e),o=n.gestureZoomStart-1+e.scale;if(n.setNewZoom(o,r,{shouldUpdatePosition:!0}),n.props.onRotationChange){var i=n.gestureRotationStart+e.rotation;n.props.onRotationChange(i)}}},n.onGestureEnd=function(e){n.cleanEvents()},n.onDragStart=function(e){var t,r,o=e.x,i=e.y;n.dragStartPosition={x:o,y:i},n.dragStartCrop=cn({},n.props.crop),null===(r=(t=n.props).onInteractionStart)||void 0===r||r.call(t)},n.onDrag=function(e){var t=e.x,r=e.y;n.currentWindow&&(n.rafDragTimeout&&n.currentWindow.cancelAnimationFrame(n.rafDragTimeout),n.rafDragTimeout=n.currentWindow.requestAnimationFrame((function(){if(n.state.cropSize&&void 0!==t&&void 0!==r){var e=t-n.dragStartPosition.x,o=r-n.dragStartPosition.y,i={x:n.dragStartCrop.x+e,y:n.dragStartCrop.y+o},a=n.props.restrictPosition?hn(i,n.mediaSize,n.state.cropSize,n.props.zoom,n.props.rotation):i;n.props.onCropChange(a)}})))},n.onDragStopped=function(){var e,t;n.isTouching=!1,n.cleanEvents(),n.emitCropData(),null===(t=(e=n.props).onInteractionEnd)||void 0===t||t.call(e)},n.onWheel=function(e){if(n.currentWindow&&(!n.props.onWheelRequest||n.props.onWheelRequest(e))){e.preventDefault();var r=t.getMousePoint(e),o=dn()(e).pixelY,i=n.props.zoom-o*n.props.zoomSpeed/200;n.setNewZoom(i,r,{shouldUpdatePosition:!0}),n.state.hasWheelJustStarted||n.setState({hasWheelJustStarted:!0},(function(){var e,t;return null===(t=(e=n.props).onInteractionStart)||void 0===t?void 0:t.call(e)})),n.wheelTimer&&clearTimeout(n.wheelTimer),n.wheelTimer=n.currentWindow.setTimeout((function(){return n.setState({hasWheelJustStarted:!1},(function(){var e,t;return null===(t=(e=n.props).onInteractionEnd)||void 0===t?void 0:t.call(e)}))}),250)}},n.getPointOnContainer=function(e,t){var r=e.x,o=e.y;if(!n.containerRect)throw new Error("The Cropper is not mounted");return{x:n.containerRect.width/2-(r-t.x),y:n.containerRect.height/2-(o-t.y)}},n.getPointOnMedia=function(e){var t=e.x,r=e.y,o=n.props,i=o.crop,a=o.zoom;return{x:(t+i.x)/a,y:(r+i.y)/a}},n.setNewZoom=function(e,t,r){var o=(void 0===r?{}:r).shouldUpdatePosition,i=void 0===o||o;if(n.state.cropSize&&n.props.onZoomChange){var a=xn(e,n.props.minZoom,n.props.maxZoom);if(i){var s=n.getPointOnContainer(t,n.containerPosition),l=n.getPointOnMedia(s),c={x:l.x*a-s.x,y:l.y*a-s.y},u=n.props.restrictPosition?hn(c,n.mediaSize,n.state.cropSize,a,n.props.rotation):c;n.props.onCropChange(u)}n.props.onZoomChange(a)}},n.getCropData=function(){return n.state.cropSize?function(e,t,n,r,o,i,a){void 0===i&&(i=0),void 0===a&&(a=!0);var s=a?gn:vn,l=yn(t.width,t.height,i),c=yn(t.naturalWidth,t.naturalHeight,i),u={x:s(100,((l.width-n.width/o)/2-e.x/o)/l.width*100),y:s(100,((l.height-n.height/o)/2-e.y/o)/l.height*100),width:s(100,n.width/l.width*100/o),height:s(100,n.height/l.height*100/o)},d=Math.round(s(c.width,u.width*c.width/100)),h=Math.round(s(c.height,u.height*c.height/100)),p=c.width>=c.height*r?{width:Math.round(h*r),height:h}:{width:d,height:Math.round(d/r)};return{croppedAreaPercentages:u,croppedAreaPixels:cn(cn({},p),{x:Math.round(s(c.width-p.width,u.x*c.width/100)),y:Math.round(s(c.height-p.height,u.y*c.height/100))})}}(n.props.restrictPosition?hn(n.props.crop,n.mediaSize,n.state.cropSize,n.props.zoom,n.props.rotation):n.props.crop,n.mediaSize,n.state.cropSize,n.getAspect(),n.props.zoom,n.props.rotation,n.props.restrictPosition):null},n.emitCropData=function(){var e=n.getCropData();if(e){var t=e.croppedAreaPercentages,r=e.croppedAreaPixels;n.props.onCropComplete&&n.props.onCropComplete(t,r),n.props.onCropAreaChange&&n.props.onCropAreaChange(t,r)}},n.emitCropAreaChange=function(){var e=n.getCropData();if(e){var t=e.croppedAreaPercentages,r=e.croppedAreaPixels;n.props.onCropAreaChange&&n.props.onCropAreaChange(t,r)}},n.recomputeCropPosition=function(){if(n.state.cropSize){var e=n.props.restrictPosition?hn(n.props.crop,n.mediaSize,n.state.cropSize,n.props.zoom,n.props.rotation):n.props.crop;n.props.onCropChange(e),n.emitCropData()}},n.onKeyDown=function(e){var t,r,o=n.props,i=o.crop,a=o.onCropChange,s=o.keyboardStep,l=o.zoom,c=o.rotation,u=s;if(n.state.cropSize){e.shiftKey&&(u*=.2);var d=cn({},i);switch(e.key){case"ArrowUp":d.y-=u,e.preventDefault();break;case"ArrowDown":d.y+=u,e.preventDefault();break;case"ArrowLeft":d.x-=u,e.preventDefault();break;case"ArrowRight":d.x+=u,e.preventDefault();break;default:return}n.props.restrictPosition&&(d=hn(d,n.mediaSize,n.state.cropSize,l,c)),e.repeat||null===(r=(t=n.props).onInteractionStart)||void 0===r||r.call(t),a(d)}},n.onKeyUp=function(e){var t,r;switch(e.key){case"ArrowUp":case"ArrowDown":case"ArrowLeft":case"ArrowRight":e.preventDefault();break;default:return}n.emitCropData(),null===(r=(t=n.props).onInteractionEnd)||void 0===r||r.call(t)},n}return ln(t,e),t.prototype.componentDidMount=function(){this.currentDoc&&this.currentWindow&&(this.containerRef&&(this.containerRef.ownerDocument&&(this.currentDoc=this.containerRef.ownerDocument),this.currentDoc.defaultView&&(this.currentWindow=this.currentDoc.defaultView),this.initResizeObserver(),"undefined"===typeof window.ResizeObserver&&this.currentWindow.addEventListener("resize",this.computeSizes),this.props.zoomWithScroll&&this.containerRef.addEventListener("wheel",this.onWheel,{passive:!1}),this.containerRef.addEventListener("gesturestart",this.onGestureStart)),this.currentDoc.addEventListener("scroll",this.onScroll),this.props.disableAutomaticStylesInjection||(this.styleRef=this.currentDoc.createElement("style"),this.styleRef.setAttribute("type","text/css"),this.props.nonce&&this.styleRef.setAttribute("nonce",this.props.nonce),this.styleRef.innerHTML=".reactEasyCrop_Container {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n overflow: hidden;\n user-select: none;\n touch-action: none;\n cursor: move;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.reactEasyCrop_Image,\n.reactEasyCrop_Video {\n will-change: transform; /* this improves performances and prevent painting issues on iOS Chrome */\n}\n\n.reactEasyCrop_Contain {\n max-width: 100%;\n max-height: 100%;\n margin: auto;\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n}\n.reactEasyCrop_Cover_Horizontal {\n width: 100%;\n height: auto;\n}\n.reactEasyCrop_Cover_Vertical {\n width: auto;\n height: 100%;\n}\n\n.reactEasyCrop_CropArea {\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n border: 1px solid rgba(255, 255, 255, 0.5);\n box-sizing: border-box;\n box-shadow: 0 0 0 9999em;\n color: rgba(0, 0, 0, 0.5);\n overflow: hidden;\n}\n\n.reactEasyCrop_CropAreaRound {\n border-radius: 50%;\n}\n\n.reactEasyCrop_CropAreaGrid::before {\n content: ' ';\n box-sizing: border-box;\n position: absolute;\n border: 1px solid rgba(255, 255, 255, 0.5);\n top: 0;\n bottom: 0;\n left: 33.33%;\n right: 33.33%;\n border-top: 0;\n border-bottom: 0;\n}\n\n.reactEasyCrop_CropAreaGrid::after {\n content: ' ';\n box-sizing: border-box;\n position: absolute;\n border: 1px solid rgba(255, 255, 255, 0.5);\n top: 33.33%;\n bottom: 33.33%;\n left: 0;\n right: 0;\n border-left: 0;\n border-right: 0;\n}\n",this.currentDoc.head.appendChild(this.styleRef)),this.imageRef.current&&this.imageRef.current.complete&&this.onMediaLoad(),this.props.setImageRef&&this.props.setImageRef(this.imageRef),this.props.setVideoRef&&this.props.setVideoRef(this.videoRef),this.props.setCropperRef&&this.props.setCropperRef(this.cropperRef))},t.prototype.componentWillUnmount=function(){var e,t;this.currentDoc&&this.currentWindow&&("undefined"===typeof window.ResizeObserver&&this.currentWindow.removeEventListener("resize",this.computeSizes),null===(e=this.resizeObserver)||void 0===e||e.disconnect(),this.containerRef&&this.containerRef.removeEventListener("gesturestart",this.preventZoomSafari),this.styleRef&&(null===(t=this.styleRef.parentNode)||void 0===t||t.removeChild(this.styleRef)),this.cleanEvents(),this.props.zoomWithScroll&&this.clearScrollEvent())},t.prototype.componentDidUpdate=function(e){var t,n,r,o,i,a,s,l,c;e.rotation!==this.props.rotation?(this.computeSizes(),this.recomputeCropPosition()):e.aspect!==this.props.aspect||e.objectFit!==this.props.objectFit?this.computeSizes():e.zoom!==this.props.zoom?this.recomputeCropPosition():(null===(t=e.cropSize)||void 0===t?void 0:t.height)!==(null===(n=this.props.cropSize)||void 0===n?void 0:n.height)||(null===(r=e.cropSize)||void 0===r?void 0:r.width)!==(null===(o=this.props.cropSize)||void 0===o?void 0:o.width)?this.computeSizes():(null===(i=e.crop)||void 0===i?void 0:i.x)===(null===(a=this.props.crop)||void 0===a?void 0:a.x)&&(null===(s=e.crop)||void 0===s?void 0:s.y)===(null===(l=this.props.crop)||void 0===l?void 0:l.y)||this.emitCropAreaChange(),e.zoomWithScroll!==this.props.zoomWithScroll&&this.containerRef&&(this.props.zoomWithScroll?this.containerRef.addEventListener("wheel",this.onWheel,{passive:!1}):this.clearScrollEvent()),e.video!==this.props.video&&(null===(c=this.videoRef.current)||void 0===c||c.load());var u=this.getObjectFit();u!==this.state.mediaObjectFit&&this.setState({mediaObjectFit:u},this.computeSizes)},t.prototype.getAspect=function(){var e=this.props,t=e.cropSize,n=e.aspect;return t?t.width/t.height:n},t.prototype.getObjectFit=function(){var e,t,n,r;if("cover"===this.props.objectFit){if((this.imageRef.current||this.videoRef.current)&&this.containerRef){this.containerRect=this.containerRef.getBoundingClientRect();var o=this.containerRect.width/this.containerRect.height;return((null===(e=this.imageRef.current)||void 0===e?void 0:e.naturalWidth)||(null===(t=this.videoRef.current)||void 0===t?void 0:t.videoWidth)||0)/((null===(n=this.imageRef.current)||void 0===n?void 0:n.naturalHeight)||(null===(r=this.videoRef.current)||void 0===r?void 0:r.videoHeight)||0)<o?"horizontal-cover":"vertical-cover"}return"horizontal-cover"}return this.props.objectFit},t.prototype.onPinchStart=function(e){var n=t.getTouchPoint(e.touches[0]),r=t.getTouchPoint(e.touches[1]);this.lastPinchDistance=fn(n,r),this.lastPinchRotation=mn(n,r),this.onDragStart(bn(n,r))},t.prototype.onPinchMove=function(e){var n=this;if(this.currentDoc&&this.currentWindow){var r=t.getTouchPoint(e.touches[0]),o=t.getTouchPoint(e.touches[1]),i=bn(r,o);this.onDrag(i),this.rafPinchTimeout&&this.currentWindow.cancelAnimationFrame(this.rafPinchTimeout),this.rafPinchTimeout=this.currentWindow.requestAnimationFrame((function(){var e=fn(r,o),t=n.props.zoom*(e/n.lastPinchDistance);n.setNewZoom(t,i,{shouldUpdatePosition:!1}),n.lastPinchDistance=e;var a=mn(r,o),s=n.props.rotation+(a-n.lastPinchRotation);n.props.onRotationChange&&n.props.onRotationChange(s),n.lastPinchRotation=a}))}},t.prototype.render=function(){var e,t=this,n=this.props,r=n.image,o=n.video,i=n.mediaProps,a=n.cropperProps,s=n.transform,l=n.crop,c=l.x,u=l.y,d=n.rotation,h=n.zoom,p=n.cropShape,f=n.showGrid,m=n.style,g=m.containerStyle,v=m.cropAreaStyle,b=m.mediaStyle,y=n.classes,x=y.containerClassName,w=y.cropAreaClassName,k=y.mediaClassName,S=null!==(e=this.state.mediaObjectFit)&&void 0!==e?e:this.getObjectFit();return wt.createElement("div",{onMouseDown:this.onMouseDown,onTouchStart:this.onTouchStart,ref:function(e){return t.containerRef=e},"data-testid":"container",style:g,className:wn("reactEasyCrop_Container",x)},r?wt.createElement("img",cn({alt:"",className:wn("reactEasyCrop_Image","contain"===S&&"reactEasyCrop_Contain","horizontal-cover"===S&&"reactEasyCrop_Cover_Horizontal","vertical-cover"===S&&"reactEasyCrop_Cover_Vertical",k)},i,{src:r,ref:this.imageRef,style:cn(cn({},b),{transform:s||"translate(".concat(c,"px, ").concat(u,"px) rotate(").concat(d,"deg) scale(").concat(h,")")}),onLoad:this.onMediaLoad})):o&&wt.createElement("video",cn({autoPlay:!0,playsInline:!0,loop:!0,muted:!0,className:wn("reactEasyCrop_Video","contain"===S&&"reactEasyCrop_Contain","horizontal-cover"===S&&"reactEasyCrop_Cover_Horizontal","vertical-cover"===S&&"reactEasyCrop_Cover_Vertical",k)},i,{ref:this.videoRef,onLoadedMetadata:this.onMediaLoad,style:cn(cn({},b),{transform:s||"translate(".concat(c,"px, ").concat(u,"px) rotate(").concat(d,"deg) scale(").concat(h,")")}),controls:!1}),(Array.isArray(o)?o:[{src:o}]).map((function(e){return wt.createElement("source",cn({key:e.src},e))}))),this.state.cropSize&&wt.createElement("div",cn({ref:this.cropperRef,style:cn(cn({},v),{width:this.state.cropSize.width,height:this.state.cropSize.height}),tabIndex:0,onKeyDown:this.onKeyDown,onKeyUp:this.onKeyUp,"data-testid":"cropper",className:wn("reactEasyCrop_CropArea","round"===p&&"reactEasyCrop_CropAreaRound",f&&"reactEasyCrop_CropAreaGrid",w)},a)))},t.defaultProps={zoom:1,rotation:0,aspect:4/3,maxZoom:3,minZoom:1,cropShape:"rect",objectFit:"contain",showGrid:!0,style:{},classes:{},mediaProps:{},cropperProps:{},zoomSpeed:1,restrictPosition:!0,zoomWithScroll:!0,keyboardStep:1},t.getMousePoint=function(e){return{x:Number(e.clientX),y:Number(e.clientY)}},t.getTouchPoint=function(e){return{x:Number(e.clientX),y:Number(e.clientY)}},t}(wt.Component);const Sn=(e,t,n,r)=>{const o=n/r;let i=e,a=t;return e/t>o?i=Math.round(a*o):a=Math.round(i/o),{width:i,height:a}},_n=Ft.Ay.div`
|
|
191
191
|
position: relative;
|
|
192
192
|
width: 100%;
|
|
193
193
|
height: 350px;
|
|
@@ -269,7 +269,7 @@
|
|
|
269
269
|
cx-details:not(:last-child)::part(base) {
|
|
270
270
|
border-bottom-width: 0;
|
|
271
271
|
}
|
|
272
|
-
`,On=[{value:"free",label:"Freeform"},{value:"16:9",label:"Widescreen (16:9)"},{value:"9:16",label:"Phone (9:16)"},{value:"4:3",label:"Presentation (4:3)"},{value:"1:1",label:"Square (1:1)"},{value:"3:2",label:"Landscape (3:2)"},{value:"2:3",label:"Portrait (2:3)"}],Pn=1e3,zn=e=>{let{open:t,width:n,height:r,disabledCropApply:o,maxWidth:i,maxHeight:a,percentageHeight:s,percentageWidth:l,unit:c,lastAppliedSetting:u,onChange:d,onApply:h}=e;const[p,f]=(0,wt.useState)(!1),[m,g]=(0,wt.useState)("free"),[v,b]=(0,wt.useState)(!0),[y,x]=(0,wt.useState)(!1),[w,k]=(0,wt.useState)(!1),S=(0,wt.useRef)(null),_=(0,wt.useRef)(null),E=(0,wt.useRef)(null),C=(0,wt.useRef)(null);(0,wt.useEffect)((()=>{g("free")}),[t]),(0,wt.useEffect)((()=>{t||(E.current&&(E.current.value=r.toString()),C.current&&(C.current.value=n.toString()))}),[r,t,n]),(0,wt.useEffect)((()=>{Promise.all([customElements.whenDefined("cx-input"),customElements.whenDefined("cx-select")]).then((()=>{f(!0)}))}),[]),(0,wt.useEffect)((()=>{const e=S.current;if(!e||!p)return;const t=e=>{e.target.value===rn.Nf.AspectRatio?d(u[rn.Nf.AspectRatio].width,u[rn.Nf.AspectRatio].height,rn.Nf.AspectRatio):d(u[rn.Nf.Pixel].width,u[rn.Nf.Pixel].height,rn.Nf.Pixel),g("free")};return e.addEventListener("cx-change",t),()=>{e.removeEventListener("cx-change",t)}}),[p,n,r,d,i,a,l,s,u]),(0,wt.useEffect)((()=>{const e=_.current;if(!e||!p)return;const t=e=>{const t=e.target.value;if("free"===t)b(!1);else{b(!0);const[e,n]=t.split(":").map(Number);if(c===rn.Nf.Pixel){const{width:t,height:r}=Sn(i,a,e,n);d(t,r,c)}else d(e,n,c)}g(e.target.value)};return e.addEventListener("cx-change",t),()=>{e.removeEventListener("cx-change",t)}}),[p,i,a,c,d]);const A=(0,wt.useMemo)((()=>i/a),[i,a]),T=Se((e=>{if(!e.target.value)return void k(!0);k(!1);const t=Math.max(Math.min(Number(e.target.value),i),1);e.target.value=t.toString();let n=r;v&&(n=Math.min(Math.round(t/A),a),x(!1)),d(t,n,c)}),Pn),O=Se((e=>{if(!e.target.value)return void x(!0);x(!1);const t=Math.max(Math.min(Number(e.target.value),a),1);e.target.value=t.toString();let r=n;v&&(r=Math.min(Math.round(t*A),i),k(!1)),d(r,t,c)}),Pn);return(0,Vt.jsxs)("cx-details",{open:t,"data-value":"crop",children:[(0,Vt.jsxs)("cx-space",{slot:"summary","align-items":"center",children:[(0,Vt.jsx)("div",{className:"details__summary__icon",children:(0,Vt.jsx)("cx-icon",{name:"crop"})}),(0,Vt.jsx)("cx-typography",{variant:"body3",children:"Crop"})]}),(0,Vt.jsxs)("cx-space",{direction:"vertical",spacing:"small",children:[(0,Vt.jsx)("cx-select",{ref:_,value:p?m:"",hoist:!0,style:{width:"100%"},children:On.map((e=>{let{value:t,label:n}=e;return(0,Vt.jsx)("cx-option",{value:t,children:n},t)}))}),(0,Vt.jsxs)("cx-space",{spacing:"small",children:[(0,Vt.jsxs)("div",{className:"resize__input-group",children:[(0,Vt.jsx)("cx-input",{ref:C,placeholder:"Width",type:"number",step:"1",value:p?n.toString():"",onInput:T,required:!0,children:(0,Vt.jsx)("cx-typography",{slot:"prefix",variant:"body3",className:"details__summary__input-label",children:"W"})}),(0,Vt.jsx)("cx-icon-button",{name:v?"insert_link":"link_off",onClick:()=>{v&&g("free"),b(!v)},style:{color:v?"var(--cx-color-primary)":void 0}}),(0,Vt.jsx)("cx-input",{ref:E,placeholder:"Height",type:"number",step:"1",value:p?r.toString():"",onInput:O,required:!0,children:(0,Vt.jsx)("cx-typography",{slot:"prefix",variant:"body3",className:"details__summary__input-label",children:"H"})})]}),(0,Vt.jsxs)("cx-select",{value:p?c:"",ref:S,hoist:!0,className:"resize__unit-select",children:[(0,Vt.jsx)("cx-option",{value:"pixels",children:"Pixels"}),(0,Vt.jsx)("cx-option",{value:"aspect-ratio",children:"Aspect ratio"})]})]}),(0,Vt.jsx)("cx-button",{variant:"primary",disabled:o||y||w,style:{marginLeft:"auto"},onClick:h,children:"Apply"})]})]})},Dn=e=>{let{extension:t,extensions:n,onChange:r}=e;const[o,i]=(0,wt.useState)(!1),a=(0,wt.useRef)(null);return(0,wt.useEffect)((()=>{Promise.all([customElements.whenDefined("cx-select")]).then((()=>{i(!0)}))}),[]),(0,wt.useEffect)((()=>{const e=a.current;if(!e||!o)return;const t=e=>{const t=e.target.value;r(t)};return e.addEventListener("cx-change",t),()=>{e.removeEventListener("cx-change",t)}}),[o,r]),(0,Vt.jsxs)("cx-space",{direction:"vertical",spacing:"small",className:"extension",children:[(0,Vt.jsx)("cx-typography",{variant:"body3",children:"Extension"}),(0,Vt.jsx)("cx-select",{value:o?t:"",ref:a,hoist:!0,children:n.map((e=>(0,Vt.jsx)("cx-option",{value:e.value,children:e.displayName},e.value)))})]})},Rn=e=>{let{open:t,width:n,height:r,lastAppliedSetting:o,maxWidth:i,maxHeight:a,unit:s,onChange:l,onApply:c}=e;const[u,d]=(0,wt.useState)(!1),[h,p]=(0,wt.useState)(!1),[f,m]=(0,wt.useState)(!1),[g,v]=(0,wt.useState)(!0),b=(0,wt.useRef)(null),y=(0,wt.useRef)(null),x=(0,wt.useRef)(null);(0,wt.useEffect)((()=>{t||(y.current&&(y.current.value=r.toString()),x.current&&(x.current.value=n.toString()))}),[r,t,n]),(0,wt.useEffect)((()=>{Promise.all([customElements.whenDefined("cx-input"),customElements.whenDefined("cx-select")]).then((()=>{d(!0)}))}),[]),(0,wt.useEffect)((()=>{const e=b.current;if(!e||!u)return;const t=e=>{e.target.value===rn.Nf.AspectRatio?l(o[rn.Nf.AspectRatio].width,o[rn.Nf.AspectRatio].height,rn.Nf.AspectRatio):l(o[rn.Nf.Pixel].width,o[rn.Nf.Pixel].height,rn.Nf.Pixel)};return e.addEventListener("cx-change",t),()=>{e.removeEventListener("cx-change",t)}}),[u,n,r,l,o,s]);const w=(0,wt.useMemo)((()=>i/a),[i,a]),k=(0,wt.useMemo)((()=>o[s].width===n&&o[s].height===r),[o,s,n,r]),S=Se((e=>{if(!e.target.value)return void m(!0);m(!1);const t=Math.max(Number(e.target.value),1);e.target.value=t.toString();let n=r;g&&(n=Math.round(t/w),p(!1)),l(t,n,s)}),Pn),_=Se((e=>{if(!e.target.value)return void p(!0);p(!1);const t=Math.max(Number(e.target.value),1);e.target.value=t.toString();let r=n;g&&(r=Math.round(t*w),m(!1)),l(r,t,s)}),Pn);return(0,Vt.jsxs)("cx-details",{open:t,"data-value":"resize",className:"resize",children:[(0,Vt.jsxs)("cx-space",{slot:"summary","align-items":"center",children:[(0,Vt.jsx)("div",{className:"details__summary__icon",children:(0,Vt.jsx)("cx-icon",{name:"aspect_ratio"})}),(0,Vt.jsx)("cx-typography",{variant:"body3",children:"Resize"})]}),(0,Vt.jsxs)("cx-space",{direction:"vertical",spacing:"small",children:[(0,Vt.jsxs)("cx-space",{spacing:"small",children:[(0,Vt.jsxs)("div",{className:"resize__input-group",children:[(0,Vt.jsx)("cx-input",{ref:x,placeholder:"Width",type:"number",step:"1",value:u?n.toString():"",onInput:S,required:!0,children:(0,Vt.jsx)("cx-typography",{slot:"prefix",variant:"body3",className:"details__summary__input-label",children:"W"})}),(0,Vt.jsx)("cx-icon-button",{name:g?"insert_link":"link_off",onClick:()=>v((e=>!e)),style:{color:g?"var(--cx-color-primary)":void 0}}),(0,Vt.jsx)("cx-input",{ref:y,placeholder:"Height",type:"number",step:"1",value:u?r.toString():"",onInput:_,required:!0,children:(0,Vt.jsx)("cx-typography",{slot:"prefix",variant:"body3",className:"details__summary__input-label",children:"H"})})]}),(0,Vt.jsxs)("cx-select",{value:u?s:"",ref:b,hoist:!0,className:"resize__unit-select",children:[(0,Vt.jsx)("cx-option",{value:"pixels",children:"Pixels"}),(0,Vt.jsx)("cx-option",{value:"aspect-ratio",children:"Aspect ratio"})]})]}),(0,Vt.jsx)("cx-button",{variant:"primary",disabled:k||h||f,style:{marginLeft:"auto"},onClick:c,children:"Apply"})]})]})},Nn=e=>e>360?360:e<0?0:e,jn=e=>{let{open:t,rotation:n,onChange:r,onApply:o}=e;const[i,a]=(0,wt.useState)(!1),[s,l]=(0,wt.useState)(!1);(0,wt.useEffect)((()=>{Promise.all([customElements.whenDefined("cx-input")]).then((()=>{a(!0)}))}),[]);const c=Se((e=>{const t=e.target.value,n=Number(t);l(!t);const o=Nn(n);(n>360||n<0)&&(e.target.value=o.toString()),r(o)}),Pn);return(0,Vt.jsxs)("cx-details",{open:t,"data-value":"rotate",children:[(0,Vt.jsxs)("cx-space",{slot:"summary","align-items":"center",children:[(0,Vt.jsx)("div",{className:"details__summary__icon",children:(0,Vt.jsx)("cx-icon",{name:"rotate_90_degrees_cw"})}),(0,Vt.jsx)("cx-typography",{variant:"body3",children:"Rotate"})]}),(0,Vt.jsxs)("cx-space",{spacing:"small",children:[(0,Vt.jsxs)("cx-button-group",{label:"History",children:[(0,Vt.jsx)("cx-button",{outline:!0,onClick:()=>r(Nn(n-90)),children:(0,Vt.jsx)("cx-icon",{name:"rotate_90_degrees_ccw",label:"Undo"})}),(0,Vt.jsx)("cx-button",{outline:!0,onClick:()=>r(Nn(n+90)),children:(0,Vt.jsx)("cx-icon",{name:"rotate_90_degrees_cw",label:"Redo"})})]}),(0,Vt.jsx)("cx-input",{value:i&&!s?n.toString():"",placeholder:"0",type:"number",min:"0",max:"360",style:{width:"80px",flex:"none"},onInput:c,step:"1"}),(0,Vt.jsx)("cx-button",{variant:"primary",disabled:0===n||360===n||s,onClick:o,children:"Apply"})]})]})},In=e=>{let{format:t,formats:n,open:r,onApply:o}=e;const[i,a]=(0,wt.useState)(t),[s,l]=(0,wt.useState)(!1),c=(0,wt.useRef)(null);return(0,wt.useEffect)((()=>{Promise.all([customElements.whenDefined("cx-select")]).then((()=>{l(!0)}))}),[]),(0,wt.useEffect)((()=>{const e=c.current;if(!e||!s)return;const t=e=>{const t=e.target.value;a(t)};return e.addEventListener("cx-change",t),()=>{e.removeEventListener("cx-change",t)}}),[n,s]),(0,wt.useEffect)((()=>{r&&a(t)}),[t,r]),(0,Vt.jsxs)("cx-details",{open:r,"data-value":"format",className:"format",children:[(0,Vt.jsxs)("cx-space",{slot:"summary","align-items":"center",children:[(0,Vt.jsx)("div",{className:"details__summary__icon",children:(0,Vt.jsx)("cx-icon",{name:"aspect_ratio"})}),(0,Vt.jsx)("cx-typography",{variant:"body3",children:"Format"})]}),(0,Vt.jsxs)("cx-space",{direction:"vertical",spacing:"small",className:"format",children:[(0,Vt.jsx)("cx-select",{value:s?i:"",ref:c,hoist:!0,children:n.map((e=>(0,Vt.jsx)("cx-option",{value:e.id,children:e.proxyLabel},e.id)))}),(0,Vt.jsx)("cx-button",{variant:"primary",style:{marginLeft:"auto"},onClick:()=>{const e=n.find((e=>e.id===i));e&&o(e)},disabled:i===t,children:"Apply"})]})]})},Mn=e=>{let{open:t,quality:n,onChange:r}=e;const[o,i]=(0,wt.useState)(!1),[a,s]=(0,wt.useState)(n),[l,c]=(0,wt.useState)(!1),u=(0,wt.useRef)(null);(0,wt.useEffect)((()=>{Promise.all([customElements.whenDefined("cx-input")]).then((()=>{i(!0)}))}),[]),(0,wt.useEffect)((()=>{o&&(s(n),c(!1),u.current&&(u.current.value=n.toString()))}),[n,o]);const d=Se((e=>{const t=e.target.value,n=Number(t);!t||isNaN(n)||n<1||n>100?c(!0):c(!1),s(n)}),Pn);return(0,Vt.jsxs)("cx-details",{open:t,"data-value":"quality",children:[(0,Vt.jsxs)("cx-space",{slot:"summary","align-items":"center",children:[(0,Vt.jsx)("div",{className:"details__summary__icon",children:(0,Vt.jsx)("cx-icon",{name:"blur_on"})}),(0,Vt.jsx)("cx-typography",{variant:"body3",children:"Quality"})]}),(0,Vt.jsxs)("cx-space",{spacing:"small",children:[(0,Vt.jsx)("cx-tooltip",{content:"From 1 to 100. 1 = Worst. 100 = Best. Supported Image Formats: JPG, JPEG.",hoist:!0,children:(0,Vt.jsx)("cx-input",{ref:u,class:"details__checkbox",disabled:!o,type:"number",value:o?a.toString():"",min:"1",max:"100",step:"1",onInput:d})}),(0,Vt.jsx)("cx-button",{variant:"primary",disabled:l||n===a,onClick:()=>{r(a)},children:"Apply"})]})]})},Ln=e=>{let{open:t,keepMetadata:n,onChange:r}=e;const[o,i]=(0,wt.useState)(!1),a=(0,wt.useRef)(null);(0,wt.useEffect)((()=>{Promise.all([customElements.whenDefined("cx-checkbox")]).then((()=>{i(!0)}))}),[]);const s=(0,wt.useCallback)((e=>{r(e.target.checked)}),[r]);return(0,wt.useEffect)((()=>{const e=a.current;return e&&o&&e.addEventListener("cx-change",s),()=>{e&&o&&e.removeEventListener("cx-change",s)}}),[o,s]),(0,Vt.jsxs)("cx-details",{open:t,"data-value":"metadata",children:[(0,Vt.jsxs)("cx-space",{slot:"summary","align-items":"center",children:[(0,Vt.jsx)("div",{className:"details__summary__icon",children:(0,Vt.jsx)("cx-icon",{name:"short_text"})}),(0,Vt.jsx)("cx-typography",{variant:"body3",children:"Metadata"})]}),(0,Vt.jsx)("cx-tooltip",{content:"By default, almost all embedded metadata will be stripped. Apply this option to preserve embedded metadata.",hoist:!0,children:(0,Vt.jsx)("cx-checkbox",{ref:a,class:"details__checkbox",checked:!!o&&n,disabled:!o,children:"Preserve metadata"})})]})},Fn=e=>{let{activeSetting:t,extensions:n,availableProxies:r,imageSize:o,resize:i,crop:a,extension:s,keepMetadata:l,lastAppliedCrop:c,lastAppliedResize:u,proxy:d,quality:h,rotation:p,onCropChange:f,onExtensionChange:m,onFormatChange:g,onKeepMetadataChange:v,onQualityChange:b,onResizeChange:y,onRotateChange:x,onViewChange:w}=e;const k=(0,wt.useRef)(null);(0,wt.useEffect)((()=>{const e=k.current;if(!e)return;const t=e=>{var t;"cx-details"===e.target.localName&&w(null!==(t=e.target.dataset.value)&&void 0!==t?t:"")},n=t=>{const n=null===e||void 0===e?void 0:e.querySelectorAll("cx-details");if("cx-details"===t.target.localName){Array.from(n).every((e=>!e.open))&&w("")}};return e.addEventListener("cx-show",t),e.addEventListener("cx-hide",n),()=>{e.removeEventListener("cx-show",t),e.removeEventListener("cx-hide",n)}}),[w]);const S=(0,wt.useMemo)((()=>An(a,c[a.unit],((e,t)=>{if(!isNaN(e)&&!isNaN(t))return Math.round(e)===Math.round(t)}))),[a,c]),_=(0,wt.useMemo)((()=>r.filter((e=>!e.cdnName))),[r]);return(0,Vt.jsxs)(Tn,{ref:k,children:[(0,Vt.jsx)(In,{open:"format"===t,format:d,formats:_,onApply:g}),(0,Vt.jsx)(zn,{open:"crop"===t,width:a.width,height:a.height,percentageWidth:a.percentageWidth,percentageHeight:a.percentageHeight,disabledCropApply:S,lastAppliedSetting:c,maxWidth:i.width,maxHeight:i.height,unit:a.unit,onChange:(e,t,n)=>f(e,t,n,!1),onApply:()=>f(a.width,a.height,a.unit,!0)}),(0,Vt.jsx)(Rn,{open:"resize"===t,width:i.width,height:i.height,lastAppliedSetting:u,maxWidth:o.width,maxHeight:o.height,unit:i.unit,onChange:(e,t,n)=>y(e,t,n,!1),onApply:()=>y(i.width,i.height,i.unit,!0)}),(0,Vt.jsx)(jn,{open:"rotate"===t,rotation:p,onChange:e=>x(e,!1),onApply:()=>x(p,!0)}),(0,Vt.jsx)(Mn,{open:"quality"===t,quality:h,onChange:b}),(0,Vt.jsx)(Ln,{open:"metadata"===t,keepMetadata:l,onChange:v}),(0,Vt.jsx)(Dn,{extension:s,extensions:n,onChange:m})]})},Bn=(0,Ft.Ay)("cx-dialog")`
|
|
272
|
+
`,On=[{value:"free",label:"Freeform"},{value:"16:9",label:"Widescreen (16:9)"},{value:"9:16",label:"Phone (9:16)"},{value:"4:3",label:"Presentation (4:3)"},{value:"1:1",label:"Square (1:1)"},{value:"3:2",label:"Landscape (3:2)"},{value:"2:3",label:"Portrait (2:3)"}],Pn=1e3,zn=e=>{let{open:t,width:n,height:r,disabledCropApply:o,maxWidth:i,maxHeight:a,percentageHeight:s,percentageWidth:l,unit:c,lastAppliedSetting:u,onChange:d,onApply:h}=e;const[p,f]=(0,wt.useState)(!1),[m,g]=(0,wt.useState)("free"),[v,b]=(0,wt.useState)(!0),[y,x]=(0,wt.useState)(!1),[w,k]=(0,wt.useState)(!1),S=(0,wt.useRef)(null),_=(0,wt.useRef)(null),E=(0,wt.useRef)(null),C=(0,wt.useRef)(null);(0,wt.useEffect)((()=>{g("free")}),[t]),(0,wt.useEffect)((()=>{t||(E.current&&(E.current.value=r.toString()),C.current&&(C.current.value=n.toString()))}),[r,t,n]),(0,wt.useEffect)((()=>{Promise.all([customElements.whenDefined("cx-input"),customElements.whenDefined("cx-select")]).then((()=>{f(!0)}))}),[]),(0,wt.useEffect)((()=>{const e=S.current;if(!e||!p)return;const t=e=>{e.target.value===rn.Nf.AspectRatio?d(u[rn.Nf.AspectRatio].width,u[rn.Nf.AspectRatio].height,rn.Nf.AspectRatio):d(u[rn.Nf.Pixel].width,u[rn.Nf.Pixel].height,rn.Nf.Pixel),g("free")};return e.addEventListener("cx-change",t),()=>{e.removeEventListener("cx-change",t)}}),[p,n,r,d,i,a,l,s,u]),(0,wt.useEffect)((()=>{const e=_.current;if(!e||!p)return;const t=e=>{const t=e.target.value;if("free"===t)b(!1);else{b(!0);const[e,n]=t.split(":").map(Number);if(c===rn.Nf.Pixel){const{width:t,height:r}=Sn(i,a,e,n);d(t,r,c)}else d(e,n,c)}g(e.target.value)};return e.addEventListener("cx-change",t),()=>{e.removeEventListener("cx-change",t)}}),[p,i,a,c,d]);const A=(0,wt.useMemo)((()=>i/a),[i,a]),T=Se((e=>{if(!e.target.value)return void k(!0);k(!1);const t=Math.max(Math.min(Number(e.target.value),i),1);e.target.value=t.toString();let n=r;v&&(n=Math.min(Math.round(t/A),a),x(!1)),d(t,n,c)}),Pn),O=Se((e=>{if(!e.target.value)return void x(!0);x(!1);const t=Math.max(Math.min(Number(e.target.value),a),1);e.target.value=t.toString();let r=n;v&&(r=Math.min(Math.round(t*A),i),k(!1)),d(r,t,c)}),Pn);return(0,Vt.jsxs)("cx-details",{open:t,"data-value":"crop",children:[(0,Vt.jsxs)("cx-space",{slot:"summary","align-items":"center",children:[(0,Vt.jsx)("div",{className:"details__summary__icon",children:(0,Vt.jsx)("cx-icon",{name:"crop"})}),(0,Vt.jsx)("cx-typography",{variant:"body3",children:"Crop"})]}),(0,Vt.jsxs)("cx-space",{direction:"vertical",spacing:"small",children:[(0,Vt.jsx)("cx-select",{ref:_,value:p?m:"",hoist:!0,style:{width:"100%"},children:On.map((e=>{let{value:t,label:n}=e;return(0,Vt.jsx)("cx-option",{value:t,children:n},t)}))}),(0,Vt.jsxs)("cx-space",{spacing:"small",children:[(0,Vt.jsxs)("div",{className:"resize__input-group",children:[(0,Vt.jsx)("cx-input",{ref:C,placeholder:"Width",type:"number",step:"1",value:p?n.toString():"",onInput:T,required:!0,children:(0,Vt.jsx)("cx-typography",{slot:"prefix",variant:"body3",className:"details__summary__input-label",children:"W"})}),(0,Vt.jsx)("cx-icon-button",{name:v?"insert_link":"link_off",onClick:()=>{v&&g("free"),b(!v)},style:{color:v?"var(--cx-color-primary)":void 0}}),(0,Vt.jsx)("cx-input",{ref:E,placeholder:"Height",type:"number",step:"1",value:p?r.toString():"",onInput:O,required:!0,children:(0,Vt.jsx)("cx-typography",{slot:"prefix",variant:"body3",className:"details__summary__input-label",children:"H"})})]}),(0,Vt.jsxs)("cx-select",{value:p?c:"",ref:S,hoist:!0,className:"resize__unit-select",children:[(0,Vt.jsx)("cx-option",{value:"pixels",children:"Pixels"}),(0,Vt.jsx)("cx-option",{value:"aspect-ratio",children:"Aspect ratio"})]})]}),(0,Vt.jsx)("cx-button",{variant:"primary",disabled:o||y||w,style:{marginLeft:"auto"},onClick:h,children:"Apply"})]})]})},Dn=e=>{let{extension:t,extensions:n,onChange:r}=e;const[o,i]=(0,wt.useState)(!1),a=(0,wt.useRef)(null);return(0,wt.useEffect)((()=>{Promise.all([customElements.whenDefined("cx-select")]).then((()=>{i(!0)}))}),[]),(0,wt.useEffect)((()=>{const e=a.current;if(!e||!o)return;const t=e=>{const t=e.target.value;r(t)};return e.addEventListener("cx-change",t),()=>{e.removeEventListener("cx-change",t)}}),[o,r]),(0,Vt.jsxs)("cx-space",{direction:"vertical",spacing:"small",className:"extension",children:[(0,Vt.jsx)("cx-typography",{variant:"body3",children:"Extension"}),(0,Vt.jsx)("cx-select",{value:o?t:"",ref:a,hoist:!0,children:n.map((e=>(0,Vt.jsx)("cx-option",{value:e.value,children:e.displayName},e.value)))})]})},Rn=e=>{let{open:t,width:n,height:r,lastAppliedSetting:o,maxWidth:i,maxHeight:a,unit:s,onChange:l,onApply:c}=e;const[u,d]=(0,wt.useState)(!1),[h,p]=(0,wt.useState)(!1),[f,m]=(0,wt.useState)(!1),[g,v]=(0,wt.useState)(!0),b=(0,wt.useRef)(null),y=(0,wt.useRef)(null),x=(0,wt.useRef)(null);(0,wt.useEffect)((()=>{t||(y.current&&(y.current.value=r.toString()),x.current&&(x.current.value=n.toString()))}),[r,t,n]),(0,wt.useEffect)((()=>{Promise.all([customElements.whenDefined("cx-input"),customElements.whenDefined("cx-select")]).then((()=>{d(!0)}))}),[]),(0,wt.useEffect)((()=>{const e=b.current;if(!e||!u)return;const t=e=>{e.target.value===rn.Nf.AspectRatio?l(o[rn.Nf.AspectRatio].width,o[rn.Nf.AspectRatio].height,rn.Nf.AspectRatio):l(o[rn.Nf.Pixel].width,o[rn.Nf.Pixel].height,rn.Nf.Pixel)};return e.addEventListener("cx-change",t),()=>{e.removeEventListener("cx-change",t)}}),[u,n,r,l,o,s]);const w=(0,wt.useMemo)((()=>i/a),[i,a]),k=(0,wt.useMemo)((()=>o[s].width===n&&o[s].height===r),[o,s,n,r]),S=Se((e=>{if(!e.target.value)return void m(!0);m(!1);const t=Math.max(Number(e.target.value),1);e.target.value=t.toString();let n=r;g&&(n=Math.round(t/w),p(!1)),l(t,n,s)}),Pn),_=Se((e=>{if(!e.target.value)return void p(!0);p(!1);const t=Math.max(Number(e.target.value),1);e.target.value=t.toString();let r=n;g&&(r=Math.round(t*w),m(!1)),l(r,t,s)}),Pn);return(0,Vt.jsxs)("cx-details",{open:t,"data-value":"resize",className:"resize",children:[(0,Vt.jsxs)("cx-space",{slot:"summary","align-items":"center",children:[(0,Vt.jsx)("div",{className:"details__summary__icon",children:(0,Vt.jsx)("cx-icon",{name:"aspect_ratio"})}),(0,Vt.jsx)("cx-typography",{variant:"body3",children:"Resize"})]}),(0,Vt.jsxs)("cx-space",{direction:"vertical",spacing:"small",children:[(0,Vt.jsxs)("cx-space",{spacing:"small",children:[(0,Vt.jsxs)("div",{className:"resize__input-group",children:[(0,Vt.jsx)("cx-input",{ref:x,placeholder:"Width",type:"number",step:"1",value:u?n.toString():"",onInput:S,required:!0,children:(0,Vt.jsx)("cx-typography",{slot:"prefix",variant:"body3",className:"details__summary__input-label",children:"W"})}),(0,Vt.jsx)("cx-icon-button",{name:g?"insert_link":"link_off",onClick:()=>v((e=>!e)),style:{color:g?"var(--cx-color-primary)":void 0}}),(0,Vt.jsx)("cx-input",{ref:y,placeholder:"Height",type:"number",step:"1",value:u?r.toString():"",onInput:_,required:!0,children:(0,Vt.jsx)("cx-typography",{slot:"prefix",variant:"body3",className:"details__summary__input-label",children:"H"})})]}),(0,Vt.jsxs)("cx-select",{value:u?s:"",ref:b,hoist:!0,className:"resize__unit-select",children:[(0,Vt.jsx)("cx-option",{value:"pixels",children:"Pixels"}),(0,Vt.jsx)("cx-option",{value:"aspect-ratio",children:"Aspect ratio"})]})]}),(0,Vt.jsx)("cx-button",{variant:"primary",disabled:k||h||f,style:{marginLeft:"auto"},onClick:c,children:"Apply"})]})]})},Nn=e=>e>360?360:e<0?0:e,jn=e=>{let{open:t,rotation:n,onChange:r,onApply:o}=e;const[i,a]=(0,wt.useState)(!1),[s,l]=(0,wt.useState)(!1);(0,wt.useEffect)((()=>{Promise.all([customElements.whenDefined("cx-input")]).then((()=>{a(!0)}))}),[]);const c=Se((e=>{const t=e.target.value,n=Number(t);l(!t);const o=Nn(n);(n>360||n<0)&&(e.target.value=o.toString()),r(o)}),Pn);return(0,Vt.jsxs)("cx-details",{open:t,"data-value":"rotate",children:[(0,Vt.jsxs)("cx-space",{slot:"summary","align-items":"center",children:[(0,Vt.jsx)("div",{className:"details__summary__icon",children:(0,Vt.jsx)("cx-icon",{name:"rotate_90_degrees_cw"})}),(0,Vt.jsx)("cx-typography",{variant:"body3",children:"Rotate"})]}),(0,Vt.jsxs)("cx-space",{spacing:"small",children:[(0,Vt.jsxs)("cx-button-group",{label:"History",children:[(0,Vt.jsx)("cx-button",{outline:!0,onClick:()=>r(Nn(n-90)),children:(0,Vt.jsx)("cx-icon",{name:"rotate_90_degrees_ccw",label:"Undo"})}),(0,Vt.jsx)("cx-button",{outline:!0,onClick:()=>r(Nn(n+90)),children:(0,Vt.jsx)("cx-icon",{name:"rotate_90_degrees_cw",label:"Redo"})})]}),(0,Vt.jsx)("cx-input",{value:i&&!s?n.toString():"",placeholder:"0",type:"number",min:"0",max:"360",style:{width:"80px",flex:"none"},onInput:c,step:"1"}),(0,Vt.jsx)("cx-button",{variant:"primary",disabled:0===n||360===n||s,onClick:o,children:"Apply"})]})]})},In=e=>{let{format:t,formats:n,open:r,onApply:o}=e;const[i,a]=(0,wt.useState)(t),[s,l]=(0,wt.useState)(!1),c=(0,wt.useRef)(null);return(0,wt.useEffect)((()=>{Promise.all([customElements.whenDefined("cx-select")]).then((()=>{l(!0)}))}),[]),(0,wt.useEffect)((()=>{const e=c.current;if(!e||!s)return;const t=e=>{const t=e.target.value;a(t)};return e.addEventListener("cx-change",t),()=>{e.removeEventListener("cx-change",t)}}),[n,s]),(0,wt.useEffect)((()=>{r&&a(t)}),[t,r]),(0,Vt.jsxs)("cx-details",{open:r,"data-value":"format",className:"format",children:[(0,Vt.jsxs)("cx-space",{slot:"summary","align-items":"center",children:[(0,Vt.jsx)("div",{className:"details__summary__icon",children:(0,Vt.jsx)("cx-icon",{name:"photo_size_select_large"})}),(0,Vt.jsx)("cx-typography",{variant:"body3",children:"Format"})]}),(0,Vt.jsxs)("cx-space",{direction:"vertical",spacing:"small",className:"format",children:[(0,Vt.jsx)("cx-select",{value:s?i:"",ref:c,hoist:!0,children:n.map((e=>(0,Vt.jsx)("cx-option",{value:e.id,children:e.proxyLabel},e.id)))}),(0,Vt.jsx)("cx-button",{variant:"primary",style:{marginLeft:"auto"},onClick:()=>{const e=n.find((e=>e.id===i));e&&o(e)},disabled:i===t,children:"Apply"})]})]})},Mn=e=>{let{open:t,quality:n,onChange:r}=e;const[o,i]=(0,wt.useState)(!1),[a,s]=(0,wt.useState)(n),[l,c]=(0,wt.useState)(!1),u=(0,wt.useRef)(null);(0,wt.useEffect)((()=>{Promise.all([customElements.whenDefined("cx-input")]).then((()=>{i(!0)}))}),[]),(0,wt.useEffect)((()=>{o&&(s(n),c(!1),u.current&&(u.current.value=n.toString()))}),[n,o]);const d=Se((e=>{const t=e.target.value,n=Number(t);!t||isNaN(n)||n<1||n>100?c(!0):c(!1),s(n)}),Pn);return(0,Vt.jsxs)("cx-details",{open:t,"data-value":"quality",children:[(0,Vt.jsxs)("cx-space",{slot:"summary","align-items":"center",children:[(0,Vt.jsx)("div",{className:"details__summary__icon",children:(0,Vt.jsx)("cx-icon",{name:"blur_on"})}),(0,Vt.jsx)("cx-typography",{variant:"body3",children:"Quality"})]}),(0,Vt.jsxs)("cx-space",{spacing:"small",children:[(0,Vt.jsx)("cx-tooltip",{content:"From 1 to 100. 1 = Worst. 100 = Best. Supported Image Formats: JPG, JPEG.",hoist:!0,children:(0,Vt.jsx)("cx-input",{ref:u,class:"details__checkbox",disabled:!o,type:"number",value:o?a.toString():"",min:"1",max:"100",step:"1",onInput:d})}),(0,Vt.jsx)("cx-button",{variant:"primary",disabled:l||n===a,onClick:()=>{r(a)},children:"Apply"})]})]})},Ln=e=>{let{open:t,keepMetadata:n,onChange:r}=e;const[o,i]=(0,wt.useState)(!1),a=(0,wt.useRef)(null);(0,wt.useEffect)((()=>{Promise.all([customElements.whenDefined("cx-checkbox")]).then((()=>{i(!0)}))}),[]);const s=(0,wt.useCallback)((e=>{r(e.target.checked)}),[r]);return(0,wt.useEffect)((()=>{const e=a.current;return e&&o&&e.addEventListener("cx-change",s),()=>{e&&o&&e.removeEventListener("cx-change",s)}}),[o,s]),(0,Vt.jsxs)("cx-details",{open:t,"data-value":"metadata",children:[(0,Vt.jsxs)("cx-space",{slot:"summary","align-items":"center",children:[(0,Vt.jsx)("div",{className:"details__summary__icon",children:(0,Vt.jsx)("cx-icon",{name:"short_text"})}),(0,Vt.jsx)("cx-typography",{variant:"body3",children:"Metadata"})]}),(0,Vt.jsx)("cx-tooltip",{content:"By default, almost all embedded metadata will be stripped. Apply this option to preserve embedded metadata.",hoist:!0,children:(0,Vt.jsx)("cx-checkbox",{ref:a,class:"details__checkbox",checked:!!o&&n,disabled:!o,children:"Preserve metadata"})})]})},Fn=e=>{let{activeSetting:t,extensions:n,availableProxies:r,imageSize:o,resize:i,crop:a,extension:s,keepMetadata:l,lastAppliedCrop:c,lastAppliedResize:u,proxy:d,quality:h,rotation:p,onCropChange:f,onExtensionChange:m,onFormatChange:g,onKeepMetadataChange:v,onQualityChange:b,onResizeChange:y,onRotateChange:x,onViewChange:w}=e;const k=(0,wt.useRef)(null);(0,wt.useEffect)((()=>{const e=k.current;if(!e)return;const t=e=>{var t;"cx-details"===e.target.localName&&w(null!==(t=e.target.dataset.value)&&void 0!==t?t:"")},n=t=>{const n=null===e||void 0===e?void 0:e.querySelectorAll("cx-details");if("cx-details"===t.target.localName){Array.from(n).every((e=>!e.open))&&w("")}};return e.addEventListener("cx-show",t),e.addEventListener("cx-hide",n),()=>{e.removeEventListener("cx-show",t),e.removeEventListener("cx-hide",n)}}),[w]);const S=(0,wt.useMemo)((()=>An(a,c[a.unit],((e,t)=>{if(!isNaN(e)&&!isNaN(t))return Math.round(e)===Math.round(t)}))),[a,c]),_=(0,wt.useMemo)((()=>r.filter((e=>!e.cdnName))),[r]);return(0,Vt.jsxs)(Tn,{ref:k,children:[(0,Vt.jsx)(In,{open:"format"===t,format:d,formats:_,onApply:g}),(0,Vt.jsx)(zn,{open:"crop"===t,width:a.width,height:a.height,percentageWidth:a.percentageWidth,percentageHeight:a.percentageHeight,disabledCropApply:S,lastAppliedSetting:c,maxWidth:i.width,maxHeight:i.height,unit:a.unit,onChange:(e,t,n)=>f(e,t,n,!1),onApply:()=>f(a.width,a.height,a.unit,!0)}),(0,Vt.jsx)(Rn,{open:"resize"===t,width:i.width,height:i.height,lastAppliedSetting:u,maxWidth:o.width,maxHeight:o.height,unit:i.unit,onChange:(e,t,n)=>y(e,t,n,!1),onApply:()=>y(i.width,i.height,i.unit,!0)}),(0,Vt.jsx)(jn,{open:"rotate"===t,rotation:p,onChange:e=>x(e,!1),onApply:()=>x(p,!0)}),(0,Vt.jsx)(Mn,{open:"quality"===t,quality:h,onChange:b}),(0,Vt.jsx)(Ln,{open:"metadata"===t,keepMetadata:l,onChange:v}),(0,Vt.jsx)(Dn,{extension:s,extensions:n,onChange:m})]})},Bn=(0,Ft.Ay)("cx-dialog")`
|
|
273
273
|
--body-spacing: var(--cx-spacing-small);
|
|
274
274
|
--divider-spacing: 0;
|
|
275
275
|
--max-height: 100%;
|
|
@@ -620,7 +620,7 @@
|
|
|
620
620
|
.version__item__editor {
|
|
621
621
|
color: var(--cx-color-primary);
|
|
622
622
|
}
|
|
623
|
-
`;var Gn=n(3943);const Zn=e=>{let{src:t,alt:n}=e;const[r,o]=(0,wt.useState)("horizontal"),i=(0,wt.useRef)(null),a=(0,wt.useCallback)((()=>{if(i.current){const{naturalWidth:e,naturalHeight:t}=i.current;o(e>t?"horizontal":"vertical")}}),[]);return(0,Vt.jsx)("div",{className:`version__item__preview version__item__preview--${r}`,children:(0,Vt.jsx)("img",{ref:i,src:t,alt:n,onLoad:a})})},Yn=e=>{let{src:t}=e;const[n,r]=(0,wt.useState)("horizontal"),o=(0,wt.useRef)(null),i=(0,wt.useCallback)((()=>{if(o.current){const{videoWidth:e,videoHeight:t}=o.current;r(e>t?"horizontal":"vertical")}}),[]);return(0,Vt.jsx)("div",{className:`version__item__preview version__item__preview--${n}`,children:(0,Vt.jsx)("video",{ref:o,src:t,onLoadedMetadata:i,controls:!0})})},Jn=e=>{var t;let{assetId:n}=e;const{data:r,isFetching:o,isLoading:i}=(0,Gn.cP)(n?{assetId:n}:Lt.hT);return o||i?(0,Vt.jsx)(Xn,{children:(0,Vt.jsx)("cx-spinner",{})}):(0,Vt.jsx)(Xn,{children:(0,Vt.jsx)("cx-menu",{children:null===r||void 0===r||null===(t=r.versions)||void 0===t?void 0:t.map(((e,t)=>(0,Vt.jsx)("cx-menu-item",{className:"version__item",readonly:!0,children:(0,Vt.jsxs)("cx-grid",{columns:5,spacing:"12px",children:[(0,Vt.jsx)("cx-grid-item",{xs:"2",sm:"2",children:(0,Vt.jsxs)("cx-space",{direction:"horizontal","align-items":"center",wrap:"nowrap",children:[(0,Vt.jsx)("div",{className:"version__item__number",children:(0,Vt.jsx)("cx-line-clamp",{lines:1,children:e.versionNumberDisplay})}),e.scrubUrl?(0,Vt.jsx)(Yn,{src:e.scrubUrl}):(0,Vt.jsx)(Zn,{src:e.versionFileUrl,alt:e.versionFileName})]})}),(0,Vt.jsx)("cx-grid-item",{xs:"2",sm:"3",children:(0,Vt.jsxs)("cx-space",{direction:"vertical",spacing:"2x-small",children:[(0,Vt.jsx)("cx-line-clamp",{lines:1,children:(0,Vt.jsx)("cx-typography",{variant:"body3",className:"version__item__name",children:e.versionFileName})}),(0,Vt.jsx)("cx-line-clamp",{lines:1,children:(0,Vt.jsx)("cx-typography",{variant:"body3",children:e.createByEmail})}),(0,Vt.jsxs)("cx-typography",{variant:"body3",children:[e.versionCreateDate.split(" ")[0],0===t&&(0,Vt.jsx)("span",{className:"version__item__latest",children:"Current version"})]})]})})]})},e.versionNumber)))})})},er={previewLoadable:!1,defaultSize:{width:0,height:0},selectedProxy:"",selectedFormat:{url:"",originalUrl:"",width:0,height:0,x:0,y:0,extension:"",rotation:0},defaultSelectedFormat:{url:"",originalUrl:"",width:0,height:0,x:0,y:0,extension:"",rotation:0},resizeSize:{width:0,height:0,unit:rn.Nf.Pixel},lastResizeSize:{[rn.Nf.AspectRatio]:{width:0,height:0,unit:rn.Nf.AspectRatio},[rn.Nf.Pixel]:{width:0,height:0,unit:rn.Nf.Pixel}},cropSize:{width:0,height:0,percentageWidth:0,percentageHeight:0,x:0,y:0,unit:rn.Nf.Pixel},lastCropSize:{[rn.Nf.AspectRatio]:{width:0,height:0,percentageWidth:0,percentageHeight:0,x:0,y:0,unit:rn.Nf.AspectRatio},[rn.Nf.Pixel]:{width:0,height:0,percentageWidth:0,percentageHeight:0,x:0,y:0,unit:rn.Nf.Pixel}},isLoadingConfirm:!1,isLoadingFavorites:!1,rotation:0,quality:100,keepMetadata:!1,transformations:[],enabledTracking:!1,trackingParameters:[{key:"UTM_source",value:""},{key:"UTM_campaign",value:""},{key:"UTM_description",value:""}],showCustomRendition:!1,showVersionHistory:!1,useCustomRendition:!1,useRepresentative:!1,activeSetting:"format",isLoading:!1},tr=(e,t)=>{switch(t.type){case"CANCEL_USE_CUSTOM_RENDITION":return{...e,cropSize:{...e.cropSize,width:t.payload.width,height:t.payload.height},resizeSize:{...e.resizeSize,width:t.payload.width,height:t.payload.height},selectedFormat:{...e.selectedFormat,...t.payload,rotation:0,x:0,y:0},rotation:0,transformations:[],showCustomRendition:!1,activeSetting:"format"};case"CONFIRM_USE_CUSTOM_RENDITION":return{...e,cropSize:{...e.cropSize,width:e.selectedFormat.width,height:e.selectedFormat.height},resizeSize:{...e.resizeSize,width:e.selectedFormat.width,height:e.selectedFormat.height},rotation:0,activeSetting:"format",showCustomRendition:!1,useCustomRendition:!0,defaultSelectedFormat:{...e.selectedFormat}};case"SET_DEFAULT_SIZE":return{...e,defaultSize:{...e.defaultSize,...t.payload}};case"RESET_DATA":return er;case"SET_ACTIVE_SETTING":return{...e,activeSetting:t.payload};case"SET_CROP_SIZE":return{...e,cropSize:{...e.cropSize,...t.payload}};case"SET_ENABLED_TRACKING":return{...e,enabledTracking:t.payload};case"SET_KEEP_METADATA":return{...e,keepMetadata:t.payload};case"SET_LAST_CROP_SIZE":return{...e,lastCropSize:{...e.lastCropSize,...t.payload}};case"SET_LAST_RESIZE_SIZE":return{...e,lastResizeSize:{...e.lastResizeSize,...t.payload}};case"SET_LOADING":return{...e,isLoading:t.payload};case"SET_LOADING_CONFIRM":return{...e,isLoadingConfirm:t.payload};case"SET_LOADING_FAVORITES":return{...e,isLoadingFavorites:t.payload};case"SET_PREVIEW_LOADABLE":return{...e,previewLoadable:t.payload};case"SET_QUALITY":return{...e,quality:t.payload};case"SET_RESIZE_SIZE":return{...e,resizeSize:{...e.resizeSize,...t.payload}};case"SET_ROTATION":return{...e,rotation:t.payload};case"SET_SELECTED_FORMAT":return{...e,selectedFormat:{...e.selectedFormat,...t.payload}};case"SET_SELECTED_PROXY":return t.payload?"string"===typeof t.payload?{...e,selectedProxy:t.payload,useCustomRendition:!1,useRepresentative:!1}:{...e,selectedProxy:t.payload.proxy,useCustomRendition:Boolean(t.payload.useCustomRendition),useRepresentative:!1}:{...e,selectedProxy:"",useCustomRendition:!1,useRepresentative:!1};case"SET_SHOW_CUSTOM_RENDITION":return{...e,selectedProxy:"",showCustomRendition:t.payload};case"SET_SHOW_VERSION_HISTORY":return{...e,showVersionHistory:t.payload};case"SET_TRACKING_PARAMETERS":return{...e,trackingParameters:t.payload};case"SET_TRANSFORMATIONS":return{...e,transformations:[...e.transformations,t.payload]};case"SET_USE_REPRESENTATIVE":return{...e,selectedProxy:t.payload?"":e.selectedProxy,useRepresentative:t.payload};default:return e}},nr=e=>{let{allowCustomFormat:t,allowFavorites:n,allowProxy:r,allowTracking:o,autoExtension:i,availableExtensions:a,availableProxies:s,ctaText:l="Insert",extensions:c,isFavorite:u,maxHeight:d,open:h,previewUrl:p,selectedAsset:f,showVersions:m,supportedRepresentativeSubtypes:g,variant:v="dialog",boundary:b,onClose:y,onFavorite:x,onProxyConfirm:w,onFormatConfirm:k,onUnFavorite:S}=e;const[_,E]=(0,wt.useReducer)(tr,er),[C,A]=(0,wt.useState)(!1),T=(0,wt.useRef)(null),O=(0,wt.useRef)(null),P=(0,wt.useRef)(null),z=(0,wt.useCallback)((()=>{if(!f)return;const e=on(_.defaultSize.width,_.defaultSize.height);var t;(E({type:"SET_RESIZE_SIZE",payload:{...er.resizeSize,width:_.defaultSize.width,height:_.defaultSize.height}}),E({type:"SET_CROP_SIZE",payload:{...er.cropSize,width:_.defaultSize.width,height:_.defaultSize.height,percentageHeight:100,percentageWidth:100}}),E({type:"SET_ROTATION",payload:0}),E({type:"SET_LAST_CROP_SIZE",payload:{...er.lastCropSize,[rn.Nf.Pixel]:{width:_.defaultSize.width,height:_.defaultSize.height,percentageHeight:100,percentageWidth:100,x:0,y:0,unit:rn.Nf.Pixel},[rn.Nf.AspectRatio]:{width:e.width,height:e.height,percentageHeight:100,percentageWidth:100,x:0,y:0,unit:rn.Nf.AspectRatio}}}),E({type:"SET_LAST_RESIZE_SIZE",payload:{[rn.Nf.Pixel]:{width:_.defaultSize.width,height:_.defaultSize.height,unit:rn.Nf.Pixel},[rn.Nf.AspectRatio]:{width:e.width,height:e.height,unit:rn.Nf.AspectRatio}}}),s&&s.length>0)?(E({type:"SET_SELECTED_PROXY",payload:null===(t=s[0])||void 0===t?void 0:t.id}),E({type:"SET_SELECTED_FORMAT",payload:{...er.selectedFormat,url:f.imageUrl,originalUrl:f.originalUrl,extension:null!==i&&void 0!==i?i:f.extension,width:s[0].formatWidth||_.defaultSize.width,height:s[0].formatHeight||_.defaultSize.height}})):E({type:"SET_SELECTED_FORMAT",payload:{...er.selectedFormat,url:f.imageUrl,originalUrl:f.originalUrl,extension:null!==i&&void 0!==i?i:f.extension,width:_.defaultSize.width,height:_.defaultSize.height}})}),[i,s,f,_.defaultSize.height,_.defaultSize.width]);(0,wt.useEffect)((()=>{null!==f&&void 0!==f&&f.width&&null!==f&&void 0!==f&&f.height&&E({type:"SET_DEFAULT_SIZE",payload:{width:parseInt(f.width,10),height:parseInt(f.height,10)}})}),[null===f||void 0===f?void 0:f.width,null===f||void 0===f?void 0:f.height]),(0,wt.useEffect)((()=>{Promise.all([customElements.whenDefined("cx-dialog"),customElements.whenDefined("cx-drawer"),customElements.whenDefined("cx-dropdown")]).then((()=>{A(!0)}))}),[]),(0,wt.useEffect)((()=>{const e=e=>{_.isLoadingFavorites?e.preventDefault():_.showVersionHistory?(e.preventDefault(),E({type:"SET_SHOW_VERSION_HISTORY",payload:!1})):(E({type:"SET_PREVIEW_LOADABLE",payload:!1}),E({type:"RESET_DATA"}),y())},t=T.current,n=O.current;return null===t||void 0===t||t.addEventListener("cx-request-close",e),null===n||void 0===n||n.addEventListener("cx-request-close",e),()=>{null===t||void 0===t||t.removeEventListener("cx-request-close",e),null===n||void 0===n||n.removeEventListener("cx-request-close",e)}}),[b,C,y,_.isLoadingFavorites,_.showVersionHistory]),(0,wt.useEffect)((()=>{const e=T.current;e&&b&&(e.boundary=b)})),(0,wt.useEffect)((()=>{const e=()=>{E({type:"SET_PREVIEW_LOADABLE",payload:!0})},t=T.current,n=O.current;return null===t||void 0===t||t.addEventListener("cx-after-show",e),null===n||void 0===n||n.addEventListener("cx-after-show",e),()=>{null===t||void 0===t||t.removeEventListener("cx-after-show",e),null===n||void 0===n||n.removeEventListener("cx-after-show",e)}}),[C,_.showCustomRendition,v]),(0,wt.useEffect)((()=>{const e=e=>{const t=e.detail.item.value;if("custom"===t)return E({type:"SET_SHOW_CUSTOM_RENDITION",payload:!0}),void(_.useCustomRendition||z());if("tracking"!==t)if("use-representative"!==t){if(t&&s){if(!s.map((e=>e.id)).includes(t))return;E({type:"SET_SELECTED_PROXY",payload:t})}}else E({type:"SET_USE_REPRESENTATIVE",payload:!_.useRepresentative});else E({type:"SET_ENABLED_TRACKING",payload:!_.enabledTracking})},t=T.current,n=O.current;return null===t||void 0===t||t.addEventListener("cx-select",e),null===n||void 0===n||n.addEventListener("cx-select",e),()=>{null===t||void 0===t||t.removeEventListener("cx-select",e),null===n||void 0===n||n.removeEventListener("cx-select",e)}}),[C,_.enabledTracking,_.useCustomRendition,_.useRepresentative,z,s,null===f||void 0===f?void 0:f.extension]),(0,wt.useEffect)((()=>{z()}),[z]);const D=(0,wt.useMemo)((()=>{var e;return(null===g||void 0===g?void 0:g.includes(null!==(e=null===f||void 0===f?void 0:f.docSubType)&&void 0!==e?e:""))&&(null===f||void 0===f?void 0:f.imageUrl)}),[f,g]),R=(0,wt.useCallback)((e=>{E({type:"SET_LOADING",payload:e})}),[]),N=(0,wt.useCallback)((async(e,t,n,r)=>{if(!f)return;const o=_.selectedFormat.width||_.defaultSize.width,i=_.selectedFormat.height||_.defaultSize.height;if(E({type:"SET_RESIZE_SIZE",payload:{width:e,height:t,unit:n}}),r){var a;let r=e,s=t;_.resizeSize.unit!==n?(r=o,s=i):n===rn.Nf.AspectRatio&&(r=Math.round(e/t*i),s=i);const l=await(null===(a=P.current)||void 0===a?void 0:a.applyResize());E({type:"SET_SELECTED_FORMAT",payload:{url:l,width:r,height:s}}),E({type:"SET_TRANSFORMATIONS",payload:{key:rn.YQ.Resize,value:{width:r,height:s}}}),E({type:"SET_CROP_SIZE",payload:{width:r,height:s}});const c=on(r,s);E({type:"SET_LAST_RESIZE_SIZE",payload:{[rn.Nf.Pixel]:{width:r,height:s,unit:rn.Nf.Pixel},[rn.Nf.AspectRatio]:{width:n===rn.Nf.AspectRatio?e:c.width,height:n===rn.Nf.AspectRatio?t:c.height,unit:rn.Nf.AspectRatio}}}),E({type:"SET_LAST_CROP_SIZE",payload:{[rn.Nf.Pixel]:{width:r,height:s,percentageHeight:100,percentageWidth:100,x:0,y:0,unit:rn.Nf.Pixel},[rn.Nf.AspectRatio]:{width:n===rn.Nf.AspectRatio?e:c.width,height:n===rn.Nf.AspectRatio?t:c.height,percentageHeight:100,percentageWidth:100,x:0,y:0,unit:rn.Nf.AspectRatio}}})}}),[f,_.defaultSize.height,_.defaultSize.width,_.resizeSize.unit,_.selectedFormat.height,_.selectedFormat.width]),j=(0,wt.useCallback)((async(e,t,n,r)=>{var o,i;if(!f)return;const a=_.cropSize.unit,s=P.current;if(s&&null!==(o=_.selectedFormat)&&void 0!==o&&o.width&&null!==(i=_.selectedFormat)&&void 0!==i&&i.height){if(n===a&&n===rn.Nf.Pixel){const n=Math.max(e/_.selectedFormat.width,t/_.selectedFormat.height);s.setZoom(1/n)}n!==a&&s.setZoom(1)}if(E({type:"SET_CROP_SIZE",payload:{width:e,height:t,unit:n}}),r){var l;const r=await(null===(l=P.current)||void 0===l?void 0:l.applyCrop());let o=e,i=t;n===rn.Nf.AspectRatio&&(o=Math.round(_.cropSize.percentageWidth*_.selectedFormat.width/100),i=Math.round(_.cropSize.percentageHeight*_.selectedFormat.height/100)),null===s||void 0===s||s.setZoom(1);const a=Number((_.cropSize.x/100*_.selectedFormat.width).toFixed(0)),c=Number((_.cropSize.y/100*_.selectedFormat.height).toFixed(0));E({type:"SET_SELECTED_FORMAT",payload:{url:r,width:o,height:i}}),E({type:"SET_RESIZE_SIZE",payload:{width:o,height:i,unit:rn.Nf.Pixel}}),E({type:"SET_TRANSFORMATIONS",payload:{key:rn.YQ.Crop,value:{width:Number(o.toFixed(0)),height:Number(i.toFixed(0)),x:a,y:c}}});const u=on(o,i);E({type:"SET_LAST_CROP_SIZE",payload:{[rn.Nf.Pixel]:{width:Math.round(o),height:Math.round(i),percentageHeight:100,percentageWidth:100,x:0,y:0,unit:rn.Nf.Pixel},[rn.Nf.AspectRatio]:{width:n===rn.Nf.AspectRatio?e:u.width,height:n===rn.Nf.AspectRatio?t:u.height,percentageHeight:100,percentageWidth:100,x:0,y:0,unit:rn.Nf.AspectRatio}}}),E({type:"SET_LAST_RESIZE_SIZE",payload:{[rn.Nf.Pixel]:{width:o,height:i,unit:rn.Nf.Pixel},[rn.Nf.AspectRatio]:{width:n===rn.Nf.AspectRatio?e:u.width,height:n===rn.Nf.AspectRatio?t:u.height,unit:rn.Nf.AspectRatio}}})}}),[f,_.cropSize,_.selectedFormat.height,_.selectedFormat.width]),I=(0,wt.useCallback)((async(e,t)=>{if(E({type:"SET_ROTATION",payload:t?0:e}),t){var n;const{width:t,height:r}=an(_.selectedFormat.width,_.selectedFormat.height,e),o=await(null===(n=P.current)||void 0===n?void 0:n.applyRotation());E({type:"SET_SELECTED_FORMAT",payload:{rotation:e,url:o,width:t,height:r}}),E({type:"SET_TRANSFORMATIONS",payload:{key:rn.YQ.Rotate,value:{rotation:e}}}),E({type:"SET_CROP_SIZE",payload:{width:t,height:r}}),E({type:"SET_RESIZE_SIZE",payload:{width:t,height:r,unit:rn.Nf.Pixel}});const i=on(t,r);E({type:"SET_LAST_CROP_SIZE",payload:{[rn.Nf.Pixel]:{width:t,height:r,percentageHeight:100,percentageWidth:100,x:0,y:0,unit:rn.Nf.Pixel},[rn.Nf.AspectRatio]:{width:i.width,height:i.height,percentageHeight:100,percentageWidth:100,x:0,y:0,unit:rn.Nf.AspectRatio}}}),E({type:"SET_LAST_RESIZE_SIZE",payload:{[rn.Nf.Pixel]:{width:t,height:r,unit:rn.Nf.Pixel},[rn.Nf.AspectRatio]:{width:i.width,height:i.height,unit:rn.Nf.AspectRatio}}})}}),[_.selectedFormat]),M=(0,wt.useCallback)((e=>{E({type:"SET_SELECTED_FORMAT",payload:{extension:e}})}),[]),L=(0,wt.useCallback)((e=>{E({type:"SET_CROP_SIZE",payload:{width:_.selectedFormat.width,height:_.selectedFormat.height,unit:rn.Nf.Pixel}}),E({type:"SET_RESIZE_SIZE",payload:{width:_.selectedFormat.width,height:_.selectedFormat.height,unit:rn.Nf.Pixel}}),E({type:"SET_ROTATION",payload:0}),E({type:"SET_ACTIVE_SETTING",payload:e})}),[_.selectedFormat]),F=(0,wt.useCallback)((()=>{E({type:"SET_SHOW_VERSION_HISTORY",payload:!0})}),[]),B=(0,wt.useCallback)((e=>{let t=e.formatWidth,n=e.formatHeight;"TRX"===e.proxyName&&f&&(t=Number(f.width),n=Number(f.height)),E({type:"SET_SELECTED_PROXY",payload:{proxy:e.id,useCustomRendition:!0}}),E({type:"SET_SELECTED_FORMAT",payload:{width:t,height:n}}),E({type:"SET_RESIZE_SIZE",payload:{width:t,height:n,unit:rn.Nf.Pixel}}),E({type:"SET_CROP_SIZE",payload:{width:t,height:n,percentageWidth:100,percentageHeight:100,x:0,y:0,unit:rn.Nf.Pixel}});const r=on(t,n);E({type:"SET_LAST_CROP_SIZE",payload:{[rn.Nf.Pixel]:{width:Math.round(t),height:Math.round(n),percentageHeight:100,percentageWidth:100,x:0,y:0,unit:rn.Nf.Pixel},[rn.Nf.AspectRatio]:{width:r.width,height:r.height,percentageHeight:100,percentageWidth:100,x:0,y:0,unit:rn.Nf.AspectRatio}}}),E({type:"SET_LAST_RESIZE_SIZE",payload:{[rn.Nf.Pixel]:{width:t,height:n,unit:rn.Nf.Pixel},[rn.Nf.AspectRatio]:{width:r.width,height:r.height,unit:rn.Nf.AspectRatio}}})}),[f]),U=(0,wt.useCallback)((e=>{E({type:"SET_QUALITY",payload:e}),E({type:"SET_TRANSFORMATIONS",payload:{key:rn.YQ.Quality,value:{quality:e}}})}),[]),V=(0,wt.useCallback)((e=>{E({type:"SET_KEEP_METADATA",payload:e}),E({type:"SET_TRANSFORMATIONS",payload:{key:rn.YQ.KeepMetadata,value:{keepMetadata:e}}})}),[]);(0,wt.useEffect)((()=>{s&&0!==s.length?E({type:"SET_SELECTED_PROXY",payload:s[0].id}):E({type:"SET_SELECTED_PROXY",payload:""})}),[s,f]);const q=(0,wt.useCallback)((()=>{const e=_.isLoading||!_.selectedProxy&&!_.useCustomRendition&&!_.useRepresentative,d=t&&c.includes(f?f.extension:""),h=s&&Object.values(s).flat().length>0,g=Boolean(_.selectedFormat.width&&_.selectedFormat.height&&_.useCustomRendition);return(0,Vt.jsxs)(Vt.Fragment,{children:[_.showVersionHistory?(0,Vt.jsx)("cx-space",{slot:"label","justify-content":"space-between","align-items":"center",children:(0,Vt.jsxs)("cx-space",{direction:"vertical",spacing:"2x-small",style:{flex:"1"},children:[(0,Vt.jsx)("cx-typography",{variant:"h4",children:"Version history"}),(0,Vt.jsx)("cx-typography",{variant:"body3",className:"asset-name",children:(0,Vt.jsx)("cx-line-clamp",{lines:1,children:null===f||void 0===f?void 0:f.name})})]})}):(0,Vt.jsxs)(Vt.Fragment,{children:[(0,Vt.jsx)("cx-space",{slot:"label","justify-content":"space-between","align-items":"center",children:(0,Vt.jsxs)("cx-space",{direction:"vertical",spacing:"2x-small",style:{flex:"1"},children:[(0,Vt.jsx)("cx-typography",{variant:"h4",children:r?"Formats":"Preview"}),(0,Vt.jsx)("cx-typography",{variant:"body3",className:"asset-name",children:(0,Vt.jsx)("cx-line-clamp",{lines:1,children:null===f||void 0===f?void 0:f.name})})]})}),n&&(0,Vt.jsx)("cx-tooltip",{slot:"header-actions",content:u?"Unfavorite":"Favorite",placement:"bottom",children:_.isLoadingFavorites?(0,Vt.jsx)("cx-space",{"align-items":"center","justify-content":"center",style:{width:"32px",height:"32px"},children:(0,Vt.jsx)("cx-spinner",{})}):(0,Vt.jsx)("cx-icon-button",{name:u?"star":"star_outline",style:{color:u?"var(--cx-color-warning)":"var(--cx-color-text)"},onClick:async()=>{_.isLoadingFavorites||(E({type:"SET_LOADING_FAVORITES",payload:!0}),u?await S():await x(),E({type:"SET_LOADING_FAVORITES",payload:!1}))}})}),m&&(0,Vt.jsx)("cx-tooltip",{slot:"header-actions",content:"Version history",placement:"bottom",children:(0,Vt.jsx)("cx-icon-button",{name:"history",onClick:F})})]}),(()=>{let e=null,t=null;if(e=_.selectedFormat.width&&_.selectedFormat.height&&(null===f||void 0===f?void 0:f.docType)!==Xt.zu.Video?(0,Vt.jsx)(En,{ref:P,loadable:_.previewLoadable,image:_.selectedFormat,selectedProxy:_.selectedProxy,resizer:_.resizeSize,cropper:_.cropSize,rotation:_.rotation,disabled:"crop"!==_.activeSetting||!_.showCustomRendition,onCropComplete:e=>{E({type:"SET_CROP_SIZE",payload:{percentageWidth:e.width,percentageHeight:e.height,x:e.x,y:e.y}})},onLoadingChange:R}):(0,Vt.jsx)(Hn,{loadable:_.previewLoadable,asset:{docType:null===f||void 0===f?void 0:f.docType,imageUrl:null===f||void 0===f?void 0:f.imageUrl,videoUrl:p,extension:null===f||void 0===f?void 0:f.extension},onLoad:e=>{if(null!==f&&void 0!==f&&f.width&&null!==f&&void 0!==f&&f.height||null===f||void 0===f||!f.imageUrl)return;const t=null!==f&&void 0!==f&&f.width?parseInt(f.width,10):e.width,n=null!==f&&void 0!==f&&f.height?parseInt(f.height,10):e.height;E({type:"SET_DEFAULT_SIZE",payload:{width:t,height:n}})}}),_.showVersionHistory)return(0,Vt.jsx)(Jn,{assetId:null===f||void 0===f?void 0:f.id});if(!r)return e;var n;_.showCustomRendition&&s?t=(0,Vt.jsx)(Fn,{activeSetting:_.activeSetting,extensions:a&&null!==f&&void 0!==f&&f.docType?(0,nn.A)([...a[f.docType],{displayName:"Automatic",value:i}],"value"):[{displayName:"Automatic",value:i}],availableProxies:s,imageSize:{width:_.selectedFormat.width?_.selectedFormat.width:1/0,height:_.selectedFormat.height?_.selectedFormat.height:1/0},resize:{width:_.resizeSize.width,height:_.resizeSize.height,unit:_.resizeSize.unit},crop:_.cropSize,keepMetadata:_.keepMetadata,lastAppliedCrop:_.lastCropSize,lastAppliedResize:_.lastResizeSize,proxy:_.selectedProxy,quality:_.quality,rotation:_.rotation,extension:_.selectedFormat.extension,onCropChange:j,onExtensionChange:M,onFormatChange:B,onKeepMetadataChange:V,onQualityChange:U,onResizeChange:N,onRotateChange:I,onViewChange:L}):t=(0,Vt.jsx)("cx-space",{direction:"vertical",spacing:"small",children:h||d?(0,Vt.jsxs)("div",{style:{width:"100%"},children:[h&&(0,Vt.jsx)($n,{items:null===s||void 0===s?void 0:s.map((e=>{var t;return"TRX"===e.proxyName&&f?{value:e.id,name:e.proxyLabel,cdnName:e.cdnName,width:f.width,height:f.height,extension:f.extension,docType:f.docType}:{value:e.id,name:e.proxyLabel,cdnName:e.cdnName,width:String(e.formatWidth),height:String(e.formatHeight),extension:null!==(t=e.extension)&&void 0!==t?t:void 0,docType:null===f||void 0===f?void 0:f.docType}})),selectedDisabled:_.useCustomRendition,selectedItem:_.selectedProxy,children:D&&(0,Vt.jsxs)("cx-menu-item",{value:"use-representative",children:[(0,Vt.jsx)("cx-typography",{variant:"body3",className:"proxy__name "+(_.useRepresentative?"selected":""),children:"Representative image"}),(0,Vt.jsx)("cx-icon",{slot:"suffix",name:_.useRepresentative?"check":""})]})}),d&&(0,Vt.jsx)($n,{items:[],selectedItem:_.selectedProxy,style:{borderTopWidth:"0"},children:(0,Vt.jsxs)("cx-menu-item",{value:"custom","data-cy":"custom-rendition-menu-item",children:[(0,Vt.jsx)("cx-icon",{slot:"prefix",name:"crop_rotate",className:"icon--large"}),(0,Vt.jsxs)("div",{children:[(0,Vt.jsx)("cx-typography",{variant:"body3",className:"proxy__name "+(_.useCustomRendition?"selected":""),children:"Custom format"}),g?(0,Vt.jsxs)("cx-typography",{variant:"body3",className:"proxy__details",children:[_.selectedFormat.width," x"," ",_.selectedFormat.height,_.selectedFormat.extension&&(0,Vt.jsx)("div",{className:"proxy__extension-dot"}),null===(n=_.selectedFormat.extension)||void 0===n?void 0:n.replace(/^\./,"").toUpperCase()]}):null]}),(0,Vt.jsx)("cx-icon",{slot:"suffix",name:_.useCustomRendition?"edit":"",className:"icon--large"}),(0,Vt.jsx)("cx-icon",{slot:"suffix",name:_.useCustomRendition?"check":"",className:"icon--large icon--primary"})]})}),o&&(0,Vt.jsxs)("div",{style:{backgroundColor:"var(--cx-color-neutral-0)",width:"100%"},children:[(0,Vt.jsx)($n,{children:(0,Vt.jsxs)("cx-menu-item",{value:"tracking",className:"proxy--switch",children:[(0,Vt.jsx)("cx-typography",{variant:"body3",className:"proxy__name",children:"Tracking parameters"}),(0,Vt.jsx)("cx-switch",{checked:_.enabledTracking,onClick:e=>e.preventDefault()})]})}),_.enabledTracking&&(0,Vt.jsx)(Qn,{values:_.trackingParameters,onChange:e=>E({type:"SET_TRACKING_PARAMETERS",payload:e})})]})]}):(0,Vt.jsxs)("cx-space",{"align-items":"center",spacing:"large",wrap:"nowrap",style:{backgroundColor:"var(--cx-color-neutral-0)",width:"100%",padding:"var(--cx-spacing-medium)",gap:"20px"},children:[(0,Vt.jsx)("cx-icon",{style:{color:"var(--cx-color-warning)"},name:"warning",className:"ic_warning_amber"}),(0,Vt.jsx)("cx-typography",{variant:"body3",className:"proxy__name",children:"You don't have permission to share this asset."})]})});return(0,Vt.jsxs)(Vt.Fragment,{children:[e,t]})})(),(()=>{if(_.showVersionHistory)return null;let t=null;return t=r?_.showCustomRendition?(0,Vt.jsxs)("cx-space",{spacing:"small",style:{width:"fit-content"},children:[(0,Vt.jsx)("cx-button",{variant:"default",onClick:()=>{var e,t,n,r,o;_.useCustomRendition?E({type:"CANCEL_USE_CUSTOM_RENDITION",payload:{url:_.defaultSelectedFormat.url,originalUrl:_.defaultSelectedFormat.originalUrl,width:_.defaultSelectedFormat.width,height:_.defaultSelectedFormat.height,extension:_.defaultSelectedFormat.extension,useCustomRendition:!0}}):E({type:"CANCEL_USE_CUSTOM_RENDITION",payload:{url:null!==(e=null===f||void 0===f?void 0:f.imageUrl)&&void 0!==e?e:"",originalUrl:null!==(t=null===f||void 0===f?void 0:f.originalUrl)&&void 0!==t?t:"",width:parseInt(null!==(n=null===f||void 0===f?void 0:f.width)&&void 0!==n?n:"0",10),height:parseInt(null!==(r=null===f||void 0===f?void 0:f.height)&&void 0!==r?r:"0",10),extension:null!==(o=null===f||void 0===f?void 0:f.extension)&&void 0!==o?o:"",useCustomRendition:!1}})},children:"Cancel"}),(0,Vt.jsx)("cx-button",{variant:"primary",onClick:()=>{E({type:"CONFIRM_USE_CUSTOM_RENDITION"})},children:"Done"})]}):(0,Vt.jsx)("cx-button",{className:"dialog__footer__button",disabled:e,loading:_.isLoadingConfirm,variant:"primary",style:{flex:1},onClick:async()=>{const e=null===s||void 0===s?void 0:s.find((e=>e.id===_.selectedProxy));if(_.useCustomRendition)E({type:"SET_LOADING_CONFIRM",payload:!0}),await k({value:_.transformations,parameters:_.enabledTracking?_.trackingParameters:void 0,proxiesPreference:null===e||void 0===e?void 0:e.proxyName,extension:_.selectedFormat.extension}),E({type:"SET_LOADING_CONFIRM",payload:!1});else{var t,n,r;if(null===f||void 0===f||!f.docType)return;if(!e&&!_.useRepresentative)return;E({type:"SET_LOADING_CONFIRM",payload:!0}),await w({extension:null!==(t=null===e||void 0===e?void 0:e.extension)&&void 0!==t?t:f.extension,value:null!==(n=null===e||void 0===e?void 0:e.proxyName)&&void 0!==n?n:"",permanentLink:null!==(r=null===e||void 0===e?void 0:e.permanentLink)&&void 0!==r?r:void 0,parameters:_.enabledTracking?_.trackingParameters:void 0,useRepresentative:_.useRepresentative}),E({type:"SET_LOADING_CONFIRM",payload:!1})}E({type:"RESET_DATA"}),y()},children:null!==l&&void 0!==l?l:"Insert"}):(0,Vt.jsxs)("cx-button",{className:"dialog__footer__button",loading:_.isLoadingConfirm,onClick:async()=>{null!==f&&void 0!==f&&f.docType&&(E({type:"SET_LOADING_CONFIRM",payload:!0}),await w({extension:f.extension,useRepresentative:!0,value:""}),E({type:"SET_LOADING_CONFIRM",payload:!1}))},variant:"primary",children:[(0,Vt.jsx)("cx-icon",{slot:"prefix",name:"folder"}),l]}),(0,Vt.jsx)("div",{slot:"footer",className:"dialog__footer",children:t})})()]})}),[t,n,r,o,i,a,s,l,c,u,F,p,f,m,_,D,y,j,M,x,B,k,V,R,w,U,N,I,S,L]);return"drawer"===v?(0,Vt.jsx)(Un,{ref:O,className:"dialog",label:"Drawer",placement:"bottom",contained:!0,open:h,children:q()}):(0,Vt.jsx)(Bn,{ref:T,className:"dialog",open:h,"use-overlay-scrollbar":!0,style:{"--max-height":`${d}px`,"--max-width":_.showVersionHistory?"600px":"520px"},children:q()})};var rr=n(5650);const or=(0,Ft.Ay)("cx-space")`
|
|
623
|
+
`;var Gn=n(3943);const Zn=e=>{let{src:t,alt:n}=e;const[r,o]=(0,wt.useState)("horizontal"),i=(0,wt.useRef)(null),a=(0,wt.useCallback)((()=>{if(i.current){const{naturalWidth:e,naturalHeight:t}=i.current;o(e>t?"horizontal":"vertical")}}),[]);return(0,Vt.jsx)("div",{className:`version__item__preview version__item__preview--${r}`,children:(0,Vt.jsx)("img",{ref:i,src:t,alt:n,onLoad:a})})},Yn=e=>{let{src:t}=e;const[n,r]=(0,wt.useState)("horizontal"),o=(0,wt.useRef)(null),i=(0,wt.useCallback)((()=>{if(o.current){const{videoWidth:e,videoHeight:t}=o.current;r(e>t?"horizontal":"vertical")}}),[]);return(0,Vt.jsx)("div",{className:`version__item__preview version__item__preview--${n}`,children:(0,Vt.jsx)("video",{ref:o,src:t,onLoadedMetadata:i,controls:!0})})},Jn=e=>{var t;let{assetId:n}=e;const{data:r,isFetching:o,isLoading:i}=(0,Gn.cP)(n?{assetId:n}:Lt.hT);return o||i?(0,Vt.jsx)(Xn,{children:(0,Vt.jsx)("cx-spinner",{})}):(0,Vt.jsx)(Xn,{children:(0,Vt.jsx)("cx-menu",{children:null===r||void 0===r||null===(t=r.versions)||void 0===t?void 0:t.map(((e,t)=>(0,Vt.jsx)("cx-menu-item",{className:"version__item",readonly:!0,children:(0,Vt.jsxs)("cx-grid",{columns:5,spacing:"12px",children:[(0,Vt.jsx)("cx-grid-item",{xs:"2",sm:"2",children:(0,Vt.jsxs)("cx-space",{direction:"horizontal","align-items":"center",wrap:"nowrap",children:[(0,Vt.jsx)("div",{className:"version__item__number",children:(0,Vt.jsx)("cx-line-clamp",{lines:1,children:e.versionNumberDisplay})}),e.scrubUrl?(0,Vt.jsx)(Yn,{src:e.scrubUrl}):(0,Vt.jsx)(Zn,{src:e.versionFileUrl,alt:e.versionFileName})]})}),(0,Vt.jsx)("cx-grid-item",{xs:"2",sm:"3",children:(0,Vt.jsxs)("cx-space",{direction:"vertical",spacing:"2x-small",children:[(0,Vt.jsx)("cx-line-clamp",{lines:1,children:(0,Vt.jsx)("cx-typography",{variant:"body3",className:"version__item__name",children:e.versionFileName})}),(0,Vt.jsx)("cx-line-clamp",{lines:1,children:(0,Vt.jsx)("cx-typography",{variant:"body3",children:e.createByEmail})}),(0,Vt.jsxs)("cx-typography",{variant:"body3",children:[e.versionCreateDate.split(" ")[0],0===t&&(0,Vt.jsx)("span",{className:"version__item__latest",children:"Current version"})]})]})})]})},e.versionNumber)))})})},er={previewLoadable:!1,defaultSize:{width:0,height:0},selectedProxy:"",selectedFormat:{url:"",originalUrl:"",width:0,height:0,x:0,y:0,extension:"",rotation:0},defaultSelectedFormat:{url:"",originalUrl:"",width:0,height:0,x:0,y:0,extension:"",rotation:0},resizeSize:{width:0,height:0,unit:rn.Nf.Pixel},lastResizeSize:{[rn.Nf.AspectRatio]:{width:0,height:0,unit:rn.Nf.AspectRatio},[rn.Nf.Pixel]:{width:0,height:0,unit:rn.Nf.Pixel}},cropSize:{width:0,height:0,percentageWidth:0,percentageHeight:0,x:0,y:0,unit:rn.Nf.Pixel},lastCropSize:{[rn.Nf.AspectRatio]:{width:0,height:0,percentageWidth:0,percentageHeight:0,x:0,y:0,unit:rn.Nf.AspectRatio},[rn.Nf.Pixel]:{width:0,height:0,percentageWidth:0,percentageHeight:0,x:0,y:0,unit:rn.Nf.Pixel}},isLoadingConfirm:!1,isLoadingFavorites:!1,rotation:0,quality:100,keepMetadata:!1,transformations:[],enabledTracking:!1,trackingParameters:[{key:"UTM_source",value:""},{key:"UTM_campaign",value:""},{key:"UTM_description",value:""}],showCustomRendition:!1,showVersionHistory:!1,useCustomRendition:!1,useRepresentative:!1,activeSetting:"format",isLoading:!1},tr=(e,t)=>{switch(t.type){case"CANCEL_USE_CUSTOM_RENDITION":return{...e,cropSize:{...e.cropSize,width:t.payload.width,height:t.payload.height},resizeSize:{...e.resizeSize,width:t.payload.width,height:t.payload.height},selectedFormat:{...e.selectedFormat,...t.payload,rotation:0,x:0,y:0},rotation:0,transformations:[],showCustomRendition:!1,activeSetting:"format"};case"CONFIRM_USE_CUSTOM_RENDITION":return{...e,cropSize:{...e.cropSize,width:e.selectedFormat.width,height:e.selectedFormat.height},resizeSize:{...e.resizeSize,width:e.selectedFormat.width,height:e.selectedFormat.height},rotation:0,activeSetting:"format",showCustomRendition:!1,useCustomRendition:!0,defaultSelectedFormat:{...e.selectedFormat}};case"SET_DEFAULT_SIZE":return{...e,defaultSize:{...e.defaultSize,...t.payload}};case"RESET_DATA":return er;case"SET_ACTIVE_SETTING":return{...e,activeSetting:t.payload};case"SET_CROP_SIZE":return{...e,cropSize:{...e.cropSize,...t.payload}};case"SET_ENABLED_TRACKING":return{...e,enabledTracking:t.payload};case"SET_KEEP_METADATA":return{...e,keepMetadata:t.payload};case"SET_LAST_CROP_SIZE":return{...e,lastCropSize:{...e.lastCropSize,...t.payload}};case"SET_LAST_RESIZE_SIZE":return{...e,lastResizeSize:{...e.lastResizeSize,...t.payload}};case"SET_LOADING":return{...e,isLoading:t.payload};case"SET_LOADING_CONFIRM":return{...e,isLoadingConfirm:t.payload};case"SET_LOADING_FAVORITES":return{...e,isLoadingFavorites:t.payload};case"SET_PREVIEW_LOADABLE":return{...e,previewLoadable:t.payload};case"SET_QUALITY":return{...e,quality:t.payload};case"SET_RESIZE_SIZE":return{...e,resizeSize:{...e.resizeSize,...t.payload}};case"SET_ROTATION":return{...e,rotation:t.payload};case"SET_SELECTED_FORMAT":return{...e,selectedFormat:{...e.selectedFormat,...t.payload}};case"SET_SELECTED_PROXY":return t.payload?"string"===typeof t.payload?{...e,selectedProxy:t.payload,useCustomRendition:!1,useRepresentative:!1}:{...e,selectedProxy:t.payload.proxy,useCustomRendition:Boolean(t.payload.useCustomRendition),useRepresentative:!1}:{...e,selectedProxy:"",useCustomRendition:!1,useRepresentative:!1};case"SET_SHOW_CUSTOM_RENDITION":return{...e,selectedProxy:"",showCustomRendition:t.payload};case"SET_SHOW_VERSION_HISTORY":return{...e,showVersionHistory:t.payload};case"SET_TRACKING_PARAMETERS":return{...e,trackingParameters:t.payload};case"SET_TRANSFORMATIONS":return{...e,transformations:[...e.transformations,t.payload]};case"SET_USE_REPRESENTATIVE":return{...e,selectedProxy:t.payload?"":e.selectedProxy,useRepresentative:t.payload};default:return e}},nr=e=>{let{allowCustomFormat:t,allowFavorites:n,allowProxy:r,allowTracking:o,autoExtension:i,availableExtensions:a,availableProxies:s,ctaText:l="Insert",extensions:c,isFavorite:u,maxHeight:d,open:h,previewUrl:p,selectedAsset:f,showVersions:m,supportedRepresentativeSubtypes:g,variant:v="dialog",boundary:b,onClose:y,onFavorite:x,onProxyConfirm:w,onFormatConfirm:k,onUnFavorite:S}=e;const[_,E]=(0,wt.useReducer)(tr,er),[C,A]=(0,wt.useState)(!1),T=(0,wt.useRef)(null),O=(0,wt.useRef)(null),P=(0,wt.useRef)(null),z=(0,wt.useCallback)((()=>{if(!f)return;const e=on(_.defaultSize.width,_.defaultSize.height);var t;(E({type:"SET_RESIZE_SIZE",payload:{...er.resizeSize,width:_.defaultSize.width,height:_.defaultSize.height}}),E({type:"SET_CROP_SIZE",payload:{...er.cropSize,width:_.defaultSize.width,height:_.defaultSize.height,percentageHeight:100,percentageWidth:100}}),E({type:"SET_ROTATION",payload:0}),E({type:"SET_LAST_CROP_SIZE",payload:{...er.lastCropSize,[rn.Nf.Pixel]:{width:_.defaultSize.width,height:_.defaultSize.height,percentageHeight:100,percentageWidth:100,x:0,y:0,unit:rn.Nf.Pixel},[rn.Nf.AspectRatio]:{width:e.width,height:e.height,percentageHeight:100,percentageWidth:100,x:0,y:0,unit:rn.Nf.AspectRatio}}}),E({type:"SET_LAST_RESIZE_SIZE",payload:{[rn.Nf.Pixel]:{width:_.defaultSize.width,height:_.defaultSize.height,unit:rn.Nf.Pixel},[rn.Nf.AspectRatio]:{width:e.width,height:e.height,unit:rn.Nf.AspectRatio}}}),s&&s.length>0)?(E({type:"SET_SELECTED_PROXY",payload:null===(t=s[0])||void 0===t?void 0:t.id}),E({type:"SET_SELECTED_FORMAT",payload:{...er.selectedFormat,url:f.imageUrl,originalUrl:f.originalUrl,extension:null!==i&&void 0!==i?i:f.extension,width:s[0].formatWidth||_.defaultSize.width,height:s[0].formatHeight||_.defaultSize.height}})):E({type:"SET_SELECTED_FORMAT",payload:{...er.selectedFormat,url:f.imageUrl,originalUrl:f.originalUrl,extension:null!==i&&void 0!==i?i:f.extension,width:_.defaultSize.width,height:_.defaultSize.height}})}),[i,s,f,_.defaultSize.height,_.defaultSize.width]);(0,wt.useEffect)((()=>{null!==f&&void 0!==f&&f.width&&null!==f&&void 0!==f&&f.height&&E({type:"SET_DEFAULT_SIZE",payload:{width:parseInt(f.width,10),height:parseInt(f.height,10)}})}),[null===f||void 0===f?void 0:f.width,null===f||void 0===f?void 0:f.height]),(0,wt.useEffect)((()=>{Promise.all([customElements.whenDefined("cx-dialog"),customElements.whenDefined("cx-drawer"),customElements.whenDefined("cx-dropdown")]).then((()=>{A(!0)}))}),[]),(0,wt.useEffect)((()=>{const e=e=>{_.isLoadingFavorites?e.preventDefault():_.showVersionHistory?(e.preventDefault(),E({type:"SET_SHOW_VERSION_HISTORY",payload:!1})):(E({type:"SET_PREVIEW_LOADABLE",payload:!1}),E({type:"RESET_DATA"}),y())},t=T.current,n=O.current;return null===t||void 0===t||t.addEventListener("cx-request-close",e),null===n||void 0===n||n.addEventListener("cx-request-close",e),()=>{null===t||void 0===t||t.removeEventListener("cx-request-close",e),null===n||void 0===n||n.removeEventListener("cx-request-close",e)}}),[b,C,y,_.isLoadingFavorites,_.showVersionHistory]),(0,wt.useEffect)((()=>{const e=T.current;e&&b&&(e.boundary=b)})),(0,wt.useEffect)((()=>{const e=()=>{E({type:"SET_PREVIEW_LOADABLE",payload:!0})},t=T.current,n=O.current;return null===t||void 0===t||t.addEventListener("cx-after-show",e),null===n||void 0===n||n.addEventListener("cx-after-show",e),()=>{null===t||void 0===t||t.removeEventListener("cx-after-show",e),null===n||void 0===n||n.removeEventListener("cx-after-show",e)}}),[C,_.showCustomRendition,v]),(0,wt.useEffect)((()=>{const e=e=>{const t=e.detail.item.value;if("custom"===t)return E({type:"SET_SHOW_CUSTOM_RENDITION",payload:!0}),void(_.useCustomRendition||z());if("tracking"!==t)if("use-representative"!==t){if(t&&s){if(!s.map((e=>e.id)).includes(t))return;E({type:"SET_SELECTED_PROXY",payload:t})}}else E({type:"SET_USE_REPRESENTATIVE",payload:!_.useRepresentative});else E({type:"SET_ENABLED_TRACKING",payload:!_.enabledTracking})},t=T.current,n=O.current;return null===t||void 0===t||t.addEventListener("cx-select",e),null===n||void 0===n||n.addEventListener("cx-select",e),()=>{null===t||void 0===t||t.removeEventListener("cx-select",e),null===n||void 0===n||n.removeEventListener("cx-select",e)}}),[C,_.enabledTracking,_.useCustomRendition,_.useRepresentative,z,s,null===f||void 0===f?void 0:f.extension]),(0,wt.useEffect)((()=>{z()}),[z]);const D=(0,wt.useMemo)((()=>{var e;return(null===g||void 0===g?void 0:g.includes(null!==(e=null===f||void 0===f?void 0:f.docSubType)&&void 0!==e?e:""))&&(null===f||void 0===f?void 0:f.imageUrl)}),[f,g]),R=(0,wt.useCallback)((e=>{E({type:"SET_LOADING",payload:e})}),[]),N=(0,wt.useCallback)((async(e,t,n,r)=>{if(!f)return;const o=_.selectedFormat.width||_.defaultSize.width,i=_.selectedFormat.height||_.defaultSize.height;if(E({type:"SET_RESIZE_SIZE",payload:{width:e,height:t,unit:n}}),r){var a;let r=e,s=t;_.resizeSize.unit!==n?(r=o,s=i):n===rn.Nf.AspectRatio&&(r=Math.round(e/t*i),s=i);const l=await(null===(a=P.current)||void 0===a?void 0:a.applyResize());E({type:"SET_SELECTED_FORMAT",payload:{url:l,width:r,height:s}}),E({type:"SET_TRANSFORMATIONS",payload:{key:rn.YQ.Resize,value:{width:r,height:s}}}),E({type:"SET_CROP_SIZE",payload:{width:r,height:s}});const c=on(r,s);E({type:"SET_LAST_RESIZE_SIZE",payload:{[rn.Nf.Pixel]:{width:r,height:s,unit:rn.Nf.Pixel},[rn.Nf.AspectRatio]:{width:n===rn.Nf.AspectRatio?e:c.width,height:n===rn.Nf.AspectRatio?t:c.height,unit:rn.Nf.AspectRatio}}}),E({type:"SET_LAST_CROP_SIZE",payload:{[rn.Nf.Pixel]:{width:r,height:s,percentageHeight:100,percentageWidth:100,x:0,y:0,unit:rn.Nf.Pixel},[rn.Nf.AspectRatio]:{width:n===rn.Nf.AspectRatio?e:c.width,height:n===rn.Nf.AspectRatio?t:c.height,percentageHeight:100,percentageWidth:100,x:0,y:0,unit:rn.Nf.AspectRatio}}})}}),[f,_.defaultSize.height,_.defaultSize.width,_.resizeSize.unit,_.selectedFormat.height,_.selectedFormat.width]),j=(0,wt.useCallback)((async(e,t,n,r)=>{var o,i;if(!f)return;const a=_.cropSize.unit,s=P.current;if(s&&null!==(o=_.selectedFormat)&&void 0!==o&&o.width&&null!==(i=_.selectedFormat)&&void 0!==i&&i.height){if(n===a&&n===rn.Nf.Pixel){const n=Math.max(e/_.selectedFormat.width,t/_.selectedFormat.height);s.setZoom(1/n)}n!==a&&s.setZoom(1)}if(E({type:"SET_CROP_SIZE",payload:{width:e,height:t,unit:n}}),r){var l;const r=await(null===(l=P.current)||void 0===l?void 0:l.applyCrop());let o=e,i=t;n===rn.Nf.AspectRatio&&(o=Math.round(_.cropSize.percentageWidth*_.selectedFormat.width/100),i=Math.round(_.cropSize.percentageHeight*_.selectedFormat.height/100)),null===s||void 0===s||s.setZoom(1);const a=Number((_.cropSize.x/100*_.selectedFormat.width).toFixed(0)),c=Number((_.cropSize.y/100*_.selectedFormat.height).toFixed(0));E({type:"SET_SELECTED_FORMAT",payload:{url:r,width:o,height:i}}),E({type:"SET_RESIZE_SIZE",payload:{width:o,height:i,unit:rn.Nf.Pixel}}),E({type:"SET_TRANSFORMATIONS",payload:{key:rn.YQ.Crop,value:{width:Number(o.toFixed(0)),height:Number(i.toFixed(0)),x:a,y:c}}});const u=on(o,i);E({type:"SET_LAST_CROP_SIZE",payload:{[rn.Nf.Pixel]:{width:Math.round(o),height:Math.round(i),percentageHeight:100,percentageWidth:100,x:0,y:0,unit:rn.Nf.Pixel},[rn.Nf.AspectRatio]:{width:n===rn.Nf.AspectRatio?e:u.width,height:n===rn.Nf.AspectRatio?t:u.height,percentageHeight:100,percentageWidth:100,x:0,y:0,unit:rn.Nf.AspectRatio}}}),E({type:"SET_LAST_RESIZE_SIZE",payload:{[rn.Nf.Pixel]:{width:o,height:i,unit:rn.Nf.Pixel},[rn.Nf.AspectRatio]:{width:n===rn.Nf.AspectRatio?e:u.width,height:n===rn.Nf.AspectRatio?t:u.height,unit:rn.Nf.AspectRatio}}})}}),[f,_.cropSize,_.selectedFormat.height,_.selectedFormat.width]),I=(0,wt.useCallback)((async(e,t)=>{if(E({type:"SET_ROTATION",payload:t?0:e}),t){var n;const{width:t,height:r}=an(_.selectedFormat.width,_.selectedFormat.height,e),o=await(null===(n=P.current)||void 0===n?void 0:n.applyRotation());E({type:"SET_SELECTED_FORMAT",payload:{rotation:e,url:o,width:t,height:r}}),E({type:"SET_TRANSFORMATIONS",payload:{key:rn.YQ.Rotate,value:{rotation:e}}}),E({type:"SET_CROP_SIZE",payload:{width:t,height:r}}),E({type:"SET_RESIZE_SIZE",payload:{width:t,height:r,unit:rn.Nf.Pixel}});const i=on(t,r);E({type:"SET_LAST_CROP_SIZE",payload:{[rn.Nf.Pixel]:{width:t,height:r,percentageHeight:100,percentageWidth:100,x:0,y:0,unit:rn.Nf.Pixel},[rn.Nf.AspectRatio]:{width:i.width,height:i.height,percentageHeight:100,percentageWidth:100,x:0,y:0,unit:rn.Nf.AspectRatio}}}),E({type:"SET_LAST_RESIZE_SIZE",payload:{[rn.Nf.Pixel]:{width:t,height:r,unit:rn.Nf.Pixel},[rn.Nf.AspectRatio]:{width:i.width,height:i.height,unit:rn.Nf.AspectRatio}}})}}),[_.selectedFormat]),M=(0,wt.useCallback)((e=>{E({type:"SET_SELECTED_FORMAT",payload:{extension:e}})}),[]),L=(0,wt.useCallback)((e=>{E({type:"SET_CROP_SIZE",payload:{width:_.selectedFormat.width,height:_.selectedFormat.height,unit:rn.Nf.Pixel}}),E({type:"SET_RESIZE_SIZE",payload:{width:_.selectedFormat.width,height:_.selectedFormat.height,unit:rn.Nf.Pixel}}),E({type:"SET_ROTATION",payload:0}),E({type:"SET_ACTIVE_SETTING",payload:e})}),[_.selectedFormat]),F=(0,wt.useCallback)((()=>{E({type:"SET_SHOW_VERSION_HISTORY",payload:!0})}),[]),B=(0,wt.useCallback)((e=>{let t=e.formatWidth,n=e.formatHeight;"TRX"===e.proxyName&&f&&(t=Number(f.width),n=Number(f.height)),E({type:"SET_SELECTED_PROXY",payload:{proxy:e.id,useCustomRendition:!0}}),E({type:"SET_SELECTED_FORMAT",payload:{width:t,height:n}}),E({type:"SET_RESIZE_SIZE",payload:{width:t,height:n,unit:rn.Nf.Pixel}}),E({type:"SET_CROP_SIZE",payload:{width:t,height:n,percentageWidth:100,percentageHeight:100,x:0,y:0,unit:rn.Nf.Pixel}});const r=on(t,n);E({type:"SET_LAST_CROP_SIZE",payload:{[rn.Nf.Pixel]:{width:Math.round(t),height:Math.round(n),percentageHeight:100,percentageWidth:100,x:0,y:0,unit:rn.Nf.Pixel},[rn.Nf.AspectRatio]:{width:r.width,height:r.height,percentageHeight:100,percentageWidth:100,x:0,y:0,unit:rn.Nf.AspectRatio}}}),E({type:"SET_LAST_RESIZE_SIZE",payload:{[rn.Nf.Pixel]:{width:t,height:n,unit:rn.Nf.Pixel},[rn.Nf.AspectRatio]:{width:r.width,height:r.height,unit:rn.Nf.AspectRatio}}})}),[f]),U=(0,wt.useCallback)((e=>{E({type:"SET_QUALITY",payload:e}),E({type:"SET_TRANSFORMATIONS",payload:{key:rn.YQ.Quality,value:{quality:e}}})}),[]),V=(0,wt.useCallback)((e=>{E({type:"SET_KEEP_METADATA",payload:e}),E({type:"SET_TRANSFORMATIONS",payload:{key:rn.YQ.KeepMetadata,value:{keepMetadata:e}}})}),[]);(0,wt.useEffect)((()=>{s&&0!==s.length?E({type:"SET_SELECTED_PROXY",payload:s[0].id}):E({type:"SET_SELECTED_PROXY",payload:""})}),[s,f]);const q=(0,wt.useCallback)((()=>{const e=_.isLoading||!_.selectedProxy&&!_.useCustomRendition&&!_.useRepresentative,d=t&&c.includes(f?f.extension:""),h=s&&Object.values(s).flat().length>0,g=Boolean(_.selectedFormat.width&&_.selectedFormat.height&&_.useCustomRendition);return(0,Vt.jsxs)(Vt.Fragment,{children:[_.showVersionHistory?(0,Vt.jsx)("cx-space",{slot:"label","justify-content":"space-between","align-items":"center",children:(0,Vt.jsxs)("cx-space",{direction:"vertical",spacing:"2x-small",style:{flex:"1"},children:[(0,Vt.jsx)("cx-typography",{variant:"h4",children:"Version history"}),(0,Vt.jsx)("cx-typography",{variant:"body3",className:"asset-name",children:(0,Vt.jsx)("cx-line-clamp",{lines:1,children:null===f||void 0===f?void 0:f.name})})]})}):(0,Vt.jsxs)(Vt.Fragment,{children:[(0,Vt.jsx)("cx-space",{slot:"label","justify-content":"space-between","align-items":"center",children:(0,Vt.jsxs)("cx-space",{direction:"vertical",spacing:"2x-small",style:{flex:"1"},children:[(0,Vt.jsx)("cx-typography",{variant:"h4",children:r?"Custom format":"Preview"}),(0,Vt.jsx)("cx-typography",{variant:"body3",className:"asset-name",children:(0,Vt.jsx)("cx-line-clamp",{lines:1,children:null===f||void 0===f?void 0:f.name})})]})}),n&&(0,Vt.jsx)("cx-tooltip",{slot:"header-actions",content:u?"Unfavorite":"Favorite",placement:"bottom",children:_.isLoadingFavorites?(0,Vt.jsx)("cx-space",{"align-items":"center","justify-content":"center",style:{width:"32px",height:"32px"},children:(0,Vt.jsx)("cx-spinner",{})}):(0,Vt.jsx)("cx-icon-button",{name:u?"star":"star_outline",style:{color:u?"var(--cx-color-warning)":"var(--cx-color-text)"},onClick:async()=>{_.isLoadingFavorites||(E({type:"SET_LOADING_FAVORITES",payload:!0}),u?await S():await x(),E({type:"SET_LOADING_FAVORITES",payload:!1}))}})}),m&&(0,Vt.jsx)("cx-tooltip",{slot:"header-actions",content:"Version history",placement:"bottom",children:(0,Vt.jsx)("cx-icon-button",{name:"history",onClick:F})})]}),(()=>{let e=null,t=null;if(e=_.selectedFormat.width&&_.selectedFormat.height&&(null===f||void 0===f?void 0:f.docType)!==Xt.zu.Video?(0,Vt.jsx)(En,{ref:P,loadable:_.previewLoadable,image:_.selectedFormat,selectedProxy:_.selectedProxy,resizer:_.resizeSize,cropper:_.cropSize,rotation:_.rotation,disabled:"crop"!==_.activeSetting||!_.showCustomRendition,onCropComplete:e=>{E({type:"SET_CROP_SIZE",payload:{percentageWidth:e.width,percentageHeight:e.height,x:e.x,y:e.y}})},onLoadingChange:R}):(0,Vt.jsx)(Hn,{loadable:_.previewLoadable,asset:{docType:null===f||void 0===f?void 0:f.docType,imageUrl:null===f||void 0===f?void 0:f.imageUrl,videoUrl:p,extension:null===f||void 0===f?void 0:f.extension},onLoad:e=>{if(null!==f&&void 0!==f&&f.width&&null!==f&&void 0!==f&&f.height||null===f||void 0===f||!f.imageUrl)return;const t=null!==f&&void 0!==f&&f.width?parseInt(f.width,10):e.width,n=null!==f&&void 0!==f&&f.height?parseInt(f.height,10):e.height;E({type:"SET_DEFAULT_SIZE",payload:{width:t,height:n}})}}),_.showVersionHistory)return(0,Vt.jsx)(Jn,{assetId:null===f||void 0===f?void 0:f.id});if(!r)return e;var n;_.showCustomRendition&&s?t=(0,Vt.jsx)(Fn,{activeSetting:_.activeSetting,extensions:a&&null!==f&&void 0!==f&&f.docType?(0,nn.A)([...a[f.docType],{displayName:"Automatic",value:i}],"value"):[{displayName:"Automatic",value:i}],availableProxies:s,imageSize:{width:_.selectedFormat.width?_.selectedFormat.width:1/0,height:_.selectedFormat.height?_.selectedFormat.height:1/0},resize:{width:_.resizeSize.width,height:_.resizeSize.height,unit:_.resizeSize.unit},crop:_.cropSize,keepMetadata:_.keepMetadata,lastAppliedCrop:_.lastCropSize,lastAppliedResize:_.lastResizeSize,proxy:_.selectedProxy,quality:_.quality,rotation:_.rotation,extension:_.selectedFormat.extension,onCropChange:j,onExtensionChange:M,onFormatChange:B,onKeepMetadataChange:V,onQualityChange:U,onResizeChange:N,onRotateChange:I,onViewChange:L}):t=(0,Vt.jsx)("cx-space",{direction:"vertical",spacing:"small",children:h||d?(0,Vt.jsxs)("div",{style:{width:"100%"},children:[h&&(0,Vt.jsx)($n,{items:null===s||void 0===s?void 0:s.map((e=>{var t;return"TRX"===e.proxyName&&f?{value:e.id,name:e.proxyLabel,cdnName:e.cdnName,width:f.width,height:f.height,extension:f.extension,docType:f.docType}:{value:e.id,name:e.proxyLabel,cdnName:e.cdnName,width:String(e.formatWidth),height:String(e.formatHeight),extension:null!==(t=e.extension)&&void 0!==t?t:void 0,docType:null===f||void 0===f?void 0:f.docType}})),selectedDisabled:_.useCustomRendition,selectedItem:_.selectedProxy,children:D&&(0,Vt.jsxs)("cx-menu-item",{value:"use-representative",children:[(0,Vt.jsx)("cx-typography",{variant:"body3",className:"proxy__name "+(_.useRepresentative?"selected":""),children:"Representative image"}),(0,Vt.jsx)("cx-icon",{slot:"suffix",name:_.useRepresentative?"check":""})]})}),d&&(0,Vt.jsx)($n,{items:[],selectedItem:_.selectedProxy,style:{borderTopWidth:"0"},children:(0,Vt.jsxs)("cx-menu-item",{value:"custom","data-cy":"custom-rendition-menu-item",children:[(0,Vt.jsx)("cx-icon",{slot:"prefix",name:"crop_rotate",className:"icon--large"}),(0,Vt.jsxs)("div",{children:[(0,Vt.jsx)("cx-typography",{variant:"body3",className:"proxy__name "+(_.useCustomRendition?"selected":""),children:"Custom format"}),g?(0,Vt.jsxs)("cx-typography",{variant:"body3",className:"proxy__details",children:[_.selectedFormat.width," x"," ",_.selectedFormat.height,_.selectedFormat.extension&&(0,Vt.jsx)("div",{className:"proxy__extension-dot"}),null===(n=_.selectedFormat.extension)||void 0===n?void 0:n.replace(/^\./,"").toUpperCase()]}):null]}),(0,Vt.jsx)("cx-icon",{slot:"suffix",name:_.useCustomRendition?"edit":"",className:"icon--large"}),(0,Vt.jsx)("cx-icon",{slot:"suffix",name:_.useCustomRendition?"check":"",className:"icon--large icon--primary"})]})}),o&&(0,Vt.jsxs)("div",{style:{backgroundColor:"var(--cx-color-neutral-0)",width:"100%"},children:[(0,Vt.jsx)($n,{children:(0,Vt.jsxs)("cx-menu-item",{value:"tracking",className:"proxy--switch",children:[(0,Vt.jsx)("cx-typography",{variant:"body3",className:"proxy__name",children:"Tracking parameters"}),(0,Vt.jsx)("cx-switch",{checked:_.enabledTracking,onClick:e=>e.preventDefault()})]})}),_.enabledTracking&&(0,Vt.jsx)(Qn,{values:_.trackingParameters,onChange:e=>E({type:"SET_TRACKING_PARAMETERS",payload:e})})]})]}):(0,Vt.jsxs)("cx-space",{"align-items":"center",spacing:"large",wrap:"nowrap",style:{backgroundColor:"var(--cx-color-neutral-0)",width:"100%",padding:"var(--cx-spacing-medium)",gap:"20px"},children:[(0,Vt.jsx)("cx-icon",{style:{color:"var(--cx-color-warning)"},name:"warning",className:"ic_warning_amber"}),(0,Vt.jsx)("cx-typography",{variant:"body3",className:"proxy__name",children:"You don't have permission to share this asset."})]})});return(0,Vt.jsxs)(Vt.Fragment,{children:[e,t]})})(),(()=>{if(_.showVersionHistory)return null;let t=null;return t=r?_.showCustomRendition?(0,Vt.jsxs)("cx-space",{spacing:"small",style:{width:"fit-content"},children:[(0,Vt.jsx)("cx-button",{variant:"default",onClick:()=>{var e,t,n,r,o;_.useCustomRendition?E({type:"CANCEL_USE_CUSTOM_RENDITION",payload:{url:_.defaultSelectedFormat.url,originalUrl:_.defaultSelectedFormat.originalUrl,width:_.defaultSelectedFormat.width,height:_.defaultSelectedFormat.height,extension:_.defaultSelectedFormat.extension,useCustomRendition:!0}}):E({type:"CANCEL_USE_CUSTOM_RENDITION",payload:{url:null!==(e=null===f||void 0===f?void 0:f.imageUrl)&&void 0!==e?e:"",originalUrl:null!==(t=null===f||void 0===f?void 0:f.originalUrl)&&void 0!==t?t:"",width:parseInt(null!==(n=null===f||void 0===f?void 0:f.width)&&void 0!==n?n:"0",10),height:parseInt(null!==(r=null===f||void 0===f?void 0:f.height)&&void 0!==r?r:"0",10),extension:null!==(o=null===f||void 0===f?void 0:f.extension)&&void 0!==o?o:"",useCustomRendition:!1}})},children:"Cancel"}),(0,Vt.jsx)("cx-button",{variant:"primary",onClick:()=>{E({type:"CONFIRM_USE_CUSTOM_RENDITION"})},children:"Done"})]}):(0,Vt.jsx)("cx-button",{className:"dialog__footer__button",disabled:e,loading:_.isLoadingConfirm,variant:"primary",style:{flex:1},onClick:async()=>{const e=null===s||void 0===s?void 0:s.find((e=>e.id===_.selectedProxy));if(_.useCustomRendition)E({type:"SET_LOADING_CONFIRM",payload:!0}),await k({value:_.transformations,parameters:_.enabledTracking?_.trackingParameters:void 0,proxiesPreference:null===e||void 0===e?void 0:e.proxyName,extension:_.selectedFormat.extension}),E({type:"SET_LOADING_CONFIRM",payload:!1});else{var t,n,r;if(null===f||void 0===f||!f.docType)return;if(!e&&!_.useRepresentative)return;E({type:"SET_LOADING_CONFIRM",payload:!0}),await w({extension:null!==(t=null===e||void 0===e?void 0:e.extension)&&void 0!==t?t:f.extension,value:null!==(n=null===e||void 0===e?void 0:e.proxyName)&&void 0!==n?n:"",permanentLink:null!==(r=null===e||void 0===e?void 0:e.permanentLink)&&void 0!==r?r:void 0,parameters:_.enabledTracking?_.trackingParameters:void 0,useRepresentative:_.useRepresentative}),E({type:"SET_LOADING_CONFIRM",payload:!1})}E({type:"RESET_DATA"}),y()},children:null!==l&&void 0!==l?l:"Insert"}):(0,Vt.jsxs)("cx-button",{className:"dialog__footer__button",loading:_.isLoadingConfirm,onClick:async()=>{null!==f&&void 0!==f&&f.docType&&(E({type:"SET_LOADING_CONFIRM",payload:!0}),await w({extension:f.extension,useRepresentative:!0,value:""}),E({type:"SET_LOADING_CONFIRM",payload:!1}))},variant:"primary",children:[(0,Vt.jsx)("cx-icon",{slot:"prefix",name:"folder"}),l]}),(0,Vt.jsx)("div",{slot:"footer",className:"dialog__footer",children:t})})()]})}),[t,n,r,o,i,a,s,l,c,u,F,p,f,m,_,D,y,j,M,x,B,k,V,R,w,U,N,I,S,L]);return"drawer"===v?(0,Vt.jsx)(Un,{ref:O,className:"dialog",label:"Drawer",placement:"bottom",contained:!0,open:h,children:q()}):(0,Vt.jsx)(Bn,{ref:T,className:"dialog",open:h,"use-overlay-scrollbar":!0,style:{"--max-height":`${d}px`,"--max-width":_.showVersionHistory?"600px":"520px"},children:q()})};var rr=n(5650);const or=(0,Ft.Ay)("cx-space")`
|
|
624
624
|
border-bottom: ${e=>{let{bordered:t}=e;return t?"1px solid var(--cx-color-neutral-300)":"none"}};
|
|
625
625
|
padding: var(--cx-spacing-medium);
|
|
626
626
|
|