refactor(color-range-slider): move component to shared features

Author: pawcoding

src/app/editor/editor.component.html

@@ -13,7 +13,7 @@ <h2 class="font-semibold">{{ color().name }}</h2>
   />
 
   <section class="flex flex-col gap-2">
-    <rp-editor-range
+    <rp-color-range-slider
       [label]="'common.hue' | translate"
       [tooltip]="'editor.properties.hue' | translate"
       [value]="shade().hsl.H"
@@ -24,7 +24,7 @@ <h2 class="font-semibold">{{ color().name }}</h2>
       min="0"
     />
 
-    <rp-editor-range
+    <rp-color-range-slider
       [label]="'common.saturation' | translate"
       [tooltip]="'editor.properties.saturation' | translate"
       [value]="shade().hsl.S"
@@ -33,7 +33,7 @@ <h2 class="font-semibold">{{ color().name }}</h2>
       key="saturation"
     />
 
-    <rp-editor-range
+    <rp-color-range-slider
       [label]="'common.lightness' | translate"
       [tooltip]="'editor.properties.lightness' | translate"
       [value]="shade().hsl.L"

src/app/editor/editor.component.ts

@@ -5,8 +5,8 @@ import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { ColorService } from '../shared/data-access/color.service';
 import { Color, Shade } from '../shared/model';
 import { ColorInputComponent } from '../shared/ui/color-input/color-input.component';
+import { ColorRangeSliderComponent } from '../shared/ui/color-range-slider/color-range-slider.component';
 import { textColor } from '../shared/utils/text-color';
