@oslokommune/punkt-elements/dist/textinput-aNI5kibM.cjs

Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo

"use strict";const t=require("./element-6DBpyGQm.cjs"),a=require("./if-defined-Cni-RHLS.cjs"),l=require("./state-DPobt-Yz.cjs"),h=require("./ref-iJtiv3o2.cjs"),c=require("./class-map-BBG2gMX4.cjs"),d=require("./input-element-C4xJoM-X.cjs"),x=require("./pkt-slot-controller-BzddBp7z.cjs");require("./input-wrapper-CZ-a00V7.cjs");require("./icon-B_ryAy4Q.cjs");var $=Object.defineProperty,f=Object.getOwnPropertyDescriptor,r=(u,i,s,n)=>{for(var e=n>1?void 0:n?f(i,s):i,o=u.length-1,p;o>=0;o--)(p=u[o])&&(e=(n?p(i,s,e):p(e))||e);return n&&e&&$(i,s,e),e};exports.PktTextinput=class extends d.PktInputElement{constructor(){super(),this.inputRef=h.e(),this.helptextSlot=h.e(),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,this.slotController=new x.PktSlotController(this,this.helptextSlot)}attributeChangedCallback(i,s,n){i==="value"&&this.value!==s&&(this.counterCurrent=n?n.length:0,this.valueChanged(n,s)),super.attributeChangedCallback(i,s,n)}updated(i){var s;super.updated(i),i.has("value")&&(this.counterCurrent=((s=this.value)==null?void 0:s.length)||0,this.valueChanged(this.value,i.get("value"))),i.has("id")&&!this.name&&this.id&&(this.name=this.id)}render(){const i=this.type==="search"&&!this.iconNameRight&&!this.omitSearchIcon,s=c.e({"pkt-input":!0,"pkt-input--fullwidth":this.fullwidth,"pkt-input--counter-error":this.counter&&this.counterMaxLength&&this.value.length&&this.value.length>this.counterMaxLength}),n=this.ariaLabelledby||`${this.id}-input-label`;return t.x`
      <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" ${h.n(this.helptextSlot)} name="helptext" slot="helptext"></div>
        <div class="pkt-input__container">
          ${this.prefix?t.x`<div class="pkt-input-prefix">${this.prefix}</div>`:t.E}
          <input
            ${h.n(this.inputRef)}
            class=${s}
            type=${this.type}
            name=${(this.name||this.id)+"-input"}
            id=${this.id+"-input"}
            placeholder=${a.o(this.placeholder)}
            aria-labelledby=${n}
            autocomplete=${this.autocomplete||"off"}
            minlength=${a.o(this.minlength||void 0)}
            maxlength=${a.o(this.maxlength||void 0)}
            min=${a.o(this.min||void 0)}
            max=${a.o(this.max||void 0)}
            step=${a.o(this.step||void 0)}
            ?readonly=${this.readonly}
            size=${this.size||t.E}
            .value=${this.value}
            ?disabled=${this.disabled}
            aria-invalid=${this.hasError}
            aria-errormessage=${`${this.id}-error`}
            @input=${e=>{this.value=e.target.value,this.onInput(),e.stopImmediatePropagation()}}
            @change=${e=>{e.stopImmediatePropagation()}}
            @focus=${e=>{this.onFocus(),e.stopImmediatePropagation()}}
            @blur=${e=>{this.value=e.target.value,this.onBlur(),e.stopImmediatePropagation()}}
            @keydown=${e=>{var o;if(e.key==="Enter"){const p=this.internals.form;p?p.requestSubmit():(o=this.inputRef.value)==null||o.blur()}}}
          />
          ${this.suffix?t.x`<div class="pkt-input-suffix">
                ${this.suffix}
                ${this.iconNameRight?t.x`<pkt-icon
                      class="pkt-input-suffix-icon"
                      name=${this.iconNameRight}
                    ></pkt-icon>`:t.E}
                ${i?t.x`<pkt-icon
                      class="pkt-input-suffix-icon"
                      name="magnifying-glass-big"
                    ></pkt-icon>`:t.E}
              </div>`:t.E}
          ${!this.suffix&&this.iconNameRight?t.x`<pkt-icon class="pkt-input-icon" name=${this.iconNameRight}></pkt-icon>`:t.E}
          ${!this.suffix&&i?t.x`<pkt-icon class="pkt-input-icon" name="magnifying-glass-big"></pkt-icon>`:t.E}
        </div>
      </pkt-input-wrapper>
    `}};r([t.n({type:String,reflect:!0})],exports.PktTextinput.prototype,"value",2);r([t.n({type:String})],exports.PktTextinput.prototype,"type",2);r([t.n({type:Number})],exports.PktTextinput.prototype,"size",2);r([t.n({type:String})],exports.PktTextinput.prototype,"autocomplete",2);r([t.n({type:String})],exports.PktTextinput.prototype,"iconNameRight",2);r([t.n({type:String})],exports.PktTextinput.prototype,"prefix",2);r([t.n({type:String})],exports.PktTextinput.prototype,"suffix",2);r([t.n({type:Boolean})],exports.PktTextinput.prototype,"omitSearchIcon",2);r([l.r()],exports.PktTextinput.prototype,"counterCurrent",2);exports.PktTextinput=r([t.t("pkt-textinput")],exports.PktTextinput);