Add "readonly" support to other form control components

src/components/checkbox/checkbox.component.spec.ts

@@ -128,6 +128,26 @@ describe('Checkbox', () => {
         )
     );
 
+    it('should not emit a single "change" when the checkbox is readonly',
+        componentTest(() => TestComponent, `
+            <gtx-checkbox readonly="true" (change)="onChange($event)">
+            </gtx-checkbox>`,
+            fixture => {
+                const nativeInput: HTMLInputElement = fixture.nativeElement.querySelector('input');
+                const instance: TestComponent = fixture.componentInstance;
+                fixture.detectChanges();
+                const spy = instance.onChange = jasmine.createSpy('onChange');
+
+                nativeInput.click();
+                tick();
+                fixture.detectChanges();
+
+                expect(instance.onChange).toHaveBeenCalledTimes(0);
+                expect(spy.calls.count()).toBe(0);
+            }
+        )
+    );
+
     it('should emit "blur" with current check state when the native input blurs',
         componentTest(() => TestComponent, `
             <gtx-checkbox

src/components/checkbox/checkbox.component.ts

@@ -11,6 +11,7 @@ import {
 } from '@angular/core';
 import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
 import {KeyCode} from '../../common/keycodes';
+import { coerceToBoolean } from '../../common/coerce-to-boolean';
 
 export type CheckState = boolean | 'indeterminate';
 
@@ -86,6 +87,15 @@ export class Checkbox implements ControlValueAccessor {
         }
     }
 
+    /** Set to `true` to change mode of the checkbox to `readOnly`. */
+    @Input()
+    get readonly(): boolean {
+        return this._readonly;
+    }
+    set readonly(value: any) {
+        this._readonly = coerceToBoolean(value);
+    }
+
     /**
      * Set the checkbox to its disabled state.
      */
@@ -124,6 +134,8 @@ export class Checkbox implements ControlValueAccessor {
      */
     @Output() change = new EventEmitter<CheckState>();
 
+    _readonly: boolean = false;
+
     checkState: CheckState = false;
     tabbedFocus: boolean = false;
 
@@ -171,6 +183,10 @@ export class Checkbox implements ControlValueAccessor {
         this.fixInitialAnimation();
     }
 
+    onClick(): boolean {
+        return !this.readonly;
+    }
+
     onInputChanged(e: Event, input: HTMLInputElement): boolean {
         if (e) {
             e.stopPropagation();
@@ -197,6 +213,10 @@ export class Checkbox implements ControlValueAccessor {
         this.disabled = disabled;
         this.changeDetector.markForCheck();
     }
+    setReadOnlyState(readonly: boolean): void {
+        this.readonly = readonly;
+        this.changeDetector.markForCheck();
+    }
 
     private onChange: Function = () => {};
     private onTouched: Function = () => {};

src/components/checkbox/checkbox.tpl.html

@@ -11,7 +11,7 @@
            (blur)="onBlur()"
            (focus)="onFocus()"
            (change)="onInputChanged($event, input)"
-
+           (click)="onClick()"
            [class.tabbed]="tabbedFocus"
 
            #input

src/components/date-time-picker/date-time-picker.component.spec.ts

@@ -30,6 +30,8 @@ import {OverlayHostService} from '../overlay-host/overlay-host.service';
 import {DateTimePickerFormatProvider} from './date-time-picker-format-provider.service';
 import {DateTimePickerModal} from './date-time-picker-modal.component';
 import {DateTimePicker} from './date-time-picker.component';
+import { crossBrowserInitKeyboardEvent, KeyboardEventConfig } from '../../testing/keyboard-event';
+import { KeyCode } from '../../common/keycodes';
 
 const TEST_TIMESTAMP: number = 1457971763;
 
@@ -161,6 +163,12 @@ describe('DateTimePicker:', () => {
 
     describe('input display:', () => {
 
+        function dispatchKeyboardEvent(keyCode: number, element: HTMLElement, options?: KeyboardEventConfig): void {
+            let mergedOptions = Object.assign({ keyCode, bubbles: true }, options);
+            let event  = crossBrowserInitKeyboardEvent('keypress', mergedOptions);
+            element.dispatchEvent(event);
+        }
+
         function inputValue(fixture: ComponentFixture<TestComponent>): string {
             fixture.detectChanges();
             return fixture.nativeElement.querySelector('input').value.trim();
@@ -277,6 +285,35 @@ describe('DateTimePicker:', () => {
             )
         );
 
+        it('does not emit "clear" and "change" when the date picker is readonly',
+            componentTest(() => TestComponent, `
+                <gtx-date-time-picker clearable [readonly]="true" (clear)="onClear($event)" (change)="onChange($event)" timestamp="${TEST_TIMESTAMP}">
+                </gtx-date-time-picker>`,
+                (fixture, testComponent) => {
+                    fixture.detectChanges();
+                    tick();
+
+                    expect(testComponent.onClear).not.toHaveBeenCalled();
+
+                    const clearButton = fixture.debugElement.query(By.css('gtx-button'));
+                    clearButton.triggerEventHandler('click', document.createEvent('Event'));
+                    fixture.detectChanges();
+
+                    expect(testComponent.onClear).toHaveBeenCalledTimes(0);
+
+                    const input = fixture.debugElement.query(By.css('gtx-input'));
+                    input.triggerEventHandler('click', document.createEvent('Event'));
+                    fixture.detectChanges();
+
+                    expect(testComponent.onChange).toHaveBeenCalledTimes(0);
+
+                    dispatchKeyboardEvent(KeyCode.Enter, input.nativeElement)
+
+                    expect(testComponent.onChange).toHaveBeenCalledTimes(0);
+                }
+            )
+        );
+
         it('does not clear its value when clicking the clear button if the date picker is disabled',
             componentTest(() => TestComponent, `
                 <gtx-date-time-picker clearable disabled [(ngModel)]="testModel"

src/components/date-time-picker/date-time-picker.component.ts

@@ -100,6 +100,11 @@ export class DateTimePicker implements ControlValueAccessor, OnInit, OnDestroy {
         this._displaySeconds = coerceToBoolean(val);
     }
 
+    /** Set to `true` to change mode of the date picker to `readOnly`. */
+    @Input() set readonly(val: any) {
+        this._readonly = coerceToBoolean(val);
+    }
+
     /** Fires when the "okay" button is clicked to close the picker. */
     @Output() change = new EventEmitter<number|null>();
 
@@ -109,6 +114,7 @@ export class DateTimePicker implements ControlValueAccessor, OnInit, OnDestroy {
     _clearable: boolean = false;
     _selectYear: boolean = false;
     _disabled: boolean = false;
+    _readonly: boolean = false;
     displayValue: string = '';
     /** @internal */
     private value: Moment;
@@ -150,7 +156,7 @@ export class DateTimePicker implements ControlValueAccessor, OnInit, OnDestroy {
     }
 
     handleEnterKey(event: KeyboardEvent): void {
-        if (event.keyCode === 13 && !this._disabled) {
+        if (event.keyCode === 13 && !this._disabled && !this._readonly) {
             this.showModal();
         }
     }
@@ -209,6 +215,11 @@ export class DateTimePicker implements ControlValueAccessor, OnInit, OnDestroy {
         this.changeDetector.markForCheck();
     }
 
+    setReadOnlyState(readonly: boolean): void {
+        this.readonly = readonly;
+        this.changeDetector.markForCheck();
+    }
+
     /** Format date to a human-readable string for displaying in the component's input field. */
     updateDisplayValue(): void {
         if (!this.value) {

src/components/date-time-picker/date-time-picker.tpl.html

@@ -1,17 +1,17 @@
 <gtx-input [value]="displayValue"
            [label]="label"
-           (click)="!_disabled && showModal()"
+           (click)="!_disabled && !_readonly && showModal()"
            (keydown)="handleEnterKey($event)"
            (blur)="onTouched()"
            [disabled]="_disabled"
-           readonly="true"
+           [readonly]="true"
            [class.clearable]="_clearable"></gtx-input>
 <gtx-button icon
     class="clear-button"
     *ngIf="_clearable"
     type="secondary"
     [disabled]="_disabled"
-    (click)="!_disabled && clearDateTime()">
+    (click)="!_disabled && !_readonly && clearDateTime()">
     <icon>clear</icon>
 </gtx-button>
 

src/components/dropdown-list/dropdown-list.component.ts

@@ -85,6 +85,7 @@ export class DropdownList implements OnDestroy {
     @Output() close = new EventEmitter<void>();
 
     private _disabled: boolean = false;
+    private _readonly: boolean = false;
     private overlayHostView: ViewContainerRef;
     private scrollMaskFactory: ScrollMask;
     private scrollMaskRef: ComponentRef<ScrollMask>;
@@ -164,6 +165,17 @@ export class DropdownList implements OnDestroy {
         this._disabled = coerceToBoolean(val);
     }
 
+    /**
+     * If true, the dropdown will be in readonly mode.
+     */
+    @Input()
+    get readonly(): boolean {
+        return this._readonly;
+    }
+    set readonly(value: any) {
+        this._readonly = coerceToBoolean(value);
+    }
+
     get isOpen(): boolean {
         return !!this.contentComponentRef;
     }
@@ -217,7 +229,7 @@ export class DropdownList implements OnDestroy {
      * Open the dropdown contents in the correct position.
      */
     openDropdown(): void {
-        if (this._disabled) {
+        if (this._disabled || this._readonly) {
             return;
         }
         this.contentComponentRef = this.overlayHostView.createComponent(DropdownContentWrapper, null);

src/components/range/range.component.spec.ts

@@ -68,6 +68,26 @@ describe('Range:', () => {
         )
     );
 
+    it('does not update the value when readonly attribute is true',
+        componentTest (() => TestComponent, `
+            <gtx-range readonly="true" value="35" (change)="onChange($event)"
+            ></gtx-range>`,
+            (fixture, instance) => {
+                let nativeInput: HTMLInputElement = fixture.nativeElement.querySelector('input');
+                fixture.detectChanges();
+                instance.onChange = jasmine.createSpy('onChange');
+                triggerInputEvent(nativeInput);
+                tick();
+                expect(instance.onChange).toHaveBeenCalledTimes(0);
+
+                instance.onInput = jasmine.createSpy('onInput');
+                triggerInputEvent(nativeInput);
+                tick();
+                expect(instance.onInput).toHaveBeenCalledTimes(0);
+            }
+        )
+    );
+
     it('emits "blur" with the current value when its native input blurs',
         componentTest(() => TestComponent, `
             <gtx-range
@@ -351,6 +371,7 @@ class TestComponent {
     onBlur(...args: any[]): void {}
     onFocus(...args: any[]): void {}
     onChange(...args: any[]): void {}
+    onInput(...args: any[]): void {}
 }
 
 /**

src/components/range/range.component.ts

@@ -71,6 +71,17 @@ export class Range implements ControlValueAccessor {
      */
     @Input() id: string;
 
+    /**
+    * Sets the readonly state.
+    */
+    @Input()
+    get readonly(): boolean {
+        return this._readonly;
+    }
+    set readonly(value: any) {
+        this._readonly = coerceToBoolean(value);
+    }
+
     /**
      * Set to false to not show the thumb label. Defaults to true.
      */
@@ -102,12 +113,13 @@ export class Range implements ControlValueAccessor {
     thumbLeft: string = '';
     currentValue: number;
     private showThumbLabel: boolean = true;
+    private _readonly: boolean = false;
 
 
     @ViewChild('input', { static: true }) private inputElement: ElementRef;
 
     private get canModify(): boolean {
-        return !this.disabled;
+        return !this.disabled && !this.readonly;
     }
 
     // ValueAccessor members
@@ -197,6 +209,11 @@ export class Range implements ControlValueAccessor {
         this.changeDetector.markForCheck();
     }
 
+    setReadonlyState(readonly: boolean): void {
+        this.readonly = readonly;
+        this.changeDetector.markForCheck();
+    }
+
     private getValueFromEvent(e: Event): number {
         const target: HTMLInputElement = <HTMLInputElement> e.target;
         return Number(target.value);

src/components/range/range.tpl.html

@@ -6,21 +6,21 @@
            [attr.name]="name"
            [required]="required"
            [attr.step]="step"
-
            [attr.id]="id"
 
            (blur)="onBlur($event)"
            (change)="onChangeEvent($event)"
            (focus)="onFocus($event)"
            (input)="onInput($event)"
-           (mousedown)="onMousedown($event)"
-           (mouseup)="onMouseup()"
+           (mousedown)="!readonly && onMousedown($event)"
+           (mouseup)="!readonly && onMouseup()"
            (mousemove)="onMousemove($event)"
 
            #input
     >
     <span class="thumb"
           [class.hidden]="!thumbLabel"
+          [class.readonly]="readonly"
           [class.active]="active"
           [style.left]="thumbLeft">
         <span class="value">{{ currentValue }}</span>

src/components/select/select.component.spec.ts

@@ -392,6 +392,23 @@ describe('Select:', () => {
             })
         );
 
+        it('does not open the dropdown when the it is readonly',
+            componentTest(() => TestComponent, `
+                <gtx-select readonly multiple="true" [value]="[value]" (change)="onChange($event)">
+                    <gtx-option *ngFor="let option of options" [value]="option">{{ option }}</gtx-option>
+                </gtx-select>
+                <gtx-overlay-host></gtx-overlay-host>`,
+                (fixture, instance) => {
+                    fixture.detectChanges();
+                    tick();
+                    clickSelectAndOpen(fixture);
+                    const listItems = getListItems(fixture);
+                    expect(listItems).toHaveSize(0);
+                    tick(1000);
+                }
+            )
+        );
+
         it('should open when space is pressed',
             componentTest(() => TestComponent, fixture => {
                 fixture.detectChanges();