matcha-components 20.15.0 → 20.17.0

package/src/lib/matcha-input-phone/input-phone.argtypes.ts

@@ -1,83 +0,0 @@
-export const inputPhoneArgtypes = {
-    color: {
-        description: 'Theme color palette',
-        control: 'select',
-        defaultValue: 'accent',
-        table: {
-            defaultValue: { summary: 'accent' },
-        },
-        options: [ '', 'red', 'pink', 'purple', 'deep-purple', 'indigo', 'blue', 'light-blue', 'cyan', 'teal', 'green', 'light-green', 'lime', 'yellow', 'amber', 'orange', 'deep-orange', 'primary', 'accent', 'warn', 'brown', 'grey', 'blue-grey', 'primary', 'accent', 'warn'],
-    },
-    size: {
-        description: 'size of the button',
-        control: 'select',
-        defaultValue: 'medium',
-        table: {
-            defaultValue: { summary: 'medium' },
-        },
-        options: ['', 'tiny', 'small', 'medium', 'large', 'huge'],
-    },
-    sizeXs:{
-        description: 'size of the button in screen xs',
-        control: 'select',
-        defaultValue: 'tiny',
-        table: {
-            defaultValue: { summary: 'medium' },
-        },
-        options: ['', 'tiny', 'small', 'medium', 'large', 'huge'],
-    },
-    sizeSm:{
-        description: 'size of the button in screen sm',
-        control: 'select',
-        defaultValue: 'small',
-        table: {
-            defaultValue: { summary: 'medium' },
-        },
-        options: ['', 'tiny', 'small', 'medium', 'large', 'huge'],
-    },
-    sizeMd:{
-        description: 'size of the button in screen md',
-        control: 'select',
-        defaultValue: 'medium',
-        table: {
-            defaultValue: { summary: 'medium' },
-        },
-        options: ['', 'tiny', 'small', 'medium', 'large', 'huge'],
-    },
-    sizeLg:{
-        description: 'size of the button in screen lg',
-        control: 'select',
-        defaultValue: 'large',
-        table: {
-            defaultValue: { summary: 'medium' },
-        },
-        options: ['', 'tiny', 'small', 'medium', 'large', 'huge'],
-    },
-    sizeXl:{
-        description: 'size of the button in screen xl',
-        control: 'select',
-        defaultValue: 'huge',
-        table: {
-            defaultValue: { summary: 'medium' },
-        },
-        options: ['', 'tiny', 'small', 'medium', 'large', 'huge'],
-    },
-    label: {       
-        description: 'Texto exibido como rótulo do campo de telefone.',
-        control: 'text',
-        defaultValue: 'Telefone',
-        table: {
-        type: { summary: 'string' },
-        defaultValue: { summary: 'Telefone' },
-        },
-    },   
-    value: {  
-        description: 'Valor do campo de telefone.',
-        control: 'text',
-        defaultValue: '',
-        table: {
-        type: { summary: 'string' },
-        defaultValue: { summary: '' },
-        },
-    },
-};

package/src/lib/matcha-input-phone/input-phone.component.html

