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

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

@@ -1,3 +1,4 @@
+import { ComponentInitializer } from '../core/component.js';
 /**
  * Initialize default popover
  */
@@ -74,23 +75,22 @@ export class Tooltip {
     options: any;
     floatingOptions: any;
     elements: any;
-    handlers: {};
-    isOpen: boolean;
+    handlers: {} | undefined;
+    isOpen: boolean | undefined;
     setup(): void;
     setupAccessibility(): void;
     destroy(): void;
     getInnerContent(): any;
-    getAnchorElement(): HTMLElement;
+    getAnchorElement(): HTMLElement | null;
     createContentElement(): void;
     attachHandlers(): void;
     destroyHandlers(): void;
     setState(isOpen: any, event: any): void;
     createEvent(name: any, detail: any): CustomEvent<any>;
     createFloatingInstance(): void;
-    floatingCleanup: Function;
+    floatingCleanup: Function | null | undefined;
     destroyFloatingInstance(): void;
     show(event: any): void;
     hide(event: any): void;
 }
-import { ComponentInitializer } from "../core/component.js";
 //# sourceMappingURL=tooltip.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../lib/js/ui/tooltip.js"],"names":[],"mappings":"AAuBA;;GAEG;AACH,6BAaC;AA5BD;;GAEG;AACH,+CAGG;AAwBH;;;;GAIG;AACH;IACE;;OAEG;IACH;QACE;;;;WAIG;;QAEH;;;WAGG;;;;;QAKH;;;WAGG;qBADO,SAAO,IAAI;QAGrB;;WAEG;;QAEH;;;WAGG;;QAEH;;;WAGG;oBADO,KAAK,QAAS;QAGxB;;;WAGG;oBADO,KAAK,QAAS;QAGxB;;;WAGG;;QAEH;;WAEG;;QAUH;;;WAGG;;MAIH;IACF,kCAEE;IACF,mEAaC;IAPC,aAA+D;IAC/D,qBAAyF;IACzF,cAA+B;IAC/B,yBAAkB;IAClB,4BAAmB;IAIrB,cAIC;IACD,2BAKC;IACD,gBAGC;IACD,uBAcC;IACD,uCASC;IACD,6BAkBC;IACD,uBAiCC;IACD,wBAiBC;IACD,wCAmBC;IACD,sDAEC;IACD,+BAEC;IADC,6CAA4E;IAE9E,gCAKC;IACD,uBAEC;IACD,uBAEC;CACF;qCApRoC,sBAAsB"}

package/dist/es/ui/tooltip.js

