import{__decorate as e}from"tslib";import{LitElement as r,html as i}from"lit";import{property as s,customElement as o}from"lit/decorators.js";import{s as t}from"./nile-error-message.css.esm.js";let n=class extends r{constructor(){super(...arguments),this.errorMessage="",this.isExpanded=!1,this.MAX_LENGTH=100}static get styles(){return[t]}getTruncatedResponse(){return this.errorResponse.length>this.MAX_LENGTH?`${this.errorResponse.substring(0,this.MAX_LENGTH)}...`:this.errorResponse}updated(e){e.has("maxWidth")&&this.style.setProperty("--nile-error-max-width",this.maxWidth),e.has("maxHeight")&&this.style.setProperty("--nile-error-max-height",this.maxHeight),e.has("maxDialogHeight")&&this.style.setProperty("--nile-error-max-dialog-height",this.maxDialogHeight)}toggleExpanded(){this.isExpanded=!this.isExpanded}render(){const e=this.isExpanded?"var(--nile-icon-arrow-up, var(--ng-icon-chevron-up))":"var(--nile-icon-arrow-down, var(--ng-icon-chevron-down))";return i`
      <div class="nile-error-message" part="base">
        <nile-icon
          name="var(--nile-icon-info, var(--ng-icon-info-circle))"
          method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
          size="14"
          class="nile-error-message__icon"
          part="icon"
          color="var(--nile-colors-red-700, var(--ng-colors-fg-error-primary))"
        ></nile-icon>
        <span class="nile-error-message__error">${this.errorMessage}</span>


        ${this.errorResponse?i`
            <div class="nile-error-message__response">
            ${this.errorResponse}
            ${this.errorResponseLong?i`
              <span
              class="nile-error-message__more-button"
              @click=${this.toggleExpanded}
              >${this.isExpanded?"View Less":"View More"}
              <nile-icon color="var(--nile-colors-primary-600, var(--ng-colors-fg-brand-primary-600))" part="icon" size="14" name="${e}" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"></nile-icon>
              </span
            > `:""}
            </div>
            `:""}

        <div
          class="nile-error-message__response-expanded ${this.isExpanded?"expanded":"collapsed"}"
        >
          ${this.errorResponseLong}
        </div>
      </div>
    `}};e([s({type:String})],n.prototype,"errorMessage",void 0),e([s({type:String})],n.prototype,"errorResponse",void 0),e([s({type:String})],n.prototype,"errorResponseLong",void 0),e([s({type:Boolean})],n.prototype,"isExpanded",void 0),e([s({type:String})],n.prototype,"maxWidth",void 0),e([s({type:String})],n.prototype,"maxHeight",void 0),e([s({type:String})],n.prototype,"maxDialogHeight",void 0),n=e([o("nile-error-message")],n);export{n as N};
