ngx-wapp-components 1.34.23 → 1.34.24

package/ng-package.json

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

package/package.json

@@ -1,58 +1,52 @@
-{
-  "name": "ngx-wapp-components",
-  "version": "1.34.23",
-  "description": "This is a Wapping reusable component library published by Wapping.",
-  "keywords": [
-    "code",
-    "wapping",
-    "reusable",
-    "components",
-    "angular"
-  ],
-  "author": {
-    "name": "Wapping",
-    "email": "marcelfd@wappingweb.com",
-    "url": "https://www.wappingweb.com/"
-  },
-  "peerDependencies": {
-    "@angular/cdk": "^15.2.5",
-    "@angular/common": "^15.2.0",
-    "@angular/core": "^15.2.0",
-    "@angular/google-maps": "^15.2.9",
-    "angular2-query-builder": "^0.6.2",
-    "chart.js": "^4.4.3",
-    "chartjs-plugin-datalabels": "^2.2.0",
-    "cronstrue": "^2.55.0",
-    "cron-parser": "^5.0.4",
-    "highlight.js": "^11.8.0",
-    "ngx-highlightjs": "^8.0.0",
-    "ngx-image-cropper": "^6.3.4",
-    "primeflex": "^3.3.0",
-    "primeicons": "^6.0.1",
-    "primeng": "^15.2.1",
-    "xlsx": "^0.18.5"
-  },
-  "dependencies": {
-    "tslib": "^2.3.0"
-  },
-  "sideEffects": false,
-  "module": "fesm2015/ngx-wapp-components.mjs",
-  "es2020": "fesm2020/ngx-wapp-components.mjs",
-  "esm2020": "esm2020/ngx-wapp-components.mjs",
-  "fesm2020": "fesm2020/ngx-wapp-components.mjs",
-  "fesm2015": "fesm2015/ngx-wapp-components.mjs",
-  "typings": "index.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "esm2020": "./esm2020/ngx-wapp-components.mjs",
-      "es2020": "./fesm2020/ngx-wapp-components.mjs",
-      "es2015": "./fesm2015/ngx-wapp-components.mjs",
-      "node": "./fesm2015/ngx-wapp-components.mjs",
-      "default": "./fesm2020/ngx-wapp-components.mjs"
-    }
-  }
-}
+{
+  "name": "ngx-wapp-components",
+  "version": "1.34.24",
+  "description": "This is a Wapping reusable component library published by Wapping.",
+  "keywords": [
+    "code",
+    "wapping",
+    "reusable",
+    "components",
+    "angular"
+  ],
+  "author": {
+    "name": "Wapping",
+    "email": "marcelfd@wappingweb.com",
+    "url": "https://www.wappingweb.com/"
+  },
+  "peerDependencies": {
+    "@angular/cdk": "^15.2.5",
+    "@angular/common": "^15.2.0",
+    "@angular/core": "^15.2.0",
+    "@angular/google-maps": "^15.2.9",
+    "angular2-query-builder": "^0.6.2",
+    "chart.js": "^4.4.3",
+    "chartjs-plugin-datalabels": "^2.2.0",
+    "cronstrue": "^2.55.0",
+    "cron-parser": "^5.0.4",
+    "highlight.js": "^11.8.0",
+    "ngx-highlightjs": "^8.0.0",
+    "ngx-image-cropper": "^6.3.4",
+    "primeflex": "^3.3.0",
+    "primeicons": "^6.0.1",
+    "primeng": "^15.2.1",
+    "xlsx": "^0.18.5"
+  },
+  "devDependencies": {
+    "@angular/google-maps": "^15.2.9",
+    "angular2-query-builder": "^0.6.2",
+    "highlight.js": "^11.8.0",
+    "ngx-highlightjs": "^8.0.0",
+    "ngx-image-cropper": "^6.3.4",
+    "primeflex": "^3.3.0",
+    "primeicons": "^6.0.1",
+    "primeng": "^15.2.1",
+    "rxjs": "~7.5.0",
+    "xlsx": "^0.18.5",
+    "zone.js": "~0.11.4"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false
+}

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

@@ -0,0 +1,61 @@
+<ng-container *ngIf="type == getButtonTypeName(buttonType.primary); else buttonSecondary">
+    <p-button *ngIf="size == getSizeName(sizeType.small)" 
+        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"
+        [showDelay]="tooltipDelay"
+        >
+    </p-button>
+</ng-container>
+<ng-template #buttonSecondary>
+    <ng-container *ngIf="type == getButtonTypeName(buttonType.secondary) || type == getButtonTypeName(buttonType.tertiary); else buttonText">
+        <p-button *ngIf="size == getSizeName(sizeType.small)" 
+            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')"
+            [disabled]="disabled"
+            (onClick)="onButtonClick($event)"
+            [loading]="loading" 
+            [pTooltip]="tooltip" 
+            [tooltipPosition]="tooltipPosition"
+            [showDelay]="tooltipDelay"
+            >
+        </p-button>
+    </ng-container>
+    <ng-template #buttonText>
+        <ng-container *ngIf="type == getButtonTypeName(buttonType.text); else iconTableButton">
+            <p-button 
+                label="{{label}}" 
+                [icon]="getIcon()" 
+                [iconPos]="iconPos == 'right' ? 'right' : 'left'" 
+                styleClass="p-button-text w-button-text-small {{buttonClass}}"
+                [disabled]="disabled"
+                (onClick)="onButtonClick($event)"
+                [loading]="loading" 
+                [pTooltip]="tooltip" 
+                [tooltipPosition]="tooltipPosition"
+                [showDelay]="tooltipDelay"
+                >
+            </p-button>
+        </ng-container>
+        <ng-template #iconTableButton>
+            <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>
+        </ng-template>
+    </ng-template>
+</ng-template>

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

@@ -0,0 +1,175 @@
+@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.p-disabled {
+    background-color: $primaryBgColor;
+    color: $black400;
+    border-color: $black200;
+}
+
+:host ::ng-deep .w-button-small.p-button.p-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.p-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; 
+        }
+    }
+}
+
+
+::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

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

