sidesys-generic-ui 0.0.19 → 0.0.21

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

@@ -0,0 +1,87 @@
+import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
+import { STableActionColumn } from '../../public-api';
+import { STableColumn, STableContent, STableHeader, STableRow } from './s-table-content';
+
+@Component({
+  selector: 's-table',
+  templateUrl: './s-table.component.html',
+  styleUrls: ['./s-table.component.scss']
+})
+export class STableComponent implements OnInit {
+
+  @Input() content?: STableContent;
+  @Input() actions: STableActionColumn = {} as STableActionColumn;
+  @Input() showSearch: boolean = false;
+
+
+  @Input() editIcon: string = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABmJLR0QAAAAAAAD5Q7t/AAAACXBIWXMAAABgAAAAYADwa0LPAAABAklEQVRYw+3XO0rEUBQG4E+tXIFgq/YOxsbKQt2AYGPnJmxnO+7CzkawmwVYykycXiEWSWCMiY9xTpKB/HCq5HK/+yRhyJD/Zaulfg5wgxekXQ96hCkyvOK4L5iyOkPtypcnq6lZgW094wZQidqvNojY1AlOMME9NnBa8942nvEQOSOJfI+84eqHmZphLxIzKjopO3zH9cLzW583dtIm5jtUGo050nyaMl+Xb6dLzCLqMhJC8zLVVVrgQzHVG3htMOGnqTeYwwGzAkz4DTxg1gbz2xt4qoUvv3GXM7O5ZLs5zvHYB1AYZhlQKOavoDkuIjHkfwTVnBVVzR2eIjFDhqwiH1eL2HgXf5SDAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDIyLTA1LTE2VDE2OjQzOjM1KzAwOjAwcsJeAQAAACV0RVh0ZGF0ZTptb2RpZnkAMjAyMi0wNS0xNlQxNjo0MzozNSswMDowMAOf5r0AAAAASUVORK5CYII=';
+  @Input() deleteIcon: string = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABmJLR0QAAAAAAAD5Q7t/AAAACXBIWXMAAABgAAAAYADwa0LPAAAArUlEQVRYw+2XsQ3CMBBFHxQRbECfGRgjgzABbdpMkEGomCGsQJ8qNUqTFEHpHNvhZFz8J7myfP/5ZBcHQvzGYee5E3ADCsf+CLTAJ8UlCuABTJ71BM7W4XVAcOyqtwKPKVoaQ3ZC2RH6y+5GeY2V0JSqAdm9IQlJSEIS+jcSkpCEJORgNMgKqhEq9DIQ6gxqrFyBgf2z2PCt4SVmlL4AFVBGXubNMun2lh0SwsUMSS46T+UUDI0AAAAldEVYdGRhdGU6Y3JlYXRlADIwMjItMDUtMTZUMTY6NDM6NDUrMDA6MDB4B1cYAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDIyLTA1LTE2VDE2OjQzOjQ1KzAwOjAwCVrvpAAAAABJRU5ErkJggg==';
+  @Input() blockIcon: string = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAA/QAAAP0B4nuDkwAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAIYSURBVFiFzZcxS2NBEMd/ayRJdbWBw8YiiORLXBcLxeLAD5TvkJSHjcjBcV5xjRCwUxEbi+NsPUghXhGxuBw4FjvCy77ZTV5uc7owzbyZ/3/ezuzOrBMR5lnOuQbwAdgFNoGWCsBI5QdwDAxF5M9cwCKSFCXpA2NA5pSx+rRm4ieIm0APeKxAHMqjYjQrBQCsAWf/QBzKGbBmcbmwBpxzHeA78D6RuTHwUwWgrfIu4fML2BaR6ymt8ee3kb/4CxwAnUTaOsAnYBLBuA13Isx5bNu/AuuzCqqAtQHcJ9LRtALoRRyOgNUK5HX8UUzVRG8qAPxRs6r9EKhlJn85Ha1iAH3D6EtG8t+Grv9yABqUL5knoJ2J/BjYUszwsmoAdA2nk4zkdbUbGt+7AAPjw15OcrXdN2wGAKeBcjRP7quQF+zvArtTgJtAeZWbvOB3HtjeADwEystlkKvvRWD/sEJ5PRk6AJxzdeAzsGN8/gZ8FJFJzB8o8a3gc15csiRyK4ARlIvwDruAFtr2AkZNCUtFaB3D/ZzkirNn+A/AvoiGOckV68TA6EL8Kt7KSN4mdhUnmpHVQBYhr+EbW4jjm5EaxdpxDvJDA2e6HatxbCBZlHwVP8xYWNMDiTqkRrJ7YKMC+Tp+jLOw7JFMHVND6QQ/cM4aSg/wA6yFURpK39ZYHuzEf3mYpPL4ek+zIJClPk5LNRBby3qePwPIfowgITOwcQAAAABJRU5ErkJggg==';
+
+  @Output() searchEvent = new EventEmitter<string>();
+  @Output() editEvent = new EventEmitter<STableRow>();
+  @Output() deleteEvent = new EventEmitter<STableRow>();
+  @Output() blockEvent = new EventEmitter<STableRow>();
+  @Output() toggleSwitchEvent = new EventEmitter<STableRow>();
+
+  constructor() { }
+
+  ngOnInit(): void {
+    if ((this.actions.edit || this.actions.delete || this.actions.block) && this.content) {
+      this.content.headers.push({
+        text: this.actions.text,
+        key: 'STableActionColumn',
+        flex: this.actions.flex
+      } as STableHeader);
+    }
+  }
+
+  getRowColumn(r: STableRow, c: STableHeader) {
+    var x = r.columns.filter(col => col.key == c.key)[0];
+    return x.value;
+  }
+
+  getRowColumnBool(r: STableRow, c: STableHeader): boolean {
+    var x = r.columns.filter(col => col.key == c.key)[0];
+
+    if (typeof x.value == 'boolean') {
+      return x.value
+    }
+
+    return false;
+  }
+
+  onSearch(event: string) {
+    this.searchEvent.next(event);
+  }
+
+  editClick(row: STableRow) {
+    if (!row.readonly) {
+      this.editEvent.next(row);
+    }
+  }
+
+  deleteClick(row: STableRow) {
+    if (!row.readonly) {
+      this.deleteEvent.next(row);
+    }
+  }
+
+  blockClick(row: STableRow) {
+    if (!row.readonly) {
+      this.blockEvent.next(row);
+    }
+  }
+
+  onToggleSwitch(switchEvent: boolean, key: string, row: STableRow) {
+    if (!row.readonly) {
+      row.columns.forEach(c => {
+        if (c.key == key) {
+          c.value = switchEvent;
+        }
+      });
+
+      this.toggleSwitchEvent.emit(row);
+    }
+  }
+}

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

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { STableComponent } from './s-table.component';
+import { STextSearchModule } from '../text-search';
+import { SToggleSwitchModule } from '../toggle-switch';
+
+@NgModule({
+  declarations: [STableComponent],
+  imports: [CommonModule, STextSearchModule, SToggleSwitchModule],
+  exports: [STableComponent]
+})
+export class STableModule { }

