angular-slickgrid 9.0.0 → 9.0.2

package/src/demos/examples/example45.component.ts

@@ -1,243 +0,0 @@
-import { faker } from '@faker-js/faker';
-import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
-import { AngularGridInstance, Column, GridOption, SlickRowDetailView } from '../../library';
-
-import { type Distributor, Example45DetailComponent, type OrderData } from './example45-detail.component';
-import { RowDetailPreloadComponent } from './rowdetail-preload.component';
-
-const FAKE_SERVER_DELAY = 250;
-const NB_ITEMS = 995;
-
-@Component({
-  styleUrls: ['example45.component.scss'],
-  templateUrl: './example45.component.html',
-  encapsulation: ViewEncapsulation.None,
-  standalone: false,
-})
-export class Example45Component implements OnDestroy, OnInit {
-  private _darkMode = false;
-  columnDefinitions: Column[] = [];
-  gridOptions!: GridOption;
-  angularGrid!: AngularGridInstance;
-  dataset: Distributor[] = [];
-  detailViewRowCount = 9;
-  hideSubTitle = false;
-  isUsingInnerGridStatePresets = false;
-  isUsingAutoHeight = false;
-  serverWaitDelay = FAKE_SERVER_DELAY;
-
-  get rowDetailInstance(): SlickRowDetailView {
-    return this.angularGrid.extensions.rowDetailView?.instance || {};
-  }
-
-  angularGridReady(angularGrid: AngularGridInstance) {
-    this.angularGrid = angularGrid;
-  }
-
-  ngOnDestroy(): void {
-    console.log('destroying row detail component');
-    document.querySelector('.panel-wm-content')!.classList.remove('dark-mode');
-    document.querySelector<HTMLDivElement>('#demo-container')!.dataset.bsTheme = 'light';
-  }
-
-  ngOnInit(): void {
-    // define the grid options & columns and then create the grid itself
-    this.defineGrid();
-
-    // mock a dataset
-    this.dataset = this.getData(NB_ITEMS);
-  }
-
-  defineGrid() {
-    this.columnDefinitions = [
-      {
-        id: 'companyId',
-        name: 'ID',
-        field: 'companyId',
-        cssClass: 'text-end',
-        minWidth: 50,
-        maxWidth: 50,
-        filterable: true,
-        sortable: true,
-        type: 'number',
-      },
-      {
-        id: 'companyName',
-        name: 'Company Name',
-        field: 'companyName',
-        width: 90,
-        filterable: true,
-        sortable: true,
-      },
-      {
-        id: 'streetAddress',
-        name: 'Street Address',
-        field: 'streetAddress',
-        minWidth: 120,
-        filterable: true,
-      },
-      {
-        id: 'city',
-        name: 'City',
-        field: 'city',
-        minWidth: 120,
-        filterable: true,
-      },
-      {
-        id: 'zipCode',
-        name: 'Zip Code',
-        field: 'zipCode',
-        minWidth: 120,
-        filterable: true,
-      },
-      {
-        id: 'country',
-        name: 'Country',
-        field: 'country',
-        minWidth: 120,
-        filterable: true,
-      },
-    ];
-
-    this.gridOptions = {
-      autoResize: {
-        container: '#demo-container',
-        autoHeight: this.isUsingAutoHeight, // works with/without autoHeight
-        bottomPadding: 20,
-      },
-      autoHeight: false,
-      enableFiltering: true,
-      enableRowDetailView: true,
-      rowTopOffsetRenderType: 'top', // RowDetail and/or RowSpan don't render well with "transform", you should use "top"
-      darkMode: this._darkMode,
-      rowHeight: 33,
-      rowDetailView: {
-        process: (item: any) => this.simulateServerAsyncCall(item),
-        loadOnce: false, // you can't use loadOnce with inner grid because only HTML template are re-rendered, not JS events
-        useRowClick: false,
-        // how many grid rows do we want to use for the row detail panel
-        panelRows: this.detailViewRowCount,
-        // optionally expose the functions that you want to use from within the row detail Child Component
-        parentRef: this,
-        // Preload View Template
-        preloadComponent: RowDetailPreloadComponent,
-        // ViewModel Template to load when row detail data is ready
-        viewComponent: Example45DetailComponent,
-      },
-    };
-  }
-
-  getData(count: number) {
-    // mock a dataset
-    const mockDataset: Distributor[] = [];
-    for (let i = 0; i < count; i++) {
-      mockDataset[i] = {
-        id: i,
-        companyId: i,
-        companyName: faker.company.name(),
-        city: faker.location.city(),
-        streetAddress: faker.location.streetAddress(),
-        zipCode: faker.location.zipCode('######'),
-        country: faker.location.country(),
-        orderData: [],
-        isUsingInnerGridStatePresets: false,
-      };
-    }
-
-    return mockDataset;
-  }
-
-  changeDetailViewRowCount() {
-    if (this.angularGrid?.extensionService) {
-      const options = this.rowDetailInstance.getOptions();
-      if (options?.panelRows) {
-        options.panelRows = this.detailViewRowCount; // change number of rows dynamically
-        this.rowDetailInstance.setOptions(options);
-      }
-    }
-  }
-
-  changeUsingInnerGridStatePresets() {
-    this.isUsingInnerGridStatePresets = !this.isUsingInnerGridStatePresets;
-    this.closeAllRowDetail();
-    return true;
-  }
-
-  changeUsingResizerAutoHeight() {
-    this.isUsingAutoHeight = !this.isUsingAutoHeight;
-    this.angularGrid.slickGrid?.setOptions({
-      autoResize: { ...this.gridOptions.autoResize, autoHeight: this.isUsingAutoHeight },
-    });
-    this.angularGrid.resizerService.resizeGrid();
-    return true;
-  }
-
-  closeAllRowDetail() {
-    this.rowDetailInstance?.collapseAll();
-  }
-
-  redrawAllRowDetail() {
-    this.rowDetailInstance?.redrawAllViewComponents(true);
-  }
-
-  /** Just for demo purposes, we will simulate an async server call and return more details on the selected row item */
-  simulateServerAsyncCall(item: Distributor) {
-    let orderData: OrderData[] = [];
-    // let's mock some data but make it predictable for easier Cypress E2E testing
-    if (item.id % 3) {
-      orderData = [
-        { orderId: '10261', shipCity: 'Rio de Janeiro', freight: 3.05, shipName: 'Que Delícia' },
-        { orderId: '10267', shipCity: 'München', freight: 208.58, shipName: 'Frankenversand' },
-        { orderId: '10281', shipCity: 'Madrid', freight: 2.94, shipName: 'Romero y tomillo' },
-      ];
-    } else if (item.id % 4) {
-      orderData = [
-        { orderId: '10251', shipCity: 'Lyon', freight: 41.34, shipName: 'Victuailles en stock' },
-        { orderId: '10253', shipCity: 'Rio de Janeiro', freight: 58.17, shipName: 'Hanari Carnes' },
-        { orderId: '10256', shipCity: 'Resende', freight: 13.97, shipName: 'Wellington Importadora' },
-      ];
-    } else if (item.id % 5) {
-      orderData = [
-        { orderId: '10265', shipCity: 'Strasbourg', freight: 55.28, shipName: 'Blondel père et fils' },
-        { orderId: '10277', shipCity: 'Leipzig', freight: 125.77, shipName: 'Morgenstern Gesundkost' },
-        { orderId: '10280', shipCity: 'Luleå', freight: 8.98, shipName: 'Berglunds snabbköp' },
-        { orderId: '10295', shipCity: 'Reims', freight: 1.15, shipName: 'Vins et alcools Chevalier' },
-      ];
-    } else if (item.id % 2) {
-      orderData = [
-        { orderId: '10258', shipCity: 'Graz', freight: 140.51, shipName: 'Ernst Handel' },
-        { orderId: '10270', shipCity: 'Oulu', freight: 136.54, shipName: 'Wartian Herkku' },
-      ];
-    } else {
-      orderData = [{ orderId: '10255', shipCity: 'Genève', freight: 148.33, shipName: 'Richter Supermarkt' }];
-    }
-
-    // fill the template on async delay
-    return new Promise((resolve) => {
-      window.setTimeout(() => {
-        const itemDetail = item;
-        itemDetail.orderData = orderData;
-        itemDetail.isUsingInnerGridStatePresets = this.isUsingInnerGridStatePresets;
-        // resolve the data after delay specified
-        resolve(itemDetail);
-      }, this.serverWaitDelay);
-    });
-  }
-
-  toggleDarkMode() {
-    this._darkMode = !this._darkMode;
-    this.toggleBodyBackground();
-    this.angularGrid.slickGrid?.setOptions({ darkMode: this._darkMode });
-    this.closeAllRowDetail();
-  }
-
-  toggleBodyBackground() {
-    if (this._darkMode) {
-      document.querySelector<HTMLDivElement>('.panel-wm-content')!.classList.add('dark-mode');
-      document.querySelector<HTMLDivElement>('#demo-container')!.dataset.bsTheme = 'dark';
-    } else {
-      document.querySelector('.panel-wm-content')!.classList.remove('dark-mode');
-      document.querySelector<HTMLDivElement>('#demo-container')!.dataset.bsTheme = 'light';
-    }
-  }
-}

