angular-slickgrid 9.0.0 → 9.0.1

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

@@ -1,50 +0,0 @@
-<div class="container-fluid">
-  <h2>
-    Example 41: Drag & Drop
-    <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-drag-recycle.component.ts"
-      >
-        <span class="mdi mdi-link-variant"></span> code
-      </a>
-    </span>
-  </h2>
-
-  <h6 class="subtitle italic">
-    <ul>
-      <li>Click to select, Ctrl-click to toggle selection(s).</li>
-      <li>Drag one or more rows by the handle icon to reorder.</li>
-      <li>Drag one or more rows by selection and drag to the recycle bin to delete.</li>
-    </ul>
-  </h6>
-
-  <div class="row">
-    <div class="col">
-      <div class="grid41">
-        <angular-slickgrid
-          gridId="grid41"
-          [columns]="columnDefinitions"
-          [options]="gridOptions"
-          [dataset]="dataset"
-          (onAngularGridCreated)="angularGridReady($event.detail)"
-          (onDragInit)="handleOnDragInit($event.detail.eventData)"
-          (onDragStart)="handleOnDragStart($event.detail.eventData)"
-          (onDrag)="handleOnDrag($event.detail.eventData, $event.detail.args)"
-          (onDragEnd)="handleOnDragEnd($event.detail.eventData, $event.detail.args)"
-        >
-          <ng-template #slickgridHeader>
-            <div class="grid-header">
-              <label>Santa's TODO list:</label>
-            </div>
-          </ng-template>
-        </angular-slickgrid>
-      </div>
-    </div>
-
-    <div class="col">
-      <div id="dropzone" class="recycle-bin mt-4">Recycle Bin</div>
-    </div>
-  </div>
-</div>

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

@@ -1,42 +0,0 @@
-.drag-message {
-  position: absolute;
-  display: inline-block;
-  padding: 4px 10px;
-  background: #e0e0e0;
-  border: 1px solid gray;
-  z-index: 99999;
-  border-radius: 8px;
-  box-shadow: 2px 2px 6px silver;
-}
-
-.grid-header {
-  display: flex;
-  align-items: center;
-  box-sizing: border-box;
-  font-weight: bold;
-  height: 35px;
-  padding-left: 8px;
-  width: 100%;
-}
-
-.recycle-bin {
-  background: transparent;
-  cursor: default;
-  width: 120px;
-  border: 2px solid #e4e4e4;
-  background: beige;
-  padding: 4px;
-  font-size: 12pt;
-  font-weight: bold;
-  color: black;
-  text-align: center;
-  border-radius: 10px;
-
-  &.drag-dropzone {
-    border: 2px dashed pink;
-  }
-  &.drag-hover {
-    background: pink;
-    cursor: crosshair;
-  }
-}

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

