@tacdaed/fragments 1.0.0-beta.3 → 1.0.0-beta.4

package/src/lib/components/input/input-slider/input-slider.component.html

@@ -0,0 +1,111 @@
+<div class="frg-input__wrapper"
+  [class.input-error]="hasError"
+  [class.input-warning]="hasWarning"
+  [class.is-disabled]="disabled"
+>
+  @if(label){
+    <label [attr.id]="id + '-label'" [for]="id">{{ label | inputRequiredLabel: required }}</label>
+  }
+
+  @if(showValue){
+    <div class="frg-slider__values">
+      @if(showRange){
+        <span>{{ displayRangeMin }}</span>
+        <span>{{ displayRangeMax }}</span>
+      } @else {
+        <span>{{ displayValue }}</span>
+      }
+    </div>
+  }
+
+  <div
+    class="frg-slider"
+    #track
+    [ngClass]="sliderClasses"
+    [class.is-disabled]="disabled"
+    (pointerdown)="onTrackPointerDown($event)"
+  >
+    <div class="frg-slider__rail"></div>
+    <div
+      class="frg-slider__range"
+      [style.left.%]="showRange ? minPercent : 0"
+      [style.width.%]="showRange ? rangeWidth : singlePercent"
+    ></div>
+
+    @if(showTicks){
+      <div class="frg-slider__ticks">
+        @for(tick of ticks; track tick){
+          <span class="frg-slider__tick" [style.left.%]="valueToPercent(tick)"></span>
+        }
+      </div>
+    }
+
+    @if(showRange){
+      <button
+        type="button"
+        class="frg-slider__thumb"
+        [class.is-active]="isHandleActive('min')"
+        [style.left.%]="minPercent"
+        [attr.aria-labelledby]="id + '-label'"
+        role="slider"
+        [attr.aria-valuemin]="min"
+        [attr.aria-valuemax]="rangeMaxValue"
+        [attr.aria-valuenow]="rangeMinValue"
+        [attr.aria-disabled]="disabled"
+        (pointerdown)="onHandlePointerDown($event, 'min')"
+        (keydown)="onHandleKeydown($event, 'min')"
+      >
+        @if(showTooltip){
+          <span class="frg-slider__tooltip">{{ displayRangeMin }}</span>
+        }
+      </button>
+
+      <button
+        type="button"
+        class="frg-slider__thumb"
+        [class.is-active]="isHandleActive('max')"
+        [style.left.%]="maxPercent"
+        [attr.aria-labelledby]="id + '-label'"
+        role="slider"
+        [attr.aria-valuemin]="rangeMinValue"
+        [attr.aria-valuemax]="max"
+        [attr.aria-valuenow]="rangeMaxValue"
+        [attr.aria-disabled]="disabled"
+        (pointerdown)="onHandlePointerDown($event, 'max')"
+        (keydown)="onHandleKeydown($event, 'max')"
+      >
+        @if(showTooltip){
+          <span class="frg-slider__tooltip">{{ displayRangeMax }}</span>
+        }
+      </button>
+    } @else {
+      <button
+        type="button"
+        class="frg-slider__thumb"
+        [class.is-active]="isHandleActive('single')"
+        [style.left.%]="singlePercent"
+        [attr.aria-labelledby]="id + '-label'"
+        role="slider"
+        [attr.aria-valuemin]="min"
+        [attr.aria-valuemax]="max"
+        [attr.aria-valuenow]="singleValue"
+        [attr.aria-disabled]="disabled"
+        (pointerdown)="onHandlePointerDown($event, 'single')"
+        (keydown)="onHandleKeydown($event, 'single')"
+      >
+        @if(showTooltip){
+          <span class="frg-slider__tooltip">{{ displayValue }}</span>
+        }
+      </button>
+    }
+  </div>
+</div>
+
+@if(showValidation) {
+  <frg-input-validation
+    [errorList]="errorList"
+    [warningList]="warningList"
+    [isFormInvalid]="hasError"
+  >
+  </frg-input-validation>
+}

package/src/lib/components/input/input-slider/input-slider.component.scss

