fixup! refactor(ivy): ensure directive host bindings use the styling …

…algorithm

packages/compiler/src/render3/view/styling.ts

@@ -26,6 +26,17 @@ export interface StylingInstruction {
   buildParams(convertFn: (value: any) => o.Expression): o.Expression[];
 }
 
+/**
+ * An internal record of the input data for a styling binding
+ */
+interface BoundStylingEntry {
+  name: string;
+  unit: string|null;
+  sourceSpan: ParseSourceSpan;
+  value: AST;
+}
+
+
 /**
  * Produces creation/update instructions for all styling bindings (class and style)
  *
@@ -51,21 +62,14 @@ export interface StylingInstruction {
  *
  * The creation/update methods within the builder class produce these instructions.
  */
-interface BindingEntry {
-  name: string;
-  unit: string|null;
-  sourceSpan: ParseSourceSpan;
-  value: AST;
-}
-
 export class StylingBuilder {
   public readonly hasBindingsOrInitialValues = false;
 
-  private _classMapInput: BindingEntry|null = null;
-  private _styleMapInput: BindingEntry|null = null;
-  private _singleStyleInputs: BindingEntry[]|null = null;
-  private _singleClassInputs: BindingEntry[]|null = null;
-  private _lastStylingInput: BindingEntry|null = null;
+  private _classMapInput: BoundStylingEntry|null = null;
+  private _styleMapInput: BoundStylingEntry|null = null;
+  private _singleStyleInputs: BoundStylingEntry[]|null = null;
+  private _singleClassInputs: BoundStylingEntry[]|null = null;
+  private _lastStylingInput: BoundStylingEntry|null = null;
 
   // maps are used instead of hash maps because a Map will
   // retain the ordering of the keys
@@ -87,7 +91,7 @@ export class StylingBuilder {
     // with style="", [style]="" and [style.prop]="", class="",
     // [class.prop]="". [class]="" assignments
     const name = input.name;
-    let binding: BindingEntry|null = null;
+    let binding: BoundStylingEntry|null = null;
     switch (input.type) {
       case BindingType.Property:
         if (name == 'style') {
@@ -108,8 +112,8 @@ export class StylingBuilder {
 
   registerStyleInput(
       propertyName: string|null, value: AST, unit: string|null,
-      sourceSpan: ParseSourceSpan): BindingEntry {
-    const entry = { name: propertyName, unit, value, sourceSpan } as BindingEntry;
+      sourceSpan: ParseSourceSpan): BoundStylingEntry {
+    const entry = { name: propertyName, unit, value, sourceSpan } as BoundStylingEntry;
     if (propertyName) {
       (this._singleStyleInputs = this._singleStyleInputs || []).push(entry);
       this._useDefaultSanitizer = this._useDefaultSanitizer || isStyleSanitizable(propertyName);
@@ -126,8 +130,8 @@ export class StylingBuilder {
   }
 
   registerClassInput(className: string|null, value: AST, sourceSpan: ParseSourceSpan):
-      BindingEntry {
-    const entry = { name: className, value, sourceSpan } as BindingEntry;
+      BoundStylingEntry {
+    const entry = { name: className, value, sourceSpan } as BoundStylingEntry;
     if (className) {
       (this._singleClassInputs = this._singleClassInputs || []).push(entry);
       (this as any).hasBindingsOrInitialValues = true;
@@ -272,7 +276,7 @@ export class StylingBuilder {
   }
 
   private _buildSingleInputs(
-      reference: o.ExternalReference, inputs: BindingEntry[], mapIndex: Map<string, number>,
+      reference: o.ExternalReference, inputs: BoundStylingEntry[], mapIndex: Map<string, number>,
       allowUnits: boolean, valueConverter: ValueConverter): StylingInstruction[] {
     return inputs.map(input => {
       const bindingIndex: number = mapIndex.get(input.name) !;

packages/core/src/render3/instructions.ts

@@ -1072,9 +1072,11 @@ function generatePropertyAliases(
  * @param className Name of class to toggle. Because it is going to DOM, this is not subject to
  *        renaming as part of minification.
  * @param value A value indicating if a given class should be added or removed.
+ * @param directiveIndex the index for the directive that is attempting to change styling.
  */
 export function elementClassProp(
-    index: number, stylingIndex: number, value: boolean | PlayerFactory): void {
+    index: number, stylingIndex: number, value: boolean | PlayerFactory,
+    directiveIndex?: number): void {
   const val =
       (value instanceof BoundPlayerFactory) ? (value as BoundPlayerFactory<boolean>) : (!!value);
   updateElementClassProp(getStylingContext(index, getViewData()), stylingIndex, val);
@@ -1107,6 +1109,7 @@ export function elementClassProp(
  *   values that are passed in here will be applied to the element (if matched).
  * @param styleSanitizer An optional sanitizer function that will be used (if provided)
  *   to sanitize the any CSS property values that are applied to the element (during rendering).
+ * @param directiveIndex the index for the directive that is attempting to change styling.
  */
 export function elementStyling(
     classDeclarations?: (string | boolean | InitialStylingFlags)[] | null,
@@ -1152,6 +1155,7 @@ export function elementStyling(
  *        (Note that this is not the element index, but rather an index value allocated
  *        specifically for element styling--the index must be the next index after the element
  *        index.)
+ * @param directiveIndex the index for the directive that is attempting to change styling.
  */
 export function elementStylingApply(index: number, directiveIndex?: number): void {
   const viewData = getViewData();
@@ -1224,10 +1228,11 @@ export function elementStyleProp(
  * @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.
+ * @param directiveIndex the index for the directive that is attempting to change styling.
  */
 export function elementStylingMap<T>(
     index: number, classes: {[key: string]: any} | string | NO_CHANGE | null,
-    styles?: {[styleName: string]: any} | NO_CHANGE | null): void {
+    styles?: {[styleName: string]: any} | NO_CHANGE | null, directiveIndex?: number): void {
   const viewData = getViewData();
   const tNode = getTNode(index, viewData);
   const stylingContext = getStylingContext(index, viewData);