import { r as registerInstance, h, H as Host } from './index-92f6d7ee.js';

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 = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    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))));
  }
};
BsFieldDetails.style = bsFieldDetailsCss;

export { BsFieldDetails as bs_field_details };

//# sourceMappingURL=bs-field-details.entry.js.map