@testgorilla/tgo-ui 2.9.0 → 2.10.1

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

@@ -0,0 +1,97 @@
+import { Meta, moduleMetadata, Story } from '@storybook/angular';
+import { ToggleComponent } from './toggle.component';
+import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { EllipseTextDirective } from '../../directives/ellipse-text.directive';
+import { transformTheme } from '../../utils/transform-theme';
+import { UiTranslatePipe } from '../../pipes/ui-translate.pipe';
+
+export default {
+  title: 'Toggle',
+  component: ToggleComponent,
+  decorators: [
+    moduleMetadata({
+      declarations: [ToggleComponent],
+      imports: [ReactiveFormsModule, MatTooltipModule, EllipseTextDirective, UiTranslatePipe],
+    }),
+  ],
+} as Meta;
+
+const Template: Story = (args, { globals: { theme } }) => {
+  const _theme = transformTheme(theme);
+  return {
+    props: {
+      applicationTheme: _theme,
+      ...args,
+    },
+  };
+};
+
+const parameters = {
+  design: {
+    name: 'Figma design',
+    type: 'figma',
+    url: 'https://www.figma.com/file/FHZJ7ViJv6msJA5lJvPRIG/Component-library?type=design&node-id=12476-24532&mode=design&t=VGuLMZFB3q1OtVZa-4',
+  },
+};
+
+export const Default = Template.bind({});
+Default.args = {};
+
+Default.parameters = parameters;
+
+export const Selected = Template.bind({});
+Selected.args = { selected: true };
+
+Selected.parameters = parameters;
+
+export const DisabledDefault = Template.bind({});
+DisabledDefault.args = { disabled: true };
+DisabledDefault.parameters = parameters;
+
+export const DisabledSelected = Template.bind({});
+DisabledSelected.args = { disabled: true, selected: true };
+DisabledSelected.parameters = parameters;
+
+export const WithReactiveForm: Story = () => ({
+  template: `
+     <form [formGroup]="form">
+        <ui-toggle formControlName="switch"></ui-toggle>
+    </form>
+  `,
+  props: {
+    form: new FormGroup({
+      switch: new FormControl(true),
+    }),
+  },
+});
+
+WithReactiveForm.parameters = parameters;
+
+export const WithLabel = Template.bind({});
+WithLabel.args = {
+  label: 'Label',
+};
+
+export const WithMessage = Template.bind({});
+WithMessage.args = { label: 'Label', message: 'Message', selected: true };
+WithMessage.parameters = parameters;
+
+export const WithLongLabel = Template.bind({});
+WithLongLabel.args = { label: 'Label test message for tooltip', message: 'Message', selected: true };
+WithLongLabel.parameters = parameters;
+
+export const WithLongLabelAndSetWidth = Template.bind({});
+WithLongLabelAndSetWidth.args = {
+  label: 'Label test message for tooltip',
+  message: 'Message',
+  selected: true,
+  maxWidth: 100,
+};
+WithLongLabelAndSetWidth.parameters = parameters;
+
+export const PreventClick = Template.bind({});
+PreventClick.args = {
+  preventClick: true,
+};
+PreventClick.parameters = parameters;

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

