;(function(burl) {
    var url = 'https://cdn.rawgit.com/anpylar/anpylar/1.1.3/anpylar.js'
    var s = document.createElement('script')
    s.type = 'text/javascript'
    s.async = true
    s.src = url
    var h = document.getElementsByTagName('head')[0]
    h.appendChild(s)
})();
###############################################################################
# Copyright 2018 The AnPyLar Team. All Rights Reserved.
# Use of this source code is governed by an MIT-style license that
# can be found in the LICENSE file at http://anpylar.com/mit-license
###############################################################################
from .app_module import AppModule

<h1 {title}=title>{title}</h1>

<!--
Copyright 2017 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
-->

<!--
Copyright 2018 The AnPyLar Team
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://anpylar.com/mit-license
-->
###############################################################################
# Copyright 2018 The AnPyLar Team. All Rights Reserved.
# Use of this source code is governed by an MIT-style license that
# can be found in the LICENSE file at http://anpylar.com/mit-license
###############################################################################
from anpylar import Component, html
from .pyroes import PyroesComponent
from .pyro_detail import PyroDetailComponent


class AppComponent(Component):

    title = 'Tour of Pyroes'

    bindings = {}

    def render(self, node):
        PyroesComponent()
###############################################################################
# Copyright 2018 The AnPyLar Team. All Rights Reserved.
# Use of this source code is governed by an MIT-style license that
# can be found in the LICENSE file at http://anpylar.com/mit-license
###############################################################################
from anpylar import Module

from .app_component import AppComponent
from .pyro_service import PyroService


class AppModule(Module):

    components = AppComponent

    bindings = {}

    services = {
        'pyro_service': PyroService,
    }

    routes = []

    def __init__(self):
        pass
###############################################################################
# Copyright 2018 The AnPyLar Team. All Rights Reserved.
# Use of this source code is governed by an MIT-style license that
# can be found in the LICENSE file at http://anpylar.com/mit-license
###############################################################################
from .pyro import Pyro


Pyroes = [Pyro(**x) for x in [
    {'pyd': 11, 'name': 'Pyro Nakamura'},
    {'pyd': 12, 'name': 'Mopynder Shuresh'},
    {'pyd': 13, 'name': 'Pyter Pytrelli'},
    {'pyd': 14, 'name': 'Angela Pytrelli'},
    {'pyd': 15, 'name': 'Claire Pynnet'},
    {'pyd': 16, 'name': 'Noah Pynnet'},
    {'pyd': 17, 'name': 'Pysaac Mendez'},
    {'pyd': 18, 'name': 'Pyki Sanders'},
    {'pyd': 19, 'name': 'The Pytian'},
    {'pyd': 20, 'name': 'Pylar'}]
]
###############################################################################
# Copyright 2018 The AnPyLar Team. All Rights Reserved.
# Use of this source code is governed by an MIT-style license that
# can be found in the LICENSE file at http://anpylar.com/mit-license
###############################################################################
from .pyro_detail_component import PyroDetailComponent
<div *_display=selected_.pyd_>
  <h2 {name}="selected_.name_.map(lambda x: x.upper())">{name} Details</h2>
  <div><span>pyd: </span><txt [selected_.pyd_]>{}</txt></div>
  <div>
      <label>name:
        <input *_fmtvalue=selected_.name_ placeholder="name"/>
      </label>
  </div>
</div>

<!--
Copyright 2017 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
-->

<!--
Copyright 2018 The AnPyLar Team
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://anpylar.com/mit-license
-->
###############################################################################
# Copyright 2018 The AnPyLar Team. All Rights Reserved.
# Use of this source code is governed by an MIT-style license that
# can be found in the LICENSE file at http://anpylar.com/mit-license
###############################################################################
from anpylar import Component, html


class PyroDetailComponent(Component):
    selector = 'pyro-detail'

    bindings = {}

    def render(self, node):
        pass
###############################################################################
# Copyright 2018 The AnPyLar Team. All Rights Reserved.
# Use of this source code is governed by an MIT-style license that
# can be found in the LICENSE file at http://anpylar.com/mit-license
###############################################################################
from anpylar import Observable

from .mock_pyroes import Pyroes


class PyroService:

    def get_pyroes(self):
        return Observable.of(Pyroes)
###############################################################################
# Copyright 2018 The AnPyLar Team. All Rights Reserved.
# Use of this source code is governed by an MIT-style license that
# can be found in the LICENSE file at http://anpylar.com/mit-license
###############################################################################
from anpylar import Model


class Pyro(Model):
    bindings = {
        'pyd': 0,
        'name': '',
    }
###############################################################################
# Copyright 2018 The AnPyLar Team. All Rights Reserved.
# Use of this source code is governed by an MIT-style license that
# can be found in the LICENSE file at http://anpylar.com/mit-license
###############################################################################
from .pyroes_component import PyroesComponent
/* PyroesComponent's private CSS styles */
.selected {
  background-color: #CFD8DC !important;
  color: white;
}
.pyroes {
  margin: 0 0 2em 0;
  list-style-type: none;
  padding: 0;
  width: 15em;
}
.pyroes li {
  cursor: pointer;
  position: relative;
  left: 0;
  background-color: #EEE;
  margin: .5em;
  padding: .3em 0;
  height: 1.6em;
  border-radius: 4px;
}
.pyroes li.selected:hover {
  background-color: #BBD8DC !important;
  color: white;
}
.pyroes li:hover {
  color: #607D8B;
  background-color: #DDD;
  left: .1em;
}
.pyroes .text {
  position: relative;
  top: -3px;
}
.pyroes .badge {
  display: inline-block;
  font-size: small;
  color: white;
  padding: 0.8em 0.7em 0 0.7em;
  background-color: #607D8B;
  line-height: 1em;
  position: relative;
  left: -1px;
  top: -4px;
  height: 1.8em;
  margin-right: .8em;
  border-radius: 4px 0 0 4px;
}


