mat-table-ext 0.0.6 → 0.0.9

package/projects/mat-table-ext/src/lib/mat-table-ext.module.ts

@@ -0,0 +1,127 @@
+import { NgModule } from '@angular/core';
+import { HttpClientModule } from '@angular/common/http';
+import { MatTableModule } from '@angular/material/table'
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatNativeDateModule } from '@angular/material/core';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatTableExtComponent } from '../lib/mat-table-ext.component';
+import { ResizeColumnDirective } from '../lib/directives/resize-column.directive';
+import { ColumnPinningComponent } from '../lib/components/column-pinning/column-pinning.component';
+import { EditingComponent } from '../lib/components/editing/editing.component';
+import { FilterColumnsComponentComponent } from '../lib/components/filter-columns-component/filter-columns-component.component';
+import { CommonModule } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { A11yModule } from '@angular/cdk/a11y';
+import { CdkAccordionModule } from '@angular/cdk/accordion';
+import { ClipboardModule } from '@angular/cdk/clipboard';
+import { DragDropModule } from '@angular/cdk/drag-drop';
+import { PortalModule } from '@angular/cdk/portal';
+import { ScrollingModule } from '@angular/cdk/scrolling';
+import { CdkStepperModule } from '@angular/cdk/stepper';
+import { CdkTableModule } from '@angular/cdk/table';
+import { CdkTreeModule } from '@angular/cdk/tree';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatBadgeModule } from '@angular/material/badge';
+import { MatBottomSheetModule } from '@angular/material/bottom-sheet';
+import { MatButtonModule } from '@angular/material/button';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
+import { MatCardModule } from '@angular/material/card';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatStepperModule } from '@angular/material/stepper';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { MatGridListModule } from '@angular/material/grid-list';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatListModule } from '@angular/material/list';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatRippleModule } from '@angular/material/core';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatRadioModule } from '@angular/material/radio';
+import { MatSelectModule } from '@angular/material/select';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatSliderModule } from '@angular/material/slider';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { MatSortModule } from '@angular/material/sort';
+import { MatTabsModule } from '@angular/material/tabs';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatTreeModule } from '@angular/material/tree';
+
+
+@NgModule({
+  declarations: [
+    MatTableExtComponent,
+    ResizeColumnDirective,
+    ColumnPinningComponent,
+    EditingComponent,
+    FilterColumnsComponentComponent,
+  ],
+  imports: [
+    CommonModule,
+    TranslateModule.forChild(),
+    MatTableModule,
+    FormsModule,
+    ReactiveFormsModule,
+    MatNativeDateModule,
+    A11yModule,
+    CdkAccordionModule,
+    ClipboardModule,
+    CdkStepperModule,
+    CdkTableModule,
+    CdkTreeModule,
+    DragDropModule,
+    MatAutocompleteModule,
+    MatBadgeModule,
+    MatBottomSheetModule,
+    MatButtonModule,
+    MatButtonToggleModule,
+    MatCardModule,
+    MatCheckboxModule,
+    MatChipsModule,
+    MatStepperModule,
+    MatDatepickerModule,
+    MatDialogModule,
+    MatDividerModule,
+    MatExpansionModule,
+    MatGridListModule,
+    MatIconModule,
+    MatInputModule,
+    MatListModule,
+    MatMenuModule,
+    MatNativeDateModule,
+    MatPaginatorModule,
+    MatProgressBarModule,
+    MatProgressSpinnerModule,
+    MatRadioModule,
+    MatRippleModule,
+    MatSelectModule,
+    MatSidenavModule,
+    MatSliderModule,
+    MatSlideToggleModule,
+    MatSnackBarModule,
+    MatSortModule,
+    MatTabsModule,
+    MatToolbarModule,
+    MatTooltipModule,
+    MatTreeModule,
+    PortalModule,
+    ScrollingModule,
+    MatFormFieldModule
+  ],
+  exports: [
+    MatTableExtComponent,
+    ResizeColumnDirective,
+    ColumnPinningComponent,
+    EditingComponent,
+    FilterColumnsComponentComponent,
+  ],
+})
+export class MatTableExtModule { }

package/projects/mat-table-ext/src/lib/mat-table-ext.scss

