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

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

@@ -1,111 +0,0 @@
-<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

@@ -1,203 +0,0 @@
-@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

@@ -1,46 +0,0 @@
-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);
-  });
-});