@nxgt/material 3.58.0 → 3.59.0

package/lib/components/ui/widgets/barcode/barcode.css

@@ -0,0 +1,112 @@
+/* Barcode and LabelSheet (`@nxgt/material/barcode`). Imported by components.css,
+ * so styles.css carries it. No inline style: the symbol's colours are classes
+ * and a sheet's lengths are custom properties written after mount.
+ *
+ * On screen the symbol follows the theme (ink = --foreground on --background);
+ * `appearance="paper"` keeps dark-on-light in dark mode too, which is what most
+ * scanners need. In print every symbol is black on white whatever the theme. */
+.nxgt-barcode {
+	display: block;
+	max-width: 100%;
+	height: auto;
+	color: var(--foreground);
+}
+.nxgt-barcode-paper {
+	fill: var(--background);
+}
+.nxgt-barcode-ink {
+	fill: var(--foreground);
+}
+.nxgt-barcode-text {
+	fill: var(--foreground);
+	font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
+}
+.nxgt-barcode[data-appearance="paper"] .nxgt-barcode-paper {
+	fill: #fff;
+}
+.nxgt-barcode[data-appearance="paper"] .nxgt-barcode-ink,
+.nxgt-barcode[data-appearance="paper"] .nxgt-barcode-text {
+	fill: #000;
+}
+
+/* A sheet of labels: pages of a CSS grid. --nxgt-label-w/-h are one label,
+ * --nxgt-label-cols the columns, --nxgt-label-gap-x/-y the gaps and
+ * --nxgt-label-off-x/-y the margin before the first label. */
+.nxgt-label-sheet {
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+}
+.nxgt-label-page {
+	box-sizing: border-box;
+	display: grid;
+	grid-template-columns: repeat(
+			var(--nxgt-label-cols, 1),
+			var(--nxgt-label-w, auto)
+		);
+	grid-auto-rows: var(--nxgt-label-h, auto);
+	column-gap: var(--nxgt-label-gap-x, 0);
+	row-gap: var(--nxgt-label-gap-y, 0);
+	padding: var(--nxgt-label-off-y, 0) 0 0 var(--nxgt-label-off-x, 0);
+	width: max-content;
+	max-width: 100%;
+	break-after: page;
+	page-break-after: always;
+	background: var(--card);
+	outline: 1px dashed var(--border);
+}
+.nxgt-label-page:last-child {
+	break-after: auto;
+	page-break-after: auto;
+}
+.nxgt-label {
+	box-sizing: border-box;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	gap: 0.5mm;
+	overflow: hidden;
+	break-inside: avoid;
+	padding: 1mm;
+	font-size: 8pt;
+	line-height: 1.1;
+	text-align: center;
+	outline: 1px dotted var(--border);
+}
+.nxgt-label[data-blank] {
+	outline: none;
+}
+.nxgt-label > .nxgt-barcode {
+	flex: 0 1 auto;
+	min-height: 0;
+	width: 100%;
+	/* the symbol scales to fit (preserveAspectRatio), leaving room for the text */
+	max-height: max(calc(var(--nxgt-label-h, 30mm) - 8mm), 4mm);
+}
+
+@media print {
+	.nxgt-barcode {
+		color: #000;
+	}
+	.nxgt-barcode .nxgt-barcode-paper {
+		fill: #fff;
+	}
+	.nxgt-barcode .nxgt-barcode-ink,
+	.nxgt-barcode .nxgt-barcode-text {
+		fill: #000;
+	}
+	.nxgt-label-sheet {
+		display: block;
+		gap: 0;
+	}
+	.nxgt-label-page {
+		background: #fff;
+		color: #000;
+		outline: none;
+		max-width: none;
+	}
+	.nxgt-label {
+		outline: none;
+	}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nxgt/material",
-	"version": "3.58.0",
+	"version": "3.59.0",
 	"license": "MIT",
 	"bugs": {
 		"email": "stevegires@gmail.com"
@@ -75,6 +75,11 @@
 			"types": "./dist/lib/map/index.d.ts",
 			"require": "./dist/map.js"
 		},
+		"./barcode": {
+			"import": "./dist/barcode.js",
+			"types": "./dist/lib/barcode/index.d.ts",
+			"require": "./dist/barcode.js"
+		},
 		"./draw/animate": {
 			"import": "./dist/draw-animate.js",
 			"types": "./dist/lib/draw-animate/index.d.ts",
@@ -362,7 +367,7 @@
 		"docs:previews": "rm -rf node_modules/.cache/nxgt-preview-free/missing && NXGT_PREVIEW_FREE=1 vitest run --project previews && bun .storybook/preview-free-report.ts"
 	},
 	"dependencies": {
-		"@nxgt/material-core": "^0.42.0",
+		"@nxgt/material-core": "^0.43.0",
 		"@base-ui/react": "^1.6.0",
 		"@dnd-kit/core": "^6.3.1",
 		"@dnd-kit/sortable": "^10.0.0",
@@ -475,6 +480,7 @@
 		"@vitest/browser-playwright": "4.1.10",
 		"ajv": "^8.20.0",
 		"axe-core": "4.12.1",
+		"bwip-js": "^4.11.4",
 		"globals": "^17.7.0",
 		"hls.js": "^1.7.3",
 		"leaflet": "^1.9.4",
@@ -494,7 +500,8 @@
 		"vite-plugin-dts": "^5.0.3",
 		"vitest": "^4.1.10",
 		"y-protocols": "1.0.7",
-		"yjs": "13.6.33"
+		"yjs": "13.6.33",
+		"zxing-wasm": "^3.1.6"
 	},
 	"peerDependencies": {
 		"@adamscybot/react-leaflet-component-marker": "^2.0.3",