ngx-opalbytes-components 1.25.0 → 1.26.0

package/src/lib/shared/components/slide-toggle/slide-toggle.component.ts

@@ -0,0 +1,233 @@
+import { CommonModule } from "@angular/common";
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  EventEmitter,
+  forwardRef,
+  HostBinding,
+  inject,
+  Input,
+  Output,
+} from "@angular/core";
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";
+
+import { LucideDynamicIcon } from "@lucide/angular";
+
+export interface ICaoSlideToggleChangeEvent {
+  checked: boolean;
+  source: CaoSlideToggleComponent;
+}
+
+@Component({
+  selector: "cao-slide-toggle",
+  standalone: true,
+  imports: [CommonModule, LucideDynamicIcon],
+  templateUrl: "./slide-toggle.component.html",
+  styleUrl: "./slide-toggle.component.css",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => CaoSlideToggleComponent),
+      multi: true,
+    },
+  ],
+})
+export class CaoSlideToggleComponent implements ControlValueAccessor {
+  @Input() checked = false;
+  @Input() isDisabled = false;
+  @Input() label = "";
+  @Input() labelPosition: "before" | "after" = "after";
+  @Input() name = "";
+  @Input() id = "";
+  @Input() ariaLabel = "";
+  @Input() dataCy = "";
+  @Input() required = false;
+
+  @Input() trackColor?: string;
+  @Input() trackCheckedColor?: string;
+  @Input() thumbColor?: string;
+  @Input() thumbCheckedColor?: string;
+  @Input() disabledTrackColor?: string;
+  @Input() disabledThumbColor?: string;
+  @Input() labelColor?: string;
+  @Input() disabledLabelColor?: string;
+  @Input() focusRingColor?: string;
+  @Input() trackWidth?: string;
+  @Input() trackHeight?: string;
+  @Input() thumbSize?: string;
+  @Input() animationDuration?: string;
+
+  @Input() thumbIcon = "";
+  @Input() thumbCheckedIcon = "";
+  @Input() isLucideThumbIcon = false;
+  @Input() thumbIconColor = "";
+  @Input() thumbCheckedIconColor = "";
+  @Input() thumbIconSize: string | number = 12;
+  @Input() thumbIconStrokeWidth: string | number = 2;
+
+  @Input() set disabled(value: boolean) {
+    this.isDisabled = value;
+    this.cdr.markForCheck();
+  }
+
+  get disabled(): boolean {
+    return this.isDisabled;
+  }
+
+  @Output() readonly checkedChange = new EventEmitter<boolean>();
+  @Output() readonly toggleChange = new EventEmitter<ICaoSlideToggleChangeEvent>();
+
+  private readonly cdr = inject(ChangeDetectorRef);
+  private onChange: (value: boolean) => void = () => {};
+  private onTouched: () => void = () => {};
+
+  get resolvedThumbIcon(): string {
+    return this.checked && this.thumbCheckedIcon
+      ? this.thumbCheckedIcon
+      : this.thumbIcon;
+  }
+
+  get resolvedThumbIconColor(): string {
+    return this.checked
+      ? this.thumbCheckedIconColor || this.thumbIconColor
+      : this.thumbIconColor;
+  }
+
+  @HostBinding("style")
+  get hostStyles(): Record<string, string> {
+    const styles: Record<string, string> = {};
+
+    if (this.trackColor) {
+      styles["--cao-slide-toggle-track"] = this.trackColor;
+    }
+    if (this.trackCheckedColor) {
+      styles["--cao-slide-toggle-track-checked"] = this.trackCheckedColor;
+    }
+    if (this.thumbColor) {
+      styles["--cao-slide-toggle-thumb"] = this.thumbColor;
+    }
+    if (this.thumbCheckedColor) {
+      styles["--cao-slide-toggle-thumb-checked"] = this.thumbCheckedColor;
+    }
+    if (this.disabledTrackColor) {
+      styles["--cao-slide-toggle-track-disabled"] = this.disabledTrackColor;
+    }
+    if (this.disabledThumbColor) {
+      styles["--cao-slide-toggle-thumb-disabled"] = this.disabledThumbColor;
+    }
+    if (this.labelColor) {
+      styles["--cao-slide-toggle-label"] = this.labelColor;
+    }
+    if (this.disabledLabelColor) {
+      styles["--cao-slide-toggle-label-disabled"] = this.disabledLabelColor;
+    }
+    if (this.focusRingColor) {
+      styles["--cao-slide-toggle-focus-ring"] = this.focusRingColor;
+    }
+    if (this.trackWidth) {
+      styles["--cao-slide-toggle-track-width"] = this.trackWidth;
+    }
+    if (this.trackHeight) {
+      styles["--cao-slide-toggle-track-height"] = this.trackHeight;
+    }
+    if (this.thumbSize) {
+      styles["--cao-slide-toggle-thumb-size"] = this.thumbSize;
+    }
+    if (this.animationDuration) {
+      styles["--cao-slide-toggle-duration"] = this.animationDuration;
+    }
+    if (this.resolvedThumbIconColor) {
+      styles["--cao-slide-toggle-thumb-icon-color"] = this.resolvedThumbIconColor;
+    }
+
+    styles["--cao-slide-toggle-thumb-icon-size"] = this.toCssLength(
+      this.thumbIconSize,
+    );
+
+    return styles;
+  }
+
+  toggle(): void {
+    if (this.isDisabled) {
+      return;
+    }
+
+    this.updateChecked(!this.checked, true);
+  }
+
+  setChecked(value: boolean): void {
+    if (this.isDisabled) {
+      return;
+    }
+
+    this.updateChecked(value, true);
+  }
+
+  enable(): void {
+    this.isDisabled = false;
+    this.cdr.markForCheck();
+  }
+
+  disable(): void {
+    this.isDisabled = true;
+    this.cdr.markForCheck();
+  }
+
+  onInputChange(event: Event): void {
+    const target = event.target as HTMLInputElement;
+    this.updateChecked(target.checked, true);
+  }
+
+  onEnter(event: Event): void {
+    if (this.isDisabled) {
+      return;
+    }
+
+    event.preventDefault();
+    this.toggle();
+  }
+
+  onBlur(): void {
+    this.onTouched();
+  }
+
+  writeValue(value: boolean | null): void {
+    this.checked = !!value;
+    this.cdr.markForCheck();
+  }
+
+  registerOnChange(fn: (value: boolean) => void): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: () => void): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this.isDisabled = isDisabled;
+    this.cdr.markForCheck();
+  }
+
+  private toCssLength(value: string | number): string {
+    return typeof value === "number" ? `${value}px` : value;
+  }
+
+  private updateChecked(value: boolean, emit: boolean): void {
+    if (this.isDisabled) {
+      return;
+    }
+
+    this.checked = value;
+    this.onChange(value);
+
+    if (emit) {
+      this.checkedChange.emit(value);
+      this.toggleChange.emit({ checked: value, source: this });
+    }
+
+    this.cdr.markForCheck();
+  }
+}

