feat: add range component

projects/design-angular-kit/src/lib/components/form/form.module.ts

@@ -3,6 +3,7 @@ import { ItCheckboxComponent } from './checkbox/checkbox.component';
 import { ItInputComponent } from './input/input.component';
 import { ItPasswordInputComponent } from './password-input/password-input.component';
 import { ItRadioButtonComponent } from './radio-button/radio-button.component';
+import { ItRangeComponent } from './range/range.component';
 import { ItRatingComponent } from './rating/rating.component';
 import { ItSelectComponent } from './select/select.component';
 import { ItTextareaComponent } from './textarea/textarea.component';
@@ -15,6 +16,7 @@ const formComponents = [
   ItInputComponent,
   ItPasswordInputComponent,
   ItRadioButtonComponent,
+  ItRangeComponent,
   ItRatingComponent,
   ItSelectComponent,
   ItTextareaComponent,

projects/design-angular-kit/src/lib/components/form/range/range.component.html

@@ -0,0 +1,14 @@
+<div class="d-flex justify-content-between align-items-center">
+  <label *ngIf="label" [for]="id" class="form-label">{{label}}</label>
+  <ng-content></ng-content>
+</div>
+
+<input #slider
+       [id]="id"
+       type="range"
+       [min]="min"
+       [max]="max"
+       [step]="step"
+       class="form-range"
+       [class.double-color]="!!leftColor && !!rightColor"
+       [formControl]="control">

projects/design-angular-kit/src/lib/components/form/range/range.component.scss

@@ -0,0 +1,3 @@
+.form-range.double-color::-webkit-slider-runnable-track {
+  background: linear-gradient(to right, var(--range-left-color) var(--range-percentage), var(--range-right-color) var(--range-percentage));
+}

projects/design-angular-kit/src/lib/components/form/range/range.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ItRangeComponent } from './range.component';
+import { tb_base } from '../../../../test';
+
+describe('ItRangeComponent', () => {
+  let component: ItRangeComponent;
+  let fixture: ComponentFixture<ItRangeComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule(tb_base).compileComponents();
+
+    fixture = TestBed.createComponent(ItRangeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/design-angular-kit/src/lib/components/form/range/range.component.ts

@@ -0,0 +1,103 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  Input,
+  OnChanges,
+  OnDestroy,
+  OnInit,
+  SimpleChanges,
+  ViewChild
+} from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ItAbstractFormComponent } from '../../../abstracts/abstract-form.component';
+import { ReactiveFormsModule } from '@angular/forms';
+import { distinctUntilChanged, startWith, Subscription } from 'rxjs';
+
+@Component({
+  selector: 'it-range',
+  standalone: true,
+  imports: [CommonModule, ReactiveFormsModule],
+  templateUrl: './range.component.html',
+  styleUrls: ['./range.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ItRangeComponent extends ItAbstractFormComponent<number | null | undefined> implements OnInit, OnChanges, OnDestroy {
+
+  /**
+   * The max value
+   */
+  @Input() max?: number;
+
+  /**
+   * The min value
+   */
+  @Input() min?: number;
+
+  /**
+   * The step value
+   */
+  @Input() step?: number | 'any';
+
+  /**
+   * The color on left of thumb [Require rightColor]
+   * @example '#0d6efd' or 'var(--bs-primary)'
+   * @default undefined ('var(--bs-gray-300)')
+   */
+  @Input() leftColor?: string;
+
+  /**
+   * The color on right of thumb [Require leftColor]
+   * @example '#0d6efd' or 'var(--bs-primary)'
+   * @default undefined ('var(--bs-gray-300)')
+   */
+  @Input() rightColor?: string;
+
+  @ViewChild('slider', { static: true }) slider!: ElementRef<HTMLInputElement>;
+
+  private subscription?: Subscription;
+
+  override ngOnInit() {
+    super.ngOnInit();
+    this.subscription = this.control.valueChanges.pipe(
+      distinctUntilChanged(),
+      startWith(undefined)
+    ).subscribe(() => this.updateSliderColor());
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes['leftColor']) {
+      this.slider.nativeElement.style.setProperty('--range-left-color', this.leftColor ?? null);
+    }
+    if (changes['rightColor']) {
+      this.slider.nativeElement.style.setProperty('--range-right-color', this.rightColor ?? null);
+    }
+  }
+
+  ngOnDestroy() {
+    this.subscription?.unsubscribe();
+  }
+
+  override writeValue(value: number | null | undefined) {
+    super.writeValue(value);
+    this.updateSliderColor();
+  }
+
+  /**
+   * Update the percentage of slider color
+   * @private
+   */
+  private updateSliderColor(): void {
+    if (!this.leftColor || !this.rightColor) {
+      return;
+    }
+
+    const max = Number(this.slider.nativeElement.max) || 100;
+    const min = Number(this.slider.nativeElement.min) || 0;
+
+    // Calculate visible width
+    const diff = max - min;
+    const val = (((this.control.value ?? (diff / 2)) - min) * 100) / diff;
+    this.slider.nativeElement.style.setProperty('--range-percentage', `${val}%`);
+  }
+}

projects/design-angular-kit/src/public_api.ts

@@ -64,6 +64,7 @@ export * from './lib/components/form/checkbox/checkbox.component';
 export * from './lib/components/form/input/input.component';
 export * from './lib/components/form/password-input/password-input.component';
 export * from './lib/components/form/radio-button/radio-button.component';
+export * from './lib/components/form/range/range.component';
 export * from './lib/components/form/rating/rating.component';
 export * from './lib/components/form/select/select.component';
 export * from './lib/components/form/textarea/textarea.component';

src/app/app-routing.module.ts

@@ -47,7 +47,8 @@ const routes: Routes = [
     { path: 'modal', loadChildren: () => import('src/app/modal/modal.module').then(m => m.ModalModule) },
     { path: 'language-switcher', loadChildren: () => import('src/app/language-switcher/language-switcher.module').then(m => m.LanguageSwitcherModule) },
     { path: 'password-input', loadChildren: () => import('src/app/password-input/password-input.module').then(m => m.PasswordInputModule) },
-    { path: 'carousel', loadChildren: () => import('src/app/carousel/carousel.module').then(m => m.CarouselModule) }
+    { path: 'carousel', loadChildren: () => import('src/app/carousel/carousel.module').then(m => m.CarouselModule) },
+    { path: 'range', loadChildren: () => import('src/app/range/range.module').then(m => m.RangeModule) }
   ]},
   { path: 'error/not-found', component: ItErrorPageComponent, data: { errorCode: 404 } },
   { path: 'error/forbidden', component: ItErrorPageComponent, data: { errorCode: 403 } },

src/app/range/range-custom-colors/range-custom-colors.component.html

@@ -0,0 +1,16 @@
+<h3>Barra personalizzata</h3>
+<div class="bd-example">
+
+  <div class="row">
+    <div class="col">
+      <it-range leftColor="var(--bs-primary)"
+                rightColor="var(--bs-gray-300)"></it-range>
+    </div>
+
+    <div class="col">
+      <it-range leftColor="var(--bs-warning)"
+                rightColor="#ffdc73"></it-range>
+    </div>
+  </div>
+
+</div>

src/app/range/range-custom-colors/range-custom-colors.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RangeCustomColorsComponent } from './range-custom-colors.component';
+
+describe('RangeCustomColorsComponent', () => {
+  let component: RangeCustomColorsComponent;
+  let fixture: ComponentFixture<RangeCustomColorsComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [RangeCustomColorsComponent]
+    });
+    fixture = TestBed.createComponent(RangeCustomColorsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/range/range-custom-colors/range-custom-colors.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'it-range-custom-colors',
+  templateUrl: './range-custom-colors.component.html'
+})
+export class RangeCustomColorsComponent {
+}

