@alegendstale/holly-components 2.0.3 → 2.0.5

package/dist/components/bottom-sheet/bottom-sheet.js

@@ -1,322 +1,192 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
+import { LitElement as c, html as g } from "lit";
+import { query as p, property as h, customElement as u } from "lit/decorators.js";
+import { EventEmitter as d } from "../../utils/EventEmitter.js";
+import f from "./bottom-sheet.styles.js";
+var m = Object.defineProperty, y = Object.getOwnPropertyDescriptor, r = (t, e, i, n) => {
+  for (var s = n > 1 ? void 0 : n ? y(e, i) : e, a = t.length - 1, l; a >= 0; a--)
+    (l = t[a]) && (s = (n ? l(e, i, s) : l(s)) || s);
+  return n && s && m(e, i, s), s;
 };
-import { LitElement, html } from 'lit';
-import { customElement, property, query } from 'lit/decorators.js';
-import { EventEmitter } from '../../utils/EventEmitter.js';
-import styles from './bottom-sheet.styles.js';
-/**
- * A container component primarily for mobile devices which slides up and down from the bottom of the screen.
- *
- * @cssprop {<length> (dvh)} --height - The height of the sheet.
- */
-let BottomSheet = class BottomSheet extends LitElement {
-    constructor() {
-        super(...arguments);
-        /** Whether the sheet is open or closed. */
-        this.open = false;
-        /** Whether the sheet is nonmodal. */
-        this.nonmodal = false;
-        /** Whether the sheet can be dragged. */
-        this.dragging = false;
-        /** Whether the sheet can be scrolled. */
-        this.scrolling = false;
-        /** An array of percentages that the sheet will stop at or be drawn to after being released. */
-        this.snapPoints = [];
-        /** The default percentage that the sheet will open to. */
-        this.defaultSnap = NaN;
-        /** Public way to subscribe to events. */
-        this.emitter = new EventEmitter();
-        /** @internal */
-        this.startY = 0;
-        /** @internal */
-        this.startHeight = 0;
-        /** @internal */
-        this.previousTouch = null;
-        /** @internal */
-        this.lastScrollTop = 0;
-    }
-    static { this.styles = [styles]; }
-    /**
-     * Sets the height of the sheet.
-     * Infinity can be used to fit content automatically.
-     * @type {number}
-     * @default fit-content
-     */
-    set height(val) {
-        const newHeight = Math.min(Math.max(val, 0), 100);
-        this.emitter.emit('snapped', this.isSnapped(newHeight), this.shadowRoot?.activeElement);
-        // Automatically fit content if height is infinity
-        if (!isFinite(val))
-            this.style.setProperty('--height', `fit-content`);
-        else
-            this.style.setProperty('--height', `${Math.round(newHeight)}dvh`);
-    }
-    get height() {
-        return parseInt(this.style.getPropertyValue('--height'));
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        // Make sure sheet snap doesn't break on index 2.
-        const lengthWhen2 = this.snapPoints.length === 2 ? 0 : 1;
-        this.defaultSnap = this.snapPoints.length > 0 ? isNaN(this.defaultSnap) ? this.snapPoints[Math.round(this.snapPoints.length / 2) - lengthWhen2] : this.defaultSnap : NaN;
-        this.emitter.on('snapped', this.onSnapped.bind(this));
-        requestAnimationFrame(() => {
-            this.showSheet(this.open);
-        });
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this.emitter.clear();
-    }
-    render() {
-        requestAnimationFrame(() => {
-            this.setDialog(this.open);
-        });
-        return html `
-			<dialog
-				@click=${(e) => {
-            // Prevents clicks from reaching elements underneath sheet
-            e.stopPropagation();
-            this.toggleSheet();
-        }}
-			>
-				<button 
-					id="handle"
-					part="__handle"
-					@pointerdown=${this.pointerDown}
-					@pointermove=${this.pointerMove}
-					@pointerup=${this.pointerUp}
-					@click=${(e) => {
-            // Prevents clicks from reaching elements underneath sheet
-            e.stopPropagation();
-        }}
-				>
-					⸻
-				</button>
-				
-				<div
-					id='content'
-					part="__content"
-					tabindex='0'
-					@touchstart=${this.touchDown}
-					@touchend=${this.touchUp}
-					@touchmove=${this.touchMove}
-					@scroll=${this.contentScroll}
-					@touchcancel=${(e) => {
-            console.warn('User Agent touchcancelled the event.', e.target);
-        }}
-					@dragstart=${(e) => {
-            // Prevent slot children from being dragged
-            e.preventDefault();
-        }}
-					@click=${(e) => {
-            // Prevents clicks from reaching elements underneath sheet
-            e.stopPropagation();
-        }}
-				>
-					<slot></slot>
-				</div>
-			</dialog>
+let o = class extends c {
+  constructor() {
+    super(...arguments), this.open = !1, this.nonmodal = !1, this.dragging = !1, this.scrolling = !1, this.snapPoints = [], this.defaultSnap = NaN, this.emitter = new d(), this.startY = 0, this.startHeight = 0, this.previousTouch = null, this.lastScrollTop = 0;
+  }
+  set height(t) {
+    const e = Math.min(Math.max(t, 0), 100);
+    this.emitter.emit("snapped", this.isSnapped(e), this.shadowRoot?.activeElement), isFinite(t) ? this.style.setProperty("--height", `${Math.round(e)}dvh`) : this.style.setProperty("--height", "fit-content");
+  }
+  get height() {
+    return parseInt(this.style.getPropertyValue("--height"));
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    const t = this.snapPoints.length === 2 ? 0 : 1;
+    this.defaultSnap = this.snapPoints.length > 0 ? isNaN(this.defaultSnap) ? this.snapPoints[Math.round(this.snapPoints.length / 2) - t] : this.defaultSnap : NaN, this.emitter.on("snapped", this.onSnapped.bind(this)), requestAnimationFrame(() => {
+      this.showSheet(this.open);
+    });
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.emitter.clear();
+  }
+  render() {
+    return requestAnimationFrame(() => {
+      this.setDialog(this.open);
+    }), g`
+			<dialog
+				@click=${(t) => {
+      t.stopPropagation(), this.toggleSheet();
+    }}
+			>
+				<button 
+					id="handle"
+					part="__handle"
+					@pointerdown=${this.pointerDown}
+					@pointermove=${this.pointerMove}
+					@pointerup=${this.pointerUp}
+					@click=${(t) => {
+      t.stopPropagation();
+    }}
+				>
+					⸻
+				</button>
+				
+				<div
+					id='content'
+					part="__content"
+					tabindex='0'
+					@touchstart=${this.touchDown}
+					@touchend=${this.touchUp}
+					@touchmove=${this.touchMove}
+					@scroll=${this.contentScroll}
+					@touchcancel=${(t) => {
+      console.warn("User Agent touchcancelled the event.", t.target);
+    }}
+					@dragstart=${(t) => {
+      t.preventDefault();
+    }}
+					@click=${(t) => {
+      t.stopPropagation();
+    }}
+				>
+					<slot></slot>
+				</div>
+			</dialog>
 		`;
-    }
-    /**
-     * Find closest point index to target in array
-     */
-    closestSnapPointIndex(snapPoints, target) {
-        return snapPoints.reduce((closestIndex, value, index) => (Math.abs(value - target) < Math.abs(snapPoints[closestIndex] - target) ? index : closestIndex), 0);
-    }
-    /**
-     * Sets sheet height to the closest snap
-     * @param height percentage
-     */
-    setSnap(height) {
-        if (this.snapPoints.length === 0)
-            return;
-        const currentSnap = this.snapPoints[this.closestSnapPointIndex(this.snapPoints, height)];
-        // Hide sheet if current snap is the smallest
-        if (currentSnap === this.snapPoints[0])
-            this.showSheet(false);
-        this.height = currentSnap;
-    }
-    /**
-     * @returns Whether sheet is snapped to a snap point
-     */
-    isSnapped(height) {
-        return this.snapPoints.some((val) => val === Math.round(height));
-    }
-    /**
-     * Sets the display state of the sheet
-     */
-    showSheet(open) {
-        this.open = open;
-        this.height = isNaN(this.defaultSnap) ? Infinity : this.defaultSnap;
-        this.setOverscroll(open);
-        this.setDialog(open);
-    }
-    /**
-     * Toggles the display state of the sheet
-     */
-    toggleSheet() {
-        this.showSheet(!this.open);
-    }
-    /**
-     * Remove overscroll to prevent mobile browsers from refreshing during drag
-     */
-    setOverscroll(open) {
-        const htmlEl = document.querySelector('html');
-        const bodyEl = document.querySelector('body');
-        const behavior = open ? 'none' : 'unset';
-        htmlEl && htmlEl.style.setProperty('overscroll-behavior-block', behavior);
-        bodyEl && bodyEl.style.setProperty('overscroll-behavior-block', behavior);
-    }
-    setDialog(open) {
-        if (open && !this.dialog.open) {
-            if (this.nonmodal)
-                this.dialog.show();
-            else
-                this.dialog.showModal();
-        }
-        else if (open && this.dialog.open) {
-            // If a modal dialog is open, close and open a nonmodal dialog
-            if (this.nonmodal && this.modalDialog) {
-                this.dialog.close();
-                this.dialog.show();
-            }
-            // If a nonmodal dialog is open, close and open a modal dialog
-            else if (!this.nonmodal && this.nonModalDialog) {
-                this.dialog.close();
-                this.dialog.showModal();
-            }
-        }
-        else {
-            this.dialog.close();
-        }
-    }
-    touchDown(e) {
-        if (!(e.target instanceof HTMLElement))
-            return;
-        this.startY = e.touches[0].pageY;
-        this.startHeight = this.height;
-    }
-    touchMove(e) {
-        // Ensure target has pointer capture
-        if (!(e.target instanceof HTMLElement))
-            return;
-        const touch = e.touches[0];
-        let movementY = NaN;
-        if (this.previousTouch) {
-            movementY = touch.pageY - this.previousTouch.pageY;
-        }
-        this.previousTouch = touch;
-        let deltaY = this.startY - e.touches[0].pageY;
-        const newHeight = this.startHeight + (deltaY / window.innerHeight) * 100;
-        // Allow user to drag
-        if (!this.scrolling && this.dragging) {
-            this.height = newHeight;
-        }
-        // Allow user to scroll
-        else if (this.scrolling && this.dragging || this.scrolling && !this.dragging) {
-            e.target.focus({ preventScroll: true });
-        }
-        /**
-         * Allow user to scroll OR drag
-         * Determined by first direction of movement
-         */
-        else if (!this.scrolling && !this.dragging) {
-            // Scroll Down
-            if (movementY >= 0) {
-                // Ensure the height of the container never goes above the middle snap point when scrolling down
-                this.height = Math.min(newHeight, this.defaultSnap || this.snapPoints[this.snapPoints.length - 1]);
-            }
-            // Scroll Up
-            else {
-                // Allow user to scroll
-                e.target.focus({ preventScroll: true });
-            }
-        }
-    }
-    touchUp(e) {
-        if (!(e.target instanceof HTMLElement))
-            return;
-        this.previousTouch = null;
-        this.setSnap(this.height);
-    }
-    pointerDown(e) {
-        if (!(e.target instanceof HTMLElement))
-            return;
-        e.target.setPointerCapture(e.pointerId);
-        this.startY = e.pageY;
-        this.startHeight = this.height;
-    }
-    pointerMove(e) {
-        // Ensure target has pointer capture
-        if (!(e.target instanceof HTMLElement && e.target.hasPointerCapture(e.pointerId)))
-            return;
-        // Ensure only one pointer is being tracked
-        if (!e.isPrimary)
-            return;
-        // Prevents sheet drag from being interrupted
-        e.preventDefault();
-        let deltaY = this.startY - e.pageY;
-        const newHeight = this.startHeight + (deltaY / window.innerHeight) * 100;
-        if (e.target.id === 'handle') {
-            this.height = newHeight;
-        }
-    }
-    pointerUp(e) {
-        if (!(e.target instanceof HTMLElement))
-            return;
-        e.target.releasePointerCapture(e.pointerId);
-        this.setSnap(this.height);
-    }
-    onSnapped(snapped, activeElement) {
-        this.dragging = !snapped;
-    }
-    contentScroll(e) {
-        if (!(e.target instanceof HTMLElement && e.target.id === 'content'))
-            return;
-        const currentScrollTop = e.target.scrollTop;
-        this.scrolling = currentScrollTop !== this.lastScrollTop;
-        this.lastScrollTop = currentScrollTop;
-        if (currentScrollTop === 0)
-            this.scrolling = false;
-    }
+  }
+  /**
+   * Find closest point index to target in array
+   */
+  closestSnapPointIndex(t, e) {
+    return t.reduce((i, n, s) => Math.abs(n - e) < Math.abs(t[i] - e) ? s : i, 0);
+  }
+  /**
+   * Sets sheet height to the closest snap
+   * @param height percentage
+   */
+  setSnap(t) {
+    if (this.snapPoints.length === 0) return;
+    const e = this.snapPoints[this.closestSnapPointIndex(this.snapPoints, t)];
+    e === this.snapPoints[0] && this.showSheet(!1), this.height = e;
+  }
+  /**
+   * @returns Whether sheet is snapped to a snap point
+   */
+  isSnapped(t) {
+    return this.snapPoints.some((e) => e === Math.round(t));
+  }
+  /**
+   * Sets the display state of the sheet
+   */
+  showSheet(t) {
+    this.open = t, this.height = isNaN(this.defaultSnap) ? 1 / 0 : this.defaultSnap, this.setOverscroll(t), this.setDialog(t);
+  }
+  /**
+   * Toggles the display state of the sheet
+   */
+  toggleSheet() {
+    this.showSheet(!this.open);
+  }
+  /**
+   * Remove overscroll to prevent mobile browsers from refreshing during drag
+   */
+  setOverscroll(t) {
+    const e = document.querySelector("html"), i = document.querySelector("body"), n = t ? "none" : "unset";
+    e && e.style.setProperty("overscroll-behavior-block", n), i && i.style.setProperty("overscroll-behavior-block", n);
+  }
+  setDialog(t) {
+    t && !this.dialog.open ? this.nonmodal ? this.dialog.show() : this.dialog.showModal() : t && this.dialog.open ? this.nonmodal && this.modalDialog ? (this.dialog.close(), this.dialog.show()) : !this.nonmodal && this.nonModalDialog && (this.dialog.close(), this.dialog.showModal()) : this.dialog.close();
+  }
+  touchDown(t) {
+    t.target instanceof HTMLElement && (this.startY = t.touches[0].pageY, this.startHeight = this.height);
+  }
+  touchMove(t) {
+    if (!(t.target instanceof HTMLElement)) return;
+    const e = t.touches[0];
+    let i = NaN;
+    this.previousTouch && (i = e.pageY - this.previousTouch.pageY), this.previousTouch = e;
+    let n = this.startY - t.touches[0].pageY;
+    const s = this.startHeight + n / window.innerHeight * 100;
+    !this.scrolling && this.dragging ? this.height = s : this.scrolling && this.dragging || this.scrolling && !this.dragging ? t.target.focus({ preventScroll: !0 }) : !this.scrolling && !this.dragging && (i >= 0 ? this.height = Math.min(s, this.defaultSnap || this.snapPoints[this.snapPoints.length - 1]) : t.target.focus({ preventScroll: !0 }));
+  }
+  touchUp(t) {
+    t.target instanceof HTMLElement && (this.previousTouch = null, this.setSnap(this.height));
+  }
+  pointerDown(t) {
+    t.target instanceof HTMLElement && (t.target.setPointerCapture(t.pointerId), this.startY = t.pageY, this.startHeight = this.height);
+  }
+  pointerMove(t) {
+    if (!(t.target instanceof HTMLElement && t.target.hasPointerCapture(t.pointerId)) || !t.isPrimary) return;
+    t.preventDefault();
+    let e = this.startY - t.pageY;
+    const i = this.startHeight + e / window.innerHeight * 100;
+    t.target.id === "handle" && (this.height = i);
+  }
+  pointerUp(t) {
+    t.target instanceof HTMLElement && (t.target.releasePointerCapture(t.pointerId), this.setSnap(this.height));
+  }
+  onSnapped(t, e) {
+    this.dragging = !t;
+  }
+  contentScroll(t) {
+    if (!(t.target instanceof HTMLElement && t.target.id === "content")) return;
+    const e = t.target.scrollTop;
+    this.scrolling = e !== this.lastScrollTop, this.lastScrollTop = e, e === 0 && (this.scrolling = !1);
+  }
+};
+o.styles = [f];
+r([
+  p("dialog")
+], o.prototype, "dialog", 2);
+r([
+  p("dialog:not(:modal)")
+], o.prototype, "nonModalDialog", 2);
+r([
+  p("dialog:modal")
+], o.prototype, "modalDialog", 2);
+r([
+  h({ type: Boolean, reflect: !0 })
+], o.prototype, "open", 2);
+r([
+  h({ type: Boolean, reflect: !0 })
+], o.prototype, "nonmodal", 2);
+r([
+  h({ type: Boolean, reflect: !0 })
+], o.prototype, "dragging", 2);
+r([
+  h({ type: Boolean, reflect: !0 })
+], o.prototype, "scrolling", 2);
+r([
+  h({ type: Array })
+], o.prototype, "snapPoints", 2);
+r([
+  h({ type: Number })
+], o.prototype, "defaultSnap", 2);
+r([
+  h({ type: Number, reflect: !0 })
+], o.prototype, "height", 1);
+o = r([
+  u("bottom-sheet")
+], o);
+export {
+  o as BottomSheet
 };
-__decorate([
-    query('dialog')
-], BottomSheet.prototype, "dialog", void 0);
-__decorate([
-    query('dialog:not(:modal)')
-], BottomSheet.prototype, "nonModalDialog", void 0);
-__decorate([
-    query('dialog:modal')
-], BottomSheet.prototype, "modalDialog", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], BottomSheet.prototype, "open", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], BottomSheet.prototype, "nonmodal", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], BottomSheet.prototype, "dragging", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], BottomSheet.prototype, "scrolling", void 0);
-__decorate([
-    property({ type: Array })
-], BottomSheet.prototype, "snapPoints", void 0);
-__decorate([
-    property({ type: Number })
-], BottomSheet.prototype, "defaultSnap", void 0);
-__decorate([
-    property({ type: Number, reflect: true })
-], BottomSheet.prototype, "height", null);
-BottomSheet = __decorate([
-    customElement('bottom-sheet')
-], BottomSheet);
-export { BottomSheet };