import{LitElement as t,html as e,css as o}from"lit";import{classMap as i}from"lit/directives/class-map.js";import{iconRemixArrowUpSFill as r,iconRemixArrowDownSFill as s}from"./assets/cc-remix.icons.js";import{i18n as a}from"./translation.js";import"./cc-button.js";import"./cc-expand.js";import"./cc-icon.js";import"./cc-img.js";class c extends t{static get properties(){return{icon:{type:Object},image:{type:String},noHead:{type:Boolean,attribute:"no-head",reflect:!0},ribbon:{type:String,reflect:!0},state:{type:String,reflect:!0},_overlay:{type:Boolean,state:!0}}}constructor(){super(),this.icon=null,this.image=null,this.noHead=!1,this.ribbon=null,this.state="off",this._overlay=!1}_clickToggle(){"close"===this.state?this.state="open":"open"===this.state&&(this.state="close")}render(){const t="open"===this.state||"close"===this.state,o="close"!==this.state;return e`${null!=this.ribbon&&""!==this.ribbon?e`<div class=info-ribbon>${this.ribbon}</div>`:""} ${this.noHead?"":e`<div class=head @click=${this._clickToggle}>${null!=this.image&&null==this.icon?e`<cc-img src=${this.image}></cc-img>`:""} ${null!=this.icon?e`<cc-icon size=lg .icon=${this.icon}></cc-icon>`:""}<slot name=title></slot>${t?e`<cc-button class=toggle_button .icon=${o?r:s} hide-text outlined primary @cc-button:click=${this._clickToggle}>${a(o?"cc-block.toggle.close":"cc-block.toggle.open")}</cc-button>`:""}<slot name=button></slot></div>`}<cc-expand class="${i({"main-wrapper--overlay":this._overlay})} main-wrapper">${!t||o?e`<div class=main><slot></slot></div>`:""}</cc-expand><slot name=overlay></slot>`}firstUpdated(){const t=this.shadowRoot.querySelector('slot[name="overlay"]');t.addEventListener("slotchange",(()=>{const e=this._overlay;this._overlay=t.assignedNodes().length>0,this.requestUpdate("_overlay",e)}))}static get styles(){return[o`:host{background-color:var(--cc-color-bg-default,#fff);border:1px solid var(--cc-color-border-neutral,#aaa);border-radius:var(--cc-border-radius-default,.25em);box-sizing:border-box;display:grid;overflow:hidden;position:relative}.head{align-items:center;color:var(--cc-color-text-primary-strongest);display:flex;padding:1em}:host([ribbon]) .head{padding-left:3.5em}:host([state=close]) .head:hover,:host([state=open]) .head:hover{background-color:var(--cc-color-bg-neutral-hovered);cursor:pointer}cc-img{align-self:flex-start;border-radius:var(--cc-border-radius-default,.25em);height:1.5em;margin-right:1em;width:1.5em}cc-icon{align-self:flex-start;margin-right:1em}.toggle_button{--cc-icon-size:1.5em}::slotted([slot=title]){flex:1 1 0;font-size:1.2em;font-weight:700}.info-ribbon{--height:1.5em;--width:8em;--r:-45deg;--translate:1.6em;background:var(--cc-color-bg-strong);color:#fff;font-size:.9em;font-weight:700;height:var(--height);left:calc(var(--width)/ -2);line-height:var(--height);position:absolute;text-align:center;top:calc(var(--height)/ -2);transform:rotate(var(--r)) translateY(var(--translate));width:var(--width);z-index:2}.main{display:grid;grid-gap:1em;padding:.5em 1em 1em}:host([no-head]) .main{padding:1em}.main-wrapper--overlay{filter:blur(.3em);opacity:.35}.main-wrapper,::slotted([slot=overlay]){grid-area:2/1/auto/auto}:host([ribbon]) .main-wrapper{padding-left:2.5em}::slotted([slot=overlay]){align-content:center;display:grid;justify-items:center;z-index:10}::slotted(.cc-block_empty-msg){color:var(--cc-color-text-weak);font-style:italic}`]}}window.customElements.define("cc-block",c);export{c as CcBlock};
//# sourceMappingURL=cc-block.js.map
