WRNexusJS/packages/ui/components/checkbox.wrn

component Checkbox {
  outputs {
    input(payload: { value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)
    change(payload: { value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)
    focus(payload: { sourceEvent?: Event; [key: string]: string | number | boolean | null | object })
    blur(payload: { sourceEvent?: Event; [key: string]: string | number | boolean | null | object })
    invalid(payload: { message?: string; value: string | number | boolean | null | object; sourceEvent?: Event; [key: string]: string | number | boolean | null | object })
  }

  props {
size: string = "default"
    color: string = "primary"
    id: string = ""
    name: string = ""
    label: string = "Checkbox"
    hiddenLabel: boolean = false
    placeholder: string = ""
    variant: string = "normal"
    icon: string = ""
    iconPosition: string = "start"
    value: string = "on"
    values: unknown[] = []
    options: unknown[] = []
    checked: boolean = false
    indeterminate: boolean = false
    orientation: string = "vertical"
    card: boolean = false
    rightAligned: boolean = false
    list: boolean = false
    helperText: string = ""
    cornerHint: string = ""
    error: string = ""
    inline: boolean = false
    readonly: boolean = false
    disabled: boolean = false
    required: boolean = false
    class: string = ""
  }
  functions {
    client function emitField(nameEvent, sourceEvent) { sourceEvent.stopPropagation(); output[nameEvent]({ checked: sourceEvent.currentTarget.checked, value: sourceEvent.currentTarget.value, values: values, name: name, sourceEvent: sourceEvent }) }
    client function preventReadonly(sourceEvent) { if (readonly) sourceEvent.preventDefault() }
  }
  view {
    <div
      {...attrs}
      class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--choice-field wire-next--checkbox-field {class}"
      data-inline="{inline}"
      data-invalid="{error ? 'true' : 'false'}"
      data-orientation="{orientation}"
      data-card="{card}"
      data-list="{list}"
      data-right-aligned="{rightAligned}"
    >
      <div
        class="wire-next__field-heading"
      >
        {#if options.length || cornerHint}
          <span
            class="{hiddenLabel ? 'wire-next__sr-only' : ''}"
          >
            {label}
          </span>
          {#if cornerHint}
            <span
              class="wire-next__field-hint"
            >
              {cornerHint}
            </span>
          {/if}
        {/if}
      </div>
      {#if options.length}
        <div
          class="wire-next__checkbox-group"
          role="group"
          aria-label="{hiddenLabel ? label : ''}"
          aria-invalid="{error ? 'true' : 'false'}"
        >
          {#each options as option}
            <label
              class="wire-next__choice wire-next--checkbox"
              for="{id || name}-{option.value}"
              data-variant="{variant}"
              data-disabled="{disabled || option.disabled}"
            >
              <input
                id="{id || name}-{option.value}"
                type="checkbox"
                name="{name}"
                value="{option.value}"
                checked="{values.includes(option.value) || option.checked}"
                disabled="{disabled || option.disabled}"
                required="{required}"
                readonly="{readonly}"
                @click="preventReadonly(event)"
                @input="emitField('input', event)"
                @change="emitField('change', event)"
                @focus="emitField('focus', event)"
                @blur="emitField('blur', event)"
                @invalid="emitField('invalid', event)"
              />
              <span
                class="wire-next__choice-copy"
              >
                <strong>{option.label}</strong>
                {#if option.description}
                  <small>{option.description}</small>
                {/if}
              </span>
            </label>
          {/each}
        </div>
      {:else}
        <div
          class="wire-next__checkbox-content"
        >
          <label
            class="wire-next__choice wire-next--checkbox"
            for="{id || name}"
            data-variant="{variant}"
            data-icon-position="{iconPosition}"
          >
            <input
              id="{id || name}"
              type="checkbox"
              name="{name}"
              value="{value}"
              checked="{checked}"
              disabled="{disabled}"
              required="{required}"
              readonly="{readonly}"
              aria-checked="{indeterminate ? 'mixed' : (checked ? 'true' : 'false')}"
              aria-invalid="{error ? 'true' : 'false'}"
              @click="preventReadonly(event)"
              @input="emitField('input', event)"
              @change="emitField('change', event)"
              @focus="emitField('focus', event)"
              @blur="emitField('blur', event)"
              @invalid="emitField('invalid', event)"
            />
            {#if icon}
              <span
                class="{icon}"
                aria-hidden="true"
              >
              </span>
            {/if}
            <span
              class="{hiddenLabel || cornerHint ? 'wire-next__sr-only' : ''}"
            >
              {label}
            </span>
            <div
              class="wire-next__checkbox-slot"
            >
              <slot></slot>
            </div>
          </label>
        </div>
      {/if}
      {#if helperText}
        <small
          class="wire-next__field-help"
        >
          {helperText}
        </small>
      {/if}
      <small
        class="wire-next__field-error"
        data-error="{name}"
      >
        {error}
      </small>
    </div>
  }

  style {
    .wire-next__checkbox-content {
      display: grid;
      width: 100%;
      min-width: 0;
      align-items: start;
      grid-template-columns: minmax(0, 1fr);
    }

    .wire-next__checkbox-slot {
      display: block;
      min-width: 0;
      flex: 1 1 auto;
      color: var(--wire-color-muted);
      font-size: 0.75rem;
      line-height: 1.45;
    }

    .wire-next__checkbox-slot:empty {
      display: none;
    }

    .wire-next__checkbox-slot :is(a, button) {
      color: var(--wire-field-color);
    }
  }
}