@klodd/ds 5.1.0 → 5.2.0

package/js/hero-roll.js

@@ -107,7 +107,10 @@
 	function buildAndAnimate ( el ) {
 		if ( ! el ) return;
 		if ( el.dataset.rolled === 'true' ) return;
-		const target = parseInt( el.dataset.animateRoll, 10 );
+		// parseFloat sa decimaler stods. 'data-animate-roll="8.5"' rullar
+		// "8" som digit-roller och "5" som digit-roller, med "." mellan
+		// som static-char.
+		const target = parseFloat( el.dataset.animateRoll );
 		if ( isNaN( target ) ) return;
 
 		// No-op for 0
@@ -121,8 +124,14 @@
 		const originalText = el.textContent;
 		const isNegative = target < 0;
 		const absTarget = Math.abs( target );
-		const digits = String( absTarget ).split( '' ).map( Number );
-		const len = digits.length;
+		// Split bevarar decimal-punkt som '.' i array. Heltalsdel separat
+		// fran decimaldel for thousand-separator-injektion (1 234 567).
+		const targetStr = String( absTarget );
+		const dotIndex = targetStr.indexOf( '.' );
+		const intPart = dotIndex >= 0 ? targetStr.slice( 0, dotIndex ) : targetStr;
+		const decPart = dotIndex >= 0 ? targetStr.slice( dotIndex + 1 ) : '';
+		const intDigits = intPart.split( '' ).map( Number );
+		const intLen = intDigits.length;
 
 		const fragment = document.createDocumentFragment();
 
@@ -131,17 +140,35 @@
 		}
 
 		const rollers = [];
-		digits.forEach( function ( d, i ) {
+		// Heltalsdel: digit-rollers med thousand-separator var 3:e siffra
+		// fran hoger.
+		intDigits.forEach( function ( d, i ) {
 			const r = buildRoller( d );
 			fragment.appendChild( r.roller );
 			rollers.push( r );
-			const fromRight = len - 1 - i;
+			const fromRight = intLen - 1 - i;
 			if ( fromRight > 0 && fromRight % 3 === 0 ) {
 				fragment.appendChild( buildStaticChar( ' ' ) );
 			}
 		} );
 
-		fragment.appendChild( buildStaticChar( ' kr' ) );
+		// Decimal-del: punkt + digit-rollers per decimalsiffra.
+		if ( decPart.length > 0 ) {
+			fragment.appendChild( buildStaticChar( '.' ) );
+			decPart.split( '' ).map( Number ).forEach( function ( d ) {
+				const r = buildRoller( d );
+				fragment.appendChild( r.roller );
+				rollers.push( r );
+			} );
+		}
+
+		// Suffix konfigurerbart via data-roll-suffix. Default ' kr'
+		// for Ekonom-bakatkompat - appar utan kr-suffix sattler
+		// data-roll-suffix="" pa elementet.
+		const suffix = el.dataset.rollSuffix !== undefined ? el.dataset.rollSuffix : ' kr';
+		if ( suffix ) {
+			fragment.appendChild( buildStaticChar( suffix ) );
+		}
 
 		// Mat font-line-height for digit-roller-hojd.
 		const computed = window.getComputedStyle( el );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@klodd/ds",
-  "version": "5.1.0",
+  "version": "5.2.0",
   "description": "Klodd shared design system - tokens, components, JS",
   "main": "css/index.css",
   "bin": {