ngx-wapp-components 1.8.2 → 1.8.4

package/src/lib/search/w-autocomplete-search/w-autocomplete-search.component.html

@@ -0,0 +1,92 @@
+<div *ngIf="formControl != null; else noNgControl">
+    <div *ngIf="getSizeName(sizeType.medium) == size; else inputSmall">
+        <span class="p-input-icon-left w-container-medium w-full">
+            <i class="pi pi-search"></i>
+            <p-autoComplete
+                    [style]="{'width':'100%'}"
+                    [inputStyle]="{'width':'100%'}"
+                    class="w-autocomplete-search-medium"
+                    [suggestions]="suggestions"
+                    (completeMethod)="search($event)"
+                    [formControl]="formControl"
+                    [placeholder]="placeholder"
+                    field="name">
+                    <ng-template let-item pTemplate="item">
+                        <div class="flex align-items-center gap-2">
+                            <i class="pi pi-search"></i>
+                            <div class="item-content">{{item.name}}</div>
+                        </div>
+                    </ng-template>
+            </p-autoComplete>
+        </span>
+    </div>
+    <ng-template #inputSmall>
+        <span class="p-input-icon-left w-container-small w-full">
+            <i class="pi pi-search"></i>
+            <p-autoComplete
+                    [style]="{'width':'100%'}"
+                    [inputStyle]="{'width':'100%'}"
+                    class="w-autocomplete-search-small"
+                    [suggestions]="suggestions"
+                    (completeMethod)="search($event)"
+                    [formControl]="formControl"
+                    [placeholder]="placeholder"
+                    field="name">
+                    <ng-template let-item pTemplate="item">
+                        <div class="flex align-items-center gap-2">
+                            <i class="pi pi-search"></i>
+                            <div class="item-content-small">{{item.name}}</div>
+                        </div>
+                    </ng-template>
+            </p-autoComplete>
+        </span>
+    </ng-template>
+</div>
+<ng-template #noNgControl>
+    <div *ngIf="getSizeName(sizeType.medium) == size; else inputSmall">
+        <span class="p-input-icon-left w-container w-full">
+            <i class="pi pi-search"></i>
+            <p-autoComplete
+                    [style]="{'width':'100%'}"
+                    [inputStyle]="{'width':'100%'}"
+                    class="w-autocomplete-search-medium"
+                    [suggestions]="suggestions"
+                    (completeMethod)="search($event)"
+                    [placeholder]="placeholder"
+                    [(ngModel)]="value" 
+                    (ngModelChange)="onValueChanged()" 
+                    [disabled]="isDisabled"
+                    field="name">
+                    <ng-template let-item pTemplate="item">
+                        <div class="flex align-items-center gap-2">
+                            <i class="pi pi-search"></i>
+                            <div class="item-content">{{item.name}}</div>
+                        </div>
+                    </ng-template>
+            </p-autoComplete>
+        </span>
+    </div>
+    <ng-template #inputSmall>
+        <span class="p-input-icon-left w-container-small w-full">
+            <i class="pi pi-search"></i>
+            <p-autoComplete
+                    [style]="{'width':'100%'}"
+                    [inputStyle]="{'width':'100%'}"
+                    class="w-autocomplete-search-small"
+                    [suggestions]="suggestions"
+                    [(ngModel)]="value" 
+                    (input)="onValueChanged()" 
+                    [disabled]="isDisabled"
+                    (completeMethod)="search($event)"
+                    [placeholder]="placeholder"
+                    field="name">
+                    <ng-template let-item pTemplate="item">
+                        <div class="flex align-items-center gap-2">
+                            <i class="pi pi-search"></i>
+                            <div class="item-content-small">{{item.name}}</div>
+                        </div>
+                    </ng-template>
+            </p-autoComplete>
+        </span>
+    </ng-template>
+</ng-template>

package/src/lib/search/w-autocomplete-search/w-autocomplete-search.component.scss

