import{AnimateController as t,animate as e}from"@lit-labs/motion";import{LitElement as o,html as s,css as i}from"lit";import{classMap as r}from"lit/directives/class-map.js";import{ifDefined as n}from"lit/directives/if-defined.js";import{iconRemixSpam_2Line as c,iconRemixAlertLine as a,iconRemixCheckboxCircleLine as l,iconRemixInformationLine as d,iconRemixCloseLine as g}from"./assets/cc-remix.icons.js";import{i18n as u}from"./translation.js";import"./cc-icon.js";import{CcToastDismissEvent as h}from"./components/cc-toast/cc-toast.events.js";class p extends o{static get properties(){return{closeable:{type:Boolean},heading:{type:String},intent:{type:String,reflect:!0},message:{type:String},showProgress:{type:Boolean,attribute:"show-progress"},timeout:{type:Number}}}constructor(){super(),this.closeable=!1,this.heading=null,this.intent="info",this.message=null,this.showProgress=!1,this.timeout=5e3,this._progressAnimateCtrl=new t(this,{defaultOptions:{keyframeOptions:{easing:"linear"},in:[{width:"100%"}]},onComplete:()=>this._dismiss()})}_getIcon(){switch(this.intent){case"info":return d;case"success":return l;case"warning":return a;case"danger":return c}}_getIconAlt(){switch(this.intent){case"info":return u("cc-toast.icon-alt.info");case"success":return u("cc-toast.icon-alt.success");case"warning":return u("cc-toast.icon-alt.warning");case"danger":return u("cc-toast.icon-alt.danger")}}_onCloseButtonClick(){this._dismiss()}_dismiss(){this.dispatchEvent(new h)}_pause(){this._progressAnimateCtrl.isAnimating&&this._progressAnimateCtrl.pause()}_resume(){this._progressAnimateCtrl.isAnimating&&this._progressAnimateCtrl.play()}render(){const t=this.timeout>0?"0":void 0;return s`
      <div
        class="toast"
        @mouseenter=${this._pause}
        @mouseleave=${this._resume}
        @focus=${this._pause}
        @blur=${this._resume}
        tabindex="${n(t)}"
      >
        <div class="icon-wrapper">
          <cc-icon class="icon" .icon="${this._getIcon()}" a11y-name="${this._getIconAlt()}"></cc-icon>
        </div>
        <div class="right">
          <div class="content">
            ${this.heading?s`<div class="heading">${this.heading}</div>`:""}
            ${this.message?s`<div>${this.message}</div>`:""}
          </div>

          ${this.closeable?s`
                <button
                  class="close-button"
                  @click=${this._onCloseButtonClick}
                  @focus=${this._pause}
                  @blur=${this._resume}
                  title="${u("cc-toast.close")}"
                >
                  <cc-icon .icon="${g}" a11y-name="${u("cc-toast.close")}"></cc-icon>
                </button>
              `:""}
          ${this.timeout>0?s`
                <div class="progress-bar ${r({invisible:!this.showProgress})}">
                  <div class="progress-bar-track" ${e({keyframeOptions:{duration:this.timeout}})}></div>
                </div>
              `:""}
        </div>
      </div>
    `}static get styles(){return[i`
        :host {
          --padding: 0.8em;

          display: block;
        }

        /* region COMMON */

        .toast {
          align-items: stretch;
          background-color: var(--toast-color);
          border: 1px solid var(--toast-color);
          border-radius: var(--cc-border-radius-default, 0.25em);
          box-shadow:
            0 2px 4px rgb(38 38 38 / 25%),
            0 5px 15px rgb(38 38 38 / 25%);
          display: flex;
          overflow: hidden;
          pointer-events: all;
        }
        /* endregion */

        /* region COLOR */

        :host([intent='info']) {
          --toast-color: var(--cc-color-bg-primary);
        }

        :host([intent='success']) {
          --toast-color: var(--cc-color-bg-success);
        }

        :host([intent='warning']) {
          --toast-color: var(--cc-color-bg-warning);
        }

        :host([intent='danger']) {
          --toast-color: var(--cc-color-bg-danger);
        }
        /* endregion */

        /* region ICON */

        .icon-wrapper {
          align-items: center;
          background-color: var(--toast-color);
          border-right: 1px solid var(--toast-color);
          display: flex;
          padding: var(--padding);
        }

        .icon {
          --cc-icon-color: var(--cc-toast-icon-color, #e7e7e7);
          --cc-icon-size: 1.8em;
        }
        /* endregion */

        .right {
          background-color: var(--cc-color-bg-default);
          display: flex;
          flex: 1 1 auto;
          justify-content: stretch;
          position: relative;
        }

        /* region CONTENT */

        .content {
          align-self: center;
          color: var(--toast-color);
          display: flex;
          flex: 1 1 auto;
          flex-direction: column;
          gap: 0.5em;
          justify-content: center;
          padding: var(--padding);
        }

        .content p {
          margin-block: 0.5em;
        }

        .heading {
          font-weight: bold;
        }

        /* endregion */

        /* region CLOSE_BUTTON */

        .close-button {
          --cc-icon-color: var(--cc-color-text-weak);
          --cc-icon-size: 1.5em;

          align-self: start;
          background-color: transparent;
          border: none;
          border-radius: var(--cc-border-radius-small, 0.15em);
          cursor: pointer;
          height: auto;
          margin: 0.25em;
          padding: 0.2em;
          width: auto;
        }

        .close-button img {
          display: block;
          height: 1em;
          width: 1em;
        }

        .close-button:hover {
          background-color: var(--cc-color-bg-neutral-hovered);
        }

        .close-button:enabled:focus {
          outline: var(--cc-focus-outline, #000 solid 2px);
          outline-offset: var(--cc-focus-outline-offset, 2px);
        }
        /* endregion */

        /* region PROGRESS */

        .progress-bar {
          bottom: 0;
          height: 0.3em;
          position: absolute;
          width: 100%;
        }

        .progress-bar-track {
          background-color: var(--toast-color);
          height: 100%;
          width: 0;
        }

        .progress-bar.invisible {
          height: 0;
        }
        /* endregion */
      `]}}window.customElements.define("cc-toast",p);export{p as CcToast};
//# sourceMappingURL=cc-toast.js.map