@@ -1,33 +0,0 @@
-
-<div class="flex-row position-relative px-16 gap-8" #inputSelector>
-    <div class="min-h-24 radius-8 cursor-pointer d-flex gap-8 flex-align-center fs-16" (click)="toggleDropdown()">
-        <div class="d-flex-row flex-align-center">
-            <img alt="" [src]="'https://flagcdn.com/16x12/'+ selectedCountry?.iso2?.toLowerCase() + '.png'"
-                height="16">
-        </div>
-        <span class="w-16 fs-16"
-            [ngClass]="isOpen ? 'i-matcha-action_arrow_up': 'i-matcha-action_arrow_down'"></span>
-
-    </div>
-    <input *ngIf="isInitialized" #phoneRef type="text" placeholder="{{ typeMask }}"
-        [(ngModel)]="inputValueModel"
-        pattern="[0-9]*" (keyup)="onInput($event)" [mask]="typeMask">
-
-    <ng-container *ngIf="isOpen">
-        <div class="position-absolute z-index-10">
-            <div class="grid-1 gap-16 radius-8 z-index-10 p-8 w-300 position-absolute background-surface elevation-z-1"
-                style="top: calc(100% + 10px); overflow: hidden; height: 300px; overflow-y: auto;">
-
-                <label *ngFor="let country of allCountries; let i = index"
-                    class="fs-16 lh-18 cursor-pointer d-flex-align-center p-8 ts-300-l"
-                    [ngClass]="labelHover === i+'bg' ? 'background-bg' : 'background-surface'"
-                    (mouseover)="labelHover = i+'bg'" (mouseout)="labelHover = i+'su'"
-                    (click)="selectCountry(country)">
-                    <img alt="" class="mr-8"
-                        [src]="'https://flagcdn.com/16x12/'+ country?.iso2?.toLowerCase() + '.png'" height="16">
-                    {{country.name}}
-                </label>
-            </div>
-        </div>
-    </ng-container>
-</div>

package/src/lib/matcha-input-phone/input-phone.component.spec.ts

