import{html as e,css as l}from"lit";import{iconRemixServerLine as t}from"./assets/cc-remix.icons.js";import{dispatchCustomEvent as n}from"./lib/events.js";import{C as a}from"./cc-form-control-element.abstract-aaa92b97.js";import{i18n as s}from"./i18n.js";import{accessibilityStyles as i}from"./styles/accessibility.js";import"./cc-plan-item.js";class r extends a{static get properties(){return{...super.properties,legend:{type:String},plans:{type:Array},readonly:{type:Boolean},value:{type:String}}}constructor(){super(),this.legend=null,this.plans=[],this.readonly=!1,this.value=null,this._currentPlanId=null,this._currentRelatedPlans=[]}set errorMessage(e){}_findPlan(e,l){const t=e.find((e=>null==e.relatedPlans||0===e.relatedPlans.length?e.id===l:e.relatedPlans.find((e=>e.id===l))));if(null!=t)return t;const n=this.plans.find((e=>e.id===l));return null!=n?n:e[0]}_onChangePlan(e){const l=this._findPlan(this.plans,e.target.value);this._currentPlanId=e.target.value,null!=l.relatedPlans&&l.relatedPlans.length>0?(this.value=l.relatedPlans[0].id,this._currentRelatedPlans=l.relatedPlans):(this.value=this._currentPlanId,this._currentRelatedPlans=[]),n(this,"input",this.value)}_onChangeRelatedPlan(e){this.value=e.target.value,n(this,"input",this.value)}willUpdate(e){if(e.has("plans")&&e.has("value")){const e=this._findPlan(this.plans,this.value);if(null!=e.relatedPlans&&e.relatedPlans.length>0){const l=e.relatedPlans.some((e=>e.id===this.value));this.value=l?this.value:e.relatedPlans[0].id}else this.value=e.id;this._currentPlanId=e.id,this._currentRelatedPlans=e.relatedPlans}}render(){const l=this.legend??s("cc-plan-picker.legend");return e`<fieldset @input=${this._onChangePlan}><legend><cc-icon class=plan-legend-icon .icon=${t} size=lg></cc-icon><span class=plan-legend-text>${l}</span></legend><div class=form-controls>${this.plans.map((e=>this._renderPlan(e,this.name,this._currentPlanId)))}</div></fieldset>${null!=this._currentRelatedPlans&&this._currentRelatedPlans.length>0?e`<fieldset @input=${this._onChangeRelatedPlan}><legend><cc-icon class=plan-legend-icon .icon=${t} size=lg></cc-icon><span class=plan-legend-text>${s("cc-plan-picker.legend.customize")}</span></legend><div class=form-controls>${this._currentRelatedPlans.map((e=>this._renderPlan(e,"related-plan",this.value)))}</div></fieldset>`:""}`}_renderPlan(l,t,n){const a=n===l.id,s=l.disabled||this.readonly&&!a;return e`<div><input class=visually-hidden type=radio name=${t} .value=${l.id} .disabled=${s} .checked=${a} id=${l.id}> <label for=${l.id}><cc-plan-item name=${l.name} ?disabled=${s} .details=${l.details} .selected=${a} .badge=${l.badge}></cc-plan-item></label></div>`}static get styles(){return[i,l`:host{display:block}legend{display:flex;gap:.25em}fieldset{border:none;margin:0;padding:0}input[type=radio]:focus-visible+label cc-plan-item{border-radius:var(--cc-border-radius-default,.25em);outline:var(--cc-focus-outline,#000 solid 2px);outline-offset:var(--cc-focus-outline-offset,2px)}.plan-legend-icon{--cc-icon-color:var(--cc-color-text-primary);align-self:center}.plan-legend-text{color:var(--cc-color-text-primary-strongest);font-family:var(--cc-ff-form-legend),inherit;font-size:1.625em;font-weight:500}.form-controls{display:grid;gap:1em;grid-template-columns:repeat(auto-fill,minmax(13em,1fr));margin-block-start:.5em;margin-inline-start:34px}`]}}window.customElements.define("cc-plan-picker",r);export{r as CcPlanPicker};
//# sourceMappingURL=cc-plan-picker.js.map
