@sankhyalabs/ezui 6.0.1 → 6.1.0-dev.2

package/dist/types/components/ez-search-plus/subcomponent/ez-search-result-list/ez-search-result-list.d.ts

@@ -0,0 +1,26 @@
+import { EventEmitter } from '../../../../stencil-public-runtime';
+import { IOption } from '../../ez-search-plus';
+export declare class EzSearchResultList {
+  private readonly _textEmptyList;
+  private readonly _startHighlightTag;
+  private readonly _endHighlightTag;
+  private _optionsList;
+  showLoading: boolean;
+  visibleOptions: Array<IOption>;
+  value: IOption | string;
+  showOptionValue: boolean;
+  changeValue: EventEmitter<IOption>;
+  _preSelection: number;
+  nextOption(): Promise<void>;
+  previousOption(): Promise<void>;
+  private preSelectItemByIndex;
+  private selectOption;
+  private createAndSelectOption;
+  private scrollToOption;
+  private buildItem;
+  selectCurrentItem(): Promise<void>;
+  cancelSelection(): Promise<void>;
+  private cancelPreselection;
+  private canShowListOptions;
+  render(): any;
+}

package/dist/types/components/ez-skeleton/ez-skeleton.constants.d.ts

@@ -1 +1,55 @@
-export declare const ALLOWED_ANIMATIONS: string[];
+export declare const ALLOWED_ANIMATIONS: readonly ["progress", "pulse", "false"];
+export type SkeletonAnimation = typeof ALLOWED_ANIMATIONS[number];
+export declare const ALLOWED_VARIANTS: readonly ["circle", "rect", "text"];
+export type SkeletonVariant = typeof ALLOWED_VARIANTS[number];
+export declare const DEFAULT_VALUES: {
+  readonly COUNT: 1;
+  readonly VARIANT: "text";
+  readonly ANIMATION: "progress";
+};
+export declare const SKELETON_ARIA: {
+  readonly DATA_BUSY: "true";
+  readonly DATA_VALUEMIN: "0";
+  readonly DATA_VALUEMAX: "100";
+  readonly DATA_VALUETEXT: "Loading...";
+  readonly ROLE: "progressbar";
+  readonly TABINDEX: "0";
+};
+export declare const VARIANT_TYPES: {
+  readonly CIRCLE: "circle";
+  readonly RECT: "rect";
+  readonly TEXT: "text";
+};
+export declare const ANIMATION_TYPES: {
+  readonly PROGRESS: "progress";
+  readonly PULSE: "pulse";
+  readonly FALSE: "false";
+};
+export interface ISkeletonProps {
+  variant: SkeletonVariant;
+  animation: SkeletonAnimation;
+  width?: string;
+  height?: string;
+  marginTop?: string;
+  marginRight?: string;
+  marginBottom?: string;
+  marginLeft?: string;
+  count?: number;
+}
+export interface ISkeletonRenderConfig {
+  skeletonClasses: {
+    skeleton: boolean;
+    circle: boolean;
+    rect: boolean;
+    progress: boolean;
+    pulse: boolean;
+  };
+  styles: {
+    width?: string;
+    height?: string;
+    marginTop?: string;
+    marginRight?: string;
+    marginBottom?: string;
+    marginLeft?: string;
+  };
+}

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

