@sankhyalabs/core 7.1.0-dev.6 → 7.1.0-dev.8

package/src/utils/MaskFormatter.ts

@@ -14,6 +14,7 @@
  * | U         | Qualquer letra. Transforma letras minúsculas em maiúsculas.                                                 |
  * | L         | Qualquer letra. Transforma letras maiúsculas em minúsculas.                                                 |
  * | A         | Qualquer letra ou número.                                                                                   |
+ * | Z         | Qualquer letra ou número. Transforma letras minúsculas em maiúsculas.                                       |
  * | ?         | Qualquer letra. Preserva maiúsculas e minúsculas.                                                           |
  * | *         | Qualquer caractere.                                                                                         |
  * 
@@ -34,14 +35,14 @@
  * resultaria na string '123-____'.
  * 
  * ##Veja mais alguns exemplos:
- * |Padrão          |Máscara           |Entrada       |Saída             |
- * |----------------|------------------|--------------|------------------|
- * |Telefone        |(##) ####-####    |3432192515    |(34) 3219-2515    |
- * |CPF             |###.###.###-##    |12345678901   |123.456.789-01    |
- * |CNPJ            |##.###.###/####-##|12345678901234|12.345.678/9012-34|
- * |CEP             |##.###-###        |12345678      |12.345-678        |
- * |PLACA (veículo) |UUU-####          |abc1234       |ABC-1234          |
- * |Cor RGB         |'#AAAAAA          |00000F0       |#0000F0           |
+ * |Padrão          |Máscara           |Entrada       |Saída              |
+ * |----------------|------------------|--------------|-------------------|
+ * |Telefone        |(##) ####-####    |3432192515    |(34) 3219-2515     |
+ * |CPF             |###.###.###-##    |12345678901   |123.456.789-01     |
+ * |CNPJ            |ZZ.ZZZ.ZZZ/ZZZZ-##|1a3B5c7D9e1F31|1A.3B5.C7D9/E1F3-31|
+ * |CEP             |##.###-###        |12345678      |12.345-678         |
+ * |PLACA (veículo) |UUU-####          |abc1234       |ABC-1234           |
+ * |Cor RGB         |'#AAAAAA        |00000F0       |#0000F0            |
  *
  */
 export class MaskFormatter {
@@ -51,11 +52,12 @@ export class MaskFormatter {
     private static UPPERCASE_KEY: string = "U";
     private static LOWERCASE_KEY: string = "L";
     private static ALPHA_NUMERIC_KEY: string = "A";
+    private static ALPHA_NUMERIC_UPPERCASE_KEY: string = "Z";
     private static CHARACTER_KEY: string = "?";
     private static ANYTHING_KEY: string = "*";
 
     public static DEFAULT_MASKS: any = {
-        "cnpj": "##.###.###/####-##",
+        "cnpj": "ZZ.ZZZ.ZZZ/ZZZZ-##",
         "cpf": "###.###.###-##",
         "phone": "(##) ####-####",
         "phone_mobile": "(##) #####-####",
@@ -124,7 +126,7 @@ export class MaskFormatter {
         if (value === expectedFormattedValue) {
             return value;
         }
-        const maskPlaceholders = this.mask.match(/[UAL#?*']/g) || [];
+        const maskPlaceholders = this.mask.match(/[UAZL#?*']/g) || [];
         const placeholderCount = maskPlaceholders.length;
 
         const validValue = value.split('').filter((char, index) => {
@@ -140,6 +142,8 @@ export class MaskFormatter {
                     return /[a-zA-Z]/.test(char);
                 case MaskFormatter.ALPHA_NUMERIC_KEY:
                     return /[a-zA-Z0-9]/.test(char);
+                case MaskFormatter.ALPHA_NUMERIC_UPPERCASE_KEY:
+                    return /[A-Z0-9]/.test(char);
                 case MaskFormatter.CHARACTER_KEY:
                     return /[a-zA-Z]/.test(char);
                 case MaskFormatter.ANYTHING_KEY:
@@ -237,6 +241,9 @@ export class MaskFormatter {
                     case MaskFormatter.ALPHA_NUMERIC_KEY:
                         this._maskChars.push(new MaskFormatter.AlphaNumericCharacter(this, maskChar));
                         break;
+                    case MaskFormatter.ALPHA_NUMERIC_UPPERCASE_KEY:
+                        this._maskChars.push(new MaskFormatter.AlphaNumericUpperCaseCharacter(this, maskChar));
+                        break;
                     case MaskFormatter.CHARACTER_KEY:
                         this._maskChars.push(new MaskFormatter.CharCharacter(this, maskChar));
                         break;
@@ -361,6 +368,7 @@ export class MaskFormatter {
                     message = 'um número';
                     break;
                 case MaskFormatter.ALPHA_NUMERIC_KEY:
+                case MaskFormatter.ALPHA_NUMERIC_UPPERCASE_KEY:
                     message = 'uma letra ou um número';
                     break;
                 default:
@@ -478,6 +486,24 @@ export class MaskFormatter {
         }
     }
 
+        private static AlphaNumericUpperCaseCharacter = class extends MaskFormatter.MaskCharacter {
+
+        /**
+        * Valida se a string é uma letra do alfabeto (A-Z) ou um numero entre zero e nove.
+        * 
+        * @param aChar - String passada para validação.
+        * @returns - Verdadeiro se a string passada for uma letra do alfabeto ou um numeral (de 0 a 9).
+        */ 
+        public isValidCharacter(aChar: string): boolean {
+            //FIXME: talvez seja problema usar regex aqui... avaliar se existe forma mais barata.
+            return (/[a-zA-Z0-9]/.test(aChar)) && super.isValidCharacter(aChar);
+        }
+
+        public getChar(aChar: string): string {
+            return aChar.toLocaleUpperCase();
+        }
+    }
+
     private static CharCharacter = class extends MaskFormatter.MaskCharacter {
         /**
         * Valida se a string é uma letra do alfabeto (a-z).

package/src/utils/OverflowWatcher/index.ts

@@ -9,236 +9,295 @@ 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;
+  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 addNotOverFlowElement(elementId: string){
-        if(!this._notOverFlow.includes(elementId)){
-            this._notOverFlow.push(elementId);
-        }
-    }
-
-    public destroy(){
-        this._resizeObserver.disconnect();
-    }
+  public destroy(){
+    this._resizeObserver.disconnect();
+  }
 
-    public forceUpdate(){
-        if(this._lastContainerSize && this._lastContainerInstance){
-            this.updateOverFlowedItems(this._lastContainerInstance, this._lastContainerSize);
-        }
+  public forceUpdate(){
+    if(this._lastContainerSize && this._lastContainerInstance){
+      this.updateOverFlowedItems(this._lastContainerInstance, this._lastContainerSize);
     }
+  }
 
-    private handleResize(entries: ResizeObserverEntry[]){
-        if(!entries || entries.length === 0) return;
+  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;
+    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);
-        }
+    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 updateOverFlowedItems(container: HTMLElement, containerSize: number){
+    const children:Element[] = this.getProcessableElements(container);
+    this.registerNotOverflowProps(children);
+    this.proccessElements(containerSize, children);
+    this._lastContainerSize = containerSize;
+    this._lastContainerInstance = container;
+  }
+
+  private getProcessableElements(container: HTMLElement): Element[] {
+    const directChildren = Array.from(container.children);
+    const processableElements: Element[] = [];
+
+    for (const child of directChildren) {
+      if (child.classList.contains('taskbar-group')) {
+        processableElements.push(...Array.from(child.children));
+      } else {
+        processableElements.push(child);
+      }
     }
 
-    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));
-        });
-    }
+    return processableElements;
+  }
 
-    private canNotRegisterNotOverFlow(id: string) {
-        return !id || !this._notOverFlow.includes(id);
-    }
+  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 hasChangedSize(elementSize: number):boolean{
-        if(!this._lastContainerSize) return true;
-        const variation = elementSize - this._lastContainerSize;
+  private canNotRegisterNotOverFlow(id: string) {
+    return !id || !this._notOverFlow.includes(id);
+  }
 
-        if(variation < 0){
-            const absoluteVariation = Math.abs(variation);
-            return (absoluteVariation > this._deltaSize);
-        }
+  private hasChangedSize(elementSize: number):boolean{
+    if(!this._lastContainerSize) return true;
+    const variation = elementSize - this._lastContainerSize;
 
-        return variation > 0;
+    if(variation < 0){
+      const absoluteVariation = Math.abs(variation);
+      return (absoluteVariation > this._deltaSize);
     }
 
-    private proccessElements(elementSize:number, children:Element[]){
-        if(children.length === 0) return;
+    return variation > 0;
+  }
 
-        const childrenSize = this.calcChildrenSize(children);
-        let diff = Number((elementSize - childrenSize).toFixed(4));
+  private proccessElements(elementSize:number, children:Element[]){
+    if(children.length === 0) return;
 
-        if(diff > 0){
-            this.clearOverFlow();
-            return;
-        }
+    const childrenSize = this.calcChildrenSize(children);
+    let diff = Number((elementSize - childrenSize).toFixed(4));
 
-        this.proccessElementsOverFlow(children, elementSize);
+    if(diff > 0){
+      this.clearOverFlow();
+      return;
     }
 
-    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;
+    this.proccessElementsOverFlow(children, elementSize);
+  }
 
-        for (const element of allElements) {
-            sumElementsSize += this.calcElementSize(element);
-            if(this.exceedsAvaliableSize(sumElementsSize, elementsThatFit, avaliableSizeConsideringDelta)) break;
-            elementsThatFit.push(element);
-        }
+  private clearOverFlow(){
+    this._hiddenItemsProps = new Map();
+    this._onResize([]);
+  }
 
-        const overFlowedElements = allElements.filter(element => this.isElementOverFlowing(elementsThatFit, element));
+  private proccessElementsOverFlow(allElements:Element[], avaliableSize:number){
+    const elementsThatFit: Element[] = [];
+    const avaliableSizeConsideringDelta = (avaliableSize - this._deltaSize);
 
-        overFlowedElements.forEach(overFlowed => {
-            if(!this._hiddenItemsProps.has(overFlowed)){
-                this.registerElementSize(overFlowed);
-            }
-        });
+    let sumElementsSize = 0;
 
-        this._onResize(overFlowedElements);
+    for (const element of allElements) {
+      sumElementsSize += this.calcElementSize(element);
+      if(this.exceedsAvaliableSize(sumElementsSize, elementsThatFit, avaliableSizeConsideringDelta)) break;
+      elementsThatFit.push(element);
     }
 
-    private isElementOverFlowing(elementsThatFit: Element[], element: Element) {
-        return !elementsThatFit.includes(element) && this.canOverFlowElement(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;
+
+    // Agrupa os elementos por container pai
+    const elementsByContainer = this.groupElementsByContainer(children);
+
+    // Calcula o tamanho considerando os containers
+    for (const [container, elements] of elementsByContainer) {
+      if (container && container.classList.contains('taskbar-group')) {
+        // Se é um grupo da taskbar, adiciona o tamanho do container mais os elementos
+        sumChildren += this.calcContainerSize(container);
+        elements.forEach(el => sumChildren += this.calcElementSize(el));
+      } else {
+        // Se não é um grupo, adiciona apenas o tamanho dos elementos
+        elements.forEach(el => sumChildren += this.calcElementSize(el));
+      }
     }
 
-    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') ?? "";
-    }
+    return sumChildren;
+  }
 
-    private exceedsAvaliableSize(sumElementsSize: number, elements: Element[], avaliableSize: number): boolean {
-        if(!this._notOverFlow.length) return sumElementsSize > avaliableSize
+  private groupElementsByContainer(elements: Element[]): Map<Element | null, Element[]> {
+    const grouped = new Map<Element | null, Element[]>();
 
-        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;
+    for (const element of elements) {
+      const container = element.parentElement;
+      if (!grouped.has(container)) {
+        grouped.set(container, []);
+      }
+      grouped.get(container)!.push(element);
     }
 
-    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));
+    return grouped;
+  }
+
+  private calcContainerSize(container: Element): number {
+    const rect = container.getBoundingClientRect();
+    const elementSize = rect[this._propSize as keyof DOMRect] as number;
+    const marginSize = calcMarginSize(container, this._scrollDirection);
+
+    // Subtrai o tamanho dos filhos para não contar em duplicidade
+    let childrenSize = 0;
+    Array.from(container.children).forEach(child => {
+      const childRect = child.getBoundingClientRect();
+      childrenSize += childRect[this._propSize as keyof DOMRect] as number;
+    });
+
+    return Math.max(0, elementSize - childrenSize) + marginSize;
+  }
+
+  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;
     }
 
-    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;
-    }
+    size += (el.getBoundingClientRect() as any)[this._propSize];
+    size += calcMarginSize(el, this._scrollDirection);
+    return size;
+  }
 
-    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);
-    }
+  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[]
+  element:HTMLElement,
+  callback:OnOverflowCallBack,
+  overFlowDirection?:OverflowDirection,
+  deltaSize?:number,
+  debounce?: number,
+  notOverFlow?: string[]
 }
 
 interface SizeProps {
-    size: number,
-    margin: number,
+  size: number,
+  margin: number,
 }