Class Field

src/Components/Field.js:43–181

}

export class Field extends BaseInputComponent{
    constructor(args){
        super({ type: 'field' });

        let selectors = {
            input: '[id^="checkout_"]',
            errorMessage: '.field__message--error',
            wrapper: '.field__input-wrapper',
        };

        let classes = {
            wrapper: ['field__input-wrapper'],
            field: ['field', 'field--show-floating-label'],
            fieldInput: ['field__input'],
            label: ['field__label', 'field__label--visible'],
            fieldError: ['field--error'],
            fieldErrorMessage: ['field__message', 'field__message--error'],
            half: ['field--half'],
        };

        if(typeof args == 'string'){       
            let input = document.querySelector(`#${args}`);
            let element = new FieldRetriever().retrieve(input);
            Object.setPrototypeOf(element, Field.prototype);

            let field = Object.assign(element, {
                componentType: this.componentType,
                fieldName: element.name,
                fieldId: element.id,
                selectors,
                classes,
            });

            return field;
        }else if (typeof args == 'object'){
            const { name, label = name, isHalf } = args;

            let fieldId = `checkout_attributes_${name}`;
            let fieldName = `checkout[attributes][${name}]`;

            let element = this;
            element.classList.add(...classes.field);
            if(isHalf) element.classList.add(classes.half);

            let wrapperElement = document.createElement('div');
            wrapperElement.classList.add(classes.wrapper);

            let labelElement = document.createElement('label');
            labelElement.classList.add(...classes.label);
            labelElement.innerText = label;
            labelElement.htmlFor = fieldId;

            wrapperElement.appendChild(labelElement);
            element.appendChild(wrapperElement);

            Object.setPrototypeOf(element, Field.prototype);
            let field = Object.assign(element, {
                fieldName: fieldName,