Switch

{
  name: "Demo: loading state",
  argTypes: hideControlsBadge(Metadata),
  parameters: {
    controls: {
      disabled: true
    },
    // Disables Chromatic's snapshotting, as the spinner is animated und thus leads to diffs
    chromatic: {
      disableSnapshot: true
    }
  },
  render: () => {
    return html` <oc-switch-v3 label-placement="left">
        <input type="checkbox" aria-label="oc-auto" />
        <label slot="label">Click me</label>
      </oc-switch-v3>

      <script>
        (() => {
          const [switchElement] = document.getElementsByTagName("oc-switch-v3");
          const [input] = document.getElementsByTagName("input");
          input.addEventListener("click", () => {
            if (switchElement.loading) {
              return;
            }

            switchElement.loading = true;
            setTimeout(() => {
              switchElement.loading = false;
            }, 1000);
          });
        })();
      </script>`;
  }
}

{
  name: "Demo: form with switch",
  argTypes: hideControlsBadge(Metadata),
  parameters: {
    controls: {
      disabled: true
    }
  },
  render: () => html`<div>
        <form>
          <oc-switch-v3 label-placement="left">
            <input type="checkbox" name="test" aria-label="oc-auto" />
            <label slot="label">Switch label</label>
          </oc-switch-v3>
          <br />
          <oc-switch-v3 label-placement="left">
            <input type="checkbox" name="test" aria-label="oc-auto" disabled />
            <label slot="label">Disabled switch</label>
          </oc-switch-v3>
          <br />
          <oc-button-v1 type="submit">Submit</oc-button-v1>
        </form>
      </div>
      <script>
        (() => {
          const [form] = document.getElementsByTagName("form");

          form.addEventListener("submit", (ev) => {
            let formData = new FormData(form);
            let data = "";
            formData.forEach((value, key) => (data += key + "=" + value + "\\n"));
            console.log(data);
            alert("sending:\\n" + data);
            ev.preventDefault();
          });
        })();
      </script> `
}

{
  parameters: {
    docs: {
      disable: true
    }
  },
  render() {
    return html`
      <oc-switch-v3>
        <input type="checkbox" aria-label="oc-auto" checked />
        <label slot="label">Test Label</label>
      </oc-switch-v3>
    `;
  },
  async play({
    canvas
  }) {
    const input = (await canvas.findByRole("checkbox")) as HTMLInputElement;
    input.focus();
    await expect(input).toHaveFocus();
  }
}

{
  render() {
    return html`
      <oc-switch-v3>
        <input type="checkbox" aria-label="oc-auto" />
        <label slot="label">Test Label</label>
      </oc-switch-v3>
    `;
  },
  async play({
    canvas
  }) {
    const inputElement = (await canvas.findByRole("checkbox")) as HTMLInputElement;
    inputElement.focus();
    await expect(inputElement.checked).toBeFalsy();

    // On

    await click(inputElement);
    await expect(inputElement.checked).toBeTruthy();

    // Off

    await click(inputElement);
    await expect(inputElement.checked).toBeFalsy();
  }
}

{
  render() {
    return html`
      <oc-switch-v3>
        <input type="checkbox" aria-label="oc-auto" />
        <label slot="label">Test Label</label>
      </oc-switch-v3>
    `;
  },
  async play({
    canvas
  }) {
    const inputElement = (await canvas.findByRole("checkbox")) as HTMLInputElement;
    const container = inputElement.closest("oc-switch-v3") as HTMLOcSwitchV3Element;
    inputElement.focus();
    await expect(inputElement.checked).toBeFalsy();

    // On
    await click(inputElement);
    container.loading = true;
    await expect(inputElement.checked).toBeTruthy();
    await expect(container.loading).toBeTruthy();

    // wait for 100ms to simulate backend request
    await new Promise(res => {
      setTimeout(res, 100);
    });
    container.loading = false;
    await tick();

    // Off
    await click(inputElement);
    container.loading = true;
    await expect(inputElement.checked).toBeFalsy();
    await expect(container.loading).toBeTruthy();

    // wait for 100ms to simulate backend request
    await new Promise(res => {
      setTimeout(res, 100);
    });
    container.loading = false;
  }
}

