ember-credit-cards/addon/components/input-credit-card-cvc.js

A credit card utility library and form elements.

import TextField from '@ember/component/text-field';
import { computed } from '@ember/object';
import hasTextSelected from 'ember-credit-cards/utils/has-text-selected';
import isDigitKeypress from 'ember-credit-cards/utils/is-digit-keypress';
import isWhitelistKeypress from 'ember-credit-cards/utils/is-whitelist-keypress';

export default TextField.extend({
  classNames: ['input-credit-card-cvc'],
  autocomplete: 'off',
  placeholder: '•••',
  label: 'Expiration',

  keyPress: function(e) {
    var digit = String.fromCharCode(e.which);

    if (!isDigitKeypress(e)) {
      return false;
    }

    if (hasTextSelected(this.element)) {
      return true;
    }

    var value = this.element.value + digit;

    return isWhitelistKeypress(e) || value.length <= 4;
  },


  value: computed('cvc', {
    get() {
      return this.get('cvc');
    },
    set(propertyName, newValue) {
      var number = newValue.replace(/\D/g, '').slice(0, 4);
      this.set('cvc', newValue);

      return number;
    }
  })
});