angular-slickgrid 4.2.0 → 4.2.1

package/src/app/examples/grid-tabs.component.ts

@@ -1,115 +0,0 @@
-import { Component, OnInit, } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
-
-import { AngularGridInstance, Column, GridOption, Filters } from '../modules/angular-slickgrid';
-
-const URL_CUSTOMERS = 'assets/data/customers_100.json';
-
-@Component({
-  templateUrl: './grid-tabs.component.html'
-})
-export class GridTabsComponent implements OnInit {
-  title = 'Example 24: Grids in Bootstrap Tabs';
-  subTitle = `This example demonstrate the creation of multiple grids in Bootstrap Tabs
-   <ol>
-    <li>Regular mocked data with javascript</li>
-    <li>Load dataset through Http-Client. Also note we need to call a "resizeGrid()" after focusing on this tab</li>
-  </ol>`;
-
-  angularGrid2!: AngularGridInstance;
-  columnDefinitions1!: Column[];
-  columnDefinitions2!: Column[];
-  gridOptions1!: GridOption;
-  gridOptions2!: GridOption;
-  dataset1!: any[];
-  dataset2!: any[];
-
-  constructor(private http: HttpClient) { }
-
-  angularGrid2Ready(angularGrid: AngularGridInstance) {
-    this.angularGrid2 = angularGrid;
-  }
-
-  ngOnInit(): void {
-    this.defineGrid1();
-    this.defineGrid2();
-
-    // mock some data (different in each dataset)
-    this.dataset1 = this.mockData();
-
-    // load data with Http-Client
-    this.http.get((URL_CUSTOMERS)).subscribe(((data: any[]) => this.dataset2 = data) as any);
-  }
-
-  // Grid2 definition
-  defineGrid1() {
-    this.columnDefinitions1 = [
-      { id: 'title', name: 'Title', field: 'title', sortable: true, minWidth: 100 },
-      { id: 'duration', name: 'Duration (days)', field: 'duration', sortable: true, minWidth: 100 },
-      { id: '%', name: '% Complete', field: 'percentComplete', sortable: true, minWidth: 100 },
-      { id: 'start', name: 'Start', field: 'start', minWidth: 100 },
-      { id: 'finish', name: 'Finish', field: 'finish', minWidth: 100 },
-      { id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven', sortable: true, minWidth: 100 }
-    ];
-    this.gridOptions1 = {
-      enableAutoResize: true,
-      autoResize: {
-        container: '#demo-container',
-        rightPadding: 10
-      },
-      enableSorting: true
-    };
-  }
-
-  // Grid2 definition
-  defineGrid2() {
-    this.columnDefinitions2 = [
-      { id: 'name', name: 'Name', field: 'name', filterable: true, sortable: true, },
-      {
-        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 }
-    ];
-
-    this.gridOptions2 = {
-      enableAutoResize: true,
-      autoResize: {
-        container: '#demo-container',
-        rightPadding: 10
-      },
-      enableFiltering: true,
-      enableSorting: true
-    };
-  }
-
-  mockData() {
-    // mock a dataset
-    const mockDataset = [];
-    for (let i = 0; i < 1000; i++) {
-      const randomYear = 2000 + Math.floor(Math.random() * 10);
-      const randomMonth = Math.floor(Math.random() * 11);
-      const randomDay = Math.floor((Math.random() * 29));
-      const randomPercent = Math.round(Math.random() * 100);
-
-      mockDataset[i] = {
-        id: i,
-        title: 'Task ' + i,
-        duration: Math.round(Math.random() * 100) + '',
-        percentComplete: randomPercent,
-        start: `${randomMonth}/${randomDay}/${randomYear}`,
-        finish: `${randomMonth}/${randomDay}/${randomYear}`,
-        effortDriven: (i % 5 === 0)
-      };
-    }
-
-    return mockDataset;
-  }
-
-  resizeGrid2() {
-    this.angularGrid2.resizerService.resizeGrid();
-  }
-}

package/src/app/examples/grid-trading.component.html

@@ -1,58 +0,0 @@
-<div class="container-fluid">
-  <h2>
-    {{title}}
-    <span class="float-end">
-      <a style="font-size: 18px"
-         target="_blank"
-         href="https://github.com/ghiscoding/Angular-Slickgrid/blob/master/src/app/examples/grid-trading.component.ts">
-        <span class="fa fa-link"></span> code
-      </a>
-    </span>
-  </h2>
-  <div class="subtitle" [innerHTML]="subTitle"></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" data-test="start-btn" (click)="startSimulation()">
-            <li class="fa fa-play"></li> Start Simulation
-          </button>
-        </span>
-        <span class="me-3">
-          <button class="btn btn-outline-secondary btn-sm" data-test="stop-btn" (click)="stopSimulation()">
-            <li class="fa fa-stop"></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" (click)="toggleFullScreen()">
-            <li [class]="isFullScreen ? 'fa fa-compress' : 'fa fa-arrows-alt'"></li> Toggle Full-Screen
-          </button>
-        </div>
-      </div>
-    </div>
-
-    <angular-slickgrid gridId="grid33"
-                       [columnDefinitions]="columnDefinitions"
-                       [gridOptions]="gridOptions"
-                       [dataset]="dataset"
-                       (onAngularGridCreated)="angularGridReady($event.detail)">
-    </angular-slickgrid>
-  </div>

package/src/app/examples/grid-trading.component.scss

@@ -1,49 +0,0 @@
-// @import '@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: 8000;
-  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: none;
-  fill: rgba($sparkline-color, 0.03);
-}

