ps-toolkit-ui 0.0.207 → 0.0.211

package/src/lib/components/table/table.component.ts

@@ -0,0 +1,180 @@
+import {Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild} from '@angular/core';
+import {Router} from '@angular/router';
+import {TableClass} from '../../classes/table.class';
+import {InputType, Method, TableCollType, TableOptionType} from '../../classes/enum.class';
+import {InputClass} from '../../classes/form.class';
+import {RequestClass} from '../../classes/request.class';
+import * as $ from 'jquery';
+import {ConfirmComponent} from '../confirm/confirm.component';
+import {ModalClass} from '../../classes/modal.class';
+
+@Component({
+  selector: 'lib-table',
+  templateUrl: './table.component.html',
+  styleUrls: ['./table.component.css']
+})
+export class TableComponent implements OnInit{
+  @Input()
+  table: TableClass;
+  @Output()
+  changeRows = new EventEmitter<object>();
+  get type(): typeof InputType{ return InputType; }
+  get tableOptionType(): typeof TableOptionType{ return TableOptionType; }
+  get colType(): typeof TableCollType{ return TableCollType; }
+  @ViewChild('rows') rows: ElementRef;
+  @ViewChild('tableDiv') tableDiv: ElementRef;
+  @ViewChild('exportDropDown') exportDropDown: ElementRef;
+  @ViewChild('confirm') confirm: ConfirmComponent;
+  loadIcon: InputClass;
+  sizeIcon: InputClass;
+  select: InputClass = null;
+  optDelete: InputClass;
+  reload: InputClass;
+  maximum: InputClass;
+  export: InputClass = null;
+  constructor(public router: Router) {
+  }
+  itemsWidth = 0;
+  options: InputClass[];
+  ngOnInit(): void {
+    // if (this.app.isReport){
+    //   this.table.perPage = -1;
+    //   this.table.extraButtons = false;
+    //   this.table.displayLabel = false;
+    //   this.table.isReport = true;
+    //   this.table.permissions.Accesses = ['List'];
+    //   this.table.permissions.Options = [];
+    //   this.table.cols.forEach(x => x.sort = false);
+    //   this.table.onLoad = () => {
+    //     setTimeout(() => {
+    //       window.print();
+    //     }, 500);
+    //   };
+    // }
+    this.loadIcon = new InputClass(this.table.environment, null, 'LoadIcon');
+    this.sizeIcon = new InputClass(this.table.environment, null, 'SizeIcon');
+    if (this.table.hasChildren){
+      this.table.cols.forEach(x => x.sort = false);
+    }
+    this.itemsWidth = this.table.cols.reduce((a, {percent}) => a + percent, 0);
+    this.reload = new InputClass(this.table.environment, this.table.l, 'Reload', 'fa-duotone fa-sync-alt', InputType.Icon, 'm-h-5');
+    this.maximum = new InputClass(this.table.environment, this.table.l, 'Maximum', 'fa-duotone fa-expand-arrows-alt', InputType.Icon, 'm-h-5');
+    this.optDelete = new InputClass(this.table.environment, this.table.l, 'Delete', 'fa-duotone fa-trash', InputType.Icon, 'red h-25 m-h-5 d-ib va-m f-u');
+    for (const c of this.table.cols.filter(x => x.withSearch)){
+      c.search = new InputClass(this.table.environment, this.table.l, c.name,
+        null, c.type === TableCollType.Date ? InputType.Date : InputType.Text, 'h-25 table-search');
+      c.search.displayLabel = false;
+      c.search.onChange = () => {
+        this.table.load();
+      };
+    }
+    if (this.table.sortable){
+      this.table.perPage = -1;
+      this.table.onLoad = () => {
+        this.setSortable();
+      };
+    }
+    this.table.set(this.changeRows);
+    if (this.table.searchForm){
+      this.table.searchForm.displayLabel = false;
+      this.table.searchForm.inputs.forEach(x => {
+        x.required = false;
+        x.displayLabel = false;
+        x.withClear = true;
+        x.class = x.class + ' h-30';
+        x.onChange = () => {
+          this.table.load();
+        };
+      });
+    }
+    this.options = this.getOptions();
+    this.reload.onClick = () => {
+      this.table.load(this.reload);
+    };
+    this.maximum.onClick = () => {
+      $(this.tableDiv.nativeElement).toggleClass('maximum');
+      this.maximum.icon = this.maximum.name === 'Minimum' ? 'fa-duotone fa-expand-arrows-alt' : 'fa-duotone fa-compress-arrows-alt';
+      this.maximum.name = this.maximum.name === 'Minimum' ? 'Maximum' : 'Minimum';
+    };
+    this.optDelete.onClick = (i) => {
+      if (this.table.form){
+        this.table.form.clear();
+      }
+      const data = {
+        ids: this.table.rows.filter(x => x.selected).map(x => x.id)
+      };
+      this.confirm.show(this.table.l('DeleteConfirm'), this.table.url + '/Delete/' + 0, data, () => {
+        this.table.load(null);
+      });
+    };
+    this.table.showConfirm = (l: string, url: string, data, accept: (btn: InputClass) => void) => {
+      this.confirm.show(l, url, data, accept);
+    };
+  }
+  allSelected(): boolean{
+    return this.table.rows.filter(x => !x.selected).length === 0;
+  }
+  isSelected(): boolean{
+    return this.table.rows.filter(x => x.selected).length > 0;
+  }
+  selectAll(): void{
+    if (this.table.rows.filter(x => !x.selected).length === 0){
+      this.table.rows.forEach(x => x.selected = false);
+    }else{
+      this.table.rows.forEach(x => x.selected = true);
+    }
+  }
+  getOptions(): InputClass[]{
+    return [];
+  }
+  setSortable(): void{
+    setTimeout(() => {
+      // @ts-ignore
+      $(this.rows.nativeElement).sortable({
+        axis: 'y',
+        items: 'tr',
+        update: () => {
+          const data = [];
+          // @ts-ignore
+          $(this.rows.nativeElement).sortable('toArray').forEach(x => data.push(x));
+          new RequestClass(this.table.l).send(this.table.url + 'Sort', Method.Post, {Ids: data}, null, () => {
+            if (this.table.onSort){
+              this.table.onSort();
+            }
+          });
+        }
+      }).disableSelection();
+    }, 500);
+  }
+  getRows(): any[]{
+    const c = this.table.rows.filter(x => !x.Data.ParentId);
+    c.forEach((x, i) => x.RowNum = c.length - i + 1);
+    return c;
+  }
+  // getOptionModals(): InputClass[]{
+  //   const modals = [];
+  //   for (const [key, value] of Object.entries(this.table.optionActions)) {
+  //     if (this.table.optionActions[key].modal){
+  //       modals.push(this.table.optionActions[key].modal);
+  //     }
+  //   }
+  //   return modals;
+  // }
+  onChangeRows(e): void{
+    return this.changeRows.emit(e);
+  }
+  onConfirmShow(e): void{
+    this.confirm.show(this.table.l('DeleteConfirm'), this.table.url + 'Delete/' + e.id, null, e.accept);
+  }
+  changeSort(e, s: string): void{
+    if ($(e.target).closest('.header-search').hasClass('header-search')){
+      return;
+    }
+    this.table.sortType = this.table.sort === s ? this.table.sortType === 'ASC' ? 'DESC' : 'ASC' : 'ASC';
+    this.table.sort = s;
+    this.table.load();
+  }
+  getModals(): ModalClass[]{
+    return this.table.optionsActions.filter(x => x instanceof ModalClass);
+  }
+}

