Skip to content

Commit 23640e8

Browse files
SisIvanovaSisIvanova
committed
feat(date-picker/time-picker): readonly styles
1 parent d923130 commit 23640e8

File tree

9 files changed

+228
-26
lines changed

9 files changed

+228
-26
lines changed

‎projects/igniteui-angular/src/lib/core/styles/components/date-picker/_date-picker-component.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,5 +30,9 @@
3030
@include m(dropdown) {
3131
@extend %date-picker--dropdown !optional;
3232
}
33+
34+
@include m(readonly) {
35+
@extend %date-picker--readonly !optional;
36+
}
3337
}
3438
}

‎projects/igniteui-angular/src/lib/core/styles/components/date-picker/_date-picker-theme.scss‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -91,4 +91,95 @@
9191
--component-size: var(--ig-size, #{var-get($theme, 'default-size')}) !important;
9292
}
9393
}
94+
95+
%date-picker--readonly igx-input-group {
96+
igx-prefix,
97+
[igxPrefix],
98+
igx-suffix,
99+
[igxSuffix] {
100+
color: var(--disabled-text-color);
101+
102+
@if $variant == 'fluent' {
103+
background: transparent;
104+
}
105+
106+
@if $variant == 'bootstrap' {
107+
background: var(--border-disabled-background);
108+
}
109+
}
110+
111+
@if $variant == 'bootstrap' {
112+
%form-group-input {
113+
background: var(--border-disabled-background);
114+
}
115+
}
116+
117+
&%form-group-display--box:not(%form-group-display--disabled) {
118+
%form-group-bundle {
119+
background: var(--box-background-focus);
120+
121+
&:hover {
122+
&:has(input[readonly][role="combobox"])::after {
123+
border-block-end-color: var(--idle-bottom-line-color);
124+
}
125+
}
126+
}
127+
}
128+
129+
&%form-group-display--border:not(%form-group-display--disabled) {
130+
%form-group-bundle:hover {
131+
%form-group-bundle-start,
132+
%igx-input-group__filler,
133+
%form-group-bundle-end {
134+
border-color: var(--border-color);
135+
}
136+
137+
%igx-input-group__notch {
138+
border-block-start-color: var(--border-color);
139+
border-block-end-color: var(--border-color);
140+
}
141+
}
142+
}
143+
144+
&:not(%form-group-display--disabled) {
145+
%form-group-bundle:not(:focus-within) {
146+
@if $variant == 'indigo' {
147+
&::after {
148+
border-block-end-color: var(--disabled-text-color);
149+
}
150+
151+
&:hover {
152+
background: unset;
153+
}
154+
}
155+
156+
&:hover:has(input[readonly][role="combobox"]) {
157+
&::before {
158+
@if $variant == 'fluent' {
159+
box-shadow: inset 0 0 0 rem(1px) var(--border-color);
160+
}
161+
}
162+
163+
&::after {
164+
@if $variant == 'material' {
165+
border-block-end-color: var(--border-color);
166+
} @else if $variant == 'indigo' {
167+
border-block-end-color: var(--disabled-text-color);
168+
}
169+
}
170+
}
171+
}
172+
}
173+
174+
&:hover {
175+
%form-group-input--hover {
176+
cursor: default;
177+
color: va(--filled-text-color);
178+
179+
&::placeholder {
180+
color: var(--placeholder-color);
181+
}
182+
}
183+
}
184+
}
94185
}

‎projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss‎

Lines changed: 17 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -383,8 +383,6 @@
383383
}
384384

385385
%form-group-bundle--hover {
386-
//cursor: pointer;
387-
388386
&:has(input:not([readonly])),
389387
&:has(textarea:not([readonly])),
390388
&:has(input[readonly][role="combobox"]),
@@ -397,16 +395,21 @@
397395
}
398396