package/src/lib/table-t/s-tablet.component.html

@@ -0,0 +1,18 @@
+<ng-container *ngTemplateOutlet="caption"></ng-container>
+<table class="tabla-sidesys p-datatable">
+    <thead>
+        <ng-container *ngTemplateOutlet="header"></ng-container>
+    </thead>
+    <tbody>
+
+        <ng-container *ngTemplateOutlet="loading ? bodyloading : null" >
+        </ng-container>
+        
+        <ng-template *ngTemplateOutlet="!loading ? body : null">
+            <ng-content></ng-content>
+        </ng-template>
+    </tbody>
+</table>
+
+
+

package/src/lib/table-t/s-tablet.component.scss

@@ -0,0 +1,41 @@
+//TABLAS DE LISTADO CUSTOM PARA SIDESYS
+.tabla-sidesys {
+  border-collapse: collapse;
+  width: 100%;
+  thead {
+    background-color: var(--neutrals-1200);
+    font-weight: bold;
+  }
+  thead th {
+    vertical-align: middle;
+    color: var(--secondary-600);
+    font-size: 0.875rem;
+    line-height: 1.375rem;
+    letter-spacing: 0.25px;
+    font-weight: 700;
+    text-align: left;
+  }
+  thead th:last-of-type {
+    text-align: center;
+  }
+  tbody tr td,
+  thead tr th {
+    padding: 14px;
+    height: 55px;
+    vertical-align: middle;
+  }
+  th,
+  td {
+    box-sizing: border-box;
+    border: none;
+    box-shadow: inset 0px -1px 0px var(--neutrals-900);
+  }
+  td,
+  thead tr {
+    height: 55px;
+  }
+
+  .p-element.p-sortable-column {
+    cursor: pointer;
+  }
+}

