@jcbautistam/custom-table
Version:
Librería de tabla reutilizable con acciones, filtros, exportación y más.
59 lines (54 loc) • 6.09 kB
JavaScript
/*
import { Directive, ElementRef, HostListener } from '@angular/core';
@Directive({
selector: '[PhoneNumber]'
})
export class PhoneNumberDirective {
constructor(private el: ElementRef) { }
@HostListener('input', ['$event']) onInput(event: Event) {
const input = event.target as HTMLInputElement;
const trimmedValue = input.value.replace(/\D/g, '').slice(0, 10); // Solo se permiten números y hasta 10 caracteres
const formattedValue = this.formatPhoneNumber(trimmedValue);
input.value = formattedValue;
}
private formatPhoneNumber(value: string): string {
const formattedValue = value.replace(/(\d{3})(\d{3})(\d{4})/, '($1) $2-$3');
return formattedValue;
}
}
*/
import { Directive, ElementRef, HostListener } from '@angular/core';
import * as i0 from "@angular/core";
export class PhoneNumberDirective {
constructor(el) {
this.el = el;
}
ngOnInit() {
this.formatInputValue();
}
onInput(event) {
this.formatInputValue();
}
formatInputValue() {
const input = this.el.nativeElement;
let value = input.value.replace(/\D/g, '').slice(0, 10); // Solo se permiten números y hasta 10 caracteres
const formattedValue = this.formatPhoneNumber(value);
input.value = formattedValue;
}
formatPhoneNumber(value) {
const formattedValue = value.replace(/(\d{3})(\d{3})(\d{4})/, '($1) $2-$3');
return formattedValue;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: PhoneNumberDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.2", type: PhoneNumberDirective, selector: "[PhoneNumber]", host: { listeners: { "input": "onInput($event)" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: PhoneNumberDirective, decorators: [{
type: Directive,
args: [{
selector: '[PhoneNumber]'
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { onInput: [{
type: HostListener,
args: ['input', ['$event']]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiUGhvbmVOdW1iZXIuZGlyZWN0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvY3VzdG9tLXRhYmxlL3NyYy9saWIvRGlyZWN0aXZlcy9QaG9uZU51bWJlci5kaXJlY3RpdmUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0dBdUJHO0FBRUgsT0FBTyxFQUFFLFNBQVMsRUFBRSxVQUFVLEVBQUUsWUFBWSxFQUFVLE1BQU0sZUFBZSxDQUFDOztBQUs1RSxNQUFNLE9BQU8sb0JBQW9CO0lBRS9CLFlBQW9CLEVBQWM7UUFBZCxPQUFFLEdBQUYsRUFBRSxDQUFZO0lBQUksQ0FBQztJQUV2QyxRQUFRO1FBQ04sSUFBSSxDQUFDLGdCQUFnQixFQUFFLENBQUM7SUFDMUIsQ0FBQztJQUVrQyxPQUFPLENBQUMsS0FBWTtRQUNyRCxJQUFJLENBQUMsZ0JBQWdCLEVBQUUsQ0FBQztJQUMxQixDQUFDO0lBRU8sZ0JBQWdCO1FBQ3RCLE1BQU0sS0FBSyxHQUFHLElBQUksQ0FBQyxFQUFFLENBQUMsYUFBaUMsQ0FBQztRQUN4RCxJQUFJLEtBQUssR0FBRyxLQUFLLENBQUMsS0FBSyxDQUFDLE9BQU8sQ0FBQyxLQUFLLEVBQUUsRUFBRSxDQUFDLENBQUMsS0FBSyxDQUFDLENBQUMsRUFBRSxFQUFFLENBQUMsQ0FBQyxDQUFDLGlEQUFpRDtRQUMxRyxNQUFNLGNBQWMsR0FBRyxJQUFJLENBQUMsaUJBQWlCLENBQUMsS0FBSyxDQUFDLENBQUM7UUFDckQsS0FBSyxDQUFDLEtBQUssR0FBRyxjQUFjLENBQUM7SUFDL0IsQ0FBQztJQUVPLGlCQUFpQixDQUFDLEtBQWE7UUFDckMsTUFBTSxjQUFjLEdBQUcsS0FBSyxDQUFDLE9BQU8sQ0FBQyx1QkFBdUIsRUFBRSxZQUFZLENBQUMsQ0FBQztRQUM1RSxPQUFPLGNBQWMsQ0FBQztJQUN4QixDQUFDOzhHQXRCVSxvQkFBb0I7a0dBQXBCLG9CQUFvQjs7MkZBQXBCLG9CQUFvQjtrQkFIaEMsU0FBUzttQkFBQztvQkFDVCxRQUFRLEVBQUUsZUFBZTtpQkFDMUI7aUdBU29DLE9BQU87c0JBQXpDLFlBQVk7dUJBQUMsT0FBTyxFQUFFLENBQUMsUUFBUSxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLyogXHJcblxyXG5pbXBvcnQgeyBEaXJlY3RpdmUsIEVsZW1lbnRSZWYsIEhvc3RMaXN0ZW5lciB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5cclxuQERpcmVjdGl2ZSh7XHJcbiAgc2VsZWN0b3I6ICdbUGhvbmVOdW1iZXJdJ1xyXG59KVxyXG5leHBvcnQgY2xhc3MgUGhvbmVOdW1iZXJEaXJlY3RpdmUge1xyXG5cclxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIGVsOiBFbGVtZW50UmVmKSB7IH1cclxuXHJcbiAgQEhvc3RMaXN0ZW5lcignaW5wdXQnLCBbJyRldmVudCddKSBvbklucHV0KGV2ZW50OiBFdmVudCkge1xyXG4gICAgY29uc3QgaW5wdXQgPSBldmVudC50YXJnZXQgYXMgSFRNTElucHV0RWxlbWVudDtcclxuICAgIGNvbnN0IHRyaW1tZWRWYWx1ZSA9IGlucHV0LnZhbHVlLnJlcGxhY2UoL1xcRC9nLCAnJykuc2xpY2UoMCwgMTApOyAvLyBTb2xvIHNlIHBlcm1pdGVuIG7Dum1lcm9zIHkgaGFzdGEgMTAgY2FyYWN0ZXJlc1xyXG4gICAgY29uc3QgZm9ybWF0dGVkVmFsdWUgPSB0aGlzLmZvcm1hdFBob25lTnVtYmVyKHRyaW1tZWRWYWx1ZSk7XHJcbiAgICBpbnB1dC52YWx1ZSA9IGZvcm1hdHRlZFZhbHVlO1xyXG4gIH1cclxuXHJcbiAgcHJpdmF0ZSBmb3JtYXRQaG9uZU51bWJlcih2YWx1ZTogc3RyaW5nKTogc3RyaW5nIHtcclxuICAgIGNvbnN0IGZvcm1hdHRlZFZhbHVlID0gdmFsdWUucmVwbGFjZSgvKFxcZHszfSkoXFxkezN9KShcXGR7NH0pLywgJygkMSkgJDItJDMnKTtcclxuICAgIHJldHVybiBmb3JtYXR0ZWRWYWx1ZTtcclxuICB9XHJcbn1cclxuICovXHJcblxyXG5pbXBvcnQgeyBEaXJlY3RpdmUsIEVsZW1lbnRSZWYsIEhvc3RMaXN0ZW5lciwgT25Jbml0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcblxyXG5ARGlyZWN0aXZlKHtcclxuICBzZWxlY3RvcjogJ1tQaG9uZU51bWJlcl0nXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBQaG9uZU51bWJlckRpcmVjdGl2ZSBpbXBsZW1lbnRzIE9uSW5pdCB7XHJcblxyXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgZWw6IEVsZW1lbnRSZWYpIHsgfVxyXG5cclxuICBuZ09uSW5pdCgpIHtcclxuICAgIHRoaXMuZm9ybWF0SW5wdXRWYWx1ZSgpO1xyXG4gIH1cclxuXHJcbiAgQEhvc3RMaXN0ZW5lcignaW5wdXQnLCBbJyRldmVudCddKSBvbklucHV0KGV2ZW50OiBFdmVudCkge1xyXG4gICAgdGhpcy5mb3JtYXRJbnB1dFZhbHVlKCk7XHJcbiAgfVxyXG5cclxuICBwcml2YXRlIGZvcm1hdElucHV0VmFsdWUoKSB7XHJcbiAgICBjb25zdCBpbnB1dCA9IHRoaXMuZWwubmF0aXZlRWxlbWVudCBhcyBIVE1MSW5wdXRFbGVtZW50O1xyXG4gICAgbGV0IHZhbHVlID0gaW5wdXQudmFsdWUucmVwbGFjZSgvXFxEL2csICcnKS5zbGljZSgwLCAxMCk7IC8vIFNvbG8gc2UgcGVybWl0ZW4gbsO6bWVyb3MgeSBoYXN0YSAxMCBjYXJhY3RlcmVzXHJcbiAgICBjb25zdCBmb3JtYXR0ZWRWYWx1ZSA9IHRoaXMuZm9ybWF0UGhvbmVOdW1iZXIodmFsdWUpO1xyXG4gICAgaW5wdXQudmFsdWUgPSBmb3JtYXR0ZWRWYWx1ZTtcclxuICB9XHJcblxyXG4gIHByaXZhdGUgZm9ybWF0UGhvbmVOdW1iZXIodmFsdWU6IHN0cmluZyk6IHN0cmluZyB7XHJcbiAgICBjb25zdCBmb3JtYXR0ZWRWYWx1ZSA9IHZhbHVlLnJlcGxhY2UoLyhcXGR7M30pKFxcZHszfSkoXFxkezR9KS8sICcoJDEpICQyLSQzJyk7XHJcbiAgICByZXR1cm4gZm9ybWF0dGVkVmFsdWU7XHJcbiAgfVxyXG59XHJcbiJdfQ==