ngx-opalbytes-components 1.29.0 → 1.30.0

package/README.md

@@ -247,6 +247,8 @@ src/
         |   ├── kpi/
         |   ├── links-button/
         |   ├── paginator/
+        |   ├── progress-bar/
+        |   ├── progress-spinner/
         |   ├── radio/
         |   ├── skeleton/
         |   ├── slide-toggle/
@@ -2049,6 +2051,142 @@ Controle de paginação para tabelas ou listas.
 | --- | --- | --- |
 | `pageEvent` | `EventEmitter<PageEvent>` | Emitido em qualquer evento de paginação. |
 
+---
+### `CaoProgressBarComponent`
+
+Barra de progresso baseada no `mat-progress-bar` do Angular Material, **sem depender do Material em runtime** (apenas `@angular/core`). Suporta os modos `determinate`, `indeterminate`, `buffer` e `query`, cores e altura configuráveis e exibição opcional do percentual.
+
+**Seletor:** `<cao-progress-bar>`
+
+**Tipo `CaoProgressBarMode`**
+
+| Valor | Descrição |
+| --- | --- |
+| `'determinate'` | Progresso conhecido, controlado por `value` (padrão). |
+| `'indeterminate'` | Progresso desconhecido, animação contínua. |
+| `'buffer'` | Exibe `value` (progresso) e `bufferValue` (buffer), com pontos animados no restante. |
+| `'query'` | Indeterminado com a animação invertida (ex.: aguardando resposta antes de passar a `determinate`). |
+
+**Atributos (Inputs)**
+
+| Atributo | Tipo | Padrão | Descrição |
+| --- | --- | --- | --- |
+| `mode` | `CaoProgressBarMode` | `'determinate'` | Modo de exibição. |
+| `value` | `number` | `0` | Progresso de 0 a 100 (`determinate` e `buffer`). Valores fora do intervalo são limitados. |
+| `bufferValue` | `number` | `0` | Valor do buffer de 0 a 100 (`buffer`). |
+| `color` | `string` | `''` | Cor da barra (qualquer cor CSS). Padrão visual: `#4f46e5`. |
+| `trackColor` | `string` | `''` | Cor do trilho. Padrão visual: `#e5e7eb`. |
+| `bufferColor` | `string` | `''` | Cor do buffer. Padrão: `color` com 35% de opacidade. |
+| `height` | `string` | `'4px'` | Altura da barra. |
+| `borderRadius` | `string` | `''` | Raio da borda. Padrão: totalmente arredondada. |
+| `animationDuration` | `string` | `''` | Duração do ciclo nos modos indeterminado/query. Padrão visual: `2s`. |
+| `showValue` | `boolean` | `false` | Exibe o percentual ao lado da barra (`determinate` e `buffer`). |
+| `ariaLabel` | `string` | `''` | `aria-label` da barra. |
+| `ariaLabelledBy` | `string` | `''` | `aria-labelledby` da barra. |
+| `dataCy` | `string` | `''` | Atributo para testes E2E com Cypress. |
+
+**CSS Custom Properties**
+
+| Propriedade | Padrão | Descrição |
+| --- | --- | --- |
+| `--cao-progress-bar-color` | `#4f46e5` | Cor da barra. |
+| `--cao-progress-bar-track-color` | `#e5e7eb` | Cor do trilho. |
+| `--cao-progress-bar-buffer-color` | `color-mix(in srgb, <cor> 35%, transparent)` | Cor do buffer. |
+| `--cao-progress-bar-text-color` | `#374151` | Cor do percentual (`showValue`). |
+| `--cao-progress-bar-radius` | `999px` | Raio da borda. |
+| `--cao-progress-bar-duration` | `2s` | Duração do ciclo da animação. |
+
+**Exemplos:**
+
+```html
+<!-- Determinate com percentual -->
+<cao-progress-bar [value]="progresso" [showValue]="true" ariaLabel="Upload do arquivo"></cao-progress-bar>
+
+<!-- Indeterminate -->
+<cao-progress-bar mode="indeterminate" ariaLabel="Carregando"></cao-progress-bar>
+
+<!-- Buffer -->
+<cao-progress-bar mode="buffer" [value]="30" [bufferValue]="65"></cao-progress-bar>
+
+<!-- Query, cores e altura customizadas -->
+<cao-progress-bar mode="query" color="#16a34a" trackColor="#dcfce7" height="8px"></cao-progress-bar>
+```
+
+**Observações:**
+
+- Usa `role="progressbar"` com `aria-valuemin`, `aria-valuemax` e `aria-valuenow` (omitido nos modos indeterminado e query). Informe `ariaLabel` ou `ariaLabelledBy` para leitores de tela.
+- `value` e `bufferValue` aceitam string (`value="50"`), convertida com `numberAttribute`.
+- Respeita `prefers-reduced-motion`: transições são removidas e a animação indeterminada fica mais lenta.
+- Não possui dependências externas.
+---
+### `CaoProgressSpinnerComponent`
+
+Spinner de progresso circular baseado no `mat-progress-spinner` do Angular Material, **sem depender do Material em runtime** (apenas `@angular/core`; o visual é um SVG). Suporta os modos `determinate` e `indeterminate`, diâmetro, espessura, cores, trilho e percentual central configuráveis.
+
+**Seletor:** `<cao-progress-spinner>`
+
+**Tipos**
+
+| Tipo | Valores |
+| --- | --- |
+| `CaoProgressSpinnerMode` | `'determinate'` \| `'indeterminate'` |
+| `CaoProgressSpinnerLinecap` | `'round'` \| `'butt'` \| `'square'` |
+
+**Atributos (Inputs)**
+
+| Atributo | Tipo | Padrão | Descrição |
+| --- | --- | --- | --- |
+| `mode` | `CaoProgressSpinnerMode` | `'indeterminate'` | Modo de exibição. |
+| `value` | `number` | `0` | Progresso de 0 a 100 (`determinate`). Valores fora do intervalo são limitados. |
+| `diameter` | `number` | `48` | Diâmetro em px (mínimo `8`). |
+| `strokeWidth` | `number` | `0` | Espessura do traço em px. `0` = automático (10% do diâmetro). |
+| `strokeLinecap` | `CaoProgressSpinnerLinecap` | `'round'` | Formato da ponta do traço. |
+| `color` | `string` | `''` | Cor do indicador (qualquer cor CSS). Padrão visual: `#4f46e5`. |
+| `trackColor` | `string` | `''` | Cor do trilho (círculo de fundo). Padrão: transparente. |
+| `animationDuration` | `string` | `''` | Duração de uma volta no modo indeterminado. Padrão visual: `1.4s`. |
+| `showValue` | `boolean` | `false` | Exibe o percentual no centro (`determinate`). |
+| `textColor` | `string` | `''` | Cor do percentual. Padrão visual: `#111827`. |
+| `ariaLabel` | `string` | `''` | `aria-label` do spinner. |
+| `ariaLabelledBy` | `string` | `''` | `aria-labelledby` do spinner. |
+| `dataCy` | `string` | `''` | Atributo para testes E2E com Cypress. |
+
+**CSS Custom Properties**
+
+| Propriedade | Padrão | Descrição |
+| --- | --- | --- |
+| `--cao-progress-spinner-color` | `#4f46e5` | Cor do indicador. |
+| `--cao-progress-spinner-track-color` | `transparent` | Cor do trilho. |
+| `--cao-progress-spinner-text-color` | `#111827` | Cor do percentual. |
+| `--cao-progress-spinner-duration` | `1.4s` | Duração de uma volta (indeterminado). |
+
+**Exemplos:**
+
+```html
+<!-- Indeterminate -->
+<cao-progress-spinner ariaLabel="Carregando"></cao-progress-spinner>
+
+<!-- Determinate com trilho e percentual -->
+<cao-progress-spinner
+  mode="determinate"
+  [value]="progresso"
+  [diameter]="96"
+  trackColor="#e5e7eb"
+  [showValue]="true"
+  ariaLabel="Progresso do envio">
+</cao-progress-spinner>
+
+<!-- Tamanho, espessura e cor customizados -->
+<cao-progress-spinner [diameter]="24" [strokeWidth]="3" color="#16a34a"></cao-progress-spinner>
+```
+
+**Observações:**
+
+- Usa `role="progressbar"` com `aria-valuemin`, `aria-valuemax` e `aria-valuenow` (omitido no modo indeterminado). Informe `ariaLabel` ou `ariaLabelledBy` para leitores de tela.
+- `value`, `diameter` e `strokeWidth` aceitam string (`diameter="64"`), convertida com `numberAttribute`.
+- O diâmetro padrão é `48` (o Material usa `100`); informe `[diameter]="100"` para o mesmo tamanho.
+- Respeita `prefers-reduced-motion`: transições são removidas e a rotação fica mais lenta.
+- Não possui dependências externas.
+
 ---
 
 ### `CaoSkeleton`

package/fesm2022/ngx-opalbytes-components.mjs

@@ -1,5 +1,5 @@
 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 { 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, numberAttribute, viewChild, booleanAttribute, Injectable } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule, isPlatformBrowser, NgTemplateOutlet, NgOptimizedImage } from '@angular/common';
 import * as i3 from '@angular/material/tooltip';
