Checkbox

{
  name: "Indeterminate",
  args: {
    labelSlot: `<label slot="label"> Alle Optionen </label>`
  },
  render({
    defaultSlot,
    labelSlot,
    hintSlot,
    errorSlot,
    ...props
  }) {
    return html`
      <oc-checkbox-v2 id="indeterminate_parent" ${spread(props)}>
        ${unsafeHTML(defaultSlot)}${unsafeHTML(labelSlot)}${unsafeHTML(hintSlot)}${unsafeHTML(errorSlot)}
      </oc-checkbox-v2>

      <div style="display: flex; gap: .5rem; padding: .75rem; flex-direction: column;">
        <oc-checkbox-v2 id="indeterminate_option1">
          <input type="checkbox" aria-label="oc-auto" />
          <label slot="label"> Option 1 </label>
        </oc-checkbox-v2>
        <oc-checkbox-v2 id="indeterminate_option2">
          <input type="checkbox" aria-label="oc-auto" />
          <label slot="label"> Option 2 </label>
        </oc-checkbox-v2>
        <oc-checkbox-v2 id="indeterminate_option3">
          <input type="checkbox" aria-label="oc-auto" />
          <label slot="label"> Option 3 </label>
        </oc-checkbox-v2>
      </oc-form-group-v1>

      <script>
        (() => {
          const parentEl = document.querySelector("#indeterminate_parent");
          const parentInput = parentEl.querySelector("input");
          const optionIds = [
            "#indeterminate_option1",
            "#indeterminate_option2",
            "#indeterminate_option3",
          ];
          const optionInputs = optionIds.map((id) =>
            document.querySelector(id).querySelector("input"),
          );

          function updateParent() {
            const checkedCount = optionInputs.filter((i) => i.checked).length;
            if (checkedCount === 0) {
              parentInput.checked = false;
              parentInput.indeterminate = false;
            } else if (checkedCount === optionInputs.length) {
              parentInput.checked = true;
              parentInput.indeterminate = false;
            } else {
              parentInput.checked = false;
              parentInput.indeterminate = true;
            }
          }

          function updateOptions(checked) {
            optionInputs.forEach((i) => {
              i.checked = checked;
              i.dispatchEvent(new Event("change"));
            });
          }

          parentEl.addEventListener("change", (e) => {
            updateOptions(e.target.checked);
          });

          optionInputs.forEach((input) => {
            input.addEventListener("change", updateParent);
          });

          // Initial state: indeterminate
          optionInputs[0].checked = true;
          optionInputs[1].checked = false;
          optionInputs[2].checked = true;
          updateParent();
        })();
      </script>
    `;
  }
}

{
  name: "Demo: filter",
  parameters: {
    controls: {
      disabled: true
    }
  },
  argTypes: hideControlsBadge(Metadata),
  render() {
    return html`
      <oc-form-group-v1 orientation="vertical">
        <oc-checkbox-v2>
          <input type="checkbox" name="zielgruppe" value="Damen" aria-label="oc-auto" />
          <label slot="label" class="my-label"
            >Damen<span class="oc-text-color-secondary">374637</span></label
          >
        </oc-checkbox-v2>
        <oc-checkbox-v2>
          <input type="checkbox" name="zielgruppe" value="Herren" aria-label="oc-auto" />
          <label slot="label" class="my-label"
            >Herren<span class="oc-text-color-secondary">234324</span></label
          >
        </oc-checkbox-v2>
        <oc-checkbox-v2>
          <input type="checkbox" name="zielgruppe" value="Mädchen" aria-label="oc-auto" />
          <label slot="label" class="my-label"
            >Mädchen<span class="oc-text-color-secondary">2323</span></label
          >
        </oc-checkbox-v2>
        <oc-checkbox-v2>
          <input type="checkbox" name="zielgruppe" value="Jungen" aria-label="oc-auto" />
          <label slot="label" class="my-label"
            >Jungen<span class="oc-text-color-secondary">1224</span></label
          >
        </oc-checkbox-v2>
      </oc-form-group-v1>

      <oc-form-group-v1 class="oc-mt-200" orientation="vertical">
        <oc-checkbox-v2 label-placement="left">
          <input type="checkbox" name="zielgruppe" value="Damen" aria-label="oc-auto" />
          <label slot="label" class="my-label"
            >Damen<span class="oc-text-color-secondary">374637</span></label
          >
        </oc-checkbox-v2>
        <oc-checkbox-v2 label-placement="left">
          <input type="checkbox" name="zielgruppe" value="Herren" aria-label="oc-auto" />
          <label slot="label" class="my-label"
            >Herren<span class="oc-text-color-secondary">234324</span></label
          >
        </oc-checkbox-v2>
        <oc-checkbox-v2 label-placement="left">
          <input type="checkbox" name="zielgruppe" value="Mädchen" aria-label="oc-auto" />
          <label slot="label" class="my-label"
            >Mädchen<span class="oc-text-color-secondary">2323</span></label
          >
        </oc-checkbox-v2>
        <oc-checkbox-v2 label-placement="left">
          <input type="checkbox" name="zielgruppe" value="Jungen" aria-label="oc-auto" />
          <label slot="label" class="my-label"
            >Jungen<span class="oc-text-color-secondary">1224</span></label
          >
        </oc-checkbox-v2>
      </oc-form-group-v1>

      <style>
        .my-label {
          display: flex;
          justify-content: space-between;
        }
      </style>
    `;
  }
}