@@ -0,0 +1,203 @@
+@use "sass:color";
+@use './../../../../../assets/styles/scss/variables' as *;
+
+:host {
+  display: block;
+  font-family: $input-font-family;
+
+  label {
+    display: flex;
+    font-size: $font-size-xs;
+    color: $input-text-color;
+    padding: $input-padding;
+  }
+
+  .frg-input__wrapper {
+    position: relative;
+
+    &.input-error label {
+      color: $color-danger;
+    }
+
+    &.input-warning label {
+      color: $color-warning;
+    }
+  }
+
+  .frg-slider__values {
+    display: flex;
+    justify-content: space-between;
+    font-size: $font-size-xs;
+    color: $input-text-color;
+    padding: 0 $input-padding;
+    margin-bottom: 0.35rem;
+  }
+
+  .frg-slider {
+    position: relative;
+    height: var(--slider-height, 2rem);
+    width: 100%;
+    cursor: pointer;
+    touch-action: none;
+    --slider-track-height: 0.35rem;
+    --slider-thumb-size: 1.1rem;
+    --slider-height: 2rem;
+    --slider-accent: #{$color-primary};
+    --slider-accent-focus: #{rgba($color-primary, 0.15)};
+
+    &.is-disabled {
+      cursor: not-allowed;
+      opacity: 0.6;
+      pointer-events: none;
+    }
+
+    &__rail,
+    &__range {
+      position: absolute;
+      top: 50%;
+      height: var(--slider-track-height);
+      border-radius: 999px;
+      transform: translateY(-50%);
+    }
+
+    &__rail {
+      left: 0;
+      right: 0;
+      background: $input-border-color;
+    }
+
+    &__range {
+      background: var(--slider-accent);
+    }
+
+    &__ticks {
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: 50%;
+      height: 0.6rem;
+      transform: translateY(-50%);
+      pointer-events: none;
+    }
+
+    &__tick {
+      position: absolute;
+      width: 2px;
+      height: 0.6rem;
+      background: $input-border-color;
+      border-radius: 2px;
+      transform: translateX(-50%);
+    }
+
+    &__thumb {
+      position: absolute;
+      top: 50%;
+      width: var(--slider-thumb-size);
+      height: var(--slider-thumb-size);
+      border-radius: 50%;
+      transform: translate(-50%, -50%);
+      border: 2px solid var(--slider-accent);
+      background: $color-light;
+      box-shadow: $box-shadow-md;
+      cursor: grab;
+      padding: 0;
+
+      &:focus {
+        outline: none;
+      }
+
+      &:focus-visible {
+        box-shadow: 0 0 0 4px var(--slider-accent-focus);
+      }
+
+      &.is-active {
+        cursor: grabbing;
+      }
+    }
+
+    &__tooltip {
+      position: absolute;
+      left: 50%;
+      bottom: calc(100% + 0.35rem);
+      transform: translate(-50%, 0.2rem);
+      background: $color-dark-neutral;
+      color: $color-light;
+      padding: 0.15rem 0.35rem;
+      font-size: $font-size-xs;
+      border-radius: 0.25rem;
+      white-space: nowrap;
+      opacity: 0;
+      transition: opacity 0.15s ease, transform 0.15s ease;
+      pointer-events: none;
+    }
+
+    &__thumb:hover &__tooltip,
+    &__thumb.is-active &__tooltip {
+      opacity: 1;
+      transform: translate(-50%, 0);
+    }
+  }
+
+  .frg-slider--small {
+    --slider-track-height: 0.25rem;
+    --slider-thumb-size: 0.85rem;
+    --slider-height: 1.6rem;
+  }
+
+  .frg-slider--medium {
+    --slider-track-height: 0.35rem;
+    --slider-thumb-size: 1.1rem;
+    --slider-height: 2rem;
+  }
+
+  .frg-slider--big {
+    --slider-track-height: 0.5rem;
+    --slider-thumb-size: 1.5rem;
+    --slider-height: 2.6rem;
+  }
+
+  .frg-slider--primary {
+    --slider-accent: #{$color-primary};
+    --slider-accent-focus: #{rgba($color-primary, 0.15)};
+  }
+
+  .frg-slider--secondary {
+    --slider-accent: #{$color-secondary};
+    --slider-accent-focus: #{rgba($color-secondary, 0.15)};
+  }
+
+  .frg-slider--tertiary {
+    --slider-accent: #{$color-tertiary};
+    --slider-accent-focus: #{rgba($color-tertiary, 0.15)};
+  }
+
+  .frg-slider--info {
+    --slider-accent: #{$color-info};
+    --slider-accent-focus: #{rgba($color-info, 0.15)};
+  }
+
+  .frg-slider--success {
+    --slider-accent: #{$color-success};
+    --slider-accent-focus: #{rgba($color-success, 0.15)};
+  }
+
+  .frg-slider--warning {
+    --slider-accent: #{$color-warning};
+    --slider-accent-focus: #{rgba($color-warning, 0.15)};
+  }
+
+  .frg-slider--danger {
+    --slider-accent: #{$color-danger};
+    --slider-accent-focus: #{rgba($color-danger, 0.15)};
+  }
+
+  .frg-slider--dark {
+    --slider-accent: #{$color-dark};
+    --slider-accent-focus: #{rgba($color-dark, 0.2)};
+  }
+
+  .frg-slider--light {
+    --slider-accent: #{$color-light};
+    --slider-accent-focus: #{rgba($color-light, 0.4)};
+  }
+}

package/src/lib/components/input/input-slider/input-slider.component.spec.ts

@@ -0,0 +1,46 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { InputSliderComponent } from './input-slider.component';
+
+describe('InputSliderComponent', () => {
+  let fixture: ComponentFixture<InputSliderComponent>;
+  let component: InputSliderComponent;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [InputSliderComponent]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(InputSliderComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('renders a single thumb for single value', () => {
+    component.writeValue(30);
+    fixture.detectChanges();
+
+    const thumbs = fixture.debugElement.queryAll(By.css('.frg-slider__thumb'));
+    expect(thumbs.length).toBe(1);
+    expect(thumbs[0].nativeElement.style.left).toContain('30');
+  });
+
+  it('renders two thumbs for range value', () => {
+    component.range = true;
+    component.writeValue([10, 90]);
+    fixture.detectChanges();
+
+    const thumbs = fixture.debugElement.queryAll(By.css('.frg-slider__thumb'));
+    expect(thumbs.length).toBe(2);
+  });
+
+  it('updates value with keyboard controls', () => {
+    component.writeValue(20);
+    fixture.detectChanges();
+
+    const thumb = fixture.debugElement.query(By.css('.frg-slider__thumb'));
+    thumb.nativeElement.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight' }));
+    fixture.detectChanges();
+
+    expect(component.value).toBe(21);
+  });
+});