@@ -0,0 +1,179 @@
+import {
+  Component,
+  EventEmitter,
+  forwardRef,
+  HostBinding,
+  Inject,
+  Input,
+  OnChanges,
+  OnInit,
+  Optional,
+  Output,
+} from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { RegisterFn } from './toggle.model';
+import { ApplicationTheme } from '../../models/application-theme.model';
+import { LanguageService } from "../../utils/localization/language.service";
+
+@Component({
+  selector: 'ui-toggle',
+  templateUrl: './toggle.component.html',
+  styleUrls: ['./toggle.component.scss'],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => ToggleComponent),
+      multi: true,
+    },
+  ],
+})
+export class ToggleComponent implements ControlValueAccessor, OnChanges, OnInit {
+  /**
+   * The `selected` property determines the current state of the toggle switch.
+   *
+   * @type {boolean}
+   * @default false
+   * @memberof ToggleComponent
+   */
+  @Input() selected = false;
+
+  /**
+   * The `disabled` property determines whether the toggle switch is disabled.
+   *
+   * @type {boolean}
+   * @default false
+   * @memberof ToggleComponent
+   */
+  @Input() disabled = false;
+
+  /**
+   * Toggle label
+   *
+   * @type {string}
+   * @default ''
+   * @memberof ToggleComponent
+   */
+  @Input() label = '';
+
+  /**
+   * Message
+   *
+   * @type {string}
+   * @default ''
+   * @memberof ToggleComponent
+   */
+  @Input() message = '';
+
+  /**
+   * Max width of the toggle container
+   *
+   * @type {number}
+   * @memberof ToggleComponent
+   */
+  @HostBinding('style.--max-width')
+  @Input()
+  maxWidth: number | undefined;
+
+  /**
+   *
+   * Defines the application theme
+   *
+   * @type {ApplicationTheme}
+   * @memberof ToggleComponent
+   */
+  @Input() applicationTheme: ApplicationTheme = 'light';
+
+  /**
+   * The `toggle` event is triggered when the state of the toggle switch changes. It returns the new state.
+   *
+   * @type {event}
+   * @memberof ToggleComponent
+   */
+  @Output() toggle = new EventEmitter<boolean>();
+
+  /**
+   * A string representing the ARIA label for accessibility.
+   * This label is used to provide an accessible name for the input element.
+   * @type {string}
+   * @memberof ToggleComponent
+   */
+  @Input() ariaLabel: string;
+
+  /**
+   * A string representing the ARIA requirement for accessibility.
+   * This attribute is used to indicate whether an input field is required for form submission.
+   * @type {boolean}
+   * @memberof ToggleComponent
+   */
+  @Input() ariaRequired = false;
+
+  /**
+   * disable/enable click on toggle
+   * @type {boolean}
+   * @memberof ToggleComponent
+   */
+  @Input() preventClick = false;
+
+  /**
+   * The language to be used
+   *
+   * @type {Language}
+   * @memberof ToggleComponent
+   */
+  @Input() language = LanguageService.defaultLanguage;
+
+  protected showLabelTooltip = false;
+  protected classes: string;
+  protected translateContext = 'COMMON.';
+
+  constructor(
+    @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme
+  ) {
+    if (defaultAppTheme) {
+      this.applicationTheme = defaultAppTheme;
+    }
+  }
+
+  ngOnChanges(): void {
+    this.classes = `${this.disabled ? 'disabled' : ''} ${this.applicationTheme}`;
+  }
+
+  ngOnInit(): void {
+    this.classes = `${this.disabled ? 'disabled' : ''} ${this.applicationTheme}`;
+  }
+
+  onToggle(): void {
+    if (this.preventClick) {
+      this.toggle.emit(this.selected);
+    }
+    if (!this.disabled && !this.preventClick) {
+      this.selected = !this.selected;
+      this.toggle.emit(this.selected);
+      this.onChange(this.selected);
+    }
+  }
+
+  writeValue(state: boolean): void {
+    if (state) {
+      this.selected = state;
+    }
+  }
+
+  registerOnChange(fn: RegisterFn): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: RegisterFn): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean) {
+    this.disabled = isDisabled;
+  }
+
+  changeTextState(state: boolean): void {
+    this.showLabelTooltip = state;
+  }
+  private onChange: RegisterFn = () => {};
+  private onTouched: RegisterFn = () => {};
+}

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

@@ -0,0 +1,9 @@
+<div
+  [matTooltip]="message"
+  [matTooltipDisabled]="disabled"
+  [matTooltipPosition]="matPosition"
+  [matTooltipClass]="applicationTheme"
+  aria-label="tooltip"
+>
+  <ng-content></ng-content>
+</div>

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

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { TooltipComponent } from './tooltip.component';
+
+@NgModule({
+  declarations: [TooltipComponent],
+  imports: [MatTooltipModule],
+  exports: [TooltipComponent],
+})
+export class TooltipComponentModule {}

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

