import{LitElement as t,html as e,css as a}from"lit";import{classMap as s}from"lit/directives/class-map.js";import{ifDefined as l}from"lit/directives/if-defined.js";import{getFlagUrl as o,getInfraProviderLogoUrl as r}from"./lib/remote-assets.js";import{skeletonStyles as i}from"./styles/skeleton.js";import{i18n as n}from"./translation.js";import"./cc-img.js";const c={name:"name",country:"????????????",countryCode:null,lon:0,lat:0,city:"??????????",tags:["????????","????????????"]};class d extends t{static get properties(){return{mode:{type:String,reflect:!0},state:{type:Object}}}constructor(){super(),this.mode="default",this.state={type:"loading"}}static getText(t){const{title:e,subtitle:a,infra:s}=d._getTextParts(t),l=[e,a].filter((t=>null!=t)).join(", ");return null!=s?`${l} (${s})`:l}static _getTextParts(t){if(t.tags.includes("scope:private")&&null!=t.displayName)return{title:t.displayName};const e=t.tags.find((t=>t.startsWith("infra:"))),a=e?.split(":")[1]??null;return{title:t.city,subtitle:n("cc-zone.country",{code:t.countryCode,name:t.country}),infra:a}}render(){const t="loading"===this.state.type,a="loaded"===this.state.type?this.state:c,{title:i,subtitle:n,infra:m}=d._getTextParts(a);return e`<cc-img class=flag ?skeleton=${t} src=${l(o(a.countryCode))} a11y-name=${l(a.countryCode)}></cc-img><div class=wrapper-details-logo><div class=wrapper-details><div class=details><span class="${s({skeleton:t})} title">${i}</span> <span class="${s({skeleton:t})} subtitle">${n}</span></div>${null!=m?e`<cc-img class="${s({skeleton:t})} infra-logo" src=${r(m)} a11y-name=${m}></cc-img>`:""}</div><div class=tag-list>${a.tags.map((e=>this._renderTag(e,t)))}</div></div>`}_renderTag(t,a){if(t.includes(":")){const[l,o]=t.split(":");return e`<span class="${s({skeleton:a})} tag"><span class=tag__category>${l}:</span> <span>${o}</span></span>`}return e`<span class="${s({skeleton:a})} tag">${t}</span>`}static get styles(){return[i,a`:host{--lh:1.5em;display:flex}:host([mode=small-infra]),:host([mode=small]){--lh:1em}.flag{border-radius:var(--cc-border-radius-small,.15em);box-shadow:0 0 3px rgb(0 0 0 / 40%);display:inline-block;height:var(--lh);margin-right:1em;width:2em}:host([mode=small-infra]) .flag,:host([mode=small]) .flag{margin-right:.5em;width:1.33em}.wrapper-details-logo{flex:1 1 0;min-height:var(--lh)}.wrapper-details{display:flex}.details{align-self:center;flex:1 1 0;line-height:var(--lh)}:host([mode=small-infra]) .subtitle,:host([mode=small-infra]) .title,:host([mode=small]) .subtitle,:host([mode=small]) .title{font-size:.8em}.title{font-weight:700}.subtitle{color:var(--cc-zone-subtitle-color,var(--cc-color-text-weak))}.infra-logo{--cc-img-fit:contain;height:var(--lh);margin-left:.5em;width:4em}:host([mode=small-infra]) .tag-list,:host([mode=small]) .infra-logo,:host([mode=small]) .tag-list{display:none}.tag-list{display:flex;flex-wrap:wrap;gap:.5em;margin-top:.1em}.tag{background-color:var(--cc-zone-tag-bgcolor,var(--cc-color-bg-soft,#eee));border:1px solid var(--cc-zone-tag-bdcolor,transparent);border-radius:var(--cc-border-radius-default,.25em);box-sizing:border-box;color:var(--cc-zone-tag-textcolor,var(--cc-color-text-default,#000));display:flex;font-family:var(--cc-zone-tag-font-family,var(--cc-ff-monospace));font-size:.8em;line-height:1.5;padding:var(--cc-zone-tag-padding,.1em .3em)}.tag__category{font-weight:var(--cc-zone-tag-category-font-weight,normal)}.skeleton{color:transparent!important}.skeleton:not(.tag){background-color:#bbb}`]}}window.customElements.define("cc-zone",d);export{d as CcZone};
//# sourceMappingURL=cc-zone.js.map
