sidesys-generic-ui 0.0.19 → 0.0.21

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

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

package/src/lib/toast/s-toast-service.ts

@@ -0,0 +1,31 @@
+import { Injectable, ComponentFactoryResolver, ViewContainerRef, Injector, ComponentRef, ApplicationRef } from '@angular/core';
+import { SToastComponent } from './s-toast.component';
+
+
+@Injectable()
+export class SToastService {
+    private viewContainerRef!: ViewContainerRef ;
+
+    constructor(private componentFactoryResolver: ComponentFactoryResolver) {}
+
+    setViewContainerRef(viewContainerRef: ViewContainerRef) {
+        this.viewContainerRef = viewContainerRef;
+    }
+
+    open(title?: any, content?: any, theme?: any, position?: any) {
+    const toastFactory = this.componentFactoryResolver.resolveComponentFactory(SToastComponent);
+    const toastComponentRef = this.viewContainerRef.createComponent(toastFactory);
+
+    let toastComponent = toastComponentRef.instance;
+    toastComponent.title = title;
+    toastComponent.content = content;
+    toastComponent.theme = theme;
+    toastComponent.position = position;
+
+    toastComponent.open()
+
+    setTimeout(() => {
+        toastComponentRef.destroy();
+    }, 5000);
+    }
+}

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

@@ -0,0 +1,16 @@
+<div *ngIf="showToast" class="toast-content {{position}} theme-{{theme}} animated {{animation}}">
+            <div class="toast-box">
+                <div class="left toast-box-left">
+                    <s-icon-mat class="d-flex toast-icon">{{iconTheme}}</s-icon-mat>
+                    <span class="toast-title">
+                        {{title}}
+                    </span>
+                </div>
+                <div class="right toast-box-right">
+                    <s-icon-mat (click)="close()" class="d-flex cursor">close</s-icon-mat>
+                </div>
+            </div>
+            <div *ngIf="content" class="content-info">
+                <p>{{content}}</p>
+            </div>
+</div>

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