@@ -0,0 +1,53 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { TooltipComponent } from './tooltip.component';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from '@angular/core';
+import { TooltipPositionType } from './tooltip.model';
+
+describe('TooltipComponent', () => {
+  let fixture: ComponentFixture<TooltipComponent>;
+  let component: TooltipComponent;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [MatTooltipModule],
+      declarations: [TooltipComponent],
+      schemas: [NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TooltipComponent);
+    component = fixture.componentInstance;
+
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy()
+  });
+
+  it('should be placed at top by default', () => {
+    expect(component.position).toContain(TooltipPositionType.TOP);
+  });
+
+  describe('when position is at the top', () => {
+    it('should have matPosition as "above"', () => {
+      fixture.detectChanges();
+      expect(component.position).toContain(TooltipPositionType.TOP);
+      expect(component.matPosition).toContain('above')
+    })
+  });
+
+  describe('when position is at the bottom', () => {
+    it('should have matPosition as "below"', () => {
+      component.position = TooltipPositionType.BOTTOM;
+      fixture.detectChanges();
+      expect(component.matPosition).toContain('below')
+    })
+  });
+  describe('when position is at the left', () => {
+    it('should have matPosition as "left"', () => {
+      component.position = TooltipPositionType.LEFT;
+      fixture.detectChanges();
+      expect(component.matPosition).toContain('left')
+    })
+  })
+});

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

