@api-client/ui 0.2.10 → 0.2.12

package/src/md/ripple/internals/ripple.ts

@@ -7,10 +7,10 @@
 import { html, LitElement, PropertyValues, TemplateResult } from 'lit'
 import { property, query, state } from 'lit/decorators.js'
 import { ClassInfo, classMap } from 'lit/directives/class-map.js'
-import { createAnimationSignal, Easing } from '../../motion/animation.js'
+import { Easing } from '../../motion/animation.js'
 
 const PRESS_GROW_MS = 450
-const MINIMUM_PRESS_MS = 225
+const MINIMUM_PRESS_MS = 80
 const INITIAL_ORIGIN_SCALE = 0.2
 const PADDING = 10
 const SOFT_EDGE_MINIMUM_SIZE = 75
@@ -52,7 +52,9 @@ export default class UiRipple extends LitElement {
 
   protected initialSize = 0
 
-  protected pressAnimationSignal = createAnimationSignal()
+  private rippleStartEvent?: Event | null
+
+  // protected pressAnimationSignal = createAnimationSignal()
 
   protected growAnimation: Animation | null = null
 
@@ -147,13 +149,14 @@ export default class UiRipple extends LitElement {
     if (!mdRoot) {
       return
     }
-
+    this.pressed = true
+    this.growAnimation?.cancel()
     this.determineRippleSize()
     const { startPoint, endPoint } = this.getTranslationCoordinates(positionEvent)
     const translateStart = `${startPoint.x}px, ${startPoint.y}px`
     const translateEnd = `${endPoint.x}px, ${endPoint.y}px`
 
-    const signal = this.pressAnimationSignal.start()
+    // const signal = this.pressAnimationSignal.start()
 
     const growAnimation = mdRoot.animate(
       {
@@ -171,19 +174,48 @@ export default class UiRipple extends LitElement {
       }
     )
 
-    growAnimation.addEventListener('finish', () => {
-      this.pressAnimationSignal.finish()
-      this.growAnimation = null
-    })
+    // growAnimation.addEventListener('finish', () => {
+    //   this.pressAnimationSignal.finish()
+    //   this.growAnimation = null
+    // })
 
-    signal.addEventListener('abort', () => {
-      growAnimation.cancel()
-      this.growAnimation = null
-    })
+    // signal.addEventListener('abort', () => {
+    //   growAnimation.cancel()
+    //   this.growAnimation = null
+    // })
 
     this.growAnimation = growAnimation
   }
 
+  private async endPressAnimation() {
+    this.rippleStartEvent = undefined
+    // this.state = State.INACTIVE
+    const animation = this.growAnimation
+    let pressAnimationPlayState = Infinity
+    if (typeof animation?.currentTime === 'number') {
+      pressAnimationPlayState = animation.currentTime
+    } else if (animation?.currentTime) {
+      pressAnimationPlayState = animation.currentTime.to('ms').value
+    }
+
+    if (pressAnimationPlayState >= MINIMUM_PRESS_MS) {
+      this.pressed = false
+      return
+    }
+
+    await new Promise((resolve) => {
+      setTimeout(resolve, MINIMUM_PRESS_MS - pressAnimationPlayState)
+    })
+
+    if (this.growAnimation !== animation) {
+      // A new press animation was started. The old animation was canceled and
+      // should not finish the pressed state.
+      return
+    }
+
+    this.pressed = false
+  }
+
   beginHover(hoverEvent?: Event): void {
     if ((hoverEvent as PointerEvent)?.pointerType !== 'touch') {
       this.hovered = true
@@ -204,6 +236,7 @@ export default class UiRipple extends LitElement {
 
   beginPress(positionEvent?: Event | null): void {
     this.pressed = true
+    this.rippleStartEvent = positionEvent
     if (this.delayedEndPressHandle !== null) {
       clearTimeout(this.delayedEndPressHandle)
       this.delayedEndPressHandle = null
@@ -221,5 +254,6 @@ export default class UiRipple extends LitElement {
         this.delayedEndPressHandle = null
       }, MINIMUM_PRESS_MS - pressAnimationPlayState) as unknown as number
     }
+    this.endPressAnimation()
   }
 }

package/src/md/segmented-button/internals/SegmentedButton.ts

@@ -42,7 +42,6 @@ export default class SegmentedButton extends UiElement {
 
   constructor() {
     super()
-    this.addEventListener('pointerenter', this.handlePointerEnter.bind(this))
     this.actionController.cancelKeyboardEvents = true
     this.addEventListener('keydown', this.handleKeyDown.bind(this))
     this.addEventListener('keyup', this.handleKeyUp.bind(this))
@@ -50,6 +49,7 @@ export default class SegmentedButton extends UiElement {
     this.addEventListener('pointerdown', this.handlePointerDown.bind(this))
     this.addEventListener('pointerup', this.handlePointerUp.bind(this))
     this.addEventListener('pointercancel', this.handlePointerCancel.bind(this))
+    this.addEventListener('pointerenter', this.handlePointerEnter.bind(this))
     this.addEventListener('pointerleave', this.handlePointerLeave.bind(this))
     this.addEventListener('contextmenu', this.handleContextMenu.bind(this))
   }
@@ -78,7 +78,7 @@ export default class SegmentedButton extends UiElement {
     }
   }
 
-  protected handlePointerEnter(e: PointerEvent): void {
+  override handlePointerEnter(e: PointerEvent): void {
     this.ripple.beginHover(e)
   }
 

package/test/ui/button/UiIconButton.test.ts

@@ -1,6 +1,6 @@
 import { assert, fixture, html, nextFrame, oneEvent } from '@open-wc/testing'
 import sinon from 'sinon'
-import UiIconButton, { IconButtonType } from '../../../src/md/icon-button/internals/IconButton.js'
+import UiIconButton from '../../../src/md/icon-button/internals/IconButton.js'
 import { UiMock } from '../../helpers/UiMock.js'
 import { IconType } from '../../../src/md/icons/Icons.js'
 
@@ -37,13 +37,6 @@ describe('md', () => {
       )
     }
 
-    describe('defaults', () => {
-      it('sets the default type', async () => {
-        const button = await basicFixture('add')
-        assert.equal(button.type, IconButtonType.standard)
-      })
-    })
-
     describe('toggle button', () => {
       it('sets button active when pressing the button with space', async () => {
         const button = await toggleFixture('add')

package/build/src/lib/UserCache.d.ts

@@ -1,13 +0,0 @@
-import type { IUser } from '@api-client/core/models/store/User.js';
-/**
- * A class that caches user info in memory so the application reduces the number
- * of requests to the backend requesting a user info.
- */
-declare class UserCache {
-    protected cached: Map<string, IUser | undefined>;
-    getUser(organizationId: string, key: string): Promise<IUser | undefined>;
-    protected requestUser(organizationId: string, key: string): Promise<IUser | undefined>;
-}
-declare const instance: UserCache;
-export default instance;
-//# sourceMappingURL=UserCache.d.ts.map

package/build/src/lib/UserCache.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"UserCache.d.ts","sourceRoot":"","sources":["../../../src/lib/UserCache.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,uCAAuC,CAAA;AAGlE;;;GAGG;AACH,cAAM,SAAS;IACb,SAAS,CAAC,MAAM,iCAAuC;IAEjD,OAAO,CAAC,cAAc,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC,KAAK,GAAG,SAAS,CAAC;cAU9D,WAAW,CAAC,cAAc,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC,KAAK,GAAG,SAAS,CAAC;CAS7F;AAED,QAAA,MAAM,QAAQ,WAAkB,CAAA;AAChC,eAAe,QAAQ,CAAA"}

package/build/src/lib/UserCache.js

@@ -1,30 +0,0 @@
-import { Events } from '../events/Events.js';
-/**
- * A class that caches user info in memory so the application reduces the number
- * of requests to the backend requesting a user info.
- */
-class UserCache {
-    cached = new Map();
-    async getUser(organizationId, key) {
-        const existing = this.cached.get(key);
-        if (existing) {
-            return existing;
-        }
-        const read = await this.requestUser(organizationId, key);
-        this.cached.set(key, read);
-        return read;
-    }
-    async requestUser(organizationId, key) {
-        try {
-            const result = await Events.Store.User.read(organizationId, key);
-            return result;
-        }
-        catch {
-            // ....
-        }
-        return undefined;
-    }
-}
-const instance = new UserCache();
-export default instance;
-//# sourceMappingURL=UserCache.js.map

package/build/src/lib/UserCache.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"UserCache.js","sourceRoot":"","sources":["../../../src/lib/UserCache.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAA;AAE5C;;;GAGG;AACH,MAAM,SAAS;IACH,MAAM,GAAG,IAAI,GAAG,EAA6B,CAAA;IAEvD,KAAK,CAAC,OAAO,CAAC,cAAsB,EAAE,GAAW;QAC/C,MAAM,QAAQ,GAAG,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;QACrC,IAAI,QAAQ,EAAE,CAAC;YACb,OAAO,QAAQ,CAAA;QACjB,CAAC;QACD,MAAM,IAAI,GAAG,MAAM,IAAI,CAAC,WAAW,CAAC,cAAc,EAAE,GAAG,CAAC,CAAA;QACxD,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,CAAA;QAC1B,OAAO,IAAI,CAAA;IACb,CAAC;IAES,KAAK,CAAC,WAAW,CAAC,cAAsB,EAAE,GAAW;QAC7D,IAAI,CAAC;YACH,MAAM,MAAM,GAAG,MAAM,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE,GAAG,CAAC,CAAA;YAChE,OAAO,MAAM,CAAA;QACf,CAAC;QAAC,MAAM,CAAC;YACP,OAAO;QACT,CAAC;QACD,OAAO,SAAS,CAAA;IAClB,CAAC;CACF;AAED,MAAM,QAAQ,GAAG,IAAI,SAAS,EAAE,CAAA;AAChC,eAAe,QAAQ,CAAA","sourcesContent":["import type { IUser } from '@api-client/core/models/store/User.js'\nimport { Events } from '../events/Events.js'\n\n/**\n * A class that caches user info in memory so the application reduces the number\n * of requests to the backend requesting a user info.\n */\nclass UserCache {\n  protected cached = new Map<string, IUser | undefined>()\n\n  async getUser(organizationId: string, key: string): Promise<IUser | undefined> {\n    const existing = this.cached.get(key)\n    if (existing) {\n      return existing\n    }\n    const read = await this.requestUser(organizationId, key)\n    this.cached.set(key, read)\n    return read\n  }\n\n  protected async requestUser(organizationId: string, key: string): Promise<IUser | undefined> {\n    try {\n      const result = await Events.Store.User.read(organizationId, key)\n      return result\n    } catch {\n      // ....\n    }\n    return undefined\n  }\n}\n\nconst instance = new UserCache()\nexport default instance\n"]}

package/build/src/md/icon-button/internals/IconButton.styles.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"IconButton.styles.d.ts","sourceRoot":"","sources":["../../../../../src/md/icon-button/internals/IconButton.styles.ts"],"names":[],"mappings":";AAEA,wBAmmBC"}