import{LitElement as t,html as o,css as n}from"lit";import{i18n as i}from"./translation.js";import"./cc-addon-option.js";import"./cc-block.js";import"./cc-button.js";import"./cc-link.js";import{CcAddonOptionFormSubmitEvent as e}from"./components/cc-addon-option-form/cc-addon-option-form.events.js";class c extends t{static get properties(){return{heading:{type:String},options:{type:Array}}}constructor(){super(),this.options=null,this.heading=null,this._optionsStates={}}_onSubmit(){this.options.forEach((t=>{null==this._optionsStates[t.name]&&(this._optionsStates[t.name]=t.enabled||!1)})),this.dispatchEvent(new e(this._optionsStates))}_onOptionChange(t){return o=>{this._optionsStates[t]=o.detail}}render(){return o`
      <cc-block>
        <div slot="header-title">${this.heading}</div>
        <div slot="content-body" class="content">
          <slot name="description"></slot>
          ${this.options.map((t=>{const n=t.enabled||!1;return o` <cc-addon-option
              heading="${t.title}"
              .icon="${t.icon}"
              logo="${t.logo}"
              ?enabled=${n}
              @cc-addon-option-change=${this._onOptionChange(t.name)}
            >
              ${t.description}
            </cc-addon-option>`}))}
        </div>
        <div slot="content-footer" class="button-bar">
          <cc-button primary @cc-click=${this._onSubmit}> ${i("cc-addon-option-form.confirm")} </cc-button>
        </div>
      </cc-block>
    `}static get styles(){return[n`
        :host {
          display: block;
        }

        .content {
          display: grid;
          gap: 1em;
        }

        .button-bar {
          display: grid;
          justify-content: flex-end;
        }

        [name='description'] {
          line-height: 1.5;
        }

        .option-warning {
          display: grid;
          gap: 0.5em;
          grid-template-columns: min-content 1fr;
          text-align: left;
        }

        .option-warning p {
          margin: 0;
        }

        .icon-warning {
          align-self: center;
          color: var(--cc-color-text-warning);

          --cc-icon-size: 1.25em;
        }
      `]}}window.customElements.define("cc-addon-option-form",c);export{c as CcAddonOptionForm};
//# sourceMappingURL=cc-addon-option-form.js.map
