{"version":3,"names":["FeedbackForm","this","textareaId","isPositiveFeedback","componentWillUpdate","currentLength","textareaInput","value","length","getDescription","event","preventDefault","formSubmit","emit","trim","handleCancel","formCancel","textareaInputHandler","isEmpty","maxLength","maxedLength","componentDidLoad","isloaded","render","message","ariaLive","h","key","class","style","color","display","Host","action","method","onSubmit","htmlFor","descriptiveText","id","resetValue","ref","el","onInput","name","maxlength","type","onClick","href"],"sources":["src/webcomponents/x-feedback-form/lk-feedback-form.tsx"],"sourcesContent":["import { Component, Event, EventEmitter, h, Host, State, Prop } from \"@stencil/core\";\nimport { isEmpty } from '../utils/is-empty.js';\n\n@Component({\n  tag: 'lk-feedback-form'\n})\nexport class FeedbackForm {\n\n  @Prop({ mutable: true }) resetValue = '';\n\n  @Event() formSubmit: EventEmitter;\n  @Event() formCancel: EventEmitter;\n\n  @Prop({ mutable: true }) isloaded: boolean = false;\n  @Prop({ reflect: true }) maxLength: number = 1000;\n  @Prop() isPositiveFeedback: boolean = true;\n  @Prop() descriptiveText: string = 'Så bra, Kan du fortelle oss hva du lette etter?'\n  @State() currentLength: number = 0;\n  @State() maxedLength: boolean = false;\n\n  textareaInput: HTMLTextAreaElement;\n  textareaId: string = this.isPositiveFeedback ? 'description-yes' : 'description-no';\n\n  componentWillUpdate() {\n    this.currentLength = this.textareaInput.value.length;\n  }\n\n  getDescription(event: Event) {\n    event.preventDefault();\n    this.formSubmit.emit(this.textareaInput.value.trim());\n  }\n\n  handleCancel(event: Event) {\n    event.preventDefault();\n    this.textareaInput.value = \"\";\n    this.currentLength = 0;\n    this.formCancel.emit();\n  }\n\n  textareaInputHandler() {\n    this.currentLength = this.textareaInput.value.length;\n\n    if (!isEmpty(this.maxLength)) {\n      if (!this.maxedLength) {\n        if (this.currentLength >= this.maxLength) {\n          this.maxedLength = true;\n        }\n      } else {\n        if (this.currentLength < this.maxLength) {\n          this.maxedLength = false;\n        }\n      }\n    }\n  }\n\n  componentDidLoad() {\n    this.isloaded = true;\n  }\n\n  render() {\n    let message = null;\n    let ariaLive = this.maxedLength\n      ? 'assertive'\n      : 'off';\n\n    if (!this.maxedLength) {\n      message = <p class=\"input-block__message\" aria-live={ariaLive} style={{ color: '#233264' }}>{`${this.currentLength} / ${this.maxLength} tegn.`}</p>;\n    } else {\n      message = <p class=\"input-block__warning-message\" aria-live={ariaLive} style={{ display: 'block', color: '#a4310e' }}>{`Du har nådd maks antall tegn på ${this.maxLength}.`}</p>\n    }\n\n    return (\n      <Host>\n        <form action=\"\" method=\"POST\" onSubmit={event => { this.getDescription(event) }} >\n          <label htmlFor={this.textareaId} class='visually-hidden'>{this.descriptiveText}</label>\n          <div id={`${this.textareaId}-wordcount`} class=\"textarea-wrapper input-block\">\n            <textarea\n              id={this.textareaId}\n              aria-describedby={`${this.textareaId}-wordcount`}\n              value={this.resetValue}\n              ref={el => this.textareaInput = el}\n              onInput={() => { this.textareaInputHandler() }}\n              name=\"description\"\n              maxlength={this.maxLength}\n            ></textarea>\n            {message}\n          </div>\n          <div class=\"padding-y--tiny\">\n            <button type=\"submit\" class=\"button button--normal\">\n              <span class=\"button__text  padding-x--tiny\">Send inn</span>\n            </button>\n            <button type=\"button\" class=\"button button--tertiary margin-left--large\" onClick={event => { this.handleCancel(event) }}>\n              <span class=\"button__text\">Avbryt</span>\n            </button>\n          </div>\n        </form>\n\n        <p class=\"margin-top--base\">\n          Takk! Vi bruker denne informasjonen til å lage bedre innhold og tjenester, men vi svarer ikke på disse tilbakemeldingene. Ønsker du svar anbefaler vi at du logger inn og bruker<a href=\"https://www.altinn.no/Pages/ExternalAuthentication/Redirect.aspx?returnUrl=https://dialog.lillestrom.kommune.no/Form/GeneralInquiry\"> tilbakemeldingsskjemaet vårt</a>.\n        </p>\n      </Host>\n    );\n  }\n}\n"],"mappings":"8FAMaA,EAAY,M,uGAevBC,KAAAC,WAAqBD,KAAKE,mBAAqB,kBAAoB,iB,gBAb7B,G,cAKO,M,eACA,I,wBACP,K,qBACJ,kD,mBACD,E,iBACD,K,CAKhC,mBAAAC,GACEH,KAAKI,cAAgBJ,KAAKK,cAAcC,MAAMC,M,CAGhD,cAAAC,CAAeC,GACbA,EAAMC,iBACNV,KAAKW,WAAWC,KAAKZ,KAAKK,cAAcC,MAAMO,O,CAGhD,YAAAC,CAAaL,GACXA,EAAMC,iBACNV,KAAKK,cAAcC,MAAQ,GAC3BN,KAAKI,cAAgB,EACrBJ,KAAKe,WAAWH,M,CAGlB,oBAAAI,GACEhB,KAAKI,cAAgBJ,KAAKK,cAAcC,MAAMC,OAE9C,IAAKU,EAAQjB,KAAKkB,WAAY,CAC5B,IAAKlB,KAAKmB,YAAa,CACrB,GAAInB,KAAKI,eAAiBJ,KAAKkB,UAAW,CACxClB,KAAKmB,YAAc,I,MAEhB,CACL,GAAInB,KAAKI,cAAgBJ,KAAKkB,UAAW,CACvClB,KAAKmB,YAAc,K,IAM3B,gBAAAC,GACEpB,KAAKqB,SAAW,I,CAGlB,MAAAC,GACE,IAAIC,EAAU,KACd,IAAIC,EAAWxB,KAAKmB,YAChB,YACA,MAEJ,IAAKnB,KAAKmB,YAAa,CACrBI,EAAUE,EAAA,KAAAC,IAAA,2CAAGC,MAAM,uBAAsB,YAAYH,EAAUI,MAAO,CAAEC,MAAO,YAAc,GAAG7B,KAAKI,mBAAmBJ,KAAKkB,kB,KACxH,CACLK,EAAUE,EAAA,KAAAC,IAAA,2CAAGC,MAAM,+BAA8B,YAAYH,EAAUI,MAAO,CAAEE,QAAS,QAASD,MAAO,YAAc,mCAAmC7B,KAAKkB,a,CAGjK,OACEO,EAACM,EAAI,CAAAL,IAAA,4CACHD,EAAA,QAAAC,IAAA,2CAAMM,OAAO,GAAGC,OAAO,OAAOC,SAAUzB,IAAWT,KAAKQ,eAAeC,EAAM,GAC3EgB,EAAA,SAAAC,IAAA,2CAAOS,QAASnC,KAAKC,WAAY0B,MAAM,mBAAmB3B,KAAKoC,iBAC/DX,EAAA,OAAAC,IAAA,2CAAKW,GAAI,GAAGrC,KAAKC,uBAAwB0B,MAAM,gCAC7CF,EAAA,YAAAC,IAAA,2CACEW,GAAIrC,KAAKC,WAAU,mBACD,GAAGD,KAAKC,uBAC1BK,MAAON,KAAKsC,WACZC,IAAKC,GAAMxC,KAAKK,cAAgBmC,EAChCC,QAAS,KAAQzC,KAAKgB,sBAAsB,EAC5C0B,KAAK,cACLC,UAAW3C,KAAKkB,YAEjBK,GAEHE,EAAA,OAAAC,IAAA,2CAAKC,MAAM,mBACTF,EAAA,UAAAC,IAAA,2CAAQkB,KAAK,SAASjB,MAAM,yBAC1BF,EAAA,QAAAC,IAAA,2CAAMC,MAAM,iCAA+B,aAE7CF,EAAA,UAAAC,IAAA,2CAAQkB,KAAK,SAASjB,MAAM,6CAA6CkB,QAASpC,IAAWT,KAAKc,aAAaL,EAAM,GACnHgB,EAAA,QAAAC,IAAA,2CAAMC,MAAM,gBAAc,aAKhCF,EAAA,KAAAC,IAAA,2CAAGC,MAAM,oBAAkB,mLACuJF,EAAA,KAAAC,IAAA,2CAAGoB,KAAK,uIAAqI,iCAAkC,K","ignoreList":[]}