@sankhyalabs/core 5.20.0-dev.8 → 5.20.0-dev.81

package/src/utils/LockManager.ts

@@ -0,0 +1,207 @@
+import { StringUtils } from "./StringUtils.js";
+/**
+* Define os tipos de operação que o locker pode controlar
+*/
+export enum LockManagerOperation {
+    /**
+        Operação de lock utilizada para controlar cliques nos botoes da taskbar.
+    */
+    TASKBAR_CLICK = "taskbar_click",
+    /**
+        Operação de lock utilizada para controlar carregamento da aplicação.
+    */
+    APP_LOADING = "app_loading"
+}
+
+type Lock = {
+    promise?: Promise<unknown>,
+    resolve?: () => void,
+    done: boolean
+}
+
+export class LockManager {
+    private static _locks = new Map<string, Array<Lock>>();
+
+    /**
+    * Nome do atributo que será utilizado para controlar contexto de locks nos elementos da DOM.
+    */
+    public static ATTRIBUTE_NAME = "data-locker-manger-context-id";
+
+    private static buildContextID(): string {
+        return StringUtils.generateUUID();
+    }
+
+    private static buildLockerID(ctxId: string | HTMLElement, operation: LockManagerOperation): string | undefined {
+        if (ctxId == undefined) return undefined;
+
+        let resolvedID: any = ctxId;
+
+        if (resolvedID instanceof HTMLElement) {
+            resolvedID = (ctxId as HTMLElement).getAttribute(LockManager.ATTRIBUTE_NAME);
+            if (!resolvedID) return undefined;
+        }
+
+        return `${resolvedID}_${operation}`;
+    }
+
+    private static findExistingCtxId = (element: HTMLElement): string | null => {
+        let currentElement: HTMLElement | null = element;
+
+        while (currentElement) {
+            if (currentElement.hasAttribute(LockManager.ATTRIBUTE_NAME)) {
+                return currentElement.getAttribute(LockManager.ATTRIBUTE_NAME);
+            }
+
+            const childWithCtxId = Array.from(currentElement.children).find(child =>
+                (child instanceof HTMLElement) && child.hasAttribute(LockManager.ATTRIBUTE_NAME)
+            ) as HTMLElement | undefined;
+
+            if (childWithCtxId) {
+                return childWithCtxId.getAttribute(LockManager.ATTRIBUTE_NAME);
+            }
+
+            currentElement = currentElement.parentElement;
+        }
+
+        return null;
+    }
+
+    private static traverseAndAddAttr = (element: HTMLElement, ctxId: string): void => {
+        if (element.tagName.startsWith('EZ-') || element.tagName.startsWith('SNK-')) {
+            element.setAttribute(LockManager.ATTRIBUTE_NAME, ctxId);
+        }
+        Array.from(element.children).forEach((child) => {
+            if (child instanceof HTMLElement) {
+                LockManager.traverseAndAddAttr(child, ctxId);
+            }
+        });
+    };
+
+    /**
+     * Cria um contexto de locker, caso nao exista, para todos elementos pais iniciados com ez- ou snk-.
+     * 
+     * @param startElement - Elemento de de onde o lock deve começar.
+     * 
+     * @returns - O id do locker, que pode ser usado para iniciar ou aguardar um lock do contexto.
+     */
+    public static addLockManagerCtxId(startElement: HTMLElement): string {
+        try {
+            if (!startElement) {
+                console.error("Elemento inicial não fornecido.");
+                return "";
+            }
+
+            const ctxId = LockManager.findExistingCtxId(startElement) ?? LockManager.buildContextID();
+            let currentElement: HTMLElement | null = startElement;
+            LockManager.traverseAndAddAttr(currentElement, ctxId);
+            return ctxId;
+        } catch (err) {
+            console.warn(`Erro ao registrar locks para o elemento: ${startElement?.tagName}`, err);
+            return "";
+        }
+    }
+
+    /**
+     * Reseta todos os locks existentes para um determinado contexto e operação de forma assíncrona
+     * @param id - ID do contexto ou elemento HTML contendo contexto
+     * @param operation - Operação específica para resetar os locks
+     * @returns Promise que será resolvida quando todos os locks forem resetados
+     */
+    public static async resetLocks(id: string | HTMLElement, operation: LockManagerOperation): Promise<void> {
+        const lockerId = this.buildLockerID(id, operation);
+        if (!lockerId) return;
+
+        const currentLocks = this._locks.get(lockerId);
+
+        if (currentLocks?.length) {
+            await Promise.all(currentLocks.map(lock => {
+                lock.done = true;
+                lock.resolve?.();
+                return lock.promise;
+            }));
+
+            this._locks.delete(lockerId);
+        }
+    }
+
+
+    /**
+    * Inicia um locker baseado em um contexto e uma operação.
+    * 
+    * @param id - Pode ser um ID do contexto de locker, ou, o elemento contendo um contexto de locker.
+    * @param operation - Operação do contexto que o lock deve ser feito.
+    * 
+    * @returns - Uma função que fara a liberação do lock.
+    */
+    public static lock(id: string | HTMLElement, operation: LockManagerOperation): () => void {
+        const lockerId = LockManager.buildLockerID(id, operation);
+
+        if (!lockerId) return () => { };
+
+        const lock: Lock = { done: false };
+        const promise = new Promise<void>(resolve => lock.resolve = resolve);
+        lock.promise = promise;
+
+        const currentLocks = LockManager._locks.get(lockerId) ?? [];
+        currentLocks.push(lock);
+        LockManager._locks.set(lockerId, currentLocks);
+
+        return () => {
+            lock.done = true;
+            lock.resolve?.();
+        }
+    }
+
+    /**
+    * Aguarda todos os lockers de um contexto e operação serem resolvidos.
+    * 
+    * @param id - Pode ser um ID do contexto de locker, ou, o elemento contendo um contexto de locker.
+    * @param operation - Operação do contexto que devera aguardar.
+    * 
+    * @returns - Promise que será resolvida quando todos lockers forem finalizados.
+    */
+    public static async whenResolve(id: string | HTMLElement, operation: LockManagerOperation, debounce?: number, timeOut?: number): Promise<void> {
+        const lockerId = LockManager.buildLockerID(id, operation);
+
+        if (!lockerId) return;
+
+        if (debounce) await new Promise(resolve => setTimeout(resolve, debounce));
+
+        const startTime = Date.now();
+
+        while (LockManager._locks.get(lockerId)?.length) {
+
+            if (timeOut && Date.now() - startTime >= timeOut) {
+                await this.resetLocks(id, operation);
+                return;
+            }
+
+            const locks: Array<Lock> = LockManager._locks.get(lockerId) ?? [];
+            await Promise.all(locks.map(lock => lock.promise));
+
+            //Aguarda listeners da tela reagirem as mudancas de estado do dataunit
+            await new Promise(resolve => setTimeout(resolve, debounce || 200));
+
+            LockManager._locks.set(lockerId, locks.filter(lock => !lock.done));
+        }
+
+    }
+
+    public static async whenHasLock(id: string | HTMLElement, operation: LockManagerOperation, timeOut?: number): Promise<void> {
+        const lockerId = LockManager.buildLockerID(id, operation);
+
+        if (!lockerId) return;
+
+        const startTime = Date.now();
+
+        while (!LockManager._locks.get(lockerId)?.length) {
+
+            if (timeOut && Date.now() - startTime >= timeOut) {
+                await this.resetLocks(id, operation);
+                return;
+            }
+
+            await new Promise(resolve => setTimeout(resolve, 200));
+        }
+    }
+}