package/src/app/examples/grid-trading.component.ts

@@ -1,319 +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,
-  deepCopy,
-  FieldType,
-  Filters,
-  Formatter,
-  Formatters,
-  GridOption,
-  GroupTotalFormatters,
-} from '../modules/angular-slickgrid';
-
-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: number, row: number, value: number, col: Column, dataContext: any) => {
-  const direction = dataContext.priceChange >= 0 ? 'up' : 'down';
-  return `<span class="fa fa-arrow-${direction} text-${direction === 'up' ? 'success' : 'danger'}"></span> ${value}`;
-};
-
-const transactionTypeFormatter: Formatter = (row: number, cell: number, value: string) =>
-  `<span <span class="fa fa-${value === 'Buy' ? 'plus' : 'minus'}-circle ${value === 'Buy' ? 'text-info' : 'text-warning'}"></span> ${value}`;
-
-const historicSparklineFormatter: Formatter = (row: number, cell: number, value: string, col: Column, dataContext: any) => {
-  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, { interactive: true });
-  return svgElem.outerHTML;
-};
-
-@Component({
-  templateUrl: './grid-trading.component.html',
-  styleUrls: ['./grid-trading.component.scss'],
-  encapsulation: ViewEncapsulation.None,
-})
-export class GridTradingComponent implements OnDestroy, OnInit {
-  title = 'Example 33: Real-Time Trading Platform';
-  subTitle = `Simulate a stock trading platform with lot of price changes
-    <ul>
-      <li>you can start/stop the simulation</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>
-      <li>to show SlickGrid HUGE PERF., do the following: (1) lower Changes Rate (2) increase both Changes per Cycle and (3) lower Highlight Duration
-    </ul>`;
-  angularGrid!: AngularGridInstance;
-  gridOptions!: GridOption;
-  columnDefinitions: Column[] = [];
-  dataset: any[] = [];
-  isFullScreen = false;
-  highlightDuration = 150;
-  itemCount = 200;
-  minChangePerCycle = 0;
-  maxChangePerCycle = 10;
-  refreshRate = 75;
-  timer: any;
-
-  constructor() { }
-
-  ngOnInit(): void {
-    this.defineGrid();
-
-    // mock a dataset
-    this.dataset = this.loadData(NB_ROWS);
-
-    setTimeout(() => {
-      this.startSimulation();
-    }, this.refreshRate);
-  }
-
-  ngOnDestroy(): void {
-    this.stopSimulation();
-  }
-
-  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="color: #003597; 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="color: #003597; 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="color: #003597; 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: FieldType.number,
-        formatter: Formatters.multiple,
-        params: {
-          formatters: [Formatters.dollarColored, priceFormatter],
-          maxDecimal: 2,
-        }
-
-      },
-      {
-        id: 'price', name: 'Price', field: 'price', filterable: true, sortable: true, minWidth: 70, width: 70,
-        filter: { model: Filters.compoundInputNumber }, type: FieldType.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: FieldType.number,
-      },
-      {
-        id: 'amount', name: 'Amount', field: 'amount', filterable: true, sortable: true, minWidth: 70, width: 60,
-        filter: { model: Filters.compoundInputNumber }, type: FieldType.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: FieldType.dateTimeIsoAM_PM, filter: { model: Filters.compoundDate }
-      },
-    ];
-
-    this.gridOptions = {
-      autoResize: {
-        container: '.trading-platform',
-        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: 'fa fa-times',
-      },
-      enableDraggableGrouping: true,
-      createPreHeaderPanel: true,
-      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.companyName();
-
-      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();
-  }
-
-  private randomNumber(min: number, max: number, floor = true) {
-    const number = Math.random() * (max - min + 1) + min;
-    return floor ? Math.floor(number) : number;
-  }
-}