@@ -0,0 +1,235 @@
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { Meta, moduleMetadata, Story } from '@storybook/angular';
+import { ButtonComponentModule } from '../button/button.component.module';
+import { TooltipComponent } from './tooltip.component';
+import { transformTheme } from '../../utils/transform-theme';
+import { FileUploadComponent } from '../file-upload/file-upload.component';
+
+export default {
+  title: 'Tooltip',
+  component: TooltipComponent,
+  decorators: [
+    moduleMetadata({
+      declarations: [TooltipComponent],
+      imports: [MatTooltipModule, MatButtonModule, MatIconModule, ButtonComponentModule],
+      providers: [],
+    }),
+  ],
+} as Meta;
+
+const Styles = `
+  .example-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .example-container.left {
+    justify-content: flex-start;
+  }
+
+  .example-container a {
+    text-decoration: none;
+  }
+`;
+
+const Exclude = ['ngOnInit', 'matPosition', 'setPosition'];
+
+export const WithBottom: Story = {
+  render: (args: FileUploadComponent, { globals: { theme } }) => {
+    const _theme = transformTheme(theme);
+    return {
+      styles: [Styles],
+      template: `
+    <div class="example-container">
+      <ui-tooltip position="bottom" message="Message for bottom tooltip" applicationTheme="${_theme}">
+        <ui-button
+        type="secondary"
+        [justIcon]="true"
+        iconName="Help"
+        label="secondary"
+        size="small"
+        matTooltipClass="${_theme}"
+        applicationTheme="${_theme}"
+      ></ui-button>
+      </ui-tooltip>
+    </div>
+  `,
+    };
+  },
+} as Story;
+
+WithBottom.parameters = {
+  design: {
+    name: 'Figma design',
+    type: 'figma',
+    url: 'https://www.figma.com/file/FHZJ7ViJv6msJA5lJvPRIG/Component-library?type=design&node-id=2852-4807&t=tr4FtpDPzRNxR0y1-0',
+  },
+};
+
+WithBottom.parameters = {
+  controls: {
+    exclude: Exclude,
+  },
+};
+
+export const WithRight: Story = {
+  render: (args: FileUploadComponent, { globals: { theme } }) => {
+    const _theme = transformTheme(theme);
+    return {
+      styles: [Styles],
+      template: `
+    <div class="example-container">
+      <ui-tooltip position="right" message="Tooltip with right position" applicationTheme="${_theme}">
+      <ui-button
+        type="secondary"
+        [justIcon]="true"
+        iconName="Help"
+        label="secondary"
+        size="small"
+        matTooltipClass="${_theme}"
+        applicationTheme="${_theme}"
+      ></ui-button>
+      </ui-tooltip>
+    </div>
+  `,
+    };
+  },
+} as Story;
+
+const Template: Story = (args, { globals: { theme } }) => {
+  const _theme = transformTheme(theme);
+  return {
+    styles: [Styles],
+    props: {
+      applicationTheme: _theme,
+      ...args,
+    },
+    template: `
+  <div class="example-container">
+    <ui-tooltip [position]="position" [message]="message" applicationTheme="${_theme}">
+      <ui-button
+        type="secondary"
+        [justIcon]="true"
+        iconName="Help"
+        label="secondary"
+        matTooltipClass="${_theme}"
+        applicationTheme="${_theme}"
+      ></ui-button>
+    </ui-tooltip>
+  </div>`,
+  };
+};
+
+export const Default = Template.bind({});
+
+Default.args = {
+  message: 'Tooltip message for default tooltip',
+  position: 'top',
+} as Partial<TooltipComponent>;
+
+Default.parameters = {
+  controls: {
+    exclude: Exclude,
+  },
+};
+
+export const WithLeft: Story = {
+  render: (args: FileUploadComponent, { globals: { theme } }) => {
+    const _theme = transformTheme(theme);
+    return {
+      styles: [Styles],
+      template: `
+    <div class="example-container">
+      <ui-tooltip position="left" message="Message for left tooltip" applicationTheme="${_theme}">
+        <ui-button
+        type="secondary"
+        [justIcon]="true"
+        iconName="Help"
+        label="secondary"
+        size="small"
+        matTooltipClass="${_theme}"
+        applicationTheme="${_theme}"
+      ></ui-button>
+      </ui-tooltip>
+    </div>
+  `,
+    };
+  },
+} as Story;
+
+WithLeft.parameters = {
+  controls: {
+    exclude: Exclude,
+  },
+};
+
+export const WithDirective: Story = {
+  render: (args: FileUploadComponent, { globals: { theme } }) => {
+    const _theme = transformTheme(theme);
+    const linkColor = _theme === 'classic' ? '#46A997' : '#D410AA';
+    return {
+      styles: [Styles],
+      template: `
+    <div class="example-container left">
+      <ui-button
+      type="primary"
+      iconName="Help"
+      iconPosition="left"
+      label="More Help"
+      matTooltip="Tooltip meessage for button"
+      matTooltipPosition="below"
+      matTooltipClass="${_theme}"
+      applicationTheme="${_theme}"
+      ></ui-button>
+    </div>
+    <div class="example-container">
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse molestie est ipsum, nec <a [style.color]="'${linkColor}'" matTooltipClass="${_theme}" href="#" matTooltipPosition="above" matTooltip="Tooltip for link">lobortis neque lacinia</a> ac. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In efficitur urna quis ultricies mattis. Cras quis euismod urna. Duis facilisis ac mauris in gravida.</p>
+    </div>
+  `,
+    };
+  },
+} as Story;
+
+WithDirective.parameters = {
+  docs: {
+    description: {
+      story: 'For using `tooltip` as directive use `mat-tooltip` properties: `matTooltip` and `matTooltipPosition`',
+    },
+  },
+  controls: {
+    exclude: Exclude,
+  },
+};
+
+export const WithLongTextLeft: Story = {
+  render: (args: FileUploadComponent, { globals: { theme } }) => {
+    const _theme = transformTheme(theme);
+    return {
+      styles: [Styles],
+      template: `
+    <div class="example-container">
+      <ui-tooltip position="left" message="Lorem ipsum dolor sit amet, consectetu adipiscing elit." applicationTheme="${_theme}">
+        <ui-button
+        type="secondary"
+        [justIcon]="true"
+        iconName="Help"
+        label="secondary"
+        size="small"
+        matTooltipClass="${_theme}"
+        applicationTheme="${_theme}"
+      ></ui-button>
+      </ui-tooltip>
+    </div>
+  `,
+    };
+  },
+} as Story;
+
+WithLongTextLeft.parameters = {
+  controls: {
+    exclude: Exclude,
+  },
+};

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

