sidesys-generic-ui 0.0.19 → 0.0.21

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

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

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

@@ -0,0 +1,21 @@
+import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 's-spinner',
+  templateUrl: './s-spinner.component.html',
+  styleUrls: ['./s-spinner.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+})
+export class SSpinnerComponent implements OnInit {
+
+  @Input() type: "one" | "two" | "tree" | "four" | "five" | "six" | "seven" = "one"
+  @Input() size:  "md" | "lg" | "xl" = "lg"
+  @Input() invert: boolean = false;
+  @Input() expand: boolean = false;
+
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+}

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

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SSpinnerComponent } from './s-spinner.component';
+
+@NgModule({
+  declarations: [
+    SSpinnerComponent
+  ],
+  imports: [
+    CommonModule
+  ],
+  exports: [
+    SSpinnerComponent
+  ]
+})
+export class SSpinnerModule { }

package/src/lib/stepper/index.ts

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

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

@@ -0,0 +1,3 @@
+<div>
+   SStepperComponent
+</div>

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

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

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

@@ -0,0 +1,19 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component({
+  selector: 's-stepper',
+  templateUrl: './s-stepper.component.html',
+  styleUrls: ['./s-stepper.component.css']
+})
+
+export class SStepperComponent implements OnInit {
+  // @Input() icon!: string;
+ 
+
+  constructor(){}
+
+  ngOnInit(): void {
+    
+  
+  }
+}

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

@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SStepperComponent } from './s-stepper.component';
+
+
+@NgModule({
+  declarations: [
+    SStepperComponent
+  ],
+  imports: [
+    CommonModule
+  ],
+  exports: [SStepperComponent]
+})
+export class SStepperModule { }

package/{lib/sub-menu/index.d.ts → src/lib/sub-menu/index.ts}

@@ -1,3 +1,3 @@
 export * from './s-sub-menu.module';
 export * from './s-sub-menu.component';
-export * from './s-sub-menu-model';
+export * from './s-sub-menu-model';

package/src/lib/sub-menu/s-sub-menu-model.ts

@@ -0,0 +1,33 @@
+export class SSubMenu {
+    public header?: SSubMenuHeader;
+    public items!: SSubMenuItem[]
+}
+
+export class SSubMenuItem {
+    id?: any ; //Id en caso que sea necesario
+    title?: string ; //Titulo
+    help?: string; //Texto de ayuda que se muestra a la derecha de las opciones
+    icon?: boolean; //Si tiene icono o no
+    iconName?: string; // El nombre del icono
+    link?: string; //URL del link
+    hidden?:boolean; //Oculta la opcion
+    inputType?: string //radio , checkbox
+    value?:boolean;//Valor del inputType
+    separate?: boolean = false//Define si va un espacio para separar.
+    action?: any;//Llamada a funcion desde el sub menu. ej: this.function 
+}
+
+export class SSubMenuHeader {
+    type!: string; // Title o User
+    title?: string;
+    user?: SUser = {};
+}
+
+export class SUser {
+        name?: string;
+        email?: string;
+        url?: string;
+        status?: string;
+        display?: string;
+        letters?: string;
+}

package/src/lib/sub-menu/s-sub-menu.component.html

