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 s,iconRemixSpam_2Fill as i,iconRemixCloseLine as a}from"./assets/cc-remix.icons.js";import{i18n as l}from"./translation.js";import"./cc-icon.js";import{CcNoticeDismissEvent as g}from"./components/cc-notice/cc-notice.events.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 i;case"info":return s;case"success":return n;case"warning":return t}}_getIconAlt(){switch(this.intent){case"danger":return l("cc-notice.icon-alt.danger");case"info":return l("cc-notice.icon-alt.info");case"success":return l("cc-notice.icon-alt.success");case"warning":return l("cc-notice.icon-alt.warning")}}_onCloseButtonClick(){this._onDismiss()}_onDismiss(){this.dispatchEvent(new g)}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="wrapper ${r(e)}">
        ${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="${l("cc-toast.close")}">
                <cc-icon size="lg" .icon="${a}" a11y-name="${l("cc-notice.close")}"></cc-icon>
              </button>
            `:""}
      </div>
    `}static get styles(){return[c`
        :host {
          display: block;
        }

        .wrapper {
          align-items: start;
          border-radius: var(--cc-border-radius-default, 0.25em);
          display: grid;
          gap: 0.5em;
          grid-template-areas:
            'icon heading'
            '.    message';
          grid-template-columns: auto 1fr;
          grid-template-rows: auto auto;
          line-height: 1.4;
          padding: 0.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-weaker);
        }

        .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 {
          align-self: center;
          font-weight: bold;
          grid-area: heading;
        }

        .message-container {
          grid-area: message;
        }

        .message-container p {
          margin: 0;
        }

        .notice-icon {
          align-self: start;
          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, 0.15em);
          cursor: pointer;
          height: auto;
          padding: 0;
          position: absolute;
          right: 0.5em;
          top: 0.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
