import{LitElement as o,html as e,css as t}from"lit";import{i18n as c}from"./translation.js";import"./cc-icon.js";import"./cc-img.js";import"./cc-toggle.js";import{CcAddonOptionChangeEvent as i}from"./components/cc-addon-option/cc-addon-option.events.js";class n extends o{static get properties(){return{enabled:{type:Boolean,reflect:!0},heading:{type:String},icon:{type:Object},logo:{type:String}}}constructor(){super(),this.enabled=!1,this.icon=null,this.logo=null,this.heading=null}_onToggleOption({detail:o}){this.enabled="ENABLED"===o,this.dispatchEvent(new i(this.enabled))}render(){const o=[{label:c("cc-addon-option.disabled"),value:"DISABLED"},{label:c("cc-addon-option.enabled"),value:"ENABLED"}];return e`
      ${null!=this.icon?e` <cc-icon class="icon" .icon=${this.icon}></cc-icon> `:""}
      ${null!=this.logo&&null==this.icon?e` <cc-img class="logo" src=${this.logo}></cc-img> `:""}
      <div class="option-main">
        <div class="option-name">${this.heading}</div>
        <slot class="option-details"></slot>
        <cc-toggle
          .choices=${o}
          value=${this.enabled?"ENABLED":"DISABLED"}
          @cc-select=${this._onToggleOption}
        ></cc-toggle>
      </div>
    `}static get styles(){return[t`
        :host {
          background-color: var(--cc-color-bg-default, #fff);
          border-radius: var(--cc-border-radius-default, 0.25em);
          display: grid;
          grid-gap: 1em;
          grid-template-columns: min-content 1fr;
          padding: 1em;
        }

        ::slotted(.option-warning) {
          color: var(--cc-color-text-weak);
          font-style: italic;
        }

        .option-main {
          display: grid;
          grid-gap: 0.5em;
        }

        .option-name {
          font-weight: bold;
          line-height: 1.6;
          min-height: 1.6em;
        }

        :host(:not([enabled])) {
          background-color: var(--cc-color-bg-neutral);
          border: 2px solid var(--cc-color-border-neutral-weak, #eee);
        }

        :host([enabled]) {
          border: 2px solid var(--cc-color-bg-success, #000);
        }

        .logo {
          border-radius: var(--cc-border-radius-default, 0.25em);
          height: 1.6em;
          width: 1.6em;
        }

        .icon {
          --cc-icon-color: #012a51;
          --cc-icon-size: 28px;
        }

        cc-toggle {
          justify-self: end;
          margin-top: 0.5em;
        }

        :host([enabled]) cc-toggle {
          --cc-toggle-color: var(--cc-color-bg-success, #000);
        }

        .option-details {
          line-height: 1.5;
        }
      `]}}window.customElements.define("cc-addon-option",n);export{n as CcAddonOption};
//# sourceMappingURL=cc-addon-option.js.map