@@ -0,0 +1,77 @@
+<div>
+   <ul class="sub-menu66-content-ul">
+
+       <ng-container *ngFor="let item of menu.items ; index as i">
+           <li *ngIf="!item.hidden" title="{{item.title}}">
+
+                  <!-- Header -->
+                  <ng-container *ngIf="menu.header && i == 0">
+                     <div *ngIf="menu.header.type == 'title'" class="sub-menu66-header">
+                        {{menu.header.title}}
+                     </div>
+                     <div *ngIf="menu.header.type == 'user'" class="content-s-profile-group66">
+                        <s-profile-group size="m" [user]="menu.header.user"></s-profile-group>
+                     </div>
+                     <div class="sub-menu66-separate"></div>
+                  </ng-container>
+
+                  <!-- Con Link -->
+                  <ng-container *ngIf="item.link">
+                     <a routerLink="{{item.link? item.link : null}}" routerLinkActive="active" class="sub-menu66-content-option">
+                           <div class="sub-menu66-content-left">
+                              <s-icon-mat *ngIf="item.icon && item.iconName" class="sub-menu66-icon">{{item.iconName}}</s-icon-mat>
+                              <span class="sub-menu66-title">{{item.title}}</span>
+                           </div>
+                           <div *ngIf="item.help" class="sub-menu66-content-right">
+                              <label class="sub-menu66-item-help">{{item.help}}</label>
+                           </div>
+                     </a>
+                  </ng-container>
+
+                  <!-- Con inputType Checkbox o Radio -->
+                  <ng-container *ngIf="(item.inputType && item.action) || item.inputType">
+                  
+                        <div class="sub-menu66-content-option cursor">
+                           <div class="sub-menu66-content-left">
+                              <s-radio *ngIf="item.inputType == 'radio'" model="'sub-menu-group'" (emitSelection)="changeItem(item)" (click)="item.action ? item.action() : null"></s-radio>
+                              <s-checkbox *ngIf="item.inputType == 'checkbox'" [model]="item.value" (emitSelection)="changeItem(item)" (click)="item.action ? item.action() : null"></s-checkbox>
+                              <s-icon-mat *ngIf="item.icon && item.iconName" class="sub-menu66-icon">{{item.iconName}}</s-icon-mat>
+                              <span class="sub-menu66-title cursor-normal">{{item.title}}</span>
+                           </div>
+                        </div>
+                  </ng-container>
+
+                  <!-- Action -->
+                  <ng-container *ngIf="item.action && !item.inputType">
+                     <button style="width:100%;border:none;padding:0;background-color: inherit;">
+                        <div class="sub-menu66-content-option cursor" (click)="item.action()">
+                           <div *ngIf="item.action" class="sub-menu66-content-left">
+                                 <s-icon-mat *ngIf="item.icon && item.iconName" class="sub-menu66-icon">{{item.iconName}}</s-icon-mat>
+                                 <span class="sub-menu66-title">{{item.title}}</span>
+                           </div>
+                        </div>
+                     </button>
+                  </ng-container>
+
+                   <!-- Solo Label -->
+                   <ng-container *ngIf="!item.action && !item.inputType && !item.link && !item.separate">
+                     <button style="width:100%;border:none;padding:0;background-color: inherit;" (click)="selectItem(item)">
+                        <div class="sub-menu66-content-option cursor">
+                           <div class="sub-menu66-content-left">
+                                 <s-icon-mat *ngIf="item.icon && item.iconName" class="sub-menu66-icon">{{item.iconName}}</s-icon-mat>
+                                 <span class="sub-menu66-title">{{item.title}}</span>
+                           </div>
+                        </div>
+                     </button>
+                  </ng-container>
+
+                  <!-- Espaciado -->
+                  <ng-container *ngIf="item.separate"> 
+                     <div class="sub-menu66-separate"></div>
+                  </ng-container>
+
+         </li>
+
+      </ng-container>
+   </ul>
+</div>

package/src/lib/sub-menu/s-sub-menu.component.scss

