angular-slickgrid 4.2.0 → 4.2.1

package/src/app/app.component.html

@@ -1,160 +0,0 @@
-<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
-  <a class="navbar-brand ms-2" href="https://github.com/ghiscoding/Angular-Slickgrid">
-    <i class="fa fa-github"></i>
-    <span>{{title}}</span>
-  </a>
-  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-target="#navbarContent"
-          aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
-    <span class="navbar-toggler-icon"></span>
-  </button>
-
-  <div class="navbar-collapse collapse" id="navbarContent">
-    <ul class="navbar-nav mr-auto">
-      <li>
-        <span class="github-button-container">
-          <a href="https://github.com/ghiscoding/angular-slickgrid">
-            <img src="https://img.shields.io/github/stars/ghiscoding/angular-slickgrid?style=social">
-          </a>
-        </span>
-      </li>
-      <li class="nav-item">
-        <a class="nav-link" [routerLink]="['/home']">
-          <i class="fa fa-lg fa-home"></i> Home
-        </a>
-      </li>
-    </ul>
-  </div>
-</nav>
-
-<div class="container-fluid">
-  <div class="panel-wm">
-    <section id="panel-left" class="panel-wm-left">
-      <ul class="well nav nav-pills nav-stacked">
-        <li class="nav-item">
-          <a class="nav-link" routerLinkActive="active" [routerLink]="['/basic']">1- Basic Grid / 2 Grids</a>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link" routerLinkActive="active" [routerLink]="['/formatter']">2- Formatters</a>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link" routerLinkActive="active" [routerLink]="['/editor']">3- Editors</a>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link" routerLinkActive="active" [routerLink]="['/clientside']">4- Client Side Sort/Filter</a>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link" routerLinkActive="active" [routerLink]="['/odata']">5- Backend Server with OData</a>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link" routerLinkActive="active" [routerLink]="['/gridgraphql']">6- Backend Server with
-            GraphQL</a>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link" routerLinkActive="active" [routerLink]="['/headerbutton']">7- Header Button Plugin</a>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link" routerLinkActive="active" [routerLink]="['/headermenu']">8- Header Menu Plugin</a>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link" routerLinkActive="active" [routerLink]="['/gridmenu']">9- Grid Menu (hamburger menu)</a>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link" routerLinkActive="active" [routerLink]="['/selection']">10- Row Selection / 2 Grids</a>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link" routerLinkActive="active" [routerLink]="['/additem']">11- Add/Update/Highlight Datagrid
-            Item</a>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link" routerLinkActive="active" [routerLink]="['/localization']">12- Localization (i18n)</a>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link" routerLinkActive="active" [routerLink]="['/swt']">13- Backend Server Custom Paging</a>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link" routerLinkActive="active" [routerLink]="['/grouping']">14- Grouping &amp; Aggregator</a>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link" routerLinkActive="active" [routerLink]="['/colspan']">15- Column Span</a>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link" routerLinkActive="active" [routerLink]="['/gridstate']">16- Grid State &amp; Local
-            Storage</a>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link" routerLinkActive="active" [routerLink]="['/rowmove']">17- Row Move</a>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link" routerLinkActive="active" [routerLink]="['/remote']">18- Remote Model</a>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link" routerLinkActive="active" [routerLink]="['/draggrouping']">19- Draggable Grouping</a>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link" routerLinkActive="active" [routerLink]="['/frozen']">20- Frozen Columns/Rows</a>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link" routerLinkActive="active" [routerLink]="['/rowdetail']">21- Row Detail View</a>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link" routerLinkActive="active" [routerLink]="['/angular-components']">22- Use of Angular
-            Components</a>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link" routerLinkActive="active" [routerLink]="['/autoheight']">23- Grid AutoHeight (full
-            height)</a>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link" routerLinkActive="active" [routerLink]="['/gridtabs']">24- within Bootstrap Tabs</a>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link" routerLinkActive="active" [routerLink]="['/range']">25- Filter by Range of Values</a>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link" routerLinkActive="active" [routerLink]="['/context']">26- Cell & Context Menu</a>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link" routerLinkActive="active" [routerLink]="['/graphql-nopage']">
-            27- GraphQL without Pagination
-          </a>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link" routerLinkActive="active" [routerLink]="['/tree-data-parent-child']">
-            28- Tree Data (Parent/Child)
-          </a>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link" routerLinkActive="active" [routerLink]="['/tree-data-hierarchical']">
-            29- Tree Data (Hierarchical)
-          </a>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link" routerLinkActive="active" [routerLink]="['/composite-editor']">
-            30- Composite Editor Modal
-          </a>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link" routerLinkActive="active" [routerLink]="['/resize-by-content']">
-            31- Resize by Cell Content
-          </a>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link" routerLinkActive="active" [routerLink]="['/custom-tooltip']">
-            32- Regular & Custom Tooltip
-          </a>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link" routerLinkActive="active" [routerLink]="['/trading']">
-            33- Real-Time Trading Platform
-          </a>
-        </li>
-      </ul>
-    </section>
-
-    <section class="panel-wm-content">
-      <div id="demo-container">
-        <router-outlet></router-outlet>
-      </div>
-    </section>
-  </div>
-</div>