@@ -0,0 +1,144 @@
+@import "../../../styles/_variables.scss";
+
+/* SMALL */
+
+:host ::ng-deep .w-autocomplete-search-small .p-autocomplete .p-autocomplete-input {
+    @extend .w-input-small-placeholder-text;
+    height: $spacingXXXL;
+    padding-left: $spacingXXXL;
+    border: $borderWidth solid $black200;
+    border-radius: $borderRadius;
+}
+
+:host ::ng-deep .w-autocomplete-search-small .p-autocomplete .p-autocomplete-input:hover {
+    @extend .hover;
+}
+
+:host ::ng-deep .w-autocomplete-search-small .p-autocomplete .p-autocomplete-input:focus {
+    border-radius: $borderRadius;
+    border: $borderWidth $primary50;
+    box-shadow: $spacingZero $spacingZero $spacingXXS $spacingXXS #00a6e940 !important;
+    padding-left: 34px !important;
+}
+
+:host ::ng-deep .w-autocomplete-search-small .p-autocomplete .p-autocomplete-input:focus::-moz-placeholder {
+    color: transparent;
+}
+
+:host ::ng-deep .w-autocomplete-search-small .p-autocomplete .p-autocomplete-input::-moz-placeholder {
+    color: $text700;
+}
+
+.w-container-small>i:last-of-type {   
+    color: $black400;
+    left: $spacingS !important;
+    z-index: 1;
+}
+
+:host ::ng-deep .w-autocomplete-search-small .p-autocomplete-panel {
+    @extend .w-input-small-placeholder-text;
+    margin-top: $spacingXXS;
+    padding-left: $spacingXS;
+    padding-top: $spacingXS;
+    padding-right: $spacingXS;
+    padding-bottom: $spacingS;
+    border-radius: $spacingXS;
+}
+
+:host ::ng-deep .w-autocomplete-search-small .p-autocomplete-panel i:last-of-type {
+    left: $spacingXS;
+}
+
+:host ::ng-deep .w-autocomplete-search-small .p-autocomplete-panel ul{
+    padding: $spacingZero !important;
+}
+
+:host ::ng-deep .w-autocomplete-search-small .p-autocomplete-panel .p-autocomplete-item{
+    border-radius: $spacingXS;
+    height: 28px;
+    padding-bottom: $spacingXS;
+    padding-top: $spacingXS;
+    padding-left: $spacingM;
+}
+
+:host ::ng-deep .w-autocomplete-search-small .p-autocomplete-panel .p-autocomplete-item:hover{
+    background-color: $primary50;
+}
+
+:host ::ng-deep .w-autocomplete-search-small .p-autocomplete-panel .p-autocomplete-item .item-content{
+    padding-left: $spacingXS;
+}
+
+/* MEDIUM */
+
+:host ::ng-deep .w-autocomplete-search-medium .p-autocomplete .p-autocomplete-input {
+    @extend .w-input-medium-placeholder-text;
+    height: 40px;
+    padding-left: 38px;
+    border: $borderWidth solid $black200;
+    border-radius: $borderRadius;
+}
+
+:host ::ng-deep .w-autocomplete-search-medium .p-autocomplete .p-autocomplete-input:hover {
+    @extend .hover;
+}
+
+:host ::ng-deep .w-autocomplete-search-medium .p-autocomplete .p-autocomplete-input:focus {
+    border-radius: $borderRadius;
+    border: $borderWidth $primary50;
+    box-shadow: $spacingZero $spacingZero $spacingXXS $spacingXXS #00a6e940 !important;
+    padding-left: $spacing5XL !important;
+}
+
+:host ::ng-deep .w-autocomplete-search-medium .p-autocomplete .p-autocomplete-input:focus::-moz-placeholder {
+    color: transparent;
+}
+
+:host ::ng-deep .w-autocomplete-search-medium .p-autocomplete .p-autocomplete-input::-moz-placeholder {
+    @extend .w-input-medium-placeholder-text;
+    color: $black400;
+}
+
+.w-container-medium>i:last-of-type {   
+    color: $black400;
+    left: $spacingM !important;
+    z-index: 1;
+}
+
+:host ::ng-deep .w-autocomplete-search-medium .p-autocomplete-panel {
+    @extend .w-input-medium-placeholder-text;
+    margin-top: $spacingXXS;
+    padding-left: $spacingXS;
+    padding-top: $spacingXS;
+    padding-right: $spacingXS;
+    padding-bottom: $spacingM;
+    border-radius: $spacingXS;
+}
+
+:host ::ng-deep .w-autocomplete-search-medium .p-autocomplete-panel i:last-of-type {
+    left: $spacingM;
+}
+
+:host ::ng-deep .w-autocomplete-search-medium .p-autocomplete-panel ul{
+    padding: $spacingZero !important;
+}
+
+:host ::ng-deep .w-autocomplete-search-medium .p-autocomplete-panel .p-autocomplete-item{
+    border-radius: $spacingXS;
+    height: 40px;
+    padding-bottom: $spacingXS;
+    padding-top: $spacingXS;
+    padding-left: $spacingM;
+}
+
+:host ::ng-deep .w-autocomplete-search-medium .p-autocomplete-panel .p-autocomplete-item:hover{
+    background-color: $primary50;
+}
+
+:host ::ng-deep .w-autocomplete-search-medium .p-autocomplete-panel .p-autocomplete-item .item-content{
+    padding-left: $spacingXS;
+}
+
+:host ::ng-deep .p-element .p-overlay { 
+    width: 100%;
+}

