'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-305226cb.js');
const index$1 = require('./index-f92a5850.js');
require('./v4-c23234d2.js');

const bsSelectFieldCss = ":where(bs-select-field){display:block;width:100%}bs-label+bs-select select{margin-top:0.25rem}:where(.box) bs-select :where(input,textarea,select):focus{--offset-color:var(--bs-bg-subtle)}:where(.box[data-invert]) bs-select :where(input,textarea,select):focus{--offset-color:var(--bs-bg-invert)}";

const BsSelectField = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    /** Native attributes to pass through to the select element. */
    this.attrs = {};
    this.disabled = false;
    this.error = undefined;
    this.errorMsg = undefined;
    this.inputId = undefined;
    this.label = undefined;
    this.hint = undefined;
    this.hints = undefined;
    this.placeholder = '';
    this.required = undefined;
    this.value = undefined;
    this.passAttrs = '';
    this.data = [];
    this.hintId = null;
  }
  get hintMsg() {
    return this.errorMsg || this.hint || this.hintDeprecated || undefined;
  }
  // Temporary holdover; removing this very soon
  get hintDeprecated() {
    var _a, _b;
    return ((_b = (_a = this.hints) === null || _a === void 0 ? void 0 : _a.join) === null || _b === void 0 ? void 0 : _b.call(_a, '\n')) || this.hints;
  }
  get inputIdAttr() {
    return this.inputId || this.inputIdGen;
  }
  componentWillLoad() {
    this.inputIdGen = this.inputId || index$1.genId();
    this.hintId = this.hintMsg ? index$1.genId() : null;
    this.attrs = index$1.getHostAttrs(this.hostEl, [
      'autocomplete',
      'max',
      'min',
      'maxlength',
      'minlength',
      'name',
      'placeholder',
      ...this.passAttrs.split(',')
    ]);
  }
  get validValue() {
    return this.value;
  }
  render() {
    return (index.h(index.Host, null, this.label && (index.h("bs-label", { for: this.inputIdAttr, disabled: this.disabled, required: this.required }, this.label)), index.h("bs-select", Object.assign({ disabled: this.disabled, error: this.error, "hint-id": this.hintId, "input-id": this.inputIdAttr, "pass-attrs": this.passAttrs, required: this.required, value: this.validValue }, this.attrs), index.h("option", { selected: !this.validValue, disabled: false }, this.placeholder), this.data.map(option => (index.h("option", { value: option.value, selected: this.validValue === option.value, disabled: option.disabled }, option.label)))), this.hintMsg && (index.h("bs-field-details", { error: this.error, "error-msg": this.errorMsg, hint: this.hint || this.hintDeprecated, "hint-id": this.hintId }))));
  }
  get hostEl() { return index.getElement(this); }
};
BsSelectField.style = bsSelectFieldCss;

exports.bs_select_field = BsSelectField;

//# sourceMappingURL=bs-select-field.cjs.entry.js.map