@@ -0,0 +1,184 @@
+var f = Object.defineProperty;
+var g = (l, t, e) => t in l ? f(l, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : l[t] = e;
+var u = (l, t, e) => g(l, typeof t != "symbol" ? t + "" : t, e);
+import { ComponentInitializer as v } from "../core/component.js";
+import { getUluEventName as E } from "../core/events.js";
+import { createFloatingUi as y } from "../utils/floating-ui.js";
+import { createElementFromHtml as C } from "@ulu/utils/browser/dom.js";
+import { logError as p } from "../utils/class-logger.js";
+import { ensureId as b, newId as w } from "../utils/id.js";
+const d = new v({
+  type: "tooltip",
+  baseAttribute: "data-ulu-tooltip"
+}), A = d.getAttribute("body"), H = d.attributeSelector("body"), S = d.attributeSelector("arrow");
+function j() {
+  d.init({
+    coreEvents: ["pageModified"],
+    withData: !0,
+    setup({ element: l, data: t, initialize: e }) {
+      const n = typeof t == "object" ? t : {};
+      typeof t == "string" && (n.content = t), e(), new m({ trigger: l }, n);
+    }
+  });
+}
+const a = class a {
+  constructor(t, e, n) {
+    const { trigger: s } = t;
+    if (!s) {
+      p(this, "missing required trigger");
+      return;
+    }
+    this.options = Object.assign({}, a.defaults, e), this.floatingOptions = Object.assign({}, a.defaultFloatingOptions, n), this.elements = { ...t }, this.handlers = {}, this.isOpen = !1, b(s), this.setup();
+  }
+  setup() {
+    this.createContentElement(), this.attachHandlers(), this.setupAccessibility();
+  }
+  setupAccessibility() {
+    const { trigger: t, content: e } = this.elements, { accessible: n } = this.options;
+    n && t.setAttribute("aria-describedby", e.id);
+  }
+  destroy() {
+    this.destroyHandlers(), this.destroyDisplay();
+  }
+  getInnerContent() {
+    const { fromElement: t, content: e, isHtml: n, fromAnchor: s } = this.options;
+    if (e)
+      return e;
+    if (t || s) {
+      const o = s ? this.getAnchorElement() : document.querySelector(t);
+      return o ? n ? o.innerHTML : o.innerText : "";
+    } else
+      p(this, "Could not resolve inner content");
+  }
+  getAnchorElement() {
+    const { trigger: t } = this.elements, { href: e } = t, n = e ? e.split("#")[1] : null, s = n ? document.getElementById(n) : null;
+    return s || console.error("Unable to get 'fromAnchor' element", t), s;
+  }
+  createContentElement() {
+    const { options: t } = this, e = C(t.template(t)), n = e.querySelector(H), s = this.getInnerContent();
+    t.isHtml ? n.innerHTML = s : n.textContent = s, e.id = w(), t.contentClass && e.classList.add(t.contentClass), this.elements.content = e, this.elements.contentArrow = e.querySelector(S), document.body.appendChild(e);
+  }
+  attachHandlers() {
+    const { trigger: t } = this.elements, { showEvents: e, hideEvents: n, delay: s } = this.options;
+    let o = null;
+    const c = (i) => {
+      o || (o = setTimeout(() => {
+        this.show(i), clearTimeout(o);
+      }, s));
+    }, r = (i) => {
+      o && (clearTimeout(o), o = null), this.hide(i);
+    }, h = (i) => {
+      i.key === "Escape" && this.hide(i);
+    };
+    e.forEach((i) => {
+      t.addEventListener(i, c);
+    }), n.forEach((i) => {
+      t.addEventListener(i, r);
+    }), document.addEventListener("keydown", h), this.handlers = { onShow: c, onHide: r, onDocumentKeydown: h };
+  }
+  destroyHandlers() {
+    const { trigger: t } = this, { onShow: e, onHide: n, onDocumentKeydown: s } = this.handlers, { showEvents: o, hideEvents: c } = this.options;
+    e && o.forEach((r) => {
+      t.removeEventListener(r, e);
+    }), n && c.forEach((r) => {
+      t.removeEventListener(r, n);
+    }), s && document.removeEventListener("keydown", s);
+  }
+  setState(t, e) {
+    const n = {
+      instance: this,
+      isOpen: t,
+      event: e
+    }, { trigger: s, content: o } = this.elements, { openClass: c } = this.options, r = (h) => h.classList[t ? "add" : "remove"](c);
+    r(s), r(o), this.isOpen = t, this.options.onChange(n), s.dispatchEvent(this.createEvent("change", n)), this.destroyFloatingInstance(), t && this.createFloatingInstance();
+  }
+  createEvent(t, e) {
+    return new CustomEvent(E("tooltip:" + t), { detail: e });
+  }
+  createFloatingInstance() {
+    this.floatingCleanup = y(this.elements, this.floatingOptions);
+  }
+  destroyFloatingInstance() {
+    this.floatingCleanup && (this.floatingCleanup(), this.floatingCleanup = null);
+  }
+  show(t) {
+    this.setState(!0, t);
+  }
+  hide(t) {
+    this.setState(!1, t);
+  }
+};
+/**
+ * Defaults options
+ */
+u(a, "defaults", {
+  /**
+   * Should the tooltip and content be linked accessibly
+   * - Note tooltips can only apply to interactive elements! (ie button, input, role="...", etc)
+   * @type {Boolean}
+   */
+  accessible: !0,
+  /**
+   * String/markup to insert into tooltip display
+   * @type {String}
+   */
+  content: null,
+  openClass: "is-active",
+  contentClass: "",
+  isHtml: !1,
+  /**
+   * Pull content from pre-existing content on page 
+   * @type {String|Node}
+   */
+  fromElement: null,
+  /**
+   * If used on a link that is an anchor link it will display the content of the anchor like fromElement
+   */
+  fromAnchor: !1,
+  /**
+   * Move the content to the bottom of the document
+   * @type {Boolean}
+   */
+  endOfDocument: !0,
+  /**
+   * Events to show tooltip on
+   * @type {Array.<String>}
+   */
+  showEvents: ["pointerenter", "focus"],
+  /**
+   * Events to hide tooltip on
+   * @type {Array.<String>}
+   */
+  hideEvents: ["pointerleave", "blur"],
+  /**
+   * Delay when using the directive
+   * @type {Number}
+   */
+  delay: 500,
+  /**
+   * Template for the content display
+   */
+  template(t) {
+    return `
+        <div class="popover popover--tooltip">
+          <div class="popover__inner" ${A}>
+          </div>
+          <span class="popover__arrow" data-ulu-tooltip-arrow></span>
+        </div>
+      `;
+  },
+  /**
+   * Callback when tooltip is shown or hidden
+   * @type {Function}
+   */
+  onChange(t) {
+  }
+}), u(a, "defaultFloatingOptions", {
+  // strategy: "fixed"
+});
+let m = a;
+export {
+  m as Tooltip,
+  j as init,
+  d as initializer
+};

package/dist/{types → es}/utils/class-logger.d.ts

@@ -2,23 +2,23 @@
  * Changes to make to configuration
  * @param {Object} changes
  */
-export function set(changes: any): void;
+export function set(changes: Object): void;
 /**
  * Proxy Console.log
  * @param {Object} context Class instance (optional), will rely on classes (debug) property for output
  * @param  {...any} messages
  */
-export function log(context: any, ...messages: any[]): void;
+export function log(context: Object, ...messages: any[]): void;
 /**
  * Proxy Console.warn
  * @param {Object} context Class instance (optional), will rely on classes (debug) property for output
  * @param  {...any} messages
  */
-export function logWarning(context: any, ...messages: any[]): void;
+export function logWarning(context: Object, ...messages: any[]): void;
 /**
  * Proxy Console.error
  * @param {Object} context Class instance (optional), will rely on classes (debug) property for output
  * @param  {...any} messages
  */
-export function logError(context: any, ...messages: any[]): void;
+export function logError(context: Object, ...messages: any[]): void;
 //# sourceMappingURL=class-logger.d.ts.map

package/dist/es/utils/class-logger.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"class-logger.d.ts","sourceRoot":"","sources":["../../../lib/js/utils/class-logger.js"],"names":[],"mappings":"AAiCA;;;GAGG;AACH,6BAFW,MAAM,QAIhB;AAED;;;;GAIG;AACH,6BAHW,MAAM,eACF,GAAG,EAAA,QAMjB;AAED;;;;GAIG;AACH,oCAHW,MAAM,eACF,GAAG,EAAA,QAMjB;AAED;;;;GAIG;AACH,kCAHW,MAAM,eACF,GAAG,EAAA,QAMjB"}

