alexgodin/gist:1728d3143992c8d7e20c7a5c337e4282

## gistfile1.txt
<html>
  <body>
    <script src="https://unpkg.com/libphonenumber-js@1.9.11/bundle/libphonenumber-min.js" crossorigin></script>
     		<link rel="stylesheet" type="text/css" href="https://lemontreefoods.org/fonts.css">
    <style type='text/css'>
        body{
            background: #fff6E0;
        }
        #phone-input{
            font-size:30px;
            font-family:dia;
            width:100%;
            background-color: #fff6E0;
            border-style:none;
            border-width:0px;
            border-bottom-style:solid;
            border-bottom-width:5px;
            border-bottom-color:#764BC4;
          text-align:center;
        }
    </style>
    <script>

			let isFormattable = (p) =>{
        const digits = p.replace(/\D/g,'');
        return (p[0] == "1" && digits.length > 4) || (p[0] != "1" && digits.length > 3)
      }

      let parseAndReturn = (p) => {
        let parsedNumber = new libphonenumber.parsePhoneNumber(`phone:${p}`,'US')
        window.Retool.modelUpdate({
          is_valid: parsedNumber.isValid(),
          e164: parsedNumber.format('E.164')
        })
      }

      function formatInput(e) {
        let phone = e.target.value

        if(isFormattable(phone)){ //prevent weird deletion bug
          phone = new libphonenumber.AsYouType('US').input(phone)
          e.target.value = phone
        }

        parseAndReturn(phone)

      }

      window.Retool.subscribe(function(model) {
        if(!('e164' in model)){
          formattedDefaultPhone = new libphonenumber.parsePhoneNumber(`phone:${model.default_phone}`,'US').formatNational()
        document.getElementById("phone-input").value = formattedDefaultPhone || '';
          parseAndReturn(model.default_phone)
        }
      })
    </script>
    <input type="text" inputmode="tel" id="phone-input" placeholder="(555)-123-4566" onKeyUp="formatInput(event)" onBlur="formatInput(event)"></input>

  </body>
</html>
	<html>
	<body>
	<script src="https://unpkg.com/libphonenumber-js@1.9.11/bundle/libphonenumber-min.js" crossorigin></script>
	<link rel="stylesheet" type="text/css" href="https://lemontreefoods.org/fonts.css">
	<style type='text/css'>
	body{
	background: #fff6E0;
	}
	#phone-input{
	font-size:30px;
	font-family:dia;
	width:100%;
	background-color: #fff6E0;
	border-style:none;
	border-width:0px;
	border-bottom-style:solid;
	border-bottom-width:5px;
	border-bottom-color:#764BC4;
	text-align:center;
	}
	</style>
	<script>

	let isFormattable = (p) =>{
	const digits = p.replace(/\D/g,'');
	return (p[0] == "1" && digits.length > 4) \|\| (p[0] != "1" && digits.length > 3)
	}

	let parseAndReturn = (p) => {
	let parsedNumber = new libphonenumber.parsePhoneNumber(`phone:${p}`,'US')
	window.Retool.modelUpdate({
	is_valid: parsedNumber.isValid(),
	e164: parsedNumber.format('E.164')
	})
	}

	function formatInput(e) {
	let phone = e.target.value

	if(isFormattable(phone)){ //prevent weird deletion bug
	phone = new libphonenumber.AsYouType('US').input(phone)
	e.target.value = phone
	}

	parseAndReturn(phone)

	}

	window.Retool.subscribe(function(model) {
	if(!('e164' in model)){
	formattedDefaultPhone = new libphonenumber.parsePhoneNumber(`phone:${model.default_phone}`,'US').formatNational()
	document.getElementById("phone-input").value = formattedDefaultPhone \|\| '';
	parseAndReturn(model.default_phone)
	}
	})
	</script>
	<input type="text" inputmode="tel" id="phone-input" placeholder="(555)-123-4566" onKeyUp="formatInput(event)" onBlur="formatInput(event)"></input>

	</body>
	</html>