@@ -1,229 +0,0 @@
-import { Component, OnInit, ViewEncapsulation } from '@angular/core';
-import { AngularGridInstance, Column, Editors, Formatters, GridOption, SlickGlobalEditorLock } from '../../library';
-
-@Component({
-  templateUrl: './example41.component.html',
-  styleUrls: ['./example41.component.scss'],
-  encapsulation: ViewEncapsulation.None,
-  standalone: false,
-})
-export class Example41Component implements OnInit {
-  angularGrid!: AngularGridInstance;
-  gridOptions!: GridOption;
-  columnDefinitions!: Column[];
-  dataset!: any[];
-  dragHelper?: HTMLElement;
-  dragRows: number[] = [];
-  dragMode = '';
-
-  ngOnInit(): void {
-    this.defineGrids();
-
-    // mock a dataset
-    this.dataset = this.mockData();
-  }
-
-  angularGridReady(angularGrid: AngularGridInstance) {
-    this.angularGrid = angularGrid;
-  }
-
-  isBrowserDarkModeEnabled() {
-    return window.matchMedia?.('(prefers-color-scheme: dark)').matches ?? false;
-  }
-
-  /* Define grid Options and Columns */
-  defineGrids() {
-    this.columnDefinitions = [
-      {
-        id: 'name',
-        name: 'Name',
-        field: 'name',
-        width: 300,
-        cssClass: 'cell-title',
-        editor: { model: Editors.Text },
-        validator: this.requiredFieldValidator,
-      },
-      {
-        id: 'complete',
-        name: 'Complete',
-        width: 60,
-        cssClass: 'cell-effort-driven',
-        field: 'complete',
-        cannotTriggerInsert: true,
-        formatter: Formatters.checkmarkMaterial,
-        editor: { model: Editors.Checkbox },
-      },
-    ];
-
-    this.gridOptions = {
-      enableAutoResize: false,
-      gridHeight: 225,
-      gridWidth: 800,
-      rowHeight: 33,
-      enableCellNavigation: true,
-      enableRowSelection: true,
-      enableRowMoveManager: true,
-      rowSelectionOptions: {
-        // True (Single Selection), False (Multiple Selections)
-        selectActiveRow: false,
-      },
-      rowMoveManager: {
-        columnIndexPosition: 0,
-        cancelEditOnDrag: true,
-        disableRowSelection: true,
-        hideRowMoveShadow: false,
-        onBeforeMoveRows: this.onBeforeMoveRows.bind(this),
-        onMoveRows: this.onMoveRows.bind(this),
-
-        // you can also override the usability of the rows, for example make every 2nd row the only moveable rows,
-        // usabilityOverride: (row, dataContext, grid) => dataContext.id % 2 === 1
-      },
-    };
-  }
-
-  mockData() {
-    return [
-      { id: 0, name: 'Make a list', complete: true },
-      { id: 1, name: 'Check it twice', complete: false },
-      { id: 2, name: `Find out who's naughty`, complete: false },
-      { id: 3, name: `Find out who's nice`, complete: false },
-    ];
-  }
-
-  onBeforeMoveRows(e: MouseEvent | TouchEvent, data: { rows: number[]; insertBefore: number }) {
-    for (const dataRow of data.rows) {
-      // no point in moving before or after itself
-      if (dataRow === data.insertBefore || dataRow === data.insertBefore - 1) {
-        e.stopPropagation();
-        return false;
-      }
-    }
-    return true;
-  }
-
-  onMoveRows(_e: MouseEvent | TouchEvent, args: { rows: number[]; insertBefore: number }) {
-    const extractedRows: any[] = [];
-    const rows = args.rows;
-    const insertBefore = args.insertBefore;
-    const left = this.dataset.slice(0, insertBefore);
-    const right = this.dataset.slice(insertBefore, this.dataset.length);
-
-    rows.sort((a, b) => a - b);
-
-    for (const row of rows) {
-      extractedRows.push(this.dataset[row]);
-    }
-
-    rows.reverse();
-
-    for (const row of rows) {
-      if (row < insertBefore) {
-        left.splice(row, 1);
-      } else {
-        right.splice(row - insertBefore, 1);
-      }
-    }
-
-    this.dataset = left.concat(extractedRows.concat(right));
-
-    const selectedRows: number[] = [];
-    for (let i = 0; i < rows.length; i++) {
-      selectedRows.push(left.length + i);
-    }
-
-    this.angularGrid.slickGrid?.resetActiveCell();
-    this.dataset = [...this.dataset];
-  }
-
-  handleOnDragInit(e: CustomEvent) {
-    // prevent the grid from cancelling drag'n'drop by default
-    e.stopImmediatePropagation();
-  }
-
-  handleOnDragStart(e: CustomEvent) {
-    const cell = this.angularGrid.slickGrid?.getCellFromEvent(e);
-
-    if (!cell || cell.cell === 0) {
-      this.dragMode = '';
-      return;
-    }
-
-    const row = cell.row;
-    if (!this.dataset[row]) {
-      return;
-    }
-
-    if (SlickGlobalEditorLock.isActive()) {
-      return;
-    }
-
-    e.stopImmediatePropagation();
-    this.dragMode = 'recycle';
-
-    let selectedRows: number[] = this.angularGrid.slickGrid?.getSelectedRows() || [];
-
-    if (!selectedRows.length || selectedRows.findIndex((row) => row === row) === -1) {
-      selectedRows = [row];
-      this.angularGrid.slickGrid?.setSelectedRows(selectedRows);
-    }
-
-    this.dragRows = selectedRows;
-    const dragCount = selectedRows.length;
-
-    const dragMsgElm = document.createElement('span');
-    dragMsgElm.className = 'drag-message';
-    dragMsgElm.textContent = `Drag to Recycle Bin to delete ${dragCount} selected row(s)`;
-    this.dragHelper = dragMsgElm;
-    document.body.appendChild(dragMsgElm);
-    document.querySelector<HTMLDivElement>('#dropzone')?.classList.add('drag-dropzone');
-
-    return dragMsgElm;
-  }
-
-  handleOnDrag(e: MouseEvent, args: any) {
-    if (this.dragMode !== 'recycle') {
-      return;
-    }
-    if (this.dragHelper instanceof HTMLElement) {
-      this.dragHelper.style.top = `${e.pageY + 5}px`;
-      this.dragHelper.style.left = `${e.pageX + 5}px`;
-    }
-
-    // add/remove pink background color when hovering recycle bin
-    const dropzoneElm = document.querySelector<HTMLDivElement>('#dropzone')!;
-    if (args.target instanceof HTMLElement && (args.target.id === 'dropzone' || args.target === dropzoneElm)) {
-      dropzoneElm.classList.add('drag-hover'); // OR: dd.target.style.background = 'pink';
-    } else {
-      dropzoneElm.classList.remove('drag-hover');
-    }
-  }
-
-  handleOnDragEnd(e: CustomEvent, args: any) {
-    if (this.dragMode != 'recycle') {
-      return;
-    }
-    this.dragHelper?.remove();
-    document.querySelector<HTMLDivElement>('#dropzone')?.classList.remove('drag-dropzone', 'drag-hover');
-
-    if (this.dragMode != 'recycle' || args.target.id !== 'dropzone') {
-      return;
-    }
-
-    // reaching here means that we'll remove the row that we started dragging from the dataset
-    const rowsToDelete = this.dragRows.sort().reverse();
-    for (const rowToDelete of rowsToDelete) {
-      this.dataset.splice(rowToDelete, 1);
-    }
-    this.angularGrid.slickGrid?.invalidate();
-    this.angularGrid.slickGrid?.setSelectedRows([]);
-    this.dataset = [...this.dataset];
-  }
-
-  requiredFieldValidator(value: any) {
-    if (value == null || value == undefined || !value.length) {
-      return { valid: false, msg: 'This is a required field' };
-    } else {
-      return { valid: true, msg: null };
-    }
-  }
-}

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

