Update l2t-paper-color.html

Link2Twenty · Jun 2, 2017 · 8113d8f · 8113d8f
1 parent 40c9db7
commit 8113d8f
Showing 1 changed file with 137 additions and 9 deletions.
diff --git a/l2t-paper-color.html b/l2t-paper-color.html
@@ -1,31 +1,159 @@
 <link rel="import" href="../polymer/polymer-element.html">
+<link rel="import" href="../paper-input/paper-input.html">
+<link rel="import" href="../iron-icons/iron-icons.html">
+<link rel="import" href="../iron-icons/image-icons.html">
 <link rel="import" href="l2t-paper-color-dialog.html">
 
+<!--
+l2t-paper-color is a polymer element to display a color selector in a paper style
+
+### Example:
+
+    <l2t-paper-color></l2t-paper-color>
+
+### Styling
+The following custom properties and mixins are available for styling:
+
+Custom property | Description | Default
+----------------|-------------|----------
+`--l2t-paper-color-width` | width of input | `120pxr`
+`--l2t-paper-color-indicator-icon` | style for color indicator (programmatically set) | `transparent`
+`--l2t-paper-color-indicator-icon-display` | display style for color indicator (programmatically set) | `none`
+
+@group l2t Paper Elements
+@element l2t-paper-color
+@demo demo/index.html
+-->
+
 <dom-module id="l2t-paper-color">
   <template>
     <style>
       :host {
         display: block;
+        width: var(--l2t-paper-color-width, 120px);
+      }
+      iron-icon[slot=prefix] {
+        fill: var(--l2t-paper-color-indicator-icon, transparent);
+        display: var(--l2t-paper-color-indicator-icon-display, none);;
       }
     </style>
+    <paper-input
+      on-focus="_openDialog"
+      label$="[[label]]"
+      disabled$="[[disabled]]"
+      readonly$="[[readonly]]"
+      required$="[[required]]"
+      value$="[[value]]"
+      no-label-float$="[[noLabelFloat]]"
+      always-float-label$="[[alwaysFloatLabel]]">
+      <iron-icon icon="label" slot="prefix"></iron-icon>
+      <iron-icon icon="image:palette" slot="suffix"></iron-icon>
+    </paper-input>
+    <l2t-paper-color-dialog
+      colors$="[[colors]]"
+      hide-advanced$="[[hideAdvanced]]">
+    </l2t-paper-color-dialog>
+
   </template>
 
   <script>
-    /**
-     * `l2t-paper-color`
-     * Dialogue box in a paper style for selecting colors
-     *
-     * @customElement
-     * @polymer
-     * @demo demo/index.html
-     */
     class L2tPaperColor extends Polymer.Element {
       static get is() { return 'l2t-paper-color'; }
       static get properties() {
         return {
-
+          /**
+          * label: string to store hex color value
+          */
+          label: {
+            type: String,
+            value: "Color select"
+          },
+          /**
+          * disabled: boolean input diabled
+          */
+          disabled: {
+            type: Boolean,
+            value: false
+          },
+          /**
+          * readonly: boolena input read only
+          */
+          readonly: {
+            type: Boolean,
+            value: false
+          },
+          /**
+          * value: string to value of input
+          */
+          value: {
+            type: String,
+            observer: "_colorUpdate"
+          },
+          /**
+          * no-label-float: boolean remove label when value contains text
+          */
+          noLabelFloat: {
+            type: Boolean,
+            value: false
+          },
+          /**
+          * always-float-label: boolean label always in float position
+          */
+          alwaysFloatLabel: {
+            type: Boolean,
+            value: false
+          },
+          /**
+          * colors: array to store list of colors
+          */
+          colors: {
+            type: Array
+          },
+          /**
+          * hideAdvanced: boolean to hide advance button
+          */
+          hideAdvanced: {
+            type: Boolean,
+            value: false
+          }
         };
       }
+      /**
+      * _colorUpdate: updates styles to match value
+      */
+      _colorUpdate() {
+        this.updateStyles({
+          '--l2t-paper-color-indicator-icon': this.value,
+          '--l2t-paper-color-indicator-icon-display': 'block',
+        });
+      }
+      /**
+      * _dialogHandler: if dialog is confirmed update value
+      */
+      _dialogHandler(e) {
+        if(e.detail) {
+          this.value = this.shadowRoot.querySelector('l2t-paper-color-dialog').color;
+        } else {
+          return
+        }
+      }
+      /**
+      * _openDialog: open dialog and set appropriate attributes
+      */
+      _openDialog() {
+        if(!this.readonly) {
+          var colorDialog = this.shadowRoot.querySelector('l2t-paper-color-dialog');
+          if(this.value) {
+            colorDialog.color = this.value;
+          }
+          colorDialog.setBasic();
+          colorDialog.open();
+        }
+      }
+      ready(){
+        super.ready();
+        this.addEventListener("paper-color-dialog-closed", function(e){this._dialogHandler(e)}, false);
+      }
     }
 
     window.customElements.define(L2tPaperColor.is, L2tPaperColor);