@testgorilla/tgo-ui 2.9.0 → 2.10.1

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

@@ -0,0 +1,103 @@
+import { TemplateRef, Type } from '@angular/core';
+
+export interface TableConfig<T = any> {
+  columns: TableColumn<T>[];
+  pagination?: Pagination;
+  title?: string;
+  width?: number;
+  sort?: Sort;
+  hidePagination?: boolean;
+}
+
+export interface TableConfigWithPagination<T> extends TableConfig<T> {
+  pagination: Pagination;
+}
+
+export interface TableColumn<T = any> {
+  title: string;
+  key: string;
+  widthPerc?: number;
+  minWidthPx?: number;
+  allowMultiline?: boolean;
+  bold?: boolean;
+  showTooltip?: boolean;
+  tooltip?: string;
+  allowSort?: boolean;
+  isSticky?: boolean;
+  headerCellTemplate?: TemplateRef<any>;
+  rowCellTemplate?: TemplateRef<any>;
+  sortHeader?: string;
+  hidden?: boolean;
+  order?: number;
+  fontSize?: '12px' | '14px';
+  field?: string;
+  type?: ColumnType;
+  function?: (v: T) => string;
+  renderer?: (v: T) => ComponentRenderer | string;
+  styles?: ColumnStyles;
+  sortStart?: SortDirection;
+}
+
+export interface Pagination {
+  itemsPerPageOptions: number[];
+  itemsPerPage: number;
+  currentPage: number;
+  totalItems: number;
+}
+
+export type TableData = Record<string, any>[];
+
+export interface ColumnEllipse {
+  index: number;
+  showTooltip: boolean;
+}
+
+export interface Sort {
+  active: string;
+  direction: SortDirection;
+  defaultSortStart?: SortDirection;
+}
+
+export type SortDirection = 'asc' | 'desc' | '';
+
+export interface TableDetailColumn<T, TDetail> {
+  columnDefs: TableColumn<TDetail>[];
+  setDetailRowData: (params: DetailRowDataParams<T, TDetail>) => void;
+}
+
+export interface DetailRowDataParams<T, TDetail> {
+  data: T;
+
+  setDetailDataSource(rowData: TDetail[]): void;
+}
+
+export enum ColumnType {
+  FIELD = 'field',
+  FUNCTION = 'function',
+  RENDERER = 'renderer',
+}
+
+export interface ComponentRenderer {
+  component: Type<any>;
+  inputs?: any;
+  outputs?: { [key: string]: any };
+}
+
+export interface ColumnStyles {
+  alignment?: ColumnAlignment;
+  width?: string;
+  'min-width'?: string;
+  padding?: string;
+}
+
+export enum ColumnAlignment {
+  LEFT = 'left',
+  RIGHT = 'right',
+  CENTER = 'center',
+}
+
+export type DataSource = {
+  [key: string]: any;
+};
+
+export type ScrollSettings = { scrollEnd: boolean, horizontalScroll: boolean, scrollStart: boolean };

package/projects/tgo-canopy-ui/components/tabs/tab.directive.ts

@@ -0,0 +1,33 @@
+import { booleanAttribute, Directive, Host, Input, OnChanges, TemplateRef } from '@angular/core';
+import { TabsComponent } from "./tabs.component";
+import { IconName } from '../icon/icon.model';
+
+@Directive({
+  selector: '[uiTab]'
+})
+export class TabDirective implements OnChanges {
+  @Input({ required: true }) tabName: string;
+  @Input() iconLeft: IconName;
+  @Input() iconRight: IconName;
+  @Input({ transform: booleanAttribute }) disabled: boolean;
+
+  constructor(
+    @Host() private tabsComponent: TabsComponent,
+    private template: TemplateRef<any>,
+  ) {
+  }
+
+  ngOnChanges(): void {
+    this.addTab();
+  }
+
+  private addTab(): void {
+    this.tabsComponent.addTab({
+      tabName: this.tabName,
+      iconLeft: this.iconLeft,
+      iconRight: this.iconRight,
+      disabled: this.disabled,
+      contentTemplateRef: this.template,
+    })
+  }
+}

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

