var __decorate=this&&this.__decorate||function(e,t,s,o){var i,n=arguments.length,r=n<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,s):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,s,o);else for(var l=e.length-1;l>=0;l--)(i=e[l])&&(r=(n<3?i(r):n>3?i(t,s,r):i(t,s))||r);return n>3&&r&&Object.defineProperty(t,s,r),r};import*as CodeHighlighter from"../../../ui/components/code_highlighter/code_highlighter.js";import codeHighlighterStyles from"../../../ui/components/code_highlighter/codeHighlighter.css.js";import*as LitHtml from"../../../ui/lit-html/lit-html.js";import contentEditableStyles from"./recorderInput.css.js";import{assert,mod}from"./util.js";const{html:html,Decorators:Decorators,Directives:Directives,LitElement:LitElement}=LitHtml,{customElement:customElement,property:property,state:state}=Decorators,{classMap:classMap}=Directives,jsonPropertyOptions={hasChanged:(e,t)=>JSON.stringify(e)!==JSON.stringify(t)};let EditableContent=class extends HTMLElement{static get observedAttributes(){return["disabled","placeholder"]}set disabled(e){this.contentEditable=String(!e)}get disabled(){return"true"!==this.contentEditable}set value(e){this.innerText=e,this.#e()}get value(){return this.innerText}set mimeType(e){this.#t=e,this.#e()}get mimeType(){return this.#t}#t="";constructor(){super(),this.contentEditable="true",this.tabIndex=0,this.addEventListener("focus",(()=>{this.innerHTML=this.innerText})),this.addEventListener("blur",this.#e.bind(this))}#e(){this.#t&&CodeHighlighter.CodeHighlighter.highlightNode(this,this.#t)}attributeChangedCallback(e,t,s){if("disabled"===e)this.disabled=null!==s}};EditableContent=__decorate([customElement("devtools-editable-content")],EditableContent);class SuggestEvent extends Event{static eventName="suggest";constructor(e){super(SuggestEvent.eventName),this.suggestion=e}}class SuggestionInitEvent extends Event{static eventName="suggestioninit";listeners;constructor(e){super(SuggestionInitEvent.eventName),this.listeners=e}}let SuggestionBox=class extends LitElement{static styles=[contentEditableStyles];#s=[];constructor(){super(),this.options=[],this.expression="",this.cursor=0}#o=e=>{if(assert(e instanceof KeyboardEvent,"Bound to the wrong event."),this.#s.length>0)switch(e.key){case"ArrowDown":e.stopPropagation(),e.preventDefault(),this.#i(1);break;case"ArrowUp":e.stopPropagation(),e.preventDefault(),this.#i(-1)}if("Enter"===e.key)this.#s[this.cursor]&&this.#n(this.#s[this.cursor]),e.preventDefault()};#i(e){this.cursor=mod(this.cursor+e,this.#s.length)}#n(e){this.dispatchEvent(new SuggestEvent(e))}connectedCallback(){super.connectedCallback(),this.dispatchEvent(new SuggestionInitEvent([["keydown",this.#o]]))}willUpdate(e){e.has("options")&&(this.options=Object.freeze([...this.options].sort())),e.has("expression")&&(this.cursor=0,this.#s=this.options.filter((e=>e.toLowerCase().startsWith(this.expression.toLowerCase()))))}render(){if(0!==this.#s.length)return html`<ul class="suggestions">
      ${this.#s.map(((e,t)=>html`<li
          class=${classMap({selected:t===this.cursor})}
          @mousedown=${this.#n.bind(this,e)}
        >
          ${e}
        </li>`))}
    </ul>`}};__decorate([property(jsonPropertyOptions)],SuggestionBox.prototype,"options",void 0),__decorate([property()],SuggestionBox.prototype,"expression",void 0),__decorate([state()],SuggestionBox.prototype,"cursor",void 0),SuggestionBox=__decorate([customElement("devtools-suggestion-box")],SuggestionBox);export let RecorderInput=class extends LitElement{static shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0};static styles=[contentEditableStyles,codeHighlighterStyles];constructor(){super(),this.options=[],this.expression="",this.placeholder="",this.value="",this.disabled=!1,this.strikethrough=!0,this.mimeType="",this.autocomplete=!0,this.addEventListener("blur",this.#r)}#l;get#a(){if(this.#l)return this.#l;const e=this.renderRoot.querySelector("devtools-editable-content");if(!e)throw new Error("Attempted to query node before rendering.");return this.#l=e,e}#r=()=>{window.getSelection()?.removeAllRanges(),this.value=this.#a.value,this.expression=this.#a.value};#h=e=>{assert(e.target instanceof Node);const t=document.createRange();t.selectNodeContents(e.target);const s=window.getSelection();s.removeAllRanges(),s.addRange(t)};#o=e=>{"Enter"===e.key&&e.preventDefault()};#d=e=>{this.expression=e.target.value};#c=e=>{for(const[t,s]of e.listeners)this.addEventListener(t,s)};#p=e=>{this.#a.value=e.suggestion,setTimeout(this.blur.bind(this),0)};willUpdate(e){e.has("value")&&(this.expression=this.value)}render(){return html`<devtools-editable-content
        ?disabled=${this.disabled}
        class=${classMap({strikethrough:!this.strikethrough})}
        .enterKeyHint=${"done"}
        .value=${this.value}
        .mimeType=${this.mimeType}
        @focus=${this.#h}
        @input=${this.#d}
        @keydown=${this.#o}
        autocapitalize="off"
        inputmode="text"
        placeholder=${this.placeholder}
        spellcheck="false"
      ></devtools-editable-content>
      <devtools-suggestion-box
        @suggestioninit=${this.#c}
        @suggest=${this.#p}
        .options=${this.options}
        .expression=${this.autocomplete?this.expression:""}
      ></devtools-suggestion-box>`}};__decorate([property(jsonPropertyOptions)],RecorderInput.prototype,"options",void 0),__decorate([property()],RecorderInput.prototype,"autocomplete",void 0),__decorate([state()],RecorderInput.prototype,"expression",void 0),__decorate([property()],RecorderInput.prototype,"placeholder",void 0),__decorate([property()],RecorderInput.prototype,"value",void 0),__decorate([property({type:Boolean})],RecorderInput.prototype,"disabled",void 0),__decorate([property()],RecorderInput.prototype,"strikethrough",void 0),__decorate([property()],RecorderInput.prototype,"mimeType",void 0),RecorderInput=__decorate([customElement("devtools-recorder-input")],RecorderInput);