@ulu/frontend 0.1.0-beta.99 → 0.2.0-beta.10

package/dist/es/ui/flipcard.js

@@ -0,0 +1,97 @@
+var p = Object.defineProperty;
+var h = (r, t, e) => t in r ? p(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e;
+var l = (r, t, e) => h(r, typeof t != "symbol" ? t + "" : t, e);
+import { ComponentInitializer as f } from "../core/component.js";
+import { trimWhitespace as m } from "@ulu/utils/string.js";
+import { logError as b, log as g } from "../utils/class-logger.js";
+const d = new f({
+  type: "flipcard",
+  baseAttribute: "data-ulu-flipcard"
+});
+function k() {
+  d.init({
+    withData: !0,
+    coreEvents: ["pageModified"],
+    setup({ element: r, data: t, initialize: e }) {
+      const n = Object.assign({}, t), i = r.querySelector(d.attributeSelector("front")), o = r.querySelector(d.attributeSelector("back"));
+      new u(r, i, o, n), e();
+    }
+  });
+}
+const c = class c {
+  constructor(t, e, n, i) {
+    n || b(this, "Missing an element (container, front, back)"), this.options = Object.assign({}, c.defaults, i);
+    const { namespace: o } = this.options;
+    c.instances.push(this), this.elements = { container: t, front: e, back: n }, this.isOpen = !1, this.uid = `${o}-id-${c.instances.length}`, this.stateAttr = `data-${o}-state`.toLowerCase(), this.setup(), this.setVisibility(!1), g(this, this);
+  }
+  toggle() {
+    this.setVisibility(!this.isOpen);
+  }
+  setup() {
+    const { uid: t } = this, { namespace: e, proxyClick: n } = this.options, { container: i, front: o, back: a } = this.elements, s = this.elements.control = document.createElement("button");
+    s.classList.add(this.getClass("control-button")), s.setAttribute("type", "button"), s.innerHTML = this.createControlContent(), s.style.gridArea = e, s.style.zIndex = "-1", s.addEventListener("focusin", () => {
+      s.style.zIndex = "20";
+    }), s.addEventListener("focusout", () => {
+      s.style.zIndex = "-1";
+    }), s.addEventListener("click", this.toggle.bind(this)), a.parentNode.insertBefore(s, a), i.classList.add(this.options.namespace), i.setAttribute("style", m(this.containerCss())), n && i.addEventListener("click", this.onProxyClick.bind(this)), o.style.gridArea = e, a.style.gridArea = e, s.id = `${t}-control`, s.setAttribute("aria-controls", a.id), s.setAttribute("aria-expanded", "false"), a.id = `${t}-back`, a.setAttribute("aria-labelledby", s.id), a.setAttribute("aria-hidden", "true");
+  }
+  /**
+   * Click handler on everything on container
+   * - Determines if click was something that should be ignored (link, etc)
+   */
+  onProxyClick({ target: t }) {
+    const { exclude: e, allowSelection: n, selectionMin: i } = this.options.proxyClick, o = window.getSelection();
+    e && !t.matches(e) && (!n || o.toString().length < i) && this.toggle();
+  }
+  getClass(t) {
+    const { namespace: e } = this.options;
+    return t ? `${e}__${t}` : e;
+  }
+  createControlContent() {
+    return `
+      <span class="hidden-visually">Show More Information</span>
+    `;
+  }
+  setVisibility(t) {
+    const { back: e, container: n, control: i } = this.elements, o = t ? "open" : "closed";
+    e.style.zIndex = t ? "10" : "1", e.style.visibility = t ? "visible" : "hidden", n.setAttribute(this.stateAttr, o), e.setAttribute("aria-hidden", t ? "false" : "true"), i.setAttribute("aria-expanded", t ? "true" : "false"), this.isOpen = t;
+  }
+  containerCss() {
+    return `
+      display: -ms-grid;
+      display: grid;
+      position: relative; 
+      -ms-grid-columns: 1fr; 
+      grid-template-columns: 1fr;
+      justify-items: stretch;
+      grid-template-areas: "${this.options.namespace}";
+      cursor: pointer;
+    `;
+  }
+  panelCss(t = 1) {
+    return `
+      grid-area: ${this.options.namespace};
+      z-index: ${t}
+    `;
+  }
+};
+l(c, "instances", []), /**
+ * Default options for Flipcard
+ */
+l(c, "defaults", {
+  namespace: "Flipcard",
+  proxyClick: {
+    allowSelection: !0,
+    // Don't proxy click if the user has more than the minmimum selected
+    selectionMin: 10,
+    // Minimum length that qualifies as a selection
+    exclude: "a, input, textarea, button"
+    // Selectors to avoid closing a flipcard onProxyclick 
+  }
+});
+let u = c;
+export {
+  u as Flipcard,
+  k as init,
+  d as initializer
+};

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

@@ -1,11 +1,11 @@
+import { ComponentInitializer } from '../core/component.js';
 /**
  * Sets up document for grid position classes
  * @param {Object} classes Classes (optional) @see setPositionClasses
  */
-export function init(classes: any): void;
+export function init(classes: Object): void;
 /**
  * Dialog Component Initializer
  */
 export const initializer: ComponentInitializer;
-import { ComponentInitializer } from "../utils/system.js";
 //# sourceMappingURL=grid.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../../../lib/js/ui/grid.js"],"names":[],"mappings":"AAeA;;;GAGG;AACH,8BAFW,MAAM,QAUhB;AApBD;;GAEG;AACH,+CAGG;qCATkC,sBAAsB"}

package/dist/es/ui/grid.js

@@ -0,0 +1,18 @@
+import { ComponentInitializer as o } from "../core/component.js";
+import { setPositionClasses as n } from "../utils/dom.js";
+const r = new o({
+  type: "grid",
+  baseAttribute: "data-grid"
+});
+function p(i) {
+  r.init({
+    coreEvents: ["pageModified", "pageResized"],
+    setup({ element: t, initialize: e }) {
+      n(t, i), e();
+    }
+  });
+}
+export {
+  p as init,
+  r as initializer
+};

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

@@ -0,0 +1,23 @@
+export { BreakpointManager } from './breakpoints.js';
+export { Collapsible } from './collapsible.js';
+export { ProgrammaticModalManager } from './programmatic-modal.js';
+export { OverflowScroller } from './overflow-scroller.js';
+export { createPager as overflowScrollerCreatePager } from './overflow-scroller-pager.js';
+export { init as pageInit } from './page.js';
+export { init as printInit } from './print.js';
+export { Resizer } from './resizer.js';
+export { init as detailsGroupInit, initializer as detailsGroupInitializer, setupGroup as detailsGroupSetupGroup } from './details-group.js';
+export { baseAttribute as dialogBaseAttribute, closeAttribute as dialogCloseAttribute, defaults as dialogDefaults, getDialogOptions as dialogGetDialogOptions, init as dialogInit, initializer as dialogInitializer, setDefaults as dialogSetDefaults, setupDialog as dialogSetupDialog, setupTrigger as dialogSetupTrigger } from './dialog.js';
+export { Flipcard, init as flipcardInit, initializer as flipcardInitializer } from './flipcard.js';
+export { init as gridInit, initializer as gridInitializer } from './grid.js';
+export { buildModal as modalBuilderBuildModal, defaults as modalBuilderDefaults, init as modalBuilderInit, initializer as modalBuilderInitializer, setDefaults as modalBuilderSetDefaults } from './modal-builder.js';
+export { getContentByTrigger as popoverGetContentByTrigger, init as popoverInit, initializer as popoverInitializer, instances as popoverInstances, Popover, resolve as popoverResolve } from './popover.js';
+export { attrs as printDetailsAttrs, init as printDetailsInit } from './print-details.js';
+export { attachHandlers as proxyClickAttachHandlers, defaults as proxyClickDefaults, init as proxyClickInit, initializer as proxyClickInitializer, setDefaults as proxyClickSetDefaults, setupProxy as proxyClickSetupProxy } from './proxy-click.js';
+export { init as scrollSliderInit, initializer as scrollSliderInitializer } from './scroll-slider.js';
+export { init as scrollpointInit, initializer as scrollpointInitializer, Scrollpoint } from './scrollpoint.js';
+export { init as sliderInit, initializer as sliderInitializer, setupSlider as sliderSetupSlider, Slider } from './slider.js';
+export { init as tabsInit, initializer as tabsInitializer, instances as tabsInstances, setup as tabsSetup } from './tabs.js';
+export { defaults as themeToggleDefaults, init as themeToggleInit, initializer as themeToggleInitializer, setDefaults as themeToggleSetDefaults, setupToggle as themeToggleSetupToggle } from './theme-toggle.js';
+export { init as tooltipInit, initializer as tooltipInitializer, Tooltip } from './tooltip.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../js/ui/index.js"],"names":[],"mappings":""}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/js/ui/index.js"],"names":[],"mappings":""}

package/{types → dist/es}/ui/modal-builder.d.ts

@@ -1,7 +1,9 @@
+import { Resizer } from './resizer.js';
+import { ComponentInitializer } from '../core/component.js';
 /**
  * @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;
+export function setDefaults(options: Object): void;
 /**
  * Initialize everything in document
  * - This will only initialize elements once, it is safe to call on page changes
@@ -12,20 +14,20 @@ export function init(): void;
  * @param {Node} content Content element of the dialog (what is inserted into the body)
  * @param {Object} options Options for built dialog (see defaults)
  */
-export function buildModal(content: Node, options: any): {
-    modal: Element;
-    resizer: Resizer;
+export function buildModal(content: Node, options: Object): {
+    modal: any;
+    resizer: Resizer | undefined;
 };
 /**
  * Modal Builder Component Initializer
  */
 export const initializer: ComponentInitializer;
 export namespace defaults {
-    export let title: any;
-    export let titleIcon: any;
+    export let title: null;
+    export let titleIcon: null;
     export let titleClass: string;
-    export let labelledby: any;
-    export let describedby: any;
+    export let labelledby: null;
+    export let describedby: null;
     export let nonModal: boolean;
     export let documentEnd: boolean;
     export let allowResize: boolean;
@@ -38,11 +40,12 @@ export namespace defaults {
     let _class: string;
     export { _class as class };
     export let baseClass: string;
-    export let footerElement: any;
-    export let footerHtml: any;
-    export let classCloseIcon: any;
-    export let classResizerIcon: any;
-    export let classResizerIconBoth: any;
+    export let footerElement: null;
+    export let footerHtml: null;
+    export let classClose: string;
+    export let classCloseIcon: Object;
+    export let classResizerIcon: Object;
+    export let classResizerIconBoth: Object;
     export let debug: boolean;
     export function templateCloseIcon(config: any): string;
     export function templateResizerIcon(config: any): string;
@@ -52,7 +55,7 @@ export namespace defaults {
      * @param {Object} config Resolved options
      * @returns {String} Markup for modal
      */
-    export function template(id: string, config: any): string;
+    export function template(id: string, config: Object): string;
 }
 /**
  * Default builder options (extends dialog defaults, watch name collisions)
@@ -126,7 +129,11 @@ export type DefaultModalOptions = {
      */
     baseClass: string;
     /**
-     * - The class name for the close icon. Uses the wrapped setting string.
+     * - The class name for the close button. Defaults to 'button button--icon' styling.
+     */
+    classClose: string;
+    /**
+     * - The class name for the close icon. Defaults to 'button__icon' styling. Uses the wrapped setting string.
      */
     classCloseIcon: string;
     /**
@@ -154,6 +161,4 @@ export type DefaultModalOptions = {
      */
     config: (arg0: object) => string;
 };
-import { Resizer } from "./resizer.js";
-import { ComponentInitializer } from "../utils/system.js";
 //# sourceMappingURL=modal-builder.d.ts.map

package/dist/es/ui/modal-builder.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal-builder.d.ts","sourceRoot":"","sources":["../../../lib/js/ui/modal-builder.js"],"names":[],"mappings":"AAoJA;;GAEG;AACH,qCAFW,MAAM,QAIhB;AAED;;;GAGG;AACH,6BAQC;AAED;;;;GAIG;AACH,oCAHW,IAAI,WACJ,MAAM;;;EAqEhB;AApOD;;GAEG;AACH,+CAGG;;;;;;;;;;;;;;;;;;;;;;;;;;IAiED,uDAGC;IACD,yDAIC;IACD;;;;;OAKG;IACH,6CAHW,MAAM,UA8ChB;;;;;;;;;;;;WAnHW,MAAM,GAAC,IAAI;;;;eACX,MAAM,GAAC,IAAI;;;;gBACX,MAAM;;;;gBACN,MAAM;;;;iBACN,MAAM;;;;cACN,OAAO;;;;iBACP,OAAO;;;;iBACP,OAAO;;;;cACP,QAAQ,GAAC,UAAU,GAAC,YAAY,GAAC,WAAW,GAAC,aAAa,GAAC,eAAe,GAAC,cAAc;;;;eACzF,OAAO;;;;gBACP,OAAO;;;;UACP,SAAS,GAAC,OAAO,GAAC,OAAO,GAAC,YAAY;;;;WACtC,OAAO;;;;iBACP,OAAO;;;;WACP,MAAM;;;;eACN,MAAM;;;;gBACN,MAAM;;;;oBACN,MAAM;;;;sBACN,MAAM;;;;mBACN,MAAM,GAAC,IAAI;;;;gBACX,MAAM,GAAC,IAAI;;;;WACX,OAAO;;;;uBACP,CAAS,IAAM,EAAN,MAAM,KAAG,MAAM;;;;YACxB,CAAS,IAAM,EAAN,MAAM,KAAG,MAAM;;wBA1Cd,cAAc;qCAHD,sBAAsB"}

package/dist/es/ui/modal-builder.js

@@ -0,0 +1,136 @@
+import { ComponentInitializer as C } from "../core/component.js";
+import { wrapSettingString as d } from "../core/settings.js";
+import { getCoreEventName as m } from "../core/events.js";
+import { Resizer as _ } from "./resizer.js";
+import { closeAttribute as y, baseAttribute as I, defaults as E } from "./dialog.js";
+import { createElementFromHtml as v, getElement as R } from "@ulu/utils/browser/dom.js";
+const n = new C({
+  type: "modal-builder",
+  baseAttribute: "data-ulu-modal-builder"
+}), w = {
+  title: null,
+  titleIcon: null,
+  titleClass: "",
+  labelledby: null,
+  describedby: null,
+  nonModal: !1,
+  documentEnd: !0,
+  allowResize: !1,
+  position: "center",
+  bodyFills: !1,
+  noBackdrop: !1,
+  size: "default",
+  print: !1,
+  noMinHeight: !1,
+  class: "",
+  baseClass: "modal",
+  footerElement: null,
+  footerHtml: null,
+  classClose: "button button--icon",
+  classCloseIcon: d("iconClassClose", (s) => `${s} button__icon`),
+  classResizerIcon: d("iconClassDragX"),
+  classResizerIconBoth: d("iconClassDragBoth"),
+  debug: !1,
+  templateCloseIcon(s) {
+    const { baseClass: t, classCloseIcon: e } = s;
+    return `<span class="${t}__close-icon ${e}" aria-hidden="true"></span>`;
+  },
+  templateResizerIcon(s) {
+    const { baseClass: t, classResizerIcon: e, classResizerIconBoth: i } = s, r = s.position === "center" ? i : e;
+    return `<span class="${t}__resizer-icon ${r}" aria-hidden="true"></span>`;
+  },
+  /**
+   * Default modal template
+   * @param {String} id ID for new modal
+   * @param {Object} config Resolved options
+   * @returns {String} Markup for modal
+   */
+  template(s, t) {
+    const { baseClass: e, describedby: i, footerHtml: r } = t, o = [
+      e,
+      `${e}--${t.position}`,
+      `${e}--${t.size}`,
+      `${e}--${t.allowResize ? "resize" : "no-resize"}`,
+      ...t.title ? [] : [`${e}--no-header`],
+      ...t.bodyFills ? [`${e}--body-fills`] : [],
+      ...t.noBackdrop ? [`${e}--no-backdrop`] : [],
+      ...t.noMinHeight ? [`${e}--no-min-height`] : [],
+      ...t.class ? [t.class] : []
+    ], a = t.title ? `${s}--title` : t.labelledby;
+    return `
+      <dialog 
+        id="${s}" 
+        class="${o.join(" ")}" 
+        ${a ? `aria-labelledby="${a}"` : ""}
+        ${i ? `aria-describedby="${i}"` : ""}
+      >
+        ${t.title ? `
+          <header class="${e}__header">
+            <h2 id="${a}" class="${e}__title ${t.titleClass}">
+              ${t.titleIcon ? `<span class="${e}__title-icon ${t.titleIcon}" aria-hidden="true"></span>` : ""}
+              <span class="${e}__title-text">${t.title}</span>
+            </h2>
+            <button class="${e}__close ${t.classClose}" aria-label="Close modal" ${y} autofocus>
+              ${t.templateCloseIcon(t)}
+            </button>
+          </header>
+        ` : ""}
+        <div class="${e}__body" ${n.getAttribute("body")}></div>
+        ${r ? `<div class="${e}__footer">${r}</div>` : ""}
+        ${t.allowResize ? `<button class="${e}__resizer" type="button" ${n.getAttribute("resizer")}>
+            ${t.templateResizerIcon(t)}
+          </button>` : ""}
+      </dialog>
+    `;
+  }
+};
+let c = { ...w };
+function j(s) {
+  c = Object.assign({}, c, s);
+}
+function N() {
+  n.init({
+    withData: !0,
+    coreEvents: ["pageModified"],
+    setup({ element: s, data: t }) {
+      A(s, t);
+    }
+  });
+}
+function A(s, t) {
+  const e = Object.assign({}, c, t), { position: i } = e;
+  if (e.debug && n.log(e, s), !s.id)
+    throw new Error("Missing ID on modal");
+  const r = e.template(s.id, e), o = v(r.trim()), a = (l) => o.querySelector(n.attributeSelector(l)), u = a("body"), p = a("resizer"), $ = g(e);
+  if (s.removeAttribute("id"), s.removeAttribute("hidden"), s.removeAttribute(n.getAttribute()), s.parentNode.replaceChild(o, s), u.appendChild(s), o.setAttribute(I, JSON.stringify($)), e.footerElement) {
+    const l = R(e.footerElement);
+    l && (l.classList.add(`${e.baseClass}__footer`), u.after(l));
+  }
+  let b;
+  const f = ["left", "right", "center"], h = i === "center", z = i === "right";
+  if (e.allowResize)
+    if (f.includes(i)) {
+      const l = h ? { fromX: "right", fromY: "bottom", multiplier: 2 } : { fromX: z ? "left" : "right" };
+      b = new _(o, p, l);
+    } else
+      console.warn(`${i} is not supported for resizing`);
+  if (e.print) {
+    let l;
+    document.addEventListener(m("beforePrint"), () => {
+      l = s.cloneNode(!0), o.after(l);
+    }), document.addEventListener(m("afterPrint"), () => {
+      l.remove();
+    });
+  }
+  return { modal: o, resizer: b };
+}
+function g(s) {
+  return Object.keys(E).reduce((t, e) => (e in s && (t[e] = s[e]), t), {});
+}
+export {
+  A as buildModal,
+  w as defaults,
+  N as init,
+  n as initializer,
+  j as setDefaults
+};

package/dist/es/ui/overflow-scroller-pager.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"overflow-scroller-pager.d.ts","sourceRoot":"","sources":["../../../lib/js/ui/overflow-scroller-pager.js"],"names":[],"mappings":"AAAA;;GAEG;AACH;;;;;;;;;;;GAWG;AAEH,wCA4CC"}

package/dist/es/ui/overflow-scroller-pager.js

@@ -0,0 +1,28 @@
+function y() {
+  return function(c, a) {
+    const r = a === "next", { track: s } = c.elements;
+    if (!s.children) return 400;
+    const g = window.getComputedStyle(s).getPropertyValue("scroll-padding-left").replace("auto", "0px"), n = parseInt(g, 10), { scrollLeft: i, offsetWidth: l } = s, u = i + l, o = [...s.children].map((e) => {
+      const { offsetLeft: t, offsetWidth: d } = e;
+      return {
+        element: e,
+        offsetLeft: t,
+        offsetRight: t + d
+      };
+    });
+    let f;
+    if (r)
+      f = o.find((e) => e.offsetRight >= u);
+    else {
+      let e = o.findLastIndex((t) => t.offsetLeft <= i);
+      if (e) {
+        let t = o[e];
+        f = o.slice(0, e + 1).find((h) => h.offsetLeft + n + l >= t.offsetRight);
+      }
+    }
+    return f ? r ? f.offsetLeft : f.offsetLeft + n : 400;
+  };
+}
+export {
+  y as createPager
+};

package/{types → dist/es}/ui/overflow-scroller.d.ts

@@ -8,8 +8,8 @@ export class OverflowScroller {
         offsetEnd: number;
         amount: string;
         buttonClasses: string[];
-        iconClassPrevious: any;
-        iconClassNext: any;
+        iconClassPrevious: Object;
+        iconClassNext: Object;
     };
     constructor(elements: any, config: any);
     options: any;
@@ -18,7 +18,7 @@ export class OverflowScroller {
     previousEnabled: boolean;
     scrollHandler: (e: any) => void;
     checkOverflow(): void;
-    hasOverflow: boolean;
+    hasOverflow: boolean | undefined;
     createControls(context: any): {
         controls: HTMLUListElement;
         previousItem: HTMLLIElement;

package/dist/es/ui/overflow-scroller.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"overflow-scroller.d.ts","sourceRoot":"","sources":["../../../lib/js/ui/overflow-scroller.js"],"names":[],"mappings":"AAmBA;IACE,wBAAsB;IACtB;;;;;;;;;;MAUC;IACD,wCAgBC;IAfC,aAAmE;IAKnE,cAGC;IACD,qBAAuB;IACvB,yBAA2B;IAC3B,gCAA4C;IAK9C,sBAGC;IADC,iCAAwD;IAE1D;;;;;;MA2BC;IACD,oDAQC;IACD,uCAMC;IACD,2BAGC;IACD,2BAiBC;IACD,8CAeC;IACD,6BAaC;IACD,aAMC;IACD,iBAMC;IACD,6BAGC;CACF"}

package/dist/es/ui/overflow-scroller.js

@@ -0,0 +1,90 @@
+var v = Object.defineProperty;
+var C = (a, s, t) => s in a ? v(a, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : a[s] = t;
+var u = (a, s, t) => C(a, typeof s != "symbol" ? s + "" : s, t);
+import { wrapSettingString as p } from "../core/settings.js";
+import { hasRequiredProps as b } from "@ulu/utils/object.js";
+import { logError as m } from "../utils/class-logger.js";
+const x = [
+  "track",
+  "controls"
+], c = class c {
+  constructor(s, t) {
+    this.options = Object.assign({}, c.defaults, t), b(x) || m(this, "Missing a required Element"), this.elements = {
+      ...s,
+      ...this.createControls(s.controls)
+    }, this.nextEnabled = !0, this.previousEnabled = !0, this.scrollHandler = (e) => this.onScroll(e), this.elements.track.addEventListener("scroll", this.scrollHandler, { passive: !0 }), this.checkOverflow(), this.onScroll();
+  }
+  checkOverflow() {
+    const { track: s } = this.elements;
+    this.hasOverflow = s.scrollWidth > s.clientWidth;
+  }
+  createControls(s) {
+    const t = document.createElement("ul"), e = document.createElement("li"), o = document.createElement("li"), n = this.createControlButton("previous"), r = this.createControlButton("next"), i = this.getClass("controls-item");
+    return o.classList.add(i), o.classList.add(i + "--next"), e.classList.add(i), e.classList.add(i + "--previous"), t.classList.add(this.getClass("controls")), e.appendChild(n), o.appendChild(r), t.appendChild(e), t.appendChild(o), n.addEventListener("click", this.previous.bind(this)), r.addEventListener("click", this.next.bind(this)), s.appendChild(t), {
+      controls: t,
+      previousItem: e,
+      nextItem: o,
+      previous: n,
+      next: r
+    };
+  }
+  createControlButton(s) {
+    const t = document.createElement("button");
+    return t.classList.add(this.getClass("control-button")), t.classList.add(this.getClass(`control-button--${s}`)), t.classList.add(...this.options.buttonClasses), t.setAttribute("type", "button"), t.innerHTML = this.getControlContent(s), t;
+  }
+  getControlContent(s) {
+    const t = this.options[s === "next" ? "iconClassNext" : "iconClassPrevious"];
+    return `
+      <span class="hidden-visually">${s}</span>
+      <span class="${t}" aria-hidden="true"></span>
+    `;
+  }
+  onScroll(s) {
+    this.hasOverflow && this.onScrollHorizontal();
+  }
+  onScrollHorizontal() {
+    const { nextEnabled: s, previousEnabled: t } = this, { track: e } = this.elements, { offsetStart: o, offsetEnd: n } = this.options, { scrollWidth: r, clientWidth: i, scrollLeft: d } = e, l = d <= o, h = r - d - n <= i;
+    l && t ? this.setControlState("previous", !1) : !l && !t && this.setControlState("previous", !0), h && s ? this.setControlState("next", !1) : !h && !s && this.setControlState("next", !0);
+  }
+  setControlState(s, t) {
+    const e = s === "next", { next: o, nextItem: n, previous: r, previousItem: i } = this.elements, d = e ? n : i, l = e ? o : r, h = t ? "remove" : "add";
+    d.classList[h](this.getClass("controls-item--disabled")), l.classList[t ? "remove" : "add"](this.getClass("control--disabled")), t ? l.removeAttribute("disabled") : l.setAttribute("disabled", ""), this[e ? "nextEnabled" : "previousEnabled"] = t;
+  }
+  resolveAmount(s) {
+    const t = s === "next", { amount: e } = this.options, { scrollLeft: o, offsetWidth: n } = this.elements.track;
+    return e === "auto" ? t ? o + n : o - n : typeof e == "function" ? e(this, s) : typeof e == "number" ? t ? o + e : o - e : (m("Unable to resolve amount for scroll"), 500);
+  }
+  next() {
+    this.elements.track.scrollTo({
+      top: 0,
+      left: this.resolveAmount("next"),
+      behavior: "smooth"
+    });
+  }
+  previous() {
+    this.elements.track.scrollTo({
+      top: 0,
+      left: this.resolveAmount("previous"),
+      behavior: "smooth"
+    });
+  }
+  getClass(s) {
+    const { namespace: t } = this.options;
+    return `${t}__${s}`;
+  }
+};
+u(c, "instances", []), u(c, "defaults", {
+  namespace: "OverflowScroller",
+  events: {},
+  horizontal: !0,
+  offsetStart: 100,
+  offsetEnd: 100,
+  amount: "auto",
+  buttonClasses: ["button", "button--icon"],
+  iconClassPrevious: p("iconClassPrevious"),
+  iconClassNext: p("iconClassNext")
+});
+let f = c;
+export {
+  f as OverflowScroller
+};

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

@@ -0,0 +1 @@
+{"version":3,"file":"page.d.ts","sourceRoot":"","sources":["../../../lib/js/ui/page.js"],"names":[],"mappings":"AAQA;;GAEG;AACH,6BAEC"}

package/dist/es/ui/page.js

@@ -0,0 +1,7 @@
+import { addScrollbarCustomProperty as o } from "@ulu/utils/browser/dom.js";
+function t() {
+  o();
+}
+export {
+  t as init
+};

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

@@ -1,3 +1,5 @@
+import { ComponentInitializer } from '../core/component.js';
+import { Collapsible } from './collapsible.js';
 /**
  * Initialize default popover
  */
@@ -23,7 +25,7 @@ export const initializer: ComponentInitializer;
 /**
  * Array of current instances
  */
-export const instances: any;
+export const instances: WeakMap<WeakKey, any>;
 /**
  * Class that extends Collapsible adding floating-ui for popover behavior
  */
@@ -31,9 +33,7 @@ export class Popover extends Collapsible {
     constructor(elements: any, config: any, floatingOptions: any);
     floatingOptions: any;
     createFloatingInstance(): void;
-    floatingCleanup: Function;
+    floatingCleanup: Function | null | undefined;
     destroyFloatingInstance(): void;
 }
-import { ComponentInitializer } from "../utils/system.js";
-import { Collapsible } from "./collapsible.js";
 //# sourceMappingURL=popover.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../../lib/js/ui/popover.js"],"names":[],"mappings":"AAgCA;;GAEG;AACH,6BAmBC;AAED;;GAEG;AACH;;;;;;;;;EAiBC;AAKD,uDAmBC;AA5FD;;GAEG;AACH,+CAGG;AAOH;;GAEG;AACH,8CAAqC;AA+ErC;;GAEG;AACH;IACE,8DAIC;IADC,qBAA4C;IAa9C,+BAIC;IADC,6CAA+E;IAEjF,gCAKC;CACF;qCAlIoC,sBAAsB;4BAE/B,kBAAkB"}

package/dist/es/ui/popover.js

@@ -0,0 +1,77 @@
+import { ComponentInitializer as p } from "../core/component.js";
+import { createFloatingUi as f } from "../utils/floating-ui.js";
+import { Collapsible as u } from "./collapsible.js";
+const r = new p({
+  type: "popover",
+  baseAttribute: "data-ulu-popover"
+}), d = r.attributeSelector("trigger-anchor"), h = r.attributeSelector("arrow"), m = r.getAttribute("content"), b = r.attributeSelector("content"), c = /* @__PURE__ */ new WeakMap(), g = {
+  clickOutsideCloses: !0,
+  escapeCloses: !0
+};
+function I() {
+  r.init({
+    key: "trigger",
+    withData: !0,
+    coreEvents: ["pageModified"],
+    setup({ element: t, data: e, initialize: n }) {
+      if (c.has(t)) return;
+      const o = y(t, e);
+      if (!o) {
+        r.warn("Unable to resolve popover elements for trigger.", t);
+        return;
+      }
+      const { elements: s, options: i, floatingOptions: a } = o;
+      c.set(s, new S(s, i, a)), n();
+    }
+  });
+}
+function y(t, e) {
+  const n = Object.assign({}, e), o = C(t), s = {
+    trigger: t,
+    content: o,
+    anchor: t.querySelector(d) || t,
+    contentArrow: o.querySelector(h)
+  }, i = n.floating || {};
+  return delete n.floating, o ? { elements: s, options: n, floatingOptions: i } : (r.logError("Unable to make popover for", t), !1);
+}
+function C(t) {
+  var o;
+  let e;
+  const n = t.getAttribute("aria-controls");
+  if (n)
+    e = document.getElementById(n);
+  else if ((o = t == null ? void 0 : t.nextElementSibling) != null && o.hasAttribute(m))
+    e = t.nextElementSibling;
+  else {
+    const s = Array.from(t.parentNode.children), i = s.findIndex((l) => l === t);
+    e = s.slice(i).find((l) => l.matches(b));
+  }
+  return e || r.logError("Unable to resolve 'content' element for popover", t), e;
+}
+class S extends u {
+  constructor(e, n, o) {
+    const s = Object.assign({}, g, n);
+    super(e, s), this.floatingOptions = o || {};
+  }
+  setState(e, n) {
+    super.setState(e, n), this.destroyFloatingInstance(), e && this.createFloatingInstance();
+  }
+  destroy() {
+    super.destroy(), this.destroyFloatingInstance();
+  }
+  createFloatingInstance() {
+    const { content: e, anchor: n, contentArrow: o } = this.elements, s = { trigger: n, contentArrow: o, content: e };
+    this.floatingCleanup = f(s, this.floatingOptions);
+  }
+  destroyFloatingInstance() {
+    this.floatingCleanup && (this.floatingCleanup(), this.floatingCleanup = null);
+  }
+}
+export {
+  S as Popover,
+  C as getContentByTrigger,
+  I as init,
+  r as initializer,
+  c as instances,
+  y as resolve
+};

package/dist/es/ui/print-details.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"print-details.d.ts","sourceRoot":"","sources":["../../../lib/js/ui/print-details.js"],"names":[],"mappings":"AAmBA;;;;GAIG;AACH,yCAmBC"}