@ng-native/components 0.17.0 → 0.18.0

package/dist/touchable-opacity.js.map

@@ -1 +1 @@
-{"version":3,"file":"touchable-opacity.js","sourceRoot":"","sources":["../src/touchable-opacity.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAChG,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;;AAE3C;;;;;;;;;;;;GAYG;AA0BH,MAAM,OAAO,gBAAiB,SAAQ,WAAW;IAC/C,gGAAgG;IAC7E,mBAAmB;QACpC,OAAO,IAAI,CAAC;IACd,CAAC;IAEkB,kBAAkB;QACnC,OAAO,IAAI,CAAC;IACd,CAAC;IAEkB,wBAAwB;QACzC,OAAO,IAAI,CAAC,QAAQ,EAAE,CAAC;IACzB,CAAC;IAEkB,aAAa;QAC9B,OAAO,IAAI,CAAC,kBAAkB,EAAE,CAAC;IACnC,CAAC;IAED,iCAAiC;IACxB,aAAa,GAAG,KAAK,CAAC,GAAG,qFAAI,SAAS,EAAE,QAAQ,CAAC,GAAG,CAAC,GAAG,CAAC;IAElE,8EAA8E;IAC3D,OAAO,GAAG,MAAM,CAAqB,SAAS;gFAAC,CAAC;IAEnE,sEAAsE;IAC9D,OAAO,GAAG,CAAC,CAAC;IAEpB;QACE,KAAK,EAAE,CAAC;QACR,4FAA4F;QAC5F,kFAAkF;QAClF,MAAM,CAAC,GAAG,EAAE;YACV,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC;YAC/B,SAAS,CAAC,GAAG,EAAE;gBACb,IAAI,OAAO,EAAE,CAAC;oBACZ,4EAA4E;oBAC5E,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAqC,CAAC;oBAC3E,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,EAAE,IAAI,KAAK,EAAE,OAAO,IAAI,CAAC,CAAC;oBACrD,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC;gBACzC,CAAC;qBAAM,IAAI,IAAI,CAAC,OAAO,EAAE,KAAK,SAAS,EAAE,CAAC;oBACxC,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;gBACjC,CAAC;YACH,CAAC,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;QACH,uFAAuF;QACvF,MAAM,CAAC,UAAU,CAAC,CAAC,SAAS,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC;IAClE,CAAC;IAED;;;;OAIG;IACO,MAAM;QACd,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;YAAE,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;IACnD,CAAC;uGAvDU,gBAAgB;2FAAhB,gBAAgB,kaAvBjB,gBAAgB;;2FAuBf,gBAAgB;kBAzB5B,SAAS;+BACE,mBAAmB,YACnB,gBAAgB,YAChB,kBAAkB,QAgBtB;wBACJ,iBAAiB,EAAE,WAAW;wBAC9B,iBAAiB,EAAE,WAAW;wBAC9B,iBAAiB,EAAE,UAAU;qBAC9B","sourcesContent":["import { Component, DestroyRef, effect, inject, input, signal, untracked } from '@angular/core';\nimport { ControlBase } from './pressable.ts';\nimport { numberOr } from './transforms.ts';\n\n/**\n * A pressable that dims while pressed, as RN's `TouchableOpacity` does.\n *\n * The fade is a CSS transition rather than a JavaScript tween: the component sets the target\n * opacity and the engine eases to it. React Native's own timings are asymmetric - 150ms in,\n * 250ms out - which is a thing CSS expresses exactly, because the duration in force is the one on\n * the state being entered. That is what the two rules below are.\n *\n * The opacity is a binding rather than a rule because `activeOpacity` is an input, and it returns\n * to `undefined` when the fade finishes so a caller's own `[style]` opacity is in charge again at\n * rest. `transitionend` is the engine's own event, the same one Angular's `animate.leave` waits\n * for.\n */\n@Component({\n  selector: 'touchable-opacity',\n  template: `<ng-content />`,\n  exportAs: 'touchableOpacity',\n  styles: `\n    /*\n     * The resting opacity is stated rather than left out, because a transition needs a value to\n     * ease *from*: a property appearing for the first time is recorded and left alone, which is\n     * CSS's own rule and would make every fade in a snap. Inline style still wins over this, so a\n     * caller's own opacity is untouched.\n     */\n    :host {\n      opacity: 1;\n      transition: opacity 250ms ease-in-out;\n    }\n    :host(.pressed) {\n      transition: opacity 150ms ease-in-out;\n    }\n  `,\n  host: {\n    '[style.opacity]': 'opacity()',\n    '[class.pressed]': 'pressed()',\n    '(transitionend)': 'settle()',\n  },\n})\nexport class TouchableOpacity extends ControlBase {\n  /** `TouchableOpacity.js`: `accessible={this.props.accessible !== false}`, and focusable too. */\n  protected override accessibleByDefault(): boolean {\n    return true;\n  }\n\n  protected override focusableByDefault(): boolean {\n    return true;\n  }\n\n  protected override disabledForAccessibility(): boolean | undefined {\n    return this.disabled();\n  }\n\n  protected override pressDisabled(): boolean {\n    return this.disabledByAnyState();\n  }\n\n  /** The opacity while pressed. */\n  readonly activeOpacity = input(0.2, { transform: numberOr(0.2) });\n\n  /** Undefined at rest, so the caller's own `[style]` opacity shows through. */\n  protected readonly opacity = signal<number | undefined>(undefined);\n\n  /** What to ease back to: whatever the caller had before the press. */\n  private resting = 1;\n\n  constructor() {\n    super();\n    // Reacts to `pressed` alone. Reading `opacity` here would re-run the effect on the value it\n    // just wrote, and a press that arrives mid-fade would restart from the wrong end.\n    effect(() => {\n      const pressed = this.pressed();\n      untracked(() => {\n        if (pressed) {\n          // Remembered on the way in, so the fade out returns to it rather than to 1.\n          const style = this.node.props['style'] as { opacity?: number } | undefined;\n          this.resting = this.opacity() ?? style?.opacity ?? 1;\n          this.opacity.set(this.activeOpacity());\n        } else if (this.opacity() !== undefined) {\n          this.opacity.set(this.resting);\n        }\n      });\n    });\n    // A component destroyed mid-fade leaves a transition the engine would go on advancing.\n    inject(DestroyRef).onDestroy(() => this.opacity.set(undefined));\n  }\n\n  /**\n   * The fade is over. Letting go of the value hands the opacity back to whatever the caller's own\n   * style says, which is the same number we just eased to - so nothing moves, and a caller who\n   * changes it later is not fighting a binding of ours.\n   */\n  protected settle(): void {\n    if (!this.pressed()) this.opacity.set(undefined);\n  }\n}\n"]}
+{"version":3,"file":"touchable-opacity.js","sourceRoot":"","sources":["../src/touchable-opacity.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;;AAE3C;;;;;;;;;;;;;;;GAeG;AAmBH,MAAM,OAAO,gBAAiB,SAAQ,WAAW;IAC/C,gGAAgG;IAC7E,mBAAmB;QACpC,OAAO,IAAI,CAAC;IACd,CAAC;IAEkB,kBAAkB;QACnC,OAAO,IAAI,CAAC;IACd,CAAC;IAEkB,wBAAwB;QACzC,OAAO,IAAI,CAAC,QAAQ,EAAE,CAAC;IACzB,CAAC;IAEkB,aAAa;QAC9B,OAAO,IAAI,CAAC,kBAAkB,EAAE,CAAC;IACnC,CAAC;IAED,iCAAiC;IACxB,aAAa,GAAG,KAAK,CAAC,GAAG,qFAAI,SAAS,EAAE,QAAQ,CAAC,GAAG,CAAC,GAAG,CAAC;uGAnBvD,gBAAgB;2FAAhB,gBAAgB,+YAhBjB,gBAAgB;;2FAgBf,gBAAgB;kBAlB5B,SAAS;+BACE,mBAAmB,YACnB,gBAAgB,YAChB,kBAAkB,QAUtB;wBACJ,oCAAoC,EAAE,iBAAiB;wBACvD,iBAAiB,EAAE,WAAW;qBAC/B","sourcesContent":["import { Component, input } from '@angular/core';\nimport { ControlBase } from './pressable.ts';\nimport { numberOr } from './transforms.ts';\n\n/**\n * A pressable that dims while pressed, as RN's `TouchableOpacity` does.\n *\n * The fade is a CSS transition rather than a JavaScript tween: a rule sets the pressed opacity and\n * the engine eases to it. React Native's own timings are asymmetric - 150ms in, 250ms out - which\n * is a thing CSS expresses exactly, because the duration in force is the one on the state being\n * entered. That is what the two rules below are.\n *\n * Nothing here states the resting opacity, so whatever the cascade gives the host is what a press\n * eases back to: a class, Tailwind's, an inline `[style]` or a bound `[style.opacity]`, read when\n * the press ends as `TouchableOpacity.js` reads its style, and followed as it changes. An opacity\n * nothing sets is still 1 to ease from and to. The pressed rule is `!important` because a\n * caller's inline opacity outranks this component's host bindings and plain rules alike, and\n * would otherwise keep it from dimming at all; `activeOpacity` reaches it as a custom property,\n * which no caller's style sets.\n */\n@Component({\n  selector: 'touchable-opacity',\n  template: `<ng-content />`,\n  exportAs: 'touchableOpacity',\n  styles: `\n    :host {\n      transition: opacity 250ms ease-in-out;\n    }\n    :host(.pressed) {\n      opacity: var(--touchable-active-opacity, 0.2) !important;\n      transition: opacity 150ms ease-in-out;\n    }\n  `,\n  host: {\n    '[style.--touchable-active-opacity]': 'activeOpacity()',\n    '[class.pressed]': 'pressed()',\n  },\n})\nexport class TouchableOpacity extends ControlBase {\n  /** `TouchableOpacity.js`: `accessible={this.props.accessible !== false}`, and focusable too. */\n  protected override accessibleByDefault(): boolean {\n    return true;\n  }\n\n  protected override focusableByDefault(): boolean {\n    return true;\n  }\n\n  protected override disabledForAccessibility(): boolean | undefined {\n    return this.disabled();\n  }\n\n  protected override pressDisabled(): boolean {\n    return this.disabledByAnyState();\n  }\n\n  /** The opacity while pressed. */\n  readonly activeOpacity = input(0.2, { transform: numberOr(0.2) });\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ng-native/components",
-  "version": "0.17.0",
+  "version": "0.18.0",
   "description": "Angular Native's core components: view, text, image, pressable, scroll-view, virtual-list, text-input and the rest of React Native's set.",
   "keywords": [
     "angular",
@@ -39,6 +39,10 @@
       "browser": "./dist/reanimated-web.js",
       "default": "./dist/reanimated.js"
     },
+    "./stand-ins/animations": {
+      "types": "./dist/stand-ins/animations.d.ts",
+      "default": "./dist/stand-ins/animations.js"
+    },
     "./stand-ins/reanimated": {
       "types": "./dist/stand-ins/reanimated.d.ts",
       "default": "./dist/stand-ins/reanimated.js"
@@ -57,13 +61,13 @@
     "access": "public"
   },
   "dependencies": {
-    "@ng-native/device": "0.17.0",
-    "@ng-native/fabric": "0.17.0"
+    "@ng-native/device": "0.18.0",
+    "@ng-native/fabric": "0.18.0"
   },
   "peerDependencies": {
     "@angular/core": "^22.0.0",
     "react-native": ">=0.86.0",
-    "react-native-gesture-handler": "^2.32.0",
+    "react-native-gesture-handler": "^2.32.0 || ^3.3.0",
     "react-native-reanimated": "^4.5.1",
     "react-native-safe-area-context": "^5.7.0",
     "react-native-keyboard-controller": "^1.21.9",