ScottWhittaker/app.html

## app.html
<template>
  <button class="rating-button" click.delegate="rate()">Rate <span>${rating}</span></button>
</template>

## app.js
import {inject} from 'aurelia-framework';
import {DialogService} from 'aurelia-dialog';
import {RatingDialog} from './rating-dialog';

@inject(DialogService)
export class App {

  rating = 3;

  constructor(dialogService) {
    this.dialogService = dialogService;
  }

  rate() {
    this.dialogService.open({viewModel: RatingDialog, model: this.rating})
      .then(response => {
        if(!response.wasCancelled) {
          console.log('OK');
          this.rating = response.output;
        } else {
          console.log('Cancel');
        }
        console.log(response.output);
      });
  }
}

## index.html
<!doctype html>
<html>
  <head>
    <title>Aurelia</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">
  </head>
  <body aurelia-app="main">
    <h1>Loading...</h1>

    <script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/jspm_packages/system.js"></script>
    <script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/config.js"></script>
    <script>
      System.import('aurelia-bootstrapper');
    </script>
  </body>
</html>

## main.js
export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging()
    .plugin('aurelia-dialog');

  aurelia.start().then(() => aurelia.setRoot());
}

## rating-dialog.html
<template>
  <ai-dialog>
    <ai-dialog-header>${heading}</ai-dialog-header>
    <ai-dialog-body click.delegate="rate($event)">
      <div repeat.for="i of maxRating"
           data-rate="${i + 1}"
           class="rate ${i + 1 <= rating ? 'selected' : ''} ${i + 1 == rating ? 'active' : ''}">${i + 1}</div>
    </ai-dialog-body>
    <ai-dialog-footer>
      <button click.delegate="controller.cancel()">Cancel</button>
      <button click.delegate="controller.ok(rating)">Ok</button>
    </ai-dialog-footer>
  </ai-dialog>
</template>


## rating-dialog.js
import {inject} from 'aurelia-framework';
import {DialogController} from 'aurelia-dialog';

@inject(DialogController)
export class RatingDialog {

  heading = 'Rate me...';
  maxRating = 5;

  constructor(controller) {
    this.controller = controller;
  }

  activate(rating = 1) {
    this.rating = rating;
  }

  rate(event) {
    if(event.target.dataset.rate) {
      this.rating = event.target.dataset.rate;
    }
  }
}

## styles.css
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  padding: 1em;
  font-family: sans-serif;
}

.rating-button,
.rate {
  line-height: 64px;
  font-size: 32px;
  color: #fff;
  background-color: #555;
}

.rating-button:hover {
  cursor: pointer;
  background-color: #333;
}

.rating-button span,
.rate {
  width: 64px;
  height: 64px;
  border-radius: 64px;
  text-align: center;
}

.rating-button {
  display: block;
  margin: 0 auto;
  padding: .5em 1em;
  border: none;
  border-radius: 4px;
}

.rating-button span {
  display: block;
}

.rating-button span,
.rate.selected {
  background-color: #ffab13;
}

.rate {
  display: inline-block;
  margin: 0 2px;
  transition: all .1s ease-in-out;
  opacity: 0.7;
}

.rate.active {
  opacity: 1;
}

.rate:hover {
  transform: scale(1.4);
  cursor: pointer;
}

ai-dialog-overlay.active {
  opacity: 0.5 !important;
  background-color: #000;
}
	<template>
	<button class="rating-button" click.delegate="rate()">Rate <span>${rating}</span></button>
	</template>
	import {inject} from 'aurelia-framework';
	import {DialogService} from 'aurelia-dialog';
	import {RatingDialog} from './rating-dialog';

	@inject(DialogService)
	export class App {

	rating = 3;

	constructor(dialogService) {
	this.dialogService = dialogService;
	}

	rate() {
	this.dialogService.open({viewModel: RatingDialog, model: this.rating})
	.then(response => {
	if(!response.wasCancelled) {
	console.log('OK');
	this.rating = response.output;
	} else {
	console.log('Cancel');
	}
	console.log(response.output);
	});
	}
	}
	<!doctype html>
	<html>
	<head>
	<title>Aurelia</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="styles.css">
	</head>
	<body aurelia-app="main">
	<h1>Loading...</h1>

	<script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/jspm_packages/system.js"></script>
	<script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/config.js"></script>
	<script>
	System.import('aurelia-bootstrapper');
	</script>
	</body>
	</html>
	export function configure(aurelia) {
	aurelia.use
	.standardConfiguration()
	.developmentLogging()
	.plugin('aurelia-dialog');

	aurelia.start().then(() => aurelia.setRoot());
	}
	<template>
	<ai-dialog>
	<ai-dialog-header>${heading}</ai-dialog-header>
	<ai-dialog-body click.delegate="rate($event)">
	<div repeat.for="i of maxRating"
	data-rate="${i + 1}"
	class="rate ${i + 1 <= rating ? 'selected' : ''} ${i + 1 == rating ? 'active' : ''}">${i + 1}</div>
	</ai-dialog-body>
	<ai-dialog-footer>
	<button click.delegate="controller.cancel()">Cancel</button>
	<button click.delegate="controller.ok(rating)">Ok</button>
	</ai-dialog-footer>
	</ai-dialog>
	</template>
	import {inject} from 'aurelia-framework';
	import {DialogController} from 'aurelia-dialog';

	@inject(DialogController)
	export class RatingDialog {

	heading = 'Rate me...';
	maxRating = 5;

	constructor(controller) {
	this.controller = controller;
	}

	activate(rating = 1) {
	this.rating = rating;
	}

	rate(event) {
	if(event.target.dataset.rate) {
	this.rating = event.target.dataset.rate;
	}
	}
	}
	* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	}

	body {
	padding: 1em;
	font-family: sans-serif;
	}

	.rating-button,
	.rate {
	line-height: 64px;
	font-size: 32px;
	color: #fff;
	background-color: #555;
	}

	.rating-button:hover {
	cursor: pointer;
	background-color: #333;
	}

	.rating-button span,
	.rate {
	width: 64px;
	height: 64px;
	border-radius: 64px;
	text-align: center;
	}

	.rating-button {
	display: block;
	margin: 0 auto;
	padding: .5em 1em;
	border: none;
	border-radius: 4px;
	}

	.rating-button span {
	display: block;
	}

	.rating-button span,
	.rate.selected {
	background-color: #ffab13;
	}

	.rate {
	display: inline-block;
	margin: 0 2px;
	transition: all .1s ease-in-out;
	opacity: 0.7;
	}

	.rate.active {
	opacity: 1;
	}

	.rate:hover {
	transform: scale(1.4);
	cursor: pointer;
	}

	ai-dialog-overlay.active {
	opacity: 0.5 !important;
	background-color: #000;
	}