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

package/ng-package.json

@@ -1,11 +0,0 @@
-{
-  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
-  "dest": "../../dist/wapp-components",
-  "assets": [
-    { "input": "src/assets/wappIcons", "glob": "**/*.svg", "output": "assets/wappIcons" }, 
-    { "input": "src/assets/images", "glob": "**/*.png", "output": "assets/images" }
-  ],
-  "lib": {
-    "entryFile": "src/public-api.ts"
-  }
-}

package/src/lib/button/w-button/w-button.component.html

@@ -1,62 +0,0 @@
-@if (type == getButtonTypeName(buttonType.primary)) {
-  @if (size == getSizeName(sizeType.small)) {
-    <p-button #test
-      label="{{label}}"
-      [icon]="getIcon()"
-      [iconPos]="iconPos == 'right' ? 'right' : 'left'"
-      styleClass="w-button-small border-none {{buttonClass}}"
-      [disabled]="disabled"
-      (onClick)="onButtonClick($event)"
-      [loading]="loading"
-      [pTooltip]="tooltip"
-      [tooltipPosition]="tooltipPosition"
-      >
-    </p-button>
-  }
-} @else {
-  @if (type == getButtonTypeName(buttonType.secondary) || type == getButtonTypeName(buttonType.tertiary)) {
-    @if (size == getSizeName(sizeType.small)) {
-      <p-button
-        label="{{label}}"
-        [icon]="getIcon()"
-        [iconPos]="iconPos == 'right' ? 'right' : 'left'"
-        [styleClass]="'p-button-outlined ' + (type == getButtonTypeName(buttonType.tertiary) ? 'w-button-small-tertiary' : 'w-button-small p-button-outlined')"
-        [outlined]="true"
-        [disabled]="disabled"
-        (onClick)="onButtonClick($event)"
-        [loading]="loading"
-        [pTooltip]="tooltip"
-        [tooltipPosition]="tooltipPosition"
-        [showDelay]="tooltipDelay"
-        >
-      </p-button>
-    }
-  } @else {
-    @if (type == getButtonTypeName(buttonType.text)) {
-      <p-button
-        label="{{label}}"
-        [icon]="getIcon()"
-        [iconPos]="iconPos == 'right' ? 'right' : 'left'"
-        styleClass="p-button-text w-button-text-small {{buttonClass}}"
-        [text]="true"
-        [disabled]="disabled"
-        (onClick)="onButtonClick($event)"
-        [loading]="loading"
-        [pTooltip]="tooltip"
-        [tooltipPosition]="tooltipPosition"
-        [showDelay]="tooltipDelay">
-      </p-button>
-    } @else {
-      <p-button
-        [icon]="getIcon()"
-        styleClass="w-table-button {{buttonClass}}"
-        [disabled]="disabled"
-        (onClick)="onButtonClick($event)"
-        [pTooltip]="tooltip"
-        [tooltipPosition]="tooltipPosition"
-        [showDelay]="tooltipDelay"
-        class="p-button-text">
-      </p-button>
-    }
-  }
-}

package/src/lib/button/w-button/w-button.component.scss