@@ -1,4 +1,11 @@
+import { SkeletonAnimation, SkeletonVariant } from './ez-skeleton.constants';
 export declare class EzSkeleton {
+  /**
+   * The template to be used for the skeleton. Can be an HTMLElement or a string.
+   *
+   * @prop {HTMLElement | string} template - The template to be used for the skeleton.
+   */
+  template: HTMLElement | string;
   /**
    * Number of rows of current skeleton type
    *
@@ -6,27 +13,40 @@ export declare class EzSkeleton {
    */
   count: number;
   /**
-  *    Variant of the skeleton - circle or row
-  *
-  * @type {('circle' | '')}
-  * @memberof Skeleton
-  */
-  variant: 'circle' | 'rect' | 'text';
+   * Variant of the skeleton - circle or row
+   *
+   * @type {('circle', 'rect', 'text')}
+   * @memberof Skeleton
+   */
+  variant: SkeletonVariant;
   /**
    * Width of the skeleton ex. 100px, 100%, auto etc.
    *
-   *
    * @type {string}
    * @memberof Skeleton
    */
   width: string;
   /**
-  * Height of the skeleton ex. 100px, 100%, auto etc.
-  *
-  * @type {string}
-  * @memberof Skeleton
-  */
+   * Height of the skeleton ex. 100px, 100%, auto etc.
+   *
+   * @type {string}
+   * @memberof Skeleton
+   */
   height: string;
+  /**
+   * MarginTop of the skeleton ex. 10px, 0 etc.
+   *
+   * @type {string}
+   * @memberof Skeleton
+   */
+  marginTop: string;
+  /**
+   * MarginRight of the skeleton ex. 10px, 0 etc.
+   *
+   * @type {string}
+   * @memberof Skeleton
+   */
+  marginRight: string;
   /**
    * MarginBottom of the skeleton ex. 10px, 0 etc.
    *
@@ -34,21 +54,29 @@ export declare class EzSkeleton {
    * @memberof Skeleton
    */
   marginBottom: string;
+  /**
+   * MarginLeft of the skeleton ex. 10px, 0 etc.
+   *
+   * @type {string}
+   * @memberof Skeleton
+   */
+  marginLeft: string;
   /**
    * Animation type
    *
-   * @type {('progress' | 'progress-dark' | 'pulse' | 'false')}
+   * @type {('progress' | 'pulse' | 'false')}
    * @memberof Skeleton
    */
-  animation: 'progress' | 'progress-dark' | 'pulse' | 'false';
-  items: number[];
+  animation: SkeletonAnimation;
+  private items;
   componentWillLoad(): void;
   componentWillUpdate(): void;
-  init(): void;
-  get style(): {
-    width?: string;
-    height?: string;
-    marginBottom?: string;
-  };
-  render(): any[];
+  private initializeItems;
+  private getSkeletonConfig;
+  private validateVariant;
+  private validateAnimation;
+  private renderSkeletonTemplate;
+  private renderSkeletonItem;
+  private renderSkeletonSpan;
+  render(): string | any[] | HTMLElement;
 }

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

@@ -0,0 +1,91 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import Sortable from 'sortablejs';
+import { SlotBuilder } from '../ez-list/ez-list';
+export interface ListItem {
+  label: string;
+  id: string;
+  selected?: boolean;
+  sort?: string;
+}
+export declare class EzSortableList {
+  el: HTMLElement;
+  _sortableInstance: Sortable;
+  filterTerm: string;
+  /**
+   * Define o título da lista.
+   */
+  title: string;
+  /**
+   * Define se o cabeçalho deve ficar oculto.
+   */
+  hideHeader: boolean;
+  /**
+   * Define se o totalizador deve ser escondido.
+   */
+  hideTotalizer: boolean;
+  /** Grupo ao qual o ez-sortable-list pertence */
+  group: string;
+  /** Lista de itens para serem renderizados */
+  dataSource: Array<ListItem>;
+  /** ID do sortable list */
+  idSortableList: string;
+  /**
+   * Nome da entidade listada.
+   * Exemplo: "Campo", "Item", "Empresa".
+   */
+  entityLabel: string;
+  /**
+   * Variação plural do nome da entidade listada.
+   * Exemplo: "Campos", "Itens", "Empresas".
+   */
+  entityLabelPlural: string;
+  /** Mensagem exibida quando a lista está vazia */
+  emptyMessage: string;
+  /** Quando verdadeiro, ativa o feedback visual ao efetuar hover nos itens da lista */
+  hoverFeedback: boolean;
+  /** Habilita seleção de múltiplos itens utilizando as teclas 'Ctrl/Command' ou 'Shift' */
+  enableMultipleSelection: boolean;
+  /** Remove itens arrastados de uma lista para outra */
+  removeItensMoved: 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.
+   */
+  itemRightSlotBuilder: SlotBuilder;
+  /**
+   * Função builder que possibilita gerar conteúdo dinâmico à esquerda do item da lista.
+   * * Observação: No react ele se transforma em VNode e não como HTMLElement.
+   */
+  itemLeftSlotBuilder: SlotBuilder;
+  /** Evento emitido quando a ordem dos itens muda */
+  itemsReordered: EventEmitter<any>;
+  /** Emitido sempre que um ou vários itens da lista forem selecionados */
+  ezSelectItens: EventEmitter<ListItem[] | ListItem>;
+  /** Emitido quando ocorre um duplo clique em um item da lista */
+  ezDoubleClick?: EventEmitter<ListItem>;
+  /** Emitido quando ocorre a escolha de um item da lista */
+  ezChoose?: EventEmitter<ListItem[] | ListItem>;
+  /** Remove a seleção de todos os itens da lista */
+  clearSelection(): Promise<void>;
+  selectedItems: Set<string>;
+  componentDidLoad(): void;
+  componentDidRender(): void;
+  private initSortable;
+  private selectPredefinedItens;
+  private handleSortItem;
+  private removeDuplicateElements;
+  private handleSelect;
+  private handleDeselect;
+  private updateSelection;
+  private emitSelectedItems;
+  private handleReorderEvent;
+  private handleDoubleClick;
+  getContainerItemBuilder(slotPosition: 'left' | 'right', item: ListItem, className?: string): HTMLElement;
+  disconnectedCallback(): void;
+  private buildTotalizer;
+  private renderItems;
+  private handleFilterChanged;
+  private renderTotalizer;
+  private renderHeader;
+  render(): any;
+}

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

