You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
2 lines
18 KiB
2 lines
18 KiB
import{j as y}from"./markdown-vendor-DnN-_XEd.js";import{r as f,a as w,u as K}from"./data-vendor-DOiUz3Tw.js";import{bL as B}from"./index-CcS3ZJ2N.js";import{M as k}from"./arco-vendor-Cm-ntj-q.js";var L=Object.defineProperty,j=(s,t,e)=>t in s?L(s,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):s[t]=e,u=(s,t,e)=>j(s,typeof t!="symbol"?t+"":t,e);const O={x:0,y:0,width:0,height:0,unit:"px"},S=(s,t,e)=>Math.min(Math.max(s,t),e),U=(...s)=>s.filter(t=>t&&typeof t=="string").join(" "),$=(s,t)=>s===t||s.width===t.width&&s.height===t.height&&s.x===t.x&&s.y===t.y&&s.unit===t.unit;function F(s,t,e,a){const r=b(s,e,a);return s.width&&(r.height=r.width/t),s.height&&(r.width=r.height*t),r.y+r.height>a&&(r.height=a-r.y,r.width=r.height*t),r.x+r.width>e&&(r.width=e-r.x,r.height=r.width/t),s.unit==="%"?_(r,e,a):r}function z(s,t,e){const a=b(s,t,e);return a.x=(t-a.width)/2,a.y=(e-a.height)/2,s.unit==="%"?_(a,t,e):a}function _(s,t,e){return s.unit==="%"?{...O,...s,unit:"%"}:{unit:"%",x:s.x?s.x/t*100:0,y:s.y?s.y/e*100:0,width:s.width?s.width/t*100:0,height:s.height?s.height/e*100:0}}function b(s,t,e){return s.unit?s.unit==="px"?{...O,...s,unit:"px"}:{unit:"px",x:s.x?s.x*t/100:0,y:s.y?s.y*e/100:0,width:s.width?s.width*t/100:0,height:s.height?s.height*e/100:0}:{...O,...s,unit:"px"}}function I(s,t,e,a,r,i=0,h=0,c=a,n=r){const o={...s};let l=Math.min(i,a),p=Math.min(h,r),g=Math.min(c,a),d=Math.min(n,r);t&&(t>1?(l=h?h*t:l,p=l/t,g=c*t):(p=i?i/t:p,l=p*t,d=n/t)),o.y<0&&(o.height=Math.max(o.height+o.y,p),o.y=0),o.x<0&&(o.width=Math.max(o.width+o.x,l),o.x=0);const C=a-(o.x+o.width);C<0&&(o.x=Math.min(o.x,a-l),o.width+=C);const v=r-(o.y+o.height);if(v<0&&(o.y=Math.min(o.y,r-p),o.height+=v),o.width<l&&((e==="sw"||e=="nw")&&(o.x-=l-o.width),o.width=l),o.height<p&&((e==="nw"||e=="ne")&&(o.y-=p-o.height),o.height=p),o.width>g&&((e==="sw"||e=="nw")&&(o.x-=g-o.width),o.width=g),o.height>d&&((e==="nw"||e=="ne")&&(o.y-=d-o.height),o.height=d),t){const m=o.width/o.height;if(m<t){const x=Math.max(o.width/t,p);(e==="nw"||e=="ne")&&(o.y-=x-o.height),o.height=x}else if(m>t){const x=Math.max(o.height*t,l);(e==="sw"||e=="nw")&&(o.x-=x-o.width),o.width=x}}return o}function W(s,t,e,a){const r={...s};return t==="ArrowLeft"?a==="nw"?(r.x-=e,r.y-=e,r.width+=e,r.height+=e):a==="w"?(r.x-=e,r.width+=e):a==="sw"?(r.x-=e,r.width+=e,r.height+=e):a==="ne"?(r.y+=e,r.width-=e,r.height-=e):a==="e"?r.width-=e:a==="se"&&(r.width-=e,r.height-=e):t==="ArrowRight"&&(a==="nw"?(r.x+=e,r.y+=e,r.width-=e,r.height-=e):a==="w"?(r.x+=e,r.width-=e):a==="sw"?(r.x+=e,r.width-=e,r.height-=e):a==="ne"?(r.y-=e,r.width+=e,r.height+=e):a==="e"?r.width+=e:a==="se"&&(r.width+=e,r.height+=e)),t==="ArrowUp"?a==="nw"?(r.x-=e,r.y-=e,r.width+=e,r.height+=e):a==="n"?(r.y-=e,r.height+=e):a==="ne"?(r.y-=e,r.width+=e,r.height+=e):a==="sw"?(r.x+=e,r.width-=e,r.height-=e):a==="s"?r.height-=e:a==="se"&&(r.width-=e,r.height-=e):t==="ArrowDown"&&(a==="nw"?(r.x+=e,r.y+=e,r.width-=e,r.height-=e):a==="n"?(r.y+=e,r.height-=e):a==="ne"?(r.y+=e,r.width-=e,r.height-=e):a==="sw"?(r.x-=e,r.width+=e,r.height+=e):a==="s"?r.height+=e:a==="se"&&(r.width+=e,r.height+=e)),r}const H={capture:!0,passive:!1};let T=0;const R=class D extends f.PureComponent{constructor(){super(...arguments),u(this,"docMoveBound",!1),u(this,"mouseDownOnCrop",!1),u(this,"dragStarted",!1),u(this,"evData",{startClientX:0,startClientY:0,startCropX:0,startCropY:0,clientX:0,clientY:0,isResize:!0}),u(this,"componentRef",f.createRef()),u(this,"mediaRef",f.createRef()),u(this,"resizeObserver"),u(this,"initChangeCalled",!1),u(this,"instanceId",`rc-${T++}`),u(this,"state",{cropIsActive:!1,newCropIsBeingDrawn:!1}),u(this,"onCropPointerDown",t=>{const{crop:e,disabled:a}=this.props,r=this.getBox();if(!e)return;const i=b(e,r.width,r.height);if(a)return;t.cancelable&&t.preventDefault(),this.bindDocMove(),this.componentRef.current.focus({preventScroll:!0});const h=t.target.dataset.ord,c=!!h;let n=t.clientX,o=t.clientY,l=i.x,p=i.y;if(h){const g=t.clientX-r.x,d=t.clientY-r.y;let C=0,v=0;h==="ne"||h=="e"?(C=g-(i.x+i.width),v=d-i.y,l=i.x,p=i.y+i.height):h==="se"||h==="s"?(C=g-(i.x+i.width),v=d-(i.y+i.height),l=i.x,p=i.y):h==="sw"||h=="w"?(C=g-i.x,v=d-(i.y+i.height),l=i.x+i.width,p=i.y):(h==="nw"||h=="n")&&(C=g-i.x,v=d-i.y,l=i.x+i.width,p=i.y+i.height),n=l+r.x+C,o=p+r.y+v}this.evData={startClientX:n,startClientY:o,startCropX:l,startCropY:p,clientX:t.clientX,clientY:t.clientY,isResize:c,ord:h},this.mouseDownOnCrop=!0,this.setState({cropIsActive:!0})}),u(this,"onComponentPointerDown",t=>{const{crop:e,disabled:a,locked:r,keepSelection:i,onChange:h}=this.props,c=this.getBox();if(a||r||i&&e)return;t.cancelable&&t.preventDefault(),this.bindDocMove(),this.componentRef.current.focus({preventScroll:!0});const n=t.clientX-c.x,o=t.clientY-c.y,l={unit:"px",x:n,y:o,width:0,height:0};this.evData={startClientX:t.clientX,startClientY:t.clientY,startCropX:n,startCropY:o,clientX:t.clientX,clientY:t.clientY,isResize:!0},this.mouseDownOnCrop=!0,h(b(l,c.width,c.height),_(l,c.width,c.height)),this.setState({cropIsActive:!0,newCropIsBeingDrawn:!0})}),u(this,"onDocPointerMove",t=>{const{crop:e,disabled:a,onChange:r,onDragStart:i}=this.props,h=this.getBox();if(a||!e||!this.mouseDownOnCrop)return;t.cancelable&&t.preventDefault(),this.dragStarted||(this.dragStarted=!0,i&&i(t));const{evData:c}=this;c.clientX=t.clientX,c.clientY=t.clientY;let n;c.isResize?n=this.resizeCrop():n=this.dragCrop(),$(e,n)||r(b(n,h.width,h.height),_(n,h.width,h.height))}),u(this,"onComponentKeyDown",t=>{const{crop:e,disabled:a,onChange:r,onComplete:i}=this.props;if(a)return;const h=t.key;let c=!1;if(!e)return;const n=this.getBox(),o=this.makePixelCrop(n),l=(navigator.platform.match("Mac")?t.metaKey:t.ctrlKey)?D.nudgeStepLarge:t.shiftKey?D.nudgeStepMedium:D.nudgeStep;if(h==="ArrowLeft"?(o.x-=l,c=!0):h==="ArrowRight"?(o.x+=l,c=!0):h==="ArrowUp"?(o.y-=l,c=!0):h==="ArrowDown"&&(o.y+=l,c=!0),c){t.cancelable&&t.preventDefault(),o.x=S(o.x,0,n.width-o.width),o.y=S(o.y,0,n.height-o.height);const p=b(o,n.width,n.height),g=_(o,n.width,n.height);r(p,g),i&&i(p,g)}}),u(this,"onHandlerKeyDown",(t,e)=>{const{aspect:a=0,crop:r,disabled:i,minWidth:h=0,minHeight:c=0,maxWidth:n,maxHeight:o,onChange:l,onComplete:p}=this.props,g=this.getBox();if(i||!r)return;if(t.key==="ArrowUp"||t.key==="ArrowDown"||t.key==="ArrowLeft"||t.key==="ArrowRight")t.stopPropagation(),t.preventDefault();else return;const d=(navigator.platform.match("Mac")?t.metaKey:t.ctrlKey)?D.nudgeStepLarge:t.shiftKey?D.nudgeStepMedium:D.nudgeStep,C=b(r,g.width,g.height),v=W(C,t.key,d,e),m=I(v,a,e,g.width,g.height,h,c,n,o);if(!$(r,m)){const x=_(m,g.width,g.height);l(m,x),p&&p(m,x)}}),u(this,"onDocPointerDone",t=>{const{crop:e,disabled:a,onComplete:r,onDragEnd:i}=this.props,h=this.getBox();this.unbindDocMove(),!(a||!e)&&this.mouseDownOnCrop&&(this.mouseDownOnCrop=!1,this.dragStarted=!1,i&&i(t),r&&r(b(e,h.width,h.height),_(e,h.width,h.height)),this.setState({cropIsActive:!1,newCropIsBeingDrawn:!1}))}),u(this,"onDragFocus",()=>{var t;(t=this.componentRef.current)==null||t.scrollTo(0,0)})}get document(){return document}getBox(){const t=this.mediaRef.current;if(!t)return{x:0,y:0,width:0,height:0};const{x:e,y:a,width:r,height:i}=t.getBoundingClientRect();return{x:e,y:a,width:r,height:i}}componentDidUpdate(t){const{crop:e,onComplete:a}=this.props;if(a&&!t.crop&&e){const{width:r,height:i}=this.getBox();r&&i&&a(b(e,r,i),_(e,r,i))}}componentWillUnmount(){this.resizeObserver&&this.resizeObserver.disconnect(),this.unbindDocMove()}bindDocMove(){this.docMoveBound||(this.document.addEventListener("pointermove",this.onDocPointerMove,H),this.document.addEventListener("pointerup",this.onDocPointerDone,H),this.document.addEventListener("pointercancel",this.onDocPointerDone,H),this.docMoveBound=!0)}unbindDocMove(){this.docMoveBound&&(this.document.removeEventListener("pointermove",this.onDocPointerMove,H),this.document.removeEventListener("pointerup",this.onDocPointerDone,H),this.document.removeEventListener("pointercancel",this.onDocPointerDone,H),this.docMoveBound=!1)}getCropStyle(){const{crop:t}=this.props;if(t)return{top:`${t.y}${t.unit}`,left:`${t.x}${t.unit}`,width:`${t.width}${t.unit}`,height:`${t.height}${t.unit}`}}dragCrop(){const{evData:t}=this,e=this.getBox(),a=this.makePixelCrop(e),r=t.clientX-t.startClientX,i=t.clientY-t.startClientY;return a.x=S(t.startCropX+r,0,e.width-a.width),a.y=S(t.startCropY+i,0,e.height-a.height),a}getPointRegion(t,e,a,r){const{evData:i}=this,h=i.clientX-t.x,c=i.clientY-t.y;let n;r&&e?n=e==="nw"||e==="n"||e==="ne":n=c<i.startCropY;let o;return a&&e?o=e==="nw"||e==="w"||e==="sw":o=h<i.startCropX,o?n?"nw":"sw":n?"ne":"se"}resolveMinDimensions(t,e,a=0,r=0){const i=Math.min(a,t.width),h=Math.min(r,t.height);return!e||!i&&!h?[i,h]:e>1?i?[i,i/e]:[h*e,h]:h?[h*e,h]:[i,i/e]}resizeCrop(){const{evData:t}=this,{aspect:e=0,maxWidth:a,maxHeight:r}=this.props,i=this.getBox(),[h,c]=this.resolveMinDimensions(i,e,this.props.minWidth,this.props.minHeight);let n=this.makePixelCrop(i);const o=this.getPointRegion(i,t.ord,h,c),l=t.ord||o;let p=t.clientX-t.startClientX,g=t.clientY-t.startClientY;(h&&l==="nw"||l==="w"||l==="sw")&&(p=Math.min(p,-h)),(c&&l==="nw"||l==="n"||l==="ne")&&(g=Math.min(g,-c));const d={unit:"px",x:0,y:0,width:0,height:0};o==="ne"?(d.x=t.startCropX,d.width=p,e?(d.height=d.width/e,d.y=t.startCropY-d.height):(d.height=Math.abs(g),d.y=t.startCropY-d.height)):o==="se"?(d.x=t.startCropX,d.y=t.startCropY,d.width=p,e?d.height=d.width/e:d.height=g):o==="sw"?(d.x=t.startCropX+p,d.y=t.startCropY,d.width=Math.abs(p),e?d.height=d.width/e:d.height=g):o==="nw"&&(d.x=t.startCropX+p,d.width=Math.abs(p),e?(d.height=d.width/e,d.y=t.startCropY-d.height):(d.height=Math.abs(g),d.y=t.startCropY+g));const C=I(d,e,o,i.width,i.height,h,c,a,r);return e||D.xyOrds.indexOf(l)>-1?n=C:D.xOrds.indexOf(l)>-1?(n.x=C.x,n.width=C.width):D.yOrds.indexOf(l)>-1&&(n.y=C.y,n.height=C.height),n.x=S(n.x,0,i.width-n.width),n.y=S(n.y,0,i.height-n.height),n}renderCropSelection(){const{ariaLabels:t=D.defaultProps.ariaLabels,disabled:e,locked:a,renderSelectionAddon:r,ruleOfThirds:i,crop:h}=this.props,c=this.getCropStyle();if(h)return w.createElement("div",{style:c,className:"ReactCrop__crop-selection",onPointerDown:this.onCropPointerDown,"aria-label":t.cropArea,tabIndex:0,onKeyDown:this.onComponentKeyDown,role:"group"},!e&&!a&&w.createElement("div",{className:"ReactCrop__drag-elements",onFocus:this.onDragFocus},w.createElement("div",{className:"ReactCrop__drag-bar ord-n","data-ord":"n"}),w.createElement("div",{className:"ReactCrop__drag-bar ord-e","data-ord":"e"}),w.createElement("div",{className:"ReactCrop__drag-bar ord-s","data-ord":"s"}),w.createElement("div",{className:"ReactCrop__drag-bar ord-w","data-ord":"w"}),w.createElement("div",{className:"ReactCrop__drag-handle ord-nw","data-ord":"nw",tabIndex:0,"aria-label":t.nwDragHandle,onKeyDown:n=>this.onHandlerKeyDown(n,"nw"),role:"button"}),w.createElement("div",{className:"ReactCrop__drag-handle ord-n","data-ord":"n",tabIndex:0,"aria-label":t.nDragHandle,onKeyDown:n=>this.onHandlerKeyDown(n,"n"),role:"button"}),w.createElement("div",{className:"ReactCrop__drag-handle ord-ne","data-ord":"ne",tabIndex:0,"aria-label":t.neDragHandle,onKeyDown:n=>this.onHandlerKeyDown(n,"ne"),role:"button"}),w.createElement("div",{className:"ReactCrop__drag-handle ord-e","data-ord":"e",tabIndex:0,"aria-label":t.eDragHandle,onKeyDown:n=>this.onHandlerKeyDown(n,"e"),role:"button"}),w.createElement("div",{className:"ReactCrop__drag-handle ord-se","data-ord":"se",tabIndex:0,"aria-label":t.seDragHandle,onKeyDown:n=>this.onHandlerKeyDown(n,"se"),role:"button"}),w.createElement("div",{className:"ReactCrop__drag-handle ord-s","data-ord":"s",tabIndex:0,"aria-label":t.sDragHandle,onKeyDown:n=>this.onHandlerKeyDown(n,"s"),role:"button"}),w.createElement("div",{className:"ReactCrop__drag-handle ord-sw","data-ord":"sw",tabIndex:0,"aria-label":t.swDragHandle,onKeyDown:n=>this.onHandlerKeyDown(n,"sw"),role:"button"}),w.createElement("div",{className:"ReactCrop__drag-handle ord-w","data-ord":"w",tabIndex:0,"aria-label":t.wDragHandle,onKeyDown:n=>this.onHandlerKeyDown(n,"w"),role:"button"})),r&&w.createElement("div",{className:"ReactCrop__selection-addon",onPointerDown:n=>n.stopPropagation()},r(this.state)),i&&w.createElement(w.Fragment,null,w.createElement("div",{className:"ReactCrop__rule-of-thirds-hz"}),w.createElement("div",{className:"ReactCrop__rule-of-thirds-vt"})))}makePixelCrop(t){const e={...O,...this.props.crop||{}};return b(e,t.width,t.height)}render(){const{aspect:t,children:e,circularCrop:a,className:r,crop:i,disabled:h,locked:c,style:n,ruleOfThirds:o}=this.props,{cropIsActive:l,newCropIsBeingDrawn:p}=this.state,g=i?this.renderCropSelection():null,d=U("ReactCrop",r,l&&"ReactCrop--active",h&&"ReactCrop--disabled",c&&"ReactCrop--locked",p&&"ReactCrop--new-crop",i&&t&&"ReactCrop--fixed-aspect",i&&a&&"ReactCrop--circular-crop",i&&o&&"ReactCrop--rule-of-thirds",!this.dragStarted&&i&&!i.width&&!i.height&&"ReactCrop--invisible-crop",a&&"ReactCrop--no-animate");return w.createElement("div",{ref:this.componentRef,className:d,style:n},w.createElement("div",{ref:this.mediaRef,className:"ReactCrop__child-wrapper",onPointerDown:this.onComponentPointerDown},e),i?w.createElement("svg",{className:"ReactCrop__crop-mask",width:"100%",height:"100%"},w.createElement("defs",null,w.createElement("mask",{id:`hole-${this.instanceId}`},w.createElement("rect",{width:"100%",height:"100%",fill:"white"}),a?w.createElement("ellipse",{cx:`${i.x+i.width/2}${i.unit}`,cy:`${i.y+i.height/2}${i.unit}`,rx:`${i.width/2}${i.unit}`,ry:`${i.height/2}${i.unit}`,fill:"black"}):w.createElement("rect",{x:`${i.x}${i.unit}`,y:`${i.y}${i.unit}`,width:`${i.width}${i.unit}`,height:`${i.height}${i.unit}`,fill:"black"}))),w.createElement("rect",{fill:"black",fillOpacity:.5,width:"100%",height:"100%",mask:`url(#hole-${this.instanceId})`})):void 0,g)}};u(R,"xOrds",["e","w"]),u(R,"yOrds",["n","s"]),u(R,"xyOrds",["nw","ne","se","sw"]),u(R,"nudgeStep",1),u(R,"nudgeStepMedium",10),u(R,"nudgeStepLarge",100),u(R,"defaultProps",{ariaLabels:{cropArea:"Use the arrow keys to move the crop selection area",nwDragHandle:"Use the arrow keys to move the north west drag handle to change the crop selection area",nDragHandle:"Use the up and down arrow keys to move the north drag handle to change the crop selection area",neDragHandle:"Use the arrow keys to move the north east drag handle to change the crop selection area",eDragHandle:"Use the up and down arrow keys to move the east drag handle to change the crop selection area",seDragHandle:"Use the arrow keys to move the south east drag handle to change the crop selection area",sDragHandle:"Use the up and down arrow keys to move the south drag handle to change the crop selection area",swDragHandle:"Use the arrow keys to move the south west drag handle to change the crop selection area",wDragHandle:"Use the up and down arrow keys to move the west drag handle to change the crop selection area"}});let G=R;const V=new URL("/assets/ic_arrow_right_gray-DM6GPP4g.png",import.meta.url).href,q=new URL("/assets/ic_close-C0Ltcj9g.png",import.meta.url).href;function et({image:s,onUploaded:t,onClose:e}){const{t:a}=K(),[r,i]=f.useState(!1),[h,c]=f.useState(),[n,o]=f.useState(null),[l,p]=f.useState(!1),g=f.useRef(null);f.useEffect(()=>{s&&(i(!0),c(void 0),o(null))},[s]);const d=f.useCallback(()=>{l||(i(!1),e?.())},[l,e]),C=f.useCallback(m=>{const x=m.currentTarget;g.current=x;const N=x.naturalWidth||x.width,M=x.naturalHeight||x.height,P=z(F({unit:"%",width:80},1,N,M),N,M);c(P)},[]),v=f.useCallback(async()=>{const m=g.current;if(!m||!n?.width||!n?.height){k.warning(a("avatarCrop.selectAreaFirst"));return}const x=m.naturalWidth/m.width,N=m.naturalHeight/m.height,M=document.createElement("canvas");M.width=Math.max(1,Math.floor(n.width*x)),M.height=Math.max(1,Math.floor(n.height*N));const P=M.getContext("2d");if(!P){k.error(a("avatarCrop.cropFailed"));return}P.drawImage(m,n.x*x,n.y*N,n.width*x,n.height*N,0,0,M.width,M.height);let X=null;try{X=await new Promise(E=>{M.toBlob(Y=>E(Y),"image/png",.95)})}catch(E){if(E instanceof DOMException&&E.name==="SecurityError"){k.error(a("avatarCrop.crossOriginNotSupported"));return}k.error(a("avatarCrop.cropFailed"));return}if(!X){k.error(a("avatarCrop.cropFailed"));return}const A=new File([X],`role-avatar-${Date.now()}.png`,{type:"image/png"});p(!0);try{const E=await B(A,"avatar"),Y=String(E?.url??E?.data?.url??"");if(!Y)throw new Error("upload url missing");t(Y),i(!1),k.success(a("avatarCrop.avatarUpdated"))}catch{k.error(a("avatarCrop.uploadFailed"))}finally{p(!1)}},[n,t,a]);return!r||!s?null:y.jsx("div",{className:"avatarCropModal",children:y.jsxs("div",{className:"avatarCropModal__container",role:"dialog","aria-modal":"true","aria-label":a("avatarCrop.dialogAria"),children:[y.jsxs("div",{className:"avatarCropModal__header",children:[y.jsxs("button",{type:"button",className:"avatarCropModal__backBtn",onClick:d,disabled:l,children:[y.jsx("span",{className:"avatarCropModal__backText",children:a("avatarCrop.back")}),y.jsx("img",{alt:"",className:"avatarCropModal__backIcon",src:V})]}),y.jsx("h3",{className:"avatarCropModal__title",children:a("avatarCrop.title")}),y.jsx("button",{type:"button",className:"avatarCropModal__closeBtn",onClick:d,disabled:l,"aria-label":a("avatarCrop.closeAria"),children:y.jsx("img",{alt:"",src:q})})]}),y.jsx("div",{className:"avatarCropModal__body",children:y.jsx("div",{className:"avatarCropModal__canvas",children:y.jsx(G,{crop:h,onChange:m=>c(m),onComplete:m=>o(m),aspect:1,minWidth:40,minHeight:40,children:y.jsx("img",{alt:"",src:s,crossOrigin:"anonymous",referrerPolicy:"no-referrer",onLoad:C})})})}),y.jsx("div",{className:"avatarCropModal__footer",children:y.jsx("button",{type:"button",className:"avatarCropModal__uploadBtn",onClick:()=>void v(),disabled:l,children:a(l?"avatarCrop.uploading":"avatarCrop.uploadAvatar")})})]})})}export{et as A};
|
|
//# sourceMappingURL=index-BZANaSgq.js.map
|
|
|