angular-slickgrid 9.0.0 → 9.0.2

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

@@ -1,82 +0,0 @@
-<div class="container-fluid">
-  <h2>
-    Example 34: Real-Time Trading Platform
-    <button class="btn btn-outline-secondary btn-sm btn-icon ms-3" (click)="toggleDarkMode()" data-test="toggle-dark-mode">
-      <span class="mdi mdi-theme-light-dark"></span>
-      <span>Toggle Dark Mode</span>
-    </button>
-    <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-trading.component.ts"
-      >
-        <span class="mdi mdi-link-variant"></span> code
-      </a>
-    </span>
-  </h2>
-  <div class="subtitle">
-    Simulate a stock trading platform with lot of price changes, it is strongly suggested to disable the
-    <code>autoResize.autoHeight</code> grid option for this type of grid.
-    <ul>
-      <li>
-        you can start/stop the simulation, you can see SlickGrid huge perf by setting: (1) lower Changes Rate, (2) increase both Changes per
-        Cycle, and (3) lower Highlight Duration
-      </li>
-      <li>optionally change random numbers, between 0 and 10 symbols, per cycle (higher numbers means more changes)</li>
-      <li>optionally change the simulation changes refresh rate in ms (lower number means more changes).</li>
-      <li>you can Group by 1 of these columns: Currency, Market or Type</li>
-    </ul>
-  </div>
-
-  <div class="trading-platform">
-    <div class="row mb-4 simulation-form">
-      <div class="col-sm-12 d-flex align-items-center">
-        <div class="range">
-          <label for="refreshRateRange" class="form-label me-1">Changes Rate(ms)</label>
-          <input type="range" class="form-range" id="refreshRateRange" min="0" max="250" [(ngModel)]="refreshRate" />
-          <span class="refresh-rate">
-            <input type="number" [(ngModel)]="refreshRate" />
-          </span>
-        </div>
-        <span class="ms-3 me-1">
-          <button class="btn btn-outline-secondary btn-sm btn-icon" data-test="start-btn" (click)="startSimulation()">
-            <li class="mdi mdi-play-circle-outline"></li>
-            Start Simulation
-          </button>
-        </span>
-        <span class="me-3">
-          <button class="btn btn-outline-secondary btn-sm btn-icon" data-test="stop-btn" (click)="stopSimulation()">
-            <li class="mdi mdi-stop-circle-outline"></li>
-            Stop Simulation
-          </button>
-        </span>
-        <span class="mx-1">
-          <label for="change-per-cycle-input">Changes p/Cycle</label>
-          <input type="number" id="change-per-cycle-input" [(ngModel)]="minChangePerCycle" [max]="maxChangePerCycle" />
-          to
-          <input type="number" [(ngModel)]="maxChangePerCycle" [min]="minChangePerCycle" />
-        </span>
-        <span class="ms-2">
-          <label for="highlight-input">Highlight Duration(ms)</label>
-          <input type="number" id="highlight-input" data-test="highlight-input" [(ngModel)]="highlightDuration" />
-        </span>
-        <div class="ms-auto">
-          <button class="btn btn-outline-secondary btn-sm btn-icon" (click)="toggleFullScreen()">
-            <li [class]="isFullScreen ? 'mdi mdi-arrow-collapse' : 'mdi mdi-arrow-expand'"></li>
-            Toggle Full-Screen
-          </button>
-        </div>
-      </div>
-    </div>
-
-    <angular-slickgrid
-      gridId="grid34"
-      [columns]="columnDefinitions"
-      [options]="gridOptions"
-      [dataset]="dataset"
-      (onAngularGridCreated)="angularGridReady($event.detail)"
-    >
-    </angular-slickgrid>
-  </div>
-</div>

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

