feat(checkbox): add readonly prop #5675 (#5716)

* feat(checkbox): add readonly prop #5675

* remove fit

* Apply suggestions from code review

Co-Authored-By: Damyan Petev <[email protected]>

* fix(chechbox): prevent chagning native state when checkbox is readonly #5675

* chore(checkbox): update comment text

Author: Lipata

CHANGELOG.md

@@ -45,6 +45,8 @@ For more information about the theming please read our [documentation](https://w
 - `IgxDrop`
     - Linking of drag and drop elements. This can be achieved by using the new provided `dropChannel` input, specifying each drop area to which channel it corresponds.
     - Drop strategies. Three new drop strategies have been provided - Append, Prepend and Insert.  Also an input `dropStrategy` to the `igxDrop` which specify which strategy should be used when dropping an element inside the drop area. Custom one can be specified as well.
+- `IgxCheckbox`
+    - introduced a new `readonly` property that doesn't allow user interaction to change the state, but keeps the default active style. Intended for integration in complex controls that handle the interaction and control the checkbox instead through binding.
 
 ### General
 - `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`

projects/igniteui-angular/src/lib/checkbox/README.md

@@ -75,6 +75,7 @@ To disable the ripple effect, do:
 | `@Input()` indeterminate | boolean | Specifies the indeterminate state of the checkbox. |
 | `@Input()` required | boolean | Specifies the required state of the checkbox. |
 | `@Input()` disabled | boolean | Specifies the disabled state of the checkbox. |
+| `@Input()` readonly | boolean | Specifies the readonly state of the checkbox. |
 | `@Input()` disableRipple | boolean | Specifies whether the ripple effect should be disabled for the checkbox. |
 | `@Input()` disableTransitions | boolean | Specifies whether CSS transitions should be disabled for the checkbox. |
 | `@Input()` labelPosition | string `|` enum LabelPosition | Specifies the position of the text label relative to the checkbox element. |

projects/igniteui-angular/src/lib/checkbox/checkbox.component.spec.ts

@@ -19,6 +19,7 @@ describe('IgxCheckbox', () => {
                 InitCheckboxComponent,
                 CheckboxSimpleComponent,
                 CheckboxDisabledComponent,
+                CheckboxReadonlyComponent,
                 CheckboxIndeterminateComponent,
                 CheckboxRequiredComponent,
                 CheckboxExternalLabelComponent,
@@ -158,6 +159,33 @@ describe('IgxCheckbox', () => {
         expect(testInstance.subscribed).toBe(false);
     });
 
+    it('Readonly state', () => {
+        const fixture = TestBed.createComponent(CheckboxReadonlyComponent);
+        const testInstance = fixture.componentInstance;
+        const checkboxInstance = testInstance.cb;
+        const nativeCheckbox = checkboxInstance.nativeCheckbox.nativeElement;
+        const nativeLabel = checkboxInstance.nativeLabel.nativeElement;
+        const placeholderLabel = checkboxInstance.placeholderLabel.nativeElement;
+        fixture.detectChanges();
+        expect(checkboxInstance.readonly).toBe(true);
+        expect(testInstance.subscribed).toBe(false);
+
+        nativeCheckbox.dispatchEvent(new Event('change'));
+        fixture.detectChanges();
+        // Should not update
+        expect(testInstance.subscribed).toBe(false);
+
+        nativeLabel.click();
+        fixture.detectChanges();
+        // Should not update
+        expect(testInstance.subscribed).toBe(false);
+
+        placeholderLabel.click();
+        fixture.detectChanges();
+        // Should not update
+        expect(testInstance.subscribed).toBe(false);
+    });
+
     it('Should be able to enable/disable CSS transitions', () => {
         const fixture = TestBed.createComponent(CheckboxDisabledTransitionsComponent);
         const testInstance = fixture.componentInstance;
@@ -282,6 +310,17 @@ class CheckboxDisabledComponent {
     public subscribed = false;
 }
 
+@Component({
+    template: `<igx-checkbox #cb
+                                [(ngModel)]="subscribed"
+                                [checked]="subscribed"
+                                [readonly]="true">Readonly</igx-checkbox>`})
+class CheckboxReadonlyComponent {
+    @ViewChild('cb', { static: true }) public cb: IgxCheckboxComponent;
+
+    public subscribed = false;
+}
+
 @Component({
     template: `<p id="my-label">{{label}}</p>
     <igx-checkbox #cb aria-labelledby="my-label"></igx-checkbox>`

projects/igniteui-angular/src/lib/checkbox/checkbox.component.ts

@@ -258,12 +258,24 @@ export class IgxCheckboxComponent implements ControlValueAccessor, EditorProvide
      * <igx-checkbox [disabled] = "true"></igx-checkbox>
      * ```
      * ```typescript
-     * let isDesabled = this.checkbox.disabled;
+     * let isDisabled = this.checkbox.disabled;
      * ```
      * @memberof IgxCheckboxComponent
      */
     @HostBinding('class.igx-checkbox--disabled')
     @Input() public disabled = false;
+    /**
+     * Sets/gets whether the checkbox is readonly.
+     * Default value is `false`.
+     * ```html
+     * <igx-checkbox [readonly]="true"></igx-checkbox>
+     * ```
+     * ```typescript
+     * let readonly = this.checkbox.readonly;
+     * ```
+     * @memberof IgxCheckboxComponent
+     */
+    @Input() public readonly = false;
     /**
      * Sets/gets whether the checkbox should disable all css transitions.
      * Default value is `false`.
@@ -297,7 +309,7 @@ export class IgxCheckboxComponent implements ControlValueAccessor, EditorProvide
      * @memberof IgxCheckboxComponent
      */
     public toggle() {
-        if (this.disabled) {
+        if (this.disabled || this.readonly) {
             return;
         }
 
@@ -326,6 +338,13 @@ export class IgxCheckboxComponent implements ControlValueAccessor, EditorProvide
         // as it gets triggered on label click
         event.stopPropagation();
 
+        if (this.readonly) {
+            // readonly prevents the component from changing state (see toggle() method).
+            // However, the native checkbox can still be activated through user interaction (focus + space, label click)
+            // Prevent the native change so the input remains in sync
+            event.preventDefault();
+        }
+
         if (isIE()) {
             this.nativeCheckbox.nativeElement.blur();
         }

src/app/input/input.sample.html

@@ -81,10 +81,16 @@ <h4 class="sample-title">Checkbox sample</h4>
 
                     <igx-list-item>
                         <igx-avatar igxListThumbnail src="assets/images/avatar/17.jpg" roundShape="true"></igx-avatar>
-                        <span igxListLineTitle>Brian Vaughan</span>
+                        <span igxListLineTitle>Brian Vaughan (disabled)</span>
                         <igx-checkbox igxListAction [(ngModel)]="user.registered" [disabled]="true">Value</igx-checkbox>
                     </igx-list-item>
 
+                    <igx-list-item>
+                        <igx-avatar igxListThumbnail src="assets/images/avatar/17.jpg" roundShape="true"></igx-avatar>
+                        <span igxListLineTitle>Brian Vaughan (readonly)</span>
+                        <igx-checkbox igxListAction [(ngModel)]="user.registered" [readonly]="true">Value</igx-checkbox>
+                    </igx-list-item>
+
                     <igx-list-item>
                         <igx-avatar igxListThumbnail src="assets/images/avatar/17.jpg" roundShape="true"></igx-avatar>
                         <span igxListLineTitle>Brian Vaughan</span>