angular-slickgrid 9.0.0 → 9.0.2

package/docs/developer-guides/csp-compliance.md

@@ -1,64 +0,0 @@
-## CSP Compliance
-The library is for the most part CSP (Content Security Policy) compliant since `v7.0` **but** only if you configure the `sanitizer` grid option. We were previously using `DOMPurify` internally in the project (in version <=7.x) but it was made optional in version 8 and higher. The main reason to make it optional was because some users who require SSR support could not use `dompuriy` but would rather need to use `isomorphic-dompurify`. You could also skip the `sanitizer` configuration, but that is not recommended.
-
-> **Note** even if the `sanitizer` is optional, we **strongly suggest** that you configure it as a global grid option to avoid possible XSS attacks from your data and also to be CSP compliant. Note that for Salesforce users, you do not have to configure it since Salesforce is already using DOMPurify internally for any HTML templates.
-
-As mentioned above, the project is mostly CSP compliant, however there are some exceptions to be aware of. When using any html string as template (for example with Custom Formatter returning an html string), you will not be fully compliant unless you return `TrustedHTML`. You can achieve this by using the `sanitizer` method in combo with [DOMPurify](https://github.com/cure53/DOMPurify) to return `TrustedHTML` as shown below and with that in place you should be CSP compliant.
-
-```ts
-// prefer the global grid options if possible
-this.gridOptions = {
-  sanitizer: (dirtyHtml) => DOMPurify.sanitize(dirtyHtml, { ADD_ATTR: ['level'], RETURN_TRUSTED_TYPE: true })
-};
-```
-
-> **Note** If you're wondering about the `ADD_ATTR: ['level']`, well the "level" is a custom attribute used by SlickGrid Grouping/Draggable Grouping to track the grouping level depth and it must be kept.
-
-> **Note** the DataView is not CSP safe by default, it is opt-in via the `useCSPSafeFilter` option.
-
-```typescript
-import DOMPurify from 'dompurify';
-import { Slicker, SlickVanillaGridBundle } from '@slickgrid-universal/vanilla-bundle';
-
-// DOM Purify is already configured in Slickgrid-Universal with the configuration shown below
-this.gridOptions = {
-  sanitizer: (html) => DOMPurify.sanitize(html, { RETURN_TRUSTED_TYPE: true }),
-  // you could also optionally use the sanitizerOptions instead
-  // sanitizerOptions: { RETURN_TRUSTED_TYPE: true }
-}
-this.sgb = new Slicker.GridBundle(gridContainerElm, this.columnDefinitions, this.gridOptions, this.dataset);
-```
-
-with this code in place, we can use the following CSP meta tag (which is what we use in the lib demo, ref: [index.html](https://github.com/ghiscoding/slickgrid-universal/blob/master/examples/vite-demo-vanilla-bundle/index.html#L8-L14))
-```html
-<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self' 'nonce-random-string'; require-trusted-types-for 'script'; trusted-types dompurify">
-```
-
-#### DataView
-Since we use the DataView, you will also need to enable a new `useCSPSafeFilter` flag to be CSP safe as the name suggest. This option is opt-in because it has a slight performance impact when enabling this option (it shouldn't be noticeable unless you use a very large dataset).
-
-```typescript
-import DOMPurify from 'dompurify';
-import { GridOption } from 'angular-slickgrid';
-
-export class Example1 {
-  gridOptions: GridOption;
-
-  prepareGrid() {
-    // ...
-
-    this.gridOptions = {
-      // you could also optionally use the sanitizerOptions instead
-      // sanitizerOptions: { RETURN_TRUSTED_TYPE: true }
-      dataView: {
-        useCSPSafeFilter: true
-      },
-    }
-  }
-}
-```
-
-### Custom Formatter using native HTML
-We now also allow passing native HTML Element as a Custom Formatter instead of HTML string in order to avoid the use of `innerHTML` and stay CSP safe. We also have a new grid option named `enableHtmlRendering`, which is enabled by default and is allowing the use of `innerHTML` in the library (by Formatters and others), however when disabled it will totally restrict the use of `innerHTML` which will help to stay CSP safe.
-
-You can take a look at the original SlickGrid library with this new [Filtered DataView with HTML Formatter - CSP Header (Content Security Policy)](https://6pac.github.io/SlickGrid/examples/example4-model-html-formatters.html) example which uses this new approach. There was no new Example created in Slickgrid-Universal specifically for this but the approach is the same.

package/docs/events/Available-Events.md

@@ -1,223 +0,0 @@
-## Full list of Events by Categories
-
-(see below for full list of events)
-
-All the events are published with a data payload in a `CustomEvent`, so you will typically find the payload under the `detail` property of the `CustomEvent`. However please note that the events from `SlickGrid` and `SlickDataView`, shown at the bottom of the list, are published with a different structure which is also including the JS event that it was triggered with under the property `eventData` and the payload itself is under the `args` property (which follows original SlickGrid structure). To subscribe to all events, you can use your PubSub instance (if available) or add listeners on your grid container DOM element.
-
-#### `SlickGrid` and `SlickDataView`
-```ts
-// 1. with PubSub instance
-this.angularGrid.instances?.eventPubSubService?.subscribe('onCellChange', (payload) => console.log('PubSub, cell changed data:', payload));
-
-// 2. with CustomEvent in the View (see html code below)
-handleOnCellChange(e) {
-  // `eventData` is the event it was triggered from and `args` is the data payload
-  const { eventData, args } = e.detail;
-  const dataContext = args?.item;
-  console.log('cell changed data:', args);
-}
-```
-```html
-<!-- 2. with CustomEvent in the View -->
-<angular-slickgrid
-     gridId="grid2"
-     [columns]="columnDefinitions"
-     [options]="gridOptions"
-     [dataset]="dataset"
-     (onCellChange)="handleOnCellChange($event.detail)">
-</angular-slickgrid>
-```
-
-#### all other events
-```ts
-// 1. with PubSub instance
-this.angularGrid.instances?.eventPubSubService?.subscribe('onHeaderMenuCommand', (payload) => console.log('PubSub, header menu command', payload));
-
-// 2. with CustomEvent in the View (see html code below)
-handleOnHeaderMenuCommand(e) {
-  // detail is the args data payload
-  const args = e.detail;
-  console.log('header menu command', args);
-}
-```
-```html
-<!-- 2. with CustomEvent in the View -->
-<angular-slickgrid
-     gridId="grid2"
-     [columns]="columnDefinitions"
-     [options]="gridOptions"
-     [dataset]="dataset"
-     (onHeaderMenuCommand)="handleOnHeaderMenuCommand($event.detail)">
-</angular-slickgrid>
-```
-
----
-
-#### CellExternalCopyManager (extension)
-  - `onCopyCells`
-  - `onCopyCancelled`
-  - `onPasteCells`
-  - `onBeforePasteCell`
-
-#### Context Menu / Cell Menu (extension)
-  - `onContextMenuClearGrouping`
-  - `onContextMenuCollapseAllGroups`
-  - `onContextMenuExpandAllGroups`
-  - **Slick Events**
-    - `onAfterMenuShow`
-    - `onBeforeMenuShow`
-    - `onBeforeMenuClose`
-    - `onCommand`
-    - `onOptionSelected`
-
-#### Column Picker (extension)
-  - `onColumnPickerColumnsChanged`
-  - **Slick Events**
-    - `onColumnsChanged`
-
-#### Grid Menu (extension)
-  - `onGridMenuMenuClose`
-  - `onGridMenuBeforeMenuShow`
-  - `onGridMenuAfterMenuShow`
-  - `onGridMenuClearAllPinning`
-  - `onGridMenuClearAllFilters`
-  - `onGridMenuClearAllSorting`
-  - `onGridMenuColumnsChanged`
-  - `onGridMenuCommand`
-  - **Slick Events**
-    - `onAfterMenuShow`
-    - `onBeforeMenuShow`
-    - `onBeforeMenuClose`
-    - `onColumnsChanged`
-    - `onMenuClose`
-    - `onCommand`
-
-#### Header Buttons (extension)
-  - `onHeaderButtonCommand`
-
-#### Header Menu (extension)
-  - `onHeaderMenuCommand`
-  - `onHeaderMenuColumnResizeByContent`
-  - `onHeaderMenuBeforeMenuShow`
-  - `onHeaderMenuAfterMenuShow`
-
-#### Filter Service
-   - `onBeforeFilterClear`
-   - `onBeforeSearchChange`
-   - `onFilterCleared`
-
-#### Grid Service
-  - `onHideColumns`
-  - `onItemsAdded`
-  - `onItemsDeleted`
-  - `onItemsUpdated`
-  - `onItemsUpserted`
-
-#### GridState Service
-  - `onFullResizeByContentRequested`
-  - `onGridStateChanged`
-
-#### Pagination Service
-  - `onBeforePaginationChange`
-  - `onPaginationChanged`
-  - `onPaginationRefreshed`
-  - `onPaginationPresetsInitialized`
-  - `onPaginationVisibilityChanged`
-  - `onPaginationSetCursorBased` (for GraphQL only)
-
-#### Resizer Service
-  - `onGridBeforeResize`
-  - `onGridAfterResize`
-  - `onBeforeResizeByContent`
-  - `onAfterResizeByContent`
-
-#### Sort Service
-  - `onSortCleared`
-  - `onSortChanged`
-  - `onBeforeSortChange`
-
-#### TreeData Service
-  - `onTreeFullToggleStart`
-  - `onTreeFullToggleEnd`
-  - `onTreeItemToggled`
-
-#### Angular-Slickgrid Component
-  - `onBeforeGridDestroy`
-  - `onAfterGridDestroyed`
-  - `onBeforeGridCreate`
-  - `onDataviewCreated`
-  - `onGridCreated`
-  - `onAngularGridCreated`
-  - `onGridStateChanged`
-
-#### SlickGrid
-  - `onActiveCellChanged`
-  - `onActiveCellPositionChanged`
-  - `onAddNewRow`
-  - `onAfterSetColumns`
-  - `onAutosizeColumns`
-  - `onBeforeAppendCell`
-  - `onBeforeCellEditorDestroy`
-  - `onBeforeColumnsResize`
-  - `onBeforeDestroy`
-  - `onBeforeEditCell`
-  - `onBeforeFooterRowCellDestroy`
-  - `onBeforeHeaderCellDestroy`
-  - `onBeforeHeaderRowCellDestroy`
-  - `onBeforeRemoveCachedRow`
-  - `onBeforeSetColumns`
-  - `onBeforeSort`
-  - `onBeforeUpdateColumns`
-  - `onCellChange`
-  - `onCellCssStylesChanged`
-  - `onClick`
-  - `onColumnsReordered`
-  - `onColumnsDrag`
-  - `onColumnsResized`
-  - `onColumnsResizeDblClick`
-  - `onCompositeEditorChange`
-  - `onContextMenu`
-  - `onDblClick`
-  - `onDrag`
-  - `onDragInit`
-  - `onDragStart`
-  - `onDragEnd`
-  - `onFooterClick`
-  - `onFooterContextMenu`
-  - `onFooterRowCellRendered`
-  - `onHeaderCellRendered`
-  - `onHeaderClick`
-  - `onHeaderContextMenu`
-  - `onHeaderMouseEnter`
-  - `onHeaderMouseLeave`
-  - `onHeaderMouseOver`
-  - `onHeaderMouseOut`
-  - `onHeaderRowCellRendered`
-  - `onHeaderRowMouseEnter`
-  - `onHeaderRowMouseLeave`
-  - `onHeaderRowMouseOver`
-  - `onHeaderRowMouseOut`
-  - `onKeyDown`
-  - `onMouseEnter`
-  - `onMouseLeave`
-  - `onPreHeaderClick`
-  - `onPreHeaderContextMenu`
-  - `onRendered`
-  - `onScroll`
-  - `onSelectedRowsChanged`
-  - `onSetOptions`
-  - `onActivateChangedOptions`
-  - `onSort`
-  - `onValidationError`
-  - `onViewportChanged`
-
-#### SlickDataView
-  - `onBeforePagingInfoChanged`
-  - `onGroupExpanded`
-  - `onGroupCollapsed`
-  - `onPagingInfoChanged`
-  - `onRowCountChanged`
-  - `onRowsChanged`
-  - `onRowsOrCountChanged`
-  - `onSelectedRowIdsChanged`
-  - `onSetItemsCalled`

package/docs/events/Grid-&-DataView-Events.md

@@ -1,211 +0,0 @@
-See the full list of [Available Events](Available-Events.md) which you can use by simply hook a `subscribe` to them (the `subscribe` are a custom `SlickGrid Event` and are **NOT** an `RxJS Observable` type but they very similar). You can access them in Slickgrid-Universal by following the documentation below
-
-##### View
-```html
-<angular-slickgrid
-     gridId="grid2"
-     [columns]="columnDefinitions"
-     [options]="gridOptions"
-     [dataset]="dataset"
-     (onAngularGridCreated)="angularGridReady($event.detail)"
-     (onCellChange)="onCellChanged($event.detail.eventData, $event.detail.args)"
-     (onClick)="onCellClicked($event.detail.eventData, $event.detail.args)">
-</angular-slickgrid>
-```
-
-##### Component
-Hook yourself to the Changed event of the bindable grid object.
-
-```typescript
-export class GridEditorComponent {
-  angularGridReady(angularGrid: AngularGridInstance) {
-    this.angularGrid = angularGrid;
-
-    // the Angular Grid Instance exposes both Slick Grid & DataView objects
-    this.gridObj = angularGrid.slickGrid;
-    this.dataViewObj = angularGrid.dataView;
-
-    // it also exposes all the Services
-    // this.angularGrid.resizerService.resizeGrid(10);
-  }
-
-  onCellChanged(e, args) {
-    this.updatedObject = args.item;
-    this.angularGrid.resizerService.resizeGrid(10);
-  }
-
-  onCellClicked(e, args) {
-    // do something
-  }
-}
-```
-
-### Example with Custom Event
-Angular-Slickgrid can trigger the following custom events that you can hook to. However please note that `onDataviewCreated`
-and `onGridCreated` are a lot less used now since `onAngularGridCreated` now exposes both the Slick Grid & DataView objects.
-- `onAngularGridCreated`
-- `onDataviewCreated`
-- `onGridCreated`
-- `onBeforeGridCreate`
-- `onBeforeGridDestroy`
-- `onAfterGridDestroyed`
-
-
-##### View
-Bind `(onDataviewCreated)` and `(onGridCreated)` if you want to call any `SlickGrid` legacy functions.
-```html
-<angular-slickgrid
-  gridId="grid2"
-  (onDataviewCreated)="dataviewReady($event)"
-  (onGridCreated)="gridReady($event)"
-  [columns]="columnDefinitions"
-  [options]="gridOptions"
-  [dataset]="dataset">
-</angular-slickgrid>
-```
-
-##### Component
-Once the `Grid` and `DataView` are ready, you can subscribe to any [Available Events](../events/Available-Events.md) and don't forget to **unsubscribe** to avoid unwanted behaviors and memory leak when your component is destroyed. See below for the `gridReady(grid)` and `dataviewReady(dataview)` functions.
-- The example shown below is subscribing to `onClick` and ask the user to confirm a delete, then will delete it from the `DataView`.
-- Technically, the `Grid` and `DataView` are created at the same time by `Angular-Slickgrid`, so it's ok to call the `dataViewObj` within some code of the `gridReady()` function since `DataView` object will already be available at that time.
-
-```typescript
-import { Component, Input, OnInit } from '@angular/core';
-import { Editors, Formatters, GridExtraUtils } from 'angular-slickgrid';
-
-@Component({
-  templateUrl: './grid-editor.component.html'
-})
-export class GridEditorComponent implements OnInit {
-  columnDefinitions: Column[];
-  gridOptions: GridOption;
-  dataset: any[];
-  dataviewObj: any;
-
-  constructor() {}
-
-  ngOnInit(): void {
-    this.columnDefinitions = [
-      { id: 'delete', field: 'id', formatter: Formatters.deleteIcon, maxWidth: 30 }
-      // ...
-    ];
-
-    this.gridOptions = {
-      editable: true,
-      enableCellNavigation: true,
-      autoEdit: true
-    };
-  }
-
-  gridReady(grid) {
-    grid.onCellChange.subscribe((e, args) => {
-      console.log('onCellChange', args);
-      // for example, CRUD with WebAPI calls
-    });
-    grid.onClick.subscribe((e, args) => {
-      const column = GridExtraUtils.getColumnDefinitionAndData(args);
-
-      if (column.columnDef.id === 'delete') {
-        if (confirm('Are you sure?')) {
-          this.dataviewObj.deleteItem(column.dataContext.id);
-          this.dataviewObj.refresh();
-        }
-      }
-    });
-
-  }
-  dataviewReady(dataview) {
-    this.dataviewObj = dataview;
-  }
-}
-```
-
-### Example with `(onAngularGridCreated)`
-Angular-Slickgrid now also expose the Slick Grid and DataView objects through the `(onAngularGridCreated)` event, for example:
-
-##### View
-```html
-<span id="radioAutoEdit">
-    <label class="radio-inline control-label" for="radioTrue">
-        <input type="radio" name="inlineRadioOptions" id="radioTrue" checked [value]="isAutoEdit" (change)="setAutoEdit(true)"> ON (single-click)
-    </label>
-    <label class="radio-inline control-label" for="radioFalse">
-        <input type="radio" name="inlineRadioOptions" id="radioFalse" [value]="isAutoEdit" (change)="setAutoEdit(false)"> OFF (double-click)
-    </label>
-</span>
-
-<angular-slickgrid gridId="grid2"
-          [columns]="columnDefinitions"
-          [options]="gridOptions"
-          [dataset]="dataset"
-          (onAngularGridCreated)="angularGridReady($event.detail)">
-</angular-slickgrid>
-```
-
-##### Component
-
-```typescript
-import { AngularGridInstance, Column, GridOption } from 'angular-slickgrid';
-
-export class MyApp {
-  angularGrid: AngularGridInstance;
-  columnDefinitions: Column[];
-  gridOptions: GridOption;
-  dataset: any[];
-  isAutoEdit = true;
-  gridObj: any;
-  dataViewObj: any;
-
-
-  angularGridReady(angularGrid: AngularGridInstance) {
-    this.angularGrid = angularGrid;
-    this.gridObj = angularGrid.slickGrid;
-    this.dataViewObj = angularGrid.dataView;
-  }
-
-  /** Change dynamically `autoEdit` grid options */
-  setAutoEdit(isAutoEdit) {
-    this.isAutoEdit = isAutoEdit;
-    this.gridObj.setOptions({ autoEdit: isAutoEdit }); // change the grid option dynamically
-    return true;
-  }
-
-  collapseAllGroups() {
-    this.dataviewObj.collapseAllGroups();
-  }
-
-  expandAllGroups() {
-    this.dataviewObj.expandAllGroups();
-  }
-}
-```
-
-### Error thrown in the IDE when using `strictTemplates`
-You might get some error thrown in your editor by the Angular-Language-Service, the error might 1 of these
-```shell
-Event onAngularGridCreated is not emitted by any applicable directives nor by angular-slickgrid element
-```
-or
-```shell
-error TS2339: Property 'detail' does not exist on type 'Event'.
-```
-There are 3 possible solutions to fix this issue
-1. disabled `strictTemplates`
-2. define argument type as `Event` to avoid error then later cast it as a `CustomEvent`
-```ts
-angularGridReady(event: Event) {
-    this.angularGrid = (event as CustomEvent).detail as AngularGridInstance;
-}
-```
-3. use `$any()` in the View
-```html
-<angular-slickgrid gridId="grid1"
-    [columns]="columnDefinitions"
-    [options]="gridOptions"
-    [dataset]="dataset"
-    (onAngularGridCreated)="angularGridReady($any($event).detail)">
-</angular-slickgrid>
-```
-You can read more on the subject at:
-- Stack Overflow question [Cannot use onAngularGridCreated emitter](https://stackoverflow.com/questions/71156193/cannot-use-onangulargridcreated-emitter/71245004#71245004)
-- Discussion [#815](https://github.com/ghiscoding/angular-slickgrid/discussions/815)