ngx-wapp-components 1.8.2 → 1.8.3

package/src/lib/edit/w-edit-calendar/w-edit-calendar.component.spec.ts

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

package/src/lib/edit/w-edit-calendar/w-edit-calendar.component.ts

@@ -0,0 +1,77 @@
+import { Component, EventEmitter, Input, OnInit, Optional, Output, Self, forwardRef } from '@angular/core';
+import { NG_VALUE_ACCESSOR, ControlValueAccessor, FormControl } from '@angular/forms';
+import { SizeType } from '../../shared/enums/enum';
+
+@Component({
+  selector: 'w-edit-calendar',
+  templateUrl: './w-edit-calendar.component.html',
+  styleUrls: ['./w-edit-calendar.component.scss'],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => WEditCalendarComponent),
+      multi: true
+    }
+  ]
+})
+export class WEditCalendarComponent implements OnInit, ControlValueAccessor {
+  @Input('label') label!: string;
+  @Input('showTime') showTime: boolean = true;
+  @Input('showSeconds') showSeconds: boolean = true;
+  @Input('timeOnly') timeOnly: boolean = false;
+  @Input('showIcon') showIcon: boolean = true;
+  @Input('placeholder') placeholder: string = "";
+  @Input('minDate') minDate!: Date;
+  @Input('maxDate') maxDate!: Date;
+  @Input('disabled') disabled: boolean = false;
+  @Input('size') size: string = "small";
+  @Input('formControl') formControl!: FormControl | null;
+  @Input('displayInlineBlock') displayInlineBlock: boolean = false;
+  @Input('required') required: boolean = false;
+  @Input('requiredErrorDescription') requiredErrorDescription : string = "Mensaje default required";
+  @Input('removePaddingTop') removePaddingTop: boolean = false; 
+  
+  @Output('onChange') onChangeEvent: EventEmitter<any> = new EventEmitter();
+
+  sizeType: typeof SizeType = SizeType;
+
+  ngModelValue: any;
+
+  isDisabled: boolean = false;
+  isTouched : boolean = false;
+  onChange: any = () => {};
+  onTouch: any = () => {};
+  
+  ngOnInit(): void { }
+  
+  writeValue(value: any) {
+    this.ngModelValue = value;
+  }
+  
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: any): void {
+    this.onTouch = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this.isDisabled = isDisabled;
+  }
+
+  onValue(value: any){
+    this.onChangeEvent.emit(value);
+  }
+
+  getSizeName(value: number): string {
+    return SizeType[value];
+  }
+
+  onDateChanged(){
+    this.onChange(this.ngModelValue);
+    this.onTouch();
+
+    this.onChangeEvent.emit(this.ngModelValue);
+  }
+}

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

