@ulu/frontend 0.1.0-beta.32 → 0.1.0-beta.34

package/scss/components/_callout.scss

@@ -27,48 +27,51 @@ $-fallbacks: (
 /// @prop {Boolean} border-radius [true] The border radius of the Callout.
 /// @prop {Dimension} border-width [1px] The border width of the Callout.
 /// @prop {CssValue} box-shadow [none] The box-shadow of the Callout.
-/// @prop {Boolean} left-cap [false] Toggles the use of left caps in styled callouts.
-/// @prop {Color} left-cap-color [green] Color of the left cap.
-/// @prop {Dimension} left-cap-width [0.5rem] Width of the left cap.
+/// @prop {Boolean} caps-disabled [false] If set will not output any cap styles for both base and styles
+/// @prop {Boolean} cap [false] Toggles the use of caps on default callout
+/// @prop {Boolean} cap-side ["left"] The side that gets the cap
+/// @prop {Number} cap-match-radius [true] The cap should have be rounded to match the parent's border radius
+/// @prop {Map} cap-options The options for cap (see element.cap for options)
 /// @prop {Dimension} margin [2rem] Bottom margin of the Callout.
 /// @prop {Dimension} padding [1.5rem] Padding of the Callout.
 
 $config: (
   "background-color" : rgb(240, 240, 240),
   "border-color" : "rule-light",
-  "border-radius" :  true,
+  "border-radius" :  6px,
   "border-width" : 1px,
   "box-shadow" : none,
-  "left-cap" : true,
-  "left-cap-color" : rgb(160, 160, 160),
-  "left-cap-width" : 0.5rem,
+  "caps-disabled" : false,
+  "cap" : false,
+  "cap-side" : "left",
+  "cap-match-radius" : false,
+  "cap-options" : (
+    "color" : rgb(160, 160, 160),
+    "size" : 0.5rem,
+  ),
   "margin" : 2rem,
   "padding" : 1.5rem,
 ) !default;
 
+/// Styles Map (for unique variations/modifiers)
+/// - Adjust this with set-styles
+/// @type Map
+
 $styles: (
   "outline" : (
     "background-color": transparent
   ),
   "info" : (
     "background-color" : "info-background",
-    "left-cap-color" : "info",
-    "left-cap" : true,
   ),
   "warning" : (
     "background-color" : "info-background",
-    "left-cap-color" : "info",
-    "left-cap" : true,
   ),
   "success" : (
     "background-color" : "success-background",
-    "left-cap-color" : "success",
-    "left-cap" : true,
   ),
   "danger" : (
     "background-color" : "danger-background",
-    "left-cap-color" : "danger",
-    "left-cap" : true,
   ),
 ) !default;
 
@@ -92,7 +95,8 @@ $styles: (
 }
 
 /// Set callout style variations
-/// @param {Map} $changes Map of changes (options for style include [background-color, color, border, border-radius, border-color, box-shadow, padding, left-cap, left-cap-width, left-cap-color]
+/// - Styles that modify padding when using mix-match caps on/off should be included last
+/// @param {Map} $changes Map of changes (options for style include [background-color, color, border-color, border-radius, border-width, box-shadow, padding, cap, cap-options]
 /// @param {String} $merge-mode Merge mode see utils.map-merge() [null|"deep"|"overwrite"]
 
 @mixin set-styles($changes, $merge-mode: null) {
@@ -104,11 +108,17 @@ $styles: (
 ///  @include ulu.component-callout-styles();
 
 @mixin styles {
-  $prefix: selector.class("callout");
-  
+  $prefix: selector.class("callout");  
+  $padding: get("padding");
+  $padding-info: utils.get-spacing($padding);
+  $cap-options: get("cap-options");
+  $cap-size: map.get($cap-options, "size");
+  $cap-side: get("cap-side");
+
   #{ $prefix } {
+    position: relative; // For cap
     background-color: color.get(get("background-color"));
-    padding: get("padding");
+    padding: $padding;
     border: get("border-width") solid color.get(get("border-color"));
     margin-bottom: get("margin");
     box-shadow: get("box-shadow");
@@ -116,48 +126,98 @@ $styles: (
     & >:first-child {
       margin-top: 0;
     }
-    &::before {
-      position: absolute;
-      left: 0 - get("border-width");
-      top: 0 - get("border-width");
-      bottom: 0 - get("border-width");
-      width: get("left-cap-width");
-      background-color: color.get(get("left-cap-color"));
+
+    // If we have left cap on default we reuse this for all
+    // Else we will print it out manually for each unique style
+    @if (not get("caps-disabled")) {   
+      $cap-defaults: (
+        "offset" : get("border-width"),
+        "border-radius" : if(get("cap-match-radius"), get("border-radius"), null),
+        // "padding-adjust" : map.get($padding-info, $cap-side)
+      );
+      @include element.cap(
+        $side: $cap-side,
+        $options: map.merge($cap-defaults, $cap-options)
+      );
     }
-    @if get("left-cap") {
-      @include -left-cap();
+      
+    // If the left cap is disabled we still include it's CSS but we hide it
+    // so that other styles of callouts can use it
+    @if (not get("cap")) {
+      &::before {
+        content: none;
+      }
+    // Since this is hidden and reused we need to not use padding adjust unless it
+    // was visible
+    } @else if ($cap-size) {
+      padding-#{ $cap-side }: calc(map.get($padding-info, $cap-side) + $cap-size);
     }
   }
+
+  @include -output-style-modifiers();
+}
+
+// Output Each Style Modifier
+// - Note if cap is not disabled this will just update appearance values of cap styling
+@mixin -output-style-modifiers() {
+  $prefix: selector.class("callout");  
+  $caps-enabled: not get("caps-disabled");
+  $cap-side: get("cap-side");
+
   @each $name, $style in $styles {
-    $left-cap-color: map.get($style, "left-cap-color");
+    $cap: map.get($style, "cap");
+    $padding: map.get($style, "padding");
+    $border-radius: map.get($style, "border-radius");
+    $background-color: map.get($style, "background-color");
+    $color: map.get($style, "color");
+    $border-color: map.get($style, "border-color");
+    $border-width: map.get($style, "border-width");
+    $box-shadow: map.get($style, "box-shadow");
+    $cap-match-radius: map.get($style, "cap-match-radius");
+
     #{ $prefix }--#{ $name } {
-      background-color: color.get(map.get($style, "background-color")); 
-      color: color.get(map.get($style, "color")); 
-      border: map.get($style, "border"); 
-      border-radius: map.get($style, "border-radius"); 
-      border-color: color.get(map.get($style, "border-color")); 
-      box-shadow: map.get($style, "box-shadow"); 
-      padding: map.get($style, "padding"); 
-      @if $left-cap-color {
+      background-color: color.get($background-color); 
+      color: color.get($color); 
+      border-radius: $border-radius; 
+      border-color: color.get($border-color); 
+      border-width: $border-width; 
+      box-shadow: $box-shadow; 
+      padding: $padding; 
+
+      @if ($cap and $caps-enabled) {
+        $match-radius: utils.if-type("bool", $cap-match-radius, get("cap-match-radius"));
+        // Padding adjust always has to be set (since size could change or padding)
+        $padding-info: utils.get-spacing(if($padding, $padding, get("padding")));
+        $cap-radius: utils.if-type("number", $border-radius, get("border-radius"));
+        $cap-options: utils.ensure-map(map.get($style, "cap-options"));
+        $cap-defaults: (
+          "size" : map.get(get("cap-options"), "size"),
+          "padding-adjust" : map.get($padding-info, $cap-side),
+          "offset" : $border-width,
+          "border-radius" : if($match-radius, $cap-radius, null)
+        );
+
+        @include element.cap-appearance(
+          $side: $cap-side,
+          $options: map.merge($cap-defaults, $cap-options),
+          $before: true
+        );
+
+        // Because the main callout's cap may not be visible
         &::before {
-          background-color: color.get($left-cap-color);
+          content: "";
+        }
+      // If set to false remove the cap (if enabled) and reset default cap padding adjust
+      } @else if ($cap == false and $caps-enabled) {
+        // if this style doesn't set padding
+        @if (not $padding) {
+          $padding-info: utils.get-spacing(get("padding"));
+          padding-#{ $cap-side }: map.get($padding-info, $cap-side);
+        }
+        &::before {
+          content: none;
         }
-      }
-      @if map.get($style, "left-cap") and not get("left-cap") {
-        // if current style has left cap and the global callout does not. This prevents duplicate styles printing.
-        @include -left-cap();
       }
     }
   }
-}
-
-@mixin -left-cap() {
-  $left-padding: get-spacing-left(get("padding"));
-  position: relative; 
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-  padding-left: get("left-cap-width") + $left-padding;
-  &::before {
-    content: "";
-  }
 }

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"}