brut-js 0.0.1

package/specs/public/js/bundle.js

@@ -0,0 +1,1284 @@
+(() => {
+  // src/Logger.js
+  var Logger = class {
+    /** Create a logger for the given prefix.
+     *
+     * @param {string|false} stringOrFalse - if false,returns a {@link BufferedLogger}. Otherwise, returns a {@link PrefixedLogger} using the param's value as the prefix.
+     *
+     * @returns {Logger}
+     */
+    static forPrefix(stringOrFalse) {
+      if (!stringOrFalse) {
+        return new BufferedLogger();
+      } else {
+        return new PrefixedLogger(stringOrFalse);
+      }
+    }
+    /** Subclasses must implement this.
+     *
+     * @param {string} level - 'info' or 'warn' to indicate the logging level
+     * @param {...*} args - args to pass directly to console.log
+     */
+    log() {
+      throw `Subclass must implement`;
+    }
+    /** Log an informational bit of information */
+    info(...args) {
+      this.log("info", ...args);
+    }
+    /** Log a warning */
+    warn(...args) {
+      this.log("warn", ...args);
+    }
+  };
+  var BufferedLogger = class extends Logger {
+    constructor() {
+      super();
+      this.messages = [];
+    }
+    log(...args) {
+      this.messages.push(args);
+    }
+  };
+  var PrefixedLogger = class extends Logger {
+    /** Create a PrefixedLogger.
+     *
+     * @param {string|true} prefixOrTrue - if true, uses the prefix `"debug"`, otherwise uses the param as the prefix to all
+     * messages output.
+     */
+    constructor(prefixOrTrue) {
+      super();
+      this.prefix = prefixOrTrue === true ? "debug" : prefixOrTrue;
+    }
+    /** Dumps hte contents of a {@link BufferedLogger} to this logger's output.
+     *
+     * @param {BufferedLogger} bufferedLogger - a logger with pent-up messages, waiting to be logged.
+     */
+    dump(bufferedLogger) {
+      if (bufferedLogger instanceof BufferedLogger) {
+        bufferedLogger.messages.forEach((args) => {
+          this.log(...args);
+        });
+      }
+    }
+    log(level, ...args) {
+      if (typeof args[0] === "string") {
+        const message = `[prefix:${this.prefix}]:${args[0]}`;
+        console[level](message, ...args.slice(1));
+      } else {
+        console[level](this.prefix, ...args);
+      }
+    }
+  };
+  var Logger_default = Logger;
+
+  // src/RichString.js
+  var RichString = class _RichString {
+    /** Prefer this over the constructor, as this will
+     * wrap `possiblyDefinedStringOrRichString` only if necessary
+     * as well as handle `null`.
+     *
+     * @param {null|undefined|String|RichString} possiblyDefinedStringOrRichString - if `null`, `undefined`, or otherwise falsey, this method returns `null`. If a String, returns a new `RichString` wrapping it. If a `RichString`, returns the `RichString` unchanged.
+     */
+    static fromString(possiblyDefinedStringOrRichString) {
+      if (possiblyDefinedStringOrRichString instanceof _RichString) {
+        return possiblyDefinedStringOrRichString;
+      }
+      if (!possiblyDefinedStringOrRichString) {
+        return null;
+      }
+      return new _RichString(String(possiblyDefinedStringOrRichString));
+    }
+    /** Prefer `fromString` */
+    constructor(string) {
+      if (typeof string !== "string") {
+        throw `You may only construct a RichString with a String, not a ${typeof string}`;
+      }
+      this.string = string;
+    }
+    /** Returns a `RichString` with the string capitalized. */
+    capitalize() {
+      return new _RichString(this.string.charAt(0).toUpperCase() + this.string.slice(1));
+    }
+    /** Returns a `RichString` with the string un-capitalized. */
+    decapitalize() {
+      return new _RichString(this.string.charAt(0).toLowerCase() + this.string.slice(1));
+    }
+    /** Returns a `RichString` with the string converted from snake or kebab case into camel case. */
+    camelize() {
+      return _RichString.fromString(this.string.replace(/[_.-](\w|$)/g, function(_, x) {
+        return x.toUpperCase();
+      }));
+    }
+    /** Returns a 'humanized' `RichString`, which is basically a de-camelized version with the first letter
+     * capitalized.
+     */
+    humanize() {
+      return this.decamlize({ spacer: " " }).capitalize();
+    }
+    /** Returns a `RichString` with the string converted from camel case to snake or kebab case.
+      *
+      * @param {Object} parameters
+      * @param {string} parameters.spacer ["_"] - a string to use when joining words together.
+      *
+      */
+    decamlize({ spacer = "_" } = {}) {
+      if (this.string.length < 2) {
+        return new _RichString(this.string.toLowerCase());
+      }
+      const replacement = `$1${spacer}$2`;
+      const decamelized = this.string.replace(
+        /([\p{Lowercase_Letter}\d])(\p{Uppercase_Letter})/gu,
+        replacement
+      );
+      return new _RichString(
+        decamelized.replace(
+          /(\p{Uppercase_Letter})(\p{Uppercase_Letter}\p{Lowercase_Letter}+)/gu,
+          replacement
+        ).toLowerCase()
+      );
+    }
+    /** Return the underlying String value */
+    toString() {
+      return this.string;
+    }
+    /** Return the underlying String value or null if the string is blank */
+    toStringOrNull() {
+      if (this.isBlank()) {
+        return null;
+      } else {
+        return this.string;
+      }
+    }
+    /* Returns true if this string has only whitespace in it */
+    isBlank() {
+      return this.string.trim() == "";
+    }
+  };
+  var RichString_default = RichString;
+
+  // src/BaseCustomElement.js
+  var BaseCustomElement = class extends HTMLElement {
+    /** A {@link Logger} you can use to write warning messages.  By default, these
+     * messages are not shown in the console. If you put `show-warnings` as an attribute on your
+     * element, warnings sent to this logger *are* shown.
+     */
+    logger = Logger_default.forPrefix(null);
+    #_connectedCallbackCalled = false;
+    #_disconnectedCallbackCalled = false;
+    constructor() {
+      super();
+      this.logger = Logger_default.forPrefix(null);
+    }
+    /** You must call this to define the custom element.  This is bascially
+     * a wrapper around `customElements.define`. It is recommended that you call 
+     * this inside a `DOMContentLoaded` event, or after the page's HTML has been processed.
+     * 
+     * @see external:CustomElementRegistry
+     */
+    static define() {
+      if (!this.tagName) {
+        throw `To use BaseCustomElement, you must define the static member tagName to return your custom tag's name`;
+      }
+      customElements.define(this.tagName, this);
+    }
+    showWarningsChangedCallback({ oldValue, newValue }) {
+      let oldLogger;
+      if (!oldValue && newValue) {
+        oldLogger = this.logger;
+      }
+      let prefix = newValue == "" ? this.id : newValue;
+      if (!prefix) {
+        prefix = "UNKNOWN COMPONENT";
+      }
+      this.logger = Logger_default.forPrefix(prefix);
+      if (oldLogger) {
+        this.logger.dump(oldLogger);
+      }
+    }
+    /**
+     * Overrides the standard callback to allow subclasses to have a slightly easier API when responding
+     * to attribute changes. You can override this to use the custom element callback directly. Note that if
+     * you do, `show-warnings` will not have any affect and you probably don't need to bother using
+     * this class as your base class.
+     *
+     * This method will locate a per-attribute method and call that.
+     * Attribute names are assumed to be in kebab-case and are translated to camelCase to create a method name.
+     * That method is `«attributeInCamelCase»ChangedCallback`, so if your attribute is `hex-code`,
+     * a method named `hexCodeChangedCallback` in invoked.  If no such method is defined, a
+     * warning is logged in the console, regardless of the `show-warnings` attribute.
+     *
+     * The method is invoked with `{oldValue,newValue,newValueAsBoolean}` - i.e. an object and not positional parameters. This 
+     * means your implementation can omit any parameters it doesn't care about. `newValueAsBoolean` is not part of
+     * the custom element spec, but is provided as an unambiguous way to know if a boolean attribute was set or not. This is
+     * because if the value is set, it is likely to be the empty string, which is considered false by JavaScript. Cool.
+     *
+     * The return value of the method is ignored.
+     *
+     * After your method is called, if there is a method named `update`, it is called with no arguments.
+     *
+     * What this allows you to do is separate how you manage your element's attributes from how your logic
+     * is managed. For complex elements that take a lot of attributes, this can simplify your element's code without straying too far from the spec.
+     *
+     * @example
+     *
+     * // If your element accepts the attribute `warning-message` that will be trimmed of whitespace
+     * // then placed into all `H1` tags inside the element, you can manage that like so:
+     * class MyElement extends BaseCustomElement {
+     *   static tagName = "my-element"
+     *   static observedAttributes = [
+     *     "warning-message",
+     *   ]
+     *
+     *   // called by attributeChangedCallback when warning-message's value changes
+     *   warningMessageChangedCallback({newValue}) {
+     *     this.warningMessage = (newValue || "").trim()
+     *   }
+     *
+     *   // called after attributeChangedCallback calls warningMessageChangedCallback
+     *   update() {
+     *     this.querySelectorAll("h1").forEach( (e) => e.textContent = this.warningMessage )
+     *   }
+     * }
+     *
+     *
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements}
+     *
+     */
+    attributeChangedCallback(name, oldValue, newValue) {
+      const callbackName = `${new RichString_default(name).camelize()}ChangedCallback`;
+      if (this[callbackName]) {
+        const newValueAsBoolean = newValue !== null;
+        this[callbackName]({ oldValue, newValue, newValueAsBoolean });
+      } else if (this.constructor.observedAttributes.indexOf(name) != -1) {
+        console.warn("Observing %s but no method named %s was found to handle it", name, callbackName);
+      }
+      this.__update();
+    }
+    /** Overrides the custom element callback to set internal flags allowing you to know if your
+     * element has been disconnected. When an element is disconnected, `update` is not called.
+     *
+     * If you want to add your own logic during disconnection, override {@link onDisconnected}.
+     *
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements}
+     */
+    disconnectedCallback() {
+      this.#_disconnectedCallbackCalled = true;
+      this.onDisconnected();
+    }
+    /** Override this to add logic when `disconnectedCallback` is called by the browser.  This will
+     * not be called if you overrode `disconnectedCallback`.
+     */
+    onDisconnected() {
+    }
+    /** Overrides the custom element callback to set internal flags allowing you to know if your
+     * element has been connected. `update` is still called for elements that have not yet connected, however
+     * in practice your element will be connected before any codepath that calls `update` is called.
+     *
+     * To add logic when your element is connected, override {@link onConnected}
+     *
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements}
+     * @see BaseCustomElement#connectedCallbackCalled
+     */
+    connectedCallback() {
+      this.#_connectedCallbackCalled = true;
+      this.onConnected();
+      this.__update();
+    }
+    /** Override this to add logic when `connectedCallback` is called by the browser. This will
+     * not be called if you overrode `connectedCallback`
+     */
+    onConnected() {
+    }
+    /** Returns true if this element is connected and the connected callback has been called.
+     * This is different from `Node#isConnected`, which can return true before `connectedCallback` is called.
+     */
+    get connectedCallbackCalled() {
+      return !!this.#_connectedCallbackCalled;
+    }
+    /** Override this to perform whatever logic your element must perform.
+     * Because changes to your element's attributes can happen at any time and in any order,
+     * you will want to consolidate all logic into one method—this one. You will also
+     * want to make sure that this method is idempotent and fault-tolerant.
+     *
+     * It is called by {@link BaseCustomElement#attributeChangedCallback|attributeChangedCallback} and {@link BaseCustomElement#connectedCallback|connectedCallback}, however
+     * it will *not* be called after the elment has been disconnected.
+     *
+     * That means that any event listeners, rendering, content manipulation, or other behavior should happen hear
+     * and it *must* be idempotent.  In particular, any event listeners you attach must be done with care. Using
+     * anonymous functions could result in duplicate listeners.
+     */
+    update() {
+    }
+    __update() {
+      if (this.#_disconnectedCallbackCalled) {
+        return;
+      }
+      this.update();
+    }
+  };
+  var BaseCustomElement_default = BaseCustomElement;
+
+  // src/I18nTranslation.js
+  var I18nTranslation = class extends BaseCustomElement_default {
+    static tagName = "brut-i18n-translation";
+    static observedAttributes = [
+      "show-warnings",
+      "key",
+      "value"
+    ];
+    #key = null;
+    #value = "";
+    keyChangedCallback({ newValue }) {
+      this.#key = newValue;
+    }
+    valueChangedCallback({ newValue }) {
+      this.#value = newValue ? String(newValue) : "";
+    }
+    /**
+     * Called by other JavaScript to get the translated string.
+     * @param {Object} interpolatedValues - Object where the keys are placeholders in the string for interpolation and the values are
+     * the values to replace.  Placeholders not in the translated value are ignored. Missing placeholders won't cause an error, but the
+     * placeholder will be present verbatim in the translated string.
+     *
+     * @example
+     * const element = document.querySeletor("brut-i18n-translation[key='greeting']")
+     * if (element) {
+     *   const translation = element.translation({ username: "Pat" })
+     *   alert(translation) // Shows 'Hello Pat'
+     * }
+     */
+    translation(interpolatedValues) {
+      return this.#value.replaceAll(/%\{([^}%]+)\}/g, (match, key) => {
+        if (interpolatedValues[key]) {
+          return interpolatedValues[key];
+        }
+        return match;
+      });
+    }
+  };
+  var I18nTranslation_default = I18nTranslation;
+
+  // src/ConstraintViolationMessage.js
+  var ConstraintViolationMessage = class _ConstraintViolationMessage extends BaseCustomElement_default {
+    static tagName = "brut-constraint-violation-message";
+    static observedAttributes = [
+      "show-warnings",
+      "key",
+      "input-name"
+    ];
+    static createElement(document2, attributes) {
+      const element = document2.createElement(_ConstraintViolationMessage.tagName);
+      element.setAttribute("key", this.i18nKey("fe", attributes.key));
+      element.setAttribute("input-name", attributes["input-name"]);
+      if (Object.hasOwn(attributes, "show-warnings")) {
+        element.setAttribute("show-warnings", attributes["show-warnings"]);
+      }
+      return element;
+    }
+    /** Returns the I18N key used for front-end constraint violations. This is useful
+     * if you need to construct a key and want to follow Brut's conventions on how they
+     * are managed.
+     *
+     * @param {...String} keyPath - parts of the path of the key after the namespace that Brut manages.
+     */
+    static i18nKey(...keyPath) {
+      const path = ["general", "cv"];
+      return path.concat(keyPath).join(".");
+    }
+    #key = null;
+    #inputNameKey = null;
+    #thisFieldKey = this.#i18nKey("this_field");
+    keyChangedCallback({ newValue }) {
+      this.#key = newValue;
+    }
+    inputNameChangedCallback({ newValue }) {
+      this.#inputNameKey = this.#i18nKey("fe", "fieldNames", newValue);
+    }
+    update() {
+      if (!this.#key) {
+        this.logger.info("No key attribute, so can't do anything");
+        return;
+      }
+      const selector = `${I18nTranslation_default.tagName}[key='${this.#key}']`;
+      const translation = document.querySelector(selector);
+      if (!translation) {
+        this.logger.info("Could not find translation based on selector '%s'", selector);
+        return;
+      }
+      const fieldNameSelector = `${I18nTranslation_default.tagName}[key='${this.#inputNameKey}']`;
+      const thisFieldSelector = `${I18nTranslation_default.tagName}[key='${this.#thisFieldKey}']`;
+      let fieldNameTranslation = document.querySelector(fieldNameSelector);
+      if (!fieldNameTranslation) {
+        this.logger.info("Could not find translation for input/field name based on selector '%s'. Will try 'this field' fallback", fieldNameSelector);
+        fieldNameTranslation = document.querySelector(thisFieldSelector);
+        if (!fieldNameTranslation) {
+          this.logger.info("Could not find translation for 'this field' fallback key, based on selector '%s'", thisFieldSelector);
+        }
+      }
+      const fieldName = fieldNameTranslation ? fieldNameTranslation.translation() : "this field";
+      this.textContent = RichString_default.fromString(translation.translation({ field: fieldName })).capitalize().toString();
+    }
+    /** Helper that calls the static version */
+    #i18nKey(...keyPath) {
+      return this.constructor.i18nKey(...keyPath);
+    }
+  };
+  var ConstraintViolationMessage_default = ConstraintViolationMessage;
+
+  // src/ConstraintViolationMessages.js
+  var ConstraintViolationMessages = class extends BaseCustomElement_default {
+    static tagName = "brut-constraint-violation-messages";
+    static observedAttributes = [
+      "show-warnings",
+      "server-side",
+      "input-name"
+    ];
+    serverSideChangedCallback({ newValueAsBoolean }) {
+    }
+    inputNameChangedCallback({ newValue }) {
+    }
+    /** 
+     * Creates error messages based on the passed `ValidityState` and input name.
+     *
+     * This should be called as part of a Form validation event to provide a customized UX for
+     * the error messages, beyond what the browser would do by default.  The keys used are the same
+     * as the attributes of a `ValidityState`, so for example, a range underflow would mean that `validity.rangeUnderflow` would return
+     * true.  Thus, a `<brut-constraint-violation-message>` would be created with `key="general.cv.fe.rangeUnderflow"`.
+     *
+     * The `cv.fe` is hard-coded to be consistent with Brut's server-side translation management.
+     *
+     * @param {ValidityState} validityState - the return from an element's `validity` when it's found to have constraint violations.
+     * @param {String} inputName - the element's `name`.
+     */
+    createMessages({ validityState, inputName }) {
+      const errors = this.#VALIDITY_STATE_ATTRIBUTES.filter((attribute) => validityState[attribute]);
+      this.clearMessages();
+      errors.forEach((key) => {
+        const options = {
+          key,
+          "input-name": inputName
+        };
+        const showWarnings = this.getAttribute("show-warnings");
+        if (showWarnings != null) {
+          options["show-warnings"] = showWarnings;
+        }
+        const element = ConstraintViolationMessage_default.createElement(document, options);
+        this.appendChild(element);
+      });
+    }
+    /**
+     * Clear all messages. Useful for when an input has become valid during a session.
+     */
+    clearMessages() {
+      this.textContent = "";
+    }
+    #VALIDITY_STATE_ATTRIBUTES = [
+      "badInput",
+      "customError",
+      "patternMismatch",
+      "rangeOverflow",
+      "rangeUnderflow",
+      "stepMismatch",
+      "tooLong",
+      "tooShort",
+      "typeMismatch",
+      "valueMissing"
+    ];
+  };
+  var ConstraintViolationMessages_default = ConstraintViolationMessages;
+
+  // src/AjaxSubmit.js
+  var AjaxSubmit = class extends BaseCustomElement_default {
+    static tagName = "brut-ajax-submit";
+    static observedAttributes = [
+      "show-warnings",
+      "requesting",
+      "submitted",
+      "submitted-lifetime",
+      "request-timeout",
+      "max-retry-attempts",
+      "log-request-errors"
+    ];
+    #requestErrorLogger = () => {
+    };
+    #formSubmitDelay = 0;
+    #submittedLifetime = 2e3;
+    #requestTimeout = 5e3;
+    #maxRetryAttempts = 25;
+    submittedLifetimeChangedCallback({ newValue }) {
+      const newValueAsInt = parseInt(newValue);
+      if (isNaN(newValueAsInt)) {
+        throw `submitted-lifetime must be a number, not '${newValue}'`;
+      }
+      this.#submittedLifetime = newValueAsInt;
+    }
+    maxRetryAttemptsChangedCallback({ newValue }) {
+      const num = parseInt(newValue);
+      if (isNaN(num)) {
+        this.logger.warn(`max-retry-attempts '${newValue}' is not a number. Using 1 as a fallback`);
+        this.#maxRetryAttempts = 1;
+      } else {
+        this.#maxRetryAttempts = num;
+      }
+    }
+    requestTimeoutChangedCallback({ newValue }) {
+      const newValueAsInt = parseInt(newValue);
+      if (isNaN(newValueAsInt)) {
+        throw `request-timeout must be a number, not '${newValue}'`;
+      }
+      this.#requestTimeout = newValueAsInt;
+    }
+    submittedChangedCallback({ newValueAsBoolean }) {
+    }
+    requestingChangedCallback({ newValueAsBoolean }) {
+      if (this.#button()) {
+        if (newValueAsBoolean) {
+          this.#button().setAttribute("disabled", true);
+        } else {
+          this.#button().removeAttribute("disabled", true);
+        }
+      }
+    }
+    logRequestErrorsChangedCallback({ newValueAsBoolean }) {
+      if (newValueAsBoolean) {
+        this.#requestErrorLogger = console.warn;
+        this.#formSubmitDelay = 2e3;
+      } else {
+        this.#requestErrorLogger = () => {
+        };
+        this.#formSubmitDelay = 0;
+      }
+    }
+    update() {
+      const button = this.#button();
+      if (!button) {
+        this.logger.info("Could not find a <button> to attach behavior to");
+        return;
+      }
+      const form2 = button.form;
+      if (!form2) {
+        this.logger.info("%o did not have a form associated with it - cannot attach behavior", button);
+        return;
+      }
+      button.form.addEventListener("submit", this.#formSubmitted);
+    }
+    #formSubmitted = (event) => {
+      const submitter = event.submitter;
+      if (submitter == this.#button()) {
+        event.preventDefault();
+        const now = Date.now();
+        this.#submitForm(event.target, now, 0);
+      }
+    };
+    #submitForm(form2, firstSubmittedAt, numAttempts) {
+      const headers = new Headers();
+      headers.append("X-Requested-With", "XMLHttpRequest");
+      headers.append("Content-Type", "application/x-www-form-urlencoded");
+      const formData = new FormData(form2);
+      const urlSearchParams = new URLSearchParams(formData);
+      const timeoutSignal = AbortSignal.timeout(this.#requestTimeout);
+      const request = new Request(
+        form2.action,
+        {
+          headers,
+          method: form2.method,
+          body: urlSearchParams,
+          signal: timeoutSignal
+        }
+      );
+      if (numAttempts > this.#maxRetryAttempts) {
+        this.#requestErrorLogger("%d attempts. Giving up", numAttempts);
+        this.#submitFormThroughBrowser(form2);
+        return;
+      }
+      this.setAttribute("requesting", true);
+      fetch(request).then((response) => {
+        if (response.ok) {
+          this.removeAttribute("requesting");
+          this.setAttribute("submitted", true);
+          setTimeout(() => this.removeAttribute("submitted"), this.#submittedLifetime);
+          this.dispatchEvent(new CustomEvent("brut:submitok"));
+        } else {
+          let retry = false;
+          let resubmit2 = false;
+          if (Date.now() - firstSubmittedAt > this.#requestTimeout) {
+            this.#requestErrorLogger("Since initial button press %d, it's taken more than %d ms to get a response.", firstSubmittedAt, this.#requestTimeout);
+            retry = false;
+            resubmit2 = true;
+          } else {
+            const status = parseInt(response.status);
+            if (isNaN(status)) {
+              this.#requestErrorLogger("Got unparseable status: %d", response.status);
+              retry = false;
+            } else if (status >= 500) {
+              this.#requestErrorLogger("Got a %d, maybe retry will fix", status);
+              retry = true;
+            } else {
+              retry = false;
+              if (status == 422) {
+                this.#handleConstraintViolations(response);
+              }
+            }
+          }
+          if (retry) {
+            this.#requestErrorLogger("Trying again (attempt %d)", numAttempts + 1);
+            setTimeout(() => this.#submitForm(form2, firstSubmittedAt, numAttempts + 1), numAttempts * 10);
+          } else if (resubmit2) {
+            this.#requestErrorLogger("'retry' was marked false, but resubmit is 'true', so submitting through browser");
+            this.#submitFormThroughBrowser(form2);
+            this.removeAttribute("requesting");
+          }
+        }
+      }).catch((error) => {
+        this.#requestErrorLogger("Got %o, which cannot be retried", error);
+        this.#submitFormThroughBrowser(form2);
+      });
+    }
+    #button = () => {
+      return this.querySelector("button");
+    };
+    #submitFormThroughBrowser(form2) {
+      form2.removeEventListener("submit", this.#formSubmitted);
+      if (this.#formSubmitDelay > 0) {
+        console.log("Form submission has been delayed by %d ms in order to allow examining the log", this.#formSubmitDelay);
+        setTimeout(() => form2.requestSubmit(this.#button()), this.#formSubmitDelay);
+      } else {
+        form2.requestSubmit(this.#button());
+      }
+    }
+    #handleConstraintViolations(response) {
+      response.text().then((text) => {
+        try {
+          const inputsToMessages = ErrorMessagesForInput.mapInputsToErrorMessages(
+            this.#errorMessagesFromServer(text),
+            this.#requestErrorLogger
+          );
+          let inputToScrollToAfterReportingValidity;
+          for (const [inputName, { input, messagesElement, errorMessages }] of Object.entries(inputsToMessages)) {
+            if (!inputToScrollToAfterReportingValidity) {
+              inputToScrollToAfterReportingValidity = input;
+            }
+            messagesElement.clearMessages();
+            errorMessages.forEach((element) => messagesElement.appendChild(element));
+            this.#setCustomValidityThatClearsOnChange(input, errorMessages);
+          }
+          if (inputToScrollToAfterReportingValidity) {
+            inputToScrollToAfterReportingValidity.scrollIntoView();
+          }
+          resubmit = false;
+          this.removeAttribute("requesting");
+          this.dispatchEvent(new CustomEvent("brut:submitinvalid"));
+        } catch (e) {
+          this.#requestErrorLogger("While parsing %s, got %s", text, e);
+          resubmit = true;
+        }
+        if (resubmit) {
+          this.#submitFormThroughBrowser(form);
+        }
+      });
+    }
+    #errorMessagesFromServer(text) {
+      const parser = new DOMParser();
+      const fragment = parser.parseFromString(text, "text/html");
+      return fragment.querySelectorAll(ConstraintViolationMessage_default.tagName);
+    }
+    #setCustomValidityThatClearsOnChange(input, errorMessages) {
+      input.setCustomValidity(errorMessages[0].textContent);
+      input.reportValidity();
+      input.addEventListener("change", () => input.setCustomValidity(""));
+    }
+  };
+  var ErrorMessagesForInput = class _ErrorMessagesForInput {
+    static mapInputsToErrorMessages(errorMessages, requestErrorLogger) {
+      const inputsToMessages = {};
+      Array.from(errorMessages).map((element) => {
+        return new _ErrorMessagesForInput({
+          element,
+          inputName: element.getAttribute("input-name"),
+          document
+        });
+      }).forEach((errorMessagesForInput) => {
+        if (errorMessagesForInput.allElementsFound()) {
+          if (!inputsToMessages[errorMessagesForInput.inputName]) {
+            inputsToMessages[errorMessagesForInput.inputName] = {
+              input: errorMessagesForInput.input,
+              messagesElement: errorMessagesForInput.messagesElement,
+              errorMessages: []
+            };
+          }
+          inputsToMessages[errorMessagesForInput.inputName].errorMessages.push(errorMessagesForInput.element);
+        } else {
+          requestErrorLogger("Server message %o could not be shown to the user: %s", errorMessagesForInput.element, errorMessagesForInput.reasonNotAllElementsFound());
+        }
+      });
+      return inputsToMessages;
+    }
+    constructor({ element, inputName, document: document2 }) {
+      this.element = element;
+      this.inputName = inputName;
+      if (this.inputName) {
+        const selector = `${ConstraintViolationMessages_default.tagName}[server-side][input-name='${this.inputName}']`;
+        this.messagesElement = document2.querySelector(selector);
+        if (this.messagesElement) {
+          this.closestForm = this.messagesElement.closest("form");
+        }
+        if (this.inputName && this.closestForm) {
+          this.input = this.closestForm.elements.namedItem(this.inputName);
+        }
+      }
+    }
+    allElementsFound() {
+      return !!this.input;
+    }
+    reasonNotAllElementsFound() {
+      let reason;
+      if (this.inputName) {
+        if (this.messagesElement) {
+          if (this.closestForm) {
+            reason = `Form did not contain an input named ${this.inputName}`;
+          } else {
+            reason = `Could not find a form that contained the ${ConstraintViolationMessages_default.tagName} element`;
+          }
+        } else {
+          reason = `Could not find a ${ConstraintViolationMessages_default.tagName} element for ${this.inputName}`;
+        }
+      } else {
+        reason = "server message was missing an input-name";
+      }
+      return reason;
+    }
+  };
+  var AjaxSubmit_default = AjaxSubmit;
+
+  // src/ConfirmationDialog.js
+  var ConfirmationDialog = class extends BaseCustomElement_default {
+    static tagName = "brut-confirmation-dialog";
+    static observedAttributes = [
+      "message",
+      "confirm-label",
+      "show-warnings"
+    ];
+    #onClose = () => {
+    };
+    #message = new RichString_default("");
+    #confirmLabel = new RichString_default("OK");
+    constructor() {
+      super();
+      this.okListener = (event) => {
+        this.#closeDialog();
+        this.#onClose(true);
+      };
+      this.cancelListener = (event) => {
+        this.#closeDialog();
+        this.#onClose(false);
+      };
+    }
+    messageChangedCallback({ newValue }) {
+      this.#message = RichString_default.fromString(newValue);
+    }
+    confirmLabelChangedCallback({ newValue }) {
+      this.#confirmLabel = RichString_default.fromString(newValue);
+    }
+    /**
+     * Call this to show the dialog.  When the dialog is closed, `onClose` is called with the result.
+     *
+     * @param {function} onClose - a function called with either `true` or `false`, if the dialog was confirmed or 
+     * denied, respectively.
+     *
+     * @example
+     * dialog.showModal( (confirmed) => {
+     *   if (confirmed) {
+     *     form.submit()
+     *   }
+     *   else {
+     *     // do nothing
+     *   }
+     * })
+     */
+    showModal(onClose) {
+      const dialog = this.#dialog;
+      if (dialog) {
+        this.#onClose = onClose || (() => {
+        });
+        dialog.showModal();
+      } else {
+        this.logger.warn("No <dialog> found to show");
+      }
+    }
+    get #dialog() {
+      return this.querySelector("dialog");
+    }
+    #closeDialog() {
+      const dialog = this.#dialog;
+      if (dialog) {
+        dialog.close();
+      }
+    }
+    update() {
+      const dialog = this.#dialog;
+      if (!dialog) {
+        this.logger.warn("Could not find a <dialog> - this custom element won't do anything");
+        return;
+      }
+      this.#setMessage(dialog);
+      this.#setupButtons();
+    }
+    #setMessage(dialog) {
+      const h1 = dialog.querySelector("h1");
+      if (h1) {
+        if (this.#message.isBlank()) {
+          h1.textContent = null;
+        } else {
+          h1.textContent = this.#message.toString();
+        }
+      } else {
+        this.logger.warn("Dialog had no <h1>, so nowhere to put the message");
+      }
+    }
+    #setupButtons() {
+      const okButton = this.querySelector("button[value='ok']");
+      const cancelButton = this.querySelector("button[value='cancel']");
+      if (!okButton || !cancelButton) {
+        if (!okButton) {
+          this.logger.warn("no <button value='ok'> which is required for this dialog to work");
+        }
+        if (!cancelButton) {
+          this.logger.warn("no <button value='cancel'> which is required for this dialog to work");
+        }
+        return;
+      }
+      okButton.textContent = this.#confirmLabel;
+      okButton.addEventListener("click", this.okListener);
+      cancelButton.addEventListener("click", this.cancelListener);
+    }
+  };
+  var ConfirmationDialog_default = ConfirmationDialog;
+
+  // src/ConfirmSubmit.js
+  var ConfirmSubmit = class extends BaseCustomElement_default {
+    static tagName = "brut-confirm-submit";
+    static observedAttributes = [
+      "message",
+      "dialog",
+      "show-warnings"
+    ];
+    #message = new RichString_default("");
+    #confirming = false;
+    #dialogId = null;
+    messageChangedCallback({ newValue }) {
+      this.#message = new RichString_default(newValue || "");
+    }
+    dialogChangedCallback({ newValue }) {
+      this.#dialogId = RichString_default.fromString(newValue);
+    }
+    constructor() {
+      super();
+      this.onClick = (event) => {
+        if (this.#confirming) {
+          this.#confirming = false;
+          return;
+        }
+        if (this.#message.isBlank()) {
+          this.logger.warn("No message provided, so cannot confirm");
+          return;
+        }
+        const dialog = this.#findDialog();
+        if (dialog) {
+          event.preventDefault();
+          dialog.setAttribute("message", this.#message.toString());
+          const buttonLabel = event.target.getAttribute("aria-label") || event.target.textContent;
+          dialog.setAttribute("confirm-label", buttonLabel);
+          this.#confirming = true;
+          dialog.showModal((confirm) => {
+            if (confirm) {
+              event.target.click();
+            } else {
+              this.#confirming = false;
+            }
+          });
+        } else {
+          const result = window.confirm(this.#message);
+          if (!result) {
+            event.preventDefault();
+          }
+        }
+      };
+    }
+    #findDialog() {
+      if (this.#dialogId) {
+        const dialog = document.getElementById(this.#dialogId);
+        if (dialog) {
+          if (dialog.tagName.toLowerCase() != ConfirmationDialog_default.tagName) {
+            throw `${this.#dialogId} is the id of a '${dialog.tagName}', not '${ConfirmationDialog_default.tagName}'`;
+          }
+          return dialog;
+        }
+        this.logger.warn(`No dialog with id ${this.#dialogId} - using window.confirm as a fallback`);
+        return null;
+      }
+      const dialogs = document.querySelectorAll(ConfirmationDialog_default.tagName);
+      if (dialogs.length == 1) {
+        return dialogs[0];
+      }
+      if (dialogs.length == 0) {
+        this.logger.warn(`No '${ConfirmationDialog_default.tagName}' found in document - using window.confirm as a fallback`);
+        return null;
+      }
+      throw `Found ${dialogs.length} '${ConfirmationDialog_default.tagName}' elements. Not sure which to use. Remove all but one or specify the 'dialog' attribute on this element to specify which one to use`;
+    }
+    update() {
+      this.querySelectorAll("button").forEach((button) => button.addEventListener("click", this.onClick));
+      this.querySelectorAll("input[type=submit]").forEach((button) => button.addEventListener("click", this.onClick));
+    }
+  };
+  var ConfirmSubmit_default = ConfirmSubmit;
+
+  // src/Form.js
+  var Form = class extends BaseCustomElement_default {
+    static tagName = "brut-form";
+    static observedAttributes = [
+      "show-warnings"
+    ];
+    #markFormSubmitted = (event) => {
+      const form2 = event.target.form;
+      if (!form2) {
+        this.logger.warn("%o had no form", event.target);
+        return;
+      }
+      form2.dataset["submitted"] = true;
+    };
+    #updateValidity = (event) => {
+      this.#updateErrorMessages(event);
+    };
+    #sendValid = () => {
+      this.dispatchEvent(new CustomEvent("brut:valid"));
+    };
+    #sendInvalid = () => {
+      this.dispatchEvent(new CustomEvent("brut:invalid"));
+    };
+    update() {
+      const forms = this.querySelectorAll("form");
+      if (forms.length == 0) {
+        this.logger.warn("Didn't find any forms. Ignoring");
+        return;
+      }
+      forms.forEach((form2) => {
+        Array.from(form2.elements).forEach((formElement) => {
+          formElement.addEventListener("invalid", this.#updateValidity);
+          formElement.addEventListener("invalid", this.#markFormSubmitted);
+          formElement.addEventListener("input", this.#updateValidity);
+        });
+        form2.querySelectorAll(AjaxSubmit_default.tagName).forEach((ajaxSubmits) => {
+          ajaxSubmits.addEventListener("brut:submitok", this.#sendValid);
+          ajaxSubmits.addEventListener("brut:submitinvalid", this.#sendInvalid);
+        });
+      });
+    }
+    #updateErrorMessages(event) {
+      const element = event.target;
+      const selector = `${ConstraintViolationMessages_default.tagName}:not([server-side])`;
+      const errorLabels = element.parentNode.querySelectorAll(selector);
+      if (errorLabels.length == 0) {
+        this.logger.warn(`Did not find any elements matching ${selector}, so no error messages will be shown`);
+        return;
+      }
+      let anyErrors = false;
+      errorLabels.forEach((errorLabel) => {
+        if (element.validity.valid) {
+          errorLabel.clearMessages();
+        } else {
+          anyErrors = true;
+          errorLabel.createMessages({
+            validityState: element.validity,
+            inputName: element.name
+          });
+        }
+      });
+      if (anyErrors) {
+        this.#sendInvalid();
+      } else {
+        this.#sendValid();
+      }
+    }
+  };
+  var Form_default = Form;
+
+  // src/Message.js
+  var Message = class _Message extends BaseCustomElement_default {
+    static tagName = "brut-message";
+    static observedAttributes = [
+      "show-warnings",
+      "key"
+    ];
+    static createElement(document2, attributes) {
+      const element = document2.createElement(_Message.tagName);
+      element.setAttribute("key", attributes.key);
+      element.setAttribute("show-warnings", attributes["show-warnings"]);
+      return element;
+    }
+    #key = null;
+    keyChangedCallback({ newValue }) {
+      this.#key = newValue;
+    }
+    update() {
+      if (!this.#key) {
+        this.logger.info("No key attribute, so can't do anything");
+        return;
+      }
+      const selector = `${I18nTranslation_default.tagName}[key='${this.#key}']`;
+      const translation = document.querySelector(selector);
+      if (!translation) {
+        this.logger.info("Could not find translation based on selector '%s'", selector);
+        return;
+      }
+      this.textContent = RichString_default.fromString(translation.translation()).capitalize().toString();
+    }
+  };
+  var Message_default = Message;
+
+  // src/Tabs.js
+  var Tabs = class extends BaseCustomElement_default {
+    static tagName = "brut-tabs";
+    static observedAttributes = [
+      "tab-selection-pushes-and-restores-state",
+      "show-warnings"
+    ];
+    tabSelectionPushesAndRestoresStateChangedCallback({ newValue, oldValue }) {
+      this.#pushAndRestoreTabState = newValue != null;
+    }
+    update() {
+      this.#tabs().forEach((tab) => {
+        tab.addEventListener("click", this.#tabClicked);
+      });
+    }
+    #pushAndRestoreTabState = false;
+    #tabClicked = (event) => {
+      event.preventDefault();
+      this.#setTabAsSelected(event.target);
+      event.preventDefault();
+    };
+    #reloadTab = (event) => {
+      const tab = document.getElementById(event.state.tabId);
+      if (tab) {
+        this.#setTabAsSelected(tab, { skipPushState: true });
+      }
+    };
+    #setTabAsSelected(selectedTab, { skipPushState = false } = {}) {
+      this.#tabs().forEach((tab) => {
+        const tabPanels = [];
+        const ariaControls = tab.getAttribute("aria-controls");
+        if (ariaControls) {
+          ariaControls.split(/\s+/).forEach((id) => {
+            const panel = document.getElementById(id);
+            if (panel) {
+              tabPanels.push(panel);
+            } else {
+              this.logger.warn("Tab %o references panel with id %s, but no such element exists with that id", tab, id);
+            }
+          });
+        }
+        if (tab == selectedTab) {
+          tab.setAttribute("aria-selected", true);
+          tab.setAttribute("tabindex", "0");
+          tabPanels.forEach((panel) => panel.removeAttribute("hidden"));
+          if (this.#pushAndRestoreTabState && !skipPushState) {
+            let href = tab.getAttribute("href") || "";
+            if (href.startsWith("?")) {
+              let hrefQueryString = href.slice(1);
+              const anchorIndex = hrefQueryString.indexOf("#");
+              if (anchorIndex != -1) {
+                hrefQueryString = hrefQueryString.slice(-1 * (hrefQueryString.length - anchorIndex - 1));
+              }
+              const currentQuery = new URLSearchParams(window.location.search);
+              const hrefQuery = new URLSearchParams(hrefQueryString);
+              hrefQuery.forEach((value, key) => {
+                currentQuery.set(key, value);
+              });
+              href = "?" + currentQuery.toString() + (anchorIndex == -1 ? "" : hrefQueryString.slice(anchorIndex));
+            }
+            window.history.pushState({ tabId: tab.id }, "", href);
+            window.addEventListener("popstate", this.#reloadTab);
+          }
+          this.dispatchEvent(new CustomEvent("brut:tabselected", { tabId: tab.id }));
+        } else {
+          tab.setAttribute("aria-selected", false);
+          tab.setAttribute("tabindex", "-1");
+          tabPanels.forEach((panel) => panel.setAttribute("hidden", true));
+        }
+      });
+    }
+    #tabs() {
+      const tabs = [];
+      this.querySelectorAll("[role=tab]").forEach((tab) => {
+        if (tab.tagName.toLowerCase() == "a" || tab.tagName.toLowerCase() == "button") {
+          tabs.push(tab);
+        } else {
+          this.logger.warn("An element with tag %s was assigned role=tab, and %s doesn't work that way. Use an <a> or a <button>", tab.tagName, this.constructor.name);
+        }
+      });
+      return tabs;
+    }
+  };
+  var Tabs_default = Tabs;
+
+  // src/LocaleDetection.js
+  var LocaleDetection = class extends BaseCustomElement_default {
+    static tagName = "brut-locale-detection";
+    static observedAttributes = [
+      "locale-from-server",
+      "timezone-from-server",
+      "url",
+      "timeout-before-ping-ms",
+      "show-warnings"
+    ];
+    #localeFromServer = null;
+    #timezoneFromServer = null;
+    #reportingURL = null;
+    #timeoutBeforePing = 1e3;
+    #serverContacted = false;
+    localeFromServerChangedCallback({ newValue }) {
+      this.#localeFromServer = newValue;
+    }
+    timezoneFromServerChangedCallback({ newValue }) {
+      this.#timezoneFromServer = newValue;
+    }
+    urlChangedCallback({ newValue }) {
+      if (this.#serverContacted) {
+        this.#serverContacted = false;
+      }
+      this.#reportingURL = newValue;
+    }
+    timeoutBeforePingMsChangedCallback({ newValue }) {
+      this.#timeoutBeforePing = newValue;
+    }
+    update() {
+      if (this.#timeoutBeforePing == 0) {
+        this.#pingServerWithLocaleInfo();
+      } else {
+        setTimeout(this.#pingServerWithLocaleInfo.bind(this), this.#timeoutBeforePing);
+      }
+    }
+    #pingServerWithLocaleInfo() {
+      if (!this.#reportingURL) {
+        this.logger.info("no url= set, so nowhere to report to");
+        return;
+      }
+      if (this.#localeFromServer && this.#timezoneFromServer) {
+        this.logger.info("locale and timezone both set, not contacting server");
+        return;
+      }
+      if (this.#serverContacted) {
+        this.logger.info("server has already been contacted at the given url, not doing it again");
+        return;
+      }
+      this.#serverContacted = true;
+      const formatOptions = Intl.DateTimeFormat().resolvedOptions();
+      const request = new Request(
+        this.#reportingURL,
+        {
+          headers: {
+            "Content-Type": "application/json"
+          },
+          method: "POST",
+          body: JSON.stringify({
+            locale: formatOptions.locale,
+            timeZone: formatOptions.timeZone
+          })
+        }
+      );
+      window.fetch(request).then((response) => {
+        if (response.ok) {
+          this.logger.info("Server gave us the OK");
+        } else {
+          console.warn(response);
+        }
+      }).catch((e) => {
+        console.warn(e);
+      });
+    }
+  };
+  var LocaleDetection_default = LocaleDetection;
+
+  // src/Autosubmit.js
+  var Autosubmit = class extends BaseCustomElement_default {
+    static tagName = "brut-autosubmit";
+    static observedAttributes = [
+      "show-warnings"
+    ];
+    #submitForm = (event) => {
+      const form2 = this.closest("form");
+      if (!form2) {
+        this.logger.info("No longer a form containing this element");
+        return;
+      }
+      if (event.target.form != form2) {
+        this.logger.info("Event target %o's form is not the form that contains this element", event.target);
+        return;
+      }
+      form2.requestSubmit();
+    };
+    update() {
+      const form2 = this.closest("form");
+      if (!form2) {
+        this.logger.info("No form containing this element - nothing to autosubmit");
+        return;
+      }
+      const inputs = Array.from(this.querySelectorAll("input, textarea, select")).filter((element) => {
+        return element.form == form2;
+      });
+      if (inputs.length == 0) {
+        this.logger.info("No input, textarea, or select inside this element belongs to the form containing this element");
+        return;
+      }
+      inputs.forEach((input) => {
+        input.addEventListener("change", this.#submitForm);
+      });
+    }
+  };
+  var Autosubmit_default = Autosubmit;
+
+  // src/index.js
+  var BrutCustomElements = class {
+    static elementClasses = [];
+    static define() {
+      this.elementClasses.forEach((e) => {
+        e.define();
+      });
+    }
+    static addElementClasses(...classes) {
+      this.elementClasses.push(...classes);
+    }
+  };
+  BrutCustomElements.addElementClasses(
+    // Ordering is important here - TBD how to make sure these are created in order
+    I18nTranslation_default,
+    Message_default,
+    ConfirmSubmit_default,
+    ConfirmationDialog_default,
+    ConstraintViolationMessages_default,
+    Form_default,
+    AjaxSubmit_default,
+    ConstraintViolationMessage_default,
+    Tabs_default,
+    LocaleDetection_default,
+    Autosubmit_default
+  );
+
+  // src/appForTestingOnly.js
+  document.addEventListener("DOMContentLoaded", () => {
+    BrutCustomElements.define();
+    if (!HTMLDialogElement.prototype.showModal) {
+      HTMLDialogElement.prototype.showModal = function() {
+        this.open = true;
+      };
+    }
+    if (!HTMLDialogElement.prototype.close) {
+      HTMLDialogElement.prototype.close = function(returnValue) {
+        this.open = false;
+        this.returnValue = returnValue;
+      };
+    }
+  });
+})();
+//# sourceMappingURL=bundle.js.map