@testgorilla/tgo-ui 2.30.13 → 2.31.1

package/projects/tgo-canopy-ui/components/overflow-menu/overflow-menu.component.scss

@@ -0,0 +1,212 @@
+@use "../../theme/variables" as *;
+
+:host {
+  ::ng-deep .overflow-menu .mat-mdc-menu-content:not(:empty) {
+    padding: 0;
+  }
+
+  ::ng-deep {
+    .overflow-menu button {
+      padding: 0!important;
+      width: fit-content!important;
+    }
+  }
+}
+
+.overflow-menu-opener {
+  background: transparent;
+  height: 40px;
+  width: 40px;
+  border-radius: 50px;
+  border: unset;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+
+  &:focus-visible {
+    outline-color: $black;
+    outline-style: solid;
+    outline-offset: 2px!important;
+    animation: focus-ring-animation 0.4s forwards;
+  }
+
+  @keyframes focus-ring-animation {
+    0% {
+      outline-width: 4px!important;
+    }
+    100% {
+      outline-width: 2px!important;
+    }
+  }
+
+  &:hover {
+    background: $grayscale-20;
+  }
+}
+
+.overflow-menu-backdrop + * {
+  .mat-mdc-menu-panel {
+    min-height: 0;
+    border-radius: 8px;
+    box-shadow: 2px 24px 48px 8px rgba(0, 0, 0, 0.08);
+  }
+
+  .mat-mdc-menu-content:not(:empty) {
+    padding: 0;
+  }
+
+  ui-button:first-child button.mat-mdc-unelevated-button.menuCell {
+    border-radius: 8px 8px 0 0;
+  }
+
+  ui-button:last-child button.mat-mdc-unelevated-button.menuCell {
+    border-radius: 0 0 8px 8px;
+  }
+
+  ui-button.destructive {
+
+    button.mat-mdc-unelevated-button.menuCell {
+      color: $tgo-error-default;
+
+      mat-icon.black svg {
+        color: $tgo-error-default;
+      }
+
+      &:hover {
+        background-color: $tgo-error-secondary;
+      }
+
+      &:focus {
+
+        &.cdk-focused.cdk-mouse-focused {
+          background-color: $tgo-error-secondary;
+        }
+      }
+    }
+  }
+}
+
+[theme="dark"], [theme="light"] {
+
+
+  .overflow-menu-backdrop + * {
+    .mat-mdc-menu-panel {
+      min-height: 0;
+      border-radius: 10px;
+      box-shadow: $box-shadow-hover-state;
+    }
+    ui-button {
+      button.mat-mdc-unelevated-button.menuCell {
+        &:hover {
+          background-color: $brand-10;
+        }
+
+        &:active {
+          background-color: $brand-20;
+        }
+      }
+
+      &.destructive {
+        button.mat-mdc-unelevated-button.menuCell {
+          color: $error-50 !important;
+
+          mat-icon.black svg {
+            color: $error-50 !important;
+          }
+
+          &:hover {
+            background-color: $brand-10;
+          }
+
+          &:active {
+            background-color: $brand-20;
+          }
+
+          &:focus {
+
+            &.cdk-focused.cdk-mouse-focused {
+              background-color: $brand-20;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+button.is-destructive {
+  background-color: $tgo-white;
+  color: $error-50;
+
+  &:hover {
+    background-color: $error-50;
+
+    ::ng-deep mat-icon.black svg {
+      color: $tgo-white;
+    }
+  }
+
+  &:disabled,
+  &:disabled:hover {
+    color: $grayscale-40;
+    background: transparent;
+  }
+
+  ::ng-deep mat-icon.black svg {
+    color: $error-50;
+  }
+
+  .mat-mdc-progress-spinner {
+    ::ng-deep circle {
+      stroke: $black;
+    }
+  }
+
+  &.classic-theme {
+    border: unset;
+    border-radius: 4px;
+    background-color: $tgo-error-default;
+    color: $tgo-white;
+
+    &:hover {
+      background-color: $tgo-error-30b;
+    }
+
+    &:disabled,
+    &:disabled:hover {
+      background-color: $tgo-error-60w;
+    }
+
+    ::ng-deep mat-icon.black svg {
+      color: $tgo-white;
+    }
+
+    .mat-mdc-progress-spinner {
+      ::ng-deep circle {
+        stroke: $tgo-black;
+      }
+    }
+  }
+}
+
+button .label {
+  text-align: left;
+  overflow: hidden;
+  -webkit-line-clamp: 2;
+  display: -webkit-box!important;
+  -webkit-box-orient: vertical;
+  text-overflow: ellipsis;
+  white-space: normal;
+}
+
+button.disabled {
+  background: transparent;
+  color: $tgo-dark;
+  cursor: not-allowed;
+
+  &:hover {
+    background: transparent!important;
+  }
+}
+

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

@@ -0,0 +1,149 @@
+import { CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from '@angular/core';
+import { ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
+import { MatMenuModule } from '@angular/material/menu';
+import { By } from '@angular/platform-browser';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { OverflowMenuComponent } from './overflow-menu.component';
+import { tgoIcons } from '../icon/icon.config';
+import { IconName } from '../icon/icon.model';
+import { EllipseTextDirective } from "../../directives/ellipse-text.directive";
+import { UiTranslatePipe } from "../../pipes/ui-translate.pipe";
+
+describe('OverflowMenuComponent', () => {
+  let component: OverflowMenuComponent;
+  let fixture: ComponentFixture<OverflowMenuComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [OverflowMenuComponent],
+      imports: [MatMenuModule, NoopAnimationsModule, EllipseTextDirective, UiTranslatePipe],
+      schemas: [NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(OverflowMenuComponent);
+    component = fixture.componentInstance;
+    component.buttons = [
+      { label: 'Button 1', value: 'value1', subMenu: [] },
+      { label: 'Button 2', value: 'value2', subMenu: [] },
+    ] as any;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should have default iconTrigger as "Menu-ellipsis"', () => {
+    expect(component.iconTrigger).toBe('Menu-ellipsis');
+  });
+
+  it('should emit selectItem when onSelectItem is called', () => {
+    jest.spyOn(component.selectItem, 'emit');
+
+    const value = 'value1';
+    component.onSelectItem(new Event('click'), value);
+
+    expect(component.selectItem.emit).toHaveBeenCalledWith(value);
+  });
+
+  it('should emit menuOpened and set isMenuOpened to true when onMenuOpened is called', () => {
+    jest.spyOn(component.menuOpened, 'emit');
+
+    component.onMenuOpened();
+
+    expect(component.menuOpened.emit).toHaveBeenCalled();
+    expect(component.isMenuOpened()).toBeTruthy();
+  });
+
+  it('should emit menuClosed and set isMenuOpened to false when onMenuClosed is called', () => {
+    jest.spyOn(component.menuClosed, 'emit');
+
+    component.onMenuClosed();
+
+    expect(component.menuClosed.emit).toHaveBeenCalled();
+    expect(component.isMenuOpened()).toBeFalsy();
+  });
+
+  it('should set isMenuRendered to true after ngAfterViewInit', () => {
+    component.ngAfterViewInit();
+    expect(component.isMenuRendered()).toBeTruthy();
+  });
+
+  it('should set button isFocused to true on focus', () => {
+    const button = component.submenus[0][0];
+    component.onButtonFocus(button);
+    expect(button.isFocused).toBeTruthy();
+  });
+
+  it('should set button isFocused to false on blur', () => {
+    const button = component.submenus[0][0];
+    component.onButtonBlur(button);
+    expect(button.isFocused).toBeFalsy();
+  });
+
+  it('should prevent event propagation if button is disabled', () => {
+    const button = component.submenus[0][0];
+    button.disabled = true;
+
+    const event = new Event('click');
+    jest.spyOn(event, 'preventDefault');
+    jest.spyOn(event, 'stopPropagation');
+
+    component.onButtonClick(button, event);
+
+    expect(event.preventDefault).toHaveBeenCalled();
+    expect(event.stopPropagation).toHaveBeenCalled();
+  });
+
+  it('should find menu by index', () => {
+    const menu = component.getMenu(0);
+    expect(menu).toBeDefined();
+  });
+
+  it('should return null if menu index is invalid', () => {
+    const menu = component.getMenu(-1);
+    expect(menu).toBeNull();
+  });
+
+  it('should set isFocused to true when buttonElement is focused via keyboard', fakeAsync(() => {
+    component.ngAfterViewInit();
+    fixture.detectChanges();
+    component.buttonElement.nativeElement.dispatchEvent(new Event('focus', { bubbles: true }));
+    tick(300);
+    expect(component.isFocused()).toBeFalsy();
+  }));
+
+  it('should set isFocused to false when buttonElement is not focused via keyboard', fakeAsync(() => {
+    component.ngAfterViewInit();
+    fixture.detectChanges();
+    component.buttonElement.nativeElement.dispatchEvent(new Event('blur', { bubbles: true }));
+    tick(300);
+    expect(component.isFocused()).toBeFalsy();
+  }));
+
+  it('should create submenus correctly', () => {
+    const buttons = [
+      { label: 'Button 1', value: 'value1', subMenu: [] },
+      { label: 'Button 2', value: 'value2', subMenu: [{ label: 'SubButton 1', value: 'subvalue1', subMenu: [] }] }
+    ];
+    // @ts-ignore
+    component.buttons = buttons;
+    component.ngOnInit();
+    expect(component.submenus.length).toBe(7);
+  });
+
+  it('should return null if getMenu is called with invalid index', () => {
+    expect(component.getMenu(-1)).toBeNull();
+    expect(component.getMenu(100)).toBeUndefined();
+  });
+
+  it('should toggle isMenuOpened when onSubmenuOpened is called', () => {
+    component.isMenuOpened.set(false);
+    component.onSubmenuOpened();
+    expect(component.isMenuOpened()).toBeFalsy();
+    component.onSubmenuOpened();
+    expect(component.isMenuOpened()).toBeFalsy();
+  });
+});

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

@@ -0,0 +1,73 @@
+import { Meta, moduleMetadata, StoryFn } from '@storybook/angular';
+import { MatMenuModule } from '@angular/material/menu';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { ButtonComponentModule } from '../button/button.component.module';
+import { IconComponentModule } from '../icon/icon.component.module';
+import { OverflowMenuComponent } from './overflow-menu.component';
+import { transformTheme } from "../../utils/transform-theme";
+import { MatTooltipModule } from "@angular/material/tooltip";
+import { EllipseTextDirective } from "../../directives/ellipse-text.directive";
+import { UiTranslatePipe } from "../../pipes/ui-translate.pipe";
+
+export default {
+  title: 'Overflow menu',
+  component: OverflowMenuComponent,
+  decorators: [
+    moduleMetadata({
+      declarations: [OverflowMenuComponent],
+      imports: [IconComponentModule, ButtonComponentModule, MatMenuModule, BrowserAnimationsModule, IconComponentModule, MatTooltipModule, EllipseTextDirective, UiTranslatePipe],
+    }),
+  ],
+} as Meta;
+
+const Template: StoryFn = (args, { globals: { theme } }) => {
+  const _theme = transformTheme(theme);
+  return {
+    props: {
+      applicationTheme: _theme,
+      ...args,
+    },
+  };
+};
+
+export const Default = Template.bind({});
+
+Default.args = {
+  iconTrigger: 'Menu-ellipsis',
+  buttons: [
+    {
+      icon: 'Edit',
+      label: 'Edit Edit Edit Edit Edit Edit Edit Edit Edit Edit Edit Edit Edit Edit Edit Edit',
+      value: 'Edit value',
+      subMenu: [{
+        icon: 'Edit',
+        label: 'Edit Edit Edit Edit Edit Edit Edit Edit Edit Edit Edit Edit Edit Edit Edit EditEdit Edit Edit Edit Edit Edit Edit Edit Edit Edit Edit Edit Edit Edit Edit Edit',
+        value: 'Edit value',
+      },
+        {
+          icon: 'Copy',
+          label: 'Copy2',
+          value: 'Copy value',
+        },
+      ]
+    },
+    {
+      icon: 'Copy',
+      disabled: true,
+      label: 'Copy',
+      value: 'Copy value',
+    },
+    {
+      icon: 'Delete',
+      label: 'Delete',
+      value: 'Delete value',
+      isDestructive: true,
+    },
+  ],
+};
+
+Default.parameters = {
+  controls: {
+    exclude: ['ngOnInit', 'onSelectItem'],
+  },
+};

package/projects/tgo-canopy-ui/components/overflow-menu/overflow-menu.component.ts

@@ -0,0 +1,221 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Inject,
+  Input,
+  NgZone,
+  OnInit,
+  Optional,
+  Output,
+  QueryList,
+  signal,
+  ViewChild,
+  ViewChildren,
+  ViewEncapsulation
+} from '@angular/core';
+import { IconName } from '../icon/icon.model';
+import { OverflowMenuButtonModify, OverflowMenuButtonsType } from './overflow-menu.model';
+import { ApplicationTheme } from "../../models/application-theme.model";
+import { MatMenu, MatMenuTrigger } from "@angular/material/menu";
+import { FocusMonitor } from "@angular/cdk/a11y";
+
+@Component({
+  selector: 'ui-overflow-menu',
+  templateUrl: './overflow-menu.component.html',
+  styleUrls: ['./overflow-menu.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+
+})
+export class OverflowMenuComponent implements OnInit {
+  /**
+   * Menu buttons
+   *
+   * @type {OverflowMenuButtonsType[]}
+   * @memberof OverflowMenuComponent
+   */
+  @Input() buttons: OverflowMenuButtonsType[];
+
+  /**
+   * Menu icon trigger
+   *
+   * @memberof OverflowMenuComponent
+   */
+  @Input() iconTrigger: IconName = 'Menu-ellipsis';
+
+  /**
+   * Label menu
+   *
+   * @memberof OverflowMenuComponent
+   */
+  @Input() menuLabel = '';
+
+  /**
+   *
+   * Defines the application theme
+   *
+   * @type {ApplicationTheme}
+   * @memberof OverflowMenuComponent
+   */
+  @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 OverflowMenuComponent
+   */
+  @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 OverflowMenuComponent
+   */
+  @Input() ariaRequired = false;
+
+  /**
+   * A string representing the ARIA requirement for accessibility.
+   * This attribute is used to indicate whether an input for description.
+   * @type {text}
+   * @memberof OverflowMenuComponent
+   */
+  @Input() describedby = '';
+
+  @Output() selectItem: EventEmitter<string> = new EventEmitter<string>();
+
+  @Output() menuOpened = new EventEmitter<void>();
+
+  @Output() menuClosed = new EventEmitter<void>();
+
+  @ViewChildren(MatMenu) matmenus: QueryList<MatMenu>
+  @ViewChildren(MatMenuTrigger) matTrigger: QueryList<MatMenuTrigger>
+  @ViewChild('buttonElement') buttonElement: any;
+
+  menuItems: string[] = []
+  submenus: Array<OverflowMenuButtonModify[]> = []
+
+  isMenuRendered = signal(false);
+  isMenuOpened = signal(false);
+  isFocused = signal(false);
+
+  constructor(
+    @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme,
+    private focusMonitor: FocusMonitor,
+    private ngZone: NgZone,
+  ) {
+    if (defaultAppTheme) {
+      this.applicationTheme = defaultAppTheme;
+    }
+  }
+
+  ngOnInit() {
+    this.createSubmenus(this.buttons, "s0", 1)
+    this.reindex()
+  }
+
+  ngAfterViewInit() {
+    this.isMenuRendered.set(true);
+
+    setTimeout(() => {
+      this.focusMonitor.monitor(this.buttonElement).subscribe(origin => this.ngZone.run(() => {
+        if (origin === 'keyboard') {
+          this.isFocused.set(true);
+        } else {
+          if (!this.isMenuOpened()) {
+            this.isFocused.set(false);
+          }
+        }
+      }));
+    }, 300);
+  }
+
+  onSelectItem(event: Event, value: string) {
+    if (!!value) {
+      this.selectItem.emit(value);
+    }
+  }
+
+  onMenuOpened(): void {
+    this.menuOpened.emit();
+    this.isMenuOpened.set(true);
+
+    if (this.isFocused()) {
+      setTimeout(() => {
+        this.matmenus.first._allItems.first.focus('keyboard');
+      }, 300)
+    }
+  }
+
+  onMenuClosed(): void {
+    this.isMenuOpened.set(false);
+    this.menuClosed.emit();
+  }
+
+  onButtonFocus(button: OverflowMenuButtonModify) {
+    button.isFocused = true;
+  }
+
+  onButtonBlur(button: OverflowMenuButtonModify) {
+    button.isFocused = false;
+  }
+
+  onButtonClick(button: OverflowMenuButtonModify, $event: Event) {
+    if (button.disabled) {
+      $event.preventDefault();
+      $event.stopPropagation();
+    } else {
+      this.onSelectItem($event, button.value);
+    }
+  }
+
+  getMenu(index: any) {
+    return index >= 0 && this.matmenus ? this.matmenus.find((x, i) => i == index)! : null
+  }
+
+  private reindex() {
+    this.submenus.forEach((menu: OverflowMenuButtonsType[]) => {
+      menu.forEach((item: OverflowMenuButtonsType, index: number) => {
+        if (item.subMenu !== -1)
+          item.subMenu = this.menuItems.indexOf(item.action + '')
+      })
+    })
+  }
+
+  private createSubmenus(menu: OverflowMenuButtonsType[], prefix: string, count: number): void {
+    this.menuItems.push(prefix);
+    this.submenus.push(
+      menu.map((item: OverflowMenuButtonsType, index: number) => {
+        return (
+          {
+            label: item.label,
+            icon: item.icon,
+            isDestructive: item.isDestructive,
+            value: item.value,
+            disabled: item.disabled,
+            btnTemplate: item.btnTemplate,
+            subMenu: item.subMenu ? 0 : -1,
+            action: item.action ? item.action : prefix+index
+          }
+        )
+      })
+    );
+
+    menu.forEach((item: OverflowMenuButtonsType, index: number) => {
+      if (item.subMenu) {
+        this.createSubmenus((item as { subMenu: OverflowMenuButtonsType[] }).subMenu, prefix + index, count + 1);
+      }
+    })
+  }
+
+  onSubmenuOpened(): void {
+    this.isMenuOpened.set(!this.isMenuOpened);
+    if (this.isFocused()) {
+      setTimeout(() => {
+        this.matmenus.last._allItems.first.focus('keyboard');
+      }, 300);
+    }
+  }
+}

package/projects/tgo-canopy-ui/components/overflow-menu/overflow-menu.model.ts

@@ -0,0 +1,22 @@
+import { IconName } from '../icon/icon.model';
+import { TemplateRef } from '@angular/core';
+
+export type OverflowMenuButtonsType = {
+  icon: IconName;
+  label: string;
+  isDestructive?: boolean;
+  value: string;
+  disabled?: boolean;
+  btnTemplate?: TemplateRef<any>;
+  subMenu?: OverflowMenuButtonsType[] | number;
+  action?: number | string;
+  describedby?: string;
+  ariaLabel?: string;
+};
+
+type ButtonOptions = {
+  isTextEllipsed?: boolean;
+  isFocused?: boolean;
+}
+
+export type OverflowMenuButtonModify = OverflowMenuButtonsType & ButtonOptions;

package/projects/tgo-canopy-ui/components/page-header/page-header.component.html

@@ -0,0 +1,38 @@
+<ng-container>
+  <div class="page-header-container">
+    <div class="page-header-content">
+      @if (!(isMobile$ | async)) {
+        @if (showBackButton) {
+          <ui-button
+            [applicationTheme]="applicationTheme"
+            [tooltip]="(('COMMON.BACK') | uiTranslate | async)!"
+            (click)="onBack()"
+            [ariaLabel]="(('COMMON.BACK') | uiTranslate | async)!"
+            [variant]="'ghost'"
+            [justIcon]="true"
+            [iconName]="applicationTheme === 'classic' ? 'Arrow_left' : 'Arrow-chevron-left-in-line'"
+          ></ui-button>
+        }
+      }
+      @else {
+        <ui-button
+          [applicationTheme]="applicationTheme" class="mobile-back-btn" [tooltip]="(('COMMON.BACK') | uiTranslate | async)!"
+          [variant]="'icon-button'"
+          [ariaLabel]="(('COMMON.BACK') | uiTranslate | async)!"
+          (click)="onBack()"
+          [justIcon]="true"
+          [iconName]="applicationTheme === 'classic' ? 'Arrow_left' : 'Arrow-chevron-left-in-line'"
+        ></ui-button>
+      }
+
+      <div class="main-content" [ngClass]="{ 'remove-margin': !showBackButton }">
+        <ng-content select="[content]"></ng-content>
+      </div>
+
+      <div class="right-side">
+        <ng-content select="[right-side]"></ng-content>
+      </div>
+    </div>
+  </div>
+
+</ng-container>