@@ -226,7 +226,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                 args: ['keydown', ['$event']]
             }] } });
 
-let nextId = 0;
+let nextId$1 = 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.
@@ -235,8 +235,8 @@ class CaoAccordionItemComponent {
     accordion = inject(CAO_ACCORDION, { optional: true });
     destroyRef = inject(DestroyRef);
     previousExpanded = null;
-    headerId = `cao-accordion-header-${nextId}`;
-    panelId = `cao-accordion-panel-${nextId++}`;
+    headerId = `cao-accordion-header-${nextId$1}`;
+    panelId = `cao-accordion-panel-${nextId$1++}`;
     // ----- Conteúdo -----
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
     description = input('', ...(ngDevMode ? [{ debugName: "description" }] : []));
@@ -3556,6 +3556,339 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
             args: [{ selector: 'cao-breadcrumb', imports: [NgTemplateOutlet, RouterLink, CaoBaseIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #content let-item let-index=\"index\">\n  @if (item.icon && iconPosition(item) === 'left') {\n    <ng-container *ngTemplateOutlet=\"icon; context: { $implicit: item }\" />\n  }\n  @if (item.label) {\n    <span class=\"cao-breadcrumb__label\">{{ item.label }}</span>\n  }\n  @if (item.icon && iconPosition(item) === 'right') {\n    <ng-container *ngTemplateOutlet=\"icon; context: { $implicit: item }\" />\n  }\n  @if (item.badge !== undefined && item.badge !== null && item.badge !== '') {\n    <span\n      class=\"cao-breadcrumb__badge\"\n      [style.color]=\"item.badgeColor || null\"\n      [style.background-color]=\"item.badgeBgColor || null\"\n      [attr.data-cy]=\"item.dataCy ? item.dataCy + '-badge' : null\">\n      {{ item.badge }}\n    </span>\n  }\n</ng-template>\n\n<ng-template #icon let-item>\n  <span class=\"cao-breadcrumb__icon\" aria-hidden=\"true\">\n    <cao-base-icon\n      [imgSource]=\"item.icon\"\n      [isLucideIcon]=\"isLucide(item)\"\n      [iconColor]=\"item.iconColor ?? ''\"\n      [strokeWidthIcon]=\"item.iconStrokeWidth ?? 1.5\"\n      [size]=\"item.iconSize ?? 16\" />\n  </span>\n</ng-template>\n\n@if (allItems().length) {\n  <nav\n    class=\"cao-breadcrumb\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.data-cy]=\"dataCy() || null\"\n    [style.--cao-breadcrumb-link-color]=\"linkColor() || null\"\n    [style.--cao-breadcrumb-link-hover-color]=\"linkHoverColor() || null\"\n    [style.--cao-breadcrumb-current-color]=\"currentColor() || null\"\n    [style.--cao-breadcrumb-separator-color]=\"separatorColor() || null\"\n    [style.--cao-breadcrumb-font-size]=\"fontSize() || null\"\n    [style.--cao-breadcrumb-gap]=\"gap() || null\">\n    <ol class=\"cao-breadcrumb__list\">\n      @for (item of allItems(); track $index; let i = $index; let last = $last) {\n        <li\n          class=\"cao-breadcrumb__item\"\n          [class.cao-breadcrumb__item--current]=\"last\"\n          [class.cao-breadcrumb__item--disabled]=\"item.disabled\"\n          [attr.data-cy]=\"item.dataCy || null\">\n          @if (isInteractive(item, last)) {\n            @if (hasLink(item)) {\n              <a\n                class=\"cao-breadcrumb__action\"\n                [routerLink]=\"item.link\"\n                [queryParams]=\"item.queryParams\"\n                [target]=\"item.target ?? '_self'\"\n                [attr.aria-label]=\"item.ariaLabel || null\"\n                (click)=\"onItemClick(item, i, $event)\">\n                <ng-container *ngTemplateOutlet=\"content; context: { $implicit: item, index: i }\" />\n              </a>\n            } @else if (item.href) {\n              <a\n                class=\"cao-breadcrumb__action\"\n                [attr.href]=\"item.href\"\n                [attr.target]=\"item.target || null\"\n                [attr.rel]=\"item.target === '_blank' ? 'noopener noreferrer' : null\"\n                [attr.aria-label]=\"item.ariaLabel || null\"\n                (click)=\"onItemClick(item, i, $event)\">\n                <ng-container *ngTemplateOutlet=\"content; context: { $implicit: item, index: i }\" />\n              </a>\n            } @else {\n              <button\n                type=\"button\"\n                class=\"cao-breadcrumb__action\"\n                [attr.aria-label]=\"item.ariaLabel || null\"\n                (click)=\"onItemClick(item, i, $event)\">\n                <ng-container *ngTemplateOutlet=\"content; context: { $implicit: item, index: i }\" />\n              </button>\n            }\n          } @else {\n            <span\n              class=\"cao-breadcrumb__text\"\n              [attr.aria-current]=\"last ? 'page' : null\"\n              [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n              [attr.aria-label]=\"item.ariaLabel || null\">\n              <ng-container *ngTemplateOutlet=\"content; context: { $implicit: item, index: i }\" />\n            </span>\n          }\n        </li>\n\n        @if (!last) {\n          <li class=\"cao-breadcrumb__separator\" role=\"presentation\" aria-hidden=\"true\">\n            @if (separatorIcon()) {\n              <cao-base-icon\n                [imgSource]=\"separatorIcon()\"\n                [isLucideIcon]=\"isLucideSeparatorIcon()\"\n                [strokeWidthIcon]=\"separatorIconStrokeWidth()\"\n                [size]=\"separatorIconSize()\" />\n            } @else {\n              {{ separator() }}\n            }\n          </li>\n        }\n      }\n    </ol>\n  </nav>\n}", styles: [":host{display:block}.cao-breadcrumb{--_link: var(--cao-breadcrumb-link-color, #6b7280);--_link-hover: var(--cao-breadcrumb-link-hover-color, #4f46e5);--_current: var(--cao-breadcrumb-current-color, #111827);--_separator: var(--cao-breadcrumb-separator-color, #9ca3af);--_disabled: var(--cao-breadcrumb-disabled-color, #d1d5db);--_focus: var(--cao-breadcrumb-focus-ring, rgba(79, 70, 229, .35));--_badge-bg: var(--cao-breadcrumb-badge-bg, #eef2ff);--_badge-text: var(--cao-breadcrumb-badge-text, #4338ca);--_gap: var(--cao-breadcrumb-gap, 8px);--_size: var(--cao-breadcrumb-font-size, .875rem)}.cao-breadcrumb__list{display:flex;flex-wrap:wrap;align-items:center;gap:var(--_gap);margin:0;padding:0;list-style:none;font-size:var(--_size);line-height:1.25}.cao-breadcrumb__item,.cao-breadcrumb__separator{display:inline-flex;align-items:center}.cao-breadcrumb__separator{color:var(--_separator);-webkit-user-select:none;user-select:none}.cao-breadcrumb__action,.cao-breadcrumb__text{display:inline-flex;align-items:center;gap:6px;padding:2px 4px;border:0;border-radius:4px;background:none;color:var(--_link);font:inherit;text-decoration:none}.cao-breadcrumb__action{cursor:pointer;transition:color .15s ease}.cao-breadcrumb__action:hover{color:var(--_link-hover);text-decoration:underline;text-underline-offset:3px}.cao-breadcrumb__action:focus-visible{outline:2px solid var(--_focus);outline-offset:1px}.cao-breadcrumb__item--current .cao-breadcrumb__text{color:var(--_current);font-weight:600}.cao-breadcrumb__item--disabled .cao-breadcrumb__text{color:var(--_disabled);cursor:not-allowed}.cao-breadcrumb__icon{display:inline-flex;align-items:center;line-height:0}.cao-breadcrumb__badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;padding:1px 6px;border-radius:999px;background:var(--_badge-bg);color:var(--_badge-text);font-size:.75em;font-weight:600;line-height:1.4}@media(prefers-reduced-motion:reduce){.cao-breadcrumb__action{transition:none}}\n"] }]
         }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], home: [{ type: i0.Input, args: [{ isSignal: true, alias: "home", required: false }] }], separator: [{ type: i0.Input, args: [{ isSignal: true, alias: "separator", required: false }] }], separatorIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "separatorIcon", required: false }] }], isLucideSeparatorIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLucideSeparatorIcon", required: false }] }], separatorIconSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "separatorIconSize", required: false }] }], separatorIconStrokeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "separatorIconStrokeWidth", required: false }] }], linkColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "linkColor", required: false }] }], linkHoverColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "linkHoverColor", required: false }] }], currentColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentColor", required: false }] }], separatorColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "separatorColor", required: false }] }], fontSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "fontSize", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], dataCy: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataCy", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }] } });
 
