angular-slickgrid 4.2.0 → 4.2.3

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

@@ -1,31 +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-headermenu.component.ts">
-        <span class="fa fa-link"></span> code
-      </a>
-    </span>
-  </h2>
-  <div class="subtitle" [innerHTML]="subTitle"></div>
-
-  <button class="btn btn-outline-secondary btn-sm" (click)="switchLanguage()">
-    <i class="fa fa-language"></i>
-    Switch Language
-  </button>
-  <strong>Locale:</strong>
-  <span style="font-style: italic" data-test="selected-locale">
-    {{selectedLanguage + '.json'}}
-  </span>
-
-  <div class="col-sm-12">
-    <angular-slickgrid gridId="grid8"
-                       (onAngularGridCreated)="angularGridReady($event.detail)"
-                       [columnDefinitions]="columnDefinitions"
-                       [gridOptions]="gridOptions"
-                       [dataset]="dataset">
-    </angular-slickgrid>
-  </div>
-</div>

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

@@ -1,25 +0,0 @@
-$slick-header-menu-button-border:               1px solid #cfcfcf;
-$slick-header-menu-button-border-width:         0px 1px;
-$slick-header-menu-button-icon:                 "\f0d7";
-$slick-header-menu-button-width:                16px;
-$slick-header-menu-button-padding:              10px 0 0 3px;
-$slick-sort-indicator-hint-opacity:             0;
-
-/* make sure to add the @import the SlickGrid Bootstrap Theme AFTER the variables changes */
-@import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-bootstrap.scss';
-
-.blue {
-  color: rgb(73, 73, 255);
-}
-.orange {
-  color: orange;
-}
-.red {
-  color: red;
-}
-.bold {
-  font-weight: bold;
-}
-.italic {
-  font-style: italic;
-}

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

