{
  "element": "nve-monaco-input",
  "entrypoint": "@nvidia-elements/monaco/input/input.examples.json",
  "items": [
    {
      "id": "monaco-input",
      "name": "Default",
      "template": "<nve-monaco-input language=\"typescript\" value=\"console.log('Hello, world!');\"></nve-monaco-input>\n<script type=\"module\">\n  const input = document.querySelector(\"nve-monaco-input\");\n  input.addEventListener(\"input\", () => console.log(\"input: \", input.value));\n  input.addEventListener(\"change\", () => console.log(\"change: \", input.value));\n</script>\n",
      "summary": "Basic code input with language syntax highlighting and input/change event listeners",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "monaco-input-with-optional-attributes",
      "name": "WithOptionalAttributes",
      "template": "<nve-monaco-input\n  value=\"console.log('Hello, world!');\"\n  line-numbers=\"on\"\n  folding\n  minimap\n  side-by-side\n></nve-monaco-input>\n",
      "summary": "Code input with optional features: line numbers, code folding, minimap, and side-by-side layout",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "monaco-input-read-only",
      "name": "ReadOnly",
      "template": "<nve-monaco-input readonly value=\"console.log('Hello, world!');\"></nve-monaco-input>\n",
      "summary": "Read-only code input for displaying non-editable source code",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "monaco-input-disabled",
      "name": "Disabled",
      "template": "<nve-monaco-input value=\"console.log('Hello, world!');\" disabled></nve-monaco-input>\n",
      "summary": "Disabled code input preventing user interaction",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "monaco-input-control",
      "name": "Control",
      "template": "<nve-control>\n  <label>label</label>\n  <nve-monaco-input value=\"console.log('Hello, world!');\" nve-control language=\"javascript\"></nve-monaco-input>\n  <nve-control-message>message<span id=\"emoji\"></span></nve-control-message>\n</nve-control>\n",
      "summary": "Code input integrated with nve-control for form labels and help messages",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "monaco-input-json-schema-validation",
      "name": "JSONSchemaValidation",
      "template": "<form id=\"json-schema-validation-example\" nve-layout=\"column gap:lg\">\n  <nve-control style=\"width: 100%\">\n    <label>JSON Configuration</label>\n    <nve-monaco-input nve-control name=\"config\" language=\"json\"></nve-monaco-input>\n    <nve-control-message>JSON schema validation errors will prevent form submission</nve-control-message>\n  </nve-control>\n  <nve-button type=\"submit\">Submit</nve-button>\n</form>\n<script type=\"module\">\n  const form = document.querySelector(\"form#json-schema-validation-example\");\n  const input = form.querySelector(\"nve-monaco-input\");\n  input.schema = {\n    type: \"object\",\n    properties: {\n      name: { type: \"string\", description: \"Project name\" },\n      version: { type: \"string\", pattern: \"^\\\\d+\\\\.\\\\d+\\\\.\\\\d+$\", description: \"Semantic version number\" },\n      description: { type: \"string\", description: \"Project description\" },\n    },\n    required: [\"name\", \"version\"],\n  };\n  input.value = JSON.stringify(\n    {\n      name: \"my-app\",\n      version: \"1.0.0\",\n    },\n    null,\n    2,\n  );\n  form.addEventListener(\"submit\", (e) => {\n    e.preventDefault();\n    const formData = new FormData(form);\n    console.log(\"Form data:\", {\n      config: formData.get(\"config\"),\n    });\n  });\n</script>\n",
      "summary": "JSON input with schema validation that blocks form submission on validation errors",
      "description": "",
      "composition": true,
      "tags": []
    },
    {
      "id": "monaco-input-type-script-validation",
      "name": "TypeScriptValidation",
      "template": "<form id=\"typescript-validation-example\" nve-layout=\"column gap:lg\">\n  <nve-control style=\"width: 100%\">\n    <label>TypeScript Code</label>\n    <nve-monaco-input nve-control name=\"code\" language=\"typescript\"></nve-monaco-input>\n    <nve-control-message>TypeScript validation errors will prevent form submission</nve-control-message>\n  </nve-control>\n  <nve-button type=\"submit\">Submit</nve-button>\n</form>\n<script type=\"module\">\n  const form = document.querySelector(\"form#typescript-validation-example\");\n  const input = form.querySelector(\"nve-monaco-input\");\n  input.value = 'const x: number = \"string\"; // Type error';\n  form.addEventListener(\"submit\", (e) => {\n    e.preventDefault();\n    const formData = new FormData(form);\n    console.log(\"Form data:\", {\n      code: formData.get(\"code\"),\n    });\n  });\n</script>\n",
      "summary": "TypeScript input with real-time type checking that blocks form submission on type errors",
      "description": "",
      "composition": true,
      "tags": []
    }
  ]
}