Reverbe/app.html

## app.html
<template>
  <require from="./basic-use.css"></require>
  <require from="aurelia-kendoui-bridge/window/window"></require>
  <require from="aurelia-kendoui-bridge/button/button"></require>

  <require from="./my-component"></require>

  <div id="example">

<div id="window"
         ak-window="k-width: 600px; k-title: About Alvar Aalto; k-visible.bind: false; k-actions.bind: actions; k-widget.bind: window"
         k-on-close.delegate="onClose()">

      <my-component></my-component>

    </div>
    <span id="undo" ref="undo" style="display:none" ak-button click.delegate="open()">Click here to open the window.</span>

    <div class="responsive-message"></div>
  </div>
</template>

## app.js
import {TaskQueue, inject} from 'aurelia-framework';

@inject(TaskQueue)
export class BasicUse {
  actions = ['Pin', 'Minimize', 'Maximize', 'Close'];

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

  attached() {
    this.taskQueue.queueTask(() => {
      this.window.center().open();
    });
  }

  open() {
    this.window.open();
    $(this.undo).fadeOut();
  }

  onClose() {
    $(this.undo).fadeIn();
  }
}

## basic-use.css
#example
{
  min-height:500px;
}

#undo {
  text-align: center;
  position: absolute;
  white-space: nowrap;
  padding: 1em;
  cursor: pointer;
}
.armchair {
  float: left;
  margin: 30px 30px 120px 30px;
  text-align: center;
}
.armchair img {
  display: block;
  margin-bottom: 10px;
}

@media screen and (max-width: 1023px) {
  #window-basic-use div.ak-window {
    display: none !important;
  }
}

## index.html
<!doctype html>
<html>
  <head>
    <title>Aurelia KendoUI bridge</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.2.714/styles/kendo.common.min.css">
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.2.714/styles/kendo.rtl.min.css">
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.2.714/styles/kendo.default.min.css">
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.2.714/styles/kendo.mobile.all.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.4.0/bluebird.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/chroma-js/1.2.1/chroma.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2016.2.714/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2016.2.714/js/jszip.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2016.2.714/js/kendo.all.min.js"></script>
  </head>
  <body aurelia-app="main">
    <h1>Loading...</h1>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.6/system.js"></script>
    <script src="https://rawgit.com/aurelia-ui-toolkits/aurelia-kendoui-bundles/1.0.0-beta.1.0.6/config2.js"></script>
    <script>
      System.import('aurelia-bootstrapper');
    </script>
  </body>
</html>

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

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

## my-component.html
<template>

  <div repeat.for="country of countries">
    ${country}
  </div>

</template>

## my-component.js
export class MyComponentCustomElement {
  countries = ['Spain', 'Poland', 'Portugal'];

  guid() {
        var id = '', i, random;
        for (i = 0; i < 32; i++) {
            random = Math.random() * 16 | 0;
            if (i == 8 || i == 12 || i == 16 || i == 20) {
                id += '-';
            }
            id += (i == 12 ? 4 : i == 16 ? random & 3 | 8 : random).toString(16);
        }

        return id;
    };

  attached(){
    setInterval(() => {
			this.countries = [this.guid(), this.guid(), this.guid()]
		}, 1000);
  }
}
	<template>
	<require from="./basic-use.css"></require>
	<require from="aurelia-kendoui-bridge/window/window"></require>
	<require from="aurelia-kendoui-bridge/button/button"></require>

	<require from="./my-component"></require>

	<div id="example">

	<div id="window"
	ak-window="k-width: 600px; k-title: About Alvar Aalto; k-visible.bind: false; k-actions.bind: actions; k-widget.bind: window"
	k-on-close.delegate="onClose()">

	<my-component></my-component>

	</div>
	<span id="undo" ref="undo" style="display:none" ak-button click.delegate="open()">Click here to open the window.</span>

	<div class="responsive-message"></div>
	</div>
	</template>
	import {TaskQueue, inject} from 'aurelia-framework';

	@inject(TaskQueue)
	export class BasicUse {
	actions = ['Pin', 'Minimize', 'Maximize', 'Close'];

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

	attached() {
	this.taskQueue.queueTask(() => {
	this.window.center().open();
	});
	}

	open() {
	this.window.open();
	$(this.undo).fadeOut();
	}

	onClose() {
	$(this.undo).fadeIn();
	}
	}
	#example
	{
	min-height:500px;
	}

	#undo {
	text-align: center;
	position: absolute;
	white-space: nowrap;
	padding: 1em;
	cursor: pointer;
	}
	.armchair {
	float: left;
	margin: 30px 30px 120px 30px;
	text-align: center;
	}
	.armchair img {
	display: block;
	margin-bottom: 10px;
	}

	@media screen and (max-width: 1023px) {
	#window-basic-use div.ak-window {
	display: none !important;
	}
	}
	<!doctype html>
	<html>
	<head>
	<title>Aurelia KendoUI bridge</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.2.714/styles/kendo.common.min.css">
	<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.2.714/styles/kendo.rtl.min.css">
	<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.2.714/styles/kendo.default.min.css">
	<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.2.714/styles/kendo.mobile.all.min.css">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.4.0/bluebird.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/chroma-js/1.2.1/chroma.min.js"></script>
	<script src="https://kendo.cdn.telerik.com/2016.2.714/js/jquery.min.js"></script>
	<script src="https://kendo.cdn.telerik.com/2016.2.714/js/jszip.min.js"></script>
	<script src="https://kendo.cdn.telerik.com/2016.2.714/js/kendo.all.min.js"></script>
	</head>
	<body aurelia-app="main">
	<h1>Loading...</h1>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.6/system.js"></script>
	<script src="https://rawgit.com/aurelia-ui-toolkits/aurelia-kendoui-bundles/1.0.0-beta.1.0.6/config2.js"></script>
	<script>
	System.import('aurelia-bootstrapper');
	</script>
	</body>
	</html>
	export function configure(aurelia) {
	aurelia.use
	.standardConfiguration()
	.developmentLogging()
	.plugin('aurelia-kendoui-bridge');

	aurelia.start().then(a => a.setRoot());
	}
	<template>

	<div repeat.for="country of countries">
	${country}
	</div>

	</template>
	export class MyComponentCustomElement {
	countries = ['Spain', 'Poland', 'Portugal'];

	guid() {
	var id = '', i, random;
	for (i = 0; i < 32; i++) {
	random = Math.random() * 16 \| 0;
	if (i == 8 \|\| i == 12 \|\| i == 16 \|\| i == 20) {
	id += '-';
	}
	id += (i == 12 ? 4 : i == 16 ? random & 3 \| 8 : random).toString(16);
	}

	return id;
	};

	attached(){
	setInterval(() => {
	this.countries = [this.guid(), this.guid(), this.guid()]
	}, 1000);
	}
	}