/*
Copyright 2017 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/

/*
Copyright 2018 The AnPyLar Team
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://anpylar.com/mit-license
*/
<h2>My Pyroes</h2>
<ul class="pyroes">
</ul>
<pyro-detail></pyro-detail>

<!--
Copyright 2017 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
-->

<!--
Copyright 2018 The AnPyLar Team
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://anpylar.com/mit-license
-->
###############################################################################
# Copyright 2018 The AnPyLar Team. All Rights Reserved.
# Use of this source code is governed by an MIT-style license that
# can be found in the LICENSE file at http://anpylar.com/mit-license
###############################################################################
from anpylar import Component, html
from app.pyro import Pyro


class PyroesComponent(Component):

    bindings = {
        'selected': Pyro(),
        'pyroes': [],  # observable for receiving pyroes
    }

    def __init__(self):
        # get the pyroes from service into the observable
        self.pyro_service.get_pyroes().subscribe(self.pyroes_)

    def render(self, node):
        with node.select('ul') as ul:  # find node where to display the list
            # Render under "ul" using
            #   callback: render_pyroes
            #   when: the observable self.pyroes_ is signaled
            ul._render(self.render_pyroes, self.pyroes_)

    def render_pyroes(self, pyroes):
        # Because this was registered with ul._render, any rendering action
        # takes place under ul, which is empty when entering here
        for pyro in pyroes:
            with html.li() as li:  # create a list item per Pyro
                # if the selected pyro is this pyro ... set a class attr
                li._class.selected(self.selected_.pyd_ == pyro.pyd)
                # bind a click to do self.selected_(pyro)
                li._bindx.click(self.selected_, pyro)
                # show the pyd in a <apan> as a badge (child of list item)
                html.span(pyro.pyd, Class='badge')
                # show the name as text inside the list item
                html.txt(' {name}')._fmt(name=pyro.name_)
<!DOCTYPE html>
<html>
<head>
  <title>Tour of Pyroes</title>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="styles.css">
  <script src="anpylar_overlay.js"></script>
  <script src="anpylar.js"></script>

</head>
<body></body>
</html>

<!--
Copyright 2018 The AnPyLar Team
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://anpylar.com/mit-license
-->
{
    "packages": [
        "app"
    ],
    "app_name": "",
    "version": "",
    "author": "",
    "author_email": "",
    "license": "",
    "url": ""
}
/* Master Styles */
h1 {
  color: #369;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 250%;
}
h2, h3 {
  color: #444;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: lighter;
}
body {
  margin: 2em;
}
body, input[text], button {
  color: #888;
  font-family: Cambria, Georgia;
}
a {
  cursor: pointer;
  cursor: hand;
}
button {
  font-family: Arial;
  background-color: #eee;
  border: none;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
  cursor: hand;
}
button:hover {
  background-color: #cfd8dc;
}
button:disabled {
  background-color: #eee;
  color: #aaa;
  cursor: auto;
}

/* Navigation link styles */
nav a {
  padding: 5px 10px;
  text-decoration: none;
  margin-right: 10px;
  margin-top: 10px;
  display: inline-block;
  background-color: #eee;
  border-radius: 4px;
}
nav a:visited, a:link {
  color: #607D8B;
}
nav a:hover {
  color: #039be5;
  background-color: #CFD8DC;
}
nav a.active {
  color: #039be5;
}

/* everywhere else */
* {
  font-family: Arial, Helvetica, sans-serif;
}


/*
Copyright 2017 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/
;(function(){
    function add_overlay() {

        var elem = document.createElement('div');
        elem.id = 'anpylar-loading-overlay'
        elem.style.cssText = 'position: fixed; width: 100%; height: 100%;' + 'min-height: 100%;' +
            'left: 0;top: 0;background: rgba(224,224,224,0.33); z-index: 100000;'
        document.body.appendChild(elem);

        var elem4 = document.createElement('div');
        elem4.innerHTML = '<h1 style="text-align:center;position:relative;top:46%;transform:translateY(-46%);">Loading ...</h1>'
        elem4.style.cssText = 'position: fixed; width: 100%; height: 100%;' +
            'left: 0;top: 0; z-index: 10002;'
        elem.appendChild(elem4)

        var keyframes = '\
#anpylar-loading-wheel {\
  position: fixed;\
  top: 50%;\
  left: 50%;\
  width: 150px;\
  height: 150px;\
  margin: -75px 0 0 -75px;\
  border: 16px solid #f3f3f3;\
  border-radius: 50%;\
  border-top: 16px solid #3498db;\
  width: 120px;\
  height: 120px;\
  animation: spin 2s linear infinite;\
  z-index: 10001;\
}\
\
@keyframes spin {\
  0% { transform: rotate(0deg); }\
  100% { transform: rotate(360deg); }\
}';

        var elem2 = document.createElement('style');
        elem2.style.type = 'text/css'
        elem2.id = 'anpylar-loading-overlay-style'
        elem2.innerHTML = keyframes
        document.head.appendChild(elem2)

        var elem3 = document.createElement('div')
        elem3.id = 'anpylar-loading-wheel'
        elem.appendChild(elem3)
    }
    window.addEventListener('DOMContentLoaded', add_overlay, true)
})();