@@ -1,47 +0,0 @@
-<div id="demo-container" class="container-fluid">
-  <h2>
-    Example 42: Custom Pagination
-    <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-custom-pagination.component.ts"
-      >
-        <span class="mdi mdi-link-variant"></span> code
-      </a>
-    </span>
-  </h2>
-  <div class="subtitle">
-    You can create a Custom Pagination by passing an Angular Custom Component and it must <code>implements BasePaginationComponent</code>.
-    Any of the pagination controls could be moved anywhere on the page (for example we purposely moved the page size away from the rest of
-    the pagination elements).
-  </div>
-
-  <div>
-    <button class="btn btn-outline-secondary btn-icon" (click)="togglePaginationPosition()" data-text="toggle-pagination-btn">
-      <span class="mdi mdi-swap-vertical"></span>
-      <span>Toggle Pagination Position</span>
-    </button>
-
-    <span class="margin-15px">
-      Page Size
-      <input
-        type="text"
-        class="input is-small is-narrow"
-        data-test="page-size-input"
-        [(ngModel)]="pageSize"
-        (ngModelChange)="setPaginationSize($event)"
-        style="width: 55px"
-      />
-    </span>
-  </div>
-
-  <angular-slickgrid
-    gridId="grid42"
-    [columns]="columnDefinitions"
-    [options]="gridOptions"
-    [dataset]="dataset"
-    (onAngularGridCreated)="angularGridReady($event.detail)"
-  >
-  </angular-slickgrid>
-</div>

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

