From 2df17d111266f87757eea148dcac70aeb079c8ec Mon Sep 17 00:00:00 2001 From: Bozhidar Dryanovski Date: Wed, 8 Jan 2020 14:48:47 +0200 Subject: [PATCH] fix(date-picker): set disabled state without the need of clrForm Signed-off-by: Bozhidar Dryanovski --- golden/clr-angular.d.ts | 2 ++ .../forms/datepicker/date-container.spec.ts | 8 +++++++- src/clr-angular/forms/datepicker/date-container.ts | 14 ++++++++++++-- src/clr-angular/forms/datepicker/date-input.ts | 8 +++++++- .../providers/date-form-control.service.ts | 8 +++++++- src/dev/src/app/datepicker/disabled.html | 9 ++++++++- src/dev/src/app/datepicker/disabled.ts | 3 ++- 7 files changed, 45 insertions(+), 7 deletions(-) diff --git a/golden/clr-angular.d.ts b/golden/clr-angular.d.ts index 378bfd7046..b2b725a1e4 100644 --- a/golden/clr-angular.d.ts +++ b/golden/clr-angular.d.ts @@ -588,6 +588,7 @@ export declare class ClrDateContainer implements DynamicWrapper, OnDestroy, Afte focus: boolean; invalid: boolean; readonly isEnabled: boolean; + readonly isInputDateDisabled: boolean; label: ClrLabel; position: PopoverPosition; constructor(_toggleService: ClrPopoverToggleService, _dateNavigationService: DateNavigationService, _datepickerEnabledService: DatepickerEnabledService, dateFormControlService: DateFormControlService, commonStrings: ClrCommonStringsService, ifErrorService: IfErrorService, focusService: FocusService, controlClassService: ControlClassService, layoutService: LayoutService, ngControlService: NgControlService); @@ -603,6 +604,7 @@ export declare class ClrDateInput extends WrappedFormControl i protected control: NgControl; date: Date; dateChange: EventEmitter; + disabled: boolean | string; protected el: ElementRef; protected index: number; readonly inputType: string; diff --git a/src/clr-angular/forms/datepicker/date-container.spec.ts b/src/clr-angular/forms/datepicker/date-container.spec.ts index 7dda62d56a..13d17a0439 100644 --- a/src/clr-angular/forms/datepicker/date-container.spec.ts +++ b/src/clr-angular/forms/datepicker/date-container.spec.ts @@ -1,5 +1,5 @@ /* - * Copyright (c) 2016-2019 VMware, Inc. All Rights Reserved. + * Copyright (c) 2016-2020 VMware, Inc. All Rights Reserved. * This software is released under MIT license. * The full license information can be found in LICENSE in the root directory of this project. */ @@ -144,6 +144,12 @@ export default function() { }); })); + it('should set disabled state when dateFormControlService.disabled is true', () => { + dateFormControlService.disabled = true; + context.detectChanges(); + expect(context.clarityElement.className).toContain('clr-form-control-disabled'); + }); + it('has an accessible title on the calendar toggle button', () => { const toggleButton: HTMLButtonElement = context.clarityElement.querySelector('.clr-input-group-icon-action'); expect(toggleButton.title).toEqual('Toggle datepicker'); diff --git a/src/clr-angular/forms/datepicker/date-container.ts b/src/clr-angular/forms/datepicker/date-container.ts index 8e0c5b7092..ac4ae7337b 100644 --- a/src/clr-angular/forms/datepicker/date-container.ts +++ b/src/clr-angular/forms/datepicker/date-container.ts @@ -48,7 +48,7 @@ import { PopoverPosition } from '../../popover/common/popover-positions'; class="clr-input-group-icon-action" [attr.title]="commonStrings.keys.datepickerToggle" [attr.aria-label]="commonStrings.keys.datepickerToggle" - [disabled]="control?.disabled" + [disabled]="isInputDateDisabled" (click)="toggleDatepicker($event)" *ngIf="isEnabled"> @@ -75,7 +75,7 @@ import { PopoverPosition } from '../../popover/common/popover-positions'; DateFormControlService, ], host: { - '[class.clr-form-control-disabled]': 'control?.disabled', + '[class.clr-form-control-disabled]': 'isInputDateDisabled', '[class.clr-form-control]': 'true', '[class.clr-row]': 'addGrid()', }, @@ -162,6 +162,16 @@ export class ClrDateContainer implements DynamicWrapper, OnDestroy, AfterViewIni return this._datepickerEnabledService.isEnabled; } + /** + * Return if Datepicker is diabled or not as Form Control + */ + get isInputDateDisabled(): boolean { + /* clrForm wrapper or without clrForm */ + return ( + (this.control && this.control.disabled) || (this.dateFormControlService && this.dateFormControlService.disabled) + ); + } + /** * Processes the user input and Initializes the Calendar everytime the datepicker popover is open. */ diff --git a/src/clr-angular/forms/datepicker/date-input.ts b/src/clr-angular/forms/datepicker/date-input.ts index 4486d8e1eb..5670eba294 100644 --- a/src/clr-angular/forms/datepicker/date-input.ts +++ b/src/clr-angular/forms/datepicker/date-input.ts @@ -1,5 +1,5 @@ /* - * Copyright (c) 2016-2019 VMware, Inc. All Rights Reserved. + * Copyright (c) 2016-2020 VMware, Inc. All Rights Reserved. * This software is released under MIT license. * The full license information can be found in LICENSE in the root directory of this project. */ @@ -38,6 +38,7 @@ import { DateNavigationService } from './providers/date-navigation.service'; import { DatepickerEnabledService } from './providers/datepicker-enabled.service'; import { DatepickerFocusService } from './providers/datepicker-focus.service'; import { datesAreEqual } from './utils/date-utils'; +import { isBooleanAttributeSet } from '../../utils/component/is-boolean-attribute-set'; // There are four ways the datepicker value is set // 1. Value set by user typing into text input as a string ex: '01/28/2015' @@ -158,6 +159,11 @@ export class ClrDateInput extends WrappedFormControl implement } } + @Input('disabled') + set disabled(value: boolean | string) { + this.dateFormControlService.setDisabled(isBooleanAttributeSet(value)); + } + private usingClarityDatepicker() { return this.datepickerEnabledService.isEnabled; } diff --git a/src/clr-angular/forms/datepicker/providers/date-form-control.service.ts b/src/clr-angular/forms/datepicker/providers/date-form-control.service.ts index e1871da36f..643ed19c76 100644 --- a/src/clr-angular/forms/datepicker/providers/date-form-control.service.ts +++ b/src/clr-angular/forms/datepicker/providers/date-form-control.service.ts @@ -1,5 +1,5 @@ /* - * Copyright (c) 2016-2018 VMware, Inc. All Rights Reserved. + * Copyright (c) 2016-2020 VMware, Inc. All Rights Reserved. * This software is released under MIT license. * The full license information can be found in LICENSE in the root directory of this project. */ @@ -10,6 +10,7 @@ import { Observable, Subject } from 'rxjs'; @Injectable() export class DateFormControlService { private _touchedChange: Subject = new Subject(); + public disabled; get touchedChange(): Observable { return this._touchedChange.asObservable(); @@ -28,4 +29,9 @@ export class DateFormControlService { markAsDirty(): void { this._dirtyChange.next(); } + + // friendly wrapper + setDisabled(state: boolean) { + this.disabled = state; + } } diff --git a/src/dev/src/app/datepicker/disabled.html b/src/dev/src/app/datepicker/disabled.html index 3090c980f1..746de7e9e5 100644 --- a/src/dev/src/app/datepicker/disabled.html +++ b/src/dev/src/app/datepicker/disabled.html @@ -1,5 +1,5 @@ @@ -29,6 +29,13 @@
ngModel Wrapper Explicit
+
No ClrForm
+ + + + + +
Controll Disabled & Enabled
diff --git a/src/dev/src/app/datepicker/disabled.ts b/src/dev/src/app/datepicker/disabled.ts index e87cee2dae..e33456bbf2 100644 --- a/src/dev/src/app/datepicker/disabled.ts +++ b/src/dev/src/app/datepicker/disabled.ts @@ -1,5 +1,5 @@ /* - * Copyright (c) 2016-2018 VMware, Inc. All Rights Reserved. + * Copyright (c) 2016-2020 VMware, Inc. All Rights Reserved. * This software is released under MIT license. * The full license information can be found in LICENSE in the root directory of this project. */ @@ -11,5 +11,6 @@ import { Component } from '@angular/core'; }) export class DisabledDemo { model: string = ''; + date = new Date(); disabled = true; }