feat(checkbox): novo componente

Adicionado novo componente Checkbox ao pacote Portinari-UI.

Fixes DTHFUI-2397

Author: mateusjmaf

projects/ui/src/lib/components/po-field/index.ts

@@ -1,3 +1,4 @@
+export * from './po-checkbox/po-checkbox.component';
 export * from './po-checkbox-group/interfaces/po-checkbox-group-option.interface';
 export * from './po-checkbox-group/po-checkbox-group.component';
 export * from './po-combo/po-combo-filter-mode.enum';

projects/ui/src/lib/components/po-field/po-checkbox/po-checkbox-base.component.spec.ts

@@ -0,0 +1,120 @@
+import { expectPropertiesValues } from '../../../util-test/util-expect.spec';
+
+import { PoCheckboxBaseComponent } from './po-checkbox-base.component';
+
+class PoCheckboxComponent extends PoCheckboxBaseComponent {
+  protected changeModelValue(value: boolean | null) { }
+}
+
+describe('PoCheckboxBaseComponent:', () => {
+  let component: PoCheckboxBaseComponent;
+
+  beforeEach((() => {
+    component = new PoCheckboxComponent();
+    component.propagateChange = (value: any) => { };
+  }));
+
+  it('should be created', () => {
+    component.registerOnChange(() => { });
+    component.registerOnTouched(() => { });
+    expect(component instanceof PoCheckboxBaseComponent).toBeTruthy();
+  });
+
+  describe('Properties:', () => {
+
+    it('disabled: should update with true value', () => {
+      const booleanValidTrueValues = [ true, 'true', 1, '' ];
+
+      expectPropertiesValues(component, 'disabled', booleanValidTrueValues, true);
+    });
+
+    it('disabled: should update with false value', () => {
+      const booleanInvalidValues = [ undefined, null, 2, 'string', 0, NaN, false ];
+
+      expectPropertiesValues(component, 'disabled', booleanInvalidValues, false);
+    });
+
+  });
+
+  describe('Methods:', () => {
+
+    it('changeValue: should call `propagateChange` if it is defined and call `change.emit` with `checkboxValue`', () => {
+      component.checkboxValue = true;
+
+      component.propagateChange = () => {};
+
+      spyOn(component, 'propagateChange');
+      spyOn(component.change, 'emit');
+
+      component.changeValue();
+
+      expect(component.propagateChange).toHaveBeenCalledWith(component.checkboxValue);
+      expect(component.change.emit).toHaveBeenCalledWith(component.checkboxValue);
+    });
+
+    it('changeValue: should call only `change.emit` with `checkboxValue` if propagateChange is `null`', () => {
+      component.checkboxValue = true;
+      component.propagateChange = null;
+
+      spyOn(component.change, 'emit');
+
+      component.changeValue();
+
+      expect(component.change.emit).toHaveBeenCalledWith(component.checkboxValue);
+    });
+
+    it('checkOption: should call `changeModelValue` and `changeValue` if `disabled` is false.', () => {
+      component.disabled = false;
+      const spyOnChangeValue = spyOn(component, 'changeValue');
+      const spyOnChangeModelValue = spyOn(component, <any>'changeModelValue');
+
+      component.checkOption(true);
+
+      expect(spyOnChangeValue).toHaveBeenCalled();
+      expect(spyOnChangeModelValue).toHaveBeenCalled();
+    });
+
+    it('checkOption: shouldn`t call `changeModelValue` and `changeValue` if `disabled` is true.', () => {
+      component.disabled = true;
+      const spyOnChangeValue = spyOn(component, 'changeValue');
+      const spyOnChangeModelValue = spyOn(component, <any>'changeModelValue');
+
+      component.checkOption(true);
+
+      expect(spyOnChangeValue).not.toHaveBeenCalled();
+      expect(spyOnChangeModelValue).not.toHaveBeenCalled();
+    });
+
+    it('registerOnChange: should set `propagateChange` with value of `fnParam`', () => {
+      const fnParam = () => {};
+
+      component.registerOnChange(fnParam);
+
+      expect(component['propagateChange']).toBe(fnParam);
+    });
+
+    it('writeValue: should call `changeModelValue` if value is different from `checkboxValue`', () => {
+      const valueParam = true;
+      component.checkboxValue = undefined;
+
+      spyOn(component, <any>'changeModelValue');
+
+      component.writeValue(valueParam);
+
+      expect(component['changeModelValue']).toHaveBeenCalledWith(valueParam);
+    });
+
+    it('writeValue: shouldn`t call `changeModelValue` if value is same as `checkboxValue`', () => {
+      const valueParam = undefined;
+      component.checkboxValue = undefined;
+
+      spyOn(component, <any>'changeModelValue');
+
+      component.writeValue(valueParam);
+
+      expect(component['changeModelValue']).not.toHaveBeenCalled();
+    });
+
+  });
+
+});