package/src/lib/components/tooltip/tooltip.component.css

@@ -0,0 +1,159 @@
+[data-tooltip] {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  z-index: 10;
+}
+
+/* Positioning and visibility settings of the tooltip */
+[data-tooltip]:before,
+[data-tooltip]:after {
+  position: absolute;
+  visibility: hidden;
+  opacity: 0;
+  left: 50%;
+  bottom: calc(100% + 5px);
+  pointer-events: none;
+  transition: 0.2s;
+  will-change: transform;
+}
+
+/* The actual tooltip with a dynamic width */
+[data-tooltip]:before {
+  content: attr(data-tooltip);
+  padding: 0 10px;
+  line-height: 30px;
+  min-width: 50px;
+  max-width: 300px;
+  width: max-content;
+  width: -moz-max-content;
+  border-radius: 5px;
+  font-size: 13px;
+  background-color: var(--black);
+  color: #fff;
+  text-align: center;
+  white-space: pre-wrap;
+  z-index: 6;
+  transform: translate(-50%, -5px) scale(0.5);
+}
+
+/* Tooltip arrow */
+[data-tooltip]:after {
+  content: '';
+  border-style: solid;
+  border-width: 5px 5px 0px 5px;
+  border-color: var(--black);
+  transition-duration: 0s; /* If the mouse leaves the element,
+                              the transition effects for the
+                              tooltip arrow are "turned off" */
+  transform-origin: top;   /* Orientation setting for the
+                              slide-down effect */
+  transform: translateX(-50%) scaleY(0);
+}
+
+/* Tooltip becomes visible at hover */
+[data-tooltip]:hover:before,
+[data-tooltip]:hover:after {
+  visibility: visible;
+  opacity: 1;
+}
+/* Scales from 0.5 to 1 -> grow effect */
+[data-tooltip]:hover:before {
+  transition-delay: 0.3s;
+  transform: translate(-50%, -5px) scale(1);
+}
+/* Slide down effect only on mouseenter (NOT on mouseleave) */
+[data-tooltip]:hover:after {
+  transition-delay: 0.5s; /* Starting after the grow effect */
+  transition-duration: 0.2s;
+  transform: translateX(-50%) scaleY(1);
+}
+/*
+  That's it.
+*/
+
+
+
+
+
+
+/*
+  If you want some adjustability
+  here are some orientation settings you can use:
+*/
+
+/* LEFT */
+/* Tooltip + arrow */
+[data-tooltip-location="left"]:before,
+[data-tooltip-location="left"]:after {
+  left: auto;
+  right: calc(100% + 5px);
+  bottom: 50%;
+}
+
+/* Tooltip */
+[data-tooltip-location="left"]:before {
+  transform: translate(-5px, 50%) scale(0.5);
+}
+[data-tooltip-location="left"]:hover:before {
+  transform: translate(-5px, 50%) scale(1);
+}
+
+/* Arrow */
+[data-tooltip-location="left"]:after {
+  border-width: 5px 0px 5px 5px;
+  border-color: transparent transparent transparent rgba(55, 64, 70, 0.9);
+  transform-origin: left;
+  transform: translateY(50%) scaleX(0);
+}
+[data-tooltip-location="left"]:hover:after {
+  transform: translateY(50%) scaleX(1);
+}
+
+
+
+/* RIGHT */
+[data-tooltip-location="right"]:before,
+[data-tooltip-location="right"]:after {
+  left: calc(100% + 5px);
+  bottom: 50%;
+}
+
+[data-tooltip-location="right"]:before {
+  transform: translate(5px, 50%) scale(0.5);
+}
+[data-tooltip-location="right"]:hover:before {
+  transform: translate(5px, 50%) scale(1);
+}
+
+[data-tooltip-location="right"]:after {
+  border-width: 5px 5px 5px 0px;
+  border-color: transparent rgba(55, 64, 70, 0.9) transparent transparent;
+  transform-origin: right;
+  transform: translateY(50%) scaleX(0);
+}
+[data-tooltip-location="right"]:hover:after {
+  transform: translateY(50%) scaleX(1);
+}
+
+
+
+/* BOTTOM */
+[data-tooltip-location="bottom"]:before,
+[data-tooltip-location="bottom"]:after {
+  top: calc(100% + 5px);
+  bottom: auto;
+}
+
+[data-tooltip-location="bottom"]:before {
+  transform: translate(-50%, 5px) scale(0.5);
+}
+[data-tooltip-location="bottom"]:hover:before {
+  transform: translate(-50%, 5px) scale(1);
+}
+
+[data-tooltip-location="bottom"]:after {
+  border-width: 0px 5px 5px 5px;
+  border-color: transparent transparent rgba(55, 64, 70, 0.9) transparent;
+  transform-origin: bottom;
+}

