@testgorilla/tgo-ui 2.11.0 → 2.11.1

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

@@ -0,0 +1,58 @@
+import { Meta, moduleMetadata, Story } 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";
+
+export default {
+  title: 'Overflow menu',
+  component: OverflowMenuComponent,
+  decorators: [
+    moduleMetadata({
+      declarations: [OverflowMenuComponent],
+      imports: [IconComponentModule, ButtonComponentModule, MatMenuModule, BrowserAnimationsModule],
+    }),
+  ],
+} as Meta;
+
+const Template: Story = (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',
+      value: 'Edit value',
+    },
+    {
+      icon: 'Copy',
+      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,88 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter, Inject,
+  Input,
+  OnInit,
+  Optional,
+  Output,
+  ViewEncapsulation
+} from '@angular/core';
+import { IconName } from '../icon/icon.model';
+import { OverflowMenuButtonsType } from './overflow-menu.model';
+import { ApplicationTheme } from "../../models/application-theme.model";
+
+@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;
+
+  @Output() selectItem: EventEmitter<string> = new EventEmitter<string>();
+
+  constructor(
+    @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme,
+  ) {
+    if (defaultAppTheme) {
+      this.applicationTheme = defaultAppTheme;
+    }
+  }
+
+  ngOnInit(): void {}
+
+  onSelectItem(event: Event, value: string) {
+    if (!!value) {
+      this.selectItem.emit(value);
+    }
+  }
+}

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

@@ -0,0 +1,11 @@
+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>;
+};

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

@@ -0,0 +1,35 @@
+<ng-container>
+  <div class="page-header-container">
+    <div class="page-header-content">
+      <ng-container *ngIf="!(isMobile$ | async) else mobile">
+        <ui-button
+          [applicationTheme]="applicationTheme"
+          *ngIf="showBackButton"
+          (click)="onBack()"
+          [variant]="'ghost'"
+          [justIcon]="true"
+          [iconName]="applicationTheme === 'classic' ? 'Arrow_left' : 'Arrow-chevron-left-in-line'"
+        ></ui-button>
+      </ng-container>
+
+      <ng-template #mobile>
+        <ui-button
+          [applicationTheme]="applicationTheme" class="mobile-back-btn" [tooltip]="('COMMON.BACK') | uiTranslate : language"
+          [variant]="'icon-button'"
+          (click)="onBack()"
+          [justIcon]="true"
+          [iconName]="applicationTheme === 'classic' ? 'Arrow_left' : 'Arrow-chevron-left-in-line'"
+        ></ui-button>
+      </ng-template>
+
+      <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>

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

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { PageHeaderComponent } from './page-header.component';
+import { ButtonComponentModule } from '../button/button.component.module';
+import { UiTranslatePipe } from '../../pipes/ui-translate.pipe';
+
+@NgModule({
+  declarations: [PageHeaderComponent],
+  imports: [CommonModule, ButtonComponentModule, UiTranslatePipe],
+  exports: [PageHeaderComponent],
+})
+export class PageHeaderModule {}

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

@@ -0,0 +1,61 @@
+@use '../../theme/variables' as *;
+@use '../../theme/breakpoints-mixin' as *;
+
+.page-header-container {
+  border-bottom: 1px solid $tgo-medium;
+
+  .page-header-content {
+    display: flex;
+    flex-direction: row;
+    padding: 16px 64px;
+    max-width: 1312px;
+    min-height: 48px;
+    .main-content {
+      margin: 0 16px 0 24px;
+
+      &.remove-margin {
+        margin-left: 0;
+      }
+    }
+
+    .desktop-back-btn {
+      margin-right: 24px;
+    }
+
+    @include screen('medium') {
+      padding: 8px 16px;
+      max-width: unset;
+
+      .main-content {
+        width: 100%;
+        margin: 0 0 0 16px;
+
+        .content {
+          width: 100%;
+        }
+      }
+
+      .right-side {
+        display: none;
+      }
+    }
+
+    .mobile-back-btn {
+      top: -10px;
+      position: relative;
+    }
+
+    .right-side {
+      margin-left: auto;
+    }
+  }
+}
+
+
+:host {
+  &[theme="dark"], &[theme="light"] {
+    .page-header-container {
+      border-color: $grayscale-30;
+    }
+  }
+}

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

@@ -0,0 +1,34 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PageHeaderComponent } from './page-header.component';
+import { NO_ERRORS_SCHEMA } from "@angular/core";
+
+describe('PageHeaderComponent', () => {
+  let component: PageHeaderComponent;
+  let fixture: ComponentFixture<PageHeaderComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [PageHeaderComponent],
+      schemas: [NO_ERRORS_SCHEMA]
+    });
+    fixture = TestBed.createComponent(PageHeaderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should emit onBack event when back() is called', () => {
+    let emitted = false;
+    component.back.subscribe(() => {
+      emitted = true;
+    });
+
+    // @ts-ignore
+    component.onBack();
+    expect(emitted).toBe(true);
+  });
+});

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

