fonteva-design-guide/force-app/main/default/lwc/pfmTableCustomInput/pfmTableCustomInput.js

## Dev, Build and Test

import { LightningElement, api, track } from 'lwc';
import { refireEvent, cloneDeep } from 'c/utils';
import { registerListener, unregisterAllListeners } from 'c/pubsub';

export default class PfmTableCustomInput extends LightningElement {
    @api inputAttributes;
    @api rowId;
    @api colId;
    @api
    get val() {
        return this.internalVal;
    }

    set val(value) {
        this._maxResetSet = false; // since value updated, we need to set a new value in the underlying pfmInput
        this.internalVal = { value: value };
    }
    @track _inputAttrs;
    @track internalVal;
    @track group;
    @track name;
    @track padding;
    _uniqueIdentifier;
    _maxResetSet;
    _minResetSet;

    connectedCallback() {
        registerListener('setTableInputAttributes', this.setOtherAttributes, this);
        registerListener('setTableInputValue', this.setTableInputValue, this);
        this._uniqueIdentifier = this.inputAttributes.uniqueIdentifier;
        this._inputAttrs = cloneDeep(this.inputAttributes);
        delete this._inputAttrs.uniqueIdentifier;
    }

    renderedCallback() {
        if (this.inputAttributes) {
            const useValAsMaxReset = this._inputAttrs.useValAsMaxReset;
            const input = this.template.querySelector('c-pfm-input');
            if (this.inputAttributes.optionsCallback) {
                this._inputAttrs.options = this.inputAttributes.optionsCallback(this.rowId, this.colId);
            }
            Object.keys(this._inputAttrs).forEach(key => (input[key] = this._inputAttrs[key]));
            if (useValAsMaxReset && !this._maxResetSet) {
                input.maxReset = input.maxReset > this.val.value ? input.maxReset : this.val.value;
                this._maxResetSet = true;
            }
            this.padding = this._inputAttrs.padding
                ? 'pfm-p-left_x-small pfm-p-right_' + this._inputAttrs.padding
                : 'pfm-p-horizontal_x-small';
        }
    }

    setTableInputValue(eventVal) {
        if (eventVal.rowId === this.rowId && eventVal.uniqueIdentifier === this._uniqueIdentifier) {
            const input = this.template.querySelector('c-pfm-input');
            input.updateValue(eventVal.value);
        }
    }
    setOtherAttributes(eventVal) {
        const input = this.template.querySelector('c-pfm-input');
        Object.keys(eventVal).forEach(key => {
            input[key] = eventVal[key];
            this._inputAttrs[key] = eventVal[key];
        });
    }

    onvaluechange(evt) {
        refireEvent(this, {
            rowId: this.rowId,
            colId: this.colId.replace(/-input$/, '')
        })(evt);
    }
}