@@ -0,0 +1,181 @@
+table {
+  min-width: 100%;
+}
+
+.mat-table-sticky-border-elem-right {
+  border-left: 1px solid #e0e0e0;
+}
+
+.mat-table-sticky-border-elem-left {
+  border-right: 1px solid #e0e0e0;
+}
+
+tr.example-detail-row {
+  display: table-row !important;
+}
+
+.example-element-detail {
+  overflow: hidden;
+  display: flex;
+}
+
+.hidden {
+  display: none;
+}
+
+.stripedRows {
+  background: #eaeaea !important;
+}
+
+.hoverClass:hover {
+  background: #dbdbdb !important;
+}
+
+.filters-container {
+  overflow: hidden;
+  max-height: 0px;
+  transition: max-height 0.5s ease-in-out;
+}
+
+.animate {
+  max-height: 50px !important;
+}
+
+.resize-handle {
+  display: inline-block;
+  border-right: 2px solid rgb(140, 140, 140);
+  position: absolute;
+  top: 0;
+  right: 0;
+  height: 100%;
+  cursor: col-resize;
+  opacity: 0;
+}
+
+.resize-handle:hover {
+  width: 20px;
+}
+
+table th:hover .resize-handle {
+  opacity: 1;
+  transition: 0.3s ease-in-out;
+}
+
+.mat-table.resizing {
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  cursor: col-resize;
+}
+
+.mat-table .mat-header-cell {
+  position: relative;
+}
+
+.mat-table .mat-header-cell:not(:last-child) .resize-holder {
+  cursor: col-resize;
+  width: 20px;
+  height: 100%;
+  position: absolute;
+  right: -10px;
+  top: 0;
+  z-index: 1;
+}
+
+.toolbar-container {
+  display: flex;
+  padding: 0 15px;
+  gap: 1rem;
+  grid-auto-rows: 10px;
+  justify-content: flex-end;
+  align-items: center;
+}
+
+.mat-table-ext-container {
+  width: 100%;
+  max-width: 100%;
+  overflow: auto;
+}
+
+.column-headers {
+  font-family: Roboto, "Helvetica Neue", sans-serif;
+}
+
+.example-spacer {
+  flex: 1 1 auto;
+}
+
+.export-button .mat-button-wrapper {
+  display: flex !important;
+  width: 8em;
+  justify-content: space-around;
+  align-items: center;
+}
+
+.toolbar-menu-container {
+  display: flex;
+  flex-direction: column;
+  margin: auto 0.8em;
+  width: 15em;
+  height: 20em;
+}
+
+.toolbar-menu-item {
+  display: flex;
+  height: 3em;
+}
+
+.toolbar-menu-checkbox {
+  margin-left: 8%;
+}
+
+.toolbar-menu-checkbox.mat-checkbox {
+  width: max-content;
+  display: flex;
+  align-items: center;
+}
+
+.hide-button .mat-button-wrapper,
+.pin-button .mat-button-wrapper {
+  display: flex !important;
+  width: 5em;
+  justify-content: space-around;
+  align-items: center;
+}
+
+.hide-button,
+.pin-button,
+.export-button {
+  height: 3em;
+  border: 2px solid currentColor !important;
+}
+
+.showHide-menu-columns-list {
+  height: 10em;
+  max-height: 10em;
+  overflow-y: auto;
+}
+
+.mat-column-select {
+  width: 50px !important;
+}
+
+.data-row td {
+  border-bottom-width: 0 !important;
+}
+
+.example-expanded-row td {
+  border-bottom-width: 0 !important;
+}
+
+.action-column-cells {
+  width: 40px;
+  height: inherit;
+}
+
+.inline-editing-controls {
+  display: flex;
+}
+.global-search-field{
+  width: -webkit-fill-available;
+}