@@ -1,176 +0,0 @@
-@import '../../../styles/_variables.scss';
-
-:host ::ng-deep .w-button-small.p-button {
-    height: 32px;
-    padding: calc($spacingXS - $defaultBorderWidth) calc($spacingM - $defaultBorderWidth);
-    border-radius: $defaultBorderRadius;
-    border-width: $defaultBorderWidth;
-    box-shadow: $buttonShadow;
-    gap: $spacingXS;
-
-    :hover{
-        border-width: $defaultBorderWidth;
-    }
-
-    .p-button-icon{
-        margin-right: $spacingZero;
-        @extend .w-button-small-icon-text;
-    }
-
-    .p-button-label{
-        @extend .w-button-small-label-text-typography;
-    }
-}
-
-:host ::ng-deep .w-button-small.p-button:enabled:hover {
-    background-color: $secondary400;
-    border-color: $secondary400;
-}
-
-:host ::ng-deep .w-button-small.p-button:enabled:focus {
-    outline: $defaultBorderWidth solid $primary50;
-    background-color: $primary700;
-    @extend .focusedInput;
-}
-
-:host ::ng-deep .w-button-small.p-button.p-button-outlined{
-    border: $defaultBorderWidth solid rgba($primary700, 0.25);
-    :enabled:hover {
-        border-radius: $defaultBorderRadius;
-        border-width: $defaultBorderWidth;
-    }
-}
-
-:host ::ng-deep .w-button-small.p-button.p-button-outlined:enabled:hover {
-    border-radius: $defaultBorderRadius;
-    border-width: $defaultBorderWidth;
-    background-color: $primaryBgColor;
-    border-color: $secondary400;
-    color: $secondary400;
-}
-
-:host ::ng-deep .w-button-small.p-button.p-button-outlined:focus {
-    border-color: $primary700;
-    color: $primary700;
-    background-color: $primaryBgColor;
-    outline: $spacingZero;
-}
-
-:host ::ng-deep .w-button-small.p-button.p-button-outlined:disabled {
-    background-color: $primaryBgColor;
-    color: $black400;
-    border-color: $black200;
-}
-
-:host ::ng-deep .w-button-small.p-button:disabled {
-  background: $black200;
-  color: $black400;
-}
-
-:host ::ng-deep .w-button-small-tertiary.p-button{
-    @extend .w-button-small;
-    @extend .w-button-small-tertiary-label-text;
-    border: $defaultBorderWidth solid $black200;
-}
-
-:host ::ng-deep .w-button-small-tertiary.p-button.p-button-outlined:enabled:hover{
-    border-color: $secondary400;
-    color: $secondary400;
-}
-
-:host ::ng-deep .w-button-small-tertiary.p-button.p-button-outlined:enabled:focus{
-    border: $defaultBorderWidth solid $black300;
-    color: $black700;
-}
-
-:host ::ng-deep .w-button-small.p-button.p-button-icon-only,
-:host ::ng-deep .w-button-small-tertiary.p-button.p-button-icon-only,
-:host ::ng-deep .w-button-text-small.p-button.p-button-icon-only
-{ 
-    width: 32px;
-    .p-button-icon{
-        padding-left: $spacingZero;
-        margin-left: calc($spacingXS - $defaultBorderWidth);
-    }
-}
-
-:host ::ng-deep .w-button-text-small.p-button{
-    @extend .w-button-small;
-    @extend .w-button-small-text-label-text; 
-    border: none;
-    box-shadow: none;
-}
-
-:host ::ng-deep .w-button-text-small.p-button.p-button-text .p-button-label{
-    @extend .w-button-small-only-label-text;
-}
-
-:host ::ng-deep .w-button-text-small.p-button.p-button-text:enabled:hover{
-    color: $secondary400; 
-    background: none;
-    border: none;
-}
-
-:host ::ng-deep .w-button-text-small.p-button.p-button-text:enabled:focus{
-    background: none;
-    border: none;
-}
-
-:host ::ng-deep .w-button-small.p-button.p-button-text:disabled{
-    background: none;
-    border: none;
-    color: $black400;
-}
-
-
-::ng-deep .w-table-button{
-    &.p-button{
-        background-color: $primaryBgColor !important;
-        border: $defaultBorderWidth solid $white;
-        border-radius: $defaultBorderRadius;
-        box-shadow: $buttonShadow; 
-        padding: $spacingXSM;
-        width: $spacingXXL;
-        height: $spacingXXL;
-
-        &:enabled:hover{
-            background-color: $primaryBgColor;
-            border: $defaultBorderWidth solid $white;
-        }
-
-        .p-button-icon{
-            @extend .w-table-button-small-icon-text; 
-            display: inline-flex;
-        }
-    }
-}
-
-
-::ng-deep .w-table-button.w-table-button-view{
-    &.p-button{
-        .p-button-icon{
-            color: $iconViewColor; 
-        }
-    }
-}
-
-::ng-deep .w-table-button.w-table-button-edit, 
-::ng-deep .w-table-button.w-table-button-add{
-    &.p-button{
-        .p-button-icon{
-            color: $iconEditColor; 
-        }
-    }
-}
-
-::ng-deep .w-table-button.w-table-button-delete{
-    &.p-button{
-        .p-button-icon{
-            color: $iconDeleteColor; 
-        }
-    }
-}
-
-:host:has(.p-disabled){
-    pointer-events: none !important;
-}

package/src/lib/button/w-button/w-button.component.spec.ts

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

package/src/lib/button/w-button/w-button.component.ts

