Skip to content

Commit dd2ba94

Browse files
kripton69kripton69
committed
Bump uno-ui-lib version to 0.0.255, refactor datepicker and search components for improved structure and functionality
1 parent 1c69e01 commit dd2ba94

File tree

5 files changed

+41
-41
lines changed

5 files changed

+41
-41
lines changed

‎projects/uno-ui-lib/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "uno-ui-lib",
3-
"version": "0.0.253",
3+
"version": "0.0.255",
44
"keywords": [
55
"Angular",
66
"UI Components",

‎projects/uno-ui-lib/src/lib/datepicker2/datepicker2.component.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import { Component, ChangeDetectionStrategy, Input, Output, EventEmitter, OnChanges, HostListener, SimpleChanges, ViewEncapsulation } from '@angular/core';
2-
import { MatDatepickerInputEvent, MatDatepickerInput, MatDatepicker, MatDateRangeInput, MatStartDate, MatEndDate, MatDateRangePicker, MatDatepickerModule } from '@angular/material/datepicker';
2+
import { MatDatepickerInputEvent, MatDatepickerInput, MatDatepicker, MatDatepickerModule } from '@angular/material/datepicker';
33
import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE, MatDateFormats } from '@angular/material/core';
44
import { Validators, UntypedFormControl, UntypedFormBuilder, UntypedFormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
55
import { MomentDateAdapter } from '@angular/material-moment-adapter';
6-
import { TranslateDirective, TranslatePipe } from '@ngx-translate/core';
6+
import { TranslateDirective } from '@ngx-translate/core';
77
import { MatInputModule } from '@angular/material/input';
8-
import { MatFormField, MatError } from '@angular/material/form-field';
8+
import { MatFormField, MatError, MatFormFieldModule } from '@angular/material/form-field';
99

1010
import { IconComponent } from '../icon/icon.component';
1111

@@ -48,7 +48,7 @@ export const MY_FORMATS: MatDateFormats = {
4848
changeDetection: ChangeDetectionStrategy.OnPush,
4949
encapsulation: ViewEncapsulation.None,
5050
standalone: true,
51-
imports: [MatDatepickerModule, MatFormField, MatInputModule, FormsModule, MatDatepickerInput, ReactiveFormsModule, MatDatepicker, IconComponent, MatDateRangeInput, MatStartDate, MatEndDate, MatDateRangePicker, MatError, TranslateDirective, TranslatePipe]
51+
imports: [MatDatepickerModule, MatFormFieldModule, MatFormField, MatInputModule, FormsModule, MatDatepickerInput, ReactiveFormsModule, MatDatepicker, IconComponent, MatError, TranslateDirective]
5252
})
5353
export class Datepicker2Component implements OnChanges {
5454

‎projects/uno-ui-lib/src/lib/search/search.component.html‎

Lines changed: 14 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,24 @@
11
@if (type !== 'secondary') {
2-
<div class="uno-search" #unoSearch>
2+
<div class="uno-search" #unoSearch>
33
<input class="search-input" #searchText [placeholder]="placeholder | translate" (keydown)="keyDownFunction($event, searchText.value)" />
4-
<button (click)="onButtonClick(searchText.value)" class="slds-button slds-button--icon-small" style="float: right">
5-
@if (!inSearchMode) {
4+
<button (click)="onButtonClick(searchText.value); $event.stopPropagation()" class="slds-button slds-button--icon-small" style="float: right">
5+
@if (!inSearchMode) {
66
<uno-icon id="search" icon="search" class="slds-align--absolute-center"></uno-icon>
7-
}
8-
@if (inSearchMode) {
7+
} @else {
98
<uno-icon id="close" icon="close" class="slds-align--absolute-center"></uno-icon>
10-
}
9+
}
1110
</button>
12-
</div>
13-
}
14-
15-
@if (type === 'secondary') {
16-
<div class="slds-input-has-icon slds-input-has-icon_right" style="top: 38% !important">
11+
</div>
12+
} @else {
13+
<div class="slds-input-has-icon slds-input-has-icon_right" style="top: 38% !important">
1714
<input class="slds-input" #searchText [placeholder]="placeholder | translate" (keydown)="keyDownFunction($event, searchText.value)" />
18-
<button (click)="onButtonClick(searchText.value)" class="slds-button slds-button_icon slds-input__icon_right"
19-
style="position: absolute; top: 5px; right: 5px;">
20-
@if (!inSearchMode) {
15+
<button (click)="onButtonClick(searchText.value); $event.stopPropagation()" class="slds-button slds-button_icon slds-input__icon_right"
16+
style="position: absolute; top: 5px; right: 5px;">
17+
@if (!inSearchMode) {
2118
<uno-icon id="search" icon="search" size="small"></uno-icon>
22-
}
23-
@if (inSearchMode) {
19+
} @else {
2420
<uno-icon id="close" icon="close" size="small"></uno-icon>
25-
}
21+
}
2622
</button>
27-
</div>
23+
</div>
2824
}

‎projects/uno-ui-lib/src/lib/search/search.component.ts‎

Lines changed: 21 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy, ViewChild, ElementRef, Renderer2, AfterViewInit, ChangeDetectorRef } from '@angular/core';
1+
import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy, ElementRef, Renderer2, AfterViewInit, ChangeDetectorRef, viewChild, inject } from '@angular/core';
22
import { TranslatePipe } from '@ngx-translate/core';
33
import { IconComponent } from '../icon/icon.component';
44

