ngx-wapp-components 1.14.4 → 1.14.5

package/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/wapp-components",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

package/package.json

@@ -1,53 +1,46 @@
-{
-  "name": "ngx-wapp-components",
-  "version": "1.14.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/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",
-    "highlight.js": "^11.8.0",
-    "ngx-highlightjs": "^8.0.0",
-    "primeflex": "^3.3.0",
-    "primeicons": "^6.0.1",
-    "primeng": "^15.2.1",
-    "ngx-image-cropper": "^6.3.4"
-  },
-  "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.14.5",
+  "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",
+    "highlight.js": "^11.8.0",
+    "ngx-highlightjs": "^8.0.0",
+    "primeflex": "^3.3.0",
+    "primeicons": "^6.0.1",
+    "primeng": "^15.2.1",
+    "ngx-image-cropper": "^6.3.4"
+  },
+  "devDependencies": {
+    "@angular/google-maps": "^15.2.9",
+    "angular2-query-builder": "^0.6.2",
+    "highlight.js": "^11.8.0",
+    "ngx-highlightjs": "^8.0.0",
+    "primeflex": "^3.3.0",
+    "primeicons": "^6.0.1",
+    "primeng": "^15.2.1",
+    "rxjs": "~7.5.0",
+    "zone.js": "~0.11.4",
+    "ngx-image-cropper": "^6.3.4"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false
+}

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

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

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

