Add countingAnimation option to counter

Introduce a new countingAnimation setting with options none, plain,
and wheel (rolling digits). This separates the animation style from
the counting speed, allowing users to choose both independently.

The existing countingSpeed setting now only controls speed when an
animation is enabled. Backwards compatibility is preserved: entries
with only countingSpeed set will default to plain animation.

REDMINE-21218

Author: tf

entry_types/scrolled/config/locales/de.yml

@@ -277,12 +277,17 @@ de:
           attributes:
             countingSpeed:
               inline_help: Lege fest, wie schnell die Zählanimation ablaufen soll.
-              label: Zählanimation
+              label: Zählgeschwindigkeit
               values:
                 fast: Schnell
                 medium: Mittel
-                none: "(Keine)"
                 slow: Langsam
+            countingAnimation:
+              label: Zählanimation
+              values:
+                none: "(Keine)"
+                plain: Einfach
+                wheel: Zählwerk
             decimalPlaces:
               inline_help: Bestimme, wie wieviele Nachkommastellen gezeigt werden sollen.
               label: Nachkommastellen

entry_types/scrolled/config/locales/en.yml

@@ -270,12 +270,17 @@ en:
           attributes:
             countingSpeed:
               inline_help: Determine the speed of the counting animation.
-              label: Counting animation
+              label: Counting speed
               values:
                 fast: Fast
                 medium: Medium
-                none: "(None)"
                 slow: Slow
+            countingAnimation:
+              label: Counting animation
+              values:
+                none: "(None)"
+                plain: Simple
+                wheel: Rolling digits
             decimalPlaces:
               inline_help: Determine how many decimal places shall be visible.
               label: Decimal places

entry_types/scrolled/lib/pageflow_scrolled/plugin.rb

@@ -90,7 +90,7 @@ def configure(config)
             'counterUnit-xs' => {font_size: '0.5em'},
             'counterDescription-lg' => {
               font_size: '28px', line_height: '1.1',
-              sm: {font_size: '40px', line_height: '1',}
+              sm: {font_size: '40px', line_height: '1'}
             },
             'counterDescription-md' => {font_size: '22px'},
             'counterDescription-sm' => {font_size: '18px'}

entry_types/scrolled/package/spec/contentElements/counter/Counter-spec.js

@@ -63,10 +63,10 @@ describe('Counter', () => {
     expect(getByText('10')).toHaveScaleCategory('counterNumber', 'lg');
   });
 
