@sankhyalabs/ezui 6.2.0-dev.3 → 6.2.0-dev.5

package/dist/ezui/p-e78e87f5.entry.js

@@ -0,0 +1 @@
+import{r as i,c as t,h as s,H as e,g as o}from"./p-23a36bb6.js";import{ElementIDUtils as r}from"@sankhyalabs/core";class a{constructor(i){this.mask=i,this.maskChars={"#":i=>/\d/.test(i),U:i=>/[a-zA-Z]/.test(i),L:i=>/[a-zA-Z]/.test(i),A:i=>/[a-zA-Z0-9]/.test(i),"?":i=>/[a-zA-Z]/.test(i),"*":()=>!0}}format(i){if(!i||!this.mask)return i;const t=this.removeIncompatibleChars(i);let s="",e=0,o=0;for(;o<this.mask.length&&e<t.length;){const i=this.mask[o],r=t[e];if("'"!==i){if(this.maskChars[i]){if(!this.maskChars[i](r)){e++;continue}s+="U"===i?r.toUpperCase():"L"===i?r.toLowerCase():r,e++}else s+=i,r===i&&e++;o++}else o++,o<this.mask.length&&(s+=this.mask[o],o++)}return s}removeIncompatibleChars(i){let t="";for(let s=0;s<i.length;s++){const e=i[s];let o=!1;for(const i in this.maskChars)if(this.maskChars[i](e)){o=!0;break}if(!o)for(let i=0;i<this.mask.length;i++)if(this.mask[i]===e&&!this.maskChars[this.mask[i]]){o=!0;break}o&&(t+=e)}return t}removeMask(i){if(!i||!this.mask)return i;let t="",s=0,e=0;for(;s<i.length&&e<this.mask.length;){const o=this.mask[e],r=i[s];"'"!==o?(this.maskChars[o]?(this.maskChars[o](r)&&(t+=r),s++):r===o&&s++,e++):(e++,e<this.mask.length&&(r===this.mask[e]&&s++,e++))}for(;s<i.length;){const e=i[s];/[a-zA-Z0-9]/.test(e)&&(t+=e),s++}return t}getMask(){return this.mask}generatePlaceholder(){if(!this.mask)return"";let i="",t=0;for(;t<this.mask.length;){const s=this.mask[t];if("'"!==s){if(this.maskChars[s])switch(s){case"#":case"~":i+="0";break;case"U":case"L":case"?":case"A":i+="A";break;default:i+="_"}else i+=s;t++}else t++,t<this.mask.length&&(i+=this.mask[t],t++)}return i}}const c=class{constructor(s){i(this,s),this.ezChange=t(this,"ezChange",7),this.ezBlur=t(this,"ezBlur",7),this.iconClick=t(this,"iconClick",7),this.type="text",this.value=void 0,this.label=void 0,this.helpText=void 0,this.placeholder=void 0,this.enabled=!0,this.readonly=!1,this.name=void 0,this.minlength=void 0,this.maxlength=void 0,this.leftIconName=void 0,this.rightIconName=void 0,this.rightIconTooltip=void 0,this.leftIconTooltip=void 0,this.state="default",this.leftIconClickable=!1,this.rightIconClickable=!1,this.mask=void 0,this.emitMaskedValue=!1}async setFocus(i){(null==i?void 0:i.selectText)&&this._inputElem.select(),(null==i?void 0:i.preventScroll)||this._inputElem.scrollIntoView({behavior:"smooth",block:"center"}),this._inputElem.focus({preventScroll:!0})}async setBlur(){this._inputElem.blur()}onInput(i){try{const t=i.target;let s=t.value;if(this._maskFormatter){const i=this._maskFormatter.format(s),e=this._maskFormatter.removeMask(i);t.value=i,this.value=e,this.ezChange.emit(this.emitMaskedValue?i:e)}else this.value=s,this.ezChange.emit(s)}catch(i){console.error("Error processing input event:",i)}}onBlur(){this.ezBlur.emit(this.value)}handleIconClick(i,t){this.enabled&&("left"===t&&!this.leftIconClickable||"right"===t&&!this.rightIconClickable?this.setFocus({preventScroll:!0}):(i.stopPropagation(),this.iconClick.emit({icon:t})))}addInfoId(){this._element&&r.addIDInfo(this._element),this._inputElem&&r.addIDInfo(this._inputElem,"classic-input",{id:"embedded"})}componentWillLoad(){this.mask&&!this._maskFormatter&&(this._maskFormatter=new a(this.mask)),!this.placeholder&&this._maskFormatter&&(this.placeholder=this._maskFormatter.generatePlaceholder())}componentDidLoad(){if(this.value&&this._maskFormatter&&this._inputElem){const i=this._maskFormatter.format(this.value);this._inputElem.value=i}else this._inputElem.value=this.value||"";this.addInfoId()}render(){return s(e,null,s("label",{title:this.label,htmlFor:this.name},this.label),s("div",{class:"input-container","data-state":this.state,"data-disabled":(!this.enabled).toString(),onClick:()=>this.setFocus({preventScroll:!0})},this.leftIconName&&s("ez-icon",{iconName:this.leftIconName,title:this.leftIconTooltip,onClick:i=>this.handleIconClick(i,"left"),class:{"icon-clickable":this.leftIconClickable}}),s("input",{ref:i=>this._inputElem=i,id:this.name,type:this.type,title:this.value,placeholder:this.placeholder,disabled:!this.enabled,readonly:this.readonly,name:this.name,minlength:this.minlength,maxlength:this.maxlength,onInput:this.onInput.bind(this),onBlur:this.onBlur.bind(this)}),this.rightIconName&&s("ez-icon",{iconName:this.rightIconName,title:this.rightIconTooltip,onClick:i=>this.handleIconClick(i,"right"),class:{"icon-clickable":this.rightIconClickable}})),this.helpText&&s("span",{title:this.helpText},this.helpText))}get _element(){return o(this)}};c.style=':host{display:flex;flex-direction:column;align-items:flex-start;box-sizing:border-box;font-family:var(--font--pattern, Arial, sans-serif);font-size:var(--font-size--default, 14px);color:var(--color--ocean-green-1000, #00281D);border:none;padding:0;--ez-classic-input--label-color:var(--color--ocean-green-1000, #00281D);--ez-classic-input--border-color-default:var(--color--gray-200, #D2D2D3);--ez-classic-input--border-color-focus:var(--color--gray-300, #A4A5A7);--ez-classic-input--border-color-success:var(--color--green-600, #157A00);--ez-classic-input--border-color-error:var(--color--red-600, #BD0025);--ez-classic-input--border-color-warning:var(--color--yellow-600, #EFB103);--ez-classic-input--background-color:var(--color--gray-70, #FFFFFF);--ez-classic-input--background-color-disabled:var(--color--gray-90, #EAEAEA);--ez-classic-input--text-color:var(--color--ocean-green-1000, #00281D);--ez-classic-input--placeholder-color:#bdbdbd;--ez-classic-input--icon-color:var(--color--gray-400, #77777A);--ez-classic-input--helptext-color:var(--color--ocean-green-1000, #00281D);--ez-classic-input--height:56px}.input-container{display:flex;flex-direction:row;align-items:center;width:100%;border:none;border-radius:var(--border--radius-8, 8px);padding:var(--space--16, 16px);box-sizing:border-box;gap:var(--space--10, 10px);margin:var(--space--4, 4px) var(--space--2, 2px);transition:box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);height:var(--ez-classic-input--height);background-color:var(--ez-classic-input--background-color)}.input-container,.input-container[data-state="default"]{box-shadow:0 0 0 1px var(--ez-classic-input--border-color-default)}.input-container[data-state="success"]{box-shadow:0 0 0 var(--space--2, 2px) var(--ez-classic-input--border-color-success)}.input-container[data-state="error"]{box-shadow:0 0 0 var(--space--2, 2px) var(--ez-classic-input--border-color-error)}.input-container[data-state="warning"]{box-shadow:0 0 0 var(--space--2, 2px) var(--ez-classic-input--border-color-warning)}.input-container:focus-within{box-shadow:0 0 0 var(--space--2, 2px) var(--ez-classic-input--border-color-focus)}ez-icon{min-width:var(--space--24, 24px);color:var(--ez-classic-input--icon-color)}input{flex:1;border:none;outline:none;background:transparent;height:100%;width:100%;padding:0;font-family:var(--font--pattern, Arial, sans-serif);font-size:var(--font-size--default, 14px);color:var(--color--ocean-green-1000, #00281D);text-overflow:ellipsis;color:var(--ez-classic-input--text-color)}input::placeholder{color:var(--ez-classic-input--placeholder-color)}.input-container[data-disabled="true"]{cursor:not-allowed;background:var(--ez-classic-input--background-color-disabled);border-color:var(--ez-classic-input--border-color-default)}.input-container[data-disabled="true"]>*{cursor:not-allowed}@keyframes ez-helptext-fadein{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}span{font-size:var(--font-size--xsmall, 10px);line-height:var(--line-height--16, 16px);overflow:hidden;text-overflow:ellipsis;animation:ez-helptext-fadein 0.3s ease;color:var(--ez-classic-input--helptext-color)}label{display:block;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:var(--line-height--20, 20px);color:var(--ez-classic-input--label-color)}.icon-clickable{cursor:pointer}';export{c as ez_classic_input}

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

