text: define(["exports", "../../../lit/index.js", "./simple-fields-ui.js"], function (_exports, _index, _simpleFieldsUi) {
    "use strict";
  
    Object.defineProperty(_exports, "__esModule", {
      value: true
    });
    _exports.SimpleFieldsContainerBehaviors = _exports.SimpleFieldsContainer = void 0;
  
    var _templateObject_ff3e9b30feb911eb8439e3eec9305af7, _templateObject2_ff3e9b30feb911eb8439e3eec9305af7, _templateObject3_ff3e9b30feb911eb8439e3eec9305af7, _templateObject4_ff3e9b30feb911eb8439e3eec9305af7, _templateObject5_ff3e9b30feb911eb8439e3eec9305af7, _templateObject6_ff3e9b30feb911eb8439e3eec9305af7, _templateObject7_ff3e9b30feb911eb8439e3eec9305af7, _templateObject8_ff3e9b30feb911eb8439e3eec9305af7, _templateObject9_ff3e9b30feb911eb8439e3eec9305af7, _templateObject10_ff3e9b30feb911eb8439e3eec9305af7;
  
    function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = babelHelpers.getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = babelHelpers.getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return babelHelpers.possibleConstructorReturn(this, result); }; }
  
    function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
  
    /**
     * @class SimpleFieldsContainerBehaviors
     */
    var SimpleFieldsContainerBehaviors = function SimpleFieldsContainerBehaviors(SuperClass) {
      return /*#__PURE__*/function (_SuperClass) {
        babelHelpers.inherits(_class, _SuperClass);
  
        var _super = _createSuper(_class);
  
        function _class() {
          var _this;
  
          babelHelpers.classCallCheck(this, _class);
          _this = _super.call(this);
          _this.counter = "none";
          _this.autovalidate = false;
          _this.disabled = false;
          _this.hidden = false;
          _this.error = false;
          _this.id = _this._generateUUID();
          _this.inline = false;
          _this.validTypes = ["checkbox", "color", "date", "datetime-local", "email", "file", "fieldset", "hidden", "month", "number", "password", "radio", "range", "search", "select", "tel", "text", "textarea", "time", "url", "week"];
  
          _this._observeAndListen();
  
          _this.addEventListener("click", _this.focus);
  
          return _this;
        }
  
        babelHelpers.createClass(_class, [{
          key: "render",
          value: function render() {
            return (0, _index.html)(_templateObject_ff3e9b30feb911eb8439e3eec9305af7 || (_templateObject_ff3e9b30feb911eb8439e3eec9305af7 = babelHelpers.taggedTemplateLiteral([" ", " ", " "])), this.fieldMainTemplate, this.fieldBottom);
          }
        }, {
          key: "disconnectedCallback",
          value: function disconnectedCallback() {
            this.removeEventListener("click", this.focus);
            babelHelpers.get(babelHelpers.getPrototypeOf(_class.prototype), "disconnectedCallback", this).call(this);
          }
          /**
           * makes a field autogrow
           *
           * @memberof SimpleFieldsContainer
           */
  
        }, {
          key: "autoGrow",
          value: function autoGrow() {
            var field = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.field;
  
            if (this.field) {
              this.field.style.height = "auto"; // @todo this breaks if we're inside of a tab / element is not visible
              // when value changes
  
              this.field.style.height = "".concat(this.field.scrollHeight, "px");
              this.field.style.overflowY = "hidden";
            }
          }
          /**
           * updates slotted field
           *
           * @memberof SimpleFieldsContainer
           */
  
        }, {
          key: "firstUpdated",
          value: function firstUpdated(changedProperties) {
            if (babelHelpers.get(babelHelpers.getPrototypeOf(_class.prototype), "firstUpdated", this)) babelHelpers.get(babelHelpers.getPrototypeOf(_class.prototype), "firstUpdated", this).call(this, changedProperties);
  
            this._updateField();
          }
          /**
           * updates for slotted input
           * overrride for shadow DOM
           *
           * @param {*} changedProperties
           * @memberof SimpleFieldsContainer
           */
  
        }, {
          key: "updated",
          value: function updated(changedProperties) {
            var _this2 = this;
  
            var errorChanged = false;
            changedProperties.forEach(function (oldValue, propName) {
              if (propName === "error" && _this2.error !== oldValue) errorChanged = true;
              if (propName === "errorMessage" && _this2.errorMessage !== oldValue) errorChanged = true;
  
              if (propName === "error" && _this2.field) {
                _this2.field.setAttribute("aria-invalid", _this2.error ? "true" : "false");
              }
            });
            if (errorChanged) this._fireErrorChanged();
          }
          /**
           * template for slotted or shadow DOM description
           *
           * @readonly
           * @returns {object}
           * @memberof SimpleFieldsContainer
           */
  
        }, {
          key: "descriptionTemplate",
          get: function get() {
            return (0, _index.html)(_templateObject2_ff3e9b30feb911eb8439e3eec9305af7 || (_templateObject2_ff3e9b30feb911eb8439e3eec9305af7 = babelHelpers.taggedTemplateLiteral(["\n        <div id=\"description\" part=\"field-desc\">\n          <slot name=\"description\"></slot>\n          ", "\n        </div>\n      "])), this.description);
          }
          /**
           * template for slotted or shadow DOM error message
           *
           * @readonly
           * @returns {object}
           * @memberof SimpleFieldsContainer
           */
  
        }, {
          key: "errorTemplate",
          get: function get() {
            return (0, _index.html)(_templateObject3_ff3e9b30feb911eb8439e3eec9305af7 || (_templateObject3_ff3e9b30feb911eb8439e3eec9305af7 = babelHelpers.taggedTemplateLiteral(["\n        <div\n          id=\"error-message\"\n          ?hidden=\"", "\"\n          role=\"alert\"\n          part=\"error-msg\"\n        >\n          ", "\n        </div>\n      "])), !this.error, this.errorMessage);
          }
          /**
           *
           * gets bottom (metadata, description, and error message) of a field
           *
           * @readonly
           * @returns {object}
           * @memberof SimpleFieldsContainer
           */
  
        }, {
          key: "fieldBottom",
          get: function get() {
            return (0, _index.html)(_templateObject4_ff3e9b30feb911eb8439e3eec9305af7 || (_templateObject4_ff3e9b30feb911eb8439e3eec9305af7 = babelHelpers.taggedTemplateLiteral(["\n        <div class=\"border-bottom blur\"></div>\n        <div class=\"border-bottom focus\"></div>\n        <div id=\"field-bottom\" part=\"field-bottom\">\n          <div id=\"error-desc\" part=\"field-bottom-inner\">\n            ", " ", "\n          </div>\n          ", "\n        </div>\n      "])), this.descriptionTemplate, this.errorTemplate, this.fieldMeta);
          }
          /**
           * gets field's id
           *
           * @readonly
           * @returns {string}
           * @memberof SimpleFieldsContainer
           */
  
        }, {
          key: "fieldId",
          get: function get() {
            return "".concat(this.id || "field", ".input");
          }
          /**
           * template for slotted or shadow DOM label
           *
           * @readonly
           * @returns {object}
           * @memberof SimpleFieldsContainer
           */
  
        }, {
          key: "fieldMainTemplate",
          get: function get() {
            return (0, _index.html)(_templateObject5_ff3e9b30feb911eb8439e3eec9305af7 || (_templateObject5_ff3e9b30feb911eb8439e3eec9305af7 = babelHelpers.taggedTemplateLiteral(["\n        <div\n          class=\"", "\"\n          part=\"field-main\"\n        >\n          ", "\n          <div part=\"field-inner\">\n            ", "\n            <slot name=\"field\"></slot>\n            ", "\n          </div>\n        </div>\n      "])), this.inline || ["checkbox", "color", "radio"].includes(this.type || "text") ? "field-main inline" : "field-main", this.labelTemplate, this.prefixTemplate, this.suffixTemplate);
          }
          /**
           *
           * gets field metadata
           *
           * @readonly
           * @returns {object}
           * @memberof SimpleFieldsContainer
           */
  
        }, {
          key: "fieldMeta",
          get: function get() {
            return (0, _index.html)(_templateObject6_ff3e9b30feb911eb8439e3eec9305af7 || (_templateObject6_ff3e9b30feb911eb8439e3eec9305af7 = babelHelpers.taggedTemplateLiteral(["\n        <div id=\"fieldmeta\" aria-live=\"polite\" part=\"field-meta\">\n          <slot name=\"field-meta\"></slot>\n        </div>\n      "])));
          }
        }, {
          key: "hasFieldset",
          get: function get() {
            return this.type === "fieldset";
          }
          /**
           * template for slotted or shadow DOM label
           *
           * @readonly
           * @returns {object}
           * @memberof SimpleFieldsContainer
           */
  
        }, {
          key: "labelTemplate",
          get: function get() {
            return (0, _index.html)(_templateObject7_ff3e9b30feb911eb8439e3eec9305af7 || (_templateObject7_ff3e9b30feb911eb8439e3eec9305af7 = babelHelpers.taggedTemplateLiteral(["\n        <label\n          id=\"", "-label\"\n          for=\"", "\"\n          class=\"label-main\"\n          ?hidden=\"", "\"\n          part=\"label\"\n        >\n          <slot name=\"label-prefix\"></slot>\n          <slot name=\"label\"></slot>\n          ", "", "\n        </label>\n      "])), this.fieldId, this.fieldId, this.type === "fieldset", this.label, this.error || this.required ? "*" : "");
          }
        }, {
          key: "multicheck",
          get: function get() {
            return this.hasFieldset && this.field.querySelector("input[type=checkbox]");
          }
          /**
           * determines if number of items selected
           * is not between min and max
           *
           * @readonly
           * @memberof SimpleFieldsContainer
           */
  
        }, {
          key: "numberError",
          get: function get() {
            var items = this._getFieldValue() ? this._getFieldValue().length : false,
                min = this.type === "select" ? this.min : this.multicheck ? this.minchecked : false,
                max = this.type === "select" ? this.max : this.multicheck ? this.maxchecked : false;
            var more = min && items && min > items ? min - items : false,
                less = max && items && max < items ? max - items : more;
            return less;
          }
          /**
           * determines if field is numeric
           *
           * @readonly
           * @returns {boolean}
           * @memberof SimpleFieldsContainer
           */
  
        }, {
          key: "numeric",
          get: function get() {
            return ["date", "month", "week", "time", "datetime-local", "number", "range"].includes(this.type);
          }
          /**
           * determines if value does not match regex pattern
           *
           * @readonly
           * @memberof SimpleFieldsContainer
           */
  
        }, {
          key: "patternError",
          get: function get() {
            var _this3 = this;
  
            return this.pattern && this.pattern !== "" && this._getFieldValue() && (!this.field.multiple ? !this._getFieldValue().match(this.pattern) : this._getFieldValue().filter(function (value) {
              return !value.match(_this3.pattern);
            }));
          }
          /**
           * template for slotted or shadow DOM prefix
           *
           * @readonly
           * @returns {object}
           * @memberof SimpleFieldsContainer
           */
  
        }, {
          key: "prefixTemplate",
          get: function get() {
            return (0, _index.html)(_templateObject8_ff3e9b30feb911eb8439e3eec9305af7 || (_templateObject8_ff3e9b30feb911eb8439e3eec9305af7 = babelHelpers.taggedTemplateLiteral(["\n        <slot name=\"prefix\"></slot>\n        ", "\n      "])), this.prefix);
          }
          /**
           * determines if field is required and blank
           *
           * @readonly
           * @memberof SimpleFieldsContainer
           */
  
        }, {
          key: "requiredError",
          get: function get() {
            return !this._getFieldValue() && this.required;
          }
          /**
           * mutation observer that updates field property with slotted field
           * override for shadow DOM field
           *
           * @readonly
           * @returns {object}
           * @memberof SimpleFieldsContainer
           */
  
        }, {
          key: "slottedFieldObserver",
          get: function get() {
            return new MutationObserver(this._updateField);
          }
          /**
           * template for slotted or shadow DOM suffix
           *
           * @readonly
           * @returns {object}
           * @memberof SimpleFieldsContainer
           */
  
        }, {
          key: "suffixTemplate",
          get: function get() {
            return (0, _index.html)(_templateObject9_ff3e9b30feb911eb8439e3eec9305af7 || (_templateObject9_ff3e9b30feb911eb8439e3eec9305af7 = babelHelpers.taggedTemplateLiteral(["\n        <slot name=\"suffix\"></slot>\n        ", "\n      "])), this.suffix);
          }
          /**
           * focuses on field
           * @memberof SimpleFieldsContainer
           */
  
        }, {
          key: "focus",
          value: function focus() {
            if (this.field) {
              this.field.focus();
              this.__delayedFocus = false;
            } else {
              this.__delayedFocus = true;
            }
          }
          /**
           * selects all text
           * @memberof SimpleFieldsContainer
           */
  
        }, {
          key: "select",
          value: function select() {
            if (this.field && (this.type === "text" || this.type === "textarea")) this.field.select();
          }
          /**
           * replaces a range of text
           * @param {string} replacement string to insert
           * @param {number=selectionStart} start 0-based index first character to replace
           * @param {number=selectionEnd} end 0-based index after last character to replace
           * @param {selectMode} after the text has been replaced:
           * "select" selects the newly inserted text,
           * "start" moves the selection to just before the inserted text,
           * "end" moves the selection to just after the inserted text, and
           * "preserve" attempts to preserve the selection. This is the default.
           * @memberof SimpleFieldsContainer
           */
  
        }, {
          key: "setRangeText",
          value: function setRangeText(replacement, start, end, selectMode) {
            if (this.field && (this.type === "text" || this.type === "textarea")) this.field.setRangeText(replacement, start, end, selectMode);
          }
          /**
           * selects a range of text
           * @param {string} replacement string to insert
           * @param {selectionStart} start 0-based index first character
           * @param {selectionEnd} end 0-based index after last character
           * @param {selectMode} selection direction: "forward", "backward", or default "none"
           * @memberof SimpleFieldsContainer
           */
  
        }, {
          key: "setSelectionRange",
          value: function setSelectionRange(selectionStart, selectionEnd, selectionDirection) {
            if (this.field && (this.type === "text" || this.type === "textarea")) this.field.setSelectionRange(selectionStart, selectionEnd, selectionDirection);
          }
          /**
           * decrements by a multiple of step
           *
           * @param {number} [n=1]
           * @memberof SimpleFieldsContainer
           */
  
        }, {
          key: "stepDown",
          value: function stepDown() {
            var n = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
            if (this.field && this.numeric) this.field.stepDown();
          }
          /**
           * increments by a multiple of step
           *
           * @param {number} [n=1]
           * @memberof SimpleFieldsContainer
           */
  
        }, {
          key: "stepUp",
          value: function stepUp() {
            var n = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
            if (this.field && this.numeric) this.field.stepUp();
          }
          /**
           * checks validation constraints and returns error data
           * @memberof SimpleFieldsContainer
           */
  
        }, {
          key: "validate",
          value: function validate() {
            var legend = this.field.querySelector("legend");
  
            if (this.requiredError) {
              this.error = true;
              this.errorMessage = this.requiredMessage || "required";
            } else if (this.numberError) {
              this.error = true;
              this.errorMessage = this.numberMessage || (this.numberError > 0 ? "select ".concat(this.numberError, " more") : "select ".concat(0 - this.numberError, " fewer"));
            } else if (this.patternError) {
              this.error = true;
              this.errorMessage = this.patternMessage || "invalid format";
            }
  
            if (this.hasFieldset && legend) {
              legend.innerHTML = legend.innerHTML.replace(/\**\s*$/, this.error ? "*" : "");
              legend.style.color = this.error ? "var(--simple-fields-error-color, #b40000)" : "";
            } // return true if we have no errors
            // return false if we DO have errors
  
  
            return !this.error;
          }
          /**
           * fires when error changes
           * @event error-changed
           */
  
        }, {
          key: "_fireErrorChanged",
          value: function _fireErrorChanged() {
            this.dispatchEvent(new CustomEvent("error-changed", {
              bubbles: true,
              cancelable: true,
              composed: true,
              detail: this
            }));
          }
          /**
           * generates a unique id
           * @returns {string } unique id
           */
  
        }, {
          key: "_generateUUID",
          value: function _generateUUID() {
            return "ss-s-s-s-sss".replace(/s/g, Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1));
          }
        }, {
          key: "_getFieldsetValue",
          value: function _getFieldsetValue() {
            var checked, value;
  
            if (this.field.querySelector("input[type=radio]")) {
              checked = this.field.querySelector("input:checked");
              value = checked ? checked.value : undefined;
            } else if (this.field.querySelector("input[type=checkbox]")) {
              value = [];
              checked = this.field.querySelectorAll("input:checked");
              checked.forEach(function (input) {
                return value.push(input.value);
              });
            }
  
            return value;
          }
          /**
           * gets the value of a field based on field type
           *
           * @memberof SimpleFieldsContainer
           */
  
        }, {
          key: "_getFieldValue",
          value: function _getFieldValue() {
            var _this4 = this;
  
            var value;
  
            if (this.field) {
              if (this.hasFieldset) {
                value = this._getFieldsetValue();
              } else if (this.type === "checkbox") {
                value = this.field.checked ? true : false;
              } else if (this.type === "radio") {
                value = this.field.checked ? true : false;
              } else if (this.type === "select") {
                value = this.multiple ? Object.keys(this.field.selectedOptions).map(function (option) {
                  return _this4.field.selectedOptions[option].value;
                }) : this.field.selectedOptions[0].value;
              } else {
                value = this.field.value;
              }
            }
  
            return value;
          }
          /**
           * gets a valid version of a given type
           *
           * @param {string} type
           * @returns {string}
           * @memberof SimpleFieldsContainer
           */
  
        }, {
          key: "_getValidType",
          value: function _getValidType(type) {
            if (type === "datetime" && this.validTypes.includes(type)) {
              return "datetime-local";
            } else if (this.validTypes.includes(type)) {
              return type;
            }
  
            return "text";
          }
          /**
           * handles field changes by field type
           *
           * @memberof SimpleFieldsContainer
           */
  
        }, {
          key: "_handleFieldChange",
          value: function _handleFieldChange() {
            if (this.type === "text" || this.type === "textarea") this._updateCount();
            if (this.autovalidate) this.validate();
            this.value = this._getFieldValue();
            if (this.type === "textarea") this.autoGrow();
          }
          /**
           * observes slotted field and listens for focusout
           * override for fields in shadow DOM
           *
           * @param {boolean} [init=true] whether to start observing or disconnect observer
           * @memberof SimpleFieldsContainer
           */
  
        }, {
          key: "_observeAndListen",
          value: function _observeAndListen() {
            var init = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
  
            if (init) {
              this.slottedFieldObserver.observe(this, {
                attributeFilter: ["disabled", "readonly", "required", "slot"],
                childlist: true
              });
  
              this._updateField();
  
              this.addEventListener("click", this.focus);
              this.addEventListener("focusout", this._onFocusout);
              this.addEventListener("focusin", this._onFocusin);
            } else {
              this.slottedFieldObserver.disconnect();
              this.removeEventListener("click", this.focus);
              this.removeEventListener("focusout", this._onFocusout);
              this.removeEventListener("focusin", this._onFocusin);
            }
          }
          /**
           * handles focusout validation
           *
           * @memberof SimpleFieldsContainer
           */
  
        }, {
          key: "_onFocusin",
          value: function _onFocusin() {
            this.error = false;
          }
          /**
           * handles focusout validation
           *
           * @memberof SimpleFieldsContainer
           */
  
        }, {
          key: "_onFocusout",
          value: function _onFocusout() {
            if (this.autovalidate) this.validate();
          }
          /**
           * updates field an type
           *
           * @memberof SimpleFieldsContainer
           */
  
        }, {
          key: "_updateField",
          value: function _updateField() {
            var oldfield = this.field;
            this.field = this.querySelector && this.querySelector("[slot=field]") ? this.querySelector("[slot=field]") : undefined;
            this.id = "".concat(this.fieldId || "", "-wrapper");
  
            if (this.field) {
              var tag = this.field.tagName.toLowerCase(),
                  type = this.field.getAttribute("type") || "text";
              this.type = this._getValidType(tag === "input" ? type : tag);
              this.required = this.field.required;
              this.disabled = this.field.disabled;
              this.readonly = this.field.readonly;
              this.field.setAttribute("aria-describedby", "field-bottom");
              /** add event listeners */
  
              this.addEventListener("change", this._handleFieldChange);
              this.addEventListener("input", this._handleFieldChange);
              /** field type-specific adjustments */
  
              if (this.type === "select") this.multiple = this.field.multiple;
  
              if (this.type === "textarea") {
                if (!this.field.getAttribute("rows")) this.field.setAttribute("rows", 1);
                this.field.addEventListener("keydown", function (e) {
                  return e.stopPropagation();
                });
              }
  
              if (this.type === "fieldset") {
                var legend = this.querySelector("legend");
  
                if (legend) {
                  legend.style.fontSize = "var(--simple-fields-detail-font-size, 12px)";
                  legend.style.fontFamily = "var(--simple-fields-detail-font-family, sans-serif)";
                  legend.style.lineHeight = "var(--simple-fields-detail-line-height, 22px)";
                  legend.style.paddingInlineStart = 0;
                  legend.style.paddingInlineEnd = 0;
                }
  
                this.querySelectorAll("label, input").forEach(function (el) {
                  return el.style.marginRight = "var(--simple-fields-margin, 16px)";
                });
                this.querySelectorAll("label input").forEach(function (el) {
                  return el.style.marginLeft = "calc(0 - var(--simple-fields-margin, 16px))";
                });
              }
            } else {
              this.disabled = false;
              this.readonly = false;
              this.required = false;
              this.type = undefined;
              /** remove event listeners from old field */
  
              if (oldfield) {
                if (oldfield.tagName.toLowerCase() === "textarea") oldfield.addEventListener("keydown", function (e) {
                  return e.stopPropagation();
                });
                oldfield.removeEventListener("change", this._handleFieldChange);
                oldfield.removeEventListener("input", this._handleFieldChange);
              }
            }
  
            if (this.field && this.__delayedFocus) this.focus();
          }
          /**
           * updates counter and sets maximum word count
           *
           * @memberof SimpleFieldsContainer
           */
  
        }, {
          key: "_updateCount",
          value: function _updateCount() {
            var _this5 = this;
  
            var count = "",
                word = "[\\w\\-\\']+",
                wordcounter = new RegExp(word, "gim"),
                maxlength = this.field.getAttribute("maxlength") || this.maxlength || false,
                maxword = this.maxwords || false,
                countmax = this.counter === "word" ? maxword : maxlength,
                regex = new RegExp(".{0,".concat(maxlength || 1, "}"), "g"),
                wordregex = new RegExp("(".concat(word, "\\W*){0,").concat(maxword || 1, "}"), "g"),
                matchval = function matchval(regex) {
              return ((_this5.field || {}).value || "").match(regex);
            },
                length = function length() {
              return !_this5.field.value ? 0 : _this5.field.value.length;
            },
                wordlength = function wordlength() {
              return !_this5.field || !_this5.field.value || !matchval(wordcounter) ? 0 : matchval(wordcounter).length;
            },
                correctLength = function correctLength(length, max, regex) {
              if (length && max && max < length && _this5.field.value.match(regex)) {
                _this5.field.value = matchval(regex)[0].trim();
              }
            };
  
            correctLength(length(), maxlength, regex);
            correctLength(wordlength(), maxword, wordregex);
            count = this.counter === "word" ? wordlength() : length();
            if (this.counter !== "none" && this.shadowRoot && this.shadowRoot.querySelector("#fieldmeta")) this.shadowRoot.querySelector("#fieldmeta").innerHTML = countmax ? "".concat(count, "/").concat(countmax) : count;
          }
        }], [{
          key: "tag",
          get: function get() {
            return "simple-fields-container";
          }
        }, {
          key: "styles",
          get: function get() {
            return [].concat(babelHelpers.toConsumableArray(_simpleFieldsUi.SimpleFieldsBaseStyles), babelHelpers.toConsumableArray(_simpleFieldsUi.SimpleFieldsLabelStyles), babelHelpers.toConsumableArray(_simpleFieldsUi.SimpleFieldsDescriptionStyles), [(0, _index.css)(_templateObject10_ff3e9b30feb911eb8439e3eec9305af7 || (_templateObject10_ff3e9b30feb911eb8439e3eec9305af7 = babelHelpers.taggedTemplateLiteral(["\n          :host {\n            display: block;\n          }\n          :host([error]) {\n            color: var(--simple-fields-error-color, #b40000);\n            transition: color 0.3s ease-in-out;\n          }\n          :host([disabled]) {\n            color: var(--simple-fields-disabled-color, #999999);\n          }\n          .field-main.inline,\n          .field-main > div,\n          #field-bottom {\n            display: flex;\n            align-items: stretch;\n            justify-content: flex-start;\n          }\n          * {\n            flex: 1 1 auto;\n          }\n          #fieldmeta {\n            text-align: right;\n          }\n          .field,\n          ::slotted([slot=\"field\"]) {\n            width: auto;\n            border: none;\n            color: var(--simple-fields-color, currentColor);\n            background-color: var(\n              --simple-fields-background-color,\n              transparent\n            );\n            transition: opacity ease-in-out;\n            flex: 1 0 auto;\n          }\n          ::slotted([slot=\"field\"]:focus) {\n            outline: none;\n          }\n          :host[inline] ::slotted([slot=\"field\"]:focus),\n          ::slotted([type=\"checkbox\"][slot=\"radio\"]:focus),\n          ::slotted([type=\"checkbox\"][slot=\"field\"]:focus) {\n            outline: unset;\n          }\n          .field-main.inline .field,\n          .field-main.inline ::slotted([slot=\"field\"]) {\n            min-width: var(--simple-fields-detail-line-height, 22px);\n            height: var(--simple-fields-detail-line-height, 22px);\n            margin: 0 var(--simple-fields-margin-small, 8px) 0 0;\n          }\n          .field[disabled],\n          :host([readonly]) ::slotted([slot=\"field\"]) {\n            opacity: var(--simple-fields-disabled-opacity, 0.7);\n            transition: opacity ease-in-out;\n          }\n          .field[readonly],\n          .field[disabled],\n          :host([readonly]) ::slotted([slot=\"field\"]),\n          :host([disabled]) ::slotted([slot=\"field\"]) {\n            cursor: not-allowed;\n            pointer-events: none;\n          }\n          .border-bottom {\n            height: 0;\n          }\n          :host([disabled]) .border-bottom {\n            border-bottom: 1px dashed var(--simple-fields-border-color, #999);\n          }\n          .border-bottom.blur {\n            border-bottom: 1px solid var(--simple-fields-border-color, #999);\n            width: 100%;\n          }\n          .border-bottom.focus {\n            margin: -1px auto 0;\n            width: 0;\n            border-bottom: 2px solid var(--simple-fields-accent-color, #3f51b5);\n            transition: width 0.5s ease-in-out;\n          }\n          :host(:focus-within) .border-bottom.focus {\n            width: 100%;\n            transition: width 0.5s ease-in-out;\n          }\n          :host([type=\"checkbox\"]) .border-bottom,\n          :host([type=\"color\"]) .border-bottom,\n          :host([type=\"file\"]) .border-bottom,\n          :host([type=\"radio\"]) .border-bottom,\n          :host([type=\"range\"]) .border-bottom {\n            display: none;\n          }\n          ::slotted(label:hover),\n          ::slotted(label:focus),\n          ::slotted(label:focus-within) {\n            color: var(--simple-fields-accent-color, #3f51b5);\n            transition: background-color 0.3s ease-in-out;\n          }\n          ::slotted(input) {\n            padding: 0px;\n          }\n          ::slotted(textarea[slot=\"field\"]) {\n            margin: 0;\n            transition: height 0.5s ease-in-out;\n            box-sizing: border-box;\n            vertical-align: bottom;\n          }\n          ::slotted(fieldset[slot=\"field\"]) {\n            margin: 0;\n            padding: 0;\n            border: none;\n            font-size: var(--simple-fields-font-size, 16px);\n            font-family: var(--simple-fields-font-family, sans-serif);\n            line-height: var(--simple-fields-line-height, 22px);\n            display: var(--simple-fields-radio-option-display, block);\n            flex-wrap: var(--simple-fields-radio-option-flex-wrap, wrap);\n            transition: color 0.3s ease-in-out;\n          }\n          ::slotted(fieldset[slot=\"field\"]:hover),\n          ::slotted(fieldset[slot=\"field\"]:focus),\n          ::slotted(fieldset[slot=\"field\"]:focus-within) {\n            color: var(--simple-fields-accent-color, #3f51b5);\n          }\n        "])))]);
          }
        }, {
          key: "properties",
          get: function get() {
            return {
              /**
               * Automatically validate field
               */
              autovalidate: {
                type: Boolean
              },
  
              /**
               * a counter text and textareas: "character", "word" or unset for none
               */
              counter: {
                type: String
              },
  
              /**
               * Optional description of the field (or use slot="description")
               */
              description: {
                type: String
              },
  
              /**
               * Whether the form control is disabled
               */
              disabled: {
                type: Boolean,
                reflect: true
              },
  
              /**
               * Optional validation error message to display
               */
              defaultErrorMessage: {
                type: String
              },
  
              /**
               * Optional required validation error message to display
               */
              defaultRequiredMessage: {
                type: String
              },
  
              /**
               * Whether field has errors
               */
              error: {
                type: Boolean,
                reflect: true
              },
  
              /**
               * Validation error message to display
               */
              errorMessage: {
                type: String
              },
  
              /**
               * Whether the field is hidden
               */
              hidden: {
                type: Boolean,
                reflect: true
              },
  
              /**
               * Field element
               */
              field: {
                type: Object
              },
  
              /**
               * Unique id
               */
              id: {
                type: String,
                reflect: true
              },
  
              /**
               * Whether field and label should be inline
               */
              inline: {
                type: Boolean,
                reflect: true
              },
  
              /**
               * Label for the field (or use slot="label")
               */
              label: {
                type: String
              },
  
              /**
               * Minimum number of checked items in fieldset
               */
              minchecked: {
                type: Number
              },
  
              /**
               * Minimum number of checked items in fieldset
               */
              maxchecked: {
                type: Number
              },
  
              /**
               * Maximum number of words in textarea
               */
              maxwords: {
                type: Number
              },
  
              /**
               * Name of the input form control. Submitted with the form as part of a name/value pair.
               */
              name: {
                type: String,
                reflect: true
              },
  
              /**
               * error message when number of items selected is not between min and max
               */
              numberMessage: {
                type: String
              },
  
              /**
               * regex pattern the value must match to be valid
               */
              pattern: {
                type: String
              },
  
              /**
               * error message when field does not match pattern
               */
              patternMessage: {
                type: String
              },
  
              /**
               * Optional prefix string (or use slot="prefix")
               */
              prefix: {
                type: String
              },
  
              /**
               * Value is not editable
               */
              readonly: {
                type: Boolean,
                reflect: true
              },
  
              /**
               * Whether field is required
               */
              required: {
                type: Boolean,
                reflect: true
              },
  
              /**
               * error message when field is required and has no value
               */
              requiredMessage: {
                type: String
              },
  
              /**
               * Optional suffix string (or use slot="suffix")
               */
              suffix: {
                type: String
              },
  
              /**
               * Type of input form control
               */
              type: {
                type: String
              },
  
              /**
               * List of valid field types
               */
              validTypes: {
                type: Array
              },
  
              /**
               * Value of field
               */
              value: {
                type: Object
              },
  
              /**
               * delays focus even until field is attached
               */
              __delayedFocus: {
                type: Boolean
              }
            };
          }
        }]);
        return _class;
      }(SuperClass);
    };
    /**
     *`simple-fields-container`
     * Progressive enhanced container HTML fields
     * with label, description, error massage,
     * and aria-invalid functionality if needed.
     *
     * @customElement
     * @group simple-fields
     * @element simple-fields-container
     * @demo ./demo/container.html
     * @class SimpleFieldsContainer
     * @extends {SimpleFieldsContainerBehaviors(LitElement)}
     */
  
  
    _exports.SimpleFieldsContainerBehaviors = SimpleFieldsContainerBehaviors;
  
    var SimpleFieldsContainer = /*#__PURE__*/function (_SimpleFieldsContaine) {
      babelHelpers.inherits(SimpleFieldsContainer, _SimpleFieldsContaine);
  
      var _super2 = _createSuper(SimpleFieldsContainer);
  
      function SimpleFieldsContainer() {
        babelHelpers.classCallCheck(this, SimpleFieldsContainer);
        return _super2.apply(this, arguments);
      }
  
      return SimpleFieldsContainer;
    }(SimpleFieldsContainerBehaviors(_index.LitElement));
  
    _exports.SimpleFieldsContainer = SimpleFieldsContainer;
    window.customElements.define(SimpleFieldsContainer.tag, SimpleFieldsContainer);
  });