angular-slickgrid 9.0.0 → 9.0.2

package/src/demos/examples/example38.component.html

@@ -1,104 +0,0 @@
-<div class="demo38">
-  <h2>
-    Example 38: OData (v4) Backend Service with Infinite Scroll
-    <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-infinite-odata.component.ts"
-      >
-        <span class="mdi mdi-link-variant"></span> code
-      </a>
-    </span>
-  </h2>
-
-  <h6 class="title is-6 italic content">
-    <ul>
-      <li>
-        Infinite scrolling allows the grid to lazy-load rows from the server when reaching the scroll bottom (end) position. In its simplest
-        form, the more the user scrolls down, the more rows get loaded. If we reached the end of the dataset and there is no more data to
-        load, then we'll assume to have the entire dataset loaded in memory. This contrast with the regular Pagination approach which will
-        hold only hold data for 1 page at a time.
-      </li>
-      <li>NOTES</li>
-      <ol>
-        <li>
-          <code>presets.pagination</code> is not supported with Infinite Scroll and will revert to the first page, simply because since we
-          keep appending data, we always have to start from index zero (no offset).
-        </li>
-        <li>
-          Pagination is not shown BUT in fact, that is what is being used behind the scene whenever reaching the scroll end (fetching next
-          batch).
-        </li>
-        <li>Also note that whenever the user changes the Sort(s)/Filter(s) it will always reset and go back to zero index (first page).</li>
-      </ol>
-    </ul>
-  </h6>
-
-  <div class="row">
-    <div class="col-sm-3">
-      <div class="alert alert-danger" *ngIf="errorStatus" data-test="error-status">
-        <em><strong>Backend Error:</strong> <span [innerHTML]="errorStatus"></span></em>
-      </div>
-    </div>
-  </div>
-
-  <div class="row">
-    <div class="col-sm-2">
-      <div [class]="status.class" role="alert" data-test="status">
-        <strong>Status: </strong> {{ status.text }}
-        <span [hidden]="!processing">
-          <i class="mdi mdi-sync mdi-spin-1s"></i>
-        </span>
-      </div>
-    </div>
-    <div class="col-sm-10">
-      <div class="alert alert-info" data-test="alert-odata-query">
-        <strong>OData Query:</strong> <span data-test="odata-query-result">{{ odataQuery }}</span>
-      </div>
-    </div>
-  </div>
-
-  <div class="row">
-    <div class="col-sm-12">
-      <button
-        class="btn btn-outline-secondary btn-sm btn-icon"
-        data-test="clear-filters-sorting"
-        (click)="clearAllFiltersAndSorts()"
-        title="Clear all Filters & Sorts"
-      >
-        <i class="mdi mdi-filter-remove-outline"></i>
-        Clear all Filter & Sorts
-      </button>
-      <button class="btn btn-outline-secondary btn-sm" data-test="set-dynamic-filter" (click)="setFiltersDynamically()">
-        Set Filters Dynamically
-      </button>
-      <button class="btn btn-outline-secondary btn-sm" data-test="set-dynamic-sorting" (click)="setSortingDynamically()">
-        Set Sorting Dynamically
-      </button>
-      <button class="btn btn-outline-secondary btn-sm" data-test="group-by-gender" (click)="groupByGender()">Group by Gender</button>
-
-      <div *ngIf="metrics" class="mt-2" style="margin: 10px 0px">
-        <b>Metrics:</b>
-        <span>
-          <span>{{ metrics.endTime | date: 'dd MMM, h:mm:ssa' }}</span> —
-          <span data-test="itemCount">{{ metrics.itemCount }}</span>
-          of
-          <span data-test="totalItemCount">{{ metrics.totalItemCount }}</span>
-          items
-        </span>
-        <span class="badge rounded-pill text-bg-primary" [class]="tagDataClass" data-test="data-loaded-tag">All Data Loaded!!!</span>
-      </div>
-    </div>
-  </div>
-
-  <angular-slickgrid
-    gridId="grid38"
-    [columns]="columnDefinitions"
-    [options]="gridOptions"
-    [dataset]="dataset"
-    (onAngularGridCreated)="angularGridReady($event.detail)"
-    (onRowCountChanged)="refreshMetrics($event.detail.args)"
-  >
-  </angular-slickgrid>
-</div>

package/src/demos/examples/example38.component.scss

