Skip to content

Commit 8e24a34

Browse files
PlamenaMitevaPlamenaMiteva
committed
refactor(time-picker): add readOnly property #6482 
1 parent ac685cb commit 8e24a34

File tree

3 files changed

+37
-67
lines changed

3 files changed

+37
-67
lines changed

Diff for: ‎projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-date-expression.component.html

+28-63
Original file line numberDiff line numberDiff line change
@@ -1,91 +1,56 @@
1-
<igx-select #dropdownConditions
2-
type="box"
3-
[displayDensity]="displayDensity"
4-
[placeholder]="conditionsPlaceholder"
5-
(onSelection)="onConditionsChanged($event)"
6-
[overlaySettings]="dropDownOverlaySettings">
1+
<igx-select #dropdownConditions type="box" [displayDensity]="displayDensity" [placeholder]="conditionsPlaceholder"
2+
(onSelection)="onConditionsChanged($event)" [overlaySettings]="dropDownOverlaySettings">
73
<igx-prefix>
84
<igx-icon *ngIf="expressionUI.expression.condition" family="imx-icons" [name]="getIconName()"></igx-icon>
95
<igx-icon *ngIf="!expressionUI.expression.condition">filter_list</igx-icon>
106
</igx-prefix>
11-
<igx-select-item *ngFor="let condition of conditions" [value]="condition" [selected]="isConditionSelected(condition)">
7+
<igx-select-item *ngFor="let condition of conditions" [value]="condition"
8+
[selected]="isConditionSelected(condition)">
129
<igx-icon family="imx-icons" [name]="getCondition(condition).iconName"></igx-icon>
1310
<span>{{translateCondition(condition)}}</span>
1411
</igx-select-item>
1512
</igx-select>
1613

17-
<igx-date-picker #datePicker *ngIf="column.dataType === 'date'"
18-
[(value)]="expressionUI.expression.searchVal"
19-
[locale]="grid.locale"
20-
[outlet]="grid.outlet"
21-
[displayDensity]="displayDensity"
22-
(click)="datePicker.open()"
23-
[readOnly]="true"
24-
[placeholder]="inputDatePlaceholder"
25-
[displayFormat]="column.pipeArgs.format"
14+
<igx-date-picker #datePicker *ngIf="column.dataType === 'date'" [(value)]="expressionUI.expression.searchVal"
15+
[locale]="grid.locale" [outlet]="grid.outlet" [displayDensity]="displayDensity" (click)="datePicker.open()"
16+
[readOnly]="true" [placeholder]="inputDatePlaceholder" [displayFormat]="column.pipeArgs.format"
2617
[formatter]="column.formatter"
27-
[disabled]="expressionUI.expression.condition && expressionUI.expression.condition.isUnary"
28-
type="box">
29-
<!-- disable default icons -->
30-
<igx-picker-toggle></igx-picker-toggle>
31-
<igx-picker-clear></igx-picker-clear>
18+
[disabled]="expressionUI.expression.condition && expressionUI.expression.condition.isUnary" type="box">
19+
<!-- disable default icons -->
20+
<igx-picker-toggle></igx-picker-toggle>
21+
<igx-picker-clear></igx-picker-clear>
3222
</igx-date-picker>
3323

34-
<igx-time-picker *ngIf="column.dataType === 'time'" [format]="column.defaultTimeFormat" #timePicker mode="dropdown" [(ngModel)]="expressionUI.expression.searchVal" [outlet]="grid.outlet">
35-
<ng-template igxTimePickerTemplate let-openDialog="openDialog" let-value="value">
36-
<igx-input-group #dropDownTarget type="box" [displayDensity]="displayDensity">
37-
<input #input igxInput tabindex="0" [placeholder]="inputTimePlaceholder"
38-
(click)="openDialog(dropDownTarget.element.nativeElement)"
39-
autocomplete="off"
40-
[igxFocus]="true"
41-
[value]="
42-
column.formatter
43-
? (value | columnFormatter:column.formatter)
44-
: (value | date:column.pipeArgs.format:undefined:grid.locale)
45-
"
46-
[readonly]="true"
47-
[disabled]="expressionUI.expression.condition && expressionUI.expression.condition.isUnary"/>
48-
</igx-input-group>
49-
</ng-template>
24+
<igx-time-picker #timePicker *ngIf="column.dataType === 'time'" [inputFormat]="column.defaultTimeFormat"
25+
[(value)]="expressionUI.expression.searchVal" [outlet]="grid.outlet" [displayDensity]="displayDensity"
26+
(click)="timePicker.open()" [readOnly]="true" [placeholder]="inputTimePlaceholder"
27+
[displayFormat]="column.pipeArgs.format" [disabled]="expressionUI.expression.condition && expressionUI.expression.condition.isUnary">
5028
</igx-time-picker>
5129