@@ -0,0 +1,200 @@
+
+.toast-content{
+    z-index: 3;
+    max-width: 350px;
+    min-width: 350px;
+    padding: 16px;
+    border-radius: 4px;
+    position: fixed;
+}
+
+.toast-title{
+    font-size: 1rem;
+    font-weight: 700;
+}
+
+.toast-icon{
+    margin-right: 8px;
+}
+
+.toast-box{
+    display: flex;
+    justify-content: space-between;
+}
+
+.toast-box-left{
+    display: flex;
+    align-items: center;
+}
+
+.toast-box-right{
+    display: flex;
+    align-items: center;
+}
+
+.content-info{
+    margin-top: 8px;
+}
+.content-info p{
+    font-size: 0.75rem;
+    color: var(--secondary-600)
+}
+
+.toast-box-right s-icon-mat , .toast-box-right s-icon-mat span{
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none; 
+    -moz-user-select: none; 
+    -ms-user-select: none; 
+    user-select: none;
+}
+
+// Theme default , red , yellow , green
+.theme-default.toast-content{
+    border: 1px solid var(--primary-600);
+    background-color: var(--primary-100);
+    .toast-title , .toast-box-left s-icon-mat span {
+        color: var(--primary-600)
+    }
+}
+
+.theme-red.toast-content{
+    border: 1px solid var(--red-600);
+    background-color: var(--red-100);
+    .toast-title , .toast-box-left s-icon-mat span {
+        color: var(--red-600)
+    }
+}
+
+.theme-yellow.toast-content{
+    border: 1px solid var(--yellow-600);
+    background-color: var(--yellow-100);
+    .toast-title , .toast-box-left s-icon-mat span {
+        color: var(--yellow-600)
+    }
+}
+
+.theme-green.toast-content{
+    border: 1px solid var(--green-600);
+    background-color: var(--green-100);
+    .toast-title , .toast-box-left s-icon-mat span {
+        color: var(--green-600)
+    }
+}
+
+// Positions 'top-right', 'top-left', 'top-center' , 'bottom-right' , 'bottom-left' , 'bottom-center'
+.top-right{
+    top: 10px;
+    right: 10px;
+}
+
+.top-left{
+    top: 10px;
+    left: 10px;
+}
+
+.top-center{
+    top: 10px;
+    left: calc(50% - 240px);
+}
+
+.bottom-right{
+    bottom: 10px;
+    right: 10px;
+}
+
+.bottom-left{
+    top: 10px;
+    left: 10px;
+}
+
+.bottom-center{
+    bottom: 10px;
+    left: calc(50% - 240px);
+}
+
+// Animtion  TODO agregar mas opciones de efectos
+.animated {
+    -webkit-animation-duration: 0.4s;
+    animation-duration: 0.4s;
+    -webkit-animation-fill-mode: both;
+    animation-fill-mode: both;
+ }
+ 
+ @-webkit-keyframes bounceInDown {
+    0% {
+       opacity: 0;
+       -webkit-transform: translateY(-2000px);
+    }
+    60% {
+       opacity: 1;
+       -webkit-transform: translateY(30px);
+    }
+    80% {
+       -webkit-transform: translateY(-10px);
+    }
+    100% { 
+       -webkit-transform: translateY(0);
+    }
+ }
+ 
+ @keyframes bounceInDown {
+    0% {
+       opacity: 0;
+       transform: translateY(-2000px);
+    }
+    60% {
+       opacity: 1;
+       transform: translateY(30px);
+    }
+    80% {
+       transform: translateY(-10px);
+    }
+    100% {
+       transform: translateY(0);
+    }
+ }
+
+ @-webkit-keyframes bounceInDownOut {
+    100% {
+       opacity: 0;
+       -webkit-transform: translateY(-2000px);
+    }
+    80% {
+       opacity: 1;
+       -webkit-transform: translateY(30px);
+    }
+    60% {
+       -webkit-transform: translateY(-10px);
+    }
+    0% { 
+       -webkit-transform: translateY(0);
+    }
+ }
+ 
+ @keyframes bounceInDownOut {
+    100% {
+       opacity: 0;
+       transform: translateY(-2000px);
+    }
+    80% {
+       opacity: 1;
+       transform: translateY(30px);
+    }
+    60% {
+       transform: translateY(-10px);
+    }
+    0% {
+       transform: translateY(0);
+    }
+ }
+ 
+ .bounceInDownOut {
+    -webkit-animation-name: bounceInDownOut;
+    animation-name: bounceInDownOut;
+ }
+ 
+ .bounceInDown {
+    -webkit-animation-name: bounceInDown;
+    animation-name: bounceInDown;
+ }

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

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

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

