angular-slickgrid 9.0.0 → 9.0.2

package/src/library/slickgrid-config.ts

@@ -1,10 +0,0 @@
-import type { GridOption } from './models/gridOption.interface';
-import { GlobalGridOptions } from './global-grid-options';
-
-export class SlickgridConfig {
-  options: Partial<GridOption>;
-
-  constructor() {
-    this.options = GlobalGridOptions;
-  }
-}

package/src/main.ts

@@ -1,13 +0,0 @@
-import { enableProdMode } from '@angular/core';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-
-import { AppModule } from './demos/app.module';
-import { environment } from './demos/environments/environment';
-
-if (environment.production) {
-  enableProdMode();
-}
-
-platformBrowserDynamic()
-  .bootstrapModule(AppModule, { preserveWhitespaces: true }) // preserveWhitespaces is now default to False since Angular 6
-  .catch((err) => console.log(err));

package/src/public_api.ts

@@ -1 +0,0 @@
-export * from './library/index';

package/src/styles.scss

@@ -1,178 +0,0 @@
-@use 'sass:color';
-
-$primary-color: #0d6efd;
-
-@use 'bootstrap/scss/bootstrap' with (
-  $primary: $primary-color
-);
-
-// -- 1. load with modern `@use`
-// @use '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-bootstrap.scss';
-@use '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-bootstrap.scss' with (
-  $slick-primary-color: $primary-color // $slick-input-focus-box-shadow: 0 0 0 0.25rem rgba($primary-color, 0.25),
-);
-
-// -- 2. load with legacy `@import`
-// $slick-primary-color: red;
-// $slick-link-color: red;
-// @import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-bootstrap.scss';
-
-:root {
-  --ms-choice-border: var(--bs-border-width) solid var(--bs-border-color);
-  //   --slick-button-style-bg-color: #fff;
-  //   --slick-button-border-color: #c7c7c7;
-}
-
-$button-border-color: #ababab;
-$button-style-bg-color: #fff;
-
-.btn-group-xs > .btn,
-.btn-xs {
-  padding: 1px 5px;
-  font-size: 12px;
-  line-height: 1.5;
-  border-radius: 3px;
-  margin: 0;
-  font-size: 12px;
-  height: 22px;
-  vertical-align: middle;
-}
-
-.btn-icon {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-}
-
-.gap-4px {
-  gap: 4px;
-}
-
-.hidden {
-  display: none;
-}
-
-.side-menu {
-  margin-left: 15px;
-
-  .links {
-    background-color: #f9f9f9;
-    border-right: 1px solid #d0d0d0;
-    overflow-y: auto;
-    padding: 10px;
-    li {
-      width: 100%;
-    }
-  }
-}
-
-.italic {
-  font-style: italic;
-}
-.subtitle {
-  font-size: 15px;
-  font-style: italic;
-  color: grey;
-  margin-bottom: 10px;
-}
-.lightblue {
-  color: lightblue;
-}
-.red {
-  color: red;
-}
-.faded {
-  opacity: 0.7;
-}
-.faded:hover {
-  opacity: 1;
-}
-.pointer {
-  cursor: pointer !important;
-}
-.padding10 {
-  padding: 10px !important;
-}
-.text-danger {
-  color: red !important;
-}
-.mdi-pencil.pointer:hover {
-  color: #00bfff;
-}
-.mdi-trash-can.pointer:hover {
-  color: #ff002b;
-}
-
-.github-button-container {
-  position: relative;
-  top: -2px;
-  margin-left: 5px;
-}
-
-.slick-dark-mode {
-  --slick-button-style-bg-color: #212121;
-  --slick-button-border-color: #626262;
-  .text-primary {
-    color: #599bfe !important;
-  }
-}
-.button-style {
-  cursor: pointer;
-  background-color: var(--slick-button-style-bg-color, $button-style-bg-color);
-  border: 1px solid #{var(--slick-button-border-color, $button-border-color)};
-  border-radius: 2px;
-  justify-content: center;
-  text-align: center;
-  &:hover {
-    border-color: color.adjust($button-border-color, $lightness: 10%);
-  }
-}
-
-.panel-wm-content {
-  background-color: #fff;
-  /* the height is 100% minus the 2 navbars */
-  height: calc(100vh - 56px);
-  padding: 0 20px;
-
-  #demo-container {
-    padding-bottom: 15px;
-  }
-  h3 {
-    color: #333;
-  }
-  .subtitle {
-    color: #727272;
-  }
-}
-.panel-wm-content.dark-mode {
-  background-color: #212529;
-  color: #dddddd;
-  h3 {
-    color: #dddddd;
-  }
-  .subtitle {
-    color: #cbcbcb;
-  }
-  .btn-outline-secondary {
-    color: #dfdfdf;
-  }
-}
-
-/* editable field with outline border */
-.slick-cell .editing-field,
-.slick-cell.selected .editing-field {
-  border: 1px solid #dddbda;
-  padding: 3px 5px 3px 4px;
-  margin: -2px;
-  height: calc(100% + 4px);
-  border-radius: 3px;
-  background-color: #ffffff;
-  cursor: pointer;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-
-  &:hover {
-    border: 1px solid #adadad;
-  }
-}