52-
<igx-input-group #dropDownTarget *ngIf="column.dataType === 'dateTime'" #inputGroup type="box" [displayDensity]="displayDensity">
53-
<input #input igxInput tabindex="0"
54-
[placeholder]="inputDatePlaceholder"
55-
[igxDateTimeEditor]="column.defaultDateTimeFormat"
56-
[(ngModel)]="expressionUI.expression.searchVal"
57-
[disabled]="expressionUI.expression.condition && expressionUI.expression.condition.isUnary"/>
30+
<igx-input-group #dropDownTarget *ngIf="column.dataType === 'dateTime'" #inputGroup type="box"
31+
[displayDensity]="displayDensity">
32+
<input #input igxInput tabindex="0" [placeholder]="inputDatePlaceholder"
33+
[igxDateTimeEditor]="column.defaultDateTimeFormat" [(ngModel)]="expressionUI.expression.searchVal"
34+
[disabled]="expressionUI.expression.condition && expressionUI.expression.condition.isUnary" />
5835
</igx-input-group>
5936

60-
<button (click)="onRemoveButtonClick()" igxButton="icon" [displayDensity]="displayDensity" *ngIf="!isSingle" >
37+
<button (click)="onRemoveButtonClick()" igxButton="icon" [displayDensity]="displayDensity" *ngIf="!isSingle">
6138
<igx-icon>cancel</igx-icon>
6239
</button>
6340

64-
<igx-buttongroup #logicOperatorButtonGroup
65-
*ngIf="!isLast"
66-
[multiSelection]="false">
67-
<span igxButton [displayDensity]="displayDensity"
68-
#andButton
69-
(keydown)="onLogicOperatorKeyDown($event, 0)"
70-
tabindex="0"
71-
[selected]="expressionUI.afterOperator === 0"
72-
type="button"
41+
<igx-buttongroup #logicOperatorButtonGroup *ngIf="!isLast" [multiSelection]="false">
42+
<span igxButton [displayDensity]="displayDensity" #andButton (keydown)="onLogicOperatorKeyDown($event, 0)"
43+
tabindex="0" [selected]="expressionUI.afterOperator === 0" type="button"
7344
(click)="onLogicOperatorButtonClicked($event, 0)">
7445
{{ grid.resourceStrings.igx_grid_filter_operator_and }}
7546
</span>
7647

77-
<span igxButton [displayDensity]="displayDensity"
78-
#orButton
79-
tabindex="0"
80-
(keydown)="onLogicOperatorKeyDown($event, 1)"
81-
[selected]="expressionUI.afterOperator === 1"
82-
type="button"
48+
<span igxButton [displayDensity]="displayDensity" #orButton tabindex="0"
49+
(keydown)="onLogicOperatorKeyDown($event, 1)" [selected]="expressionUI.afterOperator === 1" type="button"
8350
(click)="onLogicOperatorButtonClicked($event, 1)">
8451
{{ grid.resourceStrings.igx_grid_filter_operator_or }}
8552
</span>
8653
</igx-buttongroup>
8754

88-
<div #overlayOutlet
89-
igxOverlayOutlet
90-
(pointerdown)="onOutletPointerDown($event)">
91-
</div>
55+
<div #overlayOutlet igxOverlayOutlet (pointerdown)="onOutletPointerDown($event)">
56+
</div>

Diff for: ‎projects/igniteui-angular/src/lib/time-picker/time-picker.component.html

+5-4
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
<igx-input-group [displayDensity]="displayDensity" [type]="type" [suppressInputAutofocus]="this.isDropdown"
22
(click)="!this.isDropdown && this.open()">
3-
<input igxInput [igxDateTimeEditor]="this.inputFormat" type="text" [readonly]="!this.isDropdown"
3+
<input igxInput [igxDateTimeEditor]="this.inputFormat" type="text" [readonly]="!this.isDropdown || this.readOnly"
44
[minValue]="this.minValue" [maxValue]="this.maxValue" [locale]="this.locale" [spinDelta]="this.itemsDelta"
55
[spinLoop]="this.spinLoop" [placeholder]="this.placeholder" [disabled]="this.disabled"
6-
[displayFormat]="this.displayFormat" [igxTextSelection]="this.isDropdown" role="combobox" aria-haspopup="dialog"
7-
[attr.aria-expanded]="!this.toggleDirective.collapsed" [attr.aria-labelledby]="this.label?.id" />
6+
[displayFormat]="this.displayFormat" [igxTextSelection]="this.isDropdown && !this.readOnly" role="combobox"
7+
aria-haspopup="dialog" [attr.aria-expanded]="!this.toggleDirective.collapsed"
8+
[attr.aria-labelledby]="this.label?.id" />
89

910
<igx-prefix *ngIf="!this.toggleComponents.length" (click)="this.toggle()">
1011
<igx-icon>access_time</igx-icon>
@@ -85,4 +86,4 @@ <h2 class="igx-time-picker__header-hour">
8586
*ngTemplateOutlet="timePickerActionsDirective ? timePickerActionsDirective.template : defaultTimePickerActions">
8687
</ng-container>
8788
</div>
88-
</div>
89+
</div>

Diff for: ‎projects/igniteui-angular/src/lib/time-picker/time-picker.component.ts

+4
Original file line numberDiff line numberDiff line change
@@ -240,6 +240,10 @@ export class IgxTimePickerComponent extends PickerBaseDirective
240240
@Input()
241241
public headerOrientation: PickerHeaderOrientation = PickerHeaderOrientation.Horizontal;
242242

243+
/** @hidden @internal */
244+
@Input()
245+
public readOnly = false;
246+
243247
/**
244248
* Emitted after a selection has been done.
245249
*

0 commit comments

Comments
 (0)