sidesys-generic-ui 0.0.19 → 0.0.21

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

@@ -0,0 +1,127 @@
+
+.popup324 {
+    background: rgba($color: #000000, $alpha: 0.5);
+    width: 100vw;
+    height: 100vh;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 5;
+
+
+.popup-card {
+    position: absolute;
+    border-radius: 4px;
+    background: #ffffff;
+}
+
+.popup-title {
+    height: 30px;
+    padding: 17px 20px 17px 20px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.popup-title h4 , .popup-title .popup-close span {
+    color: var(--secondary-600)
+}
+
+.popup-title.error , .popup-title.red {
+    .icon-title span{
+        color: var(--red-600);
+    }
+}
+
+.popup-title.success , .popup-title.green {
+    .icon-title span{
+        color: var(--green-600);
+    }
+}
+
+.popup-title.warning , .popup-title.yellow {
+    .icon-title span{
+        color: var(--yellow-600);
+    }
+}
+
+.popup-title.secondary {
+    color: var(--secondary-600);
+}
+
+.popup-title.primary {
+    color: var(--primary-600);
+}
+
+.popup-title .divisor {
+    display: inline-flex;
+    align-items: center;
+}
+
+.popup-body {
+    width: 100%;
+    overflow-y: auto;
+    color: var(--secondary-600)
+}
+
+.padding-body {
+    padding: 1rem 1rem;
+    padding-right: 0.5rem;
+}
+
+.popup-close {
+    float: right;
+    cursor: pointer;
+}
+
+.popup-footer {
+    position: absolute;
+    bottom: 6px;
+    text-align: right;
+    right: 10px;
+}
+
+.content-footer {
+    width: 100%;
+}
+
+.border-body{
+    border-bottom: 1px solid var(--neutrals-1000);
+    border-top: 1px solid var(--neutrals-1000);
+}
+
+.show70{
+    width: 80% !important;
+    left: 9% !important;
+}
+
+}
+
+
+/*
+Estilo elegante de ScrollBar
+*/
+
+.popup-body::-webkit-scrollbar {
+    width: 20px;
+}
+
+.popup-body::-webkit-scrollbar-track {
+    background-color: transparent;
+}
+
+.popup-body::-webkit-scrollbar-thumb {
+    background-color: #d6dee1;
+}
+
+.popup-body::-webkit-scrollbar-thumb {
+    background-color: #d6dee1;
+    border-radius: 20px;
+}
+
+.popup-body::-webkit-scrollbar-thumb {
+    background-color: #d6dee1;
+    border-radius: 20px;
+    border: 6px solid transparent;
+    background-clip: content-box;
+}

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

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

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

@@ -0,0 +1,125 @@
+import { AfterContentInit, Component, Directive, EventEmitter, HostListener, Input, OnInit, Output, TemplateRef, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 's-popup',
+  templateUrl: './s-popup.component.html',
+  styleUrls: ['./s-popup.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class SPopupComponent implements OnInit {
+  
+  @Input() title: string = '';
+  @Input() type: 'primary' | 'secondary' | 'green' | 'yellow' | 'red'  = 'primary';
+  @Input() iconType: string = '';
+  @Input() borderBody: boolean = false;
+  @Input() width: number = 500;
+  @Input() height: number = 500;
+  @Input() showPopup: boolean = false;
+  @Input() iconCustom: boolean = false;
+  @Input() iconCustomName: string = '';
+  @Input() footer!: TemplateRef<any>;
+  @Input() body!: TemplateRef<any>;
+
+  @Output() closeEvent = new EventEmitter<void>();
+  style: any;
+  show70: boolean = false;
+
+  constructor() { }
+
+  ngOnInit(): void {
+    this.switch();
+  }
+
+  switch(){
+  
+    switch (this.type) {
+      case "primary":
+        this.iconType = ""
+      break;
+      case "secondary":
+        this.iconType = "info"
+      break;
+      case "green":
+        this.iconType = "check_circle"
+      break;
+      case "red":
+        this.iconType = "error"
+      break;
+      case "yellow":
+        this.iconType = "warning"
+      break;
+      default:
+      break;
+    }
+  }
+
+  getCalcPopUp(size:any){
+    return "calc(50% - "+ (size / 2) + "px)"
+  }
+
+  getCalcBody(size:any){
+    return "calc(" + size + "px - 120px)"
+  }
+
+  open() {
+    this.showPopup = true;
+  }
+  
+  close() {
+    this.showPopup = false;
+    this.closeEvent.next();
+  }
+
+  toogle() {
+    this.showPopup = !this.showPopup;
+    if(!this.showPopup){
+      this.closeEvent.next();
+    }
+  }
+
+  //Si se achica la pantalla a menos del ancho definido , se le asigna 70%
+  @HostListener('window:resize', ['$event'])
+  onWindowResize() {
+    if(window.innerWidth <= this.width){
+      this.show70 = true
+    }else{
+      this.show70 = false
+    }
+  }
+
+
+}
+
+
+@Directive({
+  selector: '[STemplatePopup]',
+  host: {
+      // 'class': 's-element-search',
+  },
+})
+export class STemplatePopup implements OnInit , AfterContentInit {
+
+  @Input("STemplatePopup") field!: string;
+
+  constructor(
+    private element: TemplateRef<any>,
+    public content: SPopupComponent,
+    ) {
+  }
+
+  ngOnInit() {
+  }
+
+  ngAfterContentInit(): void {
+    switch (this.field) {
+      case "footer":
+      this.content.footer = this.element
+      break;
+      case "body":
+        this.content.body = this.element
+        break;
+      default:
+      break;
+    }
+  }
+}

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

@@ -0,0 +1,23 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SPopupComponent, STemplatePopup } from './s-popup.component';
+import { SIconMaterialModule } from '../icon-material/s-icon-material.module';
+import { SButtonModule } from '../button/button.module';
+
+
+@NgModule({
+  declarations: [
+    SPopupComponent,
+    STemplatePopup
+  ],
+  imports: [
+    SButtonModule,
+    CommonModule,
+    SIconMaterialModule,
+  ],
+  exports: [
+    SPopupComponent,
+    STemplatePopup
+  ]
+})
+export class SPopupModule { }

package/src/lib/precode/index.ts

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

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

@@ -0,0 +1,7 @@
+<!-- <div style="position: absolute; "></div> -->
+<pre>
+   <span class="tag">
+      <ng-content></ng-content>
+   </span>
+   <s-button *ngIf="copyId" (click)="copyCode()" style="position: absolute; right: 30px;">Copiar <s-icon-mat>file_copy</s-icon-mat></s-button>
+</pre>

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

@@ -0,0 +1,53 @@
+
+pre {
+    background: rgba(0,0,0,.01);
+    border: 0.5px solid rgba(0,0,0,.2);
+}
+pre {
+    border-radius: 5px;
+    display: block;
+    margin: 8px auto;
+    overflow-x: auto;
+    padding: 20px;
+    white-space: pre-wrap;
+}
+pre {
+    font-size: 14px;
+    background: #031450;
+    display: flex;  
+}
+code, pre {
+    font-family: Roboto Mono,monospace;
+}
+
+code{
+    padding: 0;
+    font-size: 100%;
+    background: transparent;
+}
+
+pre .tag{
+    color: #cffd9d;
+    display: flex;
+    flex-wrap: wrap;
+    margin: 3px 0;
+}
+pre .name{
+    color: #0de9ff;
+}
+
+pre .attr{
+    color: #ff0590
+}
+
+pre .string{
+    color: #58bf0a
+}
+
+pre .tab{
+    margin: 0 20px;
+}
+
+pre .comment{
+    color: #a58094;
+}

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

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

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

@@ -0,0 +1,29 @@
+import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 's-precode',
+  templateUrl: './s-precode.component.html',
+  styleUrls: ['./s-precode.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+
+})
+export class SPrecodeComponent implements OnInit {
+
+  @Input() expand: boolean = false;
+  @Input() copyId?: string;
+
+  constructor() { }
+
+  ngOnInit(): void { }
+
+  async copyCode() {
+    if (this.copyId) {
+      let html = document.getElementById(this.copyId)
+      let text = html?.innerText;
+      if (text) {
+        await navigator.clipboard.writeText(text);
+        alert('Texto copiado');
+      }
+    }
+  }
+}

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

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SPrecodeComponent } from './s-precode.component';
+import { SIconMaterialModule } from '../icon-material';
+import { SButtonModule } from '../button';
+
+@NgModule({
+  declarations: [
+    SPrecodeComponent
+  ],
+  imports: [
+    CommonModule,
+    SIconMaterialModule,
+    SButtonModule
+  ],
+  exports: [
+    SPrecodeComponent
+  ]
+})
+export class SPrecodeModule { }