-  it('defaults to md size for number', () => {
+  it('defaults to xl size for number', () => {
     const {getByText} = renderCounter();
 
-    expect(getByText('10')).toHaveScaleCategory('counterNumber', 'md');
+    expect(getByText('10')).toHaveScaleCategory('counterNumber', 'xl');
   });
 
   it('defaults to md size for unit', () => {
@@ -319,6 +319,35 @@ describe('Counter', () => {
     });
   });
 
+  describe('countingAnimation', () => {
+    it('renders digit wheels when countingAnimation is wheel', () => {
+      const {container} = renderCounter({countingAnimation: 'wheel'});
+      const digitSpans = container.querySelectorAll('span');
+      const wheels = Array.from(digitSpans).filter(span =>
+        /^\d$/.test(span.textContent)
+      );
+
+      expect(wheels.length).toBeGreaterThan(0);
+    });
+
+    it('renders plain number when countingAnimation is wheel but startValue equals targetValue', () => {
+      const {queryAllByText} = renderCounter({
+        countingAnimation: 'wheel',
+        startValue: 10,
+        targetValue: 10
+      });
+
+      expect(queryAllByText('10').length).toBeGreaterThan(0);
+      expect(queryAllByText('1').length).toBe(0);
+    });
+
+    it('defaults to plain when countingSpeed is set but countingAnimation is not', () => {
+      const {getByText} = renderCounter({countingSpeed: 'medium'});
+
+      expect(getByText('10')).toBeInTheDocument();
+    });
+  });
+
   describe('space reservation', () => {
     it('renders hidden placeholder with target value when counting up', () => {
       const {container} = renderCounter({

entry_types/scrolled/package/spec/contentElements/counter/WheelNumber-spec.js

@@ -0,0 +1,90 @@
+import React from 'react';
+import {render} from '@testing-library/react';
+
+import {WheelNumber} from 'contentElements/counter/WheelNumber';
+
+import '@testing-library/jest-dom/extend-expect';
+
+describe('WheelNumber', () => {
+  function renderWheelNumber(props) {
+    return render(
+      <WheelNumber
+        value={0}
+        startValue={0}
+        targetValue={100}
+        {...props}
+      />
+    );
+  }
+
+  it('renders 3 wheels with 10 digits each for 3-digit target value', () => {
+    const {container} = renderWheelNumber();
+
+    const digitSpans = Array.from(container.querySelectorAll('span')).filter(span =>
+      /^\d$/.test(span.textContent)
+    );
+
+    expect(digitSpans.length).toBe(30); // 3 wheels × 10 digits
+  });
+
+  it('sets rotation values to show correct digits when value equals target', () => {
+    const {container} = renderWheelNumber({
+      value: 123,
+      targetValue: 123
+    });
+
+    const zeroDigits = Array.from(container.querySelectorAll('span')).filter(span =>
+      span.textContent === '0'
+    );
+
+    const rotationValues = zeroDigits.map(digit =>
+      parseFloat(digit.parentElement.style.getPropertyValue('--val'))
+    );
+
+    expect(rotationValues).toEqual([1, 2, 3]);
+  });
+
+  it('hides zero digit in leading zero wheels', () => {
+    const {container} = renderWheelNumber({
+      value: 5,
+      startValue: 0,
+      targetValue: 100
+    });
+
+    const wheels = container.querySelectorAll('[class*="wheel"]');
+    const getDigit = (wheel, d) => Array.from(wheel.children).find(span => span.textContent === String(d));
+
+    expect(getDigit(wheels[0], 0)).not.toBeVisible();
+    expect(getDigit(wheels[0], 1)).toBeVisible();
+    expect(getDigit(wheels[1], 0)).not.toBeVisible();
+    expect(getDigit(wheels[1], 1)).toBeVisible();
+    expect(getDigit(wheels[2], 0)).toBeVisible();
+  });
+
+  it('renders text entries as static text', () => {
+    const {container} = renderWheelNumber({
+      value: -1,
+      startValue: 0,
+      targetValue: -1
+    });
+
+    expect(container.textContent).toContain('-');
+
+    const wheels = container.querySelectorAll('[class*="wheel"]');
+    expect(wheels.length).toBe(1);
+  });
+
+  it('applies hidden class to text entries with hide flag', () => {
+    const {container} = renderWheelNumber({
+      value: -0.4,
+      startValue: 0,
+      targetValue: -1
+    });
+
+    const minusSpan = Array.from(container.querySelectorAll('span')).find(
+      span => span.textContent === '-'
+    );
+
+    expect(minusSpan.className).toMatch(/hidden/);
+  });
+});

entry_types/scrolled/package/spec/contentElements/counter/createLegacyConfigurationDelegator-spec.js

@@ -0,0 +1,84 @@
+import {createLegacyConfigurationDelegator} from 'contentElements/counter/createLegacyConfigurationDelegator';
+
+describe('createLegacyConfigurationDelegator', () => {
+  it('returns numberSize when set', () => {
+    const model = fakeModel({numberSize: 'lg'});
+    const delegator = createLegacyConfigurationDelegator(model);
+
+    expect(delegator.get('numberSize')).toBe('lg');
+  });
+
+  it('maps legacy textSize large to xxxl', () => {
+    const model = fakeModel({textSize: 'large'});
+    const delegator = createLegacyConfigurationDelegator(model);
+
+    expect(delegator.get('numberSize')).toBe('xxxl');
+  });
+
+  it('maps legacy textSize medium to xl', () => {
+    const model = fakeModel({textSize: 'medium'});
+    const delegator = createLegacyConfigurationDelegator(model);
+
+    expect(delegator.get('numberSize')).toBe('xl');
+  });
+
+  it('maps legacy textSize small to md', () => {
+    const model = fakeModel({textSize: 'small'});
+    const delegator = createLegacyConfigurationDelegator(model);
+
+    expect(delegator.get('numberSize')).toBe('md');
+  });
+
+  it('maps legacy textSize verySmall to xs', () => {
+    const model = fakeModel({textSize: 'verySmall'});
+    const delegator = createLegacyConfigurationDelegator(model);
+
+    expect(delegator.get('numberSize')).toBe('xs');
+  });
+
+  it('prefers numberSize over textSize', () => {
+    const model = fakeModel({numberSize: 'sm', textSize: 'large'});
+    const delegator = createLegacyConfigurationDelegator(model);
+
+    expect(delegator.get('numberSize')).toBe('sm');
+  });
+
+  it('returns countingAnimation when set', () => {
+    const model = fakeModel({countingAnimation: 'wheel'});
+    const delegator = createLegacyConfigurationDelegator(model);
+
+    expect(delegator.get('countingAnimation')).toBe('wheel');
+  });
+
+  it('defaults countingAnimation to plain when countingSpeed is set', () => {
+    const model = fakeModel({countingSpeed: 'medium'});
+    const delegator = createLegacyConfigurationDelegator(model);
+
+    expect(delegator.get('countingAnimation')).toBe('plain');
+  });
+
+  it('does not default countingAnimation when countingSpeed is none', () => {
+    const model = fakeModel({countingSpeed: 'none'});
+    const delegator = createLegacyConfigurationDelegator(model);
+
+    expect(delegator.get('countingAnimation')).toBeUndefined();
+  });
+
+  it('passes through other properties', () => {
+    const model = fakeModel({unit: 'kg'});
+    const delegator = createLegacyConfigurationDelegator(model);
+
+    expect(delegator.get('unit')).toBe('kg');
+  });
+
+  function fakeModel(attributes) {
+    return {
+      get(name) {
+        return attributes[name];
+      },
+      has(name) {
+        return name in attributes;
+      }
+    };
+  }
+});