@@ -0,0 +1,55 @@
+
+<div *ngIf="formControl; else noNgControl" class="flex align-content-center" 
+        [ngClass]="{'w-edit-checkbox-medium-field': getSize(sizeType.medium) == size,
+        'w-edit-checkbox-small-field': getSize(sizeType.small) == size,
+        'w-edit-checkbox-medium-heigth': hasAlign &&  getSize(sizeType.medium) == size,
+        'w-edit-checkbox-small-heigth': hasAlign && getSize(sizeType.small) == size}">
+
+        <p-checkbox  
+                    [binary]="true"
+                    class="flex align-items-center"
+                    [ngClass]="{'w-edit-checkbox-medium': getSize(sizeType.medium) == size,
+                            'w-edit-checkbox-small': getSize(sizeType.small) == size}"
+                    [formControl]="formControl" id="w-checkbox"></p-checkbox>
+        <label *ngIf="(getSize(sizeType.medium) == size && (label != undefined && label.length > 0));" 
+            for="w-checkbox"
+            class="flex align-items-center"
+            [ngClass]="{'w-edit-checkbox-medium-label': !isDisabled,
+                        'w-edit-checkbox-medium-label-disabled': isDisabled}">
+            {{ label }}
+        </label>
+        <label *ngIf="(getSize(sizeType.small) == size && (label != undefined && label.length > 0));" 
+            for="w-checkbox"
+            class="flex align-items-center"
+            [ngClass]="{'w-edit-checkbox-small-label': !isDisabled,
+                        'w-edit-checkbox-small-label-disabled': isDisabled}">
+            {{ label }}
+        </label>
+</div>
+<ng-template #noNgControl>
+    <div class="flex align-content-center" 
+            [ngClass]="{'w-edit-checkbox-medium-field': getSize(sizeType.medium) == size,
+            'w-edit-checkbox-small-field': getSize(sizeType.small) == size,
+            'w-edit-checkbox-medium-heigth': hasAlign &&  getSize(sizeType.medium) == size,
+            'w-edit-checkbox-small-heigth': hasAlign && getSize(sizeType.small) == size}">
+    
+            <p-checkbox  
+                        [binary]="true"
+                        [ngClass]="{'w-edit-checkbox-medium': getSize(sizeType.medium) == size,
+                                'w-edit-checkbox-small': getSize(sizeType.small) == size}"
+                        (ngModelChange)="onInput($event)"
+                        [(ngModel)]="value" id="w-checkbox"></p-checkbox>
+            <label *ngIf="(getSize(sizeType.medium) == size && (label != undefined && label.length > 0));" 
+                for="w-checkbox"
+                [ngClass]="{'w-edit-checkbox-medium-label': !isDisabled,
+                            'w-edit-checkbox-medium-label-disabled': isDisabled}">
+                {{ label }}
+            </label>
+            <label *ngIf="(getSize(sizeType.small) == size && (label != undefined && label.length > 0));" 
+                for="w-checkbox"
+                [ngClass]="{'w-edit-checkbox-small-label': !isDisabled,
+                            'w-edit-checkbox-small-label-disabled': isDisabled}">
+                {{ label }}
+            </label>
+    </div>
+</ng-template>

package/src/lib/edit/w-edit-checkbox/w-edit-checkbox.component.scss

@@ -0,0 +1,127 @@
+@import '../../../styles/variables.scss';
+
+/* SMALL */
+
+.w-edit-checkbox-small-heigth {
+    height: 32px;
+    justify-content: start;
+    align-content: center;
+    align-items: center;
+    display: grid;
+}
+
+.w-edit-checkbox-small-field {
+    justify-content: start;
+    align-content: center;
+    align-items: center;
+    display: grid;
+}
+
+
+
+.w-edit-checkbox-small-label {
+    @extend .w-input-small-label-text;
+    padding-left: $spacingS;
+}
+
+.w-edit-checkbox-small-label-disabled {
+    @extend .w-input-small-label-text;
+    color: $black400;
+    padding-left: $spacingS;
+}
+
+
+/* MEDIUM */
+
+.w-edit-checkbox-medium-heigth {
+    height: 76px;
+    justify-content: start;
+    align-content: center;
+    align-items: center;
+    display: grid;
+}
+
+.w-edit-checkbox-medium-field {
+    justify-content: start;
+    align-content: center;
+    align-items: center;
+    display: grid;
+}
+
+::ng-deep .w-edit-checkbox-medium {
+    .p-checkbox {
+        height: 24px;
+        width: 24px;
+        border-width: $borderWidth;
+
+        .p-checkbox-box {
+            height: 24px;
+            width: 24px;
+            border-radius: $checkboxBorderRadius;
+            border: $borderWidth solid $black300;
+
+            &.p-checkbox-icon{
+                @extend .w-control-button-medium-icon-text;
+            }
+            
+            &.p-highlight {
+                border-color: $secondary400;
+                background: $secondary400;
+            }
+        }
+
+        &:not(.p-checkbox-disabled) {
+            .p-checkbox-box {
+                &:hover {
+                    background-color: $black300;
+                    border: $borderWidth solid $black300;
+                }
+
+                &.p-focus {
+                    background-color: $secondary400;
+                    @extend .focus;
+                    border: $borderWidth solid $secondary50;
+                }
+
+                &:not(.p-highlight).p-focus {
+                    background-color: $black300;
+                    border: $borderWidth solid $black300;
+                }
+    
+                &.p-highlight:hover {    
+                    border-color: $secondary400;
+                    background: $secondary400;
+                }
+            }
+        }
+    }
+} 
+
+.w-edit-checkbox-medium-label {
+    @extend .w-input-small-label-text;
+    padding-left: $spacingS;
+}
+
+.w-edit-checkbox-medium-label-disabled {
+    @extend .w-input-medium-label-text;
+    color: $black400;
+    padding-left: $spacingS;
+}
+
+// Small style
+::ng-deep .w-edit-checkbox-small {
+    @extend .w-edit-checkbox-medium;
+    .p-checkbox {
+        height: 16px;
+        width: 16px;
+        border-radius: $checkboxBorderRadius;
+
+        .p-checkbox-box {
+            height: 16px;
+            width: 16px;
+            .p-checkbox-icon{
+                @extend .w-control-button-small-icon-text;
+            }
+        }
+    }
+}

