angular-slickgrid 9.0.0 → 9.0.2

package/docs/column-functionalities/filters/single-search-filter.md

@@ -1,77 +0,0 @@
-#### Index
-- [Update Filters Dynamically](input-filter.md#update-filters-dynamically)
-- [Custom Filter Predicate](input-filter.md#custom-filter-predicate)
-
-### Description
-Some users might want to have 1 main single search for filtering the grid data instead of using multiple column filters. You can see a demo of that below
-
-### Code Sample
-#### View
-```html
-<angular-slickgrid gridId="grid23" [columns]="columnDefinitions" [options]="gridOptions"
-   [dataset]="dataset" (onAngularGridCreated)="angularGridReady($event.detail)">
-</angular-slickgrid>
-
-<form class="form-inline">
-    <div class="form-group">
-        <label>Single Search: </label>
-        <select class="form-control" name="selectedColumn" [(ngModel)]="selectedColumn"
-            (ngModelChange)="updateFilter()">
-            <option [ngValue]="field" *ngFor="let field of columnDefinitions">{{field.name}}</option>
-        </select>
-        <select class="form-control" name="selectedOperator" [(ngModel)]="selectedOperator"
-            (ngModelChange)="updateFilter()">
-            <option [ngValue]="operator" *ngFor="let operator of operatorList">{{operator}}</option>
-            </select>
-
-        <input type="text" class="form-control" name="searchValue" placeholder="search value" autocomplete="off"
-                (input)="updateFilter()" [(ngModel)]="searchValue">
-    </div>
-</form>
-```
-
-##### ViewModel
-```ts
-export class MyComponent {
-  angularGrid: AngularGridInstance;
-  grid: any;
-  dataView: any;
-  columnDefinitions: Column[];
-  gridOptions: GridOption;
-  dataset: any[];
-  operatorList: OperatorString[] = ['=', '<', '<=', '>', '>=', '<>'];
-  selectedOperator = '=';
-  searchValue = '';
-  selectedColumn: Column;
-
-  angularGridReady(angularGrid: AngularGridInstance) {
-    this.angularGrid = angularGrid;
-  }
-
-  updateFilter() {
-    if (this.selectedColumn && this.selectedOperator) {
-      const fieldName = this.selectedColumn.field;
-      const filter = {};
-      const filterArg: FilterCallbackArg = {
-        columnDef: this.selectedColumn,
-        operator: this.selectedOperator as OperatorString, // or fix one yourself like '='
-        searchTerms: [this.searchValue || '']
-      };
-
-      if (this.searchValue) {
-        // pass a columnFilter object as an object which it's property name must be a column field name (e.g.: 'duration': {...} )
-        filter[fieldName] = filterArg;
-      }
-
-      this.angularGrid.dataView.setFilterArgs({
-        columnFilters: filter,
-        grid: this.angularGrid.slickGrid
-      });
-      this.angularGrid.dataView.refresh();
-    }
-  }
-}
-```
-
-## Sample
-![2019-04-16_15-42-05](https://user-images.githubusercontent.com/643976/56239148-3b530680-605e-11e9-99a2-e9a163abdd0c.gif)

package/docs/column-functionalities/filters/styling-filled-filters.md

@@ -1,45 +0,0 @@
-You can style any (or all) of the Filter(s) when they have value, the lib will automatically add a `filled` CSS class which you can style as you see fit. There is no style by default, if you wish to add styling, you will be required to add your own.
-
-## Styled Example
-![grid_filled_styling](https://user-images.githubusercontent.com/643976/51334569-14306d00-1a4e-11e9-816c-439796eb8a59.png)
-
-## Code example
-For example, the print screen shown earlier was styled using this piece of SASS (`.scss`) code. You can customize the styling to your liking.
-
-```scss
-$slick-filled-filter-color:       $slick-form-control-focus-border-color;
-$slick-filled-filter-border:      $slick-form-control-border;
-$slick-filled-filter-box-shadow:  $slick-form-control-focus-border-color;
-$slick-filled-filter-font-weight: 400;
-
-.slick-headerrow {
-  input.search-filter.filled,
-  .search-filter.filled input,
-  .search-filter.filled .date-picker input,
-  .search-filter.filled .input-group-addon.slider-value,
-  .search-filter.filled .input-group-addon.slider-range-value,
-  .search-filter.filled .input-group-addon select {
-    color: $slick-filled-filter-color;
-    font-weight: $slick-filled-filter-font-weight;
-    border: $slick-filled-filter-border;
-    box-shadow: $slick-filled-filter-box-shadow;
-    &.input-group-prepend {
-      border-right: 0;
-    }
-    &.input-group-append {
-      border-left: 0;
-    }
-  }
-  .search-filter.filled .input-group-prepend select {
-    border-right: 0;
-  }
-  .search-filter.filled .ms-choice {
-    box-shadow: $slick-filled-filter-box-shadow;
-    border:$slick-filled-filter-border;
-    span {
-      font-weight: $slick-filled-filter-font-weight;
-      color: $slick-filled-filter-color;
-    }
-  }
-}
-```

package/docs/column-functionalities/formatters.md

@@ -1,325 +0,0 @@
-# Formatters
-
-#### Index
-
-* [Built-in Formatter](#list-of-provided-formatters)
-* [Extra Params/Arguments](#extra-argumentsparams)
-* [Using Multiple Formatters](#using-multiple-formatters)
-* [Custom Formatter](#custom-formatter)
-  - [Example of a Custom Formatter with HTML string](#example-of-a-custom-formatter-with-html-string)
-  - [Example with `FormatterResultObject` instead of a string](#example-with-formatterresultobject-instead-of-a-string)
-  - [Example of Custom Formatter with Native DOM Element](#example-of-custom-formatter-with-native-dom-element)
-* [Common Formatter Options](#common-formatter-options)
-* [PostRenderer Formatter](#postrender-formatter)
-
-#### Definition
-
-`Formatters` are functions that can be used to change and format certain column(s) in the grid. Please note that it does not alter the input data, it simply changes the styling by formatting the data differently to the screen (what the user visually see).
-
-A good example of a `Formatter` could be a timestamp or a `Date` object that we could format differently in the grid, for example using `Formatters.dateIso` or `Formatters.dateUs` which is more human readable.
-
-#### Provided Formatters
-
-`Slickgrid-Universal` ships with a few `Formatters` by default which helps with common fields, you can see the [entire list here](https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/common/src/formatters/index.ts#L37).
-
-> **Note** you might not need a Formatter when simple CSS styling and class might be enough, think about using `cssClass` column property as much as possible since it has much better perf.
-> For example: `{ cssClass: 'text-right' }` on your column definition (or any other class) to align on the right.
-
-**List of provided `Formatters`**
-
-* `Formatters.arrayObjectToCsv`: Takes an array of complex objects and converts it to a comma delimited string.
-  * you also need to pass the property name(s) for the complex object, i.e.: `formatter: Formatters.arrayObjectToCsv, params: { propertyNames: ['name'], useFormatterOuputToFilter: true }`
-* `Formatters.arrayToCsv` : takes an array of text and returns it as CSV string
-* `Formatters.checkmarkMaterial` will display a checkmark icon when value is truthy using Material Design icons
-* `Formatters.collection`: Looks up values from the columnDefinition.params.collection property and displays the label in CSV or string format
-* `Formatters.complexObject`: takes a complex object (with a `field` that has a `.` notation) and pull correct value, there are multiple ways to use it
-  1. `{ id: 'firstName', field: 'user.firstName', formatter: Formatters.complexObject}`, will display the user's first name
-  2. `{ id: 'firstName', field: 'user', labelKey: 'firstName', params: { complexField: 'user' }, ... }`
-  3. `{ id: 'firstName', field: 'user', params: { complexField: 'user.firstName' }, ... }`
-* `Formatters.currency`: will help with currency other than dollar (ie `€`), there are multiple `params` available for this formatter
-  * `currencyPrefix`, `currencySuffix`, `minDecimal`, `maxDecimal`, `numberPrefix`, `numberSuffix`, `decimalSeparator`, `thousandSeparator` and `displayNegativeNumberWithParentheses`
-  * the distinction between `numberPrefix` and `currencyPrefix` can be seen when using `displayNegativeNumberWithParentheses`, for example if we have a value of `-12.432` with the `Formatters.currency` and `params: { currencyPrefix: '€', numberPrefix: 'Price ', numberSuffix: 'EUR' }` the output will be `"Price (€12.432) EUR"`
-* `Formatters.dateEuro`: Takes a Date object and displays it as an Euro Date format (DD/MM/YYYY)
-* `Formatters.dateTimeEuro`: Takes a Date object and displays it as an Euro Date+Time format (DD/MM/YYYY HH:mm:ss)
-* `Formatters.dateTimeShortEuro`: Takes a Date object and displays it as an Euro Date+Time (without seconds) format (DD/MM/YYYY HH:mm)
-* `Formatters.dateTimeEuroAmPm`: Takes a Date object and displays it as an Euro Date+Time+(am/pm) format (DD/MM/YYYY hh:mm:ss a)
-* `Formatters.dateIso` : Takes a Date object and displays it as an ISO Date format (YYYY-MM-DD)
-* `Formatters.dateTimeIso` : Takes a Date object and displays it as an ISO Date+Time format (YYYY-MM-DD HH:mm:ss)
-* `Formatters.dateTimeIsoAmPm` : Takes a Date object and displays it as an ISO Date+Time+(am/pm) format (YYYY-MM-DD h:mm:ss a)
-* `Formatters.dateTimeShortIso`: Takes a Date object and displays it as an ISO Date+Time (without seconds) format (YYYY-MM-DD HH:mm)
-* `Formatters.dateUs` : Takes a Date object and displays it as an US Date format (MM/DD/YYYY)
-* `Formatters.dateTimeUs` : Takes a Date object and displays it as an US Date+Time format (MM/DD/YYYY HH:mm:ss)
-* `Formatters.dateTimeShortUs`: Takes a Date object and displays it as an US Date+Time (without seconds) format (MM/DD/YYYY HH:mm:ss)
-* `Formatters.dateTimeUsAmPm` : Takes a Date object and displays it as an US Date+Time+(am/pm) format (MM/DD/YYYY hh:mm:ss a)
-* `Formatters.dateUtc` : Takes a Date object and displays it as a TZ format (YYYY-MM-DDThh:mm:ssZ)
-* `Formatters.date`: Base Date Formatter, this formatter is a bit different compare to other date formatter since this one requires the user to provide a custom format in `params.dateFormat`
-  - for example: `{ type: 'date', formatter: Formatters.date, params: { dateFormat: 'MMM DD, YYYY' }}`
-* `Formatters.decimal`: Display the value as x decimals formatted, defaults to 2 decimals. You can pass "minDecimal" and/or "maxDecimal" to the "params" property.
-* `Formatters.dollar`: Display the value as 2 decimals formatted with dollar sign '$' at the end of of the value.
-* `Formatters.dollarColored`: Display the value as 2 decimals formatted with dollar sign '$' at the end of of the value, change color of text to red/green on negative/positive value
-* `Formatters.dollarColoredBoldFormatter`: Display the value as 2 decimals formatted with dollar sign '$' at the end of of the value, change color of text to red/green on negative/positive value, show it in bold font weight as well
-* `Formatters.hyperlink`: takes a URL cell value and wraps it into a clickable hyperlink `<a href="value">value</a>`
-  * the cell value **must contain** (`ftp://abc`, `http://abc` or `https://abc`), if it doesn't then use `fakeHyperlink`
-* `Formatters.hyperlinkUriPrefix`: format a URI prefix into an hyperlink
-* `Formatters.icon`: to display an icon with defined CSS class name, use `params` to pass a `cssClass` property
-* `Formatters.iconBoolean`: similar to `icon` but will only be displayed on a Boolean truthy value, use `params` to pass a `cssClass` property
-* `Formatters.mask`: to change the string output using a mask, use `params` to pass a `mask` property
-  * example: `{ field: 'phone', formatter: Formatters.mask, params: { mask: '(000) 000-0000' }}`
-* `Formatters.multiple`: pipe multiple formatters (executed in sequence), use `params` to pass the list of formatters.
-  * example: `{ field: 'title', formatter: Formatters.multiple, params: { formatters: [ Formatters.lowercase, Formatters.uppercase ] }`
-* `Formatters.percent`: Takes a cell value number (between 0.0-1.0) and displays a red (<50) or green (>=50) bar
-* `Formatters.percentComplete` : takes a percentage value (0-100%), displays a bar following this logic:
-  * `red`: < 30%, `grey`: < 70%, `green`: >= 70%
-* `Formatters.percentCompleteBar` : same as `percentComplete` but uses [Bootstrap - Progress Bar with label](https://getbootstrap.com/docs/3.3/components/#progress-label).
-* `Formatters.percentCompleteBarWithText`: Takes a cell value number (between 0-100) and displays SlickGrid custom "percent-complete-bar" with Text a red (<30), silver (>30 & <70) or green (>=70) bar
-* `Formatters.percentSymbol`: Takes a cell value number (between 0-100) and add the "%" after the number
-* `Formatters.progressBar`: Takes a cell value number (between 0-100) and displays Bootstrap "progress-bar" a red (<30), silver (>30 & <70) or green (>=70) bar
-* `Formatters.translate`: Takes a cell value and translates it (i18n). Requires an instance of the Translate Service:: \`i18n: translate
-* `Formatters.translateBoolean`: Takes a boolean value, cast it to upperCase string and finally translates it (i18n).
-* `Formatters.tree`: Formatter that must be used when the column is a Tree Data column
-
-> **Note:** The list might not be up to date (especially for Dates), please refer to the [Formatters export](https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/common/src/formatters/index.ts#L37) to know exactly which formatters are available.
-
-> **Note** all Date formatters are formatted using [Tempo](https://tempo.formkit.com/#format-tokens). There are also many more Date formats not shown above, simply visit the [formatters.index](https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/common/src/formatters/formatters.index.ts#L101) to see all available Date/Time formats.
-
-### Usage
-To use any of them, you simply need to import `Formatters` from `Slickgrid-Universal` and add a `formatter: Formatters.xyz` (where `xyx` is the name of the built-in formatter) in your column definitions as shown below:
-
-```ts
-import { Formatters } from 'angular-slickgrid';
-
-export class GridBasicComponent implements OnInit {
-  columnDefinitions: Column[];
-  gridOptions: GridOption;
-  dataset: any[];
-
-  ngOnInit(): void {
-    this.columnDefinitions = [
-      { id: 'title', name: 'Title', field: 'title' },
-      { id: 'duration', name: 'Duration (days)', field: 'duration' },
-      { id: '%', name: '% Complete', field: 'percentComplete', formatter: Formatters.percentComplete },
-      { id: 'start', name: 'Start', field: 'start', formatter: Formatters.dateIso },
-      { id: 'finish', name: 'Finish', field: 'finish', formatter: Formatters.dateIso },
-      { id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven', formatter: Formatters.checkmark }
-    ];
-  }
-}
-```
-
-#### Extra Arguments/Params
-
-What if you want to pass extra arguments that you want to use within the Formatter? You can use `params` for that. For example, let say you have a custom formatter to build a select list (dropdown), you could do it this way:
-
-```ts
-let optionList = ['True', 'False'];
-
-this.columnDefinitions = [
-      { id: 'title', field: 'title',
-        headerTranslate: 'TITLE',
-        formatter: myCustomSelectFormatter,
-        params: { options: optionList }
-      },
-```
-
-### Using Multiple Formatters
-
-SlickGrid only has 1 `formatter` property but if you want to use more than 1 Formatter then you'll want to use the `Formatters.multiple` and pass every Formatters inside your column definition `params: { formatters: [] }` as shown below.
-
-**Note:** please note that combining multiple Formatters has the side effect of cascading the formatted `value` output to the next Formatter. So for example if you use the `complexObject` and `dollar` Formatters, you want to make sure to define them in the correct order in your `formatters: []` array as shown below.
-
-* what if you want to avoid overwriting the `value` with a Custom Formatter?
-  * in that case you can have your Formatter return a [FormatterResultObject](#formatterresultobject), see below.
-
-```ts
-// Data Example::
-// data = [{ shipping: { cost: 123.22, address: { zip: 123456 } } }];
-
-this.columnDefinitions = [
-  {
-    id: 'shippingCost', field: 'shipping.cost', name: 'Shipping Cost',
-    formatter: Formatters.multiple,
-    params: {
-      // list of Formatters (the order is very important)
-      formatters: [Formatters.complexObject, Formatters.dollar],
-    }
-  },
-];
-```
-
-### Custom Formatter
-
-You could also create your own custom `Formatter` by simply following the structure shown below.
-
-#### TypeScript function signature
-
-```ts
-export type Formatter = (row: number, cell: number, value: any, columnDef: Column, dataContext: any, grid?: any) => string | FormatterResultObject;
-```
-
-#### FormatterResultObject
-
-The most common return result of a Formatter is a `string` but you could also use the `FormatterResultObject` which is an object with the interface signature shown below. The main difference is that it will allow to add CSS classes directly to the cell container instead of having to create an extra `<div>` container and since that is the main cell container, you can add multiple Formatters to add/remove multiple CSS classes on that same container.
-
-```ts
-export interface FormatterResultObject {
-  addClasses?: string;
-  removeClasses?: string;
-  text: string;
-  toolTip?: string;
-}
-```
-
-### Example of a Custom Formatter with HTML string
-
-For example, we will use our optional SVG icons `.mdi` with a `boolean` as input data, and display a (fire) icon when `True` or a (snowflake) when `False`. This custom formatter is actually display in the [UI sample](#ui-sample) shown below.
-```ts
-// create a custom Formatter with the Formatter type
-const myCustomCheckboxFormatter: Formatter = (row: number, cell: number, value: any, columnDef: Column, dataContext: any) =>
-  value ? `<i class="mdi mdi-fire" aria-hidden="true"></i>` : '<i class="mdi mdi-snowflake" aria-hidden="true"></i>';
-```
-
-#### Example with `FormatterResultObject` instead of a string
-
-Using this object return type will provide the user the same look and feel, it will actually be quite different. The major difference is that all of the options (`addClasses`, `tooltip`, ...) will be added the CSS container of the cell instead of the content of that container. For example a typically cell looks like the following `<div class="slick-cell l4 r4">Task 4</div>` and if use `addClasses: 'red'`, it will end up being `<div class="slick-cell l4 r4 red">Task 4</div>` while if we use a string output of let say `<span class="red">${value></span>`, then our final result of the cell will be `<div class="slick-cell l4 r4"><span class="red">Task 4</span></div>`. This can be useful if you plan to use multiple Formatters and don't want to lose or overwrite the previous Formatter result (we do that in our project).
-
-```ts
-// create a custom Formatter and returning a string and/or an object of type FormatterResultObject
-const myCustomCheckboxFormatter: Formatter = (row: number, cell: number, value: any, columnDef: Column, dataContext: any, grid?: any) =>
-  value ? { addClasses: 'mdi mdi-fire', text: '', tooltip: 'burning fire' } : '<i class="mdi mdi-snowflake" aria-hidden="true"></i>';
-```
-
-### Example of Custom Formatter with Native DOM Element
-Since version 4.x, you can now also return native DOM element instead of an HTML string. There are 2 main reasons for going with this approach:
-1. CSP Safe by default, since it's native it is 100% CSP Safe (CSP: Content Security Policy)
-2. Performance (the reasons are similar to point 1.)
-   - since it's native it can be appended directly to the grid cell
-   - when it's an HTML string, it has to do 2 extra steps (which is an overhead process)
-      i. sanitize the string (when a sanitizer, for example [DOMPurify](https://github.com/cure53/DOMPurify))
-      ii. SlickGrid then has to convert it to native element by using `innerHTML` on the grid cell
-
-Demo
-```ts
-export const iconFormatter: Formatter = (_row, _cell, _value, columnDef) => {
-  const iconElm = document.createElement('span');
-  iconElm.className = 'mdi mdi-check';
-
-  return iconElm;
-};
-```
-
-> **Note** you could also use our helper `createDomElement` which allows to create a DOM element and pass properties like `className` in 1 liner (and it also works with intellisense). For example `createDomElement('span', { className: 'bold title', textContent: 'Hello World', title: 'some tooltip description' })` would equal to 4 lines of code.
-
-#### More Complex Example
-
-If you need to add more complex logic to a `Formatter`, you can take a look at the [percentCompleteBar](https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/common/src/formatters/percentCompleteBarFormatter.ts) `Formatter` for more inspiration.
-
-### Common Formatter Options
-
-You can set some defined common Formatter Options in your Grid Options through the `formatterOptions` in the Grid Options (locally or globally) as seen below, and/or independently through the column definition `params` (the option names are the same in both locations)
-
-```ts
-loadGrid() {
-  this.columnDefinitions = [
-    // through the column definition "params"
-    { id: 'price', field: 'price', params: { thousandSeparator: ',' } },
-  ];
-
-  // or through grid options to make it global
-  this.gridOptions = {
-    autoResize: {
-      containerId: 'demo-container',
-      sidePadding: 15
-    },
-    enableAutoResize: true,
-
-    // you customize the date separator through "formatterOptions"
-    formatterOptions: {
-      // What separator to use to display a Date, for example using "." it could be "2002.01.01"
-      dateSeparator: '/', // can be any of '/' | '-' | '.' | ' ' | ''
-
-      // Defaults to dot ".", separator to use as the decimal separator, example $123.55 or $123,55
-      decimalSeparator: ',', // can be any of '.' | ','
-
-      // Defaults to false, option to display negative numbers wrapped in parentheses, example: -$12.50 becomes ($12.50)
-      displayNegativeNumberWithParentheses: true,
-
-      // Defaults to undefined, minimum number of decimals
-      minDecimal: 2,
-
-      // Defaults to undefined, maximum number of decimals
-      maxDecimal: 4,
-
-      // Defaults to undefined, add a prefix when using `Formatters.decimal` (only) which can be used for example to display a currency.
-      // output: € 123.45'
-      numberPrefix: '€ ',
-
-      // Defaults to undefined, add a suffix when using `Formatters.decimal` (only) which can be used for example to display a currency.
-      // output: '123.45 €'
-      numberSuffix: ' €',
-
-      // Defaults to empty string, thousand separator on a number. Example: 12345678 becomes 12,345,678
-      thousandSeparator: '_', // can be any of ',' | '_' | ' ' | ''
-    },
-  }
-}
-```
-
-### Using Angular Component with `asyncPostRenderer`
-
-First of... Why can't we use Angular Component with Customer Formatters? Because of how Angular is built, it requires a full cycle for the component to be rendered with data, however SlickGrid Formatter requires only string output and it must be right away (synchronous) and Angular Component can only be returned in an async fashion (you could return it right away but the data won't be populated). That is the reason that it's not doable with a Formatter, however SlickGrid offers `asyncPostRender` which is similar to a Formatter and works in an async fashion. So that works, but it has some drawback, since it's async, it is slightly slower to render (you might visually see it rendering on the screen). All that to say, regular Formatters with jQuery and/or HTML is still the preferred way (at least to me)... but hey, if you really wish to use Angular Component, well then it's possible, just remember it's async though and slightly slower to render.
-
-Also note that the limitation that a Custom Formatters only accepts String comes from the core lib (SlickGrid) and there's nothing Angular-Slickgrid can change about that (or if you know how to overcome this issue then please create a PR), the only alternative, like I said earlier, is to use `asyncPostRender` with it's drawback (it's slightly slower to render).
-
-To avoid performance issues and memory leaks, it'd be preferable to use `asyncPostRenderCleanup`. When scrolling through your data, it allows Slickgrid to remove hidden lines' Angular Components. In your grid options, add `enableAsyncPostRenderCleanup: true` to activate it. Please note that it **doesn't** call `ngOnDestroy()`. If you want to, you can keep all Angular Component instances created in `asyncPostRender` and call the right instance's `destroy()` method in `asyncPostRenderCleanup`. The following implementation might add a heavy load on your RAM depending on the number of Angular component instances your grid needs.
-
-```ts
-import { ComponentRef, Injectable } from '@angular/core';
-import { AngularComponentOutput, AngularUtilService, Column } from 'angular-slickgrid';
-import { MyCustomComponent } from 'my-custom-component/my-custom-component.component';
-
-export interface AngularCells {
-    [id: string]: ComponentRef<any>
-}
-
-@Injectable()
-export class ColumnDefinitionsService {
-    private _angularCells: AngularCells = {};
-
-    constructor(private _angularUtilService: AngularUtilService) {}
-
-    private _setColumnsConfiguration(columns: Column[]): void {
-        columns.forEach(col => {
-            col.asyncPostRender = this._renderAngularComponent.bind(this);
-            col.asyncPostRenderCleanup = this._cleanupAngularComponent.bind(this);
-        });
-    }
-
-    private _renderAngularComponent(cellNode: HTMLElement, row: number, dataContext: any, colDef: Column): void {
-        const componentOutput: AngularComponentOutput = this._angularUtilService.createAngularComponent(MyCustomComponent );
-        Object.assign(componentOutput.componentRef.instance, {
-            [FILL YOUR INPUTS AND OUTPUTS HERE]
-            myInput: row
-        });
-
-        const id: string = `${row}-${colDef.field}`; // Gives a unique id to each cell
-        this._angularCells[id] = componentOutput.componentRef; // Assigns the component instance to the matching cell's id
-        $(cellNode).empty();
-        setTimeout(() => $(cellNode).html(componentOutput.domElement));
-    }
-
-    private _cleanupAngularComponent(cellNode: HTMLElement, row: number, colDef: Column): void {
-        const id: string = `${row}-${colDef.field}`;
-        const component: ComponentRef<any> = this._angularCells[id];
-
-        component?.destroy();
-    }
-}
-```
-
-A **Better Solution** is to use Custom Formatters **as much as possible** because using an Angular Components with `asyncPostRender` are **SLOW** (you are warned). They are slow because they require a full cycle, cannot be cached and are rendered **after** each rows are rendered (because of their asynchronous nature), while Custom Formatters are rendered at the same time as the row itself since they are synchronous in nature.
-
-**Examples**
-
-* [Example 22](https://ghiscoding.github.io/Angular-Slickgrid/#/angular-components) | [Component](../../src/app/examples/grid-angular.component.ts) | [animated gif](https://user-images.githubusercontent.com/643976/53061045-87346580-348a-11e9-95f3-dfe33be6e966.gif)
-
-In the [animated gif](https://user-images.githubusercontent.com/643976/53061045-87346580-348a-11e9-95f3-dfe33be6e966.gif), you can see the 3rd column is using `asyncPostRender` and before it gets rendered we show 3 dots (...), and if you look carefully you can see them being rendered before the actual result, it's short but it is visible.

package/docs/column-functionalities/sorting.md

@@ -1,200 +0,0 @@
-#### Index
-- [Usage](#usage)
-- [Sorting Complex Objects](#how-to-sort-complex-objects)
-- [Custom Sort Comparer](#custom-sort-comparer)
-- [Update Sorting Dynamically](#update-sorting-dynamically)
-- [Dynamic Query Field](#dynamic-query-field)
-- [Sorting Dates](#sorting-dates)
-- [Pre-Parse Date Columns for better perf](#pre-parse-date-columns-for-better-perf)
-
-### Demo
-[Demo Page](https://ghiscoding.github.io/Angular-Slickgrid/#/clientside) / [Demo Component](https://github.com/ghiscoding/slickgrid-universal/blob/master/frameworks/angular-slickgrid/src/demos/examples/grid-clientside.component.ts)
-
-### Description
-Sorting on the client side is really easy, you simply need to enable `sortable` (when not provided, it is considered as disabled) on each columns you want to sort and it will sort as a type string. Oh but wait, sorting as string might not always be ideal, what if we want to sort by number or by date? The answer is to simply pass a `type` as shown below.
-
-### Usage
-To use any of them, you can use the `FieldType` interface or enter a type via a string as shown below. Also please note that `'string'` is the default and you don't necessarily need to define it, though you could if you wish to see it in your column definition.
-
-```ts
-import { FieldType } from 'angular-slickgrid';
-
-export class GridBasicComponent implements OnInit {
-  columnDefinitions: Column[];
-  gridOptions: GridOption;
-  dataset: any[];
-
-  ngOnInit(): void {
-    this.columnDefinitions = [
-      { id: 'title', name: 'Title', field: 'title', sortable: true },
-      { id: 'duration', name: 'Duration (days)', field: 'duration', sortable: true, type: 'number' },
-      { id: '%', name: '% Complete', field: 'percentComplete', sortable: true, type: 'float'},
-      { id: 'start', name: 'Start', field: 'start', sortable: true, type: 'dateIso' },
-      { id: 'finish', name: 'Finish', field: 'finish', sortable: true, type: 'dateIso' },
-      { id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven', sortable: true }
-    ];
-  }
-}
-```
-
-### How to Sort Complex Objects?
-You can sort complex objects using the dot (.) notation inside the `field` property defined in your Columns Definition.
-
-For example, let say that we have this dataset
-```typescript
-const dataset = [
- { item: 'HP Desktop', buyer: { id: 1234, address: { street: '123 Belleville', zip: 123456 }} },
- { item: 'Lenovo Mouse', buyer: { id: 456, address: { street: '456 Hollywood blvd', zip: 789123 }} }
-];
-```
-
-We can now filter the zip code from the buyer's address using this filter:
-```typescript
-this.columnDefinitions = [
-  {
-    // the zip is a property of a complex object which is under the "buyer" property
-    // it will use the "field" property to explode (from "." notation) and find the child value
-    id: 'zip', name: 'Zip Code', field: 'buyer.address.zip', sortable: true
-  }
-  // { id: 'street',  ... },
-];
-```
-
-### Custom Sort Comparer
-If the builtin sort comparer methods are not sufficient for your use case, you could add your own custom Sort Comparer in your Column Definitions as shown below. Note that we are only showing a simple numeric sort, just adjust it to your needs.
-
-```ts
-this.columnDefinitions = [{
-  id: 'myField', name: 'My Field',
-  sorter: (a, b) => a > b ? 1 : -1,
-}];
-```
-
-similarly with a complex object
-
-```ts
-// data = { user: { firstName: 'John', lastName: 'Doe', fullName: 'John Doe' }, address: { zip: 123456 } }};
-
-this.columnDefinitions = [{
-  id: 'firstName', name: 'First Name', field: 'user.firstName',
-  sorter: (a, b) => a.fullName > b.fullName ? 1 : -1,
-}];
-```
-
-### Update Sorting Dynamically
-You can update/change the Sorting dynamically (on the fly) via the `updateSorting` method from the `SortService`. Note that calling this method will override all sorting (sorters) and replace them with the new array of sorters provided. For example, you could update the sorting from a button click or a select dropdown list with predefined filter set.
-
-##### View
-```html
-<button class="btn btn-default btn-sm" data-test="set-dynamic-sorting" (click)="setSortingDynamically()">
-    Set Sorting Dynamically
-</button>
-
-<angular-slickgrid gridId="grid1"
-   [columns]="columnDefinitions"
-   [options]="gridOptions"
-   [dataset]="dataset"
-   (onAngularGridCreated)="angularGridReady($event.detail)">
-</angular-slickgrid>
-```
-
-##### Component
-```ts
-export class Example {
-  angularGrid: AngularGridInstance;
-
-  angularGridReady(angularGrid: AngularGridInstance) {
-    this.angularGrid = angularGrid;
-  }
-
-  setSortingDynamically() {
-    this.angularGrid.sortService.updateSorting([
-      // orders matter, whichever is first in array will be the first sorted column
-      { columnId: 'duration', direction: 'ASC' },
-      { columnId: 'start', direction: 'DESC' },
-    ]);
-  }
-}
-```
-
-#### Extra Arguments
-The `updateSorting` method has 2 extra arguments:
-- 2nd argument, defaults to true, is to emit a sort changed event (the GridStateService uses this event)
-  - optional and defaults to true `updateSorting([], true)`
-- 3rd argument is to trigger a backend query (when using a Backend Service like OData/GraphQL), this could be useful when using updateFilters & updateSorting and you wish to only send the backend query once.
-  - optional and defaults to true `updateSorting([], true, true)`
-
-### Dynamic Query Field
-What if you a field that you only know which field to query only at run time and depending on the item object (`dataContext`)?
-We can defined a `queryFieldNameGetterFn` callback that will be executed on each row when Filtering and/or Sorting.
-```ts
-queryFieldNameGetterFn: (dataContext) => {
-  // do your logic and return the field name will be queried
-  // for example let say that we query "profitRatio" when we have a profit else we query "lossRatio"
-  return dataContext.profit > 0 ? 'profitRatio' : 'lossRatio';
-},
-```
-
-### Sorting Dates
-
-Date sorting should work out of the box as long as you provide the correct column field type. Note that there are various field types that can be provided and they all do different things. For the Sorting to work properly, you need to make sure to use the correct type for Date parsing to work accordingly. Below is a list of column definition types that you can provide:
-
-- `type`: input/output of date fields, or in other words, parsing/formatting dates with the field `type` provided
-- `outputType`: when a `type` is provided for parsing (i.e. from your dataset), you could use a different `outputType` to format your date differently
-- `saveOutputType`: if you already have a `type` and an `outputType` but you wish to save your date (i.e. save to DB) in yet another format
-
-### Pre-Parse Date Columns for better perf
-##### requires v8.8.0 and higher
-
-Sorting very large dataset with dates can be extremely slow when dates formated date strings, the reason is because these strings need to first be parsed and converted to real JS Dates before the Sorting process can actually happen (i.e. US Date Format). However parsing a large dataset can be slow **and** to make it worst, a Sort will revisit the same items over and over which mean that the same date strings will have to be reparsed over and over (for example while trying to Sort a dataset of 100 items, I saw some items being revisit 10 times and I can only imagine that it is exponentially worst with a large dataset).
-
-So what can we do to make this faster with a more reasonable time? Well, we can simply pre-parse all date strings once and only once and convert them to JS Date objects. Then once we get Date objects, we'll simply read the UNIX timestamp which is what we need to Sort. The first pre-parse takes a bit of time and will be executed only on the first date column Sort (any sort afterward will read the pre-parsed Date objects).
-
-What perf do we get with pre-parsing versus regular non-parsing? The benchmark was pulled using 50K items with 2 date columns (with US date format)
-- without non-parsing: ~15sec
-- with pre-parsing: ~1.4sec (1st pre-parse) and any subsequent Date sort is about ~0.2sec => so about ~1.5sec total
-
-The summary, is that we get a 10x boost **but** not only that, we also get an extremely fast subsequent sort afterward (sorting Date objects is as fast as sorting Numbers).
-
-#### Usage
-
-You can use the `preParseDateColumns` grid option, it can be set as either a `boolean` or a `string` but there's a big distinction between the 2 approaches as shown below (note that both approaches will mutate the dataset).
-1. `string` (i.e. set to `"__"`, it will parse a `"start"` date string and assign it as a `Date` object to a new `"__start"` prop)
-2. `boolean` (i.e. parse `"start"` date string and reassign it as a `Date` object on the same `"start"` prop)
-
-> **Note** this option **does not work** with the Backend Service API because it simply has no effect.
-
-For example if our dataset has 2 columns named "start" and "finish", then pre-parse the dataset,
-
-with the 1nd approach (`string`), let's use `"__"` (which is in reality a prefix) it will mutate the dataset by adding new props (where `Date` is a `Date` object)
-
-```diff
-data = [
--  { id: 0, start: '02/28/24', finish: '03/02/24' },
--  { id: 1, start: '01/14/24', finish: '02/13/24' },
-+  { id: 0, start: '02/28/24', finish: '03/02/24', __start: Date, __finish: Date },
-+  { id: 1, start: '01/14/24', finish: '02/13/24', __start: Date, __finish: Date },
-]
-```
-
-with the 2nd approach (`boolean`), it will instead mutate the dataset by overwriting the same properties
-
-```diff
-data = [
--  { id: 0, start: '02/28/24', finish: '03/02/24' },
--  { id: 1, start: '01/14/24', finish: '02/13/24' },
-+  { id: 0, start: Date, finish: Date },
-+  { id: 1, start: Date, finish: Date },
-]
-```
-
-Which approach to choose? Both have pros and cons, overwriting the same props might cause problems with the column `type` that you use, you will have to give it a try yourself. On the other hand, with the other approach, it will duplicate all date properties and take a bit more memory usage and when changing cells we'll need to make sure to keep these props in sync, however you will likely have less `type` issues.
-
-What happens when we do any cell changes (for our use case, it would be Create/Update), for any Editors we simply subscribe to the `onCellChange` change event and we re-parse the date strings when detected. We also subscribe to certain CRUD functions as long as they come from the `GridService` then all is fine... However, if you use the DataView functions directly then we have no way of knowing when to parse because these functions from the DataView don't have any events. Lastly, if we overwrite the entire dataset, we will also detect this (via an internal flag) and the next time you sort a date then the pre-parse kicks in again.
-
-#### Can I call the pre-parse myself?
-
-Yes, if for example you want to pre-parse right after the grid is loaded, you could call the pre-parse yourself for either all items or a single item
-- all item pre-parsing: `this.sgb.sortService.preParseAllDateItems();`
-  - the items will be read directly from the DataView
-- a single item parsing: `this.sgb.sortService.preParseSingleDateItem(item);`