text: import{html,PolymerElement}from"../../../../@polymer/polymer/polymer-element.js";import{SimpleColors}from"../../simple-colors.js";class simpleColorsSwatchInfo extends SimpleColors{static get template(){return html`
        <style is="custom-style" include="simple-colors">
          :host {
            display: block;
            margin: 15px 0;
          }
          :host([hidden]) {
            display: none;
          }
          :host table {
            width: 100%;
            border: 1px solid black;
            border-radius: 3px;
            border-collapse: collapse;
            margin: 0 0 15px;
          }
          :host table caption {
            font-weight: bold;
            background-color: #222;
            color: white;
          }
          :host table th {
            background-color: #e0e0e0;
          }
          :host table caption,
          :host table th,
          :host table td {
            padding: 5px;
            border: 1px solid black;
            text-align: left;
            line-height: 160%;
          }
          :host table td span {
            padding: 5px; 
            white-space: nowrap;
            margin: 5px 0;
          }
        </style>
        <table summary="Each row represents a CSS variable or class with a description of what it does without the dark attribute and with the attribute.">
          <caption>
            CSS Variables and Classes for [[swatchName]]
          </caption>
          <thead>
            <tr>
              <th scope="col">Variable or Class Name</th>
              <th scope="col">Color</th>
              <th scope="col">With <tt>dark</tt> Attribute</th>
            </tr>
          <thead>
          <tbody>
            <tr>
              <th scope="row">
                --simple-colors-default-theme-[[swatchName]]
              </th>
              <td style$="[[bg]]">default color</td>
              <td style$="[[inverseBg]]">inverted color</td>
            </tr>
            <tr>
              <th scope="row">
                --simple-colors-fixed-theme-[[swatchName]]
              </th>
              <td style$="[[bg]]">default color</td>
              <td style$="[[bg]]">fixed color</td>
            </tr>
            <tr>
              <th scope="row">
                <tt>.simple-colors-default-theme-[[swatchName]]</tt>
              </th>
              <td style$="[[bg]]">default background color</td>
              <td style$="[[inverseBg]]">inverted background color</td>
            </tr>
            <tr>
              <th scope="row">
                <tt>.simple-colors-fixed-theme-[[swatchName]]</tt>
              </th>
              <td style$="[[bg]]">default background color</td>
              <td style$="[[bg]]">fixed background color</td>
            </tr>
            <tr>
              <th scope="row">
                <tt>.simple-colors-default-theme-[[swatchName]]-text</tt>
              </th>
              <td style$="[[text]]">default text color</td>
              <td style$="[[inverseText]]">inverted text color</td>
            </tr>
            <tr>
              <th scope="row">
                <tt>.simple-colors-fixed-theme-[[swatchName]]-text</tt>
              </th>
              <td style$="[[text]]">default text color</td>
              <td style$="[[text]]">fixed text color</td>
            </tr>
            <tr>
              <th scope="row">
                <tt>.simple-colors-default-theme-[[swatchName]]-border</tt>
              </th>
              <td>
                <div>
                  <span style$="[[border]]"> default border color</span>
                </div>
              </td>
              <td>
                <div>
                  <span style$="[[inverseBorder]]">inverted border color</span>
                </div>
              </td>
            </tr>
            <tr>
              <th scope="row">
                <tt>.simple-colors-fixed-theme-[[swatchName]]-border</tt>
              </th>
              <td>
                <div style$="[[border]]">
                  default border color
                </div>
              </td>
              <td>
                <div style$="[[border]]">
                  fixed border color
                </div>
              </td>
            </tr>
          </tbody>
        </table>
        
        <table summary="A list of colors that meet WCAG 2.0 AA contrast requirements. Each contains all the contrasting shades for a given color, based on whether or not the text is regular or large.">
          <caption>WCAG 2.0 AA Contrast with [[swatchName]]</caption>
          <thead>
            <tr>
              <th scope="col">Color Name</th>
              <th scope="col">Regular Text</th>
              <th scope="col">Large Text*</th>
            </tr>
          </thead>
          <tbody>
            <template is="dom-repeat" items="[[_getOptions(colors)]]" as="color">
              <tr>
                <th scope="row">[[color]]</th>
                <td>
                  <template is="dom-repeat" items="[[_getAa(swatchId,color)]]" as="contrast">
                    <span class="contrast" style$="[[_getContrastBg(color,contrast)]]">[[color]]-[[contrast]]</span>
                  </template>
                </td>
                <td>
                  <template is="dom-repeat" items="[[_getAaLarge(swatchId,color)]]" as="contrast">
                    <span class="contrast" style$="[[_getContrastBg(color,contrast)]]">[[color]]-[[contrast]]</span>
                  </template>
                </td>
              </tr>
            </template>
          </tbody>
        </table>
        <p><small>* Large text is defined as bold text at least 14pt or normal text at least 18pt</small></p>
      `}static get properties(){return{swatchId:{name:"swatchId",type:"String",value:"grey_0",reflectToAttribute:!0},swatchName:{name:"swatchName",type:"String",value:"grey-1",reflectToAttribute:!0},bg:{name:"bg",type:"String",computed:"_getBg(swatchId)"},inverseBg:{name:"inverseBg",type:"String",computed:"_getInverseBg(swatchId)"},text:{name:"text",type:"String",computed:"_getText(swatchId)"},inverseText:{name:"inverseText",type:"String",computed:"_getInverseText(swatchId)"},border:{name:"border",type:"String",computed:"_getBorder(swatchId)"},inverseBorder:{name:"inverseBorder",type:"String",computed:"_getInverseBorder(swatchId)"}}}static get behaviors(){return[SimpleColors]}static get tag(){return"simple-colors-swatch-info"}connectedCallback(){super.connectedCallback()}ready(){super.ready()}_getAa(swatchId,color,aaLarge=!1){let data=swatchId.split("_"),index=parseInt(data[1]);return this.getContrastingShades(!1,data[0],index,color)}_getAaLarge(swatchId,color){return this._getAa(swatchId,color,!0)}_getBg(swatchId,inverse=!1){let colors=this._getColors(swatchId,inverse);return"background: "+colors[0]+"; color: "+colors[1]+";"}_getBorder(swatchId,inverse=!1){let colors=this._getColors(swatchId,inverse);return"border: 3px solid "+colors[0]+"; padding: 3px;"}_getInverseBg(swatchId){return this._getBg(swatchId,!0)}_getInverseBorder(swatchId){return this._getBorder(swatchId,!0)}_getInverseText(swatchId){return this._getText(swatchId,!0)}_getOptions(obj){return Object.keys(obj)}_getText(swatchId,inverse=!1){let colors=this._getColors(swatchId,inverse);return"color: "+colors[0]+"; background: "+colors[1]+";"}_getContrastBg(color,shade){return this._getBg(color+"_"+(parseInt(shade)-1))}_getColors(swatchId,inverse=!1){let data=swatchId.split("_"),index=inverse?11-parseInt(data[1]):parseInt(data[1]);return[this.colors[data[0]][index],this.colors.grey[5<index?0:11]]}}export{simpleColorsSwatchInfo};window.customElements.define(simpleColorsSwatchInfo.tag,simpleColorsSwatchInfo);