https://www.iltalehti.fi/assets/HotlineEmbed.daf9b26dd.chunk.js

1(self.webpackChunk=self.webpackChunk||[]).push([[9697],{41687(e,t,r){r.r(t),r.d(t,{default:()=>N}),r(72712);var n,i,a,o,s,l,d,p=r(96540),u=r(32485),c=r.n(u),h=r(3100),m=r.n(h),f=r(82089),g=r(98451),b=r(21953),v=r(11410),x=r(95937),y=r(81519),w=r(13514),k=r(18912),C=r.n(k);function S(e,t,r,n){d||(d="function"==typeof Symbol&&Symbol.for&&Symbol.for("react.element")||60103);var i=e&&e.defaultProps,a=arguments.length-3;if(t||0===a||(t={children:void 0}),1===a)t.children=n;else if(a>1){for(var o=Array(a),s=0;s<a;s++)o[s]=arguments[s+3];t.children=o}if(t&&i)for(var l in i)void 0===t[l]&&(t[l]=i[l]);else t||(t=i||{});return{$$typeof:d,type:e,key:void 0===r?null:""+r,ref:null,props:t,_owner:null}}const A=52425e3,_={text:{required:!0},nickname:{required:!0,maxLength:50},name:{maxLength:50},email:{maxLength:50},phone_number:{maxLength:15}},N=m()(C())(function(e){let{id:t,env:r}=e;const d=(0,p.useMemo)(()=>(e=>{switch(e){case"prod":return f.gw;case"dev":return f.w6;default:return f.P6}})(r),[r]),[u,h]=(0,p.useState)(null),[m,k]=(0,p.useState)(!1),[C,N]=(0,p.useState)({text:"",nickname:"",name:"",email:"",phone_number:"",website:"",files:[""]}),[L,P]=(0,p.useState)(null),[B,E]=(0,p.useState)(!1),[$,j]=(0,p.useState)({}),[F,R]=(0,p.useState)(null),q=(0,p.useRef)(0),z=(0,p.useRef)(),I=e=>{let{target:t}=e;return N({...C,[t.name]:t.value})},M=e=>{const{name:t,value:r}=e,{required:n,maxLength:i}=_[t];!C[t]&&n?j(t=>({...t,[e.name]:!0})):i&&r.length>i?j(t=>({...t,[e.name]:!0})):j(t=>({...t,[e.name]:!1}))},D=(0,p.useCallback)(()=>{const e=new FormData;Object.keys(C).forEach(t=>{"files"===t?u.accept_attachments&&C[t].forEach((t,r)=>{t&&e.append(`file${r+1}`,t)}):e.append(t,C[t])}),F.open("POST",`${d}/${t}`),F.addEventListener("error",()=>{P("Lomakkeen lähetyksessä tapahtui virhe.")}),F.send(e)},[C,F]);if((0,p.useEffect)(()=>{!u&&t&&(async e=>{try{const t=`${d}/${e}`,r=await fetch(t),n=await r.json();h(n.response)}catch(e){}})(t)},[]),(0,p.useEffect)(()=>{F&&!m&&D()},[F,D]),!u)return n||(n=S("div",{className:"hotline-embed-placeholder"}));const O=S("span",{className:L?"required-star":""},void 0,"*");return p.createElement("div",{className:"hotline-embed",ref:z},m?i||(i=S("div",{className:"thanks"},void 0,S("b",{},void 0,"Kiitos vastauksestasi!"))):S("form",{className:"form",onSubmit:async e=>{e.preventDefault();let t=!0,r=!1;Object.entries(_).forEach(e=>{let[n,i]=e;const{required:a,maxLength:o}=i;a&&!C[n]&&(t=!1),o&&C[n].length>o&&(r=!0)}),t?r?(P("Tarkista olethan täyttänyt kentät oikein."),Object.keys(_).forEach(t=>M(e.target[t]))):q.current>A?E(!0):(L&&P(null),R(new XMLHttpRequest)):(P("Ole hyvä ja täytä kaikki pakolliset kentät."),Object.keys(_).forEach(t=>{M(e.target[t])}))}},void 0,S("div",{className:"form-header"},void 0,u.title??"Kerro meille"),S("label",{htmlFor:"text",className:"text-label"},void 0,u.text,O),S(y.A,{className:c()({invalid:$.text}),id:"text",cols:"60",rows:"10",name:"text",value:C.text,onChange:I,onBlur:e=>{let{target:t}=e;return M(t)}}),S(x.A,{className:c()({invalid:$.nickname}),type:"text",name:"nickname",label:p.createElement(p.Fragment,null,"Nimimerkki",O),value:C.nickname,onChange:I,onBlur:e=>{let{target:t}=e;return M(t)}}),u.accept_attachments&&p.createElement(p.Fragment,null,S(b.A,{label:"Asiaan liittyvät kuvat tai videot",secondaryLabel:"Liitteiden yhteiskoko max. 50 MB",onChange:e=>{const{name:t}=e.target,r=t.match(/file(\d)/)[1]-1,n=e.target.files[0];N(e=>{const t=[...e.files];return t[r]=n||"",window.FileReader&&(q.current=t.reduce((e,t)=>t.size?e+t.size:e,0)),!t.some(e=>""===e)&&t.length<5&&q.current<=A&&t.push(""),{...e,files:t}}),q.current>A?E(!0):E(!1)},files:C.files,fileErrorVisible:B}),B&&(a||(a=S("div",{className:"form-error-container"},void 0,S(v.A,{errorMessage:"Liitetiedostojen koko ylittää 50 MB rajan."}))))),S(x.A,{className:c()({invalid:$.name}),type:"text",name:"name",label:"Nimi",value:C.name,onChange:I,onBlur:e=>{let{target:t}=e;return M(t)}}),S(x.A,{className:c()({invalid:$.email}),type:"email",name:"email",label:"Sähköposti",value:C.email,onChange:I,onBlur:e=>{let{target:t}=e;return M(t)}}),S(x.A,{className:c()({invalid:$.phone_number}),type:"tel",name:"phone_number",label:"Puhelinnumero",value:C.phone_number,onChange:I,onBlur:e=>{let{target:t}=e;return M(t)}}),o||(o=S("div",{className:"website-input"},void 0,"Nettisivu")),S("input",{type:"url",name:"website",value:C.website,onChange:I,className:"website-input"}),s||(s=S("div",{},void 0,S("span",{},void 0,"Henkilötietojasi käsitellään luottamuksellisesti."," ",S("a",{target:"_blank",rel:"noopener",className:"hotline-link",href:"https://www.almamedia.fi/tietosuoja"},void 0,"Alma Median tietosuojakuvaus"),"."))),S(w.A,{xhr:F,filesExist:C.files.some(e=>""!==e),handleResponse:e=>{setTimeout(()=>{F&&(200===F.status?k(!0):413===F.status?E(!0):P("Lomakkeen lähetyksessä tapahtui virhe."))},e)}},void 0,(e,t)=>S("div",{style:{height:"3px",marginTop:"10px",width:e,background:t}})),S("div",{className:"hotline-form-bottom"},void 0,l||(l=S(g.A,{className:"hotline-form-submit"},void 0,"Lähetä")),L&&S("div",{className:"hotline-error-text"},void 0,L))))})},11410(e,t,r){r.d(t,{A:()=>d}),r(96540);var n,i=r(3100),a=r.n(i),o=r(64989),s=r.n(o);

1function l(e,t,r,i){n||(n="function"==typeof Symbol&&Symbol.for&&Symbol.for("react.element")||60103);var a=e&&e.defaultProps,o=arguments.length-3;if(t||0===o||(t={children:void 0}),1===o)t.children=i;else if(o>1){for(var s=Array(o),l=0;l<o;l++)s[l]=arguments[l+3];t.children=s}if(t&&a)for(var d in a)void 0===t[d]&&(t[d]=a[d]);else t||(t=a||{});return{$$typeof:n,type:e,key:void 0===r?null:""+r,ref:null,props:t,_owner:null}}const d=a()(s())(function(e){const{errorMessage:t}=e;return l("span",{className:"form-error"},void 0,t)})},81519(e,t,r){r.d(t,{A:()=>d});var n=r(96540),i=r(3100),a=r.n(i),o=r(48204),s=r.n(o);function l(){return l=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)({}).hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},l.apply(null,arguments)}const d=a()(s())(function(e){let{className:t,refFunction:r,...i}=e;return n.createElement("textarea",l({className:`text-area ${t||""}`,type:"text"},r?{ref:r}:{},i))})},21953(e,t,r){r.d(t,{A:()=>v});var n,i=r(96540),a=r(3100),o=r.n(a),s=r(64989),l=r.n(s);function d(e,t,r,i){n||(n="function"==typeof Symbol&&Symbol.for&&Symbol.for("react.element")||60103);var a=e&&e.defaultProps,o=arguments.length-3;if(t||0===o||(t={children:void 0}),1===o)t.children=i;else if(o>1){for(var s=Array(o),l=0;l<o;l++)s[l]=arguments[l+3];t.children=s}if(t&&a)for(var d in a)void 0===t[d]&&(t[d]=a[d]);else t||(t=a||{});return{$$typeof:n,type:e,key:void 0===r?null:""+r,ref:null,props:t,_owner:null}}class p extends i.Component{constructor(e){super(e),this.state={fileName:"Lisää liite"},this.inputRef=(0,i.createRef)()}componentDidMount(){this.inputRef.current.addEventListener("change",this.handleChange)}componentDidUpdate(){this.inputRef.current.querySelector("span").textContent=this.state.fileName}componentWillUnmount(){this.inputRef.current.removeEventListener("change",this.handleChange)}handleChange=e=>{this.setState({fileName:e.target.value.split("\\").pop()||"Lisää liite"})};render(){const{uniqueName:e,onChange:t,onBlur:r}=this.props;return i.createElement("label",{className:"file-container",htmlFor:e,ref:this.inputRef},d("span",{}

1,void 0,this.state.fileName),d("input",{type:"file",name:e,onChange:t,onBlur:r}))}}const u=o()(l())(p);var c,h=r(32485),m=r.n(h),f=r(40726),g=r.n(f);function b(e,t,r,n){c||(c="function"==typeof Symbol&&Symbol.for&&Symbol.for("react.element")||60103);var i=e&&e.defaultProps,a=arguments.length-3;if(t||0===a||(t={children:void 0}),1===a)t.children=n;else if(a>1){for(var o=Array(a),s=0;s<a;s++)o[s]=arguments[s+3];t.children=o}if(t&&i)for(var l in i)void 0===t[l]&&(t[l]=i[l]);else t||(t=i||{});return{$$typeof:c,type:e,key:void 0===r?null:""+r,ref:null,props:t,_owner:null}}const v=o()(g())(function(e){let{className:t,files:r,onChange:n,label:i,secondaryLabel:a,style:o,...s}=e;const l=r.map((e,t)=>b(u,{uniqueName:`file${t+1}`,value:e,onChange:n,label:i,style:o},`file${t+1}`)).sort((e,t)=>{const r=e.props.value?1:0;return(t.props.value?1:0)-r}),d=l.findIndex(e=>""===e.props.value);return d>=0&&l.splice(d+1),b("fieldset",{className:m()("files",t)},void 0,i&&b("legend",{className:"files-label"},void 0,i),a&&b("div",{className:"files-secondary-label"},void 0,a),l)})},13514(e,t,r){r.d(t,{A:()=>d});var n=r(96540),i=r(3100),a=r.n(i),o=r(40773),s=r.n(o);class l extends n.Component{constructor(e){super(e),this.state=this.getInitalState()}componentDidUpdate(e){const{xhr:t,filesExist:r}=this.props;e.xhr!==t&&(r&&(this.progressComputable=!1,t.upload.addEventListener("loadstart",()=>{this.progressArray=[{progress:0,timeStamp:Date.now()}]}),t.upload.addEventListener("progress",e=>{if(e.lengthComputable){this.progressComputable=!0;const t=e.loaded/e.total*100;this.progressArray.push({progress:t,timeStamp:Date.now()}),t>0&&!this.updatingProgressBar&&(this.updateProgressBar(),this.updatingProgressBar=!0)}})),t.addEventListener("load",()=>{r&&this.progressComputable?(window.cancelAnimationFrame(this.timerId),this.updatingProgressBar=!1,this.progressArray=[{timeStamp:Date.now(),progress:this.progressArray[0].progress},{timeStamp:Date.now()+350,progress:100}],this.progressState="loaded",this.updateProgressBar()):this.props.handleResponse(850)}))}componentWillUnmount(){window.cancelAnimationFrame(this.timerId)}getInitalState=()=>({width:0,background:"none"});setProgressBarStyle=e=>{this.setState({width:e,background:`rgb(${this.getColor(e)})`})};getColor=e=>{const t=parseFloat(e)/100,r=[[195,0,0],[240,198,0],[25,182,21]],n=r.length-1;let i=Math.floor(t*n);const a=1===t?1:t*n%1;return i===n&&(i-=1),[parseInt(r[i][0]+(r[i+1][0]-r[i][0])*a,10),parseInt(r[i][1]+(r[i+1][1]-r[i][1])*a,10),parseInt(r[i][2]+(r[i+1][2]-r[i][2])*a,10)]};updateProgressBar=()=>{this.startTime=null,this.previousWidth=this.state.width,this.progressArray.length>1?(this.partialProgressLength=this.progressArray[1].timeStamp-this.progressArray[0].timeStamp,this.partialProgressAmount=this.progressArray[1].progress,this.progressArray.shift(),this.timerId=window.requestAnimationFrame(this.step)):this.updatingProgressBar=!1};step=e=>{this.startTime||(this.startTime=e);const t=e-this.startTime,r=t/this.partialProgressLength,n=this.previousWidth+(this.partialProgressAmount-this.previousWidth)*Math.min(r,1);this.setProgressBarStyle(parseFloat(n)),t<this.partialProgressLength?this.timerId=window.requestAnimationFrame(this.step):(window.cancelAnimationFrame(this.timerId),"loaded"===this.progressState?(this.progressState=void 0,this.props.handleResponse(400)):this.updateProgressBar())};updatingProgressBar=!1;render(){return this.props.children(`${this.state.width}%`,this.state.background)}}const d=a()(s())(l)},47686(e,t,r){var n=r(76314)(function(e){return e[1]});n.push([e.id,".hotline-embed-placeholder{height:671px}.hotline-embed,.hotline-embed-placeholder{background-color:var(--wall-color);border-radius:6px;margin:14px}.hotline-embed{font-family:Bernina Sans Condensed,Arial,sans-serif;font-size:17px;font-weight:600;max-width:612px;padding:14px}.hotline-embed .website-input{display:none}.hotline-embed .form-header{font-size:22px;font-weight:700;margin-bottom:10px}.hotline-embed .text-label{display:block;margin-bottom:3px}.hotline-embed .text-area,.hotline-embed .text-input{display:block;margin-bottom:14px}.hotline-embed .text-area.invalid,.hotline-embed .text-input.invalid .input-container{border:1px solid var(--red)}.hotline-embed .required-star{color:var(--red)}.hotline-embed .button-container{display:flex;justify-content:space-between;margin-top:14px}.hotline-embed .thanks{padding:30px 0;text-align:center}.hotline-embed .hotline-form-bottom{display:flex;margin-top:10px}.hotline-embed .hotline-form-submit{margin-left:0}.hotline-embed .hotline-link{text-decoration:underline}.hotline-embed .hotline-error-text{align-self:center;color:var(--red);margin-left:10px}.hotline-embed .file-container{align-items:center;background-color:var(--box-color);border:1px solid var(--input-border-color);border-radius:4px;color:var(--input-text-color);cursor:pointer;display:flex;font-weight:600;height:40px;margin-bottom:14px;max-width:100%;overflow:hidden;padding:14px;position:relative;width:100%}.hotline-embed .file-container [type=file]{cursor:inherit;display:block;filter:alpha(opacity=0);font-size:999px;opacity:0;position:absolute;right:0;text-align:right;top:0}.hotline-embed .form-error-container{margin:0 0 14px}@media only screen and (min-width:450px){.hotline-embed{padding:21px}}@media only screen and (min-device-width:450px){.hotline-embed{padding:21px}}",""]),n.locals={},e.exports=n},70027(e,t,r){var n=r(76314)(function(e){return e[1]});

1n.push([e.id,"input[type=email],input[type=text],textarea{font-size:16px}textarea{height:140px;padding-top:2px}input[type=file],input[type=reset],input[type=submit]{font-size:16px;outline:none}button{outline:none}input[type=file]{display:block;margin:0 0 12px}input[type=reset],input[type=submit]{background-color:var(--white);border:2px solid var(--il-red);color:var(--il-red);cursor:pointer;line-height:14px;margin:0 0 20px;padding:5px 0}input[type=reset]:disabled,input[type=submit]:disabled{border-color:var(--il-red);color:var(--il-red);cursor:default}.form-error{color:var(--red);font-weight:700}",""]),n.locals={},e.exports=n},12638(e,t,r){var n=r(76314)(function(e){return e[1]});n.push([e.id,".text-area{-webkit-appearance:none;appearance:none;background-color:var(--input-bg-color);border:1px solid var(--input-border-color);border-radius:4px;color:var(--text-color);display:block;font-family:Bernina Sans,Arial,sans-serif;font-size:16px;font-weight:400;outline:none;padding:10px;resize:vertical;width:100%}.text-area::placeholder{color:var(--secondary-text-color);opacity:1}",""]),n.locals={},e.exports=n},67323(e,t,r){var n=r(76314)(function(e){return e[1]});n.push([e.id,".files{border:0;margin:0;min-width:0;padding:0}.files .files-label{display:block;padding:0}.files .files-secondary-label{font-weight:400;margin-bottom:3px}",""]),n.locals={},e.exports=n},29327(e,t,r){var n=r(76314)(function(e){return e[1]});n.push([e.id,'\ufeff.feedback-progress-bar{background:var(--white);height:100%;left:0;position:fixed;top:0;width:100%;z-index:10001}.feedback-progress-bar>div{background:var(--white);border:1px solid var(--grey);height:28px;left:5%;position:fixed;top:50%;transform:translateY(-50%);width:90%}.feedback-progress-bar__text{line-height:26px;padding:0 5px;position:absolute;white-space:nowrap}.feedback-progress-bar__text:after{animation:ellipsis 1.5s steps(4) infinite;content:"…";display:inline-block;overflow:hidden;vertical-align:bottom;width:0}.feedback-progress-bar__bar{height:100%;overflow:hidden;position:absolute;width:0}.feedback-progress-bar__bar .feedback-progress-bar__text{color:var(--white)}@media screen and (min-width:600px){.feedback-progress-bar{background:var(--white);border:1px solid var(--grey);position:absolute;width:100%;z-index:1}.feedback-progress-bar>div{border:none;height:26px;position:static;transform:none;width:100%}}',""]),n.locals={},e.exports=n},18912(e,t,r){var n=r(47686),i=r(61352),a="string"==typeof n?[[e.id,n,""]]:n;(t=e.exports=n.locals||{})._getContent=function(){return a},t._getCss=function(){return""+n},t._insertCss=function(e){return i(a,e)}},64989(e,t,r){var n=r(70027),i=r(61352),a="string"==typeof n?[[e.id,n,""]]:n;(t=e.exports=n.locals||{})._getContent=function(){return a},t._getCss=function(){return""+n},t._insertCss=function(e){return i(a,e)}},48204(e,t,r){var n=r(12638),i=r(61352),a="string"==typeof n?[[e.id,n,""]]:n;(t=e.exports=n.locals||{})._getContent=function(){return a},t._getCss=function(){return""+n},t._insertCss=function(e){return i(a,e)}},40726(e,t,r){var n=r(67323),i=r(61352),a="string"==typeof n?[[e.id,n,""]]:n;(t=e.exports=n.locals||{})._getContent=function(){return a},t._getCss=function(){return""+n},t._insertCss=function(e){return i(a,e)}},40773(e,t,r){var n=r(29327),i=r(61352),a="string"==typeof n?[[e.id,n,""]]:n;(t=e.exports=n.locals||{})._getContent=function(){return a},t._getCss=function(){return""+n},t._insertCss=function(e){return i(a,e)}}}]);
2//# sourceMappingURL=HotlineEmbed.daf9b26dd.chunk.js.map