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

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

@@ -1,3 +1,4 @@
+import { ComponentInitializer } from '../core/component.js';
 /**
  * Initialize everything in document
  * - This will only initialize elements once, it is safe to call on page changes
@@ -20,11 +21,11 @@ export class Scrollpoint {
         /**
          * Default observer root element
          */
-        root: any;
+        root: null;
         /**
          * Use a selector to select the observer root element
          */
-        rootSelector: any;
+        rootSelector: null;
         /**
          * Log debug info to console
          */
@@ -79,7 +80,7 @@ export class Scrollpoint {
         /**
          * Elements that should also get active state info (classes or attributes)
          */
-        syncElements: any[];
+        syncElements: never[];
         /**
          * Callback called when state changes
          */
@@ -90,13 +91,81 @@ export class Scrollpoint {
      * @param {Node} element The element to create the scrollpoint for
      * @param {Object} config Options to configure the scrollpoint see Scrollpoint.defaults for more information on settings
      */
-    constructor(element: Node, config: any);
-    options: any;
-    observer: IntersectionObserver;
+    constructor(element: Node, config: Object);
+    options: ({
+        /**
+         * Default observer root element
+         */
+        root: null;
+        /**
+         * Use a selector to select the observer root element
+         */
+        rootSelector: null;
+        /**
+         * Log debug info to console
+         */
+        debug: boolean;
+        /**
+         * Change scroll orientation to horizontal
+         */
+        horizontal: boolean;
+        /**
+         * Margin for observer top or left (depending on orientation)
+         */
+        marginStart: string;
+        /**
+         * Margin for observer bottom or right (depending on orientation)
+         */
+        marginEnd: string;
+        /**
+         * Threshold for observer
+         */
+        threshold: number[];
+        /**
+         * The point can exited (else persists)
+         */
+        exit: boolean;
+        /**
+         * The point can exit from the end
+         */
+        exitForward: boolean;
+        /**
+         * The point can exit from the start
+         */
+        exitReverse: boolean;
+        /**
+         * Set state classes
+         */
+        setClasses: boolean;
+        /**
+         * Prefix for classes
+         */
+        classPrefix: string;
+        /**
+         * Set attribute for state (less verbose same info as classes)
+         */
+        setAttribute: boolean;
+        /**
+         * Attribute name to set state info in
+         */
+        attributeName: string;
+        /**
+         * Group multiple points, one active at a time (scroll menus)
+         */
+        /**
+         * Elements that should also get active state info (classes or attributes)
+         */
+        syncElements: never[];
+        /**
+         * Callback called when state changes
+         */
+        onChange(_ctx: any): void;
+    } & Object) | undefined;
+    observer: IntersectionObserver | null;
     lastPosition: any;
-    isActive: boolean;
-    element: Node;
-    syncedElements: any[];
+    isActive: boolean | undefined;
+    element: Node | undefined;
+    syncedElements: any[] | undefined;
     classes: {
         enter: string;
         enterForward: string;
@@ -104,7 +173,7 @@ export class Scrollpoint {
         exit: string;
         exitForward: string;
         exitReverse: string;
-    };
+    } | undefined;
     getClassname(suffix: any): string;
     getObserverOptions(): {
         root: any;
@@ -119,10 +188,9 @@ export class Scrollpoint {
     setupObserver(): void;
     getScrollY(): any;
     setState(isActive: any, isForward: any): void;
-    getAllClasses(): any;
+    getAllClasses(): string[];
     updateClasses(isActive: any, isForward: any): void;
     updateStateAttribute(isActive: any, isForward: any): void;
     destroy(): void;
 }
-import { ComponentInitializer } from "../utils/system.js";
 //# sourceMappingURL=scrollpoint.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"scrollpoint.d.ts","sourceRoot":"","sources":["../../../lib/js/ui/scrollpoint.js"],"names":[],"mappings":"AA2BA;;;GAGG;AACH,6BAUC;AAtBD;;GAEG;AACH,+CAGG;AAkBH;;;;;;;GAOG;AACH;IACE;QACE;;WAEG;;QAEH;;WAEG;;QAEH;;WAEG;;QAEH;;WAEG;;QAEH;;WAEG;;QAEH;;WAEG;;QAEH;;WAEG;;QAEH;;WAEG;;QAEH;;WAEG;;QAEH;;WAEG;;QAEH;;WAEG;;QAEH;;WAEG;;QAEH;;WAEG;;QAEH;;WAEG;;QAEH;;WAEG;QAEH;;WAEG;;QAEH;;WAEG;;MAIH;IACF;;;;OAIG;IACH,qBAHW,IAAI,UACJ,MAAM,EAiChB;IArBC;QAtFA;;WAEG;;QAEH;;WAEG;;QAEH;;WAEG;;QAEH;;WAEG;;QAEH;;WAEG;;QAEH;;WAEG;;QAEH;;WAEG;;QAEH;;WAEG;;QAEH;;WAEG;;QAEH;;WAEG;;QAEH;;WAEG;;QAEH;;WAEG;;QAEH;;WAEG;;QAEH;;WAEG;;QAEH;;WAEG;QAEH;;WAEG;;QAEH;;WAEG;;4BAoBmB;IACtB,sCAAoB;IACpB,kBAAwB;IACxB,8BAAqB;IACrB,0BAAsB;IACtB,kCAGC;IACD;;;;;;;kBAOC;IAMH,kCAEC;IACD;;;;MAMC;IACD;;;OAGG;IACH,8BAkBC;IACD,sBAUC;IACD,kBAGC;IACD,8CAcC;IACD,0BAEC;IACD,mDAmBC;IACD,0DAMC;IACD,gBASC;CACF;qCAnQoC,sBAAsB"}

package/dist/es/ui/scrollpoint.js

@@ -0,0 +1,178 @@
+var m = Object.defineProperty;
+var f = (a, t, s) => t in a ? m(a, t, { enumerable: !0, configurable: !0, writable: !0, value: s }) : a[t] = s;
+var d = (a, t, s) => f(a, typeof t != "symbol" ? t + "" : t, s);
+import { ComponentInitializer as p } from "../core/component.js";
+import { logError as g } from "../utils/class-logger.js";
+import { getElement as b } from "@ulu/utils/browser/dom.js";
+const c = new p({
+  type: "scrollpoint",
+  baseAttribute: "data-ulu-scrollpoint"
+});
+function w() {
+  c.init({
+    withData: !0,
+    coreEvents: ["pageModified"],
+    setup({ element: a, data: t, initialize: s }) {
+      const e = Object.assign({}, t);
+      new h(a, e), s();
+    }
+  });
+}
+const l = class l {
+  /**
+   * Setup a new scrollpoint
+   * @param {Node} element The element to create the scrollpoint for
+   * @param {Object} config Options to configure the scrollpoint see Scrollpoint.defaults for more information on settings
+   */
+  constructor(t, s) {
+    const e = Object.assign({}, l.defaults, s);
+    if (!t) {
+      g(this, "Missing required element");
+      return;
+    }
+    e.rootSelector && (e.root = document.querySelector(e.rootSelector), delete e.rootSelector), this.options = e, this.observer = null, this.lastPosition = null, this.isActive = !1, this.element = t, this.syncedElements = [
+      t,
+      ...e.syncElements.map((i) => b(i))
+    ], this.classes = {
+      enter: this.getClassname("enter"),
+      enterForward: this.getClassname("enter--from-forward"),
+      enterReverse: this.getClassname("enter--from-reverse"),
+      exit: this.getClassname("exit"),
+      exitForward: this.getClassname("exit--from-forward"),
+      exitReverse: this.getClassname("exit--from-reverse")
+    }, this.setupObserver(), e.debug && c.log(this);
+  }
+  getClassname(t) {
+    return this.options.classPrefix + "-" + t;
+  }
+  getObserverOptions() {
+    const { root: t, marginStart: s, marginEnd: e, threshold: i, horizontal: r } = this.options, o = r ? `0px ${s} 0px ${e}` : `${s} 0px ${e} 0px`;
+    return { root: t, rootMargin: o, threshold: i };
+  }
+  /**
+   * IntersectionObserver Callback
+   * - Should set the state
+   */
+  onObserve(t) {
+    const s = this.getScrollY(), { lastPosition: e, isActive: i, options: r } = this, o = e === null ? null : e < s;
+    t.forEach((n) => {
+      const { isIntersecting: u } = n;
+      u && !i ? this.setState(!0, o) : !u && i && r.exit && (o && r.exitForward || !o && r.exitReverse) && this.setState(!1, o);
+    }), this.lastPosition = s;
+  }
+  setupObserver() {
+    const t = (e) => {
+      this.onObserve(e);
+    }, s = this.getObserverOptions();
+    this.options.debug && c.log("IntersectionObserver (options)", s), this.observer = new IntersectionObserver(t, s), this.observer.observe(this.element);
+  }
+  getScrollY() {
+    const { root: t } = this.options;
+    return t === null || t === document ? window.scrollY : t.scrollTop;
+  }
+  setState(t, s) {
+    const { element: e } = this, i = { isActive: t, isForward: s, element: e, instance: this }, { setClasses: r, setAttribute: o, onChange: n } = this.options;
+    r && this.updateClasses(t, s), o && this.updateStateAttribute(t, s), n && n(i), this.isActive = t;
+  }
+  getAllClasses() {
+    return Object.values(this.classes);
+  }
+  updateClasses(t, s) {
+    const { classes: e } = this, i = this.getAllClasses(), r = [
+      e.enter,
+      s ? e.enterForward : e.enterReverse
+    ], o = [
+      e.exit,
+      s ? e.exitForward : e.exitReverse
+    ];
+    this.syncedElements.forEach((n) => {
+      n.classList.remove(...i), t ? n.classList.add(...r) : n.classList.add(...o);
+    });
+  }
+  updateStateAttribute(t, s) {
+    const e = t ? "enter" : "exit", i = s ? "forward" : "reverse";
+    this.syncedElements.forEach((r) => {
+      r.setAttribute(this.options.attributeName, `${e}-${i}`);
+    });
+  }
+  destroy() {
+    this.observer.disconnect(), this.observer = null, this.options.setClasses && this.element.classList.remove(...this.getAllClasses()), this.options.setAttribute && this.element.removeAttribute(this.options.attributeName);
+  }
+};
+d(l, "defaults", {
+  /**
+   * Default observer root element
+   */
+  root: null,
+  /**
+   * Use a selector to select the observer root element
+   */
+  rootSelector: null,
+  /**
+   * Log debug info to console
+   */
+  debug: !1,
+  /**
+   * Change scroll orientation to horizontal
+   */
+  horizontal: !1,
+  /**
+   * Margin for observer top or left (depending on orientation)
+   */
+  marginStart: "-25%",
+  /**
+   * Margin for observer bottom or right (depending on orientation)
+   */
+  marginEnd: "-55%",
+  /**
+   * Threshold for observer
+   */
+  threshold: [0, 1],
+  /**
+   * The point can exited (else persists)
+   */
+  exit: !0,
+  /**
+   * The point can exit from the end
+   */
+  exitForward: !0,
+  /**
+   * The point can exit from the start
+   */
+  exitReverse: !0,
+  /**
+   * Set state classes
+   */
+  setClasses: !1,
+  /**
+   * Prefix for classes
+   */
+  classPrefix: "scrollpoint",
+  /**
+   * Set attribute for state (less verbose same info as classes)
+   */
+  setAttribute: !0,
+  /**
+   * Attribute name to set state info in
+   */
+  attributeName: "data-ulu-scrollpoint-state",
+  /**
+   * Group multiple points, one active at a time (scroll menus)
+   */
+  // groupName: null,
+  /**
+   * Elements that should also get active state info (classes or attributes)
+   */
+  syncElements: [],
+  /**
+   * Callback called when state changes
+   */
+  onChange(t) {
+  }
+});
+let h = l;
+export {
+  h as Scrollpoint,
+  w as init,
+  c as initializer
+};

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

@@ -1,3 +1,4 @@
+import { ComponentInitializer } from '../core/component.js';
 /**
  * Initialize all sliders based on data attribute selectors
  */
@@ -7,7 +8,7 @@ export function init(): void;
  * @param {Node} container The slide container to query children from
  * @param {Object} options Options for slider class
  */
-export function setupSlider(container: Node, options: any): void;
+export function setupSlider(container: Node, options: Object): void;
 /**
  * Slider Component Initializer
  */
@@ -17,6 +18,9 @@ export const initializer: ComponentInitializer;
  */
 export class Slider {
     static instances: any[];
+    static globalsInitialized: boolean;
+    static reduceMotion: boolean;
+    static _initializeGlobals(): void;
     /**
      * Default options for slider
      */
@@ -30,8 +34,8 @@ export class Slider {
         transitionDurationExit: number;
         transitionTimingFunction: string;
         buttonClasses: string[];
-        iconClassPrevious: any;
-        iconClassNext: any;
+        iconClassPrevious: Object;
+        iconClassNext: Object;
         swipeEnabled: boolean;
         swipeOptions: {
             preventScroll: boolean;
@@ -43,11 +47,11 @@ export class Slider {
         element: any;
         index: number;
         number: number;
-    };
+    } | null;
     index: any;
     swipeInstance: any;
-    swipeListener: (event: any) => void;
-    swipeImageListener: (event: any) => void;
+    swipeListener: ((event: any) => void) | null;
+    swipeImageListener: ((event: any) => void) | null;
     transitioning: boolean;
     slides: {
         element: any;
@@ -58,7 +62,7 @@ export class Slider {
     transition: ({ slide, old }: {
         slide: any;
         old: any;
-    }) => any;
+    }) => Promise<void>;
     /**
      * Sliding mechanism needs translate updated on resize
      */
@@ -78,11 +82,11 @@ export class Slider {
      * @param {number} duration Duration to wait for complete
      * @param {Function} beginTransition Css changes to begin/start transtion
      */
-    ensureTransitionEnds(element: number, duration: number, beginTransition: Function): any;
+    ensureTransitionEnds(element: number, duration: number, beginTransition: Function): Promise<any>;
     /**
      * Translate the track to X
      */
-    translateTo(x: any, duration: any): any;
+    translateTo(x: any, duration: any): Promise<void>;
     /**
      * Show's a specifc slide and hides others, except when passing true to show all
      * then all slides will visible
@@ -91,7 +95,7 @@ export class Slider {
     /**
      * Perform a fade on a single slide
      */
-    fadeSlide(slide: any, visible: any): any;
+    fadeSlide(slide: any, visible: any): Promise<any>;
     /**
      * Handler for the entire slide transtion
      */
@@ -115,7 +119,7 @@ export class Slider {
     noTransition({ slide, old }: {
         slide: any;
         old: any;
-    }): any;
+    }): Promise<void>;
     goto(index: any, event: any, triggerType: any): void;
     setup(): void;
     setupSwipe(): void;
@@ -135,7 +139,7 @@ export class Slider {
     };
     createNav(container: any): {
         nav: HTMLUListElement;
-        navButtons: any[];
+        navButtons: HTMLButtonElement[];
         navItems: HTMLLIElement[];
     };
     createNavButton(slide: any, index: any): HTMLButtonElement;
@@ -143,5 +147,4 @@ export class Slider {
     getNavContent(slide: any): string;
     emit(name: any, args: any): void;
 }
-import { ComponentInitializer } from "../utils/system.js";
 //# sourceMappingURL=slider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../../../lib/js/ui/slider.js"],"names":[],"mappings":"AAgEA;;GAEG;AACH,6BASC;AAED;;;;GAIG;AACH,uCAHW,IAAI,WACJ,MAAM,QAiBhB;AA1DD;;GAEG;AACH,+CAGG;AAsDH;;GAEG;AACH;IACE,wBAAsB;IACtB,mCAAkC;IAClC,6BAA4B;IAE5B,kCAYC;IACD;;OAEG;IACH;;;;;;;;;;;;;;;;MAgBC;IACD,wCAoCC;IAjCC,aAAsB;IACtB;;;;aAAiB;IACjB,WAAiB;IACjB,mBAAyB;IACzB,6CAAyB;IACzB,kDAA8B;IAC9B,uBAA0B;IAQ1B;;;;QAME;IACF,cAIC;IAED;;;wBACgF;IAMlF;;OAEG;IACH,qBAKC;IACD;;OAEG;IACH,2BAOC;IACD;;OAEG;IACH,uBAMC;IACD;;;;;;OAMG;IACH,8BAJW,MAAM,YACN,MAAM,2CAqChB;IACD;;OAEG;IACH,kDASC;IACD;;;OAGG;IACH,oDASC;IACD;;OAEG;IACH,kDAOC;IACD;;OAEG;IACH;;;;;;sBAoDC;IACD;;OAEG;IACH;;;sBAUC;IACD;;OAEG;IACH;;;sBAOC;IACD,qDA2CC;IACD,cAmBC;IACD,mBAsBC;IACD,0BAMC;IACD,+BAKC;IACD,qCAOC;IACD,mBAQC;IACD,mBASC;IACD,yCASC;IACD,oDAUC;IACD;;;;;;MAwBC;IACD;;;;MAmBC;IACD,2DAQC;IACD,uCAMC;IACD,kCAEC;IACD,iCAIC;CACF;qCA1iBoC,sBAAsB"}