@@ -0,0 +1,19 @@
+<mat-tab-group
+  headerPosition="above"
+  class="tabs-container"
+  [ngClass]="'tabs-type-' + ((isMobile$ | async) ? 'underlined' : type)"
+  [attr.theme]="applicationTheme"
+  [dynamicHeight]="dynamicHeight"
+  [animationDuration]="animationDuration"
+>
+  <mat-tab *ngFor="let tab of tabs" [disabled]="tab.disabled ?? false">
+    <ng-template mat-tab-label>
+      <div class="tab-name" [tabindex]="0">
+        <ui-icon [size]="'24'" [tabindex]="1" class="left-icon" [name]="tab.iconLeft!" *ngIf="tab?.iconLeft"></ui-icon>
+        <span class="label">{{ tab.tabName }}</span>
+        <ui-icon [size]="'24'" [tabindex]="2" class="right-icon" [name]="tab.iconRight!" *ngIf="tab?.iconRight"></ui-icon>
+      </div>
+    </ng-template>
+    <ng-container *ngTemplateOutlet="tab.contentTemplateRef"></ng-container>
+  </mat-tab>
+</mat-tab-group>

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

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TabsComponent } from './tabs.component';
+import { MatTabsModule } from "@angular/material/tabs";
+import { IconComponentModule } from "../icon/icon.component.module";
+import { TabDirective } from './tab.directive';
+
+
+
+@NgModule({
+  declarations: [
+    TabsComponent,
+    TabDirective
+  ],
+  imports: [
+    CommonModule,
+    MatTabsModule,
+    IconComponentModule
+  ],
+  exports: [TabsComponent, TabDirective]
+})
+export class TabsComponentModule { }

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

