ngx-opalbytes-components 1.28.0 → 1.29.0

package/README.md

@@ -234,11 +234,13 @@ src/
         └── components/
         |   ├── accordion/
         |   ├── accordion-item/
+        |   ├── avatar/
         |   ├── base-button/
         |   ├── base-icon/
         |   ├── base-input/
         |   ├── base-time-range/
         |   ├── base-toggle/
+        |   ├── breadcrumb/
         |   ├── checkbox/
         |   ├── drop-down/
         |   ├── footer/
@@ -930,6 +932,61 @@ Um componente de alternância (toggle switch) que funciona com `ngModel` ou `for
 | `inputChange` | `EventEmitter<string>` | Emitido a cada mudança no input. |
 | `statusChanged` | `EventEmitter<CaoBaseToggleComponent>` | Emitido quando o toggle é alternado. |
 
+---
+
+### `CaoBreadcrumbComponent`
+ 
+Trilha de navegação (breadcrumb) com ícones Lucide ou imagem, link de navegação, badge e divisor customizável.
+ 
+**Seletor:** `<cao-breadcrumb>`
+ 
+**Interface `ICaoBreadcrumbItem`**
+ 
+| Propriedade | Tipo | Padrão | Descrição |
+| --- | --- | --- | --- |
+| `label` | `string` | — | Texto do item. |
+| `icon` | `string` | — | Nome do ícone Lucide ou URL/caminho/data URI de imagem. |
+| `isLucideIcon` | `boolean` | `true` | Define se `icon` é Lucide. |
+| `iconPosition` | `'left' \| 'right'` | `'left'` | Direção do ícone em relação ao texto. |
+| `iconColor` / `iconSize` / `iconStrokeWidth` | `string` / `number` / `number` | — / `16` / `1.5` | Aparência do ícone. |
+| `link` | `string \| unknown[]` | — | Navegação interna (`routerLink`). |
+| `queryParams` | `Params` | — | Query params do `link`. |
+| `href` / `target` | `string` / `'_self' \| '_blank' ...` | — | Navegação externa. |
+| `command` | `(e: ICaoBreadcrumbItemClickEvent) => void` | — | Callback de clique (sem `link`/`href` vira `<button>`). |
+| `badge` / `badgeColor` / `badgeBgColor` | `string \| number` / `string` / `string` | — | Badge do item. |
+| `disabled` | `boolean` | `false` | Desabilita o item. |
+| `ariaLabel` / `dataCy` | `string` | — | Acessibilidade e testes E2E. |
+ 
+**Atributos (Inputs)**
+ 
+| Atributo | Tipo | Padrão | Descrição |
+| --- | --- | --- | --- |
+| `items` | `ICaoBreadcrumbItem[]` | `[]` | Itens; o último é a página atual (`aria-current="page"`). |
+| `home` | `ICaoBreadcrumbItem` | `undefined` | Item inicial opcional. |
+| `separator` | `string` | `'/'` | Texto do divisor. |
+| `separatorIcon` | `string` | `''` | Ícone do divisor (sobrepõe `separator`). |
+| `isLucideSeparatorIcon` | `boolean` | `true` | Define se `separatorIcon` é Lucide. |
+| `separatorIconSize` / `separatorIconStrokeWidth` | `number` | `14` / `1.5` | Aparência do ícone divisor. |
+| `linkColor`, `linkHoverColor`, `currentColor`, `separatorColor`, `fontSize`, `gap` | `string` | `''` | Atalhos para as CSS custom properties. |
+| `ariaLabel` | `string` | `'Breadcrumb'` | `aria-label` do `<nav>`. |
+| `dataCy` | `string` | `''` | Atributo para testes E2E. |
+ 
+**Eventos (Outputs):** `itemClick` → `ICaoBreadcrumbItemClickEvent` (`item`, `index`, `originalEvent`).
+ 
+**CSS Custom Properties:** `--cao-breadcrumb-link-color` (`#6b7280`), `--cao-breadcrumb-link-hover-color` (`#4f46e5`), `--cao-breadcrumb-current-color` (`#111827`), `--cao-breadcrumb-separator-color` (`#9ca3af`), `--cao-breadcrumb-disabled-color`, `--cao-breadcrumb-focus-ring`, `--cao-breadcrumb-badge-bg`, `--cao-breadcrumb-badge-text`, `--cao-breadcrumb-gap` (`8px`), `--cao-breadcrumb-font-size` (`0.875rem`).
+ 
+```html
+<cao-breadcrumb
+  [home]="{ icon: 'house', ariaLabel: 'Início', link: '/' }"
+  [items]="[
+    { label: 'Pedidos', icon: 'package', iconPosition: 'right', link: '/pedidos', badge: 12 },
+    { label: 'Pedido #42' }
+  ]"
+  separatorIcon="chevron-right" />
+```
+ 
+> Depende de `BaseIcon` (copie junto ao usar `cao-comp`) e de `@angular/router`.
+
 ---
 ### `CaoAccordionComponent` e `CaoAccordionItemComponent`
 
