@testgorilla/tgo-ui 2.11.1 → 2.11.2

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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