timfish/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Dumber Gist</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
  <base href="/">
</head>
<!--
Dumber gist uses dumber bundler, the default bundle file
is /dist/entry-bundle.js.
The starting module is pointed to aurelia-bootstrapper
(data-main attribute on script) for Aurelia,
The aurelia bootstrapper then loads up user module "main"
(aurelia-app attribute on <body>) which is your src/main.ts.
-->
<body aurelia-app="main">
  <script src="/dist/entry-bundle.js" data-main="aurelia-bootstrapper"></script>
</body>
</html>

## package.json
{
  "dependencies": {
    "aurelia-bootstrapper": "^2.3.3"
  }
}

## src\app.html
<template>
    <require from="./ip-address"></require>
  <!-- Try to create a css/scss/sass/less file then require it here -->
  <h1>${message}</h1>
  <p>Enter the IP address:</p>
  <ip-address ip-address.bind="ipAddress"></ip-address>

  <br />
  <p>Here is the IP address:</p>
  <p>${ipAddress || 'undefined'}</p>


  <button click.delegate="set()">Set it to 1.2.3.4</button>
</template>

## src\app.ts
export class App {
  public message: string = 'Hello Aurelia!';
  public ipAddress: string = '';

  public set() {
    this.ipAddress = '1.2.3.4';
}

## src\ip-address.html
<template>
  <require from="./ip-address.scss"></require>

  <div class="cont ${hasFocus ?'focus':''}">
    <input
      type="text"
      class="form-control form-control-sm mono"
      focus.delegate="inputFocus()"
      click.delegate="inputFocus()"
      blur.trigger="lostFocus()"
      value.bind="ip1"
      keyup.delegate="changed($event)"
    />
    <span>.</span>
    <input
      type="text"
      class="form-control form-control-sm mono"
      focus.delegate="inputFocus()"
      click.delegate="inputFocus()"
      blur.trigger="lostFocus()"
      value.bind="ip2"
      keyup.delegate="changed($event)"
    />
    <span>.</span>
    <input
      type="text"
      class="form-control form-control-sm mono"
      focus.delegate="inputFocus()"
      click.delegate="inputFocus()"
      blur.trigger="lostFocus()"
      value.bind="ip3"
      keyup.delegate="changed($event)"
    />
    <span>.</span>
    <input
      type="text"
      class="form-control form-control-sm mono"
      focus.delegate="inputFocus()"
      click.delegate="inputFocus()"
      blur.trigger="lostFocus()"
      value.bind="ip4"
      keyup.delegate="changed($event)"
    />
  </div>
</template>

## src\ip-address.scss
ip-address {
  .cont {
    width: 160px;
    padding: 0.25rem;
    line-height: 1.25;
    color: 'gray';
    background-color: #fff;
    background-image: none;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 0.25rem;
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    display: flex;
    flex-direction: row;

    &.focus {
      border-color: #aabad2;
      outline: none;
      box-shadow: 0 0 0 0.2rem rgba(87, 119, 165, 0.25);
    }

    input {
      border: none;
      padding: 0;
      margin: 0 0.125rem;
      width: 30px;
      text-align: center;

      &:focus {
        border: none;
        box-shadow: none;
        outline: none;
      }
    }
  }
}

## src\ip-address.ts
import {
  autoinject,
  bindable,
  bindingMode,
  customElement,
  TaskQueue
} from 'aurelia-framework';

@autoinject
@customElement('ip-address')
export class IpAddress {
  @bindable({
    defaultBindingMode: bindingMode.twoWay
  })
  @bindable
  public ipAddress: string;

  public ip1: string;
  public ip2: string;
  public ip3: string;
  public ip4: string;

  public hasFocus: boolean;

  constructor(private taskQueue: TaskQueue) {}

  public inputFocus() {
    this.hasFocus = true;
  }

  public lostFocus() {
    this.hasFocus = false;
  }

  public changed(event: KeyboardEvent) {
    this.ip1 = this.sanitise(this.ip1);
    this.ip2 = this.sanitise(this.ip2);
    this.ip3 = this.sanitise(this.ip3);
    this.ip4 = this.sanitise(this.ip4);

    this.taskQueue.queueMicroTask(() => {
      this.ipAddress = `${this.ip1}.${this.ip2}.${this.ip3}.${this.ip4}`;

      const current = event.target as HTMLInputElement;

      if (
        event.keyCode === 190 ||
        event.keyCode === 110 ||
        current.value.length > 2
      ) {
        const inputs = Array.from(
          (event.target as Element).parentElement.querySelectorAll('input')
        );
        const index = inputs.indexOf(current);
        if (index >= 0 && index < inputs.length - 1) {
          inputs[index + 1].focus();
          inputs[index + 1].select();
          this.hasFocus = true;
        }
      }
    });
  }

  private sanitise(input: string): string {
    let int = parseInt((input || '').replace(/\D/g, ''));

    if (isNaN(int)) {
      int = 0;
    }

    return Math.max(0, Math.min(255, int)).toString();
  }