package/dist/es/utils/class-logger.js

@@ -0,0 +1,37 @@
+const n = {
+  debug: !1,
+  warningsAlways: !0,
+  errorsAlways: !0,
+  outputContext: !1
+}, g = "console" in window;
+function s(r) {
+  var o;
+  return g && n.debug && ((r == null ? void 0 : r.debug) || ((o = r == null ? void 0 : r.options) == null ? void 0 : o.debug) || r == null);
+}
+function a(r) {
+  var o;
+  return typeof r == "object" && ((o = r == null ? void 0 : r.constructor) == null ? void 0 : o.name);
+}
+function u(r, o, l) {
+  const i = a(o) || "Logger";
+  console[r](i, ...l), n.outputContext && console.log(`Context:
+`, o);
+}
+function f(r) {
+  Object.assign(n, r);
+}
+function e(r, ...o) {
+  s(r) && u("log", r, o);
+}
+function w(r, ...o) {
+  (n.warningsAlways || s(r)) && u("warn", r, o);
+}
+function b(r, ...o) {
+  (n.errorsAlways || s(r)) && u("error", r, o);
+}
+export {
+  e as log,
+  b as logError,
+  w as logWarning,
+  f as set
+};

package/dist/es/utils/css.js

@@ -0,0 +1,6 @@
+function e(t, r) {
+  return `--${t}-${r}`;
+}
+export {
+  e as getCustomProperty
+};

