@ng-native/components 0.14.0 → 0.15.0

package/dist/markdown.js

@@ -9,12 +9,14 @@
  * import { Markdown } from '@ng-native/components/markdown';
  * ```
  */
-import { Component, Injector, computed, inject, input, linkedSignal, output } from '@angular/core';
+import { Component, Injector, booleanAttribute, computed, inject, input, linkedSignal, output, } from '@angular/core';
 import { DeepLinks } from '@ng-native/device';
 import { nativePlatform } from '@ng-native/fabric';
 import { lexer } from 'marked';
 import { Image } from "./image.js";
-import { markdownBlocks, opensOnPress, } from "./markdown-blocks.js";
+import { blockKey, markdownBlocks, opensOnPress, shareBlocks, } from "./markdown-blocks.js";
+import { MarkdownColumns } from "./markdown-columns.js";
+import { MarkdownStream } from "./markdown-stream.js";
 import { ScrollView } from "./scroll-view.js";
 import { TemplateSlot } from "./template-slot.js";
 import { Text } from "./text.js";
@@ -56,6 +58,15 @@ function imageSources(blocks, into = new Set()) {
  * dark. `classes` replaces one by its element's name, so a global stylesheet or Tailwind styles it
  * instead: `{ h1: 'text-3xl font-bold' }`. Put the default back beside your own to keep both.
  *
+ * For a source that grows as it streams in, an answer arriving a few words at a time, set
+ * `streaming` until it is complete. The blocks before the last one are then kept as they are and
+ * only the last is lexed and converted again, unless a chunk defines or changes a link reference,
+ * which can change a block already kept, and the whole source is lexed again. Syntax still open at its end, a code span, an emphasis, a link,
+ * an image or a table row, is held back until it closes. Of a code fence only an unfinished
+ * opening line is held back, and its code then streams as it arrives. Clearing `streaming` draws
+ * the whole source as written, and `tokens` are always drawn as given. A block that did not
+ * change keeps its views, streaming or not.
+ *
  * A pressed link is `(linkPress)`. An absolute target is then opened with `DeepLinks.open` unless
  * a handler calls `preventDefault()`; a relative one is only reported, for the app to route.
  */
@@ -69,13 +80,36 @@ export class Markdown {
     /** Tokens `marked.lexer` made already, drawn in place of `source`. */
     tokens = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "tokens" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether `source` is still arriving, a chunk at a time. While it is, only its last block is
+     * lexed again, unless a link reference changes, and syntax still open at its end is held back.
+     * See the class note.
+     */
+    streaming = input(false, { ...(ngDevMode ? { debugName: "streaming" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /** A class for an element, in place of its default. See the class note. */
     classes = input({}, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
     /** A link was pressed. See the class note. */
     linkPress = output();
-    blocks = computed(() => markdownBlocks(this.tokens() ?? lexer(this.source() ?? '')), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "blocks" }] : /* istanbul ignore next */ []));
+    stream = new MarkdownStream();
+    blockKey = blockKey;
+    /**
+     * The blocks each token the stream kept was drawn as. A kept token is the same object from one
+     * chunk to the next, so its blocks are not converted or compared again; a source lexed whole
+     * makes new tokens, and so new blocks.
+     */
+    streamed = new WeakMap();
+    /** The document's blocks, with each one that did not change kept, so it is not drawn again. */
+    blocks = linkedSignal({ ...(ngDevMode ? { debugName: "blocks" } : /* istanbul ignore next */ {}), source: () => {
+            const tokens = this.tokens();
+            if (tokens)
+                return { tokens, streamed: false };
+            const streamed = this.streaming();
+            return { tokens: this.lex(this.source() ?? '', streamed), streamed };
+        },
+        computation: ({ tokens, streamed }, previous) => streamed
+            ? this.streamedBlocks(tokens, previous?.value)
+            : shareBlocks(previous?.value, markdownBlocks(tokens)) });
     classOf = computed(() => ({ ...DEFAULT_CLASSES, ...this.classes() }), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classOf" }] : /* istanbul ignore next */ []));
     /**
@@ -93,6 +127,32 @@ export class Markdown {
                     kept.set(src, ratio);
             return kept;
         } });
+    lex(source, streaming) {
+        return streaming ? this.stream.lex(source) : lexer(source);
+    }
+    /** `tokens`' blocks, converting and sharing only those of tokens the stream had not kept. */
+    streamedBlocks(tokens, previous) {
+        const kept = [];
+        let at = 0;
+        for (; at < tokens.length; at++) {
+            const blocks = this.streamed.get(tokens[at]);
+            if (!blocks)
+                break;
+            kept.push(...blocks);
+        }
+        const rest = tokens.slice(at);
+        const converted = rest.map((token) => markdownBlocks([token]));
+        // The blocks drawn after the kept ones, when those are still the ones drawn first.
+        const drawn = !kept.length || previous?.[kept.length - 1] === kept.at(-1);
+        const was = drawn ? previous?.slice(kept.length) : undefined;
+        const shared = shareBlocks(was, converted.flat());
+        let from = 0;
+        rest.forEach((token, i) => {
+            const count = converted[i].length;
+            this.streamed.set(token, shared.slice(from, (from += count)));
+        });
+        return [...kept, ...shared];
+    }
     classFor(element) {
         return this.classOf()[element];
     }
@@ -118,9 +178,9 @@ export class Markdown {
             this.injector.get(DeepLinks).open(link.href);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: Markdown, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.0", type: Markdown, isStandalone: true, selector: "markdown", inputs: { source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: false, transformFunction: null }, tokens: { classPropertyName: "tokens", publicName: "tokens", isSignal: true, isRequired: false, transformFunction: null }, classes: { classPropertyName: "classes", publicName: "classes", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { linkPress: "linkPress" }, host: { properties: { "class.md-ios": "platform === 'ios'", "class.md-android": "platform === 'android'" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.0", type: Markdown, isStandalone: true, selector: "markdown", inputs: { source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: false, transformFunction: null }, tokens: { classPropertyName: "tokens", publicName: "tokens", isSignal: true, isRequired: false, transformFunction: null }, streaming: { classPropertyName: "streaming", publicName: "streaming", isSignal: true, isRequired: false, transformFunction: null }, classes: { classPropertyName: "classes", publicName: "classes", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { linkPress: "linkPress" }, host: { properties: { "class.md-ios": "platform === 'ios'", "class.md-android": "platform === 'android'" } }, ngImport: i0, template: `
     <ng-template #blockTemplate let-list>
