@ulu/frontend 0.1.0-beta.33 → 0.1.0-beta.35

package/js/utils/system.js

@@ -0,0 +1,154 @@
+/**
+ * @module utils/system
+ * @description Core classes and mechanisms that define how UI components are created and managed within the library
+ */
+
+import { hasRequiredProps } from "@ulu/utils/object.js";
+import { getDatasetOptionalJson, dataAttributeToDatasetKey } from "./dom.js";
+import { getName } from "../events/index.js";
+
+/**
+ * Class serves as a utility for UI modules, handling the selection of elements and the initialization of corresponding component instances, ensuring consistent setup within the module
+ */
+export class ComponentInitializer {
+  static defaults = {
+    type: null,
+    baseAttribute: null
+  };
+  static requiredOptions = [
+    "type",
+    "baseAttribute"
+  ];
+  static hasRequiredOptions = hasRequiredProps(
+    ComponentInitializer.requiredOptions
+  );
+
+  /**
+   * 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(options) {
+    if (!ComponentInitializer.hasRequiredOptions(options)) {
+      throw new Error(
+        `Missing a required options: ${ ComponentInitializer.requiredOptions.join(", ") }`
+      );
+    }
+    this.options = Object.assign({}, ComponentInitializer.defaults, options);
+    this.logTitle = `ULU: ${ this.options.type }:\n`;
+  }
+  /**
+   * 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.events [null] Ulu events that should call setup when dispatched (ie. pageModified, pageResized)
+   * @param {Boolean} config.onPageResized [null] Whether to bind event listener for page resize end
+   * @param {HTMLElement} config.context [document] The context to query within.
+   */
+  init(config) {
+    this.setupElements(config);
+    // Attach Handler to reinitialize if page is updated
+    // Specifically checking entire document incase element that dispatched 
+    // event made alterations  outside of itself
+    if (config.events?.length) {
+      config.events.forEach(name => {
+        document.addEventListener(getName(name), () => this.setupElements(config));
+      });
+    }
+  }
+  /**
+   * 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 {boolean} config.onPageModified [true] Whether to bind event listener for page modifications.
+   * @param {HTMLElement} config.context [document] The context to query within.
+   */
+  setupElements(config) {
+    const { setup, key, withData, context } = config;
+    const elementsWithData = this.queryAllInitial(key, withData, context);
+    elementsWithData.forEach(elementWithData => setup(elementWithData, 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(key) {
+    const { baseAttribute }  = this.options;
+    return key ? `${ baseAttribute }-${ key }` : `${ baseAttribute }`;
+  }
+  /**
+   * Create an attribute selector
+   * @param {String} key Optional key (see getAttribute)
+   */
+  attributeSelector(key) {
+    return `[${ this.getAttribute(key) }]`;
+  }
+  /**
+   * Create an attribute selector for initial
+   * @return {String}
+   */  
+  attributeSelectorInitial(key) {
+    return `${ this.attributeSelector(key) }: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(key, withData, context = document) {
+    const elements = [ ...context.querySelectorAll(this.attributeSelectorInitial(key)) ];
+    return elements.map((element) => ({
+      element,
+      data: withData ? this.getData(element, key) : null,
+      initialize: () => this.initializeElement(element)
+    }));
+  }
+  /**
+   * Sets the init attribute on an element, marking it as initialized.
+   * @param {HTMLElement} element The element to initialize.
+   */
+  initializeElement(element) {
+    element.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(element, key) {
+    const datasetKey = dataAttributeToDatasetKey(this.getAttribute(key));
+    return getDatasetOptionalJson(element, datasetKey);
+  }
+  /**
+   * Will output namespaced console logs for the given initializer
+   */
+  log(...msgs) {
+    console.log(this.logTitle, ...msgs);
+  }
+  /**
+   * Will output namespaced console warnings for the given initializer
+   */
+  warn(...msgs) {
+    console.warn(this.logTitle, ...msgs);
+  }
+  /**
+   * Will output namespaced console error for the given initializer
+   */
+  logError(...msgs) {
+    console.error(this.logTitle, ...msgs);
+  }
+}
+
+/**
+ * Class serves as a base for representing individual occurrences of a UI component, providing a consistent structure for each
+ */
+export class ComponentInstance {
+
+} 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ulu/frontend",
-  "version": "0.1.0-beta.33",
+  "version": "0.1.0-beta.35",
   "description": "Modular Sass Theming Library",
   "browser": "js/index.js",
   "main": "index.js",

package/scss/components/_accordion.scss

@@ -120,7 +120,7 @@ $config: (
     & + & {
       $gap: -(get("margin") - get("margin-between"));
       margin-top: $gap;
-      margin-top: calc($gap - 1px);
+      margin-top: calc($gap - get("border-width"));
     }
     &[open], 
     &.is-active  {
@@ -208,7 +208,6 @@ $config: (
   }
   #{ $prefix }--no-borders {
     border: none;
-    margin-bottom: 4rem;
     &[open] > .accordion__summary {
       border-bottom: none;
     }

package/scss/components/_data-table.scss

@@ -33,6 +33,7 @@ $-fallbacks: (
 /// @prop {Color} footer-background-color [#f3f3f3] Background color of table footer.
 /// @prop {Color} color ["type-secondary"] Font color of the table.
 /// @prop {Color} header-color ["headline"] Font color for the table header.
+/// @prop {Color} footer-color [null] Font color for the table footer.
 /// @prop {Number} line-height [true] Line height for the table.
 /// @prop {Dimension} column-min-width [6em] Min-width of the th element.
 /// @prop {Dimension} first-column-large-min-width [15em] When using "--large-first" style, the min width of the first th element.
@@ -63,6 +64,7 @@ $config: (
   "footer-background-color" : #f3f3f3,
   "color" : "type-secondary",
   "header-color" : "headline",
+  "footer-color" : null,
   "line-height" : true,
   "column-min-width" : 6em,
   "first-column-large-min-width" : 15em,
@@ -175,6 +177,7 @@ $config: (
     }
     tfoot tr {
       background-color: color.get(get("footer-background-color"));
+      color: color.get(get("footer-color"));
     }
     th,
     td {

package/scss/components/_form-theme.scss

@@ -64,34 +64,33 @@ $-fallbacks: (
 /// @prop {Color} check-input-border-color-indeterminate [null] Indeterminate check input border color.
 /// @prop {Color} check-input-border-color-focus [null] Check input border color when hovered or focused.
 /// @prop {CssValue} check-input-outline [null] Check input outline.
-/// @prop {CssValue} check-input-outline-hover [null]
-/// @prop {CssValue} check-input-outline-checked [null]
-/// @prop {CssValue} check-input-outline-focus [1px solid white]
-/// @prop {Color} check-input-touch-color-hover [#e8e8e8]
-/// @prop {Color} check-input-touch-color-focus [null]
-/// @prop {Dimension} check-input-radio-size [0.3em]
-/// @prop {Dimension} check-input-checkmark-width [0.38em]
-/// @prop {Dimension} check-input-checkmark-height [0.68em]
-/// @prop {Dimension} check-input-checkmark-offset-y [-0.2em]
-/// @prop {Dimension} check-input-checkmark-stroke-size [0.18em]
-/// @prop {Color} check-input-mark-color [currentColor]
-/// @prop {Color} check-input-mark-color-hover [null]
-/// @prop {Color} check-input-mark-color-focus [null]
-/// @prop {Color} check-input-mark-color-checked [null]
-/// @prop {Color} check-input-mark-color-indeterminate [null]
-/// @prop {Number} check-input-disabled-opacity [0.6]
-/// @prop {Dimension} check-input-border-radius [null]
-/// @prop {Color} description-color [false]
-/// @prop {CssValue} description-margin [(0.25em 0)]
-/// @prop {Dimension} description-max-width [25em]
-/// @prop {Number} description-line-height [true] Line height for description element, defaults to typograpahy line-height-dense
-/// @prop {Color} fieldset-background [transparent]
-/// @prop {CssValue} fieldset-border [none]
+/// @prop {CssValue} check-input-outline-hover [null] Check input outline when hovered.
+/// @prop {CssValue} check-input-outline-checked [null] Check input outline when checked.
+/// @prop {CssValue} check-input-outline-focus [1px solid white] Check input outline when focused.
+/// @prop {Color} check-input-touch-color-hover [#e8e8e8] Check input background color when hovered.
+/// @prop {Color} check-input-touch-color-focus [null] Check input background color when focused.
+/// @prop {Dimension} check-input-radio-size [0.3em] Radio border size.
+/// @prop {Dimension} check-input-checkmark-width [0.38em] Width of checkmark.
+/// @prop {Dimension} check-input-checkmark-height [0.68em] Height of checkmark.
+/// @prop {Dimension} check-input-checkmark-offset-y [-0.2em] vertical offset of checkmark.
+/// @prop {Dimension} check-input-checkmark-stroke-size [0.18em] stroke size of checkmark.
+/// @prop {Color} check-input-mark-color [currentColor] Check input color.
+/// @prop {Color} check-input-mark-color-hover [null] Check input color when hovered.
+/// @prop {Color} check-input-mark-color-focus [null] Check input color when focused.
+/// @prop {Color} check-input-mark-color-checked [null] Check input color when checked.
+/// @prop {Color} check-input-mark-color-indeterminate [null] Check input color when indeterminate.
+/// @prop {Number} check-input-disabled-opacity [0.6] Opacity of the check input when disabled.
+/// @prop {Dimension} check-input-border-radius [null] Checkbox input border radius.
+/// @prop {Color} description-color [false] Color of help text.
+/// @prop {CssValue} description-margin [(0.25em 0)] Margin for help text.
+/// @prop {Dimension} description-max-width [25em] Max width of help text.
+/// @prop {Number} description-line-height [true] Line height for description element, defaults to typography line-height-dense
+/// @prop {Color} fieldset-background [transparent] Background color of fieldset.
+/// @prop {CssValue} fieldset-border [none] Border for fieldset
 /// @prop {Dimension} fieldset-margin-bottom [1rem]
 /// @prop {Dimension} fieldset-margin-top [1rem]
 /// @prop {Dimension} fieldset-padding [0]
-/// @prop {Dimension} fieldset-margin-compact [0]
-/// @prop {Dimension} fieldset-border-bottom [0]
+/// @prop {Dimension} fieldset-margin-compact [0] @joe-check unused
 /// @prop {Dimension} fieldset-border-radius [0]
 /// @prop {Color} fieldset-legend-color [inherit]
 /// @prop {Dimension} fieldset-legend-border-bottom [null]

package/scss/components/_scroll-slider.scss

@@ -22,8 +22,6 @@
 /// @prop {Dimension} padding-bottom  [0]
 /// @prop {Dimension} padding-top  [0]
 /// @prop {String} prefix ["scroll-slide"]
-/// @prop {Color} button-background-color  [white]
-/// @prop {Color} button-background-color-hover  [white]
 /// @prop {CssValue} button-border  [2px solid white]
 /// @prop {Color} button-border-color-hover  [white]
 /// @prop {Dimension} button-border-radius  [50%]
@@ -46,8 +44,6 @@ $config: (
   "padding-bottom" : 0,
   "padding-top" : 0,
   "prefix": "scroll-slider",
-  "button-background-color" : white,
-  "button-background-color-hover" : white,
   "button-border" : 2px solid white,
   "button-border-color-hover" : white,
   "button-border-radius" : 50%,

package/types/ui/breakpoints.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"breakpoints.d.ts","sourceRoot":"","sources":["../../js/ui/breakpoints.js"],"names":[],"mappings":"AAeA;;;;GAIG;AACH;IACE,wBAAsB;IACtB;;;;;;;MAOC;IACD;;;;;;;OAOG;IACH;QANyB,KAAK;QACL,cAAc;QACd,eAAe;QAChB,OAAO,EAApB,IAAI;QACW,cAAc;OAevC;IAXC,YAAkB;IAClB,cAAoB;IACpB,iBAAuB;IACvB,wBAA2B;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,eA6CC;IACD;;;;OAIG;IACH,kBAFY,UAAU,CAQrB;CACF;AAsED;;;GAGG;AACH;IACE,qCAQC;IAPC;;;;MAIC;IACD,cAAuB;IACvB,UAAgB;IAElB;;;;;OAKG;IACH,wDAEC;IACD;;;;;OAKG;IACH,6BAEC;IACD;;;;;OAKG;IACH,6BAEC;IACD;;;OAGG;IACH,8BAEC;IACD;;;;OAIG;IACH,mDAGC;IAED,yBAGC;CACF;AAnID;;;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,cAAe,QAiBzB;IACD;;OAEG;IACH,2BAQC;CACF"}
+{"version":3,"file":"breakpoints.d.ts","sourceRoot":"","sources":["../../js/ui/breakpoints.js"],"names":[],"mappings":"AAeA;;;;GAIG;AACH;IACE,wBAAsB;IACtB;;;;;;;MAOC;IACD;;;;;;;OAOG;IACH;QANyB,KAAK;QACL,cAAc;QACd,eAAe;QAChB,OAAO,EAApB,IAAI;QACW,cAAc;OAevC;IAXC,YAAkB;IAClB,cAAoB;IACpB,iBAAuB;IACvB,wBAA2B;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,eA4CC;IACD;;;;OAIG;IACH,kBAFY,UAAU,CAQrB;CACF;AAsED;;;GAGG;AACH;IACE,qCAQC;IAPC;;;;MAIC;IACD,cAAuB;IACvB,UAAgB;IAElB;;;;;OAKG;IACH,wDAEC;IACD;;;;;OAKG;IACH,6BAEC;IACD;;;;;OAKG;IACH,6BAEC;IACD;;;OAGG;IACH,8BAEC;IACD;;;;OAIG;IACH,mDAGC;IAED,yBAGC;CACF;AAnID;;;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,cAAe,QAiBzB;IACD;;OAEG;IACH,2BAQC;CACF"}

package/types/ui/details-group.d.ts

@@ -3,12 +3,6 @@
  * - This will only initialize elements once, it is safe to call on page changes
  */
 export function init(): void;
-/**
- * Setup all dialog groups within context
- * @param {HTMLElement} context [document] Element to query within
- * @returns {Array} Array matching the groups queried with their return objects from setupGroup() [used for destroy/etc]
- */
-export function setup(context?: HTMLElement): any[];
 /**
  * @typedef {Object} DetailsGroupInstance
  * @property {Function} destroy A function to remove event listeners and attributes.
@@ -18,14 +12,14 @@ export function setup(context?: HTMLElement): any[];
 /**
  * Sets up a single group of details elements to manage their behavior.
  * @param {HTMLElement} element - The parent element containing the details elements.
+ * @param {Object} options - The options for this group
  * @returns {DetailsGroupInstance}
  */
-export function setupGroup(element: HTMLElement): DetailsGroupInstance;
-export namespace attrs {
-    let init: string;
-    let childInit: string;
-    let group: string;
-}
+export function setupGroup(element: HTMLElement, userOptions: any): DetailsGroupInstance;
+/**
+ * Dialog Component Initializer
+ */
+export const initializer: ComponentInitializer;
 export type DetailsGroupInstance = {
     /**
      * A function to remove event listeners and attributes.
@@ -40,4 +34,5 @@ export type DetailsGroupInstance = {
      */
     setupChildren: Function;
 };
+import { ComponentInitializer } from "../utils/system.js";
 //# sourceMappingURL=details-group.d.ts.map

package/types/ui/details-group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"details-group.d.ts","sourceRoot":"","sources":["../../js/ui/details-group.js"],"names":[],"mappings":"AAuBA;;;GAGG;AACH,6BAGC;AAED;;;;GAIG;AACH,gCAHW,WAAW,SAYrB;AAED;;;;;GAKG;AAEH;;;;GAIG;AACH,oCAHW,WAAW,GACT,oBAAoB,CA8DhC;;;;;;;;;;;;;;aArEa,WAAW"}
+{"version":3,"file":"details-group.d.ts","sourceRoot":"","sources":["../../js/ui/details-group.js"],"names":[],"mappings":"AAqBA;;;GAGG;AACH,6BASC;AAED;;;;;GAKG;AAEH;;;;;GAKG;AACH,oCAJW,WAAW,qBAET,oBAAoB,CAgEhC;AAxGD;;GAEG;AACH,+CAGG;;;;;;;;;aA0BW,WAAW;;;;;;qCAlCY,oBAAoB"}

package/types/ui/dialog.d.ts

@@ -1,5 +1,5 @@
 /**
- * @param {Object} options Change options used as default for dialogs, can then be overriden by data attribute settings on element
+ * @param {Object} options Change options used as default for dialogs, can then be overridden by data attribute settings on element
  */
 export function setDefaults(options: any): void;
 /**
@@ -7,36 +7,41 @@ export function setDefaults(options: any): void;
  * - This will only initialize elements once, it is safe to call on page changes
  */
 export function init(): void;
-/**
- * Setup dialogs and triggers
- */
-export function setup(): void;
 /**
  * Setup click handlers on a trigger
- * @param {Node} trigger
+ * @param {Node} trigger Trigger button element
+ * @param {String} dialogId The dialog's id to open
  */
-export function setupTrigger(trigger: Node): void;
+export function setupTrigger(trigger: Node, dialogId: string): void;
 /**
  * Setup click handlers for a dialog
  * @param {Node} dialog
  */
-export function setupDialog(dialog: Node): void;
+export function setupDialog(dialog: Node, userOptions: any): void;
 /**
  * For a given dialog, get it's options (from data attribute)
  * @param {Node} dialog
  * @returns {Object}
  */
 export function getDialogOptions(dialog: Node): any;
-export namespace attrs {
-    let init: string;
-    let dialog: string;
-    let trigger: string;
-    let close: string;
-}
+/**
+ * Base attribute for a dialog
+ */
+export const baseAttribute: "data-ulu-dialog";
+/**
+ * Dialog Component Initializer
+ */
+export const initializer: ComponentInitializer;
+/**
+ * Attribute for close buttons within a dialog
+ */
+export const closeAttribute: string;
 export namespace defaults {
     let nonModal: boolean;
     let documentEnd: boolean;
     let clickOutsideCloses: boolean;
     let pauseVideos: boolean;
+    let preventScroll: boolean;
 }
+import { ComponentInitializer } from "../utils/system.js";
 //# sourceMappingURL=dialog.d.ts.map

package/types/ui/dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../js/ui/dialog.js"],"names":[],"mappings":"AAkDA;;GAEG;AACH,gDAEC;AAED;;;GAGG;AACH,6BAGC;AAED;;GAEG;AACH,8BAOC;AAED;;;GAGG;AACH,sCAFW,IAAI,QAoBd;AAED;;;GAGG;AACH,oCAFW,IAAI,QA0Bd;AAED;;;;GAIG;AACH,yCAHW,IAAI,OAMd"}
+{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../js/ui/dialog.js"],"names":[],"mappings":"AAuDA;;GAEG;AACH,gDAEC;AAED;;;GAGG;AACH,6BAqBC;AAED;;;;GAIG;AACH,sCAHW,IAAI,0BAmBd;AAED;;;GAGG;AACH,oCAFW,IAAI,0BAuCd;AAED;;;;GAIG;AACH,yCAHW,IAAI,OAKd;AA1JD;;GAEG;AACH,8CAA+C;AAE/C;;GAEG;AACH,+CAAuF;AAEvF;;GAEG;AACH,oCAAgE;;;;;;;;qCAjB3B,oBAAoB"}

package/types/ui/flipcard.d.ts

@@ -1,7 +1,19 @@
+/**
+ * Initialize flipcards using data-ulu-flipcard attribute
+ */
 export function init(): void;
-export function setup(): void;
+/**
+ * Flipcard Component Initializer
+ */
+export const initializer: ComponentInitializer;
+/**
+ * Flipcard class (creates flipcard instance and behaviors)
+ */
 export class Flipcard {
     static instances: any[];
+    /**
+     * Default options for Flipcard
+     */
     static defaults: {
         namespace: string;
         proxyClick: {
@@ -10,9 +22,8 @@ export class Flipcard {
             exclude: string;
         };
     };
-    constructor(container: any, front: any, back: any, config: any, debug?: boolean);
+    constructor(container: any, front: any, back: any, config: any);
     options: any;
-    debug: boolean;
     elements: {
         container: any;
         front: any;
@@ -32,14 +43,9 @@ export class Flipcard {
     }): void;
     getClass(child: any): any;
     createControlContent(): string;
-    setVisiblity(visible: any): void;
+    setVisibility(visible: any): void;
     containerCss(): string;
     panelCss(zIndex?: number): string;
 }
-export namespace attrs {
-    let init: string;
-    let flipcard: string;
-    let front: string;
-    let back: string;
-}
+import { ComponentInitializer } from "../utils/system.js";
 //# sourceMappingURL=flipcard.d.ts.map

package/types/ui/flipcard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"flipcard.d.ts","sourceRoot":"","sources":["../../js/ui/flipcard.js"],"names":[],"mappings":"AAmJA,6BAGC;AAED,8BAGC;AAjJD;IACE,wBAAsB;IACtB;;;;;;;MAOE;IACF,iFAgBC;IAZC,aAA2D;IAI3D,eAA+B;IAC/B;;;;MAA0C;IAC1C,gBAAmB;IACnB,YAA6D;IAC7D,kBAA0D;IAK5D,eAEC;IACD,cAqCC;IACD;;;OAGG;IACH;;aAQC;IACD,0BAGC;IACD,+BAIC;IACD,iCASC;IACD,uBAWC;IACD,kCAKC;CACF"}
+{"version":3,"file":"flipcard.d.ts","sourceRoot":"","sources":["../../js/ui/flipcard.js"],"names":[],"mappings":"AAgBA;;GAEG;AACH,6BAYC;AAvBD;;GAEG;AACH,+CAGG;AAmBH;;GAEG;AACH;IACE,wBAAsB;IACtB;;OAEG;IACH;;;;;;;MAOE;IACF,gEAgBC;IAZC,aAA2D;IAK3D;;;;MAA0C;IAC1C,gBAAmB;IACnB,YAA6D;IAC7D,kBAA0D;IAK5D,eAEC;IACD,cAqCC;IACD;;;OAGG;IACH;;aAQC;IACD,0BAGC;IACD,+BAIC;IACD,kCASC;IACD,uBAWC;IACD,kCAKC;CACF;qCAzJoC,oBAAoB"}

package/types/ui/grid.d.ts

@@ -1,13 +1,11 @@
 /**
  * Sets up document for grid position classes
- * @param {String} selector The selector for the parent element
  * @param {Object} classes Classes (optional) @see setPositionClasses
  */
-export function init(selector: string, classes: any): void;
+export function init(classes: any): void;
 /**
- * Goes through document and finds elements that need to have positioning classes
- * @param {String} selector The selector for the parent element
- * @param {Object} classes Classes (optional) @see setPositionClasses
+ * Dialog Component Initializer
  */
-export function setup(selector: string, classes: any): void;
+export const initializer: ComponentInitializer;
+import { ComponentInitializer } from "../utils/system.js";
 //# sourceMappingURL=grid.d.ts.map

package/types/ui/grid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../../js/ui/grid.js"],"names":[],"mappings":"AAOA;;;;GAIG;AACH,2DAIC;AAED;;;;GAIG;AACH,4DAEC"}
+{"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../../js/ui/grid.js"],"names":[],"mappings":"AAeA;;;GAGG;AACH,yCAQC;AApBD;;GAEG;AACH,+CAGG;qCATkC,oBAAoB"}

package/types/ui/modal-builder.d.ts

@@ -7,15 +7,6 @@ export function setDefaults(options: any): void;
  * - This will only initialize elements once, it is safe to call on page changes
  */
 export function init(): void;
-/**
- * Query and setup all builder
- */
-export function setup(): void;
-/**
- * Build a dialog for the given content
- * @param {Node} element
- */
-export function setupBuilder(element: Node): void;
 /**
  *
  * @param {Node} content Content element of the dialog (what is inserted into the body)
@@ -24,6 +15,10 @@ export function setupBuilder(element: Node): void;
 export function buildModal(content: Node, options: any): {
     modal: Element;
 };
+/**
+ * Modal Builder Component Initializer
+ */
+export const initializer: ComponentInitializer;
 export namespace defaults {
     export let title: any;
     export let titleIcon: any;
@@ -51,4 +46,5 @@ export namespace defaults {
      */
     export function template(id: string, config: any): string;
 }
+import { ComponentInitializer } from "../utils/system.js";
 //# sourceMappingURL=modal-builder.d.ts.map

package/types/ui/modal-builder.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modal-builder.d.ts","sourceRoot":"","sources":["../../js/ui/modal-builder.js"],"names":[],"mappings":"AAgGA;;GAEG;AACH,gDAEC;AAED;;;GAGG;AACH,6BAGC;AAED;;GAEG;AACH,8BAGC;AAED;;;GAGG;AACH,sCAFW,IAAI,QAMd;AAED;;;;GAIG;AACH,oCAHW,IAAI;;EAmDd;;;;;;;;;;;;;;;;;;IA5IC,uDAEC;IACD,yDAEC;IACD;;;;;OAKG;IACH,0DAmCC"}
+{"version":3,"file":"modal-builder.d.ts","sourceRoot":"","sources":["../../js/ui/modal-builder.js"],"names":[],"mappings":"AA+FA;;GAEG;AACH,gDAEC;AAED;;;GAGG;AACH,6BAQC;AAED;;;;GAIG;AACH,oCAHW,IAAI;;EAmDd;AA7JD;;GAEG;AACH,+CAGG;;;;;;;;;;;;;;;;;;IAwBD,uDAEC;IACD,yDAEC;IACD;;;;;OAKG;IACH,0DAmCC;;qCApFkC,oBAAoB"}

package/types/ui/popover.d.ts

@@ -2,16 +2,10 @@
  * Initialize default popover
  */
 export function init(): void;
-/**
- * Query all popovers on current page and set them up
- * - Use this manually if needed
- * - Won't setup a popover more than once
- */
-export function setup(): void;
 /**
  * Find the popover's elements
  */
-export function resolve(trigger: any): false | {
+export function resolve(trigger: any, userOptions: any): false | {
     elements: {
         trigger: any;
         content: any;
@@ -22,6 +16,10 @@ export function resolve(trigger: any): false | {
     floatingOptions: any;
 };
 export function getContentByTrigger(trigger: any): any;
+/**
+ * Popover Component Initializer
+ */
+export const initializer: ComponentInitializer;
 /**
  * Array of current instances
  */
@@ -36,5 +34,6 @@ export class Popover extends Collapsible {
     floatingCleanup: Function;
     destroyFloatingInstance(): void;
 }
+import { ComponentInitializer } from "../utils/system.js";
 import { Collapsible } from "./collapsible.js";
 //# sourceMappingURL=popover.d.ts.map

package/types/ui/popover.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../js/ui/popover.js"],"names":[],"mappings":"AA6BA;;GAEG;AACH,6BAGC;AAED;;;;GAIG;AACH,8BAWC;AAED;;GAEG;AACH;;;;;;;;;EAkBC;AAKD,uDAmBC;AA5FD;;GAEG;AACH,4BAAqC;AA4FrC;;GAEG;AACH;IACE,8DAIC;IADC,qBAA4C;IAa9C,+BAKC;IADC,0BAA+E;IAEjF,gCAKC;CACF;4BAjI2B,kBAAkB"}
+{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../js/ui/popover.js"],"names":[],"mappings":"AAgCA;;GAEG;AACH,6BAmBC;AAED;;GAEG;AACH;;;;;;;;;EAiBC;AAKD,uDAmBC;AA5FD;;GAEG;AACH,+CAGG;AAOH;;GAEG;AACH,4BAAqC;AA+ErC;;GAEG;AACH;IACE,8DAIC;IADC,qBAA4C;IAa9C,+BAIC;IADC,0BAA+E;IAEjF,gCAKC;CACF;qCAlIoC,oBAAoB;4BAE7B,kBAAkB"}

package/types/ui/print.d.ts

@@ -3,8 +3,4 @@
  * - This will only initialize elements once, it is safe to call on page changes
  */
 export function init(): void;
-export namespace attrs {
-    let trigger: string;
-    let init: string;
-}
 //# sourceMappingURL=print.d.ts.map

package/types/ui/print.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"print.d.ts","sourceRoot":"","sources":["../../js/ui/print.js"],"names":[],"mappings":"AA2BA;;;GAGG;AACH,6BAGC"}
+{"version":3,"file":"print.d.ts","sourceRoot":"","sources":["../../js/ui/print.js"],"names":[],"mappings":"AAuBA;;;GAGG;AACH,6BASC"}

package/types/ui/proxy-click.d.ts

@@ -1,5 +1,5 @@
 /**
- * @param {Object} options Change options used as default for dialogs, can then be overriden by data attribute settings on element
+ * @param {Object} options Change options used as default for dialogs, can then be overridden by data attribute settings on element
  */
 export function setDefaults(options: any): void;
 /**
@@ -7,12 +7,28 @@ export function setDefaults(options: any): void;
  * - This will only initialize elements once, it is safe to call on page changes
  */
 export function init(): void;
-export function setup(context?: Document): void;
-export function attachHandlers(proxy: any, child: any, options: any): void;
+/**
+ * Setup a single proxy click
+ * @param {Node} proxy The container who's click should proxy the click of inner element with options.selector (defaults to [data-ulu-proxy-click-source])
+ * @param {Object} userOptions Options to override defaults
+ */
+export function setupProxy(proxy: Node, userOptions: any): void;
+/**
+ * Main function for attaching behaviors that enable proxy click
+ * @param {Node} proxy The container who's click should proxy the click of inner element with options.selector (defaults to [data-ulu-proxy-click-source])
+ * @param {Node} child The element who is being proxied and will get clicked if the proxy is clicked (as long as not an interactive element within proxy)
+ * @param {Object} config Merged/final options object
+ */
+export function attachHandlers(proxy: Node, child: Node, config: any): void;
+/**
+ * Proxy Click Component Initializer
+ */
+export const initializer: ComponentInitializer;
 export namespace defaults {
     let selector: string;
     let selectorPreventBase: string;
     let selectorPrevent: string;
     let mousedownDurationPrevent: number;
 }
+import { ComponentInitializer } from "../utils/system.js";
 //# sourceMappingURL=proxy-click.d.ts.map

package/types/ui/proxy-click.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"proxy-click.d.ts","sourceRoot":"","sources":["../../js/ui/proxy-click.js"],"names":[],"mappings":"AAiCA;;GAEG;AACH,gDAEC;AACD;;;GAGG;AACH,6BAGC;AAED,gDAaC;AACD,2EAiBC"}
+{"version":3,"file":"proxy-click.d.ts","sourceRoot":"","sources":["../../js/ui/proxy-click.js"],"names":[],"mappings":"AAkCA;;GAEG;AACH,gDAEC;AACD;;;GAGG;AACH,6BASC;AAED;;;;GAIG;AACH,kCAHW,IAAI,0BAWd;AAED;;;;;GAKG;AACH,sCAJW,IAAI,SACJ,IAAI,qBAoBd;AAhFD;;GAEG;AACH,+CAGG;;;;;;;qCARkC,oBAAoB"}

package/types/ui/scroll-slider.d.ts

@@ -3,11 +3,9 @@
  * - This will only initialize elements once, it is safe to call on page changes
  */
 export function init(): void;
-export function setup(): void;
-export namespace attrs {
-    let init: string;
-    let slider: string;
-    let track: string;
-    let controls: string;
-}
+/**
+ * Scroll Slider Component Initializer
+ */
+export const initializer: ComponentInitializer;
+import { ComponentInitializer } from "../utils/system.js";
 //# sourceMappingURL=scroll-slider.d.ts.map

package/types/ui/scroll-slider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"scroll-slider.d.ts","sourceRoot":"","sources":["../../js/ui/scroll-slider.js"],"names":[],"mappings":"AA+BA;;;GAGG;AACH,6BAGC;AAED,8BAGC"}
+{"version":3,"file":"scroll-slider.d.ts","sourceRoot":"","sources":["../../js/ui/scroll-slider.js"],"names":[],"mappings":"AAuBA;;;GAGG;AACH,6BASC;AA5BD;;GAEG;AACH,+CAGG;qCAVkC,oBAAoB"}