ngx-opalbytes-components 1.21.0 → 1.23.0

package/src/lib/shared/components/skeleton/skeleton.ts

@@ -0,0 +1,46 @@
+import { CommonModule } from '@angular/common';
+import { Component, computed, input } from '@angular/core';
+
+export type CaoSkeletonVariant = 'rect' | 'circle' | 'text';
+
+@Component({
+  selector: 'cao-skeleton',
+  imports: [CommonModule],
+  templateUrl: './skeleton.html',
+  styleUrl: './skeleton.css',
+})
+export class CaoSkeletonComponent {
+  borderRadius = input('14px');
+  width = input('100%');
+  height = input('100%');
+  bgColor = input<string>("#e2e8f0");
+  shine = input<string>("#f8fafc");
+  variant = input<CaoSkeletonVariant>('rect');
+  speed = input<string>('2s');
+  size = input<string>();
+  animationDeg = input<string>('90deg');
+
+  skeletonStyles = computed(() => {
+    const styles: Record<string, string> = {
+      '--skeleton-width': this.size() || this.width(),
+      '--skeleton-height': this.size() || this.height(),
+      '--skeleton-speed': this.speed(),
+      '--skeleton-animation-deg': this.animationDeg(),
+    };
+
+    if (this.bgColor()) {
+      styles['--skeleton-bg'] = this.bgColor()!;
+    }
+
+    if (this.shine()) {
+      styles['--skeleton-shine'] = this.shine()!;
+    }
+
+    if (this.variant() !== 'circle') {
+      styles['--skeleton-radius'] = this.borderRadius();
+    }
+
+
+    return styles;
+  });
+}

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

@@ -1,5 +1,6 @@
 import * as i0 from '@angular/core';
 import { OnInit, EventEmitter, OnChanges, OnDestroy, AfterViewInit, ElementRef, TemplateRef, SimpleChanges, ChangeDetectorRef, Signal, AfterContentInit, QueryList, WritableSignal } from '@angular/core';
+import * as _angular_forms from '@angular/forms';
 import { ControlValueAccessor, AbstractControl, FormControl } from '@angular/forms';
 import { MatDateRangeInput } from '@angular/material/datepicker';
 import * as rxjs from 'rxjs';