@@ -0,0 +1,234 @@
+@use "../../theme/variables" as *;
+@use "../../theme/breakpoints-mixin" as *;
+
+
+:host {
+  ::ng-deep .mat-mdc-tab-group, .mat-mdc-tab-nav-bar {
+    --mdc-tab-indicator-active-indicator-color: var(--color);
+    --mat-tab-header-active-label-text-color: var(--color);
+    --mat-tab-header-active-ripple-color: transparent;
+    --mat-tab-header-inactive-ripple-color: var(--color);
+    --mat-tab-header-active-focus-label-text-color: var(--color);
+    --mat-tab-header-active-focus-indicator-color: var(--color);
+  }
+}
+
+::ng-deep .tabs-container {
+  .mdc-tab-indicator__content {
+    border-color: $tgo-petrol-default!important;
+  }
+  .tab-name {
+    display: flex;
+    justify-content: center;
+    align-content: center;
+    color: $tgo-black;
+    outline: unset;
+    font-size: 16px;
+    line-height: 24px;
+    width: 100%;
+
+    &:focus {
+      outline: 1px dashed $tgo-dark;;
+    }
+
+    .left-icon {
+      margin-right: 8px;
+    }
+
+    .right-icon {
+      margin-left: 8px;
+    }
+
+    .left-icon:focus, .right-icon:focus {
+      height: 24px;
+      outline: 1px dashed $tgo-dark;
+    }
+  }
+
+  ::ng-deep .mdc-tab {
+    min-width: 0;
+    padding: 0;
+
+    &:hover {
+      background: $tgo-light;
+    }
+  }
+
+  &.tabs-type-underlined {
+    .tab-name {
+      padding: 16px 24px;
+    }
+
+    .mdc-tab--active .tab-name .label {
+      text-shadow: -0.5px 0 black, 0.5px 0 black;
+    }
+
+
+    ::ng-deep.mat-mdc-tab-header {
+      padding: 0 var(--header-content-padding);
+    }
+
+    ::ng-deep.mdc-tab {
+      height: 64px !important;
+      flex-grow: 0!important;
+      margin-left: 1px;
+    }
+  }
+
+  &.tabs-type-filled {
+    .mdc-tab--active {
+      background-color: $tgo-petrol-90w !important;
+
+      .tab-name .label{
+        text-shadow: -0.5px 0 black, 0.5px 0 black;
+      }
+    }
+    --mat-tab-header-active-ripple-color: var(--color);
+
+    display: flex;
+    flex-direction: row;
+
+    ::ng-deep.mat-mdc-tab-header {
+      padding: var(--header-content-padding) 0;
+    }
+
+    ::ng-deep.mat-mdc-tab-label-container {
+      overflow: auto!important;
+    }
+
+    ::ng-deep.mat-mdc-tab-labels {
+      flex-direction: column;
+      padding-top: 2px;
+    }
+
+    ::ng-deep.mdc-tab {
+
+      &__content, &__text-label {
+        width: 100%;
+      }
+
+      &__text-label {
+        margin: -1px 1px 1px 1px;
+      }
+
+      flex-grow: 0 !important;
+
+      &--active {
+        ::ng-deep.mdc-tab-indicator:after {
+          content: "";
+          position: absolute;
+          left: 0;
+          top: 8px;
+          width: 4px;
+          height: 32px;
+          border-radius: 0 8px 8px 0;
+          background: $tgo-petrol-default;
+        }
+      }
+    }
+
+    ::ng-deep.mdc-tab-indicator {
+      &__content {
+        display: none;
+      }
+    }
+
+    .tab-name {
+      padding: 12px var(--header-content-padding);
+    }
+
+    ::ng-deep.mdc-tab {
+      position: relative;
+      height: 48px !important;
+      min-height: 48px !important;
+    }
+  }
+
+  ::ng-deep.mat-mdc-tab-body-wrapper {
+    width: 100%;
+  }
+
+  ::ng-deep.mat-mdc-tab-body {
+    padding: var(--header-content-padding);
+  }
+
+  @include screen('medium') {
+    ::ng-deep.mat-mdc-tab-body {
+      padding: 24px;
+    }
+
+    ::ng-deep.mat-mdc-tab-header {
+      position: relative;
+      padding: 0 !important;
+
+      .mat-mdc-tab-header-pagination-disabled {
+        visibility: hidden !important;
+      }
+
+      &:after {
+        content: "";
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        height: 1px;
+        background: $grayscale-30;
+      }
+    }
+
+    &.tabs-type-filled {
+      ::ng-deep.mat-mdc-tab-header {
+        padding: 24px 0;
+      }
+    }
+  }
+}
+
+::ng-deep .mat-mdc-tab-group:not(.tabs-type-filled) {
+  &[theme="light"], &[theme="dark"] {
+    --mat-tab-header-inactive-ripple-color: none !important;
+
+    .mdc-tab-indicator .mdc-tab-indicator__content.mdc-tab-indicator__content--underline {
+      border-color: $brand-50 !important;;
+    }
+
+    .mdc-tab:hover {
+      background: none !important;
+      border-bottom: 2px solid $black;
+
+      .mdc-tab-indicator {
+        display: none;
+      }
+    }
+  }
+}
+
+::ng-deep .mat-mdc-tab-group.tabs-type-filled {
+  --mat-tab-header-active-ripple-color: unset !important;
+
+  .tab-name {
+    color: $black;
+  }
+
+  &[theme="light"], &[theme="dark"] {
+    --mat-tab-header-inactive-ripple-color: none !important;
+
+    .mdc-tab-indicator .mdc-tab-indicator__content.mdc-tab-indicator__content--underline {
+      border-color: $brand-50 !important;;
+    }
+
+    .mdc-tab--active {
+
+      background-color: $grayscale-10 !important;
+
+      .mdc-tab-indicator:after {
+        background-color: $brand-50 !important;
+      }
+
+    }
+
+    .mdc-tab:hover {
+      background: $brand-10 !important;
+    }
+  }
+}

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

