ngx-wapp-components 1.8.2 → 1.8.3

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

@@ -0,0 +1,91 @@
+import { Component, EventEmitter, Input, OnInit, Optional, Output, Self, forwardRef } from '@angular/core';
+import { NgControl, FormControlName, NG_VALUE_ACCESSOR, FormControl, ControlValueAccessor } from '@angular/forms';
+import { SizeType } from '../../shared/enums/enum';
+
+@Component({
+  selector: 'w-edit-input-text',
+  templateUrl: './w-edit-input-text.component.html',
+  styleUrls: ['./w-edit-input-text.component.scss'],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => WEditInputTextComponent),
+      multi: true
+    }
+  ]
+})
+export class WEditInputTextComponent implements ControlValueAccessor {
+  value: string = "";
+
+  @Input('label') label!: string;
+  @Input('placeholder') placeholder: string = "";
+  @Input('successMessage') successMessage: string = "";
+
+
+  @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 = "Pattern error";
+
+  @Input('minlength') minlength!: number;
+  @Input('minlengthErrorDescription') minlengthErrorDescription: string = "Min length error";
+
+  @Input('maxlength') maxlength!: number;
+  @Input('maxlengthErrorDescription') maxlengthErrorDescription: string = "Max length error";
+
+  @Input('autofocus') autofocus: boolean = false;
+  @Input('inputIcon') inputIcon: string = '';
+  @Input('size') size: string = 'small';
+
+  @Input('formControl') formControl!: FormControl | null;
+  @Input('removePaddingTop') removePaddingTop: boolean = false; 
+
+  isTouched: boolean = false;
+  onChange = (_: any) => { }
+  onTouch = () => { }
+
+  writeValue(value: any): void {
+    this.value = value;
+  }
+
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: any): void {
+    this.onTouch = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+  }
+
+  onValueChanged() {
+    this.onChange(this.value);
+    this.onTouch();
+  }
+
+  onChangeForm(event: any){
+    console.log(event);
+    
+  }
+
+  onInputBlur(event: Event) {
+    const newValue = (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-textarea/w-edit-input-textarea.component.html

@@ -0,0 +1,106 @@
+<div *ngIf="formControl; else noNgControl">
+    <div *ngIf="getSizeName(sizeType.medium) == size; else inputSmall">
+        <div class="flex flex-column w-edit-input-textarea-medium-height">
+            <label *ngIf="label != undefined && label.length > 0" [ngClass]="{'w-edit-input-textarea-medium-label': !disabled,
+                    'w-edit-input-textarea-medium-label-disabled': disabled, 
+                    'no-top': removePaddingTop == true}" 
+                    for="w-textarea">
+                {{label}}
+            </label>
+            <div *ngIf="label != undefined && label == ''" class="w-input-no-label-height"></div>
+            <textarea   pInputTextarea 
+                        [ngClass]="{'w-edit-input-textarea-medium-error': formControl.hasError('required') && formControl.dirty && requiredErrorDescription != '',
+                                    'w-edit-input-textarea-medium-valid': formControl.valid && formControl.touched && successMessage != '',
+                                    'w-edit-input-textarea-medium-warning': formControl.invalid && (formControl.hasError('minlength') || formControl.hasError('maxlength'))}"
+                        [autoResize]="autoResize" 
+                        class="flex flex-1 h-max w-edit-input-textarea-medium"
+                        id="w-textarea"
+                        [placeholder]="placeholder"
+                        [required]="required"
+                        [formControl]="formControl">
+                </textarea>
+        </div>
+        <!-- <small *ngIf="formControl.valid && formControl.touched" class="w-input-alert-message-height w-full w-input-success-alert-text p-error block">{{successMessage}}</small> -->
+        <small *ngIf="formControl.invalid && formControl.hasError('maxlength')" class="w-input-alert-message-height w-full w-input-warning-alert-text p-error block">{{maxlengthErrorDescription}}</small>
+        <small *ngIf="formControl.invalid && formControl.hasError('minlength')" class="w-input-alert-message-height w-full w-input-warning-alert-text p-error block">{{minlengthErrorDescription}}</small>
+        <small *ngIf="formControl.hasError('required') && formControl.dirty" class="w-input-alert-message-height w-full w-input-error-alert-text p-error block">{{requiredErrorDescription}}</small>
+    </div>
+    <ng-template #inputSmall>
+        <div class="flex flex-column w-edit-input-textarea-height">
+            <label *ngIf="label != undefined && label.length > 0" [ngClass]="{'w-edit-input-textarea-small-label': !disabled,
+                    'w-edit-input-textarea-small-label-disabled': disabled, 
+                    'no-top': removePaddingTop == true}" 
+                    for="w-textarea">
+                {{label}}
+            </label>
+            <textarea   pInputTextarea
+                        [ngClass]="{'w-edit-input-textarea-small-error': formControl.hasError('required') && formControl.dirty && requiredErrorDescription != '',
+                                    'w-edit-input-textarea-small-valid': formControl.valid && formControl.touched && successMessage != '',
+                                    'w-edit-input-textarea-small-warning': formControl.invalid && (formControl.hasError('minlength') || formControl.hasError('maxlength'))}"
+                        [autoResize]="autoResize" 
+                        [rows]="rows"
+                        class="flex flex-1 h-max w-edit-input-textarea-small"
+                        id="w-textarea"
+                        [placeholder]="placeholder"
+                        [required]="required"
+                        [formControl]="formControl">
+                </textarea>
+        </div>
+        <!-- <small *ngIf="formControl.valid && formControl.touched" class="w-input-alert-message-height w-full w-input-success-alert-text p-error block">{{successMessage}}</small> -->
+        <small *ngIf="formControl.invalid && formControl.hasError('maxlength')" class="w-input-alert-message-height w-full w-input-warning-alert-text p-error block">{{maxlengthErrorDescription}}</small>
+        <small *ngIf="formControl.invalid && formControl.hasError('minlength')" class="w-input-alert-message-height w-full w-input-warning-alert-text p-error block">{{minlengthErrorDescription}}</small>
+        <small *ngIf="formControl.hasError('required') && formControl.dirty" class="w-input-alert-message-height w-full w-input-error-alert-text p-error block">{{requiredErrorDescription}}</small>
+    </ng-template>
+</div>
+<ng-template #noNgControl>
+    <div *ngIf="getSizeName(sizeType.medium) == size; else inputSmall">
+        <div class="flex flex-column w-edit-input-textarea-medium-height">
+            <label *ngIf=" label != undefined && label.length > 0" [ngClass]="{'w-edit-input-textarea-medium-label': !disabled,
+                    'w-edit-input-textarea-medium-label-disabled': disabled, 
+                    'no-top': removePaddingTop == true}" 
+                    for="w-textarea">
+                {{label}}
+            </label>
+            <div *ngIf="label != undefined && label == ''" class="w-input-no-label-height"></div>
+            <textarea   pInputTextarea
+                        [disabled]="disabled"
+                        minlength="{{minlength}}" 
+                        maxlength="{{maxlength}}"
+                        [autoResize]="autoResize" 
+                        [required]="required"
+                        class="flex flex-1 h-max w-edit-input-textarea-medium"
+                        id="w-textarea"
+                        [placeholder]="placeholder"
+                        [required]="required"
+                        [(ngModel)]="value" (input)="onValueChanged()" [disabled]="disabled">
+                </textarea>
+        </div>
+        <!-- <div class="w-input-alert-message-height"></div> -->
+    </div>
+    <ng-template #inputSmall>
+        <div class="flex flex-column w-edit-input-textarea-height">
+            <label *ngIf="label != undefined && label.length > 0" [ngClass]="{'w-edit-input-textarea-small-label': !disabled,
+                    'w-edit-input-textarea-small-label-disabled': disabled, 
+                    'no-top': removePaddingTop == true}" 
+                    for="w-textarea">
+                {{label}}
+            </label>
+            <textarea   pInputTextarea
+                        [disabled]="disabled"
+                        minlength="{{minlength}}" 
+                        maxlength="{{maxlength}}"
+                        [autoResize]="autoResize" 
+                        [required]="required"
+                        [rows]="rows"
+                        class="flex flex-1 h-max w-edit-input-textarea-small"
+                        id="w-textarea"
+                        [placeholder]="placeholder"
+                        [required]="required"
+                        [(ngModel)]="value" 
+                        (input)="onValueChanged()" 
+                        [disabled]="disabled">
+                </textarea>
+        </div>
+        <!-- <div class="w-input-alert-message-height"></div> -->
+    </ng-template>
+</ng-template>

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

