@ulu/frontend 0.2.0-beta.5 → 0.2.0-beta.7

package/dist/README.md

@@ -0,0 +1,12 @@
+# Dist
+
+## UMD
+
+This is for testing (code pen, etc) it includes the full library, externals are set to globals and it has the full stylesheet (only useful for basic testing).
+
+## ES
+
+This is the version of the library that should be consumed by users. It includes the JS bundle and typescript declarations. 
+
+Note the legacy `import { something } from "@ulu/frontend/js/ui/some-module.js"` import syntax is preserved/mapped through this bundle now. But most users should import like `import { something } from "@ulu/frontend"`.
+

package/dist/{types → es}/core/component.d.ts

@@ -3,8 +3,8 @@
  */
 export class ComponentInitializer {
     static defaults: {
-        type: any;
-        baseAttribute: any;
+        type: null;
+        baseAttribute: null;
     };
     static requiredOptions: string[];
     static hasRequiredOptions: any;
@@ -18,13 +18,7 @@ export class ComponentInitializer {
         type: string;
         baseAttribute: string;
     });
-    options: {
-        type: any;
-        baseAttribute: any;
-    } & {
-        type: string;
-        baseAttribute: string;
-    };
+    options: never;
     logTitle: string;
     /**
      * Initializes the component based on the provided configuration.

package/dist/es/core/component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../lib/js/core/component.js"],"names":[],"mappings":"AAUA;;GAEG;AACH;IACE;;;MAGE;IACF,iCAGE;IACF,+BAEE;IAEF;;;;;OAKG;IACH,qBAHG;QAAwB,IAAI;QACJ,aAAa;KACvC,EASA;IAFC,eAAwE;IACxE,iBAAgD;IAElD;;;;;;;;OAQG;IACH,aANG;QAAyB,KAAK;QACP,GAAG;QACF,QAAQ;QACV,UAAU;QACJ,OAAO,EAA3B,WAAW;KACrB,QAcA;IACD;;;;;;;OAOG;IACH,sBALG;QAAyB,KAAK;QACP,GAAG,EAAlB,MAAM;QACU,QAAQ,EAAxB,OAAO;QACa,OAAO,EAA3B,WAAW;KACrB,QAKA;IACD;;;;OAIG;IACH,kCAGC;IACD;;;OAGG;IACH,uCAEC;IACD;;;OAGG;IACH,2CAEC;IACD;;;;;;OAMG;IACH,uDALW,WAAW,GAGT,KAAK,CAAC;QAAC,OAAO,EAAE,WAAW,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,UAAU,WAAU;KAAC,CAAC,CAS7E;IACD;;;OAGG;IACH,2BAFW,WAAW,QAIrB;IACD;;;OAGG;IACH,iCAFY,GAAC,CAKZ;IACD;;OAEG;IACH,0BAEC;IACD;;OAEG;IACH,2BAEC;IACD;;OAEG;IACH,+BAEC;CACF"}

package/dist/es/core/component.js

@@ -0,0 +1,134 @@
+var h = Object.defineProperty;
+var c = (r, t, e) => t in r ? h(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e;
+var n = (r, t, e) => c(r, typeof t != "symbol" ? t + "" : t, e);
+import { hasRequiredProps as p } from "@ulu/utils/object.js";
+import { getDatasetOptionalJson as b } from "@ulu/utils/browser/dom.js";
+import { dataAttributeToDatasetKey as d } from "../utils/dom.js";
+import { getCoreEventName as g } from "./events.js";
+const i = class i {
+  /**
+   * Create a new instance of ComponentInitializer
+   * @param {Object} options Options for configuring the component initializer.
+   * @param {String} options.type Type of component (used for logs).
+   * @param {String} options.baseAttribute Prefix and base attribute name (used for base attribute and further element attribute names).
+   */
+  constructor(t) {
+    if (!i.hasRequiredOptions(t))
+      throw new Error(
+        `Missing a required options: ${i.requiredOptions.join(", ")}`
+      );
+    this.options = Object.assign({}, i.defaults, t), this.logTitle = `ULU: ${this.options.type}:
+`;
+  }
+  /**
+   * Initializes the component based on the provided configuration.
+   * @param {Object} config The initialization configuration.
+   * @param {Function} config.setup The setup function to call for each element.
+   * @param {String} config.key [null] The optional key to use with attribute selector.
+   * @param {Boolean} config.withData [null] Whether to retrieve element data.
+   * @param {Array} config.coreEvents [null] An array of core event names (e.g., 'pageModified') that should trigger a re-initialization.
+   * @param {HTMLElement} config.context [document] The context to query within.
+   */
+  init(t) {
+    var e;
+    this.setupElements(t), (e = t.coreEvents) != null && e.length && t.coreEvents.forEach((s) => {
+      const o = g(s);
+      o && document.addEventListener(o, () => this.setupElements(t));
+    });
+  }
+  /**
+   * Processes the elements based on the provided configuration.
+   * @param {object} config The initialization configuration.
+   * @param {function} config.setup The setup function to call for each element.
+   * @param {string} config.key The optional key to use with attribute selector.
+   * @param {boolean} config.withData [false] Whether to retrieve element data.
+   * @param {HTMLElement} config.context [document] The context to query within.
+   */
+  setupElements(t) {
+    const { setup: e, key: s, withData: o, context: a } = t;
+    this.queryAllInitial(s, o, a).forEach((u) => e(u, this));
+  }
+  /**
+   * Get an attribute name
+   * @param {String} key Optional key, if no key will return baseAttribute if key will return key added to base
+   * @returns {String} String like data-ulu-dialog or data-ulu-dialog-element
+   */
+  getAttribute(t) {
+    const { baseAttribute: e } = this.options;
+    return t ? `${e}-${t}` : `${e}`;
+  }
+  /**
+   * Create an attribute selector
+   * @param {String} key Optional key (see getAttribute)
+   */
+  attributeSelector(t) {
+    return `[${this.getAttribute(t)}]`;
+  }
+  /**
+   * Create an attribute selector for initial
+   * @return {String}
+   */
+  attributeSelectorInitial(t) {
+    return `${this.attributeSelector(t)}:not([${this.getAttribute("init")}])`;
+  }
+  /**
+   * Queries all main elements of a component that have not been initialized and extracts their data attributes.
+   * @param {HTMLElement} context The context to query within.
+   * @param {Boolean} withData Include dataset from element (as optional JSON)
+   * @param {Node} context Element to query elements from
+   * @returns {Array<{element: HTMLElement, data: object, initialize: Function}>} An array of objects containing the elements, their data, and convenience function initialize() which when called will set the init attribute on the element
+   */
+  queryAllInitial(t, e, s = document) {
+    return [...s.querySelectorAll(this.attributeSelectorInitial(t))].map((a) => ({
+      element: a,
+      data: e ? this.getData(a, t) : null,
+      initialize: () => this.initializeElement(a)
+    }));
+  }
+  /**
+   * Sets the init attribute on an element, marking it as initialized.
+   * @param {HTMLElement} element The element to initialize.
+   */
+  initializeElement(t) {
+    t.setAttribute(this.getAttribute("init"), "");
+  }
+  /**
+   * Get an elements dataset value as JSON or other value
+   * @return {*} The value of the dataset, if JSON will return object else will return string value or undefined
+   */
+  getData(t, e) {
+    const s = d(this.getAttribute(e));
+    return b(t, s);
+  }
+  /**
+   * Will output namespaced console logs for the given initializer
+   */
+  log(...t) {
+    console.log(this.logTitle, ...t);
+  }
+  /**
+   * Will output namespaced console warnings for the given initializer
+   */
+  warn(...t) {
+    console.warn(this.logTitle, ...t);
+  }
+  /**
+   * Will output namespaced console error for the given initializer
+   */
+  logError(...t) {
+    console.error(this.logTitle, ...t);
+  }
+};
+n(i, "defaults", {
+  type: null,
+  baseAttribute: null
+}), n(i, "requiredOptions", [
+  "type",
+  "baseAttribute"
+]), n(i, "hasRequiredOptions", p(
+  i.requiredOptions
+));
+let l = i;
+export {
+  l as ComponentInitializer
+};

