@testgorilla/tgo-ui 2.30.13 → 2.31.1

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

@@ -0,0 +1,128 @@
+import { Meta, moduleMetadata, StoryFn } from '@storybook/angular';
+import { TagComponent } from './tag.component';
+import { IconComponentModule } from '../icon/icon.component.module';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { transformTheme } from '../../utils/transform-theme';
+import { FileUploadComponent } from '../file-upload/file-upload.component';
+import { userEvent, within } from '@storybook/test';
+import { UiTranslatePipe } from "../../pipes/ui-translate.pipe";
+
+const parameters = {
+  design: {
+    name: 'Figma design',
+    type: 'figma',
+    url: 'https://www.figma.com/file/FHZJ7ViJv6msJA5lJvPRIG/Component-library?type=design&node-id=12298-62808&mode=design&t=VGuLMZFB3q1OtVZa-4',
+  },
+};
+
+
+export default {
+  title: 'Tag',
+  component: TagComponent,
+  decorators: [
+    moduleMetadata({
+      declarations: [TagComponent],
+      imports: [IconComponentModule, UiTranslatePipe, MatTooltipModule],
+    }),
+  ],
+} as Meta;
+
+const Template: StoryFn = (args, { globals: { theme } }) => {
+  const _theme = transformTheme(theme);
+  return {
+    props: {
+      applicationTheme: _theme,
+      ...args,
+    },
+  };
+};
+
+export const Default = Template.bind({});
+Default.args = {};
+
+Default.parameters = parameters;
+
+export const Suggestion = Template.bind({});
+Suggestion.args = {
+  label: 'Label',
+};
+Suggestion.parameters = parameters;
+
+export const SuggestionWithIcon = Template.bind({});
+SuggestionWithIcon.args = {
+  label: 'Label',
+  icon: 'Folder',
+};
+SuggestionWithIcon.parameters = parameters;
+
+export const Filter = Template.bind({});
+Filter.args = {
+  label: 'Label',
+  isSelected: true,
+  showIconWhenSelected: true,
+};
+Filter.parameters = parameters;
+
+Filter.play = async ({ args, canvasElement }) => {
+  const canvas = within(canvasElement);
+  await new Promise(r => setTimeout(r, 1000));
+  await userEvent.click(canvas.getByTestId('tag--container'));
+  await new Promise(r => setTimeout(r, 1000));
+  await userEvent.click(canvas.getByTestId('tag--container'));
+  await userEvent.unhover(canvas.getByTestId('tag--container'));
+};
+
+export const Input = Template.bind({});
+Input.args = {
+  label: 'Label',
+  allowClose: true,
+};
+Input.parameters = parameters;
+
+export const InputWithIcon = Template.bind({});
+InputWithIcon.args = {
+  label: 'Label',
+  icon: 'Assessment',
+  allowClose: true,
+};
+InputWithIcon.parameters = parameters;
+
+export const ReadOnly = Template.bind({});
+ReadOnly.args = {
+  label: 'Label',
+  readOnly: true,
+};
+ReadOnly.parameters = parameters;
+
+export const TruncatedLabel: StoryFn = {
+  render: (args: FileUploadComponent, { globals: { theme } }) => {
+    const _theme = transformTheme(theme);
+    return {
+      template: `
+    <ui-tag applicationTheme="${_theme}" label="Long label to show how truncated text looks like"></ui-tag>
+    <ui-tag applicationTheme="${_theme}" label="Long label to show how truncated text looks like" [isSelected]="true" showIconWhenSelected="true"></ui-tag>
+    <ui-tag applicationTheme="${_theme}" label="Long label to show how truncated text looks like" allowClose="true"></ui-tag>
+    <ui-tag applicationTheme="${_theme}" label="Long label to show how truncated text looks like" readOnly="true"></ui-tag>
+    <ui-tag applicationTheme="${_theme}" label="Long label to show how truncated text looks like" icon="Folder"></ui-tag>
+    <ui-tag applicationTheme="${_theme}" label="Long label to show how truncated text looks like" icon="Assessment" allowClose="true"></ui-tag>
+  `,
+    };
+  },
+} as StoryFn;
+TruncatedLabel.parameters = parameters;
+
+export const Disabled: StoryFn = {
+  render: (args: FileUploadComponent, { globals: { theme } }) => {
+    const _theme = transformTheme(theme);
+    return {
+      template: `
+  <ui-tag applicationTheme="${_theme}" isDisabled="true" label="Suggestion"></ui-tag>
+  <ui-tag applicationTheme="${_theme}" isDisabled="true" label="Filter(Selected)" [isSelected]="true" showIconWhenSelected="true"></ui-tag>
+  <ui-tag applicationTheme="${_theme}" isDisabled="true" label="Input Without Icon" allowClose="true"></ui-tag>
+  <ui-tag applicationTheme="${_theme}" isDisabled="true" label="Read-only" readOnly="true"></ui-tag>
+  <ui-tag applicationTheme="${_theme}" isDisabled="true" label="Suggestion With Icon" icon="Folder"></ui-tag>
+  <ui-tag applicationTheme="${_theme}" isDisabled="true" label="Input With Icon" icon="Assessment" allowClose="true"></ui-tag>`,
+    };
+  },
+} as StoryFn;
+Disabled.parameters = parameters;

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

