sidesys-generic-ui 0.0.19 → 0.0.21

package/src/lib/input/components/input-text/s-input-text.component.scss

@@ -0,0 +1,312 @@
+
+.content-input-main-626:has(input:focus) {
+    border: 1px solid var(--primary-600);
+    box-shadow: 0px 0px 0px 4px rgba(0, 145, 254, 0.15), 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+}
+
+.content-input-main-626.theme-green:has(input:focus) {
+    border: 1px solid var(--green-500);
+    box-shadow: 0px 0px 0px 4px rgba(54, 179, 126, 0.15), 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+}
+.content-input-main-626.theme-yellow:has(input:focus) {
+    border: 1px solid var(--yellow-500);
+    box-shadow: 0px 0px 0px 4px rgba(255, 171, 0, 0.15), 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+}
+.content-input-main-626.theme-red:has(input:focus) {
+    border: 1px solid var(--red-500);
+    box-shadow: 0px 0px 0px 4px rgba(255, 86, 48, 0.15), 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+}
+
+.content-input-main-626.sm{
+    input{
+        height: 22px;
+        font-size: 0.75rem;
+    }
+    .icon {
+        width: 20px;
+        cursor: default;
+        span {
+            font-size: 1.2em;
+            display: flex;
+        }
+    }
+
+}
+
+.content-input-main-626 {
+    display: flex;
+    border: 1px solid var(--primary-500);
+    border-radius: 4px;
+    padding: 0 8px;
+    margin: 3px 0;
+    background-color: var(--neutrals-1200);
+
+input {
+    width: 100%;
+    border: 0px;
+    color: var(--secondary-600);
+    writing-mode: unset;
+    height: 36px;
+    font-size: inherit;
+    background-color: var(--neutrals-1200);
+}
+
+input:focus,
+input:focus-visible {
+    outline: none;
+}
+
+.icon {
+    width: 20px;
+    cursor: default;
+    span {
+        // font-size: 1.3em;
+        display: flex;
+    }
+}
+
+
+.content-center {
+    width: 100%;
+    background-color: var(--neutrals-1200);
+}
+
+.content-left {
+    display: flex;
+    align-items: center;
+    justify-content: space-evenly;
+    margin-right: 8px;
+    color: var(--primary-600);
+}
+
+.content-right {
+    display: flex;
+    align-items: center;
+    justify-content: space-evenly;
+    margin-left: 8px;
+    color: var(--secondary-600);
+}
+
+}
+
+// Disabled
+.content-input-main-626.disabled-active {
+    background-color: var(--neutrals-1100);
+    border-color: var(--neutrals-900);
+    color: var(--neutrals-800);
+    input{
+        background-color: var(--neutrals-1100);
+        color: var(--neutrals-800);
+    }
+}
+.content-input-main-626.disabled-active{
+    .content-left{
+        color: var(--neutrals-800) !important;
+    }
+}
+.content-input-main-626.disabled-active{
+    .content-right{
+        s-icon-mat{
+            span{
+                color: var(--neutrals-800) !important;
+            }
+        }
+    }
+}
+.content-input-main-626.disabled-active.content-input-main-url , .content-input-main-626.disabled-active.content-input-main-color{
+    .content-left{
+        color: var(--neutrals-800) !important;
+        border-right: 1px solid var(--neutrals-900)
+    }
+}
+
+// Theme Border
+.content-input-main-626.theme-red {
+    border: 1px solid var(--red-500);
+    .icon.report span {
+        color: var(--red-600);
+    }
+}
+
+.content-input-main-626.theme-green {
+    border: 1px solid var(--green-500);
+    .icon.report span {
+        color: var(--green-600);
+    }
+}
+
+.content-input-main-626.theme-yellow {
+    border: 1px solid var(--yellow-500);
+    .icon.report span {
+        color: var(--yellow-600);
+    }
+}
+
+// Custom
+.content-input-main-626.content-input-main-password .content-right .icon {
+    span {
+        color: var(--secondary-500);
+    }
+}
+
+.content-input-main-url .content-left,
+.content-input-main-color .content-left {
+    border-right: 1px solid var(--secondary-500);
+    padding-right: 8px;
+    color: var(--secondary-500);
+    font-size: 0.9rem;
+    padding-left: 8px;
+}
+
+.content-input-main-url,
+.content-input-main-color {
+    padding-left: 0;
+}
+
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
+input:-webkit-autofill:active {
+    -webkit-box-shadow: 0 0 0 30px var(--neutrals-1200) inset !important;
+}
+
+//HIDDEN ARROW INPUT NUMBER
+.content-input-main-626.content-input-main-number{
+    /* Chrome, Safari, Edge, Opera */
+    input::-webkit-outer-spin-button,
+    input::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+    }
+
+    /* Firefox */
+    input[type=number] {
+        -moz-appearance: textfield;
+    }
+}
+
+.button-input-626{
+    font-size: 15px;
+    font-weight: bold;
+}
+
+//INPUT TYPE RANGE
+.content-input-main-range input{
+        width: 100%;
+        height: 36px;
+        margin: 0;
+        -webkit-appearance: none;
+}
+
+@mixin thumb() {
+    box-sizing: border-box;
+    -webkit-appearance: none;
+    border: unset;
+    outline: unset;
+    box-shadow: unset;
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    border: 3px solid var(--primary-600);
+    background: var(--neutrals-1200);
+}
+
+@mixin thumb-hover() {
+    border: 3px solid var(--primary-600);
+    background: var(--primary-200);
+}
+
+@mixin thumb-active() {
+    border: 3px solid var(--primary-600);
+    background: var(--primary-600);
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px rgba(0, 145, 254, 0.15);
+}
+
+@mixin progress() {
+    appearance: none;
+    background-color: var(--primary-600) !important;
+    height: 8px;
+    border-radius: 4px;
+}
+
+@mixin track() {
+    appearance: none;
+    background-color: var(--neutrals-1000) !important;
+    height: 8px;
+    border-radius: 4px;
+}
+
+.content-input-main-range input[type=range]{
+
+    &::-webkit-slider-runnable-track {
+        border-radius: 4px;
+        height: 8px;
+    }
+    &::-moz-range-track { @include track }
+    &::-ms-track { @include track }
+
+    &::-moz-range-progress { @include progress }
+    &::-ms-fill-upper { @include progress }
+
+    &::-webkit-slider-thumb { @include thumb ; margin-top: -8px; }
+    &::-moz-range-thumb { @include thumb }
+    &::-ms-thumb { @include thumb }
+
+    &::-webkit-slider-thumb:hover { @include thumb-hover }
+    &::-moz-range-thumb:hover { @include thumb-hover }
+    &::-ms-thumb:hover { @include thumb-hover }
+
+    &::-webkit-slider-thumb:active { @include thumb-active }
+    &::-moz-range-thumb:active { @include thumb-active }
+    &::-ms-thumb:active { @include thumb-active }
+}
+
+.content-input-main-range input[type="range"]:disabled {
+	filter: grayscale(1);
+	opacity: 0.3;
+	cursor: not-allowed;
+}
+
+.tooltip {
+    position: relative;
+    display: inline-block;
+    cursor: pointer;
+    width: 100%;
+}
+
+.tooltip .tooltiptext {
+    visibility: hidden;
+    width: 40px;
+    background-color: var(--neutrals-1200);
+    color: var(--secondary-600);
+    font-weight: 700;
+    font-size: 12px;
+    text-align: center;
+    border-radius: 4px;
+    padding: 5px;
+    position: absolute;
+    z-index: 1;
+    bottom: 100%;
+    left: 550%;
+    transform: translateX(-50%);
+    box-shadow: 0px 0px 16px 0px rgba(23, 56, 97, 0.16);
+}
+
+.tooltip-false:hover{
+        .tooltiptext {
+            visibility: visible;
+        } 
+}
+
+.tooltip .tooltiptext::before {
+    content: "";
+    position: absolute !important;
+    transform: rotate(45deg);
+    height: 10px;
+    width: 10px;
+    bottom: -5px;
+    background-color: var(--neutrals-1200);
+    box-shadow: 0px 0px 16px 0px rgba(23, 56, 97, 0.16);
+    left: 40%;
+}
+//FIN CSS INPUT TYPE RANGE