@@ -0,0 +1,85 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { Component, Input } from '@angular/core';
+import { TabsComponent } from './tabs.component';
+import { Tab, TabsType } from './tabs.model';
+
+@Component({
+  selector: 'app-tab',
+  template: '<div></div>',
+})
+class MockTabComponent {
+  @Input() tabData: Tab;
+}
+
+describe('TabsComponent', () => {
+  let component: TabsComponent;
+  let fixture: ComponentFixture<TabsComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [TabsComponent, MockTabComponent],
+    });
+
+    fixture = TestBed.createComponent(TabsComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('should create the component', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should have default companyColor', () => {
+    expect(component.companyColor).toBe('#46A997');
+  });
+
+  it('should have default type', () => {
+    expect(component.type).toBe('underlined');
+  });
+
+  it('should set type based on input', () => {
+    // @ts-ignore
+    const testType: TabsType = 'boxed';
+    component.type = testType;
+    fixture.detectChanges();
+  });
+
+  it('should add tab', () => {
+    // @ts-ignore
+    const testTab: Tab = { label: 'Test Tab', content: 'Tab Content' };
+    component.addTab(testTab);
+    // @ts-ignore
+    expect(component.tabs.length).toBe(1);
+    // @ts-ignore
+    expect(component.tabs[0]).toBe(testTab);
+  });
+
+  it('should set the correct companyColor using HostBinding', () => {
+    component.companyColor = '#123456'; // Set a specific color
+    fixture.detectChanges(); // Trigger change detection
+
+    const hostElement = fixture.nativeElement as HTMLElement;
+    expect(hostElement.style.getPropertyValue('--color')).toBe('#123456'); // Validate HostBinding
+  });
+
+  it('should have default values for various inputs', () => {
+    expect(component.type).toBe('underlined'); // Default tab type
+    expect(component.animationDuration).toBe(300); // Default animation duration
+    expect(component.headerContentPadding).toBe('32px'); // Default padding
+    expect(component.dynamicHeight).toBe(true); // Default dynamic height
+  });
+
+  it('should set dynamic height based on booleanAttribute transform', () => {
+    component.dynamicHeight = false; // Set dynamic height to false
+    fixture.detectChanges(); // Trigger change detection
+
+    expect(component.dynamicHeight).toBe(false); // Should update the dynamic height
+  });
+
+  it('should set headerContentPadding with HostBinding', () => {
+    component.headerContentPadding = '16px'; // Set a specific padding
+    fixture.detectChanges(); // Trigger change detection
+
+    const hostElement = fixture.nativeElement as HTMLElement;
+    expect(hostElement.style.getPropertyValue('--header-content-padding')).toBe('16px'); // Validate HostBinding
+  });
+});

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

