@testgorilla/tgo-ui 2.11.1 → 2.11.3

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

@@ -1,75 +0,0 @@
-<ng-container>
-  <div class="slider-container" [attr.theme]="applicationTheme" [ngClass]="{ disabled: disabled, error: hasError && touchedControlName }">
-    <div class="slider-label" *ngIf="label">{{ label }}</div>
-
-    <div class="slider">
-      <div class="min-value">{{ percentage ? min + '%' : min }}</div>
-      <mat-slider
-        [disableRipple]="applicationTheme !== 'classic'" #sliderElement discrete [disabled]="disabled" [max]="max" [min]="min" [step]="step" (mouseenter)="sliderElement.discrete = true" (mouseleave)="sliderElement.discrete = false">
-        <input
-          [disabled]="disabled"
-          (valueChange)="onValueChange()"
-          [(ngModel)]="sliderStart"
-          matSliderStartThumb
-        >
-        <input
-          [disabled]="disabled"
-          (valueChange)="onValueChange()"
-          [(ngModel)]="sliderEnd"
-          matSliderEndThumb
-        >
-      </mat-slider>
-      <div class="max-value">{{ percentage ? max + '%' : max }}</div>
-    </div>
-
-    <div class="slider-input" *ngIf="showInputs">
-      <mat-form-field [appearance]="'outline'">
-        <mat-label>{{ ('COMMON.MIN') | uiTranslate : language }} <span *ngIf="percentage">%</span></mat-label>
-        <input
-          matInput
-          [type]="'number'"
-          [(ngModel)]="sliderStart"
-          [disabled]="disabled"
-          (focus)="onInputFocus()"
-          (blur)="onInputBlur('start')"
-          (keydown.enter)="onInputBlur('start')"
-        >
-      </mat-form-field>
-
-      <mat-form-field [appearance]="'outline'">
-        <mat-label>{{ ('COMMON.MAX') | uiTranslate : language }} <span *ngIf="percentage">%</span></mat-label>
-        <input
-          matInput
-          [disabled]="disabled"
-          [type]="'number'"
-          [(ngModel)]="sliderEnd"
-          (focus)="onInputFocus()"
-          (blur)="onInputBlur('end')"
-          (keydown.enter)="onInputBlur('end')"
-        >
-      </mat-form-field>
-    </div>
-
-    <mat-error *ngIf="hasError && touchedControlName">
-      <div class="validation-error" *ngIf="touchedControlName === 'start' && sliderStart > sliderEnd">
-        <ui-icon [name]="'Info'"></ui-icon>
-        <span>{{ (translationContext + 'MIN_MORE_THAN_MAX') | uiTranslate : language : { min: sliderStart, max: sliderEnd } }}</span>
-      </div>
-
-      <div class="validation-error" *ngIf="touchedControlName === 'end' && sliderStart > sliderEnd">
-        <ui-icon [name]="'Info'"></ui-icon>
-        <span>{{ (translationContext + 'MAX_LESS_THAN_MIN') | uiTranslate : language : { min: sliderStart, max: sliderEnd } }}</span>
-      </div>
-
-      <div class="validation-error" *ngIf="sliderStart < min">
-        <ui-icon [name]="'Info'"></ui-icon>
-        <span>{{ ('COMMON.MIN') | uiTranslate : language }} {{ min }}</span>
-      </div>
-      <div class="validation-error" *ngIf="sliderEnd > max">
-        <ui-icon [name]="'Info'"></ui-icon>
-        <span>{{ ('COMMON.MAX') | uiTranslate : language }} {{ max }}</span>
-      </div>
-    </mat-error>
-  </div>
-</ng-container>
-

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

@@ -1,24 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { SliderComponent } from './slider.component';
-import { MatSliderModule } from '@angular/material/slider';
-import { FormsModule } from '@angular/forms';
-import { MatInputModule } from '@angular/material/input';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { IconComponentModule } from '../icon/icon.component.module';
-import { UiTranslatePipe } from '../../pipes/ui-translate.pipe';
-
-@NgModule({
-  declarations: [SliderComponent],
-  imports: [
-    CommonModule,
-    MatSliderModule,
-    FormsModule,
-    MatInputModule,
-    MatTooltipModule,
-    IconComponentModule,
-    UiTranslatePipe,
-  ],
-  exports: [SliderComponent],
-})
-export class SliderComponentModule {}

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

