ngx-opalbytes-components 1.26.0 → 1.28.0

package/fesm2022/ngx-opalbytes-components.mjs

@@ -1,7 +1,7 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, ElementRef, input, computed, forwardRef, HostListener, HostBinding, ChangeDetectionStrategy, Component, DestroyRef, model, output, effect, untracked, EventEmitter, Input, Output, ViewChild, ChangeDetectorRef, Renderer2, ViewContainerRef, ViewEncapsulation, NgModule, ContentChildren, Directive, TemplateRef, ContentChild, signal, PLATFORM_ID, ViewChildren, Optional, Inject, Injectable } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule, isPlatformBrowser, NgTemplateOutlet, NgOptimizedImage } from '@angular/common';
-import * as i0 from '@angular/core';
-import { EventEmitter, Input, Output, Component, ViewChild, inject, ElementRef, ChangeDetectorRef, Renderer2, ViewContainerRef, forwardRef, HostListener, ChangeDetectionStrategy, ViewEncapsulation, NgModule, ContentChildren, Directive, TemplateRef, ContentChild, signal, PLATFORM_ID, ViewChildren, HostBinding, input, computed, Optional, Inject, Injectable, output, DestroyRef } from '@angular/core';
 import * as i3 from '@angular/material/tooltip';
 import { MatTooltipModule, MatTooltip } from '@angular/material/tooltip';
 import { LucideDynamicIcon } from '@lucide/angular';
@@ -60,6 +60,297 @@ import { MatTreeModule } from '@angular/material/tree';
 import { LiveAnnouncer } from '@angular/cdk/a11y';
 import { SelectionModel } from '@angular/cdk/collections';
 