package/src/app/app.component.scss

@@ -1,65 +0,0 @@
-$navbar-height: 56px;
-$side-menu-width: 250px;
-
-.body-content {
-  margin-top: $navbar-height;
-}
-.lightblue {
-  color: lightblue;
-}
-.red {
-  color: red;
-}
-.faded {
-    opacity: 0.2;
-}
-.faded:hover {
-    opacity: 0.5;
-}
-
-section {
-  margin: 0;
-}
-
-/** Sidebar (left) and Content (right) */
-@media (min-width: 1200px) {
-  .panel-wm-content .container {
-      width: calc(1170px - #{$side-menu-width});
-  }
-}
-
-.panel-wm {
-  padding-top: $navbar-height;
-
-  .nav-stacked {
-    padding-bottom: 30px;
-
-    .nav-item {
-      width: 100%;
-    }
-  }
-
-  .nav > li > a {
-    padding: 10px 15px;
-    border-radius: 0;
-  }
-
-  .panel-wm-content {
-    padding-left: ($side-menu-width + 5px);
-    padding-right: 15px;
-  }
-
-  .panel-wm-left {
-    position: fixed;
-    z-index: 400;
-    transition: left 0.15s;
-    top: calc(#{$navbar-height});
-    bottom: 0;
-    left: 0;
-    background-color: #f5f5f5;
-    transform: translate3d(0, 0, 0);
-    border-right: 1px solid #d0d0d0;
-    overflow-y: auto;
-    width: $side-menu-width;
-  }
-}

package/src/app/app.component.ts

@@ -1,10 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss']
-})
-export class AppComponent {
-  title = 'Angular-SlickGrid';
-}

package/src/app/app.module.ts

