` and `MyDir` with `@Input('style')` we need to write to * directive input. */ function setDirectiveInputsWhichShadowsStyling(tView, tNode, lView, value, isClassBased) { const inputs = tNode.inputs; const property = isClassBased ? 'class' : 'style'; // We support both 'class' and `className` hence the fallback. setInputsForProperty(tView, lView, inputs[property], property, value); } function elementStartFirstCreatePass(index, tView, lView, name, attrsIndex, localRefsIndex) { ngDevMode && assertFirstCreatePass(tView); ngDevMode && ngDevMode.firstCreatePass++; const tViewConsts = tView.consts; const attrs = getConstant(tViewConsts, attrsIndex); const tNode = getOrCreateTNode(tView, index, 2 /* TNodeType.Element */, name, attrs); resolveDirectives(tView, lView, tNode, getConstant(tViewConsts, localRefsIndex)); if (tNode.attrs !== null) { computeStaticStyling(tNode, tNode.attrs, false); } if (tNode.mergedAttrs !== null) { computeStaticStyling(tNode, tNode.mergedAttrs, true); } if (tView.queries !== null) { tView.queries.elementStart(tView, tNode); } return tNode; } /** * Create DOM element. The instruction must later be followed by `elementEnd()` call. * * @param index Index of the element in the LView array * @param name Name of the DOM Node * @param attrsIndex Index of the element's attributes in the `consts` array. * @param localRefsIndex Index of the element's local references in the `consts` array. * @returns This function returns itself so that it may be chained. * * Attributes and localRefs are passed as an array of strings where elements with an even index * hold an attribute name and elements with an odd index hold an attribute value, ex.: * ['id', 'warning5', 'class', 'alert'] * * @codeGenApi */ function ÉµÉµelementStart(index, name, attrsIndex, localRefsIndex) { const lView = getLView(); const tView = getTView(); const adjustedIndex = HEADER_OFFSET + index; ngDevMode && assertEqual(getBindingIndex(), tView.bindingStartIndex, 'elements should be created before any bindings'); ngDevMode && assertIndexInRange(lView, adjustedIndex); const renderer = lView[RENDERER]; const tNode = tView.firstCreatePass ? elementStartFirstCreatePass(adjustedIndex, tView, lView, name, attrsIndex, localRefsIndex) : tView.data[adjustedIndex]; const native = _locateOrCreateElementNode(tView, lView, tNode, renderer, name, index); lView[adjustedIndex] = native; const hasDirectives = isDirectiveHost(tNode); if (ngDevMode && tView.firstCreatePass) { validateElementIsKnown(native, lView, tNode.value, tView.schemas, hasDirectives); } setCurrentTNode(tNode, true); setupStaticAttributes(renderer, native, tNode); if ((tNode.flags & 32 /* TNodeFlags.isDetached */) !== 32 /* TNodeFlags.isDetached */ && wasLastNodeCreated()) { // 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); } // any immediate children of a component or template container must be pre-emptively // monkey-patched with the component view data so that the element can be inspected // later on using any element discovery utility methods (see `element_discovery.ts`) if (getElementDepthCount() === 0) { attachPatchData(native, lView); } increaseElementDepthCount(); if (hasDirectives) { createDirectivesInstances(tView, lView, tNode); executeContentQueries(tView, tNode, lView); } if (localRefsIndex !== null) { saveResolvedLocalsInData(lView, tNode); } return ÉµÉµelementStart; } /** * Mark the end of the element. * @returns This function returns itself so that it may be chained. * * @codeGenApi */ function ÉµÉµelementEnd() { let currentTNode = getCurrentTNode(); ngDevMode && assertDefined(currentTNode, 'No parent node to close.'); if (isCurrentTNodeParent()) { setCurrentTNodeAsNotParent(); } else { ngDevMode && assertHasParent(getCurrentTNode()); currentTNode = currentTNode.parent; setCurrentTNode(currentTNode, false); } const tNode = currentTNode; ngDevMode && assertTNodeType(tNode, 3 /* TNodeType.AnyRNode */); if (isSkipHydrationRootTNode(tNode)) { leaveSkipHydrationBlock(); } decreaseElementDepthCount(); const tView = getTView(); if (tView.firstCreatePass) { registerPostOrderHooks(tView, currentTNode); if (isContentQueryHost(currentTNode)) { tView.queries.elementEnd(currentTNode); } } if (tNode.classesWithoutHost != null && hasClassInput(tNode)) { setDirectiveInputsWhichShadowsStyling(tView, tNode, getLView(), tNode.classesWithoutHost, true); } if (tNode.stylesWithoutHost != null && hasStyleInput(tNode)) { setDirectiveInputsWhichShadowsStyling(tView, tNode, getLView(), tNode.stylesWithoutHost, false); } return ÉµÉµelementEnd; } /** * Creates an empty element using {@link elementStart} and {@link elementEnd} * * @param index Index of the element in the data array * @param name Name of the DOM Node * @param attrsIndex Index of the element's attributes in the `consts` array. * @param localRefsIndex Index of the element's local references in the `consts` array. * @returns This function returns itself so that it may be chained. * * @codeGenApi */ function ÉµÉµelement(index, name, attrsIndex, localRefsIndex) { ÉµÉµelementStart(index, name, attrsIndex, localRefsIndex); ÉµÉµelementEnd(); return ÉµÉµelement; } let _locateOrCreateElementNode = (tView, lView, tNode, renderer, name, index) => { lastNodeWasCreated(true); return createElementNode(renderer, name, getNamespace$1()); }; /** * Enables hydration code path (to lookup existing elements in DOM) * in addition to the regular creation mode of element nodes. */ function locateOrCreateElementNodeImpl(tView, lView, tNode, renderer, name, index) { const hydrationInfo = lView[HYDRATION]; const isNodeCreationMode = !hydrationInfo || isInSkipHydrationBlock$1() || isDisconnectedNode$1(hydrationInfo, index); lastNodeWasCreated(isNodeCreationMode); // Regular creation mode. if (isNodeCreationMode) { return createElementNode(renderer, name, getNamespace$1()); } // Hydration mode, looking up an existing element in DOM. const native = locateNextRNode(hydrationInfo, tView, lView, tNode); ngDevMode && validateMatchingNode(native, Node.ELEMENT_NODE, name, lView, tNode); ngDevMode && markRNodeAsClaimedByHydration(native); // This element might also be an anchor of a view container. if (getSerializedContainerViews(hydrationInfo, index)) { // Important note: this element acts as an anchor, but it's **not** a part // of the embedded view, so we start the segment **after** this element, taking // a reference to the next sibling. For example, the following template: // `

` is represented in the DOM as `

...`, // so while processing a `

` instruction, point to the next sibling as a // start of a segment. ngDevMode && validateNodeExists(native.nextSibling, lView, tNode); setSegmentHead(hydrationInfo, index, native.nextSibling); } // Checks if the skip hydration attribute is present during hydration so we know to // skip attempting to hydrate this block. if (hydrationInfo && hasNgSkipHydrationAttr(tNode)) { if (isComponentHost(tNode)) { enterSkipHydrationBlock(tNode); // Since this isn't hydratable, we need to empty the node // so there's no duplicate content after render clearElementContents(native); ngDevMode && ngDevMode.componentsSkippedHydration++; } else if (ngDevMode) { // If this is not a component host, throw an error. // Hydration can be skipped on per-component basis only. throw invalidSkipHydrationHost(native); } } return native; } function enableLocateOrCreateElementNodeImpl() { _locateOrCreateElementNode = locateOrCreateElementNodeImpl; } function elementContainerStartFirstCreatePass(index, tView, lView, attrsIndex, localRefsIndex) { ngDevMode && ngDevMode.firstCreatePass++; const tViewConsts = tView.consts; const attrs = getConstant(tViewConsts, attrsIndex); const tNode = getOrCreateTNode(tView, index, 8 /* TNodeType.ElementContainer */, 'ng-container', attrs); // While ng-container doesn't necessarily support styling, we use the style context to identify // and execute directives on the ng-container. if (attrs !== null) { computeStaticStyling(tNode, attrs, true); } const localRefs = getConstant(tViewConsts, localRefsIndex); resolveDirectives(tView, lView, tNode, localRefs); if (tView.queries !== null) { tView.queries.elementStart(tView, tNode); } return tNode; } /** * Creates a logical container for other nodes () backed by a comment node in the DOM. * The instruction must later be followed by `elementContainerEnd()` call. * * @param index Index of the element in the LView array * @param attrsIndex Index of the container attributes in the `consts` array. * @param localRefsIndex Index of the container's local references in the `consts` array. * @returns This function returns itself so that it may be chained. * * Even if this instruction accepts a set of attributes no actual attribute values are propagated to * the DOM (as a comment node can't have attributes). Attributes are here only for directive * matching purposes and setting initial inputs of directives. * * @codeGenApi */ function ÉµÉµelementContainerStart(index, attrsIndex, localRefsIndex) { const lView = getLView(); const tView = getTView(); const adjustedIndex = index + HEADER_OFFSET; ngDevMode && assertIndexInRange(lView, adjustedIndex); ngDevMode && assertEqual(getBindingIndex(), tView.bindingStartIndex, 'element containers should be created before any bindings'); const tNode = tView.firstCreatePass ? elementContainerStartFirstCreatePass(adjustedIndex, tView, lView, attrsIndex, localRefsIndex) : tView.data[adjustedIndex]; setCurrentTNode(tNode, true); const comment = _locateOrCreateElementContainerNode(tView, lView, tNode, index); lView[adjustedIndex] = comment; if (wasLastNodeCreated()) { appendChild(tView, lView, comment, tNode); } attachPatchData(comment, lView); if (isDirectiveHost(tNode)) { createDirectivesInstances(tView, lView, tNode); executeContentQueries(tView, tNode, lView); } if (localRefsIndex != null) { saveResolvedLocalsInData(lView, tNode); } return ÉµÉµelementContainerStart; } /** * Mark the end of the . * @returns This function returns itself so that it may be chained. * * @codeGenApi */ function ÉµÉµelementContainerEnd() { let currentTNode = getCurrentTNode(); const tView = getTView(); if (isCurrentTNodeParent()) { setCurrentTNodeAsNotParent(); } else { ngDevMode && assertHasParent(currentTNode); currentTNode = currentTNode.parent; setCurrentTNode(currentTNode, false); } ngDevMode && assertTNodeType(currentTNode, 8 /* TNodeType.ElementContainer */); if (tView.firstCreatePass) { registerPostOrderHooks(tView, currentTNode); if (isContentQueryHost(currentTNode)) { tView.queries.elementEnd(currentTNode); } } return ÉµÉµelementContainerEnd; } /** * Creates an empty logical container using {@link elementContainerStart} * and {@link elementContainerEnd} * * @param index Index of the element in the LView array * @param attrsIndex Index of the container attributes in the `consts` array. * @param localRefsIndex Index of the container's local references in the `consts` array. * @returns This function returns itself so that it may be chained. * * @codeGenApi */ function ÉµÉµelementContainer(index, attrsIndex, localRefsIndex) { ÉµÉµelementContainerStart(index, attrsIndex, localRefsIndex); ÉµÉµelementContainerEnd(); return ÉµÉµelementContainer; } let _locateOrCreateElementContainerNode = (tView, lView, tNode, index) => { lastNodeWasCreated(true); return createCommentNode(lView[RENDERER], ngDevMode ? 'ng-container' : ''); }; /** * Enables hydration code path (to lookup existing elements in DOM) * in addition to the regular creation mode of comment nodes that * represent 's anchor. */ function locateOrCreateElementContainerNode(tView, lView, tNode, index) { let comment; const hydrationInfo = lView[HYDRATION]; const isNodeCreationMode = !hydrationInfo || isInSkipHydrationBlock$1(); lastNodeWasCreated(isNodeCreationMode); // Regular creation mode. if (isNodeCreationMode) { return createCommentNode(lView[RENDERER], ngDevMode ? 'ng-container' : ''); } // Hydration mode, looking up existing elements in DOM. const currentRNode = locateNextRNode(hydrationInfo, tView, lView, tNode); ngDevMode && validateNodeExists(currentRNode, lView, tNode); const ngContainerSize = getNgContainerSize(hydrationInfo, index); ngDevMode && assertNumber(ngContainerSize, 'Unexpected state: hydrating an , ' + 'but no hydration info is available.'); setSegmentHead(hydrationInfo, index, currentRNode); comment = siblingAfter(ngContainerSize, currentRNode); if (ngDevMode) { validateMatchingNode(comment, Node.COMMENT_NODE, null, lView, tNode); markRNodeAsClaimedByHydration(comment); } return comment; } function enableLocateOrCreateElementContainerNodeImpl() { _locateOrCreateElementContainerNode = locateOrCreateElementContainerNode; } /** * Returns the current OpaqueViewState instance. * * Used in conjunction with the restoreView() instruction to save a snapshot * of the current view and restore it when listeners are invoked. This allows * walking the declaration view tree in listeners to get vars from parent views. * * @codeGenApi */ function ÉµÉµgetCurrentView() { return getLView(); } /** * Determine if the argument is shaped like a Promise */ function isPromise(obj) { // allow any Promise/A+ compliant thenable. // It's up to the caller to ensure that obj.then conforms to the spec return !!obj && typeof obj.then === 'function'; } /** * Determine if the argument is a Subscribable */ function isSubscribable(obj) { return !!obj && typeof obj.subscribe === 'function'; } /** * Adds an event listener to the current node. * * If an output exists on one of the node's directives, it also subscribes to the output * and saves the subscription for later cleanup. * * @param eventName Name of the event * @param listenerFn The function to be called when event emits * @param useCapture Whether or not to use capture in event listener - this argument is a reminder * from the Renderer3 infrastructure and should be removed from the instruction arguments * @param eventTargetResolver Function that returns global target information in case this listener * should be attached to a global object like window, document or body * * @codeGenApi */ function ÉµÉµlistener(eventName, listenerFn, useCapture, eventTargetResolver) { const lView = getLView(); const tView = getTView(); const tNode = getCurrentTNode(); listenerInternal(tView, lView, lView[RENDERER], tNode, eventName, listenerFn, eventTargetResolver); return ÉµÉµlistener; } /** * Registers a synthetic host listener (e.g. `(@foo.start)`) on a component or directive. * * This instruction is for compatibility purposes and is designed to ensure that a * synthetic host listener (e.g. `@HostListener('@foo.start')`) properly gets rendered * in the component's renderer. Normally all host listeners are evaluated with the * parent component's renderer, but, in the case of animation @triggers, they need * to be evaluated with the sub component's renderer (because that's where the * animation triggers are defined). * * Do not use this instruction as a replacement for `listener`. This instruction * only exists to ensure compatibility with the ViewEngine's host binding behavior. * * @param eventName Name of the event * @param listenerFn The function to be called when event emits * @param useCapture Whether or not to use capture in event listener * @param eventTargetResolver Function that returns global target information in case this listener * should be attached to a global object like window, document or body * * @codeGenApi */ function ÉµÉµsyntheticHostListener(eventName, listenerFn) { const tNode = getCurrentTNode(); const lView = getLView(); const tView = getTView(); const currentDef = getCurrentDirectiveDef(tView.data); const renderer = loadComponentRenderer(currentDef, tNode, lView); listenerInternal(tView, lView, renderer, tNode, eventName, listenerFn); return ÉµÉµsyntheticHostListener; } /** * A utility function that checks if a given element has already an event handler registered for an * event with a specified name. The TView.cleanup data structure is used to find out which events * are registered for a given element. */ function findExistingListener(tView, lView, eventName, tNodeIdx) { const tCleanup = tView.cleanup; if (tCleanup != null) { for (let i = 0; i < tCleanup.length - 1; i += 2) { const cleanupEventName = tCleanup[i]; if (cleanupEventName === eventName && tCleanup[i + 1] === tNodeIdx) { // We have found a matching event name on the same node but it might not have been // registered yet, so we must explicitly verify entries in the LView cleanup data // structures. const lCleanup = lView[CLEANUP]; const listenerIdxInLCleanup = tCleanup[i + 2]; return lCleanup.length > listenerIdxInLCleanup ? lCleanup[listenerIdxInLCleanup] : null; } // TView.cleanup can have a mix of 4-elements entries (for event handler cleanups) or // 2-element entries (for directive and queries destroy hooks). As such we can encounter // blocks of 4 or 2 items in the tView.cleanup and this is why we iterate over 2 elements // first and jump another 2 elements if we detect listeners cleanup (4 elements). Also check // documentation of TView.cleanup for more details of this data structure layout. if (typeof cleanupEventName === 'string') { i += 2; } } } return null; } function listenerInternal(tView, lView, renderer, tNode, eventName, listenerFn, eventTargetResolver) { const isTNodeDirectiveHost = isDirectiveHost(tNode); const firstCreatePass = tView.firstCreatePass; const tCleanup = firstCreatePass && getOrCreateTViewCleanup(tView); const context = lView[CONTEXT]; // When the ÉµÉµlistener instruction was generated and is executed we know that there is either a // native listener or a directive output on this element. As such we we know that we will have to // register a listener and store its cleanup function on LView. const lCleanup = getOrCreateLViewCleanup(lView); ngDevMode && assertTNodeType(tNode, 3 /* TNodeType.AnyRNode */ | 12 /* TNodeType.AnyContainer */); let processOutputs = true; // Adding a native event listener is applicable when: // - The corresponding TNode represents a DOM element. // - The event target has a resolver (usually resulting in a global object, // such as `window` or `document`). if ((tNode.type & 3 /* TNodeType.AnyRNode */) || eventTargetResolver) { const native = getNativeByTNode(tNode, lView); const target = eventTargetResolver ? eventTargetResolver(native) : native; const lCleanupIndex = lCleanup.length; const idxOrTargetGetter = eventTargetResolver ? (_lView) => eventTargetResolver(unwrapRNode(_lView[tNode.index])) : tNode.index; // In order to match current behavior, native DOM event listeners must be added for all // events (including outputs). // There might be cases where multiple directives on the same element try to register an event // handler function for the same event. In this situation we want to avoid registration of // several native listeners as each registration would be intercepted by NgZone and // trigger change detection. This would mean that a single user action would result in several // change detections being invoked. To avoid this situation we want to have only one call to // native handler registration (for the same element and same type of event). // // In order to have just one native event handler in presence of multiple handler functions, // we just register a first handler function as a native event listener and then chain // (coalesce) other handler functions on top of the first native handler function. let existingListener = null; // Please note that the coalescing described here doesn't happen for events specifying an // alternative target (ex. (document:click)) - this is to keep backward compatibility with the // view engine. // Also, we don't have to search for existing listeners is there are no directives // matching on a given node as we can't register multiple event handlers for the same event in // a template (this would mean having duplicate attributes). if (!eventTargetResolver && isTNodeDirectiveHost) { existingListener = findExistingListener(tView, lView, eventName, tNode.index); } if (existingListener !== null) { // Attach a new listener to coalesced listeners list, maintaining the order in which // listeners are registered. For performance reasons, we keep a reference to the last // listener in that list (in `__ngLastListenerFn__` field), so we can avoid going through // the entire set each time we need to add a new listener. const lastListenerFn = existingListener.__ngLastListenerFn__ || existingListener; lastListenerFn.__ngNextListenerFn__ = listenerFn; existingListener.__ngLastListenerFn__ = listenerFn; processOutputs = false; } else { listenerFn = wrapListener(tNode, lView, context, listenerFn, false /** preventDefault */); const cleanupFn = renderer.listen(target, eventName, listenerFn); ngDevMode && ngDevMode.rendererAddEventListener++; lCleanup.push(listenerFn, cleanupFn); tCleanup && tCleanup.push(eventName, idxOrTargetGetter, lCleanupIndex, lCleanupIndex + 1); } } else { // Even if there is no native listener to add, we still need to wrap the listener so that OnPush // ancestors are marked dirty when an event occurs. listenerFn = wrapListener(tNode, lView, context, listenerFn, false /** preventDefault */); } // subscribe to directive outputs const outputs = tNode.outputs; let props; if (processOutputs && outputs !== null && (props = outputs[eventName])) { const propsLength = props.length; if (propsLength) { for (let i = 0; i < propsLength; i += 2) { const index = props[i]; ngDevMode && assertIndexInRange(lView, index); const minifiedName = props[i + 1]; const directiveInstance = lView[index]; const output = directiveInstance[minifiedName]; if (ngDevMode && !isSubscribable(output)) { throw new Error(`@Output ${minifiedName} not initialized in '${directiveInstance.constructor.name}'.`); } const subscription = output.subscribe(listenerFn); const idx = lCleanup.length; lCleanup.push(listenerFn, subscription); tCleanup && tCleanup.push(eventName, tNode.index, idx, -(idx + 1)); } } } } function executeListenerWithErrorHandling(lView, context, listenerFn, e) { try { profiler(6 /* ProfilerEvent.OutputStart */, context, listenerFn); // Only explicitly returning false from a listener should preventDefault return listenerFn(e) !== false; } catch (error) { handleError(lView, error); return false; } finally { profiler(7 /* ProfilerEvent.OutputEnd */, context, listenerFn); } } /** * Wraps an event listener with a function that marks ancestors dirty and prevents default behavior, * if applicable. * * @param tNode The TNode associated with this listener * @param lView The LView that contains this listener * @param listenerFn The listener function to call * @param wrapWithPreventDefault Whether or not to prevent default behavior * (the procedural renderer does this already, so in those cases, we should skip) */ function wrapListener(tNode, lView, context, listenerFn, wrapWithPreventDefault) { // Note: we are performing most of the work in the listener function itself // to optimize listener registration. return function wrapListenerIn_markDirtyAndPreventDefault(e) { // Ivy uses `Function` as a special token that allows us to unwrap the function // so that it can be invoked programmatically by `DebugNode.triggerEventHandler`. if (e === Function) { return listenerFn; } // 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.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 // their presence and invoke as needed. let nextListenerFn = wrapListenerIn_markDirtyAndPreventDefault.__ngNextListenerFn__; while (nextListenerFn) { // We should prevent default if any of the listeners explicitly return false result = executeListenerWithErrorHandling(lView, context, nextListenerFn, e) && result; nextListenerFn = nextListenerFn.__ngNextListenerFn__; } if (wrapWithPreventDefault && result === false) { e.preventDefault(); } return result; }; } /** * Retrieves a context at the level specified and saves it as the global, contextViewData. * Will get the next level up if level is not specified. * * This is used to save contexts of parent views so they can be bound in embedded views, or * in conjunction with reference() to bind a ref from a parent view. * * @param level The relative level of the view from which to grab context compared to contextVewData * @returns context * * @codeGenApi */ function ÉµÉµnextContext(level = 1) { return nextContextImpl(level); } /** * Checks a given node against matching projection slots and returns the * determined slot index. Returns "null" if no slot matched the given node. * * This function takes into account the parsed ngProjectAs selector from the * node's attributes. If present, it will check whether the ngProjectAs selector * matches any of the projection slot selectors. */ function matchingProjectionSlotIndex(tNode, projectionSlots) { let wildcardNgContentIndex = null; const ngProjectAsAttrVal = getProjectAsAttrValue(tNode); for (let i = 0; i < projectionSlots.length; i++) { const slotValue = projectionSlots[i]; // The last wildcard projection slot should match all nodes which aren't matching // any selector. This is necessary to be backwards compatible with view engine. if (slotValue === '*') { wildcardNgContentIndex = i; continue; } // If we ran into an `ngProjectAs` attribute, we should match its parsed selector // to the list of selectors, otherwise we fall back to matching against the node. if (ngProjectAsAttrVal === null ? isNodeMatchingSelectorList(tNode, slotValue, /* isProjectionMode */ true) : isSelectorInSelectorList(ngProjectAsAttrVal, slotValue)) { return i; // first matching selector "captures" a given node } } return wildcardNgContentIndex; } /** * Instruction to distribute projectable nodes among occurrences in a given template. * It takes all the selectors from the entire component's template and decides where * each projected node belongs (it re-distributes nodes among "buckets" where each "bucket" is * backed by a selector). * * This function requires CSS selectors to be provided in 2 forms: parsed (by a compiler) and text, * un-parsed form. * * The parsed form is needed for efficient matching of a node against a given CSS selector. * The un-parsed, textual form is needed for support of the ngProjectAs attribute. * * Having a CSS selector in 2 different formats is not ideal, but alternatives have even more * drawbacks: * - having only a textual form would require runtime parsing of CSS selectors; * - we can't have only a parsed as we can't re-construct textual form from it (as entered by a * template author). * * @param projectionSlots? A collection of projection slots. A projection slot can be based * on a parsed CSS selectors or set to the wildcard selector ("*") in order to match * all nodes which do not match any selector. If not specified, a single wildcard * selector projection slot will be defined. * * @codeGenApi */ function ÉµÉµprojectionDef(projectionSlots) { const componentNode = getLView()[DECLARATION_COMPONENT_VIEW][T_HOST]; if (!componentNode.projection) { // If no explicit projection slots are defined, fall back to a single // projection slot with the wildcard selector. const numProjectionSlots = projectionSlots ? projectionSlots.length : 1; const projectionHeads = componentNode.projection = newArray(numProjectionSlots, null); const tails = projectionHeads.slice(); let componentChild = componentNode.child; while (componentChild !== null) { const slotIndex = projectionSlots ? matchingProjectionSlotIndex(componentChild, projectionSlots) : 0; if (slotIndex !== null) { if (tails[slotIndex]) { tails[slotIndex].projectionNext = componentChild; } else { projectionHeads[slotIndex] = componentChild; } tails[slotIndex] = componentChild; } componentChild = componentChild.next; } } } /** * Inserts previously re-distributed projected nodes. This instruction must be preceded by a call * to the projectionDef instruction. * * @param nodeIndex * @param selectorIndex: * - 0 when the selector is `*` (or unspecified as this is the default value), * - 1 based index of the selector from the {@link projectionDef} * * @codeGenApi */ function ÉµÉµprojection(nodeIndex, selectorIndex = 0, attrs) { const lView = getLView(); const tView = getTView(); const tProjectionNode = getOrCreateTNode(tView, HEADER_OFFSET + nodeIndex, 16 /* TNodeType.Projection */, null, attrs || null); // We can't use viewData[HOST_NODE] because projection nodes can be nested in embedded views. if (tProjectionNode.projection === null) tProjectionNode.projection = selectorIndex; // `` has no content setCurrentTNodeAsNotParent(); const hydrationInfo = lView[HYDRATION]; const isNodeCreationMode = !hydrationInfo || isInSkipHydrationBlock$1(); if (isNodeCreationMode && (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); } } /** * * Update an interpolated property on an element with a lone bound value * * Used when the value passed to a property has 1 interpolated value in it, an no additional text * surrounds that interpolated value: * * ```html *

* ``` * * Its compiled representation is:: * * ```ts * ÉµÉµpropertyInterpolate('title', v0); * ``` * * If the property name also exists as an input property on one of the element's directives, * the component property will be set instead of the element property. This check must * be conducted at runtime so child components that add new `@Inputs` don't have to be re-compiled. * * @param propName The name of the property to update * @param prefix Static value used for concatenation only. * @param v0 Value checked for change. * @param suffix Static value used for concatenation only. * @param sanitizer An optional sanitizer function * @returns itself, so that it may be chained. * @codeGenApi */ function ÉµÉµpropertyInterpolate(propName, v0, sanitizer) { ÉµÉµpropertyInterpolate1(propName, '', v0, '', sanitizer); return ÉµÉµpropertyInterpolate; } /** * * Update an interpolated property on an element with single bound value surrounded by text. * * Used when the value passed to a property has 1 interpolated value in it: * * ```html *

* ``` * * Its compiled representation is:: * * ```ts * ÉµÉµpropertyInterpolate1('title', 'prefix', v0, 'suffix'); * ``` * * If the property name also exists as an input property on one of the element's directives, * the component property will be set instead of the element property. This check must * be conducted at runtime so child components that add new `@Inputs` don't have to be re-compiled. * * @param propName The name of the property to update * @param prefix Static value used for concatenation only. * @param v0 Value checked for change. * @param suffix Static value used for concatenation only. * @param sanitizer An optional sanitizer function * @returns itself, so that it may be chained. * @codeGenApi */ function ÉµÉµpropertyInterpolate1(propName, prefix, v0, suffix, sanitizer) { const lView = getLView(); const interpolatedValue = interpolation1(lView, prefix, v0, suffix); if (interpolatedValue !== NO_CHANGE) { const tView = getTView(); const tNode = getSelectedTNode(); elementPropertyInternal(tView, tNode, lView, propName, interpolatedValue, lView[RENDERER], sanitizer, false); ngDevMode && storePropertyBindingMetadata(tView.data, tNode, propName, getBindingIndex() - 1, prefix, suffix); } return ÉµÉµpropertyInterpolate1; } /** * * Update an interpolated property on an element with 2 bound values surrounded by text. * * Used when the value passed to a property has 2 interpolated values in it: * * ```html *

* ``` * * Its compiled representation is:: * * ```ts * ÉµÉµpropertyInterpolate2('title', 'prefix', v0, '-', v1, 'suffix'); * ``` * * If the property name also exists as an input property on one of the element's directives, * the component property will be set instead of the element property. This check must * be conducted at runtime so child components that add new `@Inputs` don't have to be re-compiled. * * @param propName The name of the property to update * @param prefix Static value used for concatenation only. * @param v0 Value checked for change. * @param i0 Static value used for concatenation only. * @param v1 Value checked for change. * @param suffix Static value used for concatenation only. * @param sanitizer An optional sanitizer function * @returns itself, so that it may be chained. * @codeGenApi */ function ÉµÉµpropertyInterpolate2(propName, prefix, v0, i0, v1, suffix, sanitizer) { const lView = getLView(); const interpolatedValue = interpolation2(lView, prefix, v0, i0, v1, suffix); if (interpolatedValue !== NO_CHANGE) { const tView = getTView(); const tNode = getSelectedTNode(); elementPropertyInternal(tView, tNode, lView, propName, interpolatedValue, lView[RENDERER], sanitizer, false); ngDevMode && storePropertyBindingMetadata(tView.data, tNode, propName, getBindingIndex() - 2, prefix, i0, suffix); } return ÉµÉµpropertyInterpolate2; } /** * * Update an interpolated property on an element with 3 bound values surrounded by text. * * Used when the value passed to a property has 3 interpolated values in it: * * ```html *

* ``` * * Its compiled representation is:: * * ```ts * ÉµÉµpropertyInterpolate3( * 'title', 'prefix', v0, '-', v1, '-', v2, 'suffix'); * ``` * * If the property name also exists as an input property on one of the element's directives, * the component property will be set instead of the element property. This check must * be conducted at runtime so child components that add new `@Inputs` don't have to be re-compiled. * * @param propName The name of the property to update * @param prefix Static value used for concatenation only. * @param v0 Value checked for change. * @param i0 Static value used for concatenation only. * @param v1 Value checked for change. * @param i1 Static value used for concatenation only. * @param v2 Value checked for change. * @param suffix Static value used for concatenation only. * @param sanitizer An optional sanitizer function * @returns itself, so that it may be chained. * @codeGenApi */ function ÉµÉµpropertyInterpolate3(propName, prefix, v0, i0, v1, i1, v2, suffix, sanitizer) { const lView = getLView(); const interpolatedValue = interpolation3(lView, prefix, v0, i0, v1, i1, v2, suffix); if (interpolatedValue !== NO_CHANGE) { const tView = getTView(); const tNode = getSelectedTNode(); elementPropertyInternal(tView, tNode, lView, propName, interpolatedValue, lView[RENDERER], sanitizer, false); ngDevMode && storePropertyBindingMetadata(tView.data, tNode, propName, getBindingIndex() - 3, prefix, i0, i1, suffix); } return ÉµÉµpropertyInterpolate3; } /** * * Update an interpolated property on an element with 4 bound values surrounded by text. * * Used when the value passed to a property has 4 interpolated values in it: * * ```html *

* ``` * * Its compiled representation is:: * * ```ts * ÉµÉµpropertyInterpolate4( * 'title', 'prefix', v0, '-', v1, '-', v2, '-', v3, 'suffix'); * ``` * * If the property name also exists as an input property on one of the element's directives, * the component property will be set instead of the element property. This check must * be conducted at runtime so child components that add new `@Inputs` don't have to be re-compiled. * * @param propName The name of the property to update * @param prefix Static value used for concatenation only. * @param v0 Value checked for change. * @param i0 Static value used for concatenation only. * @param v1 Value checked for change. * @param i1 Static value used for concatenation only. * @param v2 Value checked for change. * @param i2 Static value used for concatenation only. * @param v3 Value checked for change. * @param suffix Static value used for concatenation only. * @param sanitizer An optional sanitizer function * @returns itself, so that it may be chained. * @codeGenApi */ function ÉµÉµpropertyInterpolate4(propName, prefix, v0, i0, v1, i1, v2, i2, v3, suffix, sanitizer) { const lView = getLView(); const interpolatedValue = interpolation4(lView, prefix, v0, i0, v1, i1, v2, i2, v3, suffix); if (interpolatedValue !== NO_CHANGE) { const tView = getTView(); const tNode = getSelectedTNode(); elementPropertyInternal(tView, tNode, lView, propName, interpolatedValue, lView[RENDERER], sanitizer, false); ngDevMode && storePropertyBindingMetadata(tView.data, tNode, propName, getBindingIndex() - 4, prefix, i0, i1, i2, suffix); } return ÉµÉµpropertyInterpolate4; } /** * * Update an interpolated property on an element with 5 bound values surrounded by text. * * Used when the value passed to a property has 5 interpolated values in it: * * ```html *

* ``` * * Its compiled representation is:: * * ```ts * ÉµÉµpropertyInterpolate5( * 'title', 'prefix', v0, '-', v1, '-', v2, '-', v3, '-', v4, 'suffix'); * ``` * * If the property name also exists as an input property on one of the element's directives, * the component property will be set instead of the element property. This check must * be conducted at runtime so child components that add new `@Inputs` don't have to be re-compiled. * * @param propName The name of the property to update * @param prefix Static value used for concatenation only. * @param v0 Value checked for change. * @param i0 Static value used for concatenation only. * @param v1 Value checked for change. * @param i1 Static value used for concatenation only. * @param v2 Value checked for change. * @param i2 Static value used for concatenation only. * @param v3 Value checked for change. * @param i3 Static value used for concatenation only. * @param v4 Value checked for change. * @param suffix Static value used for concatenation only. * @param sanitizer An optional sanitizer function * @returns itself, so that it may be chained. * @codeGenApi */ function ÉµÉµpropertyInterpolate5(propName, prefix, v0, i0, v1, i1, v2, i2, v3, i3, v4, suffix, sanitizer) { const lView = getLView(); const interpolatedValue = interpolation5(lView, prefix, v0, i0, v1, i1, v2, i2, v3, i3, v4, suffix); if (interpolatedValue !== NO_CHANGE) { const tView = getTView(); const tNode = getSelectedTNode(); elementPropertyInternal(tView, tNode, lView, propName, interpolatedValue, lView[RENDERER], sanitizer, false); ngDevMode && storePropertyBindingMetadata(tView.data, tNode, propName, getBindingIndex() - 5, prefix, i0, i1, i2, i3, suffix); } return ÉµÉµpropertyInterpolate5; } /** * * Update an interpolated property on an element with 6 bound values surrounded by text. * * Used when the value passed to a property has 6 interpolated values in it: * * ```html *

* ``` * * Its compiled representation is:: * * ```ts * ÉµÉµpropertyInterpolate6( * 'title', 'prefix', v0, '-', v1, '-', v2, '-', v3, '-', v4, '-', v5, 'suffix'); * ``` * * If the property name also exists as an input property on one of the element's directives, * the component property will be set instead of the element property. This check must * be conducted at runtime so child components that add new `@Inputs` don't have to be re-compiled. * * @param propName The name of the property to update * @param prefix Static value used for concatenation only. * @param v0 Value checked for change. * @param i0 Static value used for concatenation only. * @param v1 Value checked for change. * @param i1 Static value used for concatenation only. * @param v2 Value checked for change. * @param i2 Static value used for concatenation only. * @param v3 Value checked for change. * @param i3 Static value used for concatenation only. * @param v4 Value checked for change. * @param i4 Static value used for concatenation only. * @param v5 Value checked for change. * @param suffix Static value used for concatenation only. * @param sanitizer An optional sanitizer function * @returns itself, so that it may be chained. * @codeGenApi */ function ÉµÉµpropertyInterpolate6(propName, prefix, v0, i0, v1, i1, v2, i2, v3, i3, v4, i4, v5, suffix, sanitizer) { const lView = getLView(); const interpolatedValue = interpolation6(lView, prefix, v0, i0, v1, i1, v2, i2, v3, i3, v4, i4, v5, suffix); if (interpolatedValue !== NO_CHANGE) { const tView = getTView(); const tNode = getSelectedTNode(); elementPropertyInternal(tView, tNode, lView, propName, interpolatedValue, lView[RENDERER], sanitizer, false); ngDevMode && storePropertyBindingMetadata(tView.data, tNode, propName, getBindingIndex() - 6, prefix, i0, i1, i2, i3, i4, suffix); } return ÉµÉµpropertyInterpolate6; } /** * * Update an interpolated property on an element with 7 bound values surrounded by text. * * Used when the value passed to a property has 7 interpolated values in it: * * ```html *

* ``` * * Its compiled representation is:: * * ```ts * ÉµÉµpropertyInterpolate7( * 'title', 'prefix', v0, '-', v1, '-', v2, '-', v3, '-', v4, '-', v5, '-', v6, 'suffix'); * ``` * * If the property name also exists as an input property on one of the element's directives, * the component property will be set instead of the element property. This check must * be conducted at runtime so child components that add new `@Inputs` don't have to be re-compiled. * * @param propName The name of the property to update * @param prefix Static value used for concatenation only. * @param v0 Value checked for change. * @param i0 Static value used for concatenation only. * @param v1 Value checked for change. * @param i1 Static value used for concatenation only. * @param v2 Value checked for change. * @param i2 Static value used for concatenation only. * @param v3 Value checked for change. * @param i3 Static value used for concatenation only. * @param v4 Value checked for change. * @param i4 Static value used for concatenation only. * @param v5 Value checked for change. * @param i5 Static value used for concatenation only. * @param v6 Value checked for change. * @param suffix Static value used for concatenation only. * @param sanitizer An optional sanitizer function * @returns itself, so that it may be chained. * @codeGenApi */ function ÉµÉµpropertyInterpolate7(propName, prefix, v0, i0, v1, i1, v2, i2, v3, i3, v4, i4, v5, i5, v6, suffix, sanitizer) { const lView = getLView(); const interpolatedValue = interpolation7(lView, prefix, v0, i0, v1, i1, v2, i2, v3, i3, v4, i4, v5, i5, v6, suffix); if (interpolatedValue !== NO_CHANGE) { const tView = getTView(); const tNode = getSelectedTNode(); elementPropertyInternal(tView, tNode, lView, propName, interpolatedValue, lView[RENDERER], sanitizer, false); ngDevMode && storePropertyBindingMetadata(tView.data, tNode, propName, getBindingIndex() - 7, prefix, i0, i1, i2, i3, i4, i5, suffix); } return ÉµÉµpropertyInterpolate7; } /** * * Update an interpolated property on an element with 8 bound values surrounded by text. * * Used when the value passed to a property has 8 interpolated values in it: * * ```html *

* ``` * * Its compiled representation is:: * * ```ts * ÉµÉµpropertyInterpolate8( * 'title', 'prefix', v0, '-', v1, '-', v2, '-', v3, '-', v4, '-', v5, '-', v6, '-', v7, 'suffix'); * ``` * * If the property name also exists as an input property on one of the element's directives, * the component property will be set instead of the element property. This check must * be conducted at runtime so child components that add new `@Inputs` don't have to be re-compiled. * * @param propName The name of the property to update * @param prefix Static value used for concatenation only. * @param v0 Value checked for change. * @param i0 Static value used for concatenation only. * @param v1 Value checked for change. * @param i1 Static value used for concatenation only. * @param v2 Value checked for change. * @param i2 Static value used for concatenation only. * @param v3 Value checked for change. * @param i3 Static value used for concatenation only. * @param v4 Value checked for change. * @param i4 Static value used for concatenation only. * @param v5 Value checked for change. * @param i5 Static value used for concatenation only. * @param v6 Value checked for change. * @param i6 Static value used for concatenation only. * @param v7 Value checked for change. * @param suffix Static value used for concatenation only. * @param sanitizer An optional sanitizer function * @returns itself, so that it may be chained. * @codeGenApi */ function ÉµÉµpropertyInterpolate8(propName, prefix, v0, i0, v1, i1, v2, i2, v3, i3, v4, i4, v5, i5, v6, i6, v7, suffix, sanitizer) { const lView = getLView(); const interpolatedValue = interpolation8(lView, prefix, v0, i0, v1, i1, v2, i2, v3, i3, v4, i4, v5, i5, v6, i6, v7, suffix); if (interpolatedValue !== NO_CHANGE) { const tView = getTView(); const tNode = getSelectedTNode(); elementPropertyInternal(tView, tNode, lView, propName, interpolatedValue, lView[RENDERER], sanitizer, false); ngDevMode && storePropertyBindingMetadata(tView.data, tNode, propName, getBindingIndex() - 8, prefix, i0, i1, i2, i3, i4, i5, i6, suffix); } return ÉµÉµpropertyInterpolate8; } /** * Update an interpolated property on an element with 9 or more bound values surrounded by text. * * Used when the number of interpolated values exceeds 8. * * ```html *

* ``` * * Its compiled representation is:: * * ```ts * ÉµÉµpropertyInterpolateV( * 'title', ['prefix', v0, '-', v1, '-', v2, '-', v3, '-', v4, '-', v5, '-', v6, '-', v7, '-', v9, * 'suffix']); * ``` * * If the property name also exists as an input property on one of the element's directives, * the component property will be set instead of the element property. This check must * be conducted at runtime so child components that add new `@Inputs` don't have to be re-compiled. * * @param propName The name of the property to update. * @param values The collection of values and the strings in between those values, beginning with a * string prefix and ending with a string suffix. * (e.g. `['prefix', value0, '-', value1, '-', value2, ..., value99, 'suffix']`) * @param sanitizer An optional sanitizer function * @returns itself, so that it may be chained. * @codeGenApi */ function ÉµÉµpropertyInterpolateV(propName, values, sanitizer) { const lView = getLView(); const interpolatedValue = interpolationV(lView, values); if (interpolatedValue !== NO_CHANGE) { const tView = getTView(); const tNode = getSelectedTNode(); elementPropertyInternal(tView, tNode, lView, propName, interpolatedValue, lView[RENDERER], sanitizer, false); if (ngDevMode) { const interpolationInBetween = [values[0]]; // prefix for (let i = 2; i < values.length; i += 2) { interpolationInBetween.push(values[i]); } storePropertyBindingMetadata(tView.data, tNode, propName, getBindingIndex() - interpolationInBetween.length + 1, ...interpolationInBetween); } } return ÉµÉµpropertyInterpolateV; } function toTStylingRange(prev, next) { ngDevMode && assertNumberInRange(prev, 0, 32767 /* StylingRange.UNSIGNED_MASK */); ngDevMode && assertNumberInRange(next, 0, 32767 /* StylingRange.UNSIGNED_MASK */); return (prev << 17 /* StylingRange.PREV_SHIFT */ | next << 2 /* StylingRange.NEXT_SHIFT */); } function getTStylingRangePrev(tStylingRange) { ngDevMode && assertNumber(tStylingRange, 'expected number'); return (tStylingRange >> 17 /* StylingRange.PREV_SHIFT */) & 32767 /* StylingRange.UNSIGNED_MASK */; } function getTStylingRangePrevDuplicate(tStylingRange) { ngDevMode && assertNumber(tStylingRange, 'expected number'); return (tStylingRange & 2 /* StylingRange.PREV_DUPLICATE */) == 2 /* StylingRange.PREV_DUPLICATE */; } function setTStylingRangePrev(tStylingRange, previous) { ngDevMode && assertNumber(tStylingRange, 'expected number'); ngDevMode && assertNumberInRange(previous, 0, 32767 /* StylingRange.UNSIGNED_MASK */); return ((tStylingRange & ~4294836224 /* StylingRange.PREV_MASK */) | (previous << 17 /* StylingRange.PREV_SHIFT */)); } function setTStylingRangePrevDuplicate(tStylingRange) { ngDevMode && assertNumber(tStylingRange, 'expected number'); return (tStylingRange | 2 /* StylingRange.PREV_DUPLICATE */); } function getTStylingRangeNext(tStylingRange) { ngDevMode && assertNumber(tStylingRange, 'expected number'); return (tStylingRange & 131068 /* StylingRange.NEXT_MASK */) >> 2 /* StylingRange.NEXT_SHIFT */; } function setTStylingRangeNext(tStylingRange, next) { ngDevMode && assertNumber(tStylingRange, 'expected number'); ngDevMode && assertNumberInRange(next, 0, 32767 /* StylingRange.UNSIGNED_MASK */); return ((tStylingRange & ~131068 /* StylingRange.NEXT_MASK */) | // next << 2 /* StylingRange.NEXT_SHIFT */); } function getTStylingRangeNextDuplicate(tStylingRange) { ngDevMode && assertNumber(tStylingRange, 'expected number'); return (tStylingRange & 1 /* StylingRange.NEXT_DUPLICATE */) === 1 /* StylingRange.NEXT_DUPLICATE */; } function setTStylingRangeNextDuplicate(tStylingRange) { ngDevMode && assertNumber(tStylingRange, 'expected number'); return (tStylingRange | 1 /* StylingRange.NEXT_DUPLICATE */); } /** * Insert new `tStyleValue` at `TData` and link existing style bindings such that we maintain linked * list of styles and compute the duplicate flag. * * Note: this function is executed during `firstUpdatePass` only to populate the `TView.data`. * * The function works by keeping track of `tStylingRange` which contains two pointers pointing to * the head/tail of the template portion of the styles. * - if `isHost === false` (we are template) then insertion is at tail of `TStylingRange` * - if `isHost === true` (we are host binding) then insertion is at head of `TStylingRange` * * @param tData The `TData` to insert into. * @param tNode `TNode` associated with the styling element. * @param tStylingKey See `TStylingKey`. * @param index location of where `tStyleValue` should be stored (and linked into list.) * @param isHostBinding `true` if the insertion is for a `hostBinding`. (insertion is in front of * template.) * @param isClassBinding True if the associated `tStylingKey` as a `class` styling. * `tNode.classBindings` should be used (or `tNode.styleBindings` otherwise.) */ function insertTStylingBinding(tData, tNode, tStylingKeyWithStatic, index, isHostBinding, isClassBinding) { ngDevMode && assertFirstUpdatePass(getTView()); let tBindings = isClassBinding ? tNode.classBindings : tNode.styleBindings; let tmplHead = getTStylingRangePrev(tBindings); let tmplTail = getTStylingRangeNext(tBindings); tData[index] = tStylingKeyWithStatic; let isKeyDuplicateOfStatic = false; let tStylingKey; if (Array.isArray(tStylingKeyWithStatic)) { // We are case when the `TStylingKey` contains static fields as well. const staticKeyValueArray = tStylingKeyWithStatic; tStylingKey = staticKeyValueArray[1]; // unwrap. // We need to check if our key is present in the static so that we can mark it as duplicate. if (tStylingKey === null || keyValueArrayIndexOf(staticKeyValueArray, tStylingKey) > 0) { // tStylingKey is present in the statics, need to mark it as duplicate. isKeyDuplicateOfStatic = true; } } else { tStylingKey = tStylingKeyWithStatic; } if (isHostBinding) { // We are inserting host bindings // If we don't have template bindings then `tail` is 0. const hasTemplateBindings = tmplTail !== 0; // This is important to know because that means that the `head` can't point to the first // template bindings (there are none.) Instead the head points to the tail of the template. if (hasTemplateBindings) { // template head's "prev" will point to last host binding or to 0 if no host bindings yet const previousNode = getTStylingRangePrev(tData[tmplHead + 1]); tData[index + 1] = toTStylingRange(previousNode, tmplHead); // if a host binding has already been registered, we need to update the next of that host // binding to point to this one if (previousNode !== 0) { // We need to update the template-tail value to point to us. tData[previousNode + 1] = setTStylingRangeNext(tData[previousNode + 1], index); } // The "previous" of the template binding head should point to this host binding tData[tmplHead + 1] = setTStylingRangePrev(tData[tmplHead + 1], index); } else { tData[index + 1] = toTStylingRange(tmplHead, 0); // if a host binding has already been registered, we need to update the next of that host // binding to point to this one if (tmplHead !== 0) { // We need to update the template-tail value to point to us. tData[tmplHead + 1] = setTStylingRangeNext(tData[tmplHead + 1], index); } // if we don't have template, the head points to template-tail, and needs to be advanced. tmplHead = index; } } else { // We are inserting in template section. // We need to set this binding's "previous" to the current template tail tData[index + 1] = toTStylingRange(tmplTail, 0); ngDevMode && assertEqual(tmplHead !== 0 && tmplTail === 0, false, 'Adding template bindings after hostBindings is not allowed.'); if (tmplHead === 0) { tmplHead = index; } else { // We need to update the previous value "next" to point to this binding tData[tmplTail + 1] = setTStylingRangeNext(tData[tmplTail + 1], index); } tmplTail = index; } // Now we need to update / compute the duplicates. // Starting with our location search towards head (least priority) if (isKeyDuplicateOfStatic) { tData[index + 1] = setTStylingRangePrevDuplicate(tData[index + 1]); } markDuplicates(tData, tStylingKey, index, true); markDuplicates(tData, tStylingKey, index, false); markDuplicateOfResidualStyling(tNode, tStylingKey, tData, index, isClassBinding); tBindings = toTStylingRange(tmplHead, tmplTail); if (isClassBinding) { tNode.classBindings = tBindings; } else { tNode.styleBindings = tBindings; } } /** * Look into the residual styling to see if the current `tStylingKey` is duplicate of residual. * * @param tNode `TNode` where the residual is stored. * @param tStylingKey `TStylingKey` to store. * @param tData `TData` associated with the current `LView`. * @param index location of where `tStyleValue` should be stored (and linked into list.) * @param isClassBinding True if the associated `tStylingKey` as a `class` styling. * `tNode.classBindings` should be used (or `tNode.styleBindings` otherwise.) */ function markDuplicateOfResidualStyling(tNode, tStylingKey, tData, index, isClassBinding) { const residual = isClassBinding ? tNode.residualClasses : tNode.residualStyles; if (residual != null /* or undefined */ && typeof tStylingKey == 'string' && keyValueArrayIndexOf(residual, tStylingKey) >= 0) { // We have duplicate in the residual so mark ourselves as duplicate. tData[index + 1] = setTStylingRangeNextDuplicate(tData[index + 1]); } } /** * Marks `TStyleValue`s as duplicates if another style binding in the list has the same * `TStyleValue`. * * NOTE: this function is intended to be called twice once with `isPrevDir` set to `true` and once * with it set to `false` to search both the previous as well as next items in the list. * * No duplicate case * ``` * [style.color] * [style.width.px] <<- index * [style.height.px] * ``` * * In the above case adding `[style.width.px]` to the existing `[style.color]` produces no * duplicates because `width` is not found in any other part of the linked list. * * Duplicate case * ``` * [style.color] * [style.width.em] * [style.width.px] <<- index * ``` * In the above case adding `[style.width.px]` will produce a duplicate with `[style.width.em]` * because `width` is found in the chain. * * Map case 1 * ``` * [style.width.px] * [style.color] * [style] <<- index * ``` * In the above case adding `[style]` will produce a duplicate with any other bindings because * `[style]` is a Map and as such is fully dynamic and could produce `color` or `width`. * * Map case 2 * ``` * [style] * [style.width.px] * [style.color] <<- index * ``` * In the above case adding `[style.color]` will produce a duplicate because there is already a * `[style]` binding which is a Map and as such is fully dynamic and could produce `color` or * `width`. * * NOTE: Once `[style]` (Map) is added into the system all things are mapped as duplicates. * NOTE: We use `style` as example, but same logic is applied to `class`es as well. * * @param tData `TData` where the linked list is stored. * @param tStylingKey `TStylingKeyPrimitive` which contains the value to compare to other keys in * the linked list. * @param index Starting location in the linked list to search from * @param isPrevDir Direction. * - `true` for previous (lower priority); * - `false` for next (higher priority). */ function markDuplicates(tData, tStylingKey, index, isPrevDir, isClassBinding) { const tStylingAtIndex = tData[index + 1]; const isMap = tStylingKey === null; let cursor = isPrevDir ? getTStylingRangePrev(tStylingAtIndex) : getTStylingRangeNext(tStylingAtIndex); let foundDuplicate = false; // We keep iterating as long as we have a cursor // AND either: // - we found what we are looking for, OR // - we are a map in which case we have to continue searching even after we find what we were // looking for since we are a wild card and everything needs to be flipped to duplicate. while (cursor !== 0 && (foundDuplicate === false || isMap)) { ngDevMode && assertIndexInRange(tData, cursor); const tStylingValueAtCursor = tData[cursor]; const tStyleRangeAtCursor = tData[cursor + 1]; if (isStylingMatch(tStylingValueAtCursor, tStylingKey)) { foundDuplicate = true; tData[cursor + 1] = isPrevDir ? setTStylingRangeNextDuplicate(tStyleRangeAtCursor) : setTStylingRangePrevDuplicate(tStyleRangeAtCursor); } cursor = isPrevDir ? getTStylingRangePrev(tStyleRangeAtCursor) : getTStylingRangeNext(tStyleRangeAtCursor); } if (foundDuplicate) { // if we found a duplicate, than mark ourselves. tData[index + 1] = isPrevDir ? setTStylingRangePrevDuplicate(tStylingAtIndex) : setTStylingRangeNextDuplicate(tStylingAtIndex); } } /** * Determines if two `TStylingKey`s are a match. * * When computing whether a binding contains a duplicate, we need to compare if the instruction * `TStylingKey` has a match. * * Here are examples of `TStylingKey`s which match given `tStylingKeyCursor` is: * - `color` * - `color` // Match another color * - `null` // That means that `tStylingKey` is a `classMap`/`styleMap` instruction * - `['', 'color', 'other', true]` // wrapped `color` so match * - `['', null, 'other', true]` // wrapped `null` so match * - `['', 'width', 'color', 'value']` // wrapped static value contains a match on `'color'` * - `null` // `tStylingKeyCursor` always match as it is `classMap`/`styleMap` instruction * * @param tStylingKeyCursor * @param tStylingKey */ function isStylingMatch(tStylingKeyCursor, tStylingKey) { ngDevMode && assertNotEqual(Array.isArray(tStylingKey), true, 'Expected that \'tStylingKey\' has been unwrapped'); if (tStylingKeyCursor === null || // If the cursor is `null` it means that we have map at that // location so we must assume that we have a match. tStylingKey == null || // If `tStylingKey` is `null` then it is a map therefor assume that it // contains a match. (Array.isArray(tStylingKeyCursor) ? tStylingKeyCursor[1] : tStylingKeyCursor) === tStylingKey // If the keys match explicitly than we are a match. ) { return true; } else if (Array.isArray(tStylingKeyCursor) && typeof tStylingKey === 'string') { // if we did not find a match, but `tStylingKeyCursor` is `KeyValueArray` that means cursor has // statics and we need to check those as well. return keyValueArrayIndexOf(tStylingKeyCursor, tStylingKey) >= 0; // see if we are matching the key } return false; } // Global state of the parser. (This makes parser non-reentrant, but that is not an issue) const parserState = { textEnd: 0, key: 0, keyEnd: 0, value: 0, valueEnd: 0, }; /** * Retrieves the last parsed `key` of style. * @param text the text to substring the key from. */ function getLastParsedKey(text) { return text.substring(parserState.key, parserState.keyEnd); } /** * Retrieves the last parsed `value` of style. * @param text the text to substring the key from. */ function getLastParsedValue(text) { return text.substring(parserState.value, parserState.valueEnd); } /** * Initializes `className` string for parsing and parses the first token. * * This function is intended to be used in this format: * ``` * for (let i = parseClassName(text); i >= 0; i = parseClassNameNext(text, i)) { * const key = getLastParsedKey(); * ... * } * ``` * @param text `className` to parse * @returns index where the next invocation of `parseClassNameNext` should resume. */ function parseClassName(text) { resetParserState(text); return parseClassNameNext(text, consumeWhitespace(text, 0, parserState.textEnd)); } /** * Parses next `className` token. * * This function is intended to be used in this format: * ``` * for (let i = parseClassName(text); i >= 0; i = parseClassNameNext(text, i)) { * const key = getLastParsedKey(); * ... * } * ``` * * @param text `className` to parse * @param index where the parsing should resume. * @returns index where the next invocation of `parseClassNameNext` should resume. */ function parseClassNameNext(text, index) { const end = parserState.textEnd; if (end === index) { return -1; } index = parserState.keyEnd = consumeClassToken(text, parserState.key = index, end); return consumeWhitespace(text, index, end); } /** * Initializes `cssText` string for parsing and parses the first key/values. * * This function is intended to be used in this format: * ``` * for (let i = parseStyle(text); i >= 0; i = parseStyleNext(text, i))) { * const key = getLastParsedKey(); * const value = getLastParsedValue(); * ... * } * ``` * @param text `cssText` to parse * @returns index where the next invocation of `parseStyleNext` should resume. */ function parseStyle(text) { resetParserState(text); return parseStyleNext(text, consumeWhitespace(text, 0, parserState.textEnd)); } /** * Parses the next `cssText` key/values. * * This function is intended to be used in this format: * ``` * for (let i = parseStyle(text); i >= 0; i = parseStyleNext(text, i))) { * const key = getLastParsedKey(); * const value = getLastParsedValue(); * ... * } * * @param text `cssText` to parse * @param index where the parsing should resume. * @returns index where the next invocation of `parseStyleNext` should resume. */ function parseStyleNext(text, startIndex) { const end = parserState.textEnd; let index = parserState.key = consumeWhitespace(text, startIndex, end); if (end === index) { // we reached an end so just quit return -1; } index = parserState.keyEnd = consumeStyleKey(text, index, end); index = consumeSeparator(text, index, end, 58 /* CharCode.COLON */); index = parserState.value = consumeWhitespace(text, index, end); index = parserState.valueEnd = consumeStyleValue(text, index, end); return consumeSeparator(text, index, end, 59 /* CharCode.SEMI_COLON */); } /** * Reset the global state of the styling parser. * @param text The styling text to parse. */ function resetParserState(text) { parserState.key = 0; parserState.keyEnd = 0; parserState.value = 0; parserState.valueEnd = 0; parserState.textEnd = text.length; } /** * Returns index of next non-whitespace character. * * @param text Text to scan * @param startIndex Starting index of character where the scan should start. * @param endIndex Ending index of character where the scan should end. * @returns Index of next non-whitespace character (May be the same as `start` if no whitespace at * that location.) */ function consumeWhitespace(text, startIndex, endIndex) { while (startIndex < endIndex && text.charCodeAt(startIndex) <= 32 /* CharCode.SPACE */) { startIndex++; } return startIndex; } /** * Returns index of last char in class token. * * @param text Text to scan * @param startIndex Starting index of character where the scan should start. * @param endIndex Ending index of character where the scan should end. * @returns Index after last char in class token. */ function consumeClassToken(text, startIndex, endIndex) { while (startIndex < endIndex && text.charCodeAt(startIndex) > 32 /* CharCode.SPACE */) { startIndex++; } return startIndex; } /** * Consumes all of the characters belonging to style key and token. * * @param text Text to scan * @param startIndex Starting index of character where the scan should start. * @param endIndex Ending index of character where the scan should end. * @returns Index after last style key character. */ function consumeStyleKey(text, startIndex, endIndex) { let ch; while (startIndex < endIndex && ((ch = text.charCodeAt(startIndex)) === 45 /* CharCode.DASH */ || ch === 95 /* CharCode.UNDERSCORE */ || ((ch & -33 /* CharCode.UPPER_CASE */) >= 65 /* CharCode.A */ && (ch & -33 /* CharCode.UPPER_CASE */) <= 90 /* CharCode.Z */) || (ch >= 48 /* CharCode.ZERO */ && ch <= 57 /* CharCode.NINE */))) { startIndex++; } return startIndex; } /** * Consumes all whitespace and the separator `:` after the style key. * * @param text Text to scan * @param startIndex Starting index of character where the scan should start. * @param endIndex Ending index of character where the scan should end. * @returns Index after separator and surrounding whitespace. */ function consumeSeparator(text, startIndex, endIndex, separator) { startIndex = consumeWhitespace(text, startIndex, endIndex); if (startIndex < endIndex) { if (ngDevMode && text.charCodeAt(startIndex) !== separator) { malformedStyleError(text, String.fromCharCode(separator), startIndex); } startIndex++; } return startIndex; } /** * Consumes style value honoring `url()` and `""` text. * * @param text Text to scan * @param startIndex Starting index of character where the scan should start. * @param endIndex Ending index of character where the scan should end. * @returns Index after last style value character. */ function consumeStyleValue(text, startIndex, endIndex) { let ch1 = -1; // 1st previous character let ch2 = -1; // 2nd previous character let ch3 = -1; // 3rd previous character let i = startIndex; let lastChIndex = i; while (i < endIndex) { const ch = text.charCodeAt(i++); if (ch === 59 /* CharCode.SEMI_COLON */) { return lastChIndex; } else if (ch === 34 /* CharCode.DOUBLE_QUOTE */ || ch === 39 /* CharCode.SINGLE_QUOTE */) { lastChIndex = i = consumeQuotedText(text, ch, i, endIndex); } else if (startIndex === i - 4 && // We have seen only 4 characters so far "URL(" (Ignore "foo_URL()") ch3 === 85 /* CharCode.U */ && ch2 === 82 /* CharCode.R */ && ch1 === 76 /* CharCode.L */ && ch === 40 /* CharCode.OPEN_PAREN */) { lastChIndex = i = consumeQuotedText(text, 41 /* CharCode.CLOSE_PAREN */, i, endIndex); } else if (ch > 32 /* CharCode.SPACE */) { // if we have a non-whitespace character then capture its location lastChIndex = i; } ch3 = ch2; ch2 = ch1; ch1 = ch & -33 /* CharCode.UPPER_CASE */; } return lastChIndex; } /** * Consumes all of the quoted characters. * * @param text Text to scan * @param quoteCharCode CharCode of either `"` or `'` quote or `)` for `url(...)`. * @param startIndex Starting index of character where the scan should start. * @param endIndex Ending index of character where the scan should end. * @returns Index after quoted characters. */ function consumeQuotedText(text, quoteCharCode, startIndex, endIndex) { let ch1 = -1; // 1st previous character let index = startIndex; while (index < endIndex) { const ch = text.charCodeAt(index++); if (ch == quoteCharCode && ch1 !== 92 /* CharCode.BACK_SLASH */) { return index; } if (ch == 92 /* CharCode.BACK_SLASH */ && ch1 === 92 /* CharCode.BACK_SLASH */) { // two back slashes cancel each other out. For example `"\\"` should properly end the // quotation. (It should not assume that the last `"` is escaped.) ch1 = 0; } else { ch1 = ch; } } throw ngDevMode ? malformedStyleError(text, String.fromCharCode(quoteCharCode), endIndex) : new Error(); } function malformedStyleError(text, expecting, index) { ngDevMode && assertEqual(typeof text === 'string', true, 'String expected here'); throw throwError(`Malformed style at location ${index} in string '` + text.substring(0, index) + '[>>' + text.substring(index, index + 1) + '<<]' + text.slice(index + 1) + `'. Expecting '${expecting}'.`); } /** * Update a style binding on an element with the provided value. * * If the style value is falsy then it will be removed from the element * (or assigned a different value depending if there are any styles placed * on the element with `styleMap` or any static styles that are * present from when the element was created with `styling`). * * Note that the styling element is updated as part of `stylingApply`. * * @param prop A valid CSS property. * @param value New value to write (`null` or an empty string to remove). * @param suffix Optional suffix. Used with scalar values to add unit such as `px`. * * Note that this will apply the provided style value to the host element if this function is called * within a host binding function. * * @codeGenApi */ function ÉµÉµstyleProp(prop, value, suffix) { checkStylingProperty(prop, value, suffix, false); return ÉµÉµstyleProp; } /** * Update a class binding on an element with the provided value. * * This instruction is meant to handle the `[class.foo]="exp"` case and, * therefore, the class binding itself must already be allocated using * `styling` within the creation block. * * @param prop A valid CSS class (only one). * @param value A true/false value which will turn the class on or off. * * Note that this will apply the provided class value to the host element if this function * is called within a host binding function. * * @codeGenApi */ function ÉµÉµclassProp(className, value) { checkStylingProperty(className, value, null, true); return ÉµÉµclassProp; } /** * Update style bindings using an object literal on an element. * * This instruction is meant to apply styling via the `[style]="exp"` template bindings. * When styles are applied to the element they will then be updated with respect to * any styles/classes set via `styleProp`. If any styles are set to falsy * then they will be removed from the element. * * Note that the styling instruction will not be applied until `stylingApply` is called. * * @param styles A key/value style map of the styles that will be applied to the given element. * Any missing styles (that have already been applied to the element beforehand) will be * removed (unset) from the element's styling. * * Note that this will apply the provided styleMap value to the host element if this function * is called within a host binding. * * @codeGenApi */ function ÉµÉµstyleMap(styles) { checkStylingMap(styleKeyValueArraySet, styleStringParser, styles, false); } /** * Parse text as style and add values to KeyValueArray. * * This code is pulled out to a separate function so that it can be tree shaken away if it is not * needed. It is only referenced from `ÉµÉµstyleMap`. * * @param keyValueArray KeyValueArray to add parsed values to. * @param text text to parse. */ function styleStringParser(keyValueArray, text) { for (let i = parseStyle(text); i >= 0; i = parseStyleNext(text, i)) { styleKeyValueArraySet(keyValueArray, getLastParsedKey(text), getLastParsedValue(text)); } } /** * Update class bindings using an object literal or class-string on an element. * * This instruction is meant to apply styling via the `[class]="exp"` template bindings. * When classes are applied to the element they will then be updated with * respect to any styles/classes set via `classProp`. If any * classes are set to falsy then they will be removed from the element. * * Note that the styling instruction will not be applied until `stylingApply` is called. * Note that this will the provided classMap value to the host element if this function is called * within a host binding. * * @param classes A key/value map or string of CSS classes that will be added to the * given element. Any missing classes (that have already been applied to the element * beforehand) will be removed (unset) from the element's list of CSS classes. * * @codeGenApi */ function ÉµÉµclassMap(classes) { checkStylingMap(classKeyValueArraySet, classStringParser, classes, true); } /** * Parse text as class and add values to KeyValueArray. * * This code is pulled out to a separate function so that it can be tree shaken away if it is not * needed. It is only referenced from `ÉµÉµclassMap`. * * @param keyValueArray KeyValueArray to add parsed values to. * @param text text to parse. */ function classStringParser(keyValueArray, text) { for (let i = parseClassName(text); i >= 0; i = parseClassNameNext(text, i)) { keyValueArraySet(keyValueArray, getLastParsedKey(text), true); } } /** * Common code between `ÉµÉµclassProp` and `ÉµÉµstyleProp`. * * @param prop property name. * @param value binding value. * @param suffix suffix for the property (e.g. `em` or `px`) * @param isClassBased `true` if `class` change (`false` if `style`) */ function checkStylingProperty(prop, value, suffix, isClassBased) { const lView = getLView(); const tView = getTView(); // Styling instructions use 2 slots per binding. // 1. one for the value / TStylingKey // 2. one for the intermittent-value / TStylingRange const bindingIndex = incrementBindingIndex(2); if (tView.firstUpdatePass) { stylingFirstUpdatePass(tView, prop, bindingIndex, isClassBased); } if (value !== NO_CHANGE && bindingUpdated(lView, bindingIndex, value)) { const tNode = tView.data[getSelectedIndex()]; updateStyling(tView, tNode, lView, lView[RENDERER], prop, lView[bindingIndex + 1] = normalizeSuffix(value, suffix), isClassBased, bindingIndex); } } /** * Common code between `ÉµÉµclassMap` and `ÉµÉµstyleMap`. * * @param keyValueArraySet (See `keyValueArraySet` in "util/array_utils") Gets passed in as a * function so that `style` can be processed. This is done for tree shaking purposes. * @param stringParser Parser used to parse `value` if `string`. (Passed in as `style` and `class` * have different parsers.) * @param value bound value from application * @param isClassBased `true` if `class` change (`false` if `style`) */ function checkStylingMap(keyValueArraySet, stringParser, value, isClassBased) { const tView = getTView(); const bindingIndex = incrementBindingIndex(2); if (tView.firstUpdatePass) { stylingFirstUpdatePass(tView, null, bindingIndex, isClassBased); } const lView = getLView(); if (value !== NO_CHANGE && bindingUpdated(lView, bindingIndex, value)) { // `getSelectedIndex()` should be here (rather than in instruction) so that it is guarded by the // if so as not to read unnecessarily. const tNode = tView.data[getSelectedIndex()]; if (hasStylingInputShadow(tNode, isClassBased) && !isInHostBindings(tView, bindingIndex)) { if (ngDevMode) { // verify that if we are shadowing then `TData` is appropriately marked so that we skip // processing this binding in styling resolution. const tStylingKey = tView.data[bindingIndex]; assertEqual(Array.isArray(tStylingKey) ? tStylingKey[1] : tStylingKey, false, 'Styling linked list shadow input should be marked as \'false\''); } // VE does not concatenate the static portion like we are doing here. // Instead VE just ignores the static completely if dynamic binding is present. // Because of locality we have already set the static portion because we don't know if there // is a dynamic portion until later. If we would ignore the static portion it would look like // the binding has removed it. This would confuse `[ngStyle]`/`[ngClass]` to do the wrong // thing as it would think that the static portion was removed. For this reason we // concatenate it so that `[ngStyle]`/`[ngClass]` can continue to work on changed. let staticPrefix = isClassBased ? tNode.classesWithoutHost : tNode.stylesWithoutHost; ngDevMode && isClassBased === false && staticPrefix !== null && assertEqual(staticPrefix.endsWith(';'), true, 'Expecting static portion to end with \';\''); if (staticPrefix !== null) { // We want to make sure that falsy values of `value` become empty strings. value = concatStringsWithSpace(staticPrefix, value ? value : ''); } // Given `

` such that `my-dir` has `@Input('style')`. // This takes over the `[style]` binding. (Same for `[class]`) setDirectiveInputsWhichShadowsStyling(tView, tNode, lView, value, isClassBased); } else { updateStylingMap(tView, tNode, lView, lView[RENDERER], lView[bindingIndex + 1], lView[bindingIndex + 1] = toStylingKeyValueArray(keyValueArraySet, stringParser, value), isClassBased, bindingIndex); } } } /** * Determines when the binding is in `hostBindings` section * * @param tView Current `TView` * @param bindingIndex index of binding which we would like if it is in `hostBindings` */ function isInHostBindings(tView, bindingIndex) { // All host bindings are placed after the expando section. return bindingIndex >= tView.expandoStartIndex; } /** * Collects the necessary information to insert the binding into a linked list of style bindings * using `insertTStylingBinding`. * * @param tView `TView` where the binding linked list will be stored. * @param tStylingKey Property/key of the binding. * @param bindingIndex Index of binding associated with the `prop` * @param isClassBased `true` if `class` change (`false` if `style`) */ function stylingFirstUpdatePass(tView, tStylingKey, bindingIndex, isClassBased) { ngDevMode && assertFirstUpdatePass(tView); const tData = tView.data; if (tData[bindingIndex + 1] === null) { // The above check is necessary because we don't clear first update pass until first successful // (no exception) template execution. This prevents the styling instruction from double adding // itself to the list. // `getSelectedIndex()` should be here (rather than in instruction) so that it is guarded by the // if so as not to read unnecessarily. const tNode = tData[getSelectedIndex()]; ngDevMode && assertDefined(tNode, 'TNode expected'); const isHostBindings = isInHostBindings(tView, bindingIndex); if (hasStylingInputShadow(tNode, isClassBased) && tStylingKey === null && !isHostBindings) { // `tStylingKey === null` implies that we are either `[style]` or `[class]` binding. // If there is a directive which uses `@Input('style')` or `@Input('class')` than // we need to neutralize this binding since that directive is shadowing it. // We turn this into a noop by setting the key to `false` tStylingKey = false; } tStylingKey = wrapInStaticStylingKey(tData, tNode, tStylingKey, isClassBased); insertTStylingBinding(tData, tNode, tStylingKey, bindingIndex, isHostBindings, isClassBased); } } /** * Adds static styling information to the binding if applicable. * * The linked list of styles not only stores the list and keys, but also stores static styling * information on some of the keys. This function determines if the key should contain the styling * information and computes it. * * See `TStylingStatic` for more details. * * @param tData `TData` where the linked list is stored. * @param tNode `TNode` for which the styling is being computed. * @param stylingKey `TStylingKeyPrimitive` which may need to be wrapped into `TStylingKey` * @param isClassBased `true` if `class` (`false` if `style`) */ function wrapInStaticStylingKey(tData, tNode, stylingKey, isClassBased) { const hostDirectiveDef = getCurrentDirectiveDef(tData); let residual = isClassBased ? tNode.residualClasses : tNode.residualStyles; if (hostDirectiveDef === null) { // We are in template node. // If template node already had styling instruction then it has already collected the static // styling and there is no need to collect them again. We know that we are the first styling // instruction because the `TNode.*Bindings` points to 0 (nothing has been inserted yet). const isFirstStylingInstructionInTemplate = (isClassBased ? tNode.classBindings : tNode.styleBindings) === 0; if (isFirstStylingInstructionInTemplate) { // It would be nice to be able to get the statics from `mergeAttrs`, however, at this point // they are already merged and it would not be possible to figure which property belongs where // in the priority. stylingKey = collectStylingFromDirectives(null, tData, tNode, stylingKey, isClassBased); stylingKey = collectStylingFromTAttrs(stylingKey, tNode.attrs, isClassBased); // We know that if we have styling binding in template we can't have residual. residual = null; } } else { // We are in host binding node and there was no binding instruction in template node. // This means that we need to compute the residual. const directiveStylingLast = tNode.directiveStylingLast; const isFirstStylingInstructionInHostBinding = directiveStylingLast === -1 || tData[directiveStylingLast] !== hostDirectiveDef; if (isFirstStylingInstructionInHostBinding) { stylingKey = collectStylingFromDirectives(hostDirectiveDef, tData, tNode, stylingKey, isClassBased); if (residual === null) { // - If `null` than either: // - Template styling instruction already ran and it has consumed the static // styling into its `TStylingKey` and so there is no need to update residual. Instead // we need to update the `TStylingKey` associated with the first template node // instruction. OR // - Some other styling instruction ran and determined that there are no residuals let templateStylingKey = getTemplateHeadTStylingKey(tData, tNode, isClassBased); if (templateStylingKey !== undefined && Array.isArray(templateStylingKey)) { // Only recompute if `templateStylingKey` had static values. (If no static value found // then there is nothing to do since this operation can only produce less static keys, not // more.) templateStylingKey = collectStylingFromDirectives(null, tData, tNode, templateStylingKey[1] /* unwrap previous statics */, isClassBased); templateStylingKey = collectStylingFromTAttrs(templateStylingKey, tNode.attrs, isClassBased); setTemplateHeadTStylingKey(tData, tNode, isClassBased, templateStylingKey); } } else { // We only need to recompute residual if it is not `null`. // - If existing residual (implies there was no template styling). This means that some of // the statics may have moved from the residual to the `stylingKey` and so we have to // recompute. // - If `undefined` this is the first time we are running. residual = collectResidual(tData, tNode, isClassBased); } } } if (residual !== undefined) { isClassBased ? (tNode.residualClasses = residual) : (tNode.residualStyles = residual); } return stylingKey; } /** * Retrieve the `TStylingKey` for the template styling instruction. * * This is needed since `hostBinding` styling instructions are inserted after the template * instruction. While the template instruction needs to update the residual in `TNode` the * `hostBinding` instructions need to update the `TStylingKey` of the template instruction because * the template instruction is downstream from the `hostBindings` instructions. * * @param tData `TData` where the linked list is stored. * @param tNode `TNode` for which the styling is being computed. * @param isClassBased `true` if `class` (`false` if `style`) * @return `TStylingKey` if found or `undefined` if not found. */ function getTemplateHeadTStylingKey(tData, tNode, isClassBased) { const bindings = isClassBased ? tNode.classBindings : tNode.styleBindings; if (getTStylingRangeNext(bindings) === 0) { // There does not seem to be a styling instruction in the `template`. return undefined; } return tData[getTStylingRangePrev(bindings)]; } /** * Update the `TStylingKey` of the first template instruction in `TNode`. * * Logically `hostBindings` styling instructions are of lower priority than that of the template. * However, they execute after the template styling instructions. This means that they get inserted * in front of the template styling instructions. * * If we have a template styling instruction and a new `hostBindings` styling instruction is * executed it means that it may need to steal static fields from the template instruction. This * method allows us to update the first template instruction `TStylingKey` with a new value. * * Assume: * ``` *

* * @Directive({ * host: { * 'style': 'width: 100px', * '[style.color]': 'dirExp', * } * }) * class MyDir {} * ``` * * when `[style.color]="tmplExp"` executes it creates this data structure. * ``` * ['', 'color', 'color', 'red', 'width', '100px'], * ``` * * The reason for this is that the template instruction does not know if there are styling * instructions and must assume that there are none and must collect all of the static styling. * (both * `color' and 'width`) * * When `'[style.color]': 'dirExp',` executes we need to insert a new data into the linked list. * ``` * ['', 'color', 'width', '100px'], // newly inserted * ['', 'color', 'color', 'red', 'width', '100px'], // this is wrong * ``` * * Notice that the template statics is now wrong as it incorrectly contains `width` so we need to * update it like so: * ``` * ['', 'color', 'width', '100px'], * ['', 'color', 'color', 'red'], // UPDATE * ``` * * @param tData `TData` where the linked list is stored. * @param tNode `TNode` for which the styling is being computed. * @param isClassBased `true` if `class` (`false` if `style`) * @param tStylingKey New `TStylingKey` which is replacing the old one. */ function setTemplateHeadTStylingKey(tData, tNode, isClassBased, tStylingKey) { const bindings = isClassBased ? tNode.classBindings : tNode.styleBindings; ngDevMode && assertNotEqual(getTStylingRangeNext(bindings), 0, 'Expecting to have at least one template styling binding.'); tData[getTStylingRangePrev(bindings)] = tStylingKey; } /** * Collect all static values after the current `TNode.directiveStylingLast` index. * * Collect the remaining styling information which has not yet been collected by an existing * styling instruction. * * @param tData `TData` where the `DirectiveDefs` are stored. * @param tNode `TNode` which contains the directive range. * @param isClassBased `true` if `class` (`false` if `style`) */ function collectResidual(tData, tNode, isClassBased) { let residual = undefined; const directiveEnd = tNode.directiveEnd; ngDevMode && assertNotEqual(tNode.directiveStylingLast, -1, 'By the time this function gets called at least one hostBindings-node styling instruction must have executed.'); // We add `1 + tNode.directiveStart` because we need to skip the current directive (as we are // collecting things after the last `hostBindings` directive which had a styling instruction.) for (let i = 1 + tNode.directiveStylingLast; i < directiveEnd; i++) { const attrs = tData[i].hostAttrs; residual = collectStylingFromTAttrs(residual, attrs, isClassBased); } return collectStylingFromTAttrs(residual, tNode.attrs, isClassBased); } /** * Collect the static styling information with lower priority than `hostDirectiveDef`. * * (This is opposite of residual styling.) * * @param hostDirectiveDef `DirectiveDef` for which we want to collect lower priority static * styling. (Or `null` if template styling) * @param tData `TData` where the linked list is stored. * @param tNode `TNode` for which the styling is being computed. * @param stylingKey Existing `TStylingKey` to update or wrap. * @param isClassBased `true` if `class` (`false` if `style`) */ function collectStylingFromDirectives(hostDirectiveDef, tData, tNode, stylingKey, isClassBased) { // We need to loop because there can be directives which have `hostAttrs` but don't have // `hostBindings` so this loop catches up to the current directive.. let currentDirective = null; const directiveEnd = tNode.directiveEnd; let directiveStylingLast = tNode.directiveStylingLast; if (directiveStylingLast === -1) { directiveStylingLast = tNode.directiveStart; } else { directiveStylingLast++; } while (directiveStylingLast < directiveEnd) { currentDirective = tData[directiveStylingLast]; ngDevMode && assertDefined(currentDirective, 'expected to be defined'); stylingKey = collectStylingFromTAttrs(stylingKey, currentDirective.hostAttrs, isClassBased); if (currentDirective === hostDirectiveDef) break; directiveStylingLast++; } if (hostDirectiveDef !== null) { // we only advance the styling cursor if we are collecting data from host bindings. // Template executes before host bindings and so if we would update the index, // host bindings would not get their statics. tNode.directiveStylingLast = directiveStylingLast; } return stylingKey; } /** * Convert `TAttrs` into `TStylingStatic`. * * @param stylingKey existing `TStylingKey` to update or wrap. * @param attrs `TAttributes` to process. * @param isClassBased `true` if `class` (`false` if `style`) */ function collectStylingFromTAttrs(stylingKey, attrs, isClassBased) { const desiredMarker = isClassBased ? 1 /* AttributeMarker.Classes */ : 2 /* AttributeMarker.Styles */; let currentMarker = -1 /* AttributeMarker.ImplicitAttributes */; if (attrs !== null) { for (let i = 0; i < attrs.length; i++) { const item = attrs[i]; if (typeof item === 'number') { currentMarker = item; } else { if (currentMarker === desiredMarker) { if (!Array.isArray(stylingKey)) { stylingKey = stylingKey === undefined ? [] : ['', stylingKey]; } keyValueArraySet(stylingKey, item, isClassBased ? true : attrs[++i]); } } } } return stylingKey === undefined ? null : stylingKey; } /** * Convert user input to `KeyValueArray`. * * This function takes user input which could be `string`, Object literal, or iterable and converts * it into a consistent representation. The output of this is `KeyValueArray` (which is an array * where * even indexes contain keys and odd indexes contain values for those keys). * * The advantage of converting to `KeyValueArray` is that we can perform diff in an input * independent * way. * (ie we can compare `foo bar` to `['bar', 'baz'] and determine a set of changes which need to be * applied) * * The fact that `KeyValueArray` is sorted is very important because it allows us to compute the * difference in linear fashion without the need to allocate any additional data. * * For example if we kept this as a `Map` we would have to iterate over previous `Map` to determine * which values need to be deleted, over the new `Map` to determine additions, and we would have to * keep additional `Map` to keep track of duplicates or items which have not yet been visited. * * @param keyValueArraySet (See `keyValueArraySet` in "util/array_utils") Gets passed in as a * function so that `style` can be processed. This is done * for tree shaking purposes. * @param stringParser The parser is passed in so that it will be tree shakable. See * `styleStringParser` and `classStringParser` * @param value The value to parse/convert to `KeyValueArray` */ function toStylingKeyValueArray(keyValueArraySet, stringParser, value) { if (value == null /*|| value === undefined */ || value === '') return EMPTY_ARRAY; const styleKeyValueArray = []; const unwrappedValue = unwrapSafeValue(value); if (Array.isArray(unwrappedValue)) { for (let i = 0; i < unwrappedValue.length; i++) { keyValueArraySet(styleKeyValueArray, unwrappedValue[i], true); } } else if (typeof unwrappedValue === 'object') { for (const key in unwrappedValue) { if (unwrappedValue.hasOwnProperty(key)) { keyValueArraySet(styleKeyValueArray, key, unwrappedValue[key]); } } } else if (typeof unwrappedValue === 'string') { stringParser(styleKeyValueArray, unwrappedValue); } else { ngDevMode && throwError('Unsupported styling type ' + typeof unwrappedValue + ': ' + unwrappedValue); } return styleKeyValueArray; } /** * Set a `value` for a `key`. * * See: `keyValueArraySet` for details * * @param keyValueArray KeyValueArray to add to. * @param key Style key to add. * @param value The value to set. */ function styleKeyValueArraySet(keyValueArray, key, value) { keyValueArraySet(keyValueArray, key, unwrapSafeValue(value)); } /** * Class-binding-specific function for setting the `value` for a `key`. * * See: `keyValueArraySet` for details * * @param keyValueArray KeyValueArray to add to. * @param key Style key to add. * @param value The value to set. */ function classKeyValueArraySet(keyValueArray, key, value) { // We use `classList.add` to eventually add the CSS classes to the DOM node. Any value passed into // `add` is stringified and added to the `class` attribute, e.g. even null, undefined or numbers // will be added. Stringify the key here so that our internal data structure matches the value in // the DOM. The only exceptions are empty strings and strings that contain spaces for which // the browser throws an error. We ignore such values, because the error is somewhat cryptic. const stringKey = String(key); if (stringKey !== '' && !stringKey.includes(' ')) { keyValueArraySet(keyValueArray, stringKey, value); } } /** * Update map based styling. * * Map based styling could be anything which contains more than one binding. For example `string`, * or object literal. Dealing with all of these types would complicate the logic so * instead this function expects that the complex input is first converted into normalized * `KeyValueArray`. The advantage of normalization is that we get the values sorted, which makes it * very cheap to compute deltas between the previous and current value. * * @param tView Associated `TView.data` contains the linked list of binding priorities. * @param tNode `TNode` where the binding is located. * @param lView `LView` contains the values associated with other styling binding at this `TNode`. * @param renderer Renderer to use if any updates. * @param oldKeyValueArray Previous value represented as `KeyValueArray` * @param newKeyValueArray Current value represented as `KeyValueArray` * @param isClassBased `true` if `class` (`false` if `style`) * @param bindingIndex Binding index of the binding. */ function updateStylingMap(tView, tNode, lView, renderer, oldKeyValueArray, newKeyValueArray, isClassBased, bindingIndex) { if (oldKeyValueArray === NO_CHANGE) { // On first execution the oldKeyValueArray is NO_CHANGE => treat it as empty KeyValueArray. oldKeyValueArray = EMPTY_ARRAY; } let oldIndex = 0; let newIndex = 0; let oldKey = 0 < oldKeyValueArray.length ? oldKeyValueArray[0] : null; let newKey = 0 < newKeyValueArray.length ? newKeyValueArray[0] : null; while (oldKey !== null || newKey !== null) { ngDevMode && assertLessThan(oldIndex, 999, 'Are we stuck in infinite loop?'); ngDevMode && assertLessThan(newIndex, 999, 'Are we stuck in infinite loop?'); const oldValue = oldIndex < oldKeyValueArray.length ? oldKeyValueArray[oldIndex + 1] : undefined; const newValue = newIndex < newKeyValueArray.length ? newKeyValueArray[newIndex + 1] : undefined; let setKey = null; let setValue = undefined; if (oldKey === newKey) { // UPDATE: Keys are equal => new value is overwriting old value. oldIndex += 2; newIndex += 2; if (oldValue !== newValue) { setKey = newKey; setValue = newValue; } } else if (newKey === null || oldKey !== null && oldKey < newKey) { // DELETE: oldKey key is missing or we did not find the oldKey in the newValue // (because the keyValueArray is sorted and `newKey` is found later alphabetically). // `"background" < "color"` so we need to delete `"background"` because it is not found in the // new array. oldIndex += 2; setKey = oldKey; } else { // CREATE: newKey's is earlier alphabetically than oldKey's (or no oldKey) => we have new key. // `"color" > "background"` so we need to add `color` because it is in new array but not in // old array. ngDevMode && assertDefined(newKey, 'Expecting to have a valid key'); newIndex += 2; setKey = newKey; setValue = newValue; } if (setKey !== null) { updateStyling(tView, tNode, lView, renderer, setKey, setValue, isClassBased, bindingIndex); } oldKey = oldIndex < oldKeyValueArray.length ? oldKeyValueArray[oldIndex] : null; newKey = newIndex < newKeyValueArray.length ? newKeyValueArray[newIndex] : null; } } /** * Update a simple (property name) styling. * * This function takes `prop` and updates the DOM to that value. The function takes the binding * value as well as binding priority into consideration to determine which value should be written * to DOM. (For example it may be determined that there is a higher priority overwrite which blocks * the DOM write, or if the value goes to `undefined` a lower priority overwrite may be consulted.) * * @param tView Associated `TView.data` contains the linked list of binding priorities. * @param tNode `TNode` where the binding is located. * @param lView `LView` contains the values associated with other styling binding at this `TNode`. * @param renderer Renderer to use if any updates. * @param prop Either style property name or a class name. * @param value Either style value for `prop` or `true`/`false` if `prop` is class. * @param isClassBased `true` if `class` (`false` if `style`) * @param bindingIndex Binding index of the binding. */ function updateStyling(tView, tNode, lView, renderer, prop, value, isClassBased, bindingIndex) { if (!(tNode.type & 3 /* TNodeType.AnyRNode */)) { // It is possible to have styling on non-elements (such as ng-container). // This is rare, but it does happen. In such a case, just ignore the binding. return; } const tData = tView.data; const tRange = tData[bindingIndex + 1]; const higherPriorityValue = getTStylingRangeNextDuplicate(tRange) ? findStylingValue(tData, tNode, lView, prop, getTStylingRangeNext(tRange), isClassBased) : undefined; if (!isStylingValuePresent(higherPriorityValue)) { // We don't have a next duplicate, or we did not find a duplicate value. if (!isStylingValuePresent(value)) { // We should delete current value or restore to lower priority value. if (getTStylingRangePrevDuplicate(tRange)) { // We have a possible prev duplicate, let's retrieve it. value = findStylingValue(tData, null, lView, prop, bindingIndex, isClassBased); } } const rNode = getNativeByIndex(getSelectedIndex(), lView); applyStyling(renderer, isClassBased, rNode, prop, value); } } /** * Search for styling value with higher priority which is overwriting current value, or a * value of lower priority to which we should fall back if the value is `undefined`. * * When value is being applied at a location, related values need to be consulted. * - If there is a higher priority binding, we should be using that one instead. * For example `

` change to `exp1` * requires that we check `exp2` to see if it is set to value other than `undefined`. * - If there is a lower priority binding and we are changing to `undefined` * For example `

` change to `exp2` to * `undefined` requires that we check `exp1` (and static values) and use that as new value. * * NOTE: The styling stores two values. * 1. The raw value which came from the application is stored at `index + 0` location. (This value * is used for dirty checking). * 2. The normalized value is stored at `index + 1`. * * @param tData `TData` used for traversing the priority. * @param tNode `TNode` to use for resolving static styling. Also controls search direction. * - `TNode` search next and quit as soon as `isStylingValuePresent(value)` is true. * If no value found consult `tNode.residualStyle`/`tNode.residualClass` for default value. * - `null` search prev and go all the way to end. Return last value where * `isStylingValuePresent(value)` is true. * @param lView `LView` used for retrieving the actual values. * @param prop Property which we are interested in. * @param index Starting index in the linked list of styling bindings where the search should start. * @param isClassBased `true` if `class` (`false` if `style`) */ function findStylingValue(tData, tNode, lView, prop, index, isClassBased) { // `TNode` to use for resolving static styling. Also controls search direction. // - `TNode` search next and quit as soon as `isStylingValuePresent(value)` is true. // If no value found consult `tNode.residualStyle`/`tNode.residualClass` for default value. // - `null` search prev and go all the way to end. Return last value where // `isStylingValuePresent(value)` is true. const isPrevDirection = tNode === null; let value = undefined; while (index > 0) { const rawKey = tData[index]; const containsStatics = Array.isArray(rawKey); // Unwrap the key if we contain static values. const key = containsStatics ? rawKey[1] : rawKey; const isStylingMap = key === null; let valueAtLViewIndex = lView[index + 1]; if (valueAtLViewIndex === NO_CHANGE) { // In firstUpdatePass the styling instructions create a linked list of styling. // On subsequent passes it is possible for a styling instruction to try to read a binding // which // has not yet executed. In that case we will find `NO_CHANGE` and we should assume that // we have `undefined` (or empty array in case of styling-map instruction) instead. This // allows the resolution to apply the value (which may later be overwritten when the // binding actually executes.) valueAtLViewIndex = isStylingMap ? EMPTY_ARRAY : undefined; } let currentValue = isStylingMap ? keyValueArrayGet(valueAtLViewIndex, prop) : (key === prop ? valueAtLViewIndex : undefined); if (containsStatics && !isStylingValuePresent(currentValue)) { currentValue = keyValueArrayGet(rawKey, prop); } if (isStylingValuePresent(currentValue)) { value = currentValue; if (isPrevDirection) { return value; } } const tRange = tData[index + 1]; index = isPrevDirection ? getTStylingRangePrev(tRange) : getTStylingRangeNext(tRange); } if (tNode !== null) { // in case where we are going in next direction AND we did not find anything, we need to // consult residual styling let residual = isClassBased ? tNode.residualClasses : tNode.residualStyles; if (residual != null /** OR residual !=== undefined */) { value = keyValueArrayGet(residual, prop); } } return value; } /** * Determines if the binding value should be used (or if the value is 'undefined' and hence priority * resolution should be used.) * * @param value Binding style value. */ function isStylingValuePresent(value) { // Currently only `undefined` value is considered non-binding. That is `undefined` says I don't // have an opinion as to what this binding should be and you should consult other bindings by // priority to determine the valid value. // This is extracted into a single function so that we have a single place to control this. return value !== undefined; } /** * Normalizes and/or adds a suffix to the value. * * If value is `null`/`undefined` no suffix is added * @param value * @param suffix */ function normalizeSuffix(value, suffix) { if (value == null || value === '') ; else if (typeof suffix === 'string') { value = value + suffix; } else if (typeof value === 'object') { value = stringify(unwrapSafeValue(value)); } return value; } /** * Tests if the `TNode` has input shadow. * * An input shadow is when a directive steals (shadows) the input by using `@Input('style')` or * `@Input('class')` as input. * * @param tNode `TNode` which we would like to see if it has shadow. * @param isClassBased `true` if `class` (`false` if `style`) */ function hasStylingInputShadow(tNode, isClassBased) { return (tNode.flags & (isClassBased ? 8 /* TNodeFlags.hasClassInput */ : 16 /* TNodeFlags.hasStyleInput */)) !== 0; } /** * Create static text node * * @param index Index of the node in the data array * @param value Static string value to write. * * @codeGenApi */ function ÉµÉµtext(index, value = '') { const lView = getLView(); const tView = getTView(); const adjustedIndex = index + HEADER_OFFSET; ngDevMode && assertEqual(getBindingIndex(), tView.bindingStartIndex, 'text nodes should be created before any bindings'); ngDevMode && assertIndexInRange(lView, adjustedIndex); const tNode = tView.firstCreatePass ? getOrCreateTNode(tView, adjustedIndex, 1 /* TNodeType.Text */, value, null) : tView.data[adjustedIndex]; const textNative = _locateOrCreateTextNode(tView, lView, tNode, value, index); lView[adjustedIndex] = textNative; if (wasLastNodeCreated()) { appendChild(tView, lView, textNative, tNode); } // Text nodes are self closing. setCurrentTNode(tNode, false); } let _locateOrCreateTextNode = (tView, lView, tNode, value, index) => { lastNodeWasCreated(true); return createTextNode(lView[RENDERER], value); }; /** * Enables hydration code path (to lookup existing elements in DOM) * in addition to the regular creation mode of text nodes. */ function locateOrCreateTextNodeImpl(tView, lView, tNode, value, index) { const hydrationInfo = lView[HYDRATION]; const isNodeCreationMode = !hydrationInfo || isInSkipHydrationBlock$1() || isDisconnectedNode$1(hydrationInfo, index); lastNodeWasCreated(isNodeCreationMode); // Regular creation mode. if (isNodeCreationMode) { return createTextNode(lView[RENDERER], value); } // Hydration mode, looking up an existing element in DOM. const textNative = locateNextRNode(hydrationInfo, tView, lView, tNode); ngDevMode && validateMatchingNode(textNative, Node.TEXT_NODE, null, lView, tNode); ngDevMode && markRNodeAsClaimedByHydration(textNative); return textNative; } function enableLocateOrCreateTextNodeImpl() { _locateOrCreateTextNode = locateOrCreateTextNodeImpl; } /** * * Update text content with a lone bound value * * Used when a text node has 1 interpolated value in it, an no additional text * surrounds that interpolated value: * * ```html *

* ``` * * Its compiled representation is: * * ```ts * ÉµÉµtextInterpolate(v0); * ``` * @returns itself, so that it may be chained. * @see textInterpolateV * @codeGenApi */ function ÉµÉµtextInterpolate(v0) { ÉµÉµtextInterpolate1('', v0, ''); return ÉµÉµtextInterpolate; } /** * * Update text content with single bound value surrounded by other text. * * Used when a text node has 1 interpolated value in it: * * ```html *

prefix{{v0}}suffix

* ``` * * Its compiled representation is: * * ```ts * ÉµÉµtextInterpolate1('prefix', v0, 'suffix'); * ``` * @returns itself, so that it may be chained. * @see textInterpolateV * @codeGenApi */ function ÉµÉµtextInterpolate1(prefix, v0, suffix) { const lView = getLView(); const interpolated = interpolation1(lView, prefix, v0, suffix); if (interpolated !== NO_CHANGE) { textBindingInternal(lView, getSelectedIndex(), interpolated); } return ÉµÉµtextInterpolate1; } /** * * Update text content with 2 bound values surrounded by other text. * * Used when a text node has 2 interpolated values in it: * * ```html *

prefix{{v0}}-{{v1}}suffix

* ``` * * Its compiled representation is: * * ```ts * ÉµÉµtextInterpolate2('prefix', v0, '-', v1, 'suffix'); * ``` * @returns itself, so that it may be chained. * @see textInterpolateV * @codeGenApi */ function ÉµÉµtextInterpolate2(prefix, v0, i0, v1, suffix) { const lView = getLView(); const interpolated = interpolation2(lView, prefix, v0, i0, v1, suffix); if (interpolated !== NO_CHANGE) { textBindingInternal(lView, getSelectedIndex(), interpolated); } return ÉµÉµtextInterpolate2; } /** * * Update text content with 3 bound values surrounded by other text. * * Used when a text node has 3 interpolated values in it: * * ```html *

prefix{{v0}}-{{v1}}-{{v2}}suffix

* ``` * * Its compiled representation is: * * ```ts * ÉµÉµtextInterpolate3( * 'prefix', v0, '-', v1, '-', v2, 'suffix'); * ``` * @returns itself, so that it may be chained. * @see textInterpolateV * @codeGenApi */ function ÉµÉµtextInterpolate3(prefix, v0, i0, v1, i1, v2, suffix) { const lView = getLView(); const interpolated = interpolation3(lView, prefix, v0, i0, v1, i1, v2, suffix); if (interpolated !== NO_CHANGE) { textBindingInternal(lView, getSelectedIndex(), interpolated); } return ÉµÉµtextInterpolate3; } /** * * Update text content with 4 bound values surrounded by other text. * * Used when a text node has 4 interpolated values in it: * * ```html *

prefix{{v0}}-{{v1}}-{{v2}}-{{v3}}suffix

* ``` * * Its compiled representation is: * * ```ts * ÉµÉµtextInterpolate4( * 'prefix', v0, '-', v1, '-', v2, '-', v3, 'suffix'); * ``` * @returns itself, so that it may be chained. * @see ÉµÉµtextInterpolateV * @codeGenApi */ function ÉµÉµtextInterpolate4(prefix, v0, i0, v1, i1, v2, i2, v3, suffix) { const lView = getLView(); const interpolated = interpolation4(lView, prefix, v0, i0, v1, i1, v2, i2, v3, suffix); if (interpolated !== NO_CHANGE) { textBindingInternal(lView, getSelectedIndex(), interpolated); } return ÉµÉµtextInterpolate4; } /** * * Update text content with 5 bound values surrounded by other text. * * Used when a text node has 5 interpolated values in it: * * ```html *

prefix{{v0}}-{{v1}}-{{v2}}-{{v3}}-{{v4}}suffix

* ``` * * Its compiled representation is: * * ```ts * ÉµÉµtextInterpolate5( * 'prefix', v0, '-', v1, '-', v2, '-', v3, '-', v4, 'suffix'); * ``` * @returns itself, so that it may be chained. * @see textInterpolateV * @codeGenApi */ function ÉµÉµtextInterpolate5(prefix, v0, i0, v1, i1, v2, i2, v3, i3, v4, suffix) { const lView = getLView(); const interpolated = interpolation5(lView, prefix, v0, i0, v1, i1, v2, i2, v3, i3, v4, suffix); if (interpolated !== NO_CHANGE) { textBindingInternal(lView, getSelectedIndex(), interpolated); } return ÉµÉµtextInterpolate5; } /** * * Update text content with 6 bound values surrounded by other text. * * Used when a text node has 6 interpolated values in it: * * ```html *

prefix{{v0}}-{{v1}}-{{v2}}-{{v3}}-{{v4}}-{{v5}}suffix

* ``` * * Its compiled representation is: * * ```ts * ÉµÉµtextInterpolate6( * 'prefix', v0, '-', v1, '-', v2, '-', v3, '-', v4, '-', v5, 'suffix'); * ``` * * @param i4 Static value used for concatenation only. * @param v5 Value checked for change. @returns itself, so that it may be chained. * @see textInterpolateV * @codeGenApi */ function ÉµÉµtextInterpolate6(prefix, v0, i0, v1, i1, v2, i2, v3, i3, v4, i4, v5, suffix) { const lView = getLView(); const interpolated = interpolation6(lView, prefix, v0, i0, v1, i1, v2, i2, v3, i3, v4, i4, v5, suffix); if (interpolated !== NO_CHANGE) { textBindingInternal(lView, getSelectedIndex(), interpolated); } return ÉµÉµtextInterpolate6; } /** * * Update text content with 7 bound values surrounded by other text. * * Used when a text node has 7 interpolated values in it: * * ```html *

prefix{{v0}}-{{v1}}-{{v2}}-{{v3}}-{{v4}}-{{v5}}-{{v6}}suffix

* ``` * * Its compiled representation is: * * ```ts * ÉµÉµtextInterpolate7( * 'prefix', v0, '-', v1, '-', v2, '-', v3, '-', v4, '-', v5, '-', v6, 'suffix'); * ``` * @returns itself, so that it may be chained. * @see textInterpolateV * @codeGenApi */ function ÉµÉµtextInterpolate7(prefix, v0, i0, v1, i1, v2, i2, v3, i3, v4, i4, v5, i5, v6, suffix) { const lView = getLView(); const interpolated = interpolation7(lView, prefix, v0, i0, v1, i1, v2, i2, v3, i3, v4, i4, v5, i5, v6, suffix); if (interpolated !== NO_CHANGE) { textBindingInternal(lView, getSelectedIndex(), interpolated); } return ÉµÉµtextInterpolate7; } /** * * Update text content with 8 bound values surrounded by other text. * * Used when a text node has 8 interpolated values in it: * * ```html *

prefix{{v0}}-{{v1}}-{{v2}}-{{v3}}-{{v4}}-{{v5}}-{{v6}}-{{v7}}suffix

* ``` * * Its compiled representation is: * * ```ts * ÉµÉµtextInterpolate8( * 'prefix', v0, '-', v1, '-', v2, '-', v3, '-', v4, '-', v5, '-', v6, '-', v7, 'suffix'); * ``` * @returns itself, so that it may be chained. * @see textInterpolateV * @codeGenApi */ function ÉµÉµtextInterpolate8(prefix, v0, i0, v1, i1, v2, i2, v3, i3, v4, i4, v5, i5, v6, i6, v7, suffix) { const lView = getLView(); const interpolated = interpolation8(lView, prefix, v0, i0, v1, i1, v2, i2, v3, i3, v4, i4, v5, i5, v6, i6, v7, suffix); if (interpolated !== NO_CHANGE) { textBindingInternal(lView, getSelectedIndex(), interpolated); } return ÉµÉµtextInterpolate8; } /** * Update text content with 9 or more bound values other surrounded by text. * * Used when the number of interpolated values exceeds 8. * * ```html *

prefix{{v0}}-{{v1}}-{{v2}}-{{v3}}-{{v4}}-{{v5}}-{{v6}}-{{v7}}-{{v8}}-{{v9}}suffix

* ``` * * Its compiled representation is: * * ```ts * ÉµÉµtextInterpolateV( * ['prefix', v0, '-', v1, '-', v2, '-', v3, '-', v4, '-', v5, '-', v6, '-', v7, '-', v9, * 'suffix']); * ``` *. * @param values The collection of values and the strings in between those values, beginning with * a string prefix and ending with a string suffix. * (e.g. `['prefix', value0, '-', value1, '-', value2, ..., value99, 'suffix']`) * * @returns itself, so that it may be chained. * @codeGenApi */ function ÉµÉµtextInterpolateV(values) { const lView = getLView(); const interpolated = interpolationV(lView, values); if (interpolated !== NO_CHANGE) { textBindingInternal(lView, getSelectedIndex(), interpolated); } return ÉµÉµtextInterpolateV; } /** * * Update an interpolated class on an element with single bound value surrounded by text. * * Used when the value passed to a property has 1 interpolated value in it: * * ```html *

* ``` * * Its compiled representation is: * * ```ts * ÉµÉµclassMapInterpolate1('prefix', v0, 'suffix'); * ``` * * @param prefix Static value used for concatenation only. * @param v0 Value checked for change. * @param suffix Static value used for concatenation only. * @codeGenApi */ function ÉµÉµclassMapInterpolate1(prefix, v0, suffix) { const lView = getLView(); const interpolatedValue = interpolation1(lView, prefix, v0, suffix); checkStylingMap(keyValueArraySet, classStringParser, interpolatedValue, true); } /** * * Update an interpolated class on an element with 2 bound values surrounded by text. * * Used when the value passed to a property has 2 interpolated values in it: * * ```html *

* ``` * * Its compiled representation is: * * ```ts * ÉµÉµclassMapInterpolate2('prefix', v0, '-', v1, 'suffix'); * ``` * * @param prefix Static value used for concatenation only. * @param v0 Value checked for change. * @param i0 Static value used for concatenation only. * @param v1 Value checked for change. * @param suffix Static value used for concatenation only. * @codeGenApi */ function ÉµÉµclassMapInterpolate2(prefix, v0, i0, v1, suffix) { const lView = getLView(); const interpolatedValue = interpolation2(lView, prefix, v0, i0, v1, suffix); checkStylingMap(keyValueArraySet, classStringParser, interpolatedValue, true); } /** * * Update an interpolated class on an element with 3 bound values surrounded by text. * * Used when the value passed to a property has 3 interpolated values in it: * * ```html *

* ``` * * Its compiled representation is: * * ```ts * ÉµÉµclassMapInterpolate3( * 'prefix', v0, '-', v1, '-', v2, 'suffix'); * ``` * * @param prefix Static value used for concatenation only. * @param v0 Value checked for change. * @param i0 Static value used for concatenation only. * @param v1 Value checked for change. * @param i1 Static value used for concatenation only. * @param v2 Value checked for change. * @param suffix Static value used for concatenation only. * @codeGenApi */ function ÉµÉµclassMapInterpolate3(prefix, v0, i0, v1, i1, v2, suffix) { const lView = getLView(); const interpolatedValue = interpolation3(lView, prefix, v0, i0, v1, i1, v2, suffix); checkStylingMap(keyValueArraySet, classStringParser, interpolatedValue, true); } /** * * Update an interpolated class on an element with 4 bound values surrounded by text. * * Used when the value passed to a property has 4 interpolated values in it: * * ```html *

* ``` * * Its compiled representation is: * * ```ts * ÉµÉµclassMapInterpolate4( * 'prefix', v0, '-', v1, '-', v2, '-', v3, 'suffix'); * ``` * * @param prefix Static value used for concatenation only. * @param v0 Value checked for change. * @param i0 Static value used for concatenation only. * @param v1 Value checked for change. * @param i1 Static value used for concatenation only. * @param v2 Value checked for change. * @param i2 Static value used for concatenation only. * @param v3 Value checked for change. * @param suffix Static value used for concatenation only. * @codeGenApi */ function ÉµÉµclassMapInterpolate4(prefix, v0, i0, v1, i1, v2, i2, v3, suffix) { const lView = getLView(); const interpolatedValue = interpolation4(lView, prefix, v0, i0, v1, i1, v2, i2, v3, suffix); checkStylingMap(keyValueArraySet, classStringParser, interpolatedValue, true); } /** * * Update an interpolated class on an element with 5 bound values surrounded by text. * * Used when the value passed to a property has 5 interpolated values in it: * * ```html *

* ``` * * Its compiled representation is: * * ```ts * ÉµÉµclassMapInterpolate5( * 'prefix', v0, '-', v1, '-', v2, '-', v3, '-', v4, 'suffix'); * ``` * * @param prefix Static value used for concatenation only. * @param v0 Value checked for change. * @param i0 Static value used for concatenation only. * @param v1 Value checked for change. * @param i1 Static value used for concatenation only. * @param v2 Value checked for change. * @param i2 Static value used for concatenation only. * @param v3 Value checked for change. * @param i3 Static value used for concatenation only. * @param v4 Value checked for change. * @param suffix Static value used for concatenation only. * @codeGenApi */ function ÉµÉµclassMapInterpolate5(prefix, v0, i0, v1, i1, v2, i2, v3, i3, v4, suffix) { const lView = getLView(); const interpolatedValue = interpolation5(lView, prefix, v0, i0, v1, i1, v2, i2, v3, i3, v4, suffix); checkStylingMap(keyValueArraySet, classStringParser, interpolatedValue, true); } /** * * Update an interpolated class on an element with 6 bound values surrounded by text. * * Used when the value passed to a property has 6 interpolated values in it: * * ```html *

* ``` * * Its compiled representation is: * * ```ts * ÉµÉµclassMapInterpolate6( * 'prefix', v0, '-', v1, '-', v2, '-', v3, '-', v4, '-', v5, 'suffix'); * ``` * * @param prefix Static value used for concatenation only. * @param v0 Value checked for change. * @param i0 Static value used for concatenation only. * @param v1 Value checked for change. * @param i1 Static value used for concatenation only. * @param v2 Value checked for change. * @param i2 Static value used for concatenation only. * @param v3 Value checked for change. * @param i3 Static value used for concatenation only. * @param v4 Value checked for change. * @param i4 Static value used for concatenation only. * @param v5 Value checked for change. * @param suffix Static value used for concatenation only. * @codeGenApi */ function ÉµÉµclassMapInterpolate6(prefix, v0, i0, v1, i1, v2, i2, v3, i3, v4, i4, v5, suffix) { const lView = getLView(); const interpolatedValue = interpolation6(lView, prefix, v0, i0, v1, i1, v2, i2, v3, i3, v4, i4, v5, suffix); checkStylingMap(keyValueArraySet, classStringParser, interpolatedValue, true); } /** * * Update an interpolated class on an element with 7 bound values surrounded by text. * * Used when the value passed to a property has 7 interpolated values in it: * * ```html *

* ``` * * Its compiled representation is: * * ```ts * ÉµÉµclassMapInterpolate7( * 'prefix', v0, '-', v1, '-', v2, '-', v3, '-', v4, '-', v5, '-', v6, 'suffix'); * ``` * * @param prefix Static value used for concatenation only. * @param v0 Value checked for change. * @param i0 Static value used for concatenation only. * @param v1 Value checked for change. * @param i1 Static value used for concatenation only. * @param v2 Value checked for change. * @param i2 Static value used for concatenation only. * @param v3 Value checked for change. * @param i3 Static value used for concatenation only. * @param v4 Value checked for change. * @param i4 Static value used for concatenation only. * @param v5 Value checked for change. * @param i5 Static value used for concatenation only. * @param v6 Value checked for change. * @param suffix Static value used for concatenation only. * @codeGenApi */ function ÉµÉµclassMapInterpolate7(prefix, v0, i0, v1, i1, v2, i2, v3, i3, v4, i4, v5, i5, v6, suffix) { const lView = getLView(); const interpolatedValue = interpolation7(lView, prefix, v0, i0, v1, i1, v2, i2, v3, i3, v4, i4, v5, i5, v6, suffix); checkStylingMap(keyValueArraySet, classStringParser, interpolatedValue, true); } /** * * Update an interpolated class on an element with 8 bound values surrounded by text. * * Used when the value passed to a property has 8 interpolated values in it: * * ```html *

* ``` * * Its compiled representation is: * * ```ts * ÉµÉµclassMapInterpolate8( * 'prefix', v0, '-', v1, '-', v2, '-', v3, '-', v4, '-', v5, '-', v6, '-', v7, 'suffix'); * ``` * * @param prefix Static value used for concatenation only. * @param v0 Value checked for change. * @param i0 Static value used for concatenation only. * @param v1 Value checked for change. * @param i1 Static value used for concatenation only. * @param v2 Value checked for change. * @param i2 Static value used for concatenation only. * @param v3 Value checked for change. * @param i3 Static value used for concatenation only. * @param v4 Value checked for change. * @param i4 Static value used for concatenation only. * @param v5 Value checked for change. * @param i5 Static value used for concatenation only. * @param v6 Value checked for change. * @param i6 Static value used for concatenation only. * @param v7 Value checked for change. * @param suffix Static value used for concatenation only. * @codeGenApi */ function ÉµÉµclassMapInterpolate8(prefix, v0, i0, v1, i1, v2, i2, v3, i3, v4, i4, v5, i5, v6, i6, v7, suffix) { const lView = getLView(); const interpolatedValue = interpolation8(lView, prefix, v0, i0, v1, i1, v2, i2, v3, i3, v4, i4, v5, i5, v6, i6, v7, suffix); checkStylingMap(keyValueArraySet, classStringParser, interpolatedValue, true); } /** * Update an interpolated class on an element with 9 or more bound values surrounded by text. * * Used when the number of interpolated values exceeds 8. * * ```html *

* ``` * * Its compiled representation is: * * ```ts * ÉµÉµclassMapInterpolateV( * ['prefix', v0, '-', v1, '-', v2, '-', v3, '-', v4, '-', v5, '-', v6, '-', v7, '-', v9, * 'suffix']); * ``` *. * @param values The collection of values and the strings in-between those values, beginning with * a string prefix and ending with a string suffix. * (e.g. `['prefix', value0, '-', value1, '-', value2, ..., value99, 'suffix']`) * @codeGenApi */ function ÉµÉµclassMapInterpolateV(values) { const lView = getLView(); const interpolatedValue = interpolationV(lView, values); checkStylingMap(keyValueArraySet, classStringParser, interpolatedValue, true); } /** * * Update an interpolated style on an element with single bound value surrounded by text. * * Used when the value passed to a property has 1 interpolated value in it: * * ```html *

* ``` * * Its compiled representation is: * * ```ts * ÉµÉµstyleMapInterpolate1('key: ', v0, 'suffix'); * ``` * * @param prefix Static value used for concatenation only. * @param v0 Value checked for change. * @param suffix Static value used for concatenation only. * @codeGenApi */ function ÉµÉµstyleMapInterpolate1(prefix, v0, suffix) { const lView = getLView(); const interpolatedValue = interpolation1(lView, prefix, v0, suffix); ÉµÉµstyleMap(interpolatedValue); } /** * * Update an interpolated style on an element with 2 bound values surrounded by text. * * Used when the value passed to a property has 2 interpolated values in it: * * ```html *

* ``` * * Its compiled representation is: * * ```ts * ÉµÉµstyleMapInterpolate2('key: ', v0, '; key1: ', v1, 'suffix'); * ``` * * @param prefix Static value used for concatenation only. * @param v0 Value checked for change. * @param i0 Static value used for concatenation only. * @param v1 Value checked for change. * @param suffix Static value used for concatenation only. * @codeGenApi */ function ÉµÉµstyleMapInterpolate2(prefix, v0, i0, v1, suffix) { const lView = getLView(); const interpolatedValue = interpolation2(lView, prefix, v0, i0, v1, suffix); ÉµÉµstyleMap(interpolatedValue); } /** * * Update an interpolated style on an element with 3 bound values surrounded by text. * * Used when the value passed to a property has 3 interpolated values in it: * * ```html *

* ``` * * Its compiled representation is: * * ```ts * ÉµÉµstyleMapInterpolate3( * 'key: ', v0, '; key1: ', v1, '; key2: ', v2, 'suffix'); * ``` * * @param prefix Static value used for concatenation only. * @param v0 Value checked for change. * @param i0 Static value used for concatenation only. * @param v1 Value checked for change. * @param i1 Static value used for concatenation only. * @param v2 Value checked for change. * @param suffix Static value used for concatenation only. * @codeGenApi */ function ÉµÉµstyleMapInterpolate3(prefix, v0, i0, v1, i1, v2, suffix) { const lView = getLView(); const interpolatedValue = interpolation3(lView, prefix, v0, i0, v1, i1, v2, suffix); ÉµÉµstyleMap(interpolatedValue); } /** * * Update an interpolated style on an element with 4 bound values surrounded by text. * * Used when the value passed to a property has 4 interpolated values in it: * * ```html *

* ``` * * Its compiled representation is: * * ```ts * ÉµÉµstyleMapInterpolate4( * 'key: ', v0, '; key1: ', v1, '; key2: ', v2, '; key3: ', v3, 'suffix'); * ``` * * @param prefix Static value used for concatenation only. * @param v0 Value checked for change. * @param i0 Static value used for concatenation only. * @param v1 Value checked for change. * @param i1 Static value used for concatenation only. * @param v2 Value checked for change. * @param i2 Static value used for concatenation only. * @param v3 Value checked for change. * @param suffix Static value used for concatenation only. * @codeGenApi */ function ÉµÉµstyleMapInterpolate4(prefix, v0, i0, v1, i1, v2, i2, v3, suffix) { const lView = getLView(); const interpolatedValue = interpolation4(lView, prefix, v0, i0, v1, i1, v2, i2, v3, suffix); ÉµÉµstyleMap(interpolatedValue); } /** * * Update an interpolated style on an element with 5 bound values surrounded by text. * * Used when the value passed to a property has 5 interpolated values in it: * * ```html *

* ``` * * Its compiled representation is: * * ```ts * ÉµÉµstyleMapInterpolate5( * 'key: ', v0, '; key1: ', v1, '; key2: ', v2, '; key3: ', v3, '; key4: ', v4, 'suffix'); * ``` * * @param prefix Static value used for concatenation only. * @param v0 Value checked for change. * @param i0 Static value used for concatenation only. * @param v1 Value checked for change. * @param i1 Static value used for concatenation only. * @param v2 Value checked for change. * @param i2 Static value used for concatenation only. * @param v3 Value checked for change. * @param i3 Static value used for concatenation only. * @param v4 Value checked for change. * @param suffix Static value used for concatenation only. * @codeGenApi */ function ÉµÉµstyleMapInterpolate5(prefix, v0, i0, v1, i1, v2, i2, v3, i3, v4, suffix) { const lView = getLView(); const interpolatedValue = interpolation5(lView, prefix, v0, i0, v1, i1, v2, i2, v3, i3, v4, suffix); ÉµÉµstyleMap(interpolatedValue); } /** * * Update an interpolated style on an element with 6 bound values surrounded by text. * * Used when the value passed to a property has 6 interpolated values in it: * * ```html *

* ``` * * Its compiled representation is: * * ```ts * ÉµÉµstyleMapInterpolate6( * 'key: ', v0, '; key1: ', v1, '; key2: ', v2, '; key3: ', v3, '; key4: ', v4, '; key5: ', v5, * 'suffix'); * ``` * * @param prefix Static value used for concatenation only. * @param v0 Value checked for change. * @param i0 Static value used for concatenation only. * @param v1 Value checked for change. * @param i1 Static value used for concatenation only. * @param v2 Value checked for change. * @param i2 Static value used for concatenation only. * @param v3 Value checked for change. * @param i3 Static value used for concatenation only. * @param v4 Value checked for change. * @param i4 Static value used for concatenation only. * @param v5 Value checked for change. * @param suffix Static value used for concatenation only. * @codeGenApi */ function ÉµÉµstyleMapInterpolate6(prefix, v0, i0, v1, i1, v2, i2, v3, i3, v4, i4, v5, suffix) { const lView = getLView(); const interpolatedValue = interpolation6(lView, prefix, v0, i0, v1, i1, v2, i2, v3, i3, v4, i4, v5, suffix); ÉµÉµstyleMap(interpolatedValue); } /** * * Update an interpolated style on an element with 7 bound values surrounded by text. * * Used when the value passed to a property has 7 interpolated values in it: * * ```html *

* ``` * * Its compiled representation is: * * ```ts * ÉµÉµstyleMapInterpolate7( * 'key: ', v0, '; key1: ', v1, '; key2: ', v2, '; key3: ', v3, '; key4: ', v4, '; key5: ', v5, * '; key6: ', v6, 'suffix'); * ``` * * @param prefix Static value used for concatenation only. * @param v0 Value checked for change. * @param i0 Static value used for concatenation only. * @param v1 Value checked for change. * @param i1 Static value used for concatenation only. * @param v2 Value checked for change. * @param i2 Static value used for concatenation only. * @param v3 Value checked for change. * @param i3 Static value used for concatenation only. * @param v4 Value checked for change. * @param i4 Static value used for concatenation only. * @param v5 Value checked for change. * @param i5 Static value used for concatenation only. * @param v6 Value checked for change. * @param suffix Static value used for concatenation only. * @codeGenApi */ function ÉµÉµstyleMapInterpolate7(prefix, v0, i0, v1, i1, v2, i2, v3, i3, v4, i4, v5, i5, v6, suffix) { const lView = getLView(); const interpolatedValue = interpolation7(lView, prefix, v0, i0, v1, i1, v2, i2, v3, i3, v4, i4, v5, i5, v6, suffix); ÉµÉµstyleMap(interpolatedValue); } /** * * Update an interpolated style on an element with 8 bound values surrounded by text. * * Used when the value passed to a property has 8 interpolated values in it: * * ```html *

* ``` * * Its compiled representation is: * * ```ts * ÉµÉµstyleMapInterpolate8( * 'key: ', v0, '; key1: ', v1, '; key2: ', v2, '; key3: ', v3, '; key4: ', v4, '; key5: ', v5, * '; key6: ', v6, '; key7: ', v7, 'suffix'); * ``` * * @param prefix Static value used for concatenation only. * @param v0 Value checked for change. * @param i0 Static value used for concatenation only. * @param v1 Value checked for change. * @param i1 Static value used for concatenation only. * @param v2 Value checked for change. * @param i2 Static value used for concatenation only. * @param v3 Value checked for change. * @param i3 Static value used for concatenation only. * @param v4 Value checked for change. * @param i4 Static value used for concatenation only. * @param v5 Value checked for change. * @param i5 Static value used for concatenation only. * @param v6 Value checked for change. * @param i6 Static value used for concatenation only. * @param v7 Value checked for change. * @param suffix Static value used for concatenation only. * @codeGenApi */ function ÉµÉµstyleMapInterpolate8(prefix, v0, i0, v1, i1, v2, i2, v3, i3, v4, i4, v5, i5, v6, i6, v7, suffix) { const lView = getLView(); const interpolatedValue = interpolation8(lView, prefix, v0, i0, v1, i1, v2, i2, v3, i3, v4, i4, v5, i5, v6, i6, v7, suffix); ÉµÉµstyleMap(interpolatedValue); } /** * Update an interpolated style on an element with 9 or more bound values surrounded by text. * * Used when the number of interpolated values exceeds 8. * * ```html *

* ``` * * Its compiled representation is: * * ```ts * ÉµÉµstyleMapInterpolateV( * ['key: ', v0, '; key1: ', v1, '; key2: ', v2, '; key3: ', v3, '; key4: ', v4, '; key5: ', v5, * '; key6: ', v6, '; key7: ', v7, '; key8: ', v8, '; key9: ', v9, 'suffix']); * ``` *. * @param values The collection of values and the strings in-between those values, beginning with * a string prefix and ending with a string suffix. * (e.g. `['prefix', value0, '; key2: ', value1, '; key2: ', value2, ..., value99, 'suffix']`) * @codeGenApi */ function ÉµÉµstyleMapInterpolateV(values) { const lView = getLView(); const interpolatedValue = interpolationV(lView, values); ÉµÉµstyleMap(interpolatedValue); } /** * * Update an interpolated style property on an element with single bound value surrounded by text. * * Used when the value passed to a property has 1 interpolated value in it: * * ```html *

* ``` * * Its compiled representation is: * * ```ts * ÉµÉµstylePropInterpolate1(0, 'prefix', v0, 'suffix'); * ``` * * @param styleIndex Index of style to update. This index value refers to the * index of the style in the style bindings array that was passed into * `styling`. * @param prefix Static value used for concatenation only. * @param v0 Value checked for change. * @param suffix Static value used for concatenation only. * @param valueSuffix Optional suffix. Used with scalar values to add unit such as `px`. * @returns itself, so that it may be chained. * @codeGenApi */ function ÉµÉµstylePropInterpolate1(prop, prefix, v0, suffix, valueSuffix) { const lView = getLView(); const interpolatedValue = interpolation1(lView, prefix, v0, suffix); checkStylingProperty(prop, interpolatedValue, valueSuffix, false); return ÉµÉµstylePropInterpolate1; } /** * * Update an interpolated style property on an element with 2 bound values surrounded by text. * * Used when the value passed to a property has 2 interpolated values in it: * * ```html *

* ``` * * Its compiled representation is: * * ```ts * ÉµÉµstylePropInterpolate2(0, 'prefix', v0, '-', v1, 'suffix'); * ``` * * @param styleIndex Index of style to update. This index value refers to the * index of the style in the style bindings array that was passed into * `styling`. * @param prefix Static value used for concatenation only. * @param v0 Value checked for change. * @param i0 Static value used for concatenation only. * @param v1 Value checked for change. * @param suffix Static value used for concatenation only. * @param valueSuffix Optional suffix. Used with scalar values to add unit such as `px`. * @returns itself, so that it may be chained. * @codeGenApi */ function ÉµÉµstylePropInterpolate2(prop, prefix, v0, i0, v1, suffix, valueSuffix) { const lView = getLView(); const interpolatedValue = interpolation2(lView, prefix, v0, i0, v1, suffix); checkStylingProperty(prop, interpolatedValue, valueSuffix, false); return ÉµÉµstylePropInterpolate2; } /** * * Update an interpolated style property on an element with 3 bound values surrounded by text. * * Used when the value passed to a property has 3 interpolated values in it: * * ```html *

* ``` * * Its compiled representation is: * * ```ts * ÉµÉµstylePropInterpolate3(0, 'prefix', v0, '-', v1, '-', v2, 'suffix'); * ``` * * @param styleIndex Index of style to update. This index value refers to the * index of the style in the style bindings array that was passed into * `styling`. * @param prefix Static value used for concatenation only. * @param v0 Value checked for change. * @param i0 Static value used for concatenation only. * @param v1 Value checked for change. * @param i1 Static value used for concatenation only. * @param v2 Value checked for change. * @param suffix Static value used for concatenation only. * @param valueSuffix Optional suffix. Used with scalar values to add unit such as `px`. * @returns itself, so that it may be chained. * @codeGenApi */ function ÉµÉµstylePropInterpolate3(prop, prefix, v0, i0, v1, i1, v2, suffix, valueSuffix) { const lView = getLView(); const interpolatedValue = interpolation3(lView, prefix, v0, i0, v1, i1, v2, suffix); checkStylingProperty(prop, interpolatedValue, valueSuffix, false); return ÉµÉµstylePropInterpolate3; } /** * * Update an interpolated style property on an element with 4 bound values surrounded by text. * * Used when the value passed to a property has 4 interpolated values in it: * * ```html *

* ``` * * Its compiled representation is: * * ```ts * ÉµÉµstylePropInterpolate4(0, 'prefix', v0, '-', v1, '-', v2, '-', v3, 'suffix'); * ``` * * @param styleIndex Index of style to update. This index value refers to the * index of the style in the style bindings array that was passed into * `styling`. * @param prefix Static value used for concatenation only. * @param v0 Value checked for change. * @param i0 Static value used for concatenation only. * @param v1 Value checked for change. * @param i1 Static value used for concatenation only. * @param v2 Value checked for change. * @param i2 Static value used for concatenation only. * @param v3 Value checked for change. * @param suffix Static value used for concatenation only. * @param valueSuffix Optional suffix. Used with scalar values to add unit such as `px`. * @returns itself, so that it may be chained. * @codeGenApi */ function ÉµÉµstylePropInterpolate4(prop, prefix, v0, i0, v1, i1, v2, i2, v3, suffix, valueSuffix) { const lView = getLView(); const interpolatedValue = interpolation4(lView, prefix, v0, i0, v1, i1, v2, i2, v3, suffix); checkStylingProperty(prop, interpolatedValue, valueSuffix, false); return ÉµÉµstylePropInterpolate4; } /** * * Update an interpolated style property on an element with 5 bound values surrounded by text. * * Used when the value passed to a property has 5 interpolated values in it: * * ```html *

* ``` * * Its compiled representation is: * * ```ts * ÉµÉµstylePropInterpolate5(0, 'prefix', v0, '-', v1, '-', v2, '-', v3, '-', v4, 'suffix'); * ``` * * @param styleIndex Index of style to update. This index value refers to the * index of the style in the style bindings array that was passed into * `styling`. * @param prefix Static value used for concatenation only. * @param v0 Value checked for change. * @param i0 Static value used for concatenation only. * @param v1 Value checked for change. * @param i1 Static value used for concatenation only. * @param v2 Value checked for change. * @param i2 Static value used for concatenation only. * @param v3 Value checked for change. * @param i3 Static value used for concatenation only. * @param v4 Value checked for change. * @param suffix Static value used for concatenation only. * @param valueSuffix Optional suffix. Used with scalar values to add unit such as `px`. * @returns itself, so that it may be chained. * @codeGenApi */ function ÉµÉµstylePropInterpolate5(prop, prefix, v0, i0, v1, i1, v2, i2, v3, i3, v4, suffix, valueSuffix) { const lView = getLView(); const interpolatedValue = interpolation5(lView, prefix, v0, i0, v1, i1, v2, i2, v3, i3, v4, suffix); checkStylingProperty(prop, interpolatedValue, valueSuffix, false); return ÉµÉµstylePropInterpolate5; } /** * * Update an interpolated style property on an element with 6 bound values surrounded by text. * * Used when the value passed to a property has 6 interpolated values in it: * * ```html *

* ``` * * Its compiled representation is: * * ```ts * ÉµÉµstylePropInterpolate6(0, 'prefix', v0, '-', v1, '-', v2, '-', v3, '-', v4, '-', v5, 'suffix'); * ``` * * @param styleIndex Index of style to update. This index value refers to the * index of the style in the style bindings array that was passed into * `styling`. * @param prefix Static value used for concatenation only. * @param v0 Value checked for change. * @param i0 Static value used for concatenation only. * @param v1 Value checked for change. * @param i1 Static value used for concatenation only. * @param v2 Value checked for change. * @param i2 Static value used for concatenation only. * @param v3 Value checked for change. * @param i3 Static value used for concatenation only. * @param v4 Value checked for change. * @param i4 Static value used for concatenation only. * @param v5 Value checked for change. * @param suffix Static value used for concatenation only. * @param valueSuffix Optional suffix. Used with scalar values to add unit such as `px`. * @returns itself, so that it may be chained. * @codeGenApi */ function ÉµÉµstylePropInterpolate6(prop, prefix, v0, i0, v1, i1, v2, i2, v3, i3, v4, i4, v5, suffix, valueSuffix) { const lView = getLView(); const interpolatedValue = interpolation6(lView, prefix, v0, i0, v1, i1, v2, i2, v3, i3, v4, i4, v5, suffix); checkStylingProperty(prop, interpolatedValue, valueSuffix, false); return ÉµÉµstylePropInterpolate6; } /** * * Update an interpolated style property on an element with 7 bound values surrounded by text. * * Used when the value passed to a property has 7 interpolated values in it: * * ```html *

* ``` * * Its compiled representation is: * * ```ts * ÉµÉµstylePropInterpolate7( * 0, 'prefix', v0, '-', v1, '-', v2, '-', v3, '-', v4, '-', v5, '-', v6, 'suffix'); * ``` * * @param styleIndex Index of style to update. This index value refers to the * index of the style in the style bindings array that was passed into * `styling`. * @param prefix Static value used for concatenation only. * @param v0 Value checked for change. * @param i0 Static value used for concatenation only. * @param v1 Value checked for change. * @param i1 Static value used for concatenation only. * @param v2 Value checked for change. * @param i2 Static value used for concatenation only. * @param v3 Value checked for change. * @param i3 Static value used for concatenation only. * @param v4 Value checked for change. * @param i4 Static value used for concatenation only. * @param v5 Value checked for change. * @param i5 Static value used for concatenation only. * @param v6 Value checked for change. * @param suffix Static value used for concatenation only. * @param valueSuffix Optional suffix. Used with scalar values to add unit such as `px`. * @returns itself, so that it may be chained. * @codeGenApi */ function ÉµÉµstylePropInterpolate7(prop, prefix, v0, i0, v1, i1, v2, i2, v3, i3, v4, i4, v5, i5, v6, suffix, valueSuffix) { const lView = getLView(); const interpolatedValue = interpolation7(lView, prefix, v0, i0, v1, i1, v2, i2, v3, i3, v4, i4, v5, i5, v6, suffix); checkStylingProperty(prop, interpolatedValue, valueSuffix, false); return ÉµÉµstylePropInterpolate7; } /** * * Update an interpolated style property on an element with 8 bound values surrounded by text. * * Used when the value passed to a property has 8 interpolated values in it: * * ```html *

* ``` * * Its compiled representation is: * * ```ts * ÉµÉµstylePropInterpolate8(0, 'prefix', v0, '-', v1, '-', v2, '-', v3, '-', v4, '-', v5, '-', v6, * '-', v7, 'suffix'); * ``` * * @param styleIndex Index of style to update. This index value refers to the * index of the style in the style bindings array that was passed into * `styling`. * @param prefix Static value used for concatenation only. * @param v0 Value checked for change. * @param i0 Static value used for concatenation only. * @param v1 Value checked for change. * @param i1 Static value used for concatenation only. * @param v2 Value checked for change. * @param i2 Static value used for concatenation only. * @param v3 Value checked for change. * @param i3 Static value used for concatenation only. * @param v4 Value checked for change. * @param i4 Static value used for concatenation only. * @param v5 Value checked for change. * @param i5 Static value used for concatenation only. * @param v6 Value checked for change. * @param i6 Static value used for concatenation only. * @param v7 Value checked for change. * @param suffix Static value used for concatenation only. * @param valueSuffix Optional suffix. Used with scalar values to add unit such as `px`. * @returns itself, so that it may be chained. * @codeGenApi */ function ÉµÉµstylePropInterpolate8(prop, prefix, v0, i0, v1, i1, v2, i2, v3, i3, v4, i4, v5, i5, v6, i6, v7, suffix, valueSuffix) { const lView = getLView(); const interpolatedValue = interpolation8(lView, prefix, v0, i0, v1, i1, v2, i2, v3, i3, v4, i4, v5, i5, v6, i6, v7, suffix); checkStylingProperty(prop, interpolatedValue, valueSuffix, false); return ÉµÉµstylePropInterpolate8; } /** * Update an interpolated style property on an element with 9 or more bound values surrounded by * text. * * Used when the number of interpolated values exceeds 8. * * ```html *

* ``` * * Its compiled representation is: * * ```ts * ÉµÉµstylePropInterpolateV( * 0, ['prefix', v0, '-', v1, '-', v2, '-', v3, '-', v4, '-', v5, '-', v6, '-', v7, '-', v9, * 'suffix']); * ``` * * @param styleIndex Index of style to update. This index value refers to the * index of the style in the style bindings array that was passed into * `styling`.. * @param values The collection of values and the strings in-between those values, beginning with * a string prefix and ending with a string suffix. * (e.g. `['prefix', value0, '-', value1, '-', value2, ..., value99, 'suffix']`) * @param valueSuffix Optional suffix. Used with scalar values to add unit such as `px`. * @returns itself, so that it may be chained. * @codeGenApi */ function ÉµÉµstylePropInterpolateV(prop, values, valueSuffix) { const lView = getLView(); const interpolatedValue = interpolationV(lView, values); checkStylingProperty(prop, interpolatedValue, valueSuffix, false); return ÉµÉµstylePropInterpolateV; } /** * Update a property on a host element. Only applies to native node properties, not inputs. * * Operates on the element selected by index via the {@link select} instruction. * * @param propName Name of property. Because it is going to DOM, this is not subject to * renaming as part of minification. * @param value New value to write. * @param sanitizer An optional function used to sanitize the value. * @returns This function returns itself so that it may be chained * (e.g. `property('name', ctx.name)('title', ctx.title)`) * * @codeGenApi */ function ÉµÉµhostProperty(propName, value, sanitizer) { const lView = getLView(); const bindingIndex = nextBindingIndex(); if (bindingUpdated(lView, bindingIndex, value)) { const tView = getTView(); const tNode = getSelectedTNode(); elementPropertyInternal(tView, tNode, lView, propName, value, lView[RENDERER], sanitizer, true); ngDevMode && storePropertyBindingMetadata(tView.data, tNode, propName, bindingIndex); } return ÉµÉµhostProperty; } /** * Updates a synthetic host binding (e.g. `[@foo]`) on a component or directive. * * This instruction is for compatibility purposes and is designed to ensure that a * synthetic host binding (e.g. `@HostBinding('@foo')`) properly gets rendered in * the component's renderer. Normally all host bindings are evaluated with the parent * component's renderer, but, in the case of animation @triggers, they need to be * evaluated with the sub component's renderer (because that's where the animation * triggers are defined). * * Do not use this instruction as a replacement for `elementProperty`. This instruction * only exists to ensure compatibility with the ViewEngine's host binding behavior. * * @param index The index of the element to update in the data array * @param propName Name of property. Because it is going to DOM, this is not subject to * renaming as part of minification. * @param value New value to write. * @param sanitizer An optional function used to sanitize the value. * * @codeGenApi */ function ÉµÉµsyntheticHostProperty(propName, value, sanitizer) { const lView = getLView(); const bindingIndex = nextBindingIndex(); if (bindingUpdated(lView, bindingIndex, value)) { const tView = getTView(); const tNode = getSelectedTNode(); const currentDef = getCurrentDirectiveDef(tView.data); const renderer = loadComponentRenderer(currentDef, tNode, lView); elementPropertyInternal(tView, tNode, lView, propName, value, renderer, sanitizer, true); ngDevMode && storePropertyBindingMetadata(tView.data, tNode, propName, bindingIndex); } return ÉµÉµsyntheticHostProperty; } /** * NOTE: changes to the `ngI18nClosureMode` name must be synced with `compiler-cli/src/tooling.ts`. */ if (typeof ngI18nClosureMode === 'undefined') { // These property accesses can be ignored because ngI18nClosureMode will be set to false // when optimizing code and the whole if statement will be dropped. // Make sure to refer to ngI18nClosureMode as ['ngI18nClosureMode'] for closure. // NOTE: we need to have it in IIFE so that the tree-shaker is happy. (function () { // tslint:disable-next-line:no-toplevel-property-access _global['ngI18nClosureMode'] = // TODO(FW-1250): validate that this actually, you know, works. // tslint:disable-next-line:no-toplevel-property-access typeof goog !== 'undefined' && typeof goog.getMsg === 'function'; })(); } // THIS CODE IS GENERATED - DO NOT MODIFY. const u = undefined; function plural(val) { const i = Math.floor(Math.abs(val)), v = val.toString().replace(/^[^.]*\.?/, '').length; if (i === 1 && v === 0) return 1; return 5; } var localeEn = ["en", [["a", "p"], ["AM", "PM"], u], [["AM", "PM"], u, u], [["S", "M", "T", "W", "T", "F", "S"], ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"], ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"], ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"]], u, [["J", "F", "M", "A", "M", "J", "J", "A", "S", "O", "N", "D"], ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]], u, [["B", "A"], ["BC", "AD"], ["Before Christ", "Anno Domini"]], 0, [6, 0], ["M/d/yy", "MMM d, y", "MMMM d, y", "EEEE, MMMM d, y"], ["h:mm a", "h:mm:ss a", "h:mm:ss a z", "h:mm:ss a zzzz"], ["{1}, {0}", u, "{1} 'at' {0}", u], [".", ",", ";", "%", "+", "-", "E", "Ã—", "â€°", "âˆž", "NaN", ":"], ["#,##0.###", "#,##0%", "Â¤#,##0.00", "#E0"], "USD", "$", "US Dollar", {}, "ltr", plural]; /** * This const is used to store the locale data registered with `registerLocaleData` */ let LOCALE_DATA = {}; /** * Register locale data to be used internally by Angular. See the * ["I18n guide"](guide/i18n-common-format-data-locale) to know how to import additional locale * data. * * The signature `registerLocaleData(data: any, extraData?: any)` is deprecated since v5.1 */ function registerLocaleData(data, localeId, extraData) { if (typeof localeId !== 'string') { extraData = localeId; localeId = data[LocaleDataIndex.LocaleId]; } localeId = localeId.toLowerCase().replace(/_/g, '-'); LOCALE_DATA[localeId] = data; if (extraData) { LOCALE_DATA[localeId][LocaleDataIndex.ExtraData] = extraData; } } /** * Finds the locale data for a given locale. * * @param locale The locale code. * @returns The locale data. * @see [Internationalization (i18n) Guide](https://angular.io/guide/i18n-overview) */ function findLocaleData(locale) { const normalizedLocale = normalizeLocale(locale); let match = getLocaleData(normalizedLocale); if (match) { return match; } // let's try to find a parent locale const parentLocale = normalizedLocale.split('-')[0]; match = getLocaleData(parentLocale); if (match) { return match; } if (parentLocale === 'en') { return localeEn; } throw new RuntimeError(701 /* RuntimeErrorCode.MISSING_LOCALE_DATA */, ngDevMode && `Missing locale data for the locale "${locale}".`); } /** * Retrieves the default currency code for the given locale. * * The default is defined as the first currency which is still in use. * * @param locale The code of the locale whose currency code we want. * @returns The code of the default currency for the given locale. * */ function getLocaleCurrencyCode(locale) { const data = findLocaleData(locale); return data[LocaleDataIndex.CurrencyCode] || null; } /** * Retrieves the plural function used by ICU expressions to determine the plural case to use * for a given locale. * @param locale A locale code for the locale format rules to use. * @returns The plural function for the locale. * @see `NgPlural` * @see [Internationalization (i18n) Guide](/guide/i18n-overview) */ function getLocalePluralCase(locale) { const data = findLocaleData(locale); return data[LocaleDataIndex.PluralCase]; } /** * Helper function to get the given `normalizedLocale` from `LOCALE_DATA` * or from the global `ng.common.locale`. */ function getLocaleData(normalizedLocale) { if (!(normalizedLocale in LOCALE_DATA)) { LOCALE_DATA[normalizedLocale] = _global.ng && _global.ng.common && _global.ng.common.locales && _global.ng.common.locales[normalizedLocale]; } return LOCALE_DATA[normalizedLocale]; } /** * Helper function to remove all the locale data from `LOCALE_DATA`. */ function unregisterAllLocaleData() { LOCALE_DATA = {}; } /** * Index of each type of locale data from the locale data array */ var LocaleDataIndex; exports('ÉµLocaleDataIndex', LocaleDataIndex); (function (LocaleDataIndex) { LocaleDataIndex[LocaleDataIndex["LocaleId"] = 0] = "LocaleId"; LocaleDataIndex[LocaleDataIndex["DayPeriodsFormat"] = 1] = "DayPeriodsFormat"; LocaleDataIndex[LocaleDataIndex["DayPeriodsStandalone"] = 2] = "DayPeriodsStandalone"; LocaleDataIndex[LocaleDataIndex["DaysFormat"] = 3] = "DaysFormat"; LocaleDataIndex[LocaleDataIndex["DaysStandalone"] = 4] = "DaysStandalone"; LocaleDataIndex[LocaleDataIndex["MonthsFormat"] = 5] = "MonthsFormat"; LocaleDataIndex[LocaleDataIndex["MonthsStandalone"] = 6] = "MonthsStandalone"; LocaleDataIndex[LocaleDataIndex["Eras"] = 7] = "Eras"; LocaleDataIndex[LocaleDataIndex["FirstDayOfWeek"] = 8] = "FirstDayOfWeek"; LocaleDataIndex[LocaleDataIndex["WeekendRange"] = 9] = "WeekendRange"; LocaleDataIndex[LocaleDataIndex["DateFormat"] = 10] = "DateFormat"; LocaleDataIndex[LocaleDataIndex["TimeFormat"] = 11] = "TimeFormat"; LocaleDataIndex[LocaleDataIndex["DateTimeFormat"] = 12] = "DateTimeFormat"; LocaleDataIndex[LocaleDataIndex["NumberSymbols"] = 13] = "NumberSymbols"; LocaleDataIndex[LocaleDataIndex["NumberFormats"] = 14] = "NumberFormats"; LocaleDataIndex[LocaleDataIndex["CurrencyCode"] = 15] = "CurrencyCode"; LocaleDataIndex[LocaleDataIndex["CurrencySymbol"] = 16] = "CurrencySymbol"; LocaleDataIndex[LocaleDataIndex["CurrencyName"] = 17] = "CurrencyName"; LocaleDataIndex[LocaleDataIndex["Currencies"] = 18] = "Currencies"; LocaleDataIndex[LocaleDataIndex["Directionality"] = 19] = "Directionality"; LocaleDataIndex[LocaleDataIndex["PluralCase"] = 20] = "PluralCase"; LocaleDataIndex[LocaleDataIndex["ExtraData"] = 21] = "ExtraData"; })(LocaleDataIndex || (exports('ÉµLocaleDataIndex', LocaleDataIndex = {}))); /** * Returns the canonical form of a locale name - lowercase with `_` replaced with `-`. */ function normalizeLocale(locale) { return locale.toLowerCase().replace(/_/g, '-'); } const pluralMapping = ['zero', 'one', 'two', 'few', 'many']; /** * Returns the plural case based on the locale */ function getPluralCase(value, locale) { const plural = getLocalePluralCase(locale)(parseInt(value, 10)); const result = pluralMapping[plural]; return (result !== undefined) ? result : 'other'; } /** * The locale id that the application is using by default (for translations and ICU expressions). */ const DEFAULT_LOCALE_ID = exports('ÉµDEFAULT_LOCALE_ID', 'en-US'); /** * USD currency code that the application uses by default for CurrencyPipe when no * DEFAULT_CURRENCY_CODE is provided. */ const USD_CURRENCY_CODE = 'USD'; /** * Marks that the next string is an element name. * * See `I18nMutateOpCodes` documentation. */ const ELEMENT_MARKER = { marker: 'element' }; /** * Marks that the next string is comment text need for ICU. * * See `I18nMutateOpCodes` documentation. */ const ICU_MARKER = { marker: 'ICU' }; /** * See `I18nCreateOpCodes` */ var I18nCreateOpCode; (function (I18nCreateOpCode) { /** * Number of bits to shift index so that it can be combined with the `APPEND_EAGERLY` and * `COMMENT`. */ I18nCreateOpCode[I18nCreateOpCode["SHIFT"] = 2] = "SHIFT"; /** * Should the node be appended to parent immediately after creation. */ I18nCreateOpCode[I18nCreateOpCode["APPEND_EAGERLY"] = 1] = "APPEND_EAGERLY"; /** * If set the node should be comment (rather than a text) node. */ I18nCreateOpCode[I18nCreateOpCode["COMMENT"] = 2] = "COMMENT"; })(I18nCreateOpCode || (I18nCreateOpCode = {})); /** * The locale id that the application is currently using (for translations and ICU expressions). * This is the ivy version of `LOCALE_ID` that was defined as an injection token for the view engine * but is now defined as a global value. */ let LOCALE_ID$1 = DEFAULT_LOCALE_ID; /** * Sets the locale id that will be used for translations and ICU expressions. * This is the ivy version of `LOCALE_ID` that was defined as an injection token for the view engine * but is now defined as a global value. * * @param localeId */ function setLocaleId(localeId) { assertDefined(localeId, `Expected localeId to be defined`); if (typeof localeId === 'string') { LOCALE_ID$1 = localeId.toLowerCase().replace(/_/g, '-'); } } /** * Gets the locale id that will be used for translations and ICU expressions. * This is the ivy version of `LOCALE_ID` that was defined as an injection token for the view engine * but is now defined as a global value. */ function getLocaleId() { return LOCALE_ID$1; } /** * Find a node in front of which `currentTNode` should be inserted (takes i18n into account). * * This method determines the `RNode` in front of which we should insert the `currentRNode`. This * takes `TNode.insertBeforeIndex` into account. * * @param parentTNode parent `TNode` * @param currentTNode current `TNode` (The node which we would like to insert into the DOM) * @param lView current `LView` */ function getInsertInFrontOfRNodeWithI18n(parentTNode, currentTNode, lView) { const tNodeInsertBeforeIndex = currentTNode.insertBeforeIndex; const insertBeforeIndex = Array.isArray(tNodeInsertBeforeIndex) ? tNodeInsertBeforeIndex[0] : tNodeInsertBeforeIndex; if (insertBeforeIndex === null) { return getInsertInFrontOfRNodeWithNoI18n(parentTNode, currentTNode, lView); } else { ngDevMode && assertIndexInRange(lView, insertBeforeIndex); return unwrapRNode(lView[insertBeforeIndex]); } } /** * Process `TNode.insertBeforeIndex` by adding i18n text nodes. * * See `TNode.insertBeforeIndex` */ function processI18nInsertBefore(renderer, childTNode, lView, childRNode, parentRElement) { const tNodeInsertBeforeIndex = childTNode.insertBeforeIndex; if (Array.isArray(tNodeInsertBeforeIndex)) { // An array indicates that there are i18n nodes that need to be added as children of this // `childRNode`. These i18n nodes were created before this `childRNode` was available and so // only now can be added. The first element of the array is the normal index where we should // insert the `childRNode`. Additional elements are the extra nodes to be added as children of // `childRNode`. ngDevMode && assertDomNode(childRNode); let i18nParent = childRNode; let anchorRNode = null; if (!(childTNode.type & 3 /* TNodeType.AnyRNode */)) { anchorRNode = i18nParent; i18nParent = parentRElement; } 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. const i18nChild = lView[tNodeInsertBeforeIndex[i]]; nativeInsertBefore(renderer, i18nParent, i18nChild, anchorRNode, false); } } } } /** * Add `tNode` to `previousTNodes` list and update relevant `TNode`s in `previousTNodes` list * `tNode.insertBeforeIndex`. * * Things to keep in mind: * 1. All i18n text nodes are encoded as `TNodeType.Element` and are created eagerly by the * `ÉµÉµi18nStart` instruction. * 2. All `TNodeType.Placeholder` `TNodes` are elements which will be created later by * `ÉµÉµelementStart` instruction. * 3. `ÉµÉµelementStart` instruction will create `TNode`s in the ascending `TNode.index` order. (So a * smaller index `TNode` is guaranteed to be created before a larger one) * * We use the above three invariants to determine `TNode.insertBeforeIndex`. * * In an ideal world `TNode.insertBeforeIndex` would always be `TNode.next.index`. However, * this will not work because `TNode.next.index` may be larger than `TNode.index` which means that * the next node is not yet created and therefore we can't insert in front of it. * * Rule1: `TNode.insertBeforeIndex = null` if `TNode.next === null` (Initial condition, as we don't * know if there will be further `TNode`s inserted after.) * Rule2: If `previousTNode` is created after the `tNode` being inserted, then * `previousTNode.insertBeforeNode = tNode.index` (So when a new `tNode` is added we check * previous to see if we can update its `insertBeforeTNode`) * * See `TNode.insertBeforeIndex` for more context. * * @param previousTNodes A list of previous TNodes so that we can easily traverse `TNode`s in * reverse order. (If `TNode` would have `previous` this would not be necessary.) * @param newTNode A TNode to add to the `previousTNodes` list. */ function addTNodeAndUpdateInsertBeforeIndex(previousTNodes, newTNode) { // Start with Rule1 ngDevMode && assertEqual(newTNode.insertBeforeIndex, null, 'We expect that insertBeforeIndex is not set'); previousTNodes.push(newTNode); if (previousTNodes.length > 1) { for (let i = previousTNodes.length - 2; i >= 0; i--) { const existingTNode = previousTNodes[i]; // Text nodes are created eagerly and so they don't need their `indexBeforeIndex` updated. // It is safe to ignore them. if (!isI18nText(existingTNode)) { if (isNewTNodeCreatedBefore(existingTNode, newTNode) && getInsertBeforeIndex(existingTNode) === null) { // If it was created before us in time, (and it does not yet have `insertBeforeIndex`) // then add the `insertBeforeIndex`. setInsertBeforeIndex(existingTNode, newTNode.index); } } } } } function isI18nText(tNode) { return !(tNode.type & 64 /* TNodeType.Placeholder */); } function isNewTNodeCreatedBefore(existingTNode, newTNode) { return isI18nText(newTNode) || existingTNode.index > newTNode.index; } function getInsertBeforeIndex(tNode) { const index = tNode.insertBeforeIndex; return Array.isArray(index) ? index[0] : index; } function setInsertBeforeIndex(tNode, value) { const index = tNode.insertBeforeIndex; if (Array.isArray(index)) { // Array is stored if we have to insert child nodes. See `TNode.insertBeforeIndex` index[0] = value; } else { setI18nHandling(getInsertInFrontOfRNodeWithI18n, processI18nInsertBefore); tNode.insertBeforeIndex = value; } } /** * Retrieve `TIcu` at a given `index`. * * The `TIcu` can be stored either directly (if it is nested ICU) OR * it is stored inside tho `TIcuContainer` if it is top level ICU. * * The reason for this is that the top level ICU need a `TNode` so that they are part of the render * tree, but nested ICU's have no TNode, because we don't know ahead of time if the nested ICU is * expressed (parent ICU may have selected a case which does not contain it.) * * @param tView Current `TView`. * @param index Index where the value should be read from. */ function getTIcu(tView, index) { const value = tView.data[index]; if (value === null || typeof value === 'string') return null; if (ngDevMode && !(value.hasOwnProperty('tView') || value.hasOwnProperty('currentCaseLViewIndex'))) { throwError('We expect to get \'null\'|\'TIcu\'|\'TIcuContainer\', but got: ' + value); } // Here the `value.hasOwnProperty('currentCaseLViewIndex')` is a polymorphic read as it can be // either TIcu or TIcuContainerNode. This is not ideal, but we still think it is OK because it // will be just two cases which fits into the browser inline cache (inline cache can take up to // 4) const tIcu = value.hasOwnProperty('currentCaseLViewIndex') ? value : value.value; ngDevMode && assertTIcu(tIcu); return tIcu; } /** * Store `TIcu` at a give `index`. * * The `TIcu` can be stored either directly (if it is nested ICU) OR * it is stored inside tho `TIcuContainer` if it is top level ICU. * * The reason for this is that the top level ICU need a `TNode` so that they are part of the render * tree, but nested ICU's have no TNode, because we don't know ahead of time if the nested ICU is * expressed (parent ICU may have selected a case which does not contain it.) * * @param tView Current `TView`. * @param index Index where the value should be stored at in `Tview.data` * @param tIcu The TIcu to store. */ function setTIcu(tView, index, tIcu) { const tNode = tView.data[index]; ngDevMode && assertEqual(tNode === null || tNode.hasOwnProperty('tView'), true, 'We expect to get \'null\'|\'TIcuContainer\''); if (tNode === null) { tView.data[index] = tIcu; } else { ngDevMode && assertTNodeType(tNode, 32 /* TNodeType.Icu */); tNode.value = tIcu; } } /** * Set `TNode.insertBeforeIndex` taking the `Array` into account. * * See `TNode.insertBeforeIndex` */ function setTNodeInsertBeforeIndex(tNode, index) { ngDevMode && assertTNode(tNode); let insertBeforeIndex = tNode.insertBeforeIndex; if (insertBeforeIndex === null) { setI18nHandling(getInsertInFrontOfRNodeWithI18n, processI18nInsertBefore); insertBeforeIndex = tNode.insertBeforeIndex = [null /* may be updated to number later */, index]; } else { assertEqual(Array.isArray(insertBeforeIndex), true, 'Expecting array here'); insertBeforeIndex.push(index); } } /** * Create `TNode.type=TNodeType.Placeholder` node. * * See `TNodeType.Placeholder` for more information. */ function createTNodePlaceholder(tView, previousTNodes, index) { const tNode = createTNodeAtIndex(tView, index, 64 /* TNodeType.Placeholder */, null, null); addTNodeAndUpdateInsertBeforeIndex(previousTNodes, tNode); return tNode; } /** * Returns current ICU case. * * ICU cases are stored as index into the `TIcu.cases`. * At times it is necessary to communicate that the ICU case just switched and that next ICU update * should update all bindings regardless of the mask. In such a case the we store negative numbers * for cases which have just been switched. This function removes the negative flag. */ function getCurrentICUCaseIndex(tIcu, lView) { const currentCase = lView[tIcu.currentCaseLViewIndex]; return currentCase === null ? currentCase : (currentCase < 0 ? ~currentCase : currentCase); } function getParentFromIcuCreateOpCode(mergedCode) { return mergedCode >>> 17 /* IcuCreateOpCode.SHIFT_PARENT */; } function getRefFromIcuCreateOpCode(mergedCode) { return (mergedCode & 131070 /* IcuCreateOpCode.MASK_REF */) >>> 1 /* IcuCreateOpCode.SHIFT_REF */; } function getInstructionFromIcuCreateOpCode(mergedCode) { return mergedCode & 1 /* IcuCreateOpCode.MASK_INSTRUCTION */; } function icuCreateOpCode(opCode, parentIdx, refIdx) { ngDevMode && assertGreaterThanOrEqual(parentIdx, 0, 'Missing parent index'); ngDevMode && assertGreaterThan(refIdx, 0, 'Missing ref index'); return opCode | parentIdx << 17 /* IcuCreateOpCode.SHIFT_PARENT */ | refIdx << 1 /* IcuCreateOpCode.SHIFT_REF */; } /** * Keep track of which input bindings in `ÉµÉµi18nExp` have changed. * * This is used to efficiently update expressions in i18n only when the corresponding input has * changed. * * 1) Each bit represents which of the `ÉµÉµi18nExp` has changed. * 2) There are 32 bits allowed in JS. * 3) Bit 32 is special as it is shared for all changes past 32. (In other words if you have more * than 32 `ÉµÉµi18nExp` then all changes past 32nd `ÉµÉµi18nExp` will be mapped to same bit. This means * that we may end up changing more than we need to. But i18n expressions with 32 bindings is rare * so in practice it should not be an issue.) */ let changeMask = 0b0; /** * Keeps track of which bit needs to be updated in `changeMask` * * This value gets incremented on every call to `ÉµÉµi18nExp` */ let changeMaskCounter = 0; /** * Keep track of which input bindings in `ÉµÉµi18nExp` have changed. * * `setMaskBit` gets invoked by each call to `ÉµÉµi18nExp`. * * @param hasChange did `ÉµÉµi18nExp` detect a change. */ function setMaskBit(hasChange) { if (hasChange) { changeMask = changeMask | (1 << Math.min(changeMaskCounter, 31)); } changeMaskCounter++; } function applyI18n(tView, lView, index) { if (changeMaskCounter > 0) { ngDevMode && assertDefined(tView, `tView should be defined`); const tI18n = tView.data[index]; // When `index` points to an `ÉµÉµi18nAttributes` then we have an array otherwise `TI18n` const updateOpCodes = Array.isArray(tI18n) ? tI18n : tI18n.update; const bindingsStartIndex = getBindingIndex() - changeMaskCounter - 1; applyUpdateOpCodes(tView, lView, updateOpCodes, bindingsStartIndex, changeMask); } // Reset changeMask & maskBit to default for the next update cycle changeMask = 0b0; changeMaskCounter = 0; } /** * Apply `I18nCreateOpCodes` op-codes as stored in `TI18n.create`. * * Creates text (and comment) nodes which are internationalized. * * @param lView Current lView * @param createOpCodes Set of op-codes to apply * @param parentRNode Parent node (so that direct children can be added eagerly) or `null` if it is * a root node. * @param insertInFrontOf DOM node that should be used as an anchor. */ function applyCreateOpCodes(lView, createOpCodes, parentRNode, insertInFrontOf) { const renderer = lView[RENDERER]; for (let i = 0; i < createOpCodes.length; i++) { const opCode = createOpCodes[i++]; const text = createOpCodes[i]; const isComment = (opCode & I18nCreateOpCode.COMMENT) === I18nCreateOpCode.COMMENT; const appendNow = (opCode & I18nCreateOpCode.APPEND_EAGERLY) === I18nCreateOpCode.APPEND_EAGERLY; const index = opCode >>> I18nCreateOpCode.SHIFT; let rNode = lView[index]; if (rNode === null) { // We only create new DOM nodes if they don't already exist: If ICU switches case back to a // case which was already instantiated, no need to create new DOM nodes. rNode = lView[index] = isComment ? renderer.createComment(text) : createTextNode(renderer, text); } if (appendNow && parentRNode !== null) { nativeInsertBefore(renderer, parentRNode, rNode, insertInFrontOf, false); } } } /** * Apply `I18nMutateOpCodes` OpCodes. * * @param tView Current `TView` * @param mutableOpCodes Mutable OpCodes to process * @param lView Current `LView` * @param anchorRNode place where the i18n node should be inserted. */ function applyMutableOpCodes(tView, mutableOpCodes, lView, anchorRNode) { ngDevMode && assertDomNode(anchorRNode); const renderer = lView[RENDERER]; // `rootIdx` represents the node into which all inserts happen. let rootIdx = null; // `rootRNode` represents the real node into which we insert. This can be different from // `lView[rootIdx]` if we have projection. // - null we don't have a parent (as can be the case in when we are inserting into a root of // LView which has no parent.) // - `RElement` The element representing the root after taking projection into account. let rootRNode; for (let i = 0; i < mutableOpCodes.length; i++) { const opCode = mutableOpCodes[i]; if (typeof opCode == 'string') { const textNodeIndex = mutableOpCodes[++i]; if (lView[textNodeIndex] === null) { ngDevMode && ngDevMode.rendererCreateTextNode++; ngDevMode && assertIndexInRange(lView, textNodeIndex); lView[textNodeIndex] = createTextNode(renderer, opCode); } } else if (typeof opCode == 'number') { switch (opCode & 1 /* IcuCreateOpCode.MASK_INSTRUCTION */) { case 0 /* IcuCreateOpCode.AppendChild */: const parentIdx = getParentFromIcuCreateOpCode(opCode); if (rootIdx === null) { // The first operation should save the `rootIdx` because the first operation // must insert into the root. (Only subsequent operations can insert into a dynamic // parent) rootIdx = parentIdx; rootRNode = nativeParentNode(renderer, anchorRNode); } let insertInFrontOf; let parentRNode; if (parentIdx === rootIdx) { insertInFrontOf = anchorRNode; parentRNode = rootRNode; } else { insertInFrontOf = null; parentRNode = unwrapRNode(lView[parentIdx]); } // FIXME(misko): Refactor with `processI18nText` if (parentRNode !== null) { // This can happen if the `LView` we are adding to is not attached to a parent `LView`. // In such a case there is no "root" we can attach to. This is fine, as we still need to // create the elements. When the `LView` gets later added to a parent these "root" nodes // get picked up and added. ngDevMode && assertDomNode(parentRNode); const refIdx = getRefFromIcuCreateOpCode(opCode); ngDevMode && assertGreaterThan(refIdx, HEADER_OFFSET, 'Missing ref'); // `unwrapRNode` is not needed here as all of these point to RNodes as part of the i18n // which can't have components. const child = lView[refIdx]; ngDevMode && assertDomNode(child); nativeInsertBefore(renderer, parentRNode, child, insertInFrontOf, false); const tIcu = getTIcu(tView, refIdx); if (tIcu !== null && typeof tIcu === 'object') { // If we just added a comment node which has ICU then that ICU may have already been // rendered and therefore we need to re-add it here. ngDevMode && assertTIcu(tIcu); const caseIndex = getCurrentICUCaseIndex(tIcu, lView); if (caseIndex !== null) { applyMutableOpCodes(tView, tIcu.create[caseIndex], lView, lView[tIcu.anchorIdx]); } } } break; case 1 /* IcuCreateOpCode.Attr */: const elementNodeIndex = opCode >>> 1 /* IcuCreateOpCode.SHIFT_REF */; const attrName = mutableOpCodes[++i]; const attrValue = mutableOpCodes[++i]; // This code is used for ICU expressions only, since we don't support // directives/components in ICUs, we don't need to worry about inputs here setElementAttribute(renderer, getNativeByIndex(elementNodeIndex, lView), null, null, attrName, attrValue, null); break; default: if (ngDevMode) { throw new RuntimeError(700 /* RuntimeErrorCode.INVALID_I18N_STRUCTURE */, `Unable to determine the type of mutate operation for "${opCode}"`); } } } else { switch (opCode) { case ICU_MARKER: const commentValue = mutableOpCodes[++i]; const commentNodeIndex = mutableOpCodes[++i]; if (lView[commentNodeIndex] === null) { ngDevMode && assertEqual(typeof commentValue, 'string', `Expected "${commentValue}" to be a comment node value`); ngDevMode && ngDevMode.rendererCreateComment++; ngDevMode && assertIndexInExpandoRange(lView, commentNodeIndex); const commentRNode = lView[commentNodeIndex] = createCommentNode(renderer, commentValue); // FIXME(misko): Attaching patch data is only needed for the root (Also add tests) attachPatchData(commentRNode, lView); } break; case ELEMENT_MARKER: const tagName = mutableOpCodes[++i]; const elementNodeIndex = mutableOpCodes[++i]; if (lView[elementNodeIndex] === null) { ngDevMode && assertEqual(typeof tagName, 'string', `Expected "${tagName}" to be an element node tag name`); ngDevMode && ngDevMode.rendererCreateElement++; ngDevMode && assertIndexInExpandoRange(lView, elementNodeIndex); const elementRNode = lView[elementNodeIndex] = createElementNode(renderer, tagName, null); // FIXME(misko): Attaching patch data is only needed for the root (Also add tests) attachPatchData(elementRNode, lView); } break; default: ngDevMode && throwError(`Unable to determine the type of mutate operation for "${opCode}"`); } } } } /** * Apply `I18nUpdateOpCodes` OpCodes * * @param tView Current `TView` * @param lView Current `LView` * @param updateOpCodes OpCodes to process * @param bindingsStartIndex Location of the first `ÉµÉµi18nApply` * @param changeMask Each bit corresponds to a `ÉµÉµi18nExp` (Counting backwards from * `bindingsStartIndex`) */ function applyUpdateOpCodes(tView, lView, updateOpCodes, bindingsStartIndex, changeMask) { for (let i = 0; i < updateOpCodes.length; i++) { // bit code to check if we should apply the next update const checkBit = updateOpCodes[i]; // Number of opCodes to skip until next set of update codes const skipCodes = updateOpCodes[++i]; if (checkBit & changeMask) { // The value has been updated since last checked let value = ''; for (let j = i + 1; j <= (i + skipCodes); j++) { const opCode = updateOpCodes[j]; if (typeof opCode == 'string') { value += opCode; } else if (typeof opCode == 'number') { if (opCode < 0) { // Negative opCode represent `i18nExp` values offset. value += renderStringify(lView[bindingsStartIndex - opCode]); } else { const nodeIndex = (opCode >>> 2 /* I18nUpdateOpCode.SHIFT_REF */); switch (opCode & 3 /* I18nUpdateOpCode.MASK_OPCODE */) { case 1 /* I18nUpdateOpCode.Attr */: const propName = updateOpCodes[++j]; const sanitizeFn = updateOpCodes[++j]; const tNodeOrTagName = tView.data[nodeIndex]; ngDevMode && assertDefined(tNodeOrTagName, 'Experting TNode or string'); if (typeof tNodeOrTagName === 'string') { // IF we don't have a `TNode`, then we are an element in ICU (as ICU content does // not have TNode), in which case we know that there are no directives, and hence // we use attribute setting. setElementAttribute(lView[RENDERER], lView[nodeIndex], null, tNodeOrTagName, propName, value, sanitizeFn); } else { elementPropertyInternal(tView, tNodeOrTagName, lView, propName, value, lView[RENDERER], sanitizeFn, false); } break; case 0 /* I18nUpdateOpCode.Text */: const rText = lView[nodeIndex]; rText !== null && updateTextNode(lView[RENDERER], rText, value); break; case 2 /* I18nUpdateOpCode.IcuSwitch */: applyIcuSwitchCase(tView, getTIcu(tView, nodeIndex), lView, value); break; case 3 /* I18nUpdateOpCode.IcuUpdate */: applyIcuUpdateCase(tView, getTIcu(tView, nodeIndex), bindingsStartIndex, lView); break; } } } } } else { const opCode = updateOpCodes[i + 1]; if (opCode > 0 && (opCode & 3 /* I18nUpdateOpCode.MASK_OPCODE */) === 3 /* I18nUpdateOpCode.IcuUpdate */) { // Special case for the `icuUpdateCase`. It could be that the mask did not match, but // we still need to execute `icuUpdateCase` because the case has changed recently due to // previous `icuSwitchCase` instruction. (`icuSwitchCase` and `icuUpdateCase` always come in // pairs.) const nodeIndex = (opCode >>> 2 /* I18nUpdateOpCode.SHIFT_REF */); const tIcu = getTIcu(tView, nodeIndex); const currentIndex = lView[tIcu.currentCaseLViewIndex]; if (currentIndex < 0) { applyIcuUpdateCase(tView, tIcu, bindingsStartIndex, lView); } } } i += skipCodes; } } /** * Apply OpCodes associated with updating an existing ICU. * * @param tView Current `TView` * @param tIcu Current `TIcu` * @param bindingsStartIndex Location of the first `ÉµÉµi18nApply` * @param lView Current `LView` */ function applyIcuUpdateCase(tView, tIcu, bindingsStartIndex, lView) { ngDevMode && assertIndexInRange(lView, tIcu.currentCaseLViewIndex); let activeCaseIndex = lView[tIcu.currentCaseLViewIndex]; if (activeCaseIndex !== null) { let mask = changeMask; if (activeCaseIndex < 0) { // Clear the flag. // Negative number means that the ICU was freshly created and we need to force the update. activeCaseIndex = lView[tIcu.currentCaseLViewIndex] = ~activeCaseIndex; // -1 is same as all bits on, which simulates creation since it marks all bits dirty mask = -1; } applyUpdateOpCodes(tView, lView, tIcu.update[activeCaseIndex], bindingsStartIndex, mask); } } /** * Apply OpCodes associated with switching a case on ICU. * * This involves tearing down existing case and than building up a new case. * * @param tView Current `TView` * @param tIcu Current `TIcu` * @param lView Current `LView` * @param value Value of the case to update to. */ function applyIcuSwitchCase(tView, tIcu, lView, value) { // Rebuild a new case for this ICU const caseIndex = getCaseIndex(tIcu, value); let activeCaseIndex = getCurrentICUCaseIndex(tIcu, lView); if (activeCaseIndex !== caseIndex) { applyIcuSwitchCaseRemove(tView, tIcu, lView); lView[tIcu.currentCaseLViewIndex] = caseIndex === null ? null : ~caseIndex; if (caseIndex !== null) { // Add the nodes for the new case const anchorRNode = lView[tIcu.anchorIdx]; if (anchorRNode) { ngDevMode && assertDomNode(anchorRNode); applyMutableOpCodes(tView, tIcu.create[caseIndex], lView, anchorRNode); } } } } /** * Apply OpCodes associated with tearing ICU case. * * This involves tearing down existing case and than building up a new case. * * @param tView Current `TView` * @param tIcu Current `TIcu` * @param lView Current `LView` */ function applyIcuSwitchCaseRemove(tView, tIcu, lView) { let activeCaseIndex = getCurrentICUCaseIndex(tIcu, lView); if (activeCaseIndex !== null) { const removeCodes = tIcu.remove[activeCaseIndex]; for (let i = 0; i < removeCodes.length; i++) { const nodeOrIcuIndex = removeCodes[i]; if (nodeOrIcuIndex > 0) { // Positive numbers are `RNode`s. const rNode = getNativeByIndex(nodeOrIcuIndex, lView); rNode !== null && nativeRemoveNode(lView[RENDERER], rNode); } else { // Negative numbers are ICUs applyIcuSwitchCaseRemove(tView, getTIcu(tView, ~nodeOrIcuIndex), lView); } } } } /** * Returns the index of the current case of an ICU expression depending on the main binding value * * @param icuExpression * @param bindingValue The value of the main binding used by this ICU expression */ function getCaseIndex(icuExpression, bindingValue) { let index = icuExpression.cases.indexOf(bindingValue); if (index === -1) { switch (icuExpression.type) { case 1 /* IcuType.plural */: { const resolvedCase = getPluralCase(bindingValue, getLocaleId()); index = icuExpression.cases.indexOf(resolvedCase); if (index === -1 && resolvedCase !== 'other') { index = icuExpression.cases.indexOf('other'); } break; } case 0 /* IcuType.select */: { index = icuExpression.cases.indexOf('other'); break; } } } return index === -1 ? null : index; } function loadIcuContainerVisitor() { const _stack = []; let _index = -1; let _lView; let _removes; /** * Retrieves a set of root nodes from `TIcu.remove`. Used by `TNodeType.ICUContainer` * to determine which root belong to the ICU. * * Example of usage. * ``` * const nextRNode = icuContainerIteratorStart(tIcuContainerNode, lView); * let rNode: RNode|null; * while(rNode = nextRNode()) { * console.log(rNode); * } * ``` * * @param tIcuContainerNode Current `TIcuContainerNode` * @param lView `LView` where the `RNode`s should be looked up. */ function icuContainerIteratorStart(tIcuContainerNode, lView) { _lView = lView; while (_stack.length) _stack.pop(); ngDevMode && assertTNodeForLView(tIcuContainerNode, lView); enterIcu(tIcuContainerNode.value, lView); return icuContainerIteratorNext; } function enterIcu(tIcu, lView) { _index = 0; const currentCase = getCurrentICUCaseIndex(tIcu, lView); if (currentCase !== null) { ngDevMode && assertNumberInRange(currentCase, 0, tIcu.cases.length - 1); _removes = tIcu.remove[currentCase]; } else { _removes = EMPTY_ARRAY; } } function icuContainerIteratorNext() { if (_index < _removes.length) { const removeOpCode = _removes[_index++]; ngDevMode && assertNumber(removeOpCode, 'Expecting OpCode number'); if (removeOpCode > 0) { const rNode = _lView[removeOpCode]; ngDevMode && assertDomNode(rNode); return rNode; } else { _stack.push(_index, _removes); // ICUs are represented by negative indices const tIcuIndex = ~removeOpCode; const tIcu = _lView[TVIEW].data[tIcuIndex]; ngDevMode && assertTIcu(tIcu); enterIcu(tIcu, _lView); return icuContainerIteratorNext(); } } else { if (_stack.length === 0) { return null; } else { _removes = _stack.pop(); _index = _stack.pop(); return icuContainerIteratorNext(); } } } return icuContainerIteratorStart; } /** * Converts `I18nCreateOpCodes` array into a human readable format. * * This function is attached to the `I18nCreateOpCodes.debug` property if `ngDevMode` is enabled. * This function provides a human readable view of the opcodes. This is useful when debugging the * application as well as writing more readable tests. * * @param this `I18nCreateOpCodes` if attached as a method. * @param opcodes `I18nCreateOpCodes` if invoked as a function. */ function i18nCreateOpCodesToString(opcodes) { const createOpCodes = opcodes || (Array.isArray(this) ? this : []); let lines = []; for (let i = 0; i < createOpCodes.length; i++) { const opCode = createOpCodes[i++]; const text = createOpCodes[i]; const isComment = (opCode & I18nCreateOpCode.COMMENT) === I18nCreateOpCode.COMMENT; const appendNow = (opCode & I18nCreateOpCode.APPEND_EAGERLY) === I18nCreateOpCode.APPEND_EAGERLY; const index = opCode >>> I18nCreateOpCode.SHIFT; lines.push(`lView[${index}] = document.${isComment ? 'createComment' : 'createText'}(${JSON.stringify(text)});`); if (appendNow) { lines.push(`parent.appendChild(lView[${index}]);`); } } return lines; } /** * Converts `I18nUpdateOpCodes` array into a human readable format. * * This function is attached to the `I18nUpdateOpCodes.debug` property if `ngDevMode` is enabled. * This function provides a human readable view of the opcodes. This is useful when debugging the * application as well as writing more readable tests. * * @param this `I18nUpdateOpCodes` if attached as a method. * @param opcodes `I18nUpdateOpCodes` if invoked as a function. */ function i18nUpdateOpCodesToString(opcodes) { const parser = new OpCodeParser(opcodes || (Array.isArray(this) ? this : [])); let lines = []; function consumeOpCode(value) { const ref = value >>> 2 /* I18nUpdateOpCode.SHIFT_REF */; const opCode = value & 3 /* I18nUpdateOpCode.MASK_OPCODE */; switch (opCode) { case 0 /* I18nUpdateOpCode.Text */: return `(lView[${ref}] as Text).textContent = $$$`; case 1 /* I18nUpdateOpCode.Attr */: const attrName = parser.consumeString(); const sanitizationFn = parser.consumeFunction(); const value = sanitizationFn ? `(${sanitizationFn})($$$)` : '$$$'; return `(lView[${ref}] as Element).setAttribute('${attrName}', ${value})`; case 2 /* I18nUpdateOpCode.IcuSwitch */: return `icuSwitchCase(${ref}, $$$)`; case 3 /* I18nUpdateOpCode.IcuUpdate */: return `icuUpdateCase(${ref})`; } throw new Error('unexpected OpCode'); } while (parser.hasMore()) { let mask = parser.consumeNumber(); let size = parser.consumeNumber(); const end = parser.i + size; const statements = []; let statement = ''; while (parser.i < end) { let value = parser.consumeNumberOrString(); if (typeof value === 'string') { statement += value; } else if (value < 0) { // Negative numbers are ref indexes // Here `i` refers to current binding index. It is to signify that the value is relative, // rather than absolute. statement += '${lView[i' + value + ']}'; } else { // Positive numbers are operations. const opCodeText = consumeOpCode(value); statements.push(opCodeText.replace('$$$', '`' + statement + '`') + ';'); statement = ''; } } lines.push(`if (mask & 0b${mask.toString(2)}) { ${statements.join(' ')} }`); } return lines; } /** * Converts `I18nCreateOpCodes` array into a human readable format. * * This function is attached to the `I18nCreateOpCodes.debug` if `ngDevMode` is enabled. This * function provides a human readable view of the opcodes. This is useful when debugging the * application as well as writing more readable tests. * * @param this `I18nCreateOpCodes` if attached as a method. * @param opcodes `I18nCreateOpCodes` if invoked as a function. */ function icuCreateOpCodesToString(opcodes) { const parser = new OpCodeParser(opcodes || (Array.isArray(this) ? this : [])); let lines = []; function consumeOpCode(opCode) { const parent = getParentFromIcuCreateOpCode(opCode); const ref = getRefFromIcuCreateOpCode(opCode); switch (getInstructionFromIcuCreateOpCode(opCode)) { case 0 /* IcuCreateOpCode.AppendChild */: return `(lView[${parent}] as Element).appendChild(lView[${lastRef}])`; case 1 /* IcuCreateOpCode.Attr */: return `(lView[${ref}] as Element).setAttribute("${parser.consumeString()}", "${parser.consumeString()}")`; } throw new Error('Unexpected OpCode: ' + getInstructionFromIcuCreateOpCode(opCode)); } let lastRef = -1; while (parser.hasMore()) { let value = parser.consumeNumberStringOrMarker(); if (value === ICU_MARKER) { const text = parser.consumeString(); lastRef = parser.consumeNumber(); lines.push(`lView[${lastRef}] = document.createComment("${text}")`); } else if (value === ELEMENT_MARKER) { const text = parser.consumeString(); lastRef = parser.consumeNumber(); lines.push(`lView[${lastRef}] = document.createElement("${text}")`); } else if (typeof value === 'string') { lastRef = parser.consumeNumber(); lines.push(`lView[${lastRef}] = document.createTextNode("${value}")`); } else if (typeof value === 'number') { const line = consumeOpCode(value); line && lines.push(line); } else { throw new Error('Unexpected value'); } } return lines; } /** * Converts `I18nRemoveOpCodes` array into a human readable format. * * This function is attached to the `I18nRemoveOpCodes.debug` if `ngDevMode` is enabled. This * function provides a human readable view of the opcodes. This is useful when debugging the * application as well as writing more readable tests. * * @param this `I18nRemoveOpCodes` if attached as a method. * @param opcodes `I18nRemoveOpCodes` if invoked as a function. */ function i18nRemoveOpCodesToString(opcodes) { const removeCodes = opcodes || (Array.isArray(this) ? this : []); let lines = []; for (let i = 0; i < removeCodes.length; i++) { const nodeOrIcuIndex = removeCodes[i]; if (nodeOrIcuIndex > 0) { // Positive numbers are `RNode`s. lines.push(`remove(lView[${nodeOrIcuIndex}])`); } else { // Negative numbers are ICUs lines.push(`removeNestedICU(${~nodeOrIcuIndex})`); } } return lines; } class OpCodeParser { constructor(codes) { this.i = 0; this.codes = codes; } hasMore() { return this.i < this.codes.length; } consumeNumber() { let value = this.codes[this.i++]; assertNumber(value, 'expecting number in OpCode'); return value; } consumeString() { let value = this.codes[this.i++]; assertString(value, 'expecting string in OpCode'); return value; } consumeFunction() { let value = this.codes[this.i++]; if (value === null || typeof value === 'function') { return value; } throw new Error('expecting function in OpCode'); } consumeNumberOrString() { let value = this.codes[this.i++]; if (typeof value === 'string') { return value; } assertNumber(value, 'expecting number or string in OpCode'); return value; } consumeNumberStringOrMarker() { let value = this.codes[this.i++]; if (typeof value === 'string' || typeof value === 'number' || value == ICU_MARKER || value == ELEMENT_MARKER) { return value; } assertNumber(value, 'expecting number, string, ICU_MARKER or ELEMENT_MARKER in OpCode'); return value; } } const BINDING_REGEXP = /ï¿½(\d+):?\d*ï¿½/gi; const ICU_REGEXP = /({\s*ï¿½\d+:?\d*ï¿½\s*,\s*\S{6}\s*,[\s\S]*})/gi; const NESTED_ICU = /ï¿½(\d+)ï¿½/; const ICU_BLOCK_REGEXP = /^\s*(ï¿½\d+:?\d*ï¿½)\s*,\s*(select|plural)\s*,/; const MARKER = `ï¿½`; const SUBTEMPLATE_REGEXP = /ï¿½\/?\*(\d+:\d+)ï¿½/gi; const PH_REGEXP = /ï¿½(\/?[#*]\d+):?\d*ï¿½/gi; /** * Angular uses the special entity &ngsp; as a placeholder for non-removable space. * It's replaced by the 0xE500 PUA (Private Use Areas) unicode character and later on replaced by a * space. * We are re-implementing the same idea since translations might contain this special character. */ const NGSP_UNICODE_REGEXP = /\uE500/g; function replaceNgsp(value) { return value.replace(NGSP_UNICODE_REGEXP, ' '); } /** * Patch a `debug` property getter on top of the existing object. * * NOTE: always call this method with `ngDevMode && attachDebugObject(...)` * * @param obj Object to patch * @param debugGetter Getter returning a value to patch */ function attachDebugGetter(obj, debugGetter) { if (ngDevMode) { Object.defineProperty(obj, 'debug', { get: debugGetter, enumerable: false }); } else { throw new Error('This method should be guarded with `ngDevMode` so that it can be tree shaken in production!'); } } /** * Create dynamic nodes from i18n translation block. * * - Text nodes are created synchronously * - TNodes are linked into tree lazily * * @param tView Current `TView` * @parentTNodeIndex index to the parent TNode of this i18n block * @param lView Current `LView` * @param index Index of `ÉµÉµi18nStart` instruction. * @param message Message to translate. * @param subTemplateIndex Index into the sub template of message translation. (ie in case of * `ngIf`) (-1 otherwise) */ function i18nStartFirstCreatePass(tView, parentTNodeIndex, lView, index, message, subTemplateIndex) { const rootTNode = getCurrentParentTNode(); const createOpCodes = []; const updateOpCodes = []; const existingTNodeStack = [[]]; if (ngDevMode) { attachDebugGetter(createOpCodes, i18nCreateOpCodesToString); attachDebugGetter(updateOpCodes, i18nUpdateOpCodesToString); } message = getTranslationForTemplate(message, subTemplateIndex); const msgParts = replaceNgsp(message).split(PH_REGEXP); for (let i = 0; i < msgParts.length; i++) { let value = msgParts[i]; if ((i & 1) === 0) { // Even indexes are text (including bindings & ICU expressions) const parts = i18nParseTextIntoPartsAndICU(value); for (let j = 0; j < parts.length; j++) { let part = parts[j]; if ((j & 1) === 0) { // `j` is odd therefore `part` is string const text = part; ngDevMode && assertString(text, 'Parsed ICU part should be string'); if (text !== '') { i18nStartFirstCreatePassProcessTextNode(tView, rootTNode, existingTNodeStack[0], createOpCodes, updateOpCodes, lView, text); } } else { // `j` is Even therefor `part` is an `ICUExpression` const icuExpression = part; // Verify that ICU expression has the right shape. Translations might contain invalid // constructions (while original messages were correct), so ICU parsing at runtime may // not succeed (thus `icuExpression` remains a string). // Note: we intentionally retain the error here by not using `ngDevMode`, because // the value can change based on the locale and users aren't guaranteed to hit // an invalid string while they're developing. if (typeof icuExpression !== 'object') { throw new Error(`Unable to parse ICU expression in "${message}" message.`); } const icuContainerTNode = createTNodeAndAddOpCode(tView, rootTNode, existingTNodeStack[0], lView, createOpCodes, ngDevMode ? `ICU ${index}:${icuExpression.mainBinding}` : '', true); const icuNodeIndex = icuContainerTNode.index; ngDevMode && assertGreaterThanOrEqual(icuNodeIndex, HEADER_OFFSET, 'Index must be in absolute LView offset'); icuStart(tView, lView, updateOpCodes, parentTNodeIndex, icuExpression, icuNodeIndex); } } } else { // Odd indexes are placeholders (elements and sub-templates) // At this point value is something like: '/#1:2' (originally coming from 'ï¿½/#1:2ï¿½') const isClosing = value.charCodeAt(0) === 47 /* CharCode.SLASH */; const type = value.charCodeAt(isClosing ? 1 : 0); ngDevMode && assertOneOf(type, 42 /* CharCode.STAR */, 35 /* CharCode.HASH */); const index = HEADER_OFFSET + Number.parseInt(value.substring((isClosing ? 2 : 1))); if (isClosing) { existingTNodeStack.shift(); setCurrentTNode(getCurrentParentTNode(), false); } else { const tNode = createTNodePlaceholder(tView, existingTNodeStack[0], index); existingTNodeStack.unshift([]); setCurrentTNode(tNode, true); } } } tView.data[index] = { create: createOpCodes, update: updateOpCodes, }; } /** * Allocate space in i18n Range add create OpCode instruction to create a text or comment node. * * @param tView Current `TView` needed to allocate space in i18n range. * @param rootTNode Root `TNode` of the i18n block. This node determines if the new TNode will be * added as part of the `i18nStart` instruction or as part of the `TNode.insertBeforeIndex`. * @param existingTNodes internal state for `addTNodeAndUpdateInsertBeforeIndex`. * @param lView Current `LView` needed to allocate space in i18n range. * @param createOpCodes Array storing `I18nCreateOpCodes` where new opCodes will be added. * @param text Text to be added when the `Text` or `Comment` node will be created. * @param isICU true if a `Comment` node for ICU (instead of `Text`) node should be created. */ function createTNodeAndAddOpCode(tView, rootTNode, existingTNodes, lView, createOpCodes, text, isICU) { const i18nNodeIdx = allocExpando(tView, lView, 1, null); let opCode = i18nNodeIdx << I18nCreateOpCode.SHIFT; let parentTNode = getCurrentParentTNode(); if (rootTNode === parentTNode) { // FIXME(misko): A null `parentTNode` should represent when we fall of the `LView` boundary. // (there is no parent), but in some circumstances (because we are inconsistent about how we set // `previousOrParentTNode`) it could point to `rootTNode` So this is a work around. parentTNode = null; } if (parentTNode === null) { // If we don't have a parent that means that we can eagerly add nodes. // If we have a parent than these nodes can't be added now (as the parent has not been created // yet) and instead the `parentTNode` is responsible for adding it. See // `TNode.insertBeforeIndex` opCode |= I18nCreateOpCode.APPEND_EAGERLY; } if (isICU) { opCode |= I18nCreateOpCode.COMMENT; ensureIcuContainerVisitorLoaded(loadIcuContainerVisitor); } createOpCodes.push(opCode, text === null ? '' : text); // We store `{{?}}` so that when looking at debug `TNodeType.template` we can see where the // bindings are. const tNode = createTNodeAtIndex(tView, i18nNodeIdx, isICU ? 32 /* TNodeType.Icu */ : 1 /* TNodeType.Text */, text === null ? (ngDevMode ? '{{?}}' : '') : text, null); addTNodeAndUpdateInsertBeforeIndex(existingTNodes, tNode); const tNodeIdx = tNode.index; setCurrentTNode(tNode, false /* Text nodes are self closing */); if (parentTNode !== null && rootTNode !== parentTNode) { // We are a child of deeper node (rather than a direct child of `i18nStart` instruction.) // We have to make sure to add ourselves to the parent. setTNodeInsertBeforeIndex(parentTNode, tNodeIdx); } return tNode; } /** * Processes text node in i18n block. * * Text nodes can have: * - Create instruction in `createOpCodes` for creating the text node. * - Allocate spec for text node in i18n range of `LView` * - If contains binding: * - bindings => allocate space in i18n range of `LView` to store the binding value. * - populate `updateOpCodes` with update instructions. * * @param tView Current `TView` * @param rootTNode Root `TNode` of the i18n block. This node determines if the new TNode will * be added as part of the `i18nStart` instruction or as part of the * `TNode.insertBeforeIndex`. * @param existingTNodes internal state for `addTNodeAndUpdateInsertBeforeIndex`. * @param createOpCodes Location where the creation OpCodes will be stored. * @param lView Current `LView` * @param text The translated text (which may contain binding) */ function i18nStartFirstCreatePassProcessTextNode(tView, rootTNode, existingTNodes, createOpCodes, updateOpCodes, lView, text) { const hasBinding = text.match(BINDING_REGEXP); const tNode = createTNodeAndAddOpCode(tView, rootTNode, existingTNodes, lView, createOpCodes, hasBinding ? null : text, false); if (hasBinding) { generateBindingUpdateOpCodes(updateOpCodes, text, tNode.index, null, 0, null); } } /** * See `i18nAttributes` above. */ function i18nAttributesFirstPass(tView, index, values) { const previousElement = getCurrentTNode(); const previousElementIndex = previousElement.index; const updateOpCodes = []; if (ngDevMode) { attachDebugGetter(updateOpCodes, i18nUpdateOpCodesToString); } if (tView.firstCreatePass && tView.data[index] === null) { for (let i = 0; i < values.length; i += 2) { const attrName = values[i]; const message = values[i + 1]; if (message !== '') { // Check if attribute value contains an ICU and throw an error if that's the case. // ICUs in element attributes are not supported. // Note: we intentionally retain the error here by not using `ngDevMode`, because // the `value` can change based on the locale and users aren't guaranteed to hit // an invalid string while they're developing. if (ICU_REGEXP.test(message)) { throw new Error(`ICU expressions are not supported in attributes. Message: "${message}".`); } // i18n attributes that hit this code path are guaranteed to have bindings, because // the compiler treats static i18n attributes as regular attribute bindings. // Since this may not be the first i18n attribute on this element we need to pass in how // many previous bindings there have already been. generateBindingUpdateOpCodes(updateOpCodes, message, previousElementIndex, attrName, countBindings(updateOpCodes), null); } } tView.data[index] = updateOpCodes; } } /** * Generate the OpCodes to update the bindings of a string. * * @param updateOpCodes Place where the update opcodes will be stored. * @param str The string containing the bindings. * @param destinationNode Index of the destination node which will receive the binding. * @param attrName Name of the attribute, if the string belongs to an attribute. * @param sanitizeFn Sanitization function used to sanitize the string after update, if necessary. * @param bindingStart The lView index of the next expression that can be bound via an opCode. * @returns The mask value for these bindings */ function generateBindingUpdateOpCodes(updateOpCodes, str, destinationNode, attrName, bindingStart, sanitizeFn) { ngDevMode && assertGreaterThanOrEqual(destinationNode, HEADER_OFFSET, 'Index must be in absolute LView offset'); const maskIndex = updateOpCodes.length; // Location of mask const sizeIndex = maskIndex + 1; // location of size for skipping updateOpCodes.push(null, null); // Alloc space for mask and size const startIndex = maskIndex + 2; // location of first allocation. if (ngDevMode) { attachDebugGetter(updateOpCodes, i18nUpdateOpCodesToString); } const textParts = str.split(BINDING_REGEXP); let mask = 0; for (let j = 0; j < textParts.length; j++) { const textValue = textParts[j]; if (j & 1) { // Odd indexes are bindings const bindingIndex = bindingStart + parseInt(textValue, 10); updateOpCodes.push(-1 - bindingIndex); mask = mask | toMaskBit(bindingIndex); } else if (textValue !== '') { // Even indexes are text updateOpCodes.push(textValue); } } updateOpCodes.push(destinationNode << 2 /* I18nUpdateOpCode.SHIFT_REF */ | (attrName ? 1 /* I18nUpdateOpCode.Attr */ : 0 /* I18nUpdateOpCode.Text */)); if (attrName) { updateOpCodes.push(attrName, sanitizeFn); } updateOpCodes[maskIndex] = mask; updateOpCodes[sizeIndex] = updateOpCodes.length - startIndex; return mask; } /** * Count the number of bindings in the given `opCodes`. * * It could be possible to speed this up, by passing the number of bindings found back from * `generateBindingUpdateOpCodes()` to `i18nAttributesFirstPass()` but this would then require more * complexity in the code and/or transient objects to be created. * * Since this function is only called once when the template is instantiated, is trivial in the * first instance (since `opCodes` will be an empty array), and it is not common for elements to * contain multiple i18n bound attributes, it seems like this is a reasonable compromise. */ function countBindings(opCodes) { let count = 0; for (let i = 0; i < opCodes.length; i++) { const opCode = opCodes[i]; // Bindings are negative numbers. if (typeof opCode === 'number' && opCode < 0) { count++; } } return count; } /** * Convert binding index to mask bit. * * Each index represents a single bit on the bit-mask. Because bit-mask only has 32 bits, we make * the 32nd bit share all masks for all bindings higher than 32. Since it is extremely rare to * have more than 32 bindings this will be hit very rarely. The downside of hitting this corner * case is that we will execute binding code more often than necessary. (penalty of performance) */ function toMaskBit(bindingIndex) { return 1 << Math.min(bindingIndex, 31); } function isRootTemplateMessage(subTemplateIndex) { return subTemplateIndex === -1; } /** * Removes everything inside the sub-templates of a message. */ function removeInnerTemplateTranslation(message) { let match; let res = ''; let index = 0; let inTemplate = false; let tagMatched; while ((match = SUBTEMPLATE_REGEXP.exec(message)) !== null) { if (!inTemplate) { res += message.substring(index, match.index + match[0].length); tagMatched = match[1]; inTemplate = true; } else { if (match[0] === `${MARKER}/*${tagMatched}${MARKER}`) { index = match.index; inTemplate = false; } } } ngDevMode && assertEqual(inTemplate, false, `Tag mismatch: unable to find the end of the sub-template in the translation "${message}"`); res += message.slice(index); return res; } /** * Extracts a part of a message and removes the rest. * * This method is used for extracting a part of the message associated with a template. A * translated message can span multiple templates. * * Example: * ``` *

Translate me!

* ``` * * @param message The message to crop * @param subTemplateIndex Index of the sub-template to extract. If undefined it returns the * external template and removes all sub-templates. */ function getTranslationForTemplate(message, subTemplateIndex) { if (isRootTemplateMessage(subTemplateIndex)) { // We want the root template message, ignore all sub-templates return removeInnerTemplateTranslation(message); } else { // We want a specific sub-template const start = message.indexOf(`:${subTemplateIndex}${MARKER}`) + 2 + subTemplateIndex.toString().length; const end = message.search(new RegExp(`${MARKER}\\/\\*\\d+:${subTemplateIndex}${MARKER}`)); return removeInnerTemplateTranslation(message.substring(start, end)); } } /** * Generate the OpCodes for ICU expressions. * * @param icuExpression * @param index Index where the anchor is stored and an optional `TIcuContainerNode` * - `lView[anchorIdx]` points to a `Comment` node representing the anchor for the ICU. * - `tView.data[anchorIdx]` points to the `TIcuContainerNode` if ICU is root (`null` otherwise) */ function icuStart(tView, lView, updateOpCodes, parentIdx, icuExpression, anchorIdx) { ngDevMode && assertDefined(icuExpression, 'ICU expression must be defined'); let bindingMask = 0; const tIcu = { type: icuExpression.type, currentCaseLViewIndex: allocExpando(tView, lView, 1, null), anchorIdx, cases: [], create: [], remove: [], update: [] }; addUpdateIcuSwitch(updateOpCodes, icuExpression, anchorIdx); setTIcu(tView, anchorIdx, tIcu); const values = icuExpression.values; for (let i = 0; i < values.length; i++) { // Each value is an array of strings & other ICU expressions const valueArr = values[i]; const nestedIcus = []; for (let j = 0; j < valueArr.length; j++) { const value = valueArr[j]; if (typeof value !== 'string') { // It is an nested ICU expression const icuIndex = nestedIcus.push(value) - 1; // Replace nested ICU expression by a comment node valueArr[j] = ``; } } bindingMask = parseIcuCase(tView, tIcu, lView, updateOpCodes, parentIdx, icuExpression.cases[i], valueArr.join(''), nestedIcus) | bindingMask; } if (bindingMask) { addUpdateIcuUpdate(updateOpCodes, bindingMask, anchorIdx); } } /** * Parses text containing an ICU expression and produces a JSON object for it. * Original code from closure library, modified for Angular. * * @param pattern Text containing an ICU expression that needs to be parsed. * */ function parseICUBlock(pattern) { const cases = []; const values = []; let icuType = 1 /* IcuType.plural */; let mainBinding = 0; pattern = pattern.replace(ICU_BLOCK_REGEXP, function (str, binding, type) { if (type === 'select') { icuType = 0 /* IcuType.select */; } else { icuType = 1 /* IcuType.plural */; } mainBinding = parseInt(binding.slice(1), 10); return ''; }); const parts = i18nParseTextIntoPartsAndICU(pattern); // Looking for (key block)+ sequence. One of the keys has to be "other". for (let pos = 0; pos < parts.length;) { let key = parts[pos++].trim(); if (icuType === 1 /* IcuType.plural */) { // Key can be "=x", we just want "x" key = key.replace(/\s*(?:=)?(\w+)\s*/, '$1'); } if (key.length) { cases.push(key); } const blocks = i18nParseTextIntoPartsAndICU(parts[pos++]); if (cases.length > values.length) { values.push(blocks); } } // TODO(ocombe): support ICU expressions in attributes, see #21615 return { type: icuType, mainBinding: mainBinding, cases, values }; } /** * Breaks pattern into strings and top level {...} blocks. * Can be used to break a message into text and ICU expressions, or to break an ICU expression * into keys and cases. Original code from closure library, modified for Angular. * * @param pattern (sub)Pattern to be broken. * @returns An `Array` where: * - odd positions: `string` => text between ICU expressions * - even positions: `ICUExpression` => ICU expression parsed into `ICUExpression` record. */ function i18nParseTextIntoPartsAndICU(pattern) { if (!pattern) { return []; } let prevPos = 0; const braceStack = []; const results = []; const braces = /[{}]/g; // lastIndex doesn't get set to 0 so we have to. braces.lastIndex = 0; let match; while (match = braces.exec(pattern)) { const pos = match.index; if (match[0] == '}') { braceStack.pop(); if (braceStack.length == 0) { // End of the block. const block = pattern.substring(prevPos, pos); if (ICU_BLOCK_REGEXP.test(block)) { results.push(parseICUBlock(block)); } else { results.push(block); } prevPos = pos + 1; } } else { if (braceStack.length == 0) { const substring = pattern.substring(prevPos, pos); results.push(substring); prevPos = pos + 1; } braceStack.push('{'); } } const substring = pattern.substring(prevPos); results.push(substring); return results; } /** * Parses a node, its children and its siblings, and generates the mutate & update OpCodes. * */ function parseIcuCase(tView, tIcu, lView, updateOpCodes, parentIdx, caseName, unsafeCaseHtml, nestedIcus) { const create = []; const remove = []; const update = []; if (ngDevMode) { attachDebugGetter(create, icuCreateOpCodesToString); attachDebugGetter(remove, i18nRemoveOpCodesToString); attachDebugGetter(update, i18nUpdateOpCodesToString); } tIcu.cases.push(caseName); tIcu.create.push(create); tIcu.remove.push(remove); tIcu.update.push(update); const inertBodyHelper = getInertBodyHelper(getDocument()); const inertBodyElement = inertBodyHelper.getInertBodyElement(unsafeCaseHtml); ngDevMode && assertDefined(inertBodyElement, 'Unable to generate inert body element'); const inertRootNode = getTemplateContent(inertBodyElement) || inertBodyElement; if (inertRootNode) { return walkIcuTree(tView, tIcu, lView, updateOpCodes, create, remove, update, inertRootNode, parentIdx, nestedIcus, 0); } else { return 0; } } function walkIcuTree(tView, tIcu, lView, sharedUpdateOpCodes, create, remove, update, parentNode, parentIdx, nestedIcus, depth) { let bindingMask = 0; let currentNode = parentNode.firstChild; while (currentNode) { const newIndex = allocExpando(tView, lView, 1, null); switch (currentNode.nodeType) { case Node.ELEMENT_NODE: const element = currentNode; const tagName = element.tagName.toLowerCase(); if (VALID_ELEMENTS.hasOwnProperty(tagName)) { addCreateNodeAndAppend(create, ELEMENT_MARKER, tagName, parentIdx, newIndex); tView.data[newIndex] = tagName; const elAttrs = element.attributes; for (let i = 0; i < elAttrs.length; i++) { const attr = elAttrs.item(i); const lowerAttrName = attr.name.toLowerCase(); const hasBinding = !!attr.value.match(BINDING_REGEXP); // we assume the input string is safe, unless it's using a binding if (hasBinding) { if (VALID_ATTRS.hasOwnProperty(lowerAttrName)) { if (URI_ATTRS[lowerAttrName]) { generateBindingUpdateOpCodes(update, attr.value, newIndex, attr.name, 0, _sanitizeUrl); } else { generateBindingUpdateOpCodes(update, attr.value, newIndex, attr.name, 0, null); } } else { ngDevMode && console.warn(`WARNING: ignoring unsafe attribute value ` + `${lowerAttrName} on element ${tagName} ` + `(see ${XSS_SECURITY_URL})`); } } else { addCreateAttribute(create, newIndex, attr); } } // Parse the children of this node (if any) bindingMask = walkIcuTree(tView, tIcu, lView, sharedUpdateOpCodes, create, remove, update, currentNode, newIndex, nestedIcus, depth + 1) | bindingMask; addRemoveNode(remove, newIndex, depth); } break; case Node.TEXT_NODE: const value = currentNode.textContent || ''; const hasBinding = value.match(BINDING_REGEXP); addCreateNodeAndAppend(create, null, hasBinding ? '' : value, parentIdx, newIndex); addRemoveNode(remove, newIndex, depth); if (hasBinding) { bindingMask = generateBindingUpdateOpCodes(update, value, newIndex, null, 0, null) | bindingMask; } break; case Node.COMMENT_NODE: // Check if the comment node is a placeholder for a nested ICU const isNestedIcu = NESTED_ICU.exec(currentNode.textContent || ''); if (isNestedIcu) { const nestedIcuIndex = parseInt(isNestedIcu[1], 10); const icuExpression = nestedIcus[nestedIcuIndex]; // Create the comment node that will anchor the ICU expression addCreateNodeAndAppend(create, ICU_MARKER, ngDevMode ? `nested ICU ${nestedIcuIndex}` : '', parentIdx, newIndex); icuStart(tView, lView, sharedUpdateOpCodes, parentIdx, icuExpression, newIndex); addRemoveNestedIcu(remove, newIndex, depth); } break; } currentNode = currentNode.nextSibling; } return bindingMask; } function addRemoveNode(remove, index, depth) { if (depth === 0) { remove.push(index); } } function addRemoveNestedIcu(remove, index, depth) { if (depth === 0) { remove.push(~index); // remove ICU at `index` remove.push(index); // remove ICU comment at `index` } } function addUpdateIcuSwitch(update, icuExpression, index) { update.push(toMaskBit(icuExpression.mainBinding), 2, -1 - icuExpression.mainBinding, index << 2 /* I18nUpdateOpCode.SHIFT_REF */ | 2 /* I18nUpdateOpCode.IcuSwitch */); } function addUpdateIcuUpdate(update, bindingMask, index) { update.push(bindingMask, 1, index << 2 /* I18nUpdateOpCode.SHIFT_REF */ | 3 /* I18nUpdateOpCode.IcuUpdate */); } function addCreateNodeAndAppend(create, marker, text, appendToParentIdx, createAtIdx) { if (marker !== null) { create.push(marker); } create.push(text, createAtIdx, icuCreateOpCode(0 /* IcuCreateOpCode.AppendChild */, appendToParentIdx, createAtIdx)); } function addCreateAttribute(create, newIndex, attr) { create.push(newIndex << 1 /* IcuCreateOpCode.SHIFT_REF */ | 1 /* IcuCreateOpCode.Attr */, attr.name, attr.value); } // i18nPostprocess consts const ROOT_TEMPLATE_ID = 0; const PP_MULTI_VALUE_PLACEHOLDERS_REGEXP = /\[(ï¿½.+?ï¿½?)\]/; const PP_PLACEHOLDERS_REGEXP = /\[(ï¿½.+?ï¿½?)\]|(ï¿½\/?\*\d+:\d+ï¿½)/g; const PP_ICU_VARS_REGEXP = /({\s*)(VAR_(PLURAL|SELECT)(_\d+)?)(\s*,)/g; const PP_ICU_PLACEHOLDERS_REGEXP = /{([A-Z0-9_]+)}/g; const PP_ICUS_REGEXP = /ï¿½I18N_EXP_(ICU(_\d+)?)ï¿½/g; const PP_CLOSE_TEMPLATE_REGEXP = /\/\*/; const PP_TEMPLATE_ID_REGEXP = /\d+\:(\d+)/; /** * Handles message string post-processing for internationalization. * * Handles message string post-processing by transforming it from intermediate * format (that might contain some markers that we need to replace) to the final * form, consumable by i18nStart instruction. Post processing steps include: * * 1. Resolve all multi-value cases (like [ï¿½*1:1ï¿½ï¿½#2:1ï¿½|ï¿½#4:1ï¿½|ï¿½5ï¿½]) * 2. Replace all ICU vars (like "VAR_PLURAL") * 3. Replace all placeholders used inside ICUs in a form of {PLACEHOLDER} * 4. Replace all ICU references with corresponding values (like ï¿½ICU_EXP_ICU_1ï¿½) * in case multiple ICUs have the same placeholder name * * @param message Raw translation string for post processing * @param replacements Set of replacements that should be applied * * @returns Transformed string that can be consumed by i18nStart instruction * * @codeGenApi */ function i18nPostprocess(message, replacements = {}) { /** * Step 1: resolve all multi-value placeholders like [ï¿½#5ï¿½|ï¿½*1:1ï¿½ï¿½#2:1ï¿½|ï¿½#4:1ï¿½] * * Note: due to the way we process nested templates (BFS), multi-value placeholders are typically * grouped by templates, for example: [ï¿½#5ï¿½|ï¿½#6ï¿½|ï¿½#1:1ï¿½|ï¿½#3:2ï¿½] where ï¿½#5ï¿½ and ï¿½#6ï¿½ belong to root * template, ï¿½#1:1ï¿½ belong to nested template with index 1 and ï¿½#1:2ï¿½ - nested template with index * 3. However in real templates the order might be different: i.e. ï¿½#1:1ï¿½ and/or ï¿½#3:2ï¿½ may go in * front of ï¿½#6ï¿½. The post processing step restores the right order by keeping track of the * template id stack and looks for placeholders that belong to the currently active template. */ let result = message; if (PP_MULTI_VALUE_PLACEHOLDERS_REGEXP.test(message)) { const matches = {}; const templateIdsStack = [ROOT_TEMPLATE_ID]; result = result.replace(PP_PLACEHOLDERS_REGEXP, (m, phs, tmpl) => { const content = phs || tmpl; const placeholders = matches[content] || []; if (!placeholders.length) { content.split('|').forEach((placeholder) => { const match = placeholder.match(PP_TEMPLATE_ID_REGEXP); const templateId = match ? parseInt(match[1], 10) : ROOT_TEMPLATE_ID; const isCloseTemplateTag = PP_CLOSE_TEMPLATE_REGEXP.test(placeholder); placeholders.push([templateId, isCloseTemplateTag, placeholder]); }); matches[content] = placeholders; } if (!placeholders.length) { throw new Error(`i18n postprocess: unmatched placeholder - ${content}`); } const currentTemplateId = templateIdsStack[templateIdsStack.length - 1]; let idx = 0; // find placeholder index that matches current template id for (let i = 0; i < placeholders.length; i++) { if (placeholders[i][0] === currentTemplateId) { idx = i; break; } } // update template id stack based on the current tag extracted const [templateId, isCloseTemplateTag, placeholder] = placeholders[idx]; if (isCloseTemplateTag) { templateIdsStack.pop(); } else if (currentTemplateId !== templateId) { templateIdsStack.push(templateId); } // remove processed tag from the list placeholders.splice(idx, 1); return placeholder; }); } // return current result if no replacements specified if (!Object.keys(replacements).length) { return result; } /** * Step 2: replace all ICU vars (like "VAR_PLURAL") */ result = result.replace(PP_ICU_VARS_REGEXP, (match, start, key, _type, _idx, end) => { return replacements.hasOwnProperty(key) ? `${start}${replacements[key]}${end}` : match; }); /** * Step 3: replace all placeholders used inside ICUs in a form of {PLACEHOLDER} */ result = result.replace(PP_ICU_PLACEHOLDERS_REGEXP, (match, key) => { return replacements.hasOwnProperty(key) ? replacements[key] : match; }); /** * Step 4: replace all ICU references with corresponding values (like ï¿½ICU_EXP_ICU_1ï¿½) in case * multiple ICUs have the same placeholder name */ result = result.replace(PP_ICUS_REGEXP, (match, key) => { if (replacements.hasOwnProperty(key)) { const list = replacements[key]; if (!list.length) { throw new Error(`i18n postprocess: unmatched ICU - ${match} with key: ${key}`); } return list.shift(); } return match; }); return result; } /** * Marks a block of text as translatable. * * The instructions `i18nStart` and `i18nEnd` mark the translation block in the template. * The translation `message` is the value which is locale specific. The translation string may * contain placeholders which associate inner elements and sub-templates within the translation. * * The translation `message` placeholders are: * - `ï¿½{index}(:{block})ï¿½`: *Binding Placeholder*: Marks a location where an expression will be * interpolated into. The placeholder `index` points to the expression binding index. An optional * `block` that matches the sub-template in which it was declared. * - `ï¿½#{index}(:{block})ï¿½`/`ï¿½/#{index}(:{block})ï¿½`: *Element Placeholder*: Marks the beginning * and end of DOM element that were embedded in the original translation block. The placeholder * `index` points to the element index in the template instructions set. An optional `block` that * matches the sub-template in which it was declared. * - `ï¿½*{index}:{block}ï¿½`/`ï¿½/*{index}:{block}ï¿½`: *Sub-template Placeholder*: Sub-templates must be * split up and translated separately in each angular template function. The `index` points to the * `template` instruction index. A `block` that matches the sub-template in which it was declared. * * @param index A unique index of the translation in the static block. * @param messageIndex An index of the translation message from the `def.consts` array. * @param subTemplateIndex Optional sub-template index in the `message`. * * @codeGenApi */ function ÉµÉµi18nStart(index, messageIndex, subTemplateIndex = -1) { const tView = getTView(); const lView = getLView(); const adjustedIndex = HEADER_OFFSET + index; ngDevMode && assertDefined(tView, `tView should be defined`); const message = getConstant(tView.consts, messageIndex); const parentTNode = getCurrentParentTNode(); if (tView.firstCreatePass) { i18nStartFirstCreatePass(tView, parentTNode === null ? 0 : parentTNode.index, lView, adjustedIndex, message, subTemplateIndex); } // Set a flag that this LView has i18n blocks. // The flag is later used to determine whether this component should // be hydrated (currently hydration is not supported for i18n blocks). if (tView.type === 2 /* TViewType.Embedded */) { // Annotate host component's LView (not embedded view's LView), // since hydration can be skipped on per-component basis only. const componentLView = lView[DECLARATION_COMPONENT_VIEW]; componentLView[FLAGS] |= 32 /* LViewFlags.HasI18n */; } else { lView[FLAGS] |= 32 /* LViewFlags.HasI18n */; } const tI18n = tView.data[adjustedIndex]; const sameViewParentTNode = parentTNode === lView[T_HOST] ? null : parentTNode; const parentRNode = getClosestRElement(tView, sameViewParentTNode, lView); // If `parentTNode` is an `ElementContainer` than it has ``. // When we do inserts we have to make sure to insert in front of ``. const insertInFrontOf = parentTNode && (parentTNode.type & 8 /* TNodeType.ElementContainer */) ? lView[parentTNode.index] : null; applyCreateOpCodes(lView, tI18n.create, parentRNode, insertInFrontOf); setInI18nBlock(true); } /** * Translates a translation block marked by `i18nStart` and `i18nEnd`. It inserts the text/ICU nodes * into the render tree, moves the placeholder nodes and removes the deleted nodes. * * @codeGenApi */ function ÉµÉµi18nEnd() { setInI18nBlock(false); } /** * * Use this instruction to create a translation block that doesn't contain any placeholder. * It calls both {@link i18nStart} and {@link i18nEnd} in one instruction. * * The translation `message` is the value which is locale specific. The translation string may * contain placeholders which associate inner elements and sub-templates within the translation. * * The translation `message` placeholders are: * - `ï¿½{index}(:{block})ï¿½`: *Binding Placeholder*: Marks a location where an expression will be * interpolated into. The placeholder `index` points to the expression binding index. An optional * `block` that matches the sub-template in which it was declared. * - `ï¿½#{index}(:{block})ï¿½`/`ï¿½/#{index}(:{block})ï¿½`: *Element Placeholder*: Marks the beginning * and end of DOM element that were embedded in the original translation block. The placeholder * `index` points to the element index in the template instructions set. An optional `block` that * matches the sub-template in which it was declared. * - `ï¿½*{index}:{block}ï¿½`/`ï¿½/*{index}:{block}ï¿½`: *Sub-template Placeholder*: Sub-templates must be * split up and translated separately in each angular template function. The `index` points to the * `template` instruction index. A `block` that matches the sub-template in which it was declared. * * @param index A unique index of the translation in the static block. * @param messageIndex An index of the translation message from the `def.consts` array. * @param subTemplateIndex Optional sub-template index in the `message`. * * @codeGenApi */ function ÉµÉµi18n(index, messageIndex, subTemplateIndex) { ÉµÉµi18nStart(index, messageIndex, subTemplateIndex); ÉµÉµi18nEnd(); } /** * Marks a list of attributes as translatable. * * @param index A unique index in the static block * @param values * * @codeGenApi */ function ÉµÉµi18nAttributes(index, attrsIndex) { const tView = getTView(); ngDevMode && assertDefined(tView, `tView should be defined`); const attrs = getConstant(tView.consts, attrsIndex); i18nAttributesFirstPass(tView, index + HEADER_OFFSET, attrs); } /** * Stores the values of the bindings during each update cycle in order to determine if we need to * update the translated nodes. * * @param value The binding's value * @returns This function returns itself so that it may be chained * (e.g. `i18nExp(ctx.name)(ctx.title)`) * * @codeGenApi */ function ÉµÉµi18nExp(value) { const lView = getLView(); setMaskBit(bindingUpdated(lView, nextBindingIndex(), value)); return ÉµÉµi18nExp; } /** * Updates a translation block or an i18n attribute when the bindings have changed. * * @param index Index of either {@link i18nStart} (translation block) or {@link i18nAttributes} * (i18n attribute) on which it should update the content. * * @codeGenApi */ function ÉµÉµi18nApply(index) { applyI18n(getTView(), getLView(), index + HEADER_OFFSET); } /** * Handles message string post-processing for internationalization. * * Handles message string post-processing by transforming it from intermediate * format (that might contain some markers that we need to replace) to the final * form, consumable by i18nStart instruction. Post processing steps include: * * 1. Resolve all multi-value cases (like [ï¿½*1:1ï¿½ï¿½#2:1ï¿½|ï¿½#4:1ï¿½|ï¿½5ï¿½]) * 2. Replace all ICU vars (like "VAR_PLURAL") * 3. Replace all placeholders used inside ICUs in a form of {PLACEHOLDER} * 4. Replace all ICU references with corresponding values (like ï¿½ICU_EXP_ICU_1ï¿½) * in case multiple ICUs have the same placeholder name * * @param message Raw translation string for post processing * @param replacements Set of replacements that should be applied * * @returns Transformed string that can be consumed by i18nStart instruction * * @codeGenApi */ function ÉµÉµi18nPostprocess(message, replacements = {}) { return i18nPostprocess(message, replacements); } /* * This file re-exports all symbols contained in this directory. * * Why is this file not `index.ts`? * * There seems to be an inconsistent path resolution of an `index.ts` file * when only the parent directory is referenced. This could be due to the * node module resolution configuration differing from rollup and/or typescript. * * With commit * https://github.com/angular/angular/commit/d5e3f2c64bd13ce83e7c70788b7fc514ca4a9918 * the `instructions.ts` file was moved to `instructions/instructions.ts` and an * `index.ts` file was used to re-export everything. Having had file names that were * importing from `instructions' directly (not the from the sub file or the `index.ts` * file) caused strange CI issues. `index.ts` had to be renamed to `all.ts` for this * to work. * * Jira Issue = FW-1184 */ /** * Resolves the providers which are defined in the DirectiveDef. * * When inserting the tokens and the factories in their respective arrays, we can assume that * this method is called first for the component (if any), and then for other directives on the same * node. * As a consequence,the providers are always processed in that order: * 1) The view providers of the component * 2) The providers of the component * 3) The providers of the other directives * This matches the structure of the injectables arrays of a view (for each node). * So the tokens and the factories can be pushed at the end of the arrays, except * in one case for multi providers. * * @param def the directive definition * @param providers: Array of `providers`. * @param viewProviders: Array of `viewProviders`. */ function providersResolver(def, providers, viewProviders) { const tView = getTView(); if (tView.firstCreatePass) { const isComponent = isComponentDef(def); // The list of view providers is processed first, and the flags are updated resolveProvider(viewProviders, tView.data, tView.blueprint, isComponent, true); // Then, the list of providers is processed, and the flags are updated resolveProvider(providers, tView.data, tView.blueprint, isComponent, false); } } /** * Resolves a provider and publishes it to the DI system. */ function resolveProvider(provider, tInjectables, lInjectablesBlueprint, isComponent, isViewProvider) { provider = resolveForwardRef(provider); if (Array.isArray(provider)) { // Recursively call `resolveProvider` // Recursion is OK in this case because this code will not be in hot-path once we implement // cloning of the initial state. for (let i = 0; i < provider.length; i++) { resolveProvider(provider[i], tInjectables, lInjectablesBlueprint, isComponent, isViewProvider); } } else { const tView = getTView(); const lView = getLView(); let token = isTypeProvider(provider) ? provider : resolveForwardRef(provider.provide); let providerFactory = providerToFactory(provider); const tNode = getCurrentTNode(); const beginIndex = tNode.providerIndexes & 1048575 /* TNodeProviderIndexes.ProvidersStartIndexMask */; const endIndex = tNode.directiveStart; const cptViewProvidersCount = tNode.providerIndexes >> 20 /* TNodeProviderIndexes.CptViewProvidersCountShift */; if (isTypeProvider(provider) || !provider.multi) { // Single provider case: the factory is created and pushed immediately const factory = new NodeInjectorFactory(providerFactory, isViewProvider, ÉµÉµdirectiveInject); const existingFactoryIndex = indexOf(token, tInjectables, isViewProvider ? beginIndex : beginIndex + cptViewProvidersCount, endIndex); if (existingFactoryIndex === -1) { diPublicInInjector(getOrCreateNodeInjectorForNode(tNode, lView), tView, token); registerDestroyHooksIfSupported(tView, provider, tInjectables.length); tInjectables.push(token); tNode.directiveStart++; tNode.directiveEnd++; if (isViewProvider) { tNode.providerIndexes += 1048576 /* TNodeProviderIndexes.CptViewProvidersCountShifter */; } lInjectablesBlueprint.push(factory); lView.push(factory); } else { lInjectablesBlueprint[existingFactoryIndex] = factory; lView[existingFactoryIndex] = factory; } } else { // Multi provider case: // We create a multi factory which is going to aggregate all the values. // Since the output of such a factory depends on content or view injection, // we create two of them, which are linked together. // // The first one (for view providers) is always in the first block of the injectables array, // and the second one (for providers) is always in the second block. // This is important because view providers have higher priority. When a multi token // is being looked up, the view providers should be found first. // Note that it is not possible to have a multi factory in the third block (directive block). // // The algorithm to process multi providers is as follows: // 1) If the multi provider comes from the `viewProviders` of the component: // a) If the special view providers factory doesn't exist, it is created and pushed. // b) Else, the multi provider is added to the existing multi factory. // 2) If the multi provider comes from the `providers` of the component or of another // directive: // a) If the multi factory doesn't exist, it is created and provider pushed into it. // It is also linked to the multi factory for view providers, if it exists. // b) Else, the multi provider is added to the existing multi factory. const existingProvidersFactoryIndex = indexOf(token, tInjectables, beginIndex + cptViewProvidersCount, endIndex); const existingViewProvidersFactoryIndex = indexOf(token, tInjectables, beginIndex, beginIndex + cptViewProvidersCount); const doesProvidersFactoryExist = existingProvidersFactoryIndex >= 0 && lInjectablesBlueprint[existingProvidersFactoryIndex]; const doesViewProvidersFactoryExist = existingViewProvidersFactoryIndex >= 0 && lInjectablesBlueprint[existingViewProvidersFactoryIndex]; if (isViewProvider && !doesViewProvidersFactoryExist || !isViewProvider && !doesProvidersFactoryExist) { // Cases 1.a and 2.a diPublicInInjector(getOrCreateNodeInjectorForNode(tNode, lView), tView, token); const factory = multiFactory(isViewProvider ? multiViewProvidersFactoryResolver : multiProvidersFactoryResolver, lInjectablesBlueprint.length, isViewProvider, isComponent, providerFactory); if (!isViewProvider && doesViewProvidersFactoryExist) { lInjectablesBlueprint[existingViewProvidersFactoryIndex].providerFactory = factory; } registerDestroyHooksIfSupported(tView, provider, tInjectables.length, 0); tInjectables.push(token); tNode.directiveStart++; tNode.directiveEnd++; if (isViewProvider) { tNode.providerIndexes += 1048576 /* TNodeProviderIndexes.CptViewProvidersCountShifter */; } lInjectablesBlueprint.push(factory); lView.push(factory); } else { // Cases 1.b and 2.b const indexInFactory = multiFactoryAdd(lInjectablesBlueprint[isViewProvider ? existingViewProvidersFactoryIndex : existingProvidersFactoryIndex], providerFactory, !isViewProvider && isComponent); registerDestroyHooksIfSupported(tView, provider, existingProvidersFactoryIndex > -1 ? existingProvidersFactoryIndex : existingViewProvidersFactoryIndex, indexInFactory); } if (!isViewProvider && isComponent && doesViewProvidersFactoryExist) { lInjectablesBlueprint[existingViewProvidersFactoryIndex].componentProviders++; } } } } /** * Registers the `ngOnDestroy` hook of a provider, if the provider supports destroy hooks. * @param tView `TView` in which to register the hook. * @param provider Provider whose hook should be registered. * @param contextIndex Index under which to find the context for the hook when it's being invoked. * @param indexInFactory Only required for `multi` providers. Index of the provider in the multi * provider factory. */ function registerDestroyHooksIfSupported(tView, provider, contextIndex, indexInFactory) { const providerIsTypeProvider = isTypeProvider(provider); const providerIsClassProvider = isClassProvider(provider); if (providerIsTypeProvider || providerIsClassProvider) { // Resolve forward references as `useClass` can hold a forward reference. const classToken = providerIsClassProvider ? resolveForwardRef(provider.useClass) : provider; const prototype = classToken.prototype; const ngOnDestroy = prototype.ngOnDestroy; if (ngOnDestroy) { const hooks = tView.destroyHooks || (tView.destroyHooks = []); if (!providerIsTypeProvider && provider.multi) { ngDevMode && assertDefined(indexInFactory, 'indexInFactory when registering multi factory destroy hook'); const existingCallbacksIndex = hooks.indexOf(contextIndex); if (existingCallbacksIndex === -1) { hooks.push(contextIndex, [indexInFactory, ngOnDestroy]); } else { hooks[existingCallbacksIndex + 1].push(indexInFactory, ngOnDestroy); } } else { hooks.push(contextIndex, ngOnDestroy); } } } } /** * Add a factory in a multi factory. * @returns Index at which the factory was inserted. */ function multiFactoryAdd(multiFactory, factory, isComponentProvider) { if (isComponentProvider) { multiFactory.componentProviders++; } return multiFactory.multi.push(factory) - 1; } /** * Returns the index of item in the array, but only in the begin to end range. */ function indexOf(item, arr, begin, end) { for (let i = begin; i < end; i++) { if (arr[i] === item) return i; } return -1; } /** * Use this with `multi` `providers`. */ function multiProvidersFactoryResolver(_, tData, lData, tNode) { return multiResolve(this.multi, []); } /** * Use this with `multi` `viewProviders`. * * This factory knows how to concatenate itself with the existing `multi` `providers`. */ function multiViewProvidersFactoryResolver(_, tData, lView, tNode) { const factories = this.multi; let result; if (this.providerFactory) { const componentCount = this.providerFactory.componentProviders; const multiProviders = getNodeInjectable(lView, lView[TVIEW], this.providerFactory.index, tNode); // Copy the section of the array which contains `multi` `providers` from the component result = multiProviders.slice(0, componentCount); // Insert the `viewProvider` instances. multiResolve(factories, result); // Copy the section of the array which contains `multi` `providers` from other directives for (let i = componentCount; i < multiProviders.length; i++) { result.push(multiProviders[i]); } } else { result = []; // Insert the `viewProvider` instances. multiResolve(factories, result); } return result; } /** * Maps an array of factories into an array of values. */ function multiResolve(factories, result) { for (let i = 0; i < factories.length; i++) { const factory = factories[i]; result.push(factory()); } return result; } /** * Creates a multi factory. */ function multiFactory(factoryFn, index, isViewProvider, isComponent, f) { const factory = new NodeInjectorFactory(factoryFn, isViewProvider, ÉµÉµdirectiveInject); factory.multi = []; factory.index = index; factory.componentProviders = 0; multiFactoryAdd(factory, f, isComponent && !isViewProvider); return factory; } /** * This feature resolves the providers of a directive (or component), * and publish them into the DI system, making it visible to others for injection. * * For example: * ```ts * class ComponentWithProviders { * constructor(private greeter: GreeterDE) {} * * static Éµcmp = defineComponent({ * type: ComponentWithProviders, * selectors: [['component-with-providers']], * factory: () => new ComponentWithProviders(directiveInject(GreeterDE as any)), * decls: 1, * vars: 1, * template: function(fs: RenderFlags, ctx: ComponentWithProviders) { * if (fs & RenderFlags.Create) { * ÉµÉµtext(0); * } * if (fs & RenderFlags.Update) { * ÉµÉµtextInterpolate(ctx.greeter.greet()); * } * }, * features: [ÉµÉµProvidersFeature([GreeterDE])] * }); * } * ``` * * @param definition * * @codeGenApi */ function ÉµÉµProvidersFeature(providers, viewProviders = []) { return (definition) => { definition.providersResolver = (def, processProvidersFn) => { return providersResolver(def, // processProvidersFn ? processProvidersFn(providers) : providers, // viewProviders); }; }; } /** * Represents an instance of an `NgModule` created by an `NgModuleFactory`. * Provides access to the `NgModule` instance and related objects. * * @publicApi */ class NgModuleRef$1 { } exports('NgModuleRef', NgModuleRef$1); /** * @publicApi * * @deprecated * This class was mostly used as a part of ViewEngine-based JIT API and is no longer needed in Ivy * JIT mode. See [JIT API changes due to ViewEngine deprecation](guide/deprecations#jit-api-changes) * for additional context. Angular provides APIs that accept NgModule classes directly (such as * [PlatformRef.bootstrapModule](api/core/PlatformRef#bootstrapModule) and * [createNgModule](api/core/createNgModule)), consider switching to those APIs instead of * using factory-based ones. */ class NgModuleFactory$1 { } exports('NgModuleFactory', NgModuleFactory$1); /** * Returns a new NgModuleRef instance based on the NgModule class and parent injector provided. * * @param ngModule NgModule class. * @param parentInjector Optional injector instance to use as a parent for the module injector. If * not provided, `NullInjector` will be used instead. * @returns NgModuleRef that represents an NgModule instance. * * @publicApi */ function createNgModule(ngModule, parentInjector) { return new NgModuleRef(ngModule, parentInjector ?? null, []); } /** * The `createNgModule` function alias for backwards-compatibility. * Please avoid using it directly and use `createNgModule` instead. * * @deprecated Use `createNgModule` instead. */ const createNgModuleRef = exports('createNgModuleRef', createNgModule); class NgModuleRef extends NgModuleRef$1 { constructor(ngModuleType, _parent, additionalProviders) { super(); this._parent = _parent; // tslint:disable-next-line:require-internal-with-underscore this._bootstrapComponents = []; this.destroyCbs = []; // When bootstrapping a module we have a dependency graph that looks like this: // ApplicationRef -> ComponentFactoryResolver -> NgModuleRef. The problem is that if the // module being resolved tries to inject the ComponentFactoryResolver, it'll create a // circular dependency which will result in a runtime error, because the injector doesn't // exist yet. We work around the issue by creating the ComponentFactoryResolver ourselves // and providing it, rather than letting the injector resolve it. this.componentFactoryResolver = new ComponentFactoryResolver(this); const ngModuleDef = getNgModuleDef(ngModuleType); ngDevMode && assertDefined(ngModuleDef, `NgModule '${stringify(ngModuleType)}' is not a subtype of 'NgModuleType'.`); this._bootstrapComponents = maybeUnwrapFn(ngModuleDef.bootstrap); this._r3Injector = createInjectorWithoutInjectorInstances(ngModuleType, _parent, [ { provide: NgModuleRef$1, useValue: this }, { provide: ComponentFactoryResolver$1, useValue: this.componentFactoryResolver }, ...additionalProviders ], stringify(ngModuleType), new Set(['environment'])); // We need to resolve the injector types separately from the injector creation, because // the module might be trying to use this ref in its constructor for DI which will cause a // circular error that will eventually error out, because the injector isn't created yet. this._r3Injector.resolveInjectorInitializers(); this.instance = this._r3Injector.get(ngModuleType); } get injector() { return this._r3Injector; } destroy() { ngDevMode && assertDefined(this.destroyCbs, 'NgModule already destroyed'); const injector = this._r3Injector; !injector.destroyed && injector.destroy(); this.destroyCbs.forEach(fn => fn()); this.destroyCbs = null; } onDestroy(callback) { ngDevMode && assertDefined(this.destroyCbs, 'NgModule already destroyed'); this.destroyCbs.push(callback); } } exports('ÉµRender3NgModuleRef', NgModuleRef); class NgModuleFactory extends NgModuleFactory$1 { constructor(moduleType) { super(); this.moduleType = moduleType; } create(parentInjector) { return new NgModuleRef(this.moduleType, parentInjector, []); } } exports('ÉµNgModuleFactory', NgModuleFactory); function createNgModuleRefWithProviders(moduleType, parentInjector, additionalProviders) { return new NgModuleRef(moduleType, parentInjector, additionalProviders); } class EnvironmentNgModuleRefAdapter extends NgModuleRef$1 { constructor(config) { super(); this.componentFactoryResolver = new ComponentFactoryResolver(this); this.instance = null; const injector = new R3Injector([ ...config.providers, { provide: NgModuleRef$1, useValue: this }, { provide: ComponentFactoryResolver$1, useValue: this.componentFactoryResolver }, ], config.parent || getNullInjector(), config.debugName, new Set(['environment'])); this.injector = injector; if (config.runEnvironmentInitializers) { injector.resolveInjectorInitializers(); } } destroy() { this.injector.destroy(); } onDestroy(callback) { this.injector.onDestroy(callback); } } /** * Create a new environment injector. * * Learn more about environment injectors in * [this guide](guide/standalone-components#environment-injectors). * * @param providers An array of providers. * @param parent A parent environment injector. * @param debugName An optional name for this injector instance, which will be used in error * messages. * * @publicApi */ function createEnvironmentInjector(providers, parent, debugName = null) { const adapter = new EnvironmentNgModuleRefAdapter({ providers, parent, debugName, runEnvironmentInitializers: true }); return adapter.injector; } /** * A service used by the framework to create instances of standalone injectors. Those injectors are * created on demand in case of dynamic component instantiation and contain ambient providers * collected from the imports graph rooted at a given standalone component. */ class StandaloneService { constructor(_injector) { this._injector = _injector; this.cachedInjectors = new Map(); } getOrCreateStandaloneInjector(componentDef) { if (!componentDef.standalone) { return null; } if (!this.cachedInjectors.has(componentDef.id)) { const providers = internalImportProvidersFrom(false, componentDef.type); const standaloneInjector = providers.length > 0 ? createEnvironmentInjector([providers], this._injector, `Standalone[${componentDef.type.name}]`) : null; this.cachedInjectors.set(componentDef.id, standaloneInjector); } return this.cachedInjectors.get(componentDef.id); } ngOnDestroy() { try { for (const injector of this.cachedInjectors.values()) { if (injector !== null) { injector.destroy(); } } } finally { this.cachedInjectors.clear(); } } /** @nocollapse */ static { this.Éµprov = ÉµÉµdefineInjectable({ token: StandaloneService, providedIn: 'environment', factory: () => new StandaloneService(ÉµÉµinject(EnvironmentInjector)), }); } } /** * A feature that acts as a setup code for the {@link StandaloneService}. * * The most important responsibility of this feature is to expose the "getStandaloneInjector" * function (an entry points to a standalone injector creation) on a component definition object. We * go through the features infrastructure to make sure that the standalone injector creation logic * is tree-shakable and not included in applications that don't use standalone components. * * @codeGenApi */ function ÉµÉµStandaloneFeature(definition) { definition.getStandaloneInjector = (parentInjector) => { return parentInjector.get(StandaloneService).getOrCreateStandaloneInjector(definition); }; } /** * Retrieves the component instance associated with a given DOM element. * * @usageNotes * Given the following DOM structure: * * ```html * *

* *

* * ``` * * Calling `getComponent` on `` will return the instance of `ChildComponent` * associated with this DOM element. * * Calling the function on `` will return the `MyApp` instance. * * * @param element DOM element from which the component should be retrieved. * @returns Component instance associated with the element or `null` if there * is no component associated with it. * * @publicApi * @globalApi ng */ function getComponent(element) { ngDevMode && assertDomElement(element); const context = getLContext(element); if (context === null) return null; if (context.component === undefined) { const lView = context.lView; if (lView === null) { return null; } context.component = getComponentAtNodeIndex(context.nodeIndex, lView); } return context.component; } /** * If inside an embedded view (e.g. `*ngIf` or `*ngFor`), retrieves the context of the embedded * view that the element is part of. Otherwise retrieves the instance of the component whose view * owns the element (in this case, the result is the same as calling `getOwningComponent`). * * @param element Element for which to get the surrounding component instance. * @returns Instance of the component that is around the element or null if the element isn't * inside any component. * * @publicApi * @globalApi ng */ function getContext(element) { assertDomElement(element); const context = getLContext(element); const lView = context ? context.lView : null; return lView === null ? null : lView[CONTEXT]; } /** * Retrieves the component instance whose view contains the DOM element. * * For example, if `` is used in the template of `` * (i.e. a `ViewChild` of ``), calling `getOwningComponent` on `` * would return ``. * * @param elementOrDir DOM element, component or directive instance * for which to retrieve the root components. * @returns Component instance whose view owns the DOM element or null if the element is not * part of a component view. * * @publicApi * @globalApi ng */ function getOwningComponent(elementOrDir) { const context = getLContext(elementOrDir); let lView = context ? context.lView : null; if (lView === null) return null; let parent; while (lView[TVIEW].type === 2 /* TViewType.Embedded */ && (parent = getLViewParent(lView))) { lView = parent; } return lView[FLAGS] & 512 /* LViewFlags.IsRoot */ ? null : lView[CONTEXT]; } /** * Retrieves all root components associated with a DOM element, directive or component instance. * Root components are those which have been bootstrapped by Angular. * * @param elementOrDir DOM element, component or directive instance * for which to retrieve the root components. * @returns Root components associated with the target object. * * @publicApi * @globalApi ng */ function getRootComponents(elementOrDir) { const lView = readPatchedLView(elementOrDir); return lView !== null ? [getRootContext(lView)] : []; } /** * Retrieves an `Injector` associated with an element, component or directive instance. * * @param elementOrDir DOM element, component or directive instance for which to * retrieve the injector. * @returns Injector associated with the element, component or directive instance. * * @publicApi * @globalApi ng */ function getInjector(elementOrDir) { const context = getLContext(elementOrDir); const lView = context ? context.lView : null; if (lView === null) return Injector.NULL; const tNode = lView[TVIEW].data[context.nodeIndex]; return new NodeInjector(tNode, lView); } /** * Retrieve a set of injection tokens at a given DOM node. * * @param element Element for which the injection tokens should be retrieved. */ function getInjectionTokens(element) { const context = getLContext(element); const lView = context ? context.lView : null; if (lView === null) return []; const tView = lView[TVIEW]; const tNode = tView.data[context.nodeIndex]; const providerTokens = []; const startIndex = tNode.providerIndexes & 1048575 /* TNodeProviderIndexes.ProvidersStartIndexMask */; const endIndex = tNode.directiveEnd; for (let i = startIndex; i < endIndex; i++) { let value = tView.data[i]; if (isDirectiveDefHack(value)) { // The fact that we sometimes store Type and sometimes DirectiveDef in this location is a // design flaw. We should always store same type so that we can be monomorphic. The issue // is that for Components/Directives we store the def instead the type. The correct behavior // is that we should always be storing injectable type in this location. value = value.type; } providerTokens.push(value); } return providerTokens; } /** * Retrieves directive instances associated with a given DOM node. Does not include * component instances. * * @usageNotes * Given the following DOM structure: * * ```html * * * * * ``` * * Calling `getDirectives` on `', * }) * class App {} * * ``` * * The following example registers another DOM event handler that listens for `Enter` key-press * events on the global `window`. * ``` ts * import { HostListener, Component } from "@angular/core"; * * @Component({ * selector: 'app', * template: `
Hello, you have pressed enter {{counter}} number of times!
Press enter key * to increment the counter. * ` * }) * class AppComponent { * counter = 0; * @HostListener('window:keydown.enter', ['$event']) * handleKeyDown(event: KeyboardEvent) { * this.counter++; * } * resetCounter() { * this.counter = 0; * } * } * ``` * The list of valid key names for `keydown` and `keyup` events * can be found here: * https://www.w3.org/TR/DOM-Level-3-Events-key/#named-key-attribute-values * * Note that keys can also be combined, e.g. `@HostListener('keydown.shift.a')`. * * The global target names that can be used to prefix an event name are * `document:`, `window:` and `body:`. * * @Annotation * @publicApi */ const HostListener = exports('HostListener', makePropDecorator('HostListener', (eventName, args) => ({ eventName, args }))); /** * @Annotation */ const NgModule = exports('NgModule', makeDecorator('NgModule', (ngModule) => ngModule, undefined, undefined, /** * Decorator that marks the following class as an NgModule, and supplies * configuration metadata for it. * * * The `declarations` option configures the compiler * with information about what belongs to the NgModule. * * The `providers` options configures the NgModule's injector to provide * dependencies the NgModule members. * * The `imports` and `exports` options bring in members from other modules, and make * this module's members available to others. */ (type, meta) => compileNgModule(type, meta))); /** * A [DI token](guide/glossary#di-token "DI token definition") that you can use to provide * one or more initialization functions. * * The provided functions are injected at application startup and executed during * app initialization. If any of these functions returns a Promise or an Observable, initialization * does not complete until the Promise is resolved or the Observable is completed. * * You can, for example, create a factory function that loads language data * or an external configuration, and provide that function to the `APP_INITIALIZER` token. * The function is executed during the application bootstrap process, * and the needed data is available on startup. * * @see `ApplicationInitStatus` * * @usageNotes * * The following example illustrates how to configure a multi-provider using `APP_INITIALIZER` token * and a function returning a promise. * * ``` * function initializeApp(): Promise { * return new Promise((resolve, reject) => { * // Do some asynchronous stuff * resolve(); * }); * } * * @NgModule({ * imports: [BrowserModule], * declarations: [AppComponent], * bootstrap: [AppComponent], * providers: [{ * provide: APP_INITIALIZER, * useFactory: () => initializeApp, * multi: true * }] * }) * export class AppModule {} * ``` * * It's also possible to configure a multi-provider using `APP_INITIALIZER` token and a function * returning an observable, see an example below. Note: the `HttpClient` in this example is used for * demo purposes to illustrate how the factory function can work with other providers available * through DI. * * ``` * function initializeAppFactory(httpClient: HttpClient): () => Observable { * return () => httpClient.get("https://someUrl.com/api/user") * .pipe( * tap(user => { ... }) * ); * } * * @NgModule({ * imports: [BrowserModule, HttpClientModule], * declarations: [AppComponent], * bootstrap: [AppComponent], * providers: [{ * provide: APP_INITIALIZER, * useFactory: initializeAppFactory, * deps: [HttpClient], * multi: true * }] * }) * export class AppModule {} * ``` * * @publicApi */ const APP_INITIALIZER = exports('APP_INITIALIZER', new InjectionToken('Application Initializer')); /** * A class that reflects the state of running {@link APP_INITIALIZER} functions. * * @publicApi */ class ApplicationInitStatus { constructor() { this.initialized = false; this.done = false; this.donePromise = new Promise((res, rej) => { this.resolve = res; this.reject = rej; }); this.appInits = inject(APP_INITIALIZER, { optional: true }) ?? []; if ((typeof ngDevMode === 'undefined' || ngDevMode) && !Array.isArray(this.appInits)) { throw new RuntimeError(-209 /* RuntimeErrorCode.INVALID_MULTI_PROVIDER */, 'Unexpected type of the `APP_INITIALIZER` token value ' + `(expected an array, but got ${typeof this.appInits}). ` + 'Please check that the `APP_INITIALIZER` token is configured as a ' + '`multi: true` provider.'); } } /** @internal */ runInitializers() { if (this.initialized) { return; } const asyncInitPromises = []; for (const appInits of this.appInits) { const initResult = appInits(); if (isPromise(initResult)) { asyncInitPromises.push(initResult); } else if (isSubscribable(initResult)) { const observableAsPromise = new Promise((resolve, reject) => { initResult.subscribe({ complete: resolve, error: reject }); }); asyncInitPromises.push(observableAsPromise); } } const complete = () => { // @ts-expect-error overwriting a readonly this.done = true; this.resolve(); }; Promise.all(asyncInitPromises) .then(() => { complete(); }) .catch(e => { this.reject(e); }); if (asyncInitPromises.length === 0) { complete(); } this.initialized = true; } static { this.Éµfac = function ApplicationInitStatus_Factory(t) { return new (t || ApplicationInitStatus)(); }; } static { this.Éµprov = /*@__PURE__*/ ÉµÉµdefineInjectable({ token: ApplicationInitStatus, factory: ApplicationInitStatus.Éµfac, providedIn: 'root' }); } } exports('ApplicationInitStatus', ApplicationInitStatus); (function () { (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(ApplicationInitStatus, [{ type: Injectable, args: [{ providedIn: 'root' }] }], function () { return []; }, null); })(); class Console { log(message) { // tslint:disable-next-line:no-console console.log(message); } // Note: for reporting errors use `DOM.logError()` as it is platform specific warn(message) { // tslint:disable-next-line:no-console console.warn(message); } static { this.Éµfac = function Console_Factory(t) { return new (t || Console)(); }; } static { this.Éµprov = /*@__PURE__*/ ÉµÉµdefineInjectable({ token: Console, factory: Console.Éµfac, providedIn: 'platform' }); } } exports('ÉµConsole', Console); (function () { (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(Console, [{ type: Injectable, args: [{ providedIn: 'platform' }] }], null, null); })(); /** * Work out the locale from the potential global properties. * * * Closure Compiler: use `goog.LOCALE`. * * Ivy enabled: use `$localize.locale` */ function getGlobalLocale() { if (typeof ngI18nClosureMode !== 'undefined' && ngI18nClosureMode && typeof goog !== 'undefined' && goog.LOCALE !== 'en') { // * The default `goog.LOCALE` value is `en`, while Angular used `en-US`. // * In order to preserve backwards compatibility, we use Angular default value over // Closure Compiler's one. return goog.LOCALE; } else { // KEEP `typeof $localize !== 'undefined' && $localize.locale` IN SYNC WITH THE LOCALIZE // COMPILE-TIME INLINER. // // * During compile time inlining of translations the expression will be replaced // with a string literal that is the current locale. Other forms of this expression are not // guaranteed to be replaced. // // * During runtime translation evaluation, the developer is required to set `$localize.locale` // if required, or just to provide their own `LOCALE_ID` provider. return (typeof $localize !== 'undefined' && $localize.locale) || DEFAULT_LOCALE_ID; } } /** * Provide this token to set the locale of your application. * It is used for i18n extraction, by i18n pipes (DatePipe, I18nPluralPipe, CurrencyPipe, * DecimalPipe and PercentPipe) and by ICU expressions. * * See the [i18n guide](guide/i18n-common-locale-id) for more information. * * @usageNotes * ### Example * * ```typescript * import { LOCALE_ID } from '@angular/core'; * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; * import { AppModule } from './app/app.module'; * * platformBrowserDynamic().bootstrapModule(AppModule, { * providers: [{provide: LOCALE_ID, useValue: 'en-US' }] * }); * ``` * * @publicApi */ const LOCALE_ID = exports('LOCALE_ID', new InjectionToken('LocaleId', { providedIn: 'root', factory: () => inject(LOCALE_ID, InjectFlags.Optional | InjectFlags.SkipSelf) || getGlobalLocale(), })); /** * Provide this token to set the default currency code your application uses for * CurrencyPipe when there is no currency code passed into it. This is only used by * CurrencyPipe and has no relation to locale currency. Defaults to USD if not configured. * * See the [i18n guide](guide/i18n-common-locale-id) for more information. * *
* * **Deprecation notice:** * * The default currency code is currently always `USD` but this is deprecated from v9. * * **In v10 the default currency code will be taken from the current locale.** * * If you need the previous behavior then set it by creating a `DEFAULT_CURRENCY_CODE` provider in * your application `NgModule`: * * ```ts * {provide: DEFAULT_CURRENCY_CODE, useValue: 'USD'} * ``` * *
* * @usageNotes * ### Example * * ```typescript * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; * import { AppModule } from './app/app.module'; * * platformBrowserDynamic().bootstrapModule(AppModule, { * providers: [{provide: DEFAULT_CURRENCY_CODE, useValue: 'EUR' }] * }); * ``` * * @publicApi */ const DEFAULT_CURRENCY_CODE = exports('DEFAULT_CURRENCY_CODE', new InjectionToken('DefaultCurrencyCode', { providedIn: 'root', factory: () => USD_CURRENCY_CODE, })); /** * Use this token at bootstrap to provide the content of your translation file (`xtb`, * `xlf` or `xlf2`) when you want to translate your application in another language. * * See the [i18n guide](guide/i18n-common-merge) for more information. * * @usageNotes * ### Example * * ```typescript * import { TRANSLATIONS } from '@angular/core'; * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; * import { AppModule } from './app/app.module'; * * // content of your translation file * const translations = '....'; * * platformBrowserDynamic().bootstrapModule(AppModule, { * providers: [{provide: TRANSLATIONS, useValue: translations }] * }); * ``` * * @publicApi */ const TRANSLATIONS = exports('TRANSLATIONS', new InjectionToken('Translations')); /** * Provide this token at bootstrap to set the format of your {@link TRANSLATIONS}: `xtb`, * `xlf` or `xlf2`. * * See the [i18n guide](guide/i18n-common-merge) for more information. * * @usageNotes * ### Example * * ```typescript * import { TRANSLATIONS_FORMAT } from '@angular/core'; * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; * import { AppModule } from './app/app.module'; * * platformBrowserDynamic().bootstrapModule(AppModule, { * providers: [{provide: TRANSLATIONS_FORMAT, useValue: 'xlf' }] * }); * ``` * * @publicApi */ const TRANSLATIONS_FORMAT = exports('TRANSLATIONS_FORMAT', new InjectionToken('TranslationsFormat')); /** * Use this enum at bootstrap as an option of `bootstrapModule` to define the strategy * that the compiler should use in case of missing translations: * - Error: throw if you have missing translations. * - Warning (default): show a warning in the console and/or shell. * - Ignore: do nothing. * * See the [i18n guide](guide/i18n-common-merge#report-missing-translations) for more information. * * @usageNotes * ### Example * ```typescript * import { MissingTranslationStrategy } from '@angular/core'; * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; * import { AppModule } from './app/app.module'; * * platformBrowserDynamic().bootstrapModule(AppModule, { * missingTranslation: MissingTranslationStrategy.Error * }); * ``` * * @publicApi */ var MissingTranslationStrategy; exports('MissingTranslationStrategy', MissingTranslationStrategy); (function (MissingTranslationStrategy) { MissingTranslationStrategy[MissingTranslationStrategy["Error"] = 0] = "Error"; MissingTranslationStrategy[MissingTranslationStrategy["Warning"] = 1] = "Warning"; MissingTranslationStrategy[MissingTranslationStrategy["Ignore"] = 2] = "Ignore"; })(MissingTranslationStrategy || (exports('MissingTranslationStrategy', MissingTranslationStrategy = {}))); /** * *Internal* service that keeps track of pending tasks happening in the system * during the initial rendering. No tasks are tracked after an initial * rendering. * * This information is needed to make sure that the serialization on the server * is delayed until all tasks in the queue (such as an initial navigation or a * pending HTTP request) are completed. */ class InitialRenderPendingTasks { constructor() { this.taskId = 0; this.pendingTasks = new Set(); this.hasPendingTasks = new BehaviorSubject(false); } add() { this.hasPendingTasks.next(true); const taskId = this.taskId++; this.pendingTasks.add(taskId); return taskId; } remove(taskId) { this.pendingTasks.delete(taskId); if (this.pendingTasks.size === 0) { this.hasPendingTasks.next(false); } } ngOnDestroy() { this.pendingTasks.clear(); this.hasPendingTasks.next(false); } static { this.Éµfac = function InitialRenderPendingTasks_Factory(t) { return new (t || InitialRenderPendingTasks)(); }; } static { this.Éµprov = /*@__PURE__*/ ÉµÉµdefineInjectable({ token: InitialRenderPendingTasks, factory: InitialRenderPendingTasks.Éµfac, providedIn: 'root' }); } } exports('ÉµInitialRenderPendingTasks', InitialRenderPendingTasks); (function () { (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(InitialRenderPendingTasks, [{ type: Injectable, args: [{ providedIn: 'root' }] }], null, null); })(); /** * Combination of NgModuleFactory and ComponentFactories. * * @publicApi * * @deprecated * Ivy JIT mode doesn't require accessing this symbol. * See [JIT API changes due to ViewEngine deprecation](guide/deprecations#jit-api-changes) for * additional context. */ class ModuleWithComponentFactories { constructor(ngModuleFactory, componentFactories) { this.ngModuleFactory = ngModuleFactory; this.componentFactories = componentFactories; } } exports('ModuleWithComponentFactories', ModuleWithComponentFactories); /** * Low-level service for running the angular compiler during runtime * to create {@link ComponentFactory}s, which * can later be used to create and render a Component instance. * * Each `@NgModule` provides an own `Compiler` to its injector, * that will use the directives/pipes of the ng module for compilation * of components. * * @publicApi * * @deprecated * Ivy JIT mode doesn't require accessing this symbol. * See [JIT API changes due to ViewEngine deprecation](guide/deprecations#jit-api-changes) for * additional context. */ class Compiler { /** * Compiles the given NgModule and all of its components. All templates of the components * have to be inlined. */ compileModuleSync(moduleType) { return new NgModuleFactory(moduleType); } /** * Compiles the given NgModule and all of its components */ compileModuleAsync(moduleType) { return Promise.resolve(this.compileModuleSync(moduleType)); } /** * Same as {@link #compileModuleSync} but also creates ComponentFactories for all components. */ compileModuleAndAllComponentsSync(moduleType) { const ngModuleFactory = this.compileModuleSync(moduleType); const moduleDef = getNgModuleDef(moduleType); const componentFactories = maybeUnwrapFn(moduleDef.declarations) .reduce((factories, declaration) => { const componentDef = getComponentDef(declaration); componentDef && factories.push(new ComponentFactory(componentDef)); return factories; }, []); return new ModuleWithComponentFactories(ngModuleFactory, componentFactories); } /** * Same as {@link #compileModuleAsync} but also creates ComponentFactories for all components. */ compileModuleAndAllComponentsAsync(moduleType) { return Promise.resolve(this.compileModuleAndAllComponentsSync(moduleType)); } /** * Clears all caches. */ clearCache() { } /** * Clears the cache for the given component/ngModule. */ clearCacheFor(type) { } /** * Returns the id for a given NgModule, if one is defined and known to the compiler. */ getModuleId(moduleType) { return undefined; } static { this.Éµfac = function Compiler_Factory(t) { return new (t || Compiler)(); }; } static { this.Éµprov = /*@__PURE__*/ ÉµÉµdefineInjectable({ token: Compiler, factory: Compiler.Éµfac, providedIn: 'root' }); } } exports('Compiler', Compiler); (function () { (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(Compiler, [{ type: Injectable, args: [{ providedIn: 'root' }] }], null, null); })(); /** * Token to provide CompilerOptions in the platform injector. * * @publicApi */ const COMPILER_OPTIONS = exports('COMPILER_OPTIONS', new InjectionToken('compilerOptions')); /** * A factory for creating a Compiler * * @publicApi * * @deprecated * Ivy JIT mode doesn't require accessing this symbol. * See [JIT API changes due to ViewEngine deprecation](guide/deprecations#jit-api-changes) for * additional context. */ class CompilerFactory { } exports('CompilerFactory', CompilerFactory); /** * Marks a component for check (in case of OnPush components) and synchronously * performs change detection on the application this component belongs to. * * @param component Component to {@link ChangeDetectorRef#markForCheck mark for check}. * * @publicApi * @globalApi ng */ function applyChanges(component) { ngDevMode && assertDefined(component, 'component'); markViewDirty(getComponentViewByInstance(component)); getRootComponents(component).forEach(rootComponent => detectChanges(rootComponent)); } /** * This file introduces series of globally accessible debug tools * to allow for the Angular debugging story to function. * * To see this in action run the following command: * * bazel run //packages/core/test/bundling/todo:devserver * * Then load `localhost:5432` and start using the console tools. */ /** * This value reflects the property on the window where the dev * tools are patched (window.ng). * */ const GLOBAL_PUBLISH_EXPANDO_KEY = 'ng'; let _published = false; /** * Publishes a collection of default debug tools onto`window.ng`. * * These functions are available globally when Angular is in development * mode and are automatically stripped away from prod mode is on. */ function publishDefaultGlobalUtils$1() { if (!_published) { _published = true; /** * Warning: this function is *INTERNAL* and should not be relied upon in application's code. * The contract of the function might be changed in any release and/or the function can be * removed completely. */ publishGlobalUtil('ÉµsetProfiler', setProfiler); publishGlobalUtil('getDirectiveMetadata', getDirectiveMetadata$1); publishGlobalUtil('getComponent', getComponent); publishGlobalUtil('getContext', getContext); publishGlobalUtil('getListeners', getListeners); publishGlobalUtil('getOwningComponent', getOwningComponent); publishGlobalUtil('getHostElement', getHostElement); publishGlobalUtil('getInjector', getInjector); publishGlobalUtil('getRootComponents', getRootComponents); publishGlobalUtil('getDirectives', getDirectives); publishGlobalUtil('applyChanges', applyChanges); } } /** * Publishes the given function to `window.ng` so that it can be * used from the browser console when an application is not in production. */ function publishGlobalUtil(name, fn) { if (typeof COMPILED === 'undefined' || !COMPILED) { // Note: we can't export `ng` when using closure enhanced optimization as: // - closure declares globals itself for minified names, which sometimes clobber our `ng` global // - we can't declare a closure extern as the namespace `ng` is already used within Google // for typings for AngularJS (via `goog.provide('ng....')`). const w = _global; ngDevMode && assertDefined(fn, 'function not defined'); if (w) { let container = w[GLOBAL_PUBLISH_EXPANDO_KEY]; if (!container) { container = w[GLOBAL_PUBLISH_EXPANDO_KEY] = {}; } container[name] = fn; } } } const promise = (() => Promise.resolve(0))(); function scheduleMicroTask(fn) { if (typeof Zone === 'undefined') { // use promise to schedule microTask instead of use Zone promise.then(() => { fn && fn.apply(null, null); }); } else { Zone.current.scheduleMicroTask('scheduleMicrotask', fn); } } function noop(...args) { // Do nothing. } function getNativeRequestAnimationFrame() { let nativeRequestAnimationFrame = _global['requestAnimationFrame']; let nativeCancelAnimationFrame = _global['cancelAnimationFrame']; if (typeof Zone !== 'undefined' && nativeRequestAnimationFrame && nativeCancelAnimationFrame) { // use unpatched version of requestAnimationFrame(native delegate) if possible // to avoid another Change detection const unpatchedRequestAnimationFrame = nativeRequestAnimationFrame[Zone.__symbol__('OriginalDelegate')]; if (unpatchedRequestAnimationFrame) { nativeRequestAnimationFrame = unpatchedRequestAnimationFrame; } const unpatchedCancelAnimationFrame = nativeCancelAnimationFrame[Zone.__symbol__('OriginalDelegate')]; if (unpatchedCancelAnimationFrame) { nativeCancelAnimationFrame = unpatchedCancelAnimationFrame; } } return { nativeRequestAnimationFrame, nativeCancelAnimationFrame }; } class AsyncStackTaggingZoneSpec { constructor(namePrefix, consoleAsyncStackTaggingImpl = console) { this.name = 'asyncStackTagging for ' + namePrefix; this.createTask = consoleAsyncStackTaggingImpl?.createTask ?? (() => null); } onScheduleTask(delegate, _current, target, task) { task.consoleTask = this.createTask(`Zone - ${task.source || task.type}`); return delegate.scheduleTask(target, task); } onInvokeTask(delegate, _currentZone, targetZone, task, applyThis, applyArgs) { let ret; if (task.consoleTask) { ret = task.consoleTask.run(() => delegate.invokeTask(targetZone, task, applyThis, applyArgs)); } else { ret = delegate.invokeTask(targetZone, task, applyThis, applyArgs); } return ret; } } /** * An injectable service for executing work inside or outside of the Angular zone. * * The most common use of this service is to optimize performance when starting a work consisting of * one or more asynchronous tasks that don't require UI updates or error handling to be handled by * Angular. Such tasks can be kicked off via {@link #runOutsideAngular} and if needed, these tasks * can reenter the Angular zone via {@link #run}. * * * * @usageNotes * ### Example * * ``` * import {Component, NgZone} from '@angular/core'; * import {NgIf} from '@angular/common'; * * @Component({ * selector: 'ng-zone-demo', * template: ` *
Demo: NgZone
* *
Progress: {{progress}}%
*
= 100">Done processing {{label}} of Angular zone!
* * * * `, * }) * export class NgZoneDemo { * progress: number = 0; * label: string; * * constructor(private _ngZone: NgZone) {} * * // Loop inside the Angular zone * // so the UI DOES refresh after each setTimeout cycle * processWithinAngularZone() { * this.label = 'inside'; * this.progress = 0; * this._increaseProgress(() => console.log('Inside Done!')); * } * * // Loop outside of the Angular zone * // so the UI DOES NOT refresh after each setTimeout cycle * processOutsideOfAngularZone() { * this.label = 'outside'; * this.progress = 0; * this._ngZone.runOutsideAngular(() => { * this._increaseProgress(() => { * // reenter the Angular zone and display done * this._ngZone.run(() => { console.log('Outside Done!'); }); * }); * }); * } * * _increaseProgress(doneCallback: () => void) { * this.progress += 1; * console.log(`Current progress: ${this.progress}%`); * * if (this.progress < 100) { * window.setTimeout(() => this._increaseProgress(doneCallback), 10); * } else { * doneCallback(); * } * } * } * ``` * * @publicApi */ class NgZone { constructor({ enableLongStackTrace = false, shouldCoalesceEventChangeDetection = false, shouldCoalesceRunChangeDetection = false }) { this.hasPendingMacrotasks = false; this.hasPendingMicrotasks = false; /** * Whether there are no outstanding microtasks or macrotasks. */ this.isStable = true; /** * Notifies when code enters Angular Zone. This gets fired first on VM Turn. */ this.onUnstable = new EventEmitter(false); /** * Notifies when there is no more microtasks enqueued in the current VM Turn. * This is a hint for Angular to do change detection, which may enqueue more microtasks. * For this reason this event can fire multiple times per VM Turn. */ this.onMicrotaskEmpty = new EventEmitter(false); /** * Notifies when the last `onMicrotaskEmpty` has run and there are no more microtasks, which * implies we are about to relinquish VM turn. * This event gets called just once. */ this.onStable = new EventEmitter(false); /** * Notifies that an error has been delivered. */ this.onError = new EventEmitter(false); if (typeof Zone == 'undefined') { throw new RuntimeError(908 /* RuntimeErrorCode.MISSING_ZONEJS */, ngDevMode && `In this configuration Angular requires Zone.js`); } Zone.assertZonePatched(); const self = this; self._nesting = 0; self._outer = self._inner = Zone.current; // AsyncStackTaggingZoneSpec provides `linked stack traces` to show // where the async operation is scheduled. For more details, refer // to this article, https://developer.chrome.com/blog/devtools-better-angular-debugging/ // And we only import this AsyncStackTaggingZoneSpec in development mode, // in the production mode, the AsyncStackTaggingZoneSpec will be tree shaken away. if (ngDevMode) { self._inner = self._inner.fork(new AsyncStackTaggingZoneSpec('Angular')); } if (Zone['TaskTrackingZoneSpec']) { self._inner = self._inner.fork(new Zone['TaskTrackingZoneSpec']); } if (enableLongStackTrace && Zone['longStackTraceZoneSpec']) { self._inner = self._inner.fork(Zone['longStackTraceZoneSpec']); } // if shouldCoalesceRunChangeDetection is true, all tasks including event tasks will be // coalesced, so shouldCoalesceEventChangeDetection option is not necessary and can be skipped. self.shouldCoalesceEventChangeDetection = !shouldCoalesceRunChangeDetection && shouldCoalesceEventChangeDetection; self.shouldCoalesceRunChangeDetection = shouldCoalesceRunChangeDetection; self.lastRequestAnimationFrameId = -1; self.nativeRequestAnimationFrame = getNativeRequestAnimationFrame().nativeRequestAnimationFrame; forkInnerZoneWithAngularBehavior(self); } static isInAngularZone() { // Zone needs to be checked, because this method might be called even when NoopNgZone is used. return typeof Zone !== 'undefined' && Zone.current.get('isAngularZone') === true; } static assertInAngularZone() { if (!NgZone.isInAngularZone()) { throw new RuntimeError(909 /* RuntimeErrorCode.UNEXPECTED_ZONE_STATE */, ngDevMode && 'Expected to be in Angular Zone, but it is not!'); } } static assertNotInAngularZone() { if (NgZone.isInAngularZone()) { throw new RuntimeError(909 /* RuntimeErrorCode.UNEXPECTED_ZONE_STATE */, ngDevMode && 'Expected to not be in Angular Zone, but it is!'); } } /** * Executes the `fn` function synchronously within the Angular zone and returns value returned by * the function. * * Running functions via `run` allows you to reenter Angular zone from a task that was executed * outside of the Angular zone (typically started via {@link #runOutsideAngular}). * * Any future tasks or microtasks scheduled from within this function will continue executing from * within the Angular zone. * * If a synchronous error happens it will be rethrown and not reported via `onError`. */ run(fn, applyThis, applyArgs) { return this._inner.run(fn, applyThis, applyArgs); } /** * Executes the `fn` function synchronously within the Angular zone as a task and returns value * returned by the function. * * Running functions via `run` allows you to reenter Angular zone from a task that was executed * outside of the Angular zone (typically started via {@link #runOutsideAngular}). * * Any future tasks or microtasks scheduled from within this function will continue executing from * within the Angular zone. * * If a synchronous error happens it will be rethrown and not reported via `onError`. */ runTask(fn, applyThis, applyArgs, name) { const zone = this._inner; const task = zone.scheduleEventTask('NgZoneEvent: ' + name, fn, EMPTY_PAYLOAD, noop, noop); try { return zone.runTask(task, applyThis, applyArgs); } finally { zone.cancelTask(task); } } /** * Same as `run`, except that synchronous errors are caught and forwarded via `onError` and not * rethrown. */ runGuarded(fn, applyThis, applyArgs) { return this._inner.runGuarded(fn, applyThis, applyArgs); } /** * Executes the `fn` function synchronously in Angular's parent zone and returns value returned by * the function. * * Running functions via {@link #runOutsideAngular} allows you to escape Angular's zone and do * work that * doesn't trigger Angular change-detection or is subject to Angular's error handling. * * Any future tasks or microtasks scheduled from within this function will continue executing from * outside of the Angular zone. * * Use {@link #run} to reenter the Angular zone and do work that updates the application model. */ runOutsideAngular(fn) { return this._outer.run(fn); } } exports('NgZone', NgZone); const EMPTY_PAYLOAD = {}; function checkStable(zone) { // TODO: @JiaLiPassion, should check zone.isCheckStableRunning to prevent // re-entry. The case is: // // @Component({...}) // export class AppComponent { // constructor(private ngZone: NgZone) { // this.ngZone.onStable.subscribe(() => { // this.ngZone.run(() => console.log('stable');); // }); // } // // The onStable subscriber run another function inside ngZone // which causes `checkStable()` re-entry. // But this fix causes some issues in g3, so this fix will be // launched in another PR. if (zone._nesting == 0 && !zone.hasPendingMicrotasks && !zone.isStable) { try { zone._nesting++; zone.onMicrotaskEmpty.emit(null); } finally { zone._nesting--; if (!zone.hasPendingMicrotasks) { try { zone.runOutsideAngular(() => zone.onStable.emit(null)); } finally { zone.isStable = true; } } } } } function delayChangeDetectionForEvents(zone) { /** * We also need to check _nesting here * Consider the following case with shouldCoalesceRunChangeDetection = true * * ngZone.run(() => {}); * ngZone.run(() => {}); * * We want the two `ngZone.run()` only trigger one change detection * when shouldCoalesceRunChangeDetection is true. * And because in this case, change detection run in async way(requestAnimationFrame), * so we also need to check the _nesting here to prevent multiple * change detections. */ if (zone.isCheckStableRunning || zone.lastRequestAnimationFrameId !== -1) { return; } zone.lastRequestAnimationFrameId = zone.nativeRequestAnimationFrame.call(_global, () => { // This is a work around for https://github.com/angular/angular/issues/36839. // The core issue is that when event coalescing is enabled it is possible for microtasks // to get flushed too early (As is the case with `Promise.then`) between the // coalescing eventTasks. // // To workaround this we schedule a "fake" eventTask before we process the // coalescing eventTasks. The benefit of this is that the "fake" container eventTask // will prevent the microtasks queue from getting drained in between the coalescing // eventTask execution. if (!zone.fakeTopEventTask) { zone.fakeTopEventTask = Zone.root.scheduleEventTask('fakeTopEventTask', () => { zone.lastRequestAnimationFrameId = -1; updateMicroTaskStatus(zone); zone.isCheckStableRunning = true; checkStable(zone); zone.isCheckStableRunning = false; }, undefined, () => { }, () => { }); } zone.fakeTopEventTask.invoke(); }); updateMicroTaskStatus(zone); } function forkInnerZoneWithAngularBehavior(zone) { const delayChangeDetectionForEventsDelegate = () => { delayChangeDetectionForEvents(zone); }; zone._inner = zone._inner.fork({ name: 'angular', properties: { 'isAngularZone': true }, onInvokeTask: (delegate, current, target, task, applyThis, applyArgs) => { try { onEnter(zone); return delegate.invokeTask(target, task, applyThis, applyArgs); } finally { if ((zone.shouldCoalesceEventChangeDetection && task.type === 'eventTask') || zone.shouldCoalesceRunChangeDetection) { delayChangeDetectionForEventsDelegate(); } onLeave(zone); } }, onInvoke: (delegate, current, target, callback, applyThis, applyArgs, source) => { try { onEnter(zone); return delegate.invoke(target, callback, applyThis, applyArgs, source); } finally { if (zone.shouldCoalesceRunChangeDetection) { delayChangeDetectionForEventsDelegate(); } onLeave(zone); } }, onHasTask: (delegate, current, target, hasTaskState) => { delegate.hasTask(target, hasTaskState); if (current === target) { // We are only interested in hasTask events which originate from our zone // (A child hasTask event is not interesting to us) if (hasTaskState.change == 'microTask') { zone._hasPendingMicrotasks = hasTaskState.microTask; updateMicroTaskStatus(zone); checkStable(zone); } else if (hasTaskState.change == 'macroTask') { zone.hasPendingMacrotasks = hasTaskState.macroTask; } } }, onHandleError: (delegate, current, target, error) => { delegate.handleError(target, error); zone.runOutsideAngular(() => zone.onError.emit(error)); return false; } }); } function updateMicroTaskStatus(zone) { if (zone._hasPendingMicrotasks || ((zone.shouldCoalesceEventChangeDetection || zone.shouldCoalesceRunChangeDetection) && zone.lastRequestAnimationFrameId !== -1)) { zone.hasPendingMicrotasks = true; } else { zone.hasPendingMicrotasks = false; } } function onEnter(zone) { zone._nesting++; if (zone.isStable) { zone.isStable = false; zone.onUnstable.emit(null); } } function onLeave(zone) { zone._nesting--; checkStable(zone); } /** * Provides a noop implementation of `NgZone` which does nothing. This zone requires explicit calls * to framework to perform rendering. */ class NoopNgZone { constructor() { this.hasPendingMicrotasks = false; this.hasPendingMacrotasks = false; this.isStable = true; this.onUnstable = new EventEmitter(); this.onMicrotaskEmpty = new EventEmitter(); this.onStable = new EventEmitter(); this.onError = new EventEmitter(); } run(fn, applyThis, applyArgs) { return fn.apply(applyThis, applyArgs); } runGuarded(fn, applyThis, applyArgs) { return fn.apply(applyThis, applyArgs); } runOutsideAngular(fn) { return fn(); } runTask(fn, applyThis, applyArgs, name) { return fn.apply(applyThis, applyArgs); } } exports('ÉµNoopNgZone', NoopNgZone); /** * Token used to drive ApplicationRef.isStable * * TODO: This should be moved entirely to NgZone (as a breaking change) so it can be tree-shakeable * for `NoopNgZone` which is always just an `Observable` of `true`. Additionally, we should consider * whether the property on `NgZone` should be `Observable` or `Signal`. */ const ZONE_IS_STABLE_OBSERVABLE = new InjectionToken(ngDevMode ? 'isStable Observable' : '', { providedIn: 'root', // TODO(atscott): Replace this with a suitable default like `new // BehaviorSubject(true).asObservable`. Again, long term this won't exist on ApplicationRef at // all but until we can remove it, we need a default value zoneless. factory: isStableFactory, }); function isStableFactory() { const zone = inject(NgZone); let _stable = true; const isCurrentlyStable = new Observable((observer) => { _stable = zone.isStable && !zone.hasPendingMacrotasks && !zone.hasPendingMicrotasks; zone.runOutsideAngular(() => { observer.next(_stable); observer.complete(); }); }); const isStable = new Observable((observer) => { // Create the subscription to onStable outside the Angular Zone so that // the callback is run outside the Angular Zone. let stableSub; zone.runOutsideAngular(() => { stableSub = zone.onStable.subscribe(() => { NgZone.assertNotInAngularZone(); // Check whether there are no pending macro/micro tasks in the next tick // to allow for NgZone to update the state. scheduleMicroTask(() => { if (!_stable && !zone.hasPendingMacrotasks && !zone.hasPendingMicrotasks) { _stable = true; observer.next(true); } }); }); }); const unstableSub = zone.onUnstable.subscribe(() => { NgZone.assertInAngularZone(); if (_stable) { _stable = false; zone.runOutsideAngular(() => { observer.next(false); }); } }); return () => { stableSub.unsubscribe(); unstableSub.unsubscribe(); }; }); return merge$1(isCurrentlyStable, isStable.pipe(share())); } /** * Internal injection token that can used to access an instance of a Testability class. * * This token acts as a bridge between the core bootstrap code and the `Testability` class. This is * needed to ensure that there are no direct references to the `Testability` class, so it can be * tree-shaken away (if not referenced). For the environments/setups when the `Testability` class * should be available, this token is used to add a provider that references the `Testability` * class. Otherwise, only this token is retained in a bundle, but the `Testability` class is not. */ const TESTABILITY = exports('ÉµTESTABILITY', new InjectionToken('')); /** * Internal injection token to retrieve Testability getter class instance. */ const TESTABILITY_GETTER = exports('ÉµTESTABILITY_GETTER', new InjectionToken('')); /** * The Testability service provides testing hooks that can be accessed from * the browser. * * Angular applications bootstrapped using an NgModule (via `@NgModule.bootstrap` field) will also * instantiate Testability by default (in both development and production modes). * * For applications bootstrapped using the `bootstrapApplication` function, Testability is not * included by default. You can include it into your applications by getting the list of necessary * providers using the `provideProtractorTestingSupport()` function and adding them into the * `options.providers` array. Example: * * ```typescript * import {provideProtractorTestingSupport} from '@angular/platform-browser'; * * await bootstrapApplication(RootComponent, providers: [provideProtractorTestingSupport()]); * ``` * * @publicApi */ class Testability { constructor(_ngZone, registry, testabilityGetter) { this._ngZone = _ngZone; this.registry = registry; this._pendingCount = 0; this._isZoneStable = true; /** * Whether any work was done since the last 'whenStable' callback. This is * useful to detect if this could have potentially destabilized another * component while it is stabilizing. * @internal */ this._didWork = false; this._callbacks = []; this.taskTrackingZone = null; // If there was no Testability logic registered in the global scope // before, register the current testability getter as a global one. if (!_testabilityGetter) { setTestabilityGetter(testabilityGetter); testabilityGetter.addToWindow(registry); } this._watchAngularEvents(); _ngZone.run(() => { this.taskTrackingZone = typeof Zone == 'undefined' ? null : Zone.current.get('TaskTrackingZone'); }); } _watchAngularEvents() { this._ngZone.onUnstable.subscribe({ next: () => { this._didWork = true; this._isZoneStable = false; } }); this._ngZone.runOutsideAngular(() => { this._ngZone.onStable.subscribe({ next: () => { NgZone.assertNotInAngularZone(); scheduleMicroTask(() => { this._isZoneStable = true; this._runCallbacksIfReady(); }); } }); }); } /** * Increases the number of pending request * @deprecated pending requests are now tracked with zones. */ increasePendingRequestCount() { this._pendingCount += 1; this._didWork = true; return this._pendingCount; } /** * Decreases the number of pending request * @deprecated pending requests are now tracked with zones */ decreasePendingRequestCount() { this._pendingCount -= 1; if (this._pendingCount < 0) { throw new Error('pending async requests below zero'); } this._runCallbacksIfReady(); return this._pendingCount; } /** * Whether an associated application is stable */ isStable() { return this._isZoneStable && this._pendingCount === 0 && !this._ngZone.hasPendingMacrotasks; } _runCallbacksIfReady() { if (this.isStable()) { // Schedules the call backs in a new frame so that it is always async. scheduleMicroTask(() => { while (this._callbacks.length !== 0) { let cb = this._callbacks.pop(); clearTimeout(cb.timeoutId); cb.doneCb(this._didWork); } this._didWork = false; }); } else { // Still not stable, send updates. let pending = this.getPendingTasks(); this._callbacks = this._callbacks.filter((cb) => { if (cb.updateCb && cb.updateCb(pending)) { clearTimeout(cb.timeoutId); return false; } return true; }); this._didWork = true; } } getPendingTasks() { if (!this.taskTrackingZone) { return []; } // Copy the tasks data so that we don't leak tasks. return this.taskTrackingZone.macroTasks.map((t) => { return { source: t.source, // From TaskTrackingZone: // https://github.com/angular/zone.js/blob/master/lib/zone-spec/task-tracking.ts#L40 creationLocation: t.creationLocation, data: t.data }; }); } addCallback(cb, timeout, updateCb) { let timeoutId = -1; if (timeout && timeout > 0) { timeoutId = setTimeout(() => { this._callbacks = this._callbacks.filter((cb) => cb.timeoutId !== timeoutId); cb(this._didWork, this.getPendingTasks()); }, timeout); } this._callbacks.push({ doneCb: cb, timeoutId: timeoutId, updateCb: updateCb }); } /** * Wait for the application to be stable with a timeout. If the timeout is reached before that * happens, the callback receives a list of the macro tasks that were pending, otherwise null. * * @param doneCb The callback to invoke when Angular is stable or the timeout expires * whichever comes first. * @param timeout Optional. The maximum time to wait for Angular to become stable. If not * specified, whenStable() will wait forever. * @param updateCb Optional. If specified, this callback will be invoked whenever the set of * pending macrotasks changes. If this callback returns true doneCb will not be invoked * and no further updates will be issued. */ whenStable(doneCb, timeout, updateCb) { if (updateCb && !this.taskTrackingZone) { throw new Error('Task tracking zone is required when passing an update callback to ' + 'whenStable(). Is "zone.js/plugins/task-tracking" loaded?'); } // These arguments are 'Function' above to keep the public API simple. this.addCallback(doneCb, timeout, updateCb); this._runCallbacksIfReady(); } /** * Get the number of pending requests * @deprecated pending requests are now tracked with zones */ getPendingRequestCount() { return this._pendingCount; } /** * Registers an application with a testability hook so that it can be tracked. * @param token token of application, root element * * @internal */ registerApplication(token) { this.registry.registerApplication(token, this); } /** * Unregisters an application. * @param token token of application, root element * * @internal */ unregisterApplication(token) { this.registry.unregisterApplication(token); } /** * Find providers by name * @param using The root element to search from * @param provider The name of binding variable * @param exactMatch Whether using exactMatch */ findProviders(using, provider, exactMatch) { // TODO(juliemr): implement. return []; } static { this.Éµfac = function Testability_Factory(t) { return new (t || Testability)(ÉµÉµinject(NgZone), ÉµÉµinject(TestabilityRegistry), ÉµÉµinject(TESTABILITY_GETTER)); }; } static { this.Éµprov = /*@__PURE__*/ ÉµÉµdefineInjectable({ token: Testability, factory: Testability.Éµfac }); } } exports('Testability', Testability); (function () { (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(Testability, [{ type: Injectable }], function () { return [{ type: NgZone }, { type: TestabilityRegistry }, { type: undefined, decorators: [{ type: Inject, args: [TESTABILITY_GETTER] }] }]; }, null); })(); /** * A global registry of {@link Testability} instances for specific elements. * @publicApi */ class TestabilityRegistry { constructor() { /** @internal */ this._applications = new Map(); } /** * Registers an application with a testability hook so that it can be tracked * @param token token of application, root element * @param testability Testability hook */ registerApplication(token, testability) { this._applications.set(token, testability); } /** * Unregisters an application. * @param token token of application, root element */ unregisterApplication(token) { this._applications.delete(token); } /** * Unregisters all applications */ unregisterAllApplications() { this._applications.clear(); } /** * Get a testability hook associated with the application * @param elem root element */ getTestability(elem) { return this._applications.get(elem) || null; } /** * Get all registered testabilities */ getAllTestabilities() { return Array.from(this._applications.values()); } /** * Get all registered applications(root elements) */ getAllRootElements() { return Array.from(this._applications.keys()); } /** * Find testability of a node in the Tree * @param elem node * @param findInAncestors whether finding testability in ancestors if testability was not found in * current node */ findTestabilityInTree(elem, findInAncestors = true) { return _testabilityGetter?.findTestabilityInTree(this, elem, findInAncestors) ?? null; } static { this.Éµfac = function TestabilityRegistry_Factory(t) { return new (t || TestabilityRegistry)(); }; } static { this.Éµprov = /*@__PURE__*/ ÉµÉµdefineInjectable({ token: TestabilityRegistry, factory: TestabilityRegistry.Éµfac, providedIn: 'platform' }); } } exports('TestabilityRegistry', TestabilityRegistry); (function () { (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(TestabilityRegistry, [{ type: Injectable, args: [{ providedIn: 'platform' }] }], null, null); })(); /** * Set the {@link GetTestability} implementation used by the Angular testing framework. * @publicApi */ function setTestabilityGetter(getter) { _testabilityGetter = getter; } let _testabilityGetter; let _platformInjector = null; /** * Internal token to indicate whether having multiple bootstrapped platform should be allowed (only * one bootstrapped platform is allowed by default). This token helps to support SSR scenarios. */ const ALLOW_MULTIPLE_PLATFORMS = exports('ÉµALLOW_MULTIPLE_PLATFORMS', new InjectionToken('AllowMultipleToken')); /** * Internal token that allows to register extra callbacks that should be invoked during the * `PlatformRef.destroy` operation. This token is needed to avoid a direct reference to the * `PlatformRef` class (i.e. register the callback via `PlatformRef.onDestroy`), thus making the * entire class tree-shakeable. */ const PLATFORM_DESTROY_LISTENERS = new InjectionToken('PlatformDestroyListeners'); /** * A [DI token](guide/glossary#di-token "DI token definition") that provides a set of callbacks to * be called for every component that is bootstrapped. * * Each callback must take a `ComponentRef` instance and return nothing. * * `(componentRef: ComponentRef) => void` * * @publicApi */ const APP_BOOTSTRAP_LISTENER = exports('APP_BOOTSTRAP_LISTENER', new InjectionToken('appBootstrapListener')); function compileNgModuleFactory(injector, options, moduleType) { ngDevMode && assertNgModuleType(moduleType); const moduleFactory = new NgModuleFactory(moduleType); // All of the logic below is irrelevant for AOT-compiled code. if (typeof ngJitMode !== 'undefined' && !ngJitMode) { return Promise.resolve(moduleFactory); } const compilerOptions = injector.get(COMPILER_OPTIONS, []).concat(options); // Configure the compiler to use the provided options. This call may fail when multiple modules // are bootstrapped with incompatible options, as a component can only be compiled according to // a single set of options. setJitOptions({ defaultEncapsulation: _lastDefined(compilerOptions.map(opts => opts.defaultEncapsulation)), preserveWhitespaces: _lastDefined(compilerOptions.map(opts => opts.preserveWhitespaces)), }); if (isComponentResourceResolutionQueueEmpty()) { return Promise.resolve(moduleFactory); } const compilerProviders = compilerOptions.flatMap((option) => option.providers ?? []); // In case there are no compiler providers, we just return the module factory as // there won't be any resource loader. This can happen with Ivy, because AOT compiled // modules can be still passed through "bootstrapModule". In that case we shouldn't // unnecessarily require the JIT compiler. if (compilerProviders.length === 0) { return Promise.resolve(moduleFactory); } const compiler = getCompilerFacade({ usage: 0 /* JitCompilerUsage.Decorator */, kind: 'NgModule', type: moduleType, }); const compilerInjector = Injector.create({ providers: compilerProviders }); const resourceLoader = compilerInjector.get(compiler.ResourceLoader); // The resource loader can also return a string while the "resolveComponentResources" // always expects a promise. Therefore we need to wrap the returned value in a promise. return resolveComponentResources(url => Promise.resolve(resourceLoader.get(url))) .then(() => moduleFactory); } function publishDefaultGlobalUtils() { ngDevMode && publishDefaultGlobalUtils$1(); } /** * Sets the error for an invalid write to a signal to be an Angular `RuntimeError`. */ function publishSignalConfiguration() { setThrowInvalidWriteToSignalError(() => { throw new RuntimeError(600 /* RuntimeErrorCode.SIGNAL_WRITE_FROM_ILLEGAL_CONTEXT */, ngDevMode && 'Writing to signals is not allowed in a `computed` or an `effect` by default. ' + 'Use `allowSignalWrites` in the `CreateEffectOptions` to enable this inside effects.'); }); } function isBoundToModule(cf) { return cf.isBoundToModule; } /** * A token for third-party components that can register themselves with NgProbe. * * @publicApi */ class NgProbeToken { constructor(name, token) { this.name = name; this.token = token; } } exports('NgProbeToken', NgProbeToken); /** * Creates a platform. * Platforms must be created on launch using this function. * * @publicApi */ function createPlatform(injector) { if (_platformInjector && !_platformInjector.get(ALLOW_MULTIPLE_PLATFORMS, false)) { throw new RuntimeError(400 /* RuntimeErrorCode.MULTIPLE_PLATFORMS */, ngDevMode && 'There can be only one platform. Destroy the previous one to create a new one.'); } publishDefaultGlobalUtils(); publishSignalConfiguration(); _platformInjector = injector; const platform = injector.get(PlatformRef); runPlatformInitializers(injector); return platform; } /** * The goal of this function is to bootstrap a platform injector, * but avoid referencing `PlatformRef` class. * This function is needed for bootstrapping a Standalone Component. */ function createOrReusePlatformInjector(providers = []) { // If a platform injector already exists, it means that the platform // is already bootstrapped and no additional actions are required. if (_platformInjector) return _platformInjector; // Otherwise, setup a new platform injector and run platform initializers. const injector = createPlatformInjector(providers); _platformInjector = injector; publishDefaultGlobalUtils(); publishSignalConfiguration(); runPlatformInitializers(injector); return injector; } function runPlatformInitializers(injector) { const inits = injector.get(PLATFORM_INITIALIZER, null); inits?.forEach((init) => init()); } /** * Internal create application API that implements the core application creation logic and optional * bootstrap logic. * * Platforms (such as `platform-browser`) may require different set of application and platform * providers for an application to function correctly. As a result, platforms may use this function * internally and supply the necessary providers during the bootstrap, while exposing * platform-specific APIs as a part of their public API. * * @returns A promise that returns an `ApplicationRef` instance once resolved. */ function internalCreateApplication(config) { try { const { rootComponent, appProviders, platformProviders } = config; if ((typeof ngDevMode === 'undefined' || ngDevMode) && rootComponent !== undefined) { assertStandaloneComponentType(rootComponent); } const platformInjector = createOrReusePlatformInjector(platformProviders); // Create root application injector based on a set of providers configured at the platform // bootstrap level as well as providers passed to the bootstrap call by a user. const allAppProviders = [ provideZoneChangeDetection(), ...(appProviders || []), ]; const adapter = new EnvironmentNgModuleRefAdapter({ providers: allAppProviders, parent: platformInjector, debugName: (typeof ngDevMode === 'undefined' || ngDevMode) ? 'Environment Injector' : '', // We skip environment initializers because we need to run them inside the NgZone, which // happens after we get the NgZone instance from the Injector. runEnvironmentInitializers: false, }); const envInjector = adapter.injector; const ngZone = envInjector.get(NgZone); return ngZone.run(() => { envInjector.resolveInjectorInitializers(); const exceptionHandler = envInjector.get(ErrorHandler, null); if ((typeof ngDevMode === 'undefined' || ngDevMode) && !exceptionHandler) { throw new RuntimeError(402 /* RuntimeErrorCode.MISSING_REQUIRED_INJECTABLE_IN_BOOTSTRAP */, 'No `ErrorHandler` found in the Dependency Injection tree.'); } let onErrorSubscription; ngZone.runOutsideAngular(() => { onErrorSubscription = ngZone.onError.subscribe({ next: (error) => { exceptionHandler.handleError(error); } }); }); // If the whole platform is destroyed, invoke the `destroy` method // for all bootstrapped applications as well. const destroyListener = () => envInjector.destroy(); const onPlatformDestroyListeners = platformInjector.get(PLATFORM_DESTROY_LISTENERS); onPlatformDestroyListeners.add(destroyListener); envInjector.onDestroy(() => { onErrorSubscription.unsubscribe(); onPlatformDestroyListeners.delete(destroyListener); }); return _callAndReportToErrorHandler(exceptionHandler, ngZone, () => { const initStatus = envInjector.get(ApplicationInitStatus); initStatus.runInitializers(); return initStatus.donePromise.then(() => { const localeId = envInjector.get(LOCALE_ID, DEFAULT_LOCALE_ID); setLocaleId(localeId || DEFAULT_LOCALE_ID); const appRef = envInjector.get(ApplicationRef); if (rootComponent !== undefined) { appRef.bootstrap(rootComponent); } return appRef; }); }); }); } catch (e) { return Promise.reject(e); } } /** * Creates a factory for a platform. Can be used to provide or override `Providers` specific to * your application's runtime needs, such as `PLATFORM_INITIALIZER` and `PLATFORM_ID`. * @param parentPlatformFactory Another platform factory to modify. Allows you to compose factories * to build up configurations that might be required by different libraries or parts of the * application. * @param name Identifies the new platform factory. * @param providers A set of dependency providers for platforms created with the new factory. * * @publicApi */ function createPlatformFactory(parentPlatformFactory, name, providers = []) { const desc = `Platform: ${name}`; const marker = new InjectionToken(desc); return (extraProviders = []) => { let platform = getPlatform(); if (!platform || platform.injector.get(ALLOW_MULTIPLE_PLATFORMS, false)) { const platformProviders = [ ...providers, ...extraProviders, { provide: marker, useValue: true } ]; if (parentPlatformFactory) { parentPlatformFactory(platformProviders); } else { createPlatform(createPlatformInjector(platformProviders, desc)); } } return assertPlatform(marker); }; } /** * Checks that there is currently a platform that contains the given token as a provider. * * @publicApi */ function assertPlatform(requiredToken) { const platform = getPlatform(); if (!platform) { throw new RuntimeError(401 /* RuntimeErrorCode.PLATFORM_NOT_FOUND */, ngDevMode && 'No platform exists!'); } if ((typeof ngDevMode === 'undefined' || ngDevMode) && !platform.injector.get(requiredToken, null)) { throw new RuntimeError(400 /* RuntimeErrorCode.MULTIPLE_PLATFORMS */, 'A platform with a different configuration has been created. Please destroy it first.'); } return platform; } /** * Helper function to create an instance of a platform injector (that maintains the 'platform' * scope). */ function createPlatformInjector(providers = [], name) { return Injector.create({ name, providers: [ { provide: INJECTOR_SCOPE, useValue: 'platform' }, { provide: PLATFORM_DESTROY_LISTENERS, useValue: new Set([() => _platformInjector = null]) }, ...providers ], }); } /** * Destroys the current Angular platform and all Angular applications on the page. * Destroys all modules and listeners registered with the platform. * * @publicApi */ function destroyPlatform() { getPlatform()?.destroy(); } /** * Returns the current platform. * * @publicApi */ function getPlatform() { return _platformInjector?.get(PlatformRef) ?? null; } /** * The Angular platform is the entry point for Angular on a web page. * Each page has exactly one platform. Services (such as reflection) which are common * to every Angular application running on the page are bound in its scope. * A page's platform is initialized implicitly when a platform is created using a platform * factory such as `PlatformBrowser`, or explicitly by calling the `createPlatform()` function. * * @publicApi */ class PlatformRef { /** @internal */ constructor(_injector) { this._injector = _injector; this._modules = []; this._destroyListeners = []; this._destroyed = false; } /** * Creates an instance of an `@NgModule` for the given platform. * * @deprecated Passing NgModule factories as the `PlatformRef.bootstrapModuleFactory` function * argument is deprecated. Use the `PlatformRef.bootstrapModule` API instead. */ bootstrapModuleFactory(moduleFactory, options) { // Note: We need to create the NgZone _before_ we instantiate the module, // as instantiating the module creates some providers eagerly. // So we create a mini parent injector that just contains the new NgZone and // pass that as parent to the NgModuleFactory. const ngZone = getNgZone(options?.ngZone, getNgZoneOptions({ eventCoalescing: options?.ngZoneEventCoalescing, runCoalescing: options?.ngZoneRunCoalescing })); // Note: Create ngZoneInjector within ngZone.run so that all of the instantiated services are // created within the Angular zone // Do not try to replace ngZone.run with ApplicationRef#run because ApplicationRef would then be // created outside of the Angular zone. return ngZone.run(() => { const moduleRef = createNgModuleRefWithProviders(moduleFactory.moduleType, this.injector, internalProvideZoneChangeDetection(() => ngZone)); if ((typeof ngDevMode === 'undefined' || ngDevMode) && moduleRef.injector.get(PROVIDED_NG_ZONE, null) !== null) { throw new RuntimeError(207 /* RuntimeErrorCode.PROVIDER_IN_WRONG_CONTEXT */, '`bootstrapModule` does not support `provideZoneChangeDetection`. Use `BootstrapOptions` instead.'); } const exceptionHandler = moduleRef.injector.get(ErrorHandler, null); if ((typeof ngDevMode === 'undefined' || ngDevMode) && exceptionHandler === null) { throw new RuntimeError(402 /* RuntimeErrorCode.MISSING_REQUIRED_INJECTABLE_IN_BOOTSTRAP */, 'No ErrorHandler. Is platform module (BrowserModule) included?'); } ngZone.runOutsideAngular(() => { const subscription = ngZone.onError.subscribe({ next: (error) => { exceptionHandler.handleError(error); } }); moduleRef.onDestroy(() => { remove(this._modules, moduleRef); subscription.unsubscribe(); }); }); return _callAndReportToErrorHandler(exceptionHandler, ngZone, () => { const initStatus = moduleRef.injector.get(ApplicationInitStatus); initStatus.runInitializers(); return initStatus.donePromise.then(() => { // If the `LOCALE_ID` provider is defined at bootstrap then we set the value for ivy const localeId = moduleRef.injector.get(LOCALE_ID, DEFAULT_LOCALE_ID); setLocaleId(localeId || DEFAULT_LOCALE_ID); this._moduleDoBootstrap(moduleRef); return moduleRef; }); }); }); } /** * Creates an instance of an `@NgModule` for a given platform. * * @usageNotes * ### Simple Example * * ```typescript * @NgModule({ * imports: [BrowserModule] * }) * class MyModule {} * * let moduleRef = platformBrowser().bootstrapModule(MyModule); * ``` * */ bootstrapModule(moduleType, compilerOptions = []) { const options = optionsReducer({}, compilerOptions); return compileNgModuleFactory(this.injector, options, moduleType) .then(moduleFactory => this.bootstrapModuleFactory(moduleFactory, options)); } _moduleDoBootstrap(moduleRef) { const appRef = moduleRef.injector.get(ApplicationRef); if (moduleRef._bootstrapComponents.length > 0) { moduleRef._bootstrapComponents.forEach(f => appRef.bootstrap(f)); } else if (moduleRef.instance.ngDoBootstrap) { moduleRef.instance.ngDoBootstrap(appRef); } else { throw new RuntimeError(-403 /* RuntimeErrorCode.BOOTSTRAP_COMPONENTS_NOT_FOUND */, ngDevMode && `The module ${stringify(moduleRef.instance.constructor)} was bootstrapped, ` + `but it does not declare "@NgModule.bootstrap" components nor a "ngDoBootstrap" method. ` + `Please define one of these.`); } this._modules.push(moduleRef); } /** * Registers a listener to be called when the platform is destroyed. */ onDestroy(callback) { this._destroyListeners.push(callback); } /** * Retrieves the platform {@link Injector}, which is the parent injector for * every Angular application on the page and provides singleton providers. */ get injector() { return this._injector; } /** * Destroys the current Angular platform and all Angular applications on the page. * Destroys all modules and listeners registered with the platform. */ destroy() { if (this._destroyed) { throw new RuntimeError(404 /* RuntimeErrorCode.PLATFORM_ALREADY_DESTROYED */, ngDevMode && 'The platform has already been destroyed!'); } this._modules.slice().forEach(module => module.destroy()); this._destroyListeners.forEach(listener => listener()); const destroyListeners = this._injector.get(PLATFORM_DESTROY_LISTENERS, null); if (destroyListeners) { destroyListeners.forEach(listener => listener()); destroyListeners.clear(); } this._destroyed = true; } /** * Indicates whether this instance was destroyed. */ get destroyed() { return this._destroyed; } static { this.Éµfac = function PlatformRef_Factory(t) { return new (t || PlatformRef)(ÉµÉµinject(Injector)); }; } static { this.Éµprov = /*@__PURE__*/ ÉµÉµdefineInjectable({ token: PlatformRef, factory: PlatformRef.Éµfac, providedIn: 'platform' }); } } exports('PlatformRef', PlatformRef); (function () { (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(PlatformRef, [{ type: Injectable, args: [{ providedIn: 'platform' }] }], function () { return [{ type: Injector }]; }, null); })(); // Transforms a set of `BootstrapOptions` (supported by the NgModule-based bootstrap APIs) -> // `NgZoneOptions` that are recognized by the NgZone constructor. Passing no options will result in // a set of default options returned. function getNgZoneOptions(options) { return { enableLongStackTrace: typeof ngDevMode === 'undefined' ? false : !!ngDevMode, shouldCoalesceEventChangeDetection: options?.eventCoalescing ?? false, shouldCoalesceRunChangeDetection: options?.runCoalescing ?? false, }; } function getNgZone(ngZoneToUse = 'zone.js', options) { if (ngZoneToUse === 'noop') { return new NoopNgZone(); } if (ngZoneToUse === 'zone.js') { return new NgZone(options); } return ngZoneToUse; } function _callAndReportToErrorHandler(errorHandler, ngZone, callback) { try { const result = callback(); if (isPromise(result)) { return result.catch((e) => { ngZone.runOutsideAngular(() => errorHandler.handleError(e)); // rethrow as the exception handler might not do it throw e; }); } return result; } catch (e) { ngZone.runOutsideAngular(() => errorHandler.handleError(e)); // rethrow as the exception handler might not do it throw e; } } function optionsReducer(dst, objs) { if (Array.isArray(objs)) { return objs.reduce(optionsReducer, dst); } return { ...dst, ...objs }; } /** * A reference to an Angular application running on a page. * * @usageNotes * {@a is-stable-examples} * ### isStable examples and caveats * * Note two important points about `isStable`, demonstrated in the examples below: * - the application will never be stable if you start any kind * of recurrent asynchronous task when the application starts * (for example for a polling process, started with a `setInterval`, a `setTimeout` * or using RxJS operators like `interval`); * - the `isStable` Observable runs outside of the Angular zone. * * Let's imagine that you start a recurrent task * (here incrementing a counter, using RxJS `interval`), * and at the same time subscribe to `isStable`. * * ``` * constructor(appRef: ApplicationRef) { * appRef.isStable.pipe( * filter(stable => stable) * ).subscribe(() => console.log('App is stable now'); * interval(1000).subscribe(counter => console.log(counter)); * } * ``` * In this example, `isStable` will never emit `true`, * and the trace "App is stable now" will never get logged. * * If you want to execute something when the app is stable, * you have to wait for the application to be stable * before starting your polling process. * * ``` * constructor(appRef: ApplicationRef) { * appRef.isStable.pipe( * first(stable => stable), * tap(stable => console.log('App is stable now')), * switchMap(() => interval(1000)) * ).subscribe(counter => console.log(counter)); * } * ``` * In this example, the trace "App is stable now" will be logged * and then the counter starts incrementing every second. * * Note also that this Observable runs outside of the Angular zone, * which means that the code in the subscription * to this Observable will not trigger the change detection. * * Let's imagine that instead of logging the counter value, * you update a field of your component * and display it in its template. * * ``` * constructor(appRef: ApplicationRef) { * appRef.isStable.pipe( * first(stable => stable), * switchMap(() => interval(1000)) * ).subscribe(counter => this.value = counter); * } * ``` * As the `isStable` Observable runs outside the zone, * the `value` field will be updated properly, * but the template will not be refreshed! * * You'll have to manually trigger the change detection to update the template. * * ``` * constructor(appRef: ApplicationRef, cd: ChangeDetectorRef) { * appRef.isStable.pipe( * first(stable => stable), * switchMap(() => interval(1000)) * ).subscribe(counter => { * this.value = counter; * cd.detectChanges(); * }); * } * ``` * * Or make the subscription callback run inside the zone. * * ``` * constructor(appRef: ApplicationRef, zone: NgZone) { * appRef.isStable.pipe( * first(stable => stable), * switchMap(() => interval(1000)) * ).subscribe(counter => zone.run(() => this.value = counter)); * } * ``` * * @publicApi */ class ApplicationRef { constructor() { /** @internal */ this._bootstrapListeners = []; this._runningTick = false; this._destroyed = false; this._destroyListeners = []; /** @internal */ this._views = []; this.internalErrorHandler = inject(INTERNAL_APPLICATION_ERROR_HANDLER); this.zoneIsStable = inject(ZONE_IS_STABLE_OBSERVABLE); /** * Get a list of component types registered to this application. * This list is populated even before the component is created. */ this.componentTypes = []; /** * Get a list of components registered to this application. */ this.components = []; /** * Returns an Observable that indicates when the application is stable or unstable. */ this.isStable = inject(InitialRenderPendingTasks) .hasPendingTasks.pipe(switchMap(hasPendingTasks => hasPendingTasks ? of(false) : this.zoneIsStable), distinctUntilChanged(), share()); this._injector = inject(EnvironmentInjector); } /** * Indicates whether this instance was destroyed. */ get destroyed() { return this._destroyed; } /** * The `EnvironmentInjector` used to create this application. */ get injector() { return this._injector; } /** * Bootstrap a component onto the element identified by its selector or, optionally, to a * specified element. * * @usageNotes * ### Bootstrap process * * When bootstrapping a component, Angular mounts it onto a target DOM element * and kicks off automatic change detection. The target DOM element can be * provided using the `rootSelectorOrNode` argument. * * If the target DOM element is not provided, Angular tries to find one on a page * using the `selector` of the component that is being bootstrapped * (first matched element is used). * * ### Example * * Generally, we define the component to bootstrap in the `bootstrap` array of `NgModule`, * but it requires us to know the component while writing the application code. * * Imagine a situation where we have to wait for an API call to decide about the component to * bootstrap. We can use the `ngDoBootstrap` hook of the `NgModule` and call this method to * dynamically bootstrap a component. * * {@example core/ts/platform/platform.ts region='componentSelector'} * * Optionally, a component can be mounted onto a DOM element that does not match the * selector of the bootstrapped component. * * In the following example, we are providing a CSS selector to match the target element. * * {@example core/ts/platform/platform.ts region='cssSelector'} * * While in this example, we are providing reference to a DOM node. * * {@example core/ts/platform/platform.ts region='domNode'} */ bootstrap(componentOrFactory, rootSelectorOrNode) { (typeof ngDevMode === 'undefined' || ngDevMode) && this.warnIfDestroyed(); const isComponentFactory = componentOrFactory instanceof ComponentFactory$1; const initStatus = this._injector.get(ApplicationInitStatus); if (!initStatus.done) { const standalone = !isComponentFactory && isStandalone(componentOrFactory); const errorMessage = 'Cannot bootstrap as there are still asynchronous initializers running.' + (standalone ? '' : ' Bootstrap components in the `ngDoBootstrap` method of the root module.'); throw new RuntimeError(405 /* RuntimeErrorCode.ASYNC_INITIALIZERS_STILL_RUNNING */, (typeof ngDevMode === 'undefined' || ngDevMode) && errorMessage); } let componentFactory; if (isComponentFactory) { componentFactory = componentOrFactory; } else { const resolver = this._injector.get(ComponentFactoryResolver$1); componentFactory = resolver.resolveComponentFactory(componentOrFactory); } this.componentTypes.push(componentFactory.componentType); // Create a factory associated with the current module if it's not bound to some other const ngModule = isBoundToModule(componentFactory) ? undefined : this._injector.get(NgModuleRef$1); const selectorOrNode = rootSelectorOrNode || componentFactory.selector; const compRef = componentFactory.create(Injector.NULL, [], selectorOrNode, ngModule); const nativeElement = compRef.location.nativeElement; const testability = compRef.injector.get(TESTABILITY, null); testability?.registerApplication(nativeElement); compRef.onDestroy(() => { this.detachView(compRef.hostView); remove(this.components, compRef); testability?.unregisterApplication(nativeElement); }); this._loadComponent(compRef); if (typeof ngDevMode === 'undefined' || ngDevMode) { const _console = this._injector.get(Console); _console.log(`Angular is running in development mode.`); } return compRef; } /** * Invoke this method to explicitly process change detection and its side-effects. * * In development mode, `tick()` also performs a second change detection cycle to ensure that no * further changes are detected. If additional changes are picked up during this second cycle, * bindings in the app have side-effects that cannot be resolved in a single change detection * pass. * In this case, Angular throws an error, since an Angular application can only have one change * detection pass during which all change detection must complete. */ tick() { (typeof ngDevMode === 'undefined' || ngDevMode) && this.warnIfDestroyed(); if (this._runningTick) { throw new RuntimeError(101 /* RuntimeErrorCode.RECURSIVE_APPLICATION_REF_TICK */, ngDevMode && 'ApplicationRef.tick is called recursively'); } try { this._runningTick = true; for (let view of this._views) { view.detectChanges(); } if (typeof ngDevMode === 'undefined' || ngDevMode) { for (let view of this._views) { view.checkNoChanges(); } } } catch (e) { // Attention: Don't rethrow as it could cancel subscriptions to Observables! this.internalErrorHandler(e); } finally { this._runningTick = false; } } /** * Attaches a view so that it will be dirty checked. * The view will be automatically detached when it is destroyed. * This will throw if the view is already attached to a ViewContainer. */ attachView(viewRef) { (typeof ngDevMode === 'undefined' || ngDevMode) && this.warnIfDestroyed(); const view = viewRef; this._views.push(view); view.attachToAppRef(this); } /** * Detaches a view from dirty checking again. */ detachView(viewRef) { (typeof ngDevMode === 'undefined' || ngDevMode) && this.warnIfDestroyed(); const view = viewRef; remove(this._views, view); view.detachFromAppRef(); } _loadComponent(componentRef) { this.attachView(componentRef.hostView); this.tick(); this.components.push(componentRef); // Get the listeners lazily to prevent DI cycles. const listeners = this._injector.get(APP_BOOTSTRAP_LISTENER, []); if (ngDevMode && !Array.isArray(listeners)) { throw new RuntimeError(-209 /* RuntimeErrorCode.INVALID_MULTI_PROVIDER */, 'Unexpected type of the `APP_BOOTSTRAP_LISTENER` token value ' + `(expected an array, but got ${typeof listeners}). ` + 'Please check that the `APP_BOOTSTRAP_LISTENER` token is configured as a ' + '`multi: true` provider.'); } listeners.push(...this._bootstrapListeners); listeners.forEach((listener) => listener(componentRef)); } /** @internal */ ngOnDestroy() { if (this._destroyed) return; try { // Call all the lifecycle hooks. this._destroyListeners.forEach(listener => listener()); // Destroy all registered views. this._views.slice().forEach((view) => view.destroy()); } finally { // Indicate that this instance is destroyed. this._destroyed = true; // Release all references. this._views = []; this._bootstrapListeners = []; this._destroyListeners = []; } } /** * Registers a listener to be called when an instance is destroyed. * * @param callback A callback function to add as a listener. * @returns A function which unregisters a listener. */ onDestroy(callback) { (typeof ngDevMode === 'undefined' || ngDevMode) && this.warnIfDestroyed(); this._destroyListeners.push(callback); return () => remove(this._destroyListeners, callback); } /** * Destroys an Angular application represented by this `ApplicationRef`. Calling this function * will destroy the associated environment injectors as well as all the bootstrapped components * with their views. */ destroy() { if (this._destroyed) { throw new RuntimeError(406 /* RuntimeErrorCode.APPLICATION_REF_ALREADY_DESTROYED */, ngDevMode && 'This instance of the `ApplicationRef` has already been destroyed.'); } const injector = this._injector; // Check that this injector instance supports destroy operation. if (injector.destroy && !injector.destroyed) { // Destroying an underlying injector will trigger the `ngOnDestroy` lifecycle // hook, which invokes the remaining cleanup actions. injector.destroy(); } } /** * Returns the number of attached views. */ get viewCount() { return this._views.length; } warnIfDestroyed() { if ((typeof ngDevMode === 'undefined' || ngDevMode) && this._destroyed) { console.warn(formatRuntimeError(406 /* RuntimeErrorCode.APPLICATION_REF_ALREADY_DESTROYED */, 'This instance of the `ApplicationRef` has already been destroyed.')); } } static { this.Éµfac = function ApplicationRef_Factory(t) { return new (t || ApplicationRef)(); }; } static { this.Éµprov = /*@__PURE__*/ ÉµÉµdefineInjectable({ token: ApplicationRef, factory: ApplicationRef.Éµfac, providedIn: 'root' }); } } exports('ApplicationRef', ApplicationRef); (function () { (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(ApplicationRef, [{ type: Injectable, args: [{ providedIn: 'root' }] }], null, null); })(); function remove(list, el) { const index = list.indexOf(el); if (index > -1) { list.splice(index, 1); } } function _lastDefined(args) { for (let i = args.length - 1; i >= 0; i--) { if (args[i] !== undefined) { return args[i]; } } return undefined; } /** * `InjectionToken` used to configure how to call the `ErrorHandler`. * * `NgZone` is provided by default today so the default (and only) implementation for this * is calling `ErrorHandler.handleError` outside of the Angular zone. */ const INTERNAL_APPLICATION_ERROR_HANDLER = new InjectionToken((typeof ngDevMode === 'undefined' || ngDevMode) ? 'internal error handler' : '', { providedIn: 'root', factory: () => { const userErrorHandler = inject(ErrorHandler); return userErrorHandler.handleError.bind(undefined); } }); function ngZoneApplicationErrorHandlerFactory() { const zone = inject(NgZone); const userErrorHandler = inject(ErrorHandler); return (e) => zone.runOutsideAngular(() => userErrorHandler.handleError(e)); } class NgZoneChangeDetectionScheduler { constructor() { this.zone = inject(NgZone); this.applicationRef = inject(ApplicationRef); } initialize() { if (this._onMicrotaskEmptySubscription) { return; } this._onMicrotaskEmptySubscription = this.zone.onMicrotaskEmpty.subscribe({ next: () => { this.zone.run(() => { this.applicationRef.tick(); }); } }); } ngOnDestroy() { this._onMicrotaskEmptySubscription?.unsubscribe(); } static { this.Éµfac = function NgZoneChangeDetectionScheduler_Factory(t) { return new (t || NgZoneChangeDetectionScheduler)(); }; } static { this.Éµprov = /*@__PURE__*/ ÉµÉµdefineInjectable({ token: NgZoneChangeDetectionScheduler, factory: NgZoneChangeDetectionScheduler.Éµfac, providedIn: 'root' }); } } (function () { (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(NgZoneChangeDetectionScheduler, [{ type: Injectable, args: [{ providedIn: 'root' }] }], null, null); })(); /** * Internal token used to verify that `provideZoneChangeDetection` is not used * with the bootstrapModule API. */ const PROVIDED_NG_ZONE = new InjectionToken((typeof ngDevMode === 'undefined' || ngDevMode) ? 'provideZoneChangeDetection token' : ''); function internalProvideZoneChangeDetection(ngZoneFactory) { return [ { provide: NgZone, useFactory: ngZoneFactory }, { provide: ENVIRONMENT_INITIALIZER, multi: true, useFactory: () => { const ngZoneChangeDetectionScheduler = inject(NgZoneChangeDetectionScheduler, { optional: true }); if ((typeof ngDevMode === 'undefined' || ngDevMode) && ngZoneChangeDetectionScheduler === null) { throw new RuntimeError(402 /* RuntimeErrorCode.MISSING_REQUIRED_INJECTABLE_IN_BOOTSTRAP */, `A required Injectable was not found in the dependency injection tree. ` + 'If you are bootstrapping an NgModule, make sure that the `BrowserModule` is imported.'); } return () => ngZoneChangeDetectionScheduler.initialize(); }, }, { provide: INTERNAL_APPLICATION_ERROR_HANDLER, useFactory: ngZoneApplicationErrorHandlerFactory }, { provide: ZONE_IS_STABLE_OBSERVABLE, useFactory: isStableFactory }, ]; } /** * Provides `NgZone`-based change detection for the application bootstrapped using * `bootstrapApplication`. * * `NgZone` is already provided in applications by default. This provider allows you to configure * options like `eventCoalescing` in the `NgZone`. * This provider is not available for `platformBrowser().bootstrapModule`, which uses * `BootstrapOptions` instead. * * @usageNotes * ```typescript= * bootstrapApplication(MyApp, {providers: [ * provideZoneChangeDetection({eventCoalescing: true}), * ]}); * ``` * * @publicApi * @see bootstrapApplication * @see NgZoneOptions */ function provideZoneChangeDetection(options) { const zoneProviders = internalProvideZoneChangeDetection(() => new NgZone(getNgZoneOptions(options))); return makeEnvironmentProviders([ (typeof ngDevMode === 'undefined' || ngDevMode) ? { provide: PROVIDED_NG_ZONE, useValue: true } : [], zoneProviders, ]); } /** * Returns whether Angular is in development mode. * * By default, this is true, unless `enableProdMode` is invoked prior to calling this method or the * application is built using the Angular CLI with the `optimization` option. * @see {@link cli/build ng build} * * @publicApi */ function isDevMode() { return typeof ngDevMode === 'undefined' || !!ngDevMode; } /** * Disable Angular's development mode, which turns off assertions and other * checks within the framework. * * One important assertion this disables verifies that a change detection pass * does not result in additional changes to any bindings (also known as * unidirectional data flow). * * Using this method is discouraged as the Angular CLI will set production mode when using the * `optimization` option. * @see {@link cli/build ng build} * * @publicApi */ function enableProdMode() { // The below check is there so when ngDevMode is set via terser // `global['ngDevMode'] = false;` is also dropped. if (typeof ngDevMode === 'undefined' || ngDevMode) { _global['ngDevMode'] = false; } } // Public API for Zone // Public API for render /** * Returns the NgModuleFactory with the given id (specified using [@NgModule.id * field](api/core/NgModule#id)), if it exists and has been loaded. Factories for NgModules that do * not specify an `id` cannot be retrieved. Throws if an NgModule cannot be found. * @publicApi * @deprecated Use `getNgModuleById` instead. */ function getModuleFactory(id) { const type = getRegisteredNgModuleType(id); if (!type) throw noModuleError(id); return new NgModuleFactory(type); } /** * Returns the NgModule class with the given id (specified using [@NgModule.id * field](api/core/NgModule#id)), if it exists and has been loaded. Classes for NgModules that do * not specify an `id` cannot be retrieved. Throws if an NgModule cannot be found. * @publicApi */ function getNgModuleById(id) { const type = getRegisteredNgModuleType(id); if (!type) throw noModuleError(id); return type; } function noModuleError(id) { return new Error(`No module with ID ${id} loaded`); } /** * Base class that provides change detection functionality. * A change-detection tree collects all views that are to be checked for changes. * Use the methods to add and remove views from the tree, initiate change-detection, * and explicitly mark views as _dirty_, meaning that they have changed and need to be re-rendered. * * @see [Using change detection hooks](guide/lifecycle-hooks#using-change-detection-hooks) * @see [Defining custom change detection](guide/lifecycle-hooks#defining-custom-change-detection) * * @usageNotes * * The following examples demonstrate how to modify default change-detection behavior * to perform explicit detection when needed. * * ### Use `markForCheck()` with `CheckOnce` strategy * * The following example sets the `OnPush` change-detection strategy for a component * (`CheckOnce`, rather than the default `CheckAlways`), then forces a second check * after an interval. * * * * ### Detach change detector to limit how often check occurs * * The following example defines a component with a large list of read-only data * that is expected to change constantly, many times per second. * To improve performance, we want to check and update the list * less often than the changes actually occur. To do that, we detach * the component's change detector and perform an explicit local check every five seconds. * * * * * ### Reattaching a detached component * * The following example creates a component displaying live data. * The component detaches its change detector from the main change detector tree * when the `live` property is set to false, and reattaches it when the property * becomes true. * * * * @publicApi */ class ChangeDetectorRef { /** * @internal * @nocollapse */ static { this.__NG_ELEMENT_ID__ = injectChangeDetectorRef; } } exports('ChangeDetectorRef', ChangeDetectorRef); /** Returns a ChangeDetectorRef (a.k.a. a ViewRef) */ function injectChangeDetectorRef(flags) { return createViewRef(getCurrentTNode(), getLView(), (flags & 16 /* InternalInjectFlags.ForPipe */) === 16 /* InternalInjectFlags.ForPipe */); } /** * Creates a ViewRef and stores it on the injector as ChangeDetectorRef (public alias). * * @param tNode The node that is requesting a ChangeDetectorRef * @param lView The view to which the node belongs * @param isPipe Whether the view is being injected into a pipe. * @returns The ChangeDetectorRef to use */ function createViewRef(tNode, lView, isPipe) { if (isComponentHost(tNode) && !isPipe) { // The LView represents the location where the component is declared. // Instead we want the LView for the component View and so we need to look it up. const componentView = getComponentLViewByIndex(tNode.index, lView); // look down return new ViewRef$1(componentView, componentView); } else if (tNode.type & (3 /* TNodeType.AnyRNode */ | 12 /* TNodeType.AnyContainer */ | 32 /* TNodeType.Icu */)) { // The LView represents the location where the injection is requested from. // We need to locate the containing LView (in case where the `lView` is an embedded view) const hostComponentView = lView[DECLARATION_COMPONENT_VIEW]; // look up return new ViewRef$1(hostComponentView, lView); } return null; } /** * Represents an Angular [view](guide/glossary#view "Definition"). * * @see {@link ChangeDetectorRef#usage-notes Change detection usage} * * @publicApi */ class ViewRef extends ChangeDetectorRef { } exports('ViewRef', ViewRef); /** * Represents an Angular [view](guide/glossary#view) in a view container. * An [embedded view](guide/glossary#view-hierarchy) can be referenced from a component * other than the hosting component whose template defines it, or it can be defined * independently by a `TemplateRef`. * * Properties of elements in a view can change, but the structure (number and order) of elements in * a view cannot. Change the structure of elements by inserting, moving, or * removing nested views in a view container. * * @see `ViewContainerRef` * * @usageNotes * * The following template breaks down into two separate `TemplateRef` instances, * an outer one and an inner one. * * ``` * Count: {{items.length}} *
*
{{item}}
*
* ``` * * This is the outer `TemplateRef`: * * ``` * Count: {{items.length}} *
* *
* ``` * * This is the inner `TemplateRef`: * * ``` *
{{item}}
* ``` * * The outer and inner `TemplateRef` instances are assembled into views as follows: * * ``` * * Count: 2 *
* *
first
*
second
*
* * ``` * @publicApi */ class EmbeddedViewRef extends ViewRef { } exports('EmbeddedViewRef', EmbeddedViewRef); /** * @publicApi */ class DebugEventListener { constructor(name, callback) { this.name = name; this.callback = callback; } } exports('DebugEventListener', DebugEventListener); /** * @publicApi */ function asNativeElements(debugEls) { return debugEls.map((el) => el.nativeElement); } /** * @publicApi */ class DebugNode { constructor(nativeNode) { this.nativeNode = nativeNode; } /** * The `DebugElement` parent. Will be `null` if this is the root element. */ get parent() { const parent = this.nativeNode.parentNode; return parent ? new DebugElement(parent) : null; } /** * The host dependency injector. For example, the root element's component instance injector. */ get injector() { return getInjector(this.nativeNode); } /** * The element's own component instance, if it has one. */ get componentInstance() { const nativeElement = this.nativeNode; return nativeElement && (getComponent(nativeElement) || getOwningComponent(nativeElement)); } /** * An object that provides parent context for this element. Often an ancestor component instance * that governs this element. * * When an element is repeated within *ngFor, the context is an `NgForOf` whose `$implicit` * property is the value of the row instance value. For example, the `hero` in `*ngFor="let hero * of heroes"`. */ get context() { return getComponent(this.nativeNode) || getContext(this.nativeNode); } /** * The callbacks attached to the component's @Output properties and/or the element's event * properties. */ get listeners() { return getListeners(this.nativeNode).filter(listener => listener.type === 'dom'); } /** * Dictionary of objects associated with template local variables (e.g. #foo), keyed by the local * variable name. */ get references() { return getLocalRefs(this.nativeNode); } /** * This component's injector lookup tokens. Includes the component itself plus the tokens that the * component lists in its providers metadata. */ get providerTokens() { return getInjectionTokens(this.nativeNode); } } exports('DebugNode', DebugNode); /** * @publicApi * * @see [Component testing scenarios](guide/testing-components-scenarios) * @see [Basics of testing components](guide/testing-components-basics) * @see [Testing utility APIs](guide/testing-utility-apis) */ class DebugElement extends DebugNode { constructor(nativeNode) { ngDevMode && assertDomNode(nativeNode); super(nativeNode); } /** * The underlying DOM element at the root of the component. */ get nativeElement() { return this.nativeNode.nodeType == Node.ELEMENT_NODE ? this.nativeNode : null; } /** * The element tag name, if it is an element. */ get name() { const context = getLContext(this.nativeNode); const lView = context ? context.lView : null; if (lView !== null) { const tData = lView[TVIEW].data; const tNode = tData[context.nodeIndex]; return tNode.value; } else { return this.nativeNode.nodeName; } } /** * Gets a map of property names to property values for an element. * * This map includes: * - Regular property bindings (e.g. `[id]="id"`) * - Host property bindings (e.g. `host: { '[id]': "id" }`) * - Interpolated property bindings (e.g. `id="{{ value }}") * * It does not include: * - input property bindings (e.g. `[myCustomInput]="value"`) * - attribute bindings (e.g. `[attr.role]="menu"`) */ get properties() { const context = getLContext(this.nativeNode); const lView = context ? context.lView : null; if (lView === null) { return {}; } const tData = lView[TVIEW].data; const tNode = tData[context.nodeIndex]; const properties = {}; // Collect properties from the DOM. copyDomProperties(this.nativeElement, properties); // Collect properties from the bindings. This is needed for animation renderer which has // synthetic properties which don't get reflected into the DOM. collectPropertyBindings(properties, tNode, lView, tData); return properties; } /** * A map of attribute names to attribute values for an element. */ get attributes() { const attributes = {}; const element = this.nativeElement; if (!element) { return attributes; } const context = getLContext(element); const lView = context ? context.lView : null; if (lView === null) { return {}; } const tNodeAttrs = lView[TVIEW].data[context.nodeIndex].attrs; const lowercaseTNodeAttrs = []; // For debug nodes we take the element's attribute directly from the DOM since it allows us // to account for ones that weren't set via bindings (e.g. ViewEngine keeps track of the ones // that are set through `Renderer2`). The problem is that the browser will lowercase all names, // however since we have the attributes already on the TNode, we can preserve the case by going // through them once, adding them to the `attributes` map and putting their lower-cased name // into an array. Afterwards when we're going through the native DOM attributes, we can check // whether we haven't run into an attribute already through the TNode. if (tNodeAttrs) { let i = 0; while (i < tNodeAttrs.length) { const attrName = tNodeAttrs[i]; // Stop as soon as we hit a marker. We only care about the regular attributes. Everything // else will be handled below when we read the final attributes off the DOM. if (typeof attrName !== 'string') break; const attrValue = tNodeAttrs[i + 1]; attributes[attrName] = attrValue; lowercaseTNodeAttrs.push(attrName.toLowerCase()); i += 2; } } for (const attr of element.attributes) { // Make sure that we don't assign the same attribute both in its // case-sensitive form and the lower-cased one from the browser. if (!lowercaseTNodeAttrs.includes(attr.name)) { attributes[attr.name] = attr.value; } } return attributes; } /** * The inline styles of the DOM element. * * Will be `null` if there is no `style` property on the underlying DOM element. * * @see [ElementCSSInlineStyle](https://developer.mozilla.org/en-US/docs/Web/API/ElementCSSInlineStyle/style) */ get styles() { if (this.nativeElement && this.nativeElement.style) { return this.nativeElement.style; } return {}; } /** * A map containing the class names on the element as keys. * * This map is derived from the `className` property of the DOM element. * * Note: The values of this object will always be `true`. The class key will not appear in the KV * object if it does not exist on the element. * * @see [Element.className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) */ get classes() { const result = {}; const element = this.nativeElement; // SVG elements return an `SVGAnimatedString` instead of a plain string for the `className`. const className = element.className; const classes = typeof className !== 'string' ? className.baseVal.split(' ') : className.split(' '); classes.forEach((value) => result[value] = true); return result; } /** * The `childNodes` of the DOM element as a `DebugNode` array. * * @see [Node.childNodes](https://developer.mozilla.org/en-US/docs/Web/API/Node/childNodes) */ get childNodes() { const childNodes = this.nativeNode.childNodes; const children = []; for (let i = 0; i < childNodes.length; i++) { const element = childNodes[i]; children.push(getDebugNode(element)); } return children; } /** * The immediate `DebugElement` children. Walk the tree by descending through `children`. */ get children() { const nativeElement = this.nativeElement; if (!nativeElement) return []; const childNodes = nativeElement.children; const children = []; for (let i = 0; i < childNodes.length; i++) { const element = childNodes[i]; children.push(getDebugNode(element)); } return children; } /** * @returns the first `DebugElement` that matches the predicate at any depth in the subtree. */ query(predicate) { const results = this.queryAll(predicate); return results[0] || null; } /** * @returns All `DebugElement` matches for the predicate at any depth in the subtree. */ queryAll(predicate) { const matches = []; _queryAll(this, predicate, matches, true); return matches; } /** * @returns All `DebugNode` matches for the predicate at any depth in the subtree. */ queryAllNodes(predicate) { const matches = []; _queryAll(this, predicate, matches, false); return matches; } /** * Triggers the event by its name if there is a corresponding listener in the element's * `listeners` collection. * * If the event lacks a listener or there's some other problem, consider * calling `nativeElement.dispatchEvent(eventObject)`. * * @param eventName The name of the event to trigger * @param eventObj The _event object_ expected by the handler * * @see [Testing components scenarios](guide/testing-components-scenarios#trigger-event-handler) */ triggerEventHandler(eventName, eventObj) { const node = this.nativeNode; const invokedListeners = []; this.listeners.forEach(listener => { if (listener.name === eventName) { const callback = listener.callback; callback.call(node, eventObj); invokedListeners.push(callback); } }); // We need to check whether `eventListeners` exists, because it's something // that Zone.js only adds to `EventTarget` in browser environments. if (typeof node.eventListeners === 'function') { // Note that in Ivy we wrap event listeners with a call to `event.preventDefault` in some // cases. We use '__ngUnwrap__' as a special token that gives us access to the actual event // listener. node.eventListeners(eventName).forEach((listener) => { // In order to ensure that we can detect the special __ngUnwrap__ token described above, we // use `toString` on the listener and see if it contains the token. We use this approach to // ensure that it still worked with compiled code since it cannot remove or rename string // literals. We also considered using a special function name (i.e. if(listener.name === // special)) but that was more cumbersome and we were also concerned the compiled code could // strip the name, turning the condition in to ("" === "") and always returning true. if (listener.toString().indexOf('__ngUnwrap__') !== -1) { const unwrappedListener = listener('__ngUnwrap__'); return invokedListeners.indexOf(unwrappedListener) === -1 && unwrappedListener.call(node, eventObj); } }); } } } exports('DebugElement', DebugElement); function copyDomProperties(element, properties) { if (element) { // Skip own properties (as those are patched) let obj = Object.getPrototypeOf(element); const NodePrototype = Node.prototype; while (obj !== null && obj !== NodePrototype) { const descriptors = Object.getOwnPropertyDescriptors(obj); for (let key in descriptors) { if (!key.startsWith('__') && !key.startsWith('on')) { // don't include properties starting with `__` and `on`. // `__` are patched values which should not be included. // `on` are listeners which also should not be included. const value = element[key]; if (isPrimitiveValue(value)) { properties[key] = value; } } } obj = Object.getPrototypeOf(obj); } } } function isPrimitiveValue(value) { return typeof value === 'string' || typeof value === 'boolean' || typeof value === 'number' || value === null; } function _queryAll(parentElement, predicate, matches, elementsOnly) { const context = getLContext(parentElement.nativeNode); const lView = context ? context.lView : null; if (lView !== null) { const parentTNode = lView[TVIEW].data[context.nodeIndex]; _queryNodeChildren(parentTNode, lView, predicate, matches, elementsOnly, parentElement.nativeNode); } else { // If the context is null, then `parentElement` was either created with Renderer2 or native DOM // APIs. _queryNativeNodeDescendants(parentElement.nativeNode, predicate, matches, elementsOnly); } } /** * Recursively match the current TNode against the predicate, and goes on with the next ones. * * @param tNode the current TNode * @param lView the LView of this TNode * @param predicate the predicate to match * @param matches the list of positive matches * @param elementsOnly whether only elements should be searched * @param rootNativeNode the root native node on which predicate should not be matched */ function _queryNodeChildren(tNode, lView, predicate, matches, elementsOnly, rootNativeNode) { ngDevMode && assertTNodeForLView(tNode, lView); const nativeNode = getNativeByTNodeOrNull(tNode, lView); // For each type of TNode, specific logic is executed. if (tNode.type & (3 /* TNodeType.AnyRNode */ | 8 /* TNodeType.ElementContainer */)) { // Case 1: the TNode is an element // The native node has to be checked. _addQueryMatch(nativeNode, predicate, matches, elementsOnly, rootNativeNode); if (isComponentHost(tNode)) { // If the element is the host of a component, then all nodes in its view have to be processed. // Note: the component's content (tNode.child) will be processed from the insertion points. const componentView = getComponentLViewByIndex(tNode.index, lView); if (componentView && componentView[TVIEW].firstChild) { _queryNodeChildren(componentView[TVIEW].firstChild, componentView, predicate, matches, elementsOnly, rootNativeNode); } } else { if (tNode.child) { // Otherwise, its children have to be processed. _queryNodeChildren(tNode.child, lView, predicate, matches, elementsOnly, rootNativeNode); } // We also have to query the DOM directly in order to catch elements inserted through // Renderer2. Note that this is __not__ optimal, because we're walking similar trees multiple // times. ViewEngine could do it more efficiently, because all the insertions go through // Renderer2, however that's not the case in Ivy. This approach is being used because: // 1. Matching the ViewEngine behavior would mean potentially introducing a dependency // from `Renderer2` to Ivy which could bring Ivy code into ViewEngine. // 2. It allows us to capture nodes that were inserted directly via the DOM. nativeNode && _queryNativeNodeDescendants(nativeNode, predicate, matches, elementsOnly); } // In all cases, if a dynamic container exists for this node, each view inside it has to be // processed. const nodeOrContainer = lView[tNode.index]; if (isLContainer(nodeOrContainer)) { _queryNodeChildrenInContainer(nodeOrContainer, predicate, matches, elementsOnly, rootNativeNode); } } else if (tNode.type & 4 /* TNodeType.Container */) { // Case 2: the TNode is a container // The native node has to be checked. const lContainer = lView[tNode.index]; _addQueryMatch(lContainer[NATIVE], predicate, matches, elementsOnly, rootNativeNode); // Each view inside the container has to be processed. _queryNodeChildrenInContainer(lContainer, predicate, matches, elementsOnly, rootNativeNode); } else if (tNode.type & 16 /* TNodeType.Projection */) { // Case 3: the TNode is a projection insertion point (i.e. a ). // The nodes projected at this location all need to be processed. const componentView = lView[DECLARATION_COMPONENT_VIEW]; const componentHost = componentView[T_HOST]; const head = componentHost.projection[tNode.projection]; if (Array.isArray(head)) { for (let nativeNode of head) { _addQueryMatch(nativeNode, predicate, matches, elementsOnly, rootNativeNode); } } else if (head) { const nextLView = componentView[PARENT]; const nextTNode = nextLView[TVIEW].data[head.index]; _queryNodeChildren(nextTNode, nextLView, predicate, matches, elementsOnly, rootNativeNode); } } else if (tNode.child) { // Case 4: the TNode is a view. _queryNodeChildren(tNode.child, lView, predicate, matches, elementsOnly, rootNativeNode); } // We don't want to go to the next sibling of the root node. 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 & 2 /* TNodeFlags.isProjected */) ? tNode.projectionNext : tNode.next; if (nextTNode) { _queryNodeChildren(nextTNode, lView, predicate, matches, elementsOnly, rootNativeNode); } } } /** * Process all TNodes in a given container. * * @param lContainer the container to be processed * @param predicate the predicate to match * @param matches the list of positive matches * @param elementsOnly whether only elements should be searched * @param rootNativeNode the root native node on which predicate should not be matched */ function _queryNodeChildrenInContainer(lContainer, predicate, matches, elementsOnly, rootNativeNode) { for (let i = CONTAINER_HEADER_OFFSET; i < lContainer.length; i++) { const childView = lContainer[i]; const firstChild = childView[TVIEW].firstChild; if (firstChild) { _queryNodeChildren(firstChild, childView, predicate, matches, elementsOnly, rootNativeNode); } } } /** * Match the current native node against the predicate. * * @param nativeNode the current native node * @param predicate the predicate to match * @param matches the list of positive matches * @param elementsOnly whether only elements should be searched * @param rootNativeNode the root native node on which predicate should not be matched */ function _addQueryMatch(nativeNode, predicate, matches, elementsOnly, rootNativeNode) { if (rootNativeNode !== nativeNode) { const debugNode = getDebugNode(nativeNode); if (!debugNode) { return; } // Type of the "predicate and "matches" array are set based on the value of // the "elementsOnly" parameter. TypeScript is not able to properly infer these // types with generics, so we manually cast the parameters accordingly. if (elementsOnly && (debugNode instanceof DebugElement) && predicate(debugNode) && matches.indexOf(debugNode) === -1) { matches.push(debugNode); } else if (!elementsOnly && predicate(debugNode) && matches.indexOf(debugNode) === -1) { matches.push(debugNode); } } } /** * Match all the descendants of a DOM node against a predicate. * * @param nativeNode the current native node * @param predicate the predicate to match * @param matches the list where matches are stored * @param elementsOnly whether only elements should be searched */ function _queryNativeNodeDescendants(parentNode, predicate, matches, elementsOnly) { const nodes = parentNode.childNodes; const length = nodes.length; for (let i = 0; i < length; i++) { const node = nodes[i]; const debugNode = getDebugNode(node); if (debugNode) { if (elementsOnly && (debugNode instanceof DebugElement) && predicate(debugNode) && matches.indexOf(debugNode) === -1) { matches.push(debugNode); } else if (!elementsOnly && predicate(debugNode) && matches.indexOf(debugNode) === -1) { matches.push(debugNode); } _queryNativeNodeDescendants(node, predicate, matches, elementsOnly); } } } /** * Iterates through the property bindings for a given node and generates * a map of property names to values. This map only contains property bindings * defined in templates, not in host bindings. */ function collectPropertyBindings(properties, tNode, lView, tData) { let bindingIndexes = tNode.propertyBindings; if (bindingIndexes !== null) { for (let i = 0; i < bindingIndexes.length; i++) { const bindingIndex = bindingIndexes[i]; const propMetadata = tData[bindingIndex]; const metadataParts = propMetadata.split(INTERPOLATION_DELIMITER); const propertyName = metadataParts[0]; if (metadataParts.length > 1) { let value = metadataParts[1]; for (let j = 1; j < metadataParts.length - 1; j++) { value += renderStringify(lView[bindingIndex + j - 1]) + metadataParts[j + 1]; } properties[propertyName] = value; } else { properties[propertyName] = lView[bindingIndex]; } } } } const NG_DEBUG_PROPERTY = '__ng_debug__'; /** * @publicApi */ function getDebugNode(nativeNode) { if (nativeNode instanceof Node) { if (!(nativeNode.hasOwnProperty(NG_DEBUG_PROPERTY))) { nativeNode[NG_DEBUG_PROPERTY] = nativeNode.nodeType == Node.ELEMENT_NODE ? new DebugElement(nativeNode) : new DebugNode(nativeNode); } return nativeNode[NG_DEBUG_PROPERTY]; } return null; } class DefaultIterableDifferFactory { constructor() { } supports(obj) { return isListLikeIterable(obj); } create(trackByFn) { return new DefaultIterableDiffer(trackByFn); } } const trackByIdentity = (index, item) => item; /** * @deprecated v4.0.0 - Should not be part of public API. * @publicApi */ class DefaultIterableDiffer { constructor(trackByFn) { this.length = 0; // Keeps track of the used records at any point in time (during & across `_check()` calls) this._linkedRecords = null; // Keeps track of the removed records at any point in time during `_check()` calls. this._unlinkedRecords = null; this._previousItHead = null; this._itHead = null; this._itTail = null; this._additionsHead = null; this._additionsTail = null; this._movesHead = null; this._movesTail = null; this._removalsHead = null; this._removalsTail = null; // Keeps track of records where custom track by is the same, but item identity has changed this._identityChangesHead = null; this._identityChangesTail = null; this._trackByFn = trackByFn || trackByIdentity; } forEachItem(fn) { let record; for (record = this._itHead; record !== null; record = record._next) { fn(record); } } forEachOperation(fn) { let nextIt = this._itHead; let nextRemove = this._removalsHead; let addRemoveOffset = 0; let moveOffsets = null; while (nextIt || nextRemove) { // Figure out which is the next record to process // Order: remove, add, move const record = !nextRemove || nextIt && nextIt.currentIndex < getPreviousIndex(nextRemove, addRemoveOffset, moveOffsets) ? nextIt : nextRemove; const adjPreviousIndex = getPreviousIndex(record, addRemoveOffset, moveOffsets); const currentIndex = record.currentIndex; // consume the item, and adjust the addRemoveOffset and update moveDistance if necessary if (record === nextRemove) { addRemoveOffset--; nextRemove = nextRemove._nextRemoved; } else { nextIt = nextIt._next; if (record.previousIndex == null) { addRemoveOffset++; } else { // INVARIANT: currentIndex < previousIndex if (!moveOffsets) moveOffsets = []; const localMovePreviousIndex = adjPreviousIndex - addRemoveOffset; const localCurrentIndex = currentIndex - addRemoveOffset; if (localMovePreviousIndex != localCurrentIndex) { for (let i = 0; i < localMovePreviousIndex; i++) { const offset = i < moveOffsets.length ? moveOffsets[i] : (moveOffsets[i] = 0); const index = offset + i; if (localCurrentIndex <= index && index < localMovePreviousIndex) { moveOffsets[i] = offset + 1; } } const previousIndex = record.previousIndex; moveOffsets[previousIndex] = localCurrentIndex - localMovePreviousIndex; } } } if (adjPreviousIndex !== currentIndex) { fn(record, adjPreviousIndex, currentIndex); } } } forEachPreviousItem(fn) { let record; for (record = this._previousItHead; record !== null; record = record._nextPrevious) { fn(record); } } forEachAddedItem(fn) { let record; for (record = this._additionsHead; record !== null; record = record._nextAdded) { fn(record); } } forEachMovedItem(fn) { let record; for (record = this._movesHead; record !== null; record = record._nextMoved) { fn(record); } } forEachRemovedItem(fn) { let record; for (record = this._removalsHead; record !== null; record = record._nextRemoved) { fn(record); } } forEachIdentityChange(fn) { let record; for (record = this._identityChangesHead; record !== null; record = record._nextIdentityChange) { fn(record); } } diff(collection) { if (collection == null) collection = []; if (!isListLikeIterable(collection)) { throw new RuntimeError(900 /* RuntimeErrorCode.INVALID_DIFFER_INPUT */, ngDevMode && `Error trying to diff '${stringify(collection)}'. Only arrays and iterables are allowed`); } if (this.check(collection)) { return this; } else { return null; } } onDestroy() { } check(collection) { this._reset(); let record = this._itHead; let mayBeDirty = false; let index; let item; let itemTrackBy; if (Array.isArray(collection)) { this.length = collection.length; for (let index = 0; index < this.length; index++) { item = collection[index]; itemTrackBy = this._trackByFn(index, item); if (record === null || !Object.is(record.trackById, itemTrackBy)) { record = this._mismatch(record, item, itemTrackBy, index); mayBeDirty = true; } else { if (mayBeDirty) { // TODO(misko): can we limit this to duplicates only? record = this._verifyReinsertion(record, item, itemTrackBy, index); } if (!Object.is(record.item, item)) this._addIdentityChange(record, item); } record = record._next; } } else { index = 0; iterateListLike(collection, (item) => { itemTrackBy = this._trackByFn(index, item); if (record === null || !Object.is(record.trackById, itemTrackBy)) { record = this._mismatch(record, item, itemTrackBy, index); mayBeDirty = true; } else { if (mayBeDirty) { // TODO(misko): can we limit this to duplicates only? record = this._verifyReinsertion(record, item, itemTrackBy, index); } if (!Object.is(record.item, item)) this._addIdentityChange(record, item); } record = record._next; index++; }); this.length = index; } this._truncate(record); this.collection = collection; return this.isDirty; } /* CollectionChanges is considered dirty if it has any additions, moves, removals, or identity * changes. */ get isDirty() { return this._additionsHead !== null || this._movesHead !== null || this._removalsHead !== null || this._identityChangesHead !== null; } /** * Reset the state of the change objects to show no changes. This means set previousKey to * currentKey, and clear all of the queues (additions, moves, removals). * Set the previousIndexes of moved and added items to their currentIndexes * Reset the list of additions, moves and removals * * @internal */ _reset() { if (this.isDirty) { let record; for (record = this._previousItHead = this._itHead; record !== null; record = record._next) { record._nextPrevious = record._next; } for (record = this._additionsHead; record !== null; record = record._nextAdded) { record.previousIndex = record.currentIndex; } this._additionsHead = this._additionsTail = null; for (record = this._movesHead; record !== null; record = record._nextMoved) { record.previousIndex = record.currentIndex; } this._movesHead = this._movesTail = null; this._removalsHead = this._removalsTail = null; this._identityChangesHead = this._identityChangesTail = null; // TODO(vicb): when assert gets supported // assert(!this.isDirty); } } /** * This is the core function which handles differences between collections. * * - `record` is the record which we saw at this position last time. If null then it is a new * item. * - `item` is the current item in the collection * - `index` is the position of the item in the collection * * @internal */ _mismatch(record, item, itemTrackBy, index) { // The previous record after which we will append the current one. let previousRecord; if (record === null) { previousRecord = this._itTail; } else { previousRecord = record._prev; // Remove the record from the collection since we know it does not match the item. this._remove(record); } // See if we have evicted the item, which used to be at some anterior position of _itHead list. record = this._unlinkedRecords === null ? null : this._unlinkedRecords.get(itemTrackBy, null); if (record !== null) { // It is an item which we have evicted earlier: reinsert it back into the list. // But first we need to check if identity changed, so we can update in view if necessary. if (!Object.is(record.item, item)) this._addIdentityChange(record, item); this._reinsertAfter(record, previousRecord, index); } else { // Attempt to see if the item is at some posterior position of _itHead list. record = this._linkedRecords === null ? null : this._linkedRecords.get(itemTrackBy, index); if (record !== null) { // We have the item in _itHead at/after `index` position. We need to move it forward in the // collection. // But first we need to check if identity changed, so we can update in view if necessary. if (!Object.is(record.item, item)) this._addIdentityChange(record, item); this._moveAfter(record, previousRecord, index); } else { // It is a new item: add it. record = this._addAfter(new IterableChangeRecord_(item, itemTrackBy), previousRecord, index); } } return record; } /** * This check is only needed if an array contains duplicates. (Short circuit of nothing dirty) * * Use case: `[a, a]` => `[b, a, a]` * * If we did not have this check then the insertion of `b` would: * 1) evict first `a` * 2) insert `b` at `0` index. * 3) leave `a` at index `1` as is. <-- this is wrong! * 3) reinsert `a` at index 2. <-- this is wrong! * * The correct behavior is: * 1) evict first `a` * 2) insert `b` at `0` index. * 3) reinsert `a` at index 1. * 3) move `a` at from `1` to `2`. * * * Double check that we have not evicted a duplicate item. We need to check if the item type may * have already been removed: * The insertion of b will evict the first 'a'. If we don't reinsert it now it will be reinserted * at the end. Which will show up as the two 'a's switching position. This is incorrect, since a * better way to think of it is as insert of 'b' rather then switch 'a' with 'b' and then add 'a' * at the end. * * @internal */ _verifyReinsertion(record, item, itemTrackBy, index) { let reinsertRecord = this._unlinkedRecords === null ? null : this._unlinkedRecords.get(itemTrackBy, null); if (reinsertRecord !== null) { record = this._reinsertAfter(reinsertRecord, record._prev, index); } else if (record.currentIndex != index) { record.currentIndex = index; this._addToMoves(record, index); } return record; } /** * Get rid of any excess {@link IterableChangeRecord_}s from the previous collection * * - `record` The first excess {@link IterableChangeRecord_}. * * @internal */ _truncate(record) { // Anything after that needs to be removed; while (record !== null) { const nextRecord = record._next; this._addToRemovals(this._unlink(record)); record = nextRecord; } if (this._unlinkedRecords !== null) { this._unlinkedRecords.clear(); } if (this._additionsTail !== null) { this._additionsTail._nextAdded = null; } if (this._movesTail !== null) { this._movesTail._nextMoved = null; } if (this._itTail !== null) { this._itTail._next = null; } if (this._removalsTail !== null) { this._removalsTail._nextRemoved = null; } if (this._identityChangesTail !== null) { this._identityChangesTail._nextIdentityChange = null; } } /** @internal */ _reinsertAfter(record, prevRecord, index) { if (this._unlinkedRecords !== null) { this._unlinkedRecords.remove(record); } const prev = record._prevRemoved; const next = record._nextRemoved; if (prev === null) { this._removalsHead = next; } else { prev._nextRemoved = next; } if (next === null) { this._removalsTail = prev; } else { next._prevRemoved = prev; } this._insertAfter(record, prevRecord, index); this._addToMoves(record, index); return record; } /** @internal */ _moveAfter(record, prevRecord, index) { this._unlink(record); this._insertAfter(record, prevRecord, index); this._addToMoves(record, index); return record; } /** @internal */ _addAfter(record, prevRecord, index) { this._insertAfter(record, prevRecord, index); if (this._additionsTail === null) { // TODO(vicb): // assert(this._additionsHead === null); this._additionsTail = this._additionsHead = record; } else { // TODO(vicb): // assert(_additionsTail._nextAdded === null); // assert(record._nextAdded === null); this._additionsTail = this._additionsTail._nextAdded = record; } return record; } /** @internal */ _insertAfter(record, prevRecord, index) { // TODO(vicb): // assert(record != prevRecord); // assert(record._next === null); // assert(record._prev === null); const next = prevRecord === null ? this._itHead : prevRecord._next; // TODO(vicb): // assert(next != record); // assert(prevRecord != record); record._next = next; record._prev = prevRecord; if (next === null) { this._itTail = record; } else { next._prev = record; } if (prevRecord === null) { this._itHead = record; } else { prevRecord._next = record; } if (this._linkedRecords === null) { this._linkedRecords = new _DuplicateMap(); } this._linkedRecords.put(record); record.currentIndex = index; return record; } /** @internal */ _remove(record) { return this._addToRemovals(this._unlink(record)); } /** @internal */ _unlink(record) { if (this._linkedRecords !== null) { this._linkedRecords.remove(record); } const prev = record._prev; const next = record._next; // TODO(vicb): // assert((record._prev = null) === null); // assert((record._next = null) === null); if (prev === null) { this._itHead = next; } else { prev._next = next; } if (next === null) { this._itTail = prev; } else { next._prev = prev; } return record; } /** @internal */ _addToMoves(record, toIndex) { // TODO(vicb): // assert(record._nextMoved === null); if (record.previousIndex === toIndex) { return record; } if (this._movesTail === null) { // TODO(vicb): // assert(_movesHead === null); this._movesTail = this._movesHead = record; } else { // TODO(vicb): // assert(_movesTail._nextMoved === null); this._movesTail = this._movesTail._nextMoved = record; } return record; } _addToRemovals(record) { if (this._unlinkedRecords === null) { this._unlinkedRecords = new _DuplicateMap(); } this._unlinkedRecords.put(record); record.currentIndex = null; record._nextRemoved = null; if (this._removalsTail === null) { // TODO(vicb): // assert(_removalsHead === null); this._removalsTail = this._removalsHead = record; record._prevRemoved = null; } else { // TODO(vicb): // assert(_removalsTail._nextRemoved === null); // assert(record._nextRemoved === null); record._prevRemoved = this._removalsTail; this._removalsTail = this._removalsTail._nextRemoved = record; } return record; } /** @internal */ _addIdentityChange(record, item) { record.item = item; if (this._identityChangesTail === null) { this._identityChangesTail = this._identityChangesHead = record; } else { this._identityChangesTail = this._identityChangesTail._nextIdentityChange = record; } return record; } } exports('DefaultIterableDiffer', DefaultIterableDiffer); class IterableChangeRecord_ { constructor(item, trackById) { this.item = item; this.trackById = trackById; this.currentIndex = null; this.previousIndex = null; /** @internal */ this._nextPrevious = null; /** @internal */ this._prev = null; /** @internal */ this._next = null; /** @internal */ this._prevDup = null; /** @internal */ this._nextDup = null; /** @internal */ this._prevRemoved = null; /** @internal */ this._nextRemoved = null; /** @internal */ this._nextAdded = null; /** @internal */ this._nextMoved = null; /** @internal */ this._nextIdentityChange = null; } } // A linked list of IterableChangeRecords with the same IterableChangeRecord_.item class _DuplicateItemRecordList { constructor() { /** @internal */ this._head = null; /** @internal */ this._tail = null; } /** * Append the record to the list of duplicates. * * Note: by design all records in the list of duplicates hold the same value in record.item. */ add(record) { if (this._head === null) { this._head = this._tail = record; record._nextDup = null; record._prevDup = null; } else { // TODO(vicb): // assert(record.item == _head.item || // record.item is num && record.item.isNaN && _head.item is num && _head.item.isNaN); this._tail._nextDup = record; record._prevDup = this._tail; record._nextDup = null; this._tail = record; } } // Returns a IterableChangeRecord_ having IterableChangeRecord_.trackById == trackById and // IterableChangeRecord_.currentIndex >= atOrAfterIndex get(trackById, atOrAfterIndex) { let record; for (record = this._head; record !== null; record = record._nextDup) { if ((atOrAfterIndex === null || atOrAfterIndex <= record.currentIndex) && Object.is(record.trackById, trackById)) { return record; } } return null; } /** * Remove one {@link IterableChangeRecord_} from the list of duplicates. * * Returns whether the list of duplicates is empty. */ remove(record) { // TODO(vicb): // assert(() { // // verify that the record being removed is in the list. // for (IterableChangeRecord_ cursor = _head; cursor != null; cursor = cursor._nextDup) { // if (identical(cursor, record)) return true; // } // return false; //}); const prev = record._prevDup; const next = record._nextDup; if (prev === null) { this._head = next; } else { prev._nextDup = next; } if (next === null) { this._tail = prev; } else { next._prevDup = prev; } return this._head === null; } } class _DuplicateMap { constructor() { this.map = new Map(); } put(record) { const key = record.trackById; let duplicates = this.map.get(key); if (!duplicates) { duplicates = new _DuplicateItemRecordList(); this.map.set(key, duplicates); } duplicates.add(record); } /** * Retrieve the `value` using key. Because the IterableChangeRecord_ value may be one which we * have already iterated over, we use the `atOrAfterIndex` to pretend it is not there. * * Use case: `[a, b, c, a, a]` if we are at index `3` which is the second `a` then asking if we * have any more `a`s needs to return the second `a`. */ get(trackById, atOrAfterIndex) { const key = trackById; const recordList = this.map.get(key); return recordList ? recordList.get(trackById, atOrAfterIndex) : null; } /** * Removes a {@link IterableChangeRecord_} from the list of duplicates. * * The list of duplicates also is removed from the map if it gets empty. */ remove(record) { const key = record.trackById; const recordList = this.map.get(key); // Remove the list of duplicates when it gets empty if (recordList.remove(record)) { this.map.delete(key); } return record; } get isEmpty() { return this.map.size === 0; } clear() { this.map.clear(); } } function getPreviousIndex(item, addRemoveOffset, moveOffsets) { const previousIndex = item.previousIndex; if (previousIndex === null) return previousIndex; let moveOffset = 0; if (moveOffsets && previousIndex < moveOffsets.length) { moveOffset = moveOffsets[previousIndex]; } return previousIndex + addRemoveOffset + moveOffset; } class DefaultKeyValueDifferFactory { constructor() { } supports(obj) { return obj instanceof Map || isJsObject(obj); } create() { return new DefaultKeyValueDiffer(); } } class DefaultKeyValueDiffer { constructor() { this._records = new Map(); this._mapHead = null; // _appendAfter is used in the check loop this._appendAfter = null; this._previousMapHead = null; this._changesHead = null; this._changesTail = null; this._additionsHead = null; this._additionsTail = null; this._removalsHead = null; this._removalsTail = null; } get isDirty() { return this._additionsHead !== null || this._changesHead !== null || this._removalsHead !== null; } forEachItem(fn) { let record; for (record = this._mapHead; record !== null; record = record._next) { fn(record); } } forEachPreviousItem(fn) { let record; for (record = this._previousMapHead; record !== null; record = record._nextPrevious) { fn(record); } } forEachChangedItem(fn) { let record; for (record = this._changesHead; record !== null; record = record._nextChanged) { fn(record); } } forEachAddedItem(fn) { let record; for (record = this._additionsHead; record !== null; record = record._nextAdded) { fn(record); } } forEachRemovedItem(fn) { let record; for (record = this._removalsHead; record !== null; record = record._nextRemoved) { fn(record); } } diff(map) { if (!map) { map = new Map(); } else if (!(map instanceof Map || isJsObject(map))) { throw new RuntimeError(900 /* RuntimeErrorCode.INVALID_DIFFER_INPUT */, ngDevMode && `Error trying to diff '${stringify(map)}'. Only maps and objects are allowed`); } return this.check(map) ? this : null; } onDestroy() { } /** * Check the current state of the map vs the previous. * The algorithm is optimised for when the keys do no change. */ check(map) { this._reset(); let insertBefore = this._mapHead; this._appendAfter = null; this._forEach(map, (value, key) => { if (insertBefore && insertBefore.key === key) { this._maybeAddToChanges(insertBefore, value); this._appendAfter = insertBefore; insertBefore = insertBefore._next; } else { const record = this._getOrCreateRecordForKey(key, value); insertBefore = this._insertBeforeOrAppend(insertBefore, record); } }); // Items remaining at the end of the list have been deleted if (insertBefore) { if (insertBefore._prev) { insertBefore._prev._next = null; } this._removalsHead = insertBefore; for (let record = insertBefore; record !== null; record = record._nextRemoved) { if (record === this._mapHead) { this._mapHead = null; } this._records.delete(record.key); record._nextRemoved = record._next; record.previousValue = record.currentValue; record.currentValue = null; record._prev = null; record._next = null; } } // Make sure tails have no next records from previous runs if (this._changesTail) this._changesTail._nextChanged = null; if (this._additionsTail) this._additionsTail._nextAdded = null; return this.isDirty; } /** * Inserts a record before `before` or append at the end of the list when `before` is null. * * Notes: * - This method appends at `this._appendAfter`, * - This method updates `this._appendAfter`, * - The return value is the new value for the insertion pointer. */ _insertBeforeOrAppend(before, record) { if (before) { const prev = before._prev; record._next = before; record._prev = prev; before._prev = record; if (prev) { prev._next = record; } if (before === this._mapHead) { this._mapHead = record; } this._appendAfter = before; return before; } if (this._appendAfter) { this._appendAfter._next = record; record._prev = this._appendAfter; } else { this._mapHead = record; } this._appendAfter = record; return null; } _getOrCreateRecordForKey(key, value) { if (this._records.has(key)) { const record = this._records.get(key); this._maybeAddToChanges(record, value); const prev = record._prev; const next = record._next; if (prev) { prev._next = next; } if (next) { next._prev = prev; } record._next = null; record._prev = null; return record; } const record = new KeyValueChangeRecord_(key); this._records.set(key, record); record.currentValue = value; this._addToAdditions(record); return record; } /** @internal */ _reset() { if (this.isDirty) { let record; // let `_previousMapHead` contain the state of the map before the changes this._previousMapHead = this._mapHead; for (record = this._previousMapHead; record !== null; record = record._next) { record._nextPrevious = record._next; } // Update `record.previousValue` with the value of the item before the changes // We need to update all changed items (that's those which have been added and changed) for (record = this._changesHead; record !== null; record = record._nextChanged) { record.previousValue = record.currentValue; } for (record = this._additionsHead; record != null; record = record._nextAdded) { record.previousValue = record.currentValue; } this._changesHead = this._changesTail = null; this._additionsHead = this._additionsTail = null; this._removalsHead = null; } } // Add the record or a given key to the list of changes only when the value has actually changed _maybeAddToChanges(record, newValue) { if (!Object.is(newValue, record.currentValue)) { record.previousValue = record.currentValue; record.currentValue = newValue; this._addToChanges(record); } } _addToAdditions(record) { if (this._additionsHead === null) { this._additionsHead = this._additionsTail = record; } else { this._additionsTail._nextAdded = record; this._additionsTail = record; } } _addToChanges(record) { if (this._changesHead === null) { this._changesHead = this._changesTail = record; } else { this._changesTail._nextChanged = record; this._changesTail = record; } } /** @internal */ _forEach(obj, fn) { if (obj instanceof Map) { obj.forEach(fn); } else { Object.keys(obj).forEach(k => fn(obj[k], k)); } } } class KeyValueChangeRecord_ { constructor(key) { this.key = key; this.previousValue = null; this.currentValue = null; /** @internal */ this._nextPrevious = null; /** @internal */ this._next = null; /** @internal */ this._prev = null; /** @internal */ this._nextAdded = null; /** @internal */ this._nextRemoved = null; /** @internal */ this._nextChanged = null; } } function defaultIterableDiffersFactory() { return new IterableDiffers([new DefaultIterableDifferFactory()]); } /** * A repository of different iterable diffing strategies used by NgFor, NgClass, and others. * * @publicApi */ class IterableDiffers { /** @nocollapse */ static { this.Éµprov = ÉµÉµdefineInjectable({ token: IterableDiffers, providedIn: 'root', factory: defaultIterableDiffersFactory }); } constructor(factories) { this.factories = factories; } static create(factories, parent) { if (parent != null) { const copied = parent.factories.slice(); factories = factories.concat(copied); } return new IterableDiffers(factories); } /** * Takes an array of {@link IterableDifferFactory} and returns a provider used to extend the * inherited {@link IterableDiffers} instance with the provided factories and return a new * {@link IterableDiffers} instance. * * @usageNotes * ### Example * * The following example shows how to extend an existing list of factories, * which will only be applied to the injector for this component and its children. * This step is all that's required to make a new {@link IterableDiffer} available. * * ``` * @Component({ * viewProviders: [ * IterableDiffers.extend([new ImmutableListDiffer()]) * ] * }) * ``` */ static extend(factories) { return { provide: IterableDiffers, useFactory: (parent) => { // if parent is null, it means that we are in the root injector and we have just overridden // the default injection mechanism for IterableDiffers, in such a case just assume // `defaultIterableDiffersFactory`. return IterableDiffers.create(factories, parent || defaultIterableDiffersFactory()); }, // Dependency technically isn't optional, but we can provide a better error message this way. deps: [[IterableDiffers, new SkipSelf(), new Optional()]] }; } find(iterable) { const factory = this.factories.find(f => f.supports(iterable)); if (factory != null) { return factory; } else { throw new RuntimeError(901 /* RuntimeErrorCode.NO_SUPPORTING_DIFFER_FACTORY */, ngDevMode && `Cannot find a differ supporting object '${iterable}' of type '${getTypeNameForDebugging(iterable)}'`); } } } exports('IterableDiffers', IterableDiffers); function getTypeNameForDebugging(type) { return type['name'] || typeof type; } function defaultKeyValueDiffersFactory() { return new KeyValueDiffers([new DefaultKeyValueDifferFactory()]); } /** * A repository of different Map diffing strategies used by NgClass, NgStyle, and others. * * @publicApi */ class KeyValueDiffers { /** @nocollapse */ static { this.Éµprov = ÉµÉµdefineInjectable({ token: KeyValueDiffers, providedIn: 'root', factory: defaultKeyValueDiffersFactory }); } constructor(factories) { this.factories = factories; } static create(factories, parent) { if (parent) { const copied = parent.factories.slice(); factories = factories.concat(copied); } return new KeyValueDiffers(factories); } /** * Takes an array of {@link KeyValueDifferFactory} and returns a provider used to extend the * inherited {@link KeyValueDiffers} instance with the provided factories and return a new * {@link KeyValueDiffers} instance. * * @usageNotes * ### Example * * The following example shows how to extend an existing list of factories, * which will only be applied to the injector for this component and its children. * This step is all that's required to make a new {@link KeyValueDiffer} available. * * ``` * @Component({ * viewProviders: [ * KeyValueDiffers.extend([new ImmutableMapDiffer()]) * ] * }) * ``` */ static extend(factories) { return { provide: KeyValueDiffers, useFactory: (parent) => { // if parent is null, it means that we are in the root injector and we have just overridden // the default injection mechanism for KeyValueDiffers, in such a case just assume // `defaultKeyValueDiffersFactory`. return KeyValueDiffers.create(factories, parent || defaultKeyValueDiffersFactory()); }, // Dependency technically isn't optional, but we can provide a better error message this way. deps: [[KeyValueDiffers, new SkipSelf(), new Optional()]] }; } find(kv) { const factory = this.factories.find(f => f.supports(kv)); if (factory) { return factory; } throw new RuntimeError(901 /* RuntimeErrorCode.NO_SUPPORTING_DIFFER_FACTORY */, ngDevMode && `Cannot find a differ supporting object '${kv}'`); } } exports('KeyValueDiffers', KeyValueDiffers); /** * Structural diffing for `Object`s and `Map`s. */ const keyValDiff = [new DefaultKeyValueDifferFactory()]; /** * Structural diffing for `Iterable` types such as `Array`s. */ const iterableDiff = [new DefaultIterableDifferFactory()]; const defaultIterableDiffers = exports('ÉµdefaultIterableDiffers', new IterableDiffers(iterableDiff)); const defaultKeyValueDiffers = exports('ÉµdefaultKeyValueDiffers', new KeyValueDiffers(keyValDiff)); /** * @module * @description * Change detection enables data binding in Angular. */ /** * This platform has to be included in any other platform * * @publicApi */ const platformCore = exports('platformCore', createPlatformFactory(null, 'core', [])); /** * Re-exported by `BrowserModule`, which is included automatically in the root * `AppModule` when you create a new app with the CLI `new` command. Eagerly injects * `ApplicationRef` to instantiate it. * * @publicApi */ class ApplicationModule { // Inject ApplicationRef to make it eager... constructor(appRef) { } static { this.Éµfac = function ApplicationModule_Factory(t) { return new (t || ApplicationModule)(ÉµÉµinject(ApplicationRef)); }; } static { this.Éµmod = /*@__PURE__*/ ÉµÉµdefineNgModule({ type: ApplicationModule }); } static { this.Éµinj = /*@__PURE__*/ ÉµÉµdefineInjector({}); } } exports('ApplicationModule', ApplicationModule); (function () { (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(ApplicationModule, [{ type: NgModule }], function () { return [{ type: ApplicationRef }]; }, null); })(); /** * A collection that tracks all serialized views (`ngh` DOM annotations) * to avoid duplication. An attempt to add a duplicate view results in the * collection returning the index of the previously collected serialized view. * This reduces the number of annotations needed for a given page. */ class SerializedViewCollection { constructor() { this.views = []; this.indexByContent = new Map(); } add(serializedView) { const viewAsString = JSON.stringify(serializedView); if (!this.indexByContent.has(viewAsString)) { const index = this.views.length; this.views.push(serializedView); this.indexByContent.set(viewAsString, index); return index; } return this.indexByContent.get(viewAsString); } getAll() { return this.views; } } /** * Global counter that is used to generate a unique id for TViews * during the serialization process. */ let tViewSsrId = 0; /** * Generates a unique id for a given TView and returns this id. * The id is also stored on this instance of a TView and reused in * subsequent calls. * * This id is needed to uniquely identify and pick up dehydrated views * at runtime. */ function getSsrId(tView) { if (!tView.ssrId) { tView.ssrId = `t${tViewSsrId++}`; } return tView.ssrId; } /** * Computes the number of root nodes in a given view * (or child nodes in a given container if a tNode is provided). */ function calcNumRootNodes(tView, lView, tNode) { const rootNodes = []; collectNativeNodes(tView, lView, tNode, rootNodes); return rootNodes.length; } /** * Annotates all components bootstrapped in a given ApplicationRef * with info needed for hydration. * * @param appRef An instance of an ApplicationRef. * @param doc A reference to the current Document instance. */ function annotateForHydration(appRef, doc) { const serializedViewCollection = new SerializedViewCollection(); const corruptedTextNodes = new Map(); const viewRefs = appRef._views; for (const viewRef of viewRefs) { const lView = getComponentLViewForHydration(viewRef); // An `lView` might be `null` if a `ViewRef` represents // an embedded view (not a component view). if (lView !== null) { const hostElement = lView[HOST]; // Root elements might also be annotated with the `ngSkipHydration` attribute, // check if it's present before starting the serialization process. if (hostElement && !hostElement.hasAttribute(SKIP_HYDRATION_ATTR_NAME)) { const context = { serializedViewCollection, corruptedTextNodes, }; annotateHostElementForHydration(hostElement, lView, context); insertCorruptedTextNodeMarkers(corruptedTextNodes, doc); } } } // Note: we *always* include hydration info key and a corresponding value // into the TransferState, even if the list of serialized views is empty. // This is needed as a signal to the client that the server part of the // hydration logic was setup and enabled correctly. Otherwise, if a client // hydration doesn't find a key in the transfer state - an error is produced. const serializedViews = serializedViewCollection.getAll(); const transferState = appRef.injector.get(TransferState); transferState.set(NGH_DATA_KEY, serializedViews); } /** * Serializes the lContainer data into a list of SerializedView objects, * that represent views within this lContainer. * * @param lContainer the lContainer we are serializing * @param context the hydration context * @returns an array of the `SerializedView` objects */ function serializeLContainer(lContainer, context) { const views = []; let lastViewAsString = ''; for (let i = CONTAINER_HEADER_OFFSET; i < lContainer.length; i++) { let childLView = lContainer[i]; // If this is a root view, get an LView for the underlying component, // because it contains information about the view to serialize. if (isRootView(childLView)) { childLView = childLView[HEADER_OFFSET]; } const childTView = childLView[TVIEW]; let template; let numRootNodes = 0; if (childTView.type === 1 /* TViewType.Component */) { template = childTView.ssrId; // This is a component view, thus it has only 1 root node: the component // host node itself (other nodes would be inside that host node). numRootNodes = 1; } else { template = getSsrId(childTView); numRootNodes = calcNumRootNodes(childTView, childLView, childTView.firstChild); } const view = { [TEMPLATE_ID]: template, [NUM_ROOT_NODES]: numRootNodes, ...serializeLView(lContainer[i], context), }; // Check if the previous view has the same shape (for example, it was // produced by the *ngFor), in which case bump the counter on the previous // view instead of including the same information again. const currentViewAsString = JSON.stringify(view); if (views.length > 0 && currentViewAsString === lastViewAsString) { const previousView = views[views.length - 1]; previousView[MULTIPLIER] ??= 1; previousView[MULTIPLIER]++; } else { // Record this view as most recently added. lastViewAsString = currentViewAsString; views.push(view); } } return views; } /** * Helper function to produce a node path (which navigation steps runtime logic * needs to take to locate a node) and stores it in the `NODES` section of the * current serialized view. */ function appendSerializedNodePath(ngh, tNode, lView) { const noOffsetIndex = tNode.index - HEADER_OFFSET; ngh[NODES] ??= {}; ngh[NODES][noOffsetIndex] = calcPathForNode(tNode, lView); } /** * Helper function to append information about a disconnected node. * This info is needed at runtime to avoid DOM lookups for this element * and instead, the element would be created from scratch. */ function appendDisconnectedNodeIndex(ngh, tNode) { const noOffsetIndex = tNode.index - HEADER_OFFSET; ngh[DISCONNECTED_NODES] ??= []; if (!ngh[DISCONNECTED_NODES].includes(noOffsetIndex)) { ngh[DISCONNECTED_NODES].push(noOffsetIndex); } } /** * Serializes the lView data into a SerializedView object that will later be added * to the TransferState storage and referenced using the `ngh` attribute on a host * element. * * @param lView the lView we are serializing * @param context the hydration context * @returns the `SerializedView` object containing the data to be added to the host node */ function serializeLView(lView, context) { const ngh = {}; const tView = lView[TVIEW]; // Iterate over DOM element references in an LView. for (let i = HEADER_OFFSET; i < tView.bindingStartIndex; i++) { const tNode = tView.data[i]; const noOffsetIndex = i - HEADER_OFFSET; // Local refs (e.g.
) take up an extra slot in LViews // to store the same element. In this case, there is no information in // a corresponding slot in TNode data structure. If that's the case, just // skip this slot and move to the next one. if (!tNode) { continue; } // Check if a native node that represents a given TNode is disconnected from the DOM tree. // Such nodes must be excluded from the hydration (since the hydration won't be able to // find them), so the TNode ids are collected and used at runtime to skip the hydration. // // This situation may happen during the content projection, when some nodes don't make it // into one of the content projection slots (for example, when there is no default // slot in projector component's template). if (isDisconnectedNode(tNode, lView) && isContentProjectedNode(tNode)) { appendDisconnectedNodeIndex(ngh, tNode); continue; } if (Array.isArray(tNode.projection)) { for (const projectionHeadTNode of tNode.projection) { // We may have `null`s in slots with no projected content. if (!projectionHeadTNode) continue; if (!Array.isArray(projectionHeadTNode)) { // If we process re-projected content (i.e. `` // appears at projection location), skip annotations for this content // since all DOM nodes in this projection were handled while processing // a parent lView, which contains those nodes. if (!isProjectionTNode(projectionHeadTNode) && !isInSkipHydrationBlock(projectionHeadTNode)) { if (isDisconnectedNode(projectionHeadTNode, lView)) { // Check whether this node is connected, since we may have a TNode // in the data structure as a projection segment head, but the // content projection slot might be disabled (e.g. // ). appendDisconnectedNodeIndex(ngh, projectionHeadTNode); } else { appendSerializedNodePath(ngh, projectionHeadTNode, lView); } } } else { // If a value is an array, it means that we are processing a projection // where projectable nodes were passed in as DOM nodes (for example, when // calling `ViewContainerRef.createComponent(CmpA, {projectableNodes: [...]})`). // // In this scenario, nodes can come from anywhere (either created manually, // accessed via `document.querySelector`, etc) and may be in any state // (attached or detached from the DOM tree). As a result, we can not reliably // restore the state for such cases during hydration. throw unsupportedProjectionOfDomNodes(unwrapRNode(lView[i])); } } } if (isLContainer(lView[i])) { // Serialize information about a template. const embeddedTView = tNode.tView; if (embeddedTView !== null) { ngh[TEMPLATES] ??= {}; ngh[TEMPLATES][noOffsetIndex] = getSsrId(embeddedTView); } // Serialize views within this LContainer. const hostNode = lView[i][HOST]; // host node of this container // LView[i][HOST] can be of 2 different types: // - either a DOM node // - or an array that represents an LView of a component if (Array.isArray(hostNode)) { // This is a component, serialize info about it. const targetNode = unwrapRNode(hostNode); if (!targetNode.hasAttribute(SKIP_HYDRATION_ATTR_NAME)) { annotateHostElementForHydration(targetNode, hostNode, context); } } ngh[CONTAINERS] ??= {}; ngh[CONTAINERS][noOffsetIndex] = serializeLContainer(lView[i], context); } else if (Array.isArray(lView[i])) { // This is a component, annotate the host node with an `ngh` attribute. const targetNode = unwrapRNode(lView[i][HOST]); if (!targetNode.hasAttribute(SKIP_HYDRATION_ATTR_NAME)) { annotateHostElementForHydration(targetNode, lView[i], context); } } else { // case if (tNode.type & 8 /* TNodeType.ElementContainer */) { // An is represented by the number of // top-level nodes. This information is needed to skip over // those nodes to reach a corresponding anchor node (comment node). ngh[ELEMENT_CONTAINERS] ??= {}; ngh[ELEMENT_CONTAINERS][noOffsetIndex] = calcNumRootNodes(tView, lView, tNode.child); } else if (tNode.type & 16 /* TNodeType.Projection */) { // Current TNode represents an `` slot, thus it has no // DOM elements associated with it, so the **next sibling** node would // not be able to find an anchor. In this case, use full path instead. let nextTNode = tNode.next; // Skip over all `` slots in a row. while (nextTNode !== null && (nextTNode.type & 16 /* TNodeType.Projection */)) { nextTNode = nextTNode.next; } if (nextTNode && !isInSkipHydrationBlock(nextTNode)) { // Handle a tNode after the `` slot. appendSerializedNodePath(ngh, nextTNode, lView); } } else { // Handle cases where text nodes can be lost after DOM serialization: // 1. When there is an *empty text node* in DOM: in this case, this // node would not make it into the serialized string and as a result, // this node wouldn't be created in a browser. This would result in // a mismatch during the hydration, where the runtime logic would expect // a text node to be present in live DOM, but no text node would exist. // Example: `{{ name }}` when the `name` is an empty string. // This would result in `` string after serialization and // in a browser only the `span` element would be created. To resolve that, // an extra comment node is appended in place of an empty text node and // that special comment node is replaced with an empty text node *before* // hydration. // 2. When there are 2 consecutive text nodes present in the DOM. // Example: `
Hello world
`. // In this scenario, the live DOM would look like this: //
#text('Hello ') #text('world') #comment('container')
// Serialized string would look like this: `
Hello world
`. // The live DOM in a browser after that would be: //
#text('Hello world') #comment('container')
// Notice how 2 text nodes are now "merged" into one. This would cause hydration // logic to fail, since it'd expect 2 text nodes being present, not one. // To fix this, we insert a special comment node in between those text nodes, so // serialized representation is: `
Hello world
`. // This forces browser to create 2 text nodes separated by a comment node. // Before running a hydration process, this special comment node is removed, so the // live DOM has exactly the same state as it was before serialization. if (tNode.type & 1 /* TNodeType.Text */) { const rNode = unwrapRNode(lView[i]); // Collect this node as required special annotation only when its // contents is empty. Otherwise, such text node would be present on // the client after server-side rendering and no special handling needed. if (rNode.textContent === '') { context.corruptedTextNodes.set(rNode, "ngetn" /* TextNodeMarker.EmptyNode */); } else if (rNode.nextSibling?.nodeType === Node.TEXT_NODE) { context.corruptedTextNodes.set(rNode, "ngtns" /* TextNodeMarker.Separator */); } } if (tNode.projectionNext && tNode.projectionNext !== tNode.next && !isInSkipHydrationBlock(tNode.projectionNext)) { // Check if projection next is not the same as next, in which case // the node would not be found at creation time at runtime and we // need to provide a location for that node. appendSerializedNodePath(ngh, tNode.projectionNext, lView); } } } } return ngh; } /** * Determines whether a component instance that is represented * by a given LView uses `ViewEncapsulation.ShadowDom`. */ function componentUsesShadowDomEncapsulation(lView) { const instance = lView[CONTEXT]; return instance?.constructor ? getComponentDef(instance.constructor)?.encapsulation === ViewEncapsulation$1.ShadowDom : false; } /** * Annotates component host element for hydration: * - by either adding the `ngh` attribute and collecting hydration-related info * for the serialization and transferring to the client * - or by adding the `ngSkipHydration` attribute in case Angular detects that * component contents is not compatible with hydration. * * @param element The Host element to be annotated * @param lView The associated LView * @param context The hydration context */ function annotateHostElementForHydration(element, lView, context) { const renderer = lView[RENDERER]; if ((lView[FLAGS] & 32 /* LViewFlags.HasI18n */) === 32 /* LViewFlags.HasI18n */ || componentUsesShadowDomEncapsulation(lView)) { // Attach the skip hydration attribute if this component: // - either has i18n blocks, since hydrating such blocks is not yet supported // - or uses ShadowDom view encapsulation, since Domino doesn't support // shadow DOM, so we can not guarantee that client and server representations // would exactly match renderer.setAttribute(element, SKIP_HYDRATION_ATTR_NAME, ''); } else { const ngh = serializeLView(lView, context); const index = context.serializedViewCollection.add(ngh); renderer.setAttribute(element, NGH_ATTR_NAME, index.toString()); } } /** * Physically inserts the comment nodes to ensure empty text nodes and adjacent * text node separators are preserved after server serialization of the DOM. * These get swapped back for empty text nodes or separators once hydration happens * on the client. * * @param corruptedTextNodes The Map of text nodes to be replaced with comments * @param doc The document */ function insertCorruptedTextNodeMarkers(corruptedTextNodes, doc) { for (const [textNode, marker] of corruptedTextNodes) { textNode.after(doc.createComment(marker)); } } /** * Detects whether a given TNode represents a node that * is being content projected. */ function isContentProjectedNode(tNode) { let currentTNode = tNode; while (currentTNode != null) { // If we come across a component host node in parent nodes - // this TNode is in the content projection section. if (isComponentHost(currentTNode)) { return true; } currentTNode = currentTNode.parent; } return false; } /** * Check whether a given node exists, but is disconnected from the DOM. * * Note: we leverage the fact that we have this information available in the DOM emulation * layer (in Domino) for now. Longer-term solution should not rely on the DOM emulation and * only use internal data structures and state to compute this information. */ function isDisconnectedNode(tNode, lView) { return !(tNode.type & 16 /* TNodeType.Projection */) && !!lView[tNode.index] && !unwrapRNode(lView[tNode.index]).isConnected; } /** * Indicates whether the hydration-related code was added, * prevents adding it multiple times. */ let isHydrationSupportEnabled = false; /** * Defines a period of time that Angular waits for the `ApplicationRef.isStable` to emit `true`. * If there was no event with the `true` value during this time, Angular reports a warning. */ const APPLICATION_IS_STABLE_TIMEOUT = 10000; /** * Brings the necessary hydration code in tree-shakable manner. * The code is only present when the `provideClientHydration` is * invoked. Otherwise, this code is tree-shaken away during the * build optimization step. * * This technique allows us to swap implementations of methods so * tree shaking works appropriately when hydration is disabled or * enabled. It brings in the appropriate version of the method that * supports hydration only when enabled. */ function enableHydrationRuntimeSupport() { if (!isHydrationSupportEnabled) { isHydrationSupportEnabled = true; enableRetrieveHydrationInfoImpl(); enableLocateOrCreateElementNodeImpl(); enableLocateOrCreateTextNodeImpl(); enableLocateOrCreateElementContainerNodeImpl(); enableLocateOrCreateContainerAnchorImpl(); enableLocateOrCreateContainerRefImpl(); enableFindMatchingDehydratedViewImpl(); enableApplyRootElementTransformImpl(); } } /** * Detects whether the code is invoked in a browser. * Later on, this check should be replaced with a tree-shakable * flag (e.g. `!isServer`). */ function isBrowser() { return inject(PLATFORM_ID) === 'browser'; } /** * Outputs a message with hydration stats into a console. */ function printHydrationStats(injector) { const console = injector.get(Console); const message = `Angular hydrated ${ngDevMode.hydratedComponents} component(s) ` + `and ${ngDevMode.hydratedNodes} node(s), ` + `${ngDevMode.componentsSkippedHydration} component(s) were skipped. ` + `Note: this feature is in Developer Preview mode. ` + `Learn more at https://angular.io/guide/hydration.`; // tslint:disable-next-line:no-console console.log(message); } /** * Returns a Promise that is resolved when an application becomes stable. */ function whenStable(appRef, injector) { const isStablePromise = appRef.isStable.pipe(first((isStable) => isStable)).toPromise(); if (typeof ngDevMode !== 'undefined' && ngDevMode) { const timeoutTime = APPLICATION_IS_STABLE_TIMEOUT; const console = injector.get(Console); const ngZone = injector.get(NgZone); // The following call should not and does not prevent the app to become stable // We cannot use RxJS timer here because the app would remain unstable. // This also avoids an extra change detection cycle. const timeoutId = ngZone.runOutsideAngular(() => { return setTimeout(() => logWarningOnStableTimedout(timeoutTime, console), timeoutTime); }); isStablePromise.finally(() => clearTimeout(timeoutId)); } return isStablePromise.then(() => { }); } /** * Returns a set of providers required to setup hydration support * for an application that is server side rendered. This function is * included into the `provideClientHydration` public API function from * the `platform-browser` package. * * The function sets up an internal flag that would be recognized during * the server side rendering time as well, so there is no need to * configure or change anything in NgUniversal to enable the feature. */ function withDomHydration() { return makeEnvironmentProviders([ { provide: IS_HYDRATION_DOM_REUSE_ENABLED, useFactory: () => { let isEnabled = true; if (isBrowser()) { // On the client, verify that the server response contains // hydration annotations. Otherwise, keep hydration disabled. const transferState = inject(TransferState, { optional: true }); isEnabled = !!transferState?.get(NGH_DATA_KEY, null); if (!isEnabled && (typeof ngDevMode !== 'undefined' && ngDevMode)) { const console = inject(Console); const message = formatRuntimeError(-505 /* RuntimeErrorCode.MISSING_HYDRATION_ANNOTATIONS */, 'Angular hydration was requested on the client, but there was no ' + 'serialized information present in the server response, ' + 'thus hydration was not enabled. ' + 'Make sure the `provideClientHydration()` is included into the list ' + 'of providers in the server part of the application configuration.'); // tslint:disable-next-line:no-console console.warn(message); } } if (isEnabled) { inject(ENABLED_SSR_FEATURES).add('hydration'); } return isEnabled; }, }, { provide: ENVIRONMENT_INITIALIZER, useValue: () => { // Since this function is used across both server and client, // make sure that the runtime code is only added when invoked // on the client. Moving forward, the `isBrowser` check should // be replaced with a tree-shakable alternative (e.g. `isServer` // flag). if (isBrowser() && inject(IS_HYDRATION_DOM_REUSE_ENABLED)) { enableHydrationRuntimeSupport(); } }, multi: true, }, { provide: PRESERVE_HOST_CONTENT, useFactory: () => { // Preserve host element content only in a browser // environment and when hydration is configured properly. // On a server, an application is rendered from scratch, // so the host content needs to be empty. return isBrowser() && inject(IS_HYDRATION_DOM_REUSE_ENABLED); } }, { provide: APP_BOOTSTRAP_LISTENER, useFactory: () => { if (isBrowser() && inject(IS_HYDRATION_DOM_REUSE_ENABLED)) { const appRef = inject(ApplicationRef); const injector = inject(Injector); return () => { whenStable(appRef, injector).then(() => { // Wait until an app becomes stable and cleanup all views that // were not claimed during the application bootstrap process. // The timing is similar to when we start the serialization process // on the server. cleanupDehydratedViews(appRef); if (typeof ngDevMode !== 'undefined' && ngDevMode) { printHydrationStats(injector); } }); }; } return () => { }; // noop }, multi: true, } ]); } /** * * @param time The time in ms until the stable timedout warning message is logged */ function logWarningOnStableTimedout(time, console) { const message = `Angular hydration expected the ApplicationRef.isStable() to emit \`true\`, but it ` + `didn't happen within ${time}ms. Angular hydration logic depends on the application becoming stable ` + `as a signal to complete hydration process.`; console.warn(formatRuntimeError(-506 /* RuntimeErrorCode.HYDRATION_STABLE_TIMEDOUT */, message)); } /** Coerces a value (typically a string) to a boolean. */ function coerceToBoolean(value) { return typeof value === 'boolean' ? value : (value != null && value !== 'false'); } /** * Compiles a partial directive declaration object into a full directive definition object. * * @codeGenApi */ function ÉµÉµngDeclareDirective(decl) { const compiler = getCompilerFacade({ usage: 1 /* JitCompilerUsage.PartialDeclaration */, kind: 'directive', type: decl.type }); return compiler.compileDirectiveDeclaration(angularCoreEnv, `ng:///${decl.type.name}/Éµfac.js`, decl); } /** * Evaluates the class metadata declaration. * * @codeGenApi */ function ÉµÉµngDeclareClassMetadata(decl) { setClassMetadata(decl.type, decl.decorators, decl.ctorParameters ?? null, decl.propDecorators ?? null); } /** * Compiles a partial component declaration object into a full component definition object. * * @codeGenApi */ function ÉµÉµngDeclareComponent(decl) { const compiler = getCompilerFacade({ usage: 1 /* JitCompilerUsage.PartialDeclaration */, kind: 'component', type: decl.type }); return compiler.compileComponentDeclaration(angularCoreEnv, `ng:///${decl.type.name}/Éµcmp.js`, decl); } /** * Compiles a partial pipe declaration object into a full pipe definition object. * * @codeGenApi */ function ÉµÉµngDeclareFactory(decl) { const compiler = getCompilerFacade({ usage: 1 /* JitCompilerUsage.PartialDeclaration */, kind: getFactoryKind(decl.target), type: decl.type }); return compiler.compileFactoryDeclaration(angularCoreEnv, `ng:///${decl.type.name}/Éµfac.js`, decl); } function getFactoryKind(target) { switch (target) { case FactoryTarget.Directive: return 'directive'; case FactoryTarget.Component: return 'component'; case FactoryTarget.Injectable: return 'injectable'; case FactoryTarget.Pipe: return 'pipe'; case FactoryTarget.NgModule: return 'NgModule'; } } /** * Compiles a partial injectable declaration object into a full injectable definition object. * * @codeGenApi */ function ÉµÉµngDeclareInjectable(decl) { const compiler = getCompilerFacade({ usage: 1 /* JitCompilerUsage.PartialDeclaration */, kind: 'injectable', type: decl.type }); return compiler.compileInjectableDeclaration(angularCoreEnv, `ng:///${decl.type.name}/Éµprov.js`, decl); } /** * Compiles a partial injector declaration object into a full injector definition object. * * @codeGenApi */ function ÉµÉµngDeclareInjector(decl) { const compiler = getCompilerFacade({ usage: 1 /* JitCompilerUsage.PartialDeclaration */, kind: 'NgModule', type: decl.type }); return compiler.compileInjectorDeclaration(angularCoreEnv, `ng:///${decl.type.name}/Éµinj.js`, decl); } /** * Compiles a partial NgModule declaration object into a full NgModule definition object. * * @codeGenApi */ function ÉµÉµngDeclareNgModule(decl) { const compiler = getCompilerFacade({ usage: 1 /* JitCompilerUsage.PartialDeclaration */, kind: 'NgModule', type: decl.type }); return compiler.compileNgModuleDeclaration(angularCoreEnv, `ng:///${decl.type.name}/Éµmod.js`, decl); } /** * Compiles a partial pipe declaration object into a full pipe definition object. * * @codeGenApi */ function ÉµÉµngDeclarePipe(decl) { const compiler = getCompilerFacade({ usage: 1 /* JitCompilerUsage.PartialDeclaration */, kind: 'pipe', type: decl.type }); return compiler.compilePipeDeclaration(angularCoreEnv, `ng:///${decl.type.name}/Éµpipe.js`, decl); } // clang-format off // clang-format on // clang-format off // clang-format on // This file exists to allow the set of reactivity exports to be modified in g3, as these APIs are /** * Creates a `ComponentRef` instance based on provided component type and a set of options. * * @usageNotes * * The example below demonstrates how the `createComponent` function can be used * to create an instance of a ComponentRef dynamically and attach it to an ApplicationRef, * so that it gets included into change detection cycles. * * Note: the example uses standalone components, but the function can also be used for * non-standalone components (declared in an NgModule) as well. * * ```typescript * @Component({ * standalone: true, * template: `Hello {{ name }}!` * }) * class HelloComponent { * name = 'Angular'; * } * * @Component({ * standalone: true, * template: `
` * }) * class RootComponent {} * * // Bootstrap an application. * const applicationRef = await bootstrapApplication(RootComponent); * * // Locate a DOM node that would be used as a host. * const host = document.getElementById('hello-component-host'); * * // Get an `EnvironmentInjector` instance from the `ApplicationRef`. * const environmentInjector = applicationRef.injector; * * // We can now create a `ComponentRef` instance. * const componentRef = createComponent(HelloComponent, {host, environmentInjector}); * * // Last step is to register the newly created ref using the `ApplicationRef` instance * // to include the component view into change detection cycles. * applicationRef.attachView(componentRef.hostView); * ``` * * @param component Component class reference. * @param options Set of options to use: * * `environmentInjector`: An `EnvironmentInjector` instance to be used for the component, see * additional info about it [here](/guide/standalone-components#environment-injectors). * * `hostElement` (optional): A DOM node that should act as a host node for the component. If not * provided, Angular creates one based on the tag name used in the component selector (and falls * back to using `div` if selector doesn't have tag name info). * * `elementInjector` (optional): An `ElementInjector` instance, see additional info about it * [here](/guide/hierarchical-dependency-injection#elementinjector). * * `projectableNodes` (optional): A list of DOM nodes that should be projected through * [``](api/core/ng-content) of the new component instance. * @returns ComponentRef instance that represents a given Component. * * @publicApi */ function createComponent(component, options) { ngDevMode && assertComponentDef(component); const componentDef = getComponentDef(component); const elementInjector = options.elementInjector || getNullInjector(); const factory = new ComponentFactory(componentDef); return factory.create(elementInjector, options.projectableNodes, options.hostElement, options.environmentInjector); } /** * Creates an object that allows to retrieve component metadata. * * @usageNotes * * The example below demonstrates how to use the function and how the fields * of the returned object map to the component metadata. * * ```typescript * @Component({ * standalone: true, * selector: 'foo-component', * template: ` * * * `, * }) * class FooComponent { * @Input('inputName') inputPropName: string; * @Output('outputName') outputPropName = new EventEmitter(); * } * * const mirror = reflectComponentType(FooComponent); * expect(mirror.type).toBe(FooComponent); * expect(mirror.selector).toBe('foo-component'); * expect(mirror.isStandalone).toBe(true); * expect(mirror.inputs).toEqual([{propName: 'inputName', templateName: 'inputPropName'}]); * expect(mirror.outputs).toEqual([{propName: 'outputName', templateName: 'outputPropName'}]); * expect(mirror.ngContentSelectors).toEqual([ * '*', // first `` in a template, the selector defaults to `*` * 'content-selector-a' // second `` in a template * ]); * ``` * * @param component Component class reference. * @returns An object that allows to retrieve component metadata. * * @publicApi */ function reflectComponentType(component) { const componentDef = getComponentDef(component); if (!componentDef) return null; const factory = new ComponentFactory(componentDef); return { get selector() { return factory.selector; }, get type() { return factory.componentType; }, get inputs() { return factory.inputs; }, get outputs() { return factory.outputs; }, get ngContentSelectors() { return factory.ngContentSelectors; }, get isStandalone() { return componentDef.standalone; }, }; } /** * Merge multiple application configurations from left to right. * * @param configs Two or more configurations to be merged. * @returns A merged [ApplicationConfig](api/core/ApplicationConfig). * * @publicApi */ function mergeApplicationConfig(...configs) { return configs.reduce((prev, curr) => { return Object.assign(prev, curr, { providers: [...prev.providers, ...curr.providers] }); }, { providers: [] }); } /** * @module * @description * Entry point from which you should import all public core APIs. */ if (typeof ngDevMode !== 'undefined' && ngDevMode) { // This helper is to give a reasonable error message to people upgrading to v9 that have not yet // installed `@angular/localize` in their app. // tslint:disable-next-line: no-toplevel-property-access _global.$localize = _global.$localize || function () { throw new Error('It looks like your application or one of its dependencies is using i18n.\n' + 'Angular 9 introduced a global `$localize()` function that needs to be loaded.\n' + 'Please run `ng add @angular/localize` from the Angular CLI.\n' + '(For non-CLI projects, add `import \'@angular/localize/init\';` to your `polyfills.ts` file.\n' + 'For server-side rendering applications add the import to your `main.server.ts` file.)'); }; } }) }; })); //# sourceMappingURL=angular-core.js.map