<svelte:options
  customElement={{
    tag: 'm-checkbox-group',
    props: {
      options: { reflect: true, type: 'Array', attribute: 'options' },
      isinvalid: { reflect: true, type: 'Boolean', attribute: 'isinvalid' },
      inline: { reflect: true, type: 'Boolean', attribute: 'inline' },
    },
    extend: customElementForwardEvents,
  }}
/>

<script lang="ts">
  import { customElementForwardEvents } from '../../utils';
  /**
   * A checkbox is an interactive component used to select or deselect an option, typically within a list of choices. It allows users to make multiple selections independently and is often accompanied by a label for clarity. Checkboxes are commonly used in forms, filters, settings, and preference selections to provide a simple and intuitive way to enable or disable specific options. <br><br> To put a label, requierement text, help text or to apply a valid or invalid message, the examples are available in the [Field section](/docs/form-elements-field--docs#input).
   */
  interface Props {
    [key: string]: any;
    /**
     * The name attribute for the checkbox element, typically used for form submission.
     */
    name: string;
    /**
     * The current value of the checkbox group.
     */
    value?: Array<string>;
    /**
     * list of properties of each checkbox button of the checkbox group
     */
    options: Array<{
      id: string;
      label: string;
      value: string;
      disabled?: boolean;
      indeterminate?: boolean;
      indented?: boolean;
    }>;
    /**
     * If `true`, applies an invalid state to the checkbox group.
     */
    isinvalid?: boolean;
    /**
     * If `true`, make the form element of the group inline.
     */
    inline?: boolean;
  }

  let {
    name,
    options,
    value = $bindable([]),
    inline,
    isinvalid,
    class: className,
    ...attrs
  }: Props = $props();
</script>