package/src/lib/input/components/input-text/s-input-text.component.spec.ts

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

package/src/lib/input/components/input-text/s-input-text.component.ts

@@ -0,0 +1,311 @@
+import { AfterViewInit, Component, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild, ViewEncapsulation, forwardRef } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+
+@Component({
+  selector: 's-input-text',
+  templateUrl: './s-input-text.component.html',
+  styleUrls: ['./s-input-text.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => SInputTextComponent),
+      multi: true
+    }
+  ]
+})
+export class SInputTextComponent implements OnInit, OnChanges, ControlValueAccessor , AfterViewInit  {
+  
+  onChange = (_: any) => { };
+  onTouch = () => { };
+
+  //REF PARA TYPE NUMBER
+  @ViewChild('typeNumber') typeNumber: ElementRef | undefined ;
+  //REF PARA TYPE RANGE
+  @ViewChild('tooltipContainer', { static: false }) tooltipContainer: ElementRef | undefined;
+  @ViewChild('tooltip', { static: false }) tooltip: ElementRef | undefined;
+
+
+  @Input() text: string = '';
+  @Input() id: any =  Math.floor(Math.random() * 1000);
+  @Input() name: string = '';
+  @Input() placeHolder?: string = '';
+  @Input() disabled: boolean = false;
+  @Input() max?: number ;
+  @Input() min: number = 0;
+  @Input() step: number = 1;
+  @Input() readOnly: boolean = false;
+  @Input()
+  get theme(): string { return this._theme; }
+  set theme(val: string) {
+    this._theme = ['default', 'green', 'yellow', 'red'].indexOf(val) != -1 ? val : 'default';
+  };
+  @Input()
+  get type(): string { return this._type; }
+  set type(val: string) {
+    this._type = ['text', 'password', 'email', 'phone', 'url', 'search', 'number', 'color', 'date', 'time' , 'range'].indexOf(val) != -1 ? val : 'text';
+  };
+  @Input() classAdd: string = '';
+  @Input() help: boolean = false;
+  @Input() size: 'sm' | 'md' = 'md';
+  @Input() rangeUnity: string = '';
+
+  inputTimeout?: any;
+  inputText: string = '';
+  inputNumber: number = 0;
+  _type: string = 'text';
+  _theme: string = 'default';
+  disabledstyle: string = '';
+  visibility = false;
+  iconName: string | undefined;
+  inconSymbol: boolean = false;
+  tooltipValue: string = '';
+
+  @Output() textChangeEvent = new EventEmitter<string>();
+  @Output() clickHelpIconEvent = new EventEmitter<void>();
+
+  constructor() { 
+    
+  }
+
+  ngOnInit(): void {
+
+    //Ajuste cuando type number viene con text y lo convierte a numero
+    if(this.text && this.type == 'number'){
+        this.inputNumber = Number(this.text)
+    }
+
+    //Ajuste cuando type color viene con text vacio
+    if (this._type == 'color' && this.text == '') {
+      this.text = '#000000'
+    }
+
+    this.inputText = this.text;
+    
+    //Activa el estilo de disabled 
+    if (this.disabled) {
+      this.disabledstyle = "disabled-active"
+    }
+
+    //Ajuste type color solo se deshabilita con disabled.
+    if(this.type == 'color' && this.readOnly == true){
+      this.disabled = true
+    }
+
+
+    this.loadTheme();
+  }
+
+  ngAfterViewInit(): void {
+    //Ajustes Type Range
+    if(this.type == 'range'){
+      this.rangeOnLoad()
+    }
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['theme']) {
+      this.loadTheme();
+    }
+
+    if(changes['text']){
+      if(this.text && this.type == 'number'){
+          this.inputNumber = Number(this.text)
+      }
+  
+      if (this._type == 'color' && this.text == '') {
+        this.text = '#000000'
+      }
+  
+      this.inputText = this.text;
+    }
+  }
+
+  private loadTheme() {
+    switch (this.theme) {
+      case "default":
+        this.iconName = ""
+        break;
+      case "red":
+        this.iconName = "error_outline"
+        break;
+      case "green":
+        this.iconName = "check_circle_outline"
+        break;
+      case "yellow":
+        this.inconSymbol = true
+        this.iconName = "warning"
+        break;
+
+      default:
+        this.iconName = ""
+        break;
+    }
+  }
+
+  onTextChange() {
+    if(this.type == 'number'){
+      this.updateNumber(this.inputText)
+    }
+
+    this.onTouch();
+    this.onChange(this.inputText);
+
+    if (this.inputTimeout) {
+      clearTimeout(this.inputTimeout);
+    }
+
+    this.inputTimeout = setTimeout(() => {
+      this.textChangeEvent.next(this.inputText);
+    }, 500, null);
+  }
+
+  onTextChangeVal(val: string) {
+    if (this.inputTimeout) {
+      clearTimeout(this.inputTimeout);
+    }
+
+    this.inputTimeout = setTimeout(() => {
+      if (val) {
+        this.onTouch();
+        this.onChange(val);
+        this.textChangeEvent.next(val);
+        this.inputText = val;
+      }
+      else {
+        this.onTouch();
+        this.onChange(val);
+        this.textChangeEvent.next(this.inputText);
+      }
+    }, 500, null);
+  }
+
+  clickIcon() {
+    this.clickHelpIconEvent.next();
+  }
+
+  colorClick() {
+    document.getElementById(this.name)?.click();
+  }
+
+  //FUNCIONES PARA TYPE NUMBER 
+  numberDecrease(){
+    if(!this.disabled && !this.readOnly){
+      if(this.min < this.inputNumber){
+        this.inputNumber-=this.step
+      }
+      this.inputText = this.inputNumber.toString()
+      this.onTouch();
+      this.onChange(this.inputText);
+      this.textChangeEvent.next(this.inputText);
+    }
+  }
+
+  numberIncrement(){
+    if(!this.disabled && !this.readOnly){
+      if(this.max){
+        if(this.max > this.inputNumber){
+          this.inputNumber+=this.step
+        }else{
+          this.inputNumber = this.max
+        }
+      }
+      if(!this.max){
+        this.inputNumber+=this.step
+      }
+      this.inputText = this.inputNumber.toString()
+      this.onTouch();
+      this.onChange(this.inputText);
+      this.textChangeEvent.next(this.inputText);
+    }
+  }
+
+  updateNumber(value:any){
+    let value2 = value
+    if(this.max)
+    if(value > this.max){
+      value2 = this.max
+    }
+    if(value < this.min){
+      value2 = this.min
+    }
+
+    this.inputText = value2.toString()
+    this.inputNumber = Number(value2);
+    if(this.typeNumber)
+    this.typeNumber.nativeElement.value = this.inputNumber
+    this.onTouch();
+    this.onChange(this.inputNumber);
+    this.textChangeEvent.next(this.inputText);
+    
+  } 
+  //FIN FUNCIONES PARA TYPE NUMBER 
+  
+  //FUNCIONES PARA TYPE RANGE 
+  rangeOnLoad(){
+    setTimeout(() => {
+      //RANGO TOTAL
+      const rangeMax = this.max ? this.max : 100;
+      //CALCULO LA AMPLITUD PARA PODER POSICIONAR AL 50% POR DEFECTO
+      let amplitudTotal = rangeMax - this.min
+      let porcion = (amplitudTotal * 50) / 100 
+      // INICIALIZA AL 50% CUANDO NO HAY VALOR PREDEFINIDO
+      let value = this.text == '' ? this.min + porcion : this.text
+      value = this.inputText == '' ? this.min + porcion : this.inputText
+      //DEFINO EL TOOTLTIP
+      this.tooltipValue = this.text + this.rangeUnity;
+      //SI ES CHROME APLICO EL FIX
+      const isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
+      if(isChrome) {
+        //CALCCULO EL % A ASIGNAR
+        let porcentaje = ((Number(value) - this.min) / (rangeMax - this.min)) * 100
+        document.getElementById(this.id)?.style.setProperty('margin-top' , '14px');
+        document.getElementById(this.id)?.style.setProperty('margin-bottom' , '14px');
+        document.getElementById(this.id)?.style.setProperty('border-radius' , '4px');
+        document.getElementById(this.id)?.style.setProperty('height' , '8px');
+        document.getElementById(this.id)?.style.setProperty('background' , 'linear-gradient(to right, var(--primary-600) 0%, var(--primary-600) '+porcentaje+'%, var(--neutrals-1000) '+porcentaje+'%, var(--neutrals-1000) 100%)');
+      };
+    }, 0);
+  }
+
+  //FUNCION PARA CHROME CUANDO SE DESLIZA EL SLIDE FUNCIONE CORRECTAMENTE
+  changeRange(value:any){
+    if(this.type == 'range'){
+      const isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
+      const rangeMax = this.max ? this.max : 100;
+      if(isChrome) {
+        let porcentaje = ((value - this.min) / (rangeMax - this.min)) * 100
+        document.getElementById(this.id)?.style.setProperty('background' , 'linear-gradient(to right, var(--primary-600) 0%, var(--primary-600) '+porcentaje+'%, var(--neutrals-1000) '+porcentaje+'%, var(--neutrals-1000) 100%)');
+      };
+    }
+  }
+
+  //FUNCION QUE ACTUALIZA EL TOOLTIP CUANDO SE DESLIZA EL SLIDE
+  updateTooltip(value: string) {
+    if(this.tooltipContainer && this.tooltip){
+      const rangeWidth = this.tooltipContainer.nativeElement.offsetWidth;
+      const rangeMax = this.max ? this.max : 100;
+      let porcentaje = ((Number(value) - this.min) / (rangeMax - this.min)) * 100
+      let ajuste = porcentaje * rangeWidth / 100;
+      this.tooltip.nativeElement.style.left = `${ajuste}px`;
+      this.tooltipValue = value + this.rangeUnity;
+    }
+  }
+  //FIN FUNCIONES PARA TYPE RANGE
+
+  //FUNCIONES PARA QUE FUNCIONE FORM BUILDER
+  writeValue(value: any): void {
+    if (value) {
+      this.inputText = value;
+      this.inputNumber = value
+    }
+  }
+
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: any): void {
+    this.onTouch = fn;
+  }
+}

package/src/lib/input/components/input-textarea/s-input-textarea.component.html

@@ -0,0 +1,15 @@
+<div class="text-area1325 {{class}} {{disabledstyle}}">
+    <textarea
+        [readOnly]="readOnly"
+        [ngClass]="[resize ? '' : 'resize' , theme ? 'theme-' + theme : '']"
+        [ngStyle]=" {'height' : height , 'width' : width}"
+        [disabled]="disabled" 
+        [id]="id"
+        [name]="name"
+        autocomplete="off" 
+        [placeholder]="placeholder" 
+        [(ngModel)]="inputText" 
+        (ngModelChange)="onTextChange()"
+    >
+    </textarea>
+</div>