import{LitElement as e,html as a,css as t}from"lit";import{classMap as r}from"lit/directives/class-map.js";import{iconCleverRam as o}from"./assets/cc-clever.icons.js";import{iconRemixCpuLine as c,iconRemixDatabase_2Fill as s}from"./assets/cc-remix.icons.js";import{skeletonStyles as i}from"./styles/skeleton.js";import{i18n as n}from"./translation.js";import"./cc-block.js";import"./cc-icon.js";import"./cc-notice.js";const d={cpus:c,vcpus:c,disk:s,memory:o,ram:o},l=["cpus","vcpus","memory","disk"],u=[{name:"??????",value:"????????"},{name:"????",value:"??"},{name:"?????",value:"????"},{name:"???????",value:"????????"}];class m extends e{static get properties(){return{state:{type:Object}}}constructor(){super(),this.state={type:"loading"}}_getFeatureName(e,a){return"disk"===e?n("cc-addon-features.feature-name.disk"):"nodes"===e?n("cc-addon-features.feature-name.nodes"):"memory"===e?n("cc-addon-features.feature-name.memory"):a}_getFeatureValue(e,a){return"dedicated"===e?n("cc-addon-features.feature-value.dedicated"):"no"===e?n("cc-addon-features.feature-value.no"):"yes"===e?n("cc-addon-features.feature-value.yes"):a}_sortFeatures(e){const a=e.slice(0);return a.sort(((e,a)=>{const t=l.indexOf(e.name.toLowerCase())+1||l.length+1,r=l.indexOf(a.name.toLowerCase())+1||l.length+1;return String(t).localeCompare(String(r),void 0,{numeric:!0})})),a}render(){const e="loading"===this.state.type,t=("loaded"===this.state.type?this.state.features:u).map((e=>{const a=e.name.toLowerCase(),t=e.value.toLowerCase();return{...e,icon:d[a],name:this._getFeatureName(a,e.name),value:this._getFeatureValue(t,e.value)}})),o=this._sortFeatures(t),c="loaded"===this.state.type||e;return a`<cc-block><div slot=title>${n("cc-addon-features.title")}</div><div>${n("cc-addon-features.details")}</div>${"error"===this.state.type?a`<cc-notice intent=warning message=${n("cc-addon-features.loading-error")}></cc-notice>`:""} ${c?a`<div class=feature-list>${o.map((t=>a`<div class="${r({skeleton:e})} feature">${null!=t.icon?a`<div class=feature-icon><cc-icon size=lg class=feature-icon_img .icon=${t.icon}></cc-icon></div>`:""}<div class=feature-name>${t.name}</div><div class=feature-value>${t.value}</div></div>`))}</div>`:""}</cc-block>`}static get styles(){return[i,t`:host{display:block}.feature-list{--bdw:2px;--color:var(--cc-color-bg-primary);--padding:0.6em;display:flex;flex-wrap:wrap;gap:1em}.feature{background-color:var(--color);border:var(--bdw) solid var(--color);border-radius:calc(2 * var(--bdw));display:flex;flex-wrap:wrap}.feature-icon{align-items:center;display:inline-flex;margin-inline-start:var(--padding);width:1.3em}.feature-icon_img{--cc-icon-color:var(--cc-color-text-inverted)}.feature-name,.feature-value{box-sizing:border-box;flex:1 1 auto;font-weight:700;padding:calc(var(--padding)/ 2) var(--padding);text-align:center}.feature-name{color:var(--cc-color-text-inverted,#fff)}.skeleton .feature-name{color:var(--color)}.feature-value{background-color:var(--cc-color-bg-default,#fff);border-radius:var(--bdw);color:var(--color)}.skeleton .feature-value{color:#fff}`]}}window.customElements.define("cc-addon-features",m);export{m as CcAddonFeatures};
//# sourceMappingURL=cc-addon-features.js.map
