import*as i18n from"../i18n/i18n.js";import*as Platform from"../platform/platform.js";import*as LitHtml from"../third_party/lit-html/lit-html.js";const UIStrings={ignored:"Ignored"},str_=i18n.i18n.registerUIStrings("elements/AccessibilityNode.ts",UIStrings),i18nString=i18n.i18n.getLocalizedString.bind(void 0,str_);export class AccessibilityNode extends HTMLElement{constructor(){super(),this.shadow=this.attachShadow({mode:"open",delegatesFocus:!1}),this.axNode=null,this.childAxNodes=[],this.axTree=null,this.expanded=!1,this.selected=!1,this.addEventListener("click",this.onClick.bind(this)),this.addEventListener("mouseover",this.onMouseOver.bind(this)),this.addEventListener("mouseleave",this.onMouseLeave.bind(this)),this.tabIndex=-1,this.setAttribute("role","treeitem")}set data(e){this.axNode=e.axNode,this.axTree=this.axNode.axTree,this.axNode.hasChildren()?this.classList.add("parent"):this.classList.add("no-children"),this.axTree&&this.axTree.appendToNodeMap(this.axNode.id,this),this.render()}async expand(){this.axNode?.hasChildren()&&(this.childAxNodes=await(this.axNode?.children()),this.expanded=!0,this.classList.add("expanded"),this.render())}collapse(){this.axNode?.hasChildren()&&(this.expanded=!1,this.classList.remove("expanded"))}select(){this.selected=!0,this.render(),this.focus(),this.axNode?.highlightNode()}deselect(){this.selected=!1,this.render(),this.axNode?.clearHighlight()}get isExpanded(){return this.expanded}selectPreviousNode(){if(!this.axTree)return;const e=this.getPreviousSibling();e&&(this.axTree.selectedAXNode=e)}selectNextNode(){if(!this.axTree)return;if(this.expanded)return void this.selectFirstChild();const e=this.getNextSibling();e&&(this.axTree.selectedAXNode=e)}selectParent(){if(!this.axTree)return;const e=this.getParentNode();e&&(this.axTree.selectedAXNode=e)}selectFirstChild(){const e=this.getFirstChild();this.axTree&&e&&(this.axTree.selectedAXNode=e)}defaultAction(){this.toggleChildren()}getLastChild(){if(!this.axTree||!this.axNode)return null;if(this.expanded){const e=this.childAxNodes.length-1,t=this.axTree.getNodeByAXID(this.childAxNodes[e].id);if(t)return t}return null}getNextSibling(){const e=this.getParentNode();if(!e||!e.axNode)return null;const t=e.indexOf(this);return t+1<e.childAxNodes.length?e.getChild(t+1):e.getNextSibling()}getPreviousSibling(){const e=this.getParentNode();if(!e)return null;const t=e.indexOf(this);if(0===t)return e;let i=e.getChild(t-1);for(;i&&i.expanded;)i=i.getLastChild();return i}getChild(e){return this.axNode&&this.axNode.hasChildren()&&this.axTree?this.axTree.getNodeByAXID(this.childAxNodes[e].id):null}getFirstChild(){return this.axNode&&this.axNode.hasChildren()&&this.axTree?this.axTree.getNodeByAXID(this.childAxNodes[0].id):null}getParentNode(){return this.axNode&&this.axNode.parent&&this.axTree?this.axTree.getNodeByAXID(this.axNode.parent.id):null}indexOf(e){const t=e.axNode;return this.axNode&&t?this.childAxNodes.indexOf(t):-1}onClick(e){this.axTree&&(this.axTree.selectedAXNode=this),e.stopPropagation(),this.toggleChildren()}onMouseOver(){this.axNode?.highlightNode()}onMouseLeave(){this.axNode?.clearHighlight()}async toggleChildren(){this.axNode&&this.axNode.hasChildren()&&(this.expanded?this.collapse():await this.expand(),this.render())}renderChildren(e){if(!e)return LitHtml.html``;const t=[];for(const i of this.childAxNodes){const e=LitHtml.html`
        <devtools-accessibility-node .data=${{axNode:i}}>
        </devtools-accessibility-node>
      `;t.push(e)}return LitHtml.html`<div role='group' class='children'>${t}</div>`}truncateTextIfNeeded(e){return e.length>1e4?Platform.StringUtilities.trimMiddle(e,1e4):e}renderNodeContent(){const e=[];if(!this.axNode)return e;const t=this.axNode.role;if(!t)return e;const i=LitHtml.html`<span class='monospace'>${this.truncateTextIfNeeded(t||"")}</span>`;e.push(LitHtml.html`${i}`);const s=this.axNode.name;return s&&(e.push(LitHtml.html`<span class='separator'>\xA0</span>`),e.push(LitHtml.html`<span class='ax-readable-string'>"${s}"</span>`)),e}render(){if(!this.axNode)return;const e=[];if(this.axNode.ignored)e.push(LitHtml.html`<span class='monospace ignored-node'>${i18nString(UIStrings.ignored)}</span>`);else{const t=this.renderNodeContent(),i=LitHtml.Directives.classMap({wrapper:!0,selected:this.selected});e.push(LitHtml.html`<div class=${i}>${t}</div>`)}const t=this.renderChildren(this.axNode);e.push(t);const i=LitHtml.html`
      <style>
          .ax-readable-string {
            font-style: italic;
          }

          .monospace {
            font-family: var(--monospace-font-family);
            font-size: var(--monospace-font-size);
          }

          .ignored-node {
            font-style: italic;
            opacity: 70%;
          }

          :host {
            align-items: center;
            display: block;
            margin: 0;
            min-height: 16px;
            overflow-x: hidden;
            padding-left: 4px;
            padding-right: 4px;
            position: relative;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          span {
            flex-shrink: 0;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          .children {
            padding-inline-start: 12px;
          }

          :focus {
            outline: none;
          }

          :host(:not(.expanded)) .children {
            display: none;
          }

          :host(.no-children) {
            margin-left: 16px;
          }

          :host(.parent)::before {
            box-sizing: border-box;
            user-select: none;
            -webkit-mask-image: url(Images/treeoutlineTriangles.svg);
            -webkit-mask-size: 32px 24px;
            content: '\A0';
            color: transparent;
            text-shadow: none;
            margin-right: -3px;
            -webkit-mask-position: 0 0;
            background-color: var(--color-syntax-7);
          }

          :host(.parent.expanded)::before {
            -webkit-mask-position: -16px 0;
          }

          .wrapper {
            display: inline-block;
            width: 96%;
          }

          .wrapper:hover {
            background: var(--color-background-elevation-2);
          }

          .wrapper.selected {
            outline: none;
            background: var(--selection-bg-color);
          }
      </style>
      ${e}
      `;LitHtml.render(i,this.shadow)}}customElements.get("devtools-accessibility-node")||customElements.define("devtools-accessibility-node",AccessibilityNode);