package/dist/{types → es}/utils/dom.d.ts

@@ -14,7 +14,7 @@ export function dataAttributeToDatasetKey(attribute: any): string;
  *   @param {Node} parent  The grid parent <data-grid="">
  *   @param {Object} classes Override the default equal heights classes
  */
-export function setPositionClasses(parent: Node, classes?: any): void;
+export function setPositionClasses(parent: Node, classes?: Object): void;
 /**
  * Resolves a class input (string or array) into a consistent array of class names.
  * @param {string|string[]} input - The class input, which can be a string, an array of strings, or any other value.

package/dist/{types → es}/utils/dom.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dom.d.ts","sourceRoot":"","sources":["../../../lib/js/utils/dom.js"],"names":[],"mappings":"AAMA;;;;GAIG;AACH,2DAFa,MAAM,CAIlB;AAED;;;;;;;;;GASG;AACH,2CAHa,IAAI,uBAoChB;AAED;;;;;;;;GAQG;AACH,8CANa,MAAM,EAAE,CAiBpB"}
+{"version":3,"file":"dom.d.ts","sourceRoot":"","sources":["../../../lib/js/utils/dom.js"],"names":[],"mappings":"AAMA;;;;GAIG;AACH,2DAFa,MAAM,CAIlB;AAED;;;;;;;;;GASG;AACH,2CAHa,IAAI,YACJ,MAAM,QAmClB;AAED;;;;;;;;GAQG;AACH,8CANa,MAAM,EAAE,CAiBpB"}

package/dist/es/utils/dom.js

@@ -0,0 +1,29 @@
+import { kebabToCamel as f } from "@ulu/utils/string.js";
+function c(t) {
+  return f(t.replace(/^data-/, ""));
+}
+function p(t, o = {
+  columnFirst: "position-column-first",
+  columnLast: "position-column-last",
+  rowFirst: "position-row-first",
+  rowLast: "position-row-last"
+}) {
+  const l = [...t.children], n = [];
+  let e;
+  l.forEach((r) => {
+    const s = r.getBoundingClientRect().y;
+    e !== s && n.push([]), n[n.length - 1].push(r), e = s, r.classList.remove(...Object.values(o));
+  }), n.forEach((r, s) => {
+    s === 0 && r.forEach((i) => i.classList.add(o.rowFirst)), s == n.length - 1 && r.forEach((i) => i.classList.add(o.rowLast)), r.forEach((i, a) => {
+      a === 0 && i.classList.add(o.columnFirst), a == r.length - 1 && i.classList.add(o.columnLast);
+    });
+  });
+}
+function m(t) {
+  return typeof t == "string" ? t.split(" ").filter((o) => o !== "") : Array.isArray(t) ? t : t ? (console.warn("resolveClassArray: Invalid class input type.", t), []) : [];
+}
+export {
+  c as dataAttributeToDatasetKey,
+  m as resolveClasses,
+  p as setPositionClasses
+};

package/dist/{types → es}/utils/file-save.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"file-save.d.ts","sourceRoot":"","sources":["../../../lib/js/utils/file-save.js"],"names":[],"mappings":"AAAA;;GAEG;AAEH;;;;;GAKG;AAGH;;;;;;;;GAQG;AACH;IACE;;;MAGC;IAmCD;;OAEG;IACH,qCAEC;IAvCD;;;OAGG;IACH,gCAFW,eAAe,EAOzB;IAJC;;;wBAA4D;IAC5D,UAAgB;IAChB,WAAyD;IACzD,YAAyC;IAE3C;;OAEG;IACH,gBAEC;IACD;;OAEG;IACH,iBAEC;IACD;;;OAGG;IACH,4CAOC;CAOF"}
+{"version":3,"file":"file-save.d.ts","sourceRoot":"","sources":["../../../lib/js/utils/file-save.js"],"names":[],"mappings":"AAAA;;GAEG;AAEH;;;;;GAKG;AAGH;;;;;;;;GAQG;AACH;IACE;;;MAGC;IAmCD;;OAEG;IACH,qCAEC;IAvCD;;;OAGG;IACH,kBAHW,GAAC,WACD,eAAe,EAOzB;IAJC;;;wBAA4D;IAC5D,UAAgB;IAChB,WAAyD;IACzD,YAAyC;IAE3C;;OAEG;IACH,gBAEC;IACD;;OAEG;IACH,iBAEC;IACD;;;OAGG;IACH,4CAOC;CAOF"}

package/dist/es/utils/file-save.js

@@ -0,0 +1,46 @@
+var l = Object.defineProperty;
+var a = (s, t, e) => t in s ? l(s, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[t] = e;
+var i = (s, t, e) => a(s, typeof t != "symbol" ? t + "" : t, e);
+const r = class r {
+  /**
+   * @param {*} data Data to put in blob file
+   * @param {FileSaveOptions} options Options for file, see defaults (ie. type, filename)
+   */
+  constructor(t, e) {
+    this.options = Object.assign({}, r.defaults, e), this.data = t, this.blob = new Blob([t], { type: this.options.type }), this.url = URL.createObjectURL(this.blob);
+  }
+  /**
+   * Remove the blob url 
+   */
+  destroy() {
+    return URL.revokeObjectURL(this.url);
+  }
+  /**
+   * Get the blob url
+   */
+  getUrl() {
+    return this.url;
+  }
+  /**
+   * Create link element with blob as href
+   * @param {String} text The text to put in the link
+   */
+  createLink(t) {
+    const e = document.createElement("a"), n = document.createTextNode(t);
+    return e.setAttribute("download", this.options.filename), e.setAttribute("href", this.url), e.appendChild(n), e;
+  }
+  /**
+   * Check for Compatibility (optional, implement on user side)
+   */
+  static isBrowserSupported() {
+    return "FileReader" in window;
+  }
+};
+i(r, "defaults", {
+  filename: "filesave-file.txt",
+  type: "text/plain;charset=utf-8"
+});
+let o = r;
+export {
+  o as FileSave
+};