@@ -1,159 +0,0 @@
-import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
-import { AngularGridInstance, Column, GridOption, unsubscribeAllObservables } from './../modules/angular-slickgrid';
-import { TranslateService } from '@ngx-translate/core';
-import { Subscription } from 'rxjs';
-
-@Component({
-  templateUrl: './grid-headermenu.component.html',
-  styleUrls: ['./grid-headermenu.component.scss'],
-  encapsulation: ViewEncapsulation.None,
-})
-export class GridHeaderMenuComponent implements OnInit, OnDestroy {
-  title = 'Example 8: Header Menu Plugin';
-  subTitle = `
-    This example demonstrates using the <b>Slick.Plugins.HeaderMenu</b> plugin to easily add menus to colum headers.<br/>
-    These menus can be specified directly in the column definition, and are very easy to configure and use.
-    (<a href="https://github.com/ghiscoding/Angular-Slickgrid/wiki/Header-Menu-&-Header-Buttons" target="_blank">Wiki docs</a>)
-    <ul>
-      <li>Now enabled by default in the Global Grid Options, it will add the default commands of (hide column, sort asc/desc)</li>
-      <li>Hover over any column header to see an arrow showing up on the right</li>
-      <li>Try Sorting (multi-sort) the 2 columns "Duration" and "% Complete" (the other ones are disabled)</li>
-      <li>Try hiding any columns (you use the "Column Picker" plugin by doing a right+click on the header to show the column back)</li>
-      <li>Note: The "Header Button" & "Header Menu" Plugins cannot be used at the same time</li>
-      <li>You can change the menu icon via SASS variables as shown in this demo (check all SASS variables)</li>
-      <li>Use override callback functions to change the properties of show/hide, enable/disable the menu or certain item(s) from the list</li>
-      <ol>
-        <li>These callbacks are: "itemVisibilityOverride", "itemUsabilityOverride"</li>
-        <li>for example if we want to disable the "Help" command over the "Title" and "Completed" column</li>
-        <li>for example don't show Help on column "% Complete"</li>
-      </ol>
-    </ul>
-  `;
-
-  private subscriptions: Subscription[] = [];
-  angularGrid!: AngularGridInstance;
-  columnDefinitions!: Column[];
-  gridOptions!: GridOption;
-  dataset!: any[];
-  selectedLanguage: string;
-
-  constructor(private translate: TranslateService) {
-    this.selectedLanguage = this.translate.getDefaultLang();
-  }
-
-  ngOnDestroy() {
-    // also unsubscribe all Angular Subscriptions
-    this.subscriptions = unsubscribeAllObservables(this.subscriptions);
-  }
-
-  ngOnInit(): void {
-    this.columnDefinitions = [
-      { id: 'title', name: 'Title', field: 'title', nameKey: 'TITLE' },
-      { id: 'duration', name: 'Duration', field: 'duration', nameKey: 'DURATION', sortable: true },
-      { id: 'percentComplete', name: '% Complete', field: 'percentComplete', nameKey: 'PERCENT_COMPLETE', sortable: true },
-      { id: 'start', name: 'Start', field: 'start', nameKey: 'START' },
-      { id: 'finish', name: 'Finish', field: 'finish', nameKey: 'FINISH' },
-      { id: 'completed', name: 'Completed', field: 'completed', nameKey: 'COMPLETED' }
-    ];
-
-    this.columnDefinitions.forEach((columnDef) => {
-      columnDef.header = {
-        menu: {
-          items: [
-            // add Custom Header Menu Item Commands which will be appended to the existing internal custom items
-            // you cannot override an internal command but you can hide them and create your own
-            // also note that the internal custom commands are in the positionOrder range of 50-60,
-            // if you want yours at the bottom then start with 61, below 50 will make your command(s) show on top
-            {
-              iconCssClass: 'fa fa-question-circle',
-
-              // you can disable a command with certain logic
-              // HOWEVER note that if you use "itemUsabilityOverride" has precedence when it is defined
-              // disabled: (columnDef.id === 'completed'),
-
-              titleKey: 'HELP', // use "title" as plain string OR "titleKey" when using a translation key
-              command: 'help',
-              tooltip: 'Need assistance?',
-              cssClass: 'bold',     // container css class
-              textCssClass: (columnDef.id === 'title' || columnDef.id === 'completed') ? '' : 'blue', // just the text css class
-              positionOrder: 99,
-              itemUsabilityOverride: (args) => {
-                // for example if we want to disable the "Help" command over the "Title" and "Completed" column
-                return !(args.column.id === 'title' || args.column.id === 'completed');
-              },
-              itemVisibilityOverride: (args) => {
-                // for example don't show Help on column "% Complete"
-                return (args.column.id !== 'percentComplete');
-              },
-              action: (e, args) => {
-                // you can use the "action" callback and/or subscribe to the "onCallback" event, they both have the same arguments
-                console.log('execute an action on Help', args);
-              }
-            },
-            // you can also add divider between commands (command is a required property but you can set it to empty string)
-            { divider: true, command: '', positionOrder: 98 },
-
-            // you can use "divider" as a string too, but if you do then make sure it's the correct position in the list
-            // (since there's no positionOrder when using 'divider')
-            // 'divider',
-          ]
-        }
-      };
-    });
-
-    this.gridOptions = {
-      enableAutoResize: true,
-      enableHeaderMenu: true,
-      autoResize: {
-        container: '#demo-container',
-        rightPadding: 10
-      },
-      enableFiltering: false,
-      enableCellNavigation: true,
-      headerMenu: {
-        hideSortCommands: false,
-        hideColumnHideCommand: false,
-        // you can use the "onCommand" (in Grid Options) and/or the "action" callback (in Column Definition)
-        onCommand: (e, args) => {
-          if (args.command === 'help') {
-            alert('Please help!!!');
-          }
-        }
-      },
-      enableTranslate: true,
-      i18n: this.translate
-    };
-
-    this.getData();
-  }
-
-  getData() {
-    // Set up some test columns.
-    const mockDataset = [];
-    for (let i = 0; i < 1000; i++) {
-      mockDataset[i] = {
-        id: i,
-        title: 'Task ' + i,
-        duration: Math.round(Math.random() * 25) + ' days',
-        percentComplete: Math.round(Math.random() * 100),
-        start: '01/01/2009',
-        finish: '01/05/2009',
-        completed: (i % 5 === 0)
-      };
-    }
-    this.dataset = mockDataset;
-  }
-
-  angularGridReady(angularGrid: AngularGridInstance) {
-    this.angularGrid = angularGrid;
-  }
-
-  switchLanguage() {
-    const nextLanguage = (this.selectedLanguage === 'en') ? 'fr' : 'en';
-    this.subscriptions.push(
-      this.translate.use(nextLanguage).subscribe(() => {
-        this.selectedLanguage = nextLanguage;
-      })
-    );
-  }
-}

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