package/src/lib/shared/components/slide-toggle/slide-toggle.stories.ts

@@ -0,0 +1,165 @@
+import { LucideCheck, LucideX, provideLucideIcons } from '@lucide/angular';
+import { applicationConfig, type Meta, type StoryObj } from '@storybook/angular-vite';
+import { fn } from 'storybook/test';
+
+import { CaoSlideToggleComponent } from './slide-toggle.component';
+
+const imageIcon =
+  'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Ccircle cx="12" cy="12" r="10" fill="%234f46e5"/%3E%3C/svg%3E';
+
+const meta: Meta<CaoSlideToggleComponent> = {
+  title: 'Componentes/Slide Toggle',
+  component: CaoSlideToggleComponent,
+  tags: ['autodocs'],
+  decorators: [
+    applicationConfig({
+      providers: [provideLucideIcons(LucideCheck, LucideX)],
+    }),
+  ],
+  argTypes: {
+    checked: { control: 'boolean' },
+    isDisabled: { control: 'boolean' },
+    disabled: { control: 'boolean' },
+    required: { control: 'boolean' },
+    label: { control: 'text' },
+    labelPosition: { control: 'select', options: ['before', 'after'] },
+    trackColor: { control: 'color' },
+    trackCheckedColor: { control: 'color' },
+    thumbColor: { control: 'color' },
+    thumbCheckedColor: { control: 'color' },
+    disabledTrackColor: { control: 'color' },
+    disabledThumbColor: { control: 'color' },
+    labelColor: { control: 'color' },
+    disabledLabelColor: { control: 'color' },
+    focusRingColor: { control: 'color' },
+    trackWidth: { control: 'text' },
+    trackHeight: { control: 'text' },
+    thumbSize: { control: 'text' },
+    animationDuration: { control: 'text' },
+    thumbIcon: { control: 'text' },
+    thumbCheckedIcon: { control: 'text' },
+    isLucideThumbIcon: { control: 'boolean' },
+    thumbIconColor: { control: 'color' },
+    thumbCheckedIconColor: { control: 'color' },
+    thumbIconSize: { control: 'text' },
+    thumbIconStrokeWidth: { control: 'text' },
+  },
+  args: {
+    checked: false,
+    isDisabled: false,
+    label: 'Ativar notificações',
+    labelPosition: 'after',
+    thumbIcon: '',
+    thumbCheckedIcon: '',
+    isLucideThumbIcon: false,
+    thumbIconColor: '',
+    thumbCheckedIconColor: '',
+    thumbIconSize: 12,
+    thumbIconStrokeWidth: 2,
+    checkedChange: fn(),
+    toggleChange: fn(),
+  },
+};
+
+export default meta;
+type Story = StoryObj<CaoSlideToggleComponent>;
+
+export const Padrao: Story = {
+  args: {
+    checked: false,
+  },
+};
+
+export const Ativado: Story = {
+  args: {
+    checked: true,
+    label: 'Notificações ativadas',
+  },
+};
+
+export const Desabilitado: Story = {
+  args: {
+    checked: false,
+    isDisabled: true,
+    label: 'Desabilitado',
+  },
+};
+
+export const DesabilitadoAtivado: Story = {
+  args: {
+    checked: true,
+    isDisabled: true,
+    label: 'Desabilitado e ativado',
+  },
+};
+
+export const LabelAntes: Story = {
+  args: {
+    checked: true,
+    label: 'Label antes',
+    labelPosition: 'before',
+  },
+};
+
+export const CoresCustomizadas: Story = {
+  args: {
+    checked: true,
+    label: 'Cores customizadas',
+    trackCheckedColor: '#16a34a',
+    thumbCheckedColor: '#ffffff',
+    trackColor: '#fca5a5',
+    thumbColor: '#ffffff',
+    labelColor: '#166534',
+  },
+};
+
+export const TamanhoCustomizado: Story = {
+  args: {
+    checked: true,
+    label: 'Tamanho customizado',
+    trackWidth: '52px',
+    trackHeight: '28px',
+    thumbSize: '22px',
+    animationDuration: '300ms',
+  },
+};
+
+export const IconesLucide: Story = {
+  args: {
+    checked: true,
+    label: 'Notificações ativadas',
+    thumbIcon: 'x',
+    thumbCheckedIcon: 'check',
+    isLucideThumbIcon: true,
+    thumbIconColor: '#6b7280',
+    thumbCheckedIconColor: '#16a34a',
+    thumbIconSize: 12,
+    thumbIconStrokeWidth: 2.5,
+  },
+};
+
+export const IconeImagem: Story = {
+  args: {
+    checked: true,
+    label: 'Ícone via URL',
+    thumbIcon: imageIcon,
+    thumbCheckedIcon: imageIcon,
+    isLucideThumbIcon: false,
+    thumbIconSize: 10,
+  },
+};
+
+export const IconeTamanhoCustomizado: Story = {
+  args: {
+    checked: true,
+    label: 'Ícone maior',
+    thumbIcon: 'x',
+    thumbCheckedIcon: 'check',
+    isLucideThumbIcon: true,
+    thumbIconSize: 16,
+    thumbIconStrokeWidth: 3,
+    trackWidth: '52px',
+    trackHeight: '28px',
+    thumbSize: '24px',
+  },
+};

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

