sidesys-generic-ui 0.0.19 → 0.0.21

package/src/lib/fonts.scss

@@ -0,0 +1,184 @@
+@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap");
+
+* {
+    font-family: "Roboto", Arial, sans-serif;
+    font-size: 16px;
+    letter-spacing: 0.2px;
+    line-height: 20px;
+    font-weight: 400;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    margin: 0;
+    font-weight: 700;
+}
+
+h1 {
+    font-size: 2.5rem;
+    line-height: 3.75rem;
+}
+
+h2 {
+    font-size: 2rem;
+    line-height: 2.5rem;
+}
+
+h3 {
+    font-size: 1.75rem;
+    line-height: 2.2rem;
+}
+
+h4 {
+    font-size: 1.5rem;
+    line-height: 1.875rem;
+}
+
+h5 {
+    font-size: 1.25rem;
+    line-height: 1.5rem;
+}
+
+h6 {
+    font-size: 1rem;
+    line-height: 1.5rem;
+}
+
+p {
+    font-size: 1rem;
+}
+
+a {
+    font-size: 1rem;
+    line-height: 1.5rem;
+}
+
+.s-subtitle {
+    font-size: 1rem;
+    line-height: 1.5rem;
+    letter-spacing: 0.15px;
+}
+
+.s-subtitle-bold {
+    font-size: 1rem;
+    line-height: 1.5rem;
+    font-weight: 700;
+    letter-spacing: 0.1px;
+}
+
+.s-body-1 {
+    font-size: 1rem;
+    line-height: 1.5rem;
+    letter-spacing: 0.5px;
+}
+
+.s-body-2 {
+    font-size: 0.875rem;
+    line-height: 1.375rem;
+    letter-spacing: 0.25px;
+}
+
+.s-button-xl,
+.s-button-xl-bold {
+    font-size: 1.125rem;
+    line-height: 1.75rem;
+    letter-spacing: 0.5px;
+}
+
+.s-button-lg,
+.s-button-lg-bold {
+    font-size: 1rem;
+    line-height: 1.5rem;
+    letter-spacing: 0.5px;
+}
+
+.s-button-sm,
+.s-button-sm-bold {
+    font-size: 0.875rem;
+    line-height: 1.375rem;
+    letter-spacing: 0.2px;
+}
+
+.s-button-xs,
+.s-button-xs-bold {
+    font-size: 0.75rem;
+    line-height: 1.125rem;
+    letter-spacing: 0.1px;
+}
+
+.s-button-xl-bold,
+.s-button-lg-bold,
+.s-button-sm-bold,
+.s-button-xs-bold {
+    font-weight: 700;
+}
+
+.s-caption {
+    font-size: 0.75rem;
+    line-height: 1.125rem;
+    letter-spacing: 0.5px;
+}
+
+.s-overline {
+    font-size: 0.75rem;
+    line-height: 1.125rem;
+    font-weight: 500;
+    letter-spacing: 1.5px;
+}
+
+.s-link-1 {
+    font-size: 1rem;
+    line-height: 1.5rem;
+    text-decoration: underline;
+    letter-spacing: 0.5px;
+}
+
+.s-link-2 {
+    font-size: 1rem;
+    line-height: 1.5rem;
+    letter-spacing: 0.5px;
+}
+
+.s-link-3 {
+    font-size: 0.875rem;
+    line-height: 1.3rem;
+    text-decoration: underline;
+    letter-spacing: 0.5px;
+}
+
+.s-link-4 {
+    font-size: 0.875rem;
+    line-height: 1.3rem;
+    letter-spacing: 0.5px;
+}
+
+@media only screen and (max-width: 600px) {
+    h1 {
+        font-size: 2rem;
+        line-height: 2.5rem;
+    }
+
+    h2 {
+        font-size: 1.5rem;
+        line-height: 1.875rem;
+    }
+
+    h3 {
+        font-size: 1.5rem;
+        line-height: 1.875rem;
+    }
+
+    h4 {
+        font-size: 1.25rem;
+        line-height: 1.5rem;
+    }
+
+    h5 {
+        font-size: 1rem;
+        line-height: 1.25rem;
+    }    
+}

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

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

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