@@ -1,77 +0,0 @@
-// @use '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-salesforce.lite.scss';
-
-$sparkline-color: #00b78d;
-// $sparkline-color: #573585;
-
-.trading-platform.full-screen {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  padding: 10px 12px 0 10px;
-  background-color: white;
-  z-index: 1040;
-  position: fixed;
-}
-.changed-gain {
-  background-color: #eafae8 !important;
-}
-.changed-loss {
-  background-color: #ffeae8 !important;
-}
-.simulation-form {
-  input[type=number] {
-    height: 32px;
-    width: 50px;
-    border: 1px solid #c0c0c0;
-    border-radius: 3px;
-  }
-  div.range {
-    display: contents;
-    width: 200px;
-    label.form-label {
-      margin: 0;
-    }
-    input.form-range {
-      width: 120px;
-    }
-  }
-  .refresh-rate input {
-    height: 30px;
-    width: 46px;
-  }
-}
-.sparkline {
-  stroke: $sparkline-color;
-  fill: rgba($sparkline-color, 0.05);
-}
-*[hidden] {
-  display: none;
-}
-
-.trading-tooltip {
-  position: absolute;
-  background: rgba(0, 0, 0, .7);
-  color: #fff;
-  padding: 2px 5px;
-  font-size: 12px;
-  white-space: nowrap;
-  z-index: 9999;
-}
-
-.slick-dark-mode,
-.dark-mode {
-  .text-success {
-    color: #42b47f !important
-  }
-  .changed-gain {
-    background-color: #00ff001d !important;
-  }
-  .changed-loss {
-    background-color: #ff00001b !important;
-  }
-  .trading-platform.full-screen {
-    background-color: #33393e;
-  }
-}

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