@@ -0,0 +1,73 @@
+import { Meta, moduleMetadata, Story } from '@storybook/angular';
+import { TabsComponent } from './tabs.component';
+import { MatTabsModule } from '@angular/material/tabs';
+import { IconComponentModule } from '../icon/icon.component.module';
+import { TabDirective } from './tab.directive';
+import { transformTheme } from '../../utils/transform-theme';
+import { FileUploadComponent } from '../file-upload/file-upload.component';
+
+export default {
+  title: 'Tabs',
+  component: TabsComponent,
+  decorators: [
+    moduleMetadata({
+      declarations: [TabsComponent, TabDirective],
+      imports: [IconComponentModule, MatTabsModule],
+    }),
+  ],
+} as Meta;
+
+const parameters = {
+  design: {
+    name: 'Figma design',
+    type: 'figma',
+    url: 'https://www.figma.com/file/FHZJ7ViJv6msJA5lJvPRIG/Component-library?type=design&node-id=14118-66284&mode=design&t=p37dwlxYi7siWreq-4',
+  },
+};
+
+const Template: Story = (args, { globals: { theme } }) => {
+  const _theme = transformTheme(theme);
+  return {
+    props: {
+      applicationTheme: _theme,
+      ...args,
+    },
+  };
+};
+Template.args = {};
+
+
+export const Default: Story = {
+  render: (args: any, { globals: { theme } }) => {
+    const _theme = transformTheme(theme);
+    return {
+      template: `
+    <ui-tabs type="${args.type ? args.type : 'underlined'}" applicationTheme="${_theme}">
+      <ng-template uiTab [tabName]="'Tab 1'" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut mauris sit amet ligula tristique interdum eu non sapien. Integer nec turpis vel augue volutpat convallis. Nullam bibendum elit ac ex convallis, a ultricies lacus consequat. Fusce sit amet dapibus ipsum. Proin vel nunc nec justo lacinia rhoncus. Nunc euismod vestibulum tellus, vel vestibulum diam convallis quis. Integer in vehicula ipsum. Duis pulvinar quam a elit interdum, at euismod justo condimentum. Vivamus eu semper dolor. Sed sit amet tristique odio. Mauris ut felis vel mi pharetra cursus. Aenean ullamcorper fringilla lectus, vel facilisis ligula blandit eget.
+      Curabitur eu nisl ac orci condimentum convallis. Sed auctor mi non ex hendrerit, sit amet varius justo malesuada. Aenean euismod felis a dui facilisis, id hendrerit nulla efficitur. Etiam varius massa
+      </ng-template>
+      <ng-template uiTab [tabName]="'Tab 2'">Quisque in justo vel justo commodo fermentum. Morbi eget tincidunt libero. Integer ut velit in felis vehicula ultrices. Nulla facilisi. Praesent vehicula elit id semper accumsan. Phasellus sed tortor sed nulla fermentum cursus in id enim. Ut et aliquam velit. In hac habitasse platea dictumst. Nulla facilisi. Sed sagittis dolor in mi ultricies facilisis. Ut sit amet turpis vel tortor congue posuere. Aenean luctus quam sit amet augue congue, nec fermentum dolor volutpat.</ng-template>
+      <ng-template uiTab [tabName]="'Tab 3'" [iconLeft]="'Level'" [iconRight]="'Test'">Curabitur eu nisl ac orci condimentum convallis. Sed auctor mi non ex hendrerit, sit amet varius justo malesuada. Aenean euismod felis a dui facilisis, id hendrerit nulla efficitur. Etiam varius massa a est eleifend, non scelerisque mauris dictum. Proin vel metus a justo efficitur aliquet nec ut tortor. Integer pulvinar imperdiet velit non aliquam. Fusce nec elit vitae orci facilisis tristique eu vitae dolor. Integer tristique ex at dui facilisis aliquam. Maecenas interdum tortor id aliquam facilisis. Suspendisse tristique vestibulum nulla, id aliquet tortor convallis vel. Vivamus ullamcorper, lectus et feugiat posuere, tellus dolor vulputate tortor, vel lacinia leo libero et nunc.</ng-template>
+    </ui-tabs>
+   `,    };
+  },
+} as Story;
+Default.parameters = parameters;
+
+export const Filled: Story = {
+  render: (args: any, { globals: { theme } }) => {
+    const _theme = transformTheme(theme);
+    return {
+      template: `
+    <ui-tabs type="${args.type ? args.type : 'filled'}" applicationTheme="${_theme}">
+      <ng-template uiTab [tabName]="'Tab 1'" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut mauris sit amet ligula tristique interdum eu non sapien. Integer nec turpis vel augue volutpat convallis. Nullam bibendum elit ac ex convallis, a ultricies lacus consequat. Fusce sit amet dapibus ipsum. Proin vel nunc nec justo lacinia rhoncus. Nunc euismod vestibulum tellus, vel vestibulum diam convallis quis. Integer in vehicula ipsum. Duis pulvinar quam a elit interdum, at euismod justo condimentum. Vivamus eu semper dolor. Sed sit amet tristique odio. Mauris ut felis vel mi pharetra cursus. Aenean ullamcorper fringilla lectus, vel facilisis ligula blandit eget.
+      Curabitur eu nisl ac orci condimentum convallis. Sed auctor mi non ex hendrerit, sit amet varius justo malesuada. Aenean euismod felis a dui facilisis, id hendrerit nulla efficitur. Etiam varius massa
+      </ng-template>
+      <ng-template uiTab [tabName]="'Tab 2'">Quisque in justo vel justo commodo fermentum. Morbi eget tincidunt libero. Integer ut velit in felis vehicula ultrices. Nulla facilisi. Praesent vehicula elit id semper accumsan. Phasellus sed tortor sed nulla fermentum cursus in id enim. Ut et aliquam velit. In hac habitasse platea dictumst. Nulla facilisi. Sed sagittis dolor in mi ultricies facilisis. Ut sit amet turpis vel tortor congue posuere. Aenean luctus quam sit amet augue congue, nec fermentum dolor volutpat.</ng-template>
+      <ng-template uiTab [tabName]="'Tab 3'" [iconLeft]="'Level'" [iconRight]="'Test'">Curabitur eu nisl ac orci condimentum convallis. Sed auctor mi non ex hendrerit, sit amet varius justo malesuada. Aenean euismod felis a dui facilisis, id hendrerit nulla efficitur. Etiam varius massa a est eleifend, non scelerisque mauris dictum. Proin vel metus a justo efficitur aliquet nec ut tortor. Integer pulvinar imperdiet velit non aliquam. Fusce nec elit vitae orci facilisis tristique eu vitae dolor. Integer tristique ex at dui facilisis aliquam. Maecenas interdum tortor id aliquam facilisis. Suspendisse tristique vestibulum nulla, id aliquet tortor convallis vel. Vivamus ullamcorper, lectus et feugiat posuere, tellus dolor vulputate tortor, vel lacinia leo libero et nunc.</ng-template>
+    </ui-tabs>
+   `,
+    };
+  },
+} as Story;
+Filled.parameters = parameters;

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