@@ -1,44 +0,0 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { ButtonType, SizeType } from '../../shared/enums/enum';
-
-@Component({
-    selector: 'w-button',
-    templateUrl: './w-button.component.html',
-    styleUrls: ['./w-button.component.scss'],
-    standalone: false
-})
-export class WButtonComponent implements OnInit{
-  @Input('type') type: string = "primary";
-  @Input('label') label!: string;
-  @Input('size') size: string = "small";
-  @Input('icon') icon: string = "";
-  @Input('iconPos') iconPos: string = "left";
-  @Input('tooltipPosition') tooltipPosition: string = "bottom";
-  @Input('tooltip') tooltip: string = "";
-  @Input('disabled') disabled: boolean = false;
-  @Input('loading') loading: boolean = false;
-  @Output('onClick') onClick: EventEmitter<MouseEvent> = new EventEmitter();
-  @Input('buttonClass') buttonClass: string = "";
-  
-  sizeType: typeof SizeType = SizeType;
-  buttonType: typeof ButtonType = ButtonType;
-  tooltipDelay: number = 250;
-
-  ngOnInit(): void {}
-
-  onButtonClick(event: MouseEvent){
-    this.onClick.emit(event);
-  }
-  
-  getIcon(): string{
-    return this.loading ? '' : (this.icon ? "pi " + this.icon : "");
-  }
-  
-  getSizeName(value: number): string {
-    return SizeType[value];
-  }
-
-  getButtonTypeName(value: number): string{
-    return ButtonType[value];
-  }
-}

package/src/lib/button/w-button-week/w-button-week.component.html

@@ -1,10 +0,0 @@
-<p-selectbutton class="w-button-week-small" 
-    [options]="defaultEsp ? weekDaysEsp : weekDays" 
-    [(ngModel)]="value" 
-    [multiple]="true" 
-    optionLabel="name" 
-    optionValue="value" 
-    (onChange)="onValueChanged()" 
-    (onOptionClick)="onButtonOptionClick($event)" 
-    optionDisabled="disabled">
-</p-selectbutton>

package/src/lib/button/w-button-week/w-button-week.component.scss

@@ -1,42 +0,0 @@
-@import './../../../styles/variables'; 
-
-:host ::ng-deep .w-button-week-small .p-togglebutton {
-	height: $spacingXXL;
-    width: 40px; 
-    padding: calc($spacingXS - $defaultBorderWidth) $spacingXXS;
-    
-    .p-togglebutton-label{
-        @extend .w-button-small-label-text-typography-sm;
-    }
-
-	&.p-disabled {
-		opacity: 1; 
-   		pointer-events: none; 
-
-		&:not(.p-togglebutton-checked){
-			&:hover {
-				background: $white; 
-			}
-		}
-	}
-}
-
-:host ::ng-deep .w-button-week-small .p-togglebutton:focus {
-	box-shadow: none;
-}
-
-::ng-deep .w-button-week-small .p-togglebutton.p-togglebutton-checked {
-	background: $primary700;
-	border-color: transparent;
-	color: $secondary400;
-}
-
-::ng-deep .p-togglebutton.p-togglebutton-checked {
-	background: $primary700;
-	border-color: transparent;
-	color: $textInverseColor;
-}
-
-:host ::ng-deep .w-button-week-small .p-togglebutton.p-togglebutton-checked {
-    color: $textInverseColor;
-}

package/src/lib/button/w-button-week/w-button-week.component.spec.ts

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

package/src/lib/button/w-button-week/w-button-week.component.ts

