import{html as e,css as t}from"lit";import{C as i}from"./cc-form-control-element.abstract-23bf2c49.js";import{accessibilityStyles as o}from"./styles/accessibility.js";import{i18n as r}from"./translation.js";import"./cc-zone-card.js";import{ifDefined as n}from"lit/directives/if-defined.js";import{iconRemixEarthLine as c}from"./assets/cc-remix.icons.js";import{dispatchCustomEvent as s}from"./lib/events.js";class a extends i{static get properties(){return{...super.properties,value:{type:String},zonesSections:{type:Array,attribute:"zones-sections"}}}constructor(){super(),this.zonesSections=[],this.value=null}_onZoneSelect(e){this.value=e.target.value,s(this,"cc-zone-picker:input",e.target.value)}render(){return e`<fieldset @change=${this._onZoneSelect}><legend><cc-icon class=zone-legend-icon .icon=${c} size=lg></cc-icon><span class=zone-legend-text>${r("cc-zone-picker.legend")}</span></legend><div class=zone-section>${this.zonesSections.map(((e,t)=>this._renderZoneSection(e,t)))}</div></fieldset>`}_renderZoneSection(t,i){const o=null!=t&&"title"in t,r=o?`section-header-${i}`:null;return e`${o?e`<div class=zone-section-title id=${n(r)}>${t.title}</div>`:""}<div class=form-controls>${t.zones.map((e=>this._renderZoneCard(e,e.code===this.value,r)))}</div>`}_renderZoneCard(t,i,o){return e`<input class=visually-hidden type=radio name=zone .value=${t.code} ?disabled=${t.disabled} ?checked=${i} id=${t.code} aria-describedby=${n(o)}> <label for=${t.code}><cc-zone-card ?selected=${i} ?disabled=${t.disabled} name=${t.name} country=${t.country} code=${t.code} flag-url=${t.flagUrl} .images=${t.images}></cc-zone-card></label>`}static get styles(){return[o,t`:host{display:block;--fixed-margin:34px}legend{display:flex;gap:.25em}.form-controls{display:grid;gap:1em;grid-template-columns:repeat(auto-fill,minmax(12.5em,1fr));margin-block-start:.5em;margin-inline-start:var(--fixed-margin)}.zone-legend-icon{--cc-icon-color:var(--cc-color-text-primary);align-self:center}.zone-legend-text{color:var(--cc-color-text-primary-strongest);font-family:var(--cc-ff-form-legend),inherit;font-size:1.625em;font-weight:500}.zone-section-title{color:var(--cc-color-text-primary-strongest);font-family:var(--cc-ff-form-legend),inherit;font-size:1.15em;margin-block-start:1em;margin-inline-start:var(--fixed-margin)}.form-controls+.zone-section-title{margin-block-start:2em}fieldset{border:none;margin:0;padding:0}cc-zone-card{height:100%}input[type=radio]:focus-visible+label cc-zone-card{border-radius:var(--cc-border-radius-default,.25em);outline:var(--cc-focus-outline,#000 solid 2px);outline-offset:var(--cc-focus-outline-offset,2px)}`]}}window.customElements.define("cc-zone-picker",a);export{a as CcZonePicker};
//# sourceMappingURL=cc-zone-picker.js.map
