@ng-native/components 0.0.1 → 0.1.0

package/dist/keyboard-avoiding-view.js

@@ -0,0 +1,172 @@
+import { Component, booleanAttribute, computed, effect, inject, input, numberAttribute, signal, } from '@angular/core';
+import { Keyboard, LayoutAnimation } from '@ng-native/device';
+import { View } from "./view.js";
+import { ViewBase } from "./view-base.js";
+import * as i0 from "@angular/core";
+/**
+ * The names `LayoutEasing` knows. `'keyboard'` is among them: iOS reports its keyboard's own
+ * curve by that name, and RN's KeyboardAvoidingView animates on it.
+ */
+const LAYOUT_EASINGS = new Set([
+    'linear',
+    'easeInEaseOut',
+    'easeIn',
+    'easeOut',
+    'spring',
+    'keyboard',
+]);
+/** A keyboard event's `easing`, narrowed to what `LayoutAnimation` accepts, or left to its default. */
+function layoutEasingOf(easing) {
+    return easing !== undefined && LAYOUT_EASINGS.has(easing) ? easing : undefined;
+}
+/**
+ * Moves its content clear of the keyboard.
+ *
+ * RN's KeyboardAvoidingView is a JS composite: there is no native component, only a view whose
+ * padding, height or position tracks the keyboard. Off a device the `Keyboard` service reports
+ * nothing, so this renders as a plain view and does nothing, which is also the right behaviour on
+ * a platform with no soft keyboard.
+ *
+ * The overlap is the view's own frame against the keyboard's top edge, so a view that does not
+ * reach the bottom of the screen moves only as far as it must. Unlike RN, the frame's top is
+ * measured in the window, which is what the keyboard's `screenY` is in: `(layout)` reports it in
+ * the parent's coordinates, and on a screen under a navigation bar those start a bar's height
+ * down. RN leaves that to `keyboardVerticalOffset`, and a view that was not told came up short by
+ * exactly that much, its bottom edge still behind the keyboard. The overlap never exceeds the
+ * view's own height either: padding a view by more than it has pushes its content out of it.
+ * When the keyboard source reports no `screenY`, the keyboard's height stands in.
+ *
+ * The adjustment itself animates with the keyboard's own motion, the way RN's own
+ * KeyboardAvoidingView does: a keyboard event's `duration` and `easing` configure the next
+ * layout animation before the style change that moves this view, so the two run together rather
+ * than the padding, height or position jumping to its resting place in one step.
+ */
+export class KeyboardAvoidingView extends ViewBase {
+    /**
+     * How to make room: pad the bottom, shrink the height, or shift the content up. RN leaves this
+     * unset and does nothing; `padding` is the default here because that is what a form wants.
+     */
+    behavior = input('padding', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "behavior" }] : /* istanbul ignore next */ []));
+    /** Styles for the inner view that `position` moves. */
+    contentContainerStyle = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "contentContainerStyle" }] : /* istanbul ignore next */ []));
+    /** Set to false to stop avoiding without removing the view. */
+    enabled = input(true, { ...(ngDevMode ? { debugName: "enabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Extra room to leave above the keyboard, in points. RN's name, and in RN the place to put a
+     * header's height; here the view is measured in the window, so a navigation bar needs none.
+     */
+    keyboardVerticalOffset = input(0, { ...(ngDevMode ? { debugName: "keyboardVerticalOffset" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    keyboard = inject(Keyboard).metrics;
+    layoutAnimation = inject(LayoutAnimation);
+    frame = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "frame" }] : /* istanbul ignore next */ []));
+    /** The height before any adjustment, which `height` mode shrinks from. */
+    initialHeight = null;
+    /** How far the keyboard intrudes into this view, in points. */
+    overlap = computed(() => {
+        if (!this.enabled())
+            return 0;
+        const { height, screenY } = this.keyboard();
+        if (height === 0)
+            return 0;
+        const frame = this.frame();
+        const offset = this.keyboardVerticalOffset();
+        if (!frame)
+            return Math.max(0, height - offset);
+        // In `height` mode the frame is the one this view already shrank, so measure the height it
+        // had before, as RN adds its current adjustment back; otherwise the room it made reads as no
+        // overlap and the height springs back under the keyboard.
+        const extent = this.behavior() === 'height' ? (this.initialHeight ?? frame.height) : frame.height;
+        const overlap = screenY === undefined ? height - offset : frame.y + extent - (screenY - offset);
+        return Math.min(extent, Math.max(0, overlap));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "overlap" }] : /* istanbul ignore next */ []));
+    /**
+     * The adjustment, or nothing to adjust. Bound as the engine's style override rather than as
+     * host style, because Angular ranks a host style binding under the template's: a caller's
+     * `[style]="{flex: 1}"` would otherwise keep its flex in height mode and the view would not
+     * shrink at all. RN composes the adjustment after the caller's style, so it wins there too.
+     */
+    avoidance = computed(() => {
+        const overlap = this.overlap();
+        const behavior = this.behavior();
+        if (overlap === 0 || behavior === 'position')
+            return undefined;
+        if (behavior === 'height') {
+            const base = this.initialHeight ?? this.frame()?.height;
+            return base === undefined ? undefined : { height: base - overlap, flex: 0 };
+        }
+        return { paddingBottom: overlap };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "avoidance" }] : /* istanbul ignore next */ []));
+    positioned = computed(() => ({
+        ...this.contentContainerStyle(),
+        bottom: this.overlap(),
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "positioned" }] : /* istanbul ignore next */ []));
+    constructor() {
+        super();
+        // A duration of zero is Android's own keyboard event, which animates itself; there is
+        // nothing to configure alongside it. `appear`/`leave` are turned off because this is an
+        // update to a view already on screen, not one appearing or leaving - RN's own bare
+        // `LayoutAnimation.configureNext({duration, update})` animates nothing else either.
+        effect(() => {
+            const { duration, easing } = this.keyboard();
+            if (!this.enabled() || !duration)
+                return;
+            void this.layoutAnimation.animate(() => { }, {
+                duration,
+                easing: layoutEasingOf(easing),
+                appear: 'none',
+                leave: 'none',
+            });
+        });
+    }
+    onLayout(event) {
+        const layout = event.nativeEvent?.layout;
+        if (!layout)
+            return;
+        this.frame.set({ ...layout, y: this.windowTop(layout.y) });
+        // Only a layout that the keyboard did not cause counts as the natural height.
+        if (this.overlap() === 0)
+            this.initialHeight = layout.height;
+    }
+    /**
+     * Where this view's top edge is in the window, or `fallback` where the platform cannot say.
+     * Synchronous on the new architecture, so it answers for the layout being reported.
+     */
+    windowTop(fallback) {
+        let top = fallback;
+        this.engine.measure(this.node, (frame) => (top = frame.y));
+        return top;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: KeyboardAvoidingView, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.0", type: KeyboardAvoidingView, isStandalone: true, selector: "keyboard-avoiding-view", inputs: { behavior: { classPropertyName: "behavior", publicName: "behavior", isSignal: true, isRequired: false, transformFunction: null }, contentContainerStyle: { classPropertyName: "contentContainerStyle", publicName: "contentContainerStyle", isSignal: true, isRequired: false, transformFunction: null }, enabled: { classPropertyName: "enabled", publicName: "enabled", isSignal: true, isRequired: false, transformFunction: null }, keyboardVerticalOffset: { classPropertyName: "keyboardVerticalOffset", publicName: "keyboardVerticalOffset", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "layout": "onLayout($event)" }, properties: { "styleOverride": "avoidance()" } }, usesInheritance: true, ngImport: i0, template: `
+    @if (behavior() === 'position') {
+      <view [style]="positioned()"><ng-content /></view>
+    } @else {
+      <ng-content />
+    }
+  `, isInline: true, dependencies: [{ kind: "directive", type: View, selector: "view" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: KeyboardAvoidingView, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'keyboard-avoiding-view',
+                    imports: [View],
+                    template: `
+    @if (behavior() === 'position') {
+      <view [style]="positioned()"><ng-content /></view>
+    } @else {
+      <ng-content />
+    }
+  `,
+                    host: {
+                        '[styleOverride]': 'avoidance()',
+                        '(layout)': 'onLayout($event)',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { behavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "behavior", required: false }] }], contentContainerStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentContainerStyle", required: false }] }], enabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "enabled", required: false }] }], keyboardVerticalOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "keyboardVerticalOffset", required: false }] }] } });
+//# sourceMappingURL=keyboard-avoiding-view.js.map

package/dist/keyboard-avoiding-view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"keyboard-avoiding-view.js","sourceRoot":"","sources":["../src/keyboard-avoiding-view.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,gBAAgB,EAChB,QAAQ,EACR,MAAM,EACN,MAAM,EACN,KAAK,EACL,eAAe,EACf,MAAM,GACP,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAqB,MAAM,mBAAmB,CAAC;AAGjF,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AACjC,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;;AAI1C;;;GAGG;AACH,MAAM,cAAc,GAAwB,IAAI,GAAG,CAAC;IAClD,QAAQ;IACR,eAAe;IACf,QAAQ;IACR,SAAS;IACT,QAAQ;IACR,UAAU;CACX,CAAC,CAAC;AAEH,uGAAuG;AACvG,SAAS,cAAc,CAAC,MAA0B;IAChD,OAAO,MAAM,KAAK,SAAS,IAAI,cAAc,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAE,MAAuB,CAAC,CAAC,CAAC,SAAS,CAAC;AACnG,CAAC;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AAgBH,MAAM,OAAO,oBAAqB,SAAQ,QAAQ;IAChD;;;OAGG;IACM,QAAQ,GAAG,KAAK,CAA2B,SAAS;iFAAC,CAAC;IAC/D,uDAAuD;IAC9C,qBAAqB,GAAG,KAAK;yGAA2B,CAAC;IAClE,+DAA+D;IACtD,OAAO,GAAG,KAAK,CAAC,IAAI,+EAAI,SAAS,EAAE,gBAAgB,GAAG,CAAC;IAChE;;;OAGG;IACM,sBAAsB,GAAG,KAAK,CAAC,CAAC,8FAAI,SAAS,EAAE,eAAe,GAAG,CAAC;IAE1D,QAAQ,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC;IACpC,eAAe,GAAG,MAAM,CAAC,eAAe,CAAC,CAAC;IAC1C,KAAK,GAAG,MAAM,CAAc,IAAI;8EAAC,CAAC;IACnD,0EAA0E;IAClE,aAAa,GAAkB,IAAI,CAAC;IAE5C,+DAA+D;IAC5C,OAAO,GAAG,QAAQ,CAAC,GAAG,EAAE;QACzC,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;YAAE,OAAO,CAAC,CAAC;QAC9B,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;QAC5C,IAAI,MAAM,KAAK,CAAC;YAAE,OAAO,CAAC,CAAC;QAC3B,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC;QAC3B,MAAM,MAAM,GAAG,IAAI,CAAC,sBAAsB,EAAE,CAAC;QAC7C,IAAI,CAAC,KAAK;YAAE,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC;QAChD,2FAA2F;QAC3F,6FAA6F;QAC7F,0DAA0D;QAC1D,MAAM,MAAM,GACV,IAAI,CAAC,QAAQ,EAAE,KAAK,QAAQ,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,IAAI,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC;QACrF,MAAM,OAAO,GAAG,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,MAAM,GAAG,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,GAAG,MAAM,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC,CAAC;QAChG,OAAO,IAAI,CAAC,GAAG,CAAC,MAAM,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC;IAChD,CAAC;gFAAC,CAAC;IAEH;;;;;OAKG;IACgB,SAAS,GAAG,QAAQ,CAAC,GAAG,EAAE;QAC3C,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC;QAC/B,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;QACjC,IAAI,OAAO,KAAK,CAAC,IAAI,QAAQ,KAAK,UAAU;YAAE,OAAO,SAAS,CAAC;QAC/D,IAAI,QAAQ,KAAK,QAAQ,EAAE,CAAC;YAC1B,MAAM,IAAI,GAAG,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,KAAK,EAAE,EAAE,MAAM,CAAC;YACxD,OAAO,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,IAAI,GAAG,OAAO,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC;QAC9E,CAAC;QACD,OAAO,EAAE,aAAa,EAAE,OAAO,EAAE,CAAC;IACpC,CAAC;kFAAC,CAAC;IAEgB,UAAU,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,CAAC;QAC9C,GAAG,IAAI,CAAC,qBAAqB,EAAE;QAC/B,MAAM,EAAE,IAAI,CAAC,OAAO,EAAE;KACvB,CAAC;mFAAC,CAAC;IAEJ;QACE,KAAK,EAAE,CAAC;QACR,sFAAsF;QACtF,wFAAwF;QACxF,mFAAmF;QACnF,oFAAoF;QACpF,MAAM,CAAC,GAAG,EAAE;YACV,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;YAC7C,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,QAAQ;gBAAE,OAAO;YACzC,KAAK,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,GAAG,EAAE,GAAE,CAAC,EAAE;gBAC1C,QAAQ;gBACR,MAAM,EAAE,cAAc,CAAC,MAAM,CAAC;gBAC9B,MAAM,EAAE,MAAM;gBACd,KAAK,EAAE,MAAM;aACd,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;IACL,CAAC;IAES,QAAQ,CAAC,KAA8C;QAC/D,MAAM,MAAM,GAAG,KAAK,CAAC,WAAW,EAAE,MAAM,CAAC;QACzC,IAAI,CAAC,MAAM;YAAE,OAAO;QACpB,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,GAAG,MAAM,EAAE,CAAC,EAAE,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;QAC3D,8EAA8E;QAC9E,IAAI,IAAI,CAAC,OAAO,EAAE,KAAK,CAAC;YAAE,IAAI,CAAC,aAAa,GAAG,MAAM,CAAC,MAAM,CAAC;IAC/D,CAAC;IAED;;;OAGG;IACK,SAAS,CAAC,QAAgB;QAChC,IAAI,GAAG,GAAG,QAAQ,CAAC;QACnB,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,GAAG,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;QAC3D,OAAO,GAAG,CAAC;IACb,CAAC;uGA/FU,oBAAoB;2FAApB,oBAAoB,8yBAZrB;;;;;;GAMT,4DAPS,IAAI;;2FAaH,oBAAoB;kBAfhC,SAAS;mBAAC;oBACT,QAAQ,EAAE,wBAAwB;oBAClC,OAAO,EAAE,CAAC,IAAI,CAAC;oBACf,QAAQ,EAAE;;;;;;GAMT;oBACD,IAAI,EAAE;wBACJ,iBAAiB,EAAE,aAAa;wBAChC,UAAU,EAAE,kBAAkB;qBAC/B;iBACF","sourcesContent":["import {\n  Component,\n  booleanAttribute,\n  computed,\n  effect,\n  inject,\n  input,\n  numberAttribute,\n  signal,\n} from '@angular/core';\nimport { Keyboard, LayoutAnimation, type LayoutEasing } from '@ng-native/device';\nimport type { NativeSyntheticEvent } from '@ng-native/fabric';\nimport type { Rect } from './events.ts';\nimport { View } from './view.ts';\nimport { ViewBase } from './view-base.ts';\n\nexport type KeyboardAvoidingBehavior = 'padding' | 'height' | 'position';\n\n/**\n * The names `LayoutEasing` knows. `'keyboard'` is among them: iOS reports its keyboard's own\n * curve by that name, and RN's KeyboardAvoidingView animates on it.\n */\nconst LAYOUT_EASINGS: ReadonlySet<string> = new Set([\n  'linear',\n  'easeInEaseOut',\n  'easeIn',\n  'easeOut',\n  'spring',\n  'keyboard',\n]);\n\n/** A keyboard event's `easing`, narrowed to what `LayoutAnimation` accepts, or left to its default. */\nfunction layoutEasingOf(easing: string | undefined): LayoutEasing | undefined {\n  return easing !== undefined && LAYOUT_EASINGS.has(easing) ? (easing as LayoutEasing) : undefined;\n}\n\n/**\n * Moves its content clear of the keyboard.\n *\n * RN's KeyboardAvoidingView is a JS composite: there is no native component, only a view whose\n * padding, height or position tracks the keyboard. Off a device the `Keyboard` service reports\n * nothing, so this renders as a plain view and does nothing, which is also the right behaviour on\n * a platform with no soft keyboard.\n *\n * The overlap is the view's own frame against the keyboard's top edge, so a view that does not\n * reach the bottom of the screen moves only as far as it must. Unlike RN, the frame's top is\n * measured in the window, which is what the keyboard's `screenY` is in: `(layout)` reports it in\n * the parent's coordinates, and on a screen under a navigation bar those start a bar's height\n * down. RN leaves that to `keyboardVerticalOffset`, and a view that was not told came up short by\n * exactly that much, its bottom edge still behind the keyboard. The overlap never exceeds the\n * view's own height either: padding a view by more than it has pushes its content out of it.\n * When the keyboard source reports no `screenY`, the keyboard's height stands in.\n *\n * The adjustment itself animates with the keyboard's own motion, the way RN's own\n * KeyboardAvoidingView does: a keyboard event's `duration` and `easing` configure the next\n * layout animation before the style change that moves this view, so the two run together rather\n * than the padding, height or position jumping to its resting place in one step.\n */\n@Component({\n  selector: 'keyboard-avoiding-view',\n  imports: [View],\n  template: `\n    @if (behavior() === 'position') {\n      <view [style]=\"positioned()\"><ng-content /></view>\n    } @else {\n      <ng-content />\n    }\n  `,\n  host: {\n    '[styleOverride]': 'avoidance()',\n    '(layout)': 'onLayout($event)',\n  },\n})\nexport class KeyboardAvoidingView extends ViewBase {\n  /**\n   * How to make room: pad the bottom, shrink the height, or shift the content up. RN leaves this\n   * unset and does nothing; `padding` is the default here because that is what a form wants.\n   */\n  readonly behavior = input<KeyboardAvoidingBehavior>('padding');\n  /** Styles for the inner view that `position` moves. */\n  readonly contentContainerStyle = input<Record<string, unknown>>();\n  /** Set to false to stop avoiding without removing the view. */\n  readonly enabled = input(true, { transform: booleanAttribute });\n  /**\n   * Extra room to leave above the keyboard, in points. RN's name, and in RN the place to put a\n   * header's height; here the view is measured in the window, so a navigation bar needs none.\n   */\n  readonly keyboardVerticalOffset = input(0, { transform: numberAttribute });\n\n  private readonly keyboard = inject(Keyboard).metrics;\n  private readonly layoutAnimation = inject(LayoutAnimation);\n  private readonly frame = signal<Rect | null>(null);\n  /** The height before any adjustment, which `height` mode shrinks from. */\n  private initialHeight: number | null = null;\n\n  /** How far the keyboard intrudes into this view, in points. */\n  protected readonly overlap = computed(() => {\n    if (!this.enabled()) return 0;\n    const { height, screenY } = this.keyboard();\n    if (height === 0) return 0;\n    const frame = this.frame();\n    const offset = this.keyboardVerticalOffset();\n    if (!frame) return Math.max(0, height - offset);\n    // In `height` mode the frame is the one this view already shrank, so measure the height it\n    // had before, as RN adds its current adjustment back; otherwise the room it made reads as no\n    // overlap and the height springs back under the keyboard.\n    const extent =\n      this.behavior() === 'height' ? (this.initialHeight ?? frame.height) : frame.height;\n    const overlap = screenY === undefined ? height - offset : frame.y + extent - (screenY - offset);\n    return Math.min(extent, Math.max(0, overlap));\n  });\n\n  /**\n   * The adjustment, or nothing to adjust. Bound as the engine's style override rather than as\n   * host style, because Angular ranks a host style binding under the template's: a caller's\n   * `[style]=\"{flex: 1}\"` would otherwise keep its flex in height mode and the view would not\n   * shrink at all. RN composes the adjustment after the caller's style, so it wins there too.\n   */\n  protected readonly avoidance = computed(() => {\n    const overlap = this.overlap();\n    const behavior = this.behavior();\n    if (overlap === 0 || behavior === 'position') return undefined;\n    if (behavior === 'height') {\n      const base = this.initialHeight ?? this.frame()?.height;\n      return base === undefined ? undefined : { height: base - overlap, flex: 0 };\n    }\n    return { paddingBottom: overlap };\n  });\n\n  protected readonly positioned = computed(() => ({\n    ...this.contentContainerStyle(),\n    bottom: this.overlap(),\n  }));\n\n  constructor() {\n    super();\n    // A duration of zero is Android's own keyboard event, which animates itself; there is\n    // nothing to configure alongside it. `appear`/`leave` are turned off because this is an\n    // update to a view already on screen, not one appearing or leaving - RN's own bare\n    // `LayoutAnimation.configureNext({duration, update})` animates nothing else either.\n    effect(() => {\n      const { duration, easing } = this.keyboard();\n      if (!this.enabled() || !duration) return;\n      void this.layoutAnimation.animate(() => {}, {\n        duration,\n        easing: layoutEasingOf(easing),\n        appear: 'none',\n        leave: 'none',\n      });\n    });\n  }\n\n  protected onLayout(event: NativeSyntheticEvent<{ layout?: Rect }>): void {\n    const layout = event.nativeEvent?.layout;\n    if (!layout) return;\n    this.frame.set({ ...layout, y: this.windowTop(layout.y) });\n    // Only a layout that the keyboard did not cause counts as the natural height.\n    if (this.overlap() === 0) this.initialHeight = layout.height;\n  }\n\n  /**\n   * Where this view's top edge is in the window, or `fallback` where the platform cannot say.\n   * Synchronous on the new architecture, so it answers for the layout being reported.\n   */\n  private windowTop(fallback: number): number {\n    let top = fallback;\n    this.engine.measure(this.node, (frame) => (top = frame.y));\n    return top;\n  }\n}\n"]}