{
  render() {
    return html`
      <oc-switch-v3>
        <input type="checkbox" aria-label="oc-auto" />
        <label slot="label">Test Label</label>
      </oc-switch-v3>
    `;
  },
  async play({
    canvas
  }) {
    const inputElement = (await canvas.findByRole("checkbox")) as HTMLInputElement;
    const switchComponent = inputElement.closest("oc-switch-v3") as HTMLOcSwitchV3Element;
    let changeEventFired = 0;
    switchComponent.addEventListener("change", () => {
      changeEventFired++;
    });

    // On

    inputElement.focus();
    await expect(inputElement.checked).toBeFalsy();
    await click(inputElement);
    await expect(changeEventFired).toBe(1);

    // Off

    inputElement.focus();
    await expect(inputElement.checked).toBeTruthy();
    await click(inputElement);
    await expect(changeEventFired).toBe(2);
  }
}

{
  render() {
    return html`
      <oc-switch-v3>
        <input type="checkbox" aria-label="oc-auto" />
        <label slot="label">Test Label</label>
      </oc-switch-v3>
    `;
  },
  async play({
    canvas
  }) {
    const inputElement = (await canvas.findByRole("checkbox")) as HTMLInputElement;
    const switchComponent = inputElement.closest("oc-switch-v3") as HTMLOcSwitchV3Element;
    let inputEventFired = 0;
    switchComponent.addEventListener("input", () => {
      inputEventFired++;
    });

    // On

    inputElement.checked = false;
    inputElement.focus();
    await expect(inputElement.checked).toBeFalsy();
    await click(inputElement);
    await expect(inputEventFired).toBe(1);

    // Off

    await expect(inputElement.checked).toBeTruthy();
    inputElement.focus();
    await click(inputElement);
    await expect(inputEventFired).toBe(2);
  }
}

{
  render() {
    return html`
      <oc-switch-v3>
        <input type="checkbox" aria-label="oc-auto" />
        <label slot="label">Test Label</label>
      </oc-switch-v3>
    `;
  },
  async play({
    canvas
  }) {
    const inputElement = (await canvas.findByRole("checkbox")) as HTMLInputElement;
    const switchComponent = inputElement.closest("oc-switch-v3") as HTMLOcSwitchV3Element;
    let clickEventFired = 0;
    switchComponent.addEventListener("click", () => {
      clickEventFired++;
    });

    // On

    inputElement.checked = false;
    inputElement.focus();
    await expect(inputElement.checked).toBeFalsy();
    await click(inputElement);
    await expect(clickEventFired).toBe(1);

    // Off

    await expect(inputElement.checked).toBeTruthy();
    inputElement.focus();
    await click(inputElement);
    await expect(clickEventFired).toBe(2);
  }
}

{
  render() {
    return html`
      <oc-switch-v3>
        <input type="checkbox" aria-label="oc-auto" />
        <label slot="label">Test Label</label>
      </oc-switch-v3>
    `;
  },
  async play({
    canvas
  }) {
    const inputElement = (await canvas.findByRole("checkbox")) as HTMLInputElement;
    const switchComponent = inputElement.closest("oc-switch-v3") as HTMLOcSwitchV3Element;
    switchComponent.addEventListener("click", ev => {
      ev.preventDefault();
    });

    // On

    inputElement.focus();
    await expect(inputElement.checked).toBeFalsy();
    await click(inputElement);
    await expect(inputElement.checked).toBeFalsy();

    // Off

    await expect(inputElement.checked).toBeFalsy();
    inputElement.focus();
    await click(inputElement);
    await expect(inputElement.checked).toBeFalsy();
  }
}

{
  parameters: {
    docs: {
      disable: true
    }
  },
  render() {
    return html` <oc-switch-v2 checked>Test Label</oc-switch-v2> `;
  },
  async play({
    canvasElement
  }) {
    const container = Array.from(canvasElement.getElementsByTagName("oc-switch-v2"))[0];
    container.focus();
    await expect(container).toHaveFocus();
  }
}