+const clampPercent$1 = (value) => Math.min(100, Math.max(0, Number.isFinite(value) ? value : 0));
+class CaoProgressBarComponent {
+    /** Modo de exibição. Padrão: `'determinate'`. */
+    mode = input('determinate', ...(ngDevMode ? [{ debugName: "mode" }] : []));
+    /** Progresso de 0 a 100 (modos `determinate` e `buffer`). */
+    value = input(0, { ...(ngDevMode ? { debugName: "value" } : {}), transform: numberAttribute });
+    /** Valor do buffer de 0 a 100 (modo `buffer`). */
+    bufferValue = input(0, { ...(ngDevMode ? { debugName: "bufferValue" } : {}), transform: numberAttribute });
+    /** Cor da barra de progresso (qualquer cor CSS). */
+    color = input('', ...(ngDevMode ? [{ debugName: "color" }] : []));
+    /** Cor do trilho. */
+    trackColor = input('', ...(ngDevMode ? [{ debugName: "trackColor" }] : []));
+    /** Cor do buffer (modo `buffer`). */
+    bufferColor = input('', ...(ngDevMode ? [{ debugName: "bufferColor" }] : []));
+    /** Altura da barra. */
+    height = input('4px', ...(ngDevMode ? [{ debugName: "height" }] : []));
+    /** Raio da borda. Padrão: totalmente arredondada. */
+    borderRadius = input('', ...(ngDevMode ? [{ debugName: "borderRadius" }] : []));
+    /** Duração do ciclo da animação nos modos indeterminado/query/buffer. */
+    animationDuration = input('', ...(ngDevMode ? [{ debugName: "animationDuration" }] : []));
+    /** Exibe o percentual ao lado da barra (modos `determinate` e `buffer`). */
+    showValue = input(false, ...(ngDevMode ? [{ debugName: "showValue" }] : []));
+    ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    ariaLabelledBy = input('', ...(ngDevMode ? [{ debugName: "ariaLabelledBy" }] : []));
+    dataCy = input('', ...(ngDevMode ? [{ debugName: "dataCy" }] : []));
+    clampedValue = computed(() => clampPercent$1(this.value()), ...(ngDevMode ? [{ debugName: "clampedValue" }] : []));
+    clampedBuffer = computed(() => clampPercent$1(this.bufferValue()), ...(ngDevMode ? [{ debugName: "clampedBuffer" }] : []));
+    hasValue = computed(() => this.mode() === 'determinate' || this.mode() === 'buffer', ...(ngDevMode ? [{ debugName: "hasValue" }] : []));
+    ariaValueNow = computed(() => this.hasValue() ? Math.round(this.clampedValue()) : null, ...(ngDevMode ? [{ debugName: "ariaValueNow" }] : []));
+    valueLabel = computed(() => `${Math.round(this.clampedValue())}%`, ...(ngDevMode ? [{ debugName: "valueLabel" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CaoProgressBarComponent, isStandalone: true, selector: "cao-progress-bar", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, bufferValue: { classPropertyName: "bufferValue", publicName: "bufferValue", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, trackColor: { classPropertyName: "trackColor", publicName: "trackColor", isSignal: true, isRequired: false, transformFunction: null }, bufferColor: { classPropertyName: "bufferColor", publicName: "bufferColor", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, borderRadius: { classPropertyName: "borderRadius", publicName: "borderRadius", isSignal: true, isRequired: false, transformFunction: null }, animationDuration: { classPropertyName: "animationDuration", publicName: "animationDuration", isSignal: true, isRequired: false, transformFunction: null }, showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null }, dataCy: { classPropertyName: "dataCy", publicName: "dataCy", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  class=\"cao-progress-bar\"\n  [style.--cao-progress-bar-color]=\"color() || null\"\n  [style.--cao-progress-bar-track-color]=\"trackColor() || null\"\n  [style.--cao-progress-bar-buffer-color]=\"bufferColor() || null\"\n  [style.--cao-progress-bar-duration]=\"animationDuration() || null\">\n  <div\n    class=\"cao-progress-bar__track\"\n    role=\"progressbar\"\n    aria-valuemin=\"0\"\n    aria-valuemax=\"100\"\n    [attr.aria-valuenow]=\"ariaValueNow()\"\n    [attr.aria-label]=\"ariaLabel() || null\"\n    [attr.aria-labelledby]=\"ariaLabelledBy() || null\"\n    [attr.data-cy]=\"dataCy() || null\"\n    [style.height]=\"height()\"\n    [style.border-radius]=\"borderRadius() || null\">\n    @switch (mode()) {\n      @case ('determinate') {\n        <div class=\"cao-progress-bar__fill\" [style.width.%]=\"clampedValue()\"></div>\n      }\n      @case ('buffer') {\n        <div class=\"cao-progress-bar__dots\" [style.left.%]=\"clampedBuffer()\"></div>\n        <div class=\"cao-progress-bar__buffer\" [style.width.%]=\"clampedBuffer()\"></div>\n        <div class=\"cao-progress-bar__fill\" [style.width.%]=\"clampedValue()\"></div>\n      }\n      @default {\n        <div class=\"cao-progress-bar__inner\" [class.cao-progress-bar__inner--query]=\"mode() === 'query'\">\n          <div class=\"cao-progress-bar__bar cao-progress-bar__bar--primary\"></div>\n          <div class=\"cao-progress-bar__bar cao-progress-bar__bar--secondary\"></div>\n        </div>\n      }\n    }\n  </div>\n\n  @if (showValue() && hasValue()) {\n    <span class=\"cao-progress-bar__value\" aria-hidden=\"true\">{{ valueLabel() }}</span>\n  }\n</div>", styles: [":host{display:block;width:100%}.cao-progress-bar{--_color: var(--cao-progress-bar-color, #4f46e5);--_track: var(--cao-progress-bar-track-color, #e5e7eb);--_buffer: var(--cao-progress-bar-buffer-color, color-mix(in srgb, var(--_color) 35%, transparent));--_duration: var(--cao-progress-bar-duration, 2s);--_text: var(--cao-progress-bar-text-color, #374151);display:flex;align-items:center;gap:8px}.cao-progress-bar__track{position:relative;flex:1 1 auto;min-width:0;overflow:hidden;border-radius:var(--cao-progress-bar-radius, 999px);background-color:var(--_track)}.cao-progress-bar__fill,.cao-progress-bar__buffer{position:absolute;top:0;bottom:0;left:0;border-radius:inherit;transition:width .25s ease}.cao-progress-bar__fill{z-index:1;background-color:var(--_color)}.cao-progress-bar__buffer{background-color:var(--_buffer)}.cao-progress-bar__dots{position:absolute;top:0;right:0;bottom:0;background-image:radial-gradient(circle closest-side,var(--_buffer) 0 70%,transparent 75%);background-size:8px 100%;animation:cao-progress-bar-dots .6s linear infinite}.cao-progress-bar__inner{position:absolute;inset:0}.cao-progress-bar__inner--query{transform:scaleX(-1)}.cao-progress-bar__bar{position:absolute;top:0;bottom:0;left:0;width:100%;background-color:var(--_color);transform-origin:left center;will-change:transform}.cao-progress-bar__bar--primary{animation:cao-progress-bar-primary var(--_duration) cubic-bezier(.4,0,.2,1) infinite}.cao-progress-bar__bar--secondary{animation:cao-progress-bar-secondary var(--_duration) cubic-bezier(.4,0,.2,1) infinite}.cao-progress-bar__value{flex:0 0 auto;min-width:2.75em;color:var(--_text);font-size:.75rem;font-variant-numeric:tabular-nums;line-height:1;text-align:right}@keyframes cao-progress-bar-primary{0%{transform:translate(-100%) scaleX(.2)}40%{transform:translate(10%) scaleX(.6)}to{transform:translate(100%) scaleX(.2)}}@keyframes cao-progress-bar-secondary{0%{transform:translate(-100%) scaleX(.1)}50%{transform:translate(-100%) scaleX(.1)}80%{transform:translate(40%) scaleX(.4)}to{transform:translate(100%) scaleX(.1)}}@keyframes cao-progress-bar-dots{to{background-position-x:-8px}}@media(prefers-reduced-motion:reduce){.cao-progress-bar__fill,.cao-progress-bar__buffer{transition:none}.cao-progress-bar__bar--primary,.cao-progress-bar__bar--secondary{animation-duration:calc(var(--_duration) * 3)}.cao-progress-bar__dots{animation:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoProgressBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cao-progress-bar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"cao-progress-bar\"\n  [style.--cao-progress-bar-color]=\"color() || null\"\n  [style.--cao-progress-bar-track-color]=\"trackColor() || null\"\n  [style.--cao-progress-bar-buffer-color]=\"bufferColor() || null\"\n  [style.--cao-progress-bar-duration]=\"animationDuration() || null\">\n  <div\n    class=\"cao-progress-bar__track\"\n    role=\"progressbar\"\n    aria-valuemin=\"0\"\n    aria-valuemax=\"100\"\n    [attr.aria-valuenow]=\"ariaValueNow()\"\n    [attr.aria-label]=\"ariaLabel() || null\"\n    [attr.aria-labelledby]=\"ariaLabelledBy() || null\"\n    [attr.data-cy]=\"dataCy() || null\"\n    [style.height]=\"height()\"\n    [style.border-radius]=\"borderRadius() || null\">\n    @switch (mode()) {\n      @case ('determinate') {\n        <div class=\"cao-progress-bar__fill\" [style.width.%]=\"clampedValue()\"></div>\n      }\n      @case ('buffer') {\n        <div class=\"cao-progress-bar__dots\" [style.left.%]=\"clampedBuffer()\"></div>\n        <div class=\"cao-progress-bar__buffer\" [style.width.%]=\"clampedBuffer()\"></div>\n        <div class=\"cao-progress-bar__fill\" [style.width.%]=\"clampedValue()\"></div>\n      }\n      @default {\n        <div class=\"cao-progress-bar__inner\" [class.cao-progress-bar__inner--query]=\"mode() === 'query'\">\n          <div class=\"cao-progress-bar__bar cao-progress-bar__bar--primary\"></div>\n          <div class=\"cao-progress-bar__bar cao-progress-bar__bar--secondary\"></div>\n        </div>\n      }\n    }\n  </div>\n\n  @if (showValue() && hasValue()) {\n    <span class=\"cao-progress-bar__value\" aria-hidden=\"true\">{{ valueLabel() }}</span>\n  }\n</div>", styles: [":host{display:block;width:100%}.cao-progress-bar{--_color: var(--cao-progress-bar-color, #4f46e5);--_track: var(--cao-progress-bar-track-color, #e5e7eb);--_buffer: var(--cao-progress-bar-buffer-color, color-mix(in srgb, var(--_color) 35%, transparent));--_duration: var(--cao-progress-bar-duration, 2s);--_text: var(--cao-progress-bar-text-color, #374151);display:flex;align-items:center;gap:8px}.cao-progress-bar__track{position:relative;flex:1 1 auto;min-width:0;overflow:hidden;border-radius:var(--cao-progress-bar-radius, 999px);background-color:var(--_track)}.cao-progress-bar__fill,.cao-progress-bar__buffer{position:absolute;top:0;bottom:0;left:0;border-radius:inherit;transition:width .25s ease}.cao-progress-bar__fill{z-index:1;background-color:var(--_color)}.cao-progress-bar__buffer{background-color:var(--_buffer)}.cao-progress-bar__dots{position:absolute;top:0;right:0;bottom:0;background-image:radial-gradient(circle closest-side,var(--_buffer) 0 70%,transparent 75%);background-size:8px 100%;animation:cao-progress-bar-dots .6s linear infinite}.cao-progress-bar__inner{position:absolute;inset:0}.cao-progress-bar__inner--query{transform:scaleX(-1)}.cao-progress-bar__bar{position:absolute;top:0;bottom:0;left:0;width:100%;background-color:var(--_color);transform-origin:left center;will-change:transform}.cao-progress-bar__bar--primary{animation:cao-progress-bar-primary var(--_duration) cubic-bezier(.4,0,.2,1) infinite}.cao-progress-bar__bar--secondary{animation:cao-progress-bar-secondary var(--_duration) cubic-bezier(.4,0,.2,1) infinite}.cao-progress-bar__value{flex:0 0 auto;min-width:2.75em;color:var(--_text);font-size:.75rem;font-variant-numeric:tabular-nums;line-height:1;text-align:right}@keyframes cao-progress-bar-primary{0%{transform:translate(-100%) scaleX(.2)}40%{transform:translate(10%) scaleX(.6)}to{transform:translate(100%) scaleX(.2)}}@keyframes cao-progress-bar-secondary{0%{transform:translate(-100%) scaleX(.1)}50%{transform:translate(-100%) scaleX(.1)}80%{transform:translate(40%) scaleX(.4)}to{transform:translate(100%) scaleX(.1)}}@keyframes cao-progress-bar-dots{to{background-position-x:-8px}}@media(prefers-reduced-motion:reduce){.cao-progress-bar__fill,.cao-progress-bar__buffer{transition:none}.cao-progress-bar__bar--primary,.cao-progress-bar__bar--secondary{animation-duration:calc(var(--_duration) * 3)}.cao-progress-bar__dots{animation:none}}\n"] }]
+        }], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], bufferValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "bufferValue", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], trackColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackColor", required: false }] }], bufferColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "bufferColor", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], borderRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderRadius", required: false }] }], animationDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "animationDuration", required: false }] }], showValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValue", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledBy", required: false }] }], dataCy: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataCy", required: false }] }] } });
+
+const MIN_DIAMETER = 8;
+const clampPercent = (value) => Math.min(100, Math.max(0, Number.isFinite(value) ? value : 0));
+class CaoProgressSpinnerComponent {
+    /** Modo de exibição. Padrão: `'indeterminate'`. */
+    mode = input('indeterminate', ...(ngDevMode ? [{ debugName: "mode" }] : []));
+    /** Progresso de 0 a 100 (modo `determinate`). */
+    value = input(0, { ...(ngDevMode ? { debugName: "value" } : {}), transform: numberAttribute });
+    /** Diâmetro em px. */
+    diameter = input(48, { ...(ngDevMode ? { debugName: "diameter" } : {}), transform: numberAttribute });
+    /** Espessura do traço em px. `0` = automático (10% do diâmetro). */
+    strokeWidth = input(0, { ...(ngDevMode ? { debugName: "strokeWidth" } : {}), transform: numberAttribute });
+    /** Formato da ponta do traço. */
+    strokeLinecap = input('round', ...(ngDevMode ? [{ debugName: "strokeLinecap" }] : []));
+    /** Cor do indicador (qualquer cor CSS). */
+    color = input('', ...(ngDevMode ? [{ debugName: "color" }] : []));
+    /** Cor do trilho (círculo de fundo). Padrão: transparente. */
+    trackColor = input('', ...(ngDevMode ? [{ debugName: "trackColor" }] : []));
+    /** Duração de uma volta completa no modo indeterminado. */
+    animationDuration = input('', ...(ngDevMode ? [{ debugName: "animationDuration" }] : []));
+    /** Exibe o percentual no centro (modo `determinate`). */
+    showValue = input(false, ...(ngDevMode ? [{ debugName: "showValue" }] : []));
+    /** Cor do percentual. */
+    textColor = input('', ...(ngDevMode ? [{ debugName: "textColor" }] : []));
+    ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    ariaLabelledBy = input('', ...(ngDevMode ? [{ debugName: "ariaLabelledBy" }] : []));
+    dataCy = input('', ...(ngDevMode ? [{ debugName: "dataCy" }] : []));
+    isDeterminate = computed(() => this.mode() === 'determinate', ...(ngDevMode ? [{ debugName: "isDeterminate" }] : []));
+    size = computed(() => {
+        const diameter = this.diameter();
+        return Number.isFinite(diameter) ? Math.max(MIN_DIAMETER, diameter) : 48;
+    }, ...(ngDevMode ? [{ debugName: "size" }] : []));
+    stroke = computed(() => {
+        const width = this.strokeWidth();
+        const raw = width > 0 ? width : this.size() * 0.1;
+        return Math.min(Math.max(raw, 1), this.size() / 2);
+    }, ...(ngDevMode ? [{ debugName: "stroke" }] : []));
+    center = computed(() => this.size() / 2, ...(ngDevMode ? [{ debugName: "center" }] : []));
+    radius = computed(() => (this.size() - this.stroke()) / 2, ...(ngDevMode ? [{ debugName: "radius" }] : []));
+    circumference = computed(() => 2 * Math.PI * this.radius(), ...(ngDevMode ? [{ debugName: "circumference" }] : []));
+    clampedValue = computed(() => clampPercent(this.value()), ...(ngDevMode ? [{ debugName: "clampedValue" }] : []));
+    dashOffset = computed(() => this.isDeterminate() ? this.circumference() * (1 - this.clampedValue() / 100) : null, ...(ngDevMode ? [{ debugName: "dashOffset" }] : []));
+    ariaValueNow = computed(() => this.isDeterminate() ? Math.round(this.clampedValue()) : null, ...(ngDevMode ? [{ debugName: "ariaValueNow" }] : []));
+    valueLabel = computed(() => `${Math.round(this.clampedValue())}%`, ...(ngDevMode ? [{ debugName: "valueLabel" }] : []));
+    fontSize = computed(() => Math.max(8, Math.round(this.size() * 0.24)), ...(ngDevMode ? [{ debugName: "fontSize" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoProgressSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CaoProgressSpinnerComponent, isStandalone: true, selector: "cao-progress-spinner", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, diameter: { classPropertyName: "diameter", publicName: "diameter", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null }, strokeLinecap: { classPropertyName: "strokeLinecap", publicName: "strokeLinecap", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, trackColor: { classPropertyName: "trackColor", publicName: "trackColor", isSignal: true, isRequired: false, transformFunction: null }, animationDuration: { classPropertyName: "animationDuration", publicName: "animationDuration", isSignal: true, isRequired: false, transformFunction: null }, showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null }, textColor: { classPropertyName: "textColor", publicName: "textColor", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null }, dataCy: { classPropertyName: "dataCy", publicName: "dataCy", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  class=\"cao-progress-spinner\"\n  role=\"progressbar\"\n  aria-valuemin=\"0\"\n  aria-valuemax=\"100\"\n  [class.cao-progress-spinner--determinate]=\"isDeterminate()\"\n  [class.cao-progress-spinner--indeterminate]=\"!isDeterminate()\"\n  [attr.aria-valuenow]=\"ariaValueNow()\"\n  [attr.aria-label]=\"ariaLabel() || null\"\n  [attr.aria-labelledby]=\"ariaLabelledBy() || null\"\n  [attr.data-cy]=\"dataCy() || null\"\n  [style.width.px]=\"size()\"\n  [style.height.px]=\"size()\"\n  [style.--cao-progress-spinner-color]=\"color() || null\"\n  [style.--cao-progress-spinner-track-color]=\"trackColor() || null\"\n  [style.--cao-progress-spinner-duration]=\"animationDuration() || null\"\n  [style.--cao-progress-spinner-text-color]=\"textColor() || null\"\n  [style.--cao-progress-spinner-circumference]=\"circumference() + 'px'\">\n  <svg\n    class=\"cao-progress-spinner__svg\"\n    focusable=\"false\"\n    aria-hidden=\"true\"\n    [attr.width]=\"size()\"\n    [attr.height]=\"size()\"\n    [attr.viewBox]=\"'0 0 ' + size() + ' ' + size()\">\n    <circle\n      class=\"cao-progress-spinner__track\"\n      fill=\"none\"\n      [attr.cx]=\"center()\"\n      [attr.cy]=\"center()\"\n      [attr.r]=\"radius()\"\n      [attr.stroke-width]=\"stroke()\" />\n    <circle\n      class=\"cao-progress-spinner__indicator\"\n      fill=\"none\"\n      [attr.cx]=\"center()\"\n      [attr.cy]=\"center()\"\n      [attr.r]=\"radius()\"\n      [attr.stroke-width]=\"stroke()\"\n      [attr.stroke-linecap]=\"strokeLinecap()\"\n      [attr.stroke-dasharray]=\"circumference()\"\n      [attr.stroke-dashoffset]=\"dashOffset()\" />\n  </svg>\n\n  @if (showValue() && isDeterminate()) {\n    <span class=\"cao-progress-spinner__value\" aria-hidden=\"true\" [style.font-size.px]=\"fontSize()\">\n      {{ valueLabel() }}\n    </span>\n  }\n</div>", styles: [":host{display:inline-block;line-height:0}.cao-progress-spinner{--_color: var(--cao-progress-spinner-color, #4f46e5);--_track: var(--cao-progress-spinner-track-color, transparent);--_duration: var(--cao-progress-spinner-duration, 1.4s);--_text: var(--cao-progress-spinner-text-color, #111827);--_circ: var(--cao-progress-spinner-circumference, 0px);position:relative;display:inline-flex;align-items:center;justify-content:center}.cao-progress-spinner__svg{display:block;width:100%;height:100%}.cao-progress-spinner__track{stroke:var(--_track)}.cao-progress-spinner__indicator{stroke:var(--_color);transform:rotate(-90deg);transform-origin:50% 50%;transition:stroke-dashoffset .3s ease}.cao-progress-spinner__value{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--_text);font-variant-numeric:tabular-nums;font-weight:600;line-height:1}.cao-progress-spinner--indeterminate .cao-progress-spinner__svg{animation:cao-progress-spinner-rotate var(--_duration) linear infinite}.cao-progress-spinner--indeterminate .cao-progress-spinner__indicator{animation:cao-progress-spinner-dash calc(var(--_duration) * 1.4) ease-in-out infinite;transition:none}@keyframes cao-progress-spinner-rotate{to{transform:rotate(360deg)}}@keyframes cao-progress-spinner-dash{0%{stroke-dashoffset:calc(var(--_circ) * .95);transform:rotate(-90deg)}50%{stroke-dashoffset:calc(var(--_circ) * .25);transform:rotate(45deg)}to{stroke-dashoffset:calc(var(--_circ) * .95);transform:rotate(270deg)}}@media(prefers-reduced-motion:reduce){.cao-progress-spinner__indicator{transition:none}.cao-progress-spinner--indeterminate .cao-progress-spinner__svg{animation-duration:calc(var(--_duration) * 3)}.cao-progress-spinner--indeterminate .cao-progress-spinner__indicator{animation-duration:calc(var(--_duration) * 4.2)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoProgressSpinnerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cao-progress-spinner', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"cao-progress-spinner\"\n  role=\"progressbar\"\n  aria-valuemin=\"0\"\n  aria-valuemax=\"100\"\n  [class.cao-progress-spinner--determinate]=\"isDeterminate()\"\n  [class.cao-progress-spinner--indeterminate]=\"!isDeterminate()\"\n  [attr.aria-valuenow]=\"ariaValueNow()\"\n  [attr.aria-label]=\"ariaLabel() || null\"\n  [attr.aria-labelledby]=\"ariaLabelledBy() || null\"\n  [attr.data-cy]=\"dataCy() || null\"\n  [style.width.px]=\"size()\"\n  [style.height.px]=\"size()\"\n  [style.--cao-progress-spinner-color]=\"color() || null\"\n  [style.--cao-progress-spinner-track-color]=\"trackColor() || null\"\n  [style.--cao-progress-spinner-duration]=\"animationDuration() || null\"\n  [style.--cao-progress-spinner-text-color]=\"textColor() || null\"\n  [style.--cao-progress-spinner-circumference]=\"circumference() + 'px'\">\n  <svg\n    class=\"cao-progress-spinner__svg\"\n    focusable=\"false\"\n    aria-hidden=\"true\"\n    [attr.width]=\"size()\"\n    [attr.height]=\"size()\"\n    [attr.viewBox]=\"'0 0 ' + size() + ' ' + size()\">\n    <circle\n      class=\"cao-progress-spinner__track\"\n      fill=\"none\"\n      [attr.cx]=\"center()\"\n      [attr.cy]=\"center()\"\n      [attr.r]=\"radius()\"\n      [attr.stroke-width]=\"stroke()\" />\n    <circle\n      class=\"cao-progress-spinner__indicator\"\n      fill=\"none\"\n      [attr.cx]=\"center()\"\n      [attr.cy]=\"center()\"\n      [attr.r]=\"radius()\"\n      [attr.stroke-width]=\"stroke()\"\n      [attr.stroke-linecap]=\"strokeLinecap()\"\n      [attr.stroke-dasharray]=\"circumference()\"\n      [attr.stroke-dashoffset]=\"dashOffset()\" />\n  </svg>\n\n  @if (showValue() && isDeterminate()) {\n    <span class=\"cao-progress-spinner__value\" aria-hidden=\"true\" [style.font-size.px]=\"fontSize()\">\n      {{ valueLabel() }}\n    </span>\n  }\n</div>", styles: [":host{display:inline-block;line-height:0}.cao-progress-spinner{--_color: var(--cao-progress-spinner-color, #4f46e5);--_track: var(--cao-progress-spinner-track-color, transparent);--_duration: var(--cao-progress-spinner-duration, 1.4s);--_text: var(--cao-progress-spinner-text-color, #111827);--_circ: var(--cao-progress-spinner-circumference, 0px);position:relative;display:inline-flex;align-items:center;justify-content:center}.cao-progress-spinner__svg{display:block;width:100%;height:100%}.cao-progress-spinner__track{stroke:var(--_track)}.cao-progress-spinner__indicator{stroke:var(--_color);transform:rotate(-90deg);transform-origin:50% 50%;transition:stroke-dashoffset .3s ease}.cao-progress-spinner__value{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--_text);font-variant-numeric:tabular-nums;font-weight:600;line-height:1}.cao-progress-spinner--indeterminate .cao-progress-spinner__svg{animation:cao-progress-spinner-rotate var(--_duration) linear infinite}.cao-progress-spinner--indeterminate .cao-progress-spinner__indicator{animation:cao-progress-spinner-dash calc(var(--_duration) * 1.4) ease-in-out infinite;transition:none}@keyframes cao-progress-spinner-rotate{to{transform:rotate(360deg)}}@keyframes cao-progress-spinner-dash{0%{stroke-dashoffset:calc(var(--_circ) * .95);transform:rotate(-90deg)}50%{stroke-dashoffset:calc(var(--_circ) * .25);transform:rotate(45deg)}to{stroke-dashoffset:calc(var(--_circ) * .95);transform:rotate(270deg)}}@media(prefers-reduced-motion:reduce){.cao-progress-spinner__indicator{transition:none}.cao-progress-spinner--indeterminate .cao-progress-spinner__svg{animation-duration:calc(var(--_duration) * 3)}.cao-progress-spinner--indeterminate .cao-progress-spinner__indicator{animation-duration:calc(var(--_duration) * 4.2)}}\n"] }]
+        }], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], diameter: [{ type: i0.Input, args: [{ isSignal: true, alias: "diameter", required: false }] }], strokeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "strokeWidth", required: false }] }], strokeLinecap: [{ type: i0.Input, args: [{ isSignal: true, alias: "strokeLinecap", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], trackColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackColor", required: false }] }], animationDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "animationDuration", required: false }] }], showValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValue", required: false }] }], textColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "textColor", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledBy", required: false }] }], dataCy: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataCy", required: false }] }] } });
+
+const CAO_POPOVER_POSITION_PREFIX = 'cao-popover-pos-';
+const OPPOSITE = {
+    top: 'bottom',
+    bottom: 'top',
+    left: 'right',
+    right: 'left',
+};
+const PERPENDICULAR = {
+    top: ['right', 'left'],
+    bottom: ['right', 'left'],
+    left: ['bottom', 'top'],
+    right: ['bottom', 'top'],
+};
+function toConnectedPosition(position, align, offset) {
+    const panelClass = `${CAO_POPOVER_POSITION_PREFIX}${position}`;
+    if (position === 'top' || position === 'bottom') {
+        return {
+            originX: align,
+            originY: position === 'bottom' ? 'bottom' : 'top',
+            overlayX: align,
+            overlayY: position === 'bottom' ? 'top' : 'bottom',
+            offsetY: position === 'bottom' ? offset : -offset,
+            panelClass,
+        };
+    }
+    const vertical = align === 'start' ? 'top' : align === 'end' ? 'bottom' : 'center';
+    return {
+        originX: position === 'right' ? 'end' : 'start',
+        originY: vertical,
+        overlayX: position === 'right' ? 'start' : 'end',
+        overlayY: vertical,
+        offsetX: position === 'right' ? offset : -offset,
+        panelClass,
+    };
+}
+/** Posição preferida seguida das alternativas (oposta e perpendiculares) usadas quando não há espaço. */
+function buildPopoverPositions(position, align, offset) {
+    const order = [position, OPPOSITE[position], ...PERPENDICULAR[position]];
+    return order.map((item) => toConnectedPosition(item, align, offset));
+}
+const FOCUSABLE_SELECTOR = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+let nextId = 0;
+class CaoPopoverComponent {
+    overlay = inject(Overlay);
+    viewContainerRef = inject(ViewContainerRef);
+    destroyRef = inject(DestroyRef);
+    panelTemplate = viewChild.required('panelTemplate');
+    overlayRef = null;
+    origin = null;
+    subscriptions = new Subscription();
+    focusMoved = false;
+    openState = signal(false, ...(ngDevMode ? [{ debugName: "openState" }] : []));
+    panelId = `cao-popover-${nextId++}`;
+    placement = signal('bottom', ...(ngDevMode ? [{ debugName: "placement" }] : []));
+    /** Lado do elemento de origem em que o popover aparece. Se não houver espaço, o CDK escolhe outro lado. */
+    position = input('bottom', ...(ngDevMode ? [{ debugName: "position" }] : []));
+    /** Alinhamento em relação ao elemento de origem. */
+    align = input('center', ...(ngDevMode ? [{ debugName: "align" }] : []));
+    /** Distância (px) entre a origem e o popover. */
+    offset = input(10, { ...(ngDevMode ? { debugName: "offset" } : {}), transform: numberAttribute });
+    /** Exibe a seta apontando para a origem. */
+    showArrow = input(true, { ...(ngDevMode ? { debugName: "showArrow" } : {}), transform: booleanAttribute });
+    /** Fecha ao clicar fora do popover. */
+    dismissable = input(true, { ...(ngDevMode ? { debugName: "dismissable" } : {}), transform: booleanAttribute });
+    /** Fecha ao pressionar `Esc`. */
+    closeOnEscape = input(true, { ...(ngDevMode ? { debugName: "closeOnEscape" } : {}), transform: booleanAttribute });
+    /** Exibe o botão de fechar no canto superior direito. */
+    showCloseIcon = input(false, { ...(ngDevMode ? { debugName: "showCloseIcon" } : {}), transform: booleanAttribute });
+    /** Move o foco para o primeiro elemento focável do popover ao abrir (e devolve à origem ao fechar). */
+    focusOnShow = input(true, { ...(ngDevMode ? { debugName: "focusOnShow" } : {}), transform: booleanAttribute });
+    /** Largura fixa do popover (ex.: `'320px'`). */
+    width = input('', ...(ngDevMode ? [{ debugName: "width" }] : []));
+    /** Largura máxima. */
+    maxWidth = input('360px', ...(ngDevMode ? [{ debugName: "maxWidth" }] : []));
+    bgColor = input('', ...(ngDevMode ? [{ debugName: "bgColor" }] : []));
+    textColor = input('', ...(ngDevMode ? [{ debugName: "textColor" }] : []));
+    borderColor = input('', ...(ngDevMode ? [{ debugName: "borderColor" }] : []));
+    borderRadius = input('', ...(ngDevMode ? [{ debugName: "borderRadius" }] : []));
+    padding = input('', ...(ngDevMode ? [{ debugName: "padding" }] : []));
+    /** Classe(s) CSS adicionais aplicadas ao painel do popover. */
+    styleClass = input('', ...(ngDevMode ? [{ debugName: "styleClass" }] : []));
+    /** Classe(s) CSS adicionais aplicadas ao painel do overlay (CDK). */
+    panelClass = input('', ...(ngDevMode ? [{ debugName: "panelClass" }] : []));
+    role = input('dialog', ...(ngDevMode ? [{ debugName: "role" }] : []));
+    ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    ariaLabelledBy = input('', ...(ngDevMode ? [{ debugName: "ariaLabelledBy" }] : []));
+    closeAriaLabel = input('Fechar', ...(ngDevMode ? [{ debugName: "closeAriaLabel" }] : []));
+    dataCy = input('', ...(ngDevMode ? [{ debugName: "dataCy" }] : []));
+    /** Emitido após o popover ser aberto. */
+    shown = output();
+    /** Emitido após o popover ser fechado. */
+    hidden = output();
+    /** Emitido quando o ponteiro entra/sai do painel (usado pelo gatilho `hover`). */
+    panelHoverChange = output();
+    /** `true` enquanto o popover está aberto. */
+    isOpen = this.openState.asReadonly();
+    constructor() {
+        this.destroyRef.onDestroy(() => this.dispose());
+    }
+    /** Abre o popover se estiver fechado (ou aberto em outra origem); fecha se já estiver aberto na mesma origem. */
+    toggle(event, target, options = {}) {
+        const origin = this.resolveOrigin(event, target);
+        if (!origin) {
+            return;
+        }
+        if (this.openState() && this.origin === origin) {
+            this.hide();
+            return;
+        }
+        this.show(event, origin, options);
+    }
+    /** Abre o popover ancorado em `target` (ou em `event.currentTarget`). */
+    show(event, target, options = {}) {
+        const origin = this.resolveOrigin(event, target);
+        if (!origin) {
+            return;
+        }
+        if (this.openState()) {
+            if (this.origin === origin) {
+                return;
+            }
+            this.close(false);
+        }
+        this.origin = origin;
+        this.placement.set(this.position());
+        const positionStrategy = this.overlay
+            .position()
+            .flexibleConnectedTo(origin)
+            .withPositions(buildPopoverPositions(this.position(), this.align(), this.offset()))
+            .withFlexibleDimensions(false)
+            .withPush(false)
+            .withViewportMargin(8);
+        const overlayRef = this.overlay.create({
+            positionStrategy,
+            scrollStrategy: this.overlay.scrollStrategies.reposition(),
+            panelClass: this.panelClass(),
+        });
+        this.overlayRef = overlayRef;
+        this.subscriptions.add(positionStrategy.positionChanges.subscribe((change) => this.onPositionChange(change)));
+        this.subscriptions.add(overlayRef.outsidePointerEvents().subscribe((event) => {
+            if (this.dismissable() && !this.origin?.contains(event.target)) {
+                this.close(false);
+            }
+        }));
+        this.subscriptions.add(overlayRef.keydownEvents().subscribe((event) => {
+            if (event.key === 'Escape' && this.closeOnEscape()) {
+                event.preventDefault();
+                this.close(true);
+            }
+        }));
+        overlayRef.attach(new TemplatePortal(this.panelTemplate(), this.viewContainerRef));
+        this.openState.set(true);
+        this.setOriginAria(origin, true);
+        if (options.focus ?? this.focusOnShow()) {
+            this.focusPanel(overlayRef.overlayElement);
+        }
+        this.shown.emit();
+    }
+    /** Fecha o popover. */
+    hide() {
+        this.close(true);
+    }
+    /** Recalcula a posição (útil se a origem mudou de lugar ou o conteúdo mudou de tamanho). */
+    reposition() {
+        this.overlayRef?.updatePosition();
+    }
+    /** Indica se o nó está dentro do painel do popover aberto. */
+    containsNode(node) {
+        return !!node && !!this.overlayRef?.overlayElement.contains(node);
+    }
+    onCloseClick() {
+        this.close(true);
+    }
+    close(restoreFocus) {
+        const overlayRef = this.overlayRef;
+        if (!overlayRef) {
+            return;
+        }
+        const origin = this.origin;
+        const shouldRestoreFocus = restoreFocus && this.focusMoved;
+        this.overlayRef = null;
+        this.origin = null;
+        this.focusMoved = false;
+        this.subscriptions.unsubscribe();
+        this.subscriptions = new Subscription();
+        overlayRef.dispose();
+        this.openState.set(false);
+        this.setOriginAria(origin, false);
+        if (shouldRestoreFocus) {
+            origin?.focus({ preventScroll: true });
+        }
+        this.hidden.emit();
+    }
+    dispose() {
+        this.subscriptions.unsubscribe();
+        this.overlayRef?.dispose();
+        this.overlayRef = null;
+        this.origin = null;
+    }
+    onPositionChange(change) {
+        const panelClass = change.connectionPair.panelClass;
+        const value = Array.isArray(panelClass) ? panelClass[0] : panelClass;
+        if (typeof value === 'string' && value.startsWith(CAO_POPOVER_POSITION_PREFIX)) {
+            this.placement.set(value.slice(CAO_POPOVER_POSITION_PREFIX.length));
+        }
+    }
+    resolveOrigin(event, target) {
+        if (target) {
+            return target instanceof ElementRef ? target.nativeElement : target;
+        }
+        return (event?.currentTarget ?? event?.target ?? null);
+    }
+    focusPanel(overlayElement) {
+        const panel = overlayElement.querySelector('.cao-popover');
+        const target = panel?.querySelector(`.cao-popover__content ${FOCUSABLE_SELECTOR}`) ?? panel;
+        if (target) {
+            target.focus({ preventScroll: true });
+            this.focusMoved = true;
+        }
+    }
+    setOriginAria(origin, open) {
+        if (!origin) {
+            return;
+        }
+        origin.setAttribute('aria-expanded', String(open));
+        if (open) {
+            if (this.role() === 'dialog') {
+                origin.setAttribute('aria-haspopup', 'dialog');
+            }
+            origin.setAttribute('aria-controls', this.panelId);
+        }
+        else {
+            origin.removeAttribute('aria-controls');
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoPopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CaoPopoverComponent, isStandalone: true, selector: "cao-popover", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null }, showArrow: { classPropertyName: "showArrow", publicName: "showArrow", isSignal: true, isRequired: false, transformFunction: null }, dismissable: { classPropertyName: "dismissable", publicName: "dismissable", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, showCloseIcon: { classPropertyName: "showCloseIcon", publicName: "showCloseIcon", isSignal: true, isRequired: false, transformFunction: null }, focusOnShow: { classPropertyName: "focusOnShow", publicName: "focusOnShow", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, bgColor: { classPropertyName: "bgColor", publicName: "bgColor", isSignal: true, isRequired: false, transformFunction: null }, textColor: { classPropertyName: "textColor", publicName: "textColor", isSignal: true, isRequired: false, transformFunction: null }, borderColor: { classPropertyName: "borderColor", publicName: "borderColor", isSignal: true, isRequired: false, transformFunction: null }, borderRadius: { classPropertyName: "borderRadius", publicName: "borderRadius", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null }, closeAriaLabel: { classPropertyName: "closeAriaLabel", publicName: "closeAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, dataCy: { classPropertyName: "dataCy", publicName: "dataCy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { shown: "shown", hidden: "hidden", panelHoverChange: "panelHoverChange" }, viewQueries: [{ propertyName: "panelTemplate", first: true, predicate: ["panelTemplate"], descendants: true, isSignal: true }], exportAs: ["caoPopover"], ngImport: i0, template: "<ng-template #panelTemplate>\n  <div\n    [ngClass]=\"'cao-popover'\"\n    tabindex=\"-1\"\n    [id]=\"panelId\"\n    [class]=\"styleClass()\"\n    [class.cao-popover--top]=\"placement() === 'top'\"\n    [class.cao-popover--bottom]=\"placement() === 'bottom'\"\n    [class.cao-popover--left]=\"placement() === 'left'\"\n    [class.cao-popover--right]=\"placement() === 'right'\"\n    [class.cao-popover--align-start]=\"align() === 'start'\"\n    [class.cao-popover--align-center]=\"align() === 'center'\"\n    [class.cao-popover--align-end]=\"align() === 'end'\"\n    [class.cao-popover--no-arrow]=\"!showArrow()\"\n    [attr.role]=\"role() || null\"\n    [attr.aria-label]=\"ariaLabel() || null\"\n    [attr.aria-labelledby]=\"ariaLabelledBy() || null\"\n    [attr.data-cy]=\"dataCy() || null\"\n    [style.width]=\"width() || null\"\n    [style.max-width]=\"maxWidth() || null\"\n    [style.--cao-popover-bg]=\"bgColor() || null\"\n    [style.--cao-popover-text]=\"textColor() || null\"\n    [style.--cao-popover-border-color]=\"borderColor() || null\"\n    [style.--cao-popover-radius]=\"borderRadius() || null\"\n    [style.--cao-popover-padding]=\"padding() || null\"\n    (mouseenter)=\"panelHoverChange.emit(true)\"\n    (mouseleave)=\"panelHoverChange.emit(false)\">\n    @if (showArrow()) {\n      <span class=\"cao-popover__arrow\" aria-hidden=\"true\"></span>\n    }\n\n    <div class=\"cao-popover__content\" [class.cao-popover__content--with-close]=\"showCloseIcon()\">\n      <ng-content />\n    </div>\n\n    @if (showCloseIcon()) {\n      <button type=\"button\" class=\"cao-popover__close\" [attr.aria-label]=\"closeAriaLabel()\" (click)=\"onCloseClick()\">\n        <svg viewBox=\"0 0 24 24\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" aria-hidden=\"true\" focusable=\"false\">\n          <path d=\"M6 6l12 12M18 6L6 18\" />\n        </svg>\n      </button>\n    }\n  </div>\n</ng-template>", styles: [":host{display:contents}.cao-popover{--_bg: var(--cao-popover-bg, #ffffff);--_text: var(--cao-popover-text, #111827);--_border: var(--cao-popover-border-color, #e5e7eb);--_radius: var(--cao-popover-radius, 8px);--_padding: var(--cao-popover-padding, 12px 16px);--_shadow: var(--cao-popover-shadow, 0 10px 25px -5px rgba(17, 24, 39, .15), 0 4px 10px -6px rgba(17, 24, 39, .12));--_focus: var(--cao-popover-focus-ring, rgba(79, 70, 229, .35));--_arrow-size: 10px;--_arrow-offset: 16px;position:relative;box-sizing:border-box;border:1px solid var(--_border);border-radius:var(--_radius);background-color:var(--_bg);box-shadow:var(--_shadow);color:var(--_text);font-size:.875rem;line-height:1.5;outline:none;animation:cao-popover-in .15s ease-out}.cao-popover:focus-visible{box-shadow:var(--_shadow),0 0 0 3px var(--_focus)}.cao-popover__content{padding:var(--_padding);overflow-wrap:anywhere}.cao-popover__content--with-close{padding-right:40px}.cao-popover__close{position:absolute;top:8px;right:8px;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:0;border-radius:4px;background:none;color:#6b7280;cursor:pointer}.cao-popover__close:hover{background-color:#f3f4f6;color:#111827}.cao-popover__close:focus-visible{outline:2px solid var(--_focus);outline-offset:1px}.cao-popover__arrow{position:absolute;width:var(--_arrow-size);height:var(--_arrow-size);background-color:var(--_bg);transform:rotate(45deg)}.cao-popover--bottom .cao-popover__arrow{top:calc(var(--_arrow-size) / -2 - 1px);border-top:1px solid var(--_border);border-left:1px solid var(--_border)}.cao-popover--top .cao-popover__arrow{bottom:calc(var(--_arrow-size) / -2 - 1px);border-right:1px solid var(--_border);border-bottom:1px solid var(--_border)}.cao-popover--right .cao-popover__arrow{left:calc(var(--_arrow-size) / -2 - 1px);border-bottom:1px solid var(--_border);border-left:1px solid var(--_border)}.cao-popover--left .cao-popover__arrow{right:calc(var(--_arrow-size) / -2 - 1px);border-top:1px solid var(--_border);border-right:1px solid var(--_border)}.cao-popover--top.cao-popover--align-center .cao-popover__arrow,.cao-popover--bottom.cao-popover--align-center .cao-popover__arrow{left:calc(50% - var(--_arrow-size) / 2)}.cao-popover--top.cao-popover--align-start .cao-popover__arrow,.cao-popover--bottom.cao-popover--align-start .cao-popover__arrow{left:var(--_arrow-offset)}.cao-popover--top.cao-popover--align-end .cao-popover__arrow,.cao-popover--bottom.cao-popover--align-end .cao-popover__arrow{right:var(--_arrow-offset)}.cao-popover--left.cao-popover--align-center .cao-popover__arrow,.cao-popover--right.cao-popover--align-center .cao-popover__arrow{top:calc(50% - var(--_arrow-size) / 2)}.cao-popover--left.cao-popover--align-start .cao-popover__arrow,.cao-popover--right.cao-popover--align-start .cao-popover__arrow{top:var(--_arrow-offset)}.cao-popover--left.cao-popover--align-end .cao-popover__arrow,.cao-popover--right.cao-popover--align-end .cao-popover__arrow{bottom:var(--_arrow-offset)}@keyframes cao-popover-in{0%{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}@media(prefers-reduced-motion:reduce){.cao-popover{animation:none}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoPopoverComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cao-popover', imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'caoPopover', template: "<ng-template #panelTemplate>\n  <div\n    [ngClass]=\"'cao-popover'\"\n    tabindex=\"-1\"\n    [id]=\"panelId\"\n    [class]=\"styleClass()\"\n    [class.cao-popover--top]=\"placement() === 'top'\"\n    [class.cao-popover--bottom]=\"placement() === 'bottom'\"\n    [class.cao-popover--left]=\"placement() === 'left'\"\n    [class.cao-popover--right]=\"placement() === 'right'\"\n    [class.cao-popover--align-start]=\"align() === 'start'\"\n    [class.cao-popover--align-center]=\"align() === 'center'\"\n    [class.cao-popover--align-end]=\"align() === 'end'\"\n    [class.cao-popover--no-arrow]=\"!showArrow()\"\n    [attr.role]=\"role() || null\"\n    [attr.aria-label]=\"ariaLabel() || null\"\n    [attr.aria-labelledby]=\"ariaLabelledBy() || null\"\n    [attr.data-cy]=\"dataCy() || null\"\n    [style.width]=\"width() || null\"\n    [style.max-width]=\"maxWidth() || null\"\n    [style.--cao-popover-bg]=\"bgColor() || null\"\n    [style.--cao-popover-text]=\"textColor() || null\"\n    [style.--cao-popover-border-color]=\"borderColor() || null\"\n    [style.--cao-popover-radius]=\"borderRadius() || null\"\n    [style.--cao-popover-padding]=\"padding() || null\"\n    (mouseenter)=\"panelHoverChange.emit(true)\"\n    (mouseleave)=\"panelHoverChange.emit(false)\">\n    @if (showArrow()) {\n      <span class=\"cao-popover__arrow\" aria-hidden=\"true\"></span>\n    }\n\n    <div class=\"cao-popover__content\" [class.cao-popover__content--with-close]=\"showCloseIcon()\">\n      <ng-content />\n    </div>\n\n    @if (showCloseIcon()) {\n      <button type=\"button\" class=\"cao-popover__close\" [attr.aria-label]=\"closeAriaLabel()\" (click)=\"onCloseClick()\">\n        <svg viewBox=\"0 0 24 24\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" aria-hidden=\"true\" focusable=\"false\">\n          <path d=\"M6 6l12 12M18 6L6 18\" />\n        </svg>\n      </button>\n    }\n  </div>\n</ng-template>", styles: [":host{display:contents}.cao-popover{--_bg: var(--cao-popover-bg, #ffffff);--_text: var(--cao-popover-text, #111827);--_border: var(--cao-popover-border-color, #e5e7eb);--_radius: var(--cao-popover-radius, 8px);--_padding: var(--cao-popover-padding, 12px 16px);--_shadow: var(--cao-popover-shadow, 0 10px 25px -5px rgba(17, 24, 39, .15), 0 4px 10px -6px rgba(17, 24, 39, .12));--_focus: var(--cao-popover-focus-ring, rgba(79, 70, 229, .35));--_arrow-size: 10px;--_arrow-offset: 16px;position:relative;box-sizing:border-box;border:1px solid var(--_border);border-radius:var(--_radius);background-color:var(--_bg);box-shadow:var(--_shadow);color:var(--_text);font-size:.875rem;line-height:1.5;outline:none;animation:cao-popover-in .15s ease-out}.cao-popover:focus-visible{box-shadow:var(--_shadow),0 0 0 3px var(--_focus)}.cao-popover__content{padding:var(--_padding);overflow-wrap:anywhere}.cao-popover__content--with-close{padding-right:40px}.cao-popover__close{position:absolute;top:8px;right:8px;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:0;border-radius:4px;background:none;color:#6b7280;cursor:pointer}.cao-popover__close:hover{background-color:#f3f4f6;color:#111827}.cao-popover__close:focus-visible{outline:2px solid var(--_focus);outline-offset:1px}.cao-popover__arrow{position:absolute;width:var(--_arrow-size);height:var(--_arrow-size);background-color:var(--_bg);transform:rotate(45deg)}.cao-popover--bottom .cao-popover__arrow{top:calc(var(--_arrow-size) / -2 - 1px);border-top:1px solid var(--_border);border-left:1px solid var(--_border)}.cao-popover--top .cao-popover__arrow{bottom:calc(var(--_arrow-size) / -2 - 1px);border-right:1px solid var(--_border);border-bottom:1px solid var(--_border)}.cao-popover--right .cao-popover__arrow{left:calc(var(--_arrow-size) / -2 - 1px);border-bottom:1px solid var(--_border);border-left:1px solid var(--_border)}.cao-popover--left .cao-popover__arrow{right:calc(var(--_arrow-size) / -2 - 1px);border-top:1px solid var(--_border);border-right:1px solid var(--_border)}.cao-popover--top.cao-popover--align-center .cao-popover__arrow,.cao-popover--bottom.cao-popover--align-center .cao-popover__arrow{left:calc(50% - var(--_arrow-size) / 2)}.cao-popover--top.cao-popover--align-start .cao-popover__arrow,.cao-popover--bottom.cao-popover--align-start .cao-popover__arrow{left:var(--_arrow-offset)}.cao-popover--top.cao-popover--align-end .cao-popover__arrow,.cao-popover--bottom.cao-popover--align-end .cao-popover__arrow{right:var(--_arrow-offset)}.cao-popover--left.cao-popover--align-center .cao-popover__arrow,.cao-popover--right.cao-popover--align-center .cao-popover__arrow{top:calc(50% - var(--_arrow-size) / 2)}.cao-popover--left.cao-popover--align-start .cao-popover__arrow,.cao-popover--right.cao-popover--align-start .cao-popover__arrow{top:var(--_arrow-offset)}.cao-popover--left.cao-popover--align-end .cao-popover__arrow,.cao-popover--right.cao-popover--align-end .cao-popover__arrow{bottom:var(--_arrow-offset)}@keyframes cao-popover-in{0%{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}@media(prefers-reduced-motion:reduce){.cao-popover{animation:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { panelTemplate: [{ type: i0.ViewChild, args: ['panelTemplate', { isSignal: true }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "offset", required: false }] }], showArrow: [{ type: i0.Input, args: [{ isSignal: true, alias: "showArrow", required: false }] }], dismissable: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissable", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], showCloseIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCloseIcon", required: false }] }], focusOnShow: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusOnShow", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], bgColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "bgColor", required: false }] }], textColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "textColor", required: false }] }], borderColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderColor", required: false }] }], borderRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderRadius", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledBy", required: false }] }], closeAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeAriaLabel", required: false }] }], dataCy: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataCy", required: false }] }], shown: [{ type: i0.Output, args: ["shown"] }], hidden: [{ type: i0.Output, args: ["hidden"] }], panelHoverChange: [{ type: i0.Output, args: ["panelHoverChange"] }] } });
+
 class BaseModalService {
     constructor() { }
     toggleModalEvent = new EventEmitter();
@@ -4857,5 +5190,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, CAO_ACCORDION, CaoAccordionComponent, CaoAccordionItemComponent, CaoAutocompleteComponent, CaoBaseButtonComponent, CaoBaseIcon, CaoBaseInput, CaoBaseToggleComponent, CaoBaseWidgetComponent, CaoBreadcrumbComponent, 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 };
+export { BaseAlert, BaseAlertService, BaseDialog, BaseDialogService, BaseFilterTablePaginatedService, BaseFilterTableService, BaseModal, BaseModalService, BasePaginationService, BaseTable, BaseTablePaginated, BaseTableService, BaseTimeRange, CAO_ACCORDION, CAO_POPOVER_POSITION_PREFIX, CaoAccordionComponent, CaoAccordionItemComponent, CaoAutocompleteComponent, CaoBaseButtonComponent, CaoBaseIcon, CaoBaseInput, CaoBaseToggleComponent, CaoBaseWidgetComponent, CaoBreadcrumbComponent, CaoCardComponent, CaoCheckboxComponent, CaoDropDownComponent, CaoError, CaoFormField, CaoHint, CaoKpi, CaoPopoverComponent, CaoProgressBarComponent, CaoProgressSpinnerComponent, CaoRadioButtonComponent, CaoRadioGroupComponent, CaoSkeletonComponent, CaoSlideToggleComponent, CaoTabGroup, CaoTabPanel, CaoWidgetService, DEFAULT_ERROR_STATE_MATCHER, ErrorStateMatcher, Footer, LinksButton, Paginator, ShowOnDirtyErrorStateMatcher, StepComponent, StepperComponent, TablePaginatedService, TimePicker, buildPopoverPositions, getPtBrPaginatorIntlBasePaginated, getPtBrPaginatorIntlBaseTable };
 //# sourceMappingURL=ngx-opalbytes-components.mjs.map