package/src/lib/components/tooltip/tooltip.component.html

@@ -0,0 +1 @@
+<div [attr.data-tooltip-location]="position" [attr.data-tooltip]="text"></div>

package/src/lib/components/tooltip/tooltip.component.ts

@@ -0,0 +1,15 @@
+import {Component, Input} from '@angular/core';
+
+@Component({
+  selector: 'lib-tooltip',
+  templateUrl: './tooltip.component.html',
+  styleUrls: ['./tooltip.component.css']
+})
+export class TooltipComponent{
+  @Input()
+  text: string;
+  @Input()
+  position = 'bottom';
+  constructor(){
+  }
+}

package/src/lib/ps-toolkit-ui.module.ts

@@ -0,0 +1,94 @@
+import {ModuleWithProviders, NgModule} from '@angular/core';
+import {PsToolkitUiConfigService} from './services/config.service';
+import {AccordionComponent} from './components/accordion/accordion.component';
+import {FooterComponent} from './components/footer/footer.component';
+import {HeaderComponent} from './components/header/header.component';
+import {ModalComponent} from './components/modal/modal.component';
+import {SidebarItemComponent} from './components/sidebar/item/sidebar.item.component';
+import {SidebarComponent} from './components/sidebar/sidebar.component';
+import {StepsComponent} from './components/steps/steps.component';
+import {SubHeaderComponent} from './components/header/sub/sub.header.component';
+import {TableLoadingComponent} from './components/table/loading/table.loading.component';
+import {TablePaginationComponent} from './components/table/pagination/table.pagination.component';
+import {TableRowComponent} from './components/table/row/table.row.component';
+import {TableComponent} from './components/table/table.component';
+import {TooltipComponent} from './components/tooltip/tooltip.component';
+import {FormBankCardComponent} from './components/form/bank-card/form.bank-card.component';
+import {FormButtonComponent} from './components/form/button/form.button.component';
+import {FormCheckboxComponent} from './components/form/checkbox/form.checkbox.component';
+import {FormDateComponent} from './components/form/date/form.date.component';
+import {FormDatetimeComponent} from './components/form/datetime/form.datetime.component';
+import {FormFileComponent} from './components/form/file/form.file.component';
+import {FormIconComponent} from './components/form/icon/form.icon.component';
+import {FormComponent} from './components/form/index/form.component';
+import {FormLabelComponent} from './components/form/label/form.label.component';
+import {FormPlaqueSelectComponent} from './components/form/plaque/select/form.plaque.select.component';
+import {FormPlaqueComponent} from './components/form/plaque/form.plaque.component';
+import {FormRadioComponent} from './components/form/radio/form.radio.component';
+import {FormSelectItemComponent} from './components/form/select/item/form.select.item.component';
+import {FormSelectComponent} from './components/form/select/form.select.component';
+import {FormTableComponent} from './components/form/table/form.table.component';
+import {FormTextareaComponent} from './components/form/textarea/form.textarea.component';
+import {FormTextboxComponent} from './components/form/textbox/form.textbox.component';
+import {FormTimeComponent} from './components/form/time/form.time.component';
+import {FormTreeItemComponent} from './components/form/tree/item/form.tree.item.component';
+import {FormTreeComponent} from './components/form/tree/form.tree.component';
+import {AlertComponent} from './components/alert/alert.component';
+import {ConfirmComponent} from './components/confirm/confirm.component';
+import {NotfoundComponent} from './components/notfound/notfound.component';
+import {FormFingerComponent} from './components/form/finger/form.finger.component';
+import {FormCarSearchComponent} from './components/form/car/search/form.car.search.component';
+import {FormCarComponent} from './components/form/car/form.car.component';
+import {TableReportComponent} from './components/table/report/table.report.component';
+import {RouterModule} from '@angular/router';
+import {FormsModule} from '@angular/forms';
+import {CommonModule} from '@angular/common';
+import {SafeStylePipe} from './classes/safestyle.class';
+import {LoginComponent} from './components/login/login.component';
+import {LoadingComponent} from './components/loading/loading.component';
+import {NotificationComponent} from './components/notification/notification.component';
+import {LayoutComponent} from './components/layout/layout.component';
+import {FormHiddenComponent} from './components/form/hidden/form.hidden.component';
+import {CalendarComponent} from './components/calendar/calendar.component';
+import {ClockComponent} from './components/clock/clock.component';
+import {ChartComponent} from './components/chart/chart.component';
+
+@NgModule({
+  declarations: [
+    FormSelectItemComponent, FormCheckboxComponent, TablePaginationComponent, FormBankCardComponent, SidebarItemComponent, SidebarComponent,
+    FormDateComponent, FormPlaqueSelectComponent, TableLoadingComponent, FormTreeItemComponent, FormTextboxComponent, FormTextareaComponent,
+    FormIconComponent, FormButtonComponent, FormDatetimeComponent, FormPlaqueComponent, SubHeaderComponent, FooterComponent, StepsComponent,
+    FormFileComponent, FormSelectComponent, FormTableComponent, FormLabelComponent, AccordionComponent, FormRadioComponent, HeaderComponent,
+    TooltipComponent, ConfirmComponent, TableComponent, ModalComponent, FormComponent, TableRowComponent, FormTreeComponent, AlertComponent,
+    FormTimeComponent, NotfoundComponent, FormFingerComponent, FormCarSearchComponent, FormCarComponent, TableReportComponent,
+    SafeStylePipe, LoginComponent, LoadingComponent, NotificationComponent, LayoutComponent, FormHiddenComponent, CalendarComponent,
+    ClockComponent, ChartComponent
+  ],
+  imports: [
+    CommonModule,
+    RouterModule,
+    FormsModule
+  ],
+  providers: [],
+  exports: [
+    FormSelectItemComponent, FormCheckboxComponent, TablePaginationComponent, FormBankCardComponent, SidebarItemComponent, SidebarComponent,
+    FormDateComponent, FormPlaqueSelectComponent, TableLoadingComponent, FormTreeItemComponent, FormTextboxComponent, FormTextareaComponent,
+    FormIconComponent, FormButtonComponent, FormDatetimeComponent, FormPlaqueComponent, SubHeaderComponent, FooterComponent, StepsComponent,
+    FormFileComponent, FormSelectComponent, FormTableComponent, FormLabelComponent, AccordionComponent, FormRadioComponent, HeaderComponent,
+    TooltipComponent, ConfirmComponent, TableComponent, ModalComponent, FormComponent, TableRowComponent, FormTreeComponent, AlertComponent,
+    FormTimeComponent, NotfoundComponent, FormFingerComponent, FormCarSearchComponent, FormCarComponent, TableReportComponent,
+    LoginComponent, LoadingComponent, NotificationComponent, LayoutComponent, FormHiddenComponent, CalendarComponent,
+    ClockComponent, ChartComponent
+  ]
+})
+export class PsToolkitUiModule {
+  static forRoot(config: any): ModuleWithProviders<PsToolkitUiModule> {
+    return {
+      ngModule: PsToolkitUiModule,
+      providers: [
+        {provide: PsToolkitUiConfigService, useValue: config }
+      ]
+    };
+  }
+}
+