@@ -0,0 +1,227 @@
+@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;
+
+    :hover{
+        border-width: $defaultBorderWidth;
+    }
+
+    .p-button-icon{
+        margin-left: $spacingXS;
+        @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:enabled:hover {
+    border-radius: $defaultBorderRadius;
+    border-width: $defaultBorderWidth;
+}
+
+:host ::ng-deep .w-button-medium.p-button {
+    height: 40px;
+    padding: calc($spacingS - $defaultBorderWidth) calc($spacingL - $defaultBorderWidth);
+    border-radius: $defaultBorderRadius;
+    border-width: $defaultBorderWidth;
+
+    .p-button-icon{
+        margin-left: $spacingS;
+        @extend .w-button-medium-icon-text;
+    }
+
+    .p-button-label{
+        @extend .w-button-medium-label-text-typography;
+    }
+}
+
+:host ::ng-deep .w-button-medium.p-button:enabled:hover {
+    background-color: $secondary400;
+    border-color: $secondary400;
+}
+
+:host ::ng-deep .w-button-medium.p-button:enabled:focus {
+    @extend .focusedInput;
+    outline: $defaultBorderWidth solid $primary50;
+    background-color: $primary700;
+}
+
+:host ::ng-deep .w-button-medium.p-button.p-button-outlined:enabled:hover {
+    border-radius: $defaultBorderRadius;
+    border-width: $defaultBorderWidth;
+}
+
+:host ::ng-deep .w-button-large.p-button {
+    height: 56px;
+    padding: calc($spacingM - $defaultBorderWidth) calc($spacingXXL - $defaultBorderWidth);
+    border-radius: $defaultBorderRadius;
+    border-width: $defaultBorderWidth;
+
+    :hover{
+        border-width: $defaultBorderWidth;
+    }
+
+    .p-button-icon{
+        margin-left: $spacingM;
+        @extend .w-button-large-icon-text;
+    }
+
+    .p-button-label{
+        @extend .w-button-large-label-text-typography;
+    }
+}
+
+:host ::ng-deep .w-button-large.p-button:enabled:hover {
+    background-color: $secondary400;
+    border-color: $secondary400;
+}
+
+:host ::ng-deep .w-button-large.p-button:enabled:focus {
+    outline: $defaultBorderWidth solid $primary50;
+    background-color: $primary700;
+    @extend .focusedInput;
+}
+
+:host ::ng-deep .w-button-small.p-button.p-button-outlined:enabled:hover,
+:host ::ng-deep .w-button-medium.p-button.p-button-outlined:enabled:hover,
+:host ::ng-deep .w-button-large.p-button.p-button-outlined:enabled:hover {
+    border-radius: $defaultBorderRadius;
+    border-width: $defaultBorderWidth;
+    background-color: transparent;
+    border-color: $secondary400;
+    color: $secondary400;
+}
+
+:host ::ng-deep .w-button-small.p-button.p-button-outlined:focus, 
+:host ::ng-deep .w-button-medium.p-button.p-button-outlined:focus, 
+:host ::ng-deep .w-button-large.p-button.p-button-outlined:focus {
+    border-color: $primary700;
+    color: $primary700;
+    background-color: transparent;
+    outline: $spacingZero;
+}
+
+:host ::ng-deep .w-button-small.p-button.p-button-outlined.p-disabled,
+:host ::ng-deep .w-button-medium.p-button.p-button-outlined.p-disabled,
+:host ::ng-deep .w-button-large.p-button.p-button-outlined.p-disabled{
+background-color: transparent;
+    color: $black400;
+    border-color: $black200;
+}
+
+:host ::ng-deep .w-button-medium.p-button.p-disabled,
+:host ::ng-deep .w-button-small.p-button.p-disabled,
+:host ::ng-deep .w-button-large.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;
+    background: none;
+    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-medium-tertiary.p-button{
+    @extend .w-button-medium;
+    @extend .w-button-medium-tertiary-label-text; 
+    border: $defaultBorderWidth solid $black200;
+}
+
+:host ::ng-deep .w-button-medium-tertiary.p-button.p-button-outlined:enabled:hover{
+    border-color: $secondary400;
+    background: none;
+    color: $secondary400;
+}
+
+:host ::ng-deep .w-button-medium-tertiary.p-button.p-button-outlined:enabled:focus{
+    border: $defaultBorderWidth solid $black300;
+    color: $black700;
+}
+
+:host ::ng-deep .w-button-large-tertiary.p-button{
+    @extend .w-button-large; 
+    @extend .w-button-large-tertiary-label-text;
+    border: $defaultBorderWidth solid $black200;
+}
+
+:host ::ng-deep .w-button-large-tertiary.p-button.p-button-outlined:enabled:hover{
+    border-color: $secondary400;
+    background: none;
+    color: $secondary400;
+}
+
+:host ::ng-deep .w-button-large-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-medium.p-button.p-button-icon-only,
+:host ::ng-deep .w-button-large.p-button.p-button-icon-only,
+:host ::ng-deep .w-button-small-tertiary.p-button.p-button-icon-only,
+:host ::ng-deep .w-button-medium-tertiary.p-button.p-button-icon-only,
+:host ::ng-deep .w-button-large-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: $spacingZero;
+    }
+}
+
+:host ::ng-deep .w-button-text-small.p-button{
+    @extend .w-button-small;
+    @extend .w-button-small-text-label-text; 
+    border: 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;
+}

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,40 @@
+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('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();
+  
+  sizeType: typeof SizeType = SizeType;
+  buttonType: typeof ButtonType = ButtonType;
+
+  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]="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,48 @@
+@import './../../../styles/variables'; 
+
+:host ::ng-deep .w-button-week-small .p-button {
+	height: 32px;
+    padding: calc($spacingXS - $defaultBorderWidth) calc($spacingM - $defaultBorderWidth);
+	border-radius: $defaultBorderRadius;
+    .p-button-label{
+        @extend .w-button-small-label-text-typography;
+    }
+}
+
+::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;
+}
+
+::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: $spacingZero $spacingZero 3px 3px #00A6E940 !important;
+}
+
+::ng-deep .w-button-week-small .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover {
+	background: transparent;
+	border-color: $black200;
+	color: $secondary400;
+}
+
+::ng-deep .p-selectbutton .p-button.p-highlight:hover {
+	background: $secondary400;
+	border-color: $secondary400;
+	color: $textInverseColor;
+}
+
+::ng-deep .p-selectbutton .p-button.p-disabled{
+    opacity: 1;
+    cursor: pointer !important;
+    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,69 @@
+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 {
+  value!: number[];
+  @Input('translations') translations!: string[];
+  @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: 7, 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();
+  });
+});