@oslokommune/punkt-elements/dist/listbox-CcThiNBY.cjs

Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo

const e=require(`./element-DjtxO-1r.cjs`),t=require(`./class-map-CJ-msbHs.cjs`),n=require(`./if-defined-XKOD_t_V.cjs`),r=require(`./repeat-DaDFvx86.cjs`),i=require(`./utils-CM67Oudc.cjs`);var a=(e,t)=>t&&(e.find(e=>e.value===t)||e.find(e=>e.label===t))||null,o=(e,t)=>{if(!t)return-1;let n=e.findIndex(e=>e.value===t);return n>=0?n:e.findIndex(e=>e.label===t)},s=(e,t)=>{if(!t)return[...e];let n=t.toLowerCase();return e.filter(e=>(e.fulltext||e.value+(e.label||``)+(e.prefix||``)).toLowerCase().includes(n))},c=e=>e.value+(e.label||``)+(e.prefix||``),l=(e,t)=>t!==null&&e>=t,u=(e,t)=>{if(!t)return{filtered:[...e],suggestion:null};let n=t.toLowerCase(),r=e.filter(e=>e.fulltext?.toLowerCase().includes(n));return{filtered:r,suggestion:r.find(e=>!e.selected&&e.label?.toLowerCase().startsWith(n))||null}},d=(e,t,n,r)=>{if(!e.trim())return{addValueText:null,userInfoMessage:``};let i=e.trim().toLowerCase(),a=t.find(e=>e.toLowerCase()===i),o=n.filter(e=>e.label?.toLowerCase().includes(i)||e.value.toLowerCase().includes(i)),s=o.find(e=>e.label?.toLowerCase()===i||e.value.toLowerCase()===i);return(o.length===0||!s)&&r?{addValueText:e,userInfoMessage:``}:o.length===0&&!r?{addValueText:null,userInfoMessage:`Ingen treff i søket`}:a?{addValueText:null,userInfoMessage:`Verdien er allerede valgt`}:{addValueText:null,userInfoMessage:``}},f=e=>/^[\p{L} ]$/u.test(e),p=(e=500)=>{let t=``,n;return{append:r=>(t+=r.toLowerCase(),n!==void 0&&clearTimeout(n),n=setTimeout(()=>{t=``},e),t),reset:()=>{t=``,n!==void 0&&(clearTimeout(n),n=void 0)},getBuffer:()=>t}},m=(e,t)=>{let n=t.toLowerCase();return e.findIndex(e=>e.textContent?.trim().toLowerCase().startsWith(n))},h=e=>{e.scrollIntoView({block:`nearest`}),window.setTimeout(()=>e.focus(),0)},g=e=>Array.from(e.querySelectorAll(`[role="option"]:not([data-disabled])`)||[]),_=e=>{let t=e.nextElementSibling;t&&h(t)},v=(e,t,n)=>{let r=e.previousElementSibling;if(e.dataset.index===`0`&&n){let e=t.querySelector(`[role="searchbox"]`);e&&h(e)}else r&&h(r)},y=e=>{let t=g(e);t[0]&&h(t[0])},b=e=>{let t=g(e),n=t[t.length-1];n&&h(n)},x=(e,t)=>{if(t.disabled)return;let n=g(e);if(t.allowUserInput&&t.customUserInput){let t=e.querySelector(`[data-type="new-option"]`);if(t){h(t);return}}let r=n.find(e=>e.dataset.selected===`true`);if(r){h(r);return}if(t.includeSearch&&!(document.activeElement instanceof HTMLInputElement)){let t=e.querySelector(`[role="searchbox"]`);if(t){window.setTimeout(()=>t.focus(),0);return}}n[0]&&h(n[0])},S=class extends e.t{constructor(...e){super(...e),this.id=i.n(),this.label=null,this.options=[],this.isOpen=!1,this.disabled=!1,this.includeSearch=!1,this.isMultiSelect=!1,this.allowUserInput=!1,this.maxIsReached=!1,this.customUserInput=null,this.searchPlaceholder=null,this.searchValue=null,this.maxLength=0,this.userMessage=null,this._selectedOptions=0,this.typeahead=p(),this._filteredOptions=[]}connectedCallback(){super.connectedCallback(),this.includeSearch&&!this.searchValue&&(this.searchValue=``),this.options.length>0&&this.filterOptions(),this.setAttribute(`tabindex`,`-1`),this.addEventListener(`focus`,this.focusFirstOrSelectedOption)}disconnectedCallback(){super.disconnectedCallback(),this.typeahead.reset()}updated(e){(e.has(`options`)||e.has(`searchValue`))&&this.filterOptions(),super.updated(e)}attributeChangedCallback(e,t,n){(e===`options`||e===`search-value`)&&this.filterOptions(),super.attributeChangedCallback(e,t,n)}get _hasOptions(){return this._filteredOptions.length>0||this.options.length>0}render(){return e.d`
      <div
        class=${t.t({"pkt-listbox":!0,"pkt-listbox__open":this.isOpen,"pkt-txt-16-light":!0})}
        role=${n.t(this._hasOptions?`listbox`:void 0)}
        aria-multiselectable=${n.t(this._hasOptions&&this.isMultiSelect?`true`:void 0)}
        aria-label=${n.t(this._hasOptions?this.label??void 0:void 0)}
      >
        <div class="pkt-listbox__banners">
          ${this.renderSearch()} ${this.renderMaximumReachedBanner()} ${this.renderUserMessage()}
          ${this.renderEmptyMessage()} ${this.renderNewOptionBanner()}
        </div>
        <ul class="pkt-listbox__options" role="presentation">
          ${this.renderList()}
        </ul>
      </div>
      <div aria-live="polite" class="pkt-visually-hidden">${this.userMessage}</div>
    `}renderCheckboxOrCheckIcon(t,n){return this.isMultiSelect?e.d`
          <input
            class="pkt-input-check__input-checkbox"
            type="checkbox"
            role="presentation"
            tabindex="-1"
            value=${t.value}
            @change=${e=>{e.stopPropagation()}}
            .checked=${t.selected}
            aria-labelledby=${this.id+`-option-label-`+n}
            ?disabled=${this.disabled||t.disabled||this.maxIsReached&&!t.selected}
          />
        `:t.selected?e.d`<pkt-icon name="check-big"></pkt-icon>`:e.l}renderEmptyMessage(){return this.options.length>0||this._filteredOptions.length>0||this.userMessage?e.l:e.d`<div class="pkt-listbox__banner pkt-listbox__banner--empty">
      <pkt-icon
        class="pkt-listbox__banner-icon"
        name="exclamation-mark-circle"
        size="large"
      ></pkt-icon>
      Tom liste
    </div>`}renderList(){return e.d`
      ${r.t(this._filteredOptions,e=>e.value,(n,r)=>e.d`
          <li
            @click=${()=>{this.toggleOption(n)}}
            aria-selected=${n.selected?`true`:`false`}
            @keydown=${this.handleOptionKeydown}
            class=${t.t({"pkt-listbox__option":!0,"pkt-listbox__option--selected":!!(!this.isMultiSelect&&n.selected),"pkt-listbox__option--checkBox":this.isMultiSelect})}
            tabindex="${this.disabled||n.disabled?`-1`:`0`}"
            data-index=${r}
            data-value=${n.value}
            data-selected=${n.selected?`true`:`false`}
            ?data-disabled=${this.disabled||n.disabled||this.maxIsReached&&!n.selected}
            aria-disabled=${this.disabled||n.disabled||this.maxIsReached&&!n.selected?`true`:`false`}
            role="option"
            id=${`${this.id}-${r}`}
          >
            ${this.renderCheckboxOrCheckIcon(n,r)}
            <span class="pkt-listbox__option-label" id=${this.id+`-option-label-`+r}>
              ${n.prefix?e.d`<span class="pkt-listbox__option-prefix">${n.prefix}</span>`:e.l}
              ${n.label||n.value}
            </span>
            ${n.description?e.d`<span class="pkt-listbox__option-description pkt-txt-14-light"
                  >${n.description}</span
                >`:e.l}
          </li>
        `)}
    `}renderNewOptionBanner(){return this.allowUserInput&&this.customUserInput?e.d`
          <div
            class="pkt-listbox__banner pkt-listbox__banner--new-option pkt-listbox__option"
            data-type="new-option"
            data-value=${this.customUserInput}
            data-selected="false"
            tabindex="0"
            @click=${()=>this.toggleOption({value:this.customUserInput||``})}
            @keydown=${this.handleOptionKeydown}
          >
            <pkt-icon class="pkt-listbox__banner-icon" name="plus-sign" size="large"></pkt-icon>
            Legg til "${this.customUserInput}"
          </div>
        `:e.l}renderMaximumReachedBanner(){return this._selectedOptions=this.options.filter(e=>e.selected).length,this.isMultiSelect&&this._selectedOptions>0&&this.maxLength>0?e.d`
          <div class="pkt-listbox__banner pkt-listbox__banner--maximum-reached">
            ${this._selectedOptions} av maks ${this.maxLength} mulige er valgt.
          </div>
        `:e.l}renderUserMessage(){return this.userMessage?e.d`<div class="pkt-listbox__banner pkt-listbox__banner--user-message">
          <pkt-icon
            class="pkt-listbox__banner-icon"
            name="exclamation-mark-circle"
            size="large"
          ></pkt-icon>
          ${this.userMessage}
        </div>`:e.l}renderSearch(){return this.includeSearch?e.d`
          <div class="pkt-listbox__search">
            <span class="pkt-listbox__search-icon">
              <pkt-icon name="magnifying-glass-small" size="large"></pkt-icon>
            </span>
            <input
              class="pkt-txt-16-light"
              type="text"
              aria-label="Søk i listen"
              form=""
              placeholder=${this.searchPlaceholder||e.i.forms.search.placeholder}
              @input=${this.handleSearchInput}
              @keydown=${this.handleSearchKeydown}
              .value=${this.searchValue}
              data-type="searchbox"
              ?disabled=${this.disabled}
              ?readonly=${this.disabled}
              role="searchbox"
            />
          </div>
        `:e.l}handleSearchInput(e){this.searchValue=e.target.value,this.dispatchEvent(new CustomEvent(`search`,{detail:this.searchValue,bubbles:!1}))}handleSearchKeydown(e){switch(e.key){case`Enter`:e.preventDefault();break;case`ArrowUp`:case`Escape`:this.closeOptions(),e.preventDefault();break;case`ArrowDown`:this.focusFirstOrSelectedOption();break;case`Tab`:this.tabClose();break}}handleOptionKeydown(e){let t=e.currentTarget,n=t.dataset.value,r=t.dataset.type,i=t.dataset.selected===`true`;if(!(!g(this).length&&(!this.customUserInput||!this.allowUserInput&&this.customUserInput)&&r!==`new-option`&&r!==`searchbox`))switch(e.key){case` `:case`Enter`:this.toggleOption(t),e.preventDefault();break;case`Backspace`:n&&(i?this.toggleOption(t):this.closeOptions()),e.preventDefault();break;case`Escape`:this.closeOptions(),e.preventDefault();break;case`Tab`:this.tabClose();break;case`ArrowDown`:e.altKey?b(this):r===`searchbox`||r===`new-option`?y(this):_(t),e.preventDefault();break;case`ArrowUp`:if(e.altKey)y(this);else if(t.dataset.index===`0`&&this.includeSearch){let e=this.querySelector(`[role="searchbox"]`);e&&e.focus()}else if(t.dataset.index===`0`&&this.customUserInput){let e=this.querySelector(`[data-type="new-option"]`);e&&e.focus()}else v(t,this,this.includeSearch);e.preventDefault();break;case`Home`:y(this),e.preventDefault();break;case`End`:b(this),e.preventDefault();break;default:(e.metaKey||e.ctrlKey)&&e.key===`a`&&(this.selectAll(),e.preventDefault()),f(e.key)&&(this.handleTypeAhead(e.key),e.preventDefault());break}}focusFirstOrSelectedOption(){x(this,{disabled:this.disabled,allowUserInput:this.allowUserInput,customUserInput:this.customUserInput,includeSearch:this.includeSearch})}toggleOption(e){let t=e instanceof HTMLElement?e.dataset.disabled:e.disabled;if(this.disabled||t)return;let n=e instanceof HTMLElement?e.dataset.value:e.value;this.dispatchEvent(new CustomEvent(`option-toggle`,{detail:n,bubbles:!1}))}selectAll(){this.dispatchEvent(new CustomEvent(`select-all`,{bubbles:!1}))}closeOptions(){this.dispatchEvent(new CustomEvent(`close-options`,{bubbles:!1}))}tabClose(){this.dispatchEvent(new CustomEvent(`tab-close`,{bubbles:!1}))}filterOptions(){this._filteredOptions=s(this.options,this.searchValue)}handleTypeAhead(e){let t=this.typeahead.append(e),n=g(this),r=m(n,t);r>=0&&h(n[r])}};e.r([e.s({type:String})],S.prototype,`id`,void 0),e.r([e.s({type:String})],S.prototype,`label`,void 0),e.r([e.s({type:Array})],S.prototype,`options`,void 0),e.r([e.s({type:Boolean,reflect:!0,attribute:`is-open`})],S.prototype,`isOpen`,void 0),e.r([e.s({type:Boolean})],S.prototype,`disabled`,void 0),e.r([e.s({type:Boolean,attribute:`include-search`})],S.prototype,`includeSearch`,void 0),e.r([e.s({type:Boolean,attribute:`is-multi-select`})],S.prototype,`isMultiSelect`,void 0),e.r([e.s({type:Boolean,attribute:`allow-user-input`})],S.prototype,`allowUserInput`,void 0),e.r([e.s({type:Boolean,attribute:`max-is-reached`})],S.prototype,`maxIsReached`,void 0),e.r([e.s({type:String,attribute:`custom-user-input`})],S.prototype,`customUserInput`,void 0),e.r([e.s({type:String,attribute:`search-placeholder`})],S.prototype,`searchPlaceholder`,void 0),e.r([e.s({type:String,attribute:`search-value`})],S.prototype,`searchValue`,void 0),e.r([e.s({type:Number,attribute:`max-length`})],S.prototype,`maxLength`,void 0),e.r([e.s({type:String,attribute:`user-message`})],S.prototype,`userMessage`,void 0),e.r([e.o()],S.prototype,`_filteredOptions`,void 0);try{e.c(`pkt-listbox`)(S)}catch{console.warn(`Forsøker å definere <pkt-listbox>, men den er allerede definert`)}var C=S;Object.defineProperty(exports,`a`,{enumerable:!0,get:function(){return o}}),Object.defineProperty(exports,`c`,{enumerable:!0,get:function(){return l}}),Object.defineProperty(exports,`i`,{enumerable:!0,get:function(){return a}}),Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return S}}),Object.defineProperty(exports,`o`,{enumerable:!0,get:function(){return u}}),Object.defineProperty(exports,`r`,{enumerable:!0,get:function(){return c}}),Object.defineProperty(exports,`s`,{enumerable:!0,get:function(){return d}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return C}});