package/src/lib/progressbar/index.ts

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

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

@@ -0,0 +1,15 @@
+<div class="pregress-bar">
+   <div class="bar">
+      <div class="barra-background"></div>
+      <div class="barra-progresso"
+         [style.width.%]="percentage"
+         [ngClass]="color"
+         [style.background]="customColor"
+         id="bar"
+      ></div>
+   </div>
+   <div class="percentage">
+      <h6 *ngIf="percentage < 100">{{percentage}}%</h6>
+      <s-icon-mat *ngIf="percentage > 99" class="icon-check">done</s-icon-mat>
+   </div>
+</div>

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

@@ -0,0 +1,51 @@
+.pregress-bar{
+    display: flex;
+}
+.bar{
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    width: 100%;
+    margin: 0.3rem 0.5rem 0 0.5rem;
+}
+
+.barra-background, .barra-progresso {
+    border-radius: 0.5rem;
+}
+
+.barra-background {
+    background: #ccc;
+    height: 0.5rem;
+    width: 100%;
+    position: absolute;
+    transform: rotate(180deg);
+}
+
+.barra-progresso {
+    background: rgb(80, 84, 174);
+    height: 0.5rem;
+    position: absolute;
+    transition: all .5s;
+    width: 44%;
+}
+.icon-check{
+    color: var(--green-600);
+    font-size: 1rem;
+    display: flex;
+    margin-top: -0.25rem;
+}
+.red{
+    background: var(--red-600);
+}
+.orange{
+    background: var(--red-500);
+}
+.yellow{
+    background: var(--yellow-600);
+}
+.green{
+    background: var(--green-600);
+}
+.gray{
+    background: var(--neutrals-600);
+}

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

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

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

