ngx-opalbytes-components 1.26.0 → 1.27.0

package/README.md

@@ -238,6 +238,7 @@ src/
         |   ├── base-input/
         |   ├── base-time-range/
         |   ├── base-toggle/
+        |   ├── checkbox/
         |   ├── drop-down/
         |   ├── footer/
         |   ├── kpi/
@@ -1256,6 +1257,174 @@ compararUsuarios(a: Usuario | null, b: Usuario | null): boolean {
 
 ---
 
+### `CaoCheckboxComponent`
+
+Um checkbox acessível e customizável no estilo do Material, com suporte a `ngModel` e formulários reativos via `ControlValueAccessor`. Possui os estados marcado, desmarcado e indeterminado, ícones customizáveis e cores configuráveis por inputs ou CSS custom properties. O visual é construído sobre um `input type="checkbox"` nativo oculto, sem depender do Angular Material em runtime.
+
+**Seletor:** `<cao-checkbox>`
+
+**Interface `ICaoCheckboxChangeEvent`**
+
+| Propriedade | Tipo | Descrição |
+| --- | --- | --- |
+| `checked` | `boolean` | Novo estado do checkbox. |
+| `source` | `CaoCheckboxComponent` | Instância que originou o evento. |
+
+**Atributos (Inputs)**
+
+| Atributo | Tipo | Padrão | Descrição |
+| --- | --- | --- | --- |
+| `checked` | `boolean` | `false` | Estado inicial/atual do checkbox. |
+| `indeterminate` | `boolean` | `false` | Exibe o estado indeterminado (traço). Tem prioridade sobre `checked`. |
+| `isDisabled` | `boolean` | `false` | Desabilita o componente. |
+| `disabled` | `boolean` | `false` | Alias de `isDisabled` (mesmo comportamento). |
+| `required` | `boolean` | `false` | Marca o input nativo como obrigatório. |
+| `label` | `string` | `''` | Texto do label. Também aceita conteúdo projetado (`<ng-content>`). |
+| `labelPosition` | `'before' \| 'after'` | `'after'` | Posição do label em relação ao checkbox. |
+| `name` | `string` | `''` | Atributo `name` do input nativo. |
+| `id` | `string` | gerado automaticamente | Atributo `id` do input nativo. |
+| `ariaLabel` | `string` | `''` | Atributo `aria-label` do input. |
+| `ariaLabelledBy` | `string` | `''` | Atributo `aria-labelledby` do input. |
+| `dataCy` | `string` | `''` | Atributo para testes E2E com Cypress. |
+| `control` | `AbstractControl \| null` | `undefined` | O `FormControl` associado. Usado para exibir os estados de validação. |
+| `errorMessage` | `string` | `''` | Mensagem de erro. Quando preenchida, aplica o estilo inválido. |
+| `color` | `string` | `#4f46e5` | Cor de fundo/borda do checkbox marcado ou indeterminado. |
+| `uncheckedColor` | `string` | `#6b7280` | Cor da borda quando desmarcado. |
+| `disabledColor` | `string` | `#d1d5db` | Cor do checkbox desabilitado. |
+| `labelColor` | `string` | `#111827` | Cor do label. |
+| `disabledLabelColor` | `string` | `#9ca3af` | Cor do label desabilitado. |
+| `focusRingColor` | `string` | `rgba(79, 70, 229, 0.35)` | Cor do anel de foco. |
+| `size` | `string` | `20px` | Tamanho do checkbox. |
+| `borderRadius` | `string` | `4px` | Raio da borda do checkbox. |
+| `animationDuration` | `string` | `200ms` | Duração das animações. |
+| `checkedIcon` | `string` | `''` | Ícone exibido quando marcado. Se vazio, usa um check SVG padrão. |
+| `uncheckedIcon` | `string` | `''` | Ícone exibido quando desmarcado. Se vazio, nenhum ícone é exibido. |
+| `indeterminateIcon` | `string` | `''` | Ícone exibido no estado indeterminado. Se vazio, usa um traço SVG padrão. |
+| `isLucideIcon` | `boolean` | `false` | Interpreta os ícones como nomes Lucide. Quando `false`, usa `<img>` (URL ou data URI). |
+| `iconColor` | `string` | `''` | Cor dos ícones Lucide (fallback para todos os estados). |
+| `checkedIconColor` | `string` | `''` | Cor do ícone quando marcado. Se vazio, usa `iconColor`. |
+| `uncheckedIconColor` | `string` | `''` | Cor do ícone quando desmarcado. Se vazio, usa `iconColor`. |
+| `iconSize` | `string \| number` | `14` | Tamanho do ícone. Números são convertidos para `px`. |
+| `iconStrokeWidth` | `string \| number` | `2.5` | Espessura do traço dos ícones Lucide. |
+
+**Eventos (Outputs)**
+
+| Evento | Tipo | Descrição |
+| --- | --- | --- |
+| `checkedChange` | `EventEmitter<boolean>` | Emitido quando o estado marcado muda. |
+| `indeterminateChange` | `EventEmitter<boolean>` | Emitido quando o estado indeterminado muda. |
+| `checkboxChange` | `EventEmitter<ICaoCheckboxChangeEvent>` | Emitido com o novo estado e a origem. |
+
+**Métodos**
+
+| Método | Descrição |
+| --- | --- |
+| `toggle()` | Alterna o estado, se não estiver desabilitado. |
+| `setChecked(value: boolean, emit = true)` | Define o estado programaticamente e limpa `indeterminate`. Passe `false` em `emit` para não disparar os eventos. |
+| `setIndeterminate(value: boolean)` | Define o estado indeterminado. |
+| `enable()` | Habilita o componente. |
+| `disable()` | Desabilita o componente. |
+| `writeValue(value)` | Implementação de `ControlValueAccessor`. |
+| `setDisabledState(isDisabled)` | Implementação de `ControlValueAccessor`. |
+
+**CSS Custom Properties**
+
+| Propriedade | Padrão | Descrição |
+| --- | --- | --- |
+| `--cao-checkbox-color` | `#4f46e5` | Cor do checkbox marcado/indeterminado. |
+| `--cao-checkbox-unselected` | `#6b7280` | Cor da borda desmarcada. |
+| `--cao-checkbox-disabled` | `#d1d5db` | Cor do checkbox desabilitado. |
+| `--cao-checkbox-label` | `#111827` | Cor do label. |
+| `--cao-checkbox-label-disabled` | `#9ca3af` | Cor do label desabilitado. |
+| `--cao-checkbox-focus-ring` | `rgba(79, 70, 229, 0.35)` | Cor do anel de foco. |
+| `--cao-checkbox-size` | `20px` | Tamanho do checkbox. |
+| `--cao-checkbox-radius` | `4px` | Raio da borda. |
+| `--cao-checkbox-duration` | `200ms` | Duração das animações. |
+| `--cao-checkbox-icon-size` | `14px` | Tamanho do ícone. |
+| `--cao-checkbox-icon-color` | `#ffffff` | Cor do ícone. |
+
+**Exemplo com `ngModel`:**
+
+```html
+<cao-checkbox
+  label="Aceito os termos"
+  [(ngModel)]="aceitoTermos"
+  (checkedChange)="onCheckedChange($event)">
+</cao-checkbox>
+```
+
+**Exemplo com formulário reativo, validação e estado indeterminado:**
+
+```html
+<cao-checkbox
+  label="Selecionar todos"
+  [formControl]="selecionarTodos"
+  [indeterminate]="algunsSelecionados"
+  [control]="selecionarTodos"
+  errorMessage="Selecione ao menos uma opção">
+</cao-checkbox>
+```
+
+```typescript
+selecionarTodos = new FormControl(false, { validators: Validators.requiredTrue });
+algunsSelecionados = false;
+```
+
+**Exemplo com cores customizadas e label antes:**
+
+```html
+<cao-checkbox
+  label="Modo escuro"
+  labelPosition="before"
+  color="#16a34a"
+  uncheckedColor="#94a3b8"
+  labelColor="#166534"
+  size="24px"
+  borderRadius="6px">
+</cao-checkbox>
+```
+
+**Exemplo com ícones Lucide:**
+
+```html
+<cao-checkbox
+  label="Notificações"
+  [(ngModel)]="notificacoesAtivas"
+  checkedIcon="check"
+  indeterminateIcon="minus"
+  uncheckedIcon="x"
+  [isLucideIcon]="true"
+  iconColor="#6b7280"
+  checkedIconColor="#16a34a"
+  [iconSize]="16"
+  [iconStrokeWidth]="2.5">
+</cao-checkbox>
+```
+
+**Exemplo com imagem/data URI nos ícones:**
+
+```html
+<cao-checkbox
+  label="Ícone customizado"
+  [(ngModel)]="customizado"
+  checkedIcon="assets/icone-marcado.svg"
+  indeterminateIcon="assets/icone-indeterminado.svg"
+  [isLucideIcon]="false"
+  [iconSize]="12">
+</cao-checkbox>
+```
+
+**Observações:**
+
+- Usa um `input type="checkbox"` nativo oculto, mantendo clique no label, foco, navegação por teclado e suporte a leitores de tela.
+- O estado `indeterminate` tem prioridade visual sobre `checked`; ao alternar o checkbox, `indeterminate` é limpo e `indeterminateChange(false)` é emitido.
+- Funciona com `ngModel`, `formControlName` e `FormControl.disable()`.
+- Os estados `--invalid` e `--valid` são aplicados quando `control.touched` e o controle está inválido/válido; `errorMessage` também força o estilo inválido.
+- Para ícones Lucide, registre os ícones usados com `provideLucideIcons` (de `@lucide/angular`). Para imagens, informe uma URL ou data URI e mantenha `isLucideIcon` como `false`.
+- As cores e dimensões podem ser definidas por inputs ou sobrescritas via CSS custom properties.
+
+---
+
 ### `DropDown`
 Um menu suspenso (dropdown) com busca, que funciona com `ngModel` ou `formControlName`.
 

package/fesm2022/ngx-opalbytes-components.mjs

@@ -2942,6 +2942,274 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                 args: ["style"]
             }] } });
 