package/projects/mat-table-ext/src/lib/mat-table-ext.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { MatTableExtService } from './mat-table-ext.service';
+
+describe('MatTableExtService', () => {
+  let service: MatTableExtService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(MatTableExtService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

package/projects/mat-table-ext/src/lib/mat-table-ext.service.ts

@@ -0,0 +1,12 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class MatTableExtService {
+  public selectedRow = new BehaviorSubject<any>(null);
+  public selectedRowIndex = new BehaviorSubject<any>(null);
+  constructor(public http: HttpClient) { }
+}

package/projects/mat-table-ext/src/lib/models/tableExtModels.ts

@@ -0,0 +1,85 @@
+import { TemplateRef } from '@angular/core';
+import { Observable } from 'rxjs';
+/** Column definition of mat-table-ext. */
+export interface MTExColumn {
+  field: string;
+  options?: string[];
+  header?: string;
+  name?: string;
+  footerText?: string;
+  headerTooltip?: TooltipProp;
+  cellTooltip?: TooltipProp;
+  pinned?: 'left' | 'right';
+  width?: string;
+  disabled?: boolean;
+  minWidth?: string;
+  maxWidth?: string;
+  hide?: boolean;
+  type: MTExColumnType;
+  cellTemplate?: TemplateRef<any> | null;
+  headerTemplate?: TemplateRef<any> | null;
+}
+
+export interface DisplayColumn {
+  filter: boolean;
+  name: string;
+  show: boolean;
+}
+export interface RowChange {
+  row: { [key: string]: any };
+  index: number;
+}
+export interface RowSelectionChange {
+  row: { [key: string]: any };
+  index: number;
+  isSelected: boolean;
+}
+export interface ExpansionChange {
+  data: { [key: string]: any };
+  index: number;
+  expanded: boolean;
+}
+export interface CellTemplateRefMap {
+  [key: string]: TemplateRef<any>;
+}
+/** Possible column type values. */
+export declare type MTExColumnType =
+  | 'selection'
+  | string
+  | boolean
+  | number
+  | 'date';
+export interface TooltipProp {
+  value: string;
+  tooltipPosition?: TooltipPosition;
+}
+export declare type TooltipPosition =
+  | 'left'
+  | 'right'
+  | 'above'
+  | 'below'
+  | 'before'
+  | 'after';
+
+/** Cell template. */
+export interface MTExCellTemplate {
+  [key: string]: TemplateRef<any>;
+}
+export interface FilterSearchValue {
+  [key: string]: any;
+}
+export interface MTExRow {
+  [key: string]: any;
+}
+export interface ColumnVisibility {
+  [key: string]: any;
+}
+
+export interface MTExColumnPinOption {
+  label: string | Observable<string>;
+  value: MTExColumnPinValue;
+  selected: boolean;
+  field: string;
+}
+
+export declare type MTExColumnPinValue = 'left' | 'right' | null;

package/{public-api.d.ts → projects/mat-table-ext/src/public-api.ts}

@@ -1,7 +1,11 @@
+/*
+ * Public API Surface of mat-table-ext
+ */
+
 export * from './lib/mat-table-ext.module';
 export * from './lib/mat-table-ext.service';
 export * from './lib/mat-table-ext.component';
 export * from './lib/components/column-pinning/column-pinning.component';
 export * from './lib/components/editing/editing.component';
 export * from './lib/components/filter-columns-component/filter-columns-component.component';
-export * from './lib/directives/resize-column.directive';
+export * from './lib/directives/resize-column.directive';

package/projects/mat-table-ext/src/test.ts

@@ -0,0 +1,27 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js';
+import 'zone.js/testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: {
+  context(path: string, deep?: boolean, filter?: RegExp): {
+    <T>(id: string): T;
+    keys(): string[];
+  };
+};
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting(),
+);
+
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);

package/projects/mat-table-ext/tsconfig.lib.json

@@ -0,0 +1,15 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": []
+  },
+  "exclude": [
+    "src/test.ts",
+    "**/*.spec.ts"
+  ]
+}

package/projects/mat-table-ext/tsconfig.lib.prod.json

@@ -0,0 +1,10 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "partial"
+  }
+}

package/projects/mat-table-ext/tsconfig.spec.json

@@ -0,0 +1,17 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine"
+    ]
+  },
+  "files": [
+    "src/test.ts"
+  ],
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}

package/projects/mat-table-ext-example/.browserslistrc

@@ -0,0 +1,16 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# For the full list of supported browsers by the Angular framework, please see:
+# https://angular.io/guide/browser-support
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+last 1 Chrome version
+last 1 Firefox version
+last 2 Edge major versions
+last 2 Safari major versions
+last 2 iOS major versions
+Firefox ESR

package/projects/mat-table-ext-example/karma.conf.js

@@ -0,0 +1,44 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      jasmine: {
+        // you can add configuration options for Jasmine here
+        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
+        // for example, you can disable the random execution with `random: false`
+        // or set a specific seed with `seed: 4321`
+      },
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    jasmineHtmlReporter: {
+      suppressAll: true // removes the duplicated traces
+    },
+    coverageReporter: {
+      dir: require('path').join(__dirname, '../../coverage/mat-table-ext-example'),
+      subdir: '.',
+      reporters: [
+        { type: 'html' },
+        { type: 'text-summary' }
+      ]
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};