feat(styles): Input range progress webkit box-shadow workaround

.changeset/forty-knives-love.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': patch
+---
+
+Added a workaround to display progress bar on input range and on webkit browsers without JavaScript.

packages/demo/src/app/bootstrap/components/form-range/form-range-custom-demo/form-range-custom-demo.component.html

@@ -1,18 +1,11 @@
 <label class="form-label" for="templateDrivenRange">Template-driven range</label>
-<input
-  [(ngModel)]="templateDrivenValue"
-  class="form-range"
-  appFormRange
-  id="templateDrivenRange"
-  type="range"
-/>
+<input [(ngModel)]="templateDrivenValue" class="form-range" id="templateDrivenRange" type="range" />
 
 <label class="form-label" for="reactiveRange">Reactive range</label>
 <input
   (input)="reactiveValue.setValue($event.target['value'])"
   [formControl]="reactiveValue"
   class="form-range"
-  appFormRange
   id="reactiveRange"
   type="range"
 />
@@ -21,7 +14,6 @@
 <input
   [(ngModel)]="displayedValue"
   class="form-range"
-  appFormRange
   id="rangeWithValue"
   max="100"
   min="0"
@@ -36,7 +28,6 @@
     <input
       [(ngModel)]="controlledValue"
       class="form-range"
-      appFormRange
       id="controlledRange"
       max="100"
       min="0"

packages/demo/src/app/bootstrap/components/form-range/form-range-custom-demo/form-range-custom-demo.module.ts

@@ -6,10 +6,9 @@ import { NgModule } from '@angular/core';
 import { FormRangeCustomDemoComponent } from './form-range-custom-demo.component';
 import { CommonModule } from '@angular/common';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { FormRangeDirective } from './form-range.directive';
 
 @NgModule({
-  declarations: [FormRangeCustomDemoComponent, FormRangeDirective],
+  declarations: [FormRangeCustomDemoComponent],
   exports: [FormRangeCustomDemoComponent],
   imports: [CommonModule, FormsModule, ReactiveFormsModule],
 })

packages/demo/src/app/bootstrap/components/form-range/form-range-demo-page/form-range-demo-page.component.html

@@ -4,19 +4,6 @@ <h1 class="bold font-curve-large">Form range</h1>
 </div>
 
 <section>
-  <h3>Recommended form range</h3>
-  <div class="alert alert-info my-large">
-    <p class="alert-heading">
-      It is recommended to add the
-      <a
-        href="https://github.com/swisspost/design-system/tree/main/packages/demo/src/app/bootstrap/components/form-range/form-range-custom-demo/form-range.directive.ts"
-      >
-        FormRangeDirective
-      </a>
-      to your project so that the range inputs behavior is complete.
-    </p>
-  </div>
-
   <app-form-range-custom></app-form-range-custom>
   <code
     [highlight]="customCodeTemplate"

packages/demo/src/app/bootstrap/components/form-range/form-range-demo/form-range-demo.component.html

@@ -1,11 +1,2 @@
 <label for="customRange" class="form-label">Example range</label>
-<input
-  type="range"
-  class="form-range"
-  appFormRange
-  min="0"
-  max="5"
-  step="0.5"
-  value="3.5"
-  id="customRange"
-/>
+<input type="range" class="form-range" min="0" max="5" step="0.5" value="3.5" id="customRange" />

packages/demo/src/app/ng-bootstrap/components/datepicker/datepicker-demo-page/datepicker-demo-page.component.html

@@ -95,7 +95,6 @@ <h3 class="bold">Simple datepicker</h3>
       <input
         type="range"
         class="form-range"
-        appFormRange
         min="0"
         max="3"
         id="size"
@@ -153,7 +152,6 @@ <h3 class="bold mt-5">Datepicker with validation</h3>
       <input
         type="range"
         class="form-range"
-        appFormRange
         min="0"
         max="3"
         id="size-validation"

packages/styles/src/components/form-range.scss

@@ -10,38 +10,98 @@
 @use './../variables/components/forms';
 @use './../mixins/utilities';
 