@@ -0,0 +1,4 @@
+<footer class="s-footer" [ngClass]="theme ? 'theme-'+theme : ''">
+    <span class="s-footer__text">Desarrollado por</span>
+    <s-company-logo [height]="23" [width]="70"></s-company-logo>
+</footer>

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

@@ -0,0 +1,25 @@
+.s-footer {
+    z-index: 2;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 0.2rem 0;
+    text-align: center;
+    background: var(--neutrals-1100);
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    color: var(--secondary-600);
+    
+    &__text {
+        padding-right: 0.5rem;
+        font-family: 'Roboto', sans-serif;
+        font-size: 13px;
+    }
+}
+
+[theme="dark"] , .s-footer.theme-dark {
+        background: var(--primary-900);
+        color:var(--neutrals-1200);
+}

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

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

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

@@ -0,0 +1,14 @@
+import { Component, Input, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 's-footer',
+  templateUrl: './s-footer.component.html',
+  styleUrls: ['./s-footer.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+})
+
+export class SFooterComponent {
+  
+  @Input() theme?: string;
+
+}

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

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SFooterComponent } from './s-footer.component';
+import { SCompanyLogoModule } from '../company-logo/s-company-logo.module';
+
+@NgModule({
+  declarations: [
+    SFooterComponent
+  ],
+  imports: [
+    CommonModule,
+    SCompanyLogoModule
+  ],
+  exports: [
+    SFooterComponent
+  ]
+})
+export class SFooterModule { }

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

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

package/src/lib/form/s-form-control.ts

@@ -0,0 +1,65 @@
+import { ValidatorFn } from "@angular/forms";
+import { SSelectSimpleModel } from "../select/s-select-model";
+
+export class SFormControl {
+    private _width: number = 100;
+
+    formControlName: string = '';
+    label: string = '';
+    inputType: string = '';
+    inputPlaceHolder: string = '';
+    validators: ValidatorFn[] = [];
+    value: string = "";
+    disabled: boolean = false;
+    show: boolean = true;
+    selectModel: SSelectSimpleModel[] = [];
+    button: ButtonControl | undefined;
+
+    get width(): number {
+        return this._width;
+    }
+    set width(val: number) {
+        this._width = val > 0 && val <= 100 ? val : 100;
+    };
+
+    static Create(formControlName: string = '', label: string = '', inputType: string = '', inputPlaceHolder: string = '', validators: ValidatorFn[] = [], value: string = '', width: number = 100, disabled: boolean = false, show: boolean = true, selectModel: SSelectSimpleModel[] = [], button: ButtonControl | undefined = undefined): SFormControl {
+        let c = new SFormControl();
+
+        c.formControlName = formControlName;
+        c.label = label;
+        c.inputType = inputType;
+        c.inputPlaceHolder = inputPlaceHolder;
+        c.validators = validators;
+        c.value = value;
+        c.disabled = disabled;
+        c.show = show;
+        c.selectModel = selectModel
+        c.width = width;
+
+        if (inputType == 'button' && button == undefined) {
+            c.button = new ButtonControl();
+            c.button.icon = '';
+            c.button.invert = false;
+            c.button.pill = false;
+            c.button.type = 'primary';
+        }
+        else {
+            c.button = button;
+        }
+
+        if (inputType == 'color' && !value) {
+            c.value = '#000000'
+        }
+
+        return c;
+    }
+}
+
+export class ButtonControl {
+    pill: boolean = false;
+    invert: boolean = false;
+    type: string = 'primary';
+    icon: string = '';
+    class: string = '';
+    size: "xl" | "lg" | "md" | "sm" = 'md';
+}

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

@@ -0,0 +1,60 @@
+<form *ngIf="form && controls" [formGroup]="form">
+    <div class="form-control" [ngStyle]="{width: c.width + '%', display: c.width < 100 ? 'inline-block' : 'initial'}"
+        *ngFor="let c of controls">
+        <div *ngIf="c.show && enabledTypes.indexOf(c.inputType) != -1">
+            <div *ngIf="c.inputType != 'button' && c.inputType != 'select' && c.inputType != 'checkbox'">
+                <input [id]="c.formControlName" [type]="c.inputType" [disabled]="c.disabled"
+                    [formControlName]="c.formControlName" style="display: none;">
+                <div class="form-group">
+                    <label class="label">{{c.label}}</label>
+                    <s-input-text [type]="c.inputType" [text]="c.value" [disabled]="c.disabled"
+                        [theme]="checkErrors(c.formControlName) ? 'red' : 'default'" [placeHolder]="c.inputPlaceHolder"
+                        [name]="c.formControlName + c.inputType"
+                        (textChangeEvent)="changeControl(c.formControlName, $event)"
+                        [title]="c.inputPlaceHolder"></s-input-text>
+                    <s-error-control [theme]="checkErrors(c.formControlName) ? 'red' : 'default'">
+                        <span *ngIf="checkErrors(c.formControlName)">
+                            {{getErrorMessage(c.formControlName)}}
+                        </span>
+                    </s-error-control>
+                </div>
+            </div>
+            <div *ngIf="c.inputType == 'button' && c.button != undefined">
+                <div class="form-group">
+                    <s-button [pill]="c.button.pill" [invert]="c.button.invert" [type]="c.button.type" size="sm"
+                        [title]="c.inputPlaceHolder" [class]="c.button.class" [size]="c.button.size ? c.button.size : 'md' " (click)="buttonClick(c.formControlName)">
+                        {{c.label}}
+                        <s-icon-mat *ngIf="c.button.icon">{{c.button.icon}}</s-icon-mat>
+                    </s-button>
+                </div>
+            </div>
+            <div *ngIf="c.inputType == 'checkbox'">
+                <input [id]="c.formControlName" [type]="c.inputType" [disabled]="c.disabled"
+                    [formControlName]="c.formControlName" style="display: none;">
+                <div class="form-group">
+                    <s-checkbox [value]="c.value" [label]="c.label" (emitSelection)="changeControl(c.formControlName, $event.event.toString())"></s-checkbox>
+                    <s-error-control [theme]="checkErrors(c.formControlName) ? 'red' : 'default'">
+                        <span *ngIf="checkErrors(c.formControlName)">
+                            {{getErrorMessage(c.formControlName)}}
+                        </span>
+                    </s-error-control>
+                </div>
+            </div>
+            <div *ngIf="c.inputType == 'select'">
+                <select [id]="c.formControlName" [name]="c.formControlName" [formControlName]="c.formControlName" style="display: none;">
+                    <option *ngFor="let o of c.selectModel" [value]="o.key" [selected]="o.key == c.value">{{o.value}}
+                    </option>
+                </select>
+                <div class="form-group">
+                    <label class="label">{{c.label}}</label>
+                    <s-select-simple [options]="c.selectModel" (selectEvent)="changeSelect($event, c.formControlName)" [title]="c.inputPlaceHolder" [selectedValue]="c.value"></s-select-simple>
+                    <s-error-control [theme]="checkErrors(c.formControlName) ? 'red' : 'default'">
+                        <span *ngIf="checkErrors(c.formControlName)">
+                            {{getErrorMessage(c.formControlName)}}
+                        </span>
+                    </s-error-control>
+                </div>
+            </div>
+        </div>
+    </div>
+</form>

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

@@ -0,0 +1,7 @@
+.form-control {
+    vertical-align: middle;
+}
+
+.button .primary .round-sm .sm {
+    width: 100% !important;
+}

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

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

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

@@ -0,0 +1,131 @@
+import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewEncapsulation } from '@angular/core';
+import { FormControl, FormGroup } from '@angular/forms';
+import { SSelectSimpleModel } from '../select';
+import { SFormControl } from './s-form-control';
+
+@Component({
+  selector: 's-form',
+  templateUrl: './s-form.component.html',
+  styleUrls: ['./s-form.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class SFormComponent implements OnInit, OnChanges {
+  form: FormGroup = new FormGroup({});
+
+  @Input() controls?: SFormControl[];
+  @Input() submitClick: number = 0;
+
+  @Input() requiredMessage: string = 'Se requiere este dato';
+  @Input() emailMessage: string = 'El formato del correo no es válido';
+  @Input() dafaultMessage: string = 'Error en el dato';
+
+  @Output() controlsChangeEvent = new EventEmitter<SFormControl[]>();
+  @Output() submitEvent = new EventEmitter<{ [key: string]: string }>();
+  @Output() changeSelectEvent = new EventEmitter<SSelectSimpleModel>();
+  @Output() clickButtonEvent = new EventEmitter<string>();
+  
+  submitted: boolean = false;
+
+  enabledTypes: string[] = ['text', 'password', 'email' , 'phone' , 'url' , 'number', 'button', 'checkbox', 'select', 'color', 'date', 'time'];
+
+  constructor() {
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['submitClick'] && changes['submitClick'].currentValue != 0) {
+      this.submit();
+    }
+
+    if (changes['controls'] && changes['controls'].previousValue && changes['controls'].currentValue) {
+      this.form = new FormGroup({});
+      this.controls = [];
+      this.submitted = false;
+      
+      setTimeout(() => {
+        this.controls = changes['controls'].currentValue;
+        this.loadForm();
+      }, 100);
+    }
+  }
+
+  ngOnInit(): void {
+    this.loadForm();
+  }
+
+  loadForm(){
+    if (this.controls) {
+      this.controls.forEach(c => {
+        if(!c.inputType || c.inputType == ''){
+          c.inputType = 'text';
+        }
+
+        let val = c.value;
+
+        if (c.inputType == 'select') {
+          val = c.value;
+        }
+        
+        this.form.addControl(c.formControlName, new FormControl(val, c.validators));
+        
+        if (c.disabled) {
+          this.form.controls[c.formControlName].disable({ onlySelf: true });
+        }
+      });
+    }
+  }
+
+  submit() {
+    this.form.markAllAsTouched();
+    
+    if (this.controls && this.form.valid) {
+      this.submitted = true;
+      let keysValues: { [key: string]: string } = {};
+
+      this.controls.forEach(c => {
+        keysValues[c.formControlName] = this.form.controls[c.formControlName].value;
+      });
+
+      this.submitEvent.next(keysValues);
+    }
+    else {
+      this.submitted = false;
+    }
+  }
+
+  checkErrors(key: string): boolean {
+    if (!this.form.controls[key]) { return false }
+    return ((this.form.controls[key].invalid && (this.form.controls[key].dirty || this.form.controls[key].touched)) || this.submitted) && this.form.controls[key].errors != null;
+  }
+
+  getErrorMessage(key: string): string {
+    if (this.form.controls[key].getError('required')) {
+      return this.requiredMessage;
+    } else if (this.form.controls[key].getError('email')) {
+      return this.emailMessage;
+    }
+
+    return this.dafaultMessage;
+  }
+
+  changeSelect(obj: SSelectSimpleModel, key: string) {
+    this.changeSelectEvent.emit(obj);
+    this.changeControl(key, obj.key as string);
+  }
+
+  changeControl(name: string, val: string){
+    this.form.controls[name].markAsTouched();
+    this.form.controls[name].setValue(val);
+
+    let c = this.controls?.find(e => {return e.formControlName == name});
+
+    if(c){
+      c.value = val;
+    }
+
+    this.controlsChangeEvent.emit(this.controls);
+  }
+
+  buttonClick(name: string){
+    this.clickButtonEvent.emit(name);
+  }
+}

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

@@ -0,0 +1,29 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SFormComponent } from './s-form.component';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { SInputModule } from '../input';
+import { SButtonModule } from '../button';
+import { SIconMaterialModule } from '../icon-material';
+import { SCheckboxModule } from '../checkbox';
+import { SSelectModule } from '../select';
+
+@NgModule({
+  declarations: [
+    SFormComponent
+  ],
+  imports: [
+    CommonModule,
+    FormsModule,
+    ReactiveFormsModule,
+    SInputModule,
+    SButtonModule,
+    SIconMaterialModule,
+    SCheckboxModule,
+    SSelectModule
+  ],
+  exports:[
+    SFormComponent
+  ]
+})
+export class SFormModule { }

package/src/lib/icon/index.ts

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

package/src/lib/icon/s-icon.component.css

@@ -0,0 +1,3 @@
+.escalablePath{
+    transform: scale(0.6, 0.6);
+}

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

@@ -0,0 +1,8 @@
+<svg    
+        [innerHTML]="link" 
+        attr.fill="{{fill}}" 
+        attr.width="{{width}}px" 
+        attr.height="{{height}}px"
+        class="control-svg"
+    >
+</svg>

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

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