@@ -1,54 +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-localization.component.ts">
-        <span class="fa fa-link"></span> code
-      </a>
-    </span>
-  </h2>
-  <div class="subtitle" [innerHTML]="subTitle"></div>
-
-  <hr />
-
-  <div class="row">
-    <div class="col-sm-12">
-      <button class="btn btn-outline-secondary btn-sm" data-test="language-button" (click)="switchLanguage()">
-        <i class="fa fa-language"></i>
-        Switch Language
-      </button>
-      <b>Locale:</b> <span style="font-style: italic" data-test="selected-locale">{{selectedLanguage + '.json'}}</span>
-
-      <span style="margin-left: 20px">
-        <button class="btn btn-outline-secondary btn-sm" (click)="exportToFile('csv')">
-          <i class="fa fa-download"></i>
-          Download to CSV
-        </button>
-        <button class="btn btn-outline-secondary btn-sm" (click)="exportToFile('txt')">
-          <i class="fa fa-download"></i>
-          Download to Text
-        </button>
-        <button class="btn btn-outline-secondary btn-sm" (click)="exportToExcel()">
-          <i class="fa fa-file-excel-o text-success"></i>
-          Download to Excel
-        </button>
-        <button class="btn btn-outline-secondary btn-sm" (click)="dynamicallyAddTitleHeader()">
-          <i class="fa fa-plus"></i>
-          Dynamically Duplicate Title Column
-        </button>
-      </span>
-    </div>
-  </div>
-
-  <div class="col-sm-12">
-    <angular-slickgrid gridId="grid12"
-                       [dataset]="dataset"
-                       [gridOptions]="gridOptions"
-                       [columnDefinitions]="columnDefinitions"
-                       (onAngularGridCreated)="angularGridReady($event.detail)"
-                       (onGridStateChanged)="gridStateChanged($event.detail)">
-    </angular-slickgrid>
-  </div>
-</div>

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