@@ -0,0 +1,78 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { OptionsSetFocus } from './interfaces/optionsSetFocus';
+export declare class EzClassicInput {
+  _element: HTMLElement;
+  private _inputElem?;
+  private _maskFormatter?;
+  /** Tipo do input (ex: text, password, email, etc) */
+  type: string;
+  /** Valor do input */
+  value?: string;
+  /** Texto do label exibido acima do input */
+  label?: string;
+  /** Texto de ajuda exibido abaixo do input */
+  helpText?: string;
+  /** Placeholder do input */
+  placeholder?: string;
+  /** Define se o input está habilitado */
+  enabled?: boolean;
+  /** Define se o input é somente leitura */
+  readonly?: boolean;
+  /** Nome do input */
+  name?: string;
+  /** Tamanho mínimo do valor */
+  minlength?: number;
+  /** Tamanho máximo do valor */
+  maxlength?: number;
+  /** Nome do ícone à esquerda */
+  leftIconName?: string;
+  /** Nome do ícone à direita */
+  rightIconName?: string;
+  /** Título do ícone à direita (tooltip) */
+  rightIconTooltip?: string;
+  /** Título do ícone à esquerda (tooltip) */
+  leftIconTooltip?: string;
+  /** Estado visual do input: default, error, success ou warning */
+  state?: "default" | "error" | "success" | "warning";
+  /** Define se o ícone da esquerda é clicável */
+  leftIconClickable?: boolean;
+  /** Define se o ícone da direita é clicável */
+  rightIconClickable?: boolean;
+  /** Aplica uma máscara no conteúdo conforme o padrão estabelecido.
+   * Para mais informações acesse:
+   * https://gilded-nasturtium-6b64dd.netlify.app/docs/utilities/api/classes/maskformatter/
+  */
+  mask?: string;
+  /** Define se o valor emitido pelo evento ezChange deve conter a máscara aplicada (padrão: false) */
+  emitMaskedValue?: boolean;
+  /**
+   * Evento disparado quando o valor do input muda.
+   */
+  ezChange: EventEmitter<string>;
+  /**
+   * Evento disparado quando o input perde o foco.
+   */
+  ezBlur: EventEmitter<string>;
+  /**
+   * Evento disparado quando um ícone é clicado.
+   * Payload: { icon: "left" | "right" }
+   */
+  iconClick: EventEmitter<{
+    icon: "left" | "right";
+  }>;
+  /**
+   * Aplica o foco no campo.
+   */
+  setFocus(option?: OptionsSetFocus): Promise<void>;
+  /**
+   * Remove o foco do campo.
+   */
+  setBlur(): Promise<void>;
+  private onInput;
+  private onBlur;
+  private handleIconClick;
+  private addInfoId;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
+  render(): any;
+}

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

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

