<!DOCTYPE html>
<!--
Copyright (c) 2015 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.
-->

<link rel="import" href="/base/ui/color_scheme.html">

<!--
@fileoverview A component used to display a label preceded by a small square
filled with the label's associated color (as determined by
tr.b.ui.getColorIdForGeneralPurposeString).
-->
<polymer-element name="tr-b-ui-color-legend">
  <template>
    <style>
    :host {
      display: inline-block;
    }

    #square {
      font-size: 150%;  /* Make the square bigger. */
      line-height: 0%;  /* Prevent the square from increasing legend height. */
    }
    </style>
    <span id="square"></span>
    <span id="label"></span>
  </template>
  <script>
  'use strict';

  Polymer({
    ready: function() {
      var blackSquareCharCode = 9632;
      this.$.square.innerText = String.fromCharCode(blackSquareCharCode);
      this.label_ = undefined;
    },

    get label() {
      return this.label_;
    },

    set label(label) {
      this.label_ = label;

      if (this.label_ === undefined) {
        this.$.square.style.color = 'initial';
        this.$.label.innerText = '';
        return;
      }

      var paletteRaw = tr.b.ui.getRawColorPalette();
      var colorId = tr.b.ui.getColorIdForGeneralPurposeString(this.label_);
      var color = tr.b.ui.colorToRGBString(paletteRaw[colorId]);
      this.$.square.style.color = color;
      this.$.label.innerText = this.label_;
    }
  });
  </script>
</polymer-element>