@@ -0,0 +1,99 @@
+.sub-menu66-content-ul{
+    box-sizing: border-box;
+    padding: 0px;
+    background: var(--neutrals-1200);
+    border: 1px solid #F2F4F7;
+    box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
+    border-radius: 8px;
+    .sub-menu66-header{
+        font-size:0.875rem;
+        font-weight: 700;
+        color: var(--secondary-600);
+        padding:13px;
+        margin-left: 7px;
+        cursor: default;
+    }
+    .content-s-profile-group66{
+        margin: 12px 16px;
+    }
+}
+
+.sub-menu66-content-option{
+    display: flex;
+    justify-content: space-between;
+    height: 44px;
+    padding: 0 16px;
+    font-size: 1rem;
+    color: var(--secondary-600);
+    text-decoration: none;
+}
+.sub-menu66-content-option:hover{
+    background-color: var(--neutrals-1100);
+}
+
+.sub-menu66-content-option:last-child:hover{
+    border-bottom-left-radius: 10px;
+    border-bottom-right-radius: 10px;
+}
+
+
+.sub-menu66-content-right{
+    display: flex;
+    align-items: center;
+    justify-content: space-evenly;
+    margin-left: 8px;
+    color: var(--primary-600);
+
+    .sub-menu66-item-help{
+        font-size: 0.75rem;
+        color: var(--secondary-500)
+    }
+}
+
+.sub-menu66-content-left {
+    display: flex;
+    align-items: center;
+    justify-content: space-evenly;
+    margin-right: 8px;
+
+    .sub-menu66-title{
+        font-size: 0.875rem;
+        color: var(--secondary-600)
+    }
+    .sub-menu66-icon span{
+        color: var(--primary-600);
+        font-size: 1.3rem;
+    }
+    s-icon-mat.sub-menu66-icon{
+        margin-right: 10px;
+    }
+    s-checkbox{
+        line-height: 12px;
+        margin-right: 10px;
+    }
+    s-checkbox input[type="checkbox"]{
+        cursor: pointer;
+    }
+    s-radio .radio-c-pointer{
+        padding:0;
+    }
+    s-radio input[type="radio"]{
+        margin-right: 10px;
+        margin-left: 5px;
+        cursor: pointer;
+    }
+    .sub-menu66-title.cursor-normal{
+        cursor: default;
+    }
+}
+
+.sub-menu66-separate{
+    height: 1px;
+    background-color: var(--secondary-100);
+}
+
+.sub-menu66-content-ul li a.active{
+    .sub-menu66-title{
+        color: var(--primary-600);
+    }
+}

package/src/lib/sub-menu/s-sub-menu.component.spec.ts

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

package/src/lib/sub-menu/s-sub-menu.component.ts

