connectedCallback()

in client/src/cqlInput/CqlInput.ts [41:85]

• 38 lines of code
• 1 McCabe index (conditional complexity)

    connectedCallback() {
      const cqlInputId = "cql-input";
      const cqlTypeaheadId = "cql-typeahead";
      const cqlErrorId = "cql-error";
      const shadow = this.attachShadow({ mode: "closed" });

      shadow.innerHTML = `
        <div id="${cqlInputId}" spellcheck="false"></div>
        <div id="${cqlTypeaheadId}" class="Cql__TypeaheadPopoverContainer" data-testid="${typeaheadTestId}" popover></div>
        <div id="${cqlErrorId}" class="Cql__ErrorPopover" data-testid="${errorTestId}" popover></div>
      `;

      const template = this.createTemplate(config.theme ?? {});
      shadow.appendChild(template.content.cloneNode(true));

      const cqlInput = shadow.getElementById(cqlInputId)!;
      const typeaheadEl = shadow.getElementById(cqlTypeaheadId)!;
      const errorEl = shadow.getElementById(cqlErrorId)!;

      const onChange = (detail: QueryChangeEventDetail) => {
        this.value = detail.queryStr;
        this.dispatchEvent(
          new CustomEvent("queryChange", {
            detail,
          })
        );
      };

      const plugin = createCqlPlugin({
        typeahead,
        typeaheadEl,
        errorEl,
        onChange,
        config,
      });

      const editorView = createEditorView({
        initialValue: this.getAttribute("initial-value") ?? "",
        mountEl: cqlInput,
        plugins: [plugin],
      });

      editorView.dom.setAttribute("data-testid", contentEditableTestId);
      editorView.dom.classList.add("Cql__ContentEditable");
    }