angular-slickgrid 4.2.0 → 4.2.1

package/src/app/examples/custom-angularComponentFilter.ts

@@ -1,126 +0,0 @@
-import { ComponentRef } from '@angular/core';
-import { Subscription } from 'rxjs';
-import {
-  AngularUtilService,
-  Column,
-  ColumnFilter,
-  Filter,
-  FilterArguments,
-  FilterCallback,
-  GridOption,
-  OperatorType,
-  OperatorString,
-  SearchTerm,
-  SlickGrid,
-  unsubscribeAllObservables,
-} from './../modules/angular-slickgrid';
-
-// using external non-typed js libraries
-declare const $: any;
-
-export class CustomAngularComponentFilter implements Filter {
-  private _shouldTriggerQuery = true;
-  private _subscriptions: Subscription[] = [];
-
-  /** Angular Component Reference */
-  componentRef!: ComponentRef<any>;
-
-  grid!: SlickGrid;
-  searchTerms: SearchTerm[] = [];
-  columnDef!: Column;
-  callback!: FilterCallback;
-  operator: OperatorType | OperatorString = OperatorType.equal;
-
-  constructor() { }
-
-  /** Angular Util Service (could be inside the Grid Options Params or the Filter Params ) */
-  get angularUtilService(): AngularUtilService {
-    let angularUtilService = this.gridOptions && this.gridOptions.params && this.gridOptions.params.angularUtilService;
-    if (!angularUtilService || !(angularUtilService instanceof AngularUtilService)) {
-      angularUtilService = this.columnFilter && this.columnFilter.params && this.columnFilter.params.angularUtilService;
-    }
-    return angularUtilService;
-  }
-
-  /** Get the Collection */
-  get collection(): any[] {
-    return this.columnFilter && this.columnFilter.collection || [];
-  }
-
-  /** Getter for the Column Filter */
-  get columnFilter(): ColumnFilter {
-    return this.columnDef && this.columnDef.filter || {};
-  }
-
-  /** Getter for the Grid Options pulled through the Grid Object */
-  get gridOptions(): GridOption {
-    return this.grid?.getOptions?.() as GridOption;
-  }
-
-  /**
-   * Initialize the Filter
-   */
-  init(args: FilterArguments) {
-    this.grid = args.grid as SlickGrid;
-    this.callback = args.callback;
-    this.columnDef = args.columnDef;
-    this.searchTerms = (args.hasOwnProperty('searchTerms') ? args.searchTerms : []) || [];
-
-    if (!this.columnFilter || !this.columnFilter.params.component || !(this.angularUtilService instanceof AngularUtilService)) {
-      throw new Error(`[Angular-Slickgrid] For Filter with Angular Component to work properly, you need to provide your component to the "component" property and make sure to add it to your "entryComponents" array.
-      You also need to provide the "AngularUtilService" via the Filter Params OR the Grid Options Params
-      Example: this.columnDefs = [{ id: 'title', field: 'title', filter: { model: CustomAngularComponentFilter, collection: [...], params: { component: MyComponent, angularUtilService: this.angularUtilService }}];
-      OR this.columnDefs = [{ id: 'title', field: 'title', filter: { model: CustomAngularComponentFilter, collection: [...] }]; this.gridOptions = { params: { angularUtilService: this.angularUtilService }}`);
-    }
-
-    if (this.columnFilter && this.columnFilter.params.component) {
-      // use a delay to make sure Angular ran at least a full cycle and it finished rendering the Component before hooking onto it
-      // else we get the infamous error "ExpressionChangedAfterItHasBeenCheckedError"
-      setTimeout(() => {
-        const $headerElm = this.grid.getHeaderRowColumn(this.columnDef.id);
-        $($headerElm).empty();
-        const componentOuput = this.angularUtilService.createAngularComponentAppendToDom(this.columnFilter.params.component, $headerElm);
-        this.componentRef = componentOuput.componentRef;
-
-        // here we override the collection object of the Angular Component
-        // but technically you can pass any values you wish to your Component
-        Object.assign(componentOuput.componentRef.instance, { collection: this.collection });
-
-        this._subscriptions.push(
-          componentOuput.componentRef.instance.onItemChanged.subscribe((item: any) => {
-            this.callback(undefined, { columnDef: this.columnDef, operator: this.operator, searchTerms: [item.id], shouldTriggerQuery: this._shouldTriggerQuery });
-            // reset flag for next use
-            this._shouldTriggerQuery = true;
-          })
-        );
-      });
-    }
-  }
-
-  /**
-   * Clear the filter value
-   */
-  clear(shouldTriggerQuery = true) {
-    this._shouldTriggerQuery = shouldTriggerQuery;
-    if (this.componentRef && this.componentRef.instance && this.componentRef.instance.hasOwnProperty('selectedId')) {
-      this.componentRef.instance.selectedId = 0;
-    }
-  }
-
-  /** destroy the Angular Component & Subscription */
-  destroy() {
-    if (this.componentRef && this.componentRef.destroy) {
-      this.componentRef.destroy();
-    }
-
-    // also unsubscribe all Angular Subscriptions
-    this._subscriptions = unsubscribeAllObservables(this._subscriptions);
-  }
-
-  /** Set value(s) on the DOM element */
-  setValues(values: SearchTerm[] | SearchTerm) {
-    if (this.componentRef && this.componentRef.instance && this.componentRef.instance.hasOwnProperty('selectedId')) {
-      this.componentRef.instance.selectedId = values;
-    }
-  }
-}

