ngx-wapp-components 3.2.11-alpha.9 → 3.2.11

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

@@ -1,71 +0,0 @@
-@if (formControl) {
-  <div class="w-edit-calendar-styles p-fluid field">
-    @if (showLabel) {
-      <w-input-label [label]="label" [required]="required" [disabled]="disabled" [size]="size" [tooltip]="tooltip" [validated]="isRequiredValid()"></w-input-label>
-    }
-    <p-datepicker class="w-edit-calendar-small" 
-      [ngClass]="{'disabled': disabled, 
-                  'ng-invalid ng-dirty': formControl.hasError('required') && formControl.touched, 
-                  'w-edit-calendar-no-icon' : !showIcon
-      }" 
-      [formControl]="formControl" 
-      placeholder="{{placeholder}}"
-      appendTo="body"
-      [showIcon]="showIcon"
-      [icon]="timeOnly ? 'pi pi-clock' : 'pi pi-calendar'"  
-      [showTime]="showTime" 
-      [timeOnly]="timeOnly" 
-      [showSeconds]="showSeconds" 
-      [showIcon]="showIcon" 
-      [minDate]="minDate"
-      [maxDate]="maxDate" 
-      [firstDayOfWeek]="firstDayOfWeek" 
-      [dataType]="dataType" 
-      [view]="viewType" 
-      [dateFormat]="dateFormat"
-      [readonlyInput]="readonlyInput" 
-      (onSelect)="onValue($event)"
-      (onInput)="onInputValue($event)"
-      [keepInvalid]="keepInvalid"
-    />
-    @if (formControl.hasError('required') && formControl.touched) {
-      <small class="p-error block">{{requiredErrorDescription}}</small>
-    }
-    @if (formControl.errors && !formControl.hasError('required') && formControl.touched) {
-      <small class="p-error block">{{someErrorDescription}}</small>
-    }
-  </div>
-} @else {
-  <div class="w-edit-calendar-styles p-fluid field" [ngClass]="{'displayInlineBlock' : displayInlineBlock}" >
-    @if (showLabel) {
-      <w-input-label [label]="label" [required]="required" [disabled]="disabled" [size]="size" [tooltip]="tooltip" [validated]="isRequiredValid()"></w-input-label>
-    }
-    <p-datepicker class="w-edit-calendar-small" 
-      [ngClass]="{'disabled': disabled, 
-                  'w-edit-calendar-no-icon' : !showIcon,
-                  'ng-invalid ng-dirty': isNgModelInvalid()
-      }" 
-      [(ngModel)]="ngModelValue" 
-      placeholder="{{placeholder}}"
-      appendTo="body" 
-      [disabled]="disabled"
-      [showIcon]="showIcon"
-      [icon]="timeOnly ? 'pi pi-clock' : 'pi pi-calendar'"  
-      [showTime]="showTime" 
-      [timeOnly]="timeOnly" 
-      [showSeconds]="showSeconds" 
-      [showIcon]="showIcon" 
-      [minDate]="minDate"
-      [maxDate]="maxDate" 
-      [firstDayOfWeek]="firstDayOfWeek"
-      [required]="required" 
-      [dataType]="dataType" 
-      [view]="viewType" 
-      [dateFormat]="dateFormat" 
-      [readonlyInput]="readonlyInput" 
-      (ngModelChange)="onDateChanged()"
-      (blur)="onDateBlur()"
-      [keepInvalid]="keepInvalid"
-    />
-  </div>
-}

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