@@ -1,175 +0,0 @@
-import { AppRoutingRoutingModule } from './app-routing.module';
-import { BrowserModule } from '@angular/platform-browser';
-import { FormsModule } from '@angular/forms';
-import { HttpClient, HttpClientModule } from '@angular/common/http';
-import { Injector, APP_INITIALIZER, NgModule } from '@angular/core';
-import { LOCATION_INITIALIZED } from '@angular/common';
-import { NgSelectModule } from '@ng-select/ng-select';
-import { TabsModule } from 'ngx-bootstrap/tabs';
-import { TranslateModule, TranslateLoader, TranslateService } from '@ngx-translate/core';
-import { TranslateHttpLoader } from '@ngx-translate/http-loader';
-
-import { AppComponent } from './app.component';
-import { CustomTitleFormatterComponent } from './examples/custom-titleFormatter.component';
-import { EditorNgSelectComponent } from './examples/editor-ng-select.component';
-import { FilterNgSelectComponent } from './examples/filter-ng-select.component';
-import { GridAddItemComponent } from './examples/grid-additem.component';
-import { GridAutoHeightComponent } from './examples/grid-autoheight.component';
-import { GridBasicComponent } from './examples/grid-basic.component';
-import { GridClientSideComponent } from './examples/grid-clientside.component';
-import { GridColspanComponent } from './examples/grid-colspan.component';
-import { GridContextMenuComponent } from './examples/grid-contextmenu.component';
-import { GridCompositeEditorComponent } from './examples/grid-composite-editor.component';
-import { GridCustomTooltipComponent } from './examples/grid-custom-tooltip.component';
-import { GridDraggableGroupingComponent } from './examples/grid-draggrouping.component';
-import { GridEditorComponent } from './examples/grid-editor.component';
-import { GridAngularComponent } from './examples/grid-angular.component';
-import { GridFormatterComponent } from './examples/grid-formatter.component';
-import { GridFrozenComponent } from './examples/grid-frozen.component';
-import { GridGraphqlComponent } from './examples/grid-graphql.component';
-import { GridGraphqlWithoutPaginationComponent } from './examples/grid-graphql-nopage.component';
-import { GridGroupingComponent } from './examples/grid-grouping.component';
-import { GridHeaderButtonComponent } from './examples/grid-headerbutton.component';
-import { GridHeaderMenuComponent } from './examples/grid-headermenu.component';
-import { GridLocalizationComponent } from './examples/grid-localization.component';
-import { GridMenuComponent } from './examples/grid-menu.component';
-import { GridOdataComponent } from './examples/grid-odata.component';
-import { GridRangeComponent } from './examples/grid-range.component';
-import { GridRemoteComponent } from './examples/grid-remote.component';
-import { GridResizeByContentComponent } from './examples/grid-resize-by-content.component';
-import { GridRowDetailComponent } from './examples/grid-rowdetail.component';
-import { GridRowMoveComponent } from './examples/grid-rowmove.component';
-import { GridRowSelectionComponent } from './examples/grid-rowselection.component';
-import { GridStateComponent } from './examples/grid-state.component';
-import { GridTabsComponent } from './examples/grid-tabs.component';
-import { GridTradingComponent } from './examples/grid-trading.component';
-import { GridTreeDataHierarchicalComponent } from './examples/grid-tree-data-hierarchical.component';
-import { GridTreeDataParentChildComponent } from './examples/grid-tree-data-parent-child.component';
-import { HomeComponent } from './examples/home.component';
-import { RowDetailPreloadComponent } from './examples/rowdetail-preload.component';
-import { RowDetailViewComponent } from './examples/rowdetail-view.component';
-
-import { SwtCommonGridTestComponent } from './examples/swt-common-grid-test.component';
-import { SwtCommonGridPaginationComponent } from './examples/swt-common-grid-pagination.component';
-import { SwtCommonGridComponent } from './examples/swt-common-grid.component';
-
-// import our custom module, library created using this article
-// https://medium.com/@ngl817/building-an-angular-4-component-library-with-the-angular-cli-and-ng-packagr-53b2ade0701e
-import { AngularSlickgridModule } from './modules/angular-slickgrid/modules/angular-slickgrid.module';
-// import { SlickgridModule } from 'angular-slickgrid';
-
-// load necessary Flatpickr Locale(s), but make sure it's imported AFTER the SlickgridModule import
-import 'flatpickr/dist/l10n/fr';
-
-// AoT requires an exported function for factories
-export function createTranslateLoader(http: HttpClient) {
-  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
-}
-
-// use an Initializer Factory as describe here: https://github.com/ngx-translate/core/issues/517#issuecomment-299637956
-export function appInitializerFactory(translate: TranslateService, injector: Injector) {
-  return () => new Promise<any>((resolve: any) => {
-    const locationInitialized = injector.get(LOCATION_INITIALIZED, Promise.resolve(null));
-    locationInitialized.then(() => {
-      const langToSet = 'en';
-      translate.setDefaultLang('en');
-      translate.use(langToSet).subscribe({
-        next: () => {
-          // console.info(`Successfully initialized '${langToSet}' language.'`);
-        },
-        error: () => console.error(`Problem with '${langToSet}' language initialization.'`),
-        complete: () => resolve(null)
-      });
-    });
-  });
-}
-
-// @dynamic
-@NgModule({
-  declarations: [
-    AppComponent,
-    CustomTitleFormatterComponent,
-    EditorNgSelectComponent,
-    FilterNgSelectComponent,
-    GridAddItemComponent,
-    GridAngularComponent,
-    GridAutoHeightComponent,
-    GridBasicComponent,
-    GridClientSideComponent,
-    GridColspanComponent,
-    GridCompositeEditorComponent,
-    GridContextMenuComponent,
-    GridCustomTooltipComponent,
-    GridDraggableGroupingComponent,
-    GridEditorComponent,
-    GridFormatterComponent,
-    GridFrozenComponent,
-    GridGraphqlComponent,
-    GridGraphqlWithoutPaginationComponent,
-    GridGroupingComponent,
-    GridHeaderButtonComponent,
-    GridHeaderMenuComponent,
-    GridLocalizationComponent,
-    GridMenuComponent,
-    GridOdataComponent,
-    GridRangeComponent,
-    GridRemoteComponent,
-    GridResizeByContentComponent,
-    GridRowDetailComponent,
-    GridRowMoveComponent,
-    GridRowSelectionComponent,
-    GridStateComponent,
-    GridTabsComponent,
-    GridTradingComponent,
-    GridTreeDataParentChildComponent,
-    GridTreeDataHierarchicalComponent,
-    RowDetailPreloadComponent,
-    RowDetailViewComponent,
-    SwtCommonGridTestComponent,
-    SwtCommonGridPaginationComponent,
-    SwtCommonGridComponent,
-    HomeComponent
-  ],
-  imports: [
-    AppRoutingRoutingModule,
-    BrowserModule,
-    FormsModule,
-    HttpClientModule,
-    NgSelectModule,
-    TabsModule.forRoot(),
-    TranslateModule.forRoot({
-      loader: {
-        provide: TranslateLoader,
-        useFactory: (createTranslateLoader),
-        deps: [HttpClient]
-      }
-    }),
-    AngularSlickgridModule.forRoot({
-      // add any Global Grid Options/Config you might want
-      // to avoid passing the same options over and over in each grids of your App
-      enableAutoResize: true,
-      autoResize: {
-        container: '#grid-container',
-        rightPadding: 10
-      }
-    })
-  ],
-  entryComponents: [
-    // dynamically created components
-    CustomTitleFormatterComponent,
-    EditorNgSelectComponent,
-    FilterNgSelectComponent,
-    RowDetailPreloadComponent,
-    RowDetailViewComponent,
-  ],
-  providers: [
-    {
-      provide: APP_INITIALIZER,
-      useFactory: appInitializerFactory,
-      deps: [TranslateService, Injector],
-      multi: true
-    }
-  ],
-  bootstrap: [AppComponent]
-})
-export class AppModule { }

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