@@ -0,0 +1,56 @@
+import { Meta, moduleMetadata, Story } from '@storybook/angular';
+import { PageHeaderComponent } from './page-header.component';
+import { ButtonComponentModule } from '../button/button.component.module';
+import { CommonModule } from '@angular/common';
+import { IconComponentModule } from '../icon/icon.component.module';
+import { AvatarComponentModule } from '../avatar/avatar.component.module';
+import { UiTranslatePipe } from '../../pipes/ui-translate.pipe';
+import { FileUploadComponent } from "../file-upload/file-upload.component";
+import { transformTheme } from "../../utils/transform-theme";
+
+export default {
+  title: 'Page Header',
+  component: PageHeaderComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [
+        CommonModule,
+        ButtonComponentModule,
+        IconComponentModule,
+        AvatarComponentModule,
+        ButtonComponentModule,
+        UiTranslatePipe,
+      ],
+      declarations: [PageHeaderComponent],
+    }),
+  ],
+} as Meta;
+
+export const HeaderWithTemplate: Story = {
+  render: (args: FileUploadComponent, { globals: { theme } }) => {
+    const _theme = transformTheme(theme);
+    return {
+      template: `<ui-page-header applicationTheme="${_theme}">
+      <div content style="display: flex">
+        <ui-avatar style="margin-right: 16px" content size="medium" imageUrl="/images/Avatar.png"></ui-avatar>
+        <div style="display: flex; flex-direction: column; justify-content: space-between">
+          <div style="font-weight: bold; font-size: 20px">Title</div>
+          <div>Text</div>
+        </div>
+      </div>
+      <div right-side style="display: flex">
+        <ui-button applicationTheme="${_theme}" style="margin-right: 16px" variant="ghost" label="Button"></ui-button>
+        <ui-button applicationTheme="${_theme}" label="Button"></ui-button>
+      </div>
+    </ui-page-header>`,
+    }
+  }
+} as Story
+
+HeaderWithTemplate.parameters = {
+  design: {
+    name: 'Figma design',
+    type: 'figma',
+    url: 'https://www.figma.com/file/FHZJ7ViJv6msJA5lJvPRIG/Component-library?type=design&node-id=13531-85383&mode=design&t=5JN4NE7oIXs92lC4-4',
+  },
+};

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

@@ -0,0 +1,64 @@
+import { booleanAttribute, Component, EventEmitter, HostBinding, Inject, Input, Optional, Output } from '@angular/core';
+import { IS_MOBILE_TOKEN } from '../../providers/is-mobile';
+import { Observable } from 'rxjs';
+import { LanguageService } from '../../utils/localization/language.service';
+import { ApplicationTheme } from "../../models/application-theme.model";
+
+@Component({
+  selector: 'ui-page-header',
+  templateUrl: './page-header.component.html',
+  styleUrls: ['./page-header.component.scss'],
+})
+export class PageHeaderComponent {
+  /**
+   * Flag to determine whether the "Back" button should be displayed.
+   * @default true
+   * @memberof PageHeaderComponent
+   */
+  @Input({ transform: booleanAttribute }) showBackButton = true;
+
+  /**
+   * The language to be used
+   * @property language
+   * @type {Language}
+   * @memberof PageHeaderComponent
+   */
+  @Input() language = LanguageService.defaultLanguage;
+
+  /**
+   * Back button tooltip for mobile variation
+   * @property tooltip
+   * @memberof PageHeaderComponent
+   */
+  @Input() tooltip = 'COMMON.BACK';
+
+  /**
+   *
+   * Defines the application theme
+   *
+   * @type {ApplicationTheme}
+   * @memberof PageHeaderComponent
+   */
+  @HostBinding('attr.theme')
+  @Input()
+  applicationTheme: ApplicationTheme = 'light';
+
+  /**
+   * Event triggered when the "Back" button is clicked.
+   * @memberof PageHeaderComponent
+   */
+  @Output() back = new EventEmitter<void>();
+
+  constructor(
+    @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme,
+    @Inject(IS_MOBILE_TOKEN) protected readonly isMobile$: Observable<boolean>
+  ) {
+    if (defaultAppTheme) {
+      this.applicationTheme = defaultAppTheme;
+    }
+  }
+
+  protected onBack(): void {
+    this.back.emit();
+  }
+}

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

@@ -0,0 +1,10 @@
+<mat-paginator
+  [disabled]="disabled"
+  [length]="length"
+  [pageSize]="pageSize"
+  [pageSizeOptions]="pageSizeOptions"
+  [attr.theme]="applicationTheme"
+  [selectConfig]="selectConfig"
+  [color]="'accent'"
+  (page)="onPaginatorChange($event)"
+></mat-paginator>

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

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { PaginatorComponent } from './paginator.component';
+import { MatPaginatorModule } from '@angular/material/paginator';
+
+@NgModule({
+  declarations: [PaginatorComponent],
+  imports: [CommonModule, MatPaginatorModule],
+  exports: [PaginatorComponent],
+})
+export class PaginatorComponentModule {}

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

