Agenda en Polymer

.gitignore

+bower_components/

README.md

+# \<agenda-polymer\>
+
+
+
+## Install the Polymer-CLI
+
+First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) installed. Then run `polymer serve` to serve your element locally.
+
+## Viewing Your Element
+
+```
+$ polymer serve
+```
+
+## Running Tests
+
+```
+$ polymer test
+```
+
+Your application is already set up to be tested via [web-component-tester](https://github.com/Polymer/web-component-tester). Run `polymer test` to run your application's test suite locally.

_element.html

+<link rel="import" href="../polymer/polymer-element.html">
+
+<dom-module id="agenda-polymer">
+  <template>
+    <style>
+      :host {
+        display: block;
+      }
+    </style>
+    <h2>Hello [[prop1]]!</h2>
+  </template>
+
+  <script>
+    /**
+     * `agenda-polymer`
+     * 
+     *
+     * @customElement
+     * @polymer
+     * @demo demo/index.html
+     */
+    class AgendaPolymer extends Polymer.Element {
+      static get is() { return 'agenda-polymer'; }
+      static get properties() {
+        return {
+          prop1: {
+            type: String,
+            value: 'agenda-polymer'
+          }
+        };
+      }
+    }
+
+    window.customElements.define(AgendaPolymer.is, AgendaPolymer);
+  </script>
+</dom-module>

agenda-polymer.html

+<!-- <link rel="import" href="./css/contact-styles.html"> -->
+<link rel="import" href="./components/show-contacts/show-contacts.html">
+<link rel="import" href="./components/add-contact/add-contact.html">
+<link rel="import" href="./components/single-contact/single-contact.html">
+<link rel="import" href="./components/edit-contact/edit-contact.html">
+
+<dom-module id="agenda-polymer">
+  <link rel="import" type="css" href="./css/styles.css">
+  <template>
+    <!-- <style include="contact-styles"></style> -->
+    <header class="encabezado">
+      <div class="encabezado__container">
+          <h1>Mi Agenda</h1>
+      </div>
+      <div class="encabezado__agregar">
+          <template is="dom-if" if="{{allView}}">
+            <a on-click="newContact">+</a>
+          </template>
+          <template is="dom-if" if="{{!allView}}">
+            <a on-click="allContact">⬅</a>
+          </template>
+      </div>
+    </header>
+    
+    <template is="dom-if" if="{{allView}}">
+      <section class="container">
+        <ul class="contact">
+          <template is="dom-repeat" items="[[allContacts]]" as="contact">
+            <show-contacts contact="[[contact]]" on-show-contact="showContact"></show-contacts>
+          </template>
+        </ul>
+      </section>
+    </template>
+
+    <template is="dom-if" if="{{addView}}">
+        <add-contact on-save-contact="addNewContact"></add-contact>
+    </template>
+
+    <template is="dom-if" if="{{showView}}">
+      <single-contact contact="[[single]]" on-edit-contact="editContactView" on-delete-contact="deleteContact"></single-contact>
+    </template>
+
+    <template is="dom-if" if="{{editView}}">
+      <edit-contact contact="[[single]]" on-edit-contact="editContact"></edit-contact>
+    </template>
+  </template>
+
+  <script src="./src/agenda-polymer.js"></script>
+</dom-module>

bower.json

+{
+  "name": "show-contacts",
+  "main": "show-contacts.html",
+  "dependencies": {
+    "polymer": "Polymer/polymer#^2.0.0"
+  },
+  "devDependencies": {
+    "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^2.0.0",
+    "web-component-tester": "Polymer/web-component-tester#^6.0.0",
+    "webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0"
+  },
+  "resolutions": {
+    "polymer": "^2.0.0"
+  }
+}

components/add-contact/.gitignore

+bower_components/

components/add-contact/README.md

+# \<add-contact\>
+
+
+
+## Install the Polymer-CLI
+
+First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) installed. Then run `polymer serve` to serve your element locally.
+
+## Viewing Your Element
+
+```
+$ polymer serve
+```
+
+## Running Tests
+
+```
+$ polymer test
+```
+
+Your application is already set up to be tested via [web-component-tester](https://github.com/Polymer/web-component-tester). Run `polymer test` to run your application's test suite locally.

components/add-contact/_element.html

+<link rel="import" href="../polymer/polymer-element.html">
+
+<dom-module id="add-contact">
+  <template>
+    <style>
+      :host {
+        display: block;
+      }
+    </style>
+    <h2>Hello [[prop1]]!</h2>
+  </template>
+
+  <script>
+    /**
+     * `add-contact`
+     * 
+     *
+     * @customElement
+     * @polymer
+     * @demo demo/index.html
+     */
+    class AddContact extends Polymer.Element {
+      static get is() { return 'add-contact'; }
+      static get properties() {
+        return {
+          prop1: {
+            type: String,
+            value: 'add-contact'
+          }
+        };
+      }
+    }
+
+    window.customElements.define(AddContact.is, AddContact);
+  </script>
+</dom-module>

components/add-contact/add-contact.html

+
+
+<dom-module id="add-contact">
+  <link rel="import" type="css" href="../../css/styles.css">
+  <template>
+      <div class="form__contact">
+        <div class="input__group">
+            <label for="" class="input__label">Nombre (s):</label>
+            <input type="text" class="input__contact" id="nombre" placeholder="Nombre" name="nombre" value="{{nombre::input}}">
+        </div>
+        <div class="input__group">
+            <label for="" class="input__label">Apellido Paterno:</label>
+            <input type="text" class="input__contact" id="ap_paterno" placeholder="Apellido Paterno" name="apPaterno" value="{{apPaterno::input}}">
+        </div>
+        <div class="input__group">
+            <label for="" class="input__label">Apellido Materno:</label>
+            <input type="text" class="input__contact" id="ap_materno" placeholder="Apellido Materno" name="apMaterno" value="{{apMaterno::input}}">
+        </div>
+        <div class="input__group">
+            <label for="" class="input__label">Télefono:</label>
+            <input type="tel" class="input__contact" id="telefono" placeholder="Télefono" name="telefono" value="{{telefono::input}}">
+        </div>
+        <div class="input__group">
+            <label for="" class="input__label">Correo:</label>
+            <input type="email" class="input__contact" id="correo" placeholder="Correo" name="correo" value="{{correo::input}}">
+        </div>
+        <div class="input__group">
+            <label for="" class="input__label">Edad:</label>
+            <input type="number" class="input__contact" id="edad" placeholder="Edad" name="edad" value="{{edad::input}}">
+        </div>
+        <div class="input__group">
+            <label for="" class="input__label">Nickname:</label>
+            <input type="text" class="input__contact" id="nickname" placeholder="Nickname" name="nickName" value="{{nickName::input}}">
+        </div>
+        <div class="input__group">
+            <label for="" class="input__label">Fecha de Registro:</label>
+            <input type="date" class="input__contact" id="fecha" name="fecha" value="{{fecha::input}}">
+        </div>
+        <button class="form__submit" on-click="saveContact">Guardar</button>
+    </div>
+  </template>
+
+  <script src="../../src/add-contact.js"></script>
+</dom-module>

components/add-contact/bower.json

+{
+  "name": "add-contact",
+  "main": "add-contact.html",
+  "dependencies": {
+    "polymer": "Polymer/polymer#^2.0.0"
+  },
+  "devDependencies": {
+    "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^2.0.0",
+    "web-component-tester": "Polymer/web-component-tester#^6.0.0",
+    "webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0"
+  },
+  "resolutions": {
+    "polymer": "^2.0.0"
+  }
+}

components/add-contact/demo/index.html

+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
+
+    <title>add-contact demo</title>
+
+    <script src="../../webcomponentsjs/webcomponents-loader.js"></script>
+
+    <link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
+    <link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
+    <link rel="import" href="../add-contact.html">
+
+    <custom-style>
+      <style is="custom-style" include="demo-pages-shared-styles">
+      </style>
+    </custom-style>
+  </head>
+  <body>
+    <div class="vertical-section-container centered">
+      <h3>Basic add-contact demo</h3>
+      <demo-snippet>
+        <template>
+          <add-contact></add-contact>
+        </template>
+      </demo-snippet>
+    </div>
+  </body>
+</html>

components/add-contact/index.html

+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="refresh" content="0;url=demo/" />
+    <title>add-contact</title>
+  </head>
+  <body>
+    <!--
+        ELEMENT API DOCUMENTATION SUPPORT COMING SOON
+        Visit demo/index.html to see live examples of your element running.
+        This page will automatically redirect you there when run in the browser
+        with `polymer serve`.
+      -->
+  </body>
+</html>

components/add-contact/polymer.json

+{
+  "lint": {
+    "rules": [
+      "polymer-2"
+    ]
+  }
+}

components/add-contact/test/_element_test.html

+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
+
+    <title>add-contact test</title>
+
+    <script src="../../webcomponentsjs/webcomponents-loader.js"></script>
+    <script src="../../web-component-tester/browser.js"></script>
+
+    <link rel="import" href="../add-contact.html">
+  </head>
+  <body>
+
+    <test-fixture id="BasicTestFixture">
+      <template>
+        <add-contact></add-contact>
+      </template>
+    </test-fixture>
+
+    <test-fixture id="ChangedPropertyTestFixture">
+      <template>
+        <add-contact prop1="new-prop1"></add-contact>
+      </template>
+    </test-fixture>
+
+    <script>
+      suite('add-contact', () => {
+
+        test('instantiating the element with default properties works', () => {
+          const element = fixture('BasicTestFixture');
+          assert.equal(element.prop1, 'add-contact');
+          const elementShadowRoot = element.shadowRoot;
+          const elementHeader = elementShadowRoot.querySelector('h2');
+          assert.equal(elementHeader.innerHTML, 'Hello add-contact!');
+        });
+
+        test('setting a property on the element works', () => {
+          // Create a test fixture
+          const element = fixture('ChangedPropertyTestFixture');
+          assert.equal(element.prop1, 'new-prop1');
+          const elementShadowRoot = element.shadowRoot;
+          const elementHeader = elementShadowRoot.querySelector('h2');
+          assert.equal(elementHeader.innerHTML, 'Hello new-prop1!');
+        });
+
+      });
+    </script>
+
+  </body>
+</html>

components/add-contact/test/add-contact_test.html

+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
+
+    <title>add-contact test</title>
+
+    <script src="../../webcomponentsjs/webcomponents-loader.js"></script>
+    <script src="../../web-component-tester/browser.js"></script>
+
+    <link rel="import" href="../add-contact.html">
+  </head>
+  <body>
+
+    <test-fixture id="BasicTestFixture">
+      <template>
+        <add-contact></add-contact>
+      </template>
+    </test-fixture>
+
+    <test-fixture id="ChangedPropertyTestFixture">
+      <template>
+        <add-contact prop1="new-prop1"></add-contact>
+      </template>
+    </test-fixture>
+
+    <script>
+      suite('add-contact', () => {
+
+        test('instantiating the element with default properties works', () => {
+          const element = fixture('BasicTestFixture');
+          assert.equal(element.prop1, 'add-contact');
+          const elementShadowRoot = element.shadowRoot;
+          const elementHeader = elementShadowRoot.querySelector('h2');
+          assert.equal(elementHeader.innerHTML, 'Hello add-contact!');
+        });
+
+        test('setting a property on the element works', () => {
+          // Create a test fixture
+          const element = fixture('ChangedPropertyTestFixture');
+          assert.equal(element.prop1, 'new-prop1');
+          const elementShadowRoot = element.shadowRoot;
+          const elementHeader = elementShadowRoot.querySelector('h2');
+          assert.equal(elementHeader.innerHTML, 'Hello new-prop1!');
+        });
+
+      });
+    </script>
+
+  </body>
+</html>

components/add-contact/test/index.html

+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
+
+    <script src="../../webcomponentsjs/webcomponents-loader.js"></script>
+    <script src="../../web-component-tester/browser.js"></script>
+  </head>
+  <body>
+    <script>
+      // Load and run all tests (.html, .js):
+      WCT.loadSuites([
+        'add-contact_test.html'
+      ]);
+    </script>
+
+</body></html>

components/edit-contact/.gitignore

+bower_components/

components/edit-contact/README.md

+# \<edit-contact\>
+
+
+
+## Install the Polymer-CLI
+
+First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) installed. Then run `polymer serve` to serve your element locally.
+
+## Viewing Your Element
+
+```
+$ polymer serve
+```
+
+## Running Tests
+
+```
+$ polymer test
+```
+
+Your application is already set up to be tested via [web-component-tester](https://github.com/Polymer/web-component-tester). Run `polymer test` to run your application's test suite locally.

components/edit-contact/_element.html

+<link rel="import" href="../polymer/polymer-element.html">
+
+<dom-module id="edit-contact">
+  <template>
+    <style>
+      :host {
+        display: block;
+      }
+    </style>
+    <h2>Hello [[prop1]]!</h2>
+  </template>
+
+  <script>
+    /**
+     * `edit-contact`
+     * 
+     *
+     * @customElement
+     * @polymer
+     * @demo demo/index.html
+     */
+    class EditContact extends Polymer.Element {
+      static get is() { return 'edit-contact'; }
+      static get properties() {
+        return {
+          prop1: {
+            type: String,
+            value: 'edit-contact'
+          }
+        };
+      }
+    }
+
+    window.customElements.define(EditContact.is, EditContact);
+  </script>
+</dom-module>

components/edit-contact/bower.json

+{
+  "name": "edit-contact",
+  "main": "edit-contact.html",
+  "dependencies": {
+    "polymer": "Polymer/polymer#^2.0.0"
+  },
+  "devDependencies": {
+    "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^2.0.0",
+    "web-component-tester": "Polymer/web-component-tester#^6.0.0",
+    "webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0"
+  },
+  "resolutions": {
+    "polymer": "^2.0.0"
+  }
+}