@@ -1,434 +0,0 @@
-import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
-import { faker } from '@faker-js/faker';
-import sparkline from '@fnando/sparkline';
-import {
-  Aggregators,
-  AngularGridInstance,
-  Column,
-  createDomElement,
-  deepCopy,
-  Filters,
-  Formatter,
-  Formatters,
-  GridOption,
-  GroupTotalFormatters,
-} from '../../library';
-
-const NB_ROWS = 200;
-
-const currencyFormatter: Formatter = (cell: number, row: number, value: string) =>
-  `<img src="https://flags.fmcdn.net/data/flags/mini/${value.substr(0, 2).toLowerCase()}.png" width="20"/> ${value}`;
-
-const priceFormatter: Formatter = (_cell, _row, value, _col, dataContext) => {
-  const direction = dataContext.priceChange >= 0 ? 'up' : 'down';
-  const fragment = new DocumentFragment();
-  const divElm = document.createElement('div');
-  divElm.className = `d-inline-flex align-items-center text-${direction === 'up' ? 'success' : 'danger'}`;
-  const spanElm = document.createElement('span');
-  spanElm.className = `mdi mdi-arrow-${direction}`;
-  divElm.appendChild(spanElm);
-  fragment.appendChild(divElm);
-  if (value instanceof HTMLElement) {
-    divElm.appendChild(value);
-  } else {
-    divElm.appendChild(document.createTextNode(value));
-  }
-  return fragment;
-};
-
-const transactionTypeFormatter: Formatter = (_row, _cell, value: string) =>
-  `<div class="d-inline-flex align-items-center"><span class="me-1 mdi mdi-16px mdi-${value === 'Buy' ? 'plus' : 'minus'}-circle ${value === 'Buy' ? 'text-info' : 'text-warning'}"></span> ${value}</div>`;
-
-const historicSparklineFormatter: Formatter = (_row, _cell, _value: string, _col, dataContext) => {
-  if (dataContext.historic.length < 2) {
-    return '';
-  }
-  const svgElem = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-  svgElem.setAttributeNS(null, 'width', '135');
-  svgElem.setAttributeNS(null, 'height', '30');
-  svgElem.setAttributeNS(null, 'stroke-width', '2');
-  svgElem.classList.add('sparkline');
-  sparkline(svgElem, dataContext.historic, {
-    cursorwidth: 2,
-    onmousemove: (event, datapoint) => {
-      const svg = (event.target as HTMLElement).closest('svg');
-      const tooltip = svg?.nextElementSibling as HTMLElement;
-      if (tooltip) {
-        tooltip.hidden = false;
-        tooltip.textContent = `$${((datapoint.value * 100) / 100).toFixed(2)}`;
-        tooltip.style.top = `${event.offsetY}px`;
-        tooltip.style.left = `${event.offsetX + 20}px`;
-      }
-    },
-    onmouseout: (event) => {
-      const svg = (event.target as HTMLElement).closest('svg');
-      const tooltip = svg?.nextElementSibling as HTMLElement;
-      if (tooltip) {
-        tooltip.hidden = true;
-      }
-    },
-  });
-  const div = document.createElement('div');
-  div.appendChild(svgElem);
-  div.appendChild(createDomElement('div', { className: 'trading-tooltip', hidden: true }));
-  return div;
-};
-
-@Component({
-  templateUrl: './example34.component.html',
-  styleUrls: ['./example34.component.scss'],
-  encapsulation: ViewEncapsulation.None,
-  standalone: false,
-})
-export class Example34Component implements OnDestroy, OnInit {
-  private _darkMode = false;
-  angularGrid!: AngularGridInstance;
-  gridOptions!: GridOption;
-  columnDefinitions: Column[] = [];
-  dataset: any[] = [];
-  isFullScreen = false;
-  highlightDuration = 150;
-  itemCount = 200;
-  minChangePerCycle = 0;
-  maxChangePerCycle = 10;
-  refreshRate = 75;
-  timer: any;
-
-  ngOnInit(): void {
-    this.defineGrid();
-
-    // mock a dataset
-    this.dataset = this.loadData(NB_ROWS);
-
-    setTimeout(() => {
-      this.startSimulation();
-    }, this.refreshRate);
-  }
-
-  ngOnDestroy(): void {
-    this.stopSimulation();
-    document.querySelector('.panel-wm-content')!.classList.remove('dark-mode');
-    document.querySelector<HTMLDivElement>('#demo-container')!.dataset.bsTheme = 'light';
-  }
-
-  angularGridReady(angularGrid: AngularGridInstance) {
-    this.angularGrid = angularGrid;
-  }
-
-  /* Define grid Options and Columns */
-  defineGrid() {
-    // the columns field property is type-safe, try to add a different string not representing one of DataItems properties
-    this.columnDefinitions = [
-      {
-        id: 'currency',
-        name: 'Currency',
-        field: 'currency',
-        filterable: true,
-        sortable: true,
-        minWidth: 65,
-        width: 65,
-        formatter: currencyFormatter,
-        filter: {
-          model: Filters.singleSelect,
-          collection: [
-            { label: '', value: '' },
-            { label: 'CAD', value: 'CAD' },
-            { label: 'USD', value: 'USD' },
-          ],
-        },
-        grouping: {
-          getter: 'currency',
-          formatter: (g) =>
-            `Currency: <span style="var(--slick-primary-color); font-weight: bold;">${g.value}</span>  <span style="color: #659bff;">(${g.count} items)</span>`,
-          aggregators: [new Aggregators.Sum('amount')],
-          aggregateCollapsed: true,
-          collapsed: false,
-        },
-      },
-      { id: 'symbol', name: 'Symbol', field: 'symbol', filterable: true, sortable: true, minWidth: 65, width: 65 },
-      {
-        id: 'market',
-        name: 'Market',
-        field: 'market',
-        filterable: true,
-        sortable: true,
-        minWidth: 75,
-        width: 75,
-        grouping: {
-          getter: 'market',
-          formatter: (g) =>
-            `Market: <span style="var(--slick-primary-color); font-weight: bold;">${g.value}</span>  <span style="color: #659bff;">(${g.count} items)</span>`,
-          aggregators: [new Aggregators.Sum('amount')],
-          aggregateCollapsed: true,
-          collapsed: false,
-        },
-      },
-      { id: 'company', name: 'Company', field: 'company', filterable: true, sortable: true, minWidth: 80, width: 130 },
-      {
-        id: 'trsnType',
-        name: 'Type',
-        field: 'trsnType',
-        filterable: true,
-        sortable: true,
-        minWidth: 60,
-        width: 60,
-        formatter: transactionTypeFormatter,
-        filter: {
-          model: Filters.singleSelect,
-          collection: [
-            { label: '', value: '' },
-            { label: 'Buy', value: 'Buy' },
-            { label: 'Sell', value: 'Sell' },
-          ],
-        },
-        grouping: {
-          getter: 'trsnType',
-          formatter: (g) =>
-            `Type: <span style="var(--slick-primary-color); font-weight: bold;">${g.value}</span>  <span style="color: #659bff;">(${g.count} items)</span>`,
-          aggregators: [new Aggregators.Sum('amount')],
-          aggregateCollapsed: true,
-          collapsed: false,
-        },
-      },
-      {
-        id: 'priceChange',
-        name: 'Change',
-        field: 'priceChange',
-        filterable: true,
-        sortable: true,
-        minWidth: 80,
-        width: 80,
-        filter: { model: Filters.compoundInputNumber },
-        type: 'number',
-        formatter: Formatters.multiple,
-        params: {
-          formatters: [Formatters.dollar, priceFormatter],
-          maxDecimal: 2,
-        },
-      },
-      {
-        id: 'price',
-        name: 'Price',
-        field: 'price',
-        filterable: true,
-        sortable: true,
-        minWidth: 70,
-        width: 70,
-        filter: { model: Filters.compoundInputNumber },
-        type: 'number',
-        formatter: Formatters.dollar,
-        params: { maxDecimal: 2 },
-      },
-      {
-        id: 'quantity',
-        name: 'Quantity',
-        field: 'quantity',
-        filterable: true,
-        sortable: true,
-        minWidth: 70,
-        width: 70,
-        filter: { model: Filters.compoundInputNumber },
-        type: 'number',
-      },
-      {
-        id: 'amount',
-        name: 'Amount',
-        field: 'amount',
-        filterable: true,
-        sortable: true,
-        minWidth: 70,
-        width: 60,
-        filter: { model: Filters.compoundInputNumber },
-        type: 'number',
-        formatter: Formatters.dollar,
-        params: { maxDecimal: 2 },
-        groupTotalsFormatter: GroupTotalFormatters.sumTotalsDollarBold,
-      },
-      {
-        id: 'historic',
-        name: 'Price History',
-        field: 'historic',
-        minWidth: 100,
-        width: 150,
-        maxWidth: 150,
-        formatter: historicSparklineFormatter,
-      },
-      {
-        id: 'execution',
-        name: 'Execution Timestamp',
-        field: 'execution',
-        filterable: true,
-        sortable: true,
-        minWidth: 125,
-        formatter: Formatters.dateTimeIsoAmPm,
-        exportWithFormatter: true,
-        type: 'dateTimeIsoAM_PM',
-        filter: { model: Filters.compoundDate },
-      },
-    ];
-
-    this.gridOptions = {
-      autoResize: {
-        container: '.trading-platform',
-        autoHeight: false,
-        rightPadding: 0,
-        bottomPadding: 10,
-      },
-      formatterOptions: {
-        displayNegativeNumberWithParentheses: true,
-        thousandSeparator: ',',
-      },
-      draggableGrouping: {
-        dropPlaceHolderText: 'Drop a column header here to group by any of these available columns: Currency, Market or Type',
-        deleteIconCssClass: 'mdi mdi-close',
-      },
-      enableDraggableGrouping: true,
-      createPreHeaderPanel: true,
-      darkMode: this._darkMode,
-      showPreHeaderPanel: true,
-      preHeaderPanelHeight: 40,
-      enableCellNavigation: true,
-      enableFiltering: true,
-      cellHighlightCssClass: 'changed',
-    };
-  }
-
-  loadData(itemCount: number): any[] {
-    // mock a dataset
-    const tmpDataset = [];
-    for (let i = 0; i < itemCount; i++) {
-      const randomPercent = Math.round(Math.random() * 100);
-      const randomLowQty = this.randomNumber(1, 50);
-      const randomHighQty = this.randomNumber(125, 255);
-      const priceChange = this.randomNumber(-25, 35, false);
-      const price = this.randomNumber(priceChange, 300);
-      const quantity = price < 5 ? randomHighQty : randomLowQty;
-      const amount = price * quantity;
-      const now = new Date();
-      now.setHours(9, 30, 0);
-      const currency = Math.floor(Math.random() * 10) % 2 ? 'CAD' : 'USD';
-      const company = faker.company.name();
-
-      tmpDataset[i] = {
-        id: i,
-        currency,
-        trsnType: Math.round(Math.random() * 100) % 2 ? 'Buy' : 'Sell',
-        company,
-        symbol: currency === 'CAD' ? company.substr(0, 3).toUpperCase() + '.TO' : company.substr(0, 4).toUpperCase(),
-        market: currency === 'CAD' ? 'TSX' : price > 200 ? 'Nasdaq' : 'S&P 500',
-        duration: i % 33 === 0 ? null : Math.random() * 100 + '',
-        percentCompleteNumber: randomPercent,
-        priceChange,
-        price,
-        quantity,
-        amount,
-        execution: now,
-        historic: [price],
-      };
-    }
-
-    return tmpDataset;
-  }
-
-  startSimulation() {
-    const changes: any = {};
-    const numberOfUpdates = this.randomNumber(this.minChangePerCycle, this.maxChangePerCycle);
-
-    for (let i = 0; i < numberOfUpdates; i++) {
-      const randomLowQty = this.randomNumber(1, 50);
-      const randomHighQty = this.randomNumber(125, 255);
-      const rowNumber = Math.round(Math.random() * (this.dataset.length - 1));
-      const priceChange = this.randomNumber(-25, 25, false);
-      const prevItem = deepCopy(this.dataset[rowNumber]);
-      const itemTmp = { ...this.dataset[rowNumber] };
-      itemTmp.priceChange = priceChange;
-      itemTmp.price = itemTmp.price + priceChange < 0 ? 0 : itemTmp.price + priceChange;
-      itemTmp.quantity = itemTmp.price < 5 ? randomHighQty : randomLowQty;
-      itemTmp.amount = itemTmp.price * itemTmp.quantity;
-      itemTmp.trsnType = Math.round(Math.random() * 100) % 2 ? 'Buy' : 'Sell';
-      itemTmp.execution = new Date();
-      itemTmp.historic.push(itemTmp.price);
-      itemTmp.historic = itemTmp.historic.slice(-20); // keep a max of X historic values
-
-      if (!changes[rowNumber]) {
-        changes[rowNumber] = {};
-      }
-
-      // highlight whichever cell is being changed
-      changes[rowNumber]['id'] = 'changed';
-      this.renderCellHighlighting(itemTmp, this.findColumnById('priceChange'), priceChange);
-      if ((prevItem.priceChange < 0 && itemTmp.priceChange > 0) || (prevItem.priceChange > 0 && itemTmp.priceChange < 0)) {
-        this.renderCellHighlighting(itemTmp, this.findColumnById('price'), priceChange);
-      }
-      // if (prevItem.trsnType !== itemTmp.trsnType) {
-      //   this.renderCellHighlighting(itemTmp, this.findColumnById('trsnType'), priceChange);
-      // }
-
-      // update the data
-      this.angularGrid.dataView.updateItem(itemTmp.id, itemTmp);
-      // NOTE: we should also invalidate/render the row after updating cell data to see the new data rendered in the UI
-      // but the cell highlight actually does that for us so we can skip it
-    }
-
-    this.timer = setTimeout(this.startSimulation.bind(this), this.refreshRate || 0);
-  }
-
-  stopSimulation() {
-    clearTimeout(this.timer);
-  }
-
-  findColumnById(columnName: string): Column {
-    return this.columnDefinitions.find((col) => col.field === columnName) as Column;
-  }
-
-  renderCellHighlighting(item: any, column: Column, priceChange: number) {
-    if (item && column) {
-      const row = this.angularGrid.dataView.getRowByItem(item) as number;
-      if (row >= 0) {
-        const hash = { [row]: { [column.id]: priceChange >= 0 ? 'changed-gain' : 'changed-loss' } };
-        this.angularGrid.slickGrid.setCellCssStyles(`highlight_${[column.id]}${row}`, hash);
-
-        // remove highlight after x amount of time
-        setTimeout(() => this.removeCellStyling(item, column, row), this.highlightDuration);
-      }
-    }
-  }
-
-  /** remove change highlight css class from that cell */
-  removeCellStyling(_item: any, column: Column, row: number) {
-    this.angularGrid?.slickGrid?.removeCellCssStyles(`highlight_${[column.id]}${row}`);
-  }
-
-  toggleFullScreen() {
-    const container = document.querySelector('.trading-platform');
-    if (container?.classList.contains('full-screen')) {
-      container.classList.remove('full-screen');
-      this.isFullScreen = false;
-    } else if (container) {
-      container.classList.add('full-screen');
-      this.isFullScreen = true;
-    }
-    this.angularGrid.resizerService.resizeGrid();
-  }
-
-  toggleDarkMode() {
-    this._darkMode = !this._darkMode;
-    this.toggleBodyBackground();
-    this.angularGrid.slickGrid?.setOptions({ darkMode: this._darkMode });
-  }
-
-  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';
-    }
-  }
-
-  private randomNumber(min: number, max: number, floor = true) {
-    const number = Math.random() * (max - min + 1) + min;
-    return floor ? Math.floor(number) : number;
-  }
-}

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