{
  render() {
    return html` <oc-switch-v2>Test Label</oc-switch-v2> `;
  },
  async play({
    canvasElement
  }) {
    const container = Array.from(canvasElement.getElementsByTagName("oc-switch-v2"))[0];
    const inputElement = deepQuerySelector(container, ".input")!;
    container.focus();
    await expect(container.checked).toBeFalsy();

    // On

    await click(inputElement);
    await expect(inputElement).toHaveAttribute("aria-checked", "true");
    await expect(container.checked).toBeTruthy();

    // Off

    await click(inputElement);
    await expect(inputElement).toHaveAttribute("aria-checked", "false");
    await expect(container.checked).toBeFalsy();
  }
}

{
  render() {
    return html` <oc-switch-v2>Test Label</oc-switch-v2> `;
  },
  async play({
    canvasElement
  }) {
    const container: HTMLOcSwitchV2Element & {
      isLoading?: boolean;
    } = Array.from(canvasElement.getElementsByTagName("oc-switch-v2"))[0];
    const inputElement = deepQuerySelector(container, ".input")!;
    container.focus();
    await expect(container.checked).toBeFalsy();

    // On
    await click(inputElement);
    container.loading = true;
    await expect(inputElement).toHaveAttribute("aria-checked", "true");
    await expect(container.checked).toBeTruthy();
    await expect(container.loading).toBeTruthy();

    // wait for three seconds to simulate backend request
    await new Promise(res => {
      setTimeout(res, 100);
    });
    container.loading = false;
    await tick();

    // wait for one second to perform the next action

    // Off
    await click(inputElement);
    container.loading = true;
    await expect(inputElement).toHaveAttribute("aria-checked", "false");
    await expect(container.checked).toBeFalsy();
    await expect(container.loading).toBeTruthy();

    // wait for three seconds to simulate backend request
    await new Promise(res => {
      setTimeout(res, 100);
    });
    container.loading = false;
  }
}

{
  render() {
    return html` <oc-switch-v2>Test Label</oc-switch-v2> `;
  },
  async play({
    canvasElement
  }) {
    const switchComponent: HTMLOcSwitchV2Element = Array.from(canvasElement.getElementsByTagName("oc-switch-v2"))[0]!;
    const inputElement: HTMLInputElement | null = deepQuerySelector(switchComponent, ".input")!;
    let changeEventFired = false;
    switchComponent.addEventListener("change", () => {
      changeEventFired = true;
    });

    // On

    inputElement.focus();
    await expect(inputElement.checked).toBeFalsy();
    await click(inputElement);
    await expect(changeEventFired).toBeTruthy();

    // Off

    inputElement!.focus();
    await expect(inputElement.checked).toBeTruthy();
    await click(inputElement);
    await expect(changeEventFired).toBeTruthy();
  }
}

{
  render() {
    return html` <oc-switch-v2>Test Label</oc-switch-v2> `;
  },
  async play({
    canvasElement
  }) {
    const switchComponent: HTMLOcSwitchV2Element = Array.from(canvasElement.getElementsByTagName("oc-switch-v2"))[0]!;
    const inputElement: HTMLInputElement | null = deepQuerySelector(switchComponent, ".input")!;
    let inputEventFired = false;
    switchComponent.addEventListener("input", () => {
      inputEventFired = true;
    });

    // On

    inputElement.checked = false;
    inputElement.focus();
    await expect(inputElement.checked).toBeFalsy();
    await click(inputElement);
    await expect(inputEventFired).toBeTruthy();

    // Off

    await expect(inputElement.checked).toBeTruthy();
    inputElement.focus();
    await click(inputElement);
    await expect(inputEventFired).toBeTruthy();
  }
}

