import{LitElement as e,html as r,css as t}from"lit";import{classMap as o}from"lit/directives/class-map.js";import{i18n as i}from"./translation.js";import"./cc-badge.js";import"./cc-button.js";import"./cc-img.js";class s extends e{static get properties(){return{description:{type:String},iconUrl:{type:String,attribute:"icon-url"},keywords:{type:Array},name:{type:String},url:{type:String}}}constructor(){super(),this.description=null,this.iconUrl=null,this.keywords=[],this.name=null,this.url=null}_areKeywordsAllHidden(){return this.keywords.every((e=>e.hidden))}render(){const e=this.keywords.length>0&&!this._areKeywordsAllHidden();return r`<div class="${o({"wrapper--no-keywords":!e})} wrapper"><cc-img src=${this.iconUrl}></cc-img><a class=name href=${this.url} title=${i("cc-product-card.select",{name:this.name})}>${this.name} </a>${e?r`<ul class=keywords>${this.keywords.map((e=>e.hidden?"":r`<li><cc-badge class=keyword-badge>${e.value}</cc-badge></li>`))}</ul>`:""}<p class=description>${this.description}</p></div>`}static get styles(){return[t`:host{display:block}p{margin:0}ul{list-style:none;margin:0;padding:0}.wrapper{background-color:var(--cc-color-bg-default,#fff);border:2px solid var(--cc-color-border-neutral,#aaa);border-radius:var(--cc-border-radius-default,.25em);box-sizing:border-box;display:grid;gap:.75em;grid-template-areas:'icon name' 'keywords keywords' 'description description';grid-template-columns:min-content 1fr;grid-template-rows:min-content max-content auto;height:100%;padding:1em;position:relative}.wrapper:hover{border-color:var(--cc-color-border-neutral-focused,#777);cursor:pointer}.wrapper:focus-within{border:2px solid var(--cc-color-border-neutral-focused,#777);outline:var(--cc-focus-outline,#000 solid 2px);outline-offset:var(--cc-focus-outline-offset,2px)}.wrapper.wrapper--no-keywords{grid-template-areas:'icon name' 'description description';grid-template-rows:min-content auto}cc-img{border-radius:var(--cc-border-radius-default,.25em);height:2em;width:2em}.name{color:var(--cc-color-text-strongest,#000);font-size:1.75em;text-decoration:none}.name::after{content:'';height:100%;left:0;position:absolute;top:0;width:100%}.name:focus{outline:0}.keyword-badge{font-size:.85em}.keywords{display:flex;flex-wrap:wrap;gap:.5em;grid-area:keywords}.description{color:var(--cc-color-text-weak,#333);font-size:.8em;grid-area:description;line-height:1.5em}`]}}window.customElements.define("cc-product-card",s);export{s as CcProductCard};
//# sourceMappingURL=cc-product-card.js.map