@@ -1,77 +0,0 @@
-<h2>
-  Example 35: Row Based Editing
-  <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-base-row-editing.component.ts"
-    >
-      <span class="mdi mdi-link-variant"></span> code
-    </a>
-  </span>
-</h2>
-
-<div class="subtitle">
-  <ul>
-    <li>
-      The Row Based Edit plugin allows you to edit either a single or multiple specific rows at a time, while disabling the rest of the grid
-      rows.
-    </li>
-    <li>
-      Editedable rows, as well as modified cells are highlighted with a different color, which you can customize using css variables (see
-      <a
-        target="_blank"
-        href="https://github.com/ghiscoding/slickgrid-universal/blob/master/frameworks/angular-slickgrid/src/demos/examples/grid-base-row-editing.component.scss"
-      >
-        grid-base-row-editing.component.scss </a
-      >)
-    </li>
-    <li>Modifications are kept track of and if the cancel button is pressed, all modifications are rolled back.</li>
-    <li>
-      If the save button is pressed, a custom "onBeforeRowUpdated" callback is called, which you can use to save the data with your
-      backend.<br />
-      The callback needs to return a Promise&lt;boolean&gt; and if the promise resolves to true, then the row will be updated, otherwise it
-      will be cancelled and stays in edit mode. You can try out the later by defining a Duration value <b>larger than 40</b>.
-      <br />
-      <small
-        ><span class="has-text-danger">NOTE:</span> You can also combine this with e.g. Batch Editing like shown
-        <a href="#/example30">in Example 30</a></small
-      >
-    </li>
-    <li>
-      This example additionally uses the ExcelCopyBuffer Plugin, which you can see also in Slickgrid-Universal
-      <a href="https://ghiscoding.github.io/slickgrid-universal/#/example19">example 19</a>. The example defines a rule that pastes in the
-      first column are prohibited. In combination with the Row Based Editing Plugin though, this rule gets enhanced with the fact that only
-      the edited rows are allowed to be pasted into, while still respecting the original rule.
-    </li>
-  </ul>
-</div>
-
-<section>
-  <div class="row mb-4">
-    <div class="col-sm-8">
-      <button class="btn btn-outline-secondary btn-sm" data-test="single-multi-toggle" (click)="toggleSingleMultiRowEdit()">
-        Toggle Single/Multi Row Edit
-      </button>
-      <button class="btn btn-outline-secondary btn-sm btn-icon" data-test="toggle-language" (click)="switchLanguage()">
-        <i class="mdi mdi-translate"></i>
-        Switch Language
-      </button>
-      <b>Locale:</b> <span style="font-style: italic" data-test="selected-locale">{{ selectedLanguage + '.json' }}</span>
-    </div>
-
-    <div class="col-sm-4" [class]="statusClass">
-      <strong>Status: </strong>
-      <span data-test="fetch-result" [textContent]="fetchResult"></span>
-    </div>
-  </div>
-</section>
-
-<angular-slickgrid
-  gridId="grid35"
-  [columns]="columnDefinitions"
-  [options]="gridOptions"
-  [dataset]="dataset"
-  (onAngularGridCreated)="angularGridReady($event.detail)"
->
-</angular-slickgrid>

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

@@ -1,18 +0,0 @@
-:root {
-  // turn on/off the following variables to see the difference in styling
-
-  // --slick-row-based-edit-editmode-bgcolor: rgb(82, 235, 158);
-  // --slick-row-based-edit-editmode-hover-bgcolor: cyan;
-  // --slick-row-based-edit-unsaved-cell-bgcolor: rgb(190, 114, 127);
-  // --slick-row-based-edit-editmode-active-bgcolor: rgb(82, 235, 158);
-  // --slick-row-based-edit-editmode-active-hover-bgcolor: cyan;
-}
-
-.alert {
-  padding: 8px;
-  margin-bottom: 10px
-}
-
-.status-container {
-  min-height: 50px;
-}