package/src/lib/edit/w-edit-checkbox/w-edit-checkbox.component.spec.ts

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

package/src/lib/edit/w-edit-checkbox/w-edit-checkbox.component.ts

@@ -0,0 +1,70 @@
+import { Component, EventEmitter, Input, Output, forwardRef } from '@angular/core';
+import { FormControl, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { SizeType } from '../../shared/enums/enum';
+
+@Component({
+  selector: 'w-edit-checkbox',
+  templateUrl: './w-edit-checkbox.component.html',
+  styleUrls: ['./w-edit-checkbox.component.scss'],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => WEditCheckboxComponent),
+      multi: true
+    }
+  ]
+})
+export class WEditCheckboxComponent {
+  @Input('label') label: string = '';
+  @Input('helpDescription') helpDescription: string = '';
+  @Input('disabled') isDisabled: boolean = false;
+  @Input('size') size: string = 'medium';
+  @Input('hasAlign') hasAlign: boolean = true;
+
+  @Input('formControl') formControl!: FormControl | null;
+
+  @Output('checkboxState')
+    checkboxState: EventEmitter<boolean> = new EventEmitter<boolean>();
+
+  value: 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.isDisabled = isDisabled;
+  }
+  
+  onInput(obj: any){
+    this.value = obj;
+    this.checkboxState.emit(this.value);
+    this.onTouch();
+    this.onChange(this.value);
+  }
+
+  onValueChanged() {
+    this.onChange(this.value);
+    this.onTouch();
+  }
+
+  getSize(value: number): string {
+    return SizeType[value];
+  }
+
+  get sizeType(): typeof SizeType {
+    return SizeType;
+  }
+}

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