@@ -1,203 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import {
-  AngularGridInstance,
-  AngularUtilService,
-  Column,
-  Filters,
-  Formatters,
-  GridOption,
-  MultipleSelectOption,
-  SliderRangeOption,
-} from '../../library';
-import { CustomPagerComponent } from './grid-custom-pager.component';
-
-const NB_ITEMS = 5000;
-
-function randomBetween(min: number, max: number): number {
-  return Math.floor(Math.random() * (max - min + 1) + min);
-}
-
-@Component({
-  templateUrl: './example42.component.html',
-  providers: [AngularUtilService],
-  standalone: false,
-})
-export class Example42Component implements OnInit {
-  pageSize = 50;
-  columnDefinitions: Column[] = [];
-  gridContainerElm!: HTMLDivElement;
-  gridOptions!: GridOption;
-  dataset: any[] = [];
-  paginationPosition: 'bottom' | 'top' = 'top';
-  angularGrid!: AngularGridInstance;
-
-  constructor(protected readonly angularUtilService: AngularUtilService) {}
-
-  angularGridReady(angularGrid: AngularGridInstance) {
-    this.angularGrid = angularGrid;
-  }
-
-  ngOnInit(): void {
-    this.defineGrid();
-
-    // mock a dataset
-    this.dataset = this.loadData(NB_ITEMS);
-  }
-
-  /* Define grid Options and Columns */
-  defineGrid() {
-    this.columnDefinitions = [
-      {
-        id: 'title',
-        name: 'Title',
-        field: 'id',
-        minWidth: 100,
-        sortable: true,
-        filterable: true,
-        formatter: (_row, _cell, val) => `Task ${val}`,
-        params: { useFormatterOuputToFilter: true },
-      },
-      {
-        id: 'description',
-        name: 'Description',
-        field: 'description',
-        filterable: true,
-        sortable: true,
-        minWidth: 80,
-      },
-      {
-        id: 'percentComplete',
-        name: '% Complete',
-        field: 'percentComplete',
-        minWidth: 120,
-        sortable: true,
-        customTooltip: { position: 'center' },
-        formatter: Formatters.progressBar,
-        type: 'number',
-        filterable: true,
-        filter: {
-          model: Filters.sliderRange,
-          maxValue: 100, // or you can use the options as well
-          operator: 'RangeInclusive', // defaults to inclusive
-          options: {
-            hideSliderNumbers: false, // you can hide/show the slider numbers on both side
-            min: 0,
-            step: 5,
-          } as SliderRangeOption,
-        },
-      },
-      {
-        id: 'start',
-        name: 'Start',
-        field: 'start',
-        formatter: Formatters.dateIso,
-        sortable: true,
-        minWidth: 75,
-        width: 100,
-        exportWithFormatter: true,
-        type: 'date',
-        filterable: true,
-        filter: { model: Filters.compoundDate },
-      },
-      {
-        id: 'finish',
-        name: 'Finish',
-        field: 'finish',
-        formatter: Formatters.dateIso,
-        sortable: true,
-        minWidth: 75,
-        width: 120,
-        exportWithFormatter: true,
-        type: 'date',
-        filterable: true,
-        filter: {
-          model: Filters.dateRange,
-        },
-      },
-      {
-        id: 'duration',
-        field: 'duration',
-        name: 'Duration',
-        maxWidth: 90,
-        type: 'number',
-        sortable: true,
-        filterable: true,
-        filter: {
-          model: Filters.input,
-          operator: 'RangeExclusive', // defaults to exclusive
-        },
-      },
-      {
-        id: 'completed',
-        name: 'Completed',
-        field: 'completed',
-        minWidth: 85,
-        maxWidth: 90,
-        formatter: Formatters.checkmarkMaterial,
-        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, label: 'True' },
-            { value: false, label: 'False' },
-          ],
-          model: Filters.singleSelect,
-          options: { autoAdjustDropHeight: true } as MultipleSelectOption,
-        },
-      },
-    ];
-
-    this.gridOptions = {
-      autoResize: {
-        container: '#demo-container',
-        bottomPadding: this.paginationPosition === 'top' ? -1 : 38, // use a negative bottom padding since we've prepended custom pagination
-      },
-      enableExcelCopyBuffer: true,
-      enableFiltering: true,
-      customPaginationComponent: CustomPagerComponent, // load our Custom Pagination Component
-      enablePagination: true,
-      pagination: {
-        pageSize: this.pageSize,
-      },
-      rowHeight: 40,
-    };
-  }
-
-  loadData(itemCount: number): any[] {
-    // mock a dataset
-    const tempDataset: any[] = [];
-    for (let i = 0, ln = itemCount; i < ln; i++) {
-      const randomDuration = randomBetween(0, 365);
-      const randomYear = randomBetween(new Date().getFullYear(), new Date().getFullYear() + 1);
-      const randomMonth = randomBetween(0, 12);
-      const randomDay = randomBetween(10, 28);
-      const randomPercent = randomBetween(0, 100);
-
-      tempDataset.push({
-        id: i,
-        title: 'Task ' + i,
-        description: i % 5 ? 'desc ' + i : null, // also add some random to test NULL field
-        duration: randomDuration,
-        percentComplete: randomPercent,
-        percentCompleteNumber: randomPercent,
-        start: i % 4 ? null : new Date(randomYear, randomMonth, randomDay), // provide a Date format
-        finish: new Date(randomYear, randomMonth, randomDay),
-        completed: randomPercent === 100 ? true : false,
-      });
-    }
-
-    return tempDataset;
-  }
-
-  setPaginationSize(pageSize: number) {
-    this.angularGrid.paginationService?.changeItemPerPage(pageSize);
-  }
-
-  togglePaginationPosition() {
-    const gridContainerElm = document.querySelector(`#${this.gridOptions.gridContainerId || ''}`) as HTMLElement;
-    this.paginationPosition = this.paginationPosition === 'top' ? 'bottom' : 'top';
-    (this.angularGrid.paginationComponent as CustomPagerComponent)?.disposeElement();
-    (this.angularGrid.paginationComponent as CustomPagerComponent)?.renderPagination(gridContainerElm, this.paginationPosition);
-  }
-}

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

