{
  "name": "Barcode",
  "category": "Data Display",
  "subcategory": null,
  "description": "Inline SVG Code 128B barcode renderer (scannable).",
  "thumbnail": "/preview-cards/barcode.png",
  "hasDocsPage": true,
  "nugetPackage": "Lumeo",
  "files": [
    "UI/Barcode/Barcode.razor"
  ],
  "dependencies": [],
  "packageDependencies": [],
  "cssVars": [
    "--color-foreground"
  ],
  "api": {
    "name": "Barcode",
    "category": "Data Display",
    "subcategory": null,
    "description": "Inline SVG Code 128B barcode renderer (scannable).",
    "nugetPackage": "Lumeo",
    "files": [
      "UI/Barcode/Barcode.razor"
    ],
    "namespace": "Lumeo",
    "inheritsFrom": null,
    "implements": [],
    "parameters": [
      {
        "name": "Value",
        "type": "string",
        "default": "\"\"",
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Format",
        "type": "BarcodeFormat",
        "default": "BarcodeFormat.Code128",
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Height",
        "type": "int",
        "default": "80",
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "BarWidth",
        "type": "double",
        "default": "2",
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "ShowText",
        "type": "bool",
        "default": "true",
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Color",
        "type": "string",
        "default": "\"foreground\"",
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "BackgroundColor",
        "type": "string",
        "default": "\"background\"",
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Class",
        "type": "string?",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "AdditionalAttributes",
        "type": "Dictionary<string, object>?",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": true
      }
    ],
    "events": [],
    "enums": [
      {
        "name": "BarcodeFormat",
        "values": [
          "Code128",
          "Code39",
          "EAN13"
        ],
        "description": null
      }
    ],
    "records": [],
    "cssVars": [
      "--color-foreground"
    ],
    "examples": [
      {
        "title": "Default (Code 128B)",
        "code": "<Barcode Value=\"HELLO-WORLD\" />"
      },
      {
        "title": "Numeric Data",
        "code": "<Barcode Value=\"1234567890\" />"
      },
      {
        "title": "No Text",
        "code": "<Barcode Value=\"ABC-123\" ShowText=\"false\" />"
      },
      {
        "title": "Custom Height",
        "code": "<Barcode Value=\"SMALL\" Height=\"40\" />\n<Barcode Value=\"MEDIUM\" Height=\"80\" />\n<Barcode Value=\"TALL\" Height=\"120\" />"
      }
    ],
    "subComponents": {},
    "parseFailed": false,
    "parseError": null
  },
  "$schema": "https://lumeo.nativ.sh/registry-component-schema.json",
  "key": "barcode",
  "docsUrl": "https://lumeo.nativ.sh/components/barcode",
  "sourceUrl": [
    {
      "file": "UI/Barcode/Barcode.razor",
      "url": "https://github.com/Brain2k-0005/Lumeo/tree/master/src/Lumeo/UI/Barcode/Barcode.razor"
    }
  ],
  "source": [
    {
      "path": "UI/Barcode/Barcode.razor",
      "content": "@namespace Lumeo\n\n<div class=\"@ContainerClass\"\n     role=\"img\"\n     aria-label=\"@($\"Barcode: {Value}\")\"\n     @attributes=\"AdditionalAttributes\">\n    @if (!string.IsNullOrEmpty(Value))\n    {\n        <svg width=\"@SvgWidth\" height=\"@SvgHeight\"\n             viewBox=\"0 0 @SvgWidth @SvgHeight\"\n             xmlns=\"http://www.w3.org/2000/svg\"\n             style=\"display:block;\">\n            @* Background *@\n            <rect x=\"0\" y=\"0\" width=\"@SvgWidth\" height=\"@SvgHeight\"\n                  fill=\"var(--color-@BackgroundColor, var(--color-background))\" />\n            @* Bars *@\n            @{\n                double xPos = QuietZone;\n                foreach (var (width, isBar) in _modules)\n                {\n                    if (isBar)\n                    {\n                        <rect x=\"@xPos.ToString(System.Globalization.CultureInfo.InvariantCulture)\"\n                              y=\"0\"\n                              width=\"@width.ToString(System.Globalization.CultureInfo.InvariantCulture)\"\n                              height=\"@Height\"\n                              fill=\"var(--color-@Color, var(--color-foreground))\" />\n                    }\n                    xPos += width;\n                }\n            }\n            @* Text below bars rendered via foreignObject so we avoid Razor <text> conflict *@\n            @if (ShowText)\n            {\n                <foreignObject x=\"0\" y=\"@Height\" width=\"@SvgWidth\" height=\"20\">\n                    <div xmlns=\"http://www.w3.org/1999/xhtml\"\n                         style=\"@($\"width:{SvgWidth}px;text-align:center;font-size:11px;font-family:monospace;color:var(--color-{Color});line-height:18px;\")\">\n                        @Value\n                    </div>\n                </foreignObject>\n            }\n        </svg>\n    }\n</div>\n\n@code {\n    [Parameter] public string Value { get; set; } = \"\";\n    [Parameter] public BarcodeFormat Format { get; set; } = BarcodeFormat.Code128;\n    [Parameter] public int Height { get; set; } = 80;\n    [Parameter] public double BarWidth { get; set; } = 2;\n    [Parameter] public bool ShowText { get; set; } = true;\n    [Parameter] public string Color { get; set; } = \"foreground\";\n    [Parameter] public string BackgroundColor { get; set; } = \"background\";\n    [Parameter] public string? Class { get; set; }\n    [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }\n\n    private const int QuietZone = 10;\n\n    private List<(double Width, bool IsBar)> _modules = new();\n\n    private int SvgWidth => (int)Math.Ceiling(_modules.Sum(m => m.Width) + QuietZone * 2);\n    private int SvgHeight => ShowText ? Height + 20 : Height;\n\n    private string ContainerClass => $\"inline-block {Class}\".Trim();\n\n    protected override void OnParametersSet() => Rebuild();\n\n    private void Rebuild()\n    {\n        _modules.Clear();\n        if (string.IsNullOrEmpty(Value)) return;\n        try\n        {\n            var bits = Code128B.Encode(Value);\n            foreach (var bit in bits)\n                _modules.Add((BarWidth, bit));\n        }\n        catch\n        {\n            _modules.Clear();\n        }\n    }\n\n    public enum BarcodeFormat { Code128, Code39, EAN13 }\n\n    // ─── Code 128B encoder ───────────────────────────────────────────────────\n    // Code Set B covers ASCII 32–127. Each symbol is an 11-module pattern of\n    // 3 bars and 3 spaces. The stop symbol is 13 modules (4 bars, 3 spaces + guard).\n    // Reference: https://en.wikipedia.org/wiki/Code_128\n    private static class Code128B\n    {\n        // 107 symbols (values 0–106) encoded as 11 bits (1=bar, 0=space).\n        // Start Code B = symbol 104, Stop = special 13-module pattern.\n        // Each entry is a string of 11 '0'/'1' chars: bar=1, space=0.\n        private static readonly string[] Patterns =\n        {\n            \"11011001100\", // 0  — SP\n            \"11001101100\", // 1  — !\n            \"11001100110\", // 2  — \"\n            \"10010011000\", // 3  — #\n            \"10010001100\", // 4  — $\n            \"10001001100\", // 5  — %\n            \"10011001000\", // 6  — &\n            \"10011000100\", // 7  — '\n            \"10001100100\", // 8  — (\n            \"11001001000\", // 9  — )\n            \"11001000100\", // 10 — *\n            \"11000100100\", // 11 — +\n            \"10110011100\", // 12 — ,\n            \"10011011100\", // 13 — -\n            \"10011001110\", // 14 — .\n            \"10111001100\", // 15 — /\n            \"10011101100\", // 16 — 0\n            \"10011100110\", // 17 — 1\n            \"11001110010\", // 18 — 2\n            \"11001011100\", // 19 — 3\n            \"11001001110\", // 20 — 4\n            \"11011100100\", // 21 — 5\n            \"11001110100\", // 22 — 6\n            \"11101101110\", // 23 — 7\n            \"11101001100\", // 24 — 8\n            \"11100101100\", // 25 — 9\n            \"11100100110\", // 26 — :\n            \"11101100100\", // 27 — ;\n            \"11100110100\", // 28 — <\n            \"11100110010\", // 29 — =\n            \"11011011000\", // 30 — >\n            \"11011000110\", // 31 — ?\n            \"11000110110\", // 32 — @\n            \"10100011000\", // 33 — A\n            \"10001011000\", // 34 — B\n            \"10001000110\", // 35 — C\n            \"10110001000\", // 36 — D\n            \"10001101000\", // 37 — E\n            \"10001100010\", // 38 — F\n            \"11010001000\", // 39 — G\n            \"11000101000\", // 40 — H\n            \"11000100010\", // 41 — I\n            \"10110111000\", // 42 — J\n            \"10110001110\", // 43 — K\n            \"10001101110\", // 44 — L\n            \"10111011000\", // 45 — M\n            \"10111000110\", // 46 — N\n            \"10001110110\", // 47 — O\n            \"11101110110\", // 48 — P\n            \"11010001110\", // 49 — Q\n            \"11000101110\", // 50 — R\n            \"11011101000\", // 51 — S\n            \"11011100010\", // 52 — T\n            \"11011101110\", // 53 — U\n            \"11101011000\", // 54 — V\n            \"11101000110\", // 55 — W\n            \"11100010110\", // 56 — X\n            \"11101101000\", // 57 — Y\n            \"11101100010\", // 58 — Z\n            \"11100011010\", // 59 — [\n            \"11101111010\", // 60 — \\\n            \"11001000010\", // 61 — ]\n            \"11110001010\", // 62 — ^\n            \"10100110000\", // 63 — _\n            \"10100001100\", // 64 — `\n            \"10010110000\", // 65 — a\n            \"10010000110\", // 66 — b\n            \"10000101100\", // 67 — c\n            \"10000100110\", // 68 — d\n            \"10110010000\", // 69 — e\n            \"10110000100\", // 70 — f\n            \"10011010000\", // 71 — g\n            \"10011000010\", // 72 — h\n            \"10000110100\", // 73 — i\n            \"10000110010\", // 74 — j\n            \"11000010010\", // 75 — k\n            \"11001010000\", // 76 — l\n            \"11110111010\", // 77 — m\n            \"11000010100\", // 78 — n\n            \"10001111010\", // 79 — o\n            \"10100111100\", // 80 — p\n            \"10010111100\", // 81 — q\n            \"10010011110\", // 82 — r\n            \"10111100100\", // 83 — s\n            \"10011110100\", // 84 — t\n            \"10011110010\", // 85 — u\n            \"11110100100\", // 86 — v\n            \"11110010100\", // 87 — w\n            \"11110010010\", // 88 — x\n            \"11011011110\", // 89 — y\n            \"11011110110\", // 90 — z\n            \"11110110110\", // 91 — {\n            \"10101111000\", // 92 — |\n            \"10100011110\", // 93 — }\n            \"10001011110\", // 94 — ~\n            \"10111101000\", // 95 — DEL (value 95 = symbol for DEL in Code B table)\n            \"10111100010\", // 96\n            \"11110101000\", // 97\n            \"11110100010\", // 98\n            \"10111011110\", // 99\n            \"10111101110\", // 100\n            \"11101011110\", // 101\n            \"11110101110\", // 102 — FNC1\n            \"11010000100\", // 103 — Start A\n            \"11010010000\", // 104 — Start B\n            \"11010011100\", // 105 — Start C\n        };\n\n        private const string StopPattern = \"1100011101011\";  // 13-module stop\n\n        /// <summary>\n        /// Encode a string (ASCII 32–126) as Code 128B and return the raw module\n        /// bits: true = bar, false = space.\n        /// </summary>\n        public static bool[] Encode(string text)\n        {\n            // Validate: Code B supports ASCII 32–126\n            foreach (char c in text)\n                if (c < 32 || c > 126)\n                    throw new ArgumentException($\"Character '{c}' (0x{(int)c:X2}) is outside Code 128B range (ASCII 32-126).\");\n\n            var symbols = new List<int>();\n\n            // Start Code B = symbol 104\n            symbols.Add(104);\n\n            int checksum = 104; // Start B symbol value\n            int position = 1;\n\n            foreach (char c in text)\n            {\n                // Code B: symbol value = ASCII value - 32\n                int sym = c - 32;\n                symbols.Add(sym);\n                checksum += sym * position;\n                position++;\n            }\n\n            // Check symbol\n            symbols.Add(checksum % 103);\n\n            // Build bit array\n            var bits = new List<bool>();\n\n            foreach (var sym in symbols)\n            {\n                var pattern = Patterns[sym];\n                foreach (char bit in pattern)\n                    bits.Add(bit == '1');\n            }\n\n            // Stop pattern (always bar-start, 13 modules)\n            foreach (char bit in StopPattern)\n                bits.Add(bit == '1');\n\n            return bits.ToArray();\n        }\n    }\n}\n"
    }
  ],
  "slots": [],
  "serviceDependencies": [],
  "cascadingDependencies": [],
  "relatedComponents": [],
  "keyboardInteractions": [],
  "tests": [
    "tests/Lumeo.Tests/Components/Barcode/BarcodeTests.cs"
  ],
  "mdSummary": "# Barcode\n\nInline SVG Code 128B barcode renderer (scannable).\n\n**Package:** `Lumeo` · **Category:** Data Display\n**Docs:** https://lumeo.nativ.sh/components/barcode\n\n## Parameters\n| Owner | Name | Type | Default | Description |\n|---|---|---|---|---|\n| Barcode | Value | `string` | `\"\"` |  |\n| Barcode | Format | `BarcodeFormat` | `BarcodeFormat.Code128` |  |\n| Barcode | Height | `int` | `80` |  |\n| Barcode | BarWidth | `double` | `2` |  |\n| Barcode | ShowText | `bool` | `true` |  |\n| Barcode | Color | `string` | `\"foreground\"` |  |\n| Barcode | BackgroundColor | `string` | `\"background\"` |  |\n| Barcode | Class | `string?` | `` |  |\n| Barcode | AdditionalAttributes | `Dictionary<string, object>?` | `` |  |\n\n## Slots\n- (none)\n\n## Events\n- (none)\n\n## Sub-components\n- (none)\n\n## Cascading values it expects\n- (none)\n\n## Services it injects\n- (none)\n\n## Keyboard\n—\n\n## Example\n```razor\n<Barcode />\n```\n\n## CSS variables\n`--color-foreground`\n\n## Files\n- `UI/Barcode/Barcode.razor`\n"
}