sidesys-generic-ui 0.0.19 → 0.0.21

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

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

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

@@ -0,0 +1,55 @@
+import { Component, EventEmitter, Input, OnInit, Output, ViewEncapsulation } from '@angular/core';
+import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
+import { SDropDownButton } from '../drop-down';
+import { SCheckData } from './s-card-models';
+import { SSubMenu } from '../sub-menu/s-sub-menu-model';
+
+@Component({
+  selector: 's-card',
+  templateUrl: './s-card.component.html',
+  styleUrls: ['./s-card.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+})
+export class SCardComponent implements OnInit {
+  @Input() title: string = '';
+  @Input() subtitle: string = '';
+  @Input() menu?: SSubMenu;
+  @Input() check?: SCheckData | null = null;
+  @Input() showHorizontal: boolean = false;
+  @Input() image: string = "";
+  @Input() fullimage: boolean = false;  
+  @Input() icon: string = "";
+  @Input() size: "sm" | "md" | "lg" | "full" = "full";
+  @Input() label: string = "";
+  @Input() style: string = "";
+
+  @Output() clickEvent = new EventEmitter<string>();
+  @Output() checkEvent = new EventEmitter<any>();
+
+  buttons: SDropDownButton[] = [];
+  showDropDownCard: boolean = false;
+  localImage: SafeResourceUrl | undefined;
+
+  constructor(private domSanitizer: DomSanitizer) {
+  }
+
+  ngOnInit(): void {
+    if (this.image) {
+      this.localImage = this.domSanitizer.bypassSecurityTrustResourceUrl(this.image);
+    }
+  }
+
+  showDropDown() {
+    this.showDropDownCard = !this.showDropDownCard;
+  }
+
+  onClickEvent(event: any) {
+    this.showDropDownCard = false;
+    console.log(event)
+    this.clickEvent.next(event);
+  }
+
+  onCheckEvent(event: any) {
+    this.checkEvent.emit(event);
+  }
+}

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

@@ -0,0 +1,26 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SCardComponent } from './s-card.component';
+import { SIconMaterialModule } from '../icon-material';
+import { SDropDownModule } from '../drop-down';
+import { STagModule } from '../tag';
+import { SCheckboxModule } from '../checkbox';
+import { SSubMenuModule } from '../sub-menu';
+
+@NgModule({
+  declarations: [
+    SCardComponent
+  ],
+  imports: [
+    CommonModule,
+    SIconMaterialModule,
+    SDropDownModule,
+    STagModule,
+    SCheckboxModule,
+    SSubMenuModule
+  ],
+  exports: [
+    SCardComponent
+  ]
+})
+export class SCardModule { }

package/src/lib/checkbox/index.ts

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

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

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

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

@@ -0,0 +1,63 @@
+
+input[type="checkbox"] {
+  appearance: none;
+  background-color: var(--neutrals-1200);
+  margin: 0;
+  font: inherit;
+  width: 12px;
+  height: 12px;
+  border: 1px solid var(--neutrals-800);
+  border-radius: 2px;
+  display: inline-grid;
+  place-content: center;
+  vertical-align: middle;
+}
+
+input[type="checkbox"]::before {
+  content: "";
+  width: 12px;
+  height: 12px;
+  transform: scale(0);
+  box-shadow: inset 1px 1px var(--neutrals-1200);
+  background-color: var(--neutrals-1200);
+  transform-origin: bottom left;
+  clip-path: polygon(3.5px 5px, 5px 6.5px, 8.5px 3px, 10px 4.5px, 5px 9.5px, 2px 6.5px);
+}
+
+input[type="checkbox"]:checked::before {
+  transform: scale(1);
+}
+
+input[type="checkbox"].undefined {
+  background-color: var(--primary-600);
+  border-color: var(--primary-600);
+}
+
+input[type="checkbox"].undefined::before {
+  transform: scale(1);
+  clip-path: polygon(2px 5px, 10px 5px, 10px 7px, 2px 7px);
+}
+
+input[type="checkbox"]:checked {
+  background-color: var(--primary-600);
+  border-color: var(--primary-600);
+}
+
+input[type="checkbox"][disabled] {
+  background-color: var(--neutrals-1000);
+  border-color: var(--neutrals-900);
+}
+
+input[type="checkbox"][disabled]:checked,
+input[type="checkbox"][disabled].undefined {
+  background-color: var(--primary-500);
+  border-color: var(--primary-500);
+}
+
+label.label-check {
+  margin-left: 8px;
+}
+
+label.disabled {
+  color: var(--neutrals-700);
+}

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

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

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

@@ -0,0 +1,55 @@
+import { Component, Input, Output, OnInit, EventEmitter, forwardRef } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+
+@Component({
+  selector: 's-checkbox',
+  templateUrl: './s-checkbox.component.html',
+  styleUrls: ['./s-checkbox.component.scss'],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => SCheckboxComponent),
+      multi: true
+    }
+  ]
+})
+
+export class SCheckboxComponent implements OnInit , ControlValueAccessor {
+
+  onChange = (_: any) => { };
+  onTouch = () => { };
+
+  @Input() value: any;
+  @Input() model: any;
+  @Input() disabled: boolean = false;
+  @Input() isUndefined: boolean = false;
+  @Input() label: string = "";
+  @Output() emitSelection = new EventEmitter<any>();
+
+  constructor(){}
+
+  ngOnInit(): void {
+  }
+
+  doCheck(event: any) {
+    this.onTouch();
+    this.onChange(event);
+    this.isUndefined = false;
+    this.emitSelection.emit({value: this.value, event: event});
+  }
+
+  writeValue(value: any): void {
+    if (value) {
+      this.model = value
+      this.value = value;
+    }
+  }
+
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: any): void {
+    this.onTouch = fn;
+  }
+}

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

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SCheckboxComponent } from './s-checkbox.component';
+import { FormsModule } from '@angular/forms';
+
+
+@NgModule({
+  declarations: [
+    SCheckboxComponent
+  ],
+  imports: [
+    CommonModule,
+    FormsModule
+  ],
+  exports: [SCheckboxComponent]
+})
+export class SCheckboxModule { }

