@oslokommune/punkt-elements/dist/input-wrapper-DOIWggEv.cjs

Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo

const e=require(`./element-DjtxO-1r.cjs`),t=require(`./class-map-CJ-msbHs.cjs`),n=require(`./element-with-slot-CWoTGA1B.cjs`);require(`./alert-BEEnTiCb.cjs`);const r=require(`./icon-Dr8sfT2X.cjs`),i=require(`./if-defined-XKOD_t_V.cjs`),a=require(`./utils-CM67Oudc.cjs`),o=require(`./booleanish-B5EFqFpJ.cjs`),s=require(`./input-wrapper-CQGoyLdZ.cjs`);require(`./helptext-KWXjKljV.cjs`);const c=require(`./focus-modality-controller-BSZAQk8y.cjs`);var l=class extends n.t{constructor(...e){super(...e),this.forId=a.n(),this.label=``,this.helptext=null,this.helptextDropdown=null,this.helptextDropdownButton=null,this.counter=s.t.props.counter.default,this.counterCurrent=0,this.counterMaxLength=0,this.counterError=null,this.counterPosition=`bottom`,this.optionalTag=s.t.props.optionalTag.default,this.optionalText=s.t.props.optionalText.default,this.requiredTag=s.t.props.requiredTag.default,this.requiredText=s.t.props.requiredText.default,this.tagText=null,this.hasError=s.t.props.hasError.default,this.errorMessage=``,this.disabled=s.t.props.disabled.default,this.inline=s.t.props.inline.default,this.ariaDescribedby=void 0,this.hasFieldset=s.t.props.hasFieldset.default,this.role=`group`,this.useWrapper=s.t.props.useWrapper.default,this.focusModality=new c.t(this,`.pkt-inputwrapper`)}updated(e){super.updated(e)}render(){let a={"pkt-inputwrapper":!0,"pkt-inputwrapper--error":this.hasError,"pkt-inputwrapper--disabled":this.disabled,"pkt-inputwrapper--inline":this.inline},o=`pkt-tag pkt-tag--small pkt-tag--thin-text`,c=this.ariaDescribedby?this.ariaDescribedby:this.helptext?`${this.forId}-helptext`:e.l,l=()=>e.d`
        ${this.tagText?e.d`<span class=${o+` pkt-tag--gray`}>${this.tagText}</span>`:e.l}
        ${this.optionalTag?e.d`<span class=${o+` pkt-tag--blue-light`}>${this.optionalText}</span>`:e.l}
        ${this.requiredTag?e.d`<span class=${o+` pkt-tag--beige`}>${this.requiredText}</span>`:e.l}
      `,u=()=>this.useWrapper?this.hasFieldset?e.d`<legend
            class="pkt-inputwrapper__legend"
            id="${this.forId}-label"
            @click=${this.handleLabelClick}
          >
            ${this.label} ${l()}
          </legend>`:e.d`<label
            class="pkt-inputwrapper__label"
            for="${this.forId}"
            aria-describedby="${c}"
            id="${this.forId}-label"
            @click=${this.handleLabelClick}
            >${this.label}${l()}</label
          >`:e.d`<label
          for="${this.forId}"
          class="pkt-sr-only"
          aria-describedby="${c}"
          id="${this.forId}-label"
        >
          ${this.label}
        </label>`,d=()=>e.d`
        <pkt-helptext
          class="${i.t(this.useWrapper?void 0:`pkt-hide`)}"
          .forId=${this.forId}
          .helptext=${this.helptext}
          .helptextDropdown=${this.helptextDropdown}
          .helptextDropdownButton=${this.helptextDropdownButton||s.t.props.helptextDropdownButton.default}
          @toggleHelpText=${e=>{this.toggleDropdown(e)}}
          >${n.n(this,`helptext`)}</pkt-helptext
        >
      `,f=()=>this.counter?e.d`<div class="pkt-input__counter" aria-live="polite" aria-atomic="true">
          ${this.counterError?this.counterError:e.l} ${this.counterCurrent||0}
          ${this.counterMaxLength?`/${this.counterMaxLength}`:e.l}
        </div>`:e.l,p=()=>this.hasError&&this.errorMessage?e.d`<pkt-alert
          skin="error"
          compact
          id=${`${this.forId}-error`}
          aria-live="assertive"
          aria-atomic="true"
        >
          ${r.r(this.errorMessage)}
        </pkt-alert>`:e.l,m=()=>e.d`
        ${u()} 
        ${d()}
        ${this.counterPosition===`top`?f():e.l}
        <div class="pkt-contents">${n.n(this)}</div>
        ${this.counterPosition===`bottom`?f():e.l} 
        ${p()}
      `;return e.d`<div class=${t.t(a)}>${this.hasFieldset?e.d`<fieldset class="pkt-inputwrapper__fieldset" aria-describedby="${c}">
            ${m()}
          </fieldset>`:e.d`<div class="pkt-inputwrapper__fieldset">${m()}</div>`}</div> `}toggleDropdown(e){this.dispatchEvent(new CustomEvent(`toggleHelpText`,{bubbles:!1,detail:{isOpen:e.detail.isOpen}}))}handleLabelClick(){this.dispatchEvent(new CustomEvent(`labelClick`,{bubbles:!0,composed:!0,detail:`label clicked`}))}};e.r([e.s({type:String})],l.prototype,`forId`,void 0),e.r([e.s({type:String})],l.prototype,`label`,void 0),e.r([e.s({type:String})],l.prototype,`helptext`,void 0),e.r([e.s({type:String})],l.prototype,`helptextDropdown`,void 0),e.r([e.s({type:String})],l.prototype,`helptextDropdownButton`,void 0),e.r([e.s({type:Boolean})],l.prototype,`counter`,void 0),e.r([e.s({type:Number})],l.prototype,`counterCurrent`,void 0),e.r([e.s({type:Number})],l.prototype,`counterMaxLength`,void 0),e.r([e.s({type:String})],l.prototype,`counterError`,void 0),e.r([e.s({type:String,reflect:!1})],l.prototype,`counterPosition`,void 0),e.r([e.s({type:Boolean})],l.prototype,`optionalTag`,void 0),e.r([e.s({type:String})],l.prototype,`optionalText`,void 0),e.r([e.s({type:Boolean})],l.prototype,`requiredTag`,void 0),e.r([e.s({type:String})],l.prototype,`requiredText`,void 0),e.r([e.s({type:String})],l.prototype,`tagText`,void 0),e.r([e.s({type:Boolean})],l.prototype,`hasError`,void 0),e.r([e.s({type:String})],l.prototype,`errorMessage`,void 0),e.r([e.s({type:Boolean})],l.prototype,`disabled`,void 0),e.r([e.s({type:Boolean})],l.prototype,`inline`,void 0),e.r([e.s({type:String})],l.prototype,`ariaDescribedby`,void 0),e.r([e.s({type:Boolean})],l.prototype,`hasFieldset`,void 0),e.r([e.s({type:String,reflect:!0})],l.prototype,`role`,void 0),e.r([e.s({type:Boolean,reflect:!0,converter:o.t})],l.prototype,`useWrapper`,void 0);try{e.c(`pkt-input-wrapper`)(l)}catch{console.warn(`Forsøker å definere <pkt-input-wrapper>, men den er allerede definert`)}var u=l;Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return l}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return u}});