package/src/app/examples/custom-inputEditor.ts

@@ -1,124 +0,0 @@
-import { Column, ColumnEditor, Editor, EditorValidator, EditorValidationResult, KeyCode } from './../modules/angular-slickgrid';
-
-// using external non-typed js libraries
-declare const $: any;
-
-/*
- * An example of a 'detached' editor.
- * KeyDown events are also handled to provide handling for Tab, Shift-Tab, Esc and Ctrl-Enter.
- */
-export class CustomInputEditor implements Editor {
-  private _lastInputEvent?: JQuery.Event;
-  $input: any;
-  defaultValue: any;
-
-  constructor(private args: any) {
-    this.init();
-  }
-
-  /** Get Column Definition object */
-  get columnDef(): Column {
-    return this.args && this.args.column || {};
-  }
-
-  /** Get Column Editor object */
-  get columnEditor(): ColumnEditor {
-    return this.columnDef && this.columnDef.internalColumnEditor || {};
-  }
-
-  get hasAutoCommitEdit(): boolean {
-    return this.args.grid.getOptions().autoCommitEdit ?? false;
-  }
-
-  /** Get the Validator function, can be passed in Editor property or Column Definition */
-  get validator(): EditorValidator | undefined {
-    return this.columnEditor.validator || this.columnDef.validator;
-  }
-
-  init(): void {
-    const placeholder = this.columnEditor && this.columnEditor.placeholder || '';
-    const title = this.columnEditor && this.columnEditor.title || '';
-
-    this.$input = $(`<input type="text" class="editor-text" placeholder="${placeholder}" title="${title}" />`)
-      .appendTo(this.args.container)
-      .on('keydown.nav', (event: JQuery.Event) => {
-        this._lastInputEvent = event;
-        if (event.keyCode === KeyCode.LEFT || event.keyCode === KeyCode.RIGHT) {
-          event.stopImmediatePropagation();
-        }
-      });
-
-    // the lib does not get the focus out event for some reason
-    // so register it here
-    if (this.hasAutoCommitEdit) {
-      this.$input.on('focusout', () => this.save());
-    }
-
-    setTimeout(() => {
-      this.$input.focus().select();
-    }, 50);
-  }
-
-  destroy() {
-    this.$input.off('keydown.nav').remove();
-  }
-
-  focus() {
-    this.$input.focus();
-  }
-
-  getValue() {
-    return this.$input.val();
-  }
-
-  setValue(val: string) {
-    this.$input.val(val);
-  }
-
-  loadValue(item: any) {
-    this.defaultValue = item[this.args.column.field] || '';
-    this.$input.val(this.defaultValue);
-    this.$input[0].defaultValue = this.defaultValue;
-    this.$input.select();
-  }
-
-  serializeValue() {
-    return this.$input.val();
-  }
-
-  applyValue(item: any, state: any) {
-    const validation = this.validate(state);
-    item[this.args.column.field] = (validation && validation.valid) ? state : '';
-  }
-
-  isValueChanged() {
-    const lastEvent = this._lastInputEvent && this._lastInputEvent.keyCode;
-    if (this.columnEditor && this.columnEditor.alwaysSaveOnEnterKey && lastEvent === KeyCode.ENTER) {
-      return true;
-    }
-    return (!(this.$input.val() === '' && this.defaultValue === null)) && (this.$input.val() !== this.defaultValue);
-  }
-
-  save() {
-    const validation = this.validate();
-    if (validation && validation.valid) {
-      if (this.hasAutoCommitEdit) {
-        this.args.grid.getEditorLock().commitCurrentEdit();
-      } else {
-        this.args.commitChanges();
-      }
-    }
-  }
-
-  validate(inputValue?: any): EditorValidationResult {
-    if (this.validator) {
-      const value = (inputValue !== undefined) ? inputValue : this.$input && this.$input.val && this.$input.val();
-      return this.validator(value, this.args);
-    }
-
-    return {
-      valid: true,
-      msg: null
-    };
-  }
-}

package/src/app/examples/custom-inputFilter.ts