package/{lib/company-logo/index.d.ts → src/lib/company-logo/index.ts}

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

package/src/lib/company-logo/s-company-logo.component.html

@@ -0,0 +1,3 @@
+
+<div *ngIf="!customImage" class="img-logo463" [ngStyle]="style"></div>
+<img *ngIf="customImage" alt="" src="{{customImage}}" [ngStyle]="style"/>

package/src/lib/company-logo/s-company-logo.component.scss

@@ -0,0 +1,14 @@
+.img-logo463{
+    background-repeat: no-repeat;
+    background-position: center;
+    background-image: url(../../assets/LOGO.svg);
+}
+
+.theme-dark{
+    .img-logo463{
+        background-repeat: no-repeat;
+        background-position: center;
+        background-image: url(../../assets/LOGO_w.svg);
+    } 
+}
+

package/src/lib/company-logo/s-company-logo.component.spec.ts

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

package/src/lib/company-logo/s-company-logo.component.ts

@@ -0,0 +1,38 @@
+import { Component, Input, OnChanges, OnInit, SimpleChanges, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 's-company-logo',
+  templateUrl: './s-company-logo.component.html',
+  styleUrls: ['./s-company-logo.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+})
+
+export class SCompanyLogoComponent implements OnInit , OnChanges {
+
+@Input() width?: number;
+@Input() height?: number;
+@Input() customImage?: string;
+  style: any;
+
+  constructor() {}
+  ngOnChanges(changes: SimpleChanges): void {
+    this.style={
+      'width': this.width+'px' , 'height': this.height+'px'
+    }
+  }
+
+  ngOnInit(): void {
+
+    if(this.width === undefined){
+      this.width=100;
+    }
+    if(this.height === undefined){
+      this.height=36;
+    }
+    this.style={
+      'width': this.width+'px' , 'height': this.height+'px'
+    }
+    
+  }
+
+}

package/src/lib/company-logo/s-company-logo.module.ts

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

package/src/lib/content/index.ts

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

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

@@ -0,0 +1,3 @@
+<div class="s-content s-scroll" [ngClass]="expand ? 'menu-expanded':'menu-closed'">
+    <ng-content></ng-content>
+</div>

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

@@ -0,0 +1,20 @@
+.s-content {
+    display: flex;
+    flex: 1;
+    -ms-flex: 1 1 auto;
+    flex-direction: column;
+    min-width: 0;
+    padding: 1.5rem 1rem 1.5rem 2rem;
+    height: calc(100vh - 5.5rem);
+    overflow-y: auto;
+    overflow-x: hidden;
+    background-color: var(--neutrals-1100);
+    box-sizing: border-box;
+
+    &.menu-expanded {
+        margin-left: 14.5rem !important;
+    }
+    &.menu-closed {
+        margin-left: 3.5rem !important;
+    }
+}

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

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

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

@@ -0,0 +1,32 @@
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { LocalstorageService } from '../shared/localstorage.service';
+
+@Component({
+  selector: 's-content',
+  templateUrl: './s-content.component.html',
+  styleUrls: ['./s-content.component.scss']
+})
+export class SContentComponent implements OnInit , OnDestroy{
+
+  @Input() expand?: boolean ;
+  subscriptionRefresh: any;
+
+  constructor(public localStorage:LocalstorageService) { 
+
+    this.subscriptionRefresh = this.localStorage.refreshLocalStorage.subscribe((data:any) => {
+      this.loadDataFromLocalStorage()
+    });
+  }
+
+  ngOnInit(): void {
+    this.loadDataFromLocalStorage();
+  }
+
+  loadDataFromLocalStorage(){
+      this.expand = this.localStorage.getItem("s-sidebar:expand")
+  }
+
+  ngOnDestroy(): void {
+    this.subscriptionRefresh.unsubscribe()  
+  }
+}

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

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SContentComponent } from './s-content.component';
+import { LocalstorageService } from '../shared/localstorage.service';
+
+
+
+@NgModule({
+  declarations: [
+    SContentComponent
+  ],
+  imports: [
+    CommonModule
+  ],
+  exports: [
+    SContentComponent
+  ],
+  providers:[LocalstorageService]
+})
+export class SContentModule { }

package/{lib/drop-down/index.d.ts → src/lib/drop-down/index.ts}

@@ -1,3 +1,3 @@
 export * from './s-drop-down.component';
 export * from './s-drop-down.module';
-export * from './s-drop-down-button';
+export * from './s-drop-down-button';

package/src/lib/drop-down/s-drop-down-button.ts

@@ -0,0 +1,4 @@
+export class SDropDownButton {
+    name: string = '';
+    eventName: string = '';
+}

package/src/lib/drop-down/s-drop-down.component.html

@@ -0,0 +1,5 @@
+<div class="drop-down-card">
+    <div class="drop-down-content" [ngStyle]="{display: display ? 'block' : 'none', right: right ? '0' : 'inherit', left: right ? 'inherit' : '0' }">
+        <button class="drop-down-button" *ngFor="let btn of buttons" (click)="onButtonClick(btn.eventName)">{{btn.name}}</button>
+    </div>
+</div>

package/src/lib/drop-down/s-drop-down.component.scss

@@ -0,0 +1,34 @@
+
+// .drop-down-card {
+//     // display: flex;
+//     // justify-content: center;
+// }
+
+
+.drop-down-content {
+    position: absolute;
+    background-color: var(--secondary);
+    width: auto;
+    box-shadow: 0 4px 20px #0000001a;
+    z-index: 1;
+}
+
+.drop-down-content button {
+    color: var(--text);
+    padding: 5px 10px 5px 10px;
+    display: block;
+    border: none;
+    width: 100%;
+    border-bottom: 1px solid var(--primary);
+    outline: none;
+    background: transparent;
+}
+
+.drop-down-content button:hover {
+    background-color: var(--primary);
+    color: #ffffff;
+}
+
+.drop-down-button {
+    text-align: left;
+}

package/src/lib/drop-down/s-drop-down.component.spec.ts

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

package/src/lib/drop-down/s-drop-down.component.ts

@@ -0,0 +1,33 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { SDropDownButton } from './s-drop-down-button';
+
+@Component({
+  selector: 's-drop-down',
+  templateUrl: './s-drop-down.component.html',
+  styleUrls: ['./s-drop-down.component.scss']
+})
+export class SDropDownComponent implements OnInit {
+
+  /**
+   * activa el panel dropdown
+   */
+  @Input() display: boolean = false;
+
+  /**
+   * Botones que se pintaran y al hacer click se dispara un eventos;
+   */
+  @Input() buttons: SDropDownButton[] = [];
+  @Input() right: boolean = false;
+
+  @Output() buttonClick = new EventEmitter<string>();
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+  onButtonClick(btonEvent: string){
+    this.buttonClick.next(btonEvent);
+  }
+
+}

package/src/lib/drop-down/s-drop-down.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SDropDownComponent } from './s-drop-down.component';
+
+
+
+@NgModule({
+  declarations: [SDropDownComponent],
+  imports: [CommonModule],
+  exports:[SDropDownComponent]
+})
+export class SDropDownModule { }

package/src/lib/fonts-material.scss

@@ -0,0 +1,15 @@
+//version: https://fonts.googleapis.com/icon?family=Material+Icons
+@font-face {
+    font-family: "Material Icons";
+    font-style: normal;
+    font-weight: 400;
+    src: url(https://fonts.gstatic.com/s/materialicons/v140/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format("woff2");
+}
+
+//version: https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined
+@font-face {
+    font-family: 'Material Symbols Outlined';
+    font-style: normal;
+    font-weight: 100 700;
+    src: url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v110/kJEhBvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oFsI.woff2) format('woff2');
+}