package/dist/types/components/ez-classic-input/utils/maskFormatter.d.ts

@@ -0,0 +1,30 @@
+export declare class MaskFormatter {
+  private mask;
+  private maskChars;
+  constructor(mask: string);
+  /**
+   * Formata a string de acordo com a máscara
+   * @param value String a ser formatada
+   * @returns String formatada
+   */
+  format(value: string): string;
+  /**
+   * Remove caracteres que não são compatíveis com nenhuma posição da máscara
+   */
+  private removeIncompatibleChars;
+  /**
+   * Remove a máscara de uma string formatada
+   * @param formattedValue String formatada
+   * @returns String sem máscara
+   */
+  removeMask(formattedValue: string): string;
+  /**
+   * Retorna a máscara configurada
+   */
+  getMask(): string;
+  /**
+   * Gera um placeholder baseado na máscara
+   * @returns String com placeholder gerado
+   */
+  generatePlaceholder(): string;
+}

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

@@ -0,0 +1,61 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { OptionsSetFocus } from './interfaces/optionsSetFocus';
+export declare class EzClassicTextArea {
+  _element: HTMLElement;
+  private _textAreaElem?;
+  /** Nome da textarea */
+  name?: string;
+  /** Texto do rótulo exibido acima da área de texto */
+  label?: string;
+  /** Texto de placeholder exibido quando a área de texto está vazia */
+  placeholder?: string;
+  /** Valor atual da área de texto */
+  value?: string;
+  /** Texto de ajuda exibido abaixo da textarea */
+  helpText?: string;
+  /** Estado visual da textarea: default, error, success ou warning */
+  state?: "default" | "error" | "success" | "warning";
+  /** Define se a textarea está habilitada */
+  enabled?: boolean;
+  /** Se a área de texto é somente leitura */
+  readonly?: boolean;
+  /** Número máximo de caracteres permitidos */
+  maxlength?: number;
+  /** Comportamento de redimensionamento da área de texto */
+  resize?: 'none' | 'both' | 'horizontal' | 'vertical';
+  /** Nome do ícone à esquerda */
+  leftIconName?: string;
+  /** Nome do ícone à direita */
+  rightIconName?: string;
+  /** Título do ícone à direita (tooltip) */
+  rightIconTooltip?: string;
+  /** Título do ícone à esquerda (tooltip) */
+  leftIconTooltip?: string;
+  /** Define se o ícone da esquerda é clicável */
+  leftIconClickable?: boolean;
+  /** Define se o ícone da direita é clicável */
+  rightIconClickable?: boolean;
+  /** Define o número de linhas da área de texto */
+  rows?: number;
+  /** Evento emitido quando o valor da área de texto muda */
+  ezChange: EventEmitter<string>;
+  /** Evento emitido quando a área de texto perde foco */
+  ezBlur: EventEmitter<string>;
+  /**
+   * Evento disparado quando um ícone é clicado.
+   * Payload: { icon: "left" | "right" }
+   */
+  iconClick: EventEmitter<{
+    icon: "left" | "right";
+  }>;
+  /** Aplica o foco no campo. */
+  setFocus(option?: OptionsSetFocus): Promise<void>;
+  /** Remove o foco do campo. */
+  setBlur(): Promise<void>;
+  private onBlur;
+  private handleInput;
+  private handleIconClick;
+  private addInfoId;
+  componentDidLoad(): void;
+  render(): any;
+}

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

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

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;
+}