package/dist/{types → es}/utils/floating-ui.d.ts

@@ -4,7 +4,7 @@
  * @param {*} options Configuration options for floatingUi
  * @returns {Function} floating cleanup function call when no longer needed
  */
-export function createFloatingUi(elements: any, config: any): Function;
+export function createFloatingUi(elements: Object, config: any): Function;
 export namespace defaults {
     let strategy: string;
     let placement: string;

package/dist/{types → es}/utils/floating-ui.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"floating-ui.d.ts","sourceRoot":"","sources":["../../../lib/js/utils/floating-ui.js"],"names":[],"mappings":"AA0BA;;;;;GAKG;AACH,uEAuCC"}
+{"version":3,"file":"floating-ui.d.ts","sourceRoot":"","sources":["../../../lib/js/utils/floating-ui.js"],"names":[],"mappings":"AA0BA;;;;;GAKG;AACH,2CAJW,MAAM,yBA2ChB"}

package/dist/es/utils/floating-ui.js

@@ -0,0 +1,46 @@
+import { autoUpdate as d, computePosition as g, inline as y, offset as b, flip as h, shift as j, arrow as w } from "@floating-ui/dom";
+const $ = {
+  strategy: "absolute",
+  placement: "bottom",
+  inline: !1,
+  offset: {
+    mainAxis: 16
+  },
+  shift: !0,
+  flip: !0,
+  arrow: !0
+  // Options for arrow (not element)
+};
+function O(l, n) {
+  const t = Object.assign({}, $, n), { placement: r, strategy: f } = t, { trigger: o, content: s, contentArrow: a } = l;
+  return d(o, s, () => {
+    g(o, s, {
+      placement: r,
+      strategy: f,
+      middleware: [
+        ...i(y, t.inline),
+        ...i(b, t.offset),
+        ...i(h, t.flip),
+        ...i(j, t.shift),
+        ...i(w, a && t.arrow, { element: a })
+      ]
+    }).then((c) => {
+      const { x: p, y: u, middlewareData: m, placement: x } = c, e = m.arrow;
+      Object.assign(s.style, {
+        left: `${p}px`,
+        top: `${u}px`
+      }), s.setAttribute("data-placement", x), e && Object.assign(a.style, {
+        // position: "absolute",
+        left: (e == null ? void 0 : e.x) != null ? `${e.x}px` : "",
+        top: (e == null ? void 0 : e.y) != null ? `${e.y}px` : ""
+      });
+    });
+  });
+}
+function i(l, n, t = {}) {
+  return n ? typeof n == "object" ? [l({ ...n, ...t })] : [l(t)] : [];
+}
+export {
+  O as createFloatingUi,
+  $ as defaults
+};

