sidesys-generic-ui 0.0.19 → 0.0.21

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

@@ -0,0 +1,39 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+import { IconsList } from './s-icons';
+
+@Component({
+  selector: 's-icon',
+  templateUrl: './s-icon.component.html',
+  styleUrls: ['./s-icon.component.css']
+})
+
+export class SIconComponent implements OnInit {
+  @Input() icon!: string;
+  @Input() width?: any;
+  @Input() height?: any;
+  @Input() size?: any = '24';
+  @Input() fill?: string = '#8f9bb3';
+  // @Input() class?: string;
+  public code: any ;
+  public link: any = '';
+  viewBox: string = '0 0 24 24';
+
+  constructor(private domSanitizer: DomSanitizer){}
+
+  ngOnInit(): void {
+    
+    this.code = IconsList.find((x: { name: string; }) => x.name === this.icon);
+    this.link = this.domSanitizer.bypassSecurityTrustHtml(this.code.SVG);
+
+    // this.width = parseInt(this.width)+2;
+    // this.height = parseInt(this.height)+2;
+
+    // if (!this.width || !this.height) {
+      this.width = parseInt(this.size);
+      this.height = parseInt(this.size);
+
+      // this.viewBox = "0 0 "+this.width+" " +this.height
+    // }
+  }
+}

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

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

package/src/lib/icon/s-icons.ts