@@ -0,0 +1,86 @@
+import { Component, EventEmitter, Input, OnInit, Output, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 's-toast',
+  templateUrl: './s-toast.component.html',
+  styleUrls: ['./s-toast.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+})
+
+export class SToastComponent implements OnInit {
+
+  @Input() title: string = '';
+  @Input() content: string = '';
+  @Input() delayClose: number = 8000;
+
+
+  @Input()
+  get position(): string { return this._position; }
+  set position(val: string){
+    this._position = ['top-right', 'top-left', 'top-center' , 'bottom-right' , 'bottom-left' , 'bottom-center'].indexOf(val) != -1 ? val : 'top-right';
+  };
+
+  @Input()
+  get theme(): string { return this._theme; }
+  set theme(val: string){
+    this._theme = ['default', 'red', 'yellow' , 'green'].indexOf(val) != -1 ? val : 'default';
+  };
+
+  _position: string = 'top-right';
+  _theme: string = 'default';
+  showToast: boolean = false;
+  iconTheme: string = 'info';
+  animation: string = 'bounceInDown';
+  timeOutOpen: any
+  
+  @Output() closeEvent = new EventEmitter<void>();
+
+  constructor() {}
+
+  ngOnInit(): void {
+    this.switch()
+  }
+
+  switch(){
+    switch (this.theme) {
+      case "default":
+        this.iconTheme = "info"
+      break;
+      case "red":
+        this.iconTheme = "warning"
+      break;
+      case "green":
+        this.iconTheme = "check_circle"
+      break;
+      case "yellow":
+        this.iconTheme = "warning"
+      break;
+      default:
+      break;
+    }
+  }
+
+  open(title?:string, content?:string, theme?:string, position?:string) {
+
+    title ? this.title = title : null
+    content ? this.content = content : null
+    theme ? this.theme = theme : null
+    position ? this.position = position : null
+
+    this.animation = 'bounceInDown'
+    this.showToast = true;
+    this.timeOutOpen = setTimeout(() => {
+      this.close()
+    }, this.delayClose);
+  }
+  
+  close() {
+    this.animation = 'bounceInDownOut'
+    setTimeout(() => {
+      this.showToast = false;
+      this.closeEvent.next();
+      clearTimeout(this.timeOutOpen);
+  }, 300);
+  }
+
+}

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

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SToastComponent } from './s-toast.component';
+import { SIconMaterialModule } from '../icon-material/s-icon-material.module';
+import { SToastService } from './s-toast-service';
+
+
+@NgModule({
+  declarations: [
+    SToastComponent
+  ],
+  imports: [
+    CommonModule,
+    SIconMaterialModule
+  ],
+  exports: [SToastComponent],
+  providers:[SToastService]
+})
+export class SToastModule { }

package/src/lib/toggle-switch/index.ts

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

package/src/lib/toggle-switch/s-toggle-switch.component.html

@@ -0,0 +1,10 @@
+<div id="content-slider1215" class="size1215-{{size}}">
+    <label class="togge-switch">
+        <input type="checkbox" [disabled]="disabled" [(ngModel)]="value" (ngModelChange)="onChange()">
+        <span class="slider" [ngClass]="disabled ? 'disabled':''">
+            <!-- <s-icon-mat class="slider-icon" *ngIf="icon || iconOff">{{getIcon()}}</s-icon-mat> -->
+            <s-icon-mat class="slider-icon-close" *ngIf="showIcon">{{getIcon()}}</s-icon-mat>
+        </span>
+    </label>
+    <label *ngIf="text" class="togge-switch-label">{{text}}</label>
+</div>

package/src/lib/toggle-switch/s-toggle-switch.component.scss

@@ -0,0 +1,199 @@
+
+.no-select , #content-slider1215 , #content-slider1215 > s-icon-mat{
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none; 
+  -moz-user-select: none; 
+  -ms-user-select: none; 
+  user-select: none;
+}
+
+
+#content-slider1215{
+  display: flex;
+  align-items: center;
+}
+
+.togge-switch {
+  position: relative;
+  display: inline-block;
+}
+
+.togge-switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: var(--secondary-600);
+  -webkit-transition: 0.4s;
+  transition: 0.4s;
+  border-radius: 15px;
+}
+
+.slider:before {
+  z-index: 2;
+  position: absolute;
+  content: "";
+  background-color: var(--neutrals-1200);
+  -webkit-transition: 0.4s;
+  transition: 0.4s;
+  border-radius: 50%;
+}
+
+input:checked + .slider {
+  background-color: var(--primary-600);
+}
+
+input:checked + .slider:before {
+  -webkit-transform: translateX(24px);
+  -ms-transform: translateX(24px);
+  transform: translateX(24px);
+}
+
+.togge-switch-label {
+  margin-left: 8px;
+  font-size: 0.875rem;
+}
+
+// disabled
+.slider.disabled {
+  background-color: var(--neutrals-500);
+  cursor: default;
+}
+
+input:checked + .slider.disabled {
+  background-color: var(--primary-300);
+  cursor: default;
+}
+
+// icon
+.slider-icon {
+  z-index: 2;
+  position: absolute;
+  -webkit-transition: 0.4s;
+  transition: 0.4s;
+  span{
+    font-size: 0.9rem;
+  }
+}
+
+input:checked + .slider > s-icon-mat.slider-icon {
+  transform: translateX(24px);
+}
+
+// icon close
+.slider-icon-close {
+  z-index: 1;
+  position: absolute;
+  // left: 21px;
+  // top: 2px;
+  -webkit-transition: 0.4s;
+  transition: 0.4s;
+  span{
+    color: var(--neutrals-1200);
+    font-weight: 900;
+  }
+}
+input:checked + .slider > s-icon-mat.slider-icon-close {
+  transform: translateX(0px);
+  left: 3px;
+}
+
+
+// CUSTOM SIZE MD
+#content-slider1215.size1215-md{
+
+  .togge-switch {
+    width: 40px;
+    height: 20px;
+  }
+
+  .slider:before {
+    height: 16px;
+    width: 16px;
+    left: 2px;
+    bottom: 2px;
+  }
+
+  input:checked + .slider:before {
+    left:-2px;
+  }
+
+  .slider-icon-close {
+    left: 22px;
+    top: 3px;
+    span{
+      font-size: 0.9rem;
+    }
+  }
+  input:checked + .slider > s-icon-mat.slider-icon-close {
+    left: 3px;
+  }
+
+  // icon
+.slider-icon {
+  left: 3px;
+  top: 2px;
+  span{
+    font-size: 0.9rem;
+  }
+}
+
+input:checked + .slider > s-icon-mat.slider-icon {
+  left: -1px;
+}
+  
+}
+
+// CUSTOM SIZE SM
+#content-slider1215.size1215-sm{
+
+  .togge-switch {
+    width: 32px;
+    height: 16px;
+  }
+
+  .slider:before {
+    height: 12px;
+    width: 12px;
+    left: 2px;
+    bottom: 2px;
+  }
+
+  input:checked + .slider:before {
+    left:-6px;
+  }
+
+  .slider-icon-close {
+    left: 16px;
+    top: 2px;
+    span{
+      font-size: 0.8rem;
+    }
+  }
+  input:checked + .slider > s-icon-mat.slider-icon-close {
+    left: 3px;
+  }
+
+    // icon
+.slider-icon {
+  left: 2px;
+  top: 2px;
+  span{
+    font-size: 0.77rem;
+  }
+}
+
+input:checked + .slider > s-icon-mat.slider-icon {
+  left: -6px;
+}
+  
+}

