ngx-wapp-components 1.8.2 → 1.8.3

package/src/lib/edit/w-edit-input-number/w-edit-input-number.component.scss

@@ -0,0 +1,247 @@
+@import '../../../styles/_variables.scss';
+
+.w-edit-input-number-field{
+    margin: $spacingZero;
+}
+
+/* SMALL */
+
+.w-edit-input-number-small-label{
+    @extend .w-input-small-label-text;
+    @extend .w-input-small-label-text-content;
+
+    &.no-top{
+        @extend .w-input-small-label-text-content-no-top;
+    }
+}
+
+/* .input-number-height-small{
+    height: $spacingXXXL !important;
+} */
+
+:host ::ng-deep .w-edit-input-number-small-height .p-inputnumber .p-inputnumber-input {
+    height: $spacingXXXL !important;
+}
+
+.w-edit-input-number-small {
+    width: 100%;
+}
+
+:host ::ng-deep .w-edit-input-number-small .p-inputnumber .p-inputnumber-input{
+    @extend .w-input-small-placeholder-text;
+    border-radius: $borderRadius;
+    border-width: $borderWidth;
+    padding: calc($spacingXS - $borderWidth) calc($spacingS - $borderWidth) !important;
+    width: 100%;
+    border: $borderWidth solid $black200;
+}
+
+:host ::ng-deep .w-edit-input-number-small .p-inputnumber .p-inputnumber-input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
+    color: $text700 !important;
+}
+
+:host ::ng-deep .w-edit-input-number-small .p-inputnumber .p-inputnumber-input::-moz-placeholder { /* Firefox 19+ */
+    color: $text700 !important;
+}
+
+:host ::ng-deep .w-edit-input-number-small .p-inputnumber .p-inputnumber-input:-ms-input-placeholder { /* IE 10+ */
+    color: $text700 !important;
+}
+
+:host ::ng-deep .w-edit-input-number-small .p-inputnumber .p-inputnumber-input:-moz-placeholder { /* Firefox 18- */
+    color: $text700 !important;
+}
+
+:host ::ng-deep .w-edit-input-number-small .p-inputnumber .p-inputnumber-input:hover { 
+    @extend .hover;
+}
+
+:host ::ng-deep .w-edit-input-number-small .p-inputnumber .p-inputnumber-input:focus {
+    @extend .focus;
+    border-radius: $borderRadius;
+    border: $borderWidth solid $secondary50;
+}
+
+:host ::ng-deep .w-edit-input-number-small .p-inputnumber .p-inputnumber-input:focus::-moz-placeholder { 
+    color:transparent; 
+}
+
+:host ::ng-deep .w-edit-input-number-small .p-inputnumber .p-inputnumber-input:focus::-webkit-input-placeholder { 
+    color:transparent; 
+}
+
+:host ::ng-deep .w-edit-input-number-small .p-inputnumber .p-inputnumber-input:focus:-ms-input-placeholder { 
+    color:transparent; 
+}
+
+:host ::ng-deep .w-edit-input-number-small .p-inputnumber .p-inputnumber-input:focus:-moz-placeholder { 
+    color:transparent; 
+}
+
+:host ::ng-deep .w-edit-input-number-small .p-inputnumber .p-inputnumber-input:disabled { 
+    background-color: $black100;
+    border-color: $black200;
+    color: $text700;//$black400;
+    opacity: 1;
+}
+
+.w-edit-input-number-small-label-disabled { 
+    @extend .w-input-small-label-disabled;
+    @extend .w-input-small-label-text-content;
+
+    &.no-top{
+        @extend .w-input-small-label-text-content-no-top;
+    }
+}
+
+:host ::ng-deep .w-edit-input-number-small-valid .p-inputnumber .p-inputnumber-input {
+    @extend .input-generic-valid;
+}
+
+:host ::ng-deep .w-edit-input-number-small-valid .p-inputnumber .p-inputnumber-input:focus{
+    @extend .input-generic-valid-focus;
+    padding-left: $spacingS;
+}
+
+:host ::ng-deep .w-edit-input-number-small-warning .p-inputnumber .p-inputnumber-input{
+    @extend .input-generic-warning;
+}
+
+/* TODO: Revisar si habrá un fecto focus en estados de validación */
+/* :host ::ng-deep .w-edit-input-number-small-warning .p-inputnumber .p-inputnumber-input:focus{
+    @extend .input-generic-warning-focus;
+    padding-left: $spacingS;
+} */
+
+:host ::ng-deep p-inputnumber.w-edit-input-number-small.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext {
+    @extend .input-generic-error;    
+}
+
+/* :host ::ng-deep .w-edit-input-number-small-error .p-inputnumber .p-inputnumber-input:focus{
+    @extend .input-generic-error-focus;
+    padding-left: $spacingS;
+} */
+
+/* :host ::ng-deep .w-edit-input-number-small-error .p-inputnumber .p-inputnumber-input:focus {
+    @extend .input-generic-error;
+    box-shadow:  $spacingZero $spacingZero $borderWidth $borderWidth $statusError3 !important;
+    padding-left: $spacingS;
+} */
+
+/* MEDIUM */
+
+/* .input-number-height{
+    height: 76px !important;
+} */
+
+:host ::ng-deep .w-edit-input-number-medium-height .p-inputnumber .p-inputnumber-input {
+    height: 40px !important;
+}
+
+.w-edit-input-number-medium-label {
+    @extend .w-input-medium-label-text;
+    @extend .w-input-small-label-text-content;
+}
+
+/* .label-height {
+    height: 36px;
+} */
+
+.w-edit-input-number-medium {
+    width: 100%;
+}
+
+:host ::ng-deep .w-edit-input-number-medium .p-inputnumber .p-inputnumber-input{
+    @extend .w-input-medium-placeholder-text;
+    border-radius: $borderRadius;
+    border-width: $borderWidth;
+    padding: calc($spacingXS - $borderWidth) calc($spacingM - $borderWidth) !important;
+    width: 100%;
+    border: $borderWidth solid $black200;
+}
+
+:host ::ng-deep .w-edit-input-number-medium .p-inputnumber .p-inputnumber-input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
+    color: $text700 !important;
+}
+
+:host ::ng-deep .w-edit-input-number-medium .p-inputnumber .p-inputnumber-input::-moz-placeholder { /* Firefox 19+ */
+    color: $text700 !important;
+}
+
+:host ::ng-deep .w-edit-input-number-medium .p-inputnumber .p-inputnumber-input:-ms-input-placeholder { /* IE 10+ */
+    color: $text700 !important;
+}
+
+:host ::ng-deep .w-edit-input-number-medium .p-inputnumber .p-inputnumber-input:-moz-placeholder { /* Firefox 18- */
+    color: $text700 !important;
+}
+
+:host ::ng-deep .w-edit-input-number-medium .p-inputnumber .p-inputnumber-input:hover { 
+    @extend .hover;
+}
+
+:host ::ng-deep .w-edit-input-number-medium .p-inputnumber .p-inputnumber-input:focus {
+    @extend .focus;
+    border-radius: $borderRadius;
+    border: $borderWidth solid $secondary50;
+    padding-left: calc($spacingM - $borderWidth);
+}
+
+:host ::ng-deep .w-edit-input-number-medium .p-inputnumber .p-inputnumber-input:focus::-moz-placeholder { 
+    color:transparent; 
+}
+
+:host ::ng-deep .w-edit-input-number-medium .p-inputnumber .p-inputnumber-input:focus::-webkit-input-placeholder { 
+    color:transparent; 
+}
+
+:host ::ng-deep .w-edit-input-number-medium .p-inputnumber .p-inputnumber-input:focus:-ms-input-placeholder { 
+    color:transparent; 
+}
+
+:host ::ng-deep .w-edit-input-number-medium .p-inputnumber .p-inputnumber-input:focus:-moz-placeholder { 
+    color:transparent; 
+}
+
+:host ::ng-deep .w-edit-input-number-medium .p-inputnumber .p-inputnumber-input:disabled { 
+    background-color: $black100;
+    border-color: $black200;
+    color: $text700;//$black400;
+    opacity: 1;
+}
+
+.w-edit-input-number-medium-label-disabled { 
+    @extend .w-input-medium-label-disabled;
+    @extend .w-input-small-label-text-content;
+}
+
+:host ::ng-deep .w-edit-input-number-medium-valid .p-inputnumber .p-inputnumber-input {
+    @extend .input-generic-valid;
+}
+
+:host ::ng-deep .w-edit-input-number-medium-valid .p-inputnumber .p-inputnumber-input:focus{
+    @extend .input-generic-valid-focus;
+}
+
+:host ::ng-deep .w-edit-input-number-medium-warning .p-inputnumber .p-inputnumber-input{
+    @extend .input-generic-warning;
+}
+
+/* TODO: Revisar si habrá un fecto focus en estados de validación */
+/* :host ::ng-deep .w-edit-input-number-medium-warning .p-inputnumber .p-inputnumber-input:focus{
+    @extend .input-generic-warning-focus;
+} */
+
+:host ::ng-deep p-inputnumber.w-edit-input-number-medium.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext {
+    @extend .input-generic-error;
+}
+
+/* :host ::ng-deep .w-edit-input-number-medium-error .p-inputnumber .p-inputnumber-input:focus{
+    @extend .input-generic-error-focus;
+} */
+
+/* :host ::ng-deep .w-edit-input-number-medium-error .p-inputnumber .p-inputnumber-input:focus {
+    @extend .input-generic-error;
+    box-shadow:  $spacingZero $spacingZero $borderWidth $borderWidth $statusError3 !important;
+    padding-left: $spacingM;
+} */