@@ -0,0 +1,55 @@
+/**
+  * Libreria de Iconos en Sidesys
+  * Solo debe ingresarse el contenido del SVG. 
+  */
+
+export const IconsList = [
+    {
+        name: 'home-outline',
+        SVG: '<g  vector-effect="none"><path d="M20.42 10.18L12.71 2.3a1 1 0 0 0-1.42 0l-7.71 7.89A2 2 0 0 0 3 11.62V20a2 2 0 0 0 1.89 2h14.22A2 2 0 0 0 21 20v-8.38a2.07 2.07 0 0 0-.58-1.44zM10 20v-6h4v6zm9 0h-3v-7a1 1 0 0 0-1-1H9a1 1 0 0 0-1 1v7H5v-8.42l7-7.15 7 7.19z"/></g>',
+    },
+    {
+        name: 'list-outline',
+        SVG: '<rect transform="rotate(180 12 12)" opacity="0"/><circle cx="4" cy="7" r="1"/><circle cx="4" cy="12" r="1"/><circle cx="4" cy="17" r="1"/><rect x="7" y="11" width="14" height="2" rx=".94" ry=".94"/><rect x="7" y="16" width="14" height="2" rx=".94" ry=".94"/><rect x="7" y="6" width="14" height="2" rx=".94" ry=".94"/>',
+    },
+    {
+        name: 'plus-circle-outline',
+        SVG: '<rect opacity="0"/><path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm0 18a8 8 0 1 1 8-8 8 8 0 0 1-8 8z"/><path d="M15 11h-2V9a1 1 0 0 0-2 0v2H9a1 1 0 0 0 0 2h2v2a1 1 0 0 0 2 0v-2h2a1 1 0 0 0 0-2z"/></g></g>'
+    },
+    {
+        name: 'arrow-down-outline',
+        SVG: '<g data-name="Layer 2"><g data-name="arrow-ios-downward"><rect width="24" height="24" opacity="0"/><path d="M12 16a1 1 0 0 1-.64-.23l-6-5a1 1 0 1 1 1.28-1.54L12 13.71l5.36-4.32a1 1 0 0 1 1.41.15 1 1 0 0 1-.14 1.46l-6 4.83A1 1 0 0 1 12 16z"/></g></g>'
+    },
+    {
+        name: 'people-outline',
+        SVG: '<g data-name="Layer 2"><g data-name="people"><rect width="24" height="24" opacity="0"/><path d="M9 11a4 4 0 1 0-4-4 4 4 0 0 0 4 4zm0-6a2 2 0 1 1-2 2 2 2 0 0 1 2-2z"/><path d="M17 13a3 3 0 1 0-3-3 3 3 0 0 0 3 3zm0-4a1 1 0 1 1-1 1 1 1 0 0 1 1-1z"/><path d="M17 14a5 5 0 0 0-3.06 1.05A7 7 0 0 0 2 20a1 1 0 0 0 2 0 5 5 0 0 1 10 0 1 1 0 0 0 2 0 6.9 6.9 0 0 0-.86-3.35A3 3 0 0 1 20 19a1 1 0 0 0 2 0 5 5 0 0 0-5-5z"/></g></g>'
+    },
+    {
+        name: 'archive-outline',
+        SVG: '<g data-name="Layer 2"><g data-name="archive"><rect width="24" height="24" transform="rotate(90 12 12)" opacity="0"/><path d="M21 6a3 3 0 0 0-3-3H6a3 3 0 0 0-2 5.22V18a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V8.22A3 3 0 0 0 21 6zM6 5h12a1 1 0 0 1 0 2H6a1 1 0 0 1 0-2zm12 13a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V9h12z"/><rect x="9" y="12" width="6" height="2" rx=".87" ry=".87"/></g></g>'
+    },
+    {
+        name: 'person-outline',
+        SVG: '<g data-name="Layer 2"><g data-name="person"><rect width="24" height="24" opacity="0"/><path d="M12 11a4 4 0 1 0-4-4 4 4 0 0 0 4 4zm0-6a2 2 0 1 1-2 2 2 2 0 0 1 2-2z"/><path d="M12 13a7 7 0 0 0-7 7 1 1 0 0 0 2 0 5 5 0 0 1 10 0 1 1 0 0 0 2 0 7 7 0 0 0-7-7z"/></g></g>'
+    },
+    {
+        name: 'briefcase-outline',
+        SVG: '<g data-name="Layer 2"><g data-name="briefcase"><rect width="24" height="24" opacity="0"/><path d="M19 7h-3V5.5A2.5 2.5 0 0 0 13.5 3h-3A2.5 2.5 0 0 0 8 5.5V7H5a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-8a3 3 0 0 0-3-3zm-4 2v10H9V9zm-5-3.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5V7h-4zM4 18v-8a1 1 0 0 1 1-1h2v10H5a1 1 0 0 1-1-1zm16 0a1 1 0 0 1-1 1h-2V9h2a1 1 0 0 1 1 1z"/></g></g>'
+    },
+    {
+        name: 'plus-circle',
+        SVG: '<path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm0 18a8 8 0 1 1 8-8 8 8 0 0 1-8 8z"/><path d="M15 11h-2V9a1 1 0 0 0-2 0v2H9a1 1 0 0 0 0 2h2v2a1 1 0 0 0 2 0v-2h2a1 1 0 0 0 0-2z"/>'
+    },
+    {
+        name: 'plus-outline',
+        SVG: '<path d="M19 11h-6V5a1 1 0 0 0-2 0v6H5a1 1 0 0 0 0 2h6v6a1 1 0 0 0 2 0v-6h6a1 1 0 0 0 0-2z"/>'
+    },
+    {
+        name: 'line-height',
+        SVG: '<rect x="20.5" y="0.761719" width="1" height="20" transform="rotate(90 20.5 0.761719)" fill="#898D94"/><path d="M12.2539 12.5352L10.5117 7.46484L8.66016 12.5352H12.2539ZM9.69922 5.76172H11.457L15.6211 17.2383H13.918L12.7539 13.8008H8.21484L6.97266 17.2383H5.37891L9.69922 5.76172Z" fill="#898D94"/><rect x="20.5" y="21.2383" width="1" height="20" transform="rotate(90 20.5 21.2383)" fill="#898D94"/>',
+    },
+    {
+        name: 'letter-spacing',
+        SVG: '<rect x="0.878906" y="0.5" width="1" height="20" fill="#898D94"/><path d="M12.7539 11.5352L11.0117 6.46484L9.16016 11.5352H12.7539ZM10.1992 4.76172H11.957L16.1211 16.2383H14.418L13.2539 12.8008H8.71484L7.47266 16.2383H5.87891L10.1992 4.76172Z" fill="#898D94"/><rect x="20.1211" y="0.5" width="1" height="20" fill="#898D94"/>'
+    }
+];