@@ -1,142 +0,0 @@
-import {
-  Column,
-  ColumnFilter,
-  Filter,
-  FilterArguments,
-  FilterCallback,
-  GridOption,
-  OperatorType,
-  OperatorString,
-  SearchTerm,
-  SlickGrid,
-} from './../modules/angular-slickgrid';
-
-// using external non-typed js libraries
-declare const $: any;
-
-export class CustomInputFilter implements Filter {
-  private _clearFilterTriggered = false;
-  private _shouldTriggerQuery = true;
-  private $filterElm: any;
-  grid!: SlickGrid;
-  searchTerms: SearchTerm[] = [];
-  columnDef!: Column;
-  callback!: FilterCallback;
-  operator: OperatorType | OperatorString = OperatorType.equal;
-
-  constructor() { }
-
-  /** Getter for the Column Filter */
-  get columnFilter(): ColumnFilter {
-    return this.columnDef && this.columnDef.filter || {};
-  }
-
-  /** Getter for the Grid Options pulled through the Grid Object */
-  get gridOptions(): GridOption {
-    return this.grid?.getOptions?.() as GridOption;
-  }
-
-  /**
-   * Initialize the Filter
-   */
-  init(args: FilterArguments) {
-    this.grid = args.grid as SlickGrid;
-    this.callback = args.callback;
-    this.columnDef = args.columnDef;
-    this.searchTerms = (args.hasOwnProperty('searchTerms') ? args.searchTerms : []) || [];
-
-    // filter input can only have 1 search term, so we will use the 1st array index if it exist
-    const searchTerm = (Array.isArray(this.searchTerms) && this.searchTerms.length >= 0) ? this.searchTerms[0] : '';
-
-    // step 1, create HTML string template
-    const filterTemplate = this.buildTemplateHtmlString();
-
-    // step 2, create the DOM Element of the filter & initialize it if searchTerm is filled
-    this.$filterElm = this.createDomElement(filterTemplate, searchTerm);
-
-    // step 3, subscribe to the keyup event and run the callback when that happens
-    this.$filterElm.keyup((e: any) => {
-      let value = e && e.target && e.target.value || '';
-      const enableWhiteSpaceTrim = this.gridOptions.enableFilterTrimWhiteSpace || this.columnFilter.enableTrimWhiteSpace;
-      if (typeof value === 'string' && enableWhiteSpaceTrim) {
-        value = value.trim();
-      }
-
-      if (this._clearFilterTriggered) {
-        this.callback(e, { columnDef: this.columnDef, clearFilterTriggered: this._clearFilterTriggered, shouldTriggerQuery: this._shouldTriggerQuery });
-        this.$filterElm.removeClass('filled');
-      } else {
-        value === '' ? this.$filterElm.removeClass('filled') : this.$filterElm.addClass('filled');
-        this.callback(e, { columnDef: this.columnDef, searchTerms: [value], shouldTriggerQuery: this._shouldTriggerQuery });
-      }
-      // reset both flags for next use
-      this._clearFilterTriggered = false;
-      this._shouldTriggerQuery = true;
-    });
-  }
-
-  /**
-   * Clear the filter value
-   */
-  clear(shouldTriggerQuery = true) {
-    if (this.$filterElm) {
-      this._clearFilterTriggered = true;
-      this._shouldTriggerQuery = shouldTriggerQuery;
-      this.$filterElm.val('');
-      this.$filterElm.trigger('keyup');
-    }
-  }
-
-  /**
-   * destroy the filter
-   */
-  destroy() {
-    if (this.$filterElm) {
-      this.$filterElm.off('keyup').remove();
-    }
-  }
-
-  /** Set value(s) on the DOM element */
-  setValues(values: SearchTerm | SearchTerm[]) {
-    if (values) {
-      this.$filterElm.val(values);
-    }
-  }
-
-  //
-  // private functions
-  // ------------------
-
-  /**
-   * Create the HTML template as a string
-   */
-  private buildTemplateHtmlString() {
-    let placeholder = (this.gridOptions) ? (this.gridOptions.defaultFilterPlaceholder || '') : '';
-    if (this.columnFilter && this.columnFilter.placeholder) {
-      placeholder = this.columnFilter.placeholder;
-    }
-    return `<input type="text" class="form-control search-filter" placeholder="${placeholder}">`;
-  }
-
-  /**
-   * From the html template string, create a DOM element
-   * @param filterTemplate
-   */
-  private createDomElement(filterTemplate: string, searchTerm?: SearchTerm) {
-    const $headerElm = this.grid.getHeaderRowColumn(this.columnDef.id);
-    $($headerElm).empty();
-
-    // create the DOM element & add an ID and filter class
-    const $filterElm = $(filterTemplate);
-
-    $filterElm.val(searchTerm);
-    $filterElm.data('columnId', this.columnDef.id);
-
-    // append the new DOM element to the header row
-    if ($filterElm && typeof $filterElm.appendTo === 'function') {
-      $filterElm.appendTo($headerElm);
-    }
-
-    return $filterElm;
-  }
-}