@@ -637,6 +637,162 @@ declare class CaoBaseToggleComponent {
     static ɵcmp: i0.ɵɵComponentDeclaration<CaoBaseToggleComponent, "cao-base-toggle", never, { "type": { "alias": "type"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "inputClass": { "alias": "inputClass"; "required": false; }; "value": { "alias": "value"; "required": false; }; "errorMessage": { "alias": "errorMessage"; "required": false; }; "isDisabled": { "alias": "isDisabled"; "required": false; }; "maxLength": { "alias": "maxLength"; "required": false; }; "searchMode": { "alias": "searchMode"; "required": false; }; "showBorder": { "alias": "showBorder"; "required": false; }; "isLucideIcon": { "alias": "isLucideIcon"; "required": false; }; "iconColor": { "alias": "iconColor"; "required": false; }; "mask": { "alias": "mask"; "required": false; }; "control": { "alias": "control"; "required": false; }; "tooltip": { "alias": "tooltip"; "required": false; }; "dataCy": { "alias": "dataCy"; "required": false; }; "textareaRows": { "alias": "textareaRows"; "required": false; }; "decimalMarker": { "alias": "decimalMarker"; "required": false; }; "thousandSeparator": { "alias": "thousandSeparator"; "required": false; }; "allowNegativeNumbers": { "alias": "allowNegativeNumbers"; "required": false; }; "separatorLimit": { "alias": "separatorLimit"; "required": false; }; "leadingIcon": { "alias": "leadingIcon"; "required": false; }; "trailingIcon": { "alias": "trailingIcon"; "required": false; }; "controlName": { "alias": "controlName"; "required": false; }; "isChecked": { "alias": "isChecked"; "required": false; }; "checkedTextPlaceholder": { "alias": "checkedTextPlaceholder"; "required": false; }; "uncheckedTextPlaceholder": { "alias": "uncheckedTextPlaceholder"; "required": false; }; }, { "valueChange": "valueChange"; "searchClick": "searchClick"; "inputChange": "inputChange"; "statusChanged": "statusChanged"; }, never, never, true, never>;
 }
 
+interface ICaoSlideToggleChangeEvent {
+    checked: boolean;
+    source: CaoSlideToggleComponent;
+}
+declare class CaoSlideToggleComponent implements ControlValueAccessor {
+    checked: boolean;
+    isDisabled: boolean;
+    label: string;
+    labelPosition: "before" | "after";
+    name: string;
+    id: string;
+    ariaLabel: string;
+    dataCy: string;
+    required: boolean;
+    trackColor?: string;
+    trackCheckedColor?: string;
+    thumbColor?: string;
+    thumbCheckedColor?: string;
+    disabledTrackColor?: string;
+    disabledThumbColor?: string;
+    labelColor?: string;
+    disabledLabelColor?: string;
+    focusRingColor?: string;
+    trackWidth?: string;
+    trackHeight?: string;
+    thumbSize?: string;
+    animationDuration?: string;
+    thumbIcon: string;
+    thumbCheckedIcon: string;
+    isLucideThumbIcon: boolean;
+    thumbIconColor: string;
+    thumbCheckedIconColor: string;
+    thumbIconSize: string | number;
+    thumbIconStrokeWidth: string | number;
+    set disabled(value: boolean);
+    get disabled(): boolean;
+    readonly checkedChange: EventEmitter<boolean>;
+    readonly toggleChange: EventEmitter<ICaoSlideToggleChangeEvent>;
+    private readonly cdr;
+    private onChange;
+    private onTouched;
+    get resolvedThumbIcon(): string;
+    get resolvedThumbIconColor(): string;
+    get hostStyles(): Record<string, string>;
+    toggle(): void;
+    setChecked(value: boolean): void;
+    enable(): void;
+    disable(): void;
+    onInputChange(event: Event): void;
+    onEnter(event: Event): void;
+    onBlur(): void;
+    writeValue(value: boolean | null): void;
+    registerOnChange(fn: (value: boolean) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    private toCssLength;
+    private updateChecked;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CaoSlideToggleComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CaoSlideToggleComponent, "cao-slide-toggle", never, { "checked": { "alias": "checked"; "required": false; }; "isDisabled": { "alias": "isDisabled"; "required": false; }; "label": { "alias": "label"; "required": false; }; "labelPosition": { "alias": "labelPosition"; "required": false; }; "name": { "alias": "name"; "required": false; }; "id": { "alias": "id"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "dataCy": { "alias": "dataCy"; "required": false; }; "required": { "alias": "required"; "required": false; }; "trackColor": { "alias": "trackColor"; "required": false; }; "trackCheckedColor": { "alias": "trackCheckedColor"; "required": false; }; "thumbColor": { "alias": "thumbColor"; "required": false; }; "thumbCheckedColor": { "alias": "thumbCheckedColor"; "required": false; }; "disabledTrackColor": { "alias": "disabledTrackColor"; "required": false; }; "disabledThumbColor": { "alias": "disabledThumbColor"; "required": false; }; "labelColor": { "alias": "labelColor"; "required": false; }; "disabledLabelColor": { "alias": "disabledLabelColor"; "required": false; }; "focusRingColor": { "alias": "focusRingColor"; "required": false; }; "trackWidth": { "alias": "trackWidth"; "required": false; }; "trackHeight": { "alias": "trackHeight"; "required": false; }; "thumbSize": { "alias": "thumbSize"; "required": false; }; "animationDuration": { "alias": "animationDuration"; "required": false; }; "thumbIcon": { "alias": "thumbIcon"; "required": false; }; "thumbCheckedIcon": { "alias": "thumbCheckedIcon"; "required": false; }; "isLucideThumbIcon": { "alias": "isLucideThumbIcon"; "required": false; }; "thumbIconColor": { "alias": "thumbIconColor"; "required": false; }; "thumbCheckedIconColor": { "alias": "thumbCheckedIconColor"; "required": false; }; "thumbIconSize": { "alias": "thumbIconSize"; "required": false; }; "thumbIconStrokeWidth": { "alias": "thumbIconStrokeWidth"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "checkedChange": "checkedChange"; "toggleChange": "toggleChange"; }, never, ["*"], true, never>;
+}
+
+declare class CaoRadioButtonComponent {
+    readonly group: CaoRadioGroupComponent | null;
+    value: unknown;
+    label: string;
+    isDisabled: boolean;
+    labelPosition?: "before" | "after";
+    id: string;
+    name: string;
+    ariaLabel: string;
+    ariaLabelledBy: string;
+    dataCy: string;
+    color?: string;
+    unselectedColor?: string;
+    disabledColor?: string;
+    labelColor?: string;
+    disabledLabelColor?: string;
+    focusRingColor?: string;
+    size?: string;
+    animationDuration?: string;
+    set disabled(value: boolean);
+    get disabled(): boolean;
+    private readonly uid;
+    constructor(group: CaoRadioGroupComponent | null);
+    get effectiveDisabled(): boolean;
+    get effectiveLabelPosition(): "before" | "after";
+    get effectiveName(): string;
+    get inputId(): string;
+    get isSelected(): boolean;
+    get isRequired(): boolean;
+    get hostStyles(): Record<string, string>;
+    select(): void;
+    onBlur(): void;
+    enable(): void;
+    disable(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CaoRadioButtonComponent, [{ optional: true; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CaoRadioButtonComponent, "cao-radio-button", never, { "value": { "alias": "value"; "required": false; }; "label": { "alias": "label"; "required": false; }; "isDisabled": { "alias": "isDisabled"; "required": false; }; "labelPosition": { "alias": "labelPosition"; "required": false; }; "id": { "alias": "id"; "required": false; }; "name": { "alias": "name"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "ariaLabelledBy": { "alias": "ariaLabelledBy"; "required": false; }; "dataCy": { "alias": "dataCy"; "required": false; }; "color": { "alias": "color"; "required": false; }; "unselectedColor": { "alias": "unselectedColor"; "required": false; }; "disabledColor": { "alias": "disabledColor"; "required": false; }; "labelColor": { "alias": "labelColor"; "required": false; }; "disabledLabelColor": { "alias": "disabledLabelColor"; "required": false; }; "focusRingColor": { "alias": "focusRingColor"; "required": false; }; "size": { "alias": "size"; "required": false; }; "animationDuration": { "alias": "animationDuration"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+
+interface ICaoRadioChangeEvent {
+    value: unknown;
+    source: CaoRadioButtonComponent;
+}
+declare class CaoRadioGroupComponent implements ControlValueAccessor {
+    value: unknown;
+    name: string;
+    isDisabled: boolean;
+    required: boolean;
+    orientation: "vertical" | "horizontal";
+    labelPosition: "before" | "after";
+    compareWith: (option: unknown, value: unknown) => boolean;
+    color?: string;
+    unselectedColor?: string;
+    disabledColor?: string;
+    labelColor?: string;
+    disabledLabelColor?: string;
+    focusRingColor?: string;
+    size?: string;
+    animationDuration?: string;
+    gap?: string;
+    ariaLabel: string;
+    ariaLabelledBy: string;
+    dataCy: string;
+    set disabled(value: boolean);
+    get disabled(): boolean;
+    readonly valueChange: EventEmitter<unknown>;
+    readonly selectionChange: EventEmitter<ICaoRadioChangeEvent>;
+    readonly resolvedName: string;
+    private readonly cdr;
+    private formDisabled;
+    private onChange;
+    private onTouched;
+    get isEffectivelyDisabled(): boolean;
+    readonly role = "radiogroup";
+    get isHorizontal(): boolean;
+    get isDisabledClass(): boolean;
+    get ariaLabelAttr(): string | null;
+    get ariaLabelledByAttr(): string | null;
+    get ariaDisabledAttr(): boolean | null;
+    get ariaRequiredAttr(): boolean | null;
+    get dataCyAttr(): string | null;
+    get hostStyles(): Record<string, string>;
+    get groupName(): string;
+    isValueSelected(value: unknown): boolean;
+    select(button: CaoRadioButtonComponent): void;
+    markAsTouched(): void;
+    enable(): void;
+    disable(): void;
+    writeValue(value: unknown): void;
+    registerOnChange(fn: (value: unknown) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CaoRadioGroupComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CaoRadioGroupComponent, "cao-radio-group", never, { "value": { "alias": "value"; "required": false; }; "name": { "alias": "name"; "required": false; }; "isDisabled": { "alias": "isDisabled"; "required": false; }; "required": { "alias": "required"; "required": false; }; "orientation": { "alias": "orientation"; "required": false; }; "labelPosition": { "alias": "labelPosition"; "required": false; }; "compareWith": { "alias": "compareWith"; "required": false; }; "color": { "alias": "color"; "required": false; }; "unselectedColor": { "alias": "unselectedColor"; "required": false; }; "disabledColor": { "alias": "disabledColor"; "required": false; }; "labelColor": { "alias": "labelColor"; "required": false; }; "disabledLabelColor": { "alias": "disabledLabelColor"; "required": false; }; "focusRingColor": { "alias": "focusRingColor"; "required": false; }; "size": { "alias": "size"; "required": false; }; "animationDuration": { "alias": "animationDuration"; "required": false; }; "gap": { "alias": "gap"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "ariaLabelledBy": { "alias": "ariaLabelledBy"; "required": false; }; "dataCy": { "alias": "dataCy"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "valueChange": "valueChange"; "selectionChange": "selectionChange"; }, never, ["*"], true, never>;
+}
+
 type ModalType = "validation" | "finger" | "facial" | "clinic" | "graph" | "restriction" | "default";
 interface IModal {
     status: boolean;
@@ -1046,6 +1202,7 @@ declare class CaoWidgetService {
     static ɵprov: i0.ɵɵInjectableDeclaration<CaoWidgetService>;
 }
 
+type CaoWidgetDirection = "left" | "right" | "top" | "bottom";
 declare class CaoBaseWidgetComponent<TData = unknown> {
     private static readonly CLOSE_ANIMATION_MS;
     title: i0.InputSignal<string>;
@@ -1057,6 +1214,7 @@ declare class CaoBaseWidgetComponent<TData = unknown> {
     displaySaveButton: i0.InputSignal<boolean>;
     displayCancelButton: i0.InputSignal<boolean>;
     shouldCloseWhenCancel: i0.InputSignal<boolean>;
+    widgetDirection: i0.InputSignal<CaoWidgetDirection>;
     typeCancel: i0.InputSignal<"cancel" | "back">;
     saveDisabled: i0.InputSignal<boolean>;
     saveIcon: i0.InputSignal<string>;
@@ -1087,8 +1245,8 @@ declare class CaoBaseWidgetComponent<TData = unknown> {
     private startClose;
     private emitCloseRequest;
     static ɵfac: i0.ɵɵFactoryDeclaration<CaoBaseWidgetComponent<any>, never>;
-    static ɵcmp: i0.ɵɵ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; }; "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>;
+    static ɵcmp: i0.ɵɵ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, CaoAutocompleteComponent, CaoBaseButtonComponent, CaoBaseIcon, CaoBaseInput, CaoBaseToggleComponent, CaoBaseWidgetComponent, CaoCardComponent, CaoDropDownComponent, CaoError, CaoFormField, CaoHint, CaoKpi, CaoSkeletonComponent, CaoTabGroup, CaoTabPanel, CaoWidgetService, DEFAULT_ERROR_STATE_MATCHER, ErrorStateMatcher, Footer, LinksButton, Paginator, ShowOnDirtyErrorStateMatcher, StepComponent, StepperComponent, TablePaginatedService, TimePicker, getPtBrPaginatorIntlBasePaginated, getPtBrPaginatorIntlBaseTable };
-export type { AlertType, CaoCardVariant, CaoSkeletonVariant, CaoTypeInputs, DialogType, IAlertConfig, ICaoAutoCompleteOption, ICaoCardAvatar, ICaoCardBadge, ICaoCardMeta, ICaoDropDownOption, ICaoImage, ICaoKPI, ICaoTabChangeEvent, ICaoWidgetOptions, IColumnButton, IColumnConfig, IColumnPaginatedButton, IColumnPaginatedConfig, IDialogConfig, IErrorStateMatcher, IFormFieldControl, IModal, INavContent, INavLink, ITableConfig, ITablePaginatedConfig, ModalType, ModalTypeClass, ModalTypeSize };
+export { BaseAlert, BaseAlertService, BaseDialog, BaseDialogService, BaseFilterTablePaginatedService, BaseFilterTableService, BaseModal, BaseModalService, BasePaginationService, BaseTable, BaseTablePaginated, BaseTableService, BaseTimeRange, CaoAutocompleteComponent, CaoBaseButtonComponent, CaoBaseIcon, CaoBaseInput, CaoBaseToggleComponent, CaoBaseWidgetComponent, CaoCardComponent, CaoDropDownComponent, CaoError, CaoFormField, CaoHint, CaoKpi, CaoRadioButtonComponent, CaoRadioGroupComponent, CaoSkeletonComponent, CaoSlideToggleComponent, CaoTabGroup, CaoTabPanel, CaoWidgetService, DEFAULT_ERROR_STATE_MATCHER, ErrorStateMatcher, Footer, LinksButton, Paginator, ShowOnDirtyErrorStateMatcher, StepComponent, StepperComponent, TablePaginatedService, TimePicker, getPtBrPaginatorIntlBasePaginated, getPtBrPaginatorIntlBaseTable };
+export type { AlertType, CaoCardVariant, CaoSkeletonVariant, CaoTypeInputs, CaoWidgetDirection, DialogType, IAlertConfig, ICaoAutoCompleteOption, ICaoCardAvatar, ICaoCardBadge, ICaoCardMeta, ICaoDropDownOption, ICaoImage, ICaoKPI, ICaoRadioChangeEvent, ICaoSlideToggleChangeEvent, ICaoTabChangeEvent, ICaoWidgetOptions, IColumnButton, IColumnConfig, IColumnPaginatedButton, IColumnPaginatedConfig, IDialogConfig, IErrorStateMatcher, IFormFieldControl, IModal, INavContent, INavLink, ITableConfig, ITablePaginatedConfig, ModalType, ModalTypeClass, ModalTypeSize };