angular-slickgrid 9.0.0 → 9.0.1

package/src/demos/examples/example07.component.ts

@@ -1,216 +0,0 @@
-import { Component, OnInit, ViewEncapsulation } from '@angular/core';
-
-import { AngularGridInstance, Column, GridOption } from '../../library';
-
-// create a custom Formatter to highlight negative values in red
-let columns1WithHighlightingById: any = {};
-let columns2WithHighlightingById: any = {};
-
-@Component({
-  styleUrls: ['./example07.component.scss'],
-  encapsulation: ViewEncapsulation.None,
-  templateUrl: './example07.component.html',
-  standalone: false,
-})
-export class Example7Component implements OnInit {
-  columnDefinitions1: Column[] = [];
-  columnDefinitions2: Column[] = [];
-  gridOptions1!: GridOption;
-  gridOptions2!: GridOption;
-  dataset1: any[] = [];
-  dataset2: any[] = [];
-  angularGrid1!: AngularGridInstance;
-  angularGrid2!: AngularGridInstance;
-
-  constructor() {
-    columns1WithHighlightingById = {};
-    columns2WithHighlightingById = {};
-  }
-
-  ngOnInit(): void {
-    this.defineGrid();
-
-    // populate the dataset once the grid is ready
-    this.dataset1 = this.loadData(200, 1);
-    this.dataset2 = this.loadData(200, 2);
-  }
-
-  angularGrid1Ready(angularGrid: AngularGridInstance) {
-    this.angularGrid1 = angularGrid;
-  }
-
-  angularGrid2Ready(angularGrid: AngularGridInstance) {
-    this.angularGrid2 = angularGrid;
-  }
-
-  defineGrid() {
-    this.gridOptions1 = {
-      enableAutoResize: true,
-      enableHeaderButton: true,
-      enableHeaderMenu: false,
-      autoResize: {
-        container: '#demo-container',
-        rightPadding: 10,
-      },
-      enableFiltering: false,
-      enableExcelCopyBuffer: true,
-      excelCopyBufferOptions: {
-        onCopyCells: (e, args) => console.log('onCopyCells', e, args),
-        onPasteCells: (e, args) => console.log('onPasteCells', e, args),
-        onCopyCancelled: (e, args) => console.log('onCopyCancelled', e, args),
-      },
-      enableCellNavigation: true,
-      gridHeight: 275,
-      headerButton: {
-        // you can use the "onCommand" (in Grid Options) and/or the "action" callback (in Column Definition)
-        onCommand: (_e, args) => this.handleOnCommand(_e, args, 1),
-      },
-    };
-
-    // grid 2 options, same as grid 1 + extras
-    this.gridOptions2 = {
-      ...this.gridOptions1,
-      enableHeaderMenu: true,
-      enableFiltering: true,
-      // frozenColumn: 2,
-      // frozenRow: 2,
-      headerButton: {
-        // when floating to left, you might want to inverse the icon orders
-        onCommand: (_e, args) => this.handleOnCommand(_e, args, 2),
-      },
-    };
-  }
-
-  handleOnCommand(_e: any, args: any, gridNo: 1 | 2) {
-    const column = args.column;
-    const button = args.button;
-    const command = args.command;
-
-    if (command === 'toggle-highlight') {
-      if (button.cssClass === 'mdi mdi-lightbulb-on text-danger') {
-        if (gridNo === 1) {
-          delete columns1WithHighlightingById[column.id];
-        } else {
-          delete columns2WithHighlightingById[column.id];
-        }
-        button.cssClass = 'mdi mdi-lightbulb-outline text-warning faded';
-        button.tooltip = 'Highlight negative numbers.';
-      } else {
-        if (gridNo === 1) {
-          columns1WithHighlightingById[column.id] = true;
-        } else {
-          columns2WithHighlightingById[column.id] = true;
-        }
-        button.cssClass = 'mdi mdi-lightbulb-on text-danger';
-        button.tooltip = 'Remove highlight.';
-      }
-      ((this as any)[`angularGrid${gridNo}`] as AngularGridInstance).slickGrid.invalidate();
-    }
-  }
-
-  loadData(count: number, gridNo: 1 | 2) {
-    // Set up some test columns.
-    for (let i = 0; i < 10; i++) {
-      (this as any)[`columnDefinitions${gridNo}`].push({
-        id: i,
-        name: 'Column ' + String.fromCharCode('A'.charCodeAt(0) + i),
-        field: i + '',
-        width: i === 0 ? 70 : 100, // have the 2 first columns wider
-        filterable: true,
-        sortable: true,
-        formatter: (_row: number, _cell: number, value: any, columnDef: Column) => {
-          if (gridNo === 1 && columns1WithHighlightingById[columnDef.id] && value < 0) {
-            return `<div style="color:red; font-weight:bold;">${value}</div>`;
-          } else if (gridNo === 2 && columns2WithHighlightingById[columnDef.id] && value < 0) {
-            return `<div style="color:red; font-weight:bold;">${value}</div>`;
-          }
-          return value;
-        },
-        header: {
-          buttons: [
-            {
-              cssClass: 'mdi mdi-lightbulb-outline text-warning faded',
-              command: 'toggle-highlight',
-              tooltip: 'Highlight negative numbers.',
-              itemVisibilityOverride: (args: any) => {
-                // for example don't show the header button on column "E"
-                return args.column.name !== 'Column E';
-              },
-              itemUsabilityOverride: (args: any) => {
-                // for example the button usable everywhere except on last column ='J"
-                return args.column.name !== 'Column J';
-              },
-              action: (_e: Event, args: any) => {
-                // you can use the "action" callback and/or subscribe to the "onCallback" event, they both have the same arguments
-                // do something
-                console.log(`execute a callback action to "${args.command}" on ${args.column.name}`);
-              },
-            },
-          ],
-        },
-      });
-    }
-
-    // Set multiple buttons on the first column to demonstrate overflow.
-    (this as any)[`columnDefinitions${gridNo}`][0].name = 'Resize me!';
-    (this as any)[`columnDefinitions${gridNo}`][0].header = {
-      buttons: [
-        {
-          cssClass: 'mdi mdi-message-text',
-          handler: () => {
-            alert('Tag');
-          },
-        },
-        {
-          cssClass: 'mdi mdi-forum-outline',
-          handler: () => {
-            alert('Comment');
-          },
-        },
-        {
-          cssClass: 'mdi mdi-information',
-          handler: () => {
-            alert('Info');
-          },
-        },
-        {
-          cssClass: 'mdi mdi-help-circle',
-          handler: () => {
-            alert('Help');
-          },
-        },
-      ],
-    };
-
-    // when floating to left, you might want to inverse the icon orders
-    if (gridNo === 2) {
-      this.columnDefinitions2[0].header?.buttons?.reverse();
-    }
-
-    // Set a button on the second column to demonstrate hover.
-    (this as any)[`columnDefinitions${gridNo}`][1].name = 'Hover me!';
-    (this as any)[`columnDefinitions${gridNo}`][1].header = {
-      buttons: [
-        {
-          cssClass: 'mdi mdi-help-circle',
-          showOnHover: true,
-          tooltip: 'This button only appears on hover.',
-          handler: () => {
-            alert('Help');
-          },
-        },
-      ],
-    };
-
-    // mock a dataset
-    const mockDataset = [];
-    for (let i = 0; i < count; i++) {
-      const d: any = (mockDataset[i] = {});
-      d['id'] = i;
-      for (let j = 0; j < (this as any)[`columnDefinitions${gridNo}`].length; j++) {
-        d[j] = Math.round(Math.random() * 10) - 5;
-      }
-    }
-    return mockDataset;
-  }
-}

