@testgorilla/tgo-ui 2.31.1 → 2.31.3-beta.0

package/projects/tgo-canopy-ui/components/slider/slider.component.html

@@ -1,185 +0,0 @@
-<ng-container>
-  <div
-    class="slider-container"
-    [attr.theme]="applicationTheme"
-    [ngClass]="{ disabled: disabled, error: hasError && touchedControlName }"
-  >
-    @if (label) {
-      <div class="slider-label">{{ label }}</div>
-    }
-
-    <div class="slider">
-      @if (!isBasicSlider) {
-        <div class="min-value">
-          <span>
-            @if (useDecimal()) {
-              {{ min | number }}
-            } @else {
-              {{ min }}
-            }
-            @if (percentage) {
-              %
-            }
-          </span>
-        </div>
-      }
-      <mat-slider
-        [disableRipple]="applicationTheme !== 'classic'"
-        #sliderElement
-        discrete
-        [disabled]="disabled"
-        [max]="max"
-        [min]="min"
-        [step]="step"
-        (mouseenter)="sliderElement.discrete = true"
-        (mouseleave)="sliderElement.discrete = false"
-        [displayWith]="formatLabel"
-      >
-        @if (isBasicSlider) {
-          <input [disabled]="disabled" (valueChange)="onValueChange($event)" [(ngModel)]="sliderStart" matSliderThumb />
-        } @else {
-          <input [disabled]="disabled" (valueChange)="onValueChange()" [(ngModel)]="sliderStart" matSliderStartThumb />
-          <input [disabled]="disabled" (valueChange)="onValueChange()" [(ngModel)]="sliderEnd" matSliderEndThumb />
-        }
-      </mat-slider>
-      @if (!isBasicSlider) {
-        <div class="max-value">
-          <span>
-            @if (useDecimal()) {
-              {{ max | number }}
-            } @else {
-              {{ max }}
-            }
-            @if (percentage) {
-              %
-            }
-          </span>
-        </div>
-      }
-    </div>
-
-    @if (showInputs && !this.isBasicSlider) {
-      <div class="slider-input">
-        <mat-form-field [appearance]="'outline'" [ngStyle]="{ width: inputWidth() + 'px' }">
-          @if (minLabel()) {
-            <mat-label>
-              {{ minLabel() }}
-              @if (percentage) {
-                <span>%</span>
-              }
-            </mat-label>
-          } @else {
-            <mat-label>
-              {{ 'COMMON.MIN' | uiTranslate | async }}
-              @if (percentage) {
-                <span>%</span>
-              }
-            </mat-label>
-          }
-          @if (useDecimal()) {
-            <input
-              matInput
-              [type]="'text'"
-              [(ngModel)]="sliderStart"
-              [disabled]="disabled"
-              (focus)="onInputFocus()"
-              (blur)="onInputBlur('start')"
-              (keydown.enter)="onInputBlur('start')"
-              mask="separator.2"
-              thousandSeparator=","
-            />
-          } @else {
-            <input
-              matInput
-              [type]="'number'"
-              [(ngModel)]="sliderStart"
-              [disabled]="disabled"
-              (focus)="onInputFocus()"
-              (blur)="onInputBlur('start')"
-              (keydown.enter)="onInputBlur('start')"
-              [allowOnlyDigits]="true"
-              digitsOnly
-            />
-          }
-        </mat-form-field>
-        <mat-form-field [appearance]="'outline'" [ngStyle]="{ width: inputWidth() + 'px' }">
-          @if (maxLabel()) {
-            <mat-label>
-              {{ maxLabel() }}
-              @if (percentage) {
-                <span>%</span>
-              }
-            </mat-label>
-          } @else {
-            <mat-label>
-              {{ 'COMMON.MAX' | uiTranslate | async }}
-              @if (percentage) {
-                <span>%</span>
-              }
-            </mat-label>
-          }
-          @if (useDecimal()) {
-            <input
-              matInput
-              [disabled]="disabled"
-              [type]="'text'"
-              [(ngModel)]="sliderEnd"
-              (focus)="onInputFocus()"
-              (blur)="onInputBlur('end')"
-              (keydown.enter)="onInputBlur('end')"
-              data-testid="slider.input-end"
-              mask="separator.2"
-              thousandSeparator=","
-            />
-          } @else {
-            <input
-              matInput
-              [disabled]="disabled"
-              [type]="'number'"
-              [(ngModel)]="sliderEnd"
-              (focus)="onInputFocus()"
-              (blur)="onInputBlur('end')"
-              (keydown.enter)="onInputBlur('end')"
-              [allowOnlyDigits]="true"
-              digitsOnly
-              data-testid="slider.input-end"
-            />
-          }
-        </mat-form-field>
-      </div>
-    }
-
-    @if (hasError && touchedControlName) {
-      <mat-error class="slider-errors">
-        @if (touchedControlName === 'start' && sliderStart > sliderEnd) {
-          <div class="validation-error">
-            <ui-icon [name]="'Info'"></ui-icon>
-            <span>{{
-              translationContext + 'MIN_MORE_THAN_MAX' | uiTranslate: { min: sliderStart, max: sliderEnd } | async
-            }}</span>
-          </div>
-        }
-        @if (touchedControlName === 'end' && sliderStart > sliderEnd) {
-          <div class="validation-error">
-            <ui-icon [name]="'Info'"></ui-icon>
-            <span>{{
-              translationContext + 'MAX_LESS_THAN_MIN' | uiTranslate: { min: sliderStart, max: sliderEnd } | async
-            }}</span>
-          </div>
-        }
-        @if (sliderStart < min) {
-          <div class="validation-error">
-            <ui-icon [name]="'Info'"></ui-icon>
-            <span>{{ 'COMMON.MIN' | uiTranslate | async }} {{ min }}</span>
-          </div>
-        }
-        @if (sliderEnd > max) {
-          <div class="validation-error">
-            <ui-icon [name]="'Info'"></ui-icon>
-            <span>{{ 'COMMON.MAX' | uiTranslate | async }} {{ max }}</span>
-          </div>
-        }
-      </mat-error>
-    }
-  </div>
-</ng-container>