package/dist/{types → es}/core/events.d.ts

@@ -23,5 +23,5 @@ export function getCoreEventName(type: string): string | null;
  * @param {Object} options CustomEvent options.
  * @returns {CustomEvent}
  */
-export function createUluEvent(type: string, data?: any, options?: any): CustomEvent;
+export function createUluEvent(type: string, data?: any, options?: Object): CustomEvent;
 //# sourceMappingURL=events.d.ts.map

package/dist/{types → es}/core/events.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"events.d.ts","sourceRoot":"","sources":["../../../lib/js/core/events.js"],"names":[],"mappings":"AAkCA;;;;GAIG;AACH,yDAFW,IAAI,QAQd;AAED;;;;GAIG;AACH,sDAEC;AAED;;;;GAIG;AACH,gDAFa,SAAO,IAAI,CAQvB;AAED;;;;;;GAMG;AACH,oDAJW,GAAG,kBAED,WAAW,CAIvB"}
+{"version":3,"file":"events.d.ts","sourceRoot":"","sources":["../../../lib/js/core/events.js"],"names":[],"mappings":"AAkCA;;;;GAIG;AACH,yDAFW,IAAI,QAQd;AAED;;;;GAIG;AACH,sDAEC;AAED;;;;GAIG;AACH,gDAFa,SAAO,IAAI,CAQvB;AAED;;;;;;GAMG;AACH,oDAJW,GAAG,YACH,MAAM,GACJ,WAAW,CAIvB"}