package/src/lib/search/w-autocomplete-search/w-autocomplete-search.component.spec.ts

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

package/src/lib/search/w-autocomplete-search/w-autocomplete-search.component.ts

@@ -0,0 +1,94 @@
+import { Component, Input, forwardRef } from '@angular/core';
+import { SizeType } from '../../shared/enums/enum';
+import { FormControl, NG_VALUE_ACCESSOR } from '@angular/forms';
+
+@Component({
+  selector: 'w-autocomplete-search',
+  templateUrl: './w-autocomplete-search.component.html',
+  styleUrls: ['./w-autocomplete-search.component.scss'],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => WAutocompleteSearchComponent),
+      multi: true
+    }
+  ]
+})
+export class WAutocompleteSearchComponent {
+  @Input('label') label: string = "Default Label";
+  @Input('placeholder') placeholder: string = "";
+
+  @Input('isRequired') isRequired: boolean = false;
+  @Input('isDisabled') isDisabled: boolean = false;
+
+  @Input('size') size: string = "medium";
+
+  @Input('items') items: any[] = [
+    {"name": "Afghanistan", "code": "AF"},
+    {"name": "México", "code": "MX"},
+    {"name": "Turquía", "code": "TQ"},
+    {"name": "Estados unidos", "code": "EU"},
+  ];
+  
+  @Input('formControl') formControl!: FormControl | null;
+  
+  selectedItem: any;
+  suggestions: any[] = [];
+  value: any ;
+
+  isTouched : boolean = false;
+  onChange = (_:any) => { }
+  onTouch = () => { }
+
+  writeValue(value: any): void {
+    this.value = value;
+  }
+
+  registerOnChange(onChange: any): void {
+    this.onChange = onChange;
+  }
+
+  registerOnTouched(onTouch: any): void {
+    this.onTouch = onTouch;
+  }
+
+  setDisabledState?(isDisabled: boolean): void {
+    this.isDisabled = isDisabled;
+  }
+
+  onValueChanged() {
+    this.onChange(this.value);
+    this.onTouch();
+  }
+
+  onInputBlur(event: Event) {
+    const newValue = (event.target as HTMLInputElement).value;
+    this.value = newValue;
+    this.onChange(this.value);
+    this.onTouch();
+  }
+  
+  search(event: any) {
+
+    let filtered: any[] = [];
+    let query = event.query;
+
+    for(let i=0; i < (this.items as any[]).length; i++)
+    {
+      let item = (this.items as any[])[i];
+      if(item.name.toLowerCase().indexOf(query.toLowerCase()) == 0)
+      {
+        filtered.push(item);
+      }
+    }
+    this.suggestions = filtered;
+  }
+
+  getSizeName(value: number): string {
+    return SizeType[value];
+  }
+  
+  get sizeType(): typeof SizeType {
+    return SizeType;
+  }
+}