src/app/range/range-example/range-example.component.html

@@ -0,0 +1,17 @@
+<div class="bd-example">
+  <div class="row">
+    <div class="col">
+      <it-range label="Esempio ngModel" [(ngModel)]="rangeValue">
+        {{rangeValue}} %
+      </it-range>
+    </div>
+    <div class="col">
+      <form [formGroup]="formGroup">
+        <it-range label="Esempio FormGroup"
+                  [min]="0" [max]="1000" [step]="2" formControlName="range">
+          Valore selezionato: {{formGroup.get('range').value}}
+        </it-range>
+      </form>
+    </div>
+  </div>
+</div>

src/app/range/range-example/range-example.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RangeExampleComponent } from './range-example.component';
+
+describe('RangeExampleComponent', () => {
+  let component: RangeExampleComponent;
+  let fixture: ComponentFixture<RangeExampleComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [RangeExampleComponent]
+    });
+    fixture = TestBed.createComponent(RangeExampleComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/range/range-example/range-example.component.ts

@@ -0,0 +1,21 @@
+import { Component } from '@angular/core';
+import { FormBuilder, FormGroup } from '@angular/forms';
+
+@Component({
+  selector: 'it-range-example',
+  templateUrl: './range-example.component.html'
+})
+export class RangeExampleComponent {
+
+  rangeValue = 50;
+
+  formGroup: FormGroup;
+
+  constructor(
+    private readonly formBuilder: FormBuilder
+  ) {
+    this.formGroup = this.formBuilder.group({
+      range: [null]
+    })
+  }
+}

src/app/range/range-examples/range-examples.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RangeExamplesComponent } from './range-examples.component';
+
+describe('RangeExamplesComponent', () => {
+  let component: RangeExamplesComponent;
+  let fixture: ComponentFixture<RangeExamplesComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [RangeExamplesComponent]
+    });
+    fixture = TestBed.createComponent(RangeExamplesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/range/range-examples/range-examples.component.tpl

@@ -0,0 +1,26 @@
+{% from "../../macro.template.njk" import sanitize as sanitize %}
+
+{% set html %}
+  {% include "../range-example/range-example.component.html" %}
+{% endset %}
+
+{% set typescript %}
+  {% include "../range-example/range-example.component.ts" %}
+{% endset %}
+
+<it-range-example></it-range-example>
+
+<it-source-display html="{$ sanitize(html) $}" typescript="{$ sanitize(typescript) $}"></it-source-display>
+
+
+{% set htmlCustomColors %}
+  {% include "../range-custom-colors/range-custom-colors.component.html" %}
+{% endset %}
+
+{% set typescriptCustomColors %}
+  {% include "../range-custom-colors/range-custom-colors.component.ts" %}
+{% endset %}
+
+<it-range-custom-colors></it-range-custom-colors>
+
+<it-source-display html="{$ sanitize(htmlCustomColors) $}" typescript="{$ sanitize(typescriptCustomColors) $}"></it-source-display>

src/app/range/range-examples/range-examples.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'it-range-examples',
+  templateUrl: './range-examples.component.html'
+})
+export class RangeExamplesComponent {
+
+}

src/app/range/range-index/range-index.component.html

@@ -0,0 +1,15 @@
+<h1 class="bd-title">Range</h1>
+<p class="bd-lead">
+  Input di intervallo personalizzato per uno stile uniforme su tutti i browser e personalizzazione integrata.
+</p>
+
+<it-tab-container>
+  <it-tab-item label="Esempi" active="true" class="pt-3">
+    <it-range-examples></it-range-examples>
+  </it-tab-item>
+  <it-tab-item label="API" class="pt-3">
+    <h3>ItRangeComponent</h3>
+    <it-api-parameters [component]="component"></it-api-parameters>
+  </it-tab-item>
+</it-tab-container>
+

src/app/range/range-index/range-index.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RangeIndexComponent } from './range-index.component';
+
+describe('RangeIndexComponent', () => {
+  let component: RangeIndexComponent;
+  let fixture: ComponentFixture<RangeIndexComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [RangeIndexComponent]
+    });
+    fixture = TestBed.createComponent(RangeIndexComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});