{
  render() {
    return html` <oc-switch-v2>Test Label</oc-switch-v2> `;
  },
  async play({
    canvasElement
  }) {
    const switchComponent: HTMLOcSwitchV2Element = Array.from(canvasElement.getElementsByTagName("oc-switch-v2"))[0]!;
    const inputElement: HTMLInputElement | null = deepQuerySelector(switchComponent, ".input")!;
    let clickEventFired = false;
    switchComponent.addEventListener("click", () => {
      clickEventFired = true;
    });

    // On

    inputElement.checked = false;
    inputElement.focus();
    await expect(inputElement.checked).toBeFalsy();
    await click(inputElement);
    await expect(clickEventFired).toBeTruthy();

    // Off

    await expect(inputElement.checked).toBeTruthy();
    inputElement.focus();
    await click(inputElement);
    await expect(clickEventFired).toBeTruthy();
  }
}

{
  render() {
    return html` <oc-switch-v2>Test Label</oc-switch-v2> `;
  },
  async play({
    canvasElement
  }) {
    const switchComponent: HTMLOcSwitchV2Element = Array.from(canvasElement.getElementsByTagName("oc-switch-v2"))[0]!;
    const inputElement: HTMLInputElement | null = deepQuerySelector(switchComponent, ".input")!;
    switchComponent.addEventListener("click", ev => {
      ev.preventDefault();
    });

    // On

    inputElement.focus();
    await expect(inputElement.checked).toBeFalsy();
    await click(inputElement);
    await expect(switchComponent.checked).toBeFalsy();

    // Off

    await expect(inputElement.checked).toBeFalsy();
    inputElement.focus();
    await click(inputElement);
    await expect(switchComponent.checked).toBeFalsy();
  }
}

{
  parameters: {
    chromatic: {
      disableSnapshot: true
    }
  },
  render() {
    return html`
      <oc-switch-v2>no defaults set</oc-switch-v2>
      <oc-switch-v2 value="test" checked>Test Label</oc-switch-v2>
    `;
  },
  async play({
    canvasElement
  }) {
    const [sutWithoutAttributes, sutWithAttributes] = Array.from(canvasElement.getElementsByTagName("oc-switch-v2")) as (HTMLOcSwitchV2Element & {
      defaultChecked: boolean;
      defaultValue: string;
    })[];

    // TEST sutWithoutAttributes
    await expect(sutWithoutAttributes.checked).toBeFalsy();
    await expect(sutWithoutAttributes.defaultChecked).toBeFalsy();
    await expect(sutWithoutAttributes.hasAttribute("checked")).toBeFalsy();
    await expect(sutWithoutAttributes.value).toBe("on");
    await expect(sutWithoutAttributes.defaultValue).toBe("");
    await expect(sutWithoutAttributes.hasAttribute("value")).toBeFalsy();
    sutWithoutAttributes.checked = true;
    sutWithoutAttributes.value = "new on";
    await expect(sutWithoutAttributes.checked).toBeTruthy();
    await expect(sutWithoutAttributes.defaultChecked).toBeFalsy();
    await expect(sutWithoutAttributes.hasAttribute("checked")).toBeFalsy();
    await expect(sutWithoutAttributes.value).toBe("new on");
    // await expect(sutWithoutAttributes.defaultValue).toBe("new on");
    // await expect(sutWithoutAttributes.getAttribute("value")).toBe("new on");

    // TEST sutWithAttributes
    await expect(sutWithAttributes.checked).toBeTruthy();
    await expect(sutWithAttributes.defaultChecked).toBeTruthy();
    await expect(sutWithAttributes.hasAttribute("checked")).toBeTruthy();
    await expect(sutWithAttributes.value).toBe("test");
    await expect(sutWithAttributes.defaultValue).toBe("test");
    await expect(sutWithAttributes.getAttribute("value")).toBe("test");
    sutWithAttributes.checked = false;
    sutWithAttributes.value = "new test";
    await expect(sutWithAttributes.checked).toBeFalsy();
    await expect(sutWithAttributes.defaultChecked).toBeTruthy();
    await expect(sutWithAttributes.hasAttribute("checked")).toBeTruthy();
    await expect(sutWithAttributes.value).toBe("new test");
    // await expect(sutWithAttributes.defaultValue).toBe("new test");
    // await expect(sutWithAttributes.getAttribute("value")).toBe("new test");

    // TEST programmatic created
    const sutCreated = document.createElement("oc-switch-v2") as HTMLOcSwitchV2Element & {
      defaultChecked: boolean;
      defaultValue: string;
    };
    sutCreated.innerText = "created";
    sutCreated.checked = true;
    canvasElement.append(sutCreated);
    await expect(sutCreated.checked).toBeTruthy();
    await expect(sutCreated.defaultChecked).toBeFalsy();
    await expect(sutCreated.hasAttribute("checked")).toBeFalsy();
    await expect(sutCreated.value).toBe("on");
    await expect(sutCreated.defaultValue).toBe("");
    await expect(sutCreated.hasAttribute("value")).toBeFalsy();
    sutCreated.defaultChecked = true;
    sutCreated.defaultValue = "foo value";
    await expect(sutCreated.checked).toBeTruthy();
    await expect(sutCreated.defaultChecked).toBeTruthy();
    await expect(sutCreated.hasAttribute("checked")).toBeTruthy();
    await expect(sutCreated.value).toBe("foo value");
    await expect(sutCreated.defaultValue).toBe("foo value");
    await expect(sutCreated.getAttribute("value")).toBe("foo value");
  }
}

