@operato/input 8.0.0-alpha.20 → 8.0.0-alpha.21

package/package.json

@@ -2,7 +2,7 @@
   "name": "@operato/input",
   "description": "Webcomponents for input following open-wc recommendations",
   "author": "heartyoh@hatiolab.com",
-  "version": "8.0.0-alpha.20",
+  "version": "8.0.0-alpha.21",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "license": "MIT",
@@ -262,5 +262,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "c8a1305148d5f9190d79f7107001455e46906b8e"
+  "gitHead": "2a7eabbdab4073648f5d8bd49c02f2e62b7d3a8a"
 }

package/src/ox-select-floor.ts

@@ -57,14 +57,15 @@ export class OxSelectFloor extends OxFormField {
       }
 
       .selected {
-        z-index: 10;
         opacity: 0.8;
+        z-index: 1;
         border: 4px solid #3b82f6;
         box-shadow: 0 8px 16px rgba(59, 130, 246, 0.4);
       }
 
       .selected.active {
         opacity: 1;
+        z-index: 2;
         transform: perspective(var(--ox-select-floor-perspective)) rotateX(var(--ox-select-floor-rotate-x-active));
         box-shadow: 0 12px 24px rgba(59, 130, 246, 0.4);
       }
@@ -72,7 +73,7 @@ export class OxSelectFloor extends OxFormField {
       [template-container] {
         position: absolute;
         right: 10px;
-        z-index: 20;
+        z-index: 1;
       }
     `
   ]
@@ -88,6 +89,7 @@ export class OxSelectFloor extends OxFormField {
   private isDragging = false
   private lastTouchY = 0
   private lastMouseY = 0
+  private startY = 0
 
   render() {
     const length = this.cards.length
@@ -162,15 +164,20 @@ export class OxSelectFloor extends OxFormField {
 
   handleTouchStart(event: TouchEvent) {
     this.lastTouchY = event.touches[0].clientY
+    this.startY = this.lastTouchY
   }
 
   handleTouchMove(event: TouchEvent) {
     const touch = event.touches[0]
-    const deltaY = touch.clientY - this.lastTouchY
-    this.lastTouchY = touch.clientY
+    const deltaY = touch.clientY - this.lastMouseY
+
+    if (!this.lastMouseY) {
+      this.lastMouseY = touch.clientY
+    }
 
     if (Math.abs(deltaY) > 30) {
-      const direction = deltaY < 0 ? -1 : 1
+      this.lastMouseY = touch.clientY
+      const direction = deltaY > 0 ? -1 : 1
       this.updateSelectedIndex(this.selectedIndex + direction)
     }
   }
@@ -234,11 +241,11 @@ export class OxSelectFloor extends OxFormField {
 
   private selectCard(index: number) {
     this.selectedIndex = index
-    this._notifySelection()
+    this.notifySelection()
     this.scrollToSelectedCard()
   }
 
-  private _notifySelection() {
+  private notifySelection() {
     this.value = this.selectedIndex !== -1 ? this.cards[this.selectedIndex]?.name : undefined
 
     this.dispatchEvent(

package/stories/ox-select-floor.stories.ts

@@ -71,6 +71,23 @@ const Template: Story<ArgTypes> = ({
   </style>
 
   <style>
+    html,
+    body {
+      margin: 0;
+      padding: 0;
+      overflow: hidden;
+
+      overscroll-behavior-y: none;
+
+      /* This is a font-stack that tries to use the system-default sans-serifs first */
+      font-family: Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+      line-height: 1.5;
+      -webkit-font-smoothing: antialiased;
+
+      accent-color: var(--md-sys-color-primary);
+      background-color: var(--md-sys-color-background);
+    }
+
     .container {
       height: 1000px;
       text-align: center;
@@ -86,48 +103,55 @@ const Template: Story<ArgTypes> = ({
       right: 0px;
       bottom: 0px;
       align-items: center;
-      z-index: 2;
       right: 3%;
+    }
+
+    div[status] > div[content] {
+      display: flex;
+      background-color: #4e5055;
+      color: #fff;
+      padding: 5px 7px;
+      border-radius: 7px;
+      gap: 10px;
+      font-size: 14px;
+    }
+
+    div[status] span {
+      display: flex;
+      align-items: center;
+      width: 48px;
+    }
+
+    div[status] md-icon {
+      width: 20px;
+      height: 20px;
+      margin-right: 4px;
+      border-radius: 5px;
+      font-size: 21px;
+      font-weight: 700;
+    }
+    div[status] md-icon[request] {
+      background-color: #f7f7f7;
+      color: #4e5055;
+    }
+    div[status] md-icon[pass] {
+      background-color: #4bbb4a;
+    }
+    div[status] md-icon[fail] {
+      background-color: #ff4444;
+    }
+
+    span[name] {
+      width: 40px;
+      color: #4e5055;
+      margin-left: 6px;
+      text-align: center;
+    }
 
-      div[content] {
-        display: flex;
-        background-color: #4e5055;
-        color: #fff;
-        padding: 5px 7px;
-        border-radius: 7px;
-        gap: 10px;
-        font-size: 14px;
-
-        span {
-          display: flex;
-          align-items: center;
-          width: 48px;
-
-          md-icon {
-            width: 20px;
-            height: 20px;
-            margin-right: 4px;
-            border-radius: 5px;
-            font-size: 21px;
-            font-weight: 700;
-          }
-          md-icon[request] {
-            background-color: #f7f7f7;
-            color: #4e5055;
-          }
-          md-icon[pass] {
-            background-color: #4bbb4a;
-          }
-          md-icon[fail] {
-            background-color: #ff4444;
-          }
-        }
-      }
-      span[name] {
-        color: #4e5055;
-        margin-left: 6px;
-        width: 40px;
-      }
+    span[name][active] {
+      color: var(--md-sys-color-on-error);
+      background-color: var(--md-sys-color-error);
+      border-radius: 999px;
     }
 
     ox-select-floor {