{
  "element": "nve-monaco-problems",
  "entrypoint": "@nvidia-elements/monaco/problems/problems.examples.json",
  "items": [
    {
      "id": "monaco-problems",
      "name": "Default",
      "template": "<nve-monaco-problems></nve-monaco-problems>\n<script type=\"module\">\n  const problemsEl = document.querySelector(\"nve-monaco-problems\");\n  problemsEl.problems = [\n    {\n      resource: \"file:///src/components/Button.ts\",\n      message: \"Type 'string' is not assignable to type 'number'.\",\n      severity: 8, // ProblemSeverity.Error\n      startLineNumber: 14,\n      startColumn: 8,\n      endLineNumber: 14,\n      endColumn: 24,\n      source: \"ts\",\n      code: \"2322\",\n      owner: \"typescript\",\n    },\n    {\n      resource: \"file:///src/components/Button.ts\",\n      message: \"'index' is declared but its value is never read.\",\n      severity: 4, // ProblemSeverity.Warning\n      startLineNumber: 16,\n      startColumn: 5,\n      endLineNumber: 16,\n      endColumn: 10,\n      source: \"ts\",\n      code: \"6133\",\n      owner: \"typescript\",\n    },\n    {\n      resource: \"file:///src/utils/styles.css\",\n      message: \"Unknown property 'colr'. Did you mean 'color'?\",\n      severity: 2, // ProblemSeverity.Info\n      startLineNumber: 40,\n      startColumn: 2,\n      endLineNumber: 40,\n      endColumn: 6,\n      source: \"css\",\n      owner: \"css\",\n    },\n    {\n      resource: \"file:///src/utils/formatDate.ts\",\n      message: \"Convert 'var' to 'let' or 'const'.\",\n      severity: 1, // ProblemSeverity.Hint\n      startLineNumber: 57,\n      startColumn: 1,\n      endLineNumber: 57,\n      endColumn: 4,\n      source: \"eslint\",\n      code: {\n        value: \"no-var\",\n        target: \"https://eslint.org/docs/rules/no-var\",\n      },\n      owner: \"eslint\",\n    },\n  ];\n  problemsEl.addEventListener(\"problem-selected\", (e) => {\n    console.log(\"problem-selected\", e.detail.problem);\n  });\n  problemsEl.addEventListener(\"problem-activated\", (e) => {\n    console.log(\"problem-activated\", e.detail.problem);\n  });\n  problemsEl.addEventListener(\"problem-context-menu\", (e) => {\n    console.log(\"problem-context-menu\", e.detail.problem);\n  });\n</script>\n",
      "summary": "Monaco Problems element rendering hint, info, warning and error problems assigned from different sources and files. Also supports listening for when the user selects, activates, or triggers the context menu for a problem.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "monaco-problems-empty",
      "name": "Empty",
      "template": "<nve-monaco-problems></nve-monaco-problems>\n",
      "summary": "Monaco Problems element with the default message shown when no problems exist.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "monaco-problems-custom-empty-slot",
      "name": "CustomEmptySlot",
      "template": "<nve-monaco-problems>\n  <div slot=\"empty\" nve-layout=\"column align:center full\">Custom Empty Slot Content</div>\n</nve-monaco-problems>\n",
      "summary": "Monaco Problems element with a custom message in the empty slot shown when no problems exist.",
      "description": "",
      "composition": false,
      "tags": []
    }
  ]
}