package/projects/tgo-canopy-ui/components/slider/slider.component.module.ts

@@ -1,8 +0,0 @@
-import { NgModule } from '@angular/core';
-import { SliderComponent } from './slider.component';
-
-@NgModule({
-  imports: [SliderComponent],
-  exports: [SliderComponent],
-})
-export class SliderComponentModule {}

package/projects/tgo-canopy-ui/components/slider/slider.component.scss

@@ -1,230 +0,0 @@
-@use '../../theme/variables' as *;
-
-:host ::ng-deep {
-  mat-form-field {
-    .mat-mdc-form-field-flex .mat-mdc-floating-label {
-      background: white !important;
-      top: 22px;
-    }
-
-    .mdc-floating-label--float-above {
-      transform: translateY(-28px) scale(0.75) !important;
-    }
-  }
-}
-
-::ng-deep .slider-container {
-  min-width: 240px;
-  width: 100%;
-
-  .mat-mdc-form-field-bottom-align::before {
-    content: none;
-  }
-
-  &.error {
-    .mdc-notched-outline__leading,
-    .mdc-notched-outline__notch,
-    .mdc-notched-outline__trailing {
-      border-color: $tgo-error-default !important;
-      label {
-        color: $tgo-error-default !important;
-      }
-    }
-
-    .mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field
-      .mdc-notched-outline__notch {
-      border-left: none !important;
-    }
-  }
-
-  &.disabled {
-    * {
-      pointer-events: none;
-      cursor: initial;
-    }
-
-    .mat-mdc-slider {
-      * {
-        border-color: $grayscale-40 !important;
-      }
-
-      .mdc-slider__thumb {
-        &:after {
-          display: none;
-        }
-      }
-    }
-
-    .slider,
-    .slider-input {
-      opacity: 0.5;
-    }
-  }
-
-  &.has-error {
-  }
-
-  .slider-label {
-    font-size: 14px;
-    font-weight: bold;
-    line-height: 20px;
-  }
-
-  .slider {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    margin: 16px 0;
-
-    mat-slider {
-      width: 100%;
-    }
-
-    .mat-mdc-slider {
-      .mdc-floating-label {
-        top: 23px;
-      }
-
-      .mdc-slider__value-indicator-container {
-        bottom: 54px;
-      }
-
-      .mdc-slider__value-indicator {
-        background: $tgo-petrol-60w;
-        color: $tgo-black;
-
-        &:after,
-        &:before {
-          display: none;
-        }
-      }
-    }
-
-    .min-value {
-      width: auto;
-      margin-right: 8px;
-      white-space: nowrap;
-    }
-
-    .max-value {
-      width: auto;
-      margin-left: 8px;
-      white-space: nowrap;
-    }
-  }
-
-  .slider-errors {
-    margin-top: 8px;
-  }
-
-  .slider-input {
-    display: flex;
-    justify-content: space-between;
-
-    mat-form-field {
-      //width: 80px;
-      min-width: 80px !important;
-    }
-
-    .mat-mdc-form-field-flex,
-    .mdc-notched-outline {
-      height: 48px !important;
-    }
-
-    .mat-mdc-form-field-subscript-wrapper,
-    .mdc-text-field__input::-webkit-inner-spin-button {
-      display: none;
-    }
-  }
-
-  mat-error {
-    font-size: 12px;
-    gap: 4px;
-    ui-icon svg {
-      color: $tgo-error-default;
-    }
-
-    .validation-error {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-
-      ui-icon {
-        margin-right: 4px;
-      }
-    }
-  }
-
-  &[theme='light'],
-  &[theme='dark'] {
-    color: $black;
-
-    .mat-mdc-slider.mat-primary {
-      --mdc-slider-active-track-color: #{$brand-50};
-      --mdc-slider-handle-color: #{$brand-50};
-      --mdc-slider-focus-handle-color: #{$brand-50};
-      --mdc-slider-hover-handle-color: #{$brand-50};
-      --mdc-slider-inactive-track-color: #{$grayscale-30};
-      --mdc-slider-with-tick-marks-inactive-container-color: #{$brand-50};
-      --mat-mdc-slider-ripple-color: #{$brand-50};
-      --mat-mdc-slider-hover-ripple-color: rgba(255, 179, 238, 0.56);
-      --mat-mdc-slider-focus-ripple-color: rgba(255, 179, 238, 0.56);
-
-      height: 40px;
-
-      .mdc-slider__track--inactive {
-        opacity: 1;
-      }
-
-      .mat-mdc-focus-indicator {
-        border-radius: 100%;
-      }
-
-      .mdc-slider__thumb-knob {
-        border-radius: 100%;
-      }
-
-      .mdc-slider__thumb {
-        z-index: 1;
-        height: 40px;
-        width: 40px;
-      }
-
-      .mdc-slider__track--active_fill {
-        z-index: 1;
-      }
-
-      .mdc-slider__value-indicator-container {
-        bottom: 60px;
-      }
-
-      .mdc-slider__value-indicator {
-        background: $black;
-        opacity: 1;
-        color: $tgo-white;
-        position: relative;
-        width: 100%;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-
-        &:before {
-          content: '';
-          display: flex;
-          position: absolute;
-          left: calc(50% - 7px);
-          bottom: -8px;
-          height: 15px;
-          width: 15px;
-          border-top: 1px solid $tgo-white;
-          border-right: 1px solid $tgo-white;
-          background: $black;
-          z-index: 10;
-          border-top-right-radius: 4px;
-          transform: rotate(135deg);
-        }
-      }
-    }
-  }
-}

