@smileid/web-components 11.0.3 → 11.1.0

package/dist/src/components/combobox/src/index.js

@@ -1,2 +1,425 @@
-(()=>{function b(o){let t=[...Array(30)].map(()=>Math.random().toString(36)[3]).join("");return"".concat(o,"-").concat(t)}function f(o){let t=o.getBoundingClientRect();return t.top>=0&&t.left>=0&&t.bottom<=(window.innerHeight||document.documentElement.clientHeight)&&t.right<=(window.innerWidth||document.documentElement.clientWidth)}function x(o){return o&&o.clientHeight<o.scrollHeight}function E(o,t){let{offsetHeight:e,offsetTop:i}=o,{offsetHeight:s,scrollTop:n}=t,r=i<n,c=i+e>n+s;r?t.scrollTo(0,i):c&&t.scrollTo(0,i-s+e)}var a=class extends HTMLElement{constructor(){super(),this.handleRoaming=this.handleRoaming.bind(this)}connectedCallback(){this.trigger=this.querySelector("smileid-combobox-trigger"),document.addEventListener("click",this.handleRoaming),this.addEventListener("focusout",this.handleRoaming),this.addEventListener("blur",this.handleRoaming)}disconnectedCallback(){document.removeEventListener("click",this.handleRoaming),this.removeEventListener("focusout",this.handleRoaming),this.removeEventListener("blur",this.handleRoaming)}handleRoaming(t){let e=t.relatedTarget||t.target;this.contains(e)||this.trigger.getAttribute("expanded")==="true"&&this.trigger.setAttribute("expanded","false")}},l=class extends HTMLElement{constructor(){super(),this.handleKeyUp=this.handleKeyUp.bind(this),this.handleKeyDown=this.handleKeyDown.bind(this),this.handleSelection=this.handleSelection.bind(this),this.toggleExpansionState=this.toggleExpansionState.bind(this)}get type(){return this.getAttribute("type")||"text"}get label(){return this.getAttribute("label")||""}get value(){return this.getAttribute("value")||""}get disabled(){return this.hasAttribute("disabled")}connectedCallback(){if(!this.label)throw new Error("<combobox-trigger>: a label attribute is required");this.innerHTML="".concat(this.type==="text"?"\n        <div>\n          <input ".concat(this.value?'value="'.concat(this.value,'" '):"").concat(this.disabled?" disabled ":"",'type="text" placeholder="').concat(this.label,'" />\n          <button ').concat(this.disabled?"disabled ":"","tabindex='-1' type='button'>\n            <span class=\"visually-hidden\">Toggle</span>\n          </button>\n        </div>\n      "):"<button ".concat(this.disabled?"disabled ":"",'type="button">').concat(this.value||this.label,"</button>")),this.setAttribute("expanded",!1),this.inputTrigger=this.querySelector("input"),this.buttonTrigger=this.querySelector("button"),this.buttonTrigger.setAttribute("aria-expanded",!1),this.buttonTrigger.setAttribute("role","combobox"),this.buttonTrigger.addEventListener("keydown",this.handleKeyDown),this.buttonTrigger.addEventListener("click",this.toggleExpansionState),this.inputTrigger&&(this.inputTrigger.setAttribute("aria-expanded",!1),this.inputTrigger.setAttribute("role","combobox"),this.inputTrigger.addEventListener("keydown",this.handleKeyDown),this.inputTrigger.addEventListener("keyup",this.handleKeyUp),this.inputTrigger.addEventListener("change",t=>t.stopPropagation())),this.listbox=this.parentElement.querySelector("smileid-combobox-listbox"),this.options=Array.from(this.parentElement.querySelectorAll("smileid-combobox-option")),this.options.forEach(t=>{t.addEventListener("combobox.option.select",this.handleSelection)})}disconnectedCallback(){this.buttonTrigger.removeEventListener("keydown",this.handleKeyDown),this.buttonTrigger.removeEventListener("click",this.toggleExpansionState),this.inputTrigger&&(this.inputTrigger.removeEventListener("keydown",this.handleKeyDown),this.inputTrigger.removeEventListener("keyup",this.handleKeyUp),this.inputTrigger.removeEventListener("change",t=>t.stopPropagation())),this.options&&this.options.forEach(t=>{t.removeEventListener("combobox.option.select",this.handleSelection)})}handleKeyDown(t){if(t.ctrlKey||t.shiftKey)return;let{key:e}=t;switch(e){case"Enter":case"Space":case" ":if(this.getAttribute("expanded")==="true")if(this.inputTrigger&&(e==="Space"||e===" "))this.resetListbox();else{t.preventDefault();let i=this.buttonTrigger.getAttribute("aria-activedescendant");i&&document.getElementById(i).click()}else t.preventDefault(),this.toggleExpansionState();break;case"Esc":case"Escape":t.preventDefault(),this.getAttribute("expanded")==="true"&&this.toggleExpansionState();break;case"Down":case"ArrowDown":t.preventDefault(),this.getAttribute("expanded")!=="true"?(this.toggleExpansionState(),this.focusListbox("First")):this.focusListbox("Down");break;case"Up":case"ArrowUp":t.preventDefault(),this.getAttribute("expanded")!=="true"?(this.toggleExpansionState(),this.focusListbox("Last")):this.focusListbox("Up");break;case"Left":case"ArrowLeft":case"Right":case"ArrowRight":case"Home":case"End":this.resetListbox();break;case"Tab":break;default:break}}handleKeyUp(t){let{key:e}=t,i=s=>s.length===1&&s.match(/\S| /);(t.key==="Escape"||t.key==="Esc")&&(t.preventDefault(),this.getAttribute("expanded")==="true"?this.toggleExpansionState():this.inputTrigger&&(this.inputTrigger.value="",this.listbox.dispatchEvent(new CustomEvent("combobox.listbox.filter",{detail:""})))),(i(e)||e==="Backspace")&&(this.resetListbox(),this.filterListbox(t.target.value))}toggleExpansionState(){let t=this.getAttribute("expanded")==="true";this.setAttribute("expanded",!t),this.buttonTrigger.setAttribute("aria-expanded",!t),this.inputTrigger&&this.inputTrigger.setAttribute("aria-expanded",!t)}handleSelection(t){this.inputTrigger?this.inputTrigger.value=t.detail.label:this.buttonTrigger.textContent=t.detail.label,this.toggleExpansionState(),this.parentElement.dispatchEvent(new CustomEvent("combobox.change",{detail:{value:t.detail.value}}))}filterListbox(t){this.getAttribute("expanded")!=="true"&&this.toggleExpansionState(),this.listbox.dispatchEvent(new CustomEvent("combobox.listbox.filter",{detail:t}))}focusListbox(t){this.resetListbox(),this.listbox.dispatchEvent(new CustomEvent("combobox.listbox.focus",{detail:{direction:t}}))}resetListbox(){this.listbox.dispatchEvent(new CustomEvent("combobox.listbox.reset"))}},h=class extends HTMLElement{constructor(){super(),this.handleFilter=this.handleFilter.bind(this),this.handleFocus=this.handleFocus.bind(this),this.handleReset=this.handleReset.bind(this),this.handleOptionSelection=this.handleOptionSelection.bind(this)}get emptyLabel(){return this.getAttribute("empty-label")}get emptyState(){return"\n      <p id='empty-state' style=\"text-align: center;\">\n        ".concat(this.emptyLabel||"No items","\n      </p>\n    ")}connectedCallback(){this.setAttribute("role","listbox"),this.setAttribute("id",b("listbox")),this.addEventListener("combobox.listbox.filter",this.handleFilter),this.addEventListener("combobox.listbox.focus",this.handleFocus),this.addEventListener("combobox.listbox.reset",this.handleReset),this.triggers=Array.from(this.parentElement.querySelectorAll("smileid-combobox-trigger input, smileid-combobox-trigger button")),this.triggers.forEach(t=>t.setAttribute("aria-controls",this.getAttribute("id"))),this.optionNodes=Array.from(this.querySelectorAll("smileid-combobox-option")),this.selectedNode=this.optionNodes.find(t=>!t.hasAttribute("hidden")&&t.hasAttribute("aria-selected"))||this.optionNodes.filter(t=>!t.hasAttribute("hidden"))[0],this.selectedNode.setAttribute("tabindex","0"),this.optionNodes.forEach(t=>{t.addEventListener("combobox.option.select",this.handleOptionSelection)}),this.optionNodes.length===0&&(this.innerHTML=this.emptyState)}disconnectedCallback(){this.removeEventListener("combobox.listbox.filter",this.handleFilter),this.removeEventListener("combobox.listbox.focus",this.handleFocus),this.removeEventListener("combobox.listbox.reset",this.handleReset),this.optionNodes.forEach(t=>{t.removeEventListener("combobox.option.select",this.handleOptionSelection)})}static get observedAttributes(){return["search-term"]}attributeChangedCallback(t,e,i){switch(t){case"search-term":e&&!i?this.optionNodes.forEach(s=>{s.removeAttribute("hidden")}):i&&this.filterNodes(i);break;default:break}}filterNodes(t){this.optionNodes.forEach(s=>{let n=s.getAttribute("value").toLowerCase(),r=s.getAttribute("label").toLowerCase();n.includes(t.toLowerCase())||r.includes(t.toLowerCase())?s.removeAttribute("hidden"):s.setAttribute("hidden",!0)});let e=this.optionNodes.find(s=>!s.hasAttribute("hidden")),i=this.querySelector("#empty-state");!e&&!i?this.insertAdjacentHTML("afterbegin",this.emptyState):e&&i&&this.removeChild(i)}handleFilter(t){let e=t.detail;this.setAttribute("search-term",e)}handleFocus(t){this.setSelected(t.detail.direction)}handleReset(){this.optionNodes.forEach(t=>t.setAttribute("tabindex","-1"))}handleOptionSelection(t){this.triggers.filter(i=>i.tagName==="INPUT")[0]&&this.setAttribute("search-term",t.detail.label)}setSelected(t){let e=this.optionNodes.filter(r=>!r.hasAttribute("hidden"));this.selectedNode.setAttribute("tabindex","0");let i=e.findIndex(r=>r===this.selectedNode),s=e.length-1,n;switch(t){case"First":n=0;break;case"Last":n=s;break;case"Up":i===0?n=s:n=i-1;break;default:i===s?n=0:n=i+1;break}i!==n&&this.swapSelected(this.selectedNode,e[n])}swapSelected(t,e){t.setAttribute("tabindex","-1"),e.setAttribute("tabindex","0"),this.selectedNode=e,x(this)&&E(this.selectedNode,this),f(e)||e.scrollIntoView({behavior:"smooth",block:"nearest"}),this.triggers.forEach(i=>i.setAttribute("aria-activedescendant",e.id))}},d=class extends HTMLElement{connectedCallback(){this.setAttribute("role","option"),this.setAttribute("tabindex","-1"),this.setAttribute("id",b("option")),this.options=Array.from(this.parentElement.querySelectorAll("smileid-combobox-option")),this.addEventListener("click",this.select)}disconnectedCallback(){this.removeEventListener("click",this.select)}get value(){return this.getAttribute("value")}get label(){return this.getAttribute("label")}select(){let t=this.options.find(e=>e.getAttribute("aria-selected"));t&&t.removeAttribute("aria-selected"),this.setAttribute("aria-selected",!0),this.dispatchEvent(new CustomEvent("combobox.option.select",{detail:{id:this.getAttribute("id"),label:this.label,value:this.value}}))}},u=a,g=l,p=h,m=d;"customElements"in window&&!window.customElements.get("smileid-combobox")&&(window.customElements.define("smileid-combobox",u),window.customElements.define("smileid-combobox-trigger",g),window.customElements.define("smileid-combobox-listbox",p),window.customElements.define("smileid-combobox-option",m));})();
+(() => {
+  function b(o) {
+    let t = [...Array(30)].map(() => Math.random().toString(36)[3]).join('');
+    return ''.concat(o, '-').concat(t);
+  }
+  function f(o) {
+    let t = o.getBoundingClientRect();
+    return (
+      t.top >= 0 &&
+      t.left >= 0 &&
+      t.bottom <=
+        (window.innerHeight || document.documentElement.clientHeight) &&
+      t.right <= (window.innerWidth || document.documentElement.clientWidth)
+    );
+  }
+  function x(o) {
+    return o && o.clientHeight < o.scrollHeight;
+  }
+  function E(o, t) {
+    let { offsetHeight: e, offsetTop: i } = o,
+      { offsetHeight: s, scrollTop: n } = t,
+      r = i < n,
+      c = i + e > n + s;
+    r ? t.scrollTo(0, i) : c && t.scrollTo(0, i - s + e);
+  }
+  var a = class extends HTMLElement {
+      constructor() {
+        (super(), (this.handleRoaming = this.handleRoaming.bind(this)));
+      }
+      connectedCallback() {
+        ((this.trigger = this.querySelector('smileid-combobox-trigger')),
+          document.addEventListener('click', this.handleRoaming),
+          this.addEventListener('focusout', this.handleRoaming),
+          this.addEventListener('blur', this.handleRoaming));
+      }
+      disconnectedCallback() {
+        (document.removeEventListener('click', this.handleRoaming),
+          this.removeEventListener('focusout', this.handleRoaming),
+          this.removeEventListener('blur', this.handleRoaming));
+      }
+      handleRoaming(t) {
+        let e = t.relatedTarget || t.target;
+        this.contains(e) ||
+          (this.trigger.getAttribute('expanded') === 'true' &&
+            this.trigger.setAttribute('expanded', 'false'));
+      }
+    },
+    l = class extends HTMLElement {
+      constructor() {
+        (super(),
+          (this.handleKeyUp = this.handleKeyUp.bind(this)),
+          (this.handleKeyDown = this.handleKeyDown.bind(this)),
+          (this.handleSelection = this.handleSelection.bind(this)),
+          (this.toggleExpansionState = this.toggleExpansionState.bind(this)));
+      }
+      get type() {
+        return this.getAttribute('type') || 'text';
+      }
+      get label() {
+        return this.getAttribute('label') || '';
+      }
+      get value() {
+        return this.getAttribute('value') || '';
+      }
+      get disabled() {
+        return this.hasAttribute('disabled');
+      }
+      connectedCallback() {
+        if (!this.label)
+          throw new Error('<combobox-trigger>: a label attribute is required');
+        ((this.innerHTML = ''.concat(
+          this.type === 'text'
+            ? '\n        <div>\n          <input '
+                .concat(this.value ? 'value="'.concat(this.value, '" ') : '')
+                .concat(
+                  this.disabled ? ' disabled ' : '',
+                  'type="text" placeholder="',
+                )
+                .concat(this.label, '" />\n          <button ')
+                .concat(
+                  this.disabled ? 'disabled ' : '',
+                  "tabindex='-1' type='button'>\n            <span class=\"visually-hidden\">Toggle</span>\n          </button>\n        </div>\n      ",
+                )
+            : '<button '
+                .concat(this.disabled ? 'disabled ' : '', 'type="button">')
+                .concat(this.value || this.label, '</button>'),
+        )),
+          this.setAttribute('expanded', !1),
+          (this.inputTrigger = this.querySelector('input')),
+          (this.buttonTrigger = this.querySelector('button')),
+          this.buttonTrigger.setAttribute('aria-expanded', !1),
+          this.buttonTrigger.setAttribute('role', 'combobox'),
+          this.buttonTrigger.addEventListener('keydown', this.handleKeyDown),
+          this.buttonTrigger.addEventListener(
+            'click',
+            this.toggleExpansionState,
+          ),
+          this.inputTrigger &&
+            (this.inputTrigger.setAttribute('aria-expanded', !1),
+            this.inputTrigger.setAttribute('role', 'combobox'),
+            this.inputTrigger.addEventListener('keydown', this.handleKeyDown),
+            this.inputTrigger.addEventListener('keyup', this.handleKeyUp),
+            this.inputTrigger.addEventListener('change', (t) =>
+              t.stopPropagation(),
+            )),
+          (this.listbox = this.parentElement.querySelector(
+            'smileid-combobox-listbox',
+          )),
+          (this.options = Array.from(
+            this.parentElement.querySelectorAll('smileid-combobox-option'),
+          )),
+          this.options.forEach((t) => {
+            t.addEventListener('combobox.option.select', this.handleSelection);
+          }));
+      }
+      disconnectedCallback() {
+        (this.buttonTrigger.removeEventListener('keydown', this.handleKeyDown),
+          this.buttonTrigger.removeEventListener(
+            'click',
+            this.toggleExpansionState,
+          ),
+          this.inputTrigger &&
+            (this.inputTrigger.removeEventListener(
+              'keydown',
+              this.handleKeyDown,
+            ),
+            this.inputTrigger.removeEventListener('keyup', this.handleKeyUp),
+            this.inputTrigger.removeEventListener('change', (t) =>
+              t.stopPropagation(),
+            )),
+          this.options &&
+            this.options.forEach((t) => {
+              t.removeEventListener(
+                'combobox.option.select',
+                this.handleSelection,
+              );
+            }));
+      }
+      handleKeyDown(t) {
+        if (t.ctrlKey || t.shiftKey) return;
+        let { key: e } = t;
+        switch (e) {
+          case 'Enter':
+          case 'Space':
+          case ' ':
+            if (this.getAttribute('expanded') === 'true')
+              if (this.inputTrigger && (e === 'Space' || e === ' '))
+                this.resetListbox();
+              else {
+                t.preventDefault();
+                let i = this.buttonTrigger.getAttribute(
+                  'aria-activedescendant',
+                );
+                i && document.getElementById(i).click();
+              }
+            else (t.preventDefault(), this.toggleExpansionState());
+            break;
+          case 'Esc':
+          case 'Escape':
+            (t.preventDefault(),
+              this.getAttribute('expanded') === 'true' &&
+                this.toggleExpansionState());
+            break;
+          case 'Down':
+          case 'ArrowDown':
+            (t.preventDefault(),
+              this.getAttribute('expanded') !== 'true'
+                ? (this.toggleExpansionState(), this.focusListbox('First'))
+                : this.focusListbox('Down'));
+            break;
+          case 'Up':
+          case 'ArrowUp':
+            (t.preventDefault(),
+              this.getAttribute('expanded') !== 'true'
+                ? (this.toggleExpansionState(), this.focusListbox('Last'))
+                : this.focusListbox('Up'));
+            break;
+          case 'Left':
+          case 'ArrowLeft':
+          case 'Right':
+          case 'ArrowRight':
+          case 'Home':
+          case 'End':
+            this.resetListbox();
+            break;
+          case 'Tab':
+            break;
+          default:
+            break;
+        }
+      }
+      handleKeyUp(t) {
+        let { key: e } = t,
+          i = (s) => s.length === 1 && s.match(/\S| /);
+        ((t.key === 'Escape' || t.key === 'Esc') &&
+          (t.preventDefault(),
+          this.getAttribute('expanded') === 'true'
+            ? this.toggleExpansionState()
+            : this.inputTrigger &&
+              ((this.inputTrigger.value = ''),
+              this.listbox.dispatchEvent(
+                new CustomEvent('combobox.listbox.filter', { detail: '' }),
+              ))),
+          (i(e) || e === 'Backspace') &&
+            (this.resetListbox(), this.filterListbox(t.target.value)));
+      }
+      toggleExpansionState() {
+        let t = this.getAttribute('expanded') === 'true';
+        (this.setAttribute('expanded', !t),
+          this.buttonTrigger.setAttribute('aria-expanded', !t),
+          this.inputTrigger &&
+            this.inputTrigger.setAttribute('aria-expanded', !t));
+      }
+      handleSelection(t) {
+        (this.inputTrigger
+          ? (this.inputTrigger.value = t.detail.label)
+          : (this.buttonTrigger.textContent = t.detail.label),
+          this.toggleExpansionState(),
+          this.parentElement.dispatchEvent(
+            new CustomEvent('combobox.change', {
+              detail: { value: t.detail.value },
+            }),
+          ));
+      }
+      filterListbox(t) {
+        (this.getAttribute('expanded') !== 'true' &&
+          this.toggleExpansionState(),
+          this.listbox.dispatchEvent(
+            new CustomEvent('combobox.listbox.filter', { detail: t }),
+          ));
+      }
+      focusListbox(t) {
+        (this.resetListbox(),
+          this.listbox.dispatchEvent(
+            new CustomEvent('combobox.listbox.focus', {
+              detail: { direction: t },
+            }),
+          ));
+      }
+      resetListbox() {
+        this.listbox.dispatchEvent(new CustomEvent('combobox.listbox.reset'));
+      }
+    },
+    h = class extends HTMLElement {
+      constructor() {
+        (super(),
+          (this.handleFilter = this.handleFilter.bind(this)),
+          (this.handleFocus = this.handleFocus.bind(this)),
+          (this.handleReset = this.handleReset.bind(this)),
+          (this.handleOptionSelection = this.handleOptionSelection.bind(this)));
+      }
+      get emptyLabel() {
+        return this.getAttribute('empty-label');
+      }
+      get emptyState() {
+        return '\n      <p id=\'empty-state\' style="text-align: center;">\n        '.concat(
+          this.emptyLabel || 'No items',
+          '\n      </p>\n    ',
+        );
+      }
+      connectedCallback() {
+        (this.setAttribute('role', 'listbox'),
+          this.setAttribute('id', b('listbox')),
+          this.addEventListener('combobox.listbox.filter', this.handleFilter),
+          this.addEventListener('combobox.listbox.focus', this.handleFocus),
+          this.addEventListener('combobox.listbox.reset', this.handleReset),
+          (this.triggers = Array.from(
+            this.parentElement.querySelectorAll(
+              'smileid-combobox-trigger input, smileid-combobox-trigger button',
+            ),
+          )),
+          this.triggers.forEach((t) =>
+            t.setAttribute('aria-controls', this.getAttribute('id')),
+          ),
+          (this.optionNodes = Array.from(
+            this.querySelectorAll('smileid-combobox-option'),
+          )),
+          (this.selectedNode =
+            this.optionNodes.find(
+              (t) =>
+                !t.hasAttribute('hidden') && t.hasAttribute('aria-selected'),
+            ) || this.optionNodes.filter((t) => !t.hasAttribute('hidden'))[0]),
+          this.selectedNode.setAttribute('tabindex', '0'),
+          this.optionNodes.forEach((t) => {
+            t.addEventListener(
+              'combobox.option.select',
+              this.handleOptionSelection,
+            );
+          }),
+          this.optionNodes.length === 0 && (this.innerHTML = this.emptyState));
+      }
+      disconnectedCallback() {
+        (this.removeEventListener('combobox.listbox.filter', this.handleFilter),
+          this.removeEventListener('combobox.listbox.focus', this.handleFocus),
+          this.removeEventListener('combobox.listbox.reset', this.handleReset),
+          this.optionNodes.forEach((t) => {
+            t.removeEventListener(
+              'combobox.option.select',
+              this.handleOptionSelection,
+            );
+          }));
+      }
+      static get observedAttributes() {
+        return ['search-term'];
+      }
+      attributeChangedCallback(t, e, i) {
+        switch (t) {
+          case 'search-term':
+            e && !i
+              ? this.optionNodes.forEach((s) => {
+                  s.removeAttribute('hidden');
+                })
+              : i && this.filterNodes(i);
+            break;
+          default:
+            break;
+        }
+      }
+      filterNodes(t) {
+        this.optionNodes.forEach((s) => {
+          let n = s.getAttribute('value').toLowerCase(),
+            r = s.getAttribute('label').toLowerCase();
+          n.includes(t.toLowerCase()) || r.includes(t.toLowerCase())
+            ? s.removeAttribute('hidden')
+            : s.setAttribute('hidden', !0);
+        });
+        let e = this.optionNodes.find((s) => !s.hasAttribute('hidden')),
+          i = this.querySelector('#empty-state');
+        !e && !i
+          ? this.insertAdjacentHTML('afterbegin', this.emptyState)
+          : e && i && this.removeChild(i);
+      }
+      handleFilter(t) {
+        let e = t.detail;
+        this.setAttribute('search-term', e);
+      }
+      handleFocus(t) {
+        this.setSelected(t.detail.direction);
+      }
+      handleReset() {
+        this.optionNodes.forEach((t) => t.setAttribute('tabindex', '-1'));
+      }
+      handleOptionSelection(t) {
+        this.triggers.filter((i) => i.tagName === 'INPUT')[0] &&
+          this.setAttribute('search-term', t.detail.label);
+      }
+      setSelected(t) {
+        let e = this.optionNodes.filter((r) => !r.hasAttribute('hidden'));
+        this.selectedNode.setAttribute('tabindex', '0');
+        let i = e.findIndex((r) => r === this.selectedNode),
+          s = e.length - 1,
+          n;
+        switch (t) {
+          case 'First':
+            n = 0;
+            break;
+          case 'Last':
+            n = s;
+            break;
+          case 'Up':
+            i === 0 ? (n = s) : (n = i - 1);
+            break;
+          default:
+            i === s ? (n = 0) : (n = i + 1);
+            break;
+        }
+        i !== n && this.swapSelected(this.selectedNode, e[n]);
+      }
+      swapSelected(t, e) {
+        (t.setAttribute('tabindex', '-1'),
+          e.setAttribute('tabindex', '0'),
+          (this.selectedNode = e),
+          x(this) && E(this.selectedNode, this),
+          f(e) || e.scrollIntoView({ behavior: 'smooth', block: 'nearest' }),
+          this.triggers.forEach((i) =>
+            i.setAttribute('aria-activedescendant', e.id),
+          ));
+      }
+    },
+    d = class extends HTMLElement {
+      connectedCallback() {
+        (this.setAttribute('role', 'option'),
+          this.setAttribute('tabindex', '-1'),
+          this.setAttribute('id', b('option')),
+          (this.options = Array.from(
+            this.parentElement.querySelectorAll('smileid-combobox-option'),
+          )),
+          this.addEventListener('click', this.select));
+      }
+      disconnectedCallback() {
+        this.removeEventListener('click', this.select);
+      }
+      get value() {
+        return this.getAttribute('value');
+      }
+      get label() {
+        return this.getAttribute('label');
+      }
+      select() {
+        let t = this.options.find((e) => e.getAttribute('aria-selected'));
+        (t && t.removeAttribute('aria-selected'),
+          this.setAttribute('aria-selected', !0),
+          this.dispatchEvent(
+            new CustomEvent('combobox.option.select', {
+              detail: {
+                id: this.getAttribute('id'),
+                label: this.label,
+                value: this.value,
+              },
+            }),
+          ));
+      }
+    },
+    u = a,
+    g = l,
+    p = h,
+    m = d;
+  'customElements' in window &&
+    !window.customElements.get('smileid-combobox') &&
+    (window.customElements.define('smileid-combobox', u),
+    window.customElements.define('smileid-combobox-trigger', g),
+    window.customElements.define('smileid-combobox-listbox', p),
+    window.customElements.define('smileid-combobox-option', m));
+})();
 //# sourceMappingURL=index.js.map