+$track-height: 4px;
+$webkit-progress-height-adjustment: 2px;
+$webkit-thumb-width: 33px;
+
+:has(> .form-range) {
+  @include utilities.focus-style();
+}
+
+@supports not selector(:has(> .form-range)) {
+  .form-range {
+    @include utilities.focus-style();
+  }
+}
+
 .form-range {
-  // https://codepen.io/thebabydino/pen/goYYrN
-  --post-range: calc(var(--post-max) - var(--post-min));
-  --post-ratio: calc((var(--post-val) - var(--post-min)) / var(--post-range));
-  --post-sx: calc(0.5 * 1.5em + var(--post-ratio) * (100% - 1.5em));
+  &::-webkit-slider-container {
+    overflow-x: clip;
+  }
 
   &::-moz-range-thumb {
     border-radius: 50%;
     box-sizing: border-box;
     cursor: pointer;
   }
 
+  &::-webkit-slider-runnable-track {
+    height: $track-height;
+  }
+
+  &::-webkit-slider-thumb {
+    // Source: https://antvil.github.io/css-sos/sos/progress/
+    clip-path: polygon(
+      0 (-($webkit-thumb-width)),
+      $webkit-thumb-width 0,
+      $webkit-thumb-width $webkit-thumb-width,
+      0 $webkit-thumb-width,
+      0 calc(50% + $webkit-progress-height-adjustment),
+      -100vw calc(50% + $webkit-progress-height-adjustment),
+      -100vw calc(50% - $webkit-progress-height-adjustment),
+      0 calc(50% - $webkit-progress-height-adjustment)
+    );
+  }
+
+  &::-moz-range-track,
+  &::-moz-range-progress {
+    height: $track-height;
+  }
+
   &:not(:disabled, .disabled) {
     &::-webkit-slider-runnable-track {
-      background: linear-gradient(color.$black, color.$black) 0 / var(--post-sx) 100%;
-      background-repeat: no-repeat;
       background-color: color.$gray-20;
     }
 
     &::-moz-range-progress {
       background-color: color.$black;
     }
+
+    &::-webkit-slider-thumb {
+      box-shadow: calc(-100vw - $webkit-thumb-width) 0 0 100vw color.$black;
+    }
+
+    &:hover {
+      &::-webkit-slider-thumb {
+        border-width: 3px;
+      }
+
+      &::-moz-range-thumb {
+        border-width: 3px;
+      }
+    }
+
+    @include utilities.focus-style(50%, '::-moz-range-thumb') {
+      box-shadow: none; // Remove default style
+      outline: none;
+    }
   }
 
   &:disabled,
   &.disabled {
     &::-webkit-slider-thumb {
       border-color: forms.$form-range-thumb-disabled-border-color;
+      border-style: dashed;
+      box-shadow: calc(-100vw - $webkit-thumb-width) 0 0 100vw color.$gray-40;
     }
 
     &::-moz-range-thumb {
       border-color: forms.$form-range-thumb-disabled-border-color;
+      border-style: dashed;
+    }
+
+    &::-moz-range-progress {
+      background-color: color.$gray-40;
     }
   }
 
@@ -57,10 +117,16 @@
     // so, the "forced-color-adjust" property is necessary for "linear-gradient" to continue to work
     forced-color-adjust: none;
 
+    &::-webkit-slider-thumb {
+      box-shadow: calc(-100vw - $webkit-thumb-width) 0 0 100vw SelectedItem !important;
+    }
+
+    &::-moz-range-progress {
+      background-color: SelectedItem !important;
+    }
+
     &:not(:disabled, .disabled) {
       &::-webkit-slider-runnable-track {
-        background: linear-gradient(Highlight, Highlight) 0 / var(--post-sx) 100%;
-        background-repeat: no-repeat;
         background-color: ButtonBorder;
       }
 
@@ -73,38 +139,22 @@
         background-color: ButtonText;
       }
 
-      &::-moz-range-progress {
-        background-color: Highlight;
-      }
-
       &::-moz-range-thumb {
         background-color: ButtonFace;
         border-color: ButtonText;
       }
-
-      &:focus-visible {
-        &::-webkit-slider-thumb {
-          outline-offset: commons.$border-thick;
-          outline: commons.$border-thick solid Highlight;
-        }
-
-        &::-moz-range-thumb {
-          outline-offset: commons.$border-thick;
-          outline: commons.$border-thick solid Highlight;
-        }
-      }
     }
 
     &:disabled,
     &.disabled {
       &::-webkit-slider-thumb {
         background-color: ButtonFace;
-        border-color: ButtonBorder;
+        border-color: GrayText;
       }
 
       &::-moz-range-thumb {
         background-color: ButtonFace;
-        border-color: ButtonBorder;
+        border-color: GrayText;
       }
     }
   }