<div class={['mc-field__content', inline && 'mc-field__content--inline', className]} {...attrs}>
  {#each options as option (option.id)}
    <div class="mc-checkbox mc-field__item">
      <input
        type="checkbox"
        class={['mc-checkbox__input', isinvalid && 'is-invalid']}
        id={option.id}
        {name}
        disabled={option.disabled}
        indeterminate={option.indeterminate}
        aria-invalid={isinvalid}
        bind:group={value}
        value={option.value}
      />
      {#if option.label}
        <label for={option.id} class="mc-checkbox__label">{option.label}</label>
      {/if}
    </div>
  {/each}
</div>

<style>/**
 * Do not edit directly, this file was auto-generated.
 */
/* stylelint-disable string-no-newline */
.mc-checkbox {
  align-items: center;
  display: flex;
  gap: 0.5rem;
  padding: 0.375rem;
}
.mc-checkbox--indented {
  margin-left: 1.75rem;
}
.mc-checkbox__label {
  font-size: var(--font-size-150, 1rem);
  line-height: var(--line-height-s, 1.3);
  color: var(--forms-color-text-default, #000000);
  cursor: pointer;
}
.mc-checkbox__input {
  appearance: none;
  margin: 0;
  cursor: pointer;
  flex-shrink: 0;
  transition: box-shadow 200ms ease;
  background-color: var(--forms-color-background-default, #ffffff);
  border: var(--border-width-m, 0.125rem) solid var(--forms-color-border-default, #666666);
  border-radius: var(--forms-border-radius, 0.25rem);
  transition: all ease 200ms;
  height: 1.25rem;
  width: 1.25rem;
  position: relative;
}
.mc-checkbox__input::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--forms-color-icon-inverse, #ffffff);
  opacity: 0;
  transform: scale(0.6);
  transition: 0.15s ease;
}
.mc-checkbox__input:hover {
  border-color: var(--forms-color-border-hover, #4d4d4d);
}
.mc-checkbox__input:focus-visible {
  box-shadow: 0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));
  outline: 0.125rem solid transparent;
  outline-offset: 0.125rem;
}
.mc-checkbox__input:checked::after {
  opacity: 1;
  transform: scale(1);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' viewBox='0 0 16 16'%3E%3Cpath d='M7.63 11.21a1 1 0 0 1-1.38 0l-2.92-2.6a1 1 0 1 1 1.34-1.48l2.22 2 4.41-4.34a1 1 0 1 1 1.4 1.42z'/%3E%3C/svg%3E") no-repeat center/contain;
}
.mc-checkbox__input:indeterminate::after {
  opacity: 1;
  transform: scale(1);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E") no-repeat center/contain;
}
.mc-checkbox__input:checked, .mc-checkbox__input:indeterminate {
  background-color: var(--forms-color-background-checked, #117f03);
  background-size: 1rem 1rem;
  background-position: center;
}
.mc-checkbox__input:checked, .mc-checkbox__input:indeterminate, .mc-checkbox__input:disabled {
  border-color: transparent;
}
.mc-checkbox__input:disabled {
  background-color: var(--forms-color-background-disabled, #d9d9d9);
  cursor: not-allowed;
}
.mc-checkbox__input:disabled:checked::after {
  background-color: var(--forms-color-icon-disabled, #737373);
}
.mc-checkbox__input:disabled:indeterminate::after {
  background-color: var(--forms-color-icon-disabled, #737373);
}
.mc-checkbox__input:disabled + .mc-checkbox__label {
  color: var(--forms-color-text-disabled, #737373);
  cursor: not-allowed;
}
.mc-checkbox__input:not(:disabled):checked:hover, .mc-checkbox__input:not(:disabled):indeterminate:hover {
  background-color: var(--forms-color-background-checked-hover, #006902);
}
.mc-checkbox__input.is-invalid:not(:checked, :indeterminate) {
  border-color: var(--forms-color-border-invalid, #ea302d);
}
.mc-checkbox__input.is-invalid:not(:checked, :indeterminate):hover {
  border-color: var(--forms-color-border-invalid-hover, #c61112);
}

/* stylelint-enable string-no-newline */
/* stylelint-disable string-no-newline */
.mc-field__label, .mc-field__legend {
  font-size: var(--font-size-100, 0.875rem);
  line-height: var(--line-height-s, 1.3);
  font-weight: var(--font-weight-regular, 400);
  color: var(--field-color-label, #000000);
}
.mc-field__legend {
  padding-inline: 0;
}
.mc-field__requirement, .mc-field__help {
  font-size: var(--font-size-50, 0.75rem);
  line-height: var(--line-height-m, 1.5);
  font-weight: var(--font-weight-regular, 400);
  vertical-align: top;
  color: var(--field-color-requirement, #666666);
}
.mc-field__help {
  display: block;
  margin-top: 0.125rem;
}
.mc-field__content {
  margin-top: 0.5rem;
}
.mc-field__validation-message {
  font-size: var(--font-size-100, 0.875rem);
  line-height: var(--line-height-m, 1.5);
  display: inline-flex;
  gap: 0.25rem;
  margin-top: 0.25rem;
}
.mc-field__validation-message.is-valid::before, .mc-field__validation-message.is-invalid::before {
  content: "";
  height: 1.25rem;
  width: 1.25rem;
}
.mc-field__validation-message.is-valid {
  color: var(--field-color-validation-valid, #117f03);
}
.mc-field__validation-message.is-valid::before {
  background-color: var(--field-color-validation-valid, #117f03);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M3.25 10c0-3.72792 3.02208-6.75 6.75-6.75 3.7279 0 6.75 3.02208 6.75 6.75 0 3.7279-3.0221 6.75-6.75 6.75-3.72792 0-6.75-3.0221-6.75-6.75ZM10 1.75c-4.55635 0-8.25 3.69365-8.25 8.25 0 4.5563 3.69365 8.25 8.25 8.25 4.5563 0 8.25-3.6937 8.25-8.25 0-4.55635-3.6937-8.25-8.25-8.25Zm4.2803 6.697c.2929-.2929.2929-.76777 0-1.06066-.2929-.2929-.7677-.2929-1.0606 0L9.16667 11.4393 7.197 9.46967c-.2929-.29289-.76777-.29289-1.06066 0-.2929.29289-.2929.76773 0 1.06063l2.5 2.5c.29289.2929.76776.2929 1.06066 0l4.5833-4.5833Z'/%3E%3C/svg%3E") no-repeat center/contain;
}
.mc-field__validation-message.is-invalid {
  color: var(--field-color-validation-invalid, #c61112);
}
.mc-field__validation-message.is-invalid::before {
  background-color: var(--field-color-validation-invalid, #c61112);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 3.25c-3.72792 0-6.75 3.02208-6.75 6.75 0 3.7279 3.02208 6.75 6.75 6.75 3.7279 0 6.75-3.0221 6.75-6.75 0-3.72792-3.0221-6.75-6.75-6.75ZM1.75 10c0-4.55635 3.69365-8.25 8.25-8.25 4.5563 0 8.25 3.69365 8.25 8.25 0 4.5563-3.6937 8.25-8.25 8.25-4.55635 0-8.25-3.6937-8.25-8.25ZM10 5.91667c.4142 0 .75.33578.75.75v4.16663c0 .4142-.3358.75-.75.75-.41421 0-.75-.3358-.75-.75V6.66667c0-.41422.33579-.75.75-.75Zm0 8.25003c.4602 0 .8333-.3731.8333-.8334 0-.4602-.3731-.8333-.8333-.8333-.46024 0-.83333.3731-.83333.8333 0 .4603.37309.8334.83333.8334Z'/%3E%3C/svg%3E") no-repeat center/contain;
}
.mc-field__validation-message.is-loading {
  color: var(--field-color-validation-loading, #666666);
}
.mc-field--group {
  border-width: 0;
  margin-inline: 0;
  padding: 0;
}
.mc-field--group .mc-field__content {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: 0.25rem;
}
.mc-field--group .mc-field__content:where(.mc-field__content--inline) {
  flex-flow: row wrap;
  gap: 0.25rem 1rem;
}

/* stylelint-enable string-no-newline */
.mc-field__content:where(.mc-field__content--inline) {
  display: flex;
  flex-flow: row wrap;
  gap: 0.25rem 1rem;
}</style>