@@ -1,72 +0,0 @@
-@import '../../../styles/_variables.scss';
-
-.w-edit-calendar-styles {
-  margin: $spacingZero;
-  display: grid;
-  gap: $spacingXSM !important;
-}
-
-::ng-deep .w-edit-calendar-small.p-datepicker {
-    padding: $spacingZero;
-    box-shadow: none;
-    background: none;
-
-    .p-datepicker-input {
-        @extend .w-input-small-placeholder-text;
-        height: $simpleInputHeight;
-        width: 100%;
-        border-radius: $defaultBorderRadius $spacingZero $spacingZero $defaultBorderRadius;
-        border-width: $defaultBorderWidth;
-        padding: $spacingZero $spacingXS !important;
-        border: $defaultBorderWidth solid $black200;
-
-        &:not(:disabled):hover {
-            border-color: $secondary400;
-        }
-
-        &:not(:disabled):focus {
-            @extend .focusedInput;
-        }
-    }
-
-    &.w-edit-calendar-no-icon .p-datepicker-input {
-        border-radius: $defaultBorderRadius !important;
-    }
-
-    .p-datepicker-dropdown {
-        border: $defaultBorderWidth solid $primary700;
-        border-left: $spacingZero;
-        background-color: $primary700;
-        color: $white; 
-
-        &:not(:disabled):hover {
-            background-color: $secondary400;
-            border-color: $secondary400;
-            color: $white; 
-        }
-
-        &:enabled:focus {
-            outline: $defaultBorderWidth solid $primary50;
-            background-color: $primary700;
-            color: $white; 
-            @extend .focusedInput;
-        }
-    }
-
-    &.disabled{
-        .p-datepicker-input {
-            @extend .w-input-disabled;
-
-            .p-select-label.p-placeholder{
-                @extend .w-input-small-placeholder-text-disabled-only-color;
-            } 
-        }
-
-        .p-datepicker-dropdown { 
-            background: $black200;
-            color: $black400;
-            border-color: $black200;
-            pointer-events: none;
-        }
-    }
-}

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

@@ -1,23 +0,0 @@
-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

