fix: change replaceAll to split/join to allow supporting all browsers

Author: bonnyr-f5

src/vid2805-dual-stepper-element.stories.ts

@@ -58,8 +58,8 @@ Default.args = {
   // innerColour:  'darkgrey',
   // innerShape:  'plain',
 
-  innerHand: new StepperHand(25, "red", "plain", 225),
-  outerHand: new StepperHand(30, "green", "plain", 270),
+  innerHand: new StepperHand(25, "red", "arrow", 225),
+  outerHand: new StepperHand(30, "green", "arrow", 270),
 };
 
 export const NineOclock = Template.bind({});

src/vid2805-dual-stepper-element.ts

@@ -58,9 +58,9 @@ export class VID2805DualStepperElement extends LitElement {
 
   readonly handMap : {[key:string] : string } = {
     "outer_plain_hand" : "m0,0 c0,5,4,9,9,9,3.28,0,6.13-1.73,7.7-4.33v.03c.5-.8,1.2-1.6,2.1-2.1,.8-.5,1.8-.8,2.8-.8h${len}c1,0,1.8-.8,1.8-1.8s-.8-1.8-1.8-1.8h-${len}c-1,0-1.9-.3-2.8-.8-.8-.5-1.6-1.2-2.1-2h0c-1.56-2.64-4.43-4.4-7.74-4.4-5,0-9,4.1-9,9Zm3.5,0c0-3,2.4-5.4,5.5-5.4s5.5,2.4,5.5,5.4-2.5,5.4-5.5,5.4-5.5-2.4-5.5-5.4Z",
-    "outer_arrow_hand" : "m0,0 c0,5,4,9,9,9,3.89,0,7.16-2.42,8.43-5.85,.3-.58,.78-1.16,1.27-1.45,.6-.3,1.29-.4,1.99-.2,0,0,0,0,0,0h.01s.9,.2,.9,.2l34.4-1.7-34.4-1.9-.9,.3c-.7,.2-1.4,.1-2-.2-.6-.3-1.1-.8-1.3-1.5,0,0-.01,.02-.02,.02C16.13,2.41,12.89,.05,9.05,.05c-5,0-9,4-9,9Zm3.5,0c0-3.1,2.5-5.5,5.5-5.5s5.5,2.5,5.5,5.5-2.5,5.5-5.5,5.5-5.5-2.5-5.5-5.5Z",
+    "outer_arrow_hand" : "m 0 0 c 0 5 4 9 9 9 c 3.89 0 7.16 -2.42 8.43 -5.85 c 0.3 -0.58 0.78 -1.16 1.27 -1.45 c 0.6 -0.3 1.29 -0.4 1.99 -0.2 c 0 0 0 0 0 0 h 0.01 s 0.9 0.2 0.9 0.2 l ${len} -1.7 l -${len} -1.9 l -0.9 0.3 c -0.7 0.2 -1.4 0.1 -2 -0.2 c -0.6 -0.3 -1.1 -0.8 -1.3 -1.5 c 0 0 -0.01 0.02 -0.02 0.02 c -1.38 -3.72 -4.38 -5.72 -8.38 -5.72 c -5 0 -9 4 -9 9 Z m 3.5 0 c 0 -3.1 2.5 -5.5 5.5 -5.5 s 5.5 2.5 5.5 5.5 s -2.5 5.5 -5.5 5.5 s -5.5 -2.5 -5.5 -5.5 Z",
     "inner_plain_hand" : "m0,0 c 0 2.6 2.1 4.7 4.7 4.7 c 1.27 0 2.41 -0.5 3.25 -1.31 h 0 c 0.5 -0.49 1.1 -0.89 1.8 -1.19 c 0.7 -0.3 1.4 -0.4 2.1 -0.4 h ${len} c 1 0 1.8 -0.8 1.8 -1.8 s -0.8 -1.8 -1.8 -1.8 h -${len} s -0.06 0 -0.06 0 c -0.7 0 -1.5 -0.1 -2.1 -0.4 c -0.7 -0.3 -1.3 -0.7 -1.8 -1.2 h 0 c -0.84 -0.8 -1.98 -1.3 -3.24 -1.3 c -2.6 0 -4.7 2.1 -4.7 4.7 Z m 2.7 0 c 0 -1.1 0.9 -2 2 -2 s 2 0.9 2 2 s -0.9 2 -2 2 s -2 -0.9 -2 -2 Z",
-    "inner_arrow_hand" : "m0,0 c0,2.6,2.1,4.7,4.7,4.7,1.37,0,2.59-.59,3.44-1.52v.02c.7-.7,1.5-1.2,2.5-1.5s2-.3,2.9-.1h-.04l.9,.2,86.5-1.8-86.5-1.8-.9,.2h.04c-1,.2-2,.2-2.9-.1-1-.3-1.8-.8-2.5-1.5v.02c-.86-.93-2.08-1.52-3.44-1.52-2.6,0-4.7,2.1-4.7,4.7Zm2.7,0c0-1.1,.9-2,2-2s2,.9,2,2-.9,2-2,2-2-.9-2-2Z",
+    "inner_arrow_hand" : "m 0 0 c 0 2.6 2.1 4.7 4.7 4.7 c 1.37 0 2.59 -0.59 3.44 -1.52 c 0.7 -0.7 1.5 -1.2 2.5 -1.5 s 2 -0.3 2.9 -0.1 l 0.9 0.2 l ${len} -1.8 l -${len} -1.8 l -0.9 0.2 c -1 0.2 -2 0.2 -2.9 -0.1 c -1 -0.3 -1.8 -0.8 -2.5 -1.5 c -0.86 -0.93 -2.08 -1.52 -3.44 -1.52 c -2.6 0 -4.7 2.1 -4.7 4.7 z m 2.7 0 c 0 -1.1 0.9 -2 2 -2 s 2 0.9 2 2 s -0.9 2 -2 2 s -2 -0.9 -2 -2 z",
   }
 
 
@@ -85,8 +85,8 @@ export class VID2805DualStepperElement extends LitElement {
       this.outerHand.length = 70;
     }
 
-    inner_svg = inner_svg.replaceAll("${len}", this.innerHand.length.toString());
-    outer_svg = outer_svg.replaceAll("${len}", this.outerHand.length.toString());
+    inner_svg = inner_svg.split("${len}").join(this.innerHand.length.toString());
+    outer_svg = outer_svg.split("${len}").join(this.outerHand.length.toString());
 
     const ml = Math.max(this.innerHand.length, this.outerHand.length);
     if (ml > 30) {