package/projects/tgo-canopy-ui/components/slider/slider.component.spec.ts

@@ -1,210 +0,0 @@
-import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
-
-import { NO_ERRORS_SCHEMA } from '@angular/core';
-import { FormControl } from '@angular/forms';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { LanguageService } from '../../utils/localization/language.service';
-import { SliderComponent } from './slider.component';
-import { SliderValue } from './slider.model';
-
-describe('SliderComponent', () => {
-  let component: SliderComponent;
-  let fixture: ComponentFixture<SliderComponent>;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      imports: [SliderComponent, NoopAnimationsModule],
-      providers: [LanguageService],
-      schemas: [NO_ERRORS_SCHEMA],
-    });
-    fixture = TestBed.createComponent(SliderComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-
-  it('should update value on slider change', () => {
-    const newValue = { start: 25, end: 75 };
-
-    component.sliderStart = newValue.start;
-    component.sliderEnd = newValue.end;
-    //@ts-expect-error
-    component.onValueChange();
-
-    expect(component['value']).toEqual(newValue);
-  });
-
-  afterEach(() => {
-    fixture.destroy();
-  });
-
-  it('should have default application theme as "light"', () => {
-    fixture.detectChanges();
-    expect(component.applicationTheme).toBe('light'); // Default theme
-  });
-
-  it('should emit "sliderValueChange" on value change', () => {
-    jest.spyOn(component.sliderValueChange, 'emit');
-
-    component.sliderStart = 10;
-    component.sliderEnd = 90;
-    //@ts-ignore
-    component.onValueChange(); // This triggers the emit
-
-    expect(component.sliderValueChange.emit).toHaveBeenCalledWith({ start: 10, end: 90 });
-  });
-
-  it('should register "onChange" and trigger it on value change', () => {
-    const onChangeMock = jest.fn();
-
-    component.registerOnChange(onChangeMock);
-
-    component.sliderStart = 20;
-    component.sliderEnd = 80;
-    //@ts-ignore
-    component.onValueChange(); // Triggers onChange
-
-    expect(onChangeMock).toHaveBeenCalledWith({ start: 20, end: 80 });
-  });
-
-  it('should set "disabled" state correctly', () => {
-    component.setDisabledState(true);
-    expect(component.disabled).toBeTruthy(); // Should be true when disabled
-
-    component.setDisabledState(false);
-    expect(component.disabled).toBeFalsy(); // Should be false when not disabled
-  });
-
-  it('should handle writeValue correctly', fakeAsync(() => {
-    const sliderValue: SliderValue = { start: 30, end: 70 };
-    const markForCheckSpy = jest.spyOn(component.cdr, 'markForCheck');
-
-    component.writeValue(sliderValue);
-    tick();
-
-    expect(component.sliderEnd).toBe(70);
-    expect(component.sliderStart).toBe(30);
-    expect(markForCheckSpy).toHaveBeenCalledTimes(2);
-  }));
-
-  it('should detect error state based on slider values', () => {
-    component.sliderStart = 50;
-    component.sliderEnd = 150;
-    expect(component.hasError).toBe(true); // End is greater than max
-
-    component.sliderEnd = 25;
-    expect(component.hasError).toBe(true); // End is less than start
-
-    component.sliderEnd = 50;
-    component.sliderStart = 0;
-    expect(component.hasError).toBe(false); // Valid range
-  });
-
-  it('should update value and emit sliderValueChange on change', () => {
-    const spy = jest.spyOn(component.sliderValueChange, 'emit');
-    component.sliderStart = 20;
-    component.sliderEnd = 80;
-    //@ts-ignore
-    component.onValueChange();
-
-    //@ts-ignore
-    expect(component.value).toEqual({ start: 20, end: 80 });
-    expect(spy).toHaveBeenCalledWith({ start: 20, end: 80 });
-  });
-
-  it('should emit sliderValueChange on blur with change and no errors', () => {
-    const spy = jest.spyOn(component.sliderValueChange, 'emit');
-    component.sliderStart = 30;
-    component.sliderEnd = 70;
-    //@ts-ignore
-    component.onInputBlur('start'); // Simulate blur on start input
-
-    //@ts-ignore
-    expect(component.touchedControlName).toEqual('start');
-    expect(spy).toHaveBeenCalledWith({ start: 30, end: 70 }); // Assuming no errors
-  });
-
-  it('should not emit on blur with no change', () => {
-    const spy = jest.spyOn(component.sliderValueChange, 'emit');
-    component.sliderStart = 50;
-    component.sliderEnd = 50;
-    //@ts-ignore
-    component.onInputBlur('end'); // Simulate blur on end input
-
-    //@ts-ignore
-    expect(component.touchedControlName).toEqual('end');
-    expect(spy).toHaveBeenCalledTimes(1);
-  });
-
-  it('should return true for different values', () => {
-    const value1: SliderValue = { start: 10, end: 50 };
-    const value2: SliderValue = { start: 20, end: 60 };
-
-    //@ts-ignore
-    expect(component.isValueChanged(value1)).toBe(true);
-    //@ts-ignore
-    expect(component.isValueChanged(value2)).toBe(true);
-  });
-
-  it('should return false for same values', () => {
-    const value: SliderValue = { start: 30, end: 70 };
-
-    //@ts-ignore
-    expect(component.isValueChanged(value)).toBe(true);
-  });
-
-  describe('formatLabel', () => {
-    it('should format numbers without decimal when useDecimal is false', () => {
-      fixture.componentRef.setInput('useDecimal', false);
-      fixture.detectChanges();
-      expect(component.formatLabel(10)).toBe('10');
-      expect(component.formatLabel(100000)).toBe('100000');
-    });
-
-    it('should format numbers with decimal pipe when useDecimal is true', () => {
-      fixture.componentRef.setInput('useDecimal', true);
-      fixture.detectChanges();
-      expect(component.formatLabel(10)).toBe('10');
-      expect(component.formatLabel(100000)).toBe('100,000');
-    });
-  });
-
-  describe('validate', () => {
-    it('should return null when there are no errors', () => {
-      component.min = 0;
-      component.max = 100;
-      component.sliderStart = 20;
-      component.sliderEnd = 80;
-
-      const control = new FormControl();
-      expect(component.validate(control)).toBeNull();
-    });
-
-    it('should return validation error when there are errors and input is touched', () => {
-      component.min = 0;
-      component.max = 100;
-      component.sliderStart = 80;
-      component.sliderEnd = 20;
-
-      component['touchedControlName'] = 'start';
-
-      const control = new FormControl();
-      expect(component.validate(control)).toEqual({ invalidSlider: true });
-    });
-
-    it('should not return error when there are errors but input is not touched', () => {
-      component.min = 0;
-      component.max = 100;
-      component.sliderStart = 80;
-      component.sliderEnd = 20;
-
-      component['touchedControlName'] = '';
-
-      const control = new FormControl();
-      expect(component.validate(control)).toBeNull();
-    });
-  });
-});