@@ -1,184 +0,0 @@
-import { ComponentRef } from '@angular/core';
-import { Subscription } from 'rxjs';
-import {
-  AngularUtilService,
-  Column,
-  ColumnEditor,
-  Editor,
-  EditorValidator,
-  EditorValidationResult,
-  GridOption,
-  SlickGrid,
-  unsubscribeAllObservables,
-} from './../modules/angular-slickgrid';
-
-/*
- * An example of a 'detached' editor.
- * KeyDown events are also handled to provide handling for Tab, Shift-Tab, Esc and Ctrl-Enter.
- */
-export class CustomAngularComponentEditor implements Editor {
-  private _subscriptions: Subscription[] = [];
-
-  /** Angular Component Reference */
-  componentRef!: ComponentRef<any>;
-
-  /** default item Id */
-  defaultId = '';
-
-  /** default item object */
-  defaultItem: any;
-
-  /** SlickGrid grid object */
-  grid: SlickGrid;
-
-  constructor(private args: any) {
-    this.grid = args && args.grid;
-    this.init();
-  }
-
-  /** Angular Util Service (could be inside the Grid Options Params or the Editor Params ) */
-  get angularUtilService(): AngularUtilService {
-    let angularUtilService = this.gridOptions && this.gridOptions.params && this.gridOptions.params.angularUtilService;
-    if (!angularUtilService || !(angularUtilService instanceof AngularUtilService)) {
-      angularUtilService = this.columnEditor && this.columnEditor.params && this.columnEditor.params.angularUtilService;
-    }
-    return angularUtilService;
-  }
-
-  /** Get the Collection */
-  get collection(): any[] {
-    return this.columnDef && this.columnDef.internalColumnEditor!.collection || [];
-  }
-
-  /** 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 || {};
-  }
-
-  /** Getter for the Grid Options pulled through the Grid Object */
-  get gridOptions(): GridOption {
-    return this.grid?.getOptions?.() as GridOption;
-  }
-
-  get hasAutoCommitEdit(): boolean {
-    return this.gridOptions.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() {
-    if (!this.columnEditor || !this.columnEditor.params.component || !(this.angularUtilService instanceof AngularUtilService)) {
-      throw new Error(`[Angular-Slickgrid] For Editor 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 Editor Params OR the Grid Options Params
-      Example: this.columnDefs = [{ id: 'title', field: 'title', editor: { model: CustomAngularComponentEditor, collection: [...], params: { component: MyComponent, angularUtilService: this.angularUtilService }}];
-      OR this.columnDefs = [{ id: 'title', field: 'title', editor: { model: CustomAngularComponentEditor, collection: [...] }]; this.gridOptions = { params: { angularUtilService: this.angularUtilService }}`);
-    }
-    if (this.columnEditor && this.columnEditor.params.component) {
-      const componentOutput = this.angularUtilService.createAngularComponentAppendToDom(this.columnEditor.params.component, this.args.container);
-      this.componentRef = componentOutput && componentOutput.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(this.componentRef.instance, { collection: this.collection });
-
-      // when our model (item object) changes, we'll call a save of the slickgrid editor
-      this._subscriptions.push(
-        this.componentRef.instance.onItemChanged.subscribe((item: any) => this.save())
-      );
-    }
-  }
-
-  save() {
-    const validation = this.validate();
-    if (validation && validation.valid) {
-      if (this.hasAutoCommitEdit) {
-        this.args.grid.getEditorLock().commitCurrentEdit();
-      } else {
-        this.args.commitChanges();
-      }
-    }
-  }
-
-  cancel() {
-    this.componentRef.instance.selectedId = this.defaultId;
-    this.componentRef.instance.selectedItem = this.defaultItem;
-    if (this.args && this.args.cancelChanges) {
-      this.args.cancelChanges();
-    }
-  }
-
-  /** optional, implement a hide method on your Angular Component */
-  hide() {
-    if (this.componentRef && this.componentRef.instance && typeof this.componentRef.instance.hide === 'function') {
-      this.componentRef.instance.hide();
-    }
-  }
-
-  /** optional, implement a show method on your Angular Component */
-  show() {
-    if (this.componentRef && this.componentRef.instance && typeof this.componentRef.instance.show === 'function') {
-      this.componentRef.instance.show();
-    }
-  }
-
-  /** 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);
-  }
-
-  /** optional, implement a focus method on your Angular Component */
-  focus() {
-    if (this.componentRef && this.componentRef.instance && typeof this.componentRef.instance.focus === 'function') {
-      this.componentRef.instance.focus();
-    }
-  }
-
-  applyValue(item: any, state: any) {
-    item[this.columnDef.field] = state;
-  }
-
-  getValue() {
-    return this.componentRef.instance.selectedId;
-  }
-
-  loadValue(item: any) {
-    const itemObject = item && item[this.columnDef.field];
-    this.componentRef.instance.selectedId = itemObject && itemObject.id || '';
-    this.componentRef.instance.selectedItem = itemObject && itemObject;
-  }
-
-  serializeValue(): any {
-    return this.componentRef.instance.selectedItem;
-  }
-
-  isValueChanged() {
-    return (!(this.componentRef.instance.selectedId === '' && (this.defaultId === null || this.defaultId === undefined))) && (this.componentRef.instance.selectedId !== this.defaultId);
-  }
-
-  validate(): EditorValidationResult {
-    if (this.validator) {
-      const value = this.componentRef.instance.selectedId;
-      return this.validator(value, this.args);
-    }
-
-    // by default the editor is always valid
-    // if user want it to be required, he would have to provide his own validator
-    return {
-      valid: true,
-      msg: null
-    };
-  }
-}