@experteam-mx/ngx-table 0.0.4 → 1.0.2

package/.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/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/ngx-table'),
+      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/ng-package.json

@@ -0,0 +1,11 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/ngx-table",
+  "deleteDestPath": false,
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  },
+  "allowedNonPeerDependencies": [
+    "."
+  ]
+}

package/package.json

@@ -1,33 +1,16 @@
 {
   "name": "@experteam-mx/ngx-table",
-  "version": "0.0.4",
+  "version": "1.0.2",
   "license": "MIT",
-  "peerDependencies": {},
-  "dependencies": {
+  "peerDependencies": {
     "@angular/common": "^12.0.2",
-    "@angular/core": "^12.0.2",
+    "@angular/core": "^12.0.2"
+  },
+  "dependencies": {
+    "@angular/localize": "^13.2.2",
+    "@ng-bootstrap/ng-bootstrap": "^10.0.0",
     "bootstrap": "^5.1.3",
-    "bootstrap-icons": "^1.8.1",
+    "ngx-skeleton-loader": "^5.0.0",
     "tslib": "^2.1.0"
-  },
-  "module": "fesm2015/experteam-mx-ngx-table.mjs",
-  "es2020": "fesm2020/experteam-mx-ngx-table.mjs",
-  "esm2020": "esm2020/experteam-mx-ngx-table.mjs",
-  "fesm2020": "fesm2020/experteam-mx-ngx-table.mjs",
-  "fesm2015": "fesm2015/experteam-mx-ngx-table.mjs",
-  "typings": "experteam-mx-ngx-table.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./experteam-mx-ngx-table.d.ts",
-      "esm2020": "./esm2020/experteam-mx-ngx-table.mjs",
-      "es2020": "./fesm2020/experteam-mx-ngx-table.mjs",
-      "es2015": "./fesm2015/experteam-mx-ngx-table.mjs",
-      "node": "./fesm2015/experteam-mx-ngx-table.mjs",
-      "default": "./fesm2020/experteam-mx-ngx-table.mjs"
-    }
-  },
-  "sideEffects": false
-}
+  }
+}

package/src/lib/ngx-table.component.html

@@ -0,0 +1,75 @@
+<div class="container-fluid">
+    <h3 class="text-center" *ngIf="configsRender.titleTable != null">{{ configsRender.titleTable }}</h3>
+    <div *ngIf="!configsRender.search.active && configsRender.actions.add?.active" class="row justify-content-end mb-2">
+        <div class="col d-flex justify-content-end">
+            <button *ngIf="configsRender.actions.add?.active" class="btn btn-success" type="button" (click)="onActionClick({event: $event,type: 'add'})">
+                <span [innerHTML]="configsRender.actions.add?.labelHtml"></span>
+            </button>
+        </div>
+    </div>
+    <div *ngIf="configsRender.search.active" class="row justify-content-end mb-2">
+        <div class="col d-flex justify-content-end">
+            <button *ngIf="configsRender.actions.add?.active" class="btn btn-success" type="button" (click)="onActionClick({event: $event,type: 'add'})">
+                <span [innerHTML]="configsRender.actions.add?.labelHtml"></span>
+            </button>
+        </div>
+        <div class="col-lg-3">
+            <div class="input-group">
+                <input type="text" class="form-control" [(ngModel)]="configsRender.search.textSearch" [placeholder]="configsRender.search.placeholderSearch != undefined ? configsRender.search.placeholderSearch : ''" (input)="onKeySearch()">
+                <button class="btn btn-primary" type="button" (click)="onRestarSeach()">
+                    <i class="bi bi-arrow-counterclockwise"></i>
+                </button>
+            </div>
+        </div>
+    </div>
+    <ngx-skeleton-loader *ngIf="configsRender.loading" count="5"></ngx-skeleton-loader>
+    <table *ngIf="!configsRender.loading" class="table table-striped table-bordered">
+        <thead>
+            <tr>
+                <th *ngFor="let col of headRowRender">{{ col.label }}</th>
+                <th class="col-compact" *ngIf="configsRender.actions.edit?.active || configsRender.actions.delete?.active">
+                    Actions
+                </th>
+            </tr>
+        </thead>
+        <tbody>
+            <ng-container *ngFor="let register of registersRender; let i = index">
+                <tr [class.pointer]="register.configRegister?.actions?.select?.active" (click)="register.configRegister?.actions?.select?.active ? onActionClick({event: $event,type: 'select',data: register}):return">
+                    <ng-container *ngFor="let key of objectKeys(register); let j = index">
+                        <td [class.text-end]="headRow[j].type == 'number'">{{register[key]}}</td>
+                    </ng-container>
+                    <td class="text-nowrap" *ngIf="configsRender.actions.edit?.active || configsRender.actions.delete?.active">
+                        <button *ngIf="register.configRegister?.actions?.edit?.active" type="button" class="btn btn-primary mx-1" (click)="onActionClick({event: $event,type: 'edit',data: register})">
+                            <span [innerHTML]="register.configRegister?.actions?.edit?.labelHtml"></span>
+                        </button>
+                        <button *ngIf="register.configRegister?.actions?.delete?.active" type="button" class="btn btn-danger mx-1" (click)="onActionClick({event: $event,type: 'delete',data: register})">
+                            <span [innerHTML]="register.configRegister?.actions?.delete?.labelHtml"></span>
+                        </button>
+                    </td>
+                </tr>
+            </ng-container>
+        </tbody>
+    </table>
+    <div class="position-sticky bottom-0 bg-white" *ngIf="configsRender.paginationActive && configsRender.collectionSize > 0">
+        <div class="row justify-content-end border-top pt-2">
+            <div class="col-sm-6">
+                <ngb-pagination
+                    class="d-flex justify-content-center"
+                    [pageSize]="configsRender.pageSize"
+                    [collectionSize]="configsRender.collectionSize"
+                    [(page)]="configsRender.page"
+                    [maxSize]="5"
+                    [rotate]="true"
+                    [boundaryLinks]="true"
+                    [ellipses]="true"
+                    (pageChange)="onPageChange()"
+                    size="sm"
+                >
+                    <ng-template ngbPaginationNumber let-page>{{ page }}</ng-template>
+                </ngb-pagination>
+            </div>
+            <div class="col-sm-3">
+            </div>
+        </div>
+    </div>
+</div>

