mat-table-ext 0.0.0 → 0.0.2

package/.vscode/tasks.json

@@ -1,42 +0,0 @@
-{
-  // For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
-  "version": "2.0.0",
-  "tasks": [
-    {
-      "type": "npm",
-      "script": "start",
-      "isBackground": true,
-      "problemMatcher": {
-        "owner": "typescript",
-        "pattern": "$tsc",
-        "background": {
-          "activeOnStart": true,
-          "beginsPattern": {
-            "regexp": "(.*?)"
-          },
-          "endsPattern": {
-            "regexp": "bundle generation complete"
-          }
-        }
-      }
-    },
-    {
-      "type": "npm",
-      "script": "test",
-      "isBackground": true,
-      "problemMatcher": {
-        "owner": "typescript",
-        "pattern": "$tsc",
-        "background": {
-          "activeOnStart": true,
-          "beginsPattern": {
-            "regexp": "(.*?)"
-          },
-          "endsPattern": {
-            "regexp": "bundle generation complete"
-          }
-        }
-      }
-    }
-  ]
-}

package/angular.json

@@ -1,150 +0,0 @@
-{
-  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
-  "version": 1,
-  "newProjectRoot": "projects",
-  "projects": {
-    "mat-table-ext": {
-      "projectType": "library",
-      "root": "projects/mat-table-ext",
-      "sourceRoot": "projects/mat-table-ext/src",
-      "prefix": "lib",
-      "architect": {
-        "build": {
-          "builder": "@angular-devkit/build-angular:ng-packagr",
-          "options": {
-            "project": "projects/mat-table-ext/ng-package.json"
-          },
-          "configurations": {
-            "production": {
-              "tsConfig": "projects/mat-table-ext/tsconfig.lib.prod.json"
-            },
-            "development": {
-              "tsConfig": "projects/mat-table-ext/tsconfig.lib.json"
-            }
-          },
-          "defaultConfiguration": "production"
-        },
-        "test": {
-          "builder": "@angular-devkit/build-angular:karma",
-          "options": {
-            "main": "projects/mat-table-ext/src/test.ts",
-            "tsConfig": "projects/mat-table-ext/tsconfig.spec.json",
-            "karmaConfig": "projects/mat-table-ext/karma.conf.js"
-          }
-        }
-      }
-    },
-    "mat-table-ext-example": {
-      "projectType": "application",
-      "schematics": {
-        "@schematics/angular:component": {
-          "style": "scss"
-        },
-        "@schematics/angular:application": {
-          "strict": true
-        }
-      },
-      "root": "projects/mat-table-ext-example",
-      "sourceRoot": "projects/mat-table-ext-example/src",
-      "prefix": "app",
-      "architect": {
-        "build": {
-          "builder": "@angular-devkit/build-angular:browser",
-          "options": {
-            "outputPath": "dist/mat-table-ext-example",
-            "index": "projects/mat-table-ext-example/src/index.html",
-            "main": "projects/mat-table-ext-example/src/main.ts",
-            "polyfills": "projects/mat-table-ext-example/src/polyfills.ts",
-            "tsConfig": "projects/mat-table-ext-example/tsconfig.app.json",
-            "inlineStyleLanguage": "scss",
-            "assets": [
-              "projects/mat-table-ext-example/src/favicon.ico",
-              "projects/mat-table-ext-example/src/assets",
-              {
-                "glob": "**/*",
-                "input": "projects/mat-table-ext/assets",
-                "output": "/assets/"
-              }
-            ],
-            "styles": [
-              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
-              "projects/mat-table-ext-example/src/styles.scss"
-            ],
-            "scripts": []
-          },
-          "configurations": {
-            "production": {
-              "budgets": [
-                {
-                  "type": "initial",
-                  "maximumWarning": "500kb",
-                  "maximumError": "1mb"
-                },
-                {
-                  "type": "anyComponentStyle",
-                  "maximumWarning": "2kb",
-                  "maximumError": "4kb"
-                }
-              ],
-              "fileReplacements": [
-                {
-                  "replace": "projects/mat-table-ext-example/src/environments/environment.ts",
-                  "with": "projects/mat-table-ext-example/src/environments/environment.prod.ts"
-                }
-              ],
-              "outputHashing": "all"
-            },
-            "development": {
-              "buildOptimizer": false,
-              "optimization": false,
-              "vendorChunk": true,
-              "extractLicenses": false,
-              "sourceMap": true,
-              "namedChunks": true
-            }
-          },
-          "defaultConfiguration": "production"
-        },
-        "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
-          "configurations": {
-            "production": {
-              "browserTarget": "mat-table-ext-example:build:production"
-            },
-            "development": {
-              "browserTarget": "mat-table-ext-example:build:development"
-            }
-          },
-          "defaultConfiguration": "development"
-        },
-        "extract-i18n": {
-          "builder": "@angular-devkit/build-angular:extract-i18n",
-          "options": {
-            "browserTarget": "mat-table-ext-example:build"
-          }
-        },
-        "test": {
-          "builder": "@angular-devkit/build-angular:karma",
-          "options": {
-            "main": "projects/mat-table-ext-example/src/test.ts",
-            "polyfills": "projects/mat-table-ext-example/src/polyfills.ts",
-            "tsConfig": "projects/mat-table-ext-example/tsconfig.spec.json",
-            "karmaConfig": "projects/mat-table-ext-example/karma.conf.js",
-            "inlineStyleLanguage": "scss",
-            "assets": [
-              "projects/mat-table-ext-example/src/favicon.ico",
-              "projects/mat-table-ext-example/src/assets"
-            ],
-            "styles": [
-              "projects/mat-table-ext-example/src/styles.scss"
-            ],
-            "scripts": []
-          }
-        }
-      }
-    }
-  },
-  "cli": {
-    "analytics": false
-  }
-}

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