@@ -1130,7 +1187,110 @@ export class FaqComponent {}
 - Fora de um `<cao-accordion>`, o item se comporta como um cartão expansível independente.
 
 ---
+### `CaoAvatarComponent`
+
+Avatar para representar usuários ou entidades, com imagem, ícone (Lucide ou imagem) ou texto (iniciais). Possui imagem padrão embutida, usada enquanto nenhuma fonte for informada ou quando a imagem falha ao carregar. Tamanho, formato e contorno (stroke) são configuráveis.
+
+**Seletor:** `<cao-avatar>`
+
+**Tipos**
 
+| Tipo | Valores |
+| --- | --- |
+| `CaoAvatarPresetSize` | `'small'` (24px) \| `'normal'` (32px) \| `'large'` (48px) \| `'xlarge'` (64px) |
+| `CaoAvatarShape` | `'circle'` \| `'rounded'` \| `'square'` |
+| `CaoAvatarStrokeStyle` | `'solid'` \| `'dashed'` \| `'dotted'` \| `'double'` |
+
+**Atributos (Inputs)**
+
+| Atributo | Tipo | Padrão | Descrição |
+| --- | --- | --- | --- |
+| `src` | `string \| null \| undefined` | `''` | URL da imagem. Se vazia ou se falhar ao carregar, o avatar usa `icon`, `label` ou a imagem padrão (nessa ordem). |
+| `defaultSrc` | `string` | `''` | Imagem padrão customizada. Se vazia, usa a silhueta embutida (`CAO_AVATAR_DEFAULT_SRC`). |
+| `label` | `string` | `''` | Texto exibido (ex.: iniciais) quando não há imagem nem ícone. |
+| `icon` | `string` | `''` | Nome do ícone Lucide ou caminho/URL de imagem usada como ícone. |
+| `isLucideIcon` | `boolean` | `true` | Define se `icon` é um ícone Lucide. |
+| `iconColor` | `string` | `''` | Cor do ícone Lucide. Se vazia, usa `textColor`. |
+| `size` | `CaoAvatarPresetSize \| number \| string` | `'normal'` | Tamanho predefinido, número em px ou texto (`'72px'`, `'4.5rem'`). Valores inválidos voltam para `'normal'`. |
+| `shape` | `CaoAvatarShape` | `'circle'` | Formato do avatar. |
+| `strokeWidth` | `number \| string` | `0` | Espessura do contorno. Número é convertido para `px`; `0` remove o contorno. |
+| `strokeColor` | `string` | `'#ffffff'` | Cor do contorno. |
+| `strokeStyle` | `CaoAvatarStrokeStyle` | `'solid'` | Estilo do contorno. |
+| `bgColor` | `string` | `''` | Cor de fundo (sobrescreve `--cao-avatar-bg`). |
+| `textColor` | `string` | `''` | Cor do texto/ícone (sobrescreve `--cao-avatar-text`). |
+| `alt` | `string` | `''` | Texto alternativo do avatar. |
+| `ariaLabel` | `string` | `''` | `aria-label` do avatar. Prioridade: `ariaLabel` → `alt` → `label` → `'Avatar'`. |
+| `dataCy` | `string` | `''` | Atributo para testes E2E com Cypress. |
+
+**Ordem de exibição**
+
+1. `src` (se informado e carregado com sucesso);
+2. `icon`;
+3. `label`;
+4. imagem padrão (`defaultSrc` ou a silhueta embutida).
+
+Se o `src` falhar ao carregar (erro 404, URL inválida etc.), o componente passa automaticamente para o próximo item da lista.
+
+**Constantes exportadas**
+
+| Constante | Descrição |
+| --- | --- |
+| `CAO_AVATAR_DEFAULT_SRC` | Data URI da imagem padrão (silhueta em SVG, funciona offline). |
+| `CAO_AVATAR_SIZES` | Mapa dos tamanhos predefinidos em px (`small`, `normal`, `large`, `xlarge`). |
+
+**CSS Custom Properties**
+
+| Propriedade | Padrão | Descrição |
+| --- | --- | --- |
+| `--cao-avatar-bg` | `#e5e7eb` | Cor de fundo. |
+| `--cao-avatar-text` | `#374151` | Cor do texto/ícone. |
+| `--cao-avatar-radius` | `25%` | Raio da borda no formato `rounded`. |
+
+**Exemplo básico:**
+
+```html
+<!-- Sem src: exibe a imagem padrão -->
+<cao-avatar></cao-avatar>
+
+<!-- Com imagem -->
+<cao-avatar src="https://exemplo.com/foto.png" alt="Foto de Maria" size="large"></cao-avatar>
+
+<!-- Com iniciais -->
+<cao-avatar label="MB" bgColor="#eef2ff" textColor="#4338ca"></cao-avatar>
+
+<!-- Com ícone Lucide -->
+<cao-avatar icon="user" bgColor="#dcfce7" iconColor="#166534"></cao-avatar>
+```
+
+**Exemplo com tamanho, formato e contorno:**
+
+```html
+<cao-avatar src="assets/foto.png" size="xlarge" shape="rounded"></cao-avatar>
+<cao-avatar src="assets/foto.png" [size]="96" shape="square"></cao-avatar>
+<cao-avatar src="assets/foto.png" size="7rem"></cao-avatar>
+
+<cao-avatar
+  src="assets/foto.png"
+  size="xlarge"
+  [strokeWidth]="3"
+  strokeColor="#4f46e5"
+  strokeStyle="dashed">
+</cao-avatar>
+```
+
+**Exemplo com imagem padrão customizada:**
+
+```html
+<cao-avatar [src]="usuario.foto" defaultSrc="assets/avatar-padrao.png"></cao-avatar>
+```
+
+**Observações:**
+
+- Possui `role="img"` com `aria-label`; a imagem interna é decorativa (`alt=""`), evitando leitura duplicada.
+- A imagem padrão é um SVG em data URI e passa por `DomSanitizer.bypassSecurityTrustUrl` (conteúdo controlado pela lib). Data URIs em SVG informadas em `src` **não** recebem esse tratamento e podem ser bloqueadas pelo sanitizador do Angular — use URL, caminho de arquivo ou PNG/JPEG em base64.
+- Para ícones Lucide, registre os ícones usados com `provideLucideIcons` (de `@lucide/angular`).
+- Depende de `BaseIcon` (copie junto ao usar `cao-comp`).
+---
 ### `CaoSlideToggleComponent`
 
 Um switch (slide toggle) acessível e customizável, com suporte a `ngModel` e formulários reativos via `ControlValueAccessor`. O visual é construído com trilho e thumb animados, sem depender do Material em runtime.