@@ -0,0 +1,225 @@
+import {
+  AfterViewInit,
+  Component,
+  ElementRef,
+  EventEmitter,
+  Inject,
+  Input,
+  OnInit,
+  Optional,
+  Output,
+  signal,
+  ViewChild
+} from '@angular/core';
+import { debounceTime, map, ReplaySubject } from 'rxjs';
+import { IconColor, IconName } from '../icon/icon.model';
+import { ApplicationTheme } from '../../models/application-theme.model';
+import { IKeyboardEvent } from "../../models/keyboard-events.model";
+
+@Component({
+  selector: 'ui-tag',
+  templateUrl: './tag.component.html',
+  styleUrls: ['./tag.component.scss'],
+})
+export class TagComponent implements AfterViewInit, OnInit {
+  /**
+   * Tag's label
+   *
+   * @memberof TagComponent
+   */
+  @Input() set label(value: string) {
+    this.labelText = value;
+    if (this.labelElement) {
+      this.isLabelEllipseActive();
+    }
+  }
+
+  /**
+   * Icon
+   *
+   * @type {string}
+   * @memberof TagComponent
+   */
+  @Input() icon: IconName = '';
+
+  /**
+   * Whether to allow the tag to be closed.
+   *
+   * @type {boolean}
+   * @default false
+   * @memberof TagComponent
+   */
+  @Input() allowClose = false;
+
+  /**
+   * Whether the tag is in read-only mode.
+   *
+   * @type {boolean}
+   * @default false
+   * @memberof TagComponent
+   */
+  @Input() readOnly = false;
+
+  /**
+   * Whether the tag is selected.
+   *
+   * @type {boolean}
+   * @default false
+   * @memberof TagComponent
+   */
+  @Input() isSelected = false;
+
+  /**
+   * Display icon when is selected
+   *
+   * @type {boolean}
+   * @default false
+   * @memberof TagComponent
+   */
+  @Input() showIconWhenSelected = false;
+
+  /**
+   * Specifies whether the element is disabled.
+   *
+   * @type {boolean}
+   * @default false
+   * @memberof TagComponent
+   */
+  @Input() isDisabled = false;
+
+  /**
+   *
+   * Defines the application theme
+   *
+   * @type {ApplicationTheme}
+   * @memberof TagComponent
+   */
+  @Input() applicationTheme: ApplicationTheme = 'light';
+
+  /**
+   * A string representing the ARIA label for accessibility.
+   * This label is used to provide an accessible name for the input element.
+   * @type {string}
+   * @memberof TagComponent
+   */
+  @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 TagComponent
+   */
+  @Input() ariaRequired = false;
+
+  /**
+   * Event triggered when the tag should be closed.
+   *
+   * @event
+   * @memberof TagComponent
+   */
+  @Output() close = new EventEmitter<void>();
+
+  /**
+   * Event triggered when a press action occurs.
+   *
+   * @event
+   * @memberof TagComponent
+   */
+  @Output() press = new EventEmitter<boolean>();
+
+  /**
+   * Subject that needs to be triggered when Label input changes, to check if it's truncated
+   * @private
+   * @type {void}
+   * @memberof TagComponent
+   */
+  private checkLabelEllipsis$ = new ReplaySubject<void>(1);
+
+  /**
+   * Observable that indicates if the Label is truncated
+   * debounceTime is used to wait for view to be initialized after receiving a new Label input
+   * @protected
+   * @type {boolean}
+   * @memberof TagComponent
+   */
+  protected isEllipseActiveObs$ = this.checkLabelEllipsis$.pipe(
+    debounceTime(100),
+    map(() => {
+      const el = this.labelElement.nativeElement;
+      return el.offsetWidth < el.scrollWidth;
+    })
+  );
+  protected labelText = '';
+  protected isHovered = false;
+  protected shrink = false;
+  protected iconToPass: IconName;
+  protected iconColor: IconColor;
+  protected closeBtnFocused = signal(false);
+
+  @ViewChild('labelElement') labelElement: ElementRef<HTMLElement>;
+
+  constructor(
+    @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme,
+  ) {
+    if (defaultAppTheme) {
+      this.applicationTheme = defaultAppTheme;
+    }
+  }
+
+  ngOnInit(): void {
+    this.iconToPass = this.icon;
+    this.iconColor = 'black';
+  }
+
+  ngAfterViewInit(): void {
+    this.isLabelEllipseActive();
+  }
+
+  onPress(): void {
+    if (!this.readOnly && !this.allowClose) {
+      this.isSelected = this.showIconWhenSelected ? !this.isSelected : false;
+      this.press.emit(this.isSelected);
+    }
+  }
+
+  setHoverState(state: boolean) {
+    this.isHovered = state;
+    if (this.applicationTheme !== 'classic') {
+      if (state) {
+        this.iconToPass = `${this.icon}-filled` as IconName;
+      } else {
+        this.iconToPass = this.icon;
+      }
+      this.iconColor = this.isHovered ? 'white' : 'black';
+    }
+  }
+
+  setShrinkState(state: boolean) {
+    this.shrink = state;
+  }
+
+  onClose(): void {
+    this.close.emit();
+  }
+
+  private isLabelEllipseActive(): void {
+    this.checkLabelEllipsis$.next();
+  }
+
+  get tabIndex(): number {
+    return this.isDisabled || this.readOnly ? -1 : 0;
+  }
+
+  get filled(): boolean {
+    return this.readOnly || this.allowClose || this.isSelected;
+  }
+
+  onKeydown($event: KeyboardEvent): void {
+    if (($event.key === IKeyboardEvent.ENTER || $event.key === IKeyboardEvent.SPACE) && !this.closeBtnFocused()) {
+      this.onPress();
+    } else if (this.closeBtnFocused() && ($event.key === IKeyboardEvent.ENTER || $event.key === IKeyboardEvent.SPACE)) {
+      this.onClose();
+    }
+  }
+}

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