{
  parameters: {
    docs: {
      disable: true
    }
  },
  render() {
    return html`
      <oc-checkbox-v2>
        <input type="checkbox" aria-label="oc-auto" name="brand" value="Samsung" />
        <label slot="label">Samsung</label>
      </oc-checkbox-v2>
      <oc-checkbox-v2>
        <input type="checkbox" aria-label="oc-auto" name="brand" value="LG" />
        <label slot="label">LG</label>
      </oc-checkbox-v2>
      <oc-checkbox-v2>
        <input type="checkbox" aria-label="oc-auto" name="size" value="S" />
        <label slot="label">S</label>
      </oc-checkbox-v2>
      <oc-checkbox-v2>
        <input type="checkbox" aria-label="oc-auto" name="size" value="M" />
        <label slot="label">M</label>
      </oc-checkbox-v2>
    `;
  },
  async play({
    canvasElement
  }) {
    const [brand1, brand2, size1, size2] = Array.from(canvasElement.getElementsByTagName("oc-checkbox-v2"));
    const getInput = (element: Element) => element.querySelector("input") as HTMLInputElement;
    await expect(getInput(brand1).checked).toBeFalsy();
    await expect(getInput(brand2).checked).toBeFalsy();
    await expect(getInput(size1).checked).toBeFalsy();
    await expect(getInput(size2).checked).toBeFalsy();
    await click(getInput(brand1));
    await click(getInput(size1));
    await expect(getInput(brand1).checked).toBeTruthy();
    await expect(getInput(brand2).checked).toBeFalsy();
    await expect(getInput(size1).checked).toBeTruthy();
    await expect(getInput(size2).checked).toBeFalsy();
    await click(getInput(brand2));
    await click(getInput(size2));
    await expect(getInput(brand1).checked).toBeTruthy();
    await expect(getInput(brand2).checked).toBeTruthy();
    await expect(getInput(size1).checked).toBeTruthy();
    await expect(getInput(size2).checked).toBeTruthy();
    await click(getInput(brand1));
    await click(getInput(size1));
    await click(getInput(brand2));
    await click(getInput(size2));
    await expect(getInput(brand1).checked).toBeFalsy();
    await expect(getInput(brand2).checked).toBeFalsy();
    await expect(getInput(size1).checked).toBeFalsy();
    await expect(getInput(size2).checked).toBeFalsy();
  }
}

