@oslokommune/punkt-elements/dist/searchinput-BVIaoetB.cjs

Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo

const e=require(`./element-DjtxO-1r.cjs`),t=require(`./class-map-CJ-msbHs.cjs`);require(`./icon-Dr8sfT2X.cjs`);const n=require(`./if-defined-XKOD_t_V.cjs`),r=require(`./focus-modality-controller-BSZAQk8y.cjs`);var i=class extends e.t{constructor(...e){super(...e),this.appearance=`local`,this.disabled=!1,this.fullwidth=!1,this.id=``,this.placeholder=`Søk…`,this.value=``,this.focusModality=new r.t(this,`.pkt-searchinput`)}get suggestionsId(){return`${this.id}-suggestions`}dispatchSearch(){this.dispatchEvent(new CustomEvent(`pkt-search`,{detail:{value:this.value},bubbles:!0,composed:!0}))}onInput(e){this.value=e.target.value}onInputKeydown(e){e.key===`Enter`&&(e.preventDefault(),this.dispatchSearch())}onSearchClick(e){e.preventDefault(),this.dispatchSearch()}onSuggestionClick(e,t,n){let r=new CustomEvent(`pkt-suggestion-click`,{detail:{index:n,suggestion:t},bubbles:!0,composed:!0,cancelable:!0});this.dispatchEvent(r)||e.preventDefault()}renderSuggestion(t,n){let r=e.d`
      ${t.title?e.d`<h3 class="pkt-searchinput__suggestion-title">${t.title}</h3>`:e.l}
      ${t.text?e.d`<p class="pkt-searchinput__suggestion-text">${t.text}</p>`:e.l}
    `;return t.href?e.d`<a
        href=${t.href}
        class="pkt-searchinput__suggestion"
        @click=${e=>this.onSuggestionClick(e,t,n)}
      >
        ${r}
      </a>`:t.nonInteractive?e.d`<div class="pkt-searchinput__suggestion">${r}</div>`:e.d`<button
      type="button"
      class="pkt-searchinput__suggestion"
      @click=${e=>this.onSuggestionClick(e,t,n)}
    >
      ${r}
    </button>`}render(){let r=t.t({"pkt-searchinput":!0,[`pkt-searchinput--${this.appearance}`]:!0,"pkt-searchinput--fullwidth":this.fullwidth}),i=t.t({"pkt-searchinput__button":!0,"pkt-input-icon":this.appearance===`local`,"pkt-btn":!0,"pkt-btn--medium":!0,"pkt-btn--icon-only":!0,"pkt-btn--tertiary":this.appearance===`local`,"pkt-btn--primary":this.appearance===`global`||this.appearance===`local-with-button`,"pkt-btn--yellow":this.appearance===`global`}),a=t.t({"pkt-input":!0,"pkt-input--fullwidth":this.fullwidth}),o=this.appearance===`local`?`pkt-input__container`:`pkt-searchinput__field`,s=e.d`
      ${this.label?e.d`<label for=${n.t(this.id||void 0)} class="pkt-inputwrapper__label"
            >${this.label}</label
          >`:e.l}
      <div class=${o}>
        <input
          class=${a}
          type="search"
          name=${this.name||this.id}
          id=${this.id}
          placeholder=${this.placeholder||`Søk…`}
          .value=${this.value}
          ?disabled=${this.disabled}
          autocomplete="off"
          aria-autocomplete="list"
          aria-controls=${this.suggestionsId}
          @input=${this.onInput}
          @keydown=${this.onInputKeydown}
        />
        <button
          type="submit"
          class=${i}
          ?disabled=${this.disabled}
          @click=${this.onSearchClick}
        >
          <pkt-icon class="pkt-btn__icon" name="magnifying-glass-big" />
          <span class="pkt-btn__text">${this.label||this.placeholder||`Søk…`}</span>
        </button>
      </div>
      ${this.suggestions?e.d`<ul
            id=${this.suggestionsId}
            class="pkt-searchinput__suggestions"
            aria-live="assertive"
          >
            ${this.suggestions.map((t,n)=>e.d` <li>${this.renderSuggestion(t,n)}</li> `)}
          </ul>`:e.l}
    `;return this.action?e.d`<form
        role="search"
        class=${r}
        action=${this.action}
        method=${n.t(this.method)}
        @submit=${e=>{e.preventDefault()}}
      >
        ${s}
      </form>`:e.d`<div role="search" class=${r}>${s}</div>`}};e.r([e.s({type:String})],i.prototype,`appearance`,void 0),e.r([e.s({type:Boolean,reflect:!0})],i.prototype,`disabled`,void 0),e.r([e.s({type:Boolean,reflect:!0})],i.prototype,`fullwidth`,void 0),e.r([e.s({type:String,reflect:!0})],i.prototype,`id`,void 0),e.r([e.s({type:String})],i.prototype,`label`,void 0),e.r([e.s({type:String})],i.prototype,`name`,void 0),e.r([e.s({type:String})],i.prototype,`placeholder`,void 0),e.r([e.s({type:String})],i.prototype,`value`,void 0),e.r([e.s({type:Array})],i.prototype,`suggestions`,void 0),e.r([e.s({type:String})],i.prototype,`action`,void 0),e.r([e.s({type:String})],i.prototype,`method`,void 0);try{e.c(`pkt-searchinput`)(i)}catch{console.warn(`Forsøker å definere <pkt-searchinput>, men den er allerede definert`)}var a=i;Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return i}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return a}});