import{LitElement as e,html as t,css as i}from"lit";import{classMap as s}from"lit/directives/class-map.js";import{ifDefined as a}from"lit/directives/if-defined.js";import{iconRemixAlertFill as l}from"./assets/cc-remix.icons.js";import{tileStyles as r,instanceDetailsStyles as c}from"./styles/info-tiles.js";import{skeletonStyles as o}from"./styles/skeleton.js";import{i18n as n}from"./translation.js";import"./cc-icon.js";const m={minFlavor:{name:"??",cpus:0,gpus:0,mem:0,microservice:!1,monthlyCost:0},maxFlavor:{name:"?",cpus:0,gpus:0,mem:0,microservice:!1,monthlyCost:0},minInstances:0,maxInstances:0};class d extends e{static get properties(){return{state:{type:Object}}}constructor(){super(),this.state={type:"loading"}}_formatFlavorName(e){return e.replace(/^ML_/,"")}_getFlavorDetails(e){return null==e.cpus?null:n("cc-tile-scalability.flavor-info",{...e})}render(){const e="loading"===this.state.type,{minFlavor:i,maxFlavor:r,minInstances:c,maxInstances:o}="loaded"===this.state.type?this.state:m,d="loaded"===this.state.type||"loading"===this.state.type;return t`<div class=tile_title>${n("cc-tile-scalability.title")}</div>${"error"===this.state.type?t`<div class=tile_message><div class=error-message><cc-icon .icon=${l} a11y-name=${n("cc-tile-scalability.error.icon-a11y-name")} class=icon-warning></cc-icon><p>${n("cc-tile-scalability.error")}</p></div></div>`:""} ${d?t`<div class=tile_body><div class=label>${n("cc-tile-scalability.size")}</div><div class=info><div class="${s({skeleton:e})} size-label" title=${a(this._getFlavorDetails(i))}>${this._formatFlavorName(i.name)}</div><div class=separator></div><div class="${s({skeleton:e})} size-label" title=${a(this._getFlavorDetails(r))}>${this._formatFlavorName(r.name)}</div></div><div class=label>${n("cc-tile-scalability.number")}</div><div class=info><div class="${s({skeleton:e})} count-bubble">${c}</div><div class=separator></div><div class="${s({skeleton:e})} count-bubble">${o}</div></div></div>`:""}`}static get styles(){return[r,c,o,i`.tile_body{align-items:center;grid-column-gap:2em;grid-row-gap:1em;grid-template-columns:auto 1fr}.info{align-items:center;display:flex;justify-content:center;width:100%}.separator{border-top:1px dashed var(--cc-color-border-neutral-strong,#8c8c8c);flex:1 1 0;width:1.5em}[title]{cursor:help}.error-message{display:grid;gap:.75em;grid-template-columns:min-content 1fr;text-align:left}.error-message p{margin:0}.icon-warning{align-self:center;color:var(--cc-color-text-warning);--cc-icon-size:1.25em}`]}}window.customElements.define("cc-tile-scalability",d);export{d as CcTileScalability};
//# sourceMappingURL=cc-tile-scalability.js.map
