openiis-ui
Version:
Una librería moderna de componentes UI para Angular con temas personalizables
98 lines (97 loc) • 4.7 kB
TypeScript
import { EventEmitter, ElementRef } from '@angular/core';
import * as i0 from "@angular/core";
export type ButtonVariant = undefined | 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' | 'outline-primary' | 'outline-secondary' | 'outline-success' | 'outline-warning' | 'outline-danger' | 'outline-info' | 'ghost' | 'text' | 'link' | 'subtle' | 'icon';
export type ButtonType = 'button' | 'submit' | 'reset';
export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
export declare class OpeniisButtonComponent {
buttonElement: ElementRef<HTMLButtonElement>;
/** Texto del botón */
text: string;
/** Tipo de botón para compatibilidad (primary, secondary, etc.) */
type: ButtonVariant;
/** Tamaño del botón */
size: ButtonSize;
/** Tipo HTML del botón */
htmlType: ButtonType;
/** Estado deshabilitado */
disabled: boolean;
/** Estado de carga */
loading: boolean;
/** Icono izquierdo (material icon name) */
iconLeft: string;
/** Icono derecho (material icon name) */
iconRight: string;
/** Solo mostrar icono (ocultar texto) */
iconOnly: boolean;
/** Botón de ancho completo */
fullWidth: boolean;
/** Texto del tooltip */
tooltipText: string;
/** Posición del tooltip */
tooltipPosition: 'top' | 'bottom' | 'left' | 'right';
/** Variante del tooltip */
tooltipVariant: 'default' | 'danger';
/** Título del botón */
title: string;
/** Botón con dropdown */
hasDropdown: boolean;
/** Estado del dropdown */
dropdownOpen: boolean;
/** Etiqueta aria */
ariaLabel: string;
/** Referencia aria describedby */
ariaDescribedBy: string;
/** Clases CSS adicionales */
extraClasses: string;
/** Botón responsivo */
responsive: boolean;
/** Evento de clic */
clickEvent: EventEmitter<MouseEvent>;
/** Evento de toggle del dropdown */
dropdownToggle: EventEmitter<boolean>;
showTooltip: boolean;
iconAsset: string;
colorSvg: string;
backgroundSvg: string;
widthSvg: string;
heightSvg: string;
sizeSvg: string;
/**
* Clases CSS del botón
*/
get buttonClasses(): string;
/**
* Determina si se debe mostrar el tooltip
*/
get shouldShowTooltip(): boolean;
/**
* Texto efectivo del tooltip
*/
get effectiveTooltipText(): string;
/**
* Verifica si el botón es de solo icono
*/
get isIconOnlyButton(): boolean;
/**
* Maneja el clic del botón
*/
onClick(event: MouseEvent): void;
/**
* Muestra el tooltip en hover
*/
showTooltipOnHover(): void;
/**
* Oculta el tooltip al salir del hover
*/
hideTooltipOnLeave(): void;
/**
* Enfoca el botón
*/
focus(): void;
/**
* Desenfoca el botón
*/
blur(): void;
static ɵfac: i0.ɵɵFactoryDeclaration<OpeniisButtonComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<OpeniisButtonComponent, "openiis-button", never, { "text": { "alias": "text"; "required": false; }; "type": { "alias": "type"; "required": false; }; "size": { "alias": "size"; "required": false; }; "htmlType": { "alias": "htmlType"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "iconLeft": { "alias": "iconLeft"; "required": false; }; "iconRight": { "alias": "iconRight"; "required": false; }; "iconOnly": { "alias": "iconOnly"; "required": false; }; "fullWidth": { "alias": "fullWidth"; "required": false; }; "tooltipText": { "alias": "tooltipText"; "required": false; }; "tooltipPosition": { "alias": "tooltipPosition"; "required": false; }; "tooltipVariant": { "alias": "tooltipVariant"; "required": false; }; "title": { "alias": "title"; "required": false; }; "hasDropdown": { "alias": "hasDropdown"; "required": false; }; "dropdownOpen": { "alias": "dropdownOpen"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "ariaDescribedBy": { "alias": "ariaDescribedBy"; "required": false; }; "extraClasses": { "alias": "extraClasses"; "required": false; }; "responsive": { "alias": "responsive"; "required": false; }; "iconAsset": { "alias": "iconAsset"; "required": false; }; "colorSvg": { "alias": "colorSvg"; "required": false; }; "backgroundSvg": { "alias": "backgroundSvg"; "required": false; }; "widthSvg": { "alias": "widthSvg"; "required": false; }; "heightSvg": { "alias": "heightSvg"; "required": false; }; "sizeSvg": { "alias": "sizeSvg"; "required": false; }; }, { "clickEvent": "clickEvent"; "dropdownToggle": "dropdownToggle"; }, never, never, true, never>;
}