package/src/demos/examples/example08.component.html

@@ -1,51 +0,0 @@
-<div id="demo-container" class="container-fluid">
-  <h2>
-    Example 8: Header Menu Plugin
-    <span class="float-end">
-      <a
-        style="font-size: 18px"
-        target="_blank"
-        href="https://github.com/ghiscoding/slickgrid-universal/blob/master/frameworks/angular-slickgrid/src/demos/examples/grid-headermenu.component.ts"
-      >
-        <span class="mdi mdi-link-variant"></span> code
-      </a>
-    </span>
-  </h2>
-  <div class="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://ghiscoding.gitbook.io/angular-slickgrid/grid-functionalities/header-menu-and-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>
-  </div>
-
-  <button class="btn btn-outline-secondary btn-sm btn-icon" (click)="switchLanguage()">
-    <i class="mdi mdi-translate"></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" [columns]="columnDefinitions" [options]="gridOptions" [dataset]="dataset"> </angular-slickgrid>
-  </div>
-</div>

package/src/demos/examples/example08.component.scss

@@ -1,23 +0,0 @@
-@use '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-bootstrap.scss' with (
-  $slick-header-menu-button-border-width:  0px 1px,
-  $slick-header-menu-button-icon-svg-path: "M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M7,10L12,15L17,10H7Z",
-  $slick-header-menu-button-icon-size:     16px,
-  $slick-header-menu-button-padding:       10px 0 0 3px,
-  $slick-sort-indicator-hint-opacity:      0,
-);
-
-.blue {
-  color: rgb(73, 73, 255);
-}
-.orange {
-  color: orange;
-}
-.red {
-  color: red;
-}
-.bold {
-  font-weight: bold;
-}
-.italic {
-  font-style: italic;
-}

