import * as i0 from '@angular/core';
import { inject, ElementRef, input, Directive, forwardRef } from '@angular/core';
import { NgControl, NG_VALUE_ACCESSOR } from '@angular/forms';

const formatCreditCardNumber = (value) => {
    const cleaned = value.replace(/\D/g, '');
    const trimmed = cleaned.substring(0, 16);
    const groups = trimmed.match(/.{1,4}/g);
    return groups?.join(' ') ?? '';
};
class CreditCardNumberMaskDirective {
    ngControl = inject(NgControl, { self: true, optional: true });
    hostElement = inject(ElementRef);
    placeholder = input('0000 0000 0000 0000', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
    onInput(event) {
        const input = event.target;
        const selectionStart = input.selectionStart;
        const previousValue = input.value;
        const formattedValue = formatCreditCardNumber(input.value);
        if (this.ngControl) {
            this.ngControl.control?.setValue(formattedValue.replace(/\s/g, ''), { emitEvent: false });
            this.ngControl.control?.updateValueAndValidity();
        }
        this.hostElement.nativeElement.value = formattedValue;
        if (selectionStart !== null) {
            const newCursorPosition = selectionStart + (formattedValue.length - previousValue.length);
            input.setSelectionRange(newCursorPosition, newCursorPosition);
        }
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CreditCardNumberMaskDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.4", type: CreditCardNumberMaskDirective, isStandalone: true, selector: "[ngsCreditCardNumberMask]", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "input": "onInput($event)" }, properties: { "attr.type": "\"tel\"", "attr.autocomplete": "\"cc-number\"", "attr.inputmode": "\"numeric\"", "attr.placeholder": "placeholder()" } }, exportAs: ["ngsCreditCardNumberMask"], ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CreditCardNumberMaskDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[ngsCreditCardNumberMask]',
                    exportAs: 'ngsCreditCardNumberMask',
                    host: {
                        '(input)': 'onInput($event)',
                        '[attr.type]': '"tel"', // Use ‘tel’ to call up the numeric keypad
                        '[attr.autocomplete]': '"cc-number"',
                        '[attr.inputmode]': '"numeric"',
                        '[attr.placeholder]': 'placeholder()',
                    },
                }]
        }], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }] } });

const formatOnInput = (value) => {
    const cleaned = value.replace(/\D/g, '').substring(0, 4);
    let month = cleaned.substring(0, 2);
    const year = cleaned.substring(2, 4);
    if (month.length === 2) {
        const monthInt = parseInt(month, 10);
        if (monthInt > 12)
            month = '12';
        if (monthInt === 0)
            month = '01';
    }
    return cleaned.length > 2 ? `${month}/${year}` : month;
};
const formatOnBlur = (value) => {
    if (!value)
        return '';
    const parts = value.split('/');
    const month = parts[0] || '';
    let year = parts[1] || '';
    if (year && year.length === 1) {
        year = `0${year}`;
    }
    return year ? `${month}/${year}` : month;
};
class CreditCardExpiryDateMaskDirective {
    elementRef = inject(ElementRef);
    placeholder = input('MM/YY', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
    onChange = (_) => { };
    onTouched = () => { };
    writeValue(value) {
        const formattedValue = formatOnInput(value || '');
        this.elementRef.nativeElement.value = formattedValue;
    }
    registerOnChange(fn) {
        this.onChange = fn;
    }
    registerOnTouched(fn) {
        this.onTouched = fn;
    }
    onInput(event) {
        const target = event.target;
        if (!target)
            return;
        const selectionStart = target.selectionStart;
        const previousValue = target.value;
        const formattedValue = formatOnInput(target.value);
        this.onChange(formattedValue.replace(/\//g, ''));
        target.value = formattedValue;
        if (selectionStart !== null) {
            const newCursorPosition = selectionStart + (formattedValue.length - previousValue.length);
            target.setSelectionRange(newCursorPosition, newCursorPosition);
        }
    }
    onBlur(event) {
        this.onTouched();
        const target = event.target;
        if (!target)
            return;
        const formattedValue = formatOnBlur(target.value);
        const modelValue = formattedValue.replace(/\//g, '');
        this.onChange(modelValue);
        target.value = formattedValue;
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CreditCardExpiryDateMaskDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.4", type: CreditCardExpiryDateMaskDirective, isStandalone: true, selector: "[ngsCreditCardExpiryDateMask]", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "input": "onInput($event)", "blur": "onBlur($event)" }, properties: { "attr.placeholder": "placeholder()" } }, providers: [
            {
                provide: NG_VALUE_ACCESSOR,
                useExisting: forwardRef(() => CreditCardExpiryDateMaskDirective),
                multi: true,
            },
        ], exportAs: ["ngsCreditCardExpiryDateMask"], ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CreditCardExpiryDateMaskDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[ngsCreditCardExpiryDateMask]',
                    exportAs: 'ngsCreditCardExpiryDateMask',
                    providers: [
                        {
                            provide: NG_VALUE_ACCESSOR,
                            useExisting: forwardRef(() => CreditCardExpiryDateMaskDirective),
                            multi: true,
                        },
                    ],
                    host: {
                        '(input)': 'onInput($event)',
                        '(blur)': 'onBlur($event)',
                        '[attr.placeholder]': 'placeholder()',
                    }
                }]
        }], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }] } });

const formatCvv = (value) => {
    const cleaned = value.replace(/\D/g, '');
    return cleaned.substring(0, 4);
};
class CreditCardCvvMaskDirective {
    ngControl = inject(NgControl, { self: true, optional: true });
    hostElement = inject(ElementRef);
    placeholder = input('•••', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
    onInput(event) {
        const input = event.target;
        const formattedValue = formatCvv(input.value);
        if (this.ngControl) {
            this.ngControl.control?.setValue(formattedValue, { emitEvent: false });
            this.ngControl.control?.updateValueAndValidity();
        }
        this.hostElement.nativeElement.value = formattedValue;
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CreditCardCvvMaskDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.4", type: CreditCardCvvMaskDirective, isStandalone: true, selector: "[ngsCreditCardCvvMask]", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "input": "onInput($event)" }, properties: { "attr.type": "\"tel\"", "attr.inputmode": "\"numeric\"", "attr.autocomplete": "\"cc-csc\"", "attr.placeholder": "placeholder()" } }, exportAs: ["ngsCreditCardCvvMask"], ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CreditCardCvvMaskDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[ngsCreditCardCvvMask]',
                    exportAs: 'ngsCreditCardCvvMask',
                    host: {
                        '(input)': 'onInput($event)',
                        '[attr.type]': '"tel"', // Use ‘tel’ to call up the numeric keypad
                        '[attr.inputmode]': '"numeric"',
                        '[attr.autocomplete]': '"cc-csc"',
                        '[attr.placeholder]': 'placeholder()',
                    },
                }]
        }], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }] } });

/**
 * Generated bundle index. Do not edit.
 */

export { CreditCardCvvMaskDirective, CreditCardExpiryDateMaskDirective, CreditCardNumberMaskDirective };
//# sourceMappingURL=ngstarter-ui-components-input-mask.mjs.map