@@ -1,81 +0,0 @@
-import { AfterViewInit, Component, EventEmitter, Input, OnInit, Output, forwardRef } from '@angular/core';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-
-@Component({
-    selector: 'w-button-week',
-    templateUrl: './w-button-week.component.html',
-    styleUrls: ['./w-button-week.component.scss'],
-    providers: [
-        {
-            provide: NG_VALUE_ACCESSOR,
-            useExisting: forwardRef(() => WButtonWeekComponent),
-            multi: true
-        }
-    ],
-    standalone: false
-})
-export class WButtonWeekComponent implements OnInit, ControlValueAccessor {
-  @Input('value') value!: number[];
-  @Input('translations') translations!: string[];
-  @Input('defaultEsp') defaultEsp: boolean = false; 
-  @Output('onDayClick') onDayClick: EventEmitter<MouseEvent> = new EventEmitter(); 
-    
-  weekDays: any[] = [
-    { name: 'Mon', value: 1, disabled: true },
-    { name: 'Tue', value: 2, disabled: true },
-    { name: 'Wed', value: 3, disabled: true }, 
-    { name: 'Thu', value: 4, disabled: true },
-    { name: 'Fri', value: 5, disabled: true },
-    { name: 'Sat', value: 6, disabled: true }, 
-    { name: 'Sun', value: 0, disabled: true }
-  ];
-
-  weekDaysEsp: any[] = [
-    { name: 'L', value: 1, disabled: true },
-    { name: 'M', value: 2, disabled: true },
-    { name: 'MX', value: 3, disabled: true }, 
-    { name: 'J', value: 4, disabled: true },
-    { name: 'V', value: 5, disabled: true },
-    { name: 'S', value: 6, disabled: true }, 
-    { name: 'D', value: 0, disabled: true }
-  ];
-
-  isTouched: boolean = false;
-  onChange = (_: any) => { }
-  onTouch = () => { }
-
-  ngOnInit(): void {
-    if(this.translations){
-      if(this.translations.length == 7){
-        this.weekDays = this.weekDays.map((day:any, index) => {
-          return {
-            name: this.translations[index], 
-            value: day.value, 
-            disabled: day.disabled
-          }
-        })
-      }
-    }
-  }
-
-  writeValue(value: any): void {
-    this.value = value; 
-  }
-
-  registerOnChange(fn: any): void {
-    this.onChange = fn;
-  }
-
-  registerOnTouched(fn: any): void {
-    this.onTouch = fn;
-  }
-
-  onValueChanged(){
-    this.onChange(this.value); 
-    this.onTouch(); 
-  }
-
-  onButtonOptionClick(event: any){
-    this.onDayClick.emit(event.option); 
-  }
-}

package/src/lib/button/w-buttons-footer/w-buttons-footer.component.html

@@ -1,3 +0,0 @@
-<div class="flex flex-row-reverse flex-wrap right-0 bottom-0 fixed wapp-button-footer">
-    <ng-content select=".wapp-buttons-footer"></ng-content>
-</div>

package/src/lib/button/w-buttons-footer/w-buttons-footer.component.scss

@@ -1,11 +0,0 @@
-@import './../../../styles/_variables.scss';
-@import 'primeflex/primeflex.scss';
-
-.wapp-button-footer{
-    padding: calc($spacingS + $spacingS) ($spacingXXL + $spacingM);
-}
-
-:host ::ng-deep .wapp-buttons-footer{
-    @include styleclass('flex flex-row-reverse');
-    gap: $spacingM;
-}

package/src/lib/button/w-buttons-footer/w-buttons-footer.component.spec.ts

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

package/src/lib/button/w-buttons-footer/w-buttons-footer.component.ts

@@ -1,11 +0,0 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-
-@Component({
-    selector: 'w-buttons-footer',
-    templateUrl: './w-buttons-footer.component.html',
-    styleUrls: ['./w-buttons-footer.component.scss'],
-    standalone: false
-})
-export class WButtonsFooterComponent {
-
-}

package/src/lib/button/w-radio-button/w-radio-button.component.html

@@ -1,38 +0,0 @@
-@if (formControl) {
-  <div>
-    @for (option of radioGroupElements; track option) {
-      <div class="field-checkbox">
-        <p-radiobutton [ngClass]="{'w-radiobutton-small' : size == getSizeName(sizeType.small),
-                                   'w-radiobutton-medium' : size == getSizeName(sizeType.medium)}"
-          [inputId]="option.key"
-          [required]="required"
-          [disabled]="disabled"
-          [formControl]="formControl"
-          ngDefaultControl
-          (onClick)="onChangedForm($event)">
-        </p-radiobutton>
-        <label [ngClass]="{'w-radiobutton-label-small' : size == getSizeName(sizeType.small),
-                           'w-radiobutton-label-medium' : size == getSizeName(sizeType.medium)}" [for]="option.key">{{option.name}}</label>
-      </div>
-    }
-    @if (formControl.hasError('required') && formControl.touched) {
-      <small class="p-error block">{{requiredErrorDescription}}</small>
-    }
-  </div>
-} @else {
-  @for (option of radioGroupElements; track option) {
-    <div class="field-checkbox">
-        <p-radiobutton [ngClass]="{'w-radiobutton-small' : size == getSizeName(sizeType.small),
-                                   'w-radiobutton-medium' : size == getSizeName(sizeType.medium)}"
-        [inputId]="option.key"
-        [(ngModel)]="ngModelValue"
-        [disabled]="disabled"
-        [value]="option"
-        ngDefaultControl
-        (onClick)="onChanged()">
-      </p-radiobutton>
-        <label [ngClass]="{'w-radiobutton-label-small' : size == getSizeName(sizeType.small),
-                           'w-radiobutton-label-medium' : size == getSizeName(sizeType.medium)}" [for]="option.key">{{option.name}}</label>
-    </div>
-  }
-}

