xtal-material - Vaadin Add-on Directory

Name: xtal-material
Availability: InStock
Author: bahrus

Lightweight Free Material Components

[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/bahrus/xtal-material)

Light weight material design V1 web components, based on Jon Uhlmann's [pure CSS material design form elements](https://codepen.io/jonnitto/pen/OVmvPB). For tabs we build on Ben Mildren's [Material Design CSS Only Tabs](https://codepen.io/mildrenben/pen/bdGdOb). NB: There are a number of [far](https://github.com/material-components/material-components-web-components) [more](https://vaadin.com/components/browse) [robust](https://www.webcomponents.org/collection/PolymerElements/paper-elements) [alternative](https://ionicframework.com/docs/components/) [material](https://web-padawan.github.io/aybolit/?path=/story/bootstrap--abs-button) design web components you should definitely check out. The text input also supports autocomplete / combobox functionality. It has a property, options, which expects the following interface: ```TypeScript export interface IXtalInputOptions { data: any[], textFld: string, keyFld: string, } ``` It utilizes the [datalist](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist). ## The Duality Principle >It seems as though we must use sometimes JavaScript and sometimes declarative markup, while at times we may use either. We are faced with a new kind of difficulty. We have two contradictory pictures of reality; separately neither of them fully explains the phenomena of good web design, but together they do. -- [Albert Einstein](https://en.wikipedia.org/wiki/Wave%E2%80%93particle_duality) If you look at the codepen examples these components derive from, one observes they do not contain any JavaScript. Unfortunately, lack of support for importing HTML kind of forces these components to adopt a slower, more complex, and less risk-free format -- JavaScript. But xtal-material is well-positioned to adopt HTML format when HTML modules land.

``` --> ## Install the Polymer-CLI First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) and npm (packaged with [Node.js](https://nodejs.org)) installed. Run `npm install` to install your element's dependencies, then run `polymer serve` to serve your element locally. ## Viewing Your Element ``` $ polymer serve ``` ## Running Tests WIP View on NPM
View on GitHub

xtal-material version 0.0.0
### Dependencies * @bower_components/accessibility-developer-tools#GoogleChrome/accessibility-developer-tools#^2.10.0 * @bower_components/async#caolan/async#^1.5.0 * @bower_components/chai#chaijs/chai#^3.2.0 * @bower_components/font-roboto#PolymerElements/font-roboto#^1 * @bower_components/iron-demo-helpers#PolymerElements/iron-demo-helpers#^2.0.0 * @bower_components/iron-flex-layout#PolymerElements/iron-flex-layout#1 - 2 * @bower_components/iron-location#PolymerElements/iron-location#1 - 2 * @bower_components/lodash#lodash/lodash#^3.7.0 * @bower_components/marked#chjj/marked#~0.3.9 * @bower_components/marked-element#PolymerElements/marked-element#1 - 2 * @bower_components/mocha#mochajs/mocha#^3.1.2 * @bower_components/polymer#Polymer/polymer#^2.0.0 * @bower_components/prism#LeaVerou/prism#* * @bower_components/prism-element#PolymerElements/prism-element#1 - 2 * @bower_components/shadycss#webcomponents/shadycss#^v1.1.0 * @bower_components/sinon-chai#domenic/sinon-chai#^2.7.0 * @bower_components/sinonjs#blittle/sinon.js#^1.14.1 * @bower_components/stacky#PolymerLabs/stacky#^1.3.0 * @bower_components/test-fixture#PolymerElements/test-fixture#^3.0.0 * @bower_components/web-component-tester#Polymer/web-component-tester#^6.0.0 * @bower_components/webcomponentsjs#webcomponents/webcomponentsjs#^1.0.0

xtal-material version 0.0.1
### Dependencies * @bower_components/accessibility-developer-tools#GoogleChrome/accessibility-developer-tools#^2.10.0 * @bower_components/async#caolan/async#^1.5.0 * @bower_components/chai#chaijs/chai#^3.2.0 * @bower_components/font-roboto#PolymerElements/font-roboto#^1 * @bower_components/iron-demo-helpers#PolymerElements/iron-demo-helpers#^2.0.0 * @bower_components/iron-flex-layout#PolymerElements/iron-flex-layout#1 - 2 * @bower_components/iron-location#PolymerElements/iron-location#1 - 2 * @bower_components/lodash#lodash/lodash#^3.7.0 * @bower_components/marked#chjj/marked#~0.3.9 * @bower_components/marked-element#PolymerElements/marked-element#1 - 2 * @bower_components/mocha#mochajs/mocha#^3.1.2 * @bower_components/polymer#Polymer/polymer#^2.0.0 * @bower_components/prism#LeaVerou/prism#* * @bower_components/prism-element#PolymerElements/prism-element#1 - 2 * @bower_components/shadycss#webcomponents/shadycss#^v1.1.0 * @bower_components/sinon-chai#domenic/sinon-chai#^2.7.0 * @bower_components/sinonjs#blittle/sinon.js#^1.14.1 * @bower_components/stacky#PolymerLabs/stacky#^1.3.0 * @bower_components/test-fixture#PolymerElements/test-fixture#^3.0.0 * @bower_components/web-component-tester#Polymer/web-component-tester#^6.0.0 * @bower_components/webcomponentsjs#webcomponents/webcomponentsjs#^1.0.0

xtal-material version 0.0.3
### Dependencies * @bower_components/accessibility-developer-tools#GoogleChrome/accessibility-developer-tools#^2.10.0 * @bower_components/async#caolan/async#^1.5.0 * @bower_components/chai#chaijs/chai#^3.2.0 * @bower_components/font-roboto#PolymerElements/font-roboto#^1 * @bower_components/iron-demo-helpers#PolymerElements/iron-demo-helpers#^2.0.0 * @bower_components/iron-flex-layout#PolymerElements/iron-flex-layout#1 - 2 * @bower_components/iron-location#PolymerElements/iron-location#1 - 2 * @bower_components/lodash#lodash/lodash#^3.7.0 * @bower_components/marked#chjj/marked#~0.3.9 * @bower_components/marked-element#PolymerElements/marked-element#1 - 2 * @bower_components/mocha#mochajs/mocha#^3.1.2 * @bower_components/polymer#Polymer/polymer#^2.0.0 * @bower_components/prism#LeaVerou/prism#* * @bower_components/prism-element#PolymerElements/prism-element#1 - 2 * @bower_components/shadycss#webcomponents/shadycss#^v1.1.0 * @bower_components/sinon-chai#domenic/sinon-chai#^2.7.0 * @bower_components/sinonjs#blittle/sinon.js#^1.14.1 * @bower_components/stacky#PolymerLabs/stacky#^1.3.0 * @bower_components/test-fixture#PolymerElements/test-fixture#^3.0.0 * @bower_components/web-component-tester#Polymer/web-component-tester#^6.0.0 * @bower_components/webcomponentsjs#webcomponents/webcomponentsjs#^1.0.0

xtal-material version 0.0.5
### Dependencies * @polymer/polymer#^3.0.0 * @types/node#^10.1.0 * bra-ket#0.0.3 * templ-mount#0.0.1

xtal-material version 0.0.6
### Dependencies * @polymer/polymer#^3.0.0 * @types/node#^10.1.0 * bra-ket#0.0.3 * templ-mount#0.0.1

xtal-material version 0.0.7
### Dependencies * @polymer/polymer#^3.0.0 * @types/node#^10.1.0 * bra-ket#0.0.3 * templ-mount#0.0.1

xtal-material version 0.0.8
### Dependencies * @polymer/polymer#^3.0.0 * @types/node#^10.1.0 * bra-ket#0.0.3 * templ-mount#0.0.1

xtal-material version 0.0.10
### Dependencies * @polymer/polymer#^3.0.0 * @types/node#^10.1.0 * bra-ket#0.0.4 * templ-mount#0.0.1 * xtal-latx#0.0.1

xtal-material version 0.0.11
### Dependencies * @polymer/polymer#^3.0.0 * @types/node#^10.1.0 * bra-ket#0.0.4 * templ-mount#0.0.1 * xtal-latx#0.0.1

xtal-material version 0.0.12
### Dependencies * @polymer/polymer#^3.0.0 * @types/node#^10.1.0 * bra-ket#0.0.4 * templ-mount#0.0.1 * xtal-latx#0.0.5

xtal-material version 0.0.13
### Dependencies * @polymer/polymer#^3.0.0 * @types/node#^10.1.0 * bra-ket#0.0.4 * templ-mount#0.0.1 * xtal-latx#0.0.5

xtal-material version 0.0.9
### Dependencies * @polymer/polymer#^3.0.0 * @types/node#^10.1.0 * bra-ket#0.0.4 * templ-mount#0.0.1 * xtal-latx#0.0.1

xtal-material version 0.0.14
### Dependencies * @polymer/polymer#^3.0.0 * @types/node#^10.1.0 * bra-ket#0.0.5 * templ-mount#0.0.5 * xtal-latx#0.0.5

xtal-material version 0.0.15
### Dependencies * @polymer/polymer#^3.0.0 * @types/node#^10.1.0 * bra-ket#0.0.5 * templ-mount#0.0.5 * xtal-latx#0.0.5

xtal-material version 0.0.16
### Dependencies * @polymer/polymer#^3.0.0 * @types/node#^10.1.0 * bra-ket#0.0.5 * templ-mount#0.0.5 * xtal-latx#0.0.5

xtal-material version 0.0.17
### Dependencies * @polymer/polymer#^3.0.0 * @types/node#^10.1.0 * bra-ket#0.0.5 * templ-mount#0.0.5 * xtal-latx#0.0.5

xtal-material version 0.0.18
### Dependencies * @polymer/polymer#^3.0.0 * @types/node#^10.1.0 * bra-ket#0.0.5 * templ-mount#0.0.5 * xtal-latx#0.0.5

xtal-material version 0.0.19
### Dependencies * @polymer/polymer#^3.0.0 * @types/node#^10.1.0 * bra-ket#0.0.5 * templ-mount#0.0.5 * xtal-latx#0.0.5

xtal-material version 0.0.20
### Dependencies * @polymer/polymer#^3.0.0 * @types/node#^10.1.0 * bra-ket#0.0.5 * templ-mount#0.0.5 * xtal-latx#0.0.11

xtal-material version 0.0.21
### Dependencies * @polymer/polymer#^3.0.0 * @types/node#^10.1.0 * bra-ket#0.0.5 * templ-mount#0.0.5 * xtal-latx#0.0.11

xtal-material version 0.0.22
### Dependencies * @polymer/polymer#^3.0.0 * @types/node#^10.1.0 * bra-ket#0.0.5 * templ-mount#0.0.5 * xtal-latx#0.0.11

xtal-material version 0.0.23
### Dependencies * bra-ket#0.0.5 * templ-mount#0.0.6 * xtal-latx#0.0.17

xtal-material version 0.0.24
### Dependencies * bra-ket#0.0.7 * templ-mount#0.0.11 * xtal-latx#0.0.17

xtal-material version 0.0.25
### Dependencies * bra-ket#0.0.7 * templ-mount#0.0.11 * xtal-latx#0.0.17

xtal-material version 0.0.26
### Dependencies * bra-ket#0.0.7 * templ-mount#0.0.11 * xtal-latx#0.0.17

xtal-material version 0.0.27
### Dependencies * bra-ket#0.0.7 * templ-mount#0.0.11 * xtal-latx#0.0.17

xtal-material version 0.0.28
### Dependencies * bra-ket#0.0.7 * templ-mount#0.0.11 * xtal-latx#0.0.17

xtal-material version 0.0.29
### Dependencies * bra-ket#0.0.8 * templ-mount#0.0.40 * xtal-latx#0.0.20

xtal-material version 0.0.30
### Dependencies * bra-ket#0.0.9 * templ-mount#0.0.40 * xtal-latx#0.0.26

xtal-material version 0.0.31
### Dependencies * bra-ket#0.0.9 * templ-mount#0.0.40 * xtal-latx#0.0.37

xtal-material version 0.0.32
### Dependencies * bra-ket#0.0.9 * templ-mount#0.0.46 * xtal-latx#0.0.88

xtal-material version 0.0.33
### Dependencies * bra-ket#0.0.9 * templ-mount#0.0.46 * xtal-latx#0.0.88

xtal-material version 0.0.34
### Dependencies * bra-ket#0.0.9 * templ-mount#0.0.46 * xtal-latx#0.0.88

xtal-material version 0.0.35
### Dependencies * bra-ket#0.0.9 * templ-mount#0.0.46 * xtal-latx#0.0.88

xtal-material version 0.0.36
### Dependencies * bra-ket#0.0.9 * templ-mount#0.0.46 * xtal-latx#0.0.88

xtal-material version 0.0.37
### Dependencies * bra-ket#0.0.9 * templ-mount#0.0.46 * xtal-latx#0.0.88

xtal-material version 0.0.38
### Dependencies * bra-ket#0.0.9 * templ-mount#0.0.46 * xtal-latx#0.0.88

xtal-material version 0.0.39
### Dependencies * bra-ket#0.0.9 * templ-mount#0.0.46 * xtal-latx#0.0.88

xtal-material version 0.0.40
### Dependencies * bra-ket#0.0.9 * templ-mount#0.0.46 * xtal-latx#0.0.88

xtal-material version 0.0.41
### Dependencies * trans-render#0.0.75 * xtal-element#0.0.27 * event-switch#0.0.12

xtal-material version 0.0.42
### Dependencies * trans-render#0.0.75 * xtal-element#0.0.27 * event-switch#0.0.12

xtal-material version 0.0.43
### Dependencies * trans-render#0.0.75 * xtal-element#0.0.27 * event-switch#0.0.12

xtal-material version 0.0.44
### Dependencies * trans-render#0.0.75 * xtal-element#0.0.28 * event-switch#0.0.12

xtal-material version 0.0.45
### Dependencies * trans-render#0.0.75 * xtal-element#0.0.29 * event-switch#0.0.12

xtal-material version 0.0.46
### Dependencies * trans-render#0.0.75 * xtal-element#0.0.29 * event-switch#0.0.12

xtal-material version 0.0.47
### Dependencies * trans-render#0.0.75 * xtal-element#0.0.29 * event-switch#0.0.12

xtal-material version 0.0.48
### Dependencies * trans-render#0.0.75 * xtal-element#0.0.29 * event-switch#0.0.12

xtal-material version 0.0.49
### Dependencies * trans-render#0.0.75 * xtal-element#0.0.29 * event-switch#0.0.12

xtal-material version 0.0.50
### Dependencies * trans-render#0.0.75 * xtal-element#0.0.29 * event-switch#0.0.12

xtal-material version 0.0.51
### Dependencies * trans-render#0.0.75 * xtal-element#0.0.29 * event-switch#0.0.12

xtal-material version 0.0.52
### Dependencies * trans-render#0.0.75 * xtal-element#0.0.29 * event-switch#0.0.12

xtal-material version 0.0.53
### Dependencies * trans-render#0.0.75 * xtal-element#0.0.29 * event-switch#0.0.12

xtal-material version 0.0.54
### Dependencies * trans-render#0.0.84 * xtal-element#0.0.42 * event-switch#0.0.12

xtal-material version 0.0.55
### Dependencies * trans-render#0.0.84 * xtal-element#0.0.42 * event-switch#0.0.12

xtal-material version 0.0.56
### Dependencies * trans-render#0.0.84 * xtal-element#0.0.42 * event-switch#0.0.12

xtal-material version 0.0.57
### Dependencies * trans-render#0.0.95 * xtal-element#0.0.44 * event-switch#0.0.12

xtal-material version 0.0.58
### Dependencies * trans-render#0.0.99 * xtal-element#0.0.50 * event-switch#0.0.12

xtal-material version 0.0.59
### Dependencies * trans-render#0.0.102 * xtal-element#0.0.54 * event-switch#0.0.12

xtal-material version 0.0.60
### Dependencies * trans-render#0.0.110 * xtal-element#0.0.58 * event-switch#0.0.12

xtal-material version 0.0.61
### Dependencies * trans-render#0.0.110 * xtal-element#0.0.58 * event-switch#0.0.12