@sankhyalabs/ezui 6.6.0 → 6.7.0-dev.1

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

@@ -1,14 +1,28 @@
+interface RippleType {
+  x: number;
+  y: number;
+  id: number;
+}
+type SizeIconType = "x-small" | "small" | "medium" | "large" | "x-large";
 export declare class EzButton {
   _element: HTMLElement;
   private _button;
+  ripples: RippleType[];
+  isPressed: boolean;
   /**
    * 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.
+   * @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 modo de uso do botão.
    */
@@ -24,7 +38,30 @@ export declare class EzButton {
   /**
    * Define o tamanho do ez-button.
    */
-  size: "x-small" | "small" | "medium" | "large" | undefined;
+  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 direto do ez-button.
+   * Tem prioridade sobre o slot `rightIcon`.
+   */
+  rightIconName?: string;
+  /**
+   * Se verdadeiro, desabilita a animação de ripple.
+   */
+  suppressAnimation?: boolean;
   /**
    * Aplica o foco no botão.
    */
@@ -33,10 +70,19 @@ export declare class EzButton {
    * Remove o foco do botão.
    */
   setBlur(): Promise<void>;
+  private createRipple;
+  onMouseDown(event: MouseEvent): void;
+  onTouchStart(event: TouchEvent): void;
   clickListener(evt: MouseEvent): void;
+  removeForcedFocusVisible(): void;
+  connectedCallback(): void;
   componentDidLoad(): void;
+  disconnectCallback(): void;
   getButtonSize(sizeParam?: string): string;
-  getIconSize(sizeParam?: string): string;
+  getButtonSizeClass(): string;
+  getIconSize(): SizeIconType;
   handleSlotChange(ev: Event): void;
+  private renderRipples;
   render(): any;
 }
+export {};

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

@@ -1,4 +1,5 @@
 import { EventEmitter } from "../../stencil-public-runtime";
+export type EzChipType = 'primary' | 'secondary' | 'error' | 'error-light' | 'warning' | 'warning-light' | 'success' | 'success-light';
 export declare class EzChip {
   _element: HTMLElement;
   private _containerElem;
@@ -51,7 +52,7 @@ export declare class EzChip {
   /**
    * Define o tipo de estilização do chip.
    */
-  type: 'primary' | 'secondary';
+  type: EzChipType;
   /**
    * Define o tabindex do chip.
    * Por padrão é 0, permitindo que o chip seja focável.

package/dist/types/components/ez-combo-box/ez-combo-box.d.ts

@@ -109,6 +109,10 @@ export declare class EzComboBox {
    * Emitido quando acontece a alteração de valor do campo.
    */
   ezChange: EventEmitter<IOption>;
+  /**
+   * Emitido quando acontece a alteração de visibilidade do popover.
+   */
+  ezVisibilityChange: EventEmitter<boolean>;
   observeErrorMessage(): void;
   observeValue(newValue: IOption | string, oldValue: IOption | string): void;
   observeOptions(newOptions: IOption[], oldOptions: IOption[]): void;

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

@@ -36,6 +36,10 @@ export declare class EzGrid {
    * Emitido quando acontece a alteração de estado das colunas do grid: Ordenação, largura, etc.
    */
   ezColumnStateChange: EventEmitter<EzGridColumStateEvent>;
+  /**
+   * Emitido a página atual é alterada.
+   */
+  ezPageChangedChanged: EventEmitter<void>;
   /**
    * Emitido quando acontece a alteração de filtro de colunas.
    */

package/dist/types/components/ez-grid-view/ez-grid-view.d.ts

@@ -0,0 +1,141 @@
+import { DataUnit, DataUnitInMemoryLoader, Record, RECORD_DATE_FORMAT, UnitMetadata } from '@sankhyalabs/core';
+import { ICustomRender } from '../../utils';
+import { EzGridColumn } from '../ez-grid/controller/EzGridController';
+import { ICustomFormatter } from '../ez-grid/interfaces';
+export declare class EzGridView {
+  private _gridRef;
+  inMemoryLoader: DataUnitInMemoryLoader;
+  /**
+   * Metadados que definem a estrutura da grade.
+   */
+  metadata: UnitMetadata;
+  /**
+   * Registros a serem exibidos na grade.
+   */
+  records: Record[];
+  /**
+   * Configuração de exibição da grade.
+   */
+  columnsConfig?: ColumnConfig[];
+  /**
+   * Quantidade de registros por página.
+   */
+  pageSize: number;
+  /**
+   * Formato dos campos data dos registros.
+   */
+  recordDateFormat?: RECORD_DATE_FORMAT;
+  /**
+   * Habilita a seleção de várias linhas.
+   */
+  multipleSelection: boolean;
+  /**
+   * Define se a grid será focada ao ser carregada.
+   */
+  autoFocus?: boolean;
+  /**
+   * Define a forma como a paginação irá se comportar.
+   */
+  paginationCounterMode?: 'show' | 'hidden' | 'auto';
+  /**
+   * Informa se a coluna de chechbox deve ser suprimida
+   */
+  suppressCheckboxColumn?: boolean;
+  /**
+   * Informa se a grade deve suprimir o filtro de coluna.
+   */
+  suppressFilterColumn?: boolean;
+  /**
+   * Altera visualmente as sombras e bordas do componente
+   * Quando false, aplica o padrão de sombras ao componente (Utilizar quando for o elemento principal do layout)
+   * Quando true, aplica o padrão de outline ao componente (Utilizar quando estiver contido em outro elemento como um painel ou pop-up)
+   */
+  outlineMode?: boolean;
+  /**
+   * Ativa modo de linhas com cores alternadas.
+   */
+  enableRowTableStriped?: boolean;
+  /**
+   * Define se a grade deve ser exibida em modo compacto
+   */
+  compact?: boolean;
+  /**
+   * Define se a grade deve exibir um buscador de coluna com uso do Ctrl+F
+   */
+  useSearchColumn: boolean;
+  /**
+   * Define se a grade deve suprimir o scroll horizontal.
+   */
+  suppressHorizontalScroll: boolean;
+  /**
+   * Obtém o DataUnit da grade.
+   */
+  getDataUnit(): Promise<DataUnit>;
+  /**
+   * Recarrega os registros da grade.
+   */
+  refresh(): Promise<void>;
+  /**
+   * Obtém as linhas selecionadas.
+   */
+  getSelection(): Promise<Array<any>>;
+  /**
+   * Aplica um filtro rápido.
+   */
+  quickFilter(term: string): Promise<void>;
+  /**
+   * Localiza determinada coluna tornando-a visível.
+   */
+  locateColumn(columnName: string): Promise<void>;
+  /**
+   * Usa um argumento para filtrar as colunas por label
+   */
+  filterColumns(search: string): Promise<Array<EzGridColumn>>;
+  /**
+   * Adiciona item de menu nas colunas.
+   */
+  addColumnMenuItem(label: string, name: string, action: Function, icon: HTMLElement | string): Promise<void>;
+  /**
+   * Registra um formatador de valores para uma coluna da grid.
+   */
+  addCustomValueFormatter(columnName: string, customFormatter: ICustomFormatter): Promise<void>;
+  /**
+   * Remove o formatador de valores de uma coluna da grid.
+   */
+  removeCustomValueFormatter(columnName: string): Promise<void>;
+  /**
+   * Registra um render customizado para colunas da grid.
+   */
+  addGridCustomRender(fieldName: string, customRender: ICustomRender, detailContext?: string): Promise<void>;
+  /**
+   * Atribui o foco para a grade.
+   */
+  setFocus(): Promise<void>;
+  handleMetadataChanged(): Promise<void>;
+  handleRecordsChanged(): Promise<void>;
+  handlePageSizeChanged(): Promise<void>;
+  handleRecordDateFormatChanged(): Promise<void>;
+  private configGrid;
+  private updateDURecords;
+  private refreshFilterColumnDataSource;
+  private hasValidDependencies;
+  private buildGridConfig;
+  private parseColumnConfig;
+  private ensureInMemoryLoaderExists;
+  private buildInMemoryLoader;
+  private clearInMemoryLoader;
+  private buildInMemoryLoaderConfig;
+  componentDidLoad(): Promise<void>;
+  render(): any;
+}
+export interface ColumnConfig {
+  /**
+   * ID da coluna. Em cada linha do array de dados, esse ID deve coincidir com
+   * o nome do atributo que a coluna representa.
+   */
+  name: string;
+  /**
+   * Largura padrão da coluna em pixels absolutos.
+   */
+  width: number;
+}

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

@@ -69,6 +69,10 @@ export declare class EzList {
    * Habilita seleção de múltiplos items.
    */
   enableMultipleSelection: boolean;
+  /**
+   * Habilita a seleção de checkbox.
+   */
+  enabled: boolean;
   /**
    * Emitido quando acontece a alteração de estado da lista.
    */

package/dist/types/components/ez-list-item/ez-list-item.d.ts

@@ -0,0 +1,9 @@
+export declare class EzListItem {
+  /** Título do item da lista. */
+  titleText?: string;
+  /** Texto do item da lista. */
+  text?: string;
+  /** Nome do ícone que deve ser exibido no item. */
+  iconName?: string;
+  render(): any;
+}

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-spinner/ez-spinner.d.ts

@@ -0,0 +1,10 @@
+export declare class EzSpinner {
+  _element: HTMLElement;
+  private i18n;
+  /** Define o tamanho do spinner */
+  size?: 'small' | 'medium' | 'large';
+  private addInfoId;
+  componentWillLoad(): Promise<void>;
+  componentDidLoad(): void;
+  render(): any;
+}

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-tooltip/ez-tooltip.d.ts

@@ -4,6 +4,9 @@ export declare class EzTooltip {
   private _arrowElement;
   private _opened;
   private _debouncingTimeout;
+  private _cleanup;
+  private _mouseEnterHandler;
+  private _mouseLeaveHandler;
   _element: HTMLElement;
   /**
    * Mensagem que será apresentada no tooltip.
@@ -44,6 +47,11 @@ export declare class EzTooltip {
    * Define se o elemento manterá o mesmo tamanho do componente de ancora.
    */
   useAnchorSize: boolean;
+  /**
+   * Define a estratégia de posicionamento do tooltip.
+   * Use 'fixed' quando o elemento estiver dentro de containers com position: relative.
+   */
+  strategy: 'absolute' | 'fixed';
   watchAnchoringElement(newValue: HTMLElement, oldValue: HTMLElement): void;
   watchMessage(newValue: string): void;
   private openTooltip;
@@ -53,5 +61,7 @@ export declare class EzTooltip {
   private setEvents;
   private removeEvents;
   componentDidLoad(): void;
+  private addInfoId;
+  disconnectedCallback(): void;
   render(): any;
 }

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

@@ -76,6 +76,14 @@ export declare class EzTree {
    * Efetua a seleção de um item.
    */
   applyFilter(pattern: string): Promise<void>;
+  /**
+   * Expande todos os itens da árvore.
+   */
+  expandAll(): Promise<void>;
+  /**
+   * Recolhe todos os itens da árvore.
+   */
+  collapseAll(): Promise<void>;
   /**
    * Atualiza um item
    */

package/dist/types/components/ez-tree/types/Tree.d.ts

@@ -19,5 +19,8 @@ export declare class Tree extends Node implements ITree {
   private applyLayeredFilter;
   walkPath(parent: Node, path: string, callback: (node: Node) => void, currentLevel?: number): Promise<void>;
   loadChildren(node: Node): Promise<void>;
+  expandAll(): void;
+  collapseAll(): void;
+  private setAllChildrenExpanded;
   private loadLevel;
 }