projects/ui/src/lib/components/po-field/po-checkbox/po-checkbox-base.component.ts

@@ -0,0 +1,79 @@
+import { ControlValueAccessor } from '@angular/forms';
+import { EventEmitter, Input, Output } from '@angular/core';
+
+import { convertToBoolean, uuid } from './../../../utils/util';
+
+/**
+ * @description
+ *
+ * O componente `po-checkbox` exibe uma caixa de opção com um texto ao lado, na qual é possível marcar e desmarcar através tanto
+ * no *click* do *mouse* quanto por meio da tecla *space* quando estiver com foco.
+ *
+ * Cada opção poderá receber um estado de marcado, desmarcado, indeterminado e desabilitado, como também uma ação que será disparada quando
+ * ocorrer mudanças do valor.
+ *
+ * > O *model* deste componente aceitará valores igual à `true`, `false` ou `null` para quando for indeterminado.
+ */
+export abstract class PoCheckboxBaseComponent implements ControlValueAccessor {
+
+  checkboxValue: boolean | null;
+  id = uuid();
+  propagateChange: any;
+
+  private _disabled?: boolean = false;
+
+  /** Define o nome do *checkbox*. */
+  @Input('name') name: string;
+
+  /**
+   * @optional
+   *
+   * @description
+   *
+   * Define o estado do *checkbox* como desabilitado.
+   *
+   * @default `false`
+   */
+  @Input('p-disabled') set disabled(value: boolean) {
+    this._disabled = convertToBoolean(value);
+  }
+
+  get disabled(): boolean {
+    return this._disabled;
+  }
+
+  /** Texto de exibição do *checkbox*. */
+  @Input('p-label') label?: string;
+
+  /** Evento disparado quando o valor do *checkbox* for alterado. */
+  @Output('p-change') change?: EventEmitter<any> = new EventEmitter<any>();
+
+  changeValue() {
+    if (this.propagateChange) {
+      this.propagateChange(this.checkboxValue);
+    }
+
+    this.change.emit(this.checkboxValue);
+  }
+
+  checkOption(value: boolean | null) {
+    if (!this.disabled) {
+      this.changeModelValue(!value);
+      this.changeValue();
+    }
+  }
+
+  registerOnChange(fn: any): void {
+    this.propagateChange = fn;
+  }
+
+  registerOnTouched(fn: any): void { }
+
+  writeValue(value: any) {
+    if (value !== this.checkboxValue) {
+      this.changeModelValue(value);
+    }
+  }
+
+  protected abstract changeModelValue(value: boolean | null);
+}

projects/ui/src/lib/components/po-field/po-checkbox/po-checkbox.component.html

@@ -0,0 +1,22 @@
+<div class="po-checkbox">
+
+  <input
+    class="po-input po-checkbox-input"
+    type="checkbox"
+    [class.po-checkbox-input-checked]="checkboxValue"
+    [class.po-checkbox-input-indeterminate]="checkboxValue === null"
+    [checked]="checkboxValue"
+    [disabled]="disabled"
+    [id]="id"
+    [value]="checkboxValue">
+
+  <label #checkboxLabel
+    class="po-checkbox-label"
+    [class.po-clickable]="!disabled"
+    [for]="id"
+    [tabindex]="disabled ? -1 : 0"
+    (click)="checkOption(checkboxValue)"
+    (keydown)="onKeyDown($event, checkboxValue)">
+      {{ label }}
+  </label>
+</div>