@@ -1,168 +0,0 @@
-import { AfterViewInit, Component, EventEmitter, Input, OnChanges, OnInit, Optional, Output, Self, SimpleChanges, forwardRef } from '@angular/core';
-import { NG_VALUE_ACCESSOR, ControlValueAccessor, FormControl } from '@angular/forms';
-import { SizeType } from '../../shared/enums/enum';
-import { DatePickerTypeView } from 'primeng/datepicker';
-
-@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
-        }
-    ],
-    standalone: false
-})
-export class WEditCalendarComponent implements OnInit, AfterViewInit, OnChanges, ControlValueAccessor {
-
-  private _minDate!: Date;
-  
-  @Input() set minDate(value: Date) {
-    if(this.autoMinDate){
-      if(this.ngModelValue < value) { this.ngModelValue = value }
-      if(this.formControl?.value && this.formControl?.value < value) { this.onValue(value) }
-    }
-    this._minDate = value;
-  }
-  
-  get minDate() {
-    return this._minDate;
-  }
-
-  private _maxDate!: Date;
-
-  @Input() set maxDate(value: Date) {
-    if(this.ngModelValue > value) { this.ngModelValue = value }
-    if(this.formControl?.value && this.formControl?.value > value) { this.onValue(value) }
-    this._maxDate = value;
-  }
-  
-  get maxDate() {
-    return this._maxDate;
-  }
-  
-  @Input('label') label!: string;
-  @Input('showLabel') showLabel: boolean = true;
-  @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('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('someErrorDescription') someErrorDescription : string = "Mensaje default some error";
-  @Input('removePaddingTop') removePaddingTop: boolean = false;
-  @Input('firstDayOfWeek') firstDayOfWeek: number = 1;
-  @Input('tooltip') tooltip!: string;
-  @Input() tooltipPosition?: string;
-  @Input('dataType') dataType: string = 'date';
-  @Input('viewType') viewType: DatePickerTypeView = 'date';
-  @Input('monthMode') monthMode: boolean = false;
-  @Input('readonlyInput') readonlyInput!: boolean; 
-  @Input('keepInvalid') keepInvalid: boolean = true;
-  @Input('autoMinDate') autoMinDate: boolean = true;
-
-  @Output('onChange') onChangeEvent: EventEmitter<any> = new EventEmitter();
-
-  @Input('dateFormat') dateFormat: string = '';
-  sizeType: typeof SizeType = SizeType;
-
-  ngModelValue: any;
-
-  isTouched : boolean = false;
-  onChange: any = () => {};
-  onTouch: any = () => {};
-  ngModelTouched: boolean = false;
-
-  ngOnInit(): void {
-    if(this.monthMode) {
-      this.showTime = false;
-      this.timeOnly = false;
-      this.dateFormat = 'dd/MM'
-    }
-   }
-
-   ngAfterViewInit(): void {
-     this.ngModelTouched = true;
-   }
-  
-  ngOnChanges(changes: SimpleChanges): void {
-    if(changes['viewType']?.previousValue !== undefined){
-      this.viewType = changes['viewType'].currentValue;
-    }
-
-    if(changes['dateFormat']?.previousValue !== undefined){
-      this.dateFormat = changes['dateFormat'].currentValue;
-    }
-  }
-
-  writeValue(value: any) {
-    if(typeof(value) === 'string') {
-      if(value.trim() === "") {
-        value = null;
-      } else {
-        value = new Date(value);
-        if(isNaN(value.getTime())) {
-          value = null;
-        }
-      }
-    }
-    this.ngModelValue = value;
-  }
-
-  registerOnChange(fn: any): void {
-    this.onChange = fn;
-  }
-
-  registerOnTouched(fn: any): void {
-    this.onTouch = fn;
-  }
-
-  setDisabledState(isDisabled: boolean): void {
-    this.disabled = isDisabled;
-  }
-
-  onValue(value: any){
-    this.onChangeEvent.emit(value);
-  }
-
-  onInputValue(value: any){
-    if(value.data == null){
-      this.onChangeEvent.emit(null);
-    }
-  }
-
-  getSizeName(value: number): string {
-    return SizeType[value];
-  }
-
-  onDateChanged(){
-    this.onChange(this.ngModelValue);
-    this.onTouch();
-
-    this.onChangeEvent.emit(this.ngModelValue);
-  }
-
-  isRequiredValid(): boolean {
-    return !(this.required && this.formControl?.hasError('required'));
-  }
-
-  isRequiredValidNgModel(): boolean {
-    return !(this.required && this.ngModelValue == null);
-  }
-
-  onDateBlur() {
-    this.ngModelTouched = true;
-  }
-
-  isNgModelInvalid(): boolean {
-    return this.required && !this.ngModelValue && this.ngModelTouched;
-  }
-}

package/src/lib/edit/w-edit-calendar-month/w-edit-calendar-month.component.html

@@ -1,42 +0,0 @@
-<div class="w-edit-calendar-month-styles p-fluid field">
-  @if (showLabel) {
-    <w-input-label [label]="label" [tooltip]="tooltip" [tooltipPosition]="tooltipPosition" [required]="required" [disabled]="disabled" [validated]="formControl ? isRequiredValid() : isRequiredValidNgModel()"></w-input-label>
-  }
-  @if (formControl) {
-      <p-datepicker class="w-edit-calendar-month" panelStyleClass="w-edit-calendar-month-panel"
-        [ngClass]="{'disabled': disabled, 
-                    'ng-invalid ng-dirty': formControl.hasError('required') && formControl.touched, 
-                    'w-edit-calendar-no-icon' : !showIcon}"
-        [formControl]="formControl"
-        [required]="required"
-        [placeholder]="placeholder"
-        (onSelect)="onValue($event)"
-        dateFormat="dd/MM"
-        [dataType]="dataType"
-        [minDate]="minDate"
-        [maxDate]="maxDate"
-        [showIcon]="showIcon"
-        [icon]="'pi pi-calendar'"
-        appendTo="body">
-      </p-datepicker>
-      @if (formControl.hasError('required') && formControl.touched) {
-        <small class="p-error block">{{requiredErrorDescription}}</small>
-      }
-  } @else {
-    <p-datepicker class="w-edit-calendar-month" panelStyleClass="w-edit-calendar-month-panel" 
-      [ngClass]="{'disabled': disabled, 
-                  'w-edit-calendar-no-icon' : !showIcon}"
-      [(ngModel)]="ngModelValue"
-      (ngModelChange)="onDateChanged()"
-      [placeholder]="placeholder" 
-      [disabled]="disabled"
-      dateFormat="dd/MM"
-      [dataType]="dataType"
-      [minDate]="minDate"
-      [maxDate]="maxDate"
-      [showIcon]="showIcon"
-      [icon]="'pi pi-calendar'"
-      appendTo="body">
-    </p-datepicker>
-  }
-</div>