package/cli/cao-comp.cjs

@@ -185,7 +185,7 @@ import { fn } from 'storybook/test';
 import { CaoBaseButtonComponent } from '../../app/components/base-button/base-button.component';
 
 const meta: Meta<CaoBaseButtonComponent> = {
-  title: 'Components/Base Button',
+  title: 'Componentes/Base Button',
   component: CaoBaseButtonComponent,
   tags: ['autodocs'],
   args: { buttonClick: fn() },
@@ -327,18 +327,18 @@ function setupStorybook(destination, force) {
   if (conflicts.length) {
     process.stderr.write(
       `Erro: os seguintes arquivos ja existem no destino (use --force para sobrescrever):\n` +
-        conflicts.map((c) => `  - ${c}`).join('\n') +
-        '\n'
+      conflicts.map((c) => `  - ${c}`).join('\n') +
+      '\n'
     );
     return 1;
   }
 
   process.stdout.write(
     `Setup de Storybook gerado em "${root}".\n` +
-      `Arquivos criados:\n` +
-      created.map((c) => `  - ${c}`).join('\n') +
-      '\n' +
-      `Leia ${path.join(root, 'STORYBOOK-SETUP.md')} para instalar as dependencias e rodar.\n`
+    `Arquivos criados:\n` +
+    created.map((c) => `  - ${c}`).join('\n') +
+    '\n' +
+    `Leia ${path.join(root, 'STORYBOOK-SETUP.md')} para instalar as dependencias e rodar.\n`
   );
   return 0;
 }
@@ -429,7 +429,7 @@ function main() {
     const available = listComponents(templatesDir).join(', ');
     process.stderr.write(
       `Erro: componente "${component}" nao encontrado.\n` +
-        `Componentes disponiveis: ${available}\n`
+      `Componentes disponiveis: ${available}\n`
     );
     return 1;
   }
@@ -441,8 +441,8 @@ function main() {
   if (conflicts.length) {
     process.stderr.write(
       `Erro: os seguintes arquivos ja existem no destino (use --force para sobrescrever):\n` +
-        conflicts.map((c) => `  - ${c}`).join('\n') +
-        '\n'
+      conflicts.map((c) => `  - ${c}`).join('\n') +
+      '\n'
     );
     return 1;
   }

package/fesm2022/ngx-opalbytes-components.mjs

@@ -22,7 +22,7 @@ import { ScrollDispatcher, CdkScrollable } from '@angular/cdk/scrolling';
 import { BehaviorSubject, Subscription, combineLatest, startWith, map, Subject } from 'rxjs';
 import * as i1$2 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import { Router, ActivatedRoute } from '@angular/router';
+import { Router, ActivatedRoute, RouterLink } from '@angular/router';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import * as i2$3 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
@@ -3501,6 +3501,61 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                 args: ["style"]
             }] } });
 
