@angular/compiler 21.0.0-next.6 → 21.0.0-next.8

package/fesm2022/compiler.mjs

@@ -1,6 +1,6 @@
 /**
- * @license Angular v21.0.0-next.6
- * (c) 2010-2025 Google LLC. https://angular.io/
+ * @license Angular v21.0.0-next.8
+ * (c) 2010-2025 Google LLC. https://angular.dev/
  * License: MIT
  */
 
@@ -2844,6 +2844,8 @@ class Identifiers {
     static domProperty = { name: 'ɵɵdomProperty', moduleName: CORE };
     static ariaProperty = { name: 'ɵɵariaProperty', moduleName: CORE };
     static property = { name: 'ɵɵproperty', moduleName: CORE };
+    static control = { name: 'ɵɵcontrol', moduleName: CORE };
+    static controlCreate = { name: 'ɵɵcontrolCreate', moduleName: CORE };
     static animationEnterListener = {
         name: 'ɵɵanimateEnterListener',
         moduleName: CORE,
@@ -3024,6 +3026,16 @@ class Identifiers {
         name: 'ɵɵvalidateIframeAttribute',
         moduleName: CORE,
     };
+    // Decorators
+    static inputDecorator = { name: 'Input', moduleName: CORE };
+    static outputDecorator = { name: 'Output', moduleName: CORE };
+    static viewChildDecorator = { name: 'ViewChild', moduleName: CORE };
+    static viewChildrenDecorator = { name: 'ViewChildren', moduleName: CORE };
+    static contentChildDecorator = { name: 'ContentChild', moduleName: CORE };
+    static contentChildrenDecorator = {
+        name: 'ContentChildren',
+        moduleName: CORE,
+    };
     // type-checking
     static InputSignalBrandWriteType = { name: 'ɵINPUT_SIGNAL_BRAND_WRITE_TYPE', moduleName: CORE };
     static UnwrapDirectiveSignalInputs = { name: 'ɵUnwrapDirectiveSignalInputs', moduleName: CORE };
@@ -4957,9 +4969,11 @@ class InteractionDeferredTrigger extends DeferredTrigger {
 }
 class ViewportDeferredTrigger extends DeferredTrigger {
     reference;
-    constructor(reference, nameSpan, sourceSpan, prefetchSpan, onSourceSpan, hydrateSpan) {
+    options;
+    constructor(reference, options, nameSpan, sourceSpan, prefetchSpan, onSourceSpan, hydrateSpan) {
         super(nameSpan, sourceSpan, prefetchSpan, onSourceSpan, hydrateSpan);
         this.reference = reference;
+        this.options = options;
     }
 }
 class BlockNode {
@@ -8783,6 +8797,17 @@ var OpKind;
      * An operation to bind animation events to an element.
      */
     OpKind[OpKind["AnimationListener"] = 56] = "AnimationListener";
+    /**
+     * An operation to bind an expression to a `field` property of an element.
+     */
+    OpKind[OpKind["Control"] = 57] = "Control";
+    /**
+     * An operation to set up a corresponding {@link Control} operation.
+     *
+     * This is responsible for setting up event listeners on a native or custom form control when
+     * bound to a specialized field directive.
+     */
+    OpKind[OpKind["ControlCreate"] = 58] = "ControlCreate";
 })(OpKind || (OpKind = {}));
 /**
  * Distinguishes different kinds of IR expressions.
@@ -9453,6 +9478,25 @@ function createStoreLetOp(target, declaredName, value, sourceSpan) {
         ...NEW_OP,
     };
 }
+/** Creates a {@link ControlOp}. */
+function createControlOp(op) {
+    return {
+        kind: OpKind.Control,
+        target: op.target,
+        expression: op.expression,
+        bindingKind: op.bindingKind,
+        securityContext: op.securityContext,
+        sanitizer: null,
+        isStructuralTemplateAttribute: op.isStructuralTemplateAttribute,
+        templateKind: op.templateKind,
+        i18nContext: op.i18nContext,
+        i18nMessage: op.i18nMessage,
+        sourceSpan: op.sourceSpan,
+        ...TRAIT_DEPENDS_ON_SLOT_CONTEXT,
+        ...TRAIT_CONSUMES_VARS,
+        ...NEW_OP,
+    };
+}
 
 /**
  * Check whether a given `o.Expression` is a logical IR expression type.
@@ -10235,6 +10279,7 @@ function transformExpressionsInOp(op, transform, flags) {
         case OpKind.Property:
         case OpKind.DomProperty:
         case OpKind.Attribute:
+        case OpKind.Control:
             if (op.expression instanceof Interpolation) {
                 transformExpressionsInInterpolation(op.expression, transform, flags);
             }
@@ -10360,6 +10405,7 @@ function transformExpressionsInOp(op, transform, flags) {
         case OpKind.SourceLocation:
         case OpKind.ConditionalCreate:
         case OpKind.ConditionalBranchCreate:
+        case OpKind.ControlCreate:
             // These operations contain no expressions.
             break;
         default:
@@ -11260,6 +11306,10 @@ function createSourceLocationOp(templatePath, locations) {
         ...NEW_OP,
     };
 }
+/** Creates a {@link ControlCreateOp}. */
+function createControlCreateOp(sourceSpan) {
+    return { kind: OpKind.ControlCreate, sourceSpan, ...NEW_OP };
+}
 
 function createDomPropertyOp(name, expression, bindingKind, i18nContext, securityContext, sourceSpan) {
     return {
@@ -11738,6 +11788,14 @@ function extractAttributes(job) {
                         /* i18nMessage */ null, op.securityContext), lookupElement$3(elements, op.target));
                     }
                     break;
+                case OpKind.Control:
+                    OpList.insertBefore(
+                    // Deliberately null i18nMessage value
+                    createExtractedAttributeOp(op.target, BindingKind.Property, null, 'field', 
+                    /* expression */ null, 
+                    /* i18nContext */ null, 
+                    /* i18nMessage */ null, op.securityContext), lookupElement$3(elements, op.target));
+                    break;
                 case OpKind.TwoWayProperty:
                     OpList.insertBefore(createExtractedAttributeOp(op.target, BindingKind.TwoWayProperty, null, op.name, 
                     /* expression */ null, 
@@ -11897,6 +11955,9 @@ function specializeBindings(job) {
                     else if (job.kind === CompilationJobKind.Host) {
                         OpList.replace(op, createDomPropertyOp(op.name, op.expression, op.bindingKind, op.i18nContext, op.securityContext, op.sourceSpan));
                     }
+                    else if (op.name === 'field') {
+                        OpList.replace(op, createControlOp(op));
+                    }
                     else {
                         OpList.replace(op, createPropertyOp(op.target, op.name, op.expression, op.bindingKind, op.securityContext, op.isStructuralTemplateAttribute, op.templateKind, op.i18nContext, op.i18nMessage, op.sourceSpan));
                     }
@@ -23780,7 +23841,7 @@ function deferOn(trigger, args, modifier, sourceSpan) {
     if (instructionToCall === undefined) {
         throw new Error(`Unable to determine instruction for trigger ${trigger}`);
     }
-    return call(instructionToCall, args.map((a) => literal(a)), sourceSpan);
+    return call(instructionToCall, args, sourceSpan);
 }
 function projectionDef(def) {
     return call(Identifiers.projectionDef, def ? [def] : [], null);
@@ -23909,6 +23970,22 @@ function ariaProperty(name, expression, sourceSpan) {
 function property(name, expression, sanitizer, sourceSpan) {
     return propertyBase(Identifiers.property, name, expression, sanitizer, sourceSpan);
 }
+function control(expression, sanitizer, sourceSpan) {
+    const args = [];
+    if (expression instanceof Interpolation) {
+        args.push(interpolationToExpression(expression, sourceSpan));
+    }
+    else {
+        args.push(expression);
+    }
+    if (sanitizer !== null) {
+        args.push(sanitizer);
+    }
+    return call(Identifiers.control, args, sourceSpan);
+}
+function controlCreate(sourceSpan) {
+    return call(Identifiers.controlCreate, [], sourceSpan);
+}
 function twoWayProperty(name, expression, sanitizer, sourceSpan) {
     const args = [literal(name), expression];
     if (sanitizer !== null) {
@@ -24355,11 +24432,30 @@ function reifyCreateOperations(unit, ops) {
                     case DeferTriggerKind.Immediate:
                         break;
                     case DeferTriggerKind.Timer:
-                        args = [op.trigger.delay];
+                        args = [literal(op.trigger.delay)];
+                        break;
+                    case DeferTriggerKind.Viewport:
+                        // `hydrate` triggers don't support targets.
+                        if (op.modifier === "hydrate" /* ir.DeferOpModifierKind.HYDRATE */) {
+                            args = op.trigger.options ? [op.trigger.options] : [];
+                        }
+                        else {
+                            // The slots not being defined at this point is invalid, however we
+                            // catch it during type checking. Pass in null in such cases.
+                            args = [literal(op.trigger.targetSlot?.slot ?? null)];
+                            if (op.trigger.targetSlotViewSteps !== 0) {
+                                args.push(literal(op.trigger.targetSlotViewSteps));
+                            }
+                            else if (op.trigger.options) {
+                                args.push(literal(null));
+                            }
+                            if (op.trigger.options) {
+                                args.push(op.trigger.options);
+                            }
+                        }
                         break;
                     case DeferTriggerKind.Interaction:
                     case DeferTriggerKind.Hover:
-                    case DeferTriggerKind.Viewport:
                         // `hydrate` triggers don't support targets.
                         if (op.modifier === "hydrate" /* ir.DeferOpModifierKind.HYDRATE */) {
                             args = [];
@@ -24367,9 +24463,9 @@ function reifyCreateOperations(unit, ops) {
                         else {
                             // The slots not being defined at this point is invalid, however we
                             // catch it during type checking. Pass in null in such cases.
-                            args = [op.trigger.targetSlot?.slot ?? null];
+                            args = [literal(op.trigger.targetSlot?.slot ?? null)];
                             if (op.trigger.targetSlotViewSteps !== 0) {
-                                args.push(op.trigger.targetSlotViewSteps);
+                                args.push(literal(op.trigger.targetSlotViewSteps));
                             }
                         }
                         break;
@@ -24469,6 +24565,9 @@ function reifyCreateOperations(unit, ops) {
                 }));
                 OpList.replace(op, attachSourceLocation(op.templatePath, locationsLiteral));
                 break;
+            case OpKind.ControlCreate:
+                OpList.replace(op, controlCreate(op.sourceSpan));
+                break;
             case OpKind.Statement:
                 // Pass statement operations directly through.
                 break;
@@ -24491,6 +24590,9 @@ function reifyUpdateOperations(unit, ops) {
                     ? reifyDomProperty(op)
                     : reifyProperty(op));
                 break;
+            case OpKind.Control:
+                OpList.replace(op, reifyControl(op));
+                break;
             case OpKind.TwoWayProperty:
                 OpList.replace(op, twoWayProperty(op.name, op.expression, op.sanitizer, op.sourceSpan));
                 break;
@@ -24586,6 +24688,9 @@ function reifyProperty(op) {
         ? ariaProperty(op.name, op.expression, op.sourceSpan)
         : property(op.name, op.expression, op.sanitizer, op.sourceSpan);
 }
+function reifyControl(op) {
+    return control(op.expression, op.sanitizer, op.sourceSpan);
+}
 function reifyIrExpression(expr) {
     if (!isIrExpression(expr)) {
         return expr;
@@ -26098,6 +26203,7 @@ function varsUsedByOp(op) {
             return slots;
         case OpKind.Property:
         case OpKind.DomProperty:
+        case OpKind.Control:
             slots = 1;
             // We need to assign a slot even for singleton interpolations, because the
             // runtime needs to store both the raw value and the stringified one.
@@ -27235,6 +27341,9 @@ function ingestDeferTriggers(modifier, triggers, onOps, whenOps, unit, deferXref
             targetSlot: null,
             targetView: null,
             targetSlotViewSteps: null,
+            options: triggers.viewport.options
+                ? convertAst(triggers.viewport.options, unit.job, triggers.viewport.sourceSpan)
+                : null,
         }, modifier, triggers.viewport.sourceSpan);
         onOps.push(deferOnOp);
     }
@@ -27565,6 +27674,11 @@ function ingestElementBindings(unit, op, element) {
         }
         // All dynamic bindings (both attribute and property bindings).
         bindings.push(createBindingOp(op.xref, BINDING_KINDS.get(input.type), input.name, convertAstWithInterpolation(unit.job, astOf(input.value), input.i18n), input.unit, input.securityContext, false, false, null, asMessage(input.i18n) ?? null, input.sourceSpan));
+        // If the input name is 'field', this could be a form control binding which requires a
+        // `ControlCreateOp` to properly initialize.
+        if (input.type === BindingType.Property && input.name === 'field') {
+            unit.create.push(createControlCreateOp(input.sourceSpan));
+        }
     }
     unit.create.push(bindings.filter((b) => b?.kind === OpKind.ExtractedAttribute));
     unit.update.push(bindings.filter((b) => b?.kind === OpKind.Binding));
@@ -28747,6 +28861,7 @@ function createForLoop(ast, connectedBlocks, visitor, bindingParser) {
             // main `for` body, use `mainSourceSpan`.
             const endSpan = empty?.endSourceSpan ?? ast.endSourceSpan;
             const sourceSpan = new ParseSourceSpan(ast.sourceSpan.start, endSpan?.end ?? ast.sourceSpan.end);
+            validateTrackByExpression(params.trackBy.expression, params.trackBy.keywordSpan, errors);
             node = new ForLoopBlock(params.itemName, params.expression, params.trackBy.expression, params.trackBy.keywordSpan, params.context, visitAll(visitor, ast.children, ast.children), empty, sourceSpan, ast.sourceSpan, ast.startSourceSpan, endSpan, ast.nameSpan, ast.i18n);
         }
     }
@@ -28846,6 +28961,13 @@ function parseForLoopParameters(block, errors, bindingParser) {
     }
     return result;
 }
+function validateTrackByExpression(expression, parseSourceSpan, errors) {
+    const visitor = new PipeVisitor();
+    expression.ast.visit(visitor);
+    if (visitor.hasPipe) {
+        errors.push(new ParseError(parseSourceSpan, 'Cannot use pipes in track expressions'));
+    }
+}
 /** Parses the `let` parameter of a `for` loop block. */
 function parseLetParameter(sourceSpan, expression, span, loopItemName, context, errors) {
     const parts = expression.split(',');
@@ -29056,6 +29178,12 @@ function stripOptionalParentheses(param, errors) {
     }
     return expression.slice(start, end);
 }
+class PipeVisitor extends RecursiveAstVisitor {
+    hasPipe = false;
+    visitPipe() {
+        this.hasPipe = true;
+    }
+}
 
 /** Pattern for a timing value in a trigger. */
 const TIME_PATTERN = /^\d+\.?\d*(ms|s)?$/;
@@ -29111,7 +29239,7 @@ function parseWhenTrigger({ expression, sourceSpan }, bindingParser, triggers, e
     }
 }
 /** Parses an `on` trigger */
-function parseOnTrigger({ expression, sourceSpan }, triggers, errors, placeholder) {
+function parseOnTrigger({ expression, sourceSpan }, bindingParser, triggers, errors, placeholder) {
     const onIndex = expression.indexOf('on');
     const onSourceSpan = new ParseSourceSpan(sourceSpan.start.moveBy(onIndex), sourceSpan.start.moveBy(onIndex + 'on'.length));
     const prefetchSpan = getPrefetchSpan(expression, sourceSpan);
@@ -29123,9 +29251,10 @@ function parseOnTrigger({ expression, sourceSpan }, triggers, errors, placeholde
     }
     else {
         const start = getTriggerParametersStart(expression, onIndex + 1);
-        const parser = new OnTriggerParser(expression, start, sourceSpan, triggers, errors, expression.startsWith('hydrate')
+        const isHydrationTrigger = expression.startsWith('hydrate');
+        const parser = new OnTriggerParser(expression, bindingParser, start, sourceSpan, triggers, errors, isHydrationTrigger
             ? validateHydrateReferenceBasedTrigger
-            : validatePlainReferenceBasedTrigger, placeholder, prefetchSpan, onSourceSpan, hydrateSpan);
+            : validatePlainReferenceBasedTrigger, isHydrationTrigger, prefetchSpan, onSourceSpan, hydrateSpan);
         parser.parse();
     }
 }
@@ -29143,25 +29272,27 @@ function getHydrateSpan(expression, sourceSpan) {
 }
 class OnTriggerParser {
     expression;
+    bindingParser;
     start;
     span;
     triggers;
     errors;
     validator;
-    placeholder;
+    isHydrationTrigger;
     prefetchSpan;
     onSourceSpan;
     hydrateSpan;
     index = 0;
     tokens;
-    constructor(expression, start, span, triggers, errors, validator, placeholder, prefetchSpan, onSourceSpan, hydrateSpan) {
+    constructor(expression, bindingParser, start, span, triggers, errors, validator, isHydrationTrigger, prefetchSpan, onSourceSpan, hydrateSpan) {
         this.expression = expression;
+        this.bindingParser = bindingParser;
         this.start = start;
         this.span = span;
         this.triggers = triggers;
         this.errors = errors;
         this.validator = validator;
-        this.placeholder = placeholder;
+        this.isHydrationTrigger = isHydrationTrigger;
         this.prefetchSpan = prefetchSpan;
         this.onSourceSpan = onSourceSpan;
         this.hydrateSpan = hydrateSpan;
@@ -29235,10 +29366,10 @@ class OnTriggerParser {
                     this.trackTrigger('immediate', createImmediateTrigger(parameters, nameSpan, sourceSpan, this.prefetchSpan, this.onSourceSpan, this.hydrateSpan));
                     break;
                 case OnTriggerType.HOVER:
-                    this.trackTrigger('hover', createHoverTrigger(parameters, nameSpan, sourceSpan, this.prefetchSpan, this.onSourceSpan, this.hydrateSpan, this.placeholder, this.validator));
+                    this.trackTrigger('hover', createHoverTrigger(parameters, nameSpan, sourceSpan, this.prefetchSpan, this.onSourceSpan, this.hydrateSpan, this.validator));
                     break;
                 case OnTriggerType.VIEWPORT:
-                    this.trackTrigger('viewport', createViewportTrigger(parameters, nameSpan, sourceSpan, this.prefetchSpan, this.onSourceSpan, this.hydrateSpan, this.validator));
+                    this.trackTrigger('viewport', createViewportTrigger(this.start, this.isHydrationTrigger, this.bindingParser, parameters, nameSpan, sourceSpan, this.prefetchSpan, this.onSourceSpan, this.hydrateSpan, this.validator));
                     break;
                 default:
                     throw new Error(`Unrecognized trigger type "${identifier}"`);
@@ -29256,15 +29387,15 @@ class OnTriggerParser {
         }
         this.advance();
         const commaDelimStack = [];
-        let current = '';
+        let tokens = [];
         while (this.index < this.tokens.length) {
             const token = this.token();
             // Stop parsing if we've hit the end character and we're outside of a comma-delimited syntax.
             // Note that we don't need to account for strings here since the lexer already parsed them
             // into string tokens.
             if (token.isCharacter($RPAREN) && commaDelimStack.length === 0) {
-                if (current.length) {
-                    parameters.push(current);
+                if (tokens.length) {
+                    parameters.push({ expression: this.tokenRangeText(tokens), start: tokens[0].index });
                 }
                 break;
             }
@@ -29283,14 +29414,14 @@ class OnTriggerParser {
             }
             // If we hit a comma outside of a comma-delimited syntax, it means
             // that we're at the top level and we're starting a new parameter.
-            if (commaDelimStack.length === 0 && token.isCharacter($COMMA) && current.length > 0) {
-                parameters.push(current);
-                current = '';
+            if (commaDelimStack.length === 0 && token.isCharacter($COMMA) && tokens.length > 0) {
+                parameters.push({ expression: this.tokenRangeText(tokens), start: tokens[0].index });
                 this.advance();
+                tokens = [];
                 continue;
             }
             // Otherwise treat the token as a plain text character in the current parameter.
-            current += this.tokenText();
+            tokens.push(token);
             this.advance();
         }
         if (!this.token().isCharacter($RPAREN) || commaDelimStack.length > 0) {
@@ -29302,10 +29433,11 @@ class OnTriggerParser {
         }
         return parameters;
     }
-    tokenText() {
-        // Tokens have a toString already which we could use, but for string tokens it omits the quotes.
-        // Eventually we could expose this information on the token directly.
-        return this.expression.slice(this.start + this.token().index, this.start + this.token().end);
+    tokenRangeText(tokens) {
+        if (tokens.length === 0) {
+            return '';
+        }
+        return this.expression.slice(this.start + tokens[0].index, this.start + tokens[tokens.length - 1].end);
     }
     trackTrigger(name, trigger) {
         trackTrigger(name, this.triggers, this.errors, trigger);
@@ -29338,7 +29470,7 @@ function createTimerTrigger(parameters, nameSpan, sourceSpan, prefetchSpan, onSo
     if (parameters.length !== 1) {
         throw new Error(`"${OnTriggerType.TIMER}" trigger must have exactly one parameter`);
     }
-    const delay = parseDeferredTime(parameters[0]);
+    const delay = parseDeferredTime(parameters[0].expression);
     if (delay === null) {
         throw new Error(`Could not parse time value of trigger "${OnTriggerType.TIMER}"`);
     }
@@ -29350,17 +29482,61 @@ function createImmediateTrigger(parameters, nameSpan, sourceSpan, prefetchSpan,
     }
     return new ImmediateDeferredTrigger(nameSpan, sourceSpan, prefetchSpan, onSourceSpan, hydrateSpan);
 }
-function createHoverTrigger(parameters, nameSpan, sourceSpan, prefetchSpan, onSourceSpan, hydrateSpan, placeholder, validator) {
+function createHoverTrigger(parameters, nameSpan, sourceSpan, prefetchSpan, onSourceSpan, hydrateSpan, validator) {
     validator(OnTriggerType.HOVER, parameters);
-    return new HoverDeferredTrigger(parameters[0] ?? null, nameSpan, sourceSpan, prefetchSpan, onSourceSpan, hydrateSpan);
+    return new HoverDeferredTrigger(parameters[0]?.expression ?? null, nameSpan, sourceSpan, prefetchSpan, onSourceSpan, hydrateSpan);
 }
 function createInteractionTrigger(parameters, nameSpan, sourceSpan, prefetchSpan, onSourceSpan, hydrateSpan, validator) {
     validator(OnTriggerType.INTERACTION, parameters);
-    return new InteractionDeferredTrigger(parameters[0] ?? null, nameSpan, sourceSpan, prefetchSpan, onSourceSpan, hydrateSpan);
+    return new InteractionDeferredTrigger(parameters[0]?.expression ?? null, nameSpan, sourceSpan, prefetchSpan, onSourceSpan, hydrateSpan);
 }
-function createViewportTrigger(parameters, nameSpan, sourceSpan, prefetchSpan, onSourceSpan, hydrateSpan, validator) {
+function createViewportTrigger(start, isHydrationTrigger, bindingParser, parameters, nameSpan, sourceSpan, prefetchSpan, onSourceSpan, hydrateSpan, validator) {
     validator(OnTriggerType.VIEWPORT, parameters);
-    return new ViewportDeferredTrigger(parameters[0] ?? null, nameSpan, sourceSpan, prefetchSpan, onSourceSpan, hydrateSpan);
+    let reference;
+    let options;
+    if (parameters.length === 0) {
+        reference = options = null;
+    }
+    else if (!parameters[0].expression.startsWith('{')) {
+        reference = parameters[0].expression;
+        options = null;
+    }
+    else {
+        const parsed = bindingParser.parseBinding(parameters[0].expression, false, sourceSpan, sourceSpan.start.offset + start + parameters[0].start);
+        if (!(parsed.ast instanceof LiteralMap)) {
+            throw new Error('Options parameter of the "viewport" trigger must be an object literal');
+        }
+        else if (parsed.ast.keys.some((key) => key.key === 'root')) {
+            throw new Error('The "root" option is not supported in the options parameter of the "viewport" trigger');
+        }
+        const triggerIndex = parsed.ast.keys.findIndex((key) => key.key === 'trigger');
+        if (triggerIndex === -1) {
+            reference = null;
+            options = parsed.ast;
+        }
+        else {
+            const value = parsed.ast.values[triggerIndex];
+            const triggerFilter = (_, index) => index !== triggerIndex;
+            if (!(value instanceof PropertyRead) ||
+                !(value.receiver instanceof ImplicitReceiver) ||
+                value.receiver instanceof ThisReceiver) {
+                throw new Error(`"trigger" option of the "viewport" trigger must be an identifier`);
+            }
+            reference = value.name;
+            options = new LiteralMap(parsed.ast.span, parsed.ast.sourceSpan, parsed.ast.keys.filter(triggerFilter), parsed.ast.values.filter(triggerFilter));
+        }
+    }
+    if (isHydrationTrigger && reference !== null) {
+        throw new Error(`"viewport" hydration trigger cannot have a "trigger"`);
+    }
+    else if (options) {
+        const dynamicNode = DynamicAstValidator.findDynamicNode(options);
+        if (dynamicNode !== null) {
+            throw new Error(`Options of the "viewport" trigger must be an object ` +
+                `literal containing only literal values, but "${dynamicNode.constructor.name}" was found`);
+        }
+    }
+    return new ViewportDeferredTrigger(reference, options, nameSpan, sourceSpan, prefetchSpan, onSourceSpan, hydrateSpan);
 }
 /**
  * Checks whether the structure of a non-hydrate reference-based trigger is valid.
@@ -29378,6 +29554,12 @@ function validatePlainReferenceBasedTrigger(type, parameters) {
  * @param parameters Parameters of the trigger.
  */
 function validateHydrateReferenceBasedTrigger(type, parameters) {
+    if (type === OnTriggerType.VIEWPORT) {
+        if (parameters.length > 1) {
+            throw new Error(`Hydration trigger "${type}" cannot have more than one parameter`);
+        }
+        return;
+    }
     if (parameters.length > 0) {
         throw new Error(`Hydration trigger "${type}" cannot have parameters`);
     }
@@ -29407,6 +29589,25 @@ function parseDeferredTime(value) {
     const [time, units] = match;
     return parseFloat(time) * (units === 's' ? 1000 : 1);
 }
+class DynamicAstValidator extends RecursiveAstVisitor {
+    dynamicNode = null;
+    static findDynamicNode(ast) {
+        const visitor = new DynamicAstValidator();
+        visitor.visit(ast);
+        return visitor.dynamicNode;
+    }
+    visit(ast) {
+        if (!(ast instanceof ASTWithSource) &&
+            !(ast instanceof LiteralPrimitive) &&
+            !(ast instanceof LiteralArray) &&
+            !(ast instanceof LiteralMap)) {
+            this.dynamicNode = ast;
+        }
+        else {
+            super.visit(ast);
+        }
+    }
+}
 
 /** Pattern to identify a `prefetch when` trigger. */
 const PREFETCH_WHEN_PATTERN = /^prefetch\s+when\s/;
@@ -29437,7 +29638,7 @@ function isConnectedDeferLoopBlock(name) {
 function createDeferredBlock(ast, connectedBlocks, visitor, bindingParser) {
     const errors = [];
     const { placeholder, loading, error } = parseConnectedBlocks(connectedBlocks, errors, visitor);
-    const { triggers, prefetchTriggers, hydrateTriggers } = parsePrimaryTriggers(ast, bindingParser, errors, placeholder);
+    const { triggers, prefetchTriggers, hydrateTriggers } = parsePrimaryTriggers(ast, bindingParser, errors);
     // The `defer` block has a main span encompassing all of the connected branches as well.
     let lastEndSourceSpan = ast.endSourceSpan;
     let endOfLastSourceSpan = ast.sourceSpan.end;
@@ -29559,19 +29760,19 @@ function parsePrimaryTriggers(ast, bindingParser, errors, placeholder) {
             parseWhenTrigger(param, bindingParser, triggers, errors);
         }
         else if (ON_PARAMETER_PATTERN.test(param.expression)) {
-            parseOnTrigger(param, triggers, errors, placeholder);
+            parseOnTrigger(param, bindingParser, triggers, errors);
         }
         else if (PREFETCH_WHEN_PATTERN.test(param.expression)) {
             parseWhenTrigger(param, bindingParser, prefetchTriggers, errors);
         }
         else if (PREFETCH_ON_PATTERN.test(param.expression)) {
-            parseOnTrigger(param, prefetchTriggers, errors, placeholder);
+            parseOnTrigger(param, bindingParser, prefetchTriggers, errors);
         }
         else if (HYDRATE_WHEN_PATTERN.test(param.expression)) {
             parseWhenTrigger(param, bindingParser, hydrateTriggers, errors);
         }
         else if (HYDRATE_ON_PATTERN.test(param.expression)) {
-            parseOnTrigger(param, hydrateTriggers, errors, placeholder);
+            parseOnTrigger(param, bindingParser, hydrateTriggers, errors);
         }
         else if (HYDRATE_NEVER_PATTERN.test(param.expression)) {
             parseNeverTrigger(param, hydrateTriggers, errors);
@@ -30526,7 +30727,7 @@ function compileComponentFromMetadata(meta, constantPool, bindingParser) {
         : TemplateCompilationMode.Full;
     // First the template is ingested into IR:
     const tpl = ingestComponent(meta.name, meta.template.nodes, constantPool, compilationMode, meta.relativeContextFilePath, meta.i18nUseExternalIds, meta.defer, allDeferrableDepsFn, meta.relativeTemplatePath, getTemplateSourceLocationsEnabled());
-    // Then the IR is transformed to prepare it for cod egeneration.
+    // Then the IR is transformed to prepare it for code generation.
     transform(tpl, CompilationJobKind.Tmpl);
     // Finally we emit the template function:
     const templateFn = emitTemplateFn(tpl, constantPool);
@@ -31000,6 +31201,9 @@ class CombinedRecursiveAstVisitor extends RecursiveAstVisitor {
         if (trigger instanceof BoundDeferredTrigger) {
             this.visit(trigger.value);
         }
+        else if (trigger instanceof ViewportDeferredTrigger && trigger.options !== null) {
+            this.visit(trigger.options);
+        }
     }
     visitDeferredBlockPlaceholder(block) {
         this.visitAllTemplateNodes(block.children);
@@ -34434,7 +34638,7 @@ const MINIMUM_PARTIAL_LINKER_DEFER_SUPPORT_VERSION = '18.0.0';
 function compileDeclareClassMetadata(metadata) {
     const definitionMap = new DefinitionMap();
     definitionMap.set('minVersion', literal(MINIMUM_PARTIAL_LINKER_VERSION$5));
-    definitionMap.set('version', literal('21.0.0-next.6'));
+    definitionMap.set('version', literal('21.0.0-next.8'));
     definitionMap.set('ngImport', importExpr(Identifiers.core));
     definitionMap.set('type', metadata.type);
     definitionMap.set('decorators', metadata.decorators);
@@ -34452,7 +34656,7 @@ function compileComponentDeclareClassMetadata(metadata, dependencies) {
     callbackReturnDefinitionMap.set('ctorParameters', metadata.ctorParameters ?? literal(null));
     callbackReturnDefinitionMap.set('propDecorators', metadata.propDecorators ?? literal(null));
     definitionMap.set('minVersion', literal(MINIMUM_PARTIAL_LINKER_DEFER_SUPPORT_VERSION));
-    definitionMap.set('version', literal('21.0.0-next.6'));
+    definitionMap.set('version', literal('21.0.0-next.8'));
     definitionMap.set('ngImport', importExpr(Identifiers.core));
     definitionMap.set('type', metadata.type);
     definitionMap.set('resolveDeferredDeps', compileComponentMetadataAsyncResolver(dependencies));
@@ -34547,7 +34751,7 @@ function createDirectiveDefinitionMap(meta) {
     const definitionMap = new DefinitionMap();
     const minVersion = getMinimumVersionForPartialOutput(meta);
     definitionMap.set('minVersion', literal(minVersion));
-    definitionMap.set('version', literal('21.0.0-next.6'));
+    definitionMap.set('version', literal('21.0.0-next.8'));
     // e.g. `type: MyDirective`
     definitionMap.set('type', meta.type.value);
     if (meta.isStandalone !== undefined) {
@@ -34960,7 +35164,7 @@ const MINIMUM_PARTIAL_LINKER_VERSION$4 = '12.0.0';
 function compileDeclareFactoryFunction(meta) {
     const definitionMap = new DefinitionMap();
     definitionMap.set('minVersion', literal(MINIMUM_PARTIAL_LINKER_VERSION$4));
-    definitionMap.set('version', literal('21.0.0-next.6'));
+    definitionMap.set('version', literal('21.0.0-next.8'));
     definitionMap.set('ngImport', importExpr(Identifiers.core));
     definitionMap.set('type', meta.type.value);
     definitionMap.set('deps', compileDependencies(meta.deps));
@@ -34995,7 +35199,7 @@ function compileDeclareInjectableFromMetadata(meta) {
 function createInjectableDefinitionMap(meta) {
     const definitionMap = new DefinitionMap();
     definitionMap.set('minVersion', literal(MINIMUM_PARTIAL_LINKER_VERSION$3));
-    definitionMap.set('version', literal('21.0.0-next.6'));
+    definitionMap.set('version', literal('21.0.0-next.8'));
     definitionMap.set('ngImport', importExpr(Identifiers.core));
     definitionMap.set('type', meta.type.value);
     // Only generate providedIn property if it has a non-null value
@@ -35046,7 +35250,7 @@ function compileDeclareInjectorFromMetadata(meta) {
 function createInjectorDefinitionMap(meta) {
     const definitionMap = new DefinitionMap();
     definitionMap.set('minVersion', literal(MINIMUM_PARTIAL_LINKER_VERSION$2));
-    definitionMap.set('version', literal('21.0.0-next.6'));
+    definitionMap.set('version', literal('21.0.0-next.8'));
     definitionMap.set('ngImport', importExpr(Identifiers.core));
     definitionMap.set('type', meta.type.value);
     definitionMap.set('providers', meta.providers);
@@ -35079,7 +35283,7 @@ function createNgModuleDefinitionMap(meta) {
         throw new Error('Invalid path! Local compilation mode should not get into the partial compilation path');
     }
     definitionMap.set('minVersion', literal(MINIMUM_PARTIAL_LINKER_VERSION$1));
-    definitionMap.set('version', literal('21.0.0-next.6'));
+    definitionMap.set('version', literal('21.0.0-next.8'));
     definitionMap.set('ngImport', importExpr(Identifiers.core));
     definitionMap.set('type', meta.type.value);
     // We only generate the keys in the metadata if the arrays contain values.
@@ -35130,7 +35334,7 @@ function compileDeclarePipeFromMetadata(meta) {
 function createPipeDefinitionMap(meta) {
     const definitionMap = new DefinitionMap();
     definitionMap.set('minVersion', literal(MINIMUM_PARTIAL_LINKER_VERSION));
-    definitionMap.set('version', literal('21.0.0-next.6'));
+    definitionMap.set('version', literal('21.0.0-next.8'));
     definitionMap.set('ngImport', importExpr(Identifiers.core));
     // e.g. `type: MyPipe`
     definitionMap.set('type', meta.type.value);
@@ -35286,7 +35490,7 @@ function compileHmrUpdateCallback(definitions, constantStatements, meta) {
  * @description
  * Entry point for all public APIs of the compiler package.
  */
-const VERSION = new Version('21.0.0-next.6');
+const VERSION = new Version('21.0.0-next.8');
 
 //////////////////////////////////////
 // THIS FILE HAS GLOBAL SIDE EFFECT //