-      @for (block of list; track $index) {
+      @for (block of list; track blockKey(block)) {
         @switch (block.kind) {
           @case ('heading') {
             <text [class]="classFor(block.element)" accessibilityRole="header"
@@ -171,24 +231,39 @@ export class Markdown {
             <view [class]="classFor('hr')"></view>
           }
           @case ('table') {
-            <view [class]="classFor('table')">
-              <view [class]="classFor('tr')">
-                @for (cell of block.header; track $index) {
-                  <text [class]="classFor('th')"
-                    ><ng-container *templateSlot="inlineTemplate; context: { $implicit: cell }"
-                  /></text>
-                }
-              </view>
-              @for (row of block.rows; track $index) {
+            <scroll-view horizontal>
+              <view
+                [class]="classFor('table')"
+                [markdownColumns]="block"
+                #columns="markdownColumns"
+              >
                 <view [class]="classFor('tr')">
-                  @for (cell of row; track $index) {
-                    <text [class]="classFor('td')"
-                      ><ng-container *templateSlot="inlineTemplate; context: { $implicit: cell }"
-                    /></text>
+                  @for (cell of block.header; track $index; let column = $index) {
+                    <view class="md-cell" [style.minWidth]="columns.width(column)">
+                      <text
+                        [class]="classFor('th')"
+                        (layout)="columns.measure(0, column, $any($event))"
+                        ><ng-container *templateSlot="inlineTemplate; context: { $implicit: cell }"
+                      /></text>
+                    </view>
                   }
                 </view>
-              }
-            </view>
+                @for (row of block.rows; track $index; let r = $index) {
+                  <view [class]="classFor('tr')">
+                    @for (cell of row; track $index; let column = $index) {
+                      <view class="md-cell md-cell-body" [style.minWidth]="columns.width(column)">
+                        <text
+                          [class]="classFor('td')"
+                          (layout)="columns.measure(r + 1, column, $any($event))"
+                          ><ng-container
+                            *templateSlot="inlineTemplate; context: { $implicit: cell }"
+                        /></text>
+                      </view>
+                    }
+                  </view>
+                }
+              </view>
+            </scroll-view>
           }
         }
       }
@@ -222,13 +297,13 @@ export class Markdown {
     </ng-template>
 
     <ng-container *templateSlot="blockTemplate; context: { $implicit: blocks() }" />
-  `, isInline: true, styles: ["/* What a document looks like with no `classes` of the app's, in light and in dark. */\n\n:host {\n  gap: 12px;\n  color: #1c1c1e;\n}\n\n.md-h1,\n.md-h2,\n.md-h3,\n.md-h4,\n.md-h5,\n.md-h6 {\n  font-weight: 700;\n}\n\n.md-h1 {\n  font-size: 28px;\n  line-height: 34px;\n}\n\n.md-h2 {\n  font-size: 22px;\n  line-height: 28px;\n}\n\n.md-h3 {\n  font-size: 20px;\n  line-height: 25px;\n}\n\n.md-h4 {\n  font-size: 17px;\n  line-height: 22px;\n}\n\n.md-h5 {\n  font-size: 15px;\n  line-height: 20px;\n}\n\n.md-h6 {\n  font-size: 13px;\n  line-height: 18px;\n  color: #6c6c70;\n}\n\n.md-p,\n.md-marker,\n.md-th,\n.md-td {\n  font-size: 16px;\n  line-height: 23px;\n}\n\n.md-strong {\n  font-weight: 700;\n}\n\n.md-em {\n  font-style: italic;\n}\n\n.md-del {\n  text-decoration-line: line-through;\n}\n\n.md-a {\n  color: #0a66d8;\n  text-decoration-line: underline;\n}\n\n.md-code {\n  background-color: rgba(120, 120, 128, 0.16);\n}\n\n.md-code,\n.md-pre {\n  font-family: Courier New;\n}\n\n:host(.md-ios) .md-code,\n:host(.md-ios) .md-pre {\n  font-family: Menlo;\n}\n\n:host(.md-android) .md-code,\n:host(.md-android) .md-pre {\n  font-family: monospace;\n}\n\n.md-blockquote {\n  gap: 8px;\n  padding-left: 12px;\n  border-left-width: 3px;\n  border-left-color: #d1d1d6;\n  color: #6c6c70;\n}\n\n.md-ul,\n.md-ol {\n  gap: 4px;\n}\n\n.md-li {\n  flex-direction: row;\n  gap: 8px;\n}\n\n.md-marker {\n  min-width: 16px;\n}\n\n.md-li-body {\n  flex: 1;\n  gap: 4px;\n}\n\n.md-pre {\n  flex-grow: 0;\n  border-radius: 8px;\n  background-color: #f2f2f7;\n}\n\n.md-pre-text {\n  padding: 12px;\n  font-size: 14px;\n  line-height: 20px;\n}\n\n.md-hr {\n  height: 1px;\n  background-color: #d1d1d6;\n}\n\n.md-img {\n  width: 100%;\n  height: 200px;\n  border-radius: 8px;\n}\n\n.md-table {\n  border-width: 1px;\n  border-color: #d1d1d6;\n  border-radius: 8px;\n  overflow: hidden;\n}\n\n.md-tr {\n  flex-direction: row;\n}\n\n.md-th,\n.md-td {\n  flex: 1;\n  padding: 6px 8px;\n}\n\n.md-td {\n  border-top-width: 1px;\n  border-top-color: #d1d1d6;\n}\n\n.md-th {\n  font-weight: 600;\n}\n\n@media (prefers-color-scheme: dark) {\n  :host {\n    color: #f2f2f7;\n  }\n\n  .md-h6,\n  .md-blockquote {\n    color: #98989f;\n  }\n\n  .md-a {\n    color: #4c9bff;\n  }\n\n  .md-code {\n    background-color: rgba(120, 120, 128, 0.32);\n  }\n\n  .md-pre {\n    background-color: #1c1c1e;\n  }\n\n  .md-blockquote,\n  .md-table,\n  .md-td {\n    border-color: #38383a;\n  }\n\n  .md-hr {\n    background-color: #38383a;\n  }\n}\n"], dependencies: [{ kind: "directive", type: Image, selector: "image", inputs: ["source", "src", "srcSet", "defaultSource", "loadingIndicatorSource", "resizeMode", "resizeMethod", "resizeMultiplier", "blurRadius", "capInsets", "tintColor", "fadeDuration", "progressiveRenderingEnabled", "alt", "crossOrigin", "referrerPolicy"] }, { kind: "component", type: ScrollView, selector: "scroll-view", inputs: ["contentContainerStyle", "contentContainerClass", "horizontal", "contentOffset", "maintainVisibleContentPosition", "keyboardShouldPersistTaps", "nestedScrollEnabled", "stickyHeaderIndices"], outputs: ["contentSizeChange"], exportAs: ["scrollView"] }, { kind: "directive", type: TemplateSlot, selector: "[templateSlot]", inputs: ["templateSlot", "templateSlotContext"] }, { kind: "directive", type: Text, selector: "text", inputs: ["numberOfLines", "ellipsizeMode", "selectable", "selectionColor", "allowFontScaling", "maxFontSizeMultiplier", "dynamicTypeRamp", "adjustsFontSizeToFit", "minimumFontScale", "lineBreakStrategyIOS", "textBreakStrategy", "dataDetectorType", "android_hyphenationFrequency", "pressable", "suppressHighlighting"], exportAs: ["text"] }, { kind: "directive", type: View, selector: "view" }] });
+  `, isInline: true, styles: ["/* What a document looks like with no `classes` of the app's, in light and in dark. */\n\n:host {\n  gap: 12px;\n  color: #1c1c1e;\n}\n\n.md-h1,\n.md-h2,\n.md-h3,\n.md-h4,\n.md-h5,\n.md-h6 {\n  font-weight: 700;\n}\n\n.md-h1 {\n  font-size: 28px;\n  line-height: 34px;\n}\n\n.md-h2 {\n  font-size: 22px;\n  line-height: 28px;\n}\n\n.md-h3 {\n  font-size: 20px;\n  line-height: 25px;\n}\n\n.md-h4 {\n  font-size: 17px;\n  line-height: 22px;\n}\n\n.md-h5 {\n  font-size: 15px;\n  line-height: 20px;\n}\n\n.md-h6 {\n  font-size: 13px;\n  line-height: 18px;\n  color: #6c6c70;\n}\n\n.md-p,\n.md-marker,\n.md-th,\n.md-td {\n  font-size: 16px;\n  line-height: 23px;\n}\n\n.md-strong {\n  font-weight: 700;\n}\n\n.md-em {\n  font-style: italic;\n}\n\n.md-del {\n  text-decoration-line: line-through;\n}\n\n.md-a {\n  color: #0a66d8;\n  text-decoration-line: underline;\n}\n\n.md-code {\n  background-color: rgba(120, 120, 128, 0.16);\n}\n\n.md-code,\n.md-pre {\n  font-family: Courier New;\n}\n\n:host(.md-ios) .md-code,\n:host(.md-ios) .md-pre {\n  font-family: Menlo;\n}\n\n:host(.md-android) .md-code,\n:host(.md-android) .md-pre {\n  font-family: monospace;\n}\n\n.md-blockquote {\n  gap: 8px;\n  padding-left: 12px;\n  border-left-width: 3px;\n  border-left-color: #d1d1d6;\n  color: #6c6c70;\n}\n\n.md-ul,\n.md-ol {\n  gap: 4px;\n}\n\n.md-li {\n  flex-direction: row;\n  gap: 8px;\n}\n\n.md-marker {\n  min-width: 16px;\n}\n\n.md-li-body {\n  flex: 1;\n  gap: 4px;\n}\n\n.md-pre {\n  flex-grow: 0;\n  border-radius: 8px;\n  background-color: #f2f2f7;\n}\n\n.md-pre-text {\n  padding: 12px;\n  font-size: 14px;\n  line-height: 20px;\n}\n\n.md-hr {\n  height: 1px;\n  background-color: #d1d1d6;\n}\n\n.md-img {\n  width: 100%;\n  height: 200px;\n  border-radius: 8px;\n}\n\n.md-table {\n  border-width: 1px;\n  border-color: #d1d1d6;\n  border-radius: 8px;\n  overflow: hidden;\n}\n\n.md-tr {\n  flex-direction: row;\n}\n\n/* The text hugs its content inside the column's least width, so it can report a narrower one. */\n.md-cell {\n  align-items: flex-start;\n}\n\n.md-th,\n.md-td {\n  max-width: 280px;\n  padding: 6px 8px;\n}\n\n.md-cell-body {\n  border-top-width: 1px;\n  border-top-color: #d1d1d6;\n}\n\n.md-th {\n  font-weight: 600;\n}\n\n@media (prefers-color-scheme: dark) {\n  :host {\n    color: #f2f2f7;\n  }\n\n  .md-h6,\n  .md-blockquote {\n    color: #98989f;\n  }\n\n  .md-a {\n    color: #4c9bff;\n  }\n\n  .md-code {\n    background-color: rgba(120, 120, 128, 0.32);\n  }\n\n  .md-pre {\n    background-color: #1c1c1e;\n  }\n\n  .md-blockquote,\n  .md-table,\n  .md-cell-body {\n    border-color: #38383a;\n  }\n\n  .md-hr {\n    background-color: #38383a;\n  }\n}\n"], dependencies: [{ kind: "directive", type: Image, selector: "image", inputs: ["source", "src", "srcSet", "defaultSource", "loadingIndicatorSource", "resizeMode", "resizeMethod", "resizeMultiplier", "blurRadius", "capInsets", "tintColor", "fadeDuration", "progressiveRenderingEnabled", "alt", "crossOrigin", "referrerPolicy"] }, { kind: "directive", type: MarkdownColumns, selector: "[markdownColumns]", inputs: ["markdownColumns"], exportAs: ["markdownColumns"] }, { kind: "component", type: ScrollView, selector: "scroll-view", inputs: ["contentContainerStyle", "contentContainerClass", "horizontal", "contentOffset", "maintainVisibleContentPosition", "keyboardShouldPersistTaps", "nestedScrollEnabled", "stickyHeaderIndices"], outputs: ["contentSizeChange"], exportAs: ["scrollView"] }, { kind: "directive", type: TemplateSlot, selector: "[templateSlot]", inputs: ["templateSlot", "templateSlotContext"] }, { kind: "directive", type: Text, selector: "text", inputs: ["numberOfLines", "ellipsizeMode", "selectable", "selectionColor", "allowFontScaling", "maxFontSizeMultiplier", "dynamicTypeRamp", "adjustsFontSizeToFit", "minimumFontScale", "lineBreakStrategyIOS", "textBreakStrategy", "dataDetectorType", "android_hyphenationFrequency", "pressable", "suppressHighlighting"], exportAs: ["text"] }, { kind: "directive", type: View, selector: "view" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: Markdown, decorators: [{
             type: Component,
-            args: [{ selector: 'markdown', imports: [Image, ScrollView, TemplateSlot, Text, View], template: `
+            args: [{ selector: 'markdown', imports: [Image, MarkdownColumns, ScrollView, TemplateSlot, Text, View], template: `
     <ng-template #blockTemplate let-list>
-      @for (block of list; track $index) {
+      @for (block of list; track blockKey(block)) {
         @switch (block.kind) {
           @case ('heading') {
             <text [class]="classFor(block.element)" accessibilityRole="header"
@@ -279,24 +354,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImpor
             <view [class]="classFor('hr')"></view>
           }
           @case ('table') {
-            <view [class]="classFor('table')">
-              <view [class]="classFor('tr')">
-                @for (cell of block.header; track $index) {
-                  <text [class]="classFor('th')"
-                    ><ng-container *templateSlot="inlineTemplate; context: { $implicit: cell }"
-                  /></text>
-                }
-              </view>
-              @for (row of block.rows; track $index) {
+            <scroll-view horizontal>
+              <view
+                [class]="classFor('table')"
+                [markdownColumns]="block"
+                #columns="markdownColumns"
+              >
                 <view [class]="classFor('tr')">
-                  @for (cell of row; track $index) {
-                    <text [class]="classFor('td')"
-                      ><ng-container *templateSlot="inlineTemplate; context: { $implicit: cell }"
-                    /></text>
+                  @for (cell of block.header; track $index; let column = $index) {
+                    <view class="md-cell" [style.minWidth]="columns.width(column)">
+                      <text
+                        [class]="classFor('th')"
+                        (layout)="columns.measure(0, column, $any($event))"
+                        ><ng-container *templateSlot="inlineTemplate; context: { $implicit: cell }"
+                      /></text>
+                    </view>
                   }
                 </view>
-              }
-            </view>
+                @for (row of block.rows; track $index; let r = $index) {
+                  <view [class]="classFor('tr')">
+                    @for (cell of row; track $index; let column = $index) {
+                      <view class="md-cell md-cell-body" [style.minWidth]="columns.width(column)">
+                        <text
+                          [class]="classFor('td')"
+                          (layout)="columns.measure(r + 1, column, $any($event))"
+                          ><ng-container
+                            *templateSlot="inlineTemplate; context: { $implicit: cell }"
+                        /></text>
+                      </view>
+                    }
+                  </view>
+                }
+              </view>
+            </scroll-view>
           }
         }
       }
@@ -333,6 +423,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImpor
   `, host: {
                         '[class.md-ios]': "platform === 'ios'",
                         '[class.md-android]': "platform === 'android'",
-                    }, styles: ["/* What a document looks like with no `classes` of the app's, in light and in dark. */\n\n:host {\n  gap: 12px;\n  color: #1c1c1e;\n}\n\n.md-h1,\n.md-h2,\n.md-h3,\n.md-h4,\n.md-h5,\n.md-h6 {\n  font-weight: 700;\n}\n\n.md-h1 {\n  font-size: 28px;\n  line-height: 34px;\n}\n\n.md-h2 {\n  font-size: 22px;\n  line-height: 28px;\n}\n\n.md-h3 {\n  font-size: 20px;\n  line-height: 25px;\n}\n\n.md-h4 {\n  font-size: 17px;\n  line-height: 22px;\n}\n\n.md-h5 {\n  font-size: 15px;\n  line-height: 20px;\n}\n\n.md-h6 {\n  font-size: 13px;\n  line-height: 18px;\n  color: #6c6c70;\n}\n\n.md-p,\n.md-marker,\n.md-th,\n.md-td {\n  font-size: 16px;\n  line-height: 23px;\n}\n\n.md-strong {\n  font-weight: 700;\n}\n\n.md-em {\n  font-style: italic;\n}\n\n.md-del {\n  text-decoration-line: line-through;\n}\n\n.md-a {\n  color: #0a66d8;\n  text-decoration-line: underline;\n}\n\n.md-code {\n  background-color: rgba(120, 120, 128, 0.16);\n}\n\n.md-code,\n.md-pre {\n  font-family: Courier New;\n}\n\n:host(.md-ios) .md-code,\n:host(.md-ios) .md-pre {\n  font-family: Menlo;\n}\n\n:host(.md-android) .md-code,\n:host(.md-android) .md-pre {\n  font-family: monospace;\n}\n\n.md-blockquote {\n  gap: 8px;\n  padding-left: 12px;\n  border-left-width: 3px;\n  border-left-color: #d1d1d6;\n  color: #6c6c70;\n}\n\n.md-ul,\n.md-ol {\n  gap: 4px;\n}\n\n.md-li {\n  flex-direction: row;\n  gap: 8px;\n}\n\n.md-marker {\n  min-width: 16px;\n}\n\n.md-li-body {\n  flex: 1;\n  gap: 4px;\n}\n\n.md-pre {\n  flex-grow: 0;\n  border-radius: 8px;\n  background-color: #f2f2f7;\n}\n\n.md-pre-text {\n  padding: 12px;\n  font-size: 14px;\n  line-height: 20px;\n}\n\n.md-hr {\n  height: 1px;\n  background-color: #d1d1d6;\n}\n\n.md-img {\n  width: 100%;\n  height: 200px;\n  border-radius: 8px;\n}\n\n.md-table {\n  border-width: 1px;\n  border-color: #d1d1d6;\n  border-radius: 8px;\n  overflow: hidden;\n}\n\n.md-tr {\n  flex-direction: row;\n}\n\n.md-th,\n.md-td {\n  flex: 1;\n  padding: 6px 8px;\n}\n\n.md-td {\n  border-top-width: 1px;\n  border-top-color: #d1d1d6;\n}\n\n.md-th {\n  font-weight: 600;\n}\n\n@media (prefers-color-scheme: dark) {\n  :host {\n    color: #f2f2f7;\n  }\n\n  .md-h6,\n  .md-blockquote {\n    color: #98989f;\n  }\n\n  .md-a {\n    color: #4c9bff;\n  }\n\n  .md-code {\n    background-color: rgba(120, 120, 128, 0.32);\n  }\n\n  .md-pre {\n    background-color: #1c1c1e;\n  }\n\n  .md-blockquote,\n  .md-table,\n  .md-td {\n    border-color: #38383a;\n  }\n\n  .md-hr {\n    background-color: #38383a;\n  }\n}\n"] }]
-        }], propDecorators: { source: [{ type: i0.Input, args: [{ isSignal: true, alias: "source", required: false }] }], tokens: [{ type: i0.Input, args: [{ isSignal: true, alias: "tokens", required: false }] }], classes: [{ type: i0.Input, args: [{ isSignal: true, alias: "classes", required: false }] }], linkPress: [{ type: i0.Output, args: ["linkPress"] }] } });
+                    }, styles: ["/* What a document looks like with no `classes` of the app's, in light and in dark. */\n\n:host {\n  gap: 12px;\n  color: #1c1c1e;\n}\n\n.md-h1,\n.md-h2,\n.md-h3,\n.md-h4,\n.md-h5,\n.md-h6 {\n  font-weight: 700;\n}\n\n.md-h1 {\n  font-size: 28px;\n  line-height: 34px;\n}\n\n.md-h2 {\n  font-size: 22px;\n  line-height: 28px;\n}\n\n.md-h3 {\n  font-size: 20px;\n  line-height: 25px;\n}\n\n.md-h4 {\n  font-size: 17px;\n  line-height: 22px;\n}\n\n.md-h5 {\n  font-size: 15px;\n  line-height: 20px;\n}\n\n.md-h6 {\n  font-size: 13px;\n  line-height: 18px;\n  color: #6c6c70;\n}\n\n.md-p,\n.md-marker,\n.md-th,\n.md-td {\n  font-size: 16px;\n  line-height: 23px;\n}\n\n.md-strong {\n  font-weight: 700;\n}\n\n.md-em {\n  font-style: italic;\n}\n\n.md-del {\n  text-decoration-line: line-through;\n}\n\n.md-a {\n  color: #0a66d8;\n  text-decoration-line: underline;\n}\n\n.md-code {\n  background-color: rgba(120, 120, 128, 0.16);\n}\n\n.md-code,\n.md-pre {\n  font-family: Courier New;\n}\n\n:host(.md-ios) .md-code,\n:host(.md-ios) .md-pre {\n  font-family: Menlo;\n}\n\n:host(.md-android) .md-code,\n:host(.md-android) .md-pre {\n  font-family: monospace;\n}\n\n.md-blockquote {\n  gap: 8px;\n  padding-left: 12px;\n  border-left-width: 3px;\n  border-left-color: #d1d1d6;\n  color: #6c6c70;\n}\n\n.md-ul,\n.md-ol {\n  gap: 4px;\n}\n\n.md-li {\n  flex-direction: row;\n  gap: 8px;\n}\n\n.md-marker {\n  min-width: 16px;\n}\n\n.md-li-body {\n  flex: 1;\n  gap: 4px;\n}\n\n.md-pre {\n  flex-grow: 0;\n  border-radius: 8px;\n  background-color: #f2f2f7;\n}\n\n.md-pre-text {\n  padding: 12px;\n  font-size: 14px;\n  line-height: 20px;\n}\n\n.md-hr {\n  height: 1px;\n  background-color: #d1d1d6;\n}\n\n.md-img {\n  width: 100%;\n  height: 200px;\n  border-radius: 8px;\n}\n\n.md-table {\n  border-width: 1px;\n  border-color: #d1d1d6;\n  border-radius: 8px;\n  overflow: hidden;\n}\n\n.md-tr {\n  flex-direction: row;\n}\n\n/* The text hugs its content inside the column's least width, so it can report a narrower one. */\n.md-cell {\n  align-items: flex-start;\n}\n\n.md-th,\n.md-td {\n  max-width: 280px;\n  padding: 6px 8px;\n}\n\n.md-cell-body {\n  border-top-width: 1px;\n  border-top-color: #d1d1d6;\n}\n\n.md-th {\n  font-weight: 600;\n}\n\n@media (prefers-color-scheme: dark) {\n  :host {\n    color: #f2f2f7;\n  }\n\n  .md-h6,\n  .md-blockquote {\n    color: #98989f;\n  }\n\n  .md-a {\n    color: #4c9bff;\n  }\n\n  .md-code {\n    background-color: rgba(120, 120, 128, 0.32);\n  }\n\n  .md-pre {\n    background-color: #1c1c1e;\n  }\n\n  .md-blockquote,\n  .md-table,\n  .md-cell-body {\n    border-color: #38383a;\n  }\n\n  .md-hr {\n    background-color: #38383a;\n  }\n}\n"] }]
+        }], propDecorators: { source: [{ type: i0.Input, args: [{ isSignal: true, alias: "source", required: false }] }], tokens: [{ type: i0.Input, args: [{ isSignal: true, alias: "tokens", required: false }] }], streaming: [{ type: i0.Input, args: [{ isSignal: true, alias: "streaming", required: false }] }], classes: [{ type: i0.Input, args: [{ isSignal: true, alias: "classes", required: false }] }], linkPress: [{ type: i0.Output, args: ["linkPress"] }] } });
 //# sourceMappingURL=markdown.js.map

package/dist/markdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"markdown.js","sourceRoot":"","sources":["../src/markdown.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Markdown, drawn as native views and text.\n *\n * Its own entry point because it parses with `marked`, an optional peer dependency an app installs\n * only when it renders Markdown: the barrel never imports it, so an app that does not is not asked\n * for it.\n *\n * ```ts\n * import { Markdown } from '@ng-native/components/markdown';\n * ```\n */\nimport { Component, Injector, computed, inject, input, linkedSignal, output } from '@angular/core';\nimport { DeepLinks } from '@ng-native/device';\nimport { nativePlatform } from '@ng-native/fabric';\nimport { lexer, type Token } from 'marked';\nimport type { ImageLoadEvent } from './events.ts';\nimport { Image } from './image.ts';\nimport {\n  markdownBlocks,\n  opensOnPress,\n  type MarkdownBlock,\n  type MarkdownElement,\n  type MarkdownInline,\n} from './markdown-blocks.ts';\nimport { ScrollView } from './scroll-view.ts';\nimport { TemplateSlot } from './template-slot.ts';\nimport { Text } from './text.ts';\nimport { View } from './view.ts';\n\nexport type { MarkdownElement } from './markdown-blocks.ts';\n\n/** Classes for the elements a document is drawn with, each one in place of the default. */\nexport type MarkdownClasses = Partial<Readonly<Record<MarkdownElement, string>>>;\n\n/** `(linkPress)`: a link was pressed. */\nexport interface MarkdownLinkPress {\n  /** The target as written, after its entities are decoded and its scheme was allowed. */\n  readonly href: string;\n  readonly title: string | null;\n  /** Keep the link from being opened, to handle it in the app instead. */\n  preventDefault(): void;\n}\n\nconst ELEMENTS: readonly MarkdownElement[] = [\n  ...['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'blockquote', 'ul', 'ol', 'li', 'marker'],\n  ...['pre', 'code', 'strong', 'em', 'del', 'a', 'hr', 'img', 'table', 'tr', 'th', 'td'],\n] as MarkdownElement[];\n\nconst DEFAULT_CLASSES = Object.fromEntries(\n  ELEMENTS.map((element) => [element, `md-${element}`]),\n) as Readonly<Record<MarkdownElement, string>>;\n\ntype MarkdownLink = Extract<MarkdownInline, { kind: 'link' }>;\n\n/** Every image address in `blocks`, however deep in quotes and lists. */\nfunction imageSources(blocks: readonly MarkdownBlock[], into = new Set<string>()): Set<string> {\n  for (const block of blocks) {\n    if (block.kind === 'image') into.add(block.src);\n    else if (block.kind === 'blockquote') imageSources(block.children, into);\n    else if (block.kind === 'list') {\n      for (const item of block.items) imageSources(item.children, into);\n    }\n  }\n  return into;\n}\n\n/**\n * A Markdown document as `<text>`, `<view>`, `<image>` and `<scroll-view>`: headings, paragraphs,\n * emphasis, inline code, links, quotes, ordered, unordered and task lists, code blocks, rules,\n * tables and images.\n *\n * `source` is parsed with `marked.lexer`; `tokens` takes tokens lexed already, and wins when both\n * are set. A paragraph is one `<text>` with a nested `<text>` for each emphasis, code span and\n * link, so it wraps as one run; an image is lifted out to a block of its own.\n *\n * Nothing in the document is interpreted. Raw HTML is drawn as the text it is written as, a link\n * is followed only to `http`, `https`, `mailto`, `tel` or a relative target, and an image is\n * loaded only over `http` or `https`; anything else is drawn as its text.\n *\n * Each element carries a default class, `md-h1`, `md-p`, `md-a` and so on, styled in light and\n * dark. `classes` replaces one by its element's name, so a global stylesheet or Tailwind styles it\n * instead: `{ h1: 'text-3xl font-bold' }`. Put the default back beside your own to keep both.\n *\n * A pressed link is `(linkPress)`. An absolute target is then opened with `DeepLinks.open` unless\n * a handler calls `preventDefault()`; a relative one is only reported, for the app to route.\n */\n@Component({\n  selector: 'markdown',\n  imports: [Image, ScrollView, TemplateSlot, Text, View],\n  template: `\n    <ng-template #blockTemplate let-list>\n      @for (block of list; track $index) {\n        @switch (block.kind) {\n          @case ('heading') {\n            <text [class]=\"classFor(block.element)\" accessibilityRole=\"header\"\n              ><ng-container *templateSlot=\"inlineTemplate; context: { $implicit: block.children }\"\n            /></text>\n          }\n          @case ('paragraph') {\n            <text [class]=\"classFor('p')\"\n              ><ng-container *templateSlot=\"inlineTemplate; context: { $implicit: block.children }\"\n            /></text>\n          }\n          @case ('image') {\n            <image\n              [src]=\"block.src\"\n              [alt]=\"block.alt || undefined\"\n              resizeMode=\"contain\"\n              [class]=\"classFor('img')\"\n              [style.aspectRatio]=\"ratios().get(block.src) ?? null\"\n              [style.height]=\"ratios().has(block.src) ? 'auto' : null\"\n              (load)=\"sizeImage(block.src, $any($event))\"\n            />\n          }\n          @case ('blockquote') {\n            <view [class]=\"classFor('blockquote')\">\n              <ng-container *templateSlot=\"blockTemplate; context: { $implicit: block.children }\" />\n            </view>\n          }\n          @case ('list') {\n            <view [class]=\"classFor(block.element)\">\n              @for (item of block.items; track $index) {\n                <view [class]=\"classFor('li')\">\n                  <text [class]=\"classFor('marker')\">{{ item.marker }}</text>\n                  <view class=\"md-li-body\">\n                    <ng-container\n                      *templateSlot=\"blockTemplate; context: { $implicit: item.children }\"\n                    />\n                  </view>\n                </view>\n              }\n            </view>\n          }\n          @case ('code') {\n            <scroll-view horizontal [class]=\"classFor('pre')\">\n              <text selectable class=\"md-pre-text\">{{ block.text }}</text>\n            </scroll-view>\n          }\n          @case ('hr') {\n            <view [class]=\"classFor('hr')\"></view>\n          }\n          @case ('table') {\n            <view [class]=\"classFor('table')\">\n              <view [class]=\"classFor('tr')\">\n                @for (cell of block.header; track $index) {\n                  <text [class]=\"classFor('th')\"\n                    ><ng-container *templateSlot=\"inlineTemplate; context: { $implicit: cell }\"\n                  /></text>\n                }\n              </view>\n              @for (row of block.rows; track $index) {\n                <view [class]=\"classFor('tr')\">\n                  @for (cell of row; track $index) {\n                    <text [class]=\"classFor('td')\"\n                      ><ng-container *templateSlot=\"inlineTemplate; context: { $implicit: cell }\"\n                    /></text>\n                  }\n                </view>\n              }\n            </view>\n          }\n        }\n      }\n    </ng-template>\n\n    <ng-template #inlineTemplate let-runs>\n      @for (run of runs; track $index) {\n        @switch (run.kind) {\n          @case ('text') {\n            <ng-container>{{ run.text }}</ng-container>\n          }\n          @case ('code') {\n            <text [class]=\"classFor('code')\">{{ run.text }}</text>\n          }\n          @case ('link') {\n            <text\n              [class]=\"classFor('a')\"\n              pressable\n              [accessibilityHint]=\"run.title ?? undefined\"\n              (press)=\"followLink(run)\"\n              ><ng-container *templateSlot=\"inlineTemplate; context: { $implicit: run.children }\"\n            /></text>\n          }\n          @default {\n            <text [class]=\"classFor(run.kind)\"\n              ><ng-container *templateSlot=\"inlineTemplate; context: { $implicit: run.children }\"\n            /></text>\n          }\n        }\n      }\n    </ng-template>\n\n    <ng-container *templateSlot=\"blockTemplate; context: { $implicit: blocks() }\" />\n  `,\n  styleUrl: './markdown.css',\n  host: {\n    '[class.md-ios]': \"platform === 'ios'\",\n    '[class.md-android]': \"platform === 'android'\",\n  },\n})\nexport class Markdown {\n  private readonly injector = inject(Injector);\n  /** Which monospace font code is drawn in, as the platform names it. */\n  protected readonly platform = nativePlatform();\n\n  /** The Markdown to draw. */\n  readonly source = input<string>();\n  /** Tokens `marked.lexer` made already, drawn in place of `source`. */\n  readonly tokens = input<readonly Token[]>();\n  /** A class for an element, in place of its default. See the class note. */\n  readonly classes = input<MarkdownClasses>({});\n  /** A link was pressed. See the class note. */\n  readonly linkPress = output<MarkdownLinkPress>();\n\n  protected readonly blocks = computed(() =>\n    markdownBlocks(this.tokens() ?? lexer(this.source() ?? '')),\n  );\n\n  private readonly classOf = computed(() => ({ ...DEFAULT_CLASSES, ...this.classes() }));\n\n  /**\n   * Each image's width over its height, once it has loaded, so it is drawn at the page's width and\n   * its own shape. An image the document no longer has is forgotten when the document changes.\n   */\n  protected readonly ratios = linkedSignal<readonly MarkdownBlock[], ReadonlyMap<string, number>>({\n    source: this.blocks,\n    computation: (blocks, previous) => {\n      const kept = new Map<string, number>();\n      if (!previous) return kept;\n      const present = imageSources(blocks);\n      for (const [src, ratio] of previous.value) if (present.has(src)) kept.set(src, ratio);\n      return kept;\n    },\n  });\n\n  protected classFor(element: MarkdownElement): string {\n    return this.classOf()[element];\n  }\n\n  protected sizeImage(src: string, event: Partial<ImageLoadEvent>): void {\n    const source = event.nativeEvent?.source;\n    if (!source) return;\n    const { width, height } = source;\n    if (!(width > 0 && height > 0)) return;\n    this.ratios.update((ratios) => new Map(ratios).set(src, width / height));\n  }\n\n  protected followLink(link: MarkdownLink): void {\n    let prevented = false;\n    this.linkPress.emit({\n      href: link.href,\n      title: link.title,\n      preventDefault: () => {\n        prevented = true;\n      },\n    });\n    if (!prevented && opensOnPress(link.href)) this.injector.get(DeepLinks).open(link.href);\n  }\n}\n"]}
+{"version":3,"file":"markdown.js","sourceRoot":"","sources":["../src/markdown.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,OAAO,EACL,SAAS,EACT,QAAQ,EACR,gBAAgB,EAChB,QAAQ,EACR,MAAM,EACN,KAAK,EACL,YAAY,EACZ,MAAM,GACP,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC9C,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,KAAK,EAAc,MAAM,QAAQ,CAAC;AAE3C,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,OAAO,EACL,QAAQ,EACR,cAAc,EACd,YAAY,EACZ,WAAW,GAIZ,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AACjC,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;;AAgBjC,MAAM,QAAQ,GAA+B;IAC3C,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,YAAY,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,CAAC;IACtF,GAAG,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;CAClE,CAAC;AAEvB,MAAM,eAAe,GAAG,MAAM,CAAC,WAAW,CACxC,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,OAAO,EAAE,MAAM,OAAO,EAAE,CAAC,CAAC,CACT,CAAC;AAI/C,yEAAyE;AACzE,SAAS,YAAY,CAAC,MAAgC,EAAE,OAAO,IAAI,GAAG,EAAU;IAC9E,KAAK,MAAM,KAAK,IAAI,MAAM,EAAE,CAAC;QAC3B,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO;YAAE,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;aAC3C,IAAI,KAAK,CAAC,IAAI,KAAK,YAAY;YAAE,YAAY,CAAC,KAAK,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC;aACpE,IAAI,KAAK,CAAC,IAAI,KAAK,MAAM,EAAE,CAAC;YAC/B,KAAK,MAAM,IAAI,IAAI,KAAK,CAAC,KAAK;gBAAE,YAAY,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC;QACpE,CAAC;IACH,CAAC;IACD,OAAO,IAAI,CAAC;AACd,CAAC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AAkIH,MAAM,OAAO,QAAQ;IACF,QAAQ,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC;IAC7C,uEAAuE;IACpD,QAAQ,GAAG,cAAc,EAAE,CAAC;IAE/C,4BAA4B;IACnB,MAAM,GAAG,KAAK;0FAAU,CAAC;IAClC,sEAAsE;IAC7D,MAAM,GAAG,KAAK;0FAAoB,CAAC;IAC5C;;;;OAIG;IACM,SAAS,GAAG,KAAK,CAAC,KAAK,iFAAI,SAAS,EAAE,gBAAgB,GAAG,CAAC;IACnE,2EAA2E;IAClE,OAAO,GAAG,KAAK,CAAkB,EAAE;gFAAC,CAAC;IAC9C,8CAA8C;IACrC,SAAS,GAAG,MAAM,EAAqB,CAAC;IAEhC,MAAM,GAAG,IAAI,cAAc,EAAE,CAAC;IAC5B,QAAQ,GAAG,QAAQ,CAAC;IAEvC;;;;OAIG;IACc,QAAQ,GAAG,IAAI,OAAO,EAAmC,CAAC;IAE3E,+FAA+F;IAC5E,MAAM,GAAG,YAAY,6EACtC,MAAM,EAAE,GAAG,EAAE;YACX,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC;YAC7B,IAAI,MAAM;gBAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC;YAC/C,MAAM,QAAQ,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC;YAClC,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,EAAE,EAAE,QAAQ,CAAC,EAAE,QAAQ,EAAE,CAAC;QACvE,CAAC;QACD,WAAW,EAAE,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,QAA8C,EAAE,EAAE,CACpF,QAAQ;YACN,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,MAAM,EAAE,QAAQ,EAAE,KAAK,CAAC;YAC9C,CAAC,CAAC,WAAW,CAAC,QAAQ,EAAE,KAAK,EAAE,cAAc,CAAC,MAAM,CAAC,CAAC,GAC1D,CAAC;IAEc,OAAO,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,GAAG,eAAe,EAAE,GAAG,IAAI,CAAC,OAAO,EAAE,EAAE,CAAC;gFAAC,CAAC;IAEvF;;;OAGG;IACgB,MAAM,GAAG,YAAY,6EACtC,MAAM,EAAE,IAAI,CAAC,MAAM;QACnB,WAAW,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,EAAE;YAChC,MAAM,IAAI,GAAG,IAAI,GAAG,EAAkB,CAAC;YACvC,IAAI,CAAC,QAAQ;gBAAE,OAAO,IAAI,CAAC;YAC3B,MAAM,OAAO,GAAG,YAAY,CAAC,MAAM,CAAC,CAAC;YACrC,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,QAAQ,CAAC,KAAK;gBAAE,IAAI,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC;oBAAE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;YACtF,OAAO,IAAI,CAAC;QACd,CAAC,GACD,CAAC;IAEK,GAAG,CAAC,MAAc,EAAE,SAAkB;QAC5C,OAAO,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IAC7D,CAAC;IAED,6FAA6F;IACrF,cAAc,CACpB,MAAwB,EACxB,QAA8C;QAE9C,MAAM,IAAI,GAAoB,EAAE,CAAC;QACjC,IAAI,EAAE,GAAG,CAAC,CAAC;QACX,OAAO,EAAE,GAAG,MAAM,CAAC,MAAM,EAAE,EAAE,EAAE,EAAE,CAAC;YAChC,MAAM,MAAM,GAAG,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAE,CAAC,CAAC;YAC9C,IAAI,CAAC,MAAM;gBAAE,MAAM;YACnB,IAAI,CAAC,IAAI,CAAC,GAAG,MAAM,CAAC,CAAC;QACvB,CAAC;QACD,MAAM,IAAI,GAAG,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;QAC9B,MAAM,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,cAAc,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;QAC/D,mFAAmF;QACnF,MAAM,KAAK,GAAG,CAAC,IAAI,CAAC,MAAM,IAAI,QAAQ,EAAE,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,KAAK,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;QAC1E,MAAM,GAAG,GAAG,KAAK,CAAC,CAAC,CAAC,QAAQ,EAAE,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;QAC7D,MAAM,MAAM,GAAG,WAAW,CAAC,GAAG,EAAE,SAAS,CAAC,IAAI,EAAE,CAAC,CAAC;QAClD,IAAI,IAAI,GAAG,CAAC,CAAC;QACb,IAAI,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE;YACxB,MAAM,KAAK,GAAG,SAAS,CAAC,CAAC,CAAE,CAAC,MAAM,CAAC;YACnC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,IAAI,IAAI,KAAK,CAAC,CAAC,CAAC,CAAC;QAChE,CAAC,CAAC,CAAC;QACH,OAAO,CAAC,GAAG,IAAI,EAAE,GAAG,MAAM,CAAC,CAAC;IAC9B,CAAC;IAES,QAAQ,CAAC,OAAwB;QACzC,OAAO,IAAI,CAAC,OAAO,EAAE,CAAC,OAAO,CAAC,CAAC;IACjC,CAAC;IAES,SAAS,CAAC,GAAW,EAAE,KAA8B;QAC7D,MAAM,MAAM,GAAG,KAAK,CAAC,WAAW,EAAE,MAAM,CAAC;QACzC,IAAI,CAAC,MAAM;YAAE,OAAO;QACpB,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,MAAM,CAAC;QACjC,IAAI,CAAC,CAAC,KAAK,GAAG,CAAC,IAAI,MAAM,GAAG,CAAC,CAAC;YAAE,OAAO;QACvC,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,IAAI,GAAG,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,GAAG,EAAE,KAAK,GAAG,MAAM,CAAC,CAAC,CAAC;IAC3E,CAAC;IAES,UAAU,CAAC,IAAkB;QACrC,IAAI,SAAS,GAAG,KAAK,CAAC;QACtB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;YAClB,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,cAAc,EAAE,GAAG,EAAE;gBACnB,SAAS,GAAG,IAAI,CAAC;YACnB,CAAC;SACF,CAAC,CAAC;QACH,IAAI,CAAC,SAAS,IAAI,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC;YAAE,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC1F,CAAC;uGAjHU,QAAQ;2FAAR,QAAQ,2tBA9HT;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuHT,osFAxHS,KAAK,mTAAE,eAAe,0HAAE,UAAU,0TAAE,YAAY,4GAAE,IAAI,mYAAE,IAAI;;2FA+H3D,QAAQ;kBAjIpB,SAAS;+BACE,UAAU,WACX,CAAC,KAAK,EAAE,eAAe,EAAE,UAAU,EAAE,YAAY,EAAE,IAAI,EAAE,IAAI,CAAC,YAC7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuHT,QAEK;wBACJ,gBAAgB,EAAE,oBAAoB;wBACtC,oBAAoB,EAAE,wBAAwB;qBAC/C","sourcesContent":["/**\n * Markdown, drawn as native views and text.\n *\n * Its own entry point because it parses with `marked`, an optional peer dependency an app installs\n * only when it renders Markdown: the barrel never imports it, so an app that does not is not asked\n * for it.\n *\n * ```ts\n * import { Markdown } from '@ng-native/components/markdown';\n * ```\n */\nimport {\n  Component,\n  Injector,\n  booleanAttribute,\n  computed,\n  inject,\n  input,\n  linkedSignal,\n  output,\n} from '@angular/core';\nimport { DeepLinks } from '@ng-native/device';\nimport { nativePlatform } from '@ng-native/fabric';\nimport { lexer, type Token } from 'marked';\nimport type { ImageLoadEvent } from './events.ts';\nimport { Image } from './image.ts';\nimport {\n  blockKey,\n  markdownBlocks,\n  opensOnPress,\n  shareBlocks,\n  type MarkdownBlock,\n  type MarkdownElement,\n  type MarkdownInline,\n} from './markdown-blocks.ts';\nimport { MarkdownColumns } from './markdown-columns.ts';\nimport { MarkdownStream } from './markdown-stream.ts';\nimport { ScrollView } from './scroll-view.ts';\nimport { TemplateSlot } from './template-slot.ts';\nimport { Text } from './text.ts';\nimport { View } from './view.ts';\n\nexport type { MarkdownElement } from './markdown-blocks.ts';\n\n/** Classes for the elements a document is drawn with, each one in place of the default. */\nexport type MarkdownClasses = Partial<Readonly<Record<MarkdownElement, string>>>;\n\n/** `(linkPress)`: a link was pressed. */\nexport interface MarkdownLinkPress {\n  /** The target as written, after its entities are decoded and its scheme was allowed. */\n  readonly href: string;\n  readonly title: string | null;\n  /** Keep the link from being opened, to handle it in the app instead. */\n  preventDefault(): void;\n}\n\nconst ELEMENTS: readonly MarkdownElement[] = [\n  ...['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'blockquote', 'ul', 'ol', 'li', 'marker'],\n  ...['pre', 'code', 'strong', 'em', 'del', 'a', 'hr', 'img', 'table', 'tr', 'th', 'td'],\n] as MarkdownElement[];\n\nconst DEFAULT_CLASSES = Object.fromEntries(\n  ELEMENTS.map((element) => [element, `md-${element}`]),\n) as Readonly<Record<MarkdownElement, string>>;\n\ntype MarkdownLink = Extract<MarkdownInline, { kind: 'link' }>;\n\n/** Every image address in `blocks`, however deep in quotes and lists. */\nfunction imageSources(blocks: readonly MarkdownBlock[], into = new Set<string>()): Set<string> {\n  for (const block of blocks) {\n    if (block.kind === 'image') into.add(block.src);\n    else if (block.kind === 'blockquote') imageSources(block.children, into);\n    else if (block.kind === 'list') {\n      for (const item of block.items) imageSources(item.children, into);\n    }\n  }\n  return into;\n}\n\n/**\n * A Markdown document as `<text>`, `<view>`, `<image>` and `<scroll-view>`: headings, paragraphs,\n * emphasis, inline code, links, quotes, ordered, unordered and task lists, code blocks, rules,\n * tables and images.\n *\n * `source` is parsed with `marked.lexer`; `tokens` takes tokens lexed already, and wins when both\n * are set. A paragraph is one `<text>` with a nested `<text>` for each emphasis, code span and\n * link, so it wraps as one run; an image is lifted out to a block of its own.\n *\n * Nothing in the document is interpreted. Raw HTML is drawn as the text it is written as, a link\n * is followed only to `http`, `https`, `mailto`, `tel` or a relative target, and an image is\n * loaded only over `http` or `https`; anything else is drawn as its text.\n *\n * Each element carries a default class, `md-h1`, `md-p`, `md-a` and so on, styled in light and\n * dark. `classes` replaces one by its element's name, so a global stylesheet or Tailwind styles it\n * instead: `{ h1: 'text-3xl font-bold' }`. Put the default back beside your own to keep both.\n *\n * For a source that grows as it streams in, an answer arriving a few words at a time, set\n * `streaming` until it is complete. The blocks before the last one are then kept as they are and\n * only the last is lexed and converted again, unless a chunk defines or changes a link reference,\n * which can change a block already kept, and the whole source is lexed again. Syntax still open at its end, a code span, an emphasis, a link,\n * an image or a table row, is held back until it closes. Of a code fence only an unfinished\n * opening line is held back, and its code then streams as it arrives. Clearing `streaming` draws\n * the whole source as written, and `tokens` are always drawn as given. A block that did not\n * change keeps its views, streaming or not.\n *\n * A pressed link is `(linkPress)`. An absolute target is then opened with `DeepLinks.open` unless\n * a handler calls `preventDefault()`; a relative one is only reported, for the app to route.\n */\n@Component({\n  selector: 'markdown',\n  imports: [Image, MarkdownColumns, ScrollView, TemplateSlot, Text, View],\n  template: `\n    <ng-template #blockTemplate let-list>\n      @for (block of list; track blockKey(block)) {\n        @switch (block.kind) {\n          @case ('heading') {\n            <text [class]=\"classFor(block.element)\" accessibilityRole=\"header\"\n              ><ng-container *templateSlot=\"inlineTemplate; context: { $implicit: block.children }\"\n            /></text>\n          }\n          @case ('paragraph') {\n            <text [class]=\"classFor('p')\"\n              ><ng-container *templateSlot=\"inlineTemplate; context: { $implicit: block.children }\"\n            /></text>\n          }\n          @case ('image') {\n            <image\n              [src]=\"block.src\"\n              [alt]=\"block.alt || undefined\"\n              resizeMode=\"contain\"\n              [class]=\"classFor('img')\"\n              [style.aspectRatio]=\"ratios().get(block.src) ?? null\"\n              [style.height]=\"ratios().has(block.src) ? 'auto' : null\"\n              (load)=\"sizeImage(block.src, $any($event))\"\n            />\n          }\n          @case ('blockquote') {\n            <view [class]=\"classFor('blockquote')\">\n              <ng-container *templateSlot=\"blockTemplate; context: { $implicit: block.children }\" />\n            </view>\n          }\n          @case ('list') {\n            <view [class]=\"classFor(block.element)\">\n              @for (item of block.items; track $index) {\n                <view [class]=\"classFor('li')\">\n                  <text [class]=\"classFor('marker')\">{{ item.marker }}</text>\n                  <view class=\"md-li-body\">\n                    <ng-container\n                      *templateSlot=\"blockTemplate; context: { $implicit: item.children }\"\n                    />\n                  </view>\n                </view>\n              }\n            </view>\n          }\n          @case ('code') {\n            <scroll-view horizontal [class]=\"classFor('pre')\">\n              <text selectable class=\"md-pre-text\">{{ block.text }}</text>\n            </scroll-view>\n          }\n          @case ('hr') {\n            <view [class]=\"classFor('hr')\"></view>\n          }\n          @case ('table') {\n            <scroll-view horizontal>\n              <view\n                [class]=\"classFor('table')\"\n                [markdownColumns]=\"block\"\n                #columns=\"markdownColumns\"\n              >\n                <view [class]=\"classFor('tr')\">\n                  @for (cell of block.header; track $index; let column = $index) {\n                    <view class=\"md-cell\" [style.minWidth]=\"columns.width(column)\">\n                      <text\n                        [class]=\"classFor('th')\"\n                        (layout)=\"columns.measure(0, column, $any($event))\"\n                        ><ng-container *templateSlot=\"inlineTemplate; context: { $implicit: cell }\"\n                      /></text>\n                    </view>\n                  }\n                </view>\n                @for (row of block.rows; track $index; let r = $index) {\n                  <view [class]=\"classFor('tr')\">\n                    @for (cell of row; track $index; let column = $index) {\n                      <view class=\"md-cell md-cell-body\" [style.minWidth]=\"columns.width(column)\">\n                        <text\n                          [class]=\"classFor('td')\"\n                          (layout)=\"columns.measure(r + 1, column, $any($event))\"\n                          ><ng-container\n                            *templateSlot=\"inlineTemplate; context: { $implicit: cell }\"\n                        /></text>\n                      </view>\n                    }\n                  </view>\n                }\n              </view>\n            </scroll-view>\n          }\n        }\n      }\n    </ng-template>\n\n    <ng-template #inlineTemplate let-runs>\n      @for (run of runs; track $index) {\n        @switch (run.kind) {\n          @case ('text') {\n            <ng-container>{{ run.text }}</ng-container>\n          }\n          @case ('code') {\n            <text [class]=\"classFor('code')\">{{ run.text }}</text>\n          }\n          @case ('link') {\n            <text\n              [class]=\"classFor('a')\"\n              pressable\n              [accessibilityHint]=\"run.title ?? undefined\"\n              (press)=\"followLink(run)\"\n              ><ng-container *templateSlot=\"inlineTemplate; context: { $implicit: run.children }\"\n            /></text>\n          }\n          @default {\n            <text [class]=\"classFor(run.kind)\"\n              ><ng-container *templateSlot=\"inlineTemplate; context: { $implicit: run.children }\"\n            /></text>\n          }\n        }\n      }\n    </ng-template>\n\n    <ng-container *templateSlot=\"blockTemplate; context: { $implicit: blocks() }\" />\n  `,\n  styleUrl: './markdown.css',\n  host: {\n    '[class.md-ios]': \"platform === 'ios'\",\n    '[class.md-android]': \"platform === 'android'\",\n  },\n})\nexport class Markdown {\n  private readonly injector = inject(Injector);\n  /** Which monospace font code is drawn in, as the platform names it. */\n  protected readonly platform = nativePlatform();\n\n  /** The Markdown to draw. */\n  readonly source = input<string>();\n  /** Tokens `marked.lexer` made already, drawn in place of `source`. */\n  readonly tokens = input<readonly Token[]>();\n  /**\n   * Whether `source` is still arriving, a chunk at a time. While it is, only its last block is\n   * lexed again, unless a link reference changes, and syntax still open at its end is held back.\n   * See the class note.\n   */\n  readonly streaming = input(false, { transform: booleanAttribute });\n  /** A class for an element, in place of its default. See the class note. */\n  readonly classes = input<MarkdownClasses>({});\n  /** A link was pressed. See the class note. */\n  readonly linkPress = output<MarkdownLinkPress>();\n\n  private readonly stream = new MarkdownStream();\n  protected readonly blockKey = blockKey;\n\n  /**\n   * The blocks each token the stream kept was drawn as. A kept token is the same object from one\n   * chunk to the next, so its blocks are not converted or compared again; a source lexed whole\n   * makes new tokens, and so new blocks.\n   */\n  private readonly streamed = new WeakMap<Token, readonly MarkdownBlock[]>();\n\n  /** The document's blocks, with each one that did not change kept, so it is not drawn again. */\n  protected readonly blocks = linkedSignal({\n    source: () => {\n      const tokens = this.tokens();\n      if (tokens) return { tokens, streamed: false };\n      const streamed = this.streaming();\n      return { tokens: this.lex(this.source() ?? '', streamed), streamed };\n    },\n    computation: ({ tokens, streamed }, previous?: { value: readonly MarkdownBlock[] }) =>\n      streamed\n        ? this.streamedBlocks(tokens, previous?.value)\n        : shareBlocks(previous?.value, markdownBlocks(tokens)),\n  });\n\n  private readonly classOf = computed(() => ({ ...DEFAULT_CLASSES, ...this.classes() }));\n\n  /**\n   * Each image's width over its height, once it has loaded, so it is drawn at the page's width and\n   * its own shape. An image the document no longer has is forgotten when the document changes.\n   */\n  protected readonly ratios = linkedSignal<readonly MarkdownBlock[], ReadonlyMap<string, number>>({\n    source: this.blocks,\n    computation: (blocks, previous) => {\n      const kept = new Map<string, number>();\n      if (!previous) return kept;\n      const present = imageSources(blocks);\n      for (const [src, ratio] of previous.value) if (present.has(src)) kept.set(src, ratio);\n      return kept;\n    },\n  });\n\n  private lex(source: string, streaming: boolean): readonly Token[] {\n    return streaming ? this.stream.lex(source) : lexer(source);\n  }\n\n  /** `tokens`' blocks, converting and sharing only those of tokens the stream had not kept. */\n  private streamedBlocks(\n    tokens: readonly Token[],\n    previous: readonly MarkdownBlock[] | undefined,\n  ): readonly MarkdownBlock[] {\n    const kept: MarkdownBlock[] = [];\n    let at = 0;\n    for (; at < tokens.length; at++) {\n      const blocks = this.streamed.get(tokens[at]!);\n      if (!blocks) break;\n      kept.push(...blocks);\n    }\n    const rest = tokens.slice(at);\n    const converted = rest.map((token) => markdownBlocks([token]));\n    // The blocks drawn after the kept ones, when those are still the ones drawn first.\n    const drawn = !kept.length || previous?.[kept.length - 1] === kept.at(-1);\n    const was = drawn ? previous?.slice(kept.length) : undefined;\n    const shared = shareBlocks(was, converted.flat());\n    let from = 0;\n    rest.forEach((token, i) => {\n      const count = converted[i]!.length;\n      this.streamed.set(token, shared.slice(from, (from += count)));\n    });\n    return [...kept, ...shared];\n  }\n\n  protected classFor(element: MarkdownElement): string {\n    return this.classOf()[element];\n  }\n\n  protected sizeImage(src: string, event: Partial<ImageLoadEvent>): void {\n    const source = event.nativeEvent?.source;\n    if (!source) return;\n    const { width, height } = source;\n    if (!(width > 0 && height > 0)) return;\n    this.ratios.update((ratios) => new Map(ratios).set(src, width / height));\n  }\n\n  protected followLink(link: MarkdownLink): void {\n    let prevented = false;\n    this.linkPress.emit({\n      href: link.href,\n      title: link.title,\n      preventDefault: () => {\n        prevented = true;\n      },\n    });\n    if (!prevented && opensOnPress(link.href)) this.injector.get(DeepLinks).open(link.href);\n  }\n}\n"]}

package/dist/text-input.d.ts

@@ -74,6 +74,11 @@ export declare class TextInput extends ViewBase {
     readonly maxLength: import("@angular/core").InputSignalWithTransform<number | undefined, unknown>;
     /** Android: the height of a multiline field, in lines. */
     readonly numberOfLines: import("@angular/core").InputSignalWithTransform<number | undefined, unknown>;
+    /**
+     * How many lines of its `line-height` a multiline field is tall, where nothing sets its height,
+     * as a `<textarea rows>` is. Read by the engine, which sizes the field; never sent to native.
+     */
+    readonly rows: import("@angular/core").InputSignalWithTransform<number | undefined, unknown>;
     /** The selected range, or the caret when `start` equals `end`. */
     readonly selection: import("@angular/core").InputSignal<{
         readonly start: number;
@@ -164,5 +169,5 @@ export declare class TextInput extends ViewBase {
     isFocused(): boolean;
     protected onNativeChange(event: NativeSyntheticEvent<Partial<TextInputChangePayload>>): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<TextInput, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<TextInput, "text-input", ["textInput"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "multiline": { "alias": "multiline"; "required": false; "isSignal": true; }; "scrollEnabled": { "alias": "scrollEnabled"; "required": false; "isSignal": true; }; "editable": { "alias": "editable"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "placeholderTextColor": { "alias": "placeholderTextColor"; "required": false; "isSignal": true; }; "keyboardType": { "alias": "keyboardType"; "required": false; "isSignal": true; }; "returnKeyType": { "alias": "returnKeyType"; "required": false; "isSignal": true; }; "submitBehavior": { "alias": "submitBehavior"; "required": false; "isSignal": true; }; "secureTextEntry": { "alias": "secureTextEntry"; "required": false; "isSignal": true; }; "autoCapitalize": { "alias": "autoCapitalize"; "required": false; "isSignal": true; }; "autoCorrect": { "alias": "autoCorrect"; "required": false; "isSignal": true; }; "autoFocus": { "alias": "autoFocus"; "required": false; "isSignal": true; }; "maxLength": { "alias": "maxLength"; "required": false; "isSignal": true; }; "numberOfLines": { "alias": "numberOfLines"; "required": false; "isSignal": true; }; "selection": { "alias": "selection"; "required": false; "isSignal": true; }; "selectionColor": { "alias": "selectionColor"; "required": false; "isSignal": true; }; "selectTextOnFocus": { "alias": "selectTextOnFocus"; "required": false; "isSignal": true; }; "caretHidden": { "alias": "caretHidden"; "required": false; "isSignal": true; }; "contextMenuHidden": { "alias": "contextMenuHidden"; "required": false; "isSignal": true; }; "textAlign": { "alias": "textAlign"; "required": false; "isSignal": true; }; "allowFontScaling": { "alias": "allowFontScaling"; "required": false; "isSignal": true; }; "maxFontSizeMultiplier": { "alias": "maxFontSizeMultiplier"; "required": false; "isSignal": true; }; "inputAccessoryViewID": { "alias": "inputAccessoryViewID"; "required": false; "isSignal": true; }; "clearButtonMode": { "alias": "clearButtonMode"; "required": false; "isSignal": true; }; "clearTextOnFocus": { "alias": "clearTextOnFocus"; "required": false; "isSignal": true; }; "enablesReturnKeyAutomatically": { "alias": "enablesReturnKeyAutomatically"; "required": false; "isSignal": true; }; "keyboardAppearance": { "alias": "keyboardAppearance"; "required": false; "isSignal": true; }; "passwordRules": { "alias": "passwordRules"; "required": false; "isSignal": true; }; "spellCheck": { "alias": "spellCheck"; "required": false; "isSignal": true; }; "smartInsertDelete": { "alias": "smartInsertDelete"; "required": false; "isSignal": true; }; "dataDetectorTypes": { "alias": "dataDetectorTypes"; "required": false; "isSignal": true; }; "textContentType": { "alias": "textContentType"; "required": false; "isSignal": true; }; "autoComplete": { "alias": "autoComplete"; "required": false; "isSignal": true; }; "underlineColorAndroid": { "alias": "underlineColorAndroid"; "required": false; "isSignal": true; }; "cursorColor": { "alias": "cursorColor"; "required": false; "isSignal": true; }; "selectionHandleColor": { "alias": "selectionHandleColor"; "required": false; "isSignal": true; }; "textAlignVertical": { "alias": "textAlignVertical"; "required": false; "isSignal": true; }; "importantForAutofill": { "alias": "importantForAutofill"; "required": false; "isSignal": true; }; "showSoftInputOnFocus": { "alias": "showSoftInputOnFocus"; "required": false; "isSignal": true; }; "disableFullscreenUI": { "alias": "disableFullscreenUI"; "required": false; "isSignal": true; }; "inlineImageLeft": { "alias": "inlineImageLeft"; "required": false; "isSignal": true; }; "inlineImagePadding": { "alias": "inlineImagePadding"; "required": false; "isSignal": true; }; "textBreakStrategy": { "alias": "textBreakStrategy"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "changeText": "changeText"; "touch": "touch"; }, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TextInput, "text-input", ["textInput"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "multiline": { "alias": "multiline"; "required": false; "isSignal": true; }; "scrollEnabled": { "alias": "scrollEnabled"; "required": false; "isSignal": true; }; "editable": { "alias": "editable"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "placeholderTextColor": { "alias": "placeholderTextColor"; "required": false; "isSignal": true; }; "keyboardType": { "alias": "keyboardType"; "required": false; "isSignal": true; }; "returnKeyType": { "alias": "returnKeyType"; "required": false; "isSignal": true; }; "submitBehavior": { "alias": "submitBehavior"; "required": false; "isSignal": true; }; "secureTextEntry": { "alias": "secureTextEntry"; "required": false; "isSignal": true; }; "autoCapitalize": { "alias": "autoCapitalize"; "required": false; "isSignal": true; }; "autoCorrect": { "alias": "autoCorrect"; "required": false; "isSignal": true; }; "autoFocus": { "alias": "autoFocus"; "required": false; "isSignal": true; }; "maxLength": { "alias": "maxLength"; "required": false; "isSignal": true; }; "numberOfLines": { "alias": "numberOfLines"; "required": false; "isSignal": true; }; "rows": { "alias": "rows"; "required": false; "isSignal": true; }; "selection": { "alias": "selection"; "required": false; "isSignal": true; }; "selectionColor": { "alias": "selectionColor"; "required": false; "isSignal": true; }; "selectTextOnFocus": { "alias": "selectTextOnFocus"; "required": false; "isSignal": true; }; "caretHidden": { "alias": "caretHidden"; "required": false; "isSignal": true; }; "contextMenuHidden": { "alias": "contextMenuHidden"; "required": false; "isSignal": true; }; "textAlign": { "alias": "textAlign"; "required": false; "isSignal": true; }; "allowFontScaling": { "alias": "allowFontScaling"; "required": false; "isSignal": true; }; "maxFontSizeMultiplier": { "alias": "maxFontSizeMultiplier"; "required": false; "isSignal": true; }; "inputAccessoryViewID": { "alias": "inputAccessoryViewID"; "required": false; "isSignal": true; }; "clearButtonMode": { "alias": "clearButtonMode"; "required": false; "isSignal": true; }; "clearTextOnFocus": { "alias": "clearTextOnFocus"; "required": false; "isSignal": true; }; "enablesReturnKeyAutomatically": { "alias": "enablesReturnKeyAutomatically"; "required": false; "isSignal": true; }; "keyboardAppearance": { "alias": "keyboardAppearance"; "required": false; "isSignal": true; }; "passwordRules": { "alias": "passwordRules"; "required": false; "isSignal": true; }; "spellCheck": { "alias": "spellCheck"; "required": false; "isSignal": true; }; "smartInsertDelete": { "alias": "smartInsertDelete"; "required": false; "isSignal": true; }; "dataDetectorTypes": { "alias": "dataDetectorTypes"; "required": false; "isSignal": true; }; "textContentType": { "alias": "textContentType"; "required": false; "isSignal": true; }; "autoComplete": { "alias": "autoComplete"; "required": false; "isSignal": true; }; "underlineColorAndroid": { "alias": "underlineColorAndroid"; "required": false; "isSignal": true; }; "cursorColor": { "alias": "cursorColor"; "required": false; "isSignal": true; }; "selectionHandleColor": { "alias": "selectionHandleColor"; "required": false; "isSignal": true; }; "textAlignVertical": { "alias": "textAlignVertical"; "required": false; "isSignal": true; }; "importantForAutofill": { "alias": "importantForAutofill"; "required": false; "isSignal": true; }; "showSoftInputOnFocus": { "alias": "showSoftInputOnFocus"; "required": false; "isSignal": true; }; "disableFullscreenUI": { "alias": "disableFullscreenUI"; "required": false; "isSignal": true; }; "inlineImageLeft": { "alias": "inlineImageLeft"; "required": false; "isSignal": true; }; "inlineImagePadding": { "alias": "inlineImagePadding"; "required": false; "isSignal": true; }; "textBreakStrategy": { "alias": "textBreakStrategy"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "changeText": "changeText"; "touch": "touch"; }, never, never, true, never>;
 }

package/dist/text-input.js

@@ -79,6 +79,11 @@ export class TextInput extends ViewBase {
     maxLength = input(undefined, { ...(ngDevMode ? { debugName: "maxLength" } : /* istanbul ignore next */ {}), transform: optionalNumber });
     /** Android: the height of a multiline field, in lines. */
     numberOfLines = input(undefined, { ...(ngDevMode ? { debugName: "numberOfLines" } : /* istanbul ignore next */ {}), transform: optionalNumber });
+    /**
+     * How many lines of its `line-height` a multiline field is tall, where nothing sets its height,
+     * as a `<textarea rows>` is. Read by the engine, which sizes the field; never sent to native.
+     */
+    rows = input(undefined, { ...(ngDevMode ? { debugName: "rows" } : /* istanbul ignore next */ {}), transform: optionalNumber });
     /** The selected range, or the caret when `start` equals `end`. */
     selection = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "selection" }] : /* istanbul ignore next */ []));
@@ -244,7 +249,7 @@ export class TextInput extends ViewBase {
         this.changeText.emit(text);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: TextInput, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.2.0", type: TextInput, isStandalone: true, selector: "text-input", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, multiline: { classPropertyName: "multiline", publicName: "multiline", isSignal: true, isRequired: false, transformFunction: null }, scrollEnabled: { classPropertyName: "scrollEnabled", publicName: "scrollEnabled", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, placeholderTextColor: { classPropertyName: "placeholderTextColor", publicName: "placeholderTextColor", isSignal: true, isRequired: false, transformFunction: null }, keyboardType: { classPropertyName: "keyboardType", publicName: "keyboardType", isSignal: true, isRequired: false, transformFunction: null }, returnKeyType: { classPropertyName: "returnKeyType", publicName: "returnKeyType", isSignal: true, isRequired: false, transformFunction: null }, submitBehavior: { classPropertyName: "submitBehavior", publicName: "submitBehavior", isSignal: true, isRequired: false, transformFunction: null }, secureTextEntry: { classPropertyName: "secureTextEntry", publicName: "secureTextEntry", isSignal: true, isRequired: false, transformFunction: null }, autoCapitalize: { classPropertyName: "autoCapitalize", publicName: "autoCapitalize", isSignal: true, isRequired: false, transformFunction: null }, autoCorrect: { classPropertyName: "autoCorrect", publicName: "autoCorrect", isSignal: true, isRequired: false, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, numberOfLines: { classPropertyName: "numberOfLines", publicName: "numberOfLines", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, selectionColor: { classPropertyName: "selectionColor", publicName: "selectionColor", isSignal: true, isRequired: false, transformFunction: null }, selectTextOnFocus: { classPropertyName: "selectTextOnFocus", publicName: "selectTextOnFocus", isSignal: true, isRequired: false, transformFunction: null }, caretHidden: { classPropertyName: "caretHidden", publicName: "caretHidden", isSignal: true, isRequired: false, transformFunction: null }, contextMenuHidden: { classPropertyName: "contextMenuHidden", publicName: "contextMenuHidden", isSignal: true, isRequired: false, transformFunction: null }, textAlign: { classPropertyName: "textAlign", publicName: "textAlign", isSignal: true, isRequired: false, transformFunction: null }, allowFontScaling: { classPropertyName: "allowFontScaling", publicName: "allowFontScaling", isSignal: true, isRequired: false, transformFunction: null }, maxFontSizeMultiplier: { classPropertyName: "maxFontSizeMultiplier", publicName: "maxFontSizeMultiplier", isSignal: true, isRequired: false, transformFunction: null }, inputAccessoryViewID: { classPropertyName: "inputAccessoryViewID", publicName: "inputAccessoryViewID", isSignal: true, isRequired: false, transformFunction: null }, clearButtonMode: { classPropertyName: "clearButtonMode", publicName: "clearButtonMode", isSignal: true, isRequired: false, transformFunction: null }, clearTextOnFocus: { classPropertyName: "clearTextOnFocus", publicName: "clearTextOnFocus", isSignal: true, isRequired: false, transformFunction: null }, enablesReturnKeyAutomatically: { classPropertyName: "enablesReturnKeyAutomatically", publicName: "enablesReturnKeyAutomatically", isSignal: true, isRequired: false, transformFunction: null }, keyboardAppearance: { classPropertyName: "keyboardAppearance", publicName: "keyboardAppearance", isSignal: true, isRequired: false, transformFunction: null }, passwordRules: { classPropertyName: "passwordRules", publicName: "passwordRules", isSignal: true, isRequired: false, transformFunction: null }, spellCheck: { classPropertyName: "spellCheck", publicName: "spellCheck", isSignal: true, isRequired: false, transformFunction: null }, smartInsertDelete: { classPropertyName: "smartInsertDelete", publicName: "smartInsertDelete", isSignal: true, isRequired: false, transformFunction: null }, dataDetectorTypes: { classPropertyName: "dataDetectorTypes", publicName: "dataDetectorTypes", isSignal: true, isRequired: false, transformFunction: null }, textContentType: { classPropertyName: "textContentType", publicName: "textContentType", isSignal: true, isRequired: false, transformFunction: null }, autoComplete: { classPropertyName: "autoComplete", publicName: "autoComplete", isSignal: true, isRequired: false, transformFunction: null }, underlineColorAndroid: { classPropertyName: "underlineColorAndroid", publicName: "underlineColorAndroid", isSignal: true, isRequired: false, transformFunction: null }, cursorColor: { classPropertyName: "cursorColor", publicName: "cursorColor", isSignal: true, isRequired: false, transformFunction: null }, selectionHandleColor: { classPropertyName: "selectionHandleColor", publicName: "selectionHandleColor", isSignal: true, isRequired: false, transformFunction: null }, textAlignVertical: { classPropertyName: "textAlignVertical", publicName: "textAlignVertical", isSignal: true, isRequired: false, transformFunction: null }, importantForAutofill: { classPropertyName: "importantForAutofill", publicName: "importantForAutofill", isSignal: true, isRequired: false, transformFunction: null }, showSoftInputOnFocus: { classPropertyName: "showSoftInputOnFocus", publicName: "showSoftInputOnFocus", isSignal: true, isRequired: false, transformFunction: null }, disableFullscreenUI: { classPropertyName: "disableFullscreenUI", publicName: "disableFullscreenUI", isSignal: true, isRequired: false, transformFunction: null }, inlineImageLeft: { classPropertyName: "inlineImageLeft", publicName: "inlineImageLeft", isSignal: true, isRequired: false, transformFunction: null }, inlineImagePadding: { classPropertyName: "inlineImagePadding", publicName: "inlineImagePadding", isSignal: true, isRequired: false, transformFunction: null }, textBreakStrategy: { classPropertyName: "textBreakStrategy", publicName: "textBreakStrategy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", changeText: "changeText", touch: "touch" }, host: { listeners: { "blur": "touch.emit()", "focus": "onFocus()", "change": "onNativeChange($event)" }, properties: { "text": "value()", "mostRecentEventCount": "eventCount()", "multiline": "multiline()", "scrollEnabled": "scrollEnabled()", "editable": "resolvedEditable()", "accessibilityState": "accessibilityStateProp()", "attr.data-disabled": "disabled() ? '' : null", "attr.data-invalid": "invalid() ? '' : null", "attr.data-touched": "touched() ? '' : null", "placeholder": "placeholder()", "placeholderTextColor": "placeholderTextColor()", "keyboardType": "keyboardType()", "returnKeyType": "returnKeyType()", "submitBehavior": "resolvedSubmitBehavior()", "secureTextEntry": "secureTextEntry()", "autoCapitalize": "autoCapitalize()", "autoCorrect": "autoCorrect()", "autoFocus": "autoFocus()", "maxLength": "maxLength()", "numberOfLines": "numberOfLines()", "selection": "selection()", "selectionColor": "selectionColor()", "selectTextOnFocus": "selectTextOnFocus()", "caretHidden": "caretHidden()", "contextMenuHidden": "contextMenuHidden()", "textAlign": "textAlign()", "allowFontScaling": "allowFontScaling()", "maxFontSizeMultiplier": "maxFontSizeMultiplier()", "inputAccessoryViewID": "inputAccessoryViewID()", "clearButtonMode": "clearButtonMode()", "clearTextOnFocus": "clearTextOnFocus()", "enablesReturnKeyAutomatically": "enablesReturnKeyAutomatically()", "keyboardAppearance": "keyboardAppearance()", "passwordRules": "passwordRules()", "spellCheck": "spellCheck()", "smartInsertDelete": "smartInsertDelete()", "dataDetectorTypes": "dataDetectorTypes()", "textContentType": "textContentType()", "autoComplete": "autoComplete()", "underlineColorAndroid": "underlineColorAndroid()", "cursorColor": "cursorColor()", "selectionHandleColor": "selectionHandleColor()", "textAlignVertical": "textAlignVertical()", "importantForAutofill": "importantForAutofill()", "showSoftInputOnFocus": "showSoftInputOnFocus()", "disableFullscreenUI": "disableFullscreenUI()", "inlineImageLeft": "inlineImageLeft()", "inlineImagePadding": "inlineImagePadding()", "textBreakStrategy": "textBreakStrategy()" } }, exportAs: ["textInput"], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.2.0", type: TextInput, isStandalone: true, selector: "text-input", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, multiline: { classPropertyName: "multiline", publicName: "multiline", isSignal: true, isRequired: false, transformFunction: null }, scrollEnabled: { classPropertyName: "scrollEnabled", publicName: "scrollEnabled", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, placeholderTextColor: { classPropertyName: "placeholderTextColor", publicName: "placeholderTextColor", isSignal: true, isRequired: false, transformFunction: null }, keyboardType: { classPropertyName: "keyboardType", publicName: "keyboardType", isSignal: true, isRequired: false, transformFunction: null }, returnKeyType: { classPropertyName: "returnKeyType", publicName: "returnKeyType", isSignal: true, isRequired: false, transformFunction: null }, submitBehavior: { classPropertyName: "submitBehavior", publicName: "submitBehavior", isSignal: true, isRequired: false, transformFunction: null }, secureTextEntry: { classPropertyName: "secureTextEntry", publicName: "secureTextEntry", isSignal: true, isRequired: false, transformFunction: null }, autoCapitalize: { classPropertyName: "autoCapitalize", publicName: "autoCapitalize", isSignal: true, isRequired: false, transformFunction: null }, autoCorrect: { classPropertyName: "autoCorrect", publicName: "autoCorrect", isSignal: true, isRequired: false, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, numberOfLines: { classPropertyName: "numberOfLines", publicName: "numberOfLines", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, selectionColor: { classPropertyName: "selectionColor", publicName: "selectionColor", isSignal: true, isRequired: false, transformFunction: null }, selectTextOnFocus: { classPropertyName: "selectTextOnFocus", publicName: "selectTextOnFocus", isSignal: true, isRequired: false, transformFunction: null }, caretHidden: { classPropertyName: "caretHidden", publicName: "caretHidden", isSignal: true, isRequired: false, transformFunction: null }, contextMenuHidden: { classPropertyName: "contextMenuHidden", publicName: "contextMenuHidden", isSignal: true, isRequired: false, transformFunction: null }, textAlign: { classPropertyName: "textAlign", publicName: "textAlign", isSignal: true, isRequired: false, transformFunction: null }, allowFontScaling: { classPropertyName: "allowFontScaling", publicName: "allowFontScaling", isSignal: true, isRequired: false, transformFunction: null }, maxFontSizeMultiplier: { classPropertyName: "maxFontSizeMultiplier", publicName: "maxFontSizeMultiplier", isSignal: true, isRequired: false, transformFunction: null }, inputAccessoryViewID: { classPropertyName: "inputAccessoryViewID", publicName: "inputAccessoryViewID", isSignal: true, isRequired: false, transformFunction: null }, clearButtonMode: { classPropertyName: "clearButtonMode", publicName: "clearButtonMode", isSignal: true, isRequired: false, transformFunction: null }, clearTextOnFocus: { classPropertyName: "clearTextOnFocus", publicName: "clearTextOnFocus", isSignal: true, isRequired: false, transformFunction: null }, enablesReturnKeyAutomatically: { classPropertyName: "enablesReturnKeyAutomatically", publicName: "enablesReturnKeyAutomatically", isSignal: true, isRequired: false, transformFunction: null }, keyboardAppearance: { classPropertyName: "keyboardAppearance", publicName: "keyboardAppearance", isSignal: true, isRequired: false, transformFunction: null }, passwordRules: { classPropertyName: "passwordRules", publicName: "passwordRules", isSignal: true, isRequired: false, transformFunction: null }, spellCheck: { classPropertyName: "spellCheck", publicName: "spellCheck", isSignal: true, isRequired: false, transformFunction: null }, smartInsertDelete: { classPropertyName: "smartInsertDelete", publicName: "smartInsertDelete", isSignal: true, isRequired: false, transformFunction: null }, dataDetectorTypes: { classPropertyName: "dataDetectorTypes", publicName: "dataDetectorTypes", isSignal: true, isRequired: false, transformFunction: null }, textContentType: { classPropertyName: "textContentType", publicName: "textContentType", isSignal: true, isRequired: false, transformFunction: null }, autoComplete: { classPropertyName: "autoComplete", publicName: "autoComplete", isSignal: true, isRequired: false, transformFunction: null }, underlineColorAndroid: { classPropertyName: "underlineColorAndroid", publicName: "underlineColorAndroid", isSignal: true, isRequired: false, transformFunction: null }, cursorColor: { classPropertyName: "cursorColor", publicName: "cursorColor", isSignal: true, isRequired: false, transformFunction: null }, selectionHandleColor: { classPropertyName: "selectionHandleColor", publicName: "selectionHandleColor", isSignal: true, isRequired: false, transformFunction: null }, textAlignVertical: { classPropertyName: "textAlignVertical", publicName: "textAlignVertical", isSignal: true, isRequired: false, transformFunction: null }, importantForAutofill: { classPropertyName: "importantForAutofill", publicName: "importantForAutofill", isSignal: true, isRequired: false, transformFunction: null }, showSoftInputOnFocus: { classPropertyName: "showSoftInputOnFocus", publicName: "showSoftInputOnFocus", isSignal: true, isRequired: false, transformFunction: null }, disableFullscreenUI: { classPropertyName: "disableFullscreenUI", publicName: "disableFullscreenUI", isSignal: true, isRequired: false, transformFunction: null }, inlineImageLeft: { classPropertyName: "inlineImageLeft", publicName: "inlineImageLeft", isSignal: true, isRequired: false, transformFunction: null }, inlineImagePadding: { classPropertyName: "inlineImagePadding", publicName: "inlineImagePadding", isSignal: true, isRequired: false, transformFunction: null }, textBreakStrategy: { classPropertyName: "textBreakStrategy", publicName: "textBreakStrategy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", changeText: "changeText", touch: "touch" }, host: { listeners: { "blur": "touch.emit()", "focus": "onFocus()", "change": "onNativeChange($event)" }, properties: { "text": "value()", "mostRecentEventCount": "eventCount()", "multiline": "multiline()", "scrollEnabled": "scrollEnabled()", "editable": "resolvedEditable()", "accessibilityState": "accessibilityStateProp()", "attr.data-disabled": "disabled() ? '' : null", "attr.data-invalid": "invalid() ? '' : null", "attr.data-touched": "touched() ? '' : null", "placeholder": "placeholder()", "placeholderTextColor": "placeholderTextColor()", "keyboardType": "keyboardType()", "returnKeyType": "returnKeyType()", "submitBehavior": "resolvedSubmitBehavior()", "secureTextEntry": "secureTextEntry()", "autoCapitalize": "autoCapitalize()", "autoCorrect": "autoCorrect()", "autoFocus": "autoFocus()", "maxLength": "maxLength()", "numberOfLines": "numberOfLines()", "rows": "rows()", "selection": "selection()", "selectionColor": "selectionColor()", "selectTextOnFocus": "selectTextOnFocus()", "caretHidden": "caretHidden()", "contextMenuHidden": "contextMenuHidden()", "textAlign": "textAlign()", "allowFontScaling": "allowFontScaling()", "maxFontSizeMultiplier": "maxFontSizeMultiplier()", "inputAccessoryViewID": "inputAccessoryViewID()", "clearButtonMode": "clearButtonMode()", "clearTextOnFocus": "clearTextOnFocus()", "enablesReturnKeyAutomatically": "enablesReturnKeyAutomatically()", "keyboardAppearance": "keyboardAppearance()", "passwordRules": "passwordRules()", "spellCheck": "spellCheck()", "smartInsertDelete": "smartInsertDelete()", "dataDetectorTypes": "dataDetectorTypes()", "textContentType": "textContentType()", "autoComplete": "autoComplete()", "underlineColorAndroid": "underlineColorAndroid()", "cursorColor": "cursorColor()", "selectionHandleColor": "selectionHandleColor()", "textAlignVertical": "textAlignVertical()", "importantForAutofill": "importantForAutofill()", "showSoftInputOnFocus": "showSoftInputOnFocus()", "disableFullscreenUI": "disableFullscreenUI()", "inlineImageLeft": "inlineImageLeft()", "inlineImagePadding": "inlineImagePadding()", "textBreakStrategy": "textBreakStrategy()" } }, exportAs: ["textInput"], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: TextInput, decorators: [{
             type: Directive,
@@ -276,6 +281,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImpor
                         '[autoFocus]': 'autoFocus()',
                         '[maxLength]': 'maxLength()',
                         '[numberOfLines]': 'numberOfLines()',
+                        '[rows]': 'rows()',
                         '[selection]': 'selection()',
                         '[selectionColor]': 'selectionColor()',
                         '[selectTextOnFocus]': 'selectTextOnFocus()',
@@ -308,5 +314,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImpor
                         '(change)': 'onNativeChange($event)',
                     },
                 }]
-        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], changeText: [{ type: i0.Output, args: ["changeText"] }], touch: [{ type: i0.Output, args: ["touch"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], multiline: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiline", required: false }] }], scrollEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollEnabled", required: false }] }], editable: [{ type: i0.Input, args: [{ isSignal: true, alias: "editable", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], placeholderTextColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholderTextColor", required: false }] }], keyboardType: [{ type: i0.Input, args: [{ isSignal: true, alias: "keyboardType", required: false }] }], returnKeyType: [{ type: i0.Input, args: [{ isSignal: true, alias: "returnKeyType", required: false }] }], submitBehavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "submitBehavior", required: false }] }], secureTextEntry: [{ type: i0.Input, args: [{ isSignal: true, alias: "secureTextEntry", required: false }] }], autoCapitalize: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoCapitalize", required: false }] }], autoCorrect: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoCorrect", required: false }] }], autoFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoFocus", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], numberOfLines: [{ type: i0.Input, args: [{ isSignal: true, alias: "numberOfLines", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }], selectionColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionColor", required: false }] }], selectTextOnFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectTextOnFocus", required: false }] }], caretHidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "caretHidden", required: false }] }], contextMenuHidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "contextMenuHidden", required: false }] }], textAlign: [{ type: i0.Input, args: [{ isSignal: true, alias: "textAlign", required: false }] }], allowFontScaling: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowFontScaling", required: false }] }], maxFontSizeMultiplier: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFontSizeMultiplier", required: false }] }], inputAccessoryViewID: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputAccessoryViewID", required: false }] }], clearButtonMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearButtonMode", required: false }] }], clearTextOnFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearTextOnFocus", required: false }] }], enablesReturnKeyAutomatically: [{ type: i0.Input, args: [{ isSignal: true, alias: "enablesReturnKeyAutomatically", required: false }] }], keyboardAppearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "keyboardAppearance", required: false }] }], passwordRules: [{ type: i0.Input, args: [{ isSignal: true, alias: "passwordRules", required: false }] }], spellCheck: [{ type: i0.Input, args: [{ isSignal: true, alias: "spellCheck", required: false }] }], smartInsertDelete: [{ type: i0.Input, args: [{ isSignal: true, alias: "smartInsertDelete", required: false }] }], dataDetectorTypes: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataDetectorTypes", required: false }] }], textContentType: [{ type: i0.Input, args: [{ isSignal: true, alias: "textContentType", required: false }] }], autoComplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoComplete", required: false }] }], underlineColorAndroid: [{ type: i0.Input, args: [{ isSignal: true, alias: "underlineColorAndroid", required: false }] }], cursorColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "cursorColor", required: false }] }], selectionHandleColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionHandleColor", required: false }] }], textAlignVertical: [{ type: i0.Input, args: [{ isSignal: true, alias: "textAlignVertical", required: false }] }], importantForAutofill: [{ type: i0.Input, args: [{ isSignal: true, alias: "importantForAutofill", required: false }] }], showSoftInputOnFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSoftInputOnFocus", required: false }] }], disableFullscreenUI: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableFullscreenUI", required: false }] }], inlineImageLeft: [{ type: i0.Input, args: [{ isSignal: true, alias: "inlineImageLeft", required: false }] }], inlineImagePadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "inlineImagePadding", required: false }] }], textBreakStrategy: [{ type: i0.Input, args: [{ isSignal: true, alias: "textBreakStrategy", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], changeText: [{ type: i0.Output, args: ["changeText"] }], touch: [{ type: i0.Output, args: ["touch"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], multiline: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiline", required: false }] }], scrollEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollEnabled", required: false }] }], editable: [{ type: i0.Input, args: [{ isSignal: true, alias: "editable", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], placeholderTextColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholderTextColor", required: false }] }], keyboardType: [{ type: i0.Input, args: [{ isSignal: true, alias: "keyboardType", required: false }] }], returnKeyType: [{ type: i0.Input, args: [{ isSignal: true, alias: "returnKeyType", required: false }] }], submitBehavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "submitBehavior", required: false }] }], secureTextEntry: [{ type: i0.Input, args: [{ isSignal: true, alias: "secureTextEntry", required: false }] }], autoCapitalize: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoCapitalize", required: false }] }], autoCorrect: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoCorrect", required: false }] }], autoFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoFocus", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], numberOfLines: [{ type: i0.Input, args: [{ isSignal: true, alias: "numberOfLines", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }], selectionColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionColor", required: false }] }], selectTextOnFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectTextOnFocus", required: false }] }], caretHidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "caretHidden", required: false }] }], contextMenuHidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "contextMenuHidden", required: false }] }], textAlign: [{ type: i0.Input, args: [{ isSignal: true, alias: "textAlign", required: false }] }], allowFontScaling: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowFontScaling", required: false }] }], maxFontSizeMultiplier: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFontSizeMultiplier", required: false }] }], inputAccessoryViewID: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputAccessoryViewID", required: false }] }], clearButtonMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearButtonMode", required: false }] }], clearTextOnFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearTextOnFocus", required: false }] }], enablesReturnKeyAutomatically: [{ type: i0.Input, args: [{ isSignal: true, alias: "enablesReturnKeyAutomatically", required: false }] }], keyboardAppearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "keyboardAppearance", required: false }] }], passwordRules: [{ type: i0.Input, args: [{ isSignal: true, alias: "passwordRules", required: false }] }], spellCheck: [{ type: i0.Input, args: [{ isSignal: true, alias: "spellCheck", required: false }] }], smartInsertDelete: [{ type: i0.Input, args: [{ isSignal: true, alias: "smartInsertDelete", required: false }] }], dataDetectorTypes: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataDetectorTypes", required: false }] }], textContentType: [{ type: i0.Input, args: [{ isSignal: true, alias: "textContentType", required: false }] }], autoComplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoComplete", required: false }] }], underlineColorAndroid: [{ type: i0.Input, args: [{ isSignal: true, alias: "underlineColorAndroid", required: false }] }], cursorColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "cursorColor", required: false }] }], selectionHandleColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionHandleColor", required: false }] }], textAlignVertical: [{ type: i0.Input, args: [{ isSignal: true, alias: "textAlignVertical", required: false }] }], importantForAutofill: [{ type: i0.Input, args: [{ isSignal: true, alias: "importantForAutofill", required: false }] }], showSoftInputOnFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSoftInputOnFocus", required: false }] }], disableFullscreenUI: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableFullscreenUI", required: false }] }], inlineImageLeft: [{ type: i0.Input, args: [{ isSignal: true, alias: "inlineImageLeft", required: false }] }], inlineImagePadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "inlineImagePadding", required: false }] }], textBreakStrategy: [{ type: i0.Input, args: [{ isSignal: true, alias: "textBreakStrategy", required: false }] }] } });
 //# sourceMappingURL=text-input.js.map