@oslokommune/punkt-elements
Version:
Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo
70 lines • 5.17 kB
JavaScript
const e=require(`./element-DjtxO-1r.cjs`),t=require(`./class-map-CJ-msbHs.cjs`),n=require(`./element-with-slot-CWoTGA1B.cjs`);require(`./icon-Dr8sfT2X.cjs`);const r=require(`./if-defined-XKOD_t_V.cjs`),i=require(`./ref-BaJ0mBT_.cjs`),a=require(`./input-element-D0egtEnr.cjs`);require(`./input-wrapper-DOIWggEv.cjs`);var o=class extends a.t{constructor(...e){super(...e),this.inputRef=i.t(),this.value=``,this.type=`text`,this.size=null,this.autocomplete=null,this.iconNameRight=null,this.prefix=null,this.suffix=null,this.omitSearchIcon=!1,this.counterCurrent=0}attributeChangedCallback(e,t,n){e===`value`&&this.value!==t&&(this.counterCurrent=n?n.length:0,this.valueChanged(n,t)),super.attributeChangedCallback(e,t,n)}updated(e){super.updated(e),e.has(`value`)&&(this.counterCurrent=this.value?.length||0,this.valueChanged(this.value,e.get(`value`))),e.has(`id`)&&!this.name&&this.id&&(this.name=this.id)}render(){let a=this.type===`search`&&!this.iconNameRight&&!this.omitSearchIcon,o=t.t({"pkt-input":!0,"pkt-input--fullwidth":this.fullwidth,"pkt-input--counter-error":this.counter&&this.counterMaxLength&&this.value.length&&this.value.length>this.counterMaxLength}),s=this.ariaLabelledby||`${this.id}-input-label`;return e.d`
<pkt-input-wrapper
label="${this.label}"
?counter=${this.counter}
?disabled=${this.disabled}
?hasError=${this.hasError}
?hasFieldset=${this.hasFieldset}
?inline=${this.inline}
?optionalTag=${this.optionalTag}
?required=${this.required}
?requiredTag=${this.requiredTag}
useWrapper=${this.useWrapper}
.ariaDescribedBy=${this.ariaDescribedBy}
.counterCurrent=${this.counterCurrent}
.counterMaxLength=${this.counterMaxLength}
.errorMessage=${this.errorMessage}
.forId="${this.id+`-input`}"
.helptext=${this.helptext}
.helptextDropdown=${this.helptextDropdown}
.helptextDropdownButton=${this.helptextDropdownButton}
.optionalText=${this.optionalText}
.requiredText=${this.requiredText}
.tagText=${this.tagText}
class="pkt-textinput"
>
<div class="pkt-contents" slot="helptext">${n.n(this,`helptext`)}</div>
<div class="pkt-input__container">
${this.prefix?e.d`<div class="pkt-input-prefix">${this.prefix}</div>`:e.l}
<input
${i.n(this.inputRef)}
class=${o}
type=${this.type}
name=${(this.name||this.id)+`-input`}
id=${this.id+`-input`}
placeholder=${r.t(this.placeholder)}
aria-labelledby=${s}
autocomplete=${this.autocomplete||`off`}
minlength=${r.t(this.minlength||void 0)}
maxlength=${r.t(this.maxlength||void 0)}
min=${r.t(this.min||void 0)}
max=${r.t(this.max||void 0)}
step=${r.t(this.step||void 0)}
?readonly=${this.readonly}
size=${this.size||e.l}
.value=${this.value}
?disabled=${this.disabled}
aria-invalid=${this.hasError}
aria-errormessage=${`${this.id}-error`}
=${e=>{this.value=e.target.value,this.onInput(),e.stopImmediatePropagation()}}
=${e=>{e.stopImmediatePropagation()}}
=${e=>{this.onFocus(),e.stopImmediatePropagation()}}
=${e=>{this.value=e.target.value,this.onBlur(),e.stopImmediatePropagation()}}
=${e=>{if(e.key===`Enter`){let e=this.internals.form;e?e.requestSubmit():this.inputRef.value?.blur()}}}
/>
${this.suffix?e.d`<div class="pkt-input-suffix">
${this.suffix}
${this.iconNameRight?e.d`<pkt-icon
class="pkt-input-suffix-icon"
name=${this.iconNameRight}
></pkt-icon>`:e.l}
${a?e.d`<pkt-icon
class="pkt-input-suffix-icon"
name="magnifying-glass-big"
></pkt-icon>`:e.l}
</div>`:e.l}
${!this.suffix&&this.iconNameRight?e.d`<pkt-icon class="pkt-input-icon" name=${this.iconNameRight}></pkt-icon>`:e.l}
${!this.suffix&&a?e.d`<pkt-icon class="pkt-input-icon" name="magnifying-glass-big"></pkt-icon>`:e.l}
</div>
</pkt-input-wrapper>
`}};e.r([e.s({type:String,reflect:!0})],o.prototype,`value`,void 0),e.r([e.s({type:String})],o.prototype,`type`,void 0),e.r([e.s({type:Number})],o.prototype,`size`,void 0),e.r([e.s({type:String})],o.prototype,`autocomplete`,void 0),e.r([e.s({type:String})],o.prototype,`iconNameRight`,void 0),e.r([e.s({type:String})],o.prototype,`prefix`,void 0),e.r([e.s({type:String})],o.prototype,`suffix`,void 0),e.r([e.s({type:Boolean})],o.prototype,`omitSearchIcon`,void 0),e.r([e.o()],o.prototype,`counterCurrent`,void 0);try{e.c(`pkt-textinput`)(o)}catch{console.warn(`Forsøker å definere <pkt-textinput>, men den er allerede definert`)}var s=o;Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return o}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return s}});