ngx-opalbytes-components 1.29.0 → 1.30.0

package/src/lib/shared/components/progress-spinner/progress-spinner.stories.ts

@@ -0,0 +1,73 @@
+import { argsToTemplate, Meta, StoryObj } from '@storybook/angular-vite';
+
+import { CaoProgressSpinnerComponent } from './progress-spinner';
+
+const ROW = 'display:flex;gap:24px;align-items:center;flex-wrap:wrap';
+
+const meta: Meta<CaoProgressSpinnerComponent> = {
+  title: 'Componentes/Progress Spinner',
+  component: CaoProgressSpinnerComponent,
+  tags: ['autodocs'],
+  render: (args) => ({ props: args, template: `<cao-progress-spinner ${argsToTemplate(args)} />` }),
+  argTypes: {
+    mode: { control: 'inline-radio', options: ['determinate', 'indeterminate'] },
+    value: { control: { type: 'range', min: 0, max: 100, step: 1 } },
+    diameter: { control: { type: 'number', min: 8 } },
+    strokeWidth: { control: { type: 'number', min: 0 }, description: '0 = automático (10% do diâmetro).' },
+    strokeLinecap: { control: 'inline-radio', options: ['round', 'butt', 'square'] },
+    color: { control: 'color' },
+    trackColor: { control: 'color' },
+    textColor: { control: 'color' },
+    animationDuration: { control: 'text' },
+    showValue: { control: 'boolean' },
+    ariaLabel: { control: 'text' },
+  },
+  args: {
+    mode: 'indeterminate',
+    value: 65,
+    diameter: 48,
+    strokeWidth: 0,
+    strokeLinecap: 'round',
+    showValue: false,
+    ariaLabel: 'Carregando',
+  },
+};
+export default meta;
+
+type Story = StoryObj<CaoProgressSpinnerComponent>;
+
+export const Indeterminate: Story = {};
+
+export const Determinate: Story = { args: { mode: 'determinate', trackColor: '#e5e7eb' } };
+
+export const WithValue: Story = {
+  args: { mode: 'determinate', value: 72, diameter: 96, trackColor: '#e5e7eb', showValue: true },
+};
+
+export const CustomColors: Story = {
+  args: { mode: 'determinate', value: 60, diameter: 80, color: '#16a34a', trackColor: '#dcfce7', showValue: true },
+};
+
+export const Sizes: Story = {
+  render: () => ({
+    template: `
+      <div style="${ROW}">
+        <cao-progress-spinner [diameter]="16" ariaLabel="Muito pequeno" />
+        <cao-progress-spinner [diameter]="24" ariaLabel="Pequeno" />
+        <cao-progress-spinner [diameter]="48" ariaLabel="Médio" />
+        <cao-progress-spinner [diameter]="80" ariaLabel="Grande" />
+        <cao-progress-spinner [diameter]="120" [strokeWidth]="6" ariaLabel="Muito grande" />
+      </div>`,
+  }),
+};
+
+export const StrokeAndLinecap: Story = {
+  render: () => ({
+    template: `
+      <div style="${ROW}">
+        <cao-progress-spinner mode="determinate" [value]="70" [diameter]="64" [strokeWidth]="3" trackColor="#e5e7eb" />
+        <cao-progress-spinner mode="determinate" [value]="70" [diameter]="64" [strokeWidth]="10" trackColor="#e5e7eb" />
+        <cao-progress-spinner mode="determinate" [value]="70" [diameter]="64" [strokeWidth]="10" strokeLinecap="butt" trackColor="#e5e7eb" />
+      </div>`,
+  }),
+};

package/src/lib/shared/components/progress-spinner/progress-spinner.ts