@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { MatchaInputPhoneComponent } from './input-phone.component';
-
-describe('MatchaInputPhoneComponent', () => {
-  let component: MatchaInputPhoneComponent;
-  let fixture: ComponentFixture<MatchaInputPhoneComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [MatchaInputPhoneComponent]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(MatchaInputPhoneComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/src/lib/matcha-input-phone/input-phone.component.ts

@@ -1,267 +0,0 @@
-/**
- * Componente MatchaInputPhone
- * 
- * Componente Angular para entrada de telefone internacional com seleção de país, máscara dinâmica e exibição de bandeira.
- * 
- * Funcionalidades:
- * - Seleção de país com dropdown e bandeira.
- * - Máscara dinâmica de acordo com o país e DDD digitado.
- * - Suporte a diferentes formatos de telefone (fixo/celular) para o Brasil.
- * - Emissão de evento ao alterar o valor do telefone.
- * - Inicialização automática pelo valor informado ou pelo idioma do navegador.
- * 
- * Inputs:
- * - fallbackMask: string - Máscara padrão caso não seja encontrada uma específica.
- * - label: string - Rótulo do campo (padrão: 'Telefone').
- * - value: string - Valor inicial do telefone (com ou sem DDI).
- * 
- * Outputs:
- * - onChange: EventEmitter<string> - Emite o valor do telefone completo (com DDI) ao alterar.
- * 
- * ViewChild:
- * - inputSelector: ElementRef - Referência ao container do input (usado para fechar o dropdown).
- * - phoneRef: ElementRef - Referência ao input do telefone.
- * 
- * Métodos principais:
- * - ngOnInit: Inicializa o componente pelo valor ou idioma.
- * - ngOnChanges: Atualiza o valor ao receber novo input externo.
- * - initCountryPhone: Inicializa país e máscara pelo valor do telefone.
- * - selectMaskForDialCode: Seleciona a máscara conforme país e DDD.
- * - selectCountry: Troca o país selecionado e atualiza máscara.
- * - onInput: Atualiza máscara e emite evento ao digitar.
- * - toggleDropdown: Abre/fecha o dropdown de países.
- */
-import { 
-  Component, 
-  Renderer2, 
-  OnChanges, 
-  OnDestroy, 
-  OnInit, 
-  SimpleChanges, 
-  ViewChild, 
-  ElementRef, 
-  Input, 
-  Output, 
-  EventEmitter, 
-  ChangeDetectorRef,    
-} from '@angular/core';
-import { getCountryISO2 } from './all-countries';
-
-@Component({
-  selector: 'matcha-input-phone',
-  templateUrl: './input-phone.component.html',
-  standalone: false
-})
-export class MatchaInputPhoneComponent implements OnInit, OnDestroy, OnChanges {
-  @ViewChild('inputSelector') inputSelector!: ElementRef;
-  @ViewChild('phoneRef') phoneRef!: ElementRef;
-  @Input('fallbackMask') fallbackMask: string = '00 0000 0000'; 
-  @Input('value') value?: string; 
-  @Output() onChange: EventEmitter<string> = new EventEmitter<string>();
-
-  public typeMask: string = ''; 
-  public labelHover: string = 'su';
-  public allCountries: any[] = getCountryISO2();
-  public isOpen: boolean = false;
-  public selectedCountry: any;
-  public inputValueModel: string = '';
-  private clickListener: (() => void) | null = null;
-  public isInitialized: boolean = false;
-  constructor(private renderer: Renderer2, private cdr: ChangeDetectorRef) {
-     
-  }
-
-  ngOnInit() {
-    this.value ? this.initCountryPhone(this.value) : this.initCountrylanguageNavigator();
-    this.cdr.detectChanges();
-    this.isInitialized = true;
-  }
-
-  ngOnChanges(changes: SimpleChanges): void {
-    if (changes['value'] && !changes['value'].firstChange) {
-      
-      this.value = changes['value'].currentValue;
-      if (!this.value) {
-        this.inputValueModel = this.value ?? '';
-        return;
-      }
-      this.initCountryPhone(this.value);
-      this.cdr.detectChanges();
-    }
-  }
-
-  initCountryPhone(phone: string) {
-    
-    if (!phone.startsWith('+')) {
-      
-      this.setCountryAndInputValue('br', phone);
-      return;
-    }
-
-    
-    const phoneWithoutPlus = phone.replace('+', '');
-    const countryDialCode = this.selectedCountry?.dialCode;
-    
-    if (phoneWithoutPlus.startsWith(countryDialCode)) {
-      
-      this.setCountryAndInputValue(this.selectedCountry.iso2, phoneWithoutPlus.replace(countryDialCode, ''));
-      
-      this.inputValueModel = phoneWithoutPlus.replace(countryDialCode, '');
-      
-    } else {
-      
-      this.matchCountryAndSetInputValue(phoneWithoutPlus);
-    }
-  }
-
-  private setCountryAndInputValue(iso2: string, phone: string) {
-    
-    this.selectedCountry = this.allCountries.find((country) => country.iso2 === iso2);
-    
-    this.inputValueModel = phone.startsWith('0') ? phone.slice(1) : phone;
-    this.selectMaskForDialCode(this.selectedCountry.areaCodes ? this.selectedCountry.areaCodes[0] : '000', this.inputValueModel);
-  }
-
-  private matchCountryAndSetInputValue(phoneWithoutPlus: string) {
-    
-    const matchingCountry = this.getMatchingCountry(phoneWithoutPlus);
-
-    
-    if (matchingCountry.length === 1) {
-      
-      this.setCountryAndInputValue(matchingCountry[0].iso2, phoneWithoutPlus.replace(matchingCountry[0].dialCode, ''));
-    } else {
-      
-      this.matchAreaCodeAndSetInputValue(phoneWithoutPlus, matchingCountry);
-    }
-  }
-
-  private getMatchingCountry(phoneWithoutPlus: string) {
-    
-    return this.allCountries.filter((country) => {
-      const dialCode = country.dialCode;
-      return phoneWithoutPlus.startsWith(dialCode);
-    });
-  }
-
-  private matchAreaCodeAndSetInputValue(phoneWithoutPlus: string, matchingCountry: any[]) {
-    
-    const phoneWithoutDialCode = phoneWithoutPlus.replace(matchingCountry[0].dialCode, '');
-    
-    const filterAreaCode = phoneWithoutDialCode.substring(0, 3);
-
-    
-    const matchingAreaCode = matchingCountry.filter((country) => {
-      if (country.areaCodes) {
-        return country.areaCodes.includes(filterAreaCode);
-      }
-    });
-
-    
-    if (matchingAreaCode.length === 1) {
-      
-      this.setCountryAndInputValue(matchingAreaCode[0].iso2, phoneWithoutDialCode);
-    } else {
-      
-      const defaultCountry = matchingCountry.find((country) => country.priority === 0);
-      this.setCountryAndInputValue(defaultCountry.iso2, phoneWithoutDialCode);
-    }
-  }
-
-  selectMaskForDialCode(inputDigits: string, targetValuePhone?: string) {
-  const previousMask = this.typeMask;
-  const maskArray = this.selectedCountry?.mask;
-  const maskIndex = this.selectedCountry?.areaCodes
-    ? this.selectedCountry.areaCodes.findIndex((code: string) => inputDigits === code)
-    : -1;
-
-  if (this.selectedCountry?.iso2 === 'br' && (targetValuePhone && targetValuePhone.length > 2)) {
-    const eventInput = targetValuePhone.substring(2)
-    if (eventInput && eventInput[0] === '9') {
-      this.typeMask = "00 0 0000 0000";
-      this.cdr.detectChanges();
-      return;
-    }
-  }
-
-  if (Array.isArray(maskArray)) {
-    if (maskIndex !== -1 && maskArray[maskIndex]) {
-      this.typeMask = maskArray[maskIndex];
-    } else if (maskArray[0]) {
-      this.typeMask = maskArray[0];
-    } else {
-      this.typeMask = this.fallbackMask;
-    }
-  } else {
-    this.typeMask = this.fallbackMask;
-  }
-
-  
-  if (previousMask !== this.typeMask) this.inputValueModel = '';
-  this.cdr.detectChanges();
-}
-
-  initCountrylanguageNavigator() {
-    
-    let lang = navigator.language;
-    if (lang.includes('-')) {
-      const langParts = lang.split('-');
-      lang = langParts[1];
-    }
-
-    
-    this.selectedCountry = this.allCountries.find((country) => country.iso2 === lang.toLocaleLowerCase());
-
-    this.selectMaskForDialCode(this.selectedCountry.areaCodes ? this.selectedCountry.areaCodes[0] : '000');
-  }
-
-  public selectCountry(country: any): void {
-    this.selectedCountry = country;
-    this.selectMaskForDialCode(this.selectedCountry.areaCodes ? this.selectedCountry.areaCodes[0] : '000');
-    this.isOpen = false;
-    
-    this.onChange.emit('+' + this.selectedCountry.dialCode + this.inputValueModel);
-
-    this.removeClickListener();
-    this.cdr.detectChanges();
-  }
-
-  toggleDropdown(): void {
-    this.isOpen = !this.isOpen;
-    
-    this.clickListener = this.renderer.listen('window', 'click', (event: Event) => {
-      if (this.isOpen && !this.inputSelector.nativeElement.contains(event.target)) {
-        this.isOpen = false;
-        this.removeClickListener();
-      }
-    });
-    this.cdr.detectChanges();
-  }
-
-  private removeClickListener() {
-    
-    if (this.clickListener) {
-      this.clickListener();
-      this.clickListener = null;
-    }
-  }
-
-  onInput(event: any): void {
-    this.phoneRef.nativeElement.value = event.target.value.replace(/[^\d\s]/g, '');
-    let targetValuePhone = event.target.value.replace(/\D/g, '');
-    
-    this.onChange.emit('+' + this.selectedCountry.dialCode + this.inputValueModel);
-
-    const inputDigits = targetValuePhone.substring(0, 3);
-    if (inputDigits) {
-      this.selectMaskForDialCode(inputDigits, targetValuePhone);
-    }
-    this.cdr.detectChanges();
-  }
-
-  ngOnDestroy() {
-    
-    this.removeClickListener();
-  }
-
-}

package/src/lib/matcha-input-phone/input-phone.module.ts

@@ -1,22 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-
-import { MatchaInputPhoneComponent } from "./input-phone.component";
-
-// dependencies
-import { FormsModule } from '@angular/forms';
-import { NgxMaskModule } from './lib/ngx-mask.module';
-import { MatchaFormFieldModule } from '../matcha-form-field/matcha-form-field.module';
-@NgModule({
-  declarations: [MatchaInputPhoneComponent],
-    imports: [
-      CommonModule,
-      MatchaFormFieldModule,
-      FormsModule,
-      NgxMaskModule,
-          
-    ],
-    exports: [MatchaInputPhoneComponent],
-    providers: [NgxMaskModule],
-})
-export class MatchaInputPhoneModule { }

package/src/lib/matcha-input-phone/input-phone.stories.ts

@@ -1,85 +0,0 @@
-import { applicationConfig, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-import { provideAnimations } from '@angular/platform-browser/animations';
-import { MatchaInputPhoneModule } from './input-phone.module';
-import { inputPhoneArgtypes } from './input-phone.argtypes'
-import { MatchaFormFieldModule } from '../matcha-form-field/matcha-form-field.module';
-
-export default {
-    title: 'Components / Input / Input Phone',
-    decorators: [
-        applicationConfig({
-            providers: [provideAnimations()],
-        }),
-        moduleMetadata({
-            imports: [CommonModule, FormsModule, MatchaInputPhoneModule, MatchaFormFieldModule],
-        }),
-    ],    
-    tags: ['autodocs'],
-    args: {
-        color: 'accent',
-        size: 'medium',
-        label: 'Telefone',
-        value: '',
-    },
-    argTypes: inputPhoneArgtypes,
-    parameters: {
-        controls: { expanded: true },
-    },
-} as Meta;
-
-export const Default: StoryObj = {
-    render: (args) => ({
-        props: {   
-            inputValue: '',        
-            onChange (event: string) {                
-                return this['inputValue'] = event;
-            },
-        },
-        template: `
-            <matcha-form-field 
-             ${args['color'] ? `color="${args['color']}"` : ''}
-                ${args['size'] ? `size="${args['size']}"` : ''}
-                ${args['sizeXs'] ? `size-xs="${args['sizeXs']}"` : ''}
-                ${args['sizeSm'] ? `size-sm="${args['sizeSm']}"` : ''}
-                ${args['sizeMd'] ? `size-md="${args['sizeMd']}"` : ''}
-                ${args['sizeLg'] ? `size-lg="${args['sizeLg']}"` : ''}
-                ${args['sizeXl'] ? `size-xl="${args['sizeXl']}"` : ''}>
-                <matcha-label>${args['label']}</matcha-label>       
-                <matcha-input-phone 
-                    [value]="'${args['value']}'"
-                    (onChange)="onChange($event)">                                    
-                </matcha-input-phone>      
-
-                <matcha-error>error input</matcha-error>
-            </matcha-form-field>
-            <pre>input Value: {{ inputValue | json }}</pre>        
-        `,
-    }),
-    name: 'Input Phone Padrão',
-};
-
-export const WithInitialValue: StoryObj = {
-    render: (args) => ({
-        props: {   
-            inputValue: '+5521999998888',        
-            onChange (event: string) {                
-                return this['inputValue'] = event;
-            },
-        },
-        template: `
-            <matcha-form-field color="primary" size="small">
-                <matcha-label>Celular</matcha-label>       
-                <matcha-input-phone 
-                    [value]="+5521999998888"
-                    (onChange)="onChange($event)">                                    
-                </matcha-input-phone>      
-
-                <matcha-error>error input</matcha-error>
-            </matcha-form-field> 
-            <pre>input Value: {{ inputValue | json }}</pre>    
-        `,
-    }),
-    name: 'Com valor inicial',
-};

package/src/lib/matcha-input-phone/lib/custom-keyboard-event.ts

@@ -1,21 +0,0 @@
-declare let global: any;
-
-const commonjsGlobal =
-    typeof globalThis !== 'undefined'
-        ? globalThis
-        : typeof window !== 'undefined'
-          ? window
-          : typeof global !== 'undefined'
-            ? global
-            : typeof self !== 'undefined'
-              ? self
-              : {};
-
-(function () {
-    if (!commonjsGlobal.KeyboardEvent) {
-        // eslint-disable-next-line @typescript-eslint/no-empty-function
-        commonjsGlobal.KeyboardEvent = function (_eventType: any, _init: any) {};
-    }
-})();
-
-export type CustomKeyboardEvent = KeyboardEvent;