+class CaoBreadcrumbComponent {
+    /** Itens do breadcrumb. O último item é tratado como página atual. */
+    items = input([], ...(ngDevMode ? [{ debugName: "items" }] : []));
+    /** Item "home" opcional, sempre exibido como primeiro item. */
+    home = input(undefined, ...(ngDevMode ? [{ debugName: "home" }] : []));
+    /** Texto do divisor. Padrão: `'/'`. Ignorado se `separatorIcon` for informado. */
+    separator = input('/', ...(ngDevMode ? [{ debugName: "separator" }] : []));
+    /** Ícone do divisor (nome Lucide ou imagem). Tem prioridade sobre `separator`. */
+    separatorIcon = input('', ...(ngDevMode ? [{ debugName: "separatorIcon" }] : []));
+    isLucideSeparatorIcon = input(true, ...(ngDevMode ? [{ debugName: "isLucideSeparatorIcon" }] : []));
+    separatorIconSize = input(14, ...(ngDevMode ? [{ debugName: "separatorIconSize" }] : []));
+    separatorIconStrokeWidth = input(1.5, ...(ngDevMode ? [{ debugName: "separatorIconStrokeWidth" }] : []));
+    linkColor = input('', ...(ngDevMode ? [{ debugName: "linkColor" }] : []));
+    linkHoverColor = input('', ...(ngDevMode ? [{ debugName: "linkHoverColor" }] : []));
+    currentColor = input('', ...(ngDevMode ? [{ debugName: "currentColor" }] : []));
+    separatorColor = input('', ...(ngDevMode ? [{ debugName: "separatorColor" }] : []));
+    fontSize = input('', ...(ngDevMode ? [{ debugName: "fontSize" }] : []));
+    gap = input('', ...(ngDevMode ? [{ debugName: "gap" }] : []));
+    ariaLabel = input('Breadcrumb', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    dataCy = input('', ...(ngDevMode ? [{ debugName: "dataCy" }] : []));
+    /** Emitido ao clicar em qualquer item interativo. */
+    itemClick = output();
+    allItems = computed(() => {
+        const home = this.home();
+        return home ? [home, ...this.items()] : this.items();
+    }, ...(ngDevMode ? [{ debugName: "allItems" }] : []));
+    isInteractive(item, isLast) {
+        return !isLast && !item.disabled && (this.hasLink(item) || !!item.href || !!item.command);
+    }
+    hasLink(item) {
+        return item.link !== undefined && item.link !== null;
+    }
+    onItemClick(item, index, event) {
+        if (item.disabled) {
+            event.preventDefault();
+            return;
+        }
+        const payload = { item, index, originalEvent: event };
+        item.command?.(payload);
+        this.itemClick.emit(payload);
+    }
+    iconPosition(item) {
+        return item.iconPosition ?? 'left';
+    }
+    isLucide(item) {
+        return item.isLucideIcon ?? true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoBreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CaoBreadcrumbComponent, isStandalone: true, selector: "cao-breadcrumb", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, home: { classPropertyName: "home", publicName: "home", isSignal: true, isRequired: false, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null }, separatorIcon: { classPropertyName: "separatorIcon", publicName: "separatorIcon", isSignal: true, isRequired: false, transformFunction: null }, isLucideSeparatorIcon: { classPropertyName: "isLucideSeparatorIcon", publicName: "isLucideSeparatorIcon", isSignal: true, isRequired: false, transformFunction: null }, separatorIconSize: { classPropertyName: "separatorIconSize", publicName: "separatorIconSize", isSignal: true, isRequired: false, transformFunction: null }, separatorIconStrokeWidth: { classPropertyName: "separatorIconStrokeWidth", publicName: "separatorIconStrokeWidth", isSignal: true, isRequired: false, transformFunction: null }, linkColor: { classPropertyName: "linkColor", publicName: "linkColor", isSignal: true, isRequired: false, transformFunction: null }, linkHoverColor: { classPropertyName: "linkHoverColor", publicName: "linkHoverColor", isSignal: true, isRequired: false, transformFunction: null }, currentColor: { classPropertyName: "currentColor", publicName: "currentColor", isSignal: true, isRequired: false, transformFunction: null }, separatorColor: { classPropertyName: "separatorColor", publicName: "separatorColor", isSignal: true, isRequired: false, transformFunction: null }, fontSize: { classPropertyName: "fontSize", publicName: "fontSize", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, dataCy: { classPropertyName: "dataCy", publicName: "dataCy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick" }, ngImport: i0, 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"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: CaoBaseIcon, selector: "cao-base-icon", inputs: ["imgSource", "isLucideIcon", "strokeWidthIcon", "iconColor", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoBreadcrumbComponent, decorators: [{
+            type: Component,
+            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"] }] } });
+
 class BaseModalService {
     constructor() { }
     toggleModalEvent = new EventEmitter();
@@ -4802,5 +4857,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, 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, 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 };
 //# sourceMappingURL=ngx-opalbytes-components.mjs.map