package/src/lib/toggle-switch/s-toggle-switch.component.spec.ts

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

package/src/lib/toggle-switch/s-toggle-switch.component.ts

@@ -0,0 +1,72 @@
+import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges, ViewEncapsulation, forwardRef } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+
+@Component({
+  selector: 's-toggle-switch',
+  templateUrl: './s-toggle-switch.component.html',
+  styleUrls: ['./s-toggle-switch.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => SToggleSwitchComponent),
+      multi: true
+    }
+  ]
+
+})
+export class SToggleSwitchComponent implements OnChanges , ControlValueAccessor {
+
+  onChange2 = (_: any) => { };
+  onTouch = () => { };
+
+  ignore: boolean = false;
+  @Input() size: 'sm' | 'md' = 'sm';
+  @Input() value: boolean = false;
+  @Input() showIcon: boolean = true;
+  @Input() disabled: boolean = false;
+  @Input() text: string = "";
+  @Input() icon: string = "check";
+  @Input() iconOff: string = "close";
+
+  @Output() changeEvent = new EventEmitter<boolean>();
+
+  constructor() { }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['value'] && changes['value'].previousValue && changes['value'].currentValue != changes['value'].previousValue) {
+      this.ignore = true;
+    }
+  }
+
+  onChange(): void {
+    if (!this.ignore) {
+      this.onTouch();
+      this.onChange2(this.value);
+      this.changeEvent.emit(this.value);
+    }
+  }
+
+  // getIcon() {
+  //   return this.value || this.iconOff == '' ? this.icon : this.iconOff;
+  // }
+
+  getIcon() {
+    return this.value || this.showIcon == false ? this.icon : this.iconOff;
+  }
+
+  writeValue(value: boolean): void {
+    if (value) {
+      this.value = value;
+    }
+  }
+
+  registerOnChange(fn: any): void {
+    this.onChange2 = fn;
+  }
+
+  registerOnTouched(fn: any): void {
+    this.onTouch = fn;
+  }
+
+}