import{LitElement as e,html as o,css as c}from"lit";import{classMap as r}from"lit/directives/class-map.js";import{iconRemixAlertFill as t,iconRemixCheckboxCircleFill as n,iconRemixInformationFill as i,iconRemixSpam_2Fill as a,iconRemixCloseLine as s}from"./assets/cc-remix.icons.js";import{dispatchCustomEvent as l}from"./lib/events.js";import{i18n as g}from"./translation.js";import"./cc-icon.js";class d extends e{static get properties(){return{closeable:{type:Boolean},heading:{type:String},intent:{type:String,reflect:!0},message:{type:String},noIcon:{type:Boolean,attribute:"no-icon"}}}constructor(){super(),this.closeable=!1,this.heading=null,this.intent="info",this.message=null,this.noIcon=!1}_getIcon(){switch(this.intent){case"danger":return a;case"info":return i;case"success":return n;case"warning":return t}}_getIconAlt(){switch(this.intent){case"danger":return g("cc-notice.icon-alt.danger");case"info":return g("cc-notice.icon-alt.info");case"success":return g("cc-notice.icon-alt.success");case"warning":return g("cc-notice.icon-alt.warning")}}_onCloseButtonClick(){l(this,"dismiss")}render(){const e={"no-icon":null!=this.heading&&this.noIcon,"no-heading":null==this.heading&&!this.noIcon,"message-only":null==this.heading&&this.noIcon,closeable:this.closeable};return o`<div class="${r(e)} wrapper">${this.noIcon?"":o`<slot name=icon><cc-icon .icon=${this._getIcon()} a11y-name=${this._getIconAlt()} class=notice-icon></cc-icon></slot>`} ${null!=this.heading?o`<div class=heading>${this.heading}</div>`:""}<div class=message-container><slot name=message><p>${this.message}</p></slot></div>${this.closeable?o`<button class=close-button @click=${this._onCloseButtonClick} title=${g("cc-toast.close")}><cc-icon size=lg .icon=${s} a11y-name=${g("cc-notice.close")}></cc-icon></button>`:""}</div>`}static get styles(){return[c`:host{display:block}.wrapper{align-items:center;border-radius:var(--cc-border-radius-default,.25em);display:grid;gap:.5em;grid-template-areas:'icon heading' '.    message';grid-template-columns:auto 1fr;grid-template-rows:auto auto;line-height:1.4;padding:.75em;position:relative}:host([intent=success]) .wrapper{--cc-icon-color:var(--cc-color-text-success);background-color:var(--cc-color-bg-success-weaker);border:1px solid var(--cc-color-border-success-weak)}:host([intent=warning]) .wrapper{--cc-icon-color:var(--cc-color-text-warning);background-color:var(--cc-color-bg-warning-weaker);border:1px solid var(--cc-color-border-warning-weak)}:host([intent=info]) .wrapper{--cc-icon-color:var(--cc-color-text-primary);background-color:var(--cc-color-bg-primary-weaker);border:1px solid var(--cc-color-border-primary-weak)}:host([intent=danger]) .wrapper{--cc-icon-color:var(--cc-color-text-danger);background-color:var(--cc-color-bg-danger-weaker);border:1px solid var(--cc-color-border-danger-weak)}.wrapper.closeable{padding-right:2em}.wrapper.no-icon{grid-template-areas:'heading' 'message'}.wrapper.no-heading{grid-template-areas:'icon message';grid-template-columns:auto 1fr;grid-template-rows:auto}.wrapper.message-only{grid-template-areas:'message';grid-template-columns:auto;grid-template-rows:auto}.heading{font-weight:700;grid-area:heading}.message-container{grid-area:message}.message-container p{margin:0}.notice-icon{grid-area:icon;height:1.5em;width:1.5em}.close-button{--cc-icon-color:var(--cc-color-text-weak);background-color:transparent;border:none;border-radius:var(--cc-border-radius-small,.15em);cursor:pointer;height:auto;padding:0;position:absolute;right:.5em;top:.5em;width:auto}:host([intent=success]) .close-button:hover{background-color:var(--cc-color-bg-success-hovered)}:host([intent=warning]) .close-button:hover{background-color:var(--cc-color-bg-warning-hovered)}:host([intent=info]) .close-button:hover{background-color:var(--cc-color-bg-primary-hovered)}:host([intent=danger]) .close-button:hover{background-color:var(--cc-color-bg-danger-hovered)}.close-button:focus{outline:var(--cc-focus-outline,#000 solid 2px);outline-offset:var(--cc-focus-outline-offset,2px)}.close-button img{display:block;height:1em;width:1em}`]}}window.customElements.define("cc-notice",d);export{d as CcNotice};
//# sourceMappingURL=cc-notice.js.map
