@graupl/graupl 1.0.0-alpha.9 → 1.0.0-beta.0

package/dist/js/graupl.esm.js

@@ -0,0 +1,1462 @@
+var F = Object.defineProperty;
+var O = (e, t, s) => t in e ? F(e, t, { enumerable: !0, configurable: !0, writable: !0, value: s }) : e[t] = s;
+var r = (e, t, s) => O(e, typeof t != "symbol" ? t + "" : t, s);
+function f(e, t) {
+  try {
+    if (typeof t != "object") {
+      const s = typeof t;
+      throw new TypeError(
+        `Elements given to isValidInstance() must be inside of an object. "${s}" given.`
+      );
+    }
+    for (const s in t)
+      if (!(t[s] instanceof e)) {
+        const i = typeof t[s];
+        throw new TypeError(
+          `${s} must be an instance of ${e.name}. "${i}" given.`
+        );
+      }
+    return {
+      status: !0,
+      error: null
+    };
+  } catch (s) {
+    return {
+      status: !1,
+      error: s
+    };
+  }
+}
+function a(e, t) {
+  try {
+    if (typeof t != "object") {
+      const s = typeof t;
+      throw new TypeError(
+        `Values given to isValidType() must be inside of an object. "${s}" given.`
+      );
+    }
+    for (const s in t) {
+      const i = typeof t[s];
+      if (i !== e)
+        throw new TypeError(`${s} must be a ${e}. "${i}" given.`);
+    }
+    return {
+      status: !0,
+      error: null
+    };
+  } catch (s) {
+    return {
+      status: !1,
+      error: s
+    };
+  }
+}
+function w(e) {
+  try {
+    if (typeof e != "object") {
+      const t = typeof e;
+      throw new TypeError(
+        `Values given to isQuerySelector() must be inside of an object. "${t}" given.`
+      );
+    }
+    for (const t in e)
+      try {
+        if (e[t] === null)
+          throw new Error();
+        document.querySelector(e[t]);
+      } catch {
+        throw new TypeError(
+          `${t} must be a valid query selector. "${e[t]}" given.`
+        );
+      }
+    return {
+      status: !0,
+      error: null
+    };
+  } catch (t) {
+    return {
+      status: !1,
+      error: t
+    };
+  }
+}
+function h(e) {
+  try {
+    if (typeof e != "object" || Array.isArray(e)) {
+      const t = typeof e;
+      throw new TypeError(
+        `Values given to isValidClassList() must be inside of an object. "${t}" given.`
+      );
+    }
+    for (const t in e) {
+      const s = typeof e[t];
+      if (s !== "string")
+        if (Array.isArray(e[t]))
+          e[t].forEach((i) => {
+            if (typeof i != "string")
+              throw new TypeError(
+                `${t} must be a string or an array of strings. An array containing non-strings given.`
+              );
+          });
+        else
+          throw new TypeError(
+            `${t} must be a string or an array of strings. "${s}" given.`
+          );
+      else {
+        const i = {};
+        i[t] = e[t], w(i);
+      }
+    }
+    return {
+      status: !0,
+      error: null
+    };
+  } catch (t) {
+    return {
+      status: !1,
+      error: t
+    };
+  }
+}
+function g(e, t) {
+  if (a("string", { tagName: e }).status && f(HTMLElement, t).status) {
+    const s = e.toLowerCase();
+    let i = !0;
+    for (const n in t)
+      t[n].tagName.toLowerCase() !== s && (i = !1);
+    return i;
+  } else
+    return !1;
+}
+function u(e, t) {
+  e === "" || e.length === 0 || (typeof e == "string" ? t.classList.add(e) : t.classList.add(...e));
+}
+function c(e, t) {
+  e === "" || e.length === 0 || (typeof e == "string" ? t.classList.remove(e) : t.classList.remove(...e));
+}
+function m(e) {
+  try {
+    const t = e.key || e.keyCode, s = {
+      Enter: t === "Enter" || t === 13,
+      Space: t === " " || t === "Spacebar" || t === 32,
+      Escape: t === "Escape" || t === "Esc" || t === 27,
+      ArrowUp: t === "ArrowUp" || t === "Up" || t === 38,
+      ArrowRight: t === "ArrowRight" || t === "Right" || t === 39,
+      ArrowDown: t === "ArrowDown" || t === "Down" || t === 40,
+      ArrowLeft: t === "ArrowLeft" || t === "Left" || t === 37,
+      Home: t === "Home" || t === 36,
+      End: t === "End" || t === 35,
+      Tab: t === "Tab" || t === 9
+    };
+    return Object.keys(s).find((i) => s[i] === !0) || "";
+  } catch {
+    return "";
+  }
+}
+function _(e) {
+  e.preventDefault(), e.stopPropagation();
+}
+function q(e = null) {
+  window.Graupl = window.Graupl || {}, a("string", { type: e }) && (window.Graupl[e] = window.Graupl[e] || {});
+}
+function j(e = null) {
+  return a("string", { type: e }) ? window.Graupl[e] : window.Graupl;
+}
+function K(e, t = {}) {
+  a("string", { type: e }) && a("object", { data: t }) && (window.Graupl[e] = t);
+}
+function z(e) {
+  a("string", { type: e }) && (window.Graupl[e] = {});
+}
+function H(e, t, s) {
+  a("string", { type: e, key: t }) && (window.Graupl[e][t] = s);
+}
+function P(e, t) {
+  return a("string", { type: e, key: t }) ? window.Graupl[e][t] : null;
+}
+function V(e, t) {
+  a("string", { type: e, key: t }) && delete window.Graupl[e][t];
+}
+const C = {
+  initializeStorage: q,
+  getStorage: j,
+  setStorage: K,
+  clearStorage: z,
+  pushToStorage: H,
+  getFromStorage: P,
+  removeFromStorage: V
+};
+class R {
+  /**
+   * Constructs a new `Alert`.
+   *
+   * @param {object}               options                                   - The options object.
+   * @param {HTMLElement}          options.alertElement                      - The alert element.
+   * @param {?HTMLElement}         [options.controllerElement = null]        - The controller element.
+   * @param {string|string[]|null} [options.showClass = show]                - The class to add when the alert is shown.
+   * @param {string|string[]|null} [options.hideClass = hide]                - The class to add when
+   * @param {string|string[]|null} [options.transitionClass = transitioning] - The class to add when the alert is transitioning between shown and hidden.
+   * @param {number}               [options.transitionTimer = 150]           - The time in milliseconds the transition will take.
+   * @param {boolean}              [options.isHidden = false]                - A flag to determine the initial state of the alert.
+   * @param {?string}              [options.key = null]                      - The key used to generate IDs throughout the alert.
+   * @param {boolean}              [options.initialize = false]              - AA flag to initialize the alert immediately upon creation.
+   */
+  constructor({
+    alertElement: t,
+    controllerElement: s = null,
+    showClass: i = "show",
+    hideClass: n = "hide",
+    transitionClass: l = "transitioning",
+    transitionTimer: d = 150,
+    isHidden: p = !1,
+    key: o = null,
+    initialize: y = !1
+  }) {
+    /**
+     * The HTML elements for the alert in the DOM.
+     *
+     * @protected
+     *
+     * @type {Object<HTMLElement>}
+     */
+    r(this, "_dom", {
+      alert: null,
+      controller: null
+    });
+    /**
+     * A flag to determine if the alert is hidden.
+     *
+     * @protected
+     *
+     * @type {boolean}
+     */
+    r(this, "_hidden", !1);
+    /**
+     * The class to use to show the alert.
+     *
+     * @protected
+     *
+     * @type {string|string[]}
+     */
+    r(this, "_showClass", "");
+    /**
+     * The class to use to hide the alert.
+     *
+     * @protected
+     *
+     * @type {string|string[]}
+     */
+    r(this, "_hideClass", "");
+    /**
+     * The class to use when transitioning the alert.
+     *
+     * @protected
+     *
+     * @type {string|string[]}
+     */
+    r(this, "_transitionClass", "");
+    /**
+     * The time in milliseconds the transition will take.
+     *
+     * @protected
+     *
+     * @type {number}
+     */
+    r(this, "_transitionTimer", 150);
+    /**
+     * The key used to generate IDs throughout the carousel.
+     *
+     * @protected
+     *
+     * @type {string}
+     */
+    r(this, "_key", "");
+    /**
+     * An array of error messages generated by the alert.
+     *
+     * @protected
+     *
+     * @type {string[]}
+     */
+    r(this, "_errors", []);
+    /**
+     * The event that is triggered when the alert is shown.
+     *
+     * @protected
+     *
+     * @event grauplAlertShow
+     *
+     * @type {CustomEvent}
+     *
+     * @property {boolean}       bubbles - A flag to bubble the event.
+     * @property {Object<Alert>} detail  - The details object container the Alert itself.
+     */
+    r(this, "_showEvent", new CustomEvent("grauplAlertShow", {
+      bubbles: !0,
+      detail: { alert: this }
+    }));
+    /**
+     * The event that is triggered when the alert is hidden.
+     *
+     * @protected
+     *
+     * @event grauplAlertHide
+     *
+     * @type {CustomEvent}
+     *
+     * @property {boolean}       bubbles - A flag to bubble the event.
+     * @property {Object<Alert>} detail  - The details object containing the Alert itself.
+     */
+    r(this, "_hideEvent", new CustomEvent("grauplAlertHide", {
+      bubbles: !0,
+      detail: { alert: this }
+    }));
+    this._dom.alert = t, this._dom.controller = s, this._showClass = i || "", this._hideClass = n || "", this._transitionClass = l || "", this._transitionTimer = d, this._hidden = p, this._key = o || "", y && this.initialize();
+  }
+  /**
+   * Initializes the alert.
+   */
+  initialize() {
+    try {
+      if (!this._validate())
+        throw new Error(
+          `Graupl Alert: cannot initialize alert. The following errors have been found:
+ - ${this.errors.join(
+            `
+ - `
+          )}`
+        );
+      this._generateKey(), this._setIds(), this._handleClick(), this._handleKeydown(), this._handleKeyup(), C.initializeStorage("alerts"), C.pushToStorage("alerts", this.dom.alert.id, this);
+    } catch (t) {
+      console.error(t);
+    }
+  }
+  /**
+   * The HTML elements for the alert in the DOM.
+   *
+   * @readonly
+   *
+   * @see _dom
+   *
+   * @type {object}
+   */
+  get dom() {
+    return this._dom;
+  }
+  /**
+   * The class to use the show the alert.
+   *
+   * @type {string|string[]}
+   *
+   * @see _showClass
+   */
+  get showClass() {
+    return this._showClass;
+  }
+  /**
+   * The class to use to hide the alert.
+   *
+   * @type {string|string[]}
+   *
+   * @see _hideClass
+   */
+  get hideClass() {
+    return this._hideClass;
+  }
+  /**
+   * The class to use when transitioning the alert.
+   *
+   * @type {string|string[]}
+   *
+   * @see _transitionClass
+   */
+  get transitionClass() {
+    return this._transitionClass;
+  }
+  /**
+   * The time in milliseconds the transition will take.
+   *
+   * @type {number}
+   *
+   * @see _transitionTimer
+   */
+  get transitionTimer() {
+    return this._transitionTimer;
+  }
+  /**
+   * The key used to generate IDs throughout the accordion.
+   *
+   * @type {string}
+   *
+   * @see _key
+   */
+  get key() {
+    return this._key;
+  }
+  set showClass(t) {
+    h({ showClass: t }), this._showClass !== t && (this._showClass = t);
+  }
+  set hideClass(t) {
+    h({ hideClass: t }), this._hideClass !== t && (this._hideClass = t);
+  }
+  set transitionClass(t) {
+    h({ transitionClass: t }), this._transitionClass !== t && (this._transitionClass = t);
+  }
+  set transitionTimer(t) {
+    a("number", { transitionTimer: t }), this._transitionTimer !== t && (this._transitionTimer = t);
+  }
+  set key(t) {
+    a("string", { value: t }), this._key !== t && (this._key = t);
+  }
+  /**
+   * Validates all aspects of the alert to ensure proper functionality.
+   *
+   * @protected
+   *
+   * @return {boolean} - The result of the validation.
+   */
+  _validate() {
+    let t = !0, s;
+    if (this._dom.controller !== null ? s = f(HTMLElement, {
+      alertElement: this._dom.alert,
+      controllerElement: this._dom.controller
+    }) : s = f(HTMLElement, {
+      alertElement: this._dom.alert
+    }), s.status || (this._errors.push(s.message), t = !1), this._showClass !== "") {
+      const l = h({ showClass: this._showClass });
+      l.status || (this._errors.push(l.message), t = !1);
+    }
+    if (this._hideClass !== "") {
+      const l = h({ hideClass: this._hideClass });
+      l.status || (this._errors.push(l.message), t = !1);
+    }
+    if (this._transitionClass !== "") {
+      const l = h({
+        transitionClass: this._transitionClass
+      });
+      l.status || (this._errors.push(l.message), t = !1);
+    }
+    const i = a("number", {
+      transitionTimer: this._transitionTimer
+    });
+    i.status || (this._errors.push(i.message), t = !1);
+    const n = a("boolean", { isHidden: this._hidden });
+    return n.status || (this._errors.push(n.message), t = !1), t;
+  }
+  /**
+   * Generates a key for the alert.
+   *
+   * @param {boolean} [regenerate = false] - A flag to determine if the key should be regenerated.
+   */
+  _generateKey(t = !1) {
+    (this.key === "" || t) && (this.key = Math.random().toString(36).replace(/[^a-z]+/g, "").substring(0, 10));
+  }
+  /**
+   * Sets the IDs of the alert and it's children if they do not already exist.
+   *
+   * The generated IDs use the key and follow the format:
+   *  - alert: `alert-${key}`
+   *  - controller: `alert-controller-${key}`
+   */
+  _setIds() {
+    this.dom.alert.id = this.dom.alert.id || `alert-${this.key}`, this.dom.controller.id = this.dom.controller.id || `alert-controller-${this.key}`;
+  }
+  /**
+   * Shows the alert.
+   *
+   * @fires grauplAlertShow
+   *
+   * @param {boolean} [emit = true] - A toggle to emit the show event once shown.
+   */
+  show(t = !0) {
+    this._hidden && (this.transitionClass !== "" ? (u(this.transitionClass, this.dom.alert), requestAnimationFrame(() => {
+      this.hideClass !== "" && c(this.hideClass, this.dom.alert), requestAnimationFrame(() => {
+        this.showClass !== "" && u(this.showClass, this.dom.alert), requestAnimationFrame(() => {
+          c(this.transitionClass, this.dom.alert);
+        });
+      });
+    })) : (this.showClass !== "" && u(this.showClass, this.dom.alert), this.hideClass !== "" && c(this.hideClass, this.dom.alert)), this._hidden = !1, t && this.dom.alert.dispatchEvent(this._hideEvent));
+  }
+  /**
+   * Hides the alert.
+   *
+   * @fires grauplAlertHide
+   *
+   * @param {boolean} [emit = true] - A toggle to emit the hide event once shown.
+   */
+  hide(t = !0) {
+    this._hidden || (this.transitionClass !== "" ? (u(this.transitionClass, this.dom.alert), requestAnimationFrame(() => {
+      this.showClass !== "" && c(this.showClass, this.dom.alert), requestAnimationFrame(() => {
+        this.transitionTimer > 0 ? setTimeout(() => {
+          this.hideClass !== "" && u(this.hideClass, this.dom.alert), requestAnimationFrame(() => {
+            c(this.transitionClass, this.dom.alert);
+          });
+        }, this.transitionTimer) : (this.hideClass !== "" && u(this.hideClass, this.dom.alert), requestAnimationFrame(() => {
+          c(this.transitionClass, this.dom.alert);
+        }));
+      });
+    })) : (this.hideClass !== "" && u(this.hideClass, this.dom.alert), this.showClass !== "" && c(this.showClass, this.dom.alert)), this._hidden = !0, t && this.dom.alert.dispatchEvent(this._hideEvent));
+  }
+  /**
+   * Handles click events throughout the alert for proper use.
+   *
+   * - Adds a `pointerup` listener to the controller that will hide the alert.
+   *
+   * @protected
+   */
+  _handleClick() {
+    this.dom.controller !== null && this.dom.controller.addEventListener("pointerup", () => this.hide());
+  }
+  /**
+   * Handles keydown events throughout the alert for proper use.
+   *
+   * This method exists to assist the _handleKeyup method.
+   *
+   * - Adds a `keydown` listener to the controller (if it exists).
+   *   - Blocks propagation on "Space" and "Enter" keys.
+   */
+  _handleKeydown() {
+    this.dom.controller !== null && this.dom.controller.addEventListener("keydown", (t) => {
+      const s = m(t);
+      (s === "Space" || s === "Enter") && _(t);
+    });
+  }
+  /**
+   * Handles keyup events throughout the alert for proper use.
+   *
+   * - Adds a `keyup` listener to the controller (if it exists).
+   *   - Hides the alert when the user hits "Space" or "Enter".
+   */
+  _handleKeyup() {
+    this.dom.controller !== null && this.dom.controller.addEventListener("keyup", (t) => {
+      const s = m(t);
+      (s === "Space" || s === "Enter") && this.hide();
+    });
+  }
+}
+class U {
+  /**
+   * Contructs a new `Carousel`.
+   *
+   * @param {object}             options                                                                  - The options for the generated carousel.
+   * @param {HTMLElement}        options.carouselElement                                                  - The carousel element in the DOM.
+   * @param {string}             [options.carouselItemSelector = .carousel-item]                          - The query selector string for carousel items.
+   * @param {string}             [options.carouselItemContainerSelector = .carousel-item-container]       - The query selector string for the carousel item container.
+   * @param {string}             [options.carouselControlSelector = .carousel-control]                    - The query selector string for carousel controls.
+   * @param {string}             [options.carouselControlContainerSelector = .carousel-control-container] - The query selector string for carousel control container.
+   * @param {string}             [options.carouselTabSelector = .carousel-tab]                            - The query selector string for carousel tabs.
+   * @param {string}             [options.carouselTabContainerSelector = .carousel-tab-container]         - The query selector string for the carousel tab container.
+   * @param {string}             [options.autoplaySelector = .autoplay]                                   - The query selector string for the autoplay button.
+   * @param {string}             [options.nextSelector = .next]                                           - The query selector string for the next button.
+   * @param {string}             [options.previousSelector = .previous]                                   - The query selector string for the previous button.
+   * @param {?(string|string[])} [options.activeClass = active]                                           - The class(es) to apply when a carousel item is active.
+   * @param {?(string|string[])} [options.previousClass = previous]                                       - The class(es) to apply to a carousel item that is the previously active item.
+   * @param {?(string|string[])} [options.nextClass = next]                                               - The class(es) to apply to a carousel item that is the next active item.
+   * @param {?(string|string[])} [options.playClass = play]                                               - The class(es) to apply to the autoplay button when the carousel is paused.
+   * @param {?(string|string[])} [options.pauseClass = pause]                                             - The class(es) to apply to the autoplay button when the carousel is playing.
+   * @param {boolean}            [options.autoplay = true]                                                - A flag to indicate if the carousel should autoplay.
+   * @param {number}             [options.transitionDelay = 10000]                                        - A flag to initialize the carousel immediately upon creation.
+   * @param {number}             [options.transitionDuration = 500]                                       - The duration time (in milliseconds) for the transition between carousel items.
+   * @param {?string}            [options.playText = Play]                                                - The text to use for the play button.
+   * @param {?string}            [options.pauseText = Pause]                                              - The text to use for the pause button.
+   * @param {?string}            [options.prefix = graupl-]                                               - The prefix to use for CSS custom properties.
+   * @param {?string}            [options.key = null]                                                     - The key used to generate IDs throughout the carousel.
+   * @param {boolean}            [options.initialize = false]                                             - A flag to initialize the carousel immediately upon creation.
+   */
+  constructor({
+    carouselElement: t,
+    carouselItemSelector: s = ".carousel-item",
+    carouselItemContainerSelector: i = ".carousel-item-container",
+    carouselControlSelector: n = ".carousel-control",
+    carouselControlContainerSelector: l = ".carousel-control-container",
+    carouselTabSelector: d = ".carousel-tab",
+    carouselTabContainerSelector: p = ".carousel-tab-container",
+    autoplaySelector: o = ".autoplay",
+    nextSelector: y = ".next",
+    previousSelector: b = ".previous",
+    activeClass: E = "active",
+    previousClass: T = "previous",
+    nextClass: I = "next",
+    playClass: k = "play",
+    pauseClass: v = "pause",
+    autoplay: x = !0,
+    transitionDelay: A = 1e4,
+    transitionDuration: D = 500,
+    playText: S = "Play",
+    pauseText: L = "Pause",
+    prefix: $ = "graupl-",
+    key: M = null,
+    initialize: G = !1
+  }) {
+    /**
+     * The DOM elements within the carousel.
+     *
+     * @protected
+     *
+     * @type {Object<HTMLElement, HTMLElement[]>}
+     *
+     * @property {HTMLElement}   carousel                 - The carousel element.
+     * @property {HTMLElement[]} carouselItems            - The carousel items.
+     * @property {HTMLElement}   carouselItemContainer    - The carousel item container.
+     * @property {HTMLElement[]} carouselControls         - The carousel controls.
+     * @property {HTMLElement}   carouselControlContainer - The carousel control container.
+     * @property {HTMLElement[]} carouselTabs             - The carousel tabs.
+     * @property {HTMLElement}   carouselTabContainer     - The carousel tab container.
+     * @property {HTMLElement}   autoplay           - The autoplay button.
+     * @property {HTMLElement}   next               - The next button.
+     * @property {HTMLElement}   previous           - The previous button.
+     */
+    r(this, "_dom", {
+      carousel: null,
+      carouselItems: [],
+      carouselItemContainer: null,
+      carouselControls: [],
+      carouselControlContainer: null,
+      carouselTabs: [],
+      carouselTabContainer: null,
+      autoplay: null,
+      next: null,
+      previous: null
+    });
+    /**
+     * The query selectors used by the carousel to populate the dom.
+     *
+     * @protected
+     *
+     * @type {Object<string>}
+     *
+     * @property {string} carouselItems            - The query selector string for carousel items.
+     * @property {string} carouselItemContainer    - The query selector string for the carousel item container.
+     * @property {string} carouselControls         - The query selector string for carousel controls.
+     * @property {string} carouselControlContainer - The query selector string for carousel control container.
+     * @property {string} carouselTabs             - The query selector string for the carousel tabs.
+     * @property {string} carouselTabContainer     - The query selector string for the carousel tab container.
+     * @property {string} autoplay                 - The query selector string for the autoplay button.
+     * @property {string} next                     - The query selector string for the next button.
+     * @property {string} previous                 - The query selector string for the previous button.
+     */
+    r(this, "_selectors", {
+      carouselItems: "",
+      carouselItemContainer: "",
+      carouselControls: "",
+      carouselControlContainer: "",
+      carouselTabs: "",
+      carouselTabContainer: "",
+      autoplay: "",
+      next: "",
+      previous: ""
+    });
+    /**
+     * The class(es) to apply when a carousel item is active.
+     *
+     * @protected
+     *
+     * @type {string|string[]}
+     */
+    r(this, "_activeClass", "active");
+    /**
+     * The class(es) to apply to a carousel item that is the previously active item.
+     *
+     * @protected
+     *
+     * @type {string|string[]}
+     */
+    r(this, "_previousClass", "previous");
+    /**
+     * The class(es) to apply to a carousel item that is the next active item.
+     *
+     * @protected
+     *
+     * @type {string|string[]}
+     */
+    r(this, "_nextClass", "next");
+    /**
+     * The class(es) to apply to the autoplay button when the carousel is paused.
+     *
+     * @protected
+     *
+     * @type {string|string[]}
+     */
+    r(this, "_playClass", "play");
+    /**
+     * The class(es) to apply to the autoplay button when the carousel is playing.
+     *
+     * @protected
+     *
+     * @type {string|string[]}
+     */
+    r(this, "_pauseClass", "pause");
+    /**
+     * The index of the currently active carousel item.
+     *
+     * @protected
+     *
+     * @type {number}
+     */
+    r(this, "_currentItem", 0);
+    /**
+     * A flag to indicate if the carousel is currently playing.
+     *
+     * @protected
+     *
+     * @type {boolean}
+     */
+    r(this, "_autoplay", !0);
+    /**
+     * A variable to delay transition slides in milliseconds.
+     *
+     * @protected
+     *
+     * @type {number}
+     */
+    r(this, "_transitionDelay", 1e4);
+    /**
+     * The duration time (in milliseconds) for the transition between carousel items.
+     *
+     * @protected
+     *
+     * @type {number}
+     */
+    r(this, "_transitionDuration", 500);
+    /**
+     * The label for the autoplay button when the carousel is paused.
+     *
+     * @protected
+     *
+     * @type {string}
+     */
+    r(this, "_playText", "Play");
+    /**
+     * The label for the autoplay button when the carousel is playing.
+     *
+     * @protected
+     *
+     * @type {string}
+     */
+    r(this, "_pauseText", "Pause");
+    /**
+     * The current action being performed by the carousel.
+     *
+     * @protected
+     *
+     * @type {string}
+     */
+    r(this, "_currentAction", "next");
+    /**
+     * The stored interval callback for autoplaying the carousel.
+     *
+     * @protected
+     *
+     * @type {?Function}
+     */
+    r(this, "_autoplayInterval", null);
+    /**
+     * The prefix to use for CSS custom properties.
+     *
+     * @protected
+     *
+     * @type {string}
+     */
+    r(this, "_prefix", "graupl-");
+    /**
+     * The key used to generate IDs throughout the carousel.
+     *
+     * @protected
+     *
+     * @type {string}
+     */
+    r(this, "_key", "");
+    /**
+     * An array of error messages generated by the carousel.
+     *
+     * @protected
+     *
+     * @type {string[]}
+     */
+    r(this, "_errors", []);
+    this._dom.carousel = t, this._selectors.carouselItems = s, this._selectors.carouselItemContainer = i, this._selectors.carouselControls = n, this._selectors.carouselControlContainer = l, this._selectors.carouselTabs = d, this._selectors.carouselTabContainer = p, this._selectors.autoplay = o, this._selectors.next = y, this._selectors.previous = b, this._activeClass = E || "", this._previousClass = T || "", this._nextClass = I || "", this._playClass = k || "", this._pauseClass = v || "", this._autoplay = x, this._transitionDelay = A, this._transitionDuration = D, this._playText = S || "", this._pauseText = L || "", this._prefix = $ || "", this._key = M || "", G && this.initialize();
+  }
+  /**
+   * Initializes the carousel.
+   */
+  initialize() {
+    try {
+      if (!this._validate())
+        throw new Error(
+          `Graupl Carousel: cannot initialize carousel. The following errors have been found:
+ - ${this.errors.join(
+            `
+ - `
+          )}`
+        );
+      this._generateKey(), this._setDOMElements(), this._setIds(), this._setAriaAttributes(), this.activateFirstItem(), this._handleAutoplay(), this._handleFocus(), this._handleClick(), this._handleHover(), this._handleKeydown(), this._handleKeyup(), this._setTransitionDuration(), C.initializeStorage("carousels"), C.pushToStorage("carousels", this.dom.carousel.id, this);
+    } catch (t) {
+      console.error(t);
+    }
+  }
+  /**
+   * The HTML elements for the carousel in the DOM.
+   *
+   * @readonly
+   *
+   * @type {Object<HTMLElement>}
+   *
+   * @see _dom
+   */
+  get dom() {
+    return this._dom;
+  }
+  /**
+   * The query selectors used by the carousel to populate the dom.
+   *
+   * @readonly
+   *
+   * @type {Object<string>}
+   *
+   * @see _selectors
+   */
+  get selectors() {
+    return this._selectors;
+  }
+  /**
+   * The class(es) to apply when a carousel item is active.
+   *
+   * @type {string|string[]}
+   *
+   * @see _activeClass
+   */
+  get activeClass() {
+    return this._activeClass;
+  }
+  /**
+   * The class(es) to apply to a carousel item that is the next active item.
+   *
+   * @type {string|string[]}
+   *
+   * @see _previousClass
+   */
+  get previousClass() {
+    return this._previousClass;
+  }
+  /**
+   * The class(es) to apply to a carousel item that is the next active item.
+   *
+   * @type {string|string[]}
+   *
+   * @see _nextClass
+   */
+  get nextClass() {
+    return this._nextClass;
+  }
+  /**
+   * The class(es) to apply to the autoplay button when the carousel is paused.
+   *
+   * @type {string|string[]}
+   *
+   * @see _playClass
+   */
+  get playClass() {
+    return this._playClass;
+  }
+  /**
+   * The class(es) to apply to the autoplay button when the carousel is playing.
+   *
+   * @type {string|string[]}
+   *
+   * @see _pauseClass
+   */
+  get pauseClass() {
+    return this._pauseClass;
+  }
+  /**
+   * The index of the currently active carousel item.
+   *
+   * @type {number}
+   *
+   * @see _currentItem
+   */
+  get currentItem() {
+    return this._currentItem;
+  }
+  /**
+   * The currently active carousel item.
+   *
+   * @readonly
+   *
+   * @type {HTMLElement}
+   */
+  get currentCarouselItem() {
+    return this.dom.carouselItems[this.currentItem];
+  }
+  /**
+   * The currently active carousel tab.
+   *
+   * @readonly
+   *
+   * @type {HTMLElement}
+   */
+  get currentCarouselTab() {
+    return this.dom.carouselTabs[this.currentItem];
+  }
+  /**
+   * A flag to indicate if the carousel is currently playing.
+   *
+   * @type {boolean}
+   *
+   * @see _autoplay
+   */
+  get autoplay() {
+    return this._autoplay;
+  }
+  /**
+   * The delay in milliseconds before transitioning slides.
+   *
+   * @type {number}
+   *
+   * @see _transitionDelay
+   */
+  get transitionDelay() {
+    return this._transitionDelay;
+  }
+  /**
+   * The duration time (in milliseconds) for the transition between carousel items.
+   *
+   * @type {number}
+   *
+   * @see _transitionDuration
+   */
+  get transitionDuration() {
+    return this._transitionDuration;
+  }
+  /**
+   * The label for the autoplay button when the carousel is paused.
+   *
+   * @type {string}
+   *
+   * @see _playText
+   */
+  get playText() {
+    return this._playText;
+  }
+  /**
+   * The label for the autoplay button when the carousel is playing.
+   *
+   * @type {string}
+   *
+   * @see _pauseText
+   */
+  get pauseText() {
+    return this._pauseText;
+  }
+  /**
+   * The prefix to use for CSS custom properties.
+   *
+   * @type {string}
+   *
+   * @see _prefix
+   */
+  get prefix() {
+    return this._prefix;
+  }
+  /**
+   * The key used to generate IDs throughout the accordion.
+   *
+   * @type {string}
+   *
+   * @see _key
+   */
+  get key() {
+    return this._key;
+  }
+  /**
+   * The current action being performed by the carousel.
+   *
+   * @type {string}
+   *
+   * @see _currentAction
+   */
+  get currentAction() {
+    return this._currentAction;
+  }
+  /**
+   * An array of error messages generated by the carousel.
+   *
+   * @readonly
+   *
+   * @type {string[]}
+   *
+   * @see _errors
+   */
+  get errors() {
+    return this._errors;
+  }
+  set currentItem(t) {
+    if (a("number", { value: t }), t === this.currentItem)
+      return;
+    t < 0 ? this._currentItem = 0 : t >= this.dom.carouselItems.length ? this._currentItem = this.dom.carouselItems.length - 1 : this._currentItem = t, this._dom.carousel.querySelectorAll(
+      this.selectors.carouselTab
+    ) && this.dom.carouselItems.forEach((i, n) => {
+      i.setAttribute("aria-selected", n === this._currentItem);
+    });
+  }
+  set autoplay(t) {
+    a("boolean", { value: t }), this._autoplay !== t && (this._autoplay = t);
+  }
+  set activeClass(t) {
+    h({ activeClass: t }), this._activeClass !== t && (this._activeClass = t);
+  }
+  set previousClass(t) {
+    h({ previousClass: t }), this._previousClass !== t && (this._previousClass = t);
+  }
+  set nextClass(t) {
+    h({ nextClass: t }), this._nextClass !== t && (this._nextClass = t);
+  }
+  set playClass(t) {
+    h({ playClass: t }), this._playClass !== t && (this._playClass = t);
+  }
+  set pauseClass(t) {
+    h({ pauseClass: t }), this._pauseClass !== t && (this._pauseClass = t);
+  }
+  set transitionDelay(t) {
+    a("number", { value: t }), t !== this.transitionDelay && t >= 0 && (this._currentItem = t);
+  }
+  set transitionDuration(t) {
+    a("number", { value: t }), this._transitionDuration !== t && t >= 0 && (this._transitionDuration = t, this._setTransitionDuration());
+  }
+  set playText(t) {
+    a("string", { value: t }), this._playText !== t && (this._playText = t);
+  }
+  set pauseText(t) {
+    a("string", { value: t }), this._pauseText !== t && (this._pauseText = t);
+  }
+  set prefix(t) {
+    a("string", { value: t }), this._prefix !== t && (this._prefix = t);
+  }
+  set key(t) {
+    a("string", { value: t }), this._key !== t && (this._key = t);
+  }
+  /**
+   * Validates all aspects of the carousel to ensure proper functionality.
+   *
+   * @protected
+   *
+   * @return {boolean} - The results of the validation.
+   */
+  _validate() {
+    let t = !0;
+    const s = f(HTMLElement, {
+      carousel: this.dom.carousel
+    });
+    s || (this._errors.push(s.message), t = !1);
+    const i = w({
+      carouselItemsSelector: this._selectors.carouselItems,
+      carouselItemContainerSelector: this._selectors.carouselItemContainer,
+      carouselControlsSelector: this._selectors.carouselControls,
+      carouselControlContainerSelector: this._selectors.carouselControlContainer,
+      carouselTabsSelector: this._selectors.carouselTabs,
+      carouselTabContainerSelector: this._selectors.carouselTabContainer,
+      autoplaySelector: this._selectors.autoplay,
+      nextSelector: this._selectors.next,
+      previousSelector: this._selectors.previous
+    });
+    i || (this._errors.push(i.message), t = !1);
+    const n = a("boolean", { autoplay: this.autoplay });
+    n || (this._errors.push(n.message), t = !1);
+    const l = a("number", {
+      transitionDelay: this._transitionDelay
+    });
+    l || (this._errors.push(l.message), t = !1);
+    const d = a("number", {
+      transitionDuration: this._transitionDuration
+    });
+    if (d || (this._errors.push(d.message), t = !1), this._activeClass !== "") {
+      const o = h({
+        activeClass: this._activeClass
+      });
+      o || (this._errors.push(o.message), t = !1);
+    }
+    if (this._previousClass !== "") {
+      const o = h({
+        previousClass: this._previousClass
+      });
+      o || (this._errors.push(o.message), t = !1);
+    }
+    if (this._nextClass !== "") {
+      const o = h({
+        nextClass: this._nextClass
+      });
+      o || (this._errors.push(o.message), t = !1);
+    }
+    if (this._playClass !== "") {
+      const o = h({
+        playClass: this._playClass
+      });
+      o || (this._errors.push(o.message), t = !1);
+    }
+    if (this._pauseClass !== "") {
+      const o = h({
+        pauseClass: this._pauseClass
+      });
+      o || (this._errors.push(o.message), t = !1);
+    }
+    if (this._playText !== "") {
+      const o = a("string", {
+        playText: this._playText
+      });
+      o || (this._errors.push(o.message), t = !1);
+    }
+    if (this._pauseText !== "") {
+      const o = a("string", {
+        pauseText: this._pauseText
+      });
+      o || (this._errors.push(o.message), t = !1);
+    }
+    const p = a("string", { prefix: this._prefix });
+    return p || (this._errors.push(p.message), t = !1), t;
+  }
+  /**
+   * Sets DOM elements within the carousel.
+   *
+   * The carousel element _cannot_ be set through this method.
+   *
+   * @protected
+   *
+   * @param {string}      elementType                - The type of element to populate.
+   * @param {HTMLElement} [base = this.dom.carousel] - The element used as the base for the querySelector.
+   * @param {boolean}     [overwrite = true]         - A flag to set if the existing elements will be overwritten.
+   */
+  _setDOMElementType(t, s = this.dom.carousel, i = !0) {
+    if (typeof this.selectors[t] == "string") {
+      if (t === "carousel")
+        throw new Error(
+          `Graupl Carousel: "${t}" element cannot be set through _setDOMElementType.`
+        );
+      if (s !== this.dom.carousel && f(HTMLElement, { base: s }), Array.isArray(this._dom[t])) {
+        const l = Array.from(
+          s.querySelectorAll(this.selectors[t])
+        ).filter(
+          (d) => d.parentElement === s
+        );
+        i ? this._dom[t] = l : this._dom[t] = [
+          ...this._dom[t],
+          ...l
+        ];
+      } else {
+        const n = s.querySelector(this.selectors[t]);
+        if (n && n.parentElement !== s)
+          return;
+        i && (this._dom[t] = n);
+      }
+    } else
+      throw new Error(
+        `Graupl Carousel: "${t}" is not a valid element type within the carousel.`
+      );
+  }
+  /**
+   * Resets DOM elements within the menu.
+   *
+   * The carousel element _cannot_ be reset through this method.
+   *
+   * @protected
+   *
+   * @param {string} elementType - The type of element to clear.
+   */
+  _resetDOMElementType(t) {
+    if (typeof this.selectors[t] == "string") {
+      if (t === "carousel")
+        throw new Error(
+          `Graupl Carousel: "${t}" element cannot be reset through _resetDOMElementType.`
+        );
+      Array.isArray(this._dom[t]) ? this._dom[t] = [] : this._dom[t] = null;
+    } else
+      throw new Error(
+        `Graupl Carousel: "${t}" is not a valid element type within the carousel.`
+      );
+  }
+  /**
+   * Sets all DOM elements within the carousel.
+   *
+   * Utilizes _setDOMElementType and _resetDOMElementType.
+   *
+   * @protected
+   */
+  _setDOMElements() {
+    this._setDOMElementType("carouselItemContainer"), this._setDOMElementType("carouselControlContainer"), this._setDOMElementType("carouselTabContainer"), this.dom.carouselItemContainer && this._setDOMElementType("carouselItems", this.dom.carouselItemContainer), this.dom.carouselControlContainer && (this._setDOMElementType(
+      "carouselControls",
+      this.dom.carouselControlContainer
+    ), this._setDOMElementType("autoplay", this.dom.carouselControlContainer), this._setDOMElementType("next", this.dom.carouselControlContainer), this._setDOMElementType("previous", this.dom.carouselControlContainer)), this._dom.carouselTabContainer && this._setDOMElementType("carouselTabs", this.dom.carouselTabContainer);
+  }
+  /**
+   * Generates a key for the carousel.
+   *
+   * @param {boolean} [regenerate = false] - A flag to determine if the key should be regenerated.
+   */
+  _generateKey(t = !1) {
+    (this.key === "" || t) && (this.key = Math.random().toString(36).replace(/[^a-z]+/g, "").substring(0, 10));
+  }
+  /**
+   * Sets the IDs of the carousel and it's children if they do not already exist.
+   *
+   * The generated IDs use the key and follow the format:
+   *  - carousel: `carousel-${key}`
+   *  - carousel items: `carousel-item-${key}-${index}`
+   *  - carousel tabs: `carousel-tab-${key}-${index}`
+   */
+  _setIds() {
+    this.dom.carousel.id = this.dom.carousel.id || `carousel-${this.key}`, this.dom.carouselItems.forEach((t, s) => {
+      t.id = t.id || `carousel-item-${this.key}-${s}`;
+    }), this.dom.carouselTabs.forEach((t, s) => {
+      t.id = t.id || `carousel-tab-${this.key}-${s}`;
+    });
+  }
+  /**
+   * Sets the aria attributes for the carousel.
+   */
+  _setAriaAttributes() {
+    !g("section", { carousel: this.dom.carousel }) && !this.dom.carousel.getAttribute("role") !== "region" && this.dom.carousel.setAttribute("role", "group"), this._dom.carousel.setAttribute("aria-roledescription", "carousel"), this.dom.carouselTabContainer && this.dom.carouselTabContainer.setAttribute("role", "tablist"), this.dom.carouselTabs.forEach((t, s) => {
+      g("button", { tab: t }) || t.setAttribute("role", "button"), t.setAttribute("aria-selected", s === 0), t.setAttribute("aria-controls", this.dom.carouselItems[s].id);
+    });
+  }
+  /**
+   * Sets the interval for autoplaying the carousel.
+   *
+   * @protected
+   */
+  _setInterval() {
+    this._clearInterval(), this._autoplayInterval = setInterval(() => {
+      this.activateNextItem();
+    }, this.transitionDelay);
+  }
+  /**
+   * Clears the interval for autoplaying the carousel.
+   *
+   * @protected
+   */
+  _clearInterval() {
+    clearInterval(this._autoplayInterval);
+  }
+  /**
+   * Handles the autoplay functionality of the carousel.
+   *
+   * - Adds the appropriate class to the autoplay button.
+   * - Removes the appropriate class from the autoplay button.
+   * - Sets the appropriate aria-label for the autoplay button.
+   * - Sets the appropriate aria-live for the carousel.
+   * - Sets/clears the interval for autoplaying the carousel.
+   *
+   * @protected
+   */
+  _handleAutoplay() {
+    this.autoplay ? (u(this.pauseClass, this.dom.autoplay), c(this.playClass, this.dom.autoplay), this.dom.autoplay.setAttribute("aria-label", this.pauseText), this.dom.carousel.setAttribute("aria-live", "off"), this._setInterval()) : (u(this.playClass, this.dom.autoplay), c(this.pauseClass, this.dom.autoplay), this.dom.autoplay.setAttribute("aria-label", this.playText), this.dom.carousel.setAttribute("aria-live", "polite"), this._clearInterval());
+  }
+  /**
+   * Handles the focus events throughout the carousel for proper use.
+   *
+   * - Adds a `focusin` listener to the carousel element to pause autoplay.
+   * - Adds a `focusout` listener to the carousel element to resume autoplay.
+   */
+  _handleFocus() {
+    this.dom.carousel.addEventListener("focusin", () => {
+      this.autoplay && this._clearInterval();
+    }), this.dom.carousel.addEventListener("focusout", () => {
+      this.autoplay && this._setInterval();
+    });
+  }
+  /**
+   * Handles the click events throughout the carousel.
+   *
+   * - Adds a `pointerup` listener to the next control to activate the next item.
+   * - Adds a `pointerup` listener to the previous control to activate the previous item.
+   * - Adds a `pointerup` listener to the autoplay control to toggle autoplay.
+   * - Adds a `pointerup` listener to each tab control to activate the corresponding item.
+   */
+  _handleClick() {
+    this.dom.next.addEventListener("pointerup", () => {
+      this.activateNextItem();
+    }), this.dom.previous.addEventListener("pointerup", () => {
+      this.activatePreviousItem();
+    }), this.dom.autoplay.addEventListener("pointerup", () => {
+      this.toggleAutoplay();
+    }), this.dom.carouselTabs.forEach((t, s) => {
+      t.addEventListener("pointerup", () => {
+        this.currentItem > s ? this._currentAction = "previous" : this._currentAction = "next", this.activateItem(s);
+      });
+    });
+  }
+  /**
+   * Handles the hover events throughout the carousel for proper use.
+   *
+   * - Adds a `pointerover` listener to the carousel to pause autoplay.
+   * - Adds a `pointerleave` listener to the carousel to resume autoplay.
+   */
+  _handleHover() {
+    this.dom.carousel.addEventListener("pointerover", () => {
+      this.autoplay && this._clearInterval();
+    }), this.dom.carousel.addEventListener("pointerleave", () => {
+      this.autoplay && this._setInterval();
+    });
+  }
+  /**
+   * Handles keydown events throughout the carousel item for proper use.
+   *
+   * - Adds a `keydown` listener to all control elements.
+   *   - Prevents Space and Enter key events.
+   * - Adds a `keydown` listener to all tab elements.
+   *   - Prevents Space and Enter key events.
+   */
+  _handleKeydown() {
+    this.dom.carouselControls.forEach((t) => {
+      t.addEventListener("keydown", (s) => {
+        switch (m(s)) {
+          case "Space":
+          case "Enter":
+            _(s);
+            break;
+        }
+      });
+    }), this.dom.carouselTabs.forEach((t) => {
+      t.addEventListener("keydown", (s) => {
+        switch (m(s)) {
+          case "Space":
+          case "Enter":
+            _(s);
+            break;
+        }
+      });
+    });
+  }
+  /**
+   * Handles keyup events throughout the carousel item for proper use.
+   *
+   * - Adds a `keyup` listener to all control elements.
+   *   - Activates the next/previous item depending on which control is pressed.
+   *   - Toggles autoplay if the autoplay control is pressed.
+   *
+   */
+  _handleKeyup() {
+    this.dom.next.addEventListener("keyup", (t) => {
+      switch (m(t)) {
+        case "Space":
+        case "Enter":
+          this.activateNextItem(), _(t);
+          break;
+      }
+    }), this.dom.previous.addEventListener("keyup", (t) => {
+      switch (m(t)) {
+        case "Space":
+        case "Enter":
+          this.activatePreviousItem(), _(t);
+          break;
+      }
+    }), this.dom.autoplay.addEventListener("keyup", (t) => {
+      switch (m(t)) {
+        case "Space":
+        case "Enter":
+          this.toggleAutoplay(), _(t);
+          break;
+      }
+    }), this.dom.carouselTabs.forEach((t, s) => {
+      t.addEventListener("keyup", (i) => {
+        switch (m(i)) {
+          case "Space":
+          case "Enter":
+            this.activateItem(s), _(i);
+            break;
+        }
+      });
+    });
+  }
+  /**
+   * Sets the transition duration for the carousel as a CSS custom property.
+   *
+   * The custom property is set as `--graupl-carousel-transition-duration`.
+   *
+   * @protected
+   */
+  _setTransitionDuration() {
+    this.dom.carousel.style.setProperty(
+      `--${this.prefix}carousel-transition-duration`,
+      `${this.transitionDuration}ms`
+    );
+  }
+  /**
+   * Activates the current carousel item.
+   *
+   * @public
+   */
+  activateCurrentItem() {
+    u(this.activeClass, this.currentCarouselItem), this.currentCarouselTab && (this.currentCarouselTab.setAttribute("aria-selected", !0), u(this.activeClass, this.currentCarouselTab));
+  }
+  /**
+   * Deactivates the current carousel item.
+   *
+   * @public
+   */
+  deactivateCurrentItem() {
+    c(this.activeClass, this.currentCarouselItem), this.currentCarouselTab && (this.currentCarouselTab.setAttribute("aria-selected", !1), c(this.activeClass, this.currentCarouselTab));
+  }
+  /**
+   * Activates the carousel item at a given index.
+   *
+   * @public
+   *
+   * @param {number} index - The index of the carousel item to activate.
+   */
+  activateItem(t) {
+    const s = this.currentItem;
+    this.dom.carousel.dataset.grauplAction = this._currentAction, this.autoplay && this._clearInterval(), u(this.previousClass, this.currentCarouselItem), u(this.nextClass, this.dom.carouselItems[t]), requestAnimationFrame(() => {
+      this.deactivateCurrentItem(), this.currentItem = t, this.activateCurrentItem(), requestAnimationFrame(() => {
+        setTimeout(() => {
+          c(this.previousClass, this.dom.carouselItems[s]), c(this.nextClass, this.currentCarouselItem);
+        }, this.transitionDuration);
+      });
+    }), this.autoplay && this._setInterval();
+  }
+  /**
+   * Activates the first carousel item.
+   *
+   * @public
+   */
+  activateFirstItem() {
+    this.activateItem(0);
+  }
+  /**
+   * Activates the last carousel item.
+   *
+   * @public
+   */
+  activateLastItem() {
+    this.activateItem(this.dom.carouselItems.length - 1);
+  }
+  /**
+   * Activates the next carousel item.
+   *
+   * @public
+   */
+  activateNextItem() {
+    this._currentAction = "next", this.currentItem + 1 >= this.dom.carouselItems.length ? this.activateFirstItem() : this.activateItem(this.currentItem + 1);
+  }
+  /**
+   * Activates the previous carousel item.
+   *
+   * @public
+   */
+  activatePreviousItem() {
+    this._currentAction = "previous", this.currentItem - 1 < 0 ? this.activateLastItem() : this.activateItem(this.currentItem - 1);
+  }
+  /**
+   * Toggles autoplay on the carousel.
+   *
+   * @public
+   */
+  toggleAutoplay() {
+    this.autoplay = !this.autoplay, this._handleAutoplay();
+  }
+}
+const B = {
+  Alert: R,
+  Carousel: U
+};
+export {
+  B as default
+};