<!--
// Copyright 2014 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
-->
<import src="/sky/framework/sky-element/sky-element.sky" as="SkyElement" />
<import src="/sky/framework/sky-checkbox/sky-checkbox.sky" />

<sky-element
    name="test-element"
    attributes="size:number, checked:boolean,name:string"
    on-host-event="handleEvent">
<template>
  <div id="inside" on-test-event="handleEvent" lang="{{ value }}">{{ value }}</div>
  <sky-checkbox id="checkbox" checked="{{ checked }}" />
</template>
<script>
module.exports = class extends SkyElement {
  created() {
    this.lastEvent = null;
    this.value = 10;
    this.shadowRootReadyCount = 0;
    this.changes = [];
  }
  handleEvent(event) {
    this.lastEvent = event;
  }
  shadowRootReady() {
    this.shadowRootReadyCount++;
  }
  sizeChanged(oldValue, newValue) {
    this.recordAttributeChange('size', oldValue, newValue);
  }
  checkedChanged(oldValue, newValue) {
    this.recordAttributeChange('checked', oldValue, newValue);
  }
  nameChanged(oldValue, newValue) {
    this.recordAttributeChange('name', oldValue, newValue);
  }
  recordAttributeChange(name, oldValue, newValue) {
    this.changes.push({
      name: name,
      newValue: newValue,
      oldValue: oldValue,
    });
  }
}.register();
</script>
</sky-element>