@@ -0,0 +1,37 @@
+<div class="toggle" [ngClass]="classes">
+  <div
+    [style.--max-width]="maxWidth + 'px'"
+    [tabIndex]="0"
+    class="toggle-container"
+    [ngClass]="{ 'active': selected }"
+    (click)="onToggle()"
+    [attr.aria-label]="ariaLabel"
+    [attr.aria-required]="ariaRequired"
+    (keydown)="onKeydown($event)"
+    role="switch"
+    [attr.aria-labelledby]="'label'"
+    [attr.aria-describedby]="'ariaDescribedby'"
+    [attr.aria-checked]="selected"
+  >
+    <span [style.display]="'none'" id="ariaDescribedby">{{ ariaDescribedby }}</span>
+    <div
+      class="label"
+      uiEllipseText
+      [matTooltipShowDelay]="800"
+      [matTooltip]="showLabelTooltip ? label : ''"
+      (onChangeTextState)="changeTextState($event)"
+      id="label"
+    >
+      {{ label }}
+    </div>
+    <div class="knob" *ngIf="!loading; else loadingTemplate" [ngClass]="{ selected }">
+      <ui-icon [color]="disabled ? 'grey' : 'white'" *ngIf="selected && !label" [size]="'16'"  [name]="'Check-round-filled'"></ui-icon>
+    </div>
+
+    <ng-template #loadingTemplate>
+      <ui-spinner [isLoader]="false" [size]="'small'" [applicationTheme]="'dark'"></ui-spinner>
+    </ng-template>
+  </div>
+  <div *ngIf="message && selected" class="message">{{ message }}</div>
+</div>
+

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

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ToggleComponent } from './toggle.component';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { EllipseTextDirective } from '../../directives/ellipse-text.directive';
+import { MatInputModule } from '@angular/material/input';
+import { UiTranslatePipe } from '../../pipes/ui-translate.pipe';
+import { IconComponentModule } from "../icon/icon.component.module";
+import { SpinnerComponentModule } from "../spinner/spinner.module";
+
+@NgModule({
+  declarations: [ToggleComponent],
+  imports: [CommonModule, MatTooltipModule, EllipseTextDirective, MatInputModule, UiTranslatePipe, IconComponentModule, SpinnerComponentModule],
+  exports: [ToggleComponent],
+})
+export class ToggleComponentModule {}

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