package/dist/es/core/events.js

@@ -0,0 +1,45 @@
+import { debounce as s } from "@ulu/utils/performance.js";
+import { isBrowser as a } from "@ulu/utils/browser/dom.js";
+a() && (u(), f());
+const i = {
+  pageModified(e) {
+    e.dispatchEvent(n("pageModified"));
+  },
+  pageResized(e) {
+    e.dispatchEvent(n("pageResized"));
+  },
+  beforePrint(e) {
+    e.dispatchEvent(n("beforePrint"));
+  },
+  afterPrint(e) {
+    e.dispatchEvent(n("afterPrint"));
+  }
+}, c = Object.keys(i);
+function r(e, t) {
+  i[e] ? i[e](t) : console.warn(`Unable to dispatch non-core event: ${e}`);
+}
+function o(e) {
+  return "ulu:" + e;
+}
+function p(e) {
+  return c.includes(e) ? o(e) : (console.warn(`'${e}' is not a valid core event type.`), null);
+}
+function n(e, t = null, d = { bubbles: !0 }) {
+  return new CustomEvent(o(e), { detail: t, ...d });
+}
+function u() {
+  window.addEventListener("resize", s(() => r("pageResized", document), 250));
+}
+function f() {
+  window.addEventListener("beforeprint", () => {
+    r("beforePrint", document);
+  }), window.addEventListener("afterprint", () => {
+    r("afterPrint", document);
+  });
+}
+export {
+  n as createUluEvent,
+  r as dispatchCoreEvent,
+  p as getCoreEventName,
+  o as getUluEventName
+};

package/dist/es/core/index.d.ts

@@ -0,0 +1,4 @@
+export { ComponentInitializer } from './component.js';
+export { dispatchCoreEvent, getCoreEventName, getUluEventName, createUluEvent } from './events.js';
+export { getDefaultSettings, updateSettings, getSettings, getSetting, updateSetting, wrapSettingString } from './settings.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/{types → es}/core/settings.d.ts

@@ -37,7 +37,7 @@ export function updateSetting(key: string, value: any): void;
  * @returns {Object} An object with a `toString()` method that returns the
  * (optionally transformed) setting value as a string.
  */
-export function wrapSettingString(key: string, transform: Function): any;
+export function wrapSettingString(key: string, transform: Function): Object;
 /**
  * Default settings
  */