package/dist/keyboard-dock.d.ts

@@ -0,0 +1,126 @@
+import { InjectionToken, type Provider } from '@angular/core';
+import { type HostNode, type ScrollDrive, type ScrollRange } from '@ng-native/fabric';
+import { ViewBase } from './view-base.ts';
+import * as i0 from "@angular/core";
+/**
+ * Whether react-native-keyboard-controller is installed, which is what lets a `<keyboard-dock>`
+ * on iOS follow the keyboard frame by frame. See `provideKeyboardController`.
+ */
+export declare const KEYBOARD_CONTROLLER: InjectionToken<boolean>;
+/**
+ * Say that react-native-keyboard-controller is installed, for `<keyboard-dock>` to use on iOS.
+ * Nothing is imported from it: the dock drives its native views directly.
+ */
+export declare function provideKeyboardController(): Provider;
+/** react-native-keyboard-controller's view that reports the keyboard. See `KeyboardDock`. */
+export declare class KeyboardControllerView {
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<KeyboardControllerView, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KeyboardControllerView, "keyboard-controller-view", never, {}, {}, never, never, true, never>;
+}
+/**
+ * react-native-keyboard-controller's drag area. On iOS it registers `offset` for the field with
+ * `textInputNativeID`, so an interactive dismissal takes the keyboard from that far above it.
+ */
+export declare class KeyboardGestureArea {
+    readonly offset: import("@angular/core").InputSignal<number | undefined>;
+    readonly textInputNativeID: import("@angular/core").InputSignal<string | undefined>;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<KeyboardGestureArea, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KeyboardGestureArea, "keyboard-gesture-area", never, { "offset": { "alias": "offset"; "required": false; "isSignal": true; }; "textInputNativeID": { "alias": "textInputNativeID"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+/**
+ * A bar that sits on the keyboard: a chat's composer, a comment box, a row of formatting keys.
+ * At the bottom of its parent, clear of the home indicator or navigation bar, while the keyboard
+ * is down; on top of it while it is up.
+ *
+ * On iOS with react-native-keyboard-controller (`provideKeyboardController()`), the bar is moved
+ * by the keyboard's height on the native side, frame by frame, the way UIKit carries an input
+ * accessory: as the keyboard rises and falls, and while a finger drags it down through a scroll
+ * view with `keyboardDismissMode="interactive"`, where iOS reports no keyboard frames to
+ * JavaScript at all. The drag takes the keyboard from the top of the bar rather than the top of
+ * the keyboard, as Messages does, and a short one springs it back up. `keyboardLift` moves
+ * content above with it.
+ *
+ * Without it, and on Android, the bar is padded by as much of the keyboard as covers it, which it
+ * learns as the keyboard starts to move; a window the system resized for the keyboard already
+ * puts it clear, and then it is not padded at all.
+ *
+ * `covered()` is how much of the bottom of the screen the keyboard covers beyond the dock's own
+ * place, for content above that keeps clear of it with padding or an inset rather than moving.
+ */
+export declare class KeyboardDock extends ViewBase {
+    /** The bar's background, under the inset it sits above as well as the bar itself. */
+    readonly backgroundColor: import("@angular/core").InputSignal<string | undefined>;
+    private readonly keyboard;
+    private readonly safeArea;
+    protected readonly none: {};
+    protected readonly outOfFlow: {
+        position: string;
+        width: number;
+        height: number;
+    };
+    /** iOS with the controller: native moves the bar. Read once: neither changes under an app. */
+    protected readonly lifts: boolean;
+    private readonly field;
+    private readonly fieldInput;
+    /** Where the dock's bottom edge is in the window, which the keyboard is compared to. */
+    private readonly bottomEdge;
+    /** The bar's own height, measured, which the drag that lowers the keyboard starts above. */
+    protected readonly barHeight: import("@angular/core").WritableSignal<number>;
+    /** The keyboard's height as the controller last reported it, excluding the drag area. */
+    private readonly controlled;
+    /** The inset under the bar while the keyboard is down: the home indicator or navigation bar. */
+    private readonly inset;
+    readonly covered: import("@angular/core").Signal<number>;
+    protected readonly padding: import("@angular/core").Signal<number>;
+    /**
+     * The field the drag area belongs to, by `nativeID`, which the controller finds it by. A field
+     * without one is given one.
+     */
+    protected readonly inputID: import("@angular/core").Signal<string | undefined>;
+    /** The bar, and anything `keyboardLift` moves, rises by the keyboard less the inset under it. */
+    readonly liftRange: import("@angular/core").Signal<ScrollRange>;
+    private source;
+    private readonly inFront;
+    constructor();
+    /**
+     * Move a view with the keyboard on the native side, as the bar is moved: content above the bar
+     * that should rise with it. Null when native does not move the bar. See `keyboardLift`.
+     */
+    lift(view: HostNode, shift?: number | null): ScrollDrive | null;
+    private liftBar;
+    /** The controller's view, the one whose events carry the keyboard. */
+    private controllerView;
+    /** The view holding the content, the last of the dock's own. */
+    private barView;
+    protected onKeyboardMove(event: unknown): void;
+    protected onBarLayout(event: {
+        nativeEvent?: {
+            layout?: {
+                height?: number;
+            };
+        };
+    }): void;
+    protected onLayout(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KeyboardDock, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KeyboardDock, "keyboard-dock", ["keyboardDock"], { "backgroundColor": { "alias": "backgroundColor"; "required": false; "isSignal": true; }; }, {}, ["field", "fieldInput"], ["*"], true, never>;
+}
+/**
+ * Moves its view with a `<keyboard-dock>`'s bar: `<view [keyboardLift]="dock">` around a chat's
+ * transcript keeps the newest message on top of the bar as the keyboard rises, falls and is
+ * dragged. Put it inside a view that clips, so what rises past the top is hidden rather than
+ * drawn over what is above. Does nothing where native does not move the bar.
+ *
+ * Once the keyboard has moved, the view is padded by as much of it as covers the view, and moved
+ * back down by the same amount, which leaves it where it was on screen: since iOS 26 a scroll view
+ * the keyboard overlaps in layout draws a frosted edge effect over the part it thinks is covered,
+ * and a transform does not change what it thinks.
+ */
+export declare class KeyboardLift {
+    readonly dock: import("@angular/core").InputSignal<KeyboardDock>;
+    protected readonly padding: import("@angular/core").Signal<number | undefined>;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<KeyboardLift, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KeyboardLift, "[keyboardLift]", never, { "dock": { "alias": "keyboardLift"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}

package/dist/keyboard-dock.js

@@ -0,0 +1,327 @@
+import { Component, DestroyRef, Directive, ElementRef, EnvironmentInjector, InjectionToken, afterRenderEffect, computed, contentChild, effect, inject, input, signal, untracked, } from '@angular/core';
+import { Keyboard, SCREEN_IN_FRONT, SafeArea } from '@ng-native/device';
+import { claimHost, nativePlatform, registerViewName, } from '@ng-native/fabric';
+import { TemplateSlot } from "./template-slot.js";
+import { TextInput } from "./text-input.js";
+import { View } from "./view.js";
+import { ViewBase } from "./view-base.js";
+import * as i0 from "@angular/core";
+/**
+ * Whether react-native-keyboard-controller is installed, which is what lets a `<keyboard-dock>`
+ * on iOS follow the keyboard frame by frame. See `provideKeyboardController`.
+ */
+export const KEYBOARD_CONTROLLER = new InjectionToken('KEYBOARD_CONTROLLER', {
+    providedIn: 'root',
+    factory: () => false,
+});
+/**
+ * Say that react-native-keyboard-controller is installed, for `<keyboard-dock>` to use on iOS.
+ * Nothing is imported from it: the dock drives its native views directly.
+ */
+export function provideKeyboardController() {
+    return { provide: KEYBOARD_CONTROLLER, useValue: true };
+}
+/** What carries the keyboard's height, frame by frame, in react-native-keyboard-controller. */
+const KEYBOARD_FEED = {
+    events: ['onKeyboardMove', 'onKeyboardMoveInteractive', 'onKeyboardMoveEnd'],
+    path: ['height'],
+};
+/** Far enough that no keyboard is taller; native interpolation takes numbers, not infinity. */
+const FAR = 10_000;
+/** A native view the dock renders for itself, out of the way of the layout. */
+const OUT_OF_FLOW = { position: 'absolute', width: 0, height: 0 };
+/** react-native-keyboard-controller's view that reports the keyboard. See `KeyboardDock`. */
+export class KeyboardControllerView {
+    constructor() {
+        registerViewName('keyboard-controller-view', 'KeyboardControllerView');
+        claimHost(inject(ElementRef).nativeElement);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: KeyboardControllerView, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.0", type: KeyboardControllerView, isStandalone: true, selector: "keyboard-controller-view", host: { properties: { "enabled": "true" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: KeyboardControllerView, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'keyboard-controller-view',
+                    host: { '[enabled]': 'true' },
+                }]
+        }], ctorParameters: () => [] });
+/**
+ * react-native-keyboard-controller's drag area. On iOS it registers `offset` for the field with
+ * `textInputNativeID`, so an interactive dismissal takes the keyboard from that far above it.
+ */
+export class KeyboardGestureArea {
+    offset = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "offset" }] : /* istanbul ignore next */ []));
+    textInputNativeID = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "textInputNativeID" }] : /* istanbul ignore next */ []));
+    constructor() {
+        registerViewName('keyboard-gesture-area', 'KeyboardGestureArea');
+        claimHost(inject(ElementRef).nativeElement);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: KeyboardGestureArea, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.2.0", type: KeyboardGestureArea, isStandalone: true, selector: "keyboard-gesture-area", inputs: { offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null }, textInputNativeID: { classPropertyName: "textInputNativeID", publicName: "textInputNativeID", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "offset": "offset()", "textInputNativeID": "textInputNativeID()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: KeyboardGestureArea, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'keyboard-gesture-area',
+                    host: { '[offset]': 'offset()', '[textInputNativeID]': 'textInputNativeID()' },
+                }]
+        }], ctorParameters: () => [], propDecorators: { offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "offset", required: false }] }], textInputNativeID: [{ type: i0.Input, args: [{ isSignal: true, alias: "textInputNativeID", required: false }] }] } });
+/**
+ * A bar that sits on the keyboard: a chat's composer, a comment box, a row of formatting keys.
+ * At the bottom of its parent, clear of the home indicator or navigation bar, while the keyboard
+ * is down; on top of it while it is up.
+ *
+ * On iOS with react-native-keyboard-controller (`provideKeyboardController()`), the bar is moved
+ * by the keyboard's height on the native side, frame by frame, the way UIKit carries an input
+ * accessory: as the keyboard rises and falls, and while a finger drags it down through a scroll
+ * view with `keyboardDismissMode="interactive"`, where iOS reports no keyboard frames to
+ * JavaScript at all. The drag takes the keyboard from the top of the bar rather than the top of
+ * the keyboard, as Messages does, and a short one springs it back up. `keyboardLift` moves
+ * content above with it.
+ *
+ * Without it, and on Android, the bar is padded by as much of the keyboard as covers it, which it
+ * learns as the keyboard starts to move; a window the system resized for the keyboard already
+ * puts it clear, and then it is not padded at all.
+ *
+ * `covered()` is how much of the bottom of the screen the keyboard covers beyond the dock's own
+ * place, for content above that keeps clear of it with padding or an inset rather than moving.
+ */
+export class KeyboardDock extends ViewBase {
+    /** The bar's background, under the inset it sits above as well as the bar itself. */
+    backgroundColor = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "backgroundColor" }] : /* istanbul ignore next */ []));
+    keyboard = inject(Keyboard);
+    safeArea = inject(SafeArea);
+    none = {};
+    outOfFlow = OUT_OF_FLOW;
+    /** iOS with the controller: native moves the bar. Read once: neither changes under an app. */
+    lifts = nativePlatform() === 'ios' && inject(KEYBOARD_CONTROLLER);
+    field = contentChild(TextInput, { ...(ngDevMode ? { debugName: "field" } : /* istanbul ignore next */ {}), descendants: true, read: ElementRef });
+    fieldInput = contentChild(TextInput, { ...(ngDevMode ? { debugName: "fieldInput" } : /* istanbul ignore next */ {}), descendants: true });
+    /** Where the dock's bottom edge is in the window, which the keyboard is compared to. */
+    bottomEdge = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "bottomEdge" }] : /* istanbul ignore next */ []));
+    /** The bar's own height, measured, which the drag that lowers the keyboard starts above. */
+    barHeight = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "barHeight" }] : /* istanbul ignore next */ []));
+    /** The keyboard's height as the controller last reported it, excluding the drag area. */
+    controlled = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "controlled" }] : /* istanbul ignore next */ []));
+    /** The inset under the bar while the keyboard is down: the home indicator or navigation bar. */
+    inset = computed(() => this.safeArea.insets().bottom, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inset" }] : /* istanbul ignore next */ []));
+    covered = computed(() => this.lifts ? Math.max(0, this.controlled() - this.inset()) : 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "covered" }] : /* istanbul ignore next */ []));
+    padding = computed(() => {
+        if (this.lifts)
+            return this.inset();
+        const { height, screenY } = this.keyboard.metrics();
+        if (height === 0)
+            return this.inset();
+        const edge = this.bottomEdge();
+        if (edge === null || screenY === undefined)
+            return height;
+        return Math.max(0, edge - screenY);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "padding" }] : /* istanbul ignore next */ []));
+    /**
+     * The field the drag area belongs to, by `nativeID`, which the controller finds it by. A field
+     * without one is given one.
+     */
+    inputID = computed(() => {
+        const input = this.fieldInput();
+        const node = this.field()?.nativeElement;
+        if (!input || !node)
+            return undefined;
+        const own = input.nativeID() ?? input.id();
+        if (own)
+            return own;
+        const id = `keyboard-dock-${++docks}`;
+        untracked(() => this.engine.setProp(node, 'nativeID', id));
+        return id;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inputID" }] : /* istanbul ignore next */ []));
+    /** The bar, and anything `keyboardLift` moves, rises by the keyboard less the inset under it. */
+    liftRange = computed(() => {
+        const inset = this.inset();
+        return { input: [inset, inset + FAR], output: [0, -FAR] };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "liftRange" }] : /* istanbul ignore next */ []));
+    source = null;
+    inFront = inject(SCREEN_IN_FRONT);
+    constructor() {
+        super();
+        if (this.lifts)
+            this.liftBar();
+        // A root effect, because a covered screen's views are detached from change detection, and a
+        // view's own effects wait for it.
+        const front = effect(() => {
+            const inFront = this.inFront();
+            untracked(() => {
+                if (!inFront && this.keyboard.height() > 0)
+                    this.keyboard.dismiss();
+            });
+        }, { ...(ngDevMode ? { debugName: "front" } : /* istanbul ignore next */ {}), injector: inject(EnvironmentInjector), manualCleanup: true });
+        inject(DestroyRef).onDestroy(() => front.destroy());
+    }
+    /**
+     * Move a view with the keyboard on the native side, as the bar is moved: content above the bar
+     * that should rise with it. Null when native does not move the bar. See `keyboardLift`.
+     */
+    lift(view, shift = null) {
+        if (!this.lifts)
+            return null;
+        const source = this.controllerView();
+        const range = this.liftRange();
+        return this.engine.driveByEvent(view, source, KEYBOARD_FEED, 'translateY', range, [], shift);
+    }
+    liftBar() {
+        let drive = null;
+        afterRenderEffect(() => {
+            const range = this.liftRange();
+            untracked(() => {
+                if (drive)
+                    return drive.update(range);
+                const bar = this.barView();
+                if (bar)
+                    drive = this.lift(bar);
+            });
+        });
+        inject(DestroyRef).onDestroy(() => drive?.stop());
+    }
+    /** The controller's view, the one whose events carry the keyboard. */
+    controllerView() {
+        this.source ??= this.node.children.find((child) => child.kind === 'element') ?? this.node;
+        return this.source;
+    }
+    /** The view holding the content, the last of the dock's own. */
+    barView() {
+        return this.node.children.filter((child) => child.kind === 'element').at(-1);
+    }
+    onKeyboardMove(event) {
+        const height = event.nativeEvent?.height;
+        if (height !== undefined)
+            this.controlled.set(height);
+    }
+    onBarLayout(event) {
+        const height = event.nativeEvent?.layout?.height;
+        if (height !== undefined)
+            this.barHeight.set(height);
+    }
+    onLayout() {
+        if (this.lifts)
+            return;
+        this.engine.measure(this.node, (frame) => this.bottomEdge.set(frame.y + frame.height));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: KeyboardDock, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.0", type: KeyboardDock, isStandalone: true, selector: "keyboard-dock", inputs: { backgroundColor: { classPropertyName: "backgroundColor", publicName: "backgroundColor", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "layout": "onLayout()" }, properties: { "style.paddingBottom": "padding()", "style.backgroundColor": "backgroundColor()" } }, queries: [{ propertyName: "field", first: true, predicate: TextInput, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "fieldInput", first: true, predicate: TextInput, descendants: true, isSignal: true }], exportAs: ["keyboardDock"], usesInheritance: true, ngImport: i0, template: `
+    <ng-template #content><ng-content /></ng-template>
+    @if (lifts) {
+      <keyboard-controller-view
+        [style]="outOfFlow"
+        (keyboardMoveStart)="onKeyboardMove($event)"
+        (keyboardMoveEnd)="onKeyboardMove($event)"
+      />
+      <keyboard-gesture-area
+        [style]="outOfFlow"
+        [offset]="barHeight()"
+        [textInputNativeID]="inputID()"
+      />
+      <view
+        collapsable="false"
+        [style.backgroundColor]="backgroundColor()"
+        (layout)="onBarLayout($event)"
+        ><ng-container [templateSlot]="content" [templateSlotContext]="none"
+      /></view>
+    } @else {
+      <ng-container [templateSlot]="content" [templateSlotContext]="none" />
+    }
+  `, isInline: true, dependencies: [{ kind: "directive", type: KeyboardControllerView, selector: "keyboard-controller-view" }, { kind: "directive", type: KeyboardGestureArea, selector: "keyboard-gesture-area", inputs: ["offset", "textInputNativeID"] }, { kind: "directive", type: TemplateSlot, selector: "[templateSlot]", inputs: ["templateSlot", "templateSlotContext"] }, { kind: "directive", type: View, selector: "view" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: KeyboardDock, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'keyboard-dock',
+                    exportAs: 'keyboardDock',
+                    imports: [KeyboardControllerView, KeyboardGestureArea, TemplateSlot, View],
+                    // One slot, stamped in whichever branch applies: two `<ng-content>`s of the same selector would
+                    // be given the content at compile time, whichever branch renders.
+                    template: `
+    <ng-template #content><ng-content /></ng-template>
+    @if (lifts) {
+      <keyboard-controller-view
+        [style]="outOfFlow"
+        (keyboardMoveStart)="onKeyboardMove($event)"
+        (keyboardMoveEnd)="onKeyboardMove($event)"
+      />
+      <keyboard-gesture-area
+        [style]="outOfFlow"
+        [offset]="barHeight()"
+        [textInputNativeID]="inputID()"
+      />
+      <view
+        collapsable="false"
+        [style.backgroundColor]="backgroundColor()"
+        (layout)="onBarLayout($event)"
+        ><ng-container [templateSlot]="content" [templateSlotContext]="none"
+      /></view>
+    } @else {
+      <ng-container [templateSlot]="content" [templateSlotContext]="none" />
+    }
+  `,
+                    host: {
+                        '[style.paddingBottom]': 'padding()',
+                        '[style.backgroundColor]': 'backgroundColor()',
+                        '(layout)': 'onLayout()',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { backgroundColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "backgroundColor", required: false }] }], field: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TextInput), { ...{ descendants: true, read: ElementRef }, isSignal: true }] }], fieldInput: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TextInput), { ...{ descendants: true }, isSignal: true }] }] } });
+let docks = 0;
+/**
+ * Moves its view with a `<keyboard-dock>`'s bar: `<view [keyboardLift]="dock">` around a chat's
+ * transcript keeps the newest message on top of the bar as the keyboard rises, falls and is
+ * dragged. Put it inside a view that clips, so what rises past the top is hidden rather than
+ * drawn over what is above. Does nothing where native does not move the bar.
+ *
+ * Once the keyboard has moved, the view is padded by as much of it as covers the view, and moved
+ * back down by the same amount, which leaves it where it was on screen: since iOS 26 a scroll view
+ * the keyboard overlaps in layout draws a frosted edge effect over the part it thinks is covered,
+ * and a transform does not change what it thinks.
+ */
+export class KeyboardLift {
+    dock = input.required({ ...(ngDevMode ? { debugName: "dock" } : /* istanbul ignore next */ {}), alias: 'keyboardLift' });
+    padding = computed(() => {
+        const covered = this.dock().covered();
+        return covered > 0 ? covered : undefined;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "padding" }] : /* istanbul ignore next */ []));
+    constructor() {
+        const view = inject(ElementRef).nativeElement;
+        let drive = null;
+        afterRenderEffect(() => {
+            const dock = this.dock();
+            const range = dock.liftRange();
+            const covered = dock.covered();
+            untracked(() => {
+                if (!drive)
+                    drive = dock.lift(view, covered);
+                drive?.update(range);
+                drive?.shift(covered);
+            });
+        });
+        inject(DestroyRef).onDestroy(() => drive?.stop());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: KeyboardLift, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.2.0", type: KeyboardLift, isStandalone: true, selector: "[keyboardLift]", inputs: { dock: { classPropertyName: "dock", publicName: "keyboardLift", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "style.paddingBottom": "padding()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: KeyboardLift, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[keyboardLift]',
+                    host: { '[style.paddingBottom]': 'padding()' },
+                }]
+        }], ctorParameters: () => [], propDecorators: { dock: [{ type: i0.Input, args: [{ isSignal: true, alias: "keyboardLift", required: true }] }] } });
+//# sourceMappingURL=keyboard-dock.js.map