package/src/lib/edit/w-edit-calendar-month/w-edit-calendar-month.component.scss

@@ -1,86 +0,0 @@
-@import './../../../styles/variables'; 
-
-.w-edit-calendar-month-styles {
-    margin: $spacingZero;
-    display: grid;
-    gap: $spacingXSM !important;
-}
-
-::ng-deep .w-edit-calendar-month.p-datepicker {
-    padding: $spacingZero;
-    box-shadow: none;
-    background: none;
-
-    .p-datepicker-input {
-        @extend .w-input-small-placeholder-text;
-        height: $simpleInputHeight;
-        width: 100%;
-        border-radius: $defaultBorderRadius $spacingZero $spacingZero $defaultBorderRadius;
-        border-width: $defaultBorderWidth;
-        padding: $spacingZero $spacingXS !important;
-        border: $defaultBorderWidth solid $black200;
-
-        &:not(:disabled):hover {
-            border-color: $secondary400;
-        }
-
-        &:not(:disabled):focus {
-            @extend .focusedInput;
-        }
-    }
-
-    &.w-edit-calendar-no-icon .p-datepicker-input {
-        border-radius: $defaultBorderRadius !important;
-    }
-
-    .p-datepicker-dropdown {
-        border: $defaultBorderWidth solid $primary700;
-        border-left: $spacingZero;
-        background-color: $primary700;
-        color: $white; 
-
-        &:not(:disabled):hover {
-            background-color: $secondary400;
-            border-color: $secondary400;
-            color: $white; 
-        }
-
-        &:enabled:focus {
-            outline: $defaultBorderWidth solid $primary50;
-            background-color: $primary700;
-            color: $white; 
-            @extend .focusedInput;
-        }
-    }
-
-    &.disabled{
-        .p-datepicker-input {
-            @extend .w-input-disabled;
-
-            .p-select-label.p-placeholder{
-                @extend .w-input-small-placeholder-text-disabled-only-color;
-            } 
-        }
-
-        .p-datepicker-dropdown { 
-            background: $black200;
-            color: $black400;
-            border-color: $black200;
-            pointer-events: none;
-        }
-    }
-}
-
-::ng-deep .w-edit-calendar-month-panel {
-    .p-datepicker-calendar-container {
-        .p-datepicker-calendar {
-            .p-datepicker-header {
-                .p-datepicker-title {
-                    .p-datepicker-select-year {
-                        display: none; 
-                    }
-                }
-            }
-        }
-    }
-}

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

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

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

@@ -1,77 +0,0 @@
-import { Component, EventEmitter, Input, OnInit, Output, forwardRef } from '@angular/core';
-import { ControlValueAccessor, FormControl, NG_VALUE_ACCESSOR } from '@angular/forms';
-
-@Component({
-    selector: 'w-edit-calendar-month',
-    templateUrl: './w-edit-calendar-month.component.html',
-    styleUrls: ['./w-edit-calendar-month.component.scss'],
-    providers: [
-        {
-            provide: NG_VALUE_ACCESSOR,
-            useExisting: forwardRef(() => WEditCalendarMonthComponent),
-            multi: true
-        }
-    ],
-    standalone: false
-})
-export class WEditCalendarMonthComponent implements OnInit, ControlValueAccessor {
-  @Input('label') label!: string; 
-  @Input('showLabel') showLabel: boolean = true; 
-  @Input('placeholder') placeholder: string = "";
-  @Input('tooltip') tooltip!: string;
-  @Input() tooltipPosition?: string;
-  @Input('disabled') disabled: boolean = false;
-  @Input('formControl') formControl!: FormControl | null;
-  @Input('required') required: boolean = false;
-  @Input('requiredErrorDescription') requiredErrorDescription : string = "Mensaje default required";
-  @Input('dataType') dataType: string = 'date';
-  @Input('minDate') minDate!: Date;
-  @Input('maxDate') maxDate!: Date;
-  @Input('showIcon') showIcon: boolean = true;
-
-  @Output('onChange') onChangeEvent: EventEmitter<any> = new EventEmitter(); 
-
-  ngModelValue: any;
-  isTouched : boolean = false;
-  onChange: any = () => {};
-  onTouch: any = () => {};
-
-  constructor(){} 
-  
-  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.disabled = isDisabled;
-  }
-
-  onValue(value: any){
-    this.onChangeEvent.emit(value);
-  }
-
-  onDateChanged(){
-    this.onChange(this.ngModelValue);
-    this.onTouch();
-
-    this.onChangeEvent.emit(this.ngModelValue);
-  }
-
-  isRequiredValid(): boolean {
-    return !(this.required && this.formControl && this.formControl?.hasError('required'));
-  }
-
-  isRequiredValidNgModel(): boolean {
-    return !(this.required && this.ngModelValue == null);
-  }
-}

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