@@ -1,94 +0,0 @@
-<div id="demo-container" class="container-fluid">
-  <h2>
-    Example 43: colspan/rowspan - Employees Timesheets
-    <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/grid43.component.ts"
-      >
-        <span class="mdi mdi-link-variant"></span> code
-      </a>
-    </span>
-    <button
-      class="ms-2 btn btn-outline-secondary btn-sm btn-icon"
-      type="button"
-      data-test="toggle-subtitle"
-      (click)="hideSubTitle = !hideSubTitle"
-    >
-      <span class="mdi mdi-information-outline" title="Toggle example sub-title details"></span>
-    </button>
-  </h2>
-
-  <div class="subtitle" [hidden]="hideSubTitle">
-    <p class="italic example-details">
-      <b>NOTES</b>: <code>rowspan</code> is an opt-in feature, because of its small perf hit (it needs to loop through all row metadatas to
-      map all rowspan), and requires the <code>enableCellRowSpan</code> grid option to be enabled to work properly. The
-      <code>colspan</code>/<code>rowspan</code> are both using DataView item metadata and are both based on row indexes and will
-      <b>not</b> keep the row in sync with the data. It is really up to you the user to update the metadata logic of how and where the cells
-      should span when a side effect kicks in. (i.e: Filtering/Sorting/Paging/Column Reorder... will <b>not</b> change/update the spanning
-      in the grid by itself and that is why they these features are all disabled in this example). Also, column/row freezing (pinning) are
-      also not supported, or at least not recommended unless you know exactly what you're doing (like in this demo here because we know our
-      pinning doesn't intersect)! Any freezing column/row that could intersect with a <code>colspan</code>/<code>rowspan</code>
-      <b>will cause problems</b>.
-    </p>
-  </div>
-
-  <button
-    class="ms-1 btn btn-outline-secondary btn-sm btn-icon"
-    data-test="goto-up"
-    (click)="navigateUp()"
-    title="from an active cell, navigate to cell above"
-  >
-    <span class="mdi mdi-chevron-down mdi-rotate-180"></span>
-    Navigate Up Cell
-  </button>
-  <button
-    class="ms-1 btn btn-outline-secondary btn-sm btn-icon"
-    data-test="goto-down"
-    (click)="navigateDown()"
-    title="from an active cell, navigate to cell below"
-  >
-    <span class="mdi mdi-chevron-down"></span>
-    Navigate Down Cell
-  </button>
-  <button
-    class="ms-1 btn btn-outline-secondary btn-sm btn-icon"
-    data-test="goto-prev"
-    (click)="navigatePrev()"
-    title="from an active cell, navigate to previous left cell"
-  >
-    <span class="mdi mdi-chevron-down mdi-rotate-90"></span>
-    Navigate to Left Cell
-  </button>
-  <button
-    class="ms-1 btn btn-outline-secondary btn-sm btn-icon"
-    data-test="goto-next"
-    (click)="navigateNext()"
-    title="from an active cell, navigate to next right cell"
-  >
-    <span class="mdi mdi-chevron-down mdi-rotate-270"></span>
-    Navigate to Right Cell
-  </button>
-  <button class="ms-2 btn btn-outline-secondary btn-sm btn-icon mx-1" data-test="toggle-employee-id" (click)="toggleEmployeeIdVisibility()">
-    Show/Hide EmployeeID
-  </button>
-  <button class="ms-1 btn btn-outline-secondary btn-sm btn-icon mx-1" (click)="toggleEditing()" data-test="toggle-editing">
-    <span class="mdi mdi-pencil-outline"></span>
-    <span
-      >Toggle Editing: <span id="isEditable" class="text-italic">{{ isEditable }}</span></span
-    >
-  </button>
-  <button class="btn btn-outline-secondary btn-sm btn-icon mx-1" data-test="export-excel-btn" (click)="exportToExcel()">
-    <i class="mdi mdi-file-excel-outline text-success"></i> Export to Excel
-  </button>
-
-  <angular-slickgrid
-    gridId="grid43"
-    [columns]="columnDefinitions"
-    [options]="gridOptions"
-    [dataset]="dataset"
-    (onAngularGridCreated)="angularGridReady($event.detail)"
-  >
-  </angular-slickgrid>
-</div>

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

@@ -1,30 +0,0 @@
-#grid43 {
-  --slick-border-color: #d4d4d4;
-  // --slick-cell-border-left: 1px solid var(--slick-border-color);
-  --slick-header-menu-display: none;
-  --slick-header-column-height: 20px;
-  --slick-grid-border-color: #d4d4d4;
-  --slick-row-selected-color: #d4ebfd;
-  --slick-cell-active-box-shadow: inset 0 0 0 1px #3ca4ff;
-
-  --slick-row-mouse-hover-box-shadow: 0;
-  --slick-cell-odd-background-color: #fff;
-  --slick-cell-border-right: 1px solid var(--slick-border-color);
-  --slick-cell-border-bottom: 0;
-  --slick-cell-border-top: 1px solid var(--slick-border-color);
-  --slick-header-filter-row-border-bottom: 1px solid var(--slick-border-color);
-  --slick-cell-border-left: 0;
-  --slick-cell-box-shadow: none;
-  --slick-row-mouse-hover-color: #fff;
-  --slick-cell-display: flex;
-
-  .slick-cell.rowspan {
-    // background: white;
-    z-index: 9;
-  }
-  .slick-cell {
-    display: flex;
-    align-items: center;
-    /* justify-content: center; */
-  }
-}