package/src/demos/examples/example08.component.ts

@@ -1,195 +0,0 @@
-import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
-import { Column, GridOption, unsubscribeAllObservables } from '../../library';
-import { TranslateService } from '@ngx-translate/core';
-import { Subscription } from 'rxjs';
-
-@Component({
-  templateUrl: './example08.component.html',
-  styleUrls: ['./example08.component.scss'],
-  encapsulation: ViewEncapsulation.None,
-  standalone: false,
-})
-export class Example8Component implements OnInit, OnDestroy {
-  private subscriptions: Subscription[] = [];
-  columnDefinitions!: Column[];
-  gridOptions!: GridOption;
-  dataset!: any[];
-  selectedLanguage: string;
-
-  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
-    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: {
-          commandItems: [
-            // 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: 'mdi mdi-help-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',
-            {
-              // we can also have multiple nested sub-menus
-              command: 'custom-actions',
-              title: 'Hello',
-              positionOrder: 99,
-              commandItems: [
-                { command: 'hello-world', title: 'Hello World' },
-                { command: 'hello-slickgrid', title: 'Hello SlickGrid' },
-                {
-                  command: 'sub-menu',
-                  title: `Let's play`,
-                  cssClass: 'green',
-                  subMenuTitle: 'choose your game',
-                  subMenuTitleCssClass: 'text-italic salmon',
-                  commandItems: [
-                    { command: 'sport-badminton', title: 'Badminton' },
-                    { command: 'sport-tennis', title: 'Tennis' },
-                    { command: 'sport-racquetball', title: 'Racquetball' },
-                    { command: 'sport-squash', title: 'Squash' },
-                  ],
-                },
-              ],
-            },
-            {
-              command: 'feedback',
-              title: 'Feedback',
-              positionOrder: 100,
-              commandItems: [
-                {
-                  command: 'request-update',
-                  title: 'Request update from supplier',
-                  iconCssClass: 'mdi mdi-star',
-                  tooltip: 'this will automatically send an alert to the shipping team to contact the user for an update',
-                },
-                'divider',
-                {
-                  command: 'sub-menu',
-                  title: 'Contact Us',
-                  iconCssClass: 'mdi mdi-account',
-                  subMenuTitle: 'contact us...',
-                  subMenuTitleCssClass: 'italic',
-                  commandItems: [
-                    { command: 'contact-email', title: 'Email us', iconCssClass: 'mdi mdi-pencil-outline' },
-                    { command: 'contact-chat', title: 'Chat with us', iconCssClass: 'mdi mdi-message-text-outline' },
-                    { command: 'contact-meeting', title: 'Book an appointment', iconCssClass: 'mdi mdi-coffee' },
-                  ],
-                },
-              ],
-            },
-          ],
-        },
-      };
-    });
-
-    this.gridOptions = {
-      enableAutoResize: true,
-      enableHeaderMenu: true,
-      autoResize: {
-        container: '#demo-container',
-        rightPadding: 10,
-      },
-      enableFiltering: false,
-      enableCellNavigation: true,
-      headerMenu: {
-        hideSortCommands: false,
-        hideColumnHideCommand: false,
-        subItemChevronClass: 'mdi mdi-chevron-down mdi-rotate-270',
-        // you can use the "onCommand" (in Grid Options) and/or the "action" callback (in Column Definition)
-        onCommand: (_e, args) => {
-          // e.preventDefault(); // preventing default event would keep the menu open after the execution
-          const command = args.item?.command;
-          if (command.includes('hello-')) {
-            alert(args?.item.title);
-          } else if (command.includes('sport-')) {
-            alert('Just do it, play ' + args?.item?.title);
-          } else if (command.includes('contact-')) {
-            alert('Command: ' + args?.item?.command);
-          } else 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;
-  }
-
-  switchLanguage() {
-    const nextLanguage = this.selectedLanguage === 'en' ? 'fr' : 'en';
-    this.subscriptions.push(
-      this.translate.use(nextLanguage).subscribe(() => {
-        this.selectedLanguage = nextLanguage;
-      })
-    );
-  }
-}

package/src/demos/examples/example09.component.html

@@ -1,55 +0,0 @@
-<div id="demo-container" class="container-fluid">
-  <h2>
-    Example 9: Grid Menu Control
-    <span class="float-end">
-      <a
-        style="font-size: 18px"
-        target="_blank"
-        href="https://github.com/ghiscoding/slickgrid-universal/blob/master/frameworks/angular-slickgrid/src/demos/examples/grid-menu.component.ts"
-      >
-        <span class="mdi mdi-link-variant"></span> code
-      </a>
-    </span>
-  </h2>
-  <div class="subtitle">
-    This example demonstrates using the <b>Slick.Controls.GridMenu</b> plugin to easily add a Grid Menu (aka hamburger menu) on the top
-    right corner of the grid. (<a href="https://ghiscoding.gitbook.io/angular-slickgrid/grid-functionalities/grid-menu" target="_blank"
-      >Wiki docs</a
-    >)
-    <br />
-    <ul>
-      <li>
-        You can change the Grid Menu icon, for example "mdi-dots-vertical"&nbsp;&nbsp;<span class="mdi mdi-dots-vertical"></span
-        >&nbsp;&nbsp;(which is shown in this example)
-      </li>
-      <li>By default the Grid Menu shows all columns which you can show/hide them</li>
-      <li>You can configure multiple custom "commands" to show up in the Grid Menu and use the "onGridMenuCommand()" callback</li>
-      <li>Doing a "right + click" over any column header will also provide a way to show/hide a column (via the Column Picker Plugin)</li>
-      <li>You can change the icons of both picker via SASS variables as shown in this demo (check all SASS variables)</li>
-      <li><i class="mdi mdi-arrow-down"></i> You can also show the Grid Menu anywhere on your page</li>
-    </ul>
-  </div>
-
-  <button class="btn btn-outline-secondary btn-sm btn-icon" data-test="external-gridmenu" (click)="toggleGridMenu($event)">
-    <i class="mdi mdi-menu"></i>
-    Grid Menu
-  </button>
-  <button class="btn btn-outline-secondary btn-sm btn-icon" data-test="language" (click)="switchLanguage()">
-    <i class="mdi mdi-translate"></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"
-      [columns]="columnDefinitions"
-      [options]="gridOptions"
-      [dataset]="dataset"
-      (onAngularGridCreated)="angularGridReady($event.detail)"
-    >
-    </angular-slickgrid>
-  </div>
-</div>

package/src/demos/examples/example09.component.scss

@@ -1,22 +0,0 @@
-@use '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-bootstrap.scss' with (
-  $slick-column-picker-icon-checked-svg-path:    "M19,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3M19,5V19H5V5H19M10,17L6,13L7.41,11.58L10,14.17L16.59,7.58L18,9",
-  $slick-column-picker-icon-unchecked-svg-path:  "M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z",
-  $slick-column-picker-icon-font-size:           16px,
-  $slick-checkbox-opacity-hover:                 0.35,
-);
-
-.blue {
-  color: rgb(73, 73, 255);
-}
-.orange {
-  color: orange;
-}
-.red {
-  color: red;
-}
-.bold {
-  font-weight: bold;
-}
-.italic {
-  font-style: italic;
-}