ngx-wapp-components 3.0.22-alpha.2 → 3.0.22-alpha.4

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,62 +1,56 @@
-{
-  "name": "ngx-wapp-components",
-  "version": "3.0.22-alpha.2",
-  "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/animations": "^21.1.1",
-    "@angular/cdk": "^21.1.1",
-    "@angular/cli": "^21.1.1",
-    "@angular/common": "^21.1.1",
-    "@angular/compiler": "^21.1.1",
-    "@angular/core": "^21.1.1",
-    "@angular/forms": "^21.1.1",
-    "@angular/google-maps": "^21.1.1",
-    "@angular/material": "^21.1.1",
-    "@angular/platform-browser": "^21.1.1",
-    "@angular/platform-browser-dynamic": "^21.1.1",
-    "@angular/router": "^21.1.1",
-    "chart.js": "^4.4.3",
-    "chartjs-plugin-datalabels": "^2.2.0",
-    "cron-parser": "^5.0.4",
-    "cronstrue": "^2.55.0",
-    "highlight.js": "^11.8.0",
-    "ngx-highlightjs": "^14.0.1",
-    "ng-flex-layout": "^21.0.4",
-    "ngx-image-cropper": "^9.1.6",
-    "powerbi-client": "^2.23.9",
-    "powerbi-client-angular": "^6.0.3",
-    "powerbi-models": "^2.0.1",
-    "ngx-monaco-editor-v2": "^21.1.4",
-    "primeflex": "^4.0.0",
-    "primeicons": "^7.0.0",
-    "primeng": "^21.0.4",
-    "xlsx": "^0.18.5"
-  },
-  "dependencies": {
-    "tslib": "^2.3.0"
-  },
-  "sideEffects": false,
-  "module": "fesm2022/ngx-wapp-components.mjs",
-  "typings": "types/ngx-wapp-components.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./types/ngx-wapp-components.d.ts",
-      "default": "./fesm2022/ngx-wapp-components.mjs"
-    }
-  }
-}
+{
+  "name": "ngx-wapp-components",
+  "version": "3.0.22-alpha.4",
+  "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/animations": "^21.1.1",
+    "@angular/cdk": "^21.1.1",
+    "@angular/cli": "^21.1.1",
+    "@angular/common": "^21.1.1",
+    "@angular/compiler": "^21.1.1",
+    "@angular/core": "^21.1.1",
+    "@angular/forms": "^21.1.1",
+    "@angular/google-maps": "^21.1.1",
+    "@angular/material": "^21.1.1",
+    "@angular/platform-browser": "^21.1.1",
+    "@angular/platform-browser-dynamic": "^21.1.1",
+    "@angular/router": "^21.1.1",
+    "chart.js": "^4.4.3",
+    "chartjs-plugin-datalabels": "^2.2.0",
+    "cron-parser": "^5.0.4",
+    "cronstrue": "^2.55.0",
+    "highlight.js": "^11.8.0",
+    "ngx-highlightjs": "^14.0.1",
+    "ng-flex-layout": "^21.0.4",
+    "ngx-image-cropper": "^9.1.6",
+    "powerbi-client": "^2.23.9",
+    "powerbi-client-angular": "^6.0.3",
+    "powerbi-models": "^2.0.1",
+    "ngx-monaco-editor-v2": "^21.1.4",
+    "primeflex": "^4.0.0",
+    "primeicons": "^7.0.0",
+    "primeng": "^21.0.4",
+    "xlsx": "^0.18.5"
+  },
+  "devDependencies": {
+    "@types/node": "^18.19.130",
+    "rxjs": "~7.8.2",
+    "zone.js": "^0.15.1"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false
+}

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

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

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

@@ -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,44 @@
+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

@@ -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,42 @@
+@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

@@ -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,81 @@
+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

@@ -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,11 @@
+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 {
+
+}