@oslokommune/punkt-elements/dist/select-DO0xGhQQ.cjs

Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo

const e=require(`./element-DjtxO-1r.cjs`),t=require(`./element-with-slot-CWoTGA1B.cjs`),n=require(`./if-defined-XKOD_t_V.cjs`),r=require(`./ref-BaJ0mBT_.cjs`),i=require(`./input-element-D0egtEnr.cjs`),a=require(`./pkt-options-controller-CeAQ-D-i.cjs`);require(`./input-wrapper-DOIWggEv.cjs`);var o=class extends i.t{constructor(...e){super(...e),this._optionsProp=[],this._options=[]}get options(){return this._options.map(e=>({...e,selected:this.isOptionSelected(e)}))}set options(e){this._optionsProp=e,this.requestUpdate(`_optionsProp`,this._options)}isOptionSelected(e){return Array.isArray(this.value)?this.value.includes(e.value):e.value===this.value}findOptionByValue(e){return this._options.find(t=>t.value===e)}getSelectedOptions(){return this._options.filter(e=>this.isOptionSelected(e))}parseOptions(){let e=this._optionsProp.length>0,t=this.optionsController?.nodes?.length&&this.optionsController.nodes.length>0;e?this._options=this._optionsProp:t&&(this._options=this.optionsController.options)}willUpdate(e){super.willUpdate(e),this.parseOptions()}};e.r([e.s({type:Array,attribute:`options`})],o.prototype,`_optionsProp`,void 0),e.r([e.o()],o.prototype,`_options`,void 0);var s=class extends o{constructor(){super(),this.inputRef=r.t(),this.value=``,this.selectedIndex=-1,this.selectedOptions=void 0,this.optionsController=new a.t(this)}connectedCallback(){super.connectedCallback(),this.parseOptions(),this._options.forEach(e=>{e.selected&&!this.value&&(this.value=e.value)})}add(e,t){let n={value:e.value||e.text,label:e.text||e.value,selected:e.selected,disabled:e.disabled};if(t===void 0)this._options.push(n);else if(typeof t==`number`)this._options.splice(t,0,n);else{let e=t.value||t.text,r=this._options.findIndex(t=>t.value===e);r>=0?this._options.splice(r,0,n):this._options.push(n)}e.selected&&(this.value=e.value||e.text,this.selectedIndex=this._options.findIndex(e=>e.value===this.value)),this.requestUpdate()}remove(e){typeof e==`number`&&(this.selectedIndex===e&&(this.value=this._options[0]?.value||``),this._options.splice(e,1),this.requestUpdate())}item(e){return this.inputRef.value?.item(e)}namedItem(e){return this.inputRef.value?.namedItem(e)}showPicker(){this.inputRef.value&&`showPicker`in this.inputRef.value&&this.inputRef.value.showPicker()}attributeChangedCallback(e,t,n){e===`options`&&(this._options=n?JSON.parse(n):[]),e===`value`&&this.value!==t&&(this.selectedIndex=this.touched?this.returnNumberOrNull(this.inputRef.value?.selectedIndex):this._options.findIndex(e=>e.value===n),this.selectedOptions=this.inputRef.value?.selectedOptions,this.valueChanged(n,t)),super.attributeChangedCallback(e,t,n)}update(e){super.update(e),e.has(`_optionsProp`)&&this._optionsProp.length>0&&(this._options=this._optionsProp,this.requestUpdate(`_options`),!this.value&&this._options.length>0&&(this.value=this._options[0].value,this.selectedIndex=0)),e.has(`value`)&&this.value!==e.get(`value`)&&(this.selectedIndex=this.touched?this.returnNumberOrNull(this.inputRef.value?.selectedIndex):this._options.findIndex(e=>e.value===this.value),this.selectedOptions=this.inputRef.value?.selectedOptions,this.valueChanged(this.value,e.get(`value`))),e.has(`id`)&&!this.name&&this.id&&(this.name=this.id)}firstUpdated(e){super.firstUpdated(e),this._optionsProp.length&&(this._options=this._optionsProp),!this.value&&this._options.length>0?(this.value=this._options[0].value,this.selectedIndex=0):this.selectedIndex=this._options.findIndex(e=>e.value===this.value),this.selectedOptions=this.inputRef.value?.selectedOptions}render(){let i=`pkt-input ${this.fullwidth?`pkt-input--fullwidth`:``}`;return e.d`
      <pkt-input-wrapper
        ?counter=${this.counter}
        ?disabled=${this.disabled}
        ?hasError=${this.hasError}
        ?hasFieldset=${this.hasFieldset}
        ?inline=${this.inline}
        ?optionalTag=${this.optionalTag}
        ?requiredTag=${this.requiredTag}
        useWrapper=${this.useWrapper}
        ariaDescribedBy=${n.t(this.ariaDescribedBy)}
        class="pkt-select"
        errorMessage=${n.t(this.errorMessage)}
        forId=${this.id+`-input`}
        helptext=${n.t(this.helptext)}
        helptextDropdown=${n.t(this.helptextDropdown)}
        helptextDropdownButton=${n.t(this.helptextDropdownButton)}
        label=${n.t(this.label)}
        optionalText=${n.t(this.optionalText)}
        requiredText=${n.t(this.requiredText)}
        tagText=${n.t(this.tagText)}
      >
        <select
          class=${i}
          aria-invalid=${this.hasError}
          aria-errormessage=${`${this.id}-error`}
          aria-labelledby=${n.t(this.ariaLabelledby)}
          ?disabled=${this.disabled}
          id=${this.id+`-input`}
          name=${(this.name||this.id)+`-input`}
          value=${this.value}
          @change=${e=>{this.touched=!0,this.value=e.target.value,e.stopImmediatePropagation()}}
          @input=${e=>{this.onInput(),e.stopImmediatePropagation()}}
          @focus=${e=>{this.onFocus(),e.stopImmediatePropagation()}}
          @blur=${e=>{this.onBlur(),e.stopImmediatePropagation()}}
          ${r.n(this.inputRef)}
        >
          ${this._options.length>0?this._options.map(t=>e.d`<option
                    value=${t.value}
                    ?selected=${this.value==t.value||t.selected}
                    ?disabled=${t.disabled}
                    ?hidden=${t.hidden}
                  >
                    ${t.label}
                  </option>`):``}
        </select>
        <div class="pkt-contents" slot="helptext">${t.n(this,`helptext`)}</div>
      </pkt-input-wrapper>
    `}returnNumberOrNull(e){return e==null||isNaN(e)?null:e}};e.r([e.s({type:String})],s.prototype,`value`,void 0);try{e.c(`pkt-select`)(s)}catch{console.warn(`Forsøker å definere <pkt-select>, men den er allerede definert`)}var c=s;Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return s}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return c}});