ngx-wapp-components 1.8.2 → 1.8.4

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

@@ -0,0 +1,151 @@
+import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, Renderer2, SimpleChanges, ViewChild } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+import { AddressMaps } from 'wapping-components';
+import { CustomerAddress } from '../../shared/models/customer-address.model';
+
+@Component({
+  selector: 'w-maps',
+  templateUrl: './w-maps.component.html',
+  styleUrls: ['./w-maps.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class WMapsComponent implements OnInit, AfterViewInit {
+  @ViewChild('mapSearchField') searchField!: ElementRef;
+  @ViewChild('divMap') divMap!: ElementRef;
+
+  @Input('isEdit') isEdit: boolean = false;
+  @Input('mapHeight') mapHeight: number = 30;
+  @Input('showMap') showMap: boolean = true;
+  @Input('showMapButton') showMapButton: boolean = true;
+  @Input('smallSearchInput') smallSearchInput: boolean = true;
+  @Input('showMapLabel') showMapLabel: string = "Show map";
+  @Input('hideMapLabel') hideMapLabel: string = "Hide map";
+  @Input('componentRestrictions') componentRestrictions: any;
+  @Input('initialCoords') initialCoords: any;
+  @Input('streetAddress') streetAddress!: string | CustomerAddress;
+  @Input('address') address!: CustomerAddress;
+  @Input('label') label!: string;
+
+  @Output('addressVerbose') addressVerbose = new EventEmitter<AddressMaps>();
+
+  map!: google.maps.Map
+  variableMap!: google.maps.Map;
+  marker!: google.maps.Marker;
+  service!: google.maps.places.PlacesService;
+  formMapas!: FormGroup;
+  addressFinal: AddressMaps = {} as AddressMaps;
+
+  constructor(private render: Renderer2) { }
+
+  ngOnInit(): void {  }
+
+  async ngAfterViewInit() {
+    if(typeof this.streetAddress !== "string"){
+      this.streetAddress = (this.streetAddress?.route||'') +" "+(this.streetAddress?.streetNumber||'') +" "+(this.streetAddress?.areaLevel2||'') +" "+(this.streetAddress?.postalCode||'') +" "+(this.streetAddress?.locality||'') +" "+(this.streetAddress?.country||'')
+    }
+    if(this.isEdit)
+      this.loadAutoComplete();
+
+    if(this.showMap || this.showMapButton){
+      if (this.initialCoords != undefined) {
+        let position = {
+          coords: {
+            latitude: this.initialCoords.latitude,
+            longitude: this.initialCoords.longitude,
+          }
+        }
+        await this.loadMap(position)
+      } else {
+        let position = new google.maps.LatLng(19.0528136, -98.2071769)
+        
+        const opciones = {
+          center: position,
+          zoom: 11,
+          mapTypeId: google.maps.MapTypeId.ROADMAP
+        };
+
+        this.variableMap = await new google.maps.Map(document.getElementById("variableMap") as HTMLElement, opciones)
+
+        const request = {
+          query: this.streetAddress,
+          fields: ["name","geometry"]
+        };
+
+        this.service = new google.maps.places.PlacesService(this.variableMap);
+        this.service.findPlaceFromQuery(
+          request, 
+          async (
+            results: google.maps.places.PlaceResult[] | null,
+            status: google.maps.places.PlacesServiceStatus
+          ) => {
+            if(status === google.maps.places.PlacesServiceStatus.OK && results) {
+              let pos = {
+                coords: {
+                  latitude: results[0].geometry?.location?.lat(),
+                  longitude: results[0].geometry?.location?.lng(),
+                }
+              }
+              await this.loadMap(pos)
+            }
+          }
+        )
+      }
+    }
+  }
+
+  async loadMap(position: any) {
+    const opciones = {
+      center: new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
+      zoom: 11,
+      mapTypeId: google.maps.MapTypeId.ROADMAP
+    };
+
+    this.map = await new google.maps.Map(this.render.selectRootElement(this.divMap.nativeElement), opciones)
+
+    const marker = new google.maps.Marker;
+    marker.setMap(null);
+
+    this.marker = new google.maps.Marker({
+      position: this.map.getCenter(),
+    });
+    this.marker.setMap(this.map);
+  }
+
+  returnAddress(place: any) {
+    let address_component: [] = place.address_components;
+    address_component.forEach((field) => {
+      this.addressFinal[field['types'][0]] = field['long_name']
+    })
+    this.addressFinal.latitude = place.geometry['location'].lat();
+    this.addressFinal.longitude = place.geometry['location'].lng();
+    this.addressFinal.streetAddress = place.formatted_address
+
+    this.addressVerbose.emit(this.addressFinal);
+  }
+
+  private loadAutoComplete() {
+    const autoComplete = new google.maps.places.Autocomplete(
+      this.render.selectRootElement(this.searchField.nativeElement),
+      {
+        componentRestrictions: this.componentRestrictions,
+        fields: ["address_components", "geometry", "formatted_address"],
+        types: ["address"],
+      }
+    )
+    google.maps.event.addListener(autoComplete, 'place_changed', () => {
+
+      const place: any = autoComplete.getPlace();
+
+      if(this.showMap || this.showMapButton){
+        this.map.setCenter(place.geometry.location);
+        this.marker.setMap(null);
+        this.marker = new google.maps.Marker({
+          position: place.geometry.location
+        });
+    
+        this.marker.setMap(this.map);
+      }
+      this.returnAddress(place);
+    })
+  }
+}

package/src/lib/misc/w-badge/w-badge.component.html

@@ -0,0 +1,3 @@
+<span [class]="'w-badge color-' + color" [ngClass]="{'w-badge-overflow-text': maxWidthOverflow}" [pTooltip]="tooltip" [style.max-width]="maxWidthOverflow">
+    {{label}}
+</span>

package/src/lib/misc/w-badge/w-badge.component.scss

@@ -0,0 +1,162 @@
+@import '../../../styles/_variables.scss';
+
+.w-badge {
+	@extend .w-badge-text; 
+	height: 16px;
+	border-radius: $borderRadius;
+	border: $borderWidth solid $black300;
+	padding: calc($spacingXXS - $borderWidth) $spacingS;
+	vertical-align: middle;
+}
+
+.w-badge-overflow-text{
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.w-badge.color-default {
+    background: $white;
+    color: $text700;
+	border: $borderWidth solid $black300;
+}
+
+.w-badge.color-success {
+    background: $statusSuccess3;
+    color: $statusSuccess1;
+	border: $borderWidth solid $statusSuccess2;
+}
+
+.w-badge.color-warn {
+    background: $statusWarning3;
+    color: $statusWarning1;
+	border: $borderWidth solid $statusWarning2;
+}
+
+.w-badge.color-info {
+    background: $statusInfo3;
+    color: $statusInfo1;
+	border: $borderWidth solid $statusInfo2;
+}
+
+.w-badge.color-error {
+    background: $statusError3;
+    color: $statusError1;
+	border: $borderWidth solid $statusError2;
+}
+
+.w-badge.color-disabled {
+    background: $white;
+    color: $text500;
+	border: $borderWidth solid $black300;
+}
+
+.w-badge.color-darkBlue1{
+	background: rgba($darkBlue1,0.1);
+	color: $darkBlue1;
+	border: $borderWidth solid $darkBlue1;
+}
+
+.w-badge.color-darkBlue2{
+	background: rgba($darkBlue2,0.1);
+	color: $darkBlue2;
+	border: $borderWidth solid $darkBlue2;
+}
+
+.w-badge.color-darkBlue3{
+	background: rgba($darkBlue3,0.4);
+	color: $darkBlue2;
+	border: $borderWidth solid $darkBlue3;
+}
+
+.w-badge.color-purple1{
+	background: rgba($purple1,0.1);
+	color: $purple1;
+	border: $borderWidth solid $purple1;
+}
+
+.w-badge.color-purple2{
+	background: rgba($purple2,0.1);
+	color: $purple2;
+	border: $borderWidth solid $purple2;
+}
+
+.w-badge.color-purple3{
+	background: rgba($purple3,0.4);
+	color: $purple2;
+	border: $borderWidth solid $purple3;
+}
+
+.w-badge.color-pink1{
+	background: rgba($pink1,0.1);
+	color: $pink1;
+	border: $borderWidth solid $pink1;
+}
+
+.w-badge.color-pink2{
+	background: rgba($pink2,0.1);
+	color: $pink2;
+	border: $borderWidth solid $pink2;
+}
+
+.w-badge.color-pink3{
+	background: rgba($pink3,0.4);
+	color: $pink2;
+	border: $borderWidth solid $pink3;
+}
+
+.w-badge.color-primary900{
+	background: rgba($primary900,0.1);
+	color: $primary900;
+	border: $borderWidth solid $primary900;
+}
+
+.w-badge.color-primary700{
+	background: rgba($primary700,0.1);
+	color: $primary700;
+	border: $borderWidth solid $primary700;
+}
+
+.w-badge.color-primary500{
+	background: rgba($primary500,0.1);
+	color: $primary500;
+	border: $borderWidth solid $primary500;
+}
+
+.w-badge.color-secondary900{
+	background: rgba($secondary900,0.1);
+	color: $secondary900;
+	border: $borderWidth solid $secondary900;
+}
+
+.w-badge.color-secondary700{
+	background: rgba($secondary700,0.1);
+	color: $secondary700;
+	border: $borderWidth solid $secondary700;
+}
+
+.w-badge.color-secondary500{
+	background: rgba($secondary500,0.1);
+	color: $secondary500;
+	border: $borderWidth solid $secondary500;
+}
+
+
+.w-badge.color-tertiary900{
+	background: rgba($tertiary900,0.1);
+	color: $tertiary900;
+	border: $borderWidth solid $tertiary900;
+}
+
+.w-badge.color-tertiary700{
+	background: rgba($tertiary700,0.1);
+	color: $tertiary700;
+	border: $borderWidth solid $tertiary700;
+}
+
+.w-badge.color-tertiary500{
+	background: rgba($tertiary500,0.1);
+	color: $tertiary700;
+	border: $borderWidth solid $tertiary500;
+}
+

package/src/lib/misc/w-badge/w-badge.component.spec.ts

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

package/src/lib/misc/w-badge/w-badge.component.ts

@@ -0,0 +1,13 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'w-badge',
+  templateUrl: './w-badge.component.html',
+  styleUrls: ['./w-badge.component.scss']
+})
+export class WBadgeComponent {
+  @Input('label') label: string = "";
+  @Input('color') color: string = "default";
+  @Input('tooltip') tooltip!: string;
+  @Input('maxWidthOverflow') maxWidthOverflow!: string;
+}

package/src/lib/misc/w-chip/w-chip.component.html

@@ -0,0 +1,27 @@
+<p-chip *ngIf="icon || image; else wappIconChip" 
+        class="w-chip"
+        [pTooltip]="tooltip" 
+        [tooltipPosition]="tooltipPosition" 
+        (click)="chipClick()">
+    <i *ngIf="icon; else imageChip" class="p-chip-icon" [class]="'pi ' + icon" [style]="'color: '+iconColor"></i>
+    <ng-template #imageChip> <img [src]="image"> </ng-template>
+    <span class="p-chip-text" [style]="'color:'+ labelColor"> {{label}} </span>
+</p-chip>
+
+<ng-template #wappIconChip>
+    <p-chip class="w-chip"
+            [pTooltip]="tooltip" 
+            [tooltipPosition]="tooltipPosition" 
+            (click)="chipClick()">
+        <w-icons *ngIf="wappIcon" 
+                 [name]="wappIcon" 
+                 [color]="iconColor" 
+                 [height]="iconHeight" 
+                 [width]="iconWidth" 
+                 class="wapp-chip-icon">
+        </w-icons>
+        <span class="p-chip-text" [style]="'color:'+ labelColor"> {{label}} </span>
+    </p-chip>
+</ng-template>
+
+

package/src/lib/misc/w-chip/w-chip.component.scss

@@ -0,0 +1,38 @@
+@import '../../../styles/_variables.scss';
+
+:host ::ng-deep .p-chip {
+    background-color: var(--bgcolor);
+    padding-left: $spacingXS !important;
+    padding-right: $spacingXS !important;
+    height: 28px !important;
+}
+
+.w-chip {
+    cursor: pointer;
+    height: 28px !important;
+}
+
+::ng-deep .w-chip .p-chip-text {
+    @extend .w-chip-text;
+    margin-top: $spacingXXS;
+    margin-bottom: $spacingXXS;
+}
+
+::ng-deep .w-chip .p-chip-icon {
+    margin-right: $spacingXS;
+    line-height: 16px;
+}
+
+.wapp-chip-icon {
+    margin-right: $spacingXS;
+    line-height: 16px;
+    align-content: center;
+    display: flex;
+}
+
+.w-chip img {
+    width: 18px;
+    height: 18px;
+    margin-left: -2px;
+    margin-right: $spacingXSM;
+}

package/src/lib/misc/w-chip/w-chip.component.spec.ts

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

package/src/lib/misc/w-chip/w-chip.component.ts

@@ -0,0 +1,35 @@
+import { Component, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+
+@Component({
+  selector: 'w-chip',
+  templateUrl: './w-chip.component.html',
+  styleUrls: ['./w-chip.component.scss']
+})
+export class WChipComponent implements OnInit {
+
+  @Input('image') image!: string;
+  @Input('icon') icon!: string;
+
+  @Input('iconColor') iconColor: string = "#1e293b";
+  @Input('iconHeight') iconHeight: number = 12;
+  @Input('iconWidth') iconWidth: number = 12;
+  @Input('backgroundColor') backgroundColor: string = "#e2e8f0";
+  @Input('labelColor') labelColor: string = "#1e293b";
+  
+  @Input('wappIcon') wappIcon!: string;
+  @Input('label') label!: string;
+  @Input('tooltip') tooltip!: string;
+  @Input('tooltipPosition') tooltipPosition: string = 'bottom';
+  
+  @Output('click') click: EventEmitter<boolean> = new EventEmitter<boolean>();
+
+  constructor(private elementRef: ElementRef) {}
+
+  ngOnInit(): void {
+    this.elementRef.nativeElement.style.setProperty("--bgcolor", this.backgroundColor)
+  }
+
+  chipClick() {
+    this.click.emit(true);
+  }
+}