package/src/app/examples/grid-tree-data-hierarchical.component.html

@@ -1,79 +0,0 @@
-<div class="container-fluid">
-  <h2>
-    <span [innerHTML]="title"></span>
-    <span class="float-end">
-      <a style="font-size: 18px"
-         target="_blank"
-         href="https://github.com/ghiscoding/Angular-Slickgrid/blob/master/src/app/examples/grid-tree-data-hierarchical.component.ts">
-        <span class="mdi mdi-link mdi-v-align-sub"></span> code
-      </a>
-    </span>
-  </h2>
-  <div class="subtitle" [innerHTML]="subTitle"></div>
-
-  <div class="row">
-    <div class="col-md-7">
-      <button (click)="addNewFile()" data-test="add-item-btn" class="btn btn-primary btn-sm">
-        <span class="icon mdi mdi-plus color-white"></span>
-        <span>Add New Pop Song</span>
-      </button>
-      <button (click)="collapseAll()" data-test="collapse-all-btn" class="btn btn-outline-secondary btn-sm">
-        <span class="icon mdi mdi-arrow-collapse"></span>
-        <span>Collapse All</span>
-      </button>
-      <button (click)="expandAll()" data-test="expand-all-btn" class="btn btn-outline-secondary btn-sm">
-        <span class="icon mdi mdi-arrow-expand"></span>
-        <span>Expand All</span>
-      </button>
-      <button (click)="logFlatStructure()" class="btn btn-outline-secondary btn-sm"
-              title="console.log of the Flat dataset">
-        <span>Log Flat Structure</span>
-      </button>
-      <button (click)="logHierarchicalStructure()" class="btn btn-outline-secondary btn-sm"
-              title="console.log of the Hierarchical Tree dataset">
-        <span>Log Hierarchical Structure</span>
-      </button>
-    </div>
-
-    <div class="col-md-5">
-      <div class="input-group">
-        <input type="text" class="form-control search-string" data-test="search-string"
-               placeholder="search value" autocomplete="off" [(ngModel)]="searchString"
-               (ngModelChange)="searchStringChanged()">
-        <button class="btn btn-outline-secondary" data-test="clear-search-string" (click)="clearSearch()">
-          <span class="icon mdi mdi-close-thick"></span>
-        </button>
-      </div>
-    </div>
-  </div>
-
-  <div>
-    <label class="checkbox-inline control-label" for="excludeChildWhenFiltering" style="margin-left: 20px">
-      <input type="checkbox" id="excludeChildWhenFiltering" data-test="exclude-child-when-filtering"
-             [checked]="isExcludingChildWhenFiltering"
-             (click)="changeExcludeChildWhenFiltering()">
-      <span
-            title="for example if we filter the word 'pop' and we exclude children, then only the folder 'pop' will show up without any content unless we uncheck this flag">
-        Exclude Children when Filtering Tree
-      </span>
-    </label>
-    <label class="checkbox-inline control-label" for="autoApproveParentItem" style="margin-left: 20px">
-      <input type="checkbox" id="autoApproveParentItem" data-test="auto-approve-parent-item"
-             [checked]="isAutoApproveParentItemWhenTreeColumnIsValid"
-             (click)="changeAutoApproveParentItem()">
-      <span
-            title="for example in this demo if we filter with 'music' and size '> 70' nothing will show up unless we have this flag enabled
-            because none of the files have both criteria at the same time, however the column with the tree 'file' does pass the filter criteria 'music'
-            and with this flag we tell the lib to skip any other filter(s) as soon as the with the tree (file in this demo) passes its own filter criteria">
-        Skip Other Filter Criteria when Parent with Tree is valid
-      </span>
-    </label>
-  </div>
-
-  <angular-slickgrid gridId="grid29"
-                     [columnDefinitions]="columnDefinitions"
-                     [gridOptions]="gridOptions"
-                     [datasetHierarchical]="datasetHierarchical"
-                     (onAngularGridCreated)="angularGridReady($event.detail)">
-  </angular-slickgrid>
-</div>