@@ -23,17 +23,21 @@ export class SearchComponent implements AfterViewInit {
2323
public inSearchMode: boolean;
2424

2525
// Get access to the input to manipulate it.
26-
@ViewChild('searchText') inputSearch: ElementRef;
26+
public inputSearch = viewChild<ElementRef>('searchText');
2727

28-
@ViewChild('unoSearch') private readonly unoSearch: ElementRef;
28+
private readonly unoSearch = viewChild<ElementRef>('unoSearch');
2929

30-
constructor(private readonly renderer: Renderer2, private readonly cdr: ChangeDetectorRef) { }
30+
private readonly renderer = inject(Renderer2);
31+
32+
private readonly cdr = inject(ChangeDetectorRef);
33+
34+
constructor() { }
3135

3236
public ngAfterViewInit() {
3337
if (this.currentSearch && this.currentSearch.length > 0) {
3438
this.inSearchMode = true;
35-
this.renderer.setProperty(this.inputSearch.nativeElement, 'value', this.currentSearch);
36-
this.renderer.setStyle(this.unoSearch.nativeElement, 'border-bottom', '2px solid var(--light-primary)');
39+
this.renderer.setProperty(this.inputSearch().nativeElement, 'value', this.currentSearch);
40+
this.renderer.setStyle(this.unoSearch().nativeElement, 'border-bottom', '2px solid var(--light-primary)');
3741
this.cdr.detectChanges();
3842
}
3943
}
@@ -43,25 +47,25 @@ export class SearchComponent implements AfterViewInit {
4347
this.inSearchMode = !this.inSearchMode;
4448

4549
if (!this.inSearchMode) {
46-
this.renderer.setProperty(this.inputSearch.nativeElement, 'value', '');
50+
this.renderer.setProperty(this.inputSearch().nativeElement, 'value', '');
4751

48-
if (this.unoSearch) {
49-
this.renderer.setStyle(this.unoSearch.nativeElement, 'border-bottom', '2px solid var(--light-gray-12)');
52+
if (this.unoSearch()) {
53+
this.renderer.setStyle(this.unoSearch().nativeElement, 'border-bottom', '2px solid var(--light-gray-12)');
5054
}
5155

5256
this.searchTerm.emit('');
5357
} else {
54-
if (this.unoSearch) {
55-
this.renderer.setStyle(this.unoSearch.nativeElement, 'border-bottom', '2px solid var(--light-primary)');
58+
if (this.unoSearch()) {
59+
this.renderer.setStyle(this.unoSearch().nativeElement, 'border-bottom', '2px solid var(--light-primary)');
5660
}
5761

5862
this.searchTerm.emit(text);
5963
}
6064
} else {
6165
this.inSearchMode = false;
6266

63-
if (this.unoSearch) {
64-
this.renderer.setStyle(this.unoSearch.nativeElement, 'border-bottom', '2px solid var(--light-gray-12)');
67+
if (this.unoSearch()) {
68+
this.renderer.setStyle(this.unoSearch().nativeElement, 'border-bottom', '2px solid var(--light-gray-12)');
6569
}
6670

6771
this.searchTerm.emit('');
@@ -76,14 +80,14 @@ export class SearchComponent implements AfterViewInit {
7680
if (text.length > 0) {
7781
this.inSearchMode = true;
7882

79-
if (this.unoSearch) {
80-
this.renderer.setStyle(this.unoSearch.nativeElement, 'border-bottom', '2px solid var(--light-primary)');
83+
if (this.unoSearch()) {
84+
this.renderer.setStyle(this.unoSearch().nativeElement, 'border-bottom', '2px solid var(--light-primary)');
8185
}
8286
} else {
8387
this.inSearchMode = false;
8488

85-
if (this.unoSearch) {
86-
this.renderer.setStyle(this.unoSearch.nativeElement, 'border-bottom', '2px solid var(--light-gray-12)');
89+
if (this.unoSearch()) {
90+
this.renderer.setStyle(this.unoSearch().nativeElement, 'border-bottom', '2px solid var(--light-gray-12)');
8791
}
8892
}
8993
}

‎projects/uno-ui-lib/src/lib/table/table.component.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -398,7 +398,7 @@ export class TableComponent implements OnChanges, OnDestroy {
398398
}
399399

400400
setSearchTerm(term: string) {
401-
this.render.setProperty(this.header.search.inputSearch.nativeElement, 'value', term);
401+
this.render.setProperty(this.header.search.inputSearch().nativeElement, 'value', term);
402402
}
403403

404404
private resetAllSelector() {

0 commit comments

Comments
 (0)