import {
  __decorateClass,
  __privateAdd,
  __privateMethod
} from "../../chunks/chunk.QU3DSPNU.js";
var _GdsFormControlFooter_instances, renderRemainingCharsBadge_fn;
import { nothing } from "lit";
import { property } from "lit/decorators.js";
import { when } from "lit/directives/when.js";
import { GdsBadge } from "../../components/badge/badge.component.js";
import { IconTriangleExclamation } from "../../components/icon/icons/triangle-exclamation.component.js";
import { GdsElement } from "../../gds-element.js";
import { watch } from "../../utils/decorators/watch.js";
import {
  gdsCustomElement,
  html
} from "../../utils/helpers/custom-element-scoping.js";
import FormControlFooterStyles from "./form-control-footer.styles.js";
let GdsFormControlFooter = class extends GdsElement {
  constructor() {
    super(...arguments);
    __privateAdd(this, _GdsFormControlFooter_instances);
  }
  _handleVisibilityChange() {
    this.classList.toggle(
      "visually-hidden",
      !this.errorMessage && !this.charCounter?.[1]
    );
  }
  connectedCallback() {
    super.connectedCallback();
    this._handleVisibilityChange();
  }
  render() {
    return html`<div aria-live="polite">
      <div class="error-message">
        <slot name="message"
          >${when(
      this.errorMessage,
      () => html`
              <gds-icon-triangle-exclamation
                solid
              ></gds-icon-triangle-exclamation>
              ${this.errorMessage}
            `
    )}</slot
        >
      </div>
      <div class="char-counter" aria-hidden="true">
        ${__privateMethod(this, _GdsFormControlFooter_instances, renderRemainingCharsBadge_fn).call(this)}
      </div>
    </div>`;
  }
};
_GdsFormControlFooter_instances = new WeakSet();
renderRemainingCharsBadge_fn = function() {
  if (!this.charCounter || this.charCounter[1] === false) return nothing;
  const [remaining, variant] = this.charCounter;
  return html`<gds-badge variant="${variant}">${remaining}</gds-badge>`;
};
GdsFormControlFooter.styles = [FormControlFooterStyles];
__decorateClass([
  property({ type: Array })
], GdsFormControlFooter.prototype, "charCounter", 2);
__decorateClass([
  property()
], GdsFormControlFooter.prototype, "errorMessage", 2);
__decorateClass([
  watch("charCounter"),
  watch("errorMessage")
], GdsFormControlFooter.prototype, "_handleVisibilityChange", 1);
GdsFormControlFooter = __decorateClass([
  gdsCustomElement("gds-form-control-footer", {
    dependsOn: [GdsBadge, IconTriangleExclamation]
  })
], GdsFormControlFooter);
export {
  GdsFormControlFooter
};