@@ -1,293 +0,0 @@
-import { Component, OnDestroy, OnInit, } from '@angular/core';
-import { TranslateService } from '@ngx-translate/core';
-import { ExcelExportService } from '@slickgrid-universal/excel-export';
-import { TextExportService } from '@slickgrid-universal/text-export';
-import { Subscription } from 'rxjs';
-
-import {
-  AngularGridInstance,
-  Column,
-  DelimiterType,
-  FieldType,
-  FileType,
-  Filters,
-  Formatter,
-  Formatters,
-  GridOption,
-  GridStateChange,
-  unsubscribeAllObservables
-} from './../modules/angular-slickgrid';
-
-const NB_ITEMS = 1500;
-
-// create a custom translate Formatter (typically you would move that a separate file, for separation of concerns)
-const taskTranslateFormatter: Formatter = (row, cell, value, columnDef, dataContext, grid) => {
-  const gridOptions = grid?.getOptions?.() as GridOption;
-  const translate = gridOptions.i18n as TranslateService;
-
-  return translate.instant('TASK_X', { x: value });
-};
-
-@Component({
-  templateUrl: './grid-localization.component.html'
-})
-export class GridLocalizationComponent implements OnInit, OnDestroy {
-  title = 'Example 12: Localization (i18n)';
-  subTitle = `Support multiple locales with the ngx-translate plugin, following these steps (<a href="https://github.com/ghiscoding/Angular-Slickgrid/wiki/Localization" target="_blank">Wiki docs</a>)
-  <ol class="small">
-    <li>You first need to "enableTranslate" in the Grid Options</li>
-    <li>In the Column Definitions, you have following options</li>
-    <ul>
-      <li>To translate a header title, use "nameKey" with a translate key (nameKey: 'TITLE')</li>
-      <li>For the cell values, you need to use a Formatter, there's 2 ways of doing it</li>
-      <ul>
-        <li>formatter: myCustomTranslateFormatter <b>&lt;= "Title" column uses it</b></li>
-        <li>formatter: Formatters.translate, i18n: this.translateService <b>&lt;= "Completed" column uses it</b></li>
-      </ul>
-    </ul>
-    <li>For date localization, you need to create your own custom formatter. </li>
-    <ul>
-      <li>You can easily implement logic to switch between Formatters "dateIso" or "dateUs", depending on current locale.</li>
-    </ul>
-    <li>For the Select (dropdown) filter, you can fill in the "labelKey" property, if found it will use it, else it will use "label"</li>
-      <ul>
-        <li>What if your select options have totally different value/label pair? In this case, you can use the <b>customStructure: { label: 'customLabel', value: 'customValue'}</b> to change the property name(s) to use.'</li>
-        <li>What if you want to use "customStructure" and translation? Simply pass this flag <b>enableTranslateLabel: true</b></li>
-        <li>More info on the Select Filter <a href="https://github.com/ghiscoding/Angular-Slickgrid/wiki/Select-Filter" target="_blank">Wiki page</a>
-      </ul>
-    <li>For more info about "Download to File", read the <a href="https://github.com/ghiscoding/Angular-Slickgrid/wiki/Export-to-File" target="_blank">Wiki page</a></li>
-    </ol>
-  `;
-
-  private subscriptions: Subscription[] = [];
-  angularGrid!: AngularGridInstance;
-  columnDefinitions!: Column[];
-  gridOptions!: GridOption;
-  dataset!: any[];
-  selectedLanguage: string;
-  duplicateTitleHeaderCount = 1;
-  gridObj: any;
-  excelExportService = new ExcelExportService();
-  textExportService = new TextExportService();
-
-  constructor(private translate: TranslateService) {
-    // always start with English for Cypress E2E tests to be consistent
-    const defaultLang = 'en';
-    this.translate.use(defaultLang);
-    this.selectedLanguage = defaultLang;
-  }
-
-  ngOnDestroy() {
-    // also unsubscribe all Angular Subscriptions
-    this.subscriptions = unsubscribeAllObservables(this.subscriptions);
-  }
-
-  ngOnInit(): void {
-    this.columnDefinitions = [
-      {
-        id: 'title', name: 'Title', field: 'id', nameKey: 'TITLE', minWidth: 100,
-        formatter: taskTranslateFormatter,
-        sortable: true,
-        filterable: true,
-        params: { useFormatterOuputToFilter: true }
-      },
-      { id: 'description', name: 'Description', field: 'description', filterable: true, sortable: true, minWidth: 80 },
-      {
-        id: 'duration', name: 'Duration (days)', field: 'duration', nameKey: 'DURATION', sortable: true,
-        formatter: Formatters.percentCompleteBar, minWidth: 100,
-        exportWithFormatter: false,
-        filterable: true,
-        type: FieldType.number,
-        filter: { model: Filters.slider, /* operator: '>=',*/ params: { hideSliderNumber: true } }
-      },
-      {
-        id: 'start', name: 'Start', field: 'start', nameKey: 'START', minWidth: 100,
-        formatter: Formatters.dateIso, outputType: FieldType.dateIso, type: FieldType.date, exportWithFormatter: true,
-        filterable: true, filter: { model: Filters.compoundDate }
-      },
-      { id: 'finish', name: 'Finish', field: 'finish', nameKey: 'FINISH', formatter: Formatters.dateIso, outputType: FieldType.dateIso, type: FieldType.date, minWidth: 100, filterable: true, filter: { model: Filters.compoundDate } },
-      {
-        id: 'completedBool', name: 'Completed', field: 'completedBool', nameKey: 'COMPLETED', minWidth: 100,
-        sortable: true,
-        formatter: Formatters.checkmark,
-        exportCustomFormatter: Formatters.translateBoolean,
-        filterable: true,
-        filter: {
-          collection: [{ value: '', label: '' }, { value: true, labelKey: 'TRUE' }, { value: false, labelKey: 'FALSE' }],
-          model: Filters.singleSelect,
-          enableTranslateLabel: true,
-          filterOptions: {
-            autoDropWidth: true
-          }
-        }
-      },
-      {
-        id: 'completed', name: 'Completed', field: 'completed', nameKey: 'COMPLETED', formatter: Formatters.translate, sortable: true,
-        minWidth: 100,
-        exportWithFormatter: true, // you can set this property in the column definition OR in the grid options, column def has priority over grid options
-        filterable: true,
-        filter: {
-          collection: [{ value: '', label: '' }, { value: 'TRUE', labelKey: 'TRUE' }, { value: 'FALSE', labelKey: 'FALSE' }],
-          collectionSortBy: {
-            property: 'labelKey' // will sort by translated value since "enableTranslateLabel" is true
-          },
-          enableTranslateLabel: true,
-          model: Filters.singleSelect,
-          filterOptions: {
-            autoDropWidth: true
-          }
-        }
-      }
-      // OR via your own custom translate formatter
-      // { id: 'completed', name: 'Completed', field: 'completed', nameKey: 'COMPLETED', formatter: translateFormatter, sortable: true, minWidth: 100 }
-    ];
-    this.gridOptions = {
-      autoResize: {
-        container: '#demo-container',
-        rightPadding: 10
-      },
-      enableAutoResize: true,
-      enableExcelCopyBuffer: true,
-      enableFiltering: true,
-      enableTranslate: true,
-      i18n: this.translate,
-      checkboxSelector: {
-        // you can toggle these 2 properties to show the "select all" checkbox in different location
-        hideInFilterHeaderRow: false,
-        hideInColumnTitleRow: true
-      },
-      enableCheckboxSelector: true,
-      enableRowSelection: true,
-      showCustomFooter: true, // display some metrics in the bottom custom footer
-      customFooterOptions: {
-        metricTexts: {
-          // default text displayed in the metrics section on the right
-          // all texts optionally support translation keys,
-          // if you wish to use that feature then use the text properties with the 'Key' suffix (e.g: itemsKey, ofKey, lastUpdateKey)
-          // example "items" for a plain string OR "itemsKey" to use a translation key
-          itemsKey: 'ITEMS',
-          ofKey: 'OF',
-          lastUpdateKey: 'LAST_UPDATE',
-        },
-        dateFormat: 'YYYY-MM-DD, hh:mm a',
-        hideTotalItemCount: false,
-        hideLastUpdateTimestamp: false,
-      },
-      excelExportOptions: {
-        // optionally pass a custom header to the Excel Sheet
-        // a lot of the info can be found on Web Archive of Excel-Builder
-        // http://web.archive.org/web/20160907052007/http://excelbuilderjs.com/cookbook/fontsAndColors.html
-        customExcelHeader: (workbook, sheet) => {
-          const customTitle = this.translate.currentLang === 'fr' ? 'Titre qui est suffisament long pour être coupé' : 'My header that is long enough to wrap';
-          const stylesheet = workbook.getStyleSheet();
-          const aFormatDefn = {
-            'font': { 'size': 12, 'fontName': 'Calibri', 'bold': true, color: 'FF0000FF' }, // every color starts with FF, then regular HTML color
-            'alignment': { 'wrapText': true }
-          };
-          const formatterId = stylesheet.createFormat(aFormatDefn);
-          sheet.setRowInstructions(0, { height: 30 }); // change height of row 0
-
-          // excel cells start with A1 which is upper left corner
-          sheet.mergeCells('B1', 'D1');
-          const cols = [];
-          // push empty data on A1
-          cols.push({ value: '' });
-          // push data in B1 cell with metadata formatter
-          cols.push({ value: customTitle, metadata: { style: formatterId.id } });
-          sheet.data.push(cols);
-        }
-      },
-      exportOptions: {
-        // set at the grid option level, meaning all column will evaluate the Formatter (when it has a Formatter defined)
-        exportWithFormatter: true,
-        sanitizeDataExport: true
-      },
-      gridMenu: {
-        hideExportCsvCommand: false,           // false by default, so it's optional
-        hideExportTextDelimitedCommand: false  // true by default, so if you want it, you will need to disable the flag
-      },
-      enableExcelExport: true,
-      enableTextExport: true,
-      textExportOptions: {
-        // set at the grid option level, meaning all column will evaluate the Formatter (when it has a Formatter defined)
-        exportWithFormatter: true,
-        sanitizeDataExport: true
-      },
-      registerExternalResources: [this.excelExportService, this.textExportService],
-    };
-
-    this.loadData(NB_ITEMS);
-  }
-
-  // mock a dataset
-  loadData(count: number) {
-    this.dataset = [];
-    for (let i = 0; i < count; i++) {
-      const randomYear = 2000 + Math.floor(Math.random() * 30);
-      const randomMonth = Math.floor(Math.random() * 11);
-      const randomDay = Math.floor((Math.random() * 29));
-
-      this.dataset[i] = {
-        id: i,
-        description: (i % 5) ? 'desc ' + i : '🚀🦄 español', // also add some random to test NULL field
-        duration: Math.round(Math.random() * 100) + '',
-        start: new Date(randomYear, randomMonth, randomDay),
-        finish: new Date(randomYear, (randomMonth + 1), randomDay),
-        completedBool: (i % 5 === 0) ? true : false,
-        completed: (i % 5 === 0) ? 'TRUE' : 'FALSE'
-      };
-    }
-  }
-
-  angularGridReady(angularGrid: AngularGridInstance) {
-    this.angularGrid = angularGrid;
-    this.gridObj = angularGrid.slickGrid;
-  }
-
-  dynamicallyAddTitleHeader() {
-    // you can dynamically add your column to your column definitions
-    // and then use the spread operator [...cols] OR slice to force Angular to review the changes
-    const newCol = { id: `title${this.duplicateTitleHeaderCount++}`, field: 'id', nameKey: 'TITLE', formatter: taskTranslateFormatter, sortable: true, minWidth: 100, filterable: true, params: { useFormatterOuputToFilter: true } };
-    this.columnDefinitions.push(newCol);
-    this.columnDefinitions = this.columnDefinitions.slice(); // or use spread operator [...cols]
-
-    // NOTE if you use an Extensions (Checkbox Selector, Row Detail, ...) that modifies the column definitions in any way
-    // you MUST use "getAllColumnDefinitions()" from the GridService, using this will be ALL columns including the 1st column that is created internally
-    // for example if you use the Checkbox Selector (row selection), you MUST use the code below
-    /*
-    const allColumns = this.angularGrid.gridService.getAllColumnDefinitions();
-    allColumns.push(newCol);
-    this.columnDefinitions = [...allColumns]; // (or use slice) reassign to column definitions for Angular to do dirty checking
-    */
-  }
-
-  exportToExcel() {
-    this.excelExportService.exportToExcel({
-      filename: 'Export',
-      format: FileType.xlsx
-    });
-  }
-
-  exportToFile(type = 'csv') {
-    this.textExportService.exportToFile({
-      delimiter: (type === 'csv') ? DelimiterType.comma : DelimiterType.tab,
-      filename: 'myExport',
-      format: (type === 'csv') ? FileType.csv : FileType.txt
-    });
-  }
-
-  /** Dispatched event of a Grid State Changed event */
-  gridStateChanged(gridStateChanges: GridStateChange) {
-    console.log('Grid State changed:: ', gridStateChanges);
-    console.log('Grid State changed:: ', gridStateChanges.change);
-  }
-
-  switchLanguage() {
-    const nextLanguage = (this.selectedLanguage === 'en') ? 'fr' : 'en';
-    this.subscriptions.push(
-      this.translate.use(nextLanguage).subscribe(() => {
-        this.selectedLanguage = nextLanguage;
-      })
-    );
-  }
-}

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

