refactor(ivy): drop element prefixes for all styling-related instructions (#30318)
This is the final patch to migrate the Angular styling code to have a smaller instruction set in preparation for the runtime refactor. All styling-related instructions now work both in template and hostBindings functions and do not use `element` as a prefix for their names: BEFORE: elementStyling() elementStyleProp() elementClassProp() elementStyleMap() elementClassMap() elementStylingApply() AFTER: styling() styleProp() classProp() styleMap() classMap() stylingApply() PR Close #30318
This commit is contained in:
Matias Niemelä
committed by
Alex Rickabaugh
Alex Rickabaugh
parent
c016e2c4ec
commit
d8665e639b
@ -110,12 +110,12 @@ export {
|
||||
ɵɵelementAttribute,
|
||||
ɵɵelementContainerStart,
|
||||
ɵɵelementContainerEnd,
|
||||
ɵɵelementStyling,
|
||||
ɵɵelementStyleMap,
|
||||
ɵɵelementClassMap,
|
||||
ɵɵelementStyleProp,
|
||||
ɵɵelementStylingApply,
|
||||
ɵɵelementClassProp,
|
||||
ɵɵstyling,
|
||||
ɵɵstyleMap,
|
||||
ɵɵclassMap,
|
||||
ɵɵstyleProp,
|
||||
ɵɵstylingApply,
|
||||
ɵɵclassProp,
|
||||
ɵɵelementHostAttrs,
|
||||
|
||||
ɵɵselect,
|
||||
|
||||
@ -23,6 +23,8 @@ export {
|
||||
tick,
|
||||
ɵɵallocHostVars,
|
||||
ɵɵbind,
|
||||
ɵɵclassMap,
|
||||
ɵɵclassProp,
|
||||
ɵɵcomponentHostSyntheticListener,
|
||||
ɵɵcomponentHostSyntheticProperty,
|
||||
|
||||
@ -34,8 +36,6 @@ export {
|
||||
|
||||
ɵɵelement,
|
||||
ɵɵelementAttribute,
|
||||
ɵɵelementClassMap,
|
||||
ɵɵelementClassProp,
|
||||
ɵɵelementContainerEnd,
|
||||
|
||||
ɵɵelementContainerStart,
|
||||
@ -44,10 +44,6 @@ export {
|
||||
ɵɵelementHostAttrs,
|
||||
ɵɵelementProperty,
|
||||
ɵɵelementStart,
|
||||
ɵɵelementStyleMap,
|
||||
ɵɵelementStyleProp,
|
||||
ɵɵelementStyling,
|
||||
ɵɵelementStylingApply,
|
||||
ɵɵembeddedViewEnd,
|
||||
|
||||
ɵɵembeddedViewStart,
|
||||
@ -91,6 +87,10 @@ export {
|
||||
ɵɵreference,
|
||||
|
||||
ɵɵselect,
|
||||
ɵɵstyleMap,
|
||||
ɵɵstyleProp,
|
||||
ɵɵstyling,
|
||||
ɵɵstylingApply,
|
||||
ɵɵtemplate,
|
||||
|
||||
ɵɵtext,
|
||||
|
||||
@ -11,7 +11,7 @@ import {TNode, TNodeType} from '../interfaces/node';
|
||||
import {PlayerFactory} from '../interfaces/player';
|
||||
import {FLAGS, HEADER_OFFSET, LView, LViewFlags, RENDERER, RootContextFlags} from '../interfaces/view';
|
||||
import {getActiveDirectiveId, getActiveDirectiveSuperClassDepth, getLView, getPreviousOrParentTNode, getSelectedIndex} from '../state';
|
||||
import {getInitialClassNameValue, renderStyling, updateClassMap, updateClassProp as updateElementClassProp, updateContextWithBindings, updateStyleMap, updateStyleProp as updateElementStyleProp} from '../styling/class_and_style_bindings';
|
||||
import {getInitialClassNameValue, renderStyling, updateClassMap, updateClassProp as updateclassProp, updateContextWithBindings, updateStyleMap, updateStyleProp as updatestyleProp} from '../styling/class_and_style_bindings';
|
||||
import {ParamsOf, enqueueHostInstruction, registerHostDirective} from '../styling/host_instructions_queue';
|
||||
import {BoundPlayerFactory} from '../styling/player_factory';
|
||||
import {DEFAULT_TEMPLATE_DIRECTIVE_INDEX} from '../styling/shared';
|
||||
@ -33,12 +33,12 @@ import {scheduleTick, setInputsForProperty} from './shared';
|
||||
* The instructions present in this file are:
|
||||
*
|
||||
* Template level styling instructions:
|
||||
* - elementStyling
|
||||
* - elementStyleMap
|
||||
* - elementClassMap
|
||||
* - elementStyleProp
|
||||
* - elementClassProp
|
||||
* - elementStylingApply
|
||||
* - styling
|
||||
* - styleMap
|
||||
* - classMap
|
||||
* - styleProp
|
||||
* - classProp
|
||||
* - stylingApply
|
||||
*/
|
||||
|
||||
/**
|
||||
@ -50,10 +50,10 @@ import {scheduleTick, setInputsForProperty} from './shared';
|
||||
* values to an element).
|
||||
*
|
||||
* @param classBindingNames An array containing bindable class names.
|
||||
* The `elementClassProp` instruction refers to the class name by index in
|
||||
* The `classProp` instruction refers to the class name by index in
|
||||
* this array (i.e. `['foo', 'bar']` means `foo=0` and `bar=1`).
|
||||
* @param styleBindingNames An array containing bindable style properties.
|
||||
* The `elementStyleProp` instruction refers to the class name by index in
|
||||
* The `styleProp` instruction refers to the class name by index in
|
||||
* this array (i.e. `['width', 'height']` means `width=0` and `height=1`).
|
||||
* @param styleSanitizer An optional sanitizer function that will be used to sanitize any CSS
|
||||
* style values that are applied to the element (during rendering).
|
||||
@ -63,7 +63,7 @@ import {scheduleTick, setInputsForProperty} from './shared';
|
||||
*
|
||||
* @codeGenApi
|
||||
*/
|
||||
export function ɵɵelementStyling(
|
||||
export function ɵɵstyling(
|
||||
classBindingNames?: string[] | null, styleBindingNames?: string[] | null,
|
||||
styleSanitizer?: StyleSanitizeFn | null): void {
|
||||
const tNode = getPreviousOrParentTNode();
|
||||
@ -81,7 +81,7 @@ export function ɵɵelementStyling(
|
||||
|
||||
const fns = tNode.onElementCreationFns = tNode.onElementCreationFns || [];
|
||||
fns.push(() => {
|
||||
initElementStyling(
|
||||
initstyling(
|
||||
tNode, classBindingNames, styleBindingNames, styleSanitizer, directiveStylingIndex);
|
||||
registerHostDirective(tNode.stylingTemplate !, directiveStylingIndex);
|
||||
});
|
||||
@ -92,13 +92,13 @@ export function ɵɵelementStyling(
|
||||
// components) then they will be applied at the end of the `elementEnd`
|
||||
// instruction (because directives are created first before styling is
|
||||
// executed for a new element).
|
||||
initElementStyling(
|
||||
initstyling(
|
||||
tNode, classBindingNames, styleBindingNames, styleSanitizer,
|
||||
DEFAULT_TEMPLATE_DIRECTIVE_INDEX);
|
||||
}
|
||||
}
|
||||
|
||||
function initElementStyling(
|
||||
function initstyling(
|
||||
tNode: TNode, classBindingNames: string[] | null | undefined,
|
||||
styleBindingNames: string[] | null | undefined,
|
||||
styleSanitizer: StyleSanitizeFn | null | undefined, directiveStylingIndex: number): void {
|
||||
@ -113,14 +113,14 @@ function initElementStyling(
|
||||
*
|
||||
* 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 `elementStyleMap` or any static styles that are
|
||||
* present from when the element was created with `elementStyling`).
|
||||
* 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 `elementStylingApply`.
|
||||
* Note that the styling element is updated as part of `stylingApply`.
|
||||
*
|
||||
* @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
|
||||
* `elementStyling`.
|
||||
* `styling`.
|
||||
* @param value New value to write (falsy to remove).
|
||||
* @param suffix Optional suffix. Used with scalar values to add unit such as `px`.
|
||||
* Note that when a suffix is provided then the underlying sanitizer will
|
||||
@ -133,7 +133,7 @@ function initElementStyling(
|
||||
*
|
||||
* @codeGenApi
|
||||
*/
|
||||
export function ɵɵelementStyleProp(
|
||||
export function ɵɵstyleProp(
|
||||
styleIndex: number, value: string | number | String | PlayerFactory | null,
|
||||
suffix?: string | null, forceOverride?: boolean): void {
|
||||
const index = getSelectedIndex();
|
||||
@ -141,11 +141,11 @@ export function ɵɵelementStyleProp(
|
||||
const stylingContext = getStylingContext(index, getLView());
|
||||
const directiveStylingIndex = getActiveDirectiveStylingIndex();
|
||||
if (directiveStylingIndex) {
|
||||
const args: ParamsOf<typeof updateElementStyleProp> =
|
||||
const args: ParamsOf<typeof updatestyleProp> =
|
||||
[stylingContext, styleIndex, valueToAdd, directiveStylingIndex, forceOverride];
|
||||
enqueueHostInstruction(stylingContext, directiveStylingIndex, updateElementStyleProp, args);
|
||||
enqueueHostInstruction(stylingContext, directiveStylingIndex, updatestyleProp, args);
|
||||
} else {
|
||||
updateElementStyleProp(
|
||||
updatestyleProp(
|
||||
stylingContext, styleIndex, valueToAdd, DEFAULT_TEMPLATE_DIRECTIVE_INDEX, forceOverride);
|
||||
}
|
||||
}
|
||||
@ -175,11 +175,11 @@ function resolveStylePropValue(
|
||||
*
|
||||
* This instruction is meant to handle the `[class.foo]="exp"` case and,
|
||||
* therefore, the class binding itself must already be allocated using
|
||||
* `elementStyling` within the creation block.
|
||||
* `styling` within the creation block.
|
||||
*
|
||||
* @param classIndex Index of class to toggle. This index value refers to the
|
||||
* index of the class in the class bindings array that was passed into
|
||||
* `elementStyling` (which is meant to be called before this
|
||||
* `styling` (which is meant to be called before this
|
||||
* function is).
|
||||
* @param value A true/false value which will turn the class on or off.
|
||||
* @param forceOverride Whether or not this value will be applied regardless
|
||||
@ -190,7 +190,7 @@ function resolveStylePropValue(
|
||||
*
|
||||
* @codeGenApi
|
||||
*/
|
||||
export function ɵɵelementClassProp(
|
||||
export function ɵɵclassProp(
|
||||
classIndex: number, value: boolean | PlayerFactory, forceOverride?: boolean): void {
|
||||
const index = getSelectedIndex();
|
||||
const input = (value instanceof BoundPlayerFactory) ?
|
||||
@ -199,11 +199,11 @@ export function ɵɵelementClassProp(
|
||||
const directiveStylingIndex = getActiveDirectiveStylingIndex();
|
||||
const stylingContext = getStylingContext(index, getLView());
|
||||
if (directiveStylingIndex) {
|
||||
const args: ParamsOf<typeof updateElementClassProp> =
|
||||
const args: ParamsOf<typeof updateclassProp> =
|
||||
[stylingContext, classIndex, input, directiveStylingIndex, forceOverride];
|
||||
enqueueHostInstruction(stylingContext, directiveStylingIndex, updateElementClassProp, args);
|
||||
enqueueHostInstruction(stylingContext, directiveStylingIndex, updateclassProp, args);
|
||||
} else {
|
||||
updateElementClassProp(
|
||||
updateclassProp(
|
||||
stylingContext, classIndex, input, DEFAULT_TEMPLATE_DIRECTIVE_INDEX, forceOverride);
|
||||
}
|
||||
}
|
||||
@ -220,10 +220,10 @@ function booleanOrNull(value: any): boolean|null {
|
||||
*
|
||||
* 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 `elementStyleProp`. If any styles are set to falsy
|
||||
* 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 `elementStylingApply` is called.
|
||||
* 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
|
||||
@ -234,7 +234,7 @@ function booleanOrNull(value: any): boolean|null {
|
||||
*
|
||||
* @codeGenApi
|
||||
*/
|
||||
export function ɵɵelementStyleMap(styles: {[styleName: string]: any} | NO_CHANGE | null): void {
|
||||
export function ɵɵstyleMap(styles: {[styleName: string]: any} | NO_CHANGE | null): void {
|
||||
const index = getSelectedIndex();
|
||||
const lView = getLView();
|
||||
const stylingContext = getStylingContext(index, lView);
|
||||
@ -265,10 +265,10 @@ export function ɵɵelementStyleMap(styles: {[styleName: string]: any} | NO_CHAN
|
||||
*
|
||||
* 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 `elementClassProp`. If any
|
||||
* 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 `elementStylingApply` is called.
|
||||
* 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.
|
||||
*
|
||||
@ -278,8 +278,7 @@ export function ɵɵelementStyleMap(styles: {[styleName: string]: any} | NO_CHAN
|
||||
*
|
||||
* @codeGenApi
|
||||
*/
|
||||
export function ɵɵelementClassMap(classes: {[styleName: string]: any} | NO_CHANGE | string | null):
|
||||
void {
|
||||
export function ɵɵclassMap(classes: {[styleName: string]: any} | NO_CHANGE | string | null): void {
|
||||
const index = getSelectedIndex();
|
||||
const lView = getLView();
|
||||
const stylingContext = getStylingContext(index, lView);
|
||||
@ -306,13 +305,13 @@ export function ɵɵelementClassMap(classes: {[styleName: string]: any} | NO_CHA
|
||||
/**
|
||||
* Apply all style and class binding values to the element.
|
||||
*
|
||||
* This instruction is meant to be run after `elementStyleMap`, `elementClassMap`,
|
||||
* `elementStyleProp` or `elementClassProp` instructions have been run and will
|
||||
* This instruction is meant to be run after `styleMap`, `classMap`,
|
||||
* `styleProp` or `classProp` instructions have been run and will
|
||||
* only apply styling to the element if any styling bindings have been updated.
|
||||
*
|
||||
* @codeGenApi
|
||||
*/
|
||||
export function ɵɵelementStylingApply(): void {
|
||||
export function ɵɵstylingApply(): void {
|
||||
const index = getSelectedIndex();
|
||||
const directiveStylingIndex =
|
||||
getActiveDirectiveStylingIndex() || DEFAULT_TEMPLATE_DIRECTIVE_INDEX;
|
||||
|
||||
@ -51,7 +51,7 @@ import {LView} from './view';
|
||||
* Once the styling context is created then single and multi properties can be stored within it.
|
||||
* For this to happen, the following function needs to be called:
|
||||
*
|
||||
* `elementStyling` (called with style properties, class properties and a sanitizer + a directive
|
||||
* `styling` (called with style properties, class properties and a sanitizer + a directive
|
||||
* instance).
|
||||
*
|
||||
* When this instruction is called it will populate the styling context with the provided style
|
||||
@ -122,8 +122,8 @@ import {LView} from './view';
|
||||
* values are and how they work.
|
||||
*
|
||||
* Each time a binding property is updated (whether it be through a single
|
||||
* property instruction like `elementStyleProp`, `elementClassProp`,
|
||||
* `elementStyleMap` or `elementClassMap`) then the values in the context will be updated as
|
||||
* property instruction like `styleProp`, `classProp`,
|
||||
* `styleMap` or `classMap`) then the values in the context will be updated as
|
||||
* well.
|
||||
*
|
||||
* If for example `[style.width]` updates to `555px` then its value will be reflected
|
||||
@ -142,9 +142,9 @@ import {LView} from './view';
|
||||
*
|
||||
* Despite the context being updated, nothing has been rendered on screen (not styles or
|
||||
* classes have been set on the element). To kick off rendering for an element the following
|
||||
* function needs to be run `elementStylingApply`.
|
||||
* function needs to be run `stylingApply`.
|
||||
*
|
||||
* `elementStylingApply` will run through the context and find each dirty value and render them onto
|
||||
* `stylingApply` will run through the context and find each dirty value and render them onto
|
||||
* the element. Once complete, all styles/classes will be set to clean. Because of this, the render
|
||||
* function will now know not to rerun itself again if called again unless new style/class values
|
||||
* have changed.
|
||||
@ -158,12 +158,12 @@ import {LView} from './view';
|
||||
* Each of the following instructions supports accepting a directive instance as an input parameter:
|
||||
*
|
||||
* - `elementHostAttrs`
|
||||
* - `elementStyling`
|
||||
* - `elementStyleProp`
|
||||
* - `elementClassProp`
|
||||
* - `elementStyleMap`
|
||||
* - `elementClassMap`
|
||||
* - `elementStylingApply`
|
||||
* - `styling`
|
||||
* - `styleProp`
|
||||
* - `classProp`
|
||||
* - `styleMap`
|
||||
* - `classMap`
|
||||
* - `stylingApply`
|
||||
*
|
||||
* Each time a directive value is passed in, it will be converted into an index by examining the
|
||||
* directive registry (which lives in the context configuration area). The index is then used
|
||||
@ -257,7 +257,7 @@ import {LView} from './view';
|
||||
*
|
||||
* ## Rendering
|
||||
* The rendering mechanism (when the styling data is applied on screen) occurs via the
|
||||
* `elementStylingApply` function and is designed to run after **all** styling functions have been
|
||||
* `stylingApply` function and is designed to run after **all** styling functions have been
|
||||
* evaluated. The rendering algorithm will loop over the context and only apply the styles that are
|
||||
* flagged as dirty (either because they are new, updated or have been removed via multi or
|
||||
* single bindings).
|
||||
@ -293,19 +293,19 @@ export interface StylingContext extends
|
||||
|
||||
/**
|
||||
* A numeric value representing the class index offset value. Whenever a single class is
|
||||
* applied (using `elementClassProp`) it should have an styling index value that doesn't
|
||||
* applied (using `classProp`) it should have an styling index value that doesn't
|
||||
* need to take into account any style values that exist in the context.
|
||||
*/
|
||||
[StylingIndex.SinglePropOffsetPositions]: SinglePropOffsetValues;
|
||||
|
||||
/**
|
||||
* The last class value that was interpreted by `elementStyleMap`. This is cached
|
||||
* The last class value that was interpreted by `styleMap`. This is cached
|
||||
* So that the algorithm can exit early incase the value has not changed.
|
||||
*/
|
||||
[StylingIndex.CachedMultiClasses]: any|MapBasedOffsetValues;
|
||||
|
||||
/**
|
||||
* The last style value that was interpreted by `elementClassMap`. This is cached
|
||||
* The last style value that was interpreted by `classMap`. This is cached
|
||||
* So that the algorithm can exit early incase the value has not changed.
|
||||
*/
|
||||
[StylingIndex.CachedMultiStyles]: any|MapBasedOffsetValues;
|
||||
@ -319,7 +319,7 @@ export interface StylingContext extends
|
||||
* standard angular instructions, they are not designed to immediately apply
|
||||
* their values to the styling context when executed. What happens instead is
|
||||
* a queue is constructed and each instruction is populated into the queue.
|
||||
* Then, once the style/class values are set to flush (via `elementStylingApply` or
|
||||
* Then, once the style/class values are set to flush (via `stylingApply` or
|
||||
* `hostStylingApply`), the queue is flushed and the values are rendered onto
|
||||
* the host element.
|
||||
*/
|
||||
@ -337,7 +337,7 @@ export interface StylingContext extends
|
||||
* the styling is applied).
|
||||
*
|
||||
* This queue is used when any `hostStyling` instructions are executed from the `hostBindings`
|
||||
* function. Template-level styling functions (e.g. `elementStyleMap` and `elementClassProp`)
|
||||
* function. Template-level styling functions (e.g. `styleMap` and `classProp`)
|
||||
* do not make use of this queue (they are applied to the styling context immediately).
|
||||
*
|
||||
* Due to the nature of how components/directives are evaluated, directives (both parent and
|
||||
@ -371,7 +371,7 @@ export interface StylingContext extends
|
||||
* inside of `renderStyling`).
|
||||
*
|
||||
* Right now each directive's hostBindings function, as well the template function, both
|
||||
* call `elementStylingApply()` and `hostStylingApply()`. The fact that this is called
|
||||
* call `stylingApply()` and `hostStylingApply()`. The fact that this is called
|
||||
* multiple times for the same element (b/c of change detection) causes some issues. To avoid
|
||||
* having styling code be rendered on an element multiple times, the `HostInstructionsQueue`
|
||||
* reserves a slot for a reference pointing to the very last directive that was registered and
|
||||
|
||||
@ -106,12 +106,12 @@ export const angularCoreEnv: {[name: string]: Function} = {
|
||||
'ɵɵloadContentQuery': r3.ɵɵloadContentQuery,
|
||||
'ɵɵreference': r3.ɵɵreference,
|
||||
'ɵɵelementHostAttrs': r3.ɵɵelementHostAttrs,
|
||||
'ɵɵelementClassMap': r3.ɵɵelementClassMap,
|
||||
'ɵɵelementStyling': r3.ɵɵelementStyling,
|
||||
'ɵɵelementStyleMap': r3.ɵɵelementStyleMap,
|
||||
'ɵɵelementStyleProp': r3.ɵɵelementStyleProp,
|
||||
'ɵɵelementStylingApply': r3.ɵɵelementStylingApply,
|
||||
'ɵɵelementClassProp': r3.ɵɵelementClassProp,
|
||||
'ɵɵclassMap': r3.ɵɵclassMap,
|
||||
'ɵɵstyling': r3.ɵɵstyling,
|
||||
'ɵɵstyleMap': r3.ɵɵstyleMap,
|
||||
'ɵɵstyleProp': r3.ɵɵstyleProp,
|
||||
'ɵɵstylingApply': r3.ɵɵstylingApply,
|
||||
'ɵɵclassProp': r3.ɵɵclassProp,
|
||||
'ɵɵselect': r3.ɵɵselect,
|
||||
'ɵɵtemplate': r3.ɵɵtemplate,
|
||||
'ɵɵtext': r3.ɵɵtext,
|
||||
|
||||
@ -235,8 +235,8 @@ export function updateContextWithBindings(
|
||||
|
||||
// because we're inserting more bindings into the context, this means that the
|
||||
// binding values need to be referenced the singlePropOffsetValues array so that
|
||||
// the template/directive can easily find them inside of the `elementStyleProp`
|
||||
// and the `elementClassProp` functions without iterating through the entire context.
|
||||
// the template/directive can easily find them inside of the `styleProp`
|
||||
// and the `classProp` functions without iterating through the entire context.
|
||||
// The first step to setting up these reference points is to mark how many bindings
|
||||
// are being added. Even if these bindings already exist in the context, the directive
|
||||
// or template code will still call them unknowingly. Therefore the total values need
|
||||
|
||||
@ -121,7 +121,7 @@ export function allocStylingContext(
|
||||
* every style declaration such as `<div style="color: red">` would result `StyleContext`
|
||||
* which would create unnecessary memory pressure.
|
||||
*
|
||||
* @param index Index of the style allocation. See: `elementStyling`.
|
||||
* @param index Index of the style allocation. See: `styling`.
|
||||
* @param viewData The view to search for the styling context
|
||||
*/
|
||||
export function getStylingContextFromLView(index: number, viewData: LView): StylingContext {
|
||||
|
||||
@ -920,9 +920,6 @@
|
||||
{
|
||||
"name": "incrementActiveDirectiveId"
|
||||
},
|
||||
{
|
||||
"name": "initElementStyling"
|
||||
},
|
||||
{
|
||||
"name": "initNodeFlags"
|
||||
},
|
||||
@ -932,6 +929,9 @@
|
||||
{
|
||||
"name": "initializeTNodeInputs"
|
||||
},
|
||||
{
|
||||
"name": "initstyling"
|
||||
},
|
||||
{
|
||||
"name": "injectElementRef"
|
||||
},
|
||||
@ -1364,6 +1364,9 @@
|
||||
{
|
||||
"name": "ɵɵbind"
|
||||
},
|
||||
{
|
||||
"name": "ɵɵclassProp"
|
||||
},
|
||||
{
|
||||
"name": "ɵɵdefineComponent"
|
||||
},
|
||||
@ -1376,21 +1379,12 @@
|
||||
{
|
||||
"name": "ɵɵdirectiveInject"
|
||||
},
|
||||
{
|
||||
"name": "ɵɵelementClassProp"
|
||||
},
|
||||
{
|
||||
"name": "ɵɵelementEnd"
|
||||
},
|
||||
{
|
||||
"name": "ɵɵelementStart"
|
||||
},
|
||||
{
|
||||
"name": "ɵɵelementStyling"
|
||||
},
|
||||
{
|
||||
"name": "ɵɵelementStylingApply"
|
||||
},
|
||||
{
|
||||
"name": "ɵɵgetCurrentView"
|
||||
},
|
||||
@ -1421,6 +1415,12 @@
|
||||
{
|
||||
"name": "ɵɵselect"
|
||||
},
|
||||
{
|
||||
"name": "ɵɵstyling"
|
||||
},
|
||||
{
|
||||
"name": "ɵɵstylingApply"
|
||||
},
|
||||
{
|
||||
"name": "ɵɵtemplate"
|
||||
},
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
import {StaticInjector} from '../../src/di/injector';
|
||||
import {createInjector} from '../../src/di/r3_injector';
|
||||
import {AttributeMarker, RenderFlags, getHostElement, ɵɵProvidersFeature, ɵɵdefineComponent, ɵɵdefineDirective, ɵɵelementContainerEnd, ɵɵelementContainerStart, ɵɵi18n, ɵɵi18nApply, ɵɵi18nExp, ɵɵselect} from '../../src/render3/index';
|
||||
import {markDirty, ɵɵbind, ɵɵelement, ɵɵelementEnd, ɵɵelementProperty, ɵɵelementStart, ɵɵelementStyling, ɵɵelementStylingApply, ɵɵlistener, ɵɵtemplate, ɵɵtext, ɵɵtextBinding} from '../../src/render3/instructions/all';
|
||||
import {markDirty, ɵɵbind, ɵɵelement, ɵɵelementEnd, ɵɵelementProperty, ɵɵelementStart, ɵɵlistener, ɵɵstyling, ɵɵstylingApply, ɵɵtemplate, ɵɵtext, ɵɵtextBinding} from '../../src/render3/instructions/all';
|
||||
import {getComponent, getContext, getDirectives, getInjectionTokens, getInjector, getListeners, getLocalRefs, getRootComponents, getViewComponent, loadLContext} from '../../src/render3/util/discovery_utils';
|
||||
|
||||
import {NgIf} from './common_with_def';
|
||||
@ -557,7 +557,7 @@ describe('discovery utils deprecated', () => {
|
||||
}
|
||||
if (rf & RenderFlags.Update) {
|
||||
ɵɵselect(0);
|
||||
ɵɵelementStylingApply();
|
||||
ɵɵstylingApply();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@ -10,7 +10,7 @@ import {NgForOfContext} from '@angular/common';
|
||||
import {ɵɵpropertyInterpolate, ɵɵpropertyInterpolate1, ɵɵpropertyInterpolate2, ɵɵpropertyInterpolate3, ɵɵpropertyInterpolate4, ɵɵpropertyInterpolate5, ɵɵpropertyInterpolate6, ɵɵpropertyInterpolate7, ɵɵpropertyInterpolate8, ɵɵpropertyInterpolateV} from '@angular/core/src/render3/instructions/all';
|
||||
|
||||
import {ɵɵdefineComponent} from '../../src/render3/definition';
|
||||
import {RenderFlags, ɵɵbind, ɵɵelement, ɵɵelementAttribute, ɵɵelementClassMap, ɵɵelementEnd, ɵɵelementProperty, ɵɵelementStart, ɵɵelementStyleMap, ɵɵelementStyleProp, ɵɵelementStyling, ɵɵelementStylingApply, ɵɵinterpolation1, ɵɵproperty, ɵɵselect, ɵɵtemplate, ɵɵtext, ɵɵtextBinding} from '../../src/render3/index';
|
||||
import {RenderFlags, ɵɵbind, ɵɵclassMap, ɵɵelement, ɵɵelementAttribute, ɵɵelementEnd, ɵɵelementProperty, ɵɵelementStart, ɵɵinterpolation1, ɵɵproperty, ɵɵselect, ɵɵstyleMap, ɵɵstyleProp, ɵɵstyling, ɵɵstylingApply, ɵɵtemplate, ɵɵtext, ɵɵtextBinding} from '../../src/render3/index';
|
||||
import {AttributeMarker} from '../../src/render3/interfaces/node';
|
||||
import {bypassSanitizationTrustHtml, bypassSanitizationTrustResourceUrl, bypassSanitizationTrustScript, bypassSanitizationTrustStyle, bypassSanitizationTrustUrl} from '../../src/sanitization/bypass';
|
||||
import {ɵɵdefaultStyleSanitizer, ɵɵsanitizeHtml, ɵɵsanitizeResourceUrl, ɵɵsanitizeScript, ɵɵsanitizeStyle, ɵɵsanitizeUrl} from '../../src/sanitization/sanitization';
|
||||
@ -23,7 +23,7 @@ import {ComponentFixture, TemplateFixture} from './render_util';
|
||||
describe('instructions', () => {
|
||||
function createAnchor() {
|
||||
ɵɵelementStart(0, 'a');
|
||||
ɵɵelementStyling();
|
||||
ɵɵstyling();
|
||||
ɵɵelementEnd();
|
||||
}
|
||||
|
||||
@ -39,7 +39,7 @@ describe('instructions', () => {
|
||||
attrs.push(AttributeMarker.Styles, ...initialStyles);
|
||||
}
|
||||
ɵɵelementStart(0, 'div', attrs);
|
||||
ɵɵelementStyling(classBindingNames || null, styleBindingNames || null, styleSanitizer);
|
||||
ɵɵstyling(classBindingNames || null, styleBindingNames || null, styleSanitizer);
|
||||
ɵɵelementEnd();
|
||||
}
|
||||
|
||||
@ -1010,23 +1010,23 @@ describe('instructions', () => {
|
||||
});
|
||||
});
|
||||
|
||||
describe('elementStyleProp', () => {
|
||||
describe('styleProp', () => {
|
||||
it('should automatically sanitize unless a bypass operation is applied', () => {
|
||||
const t = new TemplateFixture(() => {
|
||||
return createDiv(null, null, null, ['background-image'], ɵɵdefaultStyleSanitizer);
|
||||
}, () => {}, 1);
|
||||
t.update(() => {
|
||||
ɵɵselect(0);
|
||||
ɵɵelementStyleProp(0, 'url("http://server")');
|
||||
ɵɵelementStylingApply();
|
||||
ɵɵstyleProp(0, 'url("http://server")');
|
||||
ɵɵstylingApply();
|
||||
});
|
||||
// nothing is set because sanitizer suppresses it.
|
||||
expect(t.html).toEqual('<div></div>');
|
||||
|
||||
t.update(() => {
|
||||
ɵɵselect(0);
|
||||
ɵɵelementStyleProp(0, bypassSanitizationTrustStyle('url("http://server2")'));
|
||||
ɵɵelementStylingApply();
|
||||
ɵɵstyleProp(0, bypassSanitizationTrustStyle('url("http://server2")'));
|
||||
ɵɵstylingApply();
|
||||
});
|
||||
expect((t.hostElement.firstChild as HTMLElement).style.getPropertyValue('background-image'))
|
||||
.toEqual('url("http://server2")');
|
||||
@ -1041,8 +1041,8 @@ describe('instructions', () => {
|
||||
|
||||
t.update(() => {
|
||||
ɵɵselect(0);
|
||||
ɵɵelementStyleProp(0, bypassSanitizationTrustStyle('apple'));
|
||||
ɵɵelementStylingApply();
|
||||
ɵɵstyleProp(0, bypassSanitizationTrustStyle('apple'));
|
||||
ɵɵstylingApply();
|
||||
});
|
||||
|
||||
expect(sanitizerInterceptor.lastValue !).toEqual('apple');
|
||||
@ -1050,17 +1050,17 @@ describe('instructions', () => {
|
||||
|
||||
t.update(() => {
|
||||
ɵɵselect(0);
|
||||
ɵɵelementStyleProp(0, bypassSanitizationTrustStyle('apple'));
|
||||
ɵɵelementStylingApply();
|
||||
ɵɵstyleProp(0, bypassSanitizationTrustStyle('apple'));
|
||||
ɵɵstylingApply();
|
||||
});
|
||||
expect(sanitizerInterceptor.lastValue).toEqual(null);
|
||||
});
|
||||
});
|
||||
|
||||
describe('elementStyleMap', () => {
|
||||
describe('styleMap', () => {
|
||||
function createDivWithStyle() {
|
||||
ɵɵelementStart(0, 'div', [AttributeMarker.Styles, 'height', '10px']);
|
||||
ɵɵelementStyling([], ['height']);
|
||||
ɵɵstyling([], ['height']);
|
||||
ɵɵelementEnd();
|
||||
}
|
||||
|
||||
@ -1068,8 +1068,8 @@ describe('instructions', () => {
|
||||
const fixture = new TemplateFixture(createDivWithStyle, () => {}, 1);
|
||||
fixture.update(() => {
|
||||
ɵɵselect(0);
|
||||
ɵɵelementStyleMap({'background-color': 'red'});
|
||||
ɵɵelementStylingApply();
|
||||
ɵɵstyleMap({'background-color': 'red'});
|
||||
ɵɵstylingApply();
|
||||
});
|
||||
expect(fixture.html).toEqual('<div style="background-color: red; height: 10px;"></div>');
|
||||
});
|
||||
@ -1084,7 +1084,7 @@ describe('instructions', () => {
|
||||
|
||||
fixture.update(() => {
|
||||
ɵɵselect(0);
|
||||
ɵɵelementStyleMap({
|
||||
ɵɵstyleMap({
|
||||
'background-image': 'background-image',
|
||||
'background': 'background',
|
||||
'border-image': 'border-image',
|
||||
@ -1093,7 +1093,7 @@ describe('instructions', () => {
|
||||
'filter': 'filter',
|
||||
'width': 'width'
|
||||
});
|
||||
ɵɵelementStylingApply();
|
||||
ɵɵstylingApply();
|
||||
});
|
||||
|
||||
const props = detectedValues.sort();
|
||||
@ -1106,7 +1106,7 @@ describe('instructions', () => {
|
||||
describe('elementClass', () => {
|
||||
function createDivWithStyling() {
|
||||
ɵɵelementStart(0, 'div');
|
||||
ɵɵelementStyling();
|
||||
ɵɵstyling();
|
||||
ɵɵelementEnd();
|
||||
}
|
||||
|
||||
@ -1114,8 +1114,8 @@ describe('instructions', () => {
|
||||
const fixture = new TemplateFixture(createDivWithStyling, () => {}, 1);
|
||||
fixture.update(() => {
|
||||
ɵɵselect(0);
|
||||
ɵɵelementClassMap('multiple classes');
|
||||
ɵɵelementStylingApply();
|
||||
ɵɵclassMap('multiple classes');
|
||||
ɵɵstylingApply();
|
||||
});
|
||||
expect(fixture.html).toEqual('<div class="multiple classes"></div>');
|
||||
});
|
||||
|
||||
@ -10,8 +10,8 @@ import {ElementRef, TemplateRef, ViewContainerRef} from '@angular/core';
|
||||
|
||||
import {RendererType2} from '../../src/render/api';
|
||||
import {getLContext} from '../../src/render3/context_discovery';
|
||||
import {AttributeMarker, ɵɵdefineComponent, ɵɵdefineDirective, ɵɵelementClassMap, ɵɵelementStyleMap, ɵɵtemplateRefExtractor} from '../../src/render3/index';
|
||||
import {ɵɵallocHostVars, ɵɵbind, ɵɵcontainer, ɵɵcontainerRefreshEnd, ɵɵcontainerRefreshStart, ɵɵdirectiveInject, ɵɵelement, ɵɵelementAttribute, ɵɵelementClassProp, ɵɵelementContainerEnd, ɵɵelementContainerStart, ɵɵelementEnd, ɵɵelementHostAttrs, ɵɵelementProperty, ɵɵelementStart, ɵɵelementStyleProp, ɵɵelementStyling, ɵɵelementStylingApply, ɵɵembeddedViewEnd, ɵɵembeddedViewStart, ɵɵinterpolation1, ɵɵinterpolation2, ɵɵinterpolation3, ɵɵinterpolation4, ɵɵinterpolation5, ɵɵinterpolation6, ɵɵinterpolation7, ɵɵinterpolation8, ɵɵinterpolationV, ɵɵprojection, ɵɵprojectionDef, ɵɵreference, ɵɵselect, ɵɵtemplate, ɵɵtext, ɵɵtextBinding} from '../../src/render3/instructions/all';
|
||||
import {AttributeMarker, ɵɵclassMap, ɵɵdefineComponent, ɵɵdefineDirective, ɵɵstyleMap, ɵɵtemplateRefExtractor} from '../../src/render3/index';
|
||||
import {ɵɵallocHostVars, ɵɵbind, ɵɵclassProp, ɵɵcontainer, ɵɵcontainerRefreshEnd, ɵɵcontainerRefreshStart, ɵɵdirectiveInject, ɵɵelement, ɵɵelementAttribute, ɵɵelementContainerEnd, ɵɵelementContainerStart, ɵɵelementEnd, ɵɵelementHostAttrs, ɵɵelementProperty, ɵɵelementStart, ɵɵembeddedViewEnd, ɵɵembeddedViewStart, ɵɵinterpolation1, ɵɵinterpolation2, ɵɵinterpolation3, ɵɵinterpolation4, ɵɵinterpolation5, ɵɵinterpolation6, ɵɵinterpolation7, ɵɵinterpolation8, ɵɵinterpolationV, ɵɵprojection, ɵɵprojectionDef, ɵɵreference, ɵɵselect, ɵɵstyleProp, ɵɵstyling, ɵɵstylingApply, ɵɵtemplate, ɵɵtext, ɵɵtextBinding} from '../../src/render3/instructions/all';
|
||||
import {MONKEY_PATCH_KEY_NAME} from '../../src/render3/interfaces/context';
|
||||
import {RenderFlags} from '../../src/render3/interfaces/definition';
|
||||
import {RElement, Renderer3, RendererFactory3, domRendererFactory3} from '../../src/render3/interfaces/renderer';
|
||||
@ -1421,13 +1421,13 @@ describe('render3 integration test', () => {
|
||||
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
|
||||
if (rf & RenderFlags.Create) {
|
||||
ɵɵelementStart(0, 'span');
|
||||
ɵɵelementStyling(null, ['border-color']);
|
||||
ɵɵstyling(null, ['border-color']);
|
||||
ɵɵelementEnd();
|
||||
}
|
||||
if (rf & RenderFlags.Update) {
|
||||
ɵɵselect(0);
|
||||
ɵɵelementStyleProp(0, ctx.color);
|
||||
ɵɵelementStylingApply();
|
||||
ɵɵstyleProp(0, ctx.color);
|
||||
ɵɵstylingApply();
|
||||
}
|
||||
}, 1);
|
||||
|
||||
@ -1449,13 +1449,13 @@ describe('render3 integration test', () => {
|
||||
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
|
||||
if (rf & RenderFlags.Create) {
|
||||
ɵɵelementStart(0, 'span');
|
||||
ɵɵelementStyling(null, ['font-size']);
|
||||
ɵɵstyling(null, ['font-size']);
|
||||
ɵɵelementEnd();
|
||||
}
|
||||
if (rf & RenderFlags.Update) {
|
||||
ɵɵselect(0);
|
||||
ɵɵelementStyleProp(0, ctx.time, 'px');
|
||||
ɵɵelementStylingApply();
|
||||
ɵɵstyleProp(0, ctx.time, 'px');
|
||||
ɵɵstylingApply();
|
||||
}
|
||||
}, 1);
|
||||
|
||||
@ -1484,13 +1484,13 @@ describe('render3 integration test', () => {
|
||||
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
|
||||
if (rf & RenderFlags.Create) {
|
||||
ɵɵelementStart(0, 'span');
|
||||
ɵɵelementStyling(['active']);
|
||||
ɵɵstyling(['active']);
|
||||
ɵɵelementEnd();
|
||||
}
|
||||
if (rf & RenderFlags.Update) {
|
||||
ɵɵselect(0);
|
||||
ɵɵelementClassProp(0, ctx.class);
|
||||
ɵɵelementStylingApply();
|
||||
ɵɵclassProp(0, ctx.class);
|
||||
ɵɵstylingApply();
|
||||
}
|
||||
}, 1);
|
||||
|
||||
@ -1526,13 +1526,13 @@ describe('render3 integration test', () => {
|
||||
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
|
||||
if (rf & RenderFlags.Create) {
|
||||
ɵɵelementStart(0, 'span', [AttributeMarker.Classes, 'existing']);
|
||||
ɵɵelementStyling(['existing', 'active']);
|
||||
ɵɵstyling(['existing', 'active']);
|
||||
ɵɵelementEnd();
|
||||
}
|
||||
if (rf & RenderFlags.Update) {
|
||||
ɵɵselect(0);
|
||||
ɵɵelementClassProp(1, ctx.class);
|
||||
ɵɵelementStylingApply();
|
||||
ɵɵclassProp(1, ctx.class);
|
||||
ɵɵstylingApply();
|
||||
}
|
||||
}, 1);
|
||||
|
||||
@ -1559,13 +1559,13 @@ describe('render3 integration test', () => {
|
||||
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
|
||||
if (rf & RenderFlags.Create) {
|
||||
ɵɵelementStart(0, 'my-comp');
|
||||
ɵɵelementStyling(['active']);
|
||||
ɵɵstyling(['active']);
|
||||
ɵɵelementEnd();
|
||||
}
|
||||
if (rf & RenderFlags.Update) {
|
||||
ɵɵselect(0);
|
||||
ɵɵelementClassProp(0, ctx.class);
|
||||
ɵɵelementStylingApply();
|
||||
ɵɵclassProp(0, ctx.class);
|
||||
ɵɵstylingApply();
|
||||
}
|
||||
}, 1, 0, [MyComp]);
|
||||
|
||||
@ -1622,14 +1622,14 @@ describe('render3 integration test', () => {
|
||||
ɵɵtemplate(
|
||||
0, FooTemplate, 1, 0, 'ng-template', null, ['foo', ''], ɵɵtemplateRefExtractor);
|
||||
ɵɵelementStart(2, 'structural-comp');
|
||||
ɵɵelementStyling(['active']);
|
||||
ɵɵstyling(['active']);
|
||||
ɵɵelementEnd();
|
||||
}
|
||||
if (rf & RenderFlags.Update) {
|
||||
const foo = ɵɵreference(1) as any;
|
||||
ɵɵselect(2);
|
||||
ɵɵelementClassProp(0, ctx.class);
|
||||
ɵɵelementStylingApply();
|
||||
ɵɵclassProp(0, ctx.class);
|
||||
ɵɵstylingApply();
|
||||
ɵɵelementProperty(2, 'tmp', ɵɵbind(foo));
|
||||
}
|
||||
}, 3, 1, [StructuralComp]);
|
||||
@ -1687,12 +1687,12 @@ describe('render3 integration test', () => {
|
||||
ɵɵelementStart(
|
||||
0, 'div',
|
||||
['DirWithClass', '', AttributeMarker.Classes, 'apple', 'orange', 'banana']);
|
||||
ɵɵelementStyling();
|
||||
ɵɵstyling();
|
||||
ɵɵelementEnd();
|
||||
}
|
||||
if (rf & RenderFlags.Update) {
|
||||
ɵɵselect(0);
|
||||
ɵɵelementStylingApply();
|
||||
ɵɵstylingApply();
|
||||
}
|
||||
}, 1, 0, [DirWithClassDirective]);
|
||||
|
||||
@ -1710,12 +1710,12 @@ describe('render3 integration test', () => {
|
||||
ɵɵelementStart(0, 'div', [
|
||||
'DirWithStyle', '', AttributeMarker.Styles, 'width', '100px', 'height', '200px'
|
||||
]);
|
||||
ɵɵelementStyling();
|
||||
ɵɵstyling();
|
||||
ɵɵelementEnd();
|
||||
}
|
||||
if (rf & RenderFlags.Update) {
|
||||
ɵɵselect(0);
|
||||
ɵɵelementStylingApply();
|
||||
ɵɵstylingApply();
|
||||
}
|
||||
}, 1, 0, [DirWithStyleDirective]);
|
||||
|
||||
@ -1731,13 +1731,13 @@ describe('render3 integration test', () => {
|
||||
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
|
||||
if (rf & RenderFlags.Create) {
|
||||
ɵɵelementStart(0, 'div', ['DirWithClass']);
|
||||
ɵɵelementStyling();
|
||||
ɵɵstyling();
|
||||
ɵɵelementEnd();
|
||||
}
|
||||
if (rf & RenderFlags.Update) {
|
||||
ɵɵselect(0);
|
||||
ɵɵelementClassMap('cucumber grape');
|
||||
ɵɵelementStylingApply();
|
||||
ɵɵclassMap('cucumber grape');
|
||||
ɵɵstylingApply();
|
||||
}
|
||||
}, 1, 0, [DirWithClassDirective]);
|
||||
|
||||
@ -1753,13 +1753,13 @@ describe('render3 integration test', () => {
|
||||
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
|
||||
if (rf & RenderFlags.Create) {
|
||||
ɵɵelementStart(0, 'div', ['DirWithStyle']);
|
||||
ɵɵelementStyling();
|
||||
ɵɵstyling();
|
||||
ɵɵelementEnd();
|
||||
}
|
||||
if (rf & RenderFlags.Update) {
|
||||
ɵɵselect(0);
|
||||
ɵɵelementStyleMap({width: '200px', height: '500px'});
|
||||
ɵɵelementStylingApply();
|
||||
ɵɵstyleMap({width: '200px', height: '500px'});
|
||||
ɵɵstylingApply();
|
||||
}
|
||||
}, 1, 0, [DirWithStyleDirective]);
|
||||
|
||||
@ -1830,13 +1830,13 @@ describe('render3 integration test', () => {
|
||||
if (rf & RenderFlags.Create) {
|
||||
ɵɵelementHostAttrs(
|
||||
[AttributeMarker.Classes, 'def', AttributeMarker.Styles, 'width', '555px']);
|
||||
ɵɵelementStyling(['xyz'], ['width', 'height']);
|
||||
ɵɵstyling(['xyz'], ['width', 'height']);
|
||||
}
|
||||
if (rf & RenderFlags.Update) {
|
||||
ɵɵelementStyleProp(0, ctx.width);
|
||||
ɵɵelementStyleProp(1, ctx.height);
|
||||
ɵɵelementClassProp(0, ctx.activateXYZClass);
|
||||
ɵɵelementStylingApply();
|
||||
ɵɵstyleProp(0, ctx.width);
|
||||
ɵɵstyleProp(1, ctx.height);
|
||||
ɵɵclassProp(0, ctx.activateXYZClass);
|
||||
ɵɵstylingApply();
|
||||
}
|
||||
}
|
||||
});
|
||||
@ -1903,11 +1903,11 @@ describe('render3 integration test', () => {
|
||||
factory: () => dir1Instance = new Dir1WithStyle(),
|
||||
hostBindings: function(rf: RenderFlags, ctx: Dir1WithStyle, elementIndex: number) {
|
||||
if (rf & RenderFlags.Create) {
|
||||
ɵɵelementStyling(null, ['width']);
|
||||
ɵɵstyling(null, ['width']);
|
||||
}
|
||||
if (rf & RenderFlags.Update) {
|
||||
ɵɵelementStyleProp(0, ctx.width);
|
||||
ɵɵelementStylingApply();
|
||||
ɵɵstyleProp(0, ctx.width);
|
||||
ɵɵstylingApply();
|
||||
}
|
||||
}
|
||||
});
|
||||
@ -1928,11 +1928,11 @@ describe('render3 integration test', () => {
|
||||
hostBindings: function(rf: RenderFlags, ctx: Dir2WithStyle, elementIndex: number) {
|
||||
if (rf & RenderFlags.Create) {
|
||||
ɵɵelementHostAttrs([AttributeMarker.Styles, 'width', '111px']);
|
||||
ɵɵelementStyling(null, ['width']);
|
||||
ɵɵstyling(null, ['width']);
|
||||
}
|
||||
if (rf & RenderFlags.Update) {
|
||||
ɵɵelementStyleProp(0, ctx.width);
|
||||
ɵɵelementStylingApply();
|
||||
ɵɵstyleProp(0, ctx.width);
|
||||
ɵɵstylingApply();
|
||||
}
|
||||
}
|
||||
});
|
||||
@ -1946,12 +1946,12 @@ describe('render3 integration test', () => {
|
||||
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
|
||||
if (rf & RenderFlags.Create) {
|
||||
ɵɵelement(0, 'div', ['Dir1WithStyle', '', 'Dir2WithStyle', '']);
|
||||
ɵɵelementStyling(null, ['width']);
|
||||
ɵɵstyling(null, ['width']);
|
||||
}
|
||||
if (rf & RenderFlags.Update) {
|
||||
ɵɵselect(0);
|
||||
ɵɵelementStyleProp(0, ctx.width);
|
||||
ɵɵelementStylingApply();
|
||||
ɵɵstyleProp(0, ctx.width);
|
||||
ɵɵstylingApply();
|
||||
}
|
||||
}, 1, 0, [Dir1WithStyle, Dir2WithStyle]);
|
||||
|
||||
@ -2001,12 +2001,12 @@ describe('render3 integration test', () => {
|
||||
factory: () => dir1Instance = new Dir1WithStyling(),
|
||||
hostBindings: function(rf: RenderFlags, ctx: Dir1WithStyling, elementIndex: number) {
|
||||
if (rf & RenderFlags.Create) {
|
||||
ɵɵelementStyling();
|
||||
ɵɵstyling();
|
||||
}
|
||||
if (rf & RenderFlags.Update) {
|
||||
ɵɵelementStyleMap(ctx.stylesExp);
|
||||
ɵɵelementClassMap(ctx.classesExp);
|
||||
ɵɵelementStylingApply();
|
||||
ɵɵstyleMap(ctx.stylesExp);
|
||||
ɵɵclassMap(ctx.classesExp);
|
||||
ɵɵstylingApply();
|
||||
}
|
||||
}
|
||||
});
|
||||
@ -2029,11 +2029,11 @@ describe('render3 integration test', () => {
|
||||
hostBindings: function(rf: RenderFlags, ctx: Dir2WithStyling, elementIndex: number) {
|
||||
if (rf & RenderFlags.Create) {
|
||||
ɵɵelementHostAttrs([AttributeMarker.Styles, 'width', '111px']);
|
||||
ɵɵelementStyling();
|
||||
ɵɵstyling();
|
||||
}
|
||||
if (rf & RenderFlags.Update) {
|
||||
ɵɵelementStyleMap(ctx.stylesExp);
|
||||
ɵɵelementStylingApply();
|
||||
ɵɵstyleMap(ctx.stylesExp);
|
||||
ɵɵstylingApply();
|
||||
}
|
||||
}
|
||||
});
|
||||
@ -2048,13 +2048,13 @@ describe('render3 integration test', () => {
|
||||
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
|
||||
if (rf & RenderFlags.Create) {
|
||||
ɵɵelement(0, 'div', ['Dir1WithStyling', '', 'Dir2WithStyling', '']);
|
||||
ɵɵelementStyling();
|
||||
ɵɵstyling();
|
||||
}
|
||||
if (rf & RenderFlags.Update) {
|
||||
ɵɵselect(0);
|
||||
ɵɵelementStyleMap(ctx.stylesExp);
|
||||
ɵɵelementClassMap(ctx.classesExp);
|
||||
ɵɵelementStylingApply();
|
||||
ɵɵstyleMap(ctx.stylesExp);
|
||||
ɵɵclassMap(ctx.classesExp);
|
||||
ɵɵstylingApply();
|
||||
}
|
||||
}, 1, 0, [Dir1WithStyling, Dir2WithStyling]);
|
||||
|
||||
@ -2126,13 +2126,13 @@ describe('render3 integration test', () => {
|
||||
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
|
||||
if (rf & RenderFlags.Create) {
|
||||
ɵɵelementStart(0, 'div');
|
||||
ɵɵelementStyling();
|
||||
ɵɵstyling();
|
||||
ɵɵelementEnd();
|
||||
}
|
||||
if (rf & RenderFlags.Update) {
|
||||
ɵɵselect(0);
|
||||
ɵɵelementClassMap(ɵɵinterpolation2('-', ctx.name, '-', ctx.age, '-'));
|
||||
ɵɵelementStylingApply();
|
||||
ɵɵclassMap(ɵɵinterpolation2('-', ctx.name, '-', ctx.age, '-'));
|
||||
ɵɵstylingApply();
|
||||
}
|
||||
}, 1, 2);
|
||||
|
||||
@ -2627,12 +2627,12 @@ describe('element discovery', () => {
|
||||
template: (rf: RenderFlags, ctx: StructuredComp) => {
|
||||
if (rf & RenderFlags.Create) {
|
||||
ɵɵelementStart(0, 'section');
|
||||
ɵɵelementStyling(['class-foo']);
|
||||
ɵɵstyling(['class-foo']);
|
||||
ɵɵelementEnd();
|
||||
}
|
||||
if (rf & RenderFlags.Update) {
|
||||
ɵɵselect(0);
|
||||
ɵɵelementStylingApply();
|
||||
ɵɵstylingApply();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@ -9,7 +9,7 @@ import {createLView, createTView} from '@angular/core/src/render3/instructions/s
|
||||
|
||||
import {createRootContext} from '../../../src/render3/component';
|
||||
import {getLContext} from '../../../src/render3/context_discovery';
|
||||
import {ɵɵdefineComponent, ɵɵdefineDirective, ɵɵelementClassMap, ɵɵelementClassProp, ɵɵelementEnd, ɵɵelementStart, ɵɵelementStyleMap, ɵɵelementStyleProp, ɵɵelementStyling, ɵɵelementStylingApply, ɵɵnamespaceSVG, ɵɵselect} from '../../../src/render3/index';
|
||||
import {ɵɵclassMap, ɵɵclassProp, ɵɵdefineComponent, ɵɵdefineDirective, ɵɵelementEnd, ɵɵelementStart, ɵɵnamespaceSVG, ɵɵselect, ɵɵstyleMap, ɵɵstyleProp, ɵɵstyling, ɵɵstylingApply} from '../../../src/render3/index';
|
||||
import {RenderFlags} from '../../../src/render3/interfaces/definition';
|
||||
import {AttributeMarker, TAttributes} from '../../../src/render3/interfaces/node';
|
||||
import {BindingStore, BindingType, PlayState, Player, PlayerContext, PlayerFactory, PlayerHandler} from '../../../src/render3/interfaces/player';
|
||||
@ -392,14 +392,14 @@ describe('style and class based bindings', () => {
|
||||
'opacity',
|
||||
'0.5',
|
||||
]);
|
||||
ɵɵelementStyling(null, ['width']);
|
||||
ɵɵstyling(null, ['width']);
|
||||
ɵɵelementEnd();
|
||||
}
|
||||
if (rf & RenderFlags.Update) {
|
||||
ɵɵselect(0);
|
||||
ɵɵelementStyleMap(ctx.myStyles);
|
||||
ɵɵelementStyleProp(0, ctx.myWidth);
|
||||
ɵɵelementStylingApply();
|
||||
ɵɵstyleMap(ctx.myStyles);
|
||||
ɵɵstyleProp(0, ctx.myWidth);
|
||||
ɵɵstylingApply();
|
||||
}
|
||||
}
|
||||
|
||||
@ -429,16 +429,16 @@ describe('style and class based bindings', () => {
|
||||
if (rf & RenderFlags.Create) {
|
||||
ɵɵnamespaceSVG();
|
||||
ɵɵelementStart(0, 'svg');
|
||||
ɵɵelementStyling(null, ['width', 'height']);
|
||||
ɵɵstyling(null, ['width', 'height']);
|
||||
ɵɵelementStart(1, 'circle', ['stroke', 'green', 'fill', 'yellow']);
|
||||
ɵɵelementEnd();
|
||||
ɵɵelementEnd();
|
||||
}
|
||||
if (rf & RenderFlags.Update) {
|
||||
ɵɵselect(0);
|
||||
ɵɵelementStyleProp(0, ctx.diameter, 'px');
|
||||
ɵɵelementStyleProp(1, ctx.diameter, 'px');
|
||||
ɵɵelementStylingApply();
|
||||
ɵɵstyleProp(0, ctx.diameter, 'px');
|
||||
ɵɵstyleProp(1, ctx.diameter, 'px');
|
||||
ɵɵstylingApply();
|
||||
}
|
||||
}
|
||||
});
|
||||
@ -471,14 +471,14 @@ describe('style and class based bindings', () => {
|
||||
template: (rf: RenderFlags, ctx: Comp) => {
|
||||
if (rf & RenderFlags.Create) {
|
||||
ɵɵelementStart(0, 'div');
|
||||
ɵɵelementStyling(null, ['borderWidth', 'border-color']);
|
||||
ɵɵstyling(null, ['borderWidth', 'border-color']);
|
||||
ɵɵelementEnd();
|
||||
}
|
||||
if (rf & RenderFlags.Update) {
|
||||
ɵɵselect(0);
|
||||
ɵɵelementStyleProp(0, ctx.borderWidth);
|
||||
ɵɵelementStyleProp(1, ctx.borderColor);
|
||||
ɵɵelementStylingApply();
|
||||
ɵɵstyleProp(0, ctx.borderWidth);
|
||||
ɵɵstyleProp(1, ctx.borderColor);
|
||||
ɵɵstylingApply();
|
||||
}
|
||||
}
|
||||
});
|
||||
@ -3109,16 +3109,16 @@ describe('style and class based bindings', () => {
|
||||
template: (rf: RenderFlags, ctx: Comp) => {
|
||||
if (rf & RenderFlags.Create) {
|
||||
ɵɵelementStart(0, 'div');
|
||||
ɵɵelementStyling(['foo'], ['width']);
|
||||
ɵɵstyling(['foo'], ['width']);
|
||||
ɵɵelementEnd();
|
||||
}
|
||||
if (rf & RenderFlags.Update) {
|
||||
ɵɵselect(0);
|
||||
ɵɵelementStyleMap(styleMapFactory);
|
||||
ɵɵelementClassMap(classMapFactory);
|
||||
ɵɵelementStyleProp(0, widthFactory);
|
||||
ɵɵelementClassProp(0, fooFactory);
|
||||
ɵɵelementStylingApply();
|
||||
ɵɵstyleMap(styleMapFactory);
|
||||
ɵɵclassMap(classMapFactory);
|
||||
ɵɵstyleProp(0, widthFactory);
|
||||
ɵɵclassProp(0, fooFactory);
|
||||
ɵɵstylingApply();
|
||||
}
|
||||
}
|
||||
});
|
||||
@ -3184,16 +3184,16 @@ describe('style and class based bindings', () => {
|
||||
template: (rf: RenderFlags, ctx: Comp) => {
|
||||
if (rf & RenderFlags.Create) {
|
||||
ɵɵelementStart(0, 'div');
|
||||
ɵɵelementStyling(['foo'], ['width']);
|
||||
ɵɵstyling(['foo'], ['width']);
|
||||
ɵɵelementEnd();
|
||||
}
|
||||
if (rf & RenderFlags.Update) {
|
||||
ɵɵselect(0);
|
||||
ɵɵelementStyleMap(styleMapFactory);
|
||||
ɵɵelementClassMap(classMapFactory);
|
||||
ɵɵelementStyleProp(0, widthFactory);
|
||||
ɵɵelementClassProp(0, fooFactory);
|
||||
ɵɵelementStylingApply();
|
||||
ɵɵstyleMap(styleMapFactory);
|
||||
ɵɵclassMap(classMapFactory);
|
||||
ɵɵstyleProp(0, widthFactory);
|
||||
ɵɵclassProp(0, fooFactory);
|
||||
ɵɵstylingApply();
|
||||
}
|
||||
}
|
||||
});
|
||||
@ -3257,12 +3257,12 @@ describe('style and class based bindings', () => {
|
||||
factory: () => new MyDir(),
|
||||
hostBindings: function(rf: RenderFlags, ctx: MyDir, elementIndex: number) {
|
||||
if (rf & RenderFlags.Create) {
|
||||
ɵɵelementStyling(['foo'], ['width']);
|
||||
ɵɵstyling(['foo'], ['width']);
|
||||
}
|
||||
if (rf & RenderFlags.Update) {
|
||||
ɵɵelementStyleProp(0, ctx.widthFactory);
|
||||
ɵɵelementClassProp(0, ctx.fooFactory);
|
||||
ɵɵelementStylingApply();
|
||||
ɵɵstyleProp(0, ctx.widthFactory);
|
||||
ɵɵclassProp(0, ctx.fooFactory);
|
||||
ɵɵstylingApply();
|
||||
}
|
||||
}
|
||||
});
|
||||
@ -3282,14 +3282,14 @@ describe('style and class based bindings', () => {
|
||||
template: (rf: RenderFlags, ctx: Comp) => {
|
||||
if (rf & RenderFlags.Create) {
|
||||
ɵɵelementStart(0, 'div', ['my-dir', '']);
|
||||
ɵɵelementStyling(['foo'], ['width']);
|
||||
ɵɵstyling(['foo'], ['width']);
|
||||
ɵɵelementEnd();
|
||||
}
|
||||
if (rf & RenderFlags.Update) {
|
||||
ɵɵselect(0);
|
||||
ɵɵelementStyleProp(0, ctx.widthFactory);
|
||||
ɵɵelementClassProp(0, ctx.fooFactory);
|
||||
ɵɵelementStylingApply();
|
||||
ɵɵstyleProp(0, ctx.widthFactory);
|
||||
ɵɵclassProp(0, ctx.fooFactory);
|
||||
ɵɵstylingApply();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@ -9,7 +9,7 @@ import {QueryList} from '@angular/core';
|
||||
import {RenderFlags} from '@angular/core/src/render3';
|
||||
|
||||
import {getHostElement, ɵɵdefineComponent, ɵɵloadViewQuery, ɵɵviewQuery} from '../../../src/render3/index';
|
||||
import {markDirty, ɵɵelement, ɵɵelementEnd, ɵɵelementStart, ɵɵelementStyling, ɵɵelementStylingApply, ɵɵselect} from '../../../src/render3/instructions/all';
|
||||
import {markDirty, ɵɵelement, ɵɵelementEnd, ɵɵelementStart, ɵɵselect, ɵɵstyling, ɵɵstylingApply} from '../../../src/render3/instructions/all';
|
||||
import {PlayState, Player, PlayerHandler} from '../../../src/render3/interfaces/player';
|
||||
import {RElement} from '../../../src/render3/interfaces/renderer';
|
||||
import {addPlayer, getPlayers} from '../../../src/render3/players';
|
||||
@ -258,12 +258,12 @@ class CompWithStyling {
|
||||
template: (rf: RenderFlags, ctx: CompWithStyling) => {
|
||||
if (rf & RenderFlags.Create) {
|
||||
ɵɵelementStart(0, 'div');
|
||||
ɵɵelementStyling(['fooClass']);
|
||||
ɵɵstyling(['fooClass']);
|
||||
ɵɵelementEnd();
|
||||
}
|
||||
if (rf & RenderFlags.Update) {
|
||||
ɵɵselect(0);
|
||||
ɵɵelementStylingApply();
|
||||
ɵɵstylingApply();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user