1"use strict";(self.webpackChunk=self.webpackChunk||[]).push([["containers_modal_avatarModal_js"],{1163:(e,r,t)=>{t.d(r,{A:()=>h});var o=t(2540),a=(t(3696),t(9933)),i=Object.defineProperty,n=Object.defineProperties,c=Object.getOwnPropertyDescriptors,s=Object.getOwnPropertySymbols,d=Object.prototype.hasOwnProperty,p=Object.prototype.propertyIsEnumerable,l=(e,r,t)=>r in e?i(e,r,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[r]=t;const h=function(e){return(0,o.jsx)(a.xj,(r=((e,r)=>{for(var t in r||(r={}))d.call(r,t)&&l(e,t,r[t]);if(s)for(var t of s(r))p.call(r,t)&&l(e,t,r[t]);return e})({viewBox:"0 0 50 50"},e),n(r,c({children:(0,o.jsx)("circle",{className:"path",cx:"25",cy:"25",r:"20",fill:"none",strokeWidth:"10"})}))));var r}},1359:(e,r,t)=>{t.r(r),t.d(r,{default:()=>y});var o=t(2540),a=t(3696),i=t(2578),n=t(8710),c=t(1307);const s=t(9503).Ay.div` 2 text-align: center; 3 4 .cropperInstructions { 5 color: #8e8d8d; 6 font-size: 12px; 7 text-align: center; 8 9 @media (min-width: 768px) { 10 font-size: 14px; 11 } 12 } 13 14 .cropperHolder { 15 width: 280px; 16 margin: 0 auto; 17 } 18 19 .dropzone { 20 flex: 1; 21 display: flex; 22 flex-direction: column; 23 align-items: center; 24 padding: 20px; 25 border-width: 2; 26 border-radius: 2; 27 border-color: #eeeeee; 28 border-style: dashed; 29 background-color: #fafafa; 30 color: #8e8d8d; 31 outline: none; 32 transition: border 0.24s ease-in-out; 33 34 &.hover { 35 border-color: #2196f3; 36 } 37 38 &.accept { 39 border-color: #00e676; 40 } 41 42 &.reject { 43 border-color: #ff1744; 44 } 45 46 & .dropError { 47 color: #ff1744; 48 } 49 50 & p span { 51 color: #333333; 52 text-decoration: underline; 53 } 54 } 55 56 .ReactCrop { 57 position: relative; 58 display: inline-block; 59 cursor: crosshair; 60 max-width: 100%; 61 } 62 .ReactCrop *, 63 .ReactCrop *:before, 64 .ReactCrop *:after { 65 box-sizing: border-box; 66 } 67 .ReactCrop--disabled, 68 .ReactCrop--locked { 69 cursor: inherit; 70 } 71 .ReactCrop__child-wrapper { 72 overflow: hidden; 73 max-height: inherit; 74 } 75 .ReactCrop__child-wrapper > img, 76 .ReactCrop__child-wrapper > video { 77 display: block; 78 max-width: 100%; 79 max-height: inherit; 80 } 81 .ReactCrop:not(.ReactCrop--disabled) .ReactCrop__child-wrapper > img, 82 .ReactCrop:not(.ReactCrop--disabled) .ReactCrop__child-wrapper > video { 83 touch-action: none; 84 } 85 .ReactCrop:not(.ReactCrop--disabled) .ReactCrop__crop-selection { 86 touch-action: none; 87 } 88 .ReactCrop__crop-mask { 89 position: absolute; 90 top: 0; 91 right: 0; 92 bottom: 0; 93 left: 0; 94 pointer-events: none; 95 } 96 .ReactCrop__crop-selection { 97 position: absolute; 98 top: 0; 99 left: 0; 100 transform: translateZ(0); 101 cursor: move; 102 } 103 .ReactCrop--disabled .ReactCrop__crop-selection { 104 cursor: inherit; 105 } 106 .ReactCrop--circular-crop .ReactCrop__crop-selection { 107 border-radius: 50%; 108 } 109 .ReactCrop--circular-crop .ReactCrop__crop-selection:after { 110 pointer-events: none; 111 content: ''; 112 position: absolute; 113 top: -1px; 114 right: -1px; 115 bottom: -1px; 116 left: -1px; 117 border: 1px solid var(--rc-border-color); 118 opacity: 0.3; 119 } 120 .ReactCrop--no-animate .ReactCrop__crop-selection { 121 outline: 1px dashed white; 122 } 123 .ReactCrop__crop-selection:not(.ReactCrop--no-animate .ReactCrop__crop-selection) { 124 animation: marching-ants 1s; 125 background-image: linear-gradient(to right, #fff 50%, #444 50%), 126 linear-gradient(to right, #fff 50%, #444 50%), linear-gradient(to bottom, #fff 50%, #444 50%), 127 linear-gradient(to bottom, #fff 50%, #444 50%); 128 background-size: 129 10px 1px, 130 10px 1px, 131 1px 10px, 132 1px 10px; 133 background-position: 134 0 0, 135 0 100%, 136 0 0, 137 100% 0; 138 background-repeat: repeat-x, repeat-x, repeat-y, repeat-y; 139 color: #fff; 140 animation-play-state: running; 141 animation-timing-function: linear; 142 animation-iteration-count: infinite; 143 } 144 @keyframes marching-ants { 145 0% { 146 background-position: 147 0 0, 148 0 100%, 149 0 0, 150 100% 0; 151 } 152 to { 153 background-position: 154 20px 0, 155 -20px 100%, 156 0 -20px, 157 100% 20px; 158 } 159 } 160 .ReactCrop__crop-selection:focus { 161 outline: 2px solid var(--rc-focus-color); 162 outline-offset: -1px; 163 } 164 .ReactCrop--invisible-crop .ReactCrop__crop-mask, 165 .ReactCrop--invisible-crop .ReactCrop__crop-selection { 166 display: none; 167 } 168 .ReactCrop__rule-of-thirds-vt:before, 169 .ReactCrop__rule-of-thirds-vt:after, 170 .ReactCrop__rule-of-thirds-hz:before, 171 .ReactCrop__rule-of-thirds-hz:after { 172 content: ''; 173 display: block; 174 position: absolute; 175 background-color: #fff6; 176 } 177 .ReactCrop__rule-of-thirds-vt:before, 178 .ReactCrop__rule-of-thirds-vt:after { 179 width: 1px; 180 height: 100%; 181 } 182 .ReactCrop__rule-of-thirds-vt:before { 183 left: 33.3333333333%; 184 } 185 .ReactCrop__rule-of-thirds-vt:after { 186 left: 66.6666666667%; 187 } 188 .ReactCrop__rule-of-thirds-hz:before, 189 .ReactCrop__rule-of-thirds-hz:after { 190 width: 100%; 191 height: 1px; 192 } 193 .ReactCrop__rule-of-thirds-hz:before { 194 top: 33.3333333333%; 195 } 196 .ReactCrop__rule-of-thirds-hz:after { 197 top: 66.6666666667%; 198 } 199 .ReactCrop__drag-handle { 200 position: absolute; 201 width: var(--rc-drag-handle-size); 202 height: var(--rc-drag-handle-size); 203 background-color: var(--rc-drag-handle-bg-colour); 204 border: 1px solid var(--rc-border-color); 205 } 206 .ReactCrop__drag-handle:focus { 207 background: var(--rc-focus-color); 208 } 209 .ReactCrop .ord-nw { 210 top: 0; 211 left: 0; 212 transform: translate(-50%, -50%); 213 cursor: nw-resize; 214 } 215 .ReactCrop .ord-n { 216 top: 0; 217 left: 50%; 218 transform: translate(-50%, -50%); 219 cursor: n-resize; 220 } 221 .ReactCrop .ord-ne { 222 top: 0; 223 right: 0; 224 transform: translate(50%, -50%); 225 cursor: ne-resize; 226 } 227 .ReactCrop .ord-e { 228 top: 50%; 229 right: 0; 230 transform: translate(50%, -50%); 231 cursor: e-resize; 232 } 233 .ReactCrop .ord-se { 234 bottom: 0; 235 right: 0; 236 transform: translate(50%, 50%); 237 cursor: se-resize; 238 } 239 .ReactCrop .ord-s { 240 bottom: 0; 241 left: 50%; 242 transform: translate(-50%, 50%); 243 cursor: s-resize; 244 } 245 .ReactCrop .ord-sw { 246 bottom: 0; 247 left: 0; 248 transform: translate(-50%, 50%); 249 cursor: sw-resize; 250 } 251 .ReactCrop .ord-w { 252 top: 50%; 253 left: 0; 254 transform: translate(-50%, -50%); 255 cursor: w-resize; 256 } 257 .ReactCrop__disabled .ReactCrop__drag-handle { 258 cursor: inherit; 259 } 260 .ReactCrop__drag-bar { 261 position: absolute; 262 } 263 .ReactCrop__drag-bar.ord-n { 264 top: 0; 265 left: 0; 266 width: 100%; 267 height: var(--rc-drag-bar-size); 268 transform: translateY(-50%); 269 } 270 .ReactCrop__drag-bar.ord-e { 271 right: 0; 272 top: 0; 273 width: var(--rc-drag-bar-size); 274 height: 100%; 275 transform: translate(50%); 276 } 277 .ReactCrop__drag-bar.ord-s { 278 bottom: 0; 279 left: 0; 280 width: 100%; 281 height: var(--rc-drag-bar-size); 282 transform: translateY(50%); 283 } 284 .ReactCrop__drag-bar.ord-w { 285 top: 0; 286 left: 0; 287 width: var(--rc-drag-bar-size); 288 height: 100%; 289 transform: translate(-50%); 290 } 291 .ReactCrop--new-crop .ReactCrop__drag-bar, 292 .ReactCrop--new-crop .ReactCrop__drag-handle, 293 .ReactCrop--fixed-aspect .ReactCrop__drag-bar, 294 .ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-n, 295 .ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-e, 296 .ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-s, 297 .ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-w { 298 display: none; 299 } 300 @media (pointer: coarse) { 301 .ReactCrop .ord-n, 302 .ReactCrop .ord-e, 303 .ReactCrop .ord-s, 304 .ReactCrop .ord-w { 305 display: none; 306 } 307 .ReactCrop__drag-handle { 308 width: var(--rc-drag-handle-mobile-size); 309 height: var(--rc-drag-handle-mobile-size); 310 } 311 } 312 313 .cropped { 314 width: 110px; 315 box-shadow: 0 10px 12px rgba(0, 0, 0, 0.2); 316 max-width: 100%; 317 border-radius: 50%; 318 display: block; 319 margin: 0 auto; 320 } 321`;
321var d=t(6878),p=t(8098),l=t(1163),h=t(4658),g=t(6796),f=Object.defineProperty,u=Object.defineProperties,m=Object.getOwnPropertyDescriptors,b=Object.getOwnPropertySymbols,x=Object.prototype.hasOwnProperty,_=Object.prototype.propertyIsEnumerable,C=(e,r,t)=>r in e?f(e,r,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[r]=t,R=(e,r)=>{for(var t in r||(r={}))x.call(r,t)&&C(e,t,r[t]);if(b)for(var t of b(r))_.call(r,t)&&C(e,t,r[t]);return e};function v(e,r,t){return(0,c.ge)((0,c.dS)({unit:"%",width:30},t,e,r),e,r)}const w=({handleHide:e})=>{const[r,t]=(0,a.useState)(!1),[i,f]=(0,a.useState)([]),[b,x]=(0,a.useState)(null),[_,C]=(0,a.useState)(),[w,y]=(0,a.useState)(""),[j,k]=(0,a.useState)(null),[z,S]=(0,a.useState)(null),[O,A]=(0,a.useState)(null),[P,E]=(0,a.useState)(null),[$,H]=(0,a.useState)(),I=(0,a.useRef)(null),[D]=(0,a.useState)(1),N=(0,n.A)(),[M,{data:L,error:F}]=(0,h.n)(g.ot);(0,a.useEffect)((()=>{(()=>{if(i&&1===i.length){const e=new FileReader;e.addEventListener("load",(()=>{x(e.result)})),e.readAsDataURL(i[0])}})()}),[i]),(0,a.useEffect)((()=>{L&&e()}),[L,F,e]);const U=e=>{return r=void 0,t=null,o=function*(){if(I&&e.width&&e.height)return yield T(I,e,"newFile.jpeg"),!0},new Promise(((e,a)=>{var i=e=>{try{c(o.next(e))}catch(e){a(e)}},n=e=>{try{c(o.throw(e))}catch(e){a(e)}},c=r=>r.done?e(r.value):Promise.resolve(r.value).then(i,n);c((o=o.apply(r,t)).next())}));var r,t,o},T=(e,r,t)=>{const o=document.createElement("canvas"),a=e.current.naturalWidth/e.current.width,i=e.current.naturalHeight/e.current.height;o.width=220,o.height=220;const n=o.getContext("2d");return n.mozImageSmoothingEnabled=!0,n.webkitImageSmoothingEnabled=!0,n.msImageSmoothingEnabled=!0,n.imageSmoothingEnabled=!0,n.imageSmoothingQuality="high",n.drawImage(e.current,r.x*a,r.y*i,r.width*a,r.height*i,0,0,220,220),new Promise((e=>{const r=o.toDataURL("image/jpeg");o.toBlob((o=>{o&&(o.name=t,window.URL.revokeObjectURL(P),E(window.URL.createObjectURL(o)),k(window.URL.createObjectURL(o)),S(o),A(r),e())}),"image/jpeg")}))};return(0,o.jsxs)(s,{children:[!b&&(0,o.jsx)("div",{children:(0,o.jsx)(d.Ay,{onDrop:e=>{f(e)},multiple:!1,onDropRejected:e=>{e.length>1?y(N.formatMessage({id:"avatar.errorTooManyFiles",defaultMessage:"Pas plus dâun fichier"})):"file-invalid-type"===e[0].errors[0].code&&y(N.formatMessage({id:"avatar.errorInvalidFileType",defaultMessage:"Format de fichier non valide"}))},accept:"image/*",children:({getRootProps:e,getInputProps:r,isDragActive:t,isDragAccept:a,isDragReject:i})=>{return(0,o.jsx)("section",{className:"container",children:(0,o.jsxs)("div",(n=R({},e({className:`dropzone${t?" hover":""}${a?" accept":""}${i?" reject":""}`})),c={children:[(0,o.jsx)("input",R({},r())),(0,o.jsx)("p",{dangerouslySetInnerHTML:{__html:N.formatMessage({id:"avatar.dropZoneText"})}}),w&&(0,o.jsx)("p",{className:"dropError",children:w})]},u(n,m(c))))});var n,c}})}),!!$&&j&&(0,o.jsx)("p",{children:(0,o.jsx)("img",{alt:"Crop",className:"cropped",src:j})}),b&&(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)("p",{className:"cropperInstructions",children:N.formatMessage({id:"avatar.cropperInstructionsStep1"})}),(0,o.jsx)("p",{className:"cropperInstructions",children:N.formatMessage({id:"avatar.cropperInstructionsStep2"})}),(0,o.jsx)(c.Ay,{crop:_,onComplete:e=>{return U(r=e),void H(r);var r},onChange:(e,r)=>{C(r)},aspect:"1",children:(0,o.jsx)("img",{ref:I,alt:"Crop me",src:b,onLoad:function(e){if(D){const{width:r,height:t}=e.currentTarget;C(v(r,t,D)),U(v(r,t,D)),H(v(r,t,D))}}})})]}),z&&j&&O&&(0,o.jsxs)(p.j,{onClick:()=>(M({variables:{data:{avatar:O}}}),void t(!0)),disabled:r,children:[N.formatMessage({id:"avatar.updateAvatarCTA"})," ",r&&(0,o.jsx)(l.A,{boxDimensions:"14px",marginBox:"0 0 0 5px"})]})]})},y=({isOpen:e,handleHide:r})=>(0,o.jsx)(i.A,{isOpen:e,handleHide:r,children:(0,o.jsx)(w,{handleHide:r})})},2578:(e,r,t)=>{t.d(r,{A:()=>u});var o=t(2540),a=t(3696),i=t(3732),n=t.n(i),c=t(9503);const s=c.AH` 322 &__overlay { 323 position: fixed; 324 z-index: 3; 325 top: 0; 326 left: 0; 327 right: 0; 328 bottom: 0; 329 display: flex; 330 justify-content: center; 331 align-items: center; 332 background-color: rgba(21, 21, 21, 0.9); 333 opacity: 0; 334 transition: all 0.2s; 335 &--after-open { 336 opacity: 1; 337 } 338 &--before-close { 339 opacity: 0; 340 } 341 } 342 &__content { 343 position: fixed; 344 padding: 35px 12px 40px 12px; 345 text-align: center; 346 background-color: #fff; 347 height: 100%; 348 width: 100%; 349 overflow-y: auto; 350 351 &:focus { 352 outline: 0; 353 } 354 355 @media (min-width: 768px) { 356 height: auto; 357 max-width: 705px; 358 padding: 45px 110px; 359 border-radius: 4px; 360 } 361 362 & .simple-link { 363 color: initial; 364 } 365 366 .mobileHeader { 367 margin-top: -35px; 368 margin-left: -12px; 369 margin-right: -4px; 370 width: 100vw; 371 372 @media (min-width: 768px) { 373 display: none; 374 } 375 } 376 } 377`;var d=t(253),p=t(5508);const l=c.Ay.img` 378 margin: auto; 379 max-width: ${({theme:e})=>e.logo.designSystem.mobileW}; 380 381 @media (min-width: 680px) { 382 max-width: ${({theme:e})=>e.logo.designSystem.desktopW}; 383 } 384 385 @media (min-width: 1100px) { 386 margin: 0; 387 } 388`,h=()=>{const[e,r]=(0,a.useState)(),t=(0,a.useContext)(c.Dx);return(0,a.useEffect)((()=>{const e=`${(new p.A).getBrandConfUrl()}/icons/${t.name}/logoPristine.svg`;r(e)}),[e,t]),(0,o.jsx)(l,{src:e,width:t.logo.designSystem.desktopW})},g=c.Ay.div` 389 display: block; 390 width: 100%; 391 border-top: 5px solid var(--color-darkgrey); 392 border-image-outset: 0; 393 border-image-repeat: stretch; 394 border-image-slice: 1; 395 border-image-source: ${e=>e.theme&&e.theme.connectHeader&&e.theme.connectHeader.gradient?`${e.theme.connectHeader.gradient}`:"linear-gradient(54.44deg, #2D50B9 0%, #5A83FF 100%)"}; 396 border-image-width: 5px 0 0 0; 397 text-align: center; 398 padding-top: calc(var(--spacing-unit) * 7); 399 padding-bottom: calc(var(--spacing-unit) * 6); 400 401 @media (min-width: 650px) { 402 border-top: 12px solid var(--color-darkgrey); 403 border-image-width: 12px 0 0 0; 404 padding-top: calc(var(--spacing-unit) * 12); 405 padding-bottom: calc(var(--spacing-unit) * 10); 406 } 407`,f=({url:e,handleClick:r,className:t})=>(0,o.jsx)(g,{className:t,children:null!==e?(0,o.jsx)("a",{href:e,onClick:e=>{e.preventDefault(),r()},children:(0,o.jsx)(h,{})}):(0,o.jsx)(h,{})});n().setAppElement("#root");const u=(0,c.Ay)((({className:e,isOpen:r,children:t,handleHide:a,displaySurvey:i})=>{const c={base:`${e}__content`,afterOpen:`${e}__content--after-open`,beforeClose:`${e}__content--before-close`},s={base:`${e}__overlay`,afterOpen:`${e}__overlay--after-open`,beforeClose:`${e}__overlay--before-close`},p={};return"YES"===i&&(p.content={padding:"45px 30px",height:"100%",width:"100%",maxWidth:"100%"}),(0,o.jsxs)(n(),{closeTimeoutMS:200,isOpen:r,className:c,overlayClassName:s,displaySurvey:i,style:p,children:[(0,o.jsx)(f,{className:"mobileHeader"}),(0,o.jsx)(d.A,{onButtonClick:()=>{a()},label:"Fermer la fenêtre"}),t]})}
407))(s)}}]); 408//# sourceMappingURL=containers_modal_avatarModal_js.036edee9.0ef15b04.js.map
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.