@cal.macconnachie/web-components 2.6.0 → 2.6.1

package/dist/index.d.ts

@@ -296,7 +296,6 @@ export declare class BaseList extends BaseElement {
     private pullDistance;
     private startY;
     private pullThreshold;
-    private listElement?;
     static styles: CSSResult;
     connectedCallback(): void;
     disconnectedCallback(): void;

package/dist/index.js

@@ -5736,16 +5736,20 @@ const Pi = () => R({
 class ue extends M {
   constructor() {
     super(...arguments), this.size = "md", this.variant = "default", this.interactive = !1, this.role = "list", this.isPulling = !1, this.pullDistance = 0, this.startY = 0, this.pullThreshold = 80, this.handleTouchStart = (e) => {
-      this.listElement && this.listElement.scrollTop === 0 && (this.startY = e.touches[0].clientY);
+      this.scrollTop === 0 && (this.startY = e.touches[0].clientY);
     }, this.handleTouchMove = (e) => {
-      if (!this.listElement || this.startY === 0) return;
+      if (this.startY === 0) return;
       const i = e.touches[0].clientY - this.startY;
-      i > 0 && this.listElement.scrollTop === 0 && (e.preventDefault(), this.isPulling = !0, this.pullDistance = Math.min(i * 0.5, this.pullThreshold * 1.5));
+      i > 5 && this.scrollTop === 0 ? (e.preventDefault(), this.isPulling = !0, this.pullDistance = Math.min(i * 0.5, this.pullThreshold * 1.5)) : i <= 0 && (this.startY = 0, this.isPulling = !1, this.pullDistance = 0);
     }, this.handleTouchEnd = () => {
-      this.isPulling && (this.pullDistance >= this.pullThreshold && this.dispatchEvent(new CustomEvent("list-pulled", {
+      if (!this.isPulling) {
+        this.startY = 0;
+        return;
+      }
+      this.pullDistance >= this.pullThreshold && this.dispatchEvent(new CustomEvent("list-pulled", {
         bubbles: !0,
         composed: !0
-      })), this.isPulling = !1, this.pullDistance = 0, this.startY = 0);
+      })), this.isPulling = !1, this.pullDistance = 0, this.startY = 0;
     };
   }
   static {
@@ -5754,6 +5758,7 @@ class ue extends M {
       display: block;
       width: 100%;
       position: relative;
+      overflow-y: auto;
       -ms-overflow-style: none;
       scrollbar-width: none;
     }
@@ -5764,13 +5769,7 @@ class ue extends M {
 
     .base-list-wrapper {
       position: relative;
-      overflow: hidden;
-      -ms-overflow-style: none;
-      scrollbar-width: none;
-    }
-
-    .base-list-wrapper::-webkit-scrollbar {
-      display: none;
+      width: 100%;
     }
 
     .pull-indicator {
@@ -5795,11 +5794,6 @@ class ue extends M {
     .pull-indicator__icon {
       font-size: 24px;
       color: var(--color-text-muted);
-      transition: transform var(--transition-normal);
-    }
-
-    .pull-indicator--threshold .pull-indicator__icon {
-      transform: rotate(180deg);
     }
 
     .base-list {
@@ -5808,12 +5802,6 @@ class ue extends M {
       width: 100%;
       background-color: inherit;
       transition: transform var(--transition-normal);
-      -ms-overflow-style: none;
-      scrollbar-width: none;
-    }
-
-    .base-list::-webkit-scrollbar {
-      display: none;
     }
 
     .base-list--pulling {
@@ -5870,18 +5858,16 @@ class ue extends M {
   `;
   }
   connectedCallback() {
-    super.connectedCallback(), this.pullActionIcon && this.updateComplete.then(() => {
-      this.listElement = this.shadowRoot?.querySelector(".base-list"), this.setupPullListeners();
-    });
+    super.connectedCallback(), this.pullActionIcon && this.setupPullListeners();
   }
   disconnectedCallback() {
     super.disconnectedCallback(), this.removePullListeners();
   }
   setupPullListeners() {
-    this.listElement && (this.listElement.addEventListener("touchstart", this.handleTouchStart, { passive: !1 }), this.listElement.addEventListener("touchmove", this.handleTouchMove, { passive: !1 }), this.listElement.addEventListener("touchend", this.handleTouchEnd));
+    this.addEventListener("touchstart", this.handleTouchStart, { passive: !0 }), this.addEventListener("touchmove", this.handleTouchMove, { passive: !1 }), this.addEventListener("touchend", this.handleTouchEnd, { passive: !0 });
   }
   removePullListeners() {
-    this.listElement && (this.listElement.removeEventListener("touchstart", this.handleTouchStart), this.listElement.removeEventListener("touchmove", this.handleTouchMove), this.listElement.removeEventListener("touchend", this.handleTouchEnd));
+    this.removeEventListener("touchstart", this.handleTouchStart), this.removeEventListener("touchmove", this.handleTouchMove), this.removeEventListener("touchend", this.handleTouchEnd);
   }
   render() {
     const e = {
@@ -5892,14 +5878,13 @@ class ue extends M {
       "base-list--pulling": this.isPulling
     }, t = {
       "pull-indicator": !0,
-      "pull-indicator--active": this.isPulling,
-      "pull-indicator--threshold": this.pullDistance >= this.pullThreshold
-    }, i = this.isPulling ? `transform: translateY(${this.pullDistance}px)` : "", s = this.isPulling ? `transform: translateY(${Math.max(-100 + this.pullDistance / this.pullThreshold * 100, -100)}%)` : "";
+      "pull-indicator--active": this.isPulling
+    }, i = this.isPulling ? `transform: translateY(${this.pullDistance}px)` : "", s = Math.min(this.pullDistance / this.pullThreshold * 180, 180), o = this.isPulling ? `transform: translateY(${Math.max(-100 + this.pullDistance / this.pullThreshold * 100, -100)}%)` : "", a = `transform: rotate(${s}deg)`;
     return f`
       <div class="base-list-wrapper">
         ${this.pullActionIcon ? f`
-          <div class=${S(t)} style=${s}>
-            <span class="pull-indicator__icon">${this.pullActionIcon}</span>
+          <div class=${S(t)} style=${o}>
+            <span class="pull-indicator__icon" style=${a}>${this.pullActionIcon}</span>
           </div>
         ` : ""}
         <div class=${S(e)} role=${this.role} style=${i}>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cal.macconnachie/web-components",
-  "version": "2.6.0",
+  "version": "2.6.1",
   "description": "Web components hosted on a CDN",
   "keywords": [
     "web-components",