@@ -0,0 +1,79 @@
+import { booleanAttribute, Component, HostBinding, Inject, Input, Optional } from '@angular/core';
+import { Tab, TabsType } from "./tabs.model";
+import { ApplicationTheme } from "../../models/application-theme.model";
+import { IS_MOBILE_TOKEN } from '../../providers/is-mobile';
+import { Observable } from 'rxjs';
+
+@Component({
+  selector: 'ui-tabs',
+  templateUrl: './tabs.component.html',
+  styleUrls: ['./tabs.component.scss']
+})
+export class TabsComponent {
+  /**
+   * Color of the Tabs.
+   * Defaults to Test Gorilla primary color.
+   *
+   * @type {string}
+   * @memberof TabsComponent
+   */
+  @HostBinding('style.--color')
+  @Input() companyColor = '#46A997';
+  /**
+   * Type the Tabs.
+   * Defaults underlined.
+   *
+   * @type {TabsType}
+   * @memberof TabsComponent
+   */
+  @Input() type: TabsType = 'underlined';
+
+  /**
+   * Animation duration when switching tabs
+   *
+   * @type {number}
+   * @memberof TabsComponent
+   */
+  @Input() animationDuration = 300;
+
+  /**
+   * Sets the padding for content and header
+   *
+   * @type {number}
+   * @memberof TabsComponent
+   */
+  @HostBinding('style.--header-content-padding')
+  @Input({ transform: (value: number): string => value + 'px' })
+  headerContentPadding = '32px';
+
+  /**
+   * Sets the dynamic height of the tab
+   * @type {boolean}
+   * @memberof TabsComponent
+   */
+  @Input({transform: booleanAttribute}) dynamicHeight = true;
+
+  /**
+   *
+   * Defines the application theme
+   *
+   * @type {ApplicationTheme}
+   * @memberof TabsComponent
+   */
+  @Input() applicationTheme: ApplicationTheme = 'light';
+
+  protected tabs: Tab[] = [];
+
+  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;
+    }
+  }
+
+  addTab(tab: Tab): void {
+    this.tabs.push(tab);
+  }
+}