package/src/lib/edit/w-edit-input-number/w-edit-input-number.component.spec.ts

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

package/src/lib/edit/w-edit-input-number/w-edit-input-number.component.ts

@@ -0,0 +1,86 @@
+import { Component, EventEmitter, Input, Optional, Output, Self, forwardRef } from '@angular/core';
+import { ControlValueAccessor, FormControl, FormControlName, NG_VALUE_ACCESSOR, NgControl, Validators } from '@angular/forms';
+import { SizeType } from '../../shared/enums/enum';
+
+@Component({
+  selector: 'w-edit-input-number',
+  templateUrl: './w-edit-input-number.component.html',
+  styleUrls: ['./w-edit-input-number.component.scss'],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => WEditInputNumberComponent),
+      multi: true
+    }
+  ]
+})
+export class WEditInputNumberComponent implements ControlValueAccessor{
+  value: number = 0;
+
+  @Input('label') label!: string;
+  @Input('placeholder') placeholder: string = "";
+  @Input('successMessage') successMessage: string = "";
+  @Input('mode') mode: string = "decimal";
+  @Input('minFractionDigits') minFractionDigits: number = 0;
+  @Input('maxFractionDigits') maxFractionDigits: number = 0;
+
+  @Input('required') required: boolean = false;
+  @Input('requiredErrorDescription') requiredErrorDescription: string = "Data is required";
+
+  @Input('disabled') disabled: boolean = false;
+
+  @Input('pattern') pattern: string = "";
+  @Input('patternErrorDescription') patternErrorDescription: string = "";
+
+  @Input('min') min!: number;
+  @Input('minErrorDescription') minErrorDescription: string = "Min error";
+
+  @Input('max') max!: number;
+  @Input('maxErrorDescription') maxErrorDescription: string = "Max error";
+
+  @Input('autofocus') autofocus: boolean = false;
+  @Input('size') size: string = "small";
+
+  @Input('formControl') formControl!: FormControl | null;
+  @Input('removePaddingTop') removePaddingTop: boolean = false; 
+
+  isTouched: boolean = false;
+  onChange = (_: number) => { }
+  onTouch = () => { }
+
+  writeValue(value: any): void {
+    this.value = +value;
+  }
+
+  registerOnChange(onChange: any): void {
+    this.onChange = onChange;
+  }
+
+  registerOnTouched(onTouch: any): void {
+    this.onTouch = onTouch;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+  }
+
+  onValueChanged(){
+    this.onChange(+this.value);
+    this.onTouch();
+  }
+
+  onInputBlur(event: Event){
+    const newValue: number = +(event.target as HTMLInputElement).value;
+    this.value = newValue;
+    this.onChange(this.value);
+    this.onTouch();
+  }
+  
+  getSizeName(value: number): string {
+    return SizeType[value];
+  }
+  
+  get sizeType(): typeof SizeType {
+    return SizeType;
+  }
+}