package/src/lib/ngx-table.component.scss

@@ -0,0 +1,102 @@
+/* You can add global styles to this file, and also import other style files */
+$dhlYellow: #FFCC00;
+$dhlYellowOpaque: #fff0b3;
+$darkBlue: #273c5a;
+$medBlue: #002147;
+$lightBlue: #ddf1fa;
+$inputBG: #f9f9f9;
+$inputText: #2664ab;
+$dhlRed: #bb133d;
+$dhlGreen: #007c39;
+$gray80: #333333;
+$gray60: #666666;
+$gray45: #8C8C8C;
+$gray30: #B2B2B2;
+$gray20: #CCCCCC;
+$gray10: #E5E5E5;
+$gray08: #EBEBEB;
+$gray05: #F2F2F2;
+
+$primary: $dhlYellow;
+$success: $dhlGreen;
+$danger: $dhlRed;
+
+@import "~bootstrap/scss/functions";
+@import "~bootstrap/scss/variables";
+@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css");
+
+$pagination-color: color-contrast($primary);
+$pagination-active-color: color-contrast($primary);
+
+:host ::ng-deep{
+  @import "~bootstrap/scss/bootstrap";
+}
+
+.pointer{
+  cursor: pointer;
+}
+
+.col-compact{
+  width: 1px;
+}
+
+.bg-white{
+  background-color: #fff !important;
+}
+
+table {
+  margin: auto;
+  width: fit-content!important;
+  thead{
+    font-weight: bolder;
+    position: sticky;
+    top: -1px;
+    background-color: #fff;
+    td:first-child,
+    th:first-child{
+      &::before{
+        content: "";
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        height: 1px;
+        width: 100%;
+        background-color: #00000017;
+      }
+    }
+    td,th{
+      background-color: $primary;
+      color: color-contrast($primary);
+    }
+  }
+  tfoot{
+    font-weight: bolder;
+    position: sticky;
+    bottom: 0;
+    background-color: #fff;
+    td:first-child,
+    th:first-child{
+      &::before{
+        content: "";
+        position: absolute;
+        left: 0;
+        top: 0;
+        height: 1px;
+        width: 100%;
+        background-color: #000000;
+      }
+      &::after{
+        content: "";
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        height: 2px;
+        width: 100%;
+        background-color: #000000;
+      }
+    }
+    td,th{
+      background-color: $dhlYellowOpaque;
+    }
+  }
+}

package/src/lib/ngx-table.component.spec.ts

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

package/src/lib/ngx-table.component.ts

