@spectrum-web-components/tags/src/Tags.js

Web component implementation of a Spectrum design Tags

"use strict";var g=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var h=(r,s,e,t)=>{for(var n=t>1?void 0:t?f(s,e):s,o=r.length-1,i;o>=0;o--)(i=r[o])&&(n=(t?i(s,e,n):i(n))||n);return t&&n&&g(s,e,n),n};import{html as m,SpectrumElement as v}from"@spectrum-web-components/base";import{queryAssignedNodes as p}from"@spectrum-web-components/base/src/decorators.js";import{RovingTabindexController as b}from"@spectrum-web-components/reactive-controllers/src/RovingTabindex.js";import{FocusVisiblePolyfillMixin as T}from"@spectrum-web-components/shared/src/focus-visible.js";import{Tag as x}from"./Tag.js";import y from"./tags.css.js";export class Tags extends T(v){constructor(){super();this.rovingTabindexController=new b(this,{focusInIndex:e=>e.findIndex(t=>!t.disabled&&t.deletable),elements:()=>this.tags,isFocusableElement:e=>!e.disabled&&e.deletable});this.handleFocusin=()=>{this.addEventListener("focusout",this.handleFocusout),this.addEventListener("keydown",this.handleKeydown)};this.handleKeydown=e=>{const{code:t}=e;if(t!=="PageUp"&&t!=="PageDown")return;const n=(d,c)=>d[(d.length+c)%d.length],o=[...this.getRootNode().querySelectorAll("sp-tags")];if(o.length<2)return;e.preventDefault();const i=o.indexOf(this),u=t==="PageUp"?-1:1;let l=i+u,a=n(o,l);for(;!a.tags.length;)l+=u,a=n(o,l);a.focus()};this.handleFocusout=()=>{this.removeEventListener("keydown",this.handleKeydown),this.removeEventListener("focusout",this.handleFocusout)};this.addEventListener("focusin",this.handleFocusin)}static get styles(){return[y]}get tags(){return this.defaultNodes.filter(e=>e instanceof x)}focus(){this.rovingTabindexController.focus()}handleSlotchange(){this.rovingTabindexController.handleItemMutation(),this.rovingTabindexController.clearElementCache()}render(){return m`
      <slot @slotchange=${this.handleSlotchange}></slot>
    `}firstUpdated(){this.hasAttribute("role")||this.setAttribute("role","list"),this.hasAttribute("aria-label")||this.setAttribute("aria-label","Tags")}}h([p()],Tags.prototype,"defaultNodes",2);
//# sourceMappingURL=Tags.js.map