fix(spinner): fixed rendering on safari and firefox #360 (#361)

Co-authored-by: m2rt <mart@bitweb.ee>

Author: mart-sessman

tedi/components/loader/spinner/spinner.component.html

@@ -3,6 +3,7 @@
     class="tedi-spinner--inner"
     cx="22"
     cy="22"
+    [attr.r]="r()"
     fill="none"
   ></circle>
 </svg>

tedi/components/loader/spinner/spinner.component.scss

@@ -16,9 +16,7 @@ $spinner-sizes: (
   animation: 1.4s linear 0s infinite normal none running tedi-spinner-outer;
 
   &--inner {
-    // Convert stroke size in px to viewBox units: stroke px × (viewbox / size px)
-    stroke-width: calc(var(--tedi-spinner-stroke, 2) * #{$spinner-viewbox} / var(--tedi-spinner-size, 16));
-    r: calc(#{$spinner-viewbox / 2} - var(--tedi-spinner-stroke, 2) * #{$spinner-viewbox} / var(--tedi-spinner-size, 16) / 2);
+    stroke-width: var(--tedi-spinner-stroke-width);
     stroke-dasharray: 80, 200;
     stroke-dashoffset: 0;
     animation: 1.4s ease-in-out 0s infinite normal none running tedi-spinner-inner;
@@ -35,9 +33,11 @@ $spinner-sizes: (
   }
 
   @each $size, $stroke in $spinner-sizes {
+    $stroke-width: $stroke * $spinner-viewbox / $size;
+
     &--size-#{$size} {
       --tedi-spinner-size: #{$size};
-      --tedi-spinner-stroke: #{$stroke};
+      --tedi-spinner-stroke-width: #{$stroke-width};
     }
   }
 

tedi/components/loader/spinner/spinner.component.ts

@@ -41,6 +41,15 @@ export class SpinnerComponent {
    */
   label = input<string>();
 
+  private readonly sizeConfig: Record<SpinnerSize, { strokeWidth: number; r: number }> = {
+    10: { strokeWidth: 4.4, r: 19.8 },
+    16: { strokeWidth: 5.5, r: 19.25 },
+    48: { strokeWidth: 3.6667, r: 20.1667 },
+  };
+
+  strokeWidth = computed(() => this.sizeConfig[this.size()].strokeWidth);
+  r = computed(() => this.sizeConfig[this.size()].r);
+
   classes = computed(() => {
     const classList = [
       "tedi-spinner",