@operato/input 8.0.0-alpha.33 → 8.0.0-alpha.34

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.33",
+  "version": "8.0.0-alpha.34",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "license": "MIT",
@@ -262,5 +262,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "f5fb8cd2bf7aed9781b75e9fa2e3cf53181641c9"
+  "gitHead": "66c3958a36981146574502db824281fec708c6a8"
 }

package/src/ox-select-floor.ts

@@ -24,7 +24,6 @@ export class OxSelectFloor extends OxFormField {
 
       .carousel-container {
         position: relative;
-        height: 100%;
         width: 100%;
         overflow: hidden;
         user-select: none;
@@ -81,6 +80,7 @@ export class OxSelectFloor extends OxFormField {
   @property({ type: Array }) cards: Card[] = []
   @property({ type: String }) value?: string
   @property({ type: Number }) bottomLimit = 70
+  @property({ type: Number }) interval = 0
 
   @state() private selectedIndex = -1
   @state() private activeIndex: number | null = null
@@ -92,21 +92,23 @@ export class OxSelectFloor extends OxFormField {
   render() {
     const length = this.cards.length
     const cards = this.cards
+    const interval = this.interval
 
     return html`
       <div
         class="carousel-container"
-        @wheel=${this.handleWheel}
+        @wheel=${interval ? () => {} : this.handleWheel}
         @pointerdown=${this.handlePointerDown}
         @pointermove=${this.handlePointerMove}
         @pointerup=${this.handlePointerUp}
         @pointerleave=${this.handlePointerLeave}
+        style=${interval ? `height: ${interval * length + 200}px;` : 'height: 100%;'}
       >
         ${cards.map(({ image, name }, index) => {
           return html`
             <div
               class="card ${this.getClassForCard(index)} ${this.isActive(index) ? 'active' : ''}"
-              style="bottom: ${(this.bottomLimit * index) / length}%;"
+              style=${`bottom: ${interval ? interval * index + 'px' : (this.bottomLimit * index) / length + '%'};`}
               @click=${() => {
                 this.selectCard(index)
                 this.toggleActiveCard(index)
@@ -119,7 +121,7 @@ export class OxSelectFloor extends OxFormField {
         ${cards.map(({ image, name }, index) => {
           return html`
             <div
-              style="bottom: ${(this.bottomLimit * index) / length}%;"
+              style=${`bottom: ${interval ? interval * index + 'px' : (this.bottomLimit * index) / length + '%'};`}
               @click=${() => this.selectCard(index)}
               template-container
             >

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

@@ -13,7 +13,8 @@ export default {
     bottomLimit: { control: 'number' },
     perspective: { control: 'number' },
     rotateX: { control: 'number' },
-    rotateXForActive: { control: 'number' }
+    rotateXForActive: { control: 'number' },
+    interval: { control: 'number' }
   }
 }
 
@@ -30,6 +31,7 @@ interface ArgTypes {
   rotateX?: number
   rotateXForActive?: number
   disabled?: boolean
+  interval?: number
 }
 
 const cards = new Array(10).fill({}).map((_, index) => {
@@ -45,7 +47,8 @@ const Template: Story<ArgTypes> = ({
   bottomLimit = 70,
   perspective = 1200,
   rotateX = 60,
-  rotateXForActive = 40
+  rotateXForActive = 40,
+  interval = 0
 }: ArgTypes) => html`
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
 
@@ -166,6 +169,7 @@ const Template: Story<ArgTypes> = ({
       .cards=${cards}
       .bottomLimit=${bottomLimit}
       ?disabled=${disabled}
+      .interval=${interval}
       @change=${(e: Event) => console.log(((e as CustomEvent).target as any)!.value)}
     >
       ${cards.map(
@@ -188,5 +192,6 @@ Regular.args = {
   bottomLimit: 70,
   perspective: 1200,
   rotateX: 60,
-  rotateXForActive: 40
+  rotateXForActive: 40,
+  interval: 0
 }