@testgorilla/tgo-ui 2.10.1 → 2.10.2

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

@@ -1,425 +0,0 @@
-import { Meta, moduleMetadata, Story } from '@storybook/angular';
-import { TableComponent } from './table.component';
-import { MatTableModule } from '@angular/material/table';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { SkeletonComponent } from '../skeleton/skeleton.component';
-import { PaginatorComponentModule } from '../paginator/paginator.component.module';
-import { MatSortModule } from '@angular/material/sort';
-import { ButtonComponentModule } from '../button/button.component.module';
-import { AvatarComponentModule } from '../avatar/avatar.component.module';
-import { BadgeComponentModule } from '../badge/badge.component.module';
-import { EllipseTextDirective } from '../../directives/ellipse-text.directive';
-import { transformTheme } from '../../utils/transform-theme';
-import { FileUploadComponent } from '../file-upload/file-upload.component';
-import { SentenceCasePipe } from './sentence-case.pipe';
-import { DataPropertyGetterPipe } from '../../pipes/data-property-getter';
-import { DynamicComponentDirective } from '../deprecated-table/directives/dynamic-component.directive';
-import { IconComponentModule } from '../icon/icon.component.module';
-import { ColumnType, DetailRowDataParams, TableDetailColumn } from './table.model';
-
-export default {
-  title: 'Table',
-  component: TableComponent,
-  decorators: [
-    moduleMetadata({
-      declarations: [TableComponent, SentenceCasePipe],
-      imports: [
-        MatTableModule,
-        MatTooltipModule,
-        SkeletonComponent,
-        PaginatorComponentModule,
-        MatSortModule,
-        ButtonComponentModule,
-        AvatarComponentModule,
-        BadgeComponentModule,
-        EllipseTextDirective,
-        IconComponentModule,
-        DataPropertyGetterPipe,
-        DynamicComponentDirective
-      ],
-    }),
-  ],
-} as Meta;
-
-
-const EXPANDABLE_DETAIL_COLUMNS: TableDetailColumn<any, any> = {
-  columnDefs: [
-    {
-      title: 'branch',
-      type: ColumnType.FIELD,
-      key: 'branch',
-    },
-    {
-      title: 'startWork',
-      type: ColumnType.FIELD,
-      key: 'startWork',
-    },
-    {
-      title: 'company',
-      type: ColumnType.FIELD,
-      key: 'company',
-    },
-    {
-      title: 'skill',
-      type: ColumnType.FIELD,
-      key: 'skill',
-    },
-  ],
-  setDetailRowData: (params: DetailRowDataParams<any, any>) => {
-    params.setDetailDataSource(params.data.details);
-  },
-};
-
-const Template: Story = (args, { globals: { theme } }) => {
-  const _theme = transformTheme(theme);
-  return {
-    props: {
-      applicationTheme: _theme,
-      ...args,
-    },
-  };
-};
-
-const tableData = [
-  {
-    name: 'Jason',
-    email: 'jason@expamle.com',
-    phoneNumber: '(555) 123-4567',
-    date: '2020-10-03',
-    details: [{ branch: 'Programmer', startWork: "2020-09-03", company: "Delta", skill: "Junior" }]
-  },
-  {
-    name: 'Jack',
-    email: 'jack@expamle.com',
-    phoneNumber: '(555) 123-4567',
-    date: '2023-05-03',
-    details: [{ branch: 'Programmer', startWork: "2023-05-03", company: "Delta", skill: "Junior" }]
-  },
-  {
-    name: 'Matteo', email: 'matteo@expamle.com', phoneNumber: '(555) 123-4567', date: '2023-12-01',
-    details: [{ branch: 'Programmer', startWork: "2021-09-03", company: "Delta", skill: "Junior" }]
-  },
-  {
-    name: 'Lee', email: 'lee@expamle.com', phoneNumber: '(555) 123-4567', date: '2022-09-05',
-    details: [{ branch: 'Programmer', startWork: "2022-03-09", company: "Delta", skill: "Middle" }]
-  },
-  {
-    name: 'Richard', email: 'richard@expamle.com', phoneNumber: '(555) 123-4567', date: '2020-10-03',
-    details: [{ branch: 'Programmer', startWork: "2020-09-03", company: "Delta", skill: "Senior" }]
-  },
-];
-
-const parameters = {
-  design: {
-    name: 'Figma design',
-    type: 'figma',
-    url: 'https://www.figma.com/file/FHZJ7ViJv6msJA5lJvPRIG/Component-library?type=design&node-id=13132-14147&mode=design&t=VGuLMZFB3q1OtVZa-4',
-  },
-};
-
-export const Default = Template.bind({});
-Default.args = {
-  config: {
-    title: 'Table name',
-    columns: [
-      {
-        title: 'Name',
-        key: 'name',
-      },
-      {
-        title: 'Email',
-        key: 'email',
-      },
-      {
-        title: 'Phone Number',
-        key: 'phoneNumber',
-      },
-      {
-        title: 'Date',
-        key: 'date',
-      },
-    ],
-  },
-  data: tableData,
-};
-
-Default.parameters = parameters;
-
-export const StickyColumn = Template.bind({});
-StickyColumn.args = {
-  config: {
-    title: 'Table name',
-    columns: [
-      {
-        title: 'Name',
-        key: 'name',
-        isSticky: true,
-      },
-      {
-        title: 'Email',
-        key: 'email',
-      },
-      {
-        title: 'Phone Number',
-        key: 'phoneNumber',
-      },
-      {
-        title: 'Date',
-        key: 'date',
-        isSticky: true,
-      },
-    ],
-  },
-  data: tableData,
-};
-
-StickyColumn.parameters = parameters;
-
-export const BoldColumn = Template.bind({});
-BoldColumn.args = {
-  config: {
-    title: 'Table name',
-    columns: [
-      {
-        title: 'Name',
-        key: 'name',
-      },
-      {
-        title: 'Email',
-        key: 'email',
-      },
-      {
-        title: 'Phone Number',
-        key: 'phoneNumber',
-        bold: true,
-      },
-      {
-        title: 'Date',
-        key: 'date',
-      },
-    ],
-  },
-  data: tableData,
-};
-
-BoldColumn.parameters = parameters;
-
-export const SkeletonLoading = Template.bind({});
-SkeletonLoading.args = {
-  loading: true,
-  config: {
-    title: 'Table name',
-    columns: [
-      {
-        title: 'Name',
-        key: 'name',
-      },
-      {
-        title: 'Email',
-        key: 'email',
-      },
-      {
-        title: 'Phone Number',
-        key: 'phoneNumber',
-      },
-      {
-        title: 'Date',
-        key: 'date',
-      },
-    ],
-  },
-  data: tableData,
-};
-
-SkeletonLoading.parameters = parameters;
-
-export const Sortable = Template.bind({});
-Sortable.args = {
-  config: {
-    title: 'Table name',
-    sort: {
-      active: 'email',
-      direction: 'desc',
-    },
-    columns: [
-      {
-        title: 'Name',
-        key: 'name',
-        allowSort: true,
-      },
-      {
-        title: 'Email',
-        key: 'email',
-        allowSort: true,
-      },
-      {
-        title: 'Phone Number',
-        key: 'phoneNumber',
-      },
-      {
-        title: 'Date',
-        key: 'date',
-        allowSort: true,
-      },
-    ],
-  },
-  data: tableData,
-};
-
-Sortable.parameters = parameters;
-
-export const WithCustomContent: Story = {
-  render: (args: FileUploadComponent, { globals: { theme } }) => {
-    const _theme = transformTheme(theme);
-    return {
-      template: `
-      <ng-template #rowTpl let-data>
-        <ui-avatar size="medium" applicationTheme="${_theme}" [name]="data.name"></ui-avatar>
-      </ng-template>
-      <ui-table
-        applicationTheme="${_theme}"
-       [config]="
-        {title: 'Table name',
-          columns: [
-            {
-              title: 'Name',
-              key: 'name',
-              rowCellTemplate: rowTpl,
-            },
-            {
-              title: 'Email',
-              key: 'email',
-            },
-            {
-              title: 'Phone Number',
-              key: 'phoneNumber',
-            },
-            {
-              title: 'Date',
-              key: 'date',
-            },
-          ]
-        }"
-        [data]="[
-          { name: 'Jason', email: 'jason@expamle.com', phoneNumber: '(555) 123-4567', date: '2020-10-03' },
-          { name: 'Jack', email: 'jack@expamle.com', phoneNumber: '(555) 123-4567', date: '2023-05-03' },
-          { name: 'Matteo', email: 'matteo@expamle.com', phoneNumber: '(555) 123-4567', date: '2023-12-01' },
-          { name: 'Lee', email: 'lee@expamle.com', phoneNumber: '(555) 123-4567', date: '2022-09-05' },
-          { name: 'Richard', email: 'richard@expamle.com', phoneNumber: '(555) 123-4567', date: '2020-10-03' },
-        ]"
-      ></ui-table>
-    `,
-    };
-  },
-} as Story;
-
-WithCustomContent.parameters = parameters;
-
-export const WithCustomHeader: Story = {
-  render: (args: FileUploadComponent, { globals: { theme } }) => {
-    const _theme = transformTheme(theme);
-    return {
-      template: `
-    <ng-template #rowTpl let-data>
-      <ui-badge applicationTheme="${_theme}" [label]="data"></ui-badge>
-    </ng-template>
-    <ui-table
-    applicationTheme="${_theme}"
-     [config]="
-      {title: 'Table name',
-        columns: [
-          {
-            title: 'Name',
-            key: 'name',
-            headerCellTemplate: rowTpl,
-          },
-          {
-            title: 'Email',
-            key: 'email',
-          },
-          {
-            title: 'Phone Number',
-            key: 'phoneNumber',
-          },
-          {
-            title: 'Date',
-            key: 'date',
-          },
-        ]
-      }"
-      [data]="[
-        { name: 'Jason', email: 'jason@expamle.com', phoneNumber: '(555) 123-4567', date: '2020-10-03' },
-        { name: 'Jack', email: 'jack@expamle.com', phoneNumber: '(555) 123-4567', date: '2023-05-03' },
-        { name: 'Matteo', email: 'matteo@expamle.com', phoneNumber: '(555) 123-4567', date: '2023-12-01' },
-        { name: 'Lee', email: 'lee@expamle.com', phoneNumber: '(555) 123-4567', date: '2022-09-05' },
-        { name: 'Richard', email: 'richard@expamle.com', phoneNumber: '(555) 123-4567', date: '2020-10-03' },
-      ]"
-    ></ui-table>
-  `,
-    };
-  },
-} as Story;
-
-WithCustomHeader.parameters = parameters;
-
-export const Expandable = Template.bind({});
-Expandable.args = {
-  tableDetails: true,
-  tableDetailColumns: EXPANDABLE_DETAIL_COLUMNS,
-  config: {
-    title: 'Table name',
-    sort: {
-      active: 'email',
-      direction: 'desc',
-    },
-    columns: [
-      {
-        title: 'Name',
-        key: 'name',
-      },
-      {
-        title: 'Email',
-        key: 'email',
-      },
-      {
-        title: 'Phone Number',
-        key: 'phoneNumber',
-      },
-      {
-        title: 'Date',
-        key: 'date',
-      },
-    ],
-  },
-  data: tableData,
-};
-
-Expandable.parameters = parameters;
-
-export const Selected = Template.bind({});
-Selected.args = {
-  config: {
-    title: 'Table name',
-    columns: [
-      {
-        title: 'Name',
-        key: 'name',
-      },
-      {
-        title: 'Email',
-        key: 'email',
-      },
-      {
-        title: 'Phone Number',
-        key: 'phoneNumber',
-      },
-      {
-        title: 'Date',
-        key: 'date',
-      },
-    ],
-  },
-  data: tableData.map((v, i) => i === 1 ? { ...v, selected: true } : v),
-};
-
-Selected.parameters = parameters;

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

