import{__decorate as t}from"tslib";import{LitElement as e,html as s,nothing as i}from"lit";import{property as o,state as r,query as n,customElement as l}from"lit/decorators.js";import{s as a}from"./nile-form-help-text.css.esm.js";import{classMap as h}from"lit/directives/class-map.js";let c=class extends e{constructor(){super(...arguments),this.isExpanded=!1,this.showButton=!1}static get styles(){return[a]}firstUpdated(t){this.resizeObserver=this.observeWidthChange(this.textContainer)}disconnectedCallback(){this.resizeObserver.disconnect()}render(){const t=this.isExpanded?"var(--nile-icon-arrow-up, var(--ng-icon-chevron-up))":"var(--nile-icon-arrow-down, var(--ng-icon-chevron-down))";return s`
    <div 
      class="${h({"nile-form-help-text":!0,"nile-form-help-text--expanded":this.isExpanded})}" 
      part="container"
    >
      <span
        class="${h({help__text__full:!0,"help__text__full--expanded":this.isExpanded})}"
        >
        <slot @slotchange="${this.decideToToggleShowButton}"></slot>
      </span>
      ${this.showButton?s`
        <span
          class="nile-form-help-text__more-button"
          part="toggle-button"
          @click=${this.toggleExpanded}
        >${this.isExpanded?"View Less":"View More"}
          <nile-icon color="#005EA6" part="icon" size="14" name="${t}" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"></nile-icon>
        </span>
      `:i}
    </div>
  `}toggleExpanded(){this.isExpanded=!this.isExpanded}decideToToggleShowButton(){this.textContainer&&(this.showButton=this.textContainer.clientWidth<this.textContainer.scrollWidth)}observeWidthChange(t){const e=new ResizeObserver((t=>{for(let e of t){e.contentRect.width&&this.decideToToggleShowButton()}}));return e.observe(t),e}};t([o({type:Boolean,reflect:!0})],c.prototype,"isExpanded",void 0),t([r()],c.prototype,"showButton",void 0),t([n(".help__text__full")],c.prototype,"textContainer",void 0),c=t([l("nile-form-help-text")],c);export{c as N};
