@angular/core 15.0.0-next.1 → 15.0.0-next.3

package/fesm2020/core.mjs

@@ -1,5 +1,5 @@
 /**
- * @license Angular v15.0.0-next.1
+ * @license Angular v15.0.0-next.3
  * (c) 2010-2022 Google LLC. https://angular.io/
  * License: MIT
  */
@@ -931,7 +931,8 @@ function ɵɵdefineComponent(componentDefinition) {
             setInput: null,
             schemas: componentDefinition.schemas || null,
             tView: null,
-            applyHostDirectives: null,
+            findHostDirectiveDefs: null,
+            hostDirectives: null,
         };
         const dependencies = componentDefinition.dependencies;
         const feature = componentDefinition.features;
@@ -1272,10 +1273,10 @@ function isLContainer(value) {
     return Array.isArray(value) && value[TYPE] === true;
 }
 function isContentQueryHost(tNode) {
-    return (tNode.flags & 8 /* TNodeFlags.hasContentQuery */) !== 0;
+    return (tNode.flags & 4 /* TNodeFlags.hasContentQuery */) !== 0;
 }
 function isComponentHost(tNode) {
-    return (tNode.flags & 2 /* TNodeFlags.isComponentHost */) === 2 /* TNodeFlags.isComponentHost */;
+    return tNode.componentOffset > -1;
 }
 function isDirectiveHost(tNode) {
     return (tNode.flags & 1 /* TNodeFlags.isDirectiveHost */) === 1 /* TNodeFlags.isDirectiveHost */;
@@ -2685,7 +2686,7 @@ const unusedValueExportToPlacateAjd$5 = 1;
  * @param tNode
  */
 function hasClassInput(tNode) {
-    return (tNode.flags & 16 /* TNodeFlags.hasClassInput */) !== 0;
+    return (tNode.flags & 8 /* TNodeFlags.hasClassInput */) !== 0;
 }
 /**
  * Returns `true` if the `TNode` has a directive which has `@Input()` for `style` binding.
@@ -2709,7 +2710,7 @@ function hasClassInput(tNode) {
  * @param tNode
  */
 function hasStyleInput(tNode) {
-    return (tNode.flags & 32 /* TNodeFlags.hasStyleInput */) !== 0;
+    return (tNode.flags & 16 /* TNodeFlags.hasStyleInput */) !== 0;
 }
 
 /**
@@ -3262,7 +3263,7 @@ function injectAttributeImpl(tNode, attrNameToInject) {
     return null;
 }
 function notFoundValueOrThrow(notFoundValue, token, flags) {
-    if (flags & InjectFlags.Optional) {
+    if ((flags & InjectFlags.Optional) || notFoundValue !== undefined) {
         return notFoundValue;
     }
     else {
@@ -3279,7 +3280,7 @@ function notFoundValueOrThrow(notFoundValue, token, flags) {
  * @returns the value from the injector or throws an exception
  */
 function lookupTokenUsingModuleInjector(lView, token, flags, notFoundValue) {
-    if (flags & InjectFlags.Optional && notFoundValue === undefined) {
+    if ((flags & InjectFlags.Optional) && notFoundValue === undefined) {
         // This must be set or the NullInjector will throw for optional deps
         notFoundValue = null;
     }
@@ -5802,10 +5803,6 @@ function _sanitizeUrl(url) {
     }
     return 'unsafe:' + url;
 }
-function sanitizeSrcset(srcset) {
-    srcset = String(srcset);
-    return srcset.split(',').map((srcset) => _sanitizeUrl(srcset.trim())).join(', ');
-}
 
 /**
  * @license
@@ -5852,12 +5849,10 @@ const INLINE_ELEMENTS = merge(OPTIONAL_END_TAG_INLINE_ELEMENTS, tagSet('a,abbr,a
 const VALID_ELEMENTS = merge(VOID_ELEMENTS, BLOCK_ELEMENTS, INLINE_ELEMENTS, OPTIONAL_END_TAG_ELEMENTS);
 // Attributes that have href and hence need to be sanitized
 const URI_ATTRS = tagSet('background,cite,href,itemtype,longdesc,poster,src,xlink:href');
-// Attributes that have special href set hence need to be sanitized
-const SRCSET_ATTRS = tagSet('srcset');
 const HTML_ATTRS = tagSet('abbr,accesskey,align,alt,autoplay,axis,bgcolor,border,cellpadding,cellspacing,class,clear,color,cols,colspan,' +
     'compact,controls,coords,datetime,default,dir,download,face,headers,height,hidden,hreflang,hspace,' +
     'ismap,itemscope,itemprop,kind,label,lang,language,loop,media,muted,nohref,nowrap,open,preload,rel,rev,role,rows,rowspan,rules,' +
-    'scope,scrolling,shape,size,sizes,span,srclang,start,summary,tabindex,target,title,translate,type,usemap,' +
+    'scope,scrolling,shape,size,sizes,span,srclang,srcset,start,summary,tabindex,target,title,translate,type,usemap,' +
     'valign,value,vspace,width');
 // Accessibility attributes as per WAI-ARIA 1.1 (W3C Working Draft 14 December 2018)
 const ARIA_ATTRS = tagSet('aria-activedescendant,aria-atomic,aria-autocomplete,aria-busy,aria-checked,aria-colcount,aria-colindex,' +
@@ -5873,7 +5868,7 @@ const ARIA_ATTRS = tagSet('aria-activedescendant,aria-atomic,aria-autocomplete,a
 // NB: Sanitization does not allow <form> elements or other active elements (<button> etc). Those
 // can be sanitized, but they increase security surface area without a legitimate use case, so they
 // are left out here.
-const VALID_ATTRS = merge(URI_ATTRS, SRCSET_ATTRS, HTML_ATTRS, ARIA_ATTRS);
+const VALID_ATTRS = merge(URI_ATTRS, HTML_ATTRS, ARIA_ATTRS);
 // Elements whose content should not be traversed/preserved, if the elements themselves are invalid.
 //
 // Typically, `<invalid>Some content</invalid>` would traverse (and in this case preserve)
@@ -5956,8 +5951,6 @@ class SanitizingHtmlSerializer {
             // TODO(martinprobst): Special case image URIs for data:image/...
             if (URI_ATTRS[lower])
                 value = _sanitizeUrl(value);
-            if (SRCSET_ATTRS[lower])
-                value = sanitizeSrcset(value);
             this.buf.push(' ', attrName, '="', encodeEntities(value), '"');
         }
         this.buf.push('>');
@@ -7258,7 +7251,7 @@ class Version {
 /**
  * @publicApi
  */
-const VERSION = new Version('15.0.0-next.1');
+const VERSION = new Version('15.0.0-next.3');
 
 /**
  * @license
@@ -7561,7 +7554,7 @@ function getTemplateLocationDetails(lView) {
  * that the `CommonModule` should also be included.
  */
 const KNOWN_CONTROL_FLOW_DIRECTIVES = new Map([
-    ['ngIf', 'NgIf'], ['ngFor', 'NgForOf'], ['ngSwitchCase', 'NgSwitchCase'],
+    ['ngIf', 'NgIf'], ['ngFor', 'NgFor'], ['ngSwitchCase', 'NgSwitchCase'],
     ['ngSwitchDefault', 'NgSwitchDefault']
 ]);
 /**
@@ -8077,18 +8070,21 @@ function findViaDirective(lView, directiveInstance) {
  */
 function getDirectivesAtNodeIndex(nodeIndex, lView, includeComponents) {
     const tNode = lView[TVIEW].data[nodeIndex];
-    let directiveStartIndex = tNode.directiveStart;
-    if (directiveStartIndex == 0)
+    if (tNode.directiveStart === 0)
         return EMPTY_ARRAY;
-    const directiveEndIndex = tNode.directiveEnd;
-    if (!includeComponents && tNode.flags & 2 /* TNodeFlags.isComponentHost */)
-        directiveStartIndex++;
-    return lView.slice(directiveStartIndex, directiveEndIndex);
+    const results = [];
+    for (let i = tNode.directiveStart; i < tNode.directiveEnd; i++) {
+        const directiveInstance = lView[i];
+        if (!isComponentInstance(directiveInstance) || includeComponents) {
+            results.push(directiveInstance);
+        }
+    }
+    return results;
 }
 function getComponentAtNodeIndex(nodeIndex, lView) {
     const tNode = lView[TVIEW].data[nodeIndex];
-    let directiveStartIndex = tNode.directiveStart;
-    return tNode.flags & 2 /* TNodeFlags.isComponentHost */ ? lView[directiveStartIndex] : null;
+    const { directiveStart, componentOffset } = tNode;
+    return componentOffset > -1 ? lView[directiveStart + componentOffset] : null;
 }
 /**
  * Returns a map of local references (local reference name => element or directive instance) that
@@ -8365,16 +8361,16 @@ function getRootView(componentOrLView) {
     return lView;
 }
 /**
- * Returns the `RootContext` instance that is associated with
- * the application where the target is situated. It does this by walking the parent views until it
- * gets to the root view, then getting the context off of that.
+ * Returns the context information associated with the application where the target is situated. It
+ * does this by walking the parent views until it gets to the root view, then getting the context
+ * off of that.
  *
  * @param viewOrComponent the `LView` or component to get the root context for.
  */
 function getRootContext(viewOrComponent) {
     const rootView = getRootView(viewOrComponent);
     ngDevMode &&
-        assertDefined(rootView[CONTEXT], 'RootView has no context. Perhaps it is disconnected?');
+        assertDefined(rootView[CONTEXT], 'Root view has no context. Perhaps it is disconnected?');
     return rootView[CONTEXT];
 }
 /**
@@ -8891,9 +8887,10 @@ function getClosestRElement(tView, tNode, lView) {
     }
     else {
         ngDevMode && assertTNodeType(parentTNode, 3 /* TNodeType.AnyRNode */ | 4 /* TNodeType.Container */);
-        if (parentTNode.flags & 2 /* TNodeFlags.isComponentHost */) {
+        const { componentOffset } = parentTNode;
+        if (componentOffset > -1) {
             ngDevMode && assertTNodeForLView(parentTNode, lView);
-            const encapsulation = tView.data[parentTNode.directiveStart].encapsulation;
+            const { encapsulation } = tView.data[parentTNode.directiveStart + componentOffset];
             // We've got a parent which is an element in the current view. We just need to verify if the
             // parent element is not a component. Component's content nodes are not inserted immediately
             // because they will be projected, and so doing insert at this point would be wasteful.
@@ -9126,10 +9123,10 @@ function applyNodes(renderer, action, tNode, lView, parentRElement, beforeNode,
         if (isProjection) {
             if (action === 0 /* WalkTNodeTreeAction.Create */) {
                 rawSlotValue && attachPatchData(unwrapRNode(rawSlotValue), lView);
-                tNode.flags |= 4 /* TNodeFlags.isProjected */;
+                tNode.flags |= 2 /* TNodeFlags.isProjected */;
             }
         }
-        if ((tNode.flags & 64 /* TNodeFlags.isDetached */) !== 64 /* TNodeFlags.isDetached */) {
+        if ((tNode.flags & 32 /* TNodeFlags.isDetached */) !== 32 /* TNodeFlags.isDetached */) {
             if (tNodeType & 8 /* TNodeType.ElementContainer */) {
                 applyNodes(renderer, action, tNode.child, lView, parentRElement, beforeNode, false);
                 applyToElementOrContainer(action, renderer, parentRElement, rawSlotValue, beforeNode);
@@ -11183,6 +11180,7 @@ class TNode {
     index, //
     insertBeforeIndex, //
     injectorIndex, //
+    componentOffset, //
     directiveStart, //
     directiveEnd, //
     directiveStylingLast, //
@@ -11215,6 +11213,7 @@ class TNode {
         this.index = index;
         this.insertBeforeIndex = insertBeforeIndex;
         this.injectorIndex = injectorIndex;
+        this.componentOffset = componentOffset;
         this.directiveStart = directiveStart;
         this.directiveEnd = directiveEnd;
         this.directiveStylingLast = directiveStylingLast;
@@ -11292,21 +11291,19 @@ class TNode {
     }
     get flags_() {
         const flags = [];
-        if (this.flags & 16 /* TNodeFlags.hasClassInput */)
+        if (this.flags & 8 /* TNodeFlags.hasClassInput */)
             flags.push('TNodeFlags.hasClassInput');
-        if (this.flags & 8 /* TNodeFlags.hasContentQuery */)
+        if (this.flags & 4 /* TNodeFlags.hasContentQuery */)
             flags.push('TNodeFlags.hasContentQuery');
-        if (this.flags & 32 /* TNodeFlags.hasStyleInput */)
+        if (this.flags & 16 /* TNodeFlags.hasStyleInput */)
             flags.push('TNodeFlags.hasStyleInput');
-        if (this.flags & 128 /* TNodeFlags.hasHostBindings */)
+        if (this.flags & 64 /* TNodeFlags.hasHostBindings */)
             flags.push('TNodeFlags.hasHostBindings');
-        if (this.flags & 2 /* TNodeFlags.isComponentHost */)
-            flags.push('TNodeFlags.isComponentHost');
         if (this.flags & 1 /* TNodeFlags.isDirectiveHost */)
             flags.push('TNodeFlags.isDirectiveHost');
-        if (this.flags & 64 /* TNodeFlags.isDetached */)
+        if (this.flags & 32 /* TNodeFlags.isDetached */)
             flags.push('TNodeFlags.isDetached');
-        if (this.flags & 4 /* TNodeFlags.isProjected */)
+        if (this.flags & 2 /* TNodeFlags.isProjected */)
             flags.push('TNodeFlags.isProjected');
         return flags.join('|');
     }
@@ -11816,7 +11813,7 @@ function getOrCreateTNode(tView, index, type, name, attrs) {
             // See `TNodeType.Placeholder` and `LFrame.inI18n` for more context.
             // If the `TNode` was not pre-declared than it means it was not mentioned which means it was
             // removed, so we mark it as detached.
-            tNode.flags |= 64 /* TNodeFlags.isDetached */;
+            tNode.flags |= 32 /* TNodeFlags.isDetached */;
         }
     }
     else if (tNode.type & 64 /* TNodeType.Placeholder */) {
@@ -12078,28 +12075,6 @@ function refreshView(tView, lView, templateFn, context) {
         leaveView();
     }
 }
-function renderComponentOrTemplate(tView, lView, templateFn, context) {
-    const rendererFactory = lView[RENDERER_FACTORY];
-    // Check no changes mode is a dev only mode used to verify that bindings have not changed
-    // since they were assigned. We do not want to invoke renderer factory functions in that mode
-    // to avoid any possible side-effects.
-    const checkNoChangesMode = !!ngDevMode && isInCheckNoChangesMode();
-    const creationModeIsActive = isCreationMode(lView);
-    try {
-        if (!checkNoChangesMode && !creationModeIsActive && rendererFactory.begin) {
-            rendererFactory.begin();
-        }
-        if (creationModeIsActive) {
-            renderView(tView, lView, context);
-        }
-        refreshView(tView, lView, templateFn, context);
-    }
-    finally {
-        if (!checkNoChangesMode && !creationModeIsActive && rendererFactory.end) {
-            rendererFactory.end();
-        }
-    }
-}
 function executeTemplate(tView, lView, templateFn, rf, context) {
     const prevSelectedIndex = getSelectedIndex();
     const isUpdatePhase = rf & 2 /* RenderFlags.Update */;
@@ -12142,7 +12117,7 @@ function createDirectivesInstances(tView, lView, tNode) {
     if (!getBindingsEnabled())
         return;
     instantiateAllDirectives(tView, lView, tNode, getNativeByTNode(tNode, lView));
-    if ((tNode.flags & 128 /* TNodeFlags.hasHostBindings */) === 128 /* TNodeFlags.hasHostBindings */) {
+    if ((tNode.flags & 64 /* TNodeFlags.hasHostBindings */) === 64 /* TNodeFlags.hasHostBindings */) {
         invokeDirectivesHostBindings(tView, lView, tNode);
     }
 }
@@ -12170,7 +12145,7 @@ function saveResolvedLocalsInData(viewData, tNode, localRefExtractor = getNative
  * @param def ComponentDef
  * @returns TView
  */
-function getOrCreateTComponentView(def) {
+function getOrCreateComponentTView(def) {
     const tView = def.tView;
     // Create a TView if there isn't one, or recreate it if the first create pass didn't
     // complete successfully since we can't know for sure whether it's in a usable shape.
@@ -12342,6 +12317,7 @@ function createTNode(tView, tParent, type, index, value, attrs) {
         index, // index: number
         null, // insertBeforeIndex: null|-1|number|number[]
         injectorIndex, // injectorIndex: number
+        -1, // componentOffset: number
         -1, // directiveStart: number
         -1, // directiveEnd: number
         -1, // directiveStylingLast: number
@@ -12377,6 +12353,7 @@ function createTNode(tView, tParent, type, index, value, attrs) {
             directiveStart: -1,
             directiveEnd: -1,
             directiveStylingLast: -1,
+            componentOffset: -1,
             propertyBindings: null,
             flags: 0,
             providerIndexes: 0,
@@ -12440,24 +12417,23 @@ function initializeInputAndOutputAliases(tView, tNode) {
     let outputsStore = null;
     for (let i = start; i < end; i++) {
         const directiveDef = tViewData[i];
-        const directiveInputs = directiveDef.inputs;
+        inputsStore = generatePropertyAliases(directiveDef.inputs, i, inputsStore);
+        outputsStore = generatePropertyAliases(directiveDef.outputs, i, outputsStore);
         // Do not use unbound attributes as inputs to structural directives, since structural
         // directive inputs can only be set using microsyntax (e.g. `<div *dir="exp">`).
         // TODO(FW-1930): microsyntax expressions may also contain unbound/static attributes, which
         // should be set for inline templates.
-        const initialInputs = (tNodeAttrs !== null && !isInlineTemplate(tNode)) ?
-            generateInitialInputs(directiveInputs, tNodeAttrs) :
+        const initialInputs = (inputsStore !== null && tNodeAttrs !== null && !isInlineTemplate(tNode)) ?
+            generateInitialInputs(inputsStore, i, tNodeAttrs) :
             null;
         inputsFromAttrs.push(initialInputs);
-        inputsStore = generatePropertyAliases(directiveInputs, i, inputsStore);
-        outputsStore = generatePropertyAliases(directiveDef.outputs, i, outputsStore);
     }
     if (inputsStore !== null) {
         if (inputsStore.hasOwnProperty('class')) {
-            tNode.flags |= 16 /* TNodeFlags.hasClassInput */;
+            tNode.flags |= 8 /* TNodeFlags.hasClassInput */;
         }
         if (inputsStore.hasOwnProperty('style')) {
-            tNode.flags |= 32 /* TNodeFlags.hasStyleInput */;
+            tNode.flags |= 16 /* TNodeFlags.hasStyleInput */;
         }
     }
     tNode.initialInputs = inputsFromAttrs;
@@ -12578,7 +12554,7 @@ function instantiateRootComponent(tView, lView, def) {
         configureViewWithDirective(tView, rootTNode, lView, directiveIndex, def);
         initializeInputAndOutputAliases(tView, rootTNode);
     }
-    const directive = getNodeInjectable(lView, tView, rootTNode.directiveStart, rootTNode);
+    const directive = getNodeInjectable(lView, tView, rootTNode.directiveStart + rootTNode.componentOffset, rootTNode);
     attachPatchData(directive, lView);
     const native = getNativeByTNode(rootTNode, lView);
     if (native) {
@@ -12595,7 +12571,10 @@ function resolveDirectives(tView, lView, tNode, localRefs) {
     ngDevMode && assertFirstCreatePass(tView);
     let hasDirectives = false;
     if (getBindingsEnabled()) {
-        const directiveDefs = findDirectiveDefMatches(tView, lView, tNode);
+        const directiveDefsMatchedBySelectors = findDirectiveDefMatches(tView, lView, tNode);
+        const directiveDefs = directiveDefsMatchedBySelectors ?
+            findHostDirectiveDefs$1(directiveDefsMatchedBySelectors, tView, lView, tNode) :
+            null;
         const exportsMap = localRefs === null ? null : { '': -1 };
         if (directiveDefs !== null) {
             hasDirectives = true;
@@ -12624,9 +12603,9 @@ function resolveDirectives(tView, lView, tNode, localRefs) {
                 configureViewWithDirective(tView, tNode, lView, directiveIdx, def);
                 saveNameToExportMap(directiveIdx, def, exportsMap);
                 if (def.contentQueries !== null)
-                    tNode.flags |= 8 /* TNodeFlags.hasContentQuery */;
+                    tNode.flags |= 4 /* TNodeFlags.hasContentQuery */;
                 if (def.hostBindings !== null || def.hostAttrs !== null || def.hostVars !== 0)
-                    tNode.flags |= 128 /* TNodeFlags.hasHostBindings */;
+                    tNode.flags |= 64 /* TNodeFlags.hasHostBindings */;
                 const lifeCycleHooks = def.type.prototype;
                 // Only push a node index into the preOrderHooks array if this is the first
                 // pre-order hook found on this node.
@@ -12779,20 +12758,19 @@ function findDirectiveDefMatches(tView, viewData, tNode) {
                     if (ngDevMode) {
                         assertTNodeType(tNode, 2 /* TNodeType.Element */, `"${tNode.value}" tags cannot be used as component hosts. ` +
                             `Please use a different tag to activate the ${stringify(def.type)} component.`);
-                        if (tNode.flags & 2 /* TNodeFlags.isComponentHost */) {
+                        if (isComponentHost(tNode)) {
                             // If another component has been matched previously, it's the first element in the
                             // `matches` array, see how we store components/directives in `matches` below.
                             throwMultipleComponentError(tNode, matches[0].type, def.type);
                         }
                     }
-                    markAsComponentHost(tView, tNode);
+                    markAsComponentHost(tView, tNode, 0);
                     // The component is always stored first with directives after.
                     matches.unshift(def);
                 }
                 else {
                     matches.push(def);
                 }
-                def.applyHostDirectives?.(tView, viewData, tNode, matches);
             }
         }
     }
@@ -12800,15 +12778,36 @@ function findDirectiveDefMatches(tView, viewData, tNode) {
 }
 /**
  * Marks a given TNode as a component's host. This consists of:
- * - setting appropriate TNode flags;
+ * - setting the component offset on the TNode.
  * - storing index of component's host element so it will be queued for view refresh during CD.
  */
-function markAsComponentHost(tView, hostTNode) {
+function markAsComponentHost(tView, hostTNode, componentOffset) {
     ngDevMode && assertFirstCreatePass(tView);
-    hostTNode.flags |= 2 /* TNodeFlags.isComponentHost */;
+    ngDevMode && assertGreaterThan(componentOffset, -1, 'componentOffset must be great than -1');
+    hostTNode.componentOffset = componentOffset;
     (tView.components || (tView.components = ngDevMode ? new TViewComponents() : []))
         .push(hostTNode.index);
 }
+/**
+ * Given an array of directives that were matched by their selectors, this function
+ * produces a new array that also includes any host directives that have to be applied.
+ * @param selectorMatches Directives matched in a template based on their selectors.
+ * @param tView Current TView.
+ * @param lView Current LView.
+ * @param tNode Current TNode that is being matched.
+ */
+function findHostDirectiveDefs$1(selectorMatches, tView, lView, tNode) {
+    const matches = [];
+    for (const def of selectorMatches) {
+        if (def.findHostDirectiveDefs === null) {
+            matches.push(def);
+        }
+        else {
+            def.findHostDirectiveDefs(matches, def, tView, lView, tNode);
+        }
+    }
+    return matches;
+}
 /** Caches local names and their matching directive indices for query and template lookups. */
 function cacheMatchingLocalNames(tNode, localRefs, exportsMap) {
     if (localRefs) {
@@ -12880,7 +12879,7 @@ function configureViewWithDirective(tView, tNode, lView, directiveIndex, def) {
 }
 function addComponentLogic(lView, hostTNode, def) {
     const native = getNativeByTNode(hostTNode, lView);
-    const tView = getOrCreateTComponentView(def);
+    const tView = getOrCreateComponentTView(def);
     // Only component views should be added to the view tree directly. Embedded views are
     // accessed through their containers because they may be removed / re-added later.
     const rendererFactory = lView[RENDERER_FACTORY];
@@ -12951,10 +12950,11 @@ function setInputsFromAttrs(lView, directiveIndex, instance, def, tNode, initial
  *
  * <my-component name="Bess"></my-component>
  *
- * @param inputs The list of inputs from the directive def
- * @param attrs The static attrs on this node
+ * @param inputs Input alias map that was generated from the directive def inputs.
+ * @param directiveIndex Index of the directive that is currently being processed.
+ * @param attrs Static attrs on this node.
  */
-function generateInitialInputs(inputs, attrs) {
+function generateInitialInputs(inputs, directiveIndex, attrs) {
     let inputsToStore = null;
     let i = 0;
     while (i < attrs.length) {
@@ -12975,7 +12975,17 @@ function generateInitialInputs(inputs, attrs) {
         if (inputs.hasOwnProperty(attrName)) {
             if (inputsToStore === null)
                 inputsToStore = [];
-            inputsToStore.push(attrName, inputs[attrName], attrs[i + 1]);
+            // Find the input's public name from the input store. Note that we can be found easier
+            // through the directive def, but we want to do it using the inputs store so that it can
+            // account for host directive aliases.
+            const inputConfig = inputs[attrName];
+            for (let j = 0; j < inputConfig.length; j += 2) {
+                if (inputConfig[j] === directiveIndex) {
+                    inputsToStore.push(attrName, inputConfig[j + 1], attrs[i + 1]);
+                    // A directive can't have multiple inputs with the same name so we can break here.
+                    break;
+                }
+            }
         }
         i += 2;
     }
@@ -13207,63 +13217,32 @@ function markViewDirty(lView) {
     }
     return null;
 }
-function tickRootContext(rootContext) {
-    for (let i = 0; i < rootContext.components.length; i++) {
-        const rootComponent = rootContext.components[i];
-        const lView = readPatchedLView(rootComponent);
-        // We might not have an `LView` if the component was destroyed.
-        if (lView !== null) {
-            const tView = lView[TVIEW];
-            renderComponentOrTemplate(tView, lView, tView.template, rootComponent);
-        }
-    }
-}
-function detectChangesInternal(tView, lView, context) {
+function detectChangesInternal(tView, lView, context, notifyErrorHandler = true) {
     const rendererFactory = lView[RENDERER_FACTORY];
-    if (rendererFactory.begin)
+    // Check no changes mode is a dev only mode used to verify that bindings have not changed
+    // since they were assigned. We do not want to invoke renderer factory functions in that mode
+    // to avoid any possible side-effects.
+    const checkNoChangesMode = !!ngDevMode && isInCheckNoChangesMode();
+    if (!checkNoChangesMode && rendererFactory.begin)
         rendererFactory.begin();
     try {
         refreshView(tView, lView, tView.template, context);
     }
     catch (error) {
-        handleError(lView, error);
+        if (notifyErrorHandler) {
+            handleError(lView, error);
+        }
         throw error;
     }
     finally {
-        if (rendererFactory.end)
+        if (!checkNoChangesMode && rendererFactory.end)
             rendererFactory.end();
     }
 }
-/**
- * Synchronously perform change detection on a root view and its components.
- *
- * @param lView The view which the change detection should be performed on.
- */
-function detectChangesInRootView(lView) {
-    tickRootContext(lView[CONTEXT]);
-}
-function checkNoChangesInternal(tView, view, context) {
-    setIsInCheckNoChangesMode(true);
-    try {
-        detectChangesInternal(tView, view, context);
-    }
-    finally {
-        setIsInCheckNoChangesMode(false);
-    }
-}
-/**
- * Checks the change detector on a root view and its components, and throws if any changes are
- * detected.
- *
- * This is used in development mode to verify that running change detection doesn't
- * introduce other changes.
- *
- * @param lView The view which the change detection should be checked on.
- */
-function checkNoChangesInRootView(lView) {
+function checkNoChangesInternal(tView, lView, context, notifyErrorHandler = true) {
     setIsInCheckNoChangesMode(true);
     try {
-        detectChangesInRootView(lView);
+        detectChangesInternal(tView, lView, context, notifyErrorHandler);
     }
     finally {
         setIsInCheckNoChangesMode(false);
@@ -13756,11 +13735,17 @@ class RootViewRef extends ViewRef$1 {
         this._view = _view;
     }
     detectChanges() {
-        detectChangesInRootView(this._view);
+        const lView = this._view;
+        const tView = lView[TVIEW];
+        const context = lView[CONTEXT];
+        detectChangesInternal(tView, lView, context, false);
     }
     checkNoChanges() {
         if (ngDevMode) {
-            checkNoChangesInRootView(this._view);
+            const lView = this._view;
+            const tView = lView[TVIEW];
+            const context = lView[CONTEXT];
+            checkNoChangesInternal(tView, lView, context, false);
         }
     }
     get context() {
@@ -13827,7 +13812,7 @@ class ChainedInjector {
     }
 }
 /**
- * Render3 implementation of {@link viewEngine_ComponentFactory}.
+ * ComponentFactory interface implementation.
  */
 class ComponentFactory extends ComponentFactory$1 {
     /**
@@ -13877,10 +13862,9 @@ class ComponentFactory extends ComponentFactory$1 {
             createElementNode(rendererFactory.createRenderer(null, this.componentDef), elementName, getNamespace(elementName));
         const rootFlags = this.componentDef.onPush ? 32 /* LViewFlags.Dirty */ | 256 /* LViewFlags.IsRoot */ :
             16 /* LViewFlags.CheckAlways */ | 256 /* LViewFlags.IsRoot */;
-        const rootContext = createRootContext();
         // Create the root view. Uses empty TView and ContentTemplate.
         const rootTView = createTView(0 /* TViewType.Root */, null, null, 1, 0, null, null, null, null, null);
-        const rootLView = createLView(null, rootTView, rootContext, rootFlags, null, null, rendererFactory, hostRenderer, sanitizer, rootViewInjector, null);
+        const rootLView = createLView(null, rootTView, null, rootFlags, null, null, rendererFactory, hostRenderer, sanitizer, rootViewInjector, null);
         // rootView is the parent when bootstrapping
         // TODO(misko): it looks like we are entering view here but we don't really need to as
         // `renderView` does that. However as the code is written it is needed because
@@ -13924,7 +13908,8 @@ class ComponentFactory extends ComponentFactory$1 {
             // TODO: should LifecycleHooksFeature and other host features be generated by the compiler and
             // executed here?
             // Angular 5 reference: https://stackblitz.com/edit/lifecycle-hooks-vcref
-            component = createRootComponent(componentView, this.componentDef, rootLView, rootContext, [LifecycleHooksFeature]);
+            component =
+                createRootComponent(componentView, this.componentDef, rootLView, [LifecycleHooksFeature]);
             renderView(rootTView, rootLView, null);
         }
         finally {
@@ -14030,10 +14015,10 @@ function createRootComponentView(rNode, def, rootView, rendererFactory, hostRend
         }
     }
     const viewRenderer = rendererFactory.createRenderer(rNode, def);
-    const componentView = createLView(rootView, getOrCreateTComponentView(def), null, def.onPush ? 32 /* LViewFlags.Dirty */ : 16 /* LViewFlags.CheckAlways */, rootView[index], tNode, rendererFactory, viewRenderer, sanitizer || null, null, null);
+    const componentView = createLView(rootView, getOrCreateComponentTView(def), null, def.onPush ? 32 /* LViewFlags.Dirty */ : 16 /* LViewFlags.CheckAlways */, rootView[index], tNode, rendererFactory, viewRenderer, sanitizer || null, null, null);
     if (tView.firstCreatePass) {
         diPublicInInjector(getOrCreateNodeInjectorForNode(tNode, rootView), tView, def.type);
-        markAsComponentHost(tView, tNode);
+        markAsComponentHost(tView, tNode, 0);
         initTNodeFlags(tNode, rootView.length, 1);
     }
     addToViewTree(rootView, componentView);
@@ -14044,12 +14029,13 @@ function createRootComponentView(rNode, def, rootView, rendererFactory, hostRend
  * Creates a root component and sets it up with features and host bindings.Shared by
  * renderComponent() and ViewContainerRef.createComponent().
  */
-function createRootComponent(componentView, componentDef, rootLView, rootContext, hostFeatures) {
+function createRootComponent(componentView, componentDef, rootLView, hostFeatures) {
     const tView = rootLView[TVIEW];
     // Create directive instance with factory() and store at next index in viewData
     const component = instantiateRootComponent(tView, rootLView, componentDef);
-    rootContext.components.push(component);
-    componentView[CONTEXT] = component;
+    // Root view only contains an instance of this component,
+    // so we use a reference to that component instance as a context.
+    componentView[CONTEXT] = rootLView[CONTEXT] = component;
     if (hostFeatures !== null) {
         for (const feature of hostFeatures) {
             feature(component, componentDef);
@@ -14073,9 +14059,6 @@ function createRootComponent(componentView, componentDef, rootLView, rootContext
     }
     return component;
 }
-function createRootContext() {
-    return { components: [] };
-}
 /**
  * Used to enable lifecycle hooks on the root component.
  *
@@ -14332,6 +14315,13 @@ function ɵɵCopyDefinitionFeature(definition) {
     }
 }
 
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
 /**
  * This feature add the host directives behavior to a directive definition by patching a
  * function onto it. The expectation is that the runtime will invoke the function during
@@ -14353,29 +14343,43 @@ function ɵɵCopyDefinitionFeature(definition) {
  * @codeGenApi
  */
 function ɵɵHostDirectivesFeature(rawHostDirectives) {
-    const unwrappedHostDirectives = Array.isArray(rawHostDirectives) ? rawHostDirectives : rawHostDirectives();
-    const hostDirectives = unwrappedHostDirectives.map(dir => typeof dir === 'function' ? { directive: dir, inputs: EMPTY_OBJ, outputs: EMPTY_OBJ } : {
-        directive: dir.directive,
-        inputs: bindingArrayToMap(dir.inputs),
-        outputs: bindingArrayToMap(dir.outputs)
-    });
     return (definition) => {
-        // TODO(crisbeto): implement host directive matching logic.
-        definition.applyHostDirectives =
-            (tView, viewData, tNode, matches) => { };
+        definition.findHostDirectiveDefs = findHostDirectiveDefs;
+        definition.hostDirectives =
+            (Array.isArray(rawHostDirectives) ? rawHostDirectives : rawHostDirectives()).map(dir => {
+                return typeof dir === 'function' ?
+                    { directive: resolveForwardRef(dir), inputs: EMPTY_OBJ, outputs: EMPTY_OBJ } :
+                    {
+                        directive: resolveForwardRef(dir.directive),
+                        inputs: bindingArrayToMap(dir.inputs),
+                        outputs: bindingArrayToMap(dir.outputs)
+                    };
+            });
     };
 }
+function findHostDirectiveDefs(matches, def, tView, lView, tNode) {
+    if (def.hostDirectives !== null) {
+        for (const hostDirectiveConfig of def.hostDirectives) {
+            const hostDirectiveDef = getDirectiveDef(hostDirectiveConfig.directive);
+            // TODO(crisbeto): assert that the def exists.
+            // Host directives execute before the host so that its host bindings can be overwritten.
+            findHostDirectiveDefs(matches, hostDirectiveDef, tView, lView, tNode);
+        }
+    }
+    // Push the def itself at the end since it needs to execute after the host directives.
+    matches.push(def);
+}
 /**
  * Converts an array in the form of `['publicName', 'alias', 'otherPublicName', 'otherAlias']` into
  * a map in the form of `{publicName: 'alias', otherPublicName: 'otherAlias'}`.
  */
 function bindingArrayToMap(bindings) {
-    if (!bindings || bindings.length === 0) {
+    if (bindings === undefined || bindings.length === 0) {
         return EMPTY_OBJ;
     }
     const result = {};
-    for (let i = 1; i < bindings.length; i += 2) {
-        result[bindings[i - 1]] = bindings[i];
+    for (let i = 0; i < bindings.length; i += 2) {
+        result[bindings[i]] = bindings[i + 1];
     }
     return result;
 }
@@ -15334,7 +15338,7 @@ function ɵɵelementStart(index, name, attrsIndex, localRefsIndex) {
     if (styles !== null) {
         writeDirectStyle(renderer, native, styles);
     }
-    if ((tNode.flags & 64 /* TNodeFlags.isDetached */) !== 64 /* TNodeFlags.isDetached */) {
+    if ((tNode.flags & 32 /* TNodeFlags.isDetached */) !== 32 /* TNodeFlags.isDetached */) {
         // In the i18n case, the translation may have removed this element, so only add it if it is not
         // detached. See `TNodeType.Placeholder` and `LFrame.inI18n` for more context.
         appendChild(tView, lView, native, tNode);
@@ -15772,9 +15776,7 @@ function wrapListener(tNode, lView, context, listenerFn, wrapWithPreventDefault)
         }
         // In order to be backwards compatible with View Engine, events on component host nodes
         // must also mark the component view itself dirty (i.e. the view that it owns).
-        const startView = tNode.flags & 2 /* TNodeFlags.isComponentHost */ ?
-            getComponentLViewByIndex(tNode.index, lView) :
-            lView;
+        const startView = tNode.componentOffset > -1 ? getComponentLViewByIndex(tNode.index, lView) : lView;
         markViewDirty(startView);
         let result = executeListenerWithErrorHandling(lView, context, listenerFn, e);
         // A just-invoked listener function might have coalesced listeners so we need to check for
@@ -15931,7 +15933,7 @@ function ɵɵprojection(nodeIndex, selectorIndex = 0, attrs) {
         tProjectionNode.projection = selectorIndex;
     // `<ng-content>` has no content
     setCurrentTNodeAsNotParent();
-    if ((tProjectionNode.flags & 64 /* TNodeFlags.isDetached */) !== 64 /* TNodeFlags.isDetached */) {
+    if ((tProjectionNode.flags & 32 /* TNodeFlags.isDetached */) !== 32 /* TNodeFlags.isDetached */) {
         // re-distribution of projectable nodes is stored on a component's view level
         applyProjection(tView, lView, tProjectionNode);
     }
@@ -17845,7 +17847,7 @@ function normalizeSuffix(value, suffix) {
  * @param isClassBased `true` if `class` (`false` if `style`)
  */
 function hasStylingInputShadow(tNode, isClassBased) {
-    return (tNode.flags & (isClassBased ? 16 /* TNodeFlags.hasClassInput */ : 32 /* TNodeFlags.hasStyleInput */)) !== 0;
+    return (tNode.flags & (isClassBased ? 8 /* TNodeFlags.hasClassInput */ : 16 /* TNodeFlags.hasStyleInput */)) !== 0;
 }
 
 /**
@@ -19537,7 +19539,7 @@ function processI18nInsertBefore(renderer, childTNode, lView, childRNode, parent
             anchorRNode = i18nParent;
             i18nParent = parentRElement;
         }
-        if (i18nParent !== null && (childTNode.flags & 2 /* TNodeFlags.isComponentHost */) === 0) {
+        if (i18nParent !== null && childTNode.componentOffset === -1) {
             for (let i = 1; i < tNodeInsertBeforeIndex.length; i++) {
                 // No need to `unwrapRNode` because all of the indexes point to i18n text nodes.
                 // see `assertDomNode` below.
@@ -20968,9 +20970,6 @@ function walkIcuTree(tView, tIcu, lView, sharedUpdateOpCodes, create, remove, up
                                 if (URI_ATTRS[lowerAttrName]) {
                                     generateBindingUpdateOpCodes(update, attr.value, newIndex, attr.name, 0, _sanitizeUrl);
                                 }
-                                else if (SRCSET_ATTRS[lowerAttrName]) {
-                                    generateBindingUpdateOpCodes(update, attr.value, newIndex, attr.name, 0, sanitizeSrcset);
-                                }
                                 else {
                                     generateBindingUpdateOpCodes(update, attr.value, newIndex, attr.name, 0, null);
                                 }
@@ -21939,7 +21938,7 @@ function getOwningComponent(elementOrDir) {
  */
 function getRootComponents(elementOrDir) {
     const lView = readPatchedLView(elementOrDir);
-    return lView !== null ? [...getRootContext(lView).components] : [];
+    return lView !== null ? [getRootContext(lView)] : [];
 }
 /**
  * Retrieves an `Injector` associated with an element, component or directive instance.
@@ -25041,7 +25040,12 @@ function directiveMetadata(type, metadata) {
         providers: metadata.providers || null,
         viewQueries: extractQueriesMetadata(type, propMetadata, isViewQuery),
         isStandalone: !!metadata.standalone,
-        hostDirectives: null,
+        hostDirectives: 
+        // TODO(crisbeto): remove the `as any` usage here and down in the `map` call once
+        // host directives are exposed in the public API.
+        metadata
+            .hostDirectives?.map((directive) => typeof directive === 'function' ? { directive } : directive) ||
+            null
     };
 }
 /**
@@ -28295,7 +28299,7 @@ function _queryNodeChildren(tNode, lView, predicate, matches, elementsOnly, root
     if (rootNativeNode !== nativeNode) {
         // To determine the next node to be processed, we need to use the next or the projectionNext
         // link, depending on whether the current node has been projected.
-        const nextTNode = (tNode.flags & 4 /* TNodeFlags.isProjected */) ? tNode.projectionNext : tNode.next;
+        const nextTNode = (tNode.flags & 2 /* TNodeFlags.isProjected */) ? tNode.projectionNext : tNode.next;
         if (nextTNode) {
             _queryNodeChildren(nextTNode, lView, predicate, matches, elementsOnly, rootNativeNode);
         }