@oslokommune/punkt-elements
Version:
Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo
50 lines (49 loc) • 5.76 kB
JavaScript
"use strict";const r=require("./element-6DBpyGQm.cjs"),p=require("./state-DPobt-Yz.cjs"),h=require("./ref-iJtiv3o2.cjs"),l=require("./if-defined-Cni-RHLS.cjs"),d=require("./input-element-C4xJoM-X.cjs"),c=require("./pkt-options-controller-CiuBG6Lt.cjs"),v=require("./pkt-slot-controller-BzddBp7z.cjs");require("./input-wrapper-CZ-a00V7.cjs");var f=Object.defineProperty,b=Object.getOwnPropertyDescriptor,a=(u,t,e,s)=>{for(var i=s>1?void 0:s?b(t,e):t,o=u.length-1,n;o>=0;o--)(n=u[o])&&(i=(s?n(t,e,i):n(i))||i);return s&&i&&f(t,e,i),i};exports.PktSelect=class extends d.PktInputElement{constructor(){super(),this.inputRef=h.e(),this.helptextSlot=h.e(),this.options=[],this.value="",this._options=[],this.selectedIndex=-1,this.selectedOptions=void 0,this.optionsController=new c.PktOptionsSlotController(this),this.slotController=new v.PktSlotController(this,this.helptextSlot),this.slotController.skipOptions=!0}connectedCallback(){super.connectedCallback();const t=this.options.length>0,e=this.optionsController.nodes.length&&this.optionsController.nodes.length>0;!t&&e?this.optionsController.nodes.forEach(s=>{const i={value:s.hasAttribute("value")?s.getAttribute("value")??"":s.textContent??"",label:s.textContent||s.getAttribute("value")||"",disabled:s.hasAttribute("disabled"),hidden:s.hasAttribute("data-hidden")};s.getAttribute("selected")&&!this.value&&(this.value=i.value),this._options.push(i)}):(this._options=this.options,this._options.forEach(s=>{s.selected&&!this.value&&(this.value=s.value)}))}add(t,e){var s,i,o;(s=this.inputRef.value)==null||s.add(t,e),this._options.push({value:t.value||t.text,label:t.text||t.value,selected:t.selected,disabled:t.disabled}),t.selected&&(this.value=t.value||t.text,this.selectedIndex=this.returnNumberOrNull((i=this.inputRef.value)==null?void 0:i.selectedIndex),this.selectedOptions=(o=this.inputRef.value)==null?void 0:o.selectedOptions),this.requestUpdate()}remove(t){var e,s;typeof t=="number"&&(this.selectedIndex===t&&(this.value=((e=this._options[0])==null?void 0:e.value)||""),(s=this.inputRef.value)==null||s.remove(t))}item(t){var e;return(e=this.inputRef.value)==null?void 0:e.item(t)}namedItem(t){var e;return(e=this.inputRef.value)==null?void 0:e.namedItem(t)}showPicker(){var t;(t=this.inputRef.value)==null||t.showPicker()}attributeChangedCallback(t,e,s){var i,o;t==="options"&&(this._options=s?JSON.parse(s):[]),t==="value"&&this.value!==e&&(this.selectedIndex=this.touched?this.returnNumberOrNull((i=this.inputRef.value)==null?void 0:i.selectedIndex):this.options.findIndex(n=>n.value===s),this.selectedOptions=(o=this.inputRef.value)==null?void 0:o.selectedOptions,this.valueChanged(s,e)),super.attributeChangedCallback(t,e,s)}update(t){var e,s;super.update(t),t.has("value")&&this.value!==t.get("value")&&(this.selectedIndex=this.touched?this.returnNumberOrNull((e=this.inputRef.value)==null?void 0:e.selectedIndex):this.options.findIndex(i=>i.value===this.value),this.selectedOptions=(s=this.inputRef.value)==null?void 0:s.selectedOptions,this.valueChanged(this.value,t.get("value"))),t.has("id")&&!this.name&&this.id&&(this.name=this.id)}firstUpdated(t){var e;super.firstUpdated(t),this.options.length&&(this._options=this.options),!this.value&&this._options.length>0?(this.value=this._options[0].value,this.selectedIndex=0):this.selectedIndex=this._options.findIndex(s=>s.value===this.value),this.selectedOptions=(e=this.inputRef.value)==null?void 0:e.selectedOptions}render(){const t=`pkt-input ${this.fullwidth?"pkt-input--fullwidth":""}`;return r.x`
<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=${l.o(this.ariaDescribedBy)}
class="pkt-select"
errorMessage=${l.o(this.errorMessage)}
forId=${this.id+"-input"}
helptext=${l.o(this.helptext)}
helptextDropdown=${l.o(this.helptextDropdown)}
helptextDropdownButton=${l.o(this.helptextDropdownButton)}
label=${l.o(this.label)}
optionalText=${l.o(this.optionalText)}
requiredText=${l.o(this.requiredText)}
tagText=${l.o(this.tagText)}
>
<select
class=${t}
aria-invalid=${this.hasError}
aria-errormessage=${`${this.id}-error`}
aria-labelledby=${l.o(this.ariaLabelledby)}
?disabled=${this.disabled}
id=${this.id+"-input"}
name=${(this.name||this.id)+"-input"}
value=${this.value}
=${e=>{this.touched=!0,this.value=e.target.value,e.stopImmediatePropagation()}}
=${e=>{this.onInput(),e.stopImmediatePropagation()}}
=${e=>{this.onFocus(),e.stopImmediatePropagation()}}
=${e=>{this.onBlur(),e.stopImmediatePropagation()}}
${h.n(this.inputRef)}
>
${this._options.length>0&&this._options.map(e=>r.x`<option
value=${e.value}
?selected=${this.value==e.value||e.selected}
?disabled=${e.disabled}
?hidden=${e.hidden}
>
${e.label}
</option>`)}
</select>
<div class="pkt-contents" ${h.n(this.helptextSlot)} name="helptext" slot="helptext"></div>
</pkt-input-wrapper>
`}returnNumberOrNull(t){return t==null||isNaN(t)?null:t}};a([r.n({type:Array})],exports.PktSelect.prototype,"options",2);a([r.n({type:String})],exports.PktSelect.prototype,"value",2);a([p.r()],exports.PktSelect.prototype,"_options",2);exports.PktSelect=a([r.t("pkt-select")],exports.PktSelect);