{
  parameters: {
    docs: {
      disable: true
    }
  },
  render() {
    return html` <form>
      <oc-checkbox-v2>
        <input type="checkbox" aria-label="oc-auto" name="brand" value="Samsung" />
        <label slot="label">Samsung</label>
      </oc-checkbox-v2>
      <oc-checkbox-v2>
        <input type="checkbox" aria-label="oc-auto" name="brand" value="LG" />
        <label slot="label">LG</label>
      </oc-checkbox-v2>
      <oc-checkbox-v2>
        <input type="checkbox" aria-label="oc-auto" name="size" value="S" />
        <label slot="label">S</label>
      </oc-checkbox-v2>
      <oc-checkbox-v2>
        <input type="checkbox" aria-label="oc-auto" name="size" value="M" />
        <label slot="label">M</label>
      </oc-checkbox-v2>
    </form>`;
  },
  async play({
    canvasElement
  }) {
    const [brand1, brand2, size1, size2] = Array.from(canvasElement.getElementsByTagName("oc-checkbox-v2"));
    const getInput = (element: Element) => element.querySelector("input") as HTMLInputElement;
    await click(getInput(brand1));
    await click(getInput(size1));
    await click(getInput(brand2));
    await click(getInput(size2));
    const form = canvasElement.getElementsByTagName("form").item(0);

    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    // @ts-ignore
    const data = Array.from(new FormData(form).entries());
    await expect(data).toStrictEqual([["brand", "Samsung"], ["brand", "LG"], ["size", "S"], ["size", "M"]]);
  }
}

{
  render() {
    return html`
      <form>
        <oc-checkbox-v1 name="name">{Enter}</oc-checkbox-v1>
        <button type="submit"></button>
      </form>
    `;
  },
  async play({
    canvasElement
  }) {
    canvasElement.getElementsByTagName("form").item(0)!.addEventListener("submit", ev => ev.preventDefault());
    const checkbox = canvasElement.getElementsByTagName("oc-checkbox-v1").item(0)!;
    let fired = 0;
    checkbox.addEventListener("keydown", () => fired += 1);
    checkbox.dispatchEvent(new KeyboardEvent("keydown", {
      key: "Enter"
    }));
    await expect(fired, "keydown should be fired one time").toBe(1);
  }
}

{
  render() {
    return html`
      <form id="form1">
        <oc-checkbox-v1 name="name">{Enter}</oc-checkbox-v1>
        <button type="submit" data-should-submit></button>
        <button type="submit" data-should-not-submit></button>
      </form>

      <form id="form2">
        <oc-checkbox-v1 name="name">{Enter}</oc-checkbox-v1>
        <input type="submit" data-should-submit />
        <button type="submit" data-should-not-submit></button>
      </form>

      <form id="form3">
        <oc-checkbox-v1 name="name">{Enter}</oc-checkbox-v1>
        Should submit the form
      </form>

      <form id="form4">Should submit the form</form>
      <oc-checkbox-v1 name="name" form="form4">{Enter}</oc-checkbox-v1>

      <form id="form5">
        <button type="submit" data-should-submit></button>
        <button type="submit" data-should-not-submit></button>
      </form>
      <oc-checkbox-v1 name="name" form="form5">{Enter}</oc-checkbox-v1>

      <form id="form6">
        <input type="submit" data-should-submit />
        <button type="submit" data-should-not-submit></button>
      </form>
      <oc-checkbox-v1 name="name" form="form6">{Enter}</oc-checkbox-v1>

      <form id="form7">
        <oc-checkbox-v1 name="name">{Enter}</oc-checkbox-v1>
        <button type="submit" disabled data-should-not-submit></button>
        <button type="submit" data-should-not-submit></button>
      </form>

      <form id="form8">
        <oc-checkbox-v1 name="name">{Enter}</oc-checkbox-v1>
        <input type="submit" disabled data-should-not-submit />
        <input type="submit" data-should-not-submit />
      </form>
    `;
  },
  async play({
    canvasElement
  }) {
    const submits: {
      form: string;
      submitter: HTMLElement | null;
    }[] = [];
    canvasElement.querySelectorAll("form").forEach(form => form.addEventListener("submit", ev => {
      ev.preventDefault();
      submits.push({
        form: form.id,
        submitter: ev.submitter
      });
    }));
    const checkboxes = Array.from(canvasElement.querySelectorAll(`oc-checkbox-v1[name="name"]`)) as (HTMLOcTextFieldV1Element & {
      internals: ElementInternals;
    })[];
    for (let i = 0; i < checkboxes.length; i += 1) {
      const checkbox = checkboxes[i];
      // eslint-disable-next-line no-await-in-loop
      await expect(checkbox.internals.form?.id, "checkbox should have correct associated form").toBe(`form${i + 1}`);
    }

    // eslint-disable-next-line no-restricted-syntax
    for (const checkbox of checkboxes) {
      const input = checkbox.shadowRoot!.querySelector("input")!;
      // eslint-disable-next-line no-await-in-loop
      input.dispatchEvent(new KeyboardEvent("keydown", {
        key: "Enter"
      }));
    }
    await expect(submits.length, "number of submits").toBe(6);
    await expect(submits[0].form).toBe("form1");
    await expect(submits[0].submitter?.dataset.shouldSubmit).toBeDefined();
    await expect(submits[1].form).toBe("form2");
    await expect(submits[1].submitter?.dataset.shouldSubmit).toBeDefined();
    await expect(submits[2].form).toBe("form3");
    await expect(submits[2].submitter).toBe(null);
    await expect(submits[3].form).toBe("form4");
    await expect(submits[3].submitter).toBe(null);
    await expect(submits[4].form).toBe("form5");
    await expect(submits[4].submitter?.dataset.shouldSubmit).toBeDefined();
    await expect(submits[5].form).toBe("form6");
    await expect(submits[5].submitter?.dataset.shouldSubmit).toBeDefined();
  }
}