@@ -1,16 +0,0 @@
-# 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/README.md

@@ -1,24 +0,0 @@
-# MatTableExt
-
-This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 14.2.10.
-
-## Code scaffolding
-
-Run `ng generate component component-name --project mat-table-ext` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project mat-table-ext`.
-> Note: Don't forget to add `--project mat-table-ext` or else it will be added to the default project in your `angular.json` file. 
-
-## Build
-
-Run `ng build mat-table-ext` to build the project. The build artifacts will be stored in the `dist/` directory.
-
-## Publishing
-
-After building your library with `ng build mat-table-ext`, go to the dist folder `cd dist/mat-table-ext` and run `npm publish`.
-
-## Running unit tests
-
-Run `ng test mat-table-ext` to execute the unit tests via [Karma](https://karma-runner.github.io).
-
-## Further help
-
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.

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

@@ -1,44 +0,0 @@
-// 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'),
-      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
-  });
-};

package/projects/mat-table-ext/ng-package.json

@@ -1,9 +0,0 @@
-{
-  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
-  "dest": "../../dist/mat-table-ext",
-  "assets": ["assets"],
-  "lib": {
-    "entryFile": "src/public-api.ts",
-    "cssUrl": "inline"
-  }
-}

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

@@ -1,34 +0,0 @@
-{
-  "name": "mat-table-sample",
-  "version": "0.0.63",
-  "description": "this is a sample table of material.",
-  "keywords": [
-    "Hamza"
-  ],
-  "author": {
-    "name": "Samples Contribute",
-    "email": "abc@gmail.com",
-    "url": "http://blog.sample.me/"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/sample/tableSample"
-  },
-  "peerDependencies": {
-    "@angular/animations": "^14.2.0",
-    "@angular/cdk": "^14.2.4",
-    "@angular/common": "^14.2.0",
-    "@angular/compiler": "^14.2.0",
-    "@angular/core": "^14.2.0",
-    "@angular/forms": "^14.2.0",
-    "@angular/material": "^14.2.4",
-    "@angular/platform-browser": "^14.2.0",
-    "@angular/platform-browser-dynamic": "^14.2.0",
-    "@angular/router": "^14.2.0",
-    "@ngx-translate/core": "^14.0.0",
-    "xlsx": "^0.18.5"
-  },
-  "dependencies": {
-    "tslib": "^2.3.0"
-  }
-}

package/projects/mat-table-ext/src/lib/components/column-pinning/column-pinning.component.html

@@ -1,7 +0,0 @@
-<div class="pinning-list-item" *ngFor="let column of columns" style="display: flex; ">
-    <button mat-icon-button >
-        <mat-icon (click)="changeValue(column)" matTooltip="{{column['pinned'] ? (column['pinned'] | titlecase):'None'}}"
-            svgIcon="{{column['pinned'] =='left'|| column['pinned'] =='right' ? icons[column['pinned']]:'pinNone'}}" class="pinning-icon"></mat-icon>
-    </button>
-    <span class="column-headers">{{column.header}}</span>
-</div>

package/projects/mat-table-ext/src/lib/components/column-pinning/column-pinning.component.scss

@@ -1,9 +0,0 @@
-.pinning-list-item {
-  display: flex;
-  justify-content: flex-start;
-  align-items: baseline;
-  height: 3em;
-}
-.column-headers {
-  font-family: Roboto, "Helvetica Neue", sans-serif;
-}

package/projects/mat-table-ext/src/lib/components/column-pinning/column-pinning.component.spec.ts

@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { ColumnPinningComponent } from './column-pinning.component';
-
-describe('ColumnPinningComponent', () => {
-  let component: ColumnPinningComponent;
-  let fixture: ComponentFixture<ColumnPinningComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ ColumnPinningComponent ]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(ColumnPinningComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/projects/mat-table-ext/src/lib/components/column-pinning/column-pinning.component.ts

@@ -1,48 +0,0 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { MTExColumn } from '../../models/tableExtModels';
-
-@Component({
-  selector: 'app-column-pinning',
-  templateUrl: './column-pinning.component.html',
-  styleUrls: ['./column-pinning.component.scss'],
-})
-export class ColumnPinningComponent implements OnInit {
-  @Input() columns!: MTExColumn[];
-  @Output() columnsChanged: EventEmitter<MTExColumn[]> = new EventEmitter();
-  public icons = {
-    left: 'pinLeft',
-    right: 'pinRight',
-    none: 'pinNone',
-  };
-
-  constructor() {}
-  ngOnInit(): void {}
-  /**
-   * @description This method is called when pin value changes for a column.
-   * @param column column of which to set the pin value
-   */
-  changeValue(column: MTExColumn) {
-    if (column.pinned) {
-      if (column.pinned == 'left') {
-        this.setColumnPinValue(column, 'right');
-      } else if (column.pinned == 'right') {
-        this.setColumnPinValue(column, undefined);
-      }
-    } else {
-      this.setColumnPinValue(column, 'left');
-    }
-    this.columnsChanged.emit(this.columns);
-  }
-  /**
-   * @description This method is used to set the column pin value.
-   * @param column column of which to set the pin value
-   * @param value pin value to set
-   */
-  setColumnPinValue(column: MTExColumn, value: 'left' | 'right' | undefined) {
-    this.columns.forEach((col) => {
-      if (column?.header == col.header) {
-        col.pinned = value;
-      }
-    });
-  }
-}

package/projects/mat-table-ext/src/lib/components/editing/editing.component.html

@@ -1,55 +0,0 @@
-<div *ngIf="!templateRef" style="height: 100%;" class="main-dialog-container">
-    <div mat-dialog-title class="dialog-title-container">
-        <h2 style="margin: 0;">Edit Row</h2>
-        <span class="example-spacer"></span>
-        <button mat-icon-button aria-label="Example icon button with a vertical three dot icon">
-            <mat-icon mat-dialog-close style="cursor: pointer;" fxFlex="5">close</mat-icon>
-        </button>
-    </div>
-    <mat-dialog-content style="margin-right: 20px;">
-        <div style="display: flex; flex-direction: column;">
-            <ng-container *ngFor="let key of keys">
-                <!-- Number Type -->
-                <mat-form-field *ngIf="types[key] == 'number'" appearance="outline" class="inline-editing-field">
-                    <mat-label>{{key | titlecase}}</mat-label>
-                    <input matInput type="number" [(ngModel)]="dialogData['row'][key]" [ngModelOptions]="{standalone: true}">
-                </mat-form-field>
-        
-                <!-- String Type -->
-        
-                <mat-form-field *ngIf="types[key] == 'string'" appearance="outline" class="inline-editing-field">
-                    <mat-label>{{key | titlecase}}</mat-label>
-                    <input matInput type="text" [(ngModel)]="dialogData['row'][key]" [ngModelOptions]="{standalone: true}">
-                </mat-form-field>
-                <mat-form-field *ngIf="types[key] == 'date'" appearance="outline" class="inline-editing-field">
-                    <mat-label>{{key | titlecase}}</mat-label>
-                    <input matInput type="text" [(ngModel)]="dialogData['row'][key]" [ngModelOptions]="{standalone: true}">
-                </mat-form-field>
-                <!-- Selection Type -->
-        
-                <mat-form-field *ngIf="types[key] == 'selection'" appearance="outline" class="inline-editing-field">
-                    <mat-label>{{key | titlecase}}</mat-label>
-                    <mat-select [value]="dialogData['row'][key].value" [(ngModel)]="dialogData['row'][key].value">
-                        <mat-option *ngFor="let option of dialogData['row'][key].options" [value]="option">
-                            {{option}}
-                        </mat-option>
-                    </mat-select>
-                </mat-form-field>
-                <!-- Boolean Type -->
-                <p>
-                    <mat-checkbox *ngIf="types[key] == 'boolean'" color="primary" [(ngModel)]="dialogData['row'][key]">
-                        <mat-label>{{key | titlecase}}</mat-label>
-                    </mat-checkbox>
-                </p>
-            </ng-container>
-        </div>
-    </mat-dialog-content>
-    <div class="spacer"></div>
-    <mat-dialog-actions style="margin-top: 20px;" align="end">
-        <button mat-raised-button color="warn" mat-dialog-close>
-            Cancel
-        </button>
-        <button mat-raised-button color="primary" (click)="closeDialog()">Save</button>
-    </mat-dialog-actions>
-</div>
-<ng-container *ngIf="templateRef" [ngTemplateOutlet]="templateRef" [ngTemplateOutletContext]="{data:{row:templateRow,columns:columns,columnKeys:templateKeys,columnTypes:templateTypes,closeDialog:closeTemplateDialog}}"></ng-container>

package/projects/mat-table-ext/src/lib/components/editing/editing.component.scss

@@ -1,19 +0,0 @@
-.main-dialog-container {
-    display: flex;
-    flex-direction: column;
-}
-
-.main-dialog-container mat-dialog-content {
-    overflow-y: auto;
-    margin: 0px;
-    padding: 0 0 0 20px;
-}
-
-.dialog-title-container {
-    display: flex;
-    align-items: center;
-}
-
-.spacer {
-    flex-grow: 1;
-}

package/projects/mat-table-ext/src/lib/components/editing/editing.component.spec.ts

@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { PopupModalComponent } from './editing.component';
-
-describe('PopupModalComponent', () => {
-  let component: PopupModalComponent;
-  let fixture: ComponentFixture<PopupModalComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ PopupModalComponent ]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(PopupModalComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/projects/mat-table-ext/src/lib/components/editing/editing.component.ts

@@ -1,110 +0,0 @@
-import { Component, Inject, OnInit, TemplateRef } from '@angular/core';
-import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
-import { MTExColumn } from '../../models/tableExtModels';
-import { MatTableExtService } from '../../mat-table-ext.service';
-
-@Component({
-  selector: 'app-editing',
-  templateUrl: './editing.component.html',
-  styleUrls: ['./editing.component.scss'],
-})
-export class EditingComponent implements OnInit {
-  public templateRef!: TemplateRef<any>;
-  public keys: string[] = [];
-  public templateKeys: string[] = [];
-  public types: any = {};
-  public templateTypes: any = {};
-  public columns: MTExColumn[] = [];
-  public templateRow: any = {};
-  
-  constructor(
-    public dialogRef: MatDialogRef<EditingComponent>,
-    @Inject(MAT_DIALOG_DATA) public dialogData: any,
-    public service: MatTableExtService
-  ) { }
-  
-  ngOnInit(): void {
-    this.setData(this.dialogData);
-  }
-/**
- * @description This method is used to set data for editing.
- * @param value dialog Data
- */
-  setData(value: any) {
-    let row = value.row;
-    let types: any = {};
-    this.keys = [];
-    this.columns = value.columns;
-    this.columns.forEach((column) => {
-      this.keys.push(column.field);
-      if (column.type == 'selection') {
-        types[column.field] = column.type;
-        let temp = row[column.field];
-        row[column.field] = {
-          value: temp,
-          options: column.options,
-        };
-      } else {
-        types[column.field] = column.type;
-      }
-    });
-    this.types = types;
-    this.setTemplateRef(value);
-  }
-/**
- * @description This method is used to set the data when data comes in from cus template.
- * @param value template value
- */
-  setTemplateRef(value: any) {
-    if (value.templateRef !== undefined) {
-      this.templateRow = { ...value.row };
-      let types: any = {};
-      this.templateKeys = [];
-      this.columns.forEach((column) => {
-        this.templateKeys.push(column.field);
-        if (column.type == 'selection') {
-          types[column.field] = column.type;
-          let temp = this.templateRow[column.field];
-          this.templateRow[column.field] = {
-            value: temp,
-            options: column.options,
-          };
-        } else {
-          types[column.field] = column.type;
-        }
-      });
-      this.templateTypes = types;
-      this.templateRef = value.templateRef;
-    }
-  }
-/**
- * @description This method is triggered when dialog is closed and also emits the dialog closed event data.
- */
-  closeDialog() {
-    let rowData = { ...this.dialogData.row };
-    this.keys.forEach((key: any) => {
-      if (this.types[key] === 'selection') {
-        let temp = rowData[key].value;
-        rowData[key] = temp;
-      }
-    });
-    this.dialogRef.close(rowData);
-  }
-
-  /**
-   * @description This method is called when the dialog is closed custom template action.
-   * @param row row to be edited.
-   * @param keys keys of columns
-   * @param types column types
-   */
-  closeTemplateDialog(row: any, keys: string[], types: string[]) {
-    let rowData = { ...row };
-    keys.forEach((key: any) => {
-      if (types[key] === 'selection') {
-        let temp = rowData[key].value;
-        rowData[key] = temp;
-      }
-    });
-    this.dialogRef.close(rowData);
-  }
-}

package/projects/mat-table-ext/src/lib/components/filter-columns-component/filter-columns-component.component.html

@@ -1,26 +0,0 @@
-
-    <ng-container *ngIf="obj">
-        <!-- Number Type -->
-        <mat-form-field *ngIf="obj.type == 'number'" appearance="outline" class="inline-editing-field" >
-            <input matInput type="number" [formControl]="numberCtrl">
-        </mat-form-field>
-        
-        <!-- String Type -->
-        <mat-form-field *ngIf="obj.type == 'string'" appearance="outline" class="inline-editing-field">
-            <input matInput type="text" [formControl]="stringCtrl">
-        </mat-form-field>
-        <mat-form-field *ngIf="obj.type == 'date'" appearance="outline" class="inline-editing-field">
-            <input matInput type="date" [formControl]="dateCtrl">
-        </mat-form-field>
-        <!-- Selection Type -->
-        <mat-form-field *ngIf="obj.type == 'selection'" appearance="outline" class="inline-editing-field">
-            <mat-select [value]="" [formControl]="selectionCtrl">
-                <mat-option *ngFor="let option of obj.options" [value]="option">
-                    {{option}}
-                </mat-option>
-            </mat-select>
-        </mat-form-field>
-        <!-- Boolean Type -->
-        <mat-checkbox (click)="$event.stopPropagation()" *ngIf="obj.type == 'boolean'" color="primary" [formControl]="booleanCtrl"></mat-checkbox>
-
-    </ng-container>