ngx-wapp-components 1.0.50 → 1.0.51

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,51 +1,42 @@
-{
-  "name": "ngx-wapp-components",
-  "version": "1.0.50",
-  "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",
-    "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.0.51",
+  "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",
+    "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": {
+    "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,218 @@
+@import '../../../styles/_variables.scss';
+
+:host ::ng-deep .w-button-small.p-button {
+    height: 32px;
+    padding: calc($spacingXS - $borderWidth) calc($spacingM - $borderWidth);
+    border-radius: $borderRadius;
+    border-width: $borderWidth;
+
+    :hover{
+        border-width: $borderWidth;
+    }
+
+    .p-button-icon{
+        margin-left: $spacingXS;
+        @extend .icon-medium-size;
+    }
+
+    .p-button-label{
+        @extend .button-small-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: $borderWidth solid $primary50;
+    background-color: $primary700;
+    @extend .focus;
+}
+
+:host ::ng-deep .w-button-small.p-button.p-button-outlined:enabled:hover {
+    border-radius: $borderRadius;
+    border-width: $borderWidth;
+}
+
+:host ::ng-deep .w-button-medium.p-button {
+    height: 40px;
+    padding: $spacingS $spacingL;
+    border-radius: $borderRadius;
+    border-width: $borderWidth;
+
+    .p-button-icon{
+        margin-left: $spacingS;
+        @extend .icon-medium-size;
+    }
+
+    .p-button-label{
+        @extend .button-medium-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 .focus;
+    outline: $borderWidth solid $primary50;
+    background-color: $primary700;
+}
+
+:host ::ng-deep .w-button-medium.p-button.p-button-outlined:enabled:hover {
+    border-radius: $borderRadius;
+    border-width: $borderWidth;
+}
+
+:host ::ng-deep .w-button-large.p-button {
+    height: 56px;
+    padding: $spacingM $spacingXXL;
+    border-radius: $borderRadius;
+    border-width: $borderWidth;
+
+    :hover{
+        border-width: $borderWidth;
+    }
+
+    .p-button-icon{
+        margin-left: $spacingM;
+        @extend .icon-large-size;
+    }
+
+    .p-button-label{
+        @extend .button-large-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: $borderWidth solid $primary50;
+    background-color: $primary700;
+    @extend .focus;
+}
+
+: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: $borderRadius;
+    border-width: $borderWidth;
+    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;
+    color: $black700;
+    border: $borderWidth 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: $borderWidth solid $black300;
+    color: $black700;
+}
+
+:host ::ng-deep .w-button-medium-tertiary.p-button{
+    @extend .w-button-medium;
+    color: $black700;
+    border: $borderWidth 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: $borderWidth solid $black300;
+    color: $black700;
+}
+
+:host ::ng-deep .w-button-large-tertiary.p-button{
+    @extend .w-button-large;
+    color: $black700;
+    border: $borderWidth 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: $borderWidth 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
+{ 
+    .p-button-icon{
+        padding-left: $spacingZero;
+        margin-left: $spacingZero;
+    }
+}
+
+:host ::ng-deep .w-button-text-small.p-button{
+    @extend .w-button-small;
+    color: $black846;
+    border: none;
+}
+
+: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 = "medium";
+  @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-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: 40px;
+}
+
+: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-select-button/w-select-button.component.html

@@ -0,0 +1,29 @@
+<ng-container *ngIf="formControl; else noNgControl">
+    <p-selectButton [ngClass]="{'w-button-small' : size == getSizeName(sizeType.small), 
+                                'w-button-medium' : size == getSizeName(sizeType.medium),
+                                'w-button-large' : size == getSizeName(sizeType.large)}"
+                    [options]="stateOptions" 
+                    [formControl]="formControl" 
+                    [disabled]="disabled" 
+                    optionLabel="label" 
+                    optionValue="value" 
+                    [pTooltip]="tooltip" 
+                    [tooltipPosition]="tooltipPosition" 
+                    (onChange)="onButtonChangedForm($event)">
+    </p-selectButton>
+</ng-container>
+<ng-template #noNgControl>
+    <p-selectButton [ngClass]="{'w-button-small' : size == getSizeName(sizeType.small), 
+                                'w-button-medium' : size == getSizeName(sizeType.medium),
+                                'w-button-large' : size == getSizeName(sizeType.large)}"
+                    [options]="stateOptions" 
+                    [(ngModel)]="ngModelValue" 
+                    [disabled]="disabled" 
+                    optionLabel="label" 
+                    optionValue="value" 
+                    [pTooltip]="tooltip" 
+                    [tooltipPosition]="tooltipPosition"
+                    (ngModelChange)="onButtonChanged()">
+    </p-selectButton>
+</ng-template>
+

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

@@ -0,0 +1,65 @@
+@import '../../../styles/_variables.scss';
+
+:host ::ng-deep .w-button-small .p-button {
+	height: 32px;
+	border-radius: $borderRadius;
+    .p-button-label{
+        @extend .button-small-typography;
+    }
+}
+:host ::ng-deep .w-button-medium .p-button {
+	height: 40px;
+	border-radius: $borderRadius;
+    .p-button-label{
+        @extend .button-medium-typography;
+    }
+}
+:host ::ng-deep .w-button-large .p-button {
+	height: 56px;
+	border-radius: $borderRadius;
+    .p-button-label{
+        @extend .button-large-typography;
+    }
+}
+
+::ng-deep .p-selectbutton .p-button {
+	border: 2px solid #e8eaed;
+    color: $black700;
+	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-medium .p-button-label {
+	font-weight: 700;
+    font-size: 12px;
+    line-height: 16px;
+}
+
+:host ::ng-deep .w-button-small .p-button:focus,
+:host ::ng-deep .w-button-medium .p-button:focus,
+:host ::ng-deep .w-button-large .p-button:focus {
+	box-shadow: $spacingZero $spacingZero 3px 3px #00A6E940 !important;
+}
+
+::ng-deep .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover, 
+::ng-deep .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover,
+::ng-deep .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover {
+	background: transparent;
+	border-color: $secondary400;
+	color: $secondary400;
+}
+
+::ng-deep .p-selectbutton .p-button.p-highlight:hover {
+	background: $secondary400;
+	border-color: $secondary400;
+	color: $textWhite;
+}

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

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