{
  parameters: {
    docs: {
      disable: true
    }
  },
  render() {
    return html`
      <oc-checkbox-v1 name="brand" value="Samsung">Samsung</oc-checkbox-v1>
      <oc-checkbox-v1 name="brand" value="LG">LG</oc-checkbox-v1>
      <oc-checkbox-v1 name="size" value="S">S</oc-checkbox-v1>
      <oc-checkbox-v1 name="size" value="M">M</oc-checkbox-v1>
    `;
  },
  async play({
    canvasElement
  }) {
    const [brand1, brand2, size1, size2] = Array.from(canvasElement.getElementsByTagName("oc-checkbox-v1"));
    await expect(brand1.checked).toBeFalsy();
    await expect(brand2.checked).toBeFalsy();
    await expect(size1.checked).toBeFalsy();
    await expect(size2.checked).toBeFalsy();
    await click(deepQuerySelector(brand1, ".checkbox")!);
    await click(deepQuerySelector(size1, ".checkbox")!);
    await expect(brand1.checked).toBeTruthy();
    await expect(brand2.checked).toBeFalsy();
    await expect(size1.checked).toBeTruthy();
    await expect(size2.checked).toBeFalsy();
    await click(deepQuerySelector(brand2, ".checkbox")!);
    await click(deepQuerySelector(size2, ".checkbox")!);
    await expect(brand1.checked).toBeTruthy();
    await expect(brand2.checked).toBeTruthy();
    await expect(size1.checked).toBeTruthy();
    await expect(size2.checked).toBeTruthy();
    await click(deepQuerySelector(brand1, ".checkbox")!);
    await click(deepQuerySelector(size1, ".checkbox")!);
    await click(deepQuerySelector(brand2, ".checkbox")!);
    await click(deepQuerySelector(size2, ".checkbox")!);
    await expect(brand1.checked).toBeFalsy();
    await expect(brand2.checked).toBeFalsy();
    await expect(size1.checked).toBeFalsy();
    await expect(size2.checked).toBeFalsy();
  }
}

{
  parameters: {
    docs: {
      disable: true
    }
  },
  render() {
    return html`
      <oc-checkbox-v1 name="size" value="S">S</oc-checkbox-v1>
      <oc-checkbox-v1 name="size" value="M">M</oc-checkbox-v1>
      <oc-checkbox-v1 name="size" value="L">L</oc-checkbox-v1>
    `;
  },
  async play({
    canvasElement
  }) {
    const [size1, size2, size3] = Array.from(canvasElement.getElementsByTagName(`oc-checkbox-v1`));
    size1.focus();
    await expect(size1).toHaveFocus();
    await expect(size1.checked).toBeFalsy();
    await expect(size2.checked).toBeFalsy();
    await expect(size3.checked).toBeFalsy();
    await click();
    await expect(size1.checked).toBeTruthy();
    await expect(size2.checked).toBeFalsy();
    await expect(size3.checked).toBeFalsy();
    await tab();
    await expect(size2).toHaveFocus();
    await expect(size1.checked).toBeTruthy();
    await expect(size2.checked).toBeFalsy();
    await expect(size3.checked).toBeFalsy();
    await click();
    await expect(size1.checked).toBeTruthy();
    await expect(size2.checked).toBeTruthy();
    await expect(size3.checked).toBeFalsy();
    await tab();
    await expect(size3).toHaveFocus();
    await click();
    await expect(size1.checked).toBeTruthy();
    await expect(size2.checked).toBeTruthy();
    await expect(size3.checked).toBeTruthy();
    await tab(true);
    await click();
    await expect(size1.checked).toBeTruthy();
    await expect(size2.checked).toBeFalsy();
    await expect(size3.checked).toBeTruthy();
  }
}