+let nextCheckboxId = 0;
+class CaoCheckboxComponent {
+    checked = false;
+    indeterminate = false;
+    isDisabled = false;
+    required = false;
+    label = "";
+    labelPosition = "after";
+    name = "";
+    id = "";
+    ariaLabel = "";
+    ariaLabelledBy = "";
+    dataCy = "";
+    control;
+    errorMessage = "";
+    color;
+    uncheckedColor;
+    disabledColor;
+    labelColor;
+    disabledLabelColor;
+    focusRingColor;
+    size;
+    borderRadius;
+    animationDuration;
+    checkedIcon = "";
+    uncheckedIcon = "";
+    indeterminateIcon = "";
+    isLucideIcon = false;
+    iconColor = "";
+    checkedIconColor = "";
+    uncheckedIconColor = "";
+    iconSize = 14;
+    iconStrokeWidth = 2.5;
+    set disabled(value) {
+        this.isDisabled = value;
+        this.cdr.markForCheck();
+    }
+    get disabled() {
+        return this.isDisabled;
+    }
+    checkedChange = new EventEmitter();
+    indeterminateChange = new EventEmitter();
+    checkboxChange = new EventEmitter();
+    cdr = inject(ChangeDetectorRef);
+    uid = `cao-checkbox-${nextCheckboxId++}`;
+    controlSub;
+    onChange = () => { };
+    onTouched = () => { };
+    ngOnChanges(changes) {
+        if (changes["control"]) {
+            this.controlSub?.unsubscribe();
+            this.controlSub = this.control?.statusChanges.subscribe(() => this.cdr.markForCheck());
+        }
+    }
+    ngOnDestroy() {
+        this.controlSub?.unsubscribe();
+    }
+    get inputId() {
+        return this.id || this.uid;
+    }
+    get hasError() {
+        return !!this.errorMessage;
+    }
+    get hasInvalidState() {
+        return !!(this.control?.touched && this.control?.invalid);
+    }
+    get hasValidState() {
+        return !!(this.control?.touched && this.control?.valid);
+    }
+    get resolvedIconColor() {
+        if (this.indeterminate) {
+            return this.iconColor || this.checkedIconColor;
+        }
+        return this.checked
+            ? this.checkedIconColor || this.iconColor
+            : this.uncheckedIconColor || this.iconColor;
+    }
+    get hostStyles() {
+        const styles = {};
+        if (this.color) {
+            styles["--cao-checkbox-color"] = this.color;
+        }
+        if (this.uncheckedColor) {
+            styles["--cao-checkbox-unselected"] = this.uncheckedColor;
+        }
+        if (this.disabledColor) {
+            styles["--cao-checkbox-disabled"] = this.disabledColor;
+        }
+        if (this.labelColor) {
+            styles["--cao-checkbox-label"] = this.labelColor;
+        }
+        if (this.disabledLabelColor) {
+            styles["--cao-checkbox-label-disabled"] = this.disabledLabelColor;
+        }
+        if (this.focusRingColor) {
+            styles["--cao-checkbox-focus-ring"] = this.focusRingColor;
+        }
+        if (this.size) {
+            styles["--cao-checkbox-size"] = this.size;
+        }
+        if (this.borderRadius) {
+            styles["--cao-checkbox-radius"] = this.borderRadius;
+        }
+        if (this.animationDuration) {
+            styles["--cao-checkbox-duration"] = this.animationDuration;
+        }
+        if (this.resolvedIconColor) {
+            styles["--cao-checkbox-icon-color"] = this.resolvedIconColor;
+        }
+        styles["--cao-checkbox-icon-size"] = this.toCssLength(this.iconSize);
+        return styles;
+    }
+    toggle() {
+        if (this.isDisabled) {
+            return;
+        }
+        this.setChecked(!this.checked, true);
+    }
+    setChecked(value, emit = true) {
+        if (this.isDisabled) {
+            return;
+        }
+        const wasIndeterminate = this.indeterminate;
+        this.checked = value;
+        this.indeterminate = false;
+        this.onChange(value);
+        if (emit) {
+            this.checkedChange.emit(value);
+            this.checkboxChange.emit({ checked: value, source: this });
+        }
+        if (wasIndeterminate) {
+            this.indeterminateChange.emit(false);
+        }
+        this.cdr.markForCheck();
+    }
+    setIndeterminate(value) {
+        if (this.isDisabled || this.indeterminate === value) {
+            return;
+        }
+        this.indeterminate = value;
+        this.indeterminateChange.emit(value);
+        this.cdr.markForCheck();
+    }
+    enable() {
+        this.isDisabled = false;
+        this.cdr.markForCheck();
+    }
+    disable() {
+        this.isDisabled = true;
+        this.cdr.markForCheck();
+    }
+    onInputChange(event) {
+        const target = event.target;
+        this.setChecked(target.checked, true);
+    }
+    onBlur() {
+        this.onTouched();
+    }
+    writeValue(value) {
+        this.checked = !!value;
+        this.cdr.markForCheck();
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.isDisabled = isDisabled;
+        this.cdr.markForCheck();
+    }
+    toCssLength(value) {
+        return typeof value === "number" ? `${value}px` : value;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CaoCheckboxComponent, isStandalone: true, selector: "cao-checkbox", inputs: { checked: "checked", indeterminate: "indeterminate", isDisabled: "isDisabled", required: "required", label: "label", labelPosition: "labelPosition", name: "name", id: "id", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", dataCy: "dataCy", control: "control", errorMessage: "errorMessage", color: "color", uncheckedColor: "uncheckedColor", disabledColor: "disabledColor", labelColor: "labelColor", disabledLabelColor: "disabledLabelColor", focusRingColor: "focusRingColor", size: "size", borderRadius: "borderRadius", animationDuration: "animationDuration", checkedIcon: "checkedIcon", uncheckedIcon: "uncheckedIcon", indeterminateIcon: "indeterminateIcon", isLucideIcon: "isLucideIcon", iconColor: "iconColor", checkedIconColor: "checkedIconColor", uncheckedIconColor: "uncheckedIconColor", iconSize: "iconSize", iconStrokeWidth: "iconStrokeWidth", disabled: "disabled" }, outputs: { checkedChange: "checkedChange", indeterminateChange: "indeterminateChange", checkboxChange: "checkboxChange" }, host: { properties: { "style": "this.hostStyles" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => CaoCheckboxComponent),
+                multi: true,
+            },
+        ], usesOnChanges: true, ngImport: i0, template: "<label\n  class=\"cao-checkbox\"\n  [class.cao-checkbox--checked]=\"checked && !indeterminate\"\n  [class.cao-checkbox--indeterminate]=\"indeterminate\"\n  [class.cao-checkbox--disabled]=\"isDisabled\"\n  [class.cao-checkbox--label-before]=\"labelPosition === 'before'\"\n  [class.cao-checkbox--invalid]=\"hasInvalidState\"\n  [class.cao-checkbox--valid]=\"hasValidState\">\n  <input\n    #input\n    class=\"cao-checkbox__input\"\n    type=\"checkbox\"\n    [checked]=\"checked\"\n    [indeterminate]=\"indeterminate\"\n    [disabled]=\"isDisabled\"\n    [required]=\"required\"\n    [attr.name]=\"name || null\"\n    [attr.id]=\"inputId\"\n    [attr.aria-label]=\"ariaLabel || null\"\n    [attr.aria-labelledby]=\"ariaLabelledBy || null\"\n    [attr.data-cy]=\"dataCy || null\"\n    (change)=\"onInputChange($event)\"\n    (blur)=\"onBlur()\" />\n\n  <span class=\"cao-checkbox__control\" aria-hidden=\"true\">\n    @if (indeterminate) {\n      @if (indeterminateIcon) {\n        @if (isLucideIcon) {\n          <svg\n            class=\"cao-checkbox__icon\"\n            [lucideIcon]=\"indeterminateIcon\"\n            [size]=\"iconSize\"\n            [strokeWidth]=\"iconStrokeWidth\"></svg>\n        } @else {\n          <img class=\"cao-checkbox__icon\" alt=\"\" [src]=\"indeterminateIcon\" />\n        }\n      } @else {\n        <svg\n          class=\"cao-checkbox__icon cao-checkbox__icon--default\"\n          viewBox=\"0 0 24 24\"\n          aria-hidden=\"true\">\n          <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\" />\n        </svg>\n      }\n    } @else if (checked) {\n      @if (checkedIcon) {\n        @if (isLucideIcon) {\n          <svg\n            class=\"cao-checkbox__icon\"\n            [lucideIcon]=\"checkedIcon\"\n            [size]=\"iconSize\"\n            [strokeWidth]=\"iconStrokeWidth\"></svg>\n        } @else {\n          <img class=\"cao-checkbox__icon\" alt=\"\" [src]=\"checkedIcon\" />\n        }\n      } @else {\n        <svg\n          class=\"cao-checkbox__icon cao-checkbox__icon--default\"\n          viewBox=\"0 0 24 24\"\n          aria-hidden=\"true\">\n          <polyline points=\"20 6 9 17 4 12\" />\n        </svg>\n      }\n    } @else if (uncheckedIcon) {\n      @if (isLucideIcon) {\n        <svg\n          class=\"cao-checkbox__icon\"\n          [lucideIcon]=\"uncheckedIcon\"\n          [size]=\"iconSize\"\n          [strokeWidth]=\"iconStrokeWidth\"></svg>\n      } @else {\n        <img class=\"cao-checkbox__icon\" alt=\"\" [src]=\"uncheckedIcon\" />\n      }\n    }\n  </span>\n\n  <span class=\"cao-checkbox__label\">\n    @if (label) {\n      {{ label }}\n    } @else {\n      <ng-content />\n    }\n  </span>\n</label>\n", styles: [":host{--cao-checkbox-color: #4f46e5;--cao-checkbox-unselected: #6b7280;--cao-checkbox-disabled: #d1d5db;--cao-checkbox-label: #111827;--cao-checkbox-label-disabled: #9ca3af;--cao-checkbox-focus-ring: rgba(79, 70, 229, .35);--cao-checkbox-size: 20px;--cao-checkbox-radius: 4px;--cao-checkbox-duration: .2s;--cao-checkbox-icon-size: 14px;--cao-checkbox-icon-color: #ffffff;display:inline-flex}.cao-checkbox{display:inline-flex;align-items:center;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none}.cao-checkbox--disabled{cursor:not-allowed}.cao-checkbox__input{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}.cao-checkbox__control{display:inline-flex;align-items:center;justify-content:center;flex:none;box-sizing:border-box;width:var(--cao-checkbox-size);height:var(--cao-checkbox-size);border:2px solid var(--cao-checkbox-unselected);border-radius:var(--cao-checkbox-radius);background-color:transparent;transition:background-color var(--cao-checkbox-duration) ease,border-color var(--cao-checkbox-duration) ease}.cao-checkbox__icon{flex:none;width:var(--cao-checkbox-icon-size);height:var(--cao-checkbox-icon-size);color:var(--cao-checkbox-icon-color);pointer-events:none;object-fit:contain}.cao-checkbox__icon--default{fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}.cao-checkbox__label{color:var(--cao-checkbox-label);font-size:.875rem;line-height:1.25rem}.cao-checkbox__label:empty{display:none}.cao-checkbox:not(.cao-checkbox--disabled):hover .cao-checkbox__control{border-color:var(--cao-checkbox-color)}.cao-checkbox--checked .cao-checkbox__control,.cao-checkbox--indeterminate .cao-checkbox__control{border-color:var(--cao-checkbox-color);background-color:var(--cao-checkbox-color)}.cao-checkbox--invalid .cao-checkbox__control{border-color:var(--error, #dc2626)}.cao-checkbox--valid .cao-checkbox__control{border-color:var(--success, #16a34a)}.cao-checkbox--disabled .cao-checkbox__control{border-color:var(--cao-checkbox-disabled);background-color:transparent}.cao-checkbox--disabled.cao-checkbox--checked .cao-checkbox__control,.cao-checkbox--disabled.cao-checkbox--indeterminate .cao-checkbox__control{background-color:var(--cao-checkbox-disabled)}.cao-checkbox--disabled .cao-checkbox__icon{opacity:.65}.cao-checkbox--disabled .cao-checkbox__label{color:var(--cao-checkbox-label-disabled)}.cao-checkbox__input:focus-visible+.cao-checkbox__control{box-shadow:0 0 0 3px var(--cao-checkbox-focus-ring)}.cao-checkbox--label-before .cao-checkbox__control{order:2}.cao-checkbox--label-before .cao-checkbox__label{order:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: LucideDynamicIcon, selector: "svg[lucideIcon]", inputs: ["lucideIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoCheckboxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "cao-checkbox", standalone: true, imports: [CommonModule, LucideDynamicIcon], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => CaoCheckboxComponent),
+                            multi: true,
+                        },
+                    ], template: "<label\n  class=\"cao-checkbox\"\n  [class.cao-checkbox--checked]=\"checked && !indeterminate\"\n  [class.cao-checkbox--indeterminate]=\"indeterminate\"\n  [class.cao-checkbox--disabled]=\"isDisabled\"\n  [class.cao-checkbox--label-before]=\"labelPosition === 'before'\"\n  [class.cao-checkbox--invalid]=\"hasInvalidState\"\n  [class.cao-checkbox--valid]=\"hasValidState\">\n  <input\n    #input\n    class=\"cao-checkbox__input\"\n    type=\"checkbox\"\n    [checked]=\"checked\"\n    [indeterminate]=\"indeterminate\"\n    [disabled]=\"isDisabled\"\n    [required]=\"required\"\n    [attr.name]=\"name || null\"\n    [attr.id]=\"inputId\"\n    [attr.aria-label]=\"ariaLabel || null\"\n    [attr.aria-labelledby]=\"ariaLabelledBy || null\"\n    [attr.data-cy]=\"dataCy || null\"\n    (change)=\"onInputChange($event)\"\n    (blur)=\"onBlur()\" />\n\n  <span class=\"cao-checkbox__control\" aria-hidden=\"true\">\n    @if (indeterminate) {\n      @if (indeterminateIcon) {\n        @if (isLucideIcon) {\n          <svg\n            class=\"cao-checkbox__icon\"\n            [lucideIcon]=\"indeterminateIcon\"\n            [size]=\"iconSize\"\n            [strokeWidth]=\"iconStrokeWidth\"></svg>\n        } @else {\n          <img class=\"cao-checkbox__icon\" alt=\"\" [src]=\"indeterminateIcon\" />\n        }\n      } @else {\n        <svg\n          class=\"cao-checkbox__icon cao-checkbox__icon--default\"\n          viewBox=\"0 0 24 24\"\n          aria-hidden=\"true\">\n          <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\" />\n        </svg>\n      }\n    } @else if (checked) {\n      @if (checkedIcon) {\n        @if (isLucideIcon) {\n          <svg\n            class=\"cao-checkbox__icon\"\n            [lucideIcon]=\"checkedIcon\"\n            [size]=\"iconSize\"\n            [strokeWidth]=\"iconStrokeWidth\"></svg>\n        } @else {\n          <img class=\"cao-checkbox__icon\" alt=\"\" [src]=\"checkedIcon\" />\n        }\n      } @else {\n        <svg\n          class=\"cao-checkbox__icon cao-checkbox__icon--default\"\n          viewBox=\"0 0 24 24\"\n          aria-hidden=\"true\">\n          <polyline points=\"20 6 9 17 4 12\" />\n        </svg>\n      }\n    } @else if (uncheckedIcon) {\n      @if (isLucideIcon) {\n        <svg\n          class=\"cao-checkbox__icon\"\n          [lucideIcon]=\"uncheckedIcon\"\n          [size]=\"iconSize\"\n          [strokeWidth]=\"iconStrokeWidth\"></svg>\n      } @else {\n        <img class=\"cao-checkbox__icon\" alt=\"\" [src]=\"uncheckedIcon\" />\n      }\n    }\n  </span>\n\n  <span class=\"cao-checkbox__label\">\n    @if (label) {\n      {{ label }}\n    } @else {\n      <ng-content />\n    }\n  </span>\n</label>\n", styles: [":host{--cao-checkbox-color: #4f46e5;--cao-checkbox-unselected: #6b7280;--cao-checkbox-disabled: #d1d5db;--cao-checkbox-label: #111827;--cao-checkbox-label-disabled: #9ca3af;--cao-checkbox-focus-ring: rgba(79, 70, 229, .35);--cao-checkbox-size: 20px;--cao-checkbox-radius: 4px;--cao-checkbox-duration: .2s;--cao-checkbox-icon-size: 14px;--cao-checkbox-icon-color: #ffffff;display:inline-flex}.cao-checkbox{display:inline-flex;align-items:center;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none}.cao-checkbox--disabled{cursor:not-allowed}.cao-checkbox__input{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}.cao-checkbox__control{display:inline-flex;align-items:center;justify-content:center;flex:none;box-sizing:border-box;width:var(--cao-checkbox-size);height:var(--cao-checkbox-size);border:2px solid var(--cao-checkbox-unselected);border-radius:var(--cao-checkbox-radius);background-color:transparent;transition:background-color var(--cao-checkbox-duration) ease,border-color var(--cao-checkbox-duration) ease}.cao-checkbox__icon{flex:none;width:var(--cao-checkbox-icon-size);height:var(--cao-checkbox-icon-size);color:var(--cao-checkbox-icon-color);pointer-events:none;object-fit:contain}.cao-checkbox__icon--default{fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}.cao-checkbox__label{color:var(--cao-checkbox-label);font-size:.875rem;line-height:1.25rem}.cao-checkbox__label:empty{display:none}.cao-checkbox:not(.cao-checkbox--disabled):hover .cao-checkbox__control{border-color:var(--cao-checkbox-color)}.cao-checkbox--checked .cao-checkbox__control,.cao-checkbox--indeterminate .cao-checkbox__control{border-color:var(--cao-checkbox-color);background-color:var(--cao-checkbox-color)}.cao-checkbox--invalid .cao-checkbox__control{border-color:var(--error, #dc2626)}.cao-checkbox--valid .cao-checkbox__control{border-color:var(--success, #16a34a)}.cao-checkbox--disabled .cao-checkbox__control{border-color:var(--cao-checkbox-disabled);background-color:transparent}.cao-checkbox--disabled.cao-checkbox--checked .cao-checkbox__control,.cao-checkbox--disabled.cao-checkbox--indeterminate .cao-checkbox__control{background-color:var(--cao-checkbox-disabled)}.cao-checkbox--disabled .cao-checkbox__icon{opacity:.65}.cao-checkbox--disabled .cao-checkbox__label{color:var(--cao-checkbox-label-disabled)}.cao-checkbox__input:focus-visible+.cao-checkbox__control{box-shadow:0 0 0 3px var(--cao-checkbox-focus-ring)}.cao-checkbox--label-before .cao-checkbox__control{order:2}.cao-checkbox--label-before .cao-checkbox__label{order:1}\n"] }]
+        }], propDecorators: { checked: [{
+                type: Input
+            }], indeterminate: [{
+                type: Input
+            }], isDisabled: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], labelPosition: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], ariaLabel: [{
+                type: Input
+            }], ariaLabelledBy: [{
+                type: Input
+            }], dataCy: [{
+                type: Input
+            }], control: [{
+                type: Input
+            }], errorMessage: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], uncheckedColor: [{
+                type: Input
+            }], disabledColor: [{
+                type: Input
+            }], labelColor: [{
+                type: Input
+            }], disabledLabelColor: [{
+                type: Input
+            }], focusRingColor: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], borderRadius: [{
+                type: Input
+            }], animationDuration: [{
+                type: Input
+            }], checkedIcon: [{
+                type: Input
+            }], uncheckedIcon: [{
+                type: Input
+            }], indeterminateIcon: [{
+                type: Input
+            }], isLucideIcon: [{
+                type: Input
+            }], iconColor: [{
+                type: Input
+            }], checkedIconColor: [{
+                type: Input
+            }], uncheckedIconColor: [{
+                type: Input
+            }], iconSize: [{
+                type: Input
+            }], iconStrokeWidth: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], checkedChange: [{
+                type: Output
+            }], indeterminateChange: [{
+                type: Output
+            }], checkboxChange: [{
+                type: Output
+            }], hostStyles: [{
+                type: HostBinding,
+                args: ["style"]
+            }] } });
+
 class BaseModalService {
     constructor() { }
     toggleModalEvent = new EventEmitter();
@@ -4243,5 +4511,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { BaseAlert, BaseAlertService, BaseDialog, BaseDialogService, BaseFilterTablePaginatedService, BaseFilterTableService, BaseModal, BaseModalService, BasePaginationService, BaseTable, BaseTablePaginated, BaseTableService, BaseTimeRange, CaoAutocompleteComponent, CaoBaseButtonComponent, CaoBaseIcon, CaoBaseInput, CaoBaseToggleComponent, CaoBaseWidgetComponent, CaoCardComponent, CaoDropDownComponent, CaoError, CaoFormField, CaoHint, CaoKpi, CaoRadioButtonComponent, CaoRadioGroupComponent, CaoSkeletonComponent, CaoSlideToggleComponent, CaoTabGroup, CaoTabPanel, CaoWidgetService, DEFAULT_ERROR_STATE_MATCHER, ErrorStateMatcher, Footer, LinksButton, Paginator, ShowOnDirtyErrorStateMatcher, StepComponent, StepperComponent, TablePaginatedService, TimePicker, getPtBrPaginatorIntlBasePaginated, getPtBrPaginatorIntlBaseTable };
+export { BaseAlert, BaseAlertService, BaseDialog, BaseDialogService, BaseFilterTablePaginatedService, BaseFilterTableService, BaseModal, BaseModalService, BasePaginationService, BaseTable, BaseTablePaginated, BaseTableService, BaseTimeRange, CaoAutocompleteComponent, CaoBaseButtonComponent, CaoBaseIcon, CaoBaseInput, CaoBaseToggleComponent, CaoBaseWidgetComponent, CaoCardComponent, CaoCheckboxComponent, CaoDropDownComponent, CaoError, CaoFormField, CaoHint, CaoKpi, CaoRadioButtonComponent, CaoRadioGroupComponent, CaoSkeletonComponent, CaoSlideToggleComponent, CaoTabGroup, CaoTabPanel, CaoWidgetService, DEFAULT_ERROR_STATE_MATCHER, ErrorStateMatcher, Footer, LinksButton, Paginator, ShowOnDirtyErrorStateMatcher, StepComponent, StepperComponent, TablePaginatedService, TimePicker, getPtBrPaginatorIntlBasePaginated, getPtBrPaginatorIntlBaseTable };
 //# sourceMappingURL=ngx-opalbytes-components.mjs.map