package/src/lib/icon-material/index.ts

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

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

@@ -0,0 +1,5 @@
+<div #icon class="content-div-icon16809">
+    <span attr.style="{{style}}" class="{{optionsType}}">
+        <ng-content></ng-content>
+    </span>
+</div>

package/src/lib/icon-material/s-icon-material.component.scss

@@ -0,0 +1,38 @@
+@import '../fonts-material.scss';
+
+.material-icons {
+    font-family: "Material Icons";
+    font-weight: normal;
+    font-style: normal;
+    font-size: 1.5rem;
+    line-height: 1;
+    letter-spacing: normal;
+    text-transform: none;
+    display: inline-block;
+    white-space: nowrap;
+    word-wrap: normal;
+    direction: ltr;
+    font-feature-settings: "liga";
+    -webkit-font-feature-settings: "liga";
+    -webkit-font-smoothing: antialiased;
+}
+
+.material-symbols-outlined {
+    font-family: 'Material Symbols Outlined';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 1.5rem;
+    line-height: 1;
+    letter-spacing: normal;
+    text-transform: none;
+    display: inline-block;
+    white-space: nowrap;
+    word-wrap: normal;
+    direction: ltr;
+    -webkit-font-feature-settings: 'liga';
+    -webkit-font-smoothing: antialiased;
+}
+
+.content-div-icon16809{
+    display: flex;
+}

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

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

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

