<script lang="ts">
  import Loader from '../loader/Loader.svelte';

  /**
   * A field label is a text element that identifies the purpose of an input field, providing users with clear guidance on what information to enter. It is typically placed above the input field and may include indicators for required or optional fields. Field Labels improve form usability, accessibility, and data entry accuracy by ensuring users understand the expected input.
   *
   * @slot default - Use this slot to insert the form element of your choice
   */
  interface Props {
    [key: string]: any;
    /**
     * A unique identifier for the form field, used to associate the label with the form element.
     */
    id: string;
    /**
     * The text displayed as the label for the form field.
     */
    label: string;
    /**
     * Additional text displayed alongside the label, typically used to indicate if the form field is required or optional
     */
    requirementtext?: string;
    /**
     * Text shown below the form field to provide additional context or instructions for the user.
     */
    helptext?: string;
    /**
     * The value of the `id` attribute set on the **helpText** element. _This value is mandatory when using a helpText in order to guarantee the accessibility of the component._
     */
    helpid?: string;
    /**
     * If `true`, applies a valid state to the form field.
     */
    isvalid?: boolean;
    /**
     * If `true`, applies an invalid state to the form field.
     */
    isinvalid?: boolean;
    /**
     * If `true`, applies a loading state to the form field.
     */
    isloading?: boolean;
    /**
     * The value of the `id` attribute set on the **validationMessage** element. _This value is mandatory when using a validationMessage in order to guarantee the accessibility of the component._
     */
    messageid?: string;
    /**
     * message displayed when the form field has a valid or invalid state, usually indicating validation or errors.
     */
    message?: string;
  }

  let {
    id,
    label,
    requirementtext,
    helpid,
    helptext,
    messageid,
    message,
    isinvalid,
    isvalid,
    isloading,
    class: className,
    ...attrs
  }: Props = $props();
</script>

<div class={['mc-field', className]} {...attrs}>
  <label for={id} class="mc-field__label">
    {label}
    {#if requirementtext}
      <span class="mc-field__requirement" aria-hidden="true">
        ({requirementtext})
      </span>
    {/if}
  </label>

  {#if helpid && helptext}
    <span id={helpid} class="mc-field__help">
      {helptext}
    </span>
  {/if}

  <div class="mc-field__content">
    <slot />
  </div>

  {#if isinvalid || isvalid || isloading}
    <span
      id={messageid}
      class={['mc-field__validation-message', isvalid && 'is-valid', isinvalid && 'is-invalid']}
    >
      {#if isloading}
        <Loader size="xs" />
      {/if}
      {message}
    </span>
  {/if}
</div>

<style>/**
 * Do not edit directly, this file was auto-generated.
 */
/* 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 */</style>