@@ -0,0 +1,71 @@
+import { ChangeDetectionStrategy, Component, computed, input, numberAttribute } from '@angular/core';
+
+import { CaoProgressSpinnerLinecap, CaoProgressSpinnerMode } from './progress-spinner.model';
+
+const MIN_DIAMETER = 8;
+
+const clampPercent = (value: number): number => Math.min(100, Math.max(0, Number.isFinite(value) ? value : 0));
+
+@Component({
+  selector: 'cao-progress-spinner',
+  templateUrl: './progress-spinner.html',
+  styleUrl: './progress-spinner.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class CaoProgressSpinnerComponent {
+  /** Modo de exibição. Padrão: `'indeterminate'`. */
+  readonly mode = input<CaoProgressSpinnerMode>('indeterminate');
+  /** Progresso de 0 a 100 (modo `determinate`). */
+  readonly value = input(0, { transform: numberAttribute });
+  /** Diâmetro em px. */
+  readonly diameter = input(48, { transform: numberAttribute });
+  /** Espessura do traço em px. `0` = automático (10% do diâmetro). */
+  readonly strokeWidth = input(0, { transform: numberAttribute });
+  /** Formato da ponta do traço. */
+  readonly strokeLinecap = input<CaoProgressSpinnerLinecap>('round');
+
+  /** Cor do indicador (qualquer cor CSS). */
+  readonly color = input<string>('');
+  /** Cor do trilho (círculo de fundo). Padrão: transparente. */
+  readonly trackColor = input<string>('');
+  /** Duração de uma volta completa no modo indeterminado. */
+  readonly animationDuration = input<string>('');
+  /** Exibe o percentual no centro (modo `determinate`). */
+  readonly showValue = input<boolean>(false);
+  /** Cor do percentual. */
+  readonly textColor = input<string>('');
+
+  readonly ariaLabel = input<string>('');
+  readonly ariaLabelledBy = input<string>('');
+  readonly dataCy = input<string>('');
+
+  protected readonly isDeterminate = computed<boolean>(() => this.mode() === 'determinate');
+
+  protected readonly size = computed<number>(() => {
+    const diameter = this.diameter();
+    return Number.isFinite(diameter) ? Math.max(MIN_DIAMETER, diameter) : 48;
+  });
+
+  protected readonly stroke = computed<number>(() => {
+    const width = this.strokeWidth();
+    const raw = width > 0 ? width : this.size() * 0.1;
+    return Math.min(Math.max(raw, 1), this.size() / 2);
+  });
+
+  protected readonly center = computed<number>(() => this.size() / 2);
+  protected readonly radius = computed<number>(() => (this.size() - this.stroke()) / 2);
+  protected readonly circumference = computed<number>(() => 2 * Math.PI * this.radius());
+
+  protected readonly clampedValue = computed<number>(() => clampPercent(this.value()));
+
+  protected readonly dashOffset = computed<number | null>(() =>
+    this.isDeterminate() ? this.circumference() * (1 - this.clampedValue() / 100) : null,
+  );
+
+  protected readonly ariaValueNow = computed<number | null>(() =>
+    this.isDeterminate() ? Math.round(this.clampedValue()) : null,
+  );
+
+  protected readonly valueLabel = computed<string>(() => `${Math.round(this.clampedValue())}%`);
+  protected readonly fontSize = computed<number>(() => Math.max(8, Math.round(this.size() * 0.24)));
+}

package/types/ngx-opalbytes-components.d.ts

@@ -9,7 +9,7 @@ import { Router, ActivatedRoute, Params } from '@angular/router';
 import { PageEvent, MatPaginator, MatPaginatorIntl } from '@angular/material/paginator';
 import { DateAdapter } from '@angular/material/core';
 import { MatTimepickerOption } from '@angular/material/timepicker';
-import { Overlay, OverlayRef } from '@angular/cdk/overlay';
+import { ConnectedPosition, Overlay, OverlayRef } from '@angular/cdk/overlay';
 import { LiveAnnouncer } from '@angular/cdk/a11y';
 import { SelectionModel } from '@angular/cdk/collections';
 import { MatSort, Sort } from '@angular/material/sort';
@@ -1088,6 +1088,185 @@ declare class CaoBreadcrumbComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<CaoBreadcrumbComponent, "cao-breadcrumb", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "home": { "alias": "home"; "required": false; "isSignal": true; }; "separator": { "alias": "separator"; "required": false; "isSignal": true; }; "separatorIcon": { "alias": "separatorIcon"; "required": false; "isSignal": true; }; "isLucideSeparatorIcon": { "alias": "isLucideSeparatorIcon"; "required": false; "isSignal": true; }; "separatorIconSize": { "alias": "separatorIconSize"; "required": false; "isSignal": true; }; "separatorIconStrokeWidth": { "alias": "separatorIconStrokeWidth"; "required": false; "isSignal": true; }; "linkColor": { "alias": "linkColor"; "required": false; "isSignal": true; }; "linkHoverColor": { "alias": "linkHoverColor"; "required": false; "isSignal": true; }; "currentColor": { "alias": "currentColor"; "required": false; "isSignal": true; }; "separatorColor": { "alias": "separatorColor"; "required": false; "isSignal": true; }; "fontSize": { "alias": "fontSize"; "required": false; "isSignal": true; }; "gap": { "alias": "gap"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "dataCy": { "alias": "dataCy"; "required": false; "isSignal": true; }; }, { "itemClick": "itemClick"; }, never, never, true, never>;
 }
 