package/dist/es/core/settings.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"settings.d.ts","sourceRoot":"","sources":["../../../lib/js/core/settings.js"],"names":[],"mappings":"AA+BA;;;GAGG;AACH,sCAFa,MAAM,CAIlB;AAED;;;GAGG;AACH,wCAFW,MAAM,QAIhB;AAED;;;GAGG;AACH,+BAFa,MAAM,CAIlB;AAED;;;;GAIG;AACH,gCAHW,MAAM,GACJ,GAAC,CAQb;AAED;;;;GAIG;AACH,mCAHW,MAAM,SACN,GAAC,QAIX;AAED;;;;;;;;;;;GAWG;AACH,qEAHa,MAAM,CAUlB;;;;;;;;oBAxFa,MAAM;;;;oBACN,MAAM;;;;uBACN,MAAM;;;;uBACN,MAAM;;;;mBACN,MAAM;;;;kBACN,MAAM"}

package/dist/es/core/settings.js

@@ -0,0 +1,44 @@
+const c = {
+  iconClassClose: "css-icon css-icon--close",
+  iconClassDragX: "css-icon css-icon--drag-x",
+  iconClassDragBoth: "css-icon css-icon--drag-both",
+  iconClassPrevious: "css-icon  css-icon--angle-left",
+  iconClassNext: "css-icon  css-icon--angle-right",
+  cssvarPrefix: ""
+};
+let t = { ...c };
+function o() {
+  return { ...c };
+}
+function r(n) {
+  Object.assign(t, n);
+}
+function a() {
+  return { ...t };
+}
+function i(n) {
+  if (!t.hasOwnProperty(n)) {
+    console.warn(`Attempted to access non-existent setting: ${n}`);
+    return;
+  }
+  return t[n];
+}
+function g(n, s) {
+  t[n] = s;
+}
+function u(n, s) {
+  return {
+    toString() {
+      const e = i(n);
+      return s ? s(e) : e;
+    }
+  };
+}
+export {
+  o as getDefaultSettings,
+  i as getSetting,
+  a as getSettings,
+  g as updateSetting,
+  r as updateSettings,
+  u as wrapSettingString
+};

package/dist/es/index.d.ts

@@ -0,0 +1,4 @@
+export * from './core/index.js';
+export * from './ui/index.js';
+export * from './utils/index.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/es/index.js

