@uploadcare/file-uploader 1.28.0-alpha.1 → 1.28.0-alpha.111

package/dist/cloudImageEditorPlugin.js

@@ -0,0 +1 @@
+import{ifDefined}from"lit/directives/if-defined.js";import{when}from"lit/directives/when.js";import{classMap}from"lit/directives/class-map.js";export const __rspack_esm_id="cloudImageEditorPlugin";export const __rspack_esm_ids=["cloudImageEditorPlugin"];export const __webpack_modules__={6027(__unused_rspack_module,__webpack_exports__,__webpack_require__){__webpack_require__.d(__webpack_exports__,{cloudImageEditorPlugin:()=>cloudImageEditorPlugin});var CloudImageEditorActivity_namespaceObject={};__webpack_require__.r(CloudImageEditorActivity_namespaceObject),__webpack_require__.d(CloudImageEditorActivity_namespaceObject,{CloudImageEditorActivity:()=>CloudImageEditorActivity});var cloud_image_editor_namespaceObject={};__webpack_require__.r(cloud_image_editor_namespaceObject),__webpack_require__.d(cloud_image_editor_namespaceObject,{BtnUi:()=>BtnUi,CloudImageEditor:()=>CloudImageEditor,CloudImageEditorBlock:()=>CloudImageEditorBlock,Config:()=>Config.T,CropFrame:()=>CropFrame,EditorAspectRatioButtonControl:()=>EditorAspectRatioButtonControl,EditorCropButtonControl:()=>EditorCropButtonControl,EditorFilterControl:()=>EditorFilterControl,EditorFreeformButtonControl:()=>EditorFreeformButtonControl,EditorImageCropper:()=>EditorImageCropper,EditorImageFader:()=>EditorImageFader,EditorOperationControl:()=>EditorOperationControl,EditorScroller:()=>EditorScroller,EditorSlider:()=>EditorSlider,EditorToolbar:()=>EditorToolbar,Icon:()=>Icon.I,LineLoaderUi:()=>LineLoaderUi,PresenceToggle:()=>PresenceToggle,SliderUi:()=>SliderUi,defineComponents:()=>defineComponents.Y});var defineComponents=__webpack_require__(3962),external_lit_=__webpack_require__(2927),decorators_js_=__webpack_require__(8899),LitActivityBlock=__webpack_require__(5923),LitUploaderBlock=__webpack_require__(5544);class CloudImageEditorActivity extends LitUploaderBlock.z{get activityParams(){let params=super.activityParams;if("internalId"in params)return params;throw Error("Cloud Image Editor activity params not found")}initCallback(){super.initCallback(),this.subConfigValue("cropPreset",cropPreset=>{this._editorConfig&&this._editorConfig.cropPreset!==cropPreset&&(this._editorConfig={...this._editorConfig,cropPreset})}),this.subConfigValue("cloudImageEditorTabs",tabs=>{this._editorConfig&&this._editorConfig.tabs!==tabs&&(this._editorConfig={...this._editorConfig,tabs})}),this._mountEditor()}disconnectedCallback(){super.disconnectedCallback(),this._unmountEditor()}_handleApply(e){if(!this._entry)return;this.debugPrint('editor event "apply"',e.detail);let result=e.detail;this._entry.setMultipleValues({cdnUrl:result.cdnUrl,cdnUrlModifiers:result.cdnUrlModifiers}),this.modalManager?.close(LitActivityBlock.S.activities.CLOUD_IMG_EDIT),this.historyBack()}_handleCancel(event){let detail=event instanceof CustomEvent?event.detail:void 0;this.debugPrint('editor event "cancel"',detail),this.modalManager?.close(LitActivityBlock.S.activities.CLOUD_IMG_EDIT),this.historyBack()}handleChange(event){this.debugPrint('editor event "change"',event.detail)}_mountEditor(){let{internalId}=this.activityParams,entry=this.uploadCollection.read(internalId);if(!entry)throw Error(`Entry with internalId "${internalId}" not found`);this._entry=entry;let cdnUrl=this._entry.getValue("cdnUrl");if(!cdnUrl)throw Error(`Entry with internalId "${internalId}" hasn't uploaded yet`);this._editorConfig=this._createEditorConfig(cdnUrl)}_unmountEditor(){this._entry=void 0,this._editorConfig=null}render(){if(!this._editorConfig)return external_lit_.nothing;let{cdnUrl,cropPreset,tabs}=this._editorConfig;return(0,external_lit_.html)`<uc-cloud-image-editor cdn-url=${cdnUrl} crop-preset=${ifDefined(cropPreset)} tabs=${ifDefined(tabs)} @apply=${this._handleApply} @cancel=${this._handleCancel} @change=${this.handleChange} ></uc-cloud-image-editor>`}_createEditorConfig(cdnUrl){return{cdnUrl,cropPreset:this.cfg.cropPreset,tabs:this.cfg.cloudImageEditorTabs}}constructor(...args){super(...args),this._editorConfig=null}}!function(decorators,target,key,desc){var d,c=arguments.length,r=c<3?target:null===desc?desc=Object.getOwnPropertyDescriptor(target,key):desc;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);c>3&&r&&Object.defineProperty(target,key,r)}([(0,decorators_js_.state)()],CloudImageEditorActivity.prototype,"_editorConfig",void 0);var activity_constants=__webpack_require__(7715),ref_js_=__webpack_require__(5337),unsafe_svg_js_=__webpack_require__(3943),LitBlock=__webpack_require__(204),cdn_utils=__webpack_require__(6339),comma_separated=__webpack_require__(9101),debounce=__webpack_require__(4441),transparentPixelSrc=__webpack_require__(8608);function normalize(...args){return args.reduce((result,arg)=>{if("string"==typeof arg)return result[arg]=!0,result;for(let token of Object.keys(arg))result[token]=arg[token];return result},{})}function classNames(...args){let mapping=normalize(...args);return Object.keys(mapping).reduce((result,token)=>(mapping[token]&&result.push(token),result),[]).join(" ")}var parseCropPreset=__webpack_require__(5342),toolbar_constants=__webpack_require__(1583);let isTabIdValue=value=>toolbar_constants.nz.includes(value);var transformationUtils=__webpack_require__(8930);function CloudImageEditorBlock_ts_decorate(decorators,target,key,desc){var d,c=arguments.length,r=c<3?target:null===desc?desc=Object.getOwnPropertyDescriptor(target,key):desc;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r}let DEFAULT_TABS=(0,comma_separated.L)([...toolbar_constants.nz]);class CloudImageEditorBlock extends LitBlock.x{static{this.styleAttrs=["uc-cloud-image-editor"]}_scheduleInitialization(){this._isInitialized||this._pendingInitUpdate||(this._pendingInitUpdate=this.updateComplete.then(()=>{this._pendingInitUpdate=null,this._isInitialized=!0}))}initCallback(){super.initCallback(),this._syncTabListFromProp(),this._syncCropPresetState()}_assignSharedElements(){let faderEl=this._faderRef.value;faderEl&&(this.$["*faderEl"]=faderEl);let cropperEl=this._cropperRef.value;cropperEl&&(this.$["*cropperEl"]=cropperEl);let imgContainerEl=this._imgContainerRef.value;imgContainerEl&&(this.$["*imgContainerEl"]=imgContainerEl);let imgEl=this._imgRef.value;imgEl&&(this.$["*imgEl"]=imgEl)}_attachImageListeners(){let imgEl=this._imgRef.value;imgEl&&(imgEl.addEventListener("load",this._handleImageLoad),imgEl.addEventListener("error",this._handleImageError))}_detachImageListeners(){let imgEl=this._imgRef.value;imgEl&&(imgEl.removeEventListener("load",this._handleImageLoad),imgEl.removeEventListener("error",this._handleImageError))}get _imageClassName(){let tabId=this.$["*tabId"];return classNames("uc-image",{"uc-image_hidden_to_cropper":tabId===toolbar_constants.XB.CROP,"uc-image_hidden_effects":tabId!==toolbar_constants.XB.CROP})}_waitForSize(){return new Promise((resolve,reject)=>{let timeoutId=window.setTimeout(()=>{reject(Error("[cloud-image-editor] timeout waiting for non-zero container size"))},3e3),resizeObserver=new ResizeObserver(entries=>{let[element]=entries;element&&element.contentRect.width>0&&element.contentRect.height>0&&(window.clearTimeout(timeoutId),resizeObserver.disconnect(),window.setTimeout(()=>resolve(),0))});resizeObserver.observe(this)})}firstUpdated(changedProperties){super.firstUpdated(changedProperties),this._assignSharedElements(),this._attachImageListeners(),this.initEditor();let hasInitialSource=!!(this.uuid||this.cdnUrl),alreadyRequested=changedProperties.has("uuid")||changedProperties.has("cdnUrl");hasInitialSource&&!alreadyRequested&&this.updateImage()}disconnectedCallback(){this._detachImageListeners(),super.disconnectedCallback()}render(){let fileType=this._fileType??"",message=this._statusMessage??"",src=this._imageSrc||transparentPixelSrc.d,showLoader=this._showLoader,showNetworkProblems=this._hasNetworkProblems;return(0,external_lit_.html)`${(0,unsafe_svg_js_.unsafeSVG)("<svg width='0' height='0' style='position:absolute'><symbol fill='none' viewBox='0 0 9 6' id='uc-icon-arrow-dropdown' xmlns='http://www.w3.org/2000/svg'><path stroke='currentColor' d='m1.5 1.667 3 2.666 3-2.666' opacity='.5'/></symbol><symbol viewBox='0 0 24 24' id='uc-icon-aspect-ratio' xmlns='http://www.w3.org/2000/svg'/><symbol viewBox='0 0 20 20' id='uc-icon-brightness' xmlns='http://www.w3.org/2000/svg'><path stroke-linejoin='round' fill='none' stroke='currentColor' stroke-width='1.2' d='M15 10a5 5 0 0 1-5 5m5-5a5 5 0 0 0-5-5m5 5h-5m0 5a5 5 0 0 1 0-10m0 10V5m0 15v-3M2.93 2.929 5.05 5.05M0 10h3m-.07 7.071 2.12-2.121M10 0v3m7.07 14.071-2.12-2.121M20 10h-3m.07-7.071L14.95 5.05m-.626 2.45H10m4.324 5H10'/></symbol><symbol fill='currentColor' viewBox='0 0 20 20' id='uc-icon-closeMax' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M8.232 10 3.585 5.353l1.768-1.768L10 8.232l4.648-4.647 1.767 1.768L11.768 10l4.647 4.648-1.767 1.767L10 11.768l-4.647 4.647-1.768-1.767L8.232 10Z' clip-rule='evenodd'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-contrast' xmlns='http://www.w3.org/2000/svg'><path stroke-linejoin='round' fill='none' stroke='currentColor' stroke-width='1.2' d='M2 10a8 8 0 1 0 16 0 8 8 0 1 0-16 0m8-8v16m8-8h-8m7.598 2.5H10m6.24 2.5H10m7.6-7.5H10M16.242 5H10'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-crop' xmlns='http://www.w3.org/2000/svg'><path stroke-linejoin='round' fill='none' stroke='currentColor' stroke-width='1.2' d='M20 14H7.005C6.45 14 6 13.55 6 12.995V0M0 6h13.067c.515 0 .933.418.933.933V20M14.5.4 13 2l1.5 1.6M13 2h2a3 3 0 0 1 3 3v2M5.5 19.6 7 18l-1.5-1.6M7 18H5a3 3 0 0 1-3-3v-2'/></symbol><symbol fill='currentColor' viewBox='0 0 20 20' id='uc-icon-done' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='m18.057 6.333-9.365 9.125a1.25 1.25 0 0 1-1.768-.023L1.92 10.296l1.791-1.744 4.132 4.243 8.47-8.253 1.744 1.79Z' clip-rule='evenodd'/></symbol><symbol fill='currentColor' viewBox='0 0 25 24' id='uc-icon-edit-file' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M18.558 2.804a.78.78 0 0 0-.557.235l-.008.007-2.472 2.46 3.847 3.848 2.46-2.473.004-.003a.78.78 0 0 0 0-1.108l-.004-.003-2.712-2.728a.78.78 0 0 0-.558-.235Zm-.248 7.613-3.852-3.852-8.93 8.887-1.516 5.41 5.41-1.515 8.888-8.93Zm-.636-8.934a2.28 2.28 0 0 1 2.512.505l2.702 2.717.002.002a2.278 2.278 0 0 1 0 3.234l-.002.002-12.541 12.602a.75.75 0 0 1-.33.193l-6.884 1.928a.75.75 0 0 1-.925-.924l1.928-6.885a.75.75 0 0 1 .193-.33l12.603-12.54a2.28 2.28 0 0 1 .742-.504Z' clip-rule='evenodd'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-enhance' xmlns='http://www.w3.org/2000/svg'><path stroke-linejoin='round' fill='none' stroke='currentColor' stroke-width='1.2' d='M19 13h-2m0 0a4 4 0 0 1-4-4m4 4a4 4 0 0 0-4 4m0-8V7m0 2a4 4 0 0 1-4 4m-2 0h2m0 0a4 4 0 0 1 4 4m0 0v2M8 8.5H6.5m0 0a2 2 0 0 1-2-2m2 2a2 2 0 0 0-2 2m0-4V5m0 1.5a2 2 0 0 1-2 2M1 8.5h1.5m0 0a2 2 0 0 1 2 2m0 0V12M12 3h-1m0 0a1 1 0 0 1-1-1m1 1a1 1 0 0 0-1 1m0-2V1m0 1a1 1 0 0 1-1 1M8 3h1m0 0a1 1 0 0 1 1 1m0 0v1'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-exposure' xmlns='http://www.w3.org/2000/svg'><path stroke-linejoin='round' fill='none' stroke='currentColor' stroke-width='1.2' d='M10 20v-3M2.93 2.929 5.05 5.05M0 10h3m-.07 7.071 2.12-2.121M10 0v3m7.07 14.071-2.12-2.121M20 10h-3m.07-7.071L14.95 5.05M5 10a5 5 0 1 0 10 0 5 5 0 1 0-10 0'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-filters' xmlns='http://www.w3.org/2000/svg'><path stroke-linejoin='round' fill='none' stroke='currentColor' stroke-width='1.2' d='M4.5 6.5a5.5 5.5 0 1 0 11 0 5.5 5.5 0 1 0-11 0m-3.5 6a5.5 5.5 0 1 0 11 0 5.5 5.5 0 1 0-11 0m7 0a5.5 5.5 0 1 0 11 0 5.5 5.5 0 1 0-11 0'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-flip' xmlns='http://www.w3.org/2000/svg'><path stroke-linejoin='round' fill='none' stroke='currentColor' stroke-width='1.2' d='M19.6 5 18 3.5 16.4 5m3.2 10L18 16.5 16.4 15M18 3.523v12.954M3.3 8.5h10.654c.301 0 .415-.395.159-.554L3.459 1.286A.3.3 0 0 0 3 1.542V8.2a.3.3 0 0 0 .3.3zm0 3h10.654c.301 0 .415.395.159.554l-10.654 6.66A.3.3 0 0 1 3 18.458v-6.66a.3.3 0 0 1 .3-.3z'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-gamma' xmlns='http://www.w3.org/2000/svg'><path stroke-linejoin='round' fill='none' stroke='currentColor' stroke-width='1.2' d='M17 3C9 6 2.5 11.5 2.5 17.5m0 0h1m-1 0v-1m14 1h1m-3 0h1m-3 0h1m-3 0h1m-3 0h1m-3 0h1m-3 0h1m-3-14v-1m0 3v-1m0 3v-1m0 3v-1m0 3v-1m0 3v-1m0 3v-1'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-mirror' xmlns='http://www.w3.org/2000/svg'><path stroke-linejoin='round' fill='none' stroke='currentColor' stroke-width='1.2' d='M5 .4 3.5 2 5 3.6M15 .4 16.5 2 15 3.6M3.52 2h12.957M8.5 16.7V6.046c0-.301-.394-.415-.554-.159L1.287 16.541a.3.3 0 0 0 .255.459H8.2a.3.3 0 0 0 .3-.3zm3 0V6.046c0-.301.395-.415.555-.159l6.659 10.654a.3.3 0 0 1-.255.459H11.8a.3.3 0 0 1-.3-.3z'/></symbol><symbol viewBox='0 0 40 40' id='uc-icon-original' xmlns='http://www.w3.org/2000/svg'><path stroke-linejoin='round' fill='none' stroke='currentColor' stroke-width='1.5' d='M0 40 40 0'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-rotate' xmlns='http://www.w3.org/2000/svg'><path stroke-linejoin='round' fill='none' stroke='currentColor' stroke-width='1.2' d='M13.5.4 12 2l1.5 1.6M12.023 2H14.4A3.6 3.6 0 0 1 18 5.6V8M4 17h9a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1z'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-sad' xmlns='http://www.w3.org/2000/svg'><path stroke-linejoin='round' fill='none' stroke='currentColor' stroke-width='1.2' d='M2 17c4.418-4 11.582-4 16 0M16.5 5a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm-11 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0z'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-saturation' xmlns='http://www.w3.org/2000/svg'><defs><linearGradient id='ruc-icon-id__a' x1='10.001' y1='1' x2='10.001' y2='19' gradientUnits='userSpaceOnUse'><stop stop-color='#DE15FF'/><stop offset='.203' stop-color='#0029FF'/><stop offset='.479' stop-color='#2AE4F0'/><stop offset='.604' stop-color='#15EF11'/><stop offset='.75' stop-color='#FAE528'/><stop offset='1' stop-color='#EB2A2A'/></linearGradient></defs><circle cx='10.001' cy='10' r='9' transform='rotate(90 10 10)' fill='url(#ruc-icon-id__a)'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-slider' xmlns='http://www.w3.org/2000/svg'><path stroke-linejoin='round' fill='none' stroke='currentColor' stroke-width='1.2' d='M0 10h11m0 0a2 2 0 1 0 4 0m-4 0a2 2 0 1 1 4 0m0 0h5'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-tuning' xmlns='http://www.w3.org/2000/svg'><path stroke-linejoin='round' fill='none' stroke='currentColor' stroke-width='1.2' d='M8 10h11M1 10h4M1 4.5h11m3 0h4m-18 11h11m3 0h4m-7-11a1.5 1.5 0 1 0 3 0 1.5 1.5 0 1 0-3 0M5 10a1.5 1.5 0 1 0 3 0 1.5 1.5 0 1 0-3 0m7 5.5a1.5 1.5 0 1 0 3 0 1.5 1.5 0 1 0-3 0'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-vibrance' xmlns='http://www.w3.org/2000/svg'><path d='M2.125 5.64A8.96 8.96 0 0 0 1.001 10a8.96 8.96 0 0 0 1.124 4.36V5.64z' fill='url(#uuc-icon-id__a)'/><path d='M2.875 15.499V4.502a9.053 9.053 0 0 1 1.75-1.72v14.437a9.05 9.05 0 0 1-1.75-1.72z' fill='url(#uuc-icon-id__b)'/><path d='M5.375 17.722c.548.33 1.134.601 1.75.809V1.469a8.956 8.956 0 0 0-1.75.81v15.443z' fill='url(#uuc-icon-id__c)'/><path d='M7.875 1.253v17.495c.564.136 1.15.22 1.75.244V1.008a9 9 0 0 0-1.75.245z' fill='url(#uuc-icon-id__d)'/><path d='M10.375 1.008v17.984a9 9 0 0 0 1.75-.244V1.252a9 9 0 0 0-1.75-.244z' fill='url(#uuc-icon-id__e)'/><path d='M12.875 1.469V18.53a8.957 8.957 0 0 0 1.75-.808V2.277a8.957 8.957 0 0 0-1.75-.808z' fill='url(#uuc-icon-id__f)'/><path d='M15.375 2.78v14.44a9.053 9.053 0 0 0 1.75-1.72v-11a9.054 9.054 0 0 0-1.75-1.72z' fill='url(#uuc-icon-id__g)'/><path d='M17.875 5.638v8.724A8.959 8.959 0 0 0 19.001 10a8.96 8.96 0 0 0-1.126-4.362z' fill='url(#uuc-icon-id__h)'/><defs><linearGradient id='uuc-icon-id__a' x1='19.001' y1='10' x2='1.001' y2='10' gradientUnits='userSpaceOnUse'><stop stop-color='#DE15FF'/><stop offset='.203' stop-color='#0029FF'/><stop offset='.479' stop-color='#2AE4F0'/><stop offset='.604' stop-color='#15EF11'/><stop offset='.75' stop-color='#FAE528'/><stop offset='1' stop-color='#EB2A2A'/></linearGradient><linearGradient id='uuc-icon-id__b' x1='19.001' y1='10' x2='1.001' y2='10' gradientUnits='userSpaceOnUse'><stop stop-color='#DE15FF'/><stop offset='.203' stop-color='#0029FF'/><stop offset='.479' stop-color='#2AE4F0'/><stop offset='.604' stop-color='#15EF11'/><stop offset='.75' stop-color='#FAE528'/><stop offset='1' stop-color='#EB2A2A'/></linearGradient><linearGradient id='uuc-icon-id__c' x1='19.001' y1='10' x2='1.001' y2='10' gradientUnits='userSpaceOnUse'><stop stop-color='#DE15FF'/><stop offset='.203' stop-color='#0029FF'/><stop offset='.479' stop-color='#2AE4F0'/><stop offset='.604' stop-color='#15EF11'/><stop offset='.75' stop-color='#FAE528'/><stop offset='1' stop-color='#EB2A2A'/></linearGradient><linearGradient id='uuc-icon-id__d' x1='19.001' y1='10' x2='1.001' y2='10' gradientUnits='userSpaceOnUse'><stop stop-color='#DE15FF'/><stop offset='.203' stop-color='#0029FF'/><stop offset='.479' stop-color='#2AE4F0'/><stop offset='.604' stop-color='#15EF11'/><stop offset='.75' stop-color='#FAE528'/><stop offset='1' stop-color='#EB2A2A'/></linearGradient><linearGradient id='uuc-icon-id__e' x1='19.001' y1='10' x2='1.001' y2='10' gradientUnits='userSpaceOnUse'><stop stop-color='#DE15FF'/><stop offset='.203' stop-color='#0029FF'/><stop offset='.479' stop-color='#2AE4F0'/><stop offset='.604' stop-color='#15EF11'/><stop offset='.75' stop-color='#FAE528'/><stop offset='1' stop-color='#EB2A2A'/></linearGradient><linearGradient id='uuc-icon-id__f' x1='19.001' y1='10' x2='1.001' y2='10' gradientUnits='userSpaceOnUse'><stop stop-color='#DE15FF'/><stop offset='.203' stop-color='#0029FF'/><stop offset='.479' stop-color='#2AE4F0'/><stop offset='.604' stop-color='#15EF11'/><stop offset='.75' stop-color='#FAE528'/><stop offset='1' stop-color='#EB2A2A'/></linearGradient><linearGradient id='uuc-icon-id__g' x1='19.001' y1='10' x2='1.001' y2='10' gradientUnits='userSpaceOnUse'><stop stop-color='#DE15FF'/><stop offset='.203' stop-color='#0029FF'/><stop offset='.479' stop-color='#2AE4F0'/><stop offset='.604' stop-color='#15EF11'/><stop offset='.75' stop-color='#FAE528'/><stop offset='1' stop-color='#EB2A2A'/></linearGradient><linearGradient id='uuc-icon-id__h' x1='19.001' y1='10' x2='1.001' y2='10' gradientUnits='userSpaceOnUse'><stop stop-color='#DE15FF'/><stop offset='.203' stop-color='#0029FF'/><stop offset='.479' stop-color='#2AE4F0'/><stop offset='.604' stop-color='#15EF11'/><stop offset='.75' stop-color='#FAE528'/><stop offset='1' stop-color='#EB2A2A'/></linearGradient></defs></symbol><symbol viewBox='0 0 20 20' id='uc-icon-warmth' xmlns='http://www.w3.org/2000/svg'><path d='m7.5 13.05.429.42.171-.175v-.244h-.6zm5 0h-.6v.245l.172.175.428-.42zM8.1 3.5c0-1.05.85-1.9 1.9-1.9V.4a3.1 3.1 0 0 0-3.1 3.1h1.2zm0 9.55V3.5H6.9v9.55h1.2zm-1 2.45c0-.79.315-1.506.829-2.03l-.858-.84A4.088 4.088 0 0 0 5.9 15.5h1.2zm2.9 2.9a2.9 2.9 0 0 1-2.9-2.9H5.9a4.1 4.1 0 0 0 4.1 4.1v-1.2zm2.9-2.9a2.9 2.9 0 0 1-2.9 2.9v1.2a4.1 4.1 0 0 0 4.1-4.1h-1.2zm-.829-2.03c.514.524.829 1.24.829 2.03h1.2c0-1.117-.447-2.13-1.171-2.87l-.858.84zM11.9 3.5v9.55h1.2V3.5h-1.2zM10 1.6c1.05 0 1.9.85 1.9 1.9h1.2A3.1 3.1 0 0 0 10 .4v1.2z' fill='currentColor'/><path d='M10 14V8' stroke='currentColor' stroke-width='1.2' stroke-linecap='round'/><path d='M14 3h3m-3 3h3m-3 3h3m-8 6.5a1 1 0 1 0 2 0 1 1 0 1 0-2 0' stroke='currentColor' stroke-width='1.2'/></symbol></svg>")} <div class="uc-wrapper uc-wrapper_desktop"><uc-presence-toggle class="uc-network_problems_splash" .visible=${showNetworkProblems}><div class="uc-network_problems_content"><div class="uc-network_problems_icon"><uc-icon name="sad"></uc-icon></div><div class="uc-network_problems_text">Network error</div></div><div class="uc-network_problems_footer"><uc-btn-ui theme="primary" text="Retry" @click=${this._handleRetryNetwork}></uc-btn-ui></div></uc-presence-toggle><div class="uc-viewport"><div class="uc-file_type_outer"><div class="uc-file_type">${fileType}</div></div><div class="uc-image_container" ${(0,ref_js_.ref)(this._imgContainerRef)}><img src=${src} class=${this._imageClassName} ${(0,ref_js_.ref)(this._imgRef)} /> ${when(this._isInitialized,()=>(0,external_lit_.html)`<uc-editor-image-cropper ${(0,ref_js_.ref)(this._cropperRef)}></uc-editor-image-cropper>`)} <uc-editor-image-fader ${(0,ref_js_.ref)(this._faderRef)}></uc-editor-image-fader></div><div class="uc-info_pan">${message}</div></div><div class="uc-toolbar"><uc-line-loader-ui .active=${showLoader}></uc-line-loader-ui><div class="uc-toolbar_content uc-toolbar_content__editor"> ${when(this._isInitialized,()=>(0,external_lit_.html)`<uc-editor-toolbar></uc-editor-toolbar>`)} </div></div></div>`}updated(changedProperties){super.updated(changedProperties),changedProperties.has("uuid")&&this.uuid&&this.updateImage(),changedProperties.has("cdnUrl")&&this.cdnUrl&&this.updateImage(),changedProperties.has("tabs")&&this._syncTabListFromProp(),(changedProperties.has("cropPreset")||changedProperties.has("cdnUrl"))&&this._syncCropPresetState()}_syncTabListFromProp(){let tabsValue=this.tabs||DEFAULT_TABS;this.$["*tabList"]=(tabs=>{if(!tabs)return toolbar_constants.nz;let tabList=(0,comma_separated.A)(tabs).filter(isTabIdValue);return 0===tabList.length?toolbar_constants.nz:tabList})(tabsValue)}_syncCropPresetState(){let list=(0,parseCropPreset.j)(this.cropPreset??""),closest=null;if(this.cdnUrl){let operations=(0,cdn_utils.I1)(this.cdnUrl),transformations=(0,transformationUtils.ym)(operations);if(Array.isArray(transformations?.crop?.dimensions)){let[w,h]=transformations.crop.dimensions;closest=(0,parseCropPreset.t)(w,h,list,.1)}}this.$["*cropPresetList"]=list,this.$["*currentAspectRatio"]=closest??list?.[0]??null}async updateImage(){if(this.isConnected){if(await this._waitForSize(),this.cdnUrl){let cdnUrlValue=this.cdnUrl,uuid=(0,cdn_utils.p_)(cdnUrlValue),originalUrl=(0,cdn_utils.vo)(cdnUrlValue,uuid);if(originalUrl===this.$["*originalUrl"])return;this.$["*originalUrl"]=originalUrl;let operations=(0,cdn_utils.I1)(cdnUrlValue),transformations=(0,transformationUtils.ym)(operations);this.$["*editorTransformations"]=transformations}else if(this.uuid){let originalUrl=(0,cdn_utils.vo)(this.cfg.cdnCname,this.uuid);if(originalUrl===this.$["*originalUrl"])return;this.$["*originalUrl"]=originalUrl,Object.keys(this.$["*editorTransformations"]).length>0&&(this.$["*editorTransformations"]={})}else throw Error("No UUID nor CDN URL provided");this.$["*tabId"]===toolbar_constants.XB.CROP?this.$["*cropperEl"]?.deactivate({reset:!0}):this.$["*faderEl"]?.deactivate();try{let originalUrlValue=this.$["*originalUrl"],cdnUrl=await this.proxyUrl((0,cdn_utils.LN)(originalUrlValue,(0,cdn_utils.$z)("json"))),{width,height}=await fetch(cdnUrl).then(response=>response.json());this.$["*imageSize"]={width,height},this.$["*tabId"]===toolbar_constants.XB.CROP?this.$["*cropperEl"]?.activate(this.$["*imageSize"]):this.$["*faderEl"]?.activate({url:originalUrlValue})}catch(err){err&&(this.telemetryManager.sendEventError(err,"cloud editor image. Failed to load image info"),console.error("Failed to load image info",err))}this._scheduleInitialization()}}async initEditor(){try{await this._waitForSize()}catch(err){this.isConnected&&console.error(err.message);return}this.classList.add("uc-editor_ON"),this.sub("*networkProblems",networkProblems=>{this._hasNetworkProblems=!!networkProblems}),this.sub("*editorTransformations",transformations=>{if(0===Object.keys(transformations).length)return;let originalUrl=this.$["*originalUrl"],cdnUrlModifiers=(0,cdn_utils.$z)((0,transformationUtils.ON)(transformations),"preview"),cdnUrl=(0,cdn_utils.LN)(originalUrl,cdnUrlModifiers);this.dispatchEvent(new CustomEvent("change",{detail:{originalUrl,cdnUrlModifiers,cdnUrl,transformations},bubbles:!0,composed:!0}))},!1)}constructor(...args){var fnCtx;super(...args),this.ctxOwner=!0,this._statusMessage="",this._imageSrc=transparentPixelSrc.d,this._fileType="",this._showLoader=!1,this.uuid=null,this.cdnUrl=null,this.cropPreset="",this.tabs=DEFAULT_TABS,this._hasNetworkProblems=!1,this._isInitialized=!1,this._pendingInitUpdate=null,this._debouncedShowLoader=(0,debounce.s)(show=>{this._showLoader=show},300),this._imgRef=(0,ref_js_.createRef)(),this._cropperRef=(0,ref_js_.createRef)(),this._faderRef=(0,ref_js_.createRef)(),this._imgContainerRef=(0,ref_js_.createRef)(),this._handleImageLoad=()=>{this._debouncedShowLoader(!1),this._imageSrc!==transparentPixelSrc.d&&(this.$["*networkProblems"]=!1)},this._handleImageError=()=>{this._debouncedShowLoader(!1),this.$["*networkProblems"]=!0},this._handleRetryNetwork=()=>{let retry=this.$["*on.retryNetwork"];retry?.()},this.init$={...this.init$,...(fnCtx=this,{"*originalUrl":null,"*loadingOperations":new Map,"*faderEl":null,"*cropperEl":null,"*imgEl":null,"*imgContainerEl":null,"*networkProblems":!1,"*imageSize":null,"*editorTransformations":{},"*cropPresetList":[],"*currentAspectRatio":null,"*tabList":toolbar_constants.nz,"*tabId":toolbar_constants.XB.CROP,"*on.retryNetwork":()=>{for(let img of fnCtx.querySelectorAll("img")){let originalSrc=img.src;img.src=transparentPixelSrc.d,img.src=originalSrc}fnCtx.$["*networkProblems"]=!1},"*on.apply":transformations=>{if(!transformations)return;let originalUrl=fnCtx.$["*originalUrl"];if(!originalUrl)return void console.warn("Original URL is null, cannot apply transformations");let cdnUrlModifiers=(0,cdn_utils.$z)((0,transformationUtils.ON)(transformations),"preview"),cdnUrl=(0,cdn_utils.LN)(originalUrl,cdnUrlModifiers);fnCtx.dispatchEvent(new CustomEvent("apply",{detail:{originalUrl,cdnUrlModifiers,cdnUrl,transformations},bubbles:!0,composed:!0})),fnCtx.remove()},"*on.cancel":()=>{fnCtx.remove(),fnCtx.dispatchEvent(new CustomEvent("cancel",{bubbles:!0,composed:!0}))}})}}}CloudImageEditorBlock_ts_decorate([(0,decorators_js_.state)()],CloudImageEditorBlock.prototype,"_statusMessage",void 0),CloudImageEditorBlock_ts_decorate([(0,decorators_js_.state)()],CloudImageEditorBlock.prototype,"_imageSrc",void 0),CloudImageEditorBlock_ts_decorate([(0,decorators_js_.state)()],CloudImageEditorBlock.prototype,"_fileType",void 0),CloudImageEditorBlock_ts_decorate([(0,decorators_js_.state)()],CloudImageEditorBlock.prototype,"_showLoader",void 0),CloudImageEditorBlock_ts_decorate([(0,decorators_js_.property)({type:String,reflect:!0})],CloudImageEditorBlock.prototype,"uuid",void 0),CloudImageEditorBlock_ts_decorate([(0,decorators_js_.property)({type:String,attribute:"cdn-url",reflect:!0})],CloudImageEditorBlock.prototype,"cdnUrl",void 0),CloudImageEditorBlock_ts_decorate([(0,decorators_js_.property)({type:String,attribute:"crop-preset",reflect:!0})],CloudImageEditorBlock.prototype,"cropPreset",void 0),CloudImageEditorBlock_ts_decorate([(0,decorators_js_.property)({type:String,reflect:!0})],CloudImageEditorBlock.prototype,"tabs",void 0),CloudImageEditorBlock_ts_decorate([(0,decorators_js_.state)()],CloudImageEditorBlock.prototype,"_hasNetworkProblems",void 0),CloudImageEditorBlock_ts_decorate([(0,decorators_js_.state)()],CloudImageEditorBlock.prototype,"_isInitialized",void 0);var UID=__webpack_require__(5446),crop_utils=__webpack_require__(8996);let GUIDE_THIRD=100/3;class CropFrame extends LitBlock.x{get _svgElement(){return this._svgRef.value??null}get _dragging(){return this._draggingValue}set _dragging(value){this._draggingValue!==value&&(this._draggingValue=value,this._applyGuidesDragState())}_applyGuidesDragState(){this._frameGuides&&this._frameGuides.setAttribute("class",classNames({"uc-guides--hidden":this._guidesHidden,"uc-guides--visible":!this._guidesHidden&&this._draggingValue,"uc-guides--semi-hidden":!this._guidesHidden&&!this._draggingValue}))}_shouldThumbBeDisabled(direction){let imageBox=this.$["*imageBox"];if(!imageBox)return!1;if(""===direction&&imageBox.height<=1&&imageBox.width<=1)return!0;let tooHigh=imageBox.height<=1&&(direction.includes("n")||direction.includes("s")),tooWide=imageBox.width<=1&&(direction.includes("e")||direction.includes("w"));return tooHigh||tooWide}_createBackdrop(){let cropBox=this.$["*cropBox"];if(!cropBox)return;let{x,y,width,height}=cropBox,svg=this._svgElement;if(!svg)return;let mask=(0,crop_utils.l8)("mask",{id:this._backdropMaskId}),maskRectOuter=(0,crop_utils.l8)("rect",{x:0,y:0,width:"100%",height:"100%",fill:"white"}),maskRectInner=(0,crop_utils.l8)("rect",{x,y,width,height,fill:"black"});mask.appendChild(maskRectOuter),mask.appendChild(maskRectInner);let backdropRect=(0,crop_utils.l8)("rect",{x:0,y:0,width:"100%",height:"100%",fill:"var(--color-image-background)","fill-opacity":.85,mask:`url(#${this._backdropMaskId})`});svg.appendChild(backdropRect),svg.appendChild(mask),this._backdropMask=mask,this._backdropMaskInner=maskRectInner}_resizeBackdrop(){this._backdropMask&&(this._backdropMask.style.display="none",window.requestAnimationFrame(()=>{this._backdropMask&&(this._backdropMask.style.display="block")}))}_updateBackdrop(){let cropBox=this.$["*cropBox"];if(!cropBox)return;let{x,y,width,height}=cropBox;this._backdropMaskInner&&(0,crop_utils.F2)(this._backdropMaskInner,{x,y,width,height})}_updateFrame(){let cropBox=this.$["*cropBox"];if(cropBox&&this._frameGuides&&this._frameThumbs){for(let thumb of Object.values(this._frameThumbs)){if(!thumb)continue;let{direction,pathNode,interactionNode,groupNode}=thumb,isCenter=""===direction,isCorner=2===direction.length,{x,y,width,height}=cropBox;if(isCenter){let moveThumbRect={x,y,width,height};(0,crop_utils.F2)(interactionNode,moveThumbRect)}else{let thumbSizeMultiplier=(0,crop_utils.qE)(Math.min(width,height)/82/2,0,1),pathInfo=isCorner?(0,crop_utils.VH)(cropBox,direction,thumbSizeMultiplier):(0,crop_utils.fN)(cropBox,direction,thumbSizeMultiplier),center=pathInfo.center;if(!center)continue;let size=Math.max(24*(0,crop_utils.qE)(Math.min(width,height)/24/3,0,1),6);(0,crop_utils.F2)(interactionNode,{x:center[0]-size,y:center[1]-size,width:2*size,height:2*size}),(0,crop_utils.F2)(pathNode,{d:pathInfo.d})}let disableThumb=this._shouldThumbBeDisabled(direction);groupNode.setAttribute("class",classNames("uc-thumb",{"uc-thumb--hidden":disableThumb,"uc-thumb--visible":!disableThumb}))}(0,crop_utils.F2)(this._frameGuides,{x:cropBox.x-.5,y:cropBox.y-.5,width:cropBox.width+1,height:cropBox.height+1})}}_createThumb(frameThumbs,direction){let groupNode=(0,crop_utils.l8)("g");groupNode.classList.add("uc-thumb"),groupNode.setAttribute("with-effects","");let interactionNode=(0,crop_utils.l8)("rect",{fill:"transparent"}),pathNode=(0,crop_utils.l8)("path",{stroke:"currentColor",fill:"none","stroke-width":3});groupNode.appendChild(pathNode),groupNode.appendChild(interactionNode),frameThumbs[direction]={direction,pathNode,interactionNode,groupNode},""===direction&&(groupNode.style.cursor="move"),interactionNode.addEventListener("pointerdown",this._handlePointerDown.bind(this,direction))}_createThumbs(){let frameThumbs={};for(let i=0;i<3;i++)for(let j=0;j<3;j++){let direction=`${["n","","s"][i]}${["w","","e"][j]}`;""!==direction&&this._createThumb(frameThumbs,direction)}return this._createThumb(frameThumbs,""),frameThumbs}_createGuides(){let svg=(0,crop_utils.l8)("svg"),rect=(0,crop_utils.l8)("rect",{x:0,y:0,width:"100%",height:"100%",fill:"none",stroke:"currentColor","stroke-width":1,"stroke-opacity":.5});svg.appendChild(rect);for(let i=1;i<=2;i++){let line=(0,crop_utils.l8)("line",{x1:`${GUIDE_THIRD*i}%`,y1:"0%",x2:`${GUIDE_THIRD*i}%`,y2:"100%",stroke:"currentColor","stroke-width":1,"stroke-opacity":.3});svg.appendChild(line)}for(let i=1;i<=2;i++){let line=(0,crop_utils.l8)("line",{x1:"0%",y1:`${GUIDE_THIRD*i}%`,x2:"100%",y2:`${GUIDE_THIRD*i}%`,stroke:"currentColor","stroke-width":1,"stroke-opacity":.3});svg.appendChild(line)}return svg.classList.add("uc-guides","uc-guides--semi-hidden"),svg}_createFrame(){let svg=this._svgElement;if(!svg)return;let fr=document.createDocumentFragment(),frameGuides=this._createGuides();fr.appendChild(frameGuides);let frameThumbs=this._createThumbs();for(let{groupNode}of Object.values(frameThumbs))fr.appendChild(groupNode);svg.appendChild(fr),this._frameThumbs=frameThumbs,this._frameGuides=frameGuides,this._applyGuidesDragState()}_handlePointerDown(direction,e){if(!this._frameThumbs)return;let thumb=this._frameThumbs[direction];if(!thumb||this._shouldThumbBeDisabled(direction))return;let cropBox=this.$["*cropBox"],svgElement=this._svgElement;if(!svgElement)return;let{x:svgX,y:svgY}=svgElement.getBoundingClientRect(),x=e.x-svgX,y=e.y-svgY;this._dragging=!0,this._draggingThumb=thumb,this._dragStartPoint=[x,y],this._dragStartCrop={...cropBox}}_calcCropBox(direction,delta){let[dx,dy]=delta,imageBox=this.$["*imageBox"],rect=this._dragStartCrop??this.$["*cropBox"],cropPreset=this.$["*currentAspectRatio"],aspectRatio=cropPreset?cropPreset.width/cropPreset.height:void 0;return Object.values(rect=""===direction?(0,crop_utils._J)({rect,delta:[dx,dy],imageBox}):(0,crop_utils.dz)({rect,delta:[dx,dy],direction,aspectRatio,imageBox})).every(number=>Number.isFinite(number)&&number>=0)?(0,crop_utils.YH)((0,crop_utils.rH)(rect),imageBox):void console.error("CropFrame is trying to create invalid rectangle",{payload:rect})}_updateCursor(){let hoverThumb=this._hoverThumb,svg=this._svgElement;svg&&(svg.style.cursor=hoverThumb?(0,crop_utils.vv)(hoverThumb.direction):"initial")}_createMask(href){if(this._frameImage)return void this._frameImage.setAttribute("href",href);let svg=this._svgElement;if(!svg){this._pendingMaskHref=href;return}this._pendingMaskHref=null;let fr=document.createDocumentFragment(),imageNode=(0,crop_utils.l8)("image",{href});imageNode.setAttribute("class","uc-cloud-mask"),fr.appendChild(imageNode),svg.appendChild(fr),this._frameImage=imageNode}_updateMask(){let cropBox=this.$["*cropBox"];if(!cropBox||!this._frameImage)return;let{x,y,width,height}=cropBox;(0,crop_utils.F2)(this._frameImage,{x,y,height,width})}_render(){this._svgReady&&(this._updateBackdrop(),this._updateFrame(),this._updateMask())}toggleThumbs(visible){if(this._frameThumbs)for(let thumb of Object.values(this._frameThumbs)){if(!thumb)continue;let{groupNode}=thumb;groupNode.setAttribute("class",classNames("uc-thumb",{"uc-thumb--hidden":!visible,"uc-thumb--visible":visible}))}}initCallback(){super.initCallback(),this.sub("*imageBox",()=>{this._resizeBackdrop(),this._svgReady&&window.requestAnimationFrame(()=>{this._render()})}),this.sub("*cropBox",cropBox=>{!cropBox||(this._guidesHidden=cropBox.height<=1||cropBox.width<=1,this._applyGuidesDragState(),this._svgReady&&window.requestAnimationFrame(()=>{this._render()}))}),this.subConfigValue("cloudImageEditorMaskHref",maskHref=>{maskHref&&this._createMask(maskHref)}),document.addEventListener("pointermove",this._handlePointerMove,!0),document.addEventListener("pointerup",this._handlePointerUp,!0)}firstUpdated(changedProperties){super.firstUpdated(changedProperties),this._initializeSvg()}_initializeSvg(){let svg=this._svgElement;if(svg&&!this._svgReady){if(this._createBackdrop(),this._createFrame(),this._svgReady=!0,svg.addEventListener("pointermove",this._handleSvgPointerMove,!0),this._pendingMaskHref){let pendingMask=this._pendingMaskHref;this._pendingMaskHref=null,this._createMask(pendingMask)}this._render()}}disconnectedCallback(){super.disconnectedCallback();let svg=this._svgElement;svg?.removeEventListener("pointermove",this._handleSvgPointerMove,!0),document.removeEventListener("pointermove",this._handlePointerMove,!0),document.removeEventListener("pointerup",this._handlePointerUp,!0)}render(){return(0,external_lit_.html)`<svg class="uc-svg" xmlns="http://www.w3.org/2000/svg" ${(0,ref_js_.ref)(this._svgRef)}></svg>`}constructor(...args){super(...args),this._backdropMaskId=`uc-backdrop-mask-${UID.V.generateFastUid()}`,this._guidesHidden=!1,this._draggingValue=!1,this._svgRef=(0,ref_js_.createRef)(),this._svgReady=!1,this._pendingMaskHref=null,this._handlePointerUp=e=>{this._updateCursor(),this._dragging&&(e.stopPropagation(),e.preventDefault(),this._dragging=!1)},this._handlePointerMove=e=>{if(!this._dragging||!this._dragStartPoint||!this._draggingThumb)return;e.stopPropagation(),e.preventDefault();let svg=this._svgElement;if(!svg)return;let{x:svgX,y:svgY}=svg.getBoundingClientRect(),x=e.x-svgX,y=e.y-svgY,dx=x-this._dragStartPoint[0],dy=y-this._dragStartPoint[1],{direction}=this._draggingThumb,movedCropBox=this._calcCropBox(direction,[dx,dy]);movedCropBox&&(this.$["*cropBox"]=movedCropBox)},this._handleSvgPointerMove=e=>{if(!this._frameThumbs)return;let hoverThumb=Object.values(this._frameThumbs).find(thumb=>{if(!thumb||this._shouldThumbBeDisabled(thumb.direction))return!1;let bounds=thumb.interactionNode.getBoundingClientRect(),rect={x:bounds.x,y:bounds.y,width:bounds.width,height:bounds.height};return(0,crop_utils._c)(rect,[e.x,e.y])});this._hoverThumb=hoverThumb,this._updateCursor()}}}function EditorButtonControl_ts_decorate(decorators,target,key,desc){var d,c=arguments.length,r=c<3?target:null===desc?desc=Object.getOwnPropertyDescriptor(target,key):desc;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r}!function(decorators,target,key,desc){var d,c=arguments.length,r=c<3?target:null===desc?desc=Object.getOwnPropertyDescriptor(target,key):desc;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);c>3&&r&&Object.defineProperty(target,key,r)}([(0,decorators_js_.state)()],CropFrame.prototype,"_draggingValue",void 0);class EditorButtonControl extends LitBlock.x{get buttonClasses(){let isActive=this.active;return{"uc-active":isActive,"uc-not_active":!isActive}}_updateHostStateClasses(){for(let[className,enabled]of Object.entries(this.buttonClasses))this.classList.toggle(className,enabled)}onClick(_event){}connectedCallback(){super.connectedCallback(),this._updateHostStateClasses()}updated(changedProperties){super.updated(changedProperties),changedProperties.has("active")&&this._updateHostStateClasses()}render(){let clickHandler=this.onClick,title=this.title;return(0,external_lit_.html)`<button role="option" type="button" aria-label=${ifDefined(this.titleProp)} title=${ifDefined(this.titleProp)} @click=${clickHandler} ><uc-icon name=${this.icon}></uc-icon><div class="uc-title" ?hidden=${!title}>${title}</div></button>`}constructor(...args){super(...args),this.active=!1,this.title="",this.icon="",this.titleProp=""}}EditorButtonControl_ts_decorate([(0,decorators_js_.state)()],EditorButtonControl.prototype,"active",void 0),EditorButtonControl_ts_decorate([(0,decorators_js_.state)()],EditorButtonControl.prototype,"title",void 0),EditorButtonControl_ts_decorate([(0,decorators_js_.state)()],EditorButtonControl.prototype,"icon",void 0),EditorButtonControl_ts_decorate([(0,decorators_js_.state)()],EditorButtonControl.prototype,"titleProp",void 0);class EditorFreeformButtonControl extends EditorButtonControl{initCallback(){super.initCallback(),this.icon="arrow-dropdown",this.sub("*currentAspectRatio",opt=>{let title=this._computeTitle(opt);this.title=title,this.titleProp=title})}onClick(){this.$["*showListAspectRatio"]=!0}_computeTitle(aspectRatio){return aspectRatio?aspectRatio.hasFreeform?this.l10n("freeform-crop"):this.l10n("crop-to-shape",{value:`${aspectRatio.width}:${aspectRatio.height}`}):""}render(){let clickHandler=this.onClick,title=this.title;return(0,external_lit_.html)`<button role="option" type="button" class=${classMap(this.buttonClasses)} aria-label=${ifDefined(this.titleProp)} title=${ifDefined(this.titleProp)} @click=${clickHandler} ><div class="uc-title" ?hidden=${!title}>${title}</div><uc-icon name=${this.icon}></uc-icon></button>`}}class EditorAspectRatioButtonControl extends EditorButtonControl{get aspectRatio(){return this._aspectRatio}set aspectRatio(value){if(this._aspectRatio===value)return;let previous=this._aspectRatio;this._aspectRatio=value,this.requestUpdate("aspectRatio",previous),value?this._updateAspectRatioPresentation(value):(this.removeAttribute("uc-aspect-ratio-freeform"),this.title="",this.titleProp="")}initCallback(){super.initCallback(),this._aspectRatio&&this._updateAspectRatioPresentation(this._aspectRatio),this.sub("*currentAspectRatio",opt=>{this.active=opt&&opt.id===this._aspectRatio?.id||opt?.width===this._aspectRatio?.width&&opt?.height===this._aspectRatio?.height})}onClick(){let currentAspectRatio=this.$["*currentAspectRatio"];currentAspectRatio?.id!==this._aspectRatio?.id&&(this.$["*currentAspectRatio"]=this._aspectRatio)}_updateAspectRatioPresentation(value){let titleText;if(!this.isConnected)return;let isFreeform=!!value.hasFreeform;this.toggleAttribute("uc-aspect-ratio-freeform",isFreeform);let resolveTitleProp=()=>{let label=this.l10n("a11y-cloud-editor-apply-aspect-ratio",{name:isFreeform?this.l10n("custom").toLowerCase():this.l10n("crop-to-shape",{value:`${value.width}:${value.height}`}).toLowerCase(),value:""});return this.titleProp=label,label};titleText=isFreeform?this.l10n("custom"):`${value.width}:${value.height}`,this.title=titleText,resolveTitleProp(),isFreeform||this.requestUpdate()}_renderIcon(){let width,height,ratio=this._aspectRatio;if(!ratio||ratio.hasFreeform)return(0,external_lit_.html)`<uc-icon name=${this.icon}></uc-icon>`;let{width:width1,height:height1}=(width=12,height=12,ratio.width/ratio.height>=1?(width=12,height=Math.round(12*ratio.height/ratio.width)):(height=12,width=Math.round(12*ratio.width/ratio.height)),{width,height});return(0,external_lit_.html)`<uc-icon><svg viewBox="0 0 ${16} ${16}" aria-hidden="true" focusable="false" ><rect x=${(16-width1)/2} y=${(16-height1)/2} width=${width1} height=${height1} rx="2" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round" ></rect></svg></uc-icon>`}render(){let clickHandler=this.onClick,title=this.title;return(0,external_lit_.html)`<button role="option" type="button" class=${classMap(this.buttonClasses)} aria-label=${ifDefined(this.titleProp)} title=${ifDefined(this.titleProp)} @click=${clickHandler} > ${this._renderIcon()} <div class="uc-title" ?hidden=${!title}>${title}</div></button>`}constructor(...args){super(...args),this._aspectRatio=null}}!function(decorators,target,key,desc){var d,c=arguments.length,r=c<3?target:null===desc?desc=Object.getOwnPropertyDescriptor(target,key):desc;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);c>3&&r&&Object.defineProperty(target,key,r)}([(0,decorators_js_.property)({attribute:!1})],EditorAspectRatioButtonControl.prototype,"aspectRatio",null);class EditorCropButtonControl extends EditorButtonControl{willUpdate(changedProperties){super.willUpdate(changedProperties),this.operation?(this.titleProp=this.l10n("a11y-cloud-editor-apply-crop",{name:this.l10n(this.operation).toLowerCase()}),this.icon=this.operation):(this.icon="",this.titleProp="")}onClick(e){if(!this.operation)return;let cropper=this.$["*cropperEl"],prev=cropper.getValue(this.operation),next=function(operation,prev){if("rotate"===operation){let angle;return(angle=("number"==typeof prev?prev:0)+90)>=360?0:angle}if("mirror"===operation||"flip"===operation)return!prev;throw Error(`Unsupported operation: ${operation}`)}(this.operation,prev);this.telemetryManager.sendEventCloudImageEditor(e,this.$["*tabId"],{operation:this.operation,next,prev}),cropper.setValue(this.operation,next)}constructor(...args){super(...args),this.operation=void 0}}!function(decorators,target,key,desc){var d,c=arguments.length,r=c<3?target:null===desc?desc=Object.getOwnPropertyDescriptor(target,key):desc;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);c>3&&r&&Object.defineProperty(target,key,r)}([(0,decorators_js_.property)({type:String})],EditorCropButtonControl.prototype,"operation",void 0);var style_map_js_=__webpack_require__(1156),env=__webpack_require__(5704),preloadImage=__webpack_require__(6756);let FAKE_ORIGINAL_FILTER="original";class EditorSlider extends LitBlock.x{setOperation(operation,filter){this.state={...this.state,operation,filter},this._initializeValues();let fader=this.$["*faderEl"],originalUrl=this.state.originalUrl||this.$["*originalUrl"];fader&&originalUrl&&fader.activate({url:originalUrl,operation:this.state.operation,value:this.state.filter===FAKE_ORIGINAL_FILTER?void 0:this.state.value,filter:this.state.filter===FAKE_ORIGINAL_FILTER?void 0:this.state.filter,fromViewer:!1})}_initializeValues(){let operation=this.state.operation,{range,zero}=toolbar_constants.UA[operation],[min,max]=range;this.state={...this.state,min,max,zero};let transformation=this.$["*editorTransformations"][operation];if("filter"===operation){let value=Number(max);if(transformation){let{name,amount}=transformation;value=name===this.state.filter?amount:max}this.state={...this.state,value,defaultValue:value};return}let value=void 0!==transformation?transformation:zero;this.state={...this.state,value,defaultValue:value}}apply(){let transformations={...this.$["*editorTransformations"]};"filter"===this.state.operation?this.state.filter&&this.state.filter!==FAKE_ORIGINAL_FILTER?transformations.filter={name:this.state.filter,amount:this.state.value}:delete transformations.filter:transformations[this.state.operation]=this.state.value,this.$["*editorTransformations"]=transformations}cancel(){let fader=this.$["*faderEl"];fader?.deactivate({hide:!1})}initCallback(){super.initCallback(),this.sub("*originalUrl",originalUrl=>{originalUrl&&(this.state={...this.state,originalUrl})})}updated(changedProperties){if(super.updated(changedProperties),changedProperties.has("state")){let tooltip=`${this.state.filter??this.state.operation} ${this.state.value}`;this.$["*operationTooltip"]=tooltip}}render(){return(0,external_lit_.html)`<uc-slider-ui .disabled=${this.state.disabled} .min=${this.state.min} .max=${this.state.max} .defaultValue=${this.state.defaultValue} .zero=${this.state.zero} @slider-input=${this._handleInput} ></uc-slider-ui>`}constructor(...args){super(...args),this.state={operation:"filter",filter:void 0,originalUrl:"",disabled:!1,min:0,max:100,value:0,defaultValue:0,zero:0},this._handleInput=e=>{let{value}=e.detail,fader=this.$["*faderEl"];fader?.set(value),this.state={...this.state,value}}}}function parseFilterValue(str){if(!str)return null;let match=str.match(/^([A-Za-z]+)\s+(\d+)$/);if(!match)return null;let[,filter,amount]=match;return filter&&void 0!==amount?{filter,value:Number(amount)}:null}function EditorFilterControl_ts_decorate(decorators,target,key,desc){var d,c=arguments.length,r=c<3?target:null===desc?desc=Object.getOwnPropertyDescriptor(target,key):desc;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r}!function(decorators,target,key,desc){var d,c=arguments.length,r=c<3?target:null===desc?desc=Object.getOwnPropertyDescriptor(target,key):desc;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);c>3&&r&&Object.defineProperty(target,key,r)}([(0,decorators_js_.state)()],EditorSlider.prototype,"state",void 0);class EditorFilterControl extends EditorButtonControl{get filter(){return this._filter}set filter(value){let nextFilter=value??"";if(this._filter===nextFilter)return;let previousValue=this._filter;this._filter=nextFilter,this._operation="filter",this.isOriginal=nextFilter===FAKE_ORIGINAL_FILTER,this.icon=this.isOriginal?"original":"slider",this._iconSize=this.isOriginal?40:20,this.requestUpdate("filter",previousValue),this.isConnected&&this._updateFilterLabels(nextFilter)}onClick(e){if(this.active)this.isOriginal||(this.$["*sliderEl"].setOperation(this._operation,this._filter),this.$["*showSlider"]=!0);else{let slider=this.$["*sliderEl"];slider.setOperation(this._operation,this._filter),slider.apply()}this.telemetryManager.sendEventCloudImageEditor(e,this.$["*tabId"],{operation:parseFilterValue(this.$["*operationTooltip"])}),this.$["*currentFilter"]=this._filter}_previewSrc(){let cssSize=parseInt(window.getComputedStyle(this).getPropertyValue("--l-base-min-width"),10),previewSize=Number.isFinite(cssSize)&&cssSize>0?cssSize:this._iconSize||32,dpr=window.devicePixelRatio,size=Math.ceil(dpr*previewSize),transformations={...this.$["*editorTransformations"]};return transformations[this._operation]=this._filter!==FAKE_ORIGINAL_FILTER?{name:this._filter,amount:100}:void 0,(0,cdn_utils.LN)(this._originalUrl,(0,cdn_utils.$z)(transformationUtils.jO,(0,transformationUtils.ON)(transformations),`quality/${dpr>=2?"lightest":"normal"}`,`scale_crop/${size}x${size}/center`,`@clib/${env.r}/${env.i}/uc-cloud-image-editor/`))}async _observerCallback(entries,observer){let intersectionEntry=entries[0];intersectionEntry?.isIntersecting?await this._loadPreview(observer):this._cancelPreload?.()}initCallback(){super.initCallback(),this._observer=new window.IntersectionObserver(this._observerCallback.bind(this),{threshold:[0,1]});let originalUrl=this.$["*originalUrl"];this._originalUrl=originalUrl??"",this.sub("*originalUrl",nextUrl=>{this._originalUrl=nextUrl??"",!this.isOriginal&&this._originalUrl&&this.isConnected&&!this._previewImage&&(this._observer?.observe(this),this._schedulePreviewVisibilityCheck())}),this.isOriginal||(this._observer?.observe(this),this._schedulePreviewVisibilityCheck()),this._filter&&this._updateFilterLabels(this._filter),this.sub("*currentFilter",currentFilter=>{this.active=!!(currentFilter&&currentFilter===this._filter)}),this.sub("*networkProblems",async networkProblems=>{networkProblems||(this._previewImage?await this._loadPreview():this._schedulePreviewVisibilityCheck())})}disconnectedCallback(){super.disconnectedCallback(),this._observer?.disconnect(),this._cancelPreload?.(),this._clearPreviewVisibilityChecks()}updated(changedProperties){super.updated(changedProperties),changedProperties.has("isOriginal")&&(this.isOriginal?this._observer?.unobserve(this):(this._observer?.observe(this),this._schedulePreviewVisibilityCheck()))}_updateFilterLabels(filterName){if(!filterName){this.titleProp="";return}let label=this.l10n("a11y-cloud-editor-apply-filter",{name:filterName.toLowerCase()});this.titleProp=label}async _loadPreview(observer){if(!this.isConnected){observer?.unobserve(this),this._cancelPreload?.(),this._cancelPreload=void 0;return}if(!this._originalUrl){this._previewVisibilityCheckTimeout||this._previewVisibilityCheckRaf||this._schedulePreviewVisibilityCheck();return}let requestId=++this._lastPreviewRequestId,src="";try{src=await this.proxyUrl(this._previewSrc())}catch(err){this.$["*networkProblems"]=!0,console.error("Failed to resolve preview URL",{error:err});return}this._previewLoaded=!1,this._cancelPreload?.();let{promise,cancel}=(0,preloadImage.N)(src);this._cancelPreload=()=>{cancel(),this._lastPreviewRequestId===requestId&&(this._cancelPreload=void 0)};try{if(await promise,this._lastPreviewRequestId!==requestId||!this.isConnected)return;this._previewImage=src,this._previewLoaded=!0,this._clearPreviewVisibilityChecks(),(observer??this._observer)?.unobserve(this)}catch(err){this.$["*networkProblems"]=!0,console.error("Failed to load image",{error:err}),this._schedulePreviewVisibilityCheck()}finally{this._lastPreviewRequestId===requestId&&(this._cancelPreload=void 0)}}_schedulePreviewVisibilityCheck(){!this.isConnected||this._previewImage||this._previewLoaded||this.isOriginal||this.$["*networkProblems"]?this._clearPreviewVisibilityChecks():(this._previewVisibilityCheckRaf&&cancelAnimationFrame(this._previewVisibilityCheckRaf),this._previewVisibilityCheckRaf=requestAnimationFrame(()=>{if(this._previewVisibilityCheckRaf=void 0,!this.isConnected||this._previewImage||this._previewLoaded||this.isOriginal)return void this._clearPreviewVisibilityChecks();let rect=this.getBoundingClientRect(),hasSize=rect.width>0&&rect.height>0,viewportWidth=window.innerWidth||document.documentElement.clientWidth,viewportHeight=window.innerHeight||document.documentElement.clientHeight;hasSize&&rect.bottom>0&&rect.right>0&&rect.top<viewportHeight&&rect.left<viewportWidth?this._loadPreview():this._previewVisibilityCheckTimeout=window.setTimeout(()=>{this._previewVisibilityCheckTimeout=void 0,this._schedulePreviewVisibilityCheck()},500)}))}_clearPreviewVisibilityChecks(){this._previewVisibilityCheckRaf&&(cancelAnimationFrame(this._previewVisibilityCheckRaf),this._previewVisibilityCheckRaf=void 0),this._previewVisibilityCheckTimeout&&(window.clearTimeout(this._previewVisibilityCheckTimeout),this._previewVisibilityCheckTimeout=void 0)}get _shouldShowPreview(){return!!(this._previewLoaded&&!this.active&&!this.isOriginal)}render(){let clickHandler=this.onClick,previewStyles={opacity:this._shouldShowPreview?"1":"0"};this._previewImage&&(previewStyles.backgroundImage=`url(${this._previewImage})`);let iconStyles={opacity:this.active||this.isOriginal?"1":"0"};return(0,external_lit_.html)`<button role="option" type="button" class=${classMap(this.buttonClasses)} aria-label=${ifDefined(this.titleProp)} title=${ifDefined(this.titleProp)} @click=${clickHandler} ><div class="uc-preview" ?data-loaded=${this._previewLoaded} style=${(0,style_map_js_.styleMap)(previewStyles)}></div><uc-icon class=${classMap({"uc-original-icon":this.isOriginal})} name=${this.icon} style=${(0,style_map_js_.styleMap)(iconStyles)} ></uc-icon></button>`}constructor(...args){super(...args),this._operation="",this._filter="",this._originalUrl="",this._lastPreviewRequestId=0,this._previewImage=null,this._previewLoaded=!1,this.isOriginal=!1,this._iconSize=20}}EditorFilterControl_ts_decorate([(0,decorators_js_.state)()],EditorFilterControl.prototype,"_previewImage",void 0),EditorFilterControl_ts_decorate([(0,decorators_js_.state)()],EditorFilterControl.prototype,"_previewLoaded",void 0),EditorFilterControl_ts_decorate([(0,decorators_js_.state)()],EditorFilterControl.prototype,"isOriginal",void 0),EditorFilterControl_ts_decorate([(0,decorators_js_.state)()],EditorFilterControl.prototype,"_iconSize",void 0),EditorFilterControl_ts_decorate([(0,decorators_js_.property)({type:String})],EditorFilterControl.prototype,"filter",null);var throttle=__webpack_require__(3442);function viewerImageSrc(originalUrl,width,transformations){let dpr=window.devicePixelRatio,size=Math.min(Math.ceil(width*dpr),3e3);return(0,cdn_utils.LN)(originalUrl,(0,cdn_utils.$z)(transformationUtils.jO,(0,transformationUtils.ON)(transformations),`quality/${dpr>=2?"lightest":"normal"}`,`stretch/off/-/resize/${size}x`,`@clib/${env.r}/${env.i}/uc-cloud-image-editor/`))}class EditorImageCropper extends LitBlock.x{constructor(){super(),this.ctxOwner=!0,this._imageSize={width:0,height:0},this._ctx=null,this._isActive=!1,this._image=null,this._canvasRef=(0,ref_js_.createRef)(),this._frameRef=(0,ref_js_.createRef)(),this.init$={...this.init$,"*padding":20,"*operations":{rotate:0,mirror:!1,flip:!1},"*imageBox":{x:0,y:0,width:0,height:0},"*cropBox":{x:0,y:0,width:0,height:0}},this._commitDebounced=(0,debounce.s)(this._commit.bind(this),300),this._handleResizeThrottled=(0,throttle.n)(()=>{this.isConnected&&this._isActive&&(this._initCanvas(),this._syncTransformations(),this._alignImage(),this._alignCrop(),this._draw())},100)}firstUpdated(changedProperties){super.firstUpdated(changedProperties),this._initCanvas()}_syncTransformations(){let pickedTransformations=function(obj,keys){let result={};for(let key of keys){let value=obj[key];(Object.hasOwn(obj,key)||void 0!==value)&&(result[key]=value)}return result}(this.$["*editorTransformations"],Object.keys(this.$["*operations"])),operations={...this.$["*operations"],...pickedTransformations};this.$["*operations"]=operations}_initCanvas(){let canvas=this._canvasRef.value;if(!canvas)return;let ctx=canvas.getContext("2d"),width=this.offsetWidth,height=this.offsetHeight,dpr=window.devicePixelRatio;canvas.style.width=`${width}px`,canvas.style.height=`${height}px`,canvas.width=width*dpr,canvas.height=height*dpr,ctx?.scale(dpr,dpr),this._canvas=canvas,this._ctx=ctx}_alignImage(){let imageBox;if(!this._isActive||!this._image)return;let image=this._image,padding=this.$["*padding"],{rotate}=this.$["*operations"],bounds={width:this.offsetWidth,height:this.offsetHeight},naturalSize=(0,crop_utils.BT)({width:image.naturalWidth,height:image.naturalHeight},rotate);if(naturalSize.width>bounds.width-2*padding||naturalSize.height>bounds.height-2*padding){let imageAspectRatio=naturalSize.width/naturalSize.height;if(imageAspectRatio>bounds.width/bounds.height){let width=bounds.width-2*padding,height=width/imageAspectRatio;imageBox={x:0+padding,y:padding+(bounds.height-2*padding)/2-height/2,width,height}}else{let height=bounds.height-2*padding,width=height*imageAspectRatio;imageBox={x:padding+(bounds.width-2*padding)/2-width/2,y:0+padding,width,height}}}else{let{width,height}=naturalSize;imageBox={x:padding+(bounds.width-2*padding)/2-width/2,y:padding+(bounds.height-2*padding)/2-height/2,width,height}}this.$["*imageBox"]=(0,crop_utils.rH)(imageBox)}_alignCrop(){let cropBox=this.$["*cropBox"],imageBox=this.$["*imageBox"],{rotate}=this.$["*operations"],cropTransformation=this.$["*editorTransformations"].crop,{width:previewWidth,x:previewX,y:previewY}=imageBox;if(cropTransformation){let{dimensions:[width,height],coords:[x,y]}=cropTransformation,{width:sourceWidth}=(0,crop_utils.BT)(this._imageSize,rotate),ratio=previewWidth/sourceWidth;cropBox=(0,crop_utils.YH)((0,crop_utils.rH)({x:previewX+x*ratio,y:previewY+y*ratio,width:width*ratio,height:height*ratio}),imageBox)}let cropPreset=this.$["*currentAspectRatio"],cropAspectRatio=cropPreset?cropPreset.width/cropPreset.height:void 0;if(!(0,crop_utils.Ze)(cropBox,imageBox)||cropAspectRatio&&!(0,crop_utils.n)(cropBox,cropAspectRatio)){let imageAspectRatio=imageBox.width/imageBox.height,width=imageBox.width,height=imageBox.height;cropAspectRatio&&(imageAspectRatio>cropAspectRatio?width=Math.min(imageBox.height*cropAspectRatio,imageBox.width):height=Math.min(imageBox.width/cropAspectRatio,imageBox.height)),cropBox={x:imageBox.x+imageBox.width/2-width/2,y:imageBox.y+imageBox.height/2-height/2,width,height}}this.$["*cropBox"]=(0,crop_utils.YH)((0,crop_utils.rH)(cropBox),imageBox)}_drawImage(){let ctx=this._ctx;if(!ctx)return;let image=this._image;if(!image)return;let imageBox=this.$["*imageBox"],{mirror,flip,rotate}=this.$["*operations"],rotated=(0,crop_utils.BT)({width:imageBox.width,height:imageBox.height},rotate);ctx.save(),ctx.translate(imageBox.x+imageBox.width/2,imageBox.y+imageBox.height/2),ctx.rotate(-(rotate*Math.PI*1)/180),ctx.scale(mirror?-1:1,flip?-1:1),ctx.drawImage(image,-rotated.width/2,-rotated.height/2,rotated.width,rotated.height),ctx.restore()}_draw(){if(!this._isActive||!this._image||!this._canvas||!this._ctx)return;let canvas=this._canvas;this._ctx.clearRect(0,0,canvas.width,canvas.height),this._drawImage()}_animateIn({fromViewer}){this._image&&(this._frameRef.value?.toggleThumbs(!0),this._transitionToImage(),setTimeout(()=>{this.className=classNames({"uc-active_from_viewer":fromViewer,"uc-active_from_editor":!fromViewer,"uc-inactive_to_editor":!1})}))}_getCropDimensions(){let cropBox=this.$["*cropBox"],imageBox=this.$["*imageBox"],{rotate}=this.$["*operations"],{width:previewWidth,height:previewHeight}=imageBox,{width:sourceWidth,height:sourceHeight}=(0,crop_utils.BT)(this._imageSize,rotate),{width:cropWidth,height:cropHeight}=cropBox,ratioW=previewWidth/sourceWidth,ratioH=previewHeight/sourceHeight;return[(0,crop_utils.qE)(Math.round(cropWidth/ratioW),1,sourceWidth),(0,crop_utils.qE)(Math.round(cropHeight/ratioH),1,sourceHeight)]}_getCropTransformation(){let cropBox=this.$["*cropBox"],imageBox=this.$["*imageBox"],{rotate}=this.$["*operations"],{width:previewWidth,height:previewHeight,x:previewX,y:previewY}=imageBox,{width:sourceWidth,height:sourceHeight}=(0,crop_utils.BT)(this._imageSize,rotate),{x:cropX,y:cropY}=cropBox,dimensions=this._getCropDimensions(),crop={dimensions,coords:[(0,crop_utils.qE)(Math.round((cropX-previewX)/(previewWidth/sourceWidth)),0,sourceWidth-dimensions[0]),(0,crop_utils.qE)(Math.round((cropY-previewY)/(previewHeight/sourceHeight)),0,sourceHeight-dimensions[1])]};return!crop||[({dimensions,coords})=>[...dimensions,...coords].every(number=>Number.isInteger(number)&&Number.isFinite(number)),({dimensions,coords})=>dimensions.every(d=>d>0)&&coords.every(c=>c>=0)].every(matcher=>matcher(crop))?dimensions[0]!==sourceWidth||dimensions[1]!==sourceHeight?crop:void 0:void console.error("Cropper is trying to create invalid crop object",{payload:crop})}_commit(){if(!this.isConnected||!this._imageSize)return;let{rotate,mirror,flip}=this.$["*operations"],crop=this._getCropTransformation(),transformations={...this.$["*editorTransformations"],crop,rotate,mirror,flip};this.$["*editorTransformations"]=transformations}setValue(operation,value){this.$["*operations"]={...this.$["*operations"],[operation]:value},this._isActive&&(this._alignImage(),this._alignCrop(),this._draw())}getValue(operation){return this.$["*operations"][operation]}async activate(imageSize,{fromViewer}={}){if(!this._isActive){this._isActive=!0,await this.updateComplete,this._initCanvas(),this._imageSize=imageSize,this.removeEventListener("transitionend",this._reset);try{let originalUrl=this.$["*originalUrl"],transformations=this.$["*editorTransformations"];this._image=await this._waitForImage(originalUrl,transformations),this._syncTransformations(),this._handleResizeThrottled(),this._animateIn({fromViewer})}catch(err){console.error("Failed to activate cropper",{error:err}),this.telemetryManager.sendEventError(err,"cloud editor image. Failed to activate cropper")}this._observer=new ResizeObserver(entries=>{let[entry]=entries;!entry||entry.contentRect.width>0&&entry.contentRect.height>0&&this._isActive&&this._image&&this._handleResizeThrottled()}),this._observer.observe(this)}}deactivate({reset=!1}={}){this._isActive&&(reset||this._commit(),this._isActive=!1,this._transitionToCrop(),this.className=classNames({"uc-active_from_viewer":!1,"uc-active_from_editor":!1,"uc-inactive_to_editor":!0}),this._frameRef.value?.toggleThumbs(!1),this.addEventListener("transitionend",this._reset,{once:!0}),this._observer?.disconnect())}_transitionToCrop(){let dimensions=this._getCropDimensions(),cropBox=this.$["*cropBox"],scale=Math.min(Math.min(this.offsetWidth,dimensions[0])/cropBox.width,Math.min(this.offsetHeight,dimensions[1])/cropBox.height),cropCenterX=cropBox.x+cropBox.width/2,cropCenterY=cropBox.y+cropBox.height/2;this.style.transform=`scale(${scale}) translate(${(this.offsetWidth/2-cropCenterX)/scale}px, ${(this.offsetHeight/2-cropCenterY)/scale}px)`,this.style.transformOrigin=`${cropCenterX}px ${cropCenterY}px`}_transitionToImage(){let cropBox=this.$["*cropBox"],cropCenterX=cropBox.x+cropBox.width/2,cropCenterY=cropBox.y+cropBox.height/2;this.style.transform="scale(1)",this.style.transformOrigin=`${cropCenterX}px ${cropCenterY}px`}_reset(){this._isActive||(this._image=null)}async _waitForImage(originalUrl,transformations){let width=this.offsetWidth;transformations={...transformations,crop:void 0,rotate:void 0,flip:void 0,mirror:void 0};let src=await this.proxyUrl(viewerImageSrc(originalUrl,width,transformations)),{promise,cancel,image}=(0,preloadImage.N)(src),stop=this._handleImageLoading(src);return image.addEventListener("load",stop,{once:!0}),image.addEventListener("error",stop,{once:!0}),this._cancelPreload?.(),this._cancelPreload=cancel,promise.then(()=>image).catch(err=>(console.error("Failed to load image",{error:err}),this.$["*networkProblems"]=!0,image))}_handleImageLoading(src){let operation="crop",loadingOperations=this.$["*loadingOperations"],operationMap=loadingOperations.get(operation);return operationMap||(operationMap=new Map,loadingOperations.set(operation,operationMap)),operationMap.get(src)||(operationMap.set(src,!0),this.$["*loadingOperations"]=loadingOperations),()=>{let map=loadingOperations.get(operation);map?.has(src)&&(map.delete(src),this.$["*loadingOperations"]=loadingOperations)}}initCallback(){super.initCallback(),this.sub("*imageBox",()=>{this._draw()}),this.sub("*cropBox",()=>{this._image&&this._commitDebounced()}),this.sub("*currentAspectRatio",()=>{this._alignCrop()}),setTimeout(()=>{this.sub("*networkProblems",networkProblems=>{!networkProblems&&this._isActive&&this._imageSize&&this.activate(this._imageSize,{fromViewer:!1})})},0)}disconnectedCallback(){super.disconnectedCallback(),this._observer?.disconnect(),this._image&&(this._image=null)}render(){return(0,external_lit_.html)`<canvas class="uc-canvas" ${(0,ref_js_.ref)(this._canvasRef)}></canvas><uc-crop-frame ${(0,ref_js_.ref)(this._frameRef)}></uc-crop-frame>`}}function linspace(a,b,n){let lastIndex=n-1,ret=Array(n);for(let i=lastIndex;i>=0;i-=1)ret[i]=Math.ceil((i*b+(lastIndex-i)*a)/lastIndex);return ret}function keypointsRange(operation,value){let n=toolbar_constants.UA[operation].keypointsNumber,{range,zero}=toolbar_constants.UA[operation];return[...new Set([...linspace(range[0],zero,n+1),...linspace(zero,range[1],n+1),zero,value])].sort((a,b)=>a-b)}!function(decorators,target,key,desc){var d,c=arguments.length,r=c<3?target:null===desc?desc=Object.getOwnPropertyDescriptor(target,key):desc;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);c>3&&r&&Object.defineProperty(target,key,r)}([(0,decorators_js_.state)()],EditorImageCropper.prototype,"_image",void 0);class EditorImageFader extends LitBlock.x{constructor(){super(),this._isActive=!1,this._hidden=!0,this._operation="initial",this._transformations={},this._keypoints=[],this._raf=0,this._previewHostRef=(0,ref_js_.createRef)(),this._layersHostRef=(0,ref_js_.createRef)(),this.classList.add("uc-inactive_to_cropper"),this._addKeypointDebounced=(0,debounce.s)(async(operation,filter,value)=>{let shouldSkip=()=>!this._isSame(operation,filter)||this._value!==value||!!this._keypoints.find(kp=>kp.value===value);if(shouldSkip())return;let keypoint=await this._constructKeypoint(operation,value),image=new Image;image.src=keypoint.src;let stop=this._handleImageLoading(keypoint.src);image.addEventListener("load",stop,{once:!0}),image.addEventListener("error",stop,{once:!0}),keypoint.image=image,image.classList.add("uc-fader-image"),image.addEventListener("load",()=>{if(shouldSkip())return;let keypoints=this._keypoints,insertIndex=keypoints.findIndex(kp=>kp.value>value);-1===insertIndex&&(insertIndex=keypoints.length);let nextKeypoint=keypoints[insertIndex],insertBeforeNode=nextKeypoint?.image,container=this._layersHostRef.value;container&&(!insertBeforeNode||container.contains(insertBeforeNode))&&(keypoints.splice(insertIndex,0,keypoint),insertBeforeNode?container.insertBefore(image,insertBeforeNode):container.appendChild(image),this._update(operation,value))},{once:!0}),image.addEventListener("error",()=>{this.$["*networkProblems"]=!0},{once:!0})},600)}_handleImageLoading(src){let operation=this._operation,loadingOperations=this.$["*loadingOperations"];loadingOperations.has(operation)||loadingOperations.set(operation,new Map);let operationMap=loadingOperations.get(operation);return operationMap&&!operationMap.get(src)&&(operationMap.set(src,!0),this.$["*loadingOperations"]=loadingOperations),()=>{let currentOperationMap=loadingOperations.get(operation);currentOperationMap?.has(src)&&(currentOperationMap.delete(src),this.$["*loadingOperations"]=loadingOperations)}}_flush(){window.cancelAnimationFrame(this._raf),this._raf=window.requestAnimationFrame(()=>{for(let kp of this._keypoints){let{image}=kp;image&&(image.style.opacity=kp.opacity.toString(),image.style.zIndex=kp.zIndex.toString())}})}_imageSrc({url=this._url,filter=this._filter??void 0,operation,value}={}){if(!url)throw Error("URL is not defined");let transformations={...this._transformations};operation&&("filter"===operation?filter&&"number"==typeof value&&(transformations.filter={name:filter,amount:value}):"number"==typeof value&&(transformations[operation]=value));let width=this.offsetWidth;return this.proxyUrl(viewerImageSrc(url,width,transformations))}async _constructKeypoint(operation,value){return{src:await this._imageSrc({operation,value}),image:void 0,opacity:0,zIndex:0,value}}_isSame(operation,filter){return this._operation===operation&&this._filter===filter}set(value){var value1;let numericValue="string"==typeof value?parseInt(value,10):value;"string"==typeof(value1=this._operation)&&value1 in toolbar_constants.UA&&Number.isFinite(numericValue)&&(this._update(this._operation,numericValue),this._addKeypointDebounced(this._operation,this._filter,numericValue))}_update(operation,value){this._operation=operation,this._value=value;let{zero}=toolbar_constants.UA[operation],keypointValues=this._keypoints.map(kp=>kp.value),opacities=function(keypoints,value,zero){let section=(function(numbers){let sections=[];for(let idx=0;idx<numbers.length-1;idx+=1){let current=numbers[idx],next=numbers[idx+1];"number"==typeof current&&"number"==typeof next&&sections.push([current,next])}return sections})(keypoints).find(([left,right])=>left<=value&&value<=right);if(!section)return keypoints.map(()=>0);let[left,right]=section;return keypoints.map(point=>{let distance=Math.abs(left-right)||1,relation=Math.abs(value-left)/distance;return left===point?value>zero?1:1-relation:right===point?value>=zero?relation:1:0})}(keypointValues,value,zero),zIndices=keypointValues.map((point,idx)=>point<zero?keypointValues.length-idx:idx);this._keypoints.forEach((kp,idx)=>{let opacity=opacities[idx],zIndex=zIndices[idx];"number"==typeof opacity&&(kp.opacity=opacity),"number"==typeof zIndex&&(kp.zIndex=zIndex)}),this._flush()}_createPreviewImage(){let image=new Image;return image.classList.add("uc-fader-image","uc-fader-image--preview"),image.style.opacity="0",image}async _initNodes(){this._previewImage=this._previewImage||this._createPreviewImage();let previewImage=this._previewImage;previewImage&&this._ensurePreviewAttached(previewImage);let srcList=this._keypoints.map(kp=>kp.src),{images,promise,cancel}=(0,preloadImage.e)(srcList);images.forEach(node=>{let stop=this._handleImageLoading(node.src);node.addEventListener("load",stop),node.addEventListener("error",stop)}),this._cancelLastImages=()=>{cancel(),this._cancelLastImages=void 0};let operation=this._operation,filter=this._filter;if(await promise,this._isActive&&this._isSame(operation,filter)){let host=this._layersHostRef.value;if(!host)return;host.replaceChildren(),this._keypoints.forEach((kp,idx)=>{let kpImage=images[idx];kpImage&&(kpImage.classList.add("uc-fader-image"),kp.image=kpImage,host.appendChild(kpImage))}),this._flush()}}async setTransformations(transformations){if(this._transformations=transformations,this._previewImage){let src=await this._imageSrc(),stop=this._handleImageLoading(src);this._previewImage.src=src,this._previewImage.addEventListener("load",stop,{once:!0}),this._previewImage.addEventListener("error",stop,{once:!0}),this._previewImage.style.opacity="1",this._previewImage.addEventListener("error",()=>{this.$["*networkProblems"]=!0},{once:!0})}}async preload({url,filter,operation,value}){if(!operation||"number"!=typeof value)return;this._cancelBatchPreload?.();let keypoints=keypointsRange(operation,value),srcList=await Promise.all(keypoints.map(kp=>this._imageSrc({url,filter,operation,value:kp}))),{cancel}=(0,preloadImage.e)(srcList);this._cancelBatchPreload=cancel}_setOriginalSrc(src){let image=this._previewImage||this._createPreviewImage();if(this._ensurePreviewAttached(image),this._previewImage=image,image.src===src){image.style.opacity="1",image.style.transform="scale(1)",this.className=classNames({"uc-active_from_viewer":this._fromViewer,"uc-active_from_cropper":!this._fromViewer,"uc-inactive_to_cropper":!1});return}image.style.opacity="0";let stop=this._handleImageLoading(src);image.addEventListener("error",stop,{once:!0}),image.src=src,image.addEventListener("load",()=>{stop(),image&&(image.style.opacity="1",image.style.transform="scale(1)",this.className=classNames({"uc-active_from_viewer":this._fromViewer,"uc-active_from_cropper":!this._fromViewer,"uc-inactive_to_cropper":!1}))},{once:!0}),image.addEventListener("error",()=>{this.$["*networkProblems"]=!0},{once:!0})}async activate({url,operation,value,filter,fromViewer}){if(this._isActive=!0,this._hidden=!1,await this.updateComplete,this._url=url,this._operation=operation??"initial",this._value=value,this._filter=filter,this._fromViewer=fromViewer,"number"!=typeof value&&!filter){let src=await this._imageSrc({operation,value});this._setOriginalSrc(src),this._clearLayersHost();return}operation&&"number"==typeof value&&(this._keypoints=await Promise.all(keypointsRange(operation,value).map(keyValue=>this._constructKeypoint(operation,keyValue))),this._update(operation,value),this._initNodes())}deactivate({hide=!0}={}){this._isActive=!1,this._cancelLastImages?.(),this._cancelBatchPreload?.(),hide&&!this._hidden?(this._hidden=!0,this._previewImage&&(this._previewImage.style.transform="scale(1)"),this.className=classNames({"uc-active_from_viewer":!1,"uc-active_from_cropper":!1,"uc-inactive_to_cropper":!0}),this.addEventListener("transitionend",()=>{this._clearLayersHost()},{once:!0})):this._clearLayersHost()}_ensurePreviewAttached(image){let host=this._previewHostRef.value;host&&(host.contains(image)||host.appendChild(image))}_clearLayersHost(){this._layersHostRef.value?.replaceChildren()}render(){return(0,external_lit_.html)`<div class="uc-fader-preview-host" ${(0,ref_js_.ref)(this._previewHostRef)}></div><div class="uc-fader-layers-host" ${(0,ref_js_.ref)(this._layersHostRef)}></div>`}}class EditorOperationControl extends EditorButtonControl{get operation(){return this._operation}set operation(value){let normalizedValue=value??"";if(this._operation===normalizedValue)return;let previousValue=this._operation;this._operation=normalizedValue,this.requestUpdate("operation",previousValue),this.isConnected&&normalizedValue&&this._updateOperationMetadata(normalizedValue)}_updateOperationMetadata(operation){let label;this.icon=operation;let resolveTitle=()=>{let titleText=this.l10n(operation);return this.title=titleText,titleText};label=this.l10n("a11y-cloud-editor-apply-tuning",{name:this.l10n(operation).toLowerCase()}),this.titleProp=label,resolveTitle()}initCallback(){super.initCallback(),this._operation&&this._updateOperationMetadata(this._operation),this.sub("*editorTransformations",editorTransformations=>{if(!this._operation)return;let{zero}=toolbar_constants.UA[this._operation],value=editorTransformations[this._operation];this.active=void 0!==value&&value!==zero})}onClick(e){let slider=this.$["*sliderEl"];slider?.setOperation(this._operation),this.$["*showSlider"]=!0,this.$["*currentOperation"]=this._operation,this.telemetryManager.sendEventCloudImageEditor(e,this.$["*tabId"],{operation:parseFilterValue(this.$["*operationTooltip"])})}constructor(...args){super(...args),this._operation=""}}!function(decorators,target,key,desc){var d,c=arguments.length,r=c<3?target:null===desc?desc=Object.getOwnPropertyDescriptor(target,key):desc;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);c>3&&r&&Object.defineProperty(target,key,r)}([(0,decorators_js_.property)({type:String})],EditorOperationControl.prototype,"operation",null);let noopScrollListener=()=>{};class EditorScroller extends LitBlock.x{connectedCallback(){super.connectedCallback(),this.addEventListener("wheel",this._handleWheel,{passive:!1}),this.addEventListener("scroll",noopScrollListener,{passive:!0})}disconnectedCallback(){this.removeEventListener("wheel",this._handleWheel),this.removeEventListener("scroll",noopScrollListener),super.disconnectedCallback()}constructor(...args){super(...args),this.hiddenScrollbar=!1,this._handleWheel=event=>{event.preventDefault();let{deltaY,deltaX}=event;if(Math.abs(deltaX)>1){this.scrollLeft+=deltaX;return}this.scrollLeft+=deltaY}}}function EditorToolbar_ts_decorate(decorators,target,key,desc){var d,c=arguments.length,r=c<3?target:null===desc?desc=Object.getOwnPropertyDescriptor(target,key):desc;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r}!function(decorators,target,key,desc){var d,c=arguments.length,r=c<3?target:null===desc?desc=Object.getOwnPropertyDescriptor(target,key):desc;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);c>3&&r&&Object.defineProperty(target,key,r)}([(0,decorators_js_.property)({type:Boolean,noAccessor:!0,attribute:"hidden-scrollbar"})],EditorScroller.prototype,"hiddenScrollbar",void 0);class EditorToolbar extends LitBlock.x{_onSliderClose(){this.$["*showSlider"]=!1,this.$["*tabId"]===toolbar_constants.XB.CROP&&(this.$["*showListAspectRatio"]=!1),this.$["*tabId"]===toolbar_constants.XB.TUNING&&(this._tooltipVisible=!1)}_activateTab(id,{fromViewer=!1,force=!1}={}){this.$["*tabId"]!==id&&(this.$["*tabId"]=id),this._applyTabState(id,{fromViewer,force})}_applyTabState(id,{fromViewer,force=!1}){if(!force&&this.activeTab===id)return void this._syncTabIndicator();this.activeTab=id;let faderEl=this.$["*faderEl"],cropperEl=this.$["*cropperEl"];for(let tabId of(id===toolbar_constants.XB.CROP?(faderEl?.deactivate(),this.$["*imageSize"]&&cropperEl?.activate(this.$["*imageSize"],{fromViewer})):(faderEl?.activate({url:this.$["*originalUrl"],fromViewer}),cropperEl?.deactivate()),toolbar_constants.nz)){let isCurrentTab=tabId===id,toggleRef=this.tabToggleRefs[tabId],toggleEl=toggleRef?.value;toggleEl&&(toggleEl.active=isCurrentTab),isCurrentTab&&this._syncTabIndicator()}}_syncTabIndicator(){let toggleRef=this.tabToggleRefs[this.activeTab],toggleEl=toggleRef?.value,indicatorEl=this._tabIndicatorRef.value;if(!toggleEl||!indicatorEl)return;let offset=toggleEl.offsetLeft,width=toggleEl.offsetWidth||Number(getComputedStyle(toggleEl).width.replace("px",""));(this._tabIndicatorOffset!==offset||this._tabIndicatorWidth!==width)&&(this._tabIndicatorOffset=offset,this._tabIndicatorWidth=width,indicatorEl.style.transform=`translateX(${offset}px)`,indicatorEl.style.width=`${width}px`)}get _hasAspectRatioPicker(){return this._cropPresets.length>=3}_renderControlsByTab(tabId){switch(tabId){case toolbar_constants.XB.CROP:return this._renderCropTabControls();case toolbar_constants.XB.FILTERS:return this._renderFilterTabControls();case toolbar_constants.XB.TUNING:return this._renderTuningTabControls();default:return[]}}_renderCropTabControls(){let renderers=[];if(this._hasAspectRatioPicker)renderers.push(()=>this._renderFreeformControl());else for(let preset of this._cropPresets)renderers.push(()=>this._renderAspectRatioControl(preset));for(let operation of toolbar_constants.Y_)renderers.push(()=>this._renderCropOperationControl(operation));return this._renderControlGroup(renderers)}_renderFilterTabControls(){let renderers=[FAKE_ORIGINAL_FILTER,...toolbar_constants._6].map(filterId=>()=>this._renderFilterControl(filterId));return this._renderControlGroup(renderers)}_renderTuningTabControls(){let renderers=toolbar_constants.DY.map(operation=>()=>this._renderOperationControl(operation));return this._renderControlGroup(renderers)}_renderControlGroup(renderers){return renderers.length?renderers.map(renderControl=>renderControl()):[]}_renderFreeformControl(){return(0,external_lit_.html)`<uc-editor-freeform-button-control></uc-editor-freeform-button-control>`}_renderAspectRatioControl(preset){return(0,external_lit_.html)`<uc-editor-aspect-ratio-button-control .aspectRatio=${preset}></uc-editor-aspect-ratio-button-control>`}_renderCropOperationControl(operation){return(0,external_lit_.html)`<uc-editor-crop-button-control .operation=${operation}></uc-editor-crop-button-control>`}_renderFilterControl(filterId){return(0,external_lit_.html)`<uc-editor-filter-control .filter=${filterId}></uc-editor-filter-control>`}_renderOperationControl(operation){return(0,external_lit_.html)`<uc-editor-operation-control .operation=${operation}></uc-editor-operation-control>`}_renderAspectRatioList(){return this._hasAspectRatioPicker?this._cropPresets.map(preset=>this._renderAspectRatioControl(preset)):[]}async _preloadEditedImage(){if(this.$["*imgContainerEl"]&&this.$["*originalUrl"]){let width=this.$["*imgContainerEl"].offsetWidth,src=await this.proxyUrl(viewerImageSrc(this.$["*originalUrl"],width,this.$["*editorTransformations"]));this._cancelPreload?.();let{cancel}=(0,preloadImage.e)([src]);this._cancelPreload=()=>{cancel(),this._cancelPreload=void 0}}}initCallback(){super.initCallback();let initialCropPresets=this.$["*cropPresetList"]??[];this._cropPresets=[...initialCropPresets],this.sub("*cropPresetList",cropPresetList=>{this._cropPresets=[...cropPresetList??[]]}),this.sub("*imageSize",imageSize=>{imageSize&&setTimeout(()=>{this._activateTab(this.$["*tabId"],{fromViewer:!0})},0)}),this.sub("*editorTransformations",editorTransformations=>{let appliedFilter=editorTransformations?.filter?.name;this.$["*currentFilter"]!==appliedFilter&&(this.$["*currentFilter"]=appliedFilter??"")}),this.sub("*currentFilter",()=>{this._updateInfoTooltip()}),this.sub("*currentOperation",()=>{this._updateInfoTooltip()}),this.sub("*tabId",tabId=>{this._applyTabState(tabId,{fromViewer:!1,force:!0}),this._updateInfoTooltip()}),this.sub("*originalUrl",()=>{this.$["*faderEl"]?.deactivate()}),this.sub("*editorTransformations",transformations=>{this._preloadEditedImage(),this.$["*faderEl"]?.setTransformations(transformations)}),this.sub("*loadingOperations",loadingOperations=>{let anyLoading=!1;for(let[,mapping]of loadingOperations.entries()){if(anyLoading)break;for(let[,loading]of mapping.entries())if(loading){anyLoading=!0;break}}this._debouncedShowLoader(anyLoading)}),this.sub("*showSlider",showSlider=>{showSlider?(this.showSubToolbar=!0,this.showMainToolbar=!1,this._useSliderPanel=!0):this.$["*showListAspectRatio"]||(this.showSubToolbar=!1,this.showMainToolbar=!0)}),this.sub("*showListAspectRatio",show=>{show?(this.showSubToolbar=!0,this.showMainToolbar=!1,this._useSliderPanel=!1):this.$["*showSlider"]||(this.showSubToolbar=!1,this.showMainToolbar=!0)}),this.sub("*tabList",tabList=>{if(this.tabList=tabList,this._showTabToggles=tabList.length>1,!tabList.includes(this.$["*tabId"])&&tabList.length>0){let[firstTab]=tabList;firstTab&&this._activateTab(firstTab,{fromViewer:!1});return}this._syncTabIndicator()}),this.sub("*operationTooltip",tooltip=>{this._operationTooltip=tooltip}),this._updateInfoTooltip()}connectedCallback(){super.connectedCallback(),window.addEventListener("resize",this._handleWindowResize)}firstUpdated(changedProperties){super.firstUpdated(changedProperties),this._assignSharedElements(),this._syncTabIndicator()}updated(changedProperties){super.updated(changedProperties),(changedProperties.has("activeTab")||changedProperties.has("tabList"))&&this.updateComplete.then(()=>this._syncTabIndicator()),(changedProperties.has("showSubToolbar")||changedProperties.has("showMainToolbar"))&&this._assignSharedElements()}disconnectedCallback(){window.removeEventListener("resize",this._handleWindowResize),super.disconnectedCallback(),this.$["*showSlider"]=!1,this.$["*showListAspectRatio"]=!1}_assignSharedElements(){let slider=this._sliderRef.value;slider&&(this.$["*sliderEl"]=slider)}_renderTabToggle(id){let isVisible=this.tabList.includes(id),isActive=this.activeTab===id,columnIndex=this.tabList.indexOf(id),style=columnIndex>=0?(0,style_map_js_.styleMap)({gridColumn:`${columnIndex+1}`}):external_lit_.nothing;return(0,external_lit_.html)` <uc-presence-toggle class="uc-tab-toggle" .visible=${isVisible} .styles=${this._tabToggleStyles}><uc-btn-ui theme="tab" data-id=${id} icon=${id} role="tab" aria-controls=${`tab_${id}`} aria-selected=${isActive?"true":"false"} title-prop=${`a11y-editor-tab-${id}`} .active=${isActive} style=${style} @click=${this._handleTabClick} ${(0,ref_js_.ref)(this.tabToggleRefs[id])} ></uc-btn-ui></uc-presence-toggle>`}_renderTabContent(id){let controls=this._renderControlsByTab(id);return(0,external_lit_.html)` <div id=${`tab_${id}`} class="uc-tab-content" ><uc-editor-scroller hidden-scrollbar><div class="uc-controls-list_align"><div role="listbox" aria-orientation="horizontal" class="uc-controls-list_inner"> ${controls.length?controls:external_lit_.nothing} </div></div></uc-editor-scroller></div>`}render(){let tooltipClasses=["uc-info-tooltip",this._tooltipVisible?"uc-info-tooltip_visible":"uc-info-tooltip_hidden"].join(" "),showAspectRatioList=this._hasAspectRatioPicker;return(0,external_lit_.html)`<uc-line-loader-ui .active=${this._showLoader}></uc-line-loader-ui><div class="uc-info-tooltip_container"><div class="uc-info-tooltip_wrapper"><div class=${tooltipClasses}>${this._operationTooltip??""}</div></div></div><div class="uc-toolbar-container"><uc-presence-toggle role="tablist" class="uc-sub-toolbar" .visible=${this.showMainToolbar} .styles=${this._subTopToolbarStyles} ><div class="uc-tab-content-row"> ${toolbar_constants.nz.map(tabId=>when(this.activeTab===tabId,()=>this._renderTabContent(tabId)))} </div><div class="uc-controls-row"><uc-presence-toggle class="uc-tab-toggles" .visible=${this._showTabToggles} .styles=${this._tabTogglesStyles} @initial-render=${()=>this._syncTabIndicator()} ><div class="uc-tab-toggles_indicator" ${(0,ref_js_.ref)(this._tabIndicatorRef)} ></div> ${toolbar_constants.nz.map(tabId=>this._renderTabToggle(tabId))} </uc-presence-toggle><uc-btn-ui style="order: -1" theme="secondary-icon" icon="closeMax" title-prop="cancel" @click=${this._handleCancel} ></uc-btn-ui><uc-btn-ui theme="primary-icon" icon="done" title-prop="apply" @click=${this._handleApply}></uc-btn-ui></div></uc-presence-toggle><uc-presence-toggle class="uc-sub-toolbar" .visible=${this.showSubToolbar} .styles=${this._subBottomToolbarStyles}><div class="uc-slider" ?hidden=${!this._useSliderPanel}><uc-editor-slider ${(0,ref_js_.ref)(this._sliderRef)}></uc-editor-slider></div><div class="uc-list-aspect-ratio-container" ?hidden=${this._useSliderPanel||!showAspectRatioList}> ${showAspectRatioList?(0,external_lit_.html)`<div class="uc-list-aspect-ratio">${this._renderAspectRatioList()}</div>`:external_lit_.nothing} </div><div class="uc-controls-row"><uc-btn-ui theme="secondary" @click=${this._handleCancelSlider} text=${this.l10n("cancel")}></uc-btn-ui><uc-btn-ui theme="primary" @click=${this._handleApplySlider} text=${this.l10n("apply")}></uc-btn-ui></div></uc-presence-toggle></div>`}constructor(...args){super(...args),this._showLoader=!1,this.showMainToolbar=!0,this.showSubToolbar=!1,this._showTabToggles=!0,this.tabList=[...toolbar_constants.nz],this.activeTab=toolbar_constants.XB.CROP,this._useSliderPanel=!0,this._tooltipVisible=!1,this._operationTooltip=null,this._tabIndicatorOffset=0,this._tabIndicatorWidth=0,this._sliderRef=(0,ref_js_.createRef)(),this._tabIndicatorRef=(0,ref_js_.createRef)(),this.tabToggleRefs={[toolbar_constants.XB.CROP]:(0,ref_js_.createRef)(),[toolbar_constants.XB.TUNING]:(0,ref_js_.createRef)(),[toolbar_constants.XB.FILTERS]:(0,ref_js_.createRef)()},this._handleWindowResize=()=>{this._syncTabIndicator()},this._cropPresets=[],this._debouncedShowLoader=(0,debounce.s)(show=>{this._showLoader=show},500),this._updateInfoTooltip=(0,debounce.s)(()=>{let transformations=this.$["*editorTransformations"],currentOperation=this.$["*currentOperation"],text="",visible=!1;if(this.$["*tabId"]===toolbar_constants.XB.FILTERS)if(visible=!0,this.$["*currentFilter"]&&transformations?.filter?.name===this.$["*currentFilter"]){let value=transformations?.filter?.amount||100;text=`${this.$["*currentFilter"]} ${value}`}else text=this.l10n(FAKE_ORIGINAL_FILTER);else if(this.showSubToolbar&&this.$["*tabId"]===toolbar_constants.XB.TUNING&&currentOperation){visible=!0;let value=transformations?.[currentOperation]||toolbar_constants.UA[currentOperation].zero;text=`${this.l10n(currentOperation)} ${value}`}visible&&(this.$["*operationTooltip"]=text),this._tooltipVisible=visible},0),this._subTopToolbarStyles={hidden:"uc-sub-toolbar--top-hidden",visible:"uc-sub-toolbar--visible"},this._subBottomToolbarStyles={hidden:"uc-sub-toolbar--bottom-hidden",visible:"uc-sub-toolbar--visible"},this._tabToggleStyles={hidden:"uc-tab-toggle--hidden",visible:"uc-tab-toggle--visible"},this._tabTogglesStyles={hidden:"uc-tab-toggles--hidden",visible:"uc-tab-toggles--visible"},this.init$={...this.init$,"*sliderEl":null,"*showSlider":!1,"*showListAspectRatio":!1,"*currentFilter":FAKE_ORIGINAL_FILTER,"*currentOperation":null,"*operationTooltip":null},this._handleCancel=e=>{this.telemetryManager.sendEventCloudImageEditor(e,this.$["*tabId"],{action:"cancel"}),this._cancelPreload?.();let onCancel=this.$["*on.cancel"];onCancel?.()},this._handleApply=e=>{this.telemetryManager.sendEventCloudImageEditor(e,this.$["*tabId"],{action:"apply"});let onApply=this.$["*on.apply"];onApply?.(this.$["*editorTransformations"])},this._handleApplySlider=e=>{this.telemetryManager.sendEventCloudImageEditor(e,this.$["*tabId"],{action:"apply-slider",operation:parseFilterValue(this.$["*operationTooltip"])});let slider=this._sliderRef.value;slider?.apply(),this._onSliderClose()},this._handleCancelSlider=e=>{this.telemetryManager.sendEventCloudImageEditor(e,this.$["*tabId"],{action:"cancel-slider"});let slider=this._sliderRef.value;slider?.cancel(),this._onSliderClose()},this._handleTabClick=e=>{let target=e.currentTarget,id=target?.getAttribute("data-id");id&&(this.telemetryManager.sendEventCloudImageEditor(e,id),this._activateTab(id,{fromViewer:!1}))}}}function BtnUi_ts_decorate(decorators,target,key,desc){var d,c=arguments.length,r=c<3?target:null===desc?desc=Object.getOwnPropertyDescriptor(target,key):desc;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r}EditorToolbar_ts_decorate([(0,decorators_js_.state)()],EditorToolbar.prototype,"_showLoader",void 0),EditorToolbar_ts_decorate([(0,decorators_js_.state)()],EditorToolbar.prototype,"showMainToolbar",void 0),EditorToolbar_ts_decorate([(0,decorators_js_.state)()],EditorToolbar.prototype,"showSubToolbar",void 0),EditorToolbar_ts_decorate([(0,decorators_js_.state)()],EditorToolbar.prototype,"_showTabToggles",void 0),EditorToolbar_ts_decorate([(0,decorators_js_.state)()],EditorToolbar.prototype,"tabList",void 0),EditorToolbar_ts_decorate([(0,decorators_js_.state)()],EditorToolbar.prototype,"activeTab",void 0),EditorToolbar_ts_decorate([(0,decorators_js_.state)()],EditorToolbar.prototype,"_useSliderPanel",void 0),EditorToolbar_ts_decorate([(0,decorators_js_.state)()],EditorToolbar.prototype,"_tooltipVisible",void 0),EditorToolbar_ts_decorate([(0,decorators_js_.state)()],EditorToolbar.prototype,"_operationTooltip",void 0),EditorToolbar_ts_decorate([(0,decorators_js_.state)()],EditorToolbar.prototype,"_cropPresets",void 0);class BtnUi extends LitBlock.x{firstUpdated(changed){super.firstUpdated(changed),this._applyReverse(),this._applyThemeClass()}updated(changed){super.updated(changed),changed.has("reverse")&&this._applyReverse(),changed.has("theme")&&this._applyThemeClass()}_applyReverse(){this.style.flexDirection=this.reverse?"row-reverse":""}_applyThemeClass(){this.theme&&"custom"!==this.theme&&(this.className=`uc-${this.theme}`)}get _iconClassMap(){let iconHidden=this._computedIconHidden;return{"uc-icon":!0,"uc-icon_left":!this.reverse,"uc-icon_right":this.reverse,"uc-icon_hidden":iconHidden,"uc-icon_single":this._computedIconSingle}}get _computedIconHidden(){return!this.icon}get _computedIconSingle(){return!this.text&&!this._computedIconHidden}render(){return(0,external_lit_.html)`<button type="button" role=${ifDefined(this.ariaRole||void 0)} aria-controls=${ifDefined(this.ariaControls||void 0)} aria-label=${ifDefined(this.l10n(this.titleProp))} title=${ifDefined(this.l10n(this.titleProp))} ><uc-icon class=${classMap(this._iconClassMap)} name=${ifDefined(this.icon||void 0)} ?hidden=${this._computedIconHidden} ></uc-icon><div class="uc-text">${this.text}</div></button>`}constructor(...args){super(...args),this.text="",this.icon="",this.reverse=!1,this.theme="default",this.ariaRole=void 0,this.ariaControls="",this.titleProp="",this.active=!1}}BtnUi_ts_decorate([(0,decorators_js_.property)({type:String})],BtnUi.prototype,"text",void 0),BtnUi_ts_decorate([(0,decorators_js_.property)({type:String})],BtnUi.prototype,"icon",void 0),BtnUi_ts_decorate([(0,decorators_js_.property)({type:Boolean,reflect:!0})],BtnUi.prototype,"reverse",void 0),BtnUi_ts_decorate([(0,decorators_js_.property)({type:String,reflect:!0})],BtnUi.prototype,"theme",void 0),BtnUi_ts_decorate([(0,decorators_js_.property)({attribute:"aria-role"})],BtnUi.prototype,"ariaRole",void 0),BtnUi_ts_decorate([(0,decorators_js_.property)({attribute:"aria-controls"})],BtnUi.prototype,"ariaControls",void 0),BtnUi_ts_decorate([(0,decorators_js_.property)({attribute:"title-prop"})],BtnUi.prototype,"titleProp",void 0),BtnUi_ts_decorate([(0,decorators_js_.property)({type:Boolean,noAccessor:!0})],BtnUi.prototype,"active",void 0);class LineLoaderUi extends LitBlock.x{firstUpdated(changedProperties){super.firstUpdated(changedProperties),this.active&&this._start()}updated(changedProperties){super.updated(changedProperties),changedProperties.has("active")&&(this.active?this._start():this._stop())}_start(){let lineEl=this._lineRef.value;if(!lineEl)return;this._isAnimating=!0;let{width}=this.getBoundingClientRect();lineEl.removeEventListener("transitionend",this._handleTransitionEndRight),lineEl.style.transition="transform 1s",lineEl.style.opacity="1",lineEl.style.transform=`translateX(${width}px)`,lineEl.addEventListener("transitionend",this._handleTransitionEndRight,{once:!0})}_stop(){let lineEl=this._lineRef.value;lineEl&&(this._isAnimating=!1,lineEl.removeEventListener("transitionend",this._handleTransitionEndRight),this._resetLine(lineEl))}_resetLine(lineEl){lineEl.style.transition="initial",lineEl.style.opacity="0",lineEl.style.transform="translateX(-101%)"}render(){return(0,external_lit_.html)`<div class="uc-inner"><div class="uc-line" ${(0,ref_js_.ref)(this._lineRef)}></div></div>`}constructor(...args){super(...args),this.active=!1,this._lineRef=(0,ref_js_.createRef)(),this._isAnimating=!1,this._handleTransitionEndRight=()=>{let lineEl=this._lineRef.value;lineEl&&(this._resetLine(lineEl),this._isAnimating&&this.active&&this._start())}}}function PresenceToggle_ts_decorate(decorators,target,key,desc){var d,c=arguments.length,r=c<3?target:null===desc?desc=Object.getOwnPropertyDescriptor(target,key):desc;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r}!function(decorators,target,key,desc){var d,c=arguments.length,r=c<3?target:null===desc?desc=Object.getOwnPropertyDescriptor(target,key):desc;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);c>3&&r&&Object.defineProperty(target,key,r)}([(0,decorators_js_.property)({type:Boolean,reflect:!0})],LineLoaderUi.prototype,"active",void 0);let DEFAULT_STYLE={transition:"uc-transition",visible:"uc-visible",hidden:"uc-hidden"};class PresenceToggle extends LitBlock.x{set visible(value){this._visible=value,this._handleVisible()}get visible(){return this._visible}set styles(styles){this._styles=styles,this._externalTransitions=!0,this._visibleStyle=styles.visible??DEFAULT_STYLE.visible,this._hiddenStyle=styles.hidden??DEFAULT_STYLE.hidden}get styles(){return this._styles}_handleVisible(){this.style.visibility=this._visible?"inherit":"hidden",function(element,...args){let mapping=normalize(...args);for(let token of Object.keys(mapping))element.classList.toggle(token,!!mapping[token])}(this,{[DEFAULT_STYLE.transition]:!this._externalTransitions,[this._visibleStyle]:this._visible,[this._hiddenStyle]:!this._visible}),this.toggleAttribute("inert",!this._visible)}_dispatchInitialRenderEvent(){this._initialRenderComplete||(this._initialRenderComplete=!0,this.dispatchEvent(new CustomEvent("initial-render",{bubbles:!0,composed:!0})))}initCallback(){super.initCallback(),this.classList.toggle("uc-initial",!0),this._externalTransitions||this.classList.add(DEFAULT_STYLE.transition),this._handleVisible(),setTimeout(()=>{this.classList.toggle("uc-initial",!1),this._dispatchInitialRenderEvent()},0)}constructor(...args){super(...args),this._visible=!1,this._styles=DEFAULT_STYLE,this._visibleStyle=DEFAULT_STYLE.visible,this._hiddenStyle=DEFAULT_STYLE.hidden,this._externalTransitions=!1,this._initialRenderComplete=!1}}function SliderUi_ts_decorate(decorators,target,key,desc){var d,c=arguments.length,r=c<3?target:null===desc?desc=Object.getOwnPropertyDescriptor(target,key):desc;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r}PresenceToggle_ts_decorate([(0,decorators_js_.property)({type:Boolean})],PresenceToggle.prototype,"visible",null),PresenceToggle_ts_decorate([(0,decorators_js_.property)({attribute:!1})],PresenceToggle.prototype,"styles",null);class SliderUi extends LitBlock.x{constructor(){super(),this._thumbSize=0,this._inputRef=(0,ref_js_.createRef)(),this._thumbRef=(0,ref_js_.createRef)(),this._stepsRef=(0,ref_js_.createRef)(),this.disabled=!1,this.min=0,this.max=100,this.defaultValue=0,this.zero=0,this._currentValue=0,this._handleSliderInput=event=>{event.stopPropagation();let value=this._extractEventValue(event);null!==value&&(this._setCurrentValue(value),this._emitSliderEvent("slider-input",value))},this._handleSliderChange=event=>{event.stopPropagation();let value=this._extractEventValue(event);null!==value&&this._setCurrentValue(value)},this._handleInputFocus=()=>{this.style.setProperty("--color-effect","var(--hover-color-rgb)")},this._handleInputBlur=()=>{this.style.setProperty("--color-effect","var(--idle-color-rgb)")},this.setAttribute("with-effects","")}_emitSliderEvent(type,value){this.dispatchEvent(new CustomEvent(type,{detail:{value},bubbles:!0,composed:!0}))}firstUpdated(changedProperties){super.firstUpdated(changedProperties),this._thumbSize=Number.parseInt(window.getComputedStyle(this).getPropertyValue("--l-thumb-size"),10)||0,this._syncInputValue(this._currentValue),this._updateSteps(),this._observer=new ResizeObserver(()=>{this._updateSteps(),this._updateValue(this._currentValue)}),this._observer.observe(this);let inputEl=this._inputRef.value;inputEl?.addEventListener("focus",this._handleInputFocus),inputEl?.addEventListener("blur",this._handleInputBlur),window.setTimeout(()=>{this._updateValue(this._currentValue)},0)}willUpdate(changedProperties){super.willUpdate(changedProperties),changedProperties.has("defaultValue")&&this.defaultValue!==this._currentValue&&this._setCurrentValue(this.defaultValue),(changedProperties.has("min")||changedProperties.has("max"))&&this.hasUpdated&&(this._updateSteps(),this._updateValue(this._currentValue)),changedProperties.has("zero")&&this.hasUpdated&&this._updateZeroDot(this._currentValue)}_updateValue(value){this._updateZeroDot(value);let range=this.max-this.min;if(0===range)return;let{width}=this.getBoundingClientRect(),offset=100/range*(value-this.min)*(width-this._thumbSize)/100;window.requestAnimationFrame(()=>{let thumbEl=this._thumbRef.value;thumbEl&&(thumbEl.style.transform=`translateX(${offset}px)`)})}_updateZeroDot(value){if(!this._zeroDotEl)return;let range=this.max-this.min;if(0===range)return;this._zeroDotEl.style.opacity=value===this.zero?"0":"1";let{width}=this.getBoundingClientRect(),offset=100/range*(this.zero-this.min)*(width-this._thumbSize)/100;window.requestAnimationFrame(()=>{this._zeroDotEl&&(this._zeroDotEl.style.transform=`translateX(${offset}px)`)})}_updateSteps(){let stepsEl=this._stepsRef.value;if(!stepsEl)return;let{width}=stepsEl.getBoundingClientRect(),count=Math.ceil(Math.ceil(width/2)/15)-2;if(this._stepsCount===count)return;let fragment=document.createDocumentFragment(),minorStepEl=document.createElement("div"),borderStepEl=document.createElement("div");minorStepEl.className="uc-minor-step",borderStepEl.className="uc-border-step",fragment.appendChild(borderStepEl);for(let i=0;i<count;i+=1)fragment.appendChild(minorStepEl.cloneNode());fragment.appendChild(borderStepEl.cloneNode());for(let i=0;i<count;i+=1)fragment.appendChild(minorStepEl.cloneNode());fragment.appendChild(borderStepEl.cloneNode());let zeroDotEl=document.createElement("div");zeroDotEl.className="uc-zero-dot",fragment.appendChild(zeroDotEl),this._zeroDotEl=zeroDotEl,stepsEl.innerHTML="",stepsEl.appendChild(fragment),this._stepsCount=count}disconnectedCallback(){super.disconnectedCallback();let inputEl=this._inputRef.value;inputEl?.removeEventListener("focus",this._handleInputFocus),inputEl?.removeEventListener("blur",this._handleInputBlur),this._observer?.disconnect(),this._observer=void 0}_setCurrentValue(value){Number.isFinite(value)&&(this._currentValue=value,this.hasUpdated&&(this._syncInputValue(value),this._updateValue(value)))}_syncInputValue(value){let inputEl=this._inputRef.value;inputEl&&(inputEl.value=String(value))}_extractEventValue(event){let target=event.currentTarget;if(!target)return null;let parsedValue=Number.parseInt(target.value,10);return Number.isFinite(parsedValue)?parsedValue:null}render(){return(0,external_lit_.html)`<div class="uc-steps" ${(0,ref_js_.ref)(this._stepsRef)}></div><div class="uc-thumb" ${(0,ref_js_.ref)(this._thumbRef)}></div><input class="uc-input" type="range" ${(0,ref_js_.ref)(this._inputRef)} .min=${String(this.min)} .max=${String(this.max)} .value=${String(this._currentValue)} ?disabled=${this.disabled} @input=${this._handleSliderInput} @change=${this._handleSliderChange} />`}}SliderUi_ts_decorate([(0,decorators_js_.property)({type:Boolean,reflect:!0})],SliderUi.prototype,"disabled",void 0),SliderUi_ts_decorate([(0,decorators_js_.property)({type:Number})],SliderUi.prototype,"min",void 0),SliderUi_ts_decorate([(0,decorators_js_.property)({type:Number})],SliderUi.prototype,"max",void 0),SliderUi_ts_decorate([(0,decorators_js_.property)({type:Number,attribute:!1})],SliderUi.prototype,"defaultValue",void 0),SliderUi_ts_decorate([(0,decorators_js_.property)({type:Number})],SliderUi.prototype,"zero",void 0),SliderUi_ts_decorate([(0,decorators_js_.state)()],SliderUi.prototype,"_currentValue",void 0);var EventEmitter=__webpack_require__(9963);class CloudImageEditor extends CloudImageEditorBlock{static{this.styleAttrs=[...super.styleAttrs,"uc-wgt-common"]}constructor(){super(),this.init$={...this.init$,"*solution":this.tagName}}initCallback(){super.initCallback(),this.telemetryManager.sendEvent({eventType:EventEmitter.Kc.INIT_SOLUTION}),this.a11y?.registerBlock(this)}}var Config=__webpack_require__(8183),Icon=__webpack_require__(8610);let editorI18n={en:{"edit-image":"Edit image","edit-detail":"Details","file-item-edit-button":"Edit","a11y-editor-tab-filters":"Filters","a11y-editor-tab-tuning":"Tuning","a11y-editor-tab-crop":"Crop","a11y-cloud-editor-apply-filter":"Apply {{name}} filter","a11y-cloud-editor-apply-crop":"Apply {{name}} operation","a11y-cloud-editor-apply-tuning":"Apply {{name}} tuning","a11y-cloud-editor-apply-aspect-ratio":"Apply operation {{name}} {{value}}","crop-to-shape":"Crop to {{value}}",custom:"Freeform","freeform-crop":"Freeform crop","cancel-edit":"Cancel edit",back:"Back",apply:"Apply",rotate:"Rotate","flip-vertical":"Flip vertical","flip-horizontal":"Flip horizontal",brightness:"Brightness",contrast:"Contrast",saturation:"Saturation",exposure:"Exposure",gamma:"Gamma",vibrance:"Vibrance",warmth:"Warmth",enhance:"Enhance",original:"Original",resize:"Resize image",crop:"Crop","select-color":"Select color",text:"Text",draw:"Draw","tab-view":"Preview","tab-details":"Details"}},cloudImageEditorPlugin={id:"cloud-image-editor",setup:async({pluginApi,uploaderApi})=>{(0,defineComponents.Y)({...cloud_image_editor_namespaceObject,...CloudImageEditorActivity_namespaceObject}),pluginApi.registry.registerIcon({name:"edit-file",svg:"<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path fill='currentColor' fill-rule='evenodd' d='M18.558 2.804a.78.78 0 0 0-.557.235l-.008.007-2.472 2.46 3.847 3.848 2.46-2.473.004-.003a.78.78 0 0 0 0-1.108l-.004-.003-2.712-2.728a.78.78 0 0 0-.558-.235Zm-.248 7.613-3.852-3.852-8.93 8.887-1.516 5.41 5.41-1.515 8.888-8.93Zm-.636-8.934a2.28 2.28 0 0 1 2.512.505l2.702 2.717.002.002a2.278 2.278 0 0 1 0 3.234l-.002.002-12.541 12.602a.75.75 0 0 1-.33.193l-6.884 1.928a.75.75 0 0 1-.925-.924l1.928-6.885a.75.75 0 0 1 .193-.33l12.603-12.54a2.28 2.28 0 0 1 .742-.504Z' clip-rule='evenodd'/></svg>"}),pluginApi.registry.registerI18n(editorI18n),pluginApi.registry.registerFileAction({id:"edit-file",icon:"edit-file",shouldRender:fileEntry=>!!(fileEntry.isSuccess&&fileEntry.isImage&&fileEntry.cdnUrl),onClick:fileEntry=>{uploaderApi.setCurrentActivity?.(activity_constants.g.CLOUD_IMG_EDIT,{internalId:fileEntry.internalId}),uploaderApi.setModalState?.(!0)}}),pluginApi.registry.registerActivity({id:activity_constants.g.CLOUD_IMG_EDIT,render:host=>{let activityEl=document.createElement("uc-cloud-image-editor-activity");return host.append(activityEl),()=>{host.replaceChildren()}}})}}}};