@@ -7,7 +7,7 @@ export declare class EzSplitButton {
   private dropdownParent;
   private rightDefaultTitle;
   private offsetParentRect;
-  private show;
+  show: boolean;
   /**
    * Se false o usuário não pode interagir com o botão.
    */
@@ -44,6 +44,11 @@ export declare class EzSplitButton {
    * Define o tamanho do ez-split-button.
    */
   size: 'small' | 'medium' | 'large';
+  /**
+   * 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.
+   */
+  itemBuilder: (item: IDropdownItem, level: number) => HTMLElement | string;
   /**
    * Emitido quando o botão principal é clicado
    */
@@ -68,10 +73,17 @@ export declare class EzSplitButton {
    * Aplica o foco no botão do dropdown.
    */
   setRightButtonFocus(): Promise<void>;
+  /**
+   * Abre ou Fecha o dropdown do Split Button.
+   */
+  toggleDropdown(): Promise<void>;
+  /**
+   * Informa se a lista de ações está aberta.
+   */
+  isOpenedDropdown(): Promise<boolean>;
   clickListener(evt: MouseEvent): void;
   private getIconSize;
   private closeDropdown;
-  private toggleDropdown;
   private handleButtonClick;
   private handleDropdownItemClick;
   private handleDropdownSubActionClick;

package/dist/types/components/ez-text-area/ez-text-area.d.ts

@@ -53,11 +53,17 @@ export declare class EzTextArea {
   * Se true o campo de texto receberá o foco ao ser renderizado.
   */
   autoFocus: boolean;
+  /**
+   * Texto alternativo a ser apresentado como título do campo.
+   */
+  alternativePlaceholder: string;
+  forceLabelFloat: boolean;
   observeErrorMessage(): void;
   observeValue(newValue: string, oldValue: string): void;
   observeMode(): void;
   observeRows(): void;
   observeAutoRows(): void;
+  observeAlternativePlaceholder(newValue: any): void;
   /**
    * Adiciona o argumento text no value do text area, seguindo as regras:
    * - Se o cursor do mouse está posicionado em algum local do texto, o argumento será adicionado nesse local.
@@ -90,6 +96,8 @@ export declare class EzTextArea {
   handleFocus(): void;
   connectedCallback(): void;
   disconnectedCallback(): void;
+  private buildPlaceholder;
+  private buildLabelClass;
   componentDidLoad(): void;
   render(): any;
 }

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

@@ -9,9 +9,8 @@ export declare class EzTextInput {
   private _maskFormatter;
   private _contentLeftSlot;
   private _tooltipIconElem;
-  private _tooltipElem;
-  private _tooltipPositioningObserver;
-  private _observerDebounceTimeout;
+  private _isOverflowing;
+  private onClickOutside;
   private _hostElement;
   /**
    * Emitido quando acontece a alteração de valor do campo.
@@ -21,6 +20,10 @@ export declare class EzTextInput {
    * Texto a ser apresentado como título do campo.
    */
   label: string;
+  /**
+   * Texto alternativo a ser apresentado como título do campo.
+   */
+  alternativePlaceholder: string;
   /**
    * Define o valor do campo.
    */
@@ -33,6 +36,10 @@ export declare class EzTextInput {
    * Define uma mensagem de orientação ao usuário, colocando o campo em modo inválido.
    */
   errorMessage: string;
+  /**
+  * Define se o campo está em estado inválido (bordas vermelhas).
+  */
+  hasInvalid: boolean;
   /**
    * Aplica uma máscara no conteúdo conforme o padrão estabelecido
    */
@@ -69,9 +76,14 @@ export declare class EzTextInput {
    * Reflete se o slot direito possui conteúdo.
    */
   hasRightSlotContent: boolean;
-  observeErrorMessage(): void;
+  forceLabelFloat: boolean;
+  observeHasInvalid(newValue: boolean | string, oldValue: boolean | string): void;
   observeMask(): void;
   observeValue(newValue: string, oldValue: string): void;
+  observeAlternativePlaceholder(newValue: any): void;
+  private validateErrors;
+  private handleValidateErrorMessage;
+  private updateClassError;
   private adjustFloatingLabel;
   private isFocused;
   private isSlaveMode;
@@ -96,13 +108,13 @@ export declare class EzTextInput {
   handleChange(): void;
   handleSlotChange(ev: Event): void;
   doFocus(): void;
-  private renderGlobalTooltip;
-  private removeGlobalTooltip;
-  private createTooltipPositioningObserver;
+  private getValue;
+  private buildLabelClass;
+  private buildPlaceholder;
+  private checkIsOverflowing;
   componentWillLoad(): void;
   componentDidLoad(): void;
-  componentDidRender(): void;
-  componentDidUpdate(): void;
   disconnectedCallback(): void;
+  componentDidRender(): void;
   render(): any;
 }

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

@@ -38,6 +38,10 @@ export declare class EzTimeInput {
    * Se true o campo de texto receberá o foco ao ser renderizado.
    */
   autoFocus: boolean;
+  /**
+   * Texto alternativo ser apresentado como título do campo.
+   */
+  alternativePlaceholder: string;
   /**
    * Emitido quando acontece a alteração de valor do campo.
    */

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

@@ -1,21 +1,57 @@
+import { Placement } from "@floating-ui/dom";
 export declare class EzTooltip {
+  private _tooltipElement;
+  private _arrowElement;
+  private _opened;
+  private _debouncingTimeout;
   _element: HTMLElement;
   /**
-   * Mensagem de erro que será apresentada no tooltip.
+   * Mensagem que será apresentada no tooltip.
    */
-  errorMessage: string;
+  message: string;
   /**
    * Elemento HTML que será utilizado como ancoragem do tooltip.
    */
   anchoringElement: HTMLElement;
   /**
-   * TODO: Implementar a possibilidade de definir a posição do tooltip.
+   * Define a posição do tooltip em relação ao elemento de ancoragem.
    */
+  placement: Placement;
   /**
-   * Reposiciona o tooltip de acordo com a posição do elemento de ancoragem.
+   * Define o espaçamento entre o tooltip e o elemento de ancoragem.
    */
-  positionTooltip(): Promise<void>;
+  gapOptions: {
+    horizontalGap: number;
+    verticalGap: number;
+  };
+  /**
+   * Define o tipo de tooltip a ser exibido.
+   */
+  type: 'default' | 'success' | 'error' | 'warning';
+  /**
+   * Tempo de espera para exibir o tooltip após o evento de mouseenter.
+   */
+  debouncingTime: number;
+  /**
+   * Define se o tooltip está ativo.
+   */
+  active: boolean;
+  /**
+   * Define a largura máxima do elemento.
+   */
+  maxWidth: number;
+  /**
+   * Define se o elemento manterá o mesmo tamanho do componente de ancora.
+   */
+  useAnchorSize: boolean;
+  watchAnchoringElement(newValue: HTMLElement, oldValue: HTMLElement): void;
+  watchMessage(newValue: string): void;
+  private openTooltip;
+  private closeTooltip;
+  private updatePosition;
+  private handleSlotChange;
   private setEvents;
+  private removeEvents;
   componentDidLoad(): void;
   render(): any;
 }