package/src/demos/examples/filter-ng-select.component.ts

@@ -1,33 +0,0 @@
-import { Component } from '@angular/core';
-import { Subject } from 'rxjs';
-
-// the appendTo="body" (necessary for SlickGrid filter) requires the body to be position relative like so
-// <body style="position: relative">
-@Component({
-  template: ` <ng-select
-    class="custom no-style-select"
-    [items]="collection"
-    bindValue="id"
-    bindLabel="name"
-    appendTo="body"
-    [clearable]="false"
-    (change)="onChange($event)"
-    [(ngModel)]="selectedId"
-  >
-    <ng-template ng-label-tmp ng-option-tmp let-item="item">
-      {{ item?.name }}
-    </ng-template>
-  </ng-select>`,
-  standalone: false,
-})
-export class FilterNgSelectComponent {
-  selectedId = '';
-  selectedItem: any;
-  collection?: any[]; // this will be filled by the collection of your column definition
-  onItemChanged = new Subject<any>(); // object
-
-  onChange(item: any) {
-    this.selectedItem = item;
-    this.onItemChanged.next(item);
-  }
-}

package/src/demos/examples/grid-custom-pager.component.html

@@ -1,60 +0,0 @@
-<div class="custom-pagination">
-  <span class="custom-pagination-settings">
-    <span class="custom-pagination-count">
-      <span class="page-info-from-to">
-        <span class="item-from" aria-label="Page Item From" data-test="item-from"> {{ currentPagination?.dataFrom }} </span>-
-        <span class="item-to" aria-label="Page Item To" data-test="item-to">
-          {{ currentPagination?.dataTo }}
-        </span>
-        of
-      </span>
-      <span class="page-info-total-items">
-        <span class="total-items" aria-label="Total Items" data-test="total-items">{{ currentPagination?.totalItems }}</span>
-        <span class="text-items"> items</span>
-      </span>
-    </span>
-  </span>
-  <div class="custom-pagination-nav">
-    <nav aria-label="Page navigation">
-      <ul class="custom-pagination-ul">
-        <li class="li page-item seek-first" [class]="{ disabled: isLeftPaginationDisabled() }">
-          <a
-            class="pagination-link mdi mdi-page-first icon-seek-first mdi-22px"
-            aria-label="First Page"
-            role="button"
-            (click)="onFirstPageClicked($event)"
-          ></a>
-        </li>
-        <li class="li page-item seek-prev" [class]="{ disabled: isLeftPaginationDisabled() }">
-          <a
-            class="pagination-link icon-seek-prev mdi mdi-chevron-down mdi-22px mdi-rotate-90"
-            aria-label="Previous Page"
-            role="button"
-            (click)="onPreviousPageClicked($event)"
-          ></a>
-        </li>
-      </ul>
-    </nav>
-    <div class="page-number">
-      <span class="text-page">Page</span>
-      <span class="page-number" aria-label="Page Number" data-test="page-number-label">{{ currentPagination?.pageNumber }}</span>
-      of
-      <span class="page-count" data-test="page-count">{{ currentPagination?.pageCount }}</span>
-    </div>
-    <nav aria-label="Page navigation">
-      <ul class="custom-pagination-ul">
-        <li class="li page-item seek-next" [class]="{ disabled: isRightPaginationDisabled() }" (click)="onNextPageClicked($event)">
-          <a class="pagination-link icon-seek-next mdi mdi-chevron-down mdi-22px mdi-rotate-270" aria-label="Next Page" role="button"></a>
-        </li>
-        <li class="li page-item seek-end" [class]="{ disabled: isRightPaginationDisabled() }">
-          <a
-            class="pagination-link icon-seek-end mdi mdi-page-last mdi-22px"
-            aria-label="Last Page"
-            role="button"
-            (click)="onLastPageClicked($event)"
-          ></a>
-        </li>
-      </ul>
-    </nav>
-  </div>
-</div>