package/src/utils/MaskFormatter.ts

@@ -58,7 +58,8 @@ export class MaskFormatter {
         "cnpj": "##.###.###/####-##",
         "cpf": "###.###.###-##",
         "phone": "(##) ####-####",
-        "cep": "##.###-###"
+        "cep": "##.###-###",
+        "cor_rgb" : "'#AAAAAA"
     };
 
 
@@ -92,13 +93,103 @@ export class MaskFormatter {
         this.mask = mask;
     }
 
+    
+    /**
+    * Aplica a máscara quando o input é alterado
+    *
+    * @param value Valor a ser aplicado com a máscara.
+    * @return O valor processado de acordo com o padrão.
+    */
+    public applyMask(value: string) {
+        if (this.mask === MaskFormatter.DEFAULT_MASKS.cor_rgb) {
+            value = value.replace("#", "")
+
+            const expectedFormattedValue = this.format(value.replace(/\s/g, ""));
+
+            if (value === expectedFormattedValue) {
+                return value;
+            }
+
+            if (value.length >= 6) {
+                const formattedValue = this.format(value);
+                return formattedValue;
+            } else {
+                return value;
+            }
+        }
+
+        const expectedFormattedValue = this.format(value.replace(/\s/g, ""));
+
+        if (value === expectedFormattedValue) {
+            return value;
+        }
+        const maskPlaceholders = this.mask.match(/[UAL#?*']/g) || [];
+        const placeholderCount = maskPlaceholders.length;
+
+        const validValue = value.split('').filter((char, index) => {
+            const placeholder = maskPlaceholders[index];
+            if (!placeholder) return false;
+
+            switch (placeholder) {
+                case MaskFormatter.DIGIT_KEY:
+                    return /\d/.test(char);
+                case MaskFormatter.UPPERCASE_KEY:
+                    return /[a-zA-Z]/.test(char);
+                case MaskFormatter.LOWERCASE_KEY:
+                    return /[a-zA-Z]/.test(char);
+                case MaskFormatter.ALPHA_NUMERIC_KEY:
+                    return /[a-zA-Z0-9]/.test(char);
+                case MaskFormatter.CHARACTER_KEY:
+                    return /[a-zA-Z]/.test(char);
+                case MaskFormatter.ANYTHING_KEY:
+                    return true;
+                case MaskFormatter.LITERAL_KEY:
+                    const literalChar = this.mask.charAt(index);
+                    return char === literalChar;
+                default:
+                    return false;
+            }
+        });
+
+        if (validValue.length >= placeholderCount) {
+            const formattedValue = this.format(validValue.join(''));
+            return formattedValue;
+        } else {
+            const partialValue = validValue.join('');
+            return partialValue;
+        }
+    }
+
+    /**
+     * Remove a máscara formatando a string retornando sem máscara
+     *
+     * @param value Valor a ser formatado com máscara.
+     * @return O valor processado de acordo com o padrão.
+     */
+    public removeMask(value: string): string {
+        const maskString = this.mask.replace("#", "");
+        const maskElements = maskString.split("");
+
+        let valueMapped = value
+
+        maskElements.forEach(maskChar => {
+            valueMapped = valueMapped.replace(maskChar, "")
+        })
+
+        return valueMapped;
+    }
+
     /**
      * Formata a string passada baseada na máscara definda pelo atributo mask.
      *
      * @param value Valor a ser formatado.
+     * @param trimBefore Executa um trim para remover espaços em branco.
      * @return O valor processado de acordo com o padrão.
      */
-    public format(value: string): string {
+    public format(value: string, trimBefore: boolean = false): string {
+        if(trimBefore){
+            value = value.trim();
+        }
         let result: string = '';
         const index: Array<number> = [0];
 

package/src/utils/ObjectUtils.ts

@@ -84,4 +84,81 @@ export default class ObjectUtils{
     public static equals(obj1: any, obj2: any): any {
       return ObjectUtils.objectToString(obj1) === ObjectUtils.objectToString(obj2);
     }
+
+    /**
+     * Compara se o valor de dois items são equivalentes.
+     * Comparando tanto o valor do item em si, quanto sua propriedade "value"
+     *
+     * @param obj1 - Objeto a ser comparado.
+     * @param obj2 - Objeto a ser comparado.
+     * @param propToCompare - propriedade que deve ser comparada.
+     * @returns - Se o objeto 1 é equivalente ao objeto 2.
+     *
+     * * @example
+     * hasEquivalentProps('123', {value: '123', label: teste}, 'value') | Retorna: true
+     * @example
+     * hasEquivalentProps('xpto', {value: '123', label: teste}, 'propName') | Retorna: false
+     */
+    public static hasEquivalentProps(obj1: any, obj2: any, propToCompare:string = "value"): boolean{
+      return this.getComparableProp(obj1, propToCompare) == this.getComparableProp(obj2, propToCompare);
+    }
+
+    private static getComparableProp(value: any, propToCompare:string = "value"): boolean{
+      if (typeof value === 'object' && value !== null && propToCompare in value) {
+        return value[propToCompare];
+      }
+      return value;
+    }
+
+    /**
+    * Verifica se o objeto está vazio (sem atributos).
+    * 
+    * @param obj - Objeto a ser verificado.
+    * @returns - True caso o objeto esteja vazio.
+    */
+    public static isEmpty(obj: object): boolean{
+      return Object.keys(obj).length === 0 && obj.constructor === Object;
+    }
+
+  /**
+   * Verifica se o objeto está vazio (sem atributos) e retorna true caso seja undefined ou null.
+   *
+   * @param obj - Objeto a ser verificado.
+   * @returns - True caso o objeto esteja vazio.
+   */
+  public static isEmptySafetyCheck(obj: object): boolean{
+    if(obj === null || obj === undefined) return true;
+    return Object.keys(obj).length === 0 && obj.constructor === Object;
+  }
+
+    /**
+     * Verifica se o objeto NÃO está vazio (sem atributos).
+     * 
+     * @param obj - Objeto a ser verificado.
+     * @returns - True caso o objeto NÃO esteja vazio
+     */
+    public static isNotEmpty(obj: object): boolean{
+      return !this.isEmpty(obj);
+    }
+
+  /**
+   * Verifica se o objeto NÃO está vazio (sem atributos) e retorna false caso objeto seja null ou undefined.
+   *
+   * @param obj - Objeto a ser verificado.
+   * @returns - True caso o objeto NÃO esteja vazio
+   */
+  public static isNotEmptySafetyCheck(obj: object): boolean{
+    return !this.isEmptySafetyCheck(obj);
+  }
+
+    /**
+     * Busca a propriedade de um objeto baseado em seu caminho.
+     * 
+     * @param obj - Objeto a ser verificado.
+     * @param keyPath - Caminho da propriedade a ser buscada.
+     * @returns - O valor da propriedade caso ela exista.
+     */
+    public static getProp(obj: Record<string, any>, keyPath: string): Record<string, any> | undefined {
+      return keyPath.split('.').reduce((previous, current) => previous?.[current], obj);
+    }
 }

package/src/utils/OnboardingUtils.ts

@@ -32,7 +32,7 @@ export class OnboardingUtils {
     }
 
     private register(ctx: EnvironmentContext){
-        (window as any).userGuiding.identify(`${ctx.userID}-${ctx.userName}-${ctx.clientGaId}`, ctx);
+        (window as any).userGuiding.identify(`${encodeURIComponent(ctx.userID)}-${encodeURIComponent(ctx.userName)}-${encodeURIComponent(ctx.clientGaId)}`, ctx);
     }
 }
 

package/src/utils/OverflowWatcher/index.ts

@@ -0,0 +1,243 @@
+import { JSUtils } from "../JSUtils.js";
+import { OverflowDirection } from "./types/overflow-direction.js"
+import { OnOverflowCallBack } from "./types/overflow-callback.js"
+import { calcMarginSize } from '../ElementUtils.js';
+
+export * from "./types/overflow-direction.js";
+export * from "./types/overflow-callback.js";
+
+export const OVERFLOWED_CLASS_NAME = 'overflowed';
+
+export default class OverflowWatcher {
+    private _onResize:OnOverflowCallBack;
+    private _resizeObserver:ResizeObserver;
+    private _lastContainerSize:number|undefined = undefined;
+    private _lastContainerInstance: HTMLElement | undefined = undefined;
+    private _scrollDirection = OverflowDirection.HORIZONTAL;
+    private _propSize:string;
+    private _hiddenItemsProps:Map<Element, SizeProps> = new Map();
+    private _notOverFlowPros:Map<string, SizeProps> = new Map();
+    private _deltaSize:number;
+    private _notOverFlow: string[] = [];
+
+    readonly DATA_ELEMENT_ID = 'data-element-id';
+
+    /**
+     * Cria uma instancia do OverflowWatcher
+     *
+     * @param element - Elemento HTML que o overflow será observado.
+     * @param callback - Função que sera chamada quando ocorrer overflow no elemento.
+     * @param overFlowDirection - Indica direção que o overflow será monitorado.
+     * @param deltaSize - Variação de tamanho que será considerada como overflow.
+     * @param debounce - Tempo até execução do callback em milissegundos.
+     * @param notOverFlow - Lista de ids ou data-element-ids dos elementos que não devem sofrer overFlow.
+     */
+    constructor({
+                    element,
+                    callback,
+                    overFlowDirection = OverflowDirection.HORIZONTAL,
+                    debounce = 200,
+                    deltaSize = 0,
+                    notOverFlow = []
+    }: OverFlowWatcherParams){
+        this._onResize = callback;
+        this._scrollDirection = overFlowDirection;
+        this._propSize = (OverflowDirection.HORIZONTAL === overFlowDirection) ? "width" : "height";
+        this._resizeObserver = new ResizeObserver(JSUtils.debounce((entries: ResizeObserverEntry[]) => this.handleResize(entries), debounce));
+        this._resizeObserver.observe(element);
+        this._deltaSize = deltaSize;
+        this._notOverFlow = notOverFlow;
+    }
+
+    public addNotOverFlowElement(elementId: string){
+        if(!this._notOverFlow.includes(elementId)){
+            this._notOverFlow.push(elementId);
+        }
+    }
+
+    public destroy(){
+        this._resizeObserver.disconnect();
+    }
+
+    public forceUpdate(){
+        if(this._lastContainerSize && this._lastContainerInstance){
+            this.updateOverFlowedItems(this._lastContainerInstance, this._lastContainerSize);
+        }
+    }
+
+    private handleResize(entries: ResizeObserverEntry[]){
+        if(!entries || entries.length === 0) return;
+
+        const container = entries[0];
+        const containerSize:number = (container.contentRect as any)[this._propSize];
+        if(!containerSize) return;
+
+        if(this.hasChangedSize(containerSize)){
+           this.updateOverFlowedItems(container.target as HTMLElement, containerSize);
+        }
+    }
+
+    private updateOverFlowedItems(container: HTMLElement, containerSize: number){
+        const children:Element[] = Array.from(container.children);
+        this.registerNotOverflowProps(children);
+        this.proccessElements(containerSize, children);
+        this._lastContainerSize = containerSize;
+        this._lastContainerInstance = container;
+    }
+
+    private registerNotOverflowProps(children: Element[]) {
+        children.forEach(childElement => {
+            const id = childElement.id || this.getDataElementId(childElement);
+            if (this.canNotRegisterNotOverFlow(id)) return;
+            this._notOverFlowPros.set(id, this.getElementSizeProps(childElement));
+        });
+    }
+
+    private canNotRegisterNotOverFlow(id: string) {
+        return !id || !this._notOverFlow.includes(id) || this._notOverFlowPros.has(id);
+    }
+
+    private hasChangedSize(elementSize: number):boolean{
+        if(!this._lastContainerSize) return true;
+        const variation = elementSize - this._lastContainerSize;
+
+        if(variation < 0){
+            const absoluteVariation = Math.abs(variation);
+            return (absoluteVariation > this._deltaSize);
+        }
+
+        return variation > 0;
+    }
+
+    private proccessElements(elementSize:number, children:Element[]){
+        if(children.length === 0) return;
+
+        const childrenSize = this.calcChildrenSize(children);
+        let diff = Number((elementSize - childrenSize).toFixed(4));
+
+        if(diff > 0){
+            this.clearOverFlow();
+            return;
+        }
+
+        this.proccessElementsOverFlow(children, elementSize);
+    }
+
+    private clearOverFlow(){
+        this._hiddenItemsProps = new Map();
+        this._onResize([]);
+    }
+
+    private proccessElementsOverFlow(allElements:Element[], avaliableSize:number){
+        const elementsThatFit: Element[] = [];
+        const avaliableSizeConsideringDelta = (avaliableSize - this._deltaSize);
+
+        let sumElementsSize = 0;
+        for (const element of allElements) {
+            sumElementsSize += this.calcElementSize(element);
+            if(this.exceedsAvaliableSize(sumElementsSize, elementsThatFit, avaliableSizeConsideringDelta)) break;
+            elementsThatFit.push(element);
+        }
+
+        const overFlowedElements = allElements.filter(element => this.isElementOverFlowing(elementsThatFit, element));
+
+        overFlowedElements.forEach(overFlowed => {
+            if(!this._hiddenItemsProps.has(overFlowed)){
+                this.registerElementSize(overFlowed);
+            }
+        });
+
+        this._onResize(overFlowedElements);
+    }
+
+    private isElementOverFlowing(elementsThatFit: Element[], element: Element) {
+        return !elementsThatFit.includes(element) && this.canOverFlowElement(element);
+    }
+
+    private canOverFlowElement(element: Element) {
+        return !this._notOverFlow.includes(element.id)
+          && !this._notOverFlow.includes(this.getDataElementId(element));
+    }
+
+    private getDataElementId(element: Element): string {
+        return (element as HTMLElement).getAttribute('data-element-id') ?? "";
+    }
+
+    private exceedsAvaliableSize(sumElementsSize: number, elements: Element[], avaliableSize: number): boolean {
+        if(!this._notOverFlow.length) return sumElementsSize > avaliableSize
+
+        const elementIdsToCalculate = this.canNotOverFlowNotIncludedIds(elements);
+        if(!elementIdsToCalculate.length) return sumElementsSize > avaliableSize
+
+        const variation = this.calculateVariation(elementIdsToCalculate);
+        const occupiedSize = sumElementsSize + variation;
+        return occupiedSize > avaliableSize;
+    }
+
+    private calculateVariation(elementIdsToCalculate: string[]) {
+        let variation = 0
+        elementIdsToCalculate.forEach(id => {
+            const sizeProps = this._notOverFlowPros.get(id);
+            variation += sizeProps?.size ?? 0;
+            variation += sizeProps?.margin ?? 0;
+        });
+        return variation;
+    }
+
+    private canNotOverFlowNotIncludedIds(elements: Element[]): string[]{
+        const elementsIdList = elements.map(el =>  el.id || this.getDataElementId(el)).filter(id => !!id);
+        return this._notOverFlow.filter(id => !elementsIdList.includes(id));
+    }
+
+    private registerElementSize(element: Element) {
+        const sizeProps = this.getElementSizeProps(element);
+        this._hiddenItemsProps.set(element, sizeProps);
+    }
+
+    private getElementSizeProps(element: Element) {
+        const sizeProps: SizeProps = {
+            size: (element.getBoundingClientRect() as any)[this._propSize],
+            margin: calcMarginSize(element, this._scrollDirection),
+        };
+        return sizeProps;
+    }
+
+    private calcChildrenSize(children:Element[]):number{
+        let sumChildren = 0;
+        sumChildren += this._deltaSize;
+        Array.from(children).forEach(el => sumChildren += this.calcElementSize(el));
+        return sumChildren;
+    }
+
+    private calcElementSize(el: Element) {
+        let size = 0
+        if (this.isOverFlowed(el)) {
+            const sizeProps = this._hiddenItemsProps.get(el);
+            size += sizeProps?.size ?? 0;
+            size += sizeProps?.margin ?? 0;
+            return size;
+        }
+
+        size += (el.getBoundingClientRect() as any)[this._propSize];
+        size += calcMarginSize(el, this._scrollDirection);
+        return size;
+    }
+
+    private isOverFlowed(el: Element) {
+        return el.classList.contains(OVERFLOWED_CLASS_NAME);
+    }
+}
+
+export interface OverFlowWatcherParams {
+    element:HTMLElement,
+    callback:OnOverflowCallBack,
+    overFlowDirection?:OverflowDirection,
+    deltaSize?:number,
+    debounce?: number,
+    notOverFlow?: string[]
+}
+
+interface SizeProps {
+    size: number,
+    margin: number,
+}

package/src/utils/OverflowWatcher/types/overflow-callback.ts

@@ -0,0 +1,6 @@
+/**
+ * Callback que será chamado quando o overflow de um elemento for alterado.
+ * 
+ * @param elementsOverFlow - Conjunto de elementos filhos que estão causando overflow no elemento pai.
+ */
+export type OnOverflowCallBack = (elementsOverFlow:Array<Element>) => void;

package/src/utils/OverflowWatcher/types/overflow-direction.ts

@@ -0,0 +1,7 @@
+/**
+ * Define em qual direção o overflow será observado
+ */
+export enum OverflowDirection {
+    'VERTICAL',
+    'HORIZONTAL'
+}