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