+/**
+ * Modo da barra de progresso (mesmos modos do Angular Material).
+ * - `determinate`: progresso conhecido, controlado por `value`.
+ * - `indeterminate`: progresso desconhecido, animação contínua.
+ * - `buffer`: `value` + `bufferValue` (ex.: carregamento de mídia).
+ * - `query`: indeterminado com animação invertida (ex.: aguardando resposta antes de um determinate).
+ */
+type CaoProgressBarMode = 'determinate' | 'indeterminate' | 'buffer' | 'query';
+
+declare class CaoProgressBarComponent {
+    /** Modo de exibição. Padrão: `'determinate'`. */
+    readonly mode: _angular_core.InputSignal<CaoProgressBarMode>;
+    /** Progresso de 0 a 100 (modos `determinate` e `buffer`). */
+    readonly value: _angular_core.InputSignalWithTransform<number, unknown>;
+    /** Valor do buffer de 0 a 100 (modo `buffer`). */
+    readonly bufferValue: _angular_core.InputSignalWithTransform<number, unknown>;
+    /** Cor da barra de progresso (qualquer cor CSS). */
+    readonly color: _angular_core.InputSignal<string>;
+    /** Cor do trilho. */
+    readonly trackColor: _angular_core.InputSignal<string>;
+    /** Cor do buffer (modo `buffer`). */
+    readonly bufferColor: _angular_core.InputSignal<string>;
+    /** Altura da barra. */
+    readonly height: _angular_core.InputSignal<string>;
+    /** Raio da borda. Padrão: totalmente arredondada. */
+    readonly borderRadius: _angular_core.InputSignal<string>;
+    /** Duração do ciclo da animação nos modos indeterminado/query/buffer. */
+    readonly animationDuration: _angular_core.InputSignal<string>;
+    /** Exibe o percentual ao lado da barra (modos `determinate` e `buffer`). */
+    readonly showValue: _angular_core.InputSignal<boolean>;
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    readonly ariaLabelledBy: _angular_core.InputSignal<string>;
+    readonly dataCy: _angular_core.InputSignal<string>;
+    protected readonly clampedValue: _angular_core.Signal<number>;
+    protected readonly clampedBuffer: _angular_core.Signal<number>;
+    protected readonly hasValue: _angular_core.Signal<boolean>;
+    protected readonly ariaValueNow: _angular_core.Signal<number | null>;
+    protected readonly valueLabel: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CaoProgressBarComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CaoProgressBarComponent, "cao-progress-bar", never, { "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "bufferValue": { "alias": "bufferValue"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "trackColor": { "alias": "trackColor"; "required": false; "isSignal": true; }; "bufferColor": { "alias": "bufferColor"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "borderRadius": { "alias": "borderRadius"; "required": false; "isSignal": true; }; "animationDuration": { "alias": "animationDuration"; "required": false; "isSignal": true; }; "showValue": { "alias": "showValue"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "ariaLabelledBy": { "alias": "ariaLabelledBy"; "required": false; "isSignal": true; }; "dataCy": { "alias": "dataCy"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Modo do spinner de progresso (mesmos modos do Angular Material).
+ * - `determinate`: progresso conhecido, controlado por `value`.
+ * - `indeterminate`: progresso desconhecido, animação contínua.
+ */
+type CaoProgressSpinnerMode = 'determinate' | 'indeterminate';
+type CaoProgressSpinnerLinecap = 'round' | 'butt' | 'square';
+
+declare class CaoProgressSpinnerComponent {
+    /** Modo de exibição. Padrão: `'indeterminate'`. */
+    readonly mode: _angular_core.InputSignal<CaoProgressSpinnerMode>;
+    /** Progresso de 0 a 100 (modo `determinate`). */
+    readonly value: _angular_core.InputSignalWithTransform<number, unknown>;
+    /** Diâmetro em px. */
+    readonly diameter: _angular_core.InputSignalWithTransform<number, unknown>;
+    /** Espessura do traço em px. `0` = automático (10% do diâmetro). */
+    readonly strokeWidth: _angular_core.InputSignalWithTransform<number, unknown>;
+    /** Formato da ponta do traço. */
+    readonly strokeLinecap: _angular_core.InputSignal<CaoProgressSpinnerLinecap>;
+    /** Cor do indicador (qualquer cor CSS). */
+    readonly color: _angular_core.InputSignal<string>;
+    /** Cor do trilho (círculo de fundo). Padrão: transparente. */
+    readonly trackColor: _angular_core.InputSignal<string>;
+    /** Duração de uma volta completa no modo indeterminado. */
+    readonly animationDuration: _angular_core.InputSignal<string>;
+    /** Exibe o percentual no centro (modo `determinate`). */
+    readonly showValue: _angular_core.InputSignal<boolean>;
+    /** Cor do percentual. */
+    readonly textColor: _angular_core.InputSignal<string>;
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    readonly ariaLabelledBy: _angular_core.InputSignal<string>;
+    readonly dataCy: _angular_core.InputSignal<string>;
+    protected readonly isDeterminate: _angular_core.Signal<boolean>;
+    protected readonly size: _angular_core.Signal<number>;
+    protected readonly stroke: _angular_core.Signal<number>;
+    protected readonly center: _angular_core.Signal<number>;
+    protected readonly radius: _angular_core.Signal<number>;
+    protected readonly circumference: _angular_core.Signal<number>;
+    protected readonly clampedValue: _angular_core.Signal<number>;
+    protected readonly dashOffset: _angular_core.Signal<number | null>;
+    protected readonly ariaValueNow: _angular_core.Signal<number | null>;
+    protected readonly valueLabel: _angular_core.Signal<string>;
+    protected readonly fontSize: _angular_core.Signal<number>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CaoProgressSpinnerComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CaoProgressSpinnerComponent, "cao-progress-spinner", never, { "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "diameter": { "alias": "diameter"; "required": false; "isSignal": true; }; "strokeWidth": { "alias": "strokeWidth"; "required": false; "isSignal": true; }; "strokeLinecap": { "alias": "strokeLinecap"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "trackColor": { "alias": "trackColor"; "required": false; "isSignal": true; }; "animationDuration": { "alias": "animationDuration"; "required": false; "isSignal": true; }; "showValue": { "alias": "showValue"; "required": false; "isSignal": true; }; "textColor": { "alias": "textColor"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "ariaLabelledBy": { "alias": "ariaLabelledBy"; "required": false; "isSignal": true; }; "dataCy": { "alias": "dataCy"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/** Lado do elemento de origem em que o popover é exibido. */
+type CaoPopoverPosition = 'top' | 'bottom' | 'left' | 'right';
+/** Alinhamento do popover em relação ao elemento de origem. */
+type CaoPopoverAlign = 'start' | 'center' | 'end';
+/** Elemento de origem (âncora) do popover. */
+type CaoPopoverTarget = HTMLElement | ElementRef<HTMLElement> | null | undefined;
+interface ICaoPopoverShowOptions {
+    /** Move o foco para dentro do popover ao abrir. Padrão: valor de `focusOnShow`. */
+    focus?: boolean;
+}
+
+declare const CAO_POPOVER_POSITION_PREFIX = "cao-popover-pos-";
+/** Posição preferida seguida das alternativas (oposta e perpendiculares) usadas quando não há espaço. */
+declare function buildPopoverPositions(position: CaoPopoverPosition, align: CaoPopoverAlign, offset: number): ConnectedPosition[];
+declare class CaoPopoverComponent {
+    private readonly overlay;
+    private readonly viewContainerRef;
+    private readonly destroyRef;
+    private readonly panelTemplate;
+    private overlayRef;
+    private origin;
+    private subscriptions;
+    private focusMoved;
+    private readonly openState;
+    protected readonly panelId: string;
+    protected readonly placement: _angular_core.WritableSignal<CaoPopoverPosition>;
+    /** Lado do elemento de origem em que o popover aparece. Se não houver espaço, o CDK escolhe outro lado. */
+    readonly position: _angular_core.InputSignal<CaoPopoverPosition>;
+    /** Alinhamento em relação ao elemento de origem. */
+    readonly align: _angular_core.InputSignal<CaoPopoverAlign>;
+    /** Distância (px) entre a origem e o popover. */
+    readonly offset: _angular_core.InputSignalWithTransform<number, unknown>;
+    /** Exibe a seta apontando para a origem. */
+    readonly showArrow: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Fecha ao clicar fora do popover. */
+    readonly dismissable: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Fecha ao pressionar `Esc`. */
+    readonly closeOnEscape: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Exibe o botão de fechar no canto superior direito. */
+    readonly showCloseIcon: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Move o foco para o primeiro elemento focável do popover ao abrir (e devolve à origem ao fechar). */
+    readonly focusOnShow: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Largura fixa do popover (ex.: `'320px'`). */
+    readonly width: _angular_core.InputSignal<string>;
+    /** Largura máxima. */
+    readonly maxWidth: _angular_core.InputSignal<string>;
+    readonly bgColor: _angular_core.InputSignal<string>;
+    readonly textColor: _angular_core.InputSignal<string>;
+    readonly borderColor: _angular_core.InputSignal<string>;
+    readonly borderRadius: _angular_core.InputSignal<string>;
+    readonly padding: _angular_core.InputSignal<string>;
+    /** Classe(s) CSS adicionais aplicadas ao painel do popover. */
+    readonly styleClass: _angular_core.InputSignal<string>;
+    /** Classe(s) CSS adicionais aplicadas ao painel do overlay (CDK). */
+    readonly panelClass: _angular_core.InputSignal<string | string[]>;
+    readonly role: _angular_core.InputSignal<string>;
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    readonly ariaLabelledBy: _angular_core.InputSignal<string>;
+    readonly closeAriaLabel: _angular_core.InputSignal<string>;
+    readonly dataCy: _angular_core.InputSignal<string>;
+    /** Emitido após o popover ser aberto. */
+    readonly shown: _angular_core.OutputEmitterRef<void>;
+    /** Emitido após o popover ser fechado. */
+    readonly hidden: _angular_core.OutputEmitterRef<void>;
+    /** Emitido quando o ponteiro entra/sai do painel (usado pelo gatilho `hover`). */
+    readonly panelHoverChange: _angular_core.OutputEmitterRef<boolean>;
+    /** `true` enquanto o popover está aberto. */
+    readonly isOpen: _angular_core.Signal<boolean>;
+    constructor();
+    /** Abre o popover se estiver fechado (ou aberto em outra origem); fecha se já estiver aberto na mesma origem. */
+    toggle(event?: Event | null, target?: CaoPopoverTarget, options?: ICaoPopoverShowOptions): void;
+    /** Abre o popover ancorado em `target` (ou em `event.currentTarget`). */
+    show(event?: Event | null, target?: CaoPopoverTarget, options?: ICaoPopoverShowOptions): void;
+    /** Fecha o popover. */
+    hide(): void;
+    /** Recalcula a posição (útil se a origem mudou de lugar ou o conteúdo mudou de tamanho). */
+    reposition(): void;
+    /** Indica se o nó está dentro do painel do popover aberto. */
+    containsNode(node: Node | null | undefined): boolean;
+    protected onCloseClick(): void;
+    private close;
+    private dispose;
+    private onPositionChange;
+    private resolveOrigin;
+    private focusPanel;
+    private setOriginAria;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CaoPopoverComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CaoPopoverComponent, "cao-popover", ["caoPopover"], { "position": { "alias": "position"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "offset": { "alias": "offset"; "required": false; "isSignal": true; }; "showArrow": { "alias": "showArrow"; "required": false; "isSignal": true; }; "dismissable": { "alias": "dismissable"; "required": false; "isSignal": true; }; "closeOnEscape": { "alias": "closeOnEscape"; "required": false; "isSignal": true; }; "showCloseIcon": { "alias": "showCloseIcon"; "required": false; "isSignal": true; }; "focusOnShow": { "alias": "focusOnShow"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "maxWidth": { "alias": "maxWidth"; "required": false; "isSignal": true; }; "bgColor": { "alias": "bgColor"; "required": false; "isSignal": true; }; "textColor": { "alias": "textColor"; "required": false; "isSignal": true; }; "borderColor": { "alias": "borderColor"; "required": false; "isSignal": true; }; "borderRadius": { "alias": "borderRadius"; "required": false; "isSignal": true; }; "padding": { "alias": "padding"; "required": false; "isSignal": true; }; "styleClass": { "alias": "styleClass"; "required": false; "isSignal": true; }; "panelClass": { "alias": "panelClass"; "required": false; "isSignal": true; }; "role": { "alias": "role"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "ariaLabelledBy": { "alias": "ariaLabelledBy"; "required": false; "isSignal": true; }; "closeAriaLabel": { "alias": "closeAriaLabel"; "required": false; "isSignal": true; }; "dataCy": { "alias": "dataCy"; "required": false; "isSignal": true; }; }, { "shown": "shown"; "hidden": "hidden"; "panelHoverChange": "panelHoverChange"; }, never, ["*"], true, never>;
+}
+
 type ModalType = "validation" | "finger" | "facial" | "clinic" | "graph" | "restriction" | "default";
 interface IModal {
     status: boolean;
@@ -1543,5 +1722,5 @@ declare class CaoBaseWidgetComponent<TData = unknown> {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<CaoBaseWidgetComponent<any>, "cao-base-widget", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "widgetIcon": { "alias": "widgetIcon"; "required": false; "isSignal": true; }; "cancelTextButton": { "alias": "cancelTextButton"; "required": false; "isSignal": true; }; "saveTextButton": { "alias": "saveTextButton"; "required": false; "isSignal": true; }; "displayActionButton": { "alias": "displayActionButton"; "required": false; "isSignal": true; }; "displaySaveButton": { "alias": "displaySaveButton"; "required": false; "isSignal": true; }; "displayCancelButton": { "alias": "displayCancelButton"; "required": false; "isSignal": true; }; "shouldCloseWhenCancel": { "alias": "shouldCloseWhenCancel"; "required": false; "isSignal": true; }; "widgetDirection": { "alias": "widgetDirection"; "required": false; "isSignal": true; }; "typeCancel": { "alias": "typeCancel"; "required": false; "isSignal": true; }; "saveDisabled": { "alias": "saveDisabled"; "required": false; "isSignal": true; }; "saveIcon": { "alias": "saveIcon"; "required": false; "isSignal": true; }; "saveIconPosition": { "alias": "saveIconPosition"; "required": false; "isSignal": true; }; "closeOnClickOutside": { "alias": "closeOnClickOutside"; "required": false; "isSignal": true; }; "confirmOnClose": { "alias": "confirmOnClose"; "required": false; "isSignal": true; }; "widgetData": { "alias": "widgetData"; "required": false; "isSignal": true; }; }, { "save": "save"; "deleted": "deleted"; "cancelEvent": "cancelEvent"; "closeRequest": "closeRequest"; }, never, ["widget-title", "*"], true, never>;
 }
 
-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 };
 export type { AlertType, CaoAccordionAlign, CaoAccordionDisplayMode, CaoAccordionTogglePosition, CaoCardVariant, CaoSkeletonVariant, CaoTypeInputs, CaoWidgetDirection, DialogType, IAlertConfig, ICaoAccordionHost, ICaoAccordionItemRef, ICaoAutoCompleteOption, ICaoCardAvatar, ICaoCardBadge, ICaoCardMeta, ICaoCheckboxChangeEvent, ICaoDropDownOption, ICaoImage, ICaoKPI, ICaoRadioChangeEvent, ICaoSlideToggleChangeEvent, ICaoTabChangeEvent, ICaoWidgetOptions, IColumnButton, IColumnConfig, IColumnPaginatedButton, IColumnPaginatedConfig, IDialogConfig, IErrorStateMatcher, IFormFieldControl, IModal, INavContent, INavLink, ITableConfig, ITablePaginatedConfig, ModalType, ModalTypeClass, ModalTypeSize };