@@ -0,0 +1,159 @@
+@use '../../theme/variables' as *;
+
+$font-size: 14px;
+$main-color: rgba(233, 240, 241, 0.5);
+
+.flex-center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+::ng-deep.mat-mdc-paginator {
+  border-radius: 0 0 8px 8px;
+
+  .mat-mdc-paginator-range-actions {
+    height: 40px !important;
+    margin-left: 16px !important;
+
+    .mat-mdc-paginator-range-label {
+      margin: 0 16px 0 0;
+    }
+
+    button {
+      &[disabled="true"] svg {
+        fill: $tgo-grey !important;
+      }
+
+      width: 40px !important;
+      padding: 0;
+      @extend .flex-center;
+
+      svg {
+        height: 24px !important;
+        width: 24px !important;
+        fill: $tgo-dark !important;
+      }
+    }
+  }
+
+  .mat-mdc-select-arrow-wrapper {
+    width: 24px;
+    @extend .flex-center;
+  }
+
+  .mat-mdc-form-field-infix {
+    padding: 4px 0 !important;
+    min-height: 28px !important;
+  }
+
+  .mat-mdc-paginator-page-size-select {
+    width: 64px;
+  }
+
+  .mat-mdc-text-field-wrapper {
+    height: 32px!important;
+    padding: 0 8px;
+    width: 64px;
+  }
+
+  .mat-mdc-paginator-outer-container {
+    border-radius: 0 0 8px 8px;
+    font-weight: 400;
+    font-size: $font-size;
+    padding: 8px 24px;
+    line-height: 20px;
+    color: $tgo-black;
+
+    .mat-mdc-paginator-container {
+      padding: 0;
+
+      .mat-mdc-select-value-text {
+        font-size: $font-size;
+      }
+
+      .mat-mdc-paginator-range-actions {
+        height: 100%;
+
+        button {
+          height: 100%;
+          width: 70px;
+          border-radius: 0;
+        }
+      }
+    }
+  }
+
+  &[theme="dark"], &[theme="light"] {
+    .mdc-icon-button__ripple {
+      display: none;
+    }
+
+    .mat-mdc-paginator-range-actions {
+      .mdc-icon-button {
+        border-radius: 50% !important;
+
+        &:disabled svg {
+          fill: $grayscale-40 !important;
+        }
+
+        &:focus {
+          &.cdk-focused {
+            padding: 1px;
+            border: 1px dashed $tgo-dark;
+            outline: 0;
+          }
+        }
+
+        &:active {
+          transform: scale(0.98);
+        }
+
+        .mat-mdc-button-touch-target {
+          width: 40px;
+          height: 40px;
+        }
+      }
+    }
+  }
+
+  &[theme="light"] {
+    .mat-mdc-paginator-range-actions .mdc-icon-button {
+      color: $black !important;
+
+      svg {
+        fill: $black !important;
+      }
+
+      &:hover {
+        background-color: $grayscale-20;
+      }
+
+      &:focus {
+        &.cdk-focused {
+          border-color: $grayscale-50;
+        }
+      }
+    }
+  }
+
+  &[theme="dark"] {
+    .mat-mdc-paginator-range-actions .mdc-icon-button {
+      color: $tgo-white !important;
+
+      svg {
+        fill: $tgo-white !important;
+      }
+
+      &:hover {
+        background-color: $grayscale-50;
+      }
+
+      &:focus {
+        &.cdk-focused {
+          border-color: $grayscale-20;
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,29 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PaginatorComponent } from './paginator.component';
+import { NO_ERRORS_SCHEMA } from "@angular/core";
+
+describe('PaginatorComponent', () => {
+  let component: PaginatorComponent;
+  let fixture: ComponentFixture<PaginatorComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [PaginatorComponent],
+      schemas: [NO_ERRORS_SCHEMA],
+    });
+    fixture = TestBed.createComponent(PaginatorComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should have default values for pageSizeOptions, length, and defaultPageSize', () => {
+    expect(component.pageSizeOptions).toEqual([10, 25, 50]);
+    expect(component.length).toEqual(0);
+    expect(component.pageSize).toEqual(25);
+  });
+});

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

@@ -0,0 +1,36 @@
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { Meta, moduleMetadata, Story } from '@storybook/angular';
+import { PaginatorComponent } from './paginator.component';
+import { transformTheme } from "../../utils/transform-theme";
+
+export default {
+  title: 'Paginator',
+  component: PaginatorComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [BrowserAnimationsModule, MatPaginatorModule],
+      declarations: [PaginatorComponent],
+    }),
+  ],
+} 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=13132-16626&mode=design&t=VGuLMZFB3q1OtVZa-4',
+  },
+};