  public ipAddressChanged() {
    [this.ip1, this.ip2, this.ip3, this.ip4] = (
      this.ipAddress || '0.0.0.0'
    ).split('.');
  }
}

## src\main.ts
import {Aurelia} from 'aurelia-framework';

export function configure(aurelia: Aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging('info');
  aurelia.start().then(() => aurelia.setRoot());
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Dumber Gist</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
	<base href="/">
	</head>
	<!--
	Dumber gist uses dumber bundler, the default bundle file
	is /dist/entry-bundle.js.
	The starting module is pointed to aurelia-bootstrapper
	(data-main attribute on script) for Aurelia,
	The aurelia bootstrapper then loads up user module "main"
	(aurelia-app attribute on <body>) which is your src/main.ts.
	-->
	<body aurelia-app="main">
	<script src="/dist/entry-bundle.js" data-main="aurelia-bootstrapper"></script>
	</body>
	</html>
	<template>
	<require from="./ip-address"></require>
	<!-- Try to create a css/scss/sass/less file then require it here -->
	<h1>${message}</h1>
	<p>Enter the IP address:</p>
	<ip-address ip-address.bind="ipAddress"></ip-address>

	<br />
	<p>Here is the IP address:</p>
	<p>${ipAddress \|\| 'undefined'}</p>


	<button click.delegate="set()">Set it to 1.2.3.4</button>
	</template>
	export class App {
	public message: string = 'Hello Aurelia!';
	public ipAddress: string = '';

	public set() {
	this.ipAddress = '1.2.3.4';
	}
	<template>
	<require from="./ip-address.scss"></require>

	<div class="cont ${hasFocus ?'focus':''}">
	<input
	type="text"
	class="form-control form-control-sm mono"
	focus.delegate="inputFocus()"
	click.delegate="inputFocus()"
	blur.trigger="lostFocus()"
	value.bind="ip1"
	keyup.delegate="changed($event)"
	/>
	<span>.</span>
	<input
	type="text"
	class="form-control form-control-sm mono"
	focus.delegate="inputFocus()"
	click.delegate="inputFocus()"
	blur.trigger="lostFocus()"
	value.bind="ip2"
	keyup.delegate="changed($event)"
	/>
	<span>.</span>
	<input
	type="text"
	class="form-control form-control-sm mono"
	focus.delegate="inputFocus()"
	click.delegate="inputFocus()"
	blur.trigger="lostFocus()"
	value.bind="ip3"
	keyup.delegate="changed($event)"
	/>
	<span>.</span>
	<input
	type="text"
	class="form-control form-control-sm mono"
	focus.delegate="inputFocus()"
	click.delegate="inputFocus()"
	blur.trigger="lostFocus()"
	value.bind="ip4"
	keyup.delegate="changed($event)"
	/>
	</div>
	</template>
	ip-address {
	.cont {
	width: 160px;
	padding: 0.25rem;
	line-height: 1.25;
	color: 'gray';
	background-color: #fff;
	background-image: none;
	background-clip: padding-box;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 0.25rem;
	transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
	display: flex;
	flex-direction: row;

	&.focus {
	border-color: #aabad2;
	outline: none;
	box-shadow: 0 0 0 0.2rem rgba(87, 119, 165, 0.25);
	}

	input {
	border: none;
	padding: 0;
	margin: 0 0.125rem;
	width: 30px;
	text-align: center;

	&:focus {
	border: none;
	box-shadow: none;
	outline: none;
	}
	}
	}
	}
	import {
	autoinject,
	bindable,
	bindingMode,
	customElement,
	TaskQueue
	} from 'aurelia-framework';

	@autoinject
	@customElement('ip-address')
	export class IpAddress {
	@bindable({
	defaultBindingMode: bindingMode.twoWay
	})
	@bindable
	public ipAddress: string;

	public ip1: string;
	public ip2: string;
	public ip3: string;
	public ip4: string;

	public hasFocus: boolean;

	constructor(private taskQueue: TaskQueue) {}

	public inputFocus() {
	this.hasFocus = true;
	}

	public lostFocus() {
	this.hasFocus = false;
	}

	public changed(event: KeyboardEvent) {
	this.ip1 = this.sanitise(this.ip1);
	this.ip2 = this.sanitise(this.ip2);
	this.ip3 = this.sanitise(this.ip3);
	this.ip4 = this.sanitise(this.ip4);

	this.taskQueue.queueMicroTask(() => {
	this.ipAddress = `${this.ip1}.${this.ip2}.${this.ip3}.${this.ip4}`;

	const current = event.target as HTMLInputElement;

	if (
	event.keyCode === 190 \|\|
	event.keyCode === 110 \|\|
	current.value.length > 2
	) {
	const inputs = Array.from(
	(event.target as Element).parentElement.querySelectorAll('input')
	);
	const index = inputs.indexOf(current);
	if (index >= 0 && index < inputs.length - 1) {
	inputs[index + 1].focus();
	inputs[index + 1].select();
	this.hasFocus = true;
	}
	}
	});
	}

	private sanitise(input: string): string {
	let int = parseInt((input \|\| '').replace(/\D/g, ''));

	if (isNaN(int)) {
	int = 0;
	}

	return Math.max(0, Math.min(255, int)).toString();
	}

	public ipAddressChanged() {
	[this.ip1, this.ip2, this.ip3, this.ip4] = (
	this.ipAddress \|\| '0.0.0.0'
	).split('.');
	}
	}
	import {Aurelia} from 'aurelia-framework';

	export function configure(aurelia: Aurelia) {
	aurelia.use
	.standardConfiguration()
	.developmentLogging('info');
	aurelia.start().then(() => aurelia.setRoot());
	}