@@ -0,0 +1,123 @@
+import { createUluEvent as i, dispatchCoreEvent as r, getCoreEventName as a, getUluEventName as o } from "./core/events.js";
+import { getDefaultSettings as l, getSetting as n, getSettings as p, updateSetting as g, updateSettings as u, wrapSettingString as f } from "./core/settings.js";
+import { ComponentInitializer as m } from "./core/component.js";
+import { BreakpointManager as I } from "./ui/breakpoints.js";
+import { Collapsible as z } from "./ui/collapsible.js";
+import { init as D, initializer as C, setupGroup as v } from "./ui/details-group.js";
+import { baseAttribute as y, closeAttribute as T, defaults as B, getDialogOptions as h, init as A, initializer as P, setDefaults as k, setupDialog as G, setupTrigger as L } from "./ui/dialog.js";
+import { Flipcard as w, init as U, initializer as V } from "./ui/flipcard.js";
+import { init as M, initializer as O } from "./ui/grid.js";
+import { buildModal as N, defaults as R, init as W, initializer as K, setDefaults as j } from "./ui/modal-builder.js";
+import { OverflowScroller as J } from "./ui/overflow-scroller.js";
+import { createPager as X } from "./ui/overflow-scroller-pager.js";
+import { init as Z } from "./ui/page.js";
+import { Popover as $, getContentByTrigger as ee, init as te, initializer as ie, instances as re, resolve as ae } from "./ui/popover.js";
+import { attrs as se, init as le } from "./ui/print-details.js";
+import { init as pe } from "./ui/print.js";
+import { attachHandlers as ue, defaults as fe, init as de, initializer as me, setDefaults as xe, setupProxy as Ie } from "./ui/proxy-click.js";
+import { Resizer as ze } from "./ui/resizer.js";
+import { init as De, initializer as Ce } from "./ui/scroll-slider.js";
+import { Scrollpoint as be, init as ye, initializer as Te } from "./ui/scrollpoint.js";
+import { Slider as he, init as Ae, initializer as Pe, setupSlider as ke } from "./ui/slider.js";
+import { init as Le, initializer as Ee, instances as we, setup as Ue } from "./ui/tabs.js";
+import { defaults as Fe, init as Me, initializer as Oe, setDefaults as He, setupToggle as Ne } from "./ui/theme-toggle.js";
+import { Tooltip as We, init as Ke, initializer as je } from "./ui/tooltip.js";
+import { log as Je, logError as Qe, logWarning as Xe, set as Ye } from "./utils/class-logger.js";
+import { dataAttributeToDatasetKey as _e, resolveClasses as $e, setPositionClasses as et } from "./utils/dom.js";
+import { FileSave as it } from "./utils/file-save.js";
+import { createFloatingUi as at, defaults as ot } from "./utils/floating-ui.js";
+import { configureIcons as lt } from "./utils/font-awesome.js";
+import { ensureId as pt, newId as gt } from "./utils/id.js";
+import { pauseVideos as ft, prepVideos as dt } from "./utils/pause-youtube-video.js";
+export {
+  I as BreakpointManager,
+  z as Collapsible,
+  m as ComponentInitializer,
+  it as FileSave,
+  w as Flipcard,
+  J as OverflowScroller,
+  $ as Popover,
+  ze as Resizer,
+  be as Scrollpoint,
+  he as Slider,
+  We as Tooltip,
+  Je as classLoggerLog,
+  Qe as classLoggerLogError,
+  Xe as classLoggerLogWarning,
+  Ye as classLoggerSet,
+  at as createFloatingUi,
+  i as createUluEvent,
+  _e as dataAttributeToDatasetKey,
+  D as detailsGroupInit,
+  C as detailsGroupInitializer,
+  v as detailsGroupSetupGroup,
+  y as dialogBaseAttribute,
+  T as dialogCloseAttribute,
+  B as dialogDefaults,
+  h as dialogGetDialogOptions,
+  A as dialogInit,
+  P as dialogInitializer,
+  k as dialogSetDefaults,
+  G as dialogSetupDialog,
+  L as dialogSetupTrigger,
+  r as dispatchCoreEvent,
+  pt as ensureId,
+  U as flipcardInit,
+  V as flipcardInitializer,
+  ot as floatingUiDefaults,
+  lt as fontAwesomeConfigureIcons,
+  a as getCoreEventName,
+  l as getDefaultSettings,
+  n as getSetting,
+  p as getSettings,
+  o as getUluEventName,
+  M as gridInit,
+  O as gridInitializer,
+  N as modalBuilderBuildModal,
+  R as modalBuilderDefaults,
+  W as modalBuilderInit,
+  K as modalBuilderInitializer,
+  j as modalBuilderSetDefaults,
+  gt as newId,
+  X as overflowScrollerCreatePager,
+  Z as pageInit,
+  ee as popoverGetContentByTrigger,
+  te as popoverInit,
+  ie as popoverInitializer,
+  re as popoverInstances,
+  ae as popoverResolve,
+  se as printDetailsAttrs,
+  le as printDetailsInit,
+  pe as printInit,
+  ue as proxyClickAttachHandlers,
+  fe as proxyClickDefaults,
+  de as proxyClickInit,
+  me as proxyClickInitializer,
+  xe as proxyClickSetDefaults,
+  Ie as proxyClickSetupProxy,
+  $e as resolveClasses,
+  De as scrollSliderInit,
+  Ce as scrollSliderInitializer,
+  ye as scrollpointInit,
+  Te as scrollpointInitializer,
+  et as setPositionClasses,
+  Ae as sliderInit,
+  Pe as sliderInitializer,
+  ke as sliderSetupSlider,
+  Le as tabsInit,
+  Ee as tabsInitializer,
+  we as tabsInstances,
+  Ue as tabsSetup,
+  Fe as themeToggleDefaults,
+  Me as themeToggleInit,
+  Oe as themeToggleInitializer,
+  He as themeToggleSetDefaults,
+  Ne as themeToggleSetupToggle,
+  Ke as tooltipInit,
+  je as tooltipInitializer,
+  g as updateSetting,
+  u as updateSettings,
+  f as wrapSettingString,
+  ft as youtubePauseVideos,
+  dt as youtubePrepVideos
+};