package/src/demos/examples/grid-custom-pager.component.scss

@@ -1,57 +0,0 @@
-@use 'sass:color';
-
-.custom-pagination {
-  display: flex;
-  justify-content: flex-end;
-  margin: 10px;
-  font-size: 13px;
-
-  .custom-pagination-settings {
-    display: inline-flex;
-    align-items: center;
-    margin-right: 30px;
-  }
-
-  .custom-pagination-nav {
-    display: flex;
-    align-items: center;
-    list-style-type: none;
-
-    .page-item {
-      display: flex;
-      width: 26px;
-      justify-content: center;
-      margin: 0;
-      &.disabled .pagination-link {
-        color: rgb(180, 179, 179);
-        background-color: rgb(180, 179, 179);
-      }
-    }
-
-    .page-number {
-      padding: 0 5px;
-      .page-number {
-        display: inline-flex;
-        justify-content: center;
-        width: 20px;
-      }
-    }
-
-    nav {
-      ul.custom-pagination-ul  {
-        display: flex;
-        list-style-type: none;
-        margin: 0;
-        padding: 0 5px;
-        color: #0d6efd;
-
-        .pagination-link {
-          color: #0d6efd;
-          &:hover {
-            color: color.adjust(#0d6efd, $lightness: 10%);
-          }
-        }
-      }
-    }
-  }
-}

package/src/demos/examples/grid-custom-pager.component.ts

@@ -1,107 +0,0 @@
-import { Component, ElementRef } from '@angular/core';
-import type {
-  BasePaginationComponent,
-  PaginationMetadata,
-  PaginationService,
-  PubSubService,
-  SlickGrid,
-  Subscription,
-} from '@slickgrid-universal/common';
-
-/** Custom Pagination Componnet, please note that you MUST `implements BasePaginationComponent` with required functions */
-@Component({
-  templateUrl: './grid-custom-pager.component.html',
-  styleUrls: ['./grid-custom-pager.component.scss'],
-  standalone: false,
-})
-export class CustomPagerComponent implements BasePaginationComponent {
-  protected _paginationElement!: HTMLDivElement;
-  protected _subscriptions: Subscription[] = [];
-  protected _gridContainerElm?: HTMLElement;
-  protected _grid!: SlickGrid;
-  protected _paginationService!: PaginationService;
-  protected _pubSubService!: PubSubService;
-  currentPagination = {} as PaginationMetadata;
-
-  constructor(protected readonly elm: ElementRef) {}
-
-  init(grid: SlickGrid, paginationService: PaginationService, pubSubService: PubSubService) {
-    this._grid = grid;
-    this._paginationService = paginationService;
-    this._pubSubService = pubSubService;
-    this.currentPagination = this._paginationService.getFullPagination();
-
-    // Anytime the pagination is initialized or has changes,
-    // we'll copy the data into a local object so that we can add binding to this local object
-    this._subscriptions.push(
-      this._pubSubService.subscribe<PaginationMetadata>('onPaginationRefreshed', (paginationChanges) => {
-        this.currentPagination.dataFrom = paginationChanges.dataFrom;
-        this.currentPagination.dataTo = paginationChanges.dataTo;
-        this.currentPagination.pageCount = paginationChanges.pageCount;
-        this.currentPagination.pageNumber = paginationChanges.pageNumber;
-        this.currentPagination.pageSize = paginationChanges.pageSize;
-        this.currentPagination.pageSizes = paginationChanges.pageSizes;
-        this.currentPagination.totalItems = paginationChanges.totalItems;
-      })
-    );
-  }
-
-  dispose() {
-    this._pubSubService.unsubscribeAll(this._subscriptions);
-    this.disposeElement();
-  }
-
-  disposeElement() {
-    this._paginationElement.remove();
-  }
-
-  renderPagination(containerElm: HTMLElement, position: 'top' | 'bottom' = 'top') {
-    this._gridContainerElm = containerElm;
-    this._paginationElement = this.elm.nativeElement;
-    this._paginationElement.id = 'pager';
-    this._paginationElement.className = `pagination-container pager ${this._grid.getUID()}`;
-    this._paginationElement.style.width = '100%';
-
-    if (position === 'top') {
-      // we can prepend the grid if we wish
-      this._paginationElement.classList.add('top');
-      containerElm.prepend(this._paginationElement);
-    } else {
-      // or append it at the bottom
-      this._paginationElement.classList.add('bottom');
-      containerElm.appendChild(this._paginationElement);
-    }
-  }
-
-  onFirstPageClicked(event: MouseEvent): void {
-    if (!this.isLeftPaginationDisabled()) {
-      this._paginationService.goToFirstPage(event);
-    }
-  }
-
-  onLastPageClicked(event: MouseEvent): void {
-    if (!this.isRightPaginationDisabled()) {
-      this._paginationService.goToLastPage(event);
-    }
-  }
-
-  onNextPageClicked(event: MouseEvent): void {
-    if (!this.isRightPaginationDisabled()) {
-      this._paginationService.goToNextPage(event);
-    }
-  }
-
-  onPreviousPageClicked(event: MouseEvent): void {
-    if (!this.isLeftPaginationDisabled()) {
-      this._paginationService.goToPreviousPage(event);
-    }
-  }
-
-  isLeftPaginationDisabled(): boolean {
-    return this.currentPagination.pageNumber === 1 || this.currentPagination.totalItems === 0;
-  }
-
-  isRightPaginationDisabled(): boolean {
-    return this.currentPagination.pageNumber === this.currentPagination.pageCount || this.currentPagination.totalItems === 0;
-  }
-}

package/src/demos/examples/grid-remote.component.html

@@ -1,44 +0,0 @@
-<div id="demo-container" class="container-fluid">
-  <h2>
-    {{ title }}
-    <span class="float-end">
-      <a
-        style="font-size: 18px"
-        target="_blank"
-        href="https://github.com/ghiscoding/slickgrid-universal/blob/master/frameworks/angular-slickgrid/src/demos/examples/grid-remote.component.ts"
-      >
-        <span class="mdi mdi-link-variant"></span> code
-      </a>
-    </span>
-  </h2>
-  <div class="subtitle" [innerHTML]="subTitle"></div>
-
-  <div class="col-md-6" style="margin-bottom: 15px">
-    <label>Octopart Catalog Search <small>(type a word then press ENTER)</small></label>
-    <input type="text" class="form-control" [value]="search" (change)="searchChanged($event.target.value)" />
-  </div>
-
-  <div class="alert alert-danger col-md-7" role="alert">
-    <strong>Note:</strong>
-    this demo no longer displays any results because the WebAPI Key to connect and query the <b>Octopart Component Search</b> is no longer
-    valid. However the concept remains valid, which is to use your own Custom DataView instead of the default SlickGrid DataView used by
-    this library.
-  </div>
-
-  <div class="alert alert-warning col-md-6" role="alert" *ngIf="loading">
-    <i class="mdi mdi-sync mdi-spin-1s"></i>
-    <span>Loading...</span>
-  </div>
-
-  <angular-slickgrid
-    gridId="grid18"
-    [columns]="columnDefinitions"
-    [options]="gridOptions"
-    [dataset]="dataset"
-    [customDataView]="customDataView"
-    (onAngularGridCreated)="angularGridReady($event.detail)"
-    (onViewportChanged)="onViewportChanged()"
-    (onSort)="onSort($event.detail.eventData, $event.detail.args)"
-  >
-  </angular-slickgrid>
-</div>