package/test/cypress/e2e/example01.cy.ts

@@ -1,367 +0,0 @@
-describe('Example 1 - Basic Grids', () => {
-  const fullTitles = ['Title', 'Duration (days)', '% Complete', 'Start', 'Finish', 'Effort Driven'];
-
-  it('should display Example title', () => {
-    cy.visit(`${Cypress.config('baseUrl')}/example01`);
-    cy.get('h2').should('contain', 'Example 1: Basic Grids');
-  });
-
-  it('should have 2 grids of size 800 by 225px', () => {
-    cy.get('#slickGridContainer-grid1').should('have.css', 'width', '800px');
-
-    cy.get('#slickGridContainer-grid1 > .slickgrid-container').should(($el) => expect(parseInt(`${$el.height()}`, 10)).to.eq(225));
-
-    cy.get('#slickGridContainer-grid2').should('have.css', 'width', '800px');
-
-    cy.get('#slickGridContainer-grid2 > .slickgrid-container').should(($el) => expect(parseInt(`${$el.height()}`, 10)).to.eq(225));
-  });
-
-  it('should have exact column titles on 1st grid', () => {
-    cy.get('#slickGridContainer-grid1')
-      .find('.slick-header-columns')
-      .children()
-      .each(($child, index) => expect($child.text()).to.eq(fullTitles[index]));
-  });
-
-  it('should hover over the Title column and click on "Sort Descending" command', () => {
-    cy.get('#slickGridContainer-grid1')
-      .find('.slick-header-column')
-      .first()
-      .trigger('mouseover')
-      .children('.slick-header-menu-button')
-      .should('be.hidden')
-      .invoke('show')
-      .click();
-
-    cy.get('.slick-header-menu .slick-menu-command-list')
-      .should('be.visible')
-      .children('.slick-menu-item:nth-of-type(4)')
-      .children('.slick-menu-content')
-      .should('contain', 'Sort Descending')
-      .click();
-
-    cy.get('.slick-row').first().children('.slick-cell').first().should('contain', 'Task 994');
-  });
-
-  it('should hover over the "Title" column of 2nd grid and click on "Sort Ascending" command', () => {
-    const tasks = ['Task 0', 'Task 1', 'Task 10', 'Task 100', 'Task 101'];
-
-    cy.get('#grid2').find('.slick-header-column').first().trigger('mouseover').children('.slick-header-menu-button').invoke('show').click();
-
-    cy.get('.slick-header-menu .slick-menu-command-list')
-      .should('be.visible')
-      .children('.slick-menu-item:nth-of-type(3)')
-      .children('.slick-menu-content')
-      .should('contain', 'Sort Ascending')
-      .click();
-
-    cy.get('#grid2')
-      .find('.slick-row')
-      .each(($row, index) => {
-        if (index > tasks.length - 1) {
-          return;
-        }
-        cy.wrap($row).children('.slick-cell').first().should('contain', tasks[index]);
-      });
-  });
-
-  it('should hover over the "Duration" column of 2nd grid, Sort Ascending and have 2 sorts', () => {
-    cy.get('#grid2')
-      .find('.slick-header-column:nth-of-type(2)')
-      .trigger('mouseover')
-      .children('.slick-header-menu-button')
-      .invoke('show')
-      .click();
-
-    cy.get('#grid2')
-      .find('.slick-header-menu .slick-menu-command-list')
-      .should('be.visible')
-      .children('.slick-menu-item:nth-of-type(4)')
-      .click();
-
-    cy.get('#grid2').find('.slick-sort-indicator-asc').should('have.length', 1).siblings('.slick-sort-indicator-numbered').contains('1');
-
-    cy.get('#grid2').find('.slick-sort-indicator-desc').should('have.length', 1).siblings('.slick-sort-indicator-numbered').contains('2');
-  });
-
-  it('should clear sorting of grid2 using the Grid Menu "Clear all Sorting" command', () => {
-    cy.get('#grid2').find('button.slick-grid-menu-button').trigger('click').click();
-  });
-
-  it('should have no sorting in 2nd grid (back to default sorted by id)', () => {
-    let gridUid = '';
-    const grid2Tasks = ['Task 0', 'Task 1', 'Task 2', 'Task 3', 'Task 4'];
-
-    cy.get('#grid2')
-      .should(($grid) => {
-        const classes = $grid.prop('className').split(' ');
-        gridUid = classes.find((className: string) => /slickgrid_.*/.test(className));
-        expect(gridUid).to.not.be.null;
-      })
-      .then(() => {
-        cy.get(`.slick-grid-menu.${gridUid}`).find('.slick-menu-item').first().find('span').contains('Clear all Sorting').click();
-
-        cy.get('#grid2').find('.slick-sort-indicator-asc').should('have.length', 0);
-
-        cy.get('#grid2').find('.slick-sort-indicator-desc').should('have.length', 0);
-
-        cy.get('#grid2')
-          .find('.slick-row')
-          .each(($row, index) => {
-            if (index > grid2Tasks.length - 1) {
-              return;
-            }
-            cy.wrap($row).children('.slick-cell').first().should('contain', grid2Tasks[index]);
-          });
-      });
-  });
-
-  it('should retain sorting in 1st grid', () => {
-    cy.get('#grid1').find('.slick-sort-indicator-desc').should('have.length', 1);
-  });
-
-  it('should have Pagination displayed and set on Grid2', () => {
-    cy.get('[data-test=page-number-input]')
-      .invoke('val')
-      .then((pageNumber) => expect(pageNumber).to.eq('1'));
-
-    cy.get('[data-test=page-count]').contains('199');
-
-    cy.get('[data-test=item-from]').contains('1');
-
-    cy.get('[data-test=item-to]').contains('5');
-
-    cy.get('[data-test=total-items]').contains('995');
-  });
-
-  it('should change Page Number 52 and expect the Pagination to have correct values', () => {
-    cy.get('[data-test=page-number-input]').clear().type('52').type('{enter}');
-
-    cy.get('[data-test=page-count]').contains('199');
-
-    cy.get('[data-test=item-from]').contains('256');
-
-    cy.get('[data-test=item-to]').contains('260');
-
-    cy.get('[data-test=total-items]').contains('995');
-  });
-
-  it('should open the Grid Menu on 1st Grid and expect all Columns to be checked', () => {
-    let gridUid = '';
-    cy.get('#grid1').find('button.slick-grid-menu-button').click({ force: true });
-
-    cy.get('#grid1')
-      .should(($grid) => {
-        const classes = $grid.prop('className').split(' ');
-        gridUid = classes.find((className: string) => /slickgrid_.*/.test(className));
-        expect(gridUid).to.not.be.null;
-      })
-      .then(() => {
-        cy.get(`.slick-grid-menu.${gridUid}`)
-          .find('.slick-column-picker-list')
-          .children('li')
-          .each(($child, index) => {
-            if (index <= 5) {
-              const $input = $child.find('input');
-              const $label = $child.find('span.checkbox-label');
-              expect($input.prop('checked')).to.eq(true);
-              expect($label.text()).to.eq(fullTitles[index]);
-            }
-          });
-      });
-  });
-
-  it('should then hide "Title" column from same 1st Grid and expect the column to be removed from 1st Grid', () => {
-    const newColumnList = ['Duration (days)', '% Complete', 'Start', 'Finish', 'Effort Driven'];
-    cy.get('#grid1')
-      .get('.slick-grid-menu:visible')
-      .find('.slick-column-picker-list')
-      .children('li:visible:nth(0)')
-      .children('label')
-      .should('contain', 'Title')
-      .click({ force: true });
-
-    cy.get('#grid1').get('.slick-grid-menu:visible').find('.close').click({ force: true });
-
-    cy.get('#grid1')
-      .find('.slick-header-columns')
-      .children()
-      .each(($child, index) => expect($child.text()).to.eq(newColumnList[index]));
-  });
-
-  it('should open the Grid Menu off 2nd Grid and expect all Columns to still be all checked', () => {
-    let gridUid = '';
-    cy.get('#grid2').find('button.slick-grid-menu-button').click({ force: true });
-
-    cy.get('#grid2')
-      .should(($grid) => {
-        const classes = $grid.prop('className').split(' ');
-        gridUid = classes.find((className: string) => /slickgrid_.*/.test(className));
-        expect(gridUid).to.not.be.null;
-      })
-      .then(() => {
-        cy.get(`.slick-grid-menu.${gridUid}`)
-          .find('.slick-column-picker-list')
-          .children('li')
-          .each(($child, index) => {
-            if (index <= 5) {
-              const $input = $child.find('input');
-              const $label = $child.find('span.checkbox-label');
-              expect($input.prop('checked')).to.eq(true);
-              expect($label.text()).to.eq(fullTitles[index]);
-            }
-          });
-      });
-  });
-
-  it('should then hide "% Complete" column from this same 2nd Grid and expect the column to be removed from 2nd Grid', () => {
-    const newColumnList = ['Title', 'Duration (days)', 'Start', 'Finish', 'Effort Driven'];
-    cy.get('#grid2')
-      .get('.slick-grid-menu:visible')
-      .find('.slick-column-picker-list')
-      .children('li:visible:nth(2)')
-      .children('label')
-      .should('contain', '% Complete')
-      .click({ force: true });
-
-    cy.get('#grid2').get('.slick-grid-menu:visible').find('.close').click({ force: true });
-
-    cy.get('#grid2')
-      .find('.slick-header-columns')
-      .children()
-      .each(($child, index) => expect($child.text()).to.eq(newColumnList[index]));
-  });
-
-  it('should go back to 1st Grid and open its Grid Menu and we expect this grid to stil have the "Title" column be hidden (unchecked)', () => {
-    cy.get('#grid1').find('button.slick-grid-menu-button').click({ force: true });
-
-    cy.get('.slick-column-picker-list')
-      .children('li')
-      .each(($child, index) => {
-        if (index <= 5) {
-          const $input = $child.find('input');
-          const $label = $child.find('span.checkbox-label');
-          if ($label.text() === 'Title') {
-            expect($input.attr('checked')).to.eq(undefined);
-          } else {
-            expect($input.prop('checked')).to.eq(true);
-          }
-          expect($label.text()).to.eq(fullTitles[index]);
-        }
-      });
-  });
-
-  it('should hide "Start" column from 1st Grid and expect to have 2 hidden columns (Title, Start)', () => {
-    const newColumnList = ['Duration (days)', '% Complete', 'Finish', 'Effort Driven'];
-    cy.get('#grid1')
-      .get('.slick-grid-menu:visible')
-      .find('.slick-column-picker-list')
-      .children('li:visible:nth(3)')
-      .children('label')
-      .should('contain', 'Start')
-      .click({ force: true });
-
-    cy.get('#grid1').get('.slick-grid-menu:visible').find('.close').click({ force: true });
-
-    cy.get('#grid1')
-      .find('.slick-header-columns')
-      .children()
-      .each(($child, index) => expect($child.text()).to.eq(newColumnList[index]));
-  });
-
-  it('should open Column Picker of 2nd Grid and show the "% Complete" column back to visible', () => {
-    cy.get('#grid2').find('.slick-header-column').first().trigger('mouseover').trigger('contextmenu').invoke('show');
-
-    cy.get('.slick-column-picker')
-      .find('.slick-column-picker-list')
-      .children()
-      .each(($child, index) => {
-        if (index <= 5) {
-          expect($child.text()).to.eq(fullTitles[index]);
-        }
-      });
-
-    cy.get('.slick-column-picker')
-      .find('.slick-column-picker-list')
-      .children('li:nth-of-type(3)')
-      .children('label')
-      .should('contain', '% Complete')
-      .click();
-
-    cy.get('#grid2')
-      .find('.slick-header-columns')
-      .children()
-      .each(($child, index) => {
-        if (index <= 5) {
-          expect($child.text()).to.eq(fullTitles[index]);
-        }
-      });
-
-    cy.get('#grid2').get('.slick-column-picker:visible').find('.close').trigger('click').click();
-  });
-
-  it('should open the Grid Menu on 2nd Grid and expect all Columns to be checked', () => {
-    let gridUid = '';
-    cy.get('#grid2').find('button.slick-grid-menu-button').click({ force: true });
-
-    cy.get('#grid2')
-      .should(($grid) => {
-        const classes = $grid.prop('className').split(' ');
-        gridUid = classes.find((className: string) => /slickgrid_.*/.test(className));
-        expect(gridUid).to.not.be.null;
-      })
-      .then(() => {
-        cy.get(`.slick-grid-menu.${gridUid}`)
-          .find('.slick-column-picker-list')
-          .children('li')
-          .each(($child, index) => {
-            if (index <= 5) {
-              const $input = $child.find('input');
-              const $label = $child.find('span.checkbox-label');
-              expect($input.prop('checked')).to.eq(true);
-              expect($label.text()).to.eq(fullTitles[index]);
-            }
-          });
-      });
-  });
-
-  it('should still expect 1st Grid to be unchanged from previous state and still have only 4 columns shown', () => {
-    const newColumnList = ['Duration (days)', '% Complete', 'Finish', 'Effort Driven'];
-
-    cy.get('#grid1')
-      .find('.slick-header-columns')
-      .children()
-      .each(($child, index) => expect($child.text()).to.eq(newColumnList[index]));
-  });
-
-  it('should open the Grid Menu on 1st Grid and also expect to only have 4 columns checked (visible)', () => {
-    let gridUid = '';
-    cy.get('#grid1').find('button.slick-grid-menu-button').click({ force: true });
-
-    cy.get('#grid1')
-      .should(($grid) => {
-        const classes = $grid.prop('className').split(' ');
-        gridUid = classes.find((className: string) => /slickgrid_.*/.test(className));
-        expect(gridUid).to.not.be.null;
-      })
-      .then(() => {
-        cy.get(`.slick-grid-menu.${gridUid}`)
-          .find('.slick-column-picker-list')
-          .children('li')
-          .each(($child, index) => {
-            if (index <= 5) {
-              const $input = $child.find('input');
-              const $label = $child.find('span.checkbox-label');
-              if ($label.text() === 'Title' || $label.text() === 'Start') {
-                expect($input.attr('checked')).to.eq(undefined);
-              } else {
-                expect($input.prop('checked')).to.eq(true);
-              }
-              expect($label.text()).to.eq(fullTitles[index]);
-            }
-          });
-      });
-
-    cy.get('#grid1').get('.slick-grid-menu:visible').find('.close').click({ force: true });
-  });
-});