@@ -1,35 +0,0 @@
-@if (formControl) {
-  <div class="flex align-content-center"
-    [ngClass]="{'w-edit-checkbox-small-field': getSize(sizeType.small) == size}">
-    <p-checkbox
-      [binary]="true"
-      [ngClass]="{'w-edit-checkbox-small': getSize(sizeType.small) == size}"
-      [formControl]="formControl" id="w-checkbox">
-    </p-checkbox>
-    @if (showLabel) {
-      <w-input-label class="w-edit-checkbox-small-label"
-        [label]="label"
-        [required]="formControl.hasError('required')"
-        [disabled]="isDisabled"
-        [size]="'small'"
-        [tooltip]="tooltip"
-        [tooltipPosition]="tooltipPosition"
-        [validated]="isRequiredValid()">
-      </w-input-label>
-    }
-  </div>
-} @else {
-  <div class="flex align-content-center"
-    [ngClass]="{'w-edit-checkbox-small-field': getSize(sizeType.small) == size}">
-    <p-checkbox
-      [binary]="true"
-      [ngClass]="{'w-edit-checkbox-small': getSize(sizeType.small) == size}"
-      (ngModelChange)="onInput($event)"
-      [(ngModel)]="value" id="w-checkbox"
-      [disabled]="isDisabled">
-    </p-checkbox>
-    @if (showLabel) {
-      <w-input-label class="w-edit-checkbox-small-label" [label]="label" [disabled]="isDisabled" [size]="'small'" [tooltip]="tooltip" [tooltipPosition]="tooltipPosition" [validated]="isRequiredValidNgModel()"></w-input-label>
-    }
-  </div>
-}

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

@@ -1,37 +0,0 @@
-@import '../../../styles/variables.scss';
-
-.w-edit-checkbox-small-field {
-  height: $spacingXXL;
-  justify-content: start;
-  align-content: center;
-  align-items: center;
-  display: grid;
-  gap: $spacingXSM;
-}
-
-/* SMALL */
-::ng-deep .w-edit-checkbox-small {
-  width: $spacingM;
-  height: $spacingM; 
-  
-  &:not(.p-disabled):not([data-p-highlight="false"]):has(.p-checkbox-input:hover) .p-checkbox-box {
-    border: $defaultBorderWidth solid $secondary400;
-    background-color: $secondary400;
-  }
-
-  &:not(.p-disabled):not([data-p-highlight="true"]):has(.p-checkbox-input:hover) .p-checkbox-box {
-      background-color: $textSoftestColor;
-      border: $defaultBorderWidth solid $textSofterColor;
-  }
-
-  .p-checkbox-box {
-    width: $spacingM;
-    height: $spacingM; 
-    border-radius: $subtleBorderRadius;
-    border: $defaultBorderWidth solid $textSofterColor;
-  }
-
-  &.p-disabled {
-    @extend .w-input-disabled;
-  }
-}

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

@@ -1,23 +0,0 @@
-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();
-  });
-});