import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { d as defineCustomElement$4 } from './bs-character-count2.js';
import { d as defineCustomElement$3 } from './bs-hint2.js';
import { d as defineCustomElement$2 } from './bs-label2.js';

const bsFieldLayoutCss = "bs-field-layout{display:block}bs-field-layout .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}bs-field-layout :where(textarea,bs-textarea)+.bs-field-details{margin-top:0.25rem}bs-field-layout .bs-field-details :where(.bs-character-count:first-child){margin-left:auto}";

const BsFieldLayout$1 = /*@__PURE__*/ proxyCustomElement(class BsFieldLayout extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.charCount = undefined;
    this.charMax = undefined;
    this.disabled = false;
    this.error = undefined;
    this.hints = undefined;
    this.label = undefined;
    this.labelFor = undefined;
    this.required = undefined;
    this.hintId = undefined;
  }
  render() {
    return (h(Host, { "data-disabled": this.disabled }, this.label && (h("bs-label", { for: this.labelFor, disabled: this.disabled, required: this.required }, this.label)), h("slot", null), (this.hints || this.charMax) && (h("div", { class: "bs-field-details" }, this.hints && (h("bs-hint", { error: this.error, hintId: this.hintId, hints: this.hints })), this.charMax && (h("bs-character-count", { charCount: this.charCount, charMax: this.charMax }))))));
  }
  static get style() { return bsFieldLayoutCss; }
}, [4, "bs-field-layout", {
    "charCount": [2, "char-count"],
    "charMax": [2, "char-max"],
    "disabled": [4],
    "error": [4],
    "hints": [1],
    "label": [1],
    "labelFor": [1, "label-for"],
    "required": [4],
    "hintId": [1, "hint-id"]
  }]);
function defineCustomElement$1() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["bs-field-layout", "bs-character-count", "bs-hint", "bs-label"];
  components.forEach(tagName => { switch (tagName) {
    case "bs-field-layout":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, BsFieldLayout$1);
      }
      break;
    case "bs-character-count":
      if (!customElements.get(tagName)) {
        defineCustomElement$4();
      }
      break;
    case "bs-hint":
      if (!customElements.get(tagName)) {
        defineCustomElement$3();
      }
      break;
    case "bs-label":
      if (!customElements.get(tagName)) {
        defineCustomElement$2();
      }
      break;
  } });
}

const BsFieldLayout = BsFieldLayout$1;
const defineCustomElement = defineCustomElement$1;

export { BsFieldLayout, defineCustomElement };

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