@@ -0,0 +1,56 @@
+import { Component, EventEmitter, HostListener, Input, OnInit, Output, ViewEncapsulation } from '@angular/core';
+import { SSubMenu, SSubMenuItem } from './s-sub-menu-model';
+
+@Component({
+  selector: 's-sub-menu',
+  templateUrl: './s-sub-menu.component.html',
+  styleUrls: ['./s-sub-menu.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+})
+
+export class SSubMenuComponent implements OnInit {
+
+  private menuOpened: boolean = false;
+  private clickInside: boolean = false;
+  @Input() menu!: SSubMenu;
+  @Output() changeMenuEvent = new EventEmitter<any>();
+  @Output() closeMenuEvent = new EventEmitter<any>();
+
+  constructor() { }
+
+  ngOnInit(): void { }
+  
+  @HostListener("click")
+  clicked() {
+    this.clickInside = true;
+  }
+  @HostListener("document:click")
+  clickedOut() {
+    if(this.menuOpened && !this.clickInside) this.closeMenuEvent.emit('close');
+    this.clickInside = false;
+  }
+
+  changeItem(item: SSubMenuItem) {
+    if (item.inputType == 'checkbox') {
+      item.value = !item.value
+    }
+    else {
+      for (let i = 0; i < this.menu.items.length; i++) {
+        this.menu.items[i].value = false;
+      }
+      item.value = true
+    }
+
+    this.changeMenuEvent.emit(this.menu.items);
+  }
+
+  selectItem(item: SSubMenuItem) {
+    this.changeMenuEvent.emit(item);
+  }
+
+  ngAfterViewInit() {
+    setTimeout(() => {
+      this.menuOpened = true;
+    }, 250);
+  }
+}

package/src/lib/sub-menu/s-sub-menu.module.ts

@@ -0,0 +1,25 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SSubMenuComponent } from './s-sub-menu.component';
+import { SIconMaterialModule } from '../icon-material';
+import { RouterModule } from '@angular/router';
+import { SCheckboxModule } from '../checkbox';
+import { SRadioModule } from '../radio/s-radio.module';
+import { SProfileGroupModule } from '../avatar/components/profile-group';
+
+
+@NgModule({
+  declarations: [
+    SSubMenuComponent
+  ],
+  imports: [
+    CommonModule,
+    SIconMaterialModule,
+    RouterModule,
+    SCheckboxModule,
+    SRadioModule,
+    SProfileGroupModule
+  ],
+  exports: [SSubMenuComponent]
+})
+export class SSubMenuModule { }

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

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

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

@@ -0,0 +1,30 @@
+export class STableContent {
+    headers: STableHeader[] = [];
+    rows: STableRow[] = [];
+}
+
+export class STableHeader {
+    text: string = '';
+    key: string = '';
+    flex: number = 1;
+    isEnableColumn = false;
+    disable: boolean = false;
+}
+
+export class STableColumn {
+    value: string | boolean = '';
+    key: string = '';
+}
+
+export class STableRow {
+    readonly: boolean = false;
+    columns: STableColumn[] = [];
+}
+
+export class STableActionColumn {
+    text: string = ' ';
+    edit: boolean = false;
+    delete: boolean = false;
+    block: boolean = false;
+    flex: number = 0.3;
+}

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

@@ -0,0 +1,24 @@
+<s-text-search *ngIf="showSearch" (searchEvent)="onSearch($event)"></s-text-search>
+<div *ngIf="content && content.headers" class="table-headers">
+    <div class="table-header-item" *ngFor="let h of content.headers" [ngStyle]="{'flex': h.flex}">
+        {{ h.text }}
+    </div>
+</div>
+<div *ngIf="content && content.rows" class="table-rows">
+    <div class="table-row" *ngFor="let r of content.rows">
+        <div class="table-row-item" *ngFor="let h of content.headers" [ngClass]="{'table-row-readonly': r.readonly}"  [ngStyle]="{'flex': h.flex}">
+            <span *ngIf="h.key != 'STableActionColumn' && !h.isEnableColumn">
+                {{ getRowColumn(r, h) }}
+            </span>
+            <div *ngIf="h.isEnableColumn" [ngStyle]="{'opacity': r.readonly ? 0.5 : 1}">
+                <s-toggle-switch [disabled]="h.disable || r.readonly" [value]="getRowColumnBool(r, h)" (changeEvent)="onToggleSwitch($event, h.key, r)">
+                </s-toggle-switch>
+            </div>
+            <div class="action-icons" *ngIf="h.key == 'STableActionColumn'" [ngStyle]="{'opacity': r.readonly ? 0.5 : 1}">
+                <img class="action-icon" *ngIf="actions.edit" [src]="editIcon" alt="edit" (click)="editClick(r)">
+                <img class="action-icon" *ngIf="actions.delete" [src]="deleteIcon" alt="edit" (click)="deleteClick(r)">
+                <img class="action-icon" *ngIf="actions.block" [src]="blockIcon" alt="edit" (click)="blockClick(r)">
+            </div>
+        </div>
+    </div>
+</div>

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

@@ -0,0 +1,49 @@
+
+.table-headers {
+    background: var(--neutrals-1200);
+    display: flex;
+    color: var(--neutrals-100);
+    border: 1px solid var(--neutrals-900);
+}
+
+.table-header-item {
+    padding: 10px 20px;
+}
+
+.table-header-item:not(:last-of-type) {
+    border-right: 1px solid var(--neutrals-900);
+}
+
+.table-rows {
+    background: var(--neutrals-1200);
+    border: 1px solid var(--neutrals-900);
+    color: var(--text);
+}
+
+.table-row {
+    display: flex;
+    border-bottom: 1px solid var(--neutrals-900);
+}
+
+.table-row-item {
+    padding: 10px 20px;
+}
+
+.table-row-item:not(:last-of-type) {
+    border-right: 1px solid var(--neutrals-900);
+}
+
+.table-row-readonly {
+    color: var(--neutrals-100) !important;
+}
+
+.action-icons {
+    display: flex;
+    justify-content: space-around;
+}
+
+.action-icon {
+    width: 25px;
+    height: 25px;
+    cursor: pointer;
+}

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

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