package/src/lib/edit/w-edit-input-text/w-edit-input-text.component.html

@@ -0,0 +1,65 @@
+<div *ngIf="formControl; else noNgControl" class="w-edit-input-text-select-field p-fluid field">
+    <label *ngIf="(label != undefined && label.length > 0)"
+            [ngClass]="{'w-edit-input-text-small-label': getSizeName(sizeType.small) == size && !disabled, 
+                        'w-edit-input-text-small-label-disabled': getSizeName(sizeType.small) == size && disabled,
+                        'w-edit-input-text-medium-label': getSizeName(sizeType.medium) == size && !disabled,
+                        'w-edit-input-text-medium-label-disabled': getSizeName(sizeType.medium) == size && disabled, 
+                        'no-top': removePaddingTop == true}" for="w-text">
+        {{label}}
+    </label>
+    <div *ngIf="(label != undefined && label == '')" class="w-input-no-label-height"></div>
+    <span *ngIf="getSizeName(sizeType.medium) == size;" [ngClass]="{'p-input-icon-right' : inputIcon != ''}">
+        <i *ngIf="inputIcon != ''" class="w-edit-input-text-medium-icon pi {{inputIcon}}"></i>
+        <input pInputText
+            [ngClass]="{'w-edit-input-text-medium-error': formControl.hasError('required') && formControl.dirty && requiredErrorDescription != '',
+                        'w-edit-input-text-medium-valid': formControl.valid && formControl.touched  && successMessage != '',
+                        'w-edit-input-text-medium-warning': formControl.invalid && (formControl.hasError('minlength') || formControl.hasError('maxlength'))}"
+            class="w-edit-input-text-medium-height w-edit-input-text-medium" id="w-textarea" [placeholder]="placeholder" [required]="required"
+            [formControl]="formControl">
+    </span>
+    <span *ngIf="getSizeName(sizeType.small) == size;" [ngClass]="{'p-input-icon-right' : inputIcon != ''}">
+        <i *ngIf="inputIcon != ''" class="w-edit-input-text-small-icon pi {{inputIcon}}"></i>
+        <input pInputText
+            [ngClass]="{'w-edit-input-text-small-error': formControl.hasError('required') && formControl.dirty && requiredErrorDescription != '',
+                        'w-edit-input-text-small-valid': formControl.valid && formControl.touched  && successMessage != '',
+                        'w-edit-input-text-small-warning': formControl.invalid && (formControl.hasError('minlength') || formControl.hasError('maxlength'))}"
+            minlength="{{minlength}}" maxlength="{{maxlength}}" 
+            class="w-edit-input-text-height-small w-edit-input-text-small" id="w-textarea"
+            [placeholder]="placeholder" [required]="required" [formControl]="formControl">
+    </span>
+    <!-- <small *ngIf="formControl.valid && formControl.touched"
+        class="w-alert-message-height w-input-success-alert-text p-error block">{{successMessage}}</small> -->
+    <small *ngIf="formControl.invalid && formControl.hasError('maxlength') && formControl.touched "
+        class="w-alert-message-height w-input-warning-alert-text p-error block">{{maxlengthErrorDescription}}</small>
+    <small *ngIf="formControl.invalid && formControl.hasError('minlength') && formControl.touched "
+        class="w-alert-message-height w-input-warning-alert-text p-error block">{{minlengthErrorDescription}}</small>
+    <small *ngIf="formControl.hasError('required') && formControl.dirty"
+        class="w-alert-message-height w-input-error-alert-text p-error block">{{requiredErrorDescription}}</small>
+</div>
+<ng-template #noNgControl>
+    <div class="w-edit-input-text-select-field p-fluid field">
+        <label *ngIf="(label != undefined && label.length > 0)"
+            [ngClass]="{'w-edit-input-text-small-label': getSizeName(sizeType.small) == size && !disabled, 
+                        'w-edit-input-text-small-label-disabled': getSizeName(sizeType.small) == size && disabled,
+                        'w-edit-input-text-medium-label': getSizeName(sizeType.medium) == size && !disabled,
+                        'w-edit-input-text-medium-label-disabled': getSizeName(sizeType.medium) == size && disabled, 
+                        'no-top': removePaddingTop == true}" for="w-text">
+            {{label}}
+        </label>
+        <div *ngIf="(label != undefined && label == '')" class="w-input-no-label-height"></div>
+        <span *ngIf="getSizeName(sizeType.medium) == size" [ngClass]="{'p-input-icon-right' : inputIcon != ''}">
+            <i *ngIf="inputIcon != ''" class="w-edit-input-text-medium-icon pi {{inputIcon}}"></i>
+            <input pInputText minlength="{{minlength}}" maxlength="{{maxlength}}" [required]="required"
+                class="w-edit-input-text-medium-height w-edit-input-text-medium" id="w-textarea" [placeholder]="placeholder"
+                [required]="required" [(ngModel)]="value" (input)="onValueChanged()" [disabled]="disabled"
+                [autofocus]="autofocus">
+        </span>
+        <span *ngIf="getSizeName(sizeType.small) == size" [ngClass]="{'p-input-icon-right' : inputIcon != ''}">
+            <i *ngIf="inputIcon != ''" class="w-edit-input-text-small-icon pi {{inputIcon}}"></i>
+            <input pInputText minlength="{{minlength}}" maxlength="{{maxlength}}" [required]="required"
+                class="w-edit-input-text-small-height w-edit-input-text-small" id="w-textarea"
+                [placeholder]="placeholder" [required]="required" [(ngModel)]="value" (input)="onValueChanged()"
+                [disabled]="disabled" [autofocus]="autofocus">
+        </span>
+    </div>
+</ng-template>