package/src/app/examples/grid-tree-data-hierarchical.component.scss

@@ -1,47 +0,0 @@
-/* make sure to add the @import the SlickGrid Theme AFTER the variables changes */
-@import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-salesforce.lite.scss';
-
-/*
-  www.OnlineWebFonts.Com
-  You must credit the author Copy this link on your web
-  <div>Font made from <a href="http://www.onlinewebfonts.com">oNline Web Fonts</a>is licensed by CC BY 3.0</div>
-*/
-@font-face {
-  font-family: "SalesforceSans-Regular";
-  src: url("https://db.onlinewebfonts.com/t/0fadaa21fcac88ceee0bb8da992c221b.eot"); /* IE9*/
-  src: url("https://db.onlinewebfonts.com/t/0fadaa21fcac88ceee0bb8da992c221b.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
-  url("https://db.onlinewebfonts.com/t/0fadaa21fcac88ceee0bb8da992c221b.woff2") format("woff2"), /* chrome firefox */
-  url("https://db.onlinewebfonts.com/t/0fadaa21fcac88ceee0bb8da992c221b.woff") format("woff"), /* chrome firefox */
-  url("https://db.onlinewebfonts.com/t/0fadaa21fcac88ceee0bb8da992c221b.ttf") format("truetype"), /* chrome firefox opera Safari, Android, iOS 4.2+*/
-  url("https://db.onlinewebfonts.com/t/0fadaa21fcac88ceee0bb8da992c221b.svg#SalesforceSans-Regular") format("svg"); /* iOS 4.1- */
-}
-.icon {
-    align-items: center;
-    display: inline-flex;
-    justify-content: center;
-    height: 1rem;
-    width: 1rem;
-}
-
-/** You can use the following code OR use the .color-x CSS classes */
-
-// .icon.mdi-file-pdf-outline {
-//   /** 1. use `filter` color */
-//   // filter: invert(62%) sepia(93%) saturate(5654%) hue-rotate(325deg) brightness(100%) contrast(90%);
-
-//   /** 2. or use the SASS @mixin (from Angular-Slickgrid "sass-utilities.scss") that will produce the `filter` color */
-//   @include recolor(#f14668, 0.9);
-// }
-
-// .icon.mdi-folder, .icon.mdi-folder-open {
-//   @include recolor(#ffa500, 0.9);
-// }
-// .icon.mdi-file-music-outline {
-//   @include recolor(#3298dc, 0.9);
-// }
-// .icon.mdi-file-excel-outline {
-//   @include recolor(#1E9F75, 0.9);
-// }
-// .icon.mdi-file-document-outline {
-//   @include recolor(#686868, 0.9);
-// }