package/src/lib/services/config.service.ts

@@ -0,0 +1,8 @@
+import {Inject} from '@angular/core';
+
+export class PsToolkitUiConfigService{
+  constructor(@Inject('environment') public environment: any,
+              @Inject('strings') public strings: any,
+              @Inject('currentLang') public currentLang: string) {
+  }
+}

package/src/public-api.ts

@@ -0,0 +1,53 @@
+/*
+ * Public API Surface of ps-toolkit-ui
+ */
+
+export * from './lib/ps-toolkit-ui.module';
+export * from './lib/components/accordion/accordion.component';
+export * from './lib/components/alert/alert.component';
+export * from './lib/components/confirm/confirm.component';
+export * from './lib/components/footer/footer.component';
+export * from './lib/components/form/bank-card/form.bank-card.component';
+export * from './lib/components/form/button/form.button.component';
+export * from './lib/components/form/car/search/form.car.search.component';
+export * from './lib/components/form/car/form.car.component';
+export * from './lib/components/form/checkbox/form.checkbox.component';
+export * from './lib/components/form/date/form.date.component';
+export * from './lib/components/form/datetime/form.datetime.component';
+export * from './lib/components/form/file/form.file.component';
+export * from './lib/components/form/finger/form.finger.component';
+export * from './lib/components/form/icon/form.icon.component';
+export * from './lib/components/form/index/form.component';
+export * from './lib/components/form/label/form.label.component';
+export * from './lib/components/form/plaque/select/form.plaque.select.component';
+export * from './lib/components/form/plaque/form.plaque.component';
+export * from './lib/components/form/radio/form.radio.component';
+export * from './lib/components/form/select/form.select.component';
+export * from './lib/components/form/table/form.table.component';
+export * from './lib/components/form/textarea/form.textarea.component';
+export * from './lib/components/form/textbox/form.textbox.component';
+export * from './lib/components/form/time/form.time.component';
+export * from './lib/components/form/tree/form.tree.component';
+export * from './lib/components/header/sub/sub.header.component';
+export * from './lib/components/header/header.component';
+export * from './lib/components/modal/modal.component';
+export * from './lib/components/notfound/notfound.component';
+export * from './lib/components/sidebar/sidebar.component';
+export * from './lib/components/steps/steps.component';
+export * from './lib/components/table/table.component';
+export * from './lib/components/tooltip/tooltip.component';
+export * from './lib/components/layout/layout.component';
+export * from './lib/components/loading/loading.component';
+export * from './lib/components/base.component';
+export * from './lib/classes/login.class';
+export * from './lib/classes/enum.class';
+export * from './lib/classes/form.class';
+export * from './lib/classes/helper.class';
+export * from './lib/classes/lang.class';
+export * from './lib/classes/modal.class';
+export * from './lib/classes/permission.class';
+export * from './lib/classes/request.class';
+export * from './lib/classes/sidebar.class';
+export * from './lib/classes/steps.class';
+export * from './lib/classes/table.class';
+export * from './lib/classes/chart.class';

package/src/test.ts

@@ -0,0 +1,26 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js/dist/zone';
+import 'zone.js/dist/zone-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): {
+    keys(): string[];
+    <T>(id: string): T;
+  };
+};
+
+// 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,25 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "target": "es2015",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": [],
+    "lib": [
+      "dom",
+      "es2018"
+    ]
+  },
+  "angularCompilerOptions": {
+    "skipTemplateCodegen": true,
+    "strictMetadataEmit": true,
+    "enableResourceInlining": 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": {
+    "enableIvy": false
+  }
+}

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/tslint.json

@@ -0,0 +1,17 @@
+{
+  "extends": "../../tslint.json",
+  "rules": {
+    "directive-selector": [
+      true,
+      "attribute",
+      "lib",
+      "camelCase"
+    ],
+    "component-selector": [
+      true,
+      "element",
+      "lib",
+      "kebab-case"
+    ]
+  }
+}