@@ -0,0 +1,151 @@
+import { Component, OnInit, OnChanges, Input, Output, EventEmitter, SimpleChanges } from '@angular/core';
+
+@Component({
+  selector: 'ngx-table',
+  templateUrl: './ngx-table.component.html',
+  styleUrls: ['./ngx-table.component.scss']
+})
+export class NgxTableComponent implements OnInit, OnChanges {
+
+  constructor() { }
+
+  @Input() headRow: any[] = new Array()
+  headRowRender: any[] = new Array()
+
+  @Input() registers: any[] = new Array()
+  @Input() registersRender: any[] = new Array()
+
+  @Input() configs: any
+  configsRender: any = {}
+
+  @Output() changePage = new EventEmitter<Object>();
+  @Output() clickEvent = new EventEmitter<Object>();
+
+  configsDefault: any = {
+    titleTable: null,
+    loading: false,
+    paginationActive: false,
+    page: 1,
+    pageSize: 15,
+    collectionSize: 0,
+    search:{
+      active: false,
+      textSearch: '',
+      placeholderSearch: 'Search'
+    },
+    order: {
+      active: false,
+      field: null,
+      asc: false
+    },
+    actions: {
+      add:{
+        active: false,
+        labelHtml: null
+      },
+      select:{
+        active: false,
+        labelHtml: null
+      },
+      edit:{
+        active: false,
+        labelHtml: null
+      },
+      delete:{
+        active: false,
+        labelHtml: null
+      },
+    },
+    colHead:{
+      label: null,
+      type: 'string', // string, number
+      field: null,
+      order: {
+        active: false
+      }
+    }
+  }
+
+  objectKeys( registers: any ){
+    let registros = new Array()
+    for( let key of Object.keys(registers) ){
+      if( key != 'configRegister' ){
+        registros.push( key )
+      }
+    }
+
+    return registros
+  }
+
+  onPageChange() {
+    this.configs = this.configsRender
+    this.changePage.emit({
+      ...this.configsRender
+    });
+  }
+
+  onKeySearch() {
+    this.configs = this.configsRender
+    this.changePage.emit({
+      ...this.configsRender
+    });
+  }
+
+  onRestarSeach() {
+    this.configs = this.configsRender
+    this.changePage.emit({
+      ...this.configsRender
+    });
+  }
+
+  onActionClick(object: any) {
+    object.event.preventDefault()
+    object.event.stopPropagation()
+
+    this.clickEvent.emit({
+      type: object.type,
+      data: object.data
+    });
+  }
+
+  render(){
+    this.headRowRender = new Array()
+    for( let head of this.headRow ){
+      this.headRowRender.push({
+        ...this.configsDefault.colHead,
+        ...head
+      })
+    }
+
+    this.configsRender = {
+      titleTable: this.configsDefault.titleTable,
+      paginationActive: this.configsDefault.paginationActive,
+      page: this.configsDefault.page,
+      pageSize: this.configsDefault.pageSize,
+      search: this.configsDefault.search,
+      order: this.configsDefault.order,
+      actions: this.configsDefault.actions,
+      ...this.configs,
+      collectionSize: this.registers.length,
+    }
+
+    this.registersRender = new Array()
+    for( let register of this.registers ){
+      this.registersRender.push({
+        configRegister: {
+          actions: this.configsRender.actions,
+        },
+        ...register
+      })
+    }
+  }
+
+  ngOnInit(): void {
+    this.render()
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    this.render()
+  }
+
+}

package/src/lib/ngx-table.module.ts

@@ -0,0 +1,23 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { FormsModule } from '@angular/forms';
+
+import { NgxTableComponent } from './ngx-table.component';
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
+
+@NgModule({
+  declarations: [
+    NgxTableComponent
+  ],
+  imports: [
+    BrowserModule,
+    FormsModule,
+    NgbModule,
+    NgxSkeletonLoaderModule,
+  ],
+  exports: [
+    NgxTableComponent
+  ]
+})
+export class NgxTableModule { }

package/src/lib/ngx-table.service.spec.ts

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

package/src/lib/ngx-table.service.ts

@@ -0,0 +1,9 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class NgxTableService {
+
+  constructor() { }
+}

package/{public-api.d.ts → src/public-api.ts}

@@ -1,3 +1,7 @@
-export * from './lib/ngx-table.service';
-export * from './lib/ngx-table.component';
-export * from './lib/ngx-table.module';
+/*
+ * Public API Surface of ngx-table
+ */
+
+export * from './lib/ngx-table.service';
+export * from './lib/ngx-table.component';
+export * from './lib/ngx-table.module';

package/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/tsconfig.lib.json

@@ -0,0 +1,23 @@
+/* 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": []
+  },
+  "angularCompilerOptions": {
+    "skipTemplateCodegen": true,
+    "strictMetadataEmit": true,
+    "enableResourceInlining": true,
+    "strictTemplates": false,
+    "fullTemplateTypeCheck": false,
+    "enableIvy": true
+  },
+  "exclude": [
+    "src/test.ts",
+    "**/*.spec.ts"
+  ]
+}

package/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/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/esm2020/experteam-mx-ngx-table.mjs

@@ -1,5 +0,0 @@
-/**
- * Generated bundle index. Do not edit.
- */
-export * from './public-api';
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZXhwZXJ0ZWFtLW14LW5neC10YWJsZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3Byb2plY3RzL25neC10YWJsZS9zcmMvZXhwZXJ0ZWFtLW14LW5neC10YWJsZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7R0FFRztBQUVILGNBQWMsY0FBYyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBHZW5lcmF0ZWQgYnVuZGxlIGluZGV4LiBEbyBub3QgZWRpdC5cbiAqL1xuXG5leHBvcnQgKiBmcm9tICcuL3B1YmxpYy1hcGknO1xuIl19