@@ -0,0 +1,20 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { TemperatureComponent } from './temperature/temperature.component';
+
+@Component({
+  selector: 's-progressbar',
+  templateUrl: './s-progressbar.component.html',
+  styleUrls: ['./s-progressbar.component.scss']
+})
+
+export class SProgressbarComponent extends TemperatureComponent implements OnInit {
+
+  @Input() override percentage: number = 50;
+  @Input() customColor: string = '';
+
+  override color: string = '';
+ 
+  ngOnInit(): void {
+    this.initColor()
+  }
+}

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

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SProgressbarComponent } from './s-progressbar.component';
+import { SIconMaterialModule } from '../icon-material';
+
+@NgModule({
+  declarations: [
+    SProgressbarComponent
+  ],
+  imports: [
+    CommonModule,
+    SIconMaterialModule
+  ],
+  exports: [SProgressbarComponent]
+})
+export class SProgressbarModule { }

package/src/lib/progressbar/temperature/temperature.component.ts

@@ -0,0 +1,25 @@
+export abstract class TemperatureComponent {
+
+  red: string = 'red';
+  orange: string = 'orange';
+  yellow: string = 'yellow';
+  green: string = 'green';
+  gray: string = 'gray';
+
+  percentage: number = 50;
+  color?: string;
+
+
+  initColor(): void {
+    this.color = this.color || this.temperatureColor;
+  }
+
+  get temperatureColor(): string {
+    if(this.percentage < 1) return this.gray
+    if(this.percentage < 25) return this.red
+    if(this.percentage < 50) return this.orange
+    if(this.percentage < 75) return this.yellow
+    return this.green
+  }
+
+}

package/src/lib/radio/index.ts

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

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

@@ -0,0 +1,4 @@
+<label class="s-radio" [ngClass]="!disabled ? 'radio-c-pointer': ''">
+   <input type="radio" [disabled]="disabled" [value]="value" [name]="name" [ngModel]="model" (ngModelChange)="doCheck($event)">
+   <span *ngIf="label" [ngClass]="value != model && disabled ? 'disabled': ''" class="s-body-2 label-radio">{{label}}</span>
+</label>

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

@@ -0,0 +1,57 @@
+.s-radio {
+    padding: 4px;
+    border-radius: 50px;
+    display: inline-flex;
+    -webkit-tap-highlight-color: transparent;
+}
+
+.radio-c-pointer {
+    cursor: pointer;
+}
+
+input[type="radio"] {
+    vertical-align: middle;
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    background-color: var(--neutrals-1200);
+    border: 0;
+    box-shadow: inset 0 0 0 1px var(--neutrals-1200);
+    border: 1px solid var(--neutrals-800);
+    appearance: none;
+    padding: 0;
+    margin: 4px 4px 0 0;
+    pointer-events: none;
+}
+
+input[type="radio"]:focus {
+    outline: none;
+}
+
+input[type="radio"]:checked {
+    box-shadow: inset 0 0 0 4px var(--primary-600);
+    border-width: 0;
+}
+
+span {
+    vertical-align: middle;
+    display: inline-block;
+    line-height: 20px;
+    padding: 0 8px;
+}
+
+input[type="radio"][disabled] {
+    background-color: var(--neutrals-1000);
+    border-color: var(--neutrals-900);
+    box-shadow: inset 0 0 0 0px var(--neutrals-1000);
+}
+
+input[type="radio"][disabled]:checked {
+    background-color: var(--neutrals-1200);
+    box-shadow: inset 0 0 0 4px var(--primary-500);
+    border-width: 0;
+}
+
+span.disabled {
+    color: var(--neutrals-700);
+}

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

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