package/dist/{cloud-image-editor.layered.css → cloudImageEditorPlugin.layered.css}

@@ -1,298 +1,27 @@
-@layer uc, uc.base, uc.components, uc.rules, uc.solutions, uc.post-reset;
-@layer uc.base {
-  :where([uc-wgt-common]) {
-    /* Font */
-    --uc-font-family: system-ui;
-    --uc-font-size: 14px;
-    --uc-line-height: normal;
-    --uc-simple-btn-font-family: system-ui;
-    --uc-simple-btn-font-size: 14px;
-
-    /* Sizes */
-    --uc-button-size: 32px;
-    --uc-preview-size: 32px;
-    --uc-padding: 10px;
-    --uc-radius: 8px;
-    --uc-transition: 0.2s ease;
-    --uc-dialog-width: 430px;
-    --uc-dialog-max-width: 920px;
-    --uc-dialog-max-height: 675px;
-    --uc-simple-btn-padding: 7px 14px;
-
-    --uc-grid-col: 3;
-    --uc-grid-preview-image-height: auto;
-    --uc-grid-gap: calc(var(--uc-padding) / 2);
-    --uc-grid-aspect-ratio: 1 / 1;
-
-    /* Default colors, in case of media query failure */
-    --uc-background: var(--uc-background-light);
-    --uc-foreground: var(--uc-foreground-light);
-    --uc-primary: var(--uc-primary-light);
-    --uc-primary-hover: var(--uc-primary-hover-light);
-    --uc-primary-transparent: var(--uc-primary-transparent-light);
-    --uc-primary-foreground: var(--uc-primary-foreground-light);
-    --uc-secondary: var(--uc-secondary-light);
-    --uc-secondary-hover: var(--uc-secondary-hover-light);
-    --uc-secondary-foreground: var(--uc-secondary-foreground-light);
-    --uc-muted: var(--uc-muted-light);
-    --uc-muted-foreground: var(--uc-muted-foreground-light);
-    --uc-destructive: var(--uc-destructive-light);
-    --uc-destructive-foreground: var(--uc-destructive-foreground-light);
-    --uc-border: var(--uc-border-light);
-    --uc-dialog-shadow: var(--uc-dialog-shadow-light);
-    --uc-simple-btn: var(--uc-simple-btn-light);
-    --uc-simple-btn-hover: var(--uc-simple-btn-hover-light);
-    --uc-simple-btn-foreground: var(--uc-simple-btn-foreground-light);
-  }
-
-  @supports not (color: oklch(0% 0 0)) {
-    :where([uc-wgt-common]) {
-      /* Light colors RGB fallback */
-      --uc-primary-rgb-light: 23 75 215;
-      --uc-primary-light: rgb(var(--uc-primary-rgb-light));
-      --uc-primary-hover-light: rgb(var(--uc-primary-rgb-light) / 90%);
-      --uc-primary-transparent-light: rgb(var(--uc-primary-rgb-light) / 10%);
-      --uc-background-light: rgb(255 255 255);
-      --uc-foreground-light: rgb(24 24 24);
-      --uc-primary-foreground-light: #fff;
-      --uc-secondary-light: rgb(24 24 24 / 5%);
-      --uc-secondary-hover-light: rgb(24 24 24 / 8%);
-      --uc-secondary-foreground-light: rgb(24 24 24);
-      --uc-muted-light: rgb(245 245 245);
-      --uc-muted-foreground-light: rgb(113 113 113);
-      --uc-destructive-light: rgb(232 19 20 / 5%);
-      --uc-destructive-foreground-light: rgb(232 19 20);
-      --uc-border-light: rgb(228 228 232);
-      --uc-dialog-shadow-light: 0px 6px 20px rgb(0 0 0 / 10%);
-      --uc-simple-btn-light: rgb(235 235 235);
-      --uc-simple-btn-hover-light: rgb(228 228 228);
-      --uc-simple-btn-foreground-light: rgb(24 24 24);
-
-      /* Dark colors RGB fallback */
-      --uc-primary-rgb-dark: 87 154 255;
-      --uc-primary-dark: rgb(var(--uc-primary-rgb-dark));
-      --uc-primary-hover-dark: rgb(var(--uc-primary-rgb-dark) / 90%);
-      --uc-primary-transparent-dark: rgb(var(--uc-primary-rgb-dark) / 7%);
-      --uc-background-dark: rgb(27 27 27);
-      --uc-foreground-dark: rgb(225 225 225);
-      --uc-primary-foreground-dark: rgb(0 0 0);
-      --uc-secondary-dark: rgb(225 225 225 / 7%);
-      --uc-secondary-hover-dark: rgb(225 225 225 / 10%);
-      --uc-secondary-foreground-dark: rgb(225 225 225);
-      --uc-muted-dark: rgb(36 36 36);
-      --uc-muted-foreground-dark: rgb(152 152 152);
-      --uc-destructive-dark: rgb(244 90 79 / 10%);
-      --uc-destructive-foreground-dark: rgb(244 90 79);
-      --uc-border-dark: rgb(61 61 61);
-      --uc-dialog-shadow-dark: 0px 6px 20px rgb(0 0 0 / 25%);
-      --uc-simple-btn-dark: rgb(36 36 36);
-      --uc-simple-btn-hover-dark: rgb(43 43 43);
-      --uc-simple-btn-foreground-dark: rgb(255 255 255);
-    }
-  }
-
-  @supports (color: oklch(0% 0 0)) {
-    :where([uc-wgt-common]) {
-      /* Light colors OKLCH */
-      --uc-primary-oklch-light: 47% 0.22 264; /* Quick customization: change this value to your brand color */
-      --uc-primary-light: oklch(var(--uc-primary-oklch-light));
-      --uc-primary-hover-light: oklch(var(--uc-primary-oklch-light) / 90%);
-      --uc-primary-transparent-light: oklch(var(--uc-primary-oklch-light) / 7%);
-      --uc-background-light: oklch(100% 0 0);
-      --uc-foreground-light: oklch(21% 0 0);
-      --uc-primary-foreground-light: oklch(100% 0 0);
-      --uc-secondary-light: oklch(21% 0 0 / 0.05);
-      --uc-secondary-hover-light: oklch(21% 0 0 / 0.08);
-      --uc-secondary-foreground-light: oklch(21% 0 0);
-      --uc-muted-light: oklch(97% 0 0);
-      --uc-muted-foreground-light: oklch(40% 0 0);
-      --uc-destructive-light: oklch(59% 0.235 28.5 / 0.05);
-      --uc-destructive-foreground-light: oklch(59% 0.235 28.5);
-      --uc-border-light: oklch(92% 0 0);
-      --uc-dialog-shadow-light: 0px 6px 20px oklch(0% 0 0 / 0.1);
-      --uc-simple-btn-light: oklch(94% 0 0);
-      --uc-simple-btn-hover-light: oklch(92% 0 0);
-      --uc-simple-btn-foreground-light: oklch(20% 0 0);
-
-      /* Dark colors OKLCH */
-      --uc-primary-oklch-dark: 69% 0.1768 258.4; /* Quick customization: change this value to your brand color */
-      --uc-primary-dark: oklch(var(--uc-primary-oklch-dark));
-      --uc-primary-hover-dark: oklch(var(--uc-primary-oklch-dark) / 90%);
-      --uc-primary-transparent-dark: oklch(var(--uc-primary-oklch-dark) / 7%);
-      --uc-background-dark: oklch(22% 0 0);
-      --uc-foreground-dark: oklch(91% 0 0);
-      --uc-primary-foreground-dark: oklch(0% 0 0);
-      --uc-secondary-dark: oklch(91% 0 0 / 0.07);
-      --uc-secondary-hover-dark: oklch(91% 0 0 / 0.1);
-      --uc-secondary-foreground-dark: oklch(91% 0 0);
-      --uc-muted-dark: oklch(26% 0 0);
-      --uc-muted-foreground-dark: oklch(68% 0 0);
-      --uc-destructive-dark: oklch(67% 0.191 27.5 / 0.1);
-      --uc-destructive-foreground-dark: oklch(67% 0.191 27.5);
-      --uc-border-dark: oklch(36% 0 0);
-      --uc-dialog-shadow-dark: 0px 6px 20px oklch(0% 0 0 / 0.25);
-      --uc-simple-btn-dark: oklch(26% 0 0);
-      --uc-simple-btn-hover-dark: oklch(29% 0 0);
-      --uc-simple-btn-foreground-dark: oklch(100% 0 0);
-    }
-  }
-
-  @media only screen and (max-height: 600px) {
-    :where([uc-wgt-common]) {
-      --uc-dialog-max-height: 100%;
-    }
-  }
-
-  @media only screen and (max-width: 680px) {
-    :where([uc-wgt-common]) {
-      --uc-grid-col: 2;
-    }
-  }
-
-  @media only screen and (max-width: 430px) {
-    :where([uc-wgt-common]) {
-      --uc-dialog-max-width: 100vw;
-      --uc-dialog-max-height: var(--uploadcare-blocks-window-height);
-      --uc-grid-col: 1;
-    }
-  }
-
-  @media (prefers-color-scheme: light) {
-    :where([uc-wgt-common]) {
-      --uc-background: var(--uc-background-light);
-      --uc-foreground: var(--uc-foreground-light);
-      --uc-primary: var(--uc-primary-light);
-      --uc-primary-hover: var(--uc-primary-hover-light);
-      --uc-primary-transparent: var(--uc-primary-transparent-light);
-      --uc-primary-foreground: var(--uc-primary-foreground-light);
-      --uc-secondary: var(--uc-secondary-light);
-      --uc-secondary-hover: var(--uc-secondary-hover-light);
-      --uc-secondary-foreground: var(--uc-secondary-foreground-light);
-      --uc-muted: var(--uc-muted-light);
-      --uc-muted-foreground: var(--uc-muted-foreground-light);
-      --uc-destructive: var(--uc-destructive-light);
-      --uc-destructive-foreground: var(--uc-destructive-foreground-light);
-      --uc-border: var(--uc-border-light);
-      --uc-dialog-shadow: var(--uc-dialog-shadow-light);
-      --uc-simple-btn: var(--uc-simple-btn-light);
-      --uc-simple-btn-hover: var(--uc-simple-btn-hover-light);
-      --uc-simple-btn-foreground: var(--uc-simple-btn-foreground-light);
-    }
-  }
-
-  @media (prefers-color-scheme: dark) {
-    :where([uc-wgt-common]) {
-      --uc-background: var(--uc-background-dark);
-      --uc-foreground: var(--uc-foreground-dark);
-      --uc-primary: var(--uc-primary-dark);
-      --uc-primary-hover: var(--uc-primary-hover-dark);
-      --uc-primary-transparent: var(--uc-primary-transparent-dark);
-      --uc-primary-foreground: var(--uc-primary-foreground-dark);
-      --uc-secondary: var(--uc-secondary-dark);
-      --uc-secondary-hover: var(--uc-secondary-hover-dark);
-      --uc-secondary-foreground: var(--uc-secondary-foreground-dark);
-      --uc-muted: var(--uc-muted-dark);
-      --uc-muted-foreground: var(--uc-muted-foreground-dark);
-      --uc-destructive: var(--uc-destructive-dark);
-      --uc-destructive-foreground: var(--uc-destructive-foreground-dark);
-      --uc-border: var(--uc-border-dark);
-      --uc-dialog-shadow: var(--uc-dialog-shadow-dark);
-      --uc-simple-btn: var(--uc-simple-btn-dark);
-      --uc-simple-btn-hover: var(--uc-simple-btn-hover-dark);
-      --uc-simple-btn-foreground: var(--uc-simple-btn-foreground-dark);
-    }
-  }
-
-  :where(.uc-light) {
-    --uc-background: var(--uc-background-light);
-    --uc-foreground: var(--uc-foreground-light);
-    --uc-primary: var(--uc-primary-light);
-    --uc-primary-hover: var(--uc-primary-hover-light);
-    --uc-primary-transparent: var(--uc-primary-transparent-light);
-    --uc-primary-foreground: var(--uc-primary-foreground-light);
-    --uc-secondary: var(--uc-secondary-light);
-    --uc-secondary-hover: var(--uc-secondary-hover-light);
-    --uc-secondary-foreground: var(--uc-secondary-foreground-light);
-    --uc-muted: var(--uc-muted-light);
-    --uc-muted-foreground: var(--uc-muted-foreground-light);
-    --uc-destructive: var(--uc-destructive-light);
-    --uc-destructive-foreground: var(--uc-destructive-foreground-light);
-    --uc-border: var(--uc-border-light);
-    --uc-dialog-shadow: var(--uc-dialog-shadow-light);
-    --uc-simple-btn: var(--uc-simple-btn-light);
-    --uc-simple-btn-hover: var(--uc-simple-btn-hover-light);
-    --uc-simple-btn-foreground: var(--uc-simple-btn-foreground-light);
-  }
-
-  :where(.uc-dark) {
-    --uc-background: var(--uc-background-dark);
-    --uc-foreground: var(--uc-foreground-dark);
-    --uc-primary: var(--uc-primary-dark);
-    --uc-primary-hover: var(--uc-primary-hover-dark);
-    --uc-primary-transparent: var(--uc-primary-transparent-dark);
-    --uc-primary-foreground: var(--uc-primary-foreground-dark);
-    --uc-secondary: var(--uc-secondary-dark);
-    --uc-secondary-hover: var(--uc-secondary-hover-dark);
-    --uc-secondary-foreground: var(--uc-secondary-foreground-dark);
-    --uc-muted: var(--uc-muted-dark);
-    --uc-muted-foreground: var(--uc-muted-foreground-dark);
-    --uc-destructive: var(--uc-destructive-dark);
-    --uc-destructive-foreground: var(--uc-destructive-foreground-dark);
-    --uc-border: var(--uc-border-dark);
-    --uc-dialog-shadow: var(--uc-dialog-shadow-dark);
-    --uc-simple-btn: var(--uc-simple-btn-dark);
-    --uc-simple-btn-hover: var(--uc-simple-btn-hover-dark);
-    --uc-simple-btn-foreground: var(--uc-simple-btn-foreground-dark);
-  }
-
-  :where(.uc-purple) {
-    --uc-primary-oklch-light: 47% 0.22 300;
-    --uc-primary-oklch-dark: 69% 0.1768 300;
-  }
-
-  :where(.uc-red) {
-    --uc-primary-oklch-light: 47% 0.21 21;
-    --uc-primary-oklch-dark: 71% 0.1768 21;
-  }
-
-  :where(.uc-orange) {
-    --uc-primary-oklch-light: 47% 0.1376 51.88;
-    --uc-primary-oklch-dark: 69% 0.1768 51.88;
-  }
-
-  :where(.uc-green) {
-    --uc-primary-oklch-light: 45% 0.14 130;
-    --uc-primary-oklch-dark: 69% 0.1768 130;
-  }
-
-  :where(.uc-turquoise) {
-    --uc-primary-oklch-light: 45% 0.0854 174;
-    --uc-primary-oklch-dark: 69% 0.1768 174;
-  }
-
-  :where(.uc-gray) {
-    --uc-primary-oklch-light: 10% 0 0;
-    --uc-primary-oklch-dark: 97% 0 0;
+/**
+ * @license
+ * Package: @uploadcare/file-uploader@1.28.0-alpha.111 (MIT)
+ * License: https://github.com/uploadcare/blob/main/LICENSE
+ * Built: 2026-03-03T12:19:31.971Z
+ */
+@layer uc.components {
+  uc-cloud-image-editor-activity {
+    position: relative;
+    display: flex;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    background-color: var(--uc-background);
   }
 
-  :where(.uc-contrast) {
-    --uc-border-light: oklch(50% 0 0);
-    --uc-border-dark: oklch(50% 0 0);
-
-    --uc-muted-light: oklch(98% 0 0);
-    --uc-muted-dark: oklch(16% 0 0);
-
-    --uc-muted-foreground-light: oklch(20% 0 0);
-    --uc-muted-foreground-dark: oklch(80% 0 0);
-
-    --uc-background-light: oklch(100% 0 0);
-    --uc-foreground-light: oklch(0% 0 0);
-
-    --uc-background-dark: oklch(10% 0 0);
-    --uc-foreground-dark: oklch(100% 0 0);
+  [uc-modal] > dialog:has([activity="cloud-image-edit"][active]) {
+    width: 100%;
+    height: 100%;
   }
 }
+
 /** biome-ignore-all lint/complexity/noImportantStyles: TODO: Refactor styles to get rid of !important rules */
+
 @layer uc.solutions {
   /* TODO: we should use basic theme there  */
 
@@ -336,7 +65,7 @@
     --modal-header-height: var(--size-panel-heading);
     --modal-toolbar-height: var(--size-panel-heading);
 
-    --transparent-pixel: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=");
+    --transparent-pixel: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=);
 
     display: block;
     width: 100%;
@@ -1534,6 +1263,7 @@
     margin-right: calc(3 * var(--cldtr-gap-mid-1));
   }
 }
+
 @layer uc.solutions {
   :where([uc-cloud-image-editor]) uc-icon {
     display: flex;
@@ -1547,3 +1277,13 @@
     height: calc(var(--uc-button-size) / 2);
   }
 }
+
+
+
+
+
+
+
+
+
+