399397
%form-group-bundle--focus {
400-
&::after {
401-
@if $variant != 'indigo' {
402-
border-block-end-width: rem(2px);
398+
&:has(input:not([readonly])),
399+
&:has(textarea:not([readonly])),
400+
&:has(input[readonly][role="combobox"]),
401+
&:has(input[readonly][type="file"]) {
402+
&::after {
403+
@if $variant != 'indigo' {
404+
border-block-end-width: rem(2px);
405+
}
406+
border-block-end-color: var-get($theme, 'focused-bottom-line-color');
403407
}
404-
border-block-end-color: var-get($theme, 'focused-bottom-line-color');
405-
}
406408

407-
@if $variant == 'indigo' {
408-
caret-color: var-get($theme, 'focused-bottom-line-color');
409-
}
409+
@if $variant == 'indigo' {
410+
caret-color: var-get($theme, 'focused-bottom-line-color');
411+
}
412+
}
410413
}
411414

412415
%form-group-bundle--success {
@@ -915,22 +918,16 @@
915918
&:has(input[readonly][role="combobox"]),
916919
&:has(input[readonly][type="file"]) {
917920
&:hover {
918-
%form-group-bundle-start {
919-
border-color: var-get($theme, 'hover-border-color');
920-
}
921-
922-
%igx-input-group__filler {
921+
%form-group-bundle-start,
922+
%igx-input-group__filler,
923+
%form-group-bundle-end {
923924
border-color: var-get($theme, 'hover-border-color');
924925
}
925926

926927
%igx-input-group__notch {
927928
border-block-start-color: var-get($theme, 'hover-border-color');
928929
border-block-end-color: var-get($theme, 'hover-border-color');
929930
}
930-
931-
%form-group-bundle-end {
932-
border-color: var-get($theme, 'hover-border-color');
933-
}
934931
}
935932
}
936933
}
@@ -1909,10 +1906,9 @@
19091906
}
19101907
}
19111908

1912-
%form-group-bundle-error--fluent,
1909+
%form-group-bundle-error--fluent:not(:focus-within),
19131910
%form-group-bundle-error--fluent--hover,
19141911
%form-group-bundle-error--fluent--focus {
1915-
// should be fixed
19161912
&:has(input:not([readonly])),
19171913
&:has(textarea:not([readonly])),
19181914
&:has(input[readonly][role="combobox"]),

‎projects/igniteui-angular/src/lib/core/styles/components/time-picker/_time-picker-component.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -104,5 +104,9 @@
104104
@extend %time-picker__buttons--vertical !optional;
105105
}
106106
}
107+
108+
@include m(readonly) {
109+
@extend %time-picker-display--readonly !optional;
110+
}
107111
}
108112
}

‎projects/igniteui-angular/src/lib/core/styles/components/time-picker/_time-picker-theme.scss‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -244,6 +244,97 @@
244244
%time-picker__buttons--vertical {
245245
align-items: flex-end;
246246
}
247+
248+
%time-picker-display--readonly igx-input-group {
249+
igx-prefix,
250+
[igxPrefix],
251+
igx-suffix,
252+
[igxSuffix] {
253+
color: var(--disabled-text-color);
254+
255+
@if $variant == 'fluent' {
256+
background: transparent;
257+
}
258+
259+
@if $variant == 'bootstrap' {
260+
background: var(--border-disabled-background);
261+
}
262+
}
263+
264+
@if $variant == 'bootstrap' {
265+
%form-group-input {
266+
background: var(--border-disabled-background);
267+
}
268+
}
269+
270+
&%form-group-display--box:not(%form-group-display--disabled) {
271+
%form-group-bundle {
272+
background: var(--box-background-focus);
273+
274+
&:hover {
275+
&:has(input[readonly][role="combobox"])::after {
276+
border-block-end-color: var(--idle-bottom-line-color);
277+
}
278+
}
279+
}
280+
}
281+
282+
&%form-group-display--border:not(%form-group-display--disabled) {
283+
%form-group-bundle:hover {
284+
%form-group-bundle-start,
285+
%igx-input-group__filler,
286+
%form-group-bundle-end {
287+
border-color: var(--border-color);
288+
}
289+
290+
%igx-input-group__notch {
291+
border-block-start-color: var(--border-color);
292+
border-block-end-color: var(--border-color);
293+
}
294+
}
295+
}
296+
297+
&:not(%form-group-display--disabled) {
298+
%form-group-bundle:not(:focus-within) {
299+
@if $variant == 'indigo' {
300+
&::after {
301+
border-block-end-color: var(--disabled-text-color);
302+
}
303+
304+
&:hover {
305+
background: unset;
306+
}
307+
}
308+
309+
&:hover:has(input[readonly][role="combobox"]) {
310+
&::before {
311+
@if $variant == 'fluent' {
312+
box-shadow: inset 0 0 0 rem(1px) var(--border-color);
313+
}
314+
}
315+
316+
&::after {
317+
@if $variant == 'material' {
318+
border-block-end-color: var(--border-color);
319+
} @else if $variant == 'indigo' {
320+
border-block-end-color: var(--disabled-text-color);
321+
}
322+
}
323+
}
324+
}
325+
}
326+
327+
&:hover {
328+
%form-group-input--hover {
329+
cursor: default;
330+
color: va(--filled-text-color);
331+
332+
&::placeholder {
333+
color: var(--placeholder-color);
334+
}
335+
}
336+
}
337+
}
247338
}
248339