@@ -0,0 +1,213 @@
+@import "../../../styles/_variables.scss";
+
+/* SMALL */
+.w-edit-input-textarea-small-height {
+    height: 120px !important;
+}
+
+.w-edit-input-textarea-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-textarea-small.p-inputtext {
+    @extend .w-input-small-placeholder-text;
+    border-radius: $borderRadius;
+    border-width: $borderWidth;
+    padding: calc($spacingXS - $borderWidth) calc($spacingS - $borderWidth) !important;
+    border: $borderWidth solid $black200;
+}
+
+.w-edit-input-textarea-small::-webkit-input-placeholder {
+    /* Chrome/Opera/Safari */
+    color: $text700 !important;
+}
+
+.w-edit-input-textarea-small::-moz-placeholder {
+    /* Firefox 19+ */
+    color: $text700 !important;
+}
+
+.w-edit-input-textarea-small:-ms-input-placeholder {
+    /* IE 10+ */
+    color: $text700 !important;
+}
+
+.w-edit-input-textarea-small:-moz-placeholder {
+    /* Firefox 18- */
+    color: $text700 !important;
+}
+
+.w-edit-input-textarea-small:hover {
+    @extend .hover;
+}
+
+.w-edit-input-textarea-small:focus {
+    @extend .focus;
+    border-radius: $borderRadius;
+    border: $borderWidth solid $secondary50;
+    padding-left: $spacingS;
+}
+
+.w-edit-input-textarea-small:focus::-webkit-input-placeholder {
+    color: transparent;
+}
+
+.w-edit-input-textarea-small:focus::-moz-placeholder {
+    color: transparent;
+}
+
+.w-edit-input-textarea-small:focus:-ms-input-placeholder {
+    color: transparent;
+}
+
+.w-edit-input-textarea-small:focus:-moz-placeholder {
+    color: transparent;
+}
+
+.w-edit-input-textarea-small:disabled {
+    @extend .w-input-disabled;
+}
+
+.w-edit-input-textarea-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-textarea-small-valid {
+    @extend .input-generic-valid;
+}
+
+.w-edit-input-textarea-small-valid:focus {
+    @extend .input-generic-valid-focus;
+    padding-left: $spacingS;
+}
+
+.w-edit-input-textarea-small-warning {
+    @extend .input-generic-warning;
+}
+
+/* TODO: Revisar si habrá un fecto focus en estados de validación */
+/* .w-edit-input-textarea-small-warning:focus {
+    @extend .input-generic-warning-focus;
+    padding-left: $spacingS;
+} */
+
+.w-edit-input-textarea-small.p-inputtext.ng-dirty.ng-invalid {
+    @extend .input-generic-error;
+}
+
+/* .w-edit-input-textarea-small-error:focus {
+    @extend .input-generic-error-focus;
+    padding-left: $spacingS;
+} */
+
+/* MEDIUM */
+
+.w-edit-input-textarea-medium-height {
+    height: 180px !important;
+}
+
+.w-edit-input-textarea-medium-label {
+    @extend .w-input-medium-label-text;
+    @extend .w-input-small-label-text-content;
+}
+
+::ng-deep .w-edit-input-textarea-medium.p-inputtext {
+    @extend .w-input-medium-placeholder-text;
+    border-radius: $borderRadius;
+    padding: calc($spacingXS - $borderWidth) calc($spacingM - $borderWidth) $spacingM calc($spacingM - $borderWidth) !important;
+    border: $borderWidth solid $black200;
+}
+
+.w-edit-input-textarea-medium::-webkit-input-placeholder {
+    /* Chrome/Opera/Safari */
+    color: $text700 !important;
+}
+
+.w-edit-input-textarea-medium::-moz-placeholder {
+    /* Firefox 19+ */
+    color: $text700 !important;
+}
+
+.w-edit-input-textarea-medium:-ms-input-placeholder {
+    /* IE 10+ */
+    color: $text700 !important;
+}
+
+.w-edit-input-textarea-medium:-moz-placeholder {
+    /* Firefox 18- */
+    color: $text700 !important;
+}
+
+.w-edit-input-textarea-medium:hover {
+    @extend .hover;
+}
+
+.w-edit-input-textarea-medium:focus {
+    @extend .focus;
+   /*  border-radius: $borderRadius; */
+    border: $borderWidth solid $secondary50;
+    padding-left: $spacingM;
+}
+
+.w-edit-input-textarea-medium:focus::-webkit-input-placeholder {
+    color: transparent;
+}
+
+.w-edit-input-textarea-medium:focus::-moz-placeholder {
+    color: transparent;
+}
+
+.w-edit-input-textarea-medium:focus:-ms-input-placeholder {
+    color: transparent;
+}
+
+.w-edit-input-textarea-medium:focus:-moz-placeholder {
+    color: transparent;
+}
+
+.w-edit-input-textarea-medium:disabled {
+    background-color: $black100;
+    border: $borderWidth solid $black200;
+    color: $black400;
+    opacity: 1;
+}
+
+.w-edit-input-textarea-medium-label-disabled {
+    @extend .w-input-medium-label-disabled;
+    @extend .w-input-small-label-text-content;
+}
+
+.w-edit-input-textarea-medium-valid {
+    @extend .input-generic-valid;
+}
+
+.w-edit-input-textarea-medium-valid:focus {
+    @extend .input-generic-valid-focus;
+}
+
+.w-edit-input-textarea-medium-warning {
+    @extend .input-generic-warning;
+}
+
+/* TODO: Revisar si habrá un fecto focus en estados de validación */
+/* .w-edit-input-textarea-medium-warning:focus {
+    @extend .input-generic-warning-focus;
+} */
+
+.w-edit-input-textarea-medium.p-inputtext.ng-dirty.ng-invalid {
+    @extend .input-generic-error;
+}
+
+/* .w-edit-input-textarea-small-error {
+    @extend .input-generic-error-focus;
+} */

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

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

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

