@oslokommune/punkt-elements/dist/input-wrapper-CZ-a00V7.cjs

Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo

"use strict";const t=require("./element-6DBpyGQm.cjs"),g=require("./pkt-slot-controller-BzddBp7z.cjs"),u=require("./ref-iJtiv3o2.cjs"),b=require("./if-defined-Cni-RHLS.cjs"),x=require("./icon-B_ryAy4Q.cjs"),y=require("./class-map-BBG2gMX4.cjs"),$=require("./stringutils-CkVRq4jP.cjs"),s=require("./input-wrapper-EoSAbU-U.cjs");require("./helptext-CzQX6YVE.cjs");var I=Object.defineProperty,P=Object.getOwnPropertyDescriptor,e=(r,p,i,n)=>{for(var o=n>1?void 0:n?P(p,i):p,l=r.length-1,a;l>=0;l--)(a=r[l])&&(o=(n?a(p,i,o):a(o))||o);return n&&o&&I(p,i,o),o};const W={fromAttribute(r){return r==null?!1:r===""||r==="true"||r===!0?!0:r==="false"||r===!1?!1:!!r},toAttribute(r){return r?"true":"false"}};exports.PktInputWrapper=class extends t.PktElement{constructor(){super(),this.defaultSlot=u.e(),this.helptextSlot=u.e(),this.forId=$.uuidish(),this.label="",this.helptext=null,this.helptextDropdown=null,this.helptextDropdownButton=null,this.counter=s.specs.props.counter.default,this.counterCurrent=0,this.counterMaxLength=0,this.counterError=null,this.counterPosition="bottom",this.optionalTag=s.specs.props.optionalTag.default,this.optionalText=s.specs.props.optionalText.default,this.requiredTag=s.specs.props.requiredTag.default,this.requiredText=s.specs.props.requiredText.default,this.tagText=null,this.hasError=s.specs.props.hasError.default,this.errorMessage="",this.disabled=s.specs.props.disabled.default,this.inline=s.specs.props.inline.default,this.ariaDescribedby=void 0,this.hasFieldset=s.specs.props.hasFieldset.default,this.role="group",this.useWrapper=s.specs.props.useWrapper.default,this.slotController=new g.PktSlotController(this,this.defaultSlot,this.helptextSlot)}updated(p){super.updated(p)}render(){const p={"pkt-inputwrapper":!0,"pkt-inputwrapper--error":this.hasError,"pkt-inputwrapper--disabled":this.disabled,"pkt-inputwrapper--inline":this.inline},i="pkt-tag pkt-tag--small pkt-tag--thin-text",n=this.ariaDescribedby?this.ariaDescribedby:this.helptext?`${this.forId}-helptext`:t.E,o=()=>t.x`
        ${this.tagText?t.x`<span class=${i+" pkt-tag--gray"}>${this.tagText}</span>`:t.E}
        ${this.optionalTag?t.x`<span class=${i+" pkt-tag--blue-light"}>${this.optionalText}</span>`:t.E}
        ${this.requiredTag?t.x`<span class=${i+" pkt-tag--beige"}>${this.requiredText}</span>`:t.E}
      `,l=()=>this.useWrapper?this.hasFieldset?t.x`<legend
            class="pkt-inputwrapper__legend"
            id="${this.forId}-label"
            @click=${this.handleLabelClick}
          >
            ${this.label} ${o()}
          </legend>`:t.x`<label
            class="pkt-inputwrapper__label"
            for="${this.forId}"
            aria-describedby="${n}"
            id="${this.forId}-label"
            @click=${this.handleLabelClick}
            >${this.label}${o()}</label
          >`:t.x`<label
          for="${this.forId}"
          class="pkt-sr-only"
          aria-describedby="${n}"
          id="${this.forId}-label"
        >
          ${this.label}
        </label>`,a=()=>t.x`
        <pkt-helptext
          class="${b.o(this.useWrapper?void 0:"pkt-hide")}"
          .forId=${this.forId}
          .helptext=${this.helptext}
          .helptextDropdown=${this.helptextDropdown}
          .helptextDropdownButton=${this.helptextDropdownButton||s.specs.props.helptextDropdownButton.default}
          @toggleHelpText=${f=>{this.toggleDropdown(f)}}
          ${u.n(this.helptextSlot)}
          name="helptext"
        ></pkt-helptext>
      `,h=()=>this.counter?t.x`<div class="pkt-input__counter" aria-live="polite" aria-atomic="true">
          ${this.counterError?this.counterError:t.E} ${this.counterCurrent||0}
          ${this.counterMaxLength?`/${this.counterMaxLength}`:t.E}
        </div>`:t.E,c=()=>this.hasError&&this.errorMessage?t.x`<div
          role="alert"
          class="pkt-alert pkt-alert--error pkt-alert--compact"
          aria-live="assertive"
          aria-atomic="true"
          id="${this.forId}-error"
        >
          <pkt-icon name="alert-error" class="pkt-alert__icon"></pkt-icon>
          <div class="pkt-alert__text">${x.o(this.errorMessage)}</div>
        </div>`:t.E,d=()=>t.x`
        ${l()} 
        ${a()}
        ${this.counterPosition==="top"?h():t.E}
        <div class="pkt-contents" ${u.n(this.defaultSlot)}></div>
        ${this.counterPosition==="bottom"?h():t.E} 
        ${c()}
      `,k=()=>this.hasFieldset?t.x`<fieldset class="pkt-inputwrapper__fieldset" aria-describedby="${n}">
            ${d()}
          </fieldset>`:t.x`<div class="pkt-inputwrapper__fieldset">${d()}</div>`;return t.x`<div class=${y.e(p)}>${k()}</div> `}toggleDropdown(p){this.dispatchEvent(new CustomEvent("toggleHelpText",{bubbles:!1,detail:{isOpen:p.detail.isOpen}}))}handleLabelClick(p){this.disabled&&(p.preventDefault(),p.stopImmediatePropagation()),this.dispatchEvent(new CustomEvent("labelClick",{bubbles:!0,composed:!0,detail:"label clicked"}))}};e([t.n({type:String})],exports.PktInputWrapper.prototype,"forId",2);e([t.n({type:String})],exports.PktInputWrapper.prototype,"label",2);e([t.n({type:String})],exports.PktInputWrapper.prototype,"helptext",2);e([t.n({type:String})],exports.PktInputWrapper.prototype,"helptextDropdown",2);e([t.n({type:String})],exports.PktInputWrapper.prototype,"helptextDropdownButton",2);e([t.n({type:Boolean})],exports.PktInputWrapper.prototype,"counter",2);e([t.n({type:Number})],exports.PktInputWrapper.prototype,"counterCurrent",2);e([t.n({type:Number})],exports.PktInputWrapper.prototype,"counterMaxLength",2);e([t.n({type:String})],exports.PktInputWrapper.prototype,"counterError",2);e([t.n({type:String,reflect:!1})],exports.PktInputWrapper.prototype,"counterPosition",2);e([t.n({type:Boolean})],exports.PktInputWrapper.prototype,"optionalTag",2);e([t.n({type:String})],exports.PktInputWrapper.prototype,"optionalText",2);e([t.n({type:Boolean})],exports.PktInputWrapper.prototype,"requiredTag",2);e([t.n({type:String})],exports.PktInputWrapper.prototype,"requiredText",2);e([t.n({type:String})],exports.PktInputWrapper.prototype,"tagText",2);e([t.n({type:Boolean})],exports.PktInputWrapper.prototype,"hasError",2);e([t.n({type:String})],exports.PktInputWrapper.prototype,"errorMessage",2);e([t.n({type:Boolean})],exports.PktInputWrapper.prototype,"disabled",2);e([t.n({type:Boolean})],exports.PktInputWrapper.prototype,"inline",2);e([t.n({type:String})],exports.PktInputWrapper.prototype,"ariaDescribedby",2);e([t.n({type:Boolean})],exports.PktInputWrapper.prototype,"hasFieldset",2);e([t.n({type:String,reflect:!0})],exports.PktInputWrapper.prototype,"role",2);e([t.n({type:Boolean,reflect:!0,converter:W})],exports.PktInputWrapper.prototype,"useWrapper",2);exports.PktInputWrapper=e([t.t("pkt-input-wrapper")],exports.PktInputWrapper);