@po-ui/ng-components 6.7.0 → 6.8.0

package/fesm2020/po-ui-ng-components.mjs

@@ -17034,10 +17034,18 @@ var PoKeyCodeEnum;
  * 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
+ * Cada opção poderá receber um estado de marcado, desmarcado, indeterminado/mixed 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.
+ * > O *model* deste componente aceitará valores igual à `true`, `false` ou `null` para quando for indeterminado/mixed.
+ *
+ * **Acessibilidade tratada no componente:**
+ *
+ * Algumas diretrizes de acessibilidade já são tratadas no componente, internamente, e não podem ser alteradas pelo proprietário do conteúdo. São elas:
+ *
+ * - O componente foi desenvolvido utilizando controles padrões HTML para permitir a identificação do mesmo na interface por tecnologias assistivas. [WCAG 4.1.2: Name, Role, Value](https://www.w3.org/WAI/WCAG21/Understanding/name-role-value)
+ * - A área do foco precisar ter uma espessura de pelo menos 2 pixels CSS e o foco não pode ficar escondido por outros elementos da tela. [WCAG 2.4.12: Focus Appearance](https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance-enhanced)
+ * - A cor não deve ser o único meio para diferenciar o componente do seu estado marcado e desmarcado. [WGAG 1.4.1: Use of Color, 3.2.4: Consistent Identification](https://www.w3.org/WAI/WCAG21/Understanding/use-of-color)
  */
 class PoCheckboxBaseComponent {
     constructor() {
@@ -17087,7 +17095,7 @@ class PoCheckboxBaseComponent {
     }
     checkOption(value) {
         if (!this.disabled) {
-            this.changeModelValue(!value);
+            value === 'mixed' ? this.changeModelValue(true) : this.changeModelValue(!value);
             this.changeValue();
         }
     }
@@ -17197,7 +17205,12 @@ class PoCheckboxComponent extends PoCheckboxBaseComponent {
         }
     }
     changeModelValue(value) {
-        this.checkboxValue = typeof value === 'boolean' || value === null ? value : false;
+        if (value === null) {
+            this.checkboxValue = 'mixed';
+        }
+        else {
+            this.checkboxValue = typeof value === 'boolean' || value === null ? value : false;
+        }
         this.changeDetector.detectChanges();
     }
 }
@@ -17213,20 +17226,20 @@ PoCheckboxComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoCheck
                 useExisting: forwardRef(() => PoCheckboxComponent),
                 multi: true
             }
-        ]), i0.ɵɵInheritDefinitionFeature], decls: 5, vars: 13, consts: [[1, "po-checkbox"], ["type", "checkbox", 1, "po-input", "po-checkbox-input", 3, "checked", "disabled", "id", "value"], [1, "po-checkbox-label", 3, "for", "tabindex", "blur", "click", "keydown"], ["checkboxLabel", ""]], template: function PoCheckboxComponent_Template(rf, ctx) { if (rf & 1) {
+        ]), i0.ɵɵInheritDefinitionFeature], decls: 5, vars: 8, consts: [[1, "container-po-checkbox", 3, "click", "keydown"], ["role", "checkbox", 1, "po-checkbox", 3, "id", "tabindex"], ["tabindex", "-1", 1, "po-checkbox-label", 3, "for"], ["checkboxLabel", ""]], template: function PoCheckboxComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵelementStart(0, "div", 0);
-        i0.ɵɵelement(1, "input", 1);
+        i0.ɵɵlistener("click", function PoCheckboxComponent_Template_div_click_0_listener() { return ctx.checkOption(ctx.checkboxValue); })("keydown", function PoCheckboxComponent_Template_div_keydown_0_listener($event) { return ctx.onKeyDown($event, ctx.checkboxValue); });
+        i0.ɵɵelement(1, "span", 1);
         i0.ɵɵelementStart(2, "label", 2, 3);
-        i0.ɵɵlistener("blur", function PoCheckboxComponent_Template_label_blur_2_listener() { return ctx.onBlur(); })("click", function PoCheckboxComponent_Template_label_click_2_listener() { return ctx.checkOption(ctx.checkboxValue); })("keydown", function PoCheckboxComponent_Template_label_keydown_2_listener($event) { return ctx.onKeyDown($event, ctx.checkboxValue); });
         i0.ɵɵtext(4);
         i0.ɵɵelementEnd()();
     } if (rf & 2) {
+        i0.ɵɵattribute("checked", ctx.checkboxValue);
         i0.ɵɵadvance(1);
-        i0.ɵɵclassProp("po-checkbox-input-checked", ctx.checkboxValue)("po-checkbox-input-indeterminate", ctx.checkboxValue === null);
-        i0.ɵɵproperty("checked", ctx.checkboxValue)("disabled", ctx.disabled)("id", ctx.id)("value", ctx.checkboxValue);
+        i0.ɵɵproperty("id", ctx.id)("tabindex", ctx.disabled ? -1 : 0);
+        i0.ɵɵattribute("aria-checked", ctx.checkboxValue)("aria-label", ctx.label)("aria-disabled", ctx.disabled);
         i0.ɵɵadvance(1);
-        i0.ɵɵclassProp("po-clickable", !ctx.disabled);
-        i0.ɵɵproperty("for", ctx.id)("tabindex", ctx.disabled ? -1 : 0);
+        i0.ɵɵproperty("for", ctx.id);
         i0.ɵɵadvance(2);
         i0.ɵɵtextInterpolate1(" ", ctx.label, " ");
     } }, encapsulation: 2, changeDetection: 0 });
@@ -17238,7 +17251,7 @@ PoCheckboxComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoCheck
                         useExisting: forwardRef(() => PoCheckboxComponent),
                         multi: true
                     }
-                ], template: "<div class=\"po-checkbox\">\n  <input\n    class=\"po-input po-checkbox-input\"\n    type=\"checkbox\"\n    [class.po-checkbox-input-checked]=\"checkboxValue\"\n    [class.po-checkbox-input-indeterminate]=\"checkboxValue === null\"\n    [checked]=\"checkboxValue\"\n    [disabled]=\"disabled\"\n    [id]=\"id\"\n    [value]=\"checkboxValue\"\n  />\n\n  <label\n    #checkboxLabel\n    class=\"po-checkbox-label\"\n    [class.po-clickable]=\"!disabled\"\n    [for]=\"id\"\n    [tabindex]=\"disabled ? -1 : 0\"\n    (blur)=\"onBlur()\"\n    (click)=\"checkOption(checkboxValue)\"\n    (keydown)=\"onKeyDown($event, checkboxValue)\"\n  >\n    {{ label }}\n  </label>\n</div>\n" }]
+                ], template: "<div\n  class=\"container-po-checkbox\"\n  [attr.checked]=\"checkboxValue\"\n  (click)=\"checkOption(checkboxValue)\"\n  (keydown)=\"onKeyDown($event, checkboxValue)\"\n>\n  <span\n    [attr.aria-checked]=\"checkboxValue\"\n    [attr.aria-label]=\"label\"\n    [id]=\"id\"\n    class=\"po-checkbox\"\n    role=\"checkbox\"\n    [attr.aria-disabled]=\"disabled\"\n    [tabindex]=\"disabled ? -1 : 0\"\n  >\n  </span>\n\n  <label #checkboxLabel [for]=\"id\" class=\"po-checkbox-label\" tabindex=\"-1\">\n    {{ label }}\n  </label>\n</div>\n" }]
     }], function () { return [{ type: i0.ChangeDetectorRef }]; }, { checkboxLabel: [{
             type: ViewChild,
             args: ['checkboxLabel', { static: true }]