{
  "element": "nve-monaco-diff-input",
  "entrypoint": "@nvidia-elements/monaco/diff-input/diff-input.examples.json",
  "items": [
    {
      "id": "monaco-diff-input",
      "name": "Default",
      "template": "<nve-monaco-diff-input\n  language=\"typescript\"\n  original=\"console.log('Hello, World!');\"\n  value=\"console.log('Hello, world!');\"\n></nve-monaco-diff-input>\n<script type=\"module\">\n  const input = document.querySelector(\"nve-monaco-diff-input\");\n  input.addEventListener(\"input\", () => console.log(\"input: \", input.value));\n  input.addEventListener(\"change\", () => console.log(\"change: \", input.value));\n</script>\n",
      "summary": "Basic diff input comparing original and modified code with input/change event listeners",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "monaco-diff-input-with-optional-attributes",
      "name": "WithOptionalAttributes",
      "template": "<nve-monaco-diff-input\n  original=\"console.log('Hello, World!');\"\n  value=\"console.log('Hello, world!');\"\n  line-numbers=\"on\"\n  folding\n  minimap\n  side-by-side\n></nve-monaco-diff-input>\n",
      "summary": "Diff input with optional features: line numbers, code folding, minimap, and side-by-side layout",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "monaco-diff-input-read-only",
      "name": "ReadOnly",
      "template": "<nve-monaco-diff-input\n  original=\"console.log('Hello, World!');\"\n  value=\"console.log('Hello, world!');\"\n  readonly\n></nve-monaco-diff-input>\n",
      "summary": "Read-only diff input for displaying non-editable code comparisons",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "monaco-diff-input-disabled",
      "name": "Disabled",
      "template": "<nve-monaco-diff-input\n  original=\"console.log('Hello, World!');\"\n  value=\"console.log('Hello, world!');\"\n  disabled\n></nve-monaco-diff-input>\n",
      "summary": "Disabled diff input preventing user interaction",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "monaco-diff-input-control",
      "name": "Control",
      "template": "<nve-control>\n  <label>label</label>\n  <nve-monaco-diff-input\n    original=\"console.log('Hello, World!');\"\n    value=\"console.log('Hello, world!');\"\n    nve-control\n    language=\"javascript\"\n  ></nve-monaco-diff-input>\n  <nve-control-message>message<span id=\"emoji\"></span></nve-control-message>\n</nve-control>\n",
      "summary": "Diff input integrated with nve-control for form labels and help messages",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "monaco-diff-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-diff-input\n      nve-control\n      name=\"config\"\n      language=\"json\"\n      line-numbers=\"on\"\n      side-by-side\n    ></nve-monaco-diff-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-diff-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.original = JSON.stringify(\n    {\n      name: \"my-original-app\",\n      version: \"0.0.0\",\n    },\n    null,\n    2,\n  );\n  input.value = JSON.stringify(\n    {\n      name: \"my-modified-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 diff input with schema validation in a form context, blocking submission on errors",
      "description": "",
      "composition": true,
      "tags": []
    },
    {
      "id": "monaco-diff-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-diff-input\n      nve-control\n      name=\"code\"\n      language=\"typescript\"\n      line-numbers=\"on\"\n      side-by-side\n    ></nve-monaco-diff-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-diff-input\");\n  input.original = \"const x: number = 42;\";\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 diff input with real-time type checking that blocks form submission on errors",
      "description": "",
      "composition": true,
      "tags": []
    }
  ]
}