fix(date-picker): set disabled state without the need of clrForm

Signed-off-by: Bozhidar Dryanovski <[email protected]>

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<ClrDateContainer> i
  protected control: NgControl;
  date: Date;
  dateChange: EventEmitter<Date>;
+ disabled: boolean | string;
  protected el: ElementRef;
  protected index: number;
  readonly inputType: string;

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');

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">
  <clr-icon shape="calendar"></clr-icon>
@@ -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.
  */

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<ClrDateContainer> implement
  }
  }
 
+ @Input('disabled')
+ set disabled(value: boolean | string) {
+ this.dateFormControlService.setDisabled(isBooleanAttributeSet(value));
+ }
+
  private usingClarityDatepicker() {
  return this.datepickerEnabledService.isEnabled;
  }

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<void> = new Subject<void>();
+ public disabled;
 
  get touchedChange(): Observable<void> {
  return this._touchedChange.asObservable();
@@ -28,4 +29,9 @@ export class DateFormControlService {
  markAsDirty(): void {
  this._dirtyChange.next();
  }
+
+ // friendly wrapper
+ setDisabled(state: boolean) {
+ this.disabled = state;
+ }
 }

src/dev/src/app/datepicker/disabled.html

@@ -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.
  -->
@@ -29,6 +29,13 @@ <h6>ngModel Wrapper Explicit</h6>
  </div>
 </div>
 
+<h6>No ClrForm</h6>
+<clr-date-container>
+ <label>Disabled Date Picker</label>
+ <input type="date" [(clrDate)]="date" [disabled]="disabled" />
+</clr-date-container>
+
+<h6>Controll Disabled & Enabled</h6>
 <div>
  <button class="btn" (click)="disabled = !disabled">Toggle Disabled</button>
 </div>

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;
 }