@@ -0,0 +1,81 @@
+import {
+  booleanAttribute,
+  ChangeDetectionStrategy,
+  Component,
+  Inject,
+  Input,
+  OnInit,
+  Optional,
+} from '@angular/core';
+import { TooltipPositionType } from './tooltip.model';
+import { TooltipPosition } from '@angular/material/tooltip';
+import { ApplicationTheme } from '../../models/application-theme.model';
+
+@Component({
+  selector: 'ui-tooltip',
+  templateUrl: './tooltip.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class TooltipComponent implements OnInit {
+  /**
+   * Allows the user to define the position of the tooltip relative to the parent element.
+   *
+   * @type {TooltipPositionType}
+   * @memberof TooltipComponent
+   */
+  @Input() position: TooltipPositionType = TooltipPositionType.TOP;
+
+  /**
+   * Disables the display of the tooltip.
+   *
+   * @type {boolean}
+   * @memberof TooltipComponent
+   */
+  @Input({ transform: booleanAttribute }) disabled = false;
+
+  /**
+   * The message to be displayed in the tooltip.
+   *
+   * @type {string}
+   * @memberof TooltipComponent
+   */
+  @Input() message = '';
+
+  /**
+   *
+   * Defines the application theme
+   *
+   * @type {ApplicationTheme}
+   * @memberof TooltipComponent
+   */
+  @Input() applicationTheme: ApplicationTheme = 'light';
+
+  constructor(
+    @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme,
+  ) {
+    if (defaultAppTheme) {
+      this.applicationTheme = defaultAppTheme;
+    }
+  }
+
+  matPosition: TooltipPosition;
+
+  ngOnInit() {
+    this.setPosition();
+  }
+
+  //set position
+  setPosition(): void {
+    switch (this.position) {
+      case TooltipPositionType.TOP:
+        this.matPosition = 'above';
+        break;
+      case TooltipPositionType.BOTTOM:
+        this.matPosition = 'below';
+        break;
+      default:
+        this.matPosition = this.position;
+        break;
+    }
+  }
+}

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

@@ -0,0 +1,6 @@
+export enum TooltipPositionType {
+  TOP = 'top',
+  BOTTOM = 'bottom',
+  LEFT = 'left',
+  RIGHT = 'right'
+}

package/projects/tgo-canopy-ui/components/validation-error/validation-error.component.html

@@ -0,0 +1,29 @@
+<div class="errors" *ngIf="ngControl?.hasError('maxlength')">
+  <ui-icon [applicationTheme]="applicationTheme" [name]="'Error'"></ui-icon>
+  <span>{{ translationContextErrors + 'MAX_LENGTH' | uiTranslate : language : { maxlength: getErrorValue('maxlength') } }}</span>
+</div>
+
+<div class="errors" *ngIf="ngControl?.hasError('minlength')">
+  <ui-icon [applicationTheme]="applicationTheme" [name]="'Error'"></ui-icon>
+  <span>{{ translationContextErrors + 'MIN_LENGTH' | uiTranslate : language : { maxlength: getErrorValue('minlength') } }}</span>
+</div>
+
+<div class="errors" *ngIf="ngControl?.hasError('min')">
+  <ui-icon [applicationTheme]="applicationTheme" [name]="'Error'"></ui-icon>
+  <span>{{ translationContextErrors + 'MIN' | uiTranslate : language : { min: getErrorValue('min') } }}</span>
+</div>
+
+<div class="errors" *ngIf="ngControl?.hasError('max')">
+  <ui-icon [applicationTheme]="applicationTheme" [name]="'Error'"></ui-icon>
+  <span>{{ translationContextErrors + 'MAX' | uiTranslate : language : { max: getErrorValue('max') } }}</span>
+</div>
+
+<div class="errors" *ngIf="ngControl?.hasError('required') && ngControl?.touched">
+  <ui-icon [applicationTheme]="applicationTheme" [name]="'Error'"></ui-icon>
+  <span>{{ translationContextErrors + (label ? 'REQUIRED_FIELD' : 'REQUIRED') | uiTranslate : language : { label } }}</span>
+</div>
+
+<div class="errors" *ngIf="ngControl?.hasError('email')">
+  <ui-icon [applicationTheme]="applicationTheme" [name]="'Error'"></ui-icon>
+  <span>{{ translationContextErrors + 'EMAIL_INCORRECT' | uiTranslate : language }}</span>
+</div>