@@ -1,235 +0,0 @@
-import {
-  AfterViewInit,
-  ChangeDetectionStrategy,
-  Component,
-  DestroyRef,
-  ElementRef,
-  EventEmitter,
-  Inject,
-  Input,
-  OnChanges,
-  Optional,
-  Output,
-  SimpleChanges,
-  ViewChild,
-} from '@angular/core';
-import {
-  ColumnEllipse,
-  ColumnType,
-  DataSource,
-  Pagination,
-  ScrollSettings,
-  TableColumn,
-  TableConfig,
-  TableConfigWithPagination,
-  TableData,
-  TableDetailColumn,
-} from './table.model';
-import { PageEvent } from '@angular/material/paginator';
-import { ApplicationTheme } from '../../models/application-theme.model';
-import { sortByOrder } from '../../utils/table.utils';
-import { MatTableDataSource } from '@angular/material/table';
-import { animate, state, style, transition, trigger } from '@angular/animations';
-import { Sort } from '@angular/material/sort';
-import { BehaviorSubject, fromEvent, Observable } from 'rxjs';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { IS_MOBILE_TOKEN } from '../../providers/is-mobile';
-
-@Component({
-  selector: 'ui-table',
-  templateUrl: './table.component.html',
-  styleUrls: ['./table.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  animations: [
-    trigger('expandDetail', [
-      state('collapsed, void', style({ height: '0px' })),
-      state('expanded', style({ height: '*' })),
-      transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
-      transition('expanded <=> void', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
-    ]),
-  ],
-})
-export class TableComponent <T extends DataSource, TDetail extends DataSource> implements OnChanges, AfterViewInit {
-  /**
-   * Table configuration
-   *
-   * @type {TableConfig}
-   * @memberof TableComponent
-   */
-  @Input({ required: true }) set config(config: TableConfig<T>) {
-    config.pagination = config.pagination ?? this.defaultPaginationConfig;
-
-    this.tableConfig = config as TableConfigWithPagination<T>;
-
-    this.columnsTooltipState = config.columns.map((column, index) => ({
-      index,
-      showTooltip: column.showTooltip ?? false,
-    }));
-    this.displayedColumns = sortByOrder<T>(config.columns.filter(column => !column.hidden)).map(column => column.key);
-  }
-
-  /**
-   * Input property for providing the table data.
-   *
-   * @type {TableData}
-   * @memberof TableComponent
-   */
-  @Input() set data(tableData: TableData) {
-    this.tableData = tableData;
-    this.sourceData = tableData;
-  }
-
-  /**
-   * Input property indicating whether the table is in a loading state.
-   *
-   * @type {boolean}
-   * @memberof TableComponent
-   * @default false
-   */
-  @Input() loading = false;
-
-  /**
-   *
-   * Defines the application theme
-   * @type {ApplicationTheme}
-   * @memberof TableComponent
-   */
-  @Input() applicationTheme: ApplicationTheme = 'light';
-
-  /**
-   * Data structure to select which columns should be rendered and their capabilities
-   *
-   * @type {TableDetailColumn}
-   * @memberof TableComponent
-   */
-  @Input() tableDetailColumns: TableDetailColumn<T, TDetail>;
-  @Input() tableDetails = false;
-
-  /**
-   * Disable border radius for table
-   *
-   * @type {boolean}
-   * @memberof TableComponent
-   */
-  @Input() disableBorderRadius = false;
-
-  @Output() onRowClickEvent: EventEmitter<any> = new EventEmitter<any>();
-  @Output() onDetailRowClickEvent: EventEmitter<any> = new EventEmitter<any>();
-  @Output() paginatorChange = new EventEmitter<PageEvent>();
-  @Output() sortChange = new EventEmitter<Sort>();
-
-  @ViewChild('table') table: ElementRef;
-
-  protected tableData: TableData;
-  protected sourceData: TableData;
-  protected columnsTooltipState: ColumnEllipse[] = [];
-  protected tableConfig: TableConfigWithPagination<T>;
-  protected displayedColumns: string[] = [];
-  protected columnsDetailToDisplay: string[] = [];
-  protected skeletonStyleConfig = {
-    background: '#F6F6F6',
-    'border-radius': '4px',
-    height: '24px',
-  };
-  protected dataSourceDetail = new MatTableDataSource<any>([]);
-  protected elementDetail: any;
-  protected readonly DataType = ColumnType;
-  protected scrollSettings$ = new BehaviorSubject<ScrollSettings>({ scrollEnd: false, horizontalScroll: false, scrollStart: false });
-
-  constructor(
-    @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme,
-    private destroyRef: DestroyRef,
-    @Inject(IS_MOBILE_TOKEN) protected readonly isMobile$: Observable<boolean>
-  ) {
-    if (defaultAppTheme) {
-      this.applicationTheme = defaultAppTheme;
-    }
-  }
-
-  ngOnInit() {
-    if (this.applicationTheme !== 'classic') {
-      this.skeletonStyleConfig.background = '#F4F4F4';
-    }
-    document.body.setAttribute('theme', this.applicationTheme);
-
-    if (this.tableDetailColumns) {
-      this.columnsDetailToDisplay = this.tableDetailColumns.columnDefs.map(
-        (tableColumn: TableColumn<TDetail>) => tableColumn.title
-      );
-    }
-  }
-
-  ngAfterViewInit() {
-    this.hasTableScroll();
-    fromEvent(this.table.nativeElement, 'scroll')
-      .pipe(takeUntilDestroyed(this.destroyRef))
-      .subscribe(() => this.hasTableScroll());
-  }
-
-  ngOnChanges(changes: SimpleChanges): void {
-    if (changes['tableConfig'] && changes['tableConfig'].currentValue) {
-      this.onSortChange(changes['tableConfig'].currentValue.sort);
-    }
-  }
-
-  hasTableScroll(): void {
-    const table = this.table.nativeElement;
-    const horizontalScroll = table.scrollWidth > table.clientWidth;
-    const scrollEnd = table.scrollLeft + table.clientWidth >= table.scrollWidth;
-    this.scrollSettings$.next({
-      scrollStart: !table.scrollLeft,
-      scrollEnd,
-      horizontalScroll,
-    });
-  }
-
-  protected onPaginatorChange(event: PageEvent): void {
-    this.paginatorChange.emit(event);
-  }
-
-  protected onChangeColumnSize(columnIndex: number, showTooltip: boolean): void {
-    this.columnsTooltipState = this.columnsTooltipState.map(column => {
-      if (column.index === columnIndex) {
-        column.showTooltip = showTooltip;
-      }
-      return column;
-    });
-  }
-
-  protected onSortChange(sortState: Sort): void {
-    this.sortChange.emit(sortState);
-  }
-
-  protected onRowClick(rowParams: any): void {
-    this.onRowClickEvent.emit(rowParams);
-  }
-
-  protected onDetailRowClick(rowParams: any): void {
-    this.onDetailRowClickEvent.emit(rowParams);
-  }
-
-  protected toggleRow(element: T): void {
-    if (this.tableDetails) {
-      this.elementDetail = this.elementDetail === element ? null : element;
-      if (this.elementDetail) {
-        this.tableDetailColumns.setDetailRowData({
-          data: element,
-          setDetailDataSource: this.setTableDetailDataSource.bind(this),
-        });
-      }
-    }
-  }
-
-  private setTableDetailDataSource(rowData: TDetail[]): void {
-    this.dataSourceDetail = new MatTableDataSource<any>(rowData);
-  }
-
-  private defaultPaginationConfig: Pagination = {
-    currentPage: 1,
-    itemsPerPage: 10,
-    itemsPerPageOptions: [10, 25, 50],
-    totalItems: 20,
-  };
-
-  trackColumnKey = (index: number, column: TableColumn<T>): string => column.key;
-}