package/src/lib/search/w-input-search/w-input-search.component.html

@@ -0,0 +1,140 @@
+<div *ngIf="formControl != null; else noNgControl"  class="w-input-search-field p-fluid field">
+    <div *ngIf="(label != undefined && label.length > 0)" class="flex" [ngClass]="{'w-input-search-height-label': removePaddingTop == false,
+                                                                                   'w-input-search-height-label-no-top': removePaddingTop == true}">
+        <label htmlFor="state" [ngClass]="{'w-input-search-small-label': getSizeName(sizeType.small) == size && !isDisabled, 
+                                           'w-input-search-small-label-disabled': getSizeName(sizeType.small) == size && isDisabled,
+                                           'w-input-search-medium-label': getSizeName(sizeType.medium) == size && !isDisabled,
+                                           'w-input-search-medium-label-disabled': getSizeName(sizeType.medium) == size && isDisabled, 
+                                           'no-top': removePaddingTop == true}">
+            {{label}}
+        </label>
+    </div>
+    <div *ngIf="(label != undefined && label == '')" class="w-input-no-label-height"></div>
+    <div *ngIf="getSizeName(sizeType.medium) == size; else inputSmall" class="w-input-search">
+        <div *ngIf="hasButton; else withoutButton">
+            <div class="w-input-search-medium p-inputgroup">
+                <button (click)="onInputData()" type="button" 
+                        pButton icon="pi {{inputIcon}}"
+                        [disabled]="disabledButton"></button>
+                <input type="text" pInputText [formControl]="formControl"
+                        (keydown.enter)='onInputData()'
+                        class="w-input-search-text"
+                        [placeholder]="placeholder"/>
+            </div>
+        </div>
+        <ng-template #withoutButton>
+            <div >
+                <span class="p-input-icon-left">
+                    <i *ngIf="inputIcon != ''" class="pi {{inputIcon}}"></i>
+                    <input pInputText
+                        (keydown.enter)='onInputData()'
+                        class="w-input-search-text-wo-button flex flex-1 col-12"
+                        [placeholder]="placeholder"
+                        [formControl]="formControl">
+                </span>
+            </div>
+        </ng-template>
+    </div>
+    <ng-template #inputSmall>
+        <div *ngIf="hasButton; else withoutButton">
+            <div class="w-input-search-small p-inputgroup">
+                <button (click)="onInputData()" type="button" 
+                        pButton icon="pi {{inputIcon}}"
+                        [disabled]="disabledButton"></button>
+                <input type="text" pInputText 
+                        (keydown.enter)='onInputData()'
+                        [formControl]="formControl"
+                        class="w-input-search-text"
+                        [placeholder]="placeholder"/>
+            </div>
+        </div>
+        <ng-template #withoutButton>
+            <div class="w-input-search-small p-fluid field">
+                <span class="p-input-icon-left">
+                    <i *ngIf="inputIcon != ''" class="pi {{inputIcon}}"></i>
+                    <input pInputText
+                        (keydown.enter)='onInputData()'
+                        class="flex flex-1 col-12 w-input-search-text-wo-button"
+                        [placeholder]="placeholder"
+                        [formControl]="formControl">
+                </span>
+            </div>
+        </ng-template>
+    </ng-template>
+</div>
+<ng-template #noNgControl>
+    <div class="w-input-search-field">
+        <div *ngIf="(label != undefined && label.length > 0)" [ngClass]="{'w-input-search-height-label': removePaddingTop == false,
+                                                                          'w-input-search-height-label-no-top': removePaddingTop == true}">
+            <label htmlFor="state" [ngClass]="{'w-input-search-small-label': getSizeName(sizeType.small) == size && !isDisabled, 
+                                               'w-input-search-small-label-disabled': getSizeName(sizeType.small) == size && isDisabled,
+                                               'w-input-search-medium-label': getSizeName(sizeType.medium) == size && !isDisabled,
+                                               'w-input-search-medium-label-disabled': getSizeName(sizeType.medium) == size && isDisabled, 
+                                               'no-top': removePaddingTop == true}">
+                {{label}}
+            </label>
+        </div>
+        <div *ngIf="(label != undefined && label == '')" class="w-input-no-label-height"></div>
+        <div *ngIf="getSizeName(sizeType.medium) == size; else inputSmall" >
+            <div *ngIf="hasButton; else withoutButton">
+                <div class="w-input-search-medium p-inputgroup">
+                    <button (click)="onInputData()" type="button" 
+                            pButton icon="pi {{inputIcon}}"
+                            [disabled]="disabledButton"></button>
+                    <input type="text" pInputText 
+                            (keydown.enter)='onInputData()'
+                            class="w-input-search-text"
+                            [(ngModel)]="value"
+                            (input)="onValueChanged()"
+                            [disabled]="isDisabled"
+                            [placeholder]="placeholder"/>
+                </div>
+            </div>
+            <ng-template #withoutButton>
+                <div class="w-input-search-medium p-fluid field">
+                    <span class="p-input-icon-left">
+                        <i *ngIf="inputIcon != ''" class="pi {{inputIcon}}"></i>
+                        <input pInputText
+                            (keydown.enter)='onInputData()'
+                            class="flex flex-1 col-12 w-input-search-text-wo-button"
+                            [placeholder]="placeholder"
+                            [(ngModel)]="value"
+                            (input)="onValueChanged()"
+                            [disabled]="isDisabled">
+                    </span>
+                </div>
+            </ng-template>
+        </div>
+        <ng-template #inputSmall>
+            <div *ngIf="hasButton; else withoutButton">
+                <div class="w-input-search-small p-inputgroup">
+                    <button (click)="onInputData()" type="button" 
+                            pButton icon="pi {{inputIcon}}"
+                            [disabled]="disabledButton"></button>
+                    <input type="text" pInputText 
+                            (keydown.enter)='onInputData()'
+                            [(ngModel)]="value"
+                            (input)="onValueChanged()"
+                            class="w-input-search-text"
+                            [disabled]="isDisabled"
+                            [placeholder]="placeholder"/>
+                </div>
+            </div>
+            <ng-template #withoutButton>
+                <div class="w-input-search-small p-fluid field">
+                    <span class="p-input-icon-left">
+                        <i *ngIf="inputIcon != ''" class="pi {{inputIcon}}"></i>
+                        <input pInputText
+                            (keydown.enter)='onInputData()'
+                            class="flex flex-1 col-12 w-input-search-text-wo-button"
+                            [placeholder]="placeholder"
+                            [(ngModel)]="value"
+                            (input)="onValueChanged()"
+                            [disabled]="isDisabled">
+                    </span>
+                </div>
+            </ng-template>
+        </ng-template>
+
+    </div>
+</ng-template>