{
  name: "Demo: loading state",
  argTypes: hideControlsBadge(Metadata),
  parameters: {
    controls: {
      disabled: true
    },
    // Disables Chromatic's snapshotting, as the spinner is animated und thus leads to diffs
    chromatic: {
      disableSnapshot: true
    }
  },
  render: () => {
    return html` <oc-switch-v2 label-placement="left">Click me</oc-switch-v2>

      <script>
        (() => {
          const [switchElement] = document.getElementsByTagName("oc-switch-v2");
          switchElement.addEventListener("click", () => {
            if (switchElement.loading) {
              return;
            }

            switchElement.loading = true;
            setTimeout(() => {
              switchElement.loading = false;
            }, 1000);
          });
        })();
      </script>`;
  }
}

{
  name: "Demo: form with switch",
  argTypes: hideControlsBadge(Metadata),
  parameters: {
    controls: {
      disabled: true
    }
  },
  render: () => html`<div>
        <form>
          <oc-switch-v2 name="test" label-placement="left">Switch label</oc-switch-v2>
          <br />
          <oc-switch-v2 disabled label-placement="left">Disabled switch</oc-switch-v2>
          <br />
          <oc-button-v1 type="submit">Submit</oc-button-v1>
        </form>
      </div>
      <script>
        (() => {
          const [form] = document.getElementsByTagName("form");

          form.addEventListener("submit", (ev) => {
            let formData = new FormData(form);
            let data = "";
            formData.forEach((value, key) => (data += key + "=" + value + "\\n"));
            console.log(data);
            alert("sending:\\n" + data);
            ev.preventDefault();
          });
        })();
      </script> `
}

{
  name: "Demo: exposed state",
  argTypes: hideControlsBadge(Metadata),
  parameters: {
    controls: {
      disabled: true
    },
    // Disables Chromatic's snapshotting, as the spinner is animated und thus leads to diffs
    chromatic: {
      disableSnapshot: true
    }
  },
  render: () => {
    return html` <oc-switch-v2 checked label-placement="left">switch</oc-switch-v2>
      <p>
        the background is red, when the modern syntax<br /><code
          >oc-switch-v2:state(checked) {}</code
        >
        applies
      </p>
      <p>
        for demo purpose, it is yellow in older browsers
        <br /><code>oc-switch-v2[state--checked] {}</code>
      </p>

      <style>
        /* Unknown pseudo selector 'state'?, You are wrong IntelliJ, that is valid
         https://developer.mozilla.org/en-US/docs/Web/CSS/:state
         */
        oc-switch-v2:state(checked) {
          background-color: #f00;
        }
        /* in older browsers, this is done by a mixin packages/otto-components-utils/scss/_mixins/custom-state.scss */
        oc-switch-v2[state--checked] {
          background: yellow;
        }
      </style>`;
  }
}