{
  parameters: {
    docs: {
      disable: true
    }
  },
  render() {
    return html` <form>
      <oc-checkbox-v1 name="brand" value="Samsung">Samsung</oc-checkbox-v1>
      <oc-checkbox-v1 name="brand" value="LG">LG</oc-checkbox-v1>
      <oc-checkbox-v1 name="size" value="S">S</oc-checkbox-v1>
      <oc-checkbox-v1 name="size" value="M">M</oc-checkbox-v1>
    </form>`;
  },
  async play({
    canvasElement
  }) {
    const [brand1, brand2, size1, size2] = Array.from(canvasElement.getElementsByTagName("oc-checkbox-v1"));
    await click(deepQuerySelector(brand1, ".checkbox")!);
    await click(deepQuerySelector(size1, ".checkbox")!);
    await click(deepQuerySelector(brand2, ".checkbox")!);
    await click(deepQuerySelector(size2, ".checkbox")!);
    const form = canvasElement.getElementsByTagName("form").item(0);

    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    // @ts-ignore
    const data = Array.from(new FormData(form).entries());
    await expect(data).toStrictEqual([["brand", "Samsung"], ["brand", "LG"], ["size", "S"], ["size", "M"]]);
  }
}

{
  parameters: {
    chromatic: {
      disableSnapshot: true
    }
  },
  render() {
    return html`
      <oc-checkbox-v1>no defaults set</oc-checkbox-v1>
      <oc-checkbox-v1 value="test" checked>Test Label</oc-checkbox-v1>
    `;
  },
  async play({
    canvasElement
  }) {
    const [sutWithoutAttributes, sutWithAttributes] = Array.from(canvasElement.getElementsByTagName("oc-checkbox-v1")) as (HTMLOcCheckboxV1Element & {
      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-checkbox-v1") as HTMLOcCheckboxV1Element & {
      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 form",
  parameters: {
    controls: {
      disabled: true
    }
  },
  argTypes: hideControlsBadge(Metadata),
  render() {
    return html`
      <form novalidate>
        <fieldset class="oc-mb-150">
          <legend>Marke*</legend>
          <oc-form-group-v1 orientation="horizontal" flex-behavior="shrink">
            <oc-checkbox-v1 name="brand" value="Samsung">Samsung</oc-checkbox-v1>
            <oc-checkbox-v1 name="brand" value="LG">LG</oc-checkbox-v1>
            <oc-checkbox-v1 name="brand" value="Philips">Philips</oc-checkbox-v1>
            <oc-checkbox-v1 name="brand" value="Sony">Sony</oc-checkbox-v1>
            <oc-checkbox-v1 name="brand" value="Hisense">Hisense</oc-checkbox-v1>
          </oc-form-group-v1>
        </fieldset>
        <fieldset class="oc-mb-150">
          <legend>Größe*</legend>
          <oc-form-group-v1 orientation="horizontal" flex-behavior="shrink">
            <oc-checkbox-v1 name="size" value="S">S</oc-checkbox-v1>
            <oc-checkbox-v1 name="size" value="M">M</oc-checkbox-v1>
            <oc-checkbox-v1 name="size" value="L">L</oc-checkbox-v1>
            <oc-checkbox-v1 name="size" value="XL">XL</oc-checkbox-v1>
            <oc-checkbox-v1 name="size" value="XXL">XXL</oc-checkbox-v1>
          </oc-form-group-v1>
        </fieldset>
        <fieldset class="oc-mb-150">
          <legend>Lorem*</legend>
          <oc-form-group-v1 orientation="horizontal" flex-behavior="shrink">
            <oc-checkbox-v1 name="lorem" value="1"
              >Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
              tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
              eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
              takimata sanctus est Lorem ipsum dolor sit amet.</oc-checkbox-v1
            >
            <oc-checkbox-v1 name="lorem" value="2"
              >At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
              no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
              consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
              dolore magna aliquyam erat, sed diam voluptua.</oc-checkbox-v1
            >
            <oc-checkbox-v1 name="lorem" value="3"
              >Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
              Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
              invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</oc-checkbox-v1
            >
          </oc-form-group-v1>
        </fieldset>
        <div style="display: flex; gap: 16px">
          <oc-button-v1 variant="secondary" type="reset">Reset</oc-button-v1>
          <oc-button-v1 type="submit">Submit</oc-button-v1>
        </div>
      </form>

      <script>
        (() => {
          const [form] = document.getElementsByTagName("form");
          const [group1, group2, group3] = document.getElementsByTagName("oc-form-group-v1");

          form.addEventListener("change", async () => {
            // wait for the next microtask to get the updated checked state
            await new Promise((resolve) => setTimeout(resolve));

            let formData = new FormData(form);
            if (formData.has("brand")) group1.validationMessage = "";
            if (formData.has("size")) group2.validationMessage = "";
            if (formData.has("lorem")) group3.validationMessage = "";
          });

          form.addEventListener("submit", (ev) => {
            let formData = new FormData(form);

            group1.validationMessage = formData.has("brand") ? "" : "Please select a brand.";
            group2.validationMessage = formData.has("size") ? "" : "Please select a size.";
            group3.validationMessage = formData.has("lorem") ? "" : "Please select a lorem.";

            if (formData.has("brand") && formData.has("size") && formData.has("lorem")) {
              let data = "";
              formData.forEach((value, key) => (data += key + "=" + value + "\\n"));
              console.log(data);
              alert("sending:\\n" + data);
            }

            ev.preventDefault();
          });
        })();
      </script>
    `;
  }
}

{
  name: "Demo: filter",
  parameters: {
    controls: {
      disabled: true
    }
  },
  argTypes: hideControlsBadge(Metadata),
  render() {
    return html`
      <div lang="de">
        <oc-form-group-v1 orientation="vertical">
          <oc-checkbox-v1
            name="zielgruppe"
            value="Damen"
            oc-aria-label="Damen 374637 Treffer"
            class="flex-label"
            >Damen<span class="number">374637</span>
          </oc-checkbox-v1>
          <oc-checkbox-v1
            name="zielgruppe"
            value="Herren"
            oc-aria-label="Herren 234324 Treffer"
            class="flex-label"
            >Herren<span class="number">234324</span>
          </oc-checkbox-v1>
          <oc-checkbox-v1
            name="zielgruppe"
            value="Mädchen"
            oc-aria-label="Mädchen 2323 Treffer"
            class="flex-label"
            >Mädchen<span class="number">2323</span>
          </oc-checkbox-v1>
          <oc-checkbox-v1
            name="zielgruppe"
            value="Jungen"
            oc-aria-label="Jungen 1224 Treffer"
            class="flex-label"
            >Jungen<span class="number">1224</span>
          </oc-checkbox-v1>
        </oc-form-group-v1>

        <oc-form-group-v1 class="oc-mt-200" orientation="vertical">
          <oc-checkbox-v1
            label-placement="left"
            name="zielgruppe"
            value="Damen"
            oc-aria-label="Damen 374637 Treffer"
            class="flex-label"
            >Damen<span class="number">374637</span>
          </oc-checkbox-v1>
          <oc-checkbox-v1
            label-placement="left"
            name="zielgruppe"
            value="Herren"
            oc-aria-label="Herren 234324 Treffer"
            class="flex-label"
            >Herren<span class="number">234324</span>
          </oc-checkbox-v1>
          <oc-checkbox-v1
            label-placement="left"
            name="zielgruppe"
            value="Mädchen"
            oc-aria-label="Mädchen 2323 Treffer"
            class="flex-label"
            >Mädchen<span class="number">2323</span>
          </oc-checkbox-v1>
          <oc-checkbox-v1
            label-placement="left"
            name="zielgruppe"
            value="Jungen"
            oc-aria-label="Jungen 1224 Treffer"
            class="flex-label"
            >Jungen<span class="number">1224</span>
          </oc-checkbox-v1>
        </oc-form-group-v1>
      </div>

      <style>
        .flex-label::part(default) {
          display: flex;
          justify-content: space-between;
        }

        .number {
          color: var(--oc-base-color-gray-200);
        }
      </style>
    `;
  }
}