@@ -0,0 +1,51 @@
+import { Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
+
+@Component({
+  selector: 's-icon-mat',
+  templateUrl: './s-icon-material.component.html',
+  styleUrls: ['./s-icon-material.component.scss'],
+})
+
+export class SIconMaterialComponent implements OnInit {
+
+  @ViewChild('icon',{static: true}) classIcon!: ElementRef ;
+
+  @Input() size?: any = undefined;
+  @Input() color: any = undefined;
+
+  @Input() fill: boolean = false;
+  @Input() weight: number = 400;
+  @Input() grade: number = 0;
+  @Input() opticalSize: number = 48;
+  
+  @Input() style?: string = '';
+  @Input() type: "symbol" | "icon" = "icon";
+  optionsType!: string;
+  fillTemp!: number;
+
+
+  constructor(){}
+
+  ngOnInit(): void {
+
+    if(this.type == "symbol"){
+
+      this.optionsType = "material-symbols-outlined";
+      
+      this.fillTemp = this.fill ? 1 : 0;
+      let el = this.classIcon.nativeElement
+      el.setAttribute('style' , "font-variation-settings: 'FILL' "+ this.fillTemp  +", 'wght' "+ this.weight  +", 'GRAD' "+ this.grade  +", 'opsz' "+ this.opticalSize);
+    }else{
+      this.optionsType = "material-icons";
+    }
+    
+    if(typeof this.color !== "undefined"){
+      this.style = this.style + ' color:'+ this.color +";";
+    }
+
+    if(typeof this.size !== "undefined"){
+      this.style = this.style + ' font-size:'+ this.size +"px;";
+    }
+  }
+
+  }

package/src/lib/icon-material/s-icon-material.module.ts

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

package/src/lib/input/components/error-control/s-error-control.component.html

@@ -0,0 +1,4 @@
+<label class="label-content label-content-{{theme}} {{size}}">
+    <s-icon-mat *ngIf="icon" class="icon-{{theme}}">{{iconName}}</s-icon-mat>
+    <ng-content></ng-content>
+</label>

package/src/lib/input/components/error-control/s-error-control.component.scss

@@ -0,0 +1,54 @@
+
+.label-content{
+    display: inline-flex;
+    align-items: center;
+    margin-left: 3px;
+    font-weight: 400;
+    font-size: 0.875rem;
+    line-height: 0px;
+}
+
+.label-content.sm{
+    font-size: 0.625rem;
+}
+
+.label-content s-icon-mat{
+    display: flex;
+    align-items: center;
+    margin-right: 3px;
+    
+    span{
+        font-size: 1.01rem;
+    }
+}
+
+//icon default , red , green , yellow
+
+.icon-default , .label-content-default{
+    color: var(--secondary-500)
+}
+
+.icon-yellow , .label-content-yellow{
+    color: var(--yellow-600)
+}
+
+.icon-red , .label-content-red{
+    color: var(--red-600)
+}
+
+.icon-green , .label-content-green{
+    color: var(--green-600)
+}
+
+.form-group{
+    margin: 5px 5px;
+    .label{
+        font-weight: 400;
+        font-size: 0.875rem;
+        color: var(--secondary-600)
+    }
+    .content-input-main-626.sm{
+        margin: 0px;
+    }
+}
+

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

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

package/src/lib/input/components/error-control/s-error-control.component.ts

@@ -0,0 +1,50 @@
+import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 's-error-control',
+  templateUrl: './s-error-control.component.html',
+  styleUrls: ['./s-error-control.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+})
+export class SErrorControl implements OnInit {
+
+  @Input() theme: 'default' | 'red' | 'green' | 'yellow' = "default";  //default , red , green , yellow
+  @Input() icon:boolean = false;  
+  @Input() iconCustom:string = "";
+  @Input() size: 'sm' | 'm' = 'm';
+
+
+  iconName: string = ''
+
+  constructor() { }
+
+  ngOnInit(): void {
+
+    if(this.iconCustom == ""){
+
+      switch (this.theme) {
+        case "default":
+          this.iconName = "stars"
+        break;
+        case "red":
+            this.iconName = "error"
+        break;
+        case "green":
+        this.iconName = "check_circle"
+        break;
+        case "yellow":
+            this.iconName = "info"
+        break;
+      
+        default:
+          this.iconName = "stars"
+        break;
+      }
+
+    }else{
+      this.iconName = this.iconCustom
+    }
+
+  }
+
+}

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

@@ -0,0 +1,270 @@
+<ng-container [ngSwitch]="type">
+    <!-- El switch case con cada caso por input  ['text', 'password', 'email' , 'phone' , 'url' , 'search']-->
+
+    <!-- case text -->
+    <ng-container *ngSwitchCase="'text'">
+        <div
+            class="content-input-main-626 content-input-main-text {{size}} theme-{{theme}} {{classAdd}} {{disabledstyle}}">
+            <!-- <div class="content-left">
+                <s-icon-mat class="icon">email</s-icon-mat>
+            </div> -->
+            <div class="content-center">
+                <input 
+                [readOnly]="readOnly" 
+                [disabled]="disabled" 
+                [type]="type" 
+                [id]="id" 
+                [name]="name" 
+                autocomplete="off"
+                [placeholder]="placeHolder"
+                [(ngModel)]="inputText"
+                (ngModelChange)="onTextChange()"
+                >
+            </div>
+            <div *ngIf="theme != 'default'" class="content-right">
+                <s-icon-mat [type]="inconSymbol?'symbol':'icon'" class="icon report">{{iconName}}</s-icon-mat>
+            </div>
+
+            <div *ngIf="theme == 'default' && help" class="content-right">
+                <s-icon-mat (click)="clickIcon()" class="icon cursor">help_outline</s-icon-mat>
+            </div>
+        </div>
+    </ng-container>
+
+    <!-- case password -->
+    <ng-container *ngSwitchCase="'password'">
+        <div
+            class="content-input-main-626 content-input-main-password {{size}} theme-{{theme}} {{classAdd}} {{disabledstyle}}">
+            <div class="content-left">
+                <s-icon-mat class="icon">vpn_key</s-icon-mat>
+            </div>
+            <div class="content-center">
+                <input [readOnly]="readOnly" [id]="id ? id : ''" [disabled]="disabled" type="{{visibility ? 'text' : 'password'}}" [placeholder]="placeHolder" [(ngModel)]="inputText"
+                    (ngModelChange)="onTextChange()">
+            </div>
+            <div class="content-right">
+                <s-icon-mat [type]="inconSymbol?'symbol':'icon'" class="icon cursor"
+                    (click)="visibility = !visibility">{{visibility ? 'visibility' :
+                    'visibility_off'}}</s-icon-mat>
+            </div>
+        </div>
+    </ng-container>
+
+    <!-- case email -->
+    <ng-container *ngSwitchCase="'email'">
+        <div
+            class="content-input-main-626 content-input-main-email {{size}} theme-{{theme}} {{classAdd}} {{disabledstyle}}">
+            <div class="content-left">
+                <s-icon-mat class="icon">mail_outline</s-icon-mat>
+            </div>
+            <div class="content-center">
+                <input [readOnly]="readOnly"  [id]="id ? id : ''" [disabled]="disabled" [type]="type" [name]="name" autocomplete="off"
+                    [placeholder]="placeHolder" [(ngModel)]="inputText" (ngModelChange)="onTextChange()">
+            </div>
+            <div *ngIf="theme != 'default'" class="content-right">
+                <s-icon-mat [type]="inconSymbol?'symbol':'icon'" class="icon report">{{iconName}}</s-icon-mat>
+            </div>
+
+            <div *ngIf="theme == 'default' && help" class="content-right">
+                <s-icon-mat (click)="clickIcon()" class="icon cursor">help_outline</s-icon-mat>
+            </div>
+        </div>
+    </ng-container>
+
+
+    <!-- case phone -->
+    <ng-container *ngSwitchCase="'phone'">
+        <div
+            class="content-input-main-626 content-input-main-phone {{size}} theme-{{theme}} {{classAdd}} {{disabledstyle}}">
+            <div class="content-left">
+                <s-icon-mat class="icon">phone</s-icon-mat>
+            </div>
+            <div class="content-center">
+                <input [readOnly]="readOnly"  [id]="id ? id : ''" [disabled]="disabled" [type]="type" [name]="name" autocomplete="off"
+                    [placeholder]="placeHolder" [(ngModel)]="inputText" (ngModelChange)="onTextChange()">
+            </div>
+            <div *ngIf="theme != 'default'" class="content-right">
+                <s-icon-mat [type]="inconSymbol?'symbol':'icon'" class="icon report">{{iconName}}</s-icon-mat>
+            </div>
+
+            <div *ngIf="theme == 'default' && help" class="content-right">
+                <s-icon-mat (click)="clickIcon()" class="icon cursor">help_outline</s-icon-mat>
+            </div>
+        </div>
+    </ng-container>
+
+
+    <!-- case url -->
+    <ng-container *ngSwitchCase="'url'">
+        <div
+            class="content-input-main-626 content-input-main-url {{size}} theme-{{theme}} {{classAdd}} {{disabledstyle}}">
+            <div class="content-left">
+                http://
+            </div>
+            <div class="content-center">
+                <input [readOnly]="readOnly"  [id]="id ? id : ''" [disabled]="disabled" [type]="type" [name]="name" autocomplete="off"
+                    [placeholder]="placeHolder" [(ngModel)]="inputText" (ngModelChange)="onTextChange()">
+            </div>
+            <div *ngIf="theme != 'default'" class="content-right">
+                <s-icon-mat [type]="inconSymbol?'symbol':'icon'" class="icon report">{{iconName}}</s-icon-mat>
+            </div>
+
+            <div *ngIf="theme == 'default' && help" class="content-right">
+                <s-icon-mat (click)="clickIcon()" class="icon cursor">help_outline</s-icon-mat>
+            </div>
+        </div>
+    </ng-container>
+
+
+    <!-- case search -->
+    <ng-container *ngSwitchCase="'search'">
+        <div
+            class="content-input-main-626 content-input-main-search {{size}} theme-{{theme}} {{classAdd}} {{disabledstyle}}">
+            <div class="content-left">
+                <s-icon-mat class="icon">search</s-icon-mat>
+            </div>
+            <div class="content-center">
+                <input [readOnly]="readOnly"  [id]="id ? id : ''" [disabled]="disabled" [type]="type" [name]="name" autocomplete="off"
+                    [placeholder]="placeHolder" [(ngModel)]="inputText" (ngModelChange)="onTextChange()">
+            </div>
+            <!-- <div class="content-right">
+                <s-icon-mat class="icon cursor">help_outline</s-icon-mat>
+            </div> -->
+        </div>
+    </ng-container>
+
+    <!-- case color -->
+    <ng-container *ngSwitchCase="'color'">
+        <div
+            class="content-input-main-626 content-input-main-color {{size}} theme-{{theme}} {{classAdd}} {{disabledstyle}}">
+            <div class="content-left">
+                <input [readOnly]="readOnly" #color [id]="name" [name]="name" type="color" [disabled]="disabled" [(ngModel)]="inputText"
+                    (ngModelChange)="onTextChange()" style="width: 40px; padding: 0;">
+            </div>
+            <div class="content-center" (click)="!this.readOnly ? this.color.click() : null">
+                <input [readOnly]="readOnly" [id]="id ? id : ''" [type]="text" autocomplete="off" [placeholder]="placeHolder" [(ngModel)]="inputText" [disabled]="disabled">
+            </div>
+            <div *ngIf="theme != 'default'" class="content-right">
+                <s-icon-mat [type]="inconSymbol?'symbol':'icon'" class="icon report">{{iconName}}</s-icon-mat>
+            </div>
+
+            <div *ngIf="theme == 'default' && help" class="content-right">
+                <s-icon-mat (click)="clickIcon()" class="icon cursor">help_outline</s-icon-mat>
+            </div>
+        </div>
+    </ng-container>
+
+    <!-- case date -->
+    <ng-container *ngSwitchCase="'date'">
+        <div
+            class="content-input-main-626 content-input-main-text {{size}} theme-{{theme}} {{classAdd}} {{disabledstyle}}">
+            <div class="content-center">
+                <input [readOnly]="readOnly"  [id]="id ? id : ''" [disabled]="disabled" [type]="type" [name]="name" autocomplete="off"
+                    [placeholder]="placeHolder" (ngModelChange)="onTextChangeVal($event)"
+                    [ngModel]="inputText">
+            </div>
+            <div *ngIf="theme != 'default'" class="content-right">
+                <s-icon-mat [type]="inconSymbol?'symbol':'icon'" class="icon report">{{iconName}}</s-icon-mat>
+            </div>
+            <div *ngIf="theme == 'default' && help" class="content-right">
+                <s-icon-mat (click)="clickIcon()" class="icon cursor">help_outline</s-icon-mat>
+            </div>
+        </div>
+    </ng-container>
+
+    <!-- case time -->
+    <ng-container *ngSwitchCase="'time'">
+        <div
+            class="content-input-main-626 content-input-main-text {{size}} theme-{{theme}} {{classAdd}} {{disabledstyle}}">
+            <div class="content-center">
+                <input [id]="id ? id : ''" [disabled]="disabled" [type]="type" [name]="name" autocomplete="off"
+                    [placeholder]="placeHolder" (ngModelChange)="onTextChangeVal($event)"
+                    [ngModel]="inputText">
+            </div>
+            <div *ngIf="theme != 'default'" class="content-right">
+                <s-icon-mat [type]="inconSymbol?'symbol':'icon'" class="icon report">{{iconName}}</s-icon-mat>
+            </div>
+            <div *ngIf="theme == 'default' && help" class="content-right">
+                <s-icon-mat (click)="clickIcon()" class="icon cursor">help_outline</s-icon-mat>
+            </div>
+        </div>
+    </ng-container>
+
+    <!-- case number -->
+    <ng-container *ngSwitchCase="'number'">
+        <div class="d-flex align-center">
+            <div class="content-left mr-1">
+                <s-button [disabled]="disabled" (click)="numberDecrease()" [size]="size" [pill]="true" [invert]="true" class="button-input-626"><s-icon-mat>remove</s-icon-mat></s-button>
+            </div>
+            <div class="content-input-main-626 content-input-main-text content-input-main-number {{size}} theme-{{theme}} {{classAdd}} {{disabledstyle}} w-100">
+                <div class="content-center">
+                    <input [readOnly]="readOnly"  [id]="id ? id : ''" #typeNumber [disabled]="disabled" [type]="type" [name]="name" autocomplete="off"
+                        [placeholder]="placeHolder" [(ngModel)]="inputText" (ngModelChange)="onTextChange()"
+                        [max]="max"
+                        [min]="min"
+                        [step]="step"
+                        >
+                </div>
+
+                <div *ngIf="theme != 'default'" class="content-right">
+                    <s-icon-mat [type]="inconSymbol?'symbol':'icon'" class="icon report">{{iconName}}</s-icon-mat>
+                </div>
+
+                <div *ngIf="theme == 'default' && help" class="content-right">
+                    <s-icon-mat (click)="clickIcon()" class="icon cursor">help_outline</s-icon-mat>
+                </div>
+            </div>
+            <div class="content-left ml-1">
+                <s-button [disabled]="disabled" (click)="numberIncrement()" [size]="size" [pill]="true" [invert]="true" class="button-input-626"><s-icon-mat>add</s-icon-mat></s-button>
+            </div>
+        </div>
+    </ng-container>
+
+    <!-- case range -->
+     <ng-container *ngSwitchCase="'range'">
+        <div class="content-input-main-range {{size}} theme-{{theme}} {{classAdd}} {{disabledstyle}}">
+            <div class="tooltip tooltip-{{disabled}}" #tooltipContainer>
+                <input
+                    #rangeField
+                    [readOnly]="readOnly" 
+                    [disabled]="disabled" 
+                    [type]="type" 
+                    [id]="id" 
+                    [name]="name" 
+                    autocomplete="off"
+                    [placeholder]="placeHolder"
+                    [(ngModel)]="inputText"
+                    [min]="min"
+                    [max]="max"
+                    [step]="step"
+                    (mousemove)="changeRange(rangeField.value)"
+                    (ngModelChange)="onTextChange()"
+                    (input)="updateTooltip(rangeField.value)"
+                    >
+                    <span class="tooltiptext" #tooltip>{{ tooltipValue }}</span>
+            </div>
+        </div>
+    </ng-container>
+
+    <!-- case default -->
+    <ng-container *ngSwitchDefault>
+        <div
+            class="content-input-main-626 content-input-main-text {{size}} theme-{{theme}} {{classAdd}} {{disabledstyle}}">
+            <!-- <div class="content-left">
+                <s-icon-mat class="icon">email</s-icon-mat>
+            </div> -->
+            <div class="content-center">
+                <input [readOnly]="readOnly" [id]="id ? id : 'generic'" [disabled]="disabled" [type]="type" [name]="name" autocomplete="off"
+                    [placeholder]="placeHolder" [(ngModel)]="inputText" (ngModelChange)="onTextChange()">
+            </div>
+            <div *ngIf="theme != 'default'" class="content-right">
+                <s-icon-mat [type]="inconSymbol?'symbol':'icon'" class="icon report">{{iconName}}</s-icon-mat>
+            </div>
+
+            <div *ngIf="theme == 'default' && help" class="content-right">
+                <s-icon-mat (click)="clickIcon()" class="icon cursor">help_outline</s-icon-mat>
+            </div>
+        </div>
+    </ng-container>
+
+</ng-container>