@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,n,e,t)=>{for(var s=t>1?void 0:t?f(n,e):n,o=r.length-1,i;o>=0;o--)(i=r[o])&&(s=(t?i(n,e,s):i(s))||s);return t&&s&&g(n,e,s),s};import{html as m,SpectrumElement as p}from"@spectrum-web-components/base";import{queryAssignedNodes as v}from"@spectrum-web-components/base/src/decorators.js";import{FocusVisiblePolyfillMixin as b}from"@spectrum-web-components/shared/src/focus-visible.js";import{RovingTabindexController as T}from"@spectrum-web-components/reactive-controllers/src/RovingTabindex.js";import{Tag as x}from"./Tag.js";import y from"./tags.css.js";export class Tags extends b(p){constructor(){super();this.rovingTabindexController=new T(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 s=(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=s(o,l);for(;!a.tags.length;)l+=u,a=s(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.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([v()],Tags.prototype,"defaultNodes",2);
//# sourceMappingURL=Tags.js.map