-import { EditorRangeComponent } from './ui/editor-range/editor-range.component';
 
 /**
  * Data for the editor dialog.
@@ -32,7 +32,7 @@ export enum UpdateType {
 @Component({
   selector: 'rp-editor',
   standalone: true,
-  imports: [ColorInputComponent, TranslateModule, DecimalPipe, EditorRangeComponent],
+  imports: [ColorInputComponent, TranslateModule, DecimalPipe, ColorRangeSliderComponent],
   templateUrl: './editor.component.html'
 })
 export class EditorComponent {

src/app/editor/ui/editor-range/editor-range.component.css

@@ -0,0 +1,37 @@
+:host {
+  display: block;
+}
+
+input[type='range']::-webkit-slider-thumb {
+  background-color: hsl(var(--editor-hue), var(--editor-saturation), var(--editor-lightness));
+}
+
+input[type='range']::-moz-range-thumb {
+  background-color: hsl(var(--editor-hue), var(--editor-saturation), var(--editor-lightness));
+}
+
+input[type='range'] {
+  &.hue {
+    background: linear-gradient(90deg,
+        hsl(0, var(--editor-saturation), var(--editor-lightness)) 0%,
+        hsl(60, var(--editor-saturation), var(--editor-lightness)) 33.3%,
+        hsl(120, var(--editor-saturation), var(--editor-lightness)) 50%,
+        hsl(180, var(--editor-saturation), var(--editor-lightness)) 58.3%,
+        hsl(240, var(--editor-saturation), var(--editor-lightness)) 66.6%,
+        hsl(300, var(--editor-saturation), var(--editor-lightness)) 83.4%,
+        hsl(360, var(--editor-saturation), var(--editor-lightness)) 100%);
+  }
+
+  &.saturation {
+    background: linear-gradient(90deg,
+        hsl(var(--editor-hue), 0%, var(--editor-lightness)) 0%,
+        hsl(var(--editor-hue), 100%, var(--editor-lightness)) 100%);
+  }
+
+  &.lightness {
+    background: linear-gradient(90deg,
+        hsl(var(--editor-hue), var(--editor-saturation), 100%) 0%,
+        hsl(var(--editor-hue), var(--editor-saturation), 50%) 50%,
+        hsl(var(--editor-hue), var(--editor-saturation), 0%) 100%);
+  }
+}

src/app/editor/ui/editor-range/editor-range.component.html

@@ -0,0 +1,25 @@
+<label
+  [for]="key()"
+  class="flex justify-between"
+>
+  <span class="font-semibold">
+    {{ label() }}
+  </span>
+
+  <span>
+    {{ value() | number: '1.0-0' }}
+  </span>
+</label>
+
+<input
+  #input
+  [class]="key()"
+  [id]="key()"
+  [max]="max()"
+  [min]="min()"
+  [title]="tooltip()"
+  [value]="transformedValue()"
+  (input)="updateValue(input.value)"
+  step="1"
+  type="range"
+/>

src/app/shared/ui/color-range-slider/color-range-slider.component.css

@@ -1,17 +1,17 @@
 import { signal } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { EditorRangeComponent } from './editor-range.component';
+import { ColorRangeSliderComponent } from './color-range-slider.component';
 
-describe('EditorRangeComponent', () => {
-  let component: EditorRangeComponent;
-  let fixture: ComponentFixture<EditorRangeComponent>;
+describe('ColorRangeSliderComponent', () => {
+  let component: ColorRangeSliderComponent;
+  let fixture: ComponentFixture<ColorRangeSliderComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [EditorRangeComponent]
+      imports: [ColorRangeSliderComponent]
     }).compileComponents();
 
-    fixture = TestBed.createComponent(EditorRangeComponent);
+    fixture = TestBed.createComponent(ColorRangeSliderComponent);
     component = fixture.componentInstance;
 
     // @ts-expect-error - Bind required input signal

src/app/shared/ui/color-range-slider/color-range-slider.component.html

@@ -1,10 +1,10 @@
 import { Meta, argsToTemplate } from '@storybook/angular';
-import { createStory } from '../../../shared/utils/storybook';
-import { EditorRangeComponent } from './editor-range.component';
+import { createStory } from '../../utils/storybook';
+import { ColorRangeSliderComponent } from './color-range-slider.component';
 
-const meta: Meta<EditorRangeComponent> = {
-  title: 'Editor/Range',
-  component: EditorRangeComponent,
+const meta: Meta<ColorRangeSliderComponent> = {
+  title: 'Shared/Color Range Slider',
+  component: ColorRangeSliderComponent,
   tags: ['autodocs'],
   argTypes: {
     key: {
@@ -24,7 +24,7 @@ const meta: Meta<EditorRangeComponent> = {
 };
 export default meta;
 
-export const Hue = createStory<EditorRangeComponent>({
+export const Hue = createStory<ColorRangeSliderComponent>({
   args: {
     label: 'Hue',
     tooltip: 'Adjust the hue',
@@ -35,11 +35,11 @@ export const Hue = createStory<EditorRangeComponent>({
   render: (args) => ({
     template: `
         <div #parent style="--editor-hue: ${args.value}; --editor-saturation: 100%; --editor-lightness: 50%">
-            <rp-editor-range ${argsToTemplate(args)} (valueChange)="parent.style.setProperty('--editor-hue', $event)" />
+            <rp-color-range-slider ${argsToTemplate(args)} (valueChange)="parent.style.setProperty('--editor-hue', $event)" />
         </div>`
   })
 });
-export const Saturation = createStory<EditorRangeComponent>({
+export const Saturation = createStory<ColorRangeSliderComponent>({
   args: {
     label: 'Saturation',
     tooltip: 'Adjust the saturation',
@@ -49,11 +49,11 @@ export const Saturation = createStory<EditorRangeComponent>({
   render: (args) => ({
     template: `
         <div #parent style="--editor-hue: 180; --editor-saturation: ${args.value}%; --editor-lightness: 50%">
-            <rp-editor-range ${argsToTemplate(args)} (valueChange)="parent.style.setProperty('--editor-saturation', $event + '%')" />
+            <rp-color-range-slider ${argsToTemplate(args)} (valueChange)="parent.style.setProperty('--editor-saturation', $event + '%')" />
         </div>`
   })
 });
-export const Lightness = createStory<EditorRangeComponent>({
+export const Lightness = createStory<ColorRangeSliderComponent>({
   args: {
     label: 'Lightness',
     tooltip: 'Adjust the lightness',
@@ -63,7 +63,7 @@ export const Lightness = createStory<EditorRangeComponent>({
   render: (args) => ({
     template: `
         <div #parent style="--editor-hue: 180; --editor-saturation: 100%; --editor-lightness: ${args.value}%">
-            <rp-editor-range ${argsToTemplate(args)} (valueChange)="parent.style.setProperty('--editor-lightness', $event + '%')" />
+            <rp-color-range-slider ${argsToTemplate(args)} (valueChange)="parent.style.setProperty('--editor-lightness', $event + '%')" />
         </div>`
   })
 });

src/app/editor/ui/editor-range/editor-range.component.spec.ts renamed to src/app/shared/ui/color-range-slider/color-range-slider.component.spec.ts

@@ -3,13 +3,13 @@ import { Component, computed, input, model, numberAttribute } from '@angular/cor
 import { hueToWheel, wheelToHue } from '../../utils/color-wheel';
 
 @Component({
-  selector: 'rp-editor-range',
+  selector: 'rp-color-range-slider',
   standalone: true,
   imports: [DecimalPipe],
-  templateUrl: './editor-range.component.html',
-  styleUrl: './editor-range.component.css'
+  templateUrl: './color-range-slider.component.html',
+  styleUrl: './color-range-slider.component.css'
 })
-export class EditorRangeComponent {
+export class ColorRangeSliderComponent {
   /**
    * Label to display above the range input
    */