@@ -1,223 +0,0 @@
-@use "../../theme/variables" as *;
-
-::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: 30px;
-      margin-right: 8px;
-    }
-
-    .max-value {
-      width: 35px;
-      margin-left: 8px;
-    }
-  }
-
-  .slider-input {
-    display: flex;
-    justify-content: space-between;
-    margin-bottom: 8px;
-
-    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: unset;
-      --mat-mdc-slider-focus-ripple-color: unset;
-
-      height: 40px;
-
-      .mdc-slider__track--inactive {
-        opacity: 1;
-      }
-
-      .mdc-slider__thumb-knob {
-        border-radius: var(--mdc-slider-handle-shape, 50%);
-        width: var(--mdc-slider-handle-width, 16px);
-        height: var(--mdc-slider-handle-height, 16px);
-        border-style: solid;
-        border-width: calc(var(--mdc-slider-handle-height, 16px) / 2) calc(var(--mdc-slider-handle-width, 16px) / 2);
-      }
-
-      .mdc-slider__thumb {
-        z-index: 1;
-        height: 40px;
-        width: 40px;
-
-        &--with-indicator {
-          &:after {
-            z-index: -1;
-            content: "";
-            width: 100%;
-            height: 100%;
-            position: absolute;
-            left: 0;
-            top: 0;
-            background: $brand-30;
-            opacity: 0.75;
-            border-radius: 100px;
-          }
-        }
-      }
-
-      .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,103 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { SliderComponent } from './slider.component';
-import { LanguageService } from '../../utils/localization/language.service';
-import { LanguageServiceStub } from '../../utils/localization/language.service.mocks';
-import { UiTranslatePipe } from '../../pipes/ui-translate.pipe';
-import { SliderValue } from "./slider.model";
-
-describe('SliderComponent', () => {
-  let component: SliderComponent;
-  let fixture: ComponentFixture<SliderComponent>;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      declarations: [SliderComponent],
-      imports: [UiTranslatePipe],
-      providers: [{ provide: LanguageService, useClass: LanguageServiceStub },]
-    });
-    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', () => {
-    const sliderValue: SliderValue = { start: 30, end: 70 };
-    component.writeValue(sliderValue);
-
-    expect(component.sliderStart).toBe(30);
-    expect(component.sliderEnd).toBe(70);
-  });
-
-  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
-  });
-});

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

@@ -1,87 +0,0 @@
-import { Meta, moduleMetadata, Story } from '@storybook/angular';
-import { SliderComponent } from './slider.component';
-import { CommonModule } from '@angular/common';
-import { MatSliderModule } from '@angular/material/slider';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatInputModule } from '@angular/material/input';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { IconComponentModule } from '../icon/icon.component.module';
-import { UiTranslatePipe } from '../../pipes/ui-translate.pipe';
-import { transformTheme } from "../../utils/transform-theme";
-
-export default {
-  title: 'Slider',
-  component: SliderComponent,
-  decorators: [
-    moduleMetadata({
-      declarations: [SliderComponent],
-      imports: [
-        CommonModule,
-        MatSliderModule,
-        FormsModule,
-        MatInputModule,
-        MatTooltipModule,
-        IconComponentModule,
-        ReactiveFormsModule,
-        UiTranslatePipe,
-      ],
-    }),
-  ],
-} as Meta;
-
-const Template: Story = (args, { globals: { theme } }) => {
-  const _theme = transformTheme(theme);
-  return {
-    props: {
-      applicationTheme: _theme,
-      ...args,
-    },
-  };
-};
-
-export const Default = Template.bind({});
-Default.args = {};
-
-Default.parameters = {
-  design: {
-    name: 'Figma design',
-    type: 'figma',
-    url: 'https://www.figma.com/file/FHZJ7ViJv6msJA5lJvPRIG/Component-library?type=design&node-id=12979-107300&mode=design&t=p5BMnBAeXgQePyr9-4',
-  },
-};
-
-export const Disabled = Template.bind({});
-Disabled.args = {
-  disabled: true,
-};
-
-export const WithValue = Template.bind({});
-WithValue.args = {
-  sliderStart: 10,
-  sliderEnd: 90,
-  max: 110,
-  min: 10,
-};
-
-export const Percentage = Template.bind({});
-Percentage.args = {
-  sliderStart: 10,
-  sliderEnd: 90,
-  max: 110,
-  min: 10,
-  percentage: true,
-};
-
-export const WithoutInputs = Template.bind({});
-WithoutInputs.args = {
-  sliderStart: 10,
-  sliderEnd: 90,
-  max: 110,
-  min: 10,
-  showInputs: false,
-};
-
-export const WithCustomStep = Template.bind({});
-WithCustomStep.args = {
-  step: 10,
-};

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