package/test/cypress/e2e/example02.cy.ts

@@ -1,60 +0,0 @@
-import { removeExtraSpaces } from '../plugins/utilities';
-
-describe('Example 2 - Grid with Formatters', () => {
-  const GRID_ROW_HEIGHT = 35;
-
-  it('should display Example title', () => {
-    cy.visit(`${Cypress.config('baseUrl')}/example02`);
-    cy.get('h2').should('contain', 'Example 2: Grid with Formatters');
-  });
-
-  it('should show a custom text in the grid footer left portion', () => {
-    cy.get('#slickGridContainer-grid2').find('.slick-custom-footer').find('.left-footer').contains('custom footer text');
-  });
-
-  it('should have some metrics shown in the grid footer', () => {
-    cy.get('#slickGridContainer-grid2')
-      .find('.slick-custom-footer')
-      .find('.right-footer')
-      .should(($span) => {
-        const text = removeExtraSpaces($span.text()); // remove all white spaces
-        expect(text).to.eq('500 items');
-      });
-  });
-
-  it('should expect "Effort Driven" 1st cell to include fire icon', () => {
-    cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 0}px);"] > .slick-cell:nth(7)`)
-      .find('.mdi.mdi-fire.red')
-      .should('have.length', 1);
-  });
-
-  it('should expect "Effort Driven" 2nd cell to include a snowflake icon', () => {
-    cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 1}px);"] > .slick-cell:nth(7)`)
-      .find('.mdi.mdi-snowflake')
-      .should('have.length', 1);
-  });
-
-  it('should click on a "Completed" cell and expect it to toggle to checked', () => {
-    cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 0}px);"] > .slick-cell:nth(8)`)
-      .find('.mdi.mdi-circle')
-      .should('have.length', 1);
-    cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 0}px);"] > .slick-cell:nth(8)`).click();
-    cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 0}px);"] > .slick-cell:nth(8)`)
-      .find('.mdi.mdi-circle')
-      .should('have.length', 0);
-    cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 0}px);"] > .slick-cell:nth(8)`)
-      .find('.mdi.mdi-check-circle')
-      .should('have.length', 1);
-
-    cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 1}px);"] > .slick-cell:nth(8)`)
-      .find('.mdi.mdi-circle')
-      .should('have.length', 1);
-    cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 1}px);"] > .slick-cell:nth(8)`).click();
-    cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 1}px);"] > .slick-cell:nth(8)`)
-      .find('.mdi.mdi-circle')
-      .should('have.length', 0);
-    cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 1}px);"] > .slick-cell:nth(8)`)
-      .find('.mdi.mdi-check-circle')
-      .should('have.length', 1);
-  });
-});