import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';

const bsFieldDetailsCss = ".bs-field-details{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--bs-space-2);padding:0 0.75rem;margin-top:0.5rem}:where(textarea,bs-textarea)+.bs-field-details{margin-top:0.25rem}.bs-field-details :where(.bs-character-count:first-child){margin-left:auto}.bs-hint{--hint-color:var(--bs-ink-light);min-width:0;color:var(--hint-color);font-size:var(--bs-text-xs);padding:0;margin:0;list-style:none;overflow-wrap:break-word}.bs-hint:where([data-error]){--hint-color:var(--bs-ink-red)}";

const BsFieldDetails = /*@__PURE__*/ proxyCustomElement(class BsFieldDetails extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.charCount = undefined;
    this.charMax = undefined;
    this.error = undefined;
    this.errorMsg = undefined;
    this.hint = undefined;
    this.hintId = undefined;
  }
  get hintMsg() {
    return this.errorMsg || this.hint || undefined;
  }
  render() {
    return (h(Host, { class: "bs-field-details" }, this.hintMsg && (h("span", { id: this.hintId, class: "bs-hint", "data-error": this.error || undefined }, this.hintMsg)), this.charMax && (h("span", { class: "bs-character-count", "data-error": (this.charCount > this.charMax) || undefined }, this.charCount || '0', " / ", this.charMax))));
  }
  static get style() { return bsFieldDetailsCss; }
}, [0, "bs-field-details", {
    "charCount": [2, "char-count"],
    "charMax": [2, "char-max"],
    "error": [4],
    "errorMsg": [1, "error-msg"],
    "hint": [1],
    "hintId": [1, "hint-id"]
  }]);
function defineCustomElement() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["bs-field-details"];
  components.forEach(tagName => { switch (tagName) {
    case "bs-field-details":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, BsFieldDetails);
      }
      break;
  } });
}

export { BsFieldDetails as B, defineCustomElement as d };

//# sourceMappingURL=bs-field-details2.js.map