connectedCallback()

in client/src/page.ts [113:181]

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

  connectedCallback() {
    const inputId = "cql-input-simple";
    const overlayId = "cql-input-simple-overlay";
    const shadow = this.attachShadow({ mode: "open" });
    shadow.innerHTML = `
    <style>
      #cql-input-simple-container {
        position: relative;
      }
      #cql-input-simple {
        background-color: transparent;
        background-color: #333;
        outline: none;
        border: 2px solid #aaa;
        color: transparent;
        caret-color: white;
      }
      #cql-input-simple,
      #cql-input-simple-overlay {
        white-space: pre;
        padding: 5px;
        font-size: 16px;
        line-height: 24px;
        font-family: sans-serif;
        min-width: 200px;
        max-width: 300px;
        white-space: pre-wrap;
        word-wrap: break-word;
      }
      #cql-input-simple-overlay {
        position: absolute;
        top: 0;
        left: 0;
        color: white;
        border: 2px solid transparent;
        pointer-events: none;
        height: auto;
      }
      .CHIP_KEY_POSITIVE,
      .CHIP_KEY_NEGATIVE {
        color: #83c2ff;
      }
      .CHIP_VALUE {
        color: #c39eff;
      }
      .RIGHT_BRACKET, .LEFT_BRACKET {
        color: #ff57ff;
      }
      .STRING {
        color: beige;
      }
      .AND, .OR {
        color: pink;
      }
    </style>
    <div id="cql-input-simple-container">
      <textarea id="${inputId}"></textarea>
      <div id="${overlayId}">&nbsp;</div>
    </div>`;
    this.input = (shadow.getElementById(inputId) ?? undefined) as
      | HTMLTextAreaElement
      | undefined;
    this.overlay = (shadow.getElementById(overlayId) ?? undefined) as
      | HTMLDivElement
      | undefined;
    this.syncOverlayWithInput();

    this.input?.addEventListener("input", this.handleInput);
  }