package/dist/{types → es}/ui/breakpoints.d.ts

@@ -5,10 +5,12 @@
  */
 export class BreakpointManager {
     static instances: any[];
+    static globalsInitialized: boolean;
+    static _initializeGlobals(): void;
     static defaults: {
         element: HTMLElement;
         valueFromPseudo: boolean;
-        customProperty: any;
+        customProperty: Object;
         pseudoSelector: string;
         order: string[];
         debug: boolean;
@@ -31,7 +33,7 @@ export class BreakpointManager {
     active: any;
     previous: any;
     activeIndex: any;
-    resizeDirection: string;
+    resizeDirection: string | null;
     previousIndex: any;
     breakpoints: {};
     onChangeCallbacks: any[];
@@ -144,7 +146,7 @@ declare class BreakpointDirection {
      * @param {Function|Object} handler.on Function to be executed when direction is active
      * @param {Function|Object} handler.off Function to be executed when direction was active and is now changed to inactive
      */
-    add(handler: Function | any): void;
+    add(handler: Function | Object): void;
     /**
      * Removes a handler
      */

package/dist/es/ui/breakpoints.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"breakpoints.d.ts","sourceRoot":"","sources":["../../../lib/js/ui/breakpoints.js"],"names":[],"mappings":"AAcA;;;;GAIG;AACH;IACE,wBAAsB;IACtB,mCAAkC;IAElC,kCAQC;IACD;;;;;;;MAQC;IACD;;;;;;;OAOG;IACH,oBANG;QAAsB,KAAK;QACL,cAAc;QACd,eAAe;QAChB,OAAO,EAApB,IAAI;QACW,cAAc;KACvC,EAeA;IAXC,YAAkB;IAClB,cAAoB;IACpB,iBAAuB;IACvB,+BAA2B;IAC3B,mBAAyB;IACzB,gBAAqB;IACrB,yBAA2B;IAM7B;;;;;OAKG;IACH,mCAEC;IACD;;;OAGG;IACH,yCAEC;IACD;;OAEG;IACH,gCAEC;IACD;;OAEG;IACH,kCAEC;IACD;;OAEG;IACH,wBAMC;IACD;;OAEG;IACH,eAuCC;IACD;;;;OAIG;IACH,kBAFY,UAAU,CAQrB;CACF;AAsED;;;GAGG;AACH;IACE,qCAQC;IAPC;;;;MAIC;IACD,cAAuB;IACvB,UAAgB;IAElB;;;;;OAKG;IACH,wDAEC;IACD;;;;OAIG;IACH,6BAEC;IACD;;;;OAIG;IACH,6BAEC;IACD;;;OAGG;IACH,8BAEC;IACD;;;;OAIG;IACH,mDAOC;IAED,yBAGC;CACF;AArID;;;GAGG;AACH;IACE,6CAMC;IALC,eAA0B;IAC1B,gBAAmB;IACnB,UAAY;IACZ,WAAa;IACb,gBAA4B;IAE9B;;OAEG;IACH,sBAMC;IACD;;OAEG;IACH,4BAIC;IACD;;OAEG;IACH,+BAEC;IACD;;;;;OAKG;IACH,aAJW,WAAS,MAAM,QAiBzB;IACD;;OAEG;IACH,2BAQC;CACF"}

package/dist/es/ui/breakpoints.js

@@ -0,0 +1,194 @@
+var u = Object.defineProperty;
+var p = (s, t, e) => t in s ? u(s, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[t] = e;
+var r = (s, t, e) => p(s, typeof t != "symbol" ? t + "" : t, e);
+import { removeArrayElement as c } from "@ulu/utils/array.js";
+import { isBrowser as g } from "@ulu/utils/browser/dom.js";
+import { getCoreEventName as v } from "../core/events.js";
+import { wrapSettingString as b } from "../core/settings.js";
+import { getCustomProperty as k } from "../utils/css.js";
+import { log as d, logError as f } from "../utils/class-logger.js";
+const y = (s) => k(s, "breakpoint"), i = class i {
+  static _initializeGlobals() {
+    i.globalsInitialized || !g() || (window.addEventListener(v("pageResized"), () => {
+      i.instances.forEach((t) => t.update());
+    }), i.globalsInitialized = !0);
+  }
+  /**
+   * @param {Object} config Configuration object
+   * @param {Array} config.order Array of strings that correspond to the breakpoints setup in the styles, Breakpoints from smallest to largest, defaults to [small, medium, large]
+   * @param {Array} config.customProperty Property to grab breakpoint from (default is --breakpoint)
+   * @param {Array} config.valueFromPseudo Use the legacy method of grabbing breakpoint from pseudo element, default uses custom property
+   * @param {Node} config.element The element to retrieve active breakpoint from stylesheet. (default is html) For using the old pseudo method, adjust this to document.body
+   * @param {String} config.pseudoSelector Change pseudo selector used to get the breakpoint from the pseudo's content property
+   */
+  constructor(t) {
+    i._initializeGlobals(), Object.assign(this, i.defaults, t), this.active = null, this.previous = null, this.activeIndex = null, this.resizeDirection = null, this.previousIndex = null, this.breakpoints = {}, this.onChangeCallbacks = [], this.order.forEach((e) => this.breakpoints[e] = new x(e, this)), d(this, this), this.update(), i.instances.push(this);
+  }
+  /**
+   * Add a callback for every time a breakpoint changes
+   * - Not recommended, possibly use to watch for changes, etc
+   * - For more control use instance.at(name) with breakpoint methods
+   * @param {Function} callback Function to call, passed one argument current instance which can be used to get information about breakpoints
+   */
+  onChange(t) {
+    this.onChangeCallbacks.push(t);
+  }
+  /**
+   * Remove change callback
+   * @param {Function} callback Function to remove
+   */
+  removeOnChange(t) {
+    c(this.onChangeCallbacks, t);
+  }
+  /**
+   * Get breakpoint from a pseudo element
+   */
+  getBreakpointInPseudo() {
+    return window.getComputedStyle(this.element, this.pseudoSelector).content.replace(/^"|"$/g, "");
+  }
+  /**
+   * Get breakpoint from a custom property
+   */
+  getBreakpointInProperty() {
+    return getComputedStyle(this.element).getPropertyValue(this.customProperty).trim();
+  }
+  /**
+   * Get breakpoint from element (design note: user could override prototype)
+   */
+  getBreakpoint() {
+    return this.valueFromPseudo ? this.getBreakpointInPseudo() : this.getBreakpointInProperty();
+  }
+  /**
+   * Updates the active breakpoint by checking the element and executes handlers on change
+   */
+  update() {
+    const t = this.getBreakpoint();
+    if (!t) {
+      f(this, "Unable to get current breakpoint, maybe order is incorrect? Breakpoint check skipped!");
+      return;
+    }
+    if (t === this.active) return;
+    this.previous = this.active, this.previousIndex = this.activeIndex;
+    const e = this.order.indexOf(t);
+    this.active = t, this.activeIndex = e, this.order.forEach((o, n) => {
+      const a = this.breakpoints[o], h = this.activeIndex;
+      a._setDirection("min", n <= h), a._setDirection("max", n > h), a._setDirection("only", n === h);
+    }), this.previousIndex !== null && (this.resizeDirection = this.previousIndex < e ? "up" : "down"), this.onChangeCallbacks.forEach((o) => o(this));
+  }
+  /**
+   * Get a breakpoint by key
+   * @param {String} name The name of the breakpoint to get
+   * @return {Breakpoint} Breakpoint to act on (see Breakpoint class)
+   */
+  at(t) {
+    const e = this.breakpoints[t];
+    return t || f(this, "Unable to find breakpoint for:", e), e;
+  }
+};
+r(i, "instances", []), r(i, "globalsInitialized", !1), r(i, "defaults", {
+  element: document == null ? void 0 : document.documentElement,
+  valueFromPseudo: !1,
+  customProperty: "--breakpoint",
+  customProperty: b("cssvarPrefix", y),
+  pseudoSelector: ":before",
+  order: ["none", "small", "medium", "large"],
+  debug: !1
+});
+let m = i;
+class l {
+  constructor(t, e) {
+    this.direction = t, this.active = !1, this.on = [], this.off = [], this.breakpoint = e;
+  }
+  /**
+   * Change the state of the direction
+   */
+  change(t) {
+    this.active !== t && (t ? this._call(!0) : this.active && this._call(!1), this.active = t);
+  }
+  /**
+   * Calls all functions in handlers or
+   */
+  _call(t) {
+    (t ? this.on : this.off).forEach((o) => o()), d(this.breakpoint._manager, `Handlers called (${t ? "on" : "off"}): ${this.direction}`);
+  }
+  /**
+   * Returns handlers in normalized object format on/off
+   */
+  getHandlers(t) {
+    return typeof t != "object" ? { on: t } : t;
+  }
+  /**
+   * Adds a handler for the direction, optionally use object to add off state handler
+   * @param {Function|Object} handler Function to be executed when direction is active, read object description for on/off
+   * @param {Function|Object} handler.on Function to be executed when direction is active
+   * @param {Function|Object} handler.off Function to be executed when direction was active and is now changed to inactive
+   */
+  add(t) {
+    const e = this.getHandlers(t);
+    e.on && this.on.push(e.on), e.off && this.off.push(e.off), this.active && e.on && (e.on(), d(this.breakpoint._manager, `Handler called immediately: ${this.direction}`, e.on));
+  }
+  /**
+   * Removes a handler
+   */
+  remove(t) {
+    const e = this.getHandlers(t);
+    e.on && c(this.on, e.on), e.off && c(this.off, e.off);
+  }
+}
+class x {
+  constructor(t, e) {
+    this.directions = {
+      max: new l("max", this),
+      min: new l("min", this),
+      only: new l("only", this)
+    }, this._manager = e, this.name = t;
+  }
+  /**
+   * Private method used inrternally for managing direction activation
+   * - Each direction manages it's own state and handlers
+   * @param {String} direction The directional key
+   * @param {Boolean} active State of that direction to set
+   */
+  _setDirection(t, e) {
+    this.directions[t].change(e);
+  }
+  /**
+   * Attach handler to be executed from the breakpoint and to all breakpoints below (inclusive).
+   * This corresponds to a `max-width` media query in SCSS.
+   * @param {Function} handler Handler to be executed
+   */
+  max(t) {
+    this.directions.max.add(t);
+  }
+  /**
+   * Attach handler to be executed from the breakpoint and to all breakpoints above (inclusive).
+   * This corresponds to a `min-width` media query in SCSS.
+   * @param {Function} handler Handler to be executed
+   */
+  min(t) {
+    this.directions.min.add(t);
+  }
+  /**
+   * Attach a handler to fire when the breakpoint is within the key
+   * @param {Function} handler Handler to be executed
+   */
+  only(t) {
+    this.directions.only.add(t);
+  }
+  /**
+   * Remove handler
+   * @param {Function} handler Handler to be removed, extended on/off object style can be used
+   * @param {String} direction Remove handler only from specified direction, else search all directions
+   */
+  remove(t, e) {
+    (e ? [e] : ["max", "min", "only"]).forEach((n) => {
+      this.directions[n] && this.directions[n].remove(t);
+    });
+  }
+  log(...t) {
+    t.unshift(`Breakpoint (${this.name}):`), this._manager.log.apply(this._manager, t);
+  }
+}
+export {
+  m as BreakpointManager
+};