@unifylib/ui-lib 1.0.3 → 1.1.3

package/src/lib/components/auto-complete/auto-complete.component.html

@@ -1,29 +1,45 @@
-<ng-container *ngIf="this.field" class="main-auto-complete">
-  <div class="matField" [formGroup]="form">
-    <mat-form-field fxFlex="100" appearance="outline" (click)="this.filterLookupItems('', autocompleteTrigger)">
-      <mat-label>{{ field.label! | translate}}</mat-label>
-      <input class="flex-auto" type="text"
-             [placeholder]="'search_placeholder' | translate"
-             [id]="getId()"
-             [formControl]="myControl"
-             (keydown)="onKeydown($event, autocompleteTrigger)"
-             [matAutocomplete]="auto" matInput
-             [required]="isRequired"
-             #autocompleteTrigger="matAutocompleteTrigger"
-             [readonly]="readonly"
-      >
-      <mat-icon class="arrow_drop_down_autocomplete">arrow_drop_down</mat-icon>
-
-      <mat-autocomplete #auto="matAutocomplete" autoActiveFirstOption="" [displayWith]="displayFn.bind(this)"
-                        (optionSelected)="itemSelected($event.option.value)"
-                        (closed)="closed()">
-        <ng-container *ngIf="!field.readonly">
-          <mat-option *ngIf="items.length > 1  && lookupItems$" [value]="null">{{ "none" | translate}}</mat-option>
-          <mat-option *ngFor="let item of  lookupItems$ | async" [value]="item"
-                      [ngClass]="_allowSelection(item)">
-            {{itemNameByLag(item)}}</mat-option>
-        </ng-container>
-      </mat-autocomplete>
-    </mat-form-field>
-  </div>
-</ng-container>
+<ng-container *ngIf="field" class="main-auto-complete">
+  <div class="mat-field-wrapper" [formGroup]="form">
+
+    <div class="label-and-asterisk-container">
+      <span class="custom-label" id="label-{{field.property}}">
+        {{ field.label! | translate }}
+      </span>
+      <span *ngIf="field.required" class="required-asterisk"> * </span>
+    </div>
+
+    <mat-form-field class="autocomplete-field" appearance="outline">
+      <input type="text"
+             [placeholder]="'search_placeholder' | translate"
+             [id]="getId()"
+             [formControl]="myControl"
+             (keydown)="onKeydown($event, autocompleteTrigger)"
+             [matAutocomplete]="auto"
+             matInput
+             [required]="isRequired"
+             #autocompleteTrigger="matAutocompleteTrigger"
+             [readonly]="readonly"
+      >
+
+      <button mat-button matSuffix
+              color="primary"
+              class="autocomplete-button"
+              (click)="autocompleteTrigger.openPanel(); filterLookupItems('', autocompleteTrigger); $event.stopPropagation()"
+              [attr.id]="'autocomplete-trigger-' + field.property">
+        <mat-icon>arrow_drop_down</mat-icon>
+      </button>
+
+      <mat-autocomplete #auto="matAutocomplete" autoActiveFirstOption [displayWith]="displayFn.bind(this)"
+                        (optionSelected)="itemSelected($event.option.value)"
+                        (closed)="closed()">
+        <ng-container *ngIf="!field.readonly">
+          <mat-option *ngIf="items.length > 1 && lookupItems$" [value]="null">{{ "none" | translate }}</mat-option>
+          <mat-option *ngFor="let item of lookupItems$ | async" [value]="item" [ngClass]="_allowSelection(item)">
+            {{ itemNameByLag(item) }}
+          </mat-option>
+        </ng-container>
+      </mat-autocomplete>
+    </mat-form-field>
+
+  </div>
+</ng-container>

package/src/lib/components/auto-complete/auto-complete.component.spec.ts

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