@@ -1,8 +0,0 @@
-.demo38 {
-  .badge {
-    display: none;
-    &.fully-loaded {
-      display: inline-flex;
-    }
-  }
-}

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

@@ -1,420 +0,0 @@
-import { GridOdataService, type OdataServiceApi } from '@slickgrid-universal/odata';
-import { ChangeDetectorRef, Component, OnInit, ViewEncapsulation } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
-import {
-  Aggregators,
-  AngularGridInstance,
-  Column,
-  Filters,
-  GridOption,
-  Grouping,
-  Metrics,
-  OnRowCountChangedEventArgs,
-  SortComparers,
-} from '../../library';
-
-const sampleDataRoot = 'assets/data';
-const CARET_HTML_ESCAPED = '%5E';
-const PERCENT_HTML_ESCAPED = '%25';
-
-@Component({
-  styleUrls: ['./example38.component.scss'],
-  encapsulation: ViewEncapsulation.None,
-  templateUrl: './example38.component.html',
-  standalone: false,
-})
-export class Example38Component implements OnInit {
-  angularGrid!: AngularGridInstance;
-  backendService: GridOdataService;
-  columnDefinitions!: Column[];
-  gridOptions!: GridOption;
-  dataset: any[] = [];
-  isPageErrorTest = false;
-  metrics!: Partial<Metrics>;
-  tagDataClass = '';
-  odataQuery = '';
-  processing = false;
-  errorStatus = '';
-  errorStatusClass = 'hidden';
-  status = { text: 'processing...', class: 'alert alert-danger' };
-
-  constructor(
-    private readonly cd: ChangeDetectorRef,
-    private http: HttpClient
-  ) {
-    this.backendService = new GridOdataService();
-  }
-
-  ngOnInit(): void {
-    this.initializeGrid();
-  }
-
-  angularGridReady(angularGrid: AngularGridInstance) {
-    this.angularGrid = angularGrid;
-  }
-
-  initializeGrid() {
-    this.columnDefinitions = [
-      {
-        id: 'name',
-        name: 'Name',
-        field: 'name',
-        sortable: true,
-        filterable: true,
-        filter: { model: Filters.compoundInput },
-      },
-      {
-        id: 'gender',
-        name: 'Gender',
-        field: 'gender',
-        filterable: true,
-        sortable: true,
-        filter: {
-          model: Filters.singleSelect,
-          collection: [
-            { value: '', label: '' },
-            { value: 'male', label: 'male' },
-            { value: 'female', label: 'female' },
-          ],
-        },
-      },
-      { id: 'company', name: 'Company', field: 'company', filterable: true, sortable: true },
-      {
-        id: 'category_name',
-        name: 'Category',
-        field: 'category/name',
-        filterable: true,
-        sortable: true,
-        formatter: (_row, _cell, _val, _colDef, dataContext) => dataContext['category']?.['name'] || '',
-      },
-    ];
-
-    this.gridOptions = {
-      enableAutoResize: true,
-      autoResize: {
-        container: '#demo-container',
-        rightPadding: 10,
-      },
-      checkboxSelector: {
-        // you can toggle these 2 properties to show the "select all" checkbox in different location
-        hideInFilterHeaderRow: false,
-        hideInColumnTitleRow: true,
-      },
-      enableCellNavigation: true,
-      enableFiltering: true,
-      enableCheckboxSelector: true,
-      enableRowSelection: true,
-      enableGrouping: true,
-      headerMenu: {
-        hideFreezeColumnsCommand: false,
-      },
-      presets: {
-        // NOTE: pagination preset is NOT supported with infinite scroll
-        // filters: [{ columnId: 'gender', searchTerms: ['female'] }]
-      },
-      backendServiceApi: {
-        service: this.backendService,
-        options: {
-          // enable infinite via Boolean OR via { fetchSize: number }
-          infiniteScroll: { fetchSize: 30 }, // or use true, in that case it would use default size of 25
-          enableCount: true,
-          version: 4,
-        },
-        onError: (error: Error) => {
-          this.errorStatus = error.message;
-          this.errorStatusClass = 'visible notification is-light is-danger is-small is-narrow';
-          this.displaySpinner(false, true);
-        },
-        preProcess: () => {
-          this.errorStatus = '';
-          this.errorStatusClass = 'hidden';
-          this.displaySpinner(true);
-        },
-        process: (query) => this.getCustomerApiCall(query),
-        postProcess: (response) => {
-          this.metrics = response.metrics;
-          this.displaySpinner(false);
-          this.getCustomerCallback(response);
-          this.cd.detectChanges();
-        },
-        // we could use local in-memory Filtering (please note that it only filters against what is currently loaded)
-        // that is when we want to avoid reloading the entire dataset every time
-        // useLocalFiltering: true,
-      } as OdataServiceApi,
-    };
-  }
-
-  displaySpinner(isProcessing: boolean, isError?: boolean) {
-    this.processing = isProcessing;
-    if (isError) {
-      this.status = { text: 'ERROR!!!', class: 'alert alert-danger' };
-    } else {
-      this.status = isProcessing ? { text: 'loading', class: 'alert alert-warning' } : { text: 'finished', class: 'alert alert-success' };
-    }
-    this.cd.detectChanges();
-  }
-
-  getCustomerCallback(data: { '@odata.count': number; infiniteScrollBottomHit: boolean; metrics: Metrics; query: string; value: any[] }) {
-    // totalItems property needs to be filled for pagination to work correctly
-    // however we need to force a dirty check, doing a clone object will do just that
-    const totalItemCount: number = data['@odata.count'];
-    this.metrics.totalItemCount = totalItemCount;
-
-    // even if we're not showing pagination, it is still used behind the scene to fetch next set of data (next page basically)
-    // once pagination totalItems is filled, we can update the dataset
-
-    // infinite scroll has an extra data property to determine if we hit an infinite scroll and there's still more data (in that case we need append data)
-    // or if we're on first data fetching (no scroll bottom ever occured yet)
-    if (!data.infiniteScrollBottomHit) {
-      // initial load not scroll hit yet, full dataset assignment
-      this.angularGrid.slickGrid?.scrollTo(0); // scroll back to top to avoid unwanted onScroll end triggered
-      this.dataset = data.value;
-      this.metrics.itemCount = data.value.length;
-    } else {
-      // scroll hit, for better perf we can simply use the DataView directly for better perf (which is better compare to replacing the entire dataset)
-      this.angularGrid.dataView?.addItems(data.value);
-    }
-
-    this.odataQuery = data['query'];
-
-    // NOTE: you can get currently loaded item count via the `onRowCountChanged`slick event, see `refreshMetrics()` below
-    // OR you could also calculate it yourself or get it via: `this.sgb.dataView.getItemCount() === totalItemCount`
-    // console.log('is data fully loaded: ', this.sgb.dataView?.getItemCount() === totalItemCount);
-  }
-
-  getCustomerApiCall(query: string) {
-    // in your case, you will call your WebAPI function (wich needs to return a Promise)
-    // for the demo purpose, we will call a mock WebAPI function
-    return this.getCustomerDataApiMock(query);
-  }
-
-  /**
-   * This function is only here to mock a WebAPI call (since we are using a JSON file for the demo)
-   *  in your case the getCustomer() should be a WebAPI function returning a Promise
-   */
-  getCustomerDataApiMock(query: string): Promise<any> {
-    this.errorStatusClass = 'hidden';
-
-    // the mock is returning a Promise, just like a WebAPI typically does
-    return new Promise((resolve) => {
-      const queryParams = query.toLowerCase().split('&');
-      let top = 0;
-      let skip = 0;
-      let orderBy = '';
-      let countTotalItems = 100;
-      const columnFilters: any = {};
-
-      if (this.isPageErrorTest) {
-        this.isPageErrorTest = false;
-        throw new Error('Server timed out trying to retrieve data for the last page');
-      }
-
-      for (const param of queryParams) {
-        if (param.includes('$top=')) {
-          top = +param.substring('$top='.length);
-          if (top === 50000) {
-            throw new Error('Server timed out retrieving 50,000 rows');
-          }
-        }
-        if (param.includes('$skip=')) {
-          skip = +param.substring('$skip='.length);
-        }
-        if (param.includes('$orderby=')) {
-          orderBy = param.substring('$orderby='.length);
-        }
-        if (param.includes('$filter=')) {
-          const filterBy = param.substring('$filter='.length).replace('%20', ' ');
-          if (filterBy.includes('matchespattern')) {
-            const regex = new RegExp(`matchespattern\\(([a-zA-Z]+),\\s'${CARET_HTML_ESCAPED}(.*?)'\\)`, 'i');
-            const filterMatch = filterBy.match(regex) || [];
-            const fieldName = filterMatch[1].trim();
-            columnFilters[fieldName] = { type: 'matchespattern', term: '^' + filterMatch[2].trim() };
-          }
-          if (filterBy.includes('contains')) {
-            const filterMatch = filterBy.match(/contains\(([a-zA-Z/]+),\s?'(.*?)'/) || [];
-            const fieldName = filterMatch[1].trim();
-            columnFilters[fieldName] = { type: 'substring', term: filterMatch[2].trim() };
-          }
-          if (filterBy.includes('substringof')) {
-            const filterMatch = filterBy.match(/substringof\('(.*?)',\s([a-zA-Z/]+)/) || [];
-            const fieldName = filterMatch[2].trim();
-            columnFilters[fieldName] = { type: 'substring', term: filterMatch[1].trim() };
-          }
-          for (const operator of ['eq', 'ne', 'le', 'lt', 'gt', 'ge']) {
-            if (filterBy.includes(operator)) {
-              const re = new RegExp(`([a-zA-Z ]*) ${operator} '(.*?)'`);
-              const filterMatch = re.exec(filterBy);
-              if (Array.isArray(filterMatch)) {
-                const fieldName = filterMatch[1].trim();
-                columnFilters[fieldName] = { type: operator, term: filterMatch[2].trim() };
-              }
-            }
-          }
-          if (filterBy.includes('startswith') && filterBy.includes('endswith')) {
-            const filterStartMatch = filterBy.match(/startswith\(([a-zA-Z ]*),\s?'(.*?)'/) || [];
-            const filterEndMatch = filterBy.match(/endswith\(([a-zA-Z ]*),\s?'(.*?)'/) || [];
-            const fieldName = filterStartMatch[1].trim();
-            columnFilters[fieldName] = { type: 'starts+ends', term: [filterStartMatch[2].trim(), filterEndMatch[2].trim()] };
-          } else if (filterBy.includes('startswith')) {
-            const filterMatch = filterBy.match(/startswith\(([a-zA-Z ]*),\s?'(.*?)'/) || [];
-            const fieldName = filterMatch[1].trim();
-            columnFilters[fieldName] = { type: 'starts', term: filterMatch[2].trim() };
-          } else if (filterBy.includes('endswith')) {
-            const filterMatch = filterBy.match(/endswith\(([a-zA-Z ]*),\s?'(.*?)'/) || [];
-            const fieldName = filterMatch[1].trim();
-            columnFilters[fieldName] = { type: 'ends', term: filterMatch[2].trim() };
-          }
-
-          // simular a backend error when trying to sort on the "Company" field
-          if (filterBy.includes('company')) {
-            throw new Error('Server could not filter using the field "Company"');
-          }
-        }
-      }
-
-      // simulate a backend error when trying to sort on the "Company" field
-      if (orderBy.includes('company')) {
-        throw new Error('Server could not sort using the field "Company"');
-      }
-
-      this.http.get(`${sampleDataRoot}/customers_100.json`).subscribe((response) => {
-        let data = response as any[];
-        // Sort the data
-        if (orderBy?.length > 0) {
-          const orderByClauses = orderBy.split(',');
-          for (const orderByClause of orderByClauses) {
-            const orderByParts = orderByClause.split(' ');
-            const orderByField = orderByParts[0];
-
-            let selector = (obj: any): string => obj;
-            for (const orderByFieldPart of orderByField.split('/')) {
-              const prevSelector = selector;
-              selector = (obj: any) => {
-                return prevSelector(obj)[orderByFieldPart as any];
-              };
-            }
-
-            const sort = orderByParts[1] ?? 'asc';
-            switch (sort.toLocaleLowerCase()) {
-              case 'asc':
-                data = data.sort((a, b) => selector(a).localeCompare(selector(b)));
-                break;
-              case 'desc':
-                data = data.sort((a, b) => selector(b).localeCompare(selector(a)));
-                break;
-            }
-          }
-        }
-
-        // Read the result field from the JSON response.
-        let firstRow = skip;
-        let filteredData = data;
-        if (columnFilters) {
-          for (const columnId in columnFilters) {
-            if (columnId in columnFilters) {
-              filteredData = filteredData.filter((column) => {
-                const filterType = columnFilters[columnId].type;
-                const searchTerm = columnFilters[columnId].term;
-                let colId = columnId;
-                if (columnId?.indexOf(' ') !== -1) {
-                  const splitIds = columnId.split(' ');
-                  colId = splitIds[splitIds.length - 1];
-                }
-
-                let filterTerm;
-                let col = column;
-                for (const part of colId.split('/')) {
-                  filterTerm = col[part];
-                  col = filterTerm;
-                }
-
-                if (filterTerm) {
-                  const [term1, term2] = Array.isArray(searchTerm) ? searchTerm : [searchTerm];
-
-                  switch (filterType) {
-                    case 'eq':
-                      return filterTerm.toLowerCase() === term1;
-                    case 'ne':
-                      return filterTerm.toLowerCase() !== term1;
-                    case 'le':
-                      return filterTerm.toLowerCase() <= term1;
-                    case 'lt':
-                      return filterTerm.toLowerCase() < term1;
-                    case 'gt':
-                      return filterTerm.toLowerCase() > term1;
-                    case 'ge':
-                      return filterTerm.toLowerCase() >= term1;
-                    case 'ends':
-                      return filterTerm.toLowerCase().endsWith(term1);
-                    case 'starts':
-                      return filterTerm.toLowerCase().startsWith(term1);
-                    case 'starts+ends':
-                      return filterTerm.toLowerCase().startsWith(term1) && filterTerm.toLowerCase().endsWith(term2);
-                    case 'substring':
-                      return filterTerm.toLowerCase().includes(term1);
-                    case 'matchespattern':
-                      return new RegExp((term1 as string).replaceAll(PERCENT_HTML_ESCAPED, '.*'), 'i').test(filterTerm);
-                  }
-                }
-              });
-            }
-          }
-          countTotalItems = filteredData.length;
-        }
-
-        // make sure page skip is not out of boundaries, if so reset to first page & remove skip from query
-        if (firstRow > filteredData.length) {
-          query = query.replace(`$skip=${firstRow}`, '');
-          firstRow = 0;
-        }
-        const updatedData = filteredData.slice(firstRow, firstRow + top);
-
-        setTimeout(() => {
-          const backendResult: any = { query };
-          backendResult['value'] = updatedData;
-          backendResult['@odata.count'] = countTotalItems;
-
-          // console.log('Backend Result', backendResult);
-          resolve(backendResult);
-        }, 100);
-      });
-    });
-  }
-
-  groupByGender() {
-    this.angularGrid?.dataView?.setGrouping({
-      getter: 'gender',
-      formatter: (g) => `Gender: ${g.value} <span class="text-green">(${g.count} items)</span>`,
-      comparer: (a, b) => SortComparers.string(a.value, b.value),
-      aggregators: [new Aggregators.Sum('gemder')],
-      aggregateCollapsed: false,
-      lazyTotalsCalculation: true,
-    } as Grouping);
-
-    // you need to manually add the sort icon(s) in UI
-    this.angularGrid?.slickGrid.setSortColumns([{ columnId: 'duration', sortAsc: true }]);
-    this.angularGrid?.slickGrid.invalidate(); // invalidate all rows and re-render
-  }
-
-  clearAllFiltersAndSorts() {
-    if (this.angularGrid?.gridService) {
-      this.angularGrid.gridService.clearAllFiltersAndSorts();
-    }
-  }
-
-  setFiltersDynamically() {
-    // we can Set Filters Dynamically (or different filters) afterward through the FilterService
-    this.angularGrid?.filterService.updateFilters([{ columnId: 'gender', searchTerms: ['female'] }]);
-  }
-
-  refreshMetrics(args: OnRowCountChangedEventArgs) {
-    if (args?.current >= 0) {
-      this.metrics.itemCount = this.angularGrid.dataView?.getFilteredItemCount() || 0;
-      this.tagDataClass = this.metrics.itemCount === this.metrics.totalItemCount ? 'fully-loaded' : 'partial-load';
-    }
-  }
-
-  setSortingDynamically() {
-    this.angularGrid?.sortService.updateSorting([{ columnId: 'name', direction: 'DESC' }]);
-  }
-}

package/src/demos/examples/example39.component.html

@@ -1,112 +0,0 @@
-<div class="demo39">
-  <h2>
-    Example 39: GraphQL Backend Service with Infinite Scroll
-    <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-infinite-graphql.component.ts"
-      >
-        <span class="mdi mdi-link-variant"></span> code
-      </a>
-    </span>
-  </h2>
-
-  <h6 class="title is-6 italic content">
-    <ul>
-      <li>
-        Infinite scrolling allows the grid to lazy-load rows from the server when reaching the scroll bottom (end) position. In its simplest
-        form, the more the user scrolls down, the more rows get loaded. If we reached the end of the dataset and there is no more data to
-        load, then we'll assume to have the entire dataset loaded in memory. This contrast with the regular Pagination approach which will
-        hold only hold data for 1 page at a time.
-      </li>
-      <li>NOTES</li>
-      <ol>
-        <li>
-          <code>presets.pagination</code> is not supported with Infinite Scroll and will revert to the first page, simply because since we
-          keep appending data, we always have to start from index zero (no offset).
-        </li>
-        <li>
-          Pagination is not shown BUT in fact, that is what is being used behind the scene whenever reaching the scroll end (fetching next
-          batch).
-        </li>
-        <li>Also note that whenever the user changes the Sort(s)/Filter(s) it will always reset and go back to zero index (first page).</li>
-      </ol>
-    </ul>
-  </h6>
-
-  <div class="row">
-    <div class="col-sm-5">
-      <div [class]="status.class" role="alert" data-test="status">
-        <strong>Status: </strong> {{ status.text }}
-        <span [hidden]="!processing">
-          <i class="mdi mdi-sync mdi-spin-1s"></i>
-        </span>
-      </div>
-
-      <div class="row">
-        <div class="col-md-12">
-          <button
-            class="btn btn-outline-secondary btn-sm btn-icon"
-            data-test="clear-filters-sorting"
-            (click)="clearAllFiltersAndSorts()"
-            title="Clear all Filters & Sorts"
-          >
-            <i class="mdi mdi-filter-remove-outline"></i>
-            Clear all Filter & Sorts
-          </button>
-          <label for="serverdelay" class="ml-4">Server Delay: </label>
-          <input
-            id="serverdelay"
-            type="number"
-            data-test="server-delay"
-            style="width: 55px"
-            [(ngModel)]="serverWaitDelay"
-            title="input a fake timer delay to simulate slow server response"
-          />
-        </div>
-      </div>
-      <div class="row mt-1">
-        <div class="col-md-12">
-          <button class="btn btn-outline-secondary btn-sm btn-icon" data-test="language-button" (click)="switchLanguage()">
-            <i class="mdi mdi-translate"></i>
-            Switch Language
-          </button>
-          <strong>Locale:</strong>
-          <span style="font-style: italic" data-test="selected-locale">
-            {{ selectedLanguage + '.json' }}
-          </span>
-        </div>
-      </div>
-      <br />
-      <div *ngIf="metrics" style="margin: 10px 0px">
-        <b>Metrics:</b>
-        <span>
-          <span>{{ metrics.endTime | date: 'dd MMM, h:mm:ssa' }}</span> —
-          <span data-test="itemCount">{{ metrics.itemCount }}</span>
-          of
-          <span data-test="totalItemCount">{{ metrics.totalItemCount }}</span>
-          items
-        </span>
-        <span class="badge rounded-pill text-bg-primary" [class]="tagDataClass" data-test="data-loaded-tag">All Data Loaded!!!</span>
-      </div>
-    </div>
-
-    <div class="col-sm-7">
-      <div class="alert alert-info" data-test="alert-graphql-query">
-        <strong>GraphQL Query:</strong>
-        <div [innerHTML]="graphqlQuery" data-test="graphql-query-result"></div>
-      </div>
-    </div>
-  </div>
-
-  <angular-slickgrid
-    gridId="grid39"
-    [columns]="columnDefinitions"
-    [options]="gridOptions"
-    [dataset]="dataset"
-    (onAngularGridCreated)="angularGridReady($event.detail)"
-    (onRowCountChanged)="refreshMetrics($event.detail.args)"
-  >
-  </angular-slickgrid>
-</div>

package/src/demos/examples/example39.component.scss

@@ -1,8 +0,0 @@
-.demo39 {
-  .badge {
-    display: none;
-    &.fully-loaded {
-      display: inline-flex;
-    }
-  }
-}