tecnualng 21.0.11 → 21.0.16

package/types/tecnualng.d.ts

@@ -1,6 +1,6 @@
 import * as _angular_core from '@angular/core';
-import { ElementRef, TemplateRef, OnDestroy, ApplicationRef, EnvironmentInjector, AfterContentInit, QueryList } from '@angular/core';
-import { ControlValueAccessor } from '@angular/forms';
+import { ElementRef, TemplateRef, AfterViewInit, OnDestroy, NgZone, ApplicationRef, EnvironmentInjector, AfterContentInit, QueryList } from '@angular/core';
+import { ControlValueAccessor, NgControl } from '@angular/forms';
 
 type TngButtonAppearance = 'text' | 'filled' | 'elevated' | 'outlined' | 'tonal';
 declare class TngButton {
@@ -51,6 +51,43 @@ declare class TecnualInputComponent implements ControlValueAccessor {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<TecnualInputComponent, "tng-input", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; }, { "disabled": "disabledChange"; }, never, never, true, never>;
 }
 
+declare class TngInputDirective {
+    private el;
+    private renderer;
+    ngControl: NgControl | null;
+    disabled: _angular_core.InputSignal<boolean>;
+    placeholder: _angular_core.InputSignal<string>;
+    focused: _angular_core.WritableSignal<boolean>;
+    checked: _angular_core.WritableSignal<boolean>;
+    private _value;
+    private _inputType;
+    hasValue: _angular_core.Signal<boolean>;
+    computedPlaceholder: _angular_core.Signal<string>;
+    isCheckbox: _angular_core.Signal<boolean>;
+    isRadio: _angular_core.Signal<boolean>;
+    isTextField: _angular_core.Signal<boolean>;
+    constructor();
+    onFocus(): void;
+    onBlur(): void;
+    onInput(): void;
+    onChange(): void;
+    ngAfterViewInit(): void;
+    private detectInputType;
+    private updateValue;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TngInputDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TngInputDirective, "input[tngInput], textarea[tngInput]", never, { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare class TngFormFieldComponent {
+    label: _angular_core.InputSignal<string>;
+    inputDirective: _angular_core.Signal<TngInputDirective | undefined>;
+    isFocused: _angular_core.Signal<boolean>;
+    hasValue: _angular_core.Signal<boolean>;
+    isDisabled: _angular_core.Signal<boolean>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TngFormFieldComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TngFormFieldComponent, "tng-form-field", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; }, {}, ["inputDirective"], ["*"], true, never>;
+}
+
 interface DateRange {
     start: Date | null;
     end: Date | null;
@@ -124,8 +161,8 @@ declare class TecnualTableComponent {
 }
 
 type TngToolbarPosition = 'top' | 'bottom' | 'static';
-type TngToolbarPositionType = 'static' | 'relative' | 'absolute' | 'fixed';
-type TngToolbarColor = 'default' | 'primary' | 'secondary';
+type TngToolbarPositionType = 'static' | 'relative' | 'absolute' | 'fixed' | 'sticky';
+type TngToolbarColor = 'default' | 'primary' | 'secondary' | 'transparent';
 declare class TngToolbarComponent {
     position: _angular_core.InputSignal<TngToolbarPosition>;
     positionType: _angular_core.InputSignal<TngToolbarPositionType>;
@@ -135,7 +172,41 @@ declare class TngToolbarComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<TngToolbarComponent, "tng-toolbar", never, { "position": { "alias": "position"; "required": false; "isSignal": true; }; "positionType": { "alias": "positionType"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "elevation": { "alias": "elevation"; "required": false; "isSignal": true; }; }, {}, never, ["[toolbar-left]", "[toolbar-center]", "*", "[toolbar-right]"], true, never>;
 }
 
-type ThemeName = 'light' | 'dark' | 'ocean' | 'forest' | 'sunset' | 'royal' | 'monochrome' | 'aurora' | 'aurora-dark';
+declare class TngTabComponent {
+    label: _angular_core.InputSignal<string>;
+    content: _angular_core.Signal<TemplateRef<any>>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TngTabComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TngTabComponent, "tng-tab", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+declare class TngTabsComponent implements AfterViewInit, OnDestroy {
+    private ngZone;
+    tabs: _angular_core.Signal<readonly TngTabComponent[]>;
+    activeIndex: _angular_core.WritableSignal<number>;
+    inkBarLeft: _angular_core.WritableSignal<number>;
+    inkBarWidth: _angular_core.WritableSignal<number>;
+    scrollLeft: _angular_core.WritableSignal<number>;
+    showPagination: _angular_core.WritableSignal<boolean>;
+    isScrolledToEnd: _angular_core.WritableSignal<boolean>;
+    listContainer: _angular_core.Signal<ElementRef<HTMLElement> | undefined>;
+    tabList: _angular_core.Signal<ElementRef<HTMLElement> | undefined>;
+    tabLabels: _angular_core.Signal<ElementRef<HTMLElement>[]>;
+    private resizeObserver;
+    constructor(ngZone: NgZone);
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    selectTab(index: number): void;
+    updateInkBar(): void;
+    checkPagination(): void;
+    scrollHeader(direction: number): void;
+    private getMaxScroll;
+    private updateScrollState;
+    private scrollToTab;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TngTabsComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TngTabsComponent, "tng-tabs", never, {}, {}, ["tabs"], never, true, never>;
+}
+
+type ThemeName = 'light' | 'dark' | 'ocean' | 'forest' | 'sunset' | 'royal' | 'monochrome' | 'aurora' | 'aurora-dark' | 'futuristic';
 interface Theme {
     name: ThemeName;
     displayName: string;
@@ -229,5 +300,149 @@ declare class TngMenuGroupComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<TngMenuGroupComponent, "tng-menu-group", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
-export { TecnualDatepickerComponent, TecnualInputComponent, TecnualTableComponent, ThemeService, TngButton, TngCardComponent, TngExpansionPanelComponent, TngMenuComponent, TngMenuGroupComponent, TngMenuItemComponent, TngToolbarComponent, TngTooltipComponent, TngTooltipDirective };
-export type { DateRange, TableColumn, Theme, ThemeName, TngButtonAppearance, TngCardVariant, TngToolbarColor, TngToolbarPosition, TngToolbarPositionType };
+/**
+ * TngSidebar - Componente moderno de barra lateral
+ *
+ * Características:
+ * - Totalmente basado en Signals
+ * - Animaciones CSS puras
+ * - Posicionamiento configurable (izquierda/derecha)
+ * - Proyección de contenido
+ * - Responsive y accesible
+ */
+declare class TngSidebarComponent {
+    /**
+     * Controla si el sidebar está abierto o cerrado
+     */
+    isOpen: _angular_core.WritableSignal<boolean>;
+    /**
+     * Posición del sidebar: 'left' o 'right'
+     */
+    position: _angular_core.InputSignal<"left" | "right">;
+    /**
+     * Ancho del sidebar en píxeles
+     */
+    width: _angular_core.InputSignal<number>;
+    /**
+     * Muestra un overlay de fondo cuando está abierto
+     */
+    showOverlay: _angular_core.InputSignal<boolean>;
+    /**
+     * Evento emitido cuando el sidebar se cierra
+     */
+    closed: _angular_core.OutputEmitterRef<void>;
+    /**
+     * Evento emitido cuando el sidebar se abre
+     */
+    opened: _angular_core.OutputEmitterRef<void>;
+    /**
+     * Alterna el estado del sidebar
+     */
+    toggle(): void;
+    /**
+     * Abre el sidebar
+     */
+    open(): void;
+    /**
+     * Cierra el sidebar
+     */
+    close(): void;
+    /**
+     * Maneja el clic en el overlay para cerrar el sidebar
+     */
+    handleOverlayClick(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TngSidebarComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TngSidebarComponent, "tng-sidebar", never, { "position": { "alias": "position"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "showOverlay": { "alias": "showOverlay"; "required": false; "isSignal": true; }; }, { "closed": "closed"; "opened": "opened"; }, never, ["*"], true, never>;
+}
+
+interface SelectOption {
+    value: any;
+    label: string;
+    disabled?: boolean;
+}
+declare class TngSelectDirective implements AfterViewInit, OnDestroy {
+    private el;
+    private viewContainerRef;
+    ngControl: NgControl | null;
+    enableMulti: _angular_core.InputSignal<boolean>;
+    multiple: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    enableSearch: _angular_core.InputSignal<boolean>;
+    placeholder: _angular_core.InputSignal<string>;
+    customTrigger: _angular_core.InputSignal<boolean>;
+    triggerRef: _angular_core.InputSignal<HTMLElement | undefined>;
+    selectedValues: _angular_core.ModelSignal<any[]>;
+    isOpen: _angular_core.WritableSignal<boolean>;
+    searchQuery: _angular_core.WritableSignal<string>;
+    private _options;
+    private _selectedIndices;
+    private panelRef;
+    private triggerEl;
+    isMulti: _angular_core.Signal<boolean>;
+    options: _angular_core.Signal<SelectOption[]>;
+    filteredOptions: _angular_core.Signal<SelectOption[]>;
+    selectedOptions: _angular_core.Signal<SelectOption[]>;
+    displayText: _angular_core.Signal<string>;
+    constructor();
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    onClick(event: Event): void;
+    onKeyDown(event: KeyboardEvent): void;
+    private createTrigger;
+    private loadOptionsFromSelect;
+    private loadInitialSelection;
+    togglePanel(): void;
+    private openPanel;
+    private closePanel;
+    private positionPanel;
+    private onOptionSelected;
+    private updateNativeSelect;
+    private onDocumentClick;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TngSelectDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TngSelectDirective, "select[tngSelect]", never, { "enableMulti": { "alias": "enableMulti"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "enableSearch": { "alias": "enableSearch"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "customTrigger": { "alias": "customTrigger"; "required": false; "isSignal": true; }; "triggerRef": { "alias": "triggerRef"; "required": false; "isSignal": true; }; "selectedValues": { "alias": "selectedValues"; "required": false; "isSignal": true; }; }, { "selectedValues": "selectedValuesChange"; }, never, never, true, never>;
+}
+
+declare class TngSelectPanelComponent {
+    options: _angular_core.WritableSignal<SelectOption[]>;
+    selectedIndices: _angular_core.WritableSignal<number[]>;
+    enableMulti: _angular_core.WritableSignal<boolean>;
+    enableSearch: _angular_core.WritableSignal<boolean>;
+    searchQuery: _angular_core.WritableSignal<string>;
+    optionSelected: _angular_core.OutputEmitterRef<number>;
+    searchQueryChanged: _angular_core.OutputEmitterRef<string>;
+    closeRequested: _angular_core.OutputEmitterRef<void>;
+    onSearchInput(event: Event): void;
+    isSelected(index: number): boolean;
+    onOptionClick(index: number, option: SelectOption): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TngSelectPanelComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TngSelectPanelComponent, "tng-select-panel", never, {}, { "optionSelected": "optionSelected"; "searchQueryChanged": "searchQueryChanged"; "closeRequested": "closeRequested"; }, never, never, true, never>;
+}
+
+declare class TngSelectComponent implements ControlValueAccessor {
+    label: _angular_core.InputSignal<string>;
+    options: _angular_core.InputSignal<SelectOption[]>;
+    enableMulti: _angular_core.InputSignal<boolean>;
+    enableSearch: _angular_core.InputSignal<boolean>;
+    placeholder: _angular_core.InputSignal<string>;
+    disabled: _angular_core.InputSignal<boolean>;
+    hint: _angular_core.InputSignal<string>;
+    ariaLabel: _angular_core.InputSignal<string>;
+    value: _angular_core.ModelSignal<any[]>;
+    private cvaDisabled;
+    selectDirective: _angular_core.Signal<TngSelectDirective | undefined>;
+    selectId: _angular_core.Signal<string>;
+    effectiveDisabled: _angular_core.Signal<boolean>;
+    displayText: _angular_core.Signal<string>;
+    private onChange;
+    private onTouched;
+    constructor();
+    onDisplayClick(event: Event): void;
+    writeValue(obj: any): void;
+    registerOnChange(fn: any): void;
+    registerOnTouched(fn: any): void;
+    setDisabledState(isDisabled: boolean): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TngSelectComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TngSelectComponent, "tng-select", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": true; "isSignal": true; }; "enableMulti": { "alias": "enableMulti"; "required": false; "isSignal": true; }; "enableSearch": { "alias": "enableSearch"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
+}
+
+export { TecnualDatepickerComponent, TecnualInputComponent, TecnualTableComponent, ThemeService, TngButton, TngCardComponent, TngExpansionPanelComponent, TngFormFieldComponent, TngInputDirective, TngMenuComponent, TngMenuGroupComponent, TngMenuItemComponent, TngSelectComponent, TngSelectDirective, TngSelectPanelComponent, TngSidebarComponent, TngTabComponent, TngTabsComponent, TngToolbarComponent, TngTooltipComponent, TngTooltipDirective };
+export type { DateRange, SelectOption, TableColumn, Theme, ThemeName, TngButtonAppearance, TngCardVariant, TngToolbarColor, TngToolbarPosition, TngToolbarPositionType };