import{html,PolymerElement}from"../../../../@polymer/polymer/polymer-element.js";import"../../../../@polymer/polymer/lib/elements/dom-if.js";import{SimpleColors}from"../../simple-colors.js";import"../simple-colors-picker.js";class SimpleColorsPickerDemo extends SimpleColors{static get template(){return html`
      <style is="custom-style" include="simple-colors">
        :host {
          display: block;
          --simple-picker-selected-option-outline: 2px dashed black;
          --simple-picker-active-option-outline: 2px solid black;
        }
        :host([hidden]) {
          display: none;
        }
        :host #controls {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0 15px;
        }
        :host #controls label {
          margin-right: 5px;
        }
        :host .slot {
          margin: 15px 0;
        }
      </style>
      <div id="controls">
        <p>
          <label>Pick a Theme: </label>
          <simple-picker id="theme" on-change="_handleThemeChange"></simple-colors-picker>
        </p>
        <p>
          <label>Pick an Accent Color: </label>
          <simple-colors-picker id="color" on-change="_handleColorChange"></simple-colors-picker>
        </p>
      </div>
      <div class="slot"><slot></slot></div>
    `}static get properties(){return{}}static get behaviors(){return[SimpleColors]}static get tag(){return"simple-colors-picker-demo"}_handleThemeChange(){this.dark=this.$.theme.value}_handleColorChange(){this.accentColor=this.$.color.value}ready(){super.ready();this.$.theme.options=[[{alt:"light",style:"color: black; background-color: #fff;",value:!1}],[{alt:"dark",style:"color: white; background-color: #444;",value:"dark"}]]}connectedCallback(){super.connectedCallback()}}export{SimpleColorsPickerDemo};window.customElements.define(SimpleColorsPickerDemo.tag,SimpleColorsPickerDemo);