fix(ivy): ensure static styling is properly inherited into child components (#29015)

Angular supports having a component extend off of a parent component.
When this happens, all annotation-level data is inherited including styles
and classes. Up until now, Ivy only paid attention to static styling
values on the parent component and not the child component. This patch
ensures that both the parent's component and child component's styling
data is merged and rendered accordingly.

Jira Issue: FW-1081

PR Close #29015

packages/core/src/render3/util/attrs_utils.ts

@@ -0,0 +1,107 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+import {AttributeMarker, TAttributes} from '../interfaces/node';
+import {NG_PROJECT_AS_ATTR_NAME} from '../interfaces/projection';
+import {ProceduralRenderer3, RElement, isProceduralRenderer} from '../interfaces/renderer';
+import {RENDERER} from '../interfaces/view';
+import {getLView} from '../state';
+import {isAnimationProp} from '../styling/util';
+
+
+
+/**
+ * Assigns all attribute values to the provided element via the inferred renderer.
+ *
+ * This function accepts two forms of attribute entries:
+ *
+ * default: (key, value):
+ *  attrs = [key1, value1, key2, value2]
+ *
+ * namespaced: (NAMESPACE_MARKER, uri, name, value)
+ *  attrs = [NAMESPACE_MARKER, uri, name, value, NAMESPACE_MARKER, uri, name, value]
+ *
+ * The `attrs` array can contain a mix of both the default and namespaced entries.
+ * The "default" values are set without a marker, but if the function comes across
+ * a marker value then it will attempt to set a namespaced value. If the marker is
+ * not of a namespaced value then the function will quit and return the index value
+ * where it stopped during the iteration of the attrs array.
+ *
+ * See [AttributeMarker] to understand what the namespace marker value is.
+ *
+ * Note that this instruction does not support assigning style and class values to
+ * an element. See `elementStart` and `elementHostAttrs` to learn how styling values
+ * are applied to an element.
+ *
+ * @param native The element that the attributes will be assigned to
+ * @param attrs The attribute array of values that will be assigned to the element
+ * @returns the index value that was last accessed in the attributes array
+ */
+export function setUpAttributes(native: RElement, attrs: TAttributes): number {
+  const renderer = getLView()[RENDERER];
+  const isProc = isProceduralRenderer(renderer);
+
+  let i = 0;
+  while (i < attrs.length) {
+    const value = attrs[i];
+    if (typeof value === 'number') {
+      // only namespaces are supported. Other value types (such as style/class
+      // entries) are not supported in this function.
+      if (value !== AttributeMarker.NamespaceURI) {
+        break;
+      }
+
+      // we just landed on the marker value ... therefore
+      // we should skip to the next entry
+      i++;
+
+      const namespaceURI = attrs[i++] as string;
+      const attrName = attrs[i++] as string;
+      const attrVal = attrs[i++] as string;
+      ngDevMode && ngDevMode.rendererSetAttribute++;
+      isProc ?
+          (renderer as ProceduralRenderer3).setAttribute(native, attrName, attrVal, namespaceURI) :
+          native.setAttributeNS(namespaceURI, attrName, attrVal);
+    } else {
+      /// attrName is string;
+      const attrName = value as string;
+      const attrVal = attrs[++i];
+      if (attrName !== NG_PROJECT_AS_ATTR_NAME) {
+        // Standard attributes
+        ngDevMode && ngDevMode.rendererSetAttribute++;
+        if (isAnimationProp(attrName)) {
+          if (isProc) {
+            (renderer as ProceduralRenderer3).setProperty(native, attrName, attrVal);
+          }
+        } else {
+          isProc ?
+              (renderer as ProceduralRenderer3)
+                  .setAttribute(native, attrName as string, attrVal as string) :
+              native.setAttribute(attrName as string, attrVal as string);
+        }
+      }
+      i++;
+    }
+  }
+
+  // another piece of code may iterate over the same attributes array. Therefore
+  // it may be helpful to return the exact spot where the attributes array exited
+  // whether by running into an unsupported marker or if all the static values were
+  // iterated over.
+  return i;
+}
+
+
+export function attrsStylingIndexOf(attrs: TAttributes, startIndex: number): number {
+  for (let i = startIndex; i < attrs.length; i++) {
+    const val = attrs[i];
+    if (val === AttributeMarker.Classes || val === AttributeMarker.Styles) {
+      return i;
+    }
+  }
+  return -1;
+}