@@ -1,37 +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-menu.component.ts">
-        <span class="fa fa-link"></span> code
-      </a>
-    </span>
-  </h2>
-  <div class="subtitle" [innerHTML]="subTitle"></div>
-
-  <button class="btn btn-outline-secondary btn-sm" data-test="external-gridmenu"
-          (click)="toggleGridMenu($event)">
-    <i class="fa fa-bars"></i>
-    Grid Menu
-  </button>
-  <button class="btn btn-outline-secondary btn-sm" data-test="language" (click)="switchLanguage()">
-    <i class="fa fa-language"></i>
-    Switch Language
-  </button>
-
-  <strong>Locale:</strong>
-  <span style="font-style: italic"
-        data-test="selected-locale">{{selectedLanguage + '.json'}}
-  </span>
-
-  <div class="col-sm-12">
-    <angular-slickgrid gridId="grid9"
-                       [columnDefinitions]="columnDefinitions"
-                       [gridOptions]="gridOptions"
-                       [dataset]="dataset"
-                       (onAngularGridCreated)="angularGridReady($event.detail)">
-    </angular-slickgrid>
-  </div>
-</div>

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

@@ -1,28 +0,0 @@
-$slickcolumn-picker-checkbox-icon-unchecked:   "\f00c" !default;
-$slickcolumn-picker-checkbox-icon-checked:     "\f00c" !default;
-$slickcolumn-picker-checkbox-opacity:          0.2 !default;
-$slickcolumn-picker-checkbox-opacity-hover:    0.35 !default;
-
-$slickgrid-menu-checkbox-icon-unchecked:       "\f096";
-$slickgrid-menu-checkbox-icon-checked:         "\f046";
-$slickgrid-menu-checkbox-opacity:              0.7;
-$slickgrid-menu-checkbox-opacity-hover:        1;
-
-/* make sure to add the @import the SlickGrid Bootstrap Theme AFTER the variables changes */
-@import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-bootstrap.scss';
-
-.blue {
-  color: rgb(73, 73, 255);
-}
-.orange {
-  color: orange;
-}
-.red {
-  color: red;
-}
-.bold {
-  font-weight: bold;
-}
-.italic {
-  font-style: italic;
-}