package/src/lib/edit/w-edit-input-text/w-edit-input-text.component.scss

@@ -0,0 +1,220 @@
+@import "../../../styles/_variables.scss";
+
+
+.w-edit-input-text-select-field{
+    margin: $spacingZero;
+}
+
+/* SMALL */
+
+.w-edit-input-text-small-height {
+    height: $spacingXXXL !important;
+}
+
+.w-edit-input-text-small-height .p-input-icon-right>i:last-of-type {
+    right: $spacingS;
+}
+
+.w-edit-input-text-small-label{
+    @extend .w-input-small-label-text;
+    @extend .w-input-small-label-text-content;
+
+    &.no-top{
+        @extend .w-input-small-label-text-content-no-top;
+    }
+}
+
+.w-edit-input-text-small.p-inputtext {
+    @extend .w-input-small-placeholder-text;
+    border-radius: $borderRadius;
+    border-width: $borderWidth;
+    padding: calc($spacingXS - $borderWidth) calc($spacingS - $borderWidth);
+    border: $borderWidth solid $black200;
+}
+
+::ng-deep  .p-input-icon-right > .w-edit-input-text-small.p-inputtext {
+    padding-right: calc($spacingS + $spacingS + ($spacingS - $borderWidth)) ;
+}
+
+::ng-deep .p-input-icon-right > i.w-edit-input-text-small-icon:last-of-type{
+    @extend .w-input-small-text-icon;
+    right: calc($spacingS - $borderWidth);
+}
+
+.w-edit-input-text-small::-webkit-input-placeholder {/* Chrome/Opera/Safari */
+    color: $text700 !important;
+}
+
+.w-edit-input-text-small::-moz-placeholder {/* Firefox 19+ */
+    color: $text700 !important;
+}
+
+.w-edit-input-text-small:-ms-input-placeholder {/* IE 10+ */
+    color: $text700 !important;
+}
+
+.w-edit-input-text-small:-moz-placeholder {/* Firefox 18- */
+    color: $text700 !important;
+}
+
+.w-edit-input-text-small:hover {
+    @extend .hover;
+}
+
+.w-edit-input-text-small:focus {
+    @extend .focus;
+    border-radius: $borderRadius;
+    border: $borderWidth solid $secondary50;
+    padding-left: calc($spacingS - $borderWidth);
+}
+
+.w-edit-input-text-small:focus::-moz-placeholder {
+    color: transparent;
+}
+
+.w-edit-input-text-small-label-disabled{
+    @extend .w-input-small-label-disabled;
+    @extend .w-input-small-label-text-content;
+    
+    &.no-top{
+        @extend .w-input-small-label-text-content-no-top;
+    }
+}
+
+.w-edit-input-text-small:disabled {
+    @extend .w-input-disabled;
+}
+
+.w-edit-input-text-small-valid {
+    @extend .input-generic-valid;
+}
+
+.w-edit-input-text-small-valid:focus {
+    @extend .input-generic-valid-focus;
+    padding-left: $spacingS;
+}
+
+.w-edit-input-text-small-warning {
+    @extend .input-generic-warning;
+}
+
+/* TODO: Revisar si habrá un fecto focus en estados de validación */
+/* .w-edit-input-text-small-warning:focus {
+    @extend .input-generic-warning-focus;
+    padding-left: $spacingS;
+} */
+
+.w-edit-input-text-small.p-inputtext.ng-dirty.ng-invalid {
+    @extend .input-generic-error;
+}
+
+/* .w-edit-input-text-small-error:focus {
+    @extend .input-generic-error-focus;
+    padding-left: $spacingS;
+}
+ */
+
+/* MEDIUM */
+
+.w-edit-input-text-medium-height {
+    height: 40px !important;
+}
+
+.w-edit-input-text-medium-label {
+    @extend .w-input-medium-label-text;
+    @extend .w-input-small-label-text-content;
+}
+
+.w-edit-input-text-medium.p-inputtext {
+    @extend .w-input-medium-placeholder-text;
+    border-radius: $borderRadius;
+    border-width: $borderWidth;
+    padding: calc($spacingXS - $borderWidth) calc($spacingM - $borderWidth);
+    border: $borderWidth solid $black200;
+}
+
+.p-input-icon-right > .w-edit-input-text-medium.p-inputtext {
+    padding-right: calc($spacingM + $spacingS + ($spacingM - $borderWidth));
+}
+
+::ng-deep .p-input-icon-right > i.w-edit-input-text-medium-icon:last-of-type{
+    @extend .w-input-medium-text-icon;
+    right: calc($spacingM - $borderWidth);
+}
+
+.w-edit-input-text-medium::-webkit-input-placeholder {/* Chrome/Opera/Safari */
+    color: $text700 !important;
+}
+
+.w-edit-input-text-medium::-moz-placeholder {/* Firefox 19+ */
+    color: $text700 !important;
+}
+
+.w-edit-input-text-medium:-ms-input-placeholder {/* IE 10+ */
+    color: $text700 !important;
+}
+
+.w-edit-input-text-medium:-moz-placeholder {/* Firefox 18- */
+    color: $text700 !important;
+}
+
+.w-edit-input-text-medium:hover {
+    @extend .hover;
+}
+
+.w-edit-input-text-medium:focus {
+    @extend .focus;
+    border-radius: $borderRadius;
+    border: $borderWidth solid $secondary50;
+    padding-left: $spacingM;
+}
+
+.w-edit-input-text-medium:focus::-webkit-input-placeholder {
+    color: transparent;
+}
+
+.w-edit-input-text-medium:focus::-moz-placeholder {
+    color: transparent;
+}
+
+.w-edit-input-text-medium:focus:-ms-input-placeholder {
+    color: transparent;
+}
+
+.w-edit-input-text-medium:focus:-moz-placeholder {
+    color: transparent;
+}
+
+.w-edit-input-text-medium:disabled {
+    @extend .w-input-disabled;
+}
+
+.w-edit-input-text-medium-label-disabled {
+    @extend .w-input-medium-label-disabled;
+    @extend .w-input-small-label-text-content;
+}
+
+.w-edit-input-text-medium-valid {
+    @extend .input-generic-valid;
+}
+
+.w-edit-input-text-medium-valid:focus {
+    @extend .input-generic-valid-focus;
+}
+
+.w-edit-input-text-medium-warning {
+    @extend .input-generic-warning;
+}
+
+/* TODO: Revisar si habrá un fecto focus en estados de validación */
+/* .w-edit-input-text-medium-warning:focus {
+    @extend .input-generic-warning-focus;
+} */
+
+.w-edit-input-text-medium.p-inputtext.ng-dirty.ng-invalid {
+    @extend .input-generic-error;
+}
+
+/* .w-edit-input-text-medium-error:focus {
+    @extend .input-generic-error-focus;
+} */

package/src/lib/edit/w-edit-input-text/w-edit-input-text.component.spec.ts

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