package/src/lib/table-t/s-tablet.component.spec.ts

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

package/src/lib/table-t/s-tablet.component.ts

@@ -0,0 +1,223 @@
+import {
+  AfterContentInit,
+  Component,
+  Directive,
+  EventEmitter,
+  HostListener,
+  Input,
+  OnChanges,
+  OnInit,
+  Output,
+  SimpleChanges,
+  TemplateRef,
+  ViewEncapsulation
+} from '@angular/core';
+
+@Component({
+  selector: 's-tablet',
+  templateUrl: './s-tablet.component.html',
+  styleUrls: ['./s-tablet.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+})
+
+export class STabletComponent implements OnInit , OnChanges {
+
+  @Output() updateDataEvent = new EventEmitter<any>();
+  @Input() data: any;
+  @Input() loading: boolean = false;
+  @Input() caption!: TemplateRef<any>;
+  @Input() header!: TemplateRef<any>;
+  @Input() bodyloading!: TemplateRef<any>;
+  @Input() body!: TemplateRef<any>;
+  initData : any;
+
+  constructor() {}
+  
+  ngOnInit(): void {
+    this.initData = this.data
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    // console.log("Se detecto un cambio "  , changes)
+    // console.log("Se detecto un cambio "  , this.data)
+  }
+  
+  updateData(_dataSort?:any): void {
+    this.updateDataEvent.next(_dataSort);
+  }
+
+  restartData(): void {
+    this.updateDataEvent.next(this.initData);
+  }
+
+}
+
+
+@Directive({
+  selector: '[SSorteableColumn]',
+  host: {
+      'class': 'p-element',
+      '[class.p-sortable-column]': 'isEnabled()',
+      '[attr.aria-sort]': 'sortOrder'
+  },
+})
+export class SortableColumn implements OnInit {
+
+  @Input("SSorteableColumn") field!: string;
+  @Input() pSortableColumnDisabled: boolean = false;
+
+  _dataSort: any;
+  sorted: boolean = false;
+  sortOrder!: string;
+
+  constructor(
+    public data: STabletComponent,
+    ) {
+      this._dataSort = this.data.data;
+    }
+    
+    ngOnInit() {}
+
+  compareValues(key:any, order = 'asc') {
+    return function innerSort(a: { [x: string]: any; hasOwnProperty: (arg0: any) => any; }, b: { [x: string]: any; hasOwnProperty: (arg0: any) => any; }) {
+      if (!a.hasOwnProperty(key) || !b.hasOwnProperty(key)) {
+        // property doesn't exist on either object
+        return 0;
+      }
+
+      const varA = (typeof a[key] === 'string')
+        ? a[key].toUpperCase() : a[key];
+      const varB = (typeof b[key] === 'string')
+        ? b[key].toUpperCase() : b[key];
+
+      let comparison = 0;
+      if (varA > varB) {
+        comparison = 1;
+      } else if (varA < varB) {
+        comparison = -1;
+      }
+      return (
+        (order === 'desc') ? (comparison * -1) : comparison 
+      );
+    };
+  }
+
+  updateSortState() {
+      this.sorted = !this.sorted;
+      if(this.sorted){
+        this._dataSort.sort(this.compareValues(this.field, 'asc'))
+      }else{
+        this._dataSort.sort(this.compareValues(this.field, 'desc'))
+      }
+  }
+
+  @HostListener('click', ['$event'])
+  onClick(event: MouseEvent) {
+      if (this.isEnabled()) {
+          this.updateSortState();
+      }
+  }
+
+  isEnabled() {
+      return this.pSortableColumnDisabled !== true;
+  }
+
+}
+
+
+@Directive({
+  selector: '[SInputSearch]',
+  host: {
+    'class': 's-element-search',
+  },
+})
+export class InputSearch  implements OnInit {
+
+  @Input("SInputSearch") fields!: string;
+
+  _dataFilter: any;
+  inputTimeout?: any;
+  dataBeforeSearch: any;
+
+  constructor(private data: STabletComponent) {
+    this._dataFilter = data.data;
+  }
+
+  ngOnInit() {
+  }
+
+  ngOnChanges(res: any) {
+    // console.log("From search NG CHANGE" , this._dataFilter)
+  }
+
+  filterItems(query:any ) {
+      let results = [
+        ...this.data.data.filter((item:any) => {
+          const regexp = new RegExp(query, 'i');
+          const properties = Object.keys(item);
+          return properties.some((property) => regexp.test(item[property]));
+        }),
+      ];
+      this._dataFilter = results
+      this.data.updateData(this._dataFilter)
+  }
+
+  @HostListener('keyup', ['$event.target'])
+  onEnterKey(e: any) {
+
+    if(this.inputTimeout){
+      clearTimeout(this.inputTimeout);
+    }
+    this.inputTimeout = setTimeout(() => {
+      this.filterItems(e.value)
+    }, 1000, null);
+    
+    if(e.value == ''){
+      this.data.restartData()
+    }
+
+  }
+
+  @HostListener('search', ['$event.target'])
+  search(e: any) {
+    if(e.value == ''){
+      this.data.restartData()
+    }
+  }
+
+}
+
+
+@Directive({
+  selector: '[STemplate]'
+})
+
+export class STemplate implements  AfterContentInit {
+
+  @Input("STemplate") field!: string;
+  
+
+  constructor(
+    private element: TemplateRef<any>,
+    public table: STabletComponent
+    ) {}
+
+  ngAfterContentInit(): void {
+    switch (this.field) {
+      case "caption":
+      this.table.caption = this.element
+      break;
+      case "header":
+      this.table.header = this.element
+      break;
+      case "body":
+      this.table.body = this.element
+      break;
+      case "bodyloading":
+      this.table.bodyloading = this.element
+      break;
+      default:
+      break;
+    }
+  }
+}

package/src/lib/table-t/s-tablet.module.ts

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { InputSearch, SortableColumn, STabletComponent , STemplate } from './s-tablet.component';
+
+@NgModule({
+  declarations: [STabletComponent ,InputSearch , SortableColumn , STemplate ],
+  imports: [CommonModule],
+  exports: [STabletComponent , InputSearch , SortableColumn  , STemplate]
+})
+export class STabletModule { }

package/{lib/tabs/index.d.ts → src/lib/tabs/index.ts}

@@ -1,3 +1,3 @@
 export * from './s-tabs.module';
 export * from './s-tabs.component';
-export * from './models';
+export * from './models';

package/{lib/tabs/models/configTabs.interface.d.ts → src/lib/tabs/models/configTabs.interface.ts}

@@ -1,4 +1,4 @@
 export interface IConfigTabs {
     width?: number;
     background?: boolean;
-}
+}

package/{lib/tabs/models/tab.interface.d.ts → src/lib/tabs/models/tab.interface.ts}

@@ -4,4 +4,4 @@ export interface ITab {
     value?: string;
     highlight?: boolean;
     icon?: string;
-}
+}

package/src/lib/tabs/s-tabs.component.html

@@ -0,0 +1,8 @@
+<div class="s-tabs" *ngIf="tabsConfig" [ngClass]="{'background-primary': configTabs?.background}">
+    <div class="s-tabs__container" [style.width.%]="configTabs?.width">
+        <div class="s-tabs__content" *ngFor="let tab of tabsConfig" [ngClass]="{'selected': tab.selected, 'highlight': tab.highlight}" (click)="selectTab(tab)">
+            <s-icon-mat class="s-tabs__icon" *ngIf="tab.icon">{{tab.icon}}</s-icon-mat>
+            <span *ngIf="tab.text" class="s-tabs__text">{{tab.text}}</span>
+        </div>
+    </div>
+</div>

package/src/lib/tabs/s-tabs.component.scss

@@ -0,0 +1,49 @@
+.s-tabs {
+    border-radius: 0.5rem;
+    box-shadow: var(--E100);
+    margin-bottom: 1rem;
+    display: block;
+
+    &__icon {
+        font-size: 2rem;
+        margin-right: 0.5rem;
+    }
+
+    &__container {
+        display: flex;
+        justify-content: center;
+    }
+
+    &__content {
+        align-items: center;
+        color: var(--secondary-600);
+        cursor: pointer;
+        display: flex;
+        flex-basis: 50%;
+        flex-grow: 1;
+        font-size: 1rem;
+        justify-content: center;
+        line-height: 2rem;
+        padding: 0.8rem 0.5rem;
+        text-align: center;
+
+        &.selected {
+            border-bottom: 1px solid var(--primary-600);
+            color: var(--primary-600);
+        }
+
+        &.highlight {
+            background-color: var(--primary-200);
+            border-top-left-radius: 0.5rem;
+            border-top-right-radius: 0.5rem;
+        }
+    }
+
+    &__text {
+        font-weight: 700;
+    }
+}
+
+.background-primary { 
+    background-color: var(--primary-100);
+}

package/src/lib/tabs/s-tabs.component.spec.ts

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

package/src/lib/tabs/s-tabs.component.ts

@@ -0,0 +1,38 @@
+import { Component, EventEmitter, Input, OnInit, Output, ViewEncapsulation } from '@angular/core';
+import { IConfigTabs, ITab } from './models';
+
+@Component({
+  selector: 's-tabs',
+  templateUrl: './s-tabs.component.html',
+  styleUrls: ['./s-tabs.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+
+})
+
+export class STabsComponent implements OnInit {
+
+  @Input() tabs?: ITab[];
+  @Input() configTabs?: IConfigTabs;
+  @Output() eventSelect = new EventEmitter<ITab>();
+
+  public tabsConfig?: ITab[];
+
+  constructor(){}
+
+  ngOnInit(): void {
+    this.tabsConfig = this.tabs;
+  }
+
+  getBackground(): boolean {
+    return !!this.configTabs?.background || false;
+  }
+
+  selectTab(tab: ITab){
+    if (tab.selected) {
+      return;
+    }
+    this.tabs?.forEach(tab => (tab.selected = false));
+    tab.selected = true;
+    this.eventSelect.emit(tab);
+  }
+}

package/src/lib/tabs/s-tabs.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { STabsComponent } from './s-tabs.component';
+import { SIconMaterialModule } from '../icon-material/s-icon-material.module';
+
+
+@NgModule({
+  declarations: [
+    STabsComponent
+  ],
+  imports: [
+    CommonModule,
+    SIconMaterialModule
+  ],
+  exports: [STabsComponent]
+})
+export class STabsModule { }

package/src/lib/tag/index.ts

@@ -0,0 +1,2 @@
+export * from './s-tag.module';
+export * from './s-tag.component';

package/src/lib/tag/s-tag.component.html

@@ -0,0 +1,3 @@
+<span class="s-tag {{type}} {{size}} {{disabled ? 'disabled' : ''}}">
+    <ng-content></ng-content>
+</span>