{
  "tag": "ed-known-date",
  "kind": "component",
  "summary": "Known dates let users enter dates they already know - birthdays, expirations, document\ndates - through three separate day, month, and year fields shown in the locale's natural order.",
  "status": "experimental",
  "since": "1.0",
  "docs": "https://test-apps.eurodata.de/a/eurodata-ui/docs/components/known-date/",
  "usage": "https://test-apps.eurodata.de/a/eurodata-ui/docs/components/known-date/usage/",
  "playwright": "getByTestId('…')",
  "dependencies": [],
  "use": [
    "A birthday or date of entry in an employee record, where the user already knows the date and types day, month and year"
  ],
  "notFor": [
    {
      "when": "A date the user has to look up or choose near today, such as a due date or appointment",
      "instead": "a [Date Picker](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/date-picker) with its calendar"
    },
    {
      "when": "A date together with a time of day",
      "instead": "a [Date Picker](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/date-picker) set to date and time"
    },
    {
      "when": "A date that is only displayed, not edited",
      "instead": "a [Format Date](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/format-date)"
    }
  ],
  "rules": [],
  "api": {
    "attributes": [
      {
        "name": "value",
        "property": "defaultValue",
        "type": "string",
        "description": "The default value used for form reset."
      },
      {
        "name": "required",
        "property": "required",
        "type": "boolean",
        "default": "false",
        "description": "Makes the known date required for form submission."
      },
      {
        "name": "readonly",
        "property": "readonly",
        "type": "boolean",
        "default": "false",
        "description": "Makes the fields non-editable."
      },
      {
        "name": "density",
        "property": "density",
        "type": "'compact' | 'default' | 'spacious'",
        "default": "'default'",
        "description": "Controls the component's spacing density without affecting font-size."
      },
      {
        "name": "pill",
        "property": "pill",
        "type": "boolean",
        "default": "false",
        "description": "Draws pill-style fields with rounded edges."
      },
      {
        "name": "label",
        "property": "label",
        "type": "string",
        "default": "''",
        "description": "The known date's label. If you need to display HTML, use the `label` slot instead."
      },
      {
        "name": "autocomplete",
        "property": "autocomplete",
        "type": "string",
        "default": "''",
        "description": "Browser autofill family. When set to `bday`, the three fields receive `bday-day`, `bday-month`, and\n`bday-year` respectively. The field-agnostic directives `off` and `on` are applied to all three fields.\nAny other value is forwarded only to the year field."
      },
      {
        "name": "min",
        "property": "min",
        "type": "string",
        "default": "''",
        "description": "Earliest selectable date as `YYYY-MM-DD`."
      },
      {
        "name": "max",
        "property": "max",
        "type": "string",
        "default": "''",
        "description": "Latest selectable date as `YYYY-MM-DD`."
      },
      {
        "name": "locale",
        "property": "locale",
        "type": "string",
        "default": "''",
        "description": "BCP-47 locale override. When empty, the inherited `lang` attribute is used."
      },
      {
        "name": "with-label",
        "property": "withLabel",
        "type": "boolean",
        "default": "false",
        "description": "Only required for SSR. Set to `true` if you're slotting in a `label` element."
      },
      {
        "name": "with-hint",
        "property": "withHint",
        "type": "boolean",
        "default": "false",
        "description": "Only required for SSR. Set to `true` if you're slotting in a `hint` element."
      },
      {
        "name": "error",
        "property": "error",
        "type": "null | string",
        "default": "null",
        "description": "Draws an error-style input with danger colored border and icon. Set to an empty string (or use the bare attribute `<ed-input error>`) to render error styling without a visible message; submission is still blocked with a localized fallback validation message. Set to a non-empty string to additionally display that message in the message area, above the hint, and use it as the validation message. Set to `null` (the default) or remove the attribute to clear the error."
      },
      {
        "name": "warning",
        "property": "warning",
        "type": "null | string",
        "default": "null",
        "description": "Draws a warning-style input with warning colored border and icon. Set to an empty string (or use the bare attribute `<ed-input warning>`) to render warning styling without a visible message. Set to a non-empty string to additionally display that message in the message area, above the hint. Warnings do not block form submission. Set to `null` (the default) or remove the attribute to clear the warning."
      },
      {
        "name": "ai",
        "property": "ai",
        "type": "boolean",
        "default": "false",
        "description": "Draws an ai-style input with AI colored border and icon. Suppressed visually once\n`hasInteracted` flips, but the property and attribute are preserved so the styling\nreturns after `formResetCallback` clears `hasInteracted`."
      },
      {
        "name": "hint",
        "property": "hint",
        "type": "string",
        "default": "''",
        "description": "The form control's hint text. If you need to display HTML, use the `hint` slot instead."
      },
      {
        "name": "name",
        "property": "name",
        "type": "null | string",
        "default": "null",
        "description": "The name of the input, submitted as a name/value pair with form data."
      },
      {
        "name": "disabled",
        "property": "disabled",
        "type": "boolean",
        "description": "Disables the form control. HTML treats a control as disabled when either its own `disabled` is\nset or an ancestor `<fieldset>` is disabled, so reading this reports the combined state while\nwriting it sets only this element's own. Keeping the two apart is what lets a fieldset be\nre-enabled without clearing a disabled state the consumer set in the meantime."
      },
      {
        "name": "dir",
        "property": "dir",
        "type": "string"
      },
      {
        "name": "lang",
        "property": "lang",
        "type": "string"
      }
    ],
    "properties": [
      {
        "name": "value",
        "type": "string",
        "description": "The committed value as an ISO `YYYY-MM-DD` string — never a `Date`, exactly as `input.value` is\nalways a string. Reading returns an empty string when the value is blank or any field is only\npartially filled.\n\nFor a `Date`, use valueAsDate, which is UTC. Keeping `Date` out of `value` is what keeps\nthat a property of one named accessor instead of a contract the whole element has to restate."
      },
      {
        "name": "valueAsDate",
        "type": "Date | null",
        "description": "The committed value as **UTC midnight**, or `null` while it is empty or incomplete — the instant\na native `<input type=\"date\">` gives. Setting it reads the instant in UTC.\n\nAnything that formats in local time has to read it in UTC, or it names the previous day west of\nGreenwich. Passing `el.value` skips the question entirely."
      },
      {
        "name": "validationTarget",
        "type": "undefined | HTMLElement",
        "description": "Anchor native validation popups on a real visible input. The hidden mirror handles form data, but\nanchoring a popup on `display: none` content would render it at offset (0, 0)."
      },
      {
        "name": "form",
        "type": "HTMLFormElement | null",
        "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work."
      }
    ],
    "methods": [
      {
        "name": "focus",
        "parameters": [
          {
            "name": "options",
            "type": "FocusOptions",
            "optional": true
          }
        ],
        "description": "Focuses the first empty field, or the first field when all are filled."
      },
      {
        "name": "blur",
        "description": "Removes focus from the known date."
      },
      {
        "name": "setCustomValidity",
        "parameters": [
          {
            "name": "message",
            "type": "string"
          }
        ],
        "description": "Do not use this when creating a \"Validator\". This is intended for end users of components.\nWe track manually defined custom errors so we don't clear them on accident in our validators."
      },
      {
        "name": "resetValidity",
        "description": "Reset validity is a way of removing manual custom errors and native validation."
      }
    ],
    "events": [
      {
        "name": "input",
        "react": "onInput",
        "type": "InputEvent",
        "description": "Emitted as the user types in any field."
      },
      {
        "name": "change",
        "react": "onChange",
        "type": "Event",
        "description": "Emitted when the committed value transitions to a new ISO date."
      },
      {
        "name": "blur",
        "react": "onBlur",
        "description": "Emitted when the control loses focus."
      },
      {
        "name": "focus",
        "react": "onFocus",
        "description": "Emitted when the control gains focus."
      },
      {
        "name": "ed-invalid",
        "react": "onEdInvalid",
        "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied."
      }
    ],
    "slots": [
      {
        "name": "label",
        "description": "The known date's group label. Alternatively, use the `label` attribute."
      },
      {
        "name": "hint",
        "description": "Text that describes how to use the known date. Alternatively, use the `hint` attribute."
      }
    ],
    "cssProperties": [],
    "parts": [
      {
        "name": "form-control",
        "description": "The form control's outer wrapper."
      },
      {
        "name": "form-control-label",
        "description": "The wrapper inside the legend that styles the visible label text."
      },
      {
        "name": "form-control-input",
        "description": "Alias on the fields row matching other form controls."
      },
      {
        "name": "message",
        "description": "The state message: an error, a warning, or the AI note."
      },
      {
        "name": "hint",
        "description": "The hint's wrapper."
      },
      {
        "name": "known-date",
        "description": "Alias on the fields row, for symmetry with the other form controls."
      },
      {
        "name": "fieldset",
        "description": "The `<fieldset>` element grouping the three fields (or a `role=\"group\"` div)."
      },
      {
        "name": "legend",
        "description": "The `<legend>` element (when a label is present)."
      },
      {
        "name": "fields",
        "description": "The flex row holding the three field blocks."
      },
      {
        "name": "field",
        "description": "Each field block (label + input)."
      },
      {
        "name": "field-day",
        "description": "Added to the day field block."
      },
      {
        "name": "field-month",
        "description": "Added to the month field block."
      },
      {
        "name": "field-year",
        "description": "Added to the year field block."
      },
      {
        "name": "field-label",
        "description": "The text label below each field's input, styled like the hint."
      },
      {
        "name": "field-input",
        "description": "The native `<input>` inside a field."
      }
    ],
    "states": [
      {
        "name": "blank",
        "description": "The known date has no committed value."
      },
      {
        "name": "disabled",
        "description": "The known date is disabled."
      },
      {
        "name": "required",
        "description": "The control is required."
      },
      {
        "name": "optional",
        "description": "The control is not required."
      },
      {
        "name": "invalid",
        "description": "The value fails constraint validation, whether or not the user has touched the control yet."
      },
      {
        "name": "valid",
        "description": "The value passes constraint validation."
      },
      {
        "name": "user-invalid",
        "description": "Invalid, and the user has interacted with the control. This is the one to style for an error: it behaves like the platform's `:user-invalid`, so an untouched field is not marked wrong before the user has had a chance to fill it in."
      },
      {
        "name": "user-valid",
        "description": "Valid, and the user has interacted with the control."
      },
      {
        "name": "dirty",
        "description": "The user has interacted with the control."
      },
      {
        "name": "error",
        "description": "The `error` property is set, or the control is `user-invalid`."
      },
      {
        "name": "warning",
        "description": "The `warning` property is set."
      },
      {
        "name": "ai",
        "description": "The `ai` property is set and the user has not interacted with the control yet."
      }
    ]
  },
  "import": "import '@eurodata/eurodata-ui/dist/components/known-date/known-date.js';",
  "react": {
    "component": "EdKnownDate",
    "import": "import EdKnownDate from '@eurodata/eurodata-ui/dist/react/known-date/index.js';"
  }
}