@testgorilla/tgo-ui 2.9.0 → 2.10.1

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

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

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

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

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

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

package/projects/tgo-canopy-ui/components/snackbar/__snapshots__/snackbar.component.spec.ts.snap

@@ -0,0 +1,44 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SnackbarComponent should render correctly 1`] = `
+<ui-snackbar
+  applicationTheme={[Function String]}
+  data={[Function Object]}
+  defaultAppTheme="null"
+  domSanitizer={[Function _DomSanitizerImpl]}
+  fixed={[Function Boolean]}
+  iconName={[Function String]}
+  includeDismissButton={[Function Boolean]}
+  language={[Function String]}
+  linkTarget={[Function String]}
+  linkText=""
+  message=""
+  milisenconds={[Function Number]}
+  position={[Function String]}
+  safeHtml=""
+  seconds={[Function Number]}
+  showSnackbar={[Function Boolean]}
+  snackbarRef={[Function Object]}
+  snackbarType={[Function String]}
+  timer={[Function Number]}
+  timerPausedAt="0"
+  timerStartedAt={[Function Number]}
+  translationContext={[Function String]}
+  variant={[Function String]}
+  visible={[Function Boolean]}
+>
+  <div
+    class="snackbar-container desktop ng-trigger ng-trigger-openClose success fixed ng-animating"
+    theme="light"
+  >
+    <div
+      class="snackbar-text"
+    >
+    </div>
+    <ui-icon
+      applicationtheme="light"
+      style=""
+    />
+  </div>
+</ui-snackbar>
+`;

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

@@ -0,0 +1,33 @@
+<ng-container>
+  <div
+    [ngClass]="snackbarType + ' ' + position"
+    [@openClose]
+    *ngIf="visible"
+    class="snackbar-container"
+    [attr.theme]="applicationTheme"
+    [class.mobile]="variant === 'mobile'"
+    [class.desktop]="variant === 'desktop'"
+    (mouseenter)="onMouseEnter()"
+    (mouseleave)="onMouseLeave()"
+  >
+    <div class="snackbar-text">
+      <ui-icon *ngIf="applicationTheme === 'classic'" [name]="iconName" size="24"></ui-icon>
+      {{ message }}
+      <div *ngIf="safeHtml" [innerHTML]="safeHtml"></div>
+      <a *ngIf="!!linkText" [target]="linkTarget" [href]="linkUrl">{{ linkText }}</a>
+    </div>
+    <ui-button
+      *ngIf="includeDismissButton && applicationTheme === 'classic'"
+      variant="text"
+      [label]="(translationContext + 'DISMISS') | uiTranslate : language"
+      [applicationTheme]="applicationTheme !== 'classic'? 'light' : 'classic'"
+      (buttonClickEvent)="dismissClick()"
+    ></ui-button>
+    <ui-icon
+      *ngIf="includeDismissButton && applicationTheme !== 'classic'"
+      applicationTheme='light'
+      [name]="'Close'"
+      (click)="dismissClick()"
+    ></ui-icon>
+  </div>
+</ng-container>

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

@@ -0,0 +1,16 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { ButtonComponentModule } from '../button/button.component.module';
+import { IconComponentModule } from '../icon/icon.component.module';
+import { SnackbarComponent } from './snackbar.component';
+import { SnackbarService } from './snackbar.service';
+import { UiTranslatePipe } from '../../pipes/ui-translate.pipe';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
+
+@NgModule({
+  declarations: [SnackbarComponent],
+  imports: [CommonModule, ButtonComponentModule, IconComponentModule, UiTranslatePipe, MatSnackBarModule],
+  exports: [SnackbarComponent],
+  providers: [SnackbarService],
+})
+export class SnackbarComponentModule {}