import{html as e,css as o}from"lit";import{ifDefined as i}from"lit/directives/if-defined.js";import{iconRemixEarthLine as t}from"./assets/cc-remix.icons.js";import{C as n}from"./form-utils-4685920e.js";import{accessibilityStyles as r}from"./styles/accessibility.js";import{i18n as c}from"./translation.js";import"./cc-icon.js";import"./cc-img.js";import"./cc-picker-option.js";import{CcSelectEvent as s}from"./components/common.events.js";class l extends n{static get properties(){return{...super.properties,disabled:{type:Boolean},readonly:{type:Boolean},value:{type:String},zonesSections:{type:Array,attribute:"zones-sections"}}}constructor(){super(),this.disabled=!1,this.readonly=!1,this.value=null,this.zonesSections=[]}willUpdate(e){e.has("value")&&null==this.value&&(this.value=this.zonesSections?.[0]?.zones?.[0]?.code)}set errorMessage(e){}_onZoneSelect(e){this.readonly||(this.value=e.target.value,this.dispatchEvent(new s(this.value)))}render(){return e`
      <fieldset @input="${this._onZoneSelect}">
        <legend>
          <cc-icon class="zone-legend-icon" .icon="${t}" size="lg"></cc-icon>
          <span class="zone-legend-text"> ${c("cc-zone-picker.legend")} </span>
        </legend>
        <div class="zone-section">
          ${this.zonesSections.map(((e,o)=>this._renderZoneSection(e,o)))}
        </div>
      </fieldset>
    `}_renderZoneSection(o,t){const n=null!=o&&"title"in o,r=n?`section-header-${t}`:null;return e`
      ${n?e` <div class="zone-section-title" id="${i(r)}">${o.title}</div> `:""}
      <div class="form-controls">
        ${o.zones.map((e=>this._renderZoneCard(e,e.code===this.value,r)))}
      </div>
    `}_renderZoneCard(o,t,n){const{code:r}=o,c=o.disabled||this.disabled,s=!c&&this.readonly;return e`
      <input
        class="visually-hidden"
        type="radio"
        name="zone"
        .value="${r}"
        ?disabled=${c||s&&!t}
        .checked="${t}"
        id="${r}"
        aria-describedby="${i(n)}"
      />
      <label for="${r}" class="option-wrapper">
        <cc-picker-option ?selected="${t}" ?readonly="${s}" ?disabled="${c}">
          ${this._renderZoneBody(o)} ${this._renderZoneFooter(o)}
        </cc-picker-option>
      </label>
    `}_renderZoneBody({code:o,name:i}){return e`
      <div slot="body">
        <div class="option-body--code">${o}</div>
        <div class="option-body--name">${i}</div>
      </div>
    `}_renderZoneFooter({country:o,countryCode:i,flagUrl:t,images:n}){return e`
      <div slot="footer">
        ${t?e`
              <cc-img
                src=${t}
                a11y-name="${c("cc-zone-picker.alt.country-name",{code:i,name:o})}"
              ></cc-img>
            `:""}
        ${n.map((o=>e`<cc-img src="${o.url}" a11y-name="${o.alt}"></cc-img>`))}
      </div>
    `}static get styles(){return[r,o`
        /* region global */
        :host {
          display: block;
        }

        fieldset {
          border: none;
          margin: 0;
          padding: 0;
        }
        /* endregion */

        /* region legend layout & style */
        legend {
          display: flex;
          gap: 0.25em;
          margin-block-end: var(--cc-form-label-gap, 0.35em);
        }

        .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;
        }
        /* endregion */

        /* region global layout */
        .form-controls {
          display: grid;
          gap: 1em;
          grid-template-columns: repeat(auto-fill, minmax(12.5em, 1fr));
          margin-inline-start: var(--cc-form-controls-indent, 34px);
        }
        /* endregion */

        /* region zone section title */
        .zone-section-title {
          color: var(--cc-color-text-primary-strongest);
          font-family: var(--cc-ff-form-legend), inherit;
          font-size: 1.15em;
          margin-block-end: 0.25em;
          margin-inline-start: var(--cc-form-controls-indent, 34px);
        }

        .form-controls + .zone-section-title {
          margin-block-start: 1em;
        }
        /* endregion */

        /* region cc-picker-option */
        input[type='radio']:focus-visible + label cc-picker-option {
          border-radius: var(--cc-border-radius-default, 0.25em);
          outline: var(--cc-focus-outline, #000 solid 2px);
          outline-offset: var(--cc-focus-outline-offset, 2px);
        }

        .option-wrapper {
          display: inline-flex;
        }

        .option-wrapper cc-picker-option {
          flex: 1 1 auto;
        }

        cc-picker-option [slot='body'] {
          margin-inline: -0.25em;
        }

        cc-picker-option .option-body--code {
          color: var(--cc-color-text-weak);
          font-size: 0.875em;
          line-height: 1.125;
          padding-inline-start: 0.125em;
        }

        cc-picker-option .option-body--name {
          font-size: 1.5em;
          line-height: 1.125;
        }

        cc-picker-option [slot='footer'] {
          column-gap: 0.5em;
          display: flex;
          padding-block: 0.75em;
        }

        cc-picker-option [slot='footer'] > cc-img {
          --cc-img-fit: contain;

          height: 1.5rem;
          width: 1.5rem;
        }

        cc-picker-option[disabled] [slot='footer'] cc-icon,
        cc-picker-option[disabled] [slot='footer'] cc-img {
          filter: grayscale(1);
          opacity: var(--cc-opacity-when-disabled, 0.65);
        }
        /* endregion */
      `]}}window.customElements.define("cc-zone-picker",l);export{l as CcZonePicker};
//# sourceMappingURL=cc-zone-picker.js.map
