@angular/compiler 15.0.0-next.3 → 15.0.0-next.5

package/fesm2015/testing.mjs

@@ -1,5 +1,5 @@
 /**
- * @license Angular v15.0.0-next.3
+ * @license Angular v15.0.0-next.5
  * (c) 2010-2022 Google LLC. https://angular.io/
  * License: MIT
  */

package/fesm2020/compiler.mjs

@@ -1,5 +1,5 @@
 /**
- * @license Angular v15.0.0-next.3
+ * @license Angular v15.0.0-next.5
  * (c) 2010-2022 Google LLC. https://angular.io/
  * License: MIT
  */
@@ -7691,7 +7691,26 @@ class BuiltinFunctionCall extends Call {
  * found in the LICENSE file at https://angular.io/license
  */
 /**
- * This file is a port of shadowCSS from webcomponents.js to TypeScript.
+ * The following set contains all keywords that can be used in the animation css shorthand
+ * property and is used during the scoping of keyframes to make sure such keywords
+ * are not modified.
+ */
+const animationKeywords = new Set([
+    // global values
+    'inherit', 'initial', 'revert', 'unset',
+    // animation-direction
+    'alternate', 'alternate-reverse', 'normal', 'reverse',
+    // animation-fill-mode
+    'backwards', 'both', 'forwards', 'none',
+    // animation-play-state
+    'paused', 'running',
+    // animation-timing-function
+    'ease', 'ease-in', 'ease-in-out', 'ease-out', 'linear', 'step-start', 'step-end',
+    // `steps()` function
+    'end', 'jump-both', 'jump-end', 'jump-none', 'jump-start', 'start'
+]);
+/**
+ * The following class is a port of shadowCSS from webcomponents.js to TypeScript.
  *
  * Please make sure to keep to edits in sync with the source file.
  *
@@ -7817,6 +7836,21 @@ class BuiltinFunctionCall extends Call {
 class ShadowCss {
     constructor() {
         this.strictStyling = true;
+        /**
+         * Regular expression used to extrapolate the possible keyframes from an
+         * animation declaration (with possibly multiple animation definitions)
+         *
+         * The regular expression can be divided in three parts
+         *  - (^|\s+)
+         *    simply captures how many (if any) leading whitespaces are present
+         *  - (?:(?:(['"])((?:\\\\|\\\2|(?!\2).)+)\2)|(-?[A-Za-z][\w\-]*))
+         *    captures two different possible keyframes, ones which are quoted or ones which are valid css
+         * idents (custom properties excluded)
+         *  - (?=[,\s;]|$)
+         *    simply matches the end of the possible keyframe, valid endings are: a comma, a space, a
+         * semicolon or the end of the string
+         */
+        this._animationDeclarationKeyframesRe = /(^|\s+)(?:(?:(['"])((?:\\\\|\\\2|(?!\2).)+)\2)|(-?[A-Za-z][\w\-]*))(?=[,\s]|$)/g;
     }
     /*
      * Shim some cssText with the given selector. Returns cssText that can
@@ -7837,6 +7871,143 @@ class ShadowCss {
         cssText = this._insertPolyfillDirectivesInCssText(cssText);
         return this._insertPolyfillRulesInCssText(cssText);
     }
+    /**
+     * Process styles to add scope to keyframes.
+     *
+     * Modify both the names of the keyframes defined in the component styles and also the css
+     * animation rules using them.
+     *
+     * Animation rules using keyframes defined elsewhere are not modified to allow for globally
+     * defined keyframes.
+     *
+     * For example, we convert this css:
+     *
+     * ```
+     * .box {
+     *   animation: box-animation 1s forwards;
+     * }
+     *
+     * @keyframes box-animation {
+     *   to {
+     *     background-color: green;
+     *   }
+     * }
+     * ```
+     *
+     * to this:
+     *
+     * ```
+     * .box {
+     *   animation: scopeName_box-animation 1s forwards;
+     * }
+     *
+     * @keyframes scopeName_box-animation {
+     *   to {
+     *     background-color: green;
+     *   }
+     * }
+     * ```
+     *
+     * @param cssText the component's css text that needs to be scoped.
+     * @param scopeSelector the component's scope selector.
+     *
+     * @returns the scoped css text.
+     */
+    _scopeKeyframesRelatedCss(cssText, scopeSelector) {
+        const unscopedKeyframesSet = new Set();
+        const scopedKeyframesCssText = processRules(cssText, rule => this._scopeLocalKeyframeDeclarations(rule, scopeSelector, unscopedKeyframesSet));
+        return processRules(scopedKeyframesCssText, rule => this._scopeAnimationRule(rule, scopeSelector, unscopedKeyframesSet));
+    }
+    /**
+     * Scopes local keyframes names, returning the updated css rule and it also
+     * adds the original keyframe name to a provided set to collect all keyframes names
+     * so that it can later be used to scope the animation rules.
+     *
+     * For example, it takes a rule such as:
+     *
+     * ```
+     * @keyframes box-animation {
+     *   to {
+     *     background-color: green;
+     *   }
+     * }
+     * ```
+     *
+     * and returns:
+     *
+     * ```
+     * @keyframes scopeName_box-animation {
+     *   to {
+     *     background-color: green;
+     *   }
+     * }
+     * ```
+     * and as a side effect it adds "box-animation" to the `unscopedKeyframesSet` set
+     *
+     * @param cssRule the css rule to process.
+     * @param scopeSelector the component's scope selector.
+     * @param unscopedKeyframesSet the set of unscoped keyframes names (which can be
+     * modified as a side effect)
+     *
+     * @returns the css rule modified with the scoped keyframes name.
+     */
+    _scopeLocalKeyframeDeclarations(rule, scopeSelector, unscopedKeyframesSet) {
+        return {
+            ...rule,
+            selector: rule.selector.replace(/(^@(?:-webkit-)?keyframes(?:\s+))(['"]?)(.+)\2(\s*)$/, (_, start, quote, keyframeName, endSpaces) => {
+                unscopedKeyframesSet.add(unescapeQuotes(keyframeName, quote));
+                return `${start}${quote}${scopeSelector}_${keyframeName}${quote}${endSpaces}`;
+            }),
+        };
+    }
+    /**
+     * Function used to scope a keyframes name (obtained from an animation declaration)
+     * using an existing set of unscopedKeyframes names to discern if the scoping needs to be
+     * performed (keyframes names of keyframes not defined in the component's css need not to be
+     * scoped).
+     *
+     * @param keyframe the keyframes name to check.
+     * @param scopeSelector the component's scope selector.
+     * @param unscopedKeyframesSet the set of unscoped keyframes names.
+     *
+     * @returns the scoped name of the keyframe, or the original name is the name need not to be
+     * scoped.
+     */
+    _scopeAnimationKeyframe(keyframe, scopeSelector, unscopedKeyframesSet) {
+        return keyframe.replace(/^(\s*)(['"]?)(.+?)\2(\s*)$/, (_, spaces1, quote, name, spaces2) => {
+            name = `${unscopedKeyframesSet.has(unescapeQuotes(name, quote)) ? scopeSelector + '_' : ''}${name}`;
+            return `${spaces1}${quote}${name}${quote}${spaces2}`;
+        });
+    }
+    /**
+     * Scope an animation rule so that the keyframes mentioned in such rule
+     * are scoped if defined in the component's css and left untouched otherwise.
+     *
+     * It can scope values of both the 'animation' and 'animation-name' properties.
+     *
+     * @param rule css rule to scope.
+     * @param scopeSelector the component's scope selector.
+     * @param unscopedKeyframesSet the set of unscoped keyframes names.
+     *
+     * @returns the updated css rule.
+     **/
+    _scopeAnimationRule(rule, scopeSelector, unscopedKeyframesSet) {
+        let content = rule.content.replace(/((?:^|\s+|;)(?:-webkit-)?animation(?:\s*):(?:\s*))([^;]+)/g, (_, start, animationDeclarations) => start +
+            animationDeclarations.replace(this._animationDeclarationKeyframesRe, (original, leadingSpaces, quote = '', quotedName, nonQuotedName) => {
+                if (quotedName) {
+                    return `${leadingSpaces}${this._scopeAnimationKeyframe(`${quote}${quotedName}${quote}`, scopeSelector, unscopedKeyframesSet)}`;
+                }
+                else {
+                    return animationKeywords.has(nonQuotedName) ?
+                        original :
+                        `${leadingSpaces}${this._scopeAnimationKeyframe(nonQuotedName, scopeSelector, unscopedKeyframesSet)}`;
+                }
+            }));
+        content = content.replace(/((?:^|\s+|;)(?:-webkit-)?animation-name(?:\s*):(?:\s*))([^;]+)/g, (_match, start, commaSeparatedKeyframes) => `${start}${commaSeparatedKeyframes.split(',')
+            .map((keyframe) => this._scopeAnimationKeyframe(keyframe, scopeSelector, unscopedKeyframesSet))
+            .join(',')}`);
+        return { ...rule, content };
+    }
     /*
      * Process styles to convert native ShadowDOM rules that will trip
      * up the css parser; we rely on decorating the stylesheet with inert rules.
@@ -7895,6 +8066,7 @@ class ShadowCss {
         cssText = this._convertColonHostContext(cssText);
         cssText = this._convertShadowDOMSelectors(cssText);
         if (scopeSelector) {
+            cssText = this._scopeKeyframesRelatedCss(cssText, scopeSelector);
             cssText = this._scopeSelectors(cssText, scopeSelector, hostSelector);
         }
         cssText = cssText + '\n' + unscopedRules;
@@ -8266,11 +8438,14 @@ function extractCommentsWithHash(input) {
     return input.match(_commentWithHashRe) || [];
 }
 const BLOCK_PLACEHOLDER = '%BLOCK%';
-const QUOTE_PLACEHOLDER = '%QUOTED%';
 const _ruleRe = /(\s*)([^;\{\}]+?)(\s*)((?:{%BLOCK%}?\s*;?)|(?:\s*;))/g;
-const _quotedRe = /%QUOTED%/g;
 const CONTENT_PAIRS = new Map([['{', '}']]);
-const QUOTE_PAIRS = new Map([[`"`, `"`], [`'`, `'`]]);
+const COMMA_IN_PLACEHOLDER = '%COMMA_IN_PLACEHOLDER%';
+const SEMI_IN_PLACEHOLDER = '%SEMI_IN_PLACEHOLDER%';
+const COLON_IN_PLACEHOLDER = '%COLON_IN_PLACEHOLDER%';
+const _cssCommaInPlaceholderReGlobal = new RegExp(COMMA_IN_PLACEHOLDER, 'g');
+const _cssSemiInPlaceholderReGlobal = new RegExp(SEMI_IN_PLACEHOLDER, 'g');
+const _cssColonInPlaceholderReGlobal = new RegExp(COLON_IN_PLACEHOLDER, 'g');
 class CssRule {
     constructor(selector, content) {
         this.selector = selector;
@@ -8278,12 +8453,10 @@ class CssRule {
     }
 }
 function processRules(input, ruleCallback) {
-    const inputWithEscapedQuotes = escapeBlocks(input, QUOTE_PAIRS, QUOTE_PLACEHOLDER);
-    const inputWithEscapedBlocks = escapeBlocks(inputWithEscapedQuotes.escapedString, CONTENT_PAIRS, BLOCK_PLACEHOLDER);
+    const escaped = escapeInStrings(input);
+    const inputWithEscapedBlocks = escapeBlocks(escaped, CONTENT_PAIRS, BLOCK_PLACEHOLDER);
     let nextBlockIndex = 0;
-    let nextQuoteIndex = 0;
-    return inputWithEscapedBlocks.escapedString
-        .replace(_ruleRe, (...m) => {
+    const escapedResult = inputWithEscapedBlocks.escapedString.replace(_ruleRe, (...m) => {
         const selector = m[2];
         let content = '';
         let suffix = m[4];
@@ -8295,8 +8468,8 @@ function processRules(input, ruleCallback) {
         }
         const rule = ruleCallback(new CssRule(selector, content));
         return `${m[1]}${rule.selector}${m[3]}${contentPrefix}${rule.content}${suffix}`;
-    })
-        .replace(_quotedRe, () => inputWithEscapedQuotes.blocks[nextQuoteIndex++]);
+    });
+    return unescapeInStrings(escapedResult);
 }
 class StringWithEscapedBlocks {
     constructor(escapedString, blocks) {
@@ -8347,6 +8520,112 @@ function escapeBlocks(input, charPairs, placeholder) {
     }
     return new StringWithEscapedBlocks(resultParts.join(''), escapedBlocks);
 }
+/**
+ * Object containing as keys characters that should be substituted by placeholders
+ * when found in strings during the css text parsing, and as values the respective
+ * placeholders
+ */
+const ESCAPE_IN_STRING_MAP = {
+    ';': SEMI_IN_PLACEHOLDER,
+    ',': COMMA_IN_PLACEHOLDER,
+    ':': COLON_IN_PLACEHOLDER
+};
+/**
+ * Parse the provided css text and inside strings (meaning, inside pairs of unescaped single or
+ * double quotes) replace specific characters with their respective placeholders as indicated
+ * by the `ESCAPE_IN_STRING_MAP` map.
+ *
+ * For example convert the text
+ *  `animation: "my-anim:at\"ion" 1s;`
+ * to
+ *  `animation: "my-anim%COLON_IN_PLACEHOLDER%at\"ion" 1s;`
+ *
+ * This is necessary in order to remove the meaning of some characters when found inside strings
+ * (for example `;` indicates the end of a css declaration, `,` the sequence of values and `:` the
+ * division between property and value during a declaration, none of these meanings apply when such
+ * characters are within strings and so in order to prevent parsing issues they need to be replaced
+ * with placeholder text for the duration of the css manipulation process).
+ *
+ * @param input the original css text.
+ *
+ * @returns the css text with specific characters in strings replaced by placeholders.
+ **/
+function escapeInStrings(input) {
+    let result = input;
+    let currentQuoteChar = null;
+    for (let i = 0; i < result.length; i++) {
+        const char = result[i];
+        if (char === '\\') {
+            i++;
+        }
+        else {
+            if (currentQuoteChar !== null) {
+                // index i is inside a quoted sub-string
+                if (char === currentQuoteChar) {
+                    currentQuoteChar = null;
+                }
+                else {
+                    const placeholder = ESCAPE_IN_STRING_MAP[char];
+                    if (placeholder) {
+                        result = `${result.substr(0, i)}${placeholder}${result.substr(i + 1)}`;
+                        i += placeholder.length - 1;
+                    }
+                }
+            }
+            else if (char === '\'' || char === '"') {
+                currentQuoteChar = char;
+            }
+        }
+    }
+    return result;
+}
+/**
+ * Replace in a string all occurrences of keys in the `ESCAPE_IN_STRING_MAP` map with their
+ * original representation, this is simply used to revert the changes applied by the
+ * escapeInStrings function.
+ *
+ * For example it reverts the text:
+ *  `animation: "my-anim%COLON_IN_PLACEHOLDER%at\"ion" 1s;`
+ * to it's original form of:
+ *  `animation: "my-anim:at\"ion" 1s;`
+ *
+ * Note: For the sake of simplicity this function does not check that the placeholders are
+ * actually inside strings as it would anyway be extremely unlikely to find them outside of strings.
+ *
+ * @param input the css text containing the placeholders.
+ *
+ * @returns the css text without the placeholders.
+ */
+function unescapeInStrings(input) {
+    let result = input.replace(_cssCommaInPlaceholderReGlobal, ',');
+    result = result.replace(_cssSemiInPlaceholderReGlobal, ';');
+    result = result.replace(_cssColonInPlaceholderReGlobal, ':');
+    return result;
+}
+/**
+ * Unescape all quotes present in a string, but only if the string was actually already
+ * quoted.
+ *
+ * This generates a "canonical" representation of strings which can be used to match strings
+ * which would otherwise only differ because of differently escaped quotes.
+ *
+ * For example it converts the string (assumed to be quoted):
+ *  `this \\"is\\" a \\'\\\\'test`
+ * to:
+ *  `this "is" a '\\\\'test`
+ * (note that the latter backslashes are not removed as they are not actually escaping the single
+ * quote)
+ *
+ *
+ * @param input the string possibly containing escaped quotes.
+ * @param isQuoted boolean indicating whether the string was quoted inside a bigger string (if not
+ * then it means that it doesn't represent an inner string and thus no unescaping is required)
+ *
+ * @returns the string in the "canonical" representation without escaped quotes.
+ */
+function unescapeQuotes(str, isQuoted) {
+    return !isQuoted ? str : str.replace(/((?:^|[^\\])(?:\\\\)*)\\(?=['"])/g, '$1');
+}
 /**
  * Combine the `contextSelectors` with the `hostMarker` and the `otherSelectors`
  * to create a selector that matches the same as `:host-context()`.
@@ -20008,7 +20287,7 @@ function publishFacade(global) {
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-const VERSION = new Version('15.0.0-next.3');
+const VERSION = new Version('15.0.0-next.5');
 
 /**
  * @license
@@ -20018,10 +20297,9 @@ const VERSION = new Version('15.0.0-next.3');
  * found in the LICENSE file at https://angular.io/license
  */
 class CompilerConfig {
-    constructor({ defaultEncapsulation = ViewEncapsulation.Emulated, useJit = true, jitDevMode = false, missingTranslation = null, preserveWhitespaces, strictInjectionParameters } = {}) {
+    constructor({ defaultEncapsulation = ViewEncapsulation.Emulated, useJit = true, missingTranslation = null, preserveWhitespaces, strictInjectionParameters } = {}) {
         this.defaultEncapsulation = defaultEncapsulation;
         this.useJit = !!useJit;
-        this.jitDevMode = !!jitDevMode;
         this.missingTranslation = missingTranslation;
         this.preserveWhitespaces = preserveWhitespacesDefault(noUndefined(preserveWhitespaces));
         this.strictInjectionParameters = strictInjectionParameters === true;
@@ -22041,7 +22319,7 @@ const MINIMUM_PARTIAL_LINKER_VERSION$6 = '12.0.0';
 function compileDeclareClassMetadata(metadata) {
     const definitionMap = new DefinitionMap();
     definitionMap.set('minVersion', literal(MINIMUM_PARTIAL_LINKER_VERSION$6));
-    definitionMap.set('version', literal('15.0.0-next.3'));
+    definitionMap.set('version', literal('15.0.0-next.5'));
     definitionMap.set('ngImport', importExpr(Identifiers.core));
     definitionMap.set('type', metadata.type);
     definitionMap.set('decorators', metadata.decorators);
@@ -22158,7 +22436,7 @@ function compileDeclareDirectiveFromMetadata(meta) {
 function createDirectiveDefinitionMap(meta) {
     const definitionMap = new DefinitionMap();
     definitionMap.set('minVersion', literal(MINIMUM_PARTIAL_LINKER_VERSION$5));
-    definitionMap.set('version', literal('15.0.0-next.3'));
+    definitionMap.set('version', literal('15.0.0-next.5'));
     // e.g. `type: MyDirective`
     definitionMap.set('type', meta.internalType);
     if (meta.isStandalone) {
@@ -22397,7 +22675,7 @@ const MINIMUM_PARTIAL_LINKER_VERSION$4 = '12.0.0';
 function compileDeclareFactoryFunction(meta) {
     const definitionMap = new DefinitionMap();
     definitionMap.set('minVersion', literal(MINIMUM_PARTIAL_LINKER_VERSION$4));
-    definitionMap.set('version', literal('15.0.0-next.3'));
+    definitionMap.set('version', literal('15.0.0-next.5'));
     definitionMap.set('ngImport', importExpr(Identifiers.core));
     definitionMap.set('type', meta.internalType);
     definitionMap.set('deps', compileDependencies(meta.deps));
@@ -22439,7 +22717,7 @@ function compileDeclareInjectableFromMetadata(meta) {
 function createInjectableDefinitionMap(meta) {
     const definitionMap = new DefinitionMap();
     definitionMap.set('minVersion', literal(MINIMUM_PARTIAL_LINKER_VERSION$3));
-    definitionMap.set('version', literal('15.0.0-next.3'));
+    definitionMap.set('version', literal('15.0.0-next.5'));
     definitionMap.set('ngImport', importExpr(Identifiers.core));
     definitionMap.set('type', meta.internalType);
     // Only generate providedIn property if it has a non-null value
@@ -22497,7 +22775,7 @@ function compileDeclareInjectorFromMetadata(meta) {
 function createInjectorDefinitionMap(meta) {
     const definitionMap = new DefinitionMap();
     definitionMap.set('minVersion', literal(MINIMUM_PARTIAL_LINKER_VERSION$2));
-    definitionMap.set('version', literal('15.0.0-next.3'));
+    definitionMap.set('version', literal('15.0.0-next.5'));
     definitionMap.set('ngImport', importExpr(Identifiers.core));
     definitionMap.set('type', meta.internalType);
     definitionMap.set('providers', meta.providers);
@@ -22534,7 +22812,7 @@ function compileDeclareNgModuleFromMetadata(meta) {
 function createNgModuleDefinitionMap(meta) {
     const definitionMap = new DefinitionMap();
     definitionMap.set('minVersion', literal(MINIMUM_PARTIAL_LINKER_VERSION$1));
-    definitionMap.set('version', literal('15.0.0-next.3'));
+    definitionMap.set('version', literal('15.0.0-next.5'));
     definitionMap.set('ngImport', importExpr(Identifiers.core));
     definitionMap.set('type', meta.internalType);
     // We only generate the keys in the metadata if the arrays contain values.
@@ -22592,7 +22870,7 @@ function compileDeclarePipeFromMetadata(meta) {
 function createPipeDefinitionMap(meta) {
     const definitionMap = new DefinitionMap();
     definitionMap.set('minVersion', literal(MINIMUM_PARTIAL_LINKER_VERSION));
-    definitionMap.set('version', literal('15.0.0-next.3'));
+    definitionMap.set('version', literal('15.0.0-next.5'));
     definitionMap.set('ngImport', importExpr(Identifiers.core));
     // e.g. `type: MyPipe`
     definitionMap.set('type', meta.internalType);