@@ -0,0 +1,68 @@
+<div *ngIf="formControl != null; else noNgControl" class="w-edit-input-number-field p-fluid field">
+    <label  *ngIf="(label != undefined && label.length > 0)" 
+            [ngClass]="{'w-edit-input-number-small-label': getSizeName(sizeType.small) == size && !disabled,
+                        'w-edit-input-number-small-label-disabled': getSizeName(sizeType.small) == size && disabled,
+                        'w-edit-input-number-medium-label': getSizeName(sizeType.medium) == size && !disabled,
+                        'w-edit-input-number-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>
+    <p-inputNumber  *ngIf="getSizeName(sizeType.medium) == size"
+        [ngClass]="{'w-edit-input-number-medium-error': formControl.hasError('required') && formControl.dirty && requiredErrorDescription != '',
+                    'w-edit-input-number-medium-valid': formControl.valid && formControl.touched  && successMessage != '',
+                    'w-edit-input-number-medium-warning': formControl.invalid && formControl.touched && (formControl.hasError('min') || formControl.hasError('max'))}"
+        class="w-edit-input-number-medium w-edit-input-number-medium-height"
+        styleClass="flex flex-1"
+        [mode]="mode" 
+        [minFractionDigits]="minFractionDigits" [maxFractionDigits]="maxFractionDigits"
+        id="w-textarea" [placeholder]="placeholder"
+        [required]="required" [formControl]="formControl" >
+    </p-inputNumber>
+    <p-inputNumber  *ngIf="getSizeName(sizeType.small) == size"
+        [ngClass]="{'w-edit-input-number-small-error': formControl.hasError('required') && formControl.dirty && requiredErrorDescription != '',
+                    'w-edit-input-number-small-valid': formControl.valid && formControl.touched  && successMessage != '',
+                    'w-edit-input-number-small-warning': formControl.invalid &&  formControl.touched && (formControl.hasError('min') || formControl.hasError('max'))}"
+        class="w-edit-input-number-small w-edit-input-number-small-height"
+        styleClass="flex flex-1"
+        [mode]="mode" 
+        [minFractionDigits]="minFractionDigits" [maxFractionDigits]="maxFractionDigits"
+        id="w-textarea" [placeholder]="placeholder"
+        [required]="required" [formControl]="formControl"></p-inputNumber>
+        <!-- <small *ngIf="formControl.valid && formControl.touched" class="w-input-success-alert-text">{{successMessage}}</small>-->
+        <small *ngIf="formControl.invalid && formControl.hasError('max') && formControl.touched "
+            class="w-input-alert-message-height w-input-warning-alert-text p-error block">{{maxErrorDescription}}</small> 
+        <small *ngIf="formControl.invalid && formControl.hasError('min') && formControl.touched "
+            class="w-input-alert-message-height w-input-warning-alert-text p-error block">{{maxErrorDescription}}</small> 
+        <small *ngIf="formControl.hasError('required') && formControl.dirty"
+            class="w-input-alert-message-height w-input-error-alert-text p-error block">{{requiredErrorDescription}}</small>
+</div>
+<ng-template #noNgControl>
+    <div class="w-edit-input-number-field p-fluid field">
+        <label  *ngIf="(label != undefined && label.length > 0)" 
+            [ngClass]="{'w-edit-input-number-small-label': getSizeName(sizeType.small) == size && !disabled,
+                        'w-edit-input-number-small-label-disabled': getSizeName(sizeType.small) == size && disabled,
+                        'w-edit-input-number-medium-label': getSizeName(sizeType.medium) == size && !disabled,
+                        'w-edit-input-number-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>
+        <p-inputNumber *ngIf="getSizeName(sizeType.medium) == size" [disabled]="disabled"
+            [required]="required"
+            class="w-edit-input-number-medium w-edit-input-number-medium-height"
+            styleClass="flex flex-1"
+            [mode]="mode" 
+            [minFractionDigits]="minFractionDigits" [maxFractionDigits]="maxFractionDigits"
+            id="w-textarea" [placeholder]="placeholder"
+            [required]="required" [(ngModel)]="value" (onInput)="onValueChanged()" [disabled]="disabled"></p-inputNumber>
+        <p-inputNumber *ngIf="getSizeName(sizeType.small) == size" [disabled]="disabled"
+            [required]="required"
+            class="w-edit-input-number-small w-edit-input-number-small-height"
+            styleClass="flex flex-1"
+            [mode]="mode" 
+            [minFractionDigits]="minFractionDigits" [maxFractionDigits]="maxFractionDigits"
+            id="w-textarea" [placeholder]="placeholder"
+            [required]="required" [(ngModel)]="value" (onInput)="onValueChanged()" [disabled]="disabled"></p-inputNumber>
+    </div>
+</ng-template>