@@ -0,0 +1,273 @@
+@use "../../theme/variables" as *;
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap");
+
+:host {
+  width: fit-content;
+  display: block;
+
+  .toggle {
+    height: auto;
+    width: fit-content;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    .toggle-container {
+      border: 1px solid transparent;
+    }
+
+    &.disabled {
+      opacity: 0.5;
+
+      .label {
+        color: $black!important;
+      }
+
+      .toggle-container {
+        background: $tgo-medium;
+        pointer-events: none;
+
+        &:focus {
+          outline: none;
+        }
+      }
+    }
+
+    &.dark, &.light {
+      &.disabled {
+        .toggle-container {
+          &.active {
+            background: $grayscale-20;
+            border: 1px solid $black;
+
+            .knob {
+              &:after {
+                background: $black;
+              }
+            }
+          }
+        }
+      }
+
+      .toggle-container {
+        background: transparent;
+        border: 1px solid $black;
+
+        .label {
+          color: $black;
+        }
+
+        .knob {
+          &:after {
+            background: $black;
+          }
+        }
+
+        &.active {
+          background: $brand-50;
+          border: 1px solid $brand-50;
+
+          .label {
+            color: $tgo-white;
+          }
+
+          .knob {
+            &:after {
+              background: $tgo-white;
+            }
+          }
+        }
+      }
+
+      .message {
+        color: $black;
+      }
+    }
+
+    &.dark {
+      &.disabled {
+        .toggle-container {
+          &.active {
+            border-color: $tgo-white;
+
+            .knob {
+              &:after {
+                background: $tgo-white;
+              }
+            }
+          }
+        }
+      }
+
+      .toggle-container {
+        border-color: $tgo-white;
+
+        .label {
+          color: $tgo-white;
+        }
+
+        .knob {
+          &:after {
+            background: $tgo-white;
+          }
+        }
+      }
+
+      .message {
+        color: $tgo-white;
+      }
+    }
+
+
+    .toggle-container {
+      min-height: 20px;
+      max-height: 24px;
+      max-width: var(--max-width);
+      padding: 0 3px 0 20px;
+      width: fit-content;
+      min-width: 36px;
+      border-radius: 16px;
+      background: $tgo-dark;
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+      position: relative;
+      transition: transform 0.3s, padding 0.3s, background 0.3s;
+
+      @keyframes focus-ring-animation {
+        0% {
+          outline-width: 4px;
+        }
+        100% {
+          outline-width: 2px;
+        }
+      }
+
+      &:focus-visible {
+        position: relative;
+        outline: 2px solid $black;
+        outline-offset: 2px;
+        animation: focus-ring-animation 0.4s forwards;
+
+        &:after {
+          content: '';
+          position: absolute;
+          width: calc(100% + 2px);
+          height: calc(100% + 2px);
+          top: -1px;
+          left: -1px;
+          outline: 2px solid $tgo-white;
+          border-radius: 16px;
+        }
+      }
+
+      .knob {
+        height: 100%;
+        width: 100%;
+        position: absolute;
+        left: -1px;
+        top: 0;
+        display: flex;
+        align-items: center;
+        padding: 3px;
+        max-height: 20px;
+        transition: transform 0.3s;
+
+        &:after {
+          content: "";
+          display: block;
+          border-radius: 16px;
+          width: 12px;
+          height: 12px;
+          background: $tgo-white;
+          transition: background 0.3s;
+        }
+      }
+
+      .label {
+        z-index: 1;
+        font-size: 8px;
+        font-weight: bold;
+        color: $tgo-white;
+        text-align: center;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+        pointer-events: visible;
+        line-height: 16px;
+      }
+
+      &.active {
+        background: $tgo-petrol-default;
+        padding: 0 20px 0 3px;
+
+        .knob {
+          transform: translateX(calc(100% - 15px));
+        }
+      }
+    }
+
+    .message {
+      margin-top: 4px;
+      font-weight: bold;
+      font-size: 12px;
+      line-height: 16px;
+      color: $tgo-petrol-default;
+      text-align: justify;
+    }
+
+    &.small-toggle {
+      .toggle-container {
+        .knob {
+          left: 0;
+
+          &:after {
+            width: 10px;
+            height: 10px;
+          }
+
+
+          &.selected {
+            left: -8px;
+
+            &:after {
+              display: none;
+            }
+
+            ui-icon {
+              ::ng-deep svg {
+                width: 20px;
+                height: 20px;
+              }
+            }
+          }
+        }
+      }
+    }
+
+    &.loading {
+      .toggle-container {
+        border-color: $brand-50;
+        background-color: $brand-50;
+
+        padding: 0;
+        display: flex;
+        justify-content: center;
+        cursor: default;
+      }
+    }
+  }
+}
+
+::ng-deep .mat-mdc-tooltip {
+  background-color: $tgo-petrol-60w;
+  font-family: "Open Sans", serif;
+  font-weight: normal;
+  font-size: 12px;
+  border-radius: 4px;
+  overflow: visible;
+  max-width: 248px;
+  padding: 6px 2px;
+  --mdc-plain-tooltip-container-color: none;
+  --mdc-plain-tooltip-supporting-text-color: $tgo-black;
+}