@sankhyalabs/ezui 6.5.0-dev.1 → 6.5.0-dev.11

package/dist/types/components/ez-popup/ez-popup.d.ts

@@ -1,9 +1,9 @@
 import { EventEmitter } from "../../stencil-public-runtime";
+import { EzButtonProps } from "./interfaces/EzButtonProps";
 export declare class EzPopup {
   private _keyboardManager;
   private _popupRef;
   private _overlayId;
-  private _sizeClasses;
   private _element;
   /**
    * Define a largura do ez-popup.
@@ -29,6 +29,16 @@ export declare class EzPopup {
    * Possibilita scroll vertical no conteúdo interno do componente
    */
   enabledScroll: boolean;
+  /**
+   * Define se o popup deve fechar automaticamente ao clicar fora dele.
+   * @default true
+   */
+  autoClose: boolean;
+  /**
+   * Botões do rodapé do popup. Aceita todas as propriedades do ez-button.
+   * Limitado a até 3 botões.
+   */
+  footerButtons?: Partial<EzButtonProps>[];
   /**
    * Evento emitido ao clicar no botão de fechar (onEzClosePopup).
    */
@@ -37,7 +47,9 @@ export declare class EzPopup {
    * Evento emitido ao clicar no botão de fechar (ezPopupAction = OK)
    */
   ezPopupAction: EventEmitter<string>;
+  private i18n;
   observeConfig(): void;
+  componentWillLoad(): Promise<void>;
   componentDidLoad(): void;
   disconnectedCallback(): void;
   private closePopup;
@@ -45,8 +57,9 @@ export declare class EzPopup {
   private manageOverlay;
   private popUpFocus;
   getGridSize(): string;
-  private handlePopupHeight;
-  private handlePopupOverflowY;
+  private getDialogClass;
   componentDidRender(): void;
+  private handleAutoClose;
+  private handleDefaultPropsButtonsByIndex;
   render(): any;
 }

package/dist/types/components/ez-popup/interfaces/EzButtonProps.d.ts

@@ -0,0 +1,28 @@
+export type EzButtonProps = {
+  /** Texto a ser apresentado como título do botão. */
+  label?: string;
+  /** Se false o usuário não pode interagir com o botão. */
+  enabled?: boolean;
+  /** Se verdadeiro o clique no botão fica desabilitado mas a navegação continua funcional. Se full, o usuário não pode interagir com o botão. */
+  isDisabled?: boolean | "full" | "";
+  /** Define o modo de uso do botão. */
+  mode?: "regular" | "icon" | "link" | "label-icon";
+  /** Define o caminho usado nos modos `icon` e `label-icon` para imagens não contempladas na biblioteca de ícones. */
+  image?: string;
+  /** Define o ícone a ser usado da biblioteca de ícones. */
+  iconName?: string;
+  /** Define o tamanho do ez-button. */
+  size?: "x-small" | "small" | "medium" | "large";
+  /** Define a variante do ez-button. */
+  variant?: "primary" | "secondary" | "tertiary";
+  /** Define o tipo do botão. Pode ser `button`, `submit` ou `reset`. */
+  type?: string;
+  /** Define o ícone esquerdo do ez-button. Tem prioridade sobre o slot `leftIcon`. */
+  leftIconName?: string;
+  /** Define o ícone direito do ez-button. Tem prioridade sobre o slot `rightIcon`. */
+  rightIconName?: string;
+  /** Se verdadeiro, desabilita a animação de ripple. */
+  suppressAnimation?: boolean;
+  /** Função chamada ao clicar no botão. */
+  onClick?: (event: MouseEvent) => void;
+};

package/dist/types/components/ez-split-button/ez-split-button.d.ts

@@ -1,5 +1,30 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { IDropdownItem, IDropdownSubAction } from '../ez-dropdown/structure/DropdownItem';
+type ButtonMode = 'default' | 'icon-only' | 'icon-left';
+type ButtonSize = 'small' | 'medium' | 'large';
+interface RippleType {
+  x: number;
+  y: number;
+  id: number;
+}
+/**
+ * Split Button Component
+ *
+ * @example
+ * ```html
+ * <ez-split-button
+ *   label="Save"
+ *   mode="icon-left"
+ *   left-icon-name="save"
+ *   size="medium"
+ *   variant="primary">
+ * </ez-split-button>
+ * ```
+ *
+ * @fires buttonClick - Emitido quando o botão principal é clicado
+ * @fires dropdownItemClick - Emitido quando um botão do dropdown é clicado
+ * @fires dropdownSubActionClick - Emitido quando uma subação de um item do dropdown é clicada
+ */
 export declare class EzSplitButton {
   _element: HTMLElement;
   private leftButton;
@@ -7,15 +32,37 @@ export declare class EzSplitButton {
   private dropdownParent;
   private offsetParentRect;
   private i18n;
+  leftRipples: RippleType[];
+  rightRipples: RippleType[];
+  isLeftPressed: boolean;
+  isRightPressed: boolean;
+  /**
+   * Se true, o dropdown do botão é exibido.
+   */
   show: boolean;
   /**
    * Se false o usuário não pode interagir com o botão.
+   * @deprecated Use `isDisabled` prop instead.
    */
   enabled: boolean;
+  /**
+   * Se verdadeiro o clique no botão fica desabilitado mas a navegação continua funcional.
+   * Se full, o usuário não pode interagir com o botão.
+   */
+  isDisabled: boolean | "full" | "";
   /**
    * Define o ícone a ser usado da biblioteca de ícones: [ez-icons](https://gilded-nasturtium-6b64dd.netlify.app/docs/components/layout-doc/icons/)
+   * @deprecated Use `leftIconName` prop instead.
    */
   iconName: string;
+  /**
+   * Define o ícone esquerdo a ser usado da biblioteca de ícones: [ez-icons](https://gilded-nasturtium-6b64dd.netlify.app/docs/components/layout-doc/icons/)
+   */
+  leftIconName: string;
+  /**
+   * Define o ícone direito a ser usado da biblioteca de ícones: [ez-icons](https://gilded-nasturtium-6b64dd.netlify.app/docs/components/layout-doc/icons/)
+   */
+  rightIconName: string;
   /**
    * Define o caminho usado nos modos `icon-only` e `icon-left` para imagens não contempladas na biblioteca de ícones.
    */
@@ -39,11 +86,19 @@ export declare class EzSplitButton {
   /**
    * Define o modo de uso do botão.
    */
-  mode: 'default' | 'icon-only' | 'icon-left';
+  mode: ButtonMode;
   /**
    * Define o tamanho do ez-split-button.
    */
-  size: 'small' | 'medium' | 'large';
+  size: ButtonSize;
+  /**
+   * Define a variante do ez-split-button.
+   */
+  variant?: "primary" | "secondary" | "tertiary";
+  /**
+   * Se verdadeiro, desabilita a animação de ripple.
+   */
+  suppressAnimation?: boolean;
   /**
    * Função builder que possibilita alterar como o item da lista vai ser apresentado.
    * Observação: No react ele se transforma em VNode e não como HTMLElement.
@@ -71,7 +126,7 @@ export declare class EzSplitButton {
   setLeftButtonFocus(): Promise<void>;
   /**
    * Aplica o foco no botão do dropdown.
-   */
+  */
   setRightButtonFocus(): Promise<void>;
   /**
    * Abre ou Fecha o dropdown do Split Button.
@@ -81,24 +136,54 @@ export declare class EzSplitButton {
    * Informa se a lista de ações está aberta.
    */
   isOpenedDropdown(): Promise<boolean>;
+  private rippleCounter;
+  private eventListeners;
+  private createRipple;
+  private getEventCoordinates;
+  private addRippleToButton;
+  private setButtonPressed;
+  private scheduleRippleCleanup;
+  private removeRipple;
+  onMouseDown(event: MouseEvent): void;
+  onTouchStart(event: TouchEvent): void;
   clickListener(evt: MouseEvent): void;
+  private shouldShowLabelOnLeftButton;
+  private shouldShowIconOnLeftButton;
   private getIconSize;
   private closeDropdown;
   private handleButtonClick;
   private handleDropdownItemClick;
   private handleDropdownSubActionClick;
-  private resolveOffsetParentRect;
   /**
    * Método responsável em posicionar o dropdown na tela.
    * Faz com que o dropdown se ajuste automaticamente ao espaco na tela
    */
   private positionDropdown;
-  private setEvents;
+  private calculateDropdownPosition;
+  private setupEventListeners;
+  private cleanupEventListeners;
   componentWillLoad(): Promise<void>;
-  componentWillRender(): void;
   componentDidLoad(): void;
+  disconnectedCallback(): void;
   componentDidUpdate(): void;
+  private addElementIDs;
+  private renderRipples;
   render(): any;
-  private shouldShowLabelOnLeftButton;
-  private shouldShowIconOnLeftButton;
+  private renderLeftButton;
+  private renderDivider;
+  private renderDropdownSection;
+  private renderRightButton;
+  private renderDropdownContent;
+  private renderLeftIcon;
+  private renderLabel;
+  private renderRightIcon;
+  private renderDropdown;
+  private removeForcedFocusVisibleLeft;
+  private removeForcedFocusVisibleRight;
+  private addBlurListeners;
+  private removeBlurListeners;
+  connectedCallback(): void;
+  private get isButtonDisabled();
+  private get isButtonAriaDisabled();
 }
+export {};

package/dist/types/components/ez-tag-input/ez-tag-input.d.ts

@@ -0,0 +1,93 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { OptionsSetFocus } from './interfaces/optionsSetFocus';
+export declare class EzTagInput {
+  _element: HTMLElement;
+  private _inputElement?;
+  private _keyboardManager;
+  /** Texto do label exibido acima do input */
+  label: string;
+  /** Placeholder do input */
+  placeholder: string;
+  /** Texto de ajuda exibido abaixo do input */
+  helpText?: string;
+  /** Define se o input está habilitado */
+  enabled?: boolean;
+  /** Define se o input é somente leitura */
+  readonly?: boolean;
+  /** Nome do input */
+  name?: string;
+  /** Array de tags iniciais */
+  tags?: string[];
+  /** Tamanho máximo de uma tag */
+  maxTagLength?: number;
+  /** Número máximo de tags permitidas */
+  maxTags?: number;
+  /** Define se tags duplicadas são permitidas */
+  allowDuplicates?: boolean;
+  /** Estado visual do componente */
+  state?: "default" | "error" | "success" | "warning";
+  /**
+   * Função de validação customizada para tags
+   * @param tag - A tag que está sendo validada
+   * @param existingTags - Array com as tags já existentes
+   * @returns true se válida, false ou string com mensagem de erro se inválida
+   * @example
+   * // Validação para permitir apenas números
+   * validator={(tag) => /^\d+$/.test(tag) || "Apenas números são permitidos"}
+   *
+   * // Validação para evitar palavrões
+   * validator={(tag) => !badWords.includes(tag.toLowerCase())}
+   */
+  validator?: (tag: string, existingTags: string[]) => boolean | string;
+  /** Define se a navegação por teclado pelas tags deve ser suprimida */
+  suppressTagsKeyboardNavigation?: boolean;
+  /** Define se a tecla Backspace deve remover a última tag quando o input está vazio */
+  suppressBackspaceToRemove?: boolean;
+  /** Evento disparado quando as tags mudam */
+  ezChange: EventEmitter<string[]>;
+  /** Evento disparado quando uma tag é adicionada */
+  ezTagAdded: EventEmitter<string>;
+  /** Evento disparado quando uma tag é removida */
+  ezTagRemoved: EventEmitter<string>;
+  /** Evento disparado quando o input recebe foco */
+  ezFocus: EventEmitter<string[]>;
+  /** Evento disparado quando o input perde foco */
+  ezBlur: EventEmitter<string[]>;
+  /** Evento disparado quando uma validação falha */
+  ezValidationError: EventEmitter<{
+    tag: string;
+    error?: string;
+  }>;
+  /** Emitido quando é digitado no campo de entrada */
+  ezType: EventEmitter<string>;
+  /** Aplica o foco no campo */
+  setFocus(option?: OptionsSetFocus): Promise<void>;
+  /** Remove o foco do campo */
+  setBlur(): Promise<void>;
+  /** Adiciona uma tag programaticamente */
+  addTag(tag: string): Promise<boolean>;
+  /** Remove uma tag programaticamente */
+  removeTag(tag: string): Promise<boolean>;
+  /** Limpa todas as tags */
+  clearTags(): Promise<void>;
+  private addInfoId;
+  private initializeKeyboardManager;
+  private handleAddCurrentTag;
+  private handleAddTag;
+  private updateTagFocus;
+  private getCurrentActiveTagIndex;
+  private setTagFocus;
+  private handlePreviousTagFocus;
+  private handleNextTagFocus;
+  private handleRemoveTag;
+  private handleInputChange;
+  private handleInputKeyDown;
+  private handleInputFocus;
+  private handleInputBlur;
+  private handleTagClick;
+  private handleClearInput;
+  componentWillLoad(): Promise<void>;
+  componentDidLoad(): void;
+  disconnectedCallback(): void;
+  render(): any;
+}

package/dist/types/components/ez-tag-input/interfaces/optionsSetFocus.d.ts

@@ -0,0 +1,4 @@
+export interface OptionsSetFocus {
+  selectText?: boolean;
+  preventScroll?: boolean;
+}