@@ -0,0 +1,72 @@
+import { Component, EventEmitter, Input, Optional, Output, Self, forwardRef } from '@angular/core';
+import { FormControl, FormControlName, NG_VALUE_ACCESSOR, NgControl, Validators } from '@angular/forms';
+import { SizeType } from '../../shared/enums/enum';
+@Component({
+  selector: 'w-edit-input-textarea',
+  templateUrl: './w-edit-input-textarea.component.html',
+  styleUrls: ['./w-edit-input-textarea.component.scss'],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => WEditInputTextareaComponent),
+      multi: true
+    }
+  ]
+})
+export class WEditInputTextareaComponent {
+
+  @Input('label') label!: string;
+  @Input('placeholder') placeholder: string = "";
+
+  @Input('rows') rows: number = 4;
+  @Input('minlength') minlength!: number;
+  @Input('maxlength') maxlength!: number;
+  @Input('autoResize') autoResize: boolean = true;
+
+  @Input('required') required: boolean = false;
+  @Input('disabled') disabled: boolean = false;
+  @Input('successMessage') successMessage: string = "";
+  @Input('requiredErrorDescription') requiredErrorDescription: string = "Data is required";
+  @Input('minlengthErrorDescription') minlengthErrorDescription: string = "Min length warning";
+  @Input('maxlengthErrorDescription') maxlengthErrorDescription: string = "Max length warning";
+
+  @Input('size') size: string = "small";
+
+  @Input('formControl') formControl!: FormControl | null;
+  @Input('removePaddingTop') removePaddingTop: boolean = false; 
+
+  value: string = '';
+
+  isTouched: boolean = false;
+  onChange = (_: any) => { }
+  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();
+  }
+
+  getSizeName(value: number): string {
+    return SizeType[value];
+  }
+
+  get sizeType(): typeof SizeType {
+    return SizeType;
+  }
+}