package/src/lib/button/w-radio-button/w-radio-button.component.scss

@@ -1,115 +0,0 @@
-@import '../../../styles/_variables.scss';
-
-:host ::ng-deep .w-radiobutton-small.p-radiobutton .p-radiobutton-box {
-    border: $defaultBorderWidth solid $black300;
-    background: $white;
-    min-width: 16px;
-    width: 16px;
-    height: 16px;
-    color: $primaryColor;
-    border-radius: 50%;
-    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
-}
-
-:host ::ng-deep .w-radiobutton-medium.p-radiobutton .p-radiobutton-box {
-    border: $defaultBorderWidth solid $black300;
-    background: $white;
-    min-width: 24px;
-    width: 24px;
-    height: 24px;
-    color: $primaryColor;
-    border-radius: 50%;
-    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
-}
-
-:host ::ng-deep .w-radiobutton-small.p-radiobutton .p-radiobutton-box:hover {
-    border: $defaultBorderWidth solid $black300;
-    background: $white;
-    min-width: 16px;
-    width: 16px;
-    height: 16px;
-    color: $black300;
-    border-radius: 50%;
-    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
-  }
-
-:host ::ng-deep .w-radiobutton-medium.p-radiobutton .p-radiobutton-box:hover {
-    border: $defaultBorderWidth solid $black300;
-    background: $white;
-    min-width: 24px;
-    width: 24px;
-    height: 24px;
-    color: $black300;
-    border-radius: 50%;
-    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
-  }
-
-  :host ::ng-deep .w-radiobutton-small.p-radiobutton.p-radiobutton-box:focus,
-  :host ::ng-deep .w-radiobutton-small.p-radiobutton.p-radiobutton-box:focus {
-    @extend .focusedInput;
-  }
-
-  :host ::ng-deep .p-radiobutton.p-radiobutton-box:not(.p-disabled).p-focus {
-    @extend .focusedInput;
-  }
-
-:host ::ng-deep .w-radiobutton-medium.p-radiobutton .p-radiobutton-box .p-radiobutton-icon {
-    width: 12px;
-    height: 12px;
-    transition-duration: 0.2s;
-    background-color: #ffffff;
-}
-
-:host ::ng-deep .w-radiobutton-small.p-radiobutton .p-radiobutton-box .p-radiobutton-icon {
-    width: 8px;
-    height: 8px;
-    transition-duration: 0.2s;
-    background-color: #ffffff;
-}
-
-  :host ::ng-deep .w-radiobutton-small.p-radiobutton.p-radiobutton-checked .p-radiobutton-box, 
-  :host ::ng-deep .w-radiobutton-medium.p-radiobutton.p-radiobutton-checked .p-radiobutton-box {
-    border-color: $primaryColor;
-    background: $primaryColor;
-  }
-
-  :host ::ng-deep .w-radiobutton-small.p-radiobutton.p-radiobutton-checked .p-radiobutton-box:hover, 
-  :host ::ng-deep .w-radiobutton-medium.p-radiobutton.p-radiobutton-checked .p-radiobutton-box:hover {
-    border-color: transparent;
-    background: transparent;
-  }
-
-  :host ::ng-deep .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
-    border-color: $black300;
-    background: $black500;
-    border: 4px solid $black300;
-  }
-
-  :host ::ng-deep .field-checkbox, .field-radiobutton {
-    height: 24px;
-    margin-bottom: $spacingM;
-    display: flex;
-    align-items: center;
-  }
-
-  ::ng-deep .field-checkbox > label.w-radiobutton-label-small, .field-radiobutton > label {
-    margin-left: $spacingXS;
-    /* line-height: 1; */
-    @extend .w-control-button-small-label-text;
-  }
-
-  ::ng-deep .field-checkbox > label.w-radiobutton-label-medium, .field-radiobutton > label {
-    margin-left: $spacingS;
-    /* line-height: 1; */
-    @extend .w-control-button-medium-label-text;
-  }
-
-  :host ::ng-deep .w-radiobutton-small.p-radiobutton {
-    width: 16px;
-    height: 16px;
-  }
-
-  :host ::ng-deep .w-radiobutton-medium.p-radiobutton {
-    width: 24px;
-    height: 24px;
-  }