@doegis/core/widgets/Attachments.js

DOE GIS API

import{_ as e}from"../chunks/tslib.es6.js";import t from"../core/Error.js";import{isSome as s}from"../core/maybe.js";import{on as i,watch as a,initial as n}from"../core/reactiveUtils.js";import{formatFileSize as r}from"../core/unitFormatUtils.js";import{property as l}from"../core/accessorSupport/decorators/property.js";import{cast as o}from"../core/accessorSupport/decorators/cast.js";import"../core/arrayUtils.js";import{subclass as d}from"../core/accessorSupport/decorators/subclass.js";import c from"./Widget.js";import m from"./Attachments/AttachmentsViewModel.js";import{getIconPath as h,isSupportedImage as u}from"./Attachments/support/attachmentUtils.js";import{storeNode as p,discardNode as g,isRTL as b}from"./support/widgetUtils.js";import{messageBundle as f}from"./support/decorators/messageBundle.js";import{tsx as _}from"./support/jsxFactory.js";const v={addButton:!0,addSubmitButton:!0,cancelAddButton:!0,cancelUpdateButton:!0,deleteButton:!0,errorMessage:!0,progressBar:!0,updateButton:!0},y="esri-attachments",w="esri-button",A={base:y,loaderContainer:`${y}__loader-container`,loader:`${y}__loader`,fadeIn:`${y}--fade-in`,container:`${y}__container`,containerList:`${y}__container--list`,containerPreview:`${y}__container--preview`,actions:`${y}__actions`,deleteButton:`${y}__delete-button`,addAttachmentButton:`${y}__add-attachment-button`,errorMessage:`${y}__error-message`,items:`${y}__items`,item:`${y}__item`,itemButton:`${y}__item-button`,itemMask:`${y}__item-mask`,itemMaskIcon:`${y}__item-mask--icon`,itemImage:`${y}__image`,itemImageResizable:`${y}__image--resizable`,itemLabel:`${y}__label`,itemFilename:`${y}__filename`,itemChevronIcon:`${y}__item-chevron-icon`,itemLink:`${y}__item-link`,itemLinkOverlay:`${y}__item-link-overlay`,itemLinkOverlayIcon:`${y}__item-link-overlay-icon`,itemEditIcon:`${y}__item-edit-icon`,itemAddIcon:`${y}__item-add-icon`,itemAddButton:`${y}__item-add-button`,formNode:`${y}__form-node`,fileFieldset:`${y}__file-fieldset`,fileLabel:`${y}__file-label`,fileName:`${y}__file-name`,fileInput:`${y}__file-input`,metadata:`${y}__metadata`,metadataFieldset:`${y}__metadata-fieldset`,progressBar:`${y}__progress-bar`,esriWidget:"esri-widget",esriButton:w,buttonDisabled:`${w}--disabled`,esriButtonSecondary:`${w}--secondary`,esriButtonTertiary:`${w}--tertiary`,esriButtonThird:`${w}--third`,esriButtonSmall:`${w}--small`,esriButtonHalf:`${w}--half`,empty:"esri-widget__content--empty",iconExternalLink:"esri-icon-link-external",iconEdit:"esri-icon-edit",iconRight:"esri-icon-right",iconLeft:"esri-icon-left",iconPlus:"esri-icon-plus"},F=window.CSS;let k=class extends c{constructor(e,t){super(e,t),this.displayType="auto",this.messages=null,this.messagesUnits=null,this.selectedFile=null,this.submitting=!1,this.viewModel=null,this.visibleElements={...v},this._supportsImageOrientation=F&&F.supports&&F.supports("image-orientation","from-image"),this._addAttachmentForm=null,this._updateAttachmentForm=null}initialize(){this.viewModel||(this.viewModel=new m),this.addHandles([i((()=>this.viewModel?.attachmentInfos),"change",(()=>this.scheduleRender())),i((()=>this.viewModel?.fileInfos),"change",(()=>this.scheduleRender())),a((()=>this.viewModel?.mode),(()=>this._modeChanged()),n)])}loadDependencies(){return Promise.all([import("@esri/calcite-components/dist/components/calcite-icon.js")])}get abilities(){return this.viewModel.abilities}set abilities(e){this.viewModel.abilities=e}get effectiveDisplayType(){const{displayType:e}=this;return e&&"auto"!==e?e:this.viewModel.supportsResizeAttachments?"preview":"list"}get graphic(){return this.viewModel.graphic}set graphic(e){this.viewModel.graphic=e}get label(){return this.messages?.widgetLabel??""}set label(e){this._overrideIfSome("label",e)}castVisibleElements(e){return{...v,...e}}addAttachment(){const{_addAttachmentForm:e,viewModel:s}=this;return this._set("submitting",!0),this._set("error",null),s.addAttachment(e).then((e=>(this._set("submitting",!1),this._set("error",null),s.mode="view",e))).catch((e=>{throw this._set("submitting",!1),this._set("error",new t("attachments:add-attachment",this.messages.addErrorMessage,e)),e}))}deleteAttachment(e){const{viewModel:s}=this;return this._set("submitting",!0),this._set("error",null),s.deleteAttachment(e).then((e=>(this._set("submitting",!1),this._set("error",null),s.mode="view",e))).catch((e=>{throw this._set("submitting",!1),this._set("error",new t("attachments:delete-attachment",this.messages.deleteErrorMessage,e)),e}))}updateAttachment(){const{viewModel:e}=this,{_updateAttachmentForm:s}=this;return this._set("submitting",!0),this._set("error",null),e.updateAttachment(s).then((t=>(this._set("submitting",!1),this._set("error",null),e.mode="view",t))).catch((e=>{throw this._set("submitting",!1),this._set("error",new t("attachments:update-attachment",this.messages.updateErrorMessage,e)),e}))}addFile(){const e=this.viewModel.addFile(this.selectedFile,this._addAttachmentForm);return this.viewModel.mode="view",e}updateFile(){const{viewModel:e}=this,t=e.updateFile(this.selectedFile,this._updateAttachmentForm,e.activeFileInfo);return e.mode="view",t}deleteFile(e){const t=this.viewModel.deleteFile(e||this.viewModel.activeFileInfo?.file);return this.viewModel.mode="view",t}render(){const{submitting:e,viewModel:t}=this,{state:s}=t;return _("div",{class:this.classes(A.base,A.esriWidget)},e?this.renderProgressBar():null,"loading"===s?this.renderLoading():this.renderAttachments(),this.renderErrorMessage())}renderErrorMessage(){const{error:e,visibleElements:t}=this;return e&&t.errorMessage?_("div",{key:"error-message",class:A.errorMessage},e.message):null}renderAttachments(){const{activeFileInfo:e,mode:t,activeAttachmentInfo:s}=this.viewModel;return"add"===t?this.renderAddForm():"edit"===t?this.renderDetailsForm(s||e):this.renderAttachmentContainer()}renderLoading(){return _("div",{class:A.loaderContainer,key:"loader"},_("div",{class:A.loader}))}renderProgressBar(){return this.visibleElements.progressBar?_("div",{class:A.progressBar,key:"progress-bar"}):null}renderAddForm(){const{submitting:e,selectedFile:t}=this,s=e||!t,i=this.visibleElements.cancelAddButton?_("button",{type:"button",bind:this,disabled:e,onclick:this._cancelForm,class:this.classes(A.esriButton,A.esriButtonTertiary,A.esriButtonSmall,A.esriButtonHalf,e&&A.buttonDisabled)},this.messages.cancel):null,a=this.visibleElements.addSubmitButton?_("button",{type:"submit",disabled:s,class:this.classes(A.esriButton,A.esriButtonSecondary,A.esriButtonSmall,A.esriButtonHalf,{[A.buttonDisabled]:s})},this.messages.add):null,n=t?_("span",{key:"file-name",class:A.fileName},t.name):null,r=_("form",{bind:this,afterCreate:p,afterRemoved:g,"data-node-ref":"_addAttachmentForm",onsubmit:this._submitAddAttachment},_("fieldset",{class:A.fileFieldset},n,_("label",{class:this.classes(A.fileLabel,A.esriButton,A.esriButtonSecondary)},t?this.messages.changeFile:this.messages.selectFile,_("input",{class:A.fileInput,type:"file",name:"attachment",bind:this,onchange:this._handleFileInputChange}))),a,i);return _("div",{key:"add-form-container",class:A.formNode},r)}renderDetailsForm(e){const{visibleElements:t,viewModel:i,selectedFile:a,submitting:n}=this,{abilities:l}=i,o=n||!a;let d,c,m,h;a?(d=a.type,c=a.name,m=a.size):e&&"file"in e?(d=e.file.type,c=e.file.name,m=e.file.size):e&&"contentType"in e&&(d=e.contentType,c=e.name,m=e.size,h=e.url);const u=l.editing&&l.operations?.delete&&t.deleteButton?_("button",{key:"delete-button",type:"button",disabled:n,bind:this,onclick:t=>this._submitDeleteAttachment(t,e),class:this.classes(A.esriButton,A.esriButtonSmall,A.esriButtonTertiary,A.deleteButton,{[A.buttonDisabled]:n})},this.messages.delete):void 0,b=l.editing&&l.operations?.update&&t.updateButton?_("button",{disabled:o,key:"update-button",type:"submit",class:this.classes(A.esriButton,A.esriButtonSmall,A.esriButtonThird,{[A.buttonDisabled]:o})},this.messages.update):void 0,f=this.visibleElements.cancelUpdateButton?_("button",{disabled:n,key:"cancel-button",type:"button",bind:this,onclick:this._cancelForm,class:this.classes(A.esriButton,A.esriButtonSmall,A.esriButtonTertiary,A.esriButtonThird,{[A.buttonDisabled]:n})},this.messages.cancel):void 0,v=l.editing&&l.operations?.update?_("fieldset",{key:"file",class:A.fileFieldset},_("span",{key:"file-name",class:A.fileName},c),_("label",{class:this.classes(A.fileLabel,A.esriButton,A.esriButtonSecondary)},this.messages.changeFile,_("input",{class:A.fileInput,type:"file",name:"attachment",bind:this,onchange:this._handleFileInputChange}))):void 0,y=_("fieldset",{key:"size",class:A.metadataFieldset},_("label",null,r(this.messagesUnits,m??0))),w=_("fieldset",{key:"content-type",class:A.metadataFieldset},_("label",null,d)),F=s(h)?_("a",{class:A.itemLink,href:h,rel:"noreferrer",target:"_blank"},this.renderImageMask(e,400),_("div",{class:A.itemLinkOverlay},_("span",{class:A.itemLinkOverlayIcon},_("calcite-icon",{icon:"launch"})))):this.renderImageMask(e,400),k=_("form",{bind:this,afterCreate:p,afterRemoved:g,"data-node-ref":"_updateAttachmentForm",onsubmit:t=>this._submitUpdateAttachment(t,e)},_("div",{class:A.metadata},y,w),v,_("div",{class:A.actions},u,f,b));return _("div",{key:"edit-form-container",class:A.formNode},F,k)}renderImageMask(e,t){return e?"file"in e?this.renderGenericImageMask(e.file.name,e.file.type):this.renderImageMaskForAttachment(e,t):null}renderGenericImageMask(e,t){const{supportsResizeAttachments:s}=this.viewModel,i=h(t),a={[A.itemImageResizable]:s};return _("div",{class:this.classes(A.itemMaskIcon,A.itemMask)},_("img",{title:e,alt:e,src:i,class:this.classes(a,A.itemImage)}))}renderImageMaskForAttachment(e,t){const{supportsResizeAttachments:s}=this.viewModel;if(!e)return null;const{contentType:i,name:a,url:n}=e;if(!s||!u(i))return this.renderGenericImageMask(a,i);const r=this._getCSSTransform(e),l=r?{transform:r,"image-orientation":"none"}:{},o=`${n}${n?.includes("?")?"&":"?"}w=${t}`,d={[A.itemImageResizable]:s};return _("div",{class:this.classes(A.itemMask)},_("img",{styles:l,alt:a,title:a,src:o,class:this.classes(d,A.itemImage)}))}renderFile(e){const{file:t}=e;return _("li",{class:A.item,key:t},_("button",{key:"details-button",bind:this,class:A.itemButton,title:this.messages.attachmentDetails,"aria-label":this.messages.attachmentDetails,onclick:()=>this._startEditFile(e),type:"button"},this.renderImageMask(e),_("label",{class:A.itemLabel},_("span",{class:A.itemFilename},t.name||this.messages.noTitle),_("span",{"aria-hidden":"true",class:this.classes(A.itemChevronIcon,b(this.container)?A.iconLeft:A.iconRight)}))))}renderAttachmentInfo({attachmentInfo:e,displayType:t}){const{viewModel:s,effectiveDisplayType:i}=this,{abilities:a,supportsResizeAttachments:n}=s,{contentType:r,name:l,url:o}=e,d=this.renderImageMask(e,"list"===t?48:400),c=a.editing?_("span",{"aria-hidden":"true",class:this.classes(A.itemChevronIcon,b(this.container)?A.iconLeft:A.iconRight)}):null,m=[d,"preview"===i&&n&&u(r)?null:_("label",{class:A.itemLabel},_("span",{class:A.itemFilename},l||this.messages.noTitle),c)],h=a.editing?_("button",{key:"details-button",bind:this,class:A.itemButton,title:this.messages.attachmentDetails,"aria-label":this.messages.attachmentDetails,"data-attachment-info-id":e.id,onclick:()=>this._startEditAttachment(e),type:"button"},m):_("a",{key:"details-link",class:A.itemButton,href:o??void 0,target:"_blank"},m);return _("li",{class:A.item,key:e},h)}renderAttachmentContainer(){const{effectiveDisplayType:e,viewModel:t,visibleElements:s}=this,{attachmentInfos:i,abilities:a,fileInfos:n}=t,r=!!i?.length,l=!!n?.length,o={[A.containerList]:"preview"!==e,[A.containerPreview]:"preview"===e},d=a.editing&&a.operations?.add&&s.addButton?_("button",{bind:this,onclick:()=>this._startAddAttachment(),class:this.classes(A.esriButton,A.esriButtonTertiary,A.addAttachmentButton),type:"button"},_("span",{"aria-hidden":"true",class:this.classes(A.itemAddIcon,A.iconPlus)}),this.messages.add):void 0,c=r?_("ul",{key:"attachments-list",class:A.items},i.toArray().map((t=>this.renderAttachmentInfo({attachmentInfo:t,displayType:e})))):void 0,m=l?_("ul",{key:"file-list",class:A.items},n.toArray().map((e=>this.renderFile(e)))):void 0,h=l||r?void 0:_("div",{class:A.empty},this.messages.noAttachments);return _("div",{key:"attachments-container",class:this.classes(A.container,o)},c,m,h,d)}_modeChanged(){this._set("error",null),this._set("selectedFile",null)}_handleFileInputChange(e){const t=e.target,s=t&&t.files&&t.files.item(0);this._set("selectedFile",s)}_submitDeleteAttachment(e,t){e.preventDefault(),t&&("file"in t?this.deleteFile(t.file):t&&this.deleteAttachment(t))}_submitAddAttachment(e){e.preventDefault(),this.viewModel.filesEnabled?this.addFile():this.addAttachment()}_submitUpdateAttachment(e,t){e.preventDefault(),t&&"file"in t?this.updateFile():this.updateAttachment()}_startEditAttachment(e){const{viewModel:t}=this;t.activeFileInfo=null,t.activeAttachmentInfo=e,t.mode="edit"}_startEditFile(e){const{viewModel:t}=this;t.activeAttachmentInfo=null,t.activeFileInfo=e,t.mode="edit"}_startAddAttachment(){this.viewModel.mode="add"}_cancelForm(e){e.preventDefault(),this.viewModel.mode="view"}_getCSSTransform(e){const{orientationInfo:t}=e;return!this._supportsImageOrientation&&t?[t.rotation?`rotate(${t.rotation}deg)`:"",t.mirrored?"scaleX(-1)":""].join(" "):""}};e([l()],k.prototype,"abilities",null),e([l()],k.prototype,"displayType",void 0),e([l({readOnly:!0})],k.prototype,"effectiveDisplayType",null),e([l()],k.prototype,"graphic",null),e([l()],k.prototype,"label",null),e([l(),f("esri/widgets/Attachments/t9n/Attachments")],k.prototype,"messages",void 0),e([l(),f("esri/core/t9n/Units")],k.prototype,"messagesUnits",void 0),e([l({readOnly:!0})],k.prototype,"selectedFile",void 0),e([l({readOnly:!0})],k.prototype,"submitting",void 0),e([l({readOnly:!0})],k.prototype,"error",void 0),e([l({type:m})],k.prototype,"viewModel",void 0),e([l()],k.prototype,"visibleElements",void 0),e([o("visibleElements")],k.prototype,"castVisibleElements",null),k=e([d("esri.widgets.Attachments")],k);const B=k;export{B as default};