package/src/app/examples/custom-titleFormatter.component.ts

@@ -1,8 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  template: `<b>{{item?.assignee?.name}}</b>`
-})
-export class CustomTitleFormatterComponent {
-  item: any;
-}

package/src/app/examples/editor-ng-select.component.ts

@@ -1,37 +0,0 @@
-import { Component } from '@angular/core';
-import { Subject } from 'rxjs';
-
-// the appendTo="body" (necessary for SlickGrid filter) requires the body to be position relative like so
-// <body style="position: relative">
-@Component({
-  template: `
-  <ng-select class="no-style-select"
-      [items]="collection"
-      autofocus
-      bindValue="id"
-      bindLabel="name"
-      appendTo="body"
-      [clearable]="false"
-      (change)="onChange($event)"
-      [(ngModel)]="selectedId"
-		>
-			<ng-template ng-label-tmp ng-option-tmp let-item="item">
-				{{ item?.name }}
-			</ng-template>
-		</ng-select>`
-})
-export class EditorNgSelectComponent {
-  selectedId = '';
-  selectedItem: any;
-  collection?: any[]; // this will be filled by the collection of your column definition
-  onItemChanged = new Subject<any>();    // object
-
-  onChange(item: any) {
-    this.selectedItem = item;
-    this.onItemChanged.next(item);
-  }
-
-  focus() {
-    // do a focus
-  }
-}

package/src/app/examples/filter-ng-select.component.ts

@@ -1,32 +0,0 @@
-import { Component } from '@angular/core';
-import { Subject } from 'rxjs';
-
-// the appendTo="body" (necessary for SlickGrid filter) requires the body to be position relative like so
-// <body style="position: relative">
-@Component({
-  template: `
-  <ng-select class="custom no-style-select"
-      [items]="collection"
-      bindValue="id"
-      bindLabel="name"
-      appendTo="body"
-      [clearable]="false"
-      (change)="onChange($event)"
-      [(ngModel)]="selectedId"
-		>
-			<ng-template ng-label-tmp ng-option-tmp let-item="item">
-				{{ item?.name }}
-			</ng-template>
-		</ng-select>`
-})
-export class FilterNgSelectComponent {
-  selectedId = '';
-  selectedItem: any;
-  collection?: any[]; // this will be filled by the collection of your column definition
-  onItemChanged = new Subject<any>();    // object
-
-  onChange(item: any) {
-    this.selectedItem = item;
-    this.onItemChanged.next(item);
-  }
-}

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

@@ -1,48 +0,0 @@
-<div id="demo-container" 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-additem.component.ts">
-        <span class="fa fa-link"></span> code
-      </a>
-    </span>
-  </h2>
-  <div class="subtitle"
-       [innerHTML]="subTitle"></div>
-
-  <div class="col-sm-12">
-    <span>
-      <label>Scroll: </label>
-      <div class="btn-group" role="group">
-        <button class="btn btn-sm btn-outline-secondary" data-test="scroll-top-btn" (click)="scrollGridTop()">
-          <i class="fa fa-arrow-up"></i>
-        </button>
-        <button class="btn btn-sm btn-outline-secondary" data-test="scroll-bottom-btn" (click)="scrollGridBottom()">
-          <i class="fa fa-arrow-down"></i>
-        </button>
-      </div>
-      <button class="btn btn-sm btn-outline-secondary" data-test="add-new-item-top-btn"
-              (click)="addNewItem()">Add New Mocked Item</button>
-      <button class="btn btn-sm btn-outline-secondary" data-test="add-new-item-bottom-btn"
-              (click)="addNewItem('bottom')">Add New Mocked Item (bottom)</button>
-      <button class="btn btn-sm btn-outline-secondary" data-test="update-second-item-btn"
-              (click)="updateSecondItem()">Update 2nd Row Item with Random Duration</button>
-      <button class="btn btn-sm btn-outline-secondary" data-test="highlight-row5-btn"
-              (click)="highlighFifthRow()">Highlight 5th Row</button>
-      <button class="btn btn-sm btn-outline-secondary" data-test="highlight-duration40-btn"
-              (click)="changeDurationBackgroundColor()">Highlight Rows with Duration over 40</button>
-    </span>
-    <hr />
-  </div>
-
-  <div class="col-sm-12">
-    <angular-slickgrid gridId="grid11"
-                       [columnDefinitions]="columnDefinitions"
-                       [gridOptions]="gridOptions"
-                       [dataset]="dataset"
-                       (onAngularGridCreated)="angularGridReady($event.detail)">
-    </angular-slickgrid>
-  </div>
-</div>