https://pika.page/assets/role-components--exports--components--too…b4ae918e34a4518826fee2a04ed29737d85d864c.js

1// role-components/exports/components/toolbar/[email protected] downloaded from https://ga.jspm.io/npm:[email protected]/exports/components/toolbar/toolbar.js
2
3import{B as t}from"role-components/_/BrvVHMV_";import{css as e,html as s}from"lit";import{hostStyles as r}from"role-components/exports/styles/host-styles";import"web-component-define";class RoleToolbar extends t{static properties={orientation:{reflect:true},ariaOrientation:{reflect:true},_currentFocusIndex:{state:true},_toolbarItems:{state:true}};constructor(){super();
4/**
5     * @type {number}
6     */this._currentFocusIndex=0;
7/**
8     * @type {"vertical" | "horizontal"}
9     */this.orientation="horizontal";
10/** @type Array<Element> */this._toolbarItems=[];
11/**
12     * @type {"vertical" | "horizontal"}
13     */this.orientation="horizontal";this.ignoreQuery="textarea, select, input, [contenteditable='true'], [data-toolbar-ignore]";this.addEventListener("click",this.eventHandler.get(this.handleClick));this.addEventListener("keydown",this.eventHandler.get(this.handleKeyDown));this.addEventListener("focus",this.eventHandler.get(this.handleClick))}
14/**
15   * @param {import("lit").PropertyValues<this>} changedProperties
16   */willUpdate(t){t.has("_toolbarItems")&&this.updateToolbarItems();t.has("orientation")&&(this.ariaOrientation=this.orientation);super.willUpdate(t)}
17/** @returns {string} */static get baseName(){return"role-toolbar"}static get styles(){return[r,e`
18        .base {
19          display: flex;
20          max-width: 100%;
21          padding: 0.4rem 0.6rem;
22          border-radius: 4px;
23          border: 2px solid transparent;
24          gap: 4px;
25          overflow: auto;
26        }
27
28        :host([orientation="vertical"]) .base {
29          flex-direction: column;
30        }
31
32        :host(:focus-within) .base {
33          border-color: var(--role-border-focus-color);
34        }
35      `]}get keydownHandlers(){if(this._keydownHandlers)return this._keydownHandlers;this._keydownHandlers={arrowleft:this.focusPrevious,arrowup:this.focusPrevious,arrowright:this.focusNext,arrowdown:this.focusNext,home:this.focusFirst,end:this.focusLast};return this._keydownHandlers}render(){return s`
36      <div role="toolbar" class="base" part="base">
37        <slot @slotchange=${this.updateToolbarItems}></slot>
38      </div>
39    `}
40/** @param {Event} event */handleClick(t){let e=false;const s=t.composedPath().find((t=>{if(t?.matches?.(this.ignoreQuery)){e=true;return}const s=t?.getAttribute?.("data-role")||"";return s.includes("toolbar-item")}));if(!e)if(s){this._toolbarItems.forEach(((t,e)=>{t!==s?t.setAttribute("tabindex","-1"):this._currentFocusIndex=e}));this.setTabIndex({focus:false})}else this.setTabIndex({focus:true})}
41/** @param {KeyboardEvent} event */handleKeyDown(t){const e=t.key?.toLowerCase();if((this.orientation!=="vertical"||e!=="arrowleft"&&e!=="arrowright")&&(this.orientation!=="horizontal"||e!=="arrowdown"&&e!=="arrowup")&&!t.composedPath().find((/** @type {any} */t=>t.matches?.(this.ignoreQuery)))&&Object.keys(this.keydownHandlers).includes(e)){t.preventDefault();this.keydownHandlers[e].call(this,t)}}
42/** @param {Event} _event */focusNext(t){this.currentFocusElement?.setAttribute("tabindex","-1");this._currentFocusIndex+=1;this._currentFocusIndex>=this._toolbarItems.length?this.focusFirst():this.setTabIndex()}
43/** @param {Event} _event */focusPrevious(t){this.currentFocusElement?.setAttribute("tabindex","-1");this._currentFocusIndex-=1;this._currentFocusIndex<0?this.focusLast():this.setTabIndex()}focusFirst(){this._currentFocusIndex=0;this.setTabIndex()}focusLast(){if(this._toolbarItems!=null){this._currentFocusIndex=this._toolbarItems.length-1;this.setTabIndex()}}setTabIndex({focus:t=true}={}){this.currentFocusElement?.setAttribute("tabindex","0");t&&this.currentFocusElement?.focus?.()}get currentFocusElement(){if(this._toolbarItems!=null)return this._toolbarItems[this._currentFocusIndex]}
44/**
45   * @param {undefined | null | Event} [evt] - triggered by a slot change event.
46   */updateToolbarItems(t){
47/**
48     * @type {HTMLSlotElement}
49     */
50const e=t?.target||this.shadowRoot.querySelector("slot");if(e==null)return;
51/** @type {Element[]} */const s=e.assignedElements({flatten:true}).filter((t=>t instanceof HTMLElement&&t.dataset.role?.match(/toolbar-item/)));this._toolbarItems=s;this._currentFocusIndex=this._toolbarItems.findIndex((t=>t.getAttribute("tabindex")==="0"));

51this._toolbarItems.forEach((t=>{this._toolbarItems[this._currentFocusIndex]!==t&&t.setAttribute("tabindex","-1")}));if(this._currentFocusIndex===-1){this._currentFocusIndex=0;this.currentFocusElement?.setAttribute("tabindex","0")}}}export{RoleToolbar as default};
52