@@ -0,0 +1,43 @@
+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']
+})
+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.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

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

@@ -0,0 +1,49 @@
+@import './../../../styles/variables'; 
+
+:host ::ng-deep .w-button-week-small .p-button {
+	height: $spacingXXL;
+    width: 40px; 
+    padding: calc($spacingXS - $defaultBorderWidth) $spacingXXS;
+    
+    .p-button-label{
+        @extend .w-button-small-label-text-typography-sm;
+    }
+}
+
+::ng-deep .p-selectbutton .p-button {
+	border: $defaultBorderWidth solid $black200;
+    color: $textMainColor;
+	transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    cursor: default !important; 
+}
+
+::ng-deep .p-selectbutton .p-button:first-child {
+    border-top-right-radius: 0 !important;
+    border-bottom-right-radius: 0 !important;
+}
+
+::ng-deep .p-selectbutton .p-button:last-child {
+    border-top-left-radius: 0 !important;
+    border-bottom-left-radius: 0 !important;
+}
+
+:host ::ng-deep .w-button-week-small .p-button:focus {
+	box-shadow: none;
+}
+
+::ng-deep .w-button-week-small .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover {
+	background: $primary700;
+	border-color: transparent;
+	color: $secondary400;
+}
+
+::ng-deep .p-selectbutton .p-button.p-highlight:hover {
+	background: $primary700;
+	border-color: transparent;
+	color: $textInverseColor;
+}
+
+::ng-deep .p-selectbutton .p-button.p-disabled{
+    opacity: 1; 
+    pointer-events: auto; 
+}

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

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

@@ -0,0 +1,80 @@
+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
+    }
+  ]
+})
+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

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

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

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

@@ -0,0 +1,10 @@
+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']
+})
+export class WButtonsFooterComponent {
+
+}

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

@@ -0,0 +1,31 @@
+<div *ngIf="formControl; else noNgControl">
+    <div *ngFor="let option of radioGroupElements" 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>
+    <small *ngIf="formControl.hasError('required') && formControl.touched" class="p-error block">{{requiredErrorDescription}}</small> 
+</div>
+<ng-template #noNgControl>
+    <div *ngFor="let option of radioGroupElements" 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>
+</ng-template>