@tipolox/litgrid-angular 1.0.3 → 1.1.0

package/README.md

@@ -43,6 +43,7 @@ Import `UsersGridComponent` into your application's standalone component and ren
 
 - [Live demo](https://tipolox.com/litgrid/demo)
 - [Repository](https://github.com/tipolox/litgrid)
+- [v1.1.0 upgrade guide](https://github.com/tipolox/litgrid/blob/main/docs/installation.md#upgrading-to-v110)
 - [Angular guide](https://github.com/tipolox/litgrid/blob/main/docs/angular-guide.md)
 - [API reference](https://github.com/tipolox/litgrid/blob/main/docs/api-reference.md)
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tipolox/litgrid-angular",
-  "version": "1.0.3",
+  "version": "1.1.0",
   "description": "Angular wrapper for LitGrid",
   "sideEffects": true,
   "peerDependencies": {
@@ -8,7 +8,7 @@
     "@angular/core": ">=17.0.0"
   },
   "dependencies": {
-    "@tipolox/litgrid-web": "^1.0.3",
+    "@tipolox/litgrid-web": "^1.1.0",
     "tslib": "^2.8.1"
   },
   "keywords": [

package/types/tipolox-litgrid-angular.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tipolox-litgrid-angular.d.ts","sources":["../../../packages/grid-angular/src/DataGridComponent.ts"],"mappings":";;;;;AA8BA,cAkBa,iBAAkB,YAAW,aAAa,EAAE,SAAS;;aAE9C,UAAU;YACX,UAAU;WACX,SAAS;AAChB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;gCAG2B,YAAA,CAAA,uBAAA;4BACJ,YAAA,CAAA,mBAAA;qCACS,YAAA,CAAA,4BAAA;;AAIzC,uBAAmB,eAAe;AAIlC;AAIA,0BAAsB,aAAa;AAInC,mCAA+B,KAAK;AAIpC,+BAA2B,KAAK;AAIhC,wCAAoC,KAAK;AAMzC;AAIA,2BAAuB,UAAU;;AAQjC;AAIA;;AAQA;AAIA;;;AAYA;AAIA;;AAQA;;AAQA;AAIA,sBAAkB,eAAe;AAIjC,0BAAsB,eAAe;AAIrC;AAIA;yBAIqB,kBAAkB;AAIvC,yBAAqB,OAAO;AAI5B,wBAAoB,OAAO;AAI3B;AAIA;AAIA;AAIA,sBAAkB,UAAU;AAI5B;kBAIc,UAAU;AAIxB;AAIA;AAIA,qBAAiB,mBAAmB;AAIpC;yCAIqC,eAAe;AAIpD;AAIA;AAIA,oBAAgB,aAAa;AAI7B;;AAQA;AAOA;yCApNW,iBAAiB;2CAAjB,iBAAiB;AA2N7B;;;;","names":[]}
+{"version":3,"file":"tipolox-litgrid-angular.d.ts","sources":["../../../packages/grid-angular/src/DataGridComponent.ts"],"mappings":";;;;;AA8BA,cAkBa,iBAAkB,YAAW,aAAa,EAAE,SAAS;;aAE9C,UAAU;YACX,UAAU;WACX,SAAS;AAChB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;gCAG2B,YAAA,CAAA,uBAAA;4BACJ,YAAA,CAAA,mBAAA;qCACS,YAAA,CAAA,4BAAA;;AAIzC,uBAAmB,eAAe;AAIlC;AAIA,0BAAsB,aAAa;AAInC,mCAA+B,KAAK;AAIpC,+BAA2B,KAAK;AAIhC,wCAAoC,KAAK;AAMzC;AAIA,2BAAuB,UAAU;;AAQjC;AAIA;;AAQA;AAIA;;;AAYA;AAIA;;AAQA;;AAQA;AAIA,sBAAkB,eAAe;AAIjC,0BAAsB,eAAe;AAIrC;AAIA;yBAIqB,kBAAkB;AAIvC,yBAAqB,OAAO;AAI5B,wBAAoB,OAAO;AAI3B;AAIA;AAIA;AAIA,sBAAkB,UAAU;AAI5B;kBAIc,UAAU;AAIxB;AAIA;AAIA,qBAAiB,mBAAmB;AAIpC;yCAIqC,eAAe;AAIpD;AAIA;AAIA,oBAAgB,aAAa;AAI7B;;AAQA;AAOA;yCApNW,iBAAiB;2CAAjB,iBAAiB;AA2N7B;;;;","names":[],"sourcesContent":["import '@tipolox/litgrid-web'\nimport {\n  AfterViewInit,\n  Component,\n  CUSTOM_ELEMENTS_SCHEMA,\n  ElementRef,\n  EventEmitter,\n  Input,\n  OnChanges,\n  Output,\n  SimpleChanges,\n  ViewChild\n} from '@angular/core'\nimport type {\n  BestFitColumnWidth,\n  ColumnReorderDetail,\n  ColumnStateChangeDetail,\n  ColumnVisibilityChangeDetail,\n  DataGridElement,\n  GridColumn,\n  GridColumnState,\n  GridConfig,\n  GridFilter,\n  GridPaginationState,\n  GridSelection,\n  GridTheme,\n  SelectionIntent\n} from '@tipolox/litgrid-web'\nimport { syncGridInputs } from './gridBindings'\n\n@Component({\n  selector: 'litgrid-data-grid',\n  standalone: true,\n  template: `\n    <yc-grid\n      #grid\n      (column-state-change)=\"handleColumnStateChange($event)\"\n      (column-reorder)=\"handleColumnReorder($event)\"\n      (column-visibility-change)=\"handleColumnVisibilityChange($event)\"\n    ></yc-grid>\n  `,\n  styles: `\n    :host {\n      display: block;\n    }\n  `,\n  schemas: [CUSTOM_ELEMENTS_SCHEMA]\n})\nexport class DataGridComponent implements AfterViewInit, OnChanges {\n  @Input() data: unknown[] = []\n  @Input() columns: GridColumn[] = []\n  @Input() config: GridConfig = {}\n  @Input() theme: GridTheme = 'light'\n  @Input() ariaLabel = 'Data grid'\n  @Input() ariaDescription = ''\n  @Input() screenReaderAnnouncements = true\n  @Input() height = 320\n  @Input() rowHeight = 36\n  @Input() overscan = 4\n  @Input() columnOverscan = 2\n  @Input() bestFitSampleSize = 10\n  @Input() quickSearchDebounceThreshold = 10_000\n  @Input() quickSearchDebounceMs = 150\n  @Input() columnStateStorageKey?: string\n\n  @Output() readonly columnStateChange = new EventEmitter<ColumnStateChangeDetail>()\n  @Output() readonly columnReorder = new EventEmitter<ColumnReorderDetail>()\n  @Output() readonly columnVisibilityChange = new EventEmitter<ColumnVisibilityChangeDetail>()\n\n  @ViewChild('grid', { static: true }) private gridRef?: ElementRef<DataGridElement>\n\n  get gridElement(): DataGridElement | null {\n    return this.gridRef?.nativeElement ?? null\n  }\n\n  ngAfterViewInit(): void {\n    this.syncInputs()\n  }\n\n  ngOnChanges(_changes: SimpleChanges): void {\n    this.syncInputs()\n  }\n\n  handleColumnStateChange(event: Event): void {\n    this.columnStateChange.emit((event as CustomEvent<ColumnStateChangeDetail>).detail)\n  }\n\n  handleColumnReorder(event: Event): void {\n    this.columnReorder.emit((event as CustomEvent<ColumnReorderDetail>).detail)\n  }\n\n  handleColumnVisibilityChange(event: Event): void {\n    this.columnVisibilityChange.emit(\n      (event as CustomEvent<ColumnVisibilityChangeDetail>).detail\n    )\n  }\n\n  getRowHeight(rowIndex: number): number {\n    return this.requireGridElement().getRowHeight(rowIndex)\n  }\n\n  getColumnWidth(column: GridColumn): number {\n    return this.requireGridElement().getColumnWidth(column)\n  }\n\n  setRowHeight(rowIndex: number, height: number): void {\n    this.requireGridElement().setRowHeight(rowIndex, height)\n  }\n\n  resetRowHeight(rowIndex: number): void {\n    this.requireGridElement().resetRowHeight(rowIndex)\n  }\n\n  resetAllRowHeights(): void {\n    this.requireGridElement().resetAllRowHeights()\n  }\n\n  setColumnWidth(columnKey: string, width: number): void {\n    this.requireGridElement().setColumnWidth(columnKey, width)\n  }\n\n  resetColumnWidth(columnKey: string): void {\n    this.requireGridElement().resetColumnWidth(columnKey)\n  }\n\n  resetAllColumnWidths(): void {\n    this.requireGridElement().resetAllColumnWidths()\n  }\n\n  moveColumn(columnKey: string, targetIndex: number): void {\n    this.requireGridElement().moveColumn(columnKey, targetIndex)\n  }\n\n  getColumnOrder(): string[] {\n    return this.requireGridElement().getColumnOrder()\n  }\n\n  setColumnOrder(columnKeys: string[]): void {\n    this.requireGridElement().setColumnOrder(columnKeys)\n  }\n\n  resetColumnOrder(): void {\n    this.requireGridElement().resetColumnOrder()\n  }\n\n  setColumnVisible(columnKey: string, visible: boolean): void {\n    this.requireGridElement().setColumnVisible(columnKey, visible)\n  }\n\n  isColumnVisible(columnKey: string): boolean {\n    return this.requireGridElement().isColumnVisible(columnKey)\n  }\n\n  getVisibleColumnKeys(): string[] {\n    return this.requireGridElement().getVisibleColumnKeys()\n  }\n\n  resetColumnVisibility(): void {\n    this.requireGridElement().resetColumnVisibility()\n  }\n\n  getColumnState(): GridColumnState {\n    return this.requireGridElement().getColumnState()\n  }\n\n  setColumnState(state: GridColumnState): void {\n    this.requireGridElement().setColumnState(state)\n  }\n\n  resetColumnState(): void {\n    this.requireGridElement().resetColumnState()\n  }\n\n  bestFitColumn(columnKey: string): number | null {\n    return this.requireGridElement().bestFitColumn(columnKey)\n  }\n\n  bestFitAllColumns(): BestFitColumnWidth[] {\n    return this.requireGridElement().bestFitAllColumns()\n  }\n\n  copySelectedCells(): Promise<boolean> {\n    return this.requireGridElement().copySelectedCells()\n  }\n\n  copySelectedRows(): Promise<boolean> {\n    return this.requireGridElement().copySelectedRows()\n  }\n\n  setQuickSearch(query: string): void {\n    this.requireGridElement().setQuickSearch(query)\n  }\n\n  clearQuickSearch(): void {\n    this.requireGridElement().clearQuickSearch()\n  }\n\n  getQuickSearch(): string {\n    return this.requireGridElement().getQuickSearch()\n  }\n\n  setFilter(filter: GridFilter): void {\n    this.requireGridElement().setFilter(filter)\n  }\n\n  clearFilter(columnKey?: string): void {\n    this.requireGridElement().clearFilter(columnKey)\n  }\n\n  getFilters(): GridFilter[] {\n    return this.requireGridElement().getFilters()\n  }\n\n  setPage(pageIndex: number): void {\n    this.requireGridElement().setPage(pageIndex)\n  }\n\n  setPageSize(pageSize: number): void {\n    this.requireGridElement().setPageSize(pageSize)\n  }\n\n  getPagination(): GridPaginationState {\n    return this.requireGridElement().getPagination()\n  }\n\n  getTotalRowCount(): number {\n    return this.requireGridElement().getTotalRowCount()\n  }\n\n  selectRow(rowIndex: number, intent?: SelectionIntent): void {\n    this.requireGridElement().selectRow(rowIndex, intent)\n  }\n\n  selectAllRows(): void {\n    this.requireGridElement().selectAllRows()\n  }\n\n  clearSelection(): void {\n    this.requireGridElement().clearSelection()\n  }\n\n  getSelection(): GridSelection {\n    return this.requireGridElement().getSelection()\n  }\n\n  isRowSelected(rowIndex: number): boolean {\n    return this.requireGridElement().isRowSelected(rowIndex)\n  }\n\n  isCellSelected(rowIndex: number, columnKey: string): boolean {\n    return this.requireGridElement().isCellSelected(rowIndex, columnKey)\n  }\n\n  private syncInputs(): void {\n    const grid = this.gridElement\n    if (!grid) return\n\n    syncGridInputs(grid, this)\n  }\n\n  private requireGridElement(): DataGridElement {\n    const grid = this.gridElement\n    if (!grid) {\n      throw new Error('LitGrid is not available before the Angular view is initialized.')\n    }\n    return grid\n  }\n}\n"]}