@@ -1,185 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  EventEmitter,
-  forwardRef, Inject,
-  Input, Optional,
-  Output
-} from '@angular/core';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { SliderValue } from './slider.model';
-import { LanguageService } from '../../utils/localization/language.service';
-import { ApplicationTheme } from "../../models/application-theme.model";
-
-@Component({
-  selector: 'ui-slider',
-  templateUrl: './slider.component.html',
-  styleUrls: ['./slider.component.scss'],
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => SliderComponent),
-      multi: true,
-    },
-  ],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class SliderComponent {
-  /**
-   * The maximum value of the slider.
-   *
-   * @type {number}
-   * @default 100
-   */
-  @Input() max = 100;
-
-  /**
-   * The minimum value of the slider.
-   *
-   * @type {number}
-   * @default 0
-   */
-  @Input() min = 0;
-
-  /**
-   * A flag indicating whether the slider displays values as percentages.
-   *
-   * @type {boolean}
-   * @default true
-   */
-  @Input() percentage = false;
-
-  /**
-   * A flag indicating whether the slider is disabled.
-   *
-   * @type {boolean}
-   * @default true
-   */
-  @Input() disabled = false;
-
-  /**
-   * The starting value of the slider.
-   *
-   * @type {number}
-   * @default 0
-   */
-  @Input() sliderStart = 0;
-
-  /**
-   * The ending value of the slider.
-   *
-   * @type {number}
-   * @default 100
-   */
-  @Input() sliderEnd = 100;
-
-  /**
-   * The label for the slider.
-   *
-   * @type {string}
-   * @default ''
-   */
-  @Input() label = '';
-
-  /**
-   * Show slider inputs.
-   *
-   * @type {boolean}
-   * @default true
-   */
-  @Input() showInputs = true;
-
-  /**
-   * Step number.
-   *
-   * @type {number}
-   * @default 1
-   */
-  @Input() step = 1;
-
-  /**
-   * The language to be used
-   *
-   * @property language
-   * @type {Language}
-   */
-  @Input() language = LanguageService.defaultLanguage;
-
-  /**
-   *
-   * Defines the application theme
-   *
-   * @type {ApplicationTheme}
-   * @memberof SliderComponent
-   */
-  @Input() applicationTheme: ApplicationTheme = 'light';
-
-  @Output() sliderValueChange = new EventEmitter<SliderValue>();
-
-  constructor(
-    @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme,
-  ) {
-    if (defaultAppTheme) {
-      this.applicationTheme = defaultAppTheme;
-    }
-  }
-
-  private value: SliderValue = { start: 0, end: 100 };
-  protected translationContext = 'SLIDER.';
-  protected touchedControlName = '';
-
-  onChange = (_: any): void => {};
-  onTouch = (): void => {};
-
-  registerOnChange(fn: any): void {
-    this.onChange = fn;
-  }
-
-  registerOnTouched(fn: any): void {
-    this.onTouch = fn;
-  }
-
-  setDisabledState(isDisabled: boolean): void {
-    this.disabled = isDisabled;
-  }
-
-  writeValue(value: any): void {
-    this.value = value;
-    this.sliderStart = value.start;
-    this.sliderEnd = value.end;
-  }
-
-  protected onValueChange(): void {
-    const value: SliderValue = { start: +this.sliderStart, end: +this.sliderEnd };
-    this.value = value;
-    this.onChange(value);
-    this.sliderValueChange.emit(value);
-  }
-
-  protected onInputBlur(inputName: string): void {
-    this.touchedControlName = inputName;
-    const value: SliderValue = { start: +this.sliderStart, end: +this.sliderEnd };
-
-    if (!this.hasError && this.isValueChanged(value)) {
-      this.onValueChange();
-    }
-  }
-
-  protected onInputFocus(): void {
-    this.touchedControlName = '';
-  }
-
-  private isValueChanged(value: SliderValue): boolean {
-    return this.value.start !== value.start || this.value.end !== value.end;
-  }
-
-  get hasError(): boolean {
-    return (
-      this.max < +this.sliderEnd ||
-      this.min > +this.sliderStart ||
-      this.min > +this.sliderEnd ||
-      this.max < +this.sliderStart ||
-      +this.sliderEnd < +this.sliderStart
-    );
-  }
-}

package/projects/tgo-canopy-ui/components/slider/slider.model.ts

@@ -1,4 +0,0 @@
-export interface SliderValue {
-  start: number;
-  end: number
-}