import{LitElement as e,html as t,css as o}from"lit";import{iconRemixCheckboxCircleFill as c}from"./assets/cc-remix.icons.js";import{i18n as r}from"./translation.js";import"./cc-icon.js";import"./cc-img.js";class i extends e{static get properties(){return{code:{type:String},country:{type:String},countryCode:{type:String,attribute:"country-code"},disabled:{type:Boolean,reflect:!0},flagUrl:{type:String,attribute:"flag-url"},images:{type:Array},name:{type:String},selected:{type:Boolean,reflect:!0}}}constructor(){super(),this.code=null,this.country=null,this.countryCode=null,this.disabled=!1,this.flagUrl=null,this.images=[],this.name=null,this.selected=!1}render(){return t`<div class=title><div class=zone-code>${this.code}</div><div class=zone-name>${this.name}</div></div><cc-icon class=icon-selected .icon=${c} size=lg></cc-icon><div class=thumbnails>${this.flagUrl?t`<cc-img class=flag src=${this.flagUrl} a11y-name=${r("cc-zone-card.alt.country-name",{code:this.countryCode,name:this.country})}></cc-img>`:""} ${this.images.map((e=>t`<cc-img src=${e.url} a11y-name=${e.alt}></cc-img>`))}</div>`}static get styles(){return[o`:host{border:2px solid var(--cc-color-border-neutral);border-radius:var(--cc-border-radius-default);display:flex;flex-direction:column;overflow:hidden;position:relative}.title{flex:1 1 auto;padding:1em 1em .75em}:host(:hover:not([disabled])){border-color:var(--cc-color-border-neutral-hovered)}:host(:not([selected],[disabled])){cursor:pointer}:host([selected]){border-color:var(--cc-color-bg-primary)}:host([selected]) .title .zone-code{color:var(--cc-color-text-primary-strong)}:host([selected]) .title .zone-name{color:var(--cc-color-text-primary-strongest)}:host([selected]) .icon-selected{display:block}:host([selected]) .thumbnails{background-color:var(--cc-color-bg-primary-weak)}:host([disabled]){border-color:var(--cc-color-border-neutral-disabled);opacity:var(--cc-opacity-when-disabled)}:host([disabled]) .zone-code{color:#fff}:host([disabled]) .thumbnails cc-icon,:host([disabled]) .thumbnails cc-img{filter:grayscale(1)}.zone-code{color:var(--cc-color-text-weak);font-size:.875em;line-height:1.125;padding-inline-start:.125em}.zone-name{font-size:1.5em;line-height:1.125}.icon-selected{--cc-icon-color:var(--cc-color-bg-primary);display:none;position:absolute;right:.5em;top:.5em}.thumbnails{align-items:center;background-color:var(--cc-color-bg-neutral);display:inline-flex;flex:0 0 auto;gap:.5em;padding:.75em 1.125em}.thumbnails>cc-img{--cc-img-fit:contain;height:1.5em;width:1.5em}`]}}window.customElements.define("cc-zone-card",i);export{i as CcZoneCard};
//# sourceMappingURL=cc-zone-card.js.map