249340
/// Adds typography styles for the igx-calendar component.

‎projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -372,6 +372,7 @@ export class IgxDatePickerComponent extends PickerBaseDirective implements Contr
372372
public resourceStrings: IDatePickerResourceStrings;
373373

374374
/** @hidden @internal */
375+
@HostBinding('class.igx-date-picker--readonly')
375376
@Input({ transform: booleanAttribute })
376377
public readOnly = false;
377378

@@ -571,7 +572,7 @@ export class IgxDatePickerComponent extends PickerBaseDirective implements Contr
571572
* ```
572573
*/
573574
public open(settings?: OverlaySettings): void {
574-
if (!this.collapsed || this.disabled) {
575+
if (!this.collapsed || this.disabled || this.readOnly) {
575576
return;
576577
}
577578

@@ -669,7 +670,7 @@ export class IgxDatePickerComponent extends PickerBaseDirective implements Contr
669670
* ```
670671
*/
671672
public clear(): void {
672-
if (!this.disabled) {
673+
if (!this.disabled || !this.readOnly) {
673674
this._calendar?.deselectDate();
674675
this.dateTimeEditor.clear();
675676
}

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -253,6 +253,7 @@ export class IgxTimePickerComponent extends PickerBaseDirective
253253
public headerOrientation: PickerHeaderOrientation = PickerHeaderOrientation.Horizontal;
254254

255255
/** @hidden @internal */
256+
@HostBinding('class.igx-time-picker--readonly')
256257
@Input({ transform: booleanAttribute })
257258
public readOnly = false;
258259

@@ -780,7 +781,7 @@ export class IgxTimePickerComponent extends PickerBaseDirective
780781
* ```
781782
*/
782783
public open(settings?: OverlaySettings): void {
783-
if (this.disabled || !this.toggleRef.collapsed) {
784+
if (this.disabled || !this.toggleRef.collapsed || this.readOnly) {
784785
return;
785786
}
786787

@@ -824,7 +825,7 @@ export class IgxTimePickerComponent extends PickerBaseDirective
824825
* ```
825826
*/
826827
public clear(): void {
827-
if (this.disabled) {
828+
if (this.disabled || this.readOnly) {
828829
return;
829830
}
830831

‎src/app/date-picker/date-picker.sample.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,12 @@ <h6>Angular Date Picker</h6>
33
<igx-date-picker
44
#dpAng
55
[mode]="modeAngular"
6-
type="box"
6+
[type]="properties.type"
77
[value]="properties.value"
88
[displayFormat]="properties.displayFormat"
99
[inputFormat]="properties.inputFormat"
1010
[required]="properties.required"
11+
[readOnly]="properties.readonly"
1112
[disabled]="properties.disabled"
1213
[placeholder]="properties.placeholder"
1314
showWeekNumbers="true"

‎src/app/date-picker/date-picker.sample.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -107,12 +107,25 @@ export class DatePickerSampleComponent {
107107
defaultValue: 'dropdown'
108108
}
109109
},
110+
type: {
111+
control: {
112+
type: 'button-group',
113+
options: ['box', 'border', 'line'],
114+
defaultValue: 'box'
115+
}
116+
},
110117
required: {
111118
control: {
112119
type: 'boolean',
113120
defaultValue: false
114121
}
115122
},
123+
readonly: {
124+
control: {
125+
type: 'boolean',
126+
defaultValue: false
127+
}
128+
},
116129
disabled: {
117130
control: {
118131
type: 'boolean',

0 commit comments

Comments
 (0)