package/src/lib/search/w-input-search/w-input-search.component.scss

@@ -0,0 +1,198 @@
+@import "../../../styles/_variables.scss";
+
+.w-input-search-field {
+    margin: 0px;
+}
+
+.w-input-search-height-label {
+    height: 36px;
+}
+
+.w-input-search-height-label-no-top {
+    height: 24px;
+}
+
+/* SMALL */
+
+.w-input-search-small-label{
+    @extend .w-input-small-label-text;
+    @extend .w-input-small-label-text-content;
+
+    &.no-top{
+        @extend .w-input-small-label-text-content-no-top;
+    }
+}
+
+.w-input-search-small-label-disabled{
+    @extend .w-input-small-label-disabled;
+    @extend .w-input-small-label-text-content;
+
+    &.no-top{
+        @extend .w-input-small-label-text-content-no-top;
+    }
+}
+
+.w-input-search-small {
+    height: $spacingXXXL !important;
+    // with button
+    .w-input-search-text {
+        @extend .w-input-small-placeholder-text;
+        border-radius: 0px $borderRadius $borderRadius 0px;
+        border-width: $borderWidth;
+        padding: calc($spacingXS - $borderWidth) calc($spacingS - $borderWidth);
+        border: $borderWidth solid $black200;
+    }
+
+    .w-input-search-text:enabled:hover {
+        @extend .hover;
+        border-radius: 0px $borderRadius $borderRadius 0px;
+
+    }
+
+    .w-input-search-text:focus {
+        border-radius: 0px $borderRadius $borderRadius 0px;;
+        border: $borderWidth $primary50;
+        box-shadow: $spacingZero $spacingZero $spacingXXS $spacingXXS #00a6e940 !important;
+        padding-left: $spacingS;
+    }
+    
+    // without button
+    .w-input-search-text-wo-button {
+        @extend .w-button-small-label-text-typography;
+        border-radius: $borderRadius;
+        border-width: $borderWidth;
+        border: $borderWidth solid $black200;
+        height: $spacingXXXL !important;
+    }
+
+    .w-input-search-text-wo-button:hover {
+        @extend .hover;
+    }
+
+    .w-input-search-text-wo-button:focus {
+        border-radius: $borderRadius;
+        border: $borderWidth $primary50;
+        box-shadow: $spacingZero $spacingZero $spacingXXS $spacingXXS #00a6e940 !important;
+    }
+
+    //placeholder
+    .w-input-search-text::-webkit-input-placeholder {
+        color: $text700;
+    }
+
+    .w-input-search-text::-moz-placeholder {
+        color: $text700;
+    }
+
+    .w-input-search-text:-ms-input-placeholder {
+        color: $text700;
+    }
+    
+    .w-input-search-text:-moz-placeholder {
+        color: $text700;
+    }
+
+    :disabled{
+        background-color: $black100;
+        border-color: $black200;
+        color: $black400;
+        opacity: 1;
+    }
+}
+
+.w-input-search-small
+
+/* MEDIUM */
+
+.w-input-search-medium-label{
+    @extend .w-input-medium-label-text;
+    @extend .w-input-small-label-text-content;
+}
+
+.w-input-search-medium-label-disabled{
+    @extend .w-input-small-label-disabled;
+    @extend .w-input-small-label-text-content;
+}
+
+.w-input-search-medium {
+    height: 40px;
+    // with button
+    .w-input-search-text {
+        @extend .w-input-medium-placeholder-text;
+        border-radius: 0px $borderRadius $borderRadius 0px;
+        border-width: $borderWidth;
+        padding-left: $spacingM !important;
+        border: $borderWidth solid $black200;
+    }
+
+    .w-input-search-text:enabled:hover {
+        @extend .hover;
+        border-radius: 0px $borderRadius $borderRadius 0px;
+    }
+
+    .w-input-search-text:focus {
+        @extend .focus; 
+        border-radius: 0px $borderRadius $borderRadius 0px;
+        border: $borderWidth $primary50;
+        padding-left: $spacingM;
+    }
+
+    ///without button
+    .w-input-search-text-wo-button {
+        @extend .w-button-medium-label-text-typography;;
+        border-radius: $borderRadius ;
+        border-width: $borderWidth;
+        height: 40px;
+        border: $borderWidth solid $black200;
+    }
+
+    .w-input-search-text-wo-button:hover {
+        @extend .hover;
+    }
+
+    .w-input-search-text-wo-button:focus {
+        border-radius: $borderRadius;
+        border: $borderWidth $primary50;
+        box-shadow: $spacingZero $spacingZero $spacingXXS $spacingXXS #00a6e940 !important;
+    }
+
+    //placeholder
+    .w-input-search-text::-webkit-input-placeholder {
+        color: $text700;
+    }
+
+    .w-input-search-text::-moz-placeholder {
+        color: $text700;
+    }
+
+    .w-input-search-text:-ms-input-placeholder {
+        color: $text700;
+    }
+    
+    .w-input-search-text:-moz-placeholder {
+        color: $text700;
+    }
+
+    .w-input-search-text:focus::-webkit-input-placeholder {
+        color: transparent;
+    }
+
+    .w-input-search-text:focus::-moz-placeholder {
+        color: transparent;
+    }
+
+    .w-input-search-text:focus:-ms-input-placeholder {
+        color: transparent;
+    }
+    
+    .w-input-search-text:focus:-moz-placeholder {
+        color: transparent;
+    }
+
+    :disabled{
+        background-color: $black100;
+        border-color: $black200;
+        color: $black400;
+        opacity: 1;
+    }
+}