package/src/lib/edit/w-edit-multiselect/w-edit-multiselect.component.html

@@ -0,0 +1,73 @@
+<div *ngIf="formControl; else noNgControl" class="w-edit-multiselect-field p-fluid field">
+    <label *ngIf="(label != undefined && label.length > 0)"  
+        [ngClass]="{'w-edit-multiselect-small-label' : getSizeName(sizeType.small) == size && !disabled, 
+                    'w-edit-multiselect-small-label-disabled' : getSizeName(sizeType.small) == size && disabled,
+                    'w-edit-multiselect-medium-label' : getSizeName(sizeType.medium) == size && !disabled,
+                    'w-edit-multiselect-medium-label-disabled' : getSizeName(sizeType.medium) == size && disabled, 
+                    'no-top': removePaddingTop == true}">
+        {{label}}
+    </label>
+    <div *ngIf="(label != undefined && label == '')" class="w-input-no-label-height"></div>
+    <p-multiSelect *ngIf="getSizeName(sizeType.medium) == size" class="w-edit-multiselect-medium" 
+        [options]="options" 
+        display="chip" 
+        [optionLabel]="optionLabel" 
+        [optionValue]="optionValue" 
+        [placeholder]="placeholder" 
+        [required]="required" 
+        [formControl]="formControl"
+        [appendTo]="appendTo"
+        [showClear]="showClear" 
+        (onChange)="onOptionSelectedForm($event)">
+    </p-multiSelect>
+    <p-multiSelect *ngIf="getSizeName(sizeType.small) == size" class="w-edit-multiselect-small" 
+        [options]="options" 
+        display="chip" 
+        [optionLabel]="optionLabel" 
+        [optionValue]="optionValue" 
+        [placeholder]="placeholder"
+        [required]="required" 
+        [formControl]="formControl"
+        [appendTo]="appendTo"
+        [showClear]="showClear" 
+        (onChange)="onOptionSelectedForm($event)">
+    </p-multiSelect>
+    <small *ngIf="getSizeName(sizeType.medium) == size && formControl.dirty && formControl.hasError('required')" class="w-error-message-container w-full w-error-message p-error block">{{errorDescription}}</small>
+</div>
+<ng-template #noNgControl>
+    <div class="w-edit-multiselect-field p-fluid field">
+        <label *ngIf="(label != undefined && label.length > 0)" 
+            [ngClass]="{'w-edit-multiselect-small-label' : getSizeName(sizeType.small) == size && !disabled, 
+                        'w-edit-multiselect-small-label-disabled' : getSizeName(sizeType.small) == size && disabled,
+                        'w-edit-multiselect-medium-label' : getSizeName(sizeType.medium) == size && !disabled,
+                        'w-edit-multiselect-medium-label-disabled' : getSizeName(sizeType.medium) == size && disabled, 
+                        'no-top': removePaddingTop == true}">
+            {{label}}
+        </label>
+        <div *ngIf="(label != undefined && label == '')" class="w-input-no-label-height"></div>
+        <p-multiSelect *ngIf="getSizeName(sizeType.medium) == size" class="w-edit-multiselect-medium" 
+            [options]="options" 
+            display="chip" 
+            [optionLabel]="optionLabel" 
+            [optionValue]="optionValue" 
+            [placeholder]="placeholder" 
+            [disabled]="disabled" 
+            [(ngModel)]="ngModelValue" 
+            (onChange)="onOptionSelected()" 
+            [appendTo]="appendTo"
+            [showClear]="showClear">    
+        </p-multiSelect>
+        <p-multiSelect *ngIf="getSizeName(sizeType.small) == size" class="w-edit-multiselect-small" 
+            [options]="options" 
+            display="chip" 
+            [optionLabel]="optionLabel" 
+            [optionValue]="optionValue" 
+            [placeholder]="placeholder"
+            [disabled]="disabled" 
+            [(ngModel)]="ngModelValue" 
+            (onChange)="onOptionSelected()" 
+            [appendTo]="appendTo"
+            [showClear]="showClear">
+        </p-multiSelect>
+    </div>
+</ng-template>