@@ -460,6 +461,181 @@ declare class CaoKpi {
     static ɵcmp: i0.ɵɵComponentDeclaration<CaoKpi, "cao-kpi", never, { "kpiData": { "alias": "kpiData"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
+type CaoSkeletonVariant = 'rect' | 'circle' | 'text';
+declare class CaoSkeletonComponent {
+    borderRadius: i0.InputSignal<string>;
+    width: i0.InputSignal<string>;
+    height: i0.InputSignal<string>;
+    bgColor: i0.InputSignal<string>;
+    shine: i0.InputSignal<string>;
+    variant: i0.InputSignal<CaoSkeletonVariant>;
+    speed: i0.InputSignal<string>;
+    size: i0.InputSignal<string | undefined>;
+    animationDeg: i0.InputSignal<string>;
+    skeletonStyles: i0.Signal<Record<string, string>>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CaoSkeletonComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CaoSkeletonComponent, "cao-skeleton", never, { "borderRadius": { "alias": "borderRadius"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "bgColor": { "alias": "bgColor"; "required": false; "isSignal": true; }; "shine": { "alias": "shine"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "speed": { "alias": "speed"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "animationDeg": { "alias": "animationDeg"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+interface IFormFieldControl<T = any> {
+    readonly control: AbstractControl<T> | null | undefined;
+    readonly id: string;
+    readonly label: string;
+    readonly labelInside: boolean;
+    readonly disabled: boolean;
+    readonly required: boolean;
+}
+
+interface IErrorStateMatcher {
+    isErrorState(control: AbstractControl | null, formFieldControl: IFormFieldControl | null): boolean;
+}
+declare class ErrorStateMatcher implements IErrorStateMatcher {
+    isErrorState(control: AbstractControl | null, formFieldControl: IFormFieldControl | null): boolean;
+}
+declare class ShowOnDirtyErrorStateMatcher implements IErrorStateMatcher {
+    isErrorState(control: AbstractControl | null, formFieldControl: IFormFieldControl | null): boolean;
+}
+declare const DEFAULT_ERROR_STATE_MATCHER: ErrorStateMatcher;
+
+declare class CaoFormField extends CaoBaseIcon implements IFormFieldControl {
+    inputBackground: i0.InputSignal<string | undefined>;
+    borderColor: i0.InputSignal<string | undefined>;
+    borderWidth: i0.InputSignal<string | undefined>;
+    borderRadius: i0.InputSignal<string | undefined>;
+    errorColor: i0.InputSignal<string | undefined>;
+    labelColor: i0.InputSignal<string | undefined>;
+    hintColor: i0.InputSignal<string | undefined>;
+    textColor: i0.InputSignal<string | undefined>;
+    focusBorderColor: i0.InputSignal<string | undefined>;
+    successBorderColor: i0.InputSignal<string | undefined>;
+    formFieldStyles: i0.Signal<Record<string, string>>;
+    label: string;
+    labelInside: boolean;
+    hintLabel: string;
+    control: AbstractControl | null;
+    forId: string;
+    errorStateMatcher?: IErrorStateMatcher;
+    leadingIcon?: string;
+    trailingIcon?: string;
+    _isSubmitted: boolean;
+    _focused: boolean;
+    get id(): string;
+    get disabled(): boolean;
+    get required(): boolean;
+    get floating(): boolean;
+    get errorStateActive(): boolean;
+    onFocusIn(): void;
+    onFocusOut(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CaoFormField, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CaoFormField, "cao-form-field", never, { "inputBackground": { "alias": "inputBackground"; "required": false; "isSignal": true; }; "borderColor": { "alias": "borderColor"; "required": false; "isSignal": true; }; "borderWidth": { "alias": "borderWidth"; "required": false; "isSignal": true; }; "borderRadius": { "alias": "borderRadius"; "required": false; "isSignal": true; }; "errorColor": { "alias": "errorColor"; "required": false; "isSignal": true; }; "labelColor": { "alias": "labelColor"; "required": false; "isSignal": true; }; "hintColor": { "alias": "hintColor"; "required": false; "isSignal": true; }; "textColor": { "alias": "textColor"; "required": false; "isSignal": true; }; "focusBorderColor": { "alias": "focusBorderColor"; "required": false; "isSignal": true; }; "successBorderColor": { "alias": "successBorderColor"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; }; "labelInside": { "alias": "labelInside"; "required": false; }; "hintLabel": { "alias": "hintLabel"; "required": false; }; "control": { "alias": "control"; "required": false; }; "forId": { "alias": "forId"; "required": false; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "leadingIcon": { "alias": "leadingIcon"; "required": false; }; "trailingIcon": { "alias": "trailingIcon"; "required": false; }; }, {}, never, ["[caoInput]", "cao-input", "input", "select", "textarea", "h2", "*", "cao-hint", "cao-error"], true, never>;
+}
+
+declare class CaoHint {
+    static ɵfac: i0.ɵɵFactoryDeclaration<CaoHint, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CaoHint, "cao-hint", never, {}, {}, never, ["*"], true, never>;
+}
+
+declare class CaoError {
+    errorStateMatcher?: IErrorStateMatcher;
+    private readonly formField;
+    get control(): _angular_forms.AbstractControl<any, any, any> | null;
+    get hasErrorState(): boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CaoError, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CaoError, "cao-error", never, { "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+
+type CaoCardVariant = "horizontal" | "square";
+interface ICaoCardBadge {
+    label: string;
+    color?: string;
+    borderColor?: string;
+    bg?: string;
+}
+interface ICaoCardMeta {
+    icon: string;
+    label: string;
+}
+interface ICaoCardAvatar {
+    initials?: string;
+    src?: string;
+    color?: string;
+}
+declare class CaoCardComponent {
+    variant: CaoCardVariant;
+    title?: string;
+    subtitle?: string;
+    detail?: string;
+    detailColor?: string;
+    icon?: string;
+    avatar?: ICaoCardAvatar;
+    meta?: ICaoCardMeta[];
+    badge?: ICaoCardBadge;
+    selected: boolean;
+    clickable: boolean;
+    bgColor: string;
+    borderColor: string;
+    readonly cardClick: EventEmitter<void>;
+    get avatarBg(): string;
+    handleClick(): void;
+    handleKeydown(event: KeyboardEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CaoCardComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CaoCardComponent, "cao-card", never, { "variant": { "alias": "variant"; "required": false; }; "title": { "alias": "title"; "required": false; }; "subtitle": { "alias": "subtitle"; "required": false; }; "detail": { "alias": "detail"; "required": false; }; "detailColor": { "alias": "detailColor"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "avatar": { "alias": "avatar"; "required": false; }; "meta": { "alias": "meta"; "required": false; }; "badge": { "alias": "badge"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "clickable": { "alias": "clickable"; "required": false; }; "bgColor": { "alias": "bgColor"; "required": false; }; "borderColor": { "alias": "borderColor"; "required": false; }; }, { "cardClick": "cardClick"; }, never, ["*"], true, never>;
+}
+
+declare class CaoBaseToggleComponent {
+    type: string;
+    placeholder: string;
+    inputClass: string;
+    value: string | number | boolean | Date;
+    errorMessage: string;
+    isDisabled: boolean;
+    maxLength?: number;
+    searchMode: boolean;
+    showBorder: boolean;
+    isLucideIcon: boolean;
+    iconColor: string;
+    mask?: string;
+    control?: AbstractControl | null;
+    tooltip: string;
+    dataCy?: string;
+    textareaRows?: string;
+    decimalMarker: "." | "," | [".", ","];
+    thousandSeparator: string;
+    allowNegativeNumbers: boolean;
+    separatorLimit: string;
+    set leadingIcon(value: string);
+    set trailingIcon(value: string);
+    readonly valueChange: EventEmitter<string>;
+    readonly searchClick: EventEmitter<void>;
+    readonly inputChange: EventEmitter<string>;
+    isFocused: boolean;
+    icon: boolean;
+    _leadingIcon?: string;
+    _trailingIcon?: string;
+    onChange: any;
+    onTouched: any;
+    get hasError(): boolean;
+    controlName: string;
+    get controlNameValue(): string;
+    onInput(event: Event): void;
+    onInputChange(event: Event): void;
+    onFocus(): void;
+    onBlur(): void;
+    onSearchClick(): void;
+    writeValue(value: string | null | undefined): void;
+    registerOnChange(fn: any): void;
+    registerOnTouched(fn: any): void;
+    setDisabledState(isDisabled: boolean): void;
+    isChecked: boolean;
+    checkedTextPlaceholder: string;
+    uncheckedTextPlaceholder: string;
+    readonly statusChanged: EventEmitter<CaoBaseToggleComponent>;
+    checkboxInput: HTMLInputElement;
+    onToggleCheckbox(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CaoBaseToggleComponent, never>;
+    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>;
+}
+
 type ModalType = "validation" | "finger" | "facial" | "clinic" | "graph" | "restriction" | "default";
 interface IModal {
     status: boolean;
@@ -852,5 +1028,5 @@ declare class BaseAlertService {
     static ɵprov: i0.ɵɵInjectableDeclaration<BaseAlertService>;
 }
 
-export { BaseAlert, BaseAlertService, BaseDialog, BaseDialogService, BaseFilterTablePaginatedService, BaseFilterTableService, BaseModal, BaseModalService, BasePaginationService, BaseTable, BaseTablePaginated, BaseTableService, BaseTimeRange, CaoAutocompleteComponent, CaoBaseButtonComponent, CaoBaseIcon, CaoBaseInput, CaoDropDownComponent, CaoKpi, CaoTabGroup, CaoTabPanel, Footer, LinksButton, Paginator, StepComponent, StepperComponent, TablePaginatedService, TimePicker, getPtBrPaginatorIntlBasePaginated, getPtBrPaginatorIntlBaseTable };
-export type { AlertType, CaoTypeInputs, DialogType, IAlertConfig, ICaoAutoCompleteOption, ICaoDropDownOption, ICaoImage, ICaoKPI, ICaoTabChangeEvent, IColumnButton, IColumnConfig, IColumnPaginatedButton, IColumnPaginatedConfig, IDialogConfig, 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, CaoCardComponent, CaoDropDownComponent, CaoError, CaoFormField, CaoHint, CaoKpi, CaoSkeletonComponent, CaoTabGroup, CaoTabPanel, 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, IColumnButton, IColumnConfig, IColumnPaginatedButton, IColumnPaginatedConfig, IDialogConfig, IErrorStateMatcher, IFormFieldControl, IModal, INavContent, INavLink, ITableConfig, ITablePaginatedConfig, ModalType, ModalTypeClass, ModalTypeSize };