+const CAO_ACCORDION = new InjectionToken('CAO_ACCORDION');
+
+const HEADER_SELECTOR = '.cao-accordion-item__header:not(:disabled)';
+/**
+ * Container de `<cao-accordion-item>`. Controla o modo de expansão (único ou múltiplo),
+ * a navegação por teclado e o tema (cores, posições e visibilidade) herdado pelos itens.
+ */
+class CaoAccordionComponent {
+    host = inject(ElementRef);
+    items = new Set();
+    // ----- Comportamento -----
+    /** Permite vários itens expandidos ao mesmo tempo. */
+    multi = input(false, ...(ngDevMode ? [{ debugName: "multi" }] : []));
+    /** Oculta o ícone de expandir/recolher em todos os itens (cada item pode sobrescrever). */
+    hideToggle = input(false, ...(ngDevMode ? [{ debugName: "hideToggle" }] : []));
+    /** Exibe ou oculta o accordion inteiro. */
+    isVisible = input(true, ...(ngDevMode ? [{ debugName: "isVisible" }] : []));
+    /** Atributo `data-cy` para testes E2E. */
+    dataCy = input('', ...(ngDevMode ? [{ debugName: "dataCy" }] : []));
+    // ----- Posição / layout -----
+    togglePosition = input('after', ...(ngDevMode ? [{ debugName: "togglePosition" }] : []));
+    headerAlign = input('start', ...(ngDevMode ? [{ debugName: "headerAlign" }] : []));
+    contentAlign = input('start', ...(ngDevMode ? [{ debugName: "contentAlign" }] : []));
+    displayMode = input('default', ...(ngDevMode ? [{ debugName: "displayMode" }] : []));
+    // ----- Cores -----
+    headerBgColor = input('', ...(ngDevMode ? [{ debugName: "headerBgColor" }] : []));
+    headerTextColor = input('', ...(ngDevMode ? [{ debugName: "headerTextColor" }] : []));
+    headerHoverBgColor = input('', ...(ngDevMode ? [{ debugName: "headerHoverBgColor" }] : []));
+    headerActiveBgColor = input('', ...(ngDevMode ? [{ debugName: "headerActiveBgColor" }] : []));
+    activeColor = input('', ...(ngDevMode ? [{ debugName: "activeColor" }] : []));
+    contentBgColor = input('', ...(ngDevMode ? [{ debugName: "contentBgColor" }] : []));
+    contentTextColor = input('', ...(ngDevMode ? [{ debugName: "contentTextColor" }] : []));
+    borderColor = input('', ...(ngDevMode ? [{ debugName: "borderColor" }] : []));
+    disabledColor = input('', ...(ngDevMode ? [{ debugName: "disabledColor" }] : []));
+    focusRingColor = input('', ...(ngDevMode ? [{ debugName: "focusRingColor" }] : []));
+    iconColor = input('', ...(ngDevMode ? [{ debugName: "iconColor" }] : []));
+    // ----- Dimensões / animação -----
+    borderRadius = input('', ...(ngDevMode ? [{ debugName: "borderRadius" }] : []));
+    gap = input('', ...(ngDevMode ? [{ debugName: "gap" }] : []));
+    headerPadding = input('', ...(ngDevMode ? [{ debugName: "headerPadding" }] : []));
+    contentPadding = input('', ...(ngDevMode ? [{ debugName: "contentPadding" }] : []));
+    animationDuration = input('', ...(ngDevMode ? [{ debugName: "animationDuration" }] : []));
+    hostStyle = computed(() => ({
+        '--cao-accordion-header-bg': this.headerBgColor() || null,
+        '--cao-accordion-header-text': this.headerTextColor() || null,
+        '--cao-accordion-header-hover-bg': this.headerHoverBgColor() || null,
+        '--cao-accordion-header-active-bg': this.headerActiveBgColor() || null,
+        '--cao-accordion-active-color': this.activeColor() || null,
+        '--cao-accordion-content-bg': this.contentBgColor() || null,
+        '--cao-accordion-content-text': this.contentTextColor() || null,
+        '--cao-accordion-border-color': this.borderColor() || null,
+        '--cao-accordion-disabled-color': this.disabledColor() || null,
+        '--cao-accordion-focus-ring': this.focusRingColor() || null,
+        '--cao-accordion-icon-color': this.iconColor() || null,
+        '--cao-accordion-radius': this.borderRadius() || null,
+        '--cao-accordion-gap': this.gap() || null,
+        '--cao-accordion-header-padding': this.headerPadding() || null,
+        '--cao-accordion-content-padding': this.contentPadding() || null,
+        '--cao-accordion-duration': this.animationDuration() || null,
+        '--cao-accordion-content-align': this.contentAlign(),
+    }), ...(ngDevMode ? [{ debugName: "hostStyle" }] : []));
+    get styleBinding() {
+        return this.hostStyle();
+    }
+    get dataCyAttr() {
+        return this.dataCy() || null;
+    }
+    get hiddenClass() {
+        return !this.isVisible();
+    }
+    get defaultModeClass() {
+        return this.displayMode() === 'default';
+    }
+    get flatModeClass() {
+        return this.displayMode() === 'flat';
+    }
+    get separatedModeClass() {
+        return this.displayMode() === 'separated';
+    }
+    /** Expande todos os itens. Só tem efeito quando `multi` está ativo. */
+    openAll() {
+        if (!this.multi()) {
+            return;
+        }
+        this.items.forEach((item) => item.open());
+    }
+    /** Recolhe todos os itens. */
+    closeAll() {
+        this.items.forEach((item) => item.close());
+    }
+    register(item) {
+        this.items.add(item);
+    }
+    unregister(item) {
+        this.items.delete(item);
+    }
+    /** Chamado pelos itens ao expandir: no modo único, recolhe os demais. */
+    notifyOpened(item) {
+        if (this.multi()) {
+            return;
+        }
+        this.items.forEach((other) => {
+            if (other !== item && other.expanded()) {
+                other.close();
+            }
+        });
+    }
+    /** Navegação por teclado entre cabeçalhos: ↑ ↓ Home End. */
+    onKeydown(event) {
+        const root = this.host.nativeElement;
+        const target = event.target;
+        if (!target?.classList.contains('cao-accordion-item__header') || target.closest('cao-accordion') !== root) {
+            return;
+        }
+        const headers = Array.from(root.querySelectorAll(HEADER_SELECTOR)).filter((header) => header.closest('cao-accordion') === root && !header.closest('.cao-accordion-item--hidden'));
+        const current = headers.indexOf(target);
+        const last = headers.length - 1;
+        let next;
+        switch (event.key) {
+            case 'ArrowDown':
+                next = current >= last ? 0 : current + 1;
+                break;
+            case 'ArrowUp':
+                next = current <= 0 ? last : current - 1;
+                break;
+            case 'Home':
+                next = 0;
+                break;
+            case 'End':
+                next = last;
+                break;
+            default:
+                return;
+        }
+        event.preventDefault();
+        headers[next]?.focus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: CaoAccordionComponent, isStandalone: true, selector: "cao-accordion", inputs: { multi: { classPropertyName: "multi", publicName: "multi", isSignal: true, isRequired: false, transformFunction: null }, hideToggle: { classPropertyName: "hideToggle", publicName: "hideToggle", isSignal: true, isRequired: false, transformFunction: null }, isVisible: { classPropertyName: "isVisible", publicName: "isVisible", isSignal: true, isRequired: false, transformFunction: null }, dataCy: { classPropertyName: "dataCy", publicName: "dataCy", isSignal: true, isRequired: false, transformFunction: null }, togglePosition: { classPropertyName: "togglePosition", publicName: "togglePosition", isSignal: true, isRequired: false, transformFunction: null }, headerAlign: { classPropertyName: "headerAlign", publicName: "headerAlign", isSignal: true, isRequired: false, transformFunction: null }, contentAlign: { classPropertyName: "contentAlign", publicName: "contentAlign", isSignal: true, isRequired: false, transformFunction: null }, displayMode: { classPropertyName: "displayMode", publicName: "displayMode", isSignal: true, isRequired: false, transformFunction: null }, headerBgColor: { classPropertyName: "headerBgColor", publicName: "headerBgColor", isSignal: true, isRequired: false, transformFunction: null }, headerTextColor: { classPropertyName: "headerTextColor", publicName: "headerTextColor", isSignal: true, isRequired: false, transformFunction: null }, headerHoverBgColor: { classPropertyName: "headerHoverBgColor", publicName: "headerHoverBgColor", isSignal: true, isRequired: false, transformFunction: null }, headerActiveBgColor: { classPropertyName: "headerActiveBgColor", publicName: "headerActiveBgColor", isSignal: true, isRequired: false, transformFunction: null }, activeColor: { classPropertyName: "activeColor", publicName: "activeColor", isSignal: true, isRequired: false, transformFunction: null }, contentBgColor: { classPropertyName: "contentBgColor", publicName: "contentBgColor", isSignal: true, isRequired: false, transformFunction: null }, contentTextColor: { classPropertyName: "contentTextColor", publicName: "contentTextColor", isSignal: true, isRequired: false, transformFunction: null }, borderColor: { classPropertyName: "borderColor", publicName: "borderColor", isSignal: true, isRequired: false, transformFunction: null }, disabledColor: { classPropertyName: "disabledColor", publicName: "disabledColor", isSignal: true, isRequired: false, transformFunction: null }, focusRingColor: { classPropertyName: "focusRingColor", publicName: "focusRingColor", isSignal: true, isRequired: false, transformFunction: null }, iconColor: { classPropertyName: "iconColor", publicName: "iconColor", isSignal: true, isRequired: false, transformFunction: null }, borderRadius: { classPropertyName: "borderRadius", publicName: "borderRadius", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, headerPadding: { classPropertyName: "headerPadding", publicName: "headerPadding", isSignal: true, isRequired: false, transformFunction: null }, contentPadding: { classPropertyName: "contentPadding", publicName: "contentPadding", isSignal: true, isRequired: false, transformFunction: null }, animationDuration: { classPropertyName: "animationDuration", publicName: "animationDuration", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keydown": "onKeydown($event)" }, properties: { "style": "this.styleBinding", "attr.data-cy": "this.dataCyAttr", "class.cao-accordion--hidden": "this.hiddenClass", "class.cao-accordion--default": "this.defaultModeClass", "class.cao-accordion--flat": "this.flatModeClass", "class.cao-accordion--separated": "this.separatedModeClass" } }, providers: [{ provide: CAO_ACCORDION, useExisting: forwardRef(() => CaoAccordionComponent) }], ngImport: i0, template: "<ng-content />", styles: [":host{display:flex;flex-direction:column;box-sizing:border-box;width:100%}:host(.cao-accordion--hidden){display:none}:host(.cao-accordion--default){gap:1px;background:var(--cao-accordion-border-color, #e5e7eb);border:1px solid var(--cao-accordion-border-color, #e5e7eb);border-radius:var(--cao-accordion-radius, 8px);overflow:hidden}:host(.cao-accordion--flat){gap:1px;background:var(--cao-accordion-border-color, #e5e7eb);border-top:1px solid var(--cao-accordion-border-color, #e5e7eb);border-bottom:1px solid var(--cao-accordion-border-color, #e5e7eb)}:host(.cao-accordion--separated){gap:var(--cao-accordion-gap, 8px)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoAccordionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cao-accordion', changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: CAO_ACCORDION, useExisting: forwardRef(() => CaoAccordionComponent) }], template: "<ng-content />", styles: [":host{display:flex;flex-direction:column;box-sizing:border-box;width:100%}:host(.cao-accordion--hidden){display:none}:host(.cao-accordion--default){gap:1px;background:var(--cao-accordion-border-color, #e5e7eb);border:1px solid var(--cao-accordion-border-color, #e5e7eb);border-radius:var(--cao-accordion-radius, 8px);overflow:hidden}:host(.cao-accordion--flat){gap:1px;background:var(--cao-accordion-border-color, #e5e7eb);border-top:1px solid var(--cao-accordion-border-color, #e5e7eb);border-bottom:1px solid var(--cao-accordion-border-color, #e5e7eb)}:host(.cao-accordion--separated){gap:var(--cao-accordion-gap, 8px)}\n"] }]
+        }], propDecorators: { multi: [{ type: i0.Input, args: [{ isSignal: true, alias: "multi", required: false }] }], hideToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideToggle", required: false }] }], isVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "isVisible", required: false }] }], dataCy: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataCy", required: false }] }], togglePosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "togglePosition", required: false }] }], headerAlign: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerAlign", required: false }] }], contentAlign: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentAlign", required: false }] }], displayMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayMode", required: false }] }], headerBgColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerBgColor", required: false }] }], headerTextColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerTextColor", required: false }] }], headerHoverBgColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerHoverBgColor", required: false }] }], headerActiveBgColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerActiveBgColor", required: false }] }], activeColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeColor", required: false }] }], contentBgColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentBgColor", required: false }] }], contentTextColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentTextColor", required: false }] }], borderColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderColor", required: false }] }], disabledColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledColor", required: false }] }], focusRingColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusRingColor", required: false }] }], iconColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconColor", required: false }] }], borderRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderRadius", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], headerPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerPadding", required: false }] }], contentPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentPadding", required: false }] }], animationDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "animationDuration", required: false }] }], styleBinding: [{
+                type: HostBinding,
+                args: ['style']
+            }], dataCyAttr: [{
+                type: HostBinding,
+                args: ['attr.data-cy']
+            }], hiddenClass: [{
+                type: HostBinding,
+                args: ['class.cao-accordion--hidden']
+            }], defaultModeClass: [{
+                type: HostBinding,
+                args: ['class.cao-accordion--default']
+            }], flatModeClass: [{
+                type: HostBinding,
+                args: ['class.cao-accordion--flat']
+            }], separatedModeClass: [{
+                type: HostBinding,
+                args: ['class.cao-accordion--separated']
+            }], onKeydown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }] } });
+
+let nextId = 0;
+/**
+ * Item do accordion. Pode ser usado dentro de `<cao-accordion>` ou isolado (como um cartão expansível).
+ * Os inputs de cor/posição, quando informados, sobrescrevem os valores definidos no accordion.
+ */
+class CaoAccordionItemComponent {
+    accordion = inject(CAO_ACCORDION, { optional: true });
+    destroyRef = inject(DestroyRef);
+    previousExpanded = null;
+    headerId = `cao-accordion-header-${nextId}`;
+    panelId = `cao-accordion-panel-${nextId++}`;
+    // ----- Conteúdo -----
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
+    description = input('', ...(ngDevMode ? [{ debugName: "description" }] : []));
+    /** Nível do heading (aria-level) do cabeçalho. */
+    headingLevel = input(3, ...(ngDevMode ? [{ debugName: "headingLevel" }] : []));
+    // ----- Estado -----
+    /** Estado de expansão. Suporta two-way binding: `[(expanded)]`. */
+    expanded = model(false, ...(ngDevMode ? [{ debugName: "expanded" }] : []));
+    isDisabled = input(false, ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
+    /** Exibe ou oculta o item. */
+    isVisible = input(true, ...(ngDevMode ? [{ debugName: "isVisible" }] : []));
+    dataCy = input('', ...(ngDevMode ? [{ debugName: "dataCy" }] : []));
+    // ----- Posição (sobrescreve o accordion quando informado) -----
+    hideToggle = input(undefined, ...(ngDevMode ? [{ debugName: "hideToggle" }] : []));
+    togglePosition = input(undefined, ...(ngDevMode ? [{ debugName: "togglePosition" }] : []));
+    headerAlign = input(undefined, ...(ngDevMode ? [{ debugName: "headerAlign" }] : []));
+    // ----- Cores (sobrescrevem o accordion quando informadas) -----
+    headerBgColor = input('', ...(ngDevMode ? [{ debugName: "headerBgColor" }] : []));
+    headerTextColor = input('', ...(ngDevMode ? [{ debugName: "headerTextColor" }] : []));
+    headerActiveBgColor = input('', ...(ngDevMode ? [{ debugName: "headerActiveBgColor" }] : []));
+    activeColor = input('', ...(ngDevMode ? [{ debugName: "activeColor" }] : []));
+    contentBgColor = input('', ...(ngDevMode ? [{ debugName: "contentBgColor" }] : []));
+    contentTextColor = input('', ...(ngDevMode ? [{ debugName: "contentTextColor" }] : []));
+    borderColor = input('', ...(ngDevMode ? [{ debugName: "borderColor" }] : []));
+    iconColor = input('', ...(ngDevMode ? [{ debugName: "iconColor" }] : []));
+    // ----- Eventos -----
+    opened = output();
+    closed = output();
+    toggleHidden = computed(() => this.hideToggle() ?? this.accordion?.hideToggle() ?? false, ...(ngDevMode ? [{ debugName: "toggleHidden" }] : []));
+    togglePos = computed(() => this.togglePosition() ?? this.accordion?.togglePosition() ?? 'after', ...(ngDevMode ? [{ debugName: "togglePos" }] : []));
+    align = computed(() => this.headerAlign() ?? this.accordion?.headerAlign() ?? 'start', ...(ngDevMode ? [{ debugName: "align" }] : []));
+    isCard = computed(() => (this.accordion?.displayMode() ?? 'separated') === 'separated', ...(ngDevMode ? [{ debugName: "isCard" }] : []));
+    headerDataCy = computed(() => (this.dataCy() ? `${this.dataCy()}-header` : null), ...(ngDevMode ? [{ debugName: "headerDataCy" }] : []));
+    panelDataCy = computed(() => (this.dataCy() ? `${this.dataCy()}-content` : null), ...(ngDevMode ? [{ debugName: "panelDataCy" }] : []));
+    hostStyle = computed(() => ({
+        '--cao-accordion-header-bg': this.headerBgColor() || null,
+        '--cao-accordion-header-text': this.headerTextColor() || null,
+        '--cao-accordion-header-active-bg': this.headerActiveBgColor() || null,
+        '--cao-accordion-active-color': this.activeColor() || null,
+        '--cao-accordion-content-bg': this.contentBgColor() || null,
+        '--cao-accordion-content-text': this.contentTextColor() || null,
+        '--cao-accordion-border-color': this.borderColor() || null,
+        '--cao-accordion-icon-color': this.iconColor() || null,
+        '--cao-accordion-header-align': this.align(),
+    }), ...(ngDevMode ? [{ debugName: "hostStyle" }] : []));
+    get styleBinding() {
+        return this.hostStyle();
+    }
+    get dataCyAttr() {
+        return this.dataCy() || null;
+    }
+    get hiddenClass() {
+        return !this.isVisible();
+    }
+    get expandedClass() {
+        return this.expanded();
+    }
+    get cardClass() {
+        return this.isCard();
+    }
+    constructor() {
+        this.accordion?.register(this);
+        this.destroyRef.onDestroy(() => this.accordion?.unregister(this));
+        effect(() => {
+            const isExpanded = this.expanded();
+            untracked(() => this.handleExpandedChange(isExpanded));
+        });
+    }
+    /** Alterna o estado (ignorado quando o item está desabilitado). */
+    toggle() {
+        if (this.isDisabled()) {
+            return;
+        }
+        this.expanded.update((value) => !value);
+    }
+    open() {
+        this.expanded.set(true);
+    }
+    close() {
+        this.expanded.set(false);
+    }
+    handleExpandedChange(isExpanded) {
+        if (isExpanded) {
+            this.accordion?.notifyOpened(this);
+        }
+        if (this.previousExpanded !== null && this.previousExpanded !== isExpanded) {
+            const event = isExpanded ? this.opened : this.closed;
+            event.emit();
+        }
+        this.previousExpanded = isExpanded;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoAccordionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CaoAccordionItemComponent, isStandalone: true, selector: "cao-accordion-item", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, headingLevel: { classPropertyName: "headingLevel", publicName: "headingLevel", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isVisible: { classPropertyName: "isVisible", publicName: "isVisible", isSignal: true, isRequired: false, transformFunction: null }, dataCy: { classPropertyName: "dataCy", publicName: "dataCy", isSignal: true, isRequired: false, transformFunction: null }, hideToggle: { classPropertyName: "hideToggle", publicName: "hideToggle", isSignal: true, isRequired: false, transformFunction: null }, togglePosition: { classPropertyName: "togglePosition", publicName: "togglePosition", isSignal: true, isRequired: false, transformFunction: null }, headerAlign: { classPropertyName: "headerAlign", publicName: "headerAlign", isSignal: true, isRequired: false, transformFunction: null }, headerBgColor: { classPropertyName: "headerBgColor", publicName: "headerBgColor", isSignal: true, isRequired: false, transformFunction: null }, headerTextColor: { classPropertyName: "headerTextColor", publicName: "headerTextColor", isSignal: true, isRequired: false, transformFunction: null }, headerActiveBgColor: { classPropertyName: "headerActiveBgColor", publicName: "headerActiveBgColor", isSignal: true, isRequired: false, transformFunction: null }, activeColor: { classPropertyName: "activeColor", publicName: "activeColor", isSignal: true, isRequired: false, transformFunction: null }, contentBgColor: { classPropertyName: "contentBgColor", publicName: "contentBgColor", isSignal: true, isRequired: false, transformFunction: null }, contentTextColor: { classPropertyName: "contentTextColor", publicName: "contentTextColor", isSignal: true, isRequired: false, transformFunction: null }, borderColor: { classPropertyName: "borderColor", publicName: "borderColor", isSignal: true, isRequired: false, transformFunction: null }, iconColor: { classPropertyName: "iconColor", publicName: "iconColor", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expanded: "expandedChange", opened: "opened", closed: "closed" }, host: { properties: { "style": "this.styleBinding", "attr.data-cy": "this.dataCyAttr", "class.cao-accordion-item--hidden": "this.hiddenClass", "class.cao-accordion-item--expanded": "this.expandedClass", "class.cao-accordion-item--card": "this.cardClass" } }, ngImport: i0, template: "<div class=\"cao-accordion-item\">\n  <div class=\"cao-accordion-item__heading\" role=\"heading\" [attr.aria-level]=\"headingLevel()\">\n    <button\n      type=\"button\"\n      class=\"cao-accordion-item__header\"\n      [class.cao-accordion-item__header--toggle-before]=\"togglePos() === 'before'\"\n      [id]=\"headerId\"\n      [disabled]=\"isDisabled()\"\n      [attr.aria-expanded]=\"expanded()\"\n      [attr.aria-controls]=\"panelId\"\n      [attr.data-cy]=\"headerDataCy()\"\n      (click)=\"toggle()\">\n      <span class=\"cao-accordion-item__text\">\n        <span class=\"cao-accordion-item__label\">{{ label() }}</span>\n        @if (description()) {\n          <span class=\"cao-accordion-item__description\">{{ description() }}</span>\n        }\n        <ng-content select=\"[caoAccordionHeader]\" />\n      </span>\n\n      @if (!toggleHidden()) {\n        <svg\n          class=\"cao-accordion-item__icon\"\n          viewBox=\"0 0 24 24\"\n          width=\"20\"\n          height=\"20\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\"\n          focusable=\"false\">\n          <path d=\"m6 9 6 6 6-6\" />\n        </svg>\n      }\n    </button>\n  </div>\n\n  <div\n    class=\"cao-accordion-item__panel\"\n    role=\"region\"\n    [id]=\"panelId\"\n    [attr.aria-labelledby]=\"headerId\"\n    [attr.data-cy]=\"panelDataCy()\">\n    <div class=\"cao-accordion-item__panel-inner\">\n      <div class=\"cao-accordion-item__content\">\n        <ng-content />\n      </div>\n    </div>\n  </div>\n</div>", styles: [":host{display:block;box-sizing:border-box;min-width:0}:host(.cao-accordion-item--hidden){display:none}.cao-accordion-item{background:var(--cao-accordion-content-bg, #ffffff);color:var(--cao-accordion-content-text, #374151);overflow:hidden}:host(.cao-accordion-item--card) .cao-accordion-item{border:1px solid var(--cao-accordion-border-color, #e5e7eb);border-radius:var(--cao-accordion-radius, 8px)}.cao-accordion-item__heading{margin:0}.cao-accordion-item__header{display:flex;align-items:center;gap:12px;box-sizing:border-box;width:100%;min-height:48px;margin:0;padding:var(--cao-accordion-header-padding, 12px 16px);border:0;border-radius:0;background:var(--cao-accordion-header-bg, #ffffff);color:var(--cao-accordion-header-text, #111827);font:inherit;text-align:start;cursor:pointer;transition:background-color var(--cao-accordion-duration, .25s) ease,color var(--cao-accordion-duration, .25s) ease}.cao-accordion-item__header:hover:not(:disabled){background:var(--cao-accordion-header-hover-bg, #f3f4f6)}.cao-accordion-item__header:focus-visible{outline:2px solid var(--cao-accordion-focus-ring, rgba(79, 70, 229, .35));outline-offset:-2px}.cao-accordion-item__header:disabled{color:var(--cao-accordion-disabled-color, #9ca3af);cursor:not-allowed}:host(.cao-accordion-item--expanded) .cao-accordion-item__header{background:var(--cao-accordion-header-active-bg, var(--cao-accordion-header-bg, #ffffff));color:var(--cao-accordion-active-color, #4f46e5)}:host(.cao-accordion-item--expanded) .cao-accordion-item__header:disabled{color:var(--cao-accordion-disabled-color, #9ca3af)}.cao-accordion-item__text{display:flex;flex:1 1 auto;flex-direction:column;gap:2px;min-width:0;text-align:var(--cao-accordion-header-align, start)}.cao-accordion-item__label{font-weight:600;overflow-wrap:anywhere}.cao-accordion-item__description{font-size:.8125rem;font-weight:400;opacity:.75}.cao-accordion-item__icon{flex:0 0 auto;color:var(--cao-accordion-icon-color, currentColor);transition:transform var(--cao-accordion-duration, .25s) ease}.cao-accordion-item__header--toggle-before .cao-accordion-item__icon{order:-1}:host(.cao-accordion-item--expanded) .cao-accordion-item__icon{transform:rotate(180deg)}.cao-accordion-item__panel{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows var(--cao-accordion-duration, .25s) ease,visibility var(--cao-accordion-duration, .25s)}:host(.cao-accordion-item--expanded) .cao-accordion-item__panel{grid-template-rows:1fr;visibility:visible}.cao-accordion-item__panel-inner{min-height:0;overflow:hidden}.cao-accordion-item__content{padding:var(--cao-accordion-content-padding, 16px);border-top:1px solid var(--cao-accordion-border-color, #e5e7eb);text-align:var(--cao-accordion-content-align, start)}@media(prefers-reduced-motion:reduce){.cao-accordion-item__header,.cao-accordion-item__icon,.cao-accordion-item__panel{transition:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoAccordionItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cao-accordion-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cao-accordion-item\">\n  <div class=\"cao-accordion-item__heading\" role=\"heading\" [attr.aria-level]=\"headingLevel()\">\n    <button\n      type=\"button\"\n      class=\"cao-accordion-item__header\"\n      [class.cao-accordion-item__header--toggle-before]=\"togglePos() === 'before'\"\n      [id]=\"headerId\"\n      [disabled]=\"isDisabled()\"\n      [attr.aria-expanded]=\"expanded()\"\n      [attr.aria-controls]=\"panelId\"\n      [attr.data-cy]=\"headerDataCy()\"\n      (click)=\"toggle()\">\n      <span class=\"cao-accordion-item__text\">\n        <span class=\"cao-accordion-item__label\">{{ label() }}</span>\n        @if (description()) {\n          <span class=\"cao-accordion-item__description\">{{ description() }}</span>\n        }\n        <ng-content select=\"[caoAccordionHeader]\" />\n      </span>\n\n      @if (!toggleHidden()) {\n        <svg\n          class=\"cao-accordion-item__icon\"\n          viewBox=\"0 0 24 24\"\n          width=\"20\"\n          height=\"20\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\"\n          focusable=\"false\">\n          <path d=\"m6 9 6 6 6-6\" />\n        </svg>\n      }\n    </button>\n  </div>\n\n  <div\n    class=\"cao-accordion-item__panel\"\n    role=\"region\"\n    [id]=\"panelId\"\n    [attr.aria-labelledby]=\"headerId\"\n    [attr.data-cy]=\"panelDataCy()\">\n    <div class=\"cao-accordion-item__panel-inner\">\n      <div class=\"cao-accordion-item__content\">\n        <ng-content />\n      </div>\n    </div>\n  </div>\n</div>", styles: [":host{display:block;box-sizing:border-box;min-width:0}:host(.cao-accordion-item--hidden){display:none}.cao-accordion-item{background:var(--cao-accordion-content-bg, #ffffff);color:var(--cao-accordion-content-text, #374151);overflow:hidden}:host(.cao-accordion-item--card) .cao-accordion-item{border:1px solid var(--cao-accordion-border-color, #e5e7eb);border-radius:var(--cao-accordion-radius, 8px)}.cao-accordion-item__heading{margin:0}.cao-accordion-item__header{display:flex;align-items:center;gap:12px;box-sizing:border-box;width:100%;min-height:48px;margin:0;padding:var(--cao-accordion-header-padding, 12px 16px);border:0;border-radius:0;background:var(--cao-accordion-header-bg, #ffffff);color:var(--cao-accordion-header-text, #111827);font:inherit;text-align:start;cursor:pointer;transition:background-color var(--cao-accordion-duration, .25s) ease,color var(--cao-accordion-duration, .25s) ease}.cao-accordion-item__header:hover:not(:disabled){background:var(--cao-accordion-header-hover-bg, #f3f4f6)}.cao-accordion-item__header:focus-visible{outline:2px solid var(--cao-accordion-focus-ring, rgba(79, 70, 229, .35));outline-offset:-2px}.cao-accordion-item__header:disabled{color:var(--cao-accordion-disabled-color, #9ca3af);cursor:not-allowed}:host(.cao-accordion-item--expanded) .cao-accordion-item__header{background:var(--cao-accordion-header-active-bg, var(--cao-accordion-header-bg, #ffffff));color:var(--cao-accordion-active-color, #4f46e5)}:host(.cao-accordion-item--expanded) .cao-accordion-item__header:disabled{color:var(--cao-accordion-disabled-color, #9ca3af)}.cao-accordion-item__text{display:flex;flex:1 1 auto;flex-direction:column;gap:2px;min-width:0;text-align:var(--cao-accordion-header-align, start)}.cao-accordion-item__label{font-weight:600;overflow-wrap:anywhere}.cao-accordion-item__description{font-size:.8125rem;font-weight:400;opacity:.75}.cao-accordion-item__icon{flex:0 0 auto;color:var(--cao-accordion-icon-color, currentColor);transition:transform var(--cao-accordion-duration, .25s) ease}.cao-accordion-item__header--toggle-before .cao-accordion-item__icon{order:-1}:host(.cao-accordion-item--expanded) .cao-accordion-item__icon{transform:rotate(180deg)}.cao-accordion-item__panel{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows var(--cao-accordion-duration, .25s) ease,visibility var(--cao-accordion-duration, .25s)}:host(.cao-accordion-item--expanded) .cao-accordion-item__panel{grid-template-rows:1fr;visibility:visible}.cao-accordion-item__panel-inner{min-height:0;overflow:hidden}.cao-accordion-item__content{padding:var(--cao-accordion-content-padding, 16px);border-top:1px solid var(--cao-accordion-border-color, #e5e7eb);text-align:var(--cao-accordion-content-align, start)}@media(prefers-reduced-motion:reduce){.cao-accordion-item__header,.cao-accordion-item__icon,.cao-accordion-item__panel{transition:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], headingLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "headingLevel", required: false }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }, { type: i0.Output, args: ["expandedChange"] }], isDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDisabled", required: false }] }], isVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "isVisible", required: false }] }], dataCy: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataCy", required: false }] }], hideToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideToggle", required: false }] }], togglePosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "togglePosition", required: false }] }], headerAlign: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerAlign", required: false }] }], headerBgColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerBgColor", required: false }] }], headerTextColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerTextColor", required: false }] }], headerActiveBgColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerActiveBgColor", required: false }] }], activeColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeColor", required: false }] }], contentBgColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentBgColor", required: false }] }], contentTextColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentTextColor", required: false }] }], borderColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderColor", required: false }] }], iconColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconColor", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], styleBinding: [{
+                type: HostBinding,
+                args: ['style']
+            }], dataCyAttr: [{
+                type: HostBinding,
+                args: ['attr.data-cy']
+            }], hiddenClass: [{
+                type: HostBinding,
+                args: ['class.cao-accordion-item--hidden']
+            }], expandedClass: [{
+                type: HostBinding,
+                args: ['class.cao-accordion-item--expanded']
+            }], cardClass: [{
+                type: HostBinding,
+                args: ['class.cao-accordion-item--card']
+            }] } });
+
 class CaoBaseButtonComponent {
     buttonClick = new EventEmitter();
     buttonText = "Clique!";
@@ -2942,6 +3233,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 +4802,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, CAO_ACCORDION, CaoAccordionComponent, CaoAccordionItemComponent, 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