package/dist/es/utils/font-awesome.js

@@ -0,0 +1,13 @@
+import { updateSettings as s } from "../core/settings.js";
+function o() {
+  s({
+    iconClassClose: "fas fa-xmark",
+    iconClassDragX: "fas fa-solid fa-grip-lines-vertical",
+    // iconClassDragBoth: "fas fa-solid fa-grip", // Not really any good icons for this (no diagonal arrows, etc)
+    iconClassPrevious: "fas fa-solid fa-chevron-left",
+    iconClassNext: "fas fa-solid fa-chevron-right"
+  });
+}
+export {
+  o as configureIcons
+};

package/dist/es/utils/id.js

@@ -0,0 +1,11 @@
+let i = 0;
+function n() {
+  return `ulu-uid-${++i}`;
+}
+function d(u) {
+  u.id || (u.id = n());
+}
+export {
+  d as ensureId,
+  n as newId
+};

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

@@ -1,8 +1,8 @@
-export { FileSave } from "./file-save.js";
-export { configureIcons as fontAwesomeConfigureIcons } from "./font-awesome.js";
-export { set as classLoggerSet, log as classLoggerLog, logWarning as classLoggerLogWarning, logError as classLoggerLogError } from "./class-logger.js";
-export { dataAttributeToDatasetKey, setPositionClasses, resolveClasses } from "./dom.js";
-export { defaults as floatingUiDefaults, createFloatingUi } from "./floating-ui.js";
-export { newId, ensureId } from "./id.js";
-export { pauseVideos as youtubePauseVideos, prepVideos as youtubePrepVideos } from "./pause-youtube-video.js";
+export { FileSave } from './file-save.js';
+export { configureIcons as fontAwesomeConfigureIcons } from './font-awesome.js';
+export { set as classLoggerSet, log as classLoggerLog, logWarning as classLoggerLogWarning, logError as classLoggerLogError } from './class-logger.js';
+export { dataAttributeToDatasetKey, setPositionClasses, resolveClasses } from './dom.js';
+export { defaults as floatingUiDefaults, createFloatingUi } from './floating-ui.js';
+export { newId, ensureId } from './id.js';
+export { pauseVideos as youtubePauseVideos, prepVideos as youtubePrepVideos } from './pause-youtube-video.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/es/utils/pause-youtube-video.js

@@ -0,0 +1,27 @@
+const c = [
+  ".youtube-embedded-video",
+  'iframe[title*="YouTube video player"]',
+  'iframe[src*="youtube.com/embed"]'
+];
+function n(e = document) {
+  s(e).forEach((o) => {
+    try {
+      o.contentWindow.postMessage('{"event":"command","func":"stopVideo","args":""}', "*");
+    } catch (t) {
+      console.error(t);
+    }
+  });
+}
+function i(e = document) {
+  s(e).forEach((o) => {
+    const { src: t } = o;
+    t && (o.src = t.split("?")[0] + "?rel=0&enablejsapi=1");
+  });
+}
+function s(e) {
+  return e.querySelectorAll(c.join(", "));
+}
+export {
+  n as pauseVideos,
+  i as prepVideos
+};