matcha-components 20.13.0 → 20.15.0

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

@@ -0,0 +1,83 @@
+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

@@ -0,0 +1,33 @@
+
+<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

@@ -0,0 +1,23 @@
+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

@@ -0,0 +1,267 @@
+/**
+ * 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

@@ -0,0 +1,22 @